/* ==========================================================================
   Mind and Brain — 2026 redesign
   Layered on top of the legacy template styles. Loaded last so it wins
   the cascade without having to touch the old rules directly.
   ========================================================================== */

:root {
  --ink: #14181f;
  --control-h: 48px;  /* one height for every text input and select */
  --ink-soft: #565f6d;
  --ink-faint: #5a6371;
  --bg: #faf9f6;
  --surface: #ffffff;
  --line: rgba(20, 24, 31, 0.09);
  --accent: #1f5d5b;
  --accent-dark: #143f3e;
  --accent-tint: #e7f1ef;
  --warm: #e0673f;
  /* Darker than --warm — only for small text on the warm badge tint
     (--warm itself is ~3.4:1, fine for the large stat-card numbers that
     use it, but fails 4.5:1 at the badge's 12px size). */
  --warm-text: #a83d1c;
  --danger: #c2412e;
  --success: #1f7a43;  /* text on --tint-mint (4.6:1) */
  /* Three radii: controls, cards, pills (999px). Circles stay 50%. */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 20px;
  --font-display: 'Fraunces', 'Noto Serif Devanagari', Georgia, serif;
  --font-body: 'Inter', 'Noto Sans Devanagari', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --shadow-soft: 0 1px 2px rgba(20, 24, 31, 0.04), 0 12px 32px rgba(20, 24, 31, 0.06);
  --shadow-lift: 0 8px 16px rgba(20, 24, 31, 0.06), 0 24px 48px rgba(20, 24, 31, 0.1);
  /* Spacing rhythm (DESIGN.md, "Spacing"): open sections breathe, framed ones (a panel or band
     that already separates itself) sit tighter, and phones tighten everything between sections. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --section-open: 88px;
  --section-framed: 72px;
  --section-head-gap: 56px;
}
@media (max-width: 767.98px) {
  :root { --section-open: 48px; --section-framed: 48px; --section-head-gap: 28px; }
}

/* ---------- base ---------- */
html {
  scroll-behavior: smooth;
}

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

.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 100000;
  background: var(--ink);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 600;
  transition: top 0.2s ease;
}

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

body {
  font-family: var(--font-body);
  color: var(--ink-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--ink);
}

a { color: var(--accent); }
a:hover, a:focus { color: var(--accent-dark); text-decoration: none; }  /* no hover underline anywhere (Bootstrap adds one) */

.section { padding: 128px 0; }

@media (max-width: 767.98px) {
  .section { padding: 72px 0; }
}

/* ---------- section headers ---------- */
.section-header { margin-bottom: 64px; }

.section-header .eyebrow,
.detail-hero .eyebrow,
.checkin-start .eyebrow,
.checkin-shell .eyebrow,
.checkin-done .eyebrow,
.profile-hero .eyebrow,
.gallery-cover .eyebrow,
.booking-intro .eyebrow,
.voices-hero .eyebrow,
.auth-brand .eyebrow {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: none;
  width: auto;
  margin-bottom: 18px;
}

.section-header .eyebrow:before,
.detail-hero .eyebrow:before,
.checkin-start .eyebrow:before,
.checkin-shell .eyebrow:before,
.checkin-done .eyebrow:before,
.profile-hero .eyebrow:before,
.gallery-cover .eyebrow:before,
.booking-intro .eyebrow:before,
.voices-hero .eyebrow:before,
.auth-brand .eyebrow:before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 1px;
  background: var(--accent);
}

.section-header .section-title {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: none;
  font-size: clamp(1.9rem, 3vw, 2.75rem);
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 20px;
}

.section-header .section-title:before { display: none; }

.section-header .section-subtitle {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- nav ---------- */
.navbar.fixed-top {
  background: rgba(250, 249, 246, 0.82) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  padding-top: 18px;
  padding-bottom: 18px;
  transition: padding 0.25s ease, box-shadow 0.25s ease;
}

.navbar.fixed-top.menu-bg {
  padding-top: 10px;
  padding-bottom: 10px;
  box-shadow: 0 8px 30px rgba(20, 24, 31, 0.06);
}

.navbar .logo { height: 42px; width: auto; }

.collapse.show { background: var(--surface); }

.navbar-nav .nav-link {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink) !important;
  padding: 8px 16px !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--accent) !important;
}

.navbar-nav .nav-link:before { background: var(--accent) !important; }

/* A menu item flagged "is_button" in the dashboard (e.g. Book Now) — reads
   as a real call-to-action instead of just another text link. */
.navbar-nav .nav-link-cta {
  background: var(--ink) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 8px 20px !important;
  margin-left: 4px;
}
.navbar-nav .nav-link-cta:hover { background: var(--accent) !important; color: #fff !important; }
.navbar-nav .nav-link-cta:before { display: none !important; }

/* ---------- buttons ---------- */
.btn {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  border-radius: var(--radius-sm);
}

.btn-common {
  background-color: var(--ink);
  box-shadow: none;
}

.btn-common:hover {
  background-color: var(--accent);
  box-shadow: 0 10px 24px rgba(31, 93, 91, 0.28);
  transform: translateY(-1px);
}

.btn-common:disabled,
.btn-common[aria-disabled="true"] {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-effect:after { display: none; }

.btn-border-ink {
  display: inline-block;
  padding: 12px 30px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink) !important;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.btn-border-ink:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff !important;
}

/* ==========================================================================
   Hero
   ========================================================================== */
header#home { position: relative; background: var(--bg); }

.hero-modern {
  position: relative;
  overflow: hidden;
  padding: 200px 0 120px;
}

@media (max-width: 767.98px) {
  .hero-modern { padding: 150px 0 72px; }
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 32px;
  align-items: center;
}

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

.hero-content { max-width: 640px; }

.hero-content .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
}

.hero-content .eyebrow:before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--accent);
}

.hero-content h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.6rem, 5.2vw, 4.25rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 24px;
}

.hero-content h1 em {
  font-style: italic;
  color: var(--accent);
}

.hero-lede {
  font-size: 1.25rem;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 36px;
  max-width: 560px;
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.hero-actions .btn { padding: 14px 30px; }

/* ==========================================================================
   Services / Features cards
   ========================================================================== */
.services-item {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: none;
  padding: 40px 32px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.services-item:hover {
  box-shadow: var(--shadow-lift);
  border-color: transparent;
  color: inherit;
}

.services-item-link {
  display: inline-block;
  margin-top: 16px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent);
}

.item-boxes.services-item .icon,
.services-item .icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--accent-tint) !important;
  margin-bottom: 22px;
}

.services-item .icon i {
  font-size: 1.25rem;
  line-height: 1;
  color: var(--accent) !important;
  background: none !important;
}

.services-item h3,
.services-item h2 {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 10px;
}

.services-item p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* ==========================================================================
   Portfolio / gallery
   ========================================================================== */

.gallery-video-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(20, 24, 31, 0.72);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}

.gallery-media-section {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

.gallery-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.gallery-media-tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--accent-tint);
  box-shadow: var(--shadow-soft);
}

.gallery-media-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(35%) contrast(0.94) brightness(1.05) saturate(1.05);
  transition: transform 0.4s ease;
}

.gallery-media-tile:hover img {
  transform: scale(1.06);
}

.gallery-media-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  line-height: 52px;
  text-align: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--accent-dark);
  font-size: 1.125rem;
  transition: transform 0.3s ease;
}

.gallery-media-tile:hover .gallery-media-play {
  transform: translate(-50%, -50%) scale(1.08);
}

.gallery-media-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px 16px 14px;
  background: linear-gradient(180deg, rgba(20, 24, 31, 0) 0%, rgba(20, 24, 31, 0.75) 100%);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.gallery-media-tile:hover .gallery-media-caption {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   Pricing
   ========================================================================== */
.pricing-table {
  border: 1px solid var(--line);
  box-shadow: none;
  border-radius: var(--radius-md);
}

.pricing-table:hover { box-shadow: var(--shadow-lift); }

.pricing-big {
  transform: none !important;
  border-color: var(--accent) !important;
  box-shadow: var(--shadow-lift);
}

.pricing-table .pricing-details h2 {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ink);
  text-transform: none;
}

.pricing-table .pricing-details h2 a {
  color: inherit;
  text-decoration: none;
}

.pricing-table .pricing-details h2 a:hover { color: var(--accent); }

.pricing-table .pricing-details .price span {
  font-family: var(--font-body);
  color: var(--accent);
}

.pricing-table .pricing-details ul li {
  font-family: var(--font-body);
  color: var(--ink-soft);
  text-align: left;
}

.pricing-table .plan-button { background: var(--bg); }

/* ==========================================================================
   Testimonials (static grid)
   ========================================================================== */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

@media (max-width: 991.98px) {
  .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
}

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

.testimonial-grid .testimonial-item {
  margin: 0;
  padding: 36px 30px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
}

.testimonial-grid .quote-mark {
  font-family: var(--font-display);
  font-size: 3.5rem;
  line-height: 1;
  color: var(--accent);
  opacity: 0.35;
  margin-bottom: 4px;
}

.testimonial-grid .description {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 28px;
  flex-grow: 1;
}

.testimonial-grid .author {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 0;
}

.testimonial-grid .avatar-initials {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.testimonial-grid .author-info h3 {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

.testimonial-grid .author-info span {
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

/* ==========================================================================
   Mid CTA (dark)
   ========================================================================== */
#cta {
  background: var(--accent-dark) !important;
}

#cta h5 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.4;
}

/* ==========================================================================
   Team
   ========================================================================== */

.contact-side .footer-social li a {
  background: var(--accent-tint) !important;
  color: var(--accent) !important;
}

footer .footer-social li a {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

/* ==========================================================================
   Blog
   ========================================================================== */
#blog .blog-item-wrapper {
  border: 1px solid var(--line);
  box-shadow: none;
  border-radius: var(--radius-md);
}

#blog .blog-item-wrapper:hover { box-shadow: var(--shadow-lift); }

#blog .blog-item-img img {
  filter: grayscale(35%) contrast(0.94) brightness(1.05) saturate(1.05);
}

#blog .blog-item-text .date {
  font-size: 0.8125rem;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#blog .blog-item-text h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.4;
}

#blog .blog-item-text h3 a { color: var(--ink); }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-block .form-control {
  background: var(--bg);
  border-radius: var(--radius-sm);
}

.contact-block textarea.form-control { border-radius: var(--radius-md) !important; }

/* The theme's .form-control padding (15px 30px) was tuned for text inputs;
   applied to a <select> it pushes the option text into the same space the
   browser reserves for its native dropdown arrow, clipping it. */
select.form-control {
  height: auto !important;
  padding: 11px 44px 11px 16px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23565f6d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
}

/* Same problem as the <select> fix above, but worse: a native time/date
   control renders a small fixed-width widget (digit segments + a
   clock/calendar icon), not a text run. Stretched to the theme's 100%
   width + 30px side padding, most of the pill is empty space with
   nothing underneath it to click or focus — it looks like one big field
   but only a sliver of it actually responds, which reads as broken. */
input[type="time"].form-control,
input[type="date"].form-control {
  width: auto;
  max-width: 220px;
  padding: 15px 20px;
}

/* ==========================================================================
   Footer
   ========================================================================== */
footer { background: var(--ink); }

footer .footer-Content { background: transparent; }

.footer-Content h3,
.footer-Content .block-title {
  font-family: var(--font-display);
  font-weight: 500;
  color: #fff;
}

.footer-Content .textwidget p { color: rgba(255, 255, 255, 0.6); }

.footer-Content .menu a,
.footer-Content .contact-footer span,
.footer-Content .contact-footer strong,
.footer-Content .contact-footer span a {
  color: rgba(255, 255, 255, 0.7);
}

.footer-Content .menu a:hover,
.footer-Content .contact-footer span a:hover {
  color: #fff;
}

#copyright {
  background: var(--ink);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

#copyright p, #copyright .nav-link { color: rgba(255, 255, 255, 0.55) !important; }
#copyright .nav-link:hover { color: #fff !important; }

/* ==========================================================================
   Form feedback
   ========================================================================== */

#msgSubmit.hidden, #subscribeMsg.hidden { display: none; }

.honeypot-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  height: 0;
  width: 0;
  overflow: hidden;
}

/* ==========================================================================
   Detail pages (service / team member / blog post)
   ========================================================================== */
.detail-hero {
  padding: 160px 0 56px;
  background: var(--bg);
}

.detail-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);  /* the softer inks fell under 4.5:1 over the hero's mint glow */
  margin-bottom: 28px;
}

.detail-back:hover { color: var(--accent); }

.detail-hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
  color: var(--ink);
  max-width: 760px;
  margin-bottom: 16px;
}

.detail-lede {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 640px;
}

/* ---------- prose pages: terms, privacy, FAQ ---------- */
.legal-content h2 {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--ink);
  margin: 40px 0 12px;
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content p,
.legal-content li {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink-soft);
}
/* Long-form text staff write (blog posts, album write-ups, policies): the list markers the
   theme's reset removed, a heading rhythm (more space above than below), quotes and tables. */
.detail-body ul, .legal-content ul { padding-left: 1.25em; margin: 0 0 20px; list-style: disc; }
.detail-body ol, .legal-content ol { padding-left: 1.4em; margin: 0 0 20px; list-style: decimal; }
.detail-body li, .legal-content li { margin-bottom: 8px; padding-left: 0.2em; }
.detail-body li::marker, .legal-content li::marker { color: var(--accent); }
.detail-body h2 { margin: 2em 0 0.5em; font-family: var(--font-display); font-size: 1.625rem; font-weight: 500; line-height: 1.25; color: var(--ink); }
.detail-body h3 { margin: 1.8em 0 0.4em; font-size: 1.25rem; font-weight: 600; line-height: 1.35; color: var(--ink); }
.detail-body h2:first-child, .detail-body h3:first-child { margin-top: 0; }
.detail-body blockquote, .legal-content blockquote { margin: 28px 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--accent); font-family: var(--font-display); font-style: italic; font-size: 1.25rem; line-height: 1.55; color: var(--ink); }
.detail-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.detail-body img { max-width: 100%; height: auto; border-radius: 12px; }
.detail-body table, .legal-content table:not(.legal-table) { display: block; max-width: 100%; overflow-x: auto; margin: 0 0 24px; border-collapse: collapse; font-size: 0.9375rem; }
.detail-body th, .detail-body td, .legal-content table:not(.legal-table) th, .legal-content table:not(.legal-table) td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.legal-content p, .legal-content li { max-width: 36em; }
.legal-content .health-disclaimer { padding: 16px 0; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; }  /* not a card inside the page's card */
.legal-updated { margin: 0; font-size: 0.875rem; color: var(--ink-soft); }
.legal-content a { color: var(--accent); text-decoration: underline; }

.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  color: var(--ink-faint);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 20px;
}

.detail-image {
  width: 100%;
  max-height: 440px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin-bottom: 48px;
}

.detail-body {
  font-size: 1.125rem;
  line-height: 1.85;
  color: var(--ink-soft);
  max-width: 36em;  /* ~70 characters of Inter; 68ch came out near 90 */
}

.detail-body p { margin-bottom: 20px; }
.detail-body p:last-child { margin-bottom: 0; }

.detail-social {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.detail-related {
  border-top: 1px solid var(--line);
  padding-top: 56px;
  margin-top: 24px;
}

.detail-related-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  margin-bottom: 28px;
}

.detail-cta {
  background: var(--accent-tint);
  border-radius: var(--radius-lg);
  padding: 40px;
  margin: 48px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* ==========================================================================
   My Bookings
   ========================================================================== */
.account-meta {
  color: var(--ink-faint);
  font-size: 0.875rem;
  margin-top: -12px;
  margin-bottom: 0;
}

.account-meta a { color: var(--ink-soft); text-decoration: underline; }

.badge { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; }
.badge-warm { background: #fdece5; color: var(--warm-text); }
.badge-muted { background: var(--bg); color: var(--ink-faint); border: 1px solid var(--line); }
.badge-accent { background: var(--accent-tint); color: var(--accent-dark); }
.badge-success { background: var(--tint-mint); color: var(--success); }

.my-booking-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
}

.my-booking-card h3 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
  margin: 6px 0 0;
  color: var(--ink);
}

.my-booking-card p { margin: 4px 0 0; color: var(--ink-faint); font-size: 0.875rem; }

.detail-cta p {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--ink);
  margin: 0;
}
.detail-cta-title { margin: 0 0 6px; font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; color: var(--ink); }
.detail-cta .detail-cta-text { max-width: 36em; font-family: var(--font-body); font-size: 1rem; line-height: 1.6; color: var(--ink-soft); }

/* ==========================================================================
   Gallery album cover hero (portfolio_detail.html)
   ========================================================================== */
.gallery-hero-meta { display: flex; align-items: center; gap: 10px; margin: 0 0 28px; font-size: 0.9375rem; font-weight: 600; color: var(--ink-soft); }
.gallery-cover-frame { overflow: hidden; border-radius: 20px; box-shadow: var(--shadow-soft); background: linear-gradient(135deg, var(--tint-mint), var(--tint-honey)); }
.gallery-cover-frame img { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
@media (max-width: 767.98px) { .gallery-cover-frame img { aspect-ratio: 4 / 3; } }

/* ==========================================================================
   Booking page
   ========================================================================== */
.booking-calendar-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  max-width: 400px;
  box-shadow: var(--shadow-soft);
}

.booking-selected-slot {
  font-size: 0.875rem;
  color: var(--ink-faint);
  margin-bottom: 20px;
}

.booking-field-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}

.booking-empty {
  background: var(--accent-tint);
  border-radius: var(--radius-lg);
  padding: 40px;
  text-align: center;
  color: var(--ink-soft);
}

.booking-empty a { font-weight: 600; }

.booking-confirmation {
  text-align: center;
  padding: 24px 8px;
}

.booking-confirmation-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.875rem;
}

.booking-confirmation-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--ink);
  margin-bottom: 12px;
}

.booking-confirmation-summary {
  font-size: 1rem;
  color: var(--ink);
  margin-bottom: 10px;
}

.booking-confirmation-summary strong { color: var(--accent-dark); }

.booking-confirmation-note {
  font-size: 0.875rem;
  color: var(--ink-faint);
  max-width: 380px;
  margin: 0 auto 24px;
}

/* ---------- Manage-booking page: wide summary bar + side-by-side action
   cards, instead of one long vertical stack of forms. ---------- */
.manage-booking { max-width: 1080px; margin: 0 auto; }

/* ---------- Booking page: hero polish + trust signals ---------- */
.booking-hero { position: relative; overflow: hidden; }
.booking-hero .container { position: relative; z-index: 1; }

.booking-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
}

.booking-trust-strip li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.booking-trust-strip i { color: var(--accent); font-size: 1.125rem; }

/* ---------- Booking page: numbered step headers ---------- */
.booking-step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.875rem;
  flex-shrink: 0;
}

.booking-next-available {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent-dark);
  background: var(--accent-tint);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.booking-next-available i { font-size: 0.875rem; }

.booking-privacy-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--ink-faint);
  margin: 12px 0 0;
}

/* ==========================================================================
   Simple calendar (static/js/simple-calendar.js) — shared by the public
   booking page and the dashboard's day-off picker.
   ========================================================================== */
.simple-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.simple-cal-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  color: var(--ink);
}

.simple-cal-nav {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.simple-cal-nav:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.simple-cal-nav:disabled { opacity: 0.3; cursor: default; }

.simple-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.simple-cal-weekdays {
  margin-bottom: 6px;
}

.simple-cal-weekdays span {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-faint);
  text-transform: uppercase;
}

.simple-cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: none;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.simple-cal-day:hover:not(.is-disabled):not(.simple-cal-empty) { border-color: var(--accent); color: var(--accent); }

.simple-cal-day.is-today { border-color: var(--line); }

.simple-cal-day.is-selected {
  background: var(--accent);
  color: #fff;
}

/* Past and out-of-range days just fade; closed days get a grey wash;
   days with no times left are crossed out, like booked times. */
.simple-cal-day.is-disabled {
  color: var(--ink-faint);
  font-weight: 500;
  cursor: not-allowed;
  opacity: 0.55;
}
.simple-cal-day.is-closed,
.simple-cal-legend .is-closed { background: rgba(20, 24, 31, 0.06); }
.simple-cal-day.is-full,
.simple-cal-legend .is-full { text-decoration: line-through; }

.simple-cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}
.simple-cal-legend li { display: flex; align-items: center; gap: 8px; }
.simple-cal-legend span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;  /* a 24px box: 12px would make it a circle */
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-faint);
}

.simple-cal-day.simple-cal-empty { cursor: default; }

/* ==========================================================================
   Back to top
   ========================================================================== */
.back-to-top {
  width: 44px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  color: var(--ink);
  font-size: 1.125rem;
  /* Quiet: a paper circle, so it never outranks the Book bar beside it. */
  background: var(--glass-bg-strong) !important;
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-soft);
  border-radius: 50% !important;
}
.back-to-top:hover,
.back-to-top:focus-visible { color: var(--accent-dark); }
/* Phones: the Book bar and a thumb-flick cover it, and the circle sat over the text column. */
@media (max-width: 767.98px) { .back-to-top { display: none !important; } }

/* ==========================================================================
   Floating "Book Now" CTA — always reachable regardless of scroll position
   or whether the nav is collapsed behind the mobile hamburger.
   ========================================================================== */
.floating-book-cta {
  position: fixed;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--accent);
  color: #fff !important;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(31, 93, 91, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.floating-book-cta:hover {
  color: #fff !important;
  background: var(--ink);
  transform: translateY(-2px);
}

.floating-book-cta i { font-size: 1rem; }

/* Desktop/tablet: a small pill, stacked above the back-to-top circle. */
@media (min-width: 768px) {
  .floating-book-cta {
    bottom: 72px;
    right: 15px;
    padding: 12px 22px;
    border-radius: 999px;
  }

  /* Keeps a keyboard-focused element from landing underneath the fixed
     CTA when the browser auto-scrolls it into view (WCAG 2.4.11 Focus
     Not Obscured) — mirrors the bottom padding mobile already reserves,
     but as scroll-padding so it only affects scroll targeting, not
     layout/whitespace at the true end of the page. */
  html { scroll-padding-bottom: 110px; }
}

/* Mobile: a full-width sticky bar at the very bottom, rather than a small
   pill — the nav is collapsed behind the hamburger here, so this is the
   one persistent, thumb-friendly way to reach booking without hunting for
   it. Push back-to-top and the page's own bottom padding up to clear it. */
@media (max-width: 767.98px) {
  .floating-book-cta {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    padding: 14px 20px;
    border-radius: 0;
    font-size: 0.9375rem;
  }

  .back-to-top { bottom: 82px !important; }

  body { padding-bottom: 56px; }
  /* With a footer, the clearance is the footer's own colour, not a cream strip under it. */
  body:has(> footer) { padding-bottom: 0; }
  body > footer { padding-bottom: 56px; }
}

/* ---------- Auth pages (login/signup) ---------- */
.auth-section {
  position: relative;
  overflow: hidden;
  padding: 150px 0 80px;
  background: var(--bg);
}

.auth-section .container {
  position: relative;
  z-index: 1;
}

.auth-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: 56px;
  align-items: center;
}

.auth-brand { max-width: 440px; }

.auth-brand h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  line-height: 1.15;
  color: var(--ink);
  margin: 14px 0 16px;
}

.auth-brand-lede {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 32px;
}

.auth-brand-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.auth-brand-points li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
}

.auth-brand-points i {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent);
  font-size: 1rem;
}

.auth-card {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  padding: 40px 36px;
}

.auth-card-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.625rem;
  color: var(--ink);
  margin: 0 0 6px;
}

.auth-card-subtitle {
  font-size: 0.875rem;
  color: var(--ink-faint);
  margin: 0 0 28px;
}


.auth-error {
  background: var(--tint-rose);
  color: var(--danger);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 0.875rem;
  margin: 0 0 20px;
}

.auth-card .form-line { margin-bottom: 16px; }

