/* ==========================================================================
   MindMonks — "Stillness Field" hero
   A slow gravity field: suspended orbs held in orbit around a breathing core,
   drifting light behind them. Everything is CSS transforms + opacity on an
   inline SVG, so it costs a few kilobytes and no main-thread work.
   With prefers-reduced-motion the same composition holds perfectly still.
   ========================================================================== */

.mm-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 6rem) clamp(3rem, 2rem + 5vw, 6.5rem);
  background: linear-gradient(
    172deg,
    var(--mm-neutral-025) 0%,
    var(--mm-neutral-050) 44%,
    var(--mm-teal-050) 100%
  );
}

/* Two very large, very soft light sources drifting behind everything.
   They are what makes the first fold feel atmospheric rather than flat. */
.mm-hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: -1;
  will-change: transform;
}

.mm-hero__glow--teal {
  width: clamp(20rem, 46vw, 44rem);
  aspect-ratio: 1;
  right: -12%;
  top: -18%;
  background: radial-gradient(
    circle at 50% 50%,
    var(--mm-glow-teal),
    var(--mm-glow-teal-out) 68%
  );
  animation: mm-drift-a 34s var(--mm-ease-calm) infinite alternate;
}

.mm-hero__glow--olive {
  width: clamp(16rem, 38vw, 36rem);
  aspect-ratio: 1;
  left: -14%;
  bottom: -22%;
  background: radial-gradient(
    circle at 50% 50%,
    var(--mm-glow-olive),
    var(--mm-glow-olive-out) 68%
  );
  animation: mm-drift-b 41s var(--mm-ease-calm) infinite alternate;
}

.mm-hero__glow--purple {
  width: clamp(12rem, 26vw, 24rem);
  aspect-ratio: 1;
  right: 22%;
  bottom: -14%;
  background: radial-gradient(
    circle at 50% 50%,
    var(--mm-glow-purple),
    var(--mm-glow-purple-out) 70%
  );
  animation: mm-drift-a 47s var(--mm-ease-calm) infinite alternate-reverse;
}

@keyframes mm-drift-a {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(-3.5%, 4%, 0) scale(1.08);
  }
}

@keyframes mm-drift-b {
  from {
    transform: translate3d(0, 0, 0) scale(1.04);
  }
  to {
    transform: translate3d(4%, -3%, 0) scale(0.96);
  }
}

/* -------------------------------------------------------------------------
   Hero layout — flex, single column on phones in the required reading order
   ------------------------------------------------------------------------- */

.mm-hero__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
}

.mm-hero__content {
  flex: 1 1 min(100%, 27rem);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mm-space-sm);
  order: 1;
}

.mm-hero__visual {
  flex: 1 1 min(100%, 22rem);
  min-width: 0;
  display: flex;
  justify-content: center;
  order: 2;
}

.mm-hero__title {
  font-size: var(--mm-text-hero);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0;
  max-width: 15ch;
  color: var(--mm-teal-900);
}

.mm-hero__title em {
  font-style: italic;
  color: var(--mm-olive-700);
}

.mm-hero__lead {
  font-size: var(--mm-text-lg);
  color: var(--mm-text-secondary);
  max-width: 46ch;
  line-height: var(--mm-leading-normal);
  margin: 0;
}

.mm-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mm-space-2xs);
  margin-top: var(--mm-space-2xs);
}

.mm-hero__trust {
  margin-top: var(--mm-space-xs);
  padding-top: var(--mm-space-sm);
  border-top: 1px solid var(--mm-border);
}

/* On phones the buttons go full width — they are the primary action */
@media (max-width: 30rem) {
  .mm-hero__actions .mm-btn {
    width: 100%;
  }
}

/* -------------------------------------------------------------------------
   The field itself
   ------------------------------------------------------------------------- */

