/* Better With Ayurveda - shared styles. Phone first; wider layouts added in the media queries below. */

/* Direction "A2 + navy" (2026-10-16): warm oat background, pale mist and sand panels,
   sea buttons, warm salmon accents. No dark green. Rust replaced caramel, then salmon replaced rust (both 2026-10-26). */
:root {
  --deep: #192c30;
  --slate: #3a595b;
  --sea: #7ba7a8;
  --mist: #bed8d7;
  --oat: #f5f0e7;
  --sand: #e0d7c6;
  --salmon: #dd7368;
  /* Colour of the script word ("Ayurveda") */
  --script: var(--salmon);

  --bg: var(--oat);
  /* Beach accents (2026-10-26): shell for cards, seafoam for the steps section, soft coral for small touches only */
  --shell: #fbf8f2;
  --seafoam: #ddece6;
  --coral: #e9a98f;

  /* Icon colours (2026-10-27), for the dosha and essence icons and dosha details only, never text or buttons:
     Vata and Prana purple and magenta, Pitta and Tejas coral and peach, Kapha and Ojas teal and soft turquoise.
     The purple also outlines the logo. Pale tints sit behind each dosha's label. */
  --vata: #723b83;
  --vata-light: #b05083;
  --vata-pale: #eee4f0;
  --pitta: #cf616a;
  --pitta-light: #e59370;
  --pitta-pale: #f9e3dd;
  --kapha: #286e73;
  --kapha-light: #589f93;
  --kapha-pale: #ddeeeb;

  --surface: var(--shell);
  --line: var(--sand);
  --ink: var(--deep);
  --text: var(--deep);
  /* Supporting text is navy too (owner's review, 2026-10-26); slate is kept for links, small labels and practitioner titles */
  --muted: var(--deep);

  /* Two fonts, both from Google Fonts (linked in each page's head):
     Marcellus for headings, the name and the accent word (one weight only, 400);
     Urbanist for paragraphs, buttons, labels and navigation. Chosen by the owner 2026-10-26. */
  --sans: "Urbanist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Marcellus", Georgia, serif;

  --radius: 14px;
  --gutter: 20px;
  --max: 1240px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
}

img,
svg {
  max-width: 100%;
  display: block;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(2.3rem, 7.5vw, 3.7rem);
  line-height: 1.08;
}

h2 {
  font-size: clamp(1.75rem, 4.8vw, 2.5rem);
}

h3 {
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: 0;
}

p {
  margin: 0 0 1em;
}

/* Accent word ("Ayurveda"): same font and size as the heading around it, in warm salmon and lightly bold.
   Marcellus has no bold weight, so a matching outline painted behind the letters thickens them
   without filling in the small openings. */
.script,
.wordmark em {
  -webkit-text-stroke: 0.02em var(--script);
  paint-order: stroke fill;
}

.script {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  color: var(--script);
}

/* In Marcellus the r and v of "Ayurveda" sit too close; a little space after the r opens them up */
.rv {
  margin-right: 0.08em;
}

a {
  color: var(--slate);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--ink);
}

:focus-visible {
  outline: 3px solid var(--sea);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  z-index: 100;
}

.skip-link:focus {
  left: 8px;
  top: 8px;
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(245, 240, 231, 0.96);
  border-bottom: 1px solid var(--line);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* On every page the header floats over the top band (the ocean video, a photo, or the sea title band) with
   no bar of its own; it turns solid once the visitor scrolls (js/nav.js adds .scrolled) or opens the phone
   menu. Every page since 2026-10-29 (owner); before that only Home, New to Ayurveda? and How It Works. */
:root {
  --header-h: 65px;
  /* Space between the top bar and the start of each page's title (owner asked for more, 2026-10-29; was 64px) */
  --title-gap: clamp(72px, 11vh, 112px);
}

.site-header:not(.scrolled):not(.nav-open) {
  background: transparent;
  border-bottom-color: transparent;
}

/* The title band slides up under the floating header (.section.page-intro so .section's padding can't undo it).
   Every page's top band is the same size, photo or not (owner, 2026-10-29). */
.section.page-intro {
  margin-top: calc(-1 * var(--header-h));
  padding-top: calc(var(--header-h) + var(--title-gap));
  min-height: clamp(480px, 68vh, 640px);
  padding-bottom: 180px;
}

.has-video-hero .video-hero {
  margin-top: calc(-1 * var(--header-h));
  /* The same gap under the menu as every other page (owner, 2026-10-29; was 28 to 44px, and before that 64px) */
  padding-top: calc(var(--header-h) + var(--title-gap));
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}

/* The logo, "Three in balance" (2026-10-27; files in design/logo, drawn by design/logo/source/render-logo.py) */
.wordmark svg {
  width: 44px;
  height: 44px;
  color: var(--slate);
  flex: none;
}

/* The name in the top bar and footer looks bold (owner's request): Marcellus has no bold, so a thin outline in the same colour thickens it */
.site-header .wordmark > span,
.site-footer .wordmark > span {
  -webkit-text-stroke: 0.025em currentColor;
  paint-order: stroke fill;
}

.site-header .wordmark em,
.site-footer .wordmark em {
  -webkit-text-stroke-width: 0.025em;
}

/* The wordmark matches the headline: all Marcellus, "Ayurveda" in salmon */
.wordmark em {
  font-style: normal;
  color: var(--script);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 8px 14px;
  font: inherit;
  font-size: 0.95rem;
  color: var(--text);
  cursor: pointer;
}

.site-nav {
  display: none;
  border-top: 1px solid var(--line);
  padding: 8px 0 16px;
}

.site-header.nav-open .site-nav {
  display: block;
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  display: block;
  padding: 12px 0;
  color: var(--text);
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--slate);
}

.site-nav .btn {
  display: inline-flex;
  margin-top: 8px;
  padding: 12px 20px;
  color: var(--ink);
}

.site-nav .btn:hover {
  color: var(--ink);
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-primary {
  background: var(--sea);
  color: var(--ink);
}

.btn-primary:hover {
  background: var(--mist);
  color: var(--ink);
}

.btn-secondary {
  background: transparent;
  border-color: var(--slate);
  color: var(--ink);
}

.btn-secondary:hover {
  background: var(--mist);
  color: var(--ink);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Sections */

.section {
  padding: 56px 0;
}

.section-tint {
  background: var(--mist);
  color: var(--ink);
}

.section-tint p,
.section-tint .lead,
.section-tint .facts span {
  color: var(--ink);
}

/* Tide rhythm (2026-10-26): the page alternates oat and seafoam, with sea green as bookends that fade
   softly into the page: the facts band under the video at the top, and the closing section at the bottom. */

/* The facts band under the video: sea green, fading into oat at its lower edge */
.section-sea {
  background: linear-gradient(180deg, var(--sea) 0%, var(--sea) calc(100% - 110px), var(--oat) 100%);
  padding-bottom: 96px;
}

/* The closing section: oat fading into sea green, full width, with a clean edge onto the sand footer.
   Shorter top fades, a clean top edge and a fade into the footer were all tried; the owner chose this. */
.cta-section {
  background: linear-gradient(180deg, var(--oat) 0, var(--sea) 150px, var(--sea) 100%);
}

.cta-section .cta-band {
  background: transparent;
  border-radius: 0;
  padding-top: 72px;
}

.section-alt {
  /* Fades in from the oat section above instead of a hard edge (owner, 2026-10-29) */
  background: linear-gradient(180deg, var(--oat) 0, var(--seafoam) 150px);
}

/* ...and the oat section after it fades back out of seafoam. :where keeps this weaker than page themes. */
:where(.section-alt + .section:not(.cta-section)) {
  background: linear-gradient(180deg, var(--seafoam) 0, var(--oat) 150px);
}

.section-alt p {
  color: var(--ink);
}

.section-head {
  max-width: 640px;
  margin-bottom: 32px;
}

/* Short rule under section headings */
.section-head h2::after,
.split h2::after {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  border-radius: 2px;
  background: var(--sea);
  margin-top: 14px;
}

.section-tint .split h2::after {
  background: var(--salmon);
}

.eyebrow {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 12px;
}

.lead {
  font-size: 1.15rem;
  color: var(--muted);
}

.text-link {
  font-weight: 600;
}

/* Hero: real ocean footage (waves washing back and forth over sand), full width at the top of the page.
   A soft oat veil on the text side keeps the words readable. */

.video-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  /* The words sit in the upper part, leaving the beach free along the bottom */
  align-items: flex-start;
  /* The same height as every other page's top band (owner, 2026-10-29; was min(78vh, 700px)) */
  min-height: clamp(480px, 68vh, 640px);
  padding: 64px 0 120px;
  background: var(--sea);
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  /* Mirrored so the beach runs across the bottom, with the lower waterline on the text side (owner's request, 2026-10-26) */
  transform: scaleX(-1);
}

/* The veil covers the words but stops above the bottom of the video, so the moving sand shows all the way across */
.hero-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(245, 240, 231, 0.93) 0%, rgba(245, 240, 231, 0.88) 68%, rgba(245, 240, 231, 0) 88%);
}

/* A soft fade at the bottom of the video, from the sand into the sea-green band below (owner's request) */
.video-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 110px;
  z-index: 1;
  background: linear-gradient(180deg, rgba(123, 167, 168, 0) 0%, rgba(123, 167, 168, 0.55) 55%, var(--sea) 100%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 600px;
}

/* The Home headline: Marcellus like every heading, with "Ayurveda" in salmon */
.hero h1 {
  letter-spacing: 0;
}

.hero .lead {
  max-width: 34em;
  margin-bottom: 28px;
  color: var(--ink);
}

/* A soft cream fill so the outline button stays readable where it meets the sand on phones */
.video-hero .btn-secondary {
  background: rgba(245, 240, 231, 0.85);
}

.hero-note {
  margin-top: 20px;
  font-size: 0.95rem;
  color: var(--ink);
}

