/*
Theme Name: Marklix
Theme URI: https://thebrideside.in
Author: TBS
Author URI: https://thebrideside.in
Description: Dark luxury creative-agency WordPress theme for MARKLIX — a video editing & AI content agency. Converted from the original single-page marklixsingle.html build. Portfolio items (Reel Editing, AI Generated Content, Featured Projects) are managed from wp-admin via the "Projects" custom post type, with support for either an uploaded video file or an external video link (YouTube/Vimeo/CDN).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: marklix
*/

/* =========================================================================
   MARKLIX — style.css
   Dark luxury creative-agency design system.
   Organized by: Reset -> Variables -> Base -> Utilities -> Components ->
   Sections -> Animations -> Responsive.
   ========================================================================= */

/* ---------------------------- 1. RESET ---------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
img, video { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul, ol { list-style: none; }
input, textarea, select { font: inherit; color: inherit; }

/* ---------------------------- 2. VARIABLES ---------------------------- */
:root {
  /* Colors */
  --bg: #050505;
  --bg-elevated: #0b0b0d;
  --bg-card: rgba(255, 255, 255, 0.03);
  --border-soft: rgba(255, 255, 255, 0.08);
  --white: #f5f5f7;
  --grey: #9a9aa4;
  --grey-dim: #6a6a76;

  --blue: #3d7bff;
  --blue-soft: #5b9dff;
  --purple: #9b5bff;
  --purple-soft: #b98bff;

  --gradient-brand: linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%);
  --gradient-text: linear-gradient(90deg, var(--blue-soft) 0%, var(--purple-soft) 60%, #ffffff 100%);
  --gradient-glow: radial-gradient(circle, rgba(61, 123, 255, 0.22) 0%, rgba(155, 91, 255, 0.1) 45%, transparent 65%);

  /* Typography */
  --font-display: "Space Grotesk", "Poppins", sans-serif;
  --font-body: "Inter", "Poppins", sans-serif;
  /* Heavier weight for hero-scale headlines & the logo — Poppins ships true
     ExtraBold/Black weights, giving a denser, more luxury-bold feel than
     Space Grotesk's max weight (700) can alone. */
  --font-luxury: "Poppins", "Space Grotesk", sans-serif;

  /* Layout */
  --container-w: 1240px;
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------------------------- 3. BASE ---------------------------- */
/* Locks scrolling while the automated intro/preloader is playing */
html.is-loading, html.is-loading body { overflow: hidden; height: 100%; }

body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-luxury);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

::selection { background: var(--purple); color: #fff; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-soft); border-radius: 8px; }

/* ---------------------------- 4. UTILITIES ---------------------------- */
.container {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 32px;
}

.section { position: relative; padding: 140px 0; }

/* Reel Editing + AI Generated Content + YouTube Editing marquees sit
   back-to-back as a trio — tighten the shared edges so there isn't a huge
   empty gap between them. */
.reel-portfolio { padding-bottom: 50px; }
.ai-portfolio { padding-top: 50px; padding-bottom: 50px; }
/* youtube-portfolio is the last of the trio, followed by Services (not
   another portfolio marquee) — it still needs its own bottom padding
   tightened, otherwise the marquee's 50px top-only override leaves the
   default 140px bottom padding untouched, which combined with Services'
   own 140px top padding was creating a ~280px dead-empty gap between the
   cards and the "Services" heading. */
.youtube-portfolio { padding-top: 50px; padding-bottom: 60px; }
.services { padding-top: 60px; }

.text-gradient {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.text-accent { color: var(--blue-soft); }

/* All section headings centered site-wide (title + description). */
.section-header { max-width: 640px; margin-bottom: 64px; margin-inline: auto; text-align: center; }
.section-header .section-desc { margin-inline: auto; }

.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-soft);
  margin-bottom: 18px;
}
.section-tag::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gradient-brand);
  box-shadow: 0 0 12px var(--blue);
}

.section-title {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 16px;
}

.section-desc { color: var(--grey); font-size: 1.05rem; max-width: 560px; }

