/* =============================================================
   Megan — Intuitive · Healer · Guide
   Design system  ·  Lavender + Gold ethereal theme
   Built 2026-06-16
   ============================================================= */

:root {
  /* Palette ---------------------------------------------------- */
  --purple-950: #241a47;
  --purple-900: #2c2150;
  --purple-800: #3a2a6b;
  --purple-700: #4b3b8f;
  --violet-500: #6b4fae;
  --lavender-400: #9b86c9;
  --lavender-300: #bcabe0;
  --lavender-200: #d8cdee;
  --lavender-100: #ece6f6;
  --cream: #f8f4ec;
  --cream-2: #fdfbf6;
  --white: #ffffff;

  --gold-800: #8c6a25;
  --gold-700: #a87f2e;
  --gold-600: #bb8f37;
  --gold-500: #c9a24a;
  --gold-400: #d8b65f;
  --gold-300: #e6c878;
  --gold-200: #f3dd9b;
  --rose: #c97a8e;

  --ink: #3a3357;        /* primary body text on light */
  --ink-soft: #5b5478;   /* secondary text */
  --ink-faint: #837ca0;

  /* Typography ------------------------------------------------- */
  --font-display: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --font-script: "Pinyon Script", "Tangerine", cursive;
  --font-body: "Mulish", "Nunito Sans", system-ui, -apple-system, sans-serif;

  /* Effects ---------------------------------------------------- */
  --gold-gradient: linear-gradient(135deg, #a87f2e 0%, #e6c878 38%, #f3dd9b 52%, #c9a24a 70%, #a87f2e 100%);
  --shadow-sm: 0 4px 18px rgba(58, 42, 107, 0.08);
  --shadow-md: 0 14px 40px rgba(58, 42, 107, 0.12);
  --shadow-lg: 0 28px 70px rgba(44, 33, 80, 0.18);
  --radius: 18px;
  --radius-lg: 28px;
  --container: 1180px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Reset ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  line-height: 1.7;
  font-size: 1.05rem;
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--violet-500); text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--purple-800); }
ul { padding: 0; list-style: none; }

/* Ambient page background ------------------------------------- */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(1100px 700px at 82% -8%, rgba(243, 221, 155, 0.30), transparent 60%),
    radial-gradient(900px 700px at 8% 4%, rgba(155, 134, 201, 0.32), transparent 58%),
    radial-gradient(1200px 900px at 50% 108%, rgba(188, 171, 224, 0.30), transparent 60%),
    linear-gradient(170deg, #efe8f8 0%, #f6f0ea 42%, #f8f4ec 100%);
}
body::after { /* faint star dust */
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 22%, rgba(255,255,255,.9), transparent),
    radial-gradient(1.2px 1.2px at 67% 12%, rgba(255,255,255,.8), transparent),
    radial-gradient(1.6px 1.6px at 84% 64%, rgba(243,221,155,.9), transparent),
    radial-gradient(1.1px 1.1px at 33% 78%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.3px 1.3px at 52% 46%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 9% 58%, rgba(243,221,155,.7), transparent);
  background-repeat: no-repeat;
}

/* Layout helpers --------------------------------------------- */
.container { width: min(var(--container), 92vw); margin-inline: auto; }
.section { padding: clamp(3.5rem, 8vw, 7rem) 0; position: relative; }
.section--tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.center { text-align: center; }
.measure { max-width: 60ch; }
.mx-auto { margin-inline: auto; }
.stack > * + * { margin-top: 1.1rem; }

