/* =========================================================================
   THE AURA RESET CENTER — Nervous System Regulation
   Design system. Palette + motifs derived from the brand logo:
   warm cream backdrop, a glowing amber "aura" ring, bronze/rose-gold ink.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Jost:wght@300;400;500;600&family=Caveat:wght@500;600;700&display=swap');

:root {
  /* Core palette — pulled from the logo */
  --shell:    #FBF5EE; /* lightest paper */
  --cream:    #F2E7DB; /* page background */
  --sand:     #E8D7C5; /* raised panels */
  --clay:     #DCC6B0; /* dividers / borders */
  --espresso: #221913; /* dark sections + ink */
  --cocoa:    #4A3A2C; /* secondary ink */
  --taupe:    #7A6753; /* muted text */
  --bronze:   #A6754C; /* primary accent (rose-gold wordmark) */
  --bronze-2: #C79A6D; /* lighter bronze */
  --amber:    #F0A968; /* the aura light */
  --amber-hi: #FFD3A0; /* halo highlight */

  /* Aura glow gradients */
  --aura-glow: radial-gradient(circle at 50% 50%,
      rgba(255,211,160,0.55) 0%,
      rgba(240,169,104,0.35) 35%,
      rgba(240,169,104,0.0) 70%);

  /* Type — mirrors the logo: flared Roman caps (display) + thin geo sans (UI) */
  --display: 'Marcellus', Georgia, 'Times New Roman', serif;
  --sans: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --script: 'Caveat', 'Segoe Script', cursive;

  /* Rhythm */
  --maxw: 1180px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --section-y: clamp(4.5rem, 10vw, 8.5rem);

  --radius: 18px;
  --radius-lg: 28px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-soft: 0 18px 50px -24px rgba(74, 58, 44, 0.45);
  --shadow-card: 0 24px 60px -30px rgba(34, 25, 19, 0.55);
}

/* ------------------------------- reset --------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--cocoa);
  background: var(--cream);
  line-height: 1.65;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Tactile paper grain over the whole page */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ----------------------------- typography ------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--espresso);
  line-height: 1.08;
  letter-spacing: 0.008em;
}

.eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--bronze);
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bronze));
}
.eyebrow.is-centered::after {
  content: "";
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, var(--bronze), transparent);
}

.display-xl { font-size: clamp(2.9rem, 8vw, 6rem); }
.display-lg { font-size: clamp(2.4rem, 6vw, 4.4rem); }
.display-md { font-size: clamp(1.9rem, 4.4vw, 3rem); }

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--taupe);
  max-width: 56ch;
}

em.gold {
  font-style: italic;
  color: var(--bronze);
}

/* ------------------------------ layout --------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

.dark {
  background:
    radial-gradient(140% 120% at 50% -20%, rgba(240,169,104,0.10), transparent 60%),
    var(--espresso);
  color: #E9DDD0;
}
.dark h1, .dark h2, .dark h3 { color: var(--shell); }
.dark .lede { color: rgba(233,221,208,0.78); }

.center { text-align: center; }
.center .lede, .center .eyebrow { margin-inline: auto; }

.section-head { max-width: 62ch; }
.section-head.center { margin-inline: auto; }
.section-head h2 { margin-top: 1rem; }
.section-head .lede { margin-top: 1.1rem; }

/* ------------------------------ buttons -------------------------------- */
.btn {
  --btn-bg: var(--espresso);
  --btn-fg: var(--shell);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95em 1.8em;
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.86rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid transparent;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .3s var(--ease), color .3s var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-3px); }
.btn:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }

.btn--gold {
  --btn-bg: linear-gradient(135deg, var(--bronze-2), var(--bronze));
  --btn-fg: #2a1d12;
  box-shadow: 0 14px 34px -14px rgba(166,117,76,0.7), inset 0 1px 0 rgba(255,255,255,0.35);
}
.btn--gold:hover { box-shadow: 0 22px 46px -16px rgba(240,169,104,0.85), inset 0 1px 0 rgba(255,255,255,0.4); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--cocoa);
  border-color: var(--clay);
}
.btn--ghost:hover { border-color: var(--bronze); color: var(--bronze); }
.dark .btn--ghost { --btn-fg: #E9DDD0; border-color: rgba(233,221,208,0.28); }
.dark .btn--ghost:hover { border-color: var(--amber); color: var(--amber-hi); }

.btn .arrow { transition: transform .4s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bronze);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), gap .3s var(--ease);
}
.textlink:hover { border-color: var(--bronze); gap: 0.85em; }

/* ------------------------------- nav ----------------------------------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem var(--gutter);
  transition: background .4s var(--ease), border-color .4s var(--ease), padding .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(242,231,219,0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgba(220,198,176,0.6);
  padding-block: 0.7rem;
}

/* Brand lockup — recreated from the logo */
.brand { display: flex; flex-direction: column; align-items: center; line-height: 1; gap: 2px; }
.brand__the {
  font-size: 0.5rem; letter-spacing: 0.55em; text-transform: uppercase;
  color: var(--taupe); padding-left: 0.55em;
}
.brand__name {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--bronze);
  padding-left: 0.5em;
}
.brand__sub {
  font-size: 0.46rem; letter-spacing: 0.46em; text-transform: uppercase;
  color: var(--taupe); padding-left: 0.46em;
}
.nav.scrolled .brand__name { font-size: 1.05rem; }

.nav__links { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.2rem); }
.nav__links a {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--cocoa);
  position: relative;
  padding: 4px 0;
  transition: color .3s var(--ease);
}
.nav__links a::after {
  content: "";
  position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: var(--bronze);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav__links a:hover { color: var(--bronze); }
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__links a[aria-current="page"] { color: var(--bronze); }

.nav__cta { display: flex; align-items: center; gap: 0.8rem; }
.nav__cta .btn { padding: 0.7em 1.3em; font-size: 0.72rem; }

/* Homepage: nav sits over the dark hero at the top — use light ink until scrolled */
.home .nav:not(.scrolled) .nav__links a,
.home .nav:not(.scrolled) .brand__the,
.home .nav:not(.scrolled) .brand__sub { color: rgba(245,236,225,0.82); }
.home .nav:not(.scrolled) .brand__name { color: var(--amber-hi); }
.home .nav:not(.scrolled) .nav__links a:hover,
.home .nav:not(.scrolled) .nav__links a[aria-current="page"] { color: #fff; }
.home .nav:not(.scrolled) .nav__toggle { border-color: rgba(245,236,225,0.4); }
.home .nav:not(.scrolled) .nav__toggle span,
.home .nav:not(.scrolled) .nav__toggle span::before,
.home .nav:not(.scrolled) .nav__toggle span::after { background: rgba(245,236,225,0.92); }

.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--clay);
  border-radius: 50%;
  background: transparent;
  position: relative;
}
.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
  content: "";
  position: absolute;
  width: 18px; height: 1.5px;
  background: var(--cocoa);
  left: 50%; transform: translateX(-50%);
  transition: transform .35s var(--ease), opacity .2s var(--ease);
}
.nav__toggle span { top: 50%; }
.nav__toggle span::before { top: -6px; }
.nav__toggle span::after { top: 6px; }
body.menu-open .nav__toggle span { background: transparent; }
body.menu-open .nav__toggle span::before { transform: translateX(-50%) translateY(6px) rotate(45deg); }
body.menu-open .nav__toggle span::after { transform: translateX(-50%) translateY(-6px) rotate(-45deg); }