/* Fade-up on scroll reveal */
.fade-up {
  opacity: 0;
  transform: translateY(36px);
  filter: blur(6px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), filter 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-up.in-view {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
/* Stagger helper set via inline transition-delay by JS */

/* Buttons */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: 100px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  isolation: isolate;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.btn--primary {
  background: var(--gradient-brand);
  color: #fff;
  box-shadow: 0 10px 30px -8px rgba(61, 123, 255, 0.55);
}
.btn--primary:hover { transform: translateY(-3px); box-shadow: 0 16px 40px -8px rgba(155, 91, 255, 0.6); }
.btn--outline {
  border: 1px solid var(--border-soft);
  color: var(--white);
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(10px);
}
.btn--outline:hover { border-color: var(--blue-soft); transform: translateY(-3px); background: rgba(255,255,255,0.05); }
.btn--small { padding: 11px 22px; font-size: 0.85rem; }
.btn--full { width: 100%; }

/* Magnetic button wrapper handled via JS transform on element itself */
.magnetic { will-change: transform; }

/* Glass panel */
.glass {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-soft);
  backdrop-filter: blur(20px) saturate(140%);
}

/* Tilt targets given perspective via inline transform from JS */
.tilt { transform-style: preserve-3d; will-change: transform; }

/* ---------------------------- 5. PRELOADER ---------------------------- */
/* Auto-plays on every page load — no click required. script.js keeps it
   on screen just long enough for the full logo reveal to finish, then
   fades it out automatically and reveals the site underneath. */
.preloader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  transition: opacity 0.7s ease, visibility 0.7s ease;
}
.preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.preloader__inner { display: flex; flex-direction: column; align-items: center; gap: 34px; }

/* Wrapper handles the gentle idle float once all fragments have landed */
.preloader__logo-wrap {
  display: flex; align-items: center; justify-content: center;
  animation: preloaderFloat 3.6s ease-in-out 1.3s infinite;
}

/* Shattered logo container — script.js fills this with a grid of small
   fragments (each showing one slice of the logo image via background-
   position). Every fragment starts scattered off in a random direction
   with a random rotation, then this class flips them all back to their
   resting position at once, with a per-tile stagger so it reads as an
   organic "snap together" rather than a single uniform move. */
.preloader__shatter {
  position: relative;
  width: min(72vw, 340px);
  aspect-ratio: 1285 / 267; /* matches the logo artwork's own proportions */
  animation: preloaderLogoGlow 2.8s ease-in-out 1.3s infinite;
}
.preloader__shatter-tile {
  position: absolute;
  background-repeat: no-repeat;
  opacity: 0;
  transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--rot, 0deg));
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
  will-change: transform, opacity;
}
.preloader__shatter.is-assembling .preloader__shatter-tile {
  opacity: 1;
  transform: translate(0, 0) rotate(0deg);
}

@keyframes preloaderLogoGlow {
  0%, 100% { filter: drop-shadow(0 0 22px rgba(61, 123, 255, 0.35)); }
  50% { filter: drop-shadow(0 0 44px rgba(155, 91, 255, 0.55)); }
}
@keyframes preloaderFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.preloader__bar {
  width: 180px; height: 2px;
  border-radius: 4px;
  background: var(--border-soft);
  overflow: hidden;
  opacity: 0;
  animation: preloaderFadeIn 0.4s ease 1.3s forwards;
}
.preloader__bar-fill {
  display: block;
  height: 100%; width: 0%;
  background: var(--gradient-brand);
  box-shadow: 0 0 10px var(--blue);
  transition: width 1.1s cubic-bezier(0.65, 0, 0.35, 1);
}
.preloader__bar-fill.is-filled { width: 100%; }
@keyframes preloaderFadeIn { to { opacity: 1; } }

/* ---------------------------- 6. CURSOR GLOW + SCROLL PROGRESS ---------------------------- */
/* A small, contained light that hugs the cursor — not a large spotlight */
.cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: var(--gradient-glow);
  pointer-events: none;
  z-index: 2;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.5s ease;
  mix-blend-mode: screen;
  filter: blur(14px);
}
.cursor-glow.is-active { opacity: 0.4; }
@media (max-width: 900px) { .cursor-glow { display: none; } }

.scroll-progress {
  position: fixed; top: 0; left: 0;
  height: 3px; width: 0%;
  background: var(--gradient-brand);
  z-index: 9998;
  box-shadow: 0 0 12px var(--blue);
  transition: width 0.1s linear;
}

/* ---------------------------- 7. NAVBAR ---------------------------- */
.navbar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 500;
  padding: 22px 0;
  transition: padding var(--transition), background var(--transition), border-color var(--transition);
  border-bottom: 1px solid transparent;
}
.navbar.is-scrolled {
  padding: 14px 0;
  background: rgba(5, 5, 5, 0.72);
  backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--border-soft);
}
.navbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand__img { height: 30px; width: auto; transition: opacity var(--transition-fast); }
.brand:hover .brand__img { opacity: 0.85; }
.brand__text {
  display: inline-flex;
  font-family: var(--font-luxury);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--white);
}
/* Animated MARKLIX wordmark — continuous shimmering gradient sweep across the logo text */
.brand__text--animated {
  background: linear-gradient(90deg, var(--white) 0%, var(--blue-soft) 30%, var(--purple-soft) 55%, var(--white) 85%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: brandShimmer 5s linear infinite;
}
@keyframes brandShimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: -260% 50%; }
}