/* Typography utilities --------------------------------------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; color: var(--purple-900); letter-spacing: .2px; }
h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.1rem); }
h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
p { color: var(--ink); }
.lead { font-size: clamp(1.12rem, 1.8vw, 1.32rem); color: var(--ink-soft); }
.script { font-family: var(--font-script); font-weight: 400; line-height: 1.22; padding-top: 0.04em; }
.eyebrow {
  font-family: var(--font-body); font-weight: 800; text-transform: uppercase;
  letter-spacing: .28em; font-size: .76rem; color: var(--gold-700);
}
.gold-text {
  background: var(--gold-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--gold-700);
}
.kicker-rule { display: inline-flex; align-items: center; gap: .8rem; color: var(--gold-700); }
.kicker-rule::before, .kicker-rule::after { content: ""; width: 38px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-500), transparent); }

/* Buttons ----------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-body); font-weight: 800; font-size: .98rem; letter-spacing: .02em;
  padding: .92rem 1.9rem; border-radius: 999px; cursor: pointer; border: 0;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease);
  text-align: center;
}
.btn--gold {
  color: #3a2a08; background: var(--gold-gradient); background-size: 180% 180%;
  box-shadow: 0 10px 26px rgba(168, 127, 46, 0.34);
}
.btn--gold:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(168, 127, 46, 0.44); color: #3a2a08; filter: brightness(1.04); }
.btn--violet {
  color: #fff; background: linear-gradient(135deg, var(--violet-500), var(--purple-700));
  box-shadow: 0 10px 26px rgba(75, 59, 143, 0.34);
}
.btn--violet:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(75, 59, 143, 0.42); color: #fff; }
.btn--ghost {
  color: var(--purple-800); background: rgba(255,255,255,.6); border: 1.5px solid var(--lavender-300);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover { transform: translateY(-2px); border-color: var(--gold-400); color: var(--purple-900); }
.btn--lg { padding: 1.05rem 2.3rem; font-size: 1.05rem; }
.btn--block { display: flex; width: 100%; justify-content: center; }

/* Header / Nav ------------------------------------------------ */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 999;
  background: var(--purple-800); color: #fff; padding: .7rem 1.2rem; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; color: #fff; }

.site-header {
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(12px);
  background: rgba(248, 244, 236, 0.78);
  border-bottom: 1px solid rgba(201, 162, 74, 0.22);
  transition: box-shadow .3s var(--ease), background .3s var(--ease);
}
.site-header.scrolled { box-shadow: var(--shadow-sm); background: rgba(248, 244, 236, 0.92); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 0; }
.brand { display: flex; align-items: center; gap: .7rem; }
.brand__mark { width: 42px; height: 42px; flex: none; }
.brand__name { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; color: var(--purple-900); line-height: 1; }
.brand__name small { display: block; font-family: var(--font-body); font-weight: 700; font-size: .58rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-700); margin-top: 4px; }
.nav__links { display: flex; align-items: center; gap: var(--gr-md); }
.nav__links a { font-weight: 700; font-size: .96rem; color: var(--ink-soft); position: relative; }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--purple-900); }
.nav__links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px;
  background: var(--gold-gradient);
}
.nav__cta { display: flex; align-items: center; gap: .8rem; }
.nav__toggle { display: none; background: none; border: 0; cursor: pointer; padding: .4rem; }
.nav__toggle span { display: block; width: 26px; height: 2px; background: var(--purple-800); border-radius: 2px; transition: .3s var(--ease); }
.nav__toggle span + span { margin-top: 6px; }

@media (max-width: 940px) {
  .nav__toggle { display: block; }
  .nav__links, .nav__cta .btn--text { display: none; }
  .nav__links {
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0;
    background: rgba(248, 244, 236, 0.98); backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(201,162,74,.25); padding: .5rem 0 1rem;
    box-shadow: var(--shadow-md); display: none;
  }
  .nav__links.open { display: flex; }
  .nav__links a { padding: .85rem 6vw; width: 100%; }
  .nav__links a[aria-current="page"]::after { display: none; }
  .nav.open .nav__toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav.open .nav__toggle span:nth-child(2) { opacity: 0; }
  .nav.open .nav__toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}

/* Hero -------------------------------------------------------- */
.hero { position: relative; padding: clamp(3rem, 7vw, 6rem) 0 clamp(3rem, 7vw, 5rem); overflow: clip; overflow-clip-margin: 2.5rem; }
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero__script { font-family: var(--font-script); font-size: clamp(3.4rem, 8vw, 6rem); line-height: 1.08; margin-bottom: 0; padding-top: 0.06em; }
.hero h1 { margin: .2rem 0 .4rem; }
.hero__roles { display: inline-flex; flex-wrap: wrap; gap: .4rem 1rem; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.1rem, 2.2vw, 1.5rem); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-700); margin-bottom: 1.1rem; }
.hero__roles span { position: relative; }
.hero__roles span:not(:last-child)::after { content: "·"; margin-left: 1rem; color: var(--lavender-400); }
.hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.8rem; }
.hero__trust { margin-top: 1.6rem; font-size: .9rem; color: var(--ink-faint); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* Portrait frame --------------------------------------------- */
.portrait {
  position: relative; aspect-ratio: 4 / 5; border-radius: 220px 220px var(--radius-lg) var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-lg);
  background: linear-gradient(160deg, var(--lavender-200), var(--cream));
  border: 1px solid rgba(201,162,74,.35);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }
.portrait__placeholder {
  position: absolute; inset: 0; display: grid; place-content: center; gap: .6rem; text-align: center; padding: 2rem;
  color: var(--violet-500);
}
.portrait__placeholder span { font-size: .82rem; color: var(--ink-faint); max-width: 22ch; }
.portrait__halo {
  position: absolute; inset: -16px; border-radius: inherit; z-index: -1;
  background: conic-gradient(from var(--golden-angle), var(--gold-200), var(--lavender-300), var(--gold-300), var(--lavender-200), var(--gold-200));
  filter: blur(18px); opacity: .65;
}
.portrait-badge {
  position: absolute; right: -10px; bottom: 18px; width: var(--ring-lg); height: var(--ring-lg); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--violet-500), var(--purple-800));
  color: #fff; display: grid; place-content: center; text-align: center; line-height: 1.15;
  font-family: var(--font-display); font-size: .82rem; padding: 1rem; box-shadow: var(--shadow-md);
  border: 2px solid var(--gold-300);
}
.portrait-badge strong { font-family: var(--font-script); font-size: 1.5rem; display: block; color: var(--gold-200); font-weight: 400; }

/* Cards / Services ------------------------------------------- */
.grid { display: grid; gap: 1.6rem; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: rgba(255,255,255,.72); border: 1px solid rgba(201,162,74,.22);
  border-radius: var(--radius); padding: 2rem 1.7rem; box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  backdrop-filter: blur(4px); height: 100%;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: rgba(201,162,74,.5); }
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--ink-soft); font-size: .99rem; }
.card__link { display: inline-flex; align-items: center; gap: .35rem; margin-top: 1rem; font-weight: 800; font-size: .9rem; color: var(--gold-700); }
.card__link:hover { gap: .6rem; color: var(--gold-800); }

.service-icon {
  width: var(--ring-md); height: var(--ring-md); border-radius: 50%; display: grid; place-content: center; margin-bottom: var(--gr-sm);
  background: radial-gradient(circle at 35% 30%, var(--lavender-100), var(--lavender-200));
  border: 1.5px solid var(--gold-300); box-shadow: inset 0 0 18px rgba(201,162,74,.18);
}
.service-icon svg { width: calc(var(--ring-md) * 0.5); height: calc(var(--ring-md) * 0.5); }

