/* ===========================================================================
   Your Funnel Godmother — Rita Thomas Enterprises
   Aesthetic: refined enchantment. Jewel tones (deep plum, emerald, gold) on
   warm ivory. Editorial serif display + clean grotesk body. Subtle wand and
   sparkle motifs. Built by NEWTONS/TECH.
   =========================================================================== */

:root {
  --plum-900: #251726;
  --plum-800: #38233b;
  --plum-700: #4c2f50;
  --plum-600: #693a66;
  --wine:     #7c3a64;
  --emerald-700: #1d4f43;
  --emerald: #2a6e5a;
  --gold:     #bf9c47;
  --gold-soft:#d9be7d;
  --rose:     #c5789a;
  --rose-soft:#ecccdc;
  --cream:    #f6efe4;
  --cream-2:  #fbf7ef;
  --paper:    #fffdf9;
  --ink:      #2b2230;
  --muted:    #6f6273;

  --maxw: 1180px;
  --gut: clamp(1.25rem, 4vw, 3rem);
  --radius: 18px;
  --radius-sm: 12px;
  --shadow-sm: 0 2px 10px rgba(37, 23, 38, .06);
  --shadow:    0 18px 50px -22px rgba(56, 35, 59, .45);
  --shadow-lg: 0 40px 90px -40px rgba(56, 35, 59, .55);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  font-size: clamp(1rem, .96rem + .25vw, 1.075rem);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--plum-900);
  font-optical-sizing: auto;
}

.wrap { width: min(100% - 2 * var(--gut), var(--maxw)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2 * var(--gut), 820px); margin-inline: auto; }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wine);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.eyebrow svg { color: var(--gold); flex: none; }
/* Colored period at the end of section titles: magical purple on light, gold on dark */
.dot { color: var(--wine); }
.band-dark .dot { color: var(--gold-soft); }

.section { padding: clamp(2.75rem, 5.5vw, 5rem) 0; position: relative; }
.section--tight { padding: clamp(2.25rem, 4vw, 3.5rem) 0; }
/* Subtle alternating tints separate adjacent light sections without heavy dividers. */
.section--alt { background: var(--cream-2); }

.lead { font-size: clamp(1.1rem, 1rem + .55vw, 1.35rem); color: var(--muted); line-height: 1.55; }

/* ---- Sparkle decoration ---- */
.spark { color: var(--gold); display: inline-block; }
@keyframes twinkle {
  0%, 100% { opacity: .35; transform: scale(.82) rotate(0deg); }
  50%      { opacity: 1;   transform: scale(1.08) rotate(8deg); }
}
.twinkle { animation: twinkle 3.6s ease-in-out infinite; transform-origin: center; }
.twinkle--2 { animation-delay: .9s; }
.twinkle--3 { animation-delay: 1.8s; }

/* ---- Buttons ---- */
.btn {
  --bg: var(--plum-800);
  --fg: var(--cream-2);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .92rem 1.5rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .98rem;
  letter-spacing: .005em;
  border: 1px solid transparent;
  background: var(--bg);
  color: var(--fg);
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, background .25s, color .25s;
  box-shadow: 0 12px 26px -14px rgba(56,35,59,.7);
  position: relative;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -14px rgba(56,35,59,.75); }
.btn:active { transform: translateY(0); }
.btn--gold { --bg: linear-gradient(135deg, var(--gold) 0%, var(--gold-soft) 100%); --fg: var(--plum-900); }
.btn--ghost {
  --bg: var(--paper); --fg: var(--plum-800);
  border-color: rgba(76,47,80,.12);
  box-shadow: var(--shadow-sm);
}
.btn--ghost:hover { background: var(--cream-2); box-shadow: var(--shadow); }
.btn--lg { padding: 1.05rem 1.9rem; font-size: 1.04rem; }
.btn svg { flex: none; transition: transform .25s; }
.btn:hover svg.arrow { transform: translateX(3px); }

