/* ========================================
   CavClinics - Guest Theme
   Public pages as seen by logged-out visitors.
   Everything is scoped to body.guest-theme so patient, clinic and
   admin screens keep their own look.

   Palette (blue + white, warm accents used sparingly)
     #2D457A  navy   - main colour: navbar, footer, buttons, icons
     #091226  ink    - headings, deepest shade
     #DBBA6D  gold   - accent: "Clinics" in the wordmark, stars, underlines
     #FFFBF3  paper  - Sign up pill, hero accents
     #F7F2E8  warm   - rare warm highlight
     #FFFFFF  white  - cards and alternate sections
     #F4F7FB  mist   - default page surface (cool off-white)
     #EBF0F8  tint   - icon tiles, chips, soft cards
   ======================================== */

body.guest-theme {
    --gt-ink: #091226;
    --gt-navy: #2D457A;
    --gt-navy-dark: #22365F;
    --gt-sky: #C3E0FF;
    --gt-white: #FFFFFF;
    --gt-gray: #D6D6D6;
    --gt-gold: #DBBA6D;

    --gt-paper: #FFFBF3;
    --gt-warm: #F7F2E8;
    --gt-banner: var(--gt-mist);
    --gt-mist: #F4F7FB;
    --gt-tint: #EBF0F8;
    --gt-line: #E1E7F0;
    --gt-gold-deep: #9C7A2C;
    --gt-muted: #586277;
    --gt-on-dark-muted: rgba(255, 255, 255, 0.78);

    --gt-font: 'Outfit', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --gt-font-script: 'Yellowtail', 'Brush Script MT', cursive;
    --gt-font-serif: 'Quattrocento', Georgia, serif;

    --gt-gutter: clamp(20px, 6vw, 96px);
    --gt-section-y: clamp(56px, 6.5vw, 88px);
    --gt-container: 1220px;
    --gt-radius: 20px;
    --gt-radius-lg: 28px;
    --gt-shadow: 0 1px 2px rgba(9, 18, 38, 0.04), 0 8px 24px -12px rgba(9, 18, 38, 0.14);
    --gt-shadow-lift: 0 2px 4px rgba(9, 18, 38, 0.05), 0 22px 40px -18px rgba(9, 18, 38, 0.28);
    --gt-ease: cubic-bezier(0.22, 1, 0.36, 1);

    /* Legacy tokens from style.css / modern-ui.css, remapped so existing
       page components pick up the new palette without per-page edits. */
    --primary-color: var(--gt-navy);
    --primary-dark: var(--gt-navy-dark);
    --primary-light: var(--gt-navy);
    --primary-lighter: var(--gt-navy);
    --primary-gradient: linear-gradient(135deg, var(--gt-navy) 0%, var(--gt-ink) 100%);
    --accent-color: var(--gt-navy);
    --text-dark: var(--gt-ink);
    --text-primary: var(--gt-ink);
    --text-secondary: var(--gt-muted);
    --bg-light: var(--gt-mist);
    --bg-gray: var(--gt-tint);
    --border-color: var(--gt-line);
    --border-light: var(--gt-line);
    --shadow-glow: 0 0 20px rgba(45, 69, 122, 0.25);

    background-color: var(--gt-mist);
    color: var(--gt-ink);
    font-family: var(--gt-font);
}

body.guest-theme :is(h1, h2, h3, h4, h5, h6, p, a, li, label, button, input, select, textarea, small, strong, td, th, span) {
    font-family: var(--gt-font);
}

body.guest-theme :is(h1, h2, h3, h4, h5, h6) {
    letter-spacing: -0.02em;
}

body.guest-theme ::selection {
    background: var(--gt-sky);
    color: var(--gt-ink);
}

body.guest-theme :focus-visible {
    outline: 3px solid var(--gt-sky);
    outline-offset: 2px;
}

.gt-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body.guest-theme .gt-icon {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
}

/* ========================================
   Buttons
   ======================================== */
body.guest-theme .btn-primary {
    background: var(--gt-navy);
    border-color: var(--gt-navy);
    color: var(--gt-white);
    box-shadow: 0 6px 16px -8px rgba(45, 69, 122, 0.6);
}

body.guest-theme .btn-primary:hover {
    background: var(--gt-navy-dark);
    border-color: var(--gt-navy-dark);
    color: var(--gt-white);
}

body.guest-theme .btn-outline {
    color: var(--gt-navy);
    border-color: var(--gt-navy);
}

body.guest-theme .btn-outline:hover {
    background: var(--gt-navy);
    border-color: var(--gt-navy);
    color: var(--gt-white);
}

.gt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    padding: 11px 22px;
    border-radius: 999px;
    border: 1.5px solid transparent;
    font-family: var(--gt-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease,
                transform 0.25s var(--gt-ease), box-shadow 0.25s ease;
}

.gt-btn .gt-icon {
    font-size: 17px;
    transition: transform 0.25s var(--gt-ease);
}

.gt-btn:hover .gt-icon {
    transform: translateX(3px);
}

.gt-btn--navy {
    background: var(--gt-navy);
    color: var(--gt-white);
}

.gt-btn--navy:hover {
    background: var(--gt-navy-dark);
    color: var(--gt-white);
    transform: translateY(-1px);
}

.gt-btn--outline {
    background: transparent;
    border-color: var(--gt-navy);
    color: var(--gt-navy);
}

.gt-btn--outline:hover {
    background: var(--gt-navy);
    color: var(--gt-white);
}

.gt-btn--gold {
    background: var(--gt-gold);
    color: var(--gt-ink);
    box-shadow: 0 10px 24px -12px rgba(219, 186, 109, 0.8);
}

.gt-btn--gold:hover {
    background: #E5C988;
    color: var(--gt-ink);
    transform: translateY(-2px);
}

.gt-btn--lg {
    min-height: 52px;
    padding: 15px 28px;
    font-size: 15px;
}

.gt-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--gt-navy);
}

.gt-link .gt-icon {
    font-size: 16px;
    transition: transform 0.25s var(--gt-ease);
}

/* ========================================
   Wordmark
   ======================================== */
body.guest-theme .gt-wordmark span {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    color: inherit;
}

body.guest-theme .gt-wordmark {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    line-height: 1;
    text-decoration: none;
}

body.guest-theme .gt-wordmark .gt-wordmark-name {
    font-family: var(--gt-font-script);
    font-size: 28px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1;
    padding: 0 0.12em 0 0.04em;
}

body.guest-theme .gt-wordmark .gt-wordmark-tag {
    margin-top: 1px;
    font-family: var(--gt-font-serif);
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    opacity: 0.85;
}

body.guest-theme .gt-script,
body.guest-theme .gt-script span {
    font-family: var(--gt-font-script);
    font-weight: 400;
    letter-spacing: 0;
}

body.guest-theme .gt-script {
    font-size: 1.22em;
    padding: 0 0.06em;
}

.gt-script .gt-cav { color: var(--gt-navy); }
.gt-script .gt-clinics { color: var(--gt-gold); }

/* ========================================
   Navbar
   ======================================== */
/* One navbar for every guest page, sized to the Figma header at 1440px.
   Style 2 (default): solid #2D457A bar, same colour as the footer.
   Style 1: transparent over the landing hero (body.gt-hero-page) until
   main.js adds .scrolled; it also goes solid while the mobile menu is open. */
body.guest-theme {
    --gt-nav-h: 76px;
}

body.guest-theme .navbar {
    --nav-fg: var(--gt-white);
    --nav-fg-soft: rgba(255, 255, 255, 0.92);
    --nav-cav: var(--gt-white);
    --nav-clinics: var(--gt-white);
    --nav-tag: var(--gt-gold);
    --nav-login: var(--gt-white);
    --nav-hover-bg: rgba(255, 255, 255, 0.14);
    --nav-hover-fg: var(--gt-white);

    background: var(--gt-navy);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: none;
    transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

body.guest-theme .navbar.scrolled {
    box-shadow: 0 12px 30px -18px rgba(9, 18, 38, 0.55);
}

/* The logo text stays all white here too (only the tagline is gold) */
body.gt-hero-page .navbar:not(.scrolled):not(:has(.mobile-menu.active)) {
    --nav-hover-bg: rgba(255, 255, 255, 0.16);
    --nav-hover-fg: var(--gt-gold);

    background: transparent;
    border-bottom-color: rgba(255, 255, 255, 0.4);
}

body.guest-theme .nav-container {
    min-height: var(--gt-nav-h);
    max-width: none;
    padding: 0 clamp(20px, 5.2vw, 84px) 0 var(--gt-gutter);
}

body.guest-theme .navbar .gt-wordmark { color: var(--nav-fg); }
body.guest-theme .navbar .gt-wordmark .gt-wordmark-cav { color: var(--nav-cav); transition: color 0.4s ease; }
body.guest-theme .navbar .gt-wordmark .gt-wordmark-clinics { color: var(--nav-clinics); transition: color 0.4s ease; }
body.guest-theme .navbar .gt-wordmark .gt-wordmark-tag { color: var(--nav-tag); transition: color 0.4s ease; }

body.guest-theme .nav-links {
    gap: 6px;
    align-items: center;
}

/* Links sit in a 10px-radius box that fills on hover */
body.guest-theme .nav-links a {
    display: inline-block;
    padding: 10px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: var(--nav-fg-soft);
    letter-spacing: 0;
    transition: color 0.25s ease, background-color 0.25s ease;
}

/* Underline marks the current page only - never on hover */
body.guest-theme .nav-links a::after {
    left: 10px;
    bottom: 5px;
    width: 0;
    height: 1px;
    border-radius: 1px;
    background: var(--gt-gold);
    transition: width 0.3s var(--gt-ease);
}

body.guest-theme .nav-links a.active::after {
    width: calc(100% - 20px);
}

body.guest-theme .nav-links a.active {
    color: var(--nav-fg);
}

body.guest-theme .nav-links a:hover {
    background: var(--nav-hover-bg);
    color: var(--nav-hover-fg);
}

body.guest-theme .nav-buttons {
    gap: 8px;
}

body.guest-theme .nav-buttons .btn-auth-login,
body.guest-theme .nav-buttons .btn-auth-signup {
    min-width: 0;
    min-height: 36px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    box-shadow: none;
}

body.guest-theme .nav-buttons .btn-auth-login {
    padding: 0 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--nav-login);
    transition: color 0.25s ease, background-color 0.25s ease;
}

body.guest-theme .nav-buttons .btn-auth-login:hover {
    background: var(--nav-hover-bg);
    color: var(--nav-hover-fg);
    transform: none;
}

/* Sign up is the same cream pill in both styles */
body.guest-theme .nav-buttons .btn-auth-signup {
    border: 0;
    border-radius: 999px;
    background: var(--gt-paper);
    color: var(--gt-ink);
    transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

body.guest-theme .nav-buttons .btn-auth-signup:hover {
    background: var(--gt-white);
    color: var(--gt-ink);
    box-shadow: 0 0 0 4px rgba(255, 251, 243, 0.18);
    transform: translateY(-1px);
}

/* "Get the app": a quiet link like the nav links, a gold download mark, then a
   hairline before Log in (includes/navbar.php, includes/app-download.php). */
body.guest-theme .nav-buttons .nav-get-app {
    color: var(--nav-fg-soft);
}

body.guest-theme .nav-get-app .gt-icon {
    color: var(--gt-gold);
}

body.guest-theme .nav-buttons .nav-get-app:hover {
    background: var(--nav-hover-bg);
    color: var(--nav-hover-fg);
}

body.guest-theme .nav-buttons-divider {
    background: rgba(255, 255, 255, 0.24);
}

/* Narrow desktops: the icon alone (its title names it) so the links breathe.
   The words stay readable to screen readers. */
@media (min-width: 1025px) and (max-width: 1199px) {
    body.guest-theme .nav-buttons .nav-get-app {
        padding: 0 9px;
    }

    body.guest-theme .nav-buttons .nav-get-app span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

body.guest-theme .hamburger span {
    background: var(--nav-fg);
    border-radius: 3px;
}

/* Mobile menu (built by main.js from the nav links and buttons) */
body.guest-theme .mobile-menu {
    background: var(--gt-navy);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 40px -24px rgba(9, 18, 38, 0.6);
    padding: 12px var(--gt-gutter) 20px;
}

body.guest-theme .mobile-menu ul a {
    padding: 12px 4px;
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.86);
    border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body.guest-theme .mobile-menu ul a.active {
    color: var(--gt-gold);
}

body.guest-theme .mobile-menu ul a::after {
    content: none;
}

body.guest-theme .mobile-menu .mobile-buttons {
    flex-wrap: wrap;
    border-top: 0;
    padding-top: 6px;
}

/* In the phone menu "Get the app" gets its own full-width row under Log in
   and Sign up. */
body.guest-theme .mobile-menu .mobile-buttons .nav-buttons-divider {
    display: none;
}

body.guest-theme .mobile-menu .mobile-buttons .nav-get-app {
    order: 3;
    flex: 1 1 100%;
    justify-content: center;
    min-height: 42px;
    border: 1.5px solid rgba(219, 186, 109, 0.55);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    color: var(--gt-paper);
}

body.guest-theme .mobile-menu .mobile-buttons .nav-get-app:hover {
    background: rgba(219, 186, 109, 0.12);
    color: var(--gt-white);
}

body.guest-theme .mobile-menu .mobile-buttons .btn-auth-login {
    background: transparent;
    color: var(--gt-paper);
    border: 1.5px solid rgba(255, 251, 243, 0.45);
}

body.guest-theme .mobile-menu .mobile-buttons .btn-auth-signup {
    background: var(--gt-paper);
    color: var(--gt-ink);
    border: 1.5px solid var(--gt-paper);
}

/* ---------- Signed-in navbar (patient side) ----------
   Same bar as guests. Book Now takes the Sign up pill's place, followed by
   the bell and the profile menu. Used by includes/navbar.php (logged in)
   and user/includes/navbar.php. */
body.guest-theme .nav-buttons .btn-primary {
    min-width: 0;
    min-height: 36px;
    gap: 8px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: var(--gt-paper);
    box-shadow: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--gt-ink);
}

body.guest-theme .nav-buttons .btn-primary:hover {
    background: var(--gt-white);
    color: var(--gt-ink);
    box-shadow: 0 0 0 4px rgba(255, 251, 243, 0.18);
    transform: translateY(-1px);
}

body.guest-theme .nav-buttons .btn-primary i {
    font-size: 13px;
    color: var(--gt-navy);
}

body.guest-theme .navbar .notification-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 10px;
    font-size: 17px;
    color: var(--gt-white);
    transition: background-color 0.25s ease;
}

body.guest-theme .navbar .notification-btn:hover {
    background: var(--nav-hover-bg);
}

body.guest-theme .navbar .notification-btn i {
    font-size: 17px;
    color: inherit;
}

body.guest-theme .navbar .notification-badge {
    top: 3px;
    right: 3px;
    min-width: 18px;
    height: 18px;
    border: 2px solid var(--gt-navy);
    background: #E5484D;
    font-size: 10px;
    font-weight: 700;
}

body.guest-theme .navbar .profile-btn {
    gap: 8px;
    padding: 3px 10px 3px 3px;
    border-radius: 999px;
    color: var(--gt-white);
    transition: background-color 0.25s ease;
}

body.guest-theme .navbar .profile-btn:hover {
    background: var(--nav-hover-bg);
}

body.guest-theme .navbar :is(.profile-avatar, .profile-initials) {
    width: 32px;
    height: 32px;
    border: 2px solid rgba(255, 255, 255, 0.55);
}

/* !important: modern-ui.css forces its own gradient with !important */
body.guest-theme :is(.profile-initials, .profile-initials-large) {
    background: var(--gt-gold) !important;
    box-shadow: none;
    color: var(--gt-ink);
    font-weight: 700;
}

body.guest-theme .navbar .profile-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--gt-white);
}

body.guest-theme .navbar .profile-btn > i {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.75);
}

/* Dropdown panels: white cards in the theme's colours */
body.guest-theme .navbar :is(.notification-dropdown, .profile-dropdown) {
    overflow: hidden;
    border: 1px solid var(--gt-line);
    border-radius: 16px;
    box-shadow: var(--gt-shadow-lift);
}

body.guest-theme .navbar :is(.notification-header, .notification-footer, .dropdown-header) {
    border-color: var(--gt-line);
}

body.guest-theme .navbar .notification-header h4,
body.guest-theme .navbar .dropdown-header h4 {
    color: var(--gt-ink);
}

body.guest-theme .navbar :is(.notification-header a, .notification-footer a) {
    color: var(--gt-navy);
    font-weight: 600;
}

body.guest-theme .navbar .notification-item:hover {
    background: var(--gt-mist);
}

