/**
 * Client-Specific Theming & Customizations
 *
 * This file contains CSS variables for easy color/theme customization
 * and any client-specific CSS overrides.
 *
 * USAGE:
 * 1. Update the CSS variables below to match your client's brand colors
 * 2. Add any additional client-specific CSS at the bottom of this file
 * 3. Do not modify bootstrap.css, platforma.css, or clue.css directly
 */


/* ========================================================================
   CSS VARIABLES - CUSTOMIZE THESE FOR EACH CLIENT
   ======================================================================== */

/* Modern Essence Dentistry brand font (matches legacy clue.css usage of Muli) */
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;600;700&display=swap');

:root {
  /* ===== PRIMARY BRAND COLORS (Modern Essence Dentistry) =====
     Sampled directly from the practice logo (src/img/logo.svg):
       #04518e — medium brand blue (headings, links, primary buttons)
       #28336f — deep indigo from the logo mark (dark sections, secondary)
       #87cff3 — light sky-blue script accent (highlights)
  */
  --primary-color: #04518e;              /* Main brand color (logo medium blue) */
  --primary-color-dark: #033a66;         /* Darker shade for hover states */
  --primary-color-light: #6f8fc0;        /* Lighter tint for accents */
  --primary-color-bright: #2a72b8;       /* Brighter shade for button hover */

  /* Override Bootstrap's primary color to match Modern Essence brand */
  --bs-primary: #04518e;
  --bs-primary-rgb: 4, 81, 142;


  /* ===== SECONDARY COLORS ===== */
  --secondary-color: #28336f;            /* Deep indigo from logo mark */
  --accent-color: #87cff3;               /* Light sky-blue accent from logo script */


  /* ===== UI ELEMENT COLORS ===== */
  --link-color: var(--primary-color);
  --link-hover-color: var(--primary-color-dark);
  --button-color: var(--primary-color);
  --button-hover-color: var(--primary-color-dark);


  /* ===== BACKGROUND COLORS ===== */
  --bg-primary: var(--primary-color);
  --bg-secondary: #faf7f7;               /* Warm off-white from legacy */
  --bg-light: #f8f9fa;
  --hero-bg-color: #e7ecf9;              /* Homepage hero section background */
  --sidebar-bg: rgba(35, 43, 89, 0.94);  /* Navy sidebar matching brand */


  /* ===== TEXT COLORS ===== */
  --text-primary: #212529;               /* Main body text */
  --text-secondary: #6c757d;             /* Secondary/muted text */
  --text-light: #6c757d;                 /* Light gray text */
  --text-white: #ffffff;                 /* White text */


  /* ===== TYPOGRAPHY (Mulish — matches legacy "Muli") ===== */
  /* --font-script is set by the layout, and only for a language whose
     registry entry names a fontFamily (Arabic and Hebrew want a face that
     actually has the glyphs). When no language asks for one the custom
     property is undefined and each var() falls back to its first family
     ('Mulish' here, system-ui below), so these stacks resolve exactly as
     they always have. */
  --font-family-base: var(--font-script, 'Mulish'), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                      "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-family-headings: var(--font-script, 'Mulish'), sans-serif;

  /* The stack the page actually renders with.
     Bootstrap sets --bs-body-font-family from its own --bs-font-sans-serif,
     and body/headings read that, not --font-family-base above. So the script
     font has to be spliced in here too or it would never reach the page.
     The fallback is Bootstrap's --bs-font-sans-serif value verbatim, so with
     no --font-script defined this resolves to exactly what Bootstrap already
     computed and nothing about an English page changes. client.css is loaded
     after bootstrap-5.3.3.css, so this :root wins on source order.
     Re-copy the tail from Bootstrap's --bs-font-sans-serif on an upgrade. */
  --bs-body-font-family: var(--font-script, system-ui), -apple-system,
                         "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans",
                         "Liberation Sans", Arial, sans-serif,
                         "Apple Color Emoji", "Segoe UI Emoji",
                         "Segoe UI Symbol", "Noto Color Emoji";
  --font-size-base: 1rem;
  --line-height-base: 1.5;

  /* Heading font weights */
  --heading-font-weight: 300;            /* Light weight for h1-h4 */


  /* ===== SPACING ===== */
  --section-padding: 4rem;               /* Vertical padding for major sections */
  --section-padding-mobile: 2rem;        /* Vertical padding on mobile */


  /* ===== BORDER RADIUS ===== */
  --border-radius-sm: 0.25rem;
  --border-radius: 0.375rem;
  --border-radius-lg: 0.5rem;
  --border-radius-pill: 30px;            /* For rounded buttons */


  /* ===== SHADOWS ===== */
  --box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
}


