/* =====================================================
   Eternis Clinic — animations & motion layer
   ===================================================== */

/* ===== Custom cursor ===== */
.has-custom-cursor { cursor: none; }
.has-custom-cursor a, .has-custom-cursor button, .has-custom-cursor [role="button"] { cursor: none; }

.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: var(--z-cursor);
  transform: translate3d(-100px, -100px, 0);
  will-change: transform;
}
/* Brand-coloured trailing cursor — readable on both light and dark
   surfaces. The previous version used mix-blend-mode: difference which
   inverted to white-on-white over cream/paper sections (invisible).
   The white halo (box-shadow) gives separation against dark hero
   backdrops without needing a blend mode. */
.cursor-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--etc-deep);
  margin: -3.5px 0 0 -3.5px;
  /* Thick white halo + soft dark drop-shadow keeps the dot visible on
     both cream surfaces and the dark hero. */
  box-shadow: 0 0 0 2px rgba(255,255,255,0.95),
              0 0 8px rgba(12,46,53,0.55);
  transition: opacity var(--etc-dur) var(--etc-ease);
}
.cursor-ring {
  width: 28px; height: 28px;
  border: 1.5px solid var(--etc-deep);
  border-radius: 50%;
  margin: -14px 0 0 -14px;
  /* White halos sandwich the deep-teal border so the ring reads on dark
     backdrops where the border alone would disappear. */
  box-shadow: 0 0 0 2px rgba(255,255,255,0.9) inset,
              0 0 0 2px rgba(255,255,255,0.9),
              0 0 8px rgba(12,46,53,0.40);
  transition: width var(--etc-dur) var(--etc-ease),
              height var(--etc-dur) var(--etc-ease),
              margin var(--etc-dur) var(--etc-ease),
              border-color var(--etc-dur) var(--etc-ease),
              background var(--etc-dur) var(--etc-ease),
              opacity var(--etc-dur) var(--etc-ease);
}
.cursor-ring.is-hover {
  width: 44px; height: 44px;
  margin: -22px 0 0 -22px;
  border-color: var(--etc-gold-deep);
  background: rgba(202,169,122,0.10);
}
.cursor-ring.is-pressed {
  width: 20px; height: 20px;
  margin: -10px 0 0 -10px;
  background: rgba(12,46,53,0.10);
}
.cursor-dot.is-hidden, .cursor-ring.is-hidden { opacity: 0; }

/* ===== Reveal on scroll ===== */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 900ms var(--etc-ease),
              transform 900ms var(--etc-ease);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal="fade"] { transform: none; }
[data-reveal="up-sm"] { transform: translateY(14px); }
[data-reveal="scale"] { transform: scale(0.96); }
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms var(--etc-ease),
              transform 700ms var(--etc-ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
[data-reveal-stagger].is-revealed > * {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Magnetic CTA wrapper (just the visual hint; movement applied by JS) ===== */
[data-magnetic] {
  display: inline-flex;
  transition: transform 240ms var(--etc-ease);
  will-change: transform;
}

/* ===== Hero kinetic headline ===== */
.kinetic-line { display: block; overflow: hidden; }
.kinetic-line .kinetic-word {
  display: inline-block;
  overflow: hidden;
  margin-right: 0.22em;
  vertical-align: top;
}
.kinetic-line .kinetic-word > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1100ms var(--etc-ease);
  transition-delay: calc(var(--i, 0) * 30ms);
}
.kinetic-ready .kinetic-line .kinetic-word > span {
  transform: translateY(0);
}

/* ===== Hero composition ===== */
.hero {
  position: relative;
  min-height: clamp(640px, 92dvh, 980px);
  overflow: hidden;
  background: var(--etc-canvas);
  isolation: isolate;
}
.hero__media {
  position: absolute; inset: 0;
  overflow: hidden;
  z-index: -2;
}
.hero__media video,
.hero__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 1.6s var(--etc-ease);
  will-change: transform;
}

/* Hero intro photos — Ken Burns pan+zoom, crossfade into each other, then dissolve to video.
   Photo 2 starts at delay 5.5s so it is already fading IN while photo 1 is fading OUT —
   the two never simultaneously hit opacity:0, eliminating the video-flash gap. */
@keyframes hero-intro-kb {
  0%   { transform: scale(1.08) translate(1.5%, 0.5%);  opacity: 1; }
  80%  { transform: scale(1.01) translate(-0.4%, -0.3%); opacity: 1; }
  100% { transform: scale(1.0)  translate(-0.6%, -0.4%); opacity: 0; }
}
@keyframes hero-intro-kb-2 {
  0%   { transform: scale(1.07) translate(-1.2%, 0.3%);  opacity: 0; }
  7%   { opacity: 1; }
  80%  { transform: scale(1.01) translate(0.5%, -0.2%);  opacity: 1; }
  100% { transform: scale(1.0)  translate(0.7%, -0.3%);  opacity: 0; }
}
.hero__intro-photo,
.hero__intro-photo-2 {
  position: absolute; inset: 0;
  z-index: 1;
  background-size: cover;
  pointer-events: none;
  will-change: transform, opacity;
}
/* Extra dark gradient so white text stays readable over bright clinic photos */
.hero__intro-photo::after,
.hero__intro-photo-2::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.40) 0%,
    rgba(0,0,0,0.10) 40%,
    rgba(0,0,0,0.52) 100%);
  pointer-events: none;
}
/* Photo 1: 0 → 7s */
.hero__intro-photo {
  background-position: center 35%;
  animation: hero-intro-kb 7s ease-out forwards;
}
/* Photo 2: starts at 5.5s (overlaps photo 1 fade), runs until 13s */
.hero__intro-photo-2 {
  background-position: center 22%;
  animation: hero-intro-kb-2 7.5s ease-out both;
  animation-delay: 5.5s;
}
@media (prefers-reduced-motion: reduce) {
  .hero__intro-photo,
  .hero__intro-photo-2 { display: none !important; }
}
.hero__overlay {
  position: absolute; inset: 0;
  background:
    /* Soft warm radial near the top-left where the brand logo sits */
    radial-gradient(60% 50% at 25% 25%, rgba(202,169,122,0.10) 0%, transparent 60%),
    /* Top darken — keeps eyebrow + nav readable on bright skin-tone photo frames */
    linear-gradient(180deg, rgba(17,22,28,0.42) 0%, rgba(17,22,28,0.18) 26%, transparent 38%, rgba(17,22,28,0.55) 72%, rgba(17,22,28,0.88) 100%);
  z-index: -1;
}
.hero__noise {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' /><feColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0' /></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
  opacity: 0.45;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}