/* A form sent back by the server: what's left, each a link to its field (core/_error_summary.html). */
.form-error-summary { margin: 0 0 24px; padding: 14px 18px; border-radius: var(--radius-sm); background: var(--tint-rose); color: var(--danger); font-size: 0.9375rem; font-weight: 600; line-height: 1.5; }
.form-error-summary p { margin: 0; }
.form-error-summary p + p { margin-top: 6px; font-weight: 500; }
.form-error-summary a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.form-error-summary:focus { outline: 3px solid var(--danger); outline-offset: 2px; }

.password-field { position: relative; }

.password-field .form-control { padding-right: 48px; margin-bottom: 0; }

.password-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--ink-faint);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.password-toggle:hover { color: var(--ink); background: var(--accent-tint); }
.password-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.password-toggle svg { width: 20px; height: 20px; }

.auth-submit { width: 100%; margin-top: 4px; }

.auth-links {
  margin: 24px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.auth-links a { color: var(--accent); font-weight: 600; }
.auth-links p { margin: 0; }

@media (max-width: 900px) {
  .auth-layout { grid-template-columns: 1fr; gap: 40px; }
  .auth-brand { max-width: 520px; margin: 0 auto; text-align: center; }
  .auth-brand-points { align-items: stretch; }
  .auth-card { margin: 0 auto; max-width: 460px; width: 100%; }
}

@media (max-width: 480px) {
  .auth-section { padding: 130px 0 56px; }
  .auth-card { padding: 32px 22px; }
}

/* ==========================================================================
   Compliance & form states (consent, field errors, cookie banner, embeds,
   disclaimers) — see CHECKLIST.MD.
   ========================================================================== */

/* ---------- consent tick-boxes ---------- */
.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.form-consent input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--accent);
}

.form-consent label { margin: 0; font-weight: 400; cursor: pointer; }
.form-consent a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.form-consent-note { margin: 8px 0 0 28px; font-size: 0.8125rem; color: var(--ink-faint); text-align: left; }

/* ---------- field-level errors (static/js/ajax-form.js) ---------- */
.form-control.is-invalid,
.form-consent input.is-invalid {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 12%, transparent);
}

.form-consent input.is-invalid { outline: 2px solid var(--danger); outline-offset: 2px; }

.field-error {
  margin-top: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--danger);
  text-align: left;
}

.field-error::before { content: "⚠ "; }

button[aria-busy="true"] { cursor: progress; opacity: 0.8; }

/* ---------- booking fees & cancellation disclosure ---------- */
/* A hairline above, not a box: it sits inside the booking card. */
.booking-policy {
  border-top: 1px solid var(--line);
  padding: 12px 0 0;
  font-size: 0.875rem;
  color: var(--ink-soft);
  text-align: left;
}

.booking-policy summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.booking-policy p { margin: 8px 0 0; }

/* ---------- click-to-load embeds (map) ---------- */

/* ---------- cookie banner ---------- */
.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 1100;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  max-width: 760px;
  margin: 0 auto;
  padding: 18px 20px;
  border-radius: 20px;
  background: var(--ink);
  color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 18px 40px rgba(20, 24, 31, 0.3);
  font-size: 0.875rem;
}

.cookie-banner[hidden] { display: none; }
.cookie-banner p { flex: 1 1 320px; margin: 0; }
.cookie-banner a { color: #fff; text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.cookie-banner button {
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 9px 18px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.cookie-banner button.cookie-accept { background: #fff; border-color: #fff; color: var(--ink); }

/* Keep the banner clear of the mobile sticky "Book Now" bar. */
@media (max-width: 767.98px) {
  .cookie-banner { bottom: 76px; left: 10px; right: 10px; }
}

/* ---------- health-information disclaimer ---------- */
.health-disclaimer {
  max-width: 68ch;
  margin: 40px 0 0;
  padding: 18px 20px;
  border: 1px solid rgba(224, 103, 63, 0.22);
  border-radius: 12px;
  background: var(--tint-amber);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.health-disclaimer strong { color: var(--ink); }

/* ---------- footer crisis line ---------- */
.footer-crisis {
  margin-top: 14px;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}

.footer-crisis strong { color: #fff; }

/* ---------- legal pages ---------- */
.legal-table { width: 100%; margin: 12px 0 24px; border-collapse: collapse; font-size: 0.875rem; }
.legal-table th, .legal-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.legal-table th { font-weight: 600; color: var(--ink); background: var(--accent-tint); }
.legal-scroll { overflow-x: auto; }

.btn-link-inline {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.form-line > .form-consent,
.form-line > .form-consent-note { margin-bottom: 18px; }
.form-line > .form-consent + .form-consent-note { margin-top: -10px; }
/* A consent error sits with its own box, indented under the label, not in the gap before the next row. */
.form-consent + .field-error { margin: 6px 0 12px 28px; }
.form-line > .form-consent + .field-error { margin: -12px 0 18px 28px; }  /* the row's own 18px gap sits below the error instead */

/* ==========================================================================
   Submitting state (static/js/ajax-form.js → mabSubmitState)
   ========================================================================== */
.btn-spinner {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 9px;
  vertical-align: -2px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: mab-spin 0.7s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .btn-spinner { animation-duration: 2s; }
}

.btn.is-loading,
.btn.is-loading:disabled { opacity: 1; cursor: progress; transform: none; }

form.is-submitting .form-control,
form.is-submitting input,
form.is-submitting select,
form.is-submitting textarea,
form.is-submitting label { pointer-events: none; }

form.is-submitting .form-control { opacity: 0.65; transition: opacity 0.2s ease; }

.form-slow-note { margin: 10px 0 0; font-size: 0.8125rem; color: var(--ink-faint); }

.field-optional { font-weight: 400; color: var(--ink-faint); }

/* ==========================================================================
   Booking page: who it's for, under-18 details, selected plan
   ========================================================================== */
.booking-for { margin: 0 0 18px; padding: 0; border: 0; }
.booking-for-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.booking-for-option {
  position: relative;
  display: block;
  margin: 0;
  cursor: pointer;
}

.booking-for-option input { position: absolute; opacity: 0; pointer-events: none; }

.booking-for-option span {
  display: block;
  height: 100%;
  padding: 12px 14px 12px 40px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.booking-for-option span::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 14px;
  width: 16px;
  height: 16px;
  border: 2px solid color-mix(in srgb, var(--ink) 30%, #fff);
  border-radius: 50%;
  background: #fff;
}

.booking-for-option strong { display: block; font-size: 0.875rem; color: var(--ink); }
.booking-for-option small { display: block; font-size: 0.75rem; color: var(--ink-faint); line-height: 1.4; }

.booking-for-option input:checked + span { border-color: var(--accent); background: var(--accent-tint); }
.booking-for-option input:checked + span::before { border-color: var(--accent); box-shadow: inset 0 0 0 3px #fff; background: var(--accent); }
.booking-for-option input:focus-visible + span { box-shadow: 0 0 0 3px rgba(31, 93, 91, 0.25); }

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

.booking-minor-panel {
  margin-bottom: 18px;
  padding: 18px 18px 16px;
  border-radius: 20px;
  background: var(--tint-amber);
  border: 1px solid color-mix(in srgb, var(--tint-amber-text) 20%, #fff);
}

.booking-minor-intro { display: flex; gap: 10px; margin-bottom: 14px; font-size: 0.875rem; line-height: 1.5; color: var(--ink-soft); }
.booking-minor-intro i { flex-shrink: 0; margin-top: 2px; font-size: 1.125rem; color: var(--tint-amber-text); }
.booking-minor-panel .form-group { margin-bottom: 14px; }
.booking-minor-panel .form-consent-note { margin-left: 28px; }

.booking-plan-chip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: -6px 0 20px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--accent-tint);
  font-size: 0.875rem;
  color: var(--accent-dark);
}

.booking-plan-chip-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.booking-plan-chip-price { color: var(--ink-soft); }
.booking-plan-chip-change { margin-left: auto; font-size: 0.8125rem; font-weight: 600; color: var(--accent); text-decoration: underline; }

.booking-corporate-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 40px auto 0;
  padding: 16px 20px;
  max-width: 760px;
  border: 1px dashed rgba(20, 24, 31, 0.18);
  border-radius: 20px;
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.booking-corporate-note i { margin-top: 2px; font-size: 1.125rem; color: var(--accent); }
.booking-corporate-note a { font-weight: 600; color: var(--accent); }

.pricing-kind {
  display: inline-block;
  margin-bottom: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--tint-amber);
  color: var(--tint-amber-text);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* ==========================================================================
   Corporate enquiry (contact/corporate_enquiry.html)
   ========================================================================== */
.enquiry-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
  gap: 36px;
  align-items: start;
}

.enquiry-form {
  padding: 34px 36px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.enquiry-step { margin: 0 0 30px; padding: 0 0 26px; border: 0; border-bottom: 1px solid var(--line); }

.enquiry-step-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--ink);
}

.enquiry-form .form-group { margin-bottom: 18px; }
.enquiry-form fieldset.form-group { border: 0; padding: 0; }
.enquiry-form textarea.form-control { border-radius: var(--radius-md) !important; }

.enquiry-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.enquiry-chips > div { display: contents; }

.enquiry-chip { position: relative; margin: 0; cursor: pointer; }
.enquiry-chip input { position: absolute; opacity: 0; pointer-events: none; }

.enquiry-chip span {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.875rem;
  color: var(--ink-soft);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.enquiry-chip input:checked + span { border-color: var(--accent); background: var(--accent); color: #fff; }
.enquiry-chip input:checked + span::before { content: "✓ "; }
.enquiry-chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(31, 93, 91, 0.25); }

.enquiry-segment { display: inline-flex; flex-wrap: wrap; padding: 4px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); }
.enquiry-segment-option { position: relative; margin: 0; cursor: pointer; }
.enquiry-segment-option input { position: absolute; opacity: 0; pointer-events: none; }
.enquiry-segment-option span { display: inline-block; padding: 7px 18px; border-radius: 999px; font-size: 0.875rem; color: var(--ink-soft); }
.enquiry-segment-option input:checked + span { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(20, 24, 31, 0.12); }
.enquiry-segment-option input:focus-visible + span { box-shadow: 0 0 0 3px rgba(31, 93, 91, 0.25); }

.enquiry-submit .btn { min-width: 220px; }

.enquiry-aside { position: sticky; top: 100px; display: grid; gap: 18px; }

.enquiry-card {
  padding: 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

.enquiry-card h2 { margin: 6px 0 4px; font-family: var(--font-display); font-size: 1.375rem; font-weight: 500; color: var(--ink); }
.enquiry-card .enquiry-card-title { margin: 0 0 14px; font-size: 1.125rem; }
.enquiry-card ul { margin: 14px 0; padding: 0; }
.enquiry-card ul li { display: flex; gap: 8px; padding: 4px 0; font-size: 0.875rem; color: var(--ink-soft); }
.enquiry-card ul i { margin-top: 3px; color: var(--accent); }
.enquiry-card a { font-weight: 600; color: var(--accent); }
.enquiry-card p { margin-bottom: 8px; font-size: 0.875rem; color: var(--ink-soft); }
.enquiry-card p i { margin-right: 6px; color: var(--accent); }
.enquiry-package { background: linear-gradient(160deg, var(--accent-tint), #fff 70%); border-color: rgba(31, 93, 91, 0.18); }
.enquiry-package-price { font-weight: 600; color: var(--accent-dark) !important; }
.enquiry-card-quiet { background: var(--bg); box-shadow: none; }
.enquiry-note { padding-top: 10px; border-top: 1px solid var(--line); }

.enquiry-steps { counter-reset: step; margin: 0; padding: 0; list-style: none; }

.enquiry-steps li {
  position: relative;
  padding: 0 0 16px 40px;
  counter-increment: step;
}

.enquiry-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent-dark);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
}

.enquiry-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 30px;
  bottom: 4px;
  width: 2px;
  background: var(--accent-tint);
}

.enquiry-steps strong { display: block; font-size: 0.875rem; color: var(--ink); }
.enquiry-steps span { display: block; font-size: 0.8125rem; color: var(--ink-faint); }

@media (max-width: 991.98px) {
  .enquiry-layout { grid-template-columns: minmax(0, 1fr); }
  .enquiry-aside { position: static; order: -1; }
  .enquiry-aside .enquiry-card:not(.enquiry-package) { display: none; }
}

@media (max-width: 575.98px) {
  .enquiry-form { padding: 24px 18px; }
}

/* ==========================================================================
   Manage booking (booking/self_cancel.html)
   ========================================================================== */
.manage-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr);
  grid-template-areas: "main aside";
  gap: 28px;
  align-items: start;
  max-width: 1160px;
  margin: 0 auto;
}

.manage-main { grid-area: main; min-width: 0; }
.manage-aside { grid-area: aside; position: sticky; top: 100px; display: grid; gap: 18px; }

@media (max-width: 991.98px) {
  .manage-layout { grid-template-columns: 1fr; grid-template-areas: "aside" "main"; }
  .manage-aside { position: static; }
}

.manage-card {
  padding: 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.manage-summary-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.manage-ref { font-size: 0.8125rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.status-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-pill-warm { background: var(--tint-amber); color: var(--tint-amber-text); }
.status-pill-accent { background: var(--accent-tint); color: var(--accent-dark); }

.manage-when { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; }

.date-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 70px;
  padding: 7px 0 8px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 24, 31, 0.05);
  line-height: 1.1;
}

.date-tile-month { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sun-text); }
.date-tile-day { font-family: var(--font-display); font-size: 1.875rem; color: var(--ink); }
.date-tile-dow { font-size: 0.75rem; color: var(--ink-faint); }

.manage-when-date { margin: 0; font-family: var(--font-display); font-size: 1.25rem; line-height: 1.3; color: var(--ink); }
.manage-when-time { margin: 2px 0 0; font-size: 0.9375rem; color: var(--ink-soft); }

.manage-facts { margin: 0 0 16px; padding: 14px 0 0; border-top: 1px solid var(--line); }
.manage-facts div { display: grid; grid-template-columns: 76px 1fr; gap: 10px; padding: 4px 0; font-size: 0.875rem; }
.manage-facts dt { font-weight: 500; color: var(--ink-faint); }
.manage-facts dd { margin: 0; color: var(--ink); }

.manage-join { display: flex; justify-content: center; gap: 8px; width: 100%; margin-bottom: 14px; }

.manage-status-note { margin-bottom: 18px; padding: 12px 14px; border-radius: 12px; background: var(--bg); font-size: 0.875rem; line-height: 1.5; color: var(--ink-soft); }

.manage-label { margin-bottom: 10px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.manage-hint { margin: 8px 0 0; font-size: 0.75rem; line-height: 1.5; color: var(--ink-faint); }

.calendar-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.calendar-button {
  display: block;
  padding: 10px 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: center;
  color: var(--ink) !important;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.calendar-button:hover { border-color: var(--accent); transform: translateY(-1px); text-decoration: none; }

.manage-calendar { margin-bottom: 18px; }

.manage-reminder { padding-top: 16px; border-top: 1px solid var(--line); }

.switch { display: flex; gap: 12px; align-items: flex-start; margin: 0; font-size: 0.875rem; font-weight: 400; color: var(--ink-soft); cursor: pointer; }

.switch input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex-shrink: 0;
  width: 38px;
  height: 22px;
  margin: 0;
  border-radius: 999px;
  background: #cfd4d9;
  cursor: pointer;
  transition: background 0.2s ease;
}

.switch input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 24, 31, 0.2);
  transition: transform 0.2s ease;
}

.switch input:checked { background: var(--accent); }
.switch input:checked::after { transform: translateX(16px); }
.switch input:focus-visible { outline: 3px solid rgba(31, 93, 91, 0.35); outline-offset: 2px; }

.manage-timeline ol { margin: 0; padding: 0; list-style: none; }
.manage-timeline li { position: relative; padding: 0 0 12px 20px; font-size: 0.8125rem; }
.manage-timeline li::before { content: ""; position: absolute; left: 0; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.manage-timeline li:last-child::before { background: #cfd4d9; }
.manage-timeline li:not(:last-child)::after { content: ""; position: absolute; left: 3px; top: 16px; bottom: 0; width: 2px; background: var(--line); }
.manage-timeline strong { display: block; color: var(--ink); }
.manage-timeline span { color: var(--ink-faint); }

/* Tabs: without JS every panel shows, stacked. */
.manage-actions { padding: 0; overflow: hidden; }
.manage-tabs { display: none; }
.manage-actions.has-tabs .manage-tabs { display: flex; gap: 4px; padding: 10px 10px 0; border-bottom: 1px solid var(--line); background: var(--bg); }

.manage-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 18px;
  border: 0;
  border-radius: 12px 12px 0 0;
  background: transparent;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-faint);
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}

.manage-tab:hover { color: var(--ink); }
.manage-tab.is-active { background: var(--surface); color: var(--ink); box-shadow: 0 -1px 0 var(--line), 1px 0 0 var(--line), -1px 0 0 var(--line); }
.manage-tab:focus-visible { outline: 3px solid rgba(31, 93, 91, 0.35); outline-offset: -3px; }
.manage-tab-danger.is-active { color: var(--warm-text); }

.manage-panel { padding: 30px 32px 32px; }
.manage-actions:not(.has-tabs) .manage-panel + .manage-panel { border-top: 1px solid var(--line); }

.manage-panel-title { margin-bottom: 6px; font-family: var(--font-display); font-size: 1.375rem; font-weight: 500; color: var(--ink); }
.manage-panel-lede { margin-bottom: 22px; font-size: 0.9375rem; line-height: 1.6; color: var(--ink-soft); }

.manage-reschedule-grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 28px; align-items: start; }
.manage-reschedule-grid .booking-calendar-wrap { max-width: none; padding: 18px; box-shadow: none; border-radius: var(--radius-md); }
.manage-reschedule-side .booking-selected-slot { margin-bottom: 16px; padding: 12px 14px; border-radius: 12px; background: var(--bg); color: var(--ink-soft); }
.manage-submit { width: 100%; }

@media (max-width: 767.98px) {
  .manage-reschedule-grid { grid-template-columns: 1fr; }
  .manage-panel { padding: 24px 20px; }
  .manage-tab { padding: 12px 12px; font-size: 0.8125rem; }
  .manage-tab i { display: none; }
}

.manage-error { margin-bottom: 16px; padding: 10px 14px; border-radius: 12px; background: var(--tint-rose); color: var(--warm-text); font-size: 0.875rem; }
.manage-success { display: flex; gap: 10px; align-items: center; padding: 14px 16px; border-radius: 12px; background: var(--tint-mint); color: var(--success); font-size: 0.9375rem; }

.manage-cancel { margin-top: 18px; }
.manage-cancel .form-consent { margin-bottom: 16px; }

.btn-danger-soft {
  border: 1px solid color-mix(in srgb, var(--danger) 25%, #fff);
  border-radius: 20px;
  background: var(--tint-rose);
  color: var(--warm-text);
  font-weight: 600;
}

.btn-danger-soft:hover,
.btn-danger-soft:focus { background: var(--warm-text); border-color: var(--warm-text); color: #fff; }
.manage-reschedule-side input[type="time"].form-control { width: 100%; }

/* ==========================================================================
   WCAG 2.2 AA
   ========================================================================== */

/* 2.4.7 Focus Visible: one clear ring for every keyboard-focused control.
   Components with their own ring (tabs, switches, chips) refine this. */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Bootstrap's reboot gives button:focus the browser's blue ring; same teal ring as links. */
button:focus:not(:focus-visible) { outline: none; }
button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; box-shadow: 0 0 0 6px rgba(31, 93, 91, 0.18); }
#cta .btn:focus-visible,
footer a:focus-visible { outline-color: #fff; }

/* 2.4.11 Focus Not Obscured: keep focused elements clear of the sticky
   navigation bar when the browser scrolls them into view. */
html { scroll-padding-top: 100px; }

/* 1.4.1 Use of Color: links inside running text are underlined, not
   told apart by colour alone. */
.health-disclaimer a,
.legal-content p a,
.legal-content li a,
.detail-body p a,
.detail-body li a { text-decoration: underline; text-underline-offset: 2px; }

/* 1.4.3 Contrast: Bootstrap's pink code text is 3.6:1 on our background. */
code { color: var(--accent-dark); }

/* 2.5.8 Target Size: carousel dots are 12px; give each a 24px+ target. */

/* 1.4.10 Reflow: the reschedule calendar must fit a 320px-wide screen. */
.manage-reschedule-grid > * { min-width: 0; }
@media (max-width: 420px) {
  .manage-panel { padding: 20px 14px; }
  .manage-reschedule-grid .booking-calendar-wrap { padding: 12px 8px; }
  .manage-reschedule-grid .simple-cal-grid { gap: 2px; }
  .manage-card { padding: 20px 16px; }
}
.simple-cal-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.simple-cal-day { min-width: 0; padding: 0; }

/* ==========================================================================
   Reading text size (blog article: A− / A / A+ / A++)
   ========================================================================== */
.detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }

.text-size {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}

.text-size-label { padding: 0 8px 0 10px; font-size: 0.75rem; font-weight: 600; color: var(--ink-faint); }

.text-size-btn {
  min-width: 36px;
  height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.text-size-btn[data-size="small"] { font-size: 0.75rem; }
.text-size-btn[data-size="normal"] { font-size: 0.875rem; }
.text-size-btn[data-size="large"] { font-size: 1.125rem; }
.text-size-btn[data-size="xlarge"] { font-size: 1.25rem; }
.text-size-btn:hover { background: var(--bg); color: var(--ink); }
.text-size-btn[aria-pressed="true"] { background: var(--accent); color: #fff; }

/* Scales the article text only; headings inside follow via em units. */
.article-body { transition: font-size 0.15s ease; }
.article-body.text-size-small { font-size: 0.9375rem; }
.article-body.text-size-large { font-size: 1.25rem; line-height: 1.75; }
.article-body.text-size-xlarge { font-size: 1.5rem; line-height: 1.8; }

.legal-draft-note { display: inline-block; margin-top: 12px; padding: 4px 12px; border-radius: 999px; background: var(--tint-amber); color: var(--tint-amber-text); font-size: 0.8125rem; font-weight: 600; }

/* ==========================================================================
   Booking time slots
   ========================================================================== */
.booking-slots-field { margin: 0 0 18px; padding: 0; border: 0; }
.booking-slots { min-height: 48px; }
.booking-slots-empty { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--bg); font-size: 0.875rem; color: var(--ink-faint); }
.booking-slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.booking-slot-grid > div { position: relative; }
.booking-slot-grid input { position: absolute; opacity: 0; pointer-events: none; }

.booking-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  margin: 0;
  padding: 6px 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 120ms var(--ease-out);
}

.booking-slot:hover { border-color: var(--accent); }
.booking-slot-grid input:checked + .booking-slot { border-color: var(--accent); background: var(--accent); color: #fff; }
/* The chosen time gets a tick as well as the colour, so the choice doesn't rest on colour alone. */
.booking-slot::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 9px;
  width: 5px;
  height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  opacity: 0;
  transform: rotate(45deg) scale(0.6);
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
  pointer-events: none;
}
.booking-slot-grid input:checked + .booking-slot::after { opacity: 1; transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
  .booking-slot::after { transform: rotate(45deg); transition: opacity 180ms var(--ease-out); }
}
.booking-slot-grid input:focus-visible + .booking-slot { outline: 3px solid var(--accent); outline-offset: 2px; }

.booking-slot.is-taken {
  border-style: dashed;
  background: repeating-linear-gradient(-45deg, transparent 0 6px, rgba(20, 24, 31, 0.04) 6px 12px);
  color: var(--ink-faint);
  cursor: not-allowed;
}

.booking-slot.is-taken .booking-slot-time { text-decoration: line-through; }
.booking-slot-note { font-size: 0.75rem; font-weight: 500; }

.booking-confirmation-manage { display: grid; gap: 8px; justify-items: center; margin: 4px 0 18px; font-size: 0.8125rem; color: var(--ink-faint); }

/* ==========================================================================
   Team member profile (pages/team_detail.html)
   ========================================================================== */
.profile-hero {
  padding: 148px 0 64px;
  background:
    radial-gradient(circle at 85% 10%, rgba(31, 93, 91, 0.10), transparent 45%),
    linear-gradient(180deg, var(--accent-tint) 0%, var(--bg) 100%);
}

.profile-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.profile-portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-lift);
}

