/* The Cosmic Key with Chitra Jain: public site styles.
 *
 * Everything below is built from the tokens in :root. Use them instead of raw values:
 *   spacing   --sp-1 … --sp-9   (4, 8, 12, 16, 24, 32, 48, 64, 96px)
 *   type      --fs-sm … --fs-hero
 *   radius    --r-sm (inputs, small controls), --r-md (cards), --r-pill (buttons, badges)
 * Breakpoints (media queries cannot use variables, so keep to these three):
 *   640px  phones        900px  tablets / small laptops        1100px  wide screens
 */

:root {
  color-scheme: dark;

  /* colours */
  --bg: #0d0b21;
  --bg-2: #141130;
  --surface: #1b1740;
  --surface-2: #231e4f;
  --gold: #e2be73;
  --gold-2: #f4dca3;
  --gold-ink: #1b1533;
  /* gold used as text and lines (links, labels, prices); Dawn makes it darker so it reads on ivory */
  --accent: var(--gold);
  --accent-soft: var(--gold-2);
  --text: #f1ecfa;
  --muted: #cbc4e2;
  --danger: #ff8a8a;
  --ok: #8fe0b0;
  --info: #a9c4ff;
  --line: rgba(226, 190, 115, 0.22);
  --gold-a06: rgba(226, 190, 115, 0.06);
  --gold-a12: rgba(226, 190, 115, 0.12);
  --gold-a25: rgba(226, 190, 115, 0.25);
  --gold-a40: rgba(226, 190, 115, 0.4);
  --danger-a12: rgba(255, 138, 138, 0.12);
  --danger-a35: rgba(255, 138, 138, 0.35);
  --ok-a12: rgba(143, 224, 176, 0.12);
  --ok-a35: rgba(143, 224, 176, 0.35);
  --info-a12: rgba(169, 196, 255, 0.12);
  --info-a35: rgba(169, 196, 255, 0.35);
  --overlay: rgba(13, 11, 33, 0.9);
  --surface-a45: rgba(35, 30, 79, 0.45);

  /* spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --gutter: 20px;

  /* type */
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: 1.1875rem;
  --fs-xl: 1.5rem;
  --fs-2xl: clamp(1.75rem, 4.5vw, 2.4rem);
  --fs-3xl: clamp(2.2rem, 6.5vw, 3.4rem);
  --fs-hero: clamp(2.6rem, 9vw, 4.6rem);

  /* shape */
  --r-sm: 10px;
  --r-md: 16px;
  --r-pill: 999px;
  --shadow-1: 0 6px 24px var(--gold-a25);
  --shadow-2: 0 8px 30px var(--gold-a40);
  --focus-ring: 0 0 0 3px var(--gold-a25);

  /* sizes */
  --wrap: 1140px;
  --narrow: 780px;
  --tap: 44px;
  --control-h: 48px;
}

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

/* Anything marked hidden stays hidden, whatever its own display style. */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  /* Phones flash a blue box on every tap; buttons and links have their own pressed look. */
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: 1.7;
  overflow-wrap: break-word;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Keep scrolled-to sections clear of the sticky header. */
[id] {
  scroll-margin-top: 88px;
}

main {
  flex: 1;
  position: relative;
  z-index: 1;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

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

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

/* ---- typography ---- */
h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 var(--sp-3);
  letter-spacing: 0.01em;
}

h1 {
  font-size: var(--fs-3xl);
}

h2 {
  font-size: var(--fs-2xl);
}

h3 {
  font-size: var(--fs-xl);
}

h4 {
  font-size: var(--fs-lg);
}

p {
  margin: 0 0 var(--sp-4);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.muted {
  color: var(--muted);
}

.small {
  font-size: var(--fs-sm);
}

.center {
  text-align: center;
}

.lead {
  font-size: var(--fs-lg);
  color: var(--muted);
}

.eyebrow {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--accent);
  margin: 0 0 var(--sp-3);
}

.eyebrow a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}

.eyebrow a:hover {
  text-decoration: underline;
}

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: var(--sp-4);
  top: var(--sp-4);
  z-index: 100;
  background: var(--gold);
  color: var(--gold-ink);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-sm);
}

.hp {
  position: absolute;
  left: -9999px;
}

