/* ============================================================
   Creatist & Co — Design tokens v1.0 (Nov 2026)
   Source of truth: Paper file "Sunny elm" → page "Design System".
   If you change a value, change it in Paper too (or ask Claude to sync).
   Base: Kinetic SMM Studio reference (exact hex values from its
   color system) + Creatist serif-italic accent.
   ============================================================ */

:root {
  /* ---- Color: neutrals ---- */
  --color-bg: #FBFBFB;              /* Pure White — page ground */
  --color-surface: #FFFFFF;         /* cards / inputs on light or grey */
  --color-surface-muted: #DEDEDE;   /* Neutral Grey — secondary surfaces */
  --color-ink: #040404;             /* Deep Black — text + dark sections */
  --color-ink-raised: #141414;      /* cards on dark sections */

  /* ---- Color: text (contrast-checked, WCAG AA) ---- */
  --color-text: #040404;
  --color-text-muted: #6B6B6B;          /* 5.15:1 on #FBFBFB — NOT on grey */
  --color-text-muted-on-grey: #555555;  /* 5.54:1 on #DEDEDE */
  --color-text-inverse: #FBFBFB;
  --color-text-inverse-muted: #8F8F8F;  /* 6.34:1 on #040404 */

  /* ---- Color: lines ---- */
  --color-border: rgb(4 4 4 / 12%);
  --color-border-inverse: rgb(251 251 251 / 16%);

  /* ---- Color: accent (one orange moment per view) ---- */
  --color-accent: #FF4000;          /* Kinetic Orange */
  --color-accent-hover: #E63900;
  --color-on-accent: #040404;       /* 5.84:1. White on orange = 3.39:1 → only 24px+ */

  /* ---- Color: states ---- */
  --color-success: #15803D;         /* 4.85:1 on #FBFBFB */
  --color-error: #D92D20;           /* 4.67:1 on #FBFBFB */

  /* ---- Type families ---- */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Instrument Serif", ui-serif, Georgia, serif;   /* italic only, 1–3 words per headline */
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --font-weight-regular: 400;
  --font-weight-medium: 500;        /* never heavier */

  /* ---- Type scale (desktop) ---- */
  --text-xs: 12px;     /* mono eyebrows/tags, uppercase */
  --text-sm: 14px;     /* captions, card descriptions */
  --text-base: 16px;   /* body, buttons, inputs */
  --text-lg: 20px;     /* lede */
  --text-xl: 30px;     /* H3 / card titles */
  --text-2xl: 44px;    /* statements; H2 on mobile */
  --text-3xl: 70px;    /* H2 */
  --text-4xl: 120px;   /* H1 */
  --text-mega: 400px;  /* edge-to-edge wordmark */

  --tracking-tighter: -0.05em;  /* 70px+ */
  --tracking-tight: -0.025em;   /* 30–44px */
  --tracking-normal: 0em;
  --tracking-wide: 0.08em;      /* uppercase mono */

  --leading-none: 0.9;
  --leading-tight: 1;
  --leading-snug: 1.2;
  --leading-normal: 1.55;

  /* ---- Spacing (4px base) ---- */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-24: 96px;    /* section padding — mobile */
  --spacing-40: 160px;   /* section padding — desktop */

  /* ---- Radius ---- */
  --radius-sm: 8px;      /* thumbnails */
  --radius-md: 16px;     /* inputs */
  --radius-lg: 24px;     /* cards */
  --radius-xl: 32px;     /* panels, large media */
  --radius-full: 999px;  /* buttons, tags, inline pills */

  /* ---- Opacity ---- */
  --opacity-subtle: 8%;
  --opacity-muted: 40%;
  --opacity-strong: 72%;

  /* ---- Layout ---- */
  --container-prose: 640px;
  --container-content: 1240px;
  --container-wide: 1440px;
  --page-padding: 64px;           /* 40px ≤1024, 20px ≤640 */

  /* ---- Motion ---- */
  --duration-fast: 160ms;         /* hover, press, focus */
  --duration-base: 320ms;         /* expand, menus */
  --duration-reveal: 700ms;       /* headline line reveals, y 24px→0, stagger 60ms */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ---- Component constants ---- */
  --control-height: 52px;         /* buttons, inputs */
  --tap-min: 44px;
  --nav-height: 72px;
}

/* Breakpoints (CSS vars can't be used in media queries — reference values):
   sm 640 · md 768 · lg 1024 · xl 1280 · 2xl 1440 */

@media (max-width: 1024px) {
  :root { --page-padding: 40px; --text-4xl: 88px; --text-3xl: 56px; }
}
@media (max-width: 640px) {
  :root {
    --page-padding: 20px;
    --text-4xl: 56px;
    --text-3xl: 44px;
    --text-2xl: 30px;
    --spacing-40: 96px;
  }
}

/* Fluid wordmark: font-size: clamp(112px, 27vw, var(--text-mega)); letter-spacing: -0.06em; line-height: 0.78; */

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-reveal: 0ms; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--color-accent); color: var(--color-on-accent); }

.wrap { width: 100%; max-width: calc(var(--container-content) + var(--page-padding) * 2); margin: 0 auto; padding: 0 var(--page-padding); }
.section { padding: var(--spacing-40) 0; }
.section--ink { background: var(--color-ink); color: var(--color-text-inverse); }
.section--tight-top { padding-top: var(--spacing-16); }

