/* ==========================================================================
   The Tarot Room — Design System
   Palette: deep navy + antique gold + warm cream (from brand logo)
   Type: Playfair Display (display) / Cormorant Garamond (accent) / Jost (body)
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* Brand colors */
  --navy-950:#0c1326;
  --navy-900:#111a33;
  --navy-800:#16213e;
  --navy-700:#1e2c4f;
  --navy-600:#2a3c66;
  --navy-500:#3c5286;

  --gold-700:#a5811c;
  --gold-600:#c9a227;
  --gold-500:#d6b545;
  --gold-400:#e3c567;
  --gold-300:#edd992;
  --gold-100:#faf1d9;

  --cream-100:#fffdf8;
  --cream-200:#fbf6ea;
  --cream-300:#f4ecd8;
  --cream-400:#e9dcc0;

  /* Semantic tokens */
  --color-bg: var(--cream-200);
  --color-surface: var(--cream-100);
  --color-surface-alt: var(--cream-300);
  --color-ink: var(--navy-900);
  --color-ink-soft: var(--navy-700);
  --color-muted: #5b6280;
  --color-accent: var(--gold-600);
  --color-accent-light: var(--gold-400);
  --color-accent-ink: #4a3b0c;
  --color-line: rgba(17,26,51,0.12);
  --color-line-gold: rgba(201,162,39,0.35);

  --color-on-navy: var(--cream-100);
  --color-on-navy-muted: rgba(255,253,248,0.72);

  /* Typography */
  --font-display: 'Playfair Display', 'Georgia', serif;
  --font-accent: 'Cormorant Garamond', 'Georgia', serif;
  --font-body: 'Jost', 'Segoe UI', system-ui, sans-serif;

  --fs-body: 1rem;
  --fs-sm: 0.9rem;
  --fs-xs: 0.8rem;
  --fs-lg: 1.15rem;
  --fs-h5: clamp(1.1rem, 1rem + 0.4vw, 1.35rem);
  --fs-h4: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem);
  --fs-h3: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --fs-h2: clamp(2.1rem, 1.6rem + 2vw, 3.25rem);
  --fs-h1: clamp(2.6rem, 1.7rem + 3.8vw, 4.6rem);

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-body: 1.65;

  /* Spacing scale (marketing/landing density) */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-full: 999px;

  /* Shadow (warm navy tint) */
  --shadow-sm: 0 2px 8px rgba(12,19,38,0.08);
  --shadow-md: 0 8px 30px rgba(12,19,38,0.12);
  --shadow-lg: 0 20px 60px rgba(12,19,38,0.22);
  --shadow-gold: 0 8px 24px rgba(201,162,39,0.25);

  /* Motion */
  --ease-out: cubic-bezier(.16,.84,.44,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: 180ms;
  --dur-base: 280ms;
  --dur-slow: 500ms;

  /* Layout */
  --container-max: 1200px;
  --z-nav: 100;
  --z-fab: 90;
  --z-overlay: 200;
}

@media (prefers-color-scheme: dark){
  :root{
    --color-bg: var(--navy-950);
    --color-surface: var(--navy-900);
    --color-surface-alt: var(--navy-800);
    --color-ink: var(--cream-100);
    --color-ink-soft: rgba(255,253,248,0.82);
    --color-muted: rgba(255,253,248,0.6);
    --color-line: rgba(255,253,248,0.14);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.35);
    --shadow-md: 0 8px 30px rgba(0,0,0,0.45);
    --shadow-lg: 0 20px 60px rgba(0,0,0,0.55);
  }
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing: border-box; }
* { margin:0; }
html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
body{
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-ink-soft);
  background: var(--color-bg);
  overflow-x: hidden;
}
img,picture,svg{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font: inherit; color: inherit; background:none; border:0; cursor:pointer; }
input,textarea,select{ font: inherit; color: inherit; }
ul,ol{ list-style:none; padding:0; }
h1,h2,h3,h4,h5{ font-family: var(--font-display); color: var(--color-ink); font-weight:600; line-height: var(--lh-tight); text-wrap: balance; }