.hero__inner {
  position: relative; z-index: 1;
  min-height: clamp(580px, 92dvh, 980px);
  display: flex; flex-direction: column;
  justify-content: flex-end;
  /* Block-only — DO NOT use the shorthand here, it would reset
     padding-inline from the .container utility and the eyebrow/headline
     would bleed to the screen edge on mobile. */
  padding-block: clamp(6rem, 14vw, 10rem) clamp(2.5rem, 6vw, 5rem);
  color: #fff;
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--etc-space-3);
  color: var(--etc-gold-soft);
  letter-spacing: var(--etc-tracking-wider);
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: 500;
  margin-bottom: var(--etc-space-5);
  text-shadow:
    0 1px 2px rgba(0,0,0,0.95),
    0 2px 8px rgba(0,0,0,0.85),
    0 0 24px rgba(0,0,0,0.55);
}
.hero__eyebrow::before {
  content: ""; width: 28px; height: 1px;
  background: var(--etc-gold-soft);
  box-shadow: 0 0 6px rgba(0,0,0,0.55);
}
.hero__title {
  font-family: var(--etc-font-serif);
  font-size: var(--etc-display-1);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: #fff;
  max-width: 18ch;
}
.hero__title em {
  font-style: italic;
  color: var(--etc-gold-soft);
}
.hero__lead {
  margin-top: var(--etc-space-5);
  max-width: 50ch;
  font-size: clamp(0.95rem, 1.2vw, 1.18rem);
  color: rgba(255,255,255,0.86);
  line-height: 1.6;
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--etc-space-3);
  margin-top: var(--etc-space-7);
}

/* Meta line: location + phone, sits below the Google pill, inline on the
   same horizontal flow as the rest of the hero copy. Avoids the absolute-
   positioning collision we had on small screens. */
.hero__meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--etc-space-3);
  margin-top: var(--etc-space-6);
  font-size: 0.7rem;
  letter-spacing: var(--etc-tracking-wider);
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
}
.hero__meta a { color: inherit; transition: color var(--etc-dur) var(--etc-ease); }
.hero__meta a:hover { color: var(--etc-gold-soft); }
.hero__meta-sep { opacity: 0.55; }

/* Tablet+ hero polish: a touch more vertical air below the headline so
   the lead, buttons, Google pill and meta strip all read on their own
   beats instead of stacking up. The headline already has max-width: 18ch
   so it never goes too wide on large viewports. */
@media (min-width: 760px) {
  .hero__inner { padding-block: clamp(7rem, 14vw, 11rem) clamp(3rem, 6vw, 5.5rem); }
  .hero__cta   { margin-top: var(--etc-space-8); }
  .hero__lead  { max-width: 52ch; }
}