.mm-stillness {
  position: relative;
  width: min(100%, 32rem);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* -------------------------------------------------------------------------
   The mobile hero

   The field used to wrap onto a second flex row, which put the whole desktop
   visual underneath a full column of text: the first screen was type, and the
   composition only appeared once you had scrolled past the buttons.

   Below 48rem it leaves the flow entirely and becomes an ambient backdrop
   anchored to the top-right, bleeding off the edge and fading out through a
   radial mask. The headline then sits into its lower-left, so the two read as
   one composition — and brand, headline, visual and both calls to action all
   land inside the first screen.
   ------------------------------------------------------------------------- */

@media (max-width: 47.99rem) {
  .mm-hero {
    padding-block: 0 clamp(2rem, 1rem + 4vw, 3rem);
  }

  .mm-hero__inner {
    position: relative;
    display: block;
  }

  .mm-hero__visual {
    position: absolute;
    inset: -1.5rem -12% auto auto;
    width: min(20rem, 76%);
    justify-content: flex-end;
    opacity: 0.92;
    pointer-events: none;
    /* Behind the copy. .mm-hero isolates, so this stays inside the hero's own
       stacking context and cannot slide under the header. */
    z-index: -1;
    -webkit-mask-image: radial-gradient(closest-side, var(--mm-black) 62%, transparent 100%);
    mask-image: radial-gradient(closest-side, var(--mm-black) 62%, transparent 100%);
  }

  .mm-hero__content {
    /* Enough clearance that the eyebrow starts below the densest part of the
       field, while the headline still overlaps its lower edge. */
    padding-top: 5.25rem;
  }

  .mm-stillness {
    width: 100%;
  }

  .mm-hero__title {
    max-width: 14ch;
  }

  .mm-hero__trust {
    margin-top: var(--mm-space-2xs);
    padding-top: var(--mm-space-xs);
  }
}

/* Tablets keep the two-column composition but with a smaller field */
@media (min-width: 48rem) and (max-width: 64rem) {
  .mm-stillness {
    width: min(100%, 22rem);
  }
}

.mm-stillness__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Every rotating group spins around the exact centre of the viewBox */
.mm-stillness__orbit {
  transform-origin: 300px 300px;
  transform-box: view-box;
}

.mm-stillness__orbit--1 {
  animation: mm-rotate 96s linear infinite;
}

.mm-stillness__orbit--2 {
  animation: mm-rotate 138s linear infinite reverse;
}

.mm-stillness__orbit--3 {
  animation: mm-rotate 178s linear infinite;
}

@keyframes mm-rotate {
  to {
    transform: rotate(360deg);
  }
}

/* Rings breathe very slightly in and out, like slow respiration */
.mm-stillness__ring {
  fill: none;
  stroke-linecap: round;
  transform-origin: 300px 300px;
  transform-box: view-box;
  animation: mm-ring-breathe 11s var(--mm-ease-calm) infinite;
}

.mm-stillness__ring--2 {
  animation-duration: 14s;
  animation-delay: -3s;
}

.mm-stillness__ring--3 {
  animation-duration: 17s;
  animation-delay: -6s;
}

@keyframes mm-ring-breathe {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.75;
  }
  50% {
    transform: scale(1.022);
    opacity: 1;
  }
}

/* The core: a soft disc of light that breathes under the emblem */
.mm-stillness__core {
  transform-origin: 300px 300px;
  transform-box: view-box;
  animation: mm-core-breathe 8.5s var(--mm-ease-calm) infinite;
}

@keyframes mm-core-breathe {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.92;
  }
  50% {
    transform: scale(1.045);
    opacity: 1;
  }
}

/* The halo echoes the purple arc above the monk in the logo */
.mm-stillness__halo {
  transform-origin: 300px 300px;
  transform-box: view-box;
  animation: mm-halo 13s var(--mm-ease-calm) infinite;
}

@keyframes mm-halo {
  0%,
  100% {
    opacity: 0.32;
    transform: scale(0.99) rotate(0deg);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.03) rotate(6deg);
  }
}

/* Orbs suspended on the rings — each also bobs on its own slow cycle */
.mm-stillness__orb {
  transform-box: fill-box;
  transform-origin: center;
  animation: mm-orb-float 9s var(--mm-ease-calm) infinite;
}

.mm-stillness__orb--b {
  animation-duration: 12s;
  animation-delay: -2.5s;
}
.mm-stillness__orb--c {
  animation-duration: 15s;
  animation-delay: -5s;
}
.mm-stillness__orb--d {
  animation-duration: 10.5s;
  animation-delay: -7s;
}
.mm-stillness__orb--e {
  animation-duration: 13.5s;
  animation-delay: -1.5s;
}

@keyframes mm-orb-float {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.85;
  }
  50% {
    transform: scale(1.16);
    opacity: 1;
  }
}

/* The emblem sits in the centre of the field, held by the core's light */
.mm-stillness__emblem {
  position: absolute;
  width: 26%;
  max-width: 8.5rem;
  aspect-ratio: 1;
  object-fit: contain;
  animation: mm-emblem-rise 12s var(--mm-ease-calm) infinite;
  pointer-events: none;
}

@keyframes mm-emblem-rise {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-6px) scale(1.015);
  }
}

/* Free particles: dust suspended in the field, drifting upward forever */
.mm-stillness__particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 50%;
}