body.guest-theme .navbar .notification-item.unread {
    background: var(--gt-tint);
}

body.guest-theme .navbar .dropdown-menu a {
    color: var(--gt-ink);
}

body.guest-theme .navbar .dropdown-menu a:hover,
body.guest-theme .navbar .dropdown-menu a.active {
    background: var(--gt-mist);
    color: var(--gt-navy);
}

body.guest-theme .navbar .dropdown-menu a:hover i,
body.guest-theme .navbar .dropdown-menu a.active i {
    color: var(--gt-navy);
}

/* Signed-in navbars collapse their links into a panel on small screens;
   their own CSS paints it white, which would hide the white links */
@media (max-width: 1024px) {
    body.guest-theme .navbar .nav-links.active,
    body.guest-theme .navbar .nav-buttons.active {
        background: var(--gt-navy);
        border-top-color: rgba(255, 255, 255, 0.12);
        box-shadow: none;
    }

    body.guest-theme .navbar .nav-links a.active {
        background: rgba(255, 255, 255, 0.12);
    }

    body.guest-theme .navbar .nav-links.active a::after {
        display: none;
    }
}

/* The patient navbar's menu button is a white tile; on the navy bar it
   becomes a translucent one so its white lines stay visible */
body.guest-theme .navbar.gt-nav-patient .hamburger {
    align-items: center;
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 992px) {
    body.guest-theme .navbar .nav-links {
        background: var(--gt-navy);
        border-color: rgba(255, 255, 255, 0.14);
        box-shadow: 0 18px 36px -18px rgba(9, 18, 38, 0.6);
    }

    /* Book Now shrinks to its icon on small screens (patient navbar) */
    body.guest-theme .navbar.gt-nav-patient .nav-buttons .btn-primary {
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
        padding: 0;
        gap: 0;
        font-size: 0;
    }

    body.guest-theme .navbar.gt-nav-patient .nav-buttons .btn-primary i {
        margin: 0;
        font-size: 15px;
    }

    body.guest-theme .navbar :is(.notification-dropdown, .profile-dropdown) {
        top: calc(var(--gt-nav-h) + 6px);
    }
}

/* ========================================
   Layout helpers
   ======================================== */
.gt-container {
    width: 100%;
    max-width: calc(var(--gt-container) + 2 * 20px);
    margin: 0 auto;
    padding: 0 20px;
}

.gt-section {
    position: relative;
    padding: var(--gt-section-y) 0;
    background: var(--gt-mist);
}

.gt-section--white {
    background: var(--gt-white);
}

.gt-section-head {
    max-width: 640px;
    margin: 0 auto clamp(36px, 4.5vw, 56px);
    text-align: center;
}

.gt-section-head--split {
    max-width: none;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    text-align: left;
}

body.guest-theme .gt-title {
    margin: 0;
    font-size: clamp(1.75rem, 1.15rem + 1.5vw, 2.5rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--gt-ink);
}

.gt-subtitle {
    margin: 10px 0 0;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--gt-muted);
}

.gt-eyebrow {
    display: inline-block;
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gt-gold-deep);
}

/* Shared white circle that holds an outline icon */
.gt-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: var(--gt-white);
    color: var(--gt-navy);
    font-size: 35px;
    box-shadow: 0 1px 2px rgba(9, 18, 38, 0.05);
    transition: background-color 0.35s ease, color 0.35s ease, transform 0.45s var(--gt-ease);
}

/* ========================================
   Hero
   ======================================== */
.gt-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: 100vh;
    min-height: min(100svh, 960px);
    padding: 132px var(--gt-gutter) clamp(150px, 20vh, 220px);
    color: var(--gt-white);
    overflow: hidden;
    background: var(--gt-ink);
}

.gt-hero-media {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url('../images/hero-dentistry.jpg') center 32% / cover no-repeat;
}

/* Scrim for legibility on the left and under the navbar */
.gt-hero-media::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(9, 18, 38, 0.66) 0%, rgba(9, 18, 38, 0.42) 34%, rgba(9, 18, 38, 0.12) 64%, rgba(9, 18, 38, 0) 100%),
        linear-gradient(180deg, rgba(9, 18, 38, 0.5) 0%, rgba(9, 18, 38, 0) 24%),
        rgba(9, 18, 38, 0.14);
}

/* Fade the photo into the cream page. The stops follow an ease-in-out
   curve so the fade has no visible starting edge, and it stays faint
   (under 5%) behind the search bar. */
.gt-hero-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(244, 247, 251, 0) 60%,
        rgba(244, 247, 251, 0.028) 64%,
        rgba(244, 247, 251, 0.104) 68%,
        rgba(244, 247, 251, 0.216) 72%,
        rgba(244, 247, 251, 0.352) 76%,
        rgba(244, 247, 251, 0.5) 80%,
        rgba(244, 247, 251, 0.648) 84%,
        rgba(244, 247, 251, 0.784) 88%,
        rgba(244, 247, 251, 0.896) 92%,
        rgba(244, 247, 251, 0.972) 96%,
        var(--gt-mist) 100%);
}

.gt-hero-inner {
    width: 100%;
    max-width: 560px;
}

body.guest-theme .gt-hero-title {
    margin: 0;
    font-size: clamp(2.1rem, 0.9rem + 2.3vw, 2.85rem);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.025em;
    color: var(--gt-white);
    text-shadow: 0 2px 24px rgba(9, 18, 38, 0.25);
}

.gt-hero-title span {
    display: block;
}

.gt-hero-lead {
    max-width: 27em;
    margin: 12px 0 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
}

.gt-search {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 440px;
    height: 52px;
    margin-top: 26px;
    border-radius: 999px;
    /* No background here: a white form behind the button's rounded end
       bleeds through its anti-aliased edge as a light fringe. The input
       and button each paint their own half instead. */
    background: transparent;
    box-shadow: 0 14px 34px -14px rgba(9, 18, 38, 0.6);
    transition: box-shadow 0.25s ease;
}

.gt-search:focus-within {
    box-shadow: 0 0 0 4px rgba(195, 224, 255, 0.65), 0 14px 34px -14px rgba(9, 18, 38, 0.6);
}

body.guest-theme .gt-search input {
    flex: 1;
    min-width: 0;
    padding: 0 8px 0 26px;
    border: 0;
    border-radius: 999px 0 0 999px;
    background: var(--gt-white);
    font-size: 14.5px;
    font-weight: 500;
    color: var(--gt-ink);
    outline: none;
}

body.guest-theme .gt-search input::placeholder {
    color: #8A90A0;
    font-weight: 500;
}

body.guest-theme .gt-search input:focus-visible {
    outline: none;
}

.gt-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 64px;
    /* The rounded end puts the blue's visual centre ~2.5px left of the box
       centre; the right padding moves the icon onto it */
    padding: 0 5px 0 0;
    border: 0;
    border-radius: 0 999px 999px 0;
    background: var(--gt-navy);
    color: var(--gt-paper);
    font-size: 20px;
    cursor: pointer;
    transition: background-color 0.25s ease;
}

.gt-search-btn .gt-icon {
    stroke-width: 2.4;
}

/* Shown by guest-motion.js when the search is submitted empty */
.gt-search-hint {
    position: absolute;
    z-index: 2;
    top: calc(100% + 12px);
    left: 18px;
    margin: 0;
    padding: 9px 14px;
    border-radius: 10px;
    background: var(--gt-white);
    box-shadow: 0 12px 28px -12px rgba(9, 18, 38, 0.55);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--gt-ink);
    animation: gt-hint-in 0.25s var(--gt-ease);
}

/* Small arrow pointing up at the search field */
.gt-search-hint::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 22px;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: var(--gt-white);
    rotate: 45deg;
}

.gt-search-hint[hidden] {
    display: none;
}

@keyframes gt-hint-in {
    from { opacity: 0; translate: 0 -4px; }
    to { opacity: 1; translate: none; }
}

.gt-search-btn:hover {
    background: var(--gt-navy-dark);
}

body.guest-theme .gt-search-btn:focus-visible {
    outline-offset: -4px;
    outline-color: var(--gt-sky);
}

/* ========================================
   Why choose - feature cards
   ======================================== */
.gt-section--features {
    padding-top: clamp(24px, 3vw, 40px);
}

.gt-feature-grid,
.gt-service-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 28px);
}

.gt-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 290px;
    padding: 30px 24px 32px;
    border-radius: var(--gt-radius);
    background: var(--gt-tint);
    border: 1px solid var(--gt-line);
    text-align: center;
    transition: transform 0.45s var(--gt-ease), box-shadow 0.45s var(--gt-ease), background-color 0.35s ease, border-color 0.35s ease;
}

.gt-feature .gt-icon-badge {
    margin-bottom: 24px;
}

body.guest-theme .gt-feature h3,
body.guest-theme .gt-service h3 {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--gt-ink);
}

.gt-feature p,
.gt-service p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--gt-muted);
}

.gt-feature:hover {
    transform: translateY(-4px);
    border-color: rgba(219, 186, 109, 0.7);
    box-shadow: var(--gt-shadow-lift);
}

.gt-feature:hover .gt-icon-badge,
.gt-service:hover .gt-icon-badge {
    background: var(--gt-navy);
    color: var(--gt-white);
}

/* ========================================
   Featured clinics
   ======================================== */
.gt-section--clinics {
    padding-top: 0;
}

.gt-clinic-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2vw, 28px);
}

/* Featured clinics, more than three: one row that scrolls sideways -- three
   cards to a view as before, two on a tablet, one with the next peeking in on
   a phone (swipe). The arrows sit beside View all clinics. */
.gt-clinic-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gt-scroll-btn {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--gt-line);
    background: var(--gt-white);
    color: var(--gt-navy);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.gt-scroll-btn:hover:not(:disabled) {
    background: var(--gt-navy);
    border-color: var(--gt-navy);
    color: var(--gt-white);
}

.gt-scroll-btn:focus-visible {
    outline: 2px solid var(--gt-navy);
    outline-offset: 2px;
}

.gt-scroll-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.gt-scroll-btn--prev .gt-icon {
    transform: rotate(180deg);
}

.gt-clinic-grid.gt-clinic-grid--scroll {
    --gt-clinic-gap: clamp(18px, 2vw, 28px);
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 2 * var(--gt-clinic-gap)) / 3);
    gap: var(--gt-clinic-gap);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 6px;
    /* Room for each card's hover lift and shadow, which the scrolling box would cut off. */
    padding: 8px 6px 26px;
    margin: -8px -6px -26px;
    scrollbar-width: thin;
    scrollbar-color: var(--gt-line) transparent;
}

.gt-clinic-grid--scroll > .gt-clinic-card {
    scroll-snap-align: start;
}

.gt-clinic-grid--scroll:focus-visible {
    outline: 2px solid var(--gt-navy);
    outline-offset: 2px;
    border-radius: var(--gt-radius);
}

.gt-clinic-grid--scroll::-webkit-scrollbar {
    height: 8px;
}

.gt-clinic-grid--scroll::-webkit-scrollbar-thumb {
    background: var(--gt-line);
    border-radius: 999px;
}

@media (max-width: 1024px) {
    .gt-clinic-grid.gt-clinic-grid--scroll {
        grid-auto-columns: calc((100% - var(--gt-clinic-gap)) / 2);
    }
}

@media (max-width: 640px) {
    .gt-clinic-grid.gt-clinic-grid--scroll {
        grid-auto-columns: 86%;
    }

    .gt-clinic-head-actions {
        width: 100%;
    }

    .gt-scroll-btn {
        display: none;
    }
}

.gt-clinic-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--gt-radius);
    background: var(--gt-white);
    border: 1px solid var(--gt-line);
    box-shadow: var(--gt-shadow);
    color: inherit;
    text-decoration: none;
    transition: transform 0.45s var(--gt-ease), box-shadow 0.45s var(--gt-ease);
}

.gt-clinic-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--gt-shadow-lift);
}

.gt-clinic-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: linear-gradient(135deg, var(--gt-navy) 0%, var(--gt-ink) 100%);
}

.gt-clinic-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--gt-ease);
}

.gt-clinic-card:hover .gt-clinic-media img {
    transform: scale(1.04);
}

.gt-clinic-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(219, 186, 109, 0.85);
    font-size: 54px;
}

.gt-status {
    position: absolute;
    top: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    font-size: 12px;
    font-weight: 700;
    color: var(--gt-muted);
}

.gt-status::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gt-gray);
}

.gt-status--open {
    color: var(--gt-navy);
}

.gt-status--open::before {
    background: #2FA36B;
}

.gt-clinic-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 20px 22px 22px;
}

body.guest-theme .gt-clinic-body h3 {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.gt-clinic-loc {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 14px;
    color: var(--gt-muted);
}

.gt-clinic-loc .gt-icon {
    color: var(--gt-gold-deep);
    font-size: 16px;
}

.gt-clinic-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 14px;
    color: var(--gt-muted);
}

.gt-clinic-meta strong {
    color: var(--gt-ink);
    font-weight: 700;
}

.gt-clinic-meta .gt-icon {
    color: var(--gt-gold);
    font-size: 16px;
}

.gt-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
}

.gt-tag {
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(195, 224, 255, 0.5);
    font-size: 12px;
    font-weight: 600;
    color: var(--gt-navy);
}

.gt-clinic-body .gt-link {
    margin-top: auto;
    padding-top: 18px;
}

.gt-clinic-card:hover .gt-link .gt-icon,
.gt-service:hover .gt-link .gt-icon {
    transform: translateX(4px);
}

.gt-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(40px, 6vw, 64px) 24px;
    border-radius: var(--gt-radius);
    background: var(--gt-tint);
    text-align: center;
}

.gt-empty .gt-icon-badge {
    margin-bottom: 20px;
}

body.guest-theme .gt-empty h3 {
    margin: 0 0 8px;
    font-size: 19px;
    font-weight: 700;
}

.gt-empty p {
    max-width: 420px;
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--gt-muted);
}

.gt-empty .gt-link {
    margin-top: 18px;
}

.gt-empty .gt-link:hover .gt-icon {
    transform: translateX(4px);
}

/* ========================================
   Services
   ======================================== */
.gt-service {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 24px 26px;
    border-radius: var(--gt-radius);
    background: var(--gt-mist);
    border: 1px solid var(--gt-line);
    color: inherit;
    text-decoration: none;
    transition: transform 0.45s var(--gt-ease), box-shadow 0.45s var(--gt-ease), border-color 0.35s ease;
}

.gt-service .gt-icon-badge {
    width: 64px;
    height: 64px;
    margin-bottom: 22px;
    font-size: 28px;
    border: 1px solid var(--gt-line);
}

.gt-service p {
    margin-bottom: 20px;
}

.gt-service .gt-link {
    margin-top: auto;
}

.gt-service:hover {
    transform: translateY(-4px);
    border-color: rgba(219, 186, 109, 0.7);
    box-shadow: var(--gt-shadow-lift);
}

.gt-service:hover .gt-icon-badge {
    border-color: var(--gt-navy);
}

/* ========================================
   How it works
   ======================================== */
.gt-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 40px);
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

/* Dashed connector between the step numbers */
.gt-steps::before {
    content: '';
    position: absolute;
    top: 32px;
    left: calc(100% / 6);
    right: calc(100% / 6);
    border-top: 2px dashed rgba(219, 186, 109, 0.75);
}

.gt-step {
    position: relative;
    text-align: center;
}

.gt-step-num {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 22px;
    border-radius: 50%;
    background: var(--gt-navy);
    color: var(--gt-white);
    font-size: 22px;
    font-weight: 700;
    box-shadow: 0 0 0 8px var(--gt-mist), 0 0 0 9px rgba(219, 186, 109, 0.55);
    transition: transform 0.45s var(--gt-ease), background-color 0.35s ease;
}

.gt-step:hover .gt-step-num {
    transform: translateY(-3px);
    background: var(--gt-ink);
}

body.guest-theme .gt-step h3 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
}

.gt-step p {
    max-width: 260px;
    margin: 0 auto;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--gt-muted);
}

/* Under the three steps: one quiet link on to the full guide */
.gt-steps-more {
    margin-top: clamp(36px, 4.5vw, 52px);
    text-align: center;
}

/* ========================================
   Testimonials
   ======================================== */
.gt-testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2vw, 28px);
}

.gt-testimonial-grid--single {
    grid-template-columns: minmax(0, 580px);
    justify-content: center;
}

/* Centre-focus carousel: all cards share one grid cell, so the stage is as
   tall as the longest review. guest-motion.js rotates data-pos. */
.gt-review-carousel {
    --gt-peek: 62%;
    display: grid;
    grid-template-columns: minmax(0, min(540px, 84%));
    justify-content: center;
    padding: 12px 0 28px;
    overflow-x: clip;
}