.profile-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }

.profile-portrait-initials {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-display);
  font-size: clamp(4rem, 10vw, 7rem);
  font-weight: 500;
}

.profile-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  line-height: 1.08;
  color: var(--ink);
  margin: 0 0 8px;
}

.profile-role { margin: 0 0 10px; font-size: 1.0625rem; font-weight: 500; color: var(--accent-dark); }

.profile-credentials {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  margin: 0 0 18px;
}

.profile-headline {
  font-size: 1.25rem;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 620px;
  margin: 0 0 24px;
}

.profile-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
}

.profile-facts li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
}

.profile-facts i { color: var(--accent); font-size: 1rem; }

.profile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 24px 0; }
.profile-actions .btn,
.profile-actions .btn-border-ink { margin: 0; }

.profile-social { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0; }

.profile-social a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 1.125rem;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.profile-social a:hover,
.profile-social a:focus-visible { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- in-page navigation ---------- */
.profile-tabs {
  position: sticky;
  top: 72px;
  z-index: 20;
  background: rgba(250, 249, 246, 0.92);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.profile-tabs ul {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.profile-tabs ul::-webkit-scrollbar { display: none; }
/* Phones: the row scrolls sideways; a fade at the edge shows there's more than "Vi…". */
@media (max-width: 575.98px) {
  /* Four short tabs fit a 390px screen when tightened; the fade stays for longer sets. */
  .profile-tabs ul { gap: 0; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
  .profile-tabs ul a { gap: 5px; padding: 14px 7px; font-size: 0.875rem; }
}

.profile-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 14px;
  min-height: 44px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}

.profile-tabs a:hover,
.profile-tabs a:focus-visible,
.profile-tabs a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--accent); }

.profile-tab-count {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--accent-tint);
  color: var(--accent-dark);
  font-size: 0.75rem;
  text-align: center;
}

/* ---------- sections ---------- */
.profile-section { padding: 80px 0; scroll-margin-top: 130px; }
.profile-section-tint { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.profile-section-head { margin-bottom: 36px; max-width: 680px; }
.profile-section-head p { margin: 8px 0 0; font-size: 1rem; color: var(--ink-soft); }

.profile-section-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 20px;
}

.profile-section-head .profile-section-title { margin-bottom: 0; }

/* A real sub-heading ("Areas of focus", "Your first session with…"), not a small uppercase label. */
.profile-subtitle {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  margin: 36px 0 12px;
}

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

.profile-about-grid > :only-child { grid-column: 1 / -1; max-width: 780px; }

.profile-bio { max-width: none; margin: 0; font-size: 1.125rem; line-height: 1.8; }

.profile-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }

.profile-chips li {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--accent-tint);
  color: var(--accent-dark);
  font-size: 0.875rem;
  font-weight: 500;
}

.profile-about-side { display: grid; gap: 20px; position: sticky; top: 150px; }

.profile-card {
  padding: 24px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

.profile-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 16px;
}

.profile-card-title i { color: var(--accent); font-size: 1.125rem; }

.profile-timeline { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--accent-tint); }

.profile-timeline li {
  position: relative;
  padding: 0 0 14px;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.profile-timeline li:last-child { padding-bottom: 0; }

.profile-timeline li::before {
  content: '';
  position: absolute;
  left: -24px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--accent);
}

.profile-link-list { list-style: none; margin: 0; padding: 0; }
.profile-link-list li + li { border-top: 1px solid var(--line); }

.profile-link-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
}

.profile-link-list a::after { content: '→'; color: var(--accent); transition: transform 0.2s ease; }
.profile-link-list a:hover::after { transform: translateX(3px); }

/* ---------- articles ---------- */
.profile-article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 24px;
}

.profile-article {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--line);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.profile-article:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.profile-article-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.profile-article-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-article-body { padding: 20px 22px 24px; }
.profile-article time { font-size: 0.8125rem; color: var(--ink-faint); }

.profile-article h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.35;
  margin: 6px 0 8px;
}

.profile-article h3 a { color: var(--ink); }
.profile-article h3 a:hover { color: var(--accent); }
.profile-article p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--ink-soft); }

/* ---------- research ---------- */
.profile-papers { list-style: none; margin: 0; padding: 0; max-width: 900px; }

.profile-paper {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 20px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
}

.profile-paper:last-child { border-bottom: 1px solid var(--line); }

.profile-paper-year {
  display: grid;
  place-items: center;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--accent-tint);
  color: var(--accent-dark);
  font-weight: 700;
  font-size: 0.9375rem;
}

.profile-paper h3 {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.45;
  margin: 0 0 6px;
}

.profile-paper h3 a { color: var(--ink); }
.profile-paper h3 a:hover { color: var(--accent); }
.profile-paper h3 i { font-size: 0.8125rem; color: var(--accent); margin-left: 2px; }
.profile-paper-authors { margin: 0 0 4px; font-size: 0.875rem; color: var(--ink-soft); }
.profile-paper-venue { margin: 0; font-size: 0.875rem; color: var(--ink-faint); overflow-wrap: anywhere; }
.profile-paper-summary { margin-top: 10px; font-size: 0.9375rem; }
.profile-paper-summary summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.profile-paper-summary p { margin: 10px 0 0; line-height: 1.7; }

/* ---------- videos ---------- */
.profile-video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 28px;
}

.profile-video { margin: 0; }

.profile-video-frame {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--ink);
}

.profile-video-frame img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.9; transition: opacity 0.2s ease, transform 0.4s ease; }
.profile-video-frame:hover img { opacity: 1; transform: scale(1.03); }
.profile-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.profile-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: var(--ink);
  font-size: 1.625rem;
  box-shadow: 0 10px 30px rgba(20, 24, 31, 0.3);
  transition: transform 0.2s ease;
}

.profile-video-play i { margin-left: 3px; }
.profile-video-frame:hover .profile-video-play,
.profile-video-frame:focus-visible .profile-video-play { transform: scale(1.08); }
.profile-video figcaption h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; color: var(--ink); margin: 16px 0 6px; }
.profile-video figcaption p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--ink-soft); }

/* ---------- call to action ---------- */
.profile-cta-band { padding: 72px 0; }

.profile-cta-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 44px 48px;
  border-radius: var(--radius-lg);
  background: var(--accent-dark);
  color: rgba(255, 255, 255, 0.85);
}

.profile-cta-inner h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.1rem); color: #fff; margin: 0 0 8px; }
.profile-cta-inner p { margin: 0; max-width: 560px; font-size: 1rem; line-height: 1.65; }
.profile-cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.profile-cta-inner .btn-common { background: #fff; color: var(--ink) !important; margin: 0; }
.profile-cta-inner .btn-common:hover { background: var(--accent-tint); }
.profile-cta-phone { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; }
.profile-cta-phone:hover,
.profile-cta-phone:focus { color: #fff; text-decoration: underline; }

/* ---------- rest of the team ---------- */
.profile-team {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.profile-team-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.profile-team-card:hover { box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.profile-team-card img,
.profile-team-avatar { flex-shrink: 0; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.profile-team-avatar { display: grid; place-items: center; font-weight: 700; font-size: 1.25rem; }
.profile-team-card strong { display: block; color: var(--ink); font-size: 1rem; }
.profile-team-card span span { display: block; color: var(--ink-soft); font-size: 0.875rem; }

@media (max-width: 991.98px) {
  .profile-hero { padding: 120px 0 48px; }
  .profile-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .profile-portrait { max-width: 300px; }
  .profile-about-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .profile-about-side { position: static; }
  .profile-tabs { top: 64px; }
}

@media (max-width: 575.98px) {
  .profile-portrait { max-width: 220px; border-radius: var(--radius-md); }
  .profile-section { padding: 56px 0; }
  .profile-paper { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .profile-paper-year { justify-self: start; padding: 0 12px; height: 32px; font-size: 0.8125rem; }
  .profile-cta-inner { padding: 32px 24px; }
  .profile-actions > * { flex: 1 1 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .profile-article,
  .profile-team-card,
  .profile-video-frame img,
  .profile-video-play { transition: none; }
  .profile-article:hover,
  .profile-team-card:hover { transform: none; }
}

/* ---------- blog author byline and card ---------- */
.detail-author { display: inline-flex; align-items: center; gap: 8px; }
.detail-author img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.detail-author a { font-weight: 600; }

.author-card {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 760px;
  margin: 40px 0 0;
  padding: 22px 24px;
  border-radius: var(--radius-md);
  background: var(--accent-tint);
}

.author-card-photo img,
.author-card-photo span {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  font-weight: 700;
  font-size: 1.375rem;
}

.author-card p { margin: 0; }
.author-card-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-dark); }
.author-card-name { font-family: var(--font-display); font-size: 1.25rem; color: var(--ink); }
.author-card-name a { color: var(--ink); }
.author-card-role { font-size: 0.875rem; color: var(--ink-soft); }
.author-card-links { margin-top: 6px !important; font-size: 0.875rem; font-weight: 600; }

@media (max-width: 575.98px) {
  .author-card { align-items: flex-start; }
}

/* ==========================================================================
   Booking page — frosted-glass steps on a soft colour field
   (pages/booking.html). The glass needs colour behind it to blur, so
   .booking-stage-bg paints slow-drifting orbs under everything. Where
   backdrop-filter isn't supported, or the visitor asks for reduced
   transparency, the cards fall back to solid white.
   ========================================================================== */
.booking-stage {
  position: relative;
  isolation: isolate;
  /* clip, not hidden: hidden would stop the summary from sticking. */
  overflow: hidden;
  overflow: clip;
}

.booking-stage-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.booking-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
}

.booking-orb-1 { width: 520px; height: 520px; top: -120px; left: -140px; background: var(--wash-mint); }
.booking-orb-2 { width: 460px; height: 460px; top: 260px; right: -160px; background: var(--wash-peach); }
.booking-orb-3 { width: 420px; height: 420px; bottom: -80px; left: 30%; background: var(--wash-honey); opacity: 0.4; }

/* ---------- intro ---------- */
.booking-intro { padding: 140px 0 36px; }
.booking-intro .eyebrow { margin-bottom: 14px; }

.booking-intro h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  line-height: 1.08;
  color: var(--ink);
  margin: 0 0 14px;
}

.booking-intro-lede { max-width: 640px; margin: 0; font-size: 1.125rem; line-height: 1.65; color: var(--ink-soft); }

.booking-intro .booking-trust-strip li {
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* ---------- layout ---------- */
.booking-body { padding: 0 0 96px; }

.booking-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: 28px;
  align-items: start;
}

.booking-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; min-width: 0; }
.booking-step { padding: 30px 32px 32px; }

.booking-step-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
.booking-step-head h2 { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; line-height: 1.25; color: var(--ink); margin: 0 0 4px; }
.booking-step-head p { margin: 0; font-size: 0.875rem; color: var(--ink-soft); }

.booking-step-badge {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: linear-gradient(145deg, var(--accent), var(--accent-dark));
  color: #fff;
  font-family: var(--font-display);
  font-size: 1rem;
  box-shadow: 0 6px 14px rgba(31, 93, 91, 0.28);
}

.booking-stage .form-control {
  min-height: var(--control-h);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(20, 24, 31, 0.12);
  border-radius: 12px;
}

.booking-stage .form-control:focus { background: #fff; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(31, 93, 91, 0.14); }

/* ---------- step 1: counsellors ---------- */
.booking-service-field { max-width: 420px; margin-bottom: 22px; }
.booking-counsellors { margin: 0; padding: 0; border: 0; min-width: 0; }
.booking-counsellor-picked { font-weight: 500; color: var(--accent); }

.booking-counsellor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: 10px;
}

.booking-counsellor-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 12px 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.55);
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.booking-counsellor-card[hidden] { display: none; }
.booking-counsellor-card:hover { background: rgba(255, 255, 255, 0.85); transform: translateY(-1px); }
.booking-counsellor-card input { position: absolute; opacity: 0; pointer-events: none; }

.booking-counsellor-card:has(input:checked) {
  border-color: var(--accent);
  background: rgba(231, 241, 239, 0.9);
  box-shadow: 0 8px 20px rgba(31, 93, 91, 0.14);
}

.booking-counsellor-card:has(input:checked)::after {
  content: '✓';
  position: absolute;
  top: 8px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}

.booking-counsellor-card:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }

.booking-counsellor-avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  font-weight: 700;
  font-size: 1rem;
}

.booking-counsellor-any { background: var(--accent-tint); color: var(--accent); font-size: 1.25rem; }
.booking-counsellor-text { min-width: 0; padding-right: 18px; }
.booking-counsellor-text strong { display: block; font-size: 0.875rem; color: var(--ink); line-height: 1.3; }
.booking-counsellor-text small { display: block; font-size: 0.75rem; color: var(--ink-soft); line-height: 1.35; }

/* ---------- step 2: calendar beside the times ---------- */
.booking-when {
  display: grid;
  grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.booking-stage .booking-calendar-wrap {
  max-width: none;
  padding: 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--glass-edge);
  box-shadow: none;
}

.booking-stage .booking-selected-slot { margin: 0; }
.booking-stage .booking-slots-field { margin: 0; }
.booking-stage .booking-slots-empty { background: rgba(255, 255, 255, 0.6); }
.booking-stage .booking-slot { background: rgba(255, 255, 255, 0.8); }

.booking-slot.is-busy {
  width: 100%;
  border-style: dashed;
  border-color: rgba(168, 61, 28, 0.35);
  background: rgba(253, 236, 228, 0.7);
  color: var(--warm-text);
  font-family: inherit;
}

.booking-slot.is-busy:hover,
.booking-slot.is-busy:focus-visible { border-color: var(--warm-text); }

.booking-slot-notice {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(253, 236, 228, 0.85);
  border: 1px solid rgba(168, 61, 28, 0.2);
  font-size: 0.875rem;
  color: var(--ink);
}

.booking-slot-notice[hidden] { display: none; }
.booking-slot-notice p { margin: 0; }
.booking-slot-notice-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }

.booking-alt-btn {
  padding: 9px 14px;
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.booking-alt-btn:hover,
.booking-alt-btn:focus-visible { background: var(--accent); }
.booking-slot-notice-foot { font-size: 0.8125rem; color: var(--ink-soft); }

/* ---------- step 3: details ---------- */
.booking-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.booking-field-wide { grid-column: 1 / -1; }
.booking-field-grid .help-text { margin: -6px 0 16px; }
.booking-stage .booking-for-option { background: rgba(255, 255, 255, 0.6); }
.booking-stage .booking-minor-panel { background: var(--tint-amber); }
.booking-optional { font-weight: 400; color: var(--ink-faint); }
.booking-required { color: var(--warm-text); }
.booking-submit { margin-top: 22px; }
.booking-submit .btn { width: 100%; min-height: 54px; font-size: 1rem; }

/* ---------- summary ---------- */
.booking-aside { position: sticky; top: 96px; display: grid; gap: 16px; }
.booking-summary { padding: 26px 26px 22px; }
.booking-summary-label { margin: 0 0 14px; font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; line-height: 1.3; color: var(--ink); }  /* the box's title, not a small uppercase label */
.booking-summary-list { margin: 0 0 20px; }

.booking-summary-list > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(20, 24, 31, 0.07);
}

.booking-summary-list dt { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 500; color: var(--ink-soft); white-space: nowrap; }
.booking-summary-list dt i { color: var(--accent); }
.booking-summary-list dd { margin: 0; text-align: right; font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.booking-summary-list dd.is-empty { font-weight: 400; color: var(--ink-faint); }

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

.booking-summary-steps li {
  counter-increment: step;
  position: relative;
  padding-left: 34px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.booking-summary-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent-dark);
  font-size: 0.75rem;
  font-weight: 700;
}

.booking-summary-steps strong { display: block; color: var(--ink); }
.booking-summary-help { margin: 0; padding-top: 14px; border-top: 1px solid rgba(20, 24, 31, 0.07); font-size: 0.875rem; color: var(--ink-soft); }
.booking-summary-help a { font-weight: 600; white-space: nowrap; }

.booking-stage .booking-corporate-note {
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 16px 18px;
  border-radius: 20px;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.booking-stage .booking-corporate-note i { color: var(--accent); font-size: 1.125rem; margin-top: 1px; }

.booking-stage .booking-confirmation { max-width: 640px; margin: 0 auto; padding: 48px 36px; }
.booking-stage .booking-empty { padding: 40px; text-align: center; }

@media (max-width: 1100px) {
  .booking-when { grid-template-columns: minmax(0, 1fr); }
  .booking-stage .booking-calendar-wrap { max-width: 420px; }
}

@media (max-width: 991.98px) {
  .booking-shell { grid-template-columns: minmax(0, 1fr); }
  .booking-aside { position: static; }
  /* Single column: the form runs uninterrupted (a one-line recap sits by
     the submit button); the full summary and what happens next follow it. */
  .booking-aside { order: 2; }
  .booking-intro { padding: 120px 0 28px; }
}

@media (max-width: 575.98px) {
  .booking-step { padding: 22px 18px 24px; border-radius: var(--radius-md); }
  .booking-field-grid { grid-template-columns: minmax(0, 1fr); }
  .booking-orb { filter: blur(40px); }
  .booking-orb-1 { width: 320px; height: 320px; }
  .booking-orb-2 { width: 300px; height: 300px; }
  .booking-orb-3 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .booking-counsellor-card { transition: none; }
  .booking-counsellor-card:hover { transform: none; }
}

/* ==========================================================================
   Liquid glass — site-wide
   Every public page sits on one soft, fixed colour field (body::before,
   painted with cheap gradients — no blurred elements, so it costs nothing
   to scroll). Sections are see-through so that colour shows, and cards are
   frosted glass: translucent white, a bright edge, a light sheen across the
   top and a backdrop blur. Dark bands use a deep teal glass instead.

   Falls back to near-solid cards where backdrop-filter isn't supported and
   for visitors who ask for reduced transparency. Loaded last, so these
   rules win over the older per-section backgrounds above.
   ========================================================================== */
:root {
  /* Cards are solid paper, not frosted glass: when every surface blurred, none stood forward.
     Only the nav, the hero's check-in panel and the floating button keep a blur of their own. */
  --glass-bg: rgba(255, 255, 255, 0.92);
  --glass-bg-strong: #fff;
  --glass-edge: rgba(20, 24, 31, 0.07);
  --glass-blur: none;
  --glass-shadow: var(--shadow-soft);
  --glass-shadow-lift: var(--shadow-lift);
  --glass-sheen: none;
}

p, li { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

/* ---------- the colour field ---------- */
body { background: var(--bg); }

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Sections that used to paint their own flat colour let the field through. */
header#home,
.detail-hero,
.profile-hero,
.auth-section,
.section { background: transparent; }

.profile-section-tint {
  background: rgba(255, 255, 255, 0.32);
  border-top: 1px solid rgba(255, 255, 255, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
}

/* ---------- glass cards ---------- */
.glass-card,
.services-item,
.pricing-table,
.testimonial-item,
.testimonial-grid .testimonial-item,
.blog-item .blog-item-wrapper,
#blog .blog-item-wrapper,
.contact-block,
.auth-card,
.enquiry-card,
.enquiry-form,
.manage-card,
.my-booking-card,
.legal-content,
.detail-cta,
.profile-card,
.profile-article,
.profile-team-card,
.author-card,
.booking-empty {
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

/* The sheen: light catching the top edge of curved glass. */
.glass-card::before,
.services-item::before,
.pricing-table::before,
.testimonial-item::before,
.blog-item-wrapper::before,
.contact-block::before,
.auth-card::before,
.enquiry-form::before,
.manage-card::before,
.legal-content::before,
.detail-cta::before,
.profile-card::before,
.author-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: var(--glass-sheen);
  pointer-events: none;
}

.glass-card > *,
.services-item > *,
.pricing-table > *,
.testimonial-item > *,
.blog-item-wrapper > *,
.contact-block > *,
.auth-card > *,
.enquiry-form > *,
.manage-card > *,
.legal-content > *,
.detail-cta > *,
.profile-card > *,
.author-card > * { position: relative; z-index: 1; }

/* Cards that lift on hover get a brighter glass. */
.services-item:hover,
.pricing-table:hover,
.blog-item .blog-item-wrapper:hover,
#blog .blog-item-wrapper:hover,
.profile-article:hover,
.profile-team-card:hover {
  background: var(--glass-bg-strong);
  border-color: #fff;
  box-shadow: var(--glass-shadow-lift);
}

/* Spacing for cards that never had a box of their own. */
.contact-block { padding: 32px; }
.legal-content { padding: 44px 48px; max-width: 800px; }  /* ~75 characters a line */
.testimonial-item,
.testimonial-grid .testimonial-item,
.profile-article,
.profile-team-card { border-radius: var(--radius-md); }

/* Image tops keep their rounded corners inside the glass. */
.blog-item .blog-item-wrapper,
#blog .blog-item-wrapper,
.profile-article { overflow: hidden; }

/* Inner tints read as glass-on-glass instead of grey blocks. */
.pricing-table .pricing-details ul li:nth-child(even) { background: rgba(255, 255, 255, 0.4); }
.pricing-table .plan-button { background: transparent; }
.badge-muted { background: rgba(255, 255, 255, 0.6); }

/* ---------- form fields ---------- */
.form-control,
.contact-block .form-control {
  background-color: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(20, 24, 31, 0.12);
}

/* Inputs were 38px, selects 56px and the newsletter 48px: one height everywhere. */
input.form-control,
select.form-control { min-height: var(--control-h); }

.form-control:focus,
.contact-block .form-control:focus {
  background-color: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(31, 93, 91, 0.14);
}

/* ---------- buttons ---------- */
.btn-common {
  background: linear-gradient(180deg, #232a33 0%, var(--ink) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 8px 20px rgba(20, 24, 31, 0.18);
}

.btn-common:hover { background: var(--accent-dark); }

.btn-border-ink {
  background: #fff;
  border-color: var(--glass-edge);
  box-shadow: var(--shadow-soft);
}

/* ---------- navigation ---------- */
.navbar.fixed-top,
.navbar.fixed-top.menu-bg {
  background: rgba(250, 249, 246, 0.6) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 8px 30px rgba(20, 45, 44, 0.06) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  backdrop-filter: blur(20px) saturate(1.8);
}

@media (max-width: 767.98px) {
  .collapse.show,
  .navbar-collapse { background: rgba(255, 255, 255, 0.92); border-radius: var(--radius-md); }
}

/* ---------- floating band ----------
   The "Not sure where to start?" band is an inset, rounded panel of deep
   teal glass that floats on the colour field. */
#cta {
  position: relative;
  margin-left: clamp(16px, 2.5vw, 36px);
  margin-right: clamp(16px, 2.5vw, 36px);
  border-radius: 20px;
  overflow: hidden;
}

#cta,
.profile-cta-inner {
  background: var(--accent-dark) !important;
  border: 0;
  box-shadow: var(--shadow-lift);
}

/* A soft highlight along the top edge of the dark glass. */
#cta::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0) 35%);
}

#cta > .container { position: relative; }

/* Hero trust points as glass pills. */

/* Footer: the same deep glass, rising out of the colour field. */
footer {
  position: relative;
  margin-top: var(--section-framed);  /* clear of the dark band above, so the two don't meet as a seam */
  border-radius: 20px 20px 0 0;
  overflow: hidden;
  background: linear-gradient(180deg, #16302f 0%, var(--ink) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset;
}

#copyright { background: transparent; }

/* ---------- small pieces ---------- */
.floating-book-cta {
  background: rgba(31, 93, 91, 0.86);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 12px 30px color-mix(in srgb, var(--accent-dark) 28%, transparent);
}

.profile-tabs { background: rgba(250, 249, 246, 0.6); border-color: rgba(255, 255, 255, 0.7); }
.profile-facts li,
.profile-social a,
.booking-intro .booking-trust-strip li { background: rgba(255, 255, 255, 0.6); border-color: var(--glass-edge); }

.booking-calendar-wrap { background: rgba(255, 255, 255, 0.7); border-color: var(--glass-edge); }

/* ---------- fallbacks ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass-bg: rgba(255, 255, 255, 0.94); --glass-bg-strong: #fff; }
  .navbar.fixed-top,
  .navbar.fixed-top.menu-bg { background: rgba(250, 249, 246, 0.97) !important; }
}

@media (prefers-reduced-transparency: reduce) {
  :root { --glass-bg: #fff; --glass-bg-strong: #fff; }
  .navbar.fixed-top,
  .navbar.fixed-top.menu-bg { background: var(--bg) !important; }
}

/* Smaller blur on phones: cheaper to draw, and the cards are narrow. */
@media (max-width: 575.98px) {
  .legal-content { padding: 28px 20px; }
  .contact-block { padding: 22px 18px; }
}

/* ==========================================================================
   Warmth, rhythm and motion
   Calm teal stays the colour of trust; a sunrise accent (apricot → coral)
   marks every way in — booking buttons, highlights, the hero glow. Buttons
   use dark text on the warm gradient, which keeps them well above AA
   contrast. Spacing is tighter so pages feel full rather than sparse, and
   content eases in as it scrolls into view (off for reduced motion).
   ========================================================================== */
:root {
  --sun-1: #ffd3ad;
  --sun-2: #f9a877;
  --sun-3: #f2895c;
  --sun-text: #a8441f;
  --tint-honey: #fff1d4;
  --tint-honey-text: #7a5200;
  --tint-lilac-text: #5b4bb0;
  --tint-amber: #fdf1e3;
  --tint-amber-text: #9a5a12;
  --tint-lilac: #eeeafd;
  --tint-rose: #fde6e1;
  --tint-mint: #e1f3ec;
  --tint-sky: #e3eefb;
  /* The page's colour field and the booking orbs: blurred, never behind text at full strength. */
  --wash-mint: #8ccfc0;
  --wash-peach: #f9a877;
  --wash-honey: #ffd68c;
  --wash-lilac: #c4b8f5;
}
/* The site is light by design (a sunlit room): say so, so browsers don't auto-darken it. */
:root { color-scheme: light; caret-color: var(--accent); }
::selection { background: var(--sun-1); color: var(--ink); }

/* A brighter, warmer colour field. */
body::before {
  background:
    radial-gradient(40vmax 40vmax at 100% -5%, color-mix(in srgb, var(--wash-peach) 42%, transparent), transparent 70%),
    radial-gradient(42vmax 42vmax at -8% 10%, color-mix(in srgb, var(--wash-mint) 55%, transparent), transparent 70%),
    radial-gradient(40vmax 40vmax at 30% 105%, color-mix(in srgb, var(--wash-honey) 42%, transparent), transparent 70%),
    radial-gradient(34vmax 34vmax at 85% 70%, color-mix(in srgb, var(--wash-lilac) 30%, transparent), transparent 70%),
    radial-gradient(28vmax 28vmax at 50% 45%, rgba(255, 255, 255, 0.6), transparent 70%);
}

/* ---------- rhythm ---------- */
.section { padding: var(--section-open) 0; }
.section-header { margin-bottom: var(--section-head-gap); }

/* ---------- the warm action ---------- */
.btn-common,
.navbar-nav .nav-link-cta,
.floating-book-cta {
  background: linear-gradient(135deg, var(--sun-1) 0%, var(--sun-2) 55%, var(--sun-3) 100%) !important;
  background-size: 160% 160% !important;
  background-position: 0% 50% !important;
  color: var(--ink) !important;
  border: 0;
  box-shadow: 0 1px 2px rgba(20, 24, 31, 0.08), 0 6px 16px rgba(20, 24, 31, 0.08);
  transition: background-position 0.5s ease, box-shadow 0.3s ease, transform 0.2s ease;
}

.btn-common:hover,
.btn-common:focus-visible,
.navbar-nav .nav-link-cta:hover,
.floating-book-cta:hover {
  background-position: 100% 50% !important;
  color: var(--ink) !important;
  box-shadow: 0 2px 4px rgba(20, 24, 31, 0.08), 0 10px 24px rgba(20, 24, 31, 0.12);
  transform: translateY(-1px);
}

.btn-common:disabled,
.btn-common[aria-disabled="true"] { box-shadow: none; transform: none; }

.btn-sm { padding: 9px 18px; font-size: 0.875rem; }

/* ---------- hero ---------- */
.hero-modern { padding: 168px 0 var(--section-framed); }  /* the How it works panel below separates itself */

.hero-content h1 em {
  /* Emphasis by colour alone, upright: the italic serif hero is the stock template look. */
  font-style: normal;
  color: var(--accent);
  padding-right: 0.08em;
}

.hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 56px; }
.hero-actions { margin-bottom: 32px; }
.hero-actions .btn { display: inline-flex; align-items: center; gap: 10px; }

@media (max-width: 991.98px) {
  .hero-modern { padding: 128px 0 56px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
}

/* ---------- how it works ---------- */
.how-it-works { padding: 0 0 var(--section-framed); }

.how-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  padding: 44px 48px;
  border-radius: 20px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.how-intro .eyebrow { color: var(--sun-text); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.how-intro h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.2; color: var(--ink); margin: 12px 0; }
.how-intro { max-width: 620px; }
.how-intro p { margin: 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.6; }

.how-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; list-style: none; margin: 0; padding: 0; }

.how-step {
  position: relative;
  padding: 24px 0 0;
  border-top: 1px solid var(--line);
}
.how-step h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 600; color: var(--ink); margin: 14px 0 6px; }
.how-step p { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--ink-soft); }
.how-step-num { position: absolute; top: 20px; right: 0; font-family: var(--font-display); font-size: 1.75rem; color: rgba(20, 24, 31, 0.1); }
.how-step-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; font-size: 1.25rem; }
.how-tone-1 { background: var(--tint-mint); color: var(--accent); }
.how-tone-2 { background: var(--tint-honey); color: var(--tint-honey-text); }  /* sunrise is for booking actions only */
.how-tone-3 { background: var(--tint-lilac); color: var(--tint-lilac-text); }