.mm-stillness__particle {
  position: absolute;
  width: var(--mm-p-size, 6px);
  height: var(--mm-p-size, 6px);
  border-radius: 50%;
  background: var(--mm-p-color, rgba(141, 151, 56, 0.55));
  left: var(--mm-p-x, 50%);
  top: var(--mm-p-y, 60%);
  opacity: 0;
  animation: mm-particle-drift var(--mm-p-dur, 22s) var(--mm-ease-calm)
    var(--mm-p-delay, 0s) infinite;
  will-change: transform, opacity;
}

@keyframes mm-particle-drift {
  0% {
    transform: translate3d(0, 14px, 0) scale(0.7);
    opacity: 0;
  }
  18% {
    opacity: 0.8;
  }
  72% {
    opacity: 0.55;
  }
  100% {
    transform: translate3d(var(--mm-p-dx, 10px), -46px, 0) scale(1.05);
    opacity: 0;
  }
}

/* -------------------------------------------------------------------------
   Reduced motion: the composition stays, the movement stops.
   Nothing is hidden — the static state is a finished picture in itself.
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .mm-hero__glow,
  .mm-stillness__orbit,
  .mm-stillness__ring,
  .mm-stillness__core,
  .mm-stillness__halo,
  .mm-stillness__orb,
  .mm-stillness__emblem {
    animation: none !important;
  }

  .mm-stillness__particle {
    animation: none !important;
    opacity: 0.55;
    transform: none;
  }

  .mm-stillness__halo {
    opacity: 0.5;
  }
}

/* -------------------------------------------------------------------------
   Compact hero used on interior pages
   ------------------------------------------------------------------------- */

.mm-page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2.25rem, 1.5rem + 3.5vw, 4.5rem);
  background: linear-gradient(168deg, var(--mm-neutral-025), var(--mm-teal-050));
  border-bottom: 1px solid var(--mm-border);
}

.mm-page-hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--mm-space-xs);
  max-width: var(--mm-measure-wide);
}

.mm-page-hero__title {
  margin: 0;
  font-size: var(--mm-text-4xl);
  max-width: 20ch;
  text-wrap: balance;
}

/* --- Variants ----------------------------------------------------------- */

/* Service pages carry the service's own icon, so a visitor arriving from a
   card recognises where they have landed before reading a word. */
.mm-page-hero__medallion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--mm-radius-md);
  background: var(--mm-surface);
  border: 1px solid var(--mm-border-primary);
  color: var(--mm-teal-700);
  box-shadow: var(--mm-shadow-xs);
  margin-bottom: var(--mm-space-2xs);
}

.mm-page-hero--service .mm-page-hero__lead {
  font-size: var(--mm-text-lg);
  max-width: 54ch;
}

/* The quick-book button main.js mirrors into the service hero (see
   heroQuickBook). Full-width on a phone so it reads as a clear, easy
   target rather than a small pill floating under the intro paragraph;
   back to its natural inline-pill width from the point a phone in
   landscape / a small tablet has room to spare. */
[data-mm-hero-book] {
  width: 100%;
}

@media (min-width: 30rem) {
  [data-mm-hero-book] {
    width: auto;
  }
}

/* The stat variant, used where numbers say more than another paragraph. */
.mm-page-hero__stats {
  margin-top: var(--mm-space-sm);
  padding-top: var(--mm-space-sm);
  border-top: 1px solid var(--mm-border);
  max-width: var(--mm-measure-wide);
}

.mm-page-hero--stat .mm-stats__value {
  font-size: var(--mm-text-2xl);
}

/* Policy and legal pages get the quietest treatment in the family. */
.mm-page-hero--plain {
  background: var(--mm-background-alt);
  padding-block: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
}

.mm-page-hero--plain .mm-page-hero__title {
  font-size: var(--mm-text-3xl);
}

.mm-page-hero__lead {
  font-size: var(--mm-text-md);
  color: var(--mm-text-secondary);
  max-width: var(--mm-measure);
  margin: 0;
}

.mm-page-hero .mm-hero__glow--teal {
  width: clamp(14rem, 32vw, 28rem);
  top: -40%;
  right: -8%;
}

.mm-page-hero .mm-hero__glow--olive {
  width: clamp(12rem, 26vw, 22rem);
  bottom: -60%;
  left: -8%;
}

/* Breadcrumbs */
.mm-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  list-style: none;
  margin: 0 0 var(--mm-space-2xs);
  padding: 0;
  font-size: var(--mm-text-xs);
  color: var(--mm-text-muted);
}

.mm-breadcrumbs li {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.mm-breadcrumbs li + li::before {
  content: "/";
  opacity: 0.5;
}

.mm-breadcrumbs a {
  color: var(--mm-text-secondary);
  text-decoration: none;
}