/* ===========================================================================
   Header
   =========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--cream) 82%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s, box-shadow .3s;
}
.site-header.is-stuck { border-color: rgba(76,47,80,.1); box-shadow: 0 8px 30px -24px rgba(56,35,59,.6); }
.nav { display: flex; align-items: center; gap: 1.6rem; padding: .7rem 0; }
.brand { display: flex; align-items: center; gap: .6rem; margin-right: auto; }
.brand img { height: 46px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 2rem; justify-self: center; }
.nav-links a {
  font-weight: 500; font-size: .96rem; color: var(--plum-800);
  position: relative; padding: .2rem 0;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: var(--gold); transition: width .28s ease;
}
.nav-links a:hover::after { width: 100%; }
.nav-cta { display: flex; align-items: center; gap: .9rem; justify-self: end; }
.nav-toggle { display: none; background: none; border: 0; padding: .4rem; color: var(--plum-800); }

@media (max-width: 880px) {
  /* Slimmer header on mobile. */
  /* Drop the desktop centering grid: brand left, CTA + hamburger together at far right */
  .nav { display: flex; justify-content: space-between; align-items: center; padding: .42rem 0; }
  .brand img { height: 33px; }
  .site-header .nav-cta .btn--gold { padding: .55rem 1.05rem; font-size: .9rem; }
  .nav-links {
    position: fixed; inset: 58px 0 auto 0;
    flex-direction: column; gap: 0;
    background: var(--cream-2);
    padding: .5rem var(--gut) 1.5rem;
    border-bottom: 1px solid rgba(76,47,80,.12);
    box-shadow: var(--shadow);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: transform .3s, opacity .3s;
  }
  .nav-links.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav-links a { width: 100%; padding: .9rem 0; border-bottom: 1px solid rgba(76,47,80,.08); }
  .nav-links a::after { display: none; }
  .nav-cta .btn--text { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* ===========================================================================
   Hero
   =========================================================================== */
.hero {
  position: relative;
  padding: clamp(2.75rem, 4.5vw, 4.75rem) 0 clamp(3.5rem, 7vw, 6.5rem);
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 60% 50% at 78% 18%, rgba(197,120,154,.22), transparent 60%),
    radial-gradient(ellipse 55% 60% at 8% 80%, rgba(42,110,90,.14), transparent 62%),
    radial-gradient(ellipse 70% 60% at 50% -10%, rgba(105,58,102,.12), transparent 60%);
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }
/* Centered, image-focal hero: title starts it, the image is the centerpiece,
   the "a little magic" kicker sits under the image, then copy + CTAs. */