@media (max-width: 991.98px) {
  .how-panel { padding: 32px 28px; }
}

@media (max-width: 767.98px) {
  .how-steps { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .how-panel { padding: 24px 20px; border-radius: 20px; }
}

/* ---------- services: a colourful bento ---------- */
.services-bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.services-bento .services-item { display: flex; flex-direction: column; height: 100%; padding: 32px 28px; border-radius: 20px; }
.services-bento .services-item p { flex: 1; }
/* Small tiles: "Learn more" follows the words. Pinned to the bottom, a short
   tile beside the Crisis card (taller with its call chips) opened a gap above it. */
.services-bento .services-item:not(:first-child) p { flex: 0 0 auto; }
.services-bento .services-item:not(:first-child) .services-item-link { margin-top: 12px; }

/* Two soft tints, alternating, beside the feature tile — calm, not candy. */
.services-bento .services-item:nth-child(even) { background: linear-gradient(150deg, rgba(255, 228, 208, 0.85), rgba(255, 255, 255, 0.55)); }
.services-bento .services-item:nth-child(odd):not(:first-child) { background: linear-gradient(150deg, rgba(220, 240, 233, 0.85), rgba(255, 255, 255, 0.55)); }
.services-bento .services-item:nth-child(even) .icon { background: rgba(249, 168, 119, 0.28) !important; }
.services-bento .services-item:nth-child(even) .icon i { color: var(--sun-text) !important; }
/* The default mint tile vanished on the mint cards: a paper tile stands off the tint. */
.services-bento .services-item:nth-child(odd):not(:first-child) .icon { background: rgba(255, 255, 255, 0.9) !important; box-shadow: 0 1px 2px rgba(20, 45, 44, 0.08); }

/* The first service is the feature tile: deep teal glass, twice the size. */
.services-bento .services-item:first-child {
  grid-column: span 2;
  grid-row: span 2;
  justify-content: space-between;  /* icon at the top, words at the bottom: no empty half */
  padding: 48px 44px;
  overflow: hidden;
  background: var(--accent-dark);
  border-color: rgba(255, 255, 255, 0.16);
}

.services-bento .services-item:first-child::after {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 0 0 40px rgba(255, 255, 255, 0.04), 0 0 0 80px rgba(255, 255, 255, 0.03);
}

/* Two rows tall: the type is sized to fill the tile, so there's no dead field above the title. */
.services-bento .services-item:first-child h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.2rem, 4.2vw, 3.6rem); line-height: 1.05; letter-spacing: -0.02em; color: #fff; max-width: 13ch; margin-bottom: 22px; text-wrap: balance; }
.services-bento .services-item:first-child p { flex: 0; font-size: 1.25rem; line-height: 1.6; color: rgba(255, 255, 255, 0.82); max-width: 520px; }
.services-bento .services-item:first-child .services-item-link { color: var(--sun-1); }
.services-bento .services-item:first-child .icon { background: rgba(255, 255, 255, 0.14) !important; }
.services-bento .services-item:first-child .icon i { color: #fff !important; }
.services-bento .services-item:first-child:hover { border-color: rgba(255, 255, 255, 0.3); }
.services-bento .services-item:first-child::before { opacity: 0.25; }

@media (max-width: 991.98px) {
  .services-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services-bento .services-item:first-child { grid-row: span 1; }
}

@media (max-width: 575.98px) {
  .services-bento { grid-template-columns: minmax(0, 1fr); }
  .services-bento .services-item:first-child { grid-column: span 1; padding: 32px 26px; }
}

/* Staff decide how many services there are, so the last card stretches to close the grid at any count.
   Three columns with a 2x2 first tile fill evenly only at 3, 6, 9… cards. */
@media (min-width: 992px) {
  .services-bento > :only-child { grid-column: 1 / -1; grid-row: auto; }
  .services-bento > :nth-child(2):last-child { grid-row: span 2; }
  .services-bento > :last-child:nth-child(3n + 1):not(:first-child) { grid-column: 1 / -1; }
  .services-bento > :last-child:nth-child(3n + 2):not(:nth-child(2)) { grid-column: span 2; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  /* Two columns under a full-width first tile: an even count leaves the last card alone on its row. */
  .services-bento > :last-child:nth-child(even) { grid-column: 1 / -1; }
}

/* /services/ and "Other services": the home bento's cards and tints in an even grid. */
.services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.services-grid .services-item { display: flex; flex-direction: column; height: 100%; padding: 28px 26px; border-radius: 20px; }
.services-grid .services-item .services-item-link { margin-top: auto; padding-top: 12px; }
.services-grid .services-item:nth-child(odd) { background: linear-gradient(150deg, rgba(220, 240, 233, 0.85), rgba(255, 255, 255, 0.55)); }
.services-grid .services-item:nth-child(even) { background: linear-gradient(150deg, rgba(255, 228, 208, 0.85), rgba(255, 255, 255, 0.55)); }
.services-grid .services-item:nth-child(odd) .icon { background: rgba(255, 255, 255, 0.9) !important; box-shadow: 0 1px 2px rgba(20, 45, 44, 0.08); }
.services-grid .services-item:nth-child(even) .icon { background: rgba(249, 168, 119, 0.28) !important; }
.services-grid .services-item:nth-child(even) .icon i { color: var(--sun-text) !important; }
.services-grid h2 { font-size: 1.25rem; }
/* Staff choose how many services there are: a six-track grid lets a short last row widen
   instead of leaving a hole (5 = 3 + 2 wide, 4 = 3 + 1 full). */
@media (min-width: 992px) {
  .services-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .services-grid > * { grid-column: span 2; }
  .services-grid > :nth-last-child(2):nth-child(3n + 1),
  .services-grid > :last-child:nth-child(3n + 2) { grid-column: span 3; }
  .services-grid > :last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
  .services-grid { gap: 12px; }
  .services-grid .services-item { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; padding: 18px; }
  .services-grid .services-item .icon { grid-row: span 3; width: 40px; height: 40px; margin: 0; }
  .services-grid .services-item h2, .services-grid .services-item h3 { margin: 0 0 4px; font-size: 1.125rem; }
  .services-grid .services-item p { margin: 0; font-size: 0.875rem; }
  .services-grid .services-item .services-item-link { margin-top: 8px; padding-top: 0; }
}

/* Crisis support under the grids: calm, numbers to tap, never the first thing a browsing visitor meets. */
.crisis-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; margin-top: 24px; padding: 22px 28px; border-radius: 20px; background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(31, 93, 91, 0.2); }
.crisis-strip-title { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-family: var(--font-body); font-size: 1.0625rem; font-weight: 600; color: var(--ink); }
.crisis-strip-title i { color: var(--accent); }
.crisis-strip-copy p { margin: 0; font-size: 0.9375rem; color: var(--ink-soft); }
.crisis-strip-copy a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-weight: 600; }
.crisis-strip .urgent-calls { margin: 0; }
@media (max-width: 575.98px) { .crisis-strip { padding: 18px; } }

.empty-note { color: var(--ink-soft); }

/* ---------- meet the team ---------- */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 22px; }

.team-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-radius: 20px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.team-card:hover { background: var(--glass-bg-strong); box-shadow: var(--glass-shadow-lift); }
.team-card-photo { display: block; aspect-ratio: 1 / 1; border-radius: 20px; overflow: hidden; }
.team-card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }

/* Card lifts only with a real mouse (a tap would leave them stuck up) and
   only when motion is welcome; colour and shadow still change for everyone. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .services-item:hover { transform: translateY(-4px); }
  .team-card:hover { transform: translateY(-6px); }
  .team-card:hover .team-card-photo img { transform: scale(1.05); }
}

/* Press feedback, matching .btn:active; after the hover lift so it wins. */
.services-item:active { transform: scale(0.98); transition: transform 100ms ease-out; }
.team-card-initials { display: grid; place-items: center; width: 100%; height: 100%; font-family: var(--font-display); font-size: 3.5rem; }
.team-card-body { display: flex; flex-direction: column; flex: 1; padding: 18px 16px 18px; }
.team-card-body h3, .team-card-body h2 { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; margin: 0 0 2px; }
.team-card-body h3 a, .team-card-body h2 a { color: var(--ink); }
.team-card-body h3 a:hover, .team-card-body h2 a:hover { color: var(--accent); }
.team-card-role { margin: 0 0 12px; font-size: 0.875rem; color: var(--ink-soft); }
.team-card-focus { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 16px; padding: 0; }
.team-card-focus li { padding: 4px 10px; border-radius: 999px; background: var(--tint-mint); color: var(--accent-dark); font-size: 0.75rem; font-weight: 500; }
.team-card-focus li:nth-child(2) { background: var(--tint-honey); color: var(--tint-honey-text); }
.team-card-focus li:nth-child(3) { background: var(--tint-lilac); color: var(--tint-lilac-text); }
.team-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.team-card-actions .btn { margin: 0; }
.team-card-link { font-size: 0.875rem; font-weight: 600; color: var(--accent); }

/* ---------- warmer details ---------- */
.testimonial-grid .quote-mark {
  color: var(--sun-2);
  opacity: 1;
}

/* A link's arrow leans the way the link goes, so the whole card or button reads as "this goes somewhere". */
.go-arrow { display: inline-block; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  a:hover .go-arrow,
  button:hover .go-arrow { transform: translateX(3px); }
}

/* ---------- scroll reveal (static/js/main.js adds .reveal) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1), transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .services-item:active { transform: none; }
}

/* Video pop-up (main.js asks for mainClass 'mfp-fade'; removalDelay 160 matches). */
.mfp-fade.mfp-bg { opacity: 0; transition: opacity 160ms cubic-bezier(0.23, 1, 0.32, 1); }
.mfp-fade.mfp-bg.mfp-ready { opacity: 0.8; }
.mfp-fade.mfp-bg.mfp-removing { opacity: 0; }
.mfp-fade.mfp-wrap .mfp-content { opacity: 0; transform: scale(0.96); transition: opacity 160ms cubic-bezier(0.23, 1, 0.32, 1), transform 160ms cubic-bezier(0.23, 1, 0.32, 1); }
.mfp-fade.mfp-wrap.mfp-ready .mfp-content { opacity: 1; transform: none; }
.mfp-fade.mfp-wrap.mfp-removing .mfp-content { opacity: 0; transform: scale(0.96); }
@media (prefers-reduced-motion: reduce) {
  .mfp-fade.mfp-wrap .mfp-content,
  .mfp-fade.mfp-wrap.mfp-removing .mfp-content { transform: none; }
}

/* ==========================================================================
   Mid-page call to action (#cta): copy beside a gentle chat illustration
   ========================================================================== */
#cta.section { padding: var(--section-framed) 0; }

.cta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 48px;
  align-items: start;
}

.cta-copy h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.1;
  color: #fff;
  margin: 18px 0 14px;
}

.cta-copy p { max-width: 520px; margin: 0 0 30px; font-size: 1.125rem; line-height: 1.65; color: rgba(255, 255, 255, 0.8); }
.cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.cta-actions .btn { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 15px 30px; }

.cta-phone { display: inline-flex; align-items: center; gap: 12px; color: #fff; font-weight: 600; }
.cta-phone:hover,
.cta-phone:focus { color: var(--sun-1); }
.cta-phone i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.2); }
.cta-phone small { display: block; font-size: 0.8125rem; font-weight: 500; color: rgba(255, 255, 255, 0.82); }

/* The first-session facts sit on the band itself, behind a hairline:
   a card inside the dark card read as a second, competing panel. */
.cta-panel {
  justify-self: end;
  width: min(100%, 400px);
  margin-top: 52px;  /* level with the heading, not floating mid-band */
  display: grid;
  gap: 18px;
  padding: 4px 0 4px 40px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
}
.cta-panel-label { margin: 0; font-size: 0.8125rem; font-weight: 600; color: rgba(255, 255, 255, 0.82); }
.cta-panel-facts { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; font-size: 1rem; font-weight: 500; }
.cta-panel-facts li { display: flex; align-items: center; gap: 12px; }
.cta-panel-facts i { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 12px; background: rgba(255, 255, 255, 0.1); color: var(--accent-tint); }

@media (max-width: 991.98px) {
  .cta-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .cta-panel { justify-self: stretch; width: 100%; margin-top: 0; padding: 28px 0 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.18); }
}

/* ==========================================================================
   Calm by default
   The only loop is the hero button's glow. Motion otherwise answers the
   visitor: content easing in once, booking feedback. Everything else holds
   still: constant movement reads as restless, which is the opposite of how
   a first visit to a therapist should feel.
   ========================================================================== */

/* ==========================================================================
   Gallery — the full grid at /gallery/
   ========================================================================== */
.gallery-tile-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 600;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Captions only on the open tile — narrow ones would just be cut off. */

.album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.album-card a {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px;
  border-radius: 20px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--ink);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.album-card a:hover { transform: translateY(-5px); background: var(--glass-bg-strong); box-shadow: var(--glass-shadow-lift); color: var(--ink); }
.album-card-media { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: linear-gradient(135deg, var(--tint-mint), var(--tint-honey)); }
.album-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.album-card a:hover .album-card-media img { transform: scale(1.05); }
.album-card-body { display: flex; flex-direction: column; flex: 1; gap: 6px; padding: 16px 12px 10px; }
.album-card-body strong { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; }
.album-card-text { font-size: 0.875rem; line-height: 1.55; color: var(--ink-soft); }
.album-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: auto; padding-top: 8px; font-size: 0.8125rem; color: var(--ink-faint); }
.album-card-meta i { color: var(--accent); }
.album-card-open { margin-left: auto; font-weight: 600; color: var(--accent); }

/* ==========================================================================
   Testimonials page (pages/testimonial_list.html)
   ========================================================================== */
.voices-hero { position: relative; overflow: hidden; padding: 150px 0 56px; }
.voices-hero .container { position: relative; z-index: 1; }
.voices-hero .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }

.voices-hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.08;
  color: var(--ink);
  margin: 16px 0 16px;
  max-width: 720px;
}

.voices-hero h1 em {
  font-style: normal;
  color: var(--accent);
  padding-right: 0.06em;
}

.voices-hero .detail-lede { max-width: 620px; }
.voices-promises { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 26px 0 0; padding: 0; }

.voices-promises li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--glass-edge);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.voices-promises i { color: var(--accent); }

@media (max-width: 575.98px) {
  .voices-hero { padding: 120px 0 40px; }
}

.voices-body { padding-top: 16px; }

.voices-featured {
  position: relative;
  margin: 0 0 28px;
  padding: 56px 64px 44px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--glass-bg);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.voices-featured-mark {
  position: absolute;
  top: -30px;
  left: 30px;
  font-family: var(--font-display);
  font-size: 12.5rem;
  line-height: 1;
  color: var(--sun-2);
  opacity: 0.35;
}

.voices-featured blockquote { position: relative; margin: 0 0 28px; padding: 0; border: 0; }

.voices-featured blockquote p {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  line-height: 1.45;
  color: var(--ink);
}

.voices-author { display: flex; align-items: center; gap: 14px; }
.voices-author strong { display: block; font-size: 1rem; color: var(--ink); }
.voices-author > span > span { display: block; font-size: 0.8125rem; color: var(--ink-soft); }
.voices-avatar { display: grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; font-weight: 700; font-size: 0.9375rem; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.8); }

.voices-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 24px; align-items: stretch; margin-bottom: 24px; }

.voices-card {
  position: relative;
  margin: 0;
  padding: 34px 32px 28px;
  border-radius: 20px;
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.voices-card:hover { transform: translateY(-4px); box-shadow: var(--glass-shadow-lift); }
.voices-card:nth-child(3n + 1) { background: linear-gradient(150deg, rgba(220, 240, 233, 0.9), rgba(255, 255, 255, 0.55)); }
.voices-card:nth-child(3n + 2) { background: linear-gradient(150deg, rgba(255, 228, 208, 0.9), rgba(255, 255, 255, 0.55)); }
.voices-card:nth-child(3n + 3) { background: var(--tint-lilac); }

.voices-card-icon {
  position: absolute;
  top: 24px;
  right: 24px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.75);
  color: var(--sun-text);
  font-size: 1.125rem;
}

.voices-card blockquote { margin: 0 0 22px; padding: 0 40px 0 0; border: 0; }
.voices-card blockquote p { margin: 0; font-size: 1rem; line-height: 1.7; color: var(--ink); }

.voices-next { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }

.voices-next-card {
  padding: 34px 32px;
  border-radius: 20px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.voices-next-start {
  background: var(--accent-dark);
  border-color: transparent;
}

.voices-next-card h2 { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; color: var(--ink); margin: 16px 0 8px; }
.voices-next-card p { margin: 0 0 22px; font-size: 1rem; line-height: 1.6; color: var(--ink-soft); }
.voices-next-start h2 { color: #fff; }
.voices-next-start p { color: rgba(255, 255, 255, 0.8); }
.voices-next-card .btn,
.voices-next-card .btn-border-ink { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.voices-next-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 20px; background: linear-gradient(135deg, var(--sun-1), var(--sun-2)); color: var(--ink); font-size: 1.25rem; }
.voices-next-icon-soft { background: var(--tint-lilac); color: var(--tint-lilac-text); }

@media (max-width: 767.98px) {
  .voices-featured { padding: 40px 24px 30px; border-radius: 20px; }
  .voices-featured-mark { font-size: 8.75rem; top: -20px; left: 12px; }
  .voices-next { grid-template-columns: minmax(0, 1fr); }
  .voices-card { padding: 28px 22px 22px; }
}

/* ==========================================================================
   Navigation — a floating glass capsule
   ========================================================================== */
.navbar.fixed-top.site-nav,
.navbar.fixed-top.site-nav.menu-bg {
  top: 12px;
  left: 0;
  right: 0;
  padding: 0 !important;
  background: transparent !important;
  border: 0;
  box-shadow: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.site-nav-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 8px 8px 22px;
  border-radius: 999px;
  background: rgba(250, 249, 246, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 0 #fff inset, 0 12px 36px rgba(20, 45, 44, 0.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  backdrop-filter: blur(20px) saturate(1.8);
  transition: background 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}

.site-nav.menu-bg .site-nav-inner { background: rgba(250, 249, 246, 0.82); box-shadow: 0 1px 0 #fff inset, 0 16px 44px rgba(20, 45, 44, 0.14); }
.site-nav .navbar-brand { margin-right: auto; padding: 0; display: inline-flex; align-items: center; gap: 10px; }
/* The mark's script lettering is unreadable at nav size; the name is set beside it. */
.site-nav .brand-word { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
.site-nav .logo { height: 40px; }
.site-nav .navbar-collapse { flex-grow: 0; }

.site-nav .site-nav-links { gap: 2px; }

.site-nav .navbar-nav .nav-link {
  position: relative;
  padding: 9px 15px !important;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink) !important;
  transition: background 0.2s ease, color 0.2s ease;
}

.site-nav .navbar-nav .nav-link::before { display: none !important; }
.site-nav .navbar-nav .nav-link:hover { background: rgba(255, 255, 255, 0.75); color: var(--ink) !important; }
.site-nav .navbar-nav .nav-link.active { background: rgba(31, 93, 91, 0.1); color: var(--accent-dark) !important; }

.site-nav-actions { display: flex; align-items: center; gap: 8px; margin-left: 10px; padding-left: 12px; border-left: 1px solid rgba(20, 24, 31, 0.1); }

.site-nav-lang { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(20, 24, 31, 0.05); margin: 0; }

.site-nav-lang button {
  min-width: 36px;
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
}

.site-nav-lang button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 2px 6px rgba(20, 24, 31, 0.1); }

.site-nav-account { display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; border-radius: 999px; font-size: 0.875rem; font-weight: 500; color: var(--ink); white-space: nowrap; }
.site-nav-account:hover { background: rgba(255, 255, 255, 0.75); color: var(--ink); }
.site-nav-account i { color: var(--accent); }

.site-nav-book { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 11px 20px; border-radius: 999px !important; font-size: 0.875rem; white-space: nowrap; }

.site-nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
}

.site-nav-toggle-bars { position: relative; display: block; width: 18px; height: 12px; margin: 0 auto; }

.site-nav-toggle-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  top: 5px;
  background: #fff;
  transition: transform 240ms var(--ease-out);
}

/* Both bars sit on the centre line and are pushed apart, so opening the menu
   only moves and turns them: no layout work while the menu drops. */
.site-nav-toggle-bars span:first-child { transform: translateY(-4px); }
.site-nav-toggle-bars span:last-child { transform: translateY(4px); }
.site-nav-toggle:not(.collapsed) .site-nav-toggle-bars span:first-child { transform: rotate(45deg); }
.site-nav-toggle:not(.collapsed) .site-nav-toggle-bars span:last-child { transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .site-nav-toggle-bars span { transition: none; } }

/* The nav always shows "Book a session" on wide screens, so the floating
   button would only repeat it there. */
@media (min-width: 992px) {
  .floating-book-cta { display: none !important; }
}

@media (max-width: 1199.98px) and (min-width: 992px) {
  .site-nav .navbar-nav .nav-link { padding: 9px 11px !important; }
  .site-nav-account span,
  .site-nav-account { font-size: 0; gap: 0; padding: 9px; }
  .site-nav-account i { font-size: 1.125rem; }
}

@media (max-width: 991.98px) {
  .navbar.fixed-top.site-nav { top: 8px; }
  .site-nav > .container { max-width: calc(100% - 16px); }
  .site-nav-inner { border-radius: 20px; padding: 6px 6px 6px 16px; }
  .site-nav-toggle { display: block; }
  /* Phones already have the bottom "Book Now" bar, so no second button here. */
  .site-nav-toggle { margin-left: auto; }

  /* The menu opens as a sheet inside the capsule. */
  .site-nav .navbar-collapse {
    flex-basis: 100%;
    margin: 6px -2px 0;
    padding: 0;
    border-radius: 20px;
    background: transparent !important;
  }

  .site-nav .navbar-collapse.show,
  .site-nav .navbar-collapse.collapsing { padding: 6px 4px 10px; }
  .site-nav .navbar-nav .nav-link { padding: 13px 14px !important; font-size: 1rem; }
  .site-nav-actions { flex-wrap: wrap; margin: 8px 0 0; padding: 12px 6px 0; border-left: 0; border-top: 1px solid rgba(20, 24, 31, 0.08); }
  .site-nav-actions .site-nav-book { flex: 1 1 100%; justify-content: center; order: 3; padding: 14px 20px; }
  .site-nav-account { margin-left: 0; }  /* left, with the links above it, not floating alone on the right */
}

@media (prefers-reduced-motion: reduce) {
  .voices-card,
  .album-card a { transition: none; }
}

/* An open phone menu reads as a solid sheet, not see-through glass. */
.site-nav-inner:has(.navbar-collapse.show),
.site-nav-inner:has(.navbar-collapse.collapsing) { background: rgba(250, 249, 246, 0.96); }

/* ==========================================================================
   About, with three short reasons people choose us
   ========================================================================== */
.about-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; align-items: center; }
.about-grid-solo { grid-template-columns: minmax(0, 1fr); max-width: 820px; margin: 0 auto; }
.about-copy .section-header { margin-bottom: 28px; text-align: left; }
.about-copy .section-header .section-subtitle { margin-left: 0; }
.about-reasons { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; }

.about-reasons li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--glass-edge);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.about-reasons strong { color: var(--ink); }
.about-reason-icon { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; background: var(--tint-mint); color: var(--accent); font-size: 1.125rem; }
.about-reasons li:nth-child(2) .about-reason-icon { background: linear-gradient(135deg, var(--sun-1), var(--sun-2)); color: var(--ink); }
.about-reasons li:nth-child(3) .about-reason-icon { background: var(--tint-lilac); color: var(--tint-lilac-text); }
/* No photo: the reasons sit beside the intro instead of under it, so the row isn't half empty. */
@media (min-width: 992px) {
  .about-grid-solo { max-width: none; }
  .about-grid-solo .about-copy { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; align-items: start; }
  .about-grid-solo .about-copy .section-header { margin-bottom: 0; }
}
.about-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 20px; border: 10px solid rgba(255, 255, 255, 0.6); box-shadow: var(--glass-shadow-lift); }

@media (max-width: 991.98px) {
  .about-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .about-media { max-width: 420px; }
}

/* ==========================================================================
   Testimonials: service filters, tags, masonry, pages
   ========================================================================== */
.voices-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }

.voices-filters a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  min-height: 40px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--glass-edge);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-soft);
  transition: background 0.2s ease, color 0.2s ease;
}

.voices-filters a:hover { background: #fff; color: var(--ink); }
.voices-filters a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.voices-filters i { color: var(--accent); }
.voices-filters a[aria-current="page"] i { color: var(--sun-1); }

.voices-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--sun-text);
}

.voices-grid.is-masonry { display: block; columns: 3 300px; column-gap: 24px; }
.voices-grid.is-masonry .voices-card { display: inline-block; width: 100%; margin: 0 0 24px; break-inside: avoid; }

.voices-pages { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 8px 0 24px; }

.voices-pages a {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--glass-edge);
  font-weight: 600;
  color: var(--ink);
}

.voices-pages a:hover { background: #fff; color: var(--ink); }
.voices-pages a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ==========================================================================
   Gallery: stacked album cards with previews; album page tabs + masonry
   ========================================================================== */
.album-card { position: relative; }

/* Albums holding more than one item look like a small stack of photos. */
.album-card.is-stacked::before,
.album-card.is-stacked::after {
  content: '';
  position: absolute;
  left: 22px;
  right: 22px;
  height: 40px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--glass-edge);
  pointer-events: none;
}

.album-card.is-stacked::before { top: -14px; left: 40px; right: 40px; opacity: 0.6; }
.album-card.is-stacked::after { top: -7px; }
.album-card.is-stacked, .album-grid .album-card { margin-top: 14px; }  /* every card leaves room for the stack, so single-item albums line up with the rest */
.album-card > a { position: relative; z-index: 1; }

.album-card-strip { display: flex; gap: 6px; margin-top: 6px; }

.album-card-thumb {
  position: relative;
  display: block;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--tint-mint);
  border: 2px solid rgba(255, 255, 255, 0.9);
}

.album-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.album-card-thumb-play { position: absolute; inset: 0; display: grid; place-items: center; font-size: 0.75rem; color: #fff; background: rgba(12, 38, 37, 0.35); }

.album-card-more {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  background: rgba(12, 38, 37, 0.62);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
}

/* The first album leads the gallery: twice as wide on large screens. */
@media (min-width: 992px) {
  .album-grid:not(.album-grid-compact) .album-card-featured { grid-column: span 2; }
  .album-card-featured > a { flex-direction: row; }
  /* The photo sets a capped height, so a short write-up beside it doesn't leave a tall empty field. */
  .album-card-featured .album-card-media { flex: 1.3; aspect-ratio: 16 / 10; min-height: 0; max-height: 360px; }
  .album-card-featured .album-card-body { flex: 1; justify-content: center; gap: 12px; padding: 28px 26px; }
  .album-card-featured .album-card-meta { margin-top: 4px; }  /* sits under the thumbnails, not at the far bottom */
  .album-card-featured .album-card-body strong { font-size: 1.875rem; line-height: 1.15; }
  .album-card-featured .album-card-text { font-size: 1rem; }
  .album-card-featured .album-card-thumb { width: 64px; height: 64px; }
}

/* Staff choose how many albums there are, so the lead card's width closes the grid at any count.
   Three columns: 2 wide when the count leaves 2 over (5, 8…), the whole row when it leaves 1 (4, 7…),
   one ordinary card when it divides by three (6, 9…). Two columns: one ordinary card at even counts. */
@media (min-width: 1200px) {
  .album-grid:not(.album-grid-compact):has(> .album-card:nth-child(3n + 1):last-child) .album-card-featured { grid-column: 1 / -1; }
  .album-grid:not(.album-grid-compact):has(> .album-card:nth-child(3n):last-child) .album-card-featured { grid-column: auto; }
  .album-grid:not(.album-grid-compact):has(> .album-card:nth-child(3n):last-child) .album-card-featured > a { flex-direction: column; }
  .album-grid:not(.album-grid-compact):has(> .album-card:nth-child(3n):last-child) .album-card-featured .album-card-media { flex: none; aspect-ratio: 4 / 3; max-height: none; }
  .album-grid:not(.album-grid-compact):has(> .album-card:nth-child(3n):last-child) .album-card-featured .album-card-body { justify-content: flex-start; padding: 16px 12px 10px; }
  .album-grid:not(.album-grid-compact):has(> .album-card:nth-child(3n):last-child) .album-card-featured .album-card-body strong { font-size: 1.25rem; }
  .album-grid:not(.album-grid-compact):has(> .album-card:nth-child(3n):last-child) .album-card-featured .album-card-text { font-size: 0.875rem; }
  .album-grid:not(.album-grid-compact):has(> .album-card:nth-child(3n):last-child) .album-card-featured .album-card-thumb { width: 52px; height: 52px; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .album-grid:not(.album-grid-compact):has(> .album-card:nth-child(even):last-child) .album-card-featured { grid-column: auto; }
  .album-grid:not(.album-grid-compact):has(> .album-card:nth-child(even):last-child) .album-card-featured > a { flex-direction: column; }
  .album-grid:not(.album-grid-compact):has(> .album-card:nth-child(even):last-child) .album-card-featured .album-card-media { flex: none; aspect-ratio: 4 / 3; max-height: none; }
  .album-grid:not(.album-grid-compact):has(> .album-card:nth-child(even):last-child) .album-card-featured .album-card-body { justify-content: flex-start; padding: 16px 12px 10px; }
}

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

.album-media-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.album-media-head .detail-related-title { margin: 0; }
.album-media-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.6); border: 1px solid var(--glass-edge); }

.album-media-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
}

.album-media-tabs button span { font-size: 0.75rem; padding: 1px 7px; border-radius: 999px; background: rgba(20, 24, 31, 0.07); }
.album-media-tabs button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.album-media-tabs button[aria-pressed="true"] span { background: rgba(255, 255, 255, 0.2); }

/* Masonry: photos keep their own shape, in balanced columns. */
.album-masonry { columns: 3 260px; column-gap: 16px; }

.album-masonry .album-masonry-item {
  display: block;
  width: 100%;
  margin: 0 0 16px;
  break-inside: avoid;
  aspect-ratio: auto;
  border-radius: 20px;
}

.album-masonry .album-masonry-item[hidden] { display: none; }
.album-masonry .album-masonry-item img { position: static; width: 100%; height: auto; display: block; }

/* Very tall uploads (full-page screenshots, posters) are cropped from the
   top at 4:5 so one image can't stretch a column; the lightbox shows it whole.
   Until a photo loads its tile holds a 4:3 space, so the columns jump less. */
.album-masonry .album-masonry-item { container-type: inline-size; }
.album-masonry .album-masonry-item:not(.gallery-media-video) img { aspect-ratio: auto 4 / 3; max-height: 125cqi; object-fit: cover; object-position: top; }
.album-masonry .gallery-media-video { aspect-ratio: 16 / 9; }
/* Five items or fewer can't balance into columns: show them as even 4:3 tiles. */
.album-masonry:not(:has(> :nth-child(6))) { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.album-masonry:not(:has(> :nth-child(6))) .album-masonry-item { margin: 0; aspect-ratio: 4 / 3; }
.album-masonry:not(:has(> :nth-child(6))) .album-masonry-item img { height: 100%; max-height: none; }
.album-masonry .gallery-media-video img { height: 100%; object-fit: cover; }
.album-more { text-align: center; margin: 12px 0 8px; }
.album-more[hidden] { display: none; }

/* ==========================================================================
   Crisis note and visible form labels
   ========================================================================== */
/* One quiet line wherever the page promises help: booking isn't for
   emergencies. Calm, not alarming — the numbers carry the weight. */
.crisis-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 640px;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.crisis-note i { flex-shrink: 0; margin-top: 3px; color: var(--accent); }
.crisis-note strong { color: var(--ink); }
#services .crisis-note { margin: 28px auto 0; }

/* In "How it works" the note is the panel's footer: a rule, then the line. */
.how-panel > .crisis-note { max-width: none; padding-top: 24px; border-top: 1px dashed rgba(20, 24, 31, 0.14); }

/* Labels stay visible while typing; placeholders were the only labels. */
.form-label { display: block; margin-bottom: 6px; font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.form-label-optional { font-weight: 400; color: var(--ink-soft); }

/* Devanagari has no italic: a browser-faked slant reads as broken type, so
   Nepali emphasis keeps its colour and stays upright. */
html:lang(ne) em,
html:lang(ne) .hero-content h1 em,
html:lang(ne) i:not([class*="lni-"]) { font-style: normal; font-synthesis: none; }

/* ==========================================================================
   More from Mind and Brain: gallery, blog and newsletter as one quiet strip
   at the end of the home page.
   ========================================================================== */
.more-from-us { padding-top: 64px; }

/* The map sits on the content width as a rounded inset panel, like the
   other bands, instead of running almost (but not quite) edge to edge. */
.more-heading { margin: 0 0 22px; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.4rem, 2.2vw, 1.75rem); color: var(--ink); }
.more-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }

.more-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-soft);
  scroll-margin-top: 110px;
}

.more-card > strong { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; line-height: 1.25; color: var(--ink); }
.more-card-link { margin-top: auto; padding-top: 6px; font-size: 0.875rem; font-weight: 600; color: var(--accent); }

/* Gallery: the whole card is the link; three covers fan out like prints. */
a.more-card { color: var(--ink-soft); transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease; }
a.more-card:hover { transform: translateY(-4px); background: var(--glass-bg-strong); box-shadow: var(--glass-shadow-lift); color: var(--ink-soft); }
.more-card-body { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.more-card-body strong { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; color: var(--ink); }

.more-gallery-covers { position: relative; display: block; height: 96px; margin-bottom: 8px; }

.more-gallery-covers img {
  position: absolute;
  top: 0;
  width: 112px;
  height: 84px;
  object-fit: cover;
  border-radius: 12px;
  border: 3px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 20px rgba(20, 45, 44, 0.14);
  background: var(--tint-mint);
}

.more-gallery-covers img:nth-child(1) { left: 0; transform: rotate(-5deg); }
.more-gallery-covers img:nth-child(2) { left: 64px; top: 6px; transform: rotate(2deg); z-index: 1; }
.more-gallery-covers img:nth-child(3) { left: 128px; transform: rotate(6deg); }

/* Blog: two latest titles, dated. */
.more-posts { display: grid; gap: 12px; margin: 4px 0 0; padding: 0; list-style: none; }
.more-posts li { display: grid; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.more-posts li:last-child { padding-bottom: 0; border-bottom: 0; }
.more-posts a { font-weight: 600; color: var(--ink); }
.more-posts a:hover { color: var(--accent); }
.more-posts time { font-size: 0.8125rem; color: var(--ink-soft); }

@media (max-width: 575.98px) {
  .more-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  a.more-card { transition: none; }
  a.more-card:hover { transform: none; }
}

/* ---------- polish ---------- */
/* The feature tile is two rows tall: its icon anchors the top corner and
   the copy settles at the bottom, so the space between reads as intended. */
.services-bento .services-item:first-child .icon { margin-bottom: auto; }

/* Phones: the two hero buttons share one width instead of two ragged ones. */
@media (max-width: 575.98px) {
  .hero-actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* The newsletter's success message fits the small card it lives in. */

/* ==========================================================================
   Payment page (apps/payments): the screen after booking.
   Fee and deadline in plain words, methods as calm full-width rows.
   Gateway colours appear only as a small dot beside each name.
   ========================================================================== */
.pay-hero { padding-bottom: 8px; }
.pay-hero h1 { max-width: 720px; }
.pay-section { padding-top: 24px; }

.pay-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 24px; align-items: start; }

.pay-summary,
.pay-card {
  position: relative;
  padding: 28px;
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--ink-soft);
}

.pay-card-solo { max-width: 560px; margin: 0 auto; }

.pay-summary h2 { margin: 0 0 16px; font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; color: var(--ink); }
.pay-summary dl { display: grid; gap: 14px; margin: 0; }
.pay-summary dl div { display: grid; gap: 2px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.pay-summary dl div:last-child { padding-bottom: 0; border-bottom: 0; }
.pay-summary dt { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); }
.pay-summary dd { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--ink); }