/* ========================================================================
   DARK MODE SUPPORT (OPTIONAL)
   Uncomment this section if you want to support dark mode
   ======================================================================== */

/*
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-light: #3d3d3d;
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
  }
}
*/


/* ========================================================================
   CLIENT-SPECIFIC CSS OVERRIDES
   Add any additional custom CSS below this line
   ======================================================================== */

/* Example: Override specific element styling
.custom-header {
  background-color: var(--primary-color);
  color: var(--text-white);
}
*/

/* Example: Client-specific font import
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
:root {
  --font-family-base: 'Roboto', sans-serif;
}
*/

/* Example: Custom button style
.btn-custom {
  background-color: var(--accent-color);
  color: white;
  border-radius: var(--border-radius-pill);
  padding: 0.75rem 2rem;
}
*/


/* ========================================================================
   USAGE EXAMPLES & NOTES
   ======================================================================== */

/*
HOW TO USE CSS VARIABLES:

1. In your HTML or other CSS:
   background-color: var(--primary-color);
   color: var(--text-primary);

2. To change colors for a specific client:
   - Simply update the hex values in the :root section above
   - All instances throughout the site will update automatically

3. Common customizations by client:
   - --primary-color: Your client's main brand color
   - --sidebar-bg: Match the sidebar to their branding
   - --hero-bg-color: Customize homepage hero section
   - --font-family-base: Use client's preferred font

4. Advanced: Override Bootstrap classes:
   .btn-primary {
     background-color: var(--primary-color);
     border-color: var(--primary-color);
   }

BEST PRACTICES:
- Always use variables instead of hardcoded colors
- Test changes across multiple pages before deploying
- Keep client-specific overrides in this file
- Document any custom CSS you add below
*/

/* ============================================================
   HUB LANDING HERO (slideshow) — implants, ortho, perio, kids
   Full-width banner with a crossfading background slideshow,
   dark overlay, and centered heading. Mirrors the old-site
   index-page hero style. Respects prefers-reduced-motion.
   ============================================================ */