/* ---- layout ---- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.narrow {
  max-width: var(--narrow);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.stack > * {
  margin: 0;
}

.grid {
  display: grid;
  gap: var(--sp-5);
}

.cards {
  grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
}

.quotes {
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}

.section {
  padding: var(--sp-8) 0;
}

.section.tight {
  padding-top: var(--sp-5);
}

.section.alt {
  background: linear-gradient(180deg, transparent, var(--surface-a45) 20%, var(--surface-a45) 80%, transparent);
}

.section-head {
  text-align: center;
  margin-bottom: var(--sp-6);
}

.section-head h2 {
  margin: 0;
}

/* ---- starfield ---- */
.sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1px 1px at 12% 18%, #fff8 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 12%, #fff9 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 42% 32%, #ffe9b8aa 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 44%, #fff7 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 64%, #fff6 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 62% 76%, #fff8 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 88%, #fff6 50%, transparent 51%),
    radial-gradient(1px 1px at 94% 90%, #ffe9b899 50%, transparent 51%),
    radial-gradient(1px 1px at 52% 52%, #fff5 50%, transparent 51%),
    radial-gradient(1px 1px at 33% 8%, #fff7 50%, transparent 51%),
    radial-gradient(ellipse 80% 60% at 80% -10%, #3b2b7a66, transparent 70%),
    radial-gradient(ellipse 70% 50% at -10% 30%, #1e3a7a44, transparent 70%);
}

/* ---- header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--overlay);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  gap: var(--sp-4);
}

.brand {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  gap: var(--sp-3);
  text-decoration: none;
  color: var(--text);
}

.brand:hover {
  color: var(--text);
}

.logo-mark {
  width: 42px;
  height: 42px;
  color: var(--accent);
  flex: none;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.brand-top {
  font-family: var(--serif);
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.brand-sub {
  font-size: var(--fs-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.site-nav a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--text);
  text-decoration: none;
  font-size: var(--fs-sm);
  padding: 0 var(--sp-3);
  border-radius: var(--r-pill);
}

.site-nav a:not(.btn):hover,
.site-nav a[aria-current='page'] {
  color: var(--accent-soft);
  background: var(--gold-a12);
}

.site-nav .btn {
  margin-left: var(--sp-2);
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  width: var(--tap);
  height: var(--tap);
  padding: var(--sp-3) 10px;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
}

.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--accent-soft);
  border-radius: 2px;
}

@media (max-width: 900px) {
  .nav-toggle {
    display: flex;
  }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    padding: var(--sp-3) var(--gutter) var(--sp-5);
    background: var(--bg-2);
    border-bottom: 1px solid var(--line);
  }

  .site-nav.open {
    display: flex;
  }

  .site-nav a:not(.btn) {
    min-height: var(--control-h);
    padding: 0 var(--sp-3);
    border-radius: var(--r-sm);
    font-size: var(--fs-base);
  }

  .site-nav .btn {
    margin: var(--sp-3) 0 0;
  }
}

/* ---- buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--sans);
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.02em;
  min-height: var(--control-h);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: transparent;
  color: var(--accent-soft);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition:
    transform 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:disabled {
  opacity: 0.6;
  cursor: wait;
  transform: none;
}

.btn-gold {
  background: linear-gradient(135deg, var(--gold-2), var(--gold));
  color: var(--gold-ink);
  box-shadow: var(--shadow-1);
}

.btn-gold:hover {
  color: var(--gold-ink);
  box-shadow: var(--shadow-2);
}

.btn-ghost {
  color: var(--accent-soft);
  border-color: var(--line);
}

.btn-ghost:hover {
  color: var(--accent-soft);
  border-color: var(--gold);
  background: var(--gold-a06);
}

.btn-danger,
.btn-ghost.danger {
  color: var(--danger);
  border-color: var(--danger-a35);
}

.btn-danger:hover,
.btn-ghost.danger:hover {
  color: var(--danger);
  border-color: var(--danger);
  background: var(--danger-a12);
}

.btn-sm {
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
}

.btn-lg {
  min-height: 56px;
  padding: var(--sp-3) var(--sp-6);
  font-size: var(--fs-lg);
}

.btn-link {
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}

.btn-link:hover {
  text-decoration: underline;
}

.btn-row {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  align-items: center;
}

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

/* ---- heroes ---- */
.hero {
  position: relative;
  overflow: hidden;
  padding: var(--sp-9) 0 var(--sp-8);
  text-align: center;
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 880px;
}

.hero-title {
  font-size: var(--fs-hero);
  background: linear-gradient(180deg, var(--text), var(--gold-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub {
  font-size: var(--fs-lg);
  color: var(--muted);
  max-width: 640px;
  margin: 0 auto var(--sp-6);
}

.orbit {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 1;
}

.orbit span {
  position: absolute;
  border: 1px solid var(--line);
  border-radius: 50%;
  aspect-ratio: 1;
}

.orbit span:nth-child(1) {
  width: min(520px, 90vw);
}

.orbit span:nth-child(2) {
  width: min(780px, 130vw);
  border-style: dashed;
  opacity: 0.6;
  animation: spin 160s linear infinite;
}

.orbit span:nth-child(3) {
  width: min(1060px, 170vw);
  opacity: 0.35;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .orbit span {
    animation: none !important;
  }

  html {
    scroll-behavior: auto;
  }

  .btn:hover {
    transform: none;
  }
}

.page-hero {
  padding: var(--sp-8) 0 var(--sp-6);
  text-align: center;
}

.page-hero.compact {
  padding: var(--sp-7) 0 var(--sp-2);
}

.page-hero h1 {
  margin-bottom: var(--sp-4);
}

.page-hero .lead,
.page-hero p {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.page-hero .btn-row {
  margin-top: var(--sp-5);
}

.cta-band {
  padding: var(--sp-8) 0;
  border-top: 1px solid var(--line);
  background: radial-gradient(ellipse 60% 100% at 50% 100%, var(--gold-a12), transparent 70%);
}

/* ---- prose (admin-written Markdown) ---- */
.prose > :last-child {
  margin-bottom: 0;
}

.prose h2 {
  margin-top: var(--sp-6);
}

.prose h3 {
  margin-top: var(--sp-5);
}

.prose ul,
.prose ol {
  padding-left: 1.3em;
  margin: 0 0 var(--sp-4);
}

.prose li {
  margin-bottom: var(--sp-2);
}

.prose strong {
  font-weight: 600;
  color: var(--text);
}

.prose a {
  overflow-wrap: anywhere;
}

.steps ol {
  list-style: none;
  counter-reset: step;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
}

.steps ol li {
  counter-increment: step;
  position: relative;
  padding: var(--sp-4) var(--sp-5) var(--sp-4) 72px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin: 0;
}

.steps ol li::before {
  content: counter(step);
  position: absolute;
  left: var(--sp-5);
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--gold-ink);
  background: var(--gold);
}

.table-wrap {
  overflow-x: auto;
  margin: 0 0 var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.prose th,
.prose td {
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.prose th {
  color: var(--accent-soft);
  font-weight: 500;
  background: var(--gold-a06);
}

.prose tr:last-child td {
  border-bottom: 0;
}

/* ---- cards ---- */
.card {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.card-pad {
  padding: var(--sp-6);
}

.card-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.card-body {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-body > .grow {
  flex: 1;
}

.card h3 a {
  color: var(--text);
  text-decoration: none;
  display: flex;
  align-items: center;
  min-height: var(--tap);
}

.card h3 a:hover {
  color: var(--accent-soft);
}

.service-card,
.post-card {
  display: flex;
  flex-direction: column;
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: var(--sp-3);
  margin: 0 0 var(--sp-4);
}

.meta-row.center {
  justify-content: center;
  border: 0;
  padding: 0;
}

.price {
  color: var(--accent-soft);
  font-weight: 500;
}

.card-actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.card-actions .btn {
  flex: 1 1 120px;
}

.quote {
  padding: var(--sp-6);
  margin: 0;
}

.quote blockquote {
  margin: 0 0 var(--sp-4);
  font-family: var(--serif);
  font-size: var(--fs-xl);
  font-style: italic;
  line-height: 1.45;
}

.quote figcaption {
  font-weight: 500;
  color: var(--accent-soft);
}

.detail-img {
  border-radius: var(--r-md);
  margin-bottom: var(--sp-6);
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: var(--sp-7);
  align-items: start;
}

.about-photo {
  border-radius: var(--r-md);
  border: 1px solid var(--line);
}

@media (max-width: 900px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .about-photo {
    max-width: 360px;
  }
}

/* ---- service list on /book ---- */
.pick-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sp-3);
}

.pick {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  min-height: 72px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}

.pick:hover {
  border-color: var(--gold);
  color: var(--text);
}

.pick-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pick-name strong {
  font-family: var(--serif);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 1.2;
}

/* ---- booking widget ---- */
.booking-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}

.booking-head h2,
.booking-head h3 {
  margin: 0;
}

.tz {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--muted);
  flex: 1 1 280px;
  max-width: 420px;
}

.tz span {
  white-space: nowrap;
}

.booking-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--sp-5);
}

@media (max-width: 900px) {
  .booking-grid {
    grid-template-columns: 1fr;
  }
}

.calendar,
.times {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-5);
}

.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  font-family: var(--serif);
  font-size: var(--fs-xl);
  font-weight: 600;
}

.cal-nav {
  width: var(--tap);
  height: var(--tap);
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--accent-soft);
  font-size: var(--fs-xl);
  line-height: 1;
  cursor: pointer;
}

.cal-nav:hover:not(:disabled) {
  border-color: var(--gold);
}

.cal-nav:disabled {
  opacity: 0.3;
  cursor: default;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--sp-1);
  text-align: center;
}

.cal-dow {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: var(--sp-1) 0;
}

.cal-day {
  width: 100%;
  min-height: var(--tap);
  max-width: 52px;
  aspect-ratio: 1;
  justify-self: center;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  opacity: 0.45;
  font: inherit;
  font-size: var(--fs-sm);
  display: grid;
  place-items: center;
  padding: 0;
}

.cal-day.available {
  opacity: 1;
  color: var(--accent-soft);
  background: var(--gold-a12);
  border-color: var(--line);
  cursor: pointer;
  font-weight: 500;
}

.cal-day.available:hover {
  border-color: var(--gold);
}

.cal-day.selected {
  background: var(--gold);
  color: var(--gold-ink);
  border-color: var(--gold);
}

.cal-day.today {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.times h3 {
  font-size: var(--fs-lg);
}

.time-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: var(--sp-2);
}

.time-btn {
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}

.time-btn:hover {
  border-color: var(--gold);
  color: var(--accent-soft);
}

.time-btn.selected {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--gold-ink);
  font-weight: 500;
}