.pay-label { margin: 0; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); }
.pay-amount { margin: 2px 0 12px; font-family: var(--font-display); font-weight: 500; font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.pay-hold { margin: 0 0 24px; font-size: 1rem; line-height: 1.6; }
.pay-hold strong { color: var(--ink); }
.pay-card p { line-height: 1.6; }

.pay-status { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 6px 14px; border-radius: 999px; background: var(--tint-honey); color: var(--tint-honey-text); font-size: 0.875rem; font-weight: 600; }
.pay-status-done { background: var(--tint-mint); color: var(--accent-dark); }

.pay-methods-title { margin: 0 0 12px; font-family: var(--font-body); font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.pay-methods { display: grid; gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; }
.pay-methods form { margin: 0; }

.pay-method {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "dot name go" "dot note go";
  align-items: center;
  column-gap: 14px;
  width: 100%;
  min-height: 64px;
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--glass-bg-strong);
  text-align: left;
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.pay-method:hover { border-color: var(--accent); background: #fff; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(20, 45, 44, 0.08); }
.pay-method-dot { grid-area: dot; width: 12px; height: 12px; border-radius: 50%; }
.pay-method-esewa .pay-method-dot { background: #60bb46; }
.pay-method-khalti .pay-method-dot { background: #5c2d91; }
.pay-method-fonepay .pay-method-dot { background: #d71920; }
.pay-method-name { grid-area: name; font-size: 1rem; font-weight: 600; color: var(--ink); }
.pay-method-note { grid-area: note; font-size: 0.8125rem; color: var(--ink-soft); }
.pay-method-go { grid-area: go; font-size: 1.125rem; color: var(--accent); }

.pay-clinic { margin: 0 0 16px; }
.pay-meta { display: flex; gap: 8px; margin: 0; font-size: 0.8125rem; line-height: 1.55; color: var(--ink-soft); }
.pay-meta i { margin-top: 3px; color: var(--accent); }

.pay-handoff { padding-top: 160px; }
.pay-handoff-title { margin: 6px 0 20px; font-family: var(--font-display); font-weight: 500; font-size: 1.625rem; color: var(--ink); }

.pay-qr { display: inline-block; margin: 4px auto 18px; padding: 12px; border-radius: var(--radius-md); background: #fff; box-shadow: 0 8px 24px rgba(20, 45, 44, 0.08); }
.pay-qr svg { display: block; width: min(260px, 64vw); height: auto; aspect-ratio: 1; }
.pay-qr-steps { max-width: 360px; margin: 0 auto 16px; padding-left: 20px; text-align: left; font-size: 0.9375rem; line-height: 1.6; }
.pay-qr-status { margin: 0 0 8px; font-weight: 600; color: var(--accent-dark); }

@media (max-width: 767.98px) {
  .pay-grid { grid-template-columns: minmax(0, 1fr); }
  .pay-card { order: -1; }
  .pay-summary,
  .pay-card { padding: 22px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .pay-method { transition: none; }
  .pay-method:hover { transform: none; }
}
.pay-card > .btn { margin-top: 18px; }
.pay-card > p:not([class]) + .pay-meta { margin-top: 8px; }

/* Fonepay checkout: bank apps on phones, the QR on computers. */
.pay-fonepay { text-align: left; }
.pay-fonepay .pay-amount { margin-bottom: 20px; }
.pay-banks { margin-bottom: 20px; }
.pay-bank-list { display: grid; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }

.pay-bank {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--glass-bg-strong);
  font-weight: 600;
  color: var(--ink);
}

.pay-bank:hover { border-color: var(--accent); background: #fff; color: var(--ink); }
.pay-bank span { color: var(--accent); }

.pay-qr-block { text-align: center; }
.pay-qr-toggle { padding: 11px 0; margin-bottom: 6px; font-weight: 600; color: var(--accent); cursor: pointer; }
.pay-qr-recheck { display: block; margin: 0 auto 12px; }
.pay-qr-block .pay-qr-steps { text-align: left; }
.pay-meta-centre { justify-content: center; text-align: center; }
.pay-fonepay .pay-qr-status { text-align: center; }

/* A computer can't open a phone's bank app: just the QR, no toggle. */
.pay-fonepay.is-desktop .pay-banks { display: none; }
.pay-fonepay.is-desktop .pay-qr-toggle { display: none; }

/* Service page: who you'd see and what it costs, before the booking ask. */
.service-people { margin: 48px 0 8px; }
.service-fee { max-width: 68ch; margin: 16px 0 0; color: var(--ink-soft); line-height: 1.6; }

/* Home team section: the team video, as one quiet link under the intro. */
.team-video-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 12px; font-weight: 600; color: var(--accent); }
.team-video-link:hover { color: var(--accent-dark); }
.team-video-play { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 0.8125rem; }

/* Booking: say why the button is greyed out, until it isn't. */
.booking-submit-hint { margin: 10px 0 0; font-size: 0.875rem; color: var(--ink-soft); }

/* Manage-booking and My Bookings: small section headings and checkbox rows. */
.manage-subhead { margin-bottom: 8px; font-family: var(--font-display); font-weight: 500; font-size: 1.125rem; }
.manage-check { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--ink-soft); cursor: pointer; }

/* Booking intro: the crisis note gets its own breathing room. */
.booking-intro .crisis-note { margin: 16px 0 20px; max-width: 640px; }

/* ==========================================================================
   Booking motion. One authored moment: when the confirmation arrives, the
   card settles and a ring of sunlight spreads once from the check mark
   ("your time is held"). Supporting feedback: a changed summary value
   gets a brief warm wash, and a time slot presses in when tapped.
   ========================================================================== */
.booking-summary-list dd.is-updated { animation: summary-noted 0.9s cubic-bezier(0.16, 1, 0.3, 1); border-radius: var(--radius-sm); }
@keyframes summary-noted {
  from { background-color: var(--tint-honey); box-shadow: 0 0 0 4px var(--tint-honey); }
  to { background-color: transparent; box-shadow: 0 0 0 4px transparent; }
}

.booking-slot:active { transform: scale(0.96); }

.booking-confirmation.is-arriving { animation: held-arrive 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
.booking-confirmation.is-arriving .booking-confirmation-icon { position: relative; animation: held-check 0.6s 0.12s cubic-bezier(0.16, 1, 0.3, 1) both; }
.booking-confirmation.is-arriving .booking-confirmation-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(242, 137, 92, 0.45);
  animation: held-ring 1.1s 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
  pointer-events: none;
}
@keyframes held-arrive { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes held-check { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes held-ring { from { box-shadow: 0 0 0 0 rgba(242, 137, 92, 0.45); } to { box-shadow: 0 0 0 28px rgba(242, 137, 92, 0); } }

@media (prefers-reduced-motion: reduce) {
  /* Keep the "noted" colour cue and a plain fade-in; drop movement and the ring. */
  .booking-slot:active { transform: none; }
  .booking-confirmation.is-arriving { animation: held-fade 0.3s ease both; }
  .booking-confirmation.is-arriving .booking-confirmation-icon,
  .booking-confirmation.is-arriving .booking-confirmation-icon::after { animation: none; }
}
@keyframes held-fade { from { opacity: 0; } to { opacity: 1; } }

/* Touch screens: the compact pill controls grow to a 44px tap target. */
@media (pointer: coarse) {
  .text-size-btn { min-width: 44px; height: 44px; }
  .site-nav-lang button { min-width: 44px; min-height: 44px; }
}


/* No portrait yet: a modest initials circle, so a missing photo doesn't take up a whole square. */
.team-card-photo.is-initials { width: 88px; height: 88px; margin: 16px 0 4px 16px; aspect-ratio: auto; border-radius: 50%; }
.team-card-photo.is-initials .team-card-initials { font-size: 1.875rem; }
/* One missing photo puts every card in the row on the same small round avatar, so the cards stay one height. */
@media (min-width: 576px) {  /* phones already show every card as a row with a small avatar */
  .team-grid:has(.is-initials) .team-card-photo { width: 88px; height: 88px; margin: 16px 0 4px 16px; aspect-ratio: auto; border-radius: 50%; }
}
.team-grid:has(.is-initials) .team-card-actions { padding-top: 16px; }  /* margin-top stays auto: buttons line up along the row */
.profile-hero-grid.has-initials { grid-template-columns: 160px minmax(0, 1fr); gap: 40px; }
.profile-portrait.is-initials { width: 160px; aspect-ratio: 1; border-radius: 50%; box-shadow: var(--shadow-soft); }
.profile-portrait.is-initials .profile-portrait-initials { font-size: 3.5rem; }
@media (max-width: 991.98px) {
  .profile-hero-grid.has-initials { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .profile-portrait.is-initials { width: 112px; max-width: none; }
  .profile-portrait.is-initials .profile-portrait-initials { font-size: 2.5rem; }
}

/* Services not booked online (crisis support): call routes first, in a
   deep-teal panel; big tap targets, no booking gradient. */
.help-now { margin: 0 0 40px; padding: 32px; border-radius: var(--radius-lg); background: var(--accent-dark); color: rgba(255, 255, 255, 0.88); }
.help-now h2 { margin: 0 0 18px; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.4rem, 2.4vw, 1.8rem); color: #fff; }
.help-now-calls { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 18px; padding: 0; list-style: none; }
.help-now-calls a { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-height: 52px; padding: 12px 22px; border-radius: 999px; background: #fff; color: var(--accent-dark); font-weight: 600; }
.help-now-calls a:hover { background: var(--accent-tint); color: var(--accent-dark); }
.help-now-calls strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.help-now p { max-width: 68ch; margin: 0 0 8px; line-height: 1.6; }
.help-now p:last-child { margin-bottom: 0; }
.help-now p strong { color: #fff; }
@media (max-width: 575.98px) {
  .help-now { padding: 24px 18px; border-radius: var(--radius-md); }
  .help-now-calls li { flex: 1 1 100%; }
  .help-now-calls a { width: 100%; }
}

/* Booking: on phones, a live recap sits right above the submit button and
   the corporate note moves below the form; desktop keeps both in the aside. */
.booking-recap { margin: 0 0 12px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--accent-tint); color: var(--accent-dark); font-size: 0.9375rem; font-weight: 600; }
@media (min-width: 992px) {
  .booking-recap { display: none !important; }
}
/* The corporate note: one quiet line under the booking form, not a card beside it. */
.booking-stage .booking-corporate-note.booking-corporate-note-after { max-width: none; margin: 32px 0 0; padding: 0; border: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* About, fees and contact pages: the hero carries the title, so the first
   section under it starts close instead of a full section gap below. */
.section-page-hero { padding-bottom: 8px; }
.section-page > .section:first-child,
.section-page > section:first-child { padding-top: 24px; }
.detail-back { display: flex; width: fit-content; }
/* Under a left-aligned page title, the section intro lines up with it. */
.section-page .section-header { text-align: left; margin-bottom: 40px; }
.section-page .section-header .section-subtitle { margin-left: 0; }
.section-page .about-grid-solo { margin-left: 0; }

.booking-for-options.booking-for-stack { grid-template-columns: 1fr; }

/* Opening hours (pages/partials/_clinic_hours.html): footer, contact, crisis panel. */
.clinic-hours { margin: 0; }
.clinic-hours div { display: flex; gap: 10px; }
.clinic-hours dt { min-width: 64px; font-weight: 600; }
.clinic-hours dd { margin: 0; font-variant-numeric: tabular-nums; }
.contact-footer .clinic-hours { margin-top: 4px; }
.clinic-now { font-weight: 600; color: var(--ink-soft); margin-bottom: 4px; }
.clinic-now.is-open { color: var(--accent); }
.help-now-hours { margin: 0 0 18px; }
.help-now-hours p { margin-bottom: 4px; }
.help-now-hours dt { color: #fff; }

/* /fees/: "How paying works" under the plan cards. */
.fees-payment { padding-top: 0; }
.fees-payment-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--ink); margin-bottom: 20px; }
.fees-payment-steps { max-width: 720px; margin: 0; padding-left: 1.25em; color: var(--ink-soft); line-height: 1.7; }
.fees-payment-steps li { margin-bottom: 12px; padding-left: 4px; }
.fees-payment-steps strong { display: block; color: var(--ink); }

/* Time slots split into Morning / Afternoon (static/js/booking-page.js). */
.booking-slot-groups { display: grid; gap: 14px; }
.booking-slot-part-title { margin: 0 0 6px; font-size: 0.8125rem; font-weight: 600; color: var(--ink-soft); }

/* Touch screens: footer links, social icons and calendar days reach a
   comfortable tap size without changing the desktop look. */
@media (pointer: coarse) {
  footer .menu li a { display: inline-block; padding: 10px 0; }
  .footer-social li a { width: 44px !important; height: 44px !important; line-height: 44px !important; }
  .simple-cal-nav { width: 44px; height: 44px; }
}
@media (max-width: 575.98px) {
  .booking-stage .booking-calendar-wrap { padding: 12px 6px; }
  .booking-stage .simple-cal-grid { gap: 2px; }
}

/* Calendar legend: plain swatches, no sample number to misread. */
.simple-cal-legend span:empty.is-full { background: linear-gradient(transparent calc(50% - 1px), var(--ink-faint) calc(50% - 1px), var(--ink-faint) calc(50% + 1px), transparent calc(50% + 1px)); opacity: 0.6; }
.simple-cal-legend span:empty { border: 1px solid var(--line); }
.pricing-kind-start { background: var(--accent-tint); color: var(--accent-dark); }

/* Footer hours: light on the dark footer (the inherited ink-soft was 2.5:1). */
.footer-Content .contact-footer .clinic-hours dt { color: rgba(255, 255, 255, 0.9); }
.footer-Content .contact-footer .clinic-hours dd { color: rgba(255, 255, 255, 0.78); }
.contact-footer-hours { display: grid; gap: 4px; }

/* Booking intro on phones: the reassurances as one quiet line, so step 1
   starts near the top. */
@media (max-width: 575.98px) {
  .booking-intro .booking-trust-strip { display: block; font-size: 0.875rem; line-height: 1.6; color: var(--ink-soft); }
  .booking-intro .booking-trust-strip li { display: inline; padding: 0; border: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .booking-intro .booking-trust-strip li + li::before { content: " · "; color: var(--ink-faint); }
  .booking-intro .booking-trust-strip i { display: none; }
}
/* Touch: small text links get a full-size tap area. */
@media (pointer: coarse) {
  .team-card-link,
  .services-item-link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; }
  .detail-back { min-height: 44px; align-items: center; }
}

/* /fees/: "How paying works" leads; each plan's write-up opens inside its card. */
.fees-payment { padding: 8px 0 32px; }
.fees-payment-steps { max-width: 640px; }
.pricing-more { margin: 4px 16px 0; text-align: left; }
.pricing-more summary { display: flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--accent); cursor: pointer; }
.pricing-more p { margin: 0 0 10px; font-size: 0.875rem; line-height: 1.65; color: var(--ink-soft); }

.turnstile-note { margin: 0 0 12px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--accent-tint); color: var(--accent-dark); font-size: 0.875rem; }

/* "Sees young people": on counsellor and team cards; listed first when a parent books for a child. */
.young-tag { display: inline-block; align-self: flex-start; margin: 4px 0 12px; padding: 2px 8px; border-radius: 999px; background: var(--tint-lilac); color: var(--tint-lilac-text); font-size: 0.75rem; font-weight: 600; }
.booking-counsellor-text .young-tag { display: table; }
.booking-for-hint { margin: 10px 0 0; font-size: 0.875rem; color: var(--accent-dark); }
.is-for-minor .booking-counsellor-card[data-young] { order: -1; }
.is-for-minor .booking-counsellor-card:first-child { order: -2; }  /* "No preference" stays first */

/* Phones: footer link lists in two columns, so the footer isn't a long single file of links. */
@media (max-width: 575.98px) {
  .footer-Content .menu { columns: 2; column-gap: 16px; }
  .footer-Content .menu li { break-inside: avoid; }
}
/* Phones: the one-line recap by the submit button replaces the full list in the summary card. */
@media (max-width: 991.98px) {
  .booking-summary-list { display: none; }
}

.clinic-span { white-space: nowrap; }
/* /services/: space between card rows. */
/* Booking counsellors: two even columns, so four cards never leave one alone. */
.booking-counsellor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 575.98px) { .booking-counsellor-grid { grid-template-columns: minmax(0, 1fr); } }
/* About intro: paragraphs need air between them. */
.section-subtitle p + p { margin-top: 12px; }

/* Floating Book bar, tucked away on home while the hero's button is visible. */
.floating-book-cta { transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s; }
.floating-book-cta.is-tucked { transform: translateY(120%) !important; opacity: 0; visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .floating-book-cta { transition: none; } }

/* Hero on phones: no floating chips; the next opening is a plain line under the buttons. */
.hero-next-line { display: none; }
@media (max-width: 991.98px) {
  .hero-next-line { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 4px; font-size: 0.9375rem; color: var(--ink-soft); }
  .hero-next-line strong { color: var(--ink); }
  .hero-next-line i { color: var(--accent); }
}


/* FAQ: topic jump list and group headings. */
.faq-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; }
.faq-jump a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--accent-tint); color: var(--accent-dark); font-size: 0.875rem; font-weight: 600; }
.legal-content .faq-group { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); font-family: var(--font-display); font-size: 1.625rem; font-weight: 500; line-height: 1.25; color: var(--ink); scroll-margin-top: 110px; }
.legal-content .faq-group:first-child { margin-top: 0; }
.legal-content h3 { margin: 28px 0 8px; font-family: var(--font-body); font-size: 1.125rem; font-weight: 600; line-height: 1.4; color: var(--ink); scroll-margin-top: 110px; }
.legal-content .faq-group + h3 { margin-top: 16px; }

/* Fees cards: equal header height and buttons on one line. */
.pricing-kind-empty { visibility: hidden; }
.pricing-tables > [class*="col-"] { display: flex; }
.pricing-tables .pricing-table { display: flex; flex-direction: column; width: 100%; }
.pricing-tables .pricing-table .plan-button { margin-top: auto; }
/* One rhythm for every card, left-aligned like the list it heads (centred titles over left lists read
   as two designs), and the button close under the content instead of 80px below it. */
.pricing-tables .pricing-table { text-align: left; padding-top: 24px; }
.pricing-tables .pricing-kind { margin: 0 16px 8px; }
.pricing-tables .pricing-details h2 { margin: 0 0 12px; padding: 0 16px; font-size: 1.25rem; }  /* the theme's 15px 16px padding doubled the inset */
.pricing-tables .pricing-details .price { margin: 0 16px 12px; text-align: left; }
.pricing-tables .pricing-table .plan-button { padding: 12px 16px 24px; }
/* /services/ cards: equal heights in a row. */
/* Booking summary label: "What happens next" on phones, where the list above is hidden. */
.booking-summary-label-narrow { display: none; }
@media (max-width: 991.98px) {
  .booking-summary-label-wide { display: none; }
  .booking-summary-label-narrow { display: inline; }
}
.booking-next-available[hidden] { display: none; }

/* "You are their": two radios read faster than a two-option dropdown. */
.booking-relationship { border: 0; padding: 0; min-width: 0; }
.booking-relationship legend { width: auto; }
.booking-relationship label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0 20px 0 0; font-weight: 400; cursor: pointer; }
.booking-relationship input { width: 18px; height: 18px; accent-color: var(--accent); }

/* Booking step 1: the optional service/counsellor choice, folded until wanted. */
/* Hairlines above and below, not a card inside the booking card. */
.booking-choose { margin-top: 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.booking-choose > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 12px 0; cursor: pointer; list-style: none; }
.booking-choose > summary::-webkit-details-marker { display: none; }
.booking-choose > summary::after { content: ""; flex-shrink: 0; width: 10px; height: 10px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg) translateY(-3px); transition: transform 0.2s ease; }
.booking-choose[open] > summary::after { transform: rotate(-135deg) translateY(-3px); }
.booking-choose > summary strong { display: block; color: var(--ink); font-size: 0.9375rem; }
.booking-choose > summary small { display: block; color: var(--ink-soft); font-size: 0.8125rem; }
.booking-choose[open] > summary { border-bottom: 1px solid var(--line); }
.booking-choose > .booking-service-field,
.booking-choose > .booking-counsellors { margin: 16px 0; }
@media (prefers-reduced-motion: reduce) { .booking-choose > summary::after { transition: none; } }
.booking-summary-list > div[hidden] { display: none; }

.urgent-calls { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 8px; padding: 0; list-style: none; }
.urgent-calls a { display: inline-flex; align-items: baseline; gap: 6px; min-height: 44px; padding: 10px 16px; border-radius: 999px; background: var(--accent-tint); color: var(--accent-dark); font-size: 0.875rem; font-weight: 600; }
.urgent-calls a:hover { background: rgba(31, 93, 91, 0.16); color: var(--accent-dark); }
.urgent-calls strong { font-size: 1.125rem; font-variant-numeric: tabular-nums; }

/* Form-wide message under a form: a sentence, not a headline. */
.form-message { margin: 14px 0 0; font-size: 0.9375rem; font-weight: 600; line-height: 1.5; text-align: center; }
.form-message.text-danger { color: var(--danger) !important; }
.form-message.text-success { color: var(--accent-dark) !important; }

.booking-submit-hint.is-alert { color: var(--danger); font-weight: 600; }
.btn-common[aria-disabled="true"]:hover { transform: none; box-shadow: none; }

/* A radio group with an error: the message sits under the options. */
fieldset.is-invalid input[type="radio"] { outline: 2px solid var(--danger); outline-offset: 2px; }
fieldset.is-invalid > .field-error { margin-top: 6px; }

/* Phones: services and team as compact rows, not tall cards (home was ~8,000px). */
@media (max-width: 575.98px) {
  .services-bento { gap: 12px; }
  .services-bento .services-item { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; height: auto; padding: 18px; border-radius: 20px; }
  .services-bento .services-item:first-child { padding: 20px 18px; }
  .services-bento .services-item .icon { grid-row: span 3; width: 40px; height: 40px; margin: 0; }
  .services-bento .services-item h3,
  .services-bento .services-item:first-child h3 { margin: 0 0 4px; font-size: 1.125rem; font-family: var(--font-body); font-weight: 600; max-width: none; line-height: 1.3; }
  .services-bento .services-item p,
  .services-bento .services-item:first-child p { margin: 0; font-size: 0.875rem; }
  .services-bento .services-item-link { margin-top: 8px; }
  .services-bento .services-item:first-child::after { display: none; }

  .team-grid { gap: 12px; }
  .team-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 16px; border-radius: 20px; }
  .team-card-photo,
  .team-card-photo.is-initials { width: 64px; height: 64px; margin: 0; aspect-ratio: auto; border-radius: 50%; }
  .team-card-initials,
  .team-card-photo.is-initials .team-card-initials { font-size: 1.375rem; }
  .team-card-body { padding: 0; }
  .team-card-body h3, .team-card-body h2 { font-size: 1.125rem; }
  .team-card-role { margin-bottom: 8px; }
  .team-card-focus { margin-bottom: 12px; }
}

/* Phones: on the booking form the round back-to-top button sat over the consent rows. */
@media (max-width: 767.98px) { body:has(#bookingForm) .back-to-top { display: none !important; } }

/* One disclosure style: the fees policy uses the same chevron as the folded booking choice. */
.booking-policy summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; list-style: none; }
.booking-policy summary::-webkit-details-marker { display: none; }
.booking-policy summary::after { content: ""; flex-shrink: 0; width: 9px; height: 9px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg) translateY(-3px); transition: transform 0.2s ease; }
.booking-policy[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .booking-policy summary::after { transition: none; } }

/* Not-ready submit: a calm neutral fill with a readable label (5:1), not a faded peach. */
.btn-common[aria-disabled="true"],
.btn-common[aria-disabled="true"]:hover,
.btn-common[aria-disabled="true"]:focus-visible { opacity: 1; background: color-mix(in srgb, var(--ink) 8%, var(--bg)) !important; color: var(--ink-soft) !important; box-shadow: none; transform: none; cursor: not-allowed; }

/* Hints breathe a little below their field; the form-wide message sits above the button. */
.booking-step .help-text { margin-top: 6px; }
#bookingMsg.hidden { display: none; }
.booking-submit #bookingMsg { margin: 0 0 12px; }

/* Phones and tablets: the booking calendar starts at this week; rows of days already gone just add scroll.
   shortcut: arrowing up into a folded week finds no visible day; fine while past days can't be booked anyway. */
@media (max-width: 991.98px) { .simple-cal-day.is-past-week { display: none; } }

/* Small finishing touches. */

.team-card-actions { min-height: 40px; }  /* a card with only "Profile" stays the same height as one with Book */
.more-gallery-covers:not(:has(img)) { display: none; }  /* no album covers yet: no empty tiles */
@media (max-width: 575.98px) {
  .legal-content .faq-group ~ h3 { font-size: 1.25rem; line-height: 1.35; }
  .booking-intro { padding: 104px 0 20px; }
  .footer-Content .menu { columns: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; align-items: start; }
  footer .menu li { padding-bottom: 4px; }  /* the 44px links already carry the spacing */
  footer .footer-Content .menu { margin-bottom: 0; }
  footer .footer-Content .widget { margin-top: 24px; }
}

/* Long names or unbroken text never push the summary or recap off the card. */
.booking-summary-list dd,
.booking-recap { overflow-wrap: anywhere; min-width: 0; }

