@charset "utf-8";

/*
Theme Name: Molara - Dentist & Dental Clinic HTML5 Template.
Author: Metropolitanthemes
Version: 1.0.0

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

1. General
   1.1 Design Tokens
   1.2 Base And Typography
   1.3 Content Defaults
   1.4 Section Rhythm And Grounds
   1.5 Eyebrow, Titles And The Smile Arc
   1.6 Buttons And Round Controls
   1.7 Status, Stars And Avatars
   1.8 Cards And Frames
2. Preloader
3. Header And Navigation
   3.1 Topbar
   3.2 Main Bar
   3.3 Navigation
   3.4 Kids Tab
   3.5 Mega Menu
4. Offcanvas Menu
5. Language Picker
6. Forms And Custom Select
   6.1 Fields
   6.2 Custom Select
7. Subheader
8. Hero Slider
   8.1 Slide Cards
   8.2 Controls
9. Quick-Action Dock
10. Services Band
11. About The Doctor
12. Smile Reveal And Before After
13. Treatment Finder
14. Reviews
15. Special And Insurance Helper
   15.1 Accepted Plans
16. Kids Teaser, Inside The Practice, Location, FAQ, CTA
   16.1 Kids Teaser
   16.2 Lorem Avenue And Inside The Practice
   16.3 Location
   16.4 FAQ
   16.5 CTA
17. Kids Page
   17.1 Kids Hero
   17.2 Facts
   17.3 Scalloped Bands
   17.4 Stickers Around The Ages
   17.5 Daycare Video
   17.6 Sticker Chart
   17.7 Tooth Timeline
   17.8 Brush-Along Timer
   17.9 Ages And Parents
   17.10 Kids CTA
   17.11 Kids Hero Controls
18. Service Pages
   18.1 Service Cards
   18.2 Overview
   18.3 Steps
   18.4 Tools
   18.5 Request Band
19. Inner Pages
   19.1 Google Card And Values
   19.2 Story And Doctor
   19.3 Team Cards
   19.4 Filter Tabs
   19.5 Service Index
   19.6 Patients Pages
   19.7 Appointment
   19.8 FAQ Page
   19.9 Blog
   19.10 Article
   19.11 Contact And Accounts
   19.12 Minimal Pages
   19.13 Office Tour
   19.14 Night Cards
20. Why Choose Us
   20.1 Light Heroes
   20.2 Why Hero
   20.3 Ribbons
   20.4 Reasons Bento
   20.5 Service Panels
   20.6 Visit Story
   20.7 Doctor Band
   20.8 Plans Marquee
   20.9 Score And Reviews
   20.10 Booking Band
21. New Patient Welcome
   21.1 Welcome Hero
   21.2 Three Ways In
   21.3 First Visit Timeline
   21.4 Who You Will Meet
   21.5 Checklist And Hours
   21.6 Final Booking
   21.7 Booking Dock
22. Home 02
   22.1 Ink And Champagne Tokens
   22.2 Type And Buttons
   22.3 Luxe Header
   22.4 Luxe Hero
   22.5 Statement And Pillars
   22.6 The Visit In Four Steps
   22.7 Treatments List
   22.8 Dr. Carter
   22.9 Team Portraits
   22.10 Smile Design
   22.11 Reviews And Plans
   22.12 Smile Journal
   22.13 Reserve
   22.14 Luxe Footer
23. Home 03
   23.1 Fresh Clinical Tokens
   23.2 Type, Chips And Buttons
   23.3 Floating Pill Header
   23.4 Fresh Hero
   23.5 Numbers Bento
   23.6 Care Bento
   23.7 Booking
   23.8 Team Rail
   23.9 Results, Reviews And Panel
   23.10 Light Footer
24. Ask AI
25. Footer
26. Mobile Bar, Back To Top, Video Modal, WebGL
   26.1 Mobile Action Bar
   26.2 Back To Top
   26.3 Video Modal
   26.4 WebGL Layer
*/

/*======================
1. General
========================*/
/*---- 1.1 Design Tokens ----*/
/* Light is the default; html[data-theme="dark"] swaps every surface, text and line token.
   .mo-night sections stay navy night in both themes. */
:root {
  --mo-primary: #1470AF;
  --mo-primary-rgb: 20, 112, 175;
  --mo-primary-deep: #0E5A90;
  --mo-on-primary: #FFFFFF;
  --mo-accent-text: #1470AF;
  --mo-coral: #C8401A;
  --mo-coral-hover: #A93410;
  --mo-coral-bright: #F2592A;
  --mo-coral-rgb: 242, 89, 42;
  --mo-sky: #8EB6DC;
  --mo-sky-rgb: 142, 182, 220;
  --mo-sky-soft: #E8F1FA;
  --mo-band: #8EB6DC;
  --mo-on-band: #14285C;
  --mo-navy: #14285C;
  --mo-navy-rgb: 20, 40, 92;
  --mo-night: #0E1D44;
  --mo-night-rgb: 14, 29, 68;
  --mo-night-2: #15295A;
  --mo-on-night: rgba(234, 242, 251, 0.78);
  --mo-line-night: rgba(255, 255, 255, 0.12);
  --mo-bg: #FFFFFF;
  --mo-bg-rgb: 255, 255, 255;
  --mo-bg-soft: #F2F5F9;
  --mo-bg-soft-rgb: 242, 245, 249;
  --mo-surface: #FFFFFF;
  --mo-surface-2: #F7F9FC;
  --mo-field: #EFF4FA;
  --mo-heading: #14285C;
  --mo-heading-rgb: 20, 40, 92;
  --mo-text: #3D4A66;
  --mo-muted: #5E6A85;
  --mo-line: #DCE5EF;
  --mo-line-strong: #C5D3E3;
  --mo-tonal: rgba(20, 112, 175, 0.09);
  --mo-tonal-2: rgba(20, 112, 175, 0.16);
  --mo-sun: #FFC83D;
  --mo-mint: #5FD3B5;
  --mo-bubble: #FF8FB1;
  --mo-ok: #1E9E62;
  --mo-warn: #D98A00;
  --mo-photo-opacity: 0.15;
  /* the Google rating: 4.9 of 5 stars filled (rating / 5 as a percentage) */
  --mo-rating-fill: 98%;
  --mo-ff-heading: "Fraunces", serif;
  --mo-ff-body: "Pontano Sans", sans-serif;
  --mo-ff-kids: "Fredoka", sans-serif;
  --mo-fs-display: clamp(44px, 5.2vw, 84px);
  --mo-fs-h1: clamp(42px, 4.6vw, 72px);
  --mo-fs-h2: clamp(34px, 3.3vw, 54px);
  --mo-fs-h3: clamp(22px, 1.75vw, 28px);
  --mo-fs-h4: 22px;
  --mo-fs-h5: 19px;
  --mo-fs-h6: 17px;
  --mo-radius: 6px;
  --mo-radius-card: 16px;
  --mo-radius-lg: 24px;
  --mo-shadow: 0 18px 48px rgba(20, 40, 92, 0.08);
  --mo-shadow-lg: 0 30px 80px rgba(20, 40, 92, 0.16);
  --mo-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  color-scheme: light;
}
html[data-theme="dark"] {
  --mo-primary: #3E95D6;
  --mo-primary-rgb: 62, 149, 214;
  --mo-primary-deep: #2D82C2;
  --mo-accent-text: #7DBBEB;
  --mo-band: #163463;
  --mo-on-band: #EEF4FB;
  --mo-sky-soft: #11244A;
  --mo-bg: #0B1630;
  --mo-bg-rgb: 11, 22, 48;
  --mo-bg-soft: #0F1E3F;
  --mo-bg-soft-rgb: 15, 30, 63;
  --mo-surface: #12234A;
  --mo-surface-2: #172B57;
  --mo-field: #172B57;
  --mo-heading: #F1F5FC;
  --mo-heading-rgb: 241, 245, 252;
  --mo-text: #B6C3DB;
  --mo-muted: #97A6C3;
  --mo-line: rgba(255, 255, 255, 0.1);
  --mo-line-strong: rgba(255, 255, 255, 0.18);
  --mo-tonal: rgba(125, 187, 235, 0.12);
  --mo-tonal-2: rgba(125, 187, 235, 0.2);
  --mo-night: #081129;
  --mo-night-rgb: 8, 17, 41;
  --mo-night-2: #0F1E3F;
  --mo-photo-opacity: 0.14;
  --mo-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
  --mo-shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

/*---- 1.2 Base And Typography ----*/
html {
  overflow-x: hidden;
}
body {
  margin: 0;
  font-family: var(--mo-ff-body);
  font-size: 17px;
  line-height: 1.75;
  font-weight: 400;
  color: var(--mo-text);
  background-color: var(--mo-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.4s var(--mo-ease), color 0.4s var(--mo-ease);
}
body.oc-open,
body.mo-no-scroll {
  overflow: hidden;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--mo-ff-heading);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--mo-heading);
  margin: 0 0 18px;
}
h1 { font-size: var(--mo-fs-h1); }
h2 { font-size: var(--mo-fs-h2); }
h3 { font-size: var(--mo-fs-h3); }
h4 { font-size: var(--mo-fs-h4); }
h5 { font-size: var(--mo-fs-h5); }
h6 { font-size: var(--mo-fs-h6); letter-spacing: 0; }
/* one italic word carries the practice's voice */
h1 em, h2 em, h3 em, .mo-display em {
  font-style: italic;
  font-weight: 500;
  color: var(--mo-accent-text);
}
.mo-night h1 em, .mo-night h2 em, .mo-night h3 em, .on-photo h1 em, .on-photo h2 em {
  color: var(--mo-sky);
}
p {
  margin: 0 0 18px;
}
a {
  color: var(--mo-heading);
  text-decoration: none;
  transition: color 0.3s var(--mo-ease);
}
a:hover {
  color: var(--mo-primary);
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
button {
  font-family: inherit;
}
strong, b {
  font-weight: 700;
}
hr {
  margin: 40px 0;
  border: 0;
  border-top: 1px solid var(--mo-line);
  opacity: 1;
}
:focus-visible {
  outline: 2px solid var(--mo-coral-bright);
  outline-offset: 3px;
}
::selection {
  background: var(--mo-sky);
  color: var(--mo-navy);
}
a[href^="tel:"] {
  white-space: nowrap;
}
/* numbers read left to right in a right-to-left page too: a phone number, a street
   number, "15+" and "+1" keep their order */
a[href^="tel:"],
.top-address a,
.footer-contact a,
.doctor-badge b,
.bio-badge b,
.faces-count,
.special-price b,
.stat-big {
  /*rtl:ignore*/
  direction: ltr;
  unicode-bidi: isolate;
}
.mo-reset {
  list-style: none;
  margin: 0;
  padding: 0;
}
.visually-hidden-label {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 10000;
  padding: 10px 18px;
  border-radius: var(--mo-radius);
  background: var(--mo-coral);
  color: #FFFFFF;
  font-weight: 700;
}
.skip-link:focus {
  top: 16px;
  color: #FFFFFF;
}
[hidden] {
  display: none !important;
}
.is-filtered-out {
  display: none !important;
}
.container {
  --bs-gutter-x: 32px;
}
@media (min-width: 1400px) {
  .container {
    max-width: 1352px;
  }
}
/* a 2K screen at 125% is a 2048px viewport: widen the measure and the root size there */
@media (min-width: 1600px) {
  html {
    font-size: 17px;
  }
  .container {
    max-width: 1472px;
  }
}
@media (min-width: 1960px) {
  html {
    font-size: 18px;
  }
  .container {
    max-width: 1592px;
  }
}
.mo-lead {
  font-size: 19px;
  line-height: 1.7;
  color: var(--mo-text);
}

/*---- 1.3 Content Defaults ----*/
.mo-content h2 { font-size: clamp(28px, 2.6vw, 40px); margin-top: 42px; }
.mo-content h3 { font-size: clamp(22px, 1.9vw, 28px); margin-top: 32px; }
.mo-content ul,
.mo-content ol {
  margin: 0 0 22px;
  padding-left: 22px;
}
.mo-content li + li {
  margin-top: 8px;
}
.mo-content ul li::marker {
  color: var(--mo-coral-bright);
}
.mo-content a:not(.mo-btn) {
  color: var(--mo-accent-text);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
}
.mo-content blockquote {
  position: relative;
  margin: 36px 0;
  padding: 32px 36px 30px 88px;
  border-radius: var(--mo-radius-card);
  background: var(--mo-sky-soft);
}
.mo-content blockquote::before {
  content: "\201C";
  position: absolute;
  left: 28px;
  top: 8px;
  font-family: var(--mo-ff-heading);
  font-size: 92px;
  line-height: 1;
  color: var(--mo-coral-bright);
}
.mo-content blockquote p {
  margin: 0;
  font-family: var(--mo-ff-heading);
  font-size: 24px;
  font-style: italic;
  line-height: 1.5;
  color: var(--mo-heading);
}

/*---- 1.4 Section Rhythm And Grounds ----*/
.mo-pt-120 { padding-top: 120px; }
.mo-pb-120 { padding-bottom: 120px; }
.mo-pt-100 { padding-top: 100px; }
.mo-pb-100 { padding-bottom: 100px; }
.mo-pt-60 { padding-top: 64px; }
.mo-pb-60 { padding-bottom: 64px; }
.mo-bg-soft {
  background-color: var(--mo-bg-soft);
}
.mo-bg-tint {
  background-color: var(--mo-sky-soft);
}
/* the base's sky band: navy words on sky (white words on it were 2.13:1) */
.mo-band {
  background-color: var(--mo-band);
  color: var(--mo-on-band);
}
.mo-band h1, .mo-band h2, .mo-band h3, .mo-band h4 {
  color: var(--mo-on-band);
}
.mo-band p {
  color: var(--mo-on-band);
}
/* blue on sky is too faint for an accent word: the italic carries it in navy */
.mo-band h1 em, .mo-band h2 em, .mo-band h3 em {
  color: var(--mo-on-band);
}
/* navy night bands: the same in both themes */
.mo-night {
  background-color: var(--mo-night);
  color: var(--mo-on-night);
}
.mo-night h1, .mo-night h2, .mo-night h3, .mo-night h4, .mo-night h5, .mo-night h6 {
  color: #FFFFFF;
}
.mo-night a:not(.mo-btn) {
  color: #FFFFFF;
}
.mo-night .mo-lead,
.mo-night p {
  color: var(--mo-on-night);
}
.mo-night a:not(.mo-btn):hover {
  color: var(--mo-sky);
}
/* every section with a background photograph looks the same: the picture covers it under a
   wash running from deep navy behind the copy (left) to an open blue (right), the copy white.
   Cards keep their own colours. */
.mo-photo-band {
  position: relative;
  isolation: isolate;
  /* clip, not hidden: hidden would make the band the scroll box and stop sticky panels inside it */
  overflow: clip;
  background-color: var(--mo-navy);
  color: rgba(255, 255, 255, 0.86);
}
.band-img {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.band-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.band-img.is-flip img {
  transform: scaleX(-1);
}
.band-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(14, 40, 92, 0.97) 0%, rgba(20, 112, 175, 0.9) 50%, rgba(20, 112, 175, 0.55) 100%);
}
html[data-theme="dark"] .band-img::after {
  background: linear-gradient(90deg, rgba(8, 17, 41, 0.97) 0%, rgba(15, 58, 102, 0.92) 50%, rgba(15, 58, 102, 0.62) 100%);
}
.mo-photo-band .mo-eyebrow,
.mo-photo-band .title,
.mo-photo-band h1,
.mo-photo-band h2 {
  color: #FFFFFF;
}
.mo-photo-band .title em,
.mo-photo-band h1 em,
.mo-photo-band h2 em {
  color: var(--mo-sky-soft);
}
html[data-theme="dark"] .mo-photo-band .title em,
html[data-theme="dark"] .mo-photo-band h1 em,
html[data-theme="dark"] .mo-photo-band h2 em {
  color: #CFE4F7;
}
.mo-photo-band p,
.mo-photo-band .mo-lead {
  color: rgba(255, 255, 255, 0.86);
}
.mo-photo-band p a:not(.mo-btn),
.mo-photo-band .mo-lead a {
  color: #FFFFFF;
}
.mo-photo-band .mo-status {
  color: rgba(255, 255, 255, 0.8);
}
.mo-photo-band .mo-status b {
  color: #FFFFFF;
}
.mo-photo-band .mo-rows li {
  border-color: rgba(255, 255, 255, 0.18);
}
.mo-photo-band .mo-rows span {
  color: rgba(255, 255, 255, 0.7);
}
.mo-photo-band .mo-rows b {
  color: #FFFFFF;
}
.mo-photo-band .mo-btn.is-tonal {
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
}
.mo-photo-band .mo-btn.is-tonal:hover {
  background: #FFFFFF;
  color: var(--mo-navy);
}
/* cards and white panels on a band keep their own ink */
.mo-photo-band .mo-card p,
.mo-photo-band .svc-panel p,
.mo-photo-band .step-card p,
.mo-photo-band .team-card.is-boxed p,
.mo-photo-band .quick-form p,
.mo-photo-band .special-stub p,
.mo-photo-band .faq-item p {
  color: var(--mo-text);
}
.mo-photo-band .mo-card h2,
.mo-photo-band .mo-card h3,
.mo-photo-band .svc-panel h2,
.mo-photo-band .step-card h3,
.mo-photo-band .team-card.is-boxed h3 {
  color: var(--mo-heading);
}
.mo-photo-band .mo-card .mo-rows li,
.mo-photo-band .special-card .mo-rows li {
  border-color: var(--mo-line);
}
.mo-photo-band .mo-card .mo-rows span,
.mo-photo-band .special-card .mo-rows span {
  color: var(--mo-muted);
}
.mo-photo-band .mo-card .mo-rows b,
.mo-photo-band .special-card .mo-rows b {
  color: var(--mo-heading);
}
.mo-photo-band .mo-card .mo-status {
  color: var(--mo-muted);
}
.mo-photo-band .mo-card .mo-status b {
  color: var(--mo-heading);
}
/* the big tooth mascot watermark behind light sections */
.mo-watermark {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.mo-watermark > .mark-img {
  position: absolute;
  z-index: -1;
  width: 380px;
  max-width: 40%;
  opacity: 0.05;
  pointer-events: none;
}
html[data-theme="dark"] .mo-watermark > .mark-img {
  filter: invert(1);
  opacity: 0.06;
}
.mo-watermark > .mark-img.is-right {
  right: -40px;
  top: 60px;
}
.mo-watermark > .mark-img.is-left {
  left: -60px;
  bottom: 40px;
}

/*---- 1.5 Eyebrow, Titles And The Smile Arc ----*/
/* the logo's smile, drawn in CSS: a bordered half-ellipse */
.mo-smile-arc {
  display: inline-block;
  flex: 0 0 auto;
  width: 26px;
  height: 10px;
  border: 2.5px solid transparent;
  border-bottom-color: var(--mo-coral-bright);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.mo-smile-arc.is-lg {
  display: block;
  width: 74px;
  height: 18px;
  border-width: 3.5px;
}
.mo-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-family: var(--mo-ff-body);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mo-accent-text);
}
/* the logo's smile sits under every section title (drawn on when the title arrives) */
.title::after,
.askai-title::after {
  content: "";
  display: block;
  width: 62px;
  height: 15px;
  margin-top: 16px;
  border: 3px solid transparent;
  border-bottom-color: var(--mo-coral-bright);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  transform-origin: 50% 50%;
}
.is-center .title::after,
.mo-minimal .title::after {
  margin-left: auto;
  margin-right: auto;
}
.title.arc-armed::after,
.askai-title.arc-armed::after {
  transform: scaleX(0);
}
.title.arc-armed.is-drawn::after,
.askai-title.arc-armed.is-drawn::after {
  transform: scaleX(1);
  transition: transform 0.8s var(--mo-ease) 0.25s;
}
.mo-night .mo-eyebrow,
.on-photo .mo-eyebrow {
  color: var(--mo-sky);
}
.mo-band .mo-eyebrow {
  color: var(--mo-on-band);
}
.mo-title-block {
  margin-bottom: 56px;
}
.mo-title-block .title {
  margin-bottom: 0;
}
.mo-title-block .mo-lead {
  margin: 20px 0 0;
  max-width: 640px;
}
.mo-title-block.is-center {
  text-align: center;
}
.mo-title-block.is-center .mo-lead {
  margin-left: auto;
  margin-right: auto;
}
.mo-title-block.is-split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
/* the lead's last line sits level with the title's (the smile arc adds 31px under it) */
.mo-title-block.is-split .mo-lead {
  max-width: 480px;
  margin: 0 0 31px;
}
/* a word inside a heading kept on its line */
.mo-line {
  display: inline-block;
  white-space: nowrap;
}

/*---- 1.6 Buttons And Round Controls ----*/
.mo-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  padding: 15px 28px;
  border: 0;
  border-radius: var(--mo-radius);
  background: var(--mo-primary);
  color: var(--mo-on-primary);
  font-family: var(--mo-ff-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.35s var(--mo-ease), color 0.35s var(--mo-ease), transform 0.35s var(--mo-ease), box-shadow 0.35s var(--mo-ease);
}
.mo-btn:hover {
  background: var(--mo-primary-deep);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(var(--mo-primary-rgb), 0.28);
}
.mo-btn > i {
  font-size: 14px;
}
/* the button's arrow sits in a round chip at its end, pointing up and out; pointing at the
   button turns it to point the way */
.mo-btn .btn-ic {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: -6px -14px -6px 2px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  transition: background-color 0.35s var(--mo-ease), color 0.35s var(--mo-ease);
}
.mo-btn .btn-ic i {
  font-size: 12px;
  line-height: 1;
  transform: rotate(-45deg);
  transition: transform 0.45s var(--mo-ease);
}
.mo-btn .btn-ic i + i {
  display: none;
}
.mo-btn:hover .btn-ic i {
  transform: rotate(0);
}
.mo-btn.is-light .btn-ic {
  background: var(--mo-coral);
}
.mo-btn.is-tonal .btn-ic {
  background: var(--mo-primary);
}
.mo-btn.is-tonal:hover .btn-ic {
  background: rgba(255, 255, 255, 0.2);
}
.mo-btn.is-glass:hover .btn-ic {
  background: var(--mo-coral);
}
.mo-btn.is-coral {
  background: var(--mo-coral);
}
.mo-btn.is-coral:hover {
  background: var(--mo-coral-hover);
  box-shadow: 0 14px 30px rgba(var(--mo-coral-rgb), 0.32);
}
.mo-btn.is-tonal {
  background: var(--mo-tonal);
  color: var(--mo-accent-text);
}
.mo-btn.is-tonal:hover {
  background: var(--mo-primary);
  color: #FFFFFF;
}
.mo-btn.is-light {
  background: #FFFFFF;
  color: var(--mo-navy);
}
.mo-btn.is-light:hover {
  background: var(--mo-sky-soft);
  color: var(--mo-navy);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}
.mo-btn.is-light.is-google {
  box-shadow: inset 0 0 0 1.5px var(--mo-line), 0 8px 20px rgba(20, 40, 92, 0.06);
}
.mo-btn.is-light.is-google > i {
  font-size: 17px;
}
.mo-btn.is-glass {
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.mo-btn.is-glass:hover {
  background: #FFFFFF;
  color: var(--mo-navy);
}
.mo-btn.is-sm {
  min-height: 46px;
  padding: 11px 20px;
  font-size: 13px;
}
.mo-btn.is-block {
  width: 100%;
}
.mo-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.mo-round {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--mo-surface);
  color: var(--mo-heading);
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s var(--mo-ease), color 0.3s var(--mo-ease), transform 0.3s var(--mo-ease);
}
.mo-round:hover {
  background: var(--mo-primary);
  color: #FFFFFF;
}
.mo-round.is-tonal {
  background: var(--mo-tonal);
  color: var(--mo-accent-text);
}
.mo-round.is-tonal:hover {
  background: var(--mo-primary);
  color: #FFFFFF;
}
.mo-round:disabled,
.mo-round.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}
/* a plain arrow link inside cards */
.mo-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mo-accent-text);
}
.mo-link i {
  font-size: 12px;
  transition: transform 0.35s var(--mo-ease);
}
.mo-link:hover i {
  transform: translateX(5px);
}

/*---- 1.7 Status, Stars And Avatars ----*/
/* office hours: grey until the clock has run, then green, amber or coral */
.mo-status {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}
.mo-status .dot {
  position: relative;
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #9AA6BC;
}
.mo-status.is-open .dot {
  background: #2BC77E;
  box-shadow: 0 0 0 0 rgba(43, 199, 126, 0.55);
  animation: moPulse 2.2s infinite;
}
.mo-status.is-soon .dot {
  background: #FFB020;
}
.mo-status.is-closed .dot {
  background: var(--mo-coral-bright);
}
@keyframes moPulse {
  0% { box-shadow: 0 0 0 0 rgba(43, 199, 126, 0.55); }
  70% { box-shadow: 0 0 0 9px rgba(43, 199, 126, 0); }
  100% { box-shadow: 0 0 0 0 rgba(43, 199, 126, 0); }
}
.mo-stars {
  display: inline-flex;
  gap: 3px;
  color: #FBBC05;
  font-size: 14px;
}
/* the Google G in Google's four colours (Font Awesome's brand glyph, filled with a conic gradient) */
.g-color {
  display: inline-block;
  background: conic-gradient(from -45deg, #EA4335 0deg 90deg, #4285F4 90deg 180deg, #34A853 180deg 250deg, #FBBC05 250deg 360deg);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}
/* overlapping faces + a count (the team, never strangers) */
.mo-faces {
  display: inline-flex;
  align-items: center;
}
.mo-faces img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 3px solid var(--mo-surface);
  margin-left: -12px;
  background: var(--mo-sky-soft);
}
.mo-faces img:first-child {
  margin-left: 0;
}
.mo-faces .faces-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-left: -12px;
  border: 3px solid var(--mo-surface);
  border-radius: 50%;
  background: var(--mo-coral);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
}
/* a round initial for a reviewer (never their photograph) */
.mo-initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--mo-sky-soft);
  color: var(--mo-primary);
  font-family: var(--mo-ff-heading);
  font-size: 22px;
  font-weight: 600;
}

/*---- 1.8 Cards And Frames ----*/
.mo-card {
  position: relative;
  border-radius: var(--mo-radius-card);
  background: var(--mo-surface);
  box-shadow: var(--mo-shadow);
}
.mo-lift {
  transition: transform 0.45s var(--mo-ease), box-shadow 0.45s var(--mo-ease);
}
.mo-lift:hover {
  transform: translateY(-6px);
  box-shadow: var(--mo-shadow-lg);
}
/* photographs: rooms and treatments in a soft frame, people in a circle */
.mo-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--mo-radius-card);
  background: var(--mo-sky-soft);
}
.mo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--mo-ease);
}
.mo-frame:hover img,
.mo-lift:hover .mo-frame img {
  transform: scale(1.05);
}
.mo-circle {
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  background: var(--mo-sky-soft);
}
.mo-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
/* the illustrated icons (navy line, pale pink, coral sparkles) that lead cards; they lift a
   little with the card */
.mo-illus {
  display: inline-block;
  width: auto;
  height: 66px;
  margin-bottom: 22px;
  transition: transform 0.45s var(--mo-ease);
}
.mo-lift:hover .mo-illus,
.mo-card:hover > .mo-illus {
  transform: translateY(-4px) rotate(-3deg);
}
.mo-illus.is-sm {
  height: 56px;
  margin: 0;
}
/* the glyph tile used by service cards (icon inversion on hover) */
.mo-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--mo-tonal);
  color: var(--mo-primary);
  font-size: 30px;
  transition: background-color 0.4s var(--mo-ease), color 0.4s var(--mo-ease);
}
.mo-glyph i {
  transition: transform 0.5s var(--mo-ease);
}
.mo-lift:hover .mo-glyph,
a:hover > .mo-glyph {
  background: var(--mo-primary);
  color: #FFFFFF;
}
/* the hover accent: the tooth gives a little wiggle */
.mo-lift:hover .mo-glyph i,
a:hover > .mo-glyph i {
  animation: moWiggle 0.7s var(--mo-ease);
}
@keyframes moWiggle {
  0% { transform: rotate(0); }
  25% { transform: rotate(-9deg); }
  55% { transform: rotate(7deg); }
  80% { transform: rotate(-3deg); }
  100% { transform: rotate(0); }
}
/* label / value rows (never icon-bullet lists) */
.mo-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.mo-rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--mo-line);
}
.mo-rows li:first-child {
  padding-top: 0;
}
.mo-rows li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.mo-rows span {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mo-muted);
}
.mo-rows b {
  font-weight: 600;
  text-align: right;
  color: var(--mo-heading);
}
.mo-night .mo-rows li {
  border-color: var(--mo-line-night);
}
.mo-night .mo-rows span {
  color: rgba(234, 242, 251, 0.6);
}
.mo-night .mo-rows b {
  color: #FFFFFF;
}

/*======================
2. Preloader
========================*/
/* P13 Smile Line: a brand intro, not a loader. The molar draws, the sparkle pops, the smile
   draws, the name arrives and the page is handed over in under a second, once a visit. */
.mo-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mo-bg);
}
.mo-preloader.is-done {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
/* without JavaScript nothing waits for the intro */
html.no-js .mo-preloader {
  display: none;
}
.pre-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.pre-mark {
  width: 132px;
  height: auto;
  overflow: visible;
}
.pre-molar {
  stroke: var(--mo-heading);
  stroke-width: 6;
}
.pre-spark {
  fill: var(--mo-primary);
}
.pre-smile {
  stroke: var(--mo-coral-bright);
  stroke-width: 5.4;
}
.pre-word {
  font-family: var(--mo-ff-body);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--mo-heading);
}

/*======================
3. Header And Navigation
========================*/
/*---- 3.1 Topbar ----*/
.mo-header {
  position: relative;
  z-index: 100;
  /* the header keeps its height when the bar docks, so the page never jumps */
  min-height: 136px;
}
.mo-topbar {
  background: var(--mo-night);
  color: rgba(234, 242, 251, 0.82);
  font-size: 14px;
}
.topbar-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 44px;
}
.top-status b {
  color: #FFFFFF;
  font-weight: 700;
}
.top-address {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.top-address i {
  color: var(--mo-coral-bright);
}
.top-address a,
.top-phone {
  color: rgba(234, 242, 251, 0.82);
}
.top-address a:hover,
.top-phone:hover {
  color: #FFFFFF;
}
.top-end {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
}
.top-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}
.top-phone i {
  color: var(--mo-coral-bright);
}
.mo-social {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mo-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--mo-tonal);
  color: var(--mo-accent-text);
  font-size: 15px;
  transition: background-color 0.3s var(--mo-ease), color 0.3s var(--mo-ease), transform 0.3s var(--mo-ease);
}
.mo-social a:hover {
  background: var(--mo-coral);
  color: #FFFFFF;
  transform: translateY(-2px);
}
.mo-social.is-top a {
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  font-size: 13px;
}
.mo-social.is-dark a {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}

/*---- 3.2 Main Bar ----*/
/* no call button on desktop: the top bar carries the number; tablets keep it */
.head-call {
  display: none;
}
.header-bar {
  position: relative;
  background: var(--mo-surface);
  box-shadow: 0 1px 0 var(--mo-line);
  transition: background-color 0.4s var(--mo-ease), box-shadow 0.4s var(--mo-ease);
}
/* the container is the mega menu's frame: it opens exactly as wide as the page content */
.header-bar > .container {
  position: relative;
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: 92px;
}
.mo-logo {
  flex: 0 0 auto;
}
.mo-logo img {
  width: auto;
  height: 50px;
}
.mo-logo .logo-light {
  display: none;
}
html[data-theme="dark"] .mo-logo .logo-dark {
  display: none;
}
html[data-theme="dark"] .mo-logo .logo-light {
  display: block;
}
.mo-header.is-scrolled .header-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: 0 14px 40px rgba(20, 40, 92, 0.12);
  animation: moBarIn 0.5s var(--mo-ease);
}
.mo-header.is-scrolled .header-inner {
  min-height: 76px;
}
.mo-header.is-scrolled .mo-logo img {
  height: 44px;
}
@keyframes moBarIn {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.mo-theme-toggle .moi-sun {
  display: none;
}
html[data-theme="dark"] .mo-theme-toggle .moi-sun {
  display: inline-block;
}
html[data-theme="dark"] .mo-theme-toggle .moi-moon {
  display: none;
}
.mo-theme-toggle i {
  font-size: 20px;
}
.head-book {
  margin-left: 6px;
}
.mo-menu-toggle {
  display: none;
}

/*---- 3.3 Navigation ----*/
.mo-nav {
  margin-left: auto;
}
.mo-nav > ul {
  display: flex;
  align-items: center;
  gap: 4px;
}
.mo-nav li {
  position: relative;
}
.mo-nav > ul > li > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  padding: 34px 13px;
  font-size: 15px;
  font-weight: 700;
  color: var(--mo-heading);
}
.mo-header.is-scrolled .mo-nav > ul > li > a {
  padding-top: 26px;
  padding-bottom: 26px;
}
/* the dropdown mark: a rounded chevron that turns over and warms to coral when its menu opens */
.mo-nav > ul > li > a > i {
  font-size: 12px;
  color: var(--mo-muted);
  transition: transform 0.3s var(--mo-ease), color 0.3s var(--mo-ease);
}
/* hover and current by colour only: no underline */
.mo-nav > ul > li:hover > a,
.mo-nav > ul > li.active > a {
  color: var(--mo-primary);
}
.mo-nav > ul > li:hover > a > i {
  transform: rotate(180deg);
  color: var(--mo-coral-bright);
}
.mo-nav .sub-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -8px;
  z-index: 20;
  min-width: 250px;
  margin: 0;
  padding: 12px;
  list-style: none;
  border-radius: 14px;
  background: var(--mo-surface);
  box-shadow: var(--mo-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s var(--mo-ease), transform 0.3s var(--mo-ease), visibility 0.3s;
}
/* the panel hangs just below the header bar; this bridge keeps the hover alive across the gap */
.mo-nav .sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -20px;
  height: 20px;
}
.mo-nav li:hover > .sub-menu,
.mo-nav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mo-nav .sub-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--mo-heading);
  transition: background-color 0.3s var(--mo-ease), color 0.3s var(--mo-ease);
}
.mo-nav .sub-menu a > i {
  font-size: 10px;
  color: var(--mo-muted);
}
.mo-nav .sub-menu li:hover > a,
.mo-nav .sub-menu li.active > a {
  background: var(--mo-tonal);
  color: var(--mo-primary);
}
/* third level flies out beside its parent */
.mo-nav .sub-menu .sub-menu {
  top: -12px;
  left: calc(100% + 14px);
  transform: translateX(10px);
}
.mo-nav .sub-menu .sub-menu::before {
  left: -16px;
  top: 0;
  bottom: 0;
  width: 16px;
  height: auto;
  right: auto;
}
.mo-nav .sub-menu li:hover > .sub-menu {
  transform: translateX(0);
}

