/*
Theme Name: Coach Deepa
Theme URI: https://coachdeepa.com
Author: Coach Deepa
Author URI: https://coachdeepa.com
Description: Editorial theme for Dr. Deepa Goel — soft skills, communication and public speaking. Cream + ink + antique gold palette, sumi-e watercolor blog illustrations, lotus brand mark.
Version: 1.0.12
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: coach-deepa
*/

/* =========================================================
   COACH DEEPA — design tokens + base styles
   Editorial dark, warm cream, antique gold
   ========================================================= */

:root {
  --ink: #0e0e10;
  --ink-2: #1a1a1d;
  --ink-3: #26262a;
  --rule: #2f2f33;
  --cream: #f5f1e8;
  --cream-2: #ebe5d4;
  --paper: #fbf8f1;
  --gold: #c89a4a;
  --gold-soft: #d9b97a;
  --gold-deep: #8a6829;
  --slate: #6b6b70;
  --slate-2: #a8a59c;

  --serif: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --display: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --sans: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --max: 1320px;
  --gutter: clamp(20px, 4vw, 56px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body {
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: 0.005em;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

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

/* ---------- Type ---------- */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}
.eyebrow--slate { color: var(--slate-2); }

h1, h2, h3 { margin: 0; font-weight: 400; letter-spacing: -0.015em; }
.display {
  font-family: var(--display);
  font-weight: 300;
  font-style: normal;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  line-height: 0.95;
  letter-spacing: -0.025em;
}
.display em {
  font-style: italic;
  font-weight: 300;
  color: var(--gold-soft);
  font-variation-settings: "opsz" 144, "SOFT" 100;
}

.lede {
  font-family: var(--serif);
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.45;
  font-weight: 400;
  color: var(--cream);
}

/* ---------- Layout ---------- */
.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container--wide { max-width: 1480px; }

.section {
  padding: clamp(72px, 8vw, 130px) 0;
  position: relative;
}
.section--cream {
  background: var(--cream);
  color: var(--ink);
}
.section--paper {
  background: var(--paper);
  color: var(--ink);
}

.rule {
  height: 1px;
  background: var(--rule);
  border: 0;
  margin: 0;
}
.rule--gold { background: var(--gold); }
.rule--cream-on-dark { background: rgba(245, 241, 232, 0.14); }
.section--cream .rule { background: rgba(14, 14, 16, 0.12); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 26px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 999px;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.btn--gold {
  background: var(--gold);
  color: var(--ink);
}
.btn--gold:hover { background: var(--gold-soft); transform: translateY(-1px); }
.btn--ghost {
  border: 1px solid rgba(245, 241, 232, 0.25);
  color: var(--cream);
}
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }
.section--cream .btn--ghost { border-color: rgba(14,14,16,0.2); color: var(--ink); }
.section--cream .btn--ghost:hover { border-color: var(--gold-deep); color: var(--gold-deep); }

.btn .arrow {
  display: inline-block;
  width: 22px; height: 1px;
  background: currentColor;
  position: relative;
}
.btn .arrow::after {
  content: "";
  position: absolute;
  right: -1px; top: -3px;
  width: 7px; height: 7px;
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  transform: rotate(45deg);
}

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 22px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transition: background 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease;
  border-bottom: 1px solid transparent;
  /* Defensive against scroll-state perceived clipping: explicit visible
   * overflow + a fixed min-height so the nav doesn't reflow when the
   * scrolled state's opaque background swaps in. The button transform on
   * hover (translateY(-1px)) was previously moving it out of the nav box
   * and getting visually clipped against the new opaque background. */
  overflow: visible;
  min-height: 76px;
  box-sizing: border-box;
}
/* The shared .btn translateY(-1px) on hover lifts the gold CTA up by 1px
 * which, when the nav is in scrolled state with an opaque background, can
 * appear as the button being clipped at the top edge. Suppress that
 * specifically inside the nav — the nav button already has gap/padding to
 * read as interactive without the lift. */
.nav .btn--gold:hover { transform: none; }
.nav.scrolled {
  background: rgba(14, 14, 16, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgba(245, 241, 232, 0.08);
}
.nav__brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-decoration: none;
  line-height: 1;
}
.nav__brand .brand__name {
  font-family: var(--display);
  font-style: italic;
  font-weight: 350;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--cream);
  font-variation-settings: "opsz" 144, "SOFT" 100;
  white-space: nowrap;
}
.nav__brand .brand__tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.85;
}
.nav__links {
  display: flex;
  gap: 36px;
  font-size: 14px;
  font-weight: 450;
}
.nav__links a {
  position: relative;
  padding: 6px 0;
  color: var(--cream);
  opacity: 0.78;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.nav__links a:hover { opacity: 1; color: var(--gold-soft); }

/* Hamburger toggle — hidden on desktop, shown ≤880px alongside the gold
 * CTA. Three lines morph into an X when the overlay menu is open. */
.nav__toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: transparent;
  position: relative;
  margin-left: auto;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.nav__toggle span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 1.5px;
  background: var(--cream);
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease, opacity 0.2s ease, background 0.2s ease;
  border-radius: 1px;
}
.nav__toggle span:nth-child(1) { transform: translate(-50%, calc(-50% - 5px)); }
.nav__toggle span:nth-child(3) { transform: translate(-50%, calc(-50% + 5px)); }
body.nav-open .nav__toggle span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
body.nav-open .nav__toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav__toggle span:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); }
.nav__toggle:hover { border-color: var(--gold); }

/* Full-screen overlay menu (mobile only). Hidden by default; opens via
 * .nav-open on body. Warm dark gradient + large editorial type — matches
 * the rest of the design rather than a generic flat hamburger panel. */
.nav__overlay {
  position: fixed;
  inset: 0;
  z-index: 49;
  background:
    radial-gradient(ellipse at 80% 0%, rgba(200, 154, 74, 0.22), transparent 55%),
    var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 100px var(--gutter) 40px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
}
body.nav-open { overflow: hidden; }
body.nav-open .nav__overlay {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0s;
}
.nav__overlay-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  justify-content: center;
}
.nav__overlay-links a {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: 18px;
  padding: 18px 0;
  border-top: 1px solid rgba(245, 241, 232, 0.1);
  text-decoration: none;
  color: var(--cream);
  transition: padding 0.25s ease, color 0.2s ease;
}
.nav__overlay-links a:last-child { border-bottom: 1px solid rgba(245, 241, 232, 0.1); }
.nav__overlay-links a:hover { color: var(--gold-soft); padding-left: 8px; }
.nav__overlay-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--gold);
}
.nav__overlay-label {
  font-family: var(--display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(32px, 8vw, 48px);
  line-height: 1;
  letter-spacing: -0.02em;
}
.nav__overlay-foot {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(245, 241, 232, 0.1);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.55);
}
.nav__overlay-foot a { color: var(--gold-soft); text-decoration: none; }

@media (max-width: 880px) {
  .nav__links { display: none; }
  .nav__toggle { display: inline-block; }
}
@media (min-width: 881px) {
  .nav__overlay { display: none; }
}
@media (max-width: 720px) {
  .nav { padding: 14px 18px; gap: 12px; min-height: 64px; }
  .nav__brand .brand__name { font-size: 22px; }
  .nav__toggle { width: 36px; height: 36px; }
  .nav__toggle span { width: 14px; }
  .nav .btn--gold {
    padding: 12px 16px;
    font-size: 12px;
    gap: 8px;
  }
  .nav .btn--gold .arrow { width: 14px; }
}
@media (max-width: 380px) {
  .nav .btn--gold .arrow { display: none; }
}

/* =========================================================
   CROSS-DOCUMENT VIEW TRANSITIONS
   In supporting browsers (Chrome/Edge) navigation between pages is
   automatically cross-faded with the View Transitions API. Firefox/Safari
   ignore this rule with no harm. Smooths the perceived layout shift on
   page change since browsers can hold the old frame while the new one
   prepares.
   ========================================================= */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.35s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Make reveal animations fail-open: if the IntersectionObserver hasn't
 * fired yet (slow JS, blocked script, prefers-reduced-motion), content
 * after a short delay shows up anyway. Prevents a "blank page that fills
 * in slowly" perception. */