.gt-review-carousel > .gt-testimonial {
    grid-area: 1 / 1;
    transition: transform 0.9s var(--gt-ease), opacity 0.9s ease, background-color 0.9s ease, box-shadow 0.9s ease;
}

.gt-review-carousel > [data-pos="center"] {
    z-index: 3;
    background: var(--gt-tint);
    box-shadow: var(--gt-shadow-lift);
}

.gt-review-carousel > [data-pos="prev"],
.gt-review-carousel > [data-pos="next"] {
    z-index: 2;
    opacity: 0.5;
    background: var(--gt-mist);
}

.gt-review-carousel > [data-pos="prev"] {
    transform: translateX(calc(var(--gt-peek) * -1)) scale(0.86);
}

.gt-review-carousel > [data-pos="next"] {
    transform: translateX(var(--gt-peek)) scale(0.86);
}

.gt-review-carousel > [data-pos="hidden"] {
    z-index: 1;
    opacity: 0;
    transform: scale(0.72);
}

.gt-testimonial {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 30px 28px 26px;
    border-radius: var(--gt-radius);
    background: var(--gt-tint);
}

.gt-testimonial::before {
    content: '\201C';
    position: absolute;
    top: 6px;
    right: 22px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 84px;
    line-height: 1;
    color: rgba(219, 186, 109, 0.55);
}

.gt-stars {
    display: flex;
    gap: 3px;
    color: var(--gt-gold);
    font-size: 17px;
}

.gt-stars .is-off {
    color: var(--gt-gray);
}

.gt-testimonial blockquote {
    margin: 16px 0 22px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--gt-ink);
}

.gt-testimonial--placeholder blockquote {
    color: var(--gt-muted);
    font-style: italic;
}

.gt-testimonial figcaption {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--gt-line);
}

.gt-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--gt-navy);
    color: var(--gt-gold);
    font-size: 16px;
    font-weight: 700;
}

.gt-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    background: var(--gt-white);
}

.gt-avatar .gt-icon {
    font-size: 22px;
}

.gt-author-name {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--gt-ink);
}

.gt-author-meta {
    display: block;
    font-size: 13px;
    color: var(--gt-muted);
}

/* ========================================
   Clinic owners CTA
   ======================================== */
.gt-section--cta {
    padding-top: 0;
}

.gt-section--white + .gt-section--cta {
    padding-top: var(--gt-section-y);
}

.gt-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(28px, 4vw, 56px);
    padding: clamp(32px, 4.5vw, 60px);
    border-radius: var(--gt-radius-lg);
    background:
        radial-gradient(circle at 88% 12%, rgba(219, 186, 109, 0.2) 0%, rgba(219, 186, 109, 0) 38%),
        linear-gradient(135deg, var(--gt-navy) 0%, var(--gt-ink) 100%);
    color: var(--gt-white);
}

.gt-cta::after {
    content: '';
    position: absolute;
    z-index: -1;
    right: -140px;
    bottom: -220px;
    width: 440px;
    height: 440px;
    border-radius: 50%;
    border: 1px solid rgba(219, 186, 109, 0.28);
    box-shadow: 0 0 0 48px rgba(219, 186, 109, 0.04);
}

.gt-cta-main {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.gt-cta-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: var(--gt-gold);
    color: var(--gt-ink);
    font-size: 30px;
}

.gt-cta .gt-eyebrow {
    color: var(--gt-gold);
}

body.guest-theme .gt-cta h2 {
    margin: 0 0 10px;
    font-size: clamp(1.6rem, 1.1rem + 1.3vw, 2.25rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--gt-white);
}

.gt-cta-copy {
    max-width: 560px;
    margin: 0;
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--gt-on-dark-muted);
}

.gt-cta-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, max-content));
    gap: 12px 32px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.gt-cta-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--gt-white);
}

.gt-cta-list .gt-icon {
    color: var(--gt-gold);
    font-size: 19px;
}

.gt-cta-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.gt-cta-note {
    font-size: 13px;
    color: var(--gt-on-dark-muted);
}

/* ========================================
   Footer
   Same #2D457A as the navbar so the page is framed top and bottom.
   ======================================== */
body.guest-theme .footer {
    background: var(--gt-navy);
    color: var(--gt-white);
}

body.guest-theme .footer-main::before {
    background: var(--gt-white);
}

body.guest-theme .footer-brand .footer-logo {
    gap: 0;
    margin-bottom: 14px;
    color: var(--gt-white);
    line-height: 1;
}

body.guest-theme .footer-brand .footer-logo i {
    display: none;
}

body.guest-theme .footer-brand .footer-logo span {
    font-family: var(--gt-font-script);
    font-size: 36px;
    font-weight: 400;
    letter-spacing: 0;
}

body.guest-theme .footer-brand .footer-wordmark {
    padding-right: 0.1em;
}

body.guest-theme .footer-brand .gt-wordmark-clinics {
    color: var(--gt-gold);
}

body.guest-theme .footer-brand p,
body.guest-theme .footer-links a,
body.guest-theme .footer-links .contact-info li,
body.guest-theme .footer-bottom p {
    color: var(--gt-on-dark-muted);
}

body.guest-theme .footer-links h4 {
    position: relative;
    /* Shrink to the text so the gold underline matches the word's length */
    width: fit-content;
    margin-bottom: 22px;
    padding-bottom: 10px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--gt-white);
}

body.guest-theme .footer-links h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: var(--gt-gold);
}

body.guest-theme .footer-links a:hover {
    color: var(--gt-gold);
    text-decoration: none;
}

body.guest-theme .footer-links .contact-info li i {
    color: var(--gt-gold);
}

body.guest-theme .footer-social a {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--gt-white);
}

body.guest-theme .footer-social a:hover {
    background: var(--gt-gold);
    border-color: var(--gt-gold);
    color: var(--gt-ink);
}

body.guest-theme .footer-bottom {
    background: rgba(9, 18, 38, 0.2);
    border-top-color: rgba(255, 255, 255, 0.08);
}

/* ========================================
   Inner page banners
   About, Services, Clinics, Apply and Recommendations all open on the
   same light #F7F2E8 band under the ink navbar: dark heading, muted
   subtitle, optional white icon badge, compact padding.
   (!important where legacy page CSS forces its own gradient/spacing.)
   ======================================== */
/* Every banner is the same height with its heading at the same spot, so
   pages line up when you move between them. Two subtitle lines fit. */
body.guest-theme {
    --gt-banner-h: 300px;
}

body.guest-theme :is(.page-header, .about-hero, .services-hero, .apply-header, .dss-hero) {
    position: relative;
    display: block !important;
    box-sizing: border-box;
    min-height: var(--gt-banner-h) !important;
    margin-top: 0 !important;
    padding: calc(var(--gt-nav-h) + clamp(36px, 4.5vw, 56px)) 0 clamp(36px, 4.5vw, 56px) !important;
    background: var(--gt-banner) !important;
    border-bottom: 1px solid var(--gt-line);
    color: var(--gt-ink);
    text-align: center;
}

body.guest-theme :is(.page-header, .dss-hero)::before {
    content: none;
    display: none;
}

body.guest-theme :is(.page-header, .about-hero, .services-hero, .apply-header, .dss-hero) .container {
    min-height: 0 !important;
}

body.guest-theme :is(.page-header, .about-hero, .services-hero, .apply-header, .dss-hero) h1 {
    min-height: 0 !important;
    margin: 0 0 10px !important;
    font-size: clamp(2rem, 1.35rem + 1.7vw, 2.75rem) !important;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--gt-ink) !important;
    text-shadow: none !important;
}

body.guest-theme :is(.page-header, .about-hero, .services-hero, .apply-header, .dss-hero) p {
    max-width: 640px;
    min-height: 0 !important;
    margin: 0 auto !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: var(--gt-muted) !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* Clinics and Apply headers used fixed grid rows sized for the old icon */
body.guest-theme :is(.clinics-header-content, .apply-header-content) {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 760px;
    min-height: 0;
    margin: 0 auto;
    padding: 0;
    row-gap: 0;
}

/* Banners follow the Figma: title + subtitle, no icon badge */
body.guest-theme :is(.clinics-header-icon, .apply-icon),
body.guest-theme .dss-hero h1 i {
    display: none !important;
}

/* ---------- Find a clinic ----------
   One search "console": clinic name, location, service and rating sit in a
   single rounded bar that overlaps the banner edge. Each segment lights up
   on hover, lifts when focused, and turns navy once it holds a value.
   Markup and form fields are unchanged; this is layout and styling only. */
/* Patient pages (user/): the same #FFFBF3 banner, left-aligned because these
   headers carry breadcrumbs and a page action on the right */
body.guest-theme .page-hero {
    box-sizing: border-box;
    min-height: var(--gt-banner-h);
    padding: calc(var(--gt-nav-h) + clamp(36px, 4.5vw, 56px)) 0 clamp(36px, 4.5vw, 56px);
    background: var(--gt-banner);
    border-bottom: 1px solid var(--gt-line);
    color: var(--gt-ink);
}

body.guest-theme .page-hero::before,
body.guest-theme .page-hero::after {
    content: none;
}

body.guest-theme .page-hero h1 {
    margin-bottom: 10px;
    font-size: clamp(2rem, 1.35rem + 1.7vw, 2.75rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--gt-ink);
}

body.guest-theme .page-hero h1 i {
    display: none;
}

body.guest-theme .page-hero p {
    max-width: 560px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--gt-muted);
    opacity: 1;
}

body.guest-theme .page-hero .breadcrumbs {
    margin-top: 14px;
    color: var(--gt-muted);
    opacity: 1;
}

body.guest-theme .page-hero .breadcrumbs a {
    color: var(--gt-navy);
    font-weight: 600;
}

body.guest-theme .page-hero .btn-light {
    min-height: 46px;
    padding: 0 22px;
    border-radius: 999px;
    background: var(--gt-navy);
    color: var(--gt-white);
    box-shadow: 0 10px 22px -12px rgba(45, 69, 122, 0.8);
}

body.guest-theme .page-hero .btn-light:hover {
    background: var(--gt-navy-dark);
    color: var(--gt-white);
}

/* ---------- Patient pages (My Appointments to Profile Settings) ----------
   Same header on each (Figma): a large title on the left, the page's main
   button on the right, over a full-width rule. */
body.guest-theme .patient-page-head {
    padding: calc(var(--gt-nav-h) + clamp(30px, 4vw, 46px)) 0 clamp(22px, 2.6vw, 30px);
    border-bottom: 1px solid var(--gt-line);
}

body.guest-theme .patient-page-head .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
}

body.guest-theme .patient-page-head h1 {
    margin: 0;
    font-size: clamp(2rem, 1.5rem + 1.4vw, 2.6rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--gt-ink);
}

body.guest-theme .page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

/* The header button: white, navy edge, navy icon */
body.guest-theme .page-actions .btn-light {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 20px;
    border: 1.5px solid var(--gt-navy);
    border-radius: 999px;
    background: var(--gt-white);
    box-shadow: none;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--gt-ink);
    transform: none;
}

body.guest-theme .page-actions .btn-light i {
    font-size: 17px;
    color: var(--gt-navy);
}

body.guest-theme .page-actions .btn-light:hover {
    background: var(--gt-tint);
    color: var(--gt-ink);
    transform: none;
}

/* Main buttons inside these pages: navy pills at a normal size (an empty
   state's button no longer stretches across its card) */
body.guest-theme .page-content .empty-state-modern .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    min-height: 44px;
    padding: 0 22px;
    border-radius: 999px;
    font-size: 14.5px;
    font-weight: 600;
}

/* My Appointments toolbar: the filters in one outlined group; the search
   field with its Search button */
body.guest-theme .appt-toolbar {
    margin-bottom: 22px;
}

body.guest-theme .appt-toolbar .filter-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1.5px solid var(--gt-navy);
    border-radius: 12px;
    background: var(--gt-white);
    box-shadow: none;
}

body.guest-theme .appt-toolbar .filter-tab {
    padding: 8px 18px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--gt-ink);
}

body.guest-theme .appt-toolbar .filter-tab:hover {
    background: var(--gt-mist);
    color: var(--gt-ink);
}

body.guest-theme .appt-toolbar .filter-tab.active {
    background: var(--gt-navy);
    color: var(--gt-white);
}

body.guest-theme .appt-search {
    display: flex;
    align-items: center;
    width: min(100%, 320px);
    padding-left: 14px;
    border: 1.5px solid var(--gt-navy);
    border-radius: 999px;
    background: var(--gt-white);
}

body.guest-theme .appt-search:focus-within {
    box-shadow: 0 0 0 4px rgba(195, 224, 255, 0.7);
}

body.guest-theme .appt-search > i {
    font-size: 15px;
    color: var(--gt-navy);
}

body.guest-theme .appt-search input {
    flex: 1;
    min-width: 0;
    height: 42px;
    padding: 0 10px;
    border: 0;
    background: transparent;
    font-size: 13.5px;
    color: var(--gt-ink);
    outline: none;
}

body.guest-theme .appt-search-btn {
    align-self: stretch;
    margin: -1.5px -1.5px -1.5px 0;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: var(--gt-navy);
    font-size: 14px;
    font-weight: 600;
    color: var(--gt-white);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

body.guest-theme .appt-search-btn:hover {
    background: var(--gt-navy-dark);
}

/* The table: navy header with thin dividers, ruled rows, and a navy scroll
   bar once there are more appointments than fit */
body.guest-theme .appt-table-card {
    overflow: hidden;
    border: 1px solid var(--gt-line);
    border-radius: 18px;
    background: var(--gt-white);
    box-shadow: 0 12px 30px -18px rgba(9, 18, 38, 0.35);
}

body.guest-theme .appt-table-scroll {
    height: 470px;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--gt-navy) transparent;
}

body.guest-theme .appt-table {
    width: 100%;
    min-width: 860px;
    border-collapse: separate;
    border-spacing: 0;
}

body.guest-theme .appt-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 15px 12px;
    background: var(--gt-navy);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    color: var(--gt-white);
}

body.guest-theme .appt-table thead th + th {
    background-image: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 1px 58%;
}

body.guest-theme .appt-table tbody td {
    padding: 18px 12px;
    border-bottom: 1px solid rgba(45, 69, 122, 0.45);
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
    color: var(--gt-ink);
}

body.guest-theme .appt-table .appt-time {
    display: block;
}

body.guest-theme .appt-status {
    font-weight: 600;
}

body.guest-theme .appt-status.is-pending,
body.guest-theme .appt-status.is-awaiting {
    color: #B7791F;
}

body.guest-theme .appt-status.is-confirmed {
    color: var(--gt-navy);
}

body.guest-theme .appt-status.is-completed {
    color: #15803D;
}

body.guest-theme .appt-status.is-cancelled {
    color: #B91C1C;
}

body.guest-theme .appt-view-btn {
    padding: 7px 24px;
    border: 1px solid var(--gt-gold);
    border-radius: 999px;
    background: #FFF6D8;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--gt-ink);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

body.guest-theme .appt-view-btn:hover {
    background: #FCEBB6;
}

body.guest-theme .appt-table-card .empty-state-modern {
    border: 0;
    box-shadow: none;
}

/* View: the appointment's full card in a panel */
body.guest-theme .appt-detail-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(9, 18, 38, 0.5);
}

body.guest-theme .appt-detail-modal[hidden] {
    display: none;
}

body.guest-theme .appt-detail-dialog {
    display: flex;
    flex-direction: column;
    width: min(100%, 680px);
    max-height: min(88vh, 760px);
    overflow: hidden;
    border-radius: 18px;
    background: var(--gt-mist);
    box-shadow: 0 30px 70px -20px rgba(9, 18, 38, 0.5);
}

body.guest-theme .appt-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--gt-line);
    background: var(--gt-white);
}

body.guest-theme .appt-detail-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--gt-navy);
}

body.guest-theme .appt-detail-close {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font-size: 17px;
    color: var(--gt-muted);
    cursor: pointer;
}

body.guest-theme .appt-detail-close:hover {
    background: var(--gt-mist);
    color: var(--gt-ink);
}

body.guest-theme .appt-detail-body {
    padding: 18px;
    overflow-y: auto;
}

body.guest-theme .appt-detail-body .appointment-card-modern {
    margin: 0;
}

body.appt-detail-open {
    overflow: hidden;
}

/* A side card beside a page's main column (Dental Records' filter, Profile
   Settings' menu) runs the column's full height, so the two end level */
body.guest-theme :is(.records-layout-modern, .profile-layout-modern) {
    align-items: stretch;
}

body.guest-theme :is(.records-sidebar-modern, .profile-sidebar-modern) {
    position: static;
    height: auto;
}