/* ---- forms ---- */
.form-card {
  padding: var(--sp-6);
}

.form-card + .form-card {
  margin-top: var(--sp-5);
}

.form-card > h2,
.form-card > h3 {
  font-size: var(--fs-xl);
}

.chosen {
  font-size: var(--fs-base);
  color: var(--accent-soft);
  border-left: 3px solid var(--gold);
  padding-left: var(--sp-3);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}

.field-label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
}

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

.field-hint {
  font-size: var(--fs-xs);
  color: var(--muted);
}

.field.full,
.field:has(textarea) {
  grid-column: 1 / -1;
}

input,
select,
textarea {
  font: inherit;
  font-size: var(--fs-base);
  line-height: 1.4;
  color: var(--text);
  background-color: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
  width: 100%;
  min-height: var(--control-h);
}

textarea {
  resize: vertical;
}

select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23e2be73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
}


/* Date and time boxes: the same arrow as dropdowns, set in from the edge (phones
   otherwise draw their own arrow right against the border). The native picker
   button is kept but made invisible over that area, so tapping it still opens
   the calendar or clock. */
input[type='date'],
input[type='time'],
input[type='datetime-local'],
input[type='month'] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  padding-right: 48px;
  text-align: left;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23e2be73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
}

input[type='date']::-webkit-calendar-picker-indicator,
input[type='time']::-webkit-calendar-picker-indicator,
input[type='datetime-local']::-webkit-calendar-picker-indicator,
input[type='month']::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  right: 0;
  width: 48px;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

input::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
}

select option,
select optgroup {
  background: var(--bg-2);
  color: var(--text);
}

input::placeholder,
textarea::placeholder {
  color: var(--muted);
  opacity: 0.7;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: var(--focus-ring);
}

input[type='checkbox'],
input[type='radio'] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  min-height: 0;
  padding: 0;
  flex: none;
  margin: 0;
  border: 1.5px solid var(--gold);
  background: var(--bg-2);
  display: inline-grid;
  place-content: center;
  cursor: pointer;
}

input[type='checkbox'] {
  border-radius: 6px;
}

input[type='radio'] {
  border-radius: 50%;
}

input[type='checkbox']::after {
  content: '';
  width: 6px;
  height: 11px;
  border: solid var(--gold-ink);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) translate(-1px, -1px);
  opacity: 0;
}

input[type='radio']::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold-ink);
  opacity: 0;
}

input[type='checkbox']:checked,
input[type='radio']:checked {
  background: var(--gold);
}

input[type='checkbox']:checked::after,
input[type='radio']:checked::after {
  opacity: 1;
}

.check {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--tap);
  margin: 0 0 var(--sp-4);
  cursor: pointer;
}

fieldset {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  margin: 0 0 var(--sp-5);
  min-width: 0;
}

legend {
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  padding: 0 var(--sp-2);
}

/* Pick-one and pick-several questions. */
fieldset.choice-group {
  border: 0;
  padding: 0;
  margin: 0;
}

.choice-group legend {
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
  padding: 0;
  margin-bottom: var(--sp-2);
}

.choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.check.choice {
  margin: 0;
  padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg-2);
  transition:
    border-color var(--dur-1, 180ms) ease,
    background var(--dur-1, 180ms) ease;
}

.check.choice:has(input:checked) {
  border-color: var(--gold);
  background: var(--gold-a12);
}

.form-heading {
  border-top: 1px solid var(--line);
  padding-top: var(--sp-4);
  margin-top: var(--sp-2);
}

.form-heading h4 {
  margin: 0;
  color: var(--accent-soft);
}

fieldset .form-grid {
  margin-bottom: 0;
}

.form-actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  justify-content: flex-end;
  margin: var(--sp-5) 0 0;
}

/* Longer forms in steps (see FormStep in views/ui.tsx). Without JavaScript every step
   shows one under the other; site.js shows one at a time with Back and Next. */
.form-step {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: var(--sp-5) 0 0;
  margin: var(--sp-5) 0 0;
}

.form-step:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.stepping .form-step {
  border-top: 0;
  padding-top: 0;
}

.form-step .step-title {
  /* Floated so the title sits below the step's top line, not on it. */
  float: left;
  width: 100%;
  font-family: var(--serif);
  font-size: var(--fs-lg);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
  padding: 0;
  margin-bottom: var(--sp-4);
}