/* ---------- Type helpers ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--color-text-muted);
}
.section--ink .eyebrow { color: var(--color-text-inverse-muted); }
.dot { width: 7px; height: 7px; border-radius: 99px; background: var(--color-accent); flex-shrink: 0; }
.serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; }
.accent { color: var(--color-accent); }
.muted { color: var(--color-text-muted); }
.section--ink .muted { color: var(--color-text-inverse-muted); }
.h-display { font-weight: 500; font-size: var(--text-3xl); line-height: 1; letter-spacing: var(--tracking-tighter); }
.h-statement { font-weight: 500; font-size: var(--text-2xl); line-height: 1.08; letter-spacing: var(--tracking-tight); }
.h-card { font-weight: 500; font-size: var(--text-xl); line-height: 1.15; letter-spacing: var(--tracking-tight); }
.lede { font-size: var(--text-lg); line-height: 1.5; }

.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: var(--spacing-16); }
.section-head__left { display: flex; flex-direction: column; gap: 20px; }
.section-head p { max-width: 380px; }
.big-title { font-weight: 500; font-size: clamp(48px, 7.2vw, 104px); line-height: 0.88; letter-spacing: -0.055em; }

/* ---------- Buttons & tags ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px; height: var(--control-height); padding: 0 24px;
  border-radius: var(--radius-full); font-weight: 500; font-size: var(--text-base); white-space: nowrap;
  transition: transform var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn--accent { background: var(--color-accent); color: var(--color-on-accent); padding-right: 8px; }
.btn--accent:hover { background: var(--color-accent-hover); }
.btn__chip { width: 36px; height: 36px; border-radius: 99px; background: var(--color-ink); color: var(--color-text-inverse); display: grid; place-items: center; transition: transform var(--duration-base) var(--ease-out); }
.btn:hover .btn__chip { transform: rotate(45deg); }
.btn--ink { background: var(--color-ink); color: var(--color-text-inverse); }
.btn--light { background: var(--color-text-inverse); color: var(--color-text); }
.btn--ghost { border: 1px solid currentColor; }
.link { font-weight: 500; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.link:hover { color: var(--color-accent); }

.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  padding: 6px 14px; border-radius: var(--radius-full); border: 1px solid var(--color-border);
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.04em; text-transform: uppercase;
}
.tag--solid { border-color: var(--color-ink); }
.section--ink .tag { border-color: var(--color-border-inverse); }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 16px; z-index: 50; padding: 0 var(--page-padding); }
.nav__inner {
  max-width: var(--container-content); margin: 0 auto; height: var(--nav-height);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 10px 0 24px; border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-bg) 78%, transparent);
  border: 1px solid var(--color-border);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 18px; letter-spacing: -0.01em; white-space: nowrap; }
.brand .serif { font-size: 20px; }
.brand__dot { color: inherit; }   /* the dot after "Co" is in the text colour (black); only the big wordmark dot is orange */
.nav__links { display: flex; gap: 32px; font-size: var(--text-sm); }
.nav__links a:hover { color: var(--color-accent); }
.nav__actions { display: flex; align-items: center; gap: 8px; }
.nav__toggle { display: none; width: 44px; height: 44px; border-radius: 99px; border: 1px solid var(--color-border); background: var(--color-surface); flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; }
.nav__toggle span { display: block; width: 16px; height: 1.6px; border-radius: 2px; background: var(--color-text); transition: transform var(--duration-base) var(--ease-out); }
.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(3.3px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.3px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding-top: 72px; }
.hero__glow {
  position: absolute; right: -10%; top: 4%; width: 70vw; max-width: 1000px; aspect-ratio: 2 / 1;
  border-radius: 999px; filter: blur(70px); transform: rotate(-14deg);
  background: radial-gradient(closest-side, rgb(255 64 0 / 0.55), rgb(255 64 0 / 0.12) 60%, transparent);
  pointer-events: none;
}
.hero__top { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; }
.hero .wordmark { pointer-events: none; }   /* decorative; its tall text box overlaps the hero buttons */
.hero__copy { max-width: 640px; display: flex; flex-direction: column; gap: 28px; }
.hero__title { font-weight: 500; font-size: var(--text-2xl); line-height: 1.08; letter-spacing: var(--tracking-tight); }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -8px; }
.hero__chips .tag { background: var(--color-surface); }
.hero__cta .btn--ghost { border-color: var(--color-border); background: var(--color-surface); }
.hero__cta .btn--ghost:hover { border-color: var(--color-text); }
.hero__down { display: inline-block; transition: transform var(--duration-base) var(--ease-out); }
.hero__cta .btn--ghost:hover .hero__down { transform: translateY(3px); }
.hero__aside { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; text-align: right; }
.avatars { display: flex; }
.avatars img, .avatars span {
  width: 44px; height: 44px; border-radius: 99px; border: 2px solid var(--color-bg); object-fit: cover;
  margin-left: -10px; background: var(--color-ink); color: var(--color-text-inverse);
  display: grid; place-items: center; font-weight: 500; font-size: 15px;
}
.avatars :first-child { margin-left: 0; }
.wordmark {
  position: relative; display: block; margin-top: 56px;
  font-weight: 500; font-size: clamp(112px, 26.5vw, var(--text-mega)); line-height: 0.78; letter-spacing: -0.065em;
  white-space: nowrap; margin-left: -0.04em;
}
.wordmark__dot { color: var(--color-accent); margin-left: 0.03em; }   /* same visible gap after the "t" at every size (it touched on phones) */
.marquee { overflow: hidden; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); margin-top: 48px; }
.marquee__track { display: flex; gap: 40px; width: max-content; padding: 18px 0; animation: marquee 40s linear infinite; }
.marquee__track span { font-weight: 500; font-size: var(--text-lg); white-space: nowrap; display: inline-flex; align-items: center; gap: 40px; }
.marquee__track span::after { content: ""; width: 8px; height: 8px; border-radius: 99px; background: var(--color-accent); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- About + bento ---------- */
.about__statement { font-weight: 500; font-size: clamp(26px, 3vw, 42px); line-height: 1.08; letter-spacing: var(--tracking-tight); max-width: 1080px; }
.about__statement .fade { color: #9A9A9A; }
.bento { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 16px; margin-top: var(--spacing-16); }
.card { border-radius: var(--radius-lg); padding: 28px; min-height: 360px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.card--ink { background: var(--color-ink); color: var(--color-text-inverse); }
.card--grey { background: var(--color-surface-muted); }
.card--line { background: var(--color-surface); border: 1px solid var(--color-border); }
.card__glow { position: absolute; right: -80px; bottom: -120px; width: 420px; height: 300px; border-radius: 999px; background: radial-gradient(closest-side, rgb(255 64 0 / 0.75), transparent); filter: blur(30px); pointer-events: none; }
.card--media { padding: 0; background: #0B0B0C; }
.card--media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1.2s var(--ease-out); }
.card--media:hover img { transform: scale(1.04); }
.card--media .card__caption { position: relative; margin-top: auto; padding: 22px; background: linear-gradient(transparent, rgb(4 4 4 / 0.85)); color: var(--color-text-inverse); font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; }
.metric { font-weight: 500; font-size: var(--text-3xl); line-height: 1; letter-spacing: var(--tracking-tighter); }
.about__foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--color-border); }

/* ---------- Services ---------- */
.services { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: start; }
.acc__item { border-top: 1px solid var(--color-border); }
.acc__item:last-child { border-bottom: 1px solid var(--color-border); }
.acc__btn { width: 100%; display: flex; align-items: center; gap: 24px; padding: 28px 0; text-align: left; }
.acc__n { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); width: 32px; flex-shrink: 0; }
.acc__title { flex: 1; font-weight: 500; font-size: var(--text-xl); letter-spacing: var(--tracking-tight); transition: color var(--duration-fast); }
.acc__btn:hover .acc__title { color: var(--color-accent); }
.acc__icon { width: 36px; height: 36px; border-radius: 99px; border: 1px solid var(--color-border); display: grid; place-items: center; flex-shrink: 0; transition: transform var(--duration-base) var(--ease-out), background var(--duration-base); }
.acc__item.is-open .acc__icon { transform: rotate(45deg); background: var(--color-accent); border-color: var(--color-accent); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--duration-base) var(--ease-out); }
.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__body { display: flex; flex-direction: column; gap: 16px; padding: 0 0 28px 56px; max-width: 620px; }
.services__media { position: sticky; top: 120px; border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4 / 5; background: var(--color-ink); display: grid; place-items: center; }
.services__media .card__glow { right: auto; left: -60px; top: 30%; bottom: auto; width: 560px; height: 280px; transform: rotate(-12deg); }
.services__media img { position: relative; width: 52%; border-radius: 30px; border: 6px solid #000; box-shadow: 0 40px 80px rgb(0 0 0 / 0.5); }
.services__badge { position: absolute; left: 24px; bottom: 24px; right: 24px; display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-radius: var(--radius-md); background: rgb(4 4 4 / 0.6); backdrop-filter: blur(10px); color: var(--color-text-inverse); font-size: var(--text-sm); }

/* ---------- Process ---------- */
.process { position: relative; overflow: hidden; }
.process__glow { position: absolute; left: -15%; top: -10%; width: 900px; height: 500px; border-radius: 999px; background: radial-gradient(closest-side, rgb(255 64 0 / 0.33), transparent); filter: blur(60px); pointer-events: none; }
.timeline { position: relative; margin-bottom: 48px; }
.timeline__weeks { display: grid; grid-template-columns: repeat(9, 1fr); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-inverse-muted); padding-bottom: 14px; }
.timeline__weeks span:first-child { color: var(--color-accent); }
.timeline__track { height: 2px; background: var(--color-border-inverse); position: relative; }
.timeline__fill { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, var(--color-accent), rgb(255 64 0 / 0.3)); transition: width 2.4s var(--ease-out); }
.timeline.is-in .timeline__fill { width: 100%; }
.timeline__bars { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; margin-top: 14px; }
.bar { height: 36px; border-radius: 99px; display: flex; align-items: center; padding: 0 14px; font-weight: 500; font-size: var(--text-sm); white-space: nowrap; overflow: hidden; }
.bar--discover { grid-column: 1 / 2; background: var(--color-accent); color: var(--color-on-accent); }
.bar--design { grid-column: 2 / 4; background: var(--color-text-inverse); color: var(--color-text); }
.bar--build { grid-column: 4 / 9; border: 1px solid var(--color-text-inverse); }
.bar--launch { grid-column: 9 / 10; background: #2A2A2A; }
.stages { display: grid; grid-template-columns: 1fr 1fr 1.25fr 1fr; gap: 16px; }
.stage { display: flex; flex-direction: column; gap: 24px; padding: 28px; border-radius: var(--radius-lg); background: var(--color-ink-raised); border: 1px solid var(--color-border-inverse); transition: border-color var(--duration-base), transform var(--duration-base) var(--ease-out); }
.stage:hover { transform: translateY(-4px); border-color: rgb(255 64 0 / 0.6); }
.stage--hot { border-color: var(--color-accent); box-shadow: 0 0 0 6px rgb(255 64 0 / 0.08); }
.stage__top { display: flex; justify-content: space-between; align-items: baseline; }
.stage__n { font-family: var(--font-serif); font-style: italic; font-size: 52px; line-height: 0.8; color: var(--color-accent); }
.stage__when { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-inverse-muted); }
.artifact { height: 216px; border-radius: var(--radius-md); background: var(--color-bg); color: var(--color-text); font-size: 13px; overflow: hidden; }
.artifact--plan { display: flex; flex-direction: column; gap: 10px; padding: 18px; }
.artifact__label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); }
.check { display: flex; align-items: center; gap: 8px; }
.check::before { content: ""; width: 14px; height: 14px; border-radius: 4px; background: var(--color-ink); flex-shrink: 0; }
.artifact__foot { margin-top: auto; display: flex; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--color-border); font-weight: 500; }
.artifact--proto { background: #1E1E1E; display: flex; justify-content: center; align-items: center; gap: 14px; position: relative; }
.wire { width: 84px; height: 164px; border-radius: 16px; background: var(--color-bg); padding: 10px 8px; display: flex; flex-direction: column; gap: 6px; }
.wire i { display: block; border-radius: 4px; background: var(--color-surface-muted); }
.wire__cta { margin-top: auto; height: 22px; border-radius: 99px !important; background: var(--color-accent) !important; }
.tap { position: absolute; left: calc(50% - 84px); bottom: 26px; width: 28px; height: 28px; border-radius: 99px; border: 2px solid var(--color-accent); background: rgb(255 64 0 / 0.2); animation: tap 1.8s var(--ease-out) infinite; }
@keyframes tap { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.tf__head, .tf__row { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; }
.tf__head { border-bottom: 1px solid var(--color-border); font-weight: 500; }
.tf__row + .tf__row { border-top: 1px solid rgb(4 4 4 / 0.06); }
.tf__row--new { background: rgb(255 64 0 / 0.08); }
.tf__row small { display: block; font-size: 12px; color: var(--color-text-muted); }
.tf__install { padding: 4px 12px; border-radius: 99px; background: var(--color-accent); font-weight: 500; font-size: 12px; }
.mono-sm { font-family: var(--font-mono); font-size: 11px; color: var(--color-text-muted); }
.artifact--store { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 18px; }
.store__app { display: flex; align-items: center; gap: 12px; }
.store__icon { width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, var(--color-ink), var(--color-accent)); flex-shrink: 0; }
.store__status { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: rgb(21 128 61 / 0.1); color: var(--color-success); font-weight: 500; }
.store__status::before { content: ""; width: 8px; height: 8px; border-radius: 99px; background: currentColor; }
.stage__text { display: flex; flex-direction: column; gap: 8px; }
.stage__text p { font-size: var(--text-sm); color: var(--color-text-inverse-muted); }
.promises { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--color-border-inverse); }
.promise { display: flex; gap: 14px; }
.promise b { font-weight: 500; font-size: var(--text-lg); display: block; margin-bottom: 6px; }
.promise p { font-size: var(--text-sm); color: var(--color-text-inverse-muted); }

/* ---------- Work (tabs) ---------- */
.tabs { display: inline-flex; padding: 4px; border-radius: var(--radius-full); background: var(--color-surface-muted); }
.tab { height: 44px; padding: 0 20px; border-radius: var(--radius-full); font-weight: 500; font-size: var(--text-sm); color: var(--color-text-muted-on-grey); transition: background var(--duration-base), color var(--duration-base); }
.tab[aria-selected="true"] { background: var(--color-ink); color: var(--color-text-inverse); }
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.work-grid[hidden] { display: none; }
.work-grid--studio { grid-template-columns: 1.4fr 1fr 1fr; grid-auto-rows: auto; }
.project { display: flex; flex-direction: column; gap: 16px; }
.project__media { position: relative; aspect-ratio: 4 / 3.2; border-radius: var(--radius-lg); overflow: hidden; display: flex; align-items: flex-end; justify-content: center; gap: 10px; padding: 28px 20px 0; }
.project__media img { width: 34%; border-radius: 16px 16px 0 0; object-fit: cover; object-position: top; transition: transform 0.6s var(--ease-out); }
.project__media img:nth-child(2) { transform: translateY(-16px); }
.project:hover .project__media img { transform: translateY(-8px); }
.project:hover .project__media img:nth-child(2) { transform: translateY(-24px); }
.project__media--wide img { width: 100%; border-radius: 12px 12px 0 0; }
.project__media--art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; transform: none !important; }
.project__media--contain img { position: static; width: 46%; object-fit: contain; border-radius: 0; align-self: center; margin-bottom: 20px; }
.project__badge { position: absolute; top: 16px; left: 16px; padding: 6px 12px; border-radius: 99px; background: var(--color-ink); color: var(--color-text-inverse); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; z-index: 1; }
.project__badge--accent { background: var(--color-accent); color: var(--color-on-accent); }
.project__meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.project__meta h3 { font-weight: 500; font-size: var(--text-lg); }
.project__meta p { font-size: var(--text-sm); color: var(--color-text-muted); }
.project__result { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--color-border); }
.work-cta { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 48px; }