/*---- 3.4 Kids Tab ----*/
/* the kids' page hangs from the header bar as a tab under Book Appointment: white like the bar,
   rounded at its foot, every letter in one of the kids' colours; the letters hop in turn when
   it is pointed at (and stay up on the kids' page) */
.header-actions {
  align-self: stretch;
}
.head-book-wrap {
  position: relative;
  display: flex;
  align-items: center;
  align-self: stretch;
}
.kids-tab {
  position: absolute;
  top: calc(100% - 1px);
  left: 50%;
  z-index: 1;
  padding: 7px 26px 11px;
  border-radius: 0 0 18px 18px;
  background: var(--mo-surface);
  box-shadow: 0 14px 24px -10px rgba(20, 40, 92, 0.28);
  white-space: nowrap;
  transform: translateX(-50%);
}
.kids-letters {
  display: inline-flex;
  align-items: baseline;
  /* the coloured letters spell an English word: keep them left to right on RTL pages */
  /*rtl:ignore*/
  direction: ltr;
  unicode-bidi: isolate;
  font-family: var(--mo-ff-kids);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
}
.kids-letters span {
  display: inline-block;
  transition: transform 0.35s var(--mo-ease);
}
.kids-letters .kl-gap {
  width: 0.3em;
}
.kids-letters .kl-1 { color: #F2592A; }
.kids-letters .kl-2 { color: #F0A500; }
.kids-letters .kl-3 { color: #19A884; }
.kids-letters .kl-4 { color: #E8578A; }
.kids-tab:hover .kids-letters span,
.kids-tab.is-current .kids-letters span {
  transform: translateY(-3px) rotate(-6deg);
}
.kids-tab:hover .kids-letters span:nth-child(even),
.kids-tab.is-current .kids-letters span:nth-child(even) {
  transform: translateY(-3px) rotate(6deg);
}
.kids-tab:hover .kids-letters span:nth-child(2) { transition-delay: 0.04s; }
.kids-tab:hover .kids-letters span:nth-child(3) { transition-delay: 0.08s; }
.kids-tab:hover .kids-letters span:nth-child(5) { transition-delay: 0.12s; }
.kids-tab:hover .kids-letters span:nth-child(6) { transition-delay: 0.16s; }
.kids-tab:hover .kids-letters span:nth-child(7) { transition-delay: 0.2s; }
.kids-tab:hover .kids-letters span:nth-child(8) { transition-delay: 0.24s; }
.oc-top .kids-letters {
  font-size: 21px;
}

/*---- 3.5 Mega Menu ----*/
/* the Services menu spans the page content: four groups, each service with its own icon,
   a foot row to the finder, and the emergency panel down the end */
.mo-nav li.has-mega {
  position: static;
}
.mo-nav .mega-menu {
  position: absolute;
  top: calc(100% + 14px);
  right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
  left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  border-radius: 20px;
  background: var(--mo-surface);
  box-shadow: 0 0 0 1px var(--mo-line), 0 40px 90px rgba(14, 29, 68, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s var(--mo-ease), transform 0.3s var(--mo-ease), visibility 0.3s;
}
.mo-nav .mega-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -18px;
  height: 18px;
}
.mo-nav li.has-mega:hover > .mega-menu,
.mo-nav li.has-mega:focus-within > .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mega-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 34px 38px 0;
}
.mega-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.mega-col {
  min-width: 0;
  padding: 0 26px;
}
.mega-col:first-child {
  padding-left: 0;
}
.mega-col + .mega-col {
  border-left: 1px solid var(--mo-line);
}
.mo-nav .mega-head {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  margin-bottom: 14px;
  color: var(--mo-heading);
}
/* each group and treatment leads with its illustrated mark, which tips when pointed at */
.mega-illus {
  flex: 0 0 auto;
  width: auto;
  height: 52px;
  transition: transform 0.4s var(--mo-ease);
}
.mo-nav .mega-head:hover .mega-illus {
  transform: rotate(-6deg) scale(1.06);
}
.mega-label {
  display: grid;
  gap: 3px;
  min-width: 0;
  line-height: 1.2;
}
.mega-label b {
  font-family: var(--mo-ff-heading);
  font-size: 18px;
  font-weight: 600;
}
.mega-label small {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mo-muted);
}
.mo-nav .mega-col li a {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 -12px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--mo-text);
  transition: background-color 0.3s var(--mo-ease), color 0.3s var(--mo-ease);
}
.mega-item-illus {
  flex: 0 0 auto;
  width: 32px;
  height: 30px;
  object-fit: contain;
  transition: transform 0.4s var(--mo-ease);
}
.mo-nav .mega-col li a:hover .mega-item-illus {
  transform: rotate(-8deg);
}
.mega-go {
  margin-left: auto;
  font-size: 11px;
  color: var(--mo-coral);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s var(--mo-ease), transform 0.3s var(--mo-ease);
}
.mo-nav .mega-col li a:hover,
.mo-nav .mega-col li.active a {
  background: var(--mo-tonal);
  color: var(--mo-heading);
}
.mo-nav .mega-col li a:hover .mega-go,
.mo-nav .mega-col li.active .mega-go {
  opacity: 1;
  transform: translateX(0);
}
.mega-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: auto;
  padding: 20px 0 24px;
  border-top: 1px solid var(--mo-line);
  font-size: 15px;
  color: var(--mo-muted);
}
.mega-foot > span > i {
  margin-right: 10px;
  color: var(--mo-coral-bright);
}
.mo-nav .mega-foot a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--mo-accent-text);
}
.mo-nav .mega-foot a i {
  font-size: 11px;
  transition: transform 0.3s var(--mo-ease);
}
.mo-nav .mega-foot a:hover i {
  transform: translateX(4px);
}
.mega-main .mega-cols {
  margin-bottom: 30px;
}
.mega-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  padding: 36px 34px;
  border-radius: 0 20px 20px 0;
  background:
    radial-gradient(80% 70% at 100% 0%, rgba(var(--mo-sky-rgb), 0.24) 0%, rgba(var(--mo-sky-rgb), 0) 60%),
    radial-gradient(70% 60% at 0% 100%, rgba(var(--mo-coral-rgb), 0.18) 0%, rgba(var(--mo-coral-rgb), 0) 60%),
    var(--mo-night);
}
.mega-card .mo-status {
  color: rgba(234, 242, 251, 0.8);
}
.mega-card .mo-status b {
  color: #FFFFFF;
}
.mega-card-title {
  font-family: var(--mo-ff-heading);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.15;
  color: #FFFFFF;
}
.mega-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
}
.mega-card .mega-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
}
.mega-card .mega-card-link i {
  font-size: 11px;
}

/*======================
4. Offcanvas Menu
========================*/
.mo-offcanvas {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  width: min(420px, 100%);
  padding: 26px 30px 34px;
  overflow-y: auto;
  background: var(--mo-night);
  color: var(--mo-on-night);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.55s var(--mo-ease), visibility 0.55s;
}
.mo-offcanvas.is-open {
  transform: translateX(0);
  visibility: visible;
}
.mo-offcanvas-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(8, 17, 41, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--mo-ease), visibility 0.4s;
}
.mo-offcanvas-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.offcanvas-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
.offcanvas-head img {
  height: 44px;
  width: auto;
}
.offcanvas-close {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}
.offcanvas-cta {
  display: grid;
  gap: 10px;
  margin-bottom: 26px;
}
.offcanvas-nav .oc-group + .oc-group {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--mo-line-night);
}
.oc-label {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mo-sky);
}
.offcanvas-nav ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 16px;
}
.offcanvas-nav a {
  display: block;
  padding: 5px 0;
  font-size: 15px;
  font-weight: 600;
  color: #FFFFFF;
}
/* Home, Why Us and Kids: links of their own above the groups */
.offcanvas-nav .oc-group.is-single + .oc-group.is-single {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.offcanvas-nav .oc-top {
  padding: 4px 0;
  font-family: var(--mo-ff-heading);
  font-size: 20px;
  font-weight: 500;
}
.offcanvas-nav a:hover,
.offcanvas-nav a.is-current {
  color: var(--mo-coral-bright);
}
.offcanvas-foot {
  display: grid;
  gap: 10px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--mo-line-night);
}
.offcanvas-foot p {
  margin: 0;
  font-size: 15px;
}
.offcanvas-foot .mo-status b {
  color: #FFFFFF;
}
.oc-contact {
  font-weight: 700;
  color: #FFFFFF;
}

/*======================
5. 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. */
.mo-lang {
  position: relative;
  flex-shrink: 0;
}
.mo-lang .lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  font-family: var(--mo-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;
}
.mo-lang .lang-btn:hover,
.mo-lang .lang-btn[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
}
.mo-lang .lang-btn > i {
  font-size: 9px;
  transition: transform 0.3s ease;
}
.mo-lang .lang-btn[aria-expanded="true"] > i {
  transform: rotate(180deg);
}
.mo-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);
}
.mo-lang.is-icon .lang-btn {
  height: 48px;
  padding: 0 15px;
  background: var(--mo-tonal);
  color: var(--mo-heading);
}
.mo-lang.is-icon .lang-btn:hover,
.mo-lang.is-icon .lang-btn[aria-expanded="true"] {
  background: var(--mo-primary);
  color: #FFFFFF;
}
.mo-lang .lang-menu {
  position: absolute;
  top: calc(100% + 12px);
  inset-inline-end: 0;
  z-index: 1300;
  width: 248px;
  padding: 10px;
  border-radius: 14px;
  background: var(--mo-surface);
  box-shadow: var(--mo-shadow-lg);
  font-family: var(--mo-ff-body);
  text-align: start;
  white-space: normal;
}
.mo-lang.is-up .lang-menu {
  top: auto;
  bottom: calc(100% + 12px);
}
.mo-lang.is-start .lang-menu {
  inset-inline-start: 0;
  inset-inline-end: auto;
}
.mo-lang .lang-menu[hidden] {
  display: none;
}
.mo-lang .lang-group {
  margin: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mo-muted);
}
.mo-lang .lang-menu ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mo-lang .lang-menu ul + .lang-group {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--mo-line);
}
.mo-lang .lang-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--mo-heading);
  font-family: var(--mo-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;
}
.mo-lang .lang-item small {
  margin-inline-start: auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--mo-muted);
}
.mo-lang .lang-item i {
  width: 12px;
  font-size: 11px;
  color: var(--mo-primary);
  opacity: 0;
}
.mo-lang .lang-item:hover,
.mo-lang .lang-item[aria-pressed="true"] {
  background: var(--mo-tonal);
}
.mo-lang .lang-item[aria-pressed="true"] {
  font-weight: 600;
}
.mo-lang .lang-item[aria-pressed="true"] i {
  opacity: 1;
}
.mo-lang .lang-note {
  margin: 10px 10px 4px;
  padding-top: 10px;
  border-top: 1px solid var(--mo-line);
  font-size: 12px;
  line-height: 1.5;
  color: var(--mo-muted);
}

/*======================
6. Forms And Custom Select
========================*/
/*---- 6.1 Fields ----*/
/* tonal faces, never hairline outlines: a soft blue field that turns white on focus */
.mo-field {
  position: relative;
}
.mo-field > label,
.mo-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--mo-heading);
}
.mo-field > label > i,
.mo-label > i {
  font-size: 14px;
  color: var(--mo-primary);
}
.mo-field > label > i[class^="moi-"] {
  font-size: 17px;
}
.mo-field .req {
  color: var(--mo-coral);
}
.mo-field input[type="text"],
.mo-field input[type="email"],
.mo-field input[type="tel"],
.mo-field input[type="password"],
.mo-field input[type="number"],
.mo-field input[type="date"],
.mo-field input[type="search"],
.mo-field textarea {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 14px 18px;
  border: 1.5px solid transparent;
  border-radius: 10px;
  background: var(--mo-field);
  color: var(--mo-heading);
  font-family: var(--mo-ff-body);
  font-size: 16px;
  transition: border-color 0.3s var(--mo-ease), background-color 0.3s var(--mo-ease), box-shadow 0.3s var(--mo-ease);
}
.mo-field textarea {
  min-height: 140px;
  resize: vertical;
}
.mo-field input:focus,
.mo-field textarea:focus {
  outline: none;
  border-color: var(--mo-primary);
  background: var(--mo-surface);
  box-shadow: 0 0 0 4px rgba(var(--mo-primary-rgb), 0.12);
}
::placeholder {
  color: #8592AC;
  opacity: 1;
}
.mo-field.is-invalid input,
.mo-field.is-invalid textarea,
.mo-field.is-invalid .select-button {
  border-color: var(--mo-coral-bright);
}
.form-status {
  margin: 14px 0 0;
  font-size: 15px;
}
/* every field carries its icon inside, at its left edge */
.mo-control {
  position: relative;
}
.mo-control-ic {
  position: absolute;
  top: 28px;
  left: 18px;
  z-index: 2;
  font-size: 15px;
  line-height: 1;
  color: var(--mo-primary);
  pointer-events: none;
  transform: translateY(-50%);
}
.mo-control-ic[class^="moi-"] {
  font-size: 18px;
}
.mo-field .mo-control > input,
.mo-field .mo-control > textarea,
.mo-field .mo-control .pass-wrap > input,
.mo-field .mo-control .mo-select-wrap > select,
.mo-field .mo-control .select-button {
  padding-left: 48px;
}
/* the birthday pair: the mark sits in the first of its two selects */
.mo-field .mo-control .tt-born > .mo-select-wrap + .mo-select-wrap .select-button,
.mo-field .mo-control .tt-born > .mo-select-wrap + .mo-select-wrap > select {
  padding-left: 18px;
}
.mo-field.is-invalid .mo-control-ic {
  color: var(--mo-coral);
}
.form-status:empty {
  display: none;
}
.form-status.is-success {
  color: var(--mo-ok);
}
.form-status.is-error {
  color: var(--mo-coral);
}
.mo-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1.5;
  color: var(--mo-text);
}
.mo-check input[type="checkbox"],
.mo-check input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 1.5px solid var(--mo-line-strong);
  border-radius: 7px;
  background: var(--mo-surface) no-repeat center / 13px 13px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.mo-check input[type="radio"] {
  border-radius: 50%;
}
.mo-check input:hover {
  border-color: var(--mo-primary);
  box-shadow: 0 0 0 4px rgba(var(--mo-primary-rgb), 0.14);
}
.mo-check input:checked {
  border-color: var(--mo-primary);
  background-color: var(--mo-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");
}
.mo-check input:focus-visible {
  outline: 2px solid var(--mo-coral-bright);
  outline-offset: 2px;
}
.mo-check b {
  color: var(--mo-heading);
}
/* option cards: a radio or checkbox wrapped in a label */
.mo-choice {
  position: relative;
  display: block;
  height: 100%;
  cursor: pointer;
}
.mo-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.mo-choice .choice-face {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 16px 18px;
  border: 1.5px solid transparent;
  border-radius: 12px;
  background: var(--mo-field);
  color: var(--mo-heading);
  transition: border-color 0.3s var(--mo-ease), background-color 0.3s var(--mo-ease), box-shadow 0.3s var(--mo-ease);
}
.mo-choice .choice-face > i {
  flex: 0 0 auto;
  font-size: 24px;
  color: var(--mo-primary);
}
.mo-choice:hover .choice-face {
  border-color: rgba(var(--mo-primary-rgb), 0.35);
}
.mo-choice input:checked + .choice-face {
  border-color: var(--mo-primary);
  background: var(--mo-surface);
  box-shadow: 0 10px 26px rgba(var(--mo-primary-rgb), 0.14);
}
.mo-choice input:focus-visible + .choice-face {
  outline: 2px solid var(--mo-coral-bright);
  outline-offset: 2px;
}
.mo-choice b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}
.mo-choice small {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  color: var(--mo-muted);
}

/*---- 6.2 Custom Select ----*/
/* the native <select> stays in the form; JS draws the button + listbox beside it */
.mo-select {
  position: relative;
}
.mo-select > select {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
}
/* before JavaScript enhances it the native select shows in the same face */
.mo-select-wrap > select {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 12px 18px;
  border: 1.5px solid transparent;
  border-radius: 10px;
  background: var(--mo-field);
  color: var(--mo-heading);
  font-family: var(--mo-ff-body);
  font-size: 16px;
}
.mo-select .select-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 12px 18px;
  border: 1.5px solid transparent;
  border-radius: 10px;
  background: var(--mo-field);
  color: var(--mo-heading);
  font-family: var(--mo-ff-body);
  font-size: 16px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.3s var(--mo-ease), background-color 0.3s var(--mo-ease);
}
.mo-select .select-button i {
  color: var(--mo-primary);
  font-size: 11px;
  transition: transform 0.3s var(--mo-ease);
}
.mo-select.is-open .select-button {
  border-color: var(--mo-primary);
  background: var(--mo-surface);
}
.mo-select.is-open .select-button i {
  transform: rotate(180deg);
}
.mo-select .select-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mo-select .select-list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 300px;
  margin: 0;
  padding: 8px;
  overflow-y: auto;
  list-style: none;
  border-radius: 12px;
  background: var(--mo-surface);
  box-shadow: var(--mo-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.3s var(--mo-ease), transform 0.3s var(--mo-ease), visibility 0.3s;
  scrollbar-width: thin;
}
/* the open days as a little calendar: a tile each, "Any Open Day" across the top */
.mo-select .select-list.is-days {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  right: auto;
  width: 320px;
  max-height: none;
  padding: 10px;
}
.mo-select .select-list.is-days .select-option {
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 10px 4px;
  border-radius: 12px;
  background: var(--mo-field);
  text-align: center;
  line-height: 1.15;
}
.mo-select .select-list.is-days .select-option.is-any {
  grid-column: 1 / -1;
  flex-direction: row;
  padding: 11px 14px;
}
.select-list .day-wd {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mo-muted);
}
.select-list .is-today .day-wd {
  color: var(--mo-coral);
}
.select-list .day-num {
  font-family: var(--mo-ff-heading);
  font-size: 22px;
  font-weight: 600;
  color: var(--mo-heading);
}
.select-list .day-mo {
  font-size: 12px;
  color: var(--mo-muted);
}
.mo-select .select-list.is-days .select-option.is-focused {
  box-shadow: inset 0 0 0 2px var(--mo-primary);
}
.mo-select .select-list.is-days .select-option.is-selected {
  background: var(--mo-primary);
}
.mo-select .select-list.is-days .select-option.is-selected .day-wd,
.mo-select .select-list.is-days .select-option.is-selected .day-num,
.mo-select .select-list.is-days .select-option.is-selected .day-mo,
.mo-select .select-list.is-days .select-option.is-selected .option-label {
  color: #FFFFFF;
}
.mo-select.opens-up .select-list {
  top: auto;
  bottom: calc(100% + 8px);
}
.mo-select.is-open .select-list {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.mo-select .select-list:focus {
  outline: none;
}
.mo-select .select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--mo-heading);
  font-size: 15px;
  line-height: 1.4;
  cursor: pointer;
}
.mo-select .select-option.is-focused {
  background: var(--mo-tonal);
}
.mo-select .select-option.is-selected {
  color: var(--mo-primary);
  font-weight: 700;
}
.mo-select .select-option.is-disabled {
  opacity: 0.4;
  cursor: default;
}
.mo-select .option-meta {
  color: var(--mo-muted);
  font-size: 12px;
  white-space: nowrap;
}

/*======================
7. Subheader
========================*/
/* inner pages: breadcrumb + h1 + lead on slide one's treatment room (mirrored), under the
   shared photo band's wash, with the soft aurora drifting over it */
.mo-subheader {
  padding: 100px 0 104px;
  background: linear-gradient(90deg, #0E285C 0%, #14498A 55%, #1470AF 100%);
}
/* the photograph (mirrored: the chair stands on the right) takes the right part of the banner,
   at a natural size, and fades in from the blue rather than covering the whole band */
.mo-subheader .band-img {
  left: auto;
  right: 0;
  width: 58%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000000 42%);
  mask-image: linear-gradient(90deg, transparent 0%, #000000 42%);
}
.mo-subheader .band-img img {
  object-position: center 58%;
}
.mo-subheader .band-img::after {
  background: linear-gradient(90deg, rgba(20, 112, 175, 0.7) 0%, rgba(20, 112, 175, 0.38) 60%, rgba(20, 112, 175, 0.24) 100%);
}
html[data-theme="dark"] .mo-subheader {
  background: linear-gradient(90deg, #081129 0%, #0E2A55 55%, #0F3A66 100%);
}
html[data-theme="dark"] .mo-subheader .band-img::after {
  background: linear-gradient(90deg, rgba(15, 58, 102, 0.8) 0%, rgba(15, 58, 102, 0.5) 100%);
}
.mo-subheader .mo-gl {
  z-index: -1;
}
.sub-inner {
  position: relative;
  max-width: 760px;
}
.sub-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.72);
}
.sub-crumbs li + li::before {
  content: "\f054";
  margin-right: 8px;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 9px;
  color: var(--mo-coral-bright);
}
.mo-subheader .sub-crumbs a {
  color: var(--mo-sky-soft);
}
html[data-theme="dark"] .mo-subheader .sub-crumbs a {
  color: #CFE4F7;
}
.mo-subheader .sub-crumbs [aria-current] {
  color: #FFFFFF;
}
.sub-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--mo-surface);
  color: var(--mo-primary);
  font-size: 32px;
  box-shadow: var(--mo-shadow);
}
.sub-title {
  margin-bottom: 14px;
}
.mo-subheader .mo-smile-arc {
  margin-bottom: 18px;
}
.mo-subheader .sub-lead {
  margin: 0;
  font-size: 19px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.86);
}

/*======================
8. Hero Slider
========================*/
/* the base's boxed hero, now three slides: a rounded frame inset from the window edges,
   a navy wash over the practice's own photographs, copy left and one card right */
.mo-hero {
  position: relative;
  padding: 0 16px;
  /* the frame's rounded foot shows the band that follows, never a white sliver */
  background: linear-gradient(180deg, var(--mo-bg) calc(100% - 26px), var(--mo-bg-soft) calc(100% - 26px));
}
.hero-frame {
  position: relative;
  overflow: hidden;
  border-radius: 0 0 var(--mo-radius-lg) var(--mo-radius-lg);
  background: var(--mo-night);
  isolation: isolate;
}
.hero-slider {
  position: relative;
  z-index: 1;
}
/* every slide is as tall as the tallest, so no photograph stops short of the frame's foot */
.hero-slider .swiper-slide {
  height: auto;
}
.hero-slide {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 740px;
  padding: 100px 0 190px;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.08);
  transition: transform 7.5s linear;
}
.swiper-slide-active .hero-bg img {
  transform: scale(1);
}
.hero-slide.is-right-photo .hero-bg img {
  object-position: 80% 30%;
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(14, 29, 68, 0.94) 0%, rgba(14, 29, 68, 0.78) 42%, rgba(14, 29, 68, 0.28) 75%, rgba(14, 29, 68, 0.15) 100%),
    linear-gradient(0deg, rgba(14, 29, 68, 0.55) 0%, rgba(14, 29, 68, 0) 40%);
}
.hero-gl {
  z-index: 2;
}
.hero-row {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 60px;
  align-items: center;
}
.hero-copy {
  max-width: 700px;
}
.hero-kicker {
  color: var(--mo-sky);
}
.hero-title {
  margin-bottom: 22px;
  font-size: var(--mo-fs-display);
  font-weight: 500;
  line-height: 1.02;
  color: #FFFFFF;
}
/* every heading line is a set line: it never breaks inside */
.hero-title .mo-line {
  display: block;
}
.hero-title em {
  color: var(--mo-sky);
}
.hero-lead {
  max-width: 600px;
  margin-bottom: 34px;
  font-size: 20px;
  line-height: 1.65;
  color: rgba(234, 242, 251, 0.86);
}
/*---- 8.1 Slide Cards ----*/
.hero-card {
  justify-self: end;
}
.hero-doctor {
  position: relative;
  isolation: isolate;
  width: 420px;
  max-width: 100%;
}
/* a glass plate turned behind the portrait */
.hero-doctor::before {
  content: "";
  position: absolute;
  top: 34px;
  right: -30px;
  bottom: -26px;
  left: 30px;
  z-index: -1;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 34px;
  background: rgba(var(--mo-sky-rgb), 0.2);
  transform: rotate(5deg);
}
.doctor-photo {
  display: block;
  width: 100%;
  padding-top: 118%;
  border: 8px solid rgba(255, 255, 255, 0.16);
  border-radius: 34px;
  background: #FFFFFF;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.35);
}
.doctor-photo img {
  position: absolute;
  inset: 0;
  object-position: center 18%;
}
.doctor-badge {
  position: absolute;
  left: -14px;
  top: 34px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 16px;
  background: var(--mo-coral);
  color: #FFFFFF;
  box-shadow: 0 18px 40px rgba(var(--mo-coral-rgb), 0.35);
  line-height: 1.2;
}
.doctor-badge b {
  font-family: var(--mo-ff-heading);
  font-size: 34px;
  font-weight: 600;
}
.doctor-badge span {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
/* his name and his introduction video, on a chip out over the portrait's left edge */
.doctor-chip {
  position: absolute;
  bottom: 54px;
  left: -58px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 22px 10px 10px;
  border-radius: 60px;
  background: var(--mo-surface);
  box-shadow: var(--mo-shadow-lg);
}
.hero-doctor .doctor-play {
  position: relative;
  width: 48px;
  height: 48px;
  font-size: 15px;
}
.chip-copy {
  display: grid;
  line-height: 1.3;
}
.chip-copy b {
  font-size: 16px;
  color: var(--mo-heading);
}
.chip-copy span {
  font-size: 13px;
  color: var(--mo-muted);
}
/* the team slide: the photograph fills the right of the frame and fades into the night
   blue behind the copy, so nobody stands under the headline */
/* the photograph itself fades out toward the copy (a mask, not a painted gradient), so no
   edge shows in either theme; the slow zoom stays inside the panel */
.hero-slide.is-split .hero-bg {
  left: 34%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000000 30%);
  mask-image: linear-gradient(90deg, transparent 0%, #000000 30%);
}
.hero-slide.is-team .hero-bg img {
  object-position: 0% 35%;
}
.hero-slide.is-split .hero-bg::after {
  background: linear-gradient(0deg, rgba(14, 29, 68, 0.5) 0%, rgba(14, 29, 68, 0) 32%);
}
/* slide two: the treatment room, its chair in view beside Dr. Carter's card */
.hero-slide.is-chair .hero-bg img {
  object-position: 38% 62%;
}
/* slide three: the smile and the aligner; the photograph starts a little further left and
   fades in faster, so the aligner in her hand stays in view */
.hero-slide.is-smile .hero-bg {
  left: 28%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000000 20%);
  mask-image: linear-gradient(90deg, transparent 0%, #000000 20%);
}
.hero-slide.is-smile .hero-bg img {
  object-position: 50% 40%;
}
/* slide three's card: the Clear Aligners figures on night glass */
.hero-stat {
  width: 360px;
  max-width: 100%;
  padding: 34px;
  border-radius: var(--mo-radius-lg);
  background: rgba(14, 29, 68, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: #FFFFFF;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.25);
}
.stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--mo-coral);
  font-size: 30px;
}
.stat-big {
  display: block;
  font-family: var(--mo-ff-heading);
  font-size: 92px;
  font-weight: 500;
  line-height: 0.95;
}
.stat-label {
  display: block;
  margin: 8px 0 20px;
  font-size: 16px;
  font-weight: 700;
}
.hero-stat .mo-rows li {
  border-color: rgba(255, 255, 255, 0.18);
}
.hero-stat .mo-rows span {
  color: rgba(234, 242, 251, 0.7);
}
.hero-stat .mo-rows b {
  color: #FFFFFF;
}
/* happy patients under the buttons: three faces and the rating */
.hero-proof {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 34px;
}
.hero-proof .mo-faces img,
.hero-proof .faces-count {
  width: 48px;
  height: 48px;
  border-color: rgba(255, 255, 255, 0.9);
}
.hero-proof .faces-count {
  font-family: var(--mo-ff-heading);
  font-size: 15px;
  font-weight: 600;
}
.proof-copy {
  display: grid;
  gap: 2px;
  line-height: 1.3;
}
.proof-copy b {
  font-size: 16px;
  color: #FFFFFF;
}
.proof-copy small {
  font-size: 14px;
  color: rgba(234, 242, 251, 0.82);
}
.proof-copy small i {
  color: #FBBC05;
}
/*---- 8.2 Controls ----*/
/* aligned to the container's right edge at every width, lifted well clear of the dock
   that overlaps the frame's foot and of the harbour lights along it */
.hero-controls-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 118px;
  z-index: 4;
  pointer-events: none;
}
.hero-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}
.hero-controls > * {
  pointer-events: auto;
}
.hero-controls .mo-round {
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.hero-controls .mo-round:hover {
  background: #FFFFFF;
  color: var(--mo-navy);
}
.hero-count {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mo-ff-heading);
  font-size: 18px;
  color: rgba(255, 255, 255, 0.7);
}
.hero-count b {
  font-weight: 600;
  color: #FFFFFF;
}
/* the slide's time runs along the logo's smile */
.hero-progress {
  position: relative;
  display: block;
  width: 86px;
  height: 22px;
  border: 3px solid transparent;
  border-bottom-color: rgba(255, 255, 255, 0.22);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  overflow: hidden;
}
.hero-progress i {
  position: absolute;
  left: -3px;
  right: -3px;
  bottom: -3px;
  top: -3px;
  border: 3px solid transparent;
  border-bottom-color: var(--mo-coral-bright);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  transform-origin: 0 50%;
}
@media (min-width: 1600px) {
  .hero-slide {
    min-height: 800px;
  }
}

/*======================
9. Quick-Action Dock
========================*/
/* under the hero: four treatments to start from, docked on the hero's foot (lifted a fixed
   28px into it, standing on the next section's own sky ground, never over the slider
   controls). The trust strip that used to sit here docks on the footer instead. */
.mo-dock {
  position: relative;
  z-index: 5;
  background: var(--mo-bg-soft);
}
.mo-dock .dock-grid {
  position: relative;
  top: -28px;
  margin-bottom: -28px;
}
/* the four treatments: the dock's tiles, the base's illustrated icons, an arrow that arrives on
   hover; the strip itself is the same as the footer's trust strip */
.cta-copy {
  flex: 1 1 auto;
  min-width: 0;
}
.cta-go {
  flex: 0 0 auto;
  font-size: 14px;
  color: var(--mo-coral);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.35s var(--mo-ease), transform 0.35s var(--mo-ease);
}
.cta-tile:hover .cta-go {
  opacity: 1;
  transform: translateX(0);
}
/* the trust strip on the footer's top edge: half over the section above, half over the night */
.footer-dock {
  position: relative;
  z-index: 3;
}
.footer-dock .dock-grid {
  position: relative;
  top: -64px;
  margin-bottom: -64px;
}
.mo-footer .footer-dock .dock-tile {
  color: var(--mo-heading);
}
.mo-footer .footer-dock .dock-tile:hover {
  color: var(--mo-heading);
}
.dock-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-radius: 20px;
  background: var(--mo-surface);
  box-shadow: var(--mo-shadow-lg);
}
.dock-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 26px 26px;
  border-radius: 20px;
  color: var(--mo-heading);
}
.dock-tile + .dock-tile::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24px;
  bottom: 24px;
  width: 1px;
  background: var(--mo-line);
}
/* the base's illustrated icons (navy line, pale pink, coral), and the new ones drawn to match */
.dock-tile img {
  flex: 0 0 auto;
  width: auto;
  height: 54px;
}
.dock-tile b {
  display: block;
  font-family: var(--mo-ff-heading);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
}
.dock-tile > span > span {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  color: var(--mo-muted);
}
.dock-tile .mo-status {
  display: flex;
  color: var(--mo-muted);
}
.dock-tile {
  transition: background-color 0.35s var(--mo-ease);
}
.dock-tile:hover {
  color: var(--mo-heading);
  background: var(--mo-sky-soft);
}
/* the section below starts higher to sit under the dock */
.mo-dock + section {
  padding-top: 92px;
}