@media (max-width: 768px) {
    body.guest-theme .appt-toolbar {
        align-items: stretch;
    }

    body.guest-theme .appt-toolbar .filter-tabs {
        overflow-x: auto;
    }

    body.guest-theme .appt-search {
        width: 100%;
    }

    body.guest-theme .appt-table-scroll {
        height: 420px;
    }
}

/* A patient's name shows with capital initials however it was typed at
   sign-up ("keith" shows as "Keith"); only the display changes */
body.guest-theme .navbar .profile-name,
body.guest-theme .navbar .dropdown-header h4,
body.guest-theme .user-hero .hero-welcome h1 span,
body.guest-theme .profile-name-modern {
    text-transform: capitalize;
}

/* Patient dashboard greeting: same light banner; the quick actions move
   onto the navy/tint palette */
body.guest-theme .user-hero {
    padding: calc(var(--gt-nav-h) + clamp(32px, 4vw, 52px)) 0 clamp(32px, 4vw, 52px);
    background: var(--gt-banner);
    border-bottom: 1px solid var(--gt-line);
    color: var(--gt-ink);
}

body.guest-theme .user-hero .hero-welcome h1 {
    font-size: clamp(2rem, 1.35rem + 1.7vw, 2.75rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--gt-ink);
}

body.guest-theme .user-hero .hero-welcome h1 span {
    color: var(--gt-navy);
}

body.guest-theme .user-hero .hero-welcome p {
    color: var(--gt-muted);
    opacity: 1;
}

body.guest-theme .user-hero .quick-action-btn {
    gap: 10px;
    padding: 18px 22px;
    border: 1px solid var(--gt-line);
    border-radius: 18px;
    background: var(--gt-white);
    box-shadow: var(--gt-shadow);
    color: var(--gt-ink);
}

body.guest-theme .user-hero .quick-action-btn i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--gt-tint);
    font-size: 19px;
    color: var(--gt-navy);
    transition: background-color 0.25s ease, color 0.25s ease;
}

body.guest-theme .user-hero .quick-action-btn span {
    font-size: 13.5px;
    font-weight: 600;
}

body.guest-theme .user-hero .quick-action-btn:hover {
    border-color: rgba(45, 69, 122, 0.3);
    background: var(--gt-white);
    box-shadow: var(--gt-shadow-lift);
}

body.guest-theme .user-hero .quick-action-btn:hover i {
    background: var(--gt-navy);
    color: var(--gt-white);
}

/* About's banner runs straight into the mission cards, so it sizes to its text */
body.guest-theme.about-page .about-hero {
    min-height: 0 !important;
}

body.guest-theme .search-section {
    margin-top: -46px;
    background: transparent;
}

body.guest-theme .search-filters-box {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) repeat(3, minmax(0, 1fr)) auto;
    align-items: center;
    padding: 8px;
    border: 1px solid var(--gt-line);
    border-radius: 999px;
    background: var(--gt-white);
    box-shadow: 0 2px 4px rgba(9, 18, 38, 0.04), 0 26px 50px -26px rgba(45, 69, 122, 0.42);
    transition: background-color 0.3s ease;
}

body.guest-theme .search-filters-box:focus-within {
    background: var(--gt-mist);
}

/* The filter row's children join the console grid directly */
body.guest-theme .search-filters-box .filter-row {
    display: contents;
}

body.guest-theme .search-filters-box :is(.search-bar, .filter-item) {
    position: relative;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 1px;
    align-content: center;
    align-items: center;
    height: 64px;
    margin: 0;
    padding: 0 18px 0 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

body.guest-theme .search-filters-box :is(.search-bar, .filter-item):hover {
    background: var(--gt-mist);
}

body.guest-theme .search-filters-box:focus-within :is(.search-bar, .filter-item):hover {
    background: rgba(255, 255, 255, 0.6);
}

body.guest-theme .search-filters-box :is(.search-bar, .filter-item):focus-within {
    background: var(--gt-white);
    box-shadow: 0 10px 26px -12px rgba(9, 18, 38, 0.3);
}

/* Hairline dividers between segments, hidden next to an active one */
body.guest-theme .search-filters-box .filter-item::after {
    content: '';
    position: absolute;
    left: 0;
    top: 18px;
    bottom: 18px;
    width: 1px;
    background: var(--gt-line);
    transition: opacity 0.2s ease;
}

body.guest-theme .search-filters-box .filter-item:is(:hover, :focus-within)::after,
body.guest-theme .search-filters-box .filter-item:is(:hover, :focus-within) + .filter-item::after,
body.guest-theme .search-filters-box:has(.search-bar:is(:hover, :focus-within)) .filter-item:first-child::after {
    opacity: 0;
}

/* Icon discs: the search segment reuses its own icon; filters get one */
body.guest-theme .search-filters-box .search-bar > i,
body.guest-theme .search-filters-box .filter-item::before {
    grid-column: 1;
    grid-row: 1 / 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    border-radius: 50%;
    background: var(--gt-tint);
    color: var(--gt-navy);
    font-size: 15px;
    transition: background-color 0.25s ease, color 0.25s ease;
}

body.guest-theme .search-filters-box .filter-item::before {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    line-height: 1;
}

body.guest-theme .search-filters-box .filter-item:nth-child(1)::before { content: '\f3c5'; }
body.guest-theme .search-filters-box .filter-item:nth-child(2)::before { content: '\f5c9'; }
body.guest-theme .search-filters-box .filter-item:nth-child(3)::before { content: '\f005'; }

body.guest-theme .search-filters-box :is(.search-bar, .filter-item):focus-within > i,
body.guest-theme .search-filters-box .filter-item:focus-within::before,
body.guest-theme .search-filters-box .search-bar:has(input:not(:placeholder-shown)) > i,
body.guest-theme .search-filters-box .filter-item:has(option:checked:not([value=""]))::before {
    background: var(--gt-navy);
    color: var(--gt-white);
}

/* Small caption above each value */
body.guest-theme .search-filters-box .search-bar::before,
body.guest-theme .search-filters-box .filter-item label {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.02em;
    color: var(--gt-ink);
}

body.guest-theme .search-filters-box .search-bar::before {
    content: 'Clinic';
}

body.guest-theme .search-filters-box .search-bar input,
body.guest-theme .search-filters-box .filter-item select {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    width: 100%;
    min-width: 0;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--gt-muted);
    text-overflow: ellipsis;
    cursor: pointer;
    outline: none;
}

body.guest-theme .search-filters-box .search-bar input {
    cursor: text;
}

body.guest-theme .search-filters-box .search-bar input::placeholder {
    color: #8E97A8;
}

body.guest-theme .search-filters-box .filter-item select {
    padding-right: 20px;
    background-position: right 0 center;
    background-size: 13px;
}

/* A segment that holds a value reads in navy */
body.guest-theme .search-filters-box .search-bar:has(input:not(:placeholder-shown)) input,
body.guest-theme .search-filters-box .filter-item:has(option:checked:not([value=""])) select {
    font-weight: 600;
    color: var(--gt-navy);
}

body.guest-theme .search-filters-box .filter-btn {
    gap: 10px;
    height: 56px;
    margin-left: 8px;
    padding: 0 28px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 10px 22px -12px rgba(45, 69, 122, 0.8);
}

body.guest-theme .search-filters-box .filter-btn:hover {
    transform: translateY(-1px);
}

/* Themed dropdown menus (assets/js/gt-select.js). The native select stays
   in the form, hidden, and the button + list below stand in for it. */
body.guest-theme .gt-select-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0 !important;
    opacity: 0;
    pointer-events: none;
}

body.guest-theme .gt-select-host {
    position: relative;
}

body.guest-theme .gt-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--gt-font);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--gt-muted);
    text-align: left;
    cursor: pointer;
}

body.guest-theme .gt-select-trigger:focus-visible {
    outline: none;
}

.gt-select-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gt-select-chevron {
    flex-shrink: 0;
    width: 13px;
    height: 13px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232D457A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 0.25s var(--gt-ease);
}

.gt-select-host.is-open .gt-select-chevron {
    transform: rotate(180deg);
}

/* In the search console the trigger sits where the select was */
body.guest-theme .search-filters-box .filter-item .gt-select-trigger {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
}

body.guest-theme .search-filters-box .filter-item:has(option:checked:not([value=""])) .gt-select-trigger {
    font-weight: 600;
    color: var(--gt-navy);
}

body.guest-theme .search-filters-box .filter-item.is-open {
    background: var(--gt-white);
    box-shadow: 0 10px 26px -12px rgba(9, 18, 38, 0.3);
}

body.guest-theme .search-filters-box .filter-item.is-open::before {
    background: var(--gt-navy);
    color: var(--gt-white);
}

/* "Sort by" in the results bar: a pill */
body.guest-theme .results-sort .gt-select-trigger {
    min-height: 40px;
    width: auto;
    padding: 0 14px 0 16px;
    border: 1px solid var(--gt-line);
    border-radius: 999px;
    background: var(--gt-white);
    font-size: 14px;
    font-weight: 600;
    color: var(--gt-ink);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.guest-theme .results-sort .gt-select-trigger:hover,
body.guest-theme .results-sort.is-open .gt-select-trigger {
    border-color: var(--gt-navy);
}

body.guest-theme .results-sort .gt-select-trigger:focus-visible {
    box-shadow: 0 0 0 4px rgba(195, 224, 255, 0.7);
}

/* The menu itself */
@keyframes gt-menu-in {
    from { opacity: 0; translate: 0 -6px; }
    to { opacity: 1; translate: none; }
}

body.guest-theme .gt-select-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 60;
    width: max-content;
    min-width: 100%;
    max-width: min(340px, calc(100vw - 32px));
    max-height: 300px;
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    border: 1px solid var(--gt-line);
    border-radius: 16px;
    background: var(--gt-white);
    box-shadow: var(--gt-shadow-lift);
    list-style: none;
    outline: none;
    cursor: default;
    animation: gt-menu-in 0.18s ease-out;
    scrollbar-width: thin;
    scrollbar-color: #C9D3E3 transparent;
}

body.guest-theme .gt-select-menu[hidden] {
    display: none;
}

body.guest-theme .results-sort .gt-select-menu {
    left: auto;
    right: 0;
    min-width: 200px;
}

body.guest-theme .gt-select-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14.5px;
    line-height: 1.3;
    color: var(--gt-ink);
    white-space: nowrap;
    cursor: pointer;
}

body.guest-theme .gt-select-option.is-active {
    background: var(--gt-mist);
}

body.guest-theme .gt-select-option[aria-selected="true"] {
    font-weight: 600;
    color: var(--gt-navy);
}

/* Check mark on the chosen option */
body.guest-theme .gt-select-option[aria-selected="true"]::after {
    content: '';
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232D457A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12.5 10 17.5 19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Rating filter: star icons drawn by gt-select.js (data-stars options) */
.gt-select-rating {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.gt-select-stars {
    display: inline-flex;
    gap: 3px;
    font-size: 13px;
    color: var(--gt-gold);
}

/* In the menu (as in the Figma): larger stars spread across the whole row.
   The chosen row is shaded instead of ticked, as the stars take the check
   mark's room. */
body.guest-theme .gt-select-option .gt-select-rating,
body.guest-theme .gt-select-option .gt-select-stars {
    flex: 1;
}

body.guest-theme .gt-select-option .gt-select-stars {
    justify-content: space-between;
    font-size: 22px;
}

body.guest-theme .gt-select-option:has(.gt-select-rating)[aria-selected="true"] {
    background: var(--gt-mist);
}

body.guest-theme .gt-select-option:has(.gt-select-rating)[aria-selected="true"]::after {
    content: none;
}

/* Symptom checker step 1: how many symptoms are ticked, beside the heading */
body.guest-theme .dss-count {
    margin-left: auto;
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--gt-navy);
    color: var(--gt-white);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
}

body.guest-theme .dss-count.is-empty {
    background: var(--gt-mist);
    color: var(--gt-muted);
}

/* Results toolbar */
body.guest-theme .clinics-results {
    padding: clamp(32px, 4vw, 48px) 0 var(--gt-section-y);
}

/* The section is a flex column, which would shrink the centred
   container to its content (a narrow column when there are no results) */
body.guest-theme .clinics-results > .container {
    width: 100%;
}

body.guest-theme .clinics-results .results-header {
    width: 100%;
    max-width: none;
    margin: 0 0 24px;
    padding: 0 0 18px;
    border-bottom: 1px solid var(--gt-line);
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
}

body.guest-theme .results-count {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: var(--gt-muted);
}

body.guest-theme .results-count strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border-radius: 10px;
    background: var(--gt-navy);
    font-size: 15px;
    font-weight: 700;
    color: var(--gt-white);
}

body.guest-theme .results-sort label {
    font-size: 14px;
    color: var(--gt-muted);
}

body.guest-theme .results-sort select {
    min-height: 40px;
    padding: 0 38px 0 16px;
    border: 1px solid var(--gt-line);
    border-radius: 999px;
    background: var(--gt-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232D457A' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 14px center / 13px;
    -webkit-appearance: none;
    appearance: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--gt-ink);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.guest-theme .results-sort select:hover {
    border-color: var(--gt-navy);
}

body.guest-theme .results-sort select:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(195, 224, 255, 0.7);
}

/* Clinic cards */
body.guest-theme .clinics-results .clinics-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

body.guest-theme .clinics-results .clinic-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--gt-line);
    border-radius: var(--gt-radius);
    background: var(--gt-white);
    box-shadow: var(--gt-shadow);
    transition: opacity 0.5s ease, transform 0.45s var(--gt-ease), box-shadow 0.45s var(--gt-ease), border-color 0.3s ease;
}

body.guest-theme .clinics-results .clinic-card:hover {
    transform: translateY(-6px);
    border-color: rgba(45, 69, 122, 0.25);
    box-shadow: var(--gt-shadow-lift);
}

body.guest-theme .clinics-results .clinic-image {
    height: auto;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, var(--gt-navy) 0%, var(--gt-ink) 100%);
}

/* Tooth mark shows through when a clinic has no cover photo */
body.guest-theme .clinics-results .clinic-image::before {
    content: '\f5c9';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 46px;
    color: rgba(219, 186, 109, 0.75);
}

body.guest-theme .clinics-results .clinic-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(9, 18, 38, 0) 55%, rgba(9, 18, 38, 0.35) 100%);
    pointer-events: none;
}

body.guest-theme .clinics-results .clinic-image img {
    position: relative;
    z-index: 0;
    transition: transform 0.7s var(--gt-ease);
}

body.guest-theme .clinics-results .clinic-card:hover .clinic-image img {
    transform: scale(1.05);
}

body.guest-theme .clinic-badge {
    z-index: 1;
    top: 14px;
    left: 14px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--gt-gold);
    box-shadow: none;
    font-size: 12px;
    font-weight: 700;
    color: var(--gt-ink);
}

body.guest-theme .clinics-results .favorite-btn {
    z-index: 1;
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
}

body.guest-theme .clinics-results .clinic-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 18px 22px 22px;
}

body.guest-theme .clinics-results .clinic-rating {
    margin-bottom: 8px;
    font-size: 14px;
}

body.guest-theme .clinics-results .clinic-rating i {
    color: var(--gt-gold);
}

body.guest-theme .clinics-results .clinic-rating .rating-count {
    color: var(--gt-muted);
}

body.guest-theme .clinics-results .clinic-info h3 {
    margin-bottom: 6px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--gt-ink);
}

body.guest-theme .clinics-results .clinic-location {
    margin-bottom: 14px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--gt-muted);
}

body.guest-theme .clinics-results .clinic-location i {
    color: var(--gt-gold-deep);
}

body.guest-theme .clinic-services {
    gap: 6px;
    margin-bottom: 14px;
}

body.guest-theme .clinic-services-offered .service-tag {
    padding: 5px 11px;
    border: 0;
    border-radius: 999px;
    background: var(--gt-tint);
    font-size: 12px;
    font-weight: 600;
    color: var(--gt-navy);
}

body.guest-theme .clinic-hours {
    align-self: flex-start;
    gap: 7px;
    margin-bottom: 18px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
}

body.guest-theme .clinic-hours.open {
    background: rgba(47, 163, 107, 0.12);
    color: #1E7A4E;
}

body.guest-theme .clinic-hours.closed {
    background: var(--gt-mist);
    color: var(--gt-muted);
}

body.guest-theme .clinics-results .clinic-actions {
    margin-top: auto;
    gap: 10px;
}

body.guest-theme .clinics-results .clinic-actions .btn {
    min-height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
}

/* Empty state: icon with two soft rings that keep spreading outward */
body.guest-theme .clinics-results .empty-state {
    max-width: 560px;
    margin: 8px auto 0;
    padding: clamp(36px, 5vw, 52px) clamp(22px, 4vw, 40px);
    border: 1px solid var(--gt-line);
    border-radius: var(--gt-radius-lg);
    background: var(--gt-white);
    box-shadow: var(--gt-shadow);
}

