/* ============================================================
   OYNK Creative — Design Tokens
   Brand source: OYNK_Creative_Brand_Colour_Guide.pdf v1.0
   ============================================================ */
:root {
  /* Brand colours — sampled from OYNK_Creative_Brand_Colour_Guide_Punchy_GenZ */
  --oynk-red: #DB322B;        /* hero red, unchanged */
  --oynk-red-hover: #C42720;
  --red-deep: #D02D26;        /* red section fills: cream copy clears 4.5:1 here, brand red is 4.31:1 */
  --ink: #2A1028;
  --cream: #FFF4EC;
  --cobalt: #4D55FF;          /* electric cobalt */
  --cobalt-deep: #3A41D9;     /* cobalt labels on light surfaces */
  --cobalt-wash: #EDEEFF;     /* derived light surface (guide has no light tint) */
  --lime: #D8FF3E;            /* acid lime — DARK BACKGROUNDS ONLY, 1.06:1 on cream */

  /* Semantic tokens */
  --color-bg: var(--cream);
  --color-bg-alt: var(--cobalt-wash);
  --color-bg-dark: var(--ink);
  --color-primary: var(--oynk-red);
  --color-primary-hover: var(--oynk-red-hover);
  --color-accent: var(--cobalt);
  --color-text: var(--ink);
  --color-text-on-dark: var(--cream);
  --color-text-muted: #6B5468;
  --color-border: rgba(42, 16, 40, 0.12);
  --color-border-dark: rgba(255, 244, 236, 0.16);

  /* Typography */
  --font-display: "Archivo Black", "Arial Black", sans-serif;
  --font-body: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;
  --fs-4xl: 4rem;
  --fs-5xl: 5.5rem;

  /* Spacing (8px rhythm) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;

  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --radius-pill: 999px;

  --shadow-soft: 0 4px 24px rgba(42, 16, 40, 0.08);
  --shadow-lift: 0 16px 40px rgba(42, 16, 40, 0.16);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;

  --container: 1200px;
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
html, body { min-height: 100dvh; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x: hidden;
  width: 100%;
}
img, picture, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; }
input, textarea, select { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 3px;
  border-radius: 4px;
}

a, button, .btn, [role="button"] { cursor: pointer; touch-action: manipulation; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Typography
   ============================================================ */
h1, h2, h3, .display {
  font-family: var(--font-display);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
}
h1 { font-size: clamp(2.75rem, 5vw + 1rem, var(--fs-5xl)); }
h2 { font-size: clamp(2rem, 3.4vw + 1rem, var(--fs-3xl)); }
h3 { font-size: clamp(1.375rem, 1.6vw + 1rem, var(--fs-xl)); }
h4 { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-md); }
p { max-width: 62ch; }
p.lede { font-size: var(--fs-lg); color: var(--color-text-muted); max-width: 46ch; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oynk-red);
}
.section-dark h1, .section-dark h2, .section-dark h3 {
  color: var(--cream);
}
/* Acid lime is deliberately rationed: 15.2:1 on ink but only 1.06:1 on
   cream, so it appears on dark surfaces only, and only as a small accent. */
.section-dark .eyebrow { color: var(--lime); }
.section-dark p, .section-dark p.lede { color: rgba(255, 244, 236, 0.72); }

/* ============================================================
   Layout helpers
   ============================================================ */
.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-3);
}
@media (min-width: 768px) { .wrap { padding-inline: var(--space-4); } }

section { padding-block: var(--space-6); position: relative; }
@media (min-width: 1024px) { section { padding-block: var(--space-7); } }

.section-alt { background: var(--cobalt-wash); }
.section-dark { background: var(--ink); }
.section-red { background: var(--red-deep); }

.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.row > *:last-child { min-width: 0; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

.grid { display: grid; gap: var(--space-3); }
.grid > * { min-width: 0; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }

.section-head { max-width: 46rem; margin-bottom: var(--space-5); }
.section-head.center { margin-inline: auto; text-align: center; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.95em 1.7em;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.01em;
  min-height: 48px;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--oynk-red);
  color: var(--cream);
  box-shadow: var(--shadow-soft);
}
.btn-primary:hover { background: var(--oynk-red-hover); transform: translateY(-2px); box-shadow: var(--shadow-lift); }

.btn-dark {
  background: var(--ink);
  color: var(--cream);
}
.btn-dark:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }

.btn-outline {
  background: transparent;
  border: 2px solid currentColor;
  color: var(--ink);
}
.section-dark .btn-outline, .section-red .btn-outline { color: var(--cream); }
.btn-outline:hover { background: rgba(42, 16, 40, 0.06); transform: translateY(-2px); }
.section-dark .btn-outline:hover, .section-red .btn-outline:hover { background: rgba(255, 244, 236, 0.12); }