.form-step .step-title + * {
  clear: both;
}

.step-progress {
  margin: var(--sp-4) 0 var(--sp-5);
}

.step-count {
  margin: 0 0 var(--sp-2);
}

.step-bar {
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--line);
  overflow: hidden;
}

.step-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--gold);
  border-radius: inherit;
  transition: width var(--dur-2, 300ms) ease;
}

.show-if {
  display: contents;
}

.show-if[hidden] {
  display: none;
}

.form-final {
  margin-top: var(--sp-5);
}

.agreement .check {
  align-items: flex-start;
  margin-bottom: var(--sp-2);
}

.agreement .check input {
  margin-top: 2px;
  flex: none;
}

.agreement-note {
  margin: 0 0 var(--sp-4);
  padding-left: calc(22px + var(--sp-3));
}

.link-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.form-note {
  margin: var(--sp-3) 0 0;
}

.cf-turnstile {
  margin: 0 0 var(--sp-4);
  min-height: 65px;
}

/* Phone: country code and number side by side. */
.phone-field {
  display: grid;
  grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr);
  gap: var(--sp-2);
}

.phone-field .phone-code {
  padding-left: var(--sp-3);
  padding-right: 34px;
  background-position: right 12px center;
  text-overflow: ellipsis;
}

/* ---- notices and badges ---- */
.notice {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
  margin: 0 0 var(--sp-4);
  background: var(--gold-a06);
}

.notice > :last-child {
  margin-bottom: 0;
}

.notice-title {
  font-family: var(--serif);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 var(--sp-2);
}

.notice.success {
  border-color: var(--ok-a35);
  background: var(--ok-a12);
}

.notice.success .notice-title {
  color: var(--ok);
}

.notice.error {
  color: var(--danger);
  border-color: var(--danger-a35);
  background: var(--danger-a12);
}

.notice.info {
  border-color: var(--info-a35);
  background: var(--info-a12);
}

/* "Are you sure?" step on the manage-booking page. */
.confirm-box {
  margin: var(--sp-5) 0 0;
}

.confirm-box p:not(.notice-title) {
  color: var(--text);
}

.confirm-box .form-actions {
  margin-top: var(--sp-4);
}

.notice.large {
  padding: var(--sp-6);
  border-radius: var(--r-md);
}

.badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  color: var(--accent-soft);
  background: var(--gold-a06);
}

.badge.ok {
  color: var(--ok);
  border-color: var(--ok-a35);
  background: var(--ok-a12);
}

.badge.danger {
  color: var(--danger);
  border-color: var(--danger-a35);
  background: var(--danger-a12);
}

.badge.info {
  color: var(--info);
  border-color: var(--info-a35);
  background: var(--info-a12);
}

/* ---- contact, summaries, FAQ ---- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}

@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

.side h3 {
  font-size: var(--fs-xl);
}

.side section + section {
  margin-top: var(--sp-6);
}

.plain {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-4);
}

.plain li {
  margin-bottom: var(--sp-2);
  overflow-wrap: anywhere;
}

.summary {
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-5);
}

.summary dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--sp-3) var(--sp-5);
  margin: 0;
}

.summary dt {
  color: var(--muted);
}

.summary dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.faq details {
  margin-bottom: var(--sp-3);
  padding: 0 var(--sp-5);
}

.faq summary {
  cursor: pointer;
  font-family: var(--serif);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 1.3;
  min-height: 64px;
  display: flex;
  align-items: center;
  padding: var(--sp-3) var(--sp-6) var(--sp-3) 0;
  list-style: none;
  position: relative;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '+';
  position: absolute;
  right: 0;
  color: var(--accent);
  font-size: var(--fs-xl);
  line-height: 1;
  top: 50%;
  transform: translateY(-50%);
}

.faq details[open] summary::after {
  content: '\2212';
}

.faq details > .prose {
  padding-bottom: var(--sp-4);
}

/* ---- footer ---- */
.site-footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--line);
  background: var(--overlay);
  padding: var(--sp-7) 0 var(--sp-5);
  font-size: var(--fs-sm);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--sp-6);
}

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.footer-grid .brand {
  margin-bottom: var(--sp-3);
}

.footer-h {
  margin: 0 0 var(--sp-2);
}

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

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--muted);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.footer-links a:hover {
  color: var(--accent-soft);
}

.footer-bottom {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-xs);
}

/* ---- phones ---- */
.mobile-cta {
  display: none;
}