/* Phones: the open menu already has its own Book button; don't show the floating bar on top of it. */
body:has(#navbarCollapse.show) .floating-book-cta,
body:has(#navbarCollapse.collapsing) .floating-book-cta { display: none; }

/* Profile: the "Sessions with …" card beside the bio. */
.profile-session-facts { display: grid; gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; font-size: 0.9375rem; color: var(--ink); }
.profile-session-facts li { display: flex; align-items: center; gap: 10px; }
.profile-session-facts i { width: 18px; color: var(--accent); }
.profile-sessions-book { width: 100%; margin: 0; }
.profile-sessions-note { margin: 0; font-size: 0.875rem; color: var(--ink-soft); }

/* Fees: the payment steps with an "Ask about fees" panel beside them. */
.fees-payment-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 48px; align-items: start; }
.fees-ask { padding: 28px; border-radius: 20px; }
.fees-ask-title { margin: 0 0 8px; font-family: var(--font-display); font-weight: 500; font-size: 1.375rem; color: var(--ink); }
.fees-ask p { margin: 0 0 16px; font-size: 0.9375rem; line-height: 1.6; color: var(--ink-soft); }
.fees-ask-call,
.fees-ask-message { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; color: var(--accent-dark); }
.fees-ask-call { font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.fees-ask-call i,
.fees-ask-message i { color: var(--accent); }
.fees-ask .fees-ask-hours-label { margin: 16px 0 6px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 0.8125rem; font-weight: 600; color: var(--ink); }
@media (max-width: 991.98px) { .fees-payment-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* FAQ: topics beside the answers on wide screens. */
.faq-layout { display: grid; grid-template-columns: 230px minmax(0, 680px); gap: 56px; align-items: start; justify-content: start; }
.faq-side { position: sticky; top: 120px; max-height: calc(100vh - 140px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }  /* a 20-section policy list stays reachable on a short laptop */
.faq-layout .faq-jump { flex-direction: column; align-items: stretch; gap: 4px; margin: 0 0 24px; }
.faq-layout .faq-jump a { justify-content: flex-start; min-height: 40px; padding: 8px 14px; line-height: 1.4; border-radius: 12px; background: transparent; color: var(--ink-soft); }  /* padding keeps two-line entries apart */
.faq-layout .faq-jump a:hover { background: var(--accent-tint); color: var(--accent-dark); }
.faq-layout .faq-jump a[aria-current] { background: var(--accent-tint); color: var(--accent-dark); }
.faq-ask { padding: 18px; border-radius: 20px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.6); font-size: 0.875rem; }
.faq-ask .faq-ask-title { margin: 0 0 8px; font-weight: 600; color: var(--ink); }
.faq-ask a { display: flex; align-items: center; gap: 8px; min-height: 40px; font-weight: 600; color: var(--accent-dark); }
.faq-ask i { color: var(--accent); }
@media (max-width: 991.98px) {
  .faq-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .faq-side { position: static; }
  .faq-layout .faq-jump { flex-direction: row; flex-wrap: nowrap; gap: 8px; margin: 0 -16px 32px; padding: 0 16px 4px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .faq-layout .faq-jump::-webkit-scrollbar { display: none; }
  .faq-layout .faq-jump a { flex: 0 0 auto; white-space: nowrap; border-radius: 999px; background: var(--accent-tint); color: var(--accent-dark); }
  .faq-ask { display: none; }  /* the last answer already gives the phone and contact form */
}

/* Blog post: the article with a sticky "does this sound familiar?" card beside it. */
.article-layout { display: grid; grid-template-columns: minmax(0, 720px) minmax(0, 320px); gap: 56px; align-items: start; justify-content: space-between; }
.article-side { position: sticky; top: 120px; }
.article-side-card { padding: 26px; border-radius: 20px; }
.article-side-title { margin: 0 0 8px; font-family: var(--font-display); font-weight: 500; font-size: 1.375rem; color: var(--ink); }
.article-side-card p { margin: 0 0 18px; font-size: 0.9375rem; line-height: 1.6; color: var(--ink-soft); }
.article-side-book { width: 100%; margin: 0 0 8px; }
.article-side-link { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 0.875rem; font-weight: 600; color: var(--accent-dark); }
.article-side-link i { color: var(--accent); }
@media (max-width: 991.98px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .article-side { position: static; }
}

/* Booking progress. Badges turn into ticks once a step is complete (every screen). */
.booking-step.is-done .booking-step-badge { font-size: 0; }
.booking-step.is-done .booking-step-badge::before { content: ""; width: 12px; height: 7px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.booking-step h2[id] { scroll-margin-top: 140px; }

/* The step bar: phones and tablets only, sticky under the menu. Desktop has the summary beside the form. */
.booking-progress { display: none; }
@media (max-width: 991.98px) {
  .booking-progress { display: block; position: sticky; top: 76px; z-index: 20; margin: 0 0 16px; padding: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.86); border: 1px solid var(--glass-edge); box-shadow: 0 8px 24px rgba(20, 45, 44, 0.1); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
  .booking-progress ol { display: flex; margin: 0; padding: 0; list-style: none; }
  .booking-progress li { flex: 1; }
  .booking-progress a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 8px; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
  .booking-progress a[aria-current] { background: var(--accent-tint); color: var(--accent-dark); }
  .booking-progress-mark { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; opacity: 0.6; }
  .booking-progress a.is-done .booking-progress-mark { opacity: 1; border-color: var(--accent); background: var(--accent); }
  .booking-progress a.is-done .booking-progress-mark::before { content: ""; width: 8px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
}
/* Help text: one size on every form (it was 13px on Contact, 15px elsewhere). */
.help-text { margin: 6px 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--ink-soft); }
/* One layout on every page: Book across the card, View profile under it. Side by side only fit
   on some card widths, so the row wrapped on /team/ but not on service pages. */
.team-card-actions { flex-direction: column; align-items: stretch; gap: 4px; }
.team-card-actions .btn { width: 100%; }
.team-card-actions .team-card-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; }
.team-card-actions .team-card-note { min-height: 40px; }
.team-card-link { white-space: nowrap; }

/* Too-early press on "Request this time": the reason, at the top of the step. */
.booking-step-alert { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 10px 14px; border-radius: 12px; background: var(--tint-rose); color: var(--warm-text); font-weight: 600; font-size: 0.9375rem; scroll-margin-top: 120px; }
.booking-step-alert[hidden] { display: none; }
@media (max-width: 991.98px) {
  /* Clear the sticky menu and progress bar when anything is scrolled to. */
  .booking-step-alert,
  .booking-step,
  .booking-step h2[id],
  .booking-slots input { scroll-margin-top: 150px; }
}
.booking-manage-warning { display: block; margin-top: 8px; font-size: 0.875rem; color: var(--warm-text); }
.booking-manage-warning[hidden] { display: none; }

/* A phone number never breaks in the middle ("+977 980-" / "3298871"). */
a[href^="tel:"] { white-space: nowrap; }
/* An email address is one long word: let it break rather than run out of its box. */
a[href^="mailto:"] { overflow-wrap: break-word; }  /* not `anywhere`: that also lets its column shrink and split addresses that fit */
/* Every row reads the same way, label above value, as the hours already do:
   short values sat beside their label while long ones dropped under it. */
.footer-Content .contact-footer li { display: grid; gap: 2px; }
.footer-Content .contact-footer span { min-width: 0; }
.profile-cta-band .profile-cta-phone { min-height: 52px; padding: 12px 24px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); font-size: 1.25rem; font-variant-numeric: tabular-nums; }
@media (max-width: 400px) { .profile-cta-band .profile-cta-phone { padding: 12px 18px; font-size: 1.125rem; } }
.profile-cta-band .profile-cta-phone:hover { background: rgba(255, 255, 255, 0.22); text-decoration: none; }
/* Phones: the lede repeats what the held-note by the button says; start closer to step 1. */
@media (max-width: 575.98px) { .booking-intro-lede { display: none; } }
.pricing-table .price-ask a { font-size: 0.9375rem; font-weight: 600; color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }
#feesAskTitle { scroll-margin-top: 140px; }

/* Blog post: comfortable line length, and images never stretched past their own size. */
.article-main .article-body { max-width: 66ch; }
/* Staff-written text can hold one very long word ("Orthobunyavirus"): break it rather than overflow a phone. */
.article-body, .detail-body, .legal-content { overflow-wrap: break-word; }
.detail-image { display: block; width: auto; max-width: 100%; margin-left: auto; margin-right: auto; }
.booking-step .booking-policy { margin-top: 16px; }

/* Booking: the email hint stays one line; the no-email detail is a small disclosure under it. */
.booking-hint-more { margin-top: 4px; font-size: 0.8125rem; color: var(--ink-soft); }
.booking-hint-more summary { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-weight: 600; color: var(--accent-dark); cursor: pointer; list-style: none; }
.booking-hint-more summary::-webkit-details-marker { display: none; }
.booking-hint-more summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg) translateY(-2px); }
.booking-hint-more[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.booking-hint-more p { margin: 4px 0 0; }
.article-side-card .service-fee { margin: 0 0 18px; font-size: 0.875rem; line-height: 1.6; color: var(--ink-soft); }
/* Blog and service write-ups: about 70 characters a line (66ch ran to ~90 in Inter). */
.article-main .article-body,
.article-main .detail-body { max-width: 600px; }
.team-card-note { display: inline-flex; align-items: center; min-height: 36px; font-size: 0.875rem; font-weight: 600; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.team-card-note:hover { color: var(--accent-dark); }
/* Credentials and languages: one quiet line under the role, wrapping as a pair. */
.team-card-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: -4px 0 12px; font-size: 0.8125rem; line-height: 1.5; color: var(--ink-faint); }

/* ---------- hero: "What's bringing you here?" ---------- */
/* Replaces the illustration and the team strip: a first step for someone
   who doesn't yet know which service they need. */
.hero-next-line { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 0.9375rem; color: var(--ink-soft); }
.hero-next-line strong { color: var(--ink); }
.hero-next-line i { color: var(--accent); }
.hero-paths {
  position: relative;
  padding: 36px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 0 #fff inset, 0 30px 70px rgba(20, 45, 44, 0.12);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
}
.hero-paths-title { font-size: 1.5rem; font-weight: 500; line-height: 1.25; margin: 0 0 18px; }
.hero-paths ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hero-paths li a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(31, 93, 91, 0.1);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.hero-paths li a > span { margin-left: auto; color: var(--accent); transition: transform 0.2s ease; }
.hero-paths li a:hover,
.hero-paths li a:focus-visible { background: #fff; border-color: rgba(31, 93, 91, 0.35); color: var(--ink); }
.hero-paths li a:hover > span { transform: translateX(3px); }
.hero-paths li a.is-urgent { margin-top: 6px; background: var(--accent-tint); border-color: rgba(31, 93, 91, 0.2); color: var(--accent-dark); }
.hero-paths li a.is-urgent i { color: var(--accent); }
.hero-paths-foot { margin: 18px 0 0; font-size: 0.875rem; color: var(--ink-soft); }
.hero-paths-foot a { font-weight: 600; }
@media (max-width: 575.98px) {
  .hero-paths { padding: 24px 20px; border-radius: 20px; }
  .hero-paths-title { font-size: 1.25rem; }
}
.hero-paths.is-collapsed .hero-path-extra { display: none; }
.hero-paths-more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.hero-paths-more[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-paths li a, .hero-paths li a > span { transition: none; }
  .hero-paths li a:hover > span { transform: none; }
}

/* ---------- service page: who you'd see ---------- */

.service-people { margin-top: 64px; }
.service-people-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 24px; }
.service-people-head .detail-related-title { margin: 0; }
.service-people-head p { margin: 0; max-width: 480px; color: var(--ink-soft); }
.service-people .team-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }  /* fill the row: often only 2–3 people */

/* ---------- pre-session check-in ---------- */
/* Phones first: one column, big tap targets; desktop adds the side card. */
.checkin-start, .checkin-shell, .checkin-done { position: relative; padding: 112px 0 72px; }
.checkin-start-grid { display: grid; gap: 24px; }
.checkin-start-intro h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 500; line-height: 1.15; margin: 0 0 14px; }
.checkin-start-intro .detail-lede { margin: 0; }
.checkin-start-skip { margin: 16px 0 0; font-size: 0.9375rem; color: var(--ink-soft); }
.checkin-start-skip a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-weight: 600; }
.team-card-role + .young-tag { margin-top: -4px; }
/* Home shows only the clinicians, often fewer than a full row: same card width, centred, no empty column. */
@media (min-width: 576px) {
  #team .team-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 262px)); justify-content: center; }
}
.checkin-start-card { padding: 24px 20px; border-radius: 20px; }
.checkin-start-card h2 { font-size: 1.375rem; font-weight: 500; margin: 0 0 6px; }
.checkin-start-meta { display: flex; align-items: center; gap: 8px; margin: 0 0 20px; font-size: 0.875rem; color: var(--ink-soft); }
.checkin-start-meta i { color: var(--accent); }
.checkin-start-card .form-consent { margin: 4px 0 0; }
.checkin-start-btn { width: 100%; justify-content: center; margin-top: 18px; display: inline-flex; gap: 8px; }
.checkin-start-private { display: flex; align-items: flex-start; gap: 8px; margin: 16px 0 0; font-size: 0.875rem; color: var(--ink-soft); }
.checkin-start-private i { margin-top: 3px; color: var(--accent); }
.checkin-start-details h2 { font-size: 1.25rem; font-weight: 500; margin: 28px 0 10px; }
.checkin-start-details h2:first-child { margin-top: 8px; }
@media (min-width: 992px) { .checkin-start-details { padding-top: 32px; } }
.checkin-start-details p, .checkin-know li { color: var(--ink-soft); line-height: 1.65; }
.checkin-how { counter-reset: how; list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.checkin-how li { counter-increment: how; position: relative; padding-left: 44px; color: var(--ink-soft); line-height: 1.55; }
.checkin-how li::before { content: counter(how); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-tint); color: var(--accent-dark); font-weight: 700; font-size: 0.875rem; }
.checkin-how strong { display: block; color: var(--ink); }
.checkin-know { margin: 0; padding-left: 20px; list-style: disc; }
.checkin-urgent { margin: 24px 0 0; padding: 12px 16px; border-radius: 12px; background: rgba(242, 137, 92, 0.12); color: var(--ink); font-size: 0.9375rem; }

/* The question pages: one calm panel. */
.checkin-panel { max-width: 720px; margin: 0 auto; padding: 22px 18px 26px; border-radius: 20px; background: rgba(255, 255, 255, 0.62); border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 1px 0 #fff inset, 0 24px 60px rgba(20, 45, 44, 0.1); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.checkin-panel-top .eyebrow { margin-bottom: 12px; }
.checkin-steps { margin-bottom: 22px; }
.checkin-steps-label { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0 0 10px; font-size: 0.875rem; color: var(--ink-soft); }
.checkin-steps-label strong { color: var(--ink); }
.checkin-steps-bar { height: 6px; border-radius: 999px; overflow: hidden; background: rgba(31, 93, 91, 0.12); }
.checkin-steps-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--sun-2)); transform-origin: left center; transform: scaleX(var(--to)); }
.checkin-prompt { font-size: clamp(1.25rem, 3.6vw, 1.6rem); font-weight: 500; line-height: 1.35; margin: 0 0 18px; }
.checkin-sub { margin: -6px 0 18px; color: var(--ink-soft); }
.checkin-error-summary { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--danger) 8%, transparent); color: var(--danger); font-weight: 600; }
.checkin-question { margin: 0 0 12px; padding: 16px; border: 1px solid rgba(31, 93, 91, 0.1); border-radius: 20px; background: rgba(255, 255, 255, 0.85); }
.checkin-question.is-invalid { border-color: var(--danger); }
.checkin-question legend { float: left; width: 100%; margin: 0 0 12px; padding: 0; font-family: var(--font-body); font-size: 1rem; font-weight: 600; line-height: 1.45; color: var(--ink); }
.checkin-question legend + * { clear: both; }
.checkin-number { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 10px; border-radius: 50%; background: var(--accent-tint); color: var(--accent-dark); font-size: 0.8125rem; vertical-align: 1px; }
.checkin-options { display: grid; gap: 8px; }
.checkin-option { position: relative; margin: 0; cursor: pointer; }
.checkin-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.checkin-option span { display: flex; align-items: center; min-height: 48px; padding: 10px 16px; border: 1px solid rgba(31, 93, 91, 0.2); border-radius: 12px; background: #fff; color: var(--ink); font-size: 1rem; transition: background 0.15s ease, border-color 0.15s ease; }
.checkin-option:hover span { border-color: var(--accent); }
.checkin-option input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.checkin-option input:focus-visible + span { outline: 2px solid var(--accent-dark); outline-offset: 2px; }
.checkin-question .field-error { margin-top: 10px; }
.checkin-care { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--accent-tint); color: var(--ink); font-size: 0.9375rem; line-height: 1.55; }
.checkin-care p { margin: 0 0 6px; }
.checkin-care p:last-child { margin: 0; }
.checkin-care-card { margin: 20px 0 0; padding: 16px 18px; }
.checkin-fields { display: grid; gap: 4px; }
.checkin-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 22px; }
.checkin-actions .btn { display: inline-flex; align-items: center; gap: 8px; }
.checkin-form .checkin-actions .btn { flex: 1 1 100%; justify-content: center; }
.checkin-back { font-weight: 600; color: var(--ink-soft); }
.checkin-back:hover { color: var(--accent-dark); }

/* Finish: warm, with the illustration. */
.checkin-done { overflow: hidden; }
.checkin-done-grid { position: relative; display: grid; gap: 8px; align-items: center; }
.checkin-done-art { max-width: 220px; margin: 0 auto; }
.checkin-done-art img { display: block; width: 100%; height: auto; }
.checkin-done-copy h1 { font-size: clamp(2.1rem, 6vw, 3.4rem); font-weight: 500; line-height: 1.1; margin: 0 0 16px; }
.checkin-done-copy h1 em { font-style: italic; color: var(--accent); }
.checkin-done-lede { font-size: 1.125rem; line-height: 1.65; color: var(--ink-soft); margin: 0 0 8px; }
.checkin-done-next { font-size: 1.25rem; font-weight: 500; margin: 28px 0 14px; }

