@charset "utf-8";

/*
Theme Name: Mindara - Psychology Counseling & Therapy HTML5 Template.
Author: Metropolitanthemes
Version: 1.0.0

%%%%%%% Table of CSS %%%%%%%

1. General
   1.1 Design Tokens
   1.2 Base
   1.3 Typography
   1.4 Eyebrow And Section Title
   1.5 Buttons And Links
   1.6 Tags, Status And Avatars
   1.7 Grounds And Rhythm
2. Preloader
3. Header
   3.1 Topbar
   3.2 Main Bar
   3.3 Navigation
   3.4 Mega Menus
   3.5 Header Actions
4. Language Picker
5. Offcanvas
6. Subheader
7. Forms And Custom Select
   7.1 Fields
   7.2 Custom Select
8. Hero
9. Strip And Welcome
   9.1 The Strip
   9.2 Welcome
10. Help Cards And Tabs
   10.1 Tabs
   10.2 Help Cards
11. Untangle
12. Self-Check Band
13. Fees And Insurance
14. Therapist Cards
15. Client Words
16. Workshop Cards
17. Journal Cards
18. Home Two
   18.1 Portrait Hero
   18.2 Figures Strip And Approach
   18.3 Mood Weather
   18.4 Ways And Books
   18.5 Talks And Booking
19. Home Three
   19.1 Video Call Hero
   19.2 Pebble Balance
   19.3 Match Teaser
   19.4 Plans
   19.5 Languages
   19.6 App Booking
   19.7 Online FAQ
20. Accordion
21. Sidebar Widgets
22. Shop
   22.1 Product Cards
   22.2 Toolbar And Filters
   22.3 Product Details
   22.4 Cart, Checkout And Wishlist
23. Blog Pages
   23.1 Blog List
   23.2 Article Parts
   23.3 Blog Details
24. Contact, Account And Utility Pages
   24.1 Contact
   24.2 Account
   24.3 Coming Soon And 404
25. Shared Page Parts
26. Booking Steps
   26.1 Visit Steps
   26.2 Booking Choices
   26.3 Confirmation
   26.4 Live Summary
27. Matcher
   27.1 Questions
   27.2 Results
28. Fee Calculators
29. Self-Check
30. Therapist Pages
   30.1 Filters
   30.2 Profile
31. Service Pages
32. Workshop Pages
33. About Page
34. Footer
   34.1 Invitation
   34.2 Columns
   34.3 Crisis Line And Copyright
35. Back To Top
*/

/*======================
1. General
========================*/
/*---- 1.1 Design Tokens ----*/
:root {
  --md-color-primary: #4F6B4C;
  --md-color-primary-rgb: 79, 107, 76;
  --md-color-primary-deep: #3B5239;
  --md-color-primary-soft: #E2E9DD;
  --md-color-apricot: #EE9F7B;
  --md-color-apricot-rgb: 238, 159, 123;
  --md-color-apricot-text: #A4512D;
  --md-color-apricot-soft: #FBE6DB;
  --md-color-lilac: #D8D2EE;
  --md-color-lilac-rgb: 216, 210, 238;
  --md-color-lilac-soft: #EEEBF8;
  --md-color-ground: #F6F1EA;
  --md-color-ground-rgb: 246, 241, 234;
  --md-color-linen: #ECE5D9;
  --md-color-linen-rgb: 236, 229, 217;
  --md-surface: #FFFFFF;
  --md-surface-rgb: 255, 255, 255;
  --md-color-night: #1B2219;
  --md-color-night-rgb: 27, 34, 25;
  --md-color-night-2: #252F22;
  --md-color-ink: #1F241C;
  --md-color-ink-rgb: 31, 36, 28;
  --md-color-body: #5A6056;
  --md-color-muted: #737A6E;
  --md-color-line: #E2DACD;
  --md-color-white: #FFFFFF;
  --md-color-white-rgb: 255, 255, 255;
  --md-on-primary: #FFFFFF;
  --md-on-apricot: #2A1A12;
  --md-tonal: rgba(79, 107, 76, 0.08);
  --md-tonal-2: rgba(79, 107, 76, 0.15);
  --md-color-success: #3F7A4A;
  --md-color-error: #B3362A;
  --md-ff-heading: 'Petrona', Georgia, serif;
  --md-ff-body: 'Lexend', Arial, sans-serif;
  --md-fs-h1: clamp(42px, 4.4vw, 4.75rem);
  --md-fs-h2: clamp(32px, 3vw, 3.25rem);
  --md-fs-h3: clamp(22px, 1.6vw, 1.625rem);
  --md-fs-h4: 1.25rem;
  --md-fs-h5: 1.125rem;
  --md-fs-h6: 1rem;
  --md-fs-body: 1rem;
  --md-fs-lead: 1.125rem;
  --md-fs-small: 0.875rem;
  --md-radius: 24px;
  --md-radius-sm: 14px;
  --md-radius-lg: 36px;
  --md-pebble: 160px 32px 160px 32px;
  --md-pebble-alt: 32px 160px 32px 160px;
  --md-shadow: 0 18px 44px rgba(31, 36, 28, 0.08);
  --md-shadow-lg: 0 30px 80px rgba(31, 36, 28, 0.14);
  --md-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --md-header-h: 86px;
  --gl-1: 238, 159, 123;
  --gl-2: 216, 210, 238;
  --gl-3: 226, 233, 221;
  --gl-alpha: 0.55;
}
[data-theme="dark"] {
  --md-on-primary: #121611;
  --md-color-primary: #93B58B;
  --md-color-primary-rgb: 147, 181, 139;
  --md-color-primary-deep: #A9C6A1;
  --md-color-primary-soft: #263123;
  --md-color-apricot-text: #F2B394;
  --md-color-apricot-soft: #3A2A21;
  --md-color-lilac-soft: #26243A;
  --md-color-ground: #121611;
  --md-color-ground-rgb: 18, 22, 17;
  --md-color-linen: #1A2018;
  --md-color-linen-rgb: 26, 32, 24;
  --md-surface: #1C231A;
  --md-surface-rgb: 28, 35, 26;
  --md-color-night: #0C100B;
  --md-color-night-rgb: 12, 16, 11;
  --md-color-night-2: #151B13;
  --md-color-ink: #EEF0E8;
  --md-color-ink-rgb: 238, 240, 232;
  --md-color-body: #B8BDB0;
  --md-color-muted: #9AA192;
  --md-color-line: rgba(255, 255, 255, 0.1);
  --md-tonal: rgba(255, 255, 255, 0.07);
  --md-tonal-2: rgba(255, 255, 255, 0.13);
  --md-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
  --md-shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.5);
  --gl-1: 238, 159, 123;
  --gl-2: 120, 108, 170;
  --gl-3: 79, 107, 76;
  --gl-alpha: 0.4;
}
/* a theme change eases every colour instead of snapping */
html.md-theme-shift,
html.md-theme-shift *,
html.md-theme-shift *::before,
html.md-theme-shift *::after {
  transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease, fill 0.5s ease !important;
}

/*---- 1.2 Base ----*/
html {
  overflow-x: clip;
  scroll-behavior: auto;
}
body {
  margin: 0;
  background: var(--md-color-ground);
  color: var(--md-color-body);
  font-family: var(--md-ff-body);
  font-size: var(--md-fs-body);
  font-weight: 300;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img {
  max-width: 100%;
  height: auto;
}
a {
  color: var(--md-color-primary);
  text-decoration: none;
  transition: color 0.3s var(--md-ease);
}
a:hover {
  color: var(--md-color-apricot-text);
}
button {
  font-family: inherit;
}
.md-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}
::selection {
  background: var(--md-color-apricot);
  color: var(--md-on-apricot);
}
.skip-link {
  position: absolute;
  top: -60px;
  inset-inline-start: 16px;
  z-index: 2000;
  padding: 10px 18px;
  border-radius: 40px;
  background: var(--md-color-primary);
  color: var(--md-on-primary);
  font-weight: 500;
}
.skip-link:focus {
  top: 12px;
  color: #FFFFFF;
}
.visually-hidden-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.main-root {
  display: block;
}
.container {
  position: relative;
}

/*---- 1.3 Typography ----*/
h1, h2, h3, h4, h5, h6,
.md-h1, .md-h2, .md-h3, .md-h4, .md-h5, .md-h6 {
  margin: 0 0 0.5em;
  color: var(--md-color-ink);
  font-family: var(--md-ff-heading);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.012em;
}
h1, .md-h1 {
  font-size: var(--md-fs-h1);
  line-height: 1.04;
}
h2, .md-h2 {
  font-size: var(--md-fs-h2);
  line-height: 1.08;
}
h3, .md-h3 {
  font-size: var(--md-fs-h3);
  font-weight: 600;
}
h4, .md-h4,
h5, .md-h5,
h6, .md-h6 {
  font-family: var(--md-ff-body);
  font-weight: 500;
  letter-spacing: 0;
}
h4, .md-h4 {
  font-size: var(--md-fs-h4);
}
h5, .md-h5 {
  font-size: var(--md-fs-h5);
}
h6, .md-h6 {
  font-size: var(--md-fs-h6);
}
/* the accent word: Petrona's italic in apricot */
h1 em, h2 em, h3 em, .md-h2 em, .md-h1 em {
  font-style: italic;
  font-weight: 500;
  color: var(--md-color-apricot-text);
}
/* the breath line under a title's accent word (drawn on by the reveal) */
h1 em, h2 em, .md-h1 em, .md-h2 em {
  padding-bottom: 0.06em;
  background: url(../img/shapes/breath-under.png) no-repeat 0 100% / 100% 0.3em;
}
p {
  margin: 0 0 1.1em;
}
strong, b {
  color: var(--md-color-ink);
  font-weight: 500;
}
.md-lead {
  font-size: var(--md-fs-lead);
  line-height: 1.75;
}
.md-figure {
  font-family: var(--md-ff-heading);
  font-weight: 500;
  color: var(--md-color-ink);
  font-variant-numeric: lining-nums;
}

/*---- 1.4 Eyebrow And Section Title ----*/
/* the eyebrow: tracked caps after a short apricot breath line (a soft wave) */
.md-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  color: var(--md-color-primary);
  font-family: var(--md-ff-body);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.md-eyebrow::before {
  content: "";
  flex-shrink: 0;
  width: 34px;
  height: 10px;
  background: url(../img/shapes/breath-line.png) no-repeat 0 50% / 34px 10px;
  transform: scaleX(var(--draw, 1));
  transform-origin: 0 50%;
}
.md-eyebrow.is-light {
  color: var(--md-color-apricot);
}
.md-eyebrow.is-centered {
  justify-content: center;
}
.md-section-head {
  margin-bottom: 56px;
}
.md-section-head.is-centered {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.md-section-head.is-split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.md-section-head.is-split .head-copy {
  max-width: 720px;
}
.md-section-head.is-split .head-side {
  max-width: 420px;
  margin-bottom: 8px;
}
.md-section-head h2 {
  margin-bottom: 0;
}
.md-section-head .md-lead {
  margin: 18px 0 0;
}

/*---- 1.5 Buttons And Links ----*/
.md-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 56px;
  padding: 0 28px;
  border: 0;
  border-radius: 60px;
  background: var(--md-color-primary);
  color: var(--md-on-primary);
  font-family: var(--md-ff-body);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  transition: background-color 0.35s var(--md-ease), color 0.35s var(--md-ease), box-shadow 0.35s var(--md-ease), transform 0.35s var(--md-ease);
}
.md-btn:hover {
  background: var(--md-color-primary-deep);
  color: #FFFFFF;
  box-shadow: 0 14px 30px rgba(var(--md-color-primary-rgb), 0.28);
  transform: translateY(-2px);
}
[data-theme="dark"] .md-btn {
  color: var(--md-color-night);
}
[data-theme="dark"] .md-btn:hover {
  color: var(--md-color-night);
}
.md-btn.is-apricot {
  background: var(--md-color-apricot);
  color: var(--md-on-apricot);
}
.md-btn.is-apricot:hover {
  background: #F4B394;
  color: var(--md-on-apricot);
  box-shadow: 0 14px 30px rgba(var(--md-color-apricot-rgb), 0.35);
}
.md-btn.is-tonal {
  background: var(--md-tonal);
  color: var(--md-color-ink);
}
.md-btn.is-tonal:hover {
  background: var(--md-tonal-2);
  color: var(--md-color-ink);
  box-shadow: none;
}
.md-btn.is-tonal .btn-ic,
.md-btn.is-tonal > i {
  color: var(--md-color-apricot-text);
}
.md-btn.is-glass {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.md-btn.is-glass:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
  box-shadow: none;
}
.md-btn.is-sm {
  height: 44px;
  padding: 0 20px;
  font-size: 0.875rem;
}
/* the house double arrow: one leaves, the next slides in */
.btn-ic {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
  overflow: hidden;
  font-size: 13px;
  line-height: 14px;
}
.btn-ic i {
  position: absolute;
  inset: 0;
  transition: transform 0.45s var(--md-ease);
}
.btn-ic i + i {
  transform: translateX(-140%);
}
.md-btn:hover .btn-ic i:first-child,
.md-link:hover .btn-ic i:first-child {
  transform: translateX(140%);
}
.md-btn:hover .btn-ic i + i,
.md-link:hover .btn-ic i + i {
  transform: translateX(0);
}
.md-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--md-color-ink);
  font-weight: 500;
  font-size: 0.95rem;
  background: linear-gradient(var(--md-color-apricot), var(--md-color-apricot)) no-repeat 0 100% / 0 2px;
  padding-bottom: 3px;
  transition: background-size 0.45s var(--md-ease), color 0.3s var(--md-ease);
}
.md-link:hover {
  color: var(--md-color-ink);
  background-size: 100% 2px;
}
.md-link > i,
.md-link .btn-ic {
  color: var(--md-color-apricot-text);
}
.md-btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

/*---- 1.6 Tags, Status And Avatars ----*/
.md-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 40px;
  background: var(--md-color-apricot-soft);
  color: var(--md-color-apricot-text);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.md-tag.is-sage {
  background: var(--md-color-primary-soft);
  color: var(--md-color-primary-deep);
}
.md-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: var(--md-color-ink);
}
.md-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--md-color-muted);
}
.md-status.is-open::before {
  background: #5FB36B;
  box-shadow: 0 0 0 4px rgba(95, 179, 107, 0.2);
  animation: md-pulse 2.4s ease-in-out infinite;
}
@keyframes md-pulse {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(95, 179, 107, 0.2);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(95, 179, 107, 0.06);
  }
}
/* overlapping round faces, a count bubble and two short lines */
.md-avatars {
  display: flex;
  align-items: center;
  gap: 16px;
  width: fit-content;
}
.md-avatars .faces {
  display: flex;
}
.md-avatars .faces img,
.md-avatars .faces .more {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 3px solid var(--md-color-ground);
  object-fit: cover;
  object-position: center top;
}
.md-avatars .faces > * + * {
  margin-inline-start: -14px;
}
.md-avatars .faces .more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--md-color-apricot);
  color: var(--md-on-apricot);
  font-size: 0.8rem;
  font-weight: 600;
}
.md-avatars .avatars-text {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--md-color-body);
}
.md-avatars .avatars-text b {
  display: block;
  color: var(--md-color-ink);
  font-weight: 500;
}

/*---- 1.7 Grounds And Rhythm ----*/
.sec-pt-120 {
  padding-top: 120px;
}
.sec-pb-120 {
  padding-bottom: 120px;
}
.sec-pt-90 {
  padding-top: 90px;
}
.sec-pb-90 {
  padding-bottom: 90px;
}
.md-ground-surface {
  background: var(--md-surface);
}
.md-ground-linen {
  background: var(--md-color-linen);
}
.md-ground-lilac {
  background: var(--md-color-lilac-soft);
}
/* night bands stay dark in both themes */
.md-night {
  position: relative;
  background: var(--md-color-night);
  color: rgba(255, 255, 255, 0.72);
}
.md-night h1, .md-night h2, .md-night h3, .md-night h4, .md-night h5, .md-night h6,
.md-night strong, .md-night b {
  color: #FFFFFF;
}
.md-night h2 em, .md-night h3 em {
  color: var(--md-color-apricot);
}
.md-night .md-eyebrow {
  color: var(--md-color-apricot);
}
.md-night .md-link {
  color: #FFFFFF;
}
/* one photo band style across the site: the photograph covers the band under a
   moss-night to sage wash, copy turns white */
.md-photo-band {
  position: relative;
  overflow: clip;
  color: rgba(255, 255, 255, 0.78);
}
.md-photo-band > .band-img {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.md-photo-band > .band-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.md-photo-band > .band-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(27, 34, 25, 0.95) 0%, rgba(43, 58, 41, 0.86) 48%, rgba(79, 107, 76, 0.55) 100%);
}
.md-photo-band > .container {
  position: relative;
  z-index: 2;
}
.md-photo-band h2, .md-photo-band h3, .md-photo-band b, .md-photo-band strong {
  color: #FFFFFF;
}
.md-photo-band h2 em {
  color: var(--md-color-apricot);
}
.md-photo-band .md-eyebrow {
  color: var(--md-color-apricot);
}
/* a canvas texture layer (WebGL), under the section's content */
.md-gl {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.md-gl.is-on {
  opacity: 1;
}
/* photographs: the pebble cut (river stones) */
.md-pebble {
  border-radius: var(--md-pebble);
  overflow: hidden;
}
.md-pebble.is-alt {
  border-radius: var(--md-pebble-alt);
}
.md-pebble img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.md-zoom img {
  transition: transform 0.9s var(--md-ease);
  transform-origin: center top;
}
.md-zoom:hover img {
  transform: scale(1.05);
}

/*======================
2. Preloader
========================*/
/* Breathing Window: a ring breathes in round the mark, holds, then breathes out
   and opens as a round window onto the page (the hole is a gradient mask whose
   radius the script grows). Without JavaScript the overlay never shows. */
.md-preloader {
  --hole: 0px;
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
  background: var(--md-color-ground);
  -webkit-mask-image: radial-gradient(circle at 50% 46%, transparent var(--hole), #000 calc(var(--hole) + 1.5px));
  mask-image: radial-gradient(circle at 50% 46%, transparent var(--hole), #000 calc(var(--hole) + 1.5px));
}
.no-js .md-preloader,
.md-preloader.is-done {
  display: none;
}
.pre-ring {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(var(--md-color-primary-rgb), 0.28);
}
.pre-halo {
  position: absolute;
  inset: -46px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--md-color-apricot-rgb), 0.38) 0%, rgba(var(--md-color-lilac-rgb), 0.3) 42%, rgba(var(--md-color-lilac-rgb), 0) 70%);
  transform: scale(0.55);
}
.pre-mark {
  position: relative;
  width: 104px;
  height: 104px;
  opacity: 0;
}
.pre-cue {
  position: relative;
  width: 260px;
  height: 20px;
  margin: 0;
  color: var(--md-color-primary);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-align: center;
}
.pre-cue span {
  position: absolute;
  inset: 0;
  white-space: nowrap;
  opacity: 0;
}