body.guest-theme .clinics-results .empty-state-icon {
    position: relative;
    width: 84px;
    height: 84px;
    margin: 0 auto 26px;
    background: var(--gt-tint);
}

body.guest-theme .clinics-results .empty-state-icon i {
    position: relative;
    z-index: 1;
    font-size: 32px;
    color: var(--gt-navy);
}

body.guest-theme .clinics-results .empty-state-icon::before,
body.guest-theme .clinics-results .empty-state-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1.5px solid rgba(45, 69, 122, 0.22);
    border-radius: 50%;
    animation: gt-ring 3.2s ease-out infinite;
}

body.guest-theme .clinics-results .empty-state-icon::after {
    animation-delay: 1.6s;
}

@keyframes gt-ring {
    from { opacity: 0.9; scale: 1; }
    to { opacity: 0; scale: 1.7; }
}

body.guest-theme .clinics-results .empty-state h3 {
    margin-bottom: 10px;
    font-size: 22px;
    font-weight: 700;
    color: var(--gt-ink);
}

body.guest-theme .clinics-results .empty-state p {
    max-width: 420px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.65;
    color: var(--gt-muted);
}

body.guest-theme .clinics-results .empty-state .btn {
    margin-top: 22px;
}

@media (max-width: 1024px) {
    body.guest-theme .clinics-results .clinics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Narrower screens: the console becomes a card of stacked fields */
@media (max-width: 960px) {
    body.guest-theme .search-section {
        margin-top: -40px;
    }

    body.guest-theme .page-header.clinics-page-header {
        padding-bottom: calc(clamp(36px, 4.5vw, 56px) + 40px) !important;
    }

    body.guest-theme .search-filters-box {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 10px;
        border-radius: 26px;
    }

    body.guest-theme .search-filters-box .search-bar {
        grid-column: 1 / -1;
    }

    body.guest-theme .search-filters-box :is(.search-bar, .filter-item) {
        height: 62px;
        border-radius: 18px;
        background: var(--gt-mist);
    }

    body.guest-theme .search-filters-box .filter-item::after {
        content: none;
    }

    body.guest-theme .search-filters-box .filter-btn {
        height: 62px;
        margin: 0;
        border-radius: 18px;
    }
}

@media (max-width: 600px) {
    body.guest-theme .search-filters-box {
        grid-template-columns: 1fr;
    }

    body.guest-theme .clinics-results .clinics-grid {
        grid-template-columns: 1fr;
    }

    body.guest-theme .clinics-results .results-header {
        align-items: center;
    }
}

/* On phones banners size to their text; heights would differ anyway once
   subtitles wrap to different line counts */
@media (max-width: 768px) {
    body.guest-theme {
        --gt-banner-h: 0px;
    }
}

/* Clinic Application: on the first step (no Previous button) Next still
   sits on the right */
body.guest-theme .form-navigation .btn-next {
    margin-left: auto;
}

/* Recommendations: less dead space between the banner and the stepper */
body.guest-theme .dss-content {
    padding-top: clamp(36px, 4.5vw, 56px);
}

/* ---------- About: hero + mission band ----------
   One continuous #F7F2E8 band: title, then the two cards. */
body.guest-theme.about-page .about-hero {
    padding-bottom: 12px !important;
    border-bottom: 0;
}

body.guest-theme.about-page .about-hero .gt-script .gt-cav { color: var(--gt-navy); }
body.guest-theme.about-page .about-hero .gt-script .gt-clinics { color: var(--gt-gold); }

body.guest-theme.about-page .mission-vision-section {
    margin-top: 0 !important;
    padding: 28px 0 clamp(48px, 6vw, 72px) !important;
    background: var(--gt-banner) !important;
    border-bottom: 1px solid var(--gt-line);
}

body.guest-theme.about-page .mv-card {
    padding: clamp(28px, 3.2vw, 40px) clamp(24px, 3vw, 40px);
    border: 1px solid var(--gt-line);
    border-radius: var(--gt-radius-lg);
    box-shadow: 0 1px 2px rgba(9, 18, 38, 0.04), 0 18px 40px -26px rgba(9, 18, 38, 0.3);
    transition: transform 0.45s var(--gt-ease), box-shadow 0.45s var(--gt-ease);
}

body.guest-theme.about-page .mv-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--gt-shadow-lift);
}

body.guest-theme.about-page .mv-card .mv-icon {
    width: 72px;
    height: 72px;
    margin-bottom: 20px;
    font-size: 28px;
    background: var(--gt-tint);
    color: var(--gt-navy);
    /* Outer ring: dark blue (was a beige tint) */
    box-shadow: 0 0 0 8px var(--gt-navy);
    transition: background-color 0.35s ease, color 0.35s ease;
}

body.guest-theme.about-page .mv-card:hover .mv-icon {
    background: var(--gt-navy);
    color: var(--gt-white);
}

body.guest-theme.about-page .mv-card h2 {
    margin-bottom: 12px;
    font-size: clamp(1.35rem, 1.1rem + 0.6vw, 1.6rem);
}

/* ---------- About: feature explorer ----------
   Tabs on the left, a photo stage on the right. guest-motion.js advances
   when the active tab's progress bar finishes; hover pauses it. */
body.guest-theme.about-page .gt-explore {
    padding: var(--gt-section-y) 0;
}

.gt-explorer {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: stretch;
}

.gt-explorer-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

body.guest-theme .gt-explorer-tab {
    position: relative;
    display: grid;
    grid-template-columns: 28px 46px minmax(0, 1fr);
    column-gap: 14px;
    align-items: start;
    width: 100%;
    padding: 14px 18px 18px;
    border: 1px solid transparent;
    border-radius: 18px;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.4s ease, border-color 0.4s ease;
}

body.guest-theme .gt-explorer-tab:hover {
    background: rgba(255, 255, 255, 0.7);
}

body.guest-theme .gt-explorer-tab.is-active {
    background: var(--gt-white);
    border-color: var(--gt-line);
    box-shadow: var(--gt-shadow);
}

.gt-explorer-num {
    padding-top: 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--gt-gold-deep);
    font-variant-numeric: tabular-nums;
}

.gt-explorer-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--gt-line);
    background: var(--gt-white);
    color: var(--gt-navy);
    font-size: 21px;
    transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

.gt-explorer-tab.is-active .gt-explorer-icon {
    border-color: var(--gt-navy);
    background: var(--gt-navy);
    color: var(--gt-white);
}

.gt-explorer-title {
    display: block;
    padding-top: 11px;
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--gt-ink);
}

/* Description opens only on the active tab (0fr -> 1fr row) */
.gt-explorer-desc {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.55s var(--gt-ease);
}

.gt-explorer-tab.is-active .gt-explorer-desc {
    grid-template-rows: 1fr;
}

.gt-explorer-desc > span {
    min-height: 0;
    overflow: hidden;
}

.gt-explorer-desc > span > span {
    display: block;
    padding-top: 6px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--gt-muted);
}

.gt-explorer-progress {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 8px;
    height: 2px;
    overflow: hidden;
    border-radius: 2px;
    background: rgba(9, 18, 38, 0.08);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gt-explorer-tab.is-active .gt-explorer-progress {
    opacity: 1;
}

.gt-explorer-progress::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gt-gold);
    transform: scaleX(0);
    transform-origin: left center;
}

@keyframes gt-progress {
    to { transform: scaleX(1); }
}

.gt-explorer.is-playing .gt-explorer-tab.is-active .gt-explorer-progress::after {
    animation: gt-progress var(--gt-explorer-step, 6s) linear forwards;
}

.gt-explorer.is-paused .gt-explorer-tab.is-active .gt-explorer-progress::after {
    animation-play-state: paused;
}

.gt-explorer-stage {
    position: relative;
    isolation: isolate;
    display: grid;
    min-height: 440px;
    overflow: hidden;
    border-radius: var(--gt-radius-lg);
    background: var(--gt-ink);
    box-shadow: var(--gt-shadow-lift);
}

.gt-explorer-slide {
    position: relative;
    grid-area: 1 / 1;
    margin: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0s linear 0.8s;
}

.gt-explorer-slide.is-active {
    z-index: 1;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.8s ease;
}

.gt-explorer-slide img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    object-position: var(--gt-focus, center);
    scale: var(--gt-zoom, 1);
    transition: scale 7s ease-out;
}

/* Slow push-in while a slide is showing */
.gt-explorer-slide.is-active img {
    scale: calc(var(--gt-zoom, 1) * 1.07);
}

.gt-explorer-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(9, 18, 38, 0.1) 0%, rgba(9, 18, 38, 0) 35%, rgba(9, 18, 38, 0.78) 100%),
        linear-gradient(90deg, rgba(45, 69, 122, 0.28) 0%, rgba(45, 69, 122, 0) 60%);
}

.gt-explorer-chip {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(9, 18, 38, 0.45);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--gt-paper);
    font-variant-numeric: tabular-nums;
}

.gt-explorer-chip b {
    color: var(--gt-gold);
}

.gt-explorer-caption {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    border-radius: 20px;
    background: rgba(9, 18, 38, 0.42);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--gt-white);
    opacity: 0;
    translate: 0 14px;
    transition: opacity 0.6s ease 0.25s, translate 0.7s var(--gt-ease) 0.25s;
}

.gt-explorer-slide.is-active .gt-explorer-caption {
    opacity: 1;
    translate: none;
}

.gt-explorer-caption .gt-icon-badge {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    font-size: 24px;
    box-shadow: 0 0 0 6px rgba(219, 186, 109, 0.22);
}

.gt-explorer-caption strong {
    display: block;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--gt-white);
}

.gt-explorer-caption small {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.78);
}

/* ---------- About: stats ---------- */
body.guest-theme.about-page .about-stats-section {
    position: relative;
    overflow: hidden;
    padding: clamp(56px, 7vw, 84px) 0;
    background:
        radial-gradient(circle at 10% 0%, rgba(219, 186, 109, 0.18) 0%, rgba(219, 186, 109, 0) 36%),
        radial-gradient(circle at 92% 100%, rgba(195, 224, 255, 0.12) 0%, rgba(195, 224, 255, 0) 40%),
        linear-gradient(135deg, var(--gt-navy) 0%, var(--gt-ink) 100%);
}

body.guest-theme.about-page .about-stats-section .stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
}

body.guest-theme.about-page .about-stats-section .stat-item {
    padding: 8px 16px;
}

body.guest-theme.about-page .about-stats-section .stat-item + .stat-item {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

body.guest-theme.about-page .about-stats-section .stat-number {
    margin-bottom: 14px;
    font-size: clamp(2.5rem, 1.7rem + 2vw, 3.5rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--gt-white) !important;
}

.gt-stat-suffix {
    color: var(--gt-gold);
}

body.guest-theme.about-page .about-stats-section .stat-label {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--gt-on-dark-muted) !important;
    opacity: 1;
}

body.guest-theme.about-page .about-stats-section .stat-label::before {
    content: '';
    display: block;
    width: 22px;
    height: 2px;
    margin: 0 auto 12px;
    border-radius: 2px;
    background: var(--gt-gold);
}

/* ---------- About: team ---------- */
.gt-team-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 28px);
    margin-top: clamp(32px, 4vw, 48px);
}

.gt-team-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid var(--gt-line);
    background: var(--gt-white);
    box-shadow: var(--gt-shadow);
    transform: perspective(900px) rotateX(var(--gt-rx, 0deg)) rotateY(var(--gt-ry, 0deg));
    transition: transform 0.6s var(--gt-ease), box-shadow 0.5s var(--gt-ease);
}

.gt-team-card.is-tilting {
    transition: transform 0.12s linear, box-shadow 0.5s var(--gt-ease);
}

.gt-team-card:hover {
    box-shadow: var(--gt-shadow-lift);
}

/* Gold rule that draws across the bottom on hover */
.gt-team-card::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--gt-gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.5s var(--gt-ease);
}

.gt-team-card:hover::after {
    transform: scaleX(1);
}

.gt-team-photo {
    position: relative;
    aspect-ratio: 1 / 1.05;
    overflow: hidden;
    background: var(--gt-tint);
}

.gt-team-photo img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    transition: scale 0.8s var(--gt-ease), filter 0.6s ease;
}

.gt-team-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(9, 18, 38, 0) 55%, rgba(9, 18, 38, 0.35) 100%);
    pointer-events: none;
}

.gt-team-card:hover .gt-team-photo img {
    scale: 1.06;
}

.gt-team-glare {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(circle at var(--gt-mx, 50%) var(--gt-my, 0%), rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 50%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.gt-team-card:hover .gt-team-glare {
    opacity: 1;
}

body.guest-theme .gt-team-social {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    color: var(--gt-navy);
    font-size: 17px;
    transition: background-color 0.3s ease, color 0.3s ease, opacity 0.4s ease, translate 0.5s var(--gt-ease);
}

body.guest-theme .gt-team-social:hover {
    background: var(--gt-gold);
    color: var(--gt-ink);
}

.gt-team-body {
    padding: 18px 20px 22px;
}

.gt-team-role {
    display: block;
    margin-bottom: 6px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gt-gold-deep);
}

body.guest-theme .gt-team-body h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--gt-ink);
}

/* Pointer devices: photos sit slightly muted and warm up on hover, and the
   Instagram button slides in. Touch devices keep both always on. */
@media (hover: hover) and (pointer: fine) {
    .gt-team-photo img {
        filter: grayscale(0.4) saturate(0.9);
    }

    .gt-team-card:hover .gt-team-photo img {
        filter: none;
    }

    body.guest-theme .gt-team-social {
        opacity: 0;
        translate: 0 10px;
    }

    body.guest-theme .gt-team-card:hover .gt-team-social,
    body.guest-theme .gt-team-social:focus-visible {
        opacity: 1;
        translate: none;
    }
}

/* ---------- Services page ---------- */

/* Category filter: the same rounded white "console" as Find Clinics, the
   same size, overlapping the banner edge. It still sticks under the navbar. */
body.guest-theme .service-categories-section {
    top: var(--gt-nav-h);
    margin-top: -46px;
    padding: 0;
    background: transparent;
    border-bottom: 0;
}

body.guest-theme .category-tabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    align-items: center;
    gap: 0;
    padding: 8px;
    border: 1px solid var(--gt-line);
    border-radius: 999px;
    background: var(--gt-white);
    box-shadow: 0 2px 4px rgba(9, 18, 38, 0.04), 0 26px 50px -26px rgba(45, 69, 122, 0.42);
}

/* Each category is a segment of the bar, like the Find Clinics fields */
body.guest-theme .category-tab {
    position: relative;
    height: 64px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--gt-ink);
    white-space: nowrap;
    transition: background-color 0.25s ease, color 0.25s ease;
}

body.guest-theme .category-tab:hover {
    background: var(--gt-mist);
    color: var(--gt-navy);
}

body.guest-theme .category-tab.active {
    background: var(--gt-navy);
    color: var(--gt-white);
}

/* Hairline dividers between segments, hidden next to a highlighted one */
body.guest-theme .category-tab + .category-tab::after {
    content: '';
    position: absolute;
    left: 0;
    top: 18px;
    bottom: 18px;
    width: 1px;
    background: var(--gt-line);
    transition: opacity 0.2s ease;
}

body.guest-theme .category-tab:is(:hover, .active)::after,
body.guest-theme .category-tab:is(:hover, .active) + .category-tab::after {
    opacity: 0;
}

/* Narrower screens: same overlap as the Find Clinics console */
@media (max-width: 960px) {
    body.guest-theme .service-categories-section {
        margin-top: -40px;
    }

    body.guest-theme .services-hero {
        padding-bottom: calc(clamp(36px, 4.5vw, 56px) + 40px) !important;
    }
}

body.guest-theme .services-list-section {
    padding: clamp(40px, 5vw, 64px) 0 var(--gt-section-y);
}

body.guest-theme .service-category {
    margin-bottom: clamp(36px, 4vw, 52px);
    scroll-margin-top: calc(var(--gt-nav-h) + 100px);
}

body.guest-theme .service-category:last-child {
    margin-bottom: 0;
}

body.guest-theme .service-category h2 {
    margin-bottom: 20px;
    font-size: clamp(1.35rem, 1.1rem + 0.7vw, 1.65rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--gt-ink);
}

body.guest-theme .service-category h2 i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--gt-tint);
    color: var(--gt-navy);
    font-size: 18px;
}

body.guest-theme .services-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

/* Card (Figma): icon, title and duration pill across the top; the
   description under them; price pill and "Find Clinics" link along the
   bottom. The card's wrappers step aside (display: contents) so each piece
   takes its own place; the markup is unchanged. The "Treatment Simulation"
   badge keeps its own row above everything. */
