/* DentalGo — demo styles.
   Palette sampled from the reference composition: a mid violet hero with
   layered pink-lilac waves, a near-white page, a soft lavender services band
   and a near-black footer card. */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --purple:     #9d6bc2;
  --purple-600: #8a56b4;
  --purple-700: #6f4193;
  --plum:       #3b2450;
  --lilac:      #db9feb;
  --lilac-200:  #e7c9f4;
  --lilac-100:  #f3e8fb;
  --wash:       #f2f0f7;
  --paper:      #fdfdfd;
  --ink:        #241f2b;
  --muted:      #6f6879;
  --line:       #e6e3ee;
  --dark:       #272727;
  --gold:       #fff6cd;

  --sans: 'Outfit', system-ui, -apple-system, sans-serif;
  --body: 'Inter', system-ui, -apple-system, sans-serif;
  --script: 'Petit Formal Script', 'Outfit', cursive;

  --pad: clamp(1.25rem, 5vw, 5.5rem);
  --gap: clamp(2rem, 4vw, 3.5rem);
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 12px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* Flow margins are set per component below, so clear the UA defaults first —
   blockquote in particular ships a 40px inline margin. */
h1, h2, h3, p, ul, ol, blockquote, figure { margin: 0; }

img, video, iframe { display: block; max-width: 100%; }
a { color: inherit; }

/* Every inline <svg> in the page pulls from the sprite and inherits its size
   from here unless a component overrides it. */
svg { width: 1em; height: 1em; fill: none; }

::selection { background: var(--lilac-200); color: var(--plum); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 0.7rem 1.1rem;
  background: var(--plum);
  color: #fff;
  border-radius: 0 0 var(--r-sm) 0;
  text-decoration: none;
}
.skip:focus { left: 0; }

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

/* ── Type scale ─────────────────────────────────────────────── */
.eyebrow {
  margin: 0 0 0.35rem;
  font-family: var(--script);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--purple-700);
}
.eyebrow--light { color: var(--lilac-200); }

h1, h2, h3 {
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}

.h2 { font-size: clamp(1.75rem, 3.6vw, 2.9rem); }
.h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); }

.lead {
  margin: 0;
  color: var(--muted);
  font-size: clamp(0.95rem, 1.2vw, 1.02rem);
  line-height: 1.75;
  text-wrap: pretty;
}

.center { text-align: center; }
.center .eyebrow { text-align: center; }

.section {
  padding: clamp(3.5rem, 8vw, 7rem) var(--pad);
}
.section__head {
  max-width: 44rem;
  margin: 0 auto clamp(2rem, 4vw, 3.25rem);
}
.section__head .lead { margin-top: 0.85rem; }

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.35rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.94rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.25s var(--ease), background 0.25s ease,
              color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.btn svg { width: 1.05em; height: 1.05em; }
.btn:hover { transform: translateY(-2px); }

.btn--white  { background: #fff; color: var(--plum); box-shadow: 0 6px 18px rgba(46, 21, 66, 0.18); }
.btn--white:hover { box-shadow: 0 12px 26px rgba(46, 21, 66, 0.26); }
.btn--ghost  { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.6); }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; }
.btn--purple { background: var(--purple); color: #fff; box-shadow: 0 6px 18px rgba(122, 74, 168, 0.28); }
.btn--purple:hover { background: var(--purple-600); box-shadow: 0 12px 26px rgba(122, 74, 168, 0.34); }
.btn--lilac  { background: var(--lilac-200); color: var(--plum); }
.btn--lilac:hover { background: var(--lilac); color: #fff; }

.link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--purple-700);
  text-decoration: none;
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 100%;
  transition: background-size 0.3s var(--ease), color 0.2s ease;
}
.link svg { width: 0.95em; height: 0.95em; }
.link:hover { background-size: 0% 1px; color: var(--purple); }