@media (min-width: 900px) {
  .hero-veil {
    background:
      linear-gradient(180deg, rgba(245, 240, 231, 0.9) 0, rgba(245, 240, 231, 0.6) 70px, rgba(245, 240, 231, 0) 170px),
      linear-gradient(90deg, rgba(245, 240, 231, 0.95) 0%, rgba(245, 240, 231, 0.92) 55%, rgba(245, 240, 231, 0.5) 74%, rgba(245, 240, 231, 0) 92%);
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 58%, transparent 82%);
    mask-image: linear-gradient(180deg, #000 0, #000 58%, transparent 82%);
  }

  /* The headline sits on one line on larger screens (owner's choice); it shrinks with the window
     so it always ends inside the cream veil, where the salmon accent word stays readable. Phones wrap it normally. */
  .hero-content {
    max-width: none;
  }

  .hero h1 {
    white-space: nowrap;
    font-size: min(2.75rem, calc((100vw - 64px) * 0.04));
  }
}
.photo {
  background: linear-gradient(135deg, var(--mist), var(--sand));
  border-radius: var(--radius);
  overflow: hidden;
}

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% center;
}

.photo-portrait {
  aspect-ratio: 1 / 1;
}

/* Draft-only markers: anything with this class is waiting for real content from the owner. */

.placeholder {
  outline: 2px dashed var(--sea);
  outline-offset: -2px;
}

.photo.placeholder {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
  padding: 16px;
}

.placeholder-text {
  background: var(--mist);
  border-radius: 4px;
  padding: 0 4px;
  outline: 1px dashed var(--sea);
}

/* Facts strip */

.facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.facts li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.facts svg {
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: 50%;
  background: var(--shell);
  color: var(--deep);
  flex: none;
}

.facts strong {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.1rem;
  /* Bold look (owner's request): Marcellus has no bold, so a thin outline in the same colour thickens the letters */
  -webkit-text-stroke: 0.025em currentColor;
  paint-order: stroke fill;
}

.facts span {
  color: var(--muted);
  font-size: 0.97rem;
}

/* Cards */

.card-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.card {
  background: var(--surface);
  border: 1px solid var(--sand);
  border-top: 4px solid var(--sea);
  border-radius: var(--radius);
  padding: 24px;
}

.card p {
  margin: 0;
  color: var(--deep);
  font-size: 0.98rem;
}

.after-grid {
  margin-top: 28px;
}

/* Steps */

.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 24px;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 60px;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--salmon);
  color: var(--deep);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.15rem;
}

.steps p {
  margin: 0;
  color: var(--muted);
}

/* Practitioners */

.people {
  display: grid;
  gap: 20px;
}

.person {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 18px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}

.person .photo {
  border-radius: 50%;
}

.person h3 {
  margin-bottom: 2px;
}

.person .location {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 2px 0 0;
}

.person .title {
  color: var(--slate);
  font-weight: 600;
  font-size: 0.95rem;
  margin: 0;
}

/* Split (New to Ayurveda) */

.split {
  display: grid;
  gap: 28px;
  align-items: center;
}

/* Testimonials */

.quotes {
  display: grid;
  gap: 16px;
}

.quote {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--sand);
  border-left: 4px solid var(--coral);
  border-radius: var(--radius);
  padding: 24px;
}

.quote blockquote {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.5;
}

.quote figcaption {
  color: var(--muted);
  font-size: 0.95rem;
}

/* Closing call to action */

/* The closing tile uses the same sea green as the band under the ocean at the top (owner's request, 2026-10-26) */
.cta-band {
  background: var(--sea);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 40px 24px;
  text-align: center;
}

.cta-band p {
  color: var(--ink);
  max-width: 34em;
  margin: 0 auto 24px;
}

.cta-band .btn-row {
  justify-content: center;
}

/* The main button would disappear on sea green, so here it is shell with navy text */
.cta-band .btn-primary {
  background: var(--shell);
}

.cta-band .btn-secondary {
  border-color: var(--deep);
}

.cta-band .btn-primary:hover,
.cta-band .btn-secondary:hover {
  background: var(--mist);
}

/* Footer */

/* The page ends on sand, like the shore below the ocean at the top */
.site-footer {
  /* Mist on every page (owner, 2026-10-29; was sand, and some pages had their own colour), fading in softly from
     the section above: --footer-from is set to that section's last colour */
  --footer-from: var(--oat);
  background: linear-gradient(180deg, var(--footer-from) 0, var(--mist) 160px);
  border-top: 0;
  padding: 40px 0 32px;
  font-size: 0.95rem;
  color: var(--muted);
}

.footer-grid {
  display: grid;
  gap: 28px;
}

.site-footer h2 {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 10px;
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer li {
  margin-bottom: 6px;
}

.footer-note {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(25, 44, 48, 0.14);
  font-size: 0.88rem;
}

/* Inner pages: a sea-green title band at the top that fades into oat, like the facts band on Home */

.page-intro .eyebrow {
  color: var(--deep);
}

.page-intro .lead {
  max-width: 38em;
  color: var(--ink);
}

/* Split layout with both columns starting at the top (for longer text) */
.split-top {
  align-items: start;
}

/* Small facts under a heading, each with a salmon dot */
.detail-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.detail-list li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.detail-list li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--salmon);
  flex: none;
}

/* Small label on a card, e.g. "In person" */
.tag {
  display: inline-block;
  margin-top: 14px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--seafoam);
  color: var(--deep);
  font-size: 0.8rem;
  font-weight: 600;
}

/* Practitioner profiles (Our Practitioners page) */
/* Both practitioners side by side, photo, name and titles centred on top, bio and education below
   (owner, 2026-10-29); one above the other on phones */
.profile-pair {
  display: grid;
  gap: 48px;
}

@media (min-width: 900px) {
  .profile-pair {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }
}

.profile-head {
  text-align: center;
  margin-bottom: 24px;
}

.profile-head .photo {
  margin-inline: auto;
}

.profile .photo {
  max-width: min(300px, 55vw);
  margin-bottom: 20px;
  border-radius: 50%;
}

.profile .title {
  color: var(--slate);
  font-weight: 600;
  margin: 0;
}

.profile .location {
  margin: 4px 0 0;
}

.profile h3 {
  margin-top: 28px;
}

/* Plain list of courses: one per line, with a thin line between */
.edu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.edu-list li {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.97rem;
}

.edu-list .year {
  color: var(--slate);
  white-space: nowrap;
}

/* Comfortable reading width for paragraphs that sit under a full-width grid */
.prose {
  max-width: 44em;
}

.dosha-grid {
  margin-top: 24px;
}

/* Dosha cards line up across the row: graphic, name, text, and the elements label at the same height */
.dosha-grid .card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.dosha-grid .card p {
  margin-bottom: 16px;
}

.dosha-grid .tag {
  margin-top: auto;
}

/* Each dosha's label sits on a pale tint of its icon colour */
.dosha-grid .tag-vata { background: var(--vata-pale); }
.dosha-grid .tag-pitta { background: var(--pitta-pale); }
.dosha-grid .tag-kapha { background: var(--kapha-pale); }

/* Practitioner photos: framed on the face inside the round crop */
.photo-chaithra img {
  object-position: 50% 30%;
  transform: scale(1.5);
  transform-origin: 50% 36%; /* zoomed so her face is the same size as Sonia's (owner, 2026-11-05) */
}

.photo-sonia img {
  object-position: 50% 35%;
}

/* The dosha graphics on the New to Ayurveda? cards (owner's shapes, in the icon colours since 2026-10-27) */
.dosha-art {
  display: block;
  width: auto;
  margin-bottom: 16px;
}

/* The three graphics have different shapes and densities, so each is sized to look equally big:
   open shapes (Vata's lines) get a little more room, the solid blocks of Pitta a little less.
   They all sit on the same bottom line, 92px down. */
.dosha-art-vata {
  height: 82px;
  margin-top: 10px;
}

.dosha-art-pitta {
  height: 84px;
  margin-top: 8px;
}

/* Kapha's mountains fill less of their box, so they are drawn a little taller to look the same size (owner's request) */
.dosha-art-kapha {
  height: 92px;
}

/* Health history form (intake.html) */

/* Anything marked hidden stays hidden, even buttons with their own display style */
[hidden] {
  display: none !important;
}

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

.intake {
  max-width: 820px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--sand);
  border-top: 4px solid var(--sea);
  border-radius: var(--radius);
  padding: 24px 20px;
  scroll-margin-top: 90px;
}

.intake-progress {
  display: none;
  height: 6px;
  border-radius: 3px;
  background: var(--seafoam);
  overflow: hidden;
  margin-bottom: 10px;
}

.intake.is-stepped .intake-progress {
  display: block;
}

.intake-progress-bar {
  height: 100%;
  width: 0;
  background: var(--sea);
  transition: width 0.3s ease;
}

.intake-stepcount {
  margin: 0 0 18px;
  font-size: 0.9rem;
  color: var(--slate);
}

.intake-step {
  border: 0;
  margin: 0 0 32px;
  padding: 0;
  min-width: 0;
}

.intake-step > legend {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: 1.2;
  padding: 0;
  margin-bottom: 6px;
}

.intake-step > legend:focus {
  outline: none;
}

.step-num {
  display: block;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 6px;
}

.intake.is-stepped .step-num {
  display: none;
}

.step-intro {
  margin: 0 0 22px;
}

.field {
  margin-bottom: 18px;
}

.field label,
.inline-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}

.field-hint {
  display: block;
  font-size: 0.92rem;
  color: var(--slate);
  margin: -2px 0 8px;
}

.req {
  color: var(--salmon);
}

.intake input[type="text"],
.intake input[type="email"],
.intake input[type="tel"],
.intake input[type="date"],
.intake input[type="time"],
.intake input[type="number"],
.intake select,
.intake textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--sand);
  border-radius: 10px;
  padding: 12px 14px;
}