/* Mobile-specific hero tuning */
@media (max-width: 640px) {
  /* The leading bar reads as clutter at narrow widths where the eyebrow already
     sits hard against the screen edge — drop it and let the text stand on its
     own. Keeps the visual on desktop where there's breathing room. */
  .hero__eyebrow { gap: 0; }
  .hero__eyebrow::before { display: none; }
}
@media (max-width: 540px) {
  .hero { min-height: 540px; }
  .hero__inner { min-height: 540px; padding-top: clamp(5.5rem, 18vw, 7rem); }
  .hero__title { font-size: clamp(2.2rem, 9vw, 3rem); max-width: 16ch; }
  .hero__lead  { font-size: 0.95rem; }
  .hero__cta   { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero__cta .btn { width: 100%; }
  .hero__meta { font-size: 0.65rem; }
  /* Narrow viewports cover-crop a wide landscape hero source to its centre,
     which on hero-reception.jpg is the pillar between the desk and the lounge.
     Anchor left so the ETERNIS Clinic logo wall + reception desk land fully
     in frame on the first two intro photos. */
  .hero__intro-photo   { background-position: left 35% !important; }
  .hero__intro-photo-2 { background-position: left 60% !important; }
  .hero__media video,
  .hero__media img    { object-position: 30% center; }
}

/* ===== Preloader ===== */
.preloader {
  position: fixed; inset: 0;
  z-index: var(--z-preloader);
  background: var(--etc-canvas);
  display: grid; place-items: center;
  transition: opacity 600ms var(--etc-ease),
              visibility 600ms var(--etc-ease);
}
.preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.preloader__mark {
  position: relative;
  width: 140px; height: 140px;
  display: grid; place-items: center;
}
/* Bottom-up reveal: leaf grows into view from below, holds, then rises
   out of frame from the top. Loops while loading. clip-path is used so
   the direction is unambiguous (mask had read as top-down on some setups). */
.preloader__leaf {
  display: inline-block;
  opacity: 0;
  will-change: clip-path, transform, opacity;
}
.preloader__leaf img {
  width: 110px; height: 110px;
  display: block;
  object-fit: contain;
}
.preloader.is-active .preloader__leaf {
  animation: etc-leaf-rise 2.8s cubic-bezier(.5,.12,.2,1) infinite;
}
@keyframes etc-leaf-rise {
  /* Phase 1 — leaf reveals from BOTTOM upward, floating in. */
  0%   { clip-path: inset(100% 0 0 0); opacity: 0; transform: translateY(22px); }
  15%  { opacity: 1; }
  45%  { clip-path: inset(0    0 0 0); opacity: 1; transform: translateY(0); }
  /* Phase 2 — hold at full visibility. */
  70%  { clip-path: inset(0    0 0 0); opacity: 1; transform: translateY(0); }
  /* Phase 3 — leaf rises out the top: clipped from bottom, drifts up, fades. */
  100% { clip-path: inset(0 0 100% 0); opacity: 0; transform: translateY(-22px); }
}
.preloader__caption {
  position: absolute;
  bottom: 28px; left: 0; right: 0;
  text-align: center;
  font-size: 0.7rem;
  letter-spacing: var(--etc-tracking-wider);
  text-transform: uppercase;
  color: var(--etc-mute-2);
  opacity: 0;
  transition: opacity 600ms var(--etc-ease) 200ms;
}
.preloader.is-active .preloader__caption { opacity: 1; }
@keyframes etc-preload-spin {
  to { transform: rotate(360deg); }
}

/* ===== Header ===== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-header);
  padding-block: 18px;
  transition: background var(--etc-dur) var(--etc-ease),
              backdrop-filter var(--etc-dur) var(--etc-ease),
              border-color var(--etc-dur) var(--etc-ease),
              padding-block var(--etc-dur) var(--etc-ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(246,243,236,0.78);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom-color: var(--etc-line);
  padding-block: 12px;
}
.site-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--etc-space-6);
}

/* Centered pill nav capsule */
.nav {
  display: contents;                         /* let the grid place children */
}
.nav__pill {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(17,22,28,0.08);
  border-radius: 999px;
  padding: 4px;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.85) inset,
    0 1px 2px rgba(17,22,28,0.04),
    0 6px 20px -10px rgba(17,22,28,0.12);
  transition: background var(--etc-dur) var(--etc-ease),
              border-color var(--etc-dur) var(--etc-ease),
              box-shadow var(--etc-dur) var(--etc-ease);
}
.nav__primary {
  display: flex;
  list-style: none;
  margin: 0; padding: 0;
  gap: 2px;
}
.nav__primary li {
  list-style: none;
  margin: 0; padding: 0;
}
.nav__primary li::marker { content: ''; }

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--etc-ink);
  border-radius: 999px;
  transition: color var(--etc-dur) var(--etc-ease),
              background var(--etc-dur) var(--etc-ease);
  isolation: isolate;
}
.nav__link::after { display: none; }   /* kill old underline rule */
.nav__link:hover { color: var(--etc-ink); background: rgba(17,22,28,0.05); }
.nav__link.is-active {
  color: var(--etc-teal-deeper);
  background: rgba(31,168,188,0.12);
}
.nav__link.is-active .nav__link-text {
  font-weight: 600;
}

/* ============================================================
   Treatments mega menu — hover-revealed on desktop, slot-based
   so the same component renders inside the mobile sheet too.
   ============================================================ */
.nav__primary li.has-mega { position: relative; }
.nav__mega {
  position: absolute;
  top: calc(100% + 14px);     /* sit just below the pill, with a hover bridge gap */
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: min(880px, calc(100vw - 64px));
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(17,22,28,0.08);
  border-radius: var(--etc-radius-lg);
  box-shadow: 0 24px 60px -22px rgba(17,22,28,0.28),
              0 1px 0 rgba(255,255,255,0.9) inset;
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  padding: var(--etc-space-6) var(--etc-space-7);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms var(--etc-ease),
              transform 240ms var(--etc-ease),
              visibility 0s linear 240ms;
  z-index: 100;
}
/* Hover bridge — invisible strip above the panel so moving from the link
   to the panel doesn't hide it via mouse-leave on a 14px gap. */
.nav__mega::before {
  content: "";
  position: absolute;
  top: -14px; left: 0; right: 0; height: 14px;
}
.has-mega:hover .nav__mega,
.has-mega:focus-within .nav__mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity 220ms var(--etc-ease),
              transform 240ms var(--etc-ease),
              visibility 0s;
}

/* Hide on smaller viewports — mobile sheet handles it instead. */
@media (max-width: 1080px) {
  .nav__mega { display: none; }
}

