/* Sheetal Mody · alternative design ("Organic Biophilic": sage + calm teal on stone).
   Mobile first. Tokens first, then base, layout, components, pages, admin, print. */

:root {
  /* Colour: text pairs are checked to 4.5:1 or better (see DESIGN.md). */
  --bg: #F5F5F0;          /* stone */
  --surface: #FFFFFF;
  --ink: #142326;         /* 14.8:1 on --bg */
  --muted: #4B5B5D;       /* 6.5:1 on --bg, 5.8:1 on --sage-100 */
  --teal-900: #0A3A40;    /* headings, 11.4:1 on --bg */
  --teal-700: #0B5F66;    /* primary, links; white on it 7.4:1 */
  --teal-500: #2B8A8F;    /* decoration only */
  --teal-100: #DCEDEC;
  --sage-50: #EEF3EB;
  --sage-100: #E3EBE0;
  --sage-200: #CFDCCB;
  --sage-400: #9DB59A;    /* decoration only */
  --sand-100: #F3EADB;
  --sand-300: #E6D3B3;
  --line: #DCE2D9;        /* hairlines between items */
  --line-mid: #C3CEC4;    /* choice tiles */
  --line-strong: #6E8279; /* input borders, 4:1 on white */
  --danger: #B42318;      /* 6.6:1 on white */
  --danger-100: #FDECEA;
  --todo: #FFF1A8;

  --serif: "Lora", Georgia, "Times New Roman", serif;
  --sans: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Spacing: the skill's spacious scale (density 2). */
  --space-xs: 4px; --space-sm: 8px; --space-md: 24px; --space-lg: 32px;
  --space-xl: 48px; --space-2xl: 64px; --space-3xl: 96px;
  --section: clamp(56px, 9vw, 96px);

  /* Shape: soft, with one "leaf" corner pair for organic panels. */
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 40px;
  --leaf: var(--r-xl) var(--r-sm) var(--r-xl) var(--r-sm);
  --blob: 58% 42% 52% 48% / 46% 54% 46% 54%;
  --shadow-soft: 0 1px 2px rgba(10, 58, 64, .05), 0 12px 32px -16px rgba(10, 58, 64, .22);

  /* Motion */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 150ms; --t: 220ms;

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.125rem/1.65 var(--sans);   /* 18px body for older readers */
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--teal-700); text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: color var(--t-fast); }
a:hover { color: var(--teal-900); text-decoration-thickness: 2.5px; }
h1, h2, h3 { font-family: var(--serif); color: var(--teal-900); line-height: 1.15; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-weight: 500; font-size: clamp(2.3rem, 6.5vw, 3.6rem); letter-spacing: -.015em; }
h2 { font-weight: 500; font-size: clamp(1.75rem, 4.2vw, 2.5rem); letter-spacing: -.01em; }
h3 { font-weight: 600; font-size: 1.3rem; }
h1 em, h2 em { font-style: italic; color: var(--teal-700); }
p { margin: 0 0 1em; }
strong { font-weight: 700; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
main:focus { outline: none; }
::selection { background: var(--teal-100); }

.wrap { width: min(1160px, 100% - 40px); margin-inline: auto; }
.narrow { width: min(760px, 100% - 40px); margin-inline: auto; }
.skip { position: absolute; left: 12px; top: -100px; z-index: 50; background: var(--teal-900); color: #fff; padding: 12px 18px; border-radius: var(--r-sm); font-weight: 700; }
.skip:focus { top: 12px; color: #fff; }
.kicker { display: inline-flex; align-items: flex-start; gap: 10px; line-height: 1.45; font-weight: 700; font-size: 1rem; color: var(--teal-700); margin-bottom: .9em; letter-spacing: .01em; }
.kicker::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: .2em; border-radius: 2px 70% 2px 70%; background: var(--sage-400); }
.lead { font-size: 1.2rem; color: var(--muted); line-height: 1.6; }
.muted { color: var(--muted); }
.small { font-size: 1rem; }
.todo { background: var(--todo); color: var(--ink); border-radius: 4px; padding: 0 .3em; box-decoration-break: clone; -webkit-box-decoration-break: clone; box-shadow: inset 0 -2px 0 #C9A400; }
.i { width: 24px; height: 24px; flex: none; }

/* ---------- Header and navigation ---------- */
.site-header { background: var(--bg); border-bottom: 1px solid var(--line); position: relative; z-index: 10; }
.header-inner { display: flex; align-items: center; gap: 16px; min-height: 76px; flex-wrap: wrap; padding-block: 8px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); margin-right: auto; min-height: 48px; flex: 1 1 0; min-width: 0; }
.menu-toggle { flex: none; }
.brand-mark { width: 44px; height: 44px; flex: none; }
.brand-name { display: block; font-family: var(--serif); font-weight: 600; font-size: 1.3rem; color: var(--teal-900); line-height: 1.1; }
.brand-sub { display: block; font-size: .92rem; color: var(--muted); line-height: 1.3; }

.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.site-nav a:not(.btn) {
  display: flex; align-items: center; min-height: 56px; padding: 0 4px;
  border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); font-weight: 600; font-size: 1.15rem;
}
.site-nav a:not(.btn)[aria-current="page"] { color: var(--teal-700); }
.site-nav a:not(.btn)[aria-current="page"]::before { content: ""; width: 10px; height: 10px; border-radius: 2px 70% 2px 70%; background: var(--teal-700); margin-right: 10px; }
.site-nav .nav-cta { padding-top: 16px; }
.site-nav .nav-cta .btn { width: 100%; }
.site-nav form { margin: 0; }
.site-nav { width: 100%; padding-bottom: 16px; }

.menu-toggle {
  display: none; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px;
  border: 2px solid var(--teal-700); background: var(--surface); color: var(--teal-900);
  border-radius: 14px; font: 700 1.05rem var(--sans); cursor: pointer;
}
.menu-toggle .when-closed, .menu-toggle .when-open { display: inline-flex; }
.menu-toggle[aria-expanded="true"] .when-closed, .menu-toggle[aria-expanded="false"] .when-open { display: none; }

/* With JavaScript the menu folds away behind the button; without it every link stays visible. */
.js .menu-toggle { display: inline-flex; }
.js .site-header:not(.open) .menu-toggle ~ .site-nav { display: none; }

/* The full menu (seven links and the Book button) only from the width where it fits on one line. */
@media (min-width: 1200px) {
  .site-header { position: sticky; top: 0; background: rgba(245, 245, 240, .94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  html { scroll-padding-top: 100px; }
  .header-inner { flex-wrap: nowrap; gap: 24px; }
  .brand { flex: none; }
  .js .menu-toggle { display: none; }
  .js .site-header:not(.open) .menu-toggle ~ .site-nav, .site-nav { display: block; width: auto; padding: 0; }
  .site-nav ul { flex-direction: row; align-items: center; gap: 4px; }
  .site-nav a:not(.btn) { min-height: 48px; padding: 0 12px; border: 0; font-size: 1.02rem; position: relative; }
  .site-nav a:not(.btn)::after {
    content: ""; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 2px; border-radius: 2px;
    background: var(--teal-700); transform: scaleX(0); transform-origin: left; transition: transform var(--t) var(--ease-out);
  }
  .site-nav a:not(.btn):hover::after, .site-nav a:not(.btn)[aria-current="page"]::after { transform: scaleX(1); }
  .site-nav a:not(.btn)[aria-current="page"]::before { display: none; }
  .site-nav .nav-cta { padding: 0 0 0 12px; }
  .site-nav .nav-cta .btn { width: auto; min-height: 48px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; max-width: 100%; overflow-wrap: anywhere;
  min-height: 54px; padding: 10px 26px; border-radius: 14px; border: 2px solid var(--teal-700);
  background: var(--teal-700); color: #fff; font: 700 1.08rem/1.2 var(--sans); text-align: center;
  text-decoration: none; cursor: pointer; touch-action: manipulation;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.btn:hover { background: var(--teal-900); border-color: var(--teal-900); color: #fff; text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.secondary { background: transparent; color: var(--teal-700); }
.btn.secondary:hover { background: var(--teal-100); color: var(--teal-900); border-color: var(--teal-900); }
.btn.light { background: #fff; border-color: #fff; color: var(--teal-900); }
.btn.light:hover { background: var(--sand-100); border-color: var(--sand-100); color: var(--teal-900); }
.btn.small { min-height: 46px; padding: 8px 18px; font-size: 1rem; }
.btn.danger { background: var(--danger); border-color: var(--danger); }
.btn.danger:hover { background: #8f1c13; border-color: #8f1c13; }
.btn[disabled] { opacity: .65; cursor: progress; }
.btn .i { width: 22px; height: 22px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.6em; }
@media (max-width: 520px) { .actions > .btn, .actions > form, .actions > form .btn { width: 100%; } }

/* ---------- Sections, waves and tints ---------- */
section { padding-block: var(--section); }
section.pt-0 { padding-top: 0; }
section.tight { padding-block: 40px; }
.tint-sage { background: var(--sage-100); }
.tint-sand { background: var(--sand-100); }
.wave { display: block; width: 100%; height: clamp(22px, 3.5vw, 52px); margin: 0; }
.wave path { fill: currentColor; }
.wave-sage { color: var(--sage-100); }
.wave-sand { color: var(--sand-100); }
.wave-footer { color: var(--sand-100); margin-top: var(--section); }
.wave.flip + .wave-footer { margin-top: clamp(28px, 4vw, 48px); }
.wave.flip { transform: scaleY(-1); }
.wave + section, section + .wave.flip { margin-top: -1px; }
.section-head { max-width: 680px; margin-bottom: 40px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .kicker { justify-content: center; }
.section-head .lead:last-child { margin-bottom: 0; }

/* Hero */
.hero { padding-block: clamp(36px, 6vw, 72px) clamp(48px, 7vw, 88px); }
.hero-grid { display: grid; gap: 36px; align-items: center; }
.hero h1 { font-size: clamp(2.6rem, 8vw, 4.4rem); line-height: 1.04; margin-bottom: .4em; }
.hero .lead { max-width: 34em; }
.hero-art { width: min(100%, 320px); margin-inline: auto; }
.hero-formats { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 14px; }
.hero-formats li { display: flex; align-items: center; gap: 14px; line-height: 1.35; }
.hero-formats strong { display: block; color: var(--teal-900); }
.hero-formats span span { color: var(--muted); }
.dot-icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--sage-100); color: var(--teal-700); }
.blob-photo { border-radius: var(--blob); overflow: hidden; box-shadow: var(--shadow-soft); background: var(--sage-100); }
.blob-photo img { width: 100%; }
/* Her photo: a blob crop with an offset sage fill and teal outline peeking out, like the offset-outline illustrations. */
.photo-frame { position: relative; isolation: isolate; width: calc(100% - 24px); margin: 0 auto; }
.photo-frame::before, .photo-frame::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--blob); pointer-events: none; }
.photo-frame::before { background: var(--sage-200); transform: translate(16px, 14px); }
.photo-frame::after { border: 2px solid var(--teal-900); transform: translate(-10px, -9px); }
.name-tag { position: absolute; left: -14px; bottom: 7%; display: flex; align-items: center; gap: 12px; max-width: calc(100% + 14px); padding: 12px 18px 12px 14px; background: var(--surface); border-radius: var(--r-md) var(--r-sm) var(--r-md) var(--r-sm); box-shadow: var(--shadow-soft); line-height: 1.25; }
.name-tag strong { display: block; font: 600 1.15rem/1.2 var(--serif); color: var(--teal-900); }
.name-tag strong + span { display: block; font-size: .95rem; color: var(--muted); }
.name-tag-mark { flex: none; width: 26px; height: 26px; border-radius: 2px 70% 2px 70%; background: var(--teal-700); }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.1fr .9fr; gap: 56px; }
  .hero-art { width: 100%; max-width: 480px; }
  .hero-formats { grid-template-columns: auto auto; justify-content: start; gap: 14px 40px; }
}
.hero-grid > * { min-width: 0; }

/* Home hero: her four highlights are on the first screen without scrolling.
   Phones: title line, headline, then the highlights; the intro, buttons and her photo follow.
   From 900px: the copy beside her photo, with the highlights along the foot. The photo is sized from the
   window's height, so the headline, Book button, photo and highlights all fit a short laptop screen. */
.home-hero { padding-top: 16px; }
.home-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.home-hero-grid > * { min-width: 0; }
.home-hero .kicker { margin-bottom: .6em; }
.home-hero h1 { margin-bottom: .32em; }
.hh-stats { margin-bottom: 28px; }
.hh-photo { margin-top: 44px; }
@media (min-width: 900px) {
  .home-hero { padding-top: clamp(20px, 3.5vh, 44px); }
  .home-hero-grid {
    grid-template-columns: minmax(0, 1fr) clamp(260px, calc(100vh - 310px), 400px);
    grid-template-columns: minmax(0, 1fr) clamp(260px, calc(100svh - 310px), 400px);
    grid-template-rows: auto auto auto 1fr auto auto;
    grid-template-areas: "kicker photo" "title photo" "lead photo" "actions photo" "stats stats" "formats formats";
    column-gap: clamp(40px, 5vw, 72px);
  }
  .hh-kicker { grid-area: kicker; }
  .hh-title { grid-area: title; font-size: clamp(2.6rem, 5.2vw, 4.4rem); }
  .hh-lead { grid-area: lead; }
  .hh-actions { grid-area: actions; align-self: start; margin-top: .4em; }
  .hh-stats { grid-area: stats; margin: 32px 0 0; }
  .hh-formats { grid-area: formats; }
  .hh-photo { grid-area: photo; align-self: start; width: 100%; max-width: none; margin: 4px 0 0; }
  /* A square crop from the top: her face, coat and folded arms. */
  .hh-photo .blob-photo { aspect-ratio: 1; }
  .hh-photo .blob-photo img { height: 100%; object-fit: cover; object-position: 50% 12%; }
}

/* Organic "leaf" icon badge */
.leaf-badge { display: grid; place-items: center; width: 64px; height: 64px; flex: none; border-radius: 6px 50% 6px 50%; background: var(--sage-100); color: var(--teal-700); }
.leaf-badge .i { width: 30px; height: 30px; }
.leaf-badge.large { width: 76px; height: 76px; background: #fff; }
.leaf-badge.large .i { width: 34px; height: 34px; }

/* Problem nudge (blood test) */
.nudge { padding-block: clamp(36px, 6vw, 64px); }
.nudge-grid { display: grid; gap: 20px; }
.nudge-head { display: flex; gap: 18px; align-items: center; }
.nudge-head h2 { margin: 0; }
@media (min-width: 860px) { .nudge-grid { grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; } .nudge-head { flex-direction: column; align-items: flex-start; } }

/* Pillars: a path of four leaves joined by a dashed line */
.path { list-style: none; padding: 0; margin: 0; display: grid; gap: 28px; }
.path li { display: grid; grid-template-columns: 64px 1fr; gap: 20px; position: relative; }
.path li::before { content: ""; position: absolute; left: 31px; top: 72px; bottom: -22px; border-left: 2px dashed var(--sage-400); }
.path li:last-child::before { display: none; }
.path h3 { margin: 6px 0 .3em; }
.path p { margin: 0; color: var(--muted); }
@media (min-width: 900px) {
  .path { grid-template-columns: repeat(4, 1fr); gap: 32px; }
  .path li { grid-template-columns: 1fr; gap: 16px; }
  .path li::before { left: 76px; right: -20px; top: 31px; bottom: auto; border-left: 0; border-top: 2px dashed var(--sage-400); }
}

/* Split: art + text */
.split { display: grid; gap: 36px; align-items: center; }
.split-art { width: min(100%, 300px); margin-inline: auto; }
@media (min-width: 900px) {
  .split { grid-template-columns: .85fr 1.15fr; gap: 64px; }
  .split-art { width: 100%; max-width: 440px; }
}
@media (max-width: 899px) { .split.reverse-mobile .split-art { order: 2; } }

/* Tick list */
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.ticks li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; }
.ticks li::before {
  content: ""; width: 28px; height: 28px; border-radius: 50%; margin-top: 1px;
  background: var(--teal-700) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.ticks.soft li::before { background-color: var(--sage-100); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B5F66' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E"); }

/* Topics: an editorial two-column list instead of cards */
.topics { list-style: none; padding: 0; margin: 0; display: grid; gap: 0 56px; }
.topics li { border-top: 1px solid var(--line-mid); padding: 22px 0 24px 36px; position: relative; }
.topics li::before { content: ""; position: absolute; left: 0; top: 31px; width: 18px; height: 18px; border-radius: 2px 70% 2px 70%; background: var(--teal-500); }
.topics h3 { margin-bottom: .25em; }
.topics p { margin: 0; color: var(--muted); }
@media (min-width: 760px) { .topics { grid-template-columns: 1fr 1fr; } }

/* Steps: numbered stones on a line */
.steps { list-style: none; padding: 0; margin: 0; counter-reset: step; display: grid; }
.steps li { counter-increment: step; position: relative; padding: 4px 0 36px 80px; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0; width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; background: var(--teal-700); color: #fff; font: 600 1.6rem/1 var(--serif);
}
.steps li::after { content: ""; position: absolute; left: 28px; top: 66px; bottom: 6px; border-left: 2px solid var(--sage-200); }
.steps li:last-child { padding-bottom: 0; }
.steps li:last-child::after { display: none; }
.steps h3 { margin: 12px 0 .3em; }
.steps p { margin: 0; color: var(--muted); }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .steps li { padding: 80px 0 0; }
  .steps li::after { left: 74px; right: -24px; top: 28px; bottom: auto; border-left: 0; border-top: 2px solid var(--sage-200); }
  .steps li:last-child::after { display: none; }
}

/* Testimonials (only rendered when real ones exist) */
.quotes { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.quote { margin: 0; padding: 28px; background: var(--surface); border-radius: var(--leaf); box-shadow: var(--shadow-soft); }
.quote blockquote { margin: 0 0 12px; font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--teal-900); }
.quote figcaption { color: var(--muted); }

/* Diet plan teaser */
.plan-teaser { display: grid; gap: 24px; align-items: center; padding: clamp(24px, 5vw, 48px); background: var(--surface); border-radius: var(--leaf); box-shadow: var(--shadow-soft); }
.plan-teaser-art { width: 150px; }
.plan-teaser h2 { font-size: clamp(1.6rem, 3.6vw, 2.1rem); }
@media (min-width: 760px) { .plan-teaser { grid-template-columns: 200px 1fr; gap: 40px; } .plan-teaser-art { width: 100%; } }

/* Closing quote + CTA */
.closing { text-align: center; color: #fff; background: var(--teal-900); border-radius: 120px 24px 120px 24px; padding: clamp(40px, 7vw, 80px) clamp(24px, 6vw, 80px); }
.closing-mark { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #CFE3DF; margin-bottom: 20px; }
.closing blockquote { margin: 0 auto 28px; max-width: 760px; }
.closing blockquote p { font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 3.6vw, 2.2rem); line-height: 1.3; color: #fff; }
.closing footer { color: #CFE3DF; }
.closing :focus-visible { outline-color: #fff; }
@media (max-width: 600px) { .closing { border-radius: 64px 16px 64px 16px; } }

/* ---------- Generic panels ---------- */
.panel { background: var(--surface); border-radius: var(--leaf); padding: clamp(22px, 4vw, 36px); box-shadow: var(--shadow-soft); }
.panel > :last-child { margin-bottom: 0; }
.panel.sage { background: var(--sage-100); box-shadow: none; }
.panel.sand { background: var(--sand-100); box-shadow: none; }
.panel h2 { font-size: clamp(1.45rem, 3vw, 1.8rem); }
.card { background: var(--surface); border-radius: var(--r-md); padding: 24px; box-shadow: var(--shadow-soft); }
.card > :last-child { margin-bottom: 0; }

/* Facts (about, admin) */
.facts { list-style: none; padding: 0; margin: 0 0 1.5em; display: grid; }
.facts li { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.facts li:last-child { border-bottom: 0; }
.facts strong { color: var(--teal-900); }
@media (min-width: 560px) { .facts li { grid-template-columns: 150px 1fr; gap: 16px; align-items: baseline; } }

/* Menu-style price rows (services, yoga classes) */
.menu-list { list-style: none; padding: 0; margin: 0; }
.menu-item { padding: 22px 0; border-bottom: 1px solid var(--line-mid); }
.menu-item:first-child { padding-top: 4px; }
.menu-item:last-child { border-bottom: 0; padding-bottom: 0; }
.menu-head { display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; }
.menu-head h3 { margin: 0; font-size: 1.3rem; }
.menu-head .leader { flex: 1 1 32px; border-bottom: 2px dotted var(--sage-400); align-self: center; min-width: 32px; margin-top: 8px; }
.menu-head .fee { font-family: var(--serif); font-weight: 600; font-size: 1.3rem; color: var(--teal-900); }
/* On a phone the fee goes under the name, so the dotted leader would lead nowhere. */
@media (max-width: 520px) { .menu-head { flex-direction: column; align-items: flex-start; gap: 2px; } .menu-head .leader { display: none; } }
.menu-when { display: flex; align-items: center; gap: 8px; color: var(--muted); margin: 6px 0 8px; }
.menu-when .i { width: 20px; height: 20px; color: var(--teal-700); }
.menu-item p:last-child { margin-bottom: 0; }
.menu-item > p:has(+ .includes) { margin-bottom: 10px; }
/* What a fee includes: small sage ticks */
.includes { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.includes li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; line-height: 1.45; }
.includes li::before {
  content: ""; width: 24px; height: 24px; border-radius: 50%; margin-top: 1px;
  background: var(--sage-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B5F66' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center / 16px no-repeat;
}

/* Tiles (in person / online) */
.tiles { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.tile { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; padding: 22px; background: var(--surface); border-radius: var(--leaf); }
.tile h3 { margin: 0 0 .15em; }
.tile p { margin: 0; color: var(--muted); }

/* Contact rows */
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-row { display: grid; grid-template-columns: 52px 1fr auto; gap: 16px; align-items: center; min-height: 80px; padding: 12px 8px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; border-radius: 12px; }
a.contact-row { transition: background-color var(--t-fast); }
a.contact-row:hover { background: var(--sage-50); color: var(--ink); }
.contact-row .leaf-badge { width: 52px; height: 52px; }
.contact-row .leaf-badge .i { width: 26px; height: 26px; }
.contact-row .label { display: block; font-size: 1rem; color: var(--muted); }
.contact-row .value { display: block; font-weight: 700; font-size: 1.15rem; color: var(--teal-900); overflow-wrap: anywhere; }
a.contact-row .value { color: var(--teal-700); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.contact-row > .i { color: var(--teal-700); }
.contact-list li:last-child .contact-row { border-bottom: 0; }
/* A long value (the email address) gets its own full-width line on narrow screens,
   so it only breaks at the <wbr> before the "@" and never mid-word. */
@media (max-width: 480px) {
  .contact-row.long { row-gap: 6px; }
  .contact-row.long > span:not(.leaf-badge) { display: contents; }
  .contact-row.long > .leaf-badge { grid-area: 1 / 1; }
  .contact-row.long .label { grid-area: 1 / 2; }
  .contact-row.long > .i { grid-area: 1 / 3; }
  .contact-row.long .value { grid-area: 2 / 1 / 3 / -1; }
}
@media (max-width: 359px) { .contact-row.long .value { font-size: 1rem; } }
.email-plain { margin: 14px 0 0; }

/* Page header (inner pages) */
.page-head { padding-block: clamp(36px, 6vw, 72px) clamp(28px, 4vw, 44px); }
.page-head .lead { max-width: 40em; }
.page-head + section { padding-top: 0; }

/* Two-column page body */
.columns { display: grid; gap: 28px; align-items: start; }
@media (min-width: 900px) { .columns { grid-template-columns: 1fr 1fr; gap: 40px; } .columns.wide-left { grid-template-columns: 1.4fr 1fr; } }

/* Notices */
.notice { border-radius: var(--r-md); padding: 18px 20px; background: var(--sand-100); color: var(--ink); }
.notice:has(> .i) { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.notice > .i { color: var(--teal-700); margin-top: 2px; }
.notice p { margin: 0; }
.alert { border-radius: var(--r-md); padding: 16px 18px; background: var(--danger-100); color: #7a1a12; border-left: 6px solid var(--danger); }
.alert:has(> .i) { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.alert > .i { color: var(--danger); margin-top: 2px; }
.alert p { margin: 0; }

/* ---------- Yoga page ---------- */
.limbs { list-style: none; padding: 0; margin: 0 0 1.5em; display: flex; flex-wrap: wrap; gap: 10px; }
.limbs li { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 18px 6px 8px; border-radius: 999px; background: var(--surface); color: var(--teal-900); font-weight: 600; }
.limbs .dot-icon { width: 36px; height: 36px; }
.limbs .i { width: 20px; height: 20px; }

.benefits { list-style: none; padding: 0; margin: 0; display: grid; gap: 28px 48px; }
.benefits li { display: grid; grid-template-columns: 56px 1fr; gap: 18px; }
.benefits .leaf-badge { width: 56px; height: 56px; background: var(--surface); }
.benefits .leaf-badge .i { width: 26px; height: 26px; }
.benefits h3 { margin: 4px 0 .3em; }
.benefits p { margin: 0; color: var(--muted); }
@media (min-width: 760px) { .benefits { grid-template-columns: 1fr 1fr; } }

.routine { list-style: none; padding: 0; margin: 0; counter-reset: pose; max-width: 820px; }
.routine li { counter-increment: pose; position: relative; padding: 0 0 28px 72px; }
.routine li::before {
  content: counter(pose); position: absolute; left: 0; top: 0; width: 48px; height: 48px;
  display: grid; place-items: center; border-radius: 6px 50% 6px 50%; background: var(--teal-700); color: #fff; font: 600 1.25rem/1 var(--serif);
}
.routine li::after { content: ""; position: absolute; left: 23px; top: 56px; bottom: 6px; border-left: 2px dashed var(--sage-400); }
.routine li:last-child::after { display: none; }
.routine h3 { margin: 8px 0 .25em; }
.routine h3 span { display: block; font-family: var(--sans); font-size: 1rem; font-weight: 600; color: var(--muted); margin-top: 2px; }
.routine p { margin: 0; }
.routine-note { display: flex; gap: 12px; align-items: flex-start; max-width: 820px; color: var(--muted); }
.routine-note .i { color: var(--teal-700); margin-top: 3px; }

.tips { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.tips li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; }
.tips li::before {
  content: ""; width: 28px; height: 28px; border-radius: 50%; margin-top: 1px;
  background: var(--sage-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B5F66' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.tips li.caution { grid-column: 1 / -1; background: var(--surface); border-radius: var(--r-md); padding: 16px; border-left: 6px solid var(--teal-700); }
.tips li.caution::before { background: var(--teal-700) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17v.5'/%3E%3C/svg%3E") center / 18px no-repeat; }

.disclaimer { display: flex; gap: 12px; align-items: flex-start; color: var(--muted); font-size: 1rem; margin-top: 36px; }
.disclaimer .i { color: var(--teal-700); margin-top: 2px; }

/* ---------- Photos of her practice ---------- */
/* Leaf-cornered photos never crop a pose: each is drawn at its own 4:3 or 3:4 shape. */
.leaf-photo { border-radius: var(--leaf); overflow: hidden; background: var(--sage-100); box-shadow: var(--shadow-soft); }
.leaf-photo img { width: 100%; height: auto; object-fit: cover; }
/* Phones: keep the home yoga-band photo at 240px so the 480px-wide file covers 2x screens. */
@media (max-width: 899px) { .split-art.yoga-figure { width: min(100%, 264px); } }
/* The same offset sage fill and teal outline as her portrait, on leaf corners. */
.photo-frame.leaf::before, .photo-frame.leaf::after { border-radius: var(--leaf); }
.photo-frame.on-sage::before { background: var(--bg); }
.yoga-figure { margin-block: 0; }
.photo-caption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 26px 0 0; padding-left: 26px; position: relative; line-height: 1.35; }
.photo-caption::before { content: ""; position: absolute; left: 0; top: .3em; width: 16px; height: 16px; border-radius: 2px 70% 2px 70%; background: var(--teal-700); }
.photo-caption strong { font: italic 500 1.15rem/1.35 var(--serif); color: var(--teal-900); }
.photo-caption span { color: var(--muted); }
.hero-art.wide { width: 100%; max-width: 540px; }

/* A routine step that has a photo of the pose */
.step-photo { max-width: 340px; margin-top: 16px; border-radius: var(--r-lg) var(--r-sm) var(--r-lg) var(--r-sm); }

/* Yoga hero slideshow: a scroll-snap strip of 4:3 stages, one pose per slide. Portrait photos sit whole
   on a sage mat inside the stage, so no pose is cropped. Without JavaScript it is a swipeable strip with a hint;
   slideshow.js adds the controls in the hint's place, so nothing moves when they appear. */
.slideshow { min-width: 0; }
.ys-viewport { position: relative; isolation: isolate; width: calc(100% - 24px); margin: 0 auto; }
/* The offset sage fill and teal outline of her photos, drawn once behind the stage. */
.ys-viewport::before, .ys-viewport::after { content: ""; position: absolute; top: 0; left: 0; right: 0; aspect-ratio: 4 / 3; z-index: -1; border-radius: var(--leaf); pointer-events: none; }
.ys-viewport::before { background: var(--sage-200); transform: translate(16px, 14px); }
.ys-viewport::after { border: 2px solid var(--teal-900); transform: translate(-10px, -9px); }
.ys-track { position: relative; display: flex; gap: 24px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--sage-400) transparent; }
.slideshow.is-ready .ys-track { scrollbar-width: none; }
.slideshow.is-ready .ys-track::-webkit-scrollbar { display: none; }
.ys-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.ys-slide figure { margin: 0; }
.ys-stage { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--leaf); background: var(--sage-100); }
.ys-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ys-slide .photo-caption { margin: 24px 0 2px; }
.ys-bar { display: grid; margin-top: 14px; padding-left: 12px; }
.ys-bar > * { grid-area: 1 / 1; }
.ys-hint { display: flex; align-items: center; gap: 10px; min-height: 48px; margin: 0; font-size: 1rem; color: var(--muted); }
.ys-hint .i { width: 20px; height: 20px; color: var(--teal-700); }
/* Previous, the counter and next stay together, with Pause/Play at the far end. When the column is too narrow for one
   row (a 320px phone), Pause/Play drops to a line of its own instead of pushing the page sideways. The counter and the
   toggle each keep one width whatever they say, so the row never rewraps between slides or when Pause is pressed. */
.ys-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; visibility: hidden; }
.ys-steps { display: flex; align-items: center; gap: 10px; }
.slideshow.is-ready .ys-hint { visibility: hidden; }
.slideshow.is-ready .ys-controls { visibility: visible; }
.ys-btn {
  display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; flex: none;
  border: 2px solid var(--teal-700); border-radius: 50%; background: var(--surface); color: var(--teal-700); cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.ys-btn:hover { background: var(--teal-100); border-color: var(--teal-900); color: var(--teal-900); }
.ys-btn[hidden] { display: none; }
.ys-btn .i { width: 22px; height: 22px; }
/* 7ch holds "10 / 10" on one line, so Next doesn't shift when the count reaches 10. */
.ys-count { margin: 0; min-width: 7ch; white-space: nowrap; text-align: center; font: 600 1.15rem/1 var(--serif); color: var(--teal-900); font-variant-numeric: lining-nums tabular-nums; }
.ys-toggle { width: auto; padding: 0 18px 0 14px; border-radius: 14px; font: 700 1rem/1 var(--sans); }
/* Both labels share the button's one grid cell and the idle one is only hidden, so Play is as wide as Pause. */
.ys-toggle > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; }
.ys-toggle .ys-when-paused, .ys-toggle[data-state="paused"] .ys-when-playing { visibility: hidden; }
.ys-toggle[data-state="paused"] .ys-when-paused { visibility: inherit; }
/* Phones: closer spacing keeps the controls on one row down to about 350px wide. */
@media (max-width: 389px) {
  .ys-controls { column-gap: 6px; }
  .ys-steps { gap: 6px; }
  .ys-toggle { padding: 0 12px 0 10px; }
}

/* Yoga: the two stretches without a pose name, small beside her teaching */
.mini-photos { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 16px; }
.mini-photos figure { margin: 0; }
.mini-photos .leaf-photo { border-radius: var(--r-lg) var(--r-sm) var(--r-lg) var(--r-sm); }
.mini-photos figcaption { margin-top: 8px; line-height: 1.3; }
.mini-photos figcaption strong { font: 600 1rem/1.3 var(--serif); color: var(--teal-900); }

/* About: a yoga photo tucked into the corner of her portrait */
.hero-art.with-inset { padding-bottom: 40px; }
.inset-photo { position: absolute; left: -16px; bottom: -40px; width: 58%; border: 5px solid var(--surface); border-radius: var(--r-lg) var(--r-sm) var(--r-lg) var(--r-sm); overflow: hidden; background: var(--sage-100); box-shadow: var(--shadow-soft); }
.inset-photo img { width: 100%; height: auto; object-fit: cover; }

/* About: certificate images (only shown once she adds some) */
.certs { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.certs figure { margin: 0; }
.cert-image { display: block; aspect-ratio: 4 / 3; padding: 10px; background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-soft); }
.cert-image img { width: 100%; height: 100%; object-fit: contain; }
.certs figcaption { margin-top: 12px; line-height: 1.35; }
.certs figcaption strong { display: block; font: 600 1.1rem/1.3 var(--serif); color: var(--teal-900); }
.certs figcaption span { display: block; color: var(--muted); }

/* Contact: map and reviews links under the address */
.address { font-size: 1.15rem; }
.visit-links { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 4px; }
.visit-links a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; }
.visit-links .i { width: 22px; height: 22px; color: var(--teal-700); }

/* ---------- About page ---------- */
.portrait { width: min(100%, 340px); margin-inline: auto; aspect-ratio: 4 / 5; display: grid; place-items: center; background: var(--sage-100); color: var(--teal-700); border-radius: var(--blob); overflow: hidden; }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait .i { width: 96px; height: 96px; stroke-width: 1.2; }

/* ---------- Services: booking ---------- */
/* How to book, then what you can book, then where, each across the page. The Cal.com calendar needs the width:
   in a frame narrower than about 770px it switches to its phone layout and lists every time below the calendar,
   while at full width the times sit beside it in their own scrolling column. */
.book-layout { display: grid; gap: 28px; align-items: start; }
.book-layout > * { min-width: 0; }
.bookable-groups { display: grid; gap: 28px; }
@media (min-width: 900px) {
  .book-layout { gap: 40px; }
  .bookable-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
}
.bookables h2, .book-title, .where-title { font-size: clamp(1.45rem, 3vw, 1.8rem); }
.bookables h3 { font-size: 1.3rem; margin: 0 0 4px; }
/* Each row is one link (name, how long, fee) to the page that explains it */
.fee-list { list-style: none; margin: 0; padding: 0; }
.fee-list li { border-bottom: 1px solid var(--line-mid); }
.fee-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px 12px; min-height: 64px; margin: 0 -8px; padding: 10px 8px; border-radius: 12px; color: var(--ink); text-decoration: none; transition: background-color var(--t-fast); }
.fee-row:hover { background: var(--sage-50); color: var(--ink); }
.fee-name { display: block; font-weight: 700; line-height: 1.35; color: var(--teal-700); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.fee-row:hover .fee-name { color: var(--teal-900); text-decoration-thickness: 2.5px; }
.fee-when { display: block; font-size: 1rem; color: var(--muted); }
.fee-amount { font: 600 1.25rem/1.3 var(--serif); color: var(--teal-900); white-space: nowrap; font-variant-numeric: lining-nums; }
.fee-row > .i { width: 20px; height: 20px; color: var(--teal-700); }
.book-panel .leaf-badge { margin-bottom: 16px; }
.book-main .booked-note { margin: 24px 0 0; }
.cal-embed { min-height: 680px; background: var(--surface); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-soft); }
.cal-noscript { margin: 0; padding: 24px; }
.cal-help { margin: 12px 0 0; }
.where .tiles { list-style: none; margin: 0; padding: 0; }
.where .tile { align-items: start; }
.where .tile p + p { margin-top: 8px; }
.where-hours { display: flex; gap: 8px; align-items: flex-start; }
.where-hours .i { width: 20px; height: 20px; margin-top: 3px; color: var(--teal-700); }
.where-map a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }

/* ---------- Diet page ---------- */
.formats-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.formats-list li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: center; line-height: 1.4; }
.formats-list .leaf-badge { width: 56px; height: 56px; background: #fff; }
.formats-list .leaf-badge .i { width: 26px; height: 26px; }
.formats-list strong { display: block; font: 600 1.15rem/1.3 var(--serif); color: var(--teal-900); }
.formats-list span span { color: var(--muted); }
.closing h2 { color: #fff; font-size: clamp(1.7rem, 4vw, 2.4rem); }
.closing > p { max-width: 36em; margin-inline: auto; color: #CFE3DF; }
.closing .actions { justify-content: center; }
.btn.outline-light { background: transparent; border-color: #fff; color: #fff; }
.btn.outline-light:hover { background: rgba(255, 255, 255, .14); border-color: #fff; color: #fff; }

/* ---------- Forms ---------- */
form.stack { display: grid; gap: 28px; counter-reset: fs; }
fieldset { counter-increment: fs; border: 0; margin: 0; padding: clamp(20px, 4.5vw, 34px); background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-soft); min-width: 0; }
legend { float: left; width: 100%; display: flex; align-items: center; gap: 14px; padding: 0; margin: 0 0 24px; font: 600 1.4rem/1.25 var(--serif); color: var(--teal-900); }
legend::before {
  content: counter(fs); flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 6px 50% 6px 50%; background: var(--sage-100); color: var(--teal-700); font: 700 1.15rem/1 var(--sans);
}
legend + * { clear: both; }
legend .muted { font-family: var(--sans); font-size: 1rem; font-weight: 400; }
.field { display: grid; gap: 8px; margin-bottom: 24px; min-width: 0; }
.field:last-child { margin-bottom: 0; }
.field > label, .field > .label { font-weight: 700; font-size: 1.08rem; color: var(--ink); }
.req { color: var(--danger); font-weight: 700; }
.hint { font-size: 1rem; color: var(--muted); margin: 0; }
input[type=text], input[type=tel], input[type=email], input[type=number], input[type=password], select, textarea {
  width: 100%; min-height: 54px; font: 400 1.125rem/1.4 var(--sans); color: var(--ink); background: #fff;
  border: 2px solid var(--line-strong); border-radius: 12px; padding: 12px 14px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B5F66' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center / 20px no-repeat; }
textarea { min-height: 130px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--teal-700); outline-offset: 2px; border-color: var(--teal-700); }
.row { display: grid; gap: 0 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.row > .field { margin-bottom: 24px; }
.inline-inputs { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.inline-inputs input { width: 96px; }
.inline-inputs span { color: var(--muted); font-weight: 600; }
.inline-inputs .unit { display: inline-flex; align-items: center; gap: 8px; margin-right: 8px; }
.inline-inputs .or { margin-right: 4px; }
.choices { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.choice {
  display: flex; gap: 12px; align-items: center; min-height: 56px; padding: 12px 16px;
  border: 2px solid var(--line-mid); border-radius: 14px; background: #fff; cursor: pointer; font-weight: 400; line-height: 1.35;
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.choice:hover { border-color: var(--teal-500); }
.choice input { margin: 0; accent-color: var(--teal-700); width: 22px; height: 22px; flex: none; cursor: pointer; }
.choice:has(input:checked) { border-color: var(--teal-700); background: var(--teal-100); font-weight: 700; color: var(--teal-900); }
.choice:has(input:focus-visible) { outline: 3px solid var(--teal-700); outline-offset: 2px; }
.choice input:focus-visible { outline: none; }
.consent { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--sage-50); border: 2px solid transparent; cursor: pointer; }
.field > label.consent { font-weight: 400; font-size: 1.05rem; }
.has-error .consent { border-color: var(--danger); background: var(--danger-100); }
.consent:has(input:focus-visible) { outline: 3px solid var(--teal-700); outline-offset: 2px; }
.consent input { margin: 2px 0 0; width: 24px; height: 24px; flex: none; accent-color: var(--teal-700); cursor: pointer; }
.error { display: flex; gap: 8px; align-items: flex-start; color: var(--danger); font-size: 1rem; font-weight: 700; margin: 0; }
.error::before { content: "!"; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--danger); color: #fff; font: 700 .85rem/22px var(--sans); text-align: center; }
.has-error input[type=text], .has-error input[type=tel], .has-error input[type=email], .has-error input[type=number], .has-error select, .has-error textarea { border-color: var(--danger); }
.has-error .choice { border-color: #E3A39B; }
.error-summary { margin-bottom: 28px; }
.error-summary h2 { font-family: var(--sans); font-size: 1.15rem; font-weight: 700; color: #7a1a12; margin: 0 0 6px; }
.error-summary ul { margin: 0; padding-left: 1.1em; }
.error-summary li { margin: 4px 0; }
.error-summary a { color: #7a1a12; font-weight: 600; }
.error-summary:focus { outline: 3px solid var(--danger); outline-offset: 3px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.submit-row { display: flex; gap: 12px 20px; align-items: center; flex-wrap: wrap; }
.submit-row .btn { min-width: 220px; }
@media (max-width: 520px) { .submit-row .btn { width: 100%; } }

/* ---------- Diet plan result ---------- */
.stats { display: grid; margin: 28px 0 40px; background: var(--sage-100); border-radius: var(--leaf); padding: 6px 24px; }
.stat { padding: 18px 0; border-bottom: 1px solid var(--sage-200); }
.stat:last-child { border-bottom: 0; }
.stat .label { font-weight: 700; color: var(--muted); font-size: 1rem; }
.stat .value { font: 600 clamp(2rem, 6vw, 2.6rem)/1.15 var(--serif); color: var(--teal-900); font-variant-numeric: lining-nums; }
.stat .sub { font-size: 1rem; color: var(--muted); }
@media (min-width: 800px) {
  .stats { grid-template-columns: repeat(3, 1fr); padding: 28px 8px; }
  .stat { border-bottom: 0; border-left: 1px solid var(--sage-200); padding: 4px 24px; }
  .stat:first-child { border-left: 0; }
}
.referral { display: grid; gap: 16px; padding: clamp(22px, 4vw, 36px); background: var(--sand-100); border-radius: var(--leaf); }
.referral .leaf-badge { background: #fff; }
.referral h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); }
@media (min-width: 700px) { .referral { grid-template-columns: auto 1fr; gap: 24px; } }

.meals { display: grid; margin: 8px 0 44px; }
.meal { position: relative; display: grid; gap: 10px; padding: 0 0 30px 34px; margin-left: 9px; border-left: 2px solid var(--sage-200); break-inside: avoid; }
.meal:last-child { padding-bottom: 4px; }
.meal::before { content: ""; position: absolute; left: -10px; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--bg); border: 4px solid var(--teal-700); }
.meal h3 { font-size: 1.25rem; margin: 0; }
.meal .time { font-size: 1rem; color: var(--muted); font-weight: 600; }
.meal .pick { display: inline-block; font-weight: 700; font-size: .95rem; color: var(--teal-900); background: var(--teal-100); border-radius: 999px; padding: 2px 12px; margin-bottom: 8px; }
.meal ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.meal li { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; }
@media (min-width: 720px) { .meal { grid-template-columns: 180px 1fr; gap: 24px; } }

/* ---------- Simple pages ---------- */
.prose h2 { font-size: clamp(1.4rem, 3vw, 1.75rem); margin-top: 1.6em; }
.prose h2::before { content: ""; display: inline-block; width: 14px; height: 14px; border-radius: 2px 70% 2px 70%; background: var(--sage-400); margin-right: 12px; vertical-align: .12em; }
.center-block { text-align: center; }
.center-block .actions { justify-content: center; }
.center-art { width: min(220px, 60%); margin: 0 auto 24px; }

/* ---------- Page pieces ---------- */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.with-icon { display: flex; align-items: center; gap: 14px; }
.with-icon .leaf-badge { width: 48px; height: 48px; }
.with-icon .leaf-badge .i { width: 24px; height: 24px; }
.panel .with-icon { margin-bottom: 18px; }
.panel.sand .leaf-badge, .panel.sage .leaf-badge { background: #fff; }
.more-link { display: flex; align-items: center; gap: 8px; margin: 22px 0 0; font-weight: 700; }
.more-link .i { width: 20px; height: 20px; color: var(--teal-700); }
.more-link a, .back-link a { display: inline-flex; align-items: center; min-height: 44px; }
.back-link { margin: 0 0 8px; font-weight: 700; }
.sticky-aside { display: grid; gap: 20px; }
.food-yoga h3 { margin-bottom: .4em; }
.booked-note { margin-bottom: 28px; }
.columns > .panel > .leaf-badge:first-child { margin-bottom: 16px; }
.tiles.stacked { grid-template-columns: 1fr; }
.tile.sage { background: var(--sage-100); }
.tile.sage .leaf-badge { background: #fff; }
.choices.one-col { grid-template-columns: 1fr; }
.result-wrap { max-width: 960px; }
.ticks.soft-white li::before { background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B5F66' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E"); }
.note-line { margin: 18px 0 0; }
.panel h3 { margin-bottom: .6em; }
html:not(.js) [data-print] { display: none; }

/* About: qualifications at a glance */
.glance { list-style: none; padding: 0; margin: 0; display: grid; gap: 28px 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.glance li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; }
.glance .leaf-badge { width: 56px; height: 56px; background: #fff; }
.glance .leaf-badge .i { width: 26px; height: 26px; }
.glance strong { display: block; font-family: var(--serif); font-size: 1.2rem; font-weight: 600; color: var(--teal-900); margin-bottom: 2px; }
.about-grid .hero-copy h1 { font-size: clamp(2.4rem, 7vw, 3.8rem); }
.about-title { color: var(--teal-900); font-family: var(--serif); font-style: italic; }

/* Home: her highlights, with her Google rating. Phones and tablets: a 2 x 2 grid with the rating along the foot.
   From 900px one row of four; from 1100px the rating joins the row as a fifth cell, which keeps the card
   short enough for the whole first screen to fit. */
.highlights-card { padding: 2px 16px; background: var(--surface); border-radius: var(--leaf); box-shadow: var(--shadow-soft); }
.highlights { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.highlights li { display: grid; gap: 2px; align-content: start; padding: 12px 12px 12px 0; }
.highlights li:nth-child(even) { padding: 12px 0 12px 12px; border-left: 1px solid var(--line); }
.highlights li:nth-child(n+3) { border-top: 1px solid var(--line); }
.hl-figure { font: 600 1.55rem/1.15 var(--serif); color: var(--teal-900); font-variant-numeric: lining-nums; }
.hl-label { font-size: 1rem; line-height: 1.35; color: var(--muted); }
.rating-row { display: flex; justify-content: center; margin: 0; padding: 8px 0 10px; border-top: 1px solid var(--line); }
@media (min-width: 900px) {
  .highlights-card { padding: 20px 8px; }
  .highlights { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .highlights li, .highlights li:nth-child(even), .highlights li:nth-child(n+3) { padding: 2px 20px; gap: 6px; border-top: 0; border-left: 1px solid var(--line); }
  .highlights li:first-child { border-left: 0; }
  .hl-figure { font-size: 2.1rem; }
  .hl-label { font-size: 1.0625rem; line-height: 1.4; }
  .rating-row { margin: 18px 20px 0; padding: 12px 0 0; }
}
@media (min-width: 1100px) {
  .highlights-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .rating-row { align-self: stretch; align-items: center; margin: 0; padding: 0 8px 0 16px; border-top: 0; border-left: 1px solid var(--line); }
}

/* Google rating: a big figure, five stars, and the review count as the link text */
.g-rating { display: inline-grid; grid-template-columns: auto auto auto; align-items: center; gap: 4px 14px; min-height: 56px; padding: 6px 12px; border-radius: var(--r-md); text-decoration: none; color: var(--teal-900); }
.g-rating:hover { background: var(--sage-50); color: var(--teal-900); }
.g-score { font: 600 2.2rem/1 var(--serif); color: var(--teal-900); font-variant-numeric: lining-nums; }
.g-body { display: grid; gap: 4px; line-height: 1.3; }
.g-stars { width: 110px; height: auto; color: var(--teal-700); }
.g-stars path { fill: currentColor; }
.g-stars path.empty { fill: none; stroke: currentColor; stroke-width: 1.6; }
.g-count { font-weight: 700; color: var(--teal-700); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.g-rating:hover .g-count { color: var(--teal-900); text-decoration-thickness: 2.5px; }
.g-rating > .i { color: var(--teal-700); }

/* Home: meet Sheetal */
.meet { display: grid; gap: 32px; max-width: 940px; margin-inline: auto; }
.meet-photo { width: 168px; height: 168px; overflow: hidden; border-radius: 6px 50% 6px 50%; background: var(--sage-100); box-shadow: 14px 12px 0 var(--sage-200); }
/* Zoomed to her face: twice the frame's width, shifted left by half the frame and up by about a quarter. */
.meet-photo img { width: 200%; max-width: none; height: auto; margin: -27% 0 0 -50%; }
.meet-copy h2 { margin-bottom: .4em; }
.meet-quote { margin: 0 0 18px; }
.meet-quote p { margin: 0; font: italic 500 clamp(1.25rem, 2.8vw, 1.55rem)/1.45 var(--serif); color: var(--teal-900); }
.meet-by { margin: 0; line-height: 1.35; }
.meet-by strong { display: block; color: var(--teal-900); }
.meet-by span { color: var(--muted); }
.meet .actions { margin-top: 24px; }
@media (min-width: 760px) {
  .meet { grid-template-columns: 210px 1fr; gap: 56px; align-items: center; }
  .meet-photo { width: 210px; height: 210px; box-shadow: 18px 16px 0 var(--sage-200); }
}

/* Small leaf bullets for achievements */
.leaf-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.leaf-list li { position: relative; padding-left: 26px; }
.leaf-list li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 12px; height: 12px; border-radius: 2px 70% 2px 70%; background: var(--teal-500); }

/* About: experience timeline and education list */
.cv .section-head { margin-bottom: 28px; }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline > li { position: relative; padding: 0 0 36px 44px; }
.timeline > li::before { content: ""; position: absolute; left: 0; top: 6px; width: 22px; height: 22px; border-radius: 2px 70% 2px 70%; background: var(--teal-700); }
.timeline > li::after { content: ""; position: absolute; left: 10px; top: 38px; bottom: 8px; border-left: 2px dashed var(--sage-400); }
.timeline > li:last-child { padding-bottom: 0; }
.timeline > li:last-child::after { display: none; }
.timeline h3 { margin: 0 0 .15em; }
.timeline-place { margin: 0 0 4px; font-weight: 700; color: var(--teal-900); }
.timeline-when { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--muted); }
.timeline-when .i { width: 20px; height: 20px; color: var(--teal-700); }
.edu-list { list-style: none; padding: 0; margin: 0; }
.edu-list li { display: grid; grid-template-columns: 3.6rem 1fr; gap: 14px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--sand-300); }
.edu-list li:first-child { padding-top: 0; }
.edu-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.edu-year { font: 600 1.15rem var(--serif); color: var(--teal-700); font-variant-numeric: lining-nums; }
.edu-list strong { display: block; color: var(--teal-900); line-height: 1.35; }
.edu-place { display: block; color: var(--muted); }
@media (min-width: 760px) { .plan-teaser.about-cta { grid-template-columns: auto 1fr; } }
.about-cta .actions { margin-top: 1em; }
.about-cta .leaf-badge.large { background: var(--sage-100); }   /* the card is white, so the usual white badge vanishes */

/* Yoga: her training and teaching */
.teacher-head { font-size: 1.3rem; margin: 0 0 18px; }
.teacher { list-style: none; padding: 0; margin: 0; display: grid; gap: 26px; }
.teacher > li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; }
.teacher .leaf-badge { width: 56px; height: 56px; background: #fff; }
.teacher .leaf-badge .i { width: 26px; height: 26px; }
.teacher strong { display: block; font: 600 1.15rem/1.3 var(--serif); color: var(--teal-900); margin-top: 2px; }
.teacher-when { display: block; color: var(--muted); margin-bottom: 8px; }

/* Diet plan result: her speciality, when it matches */
.speciality { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--surface); border-radius: var(--r-md); }
.speciality .i { color: var(--teal-700); margin-top: 2px; }
.speciality strong { color: var(--teal-900); }

/* Diet plan form header */
.plan-head-grid { display: grid; gap: 20px; align-items: center; }
.plan-head-art { width: 120px; }
@media (min-width: 700px) { .plan-head-grid { grid-template-columns: 1fr 170px; gap: 32px; } .plan-head-art { width: 100%; } }
@media (max-width: 699px) { .plan-head-art { order: -1; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--sand-100); color: var(--ink); padding: 24px 0 32px; font-size: 1.05rem; }
.site-footer a { color: var(--teal-900); }
.footer-grid { display: grid; gap: 32px; }
.footer-name { display: flex; align-items: center; gap: 12px; font: 600 1.35rem var(--serif); color: var(--teal-900); }
.footer-name .brand-mark { width: 40px; height: 40px; }
.footer-about > p:not(.footer-name) { color: var(--muted); max-width: 30em; }
.site-footer .footer-facts { display: grid; gap: 12px; margin-top: 4px; }
.footer-facts li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.45; max-width: 30em; }
.footer-facts li > .i { margin-top: 3px; }
.footer-facts li a { min-height: 44px; }
.site-footer h2 { font: 700 1.05rem var(--sans); color: var(--teal-900); margin-bottom: 8px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; overflow-wrap: anywhere; }
.site-footer li .i { width: 20px; height: 20px; color: var(--teal-700); }
.footer-langs { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0 0; color: var(--muted); line-height: 1.45; }
.footer-langs .i { width: 20px; height: 20px; color: var(--teal-700); margin-top: 3px; }
.footer-bottom { border-top: 1px solid var(--sand-300); margin-top: 32px; padding-top: 16px; font-size: 1rem; color: var(--muted); }
.footer-bottom a { display: inline-block; padding: 10px 0; }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; gap: 48px; } }

/* "Book" bar, shown on the main content pages wherever the header's Book button is folded into the menu
   (below 1200px). On tablets and small laptops the button keeps a sensible width instead of spanning the screen. */
.cta-bar { display: none; }
@media (max-width: 1199px) {
  .has-cta-bar { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  html:has(.has-cta-bar) { scroll-padding-bottom: 100px; }
  .cta-bar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    background: rgba(245, 245, 240, .97); border-top: 1px solid var(--line); box-shadow: 0 -10px 24px -16px rgba(10, 58, 64, .35);
  }
  .cta-bar .btn { width: 100%; }
  .cta-bar { transition: transform var(--t) var(--ease-out), visibility var(--t); }
  .cta-bar.is-hidden { transform: translateY(110%); visibility: hidden; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .cta-bar { text-align: center; }
  .cta-bar .btn { width: auto; min-width: 340px; }
}

/* ---------- Motion (CSS only; nothing moves when the user asks for less motion) ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes grow { from { transform: scale(.95) rotate(-2deg); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  /* Nothing is hidden behind a load animation: the illustration only settles into place (transform, no fade). */
  .hero-art, .center-art { animation: grow .9s var(--ease-out) both; }
  /* Scroll reveals are tied to scroll position, not a clock, and only where the browser supports it. */
  @supports (animation-timeline: view()) {
    .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
}

/* ---------- Admin ---------- */
.site-nav.admin-nav { display: block; width: auto; padding: 0; }
.admin-nav ul { flex-direction: row; align-items: center; gap: 4px; flex-wrap: wrap; }
.site-nav.admin-nav a:not(.btn) { border: 0; min-height: 46px; padding: 0 10px; font-size: 1rem; }
.site-nav.admin-nav a:not(.btn)[aria-current="page"]::before { display: none; }
.admin-nav li:last-child { margin-left: 6px; }
@media (max-width: 700px) { .site-nav.admin-nav { width: 100%; padding-bottom: 8px; } .page-admin .brand { flex: 1 1 auto; } }
.page-admin main { min-height: 50vh; }
.danger-badge { background: var(--danger-100); color: var(--danger); margin-bottom: 16px; }
/* On a phone the forms table becomes one card per form */
@media (max-width: 700px) {
  .stack-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .stack-table, .stack-table tbody, .stack-table tr, .stack-table td { display: block; width: 100%; }
  .stack-table tr { padding: 14px 16px; border-bottom: 1px solid var(--line-mid); }
  .stack-table tr:last-child { border-bottom: 0; }
  .stack-table td { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 4px 0; border: 0; white-space: normal !important; }
  .stack-table td::before { content: attr(data-label); font-size: .9rem; font-weight: 700; color: var(--muted); }
  .stack-table td > * { justify-self: start; }
}
.admin-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.admin-bar .actions form { margin: 0; }
.tabs { display: inline-flex; gap: 4px; flex-wrap: wrap; padding: 4px; background: var(--sage-100); border-radius: 14px; }
.tabs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 10px; text-decoration: none; color: var(--teal-900); font-weight: 600; font-size: 1rem; }
.tabs a:hover { background: var(--sage-200); }
.tabs a[aria-current="true"] { background: var(--teal-700); color: #fff; }
.count { display: inline-block; min-width: 1.6em; padding: 0 .45em; border-radius: 999px; background: var(--sand-300); color: var(--teal-900); font-size: .85rem; font-weight: 700; text-align: center; margin-left: 6px; }
.table-wrap { overflow-x: auto; background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-soft); }
table { width: 100%; border-collapse: collapse; font-size: 1rem; }
th, td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .9rem; color: var(--muted); font-weight: 700; background: var(--sage-50); }
tr:last-child td { border-bottom: 0; }
td a { font-weight: 700; }
.pill { display: inline-block; padding: 2px 12px; border-radius: 999px; font-size: .9rem; font-weight: 700; background: var(--sage-100); color: var(--teal-900); white-space: nowrap; }
.pill.new { background: var(--sand-300); color: #4a3510; }
dl.answers { display: grid; grid-template-columns: minmax(160px, 260px) 1fr; margin: 0; }
dl.answers dt, dl.answers dd { padding: 12px 0; border-bottom: 1px solid var(--line); margin: 0; }
dl.answers dt { font-weight: 700; color: var(--muted); padding-right: 16px; }
dl.answers dd { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 640px) { dl.answers { grid-template-columns: 1fr; } dl.answers dt { border: 0; padding-bottom: 0; } }
code { font-size: .95em; background: var(--sage-100); padding: 1px 6px; border-radius: 6px; }

/* ---------- Print: the diet plan prints cleanly on plain paper ---------- */
.print-only { display: none; }
@media print {
  @page { margin: 14mm; }
  body { background: #fff; font-size: 11.5pt; padding: 0 !important; }
  .site-header, .site-footer, .wave, .cta-bar, .no-print, .skip, .ys-bar { display: none !important; }
  .print-only { display: block; }
  section, .page-head { padding: 0 !important; }
  .wrap, .narrow { width: 100%; }
  *, *::before, *::after { animation: none !important; box-shadow: none !important; }
  .stats { background: none; border: 1px solid #bbb; border-radius: 8px; grid-template-columns: repeat(3, 1fr); padding: 8px; }
  .stat { border: 0; border-left: 1px solid #ccc; padding: 4px 12px; }
  .stat:first-child { border-left: 0; }
  .stat .value { font-size: 18pt; }
  .meal { grid-template-columns: 140px 1fr; gap: 12px; padding-bottom: 14px; }
  .meal li { border-color: #ccc; padding: 6px 10px; }
  .panel, .panel.sage, .panel.sand, .card, .referral { border: 1px solid #ccc; background: none; }
  .columns { grid-template-columns: 1fr 1fr; gap: 16px; }
  h1 { font-size: 22pt; }
  a { color: inherit; text-decoration: none; }
}