.intake textarea {
  resize: vertical;
}

.intake input:focus,
.intake select:focus,
.intake textarea:focus {
  outline: 3px solid var(--mist);
  border-color: var(--sea);
}

.field-row {
  display: grid;
  gap: 0 16px;
}

/* Groups of questions inside a step */
.intake .sub,
.hist-group,
.chip-group {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 8px 0 22px;
  padding: 18px 0 0;
  min-width: 0;
}

.intake .sub > legend,
.hist-group > legend,
.chip-group > legend {
  font-family: var(--serif);
  font-size: 1.2rem;
  padding: 0 10px 0 0;
}

/* Medicines */
.med-card {
  background: var(--oat);
  border-radius: 10px;
  padding: 16px 16px 2px;
  margin-bottom: 12px;
}

.btn-small {
  padding: 10px 18px;
  font-size: 0.95rem;
}

/* Health history: a row per condition with three small tick boxes */
.hist-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.hist-name {
  flex: 1 1 200px;
}

.hist-boxes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Tick boxes styled as soft pills: hidden box, visible label that fills when chosen */
.chip,
.mini-chip,
.scale-dot {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.chip input,
.mini-chip input,
.scale-dot input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.chip span,
.mini-chip span {
  display: inline-block;
  border: 1px solid var(--sand);
  background: #fff;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.95rem;
  line-height: 1.3;
}

.mini-chip span {
  padding: 6px 12px;
  font-size: 0.85rem;
}

.chip input:checked + span,
.mini-chip input:checked + span,
.scale-dot input:checked + span {
  background: var(--seafoam);
  border-color: var(--sea);
  box-shadow: inset 0 0 0 1px var(--sea);
}

.chip input:checked + span::before,
.mini-chip input:checked + span::before {
  content: "✓ ";
  color: var(--slate);
  font-weight: 600;
}

.chip input:focus-visible + span,
.mini-chip input:focus-visible + span,
.scale-dot input:focus-visible + span {
  outline: 3px solid var(--sea);
  outline-offset: 2px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.inline-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-bottom: 14px;
}

.inline-field input {
  max-width: 180px;
}

/* Stress level: ten round buttons */
.scale {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  max-width: 420px;
}

.scale-dot span {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  max-width: 52px;
  border: 1px solid var(--sand);
  border-radius: 50%;
  background: #fff;
  font-weight: 600;
}

/* A typical day of eating */
.meal-row {
  display: grid;
  gap: 0 16px;
  margin-bottom: 6px;
}

.meal-name {
  font-family: var(--serif);
  font-size: 1.1rem;
  margin: 6px 0 8px;
}

/* Optional sections that open on request */
.optional {
  border: 1px solid var(--sand);
  border-radius: 10px;
  padding: 0 16px;
  margin: 8px 0 22px;
  background: #fff;
}

.optional summary {
  cursor: pointer;
  font-weight: 600;
  padding: 14px 0;
}

.optional[open] {
  padding-bottom: 6px;
}

.consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 16px;
  cursor: pointer;
}

.consent input {
  width: 20px;
  height: 20px;
  margin-top: 3px;
  flex: none;
  accent-color: var(--slate);
}

.form-note {
  font-weight: 600;
  min-height: 1.5em;
}

.intake-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
}

.intake-nav .intake-next,
.intake-nav .intake-submit {
  margin-left: auto;
}

.intake-required {
  margin: 14px 0 0;
  font-size: 0.9rem;
  color: var(--slate);
}

/* Without JavaScript all steps show and only the send button is needed */
.intake:not(.is-stepped) .intake-back,
.intake:not(.is-stepped) .intake-next {
  display: none;
}

@media (min-width: 640px) {
  .intake {
    padding: 36px 40px;
  }

  .field-row {
    grid-template-columns: 1fr 1fr;
  }

  .scale {
    grid-template-columns: repeat(10, 1fr);
    max-width: none;
  }

  .meal-row {
    grid-template-columns: 110px 160px 1fr;
    align-items: end;
  }

  .meal-name {
    margin-bottom: 30px;
  }
}

/* Sunset beach theme (New to Ayurveda?, 2026-10-27): a soft sunset sky over the sea at the top, warm dusk
   tones lower down, and a sunset closing band. Uses the icon colours; text stays navy on every tint. */
.theme-sunset {
  --dusk-lavender: #e8ddef;
  --dusk-rose: #f2d8e1;
  --dusk-peach: #f8dccb;
  --dusk-sand: #f8ebe2;
  --sun: #ec8f74;
  --sun-glow: #f6bf99;
}

/* A single pale shell on white sand with a turquoise sea and soft sky behind (Unsplash photo 1697045563199, free;
   owner's choice later on 2026-10-29, moved here from How It Works): one small, simple thing, nothing to know yet.
   Before it: a beach from above (A16), sea glass on driftwood at sunrise, a sunrise sky, a sunset over the sea. */
.theme-sunset .page-intro {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(245, 240, 231, 0.7) 0, rgba(245, 240, 231, 0) calc(var(--header-h) + 50px)),
    #dfe8ec url("../images/shell-sky-1920.jpg") center center / cover no-repeat;
  margin-top: calc(-1 * var(--header-h));
  padding-top: calc(var(--header-h) + var(--title-gap));
}

.theme-sunset .page-intro .container {
  position: relative;
  z-index: 2;
}

.theme-sunset .page-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(251, 248, 242, 0.78) 0%, rgba(251, 248, 242, 0.55) 45%, rgba(251, 248, 242, 0) 75%);
}

/* The sky fades softly into the sand below. The top bar floats over the photo until the visitor scrolls (owner, 2026-10-29) */
.theme-sunset .page-intro::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(120px, 14vw, 180px);
  background: linear-gradient(180deg, rgba(245, 240, 231, 0) 0%, rgba(245, 240, 231, 0.55) 45%, var(--oat) 100%);
}

@media (max-width: 899px) {
  .theme-sunset .page-intro {
    background-image: linear-gradient(180deg, rgba(245, 240, 231, 0.7) 0, rgba(245, 240, 231, 0) calc(var(--header-h) + 40px)), url("../images/shell-sky-900.jpg");
  }

  .theme-sunset .page-intro::before {
    background: rgba(251, 248, 242, 0.55);
  }
}

/* Section colours (owner, 2026-10-29): "How Ayurveda understands you" peach (dusk sand), "The ease of Ayurveda" mist,
   each fading in softly from the section above */
.theme-sunset .section-alt {
  background: linear-gradient(180deg, var(--oat) 0, var(--dusk-sand) 150px);
}

.theme-sunset .section-mist {
  background: linear-gradient(180deg, var(--dusk-sand) 0, var(--mist) 150px);
}

.theme-sunset .section-head h2::after,
.theme-sunset .split h2::after {
  background: linear-gradient(90deg, var(--pitta), var(--pitta-light));
}

/* Each dosha card is edged in its own colour */
.theme-sunset .dosha-grid .card:nth-child(1) { border-top-color: var(--vata); }
.theme-sunset .dosha-grid .card:nth-child(2) { border-top-color: var(--pitta); }
.theme-sunset .dosha-grid .card:nth-child(3) { border-top-color: var(--kapha); }

/* After a sea closing band, the footer fades in from sea; page themes set their own closing colour below */
body:not([class*="theme-"]):has(main > .cta-section:last-child) .site-footer {
  --footer-from: var(--sea);
}

.theme-sunset .site-footer {
  --footer-from: var(--dusk-lavender);
}

/* The closing band: the last light of the day (peach, rose, lavender), fading in from the mist section above and running on into the lavender footer */
.theme-sunset .cta-section {
  background: linear-gradient(180deg, var(--mist) 0, var(--dusk-peach) 150px, var(--dusk-rose) 55%, var(--dusk-lavender) 100%);
}

.theme-sunset .cta-band .btn-primary:hover,
.theme-sunset .cta-band .btn-secondary:hover {
  background: var(--shell);
}

/* New to Ayurveda? page details (UX review, 2026-10-27) */
.intro-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 24px;
}

.on-this-page {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  font-size: 0.95rem;
}

.on-this-page span {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--deep);
}

.on-this-page a {
  color: var(--deep);
  font-weight: 600;
  text-underline-offset: 3px;
}

[id$="-heading"] {
  scroll-margin-top: calc(var(--header-h, 72px) + 24px);
}

.pull-quote {
  margin: 28px 0 0;
  padding-left: 20px;
  border-left: 4px solid var(--pitta-light);
  max-width: 16em;
}

/* On phones the quote would sit right above the same sentence, so it shows from tablet width up */
@media (max-width: 759px) {
  .pull-quote { display: none; }
}

.pull-quote p {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  line-height: 1.25;
  color: var(--deep);
  margin: 0;
}

.nudge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: 36px;
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--pitta);
  border-radius: var(--radius);
}

.nudge p {
  margin: 0;
  max-width: 34em;
}

.photo-slot {
  margin-top: 28px;
  aspect-ratio: 4 / 3;
  max-width: 360px;
  border-radius: var(--radius);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
}

/* Home: a small sunset over the sea beside the "New to Ayurveda?" teaser, leading into that page */
/* A small photo tile beside a Home preview (the Apothecary's dune sunrise, 2026-10-29), the same size as the sunset tile */
.mini-photo {
  width: min(100%, 260px);
  aspect-ratio: 2 / 1;
  margin-top: 24px;
  border-radius: var(--radius);
  background: #ece4d6 center / cover no-repeat;
}

.mini-herbs {
  /* the Apothecary page's own photo, framed on the bottle (2026-11-05; was a dune sunrise) */
  background-image: url("../images/bottle-shore-900.jpg");
  background-position: center 62%;
}

/* New to Ayurveda? preview: that page's own shell photo (2026-11-05; was a drawn sunset, .mini-sunset) */
.mini-newcomer {
  background-image: url("../images/shell-sky-900.jpg");
  background-position: center 75%;
}