/*======================
3. Header
========================*/
/*---- 3.1 Topbar ----*/
.md-header {
  position: relative;
  z-index: 1000;
}
.md-header.is-over {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.md-topbar {
  font-size: 0.82rem;
  line-height: 1.3;
  color: var(--md-color-body);
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 46px;
}
.top-hours {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}
.top-hours .office-line {
  color: var(--md-color-muted);
}
.top-contact {
  display: flex;
  align-items: center;
  gap: 26px;
}
.top-contact a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--md-color-body);
}
.top-contact a i {
  color: var(--md-color-apricot-text);
  font-size: 0.8rem;
}
.top-contact a:hover {
  color: var(--md-color-primary);
}

/*---- 3.2 Main Bar ----*/
.header-bar {
  position: relative;
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 26px;
  height: var(--md-header-h);
  padding: 0 14px 0 26px;
  border-radius: 24px;
  background: var(--md-surface);
  box-shadow: 0 14px 40px rgba(31, 36, 28, 0.07);
  transition: box-shadow 0.4s var(--md-ease), border-radius 0.4s var(--md-ease);
}
.md-logo {
  flex-shrink: 0;
  display: block;
}
.md-logo img {
  display: block;
  width: auto;
  height: 50px;
}
.md-logo .logo-light,
[data-theme="dark"] .md-logo .logo-dark {
  display: none;
}
[data-theme="dark"] .md-logo .logo-light {
  display: block;
}
/* the bar docks at the top of the window once the page scrolls */
.md-header.is-scrolled .header-bar {
  position: fixed;
  top: 12px;
  left: 0;
  right: 0;
  animation: md-dock 0.55s var(--md-ease);
}
.md-header.is-scrolled .header-inner {
  box-shadow: 0 18px 50px rgba(31, 36, 28, 0.14);
}
.md-header.is-scrolled {
  padding-bottom: var(--md-header-h);
}
@keyframes md-dock {
  from {
    transform: translateY(-120%);
  }
  to {
    transform: translateY(0);
  }
}

/*---- 3.3 Navigation ----*/
.md-nav {
  flex: 1;
  display: flex;
  justify-content: center;
}
.md-nav > ul {
  display: flex;
  align-items: center;
  gap: 2px;
}
.md-nav li {
  position: relative;
}
.md-nav > ul > li {
  display: flex;
  align-items: center;
  height: var(--md-header-h);
}
.md-nav > ul > li > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  border-radius: 40px;
  color: var(--md-color-ink);
  font-size: 0.94rem;
  font-weight: 400;
  white-space: nowrap;
}
.md-nav > ul > li > a > i {
  font-size: 0.6rem;
  color: var(--md-color-muted);
  transition: transform 0.35s var(--md-ease);
}
.md-nav > ul > li:hover > a,
.md-nav > ul > li.active > a {
  color: var(--md-color-primary);
}
.md-nav > ul > li.active > a {
  font-weight: 500;
}
.md-nav > ul > li:hover > a > i {
  transform: rotate(180deg);
  color: var(--md-color-primary);
}
/* first-level panels hang 14px below the bar, with a bridge across the gap */
.md-nav .sub-menu,
.md-nav .mega-menu {
  position: absolute;
  top: calc(100% + 14px);
  inset-inline-start: -12px;
  z-index: 50;
  min-width: 250px;
  margin: 0;
  padding: 12px;
  border-radius: 20px;
  background: var(--md-surface);
  box-shadow: var(--md-shadow-lg);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.35s var(--md-ease), transform 0.35s var(--md-ease), visibility 0.35s;
}
.md-nav .sub-menu::before,
.md-nav .mega-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 20px;
}
.md-nav li:hover > .sub-menu,
.md-nav li:focus-within > .sub-menu,
.md-nav li:hover > .mega-menu,
.md-nav li:focus-within > .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.md-nav .sub-menu li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  border-radius: 12px;
  color: var(--md-color-ink);
  font-size: 0.92rem;
  white-space: nowrap;
}
.md-nav .sub-menu li a i {
  font-size: 0.6rem;
  color: var(--md-color-muted);
}
.md-nav .sub-menu li:hover > a,
.md-nav .sub-menu li.active > a {
  background: var(--md-tonal);
  color: var(--md-color-primary);
}
/* the third level opens to the right */
.md-nav .sub-menu .sub-menu {
  top: -12px;
  inset-inline-start: calc(100% + 12px);
}
.md-nav .sub-menu .sub-menu::before {
  left: auto;
  right: 100%;
  top: 0;
  bottom: 0;
  width: 14px;
  height: auto;
}

/*---- 3.4 Mega Menus ----*/
.md-nav .mega-menu.is-homes {
  inset-inline-start: -20px;
  width: 780px;
  padding: 18px;
}
.mega-homes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.home-card {
  display: block;
  padding: 8px 8px 14px;
  border-radius: 18px;
  color: var(--md-color-ink);
  transition: background-color 0.3s var(--md-ease);
}
.home-card:hover,
.mega-homes .active .home-card {
  background: var(--md-tonal);
  color: var(--md-color-ink);
}
.home-shot {
  display: block;
  height: 150px;
  overflow: hidden;
  border-radius: 14px;
  background: var(--md-color-linen);
}
.home-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.8s var(--md-ease);
}
.home-card:hover .home-shot img {
  transform: scale(1.05);
}
.home-name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 6px 0;
  font-size: 0.85rem;
  color: var(--md-color-muted);
}
.home-name b {
  color: var(--md-color-ink);
  font-weight: 500;
  font-size: 0.95rem;
}
.md-nav .mega-menu.is-pages {
  inset-inline-start: -260px;
  display: grid;
  grid-template-columns: 1fr 250px;
  gap: 20px;
  width: 840px;
  padding: 22px;
}
.mega-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 22px;
}
.mega-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding: 0 10px;
  color: var(--md-color-muted);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.mega-title i {
  color: var(--md-color-apricot-text);
}
.mega-col a {
  display: block;
  padding: 7px 10px;
  border-radius: 10px;
  color: var(--md-color-ink);
  font-size: 0.92rem;
}
.mega-col li:hover a,
.mega-col li.active a {
  background: var(--md-tonal);
  color: var(--md-color-primary);
}
.mega-promo {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  background: var(--md-color-linen);
  color: var(--md-color-body);
}
.promo-img {
  display: block;
  height: 130px;
  overflow: hidden;
}
.promo-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.promo-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 16px 18px 18px;
  font-size: 0.85rem;
}
.promo-body b {
  font-family: var(--md-ff-heading);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.2;
}
.promo-body .md-link {
  margin-top: 6px;
  font-size: 0.85rem;
}

/*---- 3.5 Header Actions ----*/
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.head-round {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--md-tonal);
  color: var(--md-color-ink);
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s var(--md-ease), color 0.3s var(--md-ease);
}
.head-round:hover {
  background: var(--md-tonal-2);
  color: var(--md-color-primary);
}
.head-count {
  position: absolute;
  top: -2px;
  inset-inline-end: -2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 20px;
  background: var(--md-color-apricot);
  color: var(--md-on-apricot);
  font-size: 0.68rem;
  font-weight: 600;
}
.md-theme-toggle .ti-sun,
[data-theme="dark"] .md-theme-toggle .ti-moon {
  display: none;
}
[data-theme="dark"] .md-theme-toggle .ti-sun {
  display: inline-block;
}
.md-menu-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
}
.md-menu-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.md-menu-toggle span:nth-child(2) {
  width: 12px;
  align-self: flex-end;
  margin-inline-end: 15px;
}

/*======================
4. Language Picker
========================*/
/* Language picker: a flag and a code; the menu lists the languages that read left to right and right to left.
   The demo copy stays in English, and a right-to-left language turns the layout around. */
.md-lang {
  position: relative;
  flex-shrink: 0;
}
.md-lang .lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 40px;
  background: var(--md-tonal);
  color: var(--md-color-ink);
  font-family: var(--md-ff-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.md-lang .lang-btn:hover,
.md-lang .lang-btn[aria-expanded="true"] {
  background: var(--md-tonal-2);
  color: var(--md-color-primary);
}
.md-lang .lang-btn > i {
  font-size: 9px;
  transition: transform 0.3s ease;
}
.md-lang .lang-btn[aria-expanded="true"] > i {
  transform: rotate(180deg);
}
.md-lang .flag {
  flex-shrink: 0;
  width: 22px;
  height: 16px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.md-lang.is-icon .lang-btn {
  height: 48px;
  padding: 0 15px;
  background: var(--md-tonal);
  color: var(--md-color-ink);
}
.md-lang.is-icon .lang-btn:hover,
.md-lang.is-icon .lang-btn[aria-expanded="true"] {
  background: var(--md-tonal-2);
  color: var(--md-color-primary);
}
.md-lang .lang-menu {
  position: absolute;
  top: calc(100% + 12px);
  inset-inline-end: 0;
  z-index: 1300;
  width: 248px;
  padding: 10px;
  border-radius: 18px;
  background: var(--md-surface);
  box-shadow: var(--md-shadow-lg);
  font-family: var(--md-ff-body);
  text-align: start;
  white-space: normal;
}
.md-lang.is-up .lang-menu {
  top: auto;
  bottom: calc(100% + 12px);
}
.md-lang.is-start .lang-menu {
  inset-inline-start: 0;
  inset-inline-end: auto;
}
.md-lang .lang-menu[hidden] {
  display: none;
}
.md-lang .lang-group {
  margin: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--md-color-muted);
}
.md-lang .lang-menu ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.md-lang .lang-menu ul + .lang-group {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--md-color-line);
}
.md-lang .lang-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--md-color-ink);
  font-family: var(--md-ff-body);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.md-lang .lang-item small {
  margin-inline-start: auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--md-color-muted);
}
.md-lang .lang-item i {
  width: 12px;
  font-size: 11px;
  color: var(--md-color-primary);
  opacity: 0;
}
.md-lang .lang-item:hover,
.md-lang .lang-item[aria-pressed="true"] {
  background: var(--md-tonal);
}
.md-lang .lang-item[aria-pressed="true"] {
  font-weight: 600;
}
.md-lang .lang-item[aria-pressed="true"] i {
  opacity: 1;
}
.md-lang .lang-note {
  margin: 10px 10px 4px;
  padding-top: 10px;
  border-top: 1px solid var(--md-color-line);
  font-size: 12px;
  line-height: 1.5;
  color: var(--md-color-muted);
}

/*======================
5. Offcanvas
========================*/
.md-offcanvas {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 1500;
  display: flex;
  flex-direction: column;
  width: min(420px, 92vw);
  padding: 28px 30px 30px;
  background: var(--md-color-night);
  color: rgba(255, 255, 255, 0.72);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
  transform: translateX(105%);
  visibility: hidden;
  transition: transform 0.55s var(--md-ease), visibility 0.55s;
}
.md-offcanvas.is-open {
  transform: translateX(0);
  visibility: visible;
}
.md-offcanvas-overlay {
  position: fixed;
  inset: 0;
  z-index: 1400;
  background: rgba(12, 16, 11, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s;
}
.md-offcanvas-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
body.oc-open {
  overflow: hidden;
}
.offcanvas-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
}
.offcanvas-head img {
  display: block;
  height: 44px;
  width: auto;
}
.offcanvas-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.offcanvas-close:hover {
  background: var(--md-color-apricot);
  color: var(--md-on-apricot);
}
.oc-group + .oc-group {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.oc-label {
  display: block;
  margin-bottom: 10px;
  color: var(--md-color-apricot);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.oc-group ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 14px;
}
.oc-group a {
  display: block;
  padding: 5px 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.92rem;
}
.oc-group a:hover,
.oc-group a.is-current {
  color: var(--md-color-apricot);
}
.offcanvas-foot {
  margin-top: auto;
  padding-top: 30px;
}
.offcanvas-foot p {
  margin: 0 0 8px;
  font-size: 0.9rem;
}
.oc-contact {
  display: block;
  color: #FFFFFF;
  font-size: 0.95rem;
}
.oc-contact:hover {
  color: var(--md-color-apricot);
}
.offcanvas-foot .md-social {
  margin-top: 20px;
}
/* social discs (shared with the footer) */
.md-social {
  display: flex;
  gap: 10px;
}
.md-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--md-tonal);
  color: var(--md-color-ink);
  font-size: 0.9rem;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.md-social.is-dark a {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}
.md-social a:hover {
  background: var(--md-color-apricot);
  color: var(--md-on-apricot);
  transform: translateY(-3px);
}

/*======================
6. Subheader
========================*/
.md-subheader {
  position: relative;
  overflow: clip;
  padding: calc(var(--md-header-h) + 46px + 70px) 0 90px;
  background: var(--md-color-ground);
}
.md-subheader .md-gl {
  --gl-alpha: 0.7;
}
.md-subheader > .container {
  position: relative;
  z-index: 2;
}
.sub-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  align-items: center;
  gap: 60px;
}
.sub-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  font-size: 0.85rem;
}
.sub-crumbs li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--md-color-muted);
}
.sub-crumbs li + li::before {
  content: "";
  width: 18px;
  height: 6px;
  background: url(../img/shapes/breath-line.png) no-repeat 0 50% / 18px 6px;
}
.sub-crumbs a {
  color: var(--md-color-body);
}
.sub-crumbs a:hover {
  color: var(--md-color-primary);
}
.sub-crumbs li[aria-current] {
  color: var(--md-color-primary);
  font-weight: 500;
}
.sub-title {
  margin-bottom: 18px;
}
.sub-lead {
  max-width: 560px;
  margin: 0;
  font-size: var(--md-fs-lead);
}
.sub-photo {
  height: 340px;
  border-radius: var(--md-pebble);
  overflow: hidden;
  box-shadow: var(--md-shadow-lg);
}
.sub-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*======================
7. Forms And Custom Select
========================*/
/*---- 7.1 Fields ----*/
.md-field {
  position: relative;
  margin-bottom: 0;
}
.md-field > label,
.md-label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--md-ff-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-ink);
}
.md-field .req {
  color: var(--md-color-apricot-text);
}
.md-input {
  position: relative;
}
.md-input input,
.md-input textarea,
.md-field input[type="text"],
.md-field input[type="email"],
.md-field input[type="tel"],
.md-field input[type="password"],
.md-field input[type="number"],
.md-field input[type="date"],
.md-field textarea {
  display: block;
  width: 100%;
  min-height: 58px;
  padding: 14px 20px 14px 52px;
  border: 1px solid var(--md-color-line);
  border-radius: var(--md-radius-sm);
  background: var(--md-surface);
  color: var(--md-color-ink);
  font-family: var(--md-ff-body);
  font-size: 15px;
  transition: border-color 0.3s var(--md-ease), box-shadow 0.3s var(--md-ease);
}
.md-field textarea,
.md-input textarea {
  min-height: 150px;
  resize: vertical;
}
.md-input input:focus,
.md-input textarea:focus,
.md-field input:focus,
.md-field textarea:focus {
  outline: none;
  border-color: var(--md-color-primary);
  box-shadow: 0 0 0 3px rgba(var(--md-color-primary-rgb), 0.15);
}
::placeholder {
  color: #9A9C92;
  opacity: 1;
}
/* every field leads with its icon */
.md-input > i {
  position: absolute;
  left: 21px;
  top: 21px;
  z-index: 2;
  color: var(--md-color-apricot-text);
  font-size: 15px;
  pointer-events: none;
}
.md-field.is-invalid input,
.md-field.is-invalid textarea,
.md-field.is-invalid .select-button {
  border-color: #C0392B;
}
.md-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 15px;
  color: var(--md-color-body);
}
.md-check input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  accent-color: var(--md-color-apricot-text);
}
.md-check b {
  color: var(--md-color-ink);
  font-weight: 500;
}
.form-status {
  margin: 14px 0 0;
  font-size: 15px;
}
.form-status:empty {
  display: none;
}
.form-status.is-success {
  color: #2E7D4F;
}
.form-status.is-error {
  color: #B23A2B;
}
/* minus / plus around a number */
/* a tonal pill: round minus / plus either side of the number */
.md-stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 52px;
  padding: 5px;
  border-radius: 40px;
  background: var(--md-tonal);
}
.md-stepper button {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: var(--md-surface);
  color: var(--md-color-apricot-text);
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.3s var(--md-ease), color 0.3s var(--md-ease);
}
.md-stepper button:hover {
  background: var(--md-color-primary);
  color: var(--md-on-primary);
}
.md-stepper button:disabled {
  opacity: 0.3;
  pointer-events: none;
}
.md-stepper input {
  width: 50px;
  height: 100%;
  border: 0;
  background: transparent;
  text-align: center;
  font-family: var(--md-ff-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--md-color-ink);
  -moz-appearance: textfield;
}
/* inside a labelled field the number keeps the stepper's own look */
.md-field .md-stepper input {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.md-stepper input::-webkit-outer-spin-button,
.md-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* option cards (radio / checkbox wrapped in a label) */
.md-choice {
  position: relative;
  display: block;
  cursor: pointer;
}
.md-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.md-choice .choice-face {
  display: block;
  height: 100%;
  padding: 18px 22px;
  border-radius: var(--md-radius-sm);
  background: var(--md-surface);
  transition: background-color 0.3s var(--md-ease), box-shadow 0.3s var(--md-ease);
}
.md-choice:hover .choice-face {
  background: var(--md-tonal-2);
}
.md-choice input:checked + .choice-face {
  background: rgba(var(--md-color-primary-rgb), 0.1);
  box-shadow: inset 0 0 0 1.5px var(--md-color-primary);
}
.md-choice input:focus-visible + .choice-face {
  outline: 2px solid var(--md-color-primary);
  outline-offset: 2px;
}
.md-choice b {
  display: block;
  font-family: var(--md-ff-heading);
  font-weight: 600;
  color: var(--md-color-ink);
}
.md-choice small {
  display: block;
  font-size: 14px;
  color: var(--md-color-body);
}

/*---- 7.2 Custom Select ----*/
.md-input.md-select .select-button {
  padding-left: 52px;
}
/* The native <select> stays in the form; JS draws the button + listbox beside it */
.md-select {
  position: relative;
}
.md-select > select {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
}
.md-select .select-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 58px;
  padding: 12px 20px;
  border: 1px solid var(--md-color-line);
  border-radius: var(--md-radius-sm);
  background: var(--md-surface);
  color: var(--md-color-ink);
  font-family: var(--md-ff-body);
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.3s var(--md-ease);
}
.md-select.is-compact .select-button {
  min-height: 48px;
  background: var(--md-color-linen);
  border-color: transparent;
}
.md-select .select-button i {
  color: var(--md-color-apricot-text);
  font-size: 11px;
  transition: transform 0.3s var(--md-ease);
}
.md-select.is-open .select-button {
  border-color: var(--md-color-primary);
}
.md-select.is-open .select-button i {
  transform: rotate(180deg);
}
.md-select .select-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.md-select .select-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 290px;
  margin: 0;
  padding: 8px 0;
  overflow-y: auto;
  list-style: none;
  border-top: 3px solid var(--md-color-primary);
  background: var(--md-surface);
  box-shadow: 0 24px 50px rgba(var(--md-color-night-rgb), 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.3s var(--md-ease), transform 0.3s var(--md-ease), visibility 0.3s;
  scrollbar-width: thin;
}
.md-select.opens-up .select-list {
  top: auto;
  bottom: calc(100% + 6px);
}
.md-select.is-open .select-list {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.md-select .select-list:focus {
  outline: none;
}
.md-select .select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 20px;
  color: var(--md-color-ink);
  font-size: 15px;
  cursor: pointer;
}
.md-select .select-option.is-focused {
  background: var(--md-color-linen);
}
.md-select .select-option.is-selected {
  color: var(--md-color-apricot-text);
  font-weight: 500;
}
.md-select .select-option.is-disabled {
  opacity: 0.4;
  cursor: default;
}
.md-select .option-meta {
  color: var(--md-color-body);
  font-size: 12px;
  white-space: nowrap;
}