.btn-ghost {
  padding: 0.6em 0.2em;
  font-weight: 700;
  color: var(--ink);
  border-bottom: 2px solid transparent;
}
.btn-ghost:hover { border-color: currentColor; }

.icon { width: 1.15em; height: 1.15em; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-fill { fill: currentColor; stroke: none; }

/* ============================================================
   Nav
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 244, 236, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-2);
  gap: var(--space-3);
}
.brand { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-size: var(--fs-md); letter-spacing: -0.01em; }
.brand-mark { width: 36px; height: 36px; flex: none; }
.brand img.wordmark { height: 22px; width: auto; }

.nav-links {
  display: none;
  align-items: center;
  gap: var(--space-4);
  font-weight: 700;
  font-size: var(--fs-sm);
}
.nav-links a { position: relative; padding-block: 0.3rem; }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--oynk-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: var(--oynk-red); }

.nav-cta { display: none; }
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-pill);
}
.nav-toggle:hover { background: rgba(42, 16, 40, 0.06); }

@media (min-width: 900px) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; }
  .nav-toggle { display: none; }
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--cream);
  display: flex;
  flex-direction: column;
  padding: var(--space-3);
  transform: translateY(-100%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.mobile-menu.is-open { transform: translateY(0); }
.mobile-menu-head { display: flex; justify-content: space-between; align-items: center; }
.mobile-menu-links { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-6); font-family: var(--font-display); font-size: var(--fs-2xl); text-transform: uppercase; }
.mobile-menu-links a { display: block; }
.mobile-menu-foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-2); }
body.menu-open { overflow: hidden; }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  padding-block: var(--space-6) var(--space-7);
  overflow: hidden;
  position: relative;
}
.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.30;
  z-index: 0;
}
.hero .wrap { position: relative; z-index: 1; }
.hero-copy { max-width: 40rem; }
.hero-copy p.lede { margin-top: var(--space-3); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.hero-proof { margin-top: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-4); }
.hero-proof-item { display: flex; flex-direction: column; }
.hero-proof-item strong { font-family: var(--font-display); font-size: var(--fs-2xl); color: var(--oynk-red); }
.hero-proof-item span { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); }

/* ============================================================
   Cards
   ============================================================ */
.card {
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.card:hover { transform: translateY(-4px) scale(1.01); box-shadow: var(--shadow-lift); }
.card-plum { background: var(--ink); color: var(--cream); }
.card-red { background: var(--oynk-red); color: var(--cream); }
.card-cobalt { background: var(--cobalt); color: var(--cream); }
.card-lilac { background: var(--cobalt-wash); }
.card-icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: rgba(219, 50, 43, 0.1);
  color: var(--oynk-red);
  margin-bottom: var(--space-3);
}
.card-plum .card-icon, .card-red .card-icon, .card-cobalt .card-icon {
  background: rgba(255, 244, 236, 0.16);
  color: var(--cream);
}
.card h3 { margin-bottom: 0.5rem; }
.card p { color: var(--color-text-muted); }
.card-plum p, .card-red p, .card-cobalt p { color: rgba(255, 244, 236, 0.86); }
/* Headings inherit --ink globally, which is invisible on .card-plum and
   muddy on .card-red. Coloured cards need light headings. */
.card-plum h2,  .card-plum h3,  .card-plum h4,
.card-red h2,   .card-red h3,   .card-red h4,
.card-cobalt h2, .card-cobalt h3, .card-cobalt h4 { color: var(--cream); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.35em 0.8em;
  border-radius: var(--radius-pill);
  background: rgba(77, 85, 255, 0.16);
  color: #3A41D9;
}

/* ============================================================
   Case study / reel cards
   ============================================================ */
.reel-card {
  background: var(--ink);
  color: var(--cream);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 320px;
  position: relative;
  overflow: hidden;
}
.reel-card::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto auto;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(219,50,43,0.55), transparent 70%);
  pointer-events: none;
}
.reel-card .client { font-family: var(--font-display); font-size: var(--fs-md); text-transform: uppercase; }
.reel-card .caption { color: rgba(255,244,236,0.85); flex: 1; }
.reel-card .stats { display: flex; gap: var(--space-3); font-size: var(--fs-sm); font-weight: 700; }
.reel-card .stats b { display: block; font-family: var(--font-display); font-size: var(--fs-lg); color: var(--cobalt); }
.reel-card .stats span { font-size: var(--fs-xs); color: rgba(255,244,236,0.6); text-transform: uppercase; letter-spacing: 0.04em; }
.reel-card .watch { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 700; color: var(--cream); border-bottom: 2px solid var(--oynk-red); padding-bottom: 2px; width: fit-content; }
.reel-card .watch:hover { color: var(--oynk-red); }