.mini-sunset {
  position: relative;
  overflow: hidden;
  width: min(100%, 260px);
  aspect-ratio: 2 / 1;
  margin-top: 24px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #e8ddef 0%, #f2d8e1 40%, #f8dccb 70%);
}

.mini-sunset::before {
  content: "";
  position: absolute;
  width: 38%;
  aspect-ratio: 1;
  right: 14%;
  bottom: 30%;
  transform: translateY(50%);
  border-radius: 50%;
  background: radial-gradient(circle, #ec8f74 0 58%, #f6bf99 59% 64%, rgba(246, 191, 153, 0) 72%);
}

.mini-sunset::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30%;
  background:
    repeating-linear-gradient(180deg, rgba(251, 248, 242, 0) 0 7px, rgba(251, 248, 242, 0.25) 7px 8px),
    linear-gradient(180deg, var(--kapha-light), var(--sea));
}

/* Booking page: choose a practitioner, then their Calendly calendar opens below */
.book-grid {
  display: grid;
  gap: 20px;
  margin-top: 8px;
}

.book-card {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 16px;
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.book-card.is-chosen {
  border-color: var(--sea);
  box-shadow: 0 0 0 2px var(--sea);
}

.book-card .photo {
  border-radius: 50%;
}

.book-card h3 {
  margin-bottom: 2px;
}

.book-card .title {
  color: var(--slate);
  font-weight: 600;
  font-size: 0.95rem;
  margin: 0;
}

.book-card .location {
  font-size: 0.92rem;
  margin: 2px 0 14px;
}

.booking-panel {
  margin-top: 40px;
  scroll-margin-top: calc(var(--header-h, 72px) + 16px);
}

.booking-panel:focus {
  outline: none;
}

.booking-frame iframe {
  display: block;
  width: 100%;
  min-width: 300px;
  height: 1060px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.booking-soon {
  background: var(--surface);
  border: 2px dashed var(--sea);
  border-radius: var(--radius);
  padding: 20px;
  max-width: 44em;
}

.booking-fallback {
  font-size: 0.95rem;
  margin-top: 14px;
}

.section-tight-top {
  padding-top: 0;
}

@media (min-width: 760px) {
  .book-grid {
    grid-template-columns: 1fr 1fr;
  }
  .book-card {
    grid-template-columns: 112px 1fr;
    gap: 20px;
    align-items: center;
  }
  .booking-frame iframe {
    height: 760px;
  }
}

/* Contact page: the form beside other ways to reach us */
.contact-layout {
  display: grid;
  gap: 32px;
  align-items: start;
}

.contact-form {
  margin: 0;
  max-width: none;
}

.contact-form h2 {
  font-size: 1.6rem;
  margin-bottom: 20px;
}

.contact-aside h2 {
  font-size: 1.6rem;
}

.contact-aside h3 {
  margin: 24px 0 6px;
}

.contact-aside p {
  margin: 0;
}

/* Legal pages: one comfortable reading column */
.legal {
  max-width: 44em;
}

.legal h2 {
  font-size: clamp(1.4rem, 3.5vw, 1.8rem);
  margin-top: 40px;
}

.legal h3 {
  margin-top: 24px;
}

.legal ul {
  padding-left: 1.2em;
}

.legal li {
  margin-bottom: 6px;
}

.legal-date {
  color: var(--slate);
  font-size: 0.95rem;
}

/* Video and sound controls on the Home video: two soft cream circles in the bottom corner.
   Each shows only an icon; its name is read out to screen readers and appears as a small tip on hover or keyboard focus. */
.hero-controls {
  position: absolute;
  right: var(--gutter);
  bottom: 20px;
  z-index: 3;
  display: flex;
  gap: 10px;
}

.hero-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(25, 44, 48, 0.18);
  border-radius: 999px;
  background: rgba(251, 248, 242, 0.9);
  color: var(--ink);
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background-color 0.15s ease;
}

.hero-btn:hover {
  background: var(--shell);
}

.hero-btn svg {
  width: 22px;
  height: 22px;
}

.hero-btn .icon-on,
.hero-btn[aria-pressed="true"] .icon-off {
  display: none;
}

.hero-btn[aria-pressed="true"] .icon-on {
  display: block;
}

/* The small tip above each button */
.hero-btn::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, 4px);
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--ink);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.hero-btn:hover::after,
.hero-btn:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* A gentle ring around the sound button, twice, a moment after the page opens, so visitors notice it */
.sound-toggle:not(.was-used) {
  animation: sound-hint 2.4s ease-out 1.5s 2;
}

@keyframes sound-hint {
  0% { box-shadow: 0 0 0 0 rgba(251, 248, 242, 0.75); }
  70% { box-shadow: 0 0 0 14px rgba(251, 248, 242, 0); }
  100% { box-shadow: 0 0 0 0 rgba(251, 248, 242, 0); }
}

/* Trust line under the Home buttons: two small faces and who you'll meet */
/* A soft cream pill, so it reads clearly wherever it lands on the video (on phones it can sit over the sand) */
.hero-trust {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding: 5px 16px 5px 5px;
  border-radius: 999px;
  background: rgba(251, 248, 242, 0.88);
  color: var(--ink);
  font-size: 0.93rem;
  line-height: 1.35;
  text-decoration: none;
  backdrop-filter: blur(4px);
}

.hero-trust:hover span:last-child {
  text-decoration: underline;
}

.hero-faces {
  display: inline-flex;
  flex: none;
}

.hero-faces img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--shell);
}

.hero-faces img + img {
  margin-left: -10px;
}

.hero-faces .face-chaithra {
  object-position: 50% 30%;
}
/* Wider screens */

@media (min-width: 640px) {
  .facts {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }

  .people,
  .quotes {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

@media (min-width: 900px) {
  :root {
    --gutter: 32px;
  }

  .section {
    padding: 88px 0;
  }

  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
  }

  .steps li {
    padding-left: 0;
    padding-top: 60px;
  }

  .split {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
  }

  .cta-band {
    padding: 64px 40px;
  }

  .contact-layout {
    grid-template-columns: 3fr 2fr;
    gap: 56px;
  }
}

/* The full menu (six links and a short "Book now" button, 2026-10-29) needs about 1215px to fit on one line, with clear space after the larger name;
   below that the Menu button is used. */
@media (min-width: 1225px) {
  .nav-toggle {
    display: none;
  }

  .header-inner {
    min-height: 84px;
  }

  :root {
    --header-h: 85px;
  }

  .site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-inline: 24px;
  }

  /* The name and the menu share one text size across the top bar (owner's request) */
  /* The name is a little larger than the menu links, with a larger logo (owner, 2026-10-29; was 1.06rem and 44px) */
  .site-header .wordmark {
    gap: 12px;
  }

  .site-nav {
    display: block;
    border: 0;
    padding: 0;
    /* always clear space between the name and the menu (owner, 2026-10-29) */
    margin-left: 48px;
  }

  /* The menu sits well clear of the name, with even spacing between links */
  .site-nav ul {
    display: flex;
    align-items: center;
    /* a little roomier than before (owner, 2026-10-29; 24px felt tight, 36px too spaced out) */
    gap: 28px;
  }

  .site-nav a {
    padding: 6px 0;
    font-size: 1.06rem;
    white-space: nowrap;
  }

  /* The top-bar button is an outline (quieter than the main button on the page) and uses the menu's text size */
  .site-nav .btn {
    margin-top: 0;
    padding: 9px 18px;
    font-size: 1.06rem;
    font-weight: 400;
    background: transparent;
    border-color: var(--slate);
  }

  .site-nav .btn:hover {
    background: var(--mist);
  }

  /* Five steps (How It Works) sit in one row on wide screens */
  .steps-five {
    grid-template-columns: repeat(5, 1fr);
    gap: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .btn {
    transition: none;
  }
}

/* How It Works (2026-10-29, owner's choice): a pale ribbed shell on white sand with a turquoise sea and soft sky
   behind (Unsplash photo 1697045563199, free under the Unsplash License; widened with soft blurred sky and sand on
   the left so the shell sits right of the words). A starry sky, a calm morning beach and a pile of shells came first. */
.theme-stars .page-intro {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(245, 240, 231, 0.7) 0, rgba(245, 240, 231, 0) calc(var(--header-h) + 50px)),
    #efe6da url("../images/path-1920.jpg") center 58% / cover no-repeat;
  margin-top: calc(-1 * var(--header-h));
  padding-top: calc(var(--header-h) + var(--title-gap));
}

.theme-stars .page-intro .container {
  position: relative;
  z-index: 2;
}

.theme-stars .page-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(251, 248, 242, 0.6) 0%, rgba(251, 248, 242, 0.35) 45%, rgba(251, 248, 242, 0) 75%);
}

.theme-stars .page-intro::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(120px, 14vw, 180px);
  background: linear-gradient(180deg, rgba(247, 225, 220, 0) 0%, rgba(247, 225, 220, 0.55) 45%, var(--star-rose) 100%);
}

/* The photo's colours carried down the page, each section fading into the next (owner, 2026-10-29):
   pale rose (the sky), mauve (the dusk above the peaks), snow, then the closing band runs rose to mauve to
   dusk blue-grey and on into the footer. Text stays navy on every tint. */
.theme-stars {
  --star-rose: #f7e1dc;
  --star-mauve: #e6dce9;
  --star-snow: #faf6f4;
  --star-dusk: #dbd8e6;
}

.theme-stars [aria-labelledby="steps-heading"] {
  background: var(--star-rose);
}

.theme-stars .section-alt {
  background: linear-gradient(180deg, var(--star-rose) 0, var(--star-mauve) 150px);
}

.theme-stars [aria-labelledby="know-heading"] {
  background: linear-gradient(180deg, var(--star-mauve) 0, var(--star-snow) 150px);
}