@media (max-width: 640px) {
  :root {
    --gutter: 16px;
  }

  .section {
    padding: var(--sp-7) 0;
  }

  .section.tight {
    padding-top: var(--sp-4);
  }

  .hero {
    padding: var(--sp-8) 0 var(--sp-7);
  }

  .page-hero {
    padding: var(--sp-7) 0 var(--sp-5);
  }

  .page-hero.compact {
    padding: var(--sp-6) 0 var(--sp-2);
  }

  .eyebrow {
    letter-spacing: 0.14em;
  }

  .card-pad,
  .form-card,
  .quote,
  .summary,
  .notice.large {
    padding: var(--sp-5) var(--sp-4);
  }

  .card-body {
    padding: var(--sp-5) var(--sp-4);
  }

  .calendar,
  .times {
    padding: var(--sp-4) var(--sp-3);
  }

  fieldset {
    padding: var(--sp-4) var(--sp-3);
  }

  .btn-row .btn,
  .form-actions .btn {
    width: 100%;
  }

  .form-actions {
    flex-direction: column-reverse;
  }

  .faq details {
    padding: 0 var(--sp-4);
  }

  .steps ol li {
    padding: var(--sp-4) var(--sp-4) var(--sp-4) 64px;
  }

  .steps ol li::before {
    left: var(--sp-4);
  }

  .summary dl {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .summary dd {
    margin-bottom: var(--sp-3);
  }

  .tz {
    flex-basis: 100%;
    max-width: none;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }

  /* Always-visible booking button at the bottom of the screen. */
  .mobile-cta {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    padding: var(--sp-3) var(--gutter) calc(var(--sp-3) + env(safe-area-inset-bottom));
    background: var(--overlay);
    border-top: 1px solid var(--line);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .mobile-cta .btn {
    width: 100%;
  }

  body.has-mobile-cta {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }
}

/* ==========================================================================
 * Motion: calm and quick. Only opacity and transform are animated, and everything
 * is switched off for visitors who ask their device for reduced motion.
 * ========================================================================== */

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 180ms;
  --dur-2: 320ms;
  --dur-3: 700ms;
}

/* Page to page: a soft cross-fade, with the header staying put (supporting browsers). */
@view-transition {
  navigation: auto;
}

.site-header {
  view-transition-name: site-header;
}

.mobile-cta {
  view-transition-name: mobile-cta;
}

::view-transition-old(root) {
  animation: vt-out var(--dur-2) var(--ease-in-out) both;
}

::view-transition-new(root) {
  animation: vt-in 420ms var(--ease-out) both;
}

@keyframes vt-out {
  to {
    opacity: 0;
  }
}

@keyframes vt-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* Heroes arrive in a gentle sequence when the page opens. */
@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

.hero-inner > *,
.page-hero .wrap > * {
  animation: rise-in var(--dur-3) var(--ease-out) both;
}

.hero-inner > :nth-child(2),
.page-hero .wrap > :nth-child(2) {
  animation-delay: 90ms;
}

.hero-inner > :nth-child(3),
.page-hero .wrap > :nth-child(3) {
  animation-delay: 180ms;
}

.hero-inner > :nth-child(n + 4),
.page-hero .wrap > :nth-child(n + 4) {
  animation-delay: 270ms;
}

.orbit {
  animation: orbit-in 1.6s var(--ease-out) both;
}

@keyframes orbit-in {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
}

.orbit span:nth-child(3) {
  animation: spin 240s linear infinite reverse;
}

/* Stars twinkle slowly on two layers. */
.sky::before,
.sky::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1.5px 1.5px at 18% 28%, #fffc 50%, transparent 51%),
    radial-gradient(1px 1px at 64% 22%, #ffe9b8dd 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 82% 62%, #fffb 50%, transparent 51%),
    radial-gradient(1px 1px at 36% 82%, #fffc 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 12%, #ffe9b8cc 50%, transparent 51%);
  animation: twinkle 7s ease-in-out infinite;
}

.sky::after {
  background:
    radial-gradient(1px 1px at 8% 52%, #fffc 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 48% 12%, #ffe9b8dd 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 88%, #fffb 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 28% 42%, #fffc 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 58%, #fffb 50%, transparent 51%);
  animation-duration: 9s;
  animation-delay: -4s;
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0.15;
  }
  50% {
    opacity: 1;
  }
}

/* Sections rise into view as the visitor scrolls. /js/site.js adds .reveal only to
   things that start below the screen, so nothing visible ever blinks, and without
   JavaScript nothing is hidden. */
.reveal {
  transition:
    opacity var(--dur-3) var(--ease-out),
    transform var(--dur-3) var(--ease-out),
    border-color var(--dur-2) ease,
    box-shadow var(--dur-2) ease;
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal:not(.in) {
  opacity: 0;
  transform: translateY(22px);
}

/* Cards and list items that appear together arrive one after another. */
:is(.cards, .quotes, .pick-list) > .reveal:nth-child(2),
.steps li.reveal:nth-child(2) {
  --reveal-delay: 80ms;
}

:is(.cards, .quotes, .pick-list) > .reveal:nth-child(3),
.steps li.reveal:nth-child(3) {
  --reveal-delay: 160ms;
}

:is(.cards, .quotes, .pick-list) > .reveal:nth-child(n + 4),
.steps li.reveal:nth-child(n + 4) {
  --reveal-delay: 240ms;
}

/* ---- touch and hover ---- */
.card,
.pick {
  transition:
    transform var(--dur-2) var(--ease-out),
    border-color var(--dur-2) ease,
    box-shadow var(--dur-2) ease;
}

@media (hover: hover) {
  .service-card:hover,
  .post-card:hover,
  .pick:hover {
    transform: translateY(-4px);
    border-color: var(--gold-a40);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--gold-a12);
  }

  .card-img {
    transition: transform 900ms var(--ease-out);
  }

  .service-card:hover .card-img,
  .post-card:hover .card-img {
    transform: scale(1.04);
  }
}

.card {
  isolation: isolate;
}

.btn {
  transition:
    transform var(--dur-1) var(--ease-out),
    background var(--dur-2) ease,
    border-color var(--dur-2) ease,
    box-shadow var(--dur-2) ease,
    color var(--dur-2) ease;
}

.btn:active:not(:disabled),
.cal-day.available:active,
.time-btn:active {
  transform: scale(0.97);
}

/* A slow gold sheen across the main buttons. */
.btn-gold {
  background-size: 200% 100%;
  background-image: linear-gradient(110deg, var(--gold) 0%, var(--gold-2) 45%, var(--gold) 90%);
  background-position: 100% 0;
}

.btn-gold:hover {
  background-position: 0 0;
  transition:
    background-position 900ms var(--ease-out),
    box-shadow var(--dur-2) ease,
    transform var(--dur-1) var(--ease-out);
}

.site-nav a:not(.btn),
.footer-links a,
.btn-link {
  transition:
    color var(--dur-2) ease,
    background var(--dur-2) ease;
}

.btn-link span,
.btn-link {
  text-underline-offset: 4px;
}

/* Header gains a soft shadow once the page scrolls. */
.site-header {
  transition:
    box-shadow var(--dur-2) ease,
    background var(--dur-2) ease;
}

.site-header.scrolled {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

/* Phone menu slides down. */
@media (max-width: 900px) {
  .site-nav.open {
    animation: menu-in var(--dur-2) var(--ease-out) both;
  }

  .site-nav.open a {
    animation: rise-in 420ms var(--ease-out) both;
  }

  .site-nav.open a:nth-child(2) {
    animation-delay: 30ms;
  }
  .site-nav.open a:nth-child(3) {
    animation-delay: 60ms;
  }
  .site-nav.open a:nth-child(4) {
    animation-delay: 90ms;
  }
  .site-nav.open a:nth-child(5) {
    animation-delay: 120ms;
  }
  .site-nav.open a:nth-child(n + 6) {
    animation-delay: 150ms;
  }

  .nav-toggle span {
    transition:
      transform var(--dur-2) var(--ease-out),
      opacity var(--dur-1) ease;
    transform-origin: center;
  }

  .nav-toggle[aria-expanded='true'] span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .nav-toggle[aria-expanded='true'] span:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle[aria-expanded='true'] span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
}

@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* Phone booking button slides up once the page has settled. */
.mobile-cta {
  animation: cta-in 600ms 400ms var(--ease-out) both;
}

@keyframes cta-in {
  from {
    transform: translateY(100%);
  }
}

/* FAQ answers open smoothly (supporting browsers) and the + turns. */
.faq summary::after {
  transition: transform var(--dur-2) var(--ease-out);
}

.faq details[open] summary::after {
  transform: translateY(-50%) rotate(180deg);
}

@supports (interpolate-size: allow-keywords) {
  .faq {
    interpolate-size: allow-keywords;
  }

  .faq details::details-content {
    height: 0;
    overflow: clip;
    transition:
      height var(--dur-2) var(--ease-out),
      content-visibility var(--dur-2) allow-discrete;
  }

  .faq details[open]::details-content {
    height: auto;
  }
}

/* Booking: the chosen day and times come in softly. */
.cal-day {
  transition:
    background var(--dur-1) ease,
    color var(--dur-1) ease,
    border-color var(--dur-1) ease,
    transform var(--dur-1) var(--ease-out);
}

.cal-day.selected {
  animation: pop var(--dur-2) var(--ease-out);
}

@keyframes pop {
  50% {
    transform: scale(1.08);
  }
}

.time-list .time-btn {
  animation: rise-in 420ms var(--ease-out) both;
}

.time-list .time-btn:nth-child(2) {
  animation-delay: 25ms;
}
.time-list .time-btn:nth-child(3) {
  animation-delay: 50ms;
}
.time-list .time-btn:nth-child(4) {
  animation-delay: 75ms;
}
.time-list .time-btn:nth-child(5) {
  animation-delay: 100ms;
}
.time-list .time-btn:nth-child(n + 6) {
  animation-delay: 125ms;
}

.time-btn {
  transition:
    background var(--dur-1) ease,
    border-color var(--dur-1) ease,
    color var(--dur-1) ease,
    transform var(--dur-1) var(--ease-out);
}

#step-details:not([hidden]),
.notice {
  animation: rise-in 520ms var(--ease-out) both;
}

/* Testimonials drift across the screen in an endless loop and pause on hover or touch. */
.marquee {
  overflow: hidden;
  padding: var(--sp-2) 0 var(--sp-4);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track {
  display: flex;
  gap: var(--sp-5);
  width: max-content;
  padding-left: var(--sp-5);
  animation: marquee var(--marquee-duration, 45s) linear infinite;
}

.marquee .quote {
  width: min(360px, 78vw);
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.marquee:hover .marquee-track,
.marquee:active .marquee-track,
.marquee:focus-within .marquee-track {
  animation-play-state: paused;
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

/* ---- reduced motion: keep everything still ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  .sky::before,
  .sky::after {
    animation: none;
    opacity: 0.6;
  }

  .marquee {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .marquee-track {
    animation: none;
    padding-right: var(--sp-5);
  }

  .marquee .quote {
    scroll-snap-align: center;
  }

  .marquee .quote[aria-hidden='true'] {
    display: none;
  }

  @view-transition {
    navigation: none;
  }
}

/* ---- Dawn: the light look (Admin > Business & Contact Details > Look of the website) ----
 * The same night sky at sunrise: ivory page, white cards, plum text, gold buttons.
 * Mostly new token values; the rules after them only change what tokens cannot
 * (the sky, the hero title, shadows). Every animation above is kept. */
:root[data-theme='dawn'] {
  color-scheme: light;

  --bg: #fbf7f1;
  --bg-2: #f3ebdf;
  --surface: #ffffff;
  --surface-2: #fdfaf5;
  --gold: #d9ae5c;
  --gold-2: #ebcb86;
  --gold-ink: #2a2238;
  --accent: #8a621e;
  --accent-soft: #8a621e;
  --text: #2a2238;
  --muted: #5f566e;
  --danger: #b3261e;
  --ok: #1f6b3e;
  --info: #3a4596;
  --line: rgba(166, 119, 43, 0.22);
  --gold-a06: rgba(201, 161, 90, 0.08);
  --gold-a12: rgba(201, 161, 90, 0.14);
  --gold-a25: rgba(201, 161, 90, 0.3);
  --gold-a40: rgba(201, 161, 90, 0.45);
  --danger-a12: rgba(179, 38, 30, 0.08);
  --danger-a35: rgba(179, 38, 30, 0.35);
  --ok-a12: rgba(31, 107, 62, 0.08);
  --ok-a35: rgba(31, 107, 62, 0.35);
  --info-a12: rgba(58, 69, 150, 0.08);
  --info-a35: rgba(58, 69, 150, 0.3);
  --overlay: rgba(251, 247, 241, 0.92);
  --surface-a45: rgba(243, 235, 223, 0.85);
  --shadow-1: 0 8px 24px rgba(201, 161, 90, 0.35);
  --shadow-2: 0 10px 30px rgba(201, 161, 90, 0.5);
  --focus-ring: 0 0 0 3px rgba(166, 119, 43, 0.25);
}

/* A dawn sky: soft lavender and peach light drifting slowly, with gold and lavender sparkles. */
[data-theme='dawn'] .sky {
  background:
    radial-gradient(ellipse 60% 50% at 88% -8%, rgba(248, 220, 203, 0.8), transparent 70%),
    radial-gradient(ellipse 55% 45% at -6% 12%, rgba(234, 223, 247, 0.9), transparent 70%),
    radial-gradient(ellipse 50% 35% at 50% 108%, rgba(243, 231, 211, 0.7), transparent 70%);
  background-size: 115% 115%;
  animation: dawn-drift 24s ease-in-out infinite alternate;
}

[data-theme='dawn'] .sky::before {
  background:
    radial-gradient(2px 2px at 18% 28%, #c9a15acc 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 64% 22%, #b39bd8cc 50%, transparent 51%),
    radial-gradient(2px 2px at 82% 62%, #c9a15aaa 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 36% 82%, #c9a15acc 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 92% 12%, #b39bd8aa 50%, transparent 51%);
}

[data-theme='dawn'] .sky::after {
  background:
    radial-gradient(1.5px 1.5px at 8% 52%, #c9a15acc 50%, transparent 51%),
    radial-gradient(2px 2px at 48% 12%, #b39bd8aa 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 72% 88%, #c9a15aaa 50%, transparent 51%),
    radial-gradient(2px 2px at 28% 42%, #c9a15a99 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 58% 58%, #b39bd899 50%, transparent 51%);
}

@keyframes dawn-drift {
  from {
    background-position:
      0% 0%,
      0% 0%,
      50% 100%;
  }
  to {
    background-position:
      6% 4%,
      -4% 3%,
      50% 92%;
  }
}

[data-theme='dawn'] .hero-title {
  background: linear-gradient(180deg, var(--text) 35%, #a6772b);
  -webkit-background-clip: text;
  background-clip: text;
}

[data-theme='dawn'] .orbit span {
  border-color: rgba(201, 161, 90, 0.35);
}

[data-theme='dawn'] .card {
  background: var(--surface);
  border-color: #ede3d2;
  box-shadow: 0 6px 24px rgba(90, 62, 20, 0.07);
}

[data-theme='dawn'] .btn-ghost {
  color: var(--text);
  background: var(--surface);
  border-color: #e6d9c2;
}

[data-theme='dawn'] .btn-ghost:hover {
  color: var(--text);
  border-color: var(--gold);
}

[data-theme='dawn'] .site-header.scrolled {
  box-shadow: 0 8px 30px rgba(90, 62, 20, 0.1);
}

[data-theme='dawn'] .site-footer {
  background: var(--bg-2);
}

@media (hover: hover) {
  [data-theme='dawn'] .service-card:hover,
  [data-theme='dawn'] .post-card:hover,
  [data-theme='dawn'] .pick:hover {
    box-shadow:
      0 18px 40px rgba(90, 62, 20, 0.14),
      0 0 0 1px var(--gold-a12);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-theme='dawn'] .sky {
    animation: none;
  }
}

/* Form boxes: white with a fine sand border, like the cards. */
[data-theme='dawn'] input:not([type='checkbox']):not([type='radio']),
[data-theme='dawn'] select,
[data-theme='dawn'] textarea {
  background-color: var(--surface);
  border-color: #e3d5bd;
}

/* "About this session" above the booking calendar. */
.session-about-wrap {
  padding-bottom: 0;
}

.session-about h2 {
  font-size: var(--fs-xl);
  margin: 0 0 var(--sp-2);
}

.session-about .lead {
  margin: 0 0 var(--sp-3);
}

.session-about > :last-child {
  margin-bottom: 0;
}

/* ---- About story: one designed section per part (see src/lib/about.ts) ----
 * Built from the theme tokens, so it suits both Dawn and Night. Things rise in as they
 * scroll into view (site.js adds .reveal / .in); reduced motion keeps everything still. */
.about-sec h2 {
  font-size: var(--fs-2xl);
  margin: 0 0 var(--sp-4);
}

.about-sec .section-head {
  text-align: center;
}

/* The opening: a large first line, the reader's worries as floating cards, a calm close. */
.about-intro-body > p:first-child {
  font-family: var(--serif);
  font-size: var(--fs-2xl);
  line-height: 1.25;
  text-align: center;
  color: var(--text);
  margin: 0 auto var(--sp-6);
  max-width: 640px;
}

.about-intro-body ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-6);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}

.about-intro-body li {
  position: relative;
  margin: 0;
  padding: var(--sp-5) var(--sp-5) var(--sp-5) calc(var(--sp-5) + 26px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  animation: about-float 7s ease-in-out infinite;
}

.about-intro-body li:nth-child(2) {
  animation-delay: -1.8s;
}

.about-intro-body li:nth-child(3) {
  animation-delay: -3.6s;
}

.about-intro-body li:nth-child(4) {
  animation-delay: -5.4s;
}

.about-intro-body li::before {
  content: '✦';
  position: absolute;
  left: var(--sp-5);
  top: var(--sp-5);
  color: var(--accent);
  animation: twinkle 5s ease-in-out infinite;
}

@keyframes about-float {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -4px;
  }
}

.about-intro-body > p:last-child:not(:first-child) {
  text-align: center;
  font-size: var(--fs-lg);
  color: var(--muted);
  max-width: 640px;
  margin: 0 auto;
}

/* "Hello, I'm Chitra": the photo, or the key in a slowly turning ring. */
.about-hello-grid {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: var(--sp-7);
  align-items: center;
  max-width: 980px;
}

.about-hello-grid .prose > :last-child {
  margin-bottom: 0;
}

.about-emblem {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, var(--gold-a12), transparent 70%);
  color: var(--accent);
}

.about-emblem .logo-mark {
  width: 46%;
  height: auto;
}

.about-emblem-ring {
  position: absolute;
  inset: 4%;
  border: 1px dashed var(--gold-a40);
  border-radius: 50%;
  animation: spin 90s linear infinite;
}

.about-emblem-ring::after {
  content: '';
  position: absolute;
  inset: 12%;
  border: 1px solid var(--line);
  border-radius: 50%;
}

/* "How I work": cards, each with its bold opening as a title. */
.about-cards ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
}

.about-cards li {
  position: relative;
  margin: 0;
  padding: var(--sp-6) var(--sp-6) var(--sp-6) calc(var(--sp-6) + 40px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  /* Keeps the rise-in (opacity, transform) and adds the hover lift. */
  transition:
    opacity var(--dur-3) var(--ease-out) var(--reveal-delay, 0ms),
    transform var(--dur-3) var(--ease-out) var(--reveal-delay, 0ms),
    translate var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) ease,
    border-color var(--dur-2) ease;
}

.about-cards li::before {
  content: '✦';
  position: absolute;
  left: var(--sp-5);
  top: var(--sp-6);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold-a12);
  color: var(--accent);
  font-size: 0.95rem;
}

.about-cards li strong:first-child {
  display: block;
  font-family: var(--serif);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: var(--sp-2);
  color: var(--text);
}

@media (hover: hover) {
  .about-cards li:hover {
    translate: 0 -4px;
    border-color: var(--gold-a40);
    box-shadow: var(--shadow-1);
  }
}

/* "What our time together looks like": numbered stops on a path that draws itself in. */
.about-steps-body ol {
  position: relative;
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 0 0 var(--sp-6);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  grid-auto-flow: column;
  gap: var(--sp-6);
}

.about-steps-body ol::before {
  content: '';
  position: absolute;
  top: 27px;
  left: 16%;
  right: 16%;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-2), var(--gold));
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1.4s var(--ease-out) 0.3s;
}

.about-steps-body ol:not(.reveal)::before,
.about-steps-body ol.in::before {
  transform: scaleX(1);
}

.about-steps-body li {
  position: relative;
  counter-increment: step;
  margin: 0;
  text-align: center;
}

.about-steps-body li::before {
  content: counter(step);
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--sp-4);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-2), var(--gold));
  color: var(--gold-ink);
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 600;
  box-shadow: 0 0 0 6px var(--bg), var(--shadow-1);
}

.section.alt .about-steps-body li::before {
  box-shadow: 0 0 0 6px var(--bg-2), var(--shadow-1);
}

.about-steps-body li strong:first-child {
  display: block;
  font-family: var(--serif);
  font-size: var(--fs-xl);
  font-weight: 600;
  margin-bottom: var(--sp-1);
  color: var(--text);
}

.about-steps-body > p {
  text-align: center;
  color: var(--muted);
  max-width: 600px;
  margin: 0 auto;
}

/* "Is this for you?": two panels, ticks on the left, crosses on the right. */
.about-fit-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  grid-auto-flow: column;
  column-gap: var(--sp-5);
}

.about-fit-body > p {
  margin: 0;
  padding: var(--sp-5) var(--sp-5) var(--sp-2);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--r-md) var(--r-md) 0 0;
  font-family: var(--serif);
  font-size: var(--fs-xl);
}