.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links__link {
  position: relative;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--grey);
  transition: color var(--transition-fast);
}
.nav-links__link::after {
  content: "";
  position: absolute; left: 0; bottom: -6px;
  width: 0%; height: 1px;
  background: var(--gradient-brand);
  transition: width var(--transition-fast);
}
.nav-links__link:hover { color: var(--white); }
.nav-links__link:hover::after { width: 100%; }

.navbar__actions { display: flex; align-items: center; gap: 18px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px; height: 32px;
}
.nav-toggle span {
  display: block; height: 2px; width: 100%;
  background: var(--white);
  border-radius: 2px;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------------------------- 8. HERO ---------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Anchored near the top (not vertically centered) so there's a small,
     consistent gap below the fixed navbar instead of a big empty gap
     before the heading. */
  justify-content: flex-start;
  padding-top: 150px;
  overflow: hidden;
  background: var(--bg);
  /* 3D depth: gives every child layer below a real vanishing point so the
     mouse-driven parallax in script.js reads as true depth, not a flat slide */
  perspective: 1400px;
}

.hero__bg { position: absolute; inset: 0; z-index: 0; transform-style: preserve-3d; }

.hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 75%);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* Depth layers — each holds one glow at its own simulated Z-distance.
   Negative translateZ = further back (moves less / more blurred-feeling),
   positive translateZ = closer to the viewer (moves more with the cursor). */
.hero__depth-layer {
  position: absolute; inset: 0;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.hero__depth-layer--back { transform: translateZ(-160px) scale(1.12); }
.hero__depth-layer--front { transform: translateZ(90px) scale(0.94); }

.hero__glow {
  position: absolute;
  width: 620px; height: 620px;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.55;
  animation: heroGlowFloat 12s ease-in-out infinite;
}
.hero__glow--blue { background: radial-gradient(circle, rgba(61,123,255,0.55), transparent 70%); top: -160px; left: -120px; }
.hero__glow--purple { background: radial-gradient(circle, rgba(155,91,255,0.5), transparent 70%); bottom: -200px; right: -140px; animation-delay: -6s; }
@keyframes heroGlowFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, -20px) scale(1.08); }
}

.particle-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.hero__content {
  position: relative; z-index: 2; text-align: center; padding-top: 20px;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.hero__title {
  font-size: clamp(2.6rem, 7vw, 5.6rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  max-width: 980px;
  margin: 0 auto 26px;
}

.hero__subtitle {
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: var(--grey);
  margin-bottom: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.hero__subtitle-prefix { color: var(--grey-dim); }
.hero__rotator-word {
  font-family: var(--font-display);
  font-size: 1.08em;
  font-weight: 700;
  position: relative;
  /* No pill/border/background — just bold text. Colour + glow are set
     per-word by script.js so every rotating phrase gets its own highlight. */
  color: var(--blue-soft);
  transition: opacity 0.4s ease, transform 0.4s ease, color 0.4s ease, text-shadow 0.4s ease;
}
.hero__rotator-word.is-swapping { opacity: 0; transform: translateY(6px); }

.hero__cta { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }

.hero__scroll {
  position: absolute;
  bottom: 36px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  z-index: 2;
}
.hero__scroll-line {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, var(--blue-soft), transparent);
  animation: scrollLine 2s ease-in-out infinite;
}
.hero__scroll-text { font-size: 0.7rem; letter-spacing: 0.2em; color: var(--grey-dim); text-transform: uppercase; }
@keyframes scrollLine { 0%,100% { opacity: 0.3; transform: scaleY(0.6); } 50% { opacity: 1; transform: scaleY(1); } }

/* ---------------------------- 9. MARQUEES (Reel + AI Portfolio) ---------------------------- */
.marquee-wrap { position: relative; }
.marquee-wrap::before, .marquee-wrap::after {
  content: "";
  position: absolute; top: 0; bottom: 0;
  width: 120px; z-index: 3; pointer-events: none;
}
.marquee-wrap::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
.marquee-wrap::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); }

.marquee { overflow: hidden; padding: 20px 0; }
.marquee__track {
  display: flex;
  gap: 24px;
  width: max-content;
  will-change: transform;
}
.marquee--left .marquee__track { animation: marqueeLeft 55s linear infinite; }
.marquee--right .marquee__track { animation: marqueeRight 55s linear infinite; }
.marquee.is-paused .marquee__track { animation-play-state: paused; }