/* Two columns: left = title + subtext + CTAs; right = image + kicker + trust. */
.hero-grid {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.hero-left { display: flex; flex-direction: column; align-items: stretch; text-align: left; }
.hero-right { display: flex; flex-direction: column; align-items: center; }
.hero-eyebrow { margin-top: .9rem; }
.hero h1 {
  font-size: clamp(2.4rem, 1.4rem + 2.8vw, 3.5rem);
  max-width: 15ch;
  margin: 0;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.hero h1 .em {
  font-style: italic;
  font-weight: 400;
  color: var(--wine);
  position: relative;
  white-space: nowrap;
}
.hero h1 .em .underglow {
  position: absolute; left: -2%; right: -2%; bottom: .08em; height: .42em; z-index: -1;
  background: linear-gradient(90deg, rgba(217,190,125,.55), rgba(236,204,220,.55));
  border-radius: 999px; transform: rotate(-1.2deg);
}
.hero p.sub { margin: 1.3rem 0 0; max-width: 46ch; color: var(--muted); font-size: clamp(1.05rem, 1rem + .35vw, 1.2rem); }
.hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; margin-top: 1.8rem; }
.hero-trust {
  margin-top: 1rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.1rem;
  font-size: .86rem; color: var(--plum-700); font-weight: 500; max-width: 360px;
}
.hero-trust span { display: inline-flex; align-items: center; gap: .45rem; }
.hero-trust svg { color: var(--gold); flex: none; }

/* Hero image stage (the focal point) */
.hero-stage { position: relative; width: 100%; max-width: 380px; margin: 0 auto; }
.hero-frame {
  position: relative; aspect-ratio: 4 / 5; border-radius: 240px 240px 26px 26px;
  overflow: hidden; box-shadow: var(--shadow-lg);
  border: 1px solid rgba(191,156,71,.4);
  background: var(--plum-700);
}
.hero-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
/* Magical shimmer: a warm light sweeps across the photo on hover (desktop)
   and on press/tap (mobile). */
.hero-frame::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,248,222,.5) 48%, rgba(255,255,255,.65) 50%, rgba(255,248,222,.5) 52%, transparent 65%);
  transform: translateX(-135%);
  transition: transform 1.05s cubic-bezier(.2,.7,.3,1);
}
.hero-frame:hover::after { transform: translateX(135%); }
.hero-frame.is-shimmer::after { animation: heroShimmer 1.05s cubic-bezier(.2,.7,.3,1); }
@keyframes heroShimmer { from { transform: translateX(-135%); } to { transform: translateX(135%); } }
@media (prefers-reduced-motion: reduce) { .hero-frame::after { transition: none; } .hero-frame.is-shimmer::after { animation: none; } }
.hero-stage .halo {
  position: absolute; inset: -14% -12% -8% -12%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(191,156,71,.3), transparent 70%);
  filter: blur(6px);
}
.hero-badge {
  position: absolute; bottom: 18px; left: -52px;
  background: var(--paper); color: var(--plum-900);
  border-radius: 14px; padding: .7rem .95rem;
  box-shadow: var(--shadow); border: 1px solid rgba(191,156,71,.35);
  display: flex; align-items: flex-start; gap: .6rem; max-width: 250px;
}
.hero-badge .wand { color: var(--emerald); flex: none; margin-top: 1px; }
.hero-badge b { font-family: var(--font-display); font-weight: 600; font-size: 1rem; display: block; line-height: 1.1; white-space: nowrap; }
.hero-badge small { display: block; color: var(--muted); font-size: .76rem; font-style: italic; line-height: 1.25; margin-top: .15rem; }
.hero-spark { position: absolute; z-index: 2; }
.hero-spark.s1 { top: 4%; right: 8%; }
.hero-spark.s2 { top: 38%; left: -6%; }
.hero-spark.s3 { bottom: 6%; right: -4%; }

@media (max-width: 880px) {
  /* Flatten both columns into one stack: title, image, kicker, subtext, CTAs, trust. */
  .hero-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .hero-left, .hero-right { display: contents; }
  .hero h1 { order: 1; max-width: none; margin: 0; font-size: clamp(2rem, 9.5vw, 2.5rem); }
  .hero-stage { order: 2; max-width: 340px; margin: 1.4rem auto 0; }
  .hero-eyebrow { order: 3; margin-top: 1.4rem; }
  .hero p.sub { order: 4; max-width: none; margin: 1.4rem 0 0; }
  .hero-actions { order: 5; margin-top: 1.6rem; justify-content: flex-start; }
  .hero-trust { order: 6; max-width: none; margin-top: 1.6rem; justify-content: flex-start; }
  /* Tighten the gap between the header and the hero title on mobile. */
  .hero { padding-top: 1.4rem; }
  /* Overhang the image's left border without crossing the screen edge. */
  .hero-badge { left: -16px; }
}

/* On phones the uppercase tagline overflows and wraps to two lines, leaving the
   stars orphaned. Center it, force a single row, and scale it to fit between
   the two stars across common phone widths (320-560px). */
@media (max-width: 600px) {
  .hero-eyebrow {
    justify-content: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    text-align: center;
    font-size: clamp(8.5px, 2.8vw, 12px);
    letter-spacing: .12em;
    gap: .5rem;
  }
}

/* ===========================================================================
   Divider with sparkle
   =========================================================================== */
.rule {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  color: var(--gold); padding: 0;
}
.rule::before, .rule::after {
  content: ""; height: 1px; width: min(34%, 220px);
  background: linear-gradient(90deg, transparent, rgba(191,156,71,.6));
}
.rule::after { background: linear-gradient(90deg, rgba(191,156,71,.6), transparent); }