/* ── Shared mega panel internals (used by both desktop + mobile sheet) ── */
.mega__grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--etc-space-7);
}
.mega__col {
  display: flex !important;
  flex-direction: column;
  min-width: 0;
}
.mega__col-head {
  display: grid !important;
  grid-template-columns: 1fr auto;
  align-items: end;
  column-gap: 8px;
  row-gap: 2px;
  margin-bottom: var(--etc-space-4);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--etc-line);
}
.mega__col-label {
  grid-column: 1;
  font-family: var(--etc-font-sans);
  font-size: 0.72rem;
  letter-spacing: var(--etc-tracking-wider);
  text-transform: uppercase;
  color: var(--etc-gold-deep);
  font-weight: 600;
  line-height: 1;
}
.mega__col-sub {
  grid-column: 1;
  font-size: 0.78rem;
  color: var(--etc-mute-2);
  line-height: 1.3;
}
.mega__col-count {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-family: var(--etc-font-sans);
  font-feature-settings: "tnum";
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--etc-mute-2);
  background: rgba(17,22,28,0.04);
  border: 1px solid var(--etc-line);
  border-radius: 999px;
  padding: 2px 9px;
}
.mega__list {
  display: flex !important;
  flex-direction: column;
  gap: 2px;
  /* Defensive — kill any inherited list styling even if a parent <ul> sneaks in. */
  list-style: none;
  padding: 0;
  margin: 0;
}
.mega__item {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  margin: 0 -12px;
  border-radius: 10px;
  font-size: 0.875rem;
  line-height: 1.3;
  color: var(--etc-ink);
  text-decoration: none;
  transition: background var(--etc-dur) var(--etc-ease),
              color var(--etc-dur) var(--etc-ease);
}
.mega__item-name { flex: 1 1 auto; min-width: 0; }
.mega__item-arrow {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: var(--etc-mute-3);
  transition: color var(--etc-dur) var(--etc-ease),
              transform var(--etc-dur) var(--etc-ease);
}
.mega__item:hover {
  background: rgba(31,168,188,0.08);
  color: var(--etc-teal-deeper);
}
.mega__item:hover .mega__item-arrow {
  color: var(--etc-teal);
  transform: translate(2px,-2px);
}
.mega__all {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin-top: var(--etc-space-5);
  padding-top: var(--etc-space-4);
  border-top: 1px solid var(--etc-line);
  font-size: 0.825rem;
  font-weight: 500;
  color: var(--etc-teal-deeper);
  text-decoration: none;
  width: 100%;
  transition: gap var(--etc-dur) var(--etc-ease);
}
.mega__all:hover { gap: 12px; }
.mega__all .icon { transition: transform var(--etc-dur) var(--etc-ease); }
.mega__all:hover .icon { transform: translateX(2px); }

/* ── Mobile variant — single column, each category becomes a softly
   contained card so the three groups read as distinct chapters
   instead of a 25-line dump. ── */
.mega--mobile .mega__grid {
  grid-template-columns: 1fr;
  gap: var(--etc-space-4);
}
.mega--mobile .mega__col {
  background: rgba(17,22,28,0.025);
  border: 1px solid rgba(17,22,28,0.06);
  border-radius: var(--etc-radius-md);
  padding: var(--etc-space-5);
}
.mega--mobile .mega__col-head {
  margin-bottom: var(--etc-space-3);
}
.mega--mobile .mega__item {
  font-size: 0.95rem;
  padding: 10px 12px;
  margin: 0 -8px;
}
.mega--mobile .mega__all {
  margin-top: var(--etc-space-3);
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--etc-deep);
  color: #fff;
  border-radius: var(--etc-radius-md);
  border-top: none;
}
.mega--mobile .mega__all:hover { background: var(--etc-deep-soft); }

/* ── Sheet expansion shell (the <details> wrapping Treatments) ── */
.sheet__item-mega { border-bottom: 1px solid rgba(17,22,28,0.08); }
.sheet__item-mega > .sheet__item { border-bottom: none; }
.sheet__item-mega[open] > .sheet__item .sheet__item-chev .icon {
  transform: rotate(45deg);   /* + becomes × */
}
.sheet__item--toggle {
  cursor: pointer;
  list-style: none;
}
.sheet__item--toggle::-webkit-details-marker { display: none; }
.sheet__item-chev {
  display: inline-flex;
  align-items: center;
  color: var(--etc-mute-3);
}
.sheet__item-chev .icon {
  transition: transform var(--etc-dur) var(--etc-ease);
}
.sheet__item-mega-body {
  padding: var(--etc-space-3) 0 var(--etc-space-5) calc(var(--etc-space-5) + 4px);
  /* Align the inner panel with the label column (skip the 01/02 gutter). */
}

/* End-of-bar group: WhatsApp icon + CTA + mobile toggle */
.nav__end {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: end;
}
.nav__icon-btn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(17,22,28,0.10);
  background: #25D366;        /* WhatsApp green by default — instantly recognisable */
  color: #ffffff;
  box-shadow: 0 6px 16px -8px rgba(37, 211, 102, 0.55);
  transition: background var(--etc-dur) var(--etc-ease),
              border-color var(--etc-dur) var(--etc-ease),
              transform var(--etc-dur) var(--etc-ease),
              box-shadow var(--etc-dur) var(--etc-ease);
}
.nav__icon-btn .icon { width: 18px; height: 18px; }
.nav__icon-btn:hover {
  background: #20bd5b;
  border-color: #20bd5b;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -10px rgba(37, 211, 102, 0.7);
}
.nav__cta {
  padding: 10px 18px;
}