/*======================
10. Services Band
========================*/
/* the base's sky band and four columns, the white tooth mascots on top */
.mo-services {
  position: relative;
  overflow: hidden;
}
.mo-services::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -340px;
  width: 1400px;
  height: 520px;
  transform: translateX(-50%);
  border: 3px solid transparent;
  border-bottom-color: rgba(255, 255, 255, 0.35);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  pointer-events: none;
}
.band-col {
  height: 100%;
  padding: 0 10px;
  text-align: center;
}
.band-mascot {
  width: 96px;
  height: auto;
  margin: 0 auto 26px;
  transition: transform 0.6s var(--mo-ease);
}
.band-col:hover .band-mascot {
  animation: moWiggle 0.8s var(--mo-ease);
}
html[data-theme="dark"] .band-mascot {
  opacity: 0.9;
}
/* equal slots for the title (two lines) and the blurb (three), so the four link lists
   start on one line */
.band-title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.3em;
  margin-bottom: 12px;
  font-size: 26px;
}
.band-col p {
  max-width: 300px;
  min-height: 4.95em;
  margin: 0 auto 24px;
  font-size: 16px;
  line-height: 1.65;
  opacity: 0.88;
}
.band-links {
  display: grid;
  gap: 8px;
  text-align: left;
}
.band-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.42);
  color: var(--mo-on-band);
  font-size: 15px;
  font-weight: 700;
  transition: background-color 0.3s var(--mo-ease), color 0.3s var(--mo-ease), transform 0.3s var(--mo-ease);
}
html[data-theme="dark"] .band-links a {
  background: rgba(255, 255, 255, 0.08);
}
.band-links a i {
  font-size: 11px;
  opacity: 0.6;
  transition: transform 0.3s var(--mo-ease), opacity 0.3s var(--mo-ease);
}
.band-links a:hover {
  background: var(--mo-surface);
  color: var(--mo-primary);
  transform: translateX(4px);
}
.band-links a:hover i {
  opacity: 1;
  transform: translateX(3px);
}
.band-actions {
  justify-content: center;
  margin-top: 60px;
}

/*======================
11. About The Doctor
========================*/
/* the spinning ring and the arc reach past the circle: the section keeps them in (clip, so
   nothing inside loses sticky behaviour) */
.mo-about {
  overflow: clip;
}
.about-visual {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
}
/* the base's circle: a ring of sky behind, the smile arc under it */
.about-visual::before {
  content: "";
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  border: 2px dashed rgba(var(--mo-primary-rgb), 0.25);
  animation: moSpin 60s linear infinite;
}
.about-visual::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -44px;
  height: 60px;
  border: 4px solid transparent;
  border-bottom-color: var(--mo-coral-bright);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
@keyframes moSpin {
  to { transform: rotate(360deg); }
}
.about-circle {
  display: block;
  width: 100%;
  padding-top: 100%;
}
.about-circle img {
  position: absolute;
  inset: 0;
  object-position: center 22%;
}
/* the shared .mo-play rule comes later in the cascade: these need the extra weight */
.about-visual .about-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
}
.about-visual .about-play:hover {
  transform: translate(-50%, -50%) scale(1.08);
}
.about-note {
  position: absolute;
  right: -10px;
  bottom: 54px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  line-height: 1.3;
}
.about-note > i {
  font-size: 34px;
  color: var(--mo-primary);
}
.about-note b {
  display: block;
  font-family: var(--mo-ff-heading);
  font-size: 19px;
  font-weight: 600;
  color: var(--mo-heading);
}
.about-note small {
  font-size: 13px;
  color: var(--mo-muted);
}
.about-rows {
  margin: 26px 0 34px;
}
@media (prefers-reduced-motion: reduce) {
  .about-visual::before {
    animation: none;
  }
}

/*======================
12. Smile Reveal And Before After
========================*/
.mo-smile {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.mo-smile .mo-gl {
  z-index: -1;
  opacity: 0.7;
}
.smile-links {
  display: grid;
  gap: 10px;
  margin: 28px 0 34px;
}
.smile-links a {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  transition: background-color 0.3s var(--mo-ease), transform 0.3s var(--mo-ease);
}
.smile-links a > i:first-child {
  flex: 0 0 auto;
  font-size: 30px;
  color: var(--mo-sky);
}
.smile-links a > span {
  flex: 1 1 auto;
}
.smile-links b {
  display: block;
  font-size: 16px;
}
.smile-links small {
  color: var(--mo-on-night);
  font-size: 14px;
}
.smile-links a > i:last-child {
  font-size: 12px;
  opacity: 0.6;
}
.smile-links a:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateX(4px);
}
/* before / after: the after photo sits on top, clipped to the handle's position */
/* on the landing the comparison stands taller, level with the copy beside it */
.mo-smile .ba {
  padding-top: 76%;
}
.ba {
  position: relative;
  padding-top: 49.7%;
  border-radius: var(--mo-radius-lg);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.35);
  user-select: none;
  touch-action: pan-y;
}
.ba .ba-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ba-after {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 50%);
}
.ba-tag {
  position: absolute;
  top: 20px;
  z-index: 3;
  padding: 7px 14px;
  border-radius: 30px;
  background: rgba(14, 29, 68, 0.6);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.ba-tag.is-before {
  left: 20px;
}
.ba-tag.is-after {
  right: 20px;
}
.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 4;
  width: 4px;
  margin-left: -2px;
  background: #FFFFFF;
  cursor: ew-resize;
}
.ba-handle:focus-visible {
  outline: none;
}
.ba-handle:focus-visible .ba-knob {
  box-shadow: 0 0 0 4px var(--mo-coral-bright);
}
.ba-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--mo-coral);
  color: #FFFFFF;
  font-size: 18px;
  transform: translate(-50%, -50%);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
}
.ba-caption {
  margin: 14px 0 0;
  font-size: 14px;
  text-align: right;
  color: var(--mo-on-night);
}

/*======================
13. Treatment Finder
========================*/
.finder {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 30px;
  align-items: start;
}
.finder-picks {
  margin: 0;
  padding: 0;
  border: 0;
}
/* the concerns as big tabs: an icon disc and the words; the chosen one turns white with a
   solid disc (one rule for every finder, the landing's and the services page's) */
.finder-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.finder-grid .choice-face {
  gap: 16px;
  min-height: 108px;
  padding: 20px 22px;
  border-radius: 16px;
}
/* each concern's illustrated icon, tipping a little when picked */
.finder-illus {
  flex: 0 0 auto;
  width: auto;
  height: 52px;
  transition: transform 0.4s var(--mo-ease);
}
.finder-grid .mo-choice:hover .finder-illus,
.finder-grid .mo-choice input:checked + .choice-face .finder-illus {
  transform: rotate(-4deg) scale(1.06);
}
.finder-grid .mo-choice b {
  font-size: 17px;
}

.finder-result {
  position: sticky;
  top: 110px;
  padding: 36px;
  border-top: 4px solid var(--mo-coral-bright);
}
.finder-urgency {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 6px 14px;
  border-radius: 30px;
  background: var(--mo-tonal);
  color: var(--mo-accent-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.finder-urgency.is-now,
.finder-urgency.is-today {
  background: rgba(var(--mo-coral-rgb), 0.14);
  color: var(--mo-coral);
}
.finder-title {
  font-size: 32px;
}
.finder-also {
  font-size: 15px;
}
.finder-also span:first-child {
  font-weight: 700;
  color: var(--mo-heading);
}
.finder-also a {
  color: var(--mo-accent-text);
  font-weight: 700;
}
.finder-result .mo-actions {
  margin: 24px 0 18px;
}
.finder-note {
  display: flex;
  gap: 10px;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--mo-muted);
}
.finder-note i {
  margin-top: 3px;
  color: var(--mo-primary);
}

/*======================
14. Reviews
========================*/
/* the Google rating as it stands (average and count, never a filtered tally), then the
   reviews as cards on a rail */
.mo-rating {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 26px;
  padding: 12px 26px 12px 12px;
  border-radius: 60px;
  background: var(--mo-surface);
  box-shadow: var(--mo-shadow);
  color: var(--mo-text);
  transition: box-shadow 0.35s var(--mo-ease), transform 0.35s var(--mo-ease);
}
.mo-rating:hover {
  color: var(--mo-text);
  box-shadow: var(--mo-shadow-lg);
  transform: translateY(-3px);
}
.rating-g {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--mo-bg-soft);
  font-size: 24px;
}
.rating-num {
  font-family: var(--mo-ff-heading);
  font-size: 42px;
  font-weight: 600;
  line-height: 1;
  color: var(--mo-heading);
}
.rating-copy {
  display: grid;
  gap: 6px;
  line-height: 1.2;
}
.rating-copy small {
  font-size: 13px;
  color: var(--mo-muted);
}
.mo-rating.is-plain {
  margin: 0;
  padding: 0;
  background: none;
  box-shadow: none;
}
.mo-rating.is-plain .rating-g {
  width: 60px;
  height: 60px;
  font-size: 30px;
}
.mo-rating.is-plain .rating-num {
  font-size: 56px;
}
/* five grey stars, five gold ones clipped to the rating */
.mo-rating-stars {
  position: relative;
  display: inline-flex;
  justify-self: start;
  width: max-content;
  font-size: 17px;
  line-height: 1;
}
.mo-rating-stars i {
  flex: 0 0 auto;
  padding: 0 1px;
}
.rs-base {
  display: inline-flex;
  color: rgba(var(--mo-primary-rgb), 0.18);
}
.rs-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: inline-flex;
  width: var(--mo-rating-fill);
  overflow: hidden;
  white-space: nowrap;
  color: #FBBC05;
}
.review-rail .swiper-slide {
  height: auto;
}
.review-rail .review-card {
  height: 100%;
}
/* on a photo band the rail's arrows take a white glass face */
.mo-photo-band .quote-nav .mo-round.is-tonal {
  background: rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
}
.mo-photo-band .quote-nav .mo-round.is-tonal:hover {
  background: #FFFFFF;
  color: var(--mo-navy);
}
.quote-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 36px;
}
.mo-actions.is-center {
  justify-content: center;
  margin-top: 44px;
}
/* a review as a card (the reviews page, the service pages) */
.review-card {
  height: 100%;
  padding: 30px;
}
.review-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.review-who {
  display: grid;
  flex: 1 1 auto;
  line-height: 1.3;
}
.review-who b {
  color: var(--mo-heading);
}
.review-who .mo-stars {
  margin-top: 3px;
  font-size: 12px;
}
.review-g {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--mo-surface);
  box-shadow: 0 6px 18px rgba(20, 40, 92, 0.1);
  font-size: 22px;
}
/* what the review is about, as the card's headline */
.review-topic {
  margin: 4px 0 12px;
  font-family: var(--mo-ff-heading);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--mo-heading);
}
.review-topic::first-letter {
  text-transform: uppercase;
}
/* a live review's date */
.review-when {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mo-accent-text);
}
.review-text {
  margin: 0;
}
/* a live review (Google feed): the reviewer's own photo in the round, unearned stars greyed */
.mo-initial.has-photo {
  overflow: hidden;
}
.mo-initial.has-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mo-stars .is-off {
  color: rgba(var(--mo-primary-rgb), 0.18);
}
.review-who b a {
  color: inherit;
}
.review-text p {
  margin: 0;
  font-family: var(--mo-ff-heading);
  font-size: 19px;
  line-height: 1.55;
  color: var(--mo-heading);
}

/*======================
15. Special And Insurance Helper
========================*/
/* the First Visit band: the shared photo band (.mo-photo-band), with the helper's own colours */
.mo-special {
  color: rgba(255, 255, 255, 0.86);
}
/* x-ray films on a lightbox glow, hanging off both edges of a band in the side gutters only (each
   shows what the container leaves free); the band's content stays above them */
.xray-films ~ .container {
  position: relative;
  z-index: 1;
}
.xray-films {
  --xr-w: 380px;
  --xr-ctn: 1592px;
  --xr-peek: max(44px, calc((100vw - var(--xr-ctn)) / 2 - 18px));
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.xray-card {
  position: absolute;
  display: block;
  width: var(--xr-w);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 18px;
  background: #04070D;
  box-shadow: 0 0 0 1px rgba(170, 205, 255, 0.22), 0 0 46px rgba(120, 175, 255, 0.28), 0 34px 70px rgba(0, 0, 0, 0.5);
}
.xray-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.08) brightness(1.04);
}
/* the film's sheen and a cool lightbox cast */
.xray-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 38%),
    linear-gradient(0deg, rgba(90, 150, 255, 0.16), rgba(90, 150, 255, 0.16));
  box-shadow: inset 0 0 0 6px rgba(4, 7, 13, 0.85), inset 0 0 40px rgba(130, 185, 255, 0.25);
}
/* the side marker a radiograph carries, on the side that shows */
.xray-mark {
  position: absolute;
  top: 16px;
  z-index: 1;
  font-family: var(--mo-ff-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(235, 244, 255, 0.85);
}
.xray-card[data-xray="left"] .xray-mark {
  right: 18px;
}
.xray-card[data-xray="right"] .xray-mark {
  left: 18px;
}
.xray-card[data-xray="left"] {
  left: calc(var(--xr-peek) - var(--xr-w));
}
.xray-card[data-xray="right"] {
  right: calc(var(--xr-peek) - var(--xr-w));
}
.xray-card.is-l1 {
  top: 9%;
  rotate: -6deg;
}
.xray-card.is-l2 {
  top: 55%;
  left: calc(var(--xr-peek) - var(--xr-w) - 34px);
  rotate: 4deg;
}
.xray-card.is-r1 {
  top: 17%;
  rotate: 5deg;
}
.xray-card.is-r2 {
  top: 61%;
  right: calc(var(--xr-peek) - var(--xr-w) - 34px);
  rotate: -4deg;
}
@media (max-width: 1959.98px) {
  .xray-films {
    --xr-ctn: 1472px;
  }
}
@media (max-width: 1599.98px) {
  .xray-films {
    --xr-w: 320px;
    --xr-ctn: 1352px;
  }
}
@media (max-width: 1399.98px) {
  .xray-films {
    --xr-ctn: 1140px;
  }
}
@media (max-width: 1199.98px) {
  .xray-films {
    display: none;
  }
}
.mo-special h2,
.mo-special .mo-lead {
  color: #FFFFFF;
}
.mo-special h2 em {
  color: var(--mo-sky-soft);
}
html[data-theme="dark"] .mo-special h2 em {
  color: #CFE4F7;
}
.mo-special .mo-eyebrow {
  color: #FFFFFF;
}
.mo-special .mo-lead {
  opacity: 0.9;
}
html[data-theme="dark"] .mo-special {
  background: #0F3A66;
}
/* the offer as a ticket: a coral face with the price, notches and a perforation, the stub with
   the details; the shadow follows the notches */
.special-card {
  position: relative;
  max-width: 480px;
  margin-left: auto;
  filter: drop-shadow(0 30px 44px rgba(14, 29, 68, 0.32));
}
.special-top {
  position: relative;
  overflow: hidden;
  padding: 34px 36px 44px;
  border-radius: 24px 24px 0 0;
  /* a soft peach face, the coral kept for the price and the marks */
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(140deg, #FFF3EE 0%, #FCE1D6 100%);
  color: var(--mo-coral);
  text-align: center;
  -webkit-mask:
    radial-gradient(circle 16px at 0 100%, transparent 15.5px, #000000 16px) left / 51% 100% no-repeat,
    radial-gradient(circle 16px at 100% 100%, transparent 15.5px, #000000 16px) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle 16px at 0 100%, transparent 15.5px, #000000 16px) left / 51% 100% no-repeat,
    radial-gradient(circle 16px at 100% 100%, transparent 15.5px, #000000 16px) right / 51% 100% no-repeat;
}
.special-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border: 1px solid rgba(var(--mo-coral-rgb), 0.3);
  border-radius: 30px;
  background: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.special-price {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 20px 0 4px;
}
.special-price b {
  font-family: var(--mo-ff-heading);
  font-size: 108px;
  font-weight: 500;
  line-height: 1;
  color: var(--mo-coral);
}
.special-price small {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mo-navy);
}
html[data-theme="dark"] .special-top {
  background: linear-gradient(140deg, #2A2230 0%, #3A2A2C 100%);
}
html[data-theme="dark"] .special-price small {
  color: #F3E4DE;
}
/* the logo's smile, drawn under the price */
.special-arc {
  display: block;
  width: 120px;
  height: 24px;
  margin: 0 auto;
  border: 4px solid transparent;
  border-bottom-color: var(--mo-coral-bright);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.special-mascot {
  position: absolute;
  right: -26px;
  bottom: -30px;
  width: 132px;
  height: auto;
  opacity: 0.08;
  transform: rotate(-12deg);
}
.special-stub {
  position: relative;
  padding: 30px 36px 36px;
  border-radius: 0 0 24px 24px;
  background: var(--mo-surface);
  -webkit-mask:
    radial-gradient(circle 16px at 0 0, transparent 15.5px, #000000 16px) left / 51% 100% no-repeat,
    radial-gradient(circle 16px at 100% 0, transparent 15.5px, #000000 16px) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle 16px at 0 0, transparent 15.5px, #000000 16px) left / 51% 100% no-repeat,
    radial-gradient(circle 16px at 100% 0, transparent 15.5px, #000000 16px) right / 51% 100% no-repeat;
}
/* the perforation between the notches */
.special-stub::before {
  content: "";
  position: absolute;
  top: 0;
  left: 26px;
  right: 26px;
  border-top: 2px dashed var(--mo-line);
}
.special-card .mo-rows {
  margin-bottom: 26px;
  text-align: left;
}
/* the insurance helper: two choices, a field, a plain answer */
.ins-helper {
  margin-top: 30px;
  padding: 30px;
  border-radius: var(--mo-radius-card);
  background: rgba(255, 255, 255, 0.1);
}
.ins-q {
  margin-bottom: 14px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FFFFFF;
}
.ins-picks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.mo-special .mo-choice .choice-face {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}
.mo-special .mo-choice .choice-face > i {
  color: #FFFFFF;
}
.mo-special .mo-choice input:checked + .choice-face {
  background: #FFFFFF;
  color: var(--mo-navy);
  border-color: #FFFFFF;
}
.mo-special .mo-choice input:checked + .choice-face > i {
  color: var(--mo-primary);
}
.mo-special .mo-field > label {
  color: #FFFFFF;
}
.mo-special .mo-field > label > i {
  color: var(--mo-sky-soft);
}
.mo-special .mo-field input {
  background: rgba(255, 255, 255, 0.92);
  color: var(--mo-navy);
}
.ins-answer {
  margin: 18px 0 20px;
  font-size: 17px;
  color: #FFFFFF;
}
.mo-special .ins-helper .mo-btn.is-tonal {
  background: #FFFFFF;
  color: var(--mo-navy);
}
/* the same helper on a light page */
.ins-helper.is-light {
  background: var(--mo-surface);
  box-shadow: var(--mo-shadow);
}
.ins-helper.is-light .ins-q,
.ins-helper.is-light .ins-answer {
  color: var(--mo-heading);
}
/*---- 15.1 Accepted Plans ----*/
.plans {
  margin-top: 70px;
}
.plans-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 24px;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--mo-line);
}
.plans-title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mo-ff-heading);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--mo-heading);
}
.plans-title i {
  font-size: 30px;
  color: var(--mo-coral-bright);
}
.plans-sub {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mo-accent-text);
}
.plans-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
/* a tile per plan: the insurer's logo on white (in both themes, as the brands ask), the plan's
   exact name and the accepted mark under a hairline */
.plan-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 30px 22px 24px;
  border-radius: var(--mo-radius-card);
  background: var(--mo-surface);
  box-shadow: 0 10px 30px rgba(20, 40, 92, 0.08);
  text-align: center;
  transition: transform 0.4s var(--mo-ease), box-shadow 0.4s var(--mo-ease);
}
.plan-tile:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 50px rgba(20, 40, 92, 0.14);
}
.plan-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 76px;
  margin-bottom: 20px;
  padding: 0 10px;
  border-radius: 12px;
  background: #FFFFFF;
}
.plan-logo img {
  max-width: 100%;
  height: auto;
}
.plan-name {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  width: 100%;
  padding-top: 18px;
  border-top: 1px solid var(--mo-line);
  font-weight: 700;
  line-height: 1.35;
  color: var(--mo-heading);
}
.plan-ok {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--mo-ok);
}
.plans.is-band {
  margin-top: 0;
}
.plans.is-band .plans-grid {
  gap: 24px;
}

/*======================
16. Kids Teaser, Inside The Practice, Location, FAQ, CTA
========================*/
/*---- 16.1 Kids Teaser ----*/
.kids-visual {
  position: relative;
  padding: 0 0 70px 0;
}
.kids-photo {
  display: block;
  margin-left: 60px;
  padding-top: 62%;
}
.kids-photo img {
  position: absolute;
  inset: 0;
  object-position: center 30%;
}
.kids-photo-2 {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46%;
  padding-top: 46%;
  border: 8px solid var(--mo-bg);
  box-shadow: var(--mo-shadow-lg);
}
.kids-photo-2 img {
  position: absolute;
  inset: 0;
}
.kids-mascot {
  position: absolute;
  right: 22px;
  bottom: 14px;
  width: 112px;
  height: auto;
}
html[data-theme="dark"] .kids-mascot {
  filter: invert(1);
}
.mo-kids-teaser .mo-rows {
  margin: 26px 0 32px;
}
/*---- 16.2 Lorem Avenue And Inside The Practice ----*/
/* the community mosaic: the storefront wide, the booth and the fair tall, the table and
   the cornhole board underneath */
.community-mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr 0.9fr 0.9fr;
  grid-template-rows: 330px 330px;
  gap: 20px;
}
.community-mosaic .tile-street {
  grid-column: 1 / 3;
}
.community-mosaic .tile-booth {
  grid-column: 3;
  grid-row: 1 / 3;
}
.community-mosaic .tile-fair {
  grid-column: 4;
  grid-row: 1 / 3;
}
.community-mosaic .tile-fair img {
  object-position: center 30%;
}
/* the rooms: the waiting room large, the two treatment rooms stacked beside it */
.inside-mosaic {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  grid-template-rows: 330px 330px;
  gap: 20px;
}
.inside-mosaic .tile-wait {
  grid-row: 1 / 3;
}
.community-mosaic .mo-frame,
.inside-mosaic .mo-frame {
  display: block;
}
/* a photo that opens in the lightbox: the expand mark arrives on hover */
.media-tile {
  cursor: zoom-in;
}
.media-hint {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 24px rgba(14, 29, 68, 0.18);
  font-size: 15px;
  color: var(--mo-navy);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.35s var(--mo-ease), transform 0.35s var(--mo-ease), background-color 0.35s var(--mo-ease), color 0.35s var(--mo-ease);
}
.media-tile:hover .media-hint,
.media-tile:focus-visible .media-hint,
.ig-tile:hover .media-hint,
.ig-tile:focus-visible .media-hint {
  opacity: 1;
  transform: scale(1);
}
.media-tile:hover .media-hint {
  background: var(--mo-coral);
  color: #FFFFFF;
}
.ig-tile .media-hint {
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  font-size: 13px;
}
/* the lightbox on the night blue, not black */
.fancybox-bg {
  background: var(--mo-night);
}
.fancybox-is-open .fancybox-bg {
  opacity: 0.94;
}
.fancybox-caption {
  font-family: var(--mo-ff-body);
  font-size: 16px;
}
.ig-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 64px 0 24px;
}
.ig-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 26px;
}
.ig-title i {
  color: #D6249F;
}
/* the about page's section title leads with the same pink Instagram mark */
.ig-heading i {
  margin-right: 12px;
  font-size: 0.82em;
  color: #D6249F;
}
.ig-title a {
  color: var(--mo-accent-text);
}
.ig-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.ig-tile {
  position: relative;
  display: block;
  overflow: hidden;
  padding-top: 125%;
  cursor: zoom-in;
  border-radius: 14px;
  background: var(--mo-sky-soft);
}
.ig-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--mo-ease);
}
.ig-cap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  padding: 14px;
  background: linear-gradient(0deg, rgba(14, 29, 68, 0.9) 0%, rgba(14, 29, 68, 0.2) 60%, rgba(14, 29, 68, 0) 100%);
  color: #FFFFFF;
  font-size: 13px;
  line-height: 1.4;
  opacity: 0;
  transition: opacity 0.4s var(--mo-ease);
}
.ig-cap i {
  font-size: 18px;
}
.ig-cap small {
  opacity: 0.7;
}
.ig-tile:hover img {
  transform: scale(1.07);
}
.ig-tile:hover .ig-cap,
.ig-tile:focus-visible .ig-cap {
  opacity: 1;
}
/*---- 16.3 Location ----*/
.location-status {
  margin: 4px 0 18px;
  font-size: 15px;
}
.location-status b {
  color: var(--mo-heading);
}
.mo-location .hours-list {
  max-width: 420px;
  margin-bottom: 32px;
}
.location-visual {
  position: relative;
  padding-bottom: 60px;
}
.mo-map {
  position: relative;
  overflow: hidden;
  border-radius: var(--mo-radius-lg);
  background: var(--mo-sky-soft);
  box-shadow: var(--mo-shadow);
}
.mo-map iframe {
  display: block;
  width: 100%;
  height: 440px;
  border: 0;
  /* the street map washed in the brand blue (the base's was grey) */
  filter: grayscale(1) sepia(1) hue-rotate(172deg) saturate(1.9) brightness(0.98) contrast(0.96);
}
.mo-map.is-tall iframe {
  height: 520px;
}
.location-photo {
  position: absolute;
  left: -40px;
  bottom: 0;
  width: 52%;
  padding-top: 21%;
  border: 8px solid var(--mo-bg);
}
.location-photo img {
  position: absolute;
  inset: 0;
}
/*---- 16.4 FAQ ----*/
.faq-list {
  display: grid;
  gap: 12px;
}
.faq-item details {
  border-radius: 14px;
  background: var(--mo-surface);
  box-shadow: 0 6px 20px rgba(20, 40, 92, 0.05);
  transition: box-shadow 0.3s var(--mo-ease);
}
.faq-item details[open] {
  box-shadow: var(--mo-shadow);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  font-family: var(--mo-ff-heading);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--mo-heading);
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--mo-tonal);
  color: var(--mo-primary);
  font-size: 13px;
  transition: transform 0.35s var(--mo-ease), background-color 0.3s var(--mo-ease), color 0.3s var(--mo-ease);
}
.faq-item details[open] summary i {
  transform: rotate(45deg);
  background: var(--mo-coral);
  color: #FFFFFF;
}
.faq-answer {
  padding: 0 26px 22px;
}
.faq-answer p {
  margin: 0;
}
.faq-contact {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 30px 0 22px;
  padding: 20px 24px;
}
.faq-contact small {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mo-muted);
}
.faq-contact a {
  font-family: var(--mo-ff-heading);
  font-size: 26px;
  font-weight: 500;
}
/*---- 16.5 CTA ----*/
.cta-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.cta-inner .mo-title-block {
  margin-bottom: 40px;
}
.cta-inner .mo-lead a {
  font-weight: 700;
  color: var(--mo-on-band);
  text-decoration: underline;
}
.cta-form {
  padding: 28px;
}
.quick-form.is-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  gap: 16px;
  align-items: end;
}
.quick-form.is-row .form-status {
  grid-column: 1 / -1;
  margin: 0;
}
.quick-form:not(.is-row) {
  display: grid;
  gap: 18px;
}

/*======================
17. Kids Page
========================*/
/*---- 17.1 Kids Hero ----*/
/* a different composition from the landing: a bright ground, copy left, two photos
   stacked like stickers (organic blobs on the later slides), mascots and stickers bobbing
   around them, soft ribbons drifting behind (WebGL) */