@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: reveal-fallback 0.6s ease 0.4s both; }
  .reveal.is-in { animation: none; }
}
@keyframes reveal-fallback {
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 120px 0 60px;
  overflow: hidden;
}
.hero__bg-glow {
  position: absolute;
  right: -10%;
  top: 10%;
  width: 60%;
  aspect-ratio: 1;
  background: radial-gradient(circle at center, rgba(200, 154, 74, 0.18), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: end;
}
.hero__title {
  font-size: clamp(50px, 5.4vw, 76px);
  line-height: 1.02;
  margin-bottom: 40px;
  overflow-wrap: break-word;
  text-wrap: balance;
}
/* Word-flip rotator on the second headline row.
 *
 * The longest word ("professionals") is rendered once as an INVISIBLE
 * sizer that holds the line's width — guarantees no horizontal layout
 * shift as words swap. The animated <em>s are absolutely positioned at
 * the sizer's top-left, so EVERY word starts at the exact same x/y
 * regardless of length. Each <em> shares one keyframe cycle, offset by
 * animation-delay; words take turns being visible with a slide-up +
 * fade transition. Pure CSS — no JS.
 *
 * prefers-reduced-motion holds the first word visible without animation.
 */
.word-flip {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
}
.word-flip__sizer {
  visibility: hidden;
  display: inline-block;
  /* Match the italic gold em styling so the sizer's metrics
   * (italics extend further) reserve correct width. */
  font-style: italic;
}
/* Long, cinematic crossfade — no vertical slide. Each word holds for
 * ~3.5s of an 11s cycle, transitions over 1.4s with a soft blur and
 * micro-scale. Reads like a slow film dissolve rather than a SaaS
 * marquee. Easing is symmetric ease-in-out so neither end feels snappy. */
.word-flip em {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  opacity: 0;
  filter: blur(6px);
  transform: scale(0.985);
  transform-origin: left center;
  animation: word-flip-cycle 11s ease-in-out infinite;
}
.word-flip em:nth-child(2) { animation-delay: 0s; }      /* "professionals" — first to show */
.word-flip em:nth-child(3) { animation-delay: 3.66s; }   /* "students" */
.word-flip em:nth-child(4) { animation-delay: 7.33s; }   /* "leaders" */
.word-flip:hover em { animation-play-state: paused; }
@keyframes word-flip-cycle {
  0%   { opacity: 0; filter: blur(6px); transform: scale(0.985); }
  6%   { opacity: 1; filter: blur(0); transform: scale(1); }
  28%  { opacity: 1; filter: blur(0); transform: scale(1); }
  34%  { opacity: 0; filter: blur(6px); transform: scale(1.015); }
  100% { opacity: 0; filter: blur(6px); transform: scale(1.015); }
}
@media (prefers-reduced-motion: reduce) {
  .word-flip em { animation: none; opacity: 0; transform: none; }
  .word-flip em:nth-child(2) { opacity: 1; }
}
.hero__title .row { display: block; }
.hero__title .row--indent { padding-left: 0; }
.hero__lede {
  max-width: 520px;
  margin: 0 0 32px;
  color: rgba(245, 241, 232, 0.78);
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 40px;
  align-items: center;
}
/* Hero secondary CTA reads visibly lighter than the gold primary —
 * smaller padding, no border, no background. The arrow keeps the
 * implicit "go somewhere" affordance without competing with the gold. */
.hero__cta .btn--ghost {
  padding: 14px 8px;
  border: 0;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(245, 241, 232, 0.78);
  position: relative;
}
.hero__cta .btn--ghost::after {
  content: "→";
  margin-left: 8px;
  font-family: var(--display);
  font-style: italic;
  color: var(--gold-soft);
  transition: transform 0.25s ease;
  display: inline-block;
}
.hero__cta .btn--ghost:hover {
  color: var(--cream);
  border: 0;
  background: none;
}
.hero__cta .btn--ghost:hover::after { transform: translateX(6px); }
.hero__meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 28px;
  border-top: 1px solid var(--rule);
  padding-top: 24px;
  max-width: 640px;
  margin-top: 8px;
}
.hero__meta > div { font-size: 13px; display: block; }
.hero__meta .k {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--slate-2);
  margin-bottom: 8px;
  text-transform: uppercase;
}
.hero__meta .v {
  display: block;
  font-family: var(--serif);
  font-size: clamp(15px, 1.2vw, 18px);
  color: var(--cream);
  line-height: 1.3;
}
.hero__meta .v em {
  font-style: italic;
  color: var(--gold-soft);
  font-family: var(--display);
  font-weight: 400;
}
@media (max-width: 720px) {
  .hero__meta {
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
    padding-top: 20px;
    max-width: 100%;
  }
  .hero__meta > div:nth-child(3) { grid-column: 1 / -1; }
  .hero__meta .v { font-size: 14px; }
}

.hero__photo {
  position: relative;
  align-self: stretch;
  min-height: 720px;
}

.hero__photo-frame {
  position: absolute;
  right: -2vw;
  bottom: -20px;
  width: 102%;
  aspect-ratio: 1220 / 1362;
  z-index: 2;
}
.hero__photo-frame::before {
  /* soft warm halo behind the figure — solves the cutout edge */
  content: "";
  position: absolute;
  left: 6%;
  top: 8%;
  width: 88%;
  height: 75%;
  background:
    radial-gradient(ellipse 60% 70% at 50% 45%, rgba(200, 154, 74, 0.4) 0%, rgba(200, 154, 74, 0.18) 30%, rgba(200, 154, 74, 0.05) 55%, transparent 75%);
  filter: blur(40px);
  z-index: 0;
}
.hero__photo-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  z-index: 1;
  /* Radial feathers the body of the figure; the linear gradient layered on
   * top dissolves the bottom hard-crop into the dark hero background so the
   * saree edge doesn't read as a sharp horizontal cut. mask-composite intersect
   * means a pixel must pass BOTH masks to be drawn → AND of the two. */
  -webkit-mask-image:
    radial-gradient(ellipse 75% 95% at 50% 78%, #000 55%, rgba(0,0,0,0.85) 70%, transparent 100%),
    linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
          mask-image:
    radial-gradient(ellipse 75% 95% at 50% 78%, #000 55%, rgba(0,0,0,0.85) 70%, transparent 100%),
    linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  filter:
    drop-shadow(0 30px 50px rgba(0,0,0,0.55))
    contrast(1.04)
    saturate(0.95);
}
.hero__photo-frame::after {
  display: none;
}
.hero__photo-caption {
  position: absolute;
  right: 0;
  bottom: -8px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--slate-2);
  text-align: right;
  z-index: 3;
}

@media (max-width: 980px) {
  .hero { min-height: auto; padding: 110px 0 40px; }
  .hero__grid { grid-template-columns: 1fr; gap: 40px; align-items: start; }
  .hero__title { margin-bottom: 28px; }
  .hero__title .row--indent { padding-left: 0; }
  .hero__lede { margin-bottom: 28px; }
  .hero__cta { margin-bottom: 32px; }
  .hero__photo { min-height: 0; aspect-ratio: 1 / 1.05; max-width: 480px; margin: 0 auto; width: 100%; }
  .hero__photo-frame { right: 0; bottom: 0; width: 100%; aspect-ratio: 1220 / 1362; }
}
@media (max-width: 720px) {
  .hero { padding: 92px 0 24px; }
  .hero__grid { gap: 48px; }
  .hero__title { margin-bottom: 20px; }
  .hero__lede { font-size: 17px; margin-bottom: 24px; }
  .hero__cta { margin-bottom: 24px; gap: 10px; }
  .hero__cta .btn { padding: 14px 20px; font-size: 13px; }
  .hero__photo { aspect-ratio: 1 / 1; max-width: 360px; }
  .hero__photo-caption { font-size: 12px; bottom: 4px; }
  .hero__bg-glow { width: 80%; right: -20%; top: 4%; }
}