.theme-stars .cta-section {
  background: linear-gradient(180deg, var(--star-snow) 0, var(--star-rose) 150px, var(--star-mauve) 60%, var(--star-dusk) 100%);
}

.theme-stars .site-footer {
  --footer-from: var(--star-dusk);
}

@media (max-width: 899px) {
  .theme-stars .page-intro {
    background-image: linear-gradient(180deg, rgba(245, 240, 231, 0.7) 0, rgba(245, 240, 231, 0) calc(var(--header-h) + 40px)), url("../images/path-900.jpg");
    background-position: top, center;
  }

  .theme-stars .page-intro::before {
    background: rgba(251, 248, 242, 0.5);
  }
}

/* Our Practitioners (2026-10-29, owner's choice): a quiet beach in the morning, pastel sky over a calm sea
   (Pexels photo 36646802, free licence, no credit required; the photo from How It Works, moved here; many others
   were tried first). Soft peach tones run down the page.
   Soft sea tones run down the page, each section fading into the next: pale aqua behind the two profiles,
   seafoam behind the story, and a closing band from cloud to seafoam to pale aqua. (The class and variable
   names are from the first, blossom photo.) */
.theme-blossom {
  --bloom-sky: #f8e8df;
  --bloom-pink: #f4ddd3;
  --bloom-cloud: #fbf6f2;
}

.theme-blossom .page-intro {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(245, 240, 231, 0.7) 0, rgba(245, 240, 231, 0) calc(var(--header-h) + 50px)),
    #5f8fa8 url("../images/wave-1920.jpg") center 60% / cover no-repeat;
}

.theme-blossom .page-intro .container {
  position: relative;
  z-index: 2;
}

/* A light veil on the text side keeps the words clear over the pink sky */
.theme-blossom .page-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(251, 248, 242, 0.72) 0%, rgba(251, 248, 242, 0.5) 45%, rgba(251, 248, 242, 0) 80%);
}

.theme-blossom .page-intro::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(120px, 14vw, 180px);
  background: linear-gradient(180deg, rgba(248, 232, 223, 0) 0%, rgba(248, 232, 223, 0.55) 45%, var(--bloom-sky) 100%);
}

.theme-blossom [aria-labelledby="meet-heading"] {
  background: var(--bloom-sky);
}

.theme-blossom [aria-labelledby="story-heading"] {
  background: linear-gradient(180deg, var(--bloom-sky) 0, var(--bloom-pink) 150px);
}

.theme-blossom .cta-section {
  background: linear-gradient(180deg, var(--bloom-pink) 0, var(--bloom-cloud) 150px, var(--bloom-pink) 60%, var(--bloom-sky) 100%);
}

.theme-blossom .site-footer {
  --footer-from: var(--bloom-sky);
}

@media (max-width: 899px) {
  .theme-blossom .page-intro {
    background-image: linear-gradient(180deg, rgba(245, 240, 231, 0.7) 0, rgba(245, 240, 231, 0) calc(var(--header-h) + 40px)), url("../images/wave-900.jpg");
    background-position: top, center bottom;
  }

  .theme-blossom .page-intro::before {
    background: rgba(251, 248, 242, 0.6);
  }
}

/* Services (2026-10-29, owner's choice): a stack of pale sea glass on a pebbly beach at sunset, like the layering
   of services (Unsplash photo 1628026738455, free under the Unsplash License; widened with a soft blurred beach on
   the left so the stack sits right of the words on computers). A sunlit forest, two golden beaches and stacked
   stones came first, so the class is still theme-forest.
   Golden light and soft sage alternate down the page, each fading into the next, ending in moss. */
.theme-forest {
  --leaf-sun: #f8f2df;
  --leaf-sage: #e5ecd9;
  --leaf-moss: #d6e0c6;
}

.theme-forest .page-intro {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(245, 240, 231, 0.7) 0, rgba(245, 240, 231, 0) calc(var(--header-h) + 50px)),
    #c9b8a8 url("../images/sea-glass-stack-1920.jpg") right bottom / cover no-repeat;
}

.theme-forest .page-intro .container {
  position: relative;
  z-index: 2;
}

/* A stronger veil on the text side keeps the words clear over the darker pebbles */
.theme-forest .page-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(251, 248, 242, 0.82) 0%, rgba(251, 248, 242, 0.62) 45%, rgba(251, 248, 242, 0) 78%);
}

.theme-forest .page-intro::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(120px, 14vw, 180px);
  background: linear-gradient(180deg, rgba(248, 242, 223, 0) 0%, rgba(248, 242, 223, 0.6) 45%, var(--leaf-sun) 100%);
}

/* Plain sections fade from sage back into golden light (:where keeps this weaker than the rules below) */
.theme-forest :where(.section:not(.page-intro):not(.section-alt):not(.cta-section)) {
  background: linear-gradient(180deg, var(--leaf-sage) 0, var(--leaf-sun) 150px);
}

.theme-forest [aria-labelledby="first-heading"] {
  background: var(--leaf-sun);
}

.theme-forest .section-alt {
  background: linear-gradient(180deg, var(--leaf-sun) 0, var(--leaf-sage) 150px);
}

.theme-forest .cta-section {
  background: linear-gradient(180deg, var(--leaf-sun) 0, var(--leaf-sage) 150px, var(--leaf-moss) 100%);
}

.theme-forest .site-footer {
  --footer-from: var(--leaf-moss);
}

@media (max-width: 899px) {
  .theme-forest .page-intro {
    background-image: linear-gradient(180deg, rgba(245, 240, 231, 0.7) 0, rgba(245, 240, 231, 0) calc(var(--header-h) + 40px)), url("../images/sea-glass-stack-900.jpg");
    background-position: top, center bottom;
  }

  .theme-forest .page-intro::before {
    background: rgba(251, 248, 242, 0.7);
  }
}

/* The four photo pages share one photo-band size and one fade, so they feel like a set (owner, 2026-10-29).
   The band is at least this tall; a long intro on a phone may make it taller. */
.theme-sunset .page-intro,
.theme-stars .page-intro,
.theme-blossom .page-intro,
.theme-forest .page-intro {
  min-height: clamp(480px, 68vh, 640px);
  padding-bottom: 180px;
}

/* Apothecary (owner, 2026-10-29): the brand's greens, from the Kapha icon colours. Soft turquoise #589F93
   for the title band and closing band, teal #286E73 for the heading rules, and the pale green #DDEEEB for
   the shop section and the footer; each fades into the next. Text stays navy on every green. */

/* The title band: the sun rising over the sea behind dune plants (Pexels photo 2403930, free licence, no credit
   required; owner's choice 2026-10-29, mirrored so the plants sit on the right; dried herbs and water lilies were
   tried first), with the same size and fade into oat as the other photo pages and a strong veil behind the words. */
.theme-apothecary .page-intro {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(245, 240, 231, 0.7) 0, rgba(245, 240, 231, 0) calc(var(--header-h) + 50px)),
    #2f8fc4 url("../images/lavender-sea-1920.jpg") right center / cover no-repeat;
  min-height: clamp(480px, 68vh, 640px);
  padding-bottom: 180px;
}

.theme-apothecary .page-intro .container {
  position: relative;
  z-index: 2;
}

.theme-apothecary .page-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(251, 248, 242, 0.9) 0%, rgba(251, 248, 242, 0.75) 45%, rgba(251, 248, 242, 0) 80%);
}

.theme-apothecary .page-intro::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(120px, 14vw, 180px);
  background: linear-gradient(180deg, rgba(245, 240, 231, 0) 0%, rgba(245, 240, 231, 0.55) 45%, var(--oat) 100%);
}

@media (max-width: 899px) {
  .theme-apothecary .page-intro {
    background-image: linear-gradient(180deg, rgba(245, 240, 231, 0.7) 0, rgba(245, 240, 231, 0) calc(var(--header-h) + 40px)), url("../images/lavender-sea-900.jpg");
    background-position: top, center bottom;
  }

  .theme-apothecary .page-intro::before {
    background: rgba(251, 248, 242, 0.78);
  }
}

.theme-apothecary .section-alt {
  background: linear-gradient(180deg, var(--oat) 0, var(--kapha-pale) 150px);
}

/* Since "Using herbs with care" comes before the shop (owner, 2026-10-29), it stays oat, and the shop's pale green
   fades on into the closing band */
.theme-apothecary [aria-labelledby="care-heading"] {
  background: var(--oat);
}

.theme-apothecary .section-head h2::after,
.theme-apothecary .split h2::after {
  background: linear-gradient(90deg, var(--kapha), var(--kapha-light));
}

.theme-apothecary .steps li::before {
  background: var(--kapha-light);
}

.theme-apothecary .card {
  border-top-color: var(--kapha-light);
}

.theme-apothecary .cta-section {
  background: linear-gradient(180deg, var(--kapha-pale) 0, var(--kapha-light) 150px, var(--kapha-light) 100%);
}

.theme-apothecary .site-footer {
  --footer-from: var(--kapha-light);
}

/* Book your first consultation (owner's choice, 2026-10-29): a sunlit sandy path between wooden posts,
   leading toward the beach, "the first step" (Pexels photo 7368565, free licence, no credit required).
   Same band size, light veil and fade into oat as the other photo pages; the rest of the page is Shoreline. */
/* Book your first consultation (owner, later on 2026-10-29): a hand resting in a meditation pose by the sea, close
   up, no face (Unsplash photo 1591228127791, free; owner's choice M1; mirrored so the arm and hand sit on the right).
   Before it the same day: open arms at a sunset sea (H9) and a leap at golden hour (J12). The sandy path that was
   here moved to How It Works. */
.theme-path .page-intro {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(245, 240, 231, 0.7) 0, rgba(245, 240, 231, 0) calc(var(--header-h) + 50px)),
    #e9e4dc url("../images/foam-step-1920.jpg") right top 70% / cover no-repeat;
}

/* Book ends with a sea closing band, so its footer fades in from sea */
.theme-path .site-footer {
  --footer-from: var(--sea);
}