/* checkboxes: a rounded box in the template's colours, filled and ticked when checked */
.md-check input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  border: 1.5px solid var(--md-color-muted);
  border-radius: 6px;
  background: var(--md-surface) no-repeat center / 13px 13px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.md-check input[type="checkbox"]:hover {
  border-color: var(--md-color-primary);
  box-shadow: 0 0 0 4px rgba(var(--md-color-primary-rgb), 0.16);
}
.md-check input[type="checkbox"]:checked {
  border-color: var(--md-color-primary);
  background-color: var(--md-color-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 6.3 4.9 8.7 9.6 3.6' fill='none' stroke='%23FFFFFF' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.md-check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--md-color-primary);
  outline-offset: 2px;
}

/*======================
8. Hero
========================*/
.md-hero {
  position: relative;
  overflow: clip;
  padding: calc(var(--md-header-h) + 46px + 54px) 0 96px;
  background: var(--md-color-ground);
}
.md-hero > .container {
  position: relative;
  z-index: 2;
}
/* faint breath rings behind the photograph */
.hero-rings {
  position: absolute;
  top: 70px;
  right: -6%;
  z-index: 1;
  width: 900px;
  height: 900px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 62px, rgba(var(--md-color-primary-rgb), 0.09) 63px 64px);
  -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%);
  mask-image: radial-gradient(circle, #000 30%, transparent 70%);
  pointer-events: none;
}
.hero-slider {
  overflow: visible;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  align-items: center;
  gap: 64px;
}
.hero-title {
  margin-bottom: 26px;
  font-size: clamp(44px, 4.9vw, 5.3rem);
  line-height: 1.02;
}
.hero-title span {
  display: block;
  white-space: nowrap;
}
.hero-lead {
  max-width: 520px;
  margin-bottom: 36px;
  font-size: var(--md-fs-lead);
}
.hero-photo {
  position: relative;
}
.hero-img {
  height: 600px;
  box-shadow: var(--md-shadow-lg);
}
/* box breathing over the photograph */
.hero-breath {
  position: absolute;
  left: calc(52% - 70px);
  bottom: 168px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 24px 14px 14px;
  border-radius: 60px;
  background: rgba(var(--md-surface-rgb), 0.9);
  box-shadow: var(--md-shadow);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.breath-dot {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--md-color-apricot-soft);
}
.breath-dot span {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--md-color-apricot) 0%, rgba(var(--md-color-apricot-rgb), 0.55) 60%, rgba(var(--md-color-apricot-rgb), 0.15) 100%);
  transform: scale(0.62);
  transition: transform 4s cubic-bezier(0.45, 0, 0.55, 1);
}
.hero-breath.is-in .breath-dot span,
.hero-breath.is-hold .breath-dot span {
  transform: scale(1);
}
.hero-breath.is-out .breath-dot span,
.hero-breath.is-rest .breath-dot span {
  transform: scale(0.45);
}
.breath-copy {
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--md-color-body);
}
.breath-copy b {
  font-family: var(--md-ff-heading);
  font-size: 1.1rem;
  font-weight: 600;
}
/* the team on one side, the slider's controls on the other */
.hero-foot {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-top: 44px;
}
.hero-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}
.hero-arrow,
.rail-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 50%;
  background: var(--md-surface);
  color: var(--md-color-ink);
  box-shadow: var(--md-shadow);
  cursor: pointer;
  transition: background-color 0.3s var(--md-ease), color 0.3s var(--md-ease), transform 0.3s var(--md-ease);
}
.hero-arrow:hover,
.rail-arrow:hover {
  background: var(--md-color-primary);
  color: var(--md-on-primary);
  transform: translateY(-2px);
}
.rail-arrow.is-light {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  box-shadow: none;
}
.rail-arrow.is-light:hover {
  background: var(--md-color-apricot);
  color: var(--md-on-apricot);
}
.rail-arrow.swiper-button-disabled {
  opacity: 0.4;
  cursor: default;
}
.hero-count {
  min-width: 70px;
  font-family: var(--md-ff-heading);
  font-size: 1.05rem;
  color: var(--md-color-muted);
  text-align: center;
}
.hero-count b {
  color: var(--md-color-ink);
  font-weight: 600;
}
.hero-progress {
  position: relative;
  width: 110px;
  height: 2px;
  border-radius: 2px;
  background: var(--md-color-line);
  overflow: hidden;
}
.hero-progress span {
  position: absolute;
  inset: 0;
  background: var(--md-color-apricot);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/*======================
9. Strip And Welcome
========================*/
/*---- 9.1 The Strip ----*/
/* one bar docked on the hero's foot, standing on the next section's own ground */
.md-welcome.has-strip {
  position: relative;
  z-index: 3;
}
.md-strip {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: -30px;
  padding: 8px;
  border-radius: 26px;
  background: var(--md-surface);
  box-shadow: var(--md-shadow-lg);
}
.strip-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border-radius: 20px;
  color: var(--md-color-body);
  transition: background-color 0.3s var(--md-ease);
}
.strip-tile + .strip-tile::before {
  content: "";
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: 0;
  width: 1px;
  background: var(--md-color-line);
}
.strip-tile:hover {
  background: var(--md-tonal);
  color: var(--md-color-body);
}
.strip-ic {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  transition: transform 0.5s var(--md-ease);
}
.strip-tile:hover .strip-ic {
  transform: rotate(-6deg) scale(1.06);
}
.strip-text {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.strip-label {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--md-color-muted);
}
.strip-text b {
  font-size: 1.02rem;
  font-weight: 500;
}

/*---- 9.2 Welcome ----*/
.welcome-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 90px;
  margin-top: 110px;
}
.welcome-photos {
  position: relative;
  height: 580px;
}
.wp-main {
  position: absolute;
  top: 0;
  left: 0;
  width: 80%;
  height: 80%;
  box-shadow: var(--md-shadow);
}
.wp-small {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46%;
  height: 46%;
  border: 8px solid var(--md-surface);
  box-shadow: var(--md-shadow-lg);
}
.wp-badge {
  position: absolute;
  left: 7%;
  bottom: 2%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: var(--md-color-apricot);
  color: var(--md-on-apricot);
  font-size: 0.82rem;
  line-height: 1.25;
  text-align: center;
  box-shadow: 0 18px 40px rgba(var(--md-color-apricot-rgb), 0.35);
}
.wp-badge b {
  color: var(--md-on-apricot);
  font-size: 3.4rem;
  line-height: 1;
}
.wp-badge span {
  max-width: 100px;
  margin-top: 4px;
}
.welcome-copy .md-lead {
  margin: 22px 0 28px;
}
/* label / value rows (the house alternative to bullet lists) */
.md-rows li {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 20px;
  padding: 15px 0;
  border-bottom: 1px solid var(--md-color-line);
  font-size: 0.95rem;
}
.md-rows li:first-child {
  border-top: 1px solid var(--md-color-line);
}
.md-rows span {
  color: var(--md-color-muted);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-top: 2px;
}
.md-rows b {
  font-weight: 400;
}
.welcome-sign {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
}
.welcome-sign img {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
}
.welcome-sign > span {
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
  line-height: 1.35;
}
.welcome-sign > span b {
  font-family: var(--md-ff-heading);
  font-size: 1.15rem;
  font-weight: 600;
}
.welcome-sign .md-btn {
  margin-inline-start: auto;
}

/*======================
10. Help Cards And Tabs
========================*/
/*---- 10.1 Tabs ----*/
.md-tabs-nav {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px;
  border-radius: 60px;
  background: var(--md-tonal);
}
.md-tabs-nav button {
  height: 46px;
  padding: 0 20px;
  border: 0;
  border-radius: 40px;
  background: transparent;
  color: var(--md-color-body);
  font-size: 0.9rem;
  font-weight: 400;
  cursor: pointer;
  transition: background-color 0.3s var(--md-ease), color 0.3s var(--md-ease), box-shadow 0.3s var(--md-ease);
}
.md-tabs-nav button:hover {
  color: var(--md-color-ink);
}
.md-tabs-nav button.is-active {
  background: var(--md-surface);
  color: var(--md-color-ink);
  font-weight: 500;
  box-shadow: 0 6px 18px rgba(31, 36, 28, 0.08);
}
.md-tab-panel[hidden] {
  display: none;
}
/*---- 10.2 Help Cards ----*/
.help-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: 34px 30px 32px;
  border-radius: var(--md-radius);
  background: var(--md-surface);
  color: var(--md-color-body);
  transition: transform 0.45s var(--md-ease), box-shadow 0.45s var(--md-ease);
}
.help-card:hover {
  color: var(--md-color-body);
  transform: translateY(-6px);
  box-shadow: var(--md-shadow-lg);
}
.help-ic {
  width: 72px;
  height: 72px;
  margin-bottom: 26px;
  transition: transform 0.6s var(--md-ease);
}
.help-card:hover .help-ic {
  transform: rotate(-6deg) scale(1.06);
}
.help-title {
  margin-bottom: 12px;
  font-size: 1.4rem;
}
.help-card p {
  margin-bottom: 22px;
  font-size: 0.95rem;
}
.help-card .md-link {
  margin-top: auto;
}

/*======================
11. Untangle
========================*/
.md-untangle {
  position: relative;
  background: var(--md-color-ground);
}
.untangle-stage {
  position: relative;
  margin-top: 30px;
}
.untangle-line {
  display: block;
  width: 100%;
  height: 120px;
}
.untangle-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
  margin-top: -120px;
}
.u-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.u-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--md-color-line);
  background: var(--md-surface);
  transition: background-color 0.5s var(--md-ease), border-color 0.5s var(--md-ease), transform 0.5s var(--md-ease), box-shadow 0.5s var(--md-ease);
}
.u-dot b {
  font-family: var(--md-ff-heading);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--md-color-muted);
  transition: color 0.5s var(--md-ease);
}
.u-step.is-lit .u-dot {
  border-color: var(--md-color-apricot);
  background: var(--md-color-apricot);
  transform: scale(1.08);
  box-shadow: 0 0 0 8px rgba(var(--md-color-apricot-rgb), 0.18);
}
.u-step.is-lit .u-dot b {
  color: var(--md-on-apricot);
}
.u-title {
  margin: 76px 0 10px;
  font-size: 1.4rem;
}
.u-step p {
  max-width: 270px;
  margin: 0;
  font-size: 0.95rem;
}

/*======================
12. Self-Check Band
========================*/
.check-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  align-items: center;
  gap: 80px;
}
.check-copy .md-lead {
  margin: 22px 0 34px;
  max-width: 520px;
}
/* the card keeps its own ink on the photo band */
.check-card {
  margin: 0;
  padding: 36px;
  border-radius: 28px;
  background: var(--md-surface);
  color: var(--md-color-body);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
}
.check-intro {
  margin-bottom: 18px;
  font-size: 0.92rem;
  color: var(--md-color-muted);
}
.check-q {
  margin: 0 0 22px;
  padding: 0;
  border: 0;
}
.check-q legend {
  margin-bottom: 12px;
  color: var(--md-color-ink);
  font-family: var(--md-ff-heading);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
}
.check-opts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.check-opts label {
  position: relative;
  cursor: pointer;
}
.check-opts input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.check-opts span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 8px 12px;
  border-radius: 40px;
  background: var(--md-tonal);
  color: var(--md-color-ink);
  font-size: 0.86rem;
  text-align: center;
  line-height: 1.25;
  transition: background-color 0.3s var(--md-ease), color 0.3s var(--md-ease);
}
.check-opts label:hover span {
  background: var(--md-tonal-2);
}
.check-opts input:checked + span {
  background: var(--md-color-primary);
  color: var(--md-on-primary);
}
[data-theme="dark"] .check-opts input:checked + span {
  color: var(--md-color-night);
}
.check-opts input:focus-visible + span {
  outline: 2px solid var(--md-color-apricot);
  outline-offset: 2px;
}
.check-result {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--md-color-line);
}
.check-score {
  flex-shrink: 0;
  font-family: var(--md-ff-heading);
  font-size: 1.1rem;
  color: var(--md-color-muted);
}
.check-score b {
  color: var(--md-color-primary);
  font-size: 2.6rem;
  font-weight: 600;
  line-height: 1;
}
.check-card.is-high .check-score b {
  color: var(--md-color-apricot-text);
}
.check-result p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
}

/*======================
13. Fees And Insurance
========================*/
.fees-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: 80px;
}
.fees-copy .md-lead {
  margin: 22px 0 30px;
}
.fee-rows {
  margin-bottom: 28px;
}
.fee-rows li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 90px;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(var(--md-color-primary-rgb), 0.16);
}
.fee-name {
  color: var(--md-color-ink);
  font-weight: 400;
}
.fee-len {
  font-size: 0.85rem;
  color: var(--md-color-muted);
}
.fee-amt {
  font-family: var(--md-ff-heading);
  font-size: 1.45rem;
  font-weight: 600;
  text-align: end;
}
.insure-card {
  padding: 42px 40px;
  border-radius: 30px;
  background: var(--md-surface);
  box-shadow: var(--md-shadow-lg);
}
.insure-ic img {
  width: 72px;
  height: 72px;
  margin-bottom: 18px;
}
.insure-card h3 {
  margin-bottom: 24px;
  font-size: 1.7rem;
}
.insure-card .md-field > label {
  font-size: 0.85rem;
  font-weight: 500;
}
.insure-result {
  min-height: 120px;
  margin: 22px 0 26px;
}
.insure-line {
  margin-bottom: 14px;
  font-size: 0.95rem;
}
.insure-faces {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.insure-faces li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 14px 5px 5px;
  border-radius: 40px;
  background: var(--md-tonal);
  color: var(--md-color-ink);
  font-size: 0.85rem;
}
.insure-faces img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}

/*======================
14. Therapist Cards
========================*/
.md-rail {
  overflow: visible;
}
.md-team {
  overflow: clip;
}
.md-rail .swiper-slide {
  height: auto;
}
.rail-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rail-controls .md-btn {
  margin-inline-end: 8px;
}
.therapist-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: var(--md-radius);
  background: var(--md-color-ground);
  transition: transform 0.45s var(--md-ease), box-shadow 0.45s var(--md-ease);
}
.md-ground-surface .therapist-card {
  background: var(--md-color-ground);
}
.therapist-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--md-shadow-lg);
}
.tc-photo {
  display: block;
  height: 330px;
  overflow: hidden;
  border-radius: var(--md-radius) var(--md-radius) 90px var(--md-radius);
  background: var(--md-color-lilac-soft);
}
.tc-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
/* a transparent cut-out portrait stands on a soft lilac plate */
.tc-photo.is-cut img {
  object-fit: contain;
  object-position: center bottom;
  padding-top: 18px;
}
.tc-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 26px 26px 28px;
}
.tc-cred {
  margin-bottom: 8px;
  color: var(--md-color-apricot-text);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tc-name {
  margin-bottom: 4px;
  font-size: 1.5rem;
}
.tc-name a {
  color: var(--md-color-ink);
}
.tc-name a:hover {
  color: var(--md-color-primary);
}
.tc-title {
  margin-bottom: 8px;
  font-size: 0.95rem;
  color: var(--md-color-ink);
}
.tc-focus {
  margin-bottom: 20px;
  font-size: 0.85rem;
  color: var(--md-color-muted);
}
.tc-next {
  display: flex;
  flex-direction: column;
  margin-top: auto;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--md-surface);
  line-height: 1.4;
}
.md-ground-surface .tc-next {
  background: var(--md-surface);
}
.tc-next-label {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--md-color-muted);
}
.tc-next b {
  color: var(--md-color-primary);
  font-weight: 500;
}
.tc-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}