.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid rgba(17,22,28,0.08);
  border-radius: 999px;
  background: rgba(255,255,255,0.62);
  align-items: center; justify-content: center;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  transition: background var(--etc-dur) var(--etc-ease),
              border-color var(--etc-dur) var(--etc-ease),
              color var(--etc-dur) var(--etc-ease);
}
.nav__toggle-bars {
  position: relative;
  width: 18px; height: 12px;
  display: inline-block;
}
.nav__toggle-bars span {
  position: absolute;
  left: 0; right: 0; height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--etc-dur) var(--etc-ease);
}
.nav__toggle-bars span:nth-child(1) { top: 0; }
.nav__toggle-bars span:nth-child(2) { bottom: 0; }
.nav__toggle:hover .nav__toggle-bars span:nth-child(1) { transform: translateX(2px); }
.nav__toggle:hover .nav__toggle-bars span:nth-child(2) { transform: translateX(-2px); }

/* Responsive: hide centred pill on smaller viewports, show toggle */
@media (max-width: 1080px) {
  .nav__pill { display: none; }
  .nav__toggle { display: inline-flex; }
}
@media (max-width: 640px) {
  /* On phones, show the hamburger only — no inline CTA. The mobile sheet
     has Book consultation as a prominent link. Keeps the bar uncluttered. */
  .nav__cta { display: none; }
}
@media (max-width: 380px) {
  .site-header__inner { gap: var(--etc-space-3); }
}

/* When the header itself has a backdrop blur, soften the pill so it doesn't
   compound the glass effect — but keep enough definition to read as a pill. */
.site-header.is-scrolled .nav__pill {
  background: rgba(255,255,255,0.55);
  border-color: rgba(17,22,28,0.08);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.8) inset,
    0 4px 14px -8px rgba(17,22,28,0.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.site-header.is-scrolled .nav__toggle {
  background: rgba(255,255,255,0.6);
  border-color: var(--etc-line);
}

/* ===== Dark-over-hero state on the home page ===== */
.page-home .site-header:not(.is-scrolled) .nav__pill {
  /* Slightly heavier so it reads on bright video frames now that the
     overlay top-band is gone */
  background: rgba(20,28,36,0.32);
  border-color: rgba(255,255,255,0.20);
  box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 6px 22px -12px rgba(0,0,0,0.45);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
.page-home .site-header:not(.is-scrolled) .nav__link {
  color: rgba(255,255,255,0.85);
}
.page-home .site-header:not(.is-scrolled) .nav__link:hover {
  background: rgba(255,255,255,0.12);
  color: #ffffff;
}
.page-home .site-header:not(.is-scrolled) .nav__link.is-active {
  background: rgba(255,255,255,0.18);
  color: #ffffff;
}
.page-home .site-header:not(.is-scrolled) .nav__toggle {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.28);
  color: #ffffff;
}
.page-home .site-header:not(.is-scrolled) .nav__toggle:hover {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.36);
}
/* WhatsApp button stays brand-green even on dark hero — key conversion path. */
.page-home .site-header:not(.is-scrolled) .nav__icon-btn {
  background: #25D366;
  border-color: rgba(255,255,255,0.20);
  color: #ffffff;
  box-shadow: 0 6px 18px -6px rgba(37, 211, 102, 0.55);
}

@media (max-width: 920px) {
  .nav__primary { display: none; }
  .nav__cta { display: none; }
  .nav__toggle { display: inline-flex; }
}

/* ===== Mobile sheet nav ============================================
   Full-width takeover on phones, side-panel on tablets+.
   Sticky head, scrollable body, brand-aligned styling, proper safe areas.
   ================================================================== */
.sheet {
  position: fixed; inset: 0;
  z-index: var(--z-sheet);
  pointer-events: none;
}
.sheet__backdrop {
  position: absolute; inset: 0;
  background: rgba(12,46,53,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 320ms var(--etc-ease);
}
.sheet__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(96%, 460px);
  background: var(--etc-paper);
  display: flex; flex-direction: column;
  overflow: hidden;             /* body scrolls inside */
  transform: translateX(100%);
  transition: transform 540ms var(--etc-ease);
  box-shadow: -32px 0 80px -20px rgba(12,46,53,0.30);
}
@media (max-width: 640px) {
  /* Full-width on phones — no page bleed-through, no logo overlap */
  .sheet__panel { width: 100%; max-width: none; box-shadow: none; }
}

.sheet.is-open { pointer-events: auto; }
.sheet.is-open .sheet__backdrop { opacity: 1; }
.sheet.is-open .sheet__panel { transform: translateX(0); }

/* Hide main page header while sheet is open — avoids dual-logo confusion */
body.sheet-open .site-header {
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms var(--etc-ease);
}

/* Fullscreen image lightboxes (before/after + clinic gallery) own the whole
   viewport. Remove the floating header + FAB cluster from the render entirely
   while one is open, so the nav can never bleed over the overlay regardless of
   z-index stacking context. JS toggles body.modal-open (see before-after-viewer.js
   + gallery.js). Mirrors the body.sheet-open pattern above. */
body.modal-open .site-header,
body.modal-open .fab-stack {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms var(--etc-ease), visibility 200ms var(--etc-ease);
}