/* Visible, on-brand focus ring for keyboard users */
:focus-visible{
  outline: 2px solid var(--gold-600);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; top:-100px; left:1rem;
  background: var(--navy-900); color:#fff;
  padding: .75rem 1.25rem; border-radius: var(--radius-sm);
  z-index: 1000; transition: top var(--dur-base) var(--ease-out);
}
.skip-link:focus{ top: 1rem; }

/* ---------- Layout helpers ---------- */
.container{
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
/* Defensive fix: grid items default to min-width:auto, which lets nowrap text
   (buttons, prices, etc.) push a track wider than the viewport on mobile. */
.about-grid > *, .services-grid > *, .picker > *, .testimonial-track > *,
.footer-grid > *, .reader-card > *{ min-width:0; }
.section{ padding-block: var(--space-3xl); position: relative; scroll-margin-top: 84px; }
.section--tight{ padding-block: var(--space-2xl); }
.section-head{
  max-width: 640px;
  margin-bottom: var(--space-2xl);
}
.section-head.center{ margin-inline:auto; text-align:center; }
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}
.eyebrow::before,.eyebrow::after{
  content:"";
  width: 28px; height:1px;
  background: var(--color-accent);
  opacity:.7;
}
.section-head.center .eyebrow{ justify-content:center; }
.section-head h2{ margin-bottom: var(--space-sm); }
.section-head p{ color: var(--color-muted); font-size: var(--fs-lg); }

.bg-surface{ background: var(--color-surface); }
.bg-alt{ background: var(--color-surface-alt); }
.bg-navy{
  background: linear-gradient(175deg, var(--navy-900), var(--navy-950));
  color: var(--color-on-navy);
}
.bg-navy h2,.bg-navy h3,.bg-navy h4{ color: var(--color-on-navy); }
.bg-navy .section-head p{ color: var(--color-on-navy-muted); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding: 0.9rem 1.75rem;
  min-height: 48px;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-sm);
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn:active{ transform: scale(0.97); }
.btn svg{ width:1.1em; height:1.1em; flex:none; }

.btn--gold{
  background: linear-gradient(180deg, var(--gold-500), var(--gold-600));
  color: var(--color-accent-ink);
  box-shadow: var(--shadow-gold);
}
.btn--gold:hover{ background: linear-gradient(180deg, var(--gold-400), var(--gold-500)); box-shadow: 0 12px 32px rgba(201,162,39,0.35); }

.btn--outline{
  background: transparent;
  color: var(--color-on-navy, var(--color-ink));
  border: 1.5px solid currentColor;
}
.btn--outline:hover{ background: rgba(255,255,255,0.08); }

.btn--outline-dark{
  background: transparent;
  color: var(--color-ink);
  border: 1.5px solid var(--color-line-gold);
}
.btn--outline-dark:hover{ background: rgba(201,162,39,0.08); border-color: var(--color-accent); }

.btn--sm{ padding: .65rem 1.25rem; min-height:40px; font-size: var(--fs-xs); }
.btn--block{ width:100%; }

/* ---------- Motif / dividers ---------- */
.motif-divider{
  display:flex; align-items:center; justify-content:center; gap: var(--space-sm);
  color: var(--color-accent);
  margin-block: var(--space-md);
}
.motif-divider::before,.motif-divider::after{
  content:"";
  height:1px; width: 60px;
  background: linear-gradient(90deg, transparent, currentColor);
}
.motif-divider::after{ background: linear-gradient(90deg, currentColor, transparent); }

.star-icon{ width:14px; height:14px; }