/* ---------- Milestones ---------- */
.milestones { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--color-border); }
.milestone { padding: 32px 32px 0 0; display: flex; flex-direction: column; gap: 10px; }
.milestone + .milestone { padding-left: 32px; border-left: 1px solid var(--color-border); }
.milestone b { font-weight: 500; font-size: clamp(36px, 4vw, 56px); line-height: 1; letter-spacing: var(--tracking-tighter); }
.milestone span { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---------- Team ---------- */
.team { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.person { display: flex; flex-direction: column; gap: 14px; }
.person__photo { aspect-ratio: 1 / 1; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface-muted); position: relative; }
.person__photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.4); transition: filter 0.6s var(--ease-out); }
.person:hover .person__photo img { transform: scale(1.46); }
.person:hover .person__photo img.no-zoom { transform: scale(1.04); }
.person__photo img.no-zoom { transform: none; }
.person__placeholder { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-serif); font-style: italic; font-size: 160px; color: #BDBDBD; }
.person__meta { display: flex; justify-content: space-between; align-items: baseline; }
.person__meta b { font-weight: 500; font-size: var(--text-lg); }
.person__meta span { font-size: var(--text-sm); color: var(--color-text-muted); }
.person__note { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.5; }
.person__links { margin-top: auto; display: flex; gap: 16px; font-size: var(--text-sm); font-weight: 500; }
.person__links a { padding: 4px 0; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.person__links a:hover { color: var(--color-accent); }
.card--award { background: var(--color-ink); color: var(--color-text-inverse); min-height: 0; aspect-ratio: 1 / 1; }

/* ---------- Testimonial ---------- */
.quote { display: grid; grid-template-columns: 1fr 2fr; gap: 64px; align-items: start; }
.quote blockquote { margin: 0; font-weight: 500; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.15; letter-spacing: var(--tracking-tight); }
.quote__who { display: flex; align-items: center; gap: 14px; margin-top: 32px; }
.quote__who span:first-child { width: 48px; height: 48px; border-radius: 99px; background: var(--color-surface-muted); }
.placeholder-note { display: inline-block; margin-top: 16px; padding: 4px 10px; border-radius: 6px; background: #FFF4D6; color: #6B4E00; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }

/* ---------- Packages + FAQ ---------- */
.packages { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 16px; align-items: stretch; }
.pkg { display: flex; flex-direction: column; gap: 24px; padding: 32px; border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); }
.pkg--hot { background: var(--color-ink); color: var(--color-text-inverse); border-color: var(--color-ink); }
.pkg__price { display: flex; align-items: baseline; gap: 8px; }
.pkg__price b { font-weight: 500; font-size: var(--text-2xl); letter-spacing: var(--tracking-tight); }
.pkg ul { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 1px solid var(--color-border); font-size: var(--text-sm); }
.pkg--hot ul { border-color: var(--color-border-inverse); }
.pkg li::before { content: "→  "; color: var(--color-accent); }
.pkg--hot .muted { color: var(--color-text-inverse-muted); }
.faq { display: grid; grid-template-columns: 420px 1fr; gap: 64px; margin-top: var(--spacing-40); }
.faq details { border-top: 1px solid var(--color-border); }
.faq details:last-child { border-bottom: 1px solid var(--color-border); }
.faq summary { list-style: none; display: flex; justify-content: space-between; gap: 24px; padding: 24px 0; cursor: pointer; font-weight: 500; font-size: var(--text-lg); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--color-accent); }
.faq__a { overflow: hidden; }
.faq details.is-closing summary::after { transform: none; color: inherit; }
.faq summary::after { content: "+"; font-size: var(--text-xl); line-height: 1; transition: transform var(--duration-base) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); color: var(--color-accent); }
.faq details p { padding: 0 0 24px; max-width: 640px; color: var(--color-text-muted); }

