/* ============================================================
   ORELIS LABS — Cuberto-inspired design system
   Type scale: fluid rem (Cuberto): mobile 2.6667vw, desktop .625vw
   Palette: ink #000 / paper #fff / accent #fc0019 / muted #b7b7b7
   ============================================================ */

:root {
  --ink: #000;
  --paper: #fff;
  --accent: #fc0019;
  --muted: #b7b7b7;
  --muted-2: rgba(255, 255, 255, 0.55);
  --line: rgba(0, 0, 0, 0.12);
  --line-w: rgba(255, 255, 255, 0.14);
  --tile: #f1f3fa;
  --ease-text: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-underline: cubic-bezier(0.19, 1, 0.22, 1);
  --spring: cubic-bezier(0.34, 5.56, 0.64, 1);
  --spring-soft: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ripple: cubic-bezier(0.4, 0, 0, 1);
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
}

html {
  font-size: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}

@media (max-width: 767px) {
  html { font-size: min(2.6666666667vw, 10px); }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  font-family: "Manrope", system-ui, -apple-system, sans-serif;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(0, 0, 0, 0.4) 0.7px, transparent 0.7px);
  background-size: 18px 18px;
  opacity: 0.04;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 0%, rgba(0, 0, 0, 0.5) 55%, transparent 85%);
  mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 0%, rgba(0, 0, 0, 0.5) 55%, transparent 85%);
}

::selection { background: var(--accent); color: var(--paper); }
::-webkit-scrollbar { width: 0.6rem; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink); border-radius: 1rem; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

/* ---------- Layout ---------- */

.container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
}
@media (min-width: 768px) { .container { padding: 0 12rem; } }
@media (min-width: 1600px) { .container--lg { padding: 0 24rem; } }

.section { padding: 10rem 0; position: relative; }
@media (min-width: 768px) { .section { padding: 12rem 0; } }

/* Subtle center glow on white sections (sized to viewport so it reads on tall sections) */
.white-vignette {
  background: radial-gradient(
    ellipse at center,
    #FFFFFF 0%,
    #FFFFFF 20%,
    #F4F4F4 45%,
    #E5E5E5 70%,
    #CFCFCF 100%
  );
}

/* Sections that flip to black (Cuberto "-inverse") */
.section--inverse,
.nav.is-dark {
  background: var(--ink);
  color: var(--paper);
}

/* ---------- Typography ---------- */

h1, h2, h3, h4 { font-weight: 600; text-wrap: balance; }

.h-display {
  font-size: 4.6rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}
.h-2 { font-size: 3.4rem; font-weight: 600; line-height: 1.05; letter-spacing: -0.03em; }
.h-3 { font-size: 3.2rem; font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; }
.h-4 { font-size: 2.6rem; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }

@media (min-width: 768px) {
  .h-display { font-size: 9rem; }
  .h-2 { font-size: 4.2rem; }
  .h-3 { font-size: 3.4rem; }
  .h-4 { font-size: 3rem; }
}

.display--light { font-weight: 300; letter-spacing: -0.05em; }
.display--mega { font-size: 8rem; font-weight: 300; letter-spacing: -0.05em; line-height: 1; }
@media (min-width: 768px) { .display--mega { font-size: 16rem; } }

.h-display, .h-2, .h-3, .h-4,
.hero-title, .vid-title, .vid-title-line,
.row-title, .tl-title { text-transform: uppercase; }

.lead { font-size: 2.3rem; line-height: 1.3; letter-spacing: -0.01em; }
@media (min-width: 768px) { .lead { font-size: 2.8rem; } }

.muted { color: var(--muted); }
.section--inverse .muted { color: var(--muted-2); }

/* Eyebrow marker — Orelis "● What we do" in Cuberto styling */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.section--inverse .eyebrow { color: var(--muted-2); }
.eyebrow .dot {
  width: 1.4rem; height: 1.4rem;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  animation: blink 2s infinite;
}
.eyebrow .dot--static { animation: none; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* Split-line reveal wrapper (JS fills these) */
.split-line { display: block; overflow: hidden; padding: 0.1em 0; margin: -0.1em 0; }
.split-line > .split-inner { display: block; will-change: transform; }

/* Word masks for scrub reveals */
.word-mask { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0.22em 0 0.16em 0; margin: -0.22em 0 -0.16em 0; }
.word-mask > span { display: inline-block; will-change: transform; }

/* ---------- Links: rollover + underline reveal (Cuberto) ---------- */

.roll {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.12em 0.15em;
  margin: -0.12em -0.15em;
}
.roll::after {
  content: attr(data-text);
  position: absolute;
  top: 100%;
  left: 0.15em;
  display: block;
  will-change: transform;
  transition: transform 1s var(--ease-text);
}
.roll > span { display: inline-block; transition: transform 1s var(--ease-text); will-change: transform; }
@media (pointer: fine) {
  .roll:hover::after, .roll:hover > span { transform: translateY(-100%); }
}

.u-link {
  position: relative;
  display: inline-block;
  padding-bottom: 0.35rem;
}
.u-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 0.15rem;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 1s var(--ease-underline);
}
@media (pointer: fine) {
  .u-link:hover::after { transform: scaleX(1); transform-origin: left; }
}

/* ---------- Buttons (Cuberto pill CTA) ---------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  border-radius: 99999px;
  padding: 2.2rem 3.4rem;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  will-change: transform;
  cursor: none;
}
@media (min-width: 768px) {
  .btn { padding: 3.2rem 5.6rem; font-size: 2.4rem; }
}
.btn--sm { padding: 1.8rem 2.6rem; font-size: 1.6rem; }
@media (min-width: 768px) { .btn--sm { padding: 2rem 3.2rem; font-size: 1.8rem; } }

.btn--fill { background: var(--ink); color: var(--paper); }
.btn--fill .btn-ripple { background: var(--accent); }
.btn--fill:hover .btn-title { color: var(--paper); }
.btn--fill.inverse { background: var(--accent); color: var(--paper); }
.btn--fill.inverse .btn-ripple { background: var(--ink); }
.btn--fill.inverse:hover .btn-title { color: var(--paper); }

.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 0.12rem currentColor; }
.btn--ghost .btn-ripple { background: var(--ink); }
.btn--ghost:hover { color: var(--paper); }
.btn--ghost-inverse { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 0.12rem currentColor; }
.btn--ghost-inverse .btn-ripple { background: var(--paper); }
.btn--ghost-inverse:hover { color: var(--ink); }

.btn--hero { background: var(--ink); color: #ffffff; }
.btn--hero .btn-ripple { background: var(--accent); }
.btn--hero .btn-title { color: #ffffff; }
.btn--hero:hover .btn-title { color: #ffffff; }

.btn-ripple {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 100%;
  border-radius: 50% 50% 0 0;
  transform: translateY(101%);
  transition: transform 0.7s var(--ripple);
  z-index: -1;
}
@media (pointer: fine) {
  .btn:hover .btn-ripple { transform: translateY(0) scaleY(1.001); }
}

.btn-title { display: inline-flex; align-items: center; gap: 1.4rem; z-index: 1; transition: transform 0.5s var(--spring); }
@media (pointer: fine) { .btn:active .btn-title { transform: scale(0.94); } }
.btn-title .roll, .btn-title .roll > span, .btn-title .roll::after { color: inherit; }
.btn .btn-arrow {
  display: inline-flex;
  transition: transform 0.8s var(--ease-text);
}
.btn:hover .btn-arrow { transform: rotate(45deg); }
.btn:hover .btn-arrow--straight { transform: translateX(0.8rem); }

/* Round magnetic button */
.btn-round {
  width: 6rem; height: 6rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--paper);
  transition: transform 0.5s var(--spring);
  will-change: transform;
  cursor: none;
}
.btn-round--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 0.12rem currentColor; }
.section--inverse .btn-round--ghost, .nav.is-dark .btn-round--ghost { color: var(--paper); }
.btn-round svg { transition: transform 0.8s var(--ease-text); }
@media (pointer: fine) {
  .btn-round:hover svg { transform: translateY(-0.6rem); }
  .btn-round:hover { transform: scale(0.95); }
}

/* ---------- Custom cursor (Cuberto exclusion blend) ---------- */

.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 10rem; height: 10rem;
  margin: -5rem 0 0 -5rem;
  border-radius: 50%;
  pointer-events: none;
  z-index: 900;
  mix-blend-mode: exclusion;
  color: var(--paper);
  opacity: 0;
  will-change: transform;
}
@media (pointer: fine) {
  .cursor { display: block; }
}
.cursor::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: currentColor;
  transform: scale(0.1);
  transition: transform 0.4s var(--ease-text), background 0.4s;
}
.cursor.is-on { opacity: 1; }
.cursor.is-hover::before { transform: scale(1); }
.cursor.is-hidden { opacity: 0 !important; }

.cursor-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #000;
  transform: scale(0) rotate(12deg);
  transition: transform 0.4s var(--ease-text);
  opacity: 0;
}
.cursor.is-label::before { background: var(--paper); transform: scale(1); }
.cursor.is-label .cursor-label { transform: scale(1) rotate(0); opacity: 1; }
.cursor-img {
  position: absolute;
  inset: -3rem;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  transform: scale(0) rotate(-8deg);
  transition: transform 0.45s var(--ease-text);
  box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.35);
}
.cursor.is-media { width: 16rem; height: 16rem; margin: -8rem 0 0 -8rem; }
.cursor.is-media::before { transform: scale(0); }
.cursor.is-media .cursor-img { transform: scale(1) rotate(0); }
.cursor.is-media .cursor-label { display: none; }

/* ---------- Navbar ---------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  padding: 1.8rem 0;
  color: var(--paper);
  transition: transform 0.7s var(--ease-text), background 0.5s, color 0.4s;
  will-change: transform;
}
.nav.is-scrolled {
  background: rgba(0, 0, 0, 0.85);
  -webkit-backdrop-filter: blur(12px) saturate(300%);
  backdrop-filter: blur(12px) saturate(300%);
}
.nav.is-dark.is-scrolled {
  background: rgba(0, 0, 0, 0.85);
  -webkit-backdrop-filter: blur(12px) saturate(300%);
  backdrop-filter: blur(12px) saturate(300%);
}
.nav.is-hidden { transform: translateY(-110%); }
.nav.is-open { transform: translateY(0); }

.nav-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.logo {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  display: inline-flex;
  align-items: center;
  cursor: none;
}
.logo em { font-style: normal; color: var(--accent); display: inline-block; vertical-align: middle; margin: 0 0.03em; transform: translateY(-0.08em); }
.logo .roll { padding: 0.12em 0.3em; margin: -0.12em -0.3em; }
.logo .roll { font-weight: 500; }
.logo .roll::after, .logo .roll > span { color: inherit; }

.nav-links {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: 4rem;
}
@media (min-width: 1024px) { .nav-links { display: flex; } }

.nav-link {
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  position: relative;
  cursor: none;
  color: var(--paper);
  text-decoration: none;
}
.nav-link:hover { color: var(--accent); }
.nav-link.is-active { color: var(--accent); }
.nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 0; bottom: -0.4rem;
  width: 100%; height: 0.15rem;
  background: var(--accent);
}

.nav-cta { display: none; }
@media (min-width: 1024px) { .nav-cta { display: inline-flex; } }
.nav-cta .btn-arrow { display: none; }
.nav-cta { background: var(--accent); color: var(--paper); }
.nav-cta .btn-ripple { background: var(--ink); }
@media (min-width: 1024px) { .nav-mobile-cta { display: none; } }

.nav-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.9rem;
  width: 5.6rem; height: 5.6rem;
  border-radius: 50%;
  align-items: center;
  background: var(--ink);
  color: var(--paper);
  z-index: 302;
  position: relative;
  cursor: none;
}
.nav-burger span {
  display: block;
  width: 2.4rem; height: 0.22rem;
  background: currentColor;
  border-radius: 0.2rem;
  transition: transform 0.5s var(--ease-text), width 0.5s var(--ease-text);
}
.nav-burger span:nth-child(2) { width: 1.6rem; }
@media (pointer: fine) {
  .nav-burger:hover span:nth-child(1) { transform: translateX(-0.4rem); }
  .nav-burger:hover span:nth-child(2) { transform: translateX(0.4rem); }
}
body.menu-open .nav-burger span:nth-child(1) { transform: translateY(0.56rem) rotate(45deg); width: 2.4rem; }
body.menu-open .nav-burger span:nth-child(2) { transform: translateY(-0.56rem) rotate(-45deg); width: 2.4rem; }
body.menu-open .nav-burger { background: var(--paper); color: var(--ink); }
body.menu-open .nav { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* Fullscreen menu (mobile overlay) */
.menu {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  z-index: 300;
  padding: 0;
  background:
    radial-gradient(150rem 90rem at 0% 100%, rgba(255, 25, 25, 0.18) 0%, rgba(255, 25, 25, 0.05) 45%, transparent 70%),
    radial-gradient(90rem 66rem at 50% 40%, rgba(255, 0, 60, 0.08) 0%, transparent 64%),
    radial-gradient(70rem 70rem at 50% 44%, rgba(255, 0, 60, 0.12) 0%, transparent 72%),
    radial-gradient(ellipse 120% 110% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.5) 100%),
    var(--grain),
    #000;
  color: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
  will-change: clip-path, opacity;
}
.menu.is-open { pointer-events: auto; }

.menu .container {
  max-width: none;
  margin: 0 auto;
  width: 100%;
  padding: 0 2.4rem;
}

.menu-link {
  display: flex;
  align-items: center;
  font-size: clamp(52px, 9vw, 68px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.92);
  padding: 0;
  cursor: none;
}
.menu-link .menu-index {
  font-family: inherit;
  font-variant-numeric: normal;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  color: rgba(255, 42, 42, 0.6);
  flex: none;
}
.menu-link .menu-index::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 58px;
  margin: 0 2.4rem;
  background: rgba(255, 255, 255, 0.15);
  vertical-align: middle;
}

/* ---------- Loader ---------- */

.loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 2rem 4rem;
  will-change: transform;
}
@media (min-width: 768px) { .loader { padding: 0 12rem 6rem; } }
.loader-left {
  font-size: 1.4rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.loader-percent {
  font-size: 10rem;
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: 1;
}
@media (min-width: 768px) { .loader-percent { font-size: 12rem; } }
@media (max-width: 767px) { .loader-percent { font-size: 2.8rem; } }
.loader-brand {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3.6rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
@media (min-width: 768px) { .loader-brand { font-size: 6rem; } }
.loader-brand em { font-style: normal; color: var(--accent); }

/* ---------- Marquee ---------- */

.marquee { overflow: hidden; white-space: nowrap; padding: 0.22em 0; margin: -0.22em 0; }
#portfolio .marquee {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.marquee-track {
  display: inline-flex;
  will-change: transform;
}
.marquee-group {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.marquee[data-direction="right"] .marquee-track { animation-direction: reverse; }
.marquee.paused .marquee-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none !important; }
}

.reel-item {
  display: inline-flex;
  align-items: center;
  gap: 1.3rem;
  font-size: 3.8rem;
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: 1;
  padding: 0.08em 1.3rem 0.08em 0;
  white-space: nowrap;
}
@media (min-width: 768px) { .reel-item { font-size: 5.9rem; } }
.reel-item::after {
  content: "●";
  font-size: 0.14em;
  color: var(--accent);
  vertical-align: middle;
}
.reel-item--sm { font-size: 3.4rem; font-weight: 500; letter-spacing: -0.03em; }
@media (min-width: 768px) { .reel-item--sm { font-size: 4rem; } }
/* ---- Socials marquee (videos section) ---- */
.marquee--socials { background: #000; }
.marquee--socials + .vcat { border-top: 0; }
.marquee--socials .marquee-group { align-items: center; }
.marquee--socials .sm-item,
.marquee--socials .sm-dot { flex: none; margin-right: 2.4rem; }
.marquee--socials .sm-item {
  display: inline-flex;
  align-items: center;
  color: #ffffff;
  opacity: 0.75;
}
.marquee--socials .sm-item svg { height: 2rem; width: auto; display: block; }
.marquee--socials .sm-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
  opacity: 1;
}
@media (pointer: fine) {
  .marquee--socials .sm-item:hover { opacity: 1; }
}