/* ---------- Navbar ---------- */
.navbar{
  position: fixed; inset-block-start:0; inset-inline:0;
  z-index: var(--z-nav);
  padding-block: var(--space-md);
  transition: padding var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.navbar .container{ display:flex; align-items:center; justify-content:space-between; gap: var(--space-md); }
.navbar.is-scrolled{
  padding-block: var(--space-xs);
  background: rgba(12,19,38,0.85);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: var(--shadow-md);
}

.brand{ display:flex; align-items:center; gap:.65rem; color:#fff; }
.brand img{ height: 40px; width:auto; transition: height var(--dur-base) var(--ease-out); }
.navbar.is-scrolled .brand img{ height: 32px; }
.brand-word{
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height:1.1;
}
.brand-word span{ display:block; font-family: var(--font-accent); font-style:italic; font-size:.7rem; letter-spacing:.14em; color: var(--gold-400); text-transform:none; }

.nav-links{ display:flex; align-items:center; gap: var(--space-lg); }
.nav-links a{
  color: rgba(255,253,248,0.85);
  font-size: var(--fs-sm);
  letter-spacing:.02em;
  position:relative;
  padding-block: .25rem;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background: var(--gold-400);
  transition: right var(--dur-base) var(--ease-out);
}
.nav-links a:hover::after,.nav-links a:focus-visible::after{ right:0; }
.nav-links a:hover{ color:#fff; }

.nav-cta{ display:flex; align-items:center; gap: var(--space-sm); }

.nav-toggle{
  display:none;
  width:44px; height:44px; align-items:center; justify-content:center;
  color:#fff;
}
.nav-toggle svg{ width:24px; height:24px; }

/* Mobile nav */
@media (max-width: 480px){
  .brand-word{ font-size: .85rem; }
  .brand-word span{ display:none; }
}
@media (max-width: 1080px){
  .nav-links{
    position: fixed; top:0; left:0;
    width: 100vw; height: 100dvh;
    background: linear-gradient(180deg, var(--navy-900), var(--navy-950));
    flex-direction: column;
    justify-content:center;
    gap: var(--space-lg);
    transform: translateX(100%);
    transition: transform var(--dur-slow) var(--ease-in-out);
    z-index: calc(var(--z-nav) - 1);
  }
  .nav-links a{ font-size: var(--fs-h5); font-family: var(--font-display); }
  body.nav-open .nav-links{ transform: translateX(0); }
  .nav-toggle{ display:inline-flex; }
  .nav-cta .btn span{ display:none; }
  .nav-cta .btn{ padding: .75rem; min-width:48px; }
}
@media (min-width: 1081px){
  .nav-toggle{ display:none; }
}

/* ---------- Hero ---------- */
.hero{
  position: relative;
  min-height: 100dvh;
  display:flex; align-items:center;
  color: var(--color-on-navy);
  overflow:hidden;
  isolation: isolate;
}
.hero-media{ position:absolute; inset:0; z-index:-2; }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position: center 30%; }
.hero-media::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(201,162,39,0.18), transparent 55%),
    linear-gradient(185deg, rgba(9,14,28,0.55) 0%, rgba(9,14,28,0.78) 45%, rgba(9,14,28,0.95) 100%);
}
.hero-content{ position:relative; z-index:1; padding-block: calc(var(--space-3xl) + 2rem) var(--space-3xl); }
.hero-eyebrow{
  font-family: var(--font-accent); font-style:italic;
  color: var(--gold-400); font-size: var(--fs-h5);
  display:flex; align-items:center; gap: .75rem;
  margin-bottom: var(--space-md);
}
.hero-eyebrow img{ width:34px; height:auto; }
.hero h1{
  font-size: var(--fs-h1);
  color:#fff;
  max-width: 16ch;
  margin-bottom: var(--space-md);
}
.hero h1 em{ font-style:italic; color: var(--gold-400); }
.hero-sub{
  max-width: 46ch;
  font-size: var(--fs-lg);
  color: var(--color-on-navy-muted);
  margin-bottom: var(--space-xl);
}
.hero-actions{ display:flex; flex-wrap:wrap; gap: var(--space-md); margin-bottom: var(--space-2xl); }
.hero-meta{
  display:flex; flex-wrap:wrap; gap: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255,255,255,0.15);
  max-width: 640px;
}
.hero-meta div{ display:flex; flex-direction:column; gap:.25rem; }
.hero-meta strong{ font-family: var(--font-display); font-size: var(--fs-h4); color:#fff; }
.hero-meta span{ font-size: var(--fs-xs); text-transform:uppercase; letter-spacing:.08em; color: var(--color-on-navy-muted); }

.scroll-cue{
  position:absolute; bottom: var(--space-lg); left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  color: var(--color-on-navy-muted);
  font-size: var(--fs-xs); letter-spacing:.1em; text-transform:uppercase;
  z-index:1;
}
.scroll-cue .line{ width:1px; height:36px; background: linear-gradient(180deg, var(--gold-400), transparent); animation: scrollpulse 2.2s var(--ease-in-out) infinite; }
@keyframes scrollpulse{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }

/* ---------- Reveal-on-scroll ---------- */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-group > *{ transition-delay: calc(var(--i, 0) * 70ms); }

/* ---------- About ---------- */
.about-grid{
  display:grid; grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items:center;
}
@media (min-width: 900px){
  .about-grid{ grid-template-columns: 0.9fr 1.1fr; }
}
.about-emblem{
  display:flex; justify-content:center;
  position:relative;
  padding: var(--space-md);
}
.about-emblem::before{
  content:"";
  position:absolute; inset: 0 12% 12% 0;
  border: 1.5px solid var(--color-line-gold);
  border-radius: var(--radius-lg);
}
.about-emblem img{
  width: 100%; max-width: 420px;
  aspect-ratio: 4/5; object-fit:cover; object-position: center 30%;
  position:relative; z-index:1;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.about-copy p{ margin-bottom: var(--space-md); font-size: var(--fs-lg); color: var(--color-ink-soft); }
.about-copy p:last-child{ margin-bottom:0; }
.pillars{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--space-md); margin-top: var(--space-xl); }
.pillar{ text-align:center; padding: var(--space-md); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.pillar svg{ width:28px; height:28px; color: var(--color-accent); margin-inline:auto; margin-bottom: var(--space-xs); }
.pillar h4{ font-size: var(--fs-h5); margin-bottom:.35rem; }
.pillar p{ font-size: var(--fs-xs); color: var(--color-muted); }
@media (max-width: 640px){ .pillars{ grid-template-columns:1fr; } }

/* ---------- Meet the reader ---------- */
.reader-card{
  display:grid; grid-template-columns: 1fr;
  gap: 0;
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: var(--shadow-lg);
  background: var(--navy-900);
}
@media (min-width: 860px){ .reader-card{ grid-template-columns: 0.85fr 1.15fr; } }
.reader-portrait{
  position:relative;
  min-height: 320px;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(201,162,39,0.25), transparent 60%),
    linear-gradient(160deg, var(--navy-700), var(--navy-950));
  display:flex; align-items:center; justify-content:center;
  padding: var(--space-2xl);
}
.reader-portrait img{ width: min(220px, 70%); opacity:.92; filter: drop-shadow(0 10px 30px rgba(0,0,0,0.45)); }
.reader-portrait .ring{ position:absolute; inset: 12%; border:1px solid rgba(230,197,103,0.35); border-radius:50%; }
.reader-body{ padding: var(--space-2xl); color: var(--color-on-navy); }
.reader-name{ font-size: var(--fs-h3); color:#fff; margin-bottom:.2rem; }
.reader-title{ font-family: var(--font-accent); font-style:italic; color: var(--gold-400); font-size: var(--fs-lg); margin-bottom: var(--space-md); }
.reader-body p{ color: var(--color-on-navy-muted); margin-bottom: var(--space-md); font-size: var(--fs-lg); }
.reader-tags{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top: var(--space-md); }
.reader-tags span{
  font-size: var(--fs-xs); letter-spacing:.05em; text-transform:uppercase;
  padding: .45rem .9rem; border-radius: var(--radius-full);
  border: 1px solid rgba(230,197,103,0.35); color: var(--gold-300);
}

/* ---------- Services / Pricing ---------- */
.services-grid{
  display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
  gap: var(--space-lg);
}
.plan-card{
  position:relative;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  display:flex; flex-direction:column;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.plan-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--color-line-gold); }
.plan-card--feature{
  background: linear-gradient(175deg, var(--navy-800), var(--navy-950));
  color: var(--color-on-navy);
  border-color: var(--gold-600);
}
.plan-card--feature h3,.plan-card--feature .plan-desc{ color: #fff; }
.plan-card--feature .plan-desc{ color: var(--color-on-navy-muted); }

.plan-ribbon{
  position:absolute; top:-14px; left: 50%; transform:translateX(-50%);
  background: linear-gradient(180deg, var(--gold-400), var(--gold-600));
  color: var(--color-accent-ink);
  font-size: var(--fs-xs); font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  padding: .4rem 1rem; border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  white-space:nowrap;
}
.plan-badge{
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--color-accent); color: var(--color-accent-ink);
  font-family: var(--font-display); font-weight:700;
  margin-bottom: var(--space-md);
}
.plan-icon{ width:38px; height:38px; color: var(--color-accent); margin-bottom: var(--space-sm); }
.plan-card--feature .plan-icon{ color: var(--gold-400); }
.plan-card h3{ font-size: var(--fs-h4); margin-bottom:.2rem; }
.plan-desc{ font-size: var(--fs-xs); text-transform:uppercase; letter-spacing:.05em; color: var(--color-muted); margin-bottom: var(--space-md); }
.plan-price{ display:flex; align-items:baseline; gap:.35rem; margin-bottom: var(--space-md); }
.plan-price .amount{ font-family: var(--font-display); font-size: var(--fs-h3); color: var(--color-ink); }
.plan-card--feature .plan-price .amount{ color: var(--gold-400); }
.plan-price .cur{ font-size: var(--fs-sm); color: var(--color-muted); }
.plan-card--feature .plan-price .cur{ color: var(--color-on-navy-muted); }
.plan-list{ display:flex; flex-direction:column; gap: .6rem; margin-bottom: var(--space-lg); flex:1; }
.plan-list li{ display:flex; gap:.6rem; font-size: var(--fs-sm); }
.plan-list svg{ width:18px; height:18px; flex:none; color: var(--color-accent); margin-top:2px; }
.plan-for{
  font-size: var(--fs-xs); padding: var(--space-sm); border-radius: var(--radius-sm);
  background: var(--color-surface-alt); color: var(--color-ink-soft); margin-bottom: var(--space-md);
}
.plan-card--feature .plan-for{ background: rgba(255,255,255,0.06); color: var(--color-on-navy-muted); }
.plan-for strong{ color: var(--color-accent); text-transform:uppercase; letter-spacing:.05em; font-size:.7rem; display:block; margin-bottom:.25rem; }

.plan-wide{
  position:relative;
  margin-top: var(--space-xl);
  background: linear-gradient(120deg, var(--navy-800), var(--navy-950));
  border: 1px solid var(--gold-600);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-lg);
  display:flex; flex-wrap:wrap; align-items:center; gap: var(--space-xl);
  color: var(--color-on-navy);
  box-shadow: var(--shadow-lg);
}
.plan-ribbon--wide{ top:-14px; left: var(--space-lg); transform:none; }
.plan-wide-info{ flex: 0 0 auto; min-width: 200px; }
.plan-wide-info h3{ color:#fff; font-size: var(--fs-h4); margin-bottom:.2rem; }
.plan-wide-info .plan-icon{ color: var(--gold-400); margin-bottom: var(--space-xs); }
.plan-wide-info .plan-desc{ color: var(--color-on-navy-muted); }
.plan-wide-info .plan-price .amount{ color: var(--gold-400); }
.plan-wide-info .plan-price .cur{ color: var(--color-on-navy-muted); }
.plan-wide-list{
  flex: 1 1 320px;
  display:grid; grid-template-columns: repeat(2, 1fr); gap: .75rem 1.5rem;
  padding-block: var(--space-md);
  border-inline: 1px solid rgba(230,197,103,0.2);
  padding-inline: var(--space-xl);
}
.plan-wide-list li{ display:flex; gap:.6rem; font-size: var(--fs-sm); color: var(--color-on-navy-muted); }
.plan-wide-list svg{ width:18px; height:18px; flex:none; color: var(--gold-400); margin-top:2px; }
.plan-wide-cta{ flex: 0 0 auto; min-width: 220px; display:flex; flex-direction:column; gap: var(--space-sm); }
.plan-wide-cta .plan-for{ background: rgba(255,255,255,0.06); color: var(--color-on-navy-muted); }
@media (max-width: 860px){
  .plan-wide{ flex-direction:column; align-items:stretch; }
  .plan-wide-list{ border-inline:none; border-block: 1px solid rgba(230,197,103,0.2); padding-inline:0; grid-template-columns: 1fr; }
  .plan-wide-cta{ width:100%; }
}

.services-footnote{
  margin-top: var(--space-xl);
  display:flex; flex-wrap:wrap; gap: var(--space-lg);
  align-items:center; justify-content:space-between;
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  background: linear-gradient(120deg, var(--navy-800), var(--navy-900));
}
.services-footnote p{ font-size: var(--fs-sm); color: var(--color-on-navy-muted); }
.services-footnote strong{ color: var(--gold-400); }

/* ---------- Card picker ---------- */
.picker{
  display:grid; grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items:center;
}
@media (min-width: 900px){ .picker{ grid-template-columns: 0.9fr 1.1fr; } }
.picker-copy p{ color: var(--color-on-navy-muted); font-size: var(--fs-lg); margin-bottom: var(--space-lg); }
.picker-hint{ font-size: var(--fs-sm); color: var(--gold-300); font-family: var(--font-accent); font-style:italic; }

.picker-cards{ display:flex; justify-content:center; gap: clamp(.5rem, 2vw, 1.25rem); perspective: 1200px; flex-wrap:wrap; }
.tarot-card{
  width: clamp(72px, 12vw, 108px);
  aspect-ratio: 5/8;
  cursor:pointer;
  background:transparent;
  border-radius: var(--radius-sm);
  position:relative;
}
.tarot-card .inner{
  display:block;
  position:relative; width:100%; height:100%;
  transform-style: preserve-3d;
  transition: transform var(--dur-slow) var(--ease-in-out);
}
.tarot-card.is-flipped .inner{ transform: rotateY(180deg); }
.tarot-card .face{
  position:absolute; inset:0;
  border-radius: var(--radius-sm);
  backface-visibility: hidden;
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-md);
  padding: .5rem;
  text-align:center;
}
.tarot-card .face--back{
  background:
    repeating-linear-gradient(45deg, rgba(230,197,103,0.10) 0 2px, transparent 2px 10px),
    linear-gradient(165deg, var(--navy-700), var(--navy-950));
  border: 1px solid var(--gold-600);
}
.tarot-card .face--back svg{ width:34%; color: var(--gold-400); opacity:.85; }
.tarot-card .face--front{
  background: linear-gradient(175deg, var(--cream-100), var(--cream-300));
  color: var(--navy-900);
  transform: rotateY(180deg);
  border: 1px solid var(--gold-500);
  flex-direction:column; gap:.35rem;
}
.tarot-card .face--front svg{ width:26%; color: var(--gold-600); }
.tarot-card .face--front .card-name{ font-family: var(--font-display); font-size: clamp(.6rem,1.4vw,.8rem); font-weight:700; }
.tarot-card:hover .inner{ transform: translateY(-6px); }
.tarot-card.is-flipped:hover .inner{ transform: rotateY(180deg) translateY(-6px); }