/*======================
15. Client Words
========================*/
.md-words {
  overflow: clip;
}
.md-words .md-gl {
  --gl-1: 238, 159, 123;
  --gl-2: 120, 108, 170;
  --gl-3: 79, 107, 76;
  --gl-alpha: 0.3;
}
.md-words > .container {
  position: relative;
  z-index: 2;
}
.words-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 90px;
}
.words-controls {
  display: flex;
  gap: 10px;
  margin-top: 34px;
}
.words-slider {
  width: 100%;
  min-width: 0;
}
.word-card {
  margin: 0;
}
.word-mark {
  margin-bottom: 22px;
  color: var(--md-color-apricot);
  font-size: 2rem;
}
.word-card blockquote {
  margin: 0 0 34px;
}
.word-card blockquote p {
  margin: 0;
  color: #FFFFFF;
  font-family: var(--md-ff-heading);
  font-size: clamp(24px, 2.1vw, 2.15rem);
  font-weight: 400;
  line-height: 1.35;
}
.word-card figcaption {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.88rem;
  line-height: 1.4;
}
.word-card figcaption img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}
.word-card figcaption span {
  display: flex;
  flex-direction: column;
}
.word-card figcaption b {
  font-size: 1.02rem;
  font-weight: 500;
}

/*======================
16. Workshop Cards
========================*/
.workshop-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: var(--md-radius);
  background: var(--md-surface);
  transition: transform 0.45s var(--md-ease), box-shadow 0.45s var(--md-ease);
}
.workshop-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--md-shadow-lg);
}
.ws-photo {
  position: relative;
  display: block;
  height: 250px;
  overflow: hidden;
}
.ws-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ws-date {
  position: absolute;
  top: 18px;
  left: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 74px;
  border-radius: 18px;
  background: var(--md-surface);
  color: var(--md-color-muted);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.1;
  box-shadow: var(--md-shadow);
}
.ws-date b {
  color: var(--md-color-ink);
  font-family: var(--md-ff-heading);
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: 0;
}
.ws-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  padding: 26px 28px 28px;
}
.ws-name {
  margin: 14px 0 16px;
  font-size: 1.45rem;
}
.ws-name a {
  color: var(--md-color-ink);
}
.ws-name a:hover {
  color: var(--md-color-primary);
}
.ws-meta {
  width: 100%;
  margin-bottom: 20px;
}
.ws-meta li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--md-color-line);
  font-size: 0.88rem;
}
.ws-meta span {
  color: var(--md-color-muted);
}
.ws-meta b {
  font-weight: 400;
  text-align: end;
}
.ws-seats {
  width: 100%;
  margin-top: auto;
}
.md-progress {
  position: relative;
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--md-color-linen);
}
.md-progress span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  border-radius: 6px;
  background: var(--md-color-apricot);
  transition: width 1.2s var(--md-ease);
}
.ws-left {
  display: block;
  margin-top: 10px;
  font-size: 0.85rem;
}

/*======================
17. Journal Cards
========================*/
.post-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: var(--md-radius);
  background: var(--md-color-ground);
  transition: transform 0.45s var(--md-ease), box-shadow 0.45s var(--md-ease);
}
.post-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--md-shadow-lg);
}
.post-photo {
  display: block;
  height: 250px;
  overflow: hidden;
}
.post-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.post-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 26px 28px 28px;
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  font-size: 0.82rem;
  color: var(--md-color-muted);
}
.post-title {
  margin-bottom: 22px;
  font-size: 1.45rem;
  line-height: 1.22;
}
.post-title a {
  color: var(--md-color-ink);
}
.post-title a:hover {
  color: var(--md-color-primary);
}
.post-by {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  font-size: 0.88rem;
  color: var(--md-color-ink);
}
.post-by img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}

/*======================
18. Home Two
========================*/
/*---- 18.1 Portrait Hero ----*/
.portrait-stage {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 620px;
}
.stage-disc {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, var(--md-color-apricot-soft) 0%, var(--md-color-lilac-soft) 70%);
  box-shadow: 0 0 0 26px rgba(var(--md-color-apricot-rgb), 0.12), 0 0 0 54px rgba(var(--md-color-lilac-rgb), 0.18);
  transform: translateX(-50%);
}
/* the cut-out's flat waist would show inside the disc, so its lower half is
   clipped to the disc's own curve; the head rises free above it */
.stage-clip {
  position: absolute;
  left: 50%;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 520px;
  height: 640px;
  overflow: hidden;
  border-radius: 0 0 260px 260px;
  transform: translateX(-50%);
}
.stage-cut {
  position: relative;
  bottom: -40px;
  width: auto;
  height: 640px;
  max-width: none;
}
.portrait-stage.is-book {
  align-items: center;
}
.portrait-stage.is-book .stage-disc {
  bottom: 50px;
}
.stage-book {
  position: relative;
  width: 330px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 40px 70px rgba(31, 36, 28, 0.28);
  transform: rotate(-4deg);
}
.hero-next {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 24px;
  border-radius: 60px;
  background: var(--md-surface);
  box-shadow: var(--md-shadow);
}
.hero-next .md-status {
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--md-color-muted);
}
.hero-next b {
  color: var(--md-color-primary);
  font-weight: 500;
}
/*---- 18.2 Figures Strip And Approach ----*/
.md-strip.is-figures .strip-tile {
  cursor: default;
}
.md-strip.is-figures .strip-tile:hover {
  background: transparent;
}
.approach-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 90px;
  margin-top: 110px;
}
.approach-quote .md-lead {
  margin: 22px 0 26px;
}
.approach-pillars {
  display: grid;
  gap: 18px;
}
.pillar {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 28px 30px;
  border-radius: var(--md-radius);
  background: var(--md-color-ground);
  transition: transform 0.45s var(--md-ease), box-shadow 0.45s var(--md-ease);
}
.pillar:nth-child(2) {
  margin-inline-start: 50px;
}
.pillar:hover {
  transform: translateY(-4px);
  box-shadow: var(--md-shadow);
}
.pillar img {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
}
.pillar h3 {
  margin-bottom: 8px;
  font-size: 1.35rem;
}
.pillar p {
  margin: 0;
  font-size: 0.95rem;
}
/*---- 18.3 Mood Weather ----*/
.md-weather {
  --sky-dull-1: 196, 203, 206;
  --sky-dull-2: 226, 228, 225;
  --sky-clear-1: 250, 214, 192;
  --sky-clear-2: 246, 241, 234;
  position: relative;
  overflow: clip;
}
[data-theme="dark"] .md-weather {
  --sky-dull-1: 30, 34, 38;
  --sky-dull-2: 22, 26, 24;
  --sky-clear-1: 74, 46, 36;
  --sky-clear-2: 18, 22, 17;
}
.weather-sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(var(--sky-clear-1)) 0%, rgb(var(--sky-clear-2)) 100%);
}
.weather-sun {
  position: absolute;
  left: 50%;
  bottom: -260px;
  width: 760px;
  height: 760px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--md-color-apricot-rgb), 0.7) 0%, rgba(var(--md-color-apricot-rgb), 0.25) 40%, rgba(var(--md-color-apricot-rgb), 0) 70%);
  transform: translate(-50%, 0);
}
.weather-cloud {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  filter: blur(40px);
}
[data-theme="dark"] .weather-cloud {
  background: rgba(120, 128, 132, 0.35);
}
.weather-cloud.is-a {
  top: 10%;
  left: 4%;
  width: 46%;
  height: 46%;
}
.weather-cloud.is-b {
  top: 24%;
  right: 2%;
  width: 52%;
  height: 50%;
}
.weather-cloud.is-c {
  bottom: 0;
  left: 26%;
  width: 48%;
  height: 40%;
}
.md-weather > .container {
  position: relative;
  z-index: 2;
}
.weather-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.weather-notes li {
  padding: 34px 32px;
  border-radius: var(--md-radius);
  background: rgba(var(--md-surface-rgb), 0.78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.note-week {
  display: block;
  margin-bottom: 14px;
  color: var(--md-color-apricot-text);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.weather-notes h3 {
  margin-bottom: 10px;
  font-size: 1.45rem;
}
.weather-notes p {
  margin: 0;
  font-size: 0.95rem;
}
/*---- 18.4 Ways And Books ----*/
.way-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: var(--md-radius);
  background: var(--md-surface);
  color: var(--md-color-body);
  transition: transform 0.45s var(--md-ease), box-shadow 0.45s var(--md-ease);
}
.way-card:hover {
  color: var(--md-color-body);
  transform: translateY(-6px);
  box-shadow: var(--md-shadow-lg);
}
.way-photo {
  display: block;
  height: 230px;
  overflow: hidden;
}
.way-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.way-body {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 44px 28px 28px;
}
.way-ic {
  position: absolute;
  top: -36px;
  left: 26px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--md-surface);
  padding: 4px;
}
.way-name {
  margin-bottom: 14px;
  color: var(--md-color-ink);
  font-family: var(--md-ff-heading);
  font-size: 1.5rem;
  font-weight: 600;
}
.way-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 14px 0;
  border-top: 1px solid var(--md-color-line);
  border-bottom: 1px solid var(--md-color-line);
  font-size: 0.9rem;
}
.way-meta b {
  font-size: 1.6rem;
}
.way-card .md-link {
  margin-top: auto;
}
.books-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 90px;
}
.book-shelf {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 560px;
}
.book-disc {
  position: absolute;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: var(--md-color-apricot-soft);
  box-shadow: 0 0 0 30px rgba(var(--md-color-apricot-rgb), 0.12);
}
.book-shelf img {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 3px 6px 6px 3px;
  box-shadow: 0 30px 60px rgba(31, 36, 28, 0.24);
  transition: transform 0.6s var(--md-ease);
}
.shelf-front {
  z-index: 2;
  width: 270px;
  transform: translate(-50%, -50%) rotate(-3deg);
}
.shelf-back {
  width: 220px;
}
.shelf-back.is-left {
  transform: translate(-112%, -46%) rotate(-11deg);
}
.shelf-back.is-right {
  transform: translate(12%, -46%) rotate(9deg);
}
.book-shelf:hover .shelf-front {
  transform: translate(-50%, -54%) rotate(-1deg);
}
.book-shelf:hover .shelf-back.is-left {
  transform: translate(-120%, -48%) rotate(-14deg);
}
.book-shelf:hover .shelf-back.is-right {
  transform: translate(20%, -48%) rotate(12deg);
}
.book-copy .md-lead {
  margin: 22px 0 26px;
}
.shelf-list {
  margin-bottom: 32px;
  border-top: 1px solid var(--md-color-line);
}
.shelf-list li {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--md-color-line);
}
.shelf-what {
  display: flex;
  flex-direction: column;
  flex: 1;
  color: var(--md-color-muted);
  font-size: 0.86rem;
}
.shelf-what b {
  color: var(--md-color-ink);
  font-family: var(--md-ff-heading);
  font-size: 1.2rem;
  font-weight: 600;
}
.shelf-price {
  color: var(--md-color-ink);
  font-size: 1.05rem;
  font-weight: 500;
}
.shelf-price del {
  margin-inline-start: 6px;
  color: var(--md-color-muted);
  font-size: 0.86rem;
  font-weight: 300;
}
.shelf-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--md-tonal);
  color: var(--md-color-apricot-text);
  transition: background-color 0.3s var(--md-ease), color 0.3s var(--md-ease);
}
.shelf-add:hover,
.shelf-add.is-added {
  background: var(--md-color-primary);
  color: var(--md-on-primary);
}
/*---- 18.5 Talks And Booking ----*/
.md-talks {
  overflow: clip;
}
.md-talks > .container {
  position: relative;
  z-index: 2;
}
.talks-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: 80px;
}
.talk-video {
  position: relative;
  display: block;
  height: 460px;
  overflow: hidden;
  border-radius: var(--md-pebble);
}
.talk-video img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.talk-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(27, 34, 25, 0.8) 0%, rgba(27, 34, 25, 0) 55%);
}
.md-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: var(--md-color-apricot);
  color: var(--md-on-apricot);
  font-size: 1.3rem;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 14px rgba(var(--md-color-apricot-rgb), 0.25);
  transition: transform 0.4s var(--md-ease);
}
.talk-video:hover .md-play {
  transform: translate(-50%, -50%) scale(1.08);
}
.talk-cap {
  position: absolute;
  left: 40px;
  bottom: 34px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.88rem;
}
.talk-cap b {
  color: #FFFFFF;
  font-family: var(--md-ff-heading);
  font-size: 1.5rem;
  font-weight: 600;
}
.talks-copy > p {
  margin: 20px 0 26px;
}
.talk-list li {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.talk-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 62px;
  height: 66px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.talk-date b {
  color: #FFFFFF;
  font-family: var(--md-ff-heading);
  font-size: 1.6rem;
  letter-spacing: 0;
  line-height: 1;
}
.talk-what {
  display: flex;
  flex-direction: column;
  flex: 1;
  font-size: 0.88rem;
}
.talk-what b {
  font-size: 1.02rem;
  font-weight: 500;
}
.book-lea-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 60px;
  padding: 60px;
  border-radius: 36px;
  background: var(--md-color-lilac-soft);
}
.bl-copy > p {
  margin: 20px 0 26px;
}
.md-avatars.is-single .faces img {
  width: 58px;
  height: 58px;
}
.slot-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 24px;
}
.slot-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 10px 16px;
  border-radius: 18px;
  background: var(--md-surface);
  color: var(--md-color-ink);
  font-size: 0.92rem;
  text-align: center;
  transition: background-color 0.3s var(--md-ease), color 0.3s var(--md-ease), transform 0.3s var(--md-ease);
}
.slot-chip:hover {
  background: var(--md-color-primary);
  color: var(--md-on-primary);
  transform: translateY(-2px);
}