/* ── Brand mark ─────────────────────────────────────────────── */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: inherit;
}
.brand svg { width: 1.55em; height: 1.55em; }

/* ═══════════════════════════════════════════════════════════════
   NAV — transparent inside the hero, a floating violet bar after
   ═══════════════════════════════════════════════════════════════ */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem var(--pad);
  color: #fff;
  /* Over the hero photo the bar has no plate of its own, so the type carries
     its own contrast until the violet backdrop takes over. */
  text-shadow: 0 1px 10px rgba(40, 18, 60, 0.45);
  transition: padding 0.35s var(--ease), background 0.35s ease,
              box-shadow 0.35s ease, backdrop-filter 0.35s ease;
}
.nav.is-stuck {
  padding-block: 0.7rem;
  background: rgba(122, 74, 168, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(40, 18, 60, 0.22);
  text-shadow: none;
}
.nav .btn { text-shadow: none; }

.nav__links {
  display: flex;
  gap: clamp(0.9rem, 2vw, 2rem);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  font-family: var(--sans);
  font-size: 0.88rem;
}
.nav__links a {
  position: relative;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.32s var(--ease);
}
.nav__links a:hover { opacity: 1; }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav__right { display: flex; align-items: center; gap: 0.75rem; }

.langs {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}
.langs button {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}
.langs button[aria-pressed='true'] { opacity: 1; }

.burger {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.burger span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: #fff;
  transition: transform 0.3s var(--ease), opacity 0.2s ease;
}
.burger[aria-expanded='true'] span:first-child { transform: translateY(2.75px) rotate(45deg); }
.burger[aria-expanded='true'] span:last-child  { transform: translateY(-2.75px) rotate(-45deg); }

/* ═══════════════════════════════════════════════════════════════
   HERO — violet panel + full-bleed portrait, wave bands between
   ═══════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
  min-height: min(88svh, 760px);
  background: var(--purple);
  isolation: isolate;
}

.hero__panel {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
  padding: clamp(6rem, 11vh, 8rem) clamp(1.5rem, 4vw, 4rem) clamp(6.5rem, 15vh, 9.5rem) var(--pad);
  color: #fff;
}

.hero__title {
  font-size: clamp(2.3rem, 4.8vw, 3.75rem);
  line-height: 1.04;
  max-width: 12ch;
}
.hero__title span { display: block; }
.hero__title .soft { color: var(--lilac-200); }

.hero__lead {
  max-width: 32ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.95rem;
  line-height: 1.7;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 0.7rem; }

/* The media column contributes no intrinsic height — the hero's height comes
   from the copy panel and min-height. clip-path (not just overflow) is what
   pins the video: a plain overflow ancestor does NOT clip a position:fixed
   child, but a clip-path one does. So the video holds still in the viewport
   while this box scrolls up over it, wiping it away from the bottom, and the
   section below rises to cover it. */
.hero__media {
  position: relative;
  z-index: 1;
  overflow: hidden;
  clip-path: inset(0);
}
/* Pinned to the viewport over the 53fr media column. Sized to the full
   viewport height (only the top slice ever shows) so the frame stays covered
   as the clip box shrinks. */
.hero__media video {
  position: fixed;
  top: 0;
  right: 0;
  /* <video> is a replaced element: with width:auto it takes its intrinsic
     width and drops `right`, so the box must be sized explicitly. 53vw matches
     the 53fr media column; anchoring to the right keeps its edge flush. */
  width: 53vw;
  height: 100vh;
  object-fit: cover;
  /* The clip is already cropped to a head-and-shoulders portrait, so this only
     needs a light nudge. */
  object-position: 50% 40%;
  background: var(--purple-700);
}

/* Layered wave bands anchored to the bottom of the violet panel. The svg is
   twice the panel's width, so drifting it by -50% never exposes an edge. */
.hero__waves {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: clamp(90px, 16vh, 170px);
  pointer-events: none;
  overflow: hidden;
}
.hero__waves svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100%;
  fill: none;
}
.hero__waves path { stroke-linecap: round; }