.picker-result{
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(230,197,103,0.25);
  min-height: 110px;
  display:flex; flex-direction:column; gap: var(--space-sm); justify-content:center;
  opacity:0; transform: translateY(12px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.picker-result.is-active{ opacity:1; transform:none; }
.picker-result h4{ color: var(--gold-300); font-size: var(--fs-h5); }
.picker-result p{ color: var(--color-on-navy-muted); font-size: var(--fs-sm); }
.picker-actions{ display:flex; flex-wrap:wrap; gap: var(--space-sm); margin-top: var(--space-md); }
.picker-reset{
  font-size: var(--fs-xs); text-transform:uppercase; letter-spacing:.06em;
  color: var(--gold-300); text-decoration:underline; text-underline-offset:3px;
}

/* ---------- Gallery ---------- */
.gallery-grid{
  display:grid; gap: var(--space-md);
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 130px;
}
.gallery-grid a{
  position:relative; overflow:hidden; border-radius: var(--radius-md);
  grid-column: span 3; grid-row: span 2;
  box-shadow: var(--shadow-sm);
}
.gallery-grid a:nth-child(1){ grid-column: span 4; grid-row: span 3; }
.gallery-grid a:nth-child(2){ grid-column: span 2; grid-row: span 2; }
.gallery-grid a:nth-child(3){ grid-column: span 2; grid-row: span 2; }
.gallery-grid a:nth-child(4){ grid-column: span 3; grid-row: span 2; }
.gallery-grid a:nth-child(5){ grid-column: span 3; grid-row: span 2; }
.gallery-grid img{ width:100%; height:100%; object-fit:cover; transition: transform var(--dur-slow) var(--ease-out); }
.gallery-grid a:hover img{ transform: scale(1.06); }
.gallery-grid a::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(12,19,38,0.55), transparent 45%);
  opacity:0; transition: opacity var(--dur-base) var(--ease-out);
}
.gallery-grid a:hover::after{ opacity:1; }
.gallery-grid a svg{
  position:absolute; right: var(--space-sm); bottom: var(--space-sm);
  width:20px; height:20px; color:#fff; opacity:0; transition: opacity var(--dur-base) var(--ease-out);
}
.gallery-grid a:hover svg{ opacity:1; }
@media (max-width: 760px){
  .gallery-grid{ grid-template-columns: repeat(2,1fr); grid-auto-rows: 160px; }
  .gallery-grid a,.gallery-grid a:nth-child(1),.gallery-grid a:nth-child(2),.gallery-grid a:nth-child(3),.gallery-grid a:nth-child(4),.gallery-grid a:nth-child(5){ grid-column: span 1; grid-row: span 2; }
  .gallery-grid a:nth-child(1){ grid-column: span 2; grid-row: span 3; }
}

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index: var(--z-overlay);
  background: rgba(9,14,28,0.92);
  display:flex; align-items:center; justify-content:center;
  padding: var(--space-lg);
  opacity:0; pointer-events:none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.lightbox.is-open{ opacity:1; pointer-events:auto; }