/* ===========================================================================
   Pain band (dark)
   =========================================================================== */
.band-dark {
  background:
    radial-gradient(ellipse 50% 70% at 85% 10%, rgba(124,58,100,.5), transparent 60%),
    radial-gradient(ellipse 60% 80% at 5% 90%, rgba(29,79,67,.4), transparent 62%),
    var(--plum-700);
  color: var(--cream);
  position: relative;
}
.band-dark h2, .band-dark h3 { color: var(--cream-2); }
/* Centered heading + a tight 2x2 grid of pain points (no more cramped column). */
.pain-grid { display: block; }
.pain-head { max-width: 55rem; margin: 0 auto; text-align: center; }
.pain-head h2 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem); line-height: 1.22; }
.pain-copy p { color: rgba(246,239,228,.82); margin: 1.1rem auto 0; max-width: 58ch; }
.pain-list {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  max-width: 920px; margin: clamp(2.2rem, 4vw, 3.2rem) auto 0;
}
.pain-list li {
  display: flex; gap: .85rem; align-items: flex-start;
  padding: 1.1rem 1.25rem; border-radius: var(--radius-sm);
  background: rgba(255,253,249,.05);
  border: 1px solid rgba(217,190,125,.18);
  color: rgba(246,239,228,.92);
}
.pain-list svg { color: var(--rose); flex: none; margin-top: .15rem; }
@media (max-width: 820px) {
  /* Mobile: full-width left-aligned heading, single-column points. */
  .pain-head { text-align: left; max-width: none; }
  .pain-copy p { max-width: none; margin-inline: 0; }
  .pain-list { grid-template-columns: 1fr; max-width: none; }
}

/* ===========================================================================
   Section heading block
   =========================================================================== */
.head-block { max-width: 60ch; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }
.head-block.center { margin-inline: auto; text-align: center; }
/* On mobile, left-align the centered section headers like every other section */
@media (max-width: 760px) { .head-block.center { text-align: left; margin-inline: 0; } }
.head-block h2 { font-size: clamp(2rem, 1.4rem + 2.7vw, 3.2rem); margin-top: .8rem; }
.head-block p { margin-top: 1.1rem; }
/* Wide header: title on a single row, supporting text beneath it */
.head-block--wide { max-width: none; }
.head-block--wide .lead { max-width: 64ch; }

/* ---- Services grid ---- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.card {
  background: var(--paper); border-radius: var(--radius);
  padding: 1.7rem 1.6rem; border: 1px solid rgba(76,47,80,.08);
  box-shadow: var(--shadow-sm);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s, border-color .3s;
  position: relative; overflow: hidden;
}
.card::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--rose));
  transform: scaleX(0); transform-origin: left; transition: transform .35s ease;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: rgba(191,156,71,.4); }
.card:hover::after { transform: scaleX(1); }
.card .ico {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(105,58,102,.12), rgba(42,110,90,.12));
  color: var(--plum-700); margin-bottom: 1.1rem;
}
.card h3 { font-size: 1.28rem; }
.card p { margin-top: .55rem; color: var(--muted); font-size: .97rem; }
@media (max-width: 920px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cards { grid-template-columns: 1fr; } }

/* ---- Two ways to work ---- */
.ways { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.way {
  border-radius: var(--radius); padding: clamp(1.6rem, 3vw, 2.4rem);
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s;
}
.way:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.way .tag {
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: .5rem;
}
.way h3 { font-size: 1.6rem; margin: .8rem 0 .6rem; }

/* Done for you — royal purple so the eye lands here first. Gold text. */
.way--foryou {
  background: radial-gradient(ellipse 70% 90% at 20% 0%, rgba(124,58,100,.55), transparent 60%), var(--plum-700);
  border: 1px solid rgba(217,190,125,.25);
}
.way--foryou .tag { color: var(--gold-soft); }
.way--foryou h3 { color: var(--cream-2); }
.way--foryou p { color: rgba(246,239,228,.9); }

/* Done with you — gold, matching the Book a call CTA. Purple text. */
.way--withyou {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-soft) 100%);
  border: 1px solid rgba(143,113,40,.45);
}
.way--withyou .tag { color: var(--plum-900); }
.way--withyou h3 { color: var(--plum-900); }
.way--withyou p { color: rgba(37,23,38,.82); }