/* ============================================================
   Marquee
   ============================================================ */
.marquee {
  overflow: hidden;
  background: var(--ink);
  color: var(--cream);
  padding-block: var(--space-2);
}
.marquee-track {
  display: flex;
  width: max-content;
  gap: var(--space-4);
  animation: marquee 28s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }
.marquee-track span {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  text-transform: uppercase;
  white-space: nowrap;
  display: flex; align-items: center; gap: var(--space-4);
}
.marquee-track span::after { content: "•"; color: var(--oynk-red); }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============================================================
   Reveal-on-scroll
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   Forms
   ============================================================ */
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-weight: 700; font-size: var(--fs-sm); }
.field .hint { font-size: var(--fs-xs); color: var(--color-text-muted); }
.field input, .field textarea, .field select {
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.9em 1em;
  background: var(--cream);
  min-height: 48px;
  transition: border-color var(--dur-base) var(--ease-out);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--oynk-red); outline: none; }
.field-error { color: var(--oynk-red); font-size: var(--fs-xs); font-weight: 700; min-height: 1em; }
.required::after { content: " *"; color: var(--oynk-red); }
.form-status { border-radius: var(--radius-sm); padding: var(--space-2); font-weight: 700; display: none; }
.form-status.is-visible { display: block; }
.form-status.success { background: rgba(77, 85, 255, 0.12); color: var(--cobalt-deep); }

/* ============================================================
   Footer
   ============================================================ */
.footer { background: var(--ink); color: var(--cream); padding-block: var(--space-6) var(--space-4); }
.footer-top { display: grid; gap: var(--space-5); grid-template-columns: 1fr; margin-bottom: var(--space-5); }
@media (min-width: 768px) { .footer-top { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.footer h4 { color: var(--cream); margin-bottom: var(--space-2); text-transform: uppercase; font-size: var(--fs-xs); letter-spacing: 0.08em; opacity: 0.6; }
.footer-links { display: flex; flex-direction: column; gap: 0.6rem; font-weight: 600; }
.footer-links a:hover { color: var(--cobalt); }
.footer-bottom {
  border-top: 1px solid var(--color-border-dark);
  padding-top: var(--space-3);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2);
  font-size: var(--fs-xs);
  color: rgba(255,244,236,0.6);
}
.social-row { display: flex; gap: var(--space-2); }
.social-row a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--color-border-dark); display: flex; align-items: center; justify-content: center; transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.social-row a:hover { background: var(--oynk-red); border-color: var(--oynk-red); transform: translateY(-2px); }

/* ============================================================
   Misc
   ============================================================ */
.divider { height: 1px; background: var(--color-border); border: none; margin-block: var(--space-4); }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--oynk-red); color: var(--cream); padding: 1em 1.5em; border-radius: 0 0 var(--radius-sm) 0; font-weight: 700;
}
.skip-link:focus { left: 0; }
.blob-dots {
  display: grid;
  grid-template-columns: repeat(3, 10px);
  gap: 8px;
}
.blob-dots span { width: 10px; height: 10px; border-radius: 50%; background: currentColor; opacity: 0.5; }

.avatar {
  width: 88px; height: 88px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--cream);
  background: var(--oynk-red);
  flex: none;
}

.pill-list { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pill-list li {
  border: 2px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0.5em 1em;
  font-weight: 700;
  font-size: var(--fs-sm);
  display: flex; align-items: center; gap: 0.5em;
}
.pill-list li .icon { color: var(--oynk-red); width: 1em; height: 1em; }

.price-card {
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--cream);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.price-card.featured { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.price-card.featured .price-features li { color: rgba(255,244,236,0.85); }
.price-amount { font-family: var(--font-display); font-size: var(--fs-3xl); }
.price-amount small { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; text-transform: none; letter-spacing: 0; opacity: 0.7; }
.price-features { display: flex; flex-direction: column; gap: 0.7rem; }
.price-features li { display: flex; gap: 0.6rem; align-items: flex-start; color: var(--color-text-muted); font-size: var(--fs-sm); }
.price-features li .icon { color: var(--oynk-red); flex: none; margin-top: 0.15em; }
.featured .price-features li .icon { color: var(--cobalt); }

.badge-featured {
  align-self: flex-start;
  background: var(--oynk-red);
  color: var(--cream);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.3em 0.8em;
  border-radius: var(--radius-pill);
}

.step {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.step-num {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  color: var(--cobalt);
}
.section-alt .step-num,
.section-red .step-num {
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
}

/* ============================================================
   Phone mockup carousel
   ============================================================ */
.phone-carousel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 480px;
  margin-inline: auto;
  max-width: 560px;
  touch-action: pan-y;
}
.phone-carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 1200px;
}
.phone-slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  will-change: transform, opacity;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out);
}
.phone-frame {
  position: relative;
  aspect-ratio: 9 / 16;
  background: var(--ink);
  border-radius: 28px;
  padding: 8px;
  box-shadow: var(--shadow-lift);
}
.phone-frame::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 14px;
  border-radius: var(--radius-pill);
  background: #000;
  z-index: 2;
}
.phone-screen {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  background: var(--cobalt-wash);
}
.phone-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-soft);
  transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.phone-carousel-arrow:hover { background: var(--oynk-red); color: var(--cream); transform: translateY(-50%) scale(1.06); }