/* Sticky head with brand monogram + close */
.sheet__head {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--etc-space-7);
  border-bottom: 1px solid var(--etc-line);
  background: var(--etc-paper);
}
.sheet__close {
  width: 40px; height: 40px;
  border: 1px solid var(--etc-line);
  border-radius: 999px;
  background: var(--etc-paper-soft);
  color: var(--etc-ink);
  display: grid; place-items: center;
  transition: background var(--etc-dur) var(--etc-ease),
              color var(--etc-dur) var(--etc-ease),
              transform var(--etc-dur) var(--etc-ease),
              border-color var(--etc-dur) var(--etc-ease);
}
.sheet__close:hover {
  background: var(--etc-deep);
  border-color: var(--etc-deep);
  color: #fff;
  transform: rotate(90deg);
}

/* Scrollable body */
.sheet__body {
  flex: 1; min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--etc-space-7) var(--etc-space-7) calc(var(--etc-space-8) + env(safe-area-inset-bottom));
  display: flex; flex-direction: column;
  gap: var(--etc-space-7);
}

.sheet__section-label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: var(--etc-tracking-wider);
  text-transform: uppercase;
  color: var(--etc-mute-2);
  margin-bottom: var(--etc-space-3);
}

/* Primary navigation list — premium nav items.
   Each row: numbered prefix · serif label + muted sub-descriptor · arrow.
   Tuned for a calm clinical brand: generous spacing, no heavy underline,
   gold accent on the number when hovering or active. */
.sheet__nav { display: flex; flex-direction: column; }
.sheet__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(17,22,28,0.08);
  text-decoration: none;
  color: var(--etc-ink);
  transition: color var(--etc-dur) var(--etc-ease);
}
.sheet__item:last-child { border-bottom: none; }

.sheet__item-num {
  font-family: var(--etc-font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  font-feature-settings: "tnum";
  font-weight: 500;
  color: var(--etc-mute-2);
  transition: color var(--etc-dur) var(--etc-ease);
  align-self: start;
  padding-top: 8px;
}

.sheet__item-body {
  display: flex; flex-direction: column;
  gap: 4px; min-width: 0;
}
.sheet__item-label {
  font-family: var(--etc-font-serif);
  font-size: clamp(1.55rem, 6vw, 1.85rem);
  letter-spacing: -0.018em;
  line-height: 1.05;
  font-weight: 400;
}
.sheet__item-sub {
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--etc-mute-2);
  transition: color var(--etc-dur) var(--etc-ease);
}

.sheet__item-arrow {
  display: inline-flex; align-items: center;
  color: var(--etc-mute-3);
  transition: color var(--etc-dur) var(--etc-ease),
              transform var(--etc-dur) var(--etc-ease);
}

/* Hover + active state — gold accent on number, teal on label + arrow shift */
.sheet__item:hover,
.sheet__item.is-active {
  color: var(--etc-teal-deeper);
}
.sheet__item:hover .sheet__item-num,
.sheet__item.is-active .sheet__item-num {
  color: var(--etc-gold);
}
.sheet__item:hover .sheet__item-sub {
  color: var(--etc-mute);
}
.sheet__item:hover .sheet__item-arrow,
.sheet__item.is-active .sheet__item-arrow {
  color: var(--etc-teal);
  transform: translate(3px,-3px);
}

.sheet.is-open .sheet__item,
.sheet.is-open .sheet__item-mega {
  animation: etc-sheet-in 520ms var(--etc-ease) both;
  animation-delay: calc(var(--i, 0) * 35ms + 140ms);
}
/* Don't double-animate the inner summary inside an animated <details>. */
.sheet.is-open .sheet__item-mega .sheet__item { animation: none; }
@keyframes etc-sheet-in {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* CTA block */
.sheet__cta .btn { box-shadow: var(--etc-shadow-3); }

/* Contact block */
.sheet__contact {
  padding-top: var(--etc-space-6);
  border-top: 1px solid var(--etc-line);
  display: flex; flex-direction: column; gap: var(--etc-space-4);
  color: var(--etc-mute);
}
.sheet__contact-grid {
  display: flex; flex-direction: column; gap: 6px;
}
.sheet__contact-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  border-radius: var(--etc-radius-md);
  color: var(--etc-ink);
  transition: background var(--etc-dur) var(--etc-ease);
}
.sheet__contact-row:hover { background: var(--etc-paper-soft); }
.sheet__contact-row strong { display: block; font-weight: 600; font-size: 0.95rem; }
.sheet__contact-row .sheet__contact-sub { font-size: 0.825rem; color: var(--etc-mute); }
.sheet__contact-icon {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--etc-paper-soft);
  border: 1px solid var(--etc-line);
  display: grid; place-items: center;
  color: var(--etc-ink);
}
.sheet__social {
  display: flex; gap: 10px;
  margin-top: var(--etc-space-3);
}
.sheet__social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--etc-line);
  display: grid; place-items: center;
  color: var(--etc-ink);
  transition: border-color var(--etc-dur) var(--etc-ease),
              background var(--etc-dur) var(--etc-ease),
              color var(--etc-dur) var(--etc-ease);
}
.sheet__social a:hover { background: var(--etc-deep); border-color: var(--etc-deep); color: #fff; }

/* Reduced motion: no slide */
@media (prefers-reduced-motion: reduce) {
  .sheet__panel { transition: none; }
  .sheet.is-open .sheet__nav a { animation: none; }
}

/* ===== Chatbot ===== */
.chatbot { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: var(--z-chatbot); }
.chatbot__launcher {
  position: relative;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--etc-deep);
  color: var(--etc-canvas);
  display: grid; place-items: center;
  border: 0;
  box-shadow: 0 14px 30px -10px rgba(12, 46, 53, 0.45);
  transition: transform var(--etc-dur) var(--etc-ease),
              background var(--etc-dur) var(--etc-ease);
}
.chatbot__launcher:hover { transform: translateY(-2px); }
.chatbot__launcher::after {
  content: ""; position: absolute;
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 1px solid var(--etc-gold);
  opacity: 0.7;
  animation: etc-pulse 2s ease-out infinite;
}
@keyframes etc-pulse {
  0% { transform: scale(1); opacity: 0.7; }
  70% { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}

.chatbot__panel {
  position: absolute;
  bottom: 78px; right: 0;
  width: min(92vw, 380px);
  height: min(70dvh, 600px);
  background: var(--etc-paper);
  border: 1px solid var(--etc-line);
  border-radius: 22px;
  box-shadow: var(--etc-shadow-4);
  display: flex; flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px) scale(0.98);
  pointer-events: none;
  transition: opacity 280ms var(--etc-ease),
              transform 280ms var(--etc-ease);
  transform-origin: bottom right;
}
.chatbot.is-open .chatbot__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.chatbot__head {
  background: linear-gradient(135deg, var(--etc-deep) 0%, var(--etc-deep-soft) 55%, var(--etc-gold) 130%);
  color: #fff;
  padding: 18px 20px;
  display: flex; align-items: center; gap: 12px;
}
.chatbot__avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(202,169,122,0.2);
  display: grid; place-items: center;
  font-family: var(--etc-font-serif);
  font-size: 1.05rem;
  color: #fff;
}
.chatbot__title { font-family: var(--etc-font-serif); font-size: 1.05rem; line-height: 1.2; }
.chatbot__sub { font-size: 0.7rem; opacity: 0.7; letter-spacing: 0.08em; text-transform: uppercase; }
.chatbot__close {
  margin-left: auto;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: grid; place-items: center;
  color: #fff; border: 0;
}