/* ---------- Marquee ticker ---------- */
.ticker {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 22px 0;
  overflow: hidden;
  position: relative;
  background: var(--ink-2);
}
.ticker__track {
  display: flex;
  gap: 64px;
  white-space: nowrap;
  animation: tick 50s linear infinite;
  font-family: var(--display);
  font-style: italic;
  font-size: 22px;
  color: var(--cream);
  font-weight: 300;
}
.ticker__track span { display: inline-flex; align-items: center; gap: 64px; }
.ticker__track .dot {
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
}
@keyframes tick {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (max-width: 880px) {
  .ticker { padding: 16px 0; }
  .ticker__track {
    animation-duration: 28s;
    font-size: 17px;
    gap: 36px;
  }
  .ticker__track span { gap: 36px; }
}
@media (max-width: 480px) {
  .ticker__track { animation-duration: 22s; font-size: 15px; gap: 28px; }
  .ticker__track span { gap: 28px; }
}

/* ---------- Section header ---------- */
.s-head {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 48px;
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 56px);
}
.s-head__num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--gold);
  text-transform: uppercase;
}
.s-head__title {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(40px, 5.5vw, 84px);
  line-height: 1;
  letter-spacing: -0.02em;
}
.s-head__title em {
  font-style: italic;
  color: var(--gold-deep);
}
.section:not(.section--cream):not(.section--paper) .s-head__title em {
  color: var(--gold-soft);
}
.s-head__lede {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.5;
  max-width: 540px;
  color: var(--ink);
  opacity: 0.72;
}
.section:not(.section--cream):not(.section--paper) .s-head__lede {
  color: var(--cream);
  opacity: 0.7;
}

@media (max-width: 880px) {
  .s-head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 40px; }
  .s-head__lede { font-size: 17px; }
}
@media (max-width: 720px) {
  .section { padding: 64px 0; }
  .s-head { margin-bottom: 32px; }
  .s-head__title { font-size: clamp(34px, 9vw, 48px); }
}

/* ---------- About / Bio ---------- */
.bio {
  background: var(--cream);
  color: var(--ink);
}
.bio__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
.bio__pull {
  position: sticky;
  top: 120px;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.bio__pull em { font-style: italic; color: var(--gold-deep); }
.bio__body p {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.55;
  margin: 0 0 1.1em;
  color: var(--ink);
}
.bio__body p:first-of-type::first-letter {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 5em;
  float: left;
  line-height: 0.9;
  margin: 6px 12px 0 0;
  color: var(--gold-deep);
}
.bio__body .credentials {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 32px;
  margin-top: 48px;
  padding-top: 36px;
  border-top: 1px solid rgba(14,14,16,0.16);
}
.bio__body .credentials div {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
}
.bio__body .credentials .k {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--gold-deep);
  text-transform: uppercase;
  margin-bottom: 6px;
}

@media (max-width: 980px) {
  .bio__grid { grid-template-columns: 1fr; gap: 32px; }
  .bio__pull { position: static; font-size: clamp(22px, 4.5vw, 32px); }
}
@media (max-width: 720px) {
  .bio__body p { font-size: 18px; line-height: 1.55; }
  .bio__body p:first-of-type::first-letter {
    font-size: 3.6em;
    margin: 4px 8px 0 0;
  }
  .bio__body .credentials {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 32px;
    padding-top: 24px;
  }
}

/* ---------- Services ---------- */
.services {
  background: var(--ink);
  color: var(--cream);
}
/* === also-available block (programme tier 2) === */
.svc-also {
  margin-top: 28px;
  padding: 40px 36px;
  border: 1px dashed rgba(245, 241, 232, 0.18);
  border-radius: 4px;
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: 36px;
  align-items: start;
}
.svc-also__label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  padding-top: 4px;
}
.svc-also__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.5;
  color: var(--cream);
  margin: 0;
}
.svc-also__list em {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  color: var(--gold-soft);
  margin-right: 8px;
}
.svc-also__cta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  white-space: nowrap;
  padding-top: 4px;
  display: inline-flex;
  gap: 10px;
  align-items: center;
}
.svc-also__cta:hover { color: var(--cream); }
@media (max-width: 900px) {
  .svc-also { grid-template-columns: 1fr; gap: 20px; }
}

.svc-list {
  display: grid;
  grid-template-columns: 1fr;
}
.svc {
  display: grid;
  grid-template-columns: 80px 1.2fr 2fr 1fr;
  align-items: start;
  gap: 32px;
  padding: 36px 0;
  border-top: 1px solid var(--rule);
  cursor: pointer;
  transition: padding 0.3s ease, background 0.3s ease;
  position: relative;
}
.svc:last-child { border-bottom: 1px solid var(--rule); }
.svc:hover { padding: 44px 0; }
.svc__num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--gold);
}
.svc__title {
  font-family: var(--display);
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.svc__title em { font-style: italic; color: var(--gold-soft); }
.svc__desc {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.5;
  color: rgba(245, 241, 232, 0.7);
}
.svc__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate-2);
}
.svc__meta .arrow-icon {
  width: 28px; height: 28px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
  transition: background 0.25s ease, border-color 0.25s ease;
}
/* CSS-drawn chevron — two borders rotated 45deg form a `v`. Rotates 180deg
 * when the row is open so the user sees a clear "now closes" affordance. */
.svc__meta .arrow-icon::before {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--cream);
  border-bottom: 1.5px solid var(--cream);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.3s ease, border-color 0.25s ease;
}
.svc.is-open .arrow-icon::before {
  transform: translateY(2px) rotate(-135deg);
}
.svc:hover .arrow-icon {
  background: var(--gold);
  border-color: var(--gold);
}
.svc:hover .arrow-icon::before {
  border-right-color: var(--ink);
  border-bottom-color: var(--ink);
}

.svc__expand {
  grid-column: 2 / -1;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s ease, margin-top 0.45s ease;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
}
.svc.is-open .svc__expand { max-height: 500px; margin-top: 24px; }
.svc__expand-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 48px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.svc__expand-grid h4 {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}
.svc__expand-grid ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.svc__expand-grid li {
  padding: 6px 0;
  color: rgba(245, 241, 232, 0.8);
}
.svc__expand-grid li::before {
  content: "—";
  color: var(--gold);
  margin-right: 12px;
}

@media (max-width: 880px) {
  .svc { grid-template-columns: 50px 1fr; gap: 12px 14px; padding: 26px 0; }
  .svc:hover { padding: 26px 0; }
  .svc__desc, .svc__meta { grid-column: 2 / -1; }
  .svc__meta { align-items: flex-start; flex-direction: row; flex-wrap: wrap; gap: 12px; }
  .svc__meta .arrow-icon { margin-top: 0; margin-left: auto; }
  .svc__expand-grid { grid-template-columns: 1fr; gap: 24px; padding-top: 18px; }
  .svc.is-open .svc__expand { max-height: 800px; }
  .svc-also { padding: 28px 22px; }
}