.phone-carousel-arrow.prev { left: -4px; }
.phone-carousel-arrow.next { right: -4px; }
@media (min-width: 640px) {
  .phone-carousel-arrow.prev { left: -22px; }
  .phone-carousel-arrow.next { right: -22px; }
}
.phone-carousel-dots {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  z-index: 5;
}
.phone-carousel-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border);
  transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.phone-carousel-dots .dot[aria-current="true"] {
  background: var(--oynk-red);
  transform: scale(1.3);
}
@media (prefers-reduced-motion: reduce) {
  .phone-slide { transition: none; }
}

/* ============================================================
   Motion layer: hero depth, parallax, cursor, micro-interactions
   ============================================================ */

/* ---- Scroll progress bar ---- */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 300;
  background: linear-gradient(90deg, var(--oynk-red), var(--cobalt));
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

/* ---- Nav condense on scroll ---- */
.nav-inner { transition: padding-block var(--dur-base) var(--ease-out); }
.nav { transition: box-shadow var(--dur-base) var(--ease-out); }
.nav.is-scrolled { box-shadow: 0 6px 24px rgba(42, 16, 40, 0.09); }
.nav.is-scrolled .nav-inner { padding-block: 0.6rem; }

/* ---- Hero layout ---- */
.hero-grid { display: grid; gap: var(--space-5); align-items: center; }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-4); }
}
.hero-main { position: relative; z-index: 2; }

/* Blobs drift slowly for ambient life */
.hero-blob { animation: blob-drift 16s ease-in-out infinite alternate; }
.hero-blob:nth-of-type(2) { animation-duration: 21s; animation-delay: -6s; }
@keyframes blob-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-26px, 22px, 0) scale(1.09); }
}

/* ---- Headline word stagger ---- */
.hero h1 .word {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 0.5em, 0) rotate(3deg);
  transition: opacity 520ms var(--ease-out), transform 620ms var(--ease-out);
}
.hero h1.is-in .word { opacity: 1; transform: none; }

/* ---- Floating phone cluster ---- */
.hero-phones {
  position: relative;
  height: 300px;
  display: block;
  margin-top: var(--space-3);
  z-index: 1;
}
@media (min-width: 900px)  { .hero-phones { height: 440px; margin-top: 0; } }
@media (min-width: 1200px) { .hero-phones { height: 500px; } }

/* .hero-phone carries JS scroll-parallax; .phone-float carries the idle CSS
   animation. Separate elements so the two never fight over `transform`. */
.hero-phone {
  position: absolute;
  width: 118px;
  will-change: transform;
}
@media (min-width: 900px) { .hero-phone { width: 168px; } }
.hero-phone .phone-float {
  animation: phone-float 7s ease-in-out infinite alternate;
}
@media (min-width: 1200px) { .hero-phone { width: 190px; } }
.hero-phone-1 { top: 4%;  left: 0;    z-index: 1; }
.hero-phone-2 { top: 16%; left: 33%;  z-index: 3; }
.hero-phone-3 { top: 2%;  right: -2%; z-index: 2; }
.hero-phone-1 .phone-float { animation-delay: -1.2s; }
.hero-phone-3 .phone-float { animation-delay: -3.4s; }
.hero-phone-2 .phone-frame { box-shadow: 0 26px 60px rgba(42, 16, 40, 0.28); }

@keyframes phone-float {
  from { transform: translate3d(0, 0, 0) rotate(-2deg); }
  to   { transform: translate3d(0, -18px, 0) rotate(2deg); }
}

/* Crossfading screen (reads as playing video) */
.phone-cycle { position: relative; width: 100%; height: 100%; border-radius: 20px; overflow: hidden; }
.phone-cycle .phone-screen {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  transition: opacity 700ms var(--ease-out);
}
.phone-cycle .phone-screen.is-out { opacity: 0; }