/* ---------- Avatars (portfolio reel) ---------- */

.avatar {
  width: 11rem; height: 11rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  transition: transform 0.8s var(--spring), box-shadow 0.5s var(--ease-out);
  cursor: none;
}
@media (min-width: 768px) { .avatar { width: 14rem; height: 14rem; } }
@media (pointer: fine) {
  .avatar:hover { transform: scale(1.1) rotate(3deg); box-shadow: 0 0 0 0.35rem var(--paper), 0 2rem 5rem rgba(0, 0, 0, 0.4); }
}

/* Mobile only: channel reel bleeds edge to edge, smaller avatars, no fade */
@media (max-width: 767px) {
  #portfolio .marquee {
    width: 100%;
    margin-inline: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }
  #portfolio .avatar {
    width: 8.8rem;
    height: 8.8rem;
  }
}

/* ---------- Cards ---------- */

.card {
  border-radius: 2rem;
  background: var(--tile);
  transition: transform 1s var(--ease-text);
  will-change: transform;
}
.section--inverse .card { background: rgba(255, 255, 255, 0.05); }

/* Numbered row list (Cuberto/studio pattern) */
.row-list > li {
  border-top: 0.12rem solid var(--line);
  padding: 4rem 0;
  transition: padding 0.8s var(--ease-text);
}
.section--inverse .row-list > li { border-color: var(--line-w); }
.row-list > li:last-child { border-bottom: 0.12rem solid var(--line); }
.section--inverse .row-list > li:last-child { border-color: var(--line-w); }
.row-list .row-num {
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.row-title { font-size: 3.2rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; }
@media (min-width: 768px) { .row-title { font-size: 4.2rem; } }
.row-text { margin-top: 1.6rem; max-width: 52rem; color: var(--muted); }
.section--inverse .row-text { color: var(--muted-2); }

/* ---------- Grid helpers ---------- */

.grid-2 { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .grid-2 { grid-template-columns: 1fr 1fr; gap: 3rem; } }

.grid-3 { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }

.grid-4 { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 900px) { .grid-4 { grid-template-columns: repeat(4, 1fr); gap: 3rem; } }

.section-head {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  margin-bottom: 7rem;
}
@media (min-width: 768px) {
  .section-head { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 4rem; margin-bottom: 7rem; }
}
.section-head .h-display { max-width: 22ch; }
.section-head--center { align-items: center; justify-content: center; text-align: center; }
.section-head--center .h-display { max-width: none; margin-inline: auto; }
.h-display--caps { text-transform: uppercase; letter-spacing: 0.01em; }

/* Portfolio intro — centered */
#portfolio {
  border-top: 0.1rem solid rgba(236, 236, 236, 0.16);
}
#portfolio .section-head {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
#portfolio .section-head > div {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#portfolio .section-head .h-display { max-width: none; }
#portfolio .section-head .lead { max-width: 52rem; }
#portfolio .section-head { margin-bottom: 4rem; }

/* Equal, decent spacing between the heading, the channel marquee and the CTA */
#portfolio .section-head { margin-bottom: 0; }
#portfolio > .container--lg + .marquee { margin-top: 5%; }
#portfolio > .marquee + .container--lg { margin-top: 5%; }

/* ---------- Hero (full-width animation, centered content) ---------- */

.hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 16rem;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero .container--lg {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  text-align: center;
}

.hero-title {
  font-size: 5.2rem;
  font-weight: 600;
  line-height: 0.96;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
}
@media (min-width: 768px) { .hero-title { font-size: 9rem; } }

.hero-side { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3rem; max-width: 76rem; margin: 0 auto; }
.hero-side .lead { max-width: 84rem; }
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; }
.hero-cta .btn { justify-content: center; }

.hero-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2.4rem;
  margin-bottom: 0.6rem;
}
.hero-stamp {
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero-stamp .tc-value { color: var(--ink); font-variant-numeric: tabular-nums; }
.hero-stamp .rec { color: var(--accent); }

/* ---------- Work hero radar / HUD ---------- */

.hero--radar {
  background: #050505;
  color: #fff;
  isolation: isolate;
}
.hero--radar .hero-title {
  color: #fff;
  font-weight: 500;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.hero--radar .lead {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 300;
}
.hero--radar .hero-stamp {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 400;
  letter-spacing: 0.22em;
}
.hero--radar .hero-stamp .tc-value { color: rgba(255, 255, 255, 0.82); }
.hero--radar .hero-stamp .rec { color: var(--accent); }
.hero--radar .hero-meta::after { background: var(--accent); box-shadow: 0 0 1.2rem var(--accent); }
.hero--radar .hero-cta .btn { border-radius: 99999px; }
.hero--radar .hero-cta .btn { background: var(--accent); color: var(--paper); }
.hero--radar .hero-cta .btn .btn-ripple { background: var(--ink); }
.hero--radar .hero-cta .btn-arrow { color: var(--paper); }

.hero-radar {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s var(--ease-out);
}
.hero-radar.is-on { opacity: 1; }

/* -- radar starfield canvas ------------------------------ */
.radar-stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
}

/* -- volumetric crimson glow (fades from centre-left of page, into black) -- */
.radar-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 18% 62%, rgba(252, 0, 25, 0.14), rgba(252, 0, 25, 0.05) 30%, transparent 62%);
  mix-blend-mode: screen;
  will-change: transform;
  animation: radar-glow-pulse 10s ease-in-out infinite;
}
@keyframes radar-glow-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* -- ring groups (three independent rotating layers) ------- */
.radar-rings {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150vmin;
  height: 150vmin;
  margin: -75vmin 0 0 -75vmin;
  will-change: transform;
}
.radar-rings svg,
.radar-cross svg,
.radar-hud svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* -- precision vector graphics: all faint (5-10% opacity) -- */
.radar-line {
  fill: none;
  stroke: rgba(252, 0, 25, calc(0.07 + var(--ring-hot, 0) * 0.04));
  stroke-width: 0.9;
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
}
.radar-line--dash {
  stroke-dasharray: 2.2 2.6;
  stroke-width: 0.9;
}
.radar-ticks line {
  stroke: rgba(252, 0, 25, calc(0.08 + var(--ring-hot, 0) * 0.05));
  stroke-width: 0.9;
  vector-effect: non-scaling-stroke;
}
.radar-cross-dot {
  fill: rgba(252, 0, 25, calc(0.5 + var(--ring-hot, 0) * 0.3));
  stroke: none;
}
.radar-brackets path,
.radar-measure line,
.radar-scan path {
  stroke: rgba(252, 0, 25, calc(0.06 + var(--ring-hot, 0) * 0.04));
  stroke-width: 0.8;
  fill: none;
  vector-effect: non-scaling-stroke;
}

/* -- crosshair (horizontal + vertical through center) ------ */
.radar-cross {
  position: absolute;
  inset: 0;
  will-change: transform;
}

/* -- HUD details (corner brackets, ticks, measure, scan) --- */
.radar-hud {
  position: absolute;
  inset: 0;
  will-change: transform;
}

/* -- cursor-following glow ---------------------------------- */
.radar-cursor-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 30rem;
  height: 30rem;
  margin: -15rem 0 0 -15rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(252, 0, 25, 0.12), transparent 62%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
  will-change: transform;
}
.radar-cursor-glow.is-on { opacity: 1; }

/* -- reduced motion: keep static radar, kill all movement --- */
@media (prefers-reduced-motion: reduce) {
  .radar-glow { animation: none; }
}

/* -- mobile: smaller radar, softer glow --------------------- */
@media (max-width: 767px) {
  .hero--radar .hero-title { font-size: 3.7rem; }
  .hero--radar .lead { font-size: 1.77rem; }
  .radar-glow { background: radial-gradient(ellipse at 14% 70%, rgba(252, 0, 25, 0.14), rgba(252, 0, 25, 0.05) 30%, transparent 62%); }
  .radar-rings { width: 132vmin; height: 132vmin; margin: -66vmin 0 0 -66vmin; }
  .radar-cursor-glow { width: 20rem; height: 20rem; margin: -10rem 0 0 -10rem; }
}


/* ---------- Home hero (image + text overlay) ---------- */

.hero.hero--home { padding-top: 10.7rem; }
.hero--home .hero-video { object-fit: cover; }
.hero--home .hero-video--mobile { display: none; }
.hero--home + .marquee { margin: 0; }

/* dark red glow + left-side dark scrim for legibility */
.hero--home::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(80rem 80rem at 12% 38%, rgba(255,45,45,0.28) 0%, rgba(255,45,45,0) 62%),
    linear-gradient(100deg, rgba(11,11,11,0.82) 0%, rgba(11,11,11,0.45) 46%, rgba(11,11,11,0.12) 72%, rgba(11,11,11,0) 100%);
}

.hero--home .hero-text {
  position: relative;
  z-index: 3;
  align-self: flex-start;
  width: 40%;
  min-width: 52rem;
  margin-left: clamp(8rem, 10vw, 12rem);
  padding-top: 4rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-eyebrow {
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #ff2d2d;
}

.hero-h1 {
  margin: 2.2rem 0 0;
  font-size: clamp(3.2rem, 4.16vw, 6.7rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: #ffffff;
  text-transform: none;
}
.hero-h1 em {
  font-style: normal;
  color: #ff2d2d;
}

.hero-sub {
  margin: 2.6rem 0 0;
  max-width: 48rem;
  font-size: clamp(1.6rem, 1.2vw, 1.8rem);
  line-height: 1.6;
  color: #a1a1aa;
}

.hero-actions {
  display: flex;
  gap: 1.6rem;
  margin-top: 3.4rem;
  flex-wrap: wrap;
}
.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 1.4rem 2.4rem;
  border-radius: 0.8rem;
  font-size: 1.6rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.3s, border-color 0.3s, color 0.3s, transform 0.3s;
  position: relative;
  overflow: hidden;
}
.hero-btn--primary {
  background: #ff2d2d;
  color: #ffffff;
}
.hero-btn--primary:hover { background: #ff4d4d; }
.hero-btn--ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
}
.hero-btn--ghost:hover { background: rgba(255, 255, 255, 0.08); }

.hero-stats {
  display: flex;
  gap: 4rem;
  margin-top: 5rem;
  flex-wrap: wrap;
}
.hero-stat {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.hero-stat strong {
  font-size: clamp(2rem, 1.6vw, 2.4rem);
  font-weight: 700;
  color: #ffffff;
}
.hero-stat span {
  font-size: 1.3rem;
  color: #a1a1aa;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .hero--home .hero-text { width: 55%; min-width: 0; margin-left: clamp(4rem, 8vw, 8rem); }
}

@media (max-width: 767px) {
  .hero.hero--home { height: calc(100svh - 4.7rem); min-height: calc(100svh - 4.7rem); padding-top: 0; }
  .hero--home .hero-video { display: none; }
  .hero--home .hero-video--mobile { display: block; top: 0; height: 100%; }
  .hero--home .hero-text {
    width: 100%;
    max-width: 85%;
    min-width: 0;
    height: 100%;
    margin: 0 auto;
    padding: clamp(10rem, 16svh, 13rem) 0 0;
    align-self: stretch;
    text-align: center;
    align-items: center;
    justify-content: flex-start;
    display: flex;
    flex-direction: column;
  }
  .hero-eyebrow { font-size: 1.11rem; letter-spacing: 0.2em; }
  .hero-h1 {
    margin: 1.8rem 0 0;
    font-size: clamp(2.4rem, 8.4vw, 3.8rem);
    line-height: 1.1;
    letter-spacing: -0.5px;
    text-align: center;
  }
  .hero-sub {
    margin: 1.6rem 0 0;
    max-width: 80%;
    font-size: 1.28rem;
    line-height: 1.6;
    text-align: center;
    color: #b3b3b3;
  }
  .hero-actions {
    margin-top: clamp(1.4rem, 2.7svh, 2.2rem);
    margin-bottom: 0.5rem;
    gap: 1.2rem;
    justify-content: center;
  }
  .hero-btn { padding: 1.03rem 1.71rem; border-radius: 0.8rem; font-size: 1.28rem; }
  .hero-btn--ghost { border: 1px solid rgba(255, 255, 255, 0.2); }
  .hero-stats {
    margin-top: clamp(1rem, 1.8svh, 1.5rem);
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
    align-items: start;
  }
  .hero-stat { min-width: 0; align-items: center; }
  .hero-stat strong { font-size: clamp(1.8rem, 5vw, 2.1rem); font-weight: 700; color: #ffffff; }
  .hero-stat span { font-size: clamp(0.95rem, 3vw, 1.1rem); color: #b3b3b3; }
  .hero--home + .marquee {
    margin-top: -5svh;
    border-top: 0.1rem solid rgba(236, 236, 236, 0.45);
    border-bottom: 0.1rem solid rgba(236, 236, 236, 0.45);
  }
}

/* Short phones retain a clear gap above the artwork without clipping the copy. */
@media (max-width: 767px) and (orientation: portrait) and (max-height: 700px) {
  .hero--home .hero-text { padding-top: clamp(9rem, 14svh, 11rem); }
  .hero-eyebrow { font-size: 0.88rem; }
  .hero-h1 { margin-top: 1.2rem; font-size: clamp(2.05rem, 7.6vw, 2.85rem); }
  .hero-sub { margin-top: 1.1rem; font-size: 1.1rem; line-height: 1.45; }
  .hero-actions { margin-top: 1.2rem; }
  .hero-btn { padding: 0.9rem 1.35rem; font-size: 1.1rem; }
  .hero-stats { margin-top: 0.9rem; }
  .hero-stat strong { font-size: 1.7rem; }
  .hero-stat span { font-size: 0.9rem; }
}

/* In landscape, keep the full vertical artwork and all controls in separate columns. */
@media (max-width: 767px) and (orientation: landscape) {
  .hero.hero--home { height: calc(100svh - 4.7rem); min-height: calc(100svh - 4.7rem); }
  .hero--home .hero-video--mobile {
    inset: 0 1.5rem 0 auto;
    width: 38%;
    height: 100%;
    object-fit: contain;
    object-position: right center;
  }
  .hero--home .hero-text {
    width: 58%;
    max-width: none;
    margin: 0 auto 0 2.4rem;
    padding: 2rem 0;
    align-items: flex-start;
    text-align: left;
  }
  .hero-eyebrow { font-size: 0.9rem; }
  .hero-h1 { margin-top: 0.8rem; font-size: clamp(2.2rem, 5vw, 3.1rem); text-align: left; }
  .hero-sub { margin-top: 0.8rem; max-width: 42rem; font-size: 1rem; line-height: 1.4; text-align: left; }
  .hero-actions { margin-top: 1rem; gap: 0.8rem; justify-content: flex-start; }
  .hero-btn { padding: 0.8rem 1.15rem; font-size: 1rem; }
  .hero-stats { margin-top: auto; gap: 0.5rem; }
  .hero-stat { align-items: flex-start; }
  .hero-stat strong { font-size: 1.55rem; }
  .hero-stat span { font-size: 0.82rem; }
}

/* ---------- Videos (home) ---------- */

#what-we-do .container {
  max-width: 156rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

.vid-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 6rem;
}

.vid-label {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--mono);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}
.vid-label .dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(252, 0, 25, 0.35);
  animation: vid-dot 2.2s ease-in-out infinite;
}
@keyframes vid-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(252, 0, 25, 0.4); }
  50% { box-shadow: 0 0 0 0.9rem rgba(252, 0, 25, 0); }
}