/* ---------- Stats ---------- */
.stats {
  background: var(--ink-2);
  padding: clamp(56px, 6vw, 80px) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.stat {
  padding: 16px 0;
  border-left: 1px solid var(--rule);
  padding-left: 24px;
}
.stat__num {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(48px, 6vw, 84px);
  line-height: 1;
  color: var(--gold-soft);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.stat__num em { font-style: italic; }
.stat__num .unit { font-size: 0.5em; color: var(--cream); margin-left: 4px; }
.stat__label {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.35;
  color: rgba(245, 241, 232, 0.78);
}
@media (max-width: 880px) {
  .stats { padding: 56px 0; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 28px 14px; }
  .stat { padding-left: 16px; padding-top: 8px; padding-bottom: 8px; }
  .stat__num { font-size: clamp(40px, 11vw, 60px); margin-bottom: 8px; }
  .stat__label { font-size: 14px; }
}

/* ---------- Philosophy ---------- */
.philosophy {
  background: var(--ink);
  color: var(--cream);
  padding: clamp(72px, 8vw, 120px) 0;
}
.philosophy__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.philosophy__quote {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.philosophy__quote em { font-style: italic; color: var(--gold-soft); }
.philosophy__quote .open-q {
  font-style: italic;
  font-size: 1.3em;
  color: var(--gold);
  line-height: 0;
  display: inline-block;
  margin-right: 4px;
  vertical-align: -0.15em;
}
.philosophy__pillars {
  display: grid;
  gap: 20px;
}
.pillar {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 20px;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
  align-items: baseline;
}
.pillar:last-child { border-bottom: 1px solid var(--rule); }
.pillar__num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--gold);
}
.pillar h3 {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 300;
  line-height: 1.1;
  margin-bottom: 6px;
}
.pillar h3 em { font-style: italic; color: var(--gold-soft); }
.pillar p {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.45;
  color: rgba(245, 241, 232, 0.7);
  margin: 0;
}

@media (max-width: 880px) {
  .philosophy { padding: 64px 0; }
  .philosophy__grid { grid-template-columns: 1fr; gap: 24px; }
  .pillar { padding: 18px 0; gap: 14px; grid-template-columns: 24px 1fr; }
  .pillar h3 { font-size: 22px; }
  .pillar p { font-size: 15px; }
}

/* ---------- Booking ---------- */
.booking {
  background: var(--cream);
  color: var(--ink);
  padding: clamp(72px, 8vw, 120px) 0;
}
.booking__shell {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.booking__intro h2 {
  font-family: var(--display);
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin-bottom: 24px;
}
.booking__intro h2 em { font-style: italic; color: var(--gold-deep); }
.booking__intro p {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.5;
  color: rgba(14,14,16,0.7);
  margin: 0 0 32px;
}
.booking__contact {
  border-top: 1px solid rgba(14,14,16,0.16);
  padding-top: 24px;
  display: grid;
  gap: 14px;
}
.booking__contact div { font-family: var(--serif); font-size: 17px; }
.booking__contact .k {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--gold-deep);
  text-transform: uppercase;
  margin-bottom: 4px;
}

/* form */
.form-card {
  background: var(--paper);
  border: 1px solid rgba(14,14,16,0.14);
  padding: clamp(32px, 4vw, 48px);
  position: relative;
}
.form-step {
  display: none;
}
.form-step.is-active { display: block; }
.form-progress {
  display: flex;
  gap: 8px;
  margin-bottom: 32px;
}
.form-progress div {
  flex: 1;
  height: 2px;
  background: rgba(14,14,16,0.12);
  position: relative;
  overflow: hidden;
}
.form-progress div.is-done::after,
.form-progress div.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold-deep);
}
.form-step__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 28px;
}
.form-step__head .step-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--gold-deep);
  text-transform: uppercase;
}
.form-step__head h3 {
  font-family: var(--display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: -0.02em;
}

.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(14,14,16,0.65);
  margin-bottom: 8px;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(14,14,16,0.25);
  padding: 12px 0;
  font-family: var(--serif);
  font-size: 19px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s ease;
  border-radius: 0;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-bottom-color: var(--gold-deep);
}
.field input::placeholder, .field textarea::placeholder {
  color: rgba(14,14,16,0.3);
  font-style: italic;
}
.field textarea {
  resize: vertical;
  min-height: 100px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.chip {
  padding: 10px 18px;
  border: 1px solid rgba(14,14,16,0.2);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.chip:hover { border-color: var(--ink); }
.chip.is-on {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 880px) {
  .booking__shell { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 720px) {
  .form-grid-2 { grid-template-columns: 1fr; }
  .booking { padding: 64px 0; }
  .form-card { padding: 24px 22px; }
  .form-step__head { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 22px; }
  .form-progress { margin-bottom: 22px; }
  .field input, .field textarea, .field select { font-size: 16px; }
  .form-actions { margin-top: 24px; padding-top: 20px; gap: 12px; }
  .form-actions .btn { padding: 12px 18px; font-size: 13px; }
  .booking__intro h2 { font-size: clamp(36px, 9vw, 48px); }
  .booking__intro p { font-size: 17px; }
}

.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(14,14,16,0.12);
}
.btn--ink {
  background: var(--ink);
  color: var(--cream);
}
.btn--ink:hover { background: var(--gold-deep); }
.btn--text {
  padding: 12px 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(14,14,16,0.55);
}
.btn--text:hover { color: var(--ink); }

.form-success {
  text-align: center;
  padding: 40px 20px;
}
.form-success h3 {
  font-family: var(--display);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 300;
  font-style: italic;
  color: var(--gold-deep);
  margin-bottom: 16px;
}
.form-success p {
  font-family: var(--serif);
  font-size: 18px;
  color: rgba(14,14,16,0.7);
  margin: 0;
}

/* ---------- Footer ----------
 * Three-layer composition:
 *  1. Editorial signoff (large italic line + lotus ornament) — the
 *     closing thought, echoes the hero headline so the page comes
 *     full circle.
 *  2. Quiet nav grid — purposely understated, smaller type, lower
 *     contrast. The signoff above does the editorial work.
 *  3. Colophon line — legal + service tag.
 */
.footer {
  background: var(--ink);
  color: var(--cream);
  padding: 0 0 32px;
  border-top: 1px solid var(--rule);
}

.footer__signoff {
  padding: clamp(80px, 9vw, 130px) 0 clamp(48px, 6vw, 80px);
  text-align: center;
}
.footer__signoff-line {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--cream);
  margin: 0;
  text-wrap: balance;
}
.footer__signoff-line em {
  color: var(--gold-soft);
  font-style: italic;
}
.footer__lotus {
  display: block;
  width: 44px;
  height: 44px;
  margin: 36px auto 0;
  color: var(--gold);
  opacity: 0.65;
}
.footer__lotus svg { width: 100%; height: 100%; display: block; }

/* Hairline separator between the editorial signoff and the utility nav.
 * Targets only the direct-child .container (the nav grid one) — the
 * signoff's nested .container is excluded by the > combinator. */
.footer > .container {
  padding-top: clamp(48px, 6vw, 72px);
  border-top: 1px solid rgba(245, 241, 232, 0.08);
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 80px;
}
.footer__brand h3 {
  font-family: var(--display);
  /* Sized to fit 'Dr. Deepa Goel.' on a single line in the 2fr footer column. */
  font-size: clamp(32px, 3.6vw, 52px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--gold-soft);
  margin-bottom: 14px;
  white-space: nowrap;
}
.footer__brand p {
  font-family: var(--serif);
  font-size: 17px;
  color: rgba(245,241,232,0.7);
  max-width: 420px;
  margin: 0 0 24px;
  line-height: 1.5;
}
.footer__cta {
  margin-top: 4px;
}
.footer__note {
  margin: 14px 0 0;
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.4;
  color: rgba(245,241,232,0.55);
  max-width: 240px;
}
.footer__note em { color: var(--gold-soft); font-style: italic; }

/* Social icon row in the Reach out column. Same line-stroke vocabulary
 * as the lotus mark + service expand chevron — circle outline that
 * fills gold on hover with the icon flipping to ink. */
.footer__socials {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.footer__social {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(245, 241, 232, 0.2);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(245, 241, 232, 0.78);
  text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.2s ease, transform 0.2s ease;
}
.footer__social svg {
  width: 16px;
  height: 16px;
  display: block;
}
.footer__social:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  transform: translateY(-2px);
}

.footer__location {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: 16px;
  color: rgba(245, 241, 232, 0.78);
  line-height: 1.4;
}
.footer__col h4 {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 16px;
  font-weight: 500;
}
.footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer__col li { font-family: var(--serif); font-size: 16px; color: rgba(245,241,232,0.78); }
.footer__col li a:hover { color: var(--gold-soft); }

.footer__bot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid var(--rule);
  padding-top: 32px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate-2);
}

@media (max-width: 880px) {
  .footer { padding: 56px 0 24px; }
  .footer__grid { grid-template-columns: 1fr; gap: 28px; margin-bottom: 48px; }
  .footer__brand h3 { font-size: clamp(28px, 7vw, 40px); }
  .footer__bot { flex-direction: column; gap: 10px; align-items: flex-start; padding-top: 22px; }
}