/* Live dot so the cluster reads as active content */
.hero-phone-2 .phone-frame::after {
  content: "";
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 0 rgba(216, 255, 62, 0.7);
  animation: live-pulse 2s ease-out infinite;
  z-index: 3;
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(216, 255, 62, 0.6); }
  70%  { box-shadow: 0 0 0 12px rgba(216, 255, 62, 0); }
  100% { box-shadow: 0 0 0 0 rgba(216, 255, 62, 0); }
}

/* ---- Custom cursor ---- */
.cursor-dot, .cursor-ring {
  position: fixed;
  left: 0; top: 0;
  z-index: 9999;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
  opacity: 0;
  transition: opacity var(--dur-base) linear;
}
.cursor-dot {
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  background: var(--oynk-red);
}
.cursor-ring {
  width: 36px; height: 36px;
  margin: -18px 0 0 -18px;
  border: 2px solid rgba(219, 50, 43, 0.45);
  transition: opacity var(--dur-base) linear,
              background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.cursor-dot.is-live, .cursor-ring.is-live { opacity: 1; }
.cursor-ring.is-active {
  background: rgba(219, 50, 43, 0.12);
  border-color: var(--oynk-red);
}
/* Only hide the native cursor once JS has actually drawn a replacement */
html.has-cursor, html.has-cursor a, html.has-cursor button { cursor: none; }
html.has-cursor input, html.has-cursor textarea, html.has-cursor select { cursor: auto; }

/* ---- Magnetic + tilt ---- */
[data-magnetic] { will-change: transform; }
.tilt-host { transform-style: preserve-3d; }

/* ---- Motion opt-out: everything above resets to static ---- */
@media (prefers-reduced-motion: reduce) {
  .hero-blob,
  .hero-phone .phone-float,
  .hero-phone-2 .phone-frame::after { animation: none; }
  .hero h1 .word { opacity: 1; transform: none; transition: none; }
  .phone-cycle .phone-screen { transition: none; }
  .cursor-dot, .cursor-ring { display: none; }
  .scroll-progress { display: none; }
}

/* ============================================================
   Reel strip: full-bleed auto-scrolling wall of real content
   ============================================================ */
.reel-strip {
  overflow: hidden;
  padding-block: var(--space-2);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.reel-strip-track {
  display: flex;
  gap: var(--space-2);
  width: max-content;
  animation: marquee 46s linear infinite;
}
.reel-strip:hover .reel-strip-track { animation-play-state: paused; }
.reel-strip-item {
  flex: none;
  width: 132px;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--cobalt-wash);
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur-base) var(--ease-out);
}
.reel-strip-item:hover { transform: translateY(-6px) scale(1.03); }
.reel-strip-item img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px)  { .reel-strip-item { width: 176px; } }
@media (min-width: 1200px) { .reel-strip-item { width: 200px; } }

@media (prefers-reduced-motion: reduce) {
  .reel-strip-track { animation: none; }
  .reel-strip { overflow-x: auto; }
}

/* ============================================================
   Mobile hero order: lead with the headline, then the work,
   then the CTAs. Images sit high instead of buried under stats.
   ============================================================ */
@media (max-width: 899px) {
  .hero { padding-block: var(--space-4) var(--space-5); }
  .hero-grid { display: flex; flex-direction: column; gap: var(--space-3); }
  /* display:contents dissolves the wrapper so its children can be ordered
     alongside .hero-phones in the same flex context. */
  .hero-main { display: contents; }
  .hero .eyebrow { order: 1; }
  .hero-copy     { order: 2; }
  .hero-phones   { order: 3; margin-top: var(--space-1); }
  .hero-actions  { order: 4; margin-top: 0; }
  .hero-proof    { order: 5; margin-top: var(--space-1); gap: var(--space-3); }

  .hero .eyebrow, .hero-copy, .hero-actions, .hero-proof {
    position: relative;
    z-index: 2;
  }
  .hero-proof-item strong { font-size: var(--fs-xl); }
}

/* Mobile: the absolute-positioned desktop fan overlaps badly at narrow widths,
   so lay the three phones out as an even row instead. Tilt goes on
   .phone-frame because .hero-phone (parallax) and .phone-float (idle drift)
   are both already driving `transform`. */
@media (max-width: 899px) {
  .hero-phones {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: var(--space-2);
    height: auto;
  }
  .hero-phone {
    position: static;
    flex: 1 1 0;
    min-width: 0;
    max-width: 108px;
  }
  .hero-phone-2 { margin-top: var(--space-3); }
  .hero-phone-3 { margin-top: var(--space-1); }
  .hero-phone-1 .phone-frame { transform: rotate(-4deg); }
  .hero-phone-2 .phone-frame { transform: rotate(2deg);  }
  .hero-phone-3 .phone-frame { transform: rotate(5deg);  }
  .hero-phone .phone-frame { border-radius: 20px; padding: 5px; }
  .hero-phone .phone-frame::before { width: 30px; height: 9px; top: 9px; }
  .hero-phone .phone-screen, .hero-phone .phone-cycle { border-radius: 15px; }
}