.lightbox img{ max-width: min(900px, 92vw); max-height: 85vh; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.lightbox-close{
  position:absolute; top: var(--space-lg); right: var(--space-lg);
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.1); color:#fff;
}
.lightbox-close svg{ width:22px; height:22px; }

/* ---------- Testimonials ---------- */
.testimonial-track{
  display:grid; grid-template-columns: repeat(3,1fr);
  gap: var(--space-lg);
}
@media (max-width: 900px){ .testimonial-track{ grid-template-columns:1fr; } }
.testimonial-track--single{
  grid-template-columns: 1fr;
  max-width: 620px;
  margin-inline: auto;
}
.testimonial-track--single .testimonial-card{ padding: var(--space-2xl) var(--space-xl); }
.testimonial-track--single blockquote{ font-size: var(--fs-h5); }
.testimonial-avatar svg{ width:16px; height:16px; }
.testimonial-card{
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-lg);
  box-shadow: var(--shadow-sm);
  position:relative;
}
.testimonial-stars{ display:flex; gap:.25rem; color: var(--color-accent); margin-bottom: var(--space-md); }
.testimonial-stars svg{ width:16px; height:16px; }
.testimonial-card blockquote{ font-family: var(--font-accent); font-style:italic; font-size: var(--fs-lg); color: var(--color-ink-soft); margin-bottom: var(--space-lg); }
.testimonial-who{ display:flex; align-items:center; gap:.75rem; }
.testimonial-avatar{
  width:38px; height:38px; border-radius:50%;
  background: linear-gradient(160deg, var(--gold-400), var(--gold-600));
  display:flex; align-items:center; justify-content:center;
  color: var(--color-accent-ink); font-family: var(--font-display); font-weight:700; font-size:.85rem;
}
.testimonial-who strong{ display:block; font-size: var(--fs-sm); color: var(--color-ink); }
.testimonial-who span{ font-size: var(--fs-xs); color: var(--color-muted); }
.testimonial-note{
  margin-top: var(--space-xl); text-align:center; font-size: var(--fs-xs); color: var(--color-muted);
  max-width: 560px; margin-inline:auto;
}