/*======================
19. Home Three
========================*/
/*---- 19.1 Video Call Hero ----*/
.video-call {
  position: relative;
  height: 600px;
}
.vc-main {
  position: relative;
  height: 100%;
  box-shadow: var(--md-shadow-lg);
}
.vc-main::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(27, 34, 25, 0.45) 0%, rgba(27, 34, 25, 0) 28%, rgba(27, 34, 25, 0) 70%, rgba(27, 34, 25, 0.45) 100%);
}
/* the chips start clear of the pebble's big top-left curve */
.vc-top {
  position: absolute;
  top: 28px;
  left: 66px;
  right: 30px;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.vc-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 40px;
  background: rgba(27, 34, 25, 0.42);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.8rem;
  line-height: 1.35;
}
.vc-who {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 12px 20px;
  border-radius: 20px;
}
.vc-who b {
  color: #FFFFFF;
  font-size: 0.98rem;
  font-weight: 500;
}
.vc-live {
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
}
.vc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--md-color-apricot);
  animation: md-live 1.8s ease-out infinite;
}
@keyframes md-live {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--md-color-apricot-rgb), 0.7);
  }
  100% {
    box-shadow: 0 0 0 9px rgba(var(--md-color-apricot-rgb), 0);
  }
}
.vc-self {
  position: absolute;
  right: -34px;
  bottom: 118px;
  z-index: 3;
  width: 178px;
  height: 226px;
  overflow: hidden;
  border: 5px solid var(--md-surface);
  border-radius: 26px;
  box-shadow: var(--md-shadow-lg);
}
.vc-self img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vc-bar {
  position: absolute;
  left: 50%;
  bottom: 30px;
  z-index: 2;
  display: flex;
  gap: 12px;
  padding: 10px;
  border-radius: 60px;
  background: rgba(27, 34, 25, 0.42);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transform: translateX(-50%);
}
.vc-bar > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
  font-size: 1rem;
}
.vc-bar > .is-end {
  background: var(--md-color-error);
}
/*---- 19.2 Pebble Balance ----*/
.pebble-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 90px;
  margin-top: 110px;
}
.pebble-stage {
  --s: 1;
  position: relative;
  height: calc(560px * var(--s));
}
.cairn-rings {
  position: absolute;
  left: 50%;
  bottom: calc(10px * var(--s));
  width: calc(540px * var(--s));
  height: calc(540px * var(--s));
  border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(var(--md-color-primary-rgb), 0.12) 0, rgba(var(--md-color-primary-rgb), 0.12) 1px, transparent 1px, transparent 34px);
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 70%);
  mask-image: radial-gradient(circle, #000 0%, transparent 70%);
  transform: translateX(-50%);
}
.cairn-shadow {
  position: absolute;
  left: 50%;
  bottom: calc(44px * var(--s));
  width: calc(380px * var(--s));
  height: calc(44px * var(--s));
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(31, 36, 28, 0.26) 0%, rgba(31, 36, 28, 0) 70%);
  transform: translateX(-50%);
}
.cairn-stone {
  position: absolute;
  left: 50%;
  display: block;
  width: calc(var(--w) * var(--s));
  height: calc(var(--h) * var(--s));
  margin-left: calc((var(--w) / -2 + var(--x)) * var(--s));
  bottom: calc(var(--b) * var(--s));
  border-radius: 50% 50% 46% 54% / 62% 58% 42% 38%;
  background: radial-gradient(ellipse at 34% 26%, var(--hi) 0%, var(--mid) 48%, var(--lo) 100%);
  box-shadow: inset -10px -14px 24px rgba(0, 0, 0, 0.1), 0 16px 22px -12px rgba(31, 36, 28, 0.45);
}
.cairn-stone.is-1 {
  --w: 300px;
  --h: 112px;
  --b: 58px;
  --x: 0px;
  --hi: #94AD8E;
  --mid: #5E7A5A;
  --lo: #3B5239;
  z-index: 1;
}
.cairn-stone.is-2 {
  --w: 236px;
  --h: 96px;
  --b: 156px;
  --x: 12px;
  --hi: #F1E9DD;
  --mid: #D3C6B2;
  --lo: #AA9A83;
  border-radius: 54% 46% 50% 50% / 60% 62% 38% 40%;
  z-index: 2;
}
.cairn-stone.is-3 {
  --w: 176px;
  --h: 82px;
  --b: 238px;
  --x: -8px;
  --hi: #F9CDB7;
  --mid: #EE9F7B;
  --lo: #C77955;
  border-radius: 48% 52% 54% 46% / 64% 60% 40% 36%;
  z-index: 3;
}
.cairn-stone.is-4 {
  --w: 120px;
  --h: 66px;
  --b: 308px;
  --x: 6px;
  --hi: #F3F0FB;
  --mid: #D8D2EE;
  --lo: #A69DCB;
  z-index: 4;
}
.pebble-steps {
  margin-top: 34px;
  border-top: 1px solid var(--md-color-line);
}
.p-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--md-color-line);
}
.p-step::after {
  content: "";
  position: absolute;
  left: 80px;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--md-color-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.9s var(--md-ease);
}
.p-step.is-lit::after {
  transform: scaleX(1);
}
.p-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--md-tonal);
  color: var(--md-color-muted);
  font-family: var(--md-ff-heading);
  font-size: 1.1rem;
  font-weight: 600;
  transition: background-color 0.5s var(--md-ease), color 0.5s var(--md-ease);
}
.p-step.is-lit .p-num {
  background: var(--md-color-primary);
  color: var(--md-on-primary);
}
.p-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.95rem;
}
.p-text b {
  color: var(--md-color-ink);
  font-family: var(--md-ff-heading);
  font-size: 1.3rem;
  font-weight: 600;
}
/*---- 19.3 Match Teaser ----*/
.match-card {
  padding: 40px;
  border-radius: 30px;
  background: var(--md-surface);
  color: var(--md-color-body);
  box-shadow: var(--md-shadow-lg);
}
.match-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.match-card .md-field {
  margin-bottom: 18px;
}
.match-list {
  margin-top: 8px;
  border-top: 1px solid var(--md-color-line);
}
.match-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--md-color-line);
}
.match-row img {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}
.match-what {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  color: var(--md-color-muted);
  font-size: 0.85rem;
}
.md-photo-band .match-what b {
  color: var(--md-color-ink);
  font-size: 1rem;
  font-weight: 500;
}
.match-next {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: var(--md-color-muted);
  font-size: 0.75rem;
  text-align: right;
}
.md-photo-band .match-next b {
  color: var(--md-color-primary);
  font-size: 0.92rem;
  font-weight: 500;
}
.match-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--md-tonal);
  color: var(--md-color-apricot-text);
  transition: background-color 0.3s var(--md-ease), color 0.3s var(--md-ease);
}
.match-go:hover {
  background: var(--md-color-primary);
  color: var(--md-on-primary);
}
.match-empty {
  padding: 18px 0;
  font-size: 0.92rem;
}
/*---- 19.4 Plans ----*/
.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 28px;
}
.plan-card {
  display: flex;
  flex-direction: column;
  padding: 44px 38px;
  border-radius: 30px;
  background: var(--md-surface);
  transition: transform 0.45s var(--md-ease), box-shadow 0.45s var(--md-ease);
}
.plan-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--md-shadow-lg);
}
.plan-name {
  color: var(--md-color-apricot-text);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.plan-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 18px 0 12px;
}
.plan-price b {
  color: var(--md-color-ink);
  font-family: var(--md-ff-heading);
  font-size: 3.4rem;
  font-weight: 600;
  line-height: 1;
}
.plan-price span {
  color: var(--md-color-muted);
  font-size: 0.9rem;
}
.plan-price small {
  font-family: var(--md-ff-body);
  font-size: 0.9rem;
  font-weight: 400;
}
.plan-card > p {
  margin-bottom: 24px;
}
.plan-card .md-rows {
  margin-bottom: 32px;
}
.plan-card .md-rows li {
  grid-template-columns: 112px minmax(0, 1fr);
}
.plan-card .md-btn {
  align-self: flex-start;
  margin-top: auto;
}
.plan-card.is-pick {
  background: var(--md-color-night);
  color: rgba(255, 255, 255, 0.72);
}
.plan-card.is-pick .plan-name {
  color: var(--md-color-apricot);
}
.plan-card.is-pick .plan-price b,
.plan-card.is-pick .md-rows b {
  color: #FFFFFF;
}
.plan-card.is-pick .plan-price span,
.plan-card.is-pick .md-rows span {
  color: rgba(255, 255, 255, 0.6);
}
.plan-card.is-pick .md-rows li {
  border-color: rgba(255, 255, 255, 0.12);
}
/*---- 19.5 Languages ----*/
.lang-tabs {
  justify-content: center;
  margin-top: 30px;
}
.lang-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 80px;
  margin-top: 60px;
}
.lang-panel[hidden] {
  display: none;
}
.lang-photo {
  height: 540px;
}
.lang-photo.is-cut {
  background: var(--md-color-lilac-soft);
}
.lang-photo.is-cut img {
  object-fit: contain;
  object-position: center bottom;
}
.lang-kicker {
  color: var(--md-color-apricot-text);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.lang-copy h3 {
  margin: 12px 0 6px;
  font-size: 2.3rem;
}
.lang-title {
  margin-bottom: 26px;
  color: var(--md-color-muted);
}
.lang-copy .md-rows {
  margin-bottom: 28px;
}
.lang-slots {
  display: block;
  margin-bottom: 12px;
  color: var(--md-color-muted);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.lang-copy .slot-chips {
  margin-bottom: 32px;
}
.lang-copy .slot-chip {
  background: var(--md-color-ground);
}
/*---- 19.6 App Booking ----*/
.app-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  align-items: center;
  gap: 120px;
}
.app-copy .md-lead {
  margin: 20px 0 30px;
}
.md-night .md-rows li {
  border-color: rgba(255, 255, 255, 0.1);
}
.md-night .md-rows span {
  color: rgba(255, 255, 255, 0.55);
}
.app-phone {
  position: relative;
  width: 390px;
  margin-inline-start: auto;
  padding: 14px;
  border-radius: 56px;
  background: #0E120D;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 50px 90px rgba(0, 0, 0, 0.45);
}
.app-phone::before {
  content: "";
  position: absolute;
  top: 26px;
  left: 50%;
  z-index: 2;
  width: 96px;
  height: 26px;
  border-radius: 20px;
  background: #0E120D;
  transform: translateX(-50%);
}
.phone-screen {
  padding: 64px 22px 26px;
  border-radius: 44px;
  background: var(--md-surface);
  color: var(--md-color-body);
}
.app-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.app-head span {
  color: var(--md-color-ink);
  font-family: var(--md-ff-heading);
  font-size: 1.15rem;
  font-weight: 600;
}
.md-night .app-head b {
  padding: 4px 12px;
  border-radius: 20px;
  background: var(--md-tonal-2);
  color: var(--md-color-primary);
  font-size: 0.75rem;
  font-weight: 500;
}
.app-faces {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 16px;
}
.app-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--md-color-muted);
  font-size: 0.7rem;
}
.app-face img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--md-surface), 0 0 0 4px transparent;
  transition: box-shadow 0.3s var(--md-ease);
}
.app-face.is-active {
  color: var(--md-color-ink);
}
.app-face.is-active img {
  box-shadow: 0 0 0 2px var(--md-surface), 0 0 0 4px var(--md-color-apricot);
}
.app-who {
  display: flex;
  flex-direction: column;
  margin-bottom: 18px;
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--md-color-ground);
  color: var(--md-color-muted);
  font-size: 0.8rem;
}
.md-night .app-who b {
  color: var(--md-color-ink);
  font-size: 0.95rem;
  font-weight: 500;
}
.app-label {
  margin-bottom: 10px;
  color: var(--md-color-muted);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.app-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  margin-bottom: 18px;
}
.app-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 9px 0;
  border: 0;
  border-radius: 14px;
  background: var(--md-color-ground);
  color: var(--md-color-muted);
  font-size: 0.66rem;
  transition: background-color 0.3s var(--md-ease), color 0.3s var(--md-ease);
}
.md-night .app-day b {
  color: var(--md-color-ink);
  font-size: 1rem;
  font-weight: 500;
}
.app-day.is-active {
  background: var(--md-color-primary);
  color: var(--md-on-primary);
}
.md-night .app-day.is-active b {
  color: var(--md-on-primary);
}
.app-day.is-closed {
  opacity: 0.4;
  cursor: not-allowed;
}
.app-times {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  gap: 7px;
  min-height: 87px;
  margin-bottom: 22px;
}
.app-time {
  padding: 10px 0;
  border: 0;
  border-radius: 12px;
  background: var(--md-color-ground);
  color: var(--md-color-ink);
  font-size: 0.8rem;
  transition: background-color 0.3s var(--md-ease), color 0.3s var(--md-ease);
}
.app-time:hover {
  background: var(--md-tonal-2);
}
.app-time.is-active {
  background: var(--md-color-apricot-soft);
  color: var(--md-color-apricot-text);
  box-shadow: inset 0 0 0 1.5px var(--md-color-apricot);
}
.app-confirm {
  justify-content: center;
  width: 100%;
}
.app-confirm.is-disabled {
  opacity: 0.5;
}
/*---- 19.7 Online FAQ ----*/
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: 90px;
}
.faq-side .md-lead {
  margin-top: 20px;
}
.faq-help {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 36px;
  padding: 16px;
  border-radius: 26px;
  background: var(--md-surface);
}
.faq-help img {
  flex-shrink: 0;
  width: 110px;
  height: 110px;
  border-radius: 20px;
  object-fit: cover;
}
.faq-help-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.88rem;
}
.faq-help-copy b {
  color: var(--md-color-ink);
  font-family: var(--md-ff-heading);
  font-size: 1.2rem;
  font-weight: 600;
}
.faq-help-copy .md-link {
  margin-top: 6px;
}

/*======================
20. Accordion
========================*/
/* native <details>: one open at a time (the FAQ block), the plus turns to a minus */
.md-accordion {
  display: grid;
  gap: 14px;
}
.acc-item details {
  border-radius: 22px;
  background: var(--md-surface);
  transition: box-shadow 0.4s var(--md-ease);
}
.acc-item details[open] {
  box-shadow: var(--md-shadow);
}
.acc-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 28px;
  color: var(--md-color-ink);
  font-family: var(--md-ff-heading);
  font-size: 1.2rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.acc-item summary::-webkit-details-marker {
  display: none;
}
.acc-item summary::after {
  content: "\f067";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--md-tonal);
  color: var(--md-color-apricot-text);
  font-family: "Font Awesome 6 Free";
  font-size: 0.8rem;
  font-weight: 900;
  transition: background-color 0.3s var(--md-ease), color 0.3s var(--md-ease);
}
.acc-item details[open] summary::after {
  content: "\f068";
  background: var(--md-color-primary);
  color: var(--md-on-primary);
}
.acc-body {
  padding: 0 28px 26px;
}
.acc-body p {
  margin: 0;
}
.acc-item.is-filtered-out {
  display: none;
}

/*======================
21. Sidebar Widgets
========================*/
.md-sidebar {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.md-sidebar.is-sticky {
  position: sticky;
  top: 110px;
}
.widget {
  padding: 32px 30px;
  border-radius: var(--md-radius);
  background: var(--md-surface);
  box-shadow: 0 0 0 1px var(--md-color-line);
}
.widget.is-soft {
  background: var(--md-color-linen);
  box-shadow: none;
}
/* scoped: the footer columns use .widget-title too */
.md-sidebar .widget-title {
  position: relative;
  margin-bottom: 22px;
  padding-bottom: 14px;
  color: var(--md-color-ink);
  font-family: var(--md-ff-heading);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.md-sidebar .widget-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 2px;
  background: var(--md-color-apricot);
}
/* search */
.widget-search {
  position: relative;
}
.widget-search input {
  display: block;
  width: 100%;
  height: 56px;
  padding: 0 58px 0 20px;
  border: 1px solid var(--md-color-line);
  border-radius: var(--md-radius-sm);
  background: var(--md-surface);
  color: var(--md-color-ink);
  font-family: var(--md-ff-body);
  font-size: 15px;
}
.widget-search input:focus {
  outline: none;
  border-color: var(--md-color-apricot);
}
.widget-search button {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--md-radius-sm);
  background: var(--md-color-primary);
  color: var(--md-on-primary);
  cursor: pointer;
}
/* a list of links with a count (categories, ministries, series) */
.widget-list li + li {
  margin-top: 8px;
}
/* the FAQ categories are buttons (they filter), drawn like the links */
.faq-cats button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-radius: var(--md-radius-sm);
  background: var(--md-color-linen);
  color: var(--md-color-ink);
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  transition: background-color 0.3s var(--md-ease), color 0.3s var(--md-ease), padding 0.3s var(--md-ease);
}
.faq-cats button span {
  color: var(--md-color-apricot-text);
  font-size: 13px;
}
.faq-cats button:hover,
.faq-cats button.is-active {
  padding-left: 22px;
  background: var(--md-color-primary);
  color: var(--md-on-primary);
}
.faq-cats button:hover span,
.faq-cats button.is-active span {
  color: var(--md-on-primary);
}
.widget-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--md-radius-sm);
  background: var(--md-color-linen);
  color: var(--md-color-ink);
  font-size: 15px;
  font-weight: 500;
  transition: background-color 0.35s var(--md-ease), color 0.35s var(--md-ease), padding 0.35s var(--md-ease);
}
.widget-list a span,
.widget-list a i {
  font-size: 13px;
  color: var(--md-color-apricot-text);
}
.widget-list a:hover,
.widget-list a.is-active,
.widget-list a[aria-current="page"] {
  padding-left: 22px;
  background: var(--md-color-primary);
  color: var(--md-on-primary);
}
.widget-list a:hover span,
.widget-list a.is-active span,
.widget-list a[aria-current="page"] span,
.widget-list a:hover i,
.widget-list a[aria-current="page"] i {
  color: var(--md-color-apricot);
}
/* recent posts / sermons */
.widget-recent li + li {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--md-color-line);
}
.widget-recent a {
  display: flex;
  align-items: center;
  gap: 16px;
}
.widget-recent img {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  border-radius: var(--md-radius-sm);
  object-fit: cover;
}
.widget-recent a > span {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  color: var(--md-color-muted);
}
.widget-recent b {
  margin-top: 3px;
  font-family: var(--md-ff-heading);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--md-color-ink);
  transition: color 0.3s var(--md-ease);
}
.widget-recent a:hover b {
  color: var(--md-color-apricot-text);
}
/* tags */
.widget-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.widget-tags a {
  padding: 7px 15px;
  border-radius: 30px;
  background: var(--md-tonal);
  color: var(--md-color-ink);
  font-size: 14px;
  transition: background-color 0.3s var(--md-ease), color 0.3s var(--md-ease);
}
.widget-tags a:hover {
  background: var(--md-color-primary);
  color: var(--md-on-primary);
}
/* a person (pastor, leader, author) */
.widget-person {
  text-align: center;
}
.widget-person img {
  width: 120px;
  height: 120px;
  margin: 0 auto 18px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  box-shadow: 0 0 0 4px var(--md-surface), 0 0 0 5px var(--md-color-apricot);
}
.widget-person h4 {
  margin-bottom: 2px;
  font-size: 26px;
  font-weight: 500;
}
.widget-person > span {
  display: block;
  margin-bottom: 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--md-color-apricot-text);
}
.widget-person .md-social {
  justify-content: center;
}
/* a night call-to-action card */
.widget-cta {
  position: relative;
  overflow: hidden;
  padding: 40px 32px;
  border-radius: var(--md-radius);
  background: var(--md-color-night);
  color: rgba(255, 255, 255, 0.72);
  isolation: isolate;
}
.widget-cta img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.28;
}
.widget-cta h4,
.widget-cta .cta-title {
  margin-bottom: 10px;
  color: #FFFFFF;
  font-family: var(--md-ff-heading);
  font-size: 1.75rem;
  font-weight: 600;
}
.widget-cta p {
  font-size: 15px;
}
/* label / value rows (meeting times, facts) */
.md-facts > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--md-color-line);
}
.md-facts > div:first-child {
  padding-top: 0;
}
.md-facts dt {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--md-color-apricot-text);
}
.md-facts dd {
  margin: 0;
  font-weight: 500;
  color: var(--md-color-ink);
  text-align: right;
}