/* ============================================================
   Hero stat cards: give the metrics a surface so they carry
   weight instead of floating loose under the headline.
   ============================================================ */
.hero-proof {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.hero-proof-item {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-2) calc(var(--space-2) - 2px);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.hero-proof-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
  border-color: rgba(219, 50, 43, 0.35);
}
.hero-proof-item strong {
  display: block;
  font-size: clamp(1.5rem, 5.2vw, 2.5rem);
  line-height: 1;
  color: var(--oynk-red);
  font-variant-numeric: tabular-nums;
}
.hero-proof-item span {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.6875rem;
  letter-spacing: 0.07em;
}

/* ============================================================
   Stats chart: real per-reel view counts, bars grow on scroll
   ============================================================ */
.chart { margin-top: var(--space-5); }
.chart-plot {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 190px;
}
@media (min-width: 640px) { .chart-plot { gap: 10px; height: 230px; } }

.chart-col {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.4rem;
  border-radius: 10px 10px 0 0;
}
.chart-val {
  font-family: var(--font-display);
  font-size: 0.625rem;
  text-align: center;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out) calc(var(--delay, 0ms) + 260ms);
}
@media (min-width: 640px) { .chart-val { font-size: 0.8125rem; } }
.chart.is-in .chart-val { opacity: 1; }

/* The track is a full-height rounded column; the fill rises inside it via
   transform. Avoids percentage-height-in-flex resolution issues, keeps the
   animation on the compositor, and the empty track doubles as a max reference. */
.chart-bar {
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 244, 236, 0.09);
}
.chart-fill {
  width: 100%;
  background: linear-gradient(180deg, #6E75FF, var(--cobalt));
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform 850ms var(--ease-out) var(--delay, 0ms),
              background var(--dur-base) var(--ease-out);
}
.chart.is-in .chart-fill { transform: scaleY(var(--pct, 1)); }

.chart-col:hover .chart-fill,
.chart-col:focus-visible .chart-fill {
  background: linear-gradient(180deg, #F0574F, var(--oynk-red));
}
.chart-x {
  font-size: 0.625rem;
  text-align: center;
  color: rgba(255, 244, 236, 0.6);
  letter-spacing: 0.02em;
  display: none;
}
@media (min-width: 640px) { .chart-x { display: block; } }
.chart-col:hover .chart-x, .chart-col:focus-visible .chart-x { color: var(--cream); }

.chart-caption {
  margin-top: var(--space-3);
  font-size: var(--fs-xs);
  color: rgba(255, 244, 236, 0.55);
  text-align: center;
  max-width: none;
}

@media (prefers-reduced-motion: reduce) {
  .chart-fill { transform: scaleY(var(--pct, 1)); transition: none; }
  .chart-val { opacity: 1; transition: none; }
}

/* Mobile: reclaim a little of the wrap padding and tighten gaps so the
   eight bars stay as wide as possible for tapping. */
@media (max-width: 639px) {
  .chart { margin-inline: -10px; }
  .chart-plot { gap: 3px; }
}

/* ============================================================
   Service cards: directional entrance + cursor spotlight
   ============================================================ */
.service-card {
  position: relative;
  overflow: hidden;
}
/* Keep real content above the spotlight layer */
.service-card > * { position: relative; z-index: 1; }

/* Spotlight tracks the pointer via --mx/--my set in JS */
.service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%),
              rgba(255, 255, 255, 0.20), transparent 62%);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  pointer-events: none;
}
.service-card:hover::after,
.service-card:focus-within::after { opacity: 1; }

/* Cards arrive from opposite edges, with a light overshoot */
.service-card[data-reveal] {
  transform: translate3d(-34px, 22px, 0) scale(0.97);
  transition: opacity 620ms var(--ease-out),
              transform 780ms cubic-bezier(0.22, 1.15, 0.36, 1);
}
.service-card[data-reveal]:nth-of-type(2) { transform: translate3d(34px, 22px, 0) scale(0.97); }
.service-card[data-reveal].is-visible { transform: none; }

/* Icon pops, arrow slides */
.service-card .card-icon {
  transition: transform var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}
.service-card:hover .card-icon {
  transform: translateY(-3px) scale(1.09) rotate(-7deg);
  background: rgba(255, 244, 236, 0.3);
}
.service-card .arrow {
  display: inline-block;
  transition: transform var(--dur-base) var(--ease-out);
}
.service-card:hover .arrow,
.service-card a:focus-visible .arrow { transform: translateX(6px); }

