/* ============================================================
   Rowads landing page — composition styles on top of tokens.css
   ============================================================ */

* { box-sizing: border-box; }

html { scrollbar-gutter: stable; }

html, body {
  margin: 0;
  padding: 0;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

body { overflow-x: hidden; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img, svg { display: block; max-width: 100%; }

::selection { background: hsl(var(--brand-pink) / 0.35); color: white; }

/* ---------- LAYOUT ----------------------------------------- */

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 120px 0;
  position: relative;
}
.section--tight { padding: 80px 0; }
.section--xl    { padding: 160px 0 120px; }

@media (max-width: 720px) {
  .section { padding: 80px 0; }
  .section--xl { padding: 100px 0 70px; }
}

/* ---------- TYPE ------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  color: hsl(var(--muted-foreground));
  padding: 6px 12px;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-full);
  background: hsl(var(--card) / 0.5);
  backdrop-filter: blur(8px);
}
.eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: hsl(var(--brand-pink));
  box-shadow: 0 0 12px hsl(var(--brand-pink) / 0.8);
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--weight-medium); }

.h-display {
  font-size: clamp(40px, 6.5vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 500;
}
.h-display em {
  font-style: normal;
  background: linear-gradient(135deg, hsl(var(--brand-pink)) 0%, hsl(var(--brand-pink-hover)) 50%, hsl(var(--accent-violet)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.h-section {
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 500;
}
.h-section em {
  font-style: normal;
  color: hsl(var(--brand-pink));
}

.h-feature {
  font-size: clamp(28px, 3.5vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 500;
}

.lede {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: hsl(var(--muted-foreground));
  max-width: 56ch;
  text-wrap: pretty;
}

/* ---------- BUTTONS ---------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
  white-space: nowrap;
}
.btn--primary {
  background: hsl(var(--brand-pink));
  color: white;
  box-shadow: 0 6px 24px -8px hsl(var(--brand-pink) / 0.6),
              inset 0 1px 0 hsl(0 0% 100% / 0.18);
}
.btn--primary:hover {
  background: hsl(var(--brand-pink-hover));
  box-shadow: 0 10px 32px -8px hsl(var(--brand-pink) / 0.8),
              inset 0 1px 0 hsl(0 0% 100% / 0.18);
}
.btn--ghost {
  background: transparent;
  border-color: hsl(var(--border));
  color: hsl(var(--foreground));
}
.btn--ghost:hover {
  background: hsl(var(--muted) / 0.4);
  border-color: hsl(var(--foreground) / 0.3);
}
.btn--lg { height: 52px; padding: 0 26px; font-size: var(--text-base); }
.btn .arrow {
  transition: transform var(--dur-base) var(--ease-out);
}
.btn:hover .arrow { transform: translateX(3px); }

/* Video CTA — pill with circular play glyph on the left */
.btn--video {
  background: hsl(var(--card) / 0.6);
  border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
  padding-left: 8px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  gap: 12px;
}
.btn--video .btn__label-short { display: none; }
.btn--video:hover {
  background: hsl(var(--card) / 0.9);
  border-color: hsl(var(--brand-pink) / 0.5);
}
.btn__play {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  background: hsl(var(--brand-pink));
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 2px;
  flex: 0 0 auto;
  box-shadow: 0 4px 14px -4px hsl(var(--brand-pink) / 0.5);
  transition: transform var(--dur-base) var(--ease-out);
}
.btn--video:hover .btn__play { transform: scale(1.05); }

/* ---------- VIDEO MODAL ----------------------------------- */
.vmodal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.vmodal[hidden] { display: none; }
.vmodal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.vmodal__scrim {
  position: absolute;
  inset: 0;
  background: hsl(0 0% 0% / 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 0;
  cursor: pointer;
  padding: 0;
}
.vmodal__frame {
  position: relative;
  width: 100%;
  max-width: 1080px;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 40px 100px -20px hsl(0 0% 0% / 0.6),
              0 0 0 1px hsl(var(--border));
  transform: scale(0.97);
  transition: transform var(--dur-base) var(--ease-out);
}
.vmodal.is-open .vmodal__frame { transform: scale(1); }
.vmodal__player {
  position: absolute;
  inset: 0;
}
.vmodal__player iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.vmodal__fallback {
  position: absolute;
  bottom: -36px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12.5px;
  color: hsl(0 0% 100% / 0.7);
  text-decoration: none;
  transition: color var(--dur-fast);
  z-index: 2;
}
.vmodal__fallback:hover { color: white; }
.vmodal__close {
  position: absolute;
  top: -52px;
  right: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: hsl(0 0% 100% / 0.1);
  border: 1px solid hsl(0 0% 100% / 0.2);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.vmodal__close:hover {
  background: hsl(0 0% 100% / 0.18);
  border-color: hsl(0 0% 100% / 0.35);
}
/* ------ Contact modal ------ */
.cmodal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.cmodal[hidden] { display: none; }
.cmodal.is-open { opacity: 1; pointer-events: auto; }
.cmodal__scrim {
  position: absolute;
  inset: 0;
  background: hsl(0 0% 0% / 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 0;
  cursor: pointer;
  padding: 0;
}
.cmodal__frame {
  position: relative;
  width: 100%;
  max-width: 1100px;
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, hsl(var(--brand-pink) / 0.10) 0%, transparent 60%),
    hsl(0 0% 4%);
  color: hsl(var(--card-foreground));
  border-radius: var(--radius-xl);
  border: 1px solid hsl(var(--border));
  box-shadow: 0 40px 100px -20px hsl(0 0% 0% / 0.6);
  padding: 56px;
  transform: scale(0.97);
  transition: transform var(--dur-base) var(--ease-out);
}
.cmodal.is-open .cmodal__frame { transform: scale(1); }
.cmodal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: hsl(0 0% 100% / 0.06);
  border: 1px solid hsl(0 0% 100% / 0.12);
  color: hsl(var(--foreground));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast);
  z-index: 2;
}
.cmodal__close:hover {
  background: hsl(0 0% 100% / 0.12);
  border-color: hsl(0 0% 100% / 0.24);
}

/* Hero CTA — liquid glass at rest, brand red on hover.
   Mirrors the nav cursor's glass treatment: backdrop blur + saturate +
   SVG distortion filter + subtle top highlight + inner/outer shadows. */
.home-hero__cta {
  position: relative;
  isolation: isolate;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: hsl(var(--foreground));
  box-shadow:
    inset 0 1px 0.5px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0.5px 0 rgba(255, 255, 255, 0.10),
    0 6px 22px -8px rgba(0, 0, 0, 0.45),
    0 0 0 0.5px rgba(255, 255, 255, 0.10);
  transition:
    background var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.home-hero__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  backdrop-filter: blur(12px) saturate(1.6);
  -webkit-backdrop-filter: blur(12px) saturate(1.6);
  filter: url(#glass-distortion);
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.home-hero__cta::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 35%);
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.home-hero__cta:hover {
  background: hsl(var(--brand-pink));
  border-color: hsl(var(--brand-pink));
  color: white;
  transform: translateY(-1px);
  box-shadow:
    0 12px 32px -8px hsl(var(--brand-pink) / 0.5),
    0 0 0 0.5px hsl(var(--brand-pink) / 0.6);
}
.home-hero__cta:hover::before,
.home-hero__cta:hover::after { opacity: 0; }
.home-hero__cta .arrow { transition: transform var(--dur-base) var(--ease-out); }
.home-hero__cta:hover .arrow { transform: translateX(4px); }

/* steps */
.cmodal__step[hidden] { display: none; }

/* back link */
.cmodal__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
  padding: 8px 14px 8px 10px;
  background: transparent;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-full);
  color: hsl(var(--muted-foreground));
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.cmodal__back:hover {
  color: hsl(var(--foreground));
  border-color: hsl(0 0% 100% / 0.24);
  background: hsl(0 0% 100% / 0.04);
}

/* chooser step */
.cmodal__chooser {
  max-width: 760px;
  margin: 0 auto;
  padding: 8px 0 16px;
  text-align: center;
}
.cmodal__chooser-title {
  text-align: center;
  margin: 0 auto;
}
.cmodal__chooser-lede {
  text-align: center;
  margin: 16px auto 0;
}

/* chooser assurance row */
.cmodal__assurance {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 40px;
}
.cmodal__assurance-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}
.cmodal__assurance-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: hsl(var(--brand-pink) / 0.12);
  color: hsl(var(--brand-pink));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid hsl(var(--brand-pink) / 0.25);
  flex-shrink: 0;
}
.cmodal__assurance-eyebrow {
  font-size: 13px;
  color: hsl(var(--muted-foreground));
}
.cmodal__assurance-value {
  font-size: 15px;
  font-weight: 500;
}
.cmodal__choices {
  margin-top: 44px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  text-align: left;
}
.cmodal__choice {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 28px 26px;
  background: hsl(0 0% 7%);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-xl);
  color: hsl(var(--foreground));
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.cmodal__choice::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 100%, hsl(var(--brand-pink) / 0.18) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  pointer-events: none;
}
.cmodal__choice:hover {
  border-color: hsl(var(--brand-pink) / 0.6);
  transform: translateY(-2px);
  background: hsl(0 0% 9%);
}
.cmodal__choice:hover::after { opacity: 1; }
.cmodal__choice-shader {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
}
.cmodal__choice > .cmodal__choice-num,
.cmodal__choice > .cmodal__choice-label,
.cmodal__choice > .cmodal__choice-arrow { position: relative; z-index: 2; }
.cmodal__choice--brand { background: hsl(0 0% 4%); }
.cmodal__choice--brand:hover { background: hsl(0 0% 4%); }