/* Quote / scripture band ------------------------------------- */
.band {
  position: relative; text-align: center; color: #fff; border-radius: var(--radius-lg);
  padding: clamp(2.6rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem); overflow: hidden;
  background: linear-gradient(150deg, var(--purple-800), var(--purple-950) 55%, var(--violet-500));
  box-shadow: var(--shadow-lg);
}
.band::before {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background: radial-gradient(600px 300px at 80% -10%, rgba(243,221,155,.4), transparent 60%),
              radial-gradient(500px 300px at 0% 110%, rgba(155,134,201,.5), transparent 60%);
}
.band > * { position: relative; }
.band h2, .band h3 { color: #fff; }
.band .script { color: var(--gold-200); font-size: clamp(2.4rem, 6vw, 4rem); }
.band p { color: var(--lavender-100); }

/* Steps / process -------------------------------------------- */
.steps, .stack { counter-reset: step; }
.step { display: flex; gap: 1.2rem; align-items: flex-start; }
.step__num {
  counter-increment: step; flex: none; width: var(--ring-sm); height: var(--ring-sm); border-radius: 50%;
  display: grid; place-content: center; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700;
  color: var(--purple-800); background: var(--cream-2); border: 1.5px solid var(--gold-300);
}
.step__num::before { content: counter(step); }

/* Testimonials ------------------------------------------------ */
.quote-card { background: rgba(255,255,255,.78); border-radius: var(--radius); padding: 2rem; border: 1px solid rgba(201,162,74,.22); box-shadow: var(--shadow-sm); position: relative; }
.quote-card::before { content: "\201C"; font-family: var(--font-display); position: absolute; top: -.2rem; left: 1rem; font-size: 4.5rem; color: var(--gold-300); line-height: 1; }
.quote-card p { font-style: italic; color: var(--ink); position: relative; }
.quote-card cite { display: block; margin-top: 1rem; font-style: normal; font-weight: 800; color: var(--purple-800); font-size: .92rem; }
.stars { color: var(--gold-500); letter-spacing: 2px; margin-bottom: .6rem; }

/* FAQ accordion ---------------------------------------------- */
.faq { max-width: 820px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid rgba(155,134,201,.3); }
.faq__q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 1.25rem .5rem; font-family: var(--font-display); font-size: 1.22rem; font-weight: 600; color: var(--purple-900);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq__q::after { content: "+"; font-size: 1.5rem; color: var(--gold-600); transition: transform .3s var(--ease); flex: none; }
.faq__item.open .faq__q::after { transform: rotate(45deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.faq__a p { padding: 0 .5rem 1.3rem; color: var(--ink-soft); }

/* Forms ------------------------------------------------------- */
.form { background: rgba(255,255,255,.8); border: 1px solid rgba(201,162,74,.25); border-radius: var(--radius-lg); padding: clamp(1.6rem, 4vw, 2.6rem); box-shadow: var(--shadow-md); }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-weight: 800; font-size: .86rem; color: var(--purple-800); margin-bottom: .4rem; letter-spacing: .02em; }
.field input, .field textarea, .field select {
  width: 100%; padding: .85rem 1rem; border-radius: var(--radius-sm); border: 1.5px solid var(--lavender-300);
  background: #fff; font-family: var(--font-body); font-size: 1rem; color: var(--ink); transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--gold-400); box-shadow: 0 0 0 4px rgba(216,182,95,.22); }
.field textarea { min-height: 140px; resize: vertical; }
.form__note { font-size: .82rem; color: var(--ink-faint); margin-top: .8rem; }
.form-success { display: none; padding: 1.2rem 1.4rem; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--lavender-100), #fff); border: 1.5px solid var(--gold-300); color: var(--purple-800); font-weight: 700; }
.form-success.show { display: block; }

/* Newsletter strip ------------------------------------------- */
.subscribe { display: flex; gap: .7rem; flex-wrap: wrap; max-width: 520px; }
.subscribe input { flex: 1 1 240px; padding: .9rem 1.1rem; border-radius: 999px; border: 1.5px solid var(--lavender-300); font-size: 1rem; background:#fff; }
.subscribe input:focus { outline: none; border-color: var(--gold-400); box-shadow: 0 0 0 4px rgba(216,182,95,.22); }

/* Feature list with check ------------------------------------ */
.checklist li { display: flex; gap: .7rem; align-items: flex-start; padding: .35rem 0; color: var(--ink-soft); }
.checklist li::before { content: "✦"; color: var(--gold-600); flex: none; margin-top: .15rem; }

/* Pills / tags ----------------------------------------------- */
.pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.pill { font-size: .82rem; font-weight: 700; padding: .35rem .9rem; border-radius: 999px; background: var(--lavender-100); color: var(--purple-800); border: 1px solid var(--lavender-300); }

/* Breadcrumb -------------------------------------------------- */
.crumbs { font-size: .85rem; color: var(--ink-faint); padding-top: 1.4rem; }
.crumbs a { color: var(--ink-soft); font-weight: 700; }
.crumbs span { margin: 0 .4rem; color: var(--lavender-400); }

/* Note / placeholder banner (sandbox only) ------------------- */
.devnote {
  background: repeating-linear-gradient(45deg, #fff7e6, #fff7e6 12px, #fdf0d4 12px, #fdf0d4 24px);
  border: 1px dashed var(--gold-600); color: #6b4f12; border-radius: 12px;
  padding: .6rem 1rem; font-size: .82rem; font-weight: 700;
}

/* Footer ------------------------------------------------------ */
.site-footer { background: linear-gradient(170deg, var(--purple-900), var(--purple-950)); color: var(--lavender-100); padding: clamp(3rem,6vw,4.5rem) 0 2rem; margin-top: 3rem; position: relative; }
.site-footer::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background: var(--gold-gradient); }
.footer__grid { display: grid; grid-template-columns: 1.618fr 1fr 1fr 1fr; gap: var(--gr-lg); }
.footer__brand .brand__name { color: #fff; }
.site-footer h4 { color: #fff; font-size: 1.15rem; margin-bottom: 1rem; }
.site-footer a { color: var(--lavender-200); }
.site-footer a:hover { color: var(--gold-200); }
.footer__links li { padding: .3rem 0; }
.footer__bottom { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(216,205,238,.18); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .85rem; color: var(--lavender-300); }
.footer__bottom p { color: var(--lavender-300); }
.footer__bottom a { color: var(--lavender-200); text-decoration: underline; text-underline-offset: 3px; }
.social { display: flex; gap: .7rem; }
.social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-content: center; background: rgba(255,255,255,.08); border: 1px solid rgba(216,205,238,.2); }
.social a:hover { background: rgba(243,221,155,.16); border-color: var(--gold-300); }
.social svg { width: 18px; height: 18px; }

/* Sticky mobile CTA ------------------------------------------ */
.mobile-cta { display: none; }
@media (max-width: 760px) {
  .mobile-cta {
    display: block; position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
    padding: .7rem 4vw calc(.7rem + env(safe-area-inset-bottom)); background: rgba(248,244,236,.94);
    backdrop-filter: blur(10px); border-top: 1px solid rgba(201,162,74,.3); box-shadow: 0 -8px 24px rgba(44,33,80,.12);
  }
  body { padding-bottom: 76px; }
}

/* Reveal on scroll ------------------------------------------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
/* If scripting is unavailable, never hide content */
@media (scripting: none) {
  .reveal { opacity: 1; transform: none; }
  .faq__a { max-height: none; overflow: visible; }
  .faq__q::after { display: none; }
}

/* Responsive -------------------------------------------------- */
@media (max-width: 960px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { max-width: 420px; margin-inline: auto; width: 100%; }
}
@media (max-width: 680px) {
  /* Declutter mobile header — booking lives in the sticky bottom CTA */
  .nav__cta .btn { display: none; }
  .brand__mark { width: 36px; height: 36px; }
  .brand__name { font-size: 1.3rem; }
  .brand__name small { letter-spacing: .16em; font-size: .52rem; }
  .hero__media { max-width: 280px; }
  .hero .hero__cta { display: none; }
}
@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .band { border-radius: var(--radius); }
}

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

/* =============================================================
   v2 — audit-driven upgrades (accessibility, contrast,
   imagery system, and new components)
   ============================================================= */

/* --- Contrast tokens (WCAG AA on small text) --- */
:root {
  --ink-faint: #6b6391;        /* was #837ca0 (failed AA) */
  --gold-deep: #7a5a1e;        /* accessible gold for small text (~5.3:1) */
}
.eyebrow, .kicker-rule { color: var(--gold-deep); }
.card__link { color: var(--gold-deep); }
.card__link:hover { color: #5e4416; }
.hero__roles { color: var(--gold-deep); }
/* Deeper gold gradient for clipped TEXT on light backgrounds (passes AA for large text). Gold buttons keep the luminous --gold-gradient. */
.gold-text { background: linear-gradient(135deg, #8c6a25 0%, #bb8f37 50%, #a87f2e 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* --- Visible keyboard focus (was missing site-wide) --- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--purple-700);
  outline-offset: 2px;
  border-radius: 5px;
}
.btn:focus-visible { outline: 3px solid var(--purple-900); outline-offset: 3px; }
.band a:focus-visible, .site-footer a:focus-visible { outline-color: var(--gold-200); }

/* --- Tap targets >= 44px --- */
.nav__toggle { min-width: 44px; min-height: 44px; flex-direction: column; align-items: center; justify-content: center; }
@media (max-width: 940px) { .nav__toggle { display: flex; } }
.footer__links a, .nav__links a { display: inline-flex; align-items: center; min-height: 36px; }
.card__link, .crumbs a { display: inline-flex; align-items: center; min-height: 30px; }

/* --- IMAGERY SYSTEM ---------------------------------------
   Graceful slots for Manus-AI artwork. Each layer references a
   file that may not exist yet; until the file is dropped in,
   the layer is simply transparent — never a broken image. --- */

/* Full-bleed hero atmosphere (homepage + service heroes) */
.hero { position: relative; isolation: isolate; }
.hero__art {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  background-color: rgba(216, 205, 238, .16);
  opacity: .92;
  /* Feather all four edges so the atmosphere dissolves into the page background */
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 11%, #000 89%, transparent),
    linear-gradient(to bottom, transparent, #000 11%, #000 89%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 11%, #000 89%, transparent),
    linear-gradient(to bottom, transparent, #000 11%, #000 89%, transparent);
  mask-composite: intersect;
}

/* Page-hero strip art for sub-pages (sessions/*) */
.page-hero { position: relative; isolation: isolate; overflow: clip; overflow-clip-margin: 2rem; }
.page-hero__art {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  background-color: rgba(216, 205, 238, .12);
  opacity: .6;
  /* Feather sides + fade toward the bottom so headings stay clean */
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 8%, #000 92%, transparent),
    linear-gradient(to bottom, #000, #000 55%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 8%, #000 92%, transparent),
    linear-gradient(to bottom, #000, #000 55%, transparent);
  mask-composite: intersect;
}

/* Celestial texture overlay inside dark .band sections */
.band { isolation: isolate; }
.band__art {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  mix-blend-mode: screen;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 10%, #000 90%, transparent),
    linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 10%, #000 90%, transparent),
    linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  mask-composite: intersect;
}
.band > *:not(.band__art) { position: relative; z-index: 1; }

/* Painterly service illustration (drop-in replacement for the line icons) */
.service-illustration {
  width: 100%; max-width: 172px; aspect-ratio: 1; object-fit: contain; margin: 0 auto .8rem;
  filter: drop-shadow(0 8px 20px rgba(75,59,143,.16));
}

/* ---- Reusable soft-edge feathering -------------------------------
   Fades an image's edges to transparent so it dissolves into the page
   background instead of a hard rectangular cut. Add class "feather"
   (or feather--lg / feather--oval) to ANY <img> or background-image layer.
   Works in Chrome, Safari, Firefox, Edge. ------------------------------ */
.feather, .img-soft {
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 10%, #000 90%, transparent),
    linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 10%, #000 90%, transparent),
    linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  mask-composite: intersect;
}
.feather--lg {              /* dreamier, wider fade */
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 18%, #000 82%, transparent),
    linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 18%, #000 82%, transparent),
    linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  mask-composite: intersect;
}
.feather--oval {            /* organic vignette — best for a single subject (angel, portrait) */
  -webkit-mask-image: radial-gradient(ellipse 82% 82% at 50% 48%, #000 50%, transparent 92%);
  mask-image: radial-gradient(ellipse 82% 82% at 50% 48%, #000 50%, transparent 92%);
  -webkit-mask-composite: source-over;
  mask-composite: add;
}
/* Painterly service illustrations dissolve at their edges by default */
.service-illustration {
  -webkit-mask-image: radial-gradient(ellipse 84% 84% at 50% 50%, #000 52%, transparent 94%);
  mask-image: radial-gradient(ellipse 84% 84% at 50% 50%, #000 52%, transparent 94%);
}

/* Decorative SVG ornaments (these DO exist — render immediately) */
.ornament { display: block; margin: 0 auto; opacity: .9; }
.ornament--divider { width: min(340px, 70%); height: auto; margin: 1.4rem auto; }
.wing-accent { width: 54px; height: auto; margin: 0 auto .4rem; display: block; }

/* --- NEW COMPONENTS --------------------------------------- */

/* AEO definition block — the tight, quotable answer LLMs cite */
.definition {
  border-left: 3px solid var(--gold-400);
  background: linear-gradient(100deg, rgba(236,230,246,.7), rgba(255,255,255,.4));
  padding: 1.1rem 1.4rem; border-radius: 0 14px 14px 0; margin: 1.4rem 0;
}
.definition p { color: var(--ink); font-size: 1.06rem; }
.definition strong { color: var(--purple-800); }

/* Credibility strip ("as seen at…") */
.cred-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .7rem 1.6rem; padding: 1.1rem 1.4rem; border-radius: 999px; background: rgba(255,255,255,.6); border: 1px solid rgba(201,162,74,.25); }
.cred-strip span { font-weight: 800; font-size: .82rem; letter-spacing: .04em; color: var(--ink-soft); }
.cred-strip .cred-strip__lead { color: var(--gold-deep); text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; }

/* Offer ladder (free → entry → signature → deeper) */
.ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; counter-reset: rung; }
.rung { position: relative; background: rgba(255,255,255,.74); border: 1px solid rgba(201,162,74,.22); border-radius: var(--radius); padding: 1.5rem 1.3rem; box-shadow: var(--shadow-sm); }
.rung--feature { border-color: var(--gold-400); box-shadow: var(--shadow-md); background: linear-gradient(180deg, #fff, #faf6ec); }
.rung__tag { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); }
.rung h3 { font-size: 1.25rem; margin: .4rem 0 .3rem; }
.rung p { font-size: .94rem; color: var(--ink-soft); }
@media (max-width: 820px) { .ladder { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .ladder { grid-template-columns: 1fr; } }

/* Transparency block — "what I will & won't do" */
.promise { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.promise__col { background: rgba(255,255,255,.7); border: 1px solid rgba(201,162,74,.22); border-radius: var(--radius); padding: 1.6rem; }
.promise__col h3 { display: flex; align-items: center; gap: .5rem; }
.promise li { padding: .4rem 0; display: flex; gap: .6rem; color: var(--ink-soft); }
.promise li::before { flex: none; margin-top: .1rem; }
.promise--will li::before { content: "✦"; color: var(--gold-600); }
.promise--wont li::before { content: "—"; color: var(--lavender-400); }
@media (max-width: 680px) { .promise { grid-template-columns: 1fr; } }

/* Event detail card + add-to-calendar */
.event-detail { display: grid; gap: .2rem; }
.event-detail dt { font-weight: 800; color: var(--gold-deep); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; margin-top: .7rem; }
.event-detail dd { color: var(--ink); font-size: 1.05rem; }
.cal-links { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }

/* Author / byline box for articles */
.author-box { display: flex; gap: 1rem; align-items: center; padding: 1.3rem; border-radius: var(--radius); background: rgba(255,255,255,.7); border: 1px solid rgba(201,162,74,.22); margin-top: 2rem; }
.author-box img { width: 56px; height: 56px; border-radius: 50%; flex: none; }

/* Lead-magnet / free page hero */
.freebie-cover { aspect-ratio: 3/4; border-radius: var(--radius); background: linear-gradient(160deg, var(--purple-800), var(--violet-500)); display: grid; place-content: center; color: #fff; text-align: center; padding: 2rem; box-shadow: var(--shadow-lg); border: 1px solid var(--gold-300); }

/* =============================================================
   GOLDEN RATIO SYSTEM  (φ = 1.618)
   Type scale, spacing scale, layout splits, and key proportions
   are all derived from φ so the whole site holds one harmony.
   1 · φ · φ² · φ³  =  1 · 1.618 · 2.618 · 4.236
   ============================================================= */
:root {
  --phi: 1.618;

  /* φ type scale (fluid) — each step is ×φ of the one below */
  --fs-body: 1.0625rem;                                   /* base */
  --fs-sm:   0.835rem;                                    /* base ÷ √φ */
  --fs-lead: clamp(1.18rem, 1.04rem + 0.7vw, 1.352rem);  /* base × √φ */
  --fs-h3:   clamp(1.35rem, 1.10rem + 1.2vw, 1.719rem);  /* base × φ */
  --fs-h2:   clamp(2.00rem, 1.30rem + 3.0vw, 2.782rem);  /* base × φ² */
  --fs-h1:   clamp(2.618rem, 1.40rem + 5.0vw, 4.500rem); /* base × φ³ */

  /* φ spacing scale — 1/φ², 1/φ, 1, φ, φ², φ³, φ⁴ */
  --gr-2xs: 0.382rem;
  --gr-xs:  0.618rem;
  --gr-sm:  1rem;
  --gr-md:  1.618rem;
  --gr-lg:  2.618rem;
  --gr-xl:  4.236rem;
  --gr-2xl: 6.854rem;

  /* Golden container ↔ reading-measure relationship: container = measure × φ */
  --container: 72rem;     /* ~1152px */
  --measure: 44.5rem;     /* container ÷ φ */
  --radius-lg: 29px;      /* --radius × φ */
}

/* Type — global elements adopt the φ scale */
body { font-size: var(--fs-body); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
.lead { font-size: var(--fs-lead); }
.eyebrow { font-size: var(--fs-sm); }
.measure { max-width: var(--measure); }

/* Spacing — section rhythm, gaps and card padding on the φ scale */
.section { padding: clamp(var(--gr-xl), 7vw, var(--gr-2xl)) 0; }
.section--tight { padding: clamp(var(--gr-lg), 5vw, var(--gr-xl)) 0; }
.stack > * + * { margin-top: var(--gr-md); }
.grid { gap: var(--gr-md); }
.card { padding: var(--gr-md); }
.ladder { gap: var(--gr-md); }

/* Buttons — horizontal:vertical padding held at φ */
.btn { padding: 1rem var(--gr-md); }
.btn--lg { padding: 1.18rem 1.91rem; }

/* Key proportions — golden rectangles.
   Portrait uses √φ (1.272) on small screens so it stays compact, and the
   full golden rectangle (φ) on desktop where the tall arch reads as elegant. */
.portrait { aspect-ratio: 1 / 1.272; }
.freebie-cover { aspect-ratio: 1 / 1.618; }

/* Golden column split + full-golden portrait (desktop only — mobile keeps the stack) */
@media (min-width: 821px) {
  .hero__grid { grid-template-columns: 1.618fr 1fr; }
  .grid--golden { grid-template-columns: 1.618fr 1fr; }
  .grid--golden-rev { grid-template-columns: 1fr 1.618fr; }
  .portrait { aspect-ratio: 1 / 1.618; }
}

/* =============================================================
   GOLDEN GEOMETRY — COMPLETION PASS  (φ = 1.618)
   Extends φ to line-height, a full radius scale, the circular-
   element scale and the golden angle, then expresses the ratio
   visibly as geometry: a golden spiral and a golden-angle bloom.
   ============================================================= */
:root {
  --golden-angle: 137.5deg;          /* the angle between φ-spaced seeds */

  /* φ line-height — body = φ, display headings = φ^¼, sub-heads = √φ */
  --lh-body: 1.618;
  --lh-tight: 1.128;                 /* φ^(1/4) */
  --lh-snug: 1.272;                  /* √φ */

  /* φ radius scale (base 18px, each step ×φ) */
  --radius-xs: 7px;                  /* 18 ÷ φ² */
  --radius-sm: 11px;                 /* 18 ÷ φ  */
  --radius: 18px;
  --radius-lg: 29px;                 /* 18 × φ  */
  --radius-xl: 47px;                 /* 18 × φ² */

  /* φ circle scale for medallions, icons & numerals (×φ chain) */
  --ring-sm: 47px;                   /* base ÷ φ — step numerals */
  --ring-md: 76px;                   /* base — service icons */
  --ring-lg: 123px;                  /* base × φ — portrait badge */
}

/* Vertical rhythm on the φ scale */
body { line-height: var(--lh-body); }
h1, h2 { line-height: var(--lh-tight); }
h3, h4 { line-height: var(--lh-snug); }
.lead { line-height: var(--lh-snug); }
.quote-card p { line-height: var(--lh-body); }

/* Radii that were off-scale now snap to the φ radius scale */
.definition { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.field textarea { border-radius: var(--radius-sm); }
.devnote { border-radius: var(--radius-sm); }
.author-box img, .social a { border-radius: 50%; }

/* ---- Golden-ratio geometry motifs --------------------------------
   golden-spiral.svg  — quarter-circle arcs in a subdividing golden
                        rectangle (the Fibonacci spiral).
   phi-bloom.svg      — 130 seeds placed at the golden angle (137.5°).
   Both are faint, gold, and screen-blended so they read as light,
   never as clutter — grounded, not theatrical. ------------------ */

/* A faint spiral watermark glows in the corner of every dark band… */
.band::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: -3%; bottom: -8%; width: clamp(180px, 34%, 420px); aspect-ratio: 1000 / 618;
  background: url(/assets/img/golden-spiral.svg) no-repeat center / contain;
  opacity: .16; mix-blend-mode: screen;
}

/* …and on every page footer, so the geometry is present site-wide. */
.site-footer { overflow: hidden; }
.site-footer .container { position: relative; z-index: 1; }
.site-footer::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: -40px; bottom: -60px; width: min(38%, 340px); aspect-ratio: 1000 / 618;
  background: url(/assets/img/golden-spiral.svg) no-repeat center / contain;
  opacity: .14; mix-blend-mode: screen;
}

/* Explicit, reusable placement helpers ---------------------------- */
.geo { position: absolute; z-index: -1; pointer-events: none; opacity: .5; }
.geo--bloom { background: url(/assets/img/phi-bloom.svg) no-repeat center / contain; aspect-ratio: 1; }
.geo--spiral { background: url(/assets/img/golden-spiral.svg) no-repeat center / contain; aspect-ratio: 1000 / 618; }

/* A golden-spiral section divider — the ratio drawn, used as breath
   between sections in place of (or beside) the line ornament. */
.divider--spiral {
  display: block; width: min(150px, 40%); aspect-ratio: 1000 / 618;
  margin: var(--gr-md) auto; opacity: .85;
  background: url(/assets/img/golden-spiral.svg) no-repeat center / contain;
}

/* The hero portrait sits in a golden-angle bloom of light */
.hero__media { position: relative; isolation: isolate; }
.hero__media .geo--bloom {
  position: absolute; inset: -14% -14% auto auto; width: 62%; z-index: -1;
  opacity: .42; filter: blur(.3px);
}


/* Preview build only */
.devnote { display: none !important; }
.form-error { display: none; margin-top: .9rem; padding: .9rem 1rem; border-radius: var(--radius-sm); background: #fff3f0; color: #7a2e1f; border: 1px solid #f0c2b5; font-size: .95rem; }
.form-error.show { display: block; }
.preview-bar { background: #2b2140; color: #f5ecd7; text-align: center; font-size: .85rem; padding: .5rem 1rem; }