/* ---------- Reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* =========================================================
   CONVERSION ADDITIONS
   ========================================================= */

/* ---------- Trust strip (under hero) ---------- */
.trust-strip {
  background: var(--cream);
  color: var(--ink);
  padding: 44px 0 40px;
  border-top: 1px solid rgba(14,14,16,0.08);
  border-bottom: 1px solid rgba(14,14,16,0.08);
}
.trust-strip__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 32px;
  gap: 24px;
}
.trust-strip__label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.trust-strip__count {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: rgba(14,14,16,0.6);
}
.trust-strip__count em { color: var(--ink); font-style: normal; font-weight: 500; }
.trust-strip__count--mobile { display: none; }
.trust-logos {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 28px;
  align-items: center;
}
.trust-logo {
  height: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  padding: 0 8px;
}
.trust-logo img {
  max-height: 60px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  transition: transform 0.25s ease, filter 0.25s ease;
  filter: saturate(0.95);
}
.trust-logo:hover img { transform: scale(1.04); filter: saturate(1.1); }
.trust-logo .caption {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(14,14,16,0.55);
  text-align: center;
  line-height: 1.3;
}
@media (max-width: 880px) {
  .trust-strip { padding: 32px 0 28px; }
  .trust-strip .container { display: flex; flex-direction: column; gap: 20px; }
  .trust-strip__head {
    order: 1;
    margin-bottom: 0;
  }
  /* On mobile only the label shows in the head row; the count moves
   * below the logos via .trust-strip__count--mobile. */
  .trust-strip__head .trust-strip__count { display: none; }
  .trust-logos {
    order: 2;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 14px;
  }
  .trust-strip__count--mobile {
    order: 3;
    display: block;
    font-size: 13px;
    line-height: 1.4;
    padding-top: 18px;
    border-top: 1px solid rgba(14,14,16,0.1);
  }
  .trust-logo { height: 72px; padding: 0 4px; }
  .trust-logo img { max-height: 44px; }
  .trust-logo .caption { font-size: 8px; letter-spacing: 0.16em; }
}

/* Pulse keyframe — used by .cta-banner__scarcity .dot. */
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(200, 154, 74, 0.55); }
  70% { box-shadow: 0 0 0 10px rgba(200, 154, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(200, 154, 74, 0); }
}

/* ---------- Outcomes section ---------- */
.outcomes {
  background: var(--ink-2);
  color: var(--cream);
  border-top: 1px solid var(--rule);
  padding: clamp(72px, 8vw, 120px) 0;
}
.outcomes .s-head { margin-bottom: clamp(40px, 5vw, 56px) !important; }
.outcomes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.outcome {
  background: var(--ink-2);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: background 0.25s ease;
}
.outcome:hover { background: var(--ink-3); }
.outcome__num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--gold);
}
.outcome__title {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.outcome__title em { font-style: italic; color: var(--gold-soft); }
.outcome__body {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.5;
  color: rgba(245,241,232,0.72);
}
@media (max-width: 880px) {
  .outcomes { padding: 72px 0 64px; }
  .outcomes .s-head { margin-bottom: 40px !important; }
  .outcomes__grid { grid-template-columns: 1fr; }
  .outcome { padding: 28px 22px; gap: 12px; }
  .outcome__title { font-size: 24px; }
}

/* ---------- Process (matches site grid pattern) ---------- */
.process {
  background: var(--paper);
  color: var(--ink);
}
.proc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 80px;
}
.proc-card {
  border-top: 1px solid rgba(14,14,16,0.18);
  padding: 24px 0 0;
  display: flex;
  flex-direction: column;
}
.proc-card__num {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 56px;
  line-height: 1;
  color: var(--gold-deep);
  letter-spacing: -0.02em;
  margin-bottom: 32px;
}
/* Inline step indicator. Sits in the heading on the same line as
   "We talk." rather than as a stacked oversized numeral. */
.proc-card__step {
  font-family: var(--display);
  font-weight: 400;
  font-style: normal;
  color: var(--gold-deep);
  margin-right: 8px;
}
.proc-card h3 {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.proc-card h3 em { font-style: italic; color: var(--gold-deep); font-weight: 350; }
.proc-card p {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  color: rgba(14,14,16,0.74);
  margin: 0 0 20px;
  text-wrap: pretty;
}
.proc-card__when {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
@media (max-width: 880px) {
  .proc-grid { grid-template-columns: 1fr; gap: 8px; margin-bottom: 48px; }
  .proc-card { padding: 22px 0 0; }
  .proc-card__num { font-size: 44px; margin-bottom: 18px; }
  .proc-card h3 { font-size: 26px; }
  .proc-card p { font-size: 16px; }
}

/* ---------- Testimonials ---------- */
.testimonials {
  background: var(--cream);
  color: var(--ink);
}
.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.testi {
  padding: 36px;
  background: var(--paper);
  border: 1px solid rgba(14,14,16,0.12);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.testi__mark {
  font-family: var(--display);
  font-style: italic;
  font-size: 56px;
  line-height: 0.6;
  color: var(--gold-deep);
  height: 24px;
}
.testi__body {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.45;
  color: var(--ink);
  flex: 1;
}
.testi__by {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 20px;
  border-top: 1px solid rgba(14,14,16,0.12);
}
.testi__by .name {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 400;
}
.testi__by .role {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
@media (max-width: 880px) {
  .testi-grid { grid-template-columns: 1fr; gap: 16px; }
  .testi { padding: 26px 22px; gap: 18px; }
  .testi__body { font-size: 17px; }
}

/* ---------- Big CTA banner ---------- */
.cta-banner {
  background: var(--ink);
  color: var(--cream);
  padding: clamp(72px, 8vw, 120px) 0;
  border-top: 1px solid var(--rule);
}
.cta-banner__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
  align-items: end;
}
.cta-banner h2 {
  font-family: var(--display);
  font-size: clamp(48px, 6vw, 96px);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.025em;
}
.cta-banner h2 em { font-style: italic; color: var(--gold-soft); }
.cta-banner__right { display: flex; flex-direction: column; gap: 20px; }
.cta-banner__lede {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.5;
  color: rgba(245,241,232,0.78);
  margin: 0;
}
.cta-banner__buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.cta-banner__scarcity {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 10px;
}
.cta-banner__scarcity .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
  animation: pulse 2.4s ease-out infinite;
}
@media (max-width: 880px) {
  .cta-banner__inner { grid-template-columns: 1fr; gap: 28px; }
  .cta-banner__buttons .btn { padding: 14px 20px; font-size: 13px; }
}

/* ---------- Hero stat strip (experience signals above-fold) ---------- */
.hero__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 28px;
  border-top: 1px solid var(--rule);
  padding-top: 24px;
  max-width: 640px;
  margin-top: 8px;
}
.hero__stat .n {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(28px, 2.4vw, 36px);
  line-height: 1;
  color: var(--gold-soft);
  margin-bottom: 6px;
  letter-spacing: -0.015em;
}
.hero__stat .n em { font-style: italic; }
.hero__stat .n .unit {
  font-size: 0.5em;
  color: var(--cream);
  margin-left: 4px;
  font-style: normal;
}
.hero__stat .l {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate-2);
  line-height: 1.3;
}
@media (max-width: 720px) {
  .hero__stats {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px 10px;
    padding-top: 18px;
    max-width: 100%;
  }
  .hero__stat .n { font-size: 22px; margin-bottom: 4px; }
  .hero__stat .n .unit { font-size: 0.45em; margin-left: 2px; }
  .hero__stat .l {
    font-size: 8.5px;
    letter-spacing: 0.12em;
    line-height: 1.25;
  }
}

