/* ============================================================
   Hero — Remotion looping video bg + HTML overlay (asymmetric)
   ============================================================ */
.hero {
  position: relative;
  min-height: min(92vh, 820px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--aurora);
  background-size: cover;
  color: var(--moon);
}
.hero__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
/* Readability veil — diffuse, weighted to the text side (left) */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(60% 90% at 22% 50%, rgba(20,49,58,0.72) 0%, rgba(20,49,58,0.25) 55%, transparent 80%),
    linear-gradient(180deg, rgba(20,49,58,0.35) 0%, transparent 30%, rgba(46,26,46,0.45) 100%);
}
.hero__inner { position: relative; z-index: 2; width: 100%; }

/* Off-center: text occupies left ~58%, breathing room right */
.hero__content { max-width: 660px; }
.hero__eyebrow { color: var(--lavender); }
.hero__title {
  color: var(--moon);
  font-size: var(--fs-h1);
  margin-bottom: 1.2rem;
  text-wrap: balance;
}
.hero__title .accent { color: var(--rose); font-style: italic; }
.hero__lead {
  color: rgba(244,241,236,0.88);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  max-width: 48ch;
  margin-bottom: 1.8rem;
}
.hero__actions { margin-bottom: 1.6rem; }
.hero__trust {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.95rem; color: rgba(244,241,236,0.85);
  background: rgba(20,49,58,0.4); border: 1px solid var(--line-dark);
  padding: 0.5rem 1rem; border-radius: var(--radius-pill);
}
.hero__trust .star { color: var(--thread); }

/* Floating decorative orb in the open right space */
.hero__orb {
  position: absolute; z-index: 1; border-radius: 50%;
  width: clamp(220px, 30vw, 460px); aspect-ratio: 1;
  right: -4%; top: 18%;
  background: radial-gradient(circle at 35% 35%, var(--glow), transparent 70%);
  filter: blur(8px);
  animation: ajay-breathe 9s var(--ease) infinite;
}

@keyframes ajay-breathe {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.08); opacity: 0.95; }
}

/* Account for fixed transparent header */
.has-transparent-header .hero { padding-top: var(--header-h); }

/* Reduced motion / no video: poster still + no animation */
@media (prefers-reduced-motion: reduce) {
  .hero__bg { display: none; }
  .hero { background-image: var(--aurora); }
  .hero__orb { animation: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   Split hero with horizontal sliding keyword gallery
   ============================================================ */
.hero--split { min-height: min(94vh, 880px); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero--split .hero__content { max-width: 600px; }

.hero__media { position: relative; z-index: 2; }

.hero-slider { position: relative; }
.hero-slider__viewport {
  overflow: hidden;
  border-radius: 26px 26px 30px 24px; /* organic */
  box-shadow: var(--shadow-soft), 0 0 70px -20px var(--glow);
}
.hero-slider__track {
  display: flex;
  will-change: transform;
  transition: transform 0.7s var(--ease);
}
.hero-slide {
  flex: 0 0 100%;
  margin: 0;
  aspect-ratio: 3 / 2;
}
.hero-slide img,
.hero-slide picture { display: block; width: 100%; height: 100%; }
.hero-slide img { object-fit: cover; }

/* Arrows */
.hero-slider__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer; z-index: 3;
  color: var(--ink);
  background: rgba(244, 241, 236, 0.86);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow-rose);
  transition: background 0.25s var(--ease), transform 0.25s var(--ease), color 0.25s var(--ease);
}
.hero-slider__arrow:hover { background: var(--rose); color: #fff; }
.hero-slider__arrow--prev { left: 12px; }
.hero-slider__arrow--next { right: 12px; }
.hero-slider__arrow:focus-visible { outline: 3px solid var(--rose); outline-offset: 2px; }

/* Dots */
.hero-slider__dots {
  display: flex; gap: 0.5rem; justify-content: center;
  margin-top: 1rem;
}
.hero-slider__dot {
  width: 9px; height: 9px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(244, 241, 236, 0.4);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.hero-slider__dot.is-active { background: var(--rose); transform: scale(1.35); }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: clamp(1.6rem, 6vw, 2.4rem); }
  .hero--split .hero__content { max-width: none; }
  .hero__orb { display: none; }
}

/* Stop the section pseudo-veil from washing out the slider on small screens */
@media (max-width: 900px) {
  .hero--split::after { background:
    linear-gradient(180deg, rgba(20,49,58,0.55) 0%, rgba(20,49,58,0.15) 40%, rgba(46,26,46,0.35) 100%); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slider__track { transition: none; }
}

/* Static hero strip for service/about/inner pages */
.page-hero {
  position: relative; overflow: hidden;
  background: var(--aurora); color: var(--moon);
  padding: calc(var(--header-h) + clamp(2.5rem, 6vw, 4.5rem)) 0 clamp(3rem, 6vw, 5rem);
}
.page-hero::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 100% at 25% 40%, rgba(20,49,58,0.55), transparent 70%);
}
.page-hero__inner { position: relative; z-index: 2; max-width: 720px; }
.page-hero__title { color: var(--moon); margin: 0.6rem 0 0.8rem; }
.page-hero__lead { color: rgba(244,241,236,0.86); font-size: clamp(1.05rem,1.5vw,1.25rem); }
.page-hero__orb { position: absolute; z-index: 1; right: 2%; top: 10%; width: clamp(180px,24vw,380px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 40%, var(--rose-glow), transparent 70%); filter: blur(6px); }

/* Breadcrumbs inside page-hero */
.page-hero .breadcrumbs, .page-hero .breadcrumbs a { color: rgba(244,241,236,0.8); font-size: 0.85rem; }
.page-hero .breadcrumbs a:hover { color: var(--moon); }