/* ------------------------- the aura ring motif ------------------------- */
/* The signature element: the glowing halo from the logo. */
.aura-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(240,169,104,0.5);
  box-shadow:
    0 0 60px 6px rgba(240,169,104,0.35),
    0 0 120px 30px rgba(255,211,160,0.18),
    inset 0 0 60px 10px rgba(255,211,160,0.12);
  pointer-events: none;
}
.aura-ring::before {
  content: "";
  position: absolute; inset: -2px;
  border-radius: 50%;
  background: var(--aura-glow);
  filter: blur(8px);
  opacity: 0.8;
}
.breathe { animation: breathe 9s var(--ease) infinite; }
@keyframes breathe {
  0%, 100% { transform: scale(1);    opacity: 0.92; }
  50%      { transform: scale(1.045); opacity: 1; }
}

/* --------------------------- hero (video) ------------------------------ */
/* ---- Living-gradient hero: full-bleed flowing aura behind the logo ---- */
.hero--video {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  padding: clamp(4rem, 8vh, 6rem) var(--gutter) clamp(2.25rem, 6vh, 4rem);
  overflow: hidden;
  isolation: isolate;
  /* Warm fallback tuned to the footage's own edge tone — shown only until the
     video paints, so there's never a flash of a mismatched colour. */
  background: #9c7c68;
}
/* The video, full-bleed and softly blurred, becomes the entire hero background.
   The sharp lockup sits on top of this same footage, so their colors match at
   every edge and no frame is ever visible. */
.hero__bgvideo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  transform: scale(1.18);
  /* colour kept level with the sharp copy so the two layers read as one
     continuous field — the composition's edges have nothing to stand out against */
  filter: blur(54px) saturate(1) brightness(1);
  pointer-events: none;
}
/* gentle vignette: clear over the lockup, only a whisper of depth at the far
   corners so nothing reads as a frame */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(125% 90% at 50% 46%, rgba(18,12,7,0) 42%, rgba(18,12,7,0.34) 100%);
}
/* the flowing colored blobs */
.aura-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  filter: blur(56px) saturate(1.3);
}
/* slow pulsing core glow that ties the ring's light into the background */
.aura-bg::before {
  content: "";
  position: absolute;
  width: 92%; aspect-ratio: 1;
  top: 50%; left: 50%;
  transform: translate(-50%, -52%);
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(255,180,110,0.7) 0, rgba(255,180,110,0) 62%);
  mix-blend-mode: screen;
  animation: auraPulse 9s ease-in-out infinite;
}
.aura-bg .blob {
  position: absolute;
  width: var(--blob, 92%);
  aspect-ratio: 1;
  top: calc(50% - var(--blob, 92%) / 2);
  left: calc(50% - var(--blob, 92%) / 2);
  border-radius: 50%;
  mix-blend-mode: screen;
  transform-origin: center center;
}
.aura-bg .b1 { background: radial-gradient(circle at center, rgba(240,150,80,0.9) 0, rgba(240,150,80,0) 58%); animation: auraVertical 26s ease infinite; opacity: 0.5; }
.aura-bg .b2 { background: radial-gradient(circle at center, rgba(255,190,120,0.8) 0, rgba(255,190,120,0) 56%); transform-origin: calc(50% - 360px); animation: auraCircle 20s reverse infinite; opacity: 0.46; }
.aura-bg .b3 { background: radial-gradient(circle at center, rgba(210,120,70,0.7) 0, rgba(210,120,70,0) 54%); transform-origin: calc(50% + 360px); animation: auraCircle 38s linear infinite; opacity: 0.42; }
.aura-bg .b4 { background: radial-gradient(circle at center, rgba(160,90,55,0.65) 0, rgba(160,90,55,0) 54%); transform-origin: calc(50% - 180px); animation: auraHorizontal 40s ease infinite; opacity: 0.4; }
.aura-bg .b5 { background: radial-gradient(circle at center, rgba(255,210,160,0.85) 0, rgba(255,210,160,0) 58%); transform-origin: calc(50% - 760px) calc(50% + 760px); animation: auraCircle 24s ease infinite; opacity: 0.48; }
.aura-bg .b-pointer {
  position: absolute;
  width: 64%; height: 64%;
  top: 18%; left: 18%;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(255,200,140,0.75) 0, rgba(255,200,140,0) 54%);
  mix-blend-mode: screen;
  opacity: 0.85;
  will-change: transform;
}
/* slim feather at the very bottom so the full-bleed video eases into the page */
.hero--video::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 16%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(27,19,13,0) 0%, var(--cream) 100%);
}
/* readability scrim: keeps the tagline + buttons legible over the footage
   without dimming the logo, which sits higher up */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(24,16,10,0) 52%, rgba(24,16,10,0.5) 100%);
}

.hero__media {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  justify-content: center;
  will-change: transform, opacity;
}
/* The full composition, shown at a comfortable size and centred. It sits on the
   matching blurred field, and its top + bottom edges are feathered, so it melts
   into the background rather than reading as a zoomed-in or boxed element. */