.mo-kids-hero {
  background: var(--mo-bg);
}
.mo-kids-hero .hero-frame {
  background: linear-gradient(135deg, #FFF4D1 0%, #E6F7F1 55%, #E8F1FA 100%);
}
html[data-theme="dark"] .mo-kids-hero .hero-frame {
  background: linear-gradient(135deg, #1F2A4A 0%, #10304A 55%, #11244A 100%);
}
.mo-kids-hero .mo-gl {
  z-index: 0;
}
.mo-kids-hero .hero-slide {
  min-height: 700px;
  padding: 90px 0 140px;
}
.mo-kids-hero .hero-title {
  color: var(--mo-heading);
}
.mo-kids-hero .hero-title em {
  color: var(--mo-coral);
}
html[data-theme="dark"] .mo-kids-hero .hero-title em {
  color: var(--mo-sun);
}
.mo-kids-hero .hero-lead {
  color: var(--mo-text);
}
.mo-kids-hero .hero-kicker {
  color: var(--mo-accent-text);
}
.kids-pic {
  position: relative;
  isolation: isolate;
  width: 520px;
  max-width: 100%;
}
/* confetti behind the photographs: dots in the four kids' colours */
.kids-pic::before {
  content: "";
  position: absolute;
  top: -46px;
  left: -60px;
  z-index: -1;
  width: 220px;
  height: 180px;
  background-image:
    radial-gradient(circle, rgba(242, 89, 42, 0.55) 3px, transparent 3.6px),
    radial-gradient(circle, rgba(25, 168, 132, 0.5) 3px, transparent 3.6px);
  background-position: 0 0, 13px 13px;
  background-size: 26px 26px;
}
.kids-pic::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -30px;
  z-index: -1;
  width: 170px;
  height: 140px;
  background-image:
    radial-gradient(circle, rgba(240, 165, 0, 0.6) 3px, transparent 3.6px),
    radial-gradient(circle, rgba(232, 87, 138, 0.5) 3px, transparent 3.6px);
  background-position: 0 0, 13px 13px;
  background-size: 26px 26px;
}
/* each slide's note: an illustrated mark and one fact, on a white card at the photo's foot */
.kids-note {
  position: absolute;
  left: -64px;
  bottom: 26px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 24px 12px 12px;
  border-radius: 20px;
  background: var(--mo-surface);
  box-shadow: var(--mo-shadow-lg);
  line-height: 1.3;
  animation: moBob 6s ease-in-out infinite;
}
.kids-note-illus {
  width: auto;
  height: 52px;
}
.kids-note b {
  display: block;
  font-family: var(--mo-ff-kids);
  font-size: 19px;
  font-weight: 600;
  color: var(--mo-heading);
}
.kids-note small {
  font-size: 14px;
  color: var(--mo-muted);
}
/* the hero's last word in the kids' face, a letter per colour */
.kids-word {
  font-family: var(--mo-ff-kids);
  font-size: 0.94em;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.kids-word span {
  display: inline-block;
}
.kids-word .kl-1 { color: #F2592A; }
.kids-word .kl-2 { color: #F0A500; }
.kids-word .kl-3 { color: #19A884; }
.kids-word .kl-4 { color: #E8578A; }
.swiper-slide-active .kids-word span {
  animation: moHop 0.7s var(--mo-ease) both;
}
.swiper-slide-active .kids-word span:nth-child(2) { animation-delay: 0.06s; }
.swiper-slide-active .kids-word span:nth-child(3) { animation-delay: 0.12s; }
.swiper-slide-active .kids-word span:nth-child(4) { animation-delay: 0.18s; }
.swiper-slide-active .kids-word span:nth-child(5) { animation-delay: 0.24s; }
.swiper-slide-active .kids-word span:nth-child(6) { animation-delay: 0.3s; }
.swiper-slide-active .kids-word span:nth-child(7) { animation-delay: 0.36s; }
.swiper-slide-active .kids-word span:nth-child(8) { animation-delay: 0.42s; }
@keyframes moHop {
  0% { transform: translateY(0); }
  40% { transform: translateY(-14px) rotate(-6deg); }
  100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .kids-note,
  .swiper-slide-active .kids-word span {
    animation: none;
  }
}
.kids-blob {
  display: block;
  width: 100%;
  padding-top: 100%;
  border: 12px solid #FFFFFF;
  box-shadow: 0 30px 70px rgba(20, 40, 92, 0.18);
}
.kids-blob.is-wide {
  padding-top: 78%;
  border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%;
}
.kids-blob img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* slides two and three: one large blob, as tall as slide one's pair */
.kids-pic.is-blob {
  width: 640px;
}
.kids-pic.is-blob .kids-blob.is-wide {
  padding-top: 90%;
}
/* slide one: two photo cards stacked at an angle, the small one overlapping the corner */
.kids-stack {
  position: relative;
  display: block;
  width: 100%;
  padding-top: 112%;
}
.stack-card {
  position: absolute;
  border: 10px solid #FFFFFF;
  border-radius: 34px;
  box-shadow: 0 30px 70px rgba(20, 40, 92, 0.18);
}
.stack-card img {
  position: absolute;
  inset: 0;
}
.stack-card.is-main {
  top: 0;
  right: 0;
  width: 84%;
  height: 82%;
  transform: rotate(3deg);
}
.stack-card.is-sub {
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 46%;
  height: 42%;
  transform: rotate(-7deg);
}
.kids-stack ~ .kids-sticker.is-b {
  top: -10px;
  left: 6%;
}
.kids-float {
  position: absolute;
  width: 110px;
  height: auto;
  animation: moBob 4s ease-in-out infinite;
}
.kids-float.is-a {
  right: -26px;
  bottom: 30px;
}
.kids-float.is-c {
  left: -30px;
  top: 10px;
}
html[data-theme="dark"] .kids-float {
  filter: invert(1);
}
.kids-sticker {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: var(--mo-sun);
  color: var(--mo-navy);
  font-size: 30px;
  box-shadow: 0 16px 34px rgba(20, 40, 92, 0.18);
  animation: moBob 5s ease-in-out infinite reverse;
}
.kids-sticker.is-b {
  left: -18px;
  top: 40px;
}
.kids-sticker.is-d {
  right: 4px;
  top: -16px;
  background: var(--mo-bubble);
  color: #FFFFFF;
}
.kids-sticker.is-e {
  top: -18px;
  right: -12px;
  z-index: 3;
}
@keyframes moBob {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-14px) rotate(4deg); }
}
.mo-kids-hero .hero-controls .mo-round {
  background: #FFFFFF;
  color: var(--mo-navy);
}
.mo-kids-hero .hero-controls .mo-round:hover {
  background: var(--mo-coral);
  color: #FFFFFF;
}
.mo-kids-hero .hero-count {
  color: var(--mo-muted);
}
.mo-kids-hero .hero-count b {
  color: var(--mo-heading);
}
.mo-kids-hero .hero-progress {
  border-bottom-color: rgba(20, 40, 92, 0.15);
}
@media (prefers-reduced-motion: reduce) {
  .kids-float,
  .kids-sticker {
    animation: none;
  }
}
/*---- 17.2 Facts ----*/
.facts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
/* docked: the tray rises 96px over the hero's foot and sits on the next section's ground (the
   hero's own ground turns to it at the same line, so the frame's gutters and corners match) */
.mo-kids-hero {
  background: linear-gradient(180deg, var(--mo-bg) calc(100% - 96px), var(--mo-bg-soft) calc(100% - 96px));
}
.mo-facts.is-docked {
  position: relative;
  z-index: 4;
  margin-top: -96px;
  background: linear-gradient(180deg, transparent 96px, var(--mo-bg-soft) 96px);
}
.mo-facts.is-docked .facts-grid {
  gap: 14px;
  padding: 14px;
  border-radius: 34px;
  background: var(--mo-surface);
  box-shadow: 0 30px 70px rgba(20, 40, 92, 0.14);
}
html[data-theme="dark"] .mo-facts.is-docked .facts-grid {
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}
.fact-tile {
  padding: 30px 26px;
  border-radius: 24px;
  text-align: center;
  color: var(--mo-navy);
}
.fact-tile.is-sun { background: #FFF1C4; }
.fact-tile.is-mint { background: #D8F4EC; }
.fact-tile.is-bubble { background: #FFE0EA; }
.fact-tile.is-sky { background: #DCEAF7; }
html[data-theme="dark"] .fact-tile {
  color: var(--mo-heading);
}
html[data-theme="dark"] .fact-tile.is-sun { background: #3A3218; }
html[data-theme="dark"] .fact-tile.is-mint { background: #12362F; }
html[data-theme="dark"] .fact-tile.is-bubble { background: #3A2232; }
html[data-theme="dark"] .fact-tile.is-sky { background: #14305A; }
.fact-num {
  display: block;
  font-family: var(--mo-ff-heading);
  font-size: 64px;
  font-weight: 600;
  line-height: 1;
}
.fact-num small {
  font-size: 24px;
  font-weight: 500;
}
.fact-label {
  display: block;
  margin-top: 10px;
  font-size: 15px;
  font-weight: 700;
}
/* each fact leads with its illustrated mark, tipping when the tile is hovered */
.fact-tile {
  transition: transform 0.4s var(--mo-ease), box-shadow 0.4s var(--mo-ease);
}
.fact-tile:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 44px rgba(20, 40, 92, 0.12);
}
.fact-illus {
  display: block;
  width: auto;
  height: 62px;
  margin: 0 auto 14px;
  transition: transform 0.45s var(--mo-ease);
}
.fact-tile:hover .fact-illus {
  transform: rotate(-6deg) scale(1.06);
}
/* headings whose letters take the kids' colours under the pointer (js: Hover Colour) */
[data-hover-colour] {
  cursor: default;
}
.hc-ltr {
  transition: color 0.8s ease;
}
/*---- 17.3 Scalloped Bands ----*/
/* the kids' colour bands get a row of bumps along their top and bottom edges, like a cloud */
.has-scallops {
  position: relative;
  z-index: 1;
  --scallop: var(--mo-band);
}
.mo-cta-kids.has-scallops {
  --scallop: #FFE7A3;
}
html[data-theme="dark"] .mo-cta-kids.has-scallops {
  --scallop: #3A3218;
}
.has-scallops::before,
.has-scallops::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 22px;
  pointer-events: none;
  background-size: 44px 22px;
  background-repeat: repeat-x;
}
.has-scallops::before {
  top: -21px;
  background-image: radial-gradient(circle at 22px 22px, var(--scallop) 21px, transparent 22px);
}
.has-scallops::after {
  bottom: -21px;
  background-image: radial-gradient(circle at 22px 0, var(--scallop) 21px, transparent 22px);
}
/*---- 17.4 Stickers Around The Ages ----*/
.mo-ages {
  position: relative;
  overflow: clip;
}
.kids-sticker.is-ages-a {
  top: 110px;
  left: 6%;
}
.kids-sticker.is-ages-b {
  right: 9%;
  bottom: 90px;
  background: var(--mo-bubble);
  color: #FFFFFF;
}
.kids-float.is-ages {
  top: 90px;
  right: 7%;
  width: 96px;
}
/*---- 17.5 Daycare Video ----*/
/* a photo card on a mint plate, the video button on the photo */
.daycare-visual {
  position: relative;
  isolation: isolate;
  padding: 0 0 36px 36px;
}
.daycare-visual::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 72%;
  height: 74%;
  border-radius: 34px;
  background: #D8F4EC;
}
html[data-theme="dark"] .daycare-visual::before {
  background: rgba(95, 211, 181, 0.16);
}
.daycare-photo {
  display: block;
  padding-top: 70%;
  border: 10px solid #FFFFFF;
  border-radius: 34px;
  box-shadow: 0 30px 70px rgba(20, 40, 92, 0.16);
}
.daycare-photo img {
  position: absolute;
  inset: 0;
  object-position: 62% 30%;
}
.daycare-visual .daycare-play {
  position: absolute;
  left: calc(50% + 18px);
  top: calc(50% - 18px);
  z-index: 2;
  transform: translate(-50%, -50%);
}
.daycare-visual .daycare-play:hover {
  transform: translate(-50%, -50%) scale(1.08);
}
.daycare-tag {
  position: absolute;
  left: 66px;
  bottom: 68px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 30px;
  background: var(--mo-surface);
  color: var(--mo-heading);
  font-size: 14px;
  font-weight: 700;
  box-shadow: var(--mo-shadow);
}
.daycare-tag i {
  color: var(--mo-coral);
}
.mo-daycare .mo-rows {
  margin-top: 26px;
}
/*---- 17.6 Sticker Chart ----*/
.sticker-card {
  position: sticky;
  top: 110px;
  padding: 30px;
  border-radius: 28px;
  background: var(--mo-surface);
}
.sticker-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  font-family: var(--mo-ff-heading);
  font-size: 24px;
  font-weight: 600;
  color: var(--mo-heading);
}
.sticker-title i {
  font-size: 28px;
  color: var(--mo-coral);
}
.sticker-slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.sticker-slots li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 10px;
  border: 2px dashed var(--mo-line-strong);
  border-radius: 20px;
  text-align: center;
  font-size: 14px;
  transition: border-color 0.4s var(--mo-ease), background-color 0.4s var(--mo-ease);
}
.slot-face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--mo-bg-soft);
  color: var(--mo-line-strong);
  font-size: 26px;
  transition: background-color 0.4s var(--mo-ease), color 0.4s var(--mo-ease);
}
.sticker-slots li b {
  color: var(--mo-muted);
}
.sticker-slots li.is-earned {
  border-style: solid;
  border-color: transparent;
  background: #FFF6DA;
}
.sticker-slots li.is-earned .slot-face {
  background: var(--mo-sun);
  color: var(--mo-navy);
}
.sticker-slots li.is-earned:nth-child(2) .slot-face { background: var(--mo-mint); }
.sticker-slots li.is-earned:nth-child(3) .slot-face { background: var(--mo-bubble); color: #FFFFFF; }
.sticker-slots li.is-earned:nth-child(4) .slot-face { background: var(--mo-sky); }
.sticker-slots li.is-earned b {
  color: var(--mo-navy);
}
html[data-theme="dark"] .sticker-slots li.is-earned {
  background: rgba(255, 200, 61, 0.14);
}
html[data-theme="dark"] .sticker-slots li.is-earned b {
  color: #FFFFFF;
}
.sticker-done {
  margin: 20px 0 0;
  font-weight: 700;
  text-align: center;
  color: var(--mo-accent-text);
}
.visit-steps {
  display: grid;
  gap: 22px;
}
.visit-step {
  display: flex;
  gap: 24px;
  padding: 34px;
  border-radius: 24px;
  background: var(--mo-surface);
  box-shadow: var(--mo-shadow);
  transition: transform 0.5s var(--mo-ease), box-shadow 0.5s var(--mo-ease);
}
.visit-step.is-on {
  box-shadow: inset 4px 0 0 var(--mo-sun), var(--mo-shadow-lg);
}
.visit-step .step-num {
  flex: 0 0 auto;
}
/*---- 17.7 Tooth Timeline ----*/
.tooth-tool {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 40px;
  padding: 40px;
}
.tooth-inputs {
  display: grid;
  gap: 26px;
  align-content: start;
}
.tooth-age {
  display: grid;
  gap: 8px;
}
.tt-born {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 12px;
}
.tooth-arch {
  padding: 28px;
  border-radius: 24px;
  background: var(--mo-bg-soft);
}
.arch-label {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--mo-muted);
}
.arch-row {
  display: flex;
  justify-content: center;
  gap: 6px;
}
.arch-row.is-lower {
  margin: 10px 0;
}
.arch-row li {
  width: 34px;
  height: 46px;
  border-radius: 14px 14px 18px 18px;
  background: var(--mo-line-strong);
  transition: background-color 0.4s var(--mo-ease), transform 0.4s var(--mo-ease);
}
.arch-row.is-lower li {
  border-radius: 18px 18px 14px 14px;
}
.arch-row li.is-in { background: var(--mo-primary); }
.arch-row li.is-now { background: var(--mo-coral-bright); transform: scale(1.12); }
.arch-key {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  margin-top: 18px;
  font-size: 13px;
}
.arch-key li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.key-dot {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: var(--mo-line-strong);
}
.key-dot.is-in { background: var(--mo-primary); }
.key-dot.is-now { background: var(--mo-coral-bright); }
.tooth-list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 30px;
}
.tooth-list .tl-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--mo-line);
  font-size: 15px;
}
.tooth-list .tl-row b {
  font-weight: 700;
  color: var(--mo-heading);
}
.tooth-list .tl-row.is-now b {
  color: var(--mo-coral);
}
.tooth-foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
/*---- 17.8 Brush-Along Timer ----*/
.mo-brush {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
/* the toddler brushing takes the right half, at its own size, fading in from the copy's side */
.mo-brush .band-img {
  left: auto;
  right: 0;
  width: 56%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000000 40%);
  mask-image: linear-gradient(90deg, transparent 0%, #000000 40%);
}
.mo-brush .band-img img {
  object-position: center 30%;
}
.mo-brush .band-img::after {
  background: linear-gradient(90deg, rgba(20, 73, 138, 0.75) 0%, rgba(20, 112, 175, 0.4) 100%);
}
.brush-week {
  margin-top: 30px;
  padding: 24px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.07);
}
.week-title {
  display: block;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mo-sky);
}
.week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
.week-grid li {
  display: grid;
  justify-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--mo-on-night);
}
.week-grid li.is-today {
  color: var(--mo-sun);
}
.week-grid .star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.32);
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s var(--mo-ease), color 0.3s var(--mo-ease), transform 0.3s var(--mo-ease);
}
.week-grid .star:hover:not(:disabled) {
  background: rgba(255, 200, 61, 0.35);
  color: #FFFFFF;
  transform: scale(1.12);
}
.week-grid .star:disabled {
  cursor: default;
  opacity: 0.45;
}
.week-grid .star.is-on {
  background: var(--mo-sun);
  color: var(--mo-navy);
}
.week-grid .star.is-pop {
  animation: moStarPop 0.6s var(--mo-ease);
}
.week-total {
  display: block;
  margin-top: 14px;
  font-size: 14px;
}
/* the timer on glass over the photograph */
.brush-timer {
  display: grid;
  justify-items: center;
  gap: 24px;
  padding: 44px 40px 40px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 32px;
  background: rgba(14, 29, 68, 0.5);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
/* the dial: the ring fills in sun as the time runs, a glowing marker riding its edge */
.brush-dial {
  --deg: 0deg;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: conic-gradient(var(--mo-sun) var(--deg), rgba(255, 255, 255, 0.14) var(--deg));
}
.brush-dial::before {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background: var(--mo-night);
}
.dial-head {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  transform: rotate(var(--deg));
}
.dial-head::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  border-radius: 50%;
  background: var(--mo-sun);
  box-shadow: 0 0 0 5px rgba(255, 200, 61, 0.25), 0 0 18px rgba(255, 200, 61, 0.8);
  animation: moGlow 1.8s ease-in-out infinite;
}
/* the mouth: four true quarter wedges around a hub (the patient's right on the viewer's left,
   as a dentist sees it), a thin cross of night between them */
.brush-mouth {
  position: relative;
  z-index: 1;
  width: 312px;
  height: 312px;
  border-radius: 50%;
}
.brush-mouth .q {
  position: absolute;
  width: calc(50% - 3px);
  height: calc(50% - 3px);
  background: rgba(255, 255, 255, 0.07);
  color: var(--mo-on-night);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  transition: background-color 0.5s var(--mo-ease), color 0.5s var(--mo-ease);
}
.brush-mouth .q > span {
  position: absolute;
  width: 80px;
  transition: opacity 0.4s var(--mo-ease);
}
/* while a corner is brushed the toothbrush stands where its name was */
.brush-mouth .q.is-active > span {
  opacity: 0;
}
.brush-mouth .q.is-ur { left: 0; top: 0; border-radius: 100% 0 0 0; }
.brush-mouth .q.is-ul { right: 0; top: 0; border-radius: 0 100% 0 0; }
.brush-mouth .q.is-ll { right: 0; bottom: 0; border-radius: 0 0 100% 0; }
.brush-mouth .q.is-lr { left: 0; bottom: 0; border-radius: 0 0 0 100%; }
.brush-mouth .q.is-ur > span { right: 26px; bottom: 46px; }
.brush-mouth .q.is-ul > span { left: 26px; bottom: 46px; }
.brush-mouth .q.is-ll > span { left: 26px; top: 46px; }
.brush-mouth .q.is-lr > span { right: 26px; top: 46px; }
.brush-mouth .q.is-active {
  background: var(--mo-mint);
  color: var(--mo-navy);
  animation: moWedge 1.4s ease-in-out infinite;
}
.brush-mouth .q.is-done {
  background: rgba(95, 211, 181, 0.24);
  color: #FFFFFF;
}
/* a finished corner pops a star near its outer edge */
.brush-mouth .q.is-done::after {
  content: "\f005";
  position: absolute;
  font-family: "Font Awesome 6 Free";
  font-size: 20px;
  font-weight: 900;
  color: var(--mo-sun);
  animation: moStarPop 0.6s var(--mo-ease) both;
}
.brush-mouth .q.is-ur::after { left: 34px; top: 34px; }
.brush-mouth .q.is-ul::after { right: 34px; top: 34px; }
.brush-mouth .q.is-ll::after { right: 34px; bottom: 34px; }
.brush-mouth .q.is-lr::after { left: 34px; bottom: 34px; }
.dial-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 118px;
  height: 118px;
  margin: -59px 0 0 -59px;
  border-radius: 50%;
  background: var(--mo-night);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.08);
}
.brush-mascot {
  width: 76px;
  height: auto;
  animation: moBob 4s ease-in-out infinite;
}
.brush-timer.is-running .brush-mascot {
  animation: moWiggle 1s var(--mo-ease) infinite;
}
.brush-timer.is-finished .dial-hub {
  animation: moHubJoy 0.9s var(--mo-ease) 2;
}
/* the toothbrush moves to the corner being brushed and scrubs there */
.brush-stick {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  font-size: 38px;
  line-height: 1;
  color: #FFFFFF;
  opacity: 0;
  pointer-events: none;
  transition: left 0.6s var(--mo-ease), top 0.6s var(--mo-ease), opacity 0.4s var(--mo-ease);
}
.brush-mouth[data-active="0"] .brush-stick { left: 21%; top: 23%; opacity: 1; }
.brush-mouth[data-active="1"] .brush-stick { left: 66%; top: 23%; opacity: 1; }
.brush-mouth[data-active="2"] .brush-stick { left: 66%; top: 65%; opacity: 1; }
.brush-mouth[data-active="3"] .brush-stick { left: 21%; top: 65%; opacity: 1; }
.brush-mouth[data-active="0"] .brush-stick,
.brush-mouth[data-active="1"] .brush-stick,
.brush-mouth[data-active="2"] .brush-stick,
.brush-mouth[data-active="3"] .brush-stick {
  color: var(--mo-navy);
  animation: moScrub 0.32s ease-in-out infinite alternate;
}
@keyframes moScrub {
  from { transform: translateX(-7px) rotate(-24deg); }
  to { transform: translateX(7px) rotate(-12deg); }
}
@keyframes moWedge {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.14); }
}
@keyframes moGlow {
  0%, 100% { box-shadow: 0 0 0 5px rgba(255, 200, 61, 0.25), 0 0 14px rgba(255, 200, 61, 0.6); }
  50% { box-shadow: 0 0 0 9px rgba(255, 200, 61, 0.12), 0 0 26px rgba(255, 200, 61, 0.95); }
}
@keyframes moStarPop {
  0% { opacity: 0; transform: scale(0.2) rotate(-40deg); }
  60% { opacity: 1; transform: scale(1.35) rotate(10deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes moHubJoy {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.14) rotate(-6deg); }
  70% { transform: scale(0.96) rotate(4deg); }
}
.brush-readout {
  display: grid;
  justify-items: center;
}
.brush-time {
  font-family: var(--mo-ff-heading);
  font-size: 72px;
  font-weight: 600;
  line-height: 1;
  color: #FFFFFF;
}
.brush-now {
  font-weight: 700;
  color: var(--mo-sun);
}
.brush-controls {
  display: flex;
  gap: 12px;
}
@media (prefers-reduced-motion: reduce) {
  .dial-head::before,
  .brush-mascot,
  .brush-mouth .q.is-active,
  .brush-mouth[data-active] .brush-stick,
  .brush-timer.is-finished .dial-hub {
    animation: none;
  }
}
/*---- 17.9 Ages And Parents ----*/
.age-card {
  height: 100%;
  padding: 34px 30px;
  border-top: 6px solid var(--mo-sun);
}
.age-card.is-mint { border-top-color: var(--mo-mint); }
.age-card.is-bubble { border-top-color: var(--mo-bubble); }
.age-card.is-sky { border-top-color: var(--mo-sky); }
.age-card .mo-illus {
  height: 70px;
  margin-bottom: 20px;
}
.age-card h3 {
  margin-bottom: 20px;
  font-size: 24px;
}
/* the Google score on its own card above the reviews' rail; the one column is held to the
   available width, or the rail's track would stretch it */
.kids-reviews {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
.kids-reviews > * {
  min-width: 0;
}
.kids-score {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 28px 32px;
  border-radius: 28px;
}
.kids-score .score-copy {
  display: grid;
  gap: 6px;
}
.kids-score .mo-btn {
  margin-left: auto;
}
.score-g {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--mo-surface);
  box-shadow: 0 10px 26px rgba(20, 40, 92, 0.12);
  font-size: 30px;
}
.score-big {
  font-family: var(--mo-ff-heading);
  font-size: 76px;
  font-weight: 500;
  line-height: 0.95;
  color: var(--mo-heading);
}
.kids-score .mo-rating-stars {
  font-size: 22px;
}
.mo-photo-band .kids-score p {
  margin: 0;
  font-size: 15px;
  color: var(--mo-muted);
}
.mo-parents .faq-list {
  margin-top: 30px;
}
/*---- 17.10 Kids CTA ----*/
.mo-cta-kids {
  background: #FFE7A3;
  color: var(--mo-navy);
}
.mo-cta-kids h2,
.mo-cta-kids .mo-lead,
.mo-cta-kids .mo-eyebrow {
  color: var(--mo-navy);
}
.mo-cta-kids h2 em {
  color: var(--mo-coral);
}
.mo-cta-kids .mo-lead a {
  font-weight: 700;
  color: var(--mo-navy);
  text-decoration: underline;
}
html[data-theme="dark"] .mo-cta-kids {
  background: #3A3218;
}
html[data-theme="dark"] .mo-cta-kids h2,
html[data-theme="dark"] .mo-cta-kids .mo-lead,
html[data-theme="dark"] .mo-cta-kids .mo-lead a,
html[data-theme="dark"] .mo-cta-kids .mo-eyebrow {
  color: #FFF4D1;
}
html[data-theme="dark"] .mo-cta-kids h2 em {
  color: var(--mo-sun);
}




/*---- 17.11 Kids Hero Controls ----*/
/* the facts' tray rises over the frame's foot: the controls sit just above it, clear of the photo */
.mo-kids-hero .hero-controls-wrap {
  bottom: 132px;
}
.mo-kids-hero .hero-slide {
  padding-bottom: 220px;
}

/*======================
18. Service Pages
========================*/
/*---- 18.1 Service Cards ----*/
.svc-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  color: var(--mo-text);
}
.svc-card:hover {
  color: var(--mo-text);
}
.svc-photo {
  display: block;
  padding-top: 62%;
  border-radius: var(--mo-radius-card) var(--mo-radius-card) 0 0;
}
.svc-photo img {
  position: absolute;
  inset: 0;
}
.svc-body {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 12px;
  padding: 0 30px 30px;
}
.svc-body .mo-glyph {
  margin-top: -32px;
  border: 5px solid var(--mo-surface);
  background: var(--mo-sky-soft);
}
.svc-name {
  font-family: var(--mo-ff-heading);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--mo-heading);
}
.svc-lead {
  flex: 1 1 auto;
  font-size: 15px;
  line-height: 1.6;
}
/*---- 18.2 Overview ----*/
.svc-hero-photo {
  padding-top: 76%;
  border-radius: var(--mo-radius-lg);
}
.svc-hero-photo img {
  position: absolute;
  inset: 0;
}
.svc-rows {
  margin: 26px 0 30px;
  padding: 28px 30px;
}
.rows-title {
  margin-bottom: 18px;
  font-size: 22px;
}
/*---- 18.3 Steps ----*/
.step-card {
  position: relative;
  height: 100%;
  padding: 34px 30px;
  border-radius: var(--mo-radius-card);
  background: var(--mo-surface);
  box-shadow: var(--mo-shadow);
}
/* the next step's smile arc between cards */
.steps-row > div:not(:last-child) .step-card::after {
  content: "";
  position: absolute;
  right: -22px;
  top: 52px;
  width: 22px;
  height: 10px;
  border: 2.5px solid transparent;
  border-bottom-color: var(--mo-coral-bright);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--mo-coral);
  color: #FFFFFF;
  font-family: var(--mo-ff-heading);
  font-size: 20px;
  font-weight: 600;
}
.step-title {
  margin-bottom: 10px;
  font-size: 23px;
}
.step-card p {
  margin: 0;
  font-size: 16px;
}
/*---- 18.4 Tools ----*/
.tool-card {
  max-width: 1060px;
  margin: 0 auto;
  padding: 40px;
}
.tool-out {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  margin-top: 28px;
  padding-top: 26px;
  border-top: 1px solid var(--mo-line);
}
.tool-big {
  font-family: var(--mo-ff-heading);
  font-size: 34px;
  font-weight: 500;
  line-height: 1.15;
  color: var(--mo-heading);
}
.tool-note {
  flex: 1 1 260px;
  color: var(--mo-muted);
}
.tool-out .mo-btn {
  margin-left: auto;
}
.signs-grid,
.goals-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 24px;
}
.goals-grid {
  gap: 12px;
}
.goals-out {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 1 1 100%;
}
.goals-out a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 10px;
  background: var(--mo-tonal);
  color: var(--mo-accent-text);
  font-weight: 700;
}
.goals-out a:hover {
  background: var(--mo-primary);
  color: #FFFFFF;
}
.compare {
  max-width: 1060px;
  margin: 0 auto;
  overflow: hidden;
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
}
.compare-table th,
.compare-table td {
  padding: 18px 24px;
  border-bottom: 1px solid var(--mo-line);
  text-align: left;
  vertical-align: top;
}
.compare-table thead th {
  background: var(--mo-primary);
  color: #FFFFFF;
  font-family: var(--mo-ff-heading);
  font-size: 19px;
  font-weight: 500;
}
.compare-table tbody th {
  width: 22%;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mo-muted);
}
.compare-table td {
  color: var(--mo-heading);
}
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td {
  border-bottom: 0;
}
.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1160px;
  margin: 0 auto;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 11px;
  height: 2px;
  background: var(--mo-line-strong);
}
.timeline li {
  position: relative;
  padding-top: 40px;
}
.tl-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  border: 5px solid var(--mo-sky-soft);
  border-radius: 50%;
  background: var(--mo-coral);
}
.timeline b {
  display: block;
  margin-bottom: 8px;
  font-family: var(--mo-ff-heading);
  font-size: 22px;
  font-weight: 500;
  color: var(--mo-heading);
}
.timeline p {
  margin: 0;
  font-size: 16px;
}
.hotspot-stage {
  padding-top: 46%;
  border-radius: var(--mo-radius-lg);
}
.hotspot-stage img {
  position: absolute;
  inset: 0;
}
.hotspot {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border: 0;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--mo-navy);
  font-weight: 700;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: background-color 0.3s var(--mo-ease), color 0.3s var(--mo-ease), transform 0.3s var(--mo-ease);
}
.hotspot.is-crown { left: 50%; top: 22%; }
.hotspot.is-abutment { left: 50%; top: 48%; }
.hotspot.is-post { left: 50%; top: 70%; }
.hotspot[aria-pressed="true"],
.hotspot:hover {
  background: var(--mo-coral);
  color: #FFFFFF;
  transform: scale(1.1);
}
.spot-panel {
  padding: 34px;
}
.spot-info {
  display: none;
}
.spot-info.is-active {
  display: block;
}
.spot-info h3 {
  font-size: 28px;
}
.spot-info p {
  margin: 0;
}
.aid-card {
  height: 100%;
  padding: 34px 28px;
}
.aid-card .mo-glyph {
  margin-bottom: 20px;
  background: rgba(var(--mo-coral-rgb), 0.12);
  color: var(--mo-coral);
}
.aid-card h3 {
  font-size: 23px;
}
.aid-card p {
  margin: 0;
  font-size: 16px;
}
.ba.is-page {
  max-width: 1060px;
  margin: 0 auto;
}
/*---- 18.5 Request Band ----*/
/* the request band is a photo band (.mo-photo-band) */
.mo-svc-request > .container > .row > .col-lg-6:first-child .mo-eyebrow,
.mo-svc-request > .container > .row > .col-lg-6:first-child h2 {
  color: #FFFFFF;
}
.mo-svc-request > .container > .row > .col-lg-6:first-child h2 em {
  color: var(--mo-sky-soft);
}
html[data-theme="dark"] .mo-svc-request > .container > .row > .col-lg-6:first-child h2 em {
  color: #CFE4F7;
}
/* the card's own eyebrow is on white, not on the photo */
.mo-svc-request .request-card .mo-eyebrow {
  color: var(--mo-accent-text);
}
.mo-svc-request .faq-list {
  margin-top: 30px;
}
.request-card {
  padding: 40px;
}
.request-title {
  margin-bottom: 8px;
  font-size: 32px;
}
.request-status {
  margin-bottom: 26px;
  color: var(--mo-muted);
}
.request-status b {
  color: var(--mo-heading);
}

/*======================
19. Inner Pages
========================*/
/*---- 19.1 Google Card And Values ----*/
.google-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  height: 100%;
  padding: 34px;
  color: var(--mo-text);
}
.google-card:hover {
  color: var(--mo-text);
}
.google-card > i {
  font-size: 34px;
}
.google-num {
  font-family: var(--mo-ff-heading);
  font-size: 76px;
  font-weight: 500;
  line-height: 0.9;
  color: var(--mo-heading);
}
.google-label {
  max-width: 320px;
  font-size: 17px;
  font-weight: 700;
  color: var(--mo-heading);
}
.value-card {
  height: 100%;
  padding: 34px 30px;
}
.value-card .mo-glyph {
  margin-bottom: 20px;
}
.value-card h3 {
  font-size: 23px;
}
.value-card p {
  margin: 0;
  font-size: 16px;
}
/*---- 19.2 Story And Doctor ----*/
/* About's story, then and now: the storefront across the top, the street fair and Dr. Carter
   beneath, and the year he took over on the seam between them */
.story-mosaic {
  --story-top: 290px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  grid-template-rows: var(--story-top) 350px;
  gap: 18px;
}
.story-shot {
  display: block;
}
.story-shot img {
  position: absolute;
  inset: 0;
}
.story-shot.is-store {
  grid-column: 1 / -1;
}
.story-shot.is-owner img {
  object-position: center 18%;
}
.story-year {
  position: absolute;
  top: calc(var(--story-top) + 9px - 46px);
  left: calc(50% - 170px);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 340px;
  padding: 16px 22px;
  border: 6px solid var(--mo-bg);
  border-radius: var(--mo-radius-card);
  background: var(--mo-surface);
  box-shadow: var(--mo-shadow-lg);
  line-height: 1.3;
}
.story-year b {
  font-family: var(--mo-ff-heading);
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  color: var(--mo-primary);
}
.story-year span {
  font-size: 14px;
  font-weight: 600;
  color: var(--mo-heading);
}
.story-rows,
.bio-rows {
  margin: 26px 0 32px;
}
/* Dr. Carter, tall: the portrait on a tinted block set off to its lower right, the introduction
   video on it, the years and the degree floating at its edges */