/* On touch devices (phones/tablets) the auto-scrolling animation fights
   with a finger trying to tap a card's sound button or swipe through the
   row — a tap can land mid-motion and get lost, and there's no way to
   deliberately browse back and forth. So on touch, drop the animation
   entirely and turn the row into a real native horizontal scroller
   instead: taps land exactly where you touch, and swiping moves you
   through the reels/YouTube cards on purpose, snapping neatly card by
   card. JS skips its clone-for-seamless-loop step on these devices too,
   since a manually-scrolled row doesn't need the doubled content a
   looping animation does. */
@media (hover: none) and (pointer: coarse) {
  .marquee {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .marquee::-webkit-scrollbar { display: none; }
  .marquee__track { animation: none !important; }
  .reel-card, .ai-card, .youtube-card { scroll-snap-align: start; }
}

/* NOTE: JS duplicates each track's cards once (appends a clone of itself),
   so the track is always exactly 2x the width of the original card set.
   Animating to/from -50% therefore produces a perfectly seamless loop. */
@keyframes marqueeLeft { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marqueeRight { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* Reel card (9:16) */
.reel-card {
  position: relative;
  flex: 0 0 auto;
  width: 240px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  transition: transform var(--transition), border-color var(--transition);
}
.reel-card:hover { border-color: rgba(93, 140, 255, 0.4); }
.reel-card__media { position: relative; width: 100%; aspect-ratio: 9 / 16; background: linear-gradient(160deg, #101018, #0a0a10); overflow: hidden; }
.reel-card__video { width: 100%; height: 100%; object-fit: cover; }
.reel-card__fallback {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  text-align: center;
  background: linear-gradient(160deg, rgba(61,123,255,0.15), rgba(155,91,255,0.12));
  color: var(--grey);
  font-size: 0.75rem;
  padding: 20px;
}
.reel-card__fallback span { font-size: 1.8rem; }
.reel-card__fallback code { color: var(--blue-soft); font-family: var(--font-display); }
.reel-card__media.is-missing .reel-card__fallback { display: flex; }
.reel-card__media.is-missing .reel-card__video { display: none; }

.reel-card__badge {
  position: absolute; top: 14px; left: 14px;
  padding: 5px 12px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 100px;
  background: rgba(5,5,5,0.55);
  border: 1px solid var(--border-soft);
  backdrop-filter: blur(8px);
  z-index: 2;
}
.reel-card__sound {
  position: absolute; bottom: 14px; right: 14px;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  backdrop-filter: blur(8px);
  /* Semi-visible by default (not opacity:0 until hover) — on touch devices
     there is no hover, and a sound control needs to be discoverable without
     one, unlike the old purely-decorative play icon it replaces. */
  opacity: 0.6; transform: translateY(0);
  transition: opacity var(--transition-fast), transform var(--transition-fast), background var(--transition-fast);
  z-index: 2;
}
.reel-card__sound svg { width: 16px; height: 16px; }
.reel-card:hover .reel-card__sound,
.reel-card__sound:focus-visible { opacity: 1; }
.reel-card__sound:hover { background: var(--gradient-brand); }

/* Caption overlays the video (transparent, fading to a soft scrim at the
   very bottom) instead of a solid block below it — this keeps the whole
   card at a true 9:16 reel size instead of video-height + extra footer. */
.reel-card__info {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.35) 55%, transparent 100%);
  padding: 32px 16px 16px;
}
.reel-card__client { font-size: 0.95rem; font-weight: 700; margin-bottom: 4px; }
.reel-card__category { font-size: 0.75rem; font-weight: 700; color: var(--grey-dim); }

/* AI card — matches Reel Editing Portfolio card size exactly (vertical 9:16, 240px) */
.ai-card {
  position: relative;
  flex: 0 0 auto;
  width: 240px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  transition: transform var(--transition), border-color var(--transition);
}
.ai-card:hover { border-color: rgba(185, 139, 255, 0.4); }
.ai-card__media { position: relative; width: 100%; aspect-ratio: 9 / 16; background: linear-gradient(160deg, #12081f, #060610); overflow: hidden; }
.ai-card__video { width: 100%; height: 100%; object-fit: cover; }
.ai-card__fallback {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  text-align: center;
  background: linear-gradient(160deg, rgba(155,91,255,0.18), rgba(61,123,255,0.1));
  color: var(--grey);
  font-size: 0.75rem;
  padding: 20px;
}
.ai-card__fallback span { font-size: 1.8rem; }
.ai-card__fallback code { color: var(--purple-soft); font-family: var(--font-display); }
.ai-card__media.is-missing .ai-card__fallback { display: flex; }
.ai-card__media.is-missing .ai-card__video { display: none; }
.ai-card__badge {
  position: absolute; top: 14px; left: 14px;
  padding: 5px 12px;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 100px;
  background: rgba(5,5,5,0.55);
  border: 1px solid var(--border-soft);
  backdrop-filter: blur(8px);
  z-index: 2;
}
.ai-card__sound {
  position: absolute; bottom: 14px; right: 14px;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  backdrop-filter: blur(8px);
  opacity: 0.6; transform: translateY(0);
  transition: opacity var(--transition-fast), transform var(--transition-fast), background var(--transition-fast);
  z-index: 2;
}
.ai-card__sound svg { width: 16px; height: 16px; }
.ai-card:hover .ai-card__sound,
.ai-card__sound:focus-visible { opacity: 1; }
.ai-card__sound:hover { background: var(--gradient-brand); }

/* Same transparent overlay treatment as .reel-card__info above. */
.ai-card__info {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.35) 55%, transparent 100%);
  padding: 32px 16px 16px;
}
.ai-card__info h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 4px; }
.ai-card__info span { font-size: 0.75rem; font-weight: 700; color: var(--grey-dim); }

/* ---------------------------- 10. YOUTUBE EDITING (landscape marquee) ---------------------------- */
/* Same card mechanics as Reel/AI (media + overlay caption + play button in
   a marquee track), just widescreen (16:9, actual YouTube video proportions)
   instead of vertical 9:16 — replaces the old broken "Featured Projects" grid. */
.youtube-card {
  position: relative;
  /* Sized as a share of the viewport (not a fixed px) so roughly the same
     NUMBER of cards is visible regardless of screen size: ~23vw + the 24px
     track gap lands on ~4 cards per view on a typical laptop/desktop width,
     clamped so it never gets absurdly small on narrow windows or absurdly
     large on ultra-wide monitors. Mobile gets its own much larger vw value
     below so exactly ~1 card fills the phone screen at a time. */
  flex: 0 0 clamp(260px, 23vw, 340px);
  flex-shrink: 0;
  width: clamp(260px, 23vw, 340px);
  max-width: 340px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  transition: transform var(--transition), border-color var(--transition);
}
.youtube-card:hover { border-color: rgba(93, 140, 255, 0.4); }
.youtube-card__media { position: relative; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; background: linear-gradient(160deg, #101018, #0a0a10); overflow: hidden; }
.youtube-card__video { display: block; width: 100% !important; height: 100% !important; max-width: 100%; object-fit: cover; }
/* WordPress theme: iframe embeds (YouTube/Vimeo/Instagram links) fill the same box a <video> would */
.reel-card__media iframe.reel-card__video,
.ai-card__media iframe.ai-card__video,
.youtube-card__media iframe.youtube-card__video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.youtube-card__fallback {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  background: linear-gradient(160deg, rgba(61,123,255,0.15), rgba(155,91,255,0.12));
  color: var(--grey);
  /* This card is intentionally small (a compact landscape thumbnail, not a
     mini article) — there isn't room for icon + instructional paragraph +
     title/category caption all in one ~124px-tall box, so only the icon
     shows here; the "no video yet" detail lives in wp-admin, not on-page. */
  padding: 6px 8px 44px;
}
.youtube-card__fallback span { font-size: 1.3rem; }
.youtube-card__fallback p { display: none; }
.youtube-card__fallback code { color: var(--blue-soft); font-family: var(--font-display); }
.youtube-card__media.is-missing .youtube-card__fallback { display: flex; }
.youtube-card__media.is-missing .youtube-card__video { display: none; }

.youtube-card__sound {
  /* Top-right, not bottom-right — the card is short enough that a
     bottom-anchored button would sit on top of the title/category caption. */
  position: absolute; top: 8px; right: 8px;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  backdrop-filter: blur(8px);
  opacity: 0.6; transform: translateY(0);
  transition: opacity var(--transition-fast), transform var(--transition-fast), background var(--transition-fast);
  z-index: 2;
}
.youtube-card__sound svg { width: 12px; height: 12px; }
.youtube-card:hover .youtube-card__sound,
.youtube-card__sound:focus-visible { opacity: 1; }
.youtube-card__sound:hover { background: var(--gradient-brand); }

/* Shared sound on/off icon toggle: both icon states are always in the
   DOM; aria-pressed (flipped by script.js on click) controls which one
   shows. Default (aria-pressed="false", videos start muted) shows the
   "sound off" icon. */
.sound-toggle.is-unmuted,
.sound-toggle[aria-pressed="true"] { background: var(--gradient-brand); opacity: 1; }
.sound-toggle .sound-toggle__icon-on { display: none; }
.sound-toggle[aria-pressed="true"] .sound-toggle__icon-off { display: none; }
.sound-toggle[aria-pressed="true"] .sound-toggle__icon-on { display: block; }

/* Same transparent overlay treatment as .reel-card__info above. */
.youtube-card__info {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
  padding: 20px 10px 8px;
}
.youtube-card__client { font-size: 0.78rem; font-weight: 700; margin-bottom: 2px; line-height: 1.2; }
.youtube-card__category { font-size: 0.62rem; font-weight: 700; color: var(--grey-dim); }

/* ---------------------------- 11. SERVICES ---------------------------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.service-card {
  padding: 34px 26px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  transition: transform var(--transition), border-color var(--transition), background var(--transition);
}
.service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(93,140,255,0.35);
  background: linear-gradient(160deg, rgba(61,123,255,0.08), rgba(155,91,255,0.05));
}
.service-card__icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-soft);
  color: var(--blue-soft);
  margin-bottom: 22px;
}
.service-card__icon svg { width: 22px; height: 22px; }
.service-card h3 { font-size: 1.05rem; margin-bottom: 10px; }
.service-card p { font-size: 0.88rem; color: var(--grey); }

/* ---------------------------- 12. WHY MARKLIX (TIMELINE) ---------------------------- */
.timeline { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; padding-top: 20px; }
.timeline__line {
  position: absolute;
  top: 21px; left: 0; right: 0;
  height: 2px;
  background: var(--border-soft);
  z-index: 0;
}
.timeline__line-fill {
  position: absolute; top: 0; left: 0;
  height: 100%; width: 0%;
  background: var(--gradient-brand);
  transition: width 1.2s cubic-bezier(0.16,1,0.3,1);
}
.timeline__step { position: relative; z-index: 1; text-align: center; }
.timeline__node {
  width: 44px; height: 44px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  color: var(--grey);
  transition: color var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.timeline__step.is-active .timeline__node {
  color: #fff;
  border-color: var(--blue-soft);
  box-shadow: 0 0 22px rgba(93,140,255,0.55);
  background: var(--gradient-brand);
}
.timeline__step h3 { font-size: 1rem; margin-bottom: 8px; }
.timeline__step p { font-size: 0.82rem; color: var(--grey-dim); }

/* ---------------------------- 13. STATS ---------------------------- */
.stats { padding: 80px 0; }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.stat-card {
  padding: 40px 20px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
}
.stat-card__number {
  display: block;
  font-family: var(--font-luxury);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 900;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-card__label { font-size: 0.85rem; font-weight: 700; color: var(--grey); letter-spacing: 0.04em; text-transform: uppercase; }

/* ---------------------------- 14. TESTIMONIALS ---------------------------- */
.testimonial-slider { overflow: hidden; padding: 10px 0 40px; }
/* Unlike the Reel/AI/YouTube marquees (which loop continuously and are
   SUPPOSED to always show a sliver of the next card as a "there's more"
   cue), a partially-visible card here reads as cut-off/broken rather than
   an intentional carousel hint. So this doesn't use the endless linear
   marquee animation those use — script.js steps it a whole page at a
   time instead (transform + transition below), always resting on a
   clean card boundary between moves. */
.testimonial-slider__track {
  display: flex;
  gap: 24px;
  width: max-content;
  transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}

.testimonial-card {
  flex: 0 0 auto;
  /* Sized so ~2 cards fit across the container at once (container caps at
     var(--container-w) = 1240px with 32px side padding, so this is a
     reliable fixed value rather than a viewport-relative one — unlike the
     full-bleed YouTube marquee, this slider never exceeds the container's
     width no matter how wide the monitor is). */
  width: 560px;
  padding: 32px 28px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.045);
  border: 1px solid var(--border-soft);
  backdrop-filter: blur(20px) saturate(140%);
}
.testimonial-card__stars { color: var(--blue-soft); margin-bottom: 16px; letter-spacing: 3px; }
.testimonial-card p { font-size: 0.95rem; color: var(--white); margin-bottom: 22px; line-height: 1.7; }
.testimonial-card__author { display: flex; flex-direction: column; }
.testimonial-card__name { font-weight: 700; font-size: 0.9rem; }
.testimonial-card__role { font-size: 0.78rem; font-weight: 700; color: var(--grey-dim); }

.logo-strip {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 50px;
  padding-top: 40px;
  border-top: 1px solid var(--border-soft);
}
.logo-strip__item {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--grey-dim);
  opacity: 0.7;
  transition: opacity var(--transition-fast), color var(--transition-fast);
}
.logo-strip__item:hover { opacity: 1; color: var(--white); }

/* ---------------------------- 15. CONTACT ---------------------------- */
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 70px;
  align-items: start;
}
.contact__intro .section-desc { margin-bottom: 34px; }
.contact__info { display: flex; flex-direction: column; gap: 10px; margin-bottom: 34px; }
.contact__info-item { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--white); transition: color var(--transition-fast); }
.contact__info-item:hover { color: var(--blue-soft); }

.social-icons { display: flex; gap: 14px; }
.social-icons__link, .social-icons a {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  color: var(--grey);
  transition: color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.social-icons__link svg, .social-icons a svg { width: 18px; height: 18px; }
.social-icons__link:hover, .social-icons a:hover { color: var(--blue-soft); border-color: var(--blue-soft); transform: translateY(-3px); }

.contact__offices {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid var(--border-soft);
}
.contact__office { flex: 1 1 200px; }
.contact__office-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--white);
  margin-bottom: 6px;
}
.contact__office p { font-size: 0.85rem; color: var(--grey); line-height: 1.6; max-width: 260px; }

.contact-form {
  padding: 40px;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.contact-form__field { display: flex; flex-direction: column; gap: 8px; }
.contact-form__field label { font-size: 0.8rem; font-weight: 700; color: var(--grey); letter-spacing: 0.03em; }
.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea {
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-soft);
  color: var(--white);
  transition: border-color var(--transition-fast), background var(--transition-fast);
  resize: vertical;
}
.contact-form__field input:focus,
.contact-form__field select:focus,
.contact-form__field textarea:focus {
  outline: none;
  border-color: var(--blue-soft);
  background: rgba(255,255,255,0.05);
}
.contact-form__field select option { background: var(--bg-elevated); color: var(--white); }
.contact-form__status { font-size: 0.85rem; color: var(--blue-soft); min-height: 20px; }

/* ---------------------------- 16. FOOTER ---------------------------- */
.footer { padding: 70px 0 30px; border-top: 1px solid var(--border-soft); }
.footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 40px;
  padding-bottom: 44px;
}
.footer__brand p { color: var(--grey-dim); font-size: 0.85rem; margin-top: 12px; max-width: 260px; }
.footer__nav { display: flex; gap: 26px; flex-wrap: wrap; }
.footer__nav a { color: var(--grey); font-size: 0.88rem; font-weight: 700; transition: color var(--transition-fast); }
.footer__nav a:hover { color: var(--white); }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 26px;
  border-top: 1px solid var(--border-soft);
}
.footer__bottom p { font-size: 0.8rem; color: var(--grey-dim); }