.hub-hero {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background-color: var(--primary-color-dark, #28336f);
}
.hub-hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: hubHeroFade 18s infinite;
}
.hub-hero__slide:nth-child(1) { animation-delay: 0s; }
.hub-hero__slide:nth-child(2) { animation-delay: 6s; }
.hub-hero__slide:nth-child(3) { animation-delay: 12s; }
@keyframes hubHeroFade {
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  30%  { opacity: 1; }
  38%  { opacity: 0; }
  100% { opacity: 0; }
}
.hub-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.6));
}
.hub-hero__content {
  position: relative;
  z-index: 2;
  color: #fff;
  padding: 3.5rem 1rem;
}
.hub-hero__content h1 {
  color: #fff;
  margin-bottom: 0;
}
.hub-hero__sub {
  font-size: 1.15rem;
  max-width: 42rem;
  margin: 0.85rem auto 0;
  opacity: 0.95;
}
@media (max-width: 767px) {
  .hub-hero { min-height: 240px; }
  .hub-hero__content { padding: 2.5rem 1rem; }
  .hub-hero__sub { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hub-hero__slide { animation: none; opacity: 1; }
  .hub-hero__slide:not(:first-child) { display: none; }
}

/* Hub option cards — link grid to child/related pages */
.hub-card {
  display: block;
  height: 100%;
  padding: 1.5rem;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hub-card:hover,
.hub-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
  color: inherit;
}
.hub-card__icon {
  font-size: 2.25rem;
  color: var(--primary-color, #04518e);
  margin-bottom: 0.75rem;
  display: block;
}
.hub-card h3 {
  font-size: 1.15rem;
  margin-bottom: 0.4rem;
}
.hub-card p {
  margin-bottom: 0;
  color: #555;
  font-size: 0.95rem;
}

/* ============================================================
   NEW PATIENT SPECIALS BANNER
   Adapted from the Regency template banner, re-tuned to the
   Modern Essence logo palette (indigo / medium blue / sky).
   ============================================================ */
.hp-section-offers {
  background: linear-gradient(180deg, #f3f9fd 0%, #e6f2fb 100%);
  padding: 4rem 0 3.5rem;
}
.hp-section-offers .hp-offers-intro { max-width: 640px; margin-left: auto; margin-right: auto; }
.hp-section-offers .hp-section-sub { margin-bottom: 0; }
.hp-offers-grid { margin-bottom: 2.5rem; }

.hp-offer-card {
  position: relative;
  height: 100%;
  padding: 2.5rem 1.75rem 1.5rem;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(4, 81, 142, 0.16);
  box-shadow: 0 6px 18px rgba(40, 51, 111, 0.08);
  text-align: center;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
}
.hp-offer-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(40, 51, 111, 0.15);
}
.hp-offer-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: var(--primary-color);
}
.hp-offer-card--accent::before { background: var(--accent-color); }

.hp-offer-ribbon {
  display: inline-block;
  background: var(--primary-color);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.32rem 0.85rem;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}
.hp-offer-ribbon--accent { background: var(--accent-color); color: var(--secondary-color); }

.hp-offer-amount {
  color: var(--secondary-color);
  line-height: 1;
  margin-bottom: 1rem;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.1rem;
}
.hp-offer-currency { font-size: 1.7rem; font-weight: 600; transform: translateY(-0.35em); }
.hp-offer-price { font-size: 4rem; font-weight: 700; letter-spacing: -0.02em; }
.hp-offer-suffix { font-size: 1.4rem; font-weight: 600; margin-left: 0.25rem; text-transform: uppercase; letter-spacing: 0.05em; }
/* 768-991px: three offer cards share a narrow row, and the price, currency
   and suffix on one line overflow the card (English by a little, longer
   translated suffixes such as Filipino "na halaga" by more). In that band
   only, the suffix takes its own centred line under the amount. Every other
   width is unchanged. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .hp-offer-amount { flex-wrap: wrap; }
  .hp-offer-suffix { flex-basis: 100%; margin-left: 0; margin-top: 0.35rem; text-align: center; }
}

.hp-offer-icon { font-size: 3.4rem; color: var(--primary-color); margin-bottom: 0.6rem; line-height: 1; }
.hp-offer-title { font-weight: 600; font-size: 1.2rem; color: var(--text-primary); margin-bottom: 0.75rem; }
.hp-offer-desc { color: #51607a; font-size: 0.95rem; line-height: 1.5; margin-bottom: 1rem; flex-grow: 1; }
.hp-offer-value { color: var(--primary-color-dark); font-size: 0.9rem; margin-bottom: 0.3rem; letter-spacing: 0.04em; }
.hp-offer-footnote { font-size: 0.75rem; color: rgba(81, 96, 122, 0.7); margin: 0; }

/* Offer cards that carry their own action (English homepage, 2026-10): an
   icon stands in for the amount, the note is full-contrast body text, and
   the button sits at the foot of every card so the three line up. The grid
   modifier drops the gap the old call bar and fine print needed below. */
.hp-offer-note { color: #51607a; font-size: 0.85rem; line-height: 1.5; margin-bottom: 1.25rem; }
.hp-offer-cta { align-self: center; margin-top: auto; border-radius: 999px; font-weight: 600; padding: 0.6rem 1.4rem; white-space: normal; }
.hp-offers-grid--cta { margin-bottom: 0; }
.hp-offers-grid--cta .hp-offer-desc { flex-grow: 0; }

/* A homepage section image whose file is not 4:3, shown at the 4:3 of its
   neighbours. */
.hp-media-frame--4x3 img { aspect-ratio: 4 / 3; object-fit: cover; }

.hp-offers-call { padding: 1.25rem 1rem 0; border-top: 1px solid rgba(40, 51, 111, 0.12); }
.hp-offers-call-prompt { font-size: 1.1rem; color: var(--text-primary); margin-bottom: 0.85rem; }
.hp-offers-call-btn { padding: 0.75rem 2rem; font-weight: 600; letter-spacing: 0.02em; }

.hp-offers-terms { margin-top: 2rem; color: rgba(81, 96, 122, 0.72); max-width: 880px; margin-left: auto; margin-right: auto; text-align: center; }
.hp-offers-terms .small { font-size: 0.74rem; line-height: 1.45; }

@media (max-width: 767.98px) {
  .hp-offer-card { padding: 2rem 1.25rem 1.25rem; }
  .hp-offer-price { font-size: 3.4rem; }
}

/* Responsive 16:9 video embed (homepage "Why Choose Us" YouTube) */
.hp-video-embed {
  position: relative;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 34px rgba(40, 51, 111, 0.18);
}
.hp-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Instagram feed section spacing */
.hp-instagram-feed { margin-top: 2rem; }
.hp-instagram-feed .juicer-feed { margin: 0 auto; }

/* ============================================================
   HOMEPAGE HERO — two-column overlay (Modern Essence)
   Left editorial column (AI search + CTAs) · right 2x2 service
   cards, over the existing background video. Logo palette.
   ============================================================ */
/* Re-tune the shared video overlay to the logo palette (indigo -> blue) */
body.homepage {
  --hero-overlay-corner-1: rgba(40, 51, 111, 0.90);   /* indigo #28336f, top-left */
  --hero-overlay-corner-2: rgba(4, 81, 142, 0.82);    /* blue #04518e, bottom-right */
  --hero-overlay-tint: rgba(14, 17, 34, 0.44);        /* deep navy tint for legibility */
}

#homepage-cover .me-hero-grid {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 4.5rem 1.25rem 4rem;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
  color: #fff;
}
#homepage-cover .me-hero-left { max-width: 620px; }

#homepage-cover .me-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-color);
  margin-bottom: 1.25rem;
}
#homepage-cover .me-hero-eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--accent-color);
  opacity: 0.85;
}
#homepage-cover .me-hero-grid h1 {
  font-weight: 300;
  font-size: clamp(2.3rem, 5vw, 4rem);
  line-height: 1.08;
  margin: 0 0 1.25rem;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