.bio-visual {
  position: relative;
  max-width: 500px;
  margin: 0 auto 34px;
}
.bio-visual::before {
  content: "";
  position: absolute;
  top: 34px;
  right: -34px;
  bottom: -34px;
  left: 34px;
  border-radius: calc(var(--mo-radius-lg) + 6px);
  background: linear-gradient(135deg, rgba(var(--mo-primary-rgb), 0.16) 0%, rgba(var(--mo-coral-rgb), 0.14) 100%);
}
.bio-portrait {
  display: block;
  padding-top: 124%;
  border-radius: var(--mo-radius-lg);
  box-shadow: var(--mo-shadow-lg);
}
.bio-portrait img {
  position: absolute;
  inset: 0;
  object-position: center 16%;
}
.bio-visual .bio-play {
  position: absolute;
  top: 28px;
  left: 28px;
  z-index: 2;
}
.bio-cred {
  position: absolute;
  bottom: 40px;
  left: -34px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 24px 14px 14px;
  border-radius: 20px;
  background: var(--mo-surface);
  box-shadow: var(--mo-shadow-lg);
  line-height: 1.25;
}
.bio-cred-illus {
  width: auto;
  height: 54px;
}
.bio-cred b {
  display: block;
  font-family: var(--mo-ff-heading);
  font-size: 24px;
  font-weight: 600;
  color: var(--mo-heading);
}
.bio-cred small {
  font-size: 13px;
  color: var(--mo-muted);
}
.bio-badge {
  position: absolute;
  top: 46%;
  right: -34px;
  z-index: 2;
  display: grid;
  gap: 2px;
  padding: 18px 24px;
  border-radius: 18px;
  background: var(--mo-coral);
  color: #FFFFFF;
  line-height: 1.2;
  box-shadow: 0 18px 40px rgba(var(--mo-coral-rgb), 0.35);
}
.bio-badge b {
  font-family: var(--mo-ff-heading);
  font-size: 30px;
  font-weight: 600;
}
.bio-badge span {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
/* the career as a zigzag: milestone cards above and below a line that fills from 2009 to 2026
   as the section passes (js: First Visit Line), each year in large outline type */
.career-track {
  --ct-row: 250px;
  position: relative;
  margin-top: 20px;
}
.career-track .tl-line {
  position: absolute;
  top: calc(var(--ct-row) + 19px);
  left: 0;
  right: 0;
  height: 2px;
  background: var(--mo-line-night);
}
.career-track .tl-line i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--mo-coral-bright) 0%, var(--mo-sky) 100%);
  transform-origin: 0 50%;
}
.career {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
}
.career li {
  display: grid;
  grid-template-rows: var(--ct-row) 40px var(--ct-row);
}
.career .career-dot {
  grid-row: 2;
  align-self: center;
  width: 18px;
  height: 18px;
  margin-left: 26px;
  border-radius: 50%;
  background: var(--mo-coral-bright);
  box-shadow: 0 0 0 6px rgba(var(--mo-coral-rgb), 0.22);
}
.career li:nth-child(odd) .career-card,
.career li:nth-child(even) .yr {
  grid-row: 1;
  align-self: end;
  margin-bottom: 18px;
}
.career li:nth-child(odd) .yr,
.career li:nth-child(even) .career-card {
  grid-row: 3;
  align-self: start;
  margin-top: 18px;
}
.career .yr {
  font-family: var(--mo-ff-heading);
  font-size: 68px;
  font-weight: 600;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(234, 242, 251, 0.5);
}
.career li:nth-child(4) .yr {
  -webkit-text-stroke-color: var(--mo-coral-bright);
}
.career-card {
  padding: 24px 24px 26px;
  border: 1px solid var(--mo-line-night);
  border-radius: var(--mo-radius-card);
  background: rgba(255, 255, 255, 0.05);
  transition: transform 0.45s var(--mo-ease), background-color 0.45s var(--mo-ease);
}
.career-card:hover {
  background: rgba(255, 255, 255, 0.09);
  transform: translateY(-4px);
}
.career-disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: #FFFFFF;
}
.career-illus {
  width: auto;
  height: 36px;
}
.career b {
  display: block;
  margin-bottom: 6px;
  font-family: var(--mo-ff-heading);
  font-size: 21px;
  font-weight: 500;
  color: #FFFFFF;
}
.career p {
  margin: 0;
  font-size: 15px;
}
.video-card {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: var(--mo-radius-lg);
  background: var(--mo-night);
  text-align: left;
  cursor: pointer;
}
.video-card .vc-photo {
  display: block;
  padding-top: 58%;
}
.video-card .vc-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.75;
  transition: transform 0.8s var(--mo-ease), opacity 0.4s var(--mo-ease);
}
.video-card:hover .vc-photo img {
  transform: scale(1.05);
  opacity: 0.9;
}
.video-card .mo-play {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
}
.video-card .vc-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 30px;
  background: linear-gradient(0deg, rgba(14, 29, 68, 0.95) 0%, rgba(14, 29, 68, 0) 100%);
  color: #FFFFFF;
}
.video-card .vc-copy b {
  display: block;
  font-family: var(--mo-ff-heading);
  font-size: 24px;
  font-weight: 500;
}
.video-card .vc-copy small {
  color: rgba(234, 242, 251, 0.75);
}
.video-note {
  margin: 18px 0 0;
  font-size: 14px;
  color: var(--mo-muted);
}
/*---- 19.3 Team Cards ----*/
.team-card {
  height: 100%;
  text-align: center;
}
.team-photo {
  display: block;
  width: 100%;
  max-width: 240px;
  margin: 0 auto 22px;
  padding-top: min(100%, 240px);
  border: 8px solid var(--mo-sky-soft);
  transition: border-color 0.4s var(--mo-ease);
}
.team-photo img {
  position: absolute;
  inset: 0;
  transition: transform 0.8s var(--mo-ease);
}
.team-card:hover .team-photo {
  border-color: var(--mo-coral-bright);
}
.team-card:hover .team-photo img {
  transform: scale(1.06);
}
.team-name {
  margin-bottom: 6px;
  font-size: 24px;
}
.team-role {
  display: block;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mo-accent-text);
}
.team-card p {
  max-width: 260px;
  margin: 0 auto 14px;
  font-size: 15px;
}
/* the landing's team: each face on a white card over the sky band */
.team-card.is-boxed {
  padding: 34px 24px 30px;
  border-radius: var(--mo-radius-card);
  background: var(--mo-surface);
  box-shadow: 0 24px 50px rgba(20, 40, 92, 0.12);
  transition: transform 0.4s var(--mo-ease), box-shadow 0.4s var(--mo-ease);
}
.team-card.is-boxed:hover {
  transform: translateY(-6px);
  box-shadow: 0 32px 64px rgba(20, 40, 92, 0.18);
}
.team-card.is-boxed .team-photo {
  max-width: 200px;
  padding-top: min(100%, 200px);
}
.mo-band .team-card.is-boxed p {
  color: var(--mo-text);
}
.mo-band .team-card.is-boxed .team-name {
  color: var(--mo-heading);
}
/*---- 19.4 Filter Tabs ----*/
.mo-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 44px;
}
.mo-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 20px;
  border: 0;
  border-radius: 10px;
  background: var(--mo-tonal);
  color: var(--mo-accent-text);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.3s var(--mo-ease), color 0.3s var(--mo-ease);
}
.mo-tabs button b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: 13px;
  background: var(--mo-surface);
  font-size: 12px;
  color: var(--mo-heading);
}
.mo-tabs button:hover,
.mo-tabs button.is-active {
  background: var(--mo-primary);
  color: #FFFFFF;
}
.mo-tabs button.is-empty {
  opacity: 0.5;
}
.reviews-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 50px;
  padding: 30px 36px;
}

/*---- 19.5 Service Index ----*/
/* services.html: each group a white panel; its aside sticks while the treatments pass as rows */
.svc-panel {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 56px;
  padding: 44px;
  border-radius: var(--mo-radius-lg);
  background: var(--mo-surface);
  box-shadow: 0 30px 70px rgba(20, 40, 92, 0.1);
}
.svc-panel + .svc-panel {
  margin-top: 36px;
}
/* the panels stack: each sticks under the header and the next slides up over it, a step lower,
   so the four read as a deck instead of one long list */
.svc-panel {
  position: sticky;
  top: 118px;
  box-shadow: 0 -10px 40px rgba(20, 40, 92, 0.12), 0 30px 70px rgba(20, 40, 92, 0.1);
}
.svc-panel:nth-child(2) {
  top: 142px;
}
.svc-panel:nth-child(3) {
  top: 166px;
}
.svc-panel:nth-child(4) {
  top: 190px;
}
.svc-aside {
  align-self: start;
}
.svc-aside .mo-illus {
  height: 78px;
}
.svc-aside h2 {
  margin-bottom: 12px;
  font-size: clamp(28px, 2.2vw, 36px);
}
.svc-aside p {
  margin-bottom: 16px;
}
.svc-count {
  display: block;
  margin-bottom: 24px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mo-accent-text);
}
.svc-aside-photo {
  display: block;
  padding-top: 66%;
}
.svc-aside-photo img {
  position: absolute;
  inset: 0;
}
.svc-rows li + li {
  border-top: 1px solid var(--mo-line);
}
.svc-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 200px 48px;
  align-items: center;
  gap: 22px;
  margin: 0 -18px;
  padding: 24px 18px;
  border-radius: 16px;
  color: var(--mo-text);
  transition: background-color 0.35s var(--mo-ease);
}
.svc-row:hover {
  background: var(--mo-tonal);
  color: var(--mo-text);
}
.svc-row-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--mo-tonal);
  font-size: 28px;
  color: var(--mo-primary);
  transition: background-color 0.35s var(--mo-ease), color 0.35s var(--mo-ease);
}
.svc-row:hover .svc-row-ic {
  background: var(--mo-primary);
  color: #FFFFFF;
}
.svc-row-main b {
  display: block;
  margin-bottom: 4px;
  font-family: var(--mo-ff-heading);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--mo-heading);
}
.svc-row-main span {
  display: -webkit-box;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.55;
  color: var(--mo-muted);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.svc-row-fact {
  display: grid;
  gap: 3px;
  line-height: 1.35;
}
.svc-row-fact small {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mo-muted);
}
.svc-row-fact b {
  font-size: 15px;
  color: var(--mo-heading);
}
.svc-row-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--mo-surface);
  box-shadow: 0 6px 16px rgba(20, 40, 92, 0.1);
  font-size: 14px;
  color: var(--mo-heading);
  transition: background-color 0.35s var(--mo-ease), color 0.35s var(--mo-ease), transform 0.35s var(--mo-ease);
}
.svc-row:hover .svc-row-go {
  background: var(--mo-coral);
  color: #FFFFFF;
  transform: translateX(4px);
}
.emergency-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 46px 50px;
  border-radius: var(--mo-radius-lg);
}
.emergency-band h2 {
  margin: 0 0 8px;
  font-size: clamp(28px, 2.6vw, 40px);
}
.emergency-band p {
  margin: 0;
}
/*---- 19.6 Patients Pages ----*/
.bring-card {
  height: 100%;
  padding: 40px;
}
.bring-card h3 {
  font-size: 28px;
}
.how-card {
  height: 100%;
  padding: 34px 30px;
  text-align: center;
}
.how-card .mo-glyph {
  margin-bottom: 18px;
}
.how-card h3 {
  font-size: 23px;
}
.how-card p {
  margin: 0;
  font-size: 16px;
}
/*---- 19.7 Appointment ----*/
.appt-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 30px;
  align-items: start;
}
.appt-main {
  padding: 40px;
}
/* the steps as a stepper: numbered rounds on a line that fills (coral) to the step in hand;
   finished steps show a tick */
.appt-tabs {
  --prog: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 0 0 38px;
  padding: 0;
  list-style: none;
}
.appt-tabs::before,
.appt-tabs::after {
  content: "";
  position: absolute;
  left: 10%;
  top: 21px;
  height: 3px;
  border-radius: 3px;
}
.appt-tabs::before {
  right: 10%;
  background: var(--mo-line);
}
.appt-tabs::after {
  width: calc(80% * var(--prog));
  background: var(--mo-coral);
  transition: width 0.5s var(--mo-ease);
}
.appt-tabs li {
  position: relative;
  z-index: 1;
}
.appt-tabs button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mo-muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.3s var(--mo-ease);
}
.appt-tabs button span {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border: 3px solid var(--mo-line);
  border-radius: 50%;
  background: var(--mo-surface);
  color: var(--mo-heading);
  font-family: var(--mo-ff-heading);
  font-size: 17px;
  transition: background-color 0.35s var(--mo-ease), border-color 0.35s var(--mo-ease), box-shadow 0.35s var(--mo-ease), color 0.35s var(--mo-ease);
}
.appt-tabs button:hover span {
  border-color: rgba(var(--mo-primary-rgb), 0.45);
}
.appt-tabs button.is-active {
  color: var(--mo-heading);
}
.appt-tabs button.is-active span {
  border-color: var(--mo-primary);
  background: var(--mo-primary);
  color: #FFFFFF;
  box-shadow: 0 0 0 6px rgba(var(--mo-primary-rgb), 0.14);
}
.appt-tabs button.is-done span {
  border-color: var(--mo-coral);
  background: var(--mo-coral);
  color: transparent;
}
.appt-tabs button.is-done span::after {
  content: "\f00c";
  position: absolute;
  font-family: "Font Awesome 6 Free";
  font-size: 15px;
  font-weight: 900;
  color: #FFFFFF;
}
.appt-step h3 {
  font-size: 28px;
}
.appt-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.appt-fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.appt-fields .is-full {
  grid-column: 1 / -1;
}
/* the choice cards lead with the illustrated marks, which tip when chosen */
.appt-illus {
  flex: 0 0 auto;
  width: auto;
  height: 46px;
  transition: transform 0.4s var(--mo-ease);
}
.mo-choice input:checked + .choice-face .appt-illus {
  transform: rotate(-6deg) scale(1.06);
}
/* step three: a calendar of open days and the start times that fit the visit */
.appt-when {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}
.appt-pick-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--mo-heading);
}
.appt-pick-label i {
  color: var(--mo-primary);
}
.appt-days {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.appt-times {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-height: 352px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.day-tile,
.time-tile {
  border: 0;
  border-radius: 12px;
  background: var(--mo-field);
  color: var(--mo-heading);
  cursor: pointer;
  transition: background-color 0.3s var(--mo-ease), box-shadow 0.3s var(--mo-ease), transform 0.3s var(--mo-ease);
}
.day-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 4px;
  line-height: 1.15;
}
.time-tile {
  padding: 13px 6px;
  font-size: 14px;
  font-weight: 700;
}
.day-tile:hover,
.time-tile:hover {
  box-shadow: inset 0 0 0 1.5px rgba(var(--mo-primary-rgb), 0.45);
  transform: translateY(-2px);
}
.day-tile .day-wd {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mo-muted);
}
.day-tile .day-num {
  font-family: var(--mo-ff-heading);
  font-size: 22px;
  font-weight: 600;
}
.day-tile .day-mo {
  font-size: 12px;
  color: var(--mo-muted);
}
.day-tile.is-on,
.time-tile.is-on {
  background: var(--mo-primary);
  color: #FFFFFF;
  box-shadow: 0 10px 24px rgba(var(--mo-primary-rgb), 0.25);
}
.day-tile.is-on .day-wd,
.day-tile.is-on .day-mo {
  color: rgba(255, 255, 255, 0.82);
}
.appt-fields.is-source {
  display: none;
}
.appt-aside .mo-illus {
  display: block;
  height: 62px;
  margin-bottom: 14px;
}
.appt-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.appt-nav [data-appt-next],
.appt-nav [data-appt-submit] {
  margin-left: auto;
}
.appt-note {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--mo-muted);
}
.appt-aside {
  position: sticky;
  top: 110px;
  padding: 34px;
}
.appt-aside h3 {
  font-size: 24px;
}
.appt-aside .mo-rows b {
  max-width: 60%;
}
.appt-done {
  padding: 50px;
  text-align: center;
}
.appt-done:focus {
  outline: none;
}
.appt-done .done-illus {
  width: auto;
  height: 92px;
  margin-bottom: 18px;
}
.appt-done .done-ref {
  display: inline-block;
  margin: 6px 0 18px;
  padding: 8px 18px;
  border-radius: 10px;
  background: var(--mo-tonal);
  font-family: var(--mo-ff-heading);
  font-size: 22px;
  color: var(--mo-heading);
}
.appt-done .mo-actions {
  justify-content: center;
}
/*---- 19.8 FAQ Page ----*/
.faq-tools {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 40px;
}
.faq-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.faq-cats button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 18px;
  border: 0;
  border-radius: 10px;
  background: var(--mo-tonal);
  color: var(--mo-accent-text);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.faq-cats button b {
  font-size: 12px;
  opacity: 0.7;
}
.faq-cats button.is-active,
.faq-cats button:hover {
  background: var(--mo-primary);
  color: #FFFFFF;
}
.faq-empty {
  padding: 30px;
  text-align: center;
}
/*---- 19.9 Blog ----*/
.post-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.post-media {
  position: relative;
  display: block;
  padding-top: 60%;
  overflow: hidden;
  border-radius: var(--mo-radius-card) var(--mo-radius-card) 0 0;
}
.post-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--mo-ease);
}
.post-card:hover .post-media img {
  transform: scale(1.05);
}
.post-media .mo-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70px;
  height: 70px;
  transform: translate(-50%, -50%);
}
.post-type {
  position: absolute;
  left: 18px;
  top: 18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 20px;
  background: rgba(14, 29, 68, 0.7);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.post-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 12px;
  padding: 28px 30px 30px;
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  font-size: 14px;
  color: var(--mo-muted);
}
.post-meta img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}
.post-meta .by {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--mo-heading);
}
.post-title {
  margin: 0;
  font-size: 24px;
  line-height: 1.25;
}
.post-title a {
  color: var(--mo-heading);
}
.post-title a:hover {
  color: var(--mo-primary);
}
.post-body p {
  flex: 1 1 auto;
  margin: 0;
  font-size: 16px;
}
.post-card.is-quote {
  justify-content: center;
  padding: 40px 34px;
  background: var(--mo-primary);
  color: #FFFFFF;
}
.post-card.is-quote i {
  font-size: 40px;
  color: var(--mo-sky-soft);
}
.post-card.is-quote blockquote {
  margin: 18px 0;
  font-family: var(--mo-ff-heading);
  font-size: 26px;
  line-height: 1.35;
  color: #FFFFFF;
}
.post-card.is-quote a {
  color: #FFFFFF;
  font-weight: 700;
}
.post-card.is-quote .post-meta {
  color: rgba(255, 255, 255, 0.78);
}
.mo-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 56px;
}
.mo-pagination a,
.mo-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--mo-tonal);
  color: var(--mo-accent-text);
  font-weight: 700;
}
.mo-pagination .is-current,
.mo-pagination a:hover {
  background: var(--mo-primary);
  color: #FFFFFF;
}
.mo-sidebar {
  display: grid;
  gap: 26px;
}
.side-widget {
  padding: 30px;
}
.side-title {
  margin-bottom: 18px;
  font-size: 22px;
}
.side-search {
  position: relative;
}
.side-search input {
  padding-right: 56px !important;
}
.side-search button {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 8px;
  background: var(--mo-primary);
  color: #FFFFFF;
  cursor: pointer;
}
.side-cats a {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--mo-line);
  font-weight: 600;
  color: var(--mo-text);
}
.side-cats li:last-child a {
  border-bottom: 0;
}
.side-cats a.is-active,
.side-cats a:hover {
  color: var(--mo-primary);
}
.side-recent li {
  display: flex;
  align-items: center;
  gap: 14px;
}
.side-recent li + li {
  margin-top: 16px;
}
.side-recent img {
  width: 76px;
  height: 64px;
  flex: 0 0 auto;
  border-radius: 10px;
  object-fit: cover;
}
.side-recent a {
  font-family: var(--mo-ff-heading);
  font-size: 17px;
  line-height: 1.3;
  color: var(--mo-heading);
}
.side-recent small {
  display: block;
  color: var(--mo-muted);
}
.side-cta {
  padding: 34px 30px;
  text-align: center;
}
.side-cta h3 {
  font-size: 26px;
}
/*---- 19.10 Article ----*/
/* the journal post: a thin progress bar under the header, a sticky share rail beside the text,
   reading type (a drop cap, a pull quote), the visit list as label/value rows */
.read-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1100;
  height: 4px;
  pointer-events: none;
}
.read-progress i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--mo-coral-bright) 0%, var(--mo-primary) 100%);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.article-wrap {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 40px;
}
.share-rail {
  position: sticky;
  top: 130px;
  align-self: start;
  display: grid;
  justify-items: center;
  gap: 10px;
}
.share-label {
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mo-muted);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.share-rail .mo-round {
  width: 44px;
  height: 44px;
  font-size: 14px;
}
.share-rail .copy-note {
  font-size: 12px;
  text-align: center;
  color: var(--mo-muted);
}
.article-body {
  font-size: 18px;
  line-height: 1.85;
}
.article-body p {
  margin-bottom: 22px;
}
.article-lead {
  font-size: 22px;
  line-height: 1.7;
  color: var(--mo-heading);
}
.article-lead::first-letter {
  float: left;
  margin: 10px 14px 0 0;
  font-family: var(--mo-ff-heading);
  font-size: 92px;
  font-weight: 600;
  line-height: 0.78;
  color: var(--mo-primary);
}
.mo-content .pull-quote {
  margin: 44px 0;
  padding: 44px 48px 40px 112px;
  border-radius: var(--mo-radius-lg);
  background: var(--mo-navy);
}
.mo-content .pull-quote::before {
  left: 36px;
  top: 22px;
  font-size: 120px;
  color: var(--mo-coral-bright);
}
.mo-content .pull-quote p {
  font-size: clamp(26px, 2vw, 32px);
  color: #FFFFFF;
}
.pull-quote cite {
  display: block;
  margin-top: 16px;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mo-sky);
}
.mo-content .article-rows {
  margin: 18px 0 28px;
  padding: 6px 30px;
  border-radius: var(--mo-radius-card);
  background: var(--mo-sky-soft);
  list-style: none;
}
.article-rows li {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 20px;
  margin: 0;
  padding: 18px 0;
  border-bottom: 1px solid var(--mo-line);
}
.mo-content .article-rows li + li {
  margin-top: 0;
}
.article-rows li:last-child {
  border-bottom: 0;
}
.article-rows span {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mo-accent-text);
  line-height: 2;
}
.article-rows b {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--mo-heading);
}
/* the banner of a journal post: its own cover photograph and the byline under the lead */
.mo-subheader .band-img.is-cover img {
  object-position: center 40%;
}
.sub-byline {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.78);
}
.sub-face {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
}
.sub-byline b {
  display: block;
  font-size: 16px;
  color: #FFFFFF;
}
.sub-byline small {
  font-size: 14px;
}
.article-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 36px 0;
  padding: 20px 0;
  border-top: 1px solid var(--mo-line);
  border-bottom: 1px solid var(--mo-line);
}
.article-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  font-weight: 700;
  color: var(--mo-heading);
}
.article-tags a {
  color: var(--mo-accent-text);
  font-weight: 600;
}
.share-links {
  display: flex;
  align-items: center;
  gap: 8px;
}
.share-links .mo-round {
  width: 40px;
  height: 40px;
  font-size: 14px;
}
.author-box {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 36px;
}
.author-face {
  flex: 0 0 auto;
  width: 140px;
  height: 140px;
  box-shadow: 0 0 0 6px var(--mo-surface), 0 0 0 8px var(--mo-sky-soft);
}
.author-face img {
  object-position: center 18%;
}
.author-box .mo-eyebrow {
  margin-bottom: 6px;
}
.author-box h3 {
  margin-bottom: 6px;
  font-size: 28px;
}
.author-box p {
  margin-bottom: 18px;
}
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 40px 0;
}
.post-nav a {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px;
  border-radius: var(--mo-radius-card);
  background: var(--mo-bg-soft);
  color: var(--mo-heading);
  transition: background-color 0.35s var(--mo-ease), box-shadow 0.35s var(--mo-ease);
}
.post-nav a:hover {
  background: var(--mo-surface);
  box-shadow: var(--mo-shadow);
}
.post-nav a.is-next {
  justify-content: flex-end;
}
.pn-thumb {
  flex: 0 0 auto;
  width: 96px;
  height: 80px;
  overflow: hidden;
  border-radius: 12px;
}
.pn-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pn-copy {
  display: grid;
  gap: 6px;
}
.post-nav a small {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mo-accent-text);
}
.post-nav a b {
  font-family: var(--mo-ff-heading);
  font-size: 19px;
  font-weight: 500;
}
.post-nav a.is-next {
  text-align: right;
}
.comments h3 {
  font-size: 30px;
}
.comment {
  display: flex;
  gap: 18px;
  padding: 26px 0;
  border-bottom: 1px solid var(--mo-line);
}
.comment.is-reply {
  margin-left: 70px;
}
.comment .mo-initial {
  flex: 0 0 auto;
}
.comment b {
  color: var(--mo-heading);
}
.comment small {
  margin-left: 10px;
  color: var(--mo-muted);
}
.comment p {
  margin: 8px 0 8px;
  font-size: 16px;
}
.reply-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--mo-accent-text);
  font-weight: 700;
  cursor: pointer;
}
.respond {
  margin-top: 40px;
  padding: 40px;
}
.respond h3 {
  margin-bottom: 22px;
  font-size: 30px;
}
.respond .row {
  --bs-gutter-y: 18px;
}
/*---- 19.11 Contact And Accounts ----*/
/* the contact page as one card lifted over the banner's foot: the ways to reach us and the week's
   hours on navy, the message form on white */
.mo-contact-hub {
  position: relative;
  z-index: 2;
  margin-top: -32px;
  background: linear-gradient(180deg, transparent 32px, var(--mo-bg-soft) 32px);
}
.hub-card {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  overflow: hidden;
  border-radius: var(--mo-radius-lg);
  background: var(--mo-surface);
  box-shadow: var(--mo-shadow-lg);
}
.hub-side {
  position: relative;
  isolation: isolate;
  padding: 58px 52px 54px;
  overflow: hidden;
  background: var(--mo-navy);
  color: var(--mo-on-night);
}
/* a soft sky glow in the panel's top corner and a coral one at its foot */
.hub-side::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 100% 0%, rgba(var(--mo-sky-rgb), 0.28) 0%, rgba(var(--mo-sky-rgb), 0) 46%),
    radial-gradient(circle at 0% 100%, rgba(var(--mo-coral-rgb), 0.16) 0%, rgba(var(--mo-coral-rgb), 0) 40%);
}
.hub-side .mo-eyebrow {
  color: var(--mo-sky);
}
.hub-side .title {
  color: #FFFFFF;
}
.hub-side .title em {
  color: var(--mo-sky-soft);
}
html[data-theme="dark"] .hub-side .title em {
  color: var(--mo-sky);
}
.hub-ways {
  display: grid;
  margin: 26px 0 34px;
}
.hub-ways li {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--mo-line-night);
}
.hub-disc {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
}
.hub-illus {
  width: auto;
  height: 38px;
}
.hub-way {
  display: grid;
  gap: 3px;
  min-width: 0;
  line-height: 1.4;
}
.hub-way small {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.58);
}
.hub-way > b {
  overflow-wrap: anywhere;
  font-size: 18px;
  font-weight: 600;
  color: #FFFFFF;
}
.hub-way > b a {
  color: inherit;
}
.hub-way > b a:hover {
  color: var(--mo-sky);
}
.hub-way .mo-link {
  margin-top: 2px;
  color: var(--mo-sky);
}
.hub-way .mo-status {
  margin: 2px 0 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
}
.hub-way .mo-status b {
  color: #FFFFFF;
}
.hub-hours h3 {
  margin-bottom: 12px;
  font-size: 22px;
  color: #FFFFFF;
}
.hub-form {
  display: flex;
  flex-direction: column;
  padding: 58px 58px 54px;
}
.hub-form textarea {
  min-height: 190px;
}
.hub-form .row {
  margin-bottom: 34px;
}
/* the form's foot: booking a time has its own page */
.hub-book {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: auto;
  padding: 20px 22px;
  border-radius: var(--mo-radius-card);
  background: var(--mo-tonal);
  line-height: 1.4;
}
.hub-book-illus {
  flex: 0 0 auto;
  width: auto;
  height: 52px;
}
.hub-book b {
  display: block;
  font-family: var(--mo-ff-heading);
  font-size: 19px;
  color: var(--mo-heading);
}
.hub-book small {
  font-size: 14px;
  color: var(--mo-muted);
}
.hub-book .mo-btn {
  flex: 0 0 auto;
  margin-left: auto;
}
.hub-lead {
  margin: 0 0 28px;
  color: var(--mo-muted);
}
.hub-form .row {
  --bs-gutter-y: 18px;
}
/* the street map edge to edge, the practice's card floating over it */
.mo-contact-map {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 700px;
  padding: 100px 0;
  overflow: clip;
  background: var(--mo-sky-soft);
}
.mo-map.is-stage {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 0;
  box-shadow: none;
}
/* the embed's own place box sits in its top-left corner: the map rides 150px higher so that box
   stays out of view behind the section's edge (Google's credits at the foot stay visible) */
.mo-map.is-stage iframe {
  position: absolute;
  top: -150px;
  left: 0;
  height: calc(100% + 150px);
}
.map-card {
  max-width: 560px;
  overflow: hidden;
  border-radius: var(--mo-radius-lg);
  background: var(--mo-surface);
  box-shadow: var(--mo-shadow-lg);
}
.map-card-photo {
  display: block;
  height: 210px;
  border-radius: 0;
}
.map-card-body {
  padding: 34px 38px 38px;
}
.map-card .title {
  font-size: clamp(30px, 2.4vw, 42px);
}
.map-card p {
  margin: 0 0 10px;
}
.map-card .mo-status {
  margin-bottom: 24px;
}

.account-wrap {
  max-width: 560px;
  margin: 0 auto;
}
.account-card {
  padding: 44px;
}
.account-card .mo-field + .mo-field {
  margin-top: 18px;
}
.pass-wrap {
  position: relative;
}
.pass-wrap input {
  padding-right: 56px !important;
}
.password-toggle {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--mo-muted);
  cursor: pointer;
}
.account-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 20px 0 26px;
  font-size: 15px;
}
.account-row a,
.account-foot a {
  font-weight: 700;
  color: var(--mo-accent-text);
}
.account-foot {
  margin: 24px 0 0;
  text-align: center;
}
.strength {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--mo-muted);
}
.strength .bars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  width: 140px;
}
.strength .bars i {
  height: 5px;
  border-radius: 3px;
  background: var(--mo-line);
}
.strength[data-level="1"] .bars i:nth-child(-n+1),
.strength[data-level="2"] .bars i:nth-child(-n+2),
.strength[data-level="3"] .bars i:nth-child(-n+3),
.strength[data-level="4"] .bars i:nth-child(-n+4) {
  background: var(--mo-primary);
}
.match-note {
  display: block;
  margin-top: 8px;
  font-size: 13px;
}
.match-note.is-ok { color: var(--mo-ok); }
.match-note.is-bad { color: var(--mo-coral); }
/*---- 19.12 Minimal Pages ----*/
.mo-minimal {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding: 80px 0;
  overflow: hidden;
  background: var(--mo-sky-soft);
  text-align: center;
}
.mo-minimal .mo-gl {
  z-index: -1;
}
.minimal-logo img {
  width: 260px;
  height: auto;
  margin: 0 auto 40px;
}
.minimal-logo .logo-light {
  display: none;
}
html[data-theme="dark"] .minimal-logo .logo-dark {
  display: none;
}
html[data-theme="dark"] .minimal-logo .logo-light {
  display: block;
}
.minimal-title {
  margin: 0 auto 18px;
  max-width: 820px;
}
.minimal-lead {
  max-width: 560px;
  margin: 0 auto 36px;
  font-size: 19px;
}
.countdown {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 0 0 40px;
}
.countdown li {
  display: grid;
  gap: 4px;
  min-width: 112px;
  padding: 22px 12px;
  border-radius: 20px;
  background: var(--mo-surface);
  box-shadow: var(--mo-shadow);
}
.countdown b {
  font-family: var(--mo-ff-heading);
  font-size: 46px;
  font-weight: 600;
  line-height: 1;
  color: var(--mo-heading);
}
.countdown span {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mo-muted);
}
.notify-form {
  display: flex;
  gap: 10px;
  max-width: 520px;
  margin: 0 auto;
}
.notify-form .mo-field {
  flex: 1 1 auto;
  text-align: left;
}
.err-num {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  font-family: var(--mo-ff-heading);
  font-size: clamp(120px, 18vw, 220px);
  font-weight: 600;
  line-height: 0.9;
  color: var(--mo-heading);
}
.err-num img {
  width: clamp(110px, 15vw, 190px);
  height: auto;
  animation: moBob 4s ease-in-out infinite;
}
html[data-theme="dark"] .err-num img {
  filter: invert(1);
}
.mo-minimal .mo-actions {
  justify-content: center;
}



/*---- 19.13 Office Tour ----*/
.tour-slide {
  position: relative;
  margin: 0;
  padding-top: 70%;
}
.tour-slide img {
  position: absolute;
  inset: 0;
}
.tour-slide figcaption {
  position: absolute;
  left: 18px;
  bottom: 18px;
  padding: 8px 16px;
  border-radius: 30px;
  background: rgba(14, 29, 68, 0.72);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
}
/*---- 19.14 Night Cards ----*/
/* a card on the night ground keeps the night (the card face would turn its white words invisible) */
.mo-card.mo-night {
  background: var(--mo-night);
}
.side-cta p {
  justify-content: center;
  margin: 0 0 20px;
}
.side-cta .mo-status b {
  color: #FFFFFF;
}

/*======================
20. Why Choose Us
========================*/
/*---- 20.1 Light Heroes ----*/
/* the two extra landings open on light grounds: navy type, coral accents, white controls
   under the copy (the right of the frame belongs to the photograph or the booking card) */
.mo-hero.is-light {
  background: var(--mo-bg);
}
.mo-hero.is-light .hero-title {
  color: var(--mo-heading);
}
.mo-hero.is-light .hero-title em {
  color: var(--mo-coral);
}
html[data-theme="dark"] .mo-hero.is-light .hero-title em {
  color: var(--mo-coral-bright);
}
.mo-hero.is-light .hero-lead {
  color: var(--mo-text);
}
.mo-hero.is-light .hero-kicker {
  color: var(--mo-accent-text);
}
.mo-hero.is-light .hero-controls-wrap {
  bottom: 72px;
}
.mo-hero.is-light .hero-controls {
  justify-content: flex-start;
}
.mo-hero.is-light .hero-controls .mo-round {
  background: var(--mo-surface);
  color: var(--mo-heading);
  box-shadow: var(--mo-shadow);
}
.mo-hero.is-light .hero-controls .mo-round:hover {
  background: var(--mo-coral);
  color: #FFFFFF;
}
.mo-hero.is-light .hero-count {
  color: var(--mo-muted);
}
.mo-hero.is-light .hero-count b {
  color: var(--mo-heading);
}
.mo-hero.is-light .hero-progress {
  border-bottom-color: rgba(var(--mo-heading-rgb), 0.15);
}
/*---- 20.2 Why Hero ----*/
/* a calm drifting mesh (light aurora) behind copy on the left and each slide's photograph
   in a tall arch on the right, a coral outline arch offset behind it and a peach sun */
.mo-why-hero .hero-frame {
  background: var(--mo-sky-soft);
}
.mo-why-hero .mo-gl {
  z-index: 0;
}
.mo-why-hero .hero-slide {
  min-height: 820px;
  padding: 70px 0 150px;
}
.wy-visual {
  position: relative;
  isolation: isolate;
  width: 500px;
  max-width: 100%;
}
/* a patch of dots behind the frame's top corner */
.wy-visual::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -44px;
  z-index: -1;
  width: 200px;
  height: 200px;
  background-image: radial-gradient(rgba(var(--mo-primary-rgb), 0.35) 2px, transparent 2.6px);
  background-size: 20px 20px;
}
/* the page's frame: a soft rectangle with a round bite out of one corner where a seal sits,
   an even ring of ground around it (the mask cuts the bite; the shadow follows the cut shape) */