@media (prefers-reduced-motion: reduce) {
  .service-card[data-reveal] { transform: none; transition: none; }
  .service-card::after { display: none; }
  .service-card:hover .card-icon,
  .service-card:hover .arrow { transform: none; }
}

/* ============================================================
   Service card reel backdrops
   Real reels crossfade behind each card behind a brand-tinted
   scrim. Scrim density is set by contrast, not taste: white body
   copy must clear 4.5:1 even against a pure-white image pixel.
   ============================================================ */
.card-media {
  position: absolute;
  inset: 0;
  z-index: 0;              /* below .service-card > * (z-index 1) */
  overflow: hidden;
  border-radius: inherit;
}
.card-media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Held blur keeps copy legible and hides the upscale edge. Only
     transform/opacity animate, so no per-frame filter repaint. */
  filter: blur(2px) saturate(1.06);
  transform: scale(1.06);
  transition: transform 800ms var(--ease-out), opacity 700ms var(--ease-out);
}
.card-media-img.is-out { opacity: 0; }

/* Hover reveal is the push-in, NOT a lighter scrim: thinning the
   scrim measured 3.43:1 against a white image pixel. */
.service-card:hover .card-media-img,
.service-card:focus-within .card-media-img { transform: scale(1.15); }

.card-media::after {
  content: "";
  position: absolute;
  inset: 0;
}
.card-red .card-media::after {
  background: linear-gradient(165deg, rgba(194, 42, 36, 0.90), rgba(150, 30, 25, 0.96));
}
.card-plum .card-media::after {
  background: linear-gradient(165deg, rgba(38, 14, 36, 0.90), rgba(20, 6, 16, 0.96));
}

/* The imagery replaces the cursor spotlight here: layering a white
   highlight over photos dragged body copy under AA. */
.service-card::after { display: none; }

/* Copy goes full-strength white now that it sits over photography. */
.service-card p { color: var(--cream); }

@media (prefers-reduced-motion: reduce) {
  .card-media-img { transition: none; }
  .service-card:hover .card-media-img,
  .service-card:focus-within .card-media-img { transform: scale(1.06); }
}

/* ============================================================
   Pricing: tier differentiators
   ============================================================ */
/* Not-included row: cross icon + muted tone (6.27:1 on cream),
   no strikethrough so it stays readable. */
.price-features li.is-excluded { color: var(--color-text-muted); opacity: 0.75; }
.price-features li.is-excluded .icon { color: var(--color-text-muted); }

/* The row that justifies the upgrade */
.price-features li.is-key { color: var(--cream); font-weight: 700; }
.featured .price-features li.is-key .icon { color: var(--lime); }

/* Growth value callout. Lime only as the accent mark and rule: cobalt is
   3.37:1 on ink and this is small text, lime is 15.2:1. */
.price-save {
  align-self: stretch;
  margin-top: -0.3rem;
  padding: 0.7em 0.95em;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--lime);
  background: rgba(216, 255, 62, 0.12);
  color: var(--cream);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.4;
  max-width: none;
}
.price-save-lead {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 0.3em;
}
.price-save-lead:last-child { margin-bottom: 0; }

/* "From" as a small label above the figure: at three columns the display
   face pushed "From $1,699 / month" onto three ragged lines. */
.price-from {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 0.2em;
}
.price-amount { line-height: 1.05; }
.price-amount small { white-space: nowrap; }

/* ============================================================
   Pricing grid alignment
   The three tiers differ structurally (only Growth has a badge
   and a value callout), which staggered the price and feature
   rows. Subgrid makes all cards share one row track set, so
   every row lines up across columns regardless of content.
   ============================================================ */
.price-card { position: relative; }

/* The badge stays in flow and gets its own row; the other two tiers hold
   that row open with an empty slot. Absolute-positioning it collided with
   the "GROWTH" heading at three columns. */

/* Empty placeholder holding the callout row open on non-featured cards */
.price-slot { display: block; }

@media (min-width: 1024px) {
  @supports (grid-template-rows: subgrid) {
    /* badge | title | price | callout | features | button */
    .pricing-grid { grid-template-rows: auto auto auto auto 1fr auto; }
    .price-card {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 6;
    }
    /* features row already absorbs slack via 1fr */
    .price-card > .btn { margin-top: 0 !important; }
  }
}

/* Grid items stretch by default; the badge should hug its label */
.price-card .badge-featured { justify-self: start; }

/* The reserved rows only matter where the cards sit side by side. Below the
   subgrid breakpoint they'd just be dead gaps in the stacked flex layout. */
@media (max-width: 1023px) {
  .price-slot { display: none; }
}