#homepage-cover .me-hero-grid h1 em { font-style: italic; color: var(--accent-color); }
#homepage-cover .me-hero-tagline {
  font-weight: 300;
  font-size: 1.08rem;
  line-height: 1.6;
  max-width: 52ch;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 1.5rem;
  padding: 0;
}
/* reuse the shared search pill, repositioned to the left */
#homepage-cover .me-hero-left .hero-search-wrapper { margin: 0 0 1.4rem; max-width: 460px; }

/* Hero buttons: solid sky primary + white ghost */
#homepage-cover .me-hero-buttons { display: flex; flex-wrap: wrap; gap: 0.6rem; }
#homepage-cover .me-hero-buttons .btn { border-radius: 999px; font-weight: 600; padding: 0.72rem 1.5rem; }
#homepage-cover .me-hero-btn-primary { background: var(--accent-color); border: 1.5px solid var(--accent-color); color: var(--secondary-color); }
#homepage-cover .me-hero-btn-primary:hover,
#homepage-cover .me-hero-btn-primary:focus-visible { background: #a9dcf7; border-color: #a9dcf7; color: var(--secondary-color); }
#homepage-cover .me-hero-btn-ghost { background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.6); color: #fff; }
#homepage-cover .me-hero-btn-ghost:hover,
#homepage-cover .me-hero-btn-ghost:focus-visible { background: rgba(255, 255, 255, 0.14); border-color: #fff; color: #fff; }