.theme-path .page-intro .container {
  position: relative;
  z-index: 2;
}

.theme-path .page-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(251, 248, 242, 0.72) 0%, rgba(251, 248, 242, 0.5) 45%, rgba(251, 248, 242, 0) 80%);
}

.theme-path .page-intro::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(120px, 14vw, 180px);
  background: linear-gradient(180deg, rgba(245, 240, 231, 0) 0%, rgba(245, 240, 231, 0.55) 45%, var(--oat) 100%);
}

@media (max-width: 899px) {
  .theme-path .page-intro {
    background-image: linear-gradient(180deg, rgba(245, 240, 231, 0.7) 0, rgba(245, 240, 231, 0) calc(var(--header-h) + 40px)), url("../images/foam-step-900.jpg");
    background-position: top, center 75%;
  }

  .theme-path .page-intro::before {
    background: rgba(251, 248, 242, 0.5);
  }
}

/* Contact (owner, later on 2026-10-29): footprints leading away along warm sand beside a soft wave of foam, the first
   steps toward getting in touch (Unsplash photo 1620715967716, free; owner's choice F31). The single footprint
   (Pexels 4618606, footprint-*.jpg) came before. */
.theme-shore .page-intro {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(245, 240, 231, 0.7) 0, rgba(245, 240, 231, 0) calc(var(--header-h) + 50px)),
    #d9b48a url("../images/footprints-shore-1920.jpg") right bottom / cover no-repeat;
}

.theme-shore .page-intro .container {
  position: relative;
  z-index: 2;
}

.theme-shore .page-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(251, 248, 242, 0.78) 0%, rgba(251, 248, 242, 0.6) 50%, rgba(251, 248, 242, 0) 85%);
}

.theme-shore .page-intro::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(120px, 14vw, 180px);
  background: linear-gradient(180deg, rgba(245, 240, 231, 0) 0%, rgba(245, 240, 231, 0.55) 45%, var(--oat) 100%);
}

@media (max-width: 899px) {
  .theme-shore .page-intro {
    background-image: linear-gradient(180deg, rgba(245, 240, 231, 0.7) 0, rgba(245, 240, 231, 0) calc(var(--header-h) + 40px)), url("../images/footprints-shore-900.jpg");
    background-position: top, center bottom;
  }

  .theme-shore .page-intro::before {
    background: rgba(251, 248, 242, 0.62);
  }
}

/* One type scale on every page (owner, 2026-10-29). Page titles 3.7rem, section headings 2.5rem, card and step
   titles 1.2rem, paragraphs 1.0625rem, and one small size, 0.98rem, for card text, practitioner titles and
   places, notes, dates and form hints (these had drifted between 0.9rem and 0.98rem). */
.hero h1 {
  font-size: clamp(2.3rem, 7.5vw, 3.7rem);
  white-space: normal;
}

.legal h2,
.contact-form h2,
.contact-aside h2 {
  font-size: clamp(1.75rem, 4.8vw, 2.5rem);
}

main .card p,
main :is(.person, .book-info, .profile) :is(.title, .location),
.legal-date,
.booking-fallback,
.field-hint,
.intake-required,
.intake-stepcount {
  font-size: 0.98rem;
}

/* Apothecary: the dried herbs photo (Pexels photo 5480236 by Yan Krukov, free licence, no credit required) as a
   wide picture between "Custom formulations" and "Our shop" (owner, 2026-10-29) */
.photo-break {
  padding-bottom: 8px;
}

.photo-break .photo {
  aspect-ratio: 21 / 8;
}

.photo-break .photo img {
  object-position: center 45%;
}

@media (max-width: 899px) {
  .photo-break .photo {
    aspect-ratio: 3 / 2;
  }
}

/* Services: the note about trusted partners for body therapies and panchakarma (owner, 2026-10-29) */
.partner-note {
  border-left-color: var(--sea);
}

.partner-note p {
  max-width: 52em;
}

/* The second Apothecary photo (an amber oil bottle among dried lavender and chamomile, Pexels photo 6694212,
   free licence, no credit required; owner, 2026-10-29) is cropped low so the bottle shows */
.photo-break .photo-amber img {
  object-position: center 85%;
}

/* The logo and name in the top bar are larger (owner, 2026-10-29): 1.28rem name everywhere, 50px logo on phones
   and 54px on wide screens */
.site-header .wordmark svg {
  width: 50px;
  height: 50px;
}

.site-header .wordmark {
  font-size: 1.28rem;
}

@media (min-width: 1225px) {
  .site-header .wordmark svg {
    width: 54px;
    height: 54px;
  }
}

/* Our Practitioners (owner, later on 2026-10-29: "match the size of the photo to the rest of the pages"): the top band
   is the same as every other page and the profiles start just below it, no longer pulled up into the photo. */

.theme-blossom .profile-head .photo {
  border: 5px solid var(--shell);
  box-shadow: 0 8px 24px rgba(25, 44, 48, 0.14);
}


@media (max-width: 899px) {
  .theme-sunset .page-intro {
    background-position: top, center bottom;
  }
}

/* How It Works (owner, later on 2026-10-29): the sunlit sandy path toward the beach, moved here from the booking
   page ("from first hello to your first consultation": the way there). The shell on white sand came before. */

/* Thank you (owner's choice, 2026-10-29): "Thank you" written in the sand (Unsplash photo 1743187365355, free under
   the Unsplash License; set into a wider soft sand field so the writing sits whole, right of the title). Same band
   size, veil and fade as the other photo pages. */
.theme-thanks .page-intro {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(245, 240, 231, 0.7) 0, rgba(245, 240, 231, 0) calc(var(--header-h) + 50px)),
    #c9b49a url("../images/thank-you-sand-1920.jpg") right center / cover no-repeat;
}

.theme-thanks .page-intro .container {
  position: relative;
  z-index: 2;
}

.theme-thanks .page-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(251, 248, 242, 0.75) 0%, rgba(251, 248, 242, 0.55) 45%, rgba(251, 248, 242, 0) 78%);
}

.theme-thanks .page-intro::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(120px, 14vw, 180px);
  background: linear-gradient(180deg, rgba(245, 240, 231, 0) 0%, rgba(245, 240, 231, 0.55) 45%, var(--oat) 100%);
}

@media (max-width: 899px) {
  .theme-thanks .page-intro {
    background-image: linear-gradient(180deg, rgba(245, 240, 231, 0.7) 0, rgba(245, 240, 231, 0) calc(var(--header-h) + 40px)), url("../images/thank-you-sand-900.jpg");
    background-position: top, center;
  }

  .theme-thanks .page-intro::before {
    background: rgba(251, 248, 242, 0.6);
  }
}

/* Four facts in one row on wider screens (the confidentiality fact was added 2026-10-29, owner's request) */
@media (min-width: 1000px) {
  .facts {
    grid-template-columns: repeat(4, 1fr);
  }
}

.confidential-note {
  margin-top: 12px;
}

/* Privacy Policy (owner, 2026-10-29): a starfish floating in clear turquoise water, something precious kept safe
   beneath clear water (Unsplash photo 1606390311490, free; widened on the left with water from the same photo so
   the starfish sits right of the words), same band size, veil and fade as the other photo pages */
.theme-privacy .page-intro {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(245, 240, 231, 0.7) 0, rgba(245, 240, 231, 0) calc(var(--header-h) + 50px)),
    #8fc4b4 url("../images/starfish-1920.jpg") right center / cover no-repeat;
}

.theme-privacy .page-intro .container {
  position: relative;
  z-index: 2;
}

.theme-privacy .page-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(251, 248, 242, 0.8) 0%, rgba(251, 248, 242, 0.6) 45%, rgba(251, 248, 242, 0) 75%);
}

.theme-privacy .page-intro::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(120px, 14vw, 180px);
  background: linear-gradient(180deg, rgba(245, 240, 231, 0) 0%, rgba(245, 240, 231, 0.55) 45%, var(--oat) 100%);
}

@media (max-width: 899px) {
  .theme-privacy .page-intro {
    background-image: linear-gradient(180deg, rgba(245, 240, 231, 0.7) 0, rgba(245, 240, 231, 0) calc(var(--header-h) + 40px)), url("../images/starfish-900.jpg");
    background-position: top, center bottom;
  }

  .theme-privacy .page-intro::before {
    background: rgba(251, 248, 242, 0.62);
  }
}

/* Health history form (owner, 2026-10-29): a starfish held up in an open hand against a turquoise sea, "you share
   something personal, and it is held with care" (Unsplash photo 1678494016691, free; mirrored so the hand comes in
   from the right, widened on the left with sea and sky from the same photo). Same band, veil and fade as the other
   photo pages */
.theme-intake .page-intro {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(245, 240, 231, 0.7) 0, rgba(245, 240, 231, 0) calc(var(--header-h) + 50px)),
    #9fcfc2 url("../images/starfish-hand-1920.jpg") right bottom / cover no-repeat;
}

.theme-intake .page-intro .container {
  position: relative;
  z-index: 2;
}

.theme-intake .page-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(251, 248, 242, 0.82) 0%, rgba(251, 248, 242, 0.62) 45%, rgba(251, 248, 242, 0) 75%);
}

.theme-intake .page-intro::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(120px, 14vw, 180px);
  background: linear-gradient(180deg, rgba(245, 240, 231, 0) 0%, rgba(245, 240, 231, 0.55) 45%, var(--oat) 100%);
}

@media (max-width: 899px) {
  .theme-intake .page-intro {
    background-image: linear-gradient(180deg, rgba(245, 240, 231, 0.7) 0, rgba(245, 240, 231, 0) calc(var(--header-h) + 40px)), url("../images/starfish-hand-900.jpg");
    background-color: #98aec4;
    background-repeat: no-repeat;
    background-size: 100% calc(var(--header-h) + 40px), 100% auto;
    background-position: top, center bottom;
  }

  .theme-intake .page-intro::before {
    background: rgba(251, 248, 242, 0.66);
  }
}