.about-fit-body > ul {
  list-style: none;
  margin: 0;
  padding: var(--sp-2) var(--sp-5) var(--sp-5);
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--r-md) var(--r-md);
}

.about-fit-body > p:nth-of-type(1),
.about-fit-body > ul:nth-of-type(1) {
  background: var(--ok-a12);
  border-color: var(--ok-a35);
}

.about-fit-body > p:nth-of-type(2),
.about-fit-body > ul:nth-of-type(2) {
  background: var(--surface);
}

.about-fit-body li {
  position: relative;
  padding-left: 30px;
  margin: 0 0 var(--sp-3);
}

.about-fit-body li::before {
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 600;
}

.about-fit-body > ul:nth-of-type(1) li::before {
  content: '✓';
  background: var(--ok);
  color: var(--surface);
}

.about-fit-body > ul:nth-of-type(2) li::before {
  content: '✕';
  background: var(--line);
  color: var(--muted);
}

/* "A note from me": a letter on paper that settles as it arrives, signed by hand. */
.letter {
  position: relative;
  padding: var(--sp-7) var(--sp-7) var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-1);
  rotate: -0.6deg;
  transition:
    opacity var(--dur-3) var(--ease-out),
    transform var(--dur-3) var(--ease-out),
    rotate 1.2s var(--ease-out) 0.2s;
}