/* Right column: 2x2 frosted-glass service cards */
#homepage-cover .me-hero-services {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
#homepage-cover .me-hero-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  padding: 1.35rem 1.25rem;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
#homepage-cover .me-hero-card:hover,
#homepage-cover .me-hero-card:focus-visible {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--accent-color);
}
#homepage-cover .me-hero-card i { font-size: 2rem; color: var(--accent-color); line-height: 1; margin-bottom: 0.1rem; }
#homepage-cover .me-hero-card-title { font-size: 1.02rem; font-weight: 600; }
#homepage-cover .me-hero-card-sub { font-size: 0.82rem; color: rgba(255, 255, 255, 0.8); }

/* Responsive */
@media (max-width: 991.98px) {
  #homepage-cover .me-hero-grid { grid-template-columns: 1fr; gap: 2rem; padding: 3.5rem 1.25rem 3rem; }
  #homepage-cover .me-hero-services { max-width: 540px; }
}
@media (max-width: 575.98px) {
  #homepage-cover .me-hero-card { padding: 1rem 0.9rem; }
  #homepage-cover .me-hero-card i { font-size: 1.7rem; }
}

/* ============================================================
   Office gallery — two-column masonry (office-gallery.njk)
   Natural-height images alternate with 2:1 cropped frames to
   create the staggered look, recreating the old site's layout.
   ============================================================ */
.office-gallery-item {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(4, 81, 142, 0.10);
}
.office-gallery-item img { display: block; width: 100%; }
.office-gallery-crop { aspect-ratio: 2 / 1; }
.office-gallery-crop img { width: 100%; height: 100%; object-fit: cover; }

/* Homepage "Meet Our Doctors & Team" — square, consistent card images
   (the doctor collage and the team photo), overriding the default 5:4. */
#hp-meet .hp-people-img { aspect-ratio: 1 / 1; }

/* Footer brand logo (inverted white SVG on the dark footer) */
.footer-logo { max-width: 100%; height: auto; }


/* ============================================================
   ELEVATED SERVICE PAGES  (scoped to .me-lux)
   A premium, on-brand (indigo / blue / sky) layer applied ONLY
   to the five flagship pages: implants, periodontics,
   kids-dentistry, orthodontics, and anti-aging-dentistry.
   It overrides the shared .hub-hero / .treatment-band /
   .hub-card components for these pages only, so every other
   treatment page is left exactly as it was. Wrap the page
   content in <div class="me-lux"> to opt in.
   ============================================================ */

/* ---------- Elevated hero ---------- */
.me-lux .hub-hero { min-height: 470px; }
@media (max-width: 767.98px) { .me-lux .hub-hero { min-height: 380px; } }

.me-lux .hub-hero__overlay {
  background:
    linear-gradient(120deg, rgba(40, 51, 111, 0.90) 0%, rgba(4, 81, 142, 0.64) 55%, rgba(4, 81, 142, 0.30) 100%),
    linear-gradient(180deg, rgba(14, 17, 34, 0.05) 0%, rgba(14, 17, 34, 0.55) 100%);
}
.me-lux .hub-hero__content { padding-top: 4rem; padding-bottom: 4.5rem; }
.me-lux .hub-hero__content h1 {
  font-weight: 300;
  font-size: clamp(2.2rem, 4.6vw, 3.5rem);
  line-height: 1.08;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.32);
}
.me-lux .hub-hero__sub {
  font-size: 1.18rem;
  max-width: 45rem;
  color: rgba(255, 255, 255, 0.94);
}

/* hero eyebrow — small caps with flanking sky rules */
.me-lux .me-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-color);
  margin-bottom: 1.1rem;
}
.me-lux .me-hero-eyebrow::before,
.me-lux .me-hero-eyebrow::after {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: 0.8;
}