/* Group label separating the management block from the base deliverables */
.price-features li.price-group {
  display: block;
  margin-top: 0.35rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
}
.featured .price-features li.price-group {
  border-top-color: var(--color-border-dark);
  color: rgba(255, 244, 236, 0.6);
}
/* Included management rows: lime tick marks the differentiator */
.featured .price-features li.is-mgmt { color: var(--cream); }
.featured .price-features li.is-mgmt .icon { color: var(--lime); }

/* Optional extra: plus icon rather than a tick, with a tag pushed to the
   row's trailing edge so it reads as available, not included. */
.price-features li.is-addon { color: rgba(255, 244, 236, 0.82); }
.featured .price-features li.is-addon .icon { color: rgba(255, 244, 236, 0.5); }
.addon-tag {
  margin-left: auto;
  flex: none;
  align-self: center;
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.2em 0.55em;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-dark);
  color: rgba(255, 244, 236, 0.72);
  white-space: nowrap;
}

/* ============================================================
   Services: numbered capability rows
   ============================================================ */
.caps-head { max-width: 44rem; margin-bottom: var(--space-5); }
.caps-head h2 { margin-top: var(--space-2); }

.cap-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding-block: var(--space-5);
  border-top: 1px dashed var(--color-border);
  align-items: start;
}
.cap-row:last-child { border-bottom: 1px dashed var(--color-border); }
@media (min-width: 900px) {
  .cap-row {
    grid-template-columns: 96px minmax(240px, 320px) 1fr;
    gap: var(--space-4);
    padding-block: var(--space-6);
  }
}

.cap-num {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--ink);
  line-height: 1;
}
@media (min-width: 900px) { .cap-num { font-size: var(--fs-2xl); } }

.cap-media {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--cobalt-wash);
  /* Source reels are 9:16. A 4:3 box cropped so hard it cut the title
     cards off; 4:5 keeps the on-screen text intact on narrow screens. */
  aspect-ratio: 4 / 5;
}
@media (min-width: 900px) { .cap-media { aspect-ratio: 3 / 4; } }
.cap-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* over-scaled so the scroll shift never exposes an edge */
  transform: scale(1.06);
  will-change: transform;
}

.cap-plan {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cobalt-deep);
  background: rgba(77, 85, 255, 0.12);
  padding: 0.3em 0.8em;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-2);
}
.cap-title {
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  line-height: 0.98;
}
.cap-sub {
  color: var(--color-text-muted);
  font-size: var(--fs-md);
  margin-top: 0.5rem;
  max-width: 34ch;
}
.cap-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: var(--space-4);
}
.cap-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 800;
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.cap-list .icon {
  color: var(--cobalt);
  flex: none;
  transition: transform var(--dur-base) var(--ease-out);
}
.cap-list li:hover .icon { transform: translate(3px, -3px); }

@media (prefers-reduced-motion: reduce) {
  .cap-media img { transform: scale(1.06) !important; }
}

/* Below the 3-column breakpoint the capability media would stretch to the
   full wrap width (up to ~836px, i.e. 1672 device px), far past the source.
   Cap it so the 720w asset is always >= what the screen asks for. */
@media (max-width: 899px) {
  .cap-media { max-width: 336px; }
}

/* Contact form submit states */
.form-status.error { background: rgba(219, 50, 43, 0.12); color: var(--oynk-red-hover); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; }

/* ============================================================
   Footer brand lockup
   The source PNG carried 86% transparent padding, which shrank the
   wordmark and forced dead space around it. Now cropped to content,
   so it can be sized and spaced honestly.
   ============================================================ */
.footer-brand {
  display: inline-block;
  width: 180px;
  max-width: 60%;
  margin-bottom: var(--space-3);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.footer-brand img {
  width: 100%;
  height: auto;
  /* single-colour wordmark, so a filter beats shipping a second asset */
  filter: brightness(0) invert(1);
}
.footer-brand:hover { opacity: 0.82; transform: translateY(-2px); }

/* Oversized mark bleeding off the footer edge: ties the brand into the
   layout instead of leaving a small logo floating in space. */
.footer { position: relative; overflow: hidden; }
.footer::after {
  content: "";
  position: absolute;
  right: -4%;
  bottom: -14%;
  width: min(46vw, 560px);
  aspect-ratio: 442 / 153;
  background: url("../assets/img/oynk-logo.png") no-repeat center / contain;
  filter: brightness(0) invert(1);
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}
.footer .wrap { position: relative; z-index: 1; }
@media (max-width: 767px) {
  .footer::after { width: 78vw; right: -12%; bottom: -6%; opacity: 0.045; }
}

/* Google Calendar booking embed */
.booking-frame {
  max-width: 820px;
  margin-inline: auto;
  background: var(--cream);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.booking-frame iframe {
  display: block;
  width: 100%;
  height: 640px;
  border: 0;
}
@media (max-width: 639px) { .booking-frame iframe { height: 560px; } }