/* Disclaimer (owner, 2026-10-29): a golden retriever sitting on the sand at a soft pink sunset, a gentle, friendly
   face for a serious page (Unsplash photo 1523480717984, free; owner's choice K8, "the cutest one"; mirrored so the
   dog sits right of the words and widened on the left). Height, veil and fade come from the shared top-band rules. */
.theme-disclaimer .page-intro {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(245, 240, 231, 0.7) 0, rgba(245, 240, 231, 0) calc(var(--header-h) + 50px)),
    #e9cdb8 url("../images/dog-1920.jpg") center 70% / cover no-repeat;
}

.theme-disclaimer .page-intro .container {
  position: relative;
  z-index: 2;
}

.theme-disclaimer .page-intro::before,
.theme-disclaimer .page-intro::after {
  content: "";
  position: absolute;
}

.theme-disclaimer .page-intro::before {
  inset: 0;
  z-index: 0;
}

.theme-disclaimer .page-intro::after {
  z-index: 1;
  left: 0;
  right: 0;
  bottom: -1px;
  background: linear-gradient(180deg, rgba(245, 240, 231, 0) 0%, rgba(245, 240, 231, 0.55) 45%, var(--oat) 100%);
}

@media (max-width: 899px) {
  .theme-disclaimer .page-intro {
    background-image: linear-gradient(180deg, rgba(245, 240, 231, 0.7) 0, rgba(245, 240, 231, 0) calc(var(--header-h) + 40px)), url("../images/dog-900.jpg");
    background-position: top, center bottom;
  }
}

/* Services: on wide screens the photo is taller than the band, so show a little less of the bottom to keep the
   yellow stone level with the title (owner, 2026-10-29: "yellow rock next to the word you") */
@media (min-width: 1440px) {
  .theme-forest .page-intro {
    background-position: top, right 58%;
  }
}

/* How It Works: on wide screens show a little more of the path, so the posts stay in view below the words */
@media (min-width: 1440px) {
  .theme-stars .page-intro {
    background-position: top, center 40%;
  }
}

/* ONE TOP BAND FOR EVERY PAGE (owner, 2026-10-29: "need to look flawless across the pages").
   Every page's photo band and the Home video share one height, one light veil behind the words, one fade at the
   bottom and one wash under the top bar. These rules come last so they win over each page's own settings; the
   photos and the colour each band fades into stay per page. */
.section.page-intro,
.has-video-hero .video-hero {
  min-height: clamp(600px, 86vh, 700px);
}

body[class*="theme-"] .page-intro::before {
  background: linear-gradient(90deg, rgba(251, 248, 242, 0.8) 0%, rgba(251, 248, 242, 0.6) 45%, rgba(251, 248, 242, 0) 78%);
}

body[class*="theme-"] .page-intro::after,
.has-video-hero .video-hero::after {
  height: 180px;
}

@media (max-width: 899px) {
  .section.page-intro,
  .has-video-hero .video-hero {
    min-height: 640px;
  }

  body[class*="theme-"] .page-intro::before {
    background: rgba(251, 248, 242, 0.62);
  }

  body[class*="theme-"] .page-intro::after,
  .has-video-hero .video-hero::after {
    height: 140px;
  }
}

/* Services: a lighter veil so more of the sea-glass photo shows behind the words (owner, 2026-10-30) */
@media (min-width: 900px) {
  /* New to Ayurveda? too, so the grain of the sand shows under the words (owner, 2026-10-30) */
  body.theme-sunset .page-intro::before,
  body.theme-apothecary .page-intro::before,
  body.theme-forest .page-intro::before {
    background: linear-gradient(90deg, rgba(251, 248, 242, 0.55) 0%, rgba(251, 248, 242, 0.3) 45%, rgba(251, 248, 242, 0) 70%);
  }
}

/* Our Practitioners: the two photos and names sit higher, rising into the soft bottom of the top photo
   (owner, 2026-10-30: "move up practitioner name and photo"). The band itself stays the same size; the
   section is see-through where it overlaps the photo, then carries on in the page's own colour. */
.theme-blossom [aria-labelledby="meet-heading"] {
  --lift: 170px;
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * var(--lift));
  padding-top: 0;
  background: linear-gradient(180deg, transparent 0, transparent var(--lift), var(--bloom-sky) var(--lift));
}

@media (min-width: 900px) {
  .theme-blossom [aria-labelledby="meet-heading"] {
    --lift: 255px;
  }

  /* On shorter screens the photos ease down a little so the name and title show before scrolling */
  .theme-blossom .profile-pair .photo {
    max-width: min(300px, 32vh);
  }
}

/* Our Practitioners: each name sits closer to its title, and the title is a little larger (owner, 2026-10-30) */
main .profile-pair .profile-head h2 {
  margin-top: 0;
  margin-bottom: 6px;
}

main .profile-pair .profile .photo {
  margin-bottom: 8px;
}

main .profile-pair .profile .title {
  font-size: 1.15rem;
  line-height: 1.35;
}

main .profile-pair .profile .location {
  margin-top: 2px;
  line-height: 1.35;
}

/* Home headline matches every other page's main line (owner, 2026-10-30): same letter spacing, and it starts at the same height as the other titles, which sit
   below a small label. */
.hero h1 {
  letter-spacing: -0.01em;
}

/* Home's small label above the headline, like the other pages (owner, 2026-10-30) */
.hero .eyebrow {
  margin-bottom: 14px;
}

/* "Ayurveda" in the Home headline is navy like the rest of the line (owner, 2026-10-30) */
.hero h1 .script {
  color: inherit;
  -webkit-text-stroke: 0;
  paint-order: normal;
}


/* Home: the beach sits a little lower in the video (owner, 2026-10-30; 1.18 and 1.08 were tried, 1.05 kept):
   the footage is shown slightly larger from its top edge, so the waterline and sand move down a touch */
.hero-video {
  object-position: center top;
  transform: scaleX(-1) scale(1.05);
  transform-origin: center top;
}

/* Home brought in line with the photo pages (owner, 2026-10-30, "why such a big change between Home and the
   other pages"): the same light haze behind the words, a slightly brighter and warmer video, and the facts
   band under it in pale seafoam (was solid sea green), fading softly into the page like the other bands. */
.hero-veil {
  background:
    linear-gradient(180deg, rgba(245, 240, 231, 0.7) 0, rgba(245, 240, 231, 0) calc(var(--header-h) + 50px)),
    linear-gradient(90deg, rgba(251, 248, 242, 0.8) 0%, rgba(251, 248, 242, 0.6) 45%, rgba(251, 248, 242, 0) 78%);
  -webkit-mask-image: none;
  mask-image: none;
}

.hero-video {
  filter: brightness(1.12) saturate(0.92) sepia(0.12);
}


.has-video-hero .video-hero::after {
  background: linear-gradient(180deg, rgba(221, 236, 230, 0) 0%, rgba(221, 236, 230, 0.55) 45%, var(--seafoam) 100%);
}

.has-video-hero .section-sea {
  background: linear-gradient(180deg, var(--seafoam) 0%, var(--seafoam) calc(100% - 110px), var(--oat) 100%);
}

@media (max-width: 899px) {
  .hero-veil {
    background: rgba(251, 248, 242, 0.62);
  }
}

/* Apothecary: the whole lavender shows, nothing cut off at the right edge (owner, 2026-10-30) */
@media (min-width: 900px) {
  .theme-apothecary .page-intro {
    background-position: top, 74% center;
  }
}

/* Booking page: since 2026-11-05 a bare foot stepping into a ribbon of white foam, sea-green skirt, no face
   (owner's choice A, Pexels photo 4240088, free; mirrored so the foot sits right of the words). The splash photo before
   it was shifted right on laptop screens; this one needs no shift. */

/* Apothecary on laptop-size screens: the lavender sits a little further right so it clears the title */
@media (min-width: 900px) and (max-width: 1599px) {
  .theme-apothecary .page-intro {
    background-position: top, 64% center;
  }
}

/* Two-step lists (Apothecary, while ordering is hidden before launch, 2026-11-01) */
@media (min-width: 768px) {
  .steps.steps-two { grid-template-columns: repeat(2, 1fr); max-width: none; }
}