.chatbot__body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
  scroll-behavior: smooth;
  background: var(--etc-paper-soft);
}

.chat-msg {
  max-width: 85%;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 0.9rem;
  line-height: 1.5;
  white-space: pre-wrap;
  animation: etc-msg-in 280ms var(--etc-ease) both;
}
@keyframes etc-msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.chat-msg--bot {
  align-self: flex-start;
  background: var(--etc-paper);
  border: 1px solid var(--etc-line);
  color: var(--etc-ink);
  border-bottom-left-radius: 4px;
}
.chat-msg--user {
  align-self: flex-end;
  background: var(--etc-deep);
  color: var(--etc-canvas);
  border-bottom-right-radius: 4px;
}

.chat-typing {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--etc-paper);
  border: 1px solid var(--etc-line);
  padding: 12px 14px;
  border-radius: 14px;
  border-bottom-left-radius: 4px;
}
.chat-typing span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--etc-mute-3);
  animation: etc-typing 1s var(--etc-ease) infinite;
}
.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes etc-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-3px); opacity: 1; }
}

.chat-options {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-self: flex-start;
}
.chat-options button, .chat-options a {
  background: var(--etc-paper);
  border: 1px solid var(--etc-line);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.825rem;
  color: var(--etc-ink);
  cursor: pointer;
  transition: background var(--etc-dur) var(--etc-ease),
              border-color var(--etc-dur) var(--etc-ease),
              color var(--etc-dur) var(--etc-ease);
  text-decoration: none;
}
.chat-options button:hover, .chat-options a:hover {
  background: var(--etc-deep);
  color: var(--etc-canvas);
  border-color: var(--etc-deep);
}
.chat-cta {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: var(--etc-gold);
  color: var(--etc-ink);
  border-radius: 999px;
  font-size: 0.825rem;
  font-weight: 500;
  text-decoration: none;
}
.chat-cta:hover { background: var(--etc-gold-soft); color: var(--etc-ink); }
.chat-channels {
  display: flex; flex-direction: column; gap: 6px;
  align-self: stretch;
}
.chat-channels a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--etc-paper);
  border: 1px solid var(--etc-line);
  border-radius: 12px;
  font-size: 0.875rem;
  color: var(--etc-ink);
  text-decoration: none;
  transition: background var(--etc-dur) var(--etc-ease);
}
.chat-channels a:hover { background: var(--etc-paper-soft); }

.chatbot__foot {
  background: var(--etc-paper);
  border-top: 1px solid var(--etc-line);
  padding: 10px 16px;
  font-size: 0.7rem;
  color: var(--etc-mute-2);
  text-align: center;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

/* ===== Cookie banner ===== */
.cookie-bar {
  position: fixed;
  bottom: 16px; left: 16px; right: 16px;
  z-index: var(--z-toast);
  background: var(--etc-paper);
  border: 1px solid var(--etc-line);
  border-radius: var(--etc-radius-lg);
  box-shadow: var(--etc-shadow-3);
  padding: 18px 20px;
  display: flex; align-items: center; gap: var(--etc-space-5);
  flex-wrap: wrap;
  max-width: 600px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 400ms var(--etc-ease),
              transform 400ms var(--etc-ease);
  pointer-events: none;
}
.cookie-bar.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.cookie-bar__copy { font-size: 0.825rem; color: var(--etc-mute); flex: 1; min-width: 200px; line-height: 1.5; }
.cookie-bar__copy a { color: var(--etc-ink); text-decoration: underline; }
.cookie-bar__actions { display: flex; gap: 8px; }

/* ===== Footer ===== */
.site-footer {
  background: var(--etc-deep);
  color: rgba(255,255,255,0.82);
  padding: var(--etc-space-10) 0 var(--etc-space-7);
  position: relative;
  overflow: hidden;
}
@media (max-width: 820px) {
  .site-footer { padding: var(--etc-space-8) 0 var(--etc-space-6); }
}
.site-footer::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--etc-gold), transparent);
}
.site-footer h6 {
  font-family: var(--etc-font-sans);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: var(--etc-tracking-wider);
  color: var(--etc-gold-soft);
  font-weight: 500;
  margin-bottom: var(--etc-space-5);
}
.site-footer ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.site-footer a { color: rgba(255,255,255,0.78); }
.site-footer a:hover { color: #fff; }

/* ── Brand row — sits above the columns. Logo + tagline + Google pill,
   each separated to give breathing space and prevent the brand block
   from out-tall-ing the link columns and creating a visual hollow. */
.footer__brand-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--etc-space-9);
  align-items: center;
  margin-bottom: var(--etc-space-10);
  padding-bottom: var(--etc-space-8);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.footer__logo { height: 56px; display: inline-flex; flex-shrink: 0; }