/* Done by you — cream, centered on its own row beneath the first two. Green text. */
.way--byyou {
  grid-column: 1 / -1;
  background: var(--cream); border: 1px solid rgba(191,156,71,.35);
}
.way--byyou .tag { color: var(--emerald); }
.way--byyou h3 { color: var(--ink); }
.way--byyou p { color: var(--muted); }

@media (max-width: 760px) {
  .ways { grid-template-columns: 1fr; }
  .way--byyou { grid-column: auto; max-width: none; }
}

/* ---- Qualified-kinder band ---- */
.quote-band { text-align: center; }
.quote-band p {
  font-family: var(--font-display); font-style: normal; font-weight: 400;
  font-size: clamp(1.6rem, 1.1rem + 2.3vw, 2.7rem); line-height: 1.25; color: var(--plum-900);
  max-width: 24ch; margin: 1.2rem auto 0;
}
.quote-band .accent { color: var(--wine); }
/* On phones, shrink the quote so each sentence (incl. "I'm a whole lot kinder
   about it.") fits on a single line. */
@media (max-width: 600px) { .quote-band p { font-size: 1.25rem; max-width: none; } }

/* ---- Process ---- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; counter-reset: step; }
.step { position: relative; padding-top: 1rem; }
.step .num {
  font-family: var(--font-display); font-size: 3.4rem; font-weight: 500; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.4px var(--gold); text-stroke: 1.4px var(--gold);
  display: block; margin-bottom: .6rem;
}
.step h3 { font-size: 1.35rem; }
.step p { margin-top: .5rem; color: var(--muted); }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; gap: 1.8rem; } }

/* ---- About ---- */
.about-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.about-media { position: relative; }
.about-media .main {
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  border: 1px solid rgba(191,156,71,.3); aspect-ratio: 1/1;
}
.about-media .main img { width: 100%; height: 100%; object-fit: cover; }
.about-media .inset {
  position: absolute; bottom: -22px; right: -14px; width: 42%;
  border-radius: 14px; overflow: hidden; box-shadow: var(--shadow);
  border: 3px solid var(--paper); aspect-ratio: 4/5;
}
.about-media .inset img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.about-copy h2 { font-size: clamp(2rem, 1.4rem + 2.5vw, 3rem); }
.about-copy p { margin-top: 1.1rem; color: var(--ink); }
.about-copy p.muted { color: var(--muted); }
/* About sits on the dark plum band, so its body copy must be light. */
.band-dark .about-copy p { color: rgba(246, 239, 228, .9); }
.band-dark .about-copy p.muted { color: rgba(246, 239, 228, .68); }
.band-dark .about-facts li { color: rgba(246, 239, 228, .92); }
.about-facts { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .7rem; }
.about-facts li { display: flex; gap: .7rem; align-items: flex-start; }
.about-facts svg { color: var(--emerald); flex: none; margin-top: .2rem; }
.vet-badge {
  display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.6rem;
  background: var(--cream-2); border: 1px solid rgba(191,156,71,.4);
  border-radius: 999px; padding: .45rem .95rem; font-size: .85rem; font-weight: 600; color: var(--plum-800);
}
.vet-badge svg { color: var(--gold); }
.vet-badge img { height: 19px; width: auto; }
@media (max-width: 820px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-media { max-width: 420px; }
  .about-media .inset { width: 38%; }
}