.wy-frame {
  --notch-at: 30px calc(100% - 30px);
  --notch-r: 96px;
  position: relative;
  display: block;
  filter: drop-shadow(0 34px 50px rgba(20, 40, 92, 0.2));
}
.wy-photo {
  position: relative;
  display: block;
  padding-top: 118%;
  overflow: hidden;
  border-radius: 34px;
  background: var(--mo-surface);
  -webkit-mask-image: radial-gradient(circle at var(--notch-at), transparent var(--notch-r), #000000 calc(var(--notch-r) + 1px));
  mask-image: radial-gradient(circle at var(--notch-at), transparent var(--notch-r), #000000 calc(var(--notch-r) + 1px));
}
.wy-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
  transform: scale(1.06);
  transition: transform 7.5s linear;
}
.swiper-slide-active .wy-photo img {
  transform: scale(1);
}
.wy-frame.is-portrait img {
  object-position: center 18%;
}
.wy-frame.is-room img {
  object-position: 32% center;
}
.wy-seal {
  position: absolute;
  left: -50px;
  bottom: -50px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 160px;
  height: 160px;
  padding: 18px;
  border-radius: 50%;
  background: var(--mo-coral);
  color: #FFFFFF;
  text-align: center;
  line-height: 1.15;
  box-shadow: 0 20px 44px rgba(var(--mo-coral-rgb), 0.3);
}
.wy-seal b {
  font-family: var(--mo-ff-heading);
  font-size: 46px;
  font-weight: 600;
  line-height: 1;
}
.wy-seal span {
  max-width: 104px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.wy-seal.is-light {
  background: var(--mo-surface);
  color: var(--mo-heading);
  box-shadow: var(--mo-shadow-lg);
}
.wy-seal.is-light b {
  color: var(--mo-coral);
}
.seal-illus {
  width: auto;
  height: 50px;
  margin-bottom: 4px;
}
/* slide two: the introduction video on a chip at the frame's other foot */
.wy-visual .doctor-chip {
  left: auto;
  right: -40px;
  bottom: 48px;
}
.wy-visual .doctor-play {
  position: relative;
  width: 48px;
  height: 48px;
  font-size: 15px;
}
/*---- 20.3 Ribbons ----*/
/* one level tape right under the hero, edge to edge: the reasons on navy, the same words on
   peach below running the other way; both loop without a seam (each set is in twice) */
.wy-ribbons {
  position: relative;
  z-index: 2;
  padding: 54px 0 0;
  overflow: clip;
}
/* under an About section the tape closes it and sits flush on the section that follows */
.wy-ribbons.is-under-about {
  padding: 0;
}
/* the kids' tape: Fredoka words, a sun band, the sparkles in the kids' colours; the band under
   it drops its top scallops so the two meet on one straight line */
.wy-ribbons.is-kids .rb-set li {
  font-family: var(--mo-ff-kids);
  font-weight: 600;
}
.wy-ribbons.is-kids .wy-ribbon.is-peach {
  background: #FFE7A3;
}
.wy-ribbons.is-kids .wy-ribbon.is-peach .rb-set li {
  font-style: normal;
  color: var(--mo-navy);
}
html[data-theme="dark"] .wy-ribbons.is-kids .wy-ribbon.is-peach {
  background: #3A3218;
}
html[data-theme="dark"] .wy-ribbons.is-kids .wy-ribbon.is-peach .rb-set li {
  color: #FFE7A3;
}
.wy-ribbons.is-kids .rb-set li:nth-child(4n+1) > i {
  color: #F2592A;
}
.wy-ribbons.is-kids .rb-set li:nth-child(4n+2) > i {
  color: #F0A500;
}
.wy-ribbons.is-kids .rb-set li:nth-child(4n+3) > i {
  color: #19A884;
}
.wy-ribbons.is-kids .rb-set li:nth-child(4n) > i {
  color: #E8578A;
}
.wy-ribbons.is-kids + .has-scallops::before {
  display: none;
}
.wy-tape {
  position: relative;
  box-shadow: 0 22px 44px rgba(20, 40, 92, 0.14);
}
.wy-ribbon {
  overflow: hidden;
}
.wy-ribbon.is-navy {
  padding: 16px 0;
  background: var(--mo-navy);
}
.wy-ribbon.is-peach {
  padding: 13px 0;
  background: #FCE1D6;
}
html[data-theme="dark"] .wy-ribbon.is-navy {
  background: #1B3B7A;
}
html[data-theme="dark"] .wy-ribbon.is-peach {
  background: #3A2A2C;
}
.rb-track {
  display: flex;
  width: max-content;
  animation: moMarquee 48s linear infinite;
}
.wy-ribbon.is-peach .rb-track {
  animation-duration: 64s;
  animation-direction: reverse;
}
.rb-set {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}
.rb-set li {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-left: 34px;
  font-family: var(--mo-ff-heading);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  color: #FFFFFF;
}
.rb-set li > i {
  margin-left: 16px;
  font-size: 18px;
  color: var(--mo-coral-bright);
}
.wy-ribbon.is-peach .rb-set li {
  font-size: 22px;
  font-style: italic;
  color: var(--mo-coral);
}
html[data-theme="dark"] .wy-ribbon.is-peach .rb-set li {
  color: #F3B9A3;
}
.wy-ribbon.is-peach .rb-set li > i {
  color: rgba(var(--mo-coral-rgb), 0.55);
}
.rb-disc {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #FFFFFF;
}
.rb-illus {
  width: auto;
  height: 38px;
}
@keyframes moMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .rb-track,
  .pm-track {
    animation: none;
  }
}
/*---- 20.4 Reasons Bento ----*/
/* seven reasons on tiles of different sizes and grounds: Dr. Carter the largest, then
   insurance, the offer, kids, nerves, the rating and emergencies */
.wy-bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(280px, auto);
  gap: 24px;
}
.bento-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 36px;
  overflow: hidden;
  border-radius: 28px;
  background: var(--mo-surface);
  box-shadow: var(--mo-shadow);
  transition: transform 0.45s var(--mo-ease), box-shadow 0.45s var(--mo-ease);
}
.bento-tile:hover {
  transform: translateY(-6px);
  box-shadow: var(--mo-shadow-lg);
}
.bento-tile h3 {
  margin-bottom: 10px;
  font-size: 24px;
  line-height: 1.25;
}
.bento-tile p {
  margin-bottom: 18px;
  font-size: 16px;
  line-height: 1.6;
}
.bento-tile > .mo-link,
.bento-text > .mo-link {
  margin-top: auto;
}
.bento-tile .mo-illus {
  height: 72px;
  margin-bottom: 22px;
}
.bento-tile:hover .mo-illus {
  transform: translateY(-4px) rotate(-4deg);
}
.bento-tile.is-doctor {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  justify-content: flex-end;
  min-height: 620px;
  padding: 46px;
  background: var(--mo-night);
}
.bento-photo {
  position: absolute;
  inset: 0;
}
.bento-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 24%;
  transition: transform 0.9s var(--mo-ease);
}
.bento-tile.is-doctor:hover .bento-photo img {
  transform: scale(1.05);
}
.bento-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(14, 29, 68, 0.96) 0%, rgba(14, 29, 68, 0.72) 40%, rgba(14, 29, 68, 0) 72%);
}
.bento-copy {
  position: relative;
  z-index: 1;
  max-width: 540px;
}
.bento-big {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 14px;
  font-family: var(--mo-ff-heading);
  font-size: 96px;
  font-weight: 500;
  line-height: 0.9;
  color: #FFFFFF;
}
.bento-big small {
  font-family: var(--mo-ff-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mo-sky);
}
.bento-tile.is-doctor h3 {
  font-size: clamp(28px, 2.2vw, 36px);
  color: #FFFFFF;
}
.bento-tile.is-doctor p {
  font-size: 17px;
  color: rgba(234, 242, 251, 0.84);
}
.bento-actions {
  display: flex;
  align-items: center;
  gap: 22px;
}
.bento-tile .bento-play {
  width: 60px;
  height: 60px;
  font-size: 17px;
}
.bento-tile.is-doctor .mo-link {
  color: #FFFFFF;
}
/* insurance: the words on the left, four insurers' logos on white tiles to the right */
.bento-tile.is-insurance {
  grid-column: 3 / 5;
  flex-direction: row;
  align-items: center;
  gap: 30px;
  background: var(--mo-sky-soft);
}
.bento-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}
.bento-logos {
  display: grid;
  flex: 0 0 44%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.bento-logos li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 86px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 10px 24px rgba(20, 40, 92, 0.06);
}
.bento-logos img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 40px;
}
/* the offer on the ticket's peach */
.bento-tile.is-special {
  grid-column: 3;
  grid-row: 2;
  background: linear-gradient(150deg, #FFF3EE 0%, #FCE1D6 100%);
}
.bento-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--mo-ff-heading);
  font-size: 64px;
  font-weight: 600;
  line-height: 1;
  color: var(--mo-coral);
}
.bento-price small {
  font-family: var(--mo-ff-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mo-navy);
}
/* the logo's smile under the price */
.bento-arc {
  display: block;
  width: 118px;
  height: 18px;
  margin: 4px 0 20px;
  border: 3px solid transparent;
  border-bottom-color: var(--mo-coral-bright);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.bento-tile.is-kids {
  grid-column: 4;
  grid-row: 2;
  background: #FFF1C4;
}
.bento-tile.is-calm {
  grid-column: 1;
  grid-row: 3;
  background: #D8F4EC;
}
.bento-tile.is-rating {
  grid-column: 2;
  grid-row: 3;
}
.bento-tile.is-rating .rating-g {
  position: absolute;
  top: 32px;
  right: 34px;
  font-size: 30px;
}
.bento-score {
  margin-bottom: 12px;
  font-family: var(--mo-ff-heading);
  font-size: 92px;
  font-weight: 500;
  line-height: 0.95;
  color: var(--mo-heading);
}
.bento-tile.is-rating .mo-rating-stars {
  margin-bottom: 10px;
  font-size: 20px;
}
/* emergencies on night navy: a white disc, the words, the phone */
.bento-tile.is-urgent {
  grid-column: 3 / 5;
  grid-row: 3;
  flex-direction: row;
  align-items: center;
  gap: 26px;
  background: var(--mo-night);
}
.bento-tile.is-urgent h3 {
  color: #FFFFFF;
}
.bento-tile.is-urgent p {
  margin: 0;
  color: rgba(234, 242, 251, 0.8);
}
.bento-tile.is-urgent .bento-text {
  justify-content: center;
}
.bento-tile.is-urgent .mo-btn {
  flex: 0 0 auto;
}
.bento-disc {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: #FFFFFF;
}
.bento-disc-illus {
  width: auto;
  height: 60px;
}
html[data-theme="dark"] .bento-tile.is-special {
  background: linear-gradient(150deg, #2A2230 0%, #3A2A2C 100%);
}
html[data-theme="dark"] .bento-price small {
  color: #F3E4DE;
}
html[data-theme="dark"] .bento-tile.is-kids {
  background: #3A3218;
}
html[data-theme="dark"] .bento-tile.is-calm {
  background: #12362F;
}
html[data-theme="dark"] .bento-tile.is-urgent {
  background: #050C1F;
}
/*---- 20.5 Service Panels ----*/
/* the four groups side by side as tall photographs: the open one is wide with its treatments,
   the rest are narrow spines (a disc, the name on its side, the count) */
.xp-panels {
  display: flex;
  gap: 16px;
  height: 620px;
}
.xp-panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border-radius: 28px;
  background: var(--mo-night-2);
  transition: flex-grow 0.8s var(--mo-ease);
}
.xp-panel.is-active {
  flex-grow: 3.6;
}
.xp-bg {
  position: absolute;
  inset: 0;
}
.xp-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.7);
  transform: scale(1.08);
  transition: transform 1.2s var(--mo-ease), filter 0.8s var(--mo-ease);
}
.xp-panel.is-active .xp-bg img {
  filter: none;
  transform: scale(1);
}
.xp-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(14, 29, 68, 0.96) 0%, rgba(14, 29, 68, 0.74) 44%, rgba(14, 29, 68, 0.3) 100%);
}
.xp-head {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 30px 0 34px;
  border: 0;
  background: transparent;
  color: #FFFFFF;
  cursor: pointer;
  transition: opacity 0.4s var(--mo-ease);
}
.xp-panel.is-active .xp-head {
  opacity: 0;
  pointer-events: none;
}
.xp-disc {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
}
.xp-illus {
  width: auto;
  height: 46px;
}
.xp-label {
  font-family: var(--mo-ff-heading);
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.xp-count {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mo-sky);
}
/* the open panel's body keeps one width, so its words never reflow while the panel grows */
.xp-body {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 640px;
  padding: 44px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(24px);
  transition: opacity 0.4s var(--mo-ease), transform 0.5s var(--mo-ease), visibility 0s linear 0.5s;
}
.xp-panel.is-active .xp-body {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.6s var(--mo-ease) 0.3s, transform 0.7s var(--mo-ease) 0.3s, visibility 0s;
}
.xp-body .xp-disc {
  margin-bottom: 18px;
}
.xp-body .xp-count {
  display: block;
  margin-bottom: 6px;
}
.xp-body h3 {
  margin-bottom: 10px;
  font-size: clamp(28px, 2.2vw, 40px);
  color: #FFFFFF;
}
.xp-body p {
  max-width: 540px;
  margin-bottom: 24px;
  color: rgba(234, 242, 251, 0.84);
}
.xp-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
}
.xp-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
  transition: background-color 0.35s var(--mo-ease), color 0.35s var(--mo-ease);
}
.xp-links a i {
  font-size: 12px;
  color: var(--mo-coral-bright);
  transition: transform 0.35s var(--mo-ease);
}
.xp-links a:hover {
  background: #FFFFFF;
  color: var(--mo-navy);
}
.xp-links a:hover i {
  transform: translateX(4px);
}
.wy-services .mo-actions {
  margin-top: 50px;
}
/*---- 20.6 Visit Story ----*/
/* the arch stays beside the steps (CSS sticky, nothing pinned) and shows each step's
   photograph as that step reaches the middle of the window */
.wy-story .story-visual {
  position: sticky;
  top: 130px;
  max-width: 520px;
}
/* the same bitten frame, the bite at the right foot holding the step count */
.story-frame {
  --notch-at: calc(100% - 30px) calc(100% - 30px);
  --notch-r: 92px;
}
.wy-story .story-photo img {
  object-position: center 22%;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 0.8s var(--mo-ease), transform 1.4s var(--mo-ease);
}
.wy-story .story-photo img.is-active {
  opacity: 1;
  transform: scale(1);
}
.story-count {
  position: absolute;
  right: -46px;
  bottom: -46px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 152px;
  height: 152px;
  border-radius: 50%;
  background: var(--mo-coral);
  color: #FFFFFF;
  font-family: var(--mo-ff-heading);
  line-height: 1;
  box-shadow: 0 20px 44px rgba(var(--mo-coral-rgb), 0.3);
}
.story-count b {
  font-size: 50px;
  font-weight: 600;
}
.story-count span {
  margin-top: 6px;
  font-family: var(--mo-ff-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
}
.wy-story .mo-actions {
  margin-top: 24px;
}
.story-steps-wrap {
  position: relative;
}
.story-line {
  position: absolute;
  left: 35px;
  top: 36px;
  bottom: 60px;
  width: 2px;
  background: var(--mo-line);
}
.story-line i {
  position: absolute;
  inset: 0;
  background: var(--mo-coral-bright);
  transform: scaleY(0);
  transform-origin: 50% 0;
}
.story-steps-wrap.is-static .story-line i {
  transform: none;
}
.story-step {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 30px;
  padding: 0 0 96px;
  opacity: 0.35;
  transition: opacity 0.5s var(--mo-ease);
}
.story-step:last-child {
  padding-bottom: 40px;
}
.story-step.is-active,
.story-steps-wrap.is-static .story-step {
  opacity: 1;
}
.step-num {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border: 2px solid var(--mo-line-strong);
  border-radius: 50%;
  background: var(--mo-bg);
  font-family: var(--mo-ff-heading);
  font-size: 24px;
  font-weight: 600;
  color: var(--mo-heading);
  transition: background-color 0.4s var(--mo-ease), border-color 0.4s var(--mo-ease), color 0.4s var(--mo-ease);
}
.story-step.is-active .step-num {
  border-color: var(--mo-coral);
  background: var(--mo-coral);
  color: #FFFFFF;
}
.step-body .mo-illus.is-sm {
  height: 58px;
  margin-bottom: 14px;
}
.step-body h3 {
  margin-bottom: 12px;
  font-size: clamp(26px, 2vw, 34px);
}
.step-body p {
  max-width: 540px;
  margin: 0;
  font-size: 18px;
}
.story-step-photo {
  display: none;
}
/*---- 20.7 Doctor Band ----*/
/* four figures on glass tiles, then his portrait in the page's bitten frame: the video plays
   from the bite, his name sits on a plate over the top corner */
.wy-doc-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: 620px;
  margin-top: 34px;
}
.wy-doc-stats li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 26px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background-color 0.4s var(--mo-ease), transform 0.4s var(--mo-ease);
}
.wy-doc-stats li:hover {
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-4px);
}
.wy-doc-stats b {
  font-family: var(--mo-ff-heading);
  font-size: 46px;
  font-weight: 500;
  line-height: 1;
  color: #FFFFFF;
}
.wy-doc-stats span {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(234, 242, 251, 0.78);
}
.wy-doctor .mo-actions {
  margin-top: 40px;
}
.wy-doc-visual {
  position: relative;
  width: 470px;
  max-width: 100%;
  margin: 0 40px 0 auto;
}
.wy-doc-frame {
  --notch-r: 72px;
  filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.35));
}
.wy-doc-frame .wy-photo {
  padding-top: 112%;
}
.wy-doc-frame .wy-photo img {
  object-position: center 16%;
  transform: none;
  transition: none;
}
.wy-doc-visual .wy-doc-play {
  position: absolute;
  left: -18px;
  bottom: -18px;
  z-index: 2;
  width: 96px;
  height: 96px;
}
.wy-doc-name {
  position: absolute;
  right: -44px;
  bottom: 84px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 24px 14px 14px;
  border-radius: 20px;
  background: var(--mo-surface);
  box-shadow: var(--mo-shadow-lg);
  line-height: 1.3;
}
.doc-name-illus {
  width: auto;
  height: 50px;
}
.wy-doc-name b {
  display: block;
  font-family: var(--mo-ff-heading);
  font-size: 19px;
  font-weight: 600;
  color: var(--mo-heading);
}
.wy-doc-name small {
  font-size: 14px;
  color: var(--mo-muted);
}
/*---- 20.8 Plans Marquee ----*/
/* the accepted plans drift past on white tiles (white in the dark theme too: the logos are
   drawn for white), fading out at both edges; a pointer over them stops the drift */
.pm-marquee {
  overflow: hidden;
  padding: 10px 0 34px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000000 8%, #000000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000000 8%, #000000 92%, transparent 100%);
}
.pm-track {
  display: flex;
  width: max-content;
  animation: moMarquee 52s linear infinite;
}
.pm-marquee:hover .pm-track {
  animation-play-state: paused;
}
.pm-marquee.is-js {
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.pm-marquee.is-js .pm-track {
  animation: none;
  will-change: transform;
}
.pm-marquee.is-held {
  cursor: grabbing;
}
.pm-set {
  display: flex;
  flex: 0 0 auto;
}
.pm-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 270px;
  height: 170px;
  margin-right: 22px;
  padding: 22px;
  border-radius: 22px;
  background: #FFFFFF;
  box-shadow: var(--mo-shadow);
  text-align: center;
}
.pm-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
}
.pm-logo img {
  width: auto;
  max-width: 200px;
  height: auto;
  max-height: 56px;
}
.pm-name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  color: #5E6A85;
}
.wy-plans .mo-actions {
  margin-top: 26px;
}
/*---- 20.9 Score And Reviews ----*/
.wy-score {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 30px 0 34px;
}
.score-num {
  font-family: var(--mo-ff-heading);
  font-size: 120px;
  font-weight: 500;
  line-height: 0.85;
  color: var(--mo-heading);
}
.score-copy {
  display: grid;
  gap: 8px;
}
.score-copy .mo-rating-stars {
  font-size: 22px;
}
.score-copy small {
  font-size: 15px;
  color: var(--mo-muted);
}
/*---- 20.10 Booking Band ----*/
/* the page ends on the photo band: the words and buttons on the left, the first visit on a
   white card on the right */
.wy-cta .mo-actions {
  margin-top: 34px;
}
.wy-cta-card {
  padding: 40px;
  border-radius: 28px;
}
.wy-cta-card h3 {
  margin-bottom: 16px;
  font-size: 30px;
}
.mo-photo-band .wy-cta-card .mo-rows li {
  border-color: var(--mo-line);
}
.mo-photo-band .wy-cta-card .mo-rows span {
  color: var(--mo-muted);
}
.mo-photo-band .wy-cta-card .mo-rows b {
  color: var(--mo-heading);
}
.mo-photo-band .wy-cta-card .mo-status {
  margin-top: 24px;
  color: var(--mo-muted);
}
.mo-photo-band .wy-cta-card .mo-status b {
  color: var(--mo-heading);
}

/*======================
21. New Patient Welcome
========================*/
/*---- 21.1 Welcome Hero ----*/
/* a cream frame: copy on the left, each slide's photograph filling the right and fading in
   from the copy's side, the booking card standing over it and staying while slides change */
.mo-wl-hero .hero-frame {
  background: #FBF6EE;
}
html[data-theme="dark"] .mo-wl-hero .hero-frame {
  background: var(--mo-bg-soft);
}
.mo-wl-hero .hero-slide {
  min-height: 800px;
  padding: 80px 0 170px;
}
.mo-wl-hero .hero-bg {
  left: 34%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000000 30%);
  mask-image: linear-gradient(90deg, transparent 0%, #000000 30%);
}
.mo-wl-hero .hero-bg img {
  object-position: 40% 60%;
}
.mo-wl-hero .hero-bg.is-chair img {
  object-position: 30% 50%;
}
/* a cream veil where the photograph meets the copy, so the lead never sits on the room */
.mo-wl-hero .hero-bg::after {
  background:
    linear-gradient(90deg, rgba(251, 246, 238, 0.9) 0%, rgba(251, 246, 238, 0) 38%),
    linear-gradient(0deg, rgba(14, 29, 68, 0.3) 0%, rgba(14, 29, 68, 0) 40%);
}
html[data-theme="dark"] .mo-wl-hero .hero-bg::after {
  background: linear-gradient(0deg, rgba(8, 17, 41, 0.55) 0%, rgba(8, 17, 41, 0.2) 100%);
}
.mo-wl-hero .hero-row {
  grid-template-columns: minmax(0, 1fr) 470px;
}
.mo-wl-hero .hero-copy {
  max-width: 640px;
}
.wl-stage {
  position: relative;
}
.wl-book-wrap {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  pointer-events: none;
}
.wl-book-wrap .container {
  display: flex;
  justify-content: flex-end;
}
.wl-book {
  width: 470px;
  max-width: 100%;
  padding: 34px;
  border-radius: 28px;
  box-shadow: 0 40px 90px rgba(14, 29, 68, 0.28);
  pointer-events: auto;
}
.wl-book-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--mo-line);
}
.wl-book-face {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border: 3px solid var(--mo-surface);
  box-shadow: 0 0 0 2px rgba(var(--mo-coral-rgb), 0.5);
}
.wl-book-title {
  margin: 0 0 2px;
  font-size: 27px;
}
.wl-book-sub {
  margin: 0 0 4px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--mo-muted);
}
.wl-book-or {
  margin: 16px 0 0;
  text-align: center;
  font-size: 15px;
  color: var(--mo-muted);
}
.wl-book-or a {
  font-weight: 700;
  color: var(--mo-heading);
}
/* the request in two columns: name and phone, reason and day, then the button */
.quick-form.is-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.quick-form.is-grid .mo-btn,
.quick-form.is-grid .form-status {
  grid-column: 1 / -1;
}
.quick-form.is-grid .form-status {
  margin: 0;
}
/* in the hero card the reason and the day take a row each, so the reason reads in full */
.wl-book .quick-form.is-grid > .mo-field:nth-of-type(n+3) {
  grid-column: 1 / -1;
}
/*---- 21.2 Three Ways In ----*/
/* insured, not insured, in pain: one card each, the offer in the middle on peach */
.wl-path-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  align-items: stretch;
}
.wl-path {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 44px 40px 40px;
  overflow: hidden;
  border-radius: 30px;
  transition: transform 0.45s var(--mo-ease), box-shadow 0.45s var(--mo-ease);
}
.wl-path:hover {
  transform: translateY(-8px);
  box-shadow: var(--mo-shadow-lg);
}
.wl-path .mo-illus {
  height: 78px;
  margin-bottom: 24px;
}
.wl-path:hover .mo-illus {
  transform: translateY(-4px) rotate(-4deg);
}
.wl-path h3 {
  margin-bottom: 12px;
  font-size: clamp(26px, 2vw, 32px);
}
.wl-path p {
  margin-bottom: 26px;
}
.wl-path .mo-btn {
  margin-top: auto;
}
.wl-path.is-insured {
  background: var(--mo-sky-soft);
}
.wl-path.is-special {
  background: linear-gradient(150deg, #FFF3EE 0%, #FCE1D6 100%);
  box-shadow: 0 30px 70px rgba(var(--mo-coral-rgb), 0.16);
}
.wl-path.is-urgent {
  background: var(--mo-night);
}
.wl-path.is-urgent h3 {
  color: #FFFFFF;
}
.wl-path.is-urgent p {
  color: rgba(234, 242, 251, 0.8);
}
.path-logos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  margin-bottom: 30px;
}
.path-logos li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  padding: 8px;
  border-radius: 12px;
  background: #FFFFFF;
}
.path-logos img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 30px;
}
.path-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 30px;
  font-family: var(--mo-ff-heading);
  font-size: 84px;
  font-weight: 600;
  line-height: 1;
  color: var(--mo-coral);
}
.path-price small {
  font-family: var(--mo-ff-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mo-navy);
}
.path-disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  margin-bottom: 24px;
  border-radius: 50%;
  background: #FFFFFF;
}
.path-disc-illus {
  width: auto;
  height: 60px;
}
.path-status {
  margin-bottom: 28px;
  color: rgba(255, 255, 255, 0.8);
}
.path-status b {
  color: #FFFFFF;
}
html[data-theme="dark"] .wl-path.is-special {
  background: linear-gradient(150deg, #2A2230 0%, #3A2A2C 100%);
}
html[data-theme="dark"] .path-price small {
  color: #F3E4DE;
}
html[data-theme="dark"] .wl-path.is-urgent {
  background: #050C1F;
}
/*---- 21.3 First Visit Timeline ----*/
/* four nodes on one line; the line fills from the first to the last as the section passes */
.wl-timeline-wrap {
  position: relative;
}
.tl-line {
  position: absolute;
  left: 12.5%;
  right: 12.5%;
  top: 59px;
  height: 3px;
  border-radius: 3px;
  background: var(--mo-line-strong);
}
.tl-line i {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--mo-primary) 0%, var(--mo-coral-bright) 100%);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.wl-timeline-wrap.is-static .tl-line i {
  transform: none;
}
.wl-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
  text-align: center;
}
.tl-step {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tl-node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  margin-bottom: 26px;
  border: 6px solid var(--mo-bg-soft);
  border-radius: 50%;
  background: var(--mo-surface);
  box-shadow: 0 20px 44px rgba(20, 40, 92, 0.12);
  transition: transform 0.45s var(--mo-ease);
}
.tl-step:hover .tl-node {
  transform: translateY(-6px);
}
.tl-illus {
  width: auto;
  height: 64px;
}
.tl-when {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mo-coral);
}
html[data-theme="dark"] .tl-when {
  color: var(--mo-coral-bright);
}
.tl-step h3 {
  margin-bottom: 10px;
  font-size: 26px;
}
.tl-step p {
  max-width: 300px;
  margin: 0 auto;
}
/*---- 21.4 Who You Will Meet ----*/
/* four round portraits on a dashed path, numbered in the order a new patient meets them */
.wl-journey {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
  counter-reset: journey;
  text-align: center;
}
.wl-journey::before {
  content: "";
  position: absolute;
  left: 12.5%;
  right: 12.5%;
  top: 92px;
  border-top: 3px dashed rgba(var(--mo-navy-rgb), 0.35);
}
html[data-theme="dark"] .wl-journey::before {
  border-top-color: rgba(255, 255, 255, 0.28);
}
.jr-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  counter-increment: journey;
}
.jr-step::before {
  content: counter(journey);
  position: absolute;
  top: 4px;
  left: calc(50% + 52px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 3px solid #FFFFFF;
  border-radius: 50%;
  background: var(--mo-coral);
  font-family: var(--mo-ff-heading);
  font-size: 18px;
  font-weight: 600;
  color: #FFFFFF;
}
.jr-face {
  display: block;
  width: 184px;
  height: 184px;
  margin-bottom: 24px;
  border: 8px solid #FFFFFF;
  box-shadow: 0 24px 50px rgba(20, 40, 92, 0.22);
}
.jr-when {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mo-on-band);
  opacity: 0.75;
}
.jr-name {
  margin-bottom: 4px;
  font-size: 28px;
}
.jr-role {
  display: block;
  margin-bottom: 12px;
  font-weight: 700;
  color: var(--mo-on-band);
}
.wl-team .jr-step p {
  max-width: 290px;
  margin: 0 auto;
  font-size: 16px;
}
/*---- 21.5 Checklist And Hours ----*/
.wl-bring .mo-actions {
  margin-top: 34px;
}
.wl-bring-card {
  padding: 44px;
  border-radius: 28px;
}
.wl-bring-card h3 {
  margin-bottom: 18px;
  font-size: 30px;
}
.mo-photo-band .wl-bring-card .mo-rows li {
  border-color: var(--mo-line);
}
.mo-photo-band .wl-bring-card .mo-rows span {
  color: var(--mo-muted);
}
.mo-photo-band .wl-bring-card .mo-rows b {
  color: var(--mo-heading);
}
.wl-hours {
  margin-top: 30px;
  padding: 30px;
  border-radius: 24px;
}
.wl-hours .mo-status {
  margin-bottom: 14px;
}
/*---- 21.6 Final Booking ----*/
/* the request on a warm peach ground, a soft sun behind it and the winking tooth */
.wl-final {
  position: relative;
  overflow: clip;
  background: linear-gradient(160deg, #FFF3EE 0%, #FCE6DC 100%);
}
html[data-theme="dark"] .wl-final {
  background: linear-gradient(160deg, #241D2C 0%, #2E2228 100%);
}
.wl-final::before {
  content: "";
  position: absolute;
  top: -180px;
  right: -160px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
}
html[data-theme="dark"] .wl-final::before {
  background: rgba(255, 255, 255, 0.04);
}
.wl-final .container {
  position: relative;
  z-index: 1;
}
.wl-final-mascot {
  position: absolute;
  left: 3%;
  bottom: 56px;
  width: 104px;
  height: auto;
  animation: moBob 5s ease-in-out infinite;
}
html[data-theme="dark"] .wl-final-mascot {
  filter: invert(1);
}
.wl-final-card {
  padding: 44px;
  border-radius: 30px;
  box-shadow: 0 40px 90px rgba(200, 64, 26, 0.12);
}
.wl-final-title {
  margin-bottom: 24px;
  font-size: 30px;
}
.wl-final .mo-rows {
  margin-top: 30px;
}
.wl-final .mo-rows a {
  color: inherit;
}
/*---- 21.7 Booking Dock ----*/
/* past the hero, the two ways to book rise at the foot of the window; over the form they
   step aside (desktop only: phones have the action bar) */
.wl-dock {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 94;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 12px 12px 18px;
  border-radius: 20px;
  background: var(--mo-surface);
  box-shadow: 0 24px 60px rgba(14, 29, 68, 0.28);
  transform: translate(-50%, 160%);
  visibility: hidden;
  transition: transform 0.6s var(--mo-ease), visibility 0s linear 0.6s;
}
.wl-dock.is-on {
  transform: translate(-50%, 0);
  visibility: visible;
  transition: transform 0.6s var(--mo-ease), visibility 0s;
}
.wl-dock-copy {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: 10px;
  line-height: 1.3;
}
.wl-dock-illus {
  width: auto;
  height: 46px;
}
.wl-dock-copy b {
  display: block;
  font-size: 16px;
  color: var(--mo-heading);
}
.wl-dock-copy small {
  font-size: 14px;
  color: var(--mo-muted);
}

/*======================
22. Home 02
========================*/
/*---- 22.1 Ink And Champagne Tokens ----*/
/* Home 02 re-themes every shared component by redefining the tokens on its body: porcelain and
   pearl grounds (the clinic, not a lobby), ink for text, dark sections and primary buttons,
   champagne for the calls to action, the accent words and the smile marks; Cormorant Garamond
   with Jost; soft corners and round buttons */
.theme-luxe {
  --lx-ink: #14181F;
  --lx-gold: #B8976A;
  --lx-gold-deep: #8F6F45;
  --lx-gold-soft: #D8C3A0;
  --lx-ivory: #F9F9F7;
  --mo-primary: #14181F;
  --mo-primary-rgb: 20, 24, 31;
  --mo-primary-deep: #2A313C;
  --mo-on-primary: #FBFAF7;
  --mo-accent-text: #8F6F45;
  --mo-coral: #B8976A;
  --mo-coral-hover: #A6855A;
  --mo-coral-bright: #C9AB7E;
  --mo-coral-rgb: 184, 151, 106;
  --mo-sky: #D8C3A0;
  --mo-sky-rgb: 216, 195, 160;
  --mo-sky-soft: #EEF0EE;
  --mo-band: #E8EAE7;
  --mo-on-band: #14181F;
  --mo-navy: #14181F;
  --mo-navy-rgb: 20, 24, 31;
  --mo-night: #14181F;
  --mo-night-rgb: 20, 24, 31;
  --mo-night-2: #1D232C;
  --mo-on-night: rgba(246, 243, 238, 0.72);
  --mo-line-night: rgba(246, 243, 238, 0.12);
  --mo-bg: #FAFAF8;
  --mo-bg-rgb: 250, 250, 248;
  --mo-bg-soft: #F0F1EF;
  --mo-bg-soft-rgb: 240, 241, 239;
  --mo-surface: #FFFFFF;
  --mo-surface-2: #F4F5F3;
  --mo-field: #F2F3F1;
  --mo-heading: #14181F;
  --mo-heading-rgb: 20, 24, 31;
  --mo-text: #4B5159;
  --mo-muted: #7B8189;
  --mo-line: #E4E6E3;
  --mo-line-strong: #D2D6D2;
  --mo-tonal: rgba(184, 151, 106, 0.12);
  --mo-tonal-2: rgba(184, 151, 106, 0.2);
  --mo-sun: #C9AB7E;
  --mo-ff-heading: "Cormorant Garamond", serif;
  --mo-ff-body: "Jost", sans-serif;
  --mo-fs-display: clamp(54px, 6.4vw, 112px);
  --mo-fs-h2: clamp(42px, 3.9vw, 68px);
  --mo-fs-h3: clamp(24px, 2vw, 32px);
  --mo-radius: 10px;
  --mo-radius-card: 18px;
  --mo-radius-lg: 26px;
  --mo-shadow: 0 20px 50px rgba(20, 24, 31, 0.06);
  --mo-shadow-lg: 0 30px 80px rgba(20, 24, 31, 0.14);
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.01em;
}
html[data-theme="dark"] .theme-luxe {
  --mo-primary: #EDE6DA;
  --mo-primary-rgb: 237, 230, 218;
  --mo-primary-deep: #D8C3A0;
  --mo-on-primary: #14181F;
  --mo-accent-text: #D8C3A0;
  --mo-sky-soft: #161A20;
  --mo-band: #1D232C;
  --mo-on-band: #F3EEE6;
  --mo-night: #0B0E12;
  --mo-night-2: #161A20;
  --mo-bg: #101318;
  --mo-bg-rgb: 16, 19, 24;
  --mo-bg-soft: #161A20;
  --mo-bg-soft-rgb: 22, 26, 32;
  --mo-surface: #1A1F26;
  --mo-surface-2: #20262E;
  --mo-field: #20262E;
  --mo-heading: #F3EEE6;
  --mo-heading-rgb: 243, 238, 230;
  --mo-text: #B8B2A8;
  --mo-muted: #8E8A83;
  --mo-line: rgba(246, 243, 238, 0.1);
  --mo-line-strong: rgba(246, 243, 238, 0.18);
  --mo-tonal: rgba(216, 195, 160, 0.1);
  --mo-tonal-2: rgba(216, 195, 160, 0.18);
  --mo-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  --mo-shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.5);
}
/*---- 22.2 Type And Buttons ----*/
.theme-luxe h1,
.theme-luxe h2,
.theme-luxe h3,
.theme-luxe h4 {
  font-weight: 500;
  letter-spacing: -0.005em;
}
.theme-luxe .title {
  line-height: 1.04;
}
.theme-luxe .title em,
.theme-luxe h2 em {
  font-style: normal;
  font-weight: 500;
}
/* the section mark: the logo's smile, drawn fine in champagne */
.theme-luxe .title::after,
.theme-luxe .askai-title::after {
  width: 58px;
  height: 14px;
  margin-top: 20px;
  border-width: 2px;
  border-bottom-color: var(--lx-gold);
}
/* eyebrows in spaced capitals behind a short hairline */
.theme-luxe .mo-eyebrow {
  gap: 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.24em;
}
.theme-luxe .mo-eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 34px;
  height: 1px;
  background: currentColor;
}
.theme-luxe .mo-lead {
  font-size: 19px;
  font-weight: 300;
  line-height: 1.75;
}
.theme-luxe .mo-btn {
  min-height: 56px;
  padding: 15px 28px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
}
.theme-luxe .mo-btn:hover {
  color: var(--mo-on-primary);
  box-shadow: 0 14px 30px rgba(20, 24, 31, 0.18);
}
.theme-luxe .mo-btn.is-coral {
  background: var(--lx-gold);
  color: var(--lx-ink);
}
.theme-luxe .mo-btn.is-coral:hover {
  background: #CBB08A;
  color: var(--lx-ink);
  box-shadow: 0 14px 30px rgba(184, 151, 106, 0.35);
}
.theme-luxe .mo-btn.is-coral .btn-ic {
  background: rgba(20, 24, 31, 0.12);
  color: var(--lx-ink);
}
.theme-luxe .mo-btn.is-light .btn-ic,
.theme-luxe .mo-btn.is-tonal .btn-ic {
  background: var(--lx-ink);
  color: #FFFFFF;
}
.theme-luxe .mo-btn.is-tonal:hover .btn-ic {
  background: rgba(255, 255, 255, 0.18);
}
.theme-luxe .mo-btn.is-glass {
  border: 1px solid rgba(246, 243, 238, 0.35);
  background: rgba(246, 243, 238, 0.06);
}
.theme-luxe .mo-btn.is-glass:hover {
  background: var(--lx-ivory);
  color: var(--lx-ink);
}
.theme-luxe .mo-card {
  border: 1px solid var(--mo-line);
  box-shadow: none;
}
.theme-luxe .lx-num {
  font-family: var(--mo-ff-heading);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--mo-accent-text);
}
/* every photo band on this page washes in ink */
.theme-luxe .band-img::after {
  background: linear-gradient(90deg, rgba(20, 24, 31, 0.95) 0%, rgba(20, 24, 31, 0.82) 50%, rgba(20, 24, 31, 0.5) 100%);
}
html[data-theme="dark"] .theme-luxe .band-img::after {
  background: linear-gradient(90deg, rgba(11, 14, 18, 0.96) 0%, rgba(11, 14, 18, 0.86) 50%, rgba(11, 14, 18, 0.6) 100%);
}
.theme-luxe .mo-photo-band .title em,
.theme-luxe .mo-night .title em {
  color: var(--lx-gold-soft);
}
/*---- 22.3 Luxe Header ----*/
/* over the hero the header is transparent with ivory words; once the page scrolls the bar docks
   in ivory with ink words */