.letter.in,
.letter:not(.reveal) {
  rotate: 0deg;
}

.letter::before {
  content: '✦';
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-6);
  color: var(--accent);
  animation: twinkle 6s ease-in-out infinite;
}

.letter h2 {
  font-size: var(--fs-xl);
  color: var(--accent);
  letter-spacing: 0.04em;
}

.letter p {
  font-size: var(--fs-lg);
  line-height: 1.75;
}

.letter p:last-child {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.7rem;
  line-height: 1.3;
  color: var(--accent);
  margin: var(--sp-5) 0 0;
}

.about-banner {
  margin: var(--sp-6) auto 0;
  max-width: 640px;
  text-align: center;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-pill);
  background: var(--gold-a12);
  border: 1px solid var(--gold-a25);
}

@media (max-width: 760px) {
  .about-intro-body ul,
  .about-cards ul {
    grid-template-columns: 1fr;
  }

  .about-hello-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
    justify-items: center;
  }

  .about-hello-grid > :first-child {
    width: min(240px, 70%);
  }

  /* Steps go top to bottom, with the path running down the left. */
  .about-steps-body ol {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }

  .about-steps-body ol::before {
    top: 28px;
    bottom: 28px;
    left: 27px;
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, var(--gold), var(--gold-2), var(--gold));
    transform-origin: center top;
    transform: scaleY(0);
  }

  .about-steps-body ol:not(.reveal)::before,
  .about-steps-body ol.in::before {
    transform: scaleY(1);
  }

  .about-steps-body li {
    text-align: left;
    padding-left: 76px;
    min-height: 56px;
  }

  .about-steps-body li::before {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
  }

  .about-fit-body {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
  }

  .about-fit-body > ul:nth-of-type(1) {
    margin-bottom: var(--sp-5);
  }

  .letter {
    padding: var(--sp-6) var(--sp-5) var(--sp-5);
  }
}