.hero__badge {
  position: absolute;
  z-index: 4;
  right: clamp(1rem, 3vw, 2.5rem);
  bottom: clamp(1rem, 3vw, 2.5rem);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1rem 0.6rem 0.65rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  color: var(--plum);
  font-family: var(--sans);
  font-size: 0.82rem;
  box-shadow: 0 10px 28px rgba(40, 18, 60, 0.22);
}
.hero__badge b { font-weight: 600; }
.hero__badge i {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--lilac-100);
  color: var(--purple-700);
  font-style: normal;
}
.hero__badge i svg { width: 15px; height: 15px; }

@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .hero__panel { padding-bottom: clamp(6rem, 20vw, 9rem); }
  /* Stacked: the clip needs its own ratio now that it can no longer take its
     height from the copy panel beside it. The pinned reveal only makes sense
     when the media sits beside the copy, so below the panel the video just
     fills its own box normally. */
  .hero__media { aspect-ratio: 16 / 9; order: 2; clip-path: none; }
  .hero__media video {
    position: absolute;
    inset: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ABOUT
   ═══════════════════════════════════════════════════════════════ */
.about {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: var(--gap) clamp(2rem, 8vw, 7rem);
  align-items: start;
}
.about__title { font-size: clamp(1.8rem, 3.2vw, 2.7rem); max-width: 12ch; }
.about__aside { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.about__copy { display: grid; gap: 1.1rem; }

.checks {
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem;
}
.checks li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.94rem;
  color: var(--ink);
}
.checks svg {
  flex: none;
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.22rem;
  color: var(--purple);
  stroke: currentColor;
  stroke-width: 1.4;
}

@media (max-width: 860px) {
  .about { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   METRICS
   ═══════════════════════════════════════════════════════════════ */
.metrics {
  padding-top: clamp(1rem, 2.5vw, 2.5rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
  align-items: stretch;
}
.metrics__intro {
  grid-column: span 2;
  align-self: center;
  padding-right: clamp(0px, 4vw, 3rem);
}
.metrics__intro .h2 { max-width: 14ch; margin-bottom: 0.9rem; }
.metrics__intro .lead { max-width: 42ch; }

.stat {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: clamp(1.1rem, 2vw, 1.6rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: 0 1px 2px rgba(36, 31, 43, 0.03);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease),
              border-color 0.4s ease;
}
.stat:hover {
  transform: translateY(-6px);
  border-color: var(--lilac-200);
  box-shadow: 0 18px 40px rgba(122, 74, 168, 0.13);
}
.stat--tall { justify-content: space-between; min-height: 200px; }

.stat__ico {
  width: 40px;
  height: 40px;
  margin-bottom: auto;
  color: var(--purple);
  stroke: currentColor;
  stroke-width: 1.35;
}
.stat__n {
  font-family: var(--sans);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat__l { font-size: 0.85rem; color: var(--muted); }

@media (max-width: 860px) {
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metrics__intro { grid-column: span 2; }
}
@media (max-width: 520px) {
  .metrics { grid-template-columns: 1fr; }
  .metrics__intro { grid-column: span 1; }
}

/* ═══════════════════════════════════════════════════════════════
   SERVICES
   ═══════════════════════════════════════════════════════════════ */
.services { background: var(--wash); }

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
}
@media (max-width: 900px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; } }
.card {
  display: flex;
  flex-direction: column;
  padding: 0.6rem 0.6rem 1.2rem;
  border-radius: var(--r-lg);
  background: #fff;
  text-decoration: none;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 46px rgba(59, 36, 80, 0.14);
}
.card__media {
  display: block;
  overflow: hidden;
  border-radius: var(--r-md);
  aspect-ratio: 4 / 3;
  background: var(--lilac-100);
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.65s var(--ease);
}
.card:hover .card__media img { transform: scale(1.06); }

.card__body { padding: 1rem 0.75rem 0; display: grid; gap: 0.45rem; justify-items: start; }
.card__t { font-family: var(--sans); font-size: 1.08rem; font-weight: 500; margin: 0; }
.card__d { margin: 0; font-size: 0.84rem; line-height: 1.6; color: var(--muted); }
.card .link { margin-top: 0.35rem; }

/* Wavy transition out of the services band */
.ripple {
  display: block;
  width: 100%;
  height: clamp(48px, 7vw, 96px);
  background: var(--wash);
  fill: none;
}
.ripple path:not(.solid) { stroke: rgba(157, 107, 194, 0.24); stroke-width: 1.5; }

/* ═══════════════════════════════════════════════════════════════
   TESTIMONIALS
   ═══════════════════════════════════════════════════════════════ */
.badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.4rem;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--gold);
  font-family: var(--sans);
  font-size: 0.8rem;
}
.badge svg { width: 1rem; height: 1rem; color: var(--purple-700); stroke: currentColor; stroke-width: 1.5; }
.badge--lilac { background: var(--lilac-100); }

/* Three columns that creep upward at different speeds, masked top and
   bottom so the reviews fade in and out of view like the reference. */
.wall {
  --fade: clamp(40px, 8vw, 90px);
  --wgap: clamp(0.7rem, 1.2vw, 1.1rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wgap);
  max-width: 68rem;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  height: clamp(380px, 52vh, 560px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
}
/* Each column holds the same stack twice. Giving both halves an identical
   trailing margin makes their heights equal, so translateY(-50%) lands the
   copy exactly where the original started — a seamless loop. */
.wall__col { align-self: start; }
.wall__col > div {
  display: grid;
  gap: var(--wgap);
  margin-bottom: var(--wgap);
}

@media (prefers-reduced-motion: no-preference) {
  .wall__col { animation: creep var(--dur, 46s) linear infinite; }
  .wall:hover .wall__col { animation-play-state: paused; }
}
@keyframes creep {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

.quote {
  display: grid;
  gap: 0.55rem;
  padding: 0.95rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
}
.quote__stars { display: flex; gap: 2px; color: var(--purple); }
.quote__stars svg { width: 13px; height: 13px; fill: currentColor; }
.quote p { margin: 0; font-size: 0.82rem; line-height: 1.6; color: var(--ink); }
.quote footer { display: flex; align-items: center; gap: 0.5rem; }
.quote__av {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--lilac-100);
  color: var(--purple-700);
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
}
.quote__who { font-family: var(--sans); font-size: 0.78rem; color: var(--muted); }

@media (max-width: 760px) {
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wall__col:last-child { display: none; }
}
@media (max-width: 480px) {
  .wall { grid-template-columns: 1fr; height: 420px; }
  .wall__col:nth-child(2) { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   HOURS + MAP
   ═══════════════════════════════════════════════════════════════ */
.visit { background: var(--wash); }

.visit__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  max-width: 74rem;
  margin: 0 auto;
  align-items: stretch;
}

.hours {
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 2.4vw, 1.9rem);
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--line);
}
.hours__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}
.hours__top h3 { font-size: 1.2rem; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  background: var(--lilac-100);
  color: var(--purple-700);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
}
.pill::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.pill.is-open { background: #e7f6ec; color: #24704a; }
.pill.is-shut { background: #f6ecec; color: #8a4a4a; }
@media (prefers-reduced-motion: no-preference) {
  .pill.is-open::before { animation: blip 2.2s ease-in-out infinite; }
}
@keyframes blip {
  0%, 100% { box-shadow: 0 0 0 0 rgba(36, 112, 74, 0.5); }
  60%      { box-shadow: 0 0 0 6px rgba(36, 112, 74, 0); }
}

.hours__list { margin: 0; padding: 0; list-style: none; display: grid; }
.hours__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0.15rem;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
}
.hours__list li:first-child { border-top: 0; }
.hours__list li.is-today {
  padding-inline: 0.7rem;
  margin-inline: -0.7rem;
  border-radius: 10px;
  border-top-color: transparent;
  background: var(--lilac-100);
  font-weight: 500;
}
.hours__list li.is-today + li { border-top-color: transparent; }
.hours__d { font-family: var(--sans); }
.hours__h { color: var(--muted); font-variant-numeric: tabular-nums; }
.hours__list li.is-today .hours__h { color: var(--purple-700); }
.hours__shut { color: var(--muted); }

.hours__foot {
  margin-top: auto;
  padding-top: 1.2rem;
  display: grid;
  gap: 0.55rem;
}
.hours__row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.88rem;
  text-decoration: none;
  color: var(--ink);
}
.hours__row svg {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  color: var(--purple);
  stroke: currentColor;
  stroke-width: 1.5;
}
.hours__row:hover { color: var(--purple-700); }