body.guest-theme .services-list-section .service-detail-card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
        "badge badge badge"
        "icon  title duration"
        "desc  desc  desc"
        "price price link";
    column-gap: 16px;
    align-items: center;
    overflow: visible;
    padding: 22px 24px;
    border: 1px solid var(--gt-line);
    border-radius: var(--gt-radius);
    background: var(--gt-white);
    box-shadow: var(--gt-shadow);
    transition: transform 0.45s var(--gt-ease), box-shadow 0.45s var(--gt-ease), border-color 0.35s ease;
}

body.guest-theme .services-list-section .service-detail-card:hover {
    transform: translateY(-4px);
    border-color: rgba(219, 186, 109, 0.7);
    box-shadow: var(--gt-shadow-lift);
}

body.guest-theme .services-list-section .service-detail-card.featured {
    border-color: rgba(219, 186, 109, 0.75);
}

body.guest-theme .service-detail-card .featured-badge {
    position: static;
    grid-area: badge;
    justify-self: start;
    margin-bottom: 14px;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--gt-gold);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--gt-ink);
}

body.guest-theme .services-list-section .service-detail-card .service-image {
    grid-area: icon;
    width: 56px;
    height: 56px;
    min-height: 0;
    flex: none;
    /* a legacy 20px bottom margin made the row taller, so the icon sat
       above the title and duration instead of level with them */
    margin: 0;
    border: 1px solid var(--gt-line);
    border-radius: 16px;
    background: var(--gt-tint);
    transition: background-color 0.35s ease;
}

body.guest-theme .services-list-section .service-detail-card .service-image i {
    font-size: 22px;
    color: var(--gt-navy);
    transition: color 0.35s ease, transform 0.5s var(--gt-ease);
}

body.guest-theme .services-list-section .service-detail-card:hover .service-image {
    background: var(--gt-navy);
}

body.guest-theme .services-list-section .service-detail-card:hover .service-image i {
    color: var(--gt-white);
    transform: rotate(-8deg) scale(1.1);
}

body.guest-theme .services-list-section .service-detail-card :is(.service-content, .service-meta) {
    display: contents;
}

body.guest-theme .service-content h3 {
    grid-area: title;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--gt-navy);
}

body.guest-theme .services-list-section .service-content > p {
    grid-area: desc;
    align-self: start;
    margin: 16px 0 18px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--gt-muted);
}

/* Duration: a light gold pill at the top right */
body.guest-theme .service-meta .duration {
    grid-area: duration;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border: 1px solid var(--gt-gold);
    border-radius: 999px;
    background: #FFF6E2;
    font-size: 13px;
    font-weight: 500;
    color: var(--gt-ink);
    white-space: nowrap;
}

body.guest-theme .service-meta .duration i {
    color: var(--gt-gold);
}

/* Price: a soft blue tile at the bottom left */
body.guest-theme .service-meta .price {
    grid-area: price;
    justify-self: start;
    padding: 11px 16px;
    border: 1px solid var(--gt-line);
    border-radius: 16px;
    background: var(--gt-tint);
    font-size: 16px;
    font-weight: 700;
    color: var(--gt-navy);
}

/* Find Clinics: a link with a circled arrow, bottom right */
body.guest-theme .services-list-section .service-content .btn {
    grid-area: link;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-size: 15px;
    font-weight: 700;
    color: var(--gt-navy);
    text-decoration: none;
    white-space: nowrap;
}

body.guest-theme .services-list-section .service-content .btn::after {
    content: '\f35a';
    font-family: 'Font Awesome 6 Free';
    font-weight: 400;
    font-size: 18px;
    line-height: 1;
    transition: transform 0.25s var(--gt-ease);
}

body.guest-theme .services-list-section .service-content .btn:hover {
    background: none;
    color: var(--gt-navy-dark);
    transform: none;
}

body.guest-theme .services-list-section .service-content .btn:hover::after {
    transform: translateX(3px);
}

/* Decision support strip: soft blue band (a deeper step of the page's
   blue-white), navy icon and button */
body.guest-theme .dss-cta-section {
    padding: clamp(44px, 5.5vw, 68px) 0;
    background:
        radial-gradient(ellipse 520px 220px at 88% 0%, rgba(195, 224, 255, 0.55) 0%, rgba(195, 224, 255, 0) 100%),
        linear-gradient(135deg, #E8F0FA 0%, #DCE7F6 100%);
    border-top: 1px solid var(--gt-line);
}

body.guest-theme .dss-cta-content {
    gap: 20px 28px;
}

body.guest-theme .dss-icon {
    width: 72px;
    height: 72px;
    background: var(--gt-navy);
    color: var(--gt-white);
    font-size: 30px;
    box-shadow: 0 0 0 8px rgba(45, 69, 122, 0.1);
}

body.guest-theme .dss-text h2 {
    margin-bottom: 6px;
    font-size: clamp(1.4rem, 1.1rem + 0.9vw, 1.85rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--gt-ink);
}

body.guest-theme .dss-text p {
    font-size: 15.5px;
    color: var(--gt-muted);
}

body.guest-theme .dss-cta-section .btn {
    min-height: 50px;
    padding: 0 26px;
    border: 0;
    background: var(--gt-navy);
    color: var(--gt-white);
    box-shadow: 0 12px 26px -14px rgba(45, 69, 122, 0.8);
}

body.guest-theme .dss-cta-section .btn:hover {
    background: var(--gt-navy-dark);
    color: var(--gt-white);
    transform: translateY(-2px);
}

body.guest-theme .dss-cta-section .btn i {
    color: var(--gt-sky);
}

@media (max-width: 768px) {
    body.guest-theme .services-detail-grid {
        grid-template-columns: 1fr;
    }

    /* Legacy mobile CSS stacks the card around a huge icon block */
    body.guest-theme .services-list-section .service-detail-card {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr) auto;
        column-gap: 14px;
        padding: 18px;
        border-radius: 18px;
        background: var(--gt-white);
    }

    body.guest-theme .services-list-section .service-detail-card .service-image {
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }

    body.guest-theme .services-list-section .service-detail-card .service-image i {
        font-size: 19px;
    }

    /* Phones: the bar scrolls sideways instead of squeezing six segments */
    body.guest-theme .category-tabs {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
    }

    body.guest-theme .category-tab {
        flex-shrink: 0;
        height: 48px;
        padding: 0 16px;
    }
}

/* Phones: the duration pill drops under the title */
@media (max-width: 560px) {
    body.guest-theme .services-list-section .service-detail-card {
        grid-template-columns: 48px minmax(0, 1fr);
        grid-template-rows: auto auto auto 1fr auto;
        grid-template-areas:
            "badge badge"
            "icon  title"
            "icon  duration"
            "desc  desc"
            "price link";
        row-gap: 0;
    }

    body.guest-theme .service-meta .duration {
        justify-self: start;
        margin-top: 6px;
        padding: 5px 12px;
        font-size: 12.5px;
    }

    body.guest-theme .services-list-section .service-detail-card .service-image {
        align-self: center;
    }

    body.guest-theme .service-meta .price {
        font-size: 15px;
        padding: 9px 13px;
    }
}

/* ---------- Clinic page: cover and profile photo ----------
   The cover crossfades through the cover photo and the clinic's gallery
   photos (assets/js/clinic-cover.js). Each is the uploaded file itself,
   cropped to fill and never scaled up or zoomed, so it stays as sharp as it
   was uploaded. Cover and profile photo open full size when clicked. */
body.guest-theme .clinic-cover {
    overflow: hidden;
}

body.guest-theme .clinic-cover .clinic-cover-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s ease;
    cursor: zoom-in;
}

body.guest-theme .clinic-cover .clinic-cover-slide.is-active {
    opacity: 1;
}

/* Only the photo showing takes the click */
body.guest-theme .clinic-cover .clinic-cover-slide:not(.is-active) {
    pointer-events: none;
}

body.guest-theme .clinic-avatar .clinic-avatar-photo {
    cursor: zoom-in;
}

/* Page format (Figma): one two-column grid under the cover. Left: the
   clinic's details, About, Gallery, Dentists beside Services, then Reviews.
   Right: Save / Appointments, Contact Information, Operating Hours and Map
   Location. A list that holds more than its card fits scrolls inside it
   with a thin navy bar; one that fits shows no bar. */
body.guest-theme .clinic-content-section {
    padding-top: 0;
}

body.guest-theme .clinic-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
    gap: clamp(28px, 4.5vw, 64px);
    align-items: start;
}

body.guest-theme .clinic-sidebar {
    gap: 18px;
    padding-top: 24px;
}

/* Profile: the logo overlaps the cover; the name, verified seal and
   Open / Closed pill share a line */
body.guest-theme .clinic-main > .clinic-profile {
    align-items: flex-start;
    gap: 22px;
    margin: -64px 0 36px;
    padding: 0;
}

body.guest-theme .clinic-main > .clinic-profile .clinic-avatar {
    width: 160px;
    height: 160px;
    border: 5px solid var(--gt-white);
    border-radius: 20px;
    box-shadow: 0 10px 26px -14px rgba(9, 18, 38, 0.45);
}

/* The profile row starts 64px up on the cover; this puts the name just
   under the cover's edge */
body.guest-theme .clinic-main > .clinic-profile .clinic-main-info {
    padding: 84px 0 0;
}

body.guest-theme .clinic-profile .clinic-name-row {
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 6px;
}

body.guest-theme .clinic-profile .clinic-name-row h1 {
    margin: 0;
    font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.05rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--gt-ink);
}

body.guest-theme .clinic-profile .clinic-badges {
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

body.guest-theme .clinic-verified {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
}

body.guest-theme .clinic-verified .fa-certificate {
    font-size: 26px;
    color: #3B82F6;
}

body.guest-theme .clinic-verified .fa-check {
    position: absolute;
    font-size: 11px;
    color: var(--gt-white);
}

body.guest-theme .clinic-profile .clinic-status {
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

body.guest-theme .clinic-profile .clinic-status i {
    font-size: 7px;
}

body.guest-theme .clinic-profile .clinic-status.open {
    border-color: #86EFAC;
    background: #DCFCE7;
    color: #166534;
}

body.guest-theme .clinic-profile .clinic-status.closed {
    border-color: #FCA5A5;
    background: #FEE2E2;
    color: #991B1B;
}

body.guest-theme .clinic-profile .clinic-address {
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--gt-muted);
}

body.guest-theme .clinic-profile .rating-box {
    gap: 8px;
    font-size: 14px;
    color: var(--gt-muted);
}

body.guest-theme .clinic-profile .rating-box .rating {
    font-weight: 500;
    color: var(--gt-muted);
}

body.guest-theme .clinic-profile .rating-stars {
    display: inline-flex;
    gap: 2px;
    font-size: 14px;
    color: #F5B83D;
}

body.guest-theme .clinic-profile .rating-stars .is-empty {
    color: #C9CFDA;
}

/* Plain sections (About, Gallery, Dentists, Services): a heading over a
   rule, no card */
body.guest-theme .clinic-section.clinic-section--plain {
    margin-bottom: 32px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.guest-theme .clinic-section--plain > h2 {
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #CDD5E1;
    font-size: 15px;
    font-weight: 600;
    color: var(--gt-ink);
}

body.guest-theme .clinic-section--plain > h2 i {
    font-size: 16px;
    color: var(--gt-navy);
}

body.guest-theme .clinic-section--plain > p {
    font-size: 14px;
    line-height: 1.65;
    color: #3D4553;
}

/* Gallery: three photos across */
body.guest-theme .clinic-gallery .gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

body.guest-theme .clinic-gallery .gallery-grid img {
    aspect-ratio: 1.08;
    border-radius: 14px;
}

/* Dentists beside Services; either one alone takes the full width */
body.guest-theme .clinic-duo {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 32px;
}

body.guest-theme .clinic-duo > .clinic-section {
    flex: 1 1 0;
    min-width: 0;
    margin-bottom: 0;
}

body.guest-theme .clinic-duo > .clinic-dentists {
    flex-grow: 0.82;
}

/* Dentists / Staffs: one card each, stacked */
body.guest-theme .clinic-dentists .dentists-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 352px;
    overflow-y: auto;
}

body.guest-theme .clinic-dentists .dentist-card {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 18px;
    padding: 14px 16px;
    border: 1.5px solid var(--tv-card-border, #B0BDD2);
    border-radius: 14px;
    background: var(--gt-white);
    text-align: left;
}

body.guest-theme .clinic-dentists .dentist-card img {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    margin: 0;
    border: 1.5px solid var(--tv-card-border, #B0BDD2);
    border-radius: 50%;
    background: #EEF2F8;
    object-fit: cover;
}

body.guest-theme .clinic-dentists .dentist-info {
    min-width: 0;
}

body.guest-theme .clinic-dentists .dentist-card .specialty {
    margin: 0 0 2px;
    font-size: 13px;
    color: var(--gt-muted);
}

body.guest-theme .clinic-dentists .dentist-card h4 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--gt-navy);
}

/* Services Offered: compact rows in one card */
body.guest-theme .clinic-services-offered .services-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 236px;
    overflow-y: auto;
    padding: 6px;
    border: 1.5px solid var(--tv-card-border, #B0BDD2);
    border-radius: 14px;
    background: var(--gt-white);
}

body.guest-theme .clinic-services-offered .service-item {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 14px;
    border: 0;
    border-radius: 6px;
    background: #EEF2F8;
    box-shadow: none;
    transform: none;
}

body.guest-theme .clinic-services-offered .service-item:hover {
    background: #E4EAF4;
    box-shadow: none;
    transform: none;
}

body.guest-theme .clinic-services-offered .service-details {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    min-width: 0;
}

body.guest-theme .clinic-services-offered .service-details h4 {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--gt-navy);
}

body.guest-theme .clinic-services-offered .service-category-pill {
    padding: 2px 8px;
    border: 1px solid #F3DDAA;
    border-radius: 999px;
    background: #FFF1D6;
    font-size: 9.5px;
    color: var(--gt-ink);
    white-space: nowrap;
}

body.guest-theme .clinic-services-offered .service-term {
    font-size: 11px;
    color: var(--gt-muted);
}

body.guest-theme .clinic-services-offered .service-price {
    padding: 0;
    border-radius: 0;
    background: none;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--gt-navy);
    white-space: nowrap;
}

/* Patient Reviews: a card; the reviews run side by side and scroll */
body.guest-theme .clinic-section.clinic-reviews-card {
    margin-bottom: 0;
    padding: 18px 20px 14px;
    border-radius: 18px;
    background: var(--gt-white);
    box-shadow: none;
}

body.guest-theme .clinic-reviews-card .section-header {
    align-items: flex-start;
    margin-bottom: 14px;
    text-align: left;
}

body.guest-theme .clinic-reviews-card .section-header h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--gt-navy);
}

body.guest-theme .clinic-reviews-card .reviews-list {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-snap-type: x proximity;
}

body.guest-theme .clinic-reviews-card .review-card {
    flex: 0 0 300px;
    scroll-snap-align: start;
}

/* The scroll bars inside cards: thin and navy */
body.guest-theme :is(.clinic-services-offered .services-list, .clinic-dentists .dentists-grid, .clinic-reviews-card .reviews-list) {
    scrollbar-width: thin;
    scrollbar-color: var(--gt-navy) transparent;
}

/* Right column: Save / Appointments side by side */
body.guest-theme .clinic-sidebar .clinic-actions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 12px;
    width: auto;
    padding-top: 0;
    border-top: 0;      /* modern-ui.css rules a line over clinic-card actions */
}

body.guest-theme .clinic-actions .clinic-action-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: auto;
    min-height: 54px;
    padding: 10px 18px;
    border: 1.5px solid var(--tv-card-border, #B0BDD2);
    border-radius: 999px;
    background: #EEF2F7;
    color: var(--gt-ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    box-shadow: none;
    transform: none;
}

body.guest-theme .clinic-actions .favorite-btn.clinic-action-tile {
    background: #E8EFFA;
}

body.guest-theme .clinic-actions .clinic-action-tile i {
    flex-shrink: 0;
    font-size: 22px;
    color: var(--gt-navy);
}

body.guest-theme .clinic-actions .favorite-btn.clinic-action-tile i {
    color: #B83A3A;
}

body.guest-theme .clinic-actions .clinic-action-tile:hover {
    border-color: var(--gt-navy);
    background: #E2E9F5;
    color: var(--gt-ink);
    transform: none;
}

body.guest-theme .clinic-actions .favorite-btn.clinic-action-tile.active {
    border-color: #E7B4B4;
    background: #FBEDED;
}

body.guest-theme .clinic-actions .clinic-hold-pill.clinic-action-tile {
    color: var(--gt-muted);
    white-space: normal;
    cursor: default;
}

/* Cards in the right column */
body.guest-theme .clinic-sidebar .sidebar-card {
    padding: 16px 18px 18px;
    border-radius: 18px;
}

body.guest-theme .clinic-sidebar .sidebar-card h3 {
    margin-bottom: 14px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--gt-navy);
}