.hero__video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%);
  width: auto;
  height: min(94vh, 106vw, 990px);
  aspect-ratio: 1 / 1;
  object-fit: contain;
  z-index: 2;
  pointer-events: none;
  /* feather all four edges so the composition melts into the field on every
     side; the ramps clear the wordmark and only dissolve the ring's outer glow */
  -webkit-mask:
    linear-gradient(to right, rgba(0,0,0,0) 0%, #000 11%, #000 89%, rgba(0,0,0,0) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 15%, #000 85%, rgba(0,0,0,0) 100%);
  -webkit-mask-composite: source-in;
  mask:
    linear-gradient(to right, rgba(0,0,0,0) 0%, #000 11%, #000 89%, rgba(0,0,0,0) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 15%, #000 85%, rgba(0,0,0,0) 100%);
  mask-composite: intersect;
}
/* On portrait screens the footage spans the full width instead, still feathered
   top + bottom so it blends into the field above and below. */
@media (max-aspect-ratio: 1 / 1) {
  .hero__video {
    width: 100%;
    height: auto;
    transform: translate(-50%, -50%);
    -webkit-mask: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 17%, #000 83%, rgba(0,0,0,0) 100%);
    mask: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 17%, #000 83%, rgba(0,0,0,0) 100%);
  }
}
/* Sound toggle — autoplay must start muted, so this lets a visitor opt into
   audio. Fixed to the lower-left so it mirrors Mia (lower-right) without
   colliding; JS fades it out and mutes the video once the hero scrolls away. */
.hero__sound {
  position: fixed;
  left: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.95rem 0.55rem 0.7rem;
  border: 1px solid rgba(255, 211, 160, 0.34);
  border-radius: 999px;
  background: rgba(28, 19, 12, 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--amber-hi);
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease),
              background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.hero__sound.is-ready { opacity: 0.92; transform: translateY(0); pointer-events: auto; }
.hero__sound:hover { background: rgba(40, 27, 16, 0.62); border-color: rgba(255, 211, 160, 0.6); opacity: 1; }
.hero__sound:focus-visible { outline: 2px solid var(--amber-hi); outline-offset: 3px; }
.hero__sound svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.hero__sound .hero__sound-on { display: none; }
.hero__sound[aria-pressed="true"] .hero__sound-off { display: none; }
.hero__sound[aria-pressed="true"] .hero__sound-on { display: block; }
.hero__sound[aria-pressed="true"] { background: rgba(166, 117, 76, 0.5); border-color: rgba(255, 211, 160, 0.7); }
.hero__sound-txt { line-height: 1; }
@media (max-width: 560px) {
  .hero__sound { padding: 0.5rem; }
  .hero__sound-txt { display: none; }
}
.hero__below { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; margin-top: clamp(0.25rem, 1vh, 1.25rem); }
.hero__tag {
  font-family: var(--display);
  font-size: clamp(0.82rem, 2.4vw, 1.05rem);
  letter-spacing: 0.46em;
  text-transform: uppercase;
  color: #f1c89c;
  text-indent: 0.46em;
}

.hero__cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.hero--video .btn--ghost { --btn-fg: #ECDFD0; border-color: rgba(236,223,208,0.32); }
.hero--video .btn--ghost:hover { border-color: var(--amber); color: var(--amber-hi); }

@keyframes auraVertical {
  0%, 100% { transform: translateY(-22%); }
  50%      { transform: translateY(22%); }
}
@keyframes auraHorizontal {
  0%, 100% { transform: translateX(-26%) translateY(-8%); }
  50%      { transform: translateX(26%) translateY(8%); }
}
@keyframes auraCircle {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes auraPulse {
  0%, 100% { transform: translate(-50%, -52%) scale(0.92); opacity: 0.34; }
  50%      { transform: translate(-50%, -52%) scale(1.06); opacity: 0.58; }
}

.scroll-hint {
  position: absolute; bottom: 2rem; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-size: 0.62rem; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--taupe);
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
}
.scroll-hint span { width: 1px; height: 42px; background: linear-gradient(var(--bronze), transparent); animation: drip 2.4s ease-in-out infinite; transform-origin: top; }
@keyframes drip { 0%,100% { transform: scaleY(0.3); opacity:.4 } 50% { transform: scaleY(1); opacity:1 } }

/* ------------------------------ marquee -------------------------------- */
.marquee {
  border-block: 1px solid var(--clay);
  background: var(--shell);
  overflow: hidden;
  padding-block: 1.15rem;
}
.marquee__track {
  display: flex;
  gap: 3.5rem;
  width: max-content;
  animation: scrollx 38s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  color: var(--cocoa);
  display: inline-flex; align-items: center; gap: 3.5rem;
  white-space: nowrap;
}
.marquee__item::after { content: "✦"; color: var(--bronze); font-size: 0.7em; font-style: normal; }
@keyframes scrollx { to { transform: translateX(-50%); } }

/* ------------------------------- triad --------------------------------- */
.triad { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); }
.pillar { text-align: center; display: flex; flex-direction: column; align-items: center; }
.pillar__icon {
  width: 92px; height: 92px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--clay);
  margin-bottom: 1.6rem;
  position: relative;
  transition: border-color .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease);
}
.pillar__icon svg { width: 38px; height: 38px; stroke: var(--bronze); fill: none; stroke-width: 1.3; }
.pillar:hover .pillar__icon {
  border-color: var(--amber);
  box-shadow: 0 0 40px -6px rgba(240,169,104,0.6);
  transform: translateY(-4px);
}
.pillar h3 { font-size: 1.5rem; }
.pillar .step {
  font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.4em;
  text-transform: uppercase; color: var(--bronze); margin-bottom: 0.9rem;
}
.pillar p { color: var(--taupe); margin-top: 0.7rem; max-width: 30ch; }

/* divider with a small ring */
.ring-divider { display: flex; align-items: center; justify-content: center; gap: 1.2rem; color: var(--clay); }
.ring-divider::before, .ring-divider::after { content: ""; height: 1px; flex: 1; max-width: 160px; background: linear-gradient(90deg, transparent, var(--clay)); }
.ring-divider::after { background: linear-gradient(90deg, var(--clay), transparent); }
.ring-divider .dot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--bronze); box-shadow: 0 0 14px 1px rgba(240,169,104,0.6); }

/* --------------------------- treatment grid ---------------------------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
.card {
  position: relative;
  border-radius: var(--radius);
  padding: 2rem 1.8rem 1.8rem;
  background: linear-gradient(160deg, var(--shell), var(--sand));
  border: 1px solid rgba(220,198,176,0.7);
  overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  isolation: isolate;
}
.card::after {
  content: "";
  position: absolute; top: -40%; right: -30%;
  width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: var(--aura-glow);
  opacity: 0; transition: opacity .5s var(--ease);
  z-index: -1;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
.card:hover::after { opacity: 0.9; }
/* Cards sit on light surfaces even inside dark sections — keep ink dark. */
.dark .card h3 { color: var(--espresso); }
.dark .card p { color: var(--taupe); }
.card__glyph { width: 44px; height: 44px; stroke: var(--bronze); fill: none; stroke-width: 1.2; margin-bottom: 1.3rem; }
.card h3 { font-size: 1.45rem; margin-bottom: 0.5rem; }
.card p { color: var(--taupe); font-size: 0.95rem; }
.card__meta {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 1.4rem; padding-top: 1.1rem;
  border-top: 1px solid var(--clay);
  font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--taupe);
}
.card__price { color: var(--bronze); font-weight: 500; }

/* ----------------------------- stat row -------------------------------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem,4vw,3rem); }
.stat { text-align: center; }
.stat__num {
  font-family: var(--display);
  font-size: clamp(2.6rem, 6vw, 4rem);
  color: var(--amber-hi);
  line-height: 1;
}
.stat__label { margin-top: 0.8rem; font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(233,221,208,0.7); }

/* ------------------------- split / feature ----------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.split--reverse .split__media { order: 2; }
.split__media {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 70% 10%, rgba(255,211,160,0.5), transparent 55%),
    linear-gradient(150deg, var(--sand), var(--clay));
  display: grid; place-items: center;
  box-shadow: var(--shadow-soft);
}
.split__media .aura-ring { position: relative; width: 62%; aspect-ratio: 1; }
.split__media .figtag {
  position: absolute; left: 1.4rem; bottom: 1.4rem; z-index: 5;
  font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--cocoa);
  background: rgba(251,245,238,0.7); padding: 0.5em 1em; border-radius: 999px; backdrop-filter: blur(4px);
}

/* ---------------------------- testimonials ----------------------------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 3vw, 2rem); }
.quote {
  padding: 2.2rem 1.9rem;
  border-radius: var(--radius);
  background: var(--shell);
  border: 1px solid var(--clay);
}
.quote__mark { font-family: var(--display); font-size: 3rem; color: var(--bronze-2); line-height: 0.6; }
.quote p { font-family: var(--display); font-size: 1.12rem; font-style: italic; color: var(--cocoa); margin: 0.8rem 0 1.4rem; }
.quote__who { font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bronze); }

/* ------------------------------- CTA band ------------------------------ */
.cta-band { position: relative; text-align: center; overflow: hidden; }
.cta-band .aura-ring { width: 520px; aspect-ratio: 1; top: 50%; left: 50%; transform: translate(-50%,-50%); opacity: 0.6; }
.cta-band__inner { position: relative; z-index: 2; }
.cta-band h2 { margin-bottom: 1.6rem; }