.lx-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  min-height: 0;
}
.lx-top {
  border-bottom: 1px solid rgba(246, 243, 238, 0.14);
  color: rgba(246, 243, 238, 0.78);
  font-size: 13px;
  letter-spacing: 0.04em;
}
.lx-top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 46px;
}
.lx-top p {
  margin: 0;
}
.lx-top a {
  color: inherit;
  transition: color 0.3s var(--mo-ease);
}
.lx-top a:hover {
  color: var(--lx-gold-soft);
}
.lx-status b {
  color: #FFFFFF;
}
.lx-top-end {
  display: flex;
  align-items: center;
  gap: 22px;
}
.lx-top-phone i {
  margin-right: 8px;
  color: var(--lx-gold);
}
.lx-mode {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(246, 243, 238, 0.28);
  border-radius: 50%;
  background: transparent;
  color: rgba(246, 243, 238, 0.9);
  font-size: 13px;
  cursor: pointer;
}
.lx-mode:hover {
  border-color: var(--lx-gold);
  color: var(--lx-gold-soft);
}
.lx-header .header-bar {
  background: transparent;
  box-shadow: none;
}
/* below 1600px the bar holds the logo, Book and the menu button; wider, the menu splits around a
   centred logo */
.lx-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 30px;
  min-height: 104px;
}
.lx-header .lx-nav {
  display: none;
}
.lx-header .mo-menu-toggle {
  display: inline-flex;
}
@media (min-width: 1600px) {
  .lx-inner {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }
  .lx-header .lx-nav {
    display: block;
  }
  .lx-header .mo-menu-toggle {
    display: none;
  }
}
.lx-logo img {
  width: auto;
  height: 52px;
}
.lx-logo .logo-ink {
  display: none;
}
.lx-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}
.lx-header .mo-nav > ul > li > a {
  padding: 40px 13px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(246, 243, 238, 0.92);
}
.lx-header .mo-nav > ul > li > a > i {
  font-size: 10px;
  color: rgba(246, 243, 238, 0.55);
}
.lx-header .mo-nav > ul > li:hover > a,
.lx-header .mo-nav > ul > li.active > a {
  color: var(--lx-gold-soft);
}
.lx-header .header-actions .mo-round.is-tonal {
  background: rgba(246, 243, 238, 0.12);
  color: #FFFFFF;
}
.lx-header .mo-nav .sub-menu a {
  font-size: 15px;
}
/* docked: ivory, ink words, the ink logo */
.lx-header.is-scrolled .header-bar {
  background: var(--mo-surface);
  box-shadow: 0 1px 0 var(--mo-line), 0 20px 40px rgba(20, 24, 31, 0.08);
}
.lx-header.is-scrolled .lx-inner {
  min-height: 84px;
}
.lx-header.is-scrolled .mo-nav > ul > li > a {
  padding-top: 30px;
  padding-bottom: 30px;
  color: var(--mo-heading);
}
.lx-header.is-scrolled .mo-nav > ul > li > a > i {
  color: var(--mo-muted);
}
.lx-header.is-scrolled .mo-nav > ul > li:hover > a,
.lx-header.is-scrolled .mo-nav > ul > li.active > a {
  color: var(--mo-accent-text);
}
.lx-header.is-scrolled .lx-logo img {
  height: 46px;
}
.lx-header.is-scrolled .lx-logo .logo-ink {
  display: block;
}
.lx-header.is-scrolled .lx-logo .logo-ivory {
  display: none;
}
html[data-theme="dark"] .lx-header.is-scrolled .lx-logo .logo-ink {
  display: none;
}
html[data-theme="dark"] .lx-header.is-scrolled .lx-logo .logo-ivory {
  display: block;
}
.lx-header.is-scrolled .header-actions .mo-round.is-tonal {
  background: var(--mo-tonal);
  color: var(--mo-heading);
}
/*---- 22.4 Luxe Hero ----*/
/* an ink panel holds the copy on the left; the photograph stands bright on the right, fading into
   the ink at its inner edge, under the header and at the foot; a credential plate on each slide */
.lx-hero {
  padding: 0;
  background: var(--lx-ink);
}
.lx-hero .hero-frame {
  border-radius: 0;
  background: var(--lx-ink);
}
.lx-hero .hero-slide {
  align-items: center;
  min-height: 100vh;
  padding: 190px 0 170px;
}
.lx-hero .hero-bg {
  left: 42%;
  overflow: hidden;
  /* the photograph fades into the ink through its own mask: with the GPU drawing it, an overlay
     laid on top left a hairline of the photo at its inner edge on some screens */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 2%, #000000 30%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 2%, #000000 30%);
}
/* a still photograph here: the slow zoom put the photo on its own GPU layer, whose clip could slip */
.lx-hero .hero-bg img,
.lx-hero .swiper-slide-active .hero-bg img {
  transform: none;
  transition: none;
}
.lx-hero .hero-bg::after {
  background:
    linear-gradient(180deg, rgba(20, 24, 31, 0.9) 0%, rgba(20, 24, 31, 0.5) 14%, rgba(20, 24, 31, 0) 30%),
    linear-gradient(0deg, rgba(20, 24, 31, 0.62) 0%, rgba(20, 24, 31, 0) 26%);
}
.lx-hero .hero-slide.is-aligner .hero-bg img {
  object-position: 50% 36%;
}
.lx-hero .hero-slide.is-doctor .hero-bg img {
  object-position: 50% 22%;
}
.lx-hero .hero-slide.is-team .hero-bg img {
  object-position: 40% 40%;
}
.lx-hero .hero-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}
.lx-hero .hero-copy {
  max-width: 640px;
}
/* the credential plate: one fact about the practice on dark glass over the photograph */
.lx-cred {
  display: grid;
  justify-items: start;
  gap: 8px;
  min-width: 240px;
  margin-bottom: 24px;
  padding: 24px 28px;
  border: 1px solid rgba(216, 195, 160, 0.4);
  border-radius: 20px;
  background: rgba(20, 24, 31, 0.45);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: rgba(246, 243, 238, 0.82);
}
.lx-cred-num {
  font-family: var(--mo-ff-heading);
  font-size: 60px;
  font-weight: 500;
  line-height: 0.9;
  color: var(--lx-gold-soft);
}
.lx-cred-label {
  font-size: 14px;
  letter-spacing: 0.03em;
}
.lx-cred .mo-rating-stars {
  font-size: 15px;
}
.lx-hero .hero-kicker {
  color: var(--lx-gold-soft);
}
.lx-hero .hero-title {
  margin-bottom: 26px;
  font-size: clamp(52px, 5.2vw, 96px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.01em;
  color: #FBFAF7;
}
.lx-hero .hero-title em {
  font-style: normal;
  color: var(--lx-gold-soft);
}
.lx-hero .hero-lead {
  max-width: 580px;
  font-size: 20px;
  font-weight: 300;
  color: rgba(246, 243, 238, 0.84);
}
.lx-hero .hero-controls-wrap {
  bottom: 56px;
}
.lx-hero-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.lx-hero .hero-controls {
  justify-content: flex-start;
}
/* the concierge strip: whether we're open, the phone, the booking */
.lx-concierge {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 16px 26px;
  border: 1px solid rgba(246, 243, 238, 0.18);
  border-radius: 999px;
  background: rgba(20, 24, 31, 0.35);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: rgba(246, 243, 238, 0.8);
  font-size: 14px;
  pointer-events: auto;
}
.lx-concierge .mo-status b {
  color: #FFFFFF;
}
.lx-concierge-call {
  padding-left: 26px;
  border-left: 1px solid rgba(246, 243, 238, 0.18);
  color: #FFFFFF;
}
.lx-concierge-call i {
  margin-right: 8px;
  color: var(--lx-gold);
}
.lx-concierge-book {
  padding-bottom: 2px;
  border-bottom: 1px solid var(--lx-gold);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--lx-gold-soft);
}
.lx-concierge-book:hover {
  color: #FFFFFF;
}
/*---- 22.5 Statement And Pillars ----*/
.lx-statement {
  margin: 0;
  font-size: clamp(34px, 2.9vw, 52px);
  font-weight: 400;
  line-height: 1.22;
}
.lx-statement em {
  font-style: normal;
  color: var(--mo-accent-text);
}
.lx-sign {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
  margin-top: 34px;
  line-height: 1.35;
}
.lx-sign-face {
  flex: 0 0 auto;
  width: 250px;
  height: 250px;
  margin-left: 11px;
  box-shadow: 0 0 0 10px var(--mo-bg), 0 0 0 11px var(--lx-gold), 0 30px 60px rgba(20, 24, 31, 0.16);
}
.lx-sign-face img {
  object-position: center 20%;
}
.lx-sign b {
  display: block;
  font-family: var(--mo-ff-heading);
  font-size: 22px;
  font-weight: 600;
  color: var(--mo-heading);
}
.lx-sign small {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--mo-muted);
}
/* the reasons' tape under the intro, in ink and champagne */
.theme-luxe .wy-tape {
  box-shadow: 0 22px 44px rgba(20, 24, 31, 0.14);
}
.theme-luxe .wy-ribbon.is-peach {
  background: #EEE6D8;
}
html[data-theme="dark"] .theme-luxe .wy-ribbon.is-navy {
  background: #1D232C;
}
html[data-theme="dark"] .theme-luxe .wy-ribbon.is-peach {
  background: #2A2620;
}
.theme-luxe .wy-ribbon.is-peach .rb-set li {
  font-style: normal;
  color: var(--lx-gold-deep);
}
html[data-theme="dark"] .theme-luxe .wy-ribbon.is-peach .rb-set li {
  color: var(--lx-gold-soft);
}
.lx-pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 44px;
  margin-top: 90px;
  padding-top: 54px;
  border-top: 1px solid var(--mo-line);
}
.lx-pillar-ic {
  display: block;
  width: auto;
  height: 64px;
}
/* on the night theme the line-art turns over: light lines on a dark fill, the champagne kept */
html[data-theme="dark"] .lx-pillar-ic,
html[data-theme="dark"] .lx-treat-ic img {
  filter: invert(1) hue-rotate(180deg);
}
.lx-pillars h3 {
  margin: 16px 0 12px;
  font-size: 30px;
}
.lx-pillars p {
  margin: 0;
}
/*---- 22.6 The Visit In Four Steps ----*/
.lx-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
}
.lx-step:nth-child(even) {
  margin-top: 90px;
}
.lx-step-photo {
  position: relative;
  display: block;
  padding-top: 128%;
  overflow: hidden;
  border-radius: var(--mo-radius-card);
}
.lx-step-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  filter: saturate(0.85);
  transition: transform 1s var(--mo-ease), filter 0.6s var(--mo-ease);
}
.lx-step:hover .lx-step-photo img {
  filter: none;
  transform: scale(1.05);
}
.lx-step .lx-num {
  display: block;
  margin: 26px 0 8px;
  font-size: 46px;
  line-height: 1;
  color: var(--lx-gold-soft);
}
.lx-step h3 {
  margin-bottom: 10px;
  font-size: 30px;
  color: #FBFAF7;
}
.lx-step p {
  margin: 0;
  color: var(--mo-on-night);
}
/*---- 22.7 Treatments List ----*/
.lx-treat-head {
  position: sticky;
  top: 140px;
}
.lx-treat-list {
  border-top: 1px solid var(--mo-line);
}
.lx-treat-row {
  position: relative;
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 24px;
  padding: 34px 0;
  border-bottom: 1px solid var(--mo-line);
  color: var(--mo-heading);
}
.lx-treat-ic img {
  display: block;
  width: auto;
  height: 54px;
}
.lx-treat-main b {
  display: block;
  font-family: var(--mo-ff-heading);
  font-size: clamp(30px, 2.5vw, 44px);
  font-weight: 500;
  line-height: 1.1;
  transition: transform 0.5s var(--mo-ease), color 0.4s var(--mo-ease);
}
.lx-treat-main span {
  display: block;
  max-width: 520px;
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--mo-muted);
}
.lx-treat-row:hover .lx-treat-main b {
  color: var(--mo-accent-text);
  transform: translateX(14px);
}
/* the row's photograph unveils from its middle, tilted a little, beside the words */
.lx-treat-img {
  position: absolute;
  top: 50%;
  right: 96px;
  z-index: 2;
  width: 230px;
  height: 290px;
  overflow: hidden;
  pointer-events: none;
  border-radius: 16px;
  clip-path: inset(50% 0 50% 0 round 16px);
  transform: translateY(-50%) rotate(3deg);
  transition: clip-path 0.6s var(--mo-ease);
}
.lx-treat-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.15);
  transition: transform 0.9s var(--mo-ease);
}
.lx-treat-row:hover .lx-treat-img {
  clip-path: inset(0 0 0 0 round 16px);
}
.lx-treat-row:hover .lx-treat-img img {
  transform: scale(1);
}
.lx-treat-go {
  justify-self: end;
  font-size: 16px;
  color: var(--mo-accent-text);
  transform: rotate(-45deg);
  transition: transform 0.4s var(--mo-ease);
}
.lx-treat-row:hover .lx-treat-go {
  transform: rotate(0);
}
/*---- 22.8 Dr. Carter ----*/
.lx-portrait {
  position: relative;
  max-width: 520px;
  margin: 0 0 28px 28px;
}
.lx-portrait::before {
  content: "";
  position: absolute;
  top: 28px;
  right: 28px;
  bottom: -28px;
  left: -28px;
  border: 1px solid var(--lx-gold);
  border-radius: calc(var(--mo-radius-lg) + 6px);
}
.lx-portrait-img {
  position: relative;
  display: block;
  padding-top: 122%;
  overflow: hidden;
  border-radius: var(--mo-radius-lg);
}
.lx-portrait-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 16%;
}
.lx-portrait .lx-play {
  position: absolute;
  right: -30px;
  bottom: 50px;
  z-index: 2;
}
.lx-rows {
  margin: 30px 0 38px;
}
/*---- 22.9 Team Portraits ----*/
/* the team stands tall: five large portraits with the role over the name */
.lx-team-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 26px;
}
.lx-member-photo {
  position: relative;
  display: block;
  padding-top: 130%;
  overflow: hidden;
  border-radius: var(--mo-radius-card);
  background: var(--mo-surface-2);
}
.lx-member-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: saturate(0.8);
  transition: transform 1s var(--mo-ease), filter 0.6s var(--mo-ease);
}
.lx-member:hover .lx-member-photo img {
  filter: none;
  transform: scale(1.05);
}
.lx-member-role {
  display: block;
  margin-top: 22px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--mo-accent-text);
}
.lx-member-name {
  margin: 8px 0 12px;
  font-size: 32px;
}
.lx-member-name::after {
  content: "";
  display: block;
  width: 30px;
  height: 1px;
  margin-top: 14px;
  background: var(--lx-gold);
  transition: width 0.5s var(--mo-ease);
}
.lx-member:hover .lx-member-name::after {
  width: 76px;
}
.lx-member p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--mo-muted);
}
/*---- 22.10 Smile Design ----*/
/* the before and after carries the smile's guide lines, drawn in champagne once in view; under it
   a porcelain shade guide whose ring follows the divider (both illustrative, like the photograph) */
.ba-guides {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #E9D7B5;
  stroke-width: 3.4;
  stroke-linecap: round;
  pointer-events: none;
}
.ba-guides .g-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.8s var(--mo-ease);
}
.ba-guides .g-draw:nth-child(2) {
  transition-delay: 0.35s;
}
.ba-guides .g-draw:nth-child(3) {
  transition-delay: 0.7s;
}
.ba-guides .g-tick,
.ba-guides .g-dash {
  opacity: 0;
  transition: opacity 0.8s var(--mo-ease) 1.2s;
}
.ba-guides .g-dash {
  stroke-width: 2;
  stroke-dasharray: 10 12;
}
.ba.is-drawn .g-draw {
  stroke-dashoffset: 0;
}
.ba.is-drawn .g-tick {
  opacity: 1;
}
.ba.is-drawn .g-dash {
  opacity: 0.7;
}
/* the labels, in the drawing's own units: small spaced capitals with a dark halo */
.ba-guides .g-note {
  fill: #F3E6CF;
  stroke: rgba(20, 24, 31, 0.42);
  stroke-width: 5px;
  stroke-linejoin: round;
  paint-order: stroke;
  font-family: var(--mo-ff-body);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.6s var(--mo-ease) 1.4s;
}
.ba.is-drawn .g-note {
  opacity: 1;
}
.shade-guide {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-top: 26px;
  padding: 22px 28px;
  border: 1px solid rgba(246, 243, 238, 0.12);
  border-radius: var(--mo-radius-card);
  background: rgba(246, 243, 238, 0.04);
}
.shade-now {
  flex: 0 0 auto;
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(246, 243, 238, 0.6);
}
.shade-now b {
  display: block;
  min-width: 2ch;
  margin-top: 6px;
  font-family: var(--mo-ff-heading);
  font-size: 44px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  color: var(--lx-gold-soft);
}
.shade-tabs {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 12px;
}
.shade-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(246, 243, 238, 0.5);
  transition: color 0.3s var(--mo-ease);
}
/* each tab a porcelain crown on its metal stem */
.shade-chip {
  position: relative;
  display: block;
  width: 100%;
  max-width: 40px;
  height: 50px;
  margin-top: 10px;
  border-radius: 10px 10px 46% 46% / 10px 10px 60% 60%;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--shade) 62%);
  box-shadow: inset 0 -6px 10px rgba(120, 90, 50, 0.14);
  transition: transform 0.4s var(--mo-ease), box-shadow 0.4s var(--mo-ease);
}
.shade-chip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 12px;
  height: 10px;
  margin-left: -6px;
  border-radius: 3px 3px 0 0;
  background: #8E949B;
}
.shade-tab:nth-child(1) .shade-chip {
  --shade: #F3EEE2;
}
.shade-tab:nth-child(2) .shade-chip {
  --shade: #EEE4D0;
}
.shade-tab:nth-child(3) .shade-chip {
  --shade: #ECDFC2;
}
.shade-tab:nth-child(4) .shade-chip {
  --shade: #E3D8C6;
}
.shade-tab:nth-child(5) .shade-chip {
  --shade: #E6D3B2;
}
.shade-tab:nth-child(6) .shade-chip {
  --shade: #DCD3C1;
}
.shade-tab:nth-child(7) .shade-chip {
  --shade: #D2C6AE;
}
.shade-tab:nth-child(8) .shade-chip {
  --shade: #DDC49B;
}
.shade-tab.is-on {
  color: var(--lx-gold-soft);
}
.shade-tab.is-on .shade-chip {
  transform: translateY(-6px);
  box-shadow: 0 0 0 3px var(--lx-ink), 0 0 0 4px var(--lx-gold), 0 14px 26px rgba(0, 0, 0, 0.4);
}
/*---- 22.11 Reviews And Plans ----*/
.lx-score {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 30px;
}
.lx-score-num {
  font-family: var(--mo-ff-heading);
  font-size: 92px;
  font-weight: 400;
  line-height: 0.9;
  color: var(--mo-heading);
}
.lx-score-copy {
  display: grid;
  gap: 6px;
}
.lx-score-copy small {
  font-size: 14px;
  color: var(--mo-muted);
}
.lx-score .mo-rating-stars {
  font-size: 20px;
}
.theme-luxe .review-card {
  background: var(--mo-surface);
}
.theme-luxe .review-topic {
  font-size: 27px;
  font-weight: 500;
}
.theme-luxe .pm-tile {
  box-shadow: none;
  border: 1px solid var(--mo-line);
}
/*---- 22.12 Smile Journal ----*/
/* the newest post large (photo, byline, title, lead), three more as an editorial list of rows
   under hairlines, each with its picture; titles turn champagne under the pointer */
.lx-post-feature {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--mo-line);
  border-radius: var(--mo-radius-lg);
  background: var(--mo-surface);
}
.lx-post-photo {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.lx-post-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  transition: transform 1s var(--mo-ease);
}
.lx-post-feature:hover .lx-post-photo img {
  transform: scale(1.04);
}
.lx-post-cat {
  position: absolute;
  top: 22px;
  left: 22px;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(20, 24, 31, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.lx-post-body {
  padding: 34px 38px 38px;
}
.lx-post-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 14px;
  color: var(--mo-muted);
}
.lx-post-meta b {
  font-weight: 500;
  color: var(--mo-heading);
}
.lx-post-face {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
}
.lx-post-feature h3 {
  margin-bottom: 12px;
  font-size: clamp(30px, 2.4vw, 42px);
  line-height: 1.1;
}
.lx-post-feature h3 a,
.lx-post-row b {
  color: var(--mo-heading);
  transition: color 0.35s var(--mo-ease);
}
.lx-post-feature h3 a:hover,
.lx-post-row:hover b {
  color: var(--mo-accent-text);
}
.lx-post-feature p {
  margin-bottom: 22px;
}
.lx-post-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--lx-gold);
  font-size: 15px;
  font-weight: 500;
  color: var(--mo-accent-text);
}
.lx-post-more i {
  font-size: 13px;
  transition: transform 0.35s var(--mo-ease);
}
.lx-post-more:hover i {
  transform: translateX(5px);
}
.lx-post-list {
  display: grid;
  grid-auto-rows: 1fr;
  height: 100%;
  border-top: 1px solid var(--mo-line);
}
.lx-post-row {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 26px;
  height: 100%;
  padding: 24px 0;
  border-bottom: 1px solid var(--mo-line);
}
.lx-post-thumb {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--mo-radius-card);
}
.lx-post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--mo-ease);
}
.lx-post-row:hover .lx-post-thumb img {
  transform: scale(1.06);
}
/* the note on AI has no photograph: a large champagne quotation mark on ink */
.lx-post-thumb.is-quote {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lx-ink);
  color: var(--lx-gold-soft);
  font-family: var(--mo-ff-heading);
  font-size: 110px;
  line-height: 1;
  padding-top: 34px;
}
html[data-theme="dark"] .lx-post-thumb.is-quote {
  box-shadow: inset 0 0 0 1px var(--mo-line);
}
.lx-post-main {
  display: grid;
  gap: 6px;
  line-height: 1.35;
}
.lx-post-main small {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mo-accent-text);
}
.lx-post-row b {
  font-family: var(--mo-ff-heading);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.15;
}
.lx-post-main > span {
  font-size: 15px;
  line-height: 1.55;
  color: var(--mo-muted);
}
.lx-post-go {
  justify-self: end;
  font-size: 16px;
  color: var(--mo-accent-text);
  transform: rotate(-45deg);
  transition: transform 0.4s var(--mo-ease);
}
.lx-post-row:hover .lx-post-go {
  transform: rotate(0);
}
/*---- 22.13 Reserve ----*/
.lx-form-card {
  padding: 46px;
  border-radius: var(--mo-radius-lg);
}
.lx-form-card h3 {
  margin-bottom: 24px;
  font-size: 34px;
}
.mo-photo-band .lx-form-card h3 {
  color: var(--mo-heading);
}
/*---- 22.14 Luxe Footer ----*/
.lx-footer {
  position: relative;
  padding-top: 110px;
  background: #14181F;
  color: rgba(246, 243, 238, 0.66);
}
.lx-foot-cta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 80px;
  border-bottom: 1px solid rgba(246, 243, 238, 0.12);
}
.lx-foot-cta .mo-eyebrow {
  color: var(--lx-gold-soft);
}
.lx-foot-title {
  margin: 0;
  font-family: var(--mo-ff-heading);
  font-size: clamp(46px, 4.8vw, 84px);
  font-weight: 400;
  line-height: 1;
  color: #F6F3EE;
}
.lx-foot-title em {
  font-style: normal;
  color: var(--lx-gold-soft);
}
.lx-foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 50px;
  padding: 72px 0;
}
.lx-foot-logo img {
  width: auto;
  height: 54px;
}
.lx-foot-brand p {
  max-width: 340px;
  margin: 24px 0;
}
.lx-foot-h {
  margin-bottom: 22px;
  font-family: var(--mo-ff-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--lx-gold-soft);
}
.lx-foot-list {
  display: grid;
  gap: 12px;
}
.lx-foot-list a {
  color: rgba(246, 243, 238, 0.82);
  transition: color 0.3s var(--mo-ease);
}
.lx-foot-list a:hover {
  color: var(--lx-gold-soft);
}
.lx-foot-status {
  margin-bottom: 14px;
  color: rgba(246, 243, 238, 0.7);
}
.lx-foot-status b {
  color: #FFFFFF;
}
.lx-foot-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 0;
  border-top: 1px solid rgba(246, 243, 238, 0.12);
  font-size: 13px;
}
.lx-foot-bottom p {
  margin: 0;
}
.lx-foot-bottom a {
  color: rgba(246, 243, 238, 0.82);
}
.lx-foot-legal {
  display: flex;
  gap: 24px;
}

/*======================
23. Home 03
========================*/
/*---- 23.1 Fresh Clinical Tokens ----*/
/* Home 03 re-themes every shared component on its body: white and mist grounds, a teal-black ink,
   teal for the calls to action, mint for tiles and chips, coral as the spark; Bricolage
   Grotesque with Inter; rounded cards and pill buttons */