/* Contact: phone and email on the left; Facebook and website on the right
   of a divider */
body.guest-theme .clinic-contact-card .contact-list {
    flex-direction: row;
    align-items: stretch;
    gap: 0;
}

body.guest-theme .clinic-contact-card .contact-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding-right: 14px;
}

body.guest-theme .clinic-contact-card .contact-links {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding-left: 14px;
    border-left: 2px solid rgba(45, 69, 122, 0.45);
}

body.guest-theme .clinic-contact-card .contact-links:first-child {
    padding-left: 0;
    border-left: 0;
}

body.guest-theme .clinic-contact-card .contact-item {
    align-items: center;
    gap: 12px;
}

body.guest-theme .clinic-contact-card .contact-item i {
    flex-shrink: 0;
    background: #EEF2F8;
    font-size: 14px;
}

body.guest-theme .clinic-contact-card .contact-item .label {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--gt-ink);
}

body.guest-theme .clinic-contact-card .contact-item a {
    font-size: 13px;
    color: var(--gt-ink);
}

body.guest-theme .clinic-contact-card .contact-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--gt-navy);
    white-space: nowrap;
}

body.guest-theme .clinic-contact-card .contact-link .fa-facebook {
    font-size: 20px;
    color: #1877F2;
}

body.guest-theme .clinic-contact-card .contact-link .fa-globe {
    font-size: 19px;
    color: var(--gt-navy);
}

/* Operating Hours: one ruled line per day */
body.guest-theme .clinic-sidebar .hours-list {
    gap: 0;
}

body.guest-theme .clinic-sidebar .hours-item {
    padding: 11px 2px;
    border-bottom: 1px solid rgba(45, 69, 122, 0.55);
    font-size: 13.5px;
    color: var(--gt-ink);
}

body.guest-theme .clinic-sidebar .hours-item:last-child {
    border-bottom: 1px solid rgba(45, 69, 122, 0.55);
}

body.guest-theme .clinic-sidebar .hours-item.closed {
    color: var(--gt-muted);
}

/* Map Location: map, address, then a full-width Get Directions */
body.guest-theme .clinic-sidebar :is(.location-map, .map-placeholder) {
    height: 190px;
    margin-bottom: 0;
    border: 0;
    border-radius: 10px;
    background: #EEF2F8;
}

body.guest-theme .clinic-sidebar .address-text {
    margin: 14px 0 18px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--gt-ink);
}

body.guest-theme .clinic-sidebar .clinic-directions-btn {
    justify-content: center;
    min-height: 48px;
    border-radius: 999px;
    font-size: 15.5px;
    font-weight: 600;
}

/* Tablets and phones: one column, in reading order - details, Save /
   Appointments, contact, then the clinic's sections, hours and map */
@media (max-width: 1024px) {
    body.guest-theme .clinic-layout {
        display: flex;
        flex-direction: column;
        align-items: stretch;   /* full width; the grid's "start" would shrink them */
        gap: 0;
    }

    body.guest-theme :is(.clinic-main, .clinic-sidebar) {
        display: contents;
    }

    body.guest-theme .clinic-main > * {
        order: 5;
    }

    body.guest-theme .clinic-main > .clinic-profile {
        order: 1;
        margin-bottom: 24px;
    }

    body.guest-theme .clinic-sidebar > * {
        order: 6;
        margin-bottom: 18px;
    }

    body.guest-theme .clinic-sidebar > .clinic-actions {
        order: 2;
    }

    body.guest-theme .clinic-sidebar > .clinic-contact-card {
        order: 3;
    }

    body.guest-theme .clinic-sidebar > .clinic-hold-card {
        order: 4;
    }

    body.guest-theme .clinic-sidebar > .clinic-contact-card,
    body.guest-theme .clinic-sidebar > .clinic-hold-card {
        margin-bottom: 28px;
    }

    body.guest-theme .clinic-section.clinic-reviews-card {
        margin-bottom: 28px;
    }
}

/* style.css stacks the logo over the details here: no offset needed */
@media (max-width: 768px) {
    body.guest-theme .clinic-main > .clinic-profile .clinic-main-info {
        padding-top: 4px;
    }
}

@media (max-width: 700px) {
    body.guest-theme .clinic-duo {
        flex-direction: column;
        align-items: stretch;
    }

    body.guest-theme .clinic-main > .clinic-profile .clinic-avatar {
        width: 112px;
        height: 112px;
    }

    body.guest-theme .clinic-reviews-card .review-card {
        flex-basis: 82%;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.guest-theme .clinic-cover .clinic-cover-slide {
        transition: none;
    }
}

/* ---------- Log in / Sign up ----------
   Split screen: the form on the left, a clinic photo under a light-blue
   wash on the right. The photo panel drops away on narrow screens. */
/* Every auth page is exactly one screen tall, so Log in and Sign up share
   the same photo size; a longer form (Sign up) scrolls inside its own
   column instead of stretching the page and the photo. */
/* The form column is just wide enough for the 440px form and its padding;
   the photo takes the rest, edge to edge */
body.guest-theme.auth-page .auth-section.gt-auth {
    display: grid;
    grid-template-columns: minmax(0, 580px) minmax(0, 1fr);
    align-items: stretch;
    flex: none;
    height: 100vh;
    min-height: 640px;
    padding: var(--gt-nav-h) 0 0;
    background: var(--gt-white);
}

body.guest-theme.auth-page .gt-auth > .container {
    display: flex;
    min-height: 0;
    max-width: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: clamp(32px, 5vw, 56px) clamp(24px, 5vw, 64px);
    scrollbar-width: thin;
    scrollbar-color: #C9D3E3 transparent;
}

body.guest-theme.auth-page .gt-auth > .container::-webkit-scrollbar {
    width: 8px;
}

body.guest-theme.auth-page .gt-auth > .container::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #C9D3E3;
}

/* auto margins centre the form, and give way to scrolling from the top
   when it is taller than the column */
body.guest-theme.auth-page .gt-auth .auth-card {
    width: 100%;
    max-width: 440px;
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: left;
}

body.guest-theme.auth-page .gt-auth .auth-icon {
    width: 52px;
    height: 52px;
    margin: 0 0 22px;
    border-radius: 16px;
    background: var(--gt-tint);
}

body.guest-theme.auth-page .gt-auth .auth-icon i {
    font-size: 22px;
    color: var(--gt-navy);
}

body.guest-theme.auth-page .gt-auth .auth-card h1 {
    margin: 0 0 6px;
    font-size: clamp(1.75rem, 1.4rem + 1vw, 2.15rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--gt-ink);
}

.gt-auth-sub {
    margin: 0 0 28px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--gt-muted);
}

body.guest-theme.auth-page .gt-auth .form-group {
    margin-bottom: 18px;
}

body.guest-theme.auth-page .gt-auth .form-group label {
    margin-bottom: 7px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--gt-ink);
}

body.guest-theme.auth-page .gt-auth .form-group input {
    height: 50px;
    padding-top: 0;
    padding-bottom: 0;
    border: 1px solid var(--gt-line);
    border-radius: 14px;
    background: var(--gt-mist);
    font-size: 15px;
    color: var(--gt-ink);
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

body.guest-theme.auth-page .gt-auth .form-group input:hover {
    border-color: #C9D3E3;
}

body.guest-theme.auth-page .gt-auth .form-group input:focus {
    border-color: var(--gt-navy);
    background: var(--gt-white);
    box-shadow: 0 0 0 4px rgba(195, 224, 255, 0.7);
}

body.guest-theme.auth-page .gt-auth .form-group input::placeholder {
    color: #8E97A8;
}

body.guest-theme.auth-page .gt-auth .input-with-icon > i {
    color: #8E97A8;
    transition: color 0.2s ease;
}

body.guest-theme.auth-page .gt-auth .input-with-icon:focus-within > i {
    color: var(--gt-navy);
}

body.guest-theme.auth-page .gt-auth .btn-block {
    min-height: 52px;
    margin-top: 8px;
    border-radius: 999px;
    font-size: 15.5px;
    font-weight: 600;
}

body.guest-theme.auth-page .gt-auth .auth-footer-text {
    margin-top: 22px;
    font-size: 14.5px;
    color: var(--gt-muted);
}

body.guest-theme.auth-page .gt-auth .auth-footer-text a {
    color: var(--gt-navy);
}

body.guest-theme.auth-page .gt-auth .alert {
    border-radius: 14px;
}

/* Password strength meter added by auth.js on Sign up */
body.guest-theme.auth-page .gt-auth .strength-bar {
    height: 5px;
    background: var(--gt-tint);
}

.gt-auth-visual {
    position: relative;
    isolation: isolate;
    margin: 0;
    min-height: 0;
    overflow: hidden;
    border-radius: 0;
    background: var(--gt-tint);
}

.gt-auth-visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    object-position: 62% center;
    animation: gt-hero-settle 2.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Light-blue wash, deepening toward the bottom so the caption reads */
.gt-auth-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(195, 224, 255, 0.34) 0%, rgba(195, 224, 255, 0.14) 45%, rgba(45, 69, 122, 0.55) 78%, rgba(45, 69, 122, 0.82) 100%);
}

.gt-auth-visual figcaption {
    position: absolute;
    left: clamp(20px, 3vw, 36px);
    right: clamp(20px, 3vw, 36px);
    bottom: clamp(20px, 3vw, 36px);
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--gt-white);
    animation: gt-fade-up 1s var(--gt-ease) 0.4s both;
}

.gt-auth-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin-bottom: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.28);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.gt-auth-badge i {
    color: var(--gt-gold);
}

.gt-auth-visual figcaption strong {
    font-size: clamp(1.4rem, 1.1rem + 0.9vw, 1.9rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.gt-auth-visual figcaption > span:last-child {
    max-width: 30em;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88);
}

@media (max-width: 900px) {
    body.guest-theme.auth-page .auth-section.gt-auth {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 0;
        background: var(--gt-mist);
    }

    body.guest-theme.auth-page .gt-auth > .container {
        overflow: visible;
        padding: 36px 20px 56px;
    }

    body.guest-theme.auth-page .gt-auth .auth-card {
        max-width: 480px;
        padding: 32px 24px;
        border: 1px solid var(--gt-line);
        border-radius: var(--gt-radius-lg);
        background: var(--gt-white);
        box-shadow: var(--gt-shadow);
    }

    .gt-auth-visual {
        display: none;
    }
}

/* ---------- Clinic Application (and patient forms): dropdowns ----------
   Same themed menu as Find Clinics (assets/js/gt-select.js); the button
   matches the form's text inputs. Patient pages mark their forms
   .gt-select-form to get the same field. */
body.guest-theme :is(.apply-form, .gt-select-form) .gt-select-field {
    position: relative;
}

body.guest-theme :is(.apply-form, .gt-select-form) .gt-select-trigger {
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid var(--gt-line);
    border-radius: var(--border-radius, 8px);
    background: var(--gt-white);
    font-size: 14px;
    color: var(--gt-ink);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

body.guest-theme :is(.apply-form, .gt-select-form) .gt-select-trigger.is-placeholder {
    color: #8E97A8;
}

body.guest-theme :is(.apply-form, .gt-select-form) .gt-select-trigger:hover:not(:disabled) {
    border-color: #C9D3E3;
}

body.guest-theme :is(.apply-form, .gt-select-form) .gt-select-trigger:focus-visible,
body.guest-theme .apply-form .is-open .gt-select-trigger {
    border-color: var(--gt-navy);
    box-shadow: 0 0 0 4px rgba(195, 224, 255, 0.7);
}

body.guest-theme :is(.apply-form, .gt-select-form) .gt-select-trigger:disabled {
    background: var(--gt-mist);
    color: #A3ABBA;
    cursor: not-allowed;
}

body.guest-theme :is(.apply-form, .gt-select-form) .gt-select-trigger:disabled .gt-select-chevron {
    opacity: 0.4;
}

/* Mirrors the select's state set by the form's validation / document scan */
body.guest-theme :is(.apply-form, .gt-select-form) .gt-select-trigger.error {
    border-color: #dc2626;
}

body.guest-theme :is(.apply-form, .gt-select-form) .gt-select-trigger.auto-filled {
    border-color: #86efac;
    background: #f0fdf4;
}

body.guest-theme :is(.apply-form, .gt-select-form) .gt-select-menu {
    top: calc(100% + 6px);
    width: 100%;
    max-width: none;
    z-index: 30;
}

/* Profile Settings: the dropdown matches the form's own fields */
body.guest-theme .profile-form-modern .gt-select-trigger {
    min-height: 52px;
    padding: 0 16px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    font-size: 14px;
}

/* Transaction History: the clinic filter keeps its width */
body.guest-theme .history-filter .gt-select-field {
    min-width: 240px;
}

/* ---------- Upload fields: file cards ----------
   Empty: a light dashed drop zone. With files: the zone shrinks to a list of
   compact cards (thumbnail or PDF icon, name, size, remove) and a one-line
   hint to replace or add more. The file input still covers the zone, so
   clicking or dropping works exactly as before. */
body.guest-theme .file-upload-area {
    display: flex;
    flex-direction: column;
    padding: 28px 24px;
    border: 1.5px dashed #C9D3E3;
    border-radius: 18px;
    background: var(--gt-mist);
    transition: border-color 0.2s ease, background-color 0.2s ease, padding 0.2s ease;
}

body.guest-theme .file-upload-area.compact {
    padding: 22px 20px;
}

body.guest-theme .file-upload-area:hover,
body.guest-theme .file-upload-area.dragover {
    border-color: var(--gt-navy);
    background: var(--gt-tint);
}

body.guest-theme .upload-placeholder i {
    margin-bottom: 12px;
    font-size: 30px;
    color: var(--gt-navy);
}

body.guest-theme .file-upload-area.compact .upload-placeholder i {
    margin-bottom: 8px;
    font-size: 24px;
}

body.guest-theme .upload-placeholder span {
    font-size: 14.5px;
    font-weight: 500;
    color: var(--gt-ink);
}

body.guest-theme .upload-placeholder strong {
    color: var(--gt-navy);
}

body.guest-theme .upload-placeholder small {
    font-size: 12.5px;
    color: var(--gt-muted);
}

/* Uploaded state */
body.guest-theme .file-upload-area:has(.preview-item) {
    padding: 10px;
    text-align: left;
}

body.guest-theme .upload-preview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 8px;
    margin: 0;
}

body.guest-theme .upload-preview:empty {
    display: none;
}

body.guest-theme .upload-preview .preview-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: auto;
    height: auto;
    padding: 8px 8px 8px 8px;
    border: 1px solid var(--gt-line);
    border-radius: 14px;
    background: var(--gt-white);
    box-shadow: 0 1px 2px rgba(9, 18, 38, 0.04);
    overflow: visible;
    cursor: default;
    animation: gt-fade-up 0.35s var(--gt-ease) both;
}

body.guest-theme .preview-thumb {
    width: 44px;
    height: 44px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--gt-tint);
}

body.guest-theme .preview-thumb img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
}

body.guest-theme .preview-thumb.is-file {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    color: var(--gt-navy);
}

body.guest-theme .preview-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

body.guest-theme .preview-name {
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    color: var(--gt-ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.guest-theme .preview-size {
    font-size: 12.5px;
    color: var(--gt-muted);
}

body.guest-theme .upload-preview .preview-item .remove-btn {
    position: static;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    font-size: 14px;
    color: var(--gt-muted);
    transition: background-color 0.2s ease, color 0.2s ease;
}

body.guest-theme .upload-preview .preview-item .remove-btn:hover,
body.guest-theme .upload-preview .preview-item .remove-btn:focus-visible {
    background: #FDECEC;
    color: #dc2626;
}

/* The big placeholder becomes a one-line hint under the cards */
body.guest-theme .file-upload-area:has(.preview-item) .upload-placeholder {
    order: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 8px 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--gt-navy);
}

body.guest-theme .file-upload-area:has(.preview-item) .upload-placeholder > * {
    display: none;
}

body.guest-theme .file-upload-area:has(.preview-item) .upload-placeholder::before {
    content: '\f093';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 12px;
}

body.guest-theme .file-upload-area:has(.preview-item) .upload-placeholder::after {
    content: 'Click or drop a file here to replace it';
}

body.guest-theme .file-upload-area:has(input[multiple]):has(.preview-item) .upload-placeholder::after {
    content: 'Click or drop files here to add more';
}

/* ---------- Services: jump to "Not sure what you need?" ----------
   Sits at the top right of the list, level with the first category heading
   (whichever category the filter is showing). main.js smooth-scrolls # links. */
body.guest-theme .services-list-section > .container {
    position: relative;
}

body.guest-theme .gt-jump-btn {
    position: absolute;
    top: -2px;
    right: var(--space-lg, 24px);
    z-index: 2;
    background: var(--gt-white);
}

body.guest-theme .gt-jump-btn i {
    font-size: 13px;
    transition: transform 0.25s var(--gt-ease);
}

body.guest-theme .gt-jump-btn:hover i {
    transform: translateY(2px);
}

/* Land with the heading clear of the navbar and the sticky category bar */
body.guest-theme #recommendations {
    scroll-margin-top: calc(var(--gt-nav-h) + 100px);
}