/* ---------- Hero photo image-slot styling ---------- */
.hero__photo image-slot {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

/* =========================================================
   PAGE: ABOUT, BLOG INDEX, BLOG POST
   Tranquil typography, narrower book-column reading widths,
   editorial pull quotes, lotus seal, slow rhythm.
   ========================================================= */

/* Narrower container for prose-heavy pages — book column width */
.container--narrow {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Stacked section header (vs the 2-col on landing) — used on /about
 * and inner pages where sections introduce themselves vertically rather
 * than across a 1fr/1.6fr split. */
.s-head--stacked {
  display: block;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.s-head--stacked .s-head__num { margin-bottom: 18px; }
.s-head--stacked .s-head__title { margin-bottom: 18px; }

/* Lotus ornament — small SVG mark used as section punctuation on /about.
 * Color inherits via currentColor; sized down for hairline presence. */
.lotus-ornament {
  display: block;
  width: 44px;
  height: 44px;
  margin: 56px auto 0;
  color: var(--gold);
  opacity: 0.6;
}
.lotus-ornament svg { width: 100%; height: 100%; display: block; }

/* ---------- Landing: Read more about Dr. Deepa CTA ---------- */
.bio__more {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 24px;
  margin-top: 56px;
  padding: 28px 0 26px;
  border-top: 1px solid rgba(14,14,16,0.16);
  border-bottom: 1px solid rgba(14,14,16,0.16);
  text-decoration: none;
  color: var(--ink);
  transition: color 0.2s ease, border-color 0.2s ease, padding 0.3s ease;
}
.bio__more:hover { color: var(--gold-deep); border-color: var(--gold-deep); padding-left: 6px; }
.bio__more-label {
  grid-column: 1;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.bio__more-meta {
  grid-column: 1;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.bio__more-arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-family: var(--display);
  font-size: 28px;
  font-style: italic;
  transition: transform 0.3s ease;
}
.bio__more:hover .bio__more-arrow { transform: translateX(8px); }
@media (max-width: 720px) {
  .bio__more { margin-top: 40px; padding: 22px 0 20px; }
  .bio__more-label { font-size: 22px; }
  .bio__more-arrow { font-size: 24px; }
}

/* ---------- About hero ---------- */
.about-hero {
  background: var(--cream);
  color: var(--ink);
  padding: clamp(96px, 10vw, 140px) 0 clamp(48px, 6vw, 80px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.about-hero::before {
  /* Soft warm wash, off-center, low intensity — replaces the landing's
   * busy aurora with a single slow gold halo. */
  content: "";
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  height: 80%;
  background: radial-gradient(ellipse at 50% 30%, rgba(200, 154, 74, 0.18), transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.about-hero > .container { position: relative; z-index: 1; }
.about-hero__eyebrow { color: var(--gold-deep); margin-bottom: 32px; }
.about-hero__title {
  font-size: clamp(44px, 6vw, 88px);
  line-height: 1.05;
  margin-bottom: 36px;
  letter-spacing: -0.025em;
}
.about-hero__title em { color: var(--gold-deep); font-style: italic; }
.about-hero__lede {
  max-width: 640px;
  margin: 0 auto;
  color: rgba(14,14,16,0.72);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.55;
}

/* ---------- Contemplation pull quote (used on /about between sections) */
.contemplation {
  /* Was clamp(80, 10vw, 140) which stacked 280px of dead space around a
     single quote when combined with surrounding section padding. The
     quote should breathe, not float in a void. */
  padding: clamp(56px, 6vw, 88px) 0;
  text-align: center;
  position: relative;
}
.contemplation--cream { background: var(--cream); color: var(--ink); }
.contemplation--ink { background: var(--ink); color: var(--cream); }
.contemplation__open {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(72px, 9vw, 120px);
  line-height: 0.4;
  margin: 0 0 -0.15em;
  color: var(--gold);
  opacity: 0.4;
  letter-spacing: -0.04em;
  user-select: none;
}
.contemplation--cream .contemplation__open { color: var(--gold-deep); opacity: 0.32; }
.contemplation__quote {
  margin: 0 auto 24px;
  font-family: var(--display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.25;
  letter-spacing: -0.018em;
  max-width: 760px;
  text-wrap: balance;
}
.contemplation__quote em {
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
}
.contemplation--cream .contemplation__quote em { color: var(--gold-deep); }
.contemplation__cite {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}
.contemplation--cream .contemplation__cite { color: var(--gold-deep); }

/* ---------- About bio body ---------- */
.about-bio__body p {
  font-family: var(--serif);
  font-size: clamp(18px, 1.55vw, 22px);
  line-height: 1.65;
  margin: 0 0 1.3em;
  color: rgba(14,14,16,0.84);
}
.about-bio__body p:first-child::first-letter {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 4.4em;
  float: left;
  line-height: 0.9;
  margin: 6px 14px 0 0;
  color: var(--gold-deep);
}
.about-bio__body em { color: var(--gold-deep); font-style: italic; }

/* ---------- Philosophy variant on /about ---------- */
.philosophy--about { background: var(--ink-2); }
.philosophy--about .philosophy__pillars { gap: 8px; }
/* Each pillar earns a thin gold left-border so the four-pillar
 * structure reads as four discrete tenets rather than a list. The
 * padding-left compensates so the numeral and copy don't slide right. */
.philosophy--about .pillar {
  padding: 28px 0 28px 24px;
  align-items: start;
  border-top: none;
  border-left: 2px solid var(--gold);
  position: relative;
  transition: padding 0.25s ease, border-color 0.25s ease;
}
.philosophy--about .pillar:last-child { border-bottom: none; }
.philosophy--about .pillar:hover {
  padding-left: 32px;
  border-left-color: var(--gold-soft);
}
.philosophy--about .pillar h3 {
  font-size: clamp(24px, 2.4vw, 32px);
}
@media (max-width: 720px) {
  .philosophy--about .pillar { padding: 22px 0 22px 18px; }
}

/* ---------- About: Practice / institutions list ---------- */
.about-practice { background: var(--paper); color: var(--ink); }
.practice__list {
  display: flex;
  flex-direction: column;
}
.practice-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 32px;
  padding: 28px 0;
  border-top: 1px solid rgba(14,14,16,0.12);
  align-items: start;
}
.practice-row:last-child { border-bottom: 1px solid rgba(14,14,16,0.12); }
.practice-row__years {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  padding-top: 6px;
}
.practice-row h3 {
  font-family: var(--display);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
  color: var(--ink);
}
.practice-row h3 em {
  color: var(--gold-deep);
  font-style: normal;
  font-weight: 400;
  margin: 0 6px;
}
.practice-row p {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.5;
  color: rgba(14,14,16,0.7);
  margin: 0;
}
.practice-row--science h3 { font-style: italic; color: var(--gold-deep); }
@media (max-width: 720px) {
  .practice-row { grid-template-columns: 1fr; gap: 6px 16px; padding: 22px 0; }
  .practice-row__years { padding-top: 0; }
}

/* ---------- About: Credentials grid ---------- */
.about-creds { background: var(--cream); color: var(--ink); }
.creds-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px 40px;
}
.creds-block h4 {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 14px;
  font-weight: 500;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(14,14,16,0.16);
}
.creds-block ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.creds-block li {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.45;
  color: rgba(14,14,16,0.78);
}
.creds-block em { font-style: italic; color: var(--ink); }
@media (max-width: 880px) {
  .creds-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
}
@media (max-width: 600px) {
  .creds-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- About: closing CTA variant ---------- */
.about-cta { padding: clamp(72px, 8vw, 120px) 0; }

/* =========================================================
   BLOG INDEX
   ========================================================= */
.blog-head {
  background: var(--ink);
  color: var(--cream);
  /* Was clamp(140px, 14vw, 200px) - way too cavernous on desktop.
     New range is closer to the homepage hero's 120px and harmonises
     with .section padding of clamp(72, 8vw, 130). */
  padding: clamp(96px, 10vw, 140px) 0 clamp(40px, 4vw, 60px);
  text-align: center;
}
.blog-head__eyebrow { color: var(--gold); margin-bottom: 28px; }
.blog-head__title {
  font-size: clamp(48px, 7vw, 96px);
  line-height: 1.05;
  margin-bottom: 28px;
}
.blog-head__title em { color: var(--gold-soft); font-style: italic; }
.blog-head__lede {
  max-width: 620px;
  margin: 0 auto;
  color: rgba(245,241,232,0.75);
  font-size: clamp(17px, 1.5vw, 21px);
}

/* ---------- Featured post card ---------- */
.blog-featured {
  background: var(--ink);
  padding: 0 0 clamp(56px, 6vw, 100px);
}
.featured-card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
  text-decoration: none;
  color: var(--cream);
  transition: transform 0.3s ease;
}
.featured-card:hover { transform: translateY(-2px); }
.featured-card__media {
  aspect-ratio: 16 / 11;
  background: var(--ink-2);
  position: relative;
  overflow: hidden;
}
.featured-card__media image-slot,
.featured-card__media img {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 35%;
}
.featured-card__title {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 18px 0 18px;
}
.featured-card__title em { font-style: italic; color: var(--gold-soft); }
.featured-card__lede {
  font-family: var(--serif);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.5;
  color: rgba(245,241,232,0.72);
  margin: 0 0 24px;
}
.featured-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  transition: gap 0.25s ease;
}
.featured-card:hover .featured-card__cta { gap: 22px; }
.featured-card__cta .arrow {
  display: inline-block;
  width: 22px; height: 1px;
  background: currentColor;
  position: relative;
}
.featured-card__cta .arrow::after {
  content: "";
  position: absolute;
  right: -1px; top: -3px;
  width: 7px; height: 7px;
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  transform: rotate(45deg);
}
@media (max-width: 880px) {
  .featured-card { grid-template-columns: 1fr; gap: 24px; }
  .featured-card__title { font-size: 32px; }
}

/* ---------- Post grid ---------- */
.post-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(14,14,16,0.6);
  margin: 0;
}
.post-meta__cat { color: var(--gold-deep); font-weight: 500; }
.post-meta__sep { color: rgba(14,14,16,0.3); }
.section .post-meta, .blog-grid .post-meta { color: rgba(14,14,16,0.6); }
.blog-featured .post-meta, .post .post-meta { color: rgba(245,241,232,0.55); }
.blog-featured .post-meta__cat { color: var(--gold); }
.post .post-meta__cat { color: var(--gold-deep); }

.post-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(36px, 4vw, 56px) clamp(24px, 3vw, 40px);
}
@media (max-width: 720px) {
  .post-grid { grid-template-columns: 1fr; gap: 36px; }
}
.post-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.3s ease;
}
.post-card:hover { transform: translateY(-3px); }
.post-card__media {
  aspect-ratio: 16 / 10;
  background: var(--paper);
  margin-bottom: 20px;
  overflow: hidden;
  border: 1px solid rgba(14,14,16,0.08);
}
.post-card__media image-slot,
.post-card__media img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 35%; }
.post-card__title {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 12px 0 12px;
}
.post-card__title em { font-style: italic; color: var(--gold-deep); }
.post-card__lede {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.5;
  color: rgba(14,14,16,0.7);
  margin: 0;
}

/* Blog closing CTA */
.blog-cta { padding: clamp(72px, 8vw, 120px) 0; }
.blog-cta .cta-banner__inner { grid-template-columns: 1fr; text-align: center; gap: 32px; }
.blog-cta .cta-banner__right { align-items: center; }
.blog-cta .cta-banner__buttons { justify-content: center; }

/* =========================================================
   BLOG POST (article)
   ========================================================= */
.post { background: var(--cream); color: var(--ink); }

.post__head {
  padding: clamp(96px, 10vw, 140px) 0 clamp(28px, 3vw, 44px);
  text-align: center;
}
.post__back {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 28px;
}
.post__back:hover { color: var(--ink); }
.post__meta {
  justify-content: center;
  margin-bottom: 24px;
  color: rgba(14,14,16,0.6);
}
.post__title {
  font-size: clamp(38px, 5.5vw, 76px);
  line-height: 1.05;
  margin-bottom: 28px;
  letter-spacing: -0.025em;
}
.post__title em { color: var(--gold-deep); font-style: italic; }
.post__lede {
  max-width: 640px;
  margin: 0 auto;
  color: rgba(14,14,16,0.7);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.5;
}

.post__hero {
  margin-bottom: clamp(48px, 6vw, 80px);
  /* Cap the hero at editorial reading-rhythm width on desktop. */
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
.post__hero image-slot,
.post__hero img {
  display: block;
  width: 100%;
  height: auto;          /* render at natural aspect — no letterbox padding */
  background: var(--cream);
}

/* Body — narrow column, generous line-height */
.post__body {
  padding-bottom: clamp(48px, 6vw, 80px);
  max-width: 720px;
}
.post__body p {
  font-family: var(--serif);
  font-size: clamp(18px, 1.55vw, 22px);
  line-height: 1.7;
  margin: 0 0 1.4em;
  color: rgba(14,14,16,0.84);
}
.post__body p:first-of-type::first-letter {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 4.4em;
  float: left;
  line-height: 0.9;
  margin: 6px 14px 0 0;
  color: var(--gold-deep);
}
.post__body em { color: var(--gold-deep); font-style: italic; }
.post__body strong { font-weight: 600; color: var(--ink); }

/* In-post images (Gutenberg image blocks).
   Default: image fits the reading column but never overflows it, never
   stretches beyond its native size, sits centered with breathing room.
   For wide images (Gutenberg's "wide width" alignment), we let it break
   out of the body's 720px column up to 960px (matching the hero).
   "Full width" alignment goes edge-to-edge at the container--wide cap. */
.post__body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 2em auto;
  border-radius: 2px;
}
.post__body figure {
  margin: 2em auto;
}
.post__body figure img {
  margin: 0 auto 12px;
}
.post__body figure figcaption {
  font-family: var(--serif);
  font-size: 14px;
  font-style: italic;
  color: rgba(14,14,16,0.6);
  text-align: center;
  line-height: 1.5;
}
/* Gutenberg alignment classes */
.post__body .alignwide,
.post__body figure.alignwide,
.post__body figure.alignwide img {
  width: min(960px, 100%);
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}
.post__body .alignfull,
.post__body figure.alignfull,
.post__body figure.alignfull img {
  /* Was 100vw which includes the scrollbar width and can cause horizontal
     overflow. Now bounded to the body width and centered properly. */
  width: 100%;
  max-width: none;
}
.post__body .alignleft  { float: left;  margin: 0.5em 1.5em 1em 0; max-width: 50%; }
.post__body .alignright { float: right; margin: 0.5em 0 1em 1.5em; max-width: 50%; }
.post__body .aligncenter { display: block; margin-left: auto; margin-right: auto; }

/* Mobile: kill the alignwide / alignfull breakouts so images fit the
   viewport without horizontal scrolling. Floats also stack to full width. */
@media (max-width: 720px) {
  .post__body .alignwide,
  .post__body figure.alignwide,
  .post__body figure.alignwide img,
  .post__body .alignfull,
  .post__body figure.alignfull,
  .post__body figure.alignfull img {
    width: 100%;
    margin-left: 0;
    transform: none;
  }
  .post__body .alignleft,
  .post__body .alignright {
    float: none;
    margin: 1.5em auto;
    max-width: 100%;
  }
}

.post__body h2 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 2em 0 0.6em;
  color: var(--ink);
}
.post__body h2 em { color: var(--gold-deep); font-style: italic; }

.post__list, .post__numbered {
  margin: 1.6em 0;
  padding: 0;
  list-style: none;
  font-family: var(--serif);
}
.post__list li {
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
  padding: 8px 0 8px 28px;
  position: relative;
  color: rgba(14,14,16,0.84);
}
.post__list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--gold-deep);
}
.post__numbered { counter-reset: pn; }
.post__numbered li {
  counter-increment: pn;
  padding: 22px 0;
  border-top: 1px solid rgba(14,14,16,0.12);
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 24px;
  align-items: start;
}
.post__numbered li:last-child { border-bottom: 1px solid rgba(14,14,16,0.12); }
.post__numbered li::before {
  content: counter(pn, decimal-leading-zero);
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 36px;
  line-height: 1;
  color: var(--gold-deep);
  letter-spacing: -0.02em;
}
.post__numbered h3,
.post__numbered p {
  grid-column: 2;
}
.post__numbered h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.2;
  margin: 0 0 8px;
  color: var(--ink);
}
.post__numbered p {
  font-size: 17px;
  line-height: 1.55;
  color: rgba(14,14,16,0.78);
  margin: 0;
}