/* Fixed WhatsApp button — present on every page (lives in footer.php,
   outside <footer>, positioned fixed to the viewport, not the page flow). */
.whatsapp-float {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #25d366;
  color: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  z-index: 500;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.whatsapp-float svg { width: 30px; height: 30px; }
.whatsapp-float:hover { transform: scale(1.08); box-shadow: 0 8px 24px rgba(37,211,102,0.55); }

/* Small "expand" affordance in the corner of any card with a video,
   hinting that a click opens the full lightbox (independent of the
   sound-toggle button, which only appears on self-hosted <video> cards). */
.card-expand-hint {
  position: absolute;
  bottom: 12px; left: 12px;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.45);
  color: #fff;
  opacity: 0.7;
  pointer-events: none;
  z-index: 2;
}
.card-expand-hint svg { width: 13px; height: 13px; }
.reel-card:hover .card-expand-hint,
.ai-card:hover .card-expand-hint,
.youtube-card:hover .card-expand-hint { opacity: 1; }

/* ---------------------------- VIDEO LIGHTBOX ---------------------------- */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 700;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.video-modal.is-open { display: flex; }
.video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5,5,8,0.9);
  backdrop-filter: blur(6px);
}
.video-modal__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Landscape (YouTube) videos need a much wider lightbox than the
   vertical Reel/AI ones — toggled via a modifier class in script.js
   based on the clicked card's data-modal-aspect. */