/* perf choice — WebGL ethereal-shadow port (soft ink-in-water clouds) */
.cmodal__choice--perf { background: hsl(0 0% 4%); }
.cmodal__choice--perf:hover { background: hsl(0 0% 4%); }
.cmodal__choice-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: hsl(var(--muted-foreground));
  transition: color var(--dur-base) var(--ease-out);
}
.cmodal__choice:hover .cmodal__choice-num { color: hsl(var(--brand-pink)); }
.cmodal__choice-label {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.cmodal__choice-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: hsl(0 0% 100% / 0.06);
  border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
  margin-top: auto;
  align-self: flex-end;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.cmodal__choice:hover .cmodal__choice-arrow {
  background: hsl(var(--brand-pink));
  border-color: hsl(var(--brand-pink));
  color: white;
  transform: translateX(4px);
}
@media (max-width: 640px) {
  .cmodal__choices { grid-template-columns: 1fr; gap: 14px; }
  .cmodal__choice { padding: 22px; }
}

@media (max-width: 960px) {
  .cmodal__frame { padding: 32px; }
}
@media (max-width: 600px) {
  .cmodal { padding: 12px; }
  .cmodal__frame { padding: 24px; }
}

@media (max-width: 700px) {
  .vmodal { padding: 12px; }
  .vmodal__close { top: -48px; }
}

/* ---------- NAV -------------------------------------------- */

.nav {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 1120px;
  z-index: 100;
  background: hsl(0 0% 6% / 0.75);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid hsl(var(--border) / 0.7);
  border-radius: var(--radius-full);
  padding: 8px 8px 8px 18px;
  display: flex;
  align-items: center;
  gap: 24px;
  transition: padding var(--dur-base) var(--ease-out),
              transform 380ms var(--ease-out),
              opacity 380ms var(--ease-out);
}

/* Hide-on-scroll-down, reveal-on-scroll-up (toggled by wireNavAutohide). */
.nav.nav--hidden {
  transform: translate(-50%, calc(-100% - 24px));
  opacity: 0;
  pointer-events: none;
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--weight-medium);
  font-size: 15px;
  letter-spacing: -0.01em;
}
.nav__brand svg { width: 26px; height: 26px; }
.nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.nav__links a {
  font-size: 13.5px;
  color: hsl(var(--muted-foreground));
  padding: 8px 14px;
  border-radius: var(--radius-full);
  transition: color var(--dur-fast), background var(--dur-fast);
}
.nav__links a:hover { color: hsl(var(--foreground)); background: hsl(var(--muted) / 0.4); }

/* Liquid-glass cursor — single floating pill, slides between links on hover, returns to active on leave */
.nav__links { position: relative; }
.nav__links a { position: relative; z-index: 1; }
.nav__links a.is-active { color: hsl(0 0% 100%); background: transparent; }

.nav__cursor {
  position: absolute;
  top: 0; left: 0;
  z-index: 0;
  width: 0; height: 0;
  border-radius: var(--radius-full);
  isolation: isolate;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  background: rgba(255, 255, 255, 0.05);
  box-shadow:
    inset 0 1px 0.5px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0.5px 0 rgba(255, 255, 255, 0.14),
    0 4px 14px -6px rgba(0, 0, 0, 0.3),
    0 0 0 0.5px rgba(255, 255, 255, 0.12);
  transition:
    transform 520ms cubic-bezier(0.34, 1.32, 0.64, 1),
    width     520ms cubic-bezier(0.34, 1.32, 0.64, 1),
    height    520ms cubic-bezier(0.34, 1.32, 0.64, 1),
    opacity   220ms ease-out;
}
.nav__cursor::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  backdrop-filter: blur(12px) saturate(1.6);
  -webkit-backdrop-filter: blur(12px) saturate(1.6);
  filter: url(#glass-distortion);
  pointer-events: none;
}
.nav__cursor::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 35%);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .nav__cursor { transition: opacity 200ms ease-out; }
}

.nav__cta {
  margin-left: 8px;
  height: 38px;
  padding: 0 16px;
  font-size: 13.5px;
}

.nav__burger {
  display: none;
  background: transparent;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-full);
  width: 38px; height: 38px;
  align-items: center; justify-content: center;
  color: hsl(var(--foreground));
}

/* Animated burger ↔ close. The three bars share one center line and translate
   apart by default; on aria-expanded they collapse to the center and rotate
   into an X. */
.nav__burger svg path {
  transform-box: view-box;
  transform-origin: center;
  transition: transform 300ms;
}
.nav__burger svg path:nth-child(1) {
  transform: translateY(-7px);
  transition-timing-function: cubic-bezier(.5, .85, .25, 1.1);
}
.nav__burger svg path:nth-child(2) {
  transition-timing-function: cubic-bezier(.5, .85, .25, 1.8);
}
.nav__burger svg path:nth-child(3) {
  transform: translateY(7px);
  transition-timing-function: cubic-bezier(.5, .85, .25, 1.1);
}
.nav__burger[aria-expanded="true"] svg path:nth-child(1) {
  transform: translateY(0) rotate(315deg);
}
.nav__burger[aria-expanded="true"] svg path:nth-child(2) {
  transform: rotate(45deg);
}
.nav__burger[aria-expanded="true"] svg path:nth-child(3) {
  transform: translateY(0) rotate(135deg);
}

@media (max-width: 860px) {
  .nav { flex-wrap: wrap; }
  .nav__links { display: none; }
  .nav__burger { display: inline-flex; margin-left: auto; }
  .nav__cta { display: none; }

  /* Burger opens the menu: links + CTA wrap into a full-width stack below */
  .nav.is-menu-open { border-radius: 22px; padding-bottom: 12px; }
  .nav.is-menu-open .nav__links {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    order: 5;
    margin-left: 0;
    gap: 2px;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid hsl(var(--border) / 0.6);
  }
  .nav.is-menu-open .nav__links a { padding: 13px 12px; font-size: 15.5px; }
  .nav.is-menu-open .nav__cta {
    display: inline-flex;
    justify-content: center;
    flex-basis: 100%;
    order: 6;
    margin-top: 10px;
  }
}

/* ---------- HERO ------------------------------------------- */

.hero {
  position: relative;
  padding-top: 130px;
  padding-bottom: 60px;
  overflow: hidden;
  isolation: isolate;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 60% 50% at 20% 0%, hsl(var(--brand-pink) / 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 50% 45% at 80% 10%, hsl(var(--accent-violet) / 0.14) 0%, transparent 60%),
    radial-gradient(ellipse 70% 40% at 50% 100%, hsl(217 91% 60% / 0.08) 0%, transparent 60%),
    linear-gradient(180deg, hsl(0 0% 5%) 0%, hsl(0 0% 3.5%) 100%);
}
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(hsl(var(--foreground) / 0.025) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--foreground) / 0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 0%, transparent 70%);
}

.hero__inner {
  text-align: center;
  max-width: 940px;
  margin: 0 auto;
}
.hero__title { margin-top: 28px; }
.hero__lede {
  margin: 28px auto 0;
  text-align: center;
}
.hero__actions {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  margin-top: 36px;
}

.hero__experts {
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.hero__experts-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}
.hero__experts-row {
  display: flex; align-items: center; gap: 36px;
  flex-wrap: wrap; justify-content: center;
  opacity: 0.92;
  row-gap: 24px;
}
.hero__experts-row .logo-chip {
  height: 28px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: hsl(var(--foreground) / 0.85);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero__experts-row .logo-chip svg { height: 22px; width: auto; }

/* Wordmarks — uniform mark + name pattern */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 28px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  color: hsl(var(--foreground) / 0.9);
  letter-spacing: -0.02em;
}
.wordmark__mark {
  height: 24px;
  width: auto;
  flex: 0 0 auto;
}
.wordmark--meta .wordmark__mark { height: 16px; }

/* Real brand logos — all trimmed to content bounds, uniform CSS height. */
.brand-logo {
  height: 24px;
  width: auto;
  display: block;
  flex: 0 0 auto;
  opacity: 0.95;
}
/* Google has a descender ("g") that inflates its bounding box, making the
   cap-height read small and the optical baseline sit too high. Bump height
   and nudge it down so the caps line up with the other wordmarks. */
.brand-logo--google {
  height: 30px;
  transform: translateY(2px);
}
/* Wieden+Kennedy wordmark is laid out on two lines, so optical height at 24px
   reads tiny next to single-line wordmarks. Bump up to balance. */
.brand-logo--wieden-kennedy {
  height: 44px;
}

/* ---------- AD GALLERY (HERO MARQUEE) ---------------------- */

.gallery {
  margin-top: 70px;
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}
.gallery__row {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: marquee 50s linear infinite;
  will-change: transform;
}
.gallery__row--reverse { animation-direction: reverse; animation-duration: 62s; margin-top: 18px; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Ad card — phone-shaped 9:16 with overlays */
.ad {
  flex: 0 0 auto;
  width: 178px;
  aspect-ratio: 9 / 16;
  border-radius: 22px;
  position: relative;
  overflow: hidden;
  border: 1px solid hsl(var(--border) / 0.7);
  box-shadow: 0 18px 40px -20px hsl(0 0% 0% / 0.6);
  background: #1a1a1a;
}
.ad__bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
}
.ad__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, hsl(0 0% 0% / 0) 0%, hsl(0 0% 0% / 0) 40%, hsl(0 0% 0% / 0.7) 100%);
}
.ad__brand {
  position: absolute;
  top: 10px; left: 10px;
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px 4px 4px;
  background: hsl(0 0% 0% / 0.5);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-full);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: white;
}
.ad__brand .ad__avatar {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px;
  color: white;
  font-weight: 700;
}
.ad__hook {
  position: absolute;
  inset: auto 12px 44px 12px;
  color: white;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 8px hsl(0 0% 0% / 0.6);
  text-wrap: balance;
}
.ad__metrics {
  position: absolute;
  inset: auto 12px 10px 12px;
  display: flex;
  gap: 12px;
  font-size: 10.5px;
  color: hsl(0 0% 100% / 0.92);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.ad__metrics span { display: inline-flex; align-items: center; gap: 4px; }
.ad__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 38px; height: 38px;
  border-radius: 50%;
  background: hsl(0 0% 100% / 0.18);
  backdrop-filter: blur(8px);
  border: 1px solid hsl(0 0% 100% / 0.3);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.ad:hover .ad__play { opacity: 1; }

/* ---------- REEL VARIANT (real videos from R2) -------------- */
/* Reuses the .ad chassis but swaps the gradient bg for a poster
   image + lazy-loaded <video>. The video fades in once its first
   frame is decoded (.is-playing class), so the poster stays put
   while bytes are still streaming in. */
.ad--reel .ad__poster,
.ad--reel .ad__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background: #0a0a0a;
  border-radius: inherit;
  transform: translateZ(0);
}
.ad--reel .ad__video {
  opacity: 0;
  transition: opacity 0.25s var(--ease-out);
  pointer-events: none;
}
.ad--reel.is-playing .ad__video { opacity: 1; }
/* Hide the static play badge once the clip is actually rolling */
.ad--reel.is-playing .ad__play { opacity: 0; }
/* Slight zoom on hover to match production-feed feel */
.ad--reel { transition: transform 0.4s var(--ease-out); border: none; }
.ad--reel:hover { transform: translateY(-2px); }