.vid-title {
  margin: 1.6rem 0 0;
  width: 100%;
  font-size: clamp(3.8rem, 6.4vw, 9.8rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 800;
}
.vid-title .amp { color: var(--accent); }

.vid-tagline {
  margin: 2.4rem auto 0;
  max-width: 60rem;
  color: var(--muted);
  font-size: clamp(1.8rem, 2vw, 2.1rem);
  line-height: 1.6;
}

/* ---- Category blocks: Long / Short / Podcast ---- */
.vcat {
  position: relative;
  padding-top: 4.6rem;
  border-top: 0.1rem solid rgba(236, 236, 236, 0.16);
}
.vcat + .vcat { margin-top: 8.5rem; }

.vcat-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.2rem;
  align-items: end;
  margin-bottom: 4.4rem;
}
@media (min-width: 640px) { .vcat-head { grid-template-columns: auto 1fr; } }
@media (min-width: 1100px) { .vcat-head { grid-template-columns: 24rem 1fr 40rem; gap: 3.6rem; } }

.vcat-meta { display: flex; align-items: center; gap: 1.3rem; }
.vcat-no {
  display: inline-flex;
  align-items: center;
  gap: 1.4rem;
  font-family: var(--mono);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent);
  line-height: 1;
}
.vcat-no::after {
  content: "";
  width: 3.6rem;
  height: 0.1rem;
  background: rgba(252, 0, 25, 0.45);
}
.vcat-eyebrow {
  font-family: var(--mono);
  font-size: 1.5rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #fff;
}
.vcat-title {
  margin: 0;
  font-size: clamp(3rem, 5.6vw, 8.4rem);
  line-height: 0.96;
  letter-spacing: -0.035em;
  font-weight: 700;
  text-transform: uppercase;
}
.vcat-side { display: flex; flex-direction: column; gap: 1.5rem; max-width: 40rem; }
.vcat-desc { margin: 0; color: var(--muted); font-size: 2rem; line-height: 1.6; }
.vcat-count {
  font-family: var(--mono);
  font-size: 1.5rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.vcat-count b { color: var(--accent); font-size: 1.8rem; font-weight: 600; margin-right: 0.4rem; }

/* ---- Grids ---- */
.vcat-grid { display: grid; grid-template-columns: 1fr; gap: 2.4rem; }
@media (min-width: 640px) { .vcat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .vcat-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; } }
.vcat-grid--tall { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
@media (max-width: 767px) { .vcat-grid--tall { grid-template-columns: 1fr; } }
@media (min-width: 1200px) { .vcat-grid--tall { grid-template-columns: repeat(4, 1fr); } }
.vcat-grid--wide .vid-thumb { aspect-ratio: 16 / 9; }
.vcat-grid--tall .vid-thumb { aspect-ratio: 9 / 16; }

.vid-card {
  background: #0a0a0c;
  border: 0.1rem solid rgba(236, 236, 236, 0.16);
  border-radius: 2rem;
  overflow: hidden;
  box-shadow: 0 0.6rem 2.4rem rgba(15, 17, 26, 0.08);
  transition: transform 0.25s var(--ease-text), box-shadow 0.25s var(--ease-text), border-color 0.25s var(--ease-text);
}
@media (pointer: fine) {
  .vid-card:hover {
    transform: translateY(-0.7rem);
    border-color: rgba(252, 0, 25, 0.55);
    box-shadow: 0 2.6rem 5rem -1.8rem rgba(252, 0, 25, 0.32), 0 1rem 2.4rem rgba(15, 17, 26, 0.3);
  }
}

.vid-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0a0a0c;
  background-size: cover;
  background-position: center;
  cursor: pointer;
}
.vid-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s var(--ease-text), opacity 0.2s var(--ease-text);
}
.vid-thumb.is-stopped .vid-media { opacity: 0; }
@media (pointer: fine) { .vid-card:hover .vid-media { transform: scale(1.03); } }
.vid-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 10, 12, 0.06) 0%, rgba(10, 10, 12, 0.22) 100%);
  transition: opacity 0.25s;
}
.vid-card:hover .vid-shade { opacity: 0.7; }
.vid-dur {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  padding: 0.35rem 0.8rem;
  border-radius: 0.5rem;
  background: rgba(10, 10, 12, 0.72);
  color: #fff;
  font-family: var(--mono);
  font-size: 1.2rem;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(4px);
}

#what-we-do { padding: 9rem 0 12rem; }
#what-we-do .vid-head { margin-bottom: 7rem; }

/* ---- Placeholder art (swap with real media later) ---- */
.vid-card:hover .vid-shade { opacity: 0.9; }

.vid-ph {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(70% 80% at 50% 115%, rgba(252, 0, 25, 0.18) 0%, transparent 70%),
    linear-gradient(140deg, #17141f 0%, #0f0f14 55%, #140d12 100%);
  transition: transform 0.35s var(--ease-text);
}
.vid-card:nth-child(even) .vid-ph {
  background:
    radial-gradient(70% 80% at 50% 115%, rgba(252, 0, 25, 0.12) 0%, transparent 70%),
    linear-gradient(140deg, #14141c 0%, #0e1016 55%, #110e18 100%);
}
@media (pointer: fine) {
  .vid-card:hover .vid-ph { transform: scale(1.05); }
}
.vid-ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(42% 42% at 50% 50%, rgba(252, 0, 25, 0.24) 0%, transparent 72%);
  opacity: 0;
  transition: opacity 0.35s;
}
@media (pointer: fine) {
  .vid-card:hover .vid-ph::before { opacity: 1; }
}
.vid-ph-num {
  position: relative;
  z-index: 1;
  font-family: var(--mono);
  font-size: clamp(3.6rem, 5vw, 6rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  color: rgba(255, 255, 255, 0.08);
  transition: color 0.35s, transform 0.35s var(--ease-text);
}
@media (pointer: fine) {
  .vid-card:hover .vid-ph-num { color: rgba(252, 0, 25, 0.45); transform: translateY(-0.4rem); }
}

/* richer bottom shade + z-layers once real media exists */
.vid-shade {
  z-index: 2;
  background: linear-gradient(180deg, rgba(10, 10, 12, 0) 45%, rgba(10, 10, 12, 0.6) 100%);
}
.vid-play { z-index: 3; }
.vid-thumb .vid-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  object-fit: cover;
}
.vid-thumb .sfv-embed {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}
.vid-thumb .vid-shade { z-index: 2; }


/* ---- Videos section: premium CSS-only cinematic background ---- */
#what-we-do {
  position: relative;
  overflow: hidden;
  color: #fff;
  background-color: #0B0B0D;
  background:
    /* red glow — top right, large, partially off-viewport */
    radial-gradient(52rem 52rem at 82% 4%, rgba(255,40,40,0.28) 0%, rgba(255,60,60,0.14) 42%, transparent 62%),
    /* red glow — bottom left, slightly larger, softer */
    radial-gradient(62rem 62rem at 4% 98%, rgba(255,40,40,0.16) 0%, rgba(255,60,60,0.08) 50%, transparent 72%),
    /* vignette shadow for depth */
    radial-gradient(120% 130% at 50% 50%, transparent 35%, rgba(0,0,0,0.15) 70%, rgba(0,0,0,0.35) 100%),
    /* charcoal base */
    radial-gradient(130% 120% at 50% 38%, #1A1A1F 0%, #111114 45%, #0B0B0D 100%);
}

/* flowing light-trail lines / energy around the corners */
#what-we-do::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  filter: blur(16px);
  mix-blend-mode: screen;
  background:
    radial-gradient(120% 56% at 92% 0%, rgba(255,120,120,0.10), transparent 58%),
    radial-gradient(150% 64% at -6% 104%, rgba(255,110,110,0.07), transparent 60%),
    radial-gradient(circle at 78% 20%, rgba(255,140,140,0.08), transparent 50%),
    radial-gradient(circle at 14% 84%, rgba(255,100,100,0.06), transparent 52%);
}

/* faint red particle field, fading toward the centre */
#what-we-do::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    radial-gradient(2px 2px at 78% 10%, rgba(255,80,80,0.72), transparent),
    radial-gradient(2px 2px at 84% 6%, rgba(255,80,80,0.56), transparent),
    radial-gradient(2px 2px at 72% 16%, rgba(255,80,80,0.56), transparent),
    radial-gradient(1px 1px at 88% 14%, rgba(255,90,90,0.48), transparent),
    radial-gradient(2px 2px at 68% 24%, rgba(255,80,80,0.40), transparent),
    radial-gradient(1px 1px at 91% 22%, rgba(255,90,90,0.40), transparent),
    radial-gradient(2px 2px at 60% 30%, rgba(255,80,80,0.32), transparent),
    radial-gradient(1px 1px at 75% 32%, rgba(255,90,90,0.36), transparent),
    radial-gradient(2px 2px at 10% 90%, rgba(255,80,80,0.64), transparent),
    radial-gradient(2px 2px at 16% 84%, rgba(255,80,80,0.48), transparent),
    radial-gradient(1px 1px at 6% 92%, rgba(255,80,80,0.48), transparent),
    radial-gradient(2px 2px at 22% 80%, rgba(255,80,80,0.40), transparent),
    radial-gradient(1px 1px at 14% 74%, rgba(255,90,90,0.36), transparent),
    radial-gradient(2px 2px at 32% 88%, rgba(255,80,80,0.32), transparent);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 42%, #000 80%);
          mask-image: radial-gradient(circle at 50% 50%, transparent 42%, #000 80%);
}

#what-we-do .container { position: relative; z-index: 1; }

/* Convert section text to white and red */
#what-we-do .vid-label,
#what-we-do .vid-title,
#what-we-do .vid-tagline,
#what-we-do .vcat-eyebrow,
#what-we-do .vcat-title,
#what-we-do .vcat-desc,
#what-we-do .vcat-count { color: #fff; }
#what-we-do .vid-label .dot,
#what-we-do .vid-title .amp,
#what-we-do .vcat-no,
#what-we-do .vcat-count b { color: var(--accent); }
@media (max-width: 767px) {
  #what-we-do::before { opacity: 0.35; }
}

/* Red dot matrix behind "A system, not a gamble" */
#system { position: relative; }
#system .dot-matrix {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
#system .container { position: relative; z-index: 1; }

@media (max-width: 767px) {
  .vid-title { font-size: 3rem; letter-spacing: 0.01em; line-height: 1.1; }
  .vid-tagline { margin-top: 1.8rem; font-size: 1.7rem; }
  #what-we-do { padding: 6rem 0 8rem; }
  #what-we-do .vid-head { margin-bottom: 5.5rem; }
  .vcat { padding-top: 3.2rem; }
  .vcat + .vcat { margin-top: 6.5rem; }
  .vcat-head { margin-bottom: 3rem; }
  .vcat-title { font-size: 2.6rem; }
  .vcat-desc { font-size: 1.6rem; }
  .vcat-grid { gap: 1.6rem; }
  .vcat-grid--tall { gap: 1.6rem; }
}

/* ---------- Steps (how it works) ---------- */

.step {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
  padding: 4.5rem 0;
  border-top: 0.12rem solid var(--line);
}
.section--inverse .step { border-color: var(--line-w); }
@media (min-width: 768px) { .step { grid-template-columns: 18rem 1fr 1fr; gap: 4rem; align-items: start; } }
.step:last-child { border-bottom: 0.12rem solid var(--line); }
.section--inverse .step:last-child { border-color: var(--line-w); }
.step-tag { font-size: 1.4rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); font-weight: 500; padding-top: 0.8rem; }
.step-text { color: var(--muted); max-width: 52rem; }
.section--inverse .step-text { color: var(--muted-2); }

/* ---------- Steps: card stack (homepage "How it works") ---------- */

.steps-fold { position: relative; }
.steps-fold .steps {
  position: relative;
  height: 100%;
}
.steps-fold .step {
  position: sticky;
  top: 12rem;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.6rem;
  padding: 5rem;
  border-radius: 2.8rem;
  border: 0.12rem solid var(--line);
  background: var(--paper);
  box-shadow: 0 4rem 8rem -4rem rgba(0, 0, 0, 0.1);
  z-index: 1;
}
.steps-fold .step:nth-child(1) { z-index: 1; }
.steps-fold .step:nth-child(2) { z-index: 2; }
.steps-fold .step:nth-child(3) { z-index: 3; }
.steps-fold .step:nth-child(4) { z-index: 4; }
.steps-fold .step-tag { padding-top: 0; }
.steps-fold .step-text { height: auto; max-width: 56rem; }
@media (max-width: 767px) {
  .steps-fold .step { top: 7rem; padding: 3.5rem; gap: 2rem; }
}
.steps-fold.is-static { height: auto; }
.steps-fold.is-static .steps { height: auto; display: flex; flex-direction: column; gap: 3rem; }
.steps-fold.is-static .step { position: static; height: auto; }

/* ---------- Services: card stack (reuses home "steps-fold" logic) ---------- */