/*======================
22. Shop
========================*/
/*---- 22.1 Product Cards ----*/
.product-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--md-radius);
  background: var(--md-surface);
  box-shadow: 0 0 0 1px var(--md-color-line);
  transition: transform 0.5s var(--md-ease), box-shadow 0.5s var(--md-ease);
}
.product-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--md-shadow-lg), 0 0 0 1px var(--md-color-line);
}
.product-thumb {
  position: relative;
  background: #FFFFFF;
}
.product-thumb .md-zoom {
  aspect-ratio: 1;
}
.product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 20px;
}
html[data-theme="dark"] .product-thumb {
  background: #F4EEE7;
}
.product-badges {
  position: absolute;
  left: 16px;
  top: 16px;
  display: flex;
  gap: 6px;
}
.badge-sale,
.badge-new {
  padding: 5px 11px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.badge-sale {
  background: var(--md-color-primary);
  color: var(--md-on-primary);
}
.badge-new {
  background: var(--md-color-apricot);
  color: var(--md-on-apricot);
}
.product-wish {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(27, 21, 34, 0.06);
  color: #1B1522;
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.3s var(--md-ease), color 0.3s var(--md-ease), transform 0.3s var(--md-ease);
}
.product-wish:hover,
.product-wish.is-on {
  background: var(--md-color-primary);
  color: var(--md-on-primary);
  transform: scale(1.06);
}
.product-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 22px 24px 22px;
  border-top: 1px solid var(--md-color-line);
}
.product-title {
  margin: 6px 0 6px;
  font-size: 23px;
  font-weight: 500;
  line-height: 1.2;
}
.product-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  color: var(--md-color-apricot);
}
.product-stars span {
  margin-left: 10px;
  font-size: 13px;
  color: var(--md-color-muted);
}
.product-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
}
.product-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.product-price b {
  font-family: var(--md-ff-heading);
  font-size: 28px;
  font-weight: 500;
  color: var(--md-color-apricot-text);
}
.product-price del,
.pd-price del {
  font-size: 15px;
  color: var(--md-color-muted);
}
.product-add {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--md-color-primary);
  color: var(--md-on-primary);
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.3s var(--md-ease), color 0.3s var(--md-ease), transform 0.3s var(--md-ease);
}
.product-add:hover {
  background: var(--md-color-apricot);
  color: var(--md-on-apricot);
  transform: rotate(-10deg);
}
.product-add.is-added {
  width: auto;
  padding: 0 16px;
  border-radius: 30px;
  background: var(--md-color-apricot);
  color: var(--md-on-apricot);
  font-size: 13px;
  font-weight: 600;
}
/*---- 22.2 Toolbar And Filters ----*/
.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
  padding: 12px 12px 12px 22px;
  border-radius: var(--md-radius);
  background: var(--md-color-linen);
}
.shop-count {
  margin: 0;
  font-size: 15px;
}
.shop-sort {
  flex: 0 0 240px;
}
.shop-cats .md-check {
  justify-content: flex-start;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--md-color-line);
}
.shop-cats .md-check input {
  margin-top: 0;
}
.shop-cats .md-check span {
  flex: 1 1 auto;
  color: var(--md-color-ink);
}
.shop-cats em {
  font-style: normal;
  font-size: 13px;
  color: var(--md-color-apricot-text);
}
.md-range {
  width: 100%;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--md-color-primary) var(--md-fill, 100%), var(--md-color-line) var(--md-fill, 100%));
  cursor: pointer;
}
.md-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--md-color-apricot);
  border: 4px solid var(--md-surface);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.md-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--md-color-apricot);
  border: 4px solid var(--md-surface);
}
.price-read {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  font-size: 13px;
  color: var(--md-color-muted);
}
.price-read b {
  color: var(--md-color-ink);
}
[data-shop-pager] {
  margin-top: 50px;
}
/* the live mini cart */
.mini-lines li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--md-color-line);
}
.mini-product {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.mini-thumb {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: var(--md-radius-sm);
  background: #FFFFFF;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--md-color-line);
}
.mini-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}
.mini-product > span:last-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 13px;
  color: var(--md-color-muted);
}
.mini-product b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--md-color-ink);
}
.mini-product em {
  font-style: normal;
}
.mini-remove {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--md-tonal);
  color: var(--md-color-ink);
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.3s var(--md-ease), color 0.3s var(--md-ease);
}
.mini-remove:hover {
  background: var(--md-color-primary);
  color: var(--md-on-primary);
}
.mini-total {
  display: flex;
  justify-content: space-between;
  padding: 14px 0;
  font-weight: 600;
  color: var(--md-color-ink);
}
.mini-actions {
  display: flex;
  gap: 8px;
}
.mini-actions .md-btn {
  flex: 1 1 0;
  padding-left: 10px;
  padding-right: 10px;
}
/*---- 22.3 Product Details ----*/
.pd-gallery {
  position: relative;
}
.pd-main {
  overflow: hidden;
  border-radius: var(--md-radius);
  background: #FFFFFF;
  box-shadow: 0 0 0 1px var(--md-color-line);
}
.pd-main img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  padding: 40px;
}
.pd-thumbs {
  margin-top: 14px;
  overflow: hidden;
}
.pd-thumbs .swiper-slide {
  overflow: hidden;
  border-radius: var(--md-radius-sm);
  background: #FFFFFF;
  box-shadow: 0 0 0 1px var(--md-color-line);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.3s var(--md-ease), box-shadow 0.3s var(--md-ease);
}
.pd-thumbs .swiper-slide-thumb-active {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--md-color-apricot);
}
.pd-thumbs img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  padding: 8px;
}
.pd-info {
  padding-left: 30px;
}
.pd-title {
  margin: 12px 0 10px;
  font-size: clamp(36px, 3.4vw, 54px);
}
.pd-price {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 22px;
}
.pd-price b {
  font-family: var(--md-ff-heading);
  font-size: 42px;
  font-weight: 500;
  color: var(--md-color-apricot-text);
}
.pd-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 0 0 20px;
  padding: 14px 0;
  border-top: 1px solid var(--md-color-line);
  border-bottom: 1px solid var(--md-color-line);
}
.pd-meta > div {
  display: flex;
  gap: 8px;
  font-size: 14px;
}
.pd-meta dt {
  font-weight: 600;
  color: var(--md-color-ink);
}
.pd-meta dd {
  margin: 0;
}
.pd-meta .in-stock {
  color: #2E7D4F;
  font-weight: 600;
}
.pd-option {
  margin: 0 0 24px;
  padding: 0;
  border: 0;
}
.finish-chip {
  display: inline-block;
  margin: 0 6px 6px 0;
  cursor: pointer;
}
.finish-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.finish-chip span {
  display: inline-block;
  padding: 9px 16px;
  border-radius: 30px;
  background: var(--md-tonal);
  color: var(--md-color-ink);
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.3s var(--md-ease), color 0.3s var(--md-ease);
}
.finish-chip input:checked + span {
  background: var(--md-color-primary);
  color: var(--md-on-primary);
}
.finish-chip input:focus-visible + span {
  outline: 2px solid var(--md-color-apricot);
}
.pd-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.pd-buy .md-stepper {
  height: 56px;
}
.pd-safe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
  padding: 18px 20px;
  border-radius: var(--md-radius);
  background: var(--md-color-linen);
  font-size: 14px;
  font-weight: 600;
  color: var(--md-color-ink);
}
.pd-tabs {
  margin-top: 80px;
}
.tab-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 30px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--md-color-line);
}
.tab-list button {
  padding: 11px 22px;
  border: 0;
  border-radius: 30px;
  background: var(--md-tonal);
  color: var(--md-color-ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s var(--md-ease), color 0.3s var(--md-ease);
}
.tab-list button.is-active {
  background: var(--md-color-primary);
  color: var(--md-on-primary);
}
.tab-panel h3 {
  font-size: 32px;
}
.pd-reviews li {
  display: flex;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--md-color-line);
}
.pd-reviews img {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}
.pd-reviews b {
  display: block;
  color: var(--md-color-ink);
}
.pd-reviews p {
  margin: 6px 0 0;
}
/*---- 22.4 Cart, Checkout And Wishlist ----*/
.table-card {
  overflow: hidden;
  border-radius: var(--md-radius);
  background: var(--md-surface);
}
.cart-table td,
.wish-table td {
  background: var(--md-surface);
}
.line-product {
  display: flex;
  align-items: center;
  gap: 16px;
}
.line-product > span:last-child {
  display: flex;
  flex-direction: column;
}
.line-product b {
  font-family: var(--md-ff-heading);
  font-size: 21px;
  font-weight: 500;
  color: var(--md-color-ink);
}
.line-product small {
  font-size: 13px;
  color: var(--md-color-muted);
}
.line-price,
.line-total {
  font-weight: 600;
  color: var(--md-color-ink);
}
.cart-table .md-stepper {
  height: 44px;
  padding: 4px;
}
.cart-table .md-stepper button {
  width: 36px;
  height: 36px;
}
.cart-table .md-stepper input {
  width: 44px;
}
.cart-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 26px;
}
.coupon-form {
  display: flex;
  gap: 10px;
}
.coupon-form .md-input input {
  min-height: 46px;
  width: 240px;
}
.coupon-form .md-input > i {
  top: 15px;
}
.coupon-status {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--md-color-muted);
}
.coupon-status.is-ok {
  color: #2E7D4F;
}
.coupon-status.is-bad {
  color: #B23A2B;
}
.cart-totals {
  padding: 32px 30px;
  border-radius: var(--md-radius);
  background: var(--md-color-linen);
}
.totals-title,
.box-title {
  margin-bottom: 20px;
  font-size: 32px;
}
.ship-meter p {
  margin: 0 0 8px;
  font-size: 14px;
}
.ship-meter .meter {
  display: block;
  height: 5px;
  border-radius: 5px;
  background: var(--md-color-line);
  overflow: hidden;
}
.ship-meter .meter i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--md-color-primary), var(--md-color-apricot));
  transition: width 0.6s var(--md-ease);
}
.totals-lines {
  margin-top: 18px;
}
.totals-lines li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--md-color-line);
}
.totals-lines small {
  margin-left: 6px;
  color: var(--md-color-muted);
}
.totals-lines b {
  color: var(--md-color-ink);
}
.totals-lines .is-ship {
  flex-direction: column;
}
.ship-options .md-check {
  align-items: center;
  padding: 4px 0;
}
.ship-options .md-check input {
  margin-top: 0;
}
.ship-options .md-check span {
  flex: 1 1 auto;
}
.totals-lines .is-total {
  border-bottom: 0;
}
.totals-lines .is-total span {
  font-weight: 600;
  color: var(--md-color-ink);
}
.totals-lines .is-total b {
  font-family: var(--md-ff-heading);
  font-size: 34px;
  font-weight: 500;
  line-height: 1;
  color: var(--md-color-apricot-text);
}
.totals-cta {
  margin-top: 14px;
}
.cart-empty {
  padding: 70px 30px;
  text-align: center;
  border-radius: var(--md-radius);
  background: var(--md-color-linen);
}
.checkout-box,
.checkout-order {
  padding: 36px 34px;
  border-radius: var(--md-radius);
  background: var(--md-surface);
  box-shadow: 0 0 0 1px var(--md-color-line);
}
.checkout-order {
  margin-bottom: 20px;
}
.order-items li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--md-color-line);
}
.order-items li > span:nth-child(2) {
  flex: 1 1 auto;
  font-size: 15px;
}
.order-items b {
  color: var(--md-color-ink);
}
.checkout-pay {
  display: grid;
  gap: 10px;
  margin: 20px 0;
  padding: 0;
  border: 0;
}
.wish-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.stock-in {
  font-weight: 600;
  color: #2E7D4F;
}

/*======================
23. Blog Pages
========================*/
/*---- 23.1 Blog List ----*/
.post-filter-note {
  margin: 0 0 26px;
  font-size: 15px;
  color: var(--md-color-muted);
}
.post-filter-note b {
  color: var(--md-color-ink);
}
.blog-list {
  display: flex;
  flex-direction: column;
  gap: 50px;
}
.blog-post {
  overflow: hidden;
  border-radius: var(--md-radius);
  background: var(--md-surface);
  box-shadow: 0 0 0 1px var(--md-color-line);
}
.post-media {
  position: relative;
}
.post-media .md-zoom,
.post-gallery .swiper-slide {
  display: block;
  overflow: hidden;
  aspect-ratio: 870 / 500;
}
.post-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.post-media .md-date {
  left: 30px;
  bottom: 0;
  z-index: 3;
}
.post-play {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -48px 0 0 -48px;
  z-index: 2;
}
.post-gallery {
  overflow: hidden;
}
.post-gallery-nav {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 40px;
  background: rgba(var(--md-color-night-rgb), 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #FFFFFF;
}
.post-gallery-nav .md-arrow {
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}
.post-gallery-count {
  font-family: var(--md-ff-heading);
  font-size: 15px;
}
.post-quote {
  position: relative;
  margin: 0;
  padding: 60px 56px;
  background: var(--md-color-night);
  color: rgba(255, 255, 255, 0.72);
  overflow: hidden;
}
.post-quote > i {
  font-size: 36px;
  color: var(--md-color-apricot);
}
.post-quote blockquote {
  margin: 16px 0 12px;
}
.post-quote p {
  margin: 0;
  font-family: var(--md-ff-heading);
  font-size: clamp(26px, 2.6vw, 36px);
  font-style: italic;
  line-height: 1.35;
  color: #FFF8F0;
}
.post-quote figcaption {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--md-color-apricot);
}
.post-content {
  padding: 34px 40px 38px;
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  margin-bottom: 14px;
  font-size: 14px;
  color: var(--md-color-muted);
}
.post-meta i {
  margin-right: 8px;
  color: var(--md-color-apricot-text);
}
.post-meta .md-tag a {
  color: var(--md-color-apricot-text);
}
.post-heading {
  margin-bottom: 14px;
  font-size: clamp(26px, 2.2vw, 34px);
  font-weight: 600;
}
.post-heading a {
  color: var(--md-color-ink);
}
.post-heading a:hover {
  color: var(--md-color-apricot-text);
}
.blog-page-gap {
  margin-top: 60px;
}
.md-blog-page .md-pagination {
  margin-top: 60px;
}
/* round page numbers (the shop pager draws the same) */
.md-pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.md-pagination a,
.md-pagination button,
.md-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 50px;
  height: 50px;
  padding: 0 6px;
  border: 0;
  border-radius: 50%;
  background: var(--md-tonal);
  color: var(--md-color-ink);
  font-family: var(--md-ff-heading);
  font-size: 1.15rem;
  font-weight: 600;
  transition: background-color 0.3s var(--md-ease), color 0.3s var(--md-ease);
}
.md-pagination a:hover,
.md-pagination button:hover,
.md-pagination [aria-current="page"] {
  background: var(--md-color-primary);
  color: var(--md-on-primary);
}
.md-pagination button:disabled {
  opacity: 0.4;
  pointer-events: none;
}
/*---- 23.2 Article Parts ----*/
/* the date on a post photo, the byline face, long-form text, the gallery and
   the previous / next pair */
.post-date {
  position: absolute;
  left: 22px;
  bottom: 22px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  padding: 12px 12px 10px;
  border-radius: 18px;
  background: var(--md-surface);
  color: var(--md-color-muted);
  line-height: 1;
  text-align: center;
}
.post-date b {
  color: var(--md-color-ink);
  font-family: var(--md-ff-heading);
  font-size: 1.8rem;
  font-weight: 600;
}
.post-date span {
  margin-top: 5px;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.post-meta li img {
  width: 28px;
  height: 28px;
  margin-inline-end: 8px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
}
.md-content > * + * {
  margin-top: 0;
}
.md-content h3 {
  margin-top: 34px;
  font-size: clamp(24px, 2vw, 30px);
}
.md-content ul,
.md-content ol {
  margin: 0 0 22px;
  padding-left: 22px;
}
.md-content li + li {
  margin-top: 8px;
}
.md-content ul li::marker {
  color: var(--md-color-apricot);
}
.md-content a:not(.md-btn) {
  color: var(--md-color-apricot-text);
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
}
.md-content blockquote {
  position: relative;
  margin: 36px 0;
  padding: 34px 40px 32px 92px;
  border-radius: var(--md-radius);
  background: var(--md-color-lilac-soft);
}
.md-content blockquote::before {
  content: "\201C";
  position: absolute;
  left: 30px;
  top: 10px;
  color: var(--md-color-apricot);
  font-family: var(--md-ff-heading);
  font-size: 96px;
  line-height: 1;
}
.md-content blockquote p {
  margin: 0;
  color: var(--md-color-ink);
  font-family: var(--md-ff-heading);
  font-size: 1.5rem;
  font-style: italic;
  line-height: 1.5;
}
.md-content blockquote cite {
  display: block;
  margin-top: 14px;
  color: var(--md-color-apricot-text);
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.detail-hero {
  height: 460px;
  margin-bottom: 40px;
}
.detail-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin: 10px 0 40px;
}
.detail-gallery a {
  display: block;
  overflow: hidden;
  border-radius: var(--md-radius);
}
.detail-gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.share-label {
  color: var(--md-color-ink);
  font-weight: 500;
}
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 46px;
}
.post-nav a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px 26px;
  border-radius: var(--md-radius);
  background: var(--md-color-linen);
  color: var(--md-color-ink);
  transition: background-color 0.4s var(--md-ease), color 0.4s var(--md-ease);
}
.post-nav .pn-next {
  text-align: right;
}
.post-nav span {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--md-color-apricot-text);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.post-nav .pn-next span {
  justify-content: flex-end;
}
.post-nav b {
  font-family: var(--md-ff-heading);
  font-size: 1.3rem;
  font-weight: 600;
}
.post-nav a:hover {
  background: var(--md-color-primary);
  color: var(--md-on-primary);
}
.post-nav a:hover span {
  color: var(--md-on-primary);
}
/*---- 23.3 Blog Details ----*/
.post-single-title {
  margin-bottom: 30px;
  font-size: clamp(36px, 3.6vw, 58px);
}
.post-tags-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 40px;
  padding: 24px 0;
  border-top: 1px solid var(--md-color-line);
  border-bottom: 1px solid var(--md-color-line);
}
.share-row.is-inline {
  margin: 0;
  padding: 0;
  border: 0;
}
.share-row .md-social button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--md-tonal);
  color: var(--md-color-ink);
  cursor: pointer;
}
.author-box {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 40px;
  padding: 34px;
  border-radius: var(--md-radius);
  background: var(--md-color-linen);
}
.author-box img {
  flex: 0 0 120px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  box-shadow: 0 0 0 4px var(--md-color-linen), 0 0 0 5px var(--md-color-apricot);
}
.author-name {
  margin: 4px 0 6px;
  font-size: 30px;
}
.author-box p {
  margin: 0;
}
.comments {
  margin-top: 60px;
}
.comments-title {
  margin-bottom: 24px;
  font-size: 34px;
}
.comment {
  margin-bottom: 20px;
}
.comment > img {
  float: left;
  width: 64px;
  height: 64px;
  margin-right: 20px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}