/* hero action buttons */
.me-lux .me-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: center;
  margin-top: 1.7rem;
}
.me-lux .me-hero-actions .btn {
  border-radius: 999px;
  font-weight: 600;
  padding: 0.72rem 1.65rem;
  letter-spacing: 0.01em;
}
.me-lux .me-hero-btn-primary {
  background: var(--accent-color);
  border: 1.5px solid var(--accent-color);
  color: var(--secondary-color);
}
.me-lux .me-hero-btn-primary:hover,
.me-lux .me-hero-btn-primary:focus-visible {
  background: #a9dcf7;
  border-color: #a9dcf7;
  color: var(--secondary-color);
}
.me-lux .me-hero-btn-ghost {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.65);
  color: #fff;
}
.me-lux .me-hero-btn-ghost:hover,
.me-lux .me-hero-btn-ghost:focus-visible {
  background: rgba(255, 255, 255, 0.15);
  border-color: #fff;
  color: #fff;
}

/* hero scroll cue */
.me-lux .me-hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.4rem;
  z-index: 2;
  animation: meScrollBounce 2s ease-in-out infinite;
}
@keyframes meScrollBounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 7px); }
}

/* ---------- Editorial split hero (anti-aging) ---------- */
.me-lux .me-split-hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  min-height: 470px;
}
.me-lux .me-split-hero__text {
  background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3.5rem clamp(1.5rem, 4vw, 4rem);
}
.me-lux .me-split-hero__text h1 {
  color: #fff;
  font-weight: 300;
  font-size: clamp(2.1rem, 4vw, 3.3rem);
  line-height: 1.08;
  margin: 0 0 1rem;
}
.me-lux .me-split-hero__sub {
  font-size: 1.12rem;
  color: rgba(255, 255, 255, 0.92);
  max-width: 34rem;
  margin: 0;
}
.me-lux .me-split-hero__text .me-hero-eyebrow { margin-bottom: 0.9rem; }
.me-lux .me-split-hero__text .me-hero-actions { justify-content: flex-start; margin-top: 1.6rem; }
.me-lux .me-split-hero__media { position: relative; min-height: 320px; }
.me-lux .me-split-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 767.98px) {
  .me-lux .me-split-hero { grid-template-columns: 1fr; }
  .me-lux .me-split-hero__media { min-height: 300px; order: -1; }
}

/* ---------- Section eyebrow ---------- */
.me-lux .me-eyebrow {
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--primary-color);
  margin-bottom: 0.55rem;
}
.me-lux .treatment-band-dark .me-eyebrow { color: var(--accent-color); }

/* ---------- "At a glance" trust strip ---------- */
.me-lux .me-glance {
  background: #fff;
  border-bottom: 1px solid #e6eef7;
}
.me-lux .me-glance__row { display: grid; grid-template-columns: repeat(4, 1fr); }
.me-lux .me-glance__item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.45rem 1.35rem;
  border-left: 1px solid #e6eef7;
}
.me-lux .me-glance__item:first-child { border-left: 0; }
.me-lux .me-glance__icon {
  flex: 0 0 auto;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e9f3fb;
  color: var(--primary-color);
  font-size: 1.3rem;
}
.me-lux .me-glance__t {
  font-weight: 700;
  color: var(--secondary-color);
  font-size: 0.98rem;
  line-height: 1.2;
}
.me-lux .me-glance__s { font-size: 0.82rem; color: #5b6b82; margin-top: 0.15rem; }
@media (max-width: 991.98px) {
  .me-lux .me-glance__row { grid-template-columns: repeat(2, 1fr); }
  .me-lux .me-glance__item:nth-child(3) { border-left: 0; }
  .me-lux .me-glance__item:nth-child(n+3) { border-top: 1px solid #e6eef7; }
}
@media (max-width: 575.98px) {
  .me-lux .me-glance__row { grid-template-columns: 1fr; }
  .me-lux .me-glance__item { border-left: 0 !important; border-top: 1px solid #e6eef7; }
  .me-lux .me-glance__item:first-child { border-top: 0; }
}

/* ---------- "Your journey" step band ---------- */
.me-lux .me-journey { background: #eef4fa; padding: 3.75rem 0; }
.me-lux .me-journey__head { text-align: center; max-width: 40rem; margin: 0 auto 2.6rem; }
.me-lux .me-journey__head h2 { color: var(--secondary-color); margin: 0; }
.me-lux .me-journey__track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  position: relative;
}
.me-lux .me-journey__track::before {
  content: "";
  position: absolute;
  top: 1.4rem;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-color), var(--primary-color));
  z-index: 0;
}
.me-lux .me-journey__step { position: relative; z-index: 1; text-align: center; padding: 0 0.5rem; }
.me-lux .me-journey__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background: var(--primary-color);
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  box-shadow: 0 0 0 6px #eef4fa;
  margin-bottom: 1rem;
}
.me-lux .me-journey__step h3 { font-size: 1.1rem; color: var(--secondary-color); margin-bottom: 0.4rem; }
.me-lux .me-journey__step p { font-size: 0.92rem; color: #51607a; margin: 0; }
@media (max-width: 767.98px) {
  .me-lux .me-journey__track { grid-template-columns: 1fr; gap: 1.6rem; max-width: 23rem; margin: 0 auto; }
  .me-lux .me-journey__track::before { display: none; }
  /* Badge in its own column spanning both rows; title above text beside it
     (as flex, the badge squashed to an oval and h3/p sat side by side). */
  .me-lux .me-journey__step { display: grid; grid-template-columns: 2.8rem 1fr; column-gap: 1rem; row-gap: 0.25rem; align-items: start; text-align: left; padding: 0; }
  .me-lux .me-journey__num { grid-row: 1 / span 2; margin-bottom: 0; box-shadow: none; }
}

/* ---------- Hub-card polish (implants, perio card grids) ---------- */
.me-lux .hub-card { position: relative; overflow: hidden; }
.me-lux .hub-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-color), var(--primary-color));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.me-lux .hub-card:hover::after,
.me-lux .hub-card:focus-visible::after { transform: scaleX(1); }