@media (max-width: 640px) {
    body.guest-theme .gt-jump-btn {
        position: static;
        width: 100%;
        margin-bottom: 24px;
    }
}

/* ---------- Clinic Application: step bar ----------
   The connector used to start 1px inside its own pill (poking out of the
   rounded end) and run right up to the next pill. Now it sits in the gap with
   a little air on both sides. --gt-step-gap mirrors the column-gap that
   apply-clinic.css sets at each width. */
body.guest-theme .progress-steps {
    --gt-step-gap: 30px;
    --gt-step-air: 6px;
}

body.guest-theme .progress-steps .step:not(:last-child)::after {
    left: calc(100% + 1px + var(--gt-step-air));
    width: calc(var(--gt-step-gap) - 2 * var(--gt-step-air));
    border-radius: 2px;
}

@media (max-width: 1024px) {
    body.guest-theme .progress-steps {
        --gt-step-gap: 16px;
        --gt-step-air: 3px;
    }
}

@media (max-width: 900px) {
    body.guest-theme .progress-steps {
        --gt-step-gap: 12px;
        --gt-step-air: 2px;
    }
}

@media (max-width: 768px) {
    body.guest-theme .progress-steps {
        --gt-step-gap: 14px;
        --gt-step-air: 3px;
    }
}

/* Clinic Application submitted: the page header is hidden, so the success
   card needs its own room under the fixed navbar */
body.guest-theme .apply-section--done {
    padding-top: calc(var(--gt-nav-h) + clamp(36px, 4.5vw, 56px));
}

/* ---------- Recommendations: step indicator ----------
   Numbers only: a finished step used to print a check mark next to its
   number inside the same circle ("1✓"). Finished steps stay green. */
body.guest-theme .step-indicator .step.completed .step-num::after {
    content: none;
}

body.guest-theme .step-indicator {
    gap: 16px;
}

body.guest-theme .step-indicator .step-line {
    flex: 0 0 56px;
    margin: 0 6px;
}

/* Phones: the page hides the lines here; keep 1-2-3 on one row with each
   label under its number instead of letting step 3 wrap onto its own line */
@media (max-width: 768px) {
    body.guest-theme .step-indicator {
        flex-wrap: nowrap;
        justify-content: space-around;
        gap: 8px;
        padding: 18px 12px;
    }

    body.guest-theme .step-indicator .step {
        flex-direction: column;
        gap: 8px;
        font-size: 13px;
    }

    body.guest-theme .step-indicator .step-num {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
}

/* Legacy accents hardcoded to the old navy / #1a1a6e purple */
body.guest-theme :is(.feature-icon, .mv-icon) {
    background: var(--gt-navy);
}

body.guest-theme .step.active .step-num,
body.guest-theme .duration-option input:checked + .duration-btn,
body.guest-theme .dss-clinic-image {
    background: var(--gt-navy);
}

body.guest-theme .step-line.active {
    background: var(--gt-gold);
}

/* About page: its inline styles hardcode cool grays; warm them to the palette */
/* Our Story: plain white, the logo on its own (no disc behind it).
   Sections after the paper banner alternate white / mist. */
body.guest-theme.about-page .about-story-section {
    padding: var(--gt-section-y) 0;
    background: var(--gt-white);
}

/* The PNG is a tall canvas with empty space above and below the mark; the
   square crop trims that so the mark itself fills the spot */
body.guest-theme.about-page .story-image .story-logo {
    width: min(100%, 420px);
    max-height: none;
    aspect-ratio: 1;
    object-fit: cover;
}

@media (max-width: 768px) {
    body.guest-theme.about-page .story-image .story-logo {
        width: min(100%, 300px);
    }
}

body.guest-theme.about-page .team-section {
    background: var(--gt-white);
}

body.guest-theme.about-page :is(.team-section, .about-cta-section) {
    padding: var(--gt-section-y) 0;
}

body.guest-theme.about-page .about-features-section {
    background: var(--gt-mist);
}

body.guest-theme.about-page :is(.mv-card, .feature-card, .team-card) {
    border-color: var(--gt-line);
}

body.guest-theme.about-page .about-features-section .feature-card {
    background: var(--gt-tint);
    border-color: transparent;
    box-shadow: none;
}

body.guest-theme.about-page :is(.mv-card p, .story-text p, .feature-card p, .team-card .role, .section-subtitle, .about-cta-section p) {
    color: var(--gt-muted);
}

body.guest-theme.about-page :is(.story-text h2, .about-features-section h2, .team-section h2, .about-cta-section h2, .mv-card h2, .feature-card h3, .team-card h4) {
    color: var(--gt-ink);
}

/* ========================================
   Motion
   Load-in for the landing page hero and navbar (CSS only), plus
   scroll reveals for [data-reveal] driven by assets/js/guest-motion.js.
   Keyframes use the standalone translate/scale properties, never
   transform, so they compose with hover lifts and the nav's own
   centering transform instead of overriding them.
   ======================================== */
@keyframes gt-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes gt-fade-down {
    from { opacity: 0; translate: 0 -12px; }
    to { opacity: 1; translate: none; }
}

@keyframes gt-fade-up {
    from { opacity: 0; translate: 0 24px; }
    to { opacity: 1; translate: none; }
}

@keyframes gt-hero-settle {
    from { opacity: 0; scale: 1.07; }
    to { opacity: 1; scale: none; }
}

@keyframes gt-rise {
    from { opacity: 0; translate: 0 32px; }
    to { opacity: 1; translate: none; }
}

@keyframes gt-float {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 var(--gt-float-amp, -8px); }
}

/* Page load: navbar, then hero copy */
body.gt-hero-page .navbar {
    animation: gt-fade-in 1s ease-out both;
}

body.gt-hero-page .navbar .logo {
    animation: gt-fade-down 0.9s var(--gt-ease) 0.15s both;
}

body.gt-hero-page .nav-links li {
    animation: gt-fade-down 0.8s var(--gt-ease) 0.25s both;
}

body.gt-hero-page .nav-links li:nth-child(2) { animation-delay: 0.31s; }
body.gt-hero-page .nav-links li:nth-child(3) { animation-delay: 0.37s; }
body.gt-hero-page .nav-links li:nth-child(4) { animation-delay: 0.43s; }
body.gt-hero-page .nav-links li:nth-child(5) { animation-delay: 0.49s; }

body.gt-hero-page .nav-buttons > *,
body.gt-hero-page .hamburger {
    animation: gt-fade-down 0.8s var(--gt-ease) 0.55s both;
}

body.gt-hero-page .nav-buttons > :nth-child(2) { animation-delay: 0.6s; }
body.gt-hero-page .nav-buttons > :nth-child(3) { animation-delay: 0.65s; }
body.gt-hero-page .nav-buttons > :nth-child(4) { animation-delay: 0.7s; }

.gt-hero-media {
    animation: gt-hero-settle 2.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.gt-hero-title .gt-line {
    animation: gt-fade-up 1s var(--gt-ease) 0.35s both;
}

.gt-hero-title .gt-line + .gt-line { animation-delay: 0.5s; }

.gt-hero-lead {
    animation: gt-fade-up 1s var(--gt-ease) 0.68s both;
}

.gt-search {
    animation: gt-fade-up 1s var(--gt-ease) 0.82s both;
}

/* "Why choose CavClinics?" drops in word by word, then the subtitle.
   [data-reveal-repeat] loses .is-visible when it leaves the viewport, so
   the sequence replays every time it scrolls back in, from either side. */
@keyframes gt-word-drop {
    from { opacity: 0; translate: 0 -0.55em; }
    to { opacity: 1; translate: none; }
}

@keyframes gt-word-follow {
    from { opacity: 0; translate: 0 -10px; }
    to { opacity: 1; translate: none; }
}

.gt-word {
    display: inline-block;
}

.gt-js [data-reveal-repeat] .gt-word,
.gt-js [data-reveal-repeat] .gt-subtitle {
    opacity: 0;
}

.gt-js [data-reveal-repeat].is-visible .gt-word {
    animation: gt-word-drop 0.8s cubic-bezier(0.42, 0, 0.58, 1) calc(var(--i, 0) * 0.18s) both;
}

.gt-js [data-reveal-repeat].is-visible .gt-subtitle {
    animation: gt-word-follow 0.8s cubic-bezier(0.42, 0, 0.58, 1) 0.75s both;
}

/* Scroll reveal. .gt-js is set in <head> so nothing is hidden when
   JavaScript is unavailable. */
.gt-js [data-reveal] {
    opacity: 0;
}

.gt-js [data-reveal].is-visible {
    animation: gt-rise 1s var(--gt-ease) var(--gt-delay, 0s) both;
}

/* Our services: once revealed, each card drifts gently up and down,
   each starting a beat after the previous one. Hover pauses the drift. */
.gt-js .gt-service[data-reveal].is-visible {
    animation:
        gt-rise 1s var(--gt-ease) var(--gt-delay, 0s) both,
        gt-float 6.5s ease-in-out calc(var(--gt-delay, 0s) + 1.1s + var(--gt-float-offset, 0s)) infinite;
}

.gt-service:nth-child(2) { --gt-float-offset: 0.8s; }
.gt-service:nth-child(3) { --gt-float-offset: 1.6s; }
.gt-service:nth-child(4) { --gt-float-offset: 2.4s; }

.gt-js .gt-service[data-reveal].is-visible:hover {
    animation-play-state: running, paused;
}

/* How it works: the dashed connector draws across once the steps arrive */
.gt-js .gt-steps[data-reveal-line]::before {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.6s var(--gt-ease) 0.35s;
}

.gt-js .gt-steps[data-reveal-line].is-visible::before {
    transform: none;
}

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 1100px) {
    .gt-review-carousel {
        --gt-peek: 42%;
    }

    .gt-feature-grid,
    .gt-service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gt-feature {
        min-height: 0;
    }
}

@media (max-width: 1024px) {
    body.guest-theme {
        --gt-nav-h: 66px;
    }

    body.guest-theme .nav-container {
        min-height: var(--gt-nav-h);
    }

    body.guest-theme .gt-wordmark .gt-wordmark-name {
        font-size: 26px;
    }

    .gt-clinic-grid,
    .gt-testimonial-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gt-testimonial-grid--single {
        grid-template-columns: minmax(0, 580px);
    }

    .gt-cta {
        grid-template-columns: 1fr;
    }

    .gt-cta-action {
        align-items: flex-start;
        text-align: left;
    }
}

@media (max-width: 768px) {
    .gt-review-carousel {
        --gt-peek: 22%;
    }

    .gt-hero {
        align-items: flex-end;
        min-height: 92vh;
        min-height: 92svh;
        padding-top: 110px;
        padding-bottom: clamp(120px, 18vh, 170px);
    }

    .gt-hero-media {
        background-position: 62% 30%;
    }

    .gt-hero-media::before {
        background:
            linear-gradient(180deg, rgba(9, 18, 38, 0.55) 0%, rgba(9, 18, 38, 0.2) 30%, rgba(9, 18, 38, 0.5) 72%, rgba(9, 18, 38, 0.2) 100%),
            rgba(9, 18, 38, 0.12);
    }

    /* Same eased fade, starting lower: the search sits near the bottom here */
    .gt-hero-media::after {
        background: linear-gradient(180deg,
            rgba(244, 247, 251, 0) 78%,
            rgba(244, 247, 251, 0.028) 80.2%,
            rgba(244, 247, 251, 0.104) 82.4%,
            rgba(244, 247, 251, 0.216) 84.6%,
            rgba(244, 247, 251, 0.352) 86.8%,
            rgba(244, 247, 251, 0.5) 89%,
            rgba(244, 247, 251, 0.648) 91.2%,
            rgba(244, 247, 251, 0.784) 93.4%,
            rgba(244, 247, 251, 0.896) 95.6%,
            rgba(244, 247, 251, 0.972) 97.8%,
            var(--gt-mist) 100%);
    }

    .gt-search {
        max-width: none;
    }

    .gt-section-head--split {
        align-items: flex-start;
    }

    .gt-steps {
        grid-template-columns: 1fr;
        max-width: 420px;
        gap: 36px;
    }

    .gt-steps::before {
        top: 32px;
        bottom: 32px;
        left: 50%;
        right: auto;
        border-top: 0;
        border-left: 2px dashed rgba(219, 186, 109, 0.75);
    }

    .gt-js .gt-steps[data-reveal-line]::before {
        transform: scaleY(0);
        transform-origin: center top;
    }

    .gt-step {
        padding: 0 8px 4px;
        background: var(--gt-mist);
    }

    .gt-cta-main {
        flex-direction: column;
        gap: 18px;
    }

    .gt-cta-list {
        grid-template-columns: 1fr;
    }

    .gt-cta-action,
    .gt-cta-action .gt-btn {
        width: 100%;
    }

    .gt-cta-action {
        align-items: stretch;
        text-align: center;
    }
}

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

    .gt-feature-grid,
    .gt-service-grid {
        gap: 12px;
    }

    .gt-service {
        --gt-float-amp: -4px;
    }

    /* Compact row cards: icon left, copy right */
    .gt-feature,
    .gt-service {
        display: grid;
        grid-template-columns: 56px minmax(0, 1fr);
        column-gap: 16px;
        align-items: start;
        padding: 20px 18px;
        text-align: left;
    }

    .gt-feature .gt-icon-badge,
    .gt-service .gt-icon-badge {
        grid-row: 1 / span 3;
        width: 56px;
        height: 56px;
        margin: 0;
        font-size: 25px;
    }

    body.guest-theme .gt-feature h3,
    body.guest-theme .gt-service h3 {
        margin: 2px 0 4px;
        font-size: 16px;
    }

    .gt-feature p,
    .gt-service p {
        font-size: 14px;
        line-height: 1.55;
    }

    .gt-service p {
        margin-bottom: 10px;
    }

    .gt-section-head--split .gt-btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .gt-review-carousel {
        --gt-peek: 16%;
    }

    body.guest-theme .gt-search input {
        padding-left: 18px;
        font-size: 13.5px;
    }

    .gt-search-btn {
        width: 54px;
        font-size: 19px;
    }
}

/* About page responsive */
@media (max-width: 1024px) {
    .gt-team-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

    .gt-explorer-stage {
        order: -1;
        min-height: 0;
        aspect-ratio: 4 / 3;
    }

    body.guest-theme.about-page .about-stats-section .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 32px;
    }

    body.guest-theme.about-page .about-stats-section .stat-item:nth-child(odd) {
        border-left: 0;
    }
}

@media (max-width: 640px) {
    body.guest-theme .gt-explorer-tab {
        grid-template-columns: 40px minmax(0, 1fr);
        padding: 12px 14px 16px;
    }

    .gt-explorer-num {
        display: none;
    }

    .gt-explorer-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .gt-explorer-title {
        padding-top: 9px;
        font-size: 15.5px;
    }

    .gt-explorer-caption {
        left: 12px;
        right: 12px;
        bottom: 12px;
        gap: 12px;
        padding: 12px 14px;
    }

    .gt-explorer-caption .gt-icon-badge {
        width: 42px;
        height: 42px;
        font-size: 20px;
    }

    .gt-explorer-caption strong {
        font-size: 16px;
    }

    /* Team becomes a swipeable row instead of a tall stack */
    .gt-team-grid {
        grid-auto-flow: column;
        grid-template-columns: none;
        grid-auto-columns: 72%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        /* Run to the screen edges instead of clipping at the container */
        margin-inline: calc(-1 * var(--space-lg, 24px));
        padding: 4px var(--space-lg, 24px) 16px;
        scroll-padding-inline: var(--space-lg, 24px);
        scrollbar-width: none;
    }

    .gt-team-grid::-webkit-scrollbar {
        display: none;
    }

    .gt-team-card {
        scroll-snap-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.guest-theme *,
    body.guest-theme *::before,
    body.guest-theme *::after {
        transition-duration: 0.01ms !important;
        animation: none !important;
    }

    .gt-js [data-reveal],
    .gt-js [data-reveal-repeat] .gt-word,
    .gt-js [data-reveal-repeat] .gt-subtitle {
        opacity: 1;
    }

    .gt-js .gt-steps[data-reveal-line]::before {
        transform: none;
    }
}