/* ------------------------------ waitlist ------------------------------- */
.waitlist {
  display: flex; gap: 0.6rem; flex-wrap: wrap; max-width: 480px;
}
.waitlist input {
  flex: 1; min-width: 220px;
  padding: 0.95em 1.3em;
  border-radius: 999px;
  border: 1px solid var(--clay);
  background: var(--shell);
  font-family: var(--sans); font-size: 0.92rem; color: var(--cocoa);
}
.dark .waitlist input { background: rgba(255,255,255,0.06); border-color: rgba(233,221,208,0.25); color: var(--shell); }
.waitlist input:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }

/* ------------------------------- footer -------------------------------- */
.footer { background: var(--espresso); color: rgba(233,221,208,0.82); padding-top: clamp(4rem,8vw,6rem); }
.footer a { color: rgba(233,221,208,0.82); transition: color .3s var(--ease); }
.footer a:hover { color: var(--amber-hi); }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 2.5rem; padding-bottom: 3.5rem; }
.footer .brand { align-items: flex-start; }
.footer .brand__name, .footer .brand__the, .footer .brand__sub { padding-left: 0; }
.footer .brand__name { color: var(--amber-hi); }
.footer__tag { margin-top: 1.2rem; max-width: 30ch; color: rgba(233,221,208,0.6); font-size: 0.92rem; }
.footer__col h4 { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--amber); margin-bottom: 1.2rem; font-weight: 500; }
.footer__col ul { list-style: none; padding: 0; display: grid; gap: 0.7rem; font-size: 0.92rem; }
.footer__note { font-size: 0.86rem; color: rgba(233,221,208,0.55); margin-bottom: 1.1rem; }
.footer__bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding-block: 1.8rem; border-top: 1px solid rgba(233,221,208,0.14);
  font-size: 0.76rem; letter-spacing: 0.08em; color: rgba(233,221,208,0.55);
}
.socials { display: flex; gap: 0.7rem; }
.socials a { width: 38px; height: 38px; border: 1px solid rgba(233,221,208,0.22); border-radius: 50%; display: grid; place-items: center; }
.socials svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.4; }

/* ---------------------------- page header ------------------------------ */
.page-hero {
  position: relative; padding-top: clamp(9.5rem, 16vw, 13rem); padding-bottom: clamp(3.5rem,6vw,5.5rem);
  text-align: center; overflow: hidden;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(240,169,104,0.20) 0%, rgba(240,169,104,0) 60%),
    linear-gradient(180deg, var(--cream) 0%, var(--shell) 100%);
}
.page-hero .aura-ring {
  width: clamp(360px, 52vw, 620px); aspect-ratio: 1; top: -14%;
  left: 0; right: 0; margin-inline: auto; opacity: 0.62;
}
/* hairline halo behind the headline */
.page-hero::after {
  content: ""; position: absolute; left: 50%; top: clamp(6.5rem, 13vw, 9.5rem);
  width: clamp(220px, 40vw, 460px); height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(199,154,109,0.7), transparent);
  z-index: 2;
}
.page-hero__inner { position: relative; z-index: 2; }
.page-hero h1 { margin: 1.4rem auto; max-width: 16ch; }
.page-hero .lede { margin: 0 auto; }

/* --------------------------- services detail --------------------------- */
.modality {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(1.5rem,4vw,4rem);
  align-items: center; padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--clay);
}
.modality:last-child { border-bottom: 1px solid var(--clay); }
.modality--reverse .modality__visual { order: 2; }
.modality__visual {
  aspect-ratio: 5/4; border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(150deg, var(--sand), var(--clay));
  display: grid; place-items: center; position: relative;
  box-shadow: 0 30px 60px -32px rgba(34,25,19,0.5), inset 0 0 0 1px rgba(255,255,255,0.06);
}
.modality__visual .aura-ring { width: 58%; aspect-ratio: 1; }
.modality__visual svg.bigglyph { position: absolute; width: 64px; height: 64px; stroke: var(--bronze); fill:none; stroke-width: 1; opacity: 0.95; }
.modality__img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.1s var(--ease);
}
.modality:hover .modality__img { transform: scale(1.045); }
/* warm brand wash + soft vignette so every photo reads on-palette */
.modality__visual::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(155deg, rgba(166,117,76,0.28) 0%, rgba(34,25,19,0.10) 45%, rgba(34,25,19,0.34) 100%),
    radial-gradient(120% 100% at 50% 50%, rgba(0,0,0,0) 58%, rgba(34,25,19,0.30) 100%);
  mix-blend-mode: multiply;
}
.modality__tag { font-size: 0.66rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--bronze); }
.modality h3 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin: 0.7rem 0 1rem; }
.modality__benefits { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: 0.6rem; }
.modality__benefits li { display: flex; gap: 0.7rem; align-items: baseline; font-size: 0.95rem; color: var(--cocoa); }
.modality__benefits li::before { content: "✦"; color: var(--bronze); font-size: 0.7em; }
.modality__meta { display: flex; gap: 2rem; margin-top: 1.6rem; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--taupe); }
.modality__meta strong { display: block; color: var(--bronze); font-weight: 500; font-size: 1.05rem; letter-spacing: 0; text-transform: none; font-family: var(--display); }

/* --------------------------- meet the founder -------------------------- */
.founder {
  position: relative; overflow: hidden;
  background:
    radial-gradient(70% 50% at 88% 8%, rgba(240,169,104,0.14) 0%, rgba(240,169,104,0) 55%),
    linear-gradient(180deg, var(--shell) 0%, var(--cream) 100%);
}
.founder--hero { padding-top: clamp(8.5rem, 15vw, 12rem); }
.founder--hero .founder__media { top: clamp(7.5rem, 13vw, 10rem); }
.founder__grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.founder__media { position: sticky; top: clamp(5.5rem, 10vw, 7.5rem); }
.founder__frame {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: 0 40px 80px -36px rgba(34,25,19,0.62), inset 0 0 0 1px rgba(199,154,109,0.35);
}
.founder__frame img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; display: block;
}
.founder__halo {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(34,25,19,0) 55%, rgba(34,25,19,0.34) 100%);
  mix-blend-mode: multiply;
}
.founder__card {
  position: relative; margin-top: -2.6rem; margin-inline: clamp(1rem, 3vw, 2.2rem); z-index: 2;
  background: rgba(251,245,238,0.82); backdrop-filter: blur(8px);
  border: 1px solid var(--clay); border-radius: var(--radius-md, 14px);
  padding: 1.1rem 1.5rem; text-align: center;
  box-shadow: 0 18px 40px -26px rgba(34,25,19,0.5);
}
.founder__sig {
  display: block; font-family: var(--script); font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  color: var(--bronze); line-height: 1;
}
.founder__role {
  display: block; margin-top: 0.35rem; font-family: var(--sans);
  font-size: 0.66rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--taupe);
}
.founder__title { margin: 1rem 0 0; }
.founder__story { margin-top: clamp(1.6rem, 3vw, 2.2rem); max-width: 60ch; }
.founder__story p { color: var(--cocoa); margin-bottom: 1.15rem; line-height: 1.75; }
.founder__open { font-size: 1.06rem; }
.dropcap {
  float: left; font-family: var(--display); font-size: 3.5rem; line-height: 0.82;
  padding: 0.32rem 0.6rem 0 0; color: var(--bronze);
  background: linear-gradient(180deg, var(--bronze-2), var(--bronze)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.founder__beat {
  font-family: var(--display); font-size: clamp(1.15rem, 2vw, 1.45rem);
  color: var(--espresso); line-height: 1.5; margin-block: 1.6rem;
}
.founder__beat em { font-style: italic; color: var(--bronze); }
.founder__quote {
  margin: 1.8rem 0; padding: 0.2rem 0 0.2rem 1.5rem;
  border-left: 2px solid var(--amber);
  font-family: var(--display); font-style: italic;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem); line-height: 1.4; color: var(--espresso);
}
.founder__signoff {
  margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid var(--clay);
  display: flex; flex-direction: column; gap: 0.15rem;
}
.founder__signoff-pre { font-style: italic; color: var(--taupe); }
.founder__signoff-name {
  font-family: var(--script); font-size: clamp(1.9rem, 4vw, 2.6rem); color: var(--bronze); line-height: 1.1;
}
.founder__signoff-role {
  font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--taupe);
}