/* Gradient palette for ad backgrounds */
.bg-pink     { background: linear-gradient(135deg, #ED1165 0%, #7a0a36 100%); }
.bg-violet   { background: linear-gradient(135deg, #9B6FE6 0%, #2a1860 100%); }
.bg-blue     { background: linear-gradient(135deg, #3b82f6 0%, #1e3a8a 100%); }
.bg-emerald  { background: linear-gradient(135deg, #10b981 0%, #064e3b 100%); }
.bg-orange   { background: linear-gradient(135deg, #f97316 0%, #7c2d12 100%); }
.bg-amber    { background: linear-gradient(135deg, #f59e0b 0%, #78350f 100%); }
.bg-rose     { background: linear-gradient(135deg, #fb7185 0%, #500724 100%); }
.bg-slate    { background: linear-gradient(135deg, #475569 0%, #0f172a 100%); }
.bg-teal     { background: linear-gradient(135deg, #14b8a6 0%, #134e4a 100%); }
.bg-fuchsia  { background: linear-gradient(135deg, #d946ef 0%, #4a044e 100%); }

/* Ad noise overlay for more "photographic" feel */
.ad__bg::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 30% 20%, hsl(0 0% 100% / 0.2) 0%, transparent 35%),
    radial-gradient(circle at 70% 80%, hsl(0 0% 0% / 0.3) 0%, transparent 50%);
}

/* Image-backed ad cards (real screenshots, e.g. winner stack) */
.ad--image { background: #000; }
.ad--image .ad__bg {
  background-size: cover;
  background-position: center;
}
.ad--image .ad__bg::after { display: none; }
.ad--image .ad__hook { display: none; }

/* Winner stack: center is the picked winner, sides are blurred candidates */
.phone-stack--winners .ad--blur .ad__bg {
  filter: blur(4px) saturate(0.8) brightness(0.7);
}
.phone-stack--winners .ad--blur {
  opacity: 0.95;
}
.phone-stack--winners .ad--blur .ad__brand,
.phone-stack--winners .ad--blur .ad__metrics,
.phone-stack--winners .ad--blur .ad__play {
  opacity: 0.35;
}
.phone-stack--winners .ad--winner {
  z-index: 5;
  box-shadow:
    0 40px 90px -20px hsl(0 0% 0% / 0.65);
}

/* Logo avatar (image-backed) */
.ad__avatar--logo {
  background-size: cover;
  background-position: center;
  color: transparent;
}

/* TikTok-style vertical metrics column on image cards */
.ad__metrics--vertical {
  inset: auto 8px 12px auto;
  left: auto !important;
  right: 8px !important;
  bottom: 12px !important;
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  font-size: 11px;
  text-shadow: 0 1px 4px hsl(0 0% 0% / 0.6);
}
.ad__metrics--vertical span {
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.ad__metrics--vertical svg {
  filter: drop-shadow(0 1px 3px hsl(0 0% 0% / 0.5));
}

.ad__check {
  position: absolute;
  top: -8px; right: -8px;
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 6px 16px hsl(0 0% 0% / 0.45));
  z-index: 4;
}
.ad__check svg { width: 100%; height: 100%; }

/* ---------- WHY US ---------------------------------------- */

.why {
}
/* Tighten the gap to the video section above (desktop only; mobile keeps its
   smaller .section padding). */
@media (min-width: 701px) { .why { padding-top: 76px; } }
/* Tighten the gaps between the Performance feature sections on desktop:
   "We bring them to life" and "We follow the data". */
@media (min-width: 701px) {
  #pillar-production,
  #pillar-optimization { padding-top: 76px; }
}
/* Same tightening on phones (sections use 64px there). */
@media (max-width: 700px) {
  #pillar-production,
  #pillar-optimization { padding-top: 40px; }
}
.why__head {
  max-width: 920px;
}
.why__head .eyebrow { margin-bottom: 24px; }
.why__head .lede { margin-top: 24px; max-width: 64ch; }

/* Reasons row above, case-studies row below. Each row is its own 3-col grid,
   so reason cards align to one height and case cards to another. */
.why__grid {
  margin-top: 64px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.why-reasons,
.why-cases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 900px) and (min-width: 701px) {
  .why-reasons, .why-cases { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  /* Phone: each row becomes its own swipeable carousel. */
  .why-reasons,
  .why-cases {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 5%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .why-reasons::-webkit-scrollbar,
  .why-cases::-webkit-scrollbar { display: none; }
  .why-reasons > .why-card,
  .why-cases > .case {
    flex: 0 0 86%;
    scroll-snap-align: start;
  }
  /* Small left inset + a bigger right gutter so the next card peeks in. */
  .why-reasons::before, .why-cases::before { content: ''; flex: 0 0 calc(5% - 14px); }
  .why-reasons::after,  .why-cases::after  { content: ''; flex: 0 0 calc(9% - 14px); }
}

.why-card {
  position: relative;
  padding: 32px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.why-card:hover { border-color: hsl(var(--brand-pink) / 0.4); }
.why-card__icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-lg);
  background: hsl(var(--brand-pink) / 0.12);
  color: hsl(var(--brand-pink));
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
  border: 1px solid hsl(var(--brand-pink) / 0.25);
}
.why-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.why-card__head .why-card__icon { margin-bottom: 0; }
.why-card__socials {
  display: flex;
  align-items: center;
  gap: 10px;
}
.why-card__socials img {
  width: 22px; height: 22px;
  object-fit: contain;
  opacity: 0.85;
}
.why-card__title {
  font-size: 22px;
  font-weight: var(--weight-medium);
  letter-spacing: -0.015em;
  margin-bottom: 10px;
}
.why-card__body {
  font-size: 15px;
  line-height: 1.55;
  color: hsl(var(--muted-foreground));
  text-wrap: pretty;
}

/* ---------- FEATURE BLOCKS --------------------------------- */

.feature {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 80px;
  align-items: center;
}
.feature--reverse .feature__media { order: -1; }
@media (max-width: 960px) {
  .feature { grid-template-columns: 1fr; gap: 48px; }
  .feature--reverse .feature__media { order: 0; }
}
/* "We follow the data": head (eyebrow+title+subtitle), then the dashboard, then
   the bullets/CTA. Desktop keeps head+body in the left column with the dashboard
   spanning the right; on mobile the dashboard sits right under the subtitle. */
.feature--data {
  grid-template-columns: 1.05fr 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "head media" "body media";
  column-gap: 80px;
  row-gap: 22px;
  align-items: start;
}
.feature--data .feature__head { grid-area: head; }
.feature--data .feature__media { grid-area: media; }
.feature--data .feature__body { grid-area: body; }
@media (max-width: 960px) {
  .feature--data {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: "head" "media" "body";
    row-gap: 28px;
  }
}

.feature__title { margin-top: 18px; }
.feature__lede {
  margin-top: 20px;
  font-size: 17px;
  color: hsl(var(--muted-foreground));
  line-height: 1.55;
  max-width: 52ch;
  text-wrap: pretty;
}
.feature__list {
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
  display: flex; flex-direction: column; gap: 14px;
}
.feature__list li {
  display: flex; gap: 12px;
  font-size: 15.5px;
  color: hsl(var(--foreground) / 0.85);
  line-height: 1.5;
}
.feature__list .check {
  flex: 0 0 22px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: hsl(var(--brand-pink) / 0.15);
  color: hsl(var(--brand-pink));
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.feature__cta { margin-top: 36px; }

/* Winners visual — single image from rowads brand library */
/* Winners visual — three phone cards: a "winning" hero flanked by two blurred candidates */
.winners-visual {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  aspect-ratio: 1 / 1.05;
  display: block;
}
.winners-visual__card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  aspect-ratio: 9 / 16;
  border-radius: 22px;
  overflow: hidden;
  background: hsl(0 0% 10%);
  box-shadow:
    0 30px 70px -28px hsl(0 0% 0% / 0.7),
    0 10px 30px -12px hsl(0 0% 0% / 0.55);
}
.winners-visual__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.winners-visual__card--side {
  width: 52%;
  opacity: 0.55;
  filter: blur(6px) saturate(0.85) brightness(0.85);
}
.winners-visual__card--left {
  transform: translate(-78%, -50%) rotate(-7deg);
  z-index: 1;
}
.winners-visual__card--right {
  transform: translate(-22%, -50%) rotate(7deg);
  z-index: 1;
}
.winners-visual__card--hero {
  transform: translate(-50%, -50%);
  z-index: 2;
  box-shadow:
    0 40px 90px -28px hsl(var(--brand-pink) / 0.45),
    0 18px 40px -12px hsl(0 0% 0% / 0.6);
}
.winners-visual__check {
  position: absolute;
  /* Sits on the top-right corner of the hero card (hero right edge at 80% of container) */
  top: -8%;
  right: 13%;
  width: 86px;
  height: 86px;
  display: block;
  z-index: 3;
  filter: drop-shadow(0 8px 20px hsl(var(--brand-pink) / 0.4));
}
.winners-visual__check svg {
  width: 100%;
  height: 100%;
  display: block;
}
@media (max-width: 600px) {
  .winners-visual { max-width: 380px; }
  .winners-visual__check { width: 64px; height: 64px; top: -7%; right: 11%; }
}

/* Phone-stack media for features */
.phone-stack {
  position: relative;
  height: 540px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.phone-stack .ad {
  position: absolute;
  width: 220px;
  box-shadow: 0 30px 80px -30px hsl(0 0% 0% / 0.7);
}
.phone-stack .ad:nth-child(1) {
  transform: translateX(-130px) translateY(-10px) rotate(-8deg);
  z-index: 1;
}
.phone-stack .ad:nth-child(2) {
  transform: translateX(0) translateY(10px) rotate(0deg);
  z-index: 3;
  width: 240px;
}
.phone-stack .ad:nth-child(3) {
  transform: translateX(130px) translateY(-10px) rotate(8deg);
  z-index: 1;
}
@media (max-width: 600px) {
  .phone-stack { height: 460px; }
  .phone-stack .ad { width: 170px; }
  .phone-stack .ad:nth-child(2) { width: 190px; }
  .phone-stack .ad:nth-child(1) { transform: translateX(-95px) translateY(-10px) rotate(-8deg); }
  .phone-stack .ad:nth-child(3) { transform: translateX(95px) translateY(-10px) rotate(8deg); }
}

/* Dashboard mock (for "We Follow the Data") */
.dashboard {
  position: relative;
  border-radius: var(--radius-xl);
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  padding: 18px;
  box-shadow: 0 30px 80px -30px hsl(0 0% 0% / 0.6);
  overflow: hidden;
}
.dashboard__chrome {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 14px;
}
.dashboard__chrome i {
  width: 10px; height: 10px; border-radius: 50%; background: hsl(var(--border));
}
.dashboard__chrome i:first-child { background: #ff5f57; }
.dashboard__chrome i:nth-child(2) { background: #febc2e; }
.dashboard__chrome i:nth-child(3) { background: #28c840; }
.dashboard__chrome span {
  margin-left: 12px;
  font-size: 12px;
  color: hsl(var(--muted-foreground));
}

.dash-tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid hsl(var(--border));
  padding-bottom: 12px;
  margin-bottom: 16px;
}
.dash-tab {
  font-size: 12px;
  padding: 6px 12px;
  color: hsl(var(--muted-foreground));
  border-radius: var(--radius-md);
}
.dash-tab.is-active {
  color: white;
  background: hsl(var(--brand-pink) / 0.15);
  color: hsl(var(--brand-pink));
}

.dash-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.dash-kpi {
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  padding: 12px 14px;
}
.dash-kpi__label {
  font-size: 11px;
  color: hsl(var(--muted-foreground));
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.dash-kpi__value {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.dash-kpi__delta {
  font-size: 11px;
  color: #34d399;
  margin-top: 2px;
}
.dash-kpi__delta.is-down { color: hsl(var(--brand-pink)); }

.dash-chart {
  height: 160px;
  position: relative;
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  padding: 14px;
  overflow: hidden;
}
.dash-chart svg { width: 100%; height: 100%; }

.dash-rows {
  margin-top: 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.dash-row {
  display: grid;
  grid-template-columns: 90px 1fr 60px;
  gap: 10px;
  align-items: center;
  font-size: 12px;
}
.dash-row__name { color: hsl(var(--foreground)); }
.dash-row__bar {
  position: relative;
  height: 8px;
  background: hsl(var(--muted) / 0.4);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.dash-row__bar::after {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0;
  background: linear-gradient(90deg, hsl(var(--brand-pink)) 0%, hsl(var(--accent-violet)) 100%);
  border-radius: var(--radius-full);
  transition: width 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.dash-row__val {
  text-align: right;
  color: hsl(var(--muted-foreground));
  font-variant-numeric: tabular-nums;
}

/* ---------- DASHBOARD REVEAL ANIMATION --------------------- */
/* Triggered when initDashboardAnimation() adds .is-in as the panel scrolls
   into view: the line draws, the area + benchmark fade in, and the hook bars
   grow. KPI/row numbers count up via JS. */
.dash-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.4s ease 0.2s;
}
.dash-area,
.dash-bench,
.dash-dots {
  opacity: 0;
  transition: opacity 1.1s ease;
}
.dash-area { transition-delay: 0.8s; }
.dash-bench { transition-delay: 0.5s; }
.dash-dots { transition-delay: 2s; }

.dashboard.is-in .dash-line { stroke-dashoffset: 0; }
.dashboard.is-in .dash-area,
.dashboard.is-in .dash-bench,
.dashboard.is-in .dash-dots { opacity: 1; }
.dashboard.is-in .dash-row__bar::after { width: var(--w, 50%); }
.dashboard.is-in .dash-row:nth-child(1) .dash-row__bar::after { transition-delay: 0.25s; }
.dashboard.is-in .dash-row:nth-child(2) .dash-row__bar::after { transition-delay: 0.45s; }
.dashboard.is-in .dash-row:nth-child(3) .dash-row__bar::after { transition-delay: 0.65s; }
.dashboard.is-in .dash-row:nth-child(4) .dash-row__bar::after { transition-delay: 0.85s; }

@media (prefers-reduced-motion: reduce) {
  .dash-line { transition: none; }
  .dash-area, .dash-bench, .dash-dots { transition: none; }
  .dash-row__bar::after { transition: none; }
}

/* ---------- CATEGORIES MARQUEE ----------------------------- */

.categories {
  border-top: 1px solid hsl(var(--border) / 0.5);
  padding: 90px 0;
  overflow: hidden;
}
.cat-strip {
  display: flex;
  gap: 56px;
  align-items: center;
  width: max-content;
  animation: marquee 40s linear infinite;
}
.cat-strip__item {
  display: inline-flex;
  align-items: center;
  gap: 56px;
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: -0.025em;
  font-weight: 500;
}
.cat-strip__item .we-create {
  color: hsl(var(--brand-pink));
  font-style: italic;
  font-weight: 500;
}
.cat-strip__item .sep {
  display: inline-block;
  width: 8px; height: 8px;
  background: hsl(var(--muted-foreground));
  border-radius: 50%;
  flex: 0 0 auto;
}
.cat-strip__item .muted { color: hsl(var(--muted-foreground)); }

/* ---------- HOW IT WORKS ----------------------------------- */

.how__head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; }
@media (max-width: 800px) { .how__head { grid-template-columns: 1fr; } }
.how__steps {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  position: relative;
}
@media (max-width: 1000px) { .how__steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .how__steps { grid-template-columns: 1fr; } }

.step {
  position: relative;
  padding: 28px 24px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-xl);
  transition: border-color var(--dur-base) var(--ease-out);
}
.step:hover { border-color: hsl(var(--brand-pink) / 0.45); }
.step__num {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: hsl(var(--brand-pink));
  margin-bottom: 18px;
}
.step__title {
  font-size: 19px;
  font-weight: var(--weight-medium);
  letter-spacing: -0.015em;
  margin-bottom: 10px;
  line-height: 1.25;
}
.step__body {
  font-size: 13.5px;
  color: hsl(var(--muted-foreground));
  line-height: 1.55;
}

/* ---------- CASE STUDIES ----------------------------------- */

.cases__grid {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 960px) { .cases__grid { grid-template-columns: 1fr; } }
.case {
  position: relative;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.case__cover {
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
}
.case__cover .ad__bg::after {
  background-image:
    radial-gradient(circle at 30% 20%, hsl(0 0% 100% / 0.15) 0%, transparent 40%),
    radial-gradient(circle at 80% 90%, hsl(0 0% 0% / 0.5) 0%, transparent 50%);
}
.case__cover-text {
  position: absolute;
  inset: auto 24px 24px 24px;
  color: white;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.015em;
  text-shadow: 0 2px 12px hsl(0 0% 0% / 0.6);
}
.case__meta {
  position: absolute;
  top: 18px; left: 18px;
  display: flex; gap: 8px;
}
.case__meta .tag {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  background: hsl(0 0% 0% / 0.55);
  backdrop-filter: blur(8px);
  border: 1px solid hsl(0 0% 100% / 0.18);
  color: white;
  border-radius: var(--radius-full);
  letter-spacing: 0.02em;
}
.case__body { padding: 24px; }
.case__title {
  font-size: 20px;
  font-weight: var(--weight-medium);
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin-bottom: 12px;
}
.case__desc {
  font-size: 14px;
  color: hsl(var(--muted-foreground));
  line-height: 1.55;
  margin-bottom: 20px;
}
.case__results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid hsl(var(--border));
}
.case__results div { display: flex; flex-direction: column; gap: 2px; }
.case__results .label {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}
.case__results .val {
  font-size: 13.5px;
  font-weight: 500;
  color: hsl(var(--foreground));
}
.case__results .val--win { color: hsl(var(--brand-pink)); }

/* ---------- TESTIMONIALS ----------------------------------- */

.tmls {
  position: relative;
  margin-top: 56px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
}
.tmls__track {
  display: flex; gap: 18px;
  width: max-content;
  animation: tml-marquee 50s linear infinite;
}
/* Track holds three copies, so one-third translate loops seamlessly. */
@keyframes tml-marquee { from { transform: translateX(0); } to { transform: translateX(-33.3333%); } }
.tmls:hover .tmls__track { animation-play-state: paused; }

.tml {
  flex: 0 0 auto;
  width: 420px;
  padding: 28px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-xl);
  display: flex; flex-direction: column;
  min-height: 240px;
}
.tml__quote {
  font-size: 16px;
  line-height: 1.5;
  color: hsl(var(--foreground) / 0.92);
  text-wrap: pretty;
  letter-spacing: -0.005em;
  flex: 1;
}
.tml__author {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid hsl(var(--border));
}
.tml__avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700;
  color: white;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
}
.tml__name { font-size: 15px; font-weight: var(--weight-medium); }
.tml__role { font-size: 13px; color: hsl(var(--muted-foreground)); margin-top: 1px; }

/* Nav arrows: outlined circles, shown above the cards on the mobile carousel. */
.tmls__nav-row { display: none; }
.tmls__nav {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid hsl(0 0% 100% / 0.4);
  color: hsl(0 0% 100% / 0.85);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.tmls__nav svg { width: 16px; height: 16px; }
.tmls__nav:hover { border-color: hsl(0 0% 100% / 0.9); color: white; }
.tmls__nav:active { transform: scale(0.93); }

@media (max-width: 700px) {
  /* Arrows sit above the cards (in the header), aligned to the right. */
  .tmls__nav-row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }

  /* Marquee -> swipeable, infinite snap carousel (one card per view). */
  .tmls { mask-image: none; -webkit-mask-image: none; margin-top: 24px; }
  .tmls__track {
    animation: none;
    width: auto;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 5vw;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 11vw 4px 5vw;
  }
  .tmls__track::-webkit-scrollbar { display: none; }
  .tml {
    width: 84vw;
    max-width: 360px;
    min-height: 0;
    scroll-snap-align: start;
  }
}

/* ---------- PLATFORMS -------------------------------------- */

.platforms {
  border-top: 1px solid hsl(var(--border) / 0.5);
}
.platforms__grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
@media (max-width: 900px) { .platforms__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 500px) { .platforms__grid { grid-template-columns: repeat(2, 1fr); } }

.platform {
  aspect-ratio: 1;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-xl);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px;
  transition: border-color var(--dur-base), background var(--dur-base);
  cursor: default;
}
.platform:hover {
  border-color: hsl(var(--brand-pink) / 0.45);
  background: hsl(var(--card));
}
.platform__icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
}
.platform__logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  display: block;
}
.platform__name { font-size: 13px; color: hsl(var(--muted-foreground)); }

/* ---------- CONTACT FORM ----------------------------------- */

.contact {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, hsl(var(--brand-pink) / 0.10) 0%, transparent 60%),
    hsl(0 0% 4%);
  border-top: 1px solid hsl(var(--border) / 0.5);
  border-bottom: 1px solid hsl(var(--border) / 0.5);
}
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 960px) { .contact__grid { grid-template-columns: 1fr; gap: 40px; } }

.contact__copy .lede { margin-top: 24px; }

.contact__form {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-xl);
  padding: 32px;
}
.form-row {
  display: grid; gap: 12px;
}
.form-row + .form-row { margin-top: 16px; }
.form-row--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) { .form-row--2 { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-size: 12px;
  font-weight: var(--weight-medium);
  color: hsl(var(--muted-foreground));
  letter-spacing: 0.01em;
}
.field label .req { color: hsl(var(--brand-pink)); }

.input, select, textarea {
  font-family: var(--font-sans);
  font-size: 14px;
  height: 42px;
  padding: 0 14px;
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
  color: hsl(var(--foreground));
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
textarea { height: 110px; padding: 12px 14px; resize: vertical; }
.input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: hsl(var(--brand-pink) / 0.7);
  box-shadow: 0 0 0 3px hsl(var(--brand-pink) / 0.18);
}
select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-full);
  color: hsl(var(--muted-foreground));
  background: hsl(var(--background));
  cursor: pointer;
  transition: all var(--dur-fast);
  user-select: none;
}
.chip:hover { color: hsl(var(--foreground)); border-color: hsl(var(--foreground) / 0.3); }
.chip.is-active {
  background: hsl(var(--brand-pink) / 0.12);
  border-color: hsl(var(--brand-pink) / 0.6);
  color: hsl(var(--brand-pink));
}
.chip input { display: none; }

.form-submit {
  margin-top: 24px;
  display: flex; justify-content: flex-end; align-items: center; gap: 16px;
}
.form-meta {
  font-size: 12px;
  color: hsl(var(--muted-foreground));
  margin-right: auto;
}

/* ---------- FAQ ------------------------------------------- */

.faq__list {
  margin-top: 56px;
  border-top: 1px solid hsl(var(--border));
}
.faq__item {
  border-bottom: 1px solid hsl(var(--border));
}
.faq__q {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  text-align: left;
  font-family: inherit;
  font-size: 18px;
  font-weight: var(--weight-medium);
  letter-spacing: -0.015em;
  color: hsl(var(--foreground));
  transition: color var(--dur-fast);
}
.faq__q:hover { color: hsl(var(--brand-pink)); }
.faq__icon {
  flex: 0 0 28px;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid hsl(var(--border));
  display: inline-flex; align-items: center; justify-content: center;
  color: hsl(var(--muted-foreground));
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-base), color var(--dur-base), border-color var(--dur-base);
}
.faq__item.is-open .faq__icon {
  transform: rotate(45deg);
  background: hsl(var(--brand-pink));
  color: white;
  border-color: hsl(var(--brand-pink));
}
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-out);
}
.faq__a > div { overflow: hidden; }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a p {
  margin: 0 0 24px 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: hsl(var(--muted-foreground));
  max-width: 80ch;
  text-wrap: pretty;
}

/* ---------- HERO — page variants --------------------------- */
.hero--brand .hero__title em {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: hsl(var(--brand-pink));
}
.hero--brand .hero__bg--brand {
  background:
    radial-gradient(ellipse 65% 50% at 30% 0%, hsl(var(--accent-violet) / 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 50% 45% at 75% 15%, hsl(var(--brand-pink) / 0.15) 0%, transparent 60%),
    linear-gradient(180deg, hsl(0 0% 5%) 0%, hsl(0 0% 3.5%) 100%);
}
.hero--work {
  padding-top: 130px;
  padding-bottom: 60px;
}
.hero--work .hero__bg--work {
  background:
    radial-gradient(ellipse 50% 40% at 50% 0%, hsl(var(--brand-pink) / 0.10) 0%, transparent 60%),
    linear-gradient(180deg, hsl(0 0% 5%) 0%, hsl(0 0% 3.5%) 100%);
}

/* When work renders as its own page, give the grid more breathing room */
.work--page .work__filters { margin-top: 0; }
.work--page .work__grid { margin-top: 48px; }

/* Work bottom CTA */
.work__cta {
  margin-top: 64px;
  padding: 28px 40px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.work__cta p {
  margin: 0;
  font-size: 15px;
  color: hsl(var(--foreground) / 0.9);
}
@media (max-width: 720px) {
  .work__cta { flex-direction: column; align-items: flex-start; padding: 24px; }
}


/* ---------- DEDICATED VIDEO SECTION (Brand page) ----------- */
.vsection {
  padding: 80px 0 100px;
  background: hsl(0 0% 3.5%);
}
.vsection__head {
  max-width: 720px;
  margin: 0 auto 40px;
  text-align: center;
}
.vsection__frame {
  max-width: 1080px;
  margin: 0 auto;
  position: relative;
}
.vsection__poster {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-xl);
  overflow: hidden;
  cursor: pointer;
  border: 1px solid hsl(var(--border));
  background: #0a0a0a;
  box-shadow: 0 30px 80px -20px hsl(0 0% 0% / 0.5);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.vsection__embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid hsl(var(--border));
  background: #0a0a0a;
  box-shadow: 0 30px 80px -20px hsl(0 0% 0% / 0.5);
}
.vsection__embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.vsection__embed video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vsection__poster:hover {
  transform: translateY(-2px);
  box-shadow: 0 36px 90px -20px hsl(var(--brand-pink) / 0.18),
              0 0 0 1px hsl(var(--brand-pink) / 0.25);
}
.vsection__poster-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 50% 40% at 30% 30%, hsl(var(--brand-pink) / 0.45) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 75% 70%, hsl(var(--accent-violet) / 0.4) 0%, transparent 60%),
    radial-gradient(ellipse 30% 30% at 50% 80%, hsl(217 91% 60% / 0.2) 0%, transparent 60%),
    linear-gradient(135deg, hsl(0 0% 8%) 0%, hsl(0 0% 3%) 100%);
}
.vsection__poster-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(hsl(0 0% 100% / 0.04) 1px, transparent 1px),
    linear-gradient(90deg, hsl(0 0% 100% / 0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, black 0%, transparent 80%);
}
.vsection__poster-tag {
  position: absolute;
  top: 20px; left: 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: hsl(0 0% 100% / 0.75);
  background: hsl(0 0% 0% / 0.5);
  padding: 5px 10px;
  border-radius: var(--radius-full);
  border: 1px solid hsl(0 0% 100% / 0.12);
}
.vsection__play {
  position: absolute;
  top: 50%; left: 50%;
  width: 88px; height: 88px;
  border-radius: 50%;
  background: hsl(var(--brand-pink));
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 6px;
  transform: translate(-50%, -50%);
  box-shadow: 0 12px 40px -8px hsl(var(--brand-pink) / 0.6),
              inset 0 1px 0 hsl(0 0% 100% / 0.2);
  transition: transform var(--dur-base) var(--ease-out);
}
.vsection__poster:hover .vsection__play {
  transform: translate(-50%, -50%) scale(1.08);
}
.vsection__poster-meta {
  position: absolute;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: hsl(0 0% 100% / 0.55);
  letter-spacing: 0.01em;
}

/* The brand page reuses .brand-section (not .brand which is page-level) */
.brand-section {
  position: relative;
}
.brand-section__head { max-width: 900px; }

/* ---------- THEY TRUST US — logo ticker -------------------- */

.trust {
  padding: 32px 0 48px;
  background: hsl(0 0% 4%);
  overflow: hidden;
}
.trust__head {
  text-align: center;
  margin-bottom: 20px;
}
.trust__ticker {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.trust__track {
  display: flex;
  align-items: center;
  gap: 40px;
  width: max-content;
  animation: marquee 60s linear infinite;
}
.trust__track--b {
  animation: marquee 50s linear infinite reverse;
}
.trust__ticker:hover .trust__track { animation-play-state: paused; }
.trust-slot {
  flex: 0 0 auto;
  width: 180px;
  height: 72px;
  border: 1px dashed hsl(var(--border));
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsl(var(--card) / 0.4);
  transition: border-color var(--dur-base), background var(--dur-base);
}
.trust-slot:hover {
  border-color: hsl(var(--brand-pink) / 0.4);
  background: hsl(var(--card) / 0.8);
}
.trust-slot__placeholder {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: hsl(var(--muted-foreground) / 0.7);
  text-transform: uppercase;
}

/* Real logo variant — drop placeholder chrome */
.trust-slot--filled {
  border: none;
  background: transparent;
  width: auto;
  min-width: 120px;
  padding: 0 12px;
}
.trust-slot--filled:hover { background: transparent; }
.trust-slot__logo {
  max-height: 32px;
  max-width: 160px;
  width: auto;
  height: auto;
  opacity: 0.78;
  filter: grayscale(1);
  transition: opacity var(--dur-base), filter var(--dur-base);
}
.trust-slot--filled:hover .trust-slot__logo {
  opacity: 1;
  filter: grayscale(0);
}
@media (max-width: 700px) {
  .trust-slot--filled { min-width: 96px; padding: 0 8px; }
  .trust-slot__logo { max-height: 24px; max-width: 120px; }
}
@media (max-width: 700px) {
  .trust-slot { width: 140px; height: 60px; }
  .trust__track { gap: 24px; }
}

/* ---------- BRAND CONTENT SOLUTIONS ------------------------ */

.brand {
  position: relative;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, hsl(var(--accent-violet) / 0.08) 0%, transparent 60%),
    hsl(0 0% 4%);
  border-top: 1px solid hsl(var(--border) / 0.5);
  overflow: hidden;
}
.brand__rule {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    hsl(var(--brand-pink) / 0.5) 25%,
    hsl(var(--accent-violet) / 0.5) 75%,
    transparent 100%);
}

.brand__head { max-width: 900px; }

.pillars {
  margin-top: 72px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 900px) and (min-width: 701px) { .pillars { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  /* Phone: the four pillars become a swipeable carousel. */
  .pillars {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 5%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-top: 44px;
  }
  .pillars::-webkit-scrollbar { display: none; }
  .pillars > .pillar { flex: 0 0 86%; scroll-snap-align: start; }
  .pillars::before { content: ''; flex: 0 0 calc(5% - 16px); }
  .pillars::after  { content: ''; flex: 0 0 calc(9% - 16px); }
}

.pillar {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--dur-base) var(--ease-out);
}
.pillar:hover {
  border-color: hsl(var(--brand-pink) / 0.4);
}
.pillar__visual {
  position: relative;
  aspect-ratio: 16 / 9;
  background: hsl(0 0% 6%);
  overflow: hidden;
  isolation: isolate;
}
.pillar__body {
  padding: 28px 32px 32px;
  position: relative;
}
.pillar__num {
  position: absolute;
  top: 28px; right: 32px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: hsl(var(--muted-foreground));
  font-variant-numeric: tabular-nums;
}
.pillar__title {
  font-size: 26px;
  font-weight: var(--weight-medium);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  line-height: 1.15;
}
.pillar__desc {
  font-size: 15px;
  line-height: 1.55;
  color: hsl(var(--muted-foreground));
  margin: 0 0 22px;
  text-wrap: pretty;
  max-width: 52ch;
}
.pillar__list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}
@media (max-width: 480px) { .pillar__list { grid-template-columns: 1fr; } }
.pillar__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: hsl(var(--foreground) / 0.9);
  line-height: 1.35;
}
.dotmark {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: hsl(var(--brand-pink));
  flex: 0 0 5px;
}

/* Pillar 01 — Brand Film visual */
.pillar__visual--film {
  background: radial-gradient(ellipse 80% 60% at 50% 50%, hsl(338 30% 12%) 0%, hsl(0 0% 4%) 80%);
}
.film-bar {
  position: absolute;
  left: 0; right: 0;
  height: 10%;
  background: #000;
  z-index: 2;
}
.film-bar--top { top: 0; }
.film-bar--bot { bottom: 0; }
.film-still {
  position: absolute;
  inset: 10% 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Real beauty-shot frame behind the play button, dimmed so the controls read. */
  background:
    linear-gradient(180deg,
      hsl(240 10% 4% / 0.22) 0%, hsl(240 10% 4% / 0.12) 45%, hsl(240 10% 4% / 0.6) 100%),
    url("../assets/brand/keyviz-force.jpg") center / cover no-repeat,
    hsl(0 0% 6%);
}
.film-play {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: hsl(0 0% 100% / 0.12);
  backdrop-filter: blur(8px);
  border: 1px solid hsl(0 0% 100% / 0.25);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 4px;
}
.film-timecode {
  position: absolute;
  bottom: 12px; left: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: hsl(0 0% 100% / 0.6);
  z-index: 3;
}

/* Pillar 02 — AI Storytelling visual */
.pillar__visual--story {
  background: linear-gradient(135deg, hsl(270 30% 10%) 0%, hsl(0 0% 5%) 100%);
  padding: 12%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Media Amplification: the social channels we push content across, as a
   gently floating cluster of logo chips. */
.social-cloud {
  display: grid;
  grid-template-columns: repeat(3, auto);
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2.4vw, 22px);
}
.social-chip {
  width: clamp(60px, 11vw, 86px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: hsl(0 0% 100% / 0.06);
  border: 1px solid hsl(0 0% 100% / 0.12);
  box-shadow:
    0 10px 26px -12px hsl(0 0% 0% / 0.7),
    inset 0 1px 0 hsl(0 0% 100% / 0.08);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  animation: social-float 6s ease-in-out infinite;
}
.social-chip img {
  width: 54%;
  height: 54%;
  object-fit: contain;
  display: block;
}
.social-chip:nth-child(1) { animation-delay: -0.2s; }
.social-chip:nth-child(2) { animation-delay: -1.2s; }
.social-chip:nth-child(3) { animation-delay: -2.2s; }
.social-chip:nth-child(4) { animation-delay: -3.2s; }
.social-chip:nth-child(5) { animation-delay: -4.2s; }
.social-chip:nth-child(6) { animation-delay: -5.2s; }
@keyframes social-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .social-chip { animation: none; }
}
.story-badge {
  position: absolute;
  top: 12px; right: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: hsl(0 0% 100% / 0.7);
  background: hsl(0 0% 0% / 0.5);
  padding: 4px 8px;
  border-radius: var(--radius-full);
  border: 1px solid hsl(0 0% 100% / 0.1);
  z-index: 3;
}

/* Pillar 03 — Key Visual: a triptych of three Bravo Sierra shots (side by side
   as one image) crossfading with the standing-bottles shot on a smooth 5s loop.
   Strong top/bottom scrim (the shots are light) keeps the overline + headline
   legible. */
.pillar__visual--keyviz { background: #0a0a0a; }
.keyviz-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.keyviz-slide {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  animation: keyviz-fade 5s ease-in-out infinite;
}
/* Slide A — the three shots side by side as one image. */
.keyviz-slide--trio { display: flex; animation-delay: 0s; }
.keyviz-trio__cell {
  flex: 1;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.keyviz-trio__cell--1 { background-image: url("../assets/brand/keyviz-bs-side.jpg"); }
.keyviz-trio__cell--2 { background-image: url("../assets/brand/keyviz-bs-1.jpg"); }
.keyviz-trio__cell--3 { background-image: url("../assets/brand/keyviz-bs-right.jpg"); }
/* Slide B — the original standing-bottles shot. */
.keyviz-slide--single {
  background-image: url("../assets/brand/keyviz-bottles.jpg");
  animation-delay: -2.5s;
}
.keyviz-slides::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    hsl(240 10% 4% / 0.62) 0%, hsl(240 10% 4% / 0.18) 30%,
    hsl(240 10% 4% / 0.34) 58%, hsl(240 10% 4% / 0.9) 100%);
}
@keyframes keyviz-fade {
  0%, 42%  { opacity: 1; }
  50%, 92% { opacity: 0; }
  100%     { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .keyviz-slide { animation: none; }
  .keyviz-slide--trio { opacity: 1; }
}
.keyviz {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: white;
}
.keyviz__overline {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: hsl(0 0% 100% / 0.6);
}
.keyviz__big {
  font-size: clamp(28px, 4.5vw, 44px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.9;
  text-wrap: balance;
}
.keyviz__big em {
  font-style: italic;
  font-weight: 500;
  color: hsl(var(--brand-pink));
}
.keyviz__meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: hsl(0 0% 100% / 0.55);
  align-self: flex-end;
}

/* Pillar 04 — Content Engine */
.pillar__visual--engine {
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, hsl(217 40% 12%) 0%, hsl(0 0% 4%) 80%);
  padding: 0;
  isolation: isolate;
}
/* subtle grid backdrop */
.pillar__visual--engine::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(hsl(0 0% 100% / 0.035) 1px, transparent 1px),
    linear-gradient(90deg, hsl(0 0% 100% / 0.035) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 0%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 0%, transparent 90%);
  z-index: 0;
}
.engine-flow {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.engine-flow__edges {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* Node card */
.enode {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 132px;            /* uniform width for the 4 left nodes */
  box-sizing: border-box;
  min-width: 0;
  padding: 8px 10px 9px;
  border-radius: 10px;
  background: hsl(0 0% 8% / 0.92);
  border: 1px solid hsl(0 0% 100% / 0.1);
  backdrop-filter: blur(8px);
  box-shadow:
    0 12px 24px -10px hsl(0 0% 0% / 0.6),
    inset 0 1px 0 hsl(0 0% 100% / 0.05);
  z-index: 2;
}
.enode--in {
  background: linear-gradient(135deg, hsl(338 60% 16% / 0.95), hsl(0 0% 7% / 0.95));
  border-color: hsl(var(--brand-pink) / 0.35);
}
.enode__head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}
.enode__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: hsl(var(--brand-pink));
  box-shadow: 0 0 8px currentColor;
  color: hsl(var(--brand-pink));
}
.enode__dot--pink { background: hsl(338 91% 55%); color: hsl(338 91% 55%); }
.enode__dot--violet { background: hsl(270 70% 65%); color: hsl(270 70% 65%); }
.enode__dot--cyan { background: hsl(190 80% 60%); color: hsl(190 80% 60%); }
.enode__type {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.12em;
  color: hsl(0 0% 100% / 0.55);
}
.enode__title {
  font-size: 11.5px;
  font-weight: 500;
  color: hsl(0 0% 98%);
  line-height: 1.15;
}
.enode__sub {
  margin-top: 2px;
  font-size: 9.5px;
  color: hsl(0 0% 100% / 0.45);
}
/* Output tile */
.eout {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--c1, #ED1165), var(--c2, #4a0820));
  border: 1px solid hsl(0 0% 100% / 0.12);
  box-shadow:
    0 10px 22px -8px hsl(0 0% 0% / 0.7),
    inset 0 1px 0 hsl(0 0% 100% / 0.1);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 5px 6px;
  z-index: 2;
}
.eout::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 30%, hsl(0 0% 100% / 0.18) 0%, transparent 60%);
}
.eout__label {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 9px;
  color: hsl(0 0% 100% / 0.9);
  letter-spacing: 0.04em;
}

@media (max-width: 760px) {
  .enode { min-width: 92px; padding: 6px 8px 7px; }
  .enode__title { font-size: 10.5px; }
  .enode__sub { font-size: 8.5px; }
  .enode__type { font-size: 7.5px; }
  .eout { width: 40px; height: 40px; }
}

@keyframes enginePulse {
  0%, 100% { opacity: 0.4; transform: scale(0.95); }
  50%      { opacity: 0.8; transform: scale(1.05); }
}
.engine-pulse {
  position: absolute;
  top: 16px; left: 16px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: hsl(160 60% 55%);
  box-shadow: 0 0 12px hsl(160 60% 55% / 0.8);
  animation: enginePulse 2s var(--ease-out) infinite;
  z-index: 3;
}
.engine-badge {
  position: absolute;
  bottom: 16px; right: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: hsl(0 0% 100% / 0.7);
  background: hsl(0 0% 0% / 0.5);
  padding: 4px 8px;
  border-radius: var(--radius-full);
  border: 1px solid hsl(0 0% 100% / 0.1);
  z-index: 3;
}

/* Brand bottom CTA */
.brand__cta {
  margin-top: 56px;
  padding: 32px 40px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
@media (max-width: 760px) {
  .brand__cta { flex-direction: column; align-items: flex-start; padding: 28px; }
}
.brand__cta-copy p {
  margin: 0;
  font-size: 15px;
  color: hsl(var(--foreground) / 0.9);
  max-width: 60ch;
}

/* ---------- WORK ------------------------------------------- */

.work {
  border-top: 1px solid hsl(var(--border) / 0.5);
}
.work__head { max-width: 820px; }

.work__filters {
  margin-top: 56px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 32px;
  border-bottom: 1px solid hsl(var(--border));
}
.wfilter {
  display: inline-flex;
  align-items: center;
  font-family: inherit;
  font-size: 13px;
  font-weight: var(--weight-medium);
  padding: 8px 16px;
  background: transparent;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-full);
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: all var(--dur-fast);
}
.wfilter:hover {
  color: hsl(var(--foreground));
  border-color: hsl(var(--foreground) / 0.3);
}
.wfilter.is-active {
  background: hsl(var(--brand-pink));
  border-color: hsl(var(--brand-pink));
  color: white;
}

.work__grid {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-flow: dense;
  gap: 16px;
}
@media (max-width: 900px) { .work__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .work__grid { grid-template-columns: repeat(2, 1fr); } }

.witem {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base);
}
.witem:hover { border-color: hsl(var(--brand-pink) / 0.4); }
.witem:hover .witem__overlay { opacity: 1; }
.witem.is-hidden { display: none; }

/* sizes */
.witem--1x1 { grid-column: span 2; aspect-ratio: 1; }
.witem--2x1 { grid-column: span 3; aspect-ratio: 16 / 9; }
.witem--1x2 { grid-column: span 2; aspect-ratio: 9 / 16; }
.witem--3x1 { grid-column: span 4; aspect-ratio: 16 / 9; }
@media (max-width: 900px) {
  .witem--2x1 { grid-column: span 2; }
  .witem--3x1 { grid-column: span 4; aspect-ratio: 16 / 10; }
}
@media (max-width: 560px) {
  .witem--2x1, .witem--3x1 { grid-column: span 2; aspect-ratio: 16 / 10; }
  .witem--1x2 { grid-column: span 1; }
  .witem--1x1 { grid-column: span 1; }
}

.witem__bg {
  position: absolute; inset: 0;
}
.witem__bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 20%, hsl(0 0% 100% / 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 90%, hsl(0 0% 0% / 0.4) 0%, transparent 60%),
    linear-gradient(180deg, transparent 50%, hsl(0 0% 0% / 0.5) 100%);
}
.witem__type {
  position: absolute;
  top: 12px; left: 12px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 5px 10px;
  background: hsl(0 0% 0% / 0.55);
  backdrop-filter: blur(8px);
  border: 1px solid hsl(0 0% 100% / 0.15);
  color: white;
  border-radius: var(--radius-full);
  z-index: 2;
}
.witem__meta {
  position: absolute;
  inset: auto 14px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 2;
  gap: 12px;
}
.witem__brand {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: white;
  text-shadow: 0 1px 4px hsl(0 0% 0% / 0.6);
}
.witem__dur {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: hsl(0 0% 100% / 0.8);
}
.witem__overlay {
  position: absolute;
  inset: 0;
  background: hsl(0 0% 0% / 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  z-index: 3;
}
.witem__play {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: hsl(0 0% 100% / 0.95);
  color: hsl(0 0% 0%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 3px;
}

/* Clients */
.clients {
  margin-top: 80px;
  padding-top: 56px;
  border-top: 1px solid hsl(var(--border));
}
.clients .hero__experts-label {
  display: block;
  text-align: center;
  margin-bottom: 28px;
}
.client-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 32px;
  max-width: 980px;
  margin: 0 auto;
}
.client-strip span {
  font-size: 18px;
  font-weight: var(--weight-medium);
  letter-spacing: -0.02em;
  color: hsl(var(--foreground) / 0.55);
  padding: 6px 0;
  transition: color var(--dur-base);
}
.client-strip span:hover {
  color: hsl(var(--foreground));
}
.client-strip .client-dot {
  width: 4px; height: 4px;
  background: hsl(var(--muted-foreground) / 0.6);
  border-radius: 50%;
  font-size: 0;
}

/* ---------- LEGAL PAGES ------------------------------------ */

.legal {
  padding: 130px 0 80px;
  max-width: 820px;
  margin: 0 auto;
}
.legal__head { margin-bottom: 48px; }
.legal__head h1 {
  font-size: clamp(36px, 5vw, 56px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  font-weight: 500;
  margin: 16px 0 12px;
}
.legal__updated {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: hsl(var(--muted-foreground));
}
.legal__body h4 {
  font-size: 18px;
  font-weight: var(--weight-medium);
  letter-spacing: -0.01em;
  margin: 40px 0 16px;
  color: hsl(var(--foreground));
}
.legal__body p,
.legal__body li {
  font-size: 15px;
  line-height: 1.65;
  color: hsl(var(--foreground) / 0.82);
  margin: 0 0 14px;
  text-wrap: pretty;
}
.legal__body ul {
  margin: 0 0 14px;
  padding-left: 22px;
}
.legal__body li { margin-bottom: 8px; }
.legal__body a {
  color: hsl(var(--brand-pink));
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal__body a:hover { color: hsl(var(--brand-pink-hover)); }

/* ---------- FOOTER ----------------------------------------- */

.foot {
  padding: 80px 0 40px;
  background: hsl(0 0% 3%);
}
.foot__top {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 48px;
}
@media (max-width: 800px) { .foot__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .foot__top { grid-template-columns: 1fr; } }
.foot__brand {
  display: flex; align-items: center; gap: 10px;
  font-size: 17px; font-weight: 600; margin-bottom: 16px;
}
.foot__brand svg { width: 28px; height: 28px; }
.foot__copy { font-size: 14px; color: hsl(var(--muted-foreground)); max-width: 38ch; line-height: 1.55; }
.foot__col h4 {
  font-size: 12px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  margin-bottom: 16px;
}
.foot__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.foot__col a {
  font-size: 14px; color: hsl(var(--foreground) / 0.8);
  transition: color var(--dur-fast);
}
.foot__col a:hover { color: hsl(var(--brand-pink)); }

.foot__bottom {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid hsl(var(--border));
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: 12px;
  font-size: 12.5px;
  color: hsl(var(--muted-foreground));
}
.foot__bottom .links { display: flex; gap: 20px; }

/* ---------- BIG WORDMARK ----------------------------------- */
.bigmark {
  padding: 80px 0 0;
  overflow: hidden;
  position: relative;
}
.bigmark__word {
  font-size: clamp(80px, 22vw, 320px);
  letter-spacing: -0.04em;
  font-weight: 600;
  line-height: 0.9;
  background: linear-gradient(180deg, hsl(var(--foreground) / 0.25) 0%, hsl(var(--foreground) / 0.02) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-align: center;
  user-select: none;
  margin: 0;
  padding-bottom: 12px;
}

/* ---------- FADE-IN ON SCROLL ------------------------------ */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Version badge — small fixed pill in the top-right corner so Guillaume can
   tell PL's version of the site rework apart from Sylvie's. Remove when no
   longer needed. */
.version-tag {
  position: fixed;
  top: 14px;
  right: 64px;
  z-index: 200;
  padding: 6px 13px;
  background: hsl(var(--brand-pink));
  color: white;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  border-radius: var(--radius-full);
  box-shadow:
    0 6px 22px hsl(var(--brand-pink) / 0.4),
    inset 0 1px 0 hsl(0 0% 100% / 0.22);
  pointer-events: none;
  user-select: none;
}


/* ============================================================
   MOBILE-FIRST ADDITIONS
============================================================ */

/* #1 — Hero reel carousel (Performance): a horizontal row of portrait
   showreels scrolling right-to-left behind the title. Cards randomly flip
   in 3D to play a different reel on the back. Built by initHeroReelCarousel(). */
.hero__reels {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  display: flex;
  align-items: center;
}
/* Darkening behind the centered title for legibility (no side-edge shading). */
.hero__reels::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(ellipse 56% 72% at center,
      hsl(240 8% 5% / 0.8) 0%, hsl(240 8% 5% / 0.42) 48%, transparent 78%);
}
.hero__reel-track {
  display: flex;
  align-items: center;
  gap: 3px;
  width: max-content;
  padding: 0 8px;
  will-change: transform;
  animation: hero-reel-marquee 95s linear infinite;
}
/* Track holds the reel set twice; -50% lands exactly on the second copy. */
@keyframes hero-reel-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.hero__reel-card {
  flex: 0 0 auto;
  width: clamp(350px, 35vw, 540px);
  aspect-ratio: 9 / 16;
  perspective: 1500px;
  opacity: 0.6;
}
.hero__reel-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.85s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero__reel-card.is-flipped .hero__reel-card__inner { transform: rotateY(180deg); }
.hero__flip-face {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border: 1px solid hsl(0 0% 100% / 0.07);
  box-shadow: 0 16px 36px -16px hsl(0 0% 0% / 0.7);
}
.hero__flip-face--back { transform: rotateY(180deg); }
/* Poster still underneath; the video fades in once it starts playing. */
.hero__flip-face img,
.hero__flip-face video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__flip-face video { opacity: 0; transition: opacity 0.45s ease; }
.hero__flip-face.is-live video { opacity: 1; }
@media (max-width: 860px) {
  .hero__reel-card { width: clamp(293px, 78vw, 450px); opacity: 0.42; }
  .hero__reel-track { gap: 0; }
  /* Sit the carousel just below the menu on phones — a touch below center,
     top clear of the nav and rounded bottoms above the clip edge. */
  .hero__reels { transform: translateY(2.5vh); }
  /* Lighter darkening shader over the videos on phones, and no side-edge
     darkening (drop the left/right linear-gradient entirely). */
  .hero__reels::after {
    background:
      radial-gradient(ellipse 56% 72% at center,
        hsl(240 8% 5% / 0.24) 0%, hsl(240 8% 5% / 0.1) 48%, transparent 78%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero__reel-track { animation: none; }
  .hero__reel-card__inner { transition: none; }
}

/* #2 — Engine-flow diagram: now that the pillars are a swipe carousel, the
   diagram must FIT inside its slide (no nested horizontal scroll). Keep it
   absolute/inset:0 so the percent-positioned nodes scale with the slide, and
   shrink the node cards so the 3-column pipeline fits without overlap. */
@media (max-width: 700px) {
  .pillar__visual--engine { overflow: hidden; }
  .pillar__visual--engine .enode {
    width: 82px;
    min-width: 0;
    padding: 4px 5px 5px;
    border-radius: 7px;
  }
  .pillar__visual--engine .enode__head { gap: 3px; }
  .pillar__visual--engine .enode__title { font-size: 7.5px; }
  .pillar__visual--engine .enode__sub { font-size: 6.5px; }
  .pillar__visual--engine .enode__type { font-size: 6px; }
  .pillar__visual--engine .enode__dot { width: 4px; height: 4px; }
  .pillar__visual--engine .eout { width: 26px; height: 26px; }
  .pillar__visual--engine .eout__label { font-size: 6.5px; }
  /* Drop the floating "Always-on · 80 assets / week" badge on phones. */
  .engine-badge { display: none; }
}

/* #3 — Contact modal: drop the copy/assurance column on phones and tighten
   spacing so the form fits without scrolling. */
@media (max-width: 600px) {
  .cmodal .contact__copy .lede,
  .cmodal .cmodal__assurance { display: none; }
  .cmodal .contact__copy .h-section,
  .cmodal__chooser-title { font-size: 24px !important; margin-top: 0 !important; }
  .cmodal__frame { padding: 22px 18px; }
  .cmodal .contact__grid { gap: 16px; }
  .cmodal .form-row { margin-bottom: 10px; }
  .cmodal .field label { margin-bottom: 4px; }
  .cmodal .field textarea { min-height: 56px; }
  .cmodal .form-submit { margin-top: 6px; }
}

/* Mobile: hide the hero social bubbles entirely (cleaner on phones, where the
   showreel carousel already fills the background). */
@media (max-width: 860px) {
  .hero__title-orbit .orbit__anchor { display: none; }
}
@keyframes orbit-spin {
  from { transform: rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a))); }
  to   { transform: rotate(calc(var(--a) + 360deg)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * (var(--a) + 360deg))); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__title-orbit .orbit__anchor { animation: none !important; }
}

/* ============================================================
   PERFORMANCE PAGE — mobile-first refinements
   Tighter vertical rhythm, edge padding, and a dashboard mock
   that reads cleanly on a phone. Foundations (.section/.container)
   are shared, so these help every page on small screens.
============================================================ */
@media (max-width: 600px) {
  .container { padding: 0 18px; }
  .section { padding: 64px 0; }
  .section--tight { padding: 52px 0; }
  .vsection { padding: 56px 0 64px; }
  .vsection__head { margin-bottom: 26px; }
  .feature { gap: 40px; }
  .feature__lede { font-size: 16px; }

  /* Hero CTAs: stack, but size each button to its label (centered) rather
     than stretching full-width, which read as too wide. */
  .hero__actions { flex-direction: column; align-items: center; gap: 10px; }
  .hero__actions .btn { width: auto; }

  /* Performance hero "Watch our video pitch" → just "Our pitch" on phones. */
  .btn--video .btn__label-full { display: none; }
  .btn--video .btn__label-short { display: inline; }

  /* Dashboard mock — shrink chrome so the KPIs/rows fit a phone. */
  .dashboard { padding: 14px; }
  .dash-tabs { gap: 2px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dash-tab { padding: 6px 9px; font-size: 11px; white-space: nowrap; }
  .dash-kpis { gap: 8px; }
  .dash-kpi { padding: 9px 10px; }
  .dash-kpi__value { font-size: 17px; }
  .dash-kpi__label,
  .dash-kpi__delta { font-size: 9.5px; }
  .dash-row { grid-template-columns: 74px 1fr 50px; gap: 8px; font-size: 10.5px; }
  .dash-row__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 360px) {
  .dash-kpi__value { font-size: 15px; }
  .dash-kpis { grid-template-columns: 1fr 1fr; }
  .dash-kpi:last-child { grid-column: span 2; }
}

@media (max-width: 600px) {
  /* Client logos: drop the edge fade (it made logos appear only past the
     fade zone, leaving voids) and tighten the slots so the marquee reads
     dense edge to edge. */
  .trust__ticker { -webkit-mask-image: none; mask-image: none; }
  .trust__track { gap: 26px; }
  .trust-slot { width: 120px; height: 54px; }
}

/* Generic mobile swipe-carousel arrows (why rows, brand pillars) — injected by
   initSwipeArrows(), hidden on desktop. */
.swipe-nav { display: none; }
.swipe-nav__btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid hsl(0 0% 100% / 0.4);
  color: hsl(0 0% 100% / 0.85);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.swipe-nav__btn svg { width: 16px; height: 16px; }
.swipe-nav__btn:hover { border-color: hsl(0 0% 100% / 0.9); color: white; }
.swipe-nav__btn:active { transform: scale(0.93); }
@media (max-width: 700px) {
  /* Arrows sit above the carousel they control, aligned to the right. */
  .swipe-nav { display: flex; gap: 10px; justify-content: flex-end; margin: 0 0 12px; }
}

@media (max-width: 700px) {
  /* "Craft-led" process: one step on screen at a time. Cards are sticky near
     the top and uniform height, so each fully covers the one below. As you
     scroll, the next step rises from the bottom and stacks over the current
     one (only a thin edge of the earlier cards peeks at the top, like a deck). */
  .how__steps {
    display: block;
    margin-top: 32px;
  }
  .how__steps .step {
    position: sticky;
    margin: 0;
    min-height: 230px;
    box-sizing: border-box;
    padding: 22px 22px;
    opacity: 1 !important;
    transform: none !important;
    box-shadow: 0 -12px 32px -8px hsl(0 0% 0% / 0.7);
  }
  .how__steps .step:nth-child(1) { top: 84px;  z-index: 1; }
  .how__steps .step:nth-child(2) { top: 92px;  z-index: 2; }
  .how__steps .step:nth-child(3) { top: 100px; z-index: 3; }
  .how__steps .step:nth-child(4) { top: 108px; z-index: 4; }
  .how__steps .step:nth-child(5) { top: 116px; z-index: 5; }
  .how__steps .step__body { margin-top: 6px; }
}

@media (max-width: 700px) {
  /* No per-item reveal fade inside the mobile swipe carousels — the cards were
     fading up one by one as they scrolled in. Show them immediately. */
  .why-reasons .reveal,
  .why-cases .reveal,
  .pillars .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}