.video-modal__inner.is-landscape { max-width: 920px; }
.video-modal__media {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  background: #000;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.video-modal__inner.is-landscape .video-modal__media { aspect-ratio: 16 / 9; }
.video-modal__media video,
.video-modal__media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.video-modal__title {
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 14px;
  text-align: center;
}
.video-modal__close {
  position: absolute;
  top: -46px; right: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.video-modal__close:hover { background: var(--gradient-brand); transform: rotate(90deg); }
.video-modal__close svg { width: 16px; height: 16px; }

@media (max-width: 560px) {
  .video-modal { padding: 20px 16px; }
  .video-modal__close { top: -42px; width: 32px; height: 32px; }
}

.back-to-top {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-soft);
  color: var(--white);
  transition: transform var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
  opacity: 0;
  pointer-events: none;
}
.back-to-top.is-visible { opacity: 1; pointer-events: auto; }
.back-to-top svg { width: 18px; height: 18px; }
.back-to-top:hover { transform: translateY(-4px); border-color: var(--blue-soft); }

/* ---------------------------- 17. STAGGER REVEAL HELPER ---------------------------- */
.fade-up:nth-child(1) { transition-delay: 0s; }
.fade-up:nth-child(2) { transition-delay: 0.08s; }
.fade-up:nth-child(3) { transition-delay: 0.16s; }
.fade-up:nth-child(4) { transition-delay: 0.24s; }
.fade-up:nth-child(5) { transition-delay: 0.32s; }
.fade-up:nth-child(6) { transition-delay: 0.4s; }
.fade-up:nth-child(7) { transition-delay: 0.48s; }
.fade-up:nth-child(8) { transition-delay: 0.56s; }

/* ---------------------------- 18. RESPONSIVE ---------------------------- */
@media (max-width: 1080px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: repeat(3, 1fr); row-gap: 50px; }
  .timeline__line { display: none; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .contact__grid { grid-template-columns: 1fr; gap: 50px; }
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .navbar__actions .btn--small { display: none; }

  .nav-links.is-open {
    display: flex;
    position: fixed;
    top: 68px; left: 16px; right: 16px;
    flex-direction: column;
    gap: 4px;
    padding: 18px;
    border-radius: var(--radius-md);
    background: rgba(10,10,12,0.96);
    border: 1px solid var(--border-soft);
    backdrop-filter: blur(20px);
    z-index: 400;
  }
  .nav-links.is-open .nav-links__link { padding: 12px 8px; }

  .section { padding: 90px 0; }
  .reel-portfolio { padding-bottom: 36px; }
  .ai-portfolio { padding-top: 36px; padding-bottom: 36px; }
  .youtube-portfolio { padding-top: 36px; padding-bottom: 40px; }
  .services { padding-top: 40px; }
  .contact-form__row { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: repeat(2, 1fr); }
  .footer__inner { flex-direction: column; }
  .footer__bottom { flex-direction: column; gap: 16px; align-items: flex-start; }

  /* On phones the hero's title/subtitle/CTA block is much shorter than a
     full 100vh box, and the scroll cue was pinned to the viewport bottom
     regardless — that left a huge dead black gap between the CTA buttons
     and the scroll indicator (and again below it before the next section).
     Let the hero size itself to its actual content instead, and bring the
     scroll cue back into normal flow right under the CTA. */
  .hero {
    min-height: 0;
    padding-bottom: 64px;
  }
  .hero__scroll {
    position: static;
    margin-top: 56px;
  }
}

@media (max-width: 560px) {
  .container { padding: 0 20px; }
  .whatsapp-float { width: 48px; height: 48px; bottom: 16px; right: 16px; }
  .whatsapp-float svg { width: 26px; height: 26px; }
  .hero__cta { flex-direction: column; width: 100%; }
  .hero__cta .btn { width: 100%; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .timeline { grid-template-columns: 1fr 1fr; }
  .reel-card { width: 190px; }
  .ai-card { width: 190px; }
  /* ~1 card fills the phone screen at a time (vs. the ~4-per-view desktop
     sizing above) — 85vw leaves just enough of a sliver of the next card
     peeking in at the edge to signal "swipe/scroll for more". */
  .youtube-card { width: 85vw; max-width: 85vw; flex-basis: 85vw; }
  .testimonial-card { width: 280px; }
  .contact-form { padding: 26px; }

  /* Copyright line is redundant clutter on a phone-width footer — keep
     just the back-to-top button, right-aligned since it's now the only
     child left in the row. */
  .footer__bottom p { display: none; }
  .footer__bottom { justify-content: flex-end; }

  /* Smaller, tighter hero heading so it settles into 2 lines on phones
     instead of 4; "People Remember." is locked to a single line either way. */
  .hero__title { font-size: clamp(1.7rem, 8.5vw, 2.4rem); }
  .hero__title .text-gradient { white-space: nowrap; }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}