/* ------------------------------ pricing -------------------------------- */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem,2.5vw,1.8rem); align-items: stretch; }
.tier {
  display: flex; flex-direction: column;
  padding: 2.4rem 2rem;
  border-radius: var(--radius-lg);
  background: var(--shell);
  border: 1px solid var(--clay);
  position: relative;
}
.tier--featured {
  background: linear-gradient(170deg, var(--espresso), #2e2218);
  color: #E9DDD0; border-color: transparent;
  box-shadow: var(--shadow-card);
}
.tier--featured h3, .tier--featured .tier__price { color: var(--amber-hi); }
.tier--featured .tier__feat li { color: rgba(233,221,208,0.85); }
.tier--featured .tier__feat li::before { color: var(--amber); }
.tier__badge {
  position: absolute; top: 1.4rem; right: 1.4rem;
  font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--espresso); background: var(--amber); padding: 0.35em 0.9em; border-radius: 999px;
}
.tier h3 { font-size: 1.5rem; }
.tier__kind { font-size: 0.68rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--bronze); margin-bottom: 1rem; }
.tier--featured .tier__kind { color: var(--amber); }
.tier__price { font-family: var(--display); font-size: 2.8rem; color: var(--espresso); line-height: 1; margin-bottom: 0.3rem; }
.tier__price span { font-family: var(--sans); font-size: 0.9rem; color: var(--taupe); letter-spacing: 0.05em; }
.tier--featured .tier__price span { color: rgba(233,221,208,0.7); }
.tier__desc { font-size: 0.92rem; color: var(--taupe); margin-bottom: 1.6rem; min-height: 3em; }
.tier--featured .tier__desc { color: rgba(233,221,208,0.7); }
.tier__feat { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: 0.75rem; flex: 1; }
.tier__feat li { display: flex; gap: 0.6rem; align-items: baseline; font-size: 0.92rem; color: var(--cocoa); }
.tier__feat li::before { content: "✦"; color: var(--bronze); font-size: 0.65em; }
.tier .btn { width: 100%; justify-content: center; }

/* -------------------------------- FAQ ---------------------------------- */
.faq { max-width: 760px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--clay); }
.faq__q {
  width: 100%; text-align: left; background: none; border: 0;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.5rem 0;
  font-family: var(--display); font-size: clamp(1.1rem,2vw,1.35rem); color: var(--espresso);
}
.faq__q .pm { flex: none; width: 22px; height: 22px; position: relative; }
.faq__q .pm::before, .faq__q .pm::after { content:""; position:absolute; inset:0; margin:auto; background: var(--bronze); transition: transform .35s var(--ease); }
.faq__q .pm::before { width: 16px; height: 1.5px; }
.faq__q .pm::after { width: 1.5px; height: 16px; }
.faq__item[open] .pm::after { transform: rotate(90deg) scaleX(0); }
.faq__a { padding: 0 0 1.6rem; color: var(--taupe); max-width: 64ch; }
details.faq__item summary { list-style: none; cursor: pointer; }
details.faq__item summary::-webkit-details-marker { display: none; }

/* ------------------------------ booking -------------------------------- */
.book-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4.5rem); align-items: start; }
.book-aside h2 { margin-bottom: 1.2rem; }
.book-steps { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.6rem; }
.book-steps li { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; }
.book-steps .n { font-family: var(--display); font-size: 1.1rem; color: var(--bronze); width: 38px; height: 38px; border: 1px solid var(--clay); border-radius: 50%; display: grid; place-items: center; }
.book-steps h4 { font-family: var(--sans); font-size: 0.95rem; letter-spacing: 0.04em; color: var(--espresso); margin-bottom: 0.2rem; }
.book-steps p { font-size: 0.9rem; color: var(--taupe); }

.form-card { background: var(--shell); border: 1px solid var(--clay); border-radius: var(--radius-lg); padding: clamp(1.6rem, 3vw, 2.6rem); box-shadow: var(--shadow-soft); }
.field { margin-bottom: 1.2rem; }
.field label { display: block; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--taupe); margin-bottom: 0.5rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.85em 1.1em;
  border: 1px solid var(--clay); border-radius: 12px;
  background: var(--cream); font-family: var(--sans); font-size: 0.95rem; color: var(--cocoa);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--bronze);
  box-shadow: 0 0 0 3px rgba(166,117,76,0.14);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-card .btn { width: 100%; justify-content: center; margin-top: 0.4rem; }
.form-note { font-size: 0.78rem; color: var(--taupe); margin-top: 1rem; text-align: center; }
.calendly-hint { font-size: 0.8rem; color: var(--taupe); background: var(--sand); border-radius: 12px; padding: 1rem 1.2rem; margin-top: 1.4rem; }
.calendly-hint code { background: rgba(34,25,19,0.08); padding: 0.1em 0.4em; border-radius: 5px; font-size: 0.85em; }

.form-success {
  display: none;
  text-align: center; padding: 1rem 0;
}
.form-success .ok { width: 70px; height: 70px; margin: 0 auto 1.2rem; border-radius: 50%; border: 1px solid var(--amber); display: grid; place-items: center; box-shadow: 0 0 40px -6px rgba(240,169,104,0.6); }
.form-success .ok svg { width: 30px; height: 30px; stroke: var(--bronze); fill: none; stroke-width: 1.5; }
.form-success h3 { margin-bottom: 0.6rem; }
.form-success p { color: var(--taupe); }
body.booked .form-fields { display: none; }
body.booked .form-success { display: block; }

/* ----------------------------- about bits ------------------------------ */
.values { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem,3vw,2.5rem); }
.value { padding: 1.8rem 0; border-top: 1px solid var(--clay); }
.value h3 { font-size: 1.3rem; margin-bottom: 0.6rem; display: flex; gap: 0.8rem; align-items: baseline; }
.value h3 .vn { font-family: var(--sans); font-size: 0.8rem; color: var(--bronze); letter-spacing: 0.1em; }
.value p { color: var(--taupe); }