.comment-body {
  overflow: hidden;
  padding: 22px 26px;
  border-radius: var(--md-radius);
  background: var(--md-color-linen);
}
.comment-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  margin-bottom: 8px;
}
.comment-head b {
  font-family: var(--md-ff-heading);
  font-size: 21px;
  font-weight: 600;
  color: var(--md-color-ink);
}
.comment-head span {
  font-size: 13px;
  color: var(--md-color-muted);
}
.comment-head .md-link {
  margin-left: auto;
  font-size: 11px;
}
.comment-body p {
  margin: 0;
}
.comment-children {
  clear: both;
  margin: 20px 0 0 84px;
}
.comment-form {
  margin-top: 40px;
  padding: 40px;
  border-radius: var(--md-radius);
  box-shadow: 0 0 0 1px var(--md-color-line);
}
.reply-note {
  font-size: 15px;
}

/*======================
24. Contact, Account And Utility Pages
========================*/
/*---- 24.1 Contact ----*/
.md-contact-cards {
  position: relative;
  z-index: 3;
  margin-top: -70px;
}
.contact-card {
  height: 100%;
  padding: 36px 34px 32px;
  border-radius: var(--md-radius);
  background: var(--md-surface);
  box-shadow: var(--md-shadow-lg), 0 0 0 1px var(--md-color-line);
}
.contact-card .cc-ic {
  display: block;
  width: 64px;
  height: 64px;
  margin-bottom: 20px;
}
.contact-card.is-live b {
  color: var(--md-color-apricot);
  font-family: var(--md-ff-body);
  font-size: inherit;
  font-weight: 500;
}
/* the map, greyed to sit with the palette, and the hours card over it */
.map-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--md-radius);
  background: var(--md-color-linen);
}
.map-frame iframe {
  display: block;
  width: 100%;
  height: 480px;
  border: 0;
  filter: grayscale(0.7) sepia(0.15);
}
[data-theme="dark"] .map-frame iframe {
  filter: grayscale(1) invert(0.9) contrast(0.9);
}
.map-card {
  position: absolute;
  left: 30px;
  top: 30px;
  width: 300px;
  padding: 24px 26px 12px;
  border-radius: var(--md-radius-sm);
  background: var(--md-surface);
  box-shadow: var(--md-shadow-lg);
}
.map-card .md-rows {
  margin-top: 14px;
}
.map-card .md-rows li {
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 10px;
  padding: 11px 0;
  font-size: 0.88rem;
}
.map-card .md-rows li:first-child {
  border-top: 0;
}
.map-card .md-rows li:last-child {
  border-bottom: 0;
}
.cc-title {
  margin-bottom: 10px;
  font-size: 30px;
}
.contact-card p {
  font-size: 16px;
}
.contact-card.is-live {
  background: var(--md-color-night);
  box-shadow: var(--md-shadow-lg);
}
.contact-card.is-live .cc-title {
  color: #FFF8F0;
}
.contact-card.is-live .md-icon-square {
  background: rgba(var(--md-color-apricot-rgb), 0.16);
  color: var(--md-color-apricot);
}
.contact-card.is-live b {
  font-family: var(--md-ff-heading);
  font-size: 23px;
  font-weight: 500;
  color: #FFF8F0;
}
.contact-copy .md-lead {
  margin: 20px 0 30px;
}
.map-frame.is-tall {
  height: 100%;
  min-height: 560px;
}
.map-frame.is-tall iframe {
  height: 100%;
  min-height: 560px;
}
/*---- 24.2 Account ----*/
.account-card {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  max-width: 1080px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--md-radius);
  background: var(--md-surface);
  box-shadow: var(--md-shadow-lg), 0 0 0 1px var(--md-color-line);
}
.account-card.is-narrow {
  grid-template-columns: 1fr;
  max-width: 560px;
  text-align: center;
}
.account-side {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 560px;
  padding: 44px;
  isolation: isolate;
}
.account-side > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.account-side::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(var(--md-color-night-rgb), 0.2) 0%, rgba(var(--md-color-night-rgb), 0.92) 100%);
}
.side-logo {
  height: 50px;
  width: auto;
  margin-bottom: 26px;
}
.side-copy blockquote {
  margin: 0;
}
.side-copy p {
  margin: 0 0 8px;
  font-family: var(--md-ff-heading);
  font-size: 30px;
  font-style: italic;
  line-height: 1.3;
  color: #FFF8F0;
}
.side-copy cite {
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--md-color-apricot);
}
.account-form {
  padding: 56px 54px;
}
.account-title {
  margin-bottom: 10px;
  font-size: clamp(32px, 2.8vw, 44px);
}
.account-form > p {
  margin-bottom: 26px;
}
.account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.account-row .md-link {
  font-size: 12px;
}
.account-switch {
  margin: 24px 0 0 !important;
  font-size: 15px;
}
.account-switch a {
  font-weight: 600;
  color: var(--md-color-apricot-text);
}
.password-toggle {
  position: absolute;
  right: 10px;
  top: 9px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--md-color-apricot-text);
  cursor: pointer;
}
.password-toggle:hover {
  background: var(--md-tonal);
}
.pass-meter {
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}
.pass-meter span {
  height: 4px;
  border-radius: 4px;
  background: var(--md-color-line);
  transition: background-color 0.3s var(--md-ease);
}
.pass-meter b {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--md-color-muted);
}
.pass-meter[data-level="1"] span:nth-child(-n+1),
.pass-meter[data-level="2"] span:nth-child(-n+2),
.pass-meter[data-level="3"] span:nth-child(-n+3),
.pass-meter[data-level="4"] span:nth-child(-n+4) {
  background: var(--md-color-apricot);
}
.pass-meter[data-level="4"] span {
  background: #2E7D4F;
}
.match-note {
  display: block;
  margin-top: 6px;
  font-size: 13px;
}
.match-note.is-ok {
  color: #2E7D4F;
}
.match-note.is-bad {
  color: #B23A2B;
}
.account-card.is-narrow .done-mark {
  margin-bottom: 18px;
}
/*---- 24.3 Coming Soon And 404 ----*/
.md-soon {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding: 80px 0;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.soon-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.soon-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
}
.md-soon::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 40%, rgba(var(--md-color-night-rgb), 0.5) 0%, rgba(var(--md-color-night-rgb), 0.92) 75%);
}
.soon-inner {
  max-width: 780px;
  margin: 0 auto;
}
.soon-logo {
  display: block;
}
.soon-logo img {
  display: block;
}
.soon-title span {
  display: block;
  white-space: nowrap;
}
.soon-logo img {
  height: 60px;
  width: auto;
  margin: 0 auto 36px;
}
.md-soon .hero-kicker {
  justify-content: center;
}
.soon-title {
  margin: 0 0 20px;
  font-size: clamp(44px, 6vw, 92px);
  line-height: 1;
}
.soon-lead {
  max-width: 560px;
  margin: 0 auto 36px;
  font-size: 19px;
}
.soon-count {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 560px;
  margin: 0 auto 16px;
}
.soon-count span {
  display: flex;
  flex-direction: column;
  padding: 20px 0 16px;
  border-radius: var(--md-radius);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.soon-count b {
  font-family: var(--md-ff-heading);
  font-size: 50px;
  font-weight: 500;
  line-height: 1;
  color: var(--md-color-apricot);
  font-variant-numeric: tabular-nums;
}
.soon-date {
  margin: 0 0 30px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.72);
}
.soon-form {
  max-width: 480px;
  margin: 0 auto 30px;
  text-align: left;
}
.md-soon .md-social {
  justify-content: center;
}
.error-code {
  display: block;
  margin: -10px 0 0;
  font-family: var(--md-ff-heading);
  font-size: clamp(130px, 18vw, 260px);
  font-style: italic;
  font-weight: 500;
  line-height: 0.85;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--md-color-apricot);
}
.error-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 34px;
}

/*======================
25. Shared Page Parts
========================*/
/* full-width buttons, data tables, empty and done states the inner pages share */
.md-btn.is-block {
  justify-content: center;
  width: 100%;
}
.md-btn:disabled,
.md-btn.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}
/* anything a filter, a search or a pager has taken out of view (shop, journal, FAQ, workshops) */
.is-filtered-out {
  display: none;
}
/* a text link drawn on a <button> (reply, clear filters) */
button.md-link {
  padding: 0;
  border: 0;
  background: none;
}
.md-table {
  width: 100%;
  border-collapse: collapse;
}
.md-table th,
.md-table td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--md-color-line);
  text-align: left;
  vertical-align: middle;
}
.md-table th {
  background: var(--md-color-ground);
  color: var(--md-color-ink);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.md-table tbody th {
  width: 34%;
  background: transparent;
}
.visit-done {
  padding: 70px 50px;
  border-radius: var(--md-radius);
  background: var(--md-color-linen);
  text-align: center;
}
.visit-done:focus {
  outline: none;
}
.done-ref b {
  color: var(--md-color-apricot-text);
  font-family: var(--md-ff-heading);
  font-size: 1.5rem;
}
.lib-empty {
  padding: 30px;
  border-radius: var(--md-radius);
  background: var(--md-color-linen);
}
.product-cat {
  display: block;
  margin-bottom: 6px;
  color: var(--md-color-apricot-text);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/*======================
26. Booking Steps
========================*/
/*---- 26.1 Visit Steps ----*/
/* one column per step, however many steps the form has */
.visit-steps {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 10px;
  margin-bottom: 40px;
}
.visit-steps li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 16px;
  border-radius: var(--md-radius);
  background: var(--md-color-linen);
  color: var(--md-color-muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.35s var(--md-ease), color 0.35s var(--md-ease);
}
.visit-steps b {
  font-family: var(--md-ff-heading);
  font-size: 22px;
  font-style: italic;
  font-weight: 500;
  color: var(--md-color-apricot-text);
}
.visit-steps li.is-done {
  color: var(--md-color-ink);
}
.visit-steps li.is-done::after {
  content: "\f00c";
  margin-left: auto;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 12px;
  color: var(--md-color-apricot-text);
}
.visit-steps li.is-active {
  background: var(--md-color-primary);
  color: var(--md-on-primary);
}
/* the step number on the active (sage) tab: the tab's own text colour, softened */
.visit-steps li.is-active b {
  color: var(--md-on-primary);
  opacity: 0.72;
}
.visit-step {
  margin: 0;
  padding: 0;
  border: 0;
}
.step-legend {
  margin-bottom: 24px;
  font-family: var(--md-ff-heading);
  font-size: clamp(28px, 2.6vw, 40px);
  font-weight: 500;
  line-height: 1.15;
  color: var(--md-color-ink);
}
.step-date {
  max-width: 460px;
  margin-top: 26px;
}
.md-choice.is-check .choice-face {
  display: flex;
  align-items: center;
  gap: 14px;
}
.md-choice.is-check .choice-face i {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--md-color-linen);
  color: var(--md-color-apricot-text);
}
.party-row {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}
.party-item .md-label {
  margin-bottom: 10px;
}
.kids-ages {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 24px;
  margin-top: 30px;
}
.kid-room {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--md-color-apricot-text);
}
.kids-note {
  margin: 24px 0 0;
  padding: 16px 20px;
  border-radius: var(--md-radius-sm);
  background: var(--md-color-linen);
  font-size: 15px;
}
.kids-note.is-warn {
  box-shadow: inset 3px 0 0 var(--md-color-apricot);
}
.visit-nav {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid var(--md-color-line);
}
.visit-nav [data-visit-next],
.visit-nav [data-visit-submit] {
  margin-left: auto;
}
/*---- 26.2 Booking Choices ----*/
/* session, therapist and format cards: an illustrated icon or a face, then the words */
.md-choice.is-session .choice-face,
.md-choice.is-format .choice-face,
.md-choice.is-person .choice-face {
  display: flex;
  align-items: center;
  gap: 16px;
}
.md-choice.is-session .choice-face img,
.md-choice.is-format .choice-face img {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
}
.md-choice.is-person .choice-face > img {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}
.choice-any {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--md-color-apricot-soft);
  color: var(--md-color-apricot-text);
  font-size: 1.1rem;
}
.choice-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.choice-text small {
  display: block;
}
.choice-next {
  margin-top: 4px;
  color: var(--md-color-primary);
  font-weight: 500;
}
.md-choice.is-off {
  opacity: 0.45;
  cursor: not-allowed;
}
.step-note {
  margin: 16px 0 0;
  color: var(--md-color-muted);
  font-size: 0.88rem;
}
.step-note:empty {
  display: none;
}
.bk-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 22px;
}
.bk-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 4px;
  border: 0;
  border-radius: var(--md-radius-sm);
  background: var(--md-surface);
  color: var(--md-color-muted);
  font-size: 0.75rem;
  transition: background-color 0.3s var(--md-ease), color 0.3s var(--md-ease);
}
.bk-day b {
  color: var(--md-color-ink);
  font-family: var(--md-ff-heading);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.1;
}
.bk-day small {
  color: var(--md-color-primary);
  font-size: 0.7rem;
  font-weight: 500;
}
.bk-day:hover {
  background: var(--md-tonal-2);
}
.bk-day.is-active {
  background: var(--md-color-primary);
  color: var(--md-on-primary);
}
.bk-day.is-active b,
.bk-day.is-active small {
  color: var(--md-on-primary);
}
.bk-day.is-closed {
  opacity: 0.45;
  cursor: not-allowed;
}
.bk-times {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 10px;
}
.bk-time {
  padding: 13px 8px;
  border: 0;
  border-radius: var(--md-radius-sm);
  background: var(--md-surface);
  color: var(--md-color-ink);
  font-size: 0.92rem;
  font-weight: 500;
  transition: background-color 0.3s var(--md-ease), color 0.3s var(--md-ease), box-shadow 0.3s var(--md-ease);
}
.bk-time:hover {
  background: var(--md-tonal-2);
}
.bk-time.is-active {
  background: var(--md-color-apricot-soft);
  color: var(--md-color-apricot-text);
  box-shadow: inset 0 0 0 1.5px var(--md-color-apricot);
}
.vs-who {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 6px 0 22px;
}
.vs-who img {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
}
.vs-who img.is-any {
  opacity: 0;
  width: 0;
  box-shadow: none;
}
.vs-who > span {
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
}
.vs-who b {
  font-size: 1.02rem;
  font-weight: 500;
}
.vs-note {
  margin: 20px 0 0;
  padding: 16px 18px;
  border-radius: var(--md-radius-sm);
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.85rem;
  line-height: 1.6;
}
/*---- 26.3 Confirmation ----*/
.visit-done {
  padding: 60px 50px;
  text-align: center;
  border-radius: var(--md-radius);
  background: var(--md-color-linen);
}
.visit-done:focus {
  outline: none;
}
.done-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  margin-bottom: 22px;
  border-radius: 50%;
  background: var(--md-color-primary);
  color: var(--md-color-apricot);
  font-size: 30px;
}
.done-ref b {
  font-family: var(--md-ff-heading);
  font-size: 24px;
  color: var(--md-color-apricot-text);
}
.done-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
}
/*---- 26.4 Live Summary ----*/
.visit-summary {
  position: sticky;
  top: 110px;
  padding: 36px 32px;
  border-radius: var(--md-radius);
  box-shadow: var(--md-shadow-lg);
}
.vs-title {
  margin: 8px 0 18px;
  font-size: 32px;
}
.vs-rows {
  margin: 0 0 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.vs-rows > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.vs-rows dt {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--md-color-apricot);
}
.vs-rows dd {
  margin: 0;
  color: #FFF8F0;
  text-align: right;
}
.vs-label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--md-color-apricot);
}
.vs-kids,
.vs-needs {
  margin-bottom: 20px;
}
.vs-kids li,
.vs-needs li {
  padding: 3px 0 3px 16px;
  position: relative;
  font-size: 15px;
}
.vs-kids li::before,
.vs-needs li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--md-color-apricot);
}
.vs-help {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 14px;
}
.vs-help img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}
.vs-help p {
  margin: 0;
}
.vs-help b {
  display: block;
  color: #FFF8F0;
}