.svc-fold { position: relative; }
.svc-fold .steps { position: relative; height: 100%; }
.svc-fold .svc-row {
  position: sticky;
  top: 12rem;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.6rem;
  padding: 5rem;
  border-radius: 2.8rem;
  border: 0.12rem solid rgba(255, 255, 255, 0.14);
  border-top: 0.12rem solid rgba(255, 255, 255, 0.14);
  background-color: #050505;
  background-image:
    radial-gradient(120% 100% at 50% 0%, rgba(252, 0, 25, 0.16) 0%, rgba(252, 0, 25, 0.05) 42%, transparent 72%),
    linear-gradient(180deg, #0c0c0e 0%, #050505 100%);
  box-shadow: 0 4rem 8rem -4rem rgba(0, 0, 0, 0.6);
  color: #fff;
  z-index: 1;
}
.svc-fold .svc-row:nth-child(1) { z-index: 1; }
.svc-fold .svc-row:nth-child(2) { z-index: 2; }
.svc-fold .svc-row:nth-child(3) { z-index: 3; }
.svc-fold .svc-row:nth-child(4) { z-index: 4; }
.svc-container { padding-left: 1.5rem; padding-right: 1.5rem; }
@media (min-width: 768px) { .svc-container { padding-left: 4rem; padding-right: 4rem; } }
@media (min-width: 1600px) { .svc-container { padding-left: 6rem; padding-right: 6rem; } }

.svc-fold .svc-row h3 { color: #fff; }
.svc-fold .svc-row-lead,
.svc-fold .svc-row-feats li { color: rgba(255, 255, 255, 0.72); }
.svc-fold .svc-row-feats li { border-color: rgba(255, 255, 255, 0.14); }
.svc-fold .svc-row-feats li span,
.svc-fold .svc-row-num,
.svc-fold .svc-row--short .svc-row-num,
.svc-fold .svc-row--short .svc-row-feats li span { color: var(--accent); }
.svc-fold .svc-row--short h3 { color: #fff; }
.svc-fold .svc-row--short .svc-row-lead,
.svc-fold .svc-row--short .svc-row-feats li { color: rgba(255, 255, 255, 0.72); }
.svc-fold .svc-row .btn { color: #fff; }
.svc-fold .svc-row .btn .btn-ripple { background: #fff; }
.svc-fold .svc-row .btn:hover { color: #050505; }
.svc-fold .svc-row .btn-arrow { color: var(--accent); }

.svc-fold .svc-row-num { padding-top: 0; }
.svc-fold .svc-row-main { width: 100%; max-width: 100%; }
.svc-fold .svc-row-feats { margin: 1rem 0; }
.svc-fold .svc-row .btn {
  align-self: flex-start;
  margin-top: 0.6rem;
  padding: 1.4rem 2.6rem;
  font-size: 1.5rem;
  gap: 0.8rem;
}
@media (min-width: 768px) {
  .svc-fold .svc-row .btn { padding: 1.6rem 2.8rem; font-size: 1.6rem; }
}
@media (max-width: 767px) {
  .svc-fold .svc-row { top: 5.6rem; padding: 2.8rem 2.6rem; gap: 1.6rem; }
  .svc-fold .svc-row h3 { font-size: 2.7rem; }
  .svc-fold .svc-row-lead { font-size: 1.6rem; margin-top: 1.4rem; }
  .svc-fold .svc-row-feats { gap: 1rem; margin: 1.6rem 0; }
  .svc-fold .svc-row-feats li { font-size: 1.45rem; padding: 1.1rem 0; }
  .svc-fold .svc-row .btn { padding: 1.2rem 2rem; font-size: 1.3rem; }
}
@media (max-width: 767px) and (max-height: 700px) {
  .svc-fold .svc-row { gap: 1.2rem; padding: 2.2rem 2.2rem; }
  .svc-fold .svc-row h3 { font-size: 2.4rem; }
  .svc-fold .svc-row-lead { font-size: 1.5rem; }
  .svc-fold .svc-row-feats li { font-size: 1.35rem; padding: 0.8rem 0; }
}
.svc-fold.is-static { height: auto; }
.svc-fold.is-static .steps { height: auto; display: flex; flex-direction: column; gap: 3rem; }
.svc-fold.is-static .svc-row { position: static; height: auto; }
body.page--sub .svc-fold .svc-row { position: sticky; }
body.page--sub .svc-fold.is-static .svc-row { position: static; }
body.page--sub .svc-fold .svc-row::before { display: none; }

/* ---------- Testimonials ---------- */

.quote-card { border-radius: 2.4rem; padding: 3.5rem; background: rgba(255, 255, 255, 0.05); border: 0.12rem solid var(--line-w); position: relative; transition: transform 1s var(--ease-text), background 0.5s; cursor: none; }
@media (min-width: 768px) { .quote-card { padding: 5rem; } }
@media (pointer: fine) { .quote-card:hover { transform: translateY(-0.8rem); background: rgba(255, 255, 255, 0.08); } }
.quote-card--light { background: var(--tile); border: 0; }
@media (pointer: fine) { .quote-card--light:hover { background: #e7eaf3; } }
.quote-card--light blockquote { color: var(--ink); }
.quote-card--light .quote-author { color: var(--muted); }
.quote-card--light .quote-author strong { color: var(--ink); }
.quote-mark {
  font-size: 8rem;
  line-height: 0.4;
  color: var(--accent);
  font-weight: 300;
  display: block;
  margin-bottom: 3.5rem;
}
.quote-card blockquote { font-size: 2.2rem; line-height: 1.4; letter-spacing: -0.01em; }
@media (min-width: 768px) { .quote-card blockquote { font-size: 2.6rem; } }
.quote-author { margin-top: 3rem; font-size: 1.5rem; color: var(--muted-2); letter-spacing: 0.06em; }
.quote-author strong { display: block; color: var(--paper); font-weight: 600; letter-spacing: 0; margin-bottom: 0.4rem; font-size: 1.7rem; }

/* ---------- Stats ---------- */

.stat { border-left: 0.12rem solid var(--line); padding-left: 3rem; }
.section--inverse .stat { border-color: var(--line-w); }
.stat-num {
  font-size: 6rem;
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) { .stat-num { font-size: 6.4rem; } }
.stat-label { margin-top: 1.6rem; font-size: 1.6rem; color: var(--muted); letter-spacing: 0.04em; }
.section--inverse .stat-label { color: var(--muted-2); }

/* ---------- FAQ accordion (Cuberto grid-rows) ---------- */

.faq-item { border-bottom: 0.12rem solid var(--line-w); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  text-align: left;
  padding: 4rem 0;
  font-size: 2.6rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  cursor: none;
}
@media (min-width: 768px) { .faq-q { font-size: 3.4rem; } }
.faq-icon {
  flex-shrink: 0;
  width: 4.6rem; height: 4.6rem;
  border-radius: 50%;
  border: 0.12rem solid var(--line-w);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.6s var(--ease-text), background 0.4s, color 0.4s, border-color 0.4s;
}
.faq-icon svg { width: 1.8rem; height: 1.8rem; }
.faq-item.is-open .faq-icon { transform: rotate(135deg); background: var(--accent); border-color: var(--accent); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 1.2s var(--ease-text); }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; }
.faq-a p {
  max-width: 68rem;
  padding-bottom: 4rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 2rem;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.6s var(--ease-out) 0.2s, transform 0.8s var(--ease-text) 0.2s;
}
.faq-item.is-open .faq-a p { opacity: 1; transform: translateY(0); }

/* ---------- Service rows (services page) ---------- */

.svc-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: 5rem 0;
  border-top: 0.12rem solid var(--line);
}
@media (min-width: 768px) {
  .svc-row { grid-template-columns: 14rem 1fr; gap: 6rem; padding: 8rem 0; }
}
.svc-row:last-child { border-bottom: 0.12rem solid var(--line); }
.svc-row-num {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  padding-top: 1rem;
}
.svc-row-main h3 { max-width: 40rem; }
.svc-row-lead { max-width: 62rem; margin-top: 2.4rem; color: var(--muted); font-size: 2rem; }
@media (min-width: 768px) { .svc-row-lead { font-size: 2.2rem; } }
.svc-row-feats { display: grid; grid-template-columns: 1fr; gap: 1.4rem; margin: 4.5rem 0; }
@media (min-width: 768px) { .svc-row-feats { grid-template-columns: 1fr 1fr; } }
.svc-row-feats li {
  display: flex;
  align-items: baseline;
  gap: 1.6rem;
  font-size: 1.8rem;
  padding: 1.5rem 0;
  border-top: 0.12rem solid var(--line);
}
.svc-row-feats li span {
  color: var(--accent);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* ---------- FAQ light variant ---------- */

.faq--light .faq-item { border-color: var(--line); }
.faq--light .faq-q { color: var(--ink); }
.faq--light .faq-icon { border-color: var(--line); color: var(--ink); }
.faq--light .faq-item.is-open .faq-icon { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.faq--light .faq-a p { color: var(--muted); }

/* ---------- Outro ---------- */

.outro { padding: 12rem 0; background: var(--ink); color: var(--paper); overflow: hidden; }
@media (min-width: 768px) { .outro { padding: 15rem 0; } }
.outro-title { font-size: 4.6rem; font-weight: 300; letter-spacing: -0.03em; line-height: 1.02; }
@media (min-width: 768px) { .outro-title { font-size: 8rem; } }
.outro-cta { display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 5rem; }
.outro-note {
  margin-top: 8rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  font-size: 1.4rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.outro-note .dot { width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--accent); animation: blink 1.6s infinite; }

/* ---------- Footer ---------- */

.footer { background: var(--ink); color: var(--paper); padding: 8rem 0 4rem; position: relative; z-index: 2; }
.footer-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6rem;
  padding-bottom: 8rem;
}
@media (min-width: 900px) { .footer-top { grid-template-columns: 1.4fr 1fr 1fr; gap: 4rem; } }
.footer-brand { font-size: 3.2rem; font-weight: 700; letter-spacing: -0.03em; }
@media (min-width: 768px) { .footer-brand { font-size: 5rem; } }
.footer-brand em { font-style: normal; color: var(--accent); }
.footer-mail {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-top: 3rem;
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: none;
}
.footer-mail .arrow-up { display: inline-flex; transition: transform 0.8s var(--ease-text); }
.footer-mail:hover .arrow-up { transform: translate(0.4rem, -0.4rem); }
.footer-col h4 {
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 3rem;
}
.footer-col li { margin-bottom: 1.6rem; }
.footer-col a { font-size: 1.8rem; cursor: none; }
.footer-socials li { display: inline-flex; margin-right: 2.4rem; }
.footer-reel { padding: 4rem 0; border-top: 0.12rem solid var(--line-w); border-bottom: 0.12rem solid var(--line-w); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-top: 4rem;
  font-size: 1.5rem;
  color: var(--muted-2);
  letter-spacing: 0.04em;
}

/* ---------- Work page ---------- */

.case-card {
  position: relative;
  overflow: hidden;
  border-radius: 2.4rem;
  background: var(--tile);
  border: 0.12rem solid var(--line);
  cursor: none;
  transition: transform 0.9s var(--ease-text), box-shadow 0.9s var(--ease-text), border-color 0.5s;
}
.case-media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: #0a0a0c;
  background-image:
    radial-gradient(120% 90% at 50% 0%, #1d1d22 0%, #0b0b0d 55%, #050506 100%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 3px);
}
.case-media::before {
  content: "";
  position: absolute;
  width: 46%;
  max-width: 26rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(0.9rem, 0.9rem);
  transition: transform 0.9s var(--ease-text);
  animation: case-ring 5s ease-in-out infinite;
}
@keyframes case-ring {
  0%, 100% { transform: translate(0.9rem, 0.9rem) scale(1); }
  50% { transform: translate(0.9rem, 0.9rem) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) { .case-media::before { animation: none; } }
.case-media img {
  position: relative;
  z-index: 1;
  width: 46%;
  max-width: 26rem;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 2.4rem 6rem rgba(0, 0, 0, 0.55);
  transition: transform 1.2s var(--ease-text);
}
.case-badge {
  position: absolute;
  top: 2.4rem; left: 2.4rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  background: rgba(10, 10, 10, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--paper);
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1rem 1.8rem;
  border-radius: 10rem;
  border: 0.1rem solid rgba(255, 255, 255, 0.14);
  transition: background 0.5s;
}
.case-badge::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0.4rem rgba(252, 0, 25, 0.25);
  animation: blink 1.8s infinite;
}
@media (pointer: fine) {
  .case-card:hover {
    transform: translateY(-0.8rem);
    box-shadow: 0 4rem 8rem -4rem rgba(0, 0, 0, 0.28);
    border-color: rgba(252, 0, 25, 0.35);
  }
  .case-card:hover .case-media::before {
    transform: translate(1.4rem, 1.4rem) scale(1.04);
    animation: none;
  }
  .case-card:hover .case-media img { transform: scale(1.06); }
  .case-card:hover .case-badge { background: var(--accent); }
}
.case-body {
  position: relative;
  padding: 4rem;
  display: flex;
  flex-direction: column;
  gap: 2.6rem;
  align-items: flex-start;
}
.case-body::before,
.case-body::after {
  content: "";
  position: absolute;
  width: 2.4rem;
  height: 2.4rem;
  pointer-events: none;
}
.case-body::before {
  top: 1.4rem; left: 1.4rem;
  border-top: 0.12rem solid rgba(0, 0, 0, 0.32);
  border-left: 0.12rem solid rgba(0, 0, 0, 0.32);
}
.case-body::after {
  bottom: 1.4rem; right: 1.4rem;
  border-bottom: 0.12rem solid rgba(0, 0, 0, 0.32);
  border-right: 0.12rem solid rgba(0, 0, 0, 0.32);
}
@media (min-width: 768px) { .case-body { padding: 5rem; } }
.case-handle {
  font-size: 1.5rem;
  color: var(--accent);
  font-weight: 500;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.case-handle::after {
  content: "";
  flex: 1;
  height: 0.1rem;
  background: var(--line);
}
.case-body h3 {
  font-size: 3.6rem;
  margin: 0;
  position: relative;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
@media (min-width: 768px) { .case-body h3 { font-size: 4.2rem; } }
.case-body h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.4rem;
  width: 100%;
  height: 0.12rem;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s var(--ease-text);
}
@media (pointer: fine) { .case-card:hover .case-body h3::after { transform: scaleX(1); } }
.case-body p {
  color: var(--muted);
  max-width: 52rem;
  font-size: 1.9rem;
  line-height: 1.65;
}
.case-list {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.case-list li {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  font-size: 1.8rem;
  padding: 1.4rem 0;
  border-top: 0.12rem solid var(--line);
}
.case-list li:last-child { border-bottom: 0.12rem solid var(--line); }
.case-list li::before {
  content: "▸";
  color: var(--accent);
  flex-shrink: 0;
  line-height: 1;
}
.case-stats { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.case-stat {
  border: 0.12rem solid var(--ink);
  border-radius: 10rem;
  padding: 1.2rem 2.2rem;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  cursor: none;
  transition: background 0.4s, color 0.4s, border-color 0.4s;
}
@media (pointer: fine) { .case-stat:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } }

/* ---------- Work page: scaled-cards fold (reuses steps-fold logic) ---------- */
.case-fold { position: relative; }
.case-fold .steps { position: relative; height: 100%; }
.case-fold .case-card {
  position: sticky;
  top: 12rem;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  border-radius: 2.8rem;
  border: 0.12rem solid rgba(255, 255, 255, 0.14);
  background-color: #050505;
  background-image:
    radial-gradient(120% 100% at 50% 0%, rgba(252, 0, 25, 0.16) 0%, rgba(252, 0, 25, 0.05) 42%, transparent 72%),
    linear-gradient(180deg, #0c0c0e 0%, #050505 100%);
  box-shadow: 0 4rem 8rem -4rem rgba(0, 0, 0, 0.6);
  z-index: 1;
  color: #fff;
}
.case-fold .case-card:nth-child(1) { z-index: 1; }
.case-fold .case-card:nth-child(2) { z-index: 2; }
.case-fold .case-card .case-body h3 { color: #fff; }
.case-fold .case-card .case-body h3::after { background: var(--accent); }
.case-fold .case-card .case-body p { color: rgba(255, 255, 255, 0.72); }
.case-fold .case-card .case-list li { color: rgba(255, 255, 255, 0.85); border-color: rgba(255, 255, 255, 0.14); }
.case-fold .case-card .case-list li::before { color: var(--accent); }
.case-fold .case-card .case-stat { color: rgba(255, 255, 255, 0.85); border-color: rgba(255, 255, 255, 0.25); }
@media (pointer: fine) {
  .case-fold .case-card .case-stat:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
}
.case-fold .case-card .case-badge { background: var(--accent); color: #fff; }
.case-fold .case-card .case-body::before,
.case-fold .case-card .case-body::after { border-color: rgba(255, 255, 255, 0.25); }
@media (min-width: 768px) {
  .case-fold .case-card { display: grid; grid-template-columns: 1.1fr 1fr; max-width: 104rem; margin-inline: auto; }
  .case-fold .case-card .case-media { aspect-ratio: auto; height: 100%; }
  .case-fold .case-card .case-body { padding: 5.5rem 6rem; }
}
.case-fold .case-card:nth-child(2) .case-media {
  background-color: #f2f2ef;
  background-image: none;
}
@media (max-width: 767px) {
  .case-fold .case-card { top: 5.6rem; }
  .case-fold .case-card .case-media { aspect-ratio: auto; height: 24svh; }
  .case-fold .case-card .case-body { padding: 2.6rem 2.6rem 3.2rem; gap: 1.8rem; }
  .case-fold .case-card .case-handle { font-size: 1.3rem; }
  .case-fold .case-card .case-body h3 { font-size: 2.9rem; }
  .case-fold .case-card .case-body p { font-size: 1.5rem; }
  .case-fold .case-card .case-list li { font-size: 1.45rem; padding: 1rem 0; }
  .case-fold .case-card .case-stat { font-size: 1.2rem; padding: 0.9rem 1.5rem; }
}
.case-fold.is-static { height: auto; }
.case-fold.is-static .steps { height: auto; display: flex; flex-direction: column; gap: 3rem; }
.case-fold.is-static .case-card { position: static; height: auto; }
body.page--sub .case-fold .case-card::before { display: none; }

.roster-item { border-top: 0.12rem solid var(--line); padding: 2.6rem 0; display: flex; align-items: center; gap: 2.6rem; cursor: none; }
.roster-item:last-child { border-bottom: 0.12rem solid var(--line); }
.roster-item .avatar { width: 8rem; height: 8rem; }
@media (min-width: 768px) { .roster-item .avatar { width: 11rem; height: 11rem; } }
.roster-mid { flex: 1; min-width: 0; }
.roster-cat { font-size: 1.3rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); font-weight: 500; }
.roster-name { font-size: 2.6rem; font-weight: 500; letter-spacing: -0.02em; margin-top: 0.4rem; }
@media (min-width: 768px) { .roster-name { font-size: 3.4rem; } }
.roster-handle { font-size: 1.5rem; color: var(--muted); }
.roster-tags {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.9s var(--ease-text);
}
.roster-item:hover .roster-tags { grid-template-rows: 1fr; }
.roster-tags-inner { overflow: hidden; }
.roster-tags ul { display: flex; flex-wrap: wrap; gap: 1rem; padding-top: 1.6rem; }
.roster-tags li {
  font-size: 1.4rem;
  border: 0.12rem solid var(--line);
  border-radius: 10rem;
  padding: 0.8rem 1.6rem;
  opacity: 0;
  transform: translateY(0.8rem);
  transition: opacity 0.5s var(--ease-out) 0.15s, transform 0.7s var(--ease-text) 0.15s;
}
.roster-item:hover .roster-tags li { opacity: 1; transform: translateY(0); }
.roster-arrow { transition: transform 0.8s var(--ease-text); flex-shrink: 0; }
.roster-item:hover .roster-arrow { transform: rotate(45deg); }

/* ---------- Pricing ---------- */

.price-card {
  border-radius: 2.4rem;
  padding: 4rem;
  border: 0.12rem solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 3rem;
  position: relative;
  transition: transform 0.9s var(--ease-text), box-shadow 0.9s var(--ease-text), border-color 0.5s;
  background: var(--paper);
  will-change: transform;
}
@media (min-width: 768px) { .price-card { padding: 5rem; } }
@media (pointer: fine) {
  .price-card:hover {
    transform: translateY(-0.6rem);
    box-shadow: 0 4rem 8rem -3rem rgba(0, 0, 0, 0.12);
    border-color: rgba(252, 0, 25, 0.4);
  }
}
.price-card.is-featured {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  border-top: 0.35rem solid var(--accent);
}
@media (pointer: fine) {
  .price-card.is-featured:hover {
    box-shadow: 0 4rem 8rem -3rem rgba(252, 0, 25, 0.18);
    border-color: var(--accent);
    border-top-color: var(--accent);
  }
}
.price-tag {
  position: absolute;
  top: -1.6rem; left: 4rem;
  background: var(--accent);
  color: var(--paper);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1rem 1.8rem;
  border-radius: 10rem;
  box-shadow: 0 1rem 3rem rgba(252, 0, 25, 0.35);
  animation: blink 2.4s infinite;
}
.price-num {
  display: flex;
  align-items: flex-end;
  gap: 2rem;
  font-size: clamp(5.6rem, 8vw, 8.4rem);
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) { .price-num { font-size: 9.6rem; } }
.price-num small {
  display: block;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.55;
  color: var(--muted);
  font-variant-numeric: normal;
  max-width: 20rem;
  padding-bottom: 0.6rem;
}
.price-card.is-featured .price-num small { color: var(--muted-2); }
.price-card > .btn { margin-top: auto; }
.price-list li {
  display: grid;
  gap: 0.6rem;
  padding: 2rem 0;
  border-top: 0.12rem solid var(--line);
}
.price-card.is-featured .price-list li { border-color: var(--line-w); }
.price-list li span:first-child {
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.price-list li span:last-child {
  font-family: var(--mono);
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--muted);
  text-align: right;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.price-card.is-featured .price-list li span:last-child { color: var(--muted-2); }
/* ---------- Pricing: card stack (behaves like the services fold) ---------- */
.price-fold { position: relative; }
.price-fold .steps { position: relative; height: 100%; }
.price-fold .price-card {
  position: sticky;
  top: 12rem;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  padding: 5rem;
  border-radius: 2.8rem;
  border: 0.12rem solid rgba(255, 255, 255, 0.14);
  background-color: #050505;
  background-image:
    radial-gradient(120% 100% at 50% 0%, rgba(252, 0, 25, 0.16) 0%, rgba(252, 0, 25, 0.05) 42%, transparent 72%),
    linear-gradient(180deg, #0c0c0e 0%, #050505 100%);
  box-shadow: 0 4rem 8rem -4rem rgba(0, 0, 0, 0.6);
  color: #fff;
  z-index: 1;
}
.price-fold .price-card:nth-child(1) { z-index: 1; }
.price-fold .price-card:nth-child(2) { z-index: 2; }
.price-fold .price-card:nth-child(3) { z-index: 3; }
.price-fold .price-card.is-featured {
  background-color: #050505;
  background-image:
    radial-gradient(120% 100% at 50% 0%, rgba(252, 0, 25, 0.2) 0%, rgba(252, 0, 25, 0.06) 42%, transparent 72%),
    linear-gradient(180deg, #0d0d10 0%, #050505 100%);
  border-color: rgba(255, 255, 255, 0.18);
  border-top: 0.35rem solid var(--accent);
}
.price-fold .price-card .price-num { color: #fff; }
.price-fold .price-card .price-num small { color: rgba(255, 255, 255, 0.6); }
.price-fold .price-card .h-4 { color: #fff; }
.price-fold .price-card p.muted { color: rgba(255, 255, 255, 0.72); }
.price-fold .price-card .price-list li { border-color: rgba(255, 255, 255, 0.14); }
.price-fold .price-card .price-list li span:first-child { color: rgba(255, 255, 255, 0.9); }
.price-fold .price-card .price-list li span:last-child { color: rgba(255, 255, 255, 0.6); }
.price-fold .price-card.is-featured .price-list li span:last-child { color: rgba(255, 255, 255, 0.6); }
.price-fold .price-card > .btn { margin-top: 0; align-self: flex-start; }
.price-fold .price-card .btn { background: var(--accent); color: var(--paper); }
.price-fold .price-card .btn .btn-ripple { background: var(--ink); }
.price-fold .price-card .btn .btn-arrow { color: var(--paper); }
@media (min-width: 768px) {
  .price-fold .price-card { display: grid; grid-template-columns: 26rem 1fr; column-gap: 6rem; align-items: start; }
  .price-fold .price-card .price-num { grid-column: 1; }
  .price-fold .price-card .price-list { grid-column: 2; }
  .price-fold .price-card > .btn { grid-column: 2; }
}
@media (max-width: 767px) {
  .price-fold .price-card { top: 5.6rem; justify-content: center; gap: 2rem; padding: 3rem 2.6rem; }
}
.price-fold.is-static { height: auto; }
.price-fold.is-static .steps { height: auto; display: flex; flex-direction: column; gap: 3rem; }
.price-fold.is-static .price-card { position: static; height: auto; }
body.page--sub .price-fold .price-card::before { display: none; }
@media (max-width: 767px) {
  .price-card { min-height: calc(100svh - 6rem); justify-content: center; gap: 2rem; padding: 3rem 2.6rem; }
  .price-card .h-4 { font-size: 2.1rem; }
  .price-card p.muted { font-size: 1.5rem; }
  .price-num { font-size: 4.6rem; }
  .price-num small { font-size: 1.3rem; max-width: none; }
  .price-list li { padding: 1.5rem 0; }
  .price-list li span:first-child { font-size: 1.4rem; }
  .price-list li span:last-child { font-size: 1.25rem; }
  .price-card > .btn { margin-top: 1rem; align-self: flex-start; padding: 1.3rem 2.2rem; font-size: 1.35rem; }
}

.addon-list li {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 0.6rem 2rem;
  align-items: baseline;
  flex-wrap: wrap;
  padding: 2.2rem 0 2.2rem 3rem;
  border-top: 0.12rem solid var(--line);
  font-size: 1.9rem;
}
.addon-list li span:last-child { text-align: right; }
.addon-list li:last-child { border-bottom: 0.12rem solid var(--line); }
.addon-list li::before { content: "—"; color: var(--accent); position: absolute; left: 0; }
.addon-list li span:last-child { font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---------- About ---------- */

.manifesto-text { font-size: 3rem; font-weight: 400; line-height: 1.25; letter-spacing: -0.02em; }
.manifesto-sec { display: flex; flex-direction: column; justify-content: center; }
.manifesto-sec .container--lg { width: 100%; }
@media (max-width: 767px) {
  .manifesto-sec { min-height: calc(100svh - 9.2rem); padding-top: 8rem; padding-bottom: 8rem; }
  .manifesto-text { font-size: 2.4rem; }
  .manifesto-text { margin-top: 3rem !important; }
}
@media (min-width: 768px) { .manifesto-text { font-size: 4.4rem; } }
.manifesto-text em { font-style: normal; color: var(--accent); }

.timeline { position: relative; }
.timeline::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 0.12rem;
  background: var(--line);
}
@media (min-width: 768px) { .timeline::before { left: 16rem; } }
.timeline::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 0.12rem;
  height: 100%;
  background: var(--accent);
  transform-origin: top;
  transform: scaleY(0);
}
@media (min-width: 768px) { .timeline::after { left: 16rem; } }
.tl-item { position: relative; padding: 0 0 8rem 4rem; }
@media (min-width: 768px) { .tl-item { padding: 0 0 10rem 22rem; } }
.tl-item::before {
  content: "";
  position: absolute;
  top: 0.8rem; left: -0.55rem;
  width: 1.2rem; height: 1.2rem;
  border-radius: 50%;
  background: var(--paper);
  border: 0.2rem solid var(--accent);
  transition: background 0.4s;
}
.tl-item:hover::before { background: var(--accent); }
.tl-year { font-size: 3.2rem; font-weight: 300; letter-spacing: -0.03em; color: var(--accent); margin-bottom: 1.4rem; }
@media (min-width: 768px) { .tl-year { font-size: 5rem; } }
.tl-title { font-size: 2.6rem; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 1.4rem; }
@media (min-width: 768px) { .tl-title { font-size: 3.4rem; } }
.tl-text { color: var(--muted); max-width: 56rem; }

.principle {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  padding: 4.5rem 0;
  border-top: 0.12rem solid var(--line);
  cursor: none;
  transition: padding 0.7s var(--ease-text);
}
.section--inverse .principle { border-color: var(--line-w); }
.principle:last-child { border-bottom: 0.12rem solid var(--line); }
.section--inverse .principle:last-child { border-color: var(--line-w); }
@media (min-width: 768px) {
  .principle { grid-template-columns: 12rem 1fr 1.4fr; gap: 4rem; align-items: center; }
}
.principle-num {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--accent);
  text-transform: uppercase;
}
.principle h3 { font-size: 3rem; letter-spacing: -0.02em; }
@media (min-width: 768px) { .principle h3 { font-size: 4rem; } }
.principle p { color: var(--muted); max-width: 52rem; }
.section--inverse .principle p { color: var(--muted-2); }
@media (max-width: 767px) {
  .principle { padding: 2.6rem 0; }
  .principle h3 { font-size: 2.4rem; }
  .principle p { font-size: 1.5rem; }
}
@media (pointer: fine) {
  .principle:hover h3 { transform: translateX(1rem); }
}
.principle h3 { transition: transform 0.8s var(--ease-text); }

/* ---------- Call page ---------- */

.call-steps li { padding: 3rem 0; border-top: 0.12rem solid var(--line); }
.call-steps li:last-child { border-bottom: 0.12rem solid var(--line); }
.section--inverse .call-steps li { border-color: var(--line-w); }
.call-num { font-size: 1.4rem; color: var(--accent); font-weight: 500; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; }

.note-card { border-radius: 2.4rem; background: var(--tile); padding: 3rem; font-size: 1.8rem; line-height: 1.4; translate: 0 0; transition: translate 0.9s var(--ease-text); }
@media (pointer: fine) { .note-card:hover { translate: 0 -0.5rem; } }
.note-card::before { content: "●"; color: var(--accent); display: block; margin-bottom: 1.8rem; font-size: 1.3rem; }

.form { position: relative; }
.form-card {
  border-radius: 2.8rem;
  background: var(--ink);
  color: var(--paper);
  padding: 3rem;
  overflow: hidden;
  box-shadow: 0 6rem 12rem -6rem rgba(0, 0, 0, 0.45);
}
@media (min-width: 768px) { .form-card { padding: 6rem; } }

.form-body { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .form-body { grid-template-columns: 1fr 1fr; gap: 2.4rem; } }

.field { position: relative; }
.field--wide { grid-column: 1 / -1; }
.field label {
  position: absolute;
  top: 1.6rem;
  left: 2.4rem;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
  pointer-events: none;
  transition: color 0.4s;
  z-index: 1;
}
.field input, .field textarea, .field select {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 0.12rem solid rgba(255, 255, 255, 0.14);
  border-radius: 1.8rem;
  padding: 3.8rem 2.4rem 1.8rem;
  font-size: 2.2rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--paper);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.5s var(--ease-out), background 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.field input::placeholder { color: rgba(255, 255, 255, 0.35); }
.field textarea { min-height: 14rem; resize: vertical; }
.field select { cursor: none; padding-right: 5.6rem; }
.field select option { color: var(--ink); }
.field select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10' viewBox='0 0 18 10'%3E%3Cpath d='M1 1l8 8 8-8' stroke='%23ffffff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2.4rem center;
  background-size: 1.8rem auto;
}
.field.is-filled label { color: var(--muted-2); }
.field.is-focus label { color: var(--accent); }
.field.is-focus input, .field.is-focus textarea, .field.is-focus select {
  border-color: var(--accent);
  box-shadow: 0 0 0 0.4rem rgba(252, 0, 25, 0.14);
  background: rgba(255, 255, 255, 0.08);
}

.chips { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 1rem; }
.chip {
  border: 0.12rem solid var(--line-w);
  border-radius: 10rem;
  padding: 1.4rem 2.4rem;
  font-size: 1.7rem;
  color: var(--paper);
  transition: background 0.4s var(--ease-out), color 0.4s, border-color 0.4s, transform 0.6s var(--spring);
  cursor: none;
  position: relative;
  overflow: hidden;
}
.chip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateY(101%);
  transition: transform 0.5s var(--ease-text);
  z-index: -1;
}
@media (pointer: fine) { .chip:hover { border-color: var(--accent); } }
.chip:hover::before { transform: translateY(0); }
.chip.is-on { background: var(--accent); border-color: var(--accent); transform: scale(1.04); }

.form-success { display: none; text-align: center; padding: 8rem 0; }
.form-success.is-show { display: block; }
.form-success .check {
  width: 10rem; height: 10rem;
  border-radius: 50%;
  background: var(--accent);
  margin: 0 auto 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0);
}
.form-success.is-show .check { animation: pop-in 0.8s var(--spring) 0.3s forwards; }
@keyframes pop-in { to { transform: scale(1); } }
.form-success.is-show h3 { font-size: 4rem; letter-spacing: -0.03em; }
.form-success.is-show p { color: var(--muted-2); margin-top: 2rem; font-size: 2rem; }
.form-note { min-height: 2.4rem; margin-top: 2rem; font-size: 1.5rem; color: var(--accent); opacity: 0; transition: opacity 0.3s; }
.form-note.is-error { opacity: 1; }

/* ---------- Chat widget ---------- */

.chat-fab {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  z-index: 250;
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: 10rem;
  padding: 1.8rem 2.6rem;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: none;
  will-change: transform;
}
@media (min-width: 768px) { .chat-fab { right: 4rem; bottom: 4rem; } }
.chat-fab .dot { width: 1rem; height: 1rem; border-radius: 50%; background: var(--accent); animation: blink 1.8s infinite; }

.chat {
  position: fixed;
  right: 2rem; bottom: 12rem;
  z-index: 260;
  width: min(42rem, calc(100vw - 4rem));
  height: auto;
  max-height: calc(100vh - 14rem);
  background: var(--ink);
  color: var(--paper);
  border-radius: 2rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 3rem 8rem rgba(0, 0, 0, 0.4);
  transform: translateY(2rem) scale(0.96);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.8s var(--ease-text), opacity 0.5s var(--ease-out);
}
.chat.is-open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
.chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2.4rem 2.6rem;
  border-bottom: 0.12rem solid var(--line-w);
}
.chat-head strong { font-size: 1.8rem; letter-spacing: -0.01em; display: flex; align-items: center; gap: 1rem; }
.chat-head .rec { color: var(--accent); font-size: 1.2rem; }
.chat-close { color: var(--muted-2); cursor: none; font-size: 1.6rem; transition: transform 0.6s var(--ease-text); }
.chat-close:hover { transform: rotate(90deg); color: var(--paper); }
.chat-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 2.6rem;
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  scrollbar-width: thin;
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: break-word;
}
.msg { max-width: 82%; padding: 1.6rem 2rem; border-radius: 1.6rem; font-size: 1.6rem; line-height: 1.45; }
.msg p { margin: 0; }
.msg p + p { margin-top: 1rem; }
.msg ul { margin: 1rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.7rem; }
.msg ul li { position: relative; padding-left: 1.7rem; }
.msg ul li::before { content: ""; position: absolute; left: 0; top: 0.85em; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--accent); }
.msg ol { margin: 1rem 0 0; padding-left: 2.2rem; list-style: decimal; display: flex; flex-direction: column; gap: 0.7rem; }
.msg strong { font-weight: 700; }
.chat-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.2rem;
  padding: 1.2rem 2rem;
  border-radius: 10rem;
  background: var(--accent);
  color: var(--paper);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.4s, color 0.4s, transform 0.6s var(--ease-text);
}
.chat-btn .chat-btn-arrow { transition: transform 0.6s var(--ease-text); }
@media (pointer: fine) {
  .chat-btn:hover { background: var(--paper); color: var(--ink); }
  .chat-btn:hover .chat-btn-arrow { transform: translateX(0.4rem); }
}
.msg--user .chat-btn { display: none; }
.msg--bot strong { color: var(--accent); }
.msg--user strong { color: var(--ink); }
.msg--bot { align-self: flex-start; background: rgba(255, 255, 255, 0.08); border-bottom-left-radius: 0.4rem; }
.msg--user { align-self: flex-end; background: var(--accent); border-bottom-right-radius: 0.4rem; }
.msg.typing { display: flex; gap: 0.6rem; align-items: center; }
.msg.typing span { width: 0.8rem; height: 0.8rem; border-radius: 50%; background: rgba(255,255,255,0.5); animation: blink 1.2s infinite; }
.msg.typing span:nth-child(2) { animation-delay: 0.2s; }
.msg.typing span:nth-child(3) { animation-delay: 0.4s; }
.chat-options {
  align-self: flex-start;
  max-width: 82%;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 1.6rem 2rem;
  border-radius: 1.6rem;
  border-bottom-left-radius: 0.4rem;
  background: rgba(255, 255, 255, 0.08);
}
.chat-options p { margin: 0; font-size: 1.5rem; line-height: 1.45; color: var(--paper); }
.chat-options-btns { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.chat-options button {
  border: 0.12rem solid var(--line-w);
  border-radius: 10rem;
  padding: 1rem 1.8rem;
  font-size: 1.4rem;
  color: var(--paper);
  transition: background 0.4s, color 0.4s, border-color 0.4s;
  cursor: none;
}
.chat-options button:hover { background: var(--accent); border-color: var(--accent); }
.chat-input { display: flex; gap: 1rem; padding: 1.6rem 2.6rem 2.4rem; border-top: 0.12rem solid var(--line-w); }
.chat-input input {
  flex: 1;
  background: rgba(255, 255, 255, 0.08);
  border: 0;
  border-radius: 10rem;
  padding: 1.4rem 2rem;
  font-size: 1.6rem;
  color: var(--paper);
  outline: none;
}
.chat-input input::placeholder { color: var(--muted-2); }
.chat-send {
  width: 5rem; height: 5rem;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: none;
  transition: background 0.4s, color 0.4s, transform 0.6s var(--spring);
}
.chat-send:hover { background: var(--accent); color: var(--paper); transform: scale(0.92); }

@media (max-width: 560px) {
  .chat {
    left: auto;
    right: 1.2rem;
    bottom: 8.6rem;
    width: min(32rem, calc(100vw - 2.4rem));
    height: auto;
    max-height: calc(100svh - 11rem);
    border-radius: 1.6rem;
  }
  .chat-fab { right: 1.2rem; bottom: 1.2rem; padding: 1.2rem 1.8rem; font-size: 1.4rem; gap: 0.9rem; }
  .chat-fab .dot { width: 0.8rem; height: 0.8rem; }
  .chat-head { padding: 1.4rem 1.6rem; }
  .chat-head strong { font-size: 1.6rem; gap: 0.8rem; }
  .chat-close { font-size: 1.5rem; }
  .chat-body { padding: 1.6rem; gap: 1.3rem; }
  .msg { padding: 1.1rem 1.4rem; font-size: 1.4rem; }
  .chat-options { padding: 1.4rem 1.6rem; gap: 1rem; }
  .chat-options button { padding: 0.8rem 1.3rem; font-size: 1.2rem; }
  .chat-input { padding: 1.1rem 1.6rem 1.4rem; gap: 0.8rem; }
  .chat-input input { padding: 1rem 1.4rem; font-size: 1.4rem; }
  .chat-send { width: 4.2rem; height: 4.2rem; }
}

/* ---------- Misc ---------- */

.media-hover { overflow: hidden; border-radius: 2rem; position: relative; }
.media-hover img { transition: transform 1.4s var(--ease-text); will-change: transform; }
@media (pointer: fine) {
  .media-hover:hover img { transform: scale(1.05); }
}

/* Reveal defaults (JS toggles via GSAP, CSS fallback) */
.js .reveal-init { opacity: 0; }

@media (max-width: 767px) {
  .section { padding: 6rem 0; }
  .section-head { gap: 2rem; margin-bottom: 4rem; }
  .outro { padding: 8rem 0; }
  .hero { min-height: 96svh; padding-top: 12rem; }
  .hero-sound { right: 1.4rem; bottom: 1.6rem; padding: 0.9rem 1.5rem; font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { font-size: 10px; }
  .cursor, .chat-fab { display: none !important; }
}

/* ============================================================
   Sub-page refinements (body.page--sub: work/services/pricing/about/call)
   ============================================================ */

:root {
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* -- hero geometry: match homepage — marquee starts one viewport down, content centred ----- */
body.page--sub .hero {
  min-height: 100svh;
  justify-content: center;
  padding-top: 9.5rem;
  padding-bottom: 0;
}
@media (max-width: 767px) {
  body.page--sub .hero { padding-top: 9rem; }
}
@media (max-width: 767px) and (max-height: 700px) {
  body.page--sub .hero { justify-content: flex-end; padding-bottom: 8.7rem; }
  body.page--sub .hero .container--lg { gap: 1.6rem; }
  body.page--sub .hero-meta { margin-bottom: 0; padding-bottom: 1.2rem; }
  body.page--sub .hero-side { gap: 1.6rem; }
  body.page--sub .hero--radar .hero-title { font-size: 2.82rem; }
  body.page--sub .hero--radar .lead { font-size: 1.2rem; }
}
@media (max-width: 767px) and (min-height: 701px) {
  body.page--sub .hero { padding-bottom: 2.5rem; }
}
@media (max-width: 767px) and (min-height: 941px) {
  body.page--sub .hero { padding-bottom: 3.5rem; }
}

/* -- hero texture: red glow + scanlines + film grain ------------ */
body.page--sub .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(70rem 46rem at 50% 2%, rgba(252, 0, 25, 0.05), transparent 62%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.02) 0 1px, transparent 1px 3px),
    var(--grain);
}

body.page--sub .hero.hero--radar::before { background: none; }
body.page--sub .hero.hero--radar .container--lg::before,
body.page--sub .hero.hero--radar .container--lg::after { border-color: rgba(255, 255, 255, 0.22); }
body.page--sub .hero.hero--radar .hero-title { color: #fff; }

/* -- hero meta: blinking block cursor + red rule ---------------- */
body.page--sub .hero-meta { position: relative; padding-bottom: 2.2rem; }
body.page--sub .hero-meta::before {
  content: "▮";
  display: inline-block;
  margin-right: 1rem;
  color: var(--accent);
  font-size: 1.3rem;
  animation: blink 1.1s steps(2, start) infinite;
}
body.page--sub .hero-meta::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 9rem;
  height: 0.2rem;
  background: var(--accent);
}

/* -- hero corner ticks (viewfinder brackets) -------------------- */
body.page--sub .hero .container--lg::before,
body.page--sub .hero .container--lg::after {
  content: "";
  position: absolute;
  width: 2.2rem;
  height: 2.2rem;
  border: 0.18rem solid rgba(0, 0, 0, 0.2);
  pointer-events: none;
}
body.page--sub .hero .container--lg::before { top: -0.8rem; left: -0.8rem; border-right: 0; border-bottom: 0; }
body.page--sub .hero .container--lg::after { bottom: -0.8rem; right: -0.8rem; border-left: 0; border-top: 0; }

/* -- section dividers (// 01 — LABEL) --------------------------- */
body.page--sub .section-head { position: relative; padding-top: 3.6rem; }
body.page--sub .section-head::before {
  content: attr(data-divider);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  font-family: var(--mono);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  border-top: 0.12rem dashed rgba(0, 0, 0, 0.16);
  padding-top: 1.8rem;
}
body.page--sub .section--inverse .section-head::before { border-color: rgba(255, 255, 255, 0.16); }

/* -- ghost words behind section titles -------------------------- */
body.page--sub .section-head .h-display { position: relative; z-index: 0; }
body.page--sub .section-head .h-display::before {
  content: attr(data-ghost);
  position: absolute;
  right: 0;
  top: -0.42em;
  z-index: -1;
  font-size: 1.35em;
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.045);
  pointer-events: none;
  white-space: nowrap;
}
body.page--sub .section--inverse .section-head .h-display::before { color: rgba(255, 255, 255, 0.07); }

/* -- mono type for technical bits ------------------------------- */
body.page--sub .eyebrow,
body.page--sub .hero-stamp,
body.page--sub .menu-index,
body.page--sub .stat-num,
body.page--sub .stat-label,
body.page--sub .step-tag,
body.page--sub .price-num,
body.page--sub .tl-year,
body.page--sub .principle-num,
body.page--sub .svc-row-num,
body.page--sub .roster-cat,
body.page--sub .case-handle,
body.page--sub .call-num,
body.page--sub .addon-list li span:last-child {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* -- case cards: tilt + grain + ↗ chip --------------------------- */
body.page--sub .case-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s;
  background-image: var(--grain);
  border-radius: inherit;
}
body.page--sub .case-media::after {
  content: "↗";
  position: absolute;
  right: 2.4rem;
  bottom: 2.4rem;
  z-index: 2;
  width: 5.4rem;
  height: 5.4rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 600;
  opacity: 0;
  transform: translateY(1.4rem) scale(0.8);
  transition: transform 0.7s var(--ease-text), opacity 0.4s;
}
@media (pointer: fine) {
  body.page--sub .case-card:hover { transform: perspective(1200px) rotateX(2deg) translateY(-0.8rem); box-shadow: 0 4rem 8rem -4rem rgba(0, 0, 0, 0.28); }
  body.page--sub .case-card:hover .case-media::after { opacity: 1; transform: translateY(0) scale(1); }
  body.page--sub .case-card:hover::before { opacity: 1; }
}

/* -- price cards: grain hover + featured pulsing dot ------------- */
body.page--sub .price-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s;
  background-image: var(--grain);
  border-radius: inherit;
}
@media (pointer: fine) { body.page--sub .price-card:hover::before { opacity: 1; } }
body.page--sub .price-card.is-featured::after {
  content: "";
  position: absolute;
  top: 2.6rem;
  right: 3rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0.6rem rgba(252, 0, 25, 0.14);
  animation: blink 1.6s infinite;
}

/* -- service rows: grain hover ----------------------------------- */
body.page--sub .svc-row { position: relative; }
body.page--sub .svc-row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s;
  background-image: var(--grain);
}
@media (pointer: fine) { body.page--sub .svc-row:hover::before { opacity: 1; } }

/* ============================================================
   Fullscreen mobile menu — header, footer, actions, hover
   ============================================================ */

.menu .menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: max(24px, env(safe-area-inset-top)) 24px 28px;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.menu-brand {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  flex: none;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.28em;
}
.menu-brand .menu-dot { display: none; }
.menu-meta {
  display: inline-flex;
  align-items: center;
  flex: none;
  color: #ff2a2a;
  white-space: nowrap;
}
.menu-meta::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  margin-right: 1rem;
  border-radius: 50%;
  background: #ff2a2a;
}
.menu-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: none;
  transition: border-color 0.4s var(--ease-text), background 0.4s var(--ease-text), transform 0.4s var(--ease-text);
}

@media (max-width: 767px) {
  .menu .menu-head { padding: max(24px, env(safe-area-inset-top)) 20px 24px; }
  .menu-brand { font-size: 12.5px; letter-spacing: 0.22em; }
  .menu-meta { font-size: 11px; letter-spacing: 0.15em; }
  .menu .menu-meta::before { width: 0.6rem; height: 0.6rem; margin-right: 0.8rem; }
  .menu-close { width: 42px; height: 42px; }
}

.menu .menu-nav { gap: 2.2rem; }
.menu .menu-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  font-size: 1.5rem;
  letter-spacing: normal;
  text-transform: none;
  color: rgba(255, 255, 255, 0.55);
  padding: clamp(2.4rem, 6vh, 4rem) 2.4rem max(2.4rem, env(safe-area-inset-bottom));
}
.menu .menu-foot span:first-child {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

.menu-cta {
  margin-top: 46px;
  text-align: center;
}
.menu-cta .btn--fill.inverse {
  width: 80%;
  max-width: 360px;
  height: 74px;
  padding: 0 4rem;
  border-radius: 999px;
  background: #fff;
  color: #000;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  box-shadow: 0 2rem 6rem rgba(255, 0, 60, 0.28);
  transition: transform 0.35s var(--ease-text), box-shadow 0.35s var(--ease-text);
}
.menu-cta .btn-arrow {
  font-size: 20px;
  color: #ff2a2a;
  transition: transform 0.35s var(--ease-text);
}

@media (pointer: fine) {
  .menu .menu-link .roll { transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s; }
  .menu-link { transition: color 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); }
  .menu-link:hover { color: #fff; }
  .menu-link:hover .roll { transform: translateX(0.8rem); }
  .menu-link:hover .menu-index { text-shadow: 0 0 2.4rem rgba(255, 42, 42, 0.85); }
  .menu-close:hover { border-color: #fff; background: rgba(255, 255, 255, 0.05); transform: rotate(90deg); }
  .menu-cta .btn--fill.inverse:hover { transform: translateY(-0.3rem); box-shadow: 0 3rem 7rem rgba(255, 0, 60, 0.4); }
  .menu-cta .btn--fill.inverse:hover .btn-arrow { transform: translateX(0.6rem); }
}
@media (pointer: coarse) {
  .menu .menu-link .roll { transition: opacity 0.2s; }
  .menu-link:active .roll { opacity: 0.55; }
}

/* Open state: the overlay owns the close control — hide the burger + chat helper */
body.menu-open .nav-burger { opacity: 0; pointer-events: none; }
body.menu-open .orelis-helper { display: none; }

/* ============================================================
   Home mobile: hero text + button sit a little lower
   ============================================================ */

@media (max-width: 767px) {
  .hero.hero--home { padding-top: 0; }
}

/* ---------- Nav + chat Orelis art ---------- */

.orelis-helper {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  z-index: 300;
  pointer-events: none;
}
.orelis-helper-msg {
  position: relative;
  font-family: var(--mono);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  border: 0.1rem solid var(--line);
  padding: 0.8rem 1.3rem;
  border-radius: 1.2rem;
  box-shadow: 0 1rem 2.6rem rgba(15, 17, 26, 0.12);
  opacity: 1;
  transform: none;
  transition: opacity 0.3s var(--ease-text), transform 0.3s var(--ease-text);
}
.orelis-helper-msg::after {
  content: "";
  position: absolute;
  right: 2.4rem;
  bottom: -0.5rem;
  width: 1rem;
  height: 1rem;
  background: var(--paper);
  border-right: 0.1rem solid var(--line);
  border-bottom: 0.1rem solid var(--line);
  transform: rotate(45deg);
}
.orelis-helper-img {
  display: none;
  height: 9rem;
  width: auto;
  opacity: 1;
  filter: drop-shadow(0 1rem 2rem rgba(15, 17, 26, 0.2));
  transition: transform 0.45s var(--ease-text), opacity 0.45s;
}
.orelis-helper .chat-fab {
  position: relative;
  right: auto;
  bottom: auto;
  pointer-events: auto;
}

@media (min-width: 768px) {
  .orelis-helper { right: 4rem; bottom: 4rem; }
}

@media (max-width: 767px) {
  .orelis-helper-img { height: 6.4rem; }
  .orelis-helper-msg { font-size: 1.05rem; }
}

/* Chat open: Orelis slides beside the chat button (vertically centered); bubble hides */
body.chat-open .orelis-helper-msg {
  opacity: 0;
  transform: translate(-16rem, 8.2rem) scale(0.96);
}
@media (min-width: 768px) {
  body.chat-open .orelis-helper-img { transform: translate(-16rem, 8.2rem); }
  body.chat-open .orelis-helper-msg { transform: translate(-16rem, 8.2rem) scale(0.96); }
}
@media (max-width: 767px) {
  body.chat-open .orelis-helper-img { transform: translate(-12.5rem, 6.2rem); }
  body.chat-open .orelis-helper-msg { transform: translate(-12.5rem, 6.2rem) scale(0.96); }
}

/* Home hero — mobile-only CSS replacement for the artwork. */
@media (max-width: 767px) {
  .hero.hero--home {
    background:
      radial-gradient(ellipse 92% 57% at 50% 67%,
        #9f0000 0%,
        #760000 27%,
        #410000 49%,
        #180000 68%,
        rgba(0, 0, 0, 0) 100%),
      #000;
  }

  .hero--home .hero-video--mobile {
    display: none;
  }

  .hero--home::before {
    background: none;
  }
}

/* Mobile home hero: editor visual sits between the intro and the results. */
.hero-mobile-editor,
.hero-stats--mobile {
  display: none;
}

@media (max-width: 767px) {
  .hero.hero--home {
    height: auto;
    min-height: 100svh;
  }

  .hero--home .hero-text {
    height: auto;
    padding: clamp(10rem, 16svh, 13rem) 0 0;
    justify-content: flex-start;
  }

  .hero--home .hero-text > .hero-stats {
    display: none;
  }

  .hero-mobile-editor {
    display: block;
    position: relative;
    z-index: 2;
    width: min(88%, 42rem);
    height: auto;
    margin: clamp(3.4rem, 7svh, 5rem) auto clamp(2.8rem, 6svh, 4.8rem);
    mix-blend-mode: screen;
    pointer-events: none;
  }

  .hero-stats--mobile {
    position: relative;
    z-index: 3;
    width: min(88%, 42rem);
    margin: 0 auto 4.5rem;
    padding: 1.8rem 0 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
    border-top: 0.1rem solid rgba(255, 255, 255, 0.25);
  }

  .hero-stats--mobile .hero-stat {
    min-width: 0;
    align-items: center;
  }

  .hero--home + .marquee {
    margin-top: 0;
  }
}
/* Keep the mobile editor visual crisp and in front of the hero gradient. */
@media (max-width: 767px) {
  .hero.hero--home {
    isolation: isolate;
  }

  .hero--home::before {
    z-index: 0;
  }

  .hero-mobile-editor {
    z-index: 4;
    opacity: 1;
    filter: brightness(1.16) contrast(1.12) saturate(1.08)
      drop-shadow(0 1.8rem 2.8rem rgba(0, 0, 0, 0.55));
  }

  .hero--home .hero-text,
  .hero-stats--mobile {
    z-index: 5;
  }
}
/* The editor is now a true alpha cutout, not a blended background layer. */
@media (max-width: 767px) {
  .hero-mobile-editor {
    mix-blend-mode: normal;
    filter: drop-shadow(0 1.8rem 2.8rem rgba(0, 0, 0, 0.55));
  }
}
/* Use the supplied editor image unchanged, in front of the mobile gradient. */
@media (max-width: 767px) {
  .hero-mobile-editor {
    z-index: 4;
    mix-blend-mode: normal;
    opacity: 1;
    filter: none;
  }
}
/* Mobile editor artwork spans edge to edge. */
@media (max-width: 767px) {
  .hero-mobile-editor {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}
/* Keep the mobile results and marquee within the first screen. */
@media (max-width: 767px) {
  .hero-mobile-editor {
    margin-top: clamp(1.6rem, 3svh, 2.4rem);
    margin-bottom: 1rem;
  }

  .hero-stats--mobile {
    margin-bottom: 0.8rem;
    padding-top: 1rem;
  }

  .hero--home + .marquee {
    margin-top: 0;
  }
}

@media (max-width: 767px) and (max-height: 760px) {
  .hero--home .hero-text {
    padding-top: clamp(9rem, 15svh, 11rem);
  }

  .hero-mobile-editor {
    margin-top: 1.4rem;
    margin-bottom: 0.6rem;
  }

  .hero-stats--mobile {
    margin-bottom: 0.6rem;
    padding-top: 0.8rem;
  }
}
/* Keep the black ribbon out of the first screen: hero fills the first viewport. */
@media (max-width: 767px) {
  .hero.hero--home {
    min-height: 100svh;
  }
}
@media (max-width: 767px) {
  .hero-stats--mobile {
    margin-bottom: 1.6rem;
  }
}
/* Mobile home hero — cinematic red signal gradient. */
@media (max-width: 767px) {
  .hero.hero--home {
    background:
      radial-gradient(ellipse 54% 25% at 50% 69%, rgba(255, 32, 8, 0.92) 0%, rgba(210, 13, 0, 0.72) 20%, rgba(103, 3, 0, 0.46) 49%, rgba(33, 0, 0, 0) 76%),
      radial-gradient(ellipse 88% 20% at 50% 88%, rgba(218, 15, 0, 0.53) 0%, rgba(108, 3, 0, 0.26) 40%, rgba(0, 0, 0, 0) 76%),
      radial-gradient(ellipse 78% 46% at 50% 49%, rgba(128, 6, 0, 0.50) 0%, rgba(64, 2, 0, 0.32) 43%, rgba(0, 0, 0, 0) 78%),
      linear-gradient(180deg, #000 0%, #010000 18%, #080000 34%, #230000 57%, #100000 74%, #000 100%);
  }
}
/* Mobile-only background scene: all layers stay behind the foreground editor image. */
@media (max-width: 767px) {
  .hero.hero--home {
    background: #000;
  }

  .hero--home::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 1;
    background:
      radial-gradient(ellipse 54% 26% at 50% 69%, rgba(255, 35, 8, 0.98) 0%, rgba(205, 12, 0, 0.78) 22%, rgba(90, 2, 0, 0.38) 56%, transparent 78%),
      radial-gradient(ellipse 78% 42% at 50% 45%, rgba(123, 5, 0, 0.50) 0%, rgba(46, 1, 0, 0.34) 45%, transparent 76%),
      radial-gradient(ellipse 92% 24% at 50% 89%, rgba(200, 11, 0, 0.63) 0%, rgba(92, 2, 0, 0.26) 48%, transparent 78%),
      linear-gradient(180deg, #000 0%, #010000 13%, #080000 28%, #2f0000 52%, #150000 71%, #000 100%);
  }

  .hero--home::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    height: 34%;
    pointer-events: none;
    opacity: 0.58;
    background:
      radial-gradient(ellipse 70% 28% at 50% 12%, rgba(255, 34, 8, 0.72), transparent 70%),
      repeating-linear-gradient(0deg, rgba(255, 47, 23, 0.28) 0 1px, transparent 1px 7px),
      linear-gradient(180deg, transparent 0%, rgba(125, 5, 0, 0.40) 34%, #000 100%);
    mix-blend-mode: screen;
  }

  .hero-mobile-editor {
    z-index: 4;
  }

  .hero--home .hero-text,
  .hero-stats--mobile {
    z-index: 5;
  }
}
/* Coded post-production ecosystem: background, HUD, paths, icons, then foreground. */
.hero-ecosystem { position:absolute; inset:0; z-index:2; overflow:hidden; pointer-events:none; color:#ff342d; }
.eco-orbits { position:absolute; inset:0; width:100%; height:100%; fill:none; stroke:rgba(255,35,26,.24); stroke-width:1; stroke-dasharray:5 11; animation:eco-path 28s linear infinite; }
.eco-orbits path { stroke:rgba(255,35,26,.34); stroke-dasharray:2 7; }
.eco-icon { position:absolute; width:5.2rem; aspect-ratio:1; display:grid; place-items:center; border:1px solid rgba(255,53,43,.55); border-radius:1.2rem; background:rgba(18,0,0,.35); box-shadow:0 0 2.6rem rgba(239,18,5,.16), inset 0 0 2rem rgba(255,15,0,.05); backdrop-filter:blur(5px); color:#ff382f; transform:translate3d(0,0,0); will-change:transform,opacity; }
.eco-icon svg { width:58%; height:58%; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }.eco-icon span { font-size:1.8rem; font-weight:700; letter-spacing:-.08em; }
.icon-pr{left:10%;top:15%;animation:eco-orbit-a 18s ease-in-out infinite}.icon-ae{left:8%;bottom:19%;animation:eco-drift 23s ease-in-out infinite}.icon-youtube{left:4%;top:43%;animation:eco-orbit-b 16s ease-in-out infinite}.icon-instagram{left:14%;bottom:37%;animation:eco-drift 27s ease-in-out infinite reverse}.icon-meta{right:11%;top:16%;animation:eco-orbit-b 22s ease-in-out infinite}.icon-capcut{right:7%;top:39%;animation:eco-orbit-a 17s ease-in-out infinite reverse}.icon-davinci{right:11%;bottom:29%;animation:eco-drift 25s ease-in-out infinite}.icon-tiktok{right:17%;bottom:13%;animation:eco-orbit-b 19s ease-in-out infinite reverse}.icon-adobe{right:5%;bottom:48%;animation:eco-drift 28s ease-in-out infinite reverse}.icon-play{left:4%;bottom:31%;animation:eco-orbit-a 21s ease-in-out infinite}.icon-audio{right:3%;top:58%;animation:eco-orbit-b 24s ease-in-out infinite}
.eco-hud{position:absolute;font:500 .85rem/1 monospace;letter-spacing:.12em;color:rgba(255,66,57,.65)}.hud-rec{left:8%;top:29%;display:flex;gap:.7rem;align-items:center}.hud-rec b{font-weight:500;border:1px solid rgba(255,55,45,.42);padding:.35rem .45rem}.hud-rec i{width:.5rem;height:.5rem;background:#ff2e25;border-radius:50%;box-shadow:0 0 1rem #f00;animation:eco-blink 2s steps(2) infinite}.hud-4k{right:9%;top:30%;border:1px solid rgba(255,55,45,.35);padding:.45rem;line-height:.8}.eco-wave{position:absolute;right:17%;top:24%;height:3.8rem;display:flex;align-items:center;gap:.35rem}.eco-wave span{width:.18rem;height:var(--h,60%);background:#ff2b23;box-shadow:0 0 .7rem #f00;animation:eco-wave 1.9s ease-in-out infinite alternate}.eco-wave span:nth-child(2n){--h:100%;animation-delay:-.8s}.eco-wave span:nth-child(3n){--h:35%;animation-delay:-1.2s}.eco-timeline{position:absolute;left:8%;bottom:17%;display:flex;gap:.4rem}.eco-timeline i{width:2.2rem;height:.35rem;background:rgba(255,38,27,.52);animation:eco-blink 4s ease-in-out infinite}.eco-meters{position:absolute;right:7%;bottom:14%;display:flex;gap:.35rem;align-items:end;height:4rem}.eco-meters i{width:.35rem;height:var(--m,40%);background:#ef241d;animation:eco-meter 2.4s ease-in-out infinite}.eco-meters i:nth-child(2){--m:78%;animation-delay:-.7s}.eco-meters i:nth-child(3){--m:55%;animation-delay:-1.4s}.eco-dots{position:absolute;width:7rem;height:9rem;opacity:.4;background-image:radial-gradient(circle, #e62b22 1px, transparent 1.2px);background-size:1rem 1rem}.eco-dots--left{left:4%;top:11%}.eco-dots--right{right:4%;bottom:15%}.eco-cross{position:absolute;width:1.4rem;height:1.4rem;background:linear-gradient(#f22,#f22) center/100% 1px no-repeat,linear-gradient(90deg,#f22,#f22) center/1px 100% no-repeat;opacity:.55}.eco-cross--one{left:21%;top:39%}.eco-cross--two{right:23%;bottom:42%}.eco-nodes{position:absolute;left:9%;bottom:7%;width:13rem;height:8rem;border-top:1px solid rgba(255,35,25,.3);transform:rotate(-13deg)}.eco-nodes i{position:absolute;width:.45rem;height:.45rem;border-radius:50%;background:#f42;box-shadow:0 0 1rem #f00}.eco-nodes i:nth-child(1){left:0;bottom:0}.eco-nodes i:nth-child(2){left:35%;top:18%}.eco-nodes i:nth-child(3){right:12%;bottom:22%}.eco-nodes i:nth-child(4){right:0;top:0}.eco-grid{position:absolute;inset:auto 0 0;height:24%;opacity:.28;background:linear-gradient(rgba(255,37,25,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,37,25,.5) 1px,transparent 1px);background-size:4rem 2.8rem;transform:perspective(34rem) rotateX(58deg) scale(1.4);transform-origin:bottom}
.hero--home .hero-text,.hero-stats--mobile{z-index:6}.hero--home .hero-video,.hero-mobile-editor{z-index:4}
@keyframes eco-orbit-a{50%{transform:translate3d(2.2rem,-1.5rem,0) rotate(5deg);opacity:.72}}@keyframes eco-orbit-b{50%{transform:translate3d(-2.4rem,1.8rem,0) rotate(-6deg);opacity:.68}}@keyframes eco-drift{50%{transform:translate3d(1.4rem,2.2rem,0) rotate(4deg);opacity:.65}}@keyframes eco-path{to{stroke-dashoffset:-160}}@keyframes eco-blink{50%{opacity:.38}}@keyframes eco-wave{to{transform:scaleY(.38);opacity:.45}}@keyframes eco-meter{50%{transform:scaleY(.45);opacity:.45}}
@media (max-width:1023px){.eco-icon{width:4.2rem}.icon-instagram,.icon-adobe,.icon-play,.eco-meters,.eco-nodes{display:none}}
@media (max-width:767px){.hero-ecosystem{opacity:.58}.eco-icon{width:3.2rem;border-radius:.8rem;box-shadow:0 0 1.6rem rgba(239,18,5,.12)}.eco-icon span{font-size:1.25rem}.icon-pr{left:4%;top:34%}.icon-youtube{left:3%;top:54%}.icon-ae{left:5%;bottom:20%}.icon-meta{right:4%;top:34%}.icon-capcut{right:3%;top:54%}.icon-tiktok{right:5%;bottom:19%}.icon-instagram,.icon-davinci,.icon-adobe,.icon-play,.icon-audio,.eco-wave,.eco-timeline,.eco-meters,.eco-nodes,.eco-cross{display:none}.eco-hud{font-size:.65rem}.hud-rec{left:4%;top:47%}.hud-4k{right:4%;top:47%}.eco-dots--left{left:2%;top:27%;transform:scale(.65)}.eco-dots--right{right:1%;bottom:28%;transform:scale(.65)}.eco-grid{height:16%}}
@media (prefers-reduced-motion:reduce){.eco-icon,.eco-orbits,.eco-wave span,.eco-timeline i,.eco-meters i{animation:none!important}}
/* Hero ecosystem v2 — atmospheric moving objects, not decorative icon buttons. */
.hero.hero--home { background:#030303; isolation:isolate; }
.hero--home::before { z-index:0!important; background:radial-gradient(ellipse 50% 31% at 50% 76%,rgba(139,8,3,.42),transparent 70%),radial-gradient(ellipse 75% 52% at 50% 64%,rgba(59,2,2,.22),transparent 75%),radial-gradient(ellipse at 50% 45%,transparent 32%,rgba(0,0,0,.58) 100%)!important; }
.hero--home::after { z-index:1!important; opacity:.18!important; height:31%!important; background:linear-gradient(180deg,transparent,rgba(107,5,3,.26) 38%,#000 100%),repeating-linear-gradient(0deg,rgba(168,21,16,.33) 0 1px,transparent 1px 9px)!important; mix-blend-mode:normal!important; }
.hero-ecosystem{z-index:2!important;opacity:1!important;perspective:110rem;}
.eco-orbits{stroke:rgba(223,29,20,.1)!important;stroke-width:.7!important;opacity:.55;animation:ecosystem-route 38s linear infinite!important}.eco-orbits path{stroke:rgba(223,29,20,.12)!important}
.eco-icon{width:var(--eco-size,4.1rem)!important;aspect-ratio:1;display:grid;place-items:center;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;color:rgba(255,61,51,.68)!important;opacity:var(--eco-opacity,.52);filter:drop-shadow(0 0 .8rem rgba(217,20,11,.26));will-change:transform,opacity;}
.eco-icon svg{width:72%!important;height:72%!important;stroke-width:1.35!important}.eco-icon span{font-size:calc(var(--eco-size,4.1rem)*.47)!important;font-weight:600!important;letter-spacing:-.1em!important}.eco-icon::after{content:"";position:absolute;top:50%;width:0;height:1px;opacity:0;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,45,35,.35),transparent)}
.icon-pr{--eco-size:5.8rem;--eco-opacity:.63;left:-3%!important;top:17%!important;animation:route-pr 19s cubic-bezier(.45,.05,.45,.95) infinite!important}.icon-pr::after{right:75%;width:9rem;opacity:.8}.icon-ae{--eco-size:3.6rem;--eco-opacity:.34;left:4%!important;bottom:12%!important;animation:route-ae 27s ease-in-out infinite!important}.icon-youtube{--eco-size:4.6rem;--eco-opacity:.5;left:auto!important;right:-3%!important;top:24%!important;animation:route-youtube 16s cubic-bezier(.42,0,.55,1) infinite!important}.icon-youtube::after{left:74%;width:7rem;opacity:.55}.icon-instagram{--eco-size:3.4rem;--eco-opacity:.3;left:auto!important;right:3%!important;bottom:17%!important;animation:route-instagram 31s ease-in-out infinite!important}.icon-meta{--eco-size:4.2rem;--eco-opacity:.35;left:8%!important;top:6%!important;animation:route-meta 23s ease-in-out infinite!important}.icon-capcut{--eco-size:5.1rem;--eco-opacity:.56;left:auto!important;right:8%!important;top:9%!important;animation:route-capcut 21s cubic-bezier(.45,.05,.45,.95) infinite!important}.icon-capcut::after{left:68%;width:8rem;opacity:.65}.icon-davinci{--eco-size:4rem;--eco-opacity:.38;left:auto!important;right:4%!important;bottom:34%!important;animation:route-davinci 29s ease-in-out infinite!important}.icon-tiktok{--eco-size:4.7rem;--eco-opacity:.47;left:13%!important;bottom:8%!important;animation:route-tiktok 17s ease-in-out infinite!important}.icon-adobe{--eco-size:3.2rem;--eco-opacity:.26;left:auto!important;right:15%!important;bottom:8%!important;animation:route-adobe 26s ease-in-out infinite!important}.icon-play{--eco-size:3rem;--eco-opacity:.23;left:2%!important;bottom:40%!important;animation:route-play 22s ease-in-out infinite!important}.icon-audio{--eco-size:3.6rem;--eco-opacity:.28;left:auto!important;right:1%!important;top:53%!important;animation:route-audio 24s ease-in-out infinite!important}
.eco-hud,.eco-wave,.eco-timeline,.eco-meters,.eco-dots,.eco-cross,.eco-nodes{opacity:.17!important}.eco-grid{opacity:.12!important;transform:perspective(34rem) rotateX(60deg) scale(1.35)!important}.eco-wave span{animation:eco-wave 2.8s ease-in-out infinite alternate!important}.eco-dots{opacity:.17!important}
@keyframes route-pr{0%{transform:translate3d(-4vw,1vh,-8rem) scale(.48) rotate(-8deg);opacity:0}16%{opacity:.42}46%{transform:translate3d(12vw,6vh,1rem) scale(1) rotate(4deg);opacity:.68}72%{transform:translate3d(7vw,26vh,-4rem) scale(.64) rotate(-5deg);opacity:.34}100%{transform:translate3d(-5vw,43vh,-10rem) scale(.35) rotate(-11deg);opacity:0}}
@keyframes route-ae{0%,100%{transform:translate3d(-2vw,3vh,-7rem) scale(.58) rotate(6deg);opacity:0}22%{opacity:.28}55%{transform:translate3d(15vw,-12vh,2rem) scale(.9) rotate(-4deg);opacity:.45}78%{opacity:.18}}
@keyframes route-youtube{0%{transform:translate3d(6vw,-5vh,-9rem) scale(.42) rotate(8deg);opacity:0}18%{opacity:.34}50%{transform:translate3d(-11vw,16vh,1rem) scale(1) rotate(-4deg);opacity:.6}76%{transform:translate3d(-6vw,38vh,-4rem) scale(.62) rotate(7deg);opacity:.25}100%{transform:translate3d(8vw,46vh,-9rem) scale(.35) rotate(10deg);opacity:0}}
@keyframes route-instagram{0%,100%{transform:translate3d(4vw,4vh,-8rem) scale(.45) rotate(-6deg);opacity:0}30%{opacity:.24}58%{transform:translate3d(-13vw,-10vh,0) scale(.82) rotate(5deg);opacity:.36}82%{opacity:.15}}
@keyframes route-meta{0%,100%{transform:translate3d(-3vw,-2vh,-9rem) scale(.48);opacity:0}27%{opacity:.2}55%{transform:translate3d(13vw,8vh,-1rem) scale(.86) rotate(5deg);opacity:.36}75%{opacity:.12}}
@keyframes route-capcut{0%{transform:translate3d(4vw,-7vh,-8rem) scale(.45) rotate(7deg);opacity:0}18%{opacity:.34}47%{transform:translate3d(-12vw,8vh,1rem) scale(1) rotate(-5deg);opacity:.62}72%{transform:translate3d(-7vw,29vh,-5rem) scale(.62) rotate(5deg);opacity:.22}100%{transform:translate3d(6vw,43vh,-10rem) scale(.35) rotate(10deg);opacity:0}}
@keyframes route-davinci{0%,100%{transform:translate3d(5vw,5vh,-8rem) scale(.43);opacity:0}26%{opacity:.22}59%{transform:translate3d(-12vw,-10vh,0) scale(.9) rotate(-7deg);opacity:.38}82%{opacity:.12}}
@keyframes route-tiktok{0%{transform:translate3d(-4vw,4vh,-8rem) scale(.42) rotate(-7deg);opacity:0}24%{opacity:.25}54%{transform:translate3d(13vw,-17vh,0) scale(.9) rotate(6deg);opacity:.45}78%{opacity:.15}100%{transform:translate3d(-2vw,-32vh,-9rem) scale(.35);opacity:0}}
@keyframes route-adobe{0%,100%{transform:translate3d(4vw,2vh,-9rem) scale(.4);opacity:0}35%{opacity:.2}63%{transform:translate3d(-16vw,-9vh,0) scale(.82) rotate(5deg);opacity:.3}}
@keyframes route-play{0%,100%{transform:translate3d(-3vw,2vh,-7rem) scale(.45);opacity:0}42%{transform:translate3d(16vw,-9vh,-1rem) scale(.82) rotate(5deg);opacity:.24}70%{opacity:.08}}
@keyframes route-audio{0%,100%{transform:translate3d(3vw,3vh,-8rem) scale(.4);opacity:0}35%{opacity:.18}60%{transform:translate3d(-14vw,-12vh,-1rem) scale(.75) rotate(-4deg);opacity:.27}}
@keyframes ecosystem-route{to{stroke-dashoffset:-170}}
@media (max-width:1023px){.eco-icon{filter:drop-shadow(0 0 .55rem rgba(217,20,11,.18))}.icon-adobe,.icon-play,.icon-audio,.eco-meters,.eco-nodes{display:none!important}}
@media (max-width:767px){.hero-ecosystem{opacity:.72!important}.eco-icon{--eco-opacity:.3!important;filter:none!important}.icon-pr{--eco-size:3.4rem;left:-4%!important;top:37%!important;animation:mobile-pr 19s ease-in-out infinite!important}.icon-youtube{--eco-size:3.1rem;right:-4%!important;top:48%!important;animation:mobile-youtube 16s ease-in-out infinite!important}.icon-capcut{--eco-size:3.2rem;right:-4%!important;top:67%!important;animation:mobile-capcut 23s ease-in-out infinite!important}.icon-ae{--eco-size:2.8rem;left:-2%!important;bottom:13%!important;animation:mobile-ae 27s ease-in-out infinite!important}.icon-meta{--eco-size:2.7rem;right:1%!important;top:23%!important;left:auto!important;animation:mobile-meta 29s ease-in-out infinite!important}.icon-tiktok{--eco-size:2.8rem;left:2%!important;bottom:26%!important;animation:mobile-tiktok 24s ease-in-out infinite!important}.icon-instagram,.icon-davinci,.icon-adobe,.icon-play,.icon-audio,.eco-wave,.eco-timeline,.eco-meters,.eco-nodes,.eco-cross{display:none!important}.eco-orbits{opacity:.24}.eco-hud,.eco-dots{opacity:.1!important}.eco-grid{opacity:.07!important}}
@keyframes mobile-pr{0%,100%{transform:translate3d(-2vw,0,0) scale(.55);opacity:0}28%{opacity:.24}58%{transform:translate3d(7vw,5vh,0) scale(.88) rotate(4deg);opacity:.34}78%{opacity:.1}}@keyframes mobile-youtube{0%,100%{transform:translate3d(3vw,0,0) scale(.5);opacity:0}30%{opacity:.2}57%{transform:translate3d(-6vw,8vh,0) scale(.82) rotate(-4deg);opacity:.32}78%{opacity:.1}}@keyframes mobile-capcut{0%,100%{transform:translate3d(3vw,0,0) scale(.5);opacity:0}34%{opacity:.18}62%{transform:translate3d(-7vw,-6vh,0) scale(.78) rotate(5deg);opacity:.29}}@keyframes mobile-ae{0%,100%{transform:translate3d(-2vw,0,0) scale(.48);opacity:0}35%{opacity:.14}65%{transform:translate3d(8vw,-5vh,0) scale(.75);opacity:.25}}@keyframes mobile-meta{0%,100%{transform:translate3d(2vw,0,0) scale(.5);opacity:0}42%{transform:translate3d(-7vw,7vh,0) scale(.72);opacity:.22}}@keyframes mobile-tiktok{0%,100%{transform:translate3d(-2vw,0,0) scale(.45);opacity:0}45%{transform:translate3d(8vw,-7vh,0) scale(.75) rotate(4deg);opacity:.23}}
@media (prefers-reduced-motion:reduce){.eco-icon,.eco-orbits,.eco-wave span,.eco-timeline i,.eco-meters i{animation:none!important}.eco-icon{opacity:.14!important}}

/* -- desktop: case + price folds sit side by side (gradient kept) ---------- */
@media (min-width: 768px) {
  .case-fold.is-static .steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem; align-items: stretch; }
  .case-fold.is-static .case-card { display: flex; flex-direction: column; align-items: stretch; max-width: none; margin-inline: 0; }
  .case-fold.is-static .case-card .case-media { aspect-ratio: 16/9; height: auto; }
  .case-fold.is-static .case-card .case-body { flex: 1; }
  .price-fold.is-static .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; align-items: stretch; }
  .price-fold.is-static .price-card { display: flex; flex-direction: column; align-items: stretch; min-width: 0; padding: 3.2rem; }
  .price-fold.is-static .price-card .price-num { flex-direction: column; align-items: flex-start; gap: 1rem; font-size: 6.8rem; }
  .price-fold.is-static .price-card .price-num small { max-width: none; padding-bottom: 0; }
  .price-fold.is-static .price-card > .btn { align-self: stretch; justify-content: center; margin-top: auto; padding: 2rem 2.4rem; font-size: 1.7rem; }
  .price-fold.is-static .price-card .price-list { width: 100%; }
}

/* -- call page: note cards, dark gradient + spaced grid -------------------- */
.note-fold .steps { display: grid; grid-template-columns: 1fr; gap: 2.4rem; }
.note-fold .note-card {
  display: block;
  border-radius: 2.4rem;
  padding: 2.2rem 2.6rem;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(252, 0, 25, 0.16), transparent 60%),
    linear-gradient(180deg, #0c0c0e, #050505);
  border: 0.1rem solid rgba(236, 236, 236, 0.12);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1.4;
}
.note-fold .note-card::before { content: "●"; color: var(--accent); display: block; margin-bottom: 1.2rem; font-size: 1.1rem; }
@media (min-width: 768px) and (max-width: 1099px) {
  .note-fold .steps { grid-template-columns: repeat(2, 1fr); gap: 2.4rem; }
}
@media (min-width: 1100px) {
  .note-fold .steps { grid-template-columns: repeat(4, 1fr); gap: 3rem; }
}

/* -- form selects: options fit the cell on mobile -------------------------- */
@media (max-width: 767px) {
  .field select { font-size: 1.7rem; }
  .field select option { font-size: 1.5rem; }
}

/* -- homepage: click-to-play hint ------------------------------------------ */
.vid-hint {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2.4rem;
  padding: 1.1rem 2.4rem;
  border-radius: 999rem;
  background: rgba(252, 0, 25, 0.12);
  border: 0.12rem solid rgba(252, 0, 25, 0.55);
  color: #e8001f;
  font-family: var(--mono);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  animation: hint-pulse 2.2s ease-in-out infinite;
}
.vid-hint-ic { font-size: 1rem; color: #fff; background: #e8001f; border-radius: 50%; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; flex: none; }
@keyframes hint-pulse {
  0%, 100% { box-shadow: 0 0 1.6rem rgba(252, 0, 25, 0.22), inset 0 0 1.2rem rgba(252, 0, 25, 0.08); }
  50% { box-shadow: 0 0 3.6rem rgba(252, 0, 25, 0.5), inset 0 0 1.8rem rgba(252, 0, 25, 0.18); }
}