/* ---------- Treatment showcase cards (anti-aging) ---------- */
.me-lux .me-showcase { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }
.me-lux .me-show-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #e6eef7;
  box-shadow: 0 8px 26px rgba(4, 81, 142, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.me-lux .me-show-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(4, 81, 142, 0.15); }
.me-lux .me-show-card__media { aspect-ratio: 16 / 10; overflow: hidden; }
.me-lux .me-show-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.me-lux .me-show-card:hover .me-show-card__media img { transform: scale(1.05); }
.me-lux .me-show-card__body { padding: 1.5rem 1.6rem 1.7rem; display: flex; flex-direction: column; flex-grow: 1; }
.me-lux .me-show-card__body h3 { color: var(--secondary-color); margin-bottom: 0.6rem; }
.me-lux .me-show-card__body p { color: #51607a; font-size: 0.96rem; }
.me-lux .me-show-card__link { margin-top: auto; align-self: flex-start; }
@media (max-width: 767.98px) { .me-lux .me-showcase { grid-template-columns: 1fr; } }

/* ---------- Motion sensitivity ---------- */
@media (prefers-reduced-motion: reduce) {
  .me-lux .me-hero-scroll { animation: none; }
  .me-lux .hub-card::after,
  .me-lux .me-show-card,
  .me-lux .me-show-card__media img { transition: none; }
  .me-lux .me-show-card:hover { transform: none; }
  .me-lux .me-show-card:hover .me-show-card__media img { transform: none; }
}

/* ---------- Header: visible "Menu" label beside the hamburger icon ---------- */
.hamburger-btn { gap: 0.35rem; }
.hamburger-btn .hamburger-label {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
body.header-scrolled .hamburger-btn .hamburger-label { font-size: 0.9rem; }

/* Below 768px: keep logo, search and Menu on one row (modern header only).
   Without this the row wraps and the controls drop under the logo: below
   ~430px on every page, and up to ~645px at the top of the homepage, where the
   logo is 80px tall. The logo is set to its normal size for each state
   (widths = height x 5.71, the logo's aspect ratio) and scales down, aspect
   ratio kept, only when the row would not fit. Buttons keep their full height. */
@media (max-width: 767.98px) {
  .main-header--modern .navbar > .container-fluid { flex-wrap: nowrap; }
  .main-header--modern .navbar-brand { flex: 0 1 auto; min-width: 0; }
  .main-header--modern .header-right-controls { flex-shrink: 0; }
  .main-header--modern .header-logo { width: 343px; max-width: 100%; height: auto; }              /* 60px tall */
  body.homepage:not(.header-scrolled) .main-header--modern .header-logo { width: 457px; height: auto; } /* 80px tall */
  body.header-scrolled .main-header--modern .header-logo { width: 228px; height: auto; }             /* 40px tall */
}
@media (max-width: 575.98px) {
  .main-header--modern .navbar-brand { margin-right: 0.5rem; }
  .main-header--modern .header-logo,
  body.homepage:not(.header-scrolled) .main-header--modern .header-logo { width: 285px; }         /* 50px tall */
  body.header-scrolled .main-header--modern .header-logo { width: 228px; height: auto; }             /* 40px tall */
  .main-header--modern .header-right-controls { gap: 0.25rem; }
  .main-header--modern .header-icon-btn { padding-left: 0.4rem; padding-right: 0.4rem; }
  .main-header--modern .hamburger-btn .hamburger-label { font-size: 0.875rem; }
}

/* ---------- "Leave Us a Google Review" buttons (homepage reviews + footer) ---------- */
/* clue.css colors .bi-google red inside #reviews-banner; inside the button the
   icon follows the button text color instead. */
.google-review-btn .bi-google,
#reviews-banner .google-review-btn .bi-google { color: inherit; }

/* ============================================================
   MOBILE POLISH (workflow 04, 2026-10-05)
   ============================================================ */

/* Homepage hero on phones: the redesign's clamp() headline lost on
   specificity to the older #homepage-cover h1 steps (24px at 390px, smaller
   than the section h2s). The scroll chevron sat on the service cards; the
   hero is taller than a phone screen there, so the cue is dropped. */
@media (max-width: 767.98px) {
  body.homepage #homepage-cover .me-hero-grid h1 { font-size: clamp(2rem, 8vw, 2.4rem); }
  body.homepage #homepage-cover .hero-scroll-indicator { display: none; }
}

/* Chat widget input: 16px on phones so iOS Safari does not zoom on focus. */
@media (max-width: 767.98px) {
  .clue-ai-input-wrapper .clue-ai-input { font-size: 16px; }
}

/* Hub cards inside the dark treatment band (implants, periodontics):
   clue.css turns every h3 in .treatment-band-dark white, which made the
   titles white on the white card. Restore the dark card heading colour. */
.treatment-band-dark .hub-card h3 { color: var(--secondary-color); }

/* Footer hours (site.hoursSummary split per day/time group in footer.njk):
   on phones keep each group on one line so a range never breaks mid-way. */
@media (max-width: 767.98px) {
  .footer-hours-group { white-space: nowrap; }
}
/* From 768px the footer column is narrow, so each group gets its own line
   beside the clock icon and the " · " separators are hidden. A group that is
   still too wide wraps between its day label and its hours, never inside
   either (footer.njk wraps both in text-nowrap). */
@media (min-width: 768px) {
  .footer-hours { display: flex; align-items: baseline; }
  /* hanging indent: a wrapped "By Appointment Only" reads as a continuation */
  .footer-hours-group { display: block; padding-left: .75em; text-indent: -.75em; }
  .footer-hours-sep { display: none; }
}

/* Homepage welcome heading: an h2 (one h1 per page) sized exactly like
   Bootstrap's h1 (same fluid formula and 1200px step). No !important, so the
   Sienna accessibility widget's inline px size (it floors each heading to whole
   pixels on load) still applies, exactly as it did on the former h1. */
.hp-welcome-heading { font-size: calc(1.375rem + 1.5vw); }
@media (min-width: 1200px) {
  .hp-welcome-heading { font-size: 2.5rem; }
}

/* Hero eyebrows ("Lead · Tail"): below 768px the separator dot is hidden and
   the tail phrase takes its own line, so a wrap never strands the dot.
   The text sits in one .me-eyebrow-text span so the eyebrow's inline-flex
   layout (and its gap) is unchanged on desktop. */
@media (max-width: 767.98px) {
  .me-hero-eyebrow .me-eyebrow-sep { display: none; }
  .me-hero-eyebrow .me-eyebrow-tail { display: block; }
}