/* ---------- FAQ ---------- */
.faq-list{ max-width: 760px; margin-inline:auto; display:flex; flex-direction:column; gap: var(--space-sm); }
.faq-item{
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  overflow:hidden;
}
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  text-align:left;
  font-family: var(--font-display); font-size: var(--fs-h5); color: var(--color-ink);
  min-height: 56px;
}
.faq-q svg{ width:20px; height:20px; flex:none; color: var(--color-accent); transition: transform var(--dur-base) var(--ease-out); }
.faq-item[data-open="true"] .faq-q svg{ transform: rotate(45deg); }
.faq-a{
  display:grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-out);
}
.faq-item[data-open="true"] .faq-a{ grid-template-rows: 1fr; }
.faq-a-inner{ overflow:hidden; }
.faq-a p{ padding: 0 var(--space-lg) var(--space-md); color: var(--color-muted); font-size: var(--fs-sm); }
.faq-a p:last-child{ padding-bottom: var(--space-lg); }

/* ---------- Contact / Booking ---------- */
.contact-grid{
  display:grid; grid-template-columns: 1fr;
  gap: var(--space-xl);
}
.contact-grid > *{ min-width:0; }
@media (min-width: 900px){ .contact-grid{ grid-template-columns: 1fr 1fr; } }
.contact-card{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(230,197,103,0.2);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}
.contact-list{ display:flex; flex-direction:column; gap: var(--space-lg); margin-top: var(--space-lg); }
.contact-row{ display:flex; gap: var(--space-md); align-items:flex-start; }
.contact-row svg{ width:22px; height:22px; flex:none; color: var(--gold-400); margin-top:.15rem; }
.contact-row strong{ display:block; color:#fff; font-size: var(--fs-sm); margin-bottom:.2rem; }
.contact-row p, .contact-row a{ color: var(--color-on-navy-muted); font-size: var(--fs-sm); }
.contact-row a:hover{ color: var(--gold-300); }
.map-wrap{
  border-radius: var(--radius-lg);
  overflow:hidden;
  border: 1px solid rgba(230,197,103,0.2);
  min-height: 340px;
  filter: saturate(0.35) contrast(1.05);
  transition: filter var(--dur-base) var(--ease-out);
}
.map-wrap:hover, .map-wrap:focus-within{ filter:none; }
.map-wrap iframe{ width:100%; height:100%; min-height:340px; border:0; display:block; }
.social-row{ display:flex; gap: var(--space-sm); margin-top: var(--space-lg); }
.social-row a{
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.06); border:1px solid rgba(230,197,103,0.25); color:#fff;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.social-row a:hover{ background: var(--gold-600); color: var(--color-accent-ink); transform: translateY(-3px); }
.social-row svg{ width:20px; height:20px; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--navy-950); color: var(--color-on-navy-muted); padding-block: var(--space-2xl) var(--space-lg); }
.footer-grid{
  display:grid; grid-template-columns: 1.3fr repeat(2, 1fr);
  gap: var(--space-2xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
@media (max-width: 760px){ .footer-grid{ grid-template-columns: 1fr; gap: var(--space-xl); } }
.footer-brand{ display:flex; align-items:center; gap:.75rem; margin-bottom: var(--space-md); }
.footer-brand img{ height:40px; }
.footer-brand span{ font-family: var(--font-display); color:#fff; font-size:1.1rem; letter-spacing:.05em; text-transform:uppercase; }
.site-footer p{ font-size: var(--fs-sm); max-width: 34ch; }
.footer-col h5{ color:#fff; font-size: var(--fs-sm); text-transform:uppercase; letter-spacing:.08em; margin-bottom: var(--space-md); }
.footer-col ul{ display:flex; flex-direction:column; gap: .65rem; }
.footer-col a{ font-size: var(--fs-sm); }
.footer-col a:hover{ color: var(--gold-300); }
.footer-bottom{
  display:flex; flex-wrap:wrap; gap: var(--space-md); justify-content:space-between; align-items:center;
  padding-top: var(--space-lg); font-size: var(--fs-xs);
}

/* ---------- WhatsApp FAB ---------- */
.wa-fab{
  position: fixed; right: var(--space-lg); bottom: var(--space-lg);
  z-index: var(--z-fab);
  width:60px; height:60px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: #25D366; color:#fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  transition: transform var(--dur-fast) var(--ease-out);
}
.wa-fab:hover{ transform: scale(1.08); }
.wa-fab svg{ width:28px; height:28px; }
.wa-fab-pulse{
  position:absolute; inset:0; border-radius:50%;
  background:#25D366; opacity:.55;
  animation: fabpulse 2.6s var(--ease-out) infinite;
}
@keyframes fabpulse{ 0%{ transform:scale(1); opacity:.55;} 100%{ transform:scale(1.7); opacity:0; } }
@media (max-width: 640px){ .wa-fab{ width:52px; height:52px; right: var(--space-md); bottom: var(--space-md); } .wa-fab svg{ width:24px; height:24px; } }