.theme-fresh {
  --fr-ink: #0E2A2B;
  --fr-teal: #0B6E69;
  --fr-teal-deep: #08504C;
  --fr-mint: #7FE0C6;
  --fr-mint-soft: #E3F7F1;
  --fr-coral: #FF7A59;
  --fr-coral-soft: #FFE9E2;
  --mo-primary: #0B6E69;
  --mo-primary-rgb: 11, 110, 105;
  --mo-primary-deep: #08504C;
  --mo-on-primary: #FFFFFF;
  --mo-accent-text: #0B6E69;
  --mo-coral: #FF7A59;
  --mo-coral-hover: #F0623F;
  --mo-coral-bright: #FF7A59;
  --mo-coral-rgb: 255, 122, 89;
  --mo-sky: #7FE0C6;
  --mo-sky-rgb: 127, 224, 198;
  --mo-sky-soft: #E3F7F1;
  --mo-band: #DDF3EC;
  --mo-on-band: #0E2A2B;
  --mo-navy: #0E2A2B;
  --mo-navy-rgb: 14, 42, 43;
  --mo-night: #0E2A2B;
  --mo-night-rgb: 14, 42, 43;
  --mo-night-2: #15393A;
  --mo-on-night: rgba(234, 247, 243, 0.76);
  --mo-line-night: rgba(234, 247, 243, 0.12);
  --mo-bg: #FFFFFF;
  --mo-bg-rgb: 255, 255, 255;
  --mo-bg-soft: #F2F7F6;
  --mo-bg-soft-rgb: 242, 247, 246;
  --mo-surface: #FFFFFF;
  --mo-surface-2: #F7FAF9;
  --mo-field: #EEF5F3;
  --mo-heading: #0E2A2B;
  --mo-heading-rgb: 14, 42, 43;
  --mo-text: #4A5D5E;
  --mo-muted: #6B7E7F;
  --mo-line: #DDE8E5;
  --mo-line-strong: #C8D8D4;
  --mo-tonal: rgba(11, 110, 105, 0.08);
  --mo-tonal-2: rgba(11, 110, 105, 0.14);
  --mo-sun: #FFC857;
  --mo-mint: #7FE0C6;
  --mo-ff-heading: "Bricolage Grotesque", sans-serif;
  --mo-ff-body: "Inter", sans-serif;
  --mo-fs-display: clamp(46px, 5vw, 88px);
  --mo-fs-h2: clamp(34px, 3.2vw, 56px);
  --mo-fs-h3: clamp(22px, 1.7vw, 28px);
  --mo-radius: 14px;
  --mo-radius-card: 24px;
  --mo-radius-lg: 32px;
  --mo-shadow: 0 18px 44px rgba(14, 42, 43, 0.07);
  --mo-shadow-lg: 0 30px 70px rgba(14, 42, 43, 0.14);
  font-size: 16px;
  line-height: 1.7;
}
html[data-theme="dark"] .theme-fresh {
  --mo-primary: #3FC1A8;
  --mo-primary-rgb: 63, 193, 168;
  --mo-primary-deep: #2FA890;
  --mo-on-primary: #08201F;
  --mo-accent-text: #7FE0C6;
  --mo-sky-soft: #10292A;
  --mo-band: #13302F;
  --mo-on-band: #E9F6F2;
  --mo-night: #07191A;
  --mo-night-2: #0F2627;
  --mo-bg: #0A1A1B;
  --mo-bg-rgb: 10, 26, 27;
  --mo-bg-soft: #0F2324;
  --mo-bg-soft-rgb: 15, 35, 36;
  --mo-surface: #112829;
  --mo-surface-2: #163132;
  --mo-field: #163132;
  --mo-heading: #E9F6F2;
  --mo-heading-rgb: 233, 246, 242;
  --mo-text: #A9BDBB;
  --mo-muted: #86A09D;
  --mo-line: rgba(233, 246, 242, 0.1);
  --mo-line-strong: rgba(233, 246, 242, 0.18);
  --mo-tonal: rgba(127, 224, 198, 0.1);
  --mo-tonal-2: rgba(127, 224, 198, 0.18);
  --mo-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
  --mo-shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.5);
}
/*---- 23.2 Type, Chips And Buttons ----*/
.theme-fresh h1,
.theme-fresh h2,
.theme-fresh h3,
.theme-fresh h4 {
  font-weight: 700;
  letter-spacing: -0.025em;
}
.theme-fresh .title {
  line-height: 1.04;
}
/* the accent word in teal over a mint marker stroke */
.theme-fresh .title em,
.theme-fresh .hero-title em {
  padding: 0 0.06em;
  font-style: normal;
  color: var(--mo-primary);
  background: linear-gradient(transparent 60%, rgba(127, 224, 198, 0.55) 60%, rgba(127, 224, 198, 0.55) 90%, transparent 90%);
}
html[data-theme="dark"] .theme-fresh .title em,
html[data-theme="dark"] .theme-fresh .hero-title em,
.theme-fresh .mo-night .title em,
.theme-fresh .mo-photo-band .title em,
.theme-fresh .fr-panel .title em {
  color: var(--fr-mint);
  background: none;
}
/* every eyebrow is a chip: a coral dot and the label on a teal tint */
.theme-fresh .mo-eyebrow {
  gap: 8px;
  padding: 7px 14px 7px 12px;
  border-radius: 999px;
  background: var(--mo-tonal);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--mo-primary);
}
.theme-fresh .mo-eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fr-coral);
}
.theme-fresh .mo-lead {
  font-size: 18px;
}
/* pills: teal for the main call, ink for the second, white and tonal for the rest */
.theme-fresh .mo-btn {
  min-height: 54px;
  padding: 15px 26px;
  border-radius: 999px;
  background: var(--fr-ink);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.theme-fresh .mo-btn:hover {
  background: #163E3F;
  color: #FFFFFF;
  box-shadow: 0 14px 30px rgba(14, 42, 43, 0.2);
}
.theme-fresh .mo-btn.is-coral {
  background: var(--mo-primary);
  color: var(--mo-on-primary);
}
.theme-fresh .mo-btn.is-coral:hover {
  background: var(--mo-primary-deep);
  color: var(--mo-on-primary);
  box-shadow: 0 14px 30px rgba(var(--mo-primary-rgb), 0.3);
}
.theme-fresh .mo-btn.is-light {
  background: var(--mo-surface);
  color: var(--mo-heading);
  box-shadow: inset 0 0 0 1px var(--mo-line);
}
.theme-fresh .mo-btn.is-light:hover {
  background: var(--mo-surface);
  color: var(--mo-heading);
  box-shadow: inset 0 0 0 1px var(--mo-line-strong), 0 14px 30px rgba(14, 42, 43, 0.12);
}
.theme-fresh .mo-btn.is-tonal {
  background: var(--mo-tonal);
  color: var(--mo-primary);
}
.theme-fresh .mo-btn.is-tonal:hover {
  background: var(--mo-primary);
  color: var(--mo-on-primary);
}
.theme-fresh .mo-btn.is-glass {
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
}
.theme-fresh .mo-btn.is-glass:hover {
  background: #FFFFFF;
  color: var(--fr-ink);
}
html[data-theme="dark"] .theme-fresh .mo-btn {
  background: #E9F6F2;
  color: #08201F;
}
html[data-theme="dark"] .theme-fresh .mo-btn.is-coral {
  background: var(--mo-primary);
  color: var(--mo-on-primary);
}
html[data-theme="dark"] .theme-fresh .mo-btn.is-light,
html[data-theme="dark"] .theme-fresh .mo-btn.is-tonal {
  background: var(--mo-surface-2);
  color: var(--mo-heading);
}
/*---- 23.3 Floating Pill Header ----*/
/* one white pill floating over the page: logo, menu, today's status, booking; it stays afloat when
   the page scrolls */
.fr-header {
  position: absolute;
  top: 18px;
  left: 0;
  right: 0;
  min-height: 0;
}
.fr-header .header-bar {
  background: transparent;
  box-shadow: none;
}
.fr-inner {
  gap: 20px;
  min-height: 76px;
  padding: 0 12px 0 26px;
  border-radius: 999px;
  background: var(--mo-surface);
  box-shadow: 0 0 0 1px var(--mo-line), 0 18px 50px rgba(14, 42, 43, 0.1);
}
.fr-logo img {
  height: 42px;
}
.fr-nav {
  margin: 0 auto;
}
.fr-header .mo-nav > ul > li > a {
  padding: 27px 12px;
  font-size: 15px;
  font-weight: 500;
}
.fr-header .mo-nav > ul > li > a > i {
  font-size: 11px;
}
.fr-status {
  display: none;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--mo-tonal);
  font-size: 13px;
}
@media (min-width: 1600px) {
  .fr-status {
    display: inline-flex;
  }
}
.fr-header .head-book {
  min-height: 52px;
}
.fr-header.is-scrolled .header-bar {
  top: 12px;
  background: transparent;
  box-shadow: none;
}
.fr-header.is-scrolled .header-inner {
  min-height: 68px;
}
.fr-header.is-scrolled .mo-nav > ul > li > a {
  padding-top: 23px;
  padding-bottom: 23px;
}
.fr-header.is-scrolled .mo-logo img {
  height: 38px;
}
/*---- 23.4 Fresh Hero ----*/
.fr-hero {
  padding: 0;
  background: var(--mo-bg);
}
.fr-hero .hero-frame {
  border-radius: 0 0 44px 44px;
  background: linear-gradient(180deg, var(--mo-bg-soft) 0%, var(--mo-bg) 100%);
}
.fr-hero .hero-slide {
  min-height: 900px;
  padding: 150px 0 130px;
}
/* the photograph takes the larger half, so the frame reads full rather than airy */
.fr-hero .hero-row {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 70px;
}
.fr-hero .hero-card {
  justify-self: stretch;
}
.fr-hero .hero-title {
  margin-bottom: 24px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--mo-heading);
}
.fr-hero .hero-lead {
  color: var(--mo-text);
}
.fr-hero .hero-controls-wrap {
  bottom: 64px;
}
.fr-hero .hero-controls {
  justify-content: flex-start;
}
.fr-hero .hero-controls .mo-round {
  background: var(--mo-surface);
  color: var(--mo-heading);
  box-shadow: var(--mo-shadow);
}
.fr-hero .hero-controls .mo-round:hover {
  background: var(--mo-primary);
  color: var(--mo-on-primary);
}
.fr-hero .hero-count {
  color: var(--mo-muted);
}
.fr-hero .hero-count b {
  color: var(--mo-heading);
}
.fr-hero .hero-progress {
  border-bottom-color: var(--mo-line-strong);
}
.fr-visual {
  position: relative;
  width: 100%;
}
.fr-photo {
  position: relative;
  display: block;
  padding-top: 78%;
  overflow: hidden;
  border-radius: 44px;
  box-shadow: var(--mo-shadow-lg);
}
.fr-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% center;
}
.fr-photo.is-portrait img {
  object-position: center 18%;
}
.fr-photo.is-smile img {
  object-position: 28% 45%;
}
/* status chips floating around the photograph */
.fr-chip {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px 12px 12px;
  border-radius: 999px;
  background: var(--mo-surface);
  box-shadow: var(--mo-shadow-lg);
  line-height: 1.25;
  animation: frBob 6s ease-in-out infinite;
}
.fr-chip b {
  display: block;
  font-family: var(--mo-ff-heading);
  font-size: 16px;
  color: var(--mo-heading);
}
.fr-chip small {
  font-size: 13px;
  color: var(--mo-muted);
}
.fr-chip.is-a {
  top: 70px;
  left: -76px;
}
.fr-chip.is-b {
  top: 46%;
  right: -48px;
  animation-delay: -2s;
}
.fr-chip.is-c {
  bottom: 54px;
  left: -44px;
  animation-delay: -4s;
}
.fr-chip .mo-status {
  margin: 0;
  padding: 6px 8px;
  font-size: 14px;
}
.fr-chip-ic {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 16px;
}
.fr-chip-ic.is-mint {
  background: var(--fr-mint-soft);
  color: var(--fr-teal);
}
.fr-chip-ic.is-sun {
  background: #FFF3D6;
  color: #D99A00;
}
.fr-chip-ic.is-coral {
  background: var(--fr-coral);
  color: #FFFFFF;
}
.fr-chip-ic b {
  font-size: 14px;
  color: #FFFFFF;
}
.fr-video .fr-play {
  width: 46px;
  height: 46px;
  font-size: 14px;
}
@keyframes frBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  .fr-chip {
    animation: none;
  }
}
/* the light texture between the bands: mint and coral light from opposite corners over a fine
   dot grid that fades toward the middle */
.fr-texture {
  position: relative;
  isolation: isolate;
  background-color: var(--mo-bg-soft);
}
.fr-texture::before,
.fr-texture::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.fr-texture::before {
  background: radial-gradient(circle at 92% 6%, rgba(127, 224, 198, 0.42) 0%, rgba(127, 224, 198, 0) 38%),
    radial-gradient(circle at 4% 96%, rgba(255, 122, 89, 0.13) 0%, rgba(255, 122, 89, 0) 34%);
}
.fr-texture::after {
  background: radial-gradient(rgba(var(--mo-primary-rgb), 0.2) 1.3px, transparent 1.7px) 0 0 / 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 46% 62% at 100% 0%, #000 0%, transparent 100%), radial-gradient(ellipse 40% 56% at 0% 100%, #000 0%, transparent 100%);
  mask-image: radial-gradient(ellipse 46% 62% at 100% 0%, #000 0%, transparent 100%), radial-gradient(ellipse 40% 56% at 0% 100%, #000 0%, transparent 100%);
}
html[data-theme="dark"] .fr-texture::before {
  opacity: 0.45;
}
/* a mint colour band after each photo band */
.fr-mintband {
  background-color: var(--mo-band);
}
/* photo bands on this page wash from teal-black to teal, the copy white */
.theme-fresh .mo-photo-band {
  background-color: var(--fr-ink);
}
.theme-fresh .band-img::after {
  background: linear-gradient(90deg, rgba(9, 38, 38, 0.96) 0%, rgba(11, 110, 105, 0.9) 50%, rgba(11, 110, 105, 0.55) 100%);
}
html[data-theme="dark"] .theme-fresh .band-img::after {
  background: linear-gradient(90deg, rgba(5, 18, 19, 0.97) 0%, rgba(8, 62, 59, 0.92) 50%, rgba(8, 62, 59, 0.62) 100%);
}
/* the results section is light: the caption takes the muted text colour */
.fr-results .ba-caption {
  color: var(--mo-muted);
}
.theme-fresh .mo-photo-band .mo-eyebrow {
  background: rgba(255, 255, 255, 0.14);
  color: var(--fr-mint);
}
/*---- 23.5 Numbers Bento ----*/
.fr-bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(220px, auto);
  gap: 22px;
}
.fr-stat {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px;
  border-radius: 28px;
  background: var(--mo-surface);
  box-shadow: var(--mo-shadow);
}
.fr-stat-num {
  margin-bottom: 14px;
  font-family: var(--mo-ff-heading);
  font-size: 88px;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--mo-heading);
}
.fr-stat-num small {
  font-size: 0.4em;
  letter-spacing: -0.01em;
}
.fr-stat b {
  font-family: var(--mo-ff-heading);
  font-size: 19px;
  color: var(--mo-heading);
}
.fr-stat > span:last-child {
  font-size: 15px;
  color: var(--mo-muted);
}
.fr-stat .mo-rating-stars {
  margin-bottom: 10px;
  font-size: 18px;
}
.fr-stat.is-teal {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  background: linear-gradient(150deg, #0B6E69 0%, #0E2A2B 100%);
}
.fr-stat.is-teal .fr-stat-num {
  font-size: 170px;
  color: #FFFFFF;
}
.fr-stat.is-teal b {
  font-size: 26px;
  color: #FFFFFF;
}
.fr-stat.is-teal > span:last-child {
  color: rgba(234, 247, 243, 0.82);
}
.fr-stat.is-mint {
  grid-column: 3 / 5;
  background: var(--fr-mint-soft);
}
.fr-stat.is-coral {
  background: var(--fr-coral-soft);
}
.fr-stat.is-coral .fr-stat-num {
  color: #E2593A;
}
.fr-stat.is-ink {
  grid-column: 1 / 5;
  flex-direction: row;
  align-items: center;
  gap: 30px;
  background: var(--fr-ink);
}
.fr-stat.is-ink .fr-stat-num {
  margin: 0;
  color: var(--fr-mint);
}
.fr-stat.is-ink b {
  font-size: 24px;
  color: #FFFFFF;
}
.fr-stat.is-ink > span:last-child {
  margin-left: auto;
  color: rgba(234, 247, 243, 0.8);
}
html[data-theme="dark"] .fr-stat.is-mint {
  background: #13302F;
}
html[data-theme="dark"] .fr-stat.is-coral {
  background: #3A2420;
}
html[data-theme="dark"] .fr-stat.is-ink {
  background: #061314;
}
/*---- 23.6 Care Bento ----*/
/* the four groups as a checkerboard: wide cards with a photograph, narrow ones in colour */
.fr-care {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 22px;
}
.fr-care-card {
  position: relative;
  display: flex;
  min-height: 440px;
  overflow: hidden;
  border-radius: 32px;
  background: var(--mo-bg-soft);
  transition: transform 0.45s var(--mo-ease), box-shadow 0.45s var(--mo-ease);
}
.fr-care-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--mo-shadow-lg);
}
.fr-care-card.is-exams {
  grid-column: span 7;
}
.fr-care-card.is-restorative {
  grid-column: span 5;
  background: var(--fr-mint-soft);
}
.fr-care-card.is-specialized {
  grid-column: span 5;
  background: var(--fr-ink);
}
.fr-care-card.is-cosmetic {
  grid-column: span 7;
  background: var(--fr-coral-soft);
}
.fr-care-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  padding: 40px;
}
.fr-care-card.is-exams .fr-care-body,
.fr-care-card.is-cosmetic .fr-care-body {
  max-width: 56%;
}
.fr-care-photo {
  position: absolute;
  top: 14px;
  right: 14px;
  bottom: 14px;
  width: 42%;
  overflow: hidden;
  border-radius: 24px;
}
.fr-care-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--mo-ease);
}
.fr-care-card:hover .fr-care-photo img {
  transform: scale(1.05);
}
.fr-care-illus {
  width: auto;
  height: 64px;
  margin-bottom: 18px;
}
.fr-care-card.is-specialized .fr-care-illus {
  height: 78px;
  padding: 10px;
  border-radius: 50%;
  background: #FFFFFF;
}
.fr-care-count {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mo-primary);
}
.fr-care-body h3 {
  margin: 6px 0 10px;
  font-size: 30px;
}
.fr-care-body p {
  margin-bottom: 22px;
  font-size: 15px;
  color: var(--mo-muted);
}
.fr-care-links {
  display: grid;
  width: 100%;
  margin-top: auto;
}
.fr-care-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(14, 42, 43, 0.1);
  font-size: 15px;
  font-weight: 600;
  color: var(--mo-heading);
}
.fr-care-links a i {
  font-size: 12px;
  color: var(--mo-primary);
  transition: transform 0.35s var(--mo-ease);
}
.fr-care-links a:hover i {
  transform: translateX(5px);
}
.fr-care-card.is-specialized h3,
.fr-care-card.is-specialized .fr-care-links a {
  color: #FFFFFF;
}
.fr-care-card.is-specialized p {
  color: rgba(234, 247, 243, 0.75);
}
.fr-care-card.is-specialized .fr-care-count,
.fr-care-card.is-specialized .fr-care-links a i {
  color: var(--fr-mint);
}
.fr-care-card.is-specialized .fr-care-links a {
  border-bottom-color: rgba(234, 247, 243, 0.12);
}
html[data-theme="dark"] .fr-care-card.is-restorative {
  background: #13302F;
}
html[data-theme="dark"] .fr-care-card.is-cosmetic {
  background: #3A2420;
}
html[data-theme="dark"] .fr-care-card.is-specialized {
  background: #061314;
}
html[data-theme="dark"] .fr-care-links a {
  border-bottom-color: rgba(233, 246, 242, 0.1);
}
/*---- 23.7 Booking ----*/
.fr-steps {
  display: grid;
  gap: 16px;
  margin-top: 30px;
}
.fr-steps li {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  border-radius: 22px;
  background: var(--mo-surface);
  box-shadow: var(--mo-shadow);
  color: var(--mo-text);
  line-height: 1.35;
}
.fr-step-num {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--mo-primary);
  color: var(--mo-on-primary);
  font-family: var(--mo-ff-heading);
  font-size: 18px;
  font-weight: 700;
}
.fr-steps b {
  display: block;
  font-family: var(--mo-ff-heading);
  font-size: 18px;
  color: var(--mo-heading);
}
.fr-steps small {
  font-size: 14px;
  color: var(--mo-muted);
}
/* the request in an app-style card */
.fr-app {
  padding: 30px;
  border: 1px solid var(--mo-line);
  border-radius: 32px;
  background: var(--mo-surface);
  box-shadow: var(--mo-shadow-lg);
  color: var(--mo-text);
}
.fr-app-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--mo-line);
  line-height: 1.3;
}
.fr-app-face {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
}
.fr-app-head > span > b {
  display: block;
  font-family: var(--mo-ff-heading);
  font-size: 21px;
  color: var(--mo-heading);
}
.fr-app-head > span > small {
  font-size: 14px;
  color: var(--mo-muted);
}
.fr-app-head .mo-status {
  margin-left: auto;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--mo-tonal);
  font-size: 13px;
}
.mo-photo-band .fr-app .mo-status {
  color: var(--mo-muted);
}
.mo-photo-band .fr-app .mo-status b {
  color: var(--mo-heading);
}
/*---- 23.8 Team Rail ----*/
.fr-member {
  height: 100%;
  overflow: hidden;
  border-radius: 28px;
  background: var(--mo-surface);
  box-shadow: var(--mo-shadow);
}
.fr-member-photo {
  position: relative;
  display: block;
  padding-top: 112%;
  overflow: hidden;
  background: var(--mo-bg-soft);
}
.fr-member-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.9s var(--mo-ease);
}
.fr-member:hover .fr-member-photo img {
  transform: scale(1.05);
}
.fr-member-body {
  padding: 24px 26px 28px;
}
.fr-member-role {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mo-primary);
}
.fr-member-body h3 {
  margin-bottom: 8px;
  font-size: 26px;
}
.fr-member-body p {
  margin: 0;
  font-size: 15px;
  color: var(--mo-muted);
}
.fr-team-wrap .quote-nav {
  margin-top: 30px;
}
/*---- 23.9 Results, Reviews And Panel ----*/
.fr-ba .ba {
  overflow: hidden;
  border-radius: 32px;
}
.fr-score {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  height: 100%;
  padding: 40px;
  border-radius: 32px;
  background: linear-gradient(150deg, #0B6E69 0%, #0E2A2B 100%);
  color: #FFFFFF;
}
.fr-score .mo-eyebrow {
  background: rgba(255, 255, 255, 0.14);
  color: var(--fr-mint);
}
.fr-score-num {
  margin-top: auto;
  font-family: var(--mo-ff-heading);
  font-size: 128px;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
}
.fr-score .mo-rating-stars {
  font-size: 22px;
}
.fr-score p {
  margin: 0 0 14px;
  color: rgba(234, 247, 243, 0.82);
}
.fr-reviews-title {
  margin-bottom: 34px;
}
.theme-fresh .review-card {
  border-radius: 24px;
}
/* the closing panel: a teal gradient, drifting mint light, the mascot and today's status */
.fr-panel {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
  padding: 80px 84px;
  overflow: hidden;
  border-radius: 44px;
  background: linear-gradient(135deg, #0B6E69 0%, #0E2A2B 100%);
}
.fr-panel-img {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.fr-panel-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.fr-panel-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(9, 38, 38, 0.95) 0%, rgba(11, 110, 105, 0.86) 55%, rgba(11, 110, 105, 0.5) 100%);
}
html[data-theme="dark"] .fr-panel-img::after {
  background: linear-gradient(90deg, rgba(5, 18, 19, 0.96) 0%, rgba(8, 62, 59, 0.9) 55%, rgba(8, 62, 59, 0.6) 100%);
}
.fr-panel .mo-gl {
  z-index: -1;
}
.fr-panel .title {
  color: #FFFFFF;
}
.fr-panel .mo-eyebrow {
  background: rgba(255, 255, 255, 0.14);
  color: var(--fr-mint);
}
.fr-panel .mo-lead {
  max-width: 620px;
  color: rgba(234, 247, 243, 0.84);
}
.fr-panel .mo-actions {
  margin-top: 30px;
}
.fr-panel-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.fr-panel-mascot {
  width: 170px;
  height: auto;
  animation: moBob 5s ease-in-out infinite;
}
.fr-panel .mo-status {
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
}
.fr-panel .mo-status b {
  color: #FFFFFF;
}
/*---- 23.10 Light Footer ----*/
.fr-footer {
  padding: 30px 0 0;
  background: var(--mo-bg-soft);
}
.fr-foot-card {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 44px;
  padding: 60px;
  border-radius: 40px;
  background: var(--mo-surface);
  box-shadow: var(--mo-shadow);
}
.fr-foot-logo img {
  width: auto;
  height: 46px;
}
.fr-foot-logo .logo-light {
  display: none;
}
html[data-theme="dark"] .fr-foot-logo .logo-dark {
  display: none;
}
html[data-theme="dark"] .fr-foot-logo .logo-light {
  display: block;
}
.fr-foot-brand p {
  max-width: 340px;
  margin: 22px 0;
}
.fr-foot-status {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--mo-tonal);
  font-size: 13px;
}
.fr-foot-h {
  margin-bottom: 18px;
  font-size: 19px;
}
.fr-foot-list {
  display: grid;
  gap: 10px;
}
.fr-foot-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--mo-text);
  transition: color 0.3s var(--mo-ease);
}
.fr-foot-list a:hover {
  color: var(--mo-primary);
}
.fr-foot-list a i {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--mo-tonal);
  color: var(--mo-primary);
  font-size: 13px;
}
.fr-footer .hours-list {
  margin-top: 18px;
}
/* the foot: a dark strip rising behind the card's lower edge, the bridge's lights across it and
   the copyright line under its deck */
.fr-foot-card {
  position: relative;
  z-index: 1;
}
.fr-foot-strip {
  position: relative;
  isolation: isolate;
  margin-top: -110px;
  padding-top: 330px;
  overflow: hidden;
  border-radius: 44px 44px 0 0;
  background: linear-gradient(180deg, #0B3A39 0%, var(--fr-ink) 70%);
}
html[data-theme="dark"] .fr-foot-strip {
  background: linear-gradient(180deg, #0B2627 0%, #061314 70%);
}
.fr-foot-strip .mo-gl {
  z-index: -1;
}
.fr-foot-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 8px 30px;
  font-size: 14px;
  color: rgba(234, 247, 243, 0.62);
}
.fr-foot-bottom p {
  margin: 0;
}
.fr-foot-legal {
  display: flex;
  gap: 22px;
}
.fr-foot-legal a,
.fr-foot-bottom p a {
  color: rgba(234, 247, 243, 0.86);
}
.fr-foot-legal a:hover,
.fr-foot-bottom p a:hover {
  color: var(--fr-mint);
}

/*======================
24. Ask AI
========================*/
/* every page ends with one ready question, opened in the assistant the visitor uses: the
   question sits in a night prompt card on a photo ground, the assistants in one quiet row
   of glass buttons that share one icon colour */
.mo-askai {
  background-color: var(--mo-sky-soft);
}
/* the footer's trust strip rises 64px into this section's foot: the same room again keeps the
   space under the panel equal to the space over the title */
.mo-askai::after {
  content: "";
  display: block;
  height: 64px;
}
.askai-inner {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 70px;
  align-items: center;
}
.askai-copy .title .mo-line {
  display: block;
}
.askai-copy p {
  max-width: 440px;
  margin: 0;
}
.askai-panel {
  position: relative;
  overflow: hidden;
  padding: 38px;
  border-radius: var(--mo-radius-lg);
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(var(--mo-sky-rgb), 0.26) 0%, rgba(var(--mo-sky-rgb), 0) 62%),
    radial-gradient(60% 80% at 0% 100%, rgba(var(--mo-coral-rgb), 0.16) 0%, rgba(var(--mo-coral-rgb), 0) 62%),
    var(--mo-night);
  box-shadow: 0 40px 80px rgba(14, 29, 68, 0.26);
}
html[data-theme="dark"] .askai-panel {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 80px rgba(0, 0, 0, 0.4);
}
.askai-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mo-on-night);
}
.askai-label i {
  font-size: 15px;
  color: var(--mo-coral-bright);
}
.askai-label.is-open {
  margin: 28px 0 14px;
}
.askai-bar {
  margin: 0;
  padding: 22px 26px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  font-family: var(--mo-ff-heading);
  font-size: 24px;
  line-height: 1.4;
  color: #FFFFFF;
}
.askai-caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-inline-start: 6px;
  vertical-align: -0.16em;
  background: var(--mo-coral-bright);
  animation: moCaret 1.1s steps(1) infinite;
}
@keyframes moCaret {
  50% { opacity: 0; }
}
.askai-tiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.askai-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
  transition: background 0.35s var(--mo-ease), border-color 0.35s var(--mo-ease), color 0.35s var(--mo-ease), transform 0.35s var(--mo-ease);
}
.askai-tile i {
  font-size: 17px;
  color: var(--mo-sky);
  transition: color 0.35s var(--mo-ease);
}
.askai-tile:hover {
  border-color: #FFFFFF;
  background: #FFFFFF;
  color: var(--mo-navy);
  transform: translateY(-3px);
}
.askai-tile:hover i {
  color: var(--mo-coral);
}
@media (prefers-reduced-motion: reduce) {
  .askai-caret {
    animation: none;
  }
}

/*======================
25. Footer
========================*/
/* not clipped: the trust strip rises out of its top edge */
.mo-footer {
  position: relative;
  isolation: isolate;
  font-size: 16px;
}
/* the harbour lights run along the foot of the columns in a band of their own, the deck on the
   copyright line, never under the copyright text */
.footer-main .mo-gl {
  top: auto;
  bottom: 0;
  z-index: 0;
  height: 400px;
}
.footer-main > .container {
  position: relative;
  z-index: 1;
}
/* room under the columns for the harbour lights to span */
.footer-main {
  position: relative;
  z-index: 1;
  padding: 80px 0 170px;
}
.footer-logo img {
  width: 190px;
  height: auto;
  margin-bottom: 24px;
}
.footer-about p {
  max-width: 340px;
  margin-bottom: 22px;
}
.footer-google {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  padding: 12px 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 14px;
  line-height: 1.45;
}
.footer-google i {
  font-size: 26px;
}
.footer-google b {
  display: block;
  font-size: 15px;
}
.widget-title {
  margin-bottom: 22px;
  font-size: 22px;
}
.footer-links li + li {
  margin-top: 10px;
}
.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--mo-on-night) !important;
  transition: color 0.3s var(--mo-ease), transform 0.3s var(--mo-ease);
}
.footer-links a:hover {
  color: #FFFFFF !important;
  transform: translateX(4px);
}
/* each link's mark, in sky */
.footer-links a > i {
  flex: 0 0 auto;
  width: 22px;
  font-size: 17px;
  color: var(--mo-sky);
  transition: color 0.3s var(--mo-ease);
}
.footer-links a:hover > i {
  color: var(--mo-coral-bright);
}
.footer-contact li {
  display: flex;
  gap: 14px;
  align-items: baseline;
}
.footer-contact li + li {
  margin-top: 12px;
}
.footer-contact i {
  width: 16px;
  color: var(--mo-coral-bright);
}
.footer-status {
  margin: 22px 0 12px;
}
.footer-status b {
  color: #FFFFFF;
}
.hours-list li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 7px 0;
  border-bottom: 1px solid var(--mo-line);
  font-size: 15px;
}
.hours-list li:last-child {
  border-bottom: 0;
}
.hours-list b {
  font-weight: 700;
  color: var(--mo-heading);
}
.hours-list li.is-today {
  color: var(--mo-primary);
}
.hours-list li.is-today b {
  color: var(--mo-primary);
}
.hours-list.is-night li {
  border-color: var(--mo-line-night);
}
.hours-list.is-night b {
  color: #FFFFFF;
}
.hours-list.is-night li.is-today,
.hours-list.is-night li.is-today b {
  color: var(--mo-coral-bright);
}
.footer-bottom {
  position: relative;
  z-index: 1;
  padding: 24px 0;
  border-top: 1px solid var(--mo-line-night);
  font-size: 14px;
}
.bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.bottom-inner p {
  margin: 0;
}
.footer-legal {
  display: flex;
  gap: 24px;
}

/*======================
26. Mobile Bar, Back To Top, Video Modal, WebGL
========================*/
/*---- 26.1 Mobile Action Bar ----*/
.mo-mobile-bar {
  display: none;
}
/*---- 26.2 Back To Top ----*/
/* back to top: a tooth with a rising arrow, ringed in coral as far as the page has been read */
.mo-back-to-top {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: conic-gradient(var(--mo-coral-bright) calc(var(--btt, 0) * 1%), rgba(var(--mo-primary-rgb), 0.16) 0);
  box-shadow: 0 14px 34px rgba(20, 40, 92, 0.22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.4s var(--mo-ease), transform 0.4s var(--mo-ease), visibility 0.4s;
}
.btt-face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--mo-surface);
  font-size: 26px;
  color: var(--mo-primary);
  transition: background-color 0.3s var(--mo-ease), color 0.3s var(--mo-ease);
}
.btt-face i {
  transition: transform 0.35s var(--mo-ease);
}
.mo-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mo-back-to-top:hover .btt-face {
  background: var(--mo-primary);
  color: #FFFFFF;
}
.mo-back-to-top:hover .btt-face i {
  transform: translateY(-3px);
}
/*---- 26.3 Video Modal ----*/
.mo-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 17, 41, 0.88);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--mo-ease), visibility 0.35s;
}
.mo-modal.is-open {
  opacity: 1;
  visibility: visible;
}
.mo-modal-box {
  position: relative;
  width: min(1000px, 100%);
}
.mo-modal-frame {
  position: relative;
  padding-top: 56.25%;
  overflow: hidden;
  border-radius: var(--mo-radius-card);
  background: #000000;
}
.mo-modal-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.mo-modal-close {
  position: absolute;
  right: 0;
  top: -62px;
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
}
.mo-modal-cap {
  margin: 14px 0 0;
  color: rgba(234, 242, 251, 0.8);
}
.mo-modal-cap b {
  color: #FFFFFF;
}
/* a round play button on photographs */
.mo-play {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border: 0;
  border-radius: 50%;
  background: var(--mo-coral);
  color: #FFFFFF;
  font-size: 22px;
  cursor: pointer;
  transition: transform 0.4s var(--mo-ease), background-color 0.3s var(--mo-ease);
}
.mo-play i {
  margin-left: 4px;
}
.mo-play::before,
.mo-play::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(var(--mo-coral-rgb), 0.6);
  animation: moRing 2.4s infinite var(--mo-ease);
}
.mo-play::after {
  animation-delay: 1.2s;
}
.mo-play:hover {
  transform: scale(1.08);
  background: var(--mo-coral-hover);
  color: #FFFFFF;
}
@keyframes moRing {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.65); opacity: 0; }
}
/*---- 26.4 WebGL Layer ----*/
/* every WebGL texture sits in its holder like a background; the page reads the same without it */
.mo-gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}