/* ----------------------------- reveal anim ----------------------------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }

/* ----------------------------- mobile menu ----------------------------- */
.mobile-menu {
  position: fixed; inset: 0; z-index: 90;
  background: var(--cream);
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1.6rem;
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
body.menu-open .mobile-menu { opacity: 1; visibility: visible; transform: none; }
.mobile-menu a { font-family: var(--display); font-size: 1.8rem; color: var(--espresso); }
.mobile-menu a:hover { color: var(--bronze); }
.mobile-menu .btn { margin-top: 1rem; }

/* ============================ ENHANCEMENTS ============================== */

/* --- global glow that trails the cursor (a soft ball of light) --------- */
.cursor-glow {
  position: fixed; top: 0; left: 0;
  width: 480px; height: 480px;
  margin: -240px 0 0 -240px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity .6s var(--ease);
  filter: blur(12px);
  background: radial-gradient(circle at center,
    rgba(240,169,104,0.26) 0%, rgba(240,169,104,0.12) 34%, rgba(240,169,104,0) 70%);
  will-change: transform;
}
.cursor-glow.is-active { opacity: 1; }
/* a brighter trailing core so it reads as a moving ball, not just a wash */
.cursor-glow::after {
  content: ""; position: absolute; inset: 38% 38%;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(255,221,180,0.5), rgba(255,221,180,0) 70%);
}

/* thin scroll-progress thread down the page edge */
.scroll-prog {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  z-index: 120; pointer-events: none;
  background: linear-gradient(90deg, var(--bronze), var(--amber-hi));
  box-shadow: 0 0 12px rgba(240,169,104,0.7);
}

/* ----------------------- marquee: floating in space -------------------- */
.marquee {
  border-block: 0;
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(240,169,104,0.10) 0%, rgba(240,169,104,0) 62%);
  padding-block: clamp(2.6rem, 5vw, 4.2rem);
  position: relative;
  -webkit-mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
          mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  animation: floaty 8s ease-in-out infinite;
}
.marquee__track {
  gap: 4.5rem;
  filter: drop-shadow(0 2px 22px rgba(240,169,104,0.42)) drop-shadow(0 0 1px rgba(74,58,44,0.25));
}
.marquee__item {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.5rem, 3.4vw, 2.7rem);
  background: linear-gradient(180deg, var(--amber-hi) 0%, var(--bronze) 48%, var(--cocoa) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  opacity: 0.92;
  gap: 4.5rem;
  transition: opacity .35s var(--ease), transform .35s var(--ease), filter .35s var(--ease);
  will-change: opacity, transform;
}
.marquee:hover .marquee__item { opacity: 1; }
.marquee__item::after {
  -webkit-text-fill-color: var(--bronze-2);
  color: var(--bronze-2);
  opacity: 0.85;
}
@keyframes floaty {
  0%, 100% { transform: translateY(-6px); }
  50%      { transform: translateY(6px); }
}

/* ----------------------- method: three movements ----------------------- */
.method {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(4rem, 8vw, 6rem);
}
.method__arc {
  position: absolute;
  top: -16%; left: 0; width: 100%; height: 150px;
  overflow: visible; z-index: 0; pointer-events: none;
}
.method__arc path {
  stroke: var(--amber); stroke-width: 1.4;
  stroke-dasharray: 2 11; stroke-linecap: round; opacity: 0.9;
  filter: drop-shadow(0 0 6px rgba(240,169,104,0.55));
}
.movement {
  position: relative; z-index: 1;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  padding-top: clamp(1.5rem, 3vw, 2.4rem);
}
.movement--1, .movement--3 { transform: translateY(clamp(1.6rem, 4vw, 3rem)); }
/* glowing node where each movement meets the arc */
.movement::before {
  content: "";
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--amber-hi);
  box-shadow: 0 0 0 5px rgba(240,169,104,0.16), 0 0 18px 3px rgba(240,169,104,0.7);
}
.movement__num {
  font-family: var(--display);
  font-size: clamp(4.2rem, 9vw, 7rem);
  line-height: 0.9;
  letter-spacing: 0.02em;
  background: linear-gradient(165deg, var(--amber-hi) 0%, var(--bronze-2) 42%, var(--bronze) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 4px 20px rgba(166,117,76,0.4));
  opacity: 0.95;
}
.movement__word {
  font-family: var(--display);
  font-size: clamp(2rem, 4.2vw, 3rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: -0.1rem 0 1rem;
  background: linear-gradient(180deg, var(--cocoa) 0%, var(--espresso) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.movement h3 {
  font-family: var(--sans); font-weight: 500;
  font-size: 0.74rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--bronze); margin-bottom: 0.8rem;
  position: relative; padding-bottom: 0.7rem;
}
.movement h3::after {
  content: "";
  position: absolute;
  bottom: 0; left: 50%; transform: translateX(-50%);
  width: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--bronze-2), transparent);
}
.movement p { color: var(--taupe); max-width: 32ch; }

/* --------------------- treatments: immersive showcase ------------------ */
.showcase { position: relative; }
.showcase__stage {
  position: relative;
  height: clamp(420px, 58vh, 560px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  isolation: isolate;
}
.slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transform: scale(1.05);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.slide.is-active { opacity: 1; visibility: visible; transform: scale(1); }
.slide::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: var(--img);
  background-size: cover; background-position: center;
  transform: scale(1.02);
  /* warm duotone so every photo reads on-brand regardless of its native tone */
  filter: saturate(0.85) sepia(0.28) hue-rotate(-12deg) brightness(0.9) contrast(1.05);
}
.slide.is-active::before { animation: kenburns 7s ease-out forwards; }
@keyframes kenburns { to { transform: scale(1.13); } }
.slide__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 120% at 85% 15%, rgba(240,169,104,0.28), transparent 55%),
    linear-gradient(90deg, rgba(18,12,8,0.9) 0%, rgba(18,12,8,0.55) 45%, rgba(18,12,8,0.12) 100%),
    linear-gradient(0deg, rgba(18,12,8,0.7), transparent 55%);
}
.slide__body {
  position: absolute; left: 0; bottom: 0;
  padding: clamp(1.8rem, 4vw, 3.2rem);
  z-index: 1; max-width: 60ch;
}
.slide__kind { font-size: 0.7rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--amber-hi); }
.slide__title { font-size: clamp(1.9rem, 4vw, 3.2rem); color: #fff; margin: 0.6rem 0 0.7rem; }
.slide__desc { color: rgba(244,237,227,0.84); max-width: 46ch; }
.slide__detail {
  display: flex; gap: clamp(1.4rem, 4vw, 2.6rem); align-items: center;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .6s var(--ease), opacity .5s var(--ease), margin-top .5s var(--ease);
}
.slide__detail .k { display: block; font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--amber); margin-bottom: 0.25rem; }
.slide__detail .v { font-family: var(--display); font-size: 1.3rem; color: #fff; }
.slide__detail .textlink { color: var(--amber-hi); }
.showcase__stage:hover .slide.is-active .slide__detail,
.showcase__stage:focus-within .slide.is-active .slide__detail {
  max-height: 140px; opacity: 1; margin-top: 1.4rem;
}
/* immersive cursor spotlight inside the stage */
.showcase__stage::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(200px 200px at var(--mx, 50%) var(--my, 50%), rgba(255,205,150,0.22), transparent 70%);
  mix-blend-mode: screen; opacity: 0; transition: opacity .4s var(--ease);
}
.showcase__stage:hover::after { opacity: 1; }