.footer__logo img {
  height: 100%; width: auto; display: block;
  /* Light variant has thin white outlines — the brightness/contrast bump
     makes the wordmark + tagline read clearly against the dark footer. */
  filter: brightness(1.18) contrast(1.05);
}
.footer__tagline {
  color: rgba(255,255,255,0.82);
  line-height: 1.6;
  font-size: 0.95rem;
  max-width: 56ch;
  margin: 0;
}
/* Specificity bumped via .site-footer ancestor so this beats .gpill in
   components.css regardless of browser cache or @import order quirks.
   Important on mobile where the cream .gpill default + white text would
   render as white-on-white. */
.site-footer .gpill.footer__gpill {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.92);
  flex-shrink: 0;
}
.site-footer .gpill.footer__gpill .stars { color: #FBBC04; }
.site-footer .gpill.footer__gpill strong { color: #fff; }

/* ── Columns row — 2 location columns + N link columns, all equal width
   so the row reads as one consistent rhythm and there's no hollow. */
.footer__top {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--etc-space-7);
  margin-bottom: var(--etc-space-9);
}
.footer__col { min-width: 0; }
.footer__col--loc address {
  font-style: normal;
  font-size: 0.825rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.78);
}
.footer__col--loc address strong { color: #fff; font-weight: 500; }
/* "Open in Google Maps" is its own link now — the address above is plain text,
   so the whole block no longer reads as one giant ambiguous link. */
.footer__address-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.66);
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: color var(--etc-dur) var(--etc-ease), gap var(--etc-dur) var(--etc-ease);
}
.footer__address-cta:hover { color: var(--etc-gold-soft); gap: 9px; }
.footer__contact-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: var(--etc-space-4);
}
.footer__contact-links a {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.825rem;
  color: rgba(255,255,255,0.78);
  line-height: 1.4;
}
.footer__contact-links a:hover { color: #fff; }
.footer__brand-block { max-width: 28ch; }
.footer__brand {
  font-family: var(--etc-font-serif);
  font-size: 2.25rem;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: var(--etc-space-4);
}
.footer__brand .dot { width: 7px; height: 7px; background: var(--etc-gold); border-radius: 50%; display: inline-block; margin: 0 6px; }
.footer__locations { display: grid; grid-template-columns: 1fr 1fr; gap: var(--etc-space-6); margin-top: var(--etc-space-7); }
.footer__loc { display: flex; flex-direction: column; gap: 6px; font-size: 0.825rem; }
.footer__loc strong { color: #fff; font-weight: 500; }

.footer__bottom {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: var(--etc-space-5);
  padding-top: var(--etc-space-6);
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}
.footer__crafted {
  display: inline-flex; align-items: center; gap: 10px;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: color var(--etc-dur) var(--etc-ease), opacity var(--etc-dur) var(--etc-ease);
}
.footer__crafted:hover { color: rgba(255,255,255,0.9); }
.footer__crafted-label { font-size: 0.75rem; letter-spacing: 0.02em; }
.footer__crafted img {
  height: 22px;          /* was 16 — too small to read the wordmark */
  width: auto;
  display: block;
  opacity: 0.92;
}
.footer__crafted:hover img { opacity: 1; }
.footer__social { display: flex; gap: 14px; }
.footer__social a {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  transition: border-color var(--etc-dur) var(--etc-ease),
              background var(--etc-dur) var(--etc-ease);
}
.footer__social a:hover { background: var(--etc-gold); border-color: var(--etc-gold); color: var(--etc-ink); }

@media (max-width: 1080px) {
  .footer__top { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
  .footer__brand-row {
    grid-template-columns: 1fr;
    gap: var(--etc-space-5);
    text-align: left;
  }
  .footer__tagline { max-width: none; }
  .footer__top { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .footer__top { grid-template-columns: 1fr; gap: var(--etc-space-6); }
  .footer__brand-block { max-width: none; }
}

/* ===== Page transitions ===== */
.page-fade-out { opacity: 0; transition: opacity 400ms var(--etc-ease); }

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none !important; }
  .preloader.is-active .preloader__leaf { animation: none !important; opacity: 1; transform: none; clip-path: none; }
  .chatbot__launcher::after { animation: none !important; }
  .hero__media video, .hero__media img { transform: none !important; }
}