/* Next page preview at the bottom of each menu page, inside the closing band (owner, 2026-11-05) */
.next-page {
  display: grid;
  grid-template-columns: 320px 1fr auto;
  align-items: center;
  gap: 32px;
  /* as wide as the top bar: from the logo to the Book now button (owner, 2026-11-05) */
  width: auto;
  margin: 24px 0 8px;
  padding: 0 32px 0 0;
  background: rgba(251, 248, 242, 0.9);
  border-radius: 18px;
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
  text-align: left;
  box-shadow: 0 6px 24px rgba(25, 44, 48, 0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.next-page:hover,
.next-page:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(25, 44, 48, 0.18);
}
.next-page-photo {
  width: 100%;
  height: 170px;
  object-fit: cover;
  display: block;
}
.next-page-text { display: flex; flex-direction: column; gap: 4px; padding: 20px 0; }
.next-page-label {
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
}
.next-page-title { font-family: var(--serif); font-size: 1.7rem; line-height: 1.2; }
.next-page-line { font-size: 0.98rem; }
.next-page-arrow { font-size: 1.8rem; color: var(--slate); transition: transform 0.25s ease; }
.next-page:hover .next-page-arrow { transform: translateX(4px); }

@media (min-width: 1225px) {
  .next-page { margin-inline: calc(24px - var(--gutter)); }
}
@media (max-width: 640px) {
  .next-page { grid-template-columns: 1fr auto; gap: 0 16px; padding: 0 20px 0 0; margin-top: 48px; }
  .next-page-photo { grid-column: 1 / -1; height: 140px; }
  .next-page-text { padding: 16px 0 18px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .next-page, .next-page-arrow { transition: none; }
}

/* ===== Section colours (owner, 2026-11-05) =====
   Every page: the top photo fades into mist; the sections below follow one order, each fading softly into the next:
   mist, cream, peach, cream, lavender, cream, then repeat. "Ready when you are" and the footer are always mist.
   Each section carries band-<colour> and from-<colour of the section above>, set in the HTML.
   This block overrides the older per-page colours above. Earlier version: backups/site-before-colour-fades-2026-11-05 */
:root {
  --band-mist: var(--mist);
  --band-cream: var(--oat);
  --band-peach: var(--pitta-pale);
  --band-lavender: var(--vata-pale);
}
.band-mist { --band: var(--band-mist); }
.band-cream { --band: var(--band-cream); }
.band-peach { --band: var(--band-peach); }
.band-lavender { --band: var(--band-lavender); }
.from-mist { --band-from: var(--band-mist); }
.from-cream { --band-from: var(--band-cream); }
.from-peach { --band-from: var(--band-peach); }
.from-lavender { --band-from: var(--band-lavender); }

body main > .band {
  background: linear-gradient(180deg, var(--band-from) 0, var(--band) 150px, var(--band) 100%) !important;
}
body main > .band::before,
body main > .band::after {
  display: none !important;
}

/* The top photo and the Home video fade into mist */
body[class*="theme-"] .page-intro::after,
body .has-video-hero .video-hero::after,
.has-video-hero .video-hero::after {
  background: linear-gradient(180deg, rgba(190, 216, 215, 0) 0%, rgba(190, 216, 215, 0.55) 45%, var(--mist) 100%) !important;
}

/* The footer is mist, fading in from the section above */
.footer-from-mist { --footer-from: var(--band-mist) !important; }
.footer-from-cream { --footer-from: var(--band-cream) !important; }
.footer-from-peach { --footer-from: var(--band-peach) !important; }
.footer-from-lavender { --footer-from: var(--band-lavender) !important; }
body .site-footer {
  background: linear-gradient(180deg, var(--footer-from) 0, var(--mist) 160px) !important;
}

/* The Next page card now sits at the end of the last section, above "Ready when you are" */
main > .band:not(.cta-section) .next-page {
  margin-top: 64px;
  margin-bottom: 0;
}

/* Practitioners: the profiles still rise into the photo, so that section stays see-through where it overlaps */
body.theme-blossom main > .band[aria-labelledby="meet-heading"] {
  background: linear-gradient(180deg, transparent 0, transparent var(--lift), var(--band) var(--lift)) !important;
}

/* The Next page card spans the full row even when its section is laid out in two columns */
main > .band .next-page {
  grid-column: 1 / -1;
  justify-self: stretch;
}

/* ===== Section colours, second version (owner, later on 2026-11-05) =====
   Each top photo fades into the page's own first colour (Home seafoam, Services soft gold, Practitioners soft peach,
   How It Works soft rose, every other page cream). The sections then go cream, lavender, cream, seafoam, repeating
   (a page that starts on cream goes straight to lavender), each fading into the next. "Ready when you are" and the
   footer stay mist. The classes are set in the HTML as before. */
:root {
  --band-seafoam: var(--seafoam);
  --band-gold: #f8f2df;
  --band-softpeach: #f8e8df;
  --band-rose: #f7e1dc;
}
.band-seafoam { --band: var(--band-seafoam); }
.band-gold { --band: var(--band-gold); }
.band-softpeach { --band: var(--band-softpeach); }
.band-rose { --band: var(--band-rose); }
.from-seafoam { --band-from: var(--band-seafoam); }
.from-gold { --band-from: var(--band-gold); }
.from-softpeach { --band-from: var(--band-softpeach); }
.from-rose { --band-from: var(--band-rose); }
.footer-from-seafoam { --footer-from: var(--band-seafoam) !important; }

.photo-to-cream { --photo-to: var(--band-cream); }
.photo-to-seafoam { --photo-to: var(--band-seafoam); }
.photo-to-gold { --photo-to: var(--band-gold); }
.photo-to-softpeach { --photo-to: var(--band-softpeach); }
.photo-to-rose { --photo-to: var(--band-rose); }
body[class*="theme-"] .page-intro[class*="photo-to-"]::after,
body.has-video-hero .video-hero[class*="photo-to-"]::after {
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--photo-to) 55%, transparent) 45%, var(--photo-to) 100%) !important;
}

/* The top bar blends into whatever section is under it once the visitor scrolls (owner, 2026-11-05): a light
   frosted glass with no edge line, so the section's own colour shows through, instead of a solid cream bar */
.site-header.scrolled:not(.nav-open) {
  background: rgba(251, 248, 242, 0.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  border-bottom-color: transparent;
}
.site-header.nav-open {
  border-bottom-color: transparent;
}

/* Apothecary (owner, 2026-11-05): a glass bottle of dried flowers standing in the foam at the water's edge, open sea
   and a far shore behind (owner's choice 2 from design/apothecary-free-bottles-2026-11-05.jpg; Pexels photo 26711150,
   free). A tall photo, widened on the left with a smooth wash of its own sky, sea and sand (sky blended into sea where
   the headland would repeat) plus its own foam and sand texture, so the bottle sits right of the words. Tried the same
   day: indoor apothecary bottles (Pexels 20419194), the same bottle in shallower water, and many beach and herb photos;
   before today, the lavender by the sea (lavender-sea-*.jpg). */
body.theme-apothecary .page-intro {
  background-image: linear-gradient(180deg, rgba(245, 240, 231, 0.7) 0, rgba(245, 240, 231, 0) calc(var(--header-h) + 50px)), url("../images/bottle-shore-1920.jpg") !important;
  background-position: top, right center !important;
  background-color: #b89c78;
}
@media (max-width: 899px) {
  body.theme-apothecary .page-intro {
    background-image: linear-gradient(180deg, rgba(245, 240, 231, 0.7) 0, rgba(245, 240, 231, 0) calc(var(--header-h) + 40px)), url("../images/bottle-shore-900.jpg") !important;
    background-position: top, center 60% !important;
  }
}

/* Apothecary: the same light veil as Services and New to Ayurveda? (owner, 2026-11-05: "match them") */
@media (min-width: 900px) {
  body.theme-apothecary .page-intro::before {
    background: linear-gradient(90deg, rgba(251, 248, 242, 0.55) 0%, rgba(251, 248, 242, 0.3) 45%, rgba(251, 248, 242, 0) 70%) !important;
  }
}

/* Contact (owner, 2026-11-05): the footprints sit further right on computers, well clear of the words */
@media (min-width: 900px) {
  body.theme-shore .page-intro {
    background-position: top, 30% bottom;
  }
}

/* Book: a short note under the practitioner cards about the package (owner, 2026-11-05) */
.book-note {
  max-width: 760px;
  margin: 28px 0 0;
  font-size: 0.98rem;
}

/* Book: each practitioner's own booking choices, shown after choosing a practitioner (owner, 2026-11-05) */
.book-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 8px 0 28px;
}
.book-option {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  padding: 16px 18px;
  border: 1px solid var(--sand);
  border-top: 3px solid var(--sea);
  border-radius: var(--radius);
  background: var(--shell);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: box-shadow 0.2s ease;
}
.book-option:hover,
.book-option:focus-visible {
  box-shadow: 0 4px 16px rgba(25, 44, 48, 0.1);
}
.book-option[aria-pressed="true"] {
  border-color: var(--sea);
  background: #eef5f4;
}
.book-option-label { font-family: var(--serif); font-size: 1.15rem; }
.book-option-note { font-size: 0.95rem; }
@media (max-width: 899px) {
  .book-options { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .book-options { grid-template-columns: 1fr; }
}

/* Terms of Service (2026-11-05): a lit lighthouse on a rocky breakwater at dusk, "a steady light that guides"
   (Unsplash photo 1651341772765, free; the owner's earlier choice L15 for Practitioners, reused here) */
.theme-terms .page-intro {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(245, 240, 231, 0.7) 0, rgba(245, 240, 231, 0) calc(var(--header-h) + 50px)),
    #c9b8c4 url("../images/lighthouse-1920.jpg") right center / cover no-repeat;
}
.theme-terms .page-intro .container { position: relative; z-index: 2; }
.theme-terms .page-intro::before,
.theme-terms .page-intro::after { content: ""; position: absolute; }
.theme-terms .page-intro::before { inset: 0; z-index: 0; }
.theme-terms .page-intro::after { z-index: 1; left: 0; right: 0; bottom: -1px; }
@media (max-width: 899px) {
  .theme-terms .page-intro {
    background-image: linear-gradient(180deg, rgba(245, 240, 231, 0.7) 0, rgba(245, 240, 231, 0) calc(var(--header-h) + 40px)), url("../images/lighthouse-900.jpg");
    background-position: top, center bottom;
  }
}

/* New to Ayurveda?: a cup of tea on a sunny windowsill beside "The ease of Ayurveda" (owner's choice 2 of 5,
   2026-11-05; Pexels photo 370018, free) */
.ease-photo {
  margin: 28px 0 0;
  max-width: 420px;
}
.ease-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

/* New to Ayurveda?: the words beside the tea photo run evenly from the top of "Getting started" to the bottom of
   the photo, with the two buttons below, outside it (owner, 2026-11-05). Computers only; phones stack as before. */
@media (min-width: 900px) {
  [aria-labelledby="ease-heading"] .split { align-items: stretch; row-gap: 32px; }
  [aria-labelledby="ease-heading"] .split > div:nth-child(2) {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  [aria-labelledby="ease-heading"] .split > div:nth-child(2) > * { margin-top: 0; margin-bottom: 0; }
  [aria-labelledby="ease-heading"] .ease-step > :last-child { margin-bottom: 0; }
  [aria-labelledby="ease-heading"] .ease-buttons { grid-column: 2; margin: 0; }
}