/* ---- Gallery ---- */
.gallery {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1rem;
  grid-auto-flow: dense;
}
.gallery figure { margin: 0; overflow: hidden; border-radius: var(--radius-sm); position: relative; box-shadow: var(--shadow-sm); }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.gallery figure:hover img { transform: scale(1.05); }
.gallery .tall { grid-row: span 2; }
.gallery .wide { grid-column: span 2; }
@media (max-width: 760px) {
  /* Mobile gallery order: two small portraits side by side, then the big
     room shot full width, then the teaching shot centered below. */
  .gallery { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .gallery .tall { grid-row: auto; grid-column: auto; order: 1; }       /* g1, small left  */
  .gallery figure:nth-child(3) { grid-column: auto; order: 2; }         /* g2, small right */
  .gallery .wide { grid-column: 1 / -1; order: 3; }                     /* g3, big full width */
  .gallery figure:nth-child(2) {                                        /* teaching, centered */
    grid-column: 1 / -1; order: 4; width: 72%; margin-inline: auto;
  }
}

/* ===========================================================================
   Contact / Booking
   =========================================================================== */
.contact { background: var(--cream-2); }
.contact-top { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; margin-bottom: 2.6rem; }
.contact-intro h2 { font-size: clamp(2.1rem, 1.4rem + 2.9vw, 3.3rem); margin-top: .9rem; }
.contact-intro p { margin-top: 1.1rem; color: var(--muted); max-width: 44ch; margin-left: .25rem; }
/* Schedule card sits between the title and subtext, left-aligned */
/* Push the contact items down so their top lines up with the title */
.contact-side { padding-top: 3.6rem; }
.contact-side .socials { margin-top: 2rem; }
/* "Schedule a call" card beneath the title/subtext */
.schedule-card { display: flex; width: fit-content; margin-left: .25rem; align-items: center; gap: .9rem; margin-top: 1.3rem; padding: .95rem 1.25rem;
  background: linear-gradient(135deg, rgba(191,156,71,.16), rgba(217,190,125,.08));
  border: 1px solid rgba(191,156,71,.4); border-radius: var(--radius-sm);
  transition: transform .25s, box-shadow .25s, border-color .25s; }
.schedule-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: var(--gold); }
.schedule-card .ic { width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--gold); color: var(--plum-900); }
.schedule-card .schedule-text b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--plum-900); line-height: 1.2; }
.contact-rule { display: none; }
.contact-details { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.15rem; }
.contact-details li { display: flex; gap: .9rem; align-items: flex-start; }
.contact-details .ic {
  width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center;
  background: var(--paper); color: var(--plum-700); border: 1px solid rgba(76,47,80,.1); box-shadow: var(--shadow-sm);
}
.contact-details b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--plum-900); }
.contact-details span, .contact-details a { color: var(--muted); font-size: .95rem; }
.contact-details a:hover { color: var(--wine); }
.socials { display: flex; gap: .6rem; margin-top: 1.8rem; }
.socials a {
  width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  background: var(--paper); color: var(--plum-700); border: 1px solid rgba(76,47,80,.1);
  transition: transform .25s, background .25s, color .25s; box-shadow: var(--shadow-sm);
}
.socials a:hover { transform: translateY(-3px); background: var(--plum-800); color: var(--cream-2); }
/* Contact details as a row beneath the full-width booking widget */
/* Contact details as a 2x2 grid beside the intro */
.contact-grid2 { grid-template-columns: 1fr 1fr; gap: 1.7rem 2.4rem; }

/* Offset so a "Book a call" jump lands the form below the sticky header. */
#book { scroll-margin-top: 90px; }
/* Nav-link jumps land at the top of the section (its divider), clear of the sticky header. */
section[id] { scroll-margin-top: 90px; }
.form-card {
  background: var(--paper); border-radius: var(--radius); padding: clamp(1.6rem, 3vw, 2.3rem);
  box-shadow: var(--shadow); border: 1px solid rgba(191,156,71,.25);
}
.form-card h3 { font-size: 1.5rem; }
.form-card .field { margin-top: 1.05rem; }
.form-card label { display: block; font-size: .82rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--plum-700); margin-bottom: .4rem; }
.form-card input, .form-card textarea {
  width: 100%; font: inherit; color: var(--ink);
  padding: .82rem .95rem; border-radius: 11px;
  border: 1px solid rgba(76,47,80,.18); background: var(--cream-2);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.form-card input:focus, .form-card textarea:focus {
  outline: none; border-color: var(--gold); background: var(--paper);
  box-shadow: 0 0 0 3px rgba(191,156,71,.18);
}
.form-card textarea { resize: vertical; min-height: 120px; }
.form-card .btn { width: 100%; justify-content: center; margin-top: 1.3rem; }
.form-note { font-size: .8rem; color: var(--muted); margin-top: .8rem; text-align: center; }
.form-success {
  display: none; text-align: center; padding: 2rem 1rem;
}
.form-success.show { display: block; }
.form-success .spark { font-size: 2rem; }
.form-success h3 { margin-top: .6rem; }

/* Title above the booking widget */
.booking-head { text-align: center; margin-bottom: 1.4rem; }
.booking-head h3 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 1.9rem); }
.booking-head p { color: var(--muted); margin: .5rem auto 0; max-width: 58ch; }