.showcase__rail { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.7rem; margin-top: 1.3rem; }
.showcase__tab { background: none; border: 0; text-align: left; padding: 0.2rem 0; display: flex; flex-direction: column; gap: 0.6rem; }
.showcase__tabname { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; transition: color .3s var(--ease); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.showcase__bar { display: block; height: 2px; border-radius: 2px; background: rgba(233,221,208,0.18); position: relative; overflow: hidden; }
.showcase__bar i { position: absolute; inset: 0; width: 0; background: linear-gradient(90deg, var(--bronze), var(--amber-hi)); }
.dark .showcase__tabname { color: rgba(233,221,208,0.5); }
.dark .showcase__tab.is-active .showcase__tabname { color: var(--amber-hi); }
.showcase__tab:hover .showcase__tabname { color: rgba(233,221,208,0.85); }

/* --------------------- why it works: handcrafted ----------------------- */
.split__media.canvas {
  background:
    radial-gradient(120% 90% at 28% 18%, rgba(255,211,160,0.55), transparent 55%),
    linear-gradient(150deg, var(--shell), var(--clay));
}
.canvas__script {
  position: absolute; left: 9%; top: 13%;
  font-family: var(--script); font-weight: 700;
  font-size: clamp(2.8rem, 7vw, 4.8rem); line-height: 0.86;
  color: var(--bronze); transform: rotate(-6deg);
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
}
.canvas__note {
  position: absolute; right: 9%; bottom: 16%;
  font-family: var(--script); font-size: clamp(1.1rem, 2.6vw, 1.6rem);
  color: var(--cocoa); transform: rotate(-3deg); opacity: 0.85;
  max-width: 14ch; text-align: right;
}
.script-accent {
  font-family: var(--script); font-weight: 700; font-style: normal;
  color: var(--bronze); font-size: 1.3em; line-height: 0.7;
  padding: 0 0.06em;
}
.drawn { position: relative; }
.drawn__line {
  position: absolute; left: 0; bottom: -0.32em;
  width: min(64%, 360px); height: 0.6em; overflow: visible;
}
.drawn__line path {
  fill: none; stroke: var(--bronze); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 320; stroke-dashoffset: 320;
}
.reveal.in .drawn__line path { animation: drawline 1.3s var(--ease) forwards 0.35s; }
@keyframes drawline { to { stroke-dashoffset: 0; } }

/* ------------------- US to the Gulf: living media ---------------------- */
.split__media.gulf {
  background:
    radial-gradient(120% 90% at 70% 8%, rgba(255,211,160,0.4), transparent 52%),
    linear-gradient(160deg, #2c2017, #160e09);
  perspective: 900px;
}
.split__media[data-tilt] { transition: transform .35s var(--ease); transform-style: preserve-3d; will-change: transform; }
.gulf .aura-ring { z-index: 1; }
.gulf__skyline {
  position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
  z-index: 2;
  background: bottom center / cover no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='220' preserveAspectRatio='none'%3E%3Cg fill='%23120c08' fill-opacity='0.92'%3E%3Crect x='20' y='150' width='30' height='70'/%3E%3Crect x='56' y='120' width='26' height='100'/%3E%3Crect x='88' y='140' width='34' height='80'/%3E%3Crect x='130' y='100' width='24' height='120'/%3E%3Crect x='160' y='130' width='40' height='90'/%3E%3Crect x='210' y='110' width='22' height='110'/%3E%3Cpolygon points='250,220 268,40 286,220'/%3E%3Crect x='262' y='60' width='12' height='160'/%3E%3Crect x='300' y='120' width='30' height='100'/%3E%3Crect x='338' y='150' width='24' height='70'/%3E%3Crect x='368' y='100' width='34' height='120'/%3E%3Crect x='410' y='135' width='26' height='85'/%3E%3Crect x='444' y='115' width='30' height='105'/%3E%3Crect x='482' y='145' width='40' height='75'/%3E%3Crect x='528' y='125' width='24' height='95'/%3E%3Crect x='558' y='150' width='28' height='70'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask: linear-gradient(to top, #000 60%, transparent);
          mask: linear-gradient(to top, #000 60%, transparent);
}
.spark {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: var(--amber-hi);
  box-shadow: 0 0 8px 2px rgba(255,211,160,0.7);
  opacity: 0; pointer-events: none; z-index: 3;
  animation: rise linear infinite;
}
@keyframes rise {
  0%   { opacity: 0; transform: translateY(0) scale(0.6); }
  15%  { opacity: 0.9; }
  85%  { opacity: 0.7; }
  100% { opacity: 0; transform: translateY(-120px) scale(1); }
}

/* ------------------------------ responsive ----------------------------- */
@media (max-width: 920px) {
  .nav__links { display: none; }
  .nav__cta .btn { display: none; }
  .nav__toggle { display: block; }
  .split, .split--reverse .split__media { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .modality, .modality--reverse .modality__visual { grid-template-columns: 1fr; }
  .modality--reverse .modality__visual { order: 0; }
  .book-layout { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 920px) {
  .method { grid-template-columns: 1fr; gap: 2.5rem; margin-top: 2.5rem; }
  .method__arc { display: none; }
  .movement--1, .movement--3 { transform: none; }
  .showcase__rail { grid-template-columns: repeat(3, 1fr); gap: 0.6rem 1rem; }
  .founder__grid { grid-template-columns: 1fr; gap: clamp(2rem, 6vw, 3rem); }
  .founder__media { position: static; max-width: 460px; margin-inline: auto; }
  .founder__story { max-width: none; }
}
@media (max-width: 720px) {
  .triad, .cards, .stats, .quotes, .tiers, .values { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; text-align: center; }
  .field-row { grid-template-columns: 1fr; }
  .hero { min-height: 92svh; }
  .canvas__script { left: 7%; }
}
/* touch devices: no hover, so reveal slide details. The cursor glow stays —
   it now trails the finger on touch (see main.js) for the same ambient effect. */
@media (hover: none) {
  .slide.is-active .slide__detail { max-height: 140px; opacity: 1; margin-top: 1.2rem; }
}

/* --------------------------- reduced motion ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ============================ MIA — live chat =========================== */
.mia-launch {
  position: fixed;
  right: clamp(1rem, 3vw, 1.6rem);
  bottom: clamp(1rem, 3vw, 1.6rem);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 1.05rem 0.5rem 0.5rem;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  color: var(--shell);
  background: linear-gradient(135deg, #b9854f, #8a5e38);
  box-shadow: 0 18px 40px -14px rgba(120, 78, 40, 0.7), inset 0 1px 0 rgba(255,255,255,0.25);
  font-family: var(--sans);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), opacity 0.3s;
}
.mia-launch:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -16px rgba(120, 78, 40, 0.85); }
.mia-launch:focus-visible { outline: 2px solid var(--amber-hi); outline-offset: 3px; }
.mia-launch__avatar {
  width: 40px; height: 40px; flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--display); font-size: 1.2rem; color: #3a2616;
  background: radial-gradient(circle at 38% 32%, #ffe7c8, #f0a968 70%);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.4), 0 0 18px rgba(240,169,104,0.8);
}
.mia-launch__txt { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.mia-launch__txt b { font-size: 0.92rem; font-weight: 500; letter-spacing: 0.02em; }
.mia-launch__txt span { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; }
.mia-launch__dot { width: 7px; height: 7px; border-radius: 50%; background: #6ee7a8; box-shadow: 0 0 8px #6ee7a8; margin-left: 0.15rem; }
body.mia-open .mia-launch { opacity: 0; pointer-events: none; transform: scale(0.7); }

/* teaser greeting bubble */
.mia-teaser {
  position: fixed;
  right: clamp(1rem, 3vw, 1.6rem);
  bottom: calc(clamp(1rem, 3vw, 1.6rem) + 70px);
  z-index: 199;
  max-width: 250px;
  padding: 0.8rem 1rem;
  border-radius: 16px 16px 4px 16px;
  background: var(--shell);
  color: var(--cocoa);
  font-family: var(--sans); font-size: 0.86rem; line-height: 1.45;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--clay);
  opacity: 0; transform: translateY(10px) scale(0.96);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  pointer-events: none;
}
.mia-teaser.show { opacity: 1; transform: none; }
body.mia-open .mia-teaser { opacity: 0 !important; pointer-events: none; }

/* panel */
.mia {
  position: fixed;
  right: clamp(0.75rem, 3vw, 1.6rem);
  bottom: clamp(0.75rem, 3vw, 1.6rem);
  z-index: 201;
  width: min(380px, calc(100vw - 1.5rem));
  height: min(620px, calc(100vh - 1.5rem));
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #fbf5ee 0%, #f4e9dc 100%);
  border-radius: 22px;
  border: 1px solid var(--clay);
  box-shadow: 0 40px 90px -30px rgba(34,25,19,0.6);
  overflow: hidden;
  opacity: 0; transform: translateY(24px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
  font-family: var(--sans);
}
body.mia-open .mia { opacity: 1; transform: none; pointer-events: auto; }

.mia__head {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.9rem 1rem;
  color: var(--shell);
  background: linear-gradient(135deg, #7a5230, #4a3322);
  position: relative;
}
.mia__head::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 180% at 18% -20%, rgba(240,169,104,0.45), transparent 60%);
  pointer-events: none;
}
.mia__ava {
  width: 42px; height: 42px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--display); font-size: 1.25rem; color: #3a2616;
  background: radial-gradient(circle at 38% 32%, #ffe7c8, #f0a968 70%);
  box-shadow: 0 0 16px rgba(240,169,104,0.7);
}
.mia__id { display: flex; flex-direction: column; line-height: 1.2; flex: 1; }
.mia__id b { font-family: var(--display); font-size: 1.05rem; font-weight: 400; letter-spacing: 0.03em; }
.mia__id span { font-size: 0.7rem; letter-spacing: 0.04em; opacity: 0.85; display: flex; align-items: center; gap: 0.4rem; }
.mia__id span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #6ee7a8; box-shadow: 0 0 7px #6ee7a8; }
.mia__close {
  width: 32px; height: 32px; flex: none; border: none; cursor: pointer;
  border-radius: 50%; background: rgba(255,255,255,0.14); color: var(--shell);
  font-size: 1.1rem; line-height: 1; display: grid; place-items: center;
  transition: background 0.3s;
}
.mia__close:hover { background: rgba(255,255,255,0.28); }

.mia__log {
  flex: 1; overflow-y: auto; padding: 1.1rem 1rem 0.5rem;
  display: flex; flex-direction: column; gap: 0.7rem;
  scroll-behavior: smooth;
}
.mia__log::-webkit-scrollbar { width: 7px; }
.mia__log::-webkit-scrollbar-thumb { background: var(--clay); border-radius: 10px; }

.mia-msg {
  max-width: 84%; padding: 0.7rem 0.9rem;
  font-size: 0.88rem; line-height: 1.5;
  border-radius: 16px;
  animation: miaIn 0.45s var(--ease) both;
}
.mia-msg a { color: var(--bronze); font-weight: 500; }
.mia-msg--bot { align-self: flex-start; background: var(--shell); color: var(--cocoa); border: 1px solid var(--clay); border-bottom-left-radius: 5px; }
.mia-msg--user { align-self: flex-end; background: linear-gradient(135deg, #b9854f, #8a5e38); color: var(--shell); border-bottom-right-radius: 5px; }
.mia-msg b { font-weight: 600; }
.mia-msg .mia-price { color: var(--bronze); font-weight: 600; }
@keyframes miaIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.mia-typing { align-self: flex-start; display: flex; gap: 4px; padding: 0.75rem 0.9rem; background: var(--shell); border: 1px solid var(--clay); border-radius: 16px; border-bottom-left-radius: 5px; }
.mia-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--bronze-2); animation: miaBlink 1.2s infinite both; }
.mia-typing span:nth-child(2) { animation-delay: 0.2s; }
.mia-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes miaBlink { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.mia__chips { display: flex; flex-wrap: wrap; gap: 0.45rem; padding: 0.3rem 1rem 0.6rem; }
.mia-chip {
  font-family: var(--sans); font-size: 0.78rem;
  padding: 0.42rem 0.8rem; border-radius: 100px; cursor: pointer;
  background: rgba(166,117,76,0.1); color: var(--bronze);
  border: 1px solid rgba(166,117,76,0.3);
  transition: background 0.25s, transform 0.25s, color 0.25s;
}
.mia-chip:hover { background: var(--bronze); color: var(--shell); transform: translateY(-1px); }

.mia__foot { display: flex; gap: 0.5rem; padding: 0.7rem 0.8rem; border-top: 1px solid var(--clay); background: rgba(251,245,238,0.7); }
.mia__input {
  flex: 1; border: 1px solid var(--clay); border-radius: 100px;
  padding: 0.65rem 1rem; font-family: var(--sans); font-size: 0.88rem;
  background: var(--shell); color: var(--cocoa); outline: none;
  transition: border-color 0.25s;
}
.mia__input:focus { border-color: var(--bronze-2); }
.mia__send {
  width: 44px; height: 44px; flex: none; border: none; cursor: pointer;
  border-radius: 50%; color: var(--shell); font-size: 1.1rem;
  background: linear-gradient(135deg, #b9854f, #8a5e38);
  display: grid; place-items: center;
  transition: transform 0.25s, opacity 0.25s;
}
.mia__send:hover { transform: scale(1.06); }
.mia__send:disabled { opacity: 0.5; cursor: default; }

@media (max-width: 560px) {
  .mia { width: 100vw; height: 100dvh; right: 0; bottom: 0; border-radius: 0; }
  .mia-teaser { max-width: calc(100vw - 5rem); }
}
@media (prefers-reduced-motion: reduce) {
  .mia, .mia-launch, .mia-teaser, .mia-msg { transition: none; animation: none; }
}