/* Pull quote inside the body */
.post__pull {
  margin: 2.4em -32px;
  padding: 0 32px;
  border-left: 2px solid var(--gold-deep);
}
.post__pull p {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(28px, 3vw, 40px) !important;
  line-height: 1.2;
  color: var(--ink) !important;
  margin: 0 !important;
  letter-spacing: -0.015em;
}
.post__pull em { color: var(--gold-deep); font-style: italic; }

.post__divider {
  border: 0;
  height: 1px;
  background: rgba(14,14,16,0.16);
  margin: 3em 0 2em;
}
.post__signoff {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep) !important;
  text-align: center;
  margin: 0 !important;
}

/* Post CTA — at end of every blog post, drives back to booking */
.post-cta {
  background: var(--ink);
  color: var(--cream);
  padding: clamp(72px, 8vw, 120px) 0;
}
.post-cta__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.post-cta .eyebrow { color: var(--gold); margin-bottom: 24px; display: block; }
.post-cta h2 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.2;
  letter-spacing: -0.018em;
  margin: 0 0 20px;
  text-wrap: balance;
}
.post-cta h2 em { font-style: italic; color: var(--gold-soft); }
.post-cta p {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.5;
  color: rgba(245,241,232,0.72);
  margin: 0 0 32px;
}
.post-cta__buttons {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* More writing teaser at end of post */
.post-more {
  background: var(--paper);
  padding: clamp(56px, 6vw, 88px) 0;
}
.post-more .eyebrow { color: var(--gold-deep); display: block; }
.post-more__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 32px;
}
.post-card--mini {
  border-top: 1px solid rgba(14,14,16,0.12);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.post-card--mini .post-meta { color: rgba(14,14,16,0.6); }
.post-card--mini h3 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0;
}
.post-card--mini h3 em { font-style: italic; color: var(--gold-deep); }
@media (max-width: 880px) {
  .post-more__grid { grid-template-columns: 1fr; gap: 24px; }
}