/* ---------- Contact + footer ---------- */
.contact { position: relative; overflow: hidden; padding-top: var(--spacing-40); }
.contact__glow { position: absolute; right: -15%; bottom: 10%; width: 1000px; height: 420px; border-radius: 999px; background: radial-gradient(closest-side, rgb(255 64 0 / 0.55), transparent); filter: blur(60px); transform: rotate(-8deg); pointer-events: none; }
.contact__grid { position: relative; display: grid; grid-template-columns: 1fr 560px; gap: 64px; align-items: start; }
.contact__email { display: inline-block; font-weight: 500; font-size: clamp(32px, 4.2vw, 60px); line-height: 1; letter-spacing: var(--tracking-tighter); margin: 28px 0; transition: color var(--duration-fast); }
.contact__email:hover { color: var(--color-accent); }
.form { display: flex; flex-direction: column; gap: 18px; padding: 36px; border-radius: var(--radius-xl); background: var(--color-bg); color: var(--color-text); box-shadow: 0 40px 100px rgb(0 0 0 / 0.4); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label, .field legend { font-weight: 500; font-size: var(--text-sm); padding: 0; }
.field input, .field select, .field textarea {
  height: var(--control-height); padding: 0 16px; border-radius: var(--radius-md); border: 1px solid var(--color-border);
  background: var(--color-surface); font: inherit; color: inherit;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.field textarea { height: 96px; padding: 14px 16px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--color-ink); box-shadow: 0 0 0 3px rgb(255 64 0 / 0.3); }
fieldset.field { border: 0; margin: 0; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips label { height: 40px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 99px; border: 1px solid var(--color-border); font-weight: 400; cursor: pointer; transition: background var(--duration-fast), color var(--duration-fast); }
.chips input:checked + label { background: var(--color-ink); color: var(--color-text-inverse); border-color: var(--color-ink); }
.chips input:focus-visible + label { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.form__actions { display: flex; gap: 10px; }
.form__actions .btn--accent { flex: 1; justify-content: center; padding-right: 24px; }
.footer { position: relative; margin-top: 120px; }
.footer__cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 24px; padding-bottom: 32px; font-size: var(--text-sm); }
.footer__cols h2 { margin: 0 0 10px; font-family: var(--font-mono); font-weight: 400; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-inverse-muted); }
.footer__cols li + li { margin-top: 2px; }
.footer__cols li a { display: inline-block; padding: 4px 0; }
.footer__cols a:hover { color: var(--color-accent); }
.footer .wordmark { margin-top: 0; color: var(--color-text-inverse); line-height: 0.74; overflow: hidden; }

/* ---------- Reveal motion ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--duration-reveal) var(--ease-out), transform var(--duration-reveal) var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 60ms; } .reveal-d2 { transition-delay: 120ms; } .reveal-d3 { transition-delay: 180ms; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .nav__links { display: none; }
  .nav__toggle { display: flex; }
  .hero__top { flex-direction: column; align-items: flex-start; }
  .hero__aside { align-items: flex-start; text-align: left; }
  .bento, .services, .stages, .packages, .contact__grid, .faq, .quote { grid-template-columns: 1fr; }
  .services__media { position: relative; top: 0; aspect-ratio: 16 / 11; }
  .work-grid, .work-grid--studio, .team { grid-template-columns: 1fr 1fr; }
  .milestones { grid-template-columns: 1fr 1fr; }
  .milestone:nth-child(3) { padding-left: 0; border-left: 0; }
  .promises { grid-template-columns: 1fr; }
  .timeline__bars .bar { font-size: 12px; padding: 0 10px; }
}
@media (max-width: 640px) {
  .section-head { flex-direction: column; align-items: flex-start; }
  .work-grid, .work-grid--studio, .team, .form__row, .footer__cols { grid-template-columns: 1fr; }
  .milestones { grid-template-columns: 1fr 1fr; }
  .acc__body { padding-left: 0; }
  .timeline { display: none; }
  .nav { top: 10px; }
  .nav__inner { padding-left: 18px; gap: 10px; }
  .nav__toggle { width: 40px; height: 40px; }
  .nav__actions { gap: 6px; }
  .nav .btn--accent span:first-child { display: none; }
  .nav .btn--accent { padding: 0 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ================= v2 additions ================= */

/* --- About: proof reel + stats --- */
.proof { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; margin-top: var(--spacing-16); }
.proof__reel { position: relative; height: 560px; border-radius: var(--radius-xl); background: var(--color-ink); overflow: hidden; }
.proof__label { position: absolute; z-index: 2; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 24px 28px; background: linear-gradient(var(--color-ink) 30%, transparent); }
.proof__reel::after { content: ""; position: absolute; inset: auto 0 0 0; height: 140px; background: linear-gradient(transparent, var(--color-ink)); z-index: 1; pointer-events: none; }
.proof__reel::before { content: ""; position: absolute; left: 10%; top: 35%; width: 80%; height: 40%; border-radius: 999px; background: radial-gradient(closest-side, rgb(255 64 0 / 0.5), transparent); filter: blur(40px); z-index: 0; }
.reel { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 0 28px; height: 100%; transform: rotate(-4deg) scale(1.08); }
.reel__col { display: flex; flex-direction: column; gap: 16px; animation: reel-up 57s linear infinite; }   /* 6 screens per column; same speed as before */
.reel__col--down { animation: reel-down 66s linear infinite; }
.reel__col img { width: 100%; aspect-ratio: 9 / 19.5; object-fit: cover; object-position: top; border-radius: 22px; border: 4px solid #1a1a1a; }
@keyframes reel-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes reel-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.proof__reel:hover .reel__col { animation-play-state: paused; }
.proof__side { display: grid; grid-template-rows: 1fr 1fr; gap: 16px; }
.proof__stat { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: 28px; border-radius: var(--radius-xl); background: var(--color-surface); border: 1px solid var(--color-border); }
.proof__stat--accent { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.proof__row { display: flex; align-items: center; gap: 20px; }
.proof__num { font-weight: 500; font-size: 96px; line-height: 0.8; letter-spacing: -0.06em; }
.icon-stack { display: flex; }
.icon-stack img, .icon-stack span { width: 52px; height: 52px; border-radius: 14px; border: 3px solid var(--color-accent); margin-left: -12px; background: var(--color-ink); color: var(--color-text-inverse); display: grid; place-items: center; font-weight: 500; font-size: 15px; transition: transform var(--duration-base) var(--ease-out); }
.icon-stack :first-child { margin-left: 0; }
.proof__stat:hover .icon-stack img, .proof__stat:hover .icon-stack span { transform: translateY(-6px) rotate(-4deg); }
.proof__stat:hover .icon-stack :nth-child(2) { transition-delay: 40ms; } .proof__stat:hover .icon-stack :nth-child(3) { transition-delay: 80ms; } .proof__stat:hover .icon-stack :nth-child(4) { transition-delay: 120ms; }
.proof__mini { font-size: var(--text-sm); color: var(--color-text-muted); }
.proof__mini b { font-weight: 500; font-size: var(--text-xl); color: var(--color-text); letter-spacing: var(--tracking-tight); margin-right: 6px; }

/* --- Services: scroll-synced stage --- */
.acc__item { transition: opacity var(--duration-base); }
.stage-media { position: sticky; top: 120px; height: min(640px, calc(100vh - 160px)); border-radius: var(--radius-xl); overflow: hidden; background: var(--color-ink); }
.stage-media .card__glow { left: -10%; right: auto; top: 30%; bottom: auto; width: 120%; height: 45%; transform: rotate(-10deg); opacity: 0.8; }
.stage-media__counter { position: absolute; z-index: 3; top: 22px; right: 26px; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-inverse-muted); }
.stage-media__counter span { color: var(--color-accent); }
.sv { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: translateY(30px) scale(0.97); transition: opacity 0.55s var(--ease-out), transform 0.7s var(--ease-out); pointer-events: none; }
.sv.is-active { opacity: 1; transform: none; }
.sv__chip { position: absolute; left: 24px; bottom: 24px; padding: 10px 16px; border-radius: 99px; background: rgb(4 4 4 / 0.65); border: 1px solid var(--color-border-inverse); backdrop-filter: blur(10px); color: var(--color-text-inverse); font-size: var(--text-sm); }
.sv__phone { position: absolute; width: 34%; aspect-ratio: 9 / 19.5; object-fit: cover; object-position: top; border-radius: 26px; border: 5px solid #000; box-shadow: 0 30px 70px rgb(0 0 0 / 0.55); transition: transform 0.9s var(--ease-out); }
.sv__phone--c { z-index: 2; }
.sv__phone--l { transform: translateX(-62%) rotate(-8deg) scale(0.9); }
.sv__phone--r { transform: translateX(62%) rotate(8deg) scale(0.9); }
.sv:not(.is-active) .sv__phone--l, .sv:not(.is-active) .sv__phone--r { transform: translateX(0) scale(0.8); }
.sv__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.sv__pill { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 99px; background: #000; color: #fff; font-size: var(--text-sm); box-shadow: 0 20px 50px rgb(0 0 0 / 0.6); transform: scale(0.6); transition: transform 0.8s cubic-bezier(.2,1.4,.3,1) 0.15s; }
.sv.is-active .sv__pill { transform: scale(1.15); }
.sv__cam { width: 22px; height: 22px; border-radius: 99px; background: #111; border: 3px solid #222; }
.sv__bars { display: flex; gap: 3px; align-items: flex-end; height: 16px; }
.sv__bars i { width: 3px; background: var(--color-accent); border-radius: 2px; animation: eq 0.9s ease-in-out infinite alternate; }
.sv__bars i:nth-child(2) { animation-delay: .2s; } .sv__bars i:nth-child(3) { animation-delay: .4s; } .sv__bars i:nth-child(4) { animation-delay: .1s; }
@keyframes eq { from { height: 4px; } to { height: 16px; } }
.sv__split { display: flex; align-items: center; gap: 20px; }
.sv__device { position: relative; width: 170px; aspect-ratio: 9 / 19.5; border-radius: 28px; border: 5px solid #000; overflow: hidden; box-shadow: 0 30px 70px rgb(0 0 0 / 0.55); transition: transform 0.8s var(--ease-out); }
.sv__device--android { border-radius: 18px; }
.sv__device img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.sv__os { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); padding: 3px 10px; border-radius: 99px; background: rgb(4 4 4 / 0.8); color: #fff; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; z-index: 1; }
.sv:not(.is-active) .sv__device { transform: translateX(40px); } .sv:not(.is-active) .sv__device--android { transform: translateX(-40px); }
.sv__code { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; text-align: center; color: var(--color-accent); padding: 10px; border: 1px dashed rgb(255 64 0 / 0.6); border-radius: 12px; }
.sv__chat { width: 78%; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 85%; padding: 14px 16px; border-radius: 18px; font-size: var(--text-sm); line-height: 1.45; }
.msg--me { align-self: flex-end; background: var(--color-accent); color: var(--color-on-accent); border-bottom-right-radius: 6px; }
.msg--ai { align-self: flex-start; background: #1C1C1C; color: var(--color-text-inverse); border: 1px solid var(--color-border-inverse); border-bottom-left-radius: 6px; min-height: 50px; }
.msg__text { opacity: 0; transition: opacity 0.4s 1.4s; }
.sv.is-active .msg__text { opacity: 1; }
.typing { display: inline-flex; gap: 4px; }
.sv.is-active .typing { animation: hide 0s 1.4s forwards; }
.typing i { width: 6px; height: 6px; border-radius: 99px; background: var(--color-text-inverse-muted); animation: blink 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 50% { opacity: .2; } }
@keyframes hide { to { display: none; width: 0; overflow: hidden; } }
.sv__models { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.sv__models span { padding: 6px 12px; border-radius: 99px; border: 1px solid var(--color-border-inverse); color: var(--color-text-inverse-muted); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; }
.sv__models .on { border-color: var(--color-accent); color: var(--color-accent); }
.sv__browser { width: 86%; border-radius: 14px; overflow: hidden; border: 1px solid var(--color-border-inverse); box-shadow: 0 30px 70px rgb(0 0 0 / 0.55); transform: perspective(1200px) rotateY(-12deg) rotateX(4deg); transition: transform 0.9s var(--ease-out); }
.sv.is-active .sv__browser { transform: perspective(1200px) rotateY(-4deg) rotateX(2deg); }
.sv__browserbar, .sv__termbar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #1A1A1A; color: var(--color-text-inverse-muted); font-family: var(--font-mono); font-size: 11px; }
.sv__browserbar i, .sv__termbar i { width: 10px; height: 10px; border-radius: 99px; background: #333; }
.sv__browserbar span, .sv__termbar span { margin-left: 10px; }
.sv__term { width: 84%; border-radius: 14px; overflow: hidden; background: #0E0E0E; border: 1px solid var(--color-border-inverse); box-shadow: 0 30px 70px rgb(0 0 0 / 0.55); }
.sv__term pre { margin: 0; padding: 18px; font-family: var(--font-mono); font-size: 13px; line-height: 1.9; color: var(--color-text-inverse); }
.c-mute { color: #555; } .c-ok { color: #5BD08A; } .c-acc { color: var(--color-accent); }
.sv__spark { position: relative; padding: 0 18px 18px; }
.sv__spark svg { width: 100%; height: 60px; }
.sv__spark polyline { stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 1.6s var(--ease-out) 0.2s; }
.sv.is-active .sv__spark polyline { stroke-dashoffset: 0; }
.sv__spark span { position: absolute; right: 18px; top: 0; font-family: var(--font-mono); font-size: 11px; color: var(--color-text-inverse-muted); }

/* --- Team (two) --- */
.team--two { grid-template-columns: repeat(2, minmax(0, 340px)); gap: 24px; }
.team--two .person__photo { aspect-ratio: 1 / 1; }
.team--two .person__photo img { object-position: center 25%; }

/* --- Reviews marquee --- */
.reviews { overflow: hidden; }
.rv { display: flex; flex-direction: column; gap: 16px; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.rv__track { display: flex; gap: 16px; width: max-content; animation: rv 60s linear infinite; }
.rv__row--rev .rv__track { animation-direction: reverse; animation-duration: 70s; }
.rv:hover .rv__track { animation-play-state: paused; }
@keyframes rv { to { transform: translateX(-50%); } }
.rv__card { width: 400px; flex-shrink: 0; display: flex; flex-direction: column; gap: 18px; padding: 26px; border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); transition: transform var(--duration-base) var(--ease-out), border-color var(--duration-base); }
.rv__card:hover { transform: translateY(-4px); border-color: var(--color-accent); }
.rv__card--ink { background: var(--color-ink); color: var(--color-text-inverse); border-color: var(--color-ink); }
.rv__card--ink .rv__role { color: var(--color-text-inverse-muted); }
.rv__stars { color: var(--color-accent); letter-spacing: 2px; font-size: 14px; }
.rv__text { font-size: var(--text-lg); line-height: 1.45; letter-spacing: -0.01em; }
.rv__who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.rv__who img { width: 44px; height: 44px; border-radius: 99px; object-fit: cover; }
.rv__name { font-weight: 500; font-size: var(--text-sm); }
.rv__role { font-size: var(--text-sm); color: var(--color-text-muted); }
.rv__shot { width: 100%; height: 150px; border-radius: var(--radius-md); object-fit: cover; object-position: top; }

@media (max-width: 1024px) {
  .proof { grid-template-columns: 1fr; }
  .proof__reel { height: 460px; }
  .stage-media { position: relative; top: 0; height: 480px; margin-top: 24px; }
  .team--two { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .team--two { grid-template-columns: 1fr; }
  .rv__card { width: 300px; }
  .proof__num { font-size: 88px; }
}

/* --- Team layout v3 --- */
.team-layout { display: grid; grid-template-columns: 1fr auto; gap: 64px; align-items: center; }
.team-layout__copy { display: flex; flex-direction: column; gap: 24px; max-width: 460px; }
.team--two { grid-template-columns: repeat(2, 300px); gap: 20px; }
.team--two .person__meta { flex-direction: column; gap: 2px; align-items: flex-start; }
@media (max-width: 1024px) { .team-layout { grid-template-columns: 1fr; } .team--two { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .team--two { grid-template-columns: 1fr 1fr; gap: 12px; } }

/* --- Type scale, one step down (v3) --- */
:root { --text-xl: 24px; --text-2xl: 36px; --text-3xl: 56px; --text-lg: 18px; }
@media (max-width: 1024px) { :root { --text-3xl: 46px; } }
@media (max-width: 640px) { :root { --text-2xl: 28px; --text-3xl: 36px; --text-xl: 22px; } }

/* ================= Premium layer (v3) ================= */
/* Hero load choreography (keyframes: deterministic, no flash) */
.js .hero__title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.js .hero__title .w > span { display: inline-block; transform: translateY(110%); }
.js.is-loaded .hero__title .w > span { animation: rise-in 0.9s var(--ease-out) both; }
.js .hero .wordmark .ch { display: inline-block; opacity: 0; transform: translateY(35%); }
.js.is-loaded .hero .wordmark .ch { animation: char-in 1.1s var(--ease-out) both; }
.js .hero__cta, .js .hero__chips, .js .hero__aside, .js .hero .eyebrow, .js .shipped { opacity: 0; }
.js.is-loaded .hero__cta, .js.is-loaded .hero__aside, .js.is-loaded .shipped { animation: fade-up 0.8s var(--ease-out) 0.75s both; }
.js.is-loaded .hero__chips { animation: fade-up 0.8s var(--ease-out) 0.6s both; }
.js.is-loaded .hero .eyebrow { animation: fade-up 0.8s var(--ease-out) 0.05s both; }
@keyframes rise-in { from { transform: translateY(110%); } to { transform: none; } }
@keyframes char-in { from { opacity: 0; transform: translateY(35%); } to { opacity: 1; transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.hero .wordmark { will-change: transform; }
.hero__glow { animation: glow-drift 14s ease-in-out infinite alternate; }
@keyframes glow-drift { from { transform: rotate(-14deg) translate(0, 0); } to { transform: rotate(-8deg) translate(-6%, 6%); } }

/* Scroll progress line inside the nav pill */
.nav__inner { position: relative; overflow: hidden; }
.nav__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--color-accent); transform-origin: 0 50%; transform: scaleX(0); }

/* Film grain on dark sections */
.section--ink, .proof__reel, .stage-media { position: relative; }
.section--ink::after, .proof__reel .reel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0.07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Magnetic + tilt smoothing */
.btn--accent, .btn--ink { transition: transform 0.35s var(--ease-out), background-color var(--duration-fast); }
.project__media, .proof__stat { transition: transform 0.5s var(--ease-out); transform-style: preserve-3d; }

/* Footer wordmark rises in */
.footer .wordmark { will-change: transform; }

/* Shipped-for strip */
.shipped { display: flex; align-items: center; gap: 40px; padding: 28px 0; flex-wrap: wrap; }
.shipped__label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-muted); }
.shipped__list { display: flex; align-items: center; gap: 36px; flex-wrap: wrap; }
.shipped__item { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: var(--text-base); opacity: 0.75; filter: grayscale(1); transition: opacity var(--duration-base), filter var(--duration-base); }
.shipped__item:hover { opacity: 1; filter: none; }
.shipped__item img, .shipped__item i { width: 30px; height: 30px; border-radius: 8px; }
.shipped__item i { display: grid; place-items: center; background: var(--color-ink); color: var(--color-text-inverse); font-style: normal; font-family: var(--font-serif); font-size: 18px; }
@media (prefers-reduced-motion: reduce) {
  .js .hero__cta, .js .hero__chips, .js .hero__aside, .js .hero .eyebrow, .js .shipped,
  .js .hero .wordmark .ch, .js .hero__title .w > span { opacity: 1 !important; transform: none !important; }
}

/* ================= Process flow v4 (one clear flow) ================= */
.flow { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: step; }
.flow::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 22px; height: 2px; background: var(--color-border-inverse); }
.flow::after { content: ""; position: absolute; left: 12.5%; top: 22px; height: 2px; width: 0; background: var(--color-accent); transition: width 2.2s var(--ease-out) 0.3s; }
.flow.is-in::after { width: 75%; }
.flow__step { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 72px 24px 24px; border-radius: var(--radius-lg); background: var(--color-ink-raised); border: 1px solid var(--color-border-inverse); transition: border-color var(--duration-base), transform var(--duration-base) var(--ease-out); }
.flow__step:hover { transform: translateY(-4px); border-color: rgb(255 64 0 / 0.6); }
.flow__step--hot { border-color: var(--color-accent); box-shadow: 0 0 0 6px rgb(255 64 0 / 0.08); }
.flow__node { position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); width: 46px; height: 46px; border-radius: 99px; background: var(--color-ink); border: 2px solid var(--color-accent); display: grid; place-items: center; z-index: 1; }
.flow__node span { font-family: var(--font-serif); font-style: italic; font-size: 24px; color: var(--color-accent); line-height: 1; }
.flow__step--hot .flow__node { background: var(--color-accent); } .flow__step--hot .flow__node span { color: var(--color-on-accent); }
.flow__step { margin-top: 0; }
.flow__when { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-accent); }
.flow__what { font-size: var(--text-sm); line-height: 1.55; color: var(--color-text-inverse-muted); min-height: 66px; }
.flow .artifact { height: auto; min-height: 196px; }
.flow__get { margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: var(--radius-md); background: rgb(255 255 255 / 0.04); border: 1px solid var(--color-border-inverse); font-weight: 500; font-size: var(--text-sm); color: var(--color-text-inverse); }
.flow__get span { font-family: var(--font-mono); font-weight: 400; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-inverse-muted); }
.flow__get::before { content: "✓"; position: absolute; }
.flow__get::before { content: none; }
@media (max-width: 1024px) {
  .flow { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .flow::before, .flow::after { display: none; }
}
@media (max-width: 640px) { .flow { grid-template-columns: 1fr; } }
/* nodes sit above the cards, on the connecting line */
.flow { padding-top: 70px; }
.flow__step { padding-top: 24px; }
.flow__node { top: -70px; }
@media (max-width: 1024px) { .flow { padding-top: 0; } .flow__node { position: static; transform: none; } }
.flow__get { min-height: 68px; justify-content: center; }

/* ================= Performance pass (v5) ================= */
/* Glows: soft gradients only — no live blur filters, no endless animation */
.hero__glow, .card__glow, .process__glow, .contact__glow, .proof__reel::before, .stage-media .card__glow { filter: none !important; animation: none !important; }
.hero__glow { background: radial-gradient(closest-side, rgb(255 64 0 / 0.42), rgb(255 64 0 / 0.14) 55%, transparent 100%); }
.process__glow, .contact__glow { background: radial-gradient(closest-side, rgb(255 64 0 / 0.30), rgb(255 64 0 / 0.08) 60%, transparent); }
/* Grain: cheap static texture, no blend mode, only on small panels */
.section--ink::after { content: none; }
.proof__reel .reel::after { mix-blend-mode: normal; opacity: 0.05; }
/* Keep moving layers on the GPU */
.reel__col, .marquee__track, .hero .wordmark, .footer .wordmark { will-change: transform; backface-visibility: hidden; }
.nav__inner { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
/* Services: scroll highlights the current row instead of opening it */
.acc__item .acc__title { transition: color var(--duration-base), opacity var(--duration-base); }
@media (min-width: 1025px) {
  .acc:has(.is-current) .acc__item:not(.is-current):not(.is-open) .acc__title { opacity: 0.35; }
  .acc__item.is-current .acc__title { color: var(--color-accent); }
}

/* ================= Services: pinned scroll showcase (v6) ================= */
.svc { padding-top: var(--spacing-40); }
.svc__scroller { position: relative; height: 420vh; }             /* 6 steps of scroll */
.svc__sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; padding-top: 72px; }
.svc__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; }
.svc__list { display: flex; flex-direction: column; border-top: 1px solid var(--color-border); }
.svc__item { width: 100%; display: flex; align-items: center; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--color-border); text-align: left; }
.svc__n { width: 28px; flex-shrink: 0; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); }
.svc__title { flex: 1; font-weight: 500; font-size: var(--text-xl); letter-spacing: var(--tracking-tight); color: #B5B5B5; transition: color var(--duration-base), transform var(--duration-base) var(--ease-out); }
.svc__arrow { opacity: 0; transform: translateX(-8px); color: var(--color-accent); font-size: var(--text-lg); transition: opacity var(--duration-base), transform var(--duration-base) var(--ease-out); }
.svc__item:hover .svc__title { color: var(--color-text-muted); }
.svc__item.is-active .svc__title { color: var(--color-text); transform: translateX(6px); }
.svc__item.is-active .svc__n { color: var(--color-accent); }
.svc__item.is-active .svc__arrow { opacity: 1; transform: none; }
.svc__details { position: relative; height: 172px; margin-top: 28px; }
.svc__panel { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 14px; opacity: 0; transform: translateY(10px); transition: opacity 0.4s var(--ease-out), transform 0.5s var(--ease-out); pointer-events: none; }
.svc__panel.is-active { opacity: 1; transform: none; pointer-events: auto; }
.svc__panel p { color: var(--color-text-muted); max-width: 520px; }
.svc__progress { height: 2px; background: var(--color-border); border-radius: 2px; overflow: hidden; margin-top: 8px; }
.svc__progress span { display: block; height: 100%; width: 100%; background: var(--color-accent); transform-origin: 0 50%; transform: scaleX(0.1667); transition: transform 0.4s var(--ease-out); }
.svc .stage-media { position: relative; top: auto; height: min(600px, calc(100vh - 160px)); }

@media (max-width: 1024px) {
  .svc__scroller { height: auto; }
  .svc__sticky { position: static; height: auto; padding: 48px 0 var(--spacing-24); }
  .svc__grid { grid-template-columns: 1fr; gap: 32px; }
  .svc .stage-media { height: 440px; }
}

/* ================= v7: one typeface, white CTA chip, no nav progress ================= */
/* Single font: Geist everywhere. Former serif-italic emphasis keeps only the orange accent. */
.serif, .stage__n, .flow__node span, .person__placeholder {
  font-family: var(--font-sans) !important; font-style: normal !important; font-weight: 500 !important; letter-spacing: inherit !important;
}
.flow__node span { font-size: 18px; }
.brand .serif { font-size: inherit; }
.nav__progress { display: none; }
/* CTA: white chip with orange arrow */
.btn__chip { background: var(--color-text-inverse); color: var(--color-accent); }

/* ================= v8: scroll-driven process line, no hover jump ================= */
.flow::after { width: calc(75% * var(--fill, 0)); transition: none; }
.flow.is-in::after { width: calc(75% * var(--fill, 0)); }
.flow__step:hover { transform: none; }                   /* the number circle must stay on the line */
.flow__step { transition: border-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out); }
/* circles: hollow until the line reaches them, then fill orange */
.flow__node { background: var(--color-ink); border-color: var(--color-border-inverse); transition: background 0.35s var(--ease-out), border-color 0.35s var(--ease-out), transform 0.35s var(--ease-out); }
.flow__node span { color: var(--color-text-inverse-muted); transition: color 0.35s; }
.flow__step--hot .flow__node { background: var(--color-ink); }
.flow__step--hot .flow__node span { color: var(--color-text-inverse-muted); }
.flow__step.is-reached .flow__node { background: var(--color-accent); border-color: var(--color-accent); transform: translate(-50%, 0) scale(1.08); }
.flow__step.is-reached .flow__node span { color: var(--color-on-accent); }
.flow__step.is-reached { border-color: rgb(255 64 0 / 0.55); }
.flow__step--hot { border-color: var(--color-border-inverse); box-shadow: none; }
.flow__step--hot.is-reached { border-color: var(--color-accent); box-shadow: 0 0 0 6px rgb(255 64 0 / 0.08); }
@media (max-width: 1024px) { .flow__step.is-reached .flow__node { transform: scale(1.08); } }

/* ================= v9: CTA = white button, orange text + orange chip ================= */
.btn--accent { background: #FFFFFF; color: #D63500; border: 1px solid rgb(255 64 0 / 0.35); box-shadow: 0 6px 20px rgb(255 64 0 / 0.12); }
.btn--accent:hover { background: #FFF4EF; border-color: var(--color-accent); }
.btn--accent .btn__chip { background: var(--color-accent); color: #FFFFFF; }
.section--ink .btn--accent, .contact .btn--accent { border-color: transparent; box-shadow: none; }
.form .btn--accent { border: 1.5px solid var(--color-accent); box-shadow: 0 6px 20px rgb(255 64 0 / 0.15); }
.btn--accent .btn__chip { background: var(--color-ink); color: #FFFFFF; }
/* White on orange is only readable at 24px+ (3.39:1), so the big number stays white and small text uses ink */
.proof__stat--accent .proof__num { color: #FFFFFF; }
.proof__stat--accent, .proof__stat--accent p, .proof__stat--accent .eyebrow { color: var(--color-on-accent); }
.flow__step.is-reached .flow__node span { color: #FFFFFF; }
.tf__install { color: #FFFFFF; }

/* ================= v10: booking card (Cal.com) ================= */
.book { display: flex; flex-direction: column; gap: 20px; padding: 28px; border-radius: var(--radius-xl); background: var(--color-bg); color: var(--color-text); box-shadow: 0 40px 100px rgb(0 0 0 / 0.4); }
.book__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.book .form { padding: 0; box-shadow: none; background: transparent; }
.book__cal { min-height: 520px; border-radius: var(--radius-md); overflow: auto; background: #fff; }
.contact__grid { grid-template-columns: 1fr 620px; }
@media (max-width: 1024px) { .contact__grid { grid-template-columns: 1fr; } }

/* ================= v11: wide booking card so Cal shows details | calendar | times side by side ================= */
.contact__grid { grid-template-columns: 1fr !important; gap: 48px; }
.contact__grid > div:first-child { display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; align-items: end; }
.contact__grid > div:first-child > .eyebrow { grid-column: 1 / -1; }
.contact__grid > div:first-child > .contact__email { grid-column: 1; grid-row: 2 / span 2; margin: 20px 0 0; }
.contact__grid > div:first-child > .lede { grid-column: 2; margin: 0; }
.contact__grid > div:first-child > div:last-child { grid-column: 2; }
.book { padding: 24px; }
.book__cal { min-height: 600px; border: 1px solid var(--color-border); background: #FFFFFF; overflow: hidden; }
.book__cal iframe { border-radius: var(--radius-md); }
#pane-msg .form { max-width: 720px; }
@media (max-width: 1024px) {
  .contact__grid > div:first-child { grid-template-columns: 1fr; }
  .contact__grid > div:first-child > * { grid-column: 1 !important; grid-row: auto !important; }
}

/* ================= v12: contact top row = two equal columns ================= */
.contact__top { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; }
.contact__col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.contact__col .contact__email { margin: 0; word-break: break-word; }
.contact__col--right .lede { margin: 0; max-width: none; }
.contact__col--right > div { margin-top: 0 !important; }
@media (max-width: 1024px) { .contact__top { grid-template-columns: 1fr; gap: 28px; } }

/* ================= v13: booking card = info | calendar, no clipping ================= */
.book { display: grid; grid-template-columns: 360px 1fr; gap: 0; padding: 0; overflow: hidden; }
.book__info { display: flex; flex-direction: column; gap: 32px; padding: 36px; border-right: 1px solid var(--color-border); background: var(--color-surface); }
.book__points { display: flex; flex-direction: column; gap: 20px; }
.book__points li { display: flex; flex-direction: column; gap: 4px; padding-left: 22px; position: relative; }
.book__points li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 99px; background: var(--color-accent); }
.book__points b { font-weight: 500; }
.book__points span { font-size: var(--text-sm); color: var(--color-text-muted); }
.book__alt { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 24px; border-top: 1px solid var(--color-border); }
.book__main { display: flex; flex-direction: column; gap: 20px; padding: 28px; min-width: 0; }
.book__main .tabs { align-self: flex-start; }
.book__cal { min-height: 0 !important; height: auto; overflow: visible !important; border: 0 !important; background: transparent !important; }
.book__cal iframe { width: 100% !important; }
#pane-msg .form { max-width: none; }
@media (max-width: 1024px) {
  .book { grid-template-columns: 1fr; }
  .book__info { border-right: 0; border-bottom: 1px solid var(--color-border); }
}

/* v14: both tabs share one cell, so the card keeps the height of the taller one */
.book__stack { display: grid; }
.book__stack > .book__pane { grid-area: 1 / 1; transition: opacity 0.25s var(--ease-out); }
.book__stack > .book__pane[hidden] { display: block; visibility: hidden; opacity: 0; pointer-events: none; }

/* v15: no glow/halo around the white CTA — clean single pill */
.btn--accent { box-shadow: none !important; border: 1px solid var(--color-border) !important; }
.btn--accent:hover { background: #FFFFFF; border-color: var(--color-ink) !important; }
.section--ink .btn--accent { border-color: transparent !important; }

/* v16: app icons — no orange border, small gap instead of overlap, soft shadow */
.icon-stack { gap: 8px; }
.icon-stack img, .icon-stack span { border: 0; margin-left: 0; box-shadow: 0 6px 16px rgb(4 4 4 / 0.18); }

/* v17: client grid holds 4 → 2×2; two-phone media */
#grid-clients { grid-template-columns: repeat(2, 1fr); }
.project__media--duo img { width: 40%; }
.project__media--duo img:nth-child(3) { transform: translateY(-16px); }
.project:hover .project__media--duo img:nth-child(3) { transform: translateY(-24px); }
@media (max-width: 640px) { #grid-clients { grid-template-columns: 1fr; } }
/* v18: studio grid holds 4 → 2×2 */
.work-grid--studio { grid-template-columns: repeat(2, 1fr) !important; }
.project__media--wide img { object-position: left top; }
@media (max-width: 640px) { .work-grid--studio { grid-template-columns: 1fr !important; } }
.project__media--peek { justify-content: flex-start; padding: 64px 0 0 40px; }
.project__media--peek img { width: 150%; max-width: none; border-radius: 12px 0 0 0; box-shadow: 0 -10px 40px rgb(4 4 4 / 0.12); }

/* v19: dashboards shown whole — framed in the card, nothing cropped */
.project__media--wide { align-items: center; justify-content: center; padding: 36px; }
.project__media--wide img { width: 100% !important; max-width: 100%; height: auto; max-height: 100%; object-fit: contain; object-position: center; border-radius: 12px !important; transform: none !important; box-shadow: 0 20px 50px rgb(4 4 4 / 0.18); }
.project:hover .project__media--wide img { transform: translateY(-4px) !important; }

/* v20: wide product cards — headline on top, browser window rising from the bottom edge (top always fully visible) */
.project__media--wide { flex-direction: column !important; align-items: stretch !important; justify-content: space-between !important; gap: 22px; padding: 32px 32px 0 !important; }
.pm__copy { display: flex; flex-direction: column; gap: 8px; }
.pm__kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
.pm__title { font-weight: 500; font-size: 26px; line-height: 1.12; letter-spacing: -0.02em; color: var(--color-text); }
.pm--dark .pm__kicker { color: var(--color-text-inverse-muted); }
.pm--dark .pm__title { color: var(--color-text-inverse); }
.pm__window { flex: 1; min-height: 0; border-radius: 12px 12px 0 0; overflow: hidden; background: #fff; box-shadow: 0 -14px 40px rgb(4 4 4 / 0.14); border: 1px solid rgb(4 4 4 / 0.06); border-bottom: 0; transition: transform 0.6s var(--ease-out); }
.pm--dark .pm__window { border-color: rgb(255 255 255 / 0.1); background: #111; }
.pm__bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #F4F4F4; border-bottom: 1px solid rgb(4 4 4 / 0.06); font-family: var(--font-mono); font-size: 10px; color: #8A8A8A; }
.pm--dark .pm__bar { background: #1A1A1A; border-color: rgb(255 255 255 / 0.08); }
.pm__bar i { width: 9px; height: 9px; border-radius: 99px; background: #D8D8D8; }
.pm--dark .pm__bar i { background: #3A3A3A; }
.pm__bar span { margin-left: 8px; }
.project__media--wide .pm__window img { width: 100% !important; max-width: none; max-height: none; height: auto; object-fit: cover; object-position: top left; border-radius: 0 !important; box-shadow: none; transform: none !important; display: block; }
.project__media--wide > img { display: none; }
.project:hover .pm__window { transform: translateY(-6px); }
.project:hover .project__media--wide .pm__window img { transform: none !important; }

/* v21: featured project — full width, image shown edge to edge at its own ratio */
.project--feature { grid-column: 1 / -1; }
.project--feature .project__media { aspect-ratio: 1566 / 882; padding: 0; }
.project--feature .project__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* v22: undo full-width feature; Launchpad stays in the 2-col grid and its image fills the card edge to edge.
   Client cards share the image's 16:9 ratio so nothing is cropped and there are no bands. */
.project--feature { grid-column: auto; }
#grid-clients .project__media { aspect-ratio: 1566 / 882; }
#grid-clients .project__media--art { padding: 0; }
#grid-clients .project__media--art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* v23: designed card images (already include their own background + headline) — fill edge to edge */
.project__media.pm--full { padding: 0 !important; aspect-ratio: 1452 / 1083 !important; }
.project__media.pm--full img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; transform: none !important; }
/* row 2 of clients (Hotel Media + BIB) and the products grid share the 4:3-ish shape so rows stay even */
#grid-clients .project:nth-child(n+3) .project__media { aspect-ratio: 1452 / 1083; }
.work-grid--studio .project__media { aspect-ratio: 1452 / 1083; }

/* Project cards are display-only — no links; images can't be dragged, selected or long-pressed */
.project { cursor: default; }
img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.project__media, .proof__reel, .stage-media, .person__photo { position: relative; }
.project__media::after, .stage-media::after, .person__photo::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.reel, .reel img { pointer-events: none; }  /* transparent shield over images */
.work-cta { justify-content: flex-start; }

/* ================= v25: mobile pass (≤640px) ================= */
@media (max-width: 640px) {
  .section { padding: 72px 0; }
  .svc { padding-top: 72px; }
  /* hero */
  .hero { padding-top: 40px; }
  .hero__title { font-size: 26px; }
  .hero .wordmark { margin-top: 36px; }
  .shipped { gap: 16px; padding: 22px 0; }
  .shipped__list { gap: 14px 22px; }
  /* about: screens panel */
  .proof__reel { height: 380px; border-radius: var(--radius-lg); }
  .proof__label { padding: 18px 20px; }
  .proof__label .mono-sm { display: none; }                 /* the two labels collided */
  .reel { gap: 10px; padding: 0 16px; }
  .reel__col { gap: 10px; }
  .reel__col img { border-radius: 14px; border-width: 3px; }
  /* about: stat cards */
  .proof__stat { padding: 22px; border-radius: var(--radius-lg); }
  .proof__row { flex-wrap: wrap; gap: 14px; }
  .proof__num { font-size: 72px; }
  .icon-stack { gap: 6px; }
  .icon-stack img, .icon-stack span { width: 40px; height: 40px; border-radius: 11px; font-size: 13px; }
  .proof__stat .proof__row:last-child { flex-direction: column; align-items: flex-start; gap: 6px; }
  .proof__mini b { font-size: 20px; }
  .about__foot { flex-direction: column; align-items: flex-start; gap: 14px; }
  .about__foot .link { white-space: nowrap; }
  /* services */
  .svc__title { font-size: 20px; }
  .svc__item { padding: 14px 0; }
  .svc__details { height: auto; margin-top: 20px; }
  .svc__panel { position: static; display: none; transform: none; }
  .svc__panel.is-active { display: flex; }
  .svc .stage-media { height: 380px; }
  .sv__chat { width: 88%; }
  .sv__term, .sv__browser { width: 92%; }
  .sv__device { width: 120px; }
  /* section heads */
  .section-head { margin-bottom: 36px; gap: 20px; }
  .big-title { font-size: 44px; }
  .h-display { font-size: 34px; }
  /* work cards */
  .project__meta { flex-direction: column; gap: 10px; }
  .project__meta h3 { font-size: 18px; }
  .tabs { width: 100%; }
  .tabs .tab { flex: 1; padding: 0 12px; }
  .work-cta { margin-top: 32px; }
  /* milestones */
  .milestone { padding: 22px 16px 0 0; }
  .milestone + .milestone { padding-left: 16px; }
  .milestone:nth-child(3) { padding-left: 0; }
  /* team */
  .team-layout { gap: 32px; }
  .person__meta b { font-size: 16px; }
  /* faq */
  .faq { gap: 28px; }
  .faq summary { font-size: 17px; padding: 20px 0; }
  /* contact */
  .contact { padding-top: 72px; }
  .contact__email { font-size: 30px; }
  .book { border-radius: var(--radius-lg); }
  .book__info, .book__main { padding: 22px; }
  .footer { margin-top: 72px; }
  .footer__cols { gap: 28px; }
  /* nav: keep the label so the button reads as "Book a call" */
  .nav .btn--accent span:first-child { display: inline; }
  .nav .btn--accent { padding: 0 6px 0 16px; height: 46px; font-size: 15px; }
  .nav .btn__chip { width: 32px; height: 32px; }
}
@media (max-width: 380px) {
  .nav .btn--accent span:first-child { display: none; }
  .nav .btn--accent { padding: 0 6px; }
}
@media (max-width: 640px) {
  .footer .wordmark { font-size: 27vw; line-height: 0.8; padding-bottom: 4px; overflow: visible; }
  .footer { overflow: hidden; }
  .hero .wordmark { font-size: 27vw; }
}
/* Phones: decorative glows and screens hang past the edge, which widened the page and let it
   zoom out / pan sideways. clip (not hidden) keeps the pinned services section working. */
main { overflow-x: clip; }
/* ================= v26: mobile — services pin like desktop; compact booking ================= */
@media (max-width: 1024px) {
  .svc__scroller { height: 520vh; }
  .svc__sticky { position: sticky; top: 0; height: 100svh; padding: 84px 0 16px; display: flex; align-items: stretch; }
  .svc__grid { display: flex; flex-direction: column; gap: 14px; height: 100%; }
  .svc .stage-media { order: -1; flex: 0 0 auto; height: 42svh; margin-top: 0; }
  .svc__left { display: flex; flex-direction: column; min-height: 0; }
  /* list becomes: current service only (big) + step dots */
  .svc__list { border-top: 0; }
  .svc__list li { display: none; }
  .svc__list li:has(.is-active) { display: block; }
  .svc__item { padding: 4px 0 0; border-bottom: 0; }
  .svc__item .svc__title { font-size: 24px; transform: none !important; color: var(--color-text); }
  .svc__item .svc__arrow { display: none; }
  .svc__details { margin-top: 10px; height: auto; }
  .svc__panel { position: static; display: none; transform: none; }
  .svc__panel.is-active { display: flex; }
  .svc__panel p { font-size: 15px; }
  .svc__progress { margin-top: auto; }
}
@media (max-width: 1024px) { .svc__grid { align-items: stretch; } .svc .stage-media, .svc__left { width: 100%; align-self: stretch; } }
@media (max-width: 640px) {
  .sv__split { gap: 10px; }
  .sv__device { width: 96px; border-width: 4px; border-radius: 18px; }
  .sv__code { font-size: 10px; padding: 6px; }
  .sv__chip { left: 14px; bottom: 14px; padding: 7px 12px; font-size: 12px; }
  .sv__phone { width: 30%; }
  .sv__spark span { top: -14px; }
  .sv__term pre { font-size: 11px; padding: 12px; line-height: 1.8; }
}
/* v27: 4 services */
.svc__scroller { height: 375vh; }   /* 5 services */
.svc__progress span { transform: scaleX(0.2); }
@media (max-width: 1024px) { .svc__scroller { height: 450vh; } }
/* v28: Kharcha + DopeChem cards */
.project__media--contain { align-items: center !important; justify-content: center !important; padding: 32px !important; }
.project__media--contain img { position: static !important; width: auto !important; height: 70% !important; object-fit: contain; border-radius: 0 !important; margin: 0 !important; transform: none !important; }
.project__media--molecule { align-items: center !important; justify-content: center !important; padding: 32px !important; }
.project__media--molecule svg { height: 62%; width: auto; transition: transform 1s var(--ease-out); }
.project:hover .project__media--molecule svg { transform: rotate(18deg); }
/* v29: hero wordmark — static and centred on every screen */
.hero .wordmark { display: block; text-align: center; margin-left: 0; margin-right: 0; transform: none !important; will-change: auto; }
/* v31: own products — 2 big on top, 4 smaller below (no Show more) */
.work-grid--studio { grid-template-columns: repeat(4, 1fr) !important; row-gap: 40px; }
.work-grid--studio > .project:nth-child(-n+2) { grid-column: span 2; }
.work-grid--studio > .project:nth-child(n+3) .project__media { aspect-ratio: 4 / 5; }
.work-grid--studio > .project:nth-child(n+3) .project__meta { flex-direction: column; gap: 8px; }
.work-grid--studio > .project:nth-child(n+3) .project__meta h3 { font-size: var(--text-base); }
.work-grid--studio > .project:nth-child(n+3) .project__badge { font-size: 10px; padding: 5px 10px; }
.work-grid--studio > .project:nth-child(n+3) .project__media img { width: 44%; }
.work-grid--studio > .project:nth-child(n+3) .project__media--art img { width: 100%; }
.work-grid--studio > .project:nth-child(n+3) .project__media--contain img { height: 55% !important; width: auto !important; }
@media (max-width: 1024px) { .work-grid--studio > .project:nth-child(n+3) { grid-column: span 2; } }
@media (max-width: 640px) { .work-grid--studio { grid-template-columns: 1fr !important; } .work-grid--studio > .project { grid-column: auto !important; } }

#grid-clients .project:first-child .project__badge { left: auto; right: 16px; }

/* v36: full-image cards (Launchpad, BIB, Panna, Notchy) get the same hover motion as the phone cards */
.work-grid .project__media--art img { transition: transform 0.9s var(--ease-out) !important; will-change: transform; }
.work-grid .project:hover .project__media--art img { transform: scale(1.05) translateY(-6px) !important; }

/* v37: multi-screen client cards (ModeAI, Hotel Media) — show each screen whole, nothing cut at the top */
#grid-clients .project__media:not(.project__media--art):not(.pm--full) { align-items: center; justify-content: center; gap: 12px; padding: 18px 20px; }
#grid-clients .project__media:not(.project__media--art):not(.pm--full) img { height: 100%; width: auto; max-width: 32%; object-fit: contain; border-radius: 14px; transform: none; transition: transform 0.6s var(--ease-out); }
#grid-clients .project:hover .project__media:not(.project__media--art):not(.pm--full) img { transform: translateY(-6px); }
#grid-clients .project:hover .project__media:not(.project__media--art):not(.pm--full) img:nth-child(2) { transform: translateY(-10px); }

/* ================= v38: mobile polish ================= */
.svc__mhead { display: none; }
@media (max-width: 640px) {
  /* 1. Shipped strip: tidy 2-column grid */
  .shipped { flex-direction: column; align-items: flex-start; }
  .shipped__list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; width: 100%; }
  .shipped__item { font-size: 15px; min-width: 0; }
  .shipped__item span, .shipped__item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 1024px) {
  /* 2. Services pinned screen: heading on top, visual fills, nothing left empty */
  .svc__mhead { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; }
  .svc__mcount { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); }
  .svc__mcount span { color: var(--color-accent); }
  .svc__sticky { flex-direction: column; padding: 88px 0 20px; }
  .svc__grid { flex: 1; min-height: 0; height: auto; gap: 16px; }
  .svc .stage-media { flex: 1 1 auto; height: auto; min-height: 0; }
  .svc .stage-media__counter { display: none; }
  .svc__left { flex: 0 0 auto; }
  .svc__progress { margin-top: 14px; }
  /* 3. Process: cards stack on top of each other while scrolling */
  .process { overflow: clip; }
  .flow { display: block; padding-top: 0; }
  .flow__step { position: sticky; margin-bottom: 24px; box-shadow: 0 -12px 30px rgb(0 0 0 / 0.45); }
  .flow__step:nth-child(1) { top: 96px; }
  .flow__step:nth-child(2) { top: 112px; }
  .flow__step:nth-child(3) { top: 128px; }
  .flow__step:nth-child(4) { top: 144px; }
  .flow__step { background: #141414; }
  .flow__step--hot { box-shadow: 0 -12px 30px rgb(0 0 0 / 0.45), 0 0 0 6px rgb(255 64 0 / 0.08); }
  .flow__node { position: static; transform: none !important; }
  .flow__what { min-height: 0; }
}
.hero .wordmark { white-space: nowrap; width: 100%; }

/* v39: shipped strip — even 5×2 grid on desktop, consistent sans monograms */
.shipped { flex-direction: column; align-items: stretch; gap: 22px; padding: 36px 0 40px; }
.shipped__list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px 24px; width: 100%; }
.shipped__item { font-size: var(--text-base); opacity: 0.85; }
.shipped__item img, .shipped__item i { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; }
.shipped__item i { font-family: var(--font-sans); font-weight: 500; font-size: 15px; }
@media (max-width: 900px) { .shipped__list { grid-template-columns: 1fr 1fr; } }

/* v40: mobile process stack — every card same height and same top, so each new card fully covers the last */
@media (max-width: 1024px) {
  .flow__step, .flow__step:nth-child(n) { top: 92px; min-height: min(700px, calc(100svh - 116px)); margin-bottom: 28px; }
  .flow__step { box-shadow: 0 -8px 24px rgb(0 0 0 / 0.5); }
  .flow__step:last-child { margin-bottom: 0; }
  .flow__get { margin-top: auto; }
}
@media (max-width: 1024px) { .flow__step, .flow__step:nth-child(n) { min-height: min(620px, calc(100svh - 116px)); } }
/* v41: layered stack — cards 1–3 step down 16px (edges visible); card 4 snaps back to the top and is
   32px taller, so it covers the whole stack fully */
@media (max-width: 1024px) {
  .flow__step:nth-child(1) { top: 92px; }
  .flow__step:nth-child(2) { top: 108px; }
  .flow__step:nth-child(3) { top: 124px; }
  .flow__step:nth-child(4) { top: 92px; min-height: calc(min(620px, calc(100svh - 116px)) + 32px); }
}
/* v42: footer wordmark shows more of the letters at the bottom of the page */
.footer .wordmark { line-height: 0.86 !important; padding-bottom: 0; margin-bottom: -0.06em; }
@media (max-width: 640px) { .footer .wordmark { line-height: 0.9 !important; } }
/* v43: footer wordmark rests half-visible; back-to-top */
.footer { overflow: hidden; }
.footer__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0 28px; border-top: 1px solid var(--color-border-inverse); font-size: var(--text-sm); }
.totop { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 8px 0 18px; border-radius: 99px; border: 1px solid var(--color-border-inverse); color: var(--color-text-inverse); font-weight: 500; transition: border-color var(--duration-fast), background var(--duration-fast); }
.totop:hover { border-color: var(--color-accent); }
.totop__icon { width: 30px; height: 30px; border-radius: 99px; display: grid; place-items: center; background: var(--color-accent); color: #fff; transition: transform var(--duration-base) var(--ease-out); }
.totop:hover .totop__icon { transform: translateY(-3px); }
.footer .wordmark { margin-bottom: -0.2em; }
.totop { white-space: nowrap; flex-shrink: 0; } @media (max-width: 640px) { .footer__bar .muted { font-size: 13px; } }
/* v44: footer wordmark — static, shows exactly the top half of the letters */
.footer .wordmark { transform: none !important; display: block; line-height: 0.8 !important; height: 0.5em; overflow: hidden; margin: 8px 0 0 !important; padding: 0 !important; }
@media (max-width: 640px) { .footer .wordmark { line-height: 0.8 !important; height: 0.6em; } }

/* ================= Touch: no grey/blue tap flash on mobile ================= */
html { -webkit-tap-highlight-color: transparent; }

/* ================= Availability badge ================= */
.avail { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: var(--text-xs); font-weight: 500; color: var(--color-text-muted); }
.avail i { position: relative; width: 8px; height: 8px; border-radius: 99px; background: #1FA855; flex-shrink: 0; }
.avail i::after { content: ""; position: absolute; inset: -4px; border-radius: 99px; background: #1FA855; opacity: 0.35; animation: avail-pulse 2s var(--ease-out) infinite; }
@keyframes avail-pulse { from { transform: scale(0.5); opacity: 0.45; } to { transform: scale(1.6); opacity: 0; } }
.nav__actions { gap: 16px; }
@media (max-width: 1240px) { .nav .avail { display: none; } }

/* ================= Desktop nav: active section ================= */
.nav__links a { position: relative; transition: color var(--duration-fast); }
.nav__links a::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 4px; height: 4px; margin-left: -2px; border-radius: 99px; background: var(--color-accent); opacity: 0; transform: scale(0); transition: opacity var(--duration-fast), transform var(--duration-base) var(--ease-out); }
.nav__links a.is-current { color: var(--color-text); font-weight: 500; }
.nav__links a.is-current::after { opacity: 1; transform: none; }

/* ================= Mobile: flat top bar (like apple.com) + full-screen menu ================= */
@media (max-width: 1024px) {
  .nav { top: 0; padding: 0; z-index: 110; }
  .nav__inner {
    max-width: none; height: 56px; border-radius: 0; border: 0; border-bottom: 1px solid var(--color-border);
    padding: 0 calc(var(--page-padding) - 10px) 0 var(--page-padding); gap: 12px;
    background: color-mix(in srgb, var(--color-bg) 85%, transparent);
  }
  .nav .nav__cta, .nav .avail { display: none; }
  .nav__actions { gap: 0; }
  .nav__toggle { display: flex; width: 44px; height: 44px; border: 0; border-radius: 0; background: none; gap: 6px; }
  .nav__toggle span { width: 20px; height: 1.5px; }
  .nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
  html.mnav-lock .nav__inner { background: var(--color-bg); border-bottom-color: transparent; }
  html { scroll-padding-top: 64px; }   /* 56px top bar + a little air */
  .hero { padding-top: 40px; }
}
.mnav {
  position: fixed; top: 56px; left: 0; right: 0; bottom: 0; z-index: 100; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  padding: 8px var(--page-padding) calc(24px + env(safe-area-inset-bottom));
  background: var(--color-bg); color: var(--color-text);
  visibility: hidden; opacity: 0;
  /* closing: the links vanish first, then the background fades and the page glides to the section */
  transition: opacity 0.3s var(--ease-out) 0.08s, visibility 0s linear 0.38s;
}
.mnav.is-open { visibility: visible; opacity: 1; transition: opacity 0.25s var(--ease-out), visibility 0s; }
/* Lock the body (not html): html must stay visible so the sticky top bar keeps working */
html.mnav-lock body { overflow: hidden; }
.mnav__list li { opacity: 0; transform: translateY(-8px); transition: opacity 0.14s ease-out, transform 0.2s ease-out; }
.mnav.is-open .mnav__list li { transition: opacity 0.35s var(--ease-out), transform 0.4s var(--ease-out); }
.mnav.is-open .mnav__list li { opacity: 1; transform: none; transition-delay: calc(40ms + var(--i) * 30ms); }
.mnav__list a { display: flex; align-items: baseline; gap: 14px; padding: 9px 0; font-weight: 600; font-size: 30px; line-height: 1.15; letter-spacing: -0.02em; transition: color var(--duration-fast); }
.mnav__list sup { width: 18px; flex-shrink: 0; font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 0; line-height: 1; vertical-align: baseline; position: relative; top: -12px; color: var(--color-text-muted); }
.mnav__list a.is-current, .mnav__list a:hover, .mnav__list a:focus-visible { color: var(--color-accent); }
.mnav__list a.is-current sup { color: var(--color-text); }
.mnav__list a:active { opacity: 0.7; }
.mnav__cta { margin-top: auto; padding-top: 32px; display: flex; flex-direction: column; gap: 14px; opacity: 0; transition: opacity 0.14s ease-out; }
.mnav.is-open .mnav__cta { opacity: 1; transition: opacity 0.4s var(--ease-out) 0.2s; }
.mnav__cta .btn--accent { justify-content: space-between; height: 56px; padding-left: 24px; font-size: var(--text-base); }
.mnav__cta .avail { font-size: var(--text-sm); }
.mnav__mail { align-self: flex-start; font-size: var(--text-sm); color: var(--color-text-muted); text-decoration: underline; text-underline-offset: 4px; padding: 4px 0; }
@media (min-width: 1025px) { .mnav { display: none; } }

/* Team cards: links line up at the bottom on every width */
@media (max-width: 640px) { .person__note { font-size: 13px; } .person__meta span { font-size: 13px; } }

/* Hero buttons on phones: full width, easy to tap */
@media (max-width: 640px) {
  .hero__cta { flex-direction: column; align-items: stretch; width: 100%; }
  .hero__cta .hero__primary { justify-content: space-between; padding-left: 24px; }
  .hero__cta .btn--ghost { justify-content: center; }
  .hero__copy { width: 100%; }
}

/* Hero: the main button is solid black so it clearly leads; arrow chip in the brand orange */
.hero__primary { padding-right: 8px; }
.hero__primary .btn__chip { background: var(--color-accent); color: var(--color-ink); }
.hero__primary:hover { background: #1c1c1c; }

/* ================= Services: CTA per service + "not sure" line ================= */
.svc__cta { align-self: flex-start; display: inline-flex; gap: 6px; padding: 4px 0; font-weight: 500; font-size: var(--text-sm); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.svc__cta:hover { color: var(--color-accent); }
.svc__help { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; margin-top: 8px; padding: 28px 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); font-size: var(--text-lg); font-weight: 500; }
@media (max-width: 640px) { .svc__help { font-size: 17px; } }

/* ================= Proof reel: captions ================= */
.reel__item { display: block; }
.reel__cap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 8px; font-size: 12px; line-height: 1.3; color: rgb(251 251 251 / 0.72); }
.reel__cap b { width: 100%; font-weight: 500; color: var(--color-text-inverse); }
.reel__tag { font-style: normal; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: 99px; border: 1px solid rgb(251 251 251 / 0.28); color: rgb(251 251 251 / 0.8); }
.reel__tag--client { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-ink); }
@media (max-width: 640px) { .reel__cap { font-size: 10.5px; } .reel__tag { font-size: 8.5px; padding: 2px 5px; } }


/* ================= Products we've shipped: client vs own ================= */
.shipped__groups { display: flex; flex-direction: column; gap: 16px; flex: 1; min-width: 0; }
.shipped__group { display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap; }
.shipped__sub { flex: 0 0 92px; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text); }
.shipped__groups .shipped__list { flex: 1; min-width: 0; grid-template-columns: repeat(6, minmax(0, 1fr)); }   /* both rows share columns */
.shipped__group { flex-wrap: nowrap; }
@media (max-width: 1199px) { .shipped__groups .shipped__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } .shipped__group { align-items: flex-start; } .shipped__sub { padding-top: 8px; } }
@media (max-width: 999px) { .shipped__groups .shipped__list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .shipped__group { flex-direction: column; align-items: flex-start; flex-wrap: wrap; } .shipped__sub { flex: none; padding-top: 0; } .shipped__groups .shipped__list { width: 100%; } }


/* Services (desktop): stack all five texts in one grid cell, so the box is as tall as the longest
   service. The progress line then stays in the same place, with the same gap, for every service. */
@media (min-width: 1025px) {
  .svc__details { display: grid; height: auto; }
  .svc__panel { position: relative; inset: auto; grid-area: 1 / 1; }
  .svc__progress { margin-top: 32px; }
  .svc__panel .svc__cta { margin-top: auto; }   /* every "Start a … project" link sits at the same height */
}

/* Services intro: no lone last word ("team.") on its own line */
#services .section-head .lede { max-width: 440px; text-wrap: pretty; }

/* ================= Hero on phones: clean line breaks, compact chips, founders on one line ================= */
@media (max-width: 640px) {
  .hero .eyebrow { align-items: flex-start; }
  .hero .eyebrow .dot { margin-top: 5px; }
  .hero .eyebrow__sep { display: none; }
  .hero .eyebrow__more { display: block; }
  .hero__br { display: none; }
  .hero__title { text-wrap: balance; }
  .hero__chips { gap: 6px; }
  .hero__chips .tag { padding: 6px 10px; font-size: 10.5px; letter-spacing: 0.02em; white-space: nowrap; }
  .hero__top { gap: 32px; }
  .hero__aside { flex-direction: row; align-items: center; gap: 12px; }
  .hero__aside p { max-width: none !important; }
  .hero .wordmark { margin-top: 28px; }
}

/* ================= Process: four promises in one row on desktop ================= */
@media (min-width: 1025px) { .promises { grid-template-columns: repeat(4, 1fr); gap: 28px; } }
@media (min-width: 641px) and (max-width: 1024px) { .promises { grid-template-columns: 1fr 1fr; } }


/* Process illustrations: readable small labels */
.tf__install { color: var(--color-on-accent); }
.store__status { color: #11663A; }

/* ================= FAQ categories ================= */
.faq__group + .faq__group { margin-top: 40px; }
.faq__cat { margin: 0 0 6px; font-family: var(--font-mono); font-weight: 400; font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-muted); }
.faq__group details:last-child { border-bottom: 1px solid var(--color-border); }
@media (max-width: 640px) { .faq__group + .faq__group { margin-top: 32px; } }

/* ================= Why we started Creatist ================= */
.story { border-top: 1px solid var(--color-border); }
.story__grid { display: grid; grid-template-columns: 420px 1fr; gap: 64px; align-items: start; }
.story__lead { font-weight: 500; font-size: clamp(26px, 3vw, 40px); line-height: 1.12; letter-spacing: var(--tracking-tight); max-width: 860px; text-wrap: balance; }
.story__body { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 36px; max-width: 860px; }
.story__body p { color: var(--color-text-muted); line-height: 1.65; }
.story__sign { display: flex; align-items: center; gap: 14px; margin-top: 36px; }
.story__sign b { display: block; font-weight: 500; }
.story__sign span { font-size: var(--text-sm); color: var(--color-text-muted); }
@media (max-width: 1024px) { .story__grid { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 640px) { .story__body { grid-template-columns: 1fr; gap: 16px; margin-top: 24px; } .story__sign { margin-top: 28px; } }

/* FAQ heading: no lone "us." on its own line */
#faq .h-statement { text-wrap: balance; }

/* ================= Contact: "Send a message" form inside the booking card ================= */
.book .form { padding: 0; background: transparent; box-shadow: none; border-radius: 0; gap: 16px; }
.field__opt { font-weight: 400; color: var(--color-text-muted); }
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form__actions .form__send { flex: 1; justify-content: space-between; padding-left: 24px; padding-right: 8px; }
.form__send .btn__chip { background: var(--color-accent); color: var(--color-ink); }
.form__send:disabled { opacity: 0.7; cursor: progress; }
.form__note { font-size: var(--text-sm); color: var(--color-text-muted); }
.form__note.is-error { color: #B42318; }
.form__done { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 40px 4px; outline: none; }
.form__done[hidden] { display: none; }
.form__tick { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 99px; background: var(--color-accent); color: var(--color-ink); font-size: 22px; font-weight: 600; margin-bottom: 6px; }
@media (max-width: 640px) { .book .form__row { grid-template-columns: 1fr; } }

/* "Prefer to write?" label: readable grey */
.book__alt .eyebrow { color: var(--color-text-muted); }
.book .form[hidden] { display: none; }   /* after sending, only the "Message sent" state shows */
#pane-msg { display: flex; flex-direction: column; }
#pane-msg .form__done { flex: 1; justify-content: center; align-items: center; text-align: center; padding: 48px 16px; }

/* No lone last word in the hero founders line or the footer line */
.hero__aside p, .footer__cols > div:first-child p:first-child { text-wrap: balance; }

/* White app icons (Panna.ai) need a hairline edge on the light page */
.shipped__item img.shipped__icon--light { border: 1px solid var(--color-border); box-sizing: border-box; }

/* Product icons in their own brand colours, always (like Google / Microsoft logo walls). No grey filter, no fade. */
.shipped__item, .shipped__item:hover { opacity: 1; filter: none; }
.shipped__item img { transition: transform var(--duration-base) var(--ease-out); }
.shipped__item:hover img { transform: translateY(-2px); }