/*======================
27. Matcher
========================*/
/*---- 27.1 Questions ----*/
.matcher-form {
  display: grid;
  gap: 20px;
}
.q-card {
  height: 100%;
  margin: 0;
  padding: 30px 32px 32px;
  border: 0;
  border-radius: var(--md-radius);
  background: var(--md-surface);
}
.q-card legend {
  display: flex;
  align-items: center;
  gap: 14px;
  float: left;
  width: 100%;
  margin-bottom: 22px;
  color: var(--md-color-ink);
  font-family: var(--md-ff-heading);
  font-size: 1.35rem;
  font-weight: 600;
}
.q-card legend + * {
  clear: both;
}
.q-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--md-color-apricot-soft);
  color: var(--md-color-apricot-text);
  font-size: 0.9rem;
  font-style: italic;
}
.q-card.is-select .md-field {
  margin: 0;
}
/* one row per question; the concerns wrap in fives */
.q-opts {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 10px;
}
.q-opts.is-wide {
  grid-auto-flow: row;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.q-opt {
  position: relative;
  display: block;
  margin: 0;
  cursor: pointer;
}
.q-opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.q-opt > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
  min-height: 64px;
  padding: 14px 10px;
  border-radius: var(--md-radius-sm);
  background: var(--md-color-ground);
  color: var(--md-color-ink);
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  transition: background-color 0.3s var(--md-ease), color 0.3s var(--md-ease), box-shadow 0.3s var(--md-ease);
}
.q-opt > span i {
  color: var(--md-color-apricot-text);
  font-size: 1.05rem;
}
.q-opt > span img {
  width: 44px;
  height: 44px;
}
.q-opt:hover > span {
  background: var(--md-tonal-2);
}
.q-opt input:checked + span {
  background: rgba(var(--md-color-primary-rgb), 0.12);
  box-shadow: inset 0 0 0 1.5px var(--md-color-primary);
}
.q-opt input:focus-visible + span {
  outline: 2px solid var(--md-color-primary);
  outline-offset: 2px;
}
/*---- 27.2 Results ----*/
.match-results {
  position: sticky;
  top: 120px;
  padding: 36px 34px;
  border-radius: var(--md-radius-lg);
  background: var(--md-color-linen);
}
.results-title {
  margin-bottom: 24px;
  font-size: 2rem;
}
.match-cards {
  display: grid;
  gap: 14px;
  margin-bottom: 24px;
}
.mc-card {
  padding: 22px 22px 24px;
  border-radius: var(--md-radius);
  background: var(--md-surface);
}
.mc-card.is-best {
  box-shadow: inset 0 0 0 1.5px var(--md-color-apricot);
}
.mc-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.mc-head img {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}
.mc-who {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  color: var(--md-color-muted);
  font-size: 0.82rem;
}
.mc-who b {
  color: var(--md-color-ink);
  font-size: 1rem;
  font-weight: 500;
}
.mc-rank {
  flex-shrink: 0;
  color: var(--md-color-apricot-text);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.mc-why {
  margin: 0 0 10px;
  color: var(--md-color-primary);
  font-size: 0.85rem;
  font-weight: 500;
}
.mc-card .md-rows {
  margin-bottom: 18px;
}
.mc-card .md-rows li {
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 12px;
  padding: 9px 0;
  font-size: 0.85rem;
}
.mc-card .md-rows li:first-child {
  border-top: 0;
}

/*======================
28. Fee Calculators
========================*/
.calc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 90px;
}
.calc-copy .md-lead {
  margin: 20px 0 28px;
}
.band-rows li {
  transition: background-color 0.4s var(--md-ease), padding 0.4s var(--md-ease);
}
.band-rows li.is-on {
  padding-left: 16px;
  padding-right: 16px;
  border-radius: var(--md-radius-sm);
  background: var(--md-color-primary);
  color: var(--md-on-primary);
}
.band-rows li.is-on span,
.band-rows li.is-on b {
  color: var(--md-on-primary);
}
.calc-card {
  padding: 40px;
  border-radius: var(--md-radius-lg);
  background: var(--md-surface);
  box-shadow: var(--md-shadow-lg);
}
.calc-title {
  margin-bottom: 24px;
  font-size: 1.6rem;
}
.calc-card .md-field {
  margin-bottom: 18px;
}
.calc-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.calc-pair.is-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.calc-pair .md-stepper {
  display: flex;
  width: 100%;
}
.calc-pair .md-stepper input {
  flex: 1;
  min-width: 0;
}
.calc-result {
  margin-top: 8px;
  padding: 26px 28px 14px;
  border-radius: var(--md-radius);
  background: var(--md-color-night);
  color: rgba(255, 255, 255, 0.72);
}
.calc-label {
  display: block;
  color: var(--md-color-apricot);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.calc-figure {
  display: block;
  margin: 4px 0 14px;
  color: #FFFFFF;
  font-family: var(--md-ff-heading);
  font-size: 3.6rem;
  font-weight: 600;
  line-height: 1;
}
.calc-result .md-rows li {
  grid-template-columns: 150px minmax(0, 1fr);
  padding: 11px 0;
  border-color: rgba(255, 255, 255, 0.1);
}
.calc-result .md-rows span {
  color: rgba(255, 255, 255, 0.55);
}
.calc-result .md-rows b {
  color: #FFFFFF;
}
.plan-table td,
.plan-table th {
  padding-top: 14px;
  padding-bottom: 14px;
}
.plan-table tbody th {
  color: var(--md-color-ink);
  font-family: var(--md-ff-heading);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.plan-table td {
  vertical-align: middle;
}
.plan-faces {
  display: inline-flex;
  margin-inline-end: 14px;
  vertical-align: middle;
}
.plan-faces img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 3px var(--md-surface);
}
.plan-faces img + img {
  margin-inline-start: -10px;
}
.plan-names {
  color: var(--md-color-muted);
  font-size: 0.88rem;
  vertical-align: middle;
}

/*======================
29. Self-Check
========================*/
.check-tabs {
  justify-content: center;
  margin-top: 30px;
}
.sc-panel[hidden] {
  display: none;
}
.sc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  align-items: start;
  gap: 40px;
  margin-top: 50px;
}
.sc-form {
  display: grid;
  gap: 14px;
}
.sc-q {
  margin: 0;
  padding: 24px 26px;
  border: 0;
  border-radius: var(--md-radius);
  background: var(--md-surface);
}
.sc-q legend {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  float: left;
  width: 100%;
  margin-bottom: 16px;
  color: var(--md-color-ink);
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.45;
}
.sc-q legend + * {
  clear: both;
}
.sc-n {
  flex-shrink: 0;
  color: var(--md-color-apricot-text);
  font-family: var(--md-ff-heading);
  font-size: 1.15rem;
  font-style: italic;
  font-weight: 600;
}
.sc-opts {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.sc-result {
  position: sticky;
  top: 120px;
  padding: 34px 32px;
  border-radius: var(--md-radius-lg);
  background: var(--md-color-night);
  color: rgba(255, 255, 255, 0.72);
}
.sc-score {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 8px 0 16px;
}
.sc-score b {
  color: #FFFFFF;
  font-family: var(--md-ff-heading);
  font-size: 4rem;
  font-weight: 600;
  line-height: 1;
}
.sc-bar {
  display: block;
  height: 8px;
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.1);
}
.sc-bar > span {
  background: var(--md-color-apricot);
}
.sc-band {
  margin-bottom: 6px;
}
.sc-band b {
  display: block;
  margin-bottom: 4px;
  color: var(--md-color-apricot);
  font-family: var(--md-ff-heading);
  font-size: 1.5rem;
  font-weight: 600;
}
.sc-count {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.82rem;
}
.sc-crisis {
  margin: 18px 0;
  padding: 18px 20px;
  border-radius: var(--md-radius-sm);
  background: var(--md-color-apricot);
  color: var(--md-color-night);
}
.sc-crisis b {
  display: block;
  margin-bottom: 4px;
  color: var(--md-color-night);
  font-size: 1rem;
}
.sc-crisis p {
  margin: 0;
  font-size: 0.9rem;
}
.sc-crisis a {
  color: var(--md-color-night);
  font-weight: 600;
  text-decoration: underline;
}
.sc-result .md-btn-row {
  margin-top: 22px;
}

/*======================
30. Therapist Pages
========================*/
/*---- 30.1 Filters ----*/
.tfilter-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  padding: 26px 28px 8px;
  border-radius: var(--md-radius);
  background: var(--md-surface);
}
.tfilter-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 26px 0 22px;
}
.tfilter-note p {
  margin: 0;
}
[data-tf-grid] > [hidden] {
  display: none;
}
/*---- 30.2 Profile ----*/
.profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: 90px;
}
.profile-photo {
  height: 640px;
}
.profile-photo.is-cut {
  background: radial-gradient(circle at 50% 38%, var(--md-color-apricot-soft) 0%, var(--md-color-lilac-soft) 70%);
}
.profile-photo.is-cut img {
  object-fit: contain;
  object-position: center bottom;
}
.profile-copy .md-lead {
  margin: 20px 0 26px;
}
.profile-copy .md-rows {
  margin-bottom: 28px;
}
.profile-copy .slot-chips {
  margin-bottom: 30px;
}
.profile-copy .slot-chip {
  background: var(--md-color-ground);
}
.week-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 90px;
}
.week-copy .md-lead {
  margin: 20px 0 30px;
}
.week-load .calc-label {
  color: var(--md-color-apricot-text);
}
.week-load .md-progress {
  display: block;
  margin: 12px 0 14px;
}
.week-load p {
  margin: 0;
  font-size: 0.92rem;
}
.week-card {
  padding: 40px;
  border-radius: var(--md-radius-lg);
  background: var(--md-surface);
}
.week-rows li.is-off b {
  color: var(--md-color-muted);
  font-weight: 300;
}
.week-rows li.is-today {
  padding-left: 16px;
  padding-right: 16px;
  border-radius: var(--md-radius-sm);
  background: var(--md-color-apricot-soft);
}
.week-rows li.is-today span {
  color: var(--md-color-apricot-text);
}

/* help cards on a white section take the page ground */
.md-help.md-ground-surface .help-card {
  background: var(--md-color-ground);
}

/*======================
31. Service Pages
========================*/
.svc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 90px;
}
.svc-photo {
  height: 600px;
}
.svc-ic {
  display: block;
  width: 72px;
  height: 72px;
  margin-bottom: 18px;
}
.svc-copy .md-lead {
  margin: 20px 0 26px;
}
.svc-copy .md-rows {
  margin-bottom: 32px;
}
.svc-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 10px;
}
.svc-steps.is-four {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
}
.svc-step {
  position: relative;
  padding: 38px 34px 34px;
  border-radius: var(--md-radius);
  background: var(--md-surface);
}
.md-process .svc-step {
  background: var(--md-color-ground);
}
.svc-num {
  display: block;
  margin-bottom: 18px;
  color: var(--md-color-apricot-text);
  font-family: var(--md-ff-heading);
  font-size: 2.6rem;
  font-style: italic;
  font-weight: 600;
  line-height: 1;
}
.svc-step h3 {
  margin-bottom: 10px;
  font-size: 1.45rem;
}
.svc-step p {
  margin: 0;
}
.concern-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}
.concern-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 30px 18px 26px;
  border-radius: var(--md-radius);
  background: var(--md-surface);
  color: var(--md-color-ink);
  text-align: center;
  transition: transform 0.45s var(--md-ease), box-shadow 0.45s var(--md-ease);
}
.concern-tile:hover {
  color: var(--md-color-ink);
  transform: translateY(-5px);
  box-shadow: var(--md-shadow);
}
.concern-tile img {
  width: 64px;
  height: 64px;
}
.concern-tile b {
  font-family: var(--md-ff-heading);
  font-size: 1.1rem;
  font-weight: 600;
}
.process-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 80px;
}
.process-copy .md-lead {
  margin: 20px 0 30px;
}
.fee-card {
  padding: 30px 40px;
  border-radius: var(--md-radius-lg);
  background: var(--md-surface);
}

/*======================
32. Workshop Pages
========================*/
.next-card {
  position: relative;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
  overflow: hidden;
  padding: 26px 40px 26px 26px;
  border-radius: var(--md-radius-lg);
}
.next-card > img {
  width: 260px;
  height: 180px;
  border-radius: var(--md-radius);
  object-fit: cover;
}
.next-copy .md-status {
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.72);
}
.next-title {
  margin-bottom: 6px;
  font-size: 2rem;
}
.next-date {
  margin: 0;
}
.next-count {
  display: flex;
  gap: 10px;
}
.next-count span {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 86px;
  padding: 16px 10px 12px;
  border-radius: var(--md-radius-sm);
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.next-count b {
  color: var(--md-color-apricot);
  font-family: var(--md-ff-heading);
  font-size: 2.2rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.1;
}
.ws-filter {
  margin-bottom: 34px;
}
.ws-filter span {
  margin-inline-start: 4px;
  color: var(--md-color-apricot-text);
  font-size: 0.78rem;
}
.ws-filter .is-active span {
  color: inherit;
  opacity: 0.8;
}
[data-ws-list] > .is-filtered-out {
  display: none;
}
.agenda-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 90px;
}
.agenda-rows {
  margin-top: 28px;
}
.agenda-rows li {
  grid-template-columns: 110px minmax(0, 1fr);
}
.agenda-rows span {
  color: var(--md-color-apricot-text);
}

/*======================
33. About Page
========================*/
.about-photos {
  position: relative;
  height: 620px;
}
.ap-main {
  position: absolute;
  left: 0;
  top: 0;
  width: 74%;
  height: 520px;
}
.ap-small {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46%;
  height: 300px;
  border: 8px solid var(--md-surface);
}
.ap-badge {
  position: absolute;
  left: 30px;
  bottom: 40px;
  display: flex;
  flex-direction: column;
  padding: 18px 24px;
  border-radius: var(--md-radius);
  background: var(--md-color-primary);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.82rem;
  box-shadow: var(--md-shadow-lg);
}
.ap-badge b {
  color: #FFFFFF;
  font-family: var(--md-ff-heading);
  font-size: 2.6rem;
  line-height: 1;
}
.figure-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  text-align: center;
}
.figure + .figure {
  border-inline-start: 1px solid var(--md-color-line);
}
.figure b {
  color: var(--md-color-ink);
  font-family: var(--md-ff-heading);
  font-size: 3.6rem;
  font-weight: 600;
  line-height: 1;
}
.figure > span {
  color: var(--md-color-muted);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.value-card {
  height: 100%;
  padding: 40px 36px;
  border-radius: var(--md-radius);
  background: var(--md-color-ground);
}
.value-card img {
  width: 72px;
  height: 72px;
  margin-bottom: 22px;
}
.value-card h3 {
  margin-bottom: 12px;
  font-size: 1.5rem;
}
.value-card p {
  margin: 0;
}
.story-line {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.story-line::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 22px;
  height: 2px;
  background: linear-gradient(90deg, var(--md-color-apricot), var(--md-color-primary));
  opacity: 0.4;
}
.story-line li {
  position: relative;
  padding-top: 60px;
}
.story-line li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--md-color-apricot);
  box-shadow: 0 0 0 6px var(--md-color-lilac);
}
.story-year {
  display: block;
  margin-bottom: 8px;
  color: var(--md-color-apricot-text);
  font-family: var(--md-ff-heading);
  font-size: 2rem;
  font-style: italic;
  font-weight: 600;
}
.story-line h3 {
  margin-bottom: 8px;
  font-size: 1.4rem;
}
.story-line p {
  margin: 0;
}

/*======================
34. Footer
========================*/
.md-footer {
  overflow: clip;
}
.md-footer > .md-gl {
  --gl-1: 238, 159, 123;
  --gl-2: 120, 108, 170;
  --gl-3: 79, 107, 76;
  --gl-alpha: 0.32;
}
.md-footer > div {
  position: relative;
  z-index: 2;
}
.invite-leaf {
  --gl-1: 238, 159, 123;
  --gl-2: 120, 108, 170;
  --gl-3: 79, 107, 76;
  --gl-alpha: 1;
}
.footer-invite > .container {
  position: relative;
  z-index: 2;
}
/*---- 34.1 Invitation ----*/
.footer-invite {
  padding: 100px 0 70px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.invite-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 50px;
}
.invite-title {
  max-width: 780px;
  margin: 0;
  font-size: clamp(32px, 3.2vw, 3.4rem);
}
.invite-title em {
  display: block;
}
.invite-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  flex-shrink: 0;
}
/*---- 34.2 Columns ----*/
.footer-main {
  padding: 80px 0 60px;
}
.footer-logo img {
  display: block;
  height: 54px;
  width: auto;
  margin-bottom: 24px;
}
.footer-about p {
  max-width: 380px;
  margin-bottom: 28px;
}
.widget-title {
  margin-bottom: 24px;
  color: #FFFFFF;
  font-family: var(--md-ff-body);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.footer-links li + li {
  margin-top: 12px;
}
.footer-links a {
  color: rgba(255, 255, 255, 0.72);
  background: linear-gradient(var(--md-color-apricot), var(--md-color-apricot)) no-repeat 0 100% / 0 1px;
  padding-bottom: 2px;
  transition: color 0.3s ease, background-size 0.45s var(--md-ease);
}
.footer-links a:hover {
  color: #FFFFFF;
  background-size: 100% 1px;
}
.footer-hours li {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.92rem;
}
.footer-hours li b {
  color: #FFFFFF;
  font-weight: 400;
  white-space: nowrap;
}
.md-newsletter {
  position: relative;
  margin-top: 28px;
}
.md-newsletter input {
  display: block;
  width: 100%;
  height: 58px;
  padding: 0 70px 0 22px;
  border: 0;
  border-radius: 60px;
  background: rgba(255, 255, 255, 0.07);
  color: #FFFFFF;
  font-family: var(--md-ff-body);
  font-size: 0.92rem;
}
.md-newsletter input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.md-newsletter input:focus {
  outline: 2px solid rgba(var(--md-color-apricot-rgb), 0.6);
  outline-offset: 2px;
}
.news-send {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--md-color-apricot);
  color: var(--md-on-apricot);
  cursor: pointer;
  transition: transform 0.3s ease;
}
.news-send:hover {
  transform: rotate(-12deg);
}
.md-newsletter .form-status {
  margin: 10px 0 0;
  font-size: 0.85rem;
}
/*---- 34.3 Crisis Line And Copyright ----*/
.footer-crisis {
  padding: 18px 0;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.9rem;
}
.footer-crisis p {
  margin: 0;
  text-align: center;
}
.footer-crisis a {
  color: var(--md-color-apricot);
  font-weight: 500;
}
.footer-bottom {
  padding: 26px 0 30px;
  font-size: 0.85rem;
}
.bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.bottom-inner p {
  margin: 0;
}
.bottom-inner a {
  color: rgba(255, 255, 255, 0.8);
}
.bottom-inner a:hover {
  color: var(--md-color-apricot);
}
.footer-legal {
  display: flex;
  gap: 26px;
}

/*======================
35. Back To Top
========================*/
.md-back-to-top {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--md-color-primary);
  color: var(--md-on-primary);
  box-shadow: 0 12px 30px rgba(var(--md-color-primary-rgb), 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s, background-color 0.3s ease;
}
.md-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.md-back-to-top:hover {
  background: var(--md-color-apricot);
  color: var(--md-on-apricot);
}
[data-theme="dark"] .md-back-to-top {
  color: var(--md-color-night);
}