/* image-slot placeholder appearance — empty state shown until user
 * drags a generated image in. */
image-slot:not([data-filled]) {
  background:
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(200,154,74,0.04) 12px 24px),
    rgba(245,241,232,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
image-slot[slot] span,
image-slot span[slot="placeholder"] {
  display: block;
  padding: 24px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(200,154,74,0.55);
}

/* Mobile spacing tightening for new pages */
@media (max-width: 720px) {
  .about-hero { padding: 110px 0 56px; }
  .blog-head { padding: 110px 0 40px; }
  .post__head { padding: 100px 0 32px; }
  .contemplation { padding: 64px 0; }
}

/* =========================================================
   404 PAGE
   Editorial, on-brand. Three numbered "paths forward" reads
   like the rest of the site's vocabulary, not a generic dead-end.
   ========================================================= */
.page-404__hero {
  background: var(--ink);
  color: var(--cream);
  padding: clamp(96px, 10vw, 140px) 0 clamp(56px, 6vw, 96px);
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.page-404__hero::before {
  content: "";
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 60%;
  background: radial-gradient(ellipse at 50% 50%, rgba(200, 154, 74, 0.12), transparent 65%);
  pointer-events: none;
}
.page-404__hero > .container { position: relative; z-index: 1; text-align: center; }
.page-404__eyebrow { color: var(--gold); margin-bottom: 28px; }
.page-404__title {
  font-size: clamp(48px, 7vw, 96px);
  line-height: 1.05;
  margin-bottom: 28px;
  letter-spacing: -0.025em;
}
.page-404__title em { color: var(--gold-soft); font-style: italic; }
.page-404__lede {
  max-width: 560px;
  margin: 0 auto 56px;
  color: rgba(245,241,232,0.75);
  font-size: clamp(17px, 1.4vw, 21px);
}
.page-404__paths {
  display: flex;
  flex-direction: column;
  max-width: 540px;
  margin: 0 auto 40px;
}
.page-404__path {
  display: grid;
  grid-template-columns: 56px 1fr 32px;
  align-items: center;
  gap: 18px;
  padding: 22px 0;
  border-top: 1px solid rgba(245,241,232,0.12);
  text-decoration: none;
  color: var(--cream);
  text-align: left;
  transition: padding 0.25s ease, color 0.2s ease;
}
.page-404__path:last-child { border-bottom: 1px solid rgba(245,241,232,0.12); }
.page-404__path:hover { padding-left: 8px; color: var(--gold-soft); }
.page-404__path-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--gold);
}
.page-404__path-label {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(22px, 2.2vw, 28px);
  letter-spacing: -0.015em;
}
.page-404__path-arrow {
  font-family: var(--display);
  font-style: italic;
  font-size: 22px;
  color: var(--gold-soft);
  text-align: right;
  transition: transform 0.25s ease;
}
.page-404__path:hover .page-404__path-arrow { transform: translateX(6px); }
.page-404__signoff {
  font-family: var(--serif);
  font-size: 15px;
  color: rgba(245,241,232,0.6);
}
.page-404__signoff em { color: var(--gold-soft); }
.page-404__signoff a { color: var(--gold-soft); text-decoration: none; }
.page-404__signoff a:hover { color: var(--cream); }

/* =========================================================
   WRITING TEASER (landing)
   Three bordered rows + a "Read all writing" link. No images,
   no big featured card — keeps the section short. The hover
   pad-shift mirrors the .svc rows in services so it feels native.
   ========================================================= */
.writing-teaser { background: var(--paper); color: var(--ink); }

.writing-list {
  display: flex;
  flex-direction: column;
  margin-bottom: 36px;
}
.writing-row {
  display: grid;
  grid-template-columns: 200px 1fr 56px;
  align-items: center;
  gap: 32px;
  padding: 28px 0;
  border-top: 1px solid rgba(14,14,16,0.16);
  text-decoration: none;
  color: var(--ink);
  transition: padding 0.3s ease, color 0.2s ease, background 0.25s ease;
}
.writing-row:last-child { border-bottom: 1px solid rgba(14,14,16,0.16); }
.writing-row:hover {
  padding: 32px 0;
  background: rgba(200, 154, 74, 0.04);
}
.writing-row__meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(14,14,16,0.55);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.writing-row__cat { color: var(--gold-deep); font-weight: 500; }
.writing-row__sep { color: rgba(14,14,16,0.3); }
.writing-row__title {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink);
}
.writing-row__title em { font-style: italic; color: var(--gold-deep); }
.writing-row__arrow {
  font-family: var(--display);
  font-style: italic;
  font-size: 28px;
  color: var(--gold-deep);
  text-align: right;
  transition: transform 0.3s ease;
}
.writing-row:hover .writing-row__arrow { transform: translateX(8px); }

.writing-teaser__cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  text-decoration: none;
  margin-top: 20px;
  transition: gap 0.25s ease, color 0.2s ease;
}
.writing-teaser__cta:hover { gap: 22px; color: var(--ink); }
.writing-teaser__cta .arrow {
  display: inline-block;
  width: 22px; height: 1px;
  background: currentColor;
  position: relative;
}
.writing-teaser__cta .arrow::after {
  content: "";
  position: absolute;
  right: -1px; top: -3px;
  width: 7px; height: 7px;
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  transform: rotate(45deg);
}

@media (max-width: 880px) {
  .writing-row { grid-template-columns: 1fr 32px; gap: 8px 16px; padding: 22px 0; }
  .writing-row:hover { padding: 24px 0; }
  .writing-row__meta { grid-column: 1; }
  .writing-row__title { grid-column: 1; }
  .writing-row__arrow { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 22px; }
}