.map {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--lilac-100);
  min-height: clamp(280px, 42vh, 420px);
}
.map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  position: absolute;
  inset: 0;
  filter: saturate(0.85);
}
.map__pin {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin: -46px 0 0 -19px;          /* tip of the pin lands on the centre */
  border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg);
  background: var(--purple);
  color: #fff;
  box-shadow: 0 8px 20px rgba(40, 18, 60, 0.35);
  pointer-events: none;
}
.map__pin svg { width: 20px; height: 20px; transform: rotate(45deg); }
.map__pin::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 2px solid var(--purple);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .map__pin::after { animation: halo 2.6s ease-out infinite; }
}
@keyframes halo {
  0%   { transform: scale(0.7); opacity: 0.65; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

.map__chip {
  position: absolute;
  z-index: 2;
  left: clamp(0.7rem, 2vw, 1.1rem);
  bottom: clamp(0.7rem, 2vw, 1.1rem);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.95rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 26px rgba(40, 18, 60, 0.18);
  font-family: var(--sans);
  font-size: 0.82rem;
  text-decoration: none;
  color: var(--plum);
}
.map__chip svg { width: 1rem; height: 1rem; color: var(--purple); stroke: currentColor; stroke-width: 1.6; }

@media (max-width: 860px) {
  .visit__grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   CTA + FOOTER
   ═══════════════════════════════════════════════════════════════ */
.cta { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.cta .h2 { max-width: 18ch; margin: 0 auto 0.9rem; }
.cta .lead { max-width: 46ch; margin-inline: auto; }
.cta .btn { margin-top: 1.6rem; }

.footer {
  margin: 0 clamp(0.75rem, 2vw, 1.5rem) clamp(0.75rem, 2vw, 1.5rem);
  padding: clamp(2.5rem, 5vw, 4rem) var(--pad) clamp(1rem, 2vw, 1.5rem);
  border-radius: clamp(18px, 2vw, 28px);
  background: var(--dark);
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
}
.footer .brand { color: #fff; justify-content: center; font-size: 1.35rem; }
.footer__tag {
  margin: 1.1rem auto 0;
  max-width: 40ch;
  font-size: 0.88rem;
  line-height: 1.7;
}
.footer__k {
  margin: 2.2rem 0 0.6rem;
  font-family: var(--script);
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.55);
}
.footer__contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 2rem;
  font-size: 0.88rem;
}
.footer__contact a { text-decoration: none; transition: color 0.2s ease; }
.footer__contact a:hover { color: #fff; }
.footer__contact b { font-weight: 500; color: rgba(255, 255, 255, 0.5); }

.footer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: clamp(2rem, 5vw, 3.5rem);
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.78rem;
}
.footer__social { display: flex; gap: 0.5rem; }
.footer__social a {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  transition: background 0.25s ease, transform 0.25s var(--ease);
}
.footer__social a:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-2px); }
.footer__social svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.5; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE NAV
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .burger { display: flex; }
  /* The links leave the flow here, so the right-hand cluster loses the auto
     margin that used to push it over. */
  .nav__right { margin-left: auto; }
  .nav__links {
    position: absolute;
    top: 100%;
    left: var(--pad);
    right: var(--pad);
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.6rem;
    border-radius: var(--r-md);
    background: rgba(111, 65, 147, 0.97);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 40px rgba(40, 18, 60, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s var(--ease), visibility 0.25s;
  }
  .nav__links.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__links a { display: block; padding: 0.6rem 0.7rem; }
  .nav__links a::after { display: none; }
  .nav .btn--white { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   MOTION — hero entrance + scroll reveals
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {

  /* Hero: the panel's children rise in sequence, the portrait unmasks from
     the bottom and the wave bands draw themselves along their own length. */
  :root.hero-armed .hero__panel > *:not(.hero__waves) {
    opacity: 0;
    transform: translateY(22px);
  }
  :root.hero-armed .hero__media video {
    clip-path: inset(0 0 100% 0);
    transform: scale(1.08);
  }
  :root.hero-armed .hero__badge { opacity: 0; transform: translateY(14px) scale(0.94); }
  :root.hero-armed .hero__waves path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }

  :root.hero-ready .hero__panel > *:not(.hero__waves) {
    opacity: 1;
    transform: none;
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  }
  :root.hero-ready .hero__panel > :nth-child(1) { transition-delay: 0.10s; }
  :root.hero-ready .hero__panel > :nth-child(2) { transition-delay: 0.20s; }
  :root.hero-ready .hero__panel > :nth-child(3) { transition-delay: 0.32s; }
  :root.hero-ready .hero__panel > :nth-child(4) { transition-delay: 0.44s; }

  :root.hero-ready .hero__media video {
    clip-path: inset(0 0 0 0);
    transform: none;
    transition: clip-path 1.15s var(--ease), transform 1.5s var(--ease);
  }
  :root.hero-ready .hero__badge {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s var(--ease) 0.9s, transform 0.7s var(--ease) 0.9s;
  }
  :root.hero-ready .hero__waves path {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1.6s var(--ease) 0.35s;
  }

  /* Once drawn, the bands drift sideways forever. */
  :root.hero-ready .hero__waves svg { animation: drift var(--dur, 26s) linear infinite; }
  @keyframes drift {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  /* Scroll reveals — one behaviour per data-anim value. */
  [data-anim] {
    transition: opacity 0.85s var(--ease), transform 0.85s var(--ease),
                -webkit-mask-size 0.95s var(--ease), mask-size 0.95s var(--ease);
  }

  [data-anim='rise']  { opacity: 0; transform: translateY(34px); }
  [data-anim='rows']  { opacity: 0; transform: translateY(18px); }
  [data-anim='pop']   { opacity: 0; transform: translateY(24px) scale(0.96); }
  [data-anim='slide'] { opacity: 0; transform: translateX(-28px); }

  /* A top-down wipe. Uses mask-size rather than clip-path: a fully-clipping
     clip-path reads as zero-area to IntersectionObserver, so the observer
     would never fire and the element would stay hidden forever. */
  [data-anim='wipe'] {
    opacity: 0;
    -webkit-mask-image: linear-gradient(#000, #000);
            mask-image: linear-gradient(#000, #000);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: 100% 0%;
            mask-size: 100% 0%;
  }

  [data-anim].in {
    opacity: 1;
    transform: none;
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
  }
}

/* ── Cursor ring ────────────────────────────────────────────── */
.ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 150;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(157, 107, 194, 0.7);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease, width 0.25s var(--ease), height 0.25s var(--ease),
              background 0.25s ease;
}
.ring.is-on { opacity: 1; }
.ring.is-lg { width: 46px; height: 46px; background: rgba(157, 107, 194, 0.12); }
@media (hover: none), (prefers-reduced-motion: reduce) { .ring { display: none; } }