@media (min-width: 576px) {
  .checkin-panel { padding: 30px 32px 32px; border-radius: 20px; }
  .checkin-question { padding: 18px 20px; }
  .checkin-option span { min-height: 44px; }
  .checkin-form .checkin-actions .btn { flex: 0 0 auto; }
  .checkin-fields { grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (min-width: 992px) {
  .checkin-start, .checkin-shell, .checkin-done { padding: 150px 0 110px; }
  .checkin-start-grid { grid-template-columns: minmax(0, 1fr) 400px; grid-template-areas: "intro card" "details card"; gap: 0 64px; align-items: start; }
  .checkin-start-intro { grid-area: intro; }
  .checkin-start-details { grid-area: details; max-width: 600px; }
  .checkin-start-card { grid-area: card; position: sticky; top: 110px; padding: 32px; border-radius: 20px; }
  .checkin-done-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; }
  .checkin-done-art { order: 2; max-width: 440px; padding: 18px; border-radius: 20px; background: rgba(255, 255, 255, 0.45); border: 1px solid rgba(255, 255, 255, 0.85); box-shadow: 0 1px 0 #fff inset, 0 30px 70px rgba(20, 45, 44, 0.12); }
}
@media (prefers-reduced-motion: reduce) { .checkin-option span { transition: none; } }
.checkin-form > .checkin-care { margin: 0 0 18px; }

/* ---------- check-in: feel ---------- */
/* Pressed state on touch-down: phones have no hover, so a tap shows at once. */
.checkin-option span, .hero-paths li a, .btn { -webkit-tap-highlight-color: transparent; }
.checkin-option:active span,
.hero-paths li a:active,
.btn:active { transform: scale(0.97); transition: transform 100ms ease-out; }

/* The safety note arrives from the answer that caused it. */
.checkin-care[data-risk-note]:not([hidden]) { animation: checkin-care-in 220ms ease-out; }
@keyframes checkin-care-in { from { opacity: 0; transform: translateY(-6px); } }

/* Each page grows the bar from where the last one left it. */
.checkin-steps-bar span { animation: checkin-step-fill 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes checkin-step-fill { from { transform: scaleX(var(--from)); } }

.checkin-prompt:focus { outline: none; }
.checkin-care-card .checkin-call-now { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; margin: 4px 0 12px; font-size: 1.125rem; }
.checkin-gate-hint { clear: both; margin: -4px 0 12px; font-size: 0.875rem; color: var(--ink-soft); }

/* Large display type reads loose in Fraunces: tighten only the big sizes. */
.checkin-start-intro h1, .checkin-done-copy h1 { letter-spacing: -0.015em; }

/* Skip is a quiet choice, not a second primary button. */
.checkin-form .checkin-actions .checkin-skip { background: none; border: 0; box-shadow: none; color: var(--ink-soft); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.checkin-form .checkin-actions .checkin-skip:hover,
.checkin-form .checkin-actions .checkin-skip:focus-visible { background: none; border-color: transparent; color: var(--accent-dark) !important; }

/* Phones: Next and "pages left" stay under the thumb on the question pages. */
@media (max-width: 575.98px) {
  .checkin-shell .checkin-panel { padding-bottom: 0; }
  .checkin-shell .checkin-form .checkin-actions {
    position: sticky; bottom: 0; z-index: 5;
    margin: 18px -18px 0; padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
    border-radius: 0 0 20px 20px;
    background: rgba(255, 255, 255, 0.94);
    border-top: 1px solid rgba(31, 93, 91, 0.08);
    -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
  }
  .checkin-shell .checkin-back { flex: 1 1 100%; text-align: center; }
  body:has(.checkin-shell) .back-to-top { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .checkin-option:active span, .hero-paths li a:active, .btn:active { transform: none; }
  .checkin-care[data-risk-note]:not([hidden]) { animation: checkin-fade 160ms ease-out; }
  .checkin-steps-bar span { animation: none; }
  @keyframes checkin-fade { from { opacity: 0; } }
}
@media (prefers-reduced-transparency: reduce) {
  .hero-paths, .checkin-panel, .checkin-start-card, .checkin-done-art,
  .checkin-shell .checkin-form .checkin-actions { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .checkin-option span, .checkin-question, .hero-paths li a { border-color: var(--ink); }
  .checkin-steps-bar { background: rgba(31, 93, 91, 0.35); }
}

/* ---------- check-in finish: the plant grows in, once ---------- */
/* Shapes settle, the circle and spiral draw, the stem rises, leaves open
   from the bottom up, then the blossom. About 2s, no loop, no overshoot. */
.grow { display: block; width: 100%; height: auto; }
.grow-blob, .grow-dot { transform-box: fill-box; transform-origin: center; animation: grow-settle 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.grow-d1 { animation-delay: 80ms; }
.grow-d2 { animation-delay: 160ms; }
.grow-dot { animation-delay: 1700ms; animation-duration: 500ms; }
.grow-line { stroke-dasharray: 1; stroke-dashoffset: 0; animation: grow-draw 900ms cubic-bezier(0.45, 0, 0.2, 1) both; }
.grow-ring { animation-delay: 200ms; animation-duration: 1000ms; }
.grow-spiral { animation-delay: 650ms; animation-duration: 700ms; }
.grow-stem { animation-delay: 1000ms; animation-duration: 600ms; }
.grow-leaf { transform-box: fill-box; transform-origin: 0% 100%; animation: grow-leaf 450ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.grow-leaf-3 { transform-origin: 100% 100%; animation-delay: 1250ms; }
.grow-leaf-2 { transform-origin: 50% 100%; animation-delay: 1400ms; }
.grow-leaf-1 { transform-origin: 0% 100%; animation-delay: 1550ms; }
.grow-bloom { transform-box: fill-box; transform-origin: center; animation: grow-settle 500ms cubic-bezier(0.2, 0.8, 0.2, 1) 1750ms both; }
.grow-halo { animation-delay: 1900ms; }
@keyframes grow-draw { from { stroke-dashoffset: 1; } }  /* resting state is the finished drawing */
@keyframes grow-settle { from { opacity: 0; transform: scale(0.85); } }
@keyframes grow-leaf { from { opacity: 0; transform: scale(0.2) rotate(-12deg); } }
@media (prefers-reduced-motion: reduce) {
  .grow-blob, .grow-dot, .grow-leaf, .grow-bloom { animation: none; }
  .grow-line { animation: none; }
}

/* ---------- check-in on small phones ---------- */
/* Later pages of the same questionnaire: the instructions are a reminder, not a headline. */
.checkin-prompt.is-continued { font-family: var(--font-body); font-size: 0.9375rem; font-weight: 600; line-height: 1.5; color: var(--ink-soft); }
@media (max-width: 575.98px) {
  .checkin-prompt { font-size: clamp(1.15rem, 5.2vw, 1.4rem); }
  .checkin-panel-top .eyebrow::before { display: none; }  /* long topics wrap; the dash would hang */
  /* The pinned bar: one line of buttons, about 90px instead of 140–170. */
  .checkin-shell .checkin-form .checkin-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; padding-top: 10px; }
  .checkin-shell .checkin-actions .btn-common { grid-column: 2; grid-row: 1; }
  .checkin-shell .checkin-back { grid-column: 1; grid-row: 1; flex: none; padding: 0 4px; }
  /* The last page: Send across the top; Back and Skip share the line below. */
  .checkin-shell .checkin-actions:has(.checkin-skip) .btn-common { grid-column: 1 / -1; grid-row: 1; }
  .checkin-shell .checkin-actions:has(.checkin-skip) .checkin-back { grid-row: 2; justify-self: start; }
  .checkin-shell .checkin-actions .checkin-skip { grid-column: 2; grid-row: 2; justify-self: end; width: auto; padding: 8px 0; }
}

/* ---------- check-in: tablets, landscape phones, touch ---------- */
/* Comfortable tap targets for the small text links. */
.checkin-back { display: inline-flex; align-items: center; min-height: 44px; }
.checkin-shell .checkin-actions .checkin-skip { min-height: 44px; }
.hero-paths-foot a { display: inline-block; padding: 12px 0; margin: -12px 0; }

/* Touch screens keep :hover after a tap; only real hovering should colour things. */
@media (hover: none) {
  .checkin-option:hover span { border-color: rgba(31, 93, 91, 0.2); }
  .checkin-option input:checked + span { border-color: var(--accent); }
  .hero-paths li a:hover { background: rgba(255, 255, 255, 0.78); border-color: rgba(31, 93, 91, 0.1); }
  .hero-paths li a:hover > span { transform: none; }
  .hero-paths li a.is-urgent:hover { background: var(--accent-tint); border-color: rgba(31, 93, 91, 0.2); }
}

/* Tablets: there's room for the form beside the explanation, and the art beside the thanks. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .checkin-start-grid { grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "intro card" "details card"; gap: 0 32px; align-items: start; }
  .checkin-start-intro { grid-area: intro; }
  .checkin-start-details { grid-area: details; padding-top: 24px; }
  .checkin-start-card { grid-area: card; position: sticky; top: 100px; }
  .checkin-start-intro h1 { font-size: 2.2rem; }
  .checkin-done-grid { grid-template-columns: minmax(0, 1fr) 260px; gap: 32px; align-items: start; }
  .checkin-done-art { order: 2; max-width: none; margin-top: 24px; }
}

/* Phones held sideways: little height, so less padding and the same pinned Next bar as portrait. */
@media (max-height: 500px) and (pointer: coarse) {
  .checkin-start, .checkin-shell, .checkin-done { padding-top: 88px; }
  .checkin-steps { margin-bottom: 12px; }
  .checkin-shell .checkin-panel { padding-bottom: 0; }
  .checkin-shell .checkin-form .checkin-actions {
    position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: nowrap; justify-content: flex-end;
    margin: 14px -32px 0; padding: 8px 32px calc(8px + env(safe-area-inset-bottom));
    border-radius: 0 0 20px 20px; background: rgba(255, 255, 255, 0.94); border-top: 1px solid rgba(31, 93, 91, 0.08);
    -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
  }
  .checkin-shell .checkin-actions .checkin-back { order: -1; }
  .checkin-form .checkin-actions .btn { flex: 0 0 auto; }
  body:has(.checkin-shell) .back-to-top { display: none !important; }
}

/* ---------- critique fixes: crisis, chooser, check-in reach, scales ---------- */
/* Crisis numbers: on phones each is a full-width row, and the clinic's status wraps under its number. */
@media (max-width: 575.98px) {
  .help-now-calls li { flex: 1 1 100%; min-width: 0; }
  .help-now-calls a { display: flex; width: 100%; border-radius: 20px; }
  .help-now-calls a strong { flex: 0 0 auto; }
}
.health-disclaimer { max-width: 640px; }  /* ~70 characters a line, like the body copy */

/* The chooser says what it does; the crisis row comes first at every width, so phone and desktop
   visitors see the same structure and the safest route is the first one read. */
.hero-paths-sub { margin: -10px 0 22px; font-size: 0.875rem; color: var(--ink-soft); }
.hero-paths li a.is-urgent { border-color: rgba(31, 93, 91, 0.35); }
.hero-paths li:has(.is-urgent) { order: -1; }
.hero-paths li a.is-urgent { margin: 0 0 6px; }

/* "Not ready to book?" — the check-in offered where people hesitate. */
.checkin-nudge { margin: 14px 0 0; font-size: 0.875rem; color: var(--ink-soft); }
.checkin-nudge a { font-weight: 600; white-space: nowrap; }
details.checkin-nudge > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; color: var(--accent); cursor: pointer; list-style: none; }
details.checkin-nudge > summary::-webkit-details-marker { display: none; }
details.checkin-nudge > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 0.2s ease; }
details.checkin-nudge[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
details.checkin-nudge ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
details.checkin-nudge ul a { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--accent-tint); color: var(--accent-dark); }
.booking-intro .checkin-nudge { margin: 12px 0 0; }

/* Answer scales: a stack on phones and small tablets, one even row on wider screens (an ordered scale reads left to right). */
@media (min-width: 768px) {
  .checkin-options { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .checkin-option span { justify-content: center; height: 100%; min-height: 52px; padding: 10px 12px; text-align: center; line-height: 1.3; }
}

/* Back is always on the left; the forward actions on the right. */
.checkin-back { gap: 8px; }
@media (min-width: 576px) {
  .checkin-form .checkin-actions .checkin-back { order: -1; margin-right: auto; }
  .checkin-form .checkin-actions .btn-common { order: 2; }
}

/* Finish page on phones: when there's a safety follow-up, the care card comes before the drawing. */
@media (max-width: 991.98px) {
  .checkin-done-grid:has(.checkin-care-card) .checkin-done-art { order: 2; max-width: 180px; }
}

/* /book/: a flat step badge, and the calendar sits in its step instead of a card inside a card. */
.booking-step-badge { background: var(--accent); box-shadow: none; }
.booking-step .booking-calendar-wrap { background: transparent; border: 0; box-shadow: none; padding: 0; }

/* ---------- booking sent: the held time leads, the intro folds away ---------- */
.booking-stage.is-booked .booking-intro { padding-bottom: 12px; }
.booking-stage.is-booked .booking-intro .container > :not(.detail-back) { display: none; }
.booking-stage.is-booked .booking-confirmation { border: 2px solid var(--accent); }

/* ---------- footer: the newsletter, on every page but the check-in and crisis ones ---------- */
.footer-newsletter { padding: 40px 0 32px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.footer-newsletter-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px 48px; align-items: start; }
.footer-newsletter h3 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 500; font-size: 1.375rem; color: #fff; }
.footer-newsletter-copy p { margin: 0; max-width: 46ch; color: rgba(255, 255, 255, 0.65); }
.footer-newsletter #subscribeForm .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; margin: 0; }
.footer-newsletter #subscribeForm .row > * { padding: 0; max-width: none; }
.footer-newsletter #subscribeForm .row > .form-line:has(.form-consent),
.footer-newsletter #subscribeForm .row > .form-line:has(.cf-turnstile) { grid-column: 1 / -1; grid-row: 2; }
.footer-newsletter #subscribeForm .row > .form-line:has(.cf-turnstile) { grid-row: 3; margin-top: 10px; }
.footer-newsletter .form-group { margin: 0 0 10px; }
.footer-newsletter .form-label { color: rgba(255, 255, 255, 0.75); }
/* On the dark band a near-white field beside a white button read as disabled: an outlined field on the dark. */
.footer-newsletter .form-control { min-height: var(--control-h); background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.42); color: #fff; font-size: 1rem; }
.footer-newsletter .form-control::placeholder { color: rgba(255, 255, 255, 0.7); }
.footer-newsletter .form-control:focus { background: rgba(255, 255, 255, 0.1); border-color: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.16); color: #fff; }
.footer-newsletter .form-control.is-invalid { border-color: #ffb4a8; }
.footer-newsletter .form-submit { display: flex; flex-direction: column; gap: 8px; margin: 0; padding-top: 29px; }
.footer-newsletter .form-submit .btn { min-height: 48px; background: #fff; color: var(--ink); border-color: #fff; }
.footer-newsletter .form-submit .btn:hover { background: var(--accent-tint); border-color: var(--accent-tint); color: var(--ink); }
.footer-newsletter .form-consent { font-size: 0.8125rem; line-height: 1.5; color: rgba(255, 255, 255, 0.7); }
.footer-newsletter .form-consent a { color: #fff; }
.footer-newsletter #subscribeMsg { grid-column: 1 / -1; margin: 0; font-family: var(--font-body); font-size: 0.9375rem; font-weight: 600; text-align: left; color: var(--tint-mint) !important; }
.footer-newsletter #subscribeGuideLink { align-self: start; }
@media (max-width: 767.98px) {
  .footer-newsletter-inner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .footer-newsletter #subscribeForm .row { grid-template-columns: minmax(0, 1fr); }
  .footer-newsletter #subscribeForm .row > .form-line:has(.form-consent) { grid-row: auto; }
  .footer-newsletter .form-submit { padding-top: 0; }
}

/* ---------- free group sessions ---------- */
.events-section { padding-top: 0; }
.event-date { display: grid; place-items: center; align-content: center; flex: none; width: 64px; height: 68px; border-radius: 20px; background: var(--accent-tint); color: var(--accent-dark); font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.1; }
.event-date strong { font-family: var(--font-display); font-size: 1.625rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink); }
.events-list { display: grid; gap: 14px; max-width: 880px; margin: 0; padding: 0; list-style: none; }
.event-card a { display: flex; align-items: flex-start; gap: 18px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); color: var(--ink); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.event-card a:hover { border-color: rgba(31, 93, 91, 0.35); box-shadow: 0 14px 40px rgba(20, 45, 44, 0.08); }
.event-card a:active { transform: scale(0.99); transition: transform 100ms ease-out; }
.event-card-body { display: grid; gap: 4px; flex: 1; min-width: 0; }
.event-card-when { font-size: 0.875rem; font-weight: 600; color: var(--accent-dark); }
.event-card-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; line-height: 1.3; }
.event-card-summary { color: var(--ink-soft); }
.event-card-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 4px; font-size: 0.875rem; color: var(--ink-soft); }
.event-card-meta i { color: var(--accent); }
.event-few, .event-full { font-weight: 600; color: var(--sun-text); }
.event-card-go { align-self: center; flex: none; font-weight: 600; color: var(--accent-dark); white-space: nowrap; }
.events-empty { max-width: 560px; padding: 28px; border: 1px dashed var(--line); border-radius: 20px; }
.events-empty p { margin-bottom: 16px; }

.event-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 40px; align-items: start; }
.event-facts { display: grid; gap: 10px; margin: 0 0 24px; padding: 0; list-style: none; font-size: 1rem; }
.event-facts li { display: flex; gap: 10px; align-items: baseline; }
.event-facts i { color: var(--accent); }
.event-image { width: 100%; max-height: 420px; margin-bottom: 24px; border-radius: 20px; object-fit: cover; }
.event-description { max-width: 64ch; font-size: 1.125rem; line-height: 1.7; }
.event-hosts-heading { margin: 28px 0 12px; font-size: 1.25rem; }
.person-chips { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.person-chips a { display: flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); }
.person-chips img, .person-chip-initials { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; font-weight: 600; }
.person-chips span { display: grid; line-height: 1.3; }
.person-chips small { color: var(--ink-soft); }
.event-note { margin-top: 28px; max-width: 64ch; color: var(--ink-soft); }
.event-signup { position: sticky; top: 110px; padding: 26px 24px; }
.event-signup h2 { margin: 0 0 6px; font-size: 1.375rem; }
.event-signup h2:focus { outline: none; }
.event-places { margin: 0 0 14px; font-weight: 600; color: var(--ink-soft); }
.event-places.is-few { color: var(--sun-text); }
.event-signup form .btn { width: 100%; min-height: 50px; margin-top: 6px; }
.event-signup .form-consent { margin: 4px 0 10px; font-size: 0.8125rem; line-height: 1.5; }
.event-signed-up i { font-size: 2.125rem; color: var(--accent); }
@media (max-width: 991.98px) {
  .event-detail-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .event-signup { position: static; }
}
@media (max-width: 575.98px) {
  .event-card a { flex-wrap: wrap; gap: 14px; padding: 18px; }
  .event-card-body { flex-basis: calc(100% - 82px); }
  .event-card-go { margin-left: 82px; }
}

/* The home CTA's second way in: on the dark band, a quiet glass card. */
.cta-free { display: flex; align-items: center; gap: 16px; max-width: 520px; margin-top: 28px; padding: 14px 18px 14px 14px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 20px; background: rgba(255, 255, 255, 0.08); color: #fff; transition: background 0.2s ease; }
.cta-free:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.cta-free:active { transform: scale(0.99); transition: transform 100ms ease-out; }
.cta-free .event-date { width: 56px; height: 60px; background: rgba(255, 255, 255, 0.92); }
.cta-free > span:nth-child(2) { display: grid; gap: 2px; flex: 1; min-width: 0; }
.cta-free small { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.75); }
.cta-free strong { font-size: 1rem; line-height: 1.35; }
.cta-free-when { font-size: 0.875rem; color: rgba(255, 255, 255, 0.8); }
.cta-free-go { font-size: 1.25rem; }
@media (prefers-reduced-motion: reduce) {
  .event-card a:active, .cta-free:active { transform: none; }
}
.checkin-done-team { margin-bottom: 8px; }
.checkin-reading { display: grid; gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }
.checkin-reading a { display: block; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.7); color: var(--ink); font-weight: 600; }
.checkin-reading a:hover { border-color: rgba(31, 93, 91, 0.35); }

/* ---------- contact page: every way to reach us in one roomy panel, beside the form ---------- */
.contact-page { padding-top: 8px; }
.contact-intro { max-width: 640px; margin-bottom: 28px; }
.contact-intro p { font-size: 1.125rem; line-height: 1.65; color: var(--ink-soft); }
.contact-layout { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 28px; align-items: start; }
.contact-side { display: grid; gap: 22px; padding: 26px 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.contact-side h2 { margin: 0 0 8px; font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; line-height: 1.3; color: var(--ink); }  /* headings, not small uppercase labels */
.contact-routes { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.contact-routes a { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px; border-radius: 20px; background: var(--accent-tint); color: var(--ink); }
.contact-routes a:hover { background: color-mix(in srgb, var(--accent) 14%, #fff); color: var(--ink); }
.contact-routes a:active { transform: scale(0.98); transition: transform 100ms ease-out; }
.contact-routes i { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--accent-dark); font-size: 1.125rem; }
.contact-routes span { display: grid; min-width: 0; }
.contact-routes small { font-size: 0.8125rem; color: var(--ink-soft); }
.contact-routes strong { font-size: 1rem; overflow-wrap: anywhere; }
.contact-block-hours .clinic-now { margin: 0 0 8px; font-weight: 600; }
.contact-block-visit p { margin: 0 0 12px; }
.contact-map-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.contact-map-note { margin: 10px 0 0 !important; font-size: 0.8125rem; color: var(--ink-faint, var(--ink-soft)); }
.contact-block-visit iframe { height: 260px !important; border-radius: 20px; }
.contact-page .contact-block { padding: 28px 28px 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.contact-form-title { margin: 0 0 18px; font-size: 1.5rem; }
.contact-crisis { max-width: 640px; margin: 28px 0 0; font-size: 0.875rem; color: var(--ink-soft); }
@media (max-width: 991.98px) {
  .contact-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
  .contact-side, .contact-page .contact-block { padding: 20px 16px; border-radius: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-routes a:active { transform: none; }
}

/* ---------- crisis support: the numbers lead, as big equal tiles ---------- */
.detail-hero .help-now { margin: 32px 0 0; }
.help-now .help-now-calls { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 0 0 20px; }
.help-now .help-now-calls li { min-width: 0; }
.help-now .help-now-calls a { display: grid; align-content: center; gap: 4px; width: 100%; min-height: 96px; padding: 16px 22px; border-radius: 20px; }
.help-now .help-now-calls strong { font-family: var(--font-display); font-size: clamp(1.9rem, 4vw, 2.4rem); font-weight: 500; line-height: 1.1; }
.help-now .help-now-clinic { grid-column: span 2; }
.help-now .help-now-clinic strong { font-size: clamp(1.4rem, 3vw, 1.8rem); }
.help-now .help-now-calls span { min-width: 0; font-size: 0.9375rem; font-weight: 600; white-space: normal; overflow-wrap: anywhere; }
.help-now-calls em { font-style: normal; font-weight: 500; color: var(--ink-soft); }
.help-now-calls em.is-open { color: var(--accent); }
.help-now-more { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px 40px; align-items: start; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.help-now-danger { display: flex; gap: 10px; margin: 0 !important; color: #fff; }
.help-now-danger i { margin-top: 4px; color: var(--sun-2); }
.help-now .help-now-hours { margin: 0; }
.crisis-body .article-main { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.crisis-body .health-disclaimer { margin-top: 0; }
@media (max-width: 767.98px) {
  .help-now .help-now-clinic { grid-column: auto; }
  .help-now-more, .crisis-body .article-main { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .help-now .help-now-calls a { min-height: 76px; }
}

/* Booking form hints: quiet helpers under the fields, not a second label. */
.booking-stage .help-text, .booking-stage .booking-hint-more p { font-size: 0.8125rem; font-weight: 400; line-height: 1.5; color: var(--ink-soft); }
.booking-stage .booking-hint-more summary { font-size: 0.8125rem; font-weight: 500; }

/* ---------- team profile: when you can see them, and what a first session is like ---------- */
.profile-section { padding: 56px 0; }
.profile-next { display: grid; gap: 2px; margin: 14px 0 12px; padding: 14px 16px; border-radius: 20px; background: var(--accent-tint); color: var(--ink); }
.profile-next:hover { background: color-mix(in srgb, var(--accent) 14%, #fff); color: var(--ink); }
.profile-next small { font-size: 0.875rem; font-weight: 600; color: var(--accent-dark); }
.profile-next strong { font-size: 1.125rem; }
.profile-next span { font-size: 0.875rem; font-weight: 600; color: var(--accent-dark); }
.profile-first-steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: first; }
.profile-first-steps li { counter-increment: first; position: relative; padding: 16px 18px 16px 64px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); color: var(--ink-soft); line-height: 1.6; }
.profile-first-steps li::before { content: counter(first); position: absolute; top: 16px; left: 18px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-tint); color: var(--accent-dark); font-weight: 700; }
.profile-first-steps strong { display: block; margin-bottom: 2px; font-family: var(--font-display); font-size: 1.125rem; font-weight: 500; color: var(--ink); }
@media (max-width: 767.98px) {
  .profile-section { padding: 40px 0; }
}

/* ---------- corporate enquiry sent: confirmation, next steps, things to look at ---------- */
.corp-done-head { display: flex; gap: 22px; align-items: flex-start; max-width: 820px; }
.corp-done-check { display: grid; place-items: center; flex: none; width: 64px; height: 64px; margin-top: 6px; border-radius: 50%; background: var(--accent-tint); color: var(--accent); font-size: 2rem; }
.corp-done-about { margin: 14px 0 0; display: inline-block; padding: 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.8); border: 1px solid var(--line); }
.corp-done-section { padding-top: 8px; }
.corp-done-title { margin: 0 0 16px; font-size: clamp(1.4rem, 2.6vw, 1.8rem); }
.corp-done-sub { margin: -8px 0 18px; color: var(--ink-soft); }
.corp-done-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 56px; padding: 0; list-style: none; counter-reset: corp; }
.corp-done-steps li { counter-increment: corp; position: relative; padding: 62px 22px 22px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); color: var(--ink-soft); line-height: 1.6; }
.corp-done-steps li::before { content: counter(corp); position: absolute; top: 20px; left: 22px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 700; }
.corp-done-steps strong { display: block; margin-bottom: 4px; font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; color: var(--ink); }
.corp-done-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 48px; }
.corp-done-card { display: flex; flex-direction: column; gap: 6px; padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); color: var(--ink); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.corp-done-card:hover { border-color: rgba(31, 93, 91, 0.35); box-shadow: 0 14px 40px rgba(20, 45, 44, 0.08); color: var(--ink); }
.corp-done-card:active { transform: scale(0.99); transition: transform 100ms ease-out; }
.corp-done-card > i { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 12px; background: var(--accent-tint); color: var(--accent-dark); font-size: 1.25rem; }
.corp-done-card strong { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; line-height: 1.3; }
.corp-done-card span { color: var(--ink-soft); font-size: 0.9375rem; }
.corp-done-card em { margin-top: auto; padding-top: 8px; font-style: normal; font-weight: 600; color: var(--accent-dark); }
.corp-done-photo img { width: calc(100% + 44px); height: 140px; margin: -22px -22px 10px; border-radius: 20px 20px 0 0; object-fit: cover; }
.corp-done-people { margin-bottom: 48px; }
.corp-done-quote { max-width: 720px; margin: 0 0 48px; padding: 0 0 0 22px; border-left: 1px solid var(--line); }
.corp-done-quote blockquote { margin: 0 0 8px; font-family: var(--font-display); font-size: clamp(1.2rem, 2.2vw, 1.45rem); line-height: 1.45; color: var(--ink); }
.corp-done-quote figcaption { color: var(--ink-soft); }
.corp-done-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; padding: 28px 32px; border-radius: 20px; background: var(--accent-dark); color: rgba(255, 255, 255, 0.85); }
.corp-done-band h2 { margin: 0 0 4px; font-size: 1.5rem; color: #fff; }
.corp-done-band p { margin: 0; }
.corp-done-band-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.corp-done-band .btn-border-ink { background: transparent; border-color: rgba(255, 255, 255, 0.6); color: #fff !important; }
.corp-done-band .btn-border-ink:hover { background: #fff; color: var(--ink) !important; }
@media (max-width: 767.98px) {
  .corp-done-head { flex-direction: column; gap: 12px; }
  .corp-done-steps { grid-template-columns: minmax(0, 1fr); margin-bottom: 40px; }
  .corp-done-band { padding: 22px 18px; }
}
@media (prefers-reduced-motion: reduce) { .corp-done-card:active { transform: none; } }

/* My Bookings, before the account's email is confirmed. */
.account-confirm-note { margin: 0 0 20px; padding: 14px 18px; border-radius: 12px; background: var(--honey-soft, #fdf0c2); color: var(--ink); font-size: 0.9375rem; }

/* Touch screens: a tap fires :hover and leaves the lift stuck, so hover lifts are for mice only. */
@media (hover: none) {
  .btn-common:hover,
  .calendar-button:hover,
  .profile-article:hover,
  .profile-video-frame:hover img,
  .profile-team-card:hover,
  .booking-counsellor-card:hover,
  .footer-social li a:hover { transform: none; }
}

/* Blog cards: "Read more" sits on the same line across a row, however long the title or excerpt. */
.blog-item .blog-item-wrapper { display: flex; flex-direction: column; }
.blog-item .blog-item-text { display: flex; flex: 1; flex-direction: column; }
.blog-item .blog-item-text .services-item-link { align-self: flex-start; margin-top: auto; padding-top: 12px; }
/* Pricing: the blank tag only keeps titles level across a row; stacked cards don't need it. */
@media (max-width: 767.98px) { .pricing-kind-empty { display: none; } }

/* 404: the ways back, then a quiet crisis line. */
.notfound-card { padding: 32px; border-radius: 20px; }
.notfound-lead { margin: 0 0 16px; font-weight: 600; color: var(--ink); }
.notfound-card .detail-cta, .events-empty .detail-cta { justify-content: flex-start; gap: 12px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.notfound-report { margin: 20px 0 16px; font-size: 0.9375rem; color: var(--ink-soft); }
.events-empty .detail-cta { margin-top: 16px; }

/* Open phone menu: the crisis numbers under the Book button. */
.site-nav-crisis { display: none; }
@media (max-width: 991.98px) {
  .site-nav-crisis { display: flex; flex: 1 1 100%; order: 4; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 0; padding: 0 2px; font-size: 0.875rem; color: var(--ink-soft); }  /* last, under the Book button, full width */
  .site-nav-crisis i { color: var(--accent); }
  .site-nav-crisis a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; font-weight: 700; color: var(--accent-dark); }
}

/* Blog list: a count that would leave one post alone on the last row (4, 7…) leads with the
   newest post as a wide card instead, so every row is full. */
@media (min-width: 992px) {
  .blog-list-grid > .blog-item:first-child:nth-last-child(3n + 1) { flex: 0 0 100%; max-width: 100%; }
  .blog-list-grid > .blog-item:first-child:nth-last-child(3n + 1) .blog-item-wrapper { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; }
  .blog-list-grid > .blog-item:first-child:nth-last-child(3n + 1) .blog-item-img img { height: 100%; aspect-ratio: 16 / 10; }
  .blog-list-grid > .blog-item:first-child:nth-last-child(3n + 1) .blog-item-text { padding: 32px 40px; }
  .blog-list-grid > .blog-item:first-child:nth-last-child(3n + 1) h2 { font-size: 1.75rem; }
}

/* Booking, phones: after a time is picked, one tap down to "Your details". */
.booking-next-step { display: none; }
@media (max-width: 991.98px) {
  .booking-next-step:not([hidden]) { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 12px; font-weight: 600; color: var(--accent); }
}

/* Messages after a plain (no-JavaScript) post: inside the page, under the fixed nav. */
.site-messages { padding-top: 112px; }
.site-messages + * { padding-top: 24px !important; }
.site-message { margin: 0 0 8px; padding: 14px 18px; border-radius: var(--radius-sm); font-size: 0.9375rem; font-weight: 600; line-height: 1.5; background: var(--accent-tint); color: var(--accent-dark); }
.site-message.is-error { background: var(--tint-rose); color: var(--danger); }

/* Policy tables on phones: three columns of one-word lines become a stacked list,
   the "Where" cell as a small heading over its rows. */
@media (max-width: 575.98px) {
  .legal-content .legal-table, .legal-content .legal-table tbody, .legal-content .legal-table tr, .legal-content .legal-table td { display: block; width: 100%; }
  .legal-content .legal-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .legal-content .legal-table td { padding: 2px 0; border: 0; }
  /* "Where" is the first of three cells in a row, whether or not it spans rows. */
  .legal-content .legal-table td:first-child:nth-last-child(3) { margin: 14px 0 6px; padding: 8px 12px; border-radius: 8px; background: var(--accent-tint); font-weight: 600; color: var(--ink); }
  .legal-content .legal-table tr { padding: 8px 0; border-bottom: 1px solid var(--line); }
  .legal-content .legal-table td:nth-last-child(2) { font-weight: 600; color: var(--ink); }
}

/* Blog post: the body, disclaimer and author card share one right edge (the body's 36em at 1.125rem). */
.article-main > .author-card,
.article-main > .health-disclaimer,
.article-main > .crisis-note { max-width: 40.5rem; }

/* A quiet "see all" under a section's cards. */
.section-more { margin: 24px 0 0; text-align: center; }
.section-more a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; color: var(--accent); }

/* Booking summary: the three reassurances, under "what happens next". */
.booking-summary-trust { display: grid; gap: 6px; margin: 0 0 14px; padding: 14px 0 0; border-top: 1px solid rgba(20, 24, 31, 0.07); list-style: none; font-size: 0.875rem; color: var(--ink-soft); }
.booking-summary-trust li { display: flex; align-items: flex-start; gap: 8px; }
.booking-summary-trust i { margin-top: 3px; color: var(--accent); }
.booking-summary-trust a { color: var(--accent-dark); }

/* Check-in pages: which check-in this is, in plain sentence case (no ruled uppercase eyebrow). */
.checkin-topic { margin: 0 0 10px; font-size: 0.9375rem; font-weight: 600; color: var(--accent-dark); }