/* Embedded booking widget (Rita's funnel scheduler), full content width.
   The wrapper clips the empty cover band at the top of the GHL widget by
   pulling the iframe up, so the bezel above the widget matches below. */
.booking-frame-wrap { overflow: hidden; border-radius: var(--radius-sm); }
.booking-frame {
  width: 100%; border: 0; min-height: 720px; display: block;
  background: #fff; margin-top: -46px;
}
/* Header CTA: compact, and a shorter label on phones */
.btn--book { font-size: .88rem; padding: .58rem 1.05rem; }
.book-short { display: none; }
@media (max-width: 600px) { .book-full { display: none; } .book-short { display: inline; } }
.form-success p { color: var(--muted); margin-top: .5rem; }
@media (max-width: 860px) {
  .contact-top { grid-template-columns: 1fr; gap: 1.6rem; }
  .contact-intro { margin-top: 0; }
  .contact-side { padding-top: 0; }
  /* Magic divider before the contact items (card is already centered) */
  .contact-rule { display: flex; margin: 0 0 1.6rem; }
  /* Mobile: centered card, label on a single row (font shrunk below) */
  .schedule-wrap { max-width: none; }
}
@media (max-width: 520px) { .contact-grid2 { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .schedule-card { gap: .7rem; padding-inline: 1rem; }
  .schedule-card .schedule-text b { font-size: .92rem; }
}

/* ===========================================================================
   Footer
   =========================================================================== */
.site-footer { background: var(--plum-700); color: rgba(246,239,228,.75); padding: clamp(1.6rem, 3vw, 2.6rem) 0 2rem; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; align-items: flex-start; }
.footer-brand { max-width: 32rem; }
.footer-logo { display: inline-block; line-height: 0; }
.footer-brand img { height: 76px; width: auto; background: var(--cream-2); padding: .3rem .5rem; border-radius: 10px; }
.footer-brand p { margin-top: 1rem; font-size: .92rem; color: rgba(246,239,228,.6); }
.footer-cols { display: flex; gap: clamp(2rem, 6vw, 5rem); flex-wrap: wrap; }
.footer-cols h4 { font-family: var(--font-body); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: .9rem; }
.footer-cols a, .footer-cols span { display: block; font-size: .92rem; color: rgba(246,239,228,.7); padding: .25rem 0; }
.footer-cols a:hover { color: var(--cream-2); }
.footer-bottom {
  margin-top: 1.2rem; padding-top: .8rem; border-top: 1px solid rgba(217,190,125,.15);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: center;
  font-size: .85rem; color: rgba(246,239,228,.55);
}
.footer-bottom a { color: rgba(246,239,228,.8); }
.footer-bottom a:hover { color: var(--gold-soft); }
.nt-wordmark { font-weight: 700; letter-spacing: .02em; color: var(--cream-2); }

/* ===========================================================================
   Scroll reveal
   =========================================================================== */
/* Content is visible by default. It is only hidden for the entrance animation
   when JS is active (html.js), so the site never disappears if JS fails. */
.reveal { transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.js .reveal { opacity: 0; transform: translateY(22px); }
.js .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; }
.reveal.d5 { transition-delay: .40s; }