/* The parts of a group arrive one after another. */
:is(.about-intro-body ul, .about-cards ul, .about-steps-body ol) > .reveal:nth-child(2) {
  --reveal-delay: 110ms;
}

:is(.about-intro-body ul, .about-cards ul, .about-steps-body ol) > .reveal:nth-child(3) {
  --reveal-delay: 220ms;
}

:is(.about-intro-body ul, .about-cards ul, .about-steps-body ol) > .reveal:nth-child(n + 4) {
  --reveal-delay: 330ms;
}

/* A "Before / After" pair: crosses on the left, ticks on the right. */
.about-fit-body.reverse > p:nth-of-type(1),
.about-fit-body.reverse > ul:nth-of-type(1) {
  background: var(--surface);
  border-color: var(--line);
}

.about-fit-body.reverse > p:nth-of-type(2),
.about-fit-body.reverse > ul:nth-of-type(2) {
  background: var(--ok-a12);
  border-color: var(--ok-a35);
}

.about-fit-body.reverse > ul:nth-of-type(1) li::before {
  content: '✕';
  background: var(--line);
  color: var(--muted);
}

.about-fit-body.reverse > ul:nth-of-type(2) li::before {
  content: '✓';
  background: var(--ok);
  color: var(--surface);
}


/* The sticky "Book a session" bar on phones gives way to other booking buttons and to the
   open menu (see site.js), so only one is in view at a time. */
.mobile-cta {
  transition:
    translate var(--dur-2) var(--ease-out),
    visibility 0s linear 0s;
}

.mobile-cta.is-hidden {
  translate: 0 110%;
  visibility: hidden;
  transition:
    translate var(--dur-2) var(--ease-out),
    visibility 0s linear var(--dur-2);
}

body.has-mobile-cta:has(.mobile-cta.is-hidden) {
  padding-bottom: 0;
}

/* Phones: one main button at the top; "Explore consultations" becomes a quiet text link. */
@media (max-width: 640px) {
  .hero .btn-row .btn-ghost {
    min-height: var(--tap);
    padding: var(--sp-2);
    border: 0;
    background: none;
    box-shadow: none;
    font-size: var(--fs-base);
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 4px;
  }
}