@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');

/* ==========================================================================
   LifeStrong PR Wellness Center — Public Website
   Design tokens sampled directly from the Figma exports.
   ========================================================================== */


/* --------------------------------------------------------------- fonts --
   Self-hosted Plus Jakarta Sans (variable weight 200–800), the site's single
   typeface. No external font CDN, so pages don't wait on Google Fonts.
   The [wght] axis means one file covers every weight.
*/

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../fonts/plus-jakarta-sans/PlusJakartaSans[wght].ttf') format('truetype-variations');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../fonts/plus-jakarta-sans/PlusJakartaSans-Italic%5Bwght%5D.ttf') format('truetype-variations');
    font-weight: 200 800;
    font-style: italic;
    font-display: swap;
}

:root {
    /* Brand */
    --brand: #13606A;
    /* hero band, primary teal */
    --brand-dark: #0E4C55;
    --brand-light: #1D8A91;
    --brand-glow: #237875;
    /* lighter centre of the hero radial */
    --teal-900: #003D45;
    --eyebrow: #4A6AA5;
    /* Navy family */
    --navy: #1F2246;
    /* "Book Appointment" button */
    --navy-deep: #0F2B44;
    /* dark buttons on the home hero */
    --footer-bg: #1E3851;
    /* Text */
    --heading: #0F2A44;
    --body: #485563;
    --muted: #7A8794;
    --on-dark: #FFFFFF;
    --on-dark-soft: rgba(255, 255, 255, .78);
    /* Surfaces */
    --page: #F3F5F7;
    /* the site's default section background */
    --white: #FFFFFF;
    --cream: #F1EDE9;
    --mint: #E3F3EF;
    --sky: #D2E7F2;
    /* newsletter card */
    --pill-sky: #DCF5FF;
    /* "Patient Portal" pill */
    /* Lines */
    --border: #E4E9EE;
    --border-soft: #EDF1F4;
    /* Shape */
    --r-card: 20px;
    --r-btn: 10px;
    --r-pill: 999px;
    --r-sm: 12px;
    /* Depth */
    --shadow-sm: 0 1px 2px rgba(15, 42, 68, .05);
    --shadow: 0 4px 20px rgba(15, 42, 68, .07);
    --shadow-lg: 0 18px 48px rgba(15, 42, 68, .10);
    /* Rhythm */
    --container: 1640px;
    --gutter: 32px;
    --section-y: 100px;
    /* Type — one typeface across the whole site. */
    --font-head: 'Open Sans', sans-serif;
    --font-body: 'Open Sans', sans-serif;
    /* ---- Type scale ------------------------------------------------------
       One place for every text size. Change it here, it changes everywhere.
       Body is 16px (1rem); the rest are named steps used across the site so
       no rule ever has to hard-code a rem value again. Use the matching
       utility class in markup: .text-xs / .text-sm / .text-md / .text-base
       / .text-lg / .text-xl, and h1–h6 for headings. */
    --text-xs: 1rem;
    /* 12px — captions, tags, fine print          */
    --text-sm: 0.8125rem;
    /* 13px — small labels, sub-text              */
    --text-md: 0.875rem;
    /* 14px — secondary body copy                 */
    --text-base: 1rem;
    /* 15px — default copy inside cards/sections  */
    --text-body: 1rem;
    /* 16px — the page's base body size           */
    --text-lg: 1.0625rem;
    /* 17px — lead paragraphs                     */
    --text-xl: 1.25rem;
    /* 20px — small headings / stat numbers       */
    --text-2xl: 1.5rem;
    /* 24px — card titles                        */
    --header-h: 84px;
}


/* --------------------------------------------------------------- reset -- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* clip (not hidden) prevents sideways scroll WITHOUT creating a scroll
       container — so the sticky header keeps working. */
    overflow-x: clip;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--body);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

img,
svg,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-head);
    color: var(--heading);
    margin: 0 0 .4em;
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: -.03em;
}


/* Heading scale — the only place heading sizes are defined. Use the tag. */

h1 {
    font-size: clamp(2.2rem, 1.8rem + 2.8vw, 2.8rem);
}

h2 {
    font-size: clamp(1.6rem, 1.4rem + 2.2vw, 2.3rem);
}

h3 {
    font-size: clamp(1.25rem, 1.1rem + .8vw, 1.75rem);
}

h4 {
    font-size: 1.125rem;
    line-height: 1.3;
}

h5 {
    font-size: var(--text-lg);
    line-height: 1.35;
}

h6 {
    font-size: var(--text-md);
    line-height: 1.4;
    letter-spacing: 0;
}

p {
    margin: 0 0 1rem;
}


/* ---- Text utilities --------------------------------------------------
   Size and colour helpers so markup never repeats a raw rem or hex.  */

.text-xs {
    font-size: var(--text-xs);
}

.text-sm {
    font-size: var(--text-sm);
}

.text-md {
    font-size: var(--text-md);
}

.text-base {
    font-size: var(--text-base);
}

.text-body {
    font-size: var(--text-body);
}

.text-lg {
    font-size: var(--text-lg);
}

.text-xl {
    font-size: var(--text-xl);
}

.text-2xl {
    font-size: var(--text-2xl);
}

.text-muted {
    color: var(--muted);
}

.text-soft {
    color: var(--body);
}

.text-heading {
    color: var(--heading);
}

.text-brand {
    color: var(--brand);
}

.text-white {
    color: #fff;
}

.fw-500 {
    font-weight: 500;
}

.fw-600 {
    font-weight: 600;
}

.fw-700 {
    font-weight: 700;
}

.fw-800 {
    font-weight: 800;
}

.ttu {
    text-transform: uppercase;
    letter-spacing: .05em;
}

p:last-child {
    margin-bottom: 0;
}

ul,
ol {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
}


/* Screen-reader-only, used for skip links and icon-only controls. */

.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;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    background: var(--navy);
    color: #fff;
    padding: 12px 20px;
    border-radius: 0 0 var(--r-btn) 0;
}

.skip-link:focus {
    left: 0;
}

:focus-visible {
    outline: 3px solid var(--brand-light);
    outline-offset: 2px;
}


/* ----------------------------------------------------------- structure -- */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.container--lg-narrow {
    max-width: 1300px;
}

.container--md-narrow {
    max-width: 1100px;
}

.container--narrow {
    max-width: 860px;
}

.section {
    padding-block: var(--section-y);
}

.section--tight {
    padding-block: 64px;
}

.section--gray {
    background: var(--page);
}

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

.section--cream {
    background: var(--cream);
}

.section--mint {
    background: var(--mint);
}

.grid {
    display: grid;
    gap: 28px;
}


/* Grid and flex children default to min-width:auto, so a single long
   unbreakable string (an email address, a device name) can force a track wider
   than the screen. Letting them shrink — and wrapping the long word — is what
   keeps phones free of sideways scroll. */

.grid>*,
.stack>*,
.row>* {
    min-width: 0;
}

.card,
.stack,
.prose,
.t-card__body {
    overflow-wrap: break-word;
}

@media (min-width: 960px) {
    .grid {
        gap: 48px;
    }
    .grid--gap-lg {
        gap: 80px;
    }
}

.grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

.stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 30px;
}

.row {
    display: flex;
    gap: 16px;
    align-items: center;
}

.row--wrap {
    flex-wrap: wrap;
}

.text-center {
    text-align: center;
}

.mx-auto {
    margin-inline: auto;
}


/* -------------------------------------------------------------- header -- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--page);
    /* Always keep a subtle separation from the banner/section below so the
       header never looks fused with it; the stuck state deepens the shadow. */
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 2px rgba(15, 42, 68, .04);
    transition: box-shadow .2s ease, background .2s ease;
}

.site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: transparent;
    pointer-events: none;
    z-index: -1;
    transition: background .2s ease, backdrop-filter .2s ease, box-shadow .2s ease;
}

.site-header.is-stuck::before {
    background: rgba(243, 245, 247, .92);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-sm);
}

.site-header.is-stuck {
    border-bottom-color: var(--border);
}

.site-header__inner {
    height: var(--header-h);
    display: flex;
    align-items: center;
    gap: 24px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.brand__mark {
    width: 42px;
    height: auto;
}

.brand__text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.brand__name {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--heading);
    letter-spacing: -.02em;
}

.brand__sub {
    font-size: .5rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--brand);
    margin-top: 3px;
    white-space: nowrap;
}

.nav {
    margin-inline: auto;
}


/* Drawer-only chrome — revealed by the mobile media query below. */

.nav__close,
.nav__actions,
.nav-backdrop {
    display: none;
}

.nav__list {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: var(--r-pill);
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--heading);
    transition: color .18s ease, background .18s ease;
}

.nav__link:hover {
    color: var(--brand);
    background: rgba(19, 96, 106, .07);
}

.nav__item.is-active>.nav__link {
    color: var(--brand);
    font-weight: 600;
}

.nav__caret {
    width: 10px;
    transition: transform .2s ease;
}

.nav__item--has-menu:hover .nav__caret {
    transform: rotate(180deg);
}


/* Dropdown — hover on desktop, click-toggled on touch. */

.nav__item--has-menu {
    position: relative;
}

.nav__menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 260px;
    padding: 10px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transition: all .2s ease;
}

.nav__item--has-menu:hover .nav__menu,
.nav__item--has-menu.is-open .nav__menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.nav__menu a {
    display: block;
    padding: 10px 14px;
    border-radius: var(--r-btn);
    font-size: var(--text-base);
    color: var(--heading);
    transition: all .16s ease;
}

.nav__menu a:hover {
    background: var(--mint);
    color: var(--brand);
}

.nav__menu small {
    display: block;
    color: var(--muted);
    font-size: var(--text-xs);
}


/* ---- Treatments mega menu --------------------------------------------- */

.mega {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    width: 740px;
    max-width: calc(100vw - 40px);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    z-index: 120;
}


/* Invisible bridge across the gap so hover doesn't drop between link and menu. */

.mega::before {
    content: '';
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 14px;
}

.nav__item--has-menu:hover .mega,
.nav__item--has-menu.is-open .mega {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.mega__inner {
    display: grid;
    grid-template-columns: 244px 1fr;
    gap: 16px;
    padding: 16px;
}


/* Left teal feature panel. */

.mega__feature {
    display: flex;
    flex-direction: column;
    padding: 26px 22px;
    border-radius: 14px;
    background: var(--mint);
    background-image: linear-gradient(160deg, #EAF5F1 0%, #DCEFEA 100%);
    color: var(--heading);
}

.mega__feature-eyebrow {
    font-size: .6875rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 12px;
}

.mega__feature-title {
    font-family: var(--font-head);
    font-size: var(--text-2xl);
    font-weight: 800;
    line-height: 1.15;
    color: var(--heading);
    margin-bottom: 12px;
}

.mega__feature-title em {
    font-style: italic;
    color: var(--brand);
    font-weight: 800;
}

.mega__feature-text {
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--body);
    margin-bottom: auto;
}

.mega__feature-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin-top: 22px;
    padding: 11px 18px;
    border-radius: var(--r-pill);
    background: var(--brand);
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 600;
    transition: background .16s ease;
}

.mega__feature:hover .mega__feature-btn {
    background: var(--brand-dark);
}

.mega__feature-btn i {
    font-size: .7rem;
    transition: transform .16s ease;
}

.mega__feature:hover .mega__feature-btn i {
    transform: translateX(3px);
}


/* Right treatment grid. */

.mega__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.mega__card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    transition: background .16s ease;
}

.mega__card:hover {
    background: var(--page);
}

.mega__card-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--mint);
    color: var(--brand);
    font-size: .95rem;
    transition: background .16s ease, color .16s ease;
}

.mega__card:hover .mega__card-icon {
    background: var(--brand);
    color: #fff;
}

.mega__card-body {
    min-width: 0;
}

.mega__card-body strong {
    display: block;
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--heading);
    line-height: 1.2;
}

.mega__card-body small {
    display: block;
    margin-top: 2px;
    font-size: var(--text-xs);
    color: var(--muted);
    line-height: 1.35;
}

.header__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-btn);
    color: var(--heading);
    cursor: pointer;
}


/* -------------------------------------------------------------- button -- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 24px;
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: var(--r-btn);
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease, border-color .16s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.btn--navy {
    background: var(--navy);
    color: #fff;
}

.btn--navy:hover {
    background: #2A2E5C;
    color: #fff;
    box-shadow: 0 8px 20px rgba(31, 34, 70, .25);
}

.btn--deep {
    background: var(--navy-deep);
    color: #fff;
}

.btn--deep:hover {
    background: #17405F;
    color: #fff;
    box-shadow: 0 8px 20px rgba(15, 43, 68, .25);
}

.btn--brand {
    background: var(--brand);
    color: #fff;
}

.btn--brand:hover {
    background: var(--brand-dark);
    color: #fff;
    box-shadow: 0 8px 20px rgba(19, 96, 106, .25);
}


/* Restate colour on hover: the old storefront stylesheet forces white here. */

.btn--outline {
    background: var(--white);
    color: var(--heading);
    border-color: var(--border);
}

.btn--outline:hover {
    background: var(--mint);
    color: var(--brand) !important;
    border-color: var(--brand-light);
}

.btn--ghost {
    background: transparent;
    color: var(--brand);
    border-color: var(--brand-light);
}

.btn--ghost:hover {
    background: var(--mint);
    color: var(--brand) !important;
}

.btn--white {
    background: #fff;
    color: var(--brand);
}

.btn--white:hover {
    background: var(--mint);
    color: var(--brand-dark) !important;
}

.btn--pill {
    border-radius: var(--r-pill);
}

.btn--sm {
    padding: 9px 18px;
    font-size: var(--text-md);
}

.btn--lg {
    padding: 16px 32px;
    font-size: 1rem;
}

.btn--block {
    width: 100%;
}


/* The header's "Patient Portal" chip. */

.btn--portal {
    background: var(--pill-sky);
    color: #1668A8;
    border-color: #B6E4F7;
    border-radius: var(--r-pill);
    padding: 9px 18px;
    font-size: var(--text-md);
}

.btn--portal:hover {
    background: #CBEEFB;
    color: #10527F !important;
}


/* ---------------------------------------------------------- page hero -- */

.page-hero {
    position: relative;
    overflow: hidden;
    background: var(--brand);
    background-image: radial-gradient(60% 120% at 50% 45%, var(--brand-glow) 0%, var(--brand) 62%);
    color: #fff;
    padding-block: 88px;
    text-align: center;
}


/* Faint concentric rings, matching the Figma hero texture. */

.page-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, transparent 28%, rgba(255, 255, 255, .045) 28.4%, transparent 29%), radial-gradient(circle at 50% 50%, transparent 40%, rgba(255, 255, 255, .04) 40.4%, transparent 41%);
    pointer-events: none;
}

.page-hero>.container {
    position: relative;
    z-index: 1;
}

.page-hero__rule {
    width: 44px;
    height: 3px;
    background: #fff;
    border-radius: 2px;
    margin: 0 auto 26px;
}

.page-hero h1 {
    color: #fff;
    margin-bottom: .35em;
}

.page-hero__sub {
    color: var(--on-dark-soft);
    font-size: 1.125rem;
    max-width: 680px;
    margin-inline: auto;
}

.breadcrumb {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
    font-size: var(--text-md);
    color: var(--on-dark-soft);
}

.breadcrumb li+li::before {
    content: '/';
    margin-right: 8px;
    opacity: .5;
}

.breadcrumb a:hover {
    color: #fff;
    text-decoration: underline;
}


/* ------------------------------------------------------ section header -- */

.section-head {
    margin-bottom: 48px;
}

.section-head--center {
    margin-inline: auto;
    max-width: 1200px
}

.eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--eyebrow);
}

.eyebrow--blue {
    color: #2F6FBF;
}

.section-head h2 {
    margin-bottom: .4em;
}


/* The Figma headings put the second line in italic teal. */

.section-head h2 em,
.accent {
    font-style: italic;
    color: var(--brand);
    font-weight: 700;
}

.section-head__sub {
    font-size: var(--text-lg);
    color: var(--body);
}


/* --------------------------------------------------------------- card -- */

.card {
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-card);
    padding: 28px;
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.card--hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--border);
}

.card--flat {
    box-shadow: none;
}

.card--pad-lg {
    padding: 36px;
}

.card__icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    background: var(--mint);
    color: var(--brand);
    border-radius: 14px;
    font-size: var(--text-xl);
}

.card__icon--sky {
    background: var(--pill-sky);
    color: #1668A8;
}

.card__icon--cream {
    background: var(--cream);
    color: var(--brand);
}

.card__icon--round {
    border-radius: var(--r-pill);
}

.card h3 {
    margin-bottom: .45em;
}

.card p {
    color: var(--body);
    font-size: var(--text-base);
}


/* Treatment card — image top, body below. */

.t-card {
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease;
}

.t-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.t-card__media {
    aspect-ratio: 4 / 3;
    background: var(--mint);
    overflow: hidden;
}

.t-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.t-card:hover .t-card__media img {
    transform: scale(1.05);
}

.t-card__body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.t-card__device {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand-light);
}

.t-card__body h3 {
    margin: 0;
    font-size: var(--text-xl);
}

.t-card__body p {
    font-size: var(--text-base);
    color: var(--body);
    flex: 1;
}

.t-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--border-soft);
}

.t-card__price {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--heading);
}

.t-card__price small {
    display: block;
    font-size: .6875rem;
    font-weight: 500;
    color: var(--muted);
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
    font-size: var(--text-md);
    color: var(--brand);
}

.link-arrow i {
    transition: transform .18s ease;
}

.link-arrow:hover i {
    transform: translateX(4px);
}


/* --------------------------------------------------------------- badge -- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 15px;
    border-radius: var(--r-pill);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
}

.badge--mint {
    background: var(--mint);
    color: var(--brand);
}

.badge--sky {
    background: var(--pill-sky);
    color: #1668A8;
}

.badge--cream {
    background: var(--cream);
    color: var(--heading);
}

.badge--white {
    background: #fff;
    color: var(--brand);
    border: 1px solid var(--border);
}


/* ----------------------------------------------------------- stats bar -- */

.stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    align-items: center;
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-card);
    box-shadow: var(--shadow);
    padding: 26px 20px;
}

.stats__item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.stats__item+.stats__item {
    border-left: 1px solid var(--border-soft);
    padding-left: 20px;
}

.stats__icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--mint);
    color: var(--brand);
    flex-shrink: 0;
}

.stats__num {
    display: block;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: var(--text-lg);
    color: var(--heading);
    line-height: 1.2;
}

.stats__label {
    display: block;
    font-size: var(--text-xs);
    color: var(--muted);
    line-height: 1.35;
}


/* --------------------------------------------------------- steps / how -- */

.step {
    position: relative;
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-card);
    padding: 26px;
    overflow: hidden;
}

.step__num {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 2rem;
    color: #2F6FBF;
    line-height: 1;
}

.step__icon {
    width: 40px;
    height: 40px;
    margin: 12px 0 18px;
    display: grid;
    place-items: center;
    border-radius: var(--r-pill);
    background: var(--pill-sky);
    color: #1668A8;
}

.step h4 {
    margin-bottom: 10px;
    padding-bottom: 10px;
    position: relative;
}

.step h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 2px;
    background: #2F6FBF;
}

.step p {
    font-size: var(--text-md);
}


/* ---------------------------------------------------------- CTA banner -- */

.cta-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-card);
    box-shadow: var(--shadow);
    padding: 26px 30px;
}

.cta-band__title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--heading);
}

.cta-band__title small {
    display: block;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--text-md);
    color: var(--muted);
}

.cta-band__points {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}

.cta-band__point {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: var(--text-sm);
    color: var(--body);
}

.cta-band__point i {
    color: var(--brand);
}


/* Full-width teal call to action. */

.cta-wide {
    background: var(--brand);
    background-image: radial-gradient(70% 140% at 50% 40%, var(--brand-glow) 0%, var(--brand) 65%);
    border-radius: var(--r-card);
    color: #fff;
    padding: 60px 40px;
    text-align: center;
}

.cta-wide h2 {
    color: #fff;
}

.cta-wide p {
    color: var(--on-dark-soft);
    max-width: 620px;
    margin-inline: auto;
}

.cta-wide__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin-top: 28px;
}


/* --------------------------------------------------------- newsletter -- */


/* Card straddles the white section above and the navy footer below. */

.newsletter {
    position: relative;
    background: linear-gradient(110deg, #D2E7F2 0%, #DCEEF7 45%, #C9E3F2 100%);
    /* When the design backdrop is present it is layered over the gradient. */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--r-card);
    padding: 46px 44px;
    display: flex;
    align-items: center;
    gap: 28px;
}

.newsletter__copy {
    flex: 1;
    min-width: 0;
}

.newsletter h2 {
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
    margin-bottom: 22px;
    color: var(--heading);
}

.newsletter__form {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    max-width: 560px;
}


/* Inline result message under the newsletter input (AJAX submit). */

.newsletter__msg {
    max-width: 560px;
    margin-top: 12px;
    font-size: .9rem;
    font-weight: 600;
    min-height: 1.2em;
    display: none;
}

.newsletter__msg.is-ok,
.newsletter__msg.is-err {
    display: block;
    padding: 10px 16px;
    border-radius: 10px;
}

.newsletter__msg.is-ok {
    color: #0F7B3E;
    background: #E7F7EE;
    border: 1px solid #B7E4C9;
}

.newsletter__msg.is-err {
    color: #C0392B;
    background: #FDECEA;
    border: 1px solid #F5C0BA;
}

.newsletter__form input[type="email"] {
    flex: 1;
    min-width: 220px;
    padding: 15px 22px;
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    background: #FBF7F4;
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--heading);
}

.newsletter__form input::placeholder {
    color: var(--muted);
}

.newsletter__form input:focus {
    outline: none;
    border-color: var(--brand-light);
}


/* The figure rises above the card top edge, as in the design. */

.newsletter__art {
    width: 240px;
    flex-shrink: 0;
    align-self: flex-end;
    margin-top: -138px;
    margin-bottom: -46px;
}

.newsletter__art img {
    width: 100%;
    display: block;
}

.newsletter-wrap {
    background: linear-gradient(to bottom, var(--white) 0%, var(--white) 50%, var(--footer-bg) 50%, var(--footer-bg) 100%);
    margin-top: 100px;
}

.newsletter-wrap--on-gray {
    background: linear-gradient(to bottom, var(--page) 0%, var(--page) 50%, var(--footer-bg) 50%, var(--footer-bg) 100%);
}


/* -------------------------------------------------------------- footer -- */


/* Four stacked bands, sampled from the Figma export:
     1. brand + link columns + the "Stay informed" signup card
     2. contact strip — location, phone, hours, book-an-appointment
     3. HIPAA notice
     4. legal bottom bar
   The palette lives on .site-footer so every band reads from one place. */

.site-footer {
    --f-bg: #072A42;
    --f-card: #0D314A;
    --f-band: #103450;
    --f-bottom: #062740;
    --f-tile: #1B527E;
    --f-accent: #74C9FC;
    --f-accent-hi: #A4DCFF;
    --f-line: rgba(255, 255, 255, .14);
    --f-text: rgba(255, 255, 255, .80);
    background: var(--f-bg);
    color: var(--f-text);
    position: relative;
}


/* ---- band 1: brand, link columns, signup card ---------------------- */


/* The track list comes from the template (--footer-cols) because the number
   of link columns is admin-controlled. align-items:start keeps the column
   dividers as tall as their own list, not as tall as the signup card. */

.footer-grid {
    display: grid;
    grid-template-columns: var(--footer-cols, 1.5fr 1.02fr 1.02fr 1.02fr 1.32fr);
    align-items: start;
    padding-block: 64px 56px;
}

.footer-brand {
    padding-right: 56px;
    min-width: 0;
}

.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
}

.footer-logo__mark {
    width: 64px;
    height: auto;
    flex: none;
}

.footer-logo__text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.footer-logo__name {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.875rem;
    letter-spacing: -.02em;
    color: #fff;
}

.footer-logo__sub {
    margin-top: 7px;
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
    white-space: nowrap;
}

.footer-about {
    margin: 0;
    max-width: 390px;
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--f-text);
}

.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}

.footer-social a {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 1.0625rem;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.footer-social a:hover {
    background: var(--f-accent);
    color: var(--f-bg);
    transform: translateY(-2px);
}

.footer-col {
    border-left: 1px solid var(--f-line);
    padding-left: 40px;
    padding-right: 24px;
    min-width: 0;
}

.site-footer .footer-col__title {
    margin: 0 0 26px;
    min-height: calc(2.4em + 17px);
    font-family: var(--font-head);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: #fff;
}

.footer-col__title::after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    margin-top: 14px;
    border-radius: 2px;
    background: var(--f-accent);
}

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0;
    font-size: 1.0625rem;
    line-height: 1.45;
    color: var(--f-text);
    transition: color .16s ease;
}

.footer-links a i {
    flex: none;
    font-size: .8125rem;
    opacity: .6;
    transition: transform .16s ease, opacity .16s ease, color .16s ease;
}

.footer-links a:hover {
    color: #fff;
}

.footer-links a:hover i {
    color: var(--f-accent);
    opacity: 1;
    transform: translateX(3px);
}


/* Signup card. The three children stack on desktop and become a row on
   tablet, where the card spans the full grid width. */

.footer-news {
    background: var(--f-card);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 18px;
    padding: 34px 36px 36px;
    min-width: 0;
}

.footer-news__icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--f-tile);
    color: #fff;
    font-size: 1.375rem;
    margin-bottom: 24px;
}

.site-footer .footer-news__title {
    margin: 0 0 10px;
    font-family: var(--font-head);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: #fff;
}

.footer-news__desc {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--f-text);
}

.footer-news__form {
    display: flex;
    margin-top: 24px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
}

.footer-news__form:focus-within {
    box-shadow: 0 0 0 3px rgba(116, 201, 252, .35);
}

.footer-news__form input[type="email"] {
    flex: 1 1 auto;
    min-width: 0;
    height: 54px;
    padding: 0 20px;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 1rem;
    color: var(--heading);
}

.footer-news__form input[type="email"]::placeholder {
    color: #9AA6B2;
}

.footer-news__form input[type="email"]:focus {
    outline: none;
}

.footer-news__form button {
    flex: 0 0 58px;
    height: 54px;
    display: grid;
    place-items: center;
    border: 0;
    cursor: pointer;
    background: var(--f-accent);
    color: var(--f-bg);
    font-size: 1rem;
    transition: background .18s ease;
}

.footer-news__form button:hover {
    background: var(--f-accent-hi);
}

.footer-news__form button:disabled {
    opacity: .6;
    cursor: default;
}

.footer-news__note {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 16px 0 0;
    font-size: .9375rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, .66);
}

.footer-news__note i {
    flex: none;
    font-size: .875rem;
}


/* ---- band 2: contact strip ----------------------------------------- */

.footer-strip {
    border-top: 1px solid var(--f-line);
}

.footer-strip__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.footer-info {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 30px 28px;
    min-width: 0;
}

.footer-info:first-child {
    padding-left: 0;
}

.footer-info:last-child {
    padding-right: 0;
}


/* Inset hairline between the four items, as in the design — a border would
   run the full height of the strip. */

.footer-info+.footer-info::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 84px;
    background: var(--f-line);
}

.footer-info__icon {
    flex: none;
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: var(--r-pill);
    background: var(--f-tile);
    color: #fff;
    font-size: 1.375rem;
}

.footer-info__body {
    min-width: 0;
}

.site-footer .footer-info__title {
    margin: 0 0 5px;
    font-family: var(--font-head);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--f-accent);
}

.footer-info p {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.5;
    color: var(--f-text);
}

.footer-info__phone {
    display: inline-block;
    font-family: var(--font-head);
    font-size: 1.375rem;
    font-weight: 700;
    color: #fff;
    transition: color .16s ease;
}

.footer-info__phone:hover {
    color: var(--f-accent);
}

.footer-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 34px;
    border-radius: var(--r-pill);
    background: var(--f-accent);
    color: #062740;
    font-weight: 700;
    font-size: 1.0625rem;
    white-space: nowrap;
    transition: background .18s ease, transform .18s ease;
}

.footer-cta:hover {
    background: var(--f-accent-hi);
    color: #062740;
    transform: translateY(-2px);
}


/* ---- band 3: HIPAA notice ------------------------------------------ */

.footer-hipaa {
    background: var(--f-band);
    border-top: 1px solid var(--f-line);
}

.footer-hipaa p {
    /* Keeps the notice clear of the floating back-to-top, which parks in this
       corner once the footer's bottom bar is on screen. */
    max-width: calc(100% - 110px);
    margin: 0 auto;
    padding: 19px 0;
    font-size: .9375rem;
    line-height: 1.5;
    text-align: center;
    color: rgba(255, 255, 255, .82);
}

.footer-hipaa i {
    margin-right: 10px;
    font-size: 1rem;
    vertical-align: -1px;
    color: var(--f-accent);
}


/* ---- band 4: legal bottom bar -------------------------------------- */

.footer-bottom {
    background: var(--f-bottom);
}

.footer-bottom__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px 24px;
    padding-block: 24px;
}

.footer-copy {
    /* A flex-basis, so the line breaks on 320px rather than on however long
       a copyright string the client saved — the legal row stays put. */
    flex: 1 1 320px;
    min-width: 0;
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--f-text);
}

.footer-copy a {
    color: var(--f-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.footer-copy a:hover {
    color: #fff;
}

.footer-legal {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 14px;
}

.footer-legal li {
    display: flex;
    align-items: center;
}

.footer-legal li+li::before {
    content: "|";
    margin-right: 14px;
    color: rgba(255, 255, 255, .28);
}

.footer-legal a {
    font-size: 1rem;
    color: var(--f-text);
    transition: color .16s ease;
}

.footer-legal a:hover {
    color: #fff;
}


/* ---- footer responsive --------------------------------------------- */


/* Laptop: the five columns still fit, just tighter. */

@media (max-width: 1600px) {
    .footer-grid {
        padding-block: 56px 48px;
    }
    .footer-brand {
        padding-right: 36px;
    }
    .footer-col {
        padding-left: 32px;
        padding-right: 20px;
    }
    .site-footer .footer-col__title {
        font-size: 1.25rem;
        margin-bottom: 22px;
    }
    .footer-logo__name {
        font-size: 1.625rem;
    }
    .footer-logo__mark {
        width: 56px;
    }
    .footer-about,
    .footer-links a,
    .footer-news__desc,
    .footer-info p {
        font-size: 1rem;
    }
    .footer-news {
        padding: 28px 26px 30px;
    }
    .site-footer .footer-news__title {
        font-size: 1.5rem;
    }
    .footer-info {
        gap: 16px;
        padding: 28px 22px;
    }
    .footer-cta {
        padding: 16px 26px;
        font-size: 1rem;
    }
}


/* Small laptop / large tablet: brand and card go full width, the link
   columns share a row of three. */

@media (max-width: 1500px) {
    .footer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 44px 0;
    }
    .footer-brand {
        grid-column: 1 / -1;
        padding-right: 0;
    }
    .footer-about {
        max-width: 680px;
    }
    .footer-col:nth-of-type(3n+1) {
        border-left: 0;
        padding-left: 0;
    }
    .site-footer .footer-col__title {
        min-height: 0;
    }
    .footer-news {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) minmax(280px, 400px);
        align-items: center;
        column-gap: 28px;
        padding: 26px 28px;
    }
    .footer-news__icon {
        margin-bottom: 0;
    }
    .footer-news__head {
        min-width: 0;
    }
    .footer-news__form {
        margin-top: 0;
    }
    /* Four items carrying a phone number and two lines of opening hours
       need real width, so they pair up into a 2x2 block. */
    .footer-strip__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .footer-info:nth-child(2n+1) {
        padding-left: 0;
    }
    .footer-info:nth-child(2n) {
        padding-right: 0;
    }
    .footer-info:nth-child(2n+1)::before {
        display: none;
    }
    .footer-info:nth-child(n+3) {
        border-top: 1px solid var(--f-line);
    }
}


/* Tablet: two link columns, contact strip in a 2×2 block. */

@media (max-width: 960px) {
    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 38px 0;
        padding-block: 48px 40px;
    }
    .footer-col:nth-of-type(2n+1) {
        border-left: 0;
        padding-left: 0;
    }
    .footer-col:nth-of-type(2n) {
        border-left: 1px solid var(--f-line);
        padding-left: 28px;
    }
    .footer-news {
        grid-template-columns: auto minmax(0, 1fr);
        row-gap: 20px;
    }
    .footer-news__side {
        grid-column: 1 / -1;
    }
    .footer-news__form {
        max-width: 460px;
    }
    .footer-info,
    .footer-info:first-child,
    .footer-info:last-child {
        padding: 24px 20px;
    }
    .footer-info:nth-child(2n+1) {
        padding-left: 0;
    }
    .footer-info:nth-child(2n) {
        padding-right: 0;
    }
    .footer-info+.footer-info::before {
        height: 64px;
    }
}


/* Phone: everything stacks in one column. */

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 34px;
        padding-block: 42px 34px;
    }
    .footer-col:nth-of-type(2n+1),
    .footer-col:nth-of-type(2n) {
        border-left: 0;
        padding-left: 0;
        padding-right: 0;
    }
    .site-footer .footer-col__title {
        min-height: 0;
        margin-bottom: 18px;
    }
    .footer-links a {
        padding: 8px 0;
    }
    .footer-news {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 16px;
        padding: 24px 22px 26px;
    }
    .footer-news__form {
        max-width: none;
    }
    .footer-strip__list {
        grid-template-columns: minmax(0, 1fr);
    }
    .footer-info,
    .footer-info:first-child,
    .footer-info:last-child,
    .footer-info:nth-child(2n+1),
    .footer-info:nth-child(2n) {
        padding: 20px 0;
    }
    .footer-info+.footer-info::before {
        display: none;
    }
    .footer-info+.footer-info {
        border-top: 1px solid var(--f-line);
    }
    .footer-hipaa p {
        /* Left-aligned on a phone, so reserve the corner on the right only. */
        max-width: none;
        margin: 0;
        padding: 16px 62px 16px 0;
        text-align: left;
    }
    .footer-bottom__inner {
        justify-content: flex-start;
        gap: 14px;
        padding-block: 20px;
    }
}

@media (max-width: 576px) {
    .footer-logo {
        gap: 11px;
        margin-bottom: 20px;
    }
    .footer-logo__mark {
        width: 50px;
    }
    .footer-logo__name {
        font-size: 1.5rem;
    }
    .footer-social {
        gap: 11px;
        margin-top: 24px;
    }
    .footer-social a {
        width: 44px;
        height: 44px;
        font-size: 1rem;
    }
    .site-footer .footer-news__title {
        font-size: 1.375rem;
    }
    .footer-info__icon {
        width: 54px;
        height: 54px;
        font-size: 1.125rem;
    }
    .footer-info__phone {
        font-size: 1.25rem;
    }
    /* Icon and pill stay on one line; the pill takes the rest of the row. */
    .footer-info--cta {
        gap: 14px;
    }
    .footer-cta {
        flex: 1 1 auto;
        justify-content: center;
        padding: 16px 20px;
    }
    .footer-copy,
    .footer-legal a {
        font-size: .9375rem;
    }
    .footer-legal {
        gap: 0 10px;
    }
    .footer-legal li+li::before {
        margin-right: 10px;
    }
}

@media (max-width: 380px) {
    .footer-info {
        gap: 13px;
    }
    .footer-info__icon {
        width: 48px;
        height: 48px;
        font-size: 1rem;
    }
    .footer-news {
        padding: 20px 18px 22px;
    }
    .footer-news__form input[type="email"] {
        padding-inline: 15px;
    }
}


/* --------------------------------------------------------- back to top -- */


/* Floating on every page, revealed by site.js once the page has scrolled past
   a screenful. Sits above the sticky header (z 100) but below the mobile nav
   drawer (190/200) and the flash toast (2000), so it never covers those. */

.to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 150;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: var(--r-pill);
    background: var(--brand);
    color: #fff;
    font-size: 1rem;
    box-shadow: 0 8px 24px rgba(15, 42, 68, .28);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s, margin-bottom .22s ease, background .18s ease;
}

.to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.to-top:hover,
.to-top:focus-visible {
    background: var(--brand-light);
    color: #fff;
}

.to-top:active {
    transform: translateY(1px);
}

@media (max-width: 768px) {
    .to-top {
        right: 16px;
        bottom: 16px;
        width: 44px;
        height: 44px;
        font-size: .9375rem;
    }
}

@media print {
    .to-top {
        display: none !important;
    }
}


/* --------------------------------------------------------------- forms -- */

.field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.field label {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--heading);
}

.field label .req {
    color: #D6455B;
}

.input,
.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 13px 16px;
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--heading);
    background: #FCFCFA;
    border: 1px solid var(--border);
    border-radius: var(--r-btn);
    transition: border-color .16s ease, box-shadow .16s ease;
}

.field textarea {
    min-height: 130px;
    resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--brand-light);
    box-shadow: 0 0 0 3px rgba(29, 138, 145, .12);
}

.field .hint {
    font-size: var(--text-xs);
    color: var(--muted);
}

.field.is-invalid input,
.field.is-invalid textarea,
.field.is-invalid select {
    border-color: #D6455B;
}

.field .err {
    font-size: var(--text-xs);
    color: #D6455B;
    display: none;
}

.field.is-invalid .err {
    display: block;
}

.alert {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 18px;
    border-radius: var(--r-btn);
    font-size: var(--text-base);
    margin-bottom: 20px;
}

.alert--ok {
    background: #E6F5EE;
    color: #12694A;
    border: 1px solid #BFE5D4;
}

.alert--err {
    background: #FDECEE;
    color: #A32135;
    border: 1px solid #F6C9D0;
}

.alert--info {
    background: var(--pill-sky);
    color: #10527F;
    border: 1px solid #B6E4F7;
}


/* ====================================================== process == */

.process__grid {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 56px;
    align-items: start;
    position: relative;
}

.process__intro .section-head {
    margin-bottom: 28px;
}

.process__photo {
    width: 100%;
    max-width: 540px;
    height: auto;
    display: block;
    margin-top: 44px;
}


/* Column-major order, so the numbers run 01/02 down the left and 03/04 down
   the right. The grid gap is the only thing setting vertical rhythm — no card
   margins, so every row is spaced the same. */

.process__cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.p-card {
    border-radius: 16px;
    background: #F5F7F8;
    box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    padding: 18px;
    transition: transform .2s ease, box-shadow .2s ease;
}

.p-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}


/* Forced into row 2 so the cards fill column-major: 01/02 down the left,
   03/04 down the right, 05 starting a third row. */

.p-card:nth-child(2),
.p-card:nth-child(4) {
    grid-row: 2;
}

.p-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.p-card__num {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 30px;
    font-style: normal;
    line-height: 1;
    color: #2A6DF4;
}

.p-card__media {
    width: 180px;
    height: 124px;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
    background: var(--mint);
}

.p-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.p-card__mark {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: var(--r-pill);
    background: #F3FDFC;
    color: #2A6DF4;
    font-size: 24px;
    margin-top: 10px;
}

.p-card h4 {
    font-size: var(--text-base);
    line-height: 1.35;
    margin-bottom: 12px;
    padding-bottom: 10px;
    position: relative;
}

.p-card h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 26px;
    height: 2px;
    background: #2F6FBF;
}

.p-card p {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--body);
}

@media (max-width: 1200px) {
    .process__cards {
        gap: 20px;
    }
    .p-card__media {
        width: 150px;
        height: 106px;
    }
}

@media (max-width: 960px) {
    .process__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .process__photo {
        display: none;
    }
}

@media (max-width: 576px) {
    .process__cards {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    /* Column-major placement only makes sense in two columns. */
    .p-card:nth-child(2),
    .p-card:nth-child(4) {
        grid-row: auto;
    }
    .p-card__media {
        width: 132px;
        height: 96px;
    }
    .process__photo {
        max-width: 100%;
        margin-top: 32px;
    }
}


/* ==================================================== logo strip == */


/* Two identical sets scroll left; when the first has fully passed, the
   animation resets and the second is exactly where the first began — so the
   loop has no visible seam. */

.logo-strip {
    background: var(--white);
    padding-block: 40px;
    overflow: hidden;
}

.logo-strip__track {
    display: flex;
    width: max-content;
    animation: logo-scroll 38s linear infinite;
}

.logo-strip:hover .logo-strip__track {
    animation-play-state: paused;
}

.logo-strip__set {
    display: flex;
    align-items: center;
    gap: clamp(48px, 7vw, 96px);
    margin: 0;
    padding: 0 clamp(24px, 3.5vw, 48px);
    list-style: none;
    flex-shrink: 0;
}

.logo-strip__item {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    height: 52px;
}

.logo-strip__item img {
    max-height: 46px;
    width: auto;
    max-width: 170px;
    object-fit: contain;
    /* Muted by default, full colour on hover — as in the design. */
    filter: grayscale(1);
    opacity: .55;
    transition: filter .25s ease, opacity .25s ease;
}

.logo-strip__item:hover img {
    filter: none;
    opacity: 1;
}


/* Fallback when a partner has no artwork uploaded yet. */

.logo-strip__text {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: .02em;
    color: var(--heading);
    opacity: .45;
    white-space: nowrap;
    transition: opacity .25s ease;
}

.logo-strip__item:hover .logo-strip__text {
    opacity: 1;
}

@keyframes logo-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@media (max-width: 576px) {
    .logo-strip {
        padding-block: 28px;
    }
    .logo-strip__item {
        height: 40px;
    }
    .logo-strip__item img {
        max-height: 34px;
        max-width: 130px;
    }
    .logo-strip__text {
        font-size: 1rem;
    }
}


/* A moving strip is a motion effect — hold it still when asked to. */

@media (prefers-reduced-motion: reduce) {
    .logo-strip__track {
        animation: none;
    }
    .logo-strip {
        overflow-x: auto;
    }
}


/* =================================================== booking band == */


/* Navy band; the form card is lifted out of it so it overlaps the section
   above, matching the Figma layout. */

.booking-band {
    background: var(--footer-bg);
    /* Room for the card's overhang without it colliding with the section above. */
    margin-top: 120px;
}

.booking-band__grid {
    max-width: 1380px;
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 56px;
    align-items: center;
    margin: auto;
    position: relative;
}

.booking-band__copy {
    padding: 50px 0
}

.booking-band__copy .eyebrow {
    display: block;
}

.booking-band__copy h2 {
    color: #fff;
    font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
    margin-bottom: .5em;
}

.booking-band__copy p {
    color: var(--on-dark-soft);
    font-size: var(--text-base);
    max-width: 460px;
    margin-bottom: 30px;
}

.booking-hours {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: var(--r-card);
    padding: 22px 24px;
    max-width: 420px;
}

.booking-hours__head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 14px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.booking-hours__icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .09);
    color: var(--brand-light);
    font-size: 1.05rem;
}

.booking-hours__head small {
    display: block;
    font-size: .6875rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

.booking-hours__head strong {
    font-family: var(--font-head);
    font-size: 1rem;
    color: #fff;
}

.booking-hours__row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-block: 9px;
    font-size: var(--text-md);
    color: rgba(255, 255, 255, .6);
}

.booking-hours__row+.booking-hours__row {
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.booking-hours__row strong,
.booking-hours__row a {
    color: #fff;
    font-weight: 600;
}

.booking-hours__row a:hover {
    color: var(--brand-light);
}


/* The card. Negative margins pull it out of the band at both ends. */

.booking-card-present {
    position: relative;
    height: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 60%);
}

.booking-card {
    border-radius: 20px 20px 0 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 60%);
    padding: 34px 32px;
    background-size: cover;
    background-position: center;
    position: relative;
    bottom: 0;
    top: -50px;
}

.booking-card h2 {
    margin-bottom: 22px;
}

.booking-card__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.booking-card .field {
    margin-bottom: 16px;
}

.booking-card .field input,
.booking-card .field select,
.booking-card .field textarea {
    background: rgba(255, 255, 255, .75);
    border-color: rgba(15, 42, 68, .10);
}

.booking-card .field input:focus,
.booking-card .field select:focus,
.booking-card .field textarea:focus {
    background: #fff;
}

.booking-card textarea {
    min-height: 84px;
}

.booking-card .btn {
    margin-top: 6px;
}

@media (max-width: 960px) {
    .booking-band__grid {
        gap: 36px;
    }
    .booking-card {
        padding: 28px 24px;
    }
}


/* Stacked: the card sits above the band and no longer overhangs the bottom. */

@media (max-width: 960px) {
    .booking-band {
        margin-top: 40px;
        padding-block: 48px 56px;
    }
    .booking-band__grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .booking-band__copy {
        order: 2;
    }
    .booking-band__copy p {
        max-width: none;
    }
    .booking-hours {
        max-width: none;
    }
    .booking-card-present {
        height: auto;
    }
    .booking-card {
        order: 1;
        position: relative;
        bottom: auto;
        height: auto;
        margin-block: 0;
        border-radius: 20px;
        top: 0
    }
}

@media (max-width: 576px) {
    .booking-band {
        margin-top: 70px;
    }
    .booking-card {
        margin-block: -70px 0;
        padding: 24px 20px;
    }
    .booking-card__row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .booking-card h3 {
        font-size: var(--text-xl);
    }
}


/* ====================================================== why choose == */


/* Faint stethoscope backdrop from the design; the copy sits above it. */

.why-choose {
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.why-choose::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .82);
    pointer-events: none;
}

.why-choose>.container {
    position: relative;
    z-index: 1;
}

.why-choose__grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 40px;
    align-items: center;
}

.why-choose__col {
    display: flex;
    flex-direction: column;
    gap: 40px;
}


/* Left column mirrors the right: text first, icon after. */

.why-choose__col--left .why-item {
    text-align: right;
    justify-content: end;
}

.why-choose__col--right .why-item {
    text-align: left;
}

.why-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.why-item__body {
    min-width: 0;
}

.why-item h3 {
    font-size: var(--text-lg);
    line-height: 1.3;
    margin-bottom: .5em;
}

.why-item p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--body);
    margin: 0;
}

.why-item__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: var(--r-pill);
    background: var(--navy-deep);
    color: #fff;
    font-size: var(--text-base);
    margin-top: 2px;
}

.why-choose__media {
    width: clamp(240px, 26vw, 360px);
    align-self: end;
}

.why-choose__media img {
    width: 100%;
    height: auto;
    display: block;
}

.why-choose__placeholder {
    display: grid;
    place-items: center;
    aspect-ratio: 3 / 4;
    border-radius: var(--r-card);
    background: var(--mint);
    color: var(--brand);
    font-size: 4rem;
}

@media (max-width: 960px) {
    .why-choose__grid {
        gap: 28px;
    }
    .why-choose__col {
        gap: 30px;
    }
    .why-choose__media {
        width: clamp(200px, 24vw, 280px);
    }
}


/* Photo drops out below tablet; the six reasons become one readable column. */

@media (max-width: 960px) and (min-width: 768px) {
    .why-choose__grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px 28px;
    }
    .why-choose__media {
        display: none;
    }
    .why-choose__col--left .why-item {
        text-align: left;
        flex-direction: row-reverse;
        justify-content: flex-end;
    }
}

@media (max-width: 767px) {
    .why-choose__grid {
        display: block;
    }
    .why-choose__media {
        display: none;
    }
    .why-choose__col {
        display: flex;
        flex-direction: column;
        gap: 26px;
        grid-row: auto;
    }
    /* The two lists read as one continuous column. The hidden photo still
       sits between them in the DOM, so this targets the column itself rather
       than relying on an adjacent-sibling match. */
    .why-choose__col--right {
        margin-top: 26px;
    }
    .why-choose__col--left .why-item {
        text-align: left;
        flex-direction: row-reverse;
        justify-content: flex-end;
    }
    .why-choose__col .why-item {
        align-items: flex-start;
    }
    .why-item__icon {
        width: 40px;
        height: 40px;
    }
}


/* ======================================================== split CTA == */


/* Navy band with a pale contact card lifted out of it on the left. */

.cta-split {
    position: relative;
    background: var(--footer-bg);
    margin-bottom: 90px;
    /* The card overlaps the band's lower edge, so the band carries its own top
       spacing instead of borrowing the aside's padding. */
    padding-block: 56px 0;
}

.cta-split__grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 56px;
    align-items: center;
    max-width: 1340px;
    margin: auto;
}

.cta-split__card-present {
    position: relative;
    /* Hanging past the band is the design, but the card stays in normal flow so
       a long block of copy grows the band instead of spilling out the bottom of
       it and disappearing behind the newsletter. */
    align-self: start;
    margin-bottom: -50px;
}

.cta-split__card {
    background: linear-gradient(150deg, #EAF4FB 0%, #D8EAF7 55%, #C6E0F2 100%);
    border-radius: var(--r-card);
    padding: 40px 38px;
    box-shadow: var(--shadow-lg);
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.cta-split__card h2 {
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem);
    margin-bottom: .5em;
}

.cta-split__card p {
    font-size: var(--text-base);
    color: var(--body);
    margin-bottom: 28px;
}

.cta-split__contact {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cta-split__row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cta-split__row small {
    display: block;
    font-size: var(--text-sm);
    color: var(--body);
}

.cta-split__row a {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: var(--text-xl);
    color: var(--heading);
}

.cta-split__row a:hover {
    color: var(--brand);
}

.cta-split__icon {
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: var(--r-pill);
    background: var(--navy-deep);
    color: #fff;
    font-size: 1.05rem;
}

.cta-split__aside {
    padding-block: 0 56px;
}

.cta-split__aside h2 {
    color: #fff;
    font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.75rem);
    margin-bottom: 28px;
}

.cta-split__btn {
    background: #1F2244;
    color: #fff;
    margin-top: 12px;
}

.cta-split__btn:hover {
    background: rgba(255, 255, 255, .18);
    color: #fff !important;
}

@media (max-width: 960px) {
    .cta-split {
        margin-top: 60px;
        /* Stacked, the card straddles the band's top edge instead of its foot. */
        padding-block: 0;
    }
    .cta-split__grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .cta-split__card-present {
        align-self: stretch;
        margin-bottom: 0;
    }
    .cta-split__card {
        margin-block: -40px 0;
    }
    .cta-split__aside {
        padding-block: 36px 48px;
        text-align: center;
    }
    .cta-split__aside .btn {
        width: 100%;
        max-width: 340px;
    }
}

@media (max-width: 576px) {
    .cta-split__card {
        padding: 28px 22px;
    }
    .cta-split__row a {
        font-size: var(--text-lg);
    }
    .cta-split__icon {
        width: 46px;
        height: 46px;
    }
}


/* ======================================================= FAQ section == */

.faq-split {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 64px;
    align-items: start;
}

.faq-split__intro h2 {
    font-size: clamp(1.6rem, 1.4rem + 2.2vw, 2.3rem);
    margin-bottom: .5em;
}

.faq-split__intro p {
    max-width: 440px;
    margin-bottom: 26px;
}

.faq-split__list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}


/* FAQ page category filter — pills on desktop, one "Filter" button on phones. */

.faq-filter {
    background: var(--white);
    padding-block: 44px 0;
}

.faq-filter__cats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.faq-filter__toggle {
    display: none;
}

.faq-results {
    transition: opacity .2s ease;
}

.faq-results.is-loading {
    opacity: .45;
    pointer-events: none;
}

@media (max-width: 768px) {
    .faq-filter {
        padding-block: 28px 0;
    }
    .faq-filter__toggle {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 14px 18px;
        background: var(--white);
        border: 1px solid var(--border);
        border-radius: var(--r-btn);
        box-shadow: var(--shadow-sm);
        font: inherit;
        color: var(--heading);
        cursor: pointer;
        text-align: left;
    }
    .faq-filter__label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--brand);
        font-weight: 700;
        white-space: nowrap;
    }
    .faq-filter__current {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 600;
    }
    .faq-filter__caret {
        font-size: .8rem;
        color: var(--muted);
        transition: transform .2s ease;
    }
    .faq-filter.is-open .faq-filter__caret {
        transform: rotate(180deg);
    }
    .faq-filter__cats {
        display: none;
        justify-content: flex-start;
        margin-top: 10px;
        padding: 14px;
        background: var(--white);
        border: 1px solid var(--border);
        border-radius: var(--r-card);
        box-shadow: var(--shadow);
    }
    .faq-filter.is-open .faq-filter__cats {
        display: flex;
    }
}


/* Side photo under the intro — only printed for lists of 6+ questions. */

.faq-split__media {
    margin: 36px 0 0;
    aspect-ratio: 4 / 3;
    border-radius: 22px;
    overflow: hidden;
    background: var(--page);
}

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

.faq-item {
    background: var(--page);
    border-radius: 18px;
    overflow: hidden;
    transition: background .25s ease, box-shadow .25s ease;
}

.faq-item.is-open {
    box-shadow: var(--shadow);
}

.faq-item__btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1rem;
    color: var(--heading);
    transition: background .25s ease, color .25s ease;
}


/* The open question turns into a navy header bar, as in the design. */

.faq-item.is-open .faq-item__btn {
    background: var(--navy-deep);
    color: #fff;
}

.faq-item__q {
    display: flex;
    gap: 8px;
    min-width: 0;
}

.faq-item__n {
    flex-shrink: 0;
}

.faq-item__icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--navy-deep);
    color: #fff;
    font-size: var(--text-sm);
    transition: background .25s ease, color .25s ease;
}

.faq-item.is-open .faq-item__icon {
    background: transparent;
    color: #fff;
}


/* Swap between + and − without changing the markup. */

.faq-item__icon .fa-minus,
.faq-item.is-open .faq-item__icon .fa-plus {
    display: none;
}

.faq-item.is-open .faq-item__icon .fa-minus {
    display: block;
}

.faq-item__panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
}

.faq-item__panel>div {
    padding: 20px 24px 24px;
    font-size: var(--text-base);
    line-height: 1.75;
    color: var(--body);
}

@media (max-width: 960px) {
    .faq-split {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .faq-split__intro p {
        max-width: none;
    }
    .faq-split__media {
        display: none;
        /* stacked columns leave no gap to fill */
    }
}

@media (max-width: 576px) {
    .faq-item__btn {
        padding: 18px 18px;
        font-size: var(--text-base);
        gap: 12px;
    }
    .faq-item__panel>div {
        padding: 16px 18px 20px;
    }
    .faq-item__icon {
        width: 30px;
        height: 30px;
    }
}


/* ==================================================== team accordion == */


/* Expanding photo panels. The open panel takes the extra width; the rest stay
   narrow. Driven by flex-grow so it animates smoothly and needs no JS layout. */

.team__strip {
    display: flex;
    gap: 12px;
    align-items: stretch;
    height: 620px;
}

.team__panel {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    border-radius: var(--r-card);
    overflow: hidden;
    background: var(--mint);
    transition: flex-grow .45s cubic-bezier(.4, 0, .2, 1);
}

.team__panel.is-open {
    flex-grow: 3.2;
}


/* The whole panel is the click target, sitting above the photo. */

.team__trigger {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.team__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: filter .35s ease, transform .45s ease;
}

.team__photo--placeholder {
    display: grid;
    place-items: center;
    color: var(--brand);
    font-size: 2.5rem;
}

.team__panel:not(.is-open) .team__photo {
    filter: grayscale(.15) brightness(.97);
}

.team__panel:hover .team__photo {
    transform: scale(1.03);
}


/* Name block — only revealed on the open panel. */

.team__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 28px 30px;
    color: #fff;
    background: linear-gradient(to top, rgba(15, 42, 68, .88) 0%, rgba(15, 42, 68, .55) 55%, transparent 100%);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .3s ease .12s, transform .3s ease .12s;
    pointer-events: none;
}

.team__panel.is-open .team__body {
    opacity: 1;
    transform: none;
}

.team__panel.is-open .team__more {
    pointer-events: auto;
}

.team__name {
    font-family: var(--font-head);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px;
    white-space: nowrap;
}

.team__role {
    margin: 0;
    font-size: var(--text-base);
    color: rgba(255, 255, 255, .85);
    white-space: nowrap;
}

.team__years {
    margin: 4px 0 0;
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, .65);
}

.team__more {
    position: absolute;
    right: 30px;
    bottom: 28px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-md);
    font-weight: 600;
    color: #fff;
}

.team__more:hover {
    text-decoration: underline;
}

.team__more i {
    transition: transform .18s ease;
}

.team__more:hover i {
    transform: translateX(4px);
}

@media (max-width: 960px) {
    .team__strip {
        height: 520px;
    }
    .team__panel.is-open {
        flex-grow: 2.6;
    }
    .team__name {
        font-size: var(--text-xl);
    }
}


/* Tablet: two rows of panels rather than one very thin strip. */

@media (max-width: 960px) {
    .team__strip {
        flex-wrap: wrap;
        height: auto;
    }
    .team__panel {
        flex: 1 1 calc(33.333% - 8px);
        height: 320px;
    }
    .team__panel.is-open {
        flex-grow: 0;
        flex-basis: calc(66.666% - 4px);
    }
}


/* Mobile: plain stacked cards with every name always visible. */

@media (max-width: 576px) {
    .team__strip {
        flex-direction: column;
        gap: 14px;
    }
    .team__panel,
    .team__panel.is-open {
        flex: 0 0 auto;
        height: 400px;
    }
    .team__trigger {
        display: none;
    }
    .team__photo {
        filter: none !important;
    }
    .team__body {
        opacity: 1;
        transform: none;
        pointer-events: auto;
        padding: 22px;
    }
    .team__name,
    .team__role {
        white-space: normal;
    }
    .team__more {
        position: static;
        margin-top: 12px;
        display: inline-flex;
    }
}


/* Radio rendered as a chip — booking slot picker and the home treatment finder. */

label.btn:has(input:checked),
label:has(input[type="radio"]:checked)>.card__icon {
    background: var(--brand);
    color: #fff !important;
    border-color: var(--brand);
}

label.btn:has(input:focus-visible) {
    outline: 3px solid var(--brand-light);
    outline-offset: 2px;
}


/* Flash bar shown under the header after a redirect. */


/* Floating toast so it's visible no matter where the page scrolled to
   (e.g. the newsletter form jumps to #nlEmail in the footer on submit). */

.site-flash {
    position: fixed;
    top: 88px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    width: min(92%, 620px);
    animation: siteFlashIn .3s ease;
}

@keyframes siteFlashIn {
    from {
        opacity: 0;
        transform: translate(-50%, -14px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

.site-flash>.container {
    max-width: none;
    padding: 0;
}

.site-flash .alert {
    position: relative;
    padding-right: 46px;
    box-shadow: 0 10px 30px rgba(15, 42, 68, .18);
}

.site-flash__x {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: 0;
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1;
    color: inherit;
    opacity: .55;
}

.site-flash__x:hover {
    opacity: 1;
}


/* ---------------------------------------------------------- CMS / prose -- */

.prose {
    color: var(--body);
    font-size: 1rem;
    line-height: 1.8;
}

.prose h2 {
    margin-top: 12px;
    font-size: 1.75rem;
}

.prose h3 {
    margin-top: 1.6em;
}

.prose h2:first-child,
.prose h3:first-child {
    margin-top: 0;
}

.prose ul,
.prose ol {
    padding-left: 1.35rem;
}

.prose li {
    margin-bottom: .5rem;
}

.prose a {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.prose blockquote {
    margin: 1.5rem 0;
    padding: 18px 24px;
    background: var(--mint);
    border-left: 3px solid var(--brand);
    border-radius: 0 var(--r-btn) var(--r-btn) 0;
    color: var(--heading);
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

.prose th,
.prose td {
    padding: 12px 14px;
    border: 1px solid var(--border);
    text-align: left;
}

.prose th {
    background: var(--page);
    color: var(--heading);
    font-weight: 600;
}


/* Lead paragraph used at the top of the legal pages. */

.lead {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    line-height: 1.4;
    color: var(--heading);
    text-align: center;
}


/* ------------------------------------------------------------ accordion -- */

.accordion {
    border: 1px solid var(--border-soft);
    border-radius: var(--r-card);
    overflow: hidden;
    background: var(--white);
}

.accordion__item+.accordion__item {
    border-top: 1px solid var(--border-soft);
}

.accordion__btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 1rem;
    color: var(--heading);
    text-align: left;
}

.accordion__btn i {
    color: var(--brand);
    transition: transform .2s ease;
    flex-shrink: 0;
}

.accordion__item.is-open .accordion__btn i {
    transform: rotate(180deg);
}

.accordion__panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
}

.accordion__panel>div {
    padding: 0 24px 22px;
    font-size: var(--text-base);
    color: var(--body);
}


/* ---------------------------------------------------------- testimonial -- */

.quote {
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-card);
    padding: 30px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 18px;
    height: 100%;
}

.quote__mark {
    font-size: 2rem;
    color: var(--brand-light);
    line-height: 1;
    opacity: .35;
}

.quote p {
    color: var(--heading);
    font-size: var(--text-base);
    flex: 1;
}

.quote__by {
    display: flex;
    align-items: center;
    gap: 12px;
}

.quote__avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--r-pill);
    background: var(--mint);
    color: var(--brand);
    display: grid;
    place-items: center;
    font-weight: 700;
    flex-shrink: 0;
}

.quote__name {
    display: block;
    font-weight: 600;
    color: var(--heading);
    font-size: var(--text-base);
}

.quote__meta {
    display: block;
    margin-top: 2px;
    font-size: var(--text-xs);
    color: var(--muted);
}

.stars {
    color: #E8A33D;
    font-size: var(--text-sm);
    letter-spacing: 2px;
}


/* --------------------------------------------------------------- misc -- */

.media-round {
    border-radius: var(--r-card);
    overflow: hidden;
}

.media-round img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.check-list {
    list-style: none;
    padding: 0;
    margin: 40px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.check-list li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: var(--text-base);
    font-weight: 600;
    color: #1F2244;
}

.check-list i {
    color: var(--brand);
    margin-top: 3px;
    flex-shrink: 0;
    font-size: 20px;
}

.divider {
    height: 1px;
    background: var(--border-soft);
    border: 0;
    margin-block: 40px;
}

.map-embed {
    border-radius: var(--r-card);
    overflow: hidden;
    border: 1px solid var(--border-soft);
    background: var(--page);
}

.map-embed iframe {
    width: 100%;
    height: 380px;
    border: 0;
    display: block;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--muted);
}

.empty-state i {
    font-size: 2.5rem;
    color: var(--border);
    margin-bottom: 16px;
    display: block;
}


/* ========================================================== responsive == */


/* Between the desktop layout and the burger breakpoint the bar gets tight —
   tighten the nav's own spacing so brand + links + both CTAs stay on one line. */

@media (max-width: 1200px) {
    .site-header__inner {
        gap: 12px;
    }
    .nav__link {
        padding: 10px 11px;
        font-size: var(--text-md);
    }
    .header__actions {
        gap: 8px;
    }
    .header__actions .btn {
        padding: 9px 14px;
        font-size: var(--text-sm);
    }
    .brand__mark {
        width: 36px;
    }
    .brand__name {
        font-size: 1.15rem;
    }
}

@media (max-width: 960px) {
     :root {
        --section-y: 72px;
    }
    .stats {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 22px;
    }
    .stats__item:nth-child(3n+1) {
        border-left: 0;
        padding-left: 0;
    }
}

@media (max-width: 960px) {
    .grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }
    .grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }
    .nav-toggle {
        display: flex;
    }
    /* Right-side slide-in drawer. */
    .nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: min(88vw, 360px);
        max-height: none;
        background: var(--white);
        box-shadow: -12px 0 40px rgba(15, 42, 68, .18);
        margin: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(100%);
        visibility: hidden;
        pointer-events: none;
        transition: transform .32s cubic-bezier(.4, 0, .2, 1), visibility .32s ease;
        z-index: 200;
    }
    .nav.is-open {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
    }
    /* Dimmed backdrop behind the drawer. */
    .nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(15, 42, 68, .42);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .3s ease, visibility .3s ease;
        z-index: 190;
    }
    .nav-backdrop.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    /* Lock the page behind the open drawer. */
    body.nav-open {
        overflow: hidden;
    }
    .nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 82px 22px 32px;
        /* room for the close button up top */
    }
    /* Close (X) button pinned inside the drawer. */
    .nav__close {
        position: absolute;
        top: 18px;
        right: 18px;
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        border: 1px solid var(--border);
        border-radius: var(--r-btn);
        background: var(--white);
        color: var(--heading);
        font-size: 1.05rem;
        cursor: pointer;
    }
    .nav__close:hover {
        background: var(--page);
        color: var(--brand);
    }
    /* Portal + Book actions repeated inside the drawer foot. */
    .nav__actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin: 18px 22px 0;
        padding-top: 20px;
        border-top: 1px solid var(--border-soft);
    }
    .nav__actions .btn {
        width: 100%;
        justify-content: center;
    }
    .nav__link {
        justify-content: space-between;
        padding: 14px 12px;
        border-radius: var(--r-btn);
    }
    .nav__menu {
        position: static;
        transform: none;
        opacity: 0;
        visibility: hidden;
        display: none;
        box-shadow: none;
        border: 0;
        border-radius: 0;
        min-width: 0;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height .25s ease, opacity .25s ease;
    }
    .nav__item--has-menu:hover .nav__menu {
        max-height: 0;
        display: none;
        opacity: 0;
        visibility: hidden;
    }
    .nav__item--has-menu.is-open .nav__menu {
        display: block;
        opacity: 1;
        visibility: visible;
        max-height: 520px;
        padding: 0 0 0 12px;
    }
    /* Mega menu collapses into the off-canvas nav, like a plain submenu. */
    .mega {
        position: static;
        transform: none;
        width: auto;
        max-width: none;
        opacity: 0;
        visibility: hidden;
        display: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        max-height: 0;
        overflow: hidden;
        transition: max-height .28s ease, opacity .28s ease;
        z-index: auto;
    }
    .mega::before {
        display: none;
    }
    .nav__item--has-menu:hover .mega {
        max-height: 0;
        display: none;
        opacity: 0;
        visibility: hidden;
    }
    .nav__item--has-menu.is-open .mega {
        display: block;
        opacity: 1;
        visibility: visible;
        max-height: 900px;
    }
    .mega__inner {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 8px 0 8px 12px;
    }
    .mega__feature {
        display: none;
    }
    /* the promo panel is desktop-only */
    .mega__grid {
        grid-template-columns: 1fr;
        gap: 2px;
    }
    .mega__card {
        padding: 12px 10px;
    }
    .header__actions .btn--portal {
        display: none;
    }
    .newsletter {
        flex-direction: column;
        text-align: center;
        padding: 36px 26px;
    }
    .newsletter__form {
        justify-content: center;
        margin-inline: auto;
    }
    .newsletter__art {
        display: none;
    }
}

@media (max-width: 768px) {
     :root {
        --section-y: 56px;
        --gutter: 18px;
    }
    /* !important because pages set bespoke column ratios inline (e.g.
       "1.5fr 1fr"), and an inline style would otherwise keep two columns on a
       phone and push the page sideways. Use .grid--keep to opt out. */
    .grid:not(.grid--keep),
    .grid--2:not(.grid--keep),
    .grid--3:not(.grid--keep),
    .grid--4:not(.grid--keep) {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }
    .page-hero {
        padding-block: 56px;
    }
    .stats {
        grid-template-columns: 1fr 1fr;
        padding: 20px 16px;
    }
    .stats__item {
        border-left: 0 !important;
        padding-left: 0 !important;
    }
    .card,
    .card--pad-lg {
        padding: 22px;
    }
    .cta-band {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    .cta-band__points {
        justify-content: center;
    }
    .cta-band .btn {
        width: 100%;
    }
    .cta-wide {
        padding: 40px 22px;
    }
    .cta-wide__actions .btn {
        width: 100%;
    }
    .newsletter__form input[type="email"] {
        min-width: 0;
        width: 100%;
    }
    .newsletter__form .btn {
        width: 100%;
    }
    /* The bar must fit brand + CTA + toggle, so let the brand give way first. */
    .site-header__inner {
        gap: 10px;
    }
    .brand {
        flex-shrink: 1;
        min-width: 0;
    }
    .brand__mark {
        width: 34px;
    }
    .brand__name {
        font-size: 1.05rem;
    }
    .brand__sub {
        font-size: .45rem;
        letter-spacing: .12em;
    }
    .header__actions {
        gap: 6px;
    }
    .header__actions .btn {
        padding: 9px 13px;
        font-size: var(--text-sm);
    }
    .nav-toggle {
        width: 40px;
        height: 40px;
    }
}


/* Narrowest phones: drop the strapline and shorten the CTA to just "Book". */

@media (max-width: 380px) {
    .hide-xs,
    .brand__sub {
        display: none;
    }
    .brand__name {
        font-size: 0.95rem;
    }
    .header__actions {
        gap: 4px;
    }
    .header__actions .btn {
        padding: 7px 10px;
        font-size: 0.78rem;
    }
}

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


/* Respect the user's motion preference. */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ==========================================================================
   Redesigned Components for Figma Layouts (1920px Desktop)
   ========================================================================== */


/* Marquee / Partner Slider */

.marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-block: 30px;
    background: var(--white);
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
    margin-block: 20px;
}

.marquee__inner {
    display: flex;
    gap: 80px;
    width: max-content;
    animation: marquee-scroll 25s linear infinite;
}

.marquee__inner:hover {
    animation-play-state: paused;
}

.marquee__inner span {
    font-family: var(--font-head);
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--muted);
    letter-spacing: 0.05em;
    opacity: 0.4;
    transition: opacity 0.2s, color 0.2s;
}

.marquee__inner span:hover {
    opacity: 0.8;
    color: var(--brand);
}

@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}


/* Story Timeline */

.story-timeline {
    position: relative;
    margin-top: 30px;
    padding-left: 40px;
}

.story-timeline::before {
    content: '';
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 7px;
    width: 2px;
    background: var(--brand-light);
    opacity: 0.3;
}

.story-timeline__item {
    position: relative;
    margin-bottom: 30px;
}

.story-timeline__item:last-child {
    margin-bottom: 0;
}

.story-timeline__dot {
    position: absolute;
    left: -40px;
    top: 6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--white);
    border: 3px solid var(--brand);
    z-index: 2;
    transition: background 0.3s;
}

.story-timeline__item:hover .story-timeline__dot {
    background: var(--brand);
}

.story-timeline__year {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--brand);
    margin-bottom: 4px;
    display: inline-block;
}

.story-timeline__content h3 {
    margin-bottom: 6px;
    font-size: 1.1rem;
}

.story-timeline__content p {
    font-size: var(--text-md);
    color: var(--body);
    margin: 0;
}


/* ============================================ awards & certifications == */


/* Cards are equal height on every row: the grid stretches them, and each card
   is a column with the copy area flexing, so a longer title never makes one
   card taller than its neighbours. */

.awards-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-top: 44px;
    align-items: stretch;
}

.award-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-align: center;
    padding: 28px 20px;
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease;
}

.award-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}


/* Fixed art box keeps every title on the same baseline. */

.award-card__art {
    position: relative;
    height: 92px;
    display: grid;
    place-items: center;
    margin-bottom: 16px;
}

.award-card__art img {
    max-height: 92px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}

.award-card__icon {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: var(--r-pill);
    background: linear-gradient(145deg, #FBF3E2, #F4E4C4);
    color: #C98A22;
    font-size: 1.75rem;
}

.award-card__year {
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--brand);
    color: #fff;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .06em;
    padding: 3px 10px;
    border-radius: var(--r-pill);
}

.award-card h3 {
    font-size: var(--text-base);
    line-height: 1.35;
    margin-bottom: 10px;
    color: var(--heading);
}


/* Pushed to the bottom so descriptions of different lengths still align. */

.award-card p {
    margin: auto 0 0;
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--muted);
}

.certs-panel {
    margin-top: 48px;
    padding: 36px 32px;
    background: var(--page);
    border-radius: var(--r-card);
}

.certs-panel__head {
    text-align: center;
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 32px;
}

.certs-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 20px;
    align-items: stretch;
}

.cert-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
    gap: 4px;
}

.cert-item__art {
    height: 62px;
    display: grid;
    place-items: center;
    margin-bottom: 10px;
}

.cert-item__art img {
    max-height: 62px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}

.cert-item__icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: var(--r-pill);
    background: var(--white);
    border: 1px solid var(--border-soft);
    color: var(--brand);
    font-size: var(--text-xl);
}

.cert-item strong {
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1.25;
    color: var(--heading);
}

.cert-item small {
    margin-top: auto;
    padding-top: 4px;
    font-size: .6875rem;
    line-height: 1.4;
    color: var(--muted);
}

@media (max-width: 960px) {
    .awards-row {
        grid-template-columns: repeat(3, 1fr);
    }
    .certs-row {
        grid-template-columns: repeat(4, 1fr);
        row-gap: 28px;
    }
}

@media (max-width: 768px) {
    .awards-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .certs-row {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 24px;
    }
    .certs-panel {
        padding: 26px 18px;
    }
    .award-card {
        padding: 22px 14px;
    }
    .award-card__art {
        height: 74px;
    }
    .award-card__art img {
        max-height: 74px;
    }
}

@media (max-width: 576px) {
    .awards-row {
        grid-template-columns: 1fr 1fr;
    }
    .certs-row {
        grid-template-columns: 1fr 1fr;
    }
}


/* Tech Highlights / Circular Layout */

.tech-layout {
    align-items: center;
    margin-top: 60px;
}

.tech-column {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.tech-item {
    display: flex;
    gap: 20px;
}

.tech-item--right {
    text-align: right;
    flex-direction: row-reverse;
}

.tech-item__icon {
    width: 52px;
    height: 52px;
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: var(--text-xl);
    color: var(--brand);
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
}

.tech-item__info h4 {
    font-size: 1.15rem;
    margin-bottom: 6px;
}

.tech-item__info p {
    font-size: var(--text-md);
    color: var(--body);
    margin-bottom: 6px;
    line-height: 1.4;
}

.tech-item__device {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--brand-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tech-center-img {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    padding: 24px;
    background: var(--white);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-lg);
    display: grid;
    place-items: center;
}

.tech-center-img__inner {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.tech-center-img__inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tech-badge-promise {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--brand);
    color: #fff;
    padding: 12px 30px;
    border-radius: var(--r-pill);
    font-family: var(--font-head);
    font-size: var(--text-md);
    font-weight: 700;
    white-space: nowrap;
    box-shadow: var(--shadow);
    text-align: center;
    border: 2px solid var(--white);
}


/* Quote cards that deliberately hang past their image on desktop. On phones the
   overhang pushes past the gutter, so pull them back inside. */

@media (max-width: 768px) {
    .float-card {
        position: static !important;
        max-width: none !important;
        margin-top: 16px;
    }
}


/* On phones the single line is wider than the screen — let it wrap instead. */

@media (max-width: 576px) {
    .tech-badge-promise {
        white-space: normal;
        max-width: calc(100vw - 56px);
        padding: 10px 20px;
        font-size: var(--text-sm);
        border-radius: 18px;
    }
}


/* ------------------------- trust strip + conditions (Figma alignment) -- */


/* Four reassurance points, each with a ringed line-art icon */

.tech-trust-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: 54px;
    padding: 26px 20px;
    border-radius: 54.77px;
    background: #fff;
    box-shadow: 0 10px 34px rgba(15, 42, 68, 0.07);
}

.tech-trust-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-inline: 24px;
    min-width: 0;
    text-align: left;
    font-size: var(--text-md);
    font-weight: 500;
    color: var(--heading);
}

.tech-trust-item+.tech-trust-item {
    border-left: 1px solid var(--border-soft);
}

.tech-trust-item i {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 80.63px;
    height: 80.63px;
    border-radius: 50%;
    border: 2px solid #CDD4DA;
    background: #fff;
    color: var(--brand);
    font-size: 25px;
}

.tech-trust-item strong {
    display: block;
    margin-bottom: 3px;
    font-family: var(--font-head);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--heading);
}


/* Featured Treatment & Conditions */

.featured-treatment {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: center;
}

.conditions-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    margin-top: 50px;
}

.condition-card {
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-card);
    padding: 24px 16px;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.condition-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.condition-card__icon {
    font-size: 2rem;
    color: #2F6FBF;
    margin-bottom: 14px;
    display: inline-block;
}

.condition-card h4 {
    font-size: var(--text-base);
    margin-bottom: 8px;
    border-bottom: 2px solid #2F6FBF;
    padding-bottom: 6px;
    display: inline-block;
    color: var(--heading);
}

.condition-card p {
    font-size: var(--text-sm);
    color: var(--body);
    line-height: 1.45;
    margin: 0;
}


/* Journey Steps */


/* Booking Form Section */

.booking-section-layout {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 0;
    background: var(--navy-deep);
    color: #fff;
    border-radius: var(--r-card);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.booking-info-pane {
    padding: 60px 48px;
    background: rgba(255, 255, 255, 0.02);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.booking-form-pane {
    padding: 60px 56px;
}

.booking-form-pane .field label {
    color: #fff;
}

.booking-form-pane .input,
.booking-form-pane select,
.booking-form-pane textarea {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.booking-form-pane .input:focus,
.booking-form-pane select:focus,
.booking-form-pane textarea:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--brand-light);
    box-shadow: 0 0 0 3px rgba(29, 138, 145, .2);
}

.booking-form-pane select option {
    background: var(--navy-deep);
    color: #fff;
}


/* Responsive Overrides for Redesigned Components */

@media (max-width: 1200px) {
    .tech-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .tech-column {
        gap: 30px;
    }
    .tech-item--right {
        text-align: left;
        flex-direction: row;
    }
    .tech-center-img {
        max-width: 400px;
        margin: 0 auto;
    }
    .featured-treatment {
        grid-template-columns: 1fr;
    }
    .conditions-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .booking-section-layout {
        grid-template-columns: 1fr;
    }
    .booking-info-pane {
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .conditions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .certs-row {
        gap: 20px;
    }
}

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


/* -------------------------------------------------------------- print -- */

@media print {
    .site-header,
    .site-footer,
    .newsletter-wrap,
    .cta-band,
    .cta-wide,
    .nav-toggle {
        display: none !important;
    }
    body {
        background: #fff;
    }
    .section {
        padding-block: 16px;
    }
}


/* ==========================================================================
   Page-Specific Scoped Classes (Phase 3 Utility Pages)
   ========================================================================== */


/* --- Accessibility Statement --- */

.accessibility-hero {
    background: #136D6A;
    color: #fff;
    padding-block: 120px 120px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.accessibility-hero__content {
    max-width: 800px;
    margin: 0 auto;
}

.accessibility-hero__title {
    color: #fff;
    margin-bottom: 16px;
    font-size: clamp(2.2rem, 1.8rem + 2.8vw, 2.8rem);
}

.accessibility-hero__sub {
    font-size: 1.125rem;
    line-height: 1.6;
    opacity: 0.9;
    margin-bottom: 0;
    max-width: 640px;
    margin-inline: auto;
}

.accessibility-intro {
    border-bottom: 1px solid var(--border-soft);
    padding-block: 50px;
    text-align: center;
}

.accessibility-intro__lead {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--heading);
    line-height: 1.5;
    margin-bottom: 16px;
}

.accessibility-intro__text {
    font-size: var(--text-base);
    color: var(--body);
    max-width: 680px;
    margin-inline: auto;
    line-height: 1.6;
}

.accessibility-section-title-wrap {
    margin-bottom: 50px;
}

.accessibility-section-title-wrap h2 {
    font-size: 2.25rem;
}

.accessibility-section-title-wrap p {
    color: var(--body);
    font-size: var(--text-base);
}

.accessibility-facility-card {
    border-color: var(--border-soft);
    padding: 30px;
}

.accessibility-facility-card__icon {
    font-size: 1.75rem;
    color: var(--brand);
    display: block;
    margin-bottom: 14px;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: #F3F5F7;
    display: flex;
    justify-content: center;
    align-items: center;
}

.accessibility-facility-card__title {
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.accessibility-facility-card__text {
    font-size: var(--text-md);
    color: var(--body);
    line-height: 1.5;
    margin: 0;
}

.accessibility-effort-box {
    background: var(--page);
    padding: 20px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border-soft);
}

.accessibility-effort-box__label {
    color: #136D6A;
    font-size: var(--text-xl);
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
    font-weight: 600;
}

.accessibility-effort-box__text {
    font-size: var(--text-base);
    color: var(--body);
    line-height: 1.5;
    margin: 0;
}

.accessibility-contact-card {
    background: var(--navy-deep);
    color: #fff;
    border: none;
    padding: 30px;
}

.accessibility-contact-card__title {
    color: #fff;
    font-size: 1.15rem;
    margin-bottom: 16px;
}

.accessibility-contact-card__list {
    font-size: var(--text-md);
    line-height: 1.7;
}

.accessibility-contact-card__item {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
}

.accessibility-contact-card__item:last-child {
    margin-bottom: 0;
}

.accessibility-contact-card__icon {
    color: var(--brand-light);
}


/* --- Medical Disclaimer --- */

.disclaimer-hero {
    background: #136D6A;
    color: #fff;
    padding-block: 60px 80px;
    position: relative;
    overflow: hidden;
}

.disclaimer-hero__content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.disclaimer-hero__title {
    color: #fff;
    margin-bottom: 12px;
    font-size: clamp(2.2rem, 1.8rem + 2.8vw, 2.8rem);
}

.disclaimer-hero__sub {
    font-size: 1.125rem;
    line-height: 1.5;
    opacity: 0.9;
    margin-bottom: 0;
}

.disclaimer-warning {
    border-bottom: 1px solid var(--border-soft);
    padding-block: 40px;
}

.disclaimer-warning__box {
    background: #FEF3C7;
    border: 1px solid #FCD34D;
    border-radius: var(--r-card);
    padding: 24px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.disclaimer-warning__icon {
    color: #D97706;
    font-size: 1.3rem;
}

.disclaimer-warning__text {
    color: #92400E;
    font-size: var(--text-xl);
    line-height: 1.55;
    margin: 0;
    font-weight: 600;
}

.disclaimer-number {
    font-size: 24px;
    font-weight: 700;
    color: #005F54;
    display: block;
    margin-bottom: 6px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.disclaimer-section-title {
    font-size: 1.75rem;
    margin-top: 0;
    margin-bottom: 16px;
}

.disclaimer-table-wrapper {
    overflow-x: auto;
    margin-top: 20px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-sm);
}

.disclaimer-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: var(--text-sm);
}

.disclaimer-table th {
    padding: 14px 16px;
    font-weight: 700;
    color: var(--heading);
    background: var(--page);
    border-bottom: 1px solid var(--border-soft);
}

.disclaimer-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-soft);
    line-height: 1.4;
}

.disclaimer-table tr:last-child td {
    border-bottom: none;
}

.disclaimer-emergency-box {
    background: var(--navy-deep);
    color: #fff;
    padding: 30px;
    border-radius: var(--r-card);
    border: none;
}

.disclaimer-emergency-box__title {
    color: #fff;
    margin-top: 0;
    margin-bottom: 10px;
    font-weight: 800;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.disclaimer-emergency-box__text {
    font-size: var(--text-md);
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin: 0;
}

.disclaimer-quote {
    margin: 24px 0;
    padding-left: 16px;
    border-left: 4px solid var(--brand);
    font-style: italic;
    color: var(--heading);
}

.disclaimer-contacts-grid {
    gap: 20px;
    font-size: var(--text-md);
}

.disclaimer-contact-box {
    background: var(--page);
    padding: 20px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border-soft);
}

.disclaimer-contact-box__label {
    color: var(--heading);
    display: block;
    margin-bottom: 4px;
    font-weight: 700;
}


/* --- Financing Info --- */

.financing-hero {
    background: var(--navy-deep);
    color: #fff;
    padding-block: 100px 100px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.financing-hero__content {
    max-width: 800px;
    margin: 0 auto;
}

.financing-hero__eyebrow {
    font-size: var(--text-xs);
    font-weight: 800;
    color: var(--brand-light);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: block;
    margin-bottom: 14px;
}

.financing-hero__title {
    color: #fff;
    margin-bottom: 16px;
    font-size: clamp(2.2rem, 1.8rem + 2.8vw, 2.8rem);
}

.financing-hero__sub {
    font-size: 1.125rem;
    line-height: 1.6;
    opacity: 0.9;
    margin-bottom: 32px;
    max-width: 640px;
    margin-inline: auto;
}

.financing-why-card {
    border-color: var(--border-soft);
    text-align: center;
    padding: 32px;
}

.financing-why-card__icon {
    font-size: 2rem;
    color: var(--brand);
    display: block;
    margin-bottom: 16px;
}

.financing-why-card__title {
    font-size: 1.15rem;
    margin-bottom: 12px;
}

.financing-why-card__text {
    font-size: var(--text-md);
    color: var(--body);
    line-height: 1.5;
    margin: 0;
}

.financing-apply-card {
    background: var(--navy-deep);
    color: #fff;
    border: none;
    padding: 40px;
}

.financing-apply-card__title {
    color: #fff;
    font-size: var(--text-2xl);
    margin-bottom: 24px;
}

.financing-apply-step {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.financing-apply-step__num {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--brand-light);
    line-height: 1;
    font-family: var(--font-head);
}

.financing-apply-step__label {
    display: block;
    color: #fff;
    font-size: 0.95rem;
    margin-bottom: 4px;
    font-weight: 700;
}

.financing-apply-step__text {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.7);
    display: block;
    line-height: 1.4;
}

.financing-plan-card {
    border-color: var(--border-soft);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.financing-plan-card--featured {
    border-color: var(--border-soft);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transform: scale(1.03);
    box-shadow: var(--shadow-lg);
    border-top: 4px solid var(--brand);
}

.financing-plan-card__title {
    font-size: var(--text-xl);
    margin-bottom: 4px;
}

.financing-plan-card__duration {
    color: var(--brand-light);
    display: block;
    margin-bottom: 20px;
    font-weight: 700;
}

.financing-plan-card__duration--featured {
    color: var(--brand);
    display: block;
    margin-bottom: 20px;
    font-weight: 700;
}

.financing-plan-row {
    border-top: 1px solid var(--border-soft);
    padding-block: 12px;
    display: flex;
    justify-content: space-between;
    font-size: var(--text-md);
}

.financing-plan-row__label {
    color: var(--muted);
}

.financing-plan-row__value {
    color: var(--heading);
    font-weight: 700;
}

.financing-methods-bar {
    background: #FDFDFD;
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
    padding-block: 40px;
}

.financing-methods-title {
    font-size: var(--text-xs);
    font-weight: 800;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.financing-methods-row {
    gap: 24px;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--heading);
}

.financing-method-badge {
    background: var(--white);
    padding: 12px 24px;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-base);
}

.financing-method-badge i {
    color: var(--brand);
}

.financing-faq-item {
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-card);
    overflow: hidden;
}

.financing-faq-item--active {
    background: var(--page);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-card);
    overflow: hidden;
}

.financing-faq-item__header {
    padding: 20px 24px;
    font-weight: 700;
    font-size: 0.95rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--heading);
}

.financing-faq-item__header--active {
    padding: 20px 24px;
    background: var(--navy-deep);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
}

.financing-faq-item__body {
    padding: 20px 24px;
    font-size: var(--text-md);
    color: var(--body);
    line-height: 1.5;
}

.financing-billing-cta {
    background: var(--navy-deep);
    color: #fff;
    padding-block: 60px 80px;
}


/* --- Terms of Service --- */

.terms-hero {
    background: var(--navy-deep);
    color: #fff;
    padding-block: 60px 80px;
    position: relative;
    overflow: hidden;
}

.terms-hero__content {
    max-width: 800px;
}

.terms-hero__eyebrow {
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 16px;
    opacity: 0.8;
}

.terms-hero__title {
    color: #fff;
    margin-bottom: 12px;
    font-size: clamp(2.2rem, 1.8rem + 2.8vw, 2.8rem);
}

.terms-hero__sub {
    font-size: 1.125rem;
    line-height: 1.5;
    opacity: 0.9;
    margin-bottom: 24px;
}

.terms-step-number {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--brand);
    display: block;
    margin-bottom: 6px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.terms-section-title {
    font-size: 1.75rem;
    margin-top: 0;
    margin-bottom: 16px;
}

.terms-callout-box {
    background: var(--page);
    padding: 30px;
    border-radius: var(--r-card);
    border: 1px solid var(--border-soft);
    margin-bottom: 20px;
}

.terms-callout-box__title {
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--heading);
    font-weight: 800;
    font-size: 1rem;
}

.terms-callout-box__text {
    font-size: var(--text-md);
    color: var(--body);
    line-height: 1.6;
    margin-bottom: 16px;
}

.terms-callout-box__list {
    padding-left: 1.25rem;
    font-size: var(--text-sm);
    color: var(--body);
    line-height: 1.6;
    margin: 0;
}

.terms-disclaimer-box {
    border: 1px solid var(--border-soft);
    border-left: 4px solid var(--brand);
    padding: 20px;
    border-radius: var(--r-sm);
    background: #FAF9F6;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.terms-disclaimer-box__icon {
    color: var(--brand);
    font-size: 1.2rem;
}

.terms-disclaimer-box__text {
    font-size: var(--text-md);
    color: var(--body);
    line-height: 1.5;
    margin: 0;
}

.terms-contact-box {
    background: var(--page);
    padding: 24px;
    border-radius: var(--r-card);
    border: 1px solid var(--border-soft);
    font-size: 0.9rem;
    line-height: 1.6;
}

.terms-footer-logo {
    text-align: center;
    margin-top: 50px;
    font-weight: 700;
    font-family: var(--font-head);
    color: var(--brand);
}

.terms-footer-logo__sub {
    display: block;
    font-size: 0.65rem;
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 4px;
}


/* --- Privacy Policy --- */

.privacy-hero {
    background: var(--navy-deep);
    color: #fff;
    padding-block: 60px 80px;
    position: relative;
    overflow: hidden;
}

.privacy-hero__content {
    max-width: 800px;
}

.privacy-hero__eyebrow {
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 16px;
    opacity: 0.8;
}

.privacy-hero__title {
    color: #fff;
    margin-bottom: 12px;
    font-size: clamp(2.2rem, 1.8rem + 2.8vw, 2.8rem);
}

.privacy-hero__sub {
    font-size: 1.125rem;
    line-height: 1.5;
    opacity: 0.9;
    margin-bottom: 24px;
}

.privacy-section-title {
    font-size: 1.75rem;
    display: flex;
    gap: 12px;
    align-items: baseline;
    margin-bottom: 20px;
}

.privacy-section-title__num {
    color: var(--brand);
    font-weight: 800;
}

.privacy-callout-box {
    background: #F0FDF4;
    border-left: 4px solid #16A34A;
    padding: 24px;
    border-radius: var(--r-sm);
    margin-bottom: 20px;
}

.privacy-callout-box__label {
    color: #14532D;
    margin-bottom: 8px;
    font-weight: 800;
    text-transform: uppercase;
    font-size: var(--text-sm);
    letter-spacing: 0.05em;
}

.privacy-callout-box__text {
    color: #166534;
    font-size: var(--text-md);
    margin-bottom: 12px;
    line-height: 1.6;
}

.privacy-callout-box__text:last-child {
    margin-bottom: 0;
}

.privacy-rights-box {
    background: var(--page);
    padding: 20px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border-soft);
}

.privacy-rights-box__title {
    display: block;
    margin-bottom: 6px;
    color: var(--heading);
    font-size: var(--text-base);
}

.privacy-rights-box__text {
    font-size: var(--text-sm);
    color: var(--body);
    display: block;
    line-height: 1.45;
}

.privacy-officer-box {
    background: var(--navy-deep);
    color: #fff;
    padding: 30px;
    border-radius: var(--r-card);
}

.privacy-officer-box__title {
    color: #fff;
    font-size: var(--text-xl);
    margin-bottom: 12px;
}

.privacy-officer-box__text {
    font-size: var(--text-md);
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
    margin-bottom: 20px;
}

.privacy-officer-box__details {
    font-size: var(--text-md);
    line-height: 1.6;
}

.privacy-officer-box__dept {
    color: var(--brand-light);
    display: block;
}

.privacy-sidebar {
    position: sticky;
    top: 110px;
}

.privacy-toc-card {
    border-color: var(--border-soft);
    margin-bottom: 24px;
    padding: 24px;
}

.privacy-toc-card__title {
    font-size: var(--text-base);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--heading);
    margin-bottom: 18px;
}

.privacy-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--text-md);
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-weight: 600;
}

.privacy-toc-list a {
    color: var(--body);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    margin: 0 -10px;
    border-radius: 8px;
    border-left: 2px solid transparent;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}

.privacy-toc-list a i {
    font-size: 0.7rem;
    color: var(--brand);
    opacity: 0;
    /* arrow only shows on hover / active */
    transform: translateX(-4px);
    transition: opacity .15s ease, transform .15s ease;
}

.privacy-toc-list a:hover {
    color: var(--heading);
    background: var(--page);
}


/* Section currently in view — highlighted by the scroll-spy in site.js. */

.privacy-toc-list a.is-active {
    color: var(--brand);
    font-weight: 700;
    background: var(--mint);
    border-left-color: var(--brand);
}

.privacy-toc-list a:hover i,
.privacy-toc-list a.is-active i {
    opacity: 1;
    transform: translateX(0);
}

.privacy-questions-card {
    background: var(--navy-deep);
    color: #fff;
    border: none;
    padding: 24px;
}

.privacy-questions-card__title {
    color: #fff;
    font-size: 1.15rem;
    margin-bottom: 8px;
}

.privacy-questions-card__text {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: var(--text-sm);
    line-height: 1.45;
    margin-bottom: 18px;
}


/* ==========================================================================
   Multi-Step Booking Redesign (Figma Matching)
   ========================================================================== */


/* Hero Banner with global bg - Exact Figma Matching */

.booking-hero {
    position: relative;
    background: url('../images/global/global-bg.webp') center right / cover no-repeat;
    padding: 70px 0 80px;
    overflow: hidden;
}

.booking-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #F8FAFC 0%, rgba(248, 250, 252, 0.96) 42%, rgba(248, 250, 252, 0.75) 60%, rgba(248, 250, 252, 0) 100%);
    pointer-events: none;
}

.booking-hero .container {
    position: relative;
    z-index: 2;
}

.booking-hero__content {
    max-width: 650px;
}

.booking-hero__eyebrow {
    display: inline-block;
    font-size: var(--text-base);
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #B45309;
    position: relative;
    padding-bottom: 8px;
    margin-bottom: 18px;
}

.booking-hero__eyebrow::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 55px;
    height: 2px;
    background: #B45309;
}

.booking-hero__title {
    color: #0F2A44;
    margin-bottom: 18px;
    letter-spacing: -0.03em;
}

.booking-hero__title em {
    font-style: italic;
    color: #13606A;
    font-weight: 700;
}

.booking-hero__sub {
    font-size: 1.1rem;
    color: #475569;
    max-width: 580px;
    line-height: 1.6;
    margin-bottom: 36px;
}

.booking-hero__features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    max-width: 650px;
    margin-top: 36px;
}


/* Four-feature banner: 2×2 block with a divider between the two columns. */

.booking-hero__features--2col {
    grid-template-columns: 1fr 1fr;
    column-gap: 28px;
    row-gap: 26px;
    max-width: 560px;
}

.booking-hero__features--2col .hero-feature-card {
    padding: 0 0 0 0;
    border-right: none;
}

.booking-hero__features--2col .hero-feature-card:not(:first-child) {
    padding-left: 0;
}


/* Right border only on the left column (odd-positioned cards). */

.booking-hero__features--2col .hero-feature-card:nth-child(odd) {
    border-right: 1px solid #E2E8F0;
    padding-right: 28px;
}

.hero-feature-card {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0 24px 0 0;
    box-shadow: none;
    border-right: 1px solid #E2E8F0;
    transition: none;
}

.hero-feature-card:hover {
    transform: none;
    box-shadow: none;
    background: transparent;
}

.hero-feature-card:last-child {
    border-right: none;
    padding-right: 0;
}

.hero-feature-card:not(:first-child) {
    padding-left: 24px;
}

.hero-feature-card__icon {
    width: 62px;
    height: 62px;
    background: #F0F4F8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #0F2A44;
    margin-bottom: 10px;
}

.hero-feature-card__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0F2A44;
    margin-bottom: 6px;
}

.hero-feature-card__text {
    font-size: 0.85rem;
    color: #475569;
    line-height: 1.45;
    margin: 0;
}


/* Stepper Progress Bar */


/* Height of this bar, published so the sticky summary card knows how far down
   to sit. 24 + 32 (step circle) + 24 + 1 (border). */

:root {
    --booking-stepper-h: 81px;
}

.booking-stepper-wrap {
    background: #ffffff;
    border-bottom: 1px solid var(--border-soft);
    padding: 24px 0;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: var(--header-h);
    z-index: 90;
}

.booking-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
}

.stepper-step {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
    font-family: var(--font-body);
    transition: opacity 0.2s;
}

.stepper-step__circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #E5E7EB;
    color: #6B7280;
    font-weight: 700;
    font-size: var(--text-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.stepper-step__label {
    font-size: var(--text-md);
    font-weight: 600;
    color: #6B7280;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.stepper-step.active .stepper-step__circle {
    background: var(--brand);
    color: #ffffff;
    box-shadow: 0 0 0 4px rgba(19, 96, 106, 0.2);
}

.stepper-step.active .stepper-step__label {
    color: var(--brand);
    font-weight: 700;
}

.stepper-step.completed .stepper-step__circle {
    background: #10B981;
    color: #ffffff;
}

.stepper-step.completed .stepper-step__label {
    color: #111827;
}

.booking-stepper__line {
    flex: 1;
    height: 2px;
    background: #E5E7EB;
    margin: 0 12px;
    transition: background 0.3s ease;
}

.booking-stepper__line.active {
    background: var(--brand);
}


/* Three steps sit closer together than five did — pull the row in so the
   labels stay centred instead of stretching to the container edges. */

.booking-stepper--3 {
    max-width: 760px;
}


/* Layout Main + Sidebar */

.booking-section {
    padding: 50px 0 80px;
    background: var(--page);
}

.booking-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 36px;
    align-items: start;
}


/* Dynamic Step Containers */

.booking-step-content {
    display: none;
    animation: fadeInStep 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.booking-step-content.active {
    display: block;
}

@keyframes fadeInStep {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.step-heading {
    margin-bottom: 24px;
}

.step-heading h2 {
    font-size: 1.85rem;
    color: var(--navy-deep);
    margin-bottom: 6px;
}

.step-heading p {
    color: var(--muted);
    font-size: 0.95rem;
}


/* Step 1: Horizontal Treatment Cards Grid (Exact Figma Layout) */

.treatment-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.treatment-select-card {
    background: #ffffff;
    border: 2px solid var(--border-soft);
    border-radius: var(--r-card);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    height: 180px;
}

.treatment-select-card:hover {
    border-color: var(--brand-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.treatment-select-card.selected {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(19, 96, 106, 0.15), var(--shadow);
    background: #FAFDFF;
}

.treatment-select-card__img {
    width: 175px;
    min-width: 175px;
    height: 100%;
    object-fit: cover;
    background: var(--page);
}

.treatment-select-card__body {
    padding: 18px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.treatment-select-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.treatment-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    background: var(--mint);
    color: var(--brand-dark);
}

.treatment-radio-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #CBD5E1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.treatment-select-card.selected .treatment-radio-check {
    border-color: var(--brand);
    background: var(--brand);
    color: #ffffff;
}

.treatment-select-card__title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--heading);
    margin-bottom: 2px;
}

.treatment-select-card__price {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--brand);
    margin-bottom: 6px;
}

.treatment-select-card__desc {
    font-size: 0.825rem;
    color: var(--body);
    line-height: 1.4;
    margin: 0;
}


/* Step 2: Location Cards List */

.location-cards-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.location-select-card {
    background: #ffffff;
    border: 2px solid var(--border-soft);
    border-radius: var(--r-card);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
}

.location-select-card:hover {
    border-color: var(--brand-light);
    box-shadow: var(--shadow-sm);
}

.location-select-card.selected {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(19, 96, 106, 0.15);
    background: #FAFDFF;
}

.location-select-card__img {
    width: 90px;
    height: 90px;
    border-radius: var(--r-sm);
    object-fit: cover;
    flex-shrink: 0;
}

.location-select-card__info {
    flex: 1;
}

.location-select-card__title {
    font-size: 1.1rem;
    color: var(--heading);
    margin-bottom: 4px;
}

.location-select-card__address {
    font-size: var(--text-md);
    color: var(--body);
    margin-bottom: 4px;
}

.location-select-card__phone {
    font-size: 0.825rem;
    color: var(--muted);
    margin-bottom: 8px;
}

.location-select-card__tags {
    display: flex;
    align-items: center;
    gap: 12px;
}

.status-tag {
    font-size: var(--text-xs);
    font-weight: 700;
    color: #059669;
    background: #ECFDF5;
    padding: 3px 10px;
    border-radius: var(--r-pill);
}

.distance-tag {
    font-size: var(--text-xs);
    color: var(--muted);
}

.location-radio-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #CBD5E1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}

.location-select-card.selected .location-radio-check {
    border-color: var(--brand);
    background: var(--brand);
    color: #ffffff;
}


/* Map Preview Card */

.location-map-card {
    background: #ffffff;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-card);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.map-placeholder {
    height: 240px;
    background: #E2E8F0 url('https://tile.openstreetmap.org/13/2365/3545.png') center/cover;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 20px;
}

.map-placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(15, 43, 68, 0.15);
}

.map-pin-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
    background: var(--navy-deep);
    color: #ffffff;
    padding: 8px 14px;
    border-radius: var(--r-pill);
    font-size: var(--text-sm);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    z-index: 2;
}

.map-pin-badge i {
    color: #38BDF8;
}

.map-btn-group {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}


/* Step 3: Date & Time Picker */

.datetime-container {
    background: #ffffff;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-card);
    padding: 28px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 24px;
}

.datetime-grid {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 32px;
}

.calendar-box {
    border-right: 1px solid var(--border-soft);
    padding-right: 28px;
}

.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.calendar-header h4 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--navy-deep);
}

.calendar-nav-btn {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--heading);
    transition: all 0.2s;
}

.calendar-nav-btn:hover {
    background: var(--page);
    border-color: var(--brand);
}

.calendar-days-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--muted);
    margin-bottom: 10px;
}

.calendar-dates-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.date-btn {
    aspect-ratio: 1;
    border-radius: 50%;
    border: none;
    background: transparent;
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--heading);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.date-btn:hover:not(.disabled) {
    background: var(--mint);
    color: var(--brand-dark);
}

.date-btn.selected {
    background: var(--brand) !important;
    color: #ffffff !important;
    font-weight: 800;
    box-shadow: 0 4px 10px rgba(19, 96, 106, 0.3);
}

.date-btn.disabled {
    color: #D1D5DB;
    cursor: not-allowed;
}


/* Leading blanks that pad the first week to the correct weekday column. */

.date-btn--blank {
    pointer-events: none;
    visibility: hidden;
}

.calendar-nav-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}


/* Time Slots Box */

.time-slots-box h4 {
    font-size: 1rem;
    color: var(--navy-deep);
    margin-bottom: 4px;
}

.time-slots-box p.slot-date-title {
    font-size: 0.85rem;
    color: var(--brand);
    font-weight: 700;
    margin-bottom: 18px;
}


/* Shown when the chosen date has no open times for the chosen service. */

.slot-empty-note,
.empty-note {
    font-size: 0.85rem;
    color: var(--muted);
    background: var(--surface, #F9FAFB);
    border: 1px dashed #E5E7EB;
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}

.time-slots-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-height: 320px;
    overflow-y: auto;
    padding-right: 6px;
}

.time-slot-pill {
    padding: 10px 14px;
    border-radius: var(--r-btn);
    border: 1.5px solid var(--border-soft);
    background: #ffffff;
    color: var(--heading);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
}

.time-slot-pill:hover:not(.booked) {
    border-color: var(--brand);
    color: var(--brand);
    background: #FAFDFF;
}

.time-slot-pill.selected {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #ffffff !important;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(19, 96, 106, 0.25);
}

.time-slot-pill.booked {
    background: #F3F4F6;
    border-color: #E5E7EB;
    color: #9CA3AF;
    cursor: not-allowed;
    text-decoration: line-through;
}

.slot-info-bar {
    background: #ffffff;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-card);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 16px;
    font-size: 0.85rem;
    color: var(--body);
}

.slot-info-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.slot-info-item i {
    color: var(--brand);
}


/* Step 4: Your Details Form */

.details-form-box {
    background: #ffffff;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-card);
    padding: 32px;
    box-shadow: var(--shadow-sm);
}

.returning-patient-alert {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
    font-size: var(--text-md);
}

.returning-patient-alert a {
    color: var(--brand);
    font-weight: 700;
    text-decoration: underline;
}

.form-group-title {
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--border);
}

.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.switch-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #CBD5E1;
    transition: .3s;
    border-radius: 24px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
}

input:checked+.slider {
    background-color: var(--brand);
}

input:checked+.slider:before {
    transform: translateX(20px);
}

.switch-label {
    font-size: 0.825rem;
    color: var(--body);
}

.checkbox-custom {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--body);
    margin-bottom: 12px;
}

.checkbox-custom input {
    accent-color: var(--brand);
    width: 18px;
    height: 18px;
    margin-top: 2px;
}


/* Provider picker, shown in the booking summary directly above the pay button.
   Only rendered when the clinic has more than one gateway configured, so it is
   absent in the common single-provider setup rather than being a one-option
   list.

   One row of plain name chips: in a narrow sidebar the provider name is the
   only thing that distinguishes the options, so icons and "secure checkout"
   captions were pure height. Wraps to a second row if a name is long. */

.pay-choice {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.pay-choice__label {
    display: block;
    margin-bottom: 7px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

.pay-choice__opt {
    flex: 1 1 0;
    min-width: 0;
    padding: 9px 6px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-btn);
    background: #fff;
    cursor: pointer;
    text-align: center;
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--body);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.pay-choice__opt:hover {
    border-color: var(--brand-light);
}

.pay-choice__opt:has(input:checked) {
    border-color: var(--brand);
    background: var(--mint);
    color: var(--brand);
}

.pay-choice__opt:has(input:focus-visible) {
    outline: 3px solid var(--brand-light);
    outline-offset: 2px;
}


/* The radio itself is redundant next to the highlighted chip, but it stays in
   the accessibility tree for keyboard and screen-reader users. */

.pay-choice__opt input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}


/* Step 5: Secure Payment */

.payment-box {
    background: #ffffff;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-card);
    padding: 32px;
    box-shadow: var(--shadow-sm);
}

.ssl-badge-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: var(--text-sm);
    color: #065F46;
    margin-bottom: 24px;
}

.payment-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border-soft);
    padding-bottom: 12px;
}

.payment-tab-btn {
    padding: 10px 20px;
    border-radius: var(--r-pill);
    border: 1.5px solid var(--border);
    background: #ffffff;
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--heading);
    cursor: pointer;
    transition: all 0.2s;
}

.payment-tab-btn.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #ffffff;
}

.card-brand-icons {
    display: flex;
    gap: 8px;
    position: absolute;
    right: 14px;
    bottom: 3px;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 1.2rem;
}

.promo-code-wrap {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}


/* Payment-step inputs mirror the shared .field input styling so step 5
   matches the rest of the form. */

.payment-box .field input,
.payment-box .field select,
.promo-code-wrap input {
    width: 100%;
    padding: 13px 16px;
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--heading);
    background: #FCFCFA;
    border: 1px solid var(--border);
    border-radius: var(--r-btn);
    transition: border-color .16s ease, box-shadow .16s ease;
}

.payment-box .field input:focus,
.payment-box .field select:focus,
.promo-code-wrap input:focus {
    outline: none;
    border-color: var(--brand-light);
    box-shadow: 0 0 0 3px rgba(29, 138, 145, .12);
}

.promo-code-wrap input {
    flex: 1;
}

.order-breakdown-box {
    background: #F8FAFC;
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 20px;
    margin: 24px 0;
}

.breakdown-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: var(--body);
    margin-bottom: 10px;
}

.breakdown-row.total {
    border-top: 1px solid var(--border);
    padding-top: 12px;
    margin-bottom: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--navy-deep);
}

.trust-badges-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border-soft);
    font-size: var(--text-xs);
    color: var(--muted);
}

.trust-badges-row span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.carecredit-banner {
    background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
    border: 1px solid #86EFAC;
    border-radius: 16px;
    padding: 20px;
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* Booking Summary Sidebar Card */


/* The sidebar column must stretch to the row height, otherwise it is only as
   tall as the card itself and the sticky card has no distance to travel —
   which is why it previously scrolled away with the form. */

.booking-sidebar {
    align-self: stretch;
}

.booking-summary-card {
    background: #ffffff;
    border: 1.5px solid var(--border-soft);
    border-radius: 24px;
    padding: 22px 22px 20px;
    box-shadow: var(--shadow);
    position: sticky;
    /* Clears the site header and the sticky step bar underneath it. */
    top: calc(var(--header-h) + var(--booking-stepper-h) + 16px);
}


/* The card is trimmed to fit a laptop viewport instead of scrolling inside
   itself — a scrollbar within a sticky panel is awkward to use and hides the
   pay button, which is the one control that must always be reachable. */

.booking-summary-card .summary-card__title {
    margin-bottom: 14px;
    padding-bottom: 10px;
}

.booking-summary-card .summary-item-list {
    gap: 10px;
    margin-bottom: 16px;
}

.booking-summary-card .summary-price-total {
    padding-top: 12px;
    margin-bottom: 16px;
}

.summary-card__title {
    font-size: var(--text-xl);
    color: var(--navy-deep);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--mint);
}

.summary-item-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 24px;
}

.summary-item-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-size: var(--text-md);
}

.summary-item-label {
    color: var(--muted);
}

.summary-item-val {
    font-weight: 700;
    color: var(--navy-deep);
    text-align: right;
    display: flex;
    align-items: center;
    gap: 6px;
}

.summary-item-val.selected {
    color: var(--brand);
}

.summary-price-total {
    border-top: 1px dashed var(--border);
    padding-top: 16px;
    margin-bottom: 24px;
}

.summary-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.summary-price-row span {
    font-size: 1rem;
    font-weight: 700;
    color: var(--navy-deep);
}

.summary-price-row strong {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--brand);
}

.btn-sidebar-next {
    width: 100%;
    padding: 14px;
    border-radius: var(--r-pill);
    background: var(--navy-deep);
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 4px 14px rgba(15, 43, 68, 0.25);
}

.btn-sidebar-next:hover {
    background: var(--brand);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(19, 96, 106, 0.35);
}


/* The alternative close: book the slot now, settle in person. Deliberately
   quieter than the primary button — paying online is still the happy path. */

.btn-sidebar-clinic {
    width: 100%;
    margin-top: 10px;
    padding: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1.5px solid var(--brand);
    border-radius: var(--r-pill);
    background: #fff;
    color: var(--brand);
    font-family: var(--font-body);
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.btn-sidebar-clinic:hover {
    background: var(--mint);
    transform: translateY(-1px);
}

.btn-sidebar-clinic:disabled {
    opacity: .6;
    cursor: default;
    transform: none;
}

.btn-sidebar-back {
    width: 100%;
    padding: 10px;
    background: transparent;
    border: none;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 8px;
    transition: color 0.2s;
}

.btn-sidebar-back:hover {
    color: var(--heading);
}

.summary-secure-note {
    font-size: var(--text-xs);
    color: var(--muted);
    text-align: center;
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}


/* Confirmation View (own page: booking-confirmed.php) */

.confirmed-wrap {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}


/* Pale banner behind the tick + headline on the confirmation page. */

.booking-confirmed-hero {
    background: var(--surface, #F3F4F6);
    padding: 64px 0 48px;
}

.booking-confirmed-hero .confirmed-wrap p.sub-text {
    margin-bottom: 18px;
}

.confirmed-circle-icon--muted {
    background: var(--muted, #6B7280);
    box-shadow: 0 10px 30px rgba(107, 114, 128, 0.25);
}

.confirmed-circle-icon {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--brand);
    color: #ffffff;
    font-size: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    box-shadow: 0 10px 30px rgba(19, 96, 106, 0.3);
}

.confirmed-wrap h2 {
    font-size: 2.2rem;
    color: var(--navy-deep);
    margin-bottom: 8px;
}

.confirmed-wrap p.sub-text {
    color: var(--body);
    font-size: 1.05rem;
    margin-bottom: 24px;
}

.conf-num-badge {
    display: inline-block;
    background: var(--mint);
    color: var(--brand-dark);
    font-weight: 800;
    font-size: 0.9rem;
    padding: 8px 20px;
    border-radius: var(--r-pill);
    margin-bottom: 36px;
}

.confirmed-card-details {
    background: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    text-align: left;
    margin-bottom: 48px;
}

.confirmed-card-header {
    background: var(--brand-dark);
    color: #ffffff;
    padding: 20px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.confirmed-card-header h3 {
    color: #ffffff;
    margin: 0;
    font-size: 1.15rem;
}

.confirmed-card-body {
    padding: 32px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 32px;
}

.conf-detail-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    font-size: 0.95rem;
}

.conf-detail-row i {
    color: #10B981;
    margin-top: 4px;
}

.conf-price-box {
    background: #F8FAFC;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.paid-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ECFDF5;
    color: #059669;
    font-size: var(--text-xs);
    font-weight: 800;
    padding: 4px 12px;
    border-radius: var(--r-pill);
    width: fit-content;
}


/* Checkout that has not settled yet. */

.paid-pill--pending {
    background: #FFFBEB;
    color: #B45309;
}


/* Booked deliberately to be settled in person — expected, not overdue. */

.paid-pill--clinic {
    background: #E7F1FA;
    color: #1668A8;
}

.conf-action-btns {
    display: flex;
    gap: 16px;
    margin-top: 24px;
}

.conf-action-btns .btn {
    flex: 1;
}


/* What to Bring Section */

.what-to-bring-section {
    margin-top: 60px;
    text-align: center;
}

.what-to-bring-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 28px;
}

.bring-card {
    background: #ffffff;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-card);
    padding: 24px 18px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.bring-card__icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--mint);
    color: var(--brand);
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}

.bring-card h4 {
    font-size: 0.95rem;
    margin-bottom: 6px;
}

.bring-card p {
    font-size: 0.8rem;
    color: var(--muted);
    margin: 0;
    line-height: 1.4;
}


/* Trust features bar below stepper */

.trust-features-bar {
    background: #ffffff;
    padding: 35px 0 15px 0;
}

.trust-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.trust-feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.trust-feature-item i {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand);
    font-size: var(--text-base);
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid #E2E8F0;
    background: #FAF9F6;
}

.trust-feature-item strong {
    display: block;
    font-size: 0.85rem;
    color: var(--navy-deep);
}

.trust-feature-item span {
    font-size: var(--text-xs);
    color: var(--muted);
}


/* Responsive Media Queries */

@media (max-width: 960px) {
    .booking-hero__grid,
    .booking-layout,
    .datetime-grid,
    .confirmed-card-body {
        grid-template-columns: 1fr;
    }
    .booking-hero__image-wrap {
        display: none;
    }
    .calendar-box {
        border-right: none;
        border-bottom: 1px solid var(--border-soft);
        padding-right: 0;
        padding-bottom: 24px;
    }
    /* On mobile the summary sits BELOW the selection steps (natural order). */
    .booking-sidebar {
        order: 0;
        align-self: auto;
    }
    /* Stacked, so there is nothing to stick to. */
    .booking-summary-card {
        position: static;
    }
    .what-to-bring-grid,
    .trust-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .treatment-cards-grid {
        grid-template-columns: 1fr;
    }
    .treatment-select-card {
        flex-direction: column;
        height: auto;
    }
    .treatment-select-card__img {
        width: 100%;
        min-width: 100%;
        height: 160px;
    }
}

@media (max-width: 960px) {
    .booking-stepper {
        overflow-x: auto;
        padding-bottom: 10px;
        justify-content: flex-start;
        gap: 16px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .booking-stepper::-webkit-scrollbar {
        display: none;
    }
    .booking-stepper__line {
        display: none;
    }
}

@media (max-width: 576px) {
    .booking-hero {
        padding: 40px 0 50px;
    }
    .booking-hero__features {
        grid-template-columns: 1fr;
    }
    .form-row-2 {
        grid-template-columns: 1fr;
    }
    .time-slots-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .what-to-bring-grid,
    .trust-features-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 380px) {
    .time-slots-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 8px;
    }
    .time-slot-pill {
        padding: 9px 8px;
        font-size: 0.8rem;
    }
}


/* ══════════════════════════════════════════════════════════════════
   HOME PAGE
   Spacing and sizes taken from the 1920px Figma frame.
   ══════════════════════════════════════════════════════════════════ */


/* ------------------------------------------------------------ hero -- */

.hero {
    position: relative;
    background-position: center right;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 700px;
    display: flex;
    align-items: center;
    padding-block: 72px 96px;
    overflow: hidden;
}


/* Fades the photo out under the copy so the text keeps its contrast. */

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, .97) 34%, rgb(203 203 203 / 80%) 52%, rgb(255 255 255 / 25%) 66%, rgb(165 153 153 / 0%) 78%);
    pointer-events: none;
}

.hero>.container {
    position: relative;
    z-index: 1;
}

.hero__inner {
    max-width: 620px;
}

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 20px;
    margin-bottom: 28px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(15, 42, 68, .06);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--heading);
}

.hero__badge i {
    color: var(--brand);
}

.hero h1 {
    margin-bottom: 1rem;
}


/* Navy, not teal — with the short rule beneath it from the design. */

.hero__accent {
    font-family: var(--font-head);
    font-style: italic;
    font-weight: 800;
    font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem);
    line-height: 1.15;
    color: var(--heading);
    margin: 0 0 20px;
}

.hero__rule {
    width: 74px;
    height: 3px;
    background: var(--brand);
    border: 0;
    border-radius: 2px;
    margin: 0 0 26px;
}

.hero__text {
    /* max-width: 500px; */
    color: var(--body);
    margin-bottom: 36px;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}


/* -------------------------------------------------- treatment finder -- */


/* Sits across the hero's bottom edge, as in the design. */

.finder-wrap {
    background: var(--white);
    padding-bottom: 20px;
}

.finder {
    display: flex;
    align-items: center;
    margin-top: -78px;
    padding: 26px 34px;
    background: #fff;
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    box-shadow: 0 14px 44px rgba(15, 42, 68, .10);
    position: relative;
    z-index: 2;
}

.finder__intro {
    flex: 0 0 320px;
    padding-right: 30px;
}

.finder__intro .eyebrow {
    display: block;
    margin-bottom: 8px;
    font-size: var(--text-base);
    color: var(--brand);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}

.finder__intro h3 {
    margin: 0;
    font-size: var(--text-2xl);
    line-height: 1.3;
    font-weight: 800;
    color: var(--heading);
}

.finder__options {
    flex: 1;
    display: flex;
    justify-content: space-evenly;
    gap: 10px;
    padding-inline: 15px;
    /* The two hairlines that bracket the icon row in the design. */
    border-left: 1px solid var(--border-soft);
    border-right: 1px solid var(--border-soft);
}

.finder__opt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    text-align: center;
    max-width: 104px;
}


/* Line-art marks, shown bare — no filled circle behind them. */

.finder__opt img {
    width: 60px;
    height: 76.25px;
    max-width: 56px;
    object-fit: contain;
    transition: transform .18s ease;
}

.finder__opt span {
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.3;
    color: var(--heading);
}

.finder__opt:hover img {
    transform: translateY(-2px);
}

.finder__opt:has(input:checked) img {
    transform: translateY(-2px);
}

.finder__opt:has(input:checked) span {
    color: var(--brand);
    font-weight: 700;
}

.finder__location {
    flex: 0 0 350px;
    padding-left: 30px;
}

.finder__location label {
    display: block;
    margin-bottom: 8px;
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--heading);
}

.finder__location select {
    width: 100%;
    margin-bottom: 12px;
    padding: 13px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #FBFBFA;
    font-family: var(--font-body);
    font-size: var(--text-md);
    color: var(--heading);
}


/* ------------------------------------------------------------ trust -- */

.section-trust {
    padding: 100px 0 50px 0
}

.trust__grid {
    display: grid;
    grid-template-columns: 1fr 1.12fr;
    gap: 72px;
    align-items: start;
}

.trust__rule {
    width: 66px;
    height: 2px;
    background: #4A6AA5;
    border: 0;
    border-radius: 2px;
    margin: 0 0 15px;
}

.trust h2 {
    line-height: 1.22;
}

.trust h2 em {
    font-weight: 500 !important
}

.trust__text {
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--body);
    max-width: 650px;
    margin-bottom: 15px;
}

.trust__media {
    position: relative;
    margin-top: 36px;
    border-radius: 20px;
}

.trust__media>img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 20px;
    display: block;
}


/* White quote card overhanging the photo's bottom-left corner. */

.trust__quote {
    position: absolute;
    margin: auto;
    width: 65%;
    left: 0;
    bottom: -35px;
    right: -18px;
    display: flex;
    gap: 12px;
    padding: 18px 22px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 12px 34px rgba(15, 42, 68, .12);
}

.trust__quote i {
    color: #2F6FBF;
    font-size: 1.15rem;
    line-height: 1;
}

.trust__quote p {
    margin: 0;
    font-size: var(--text-md);
    line-height: 1.5;
    color: var(--body);
}


/* Vertical timeline: a hairline runs behind the icon badges. */

.trust__list {
    position: relative;
    padding-left: 30px;
}

.trust__list::before {
    content: "";
    position: absolute;
    left: 0;
    top: 26px;
    bottom: 26px;
    width: 1px;
    background: var(--border);
}

.trust-item {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding-block: 26px;
    position: relative;
}

.trust-item+.trust-item {
    border-top: 1px solid var(--border-soft);
}


/* The dot that pins each row to the timeline. */

.trust-item::before {
    content: "";
    position: absolute;
    left: -34px;
    top: 50px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--brand);
}

.trust-item__icon {
    flex-shrink: 0;
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #FAF3E8;
}

.trust-item__icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.trust-item h3 {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--heading);
}

.trust-item p {
    margin: 0;
    font-size: var(--text-md);
    line-height: 1.6;
    color: var(--body);
}


/* -------------------------------------------------- home responsive -- */

@media (max-width: 1200px) {
    .finder__intro {
        flex-basis: 210px;
        padding-right: 22px;
    }
    .finder__location {
        flex-basis: 220px;
        padding-left: 22px;
    }
    .finder__options {
        padding-inline: 22px;
    }
    .trust__grid {
        gap: 48px;
    }
}

@media (max-width: 960px) {
    /* The bracketing hairlines stop making sense once this wraps. */
    .finder {
        flex-wrap: wrap;
        gap: 26px;
        margin-top: -56px;
    }
    .finder__intro,
    .finder__location {
        flex-basis: 100%;
        padding: 0;
    }
    .finder__options {
        flex-basis: 100%;
        padding: 22px 0;
        border-left: 0;
        border-right: 0;
        border-top: 1px solid var(--border-soft);
        border-bottom: 1px solid var(--border-soft);
    }
    .trust__grid {
        grid-template-columns: 1fr;
        gap: 44px;
    }
    .trust__text {
        max-width: none;
    }
    .trust__quote {
        left: 24px;
        right: 24px;
    }
}

@media (max-width: 768px) {
    .hero {
        min-height: 0;
        padding-block: 44px 60px;
        background-position: 72% center;
    }
    .hero::before {
        background: linear-gradient(180deg, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .94) 55%, rgba(255, 255, 255, .88) 100%);
    }
    .hero__inner {
        max-width: none;
    }
    .hero__actions .btn {
        width: 100%;
    }
    .finder {
        margin-top: -34px;
        padding: 22px 18px;
        border-radius: 14px;
    }
    .finder__options {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 18px 10px;
    }
    .finder__opt {
        max-width: none;
        flex: 0 0 calc(33.333% - 8px);
    }
    .finder__opt img {
        height: 38px;
    }
    .trust__list {
        padding-left: 0;
    }
    .trust__list::before,
    .trust-item::before {
        display: none;
    }
    .trust-item {
        gap: 16px;
        padding-block: 20px;
    }
    .trust-item__icon {
        width: 54px;
        height: 54px;
    }
    .trust-item__icon img {
        width: 26px;
        height: 26px;
    }
    .trust__quote {
        width: 100%;
        margin-top: 14px;
        right: auto;
        left: auto;
    }
}


/* ------------------------------------------------------- stats strip -- */

.section-statbar {
    padding-block: 40px;
}

.statbar {
    display: flex;
    align-items: stretch;
    border-radius: 15px;
    background: linear-gradient(90deg, #FFF 0%, #F9F3ED 100%);
    box-shadow: 0 10px 34px rgba(15, 42, 68, .07);
    overflow: hidden;
}

.statbar__items {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    padding: 22px 8px;
}

.statbar__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-inline: 20px;
    min-width: 0;
    height: 100%;
}

.statbar__item+.statbar__item {
    border-left: 1px solid var(--border-soft);
}


/* Bare line-art marks in brand teal — no filled circle behind them. */

.statbar__icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    font-size: var(--text-2xl);
    color: var(--brand);
}

.statbar__body {
    min-width: 0;
}

.statbar__body strong {
    display: block;
    font-family: var(--font-head);
    font-size: var(--text-lg);
    font-weight: 800;
    line-height: 1.2;
    color: var(--heading);
}

.statbar__body small {
    display: block;
    margin-top: 2px;
    font-size: var(--text-xs);
    line-height: 1.35;
    color: var(--muted);
}


/* Photo bleeds to the strip's rounded right edge. */

.statbar__photo {
    flex: 0 0 250px;
}

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

@media (max-width: 1200px) {
    .statbar__item {
        padding-inline: 14px;
        gap: 10px;
    }
    .statbar__icon {
        width: 34px;
        height: 34px;
        font-size: var(--text-xl);
    }
    .statbar__photo {
        flex-basis: 180px;
    }
}

@media (max-width: 960px) {
    .statbar__items {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 22px;
    }
    /* Reset the dividers that no longer sit on a row boundary. */
    .statbar__item:nth-child(3n+1) {
        border-left: 0;
    }
    .statbar__photo {
        display: none;
    }
}

@media (max-width: 576px) {
    .statbar__items {
        grid-template-columns: repeat(2, 1fr);
        padding: 18px 4px;
    }
    .statbar__item {
        border-left: 0 !important;
        padding-inline: 12px;
    }
}

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


/* Conditions: a circular cream badge above the label, no card chrome. */

.condition-card {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0 10px;
    text-align: center;
    box-shadow: none;
    transition: transform .2s ease;
}

.condition-card:hover {
    transform: translateY(-3px);
    box-shadow: none;
}

.condition-card__icon {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #FAF3E8;
    color: #C98A22;
    font-size: 1.65rem;
}

.condition-card h4 {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--heading);
    margin-bottom: 8px;
}

.condition-card p {
    font-size: var(--text-xs);
    line-height: 1.55;
    color: var(--muted);
    margin: 0;
}

@media (max-width: 960px) {
    .tech-trust-strip {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 24px;
    }
    .tech-trust-item:nth-child(2n+1) {
        border-left: 0;
    }
}

@media (max-width: 576px) {
    .tech-trust-strip {
        grid-template-columns: 1fr;
        padding: 20px 14px;
    }
    .tech-trust-item {
        border-left: 0 !important;
        padding-inline: 10px;
    }
    .condition-card__icon {
        width: 62px;
        height: 62px;
        font-size: 1.35rem;
    }
}


/* ══════════════════════════════════════════════════════════════════
   PAGE-SPECIFIC STYLES  (was assets/css/pages.css, merged in)
   Kept at the end so the cascade order is exactly what it was when
   pages.css loaded after site.css.
   ══════════════════════════════════════════════════════════════════ */


/* ==========================================================================
   LifeStrong PR — page-specific component classes
   Loaded AFTER site.css. Everything here is namespaced per page/section so it
   can never collide with the shared design system in site.css.
   ========================================================================== */


/* ═══════════════════════════════════════════════ shared page pieces ══ */


/* Split hero used on Contact / About / Patient Results: copy left, media right. */

.page-split {
    background: var(--page);
    padding-block: 48px 80px;
    position: relative;
    overflow: hidden;
}

.page-split__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

.page-split__eyebrow {
    display: block;
    margin-bottom: 14px;
    color: var(--brand);
}

.page-split h1 {
    margin-bottom: .3em;
}

.page-split__text {
    max-width: 540px;
    font-size: var(--text-lg);
    line-height: 1.7;
    color: var(--body);
    margin-bottom: 40px;
}

.page-split__media {
    aspect-ratio: 4 / 3;
    border-radius: 20px;
    overflow: hidden;
    background: var(--mint);
    box-shadow: var(--shadow-lg);
}

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


/* Small reassurance card (icon over label over sub-text). */

.mini-card {
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-sm);
    padding: 20px;
    text-align: center;
}

.mini-card__icon {
    display: block;
    margin-bottom: 8px;
    font-size: var(--text-2xl);
    color: var(--brand);
}

.mini-card strong {
    display: block;
    font-size: var(--text-md);
    color: var(--heading);
}

.mini-card small {
    font-size: var(--text-xs);
    color: var(--body);
}


/* A titled info card (office hours, locations…) with an icon in the heading. */

.info-card {
    border-color: var(--border-soft);
}

.info-card__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.15rem;
    margin-bottom: 14px;
}

.info-card__title i {
    color: var(--brand);
}

.info-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: var(--text-md);
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border-soft);
}

.info-row:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.info-row span {
    color: var(--body);
}

.info-row strong {
    color: var(--heading);
}

.info-row strong.is-closed {
    color: #D6455B;
}


/* Dark "urgent care" callout card. */

.card--dark {
    background: var(--navy-deep);
    color: #fff;
    border: none;
    padding: 24px;
}

.card--dark .info-card__title {
    color: #fff;
    margin-bottom: 8px;
}

.card--dark .info-card__title i {
    color: var(--brand-light);
}

.card--dark p {
    color: rgba(255, 255, 255, .7);
    font-size: var(--text-sm);
    line-height: 1.5;
    margin-bottom: 18px;
}


/* ═══════════════════════════════════════════════════════ contact ══ */

.contact-form__title {
    font-size: 1.75rem;
    margin-bottom: 6px;
}

.contact-form__sub {
    color: var(--muted);
    font-size: var(--text-base);
    margin-bottom: 28px;
}

.contact-form .field {
    margin-bottom: 18px;
}

.contact-form textarea {
    min-height: 100px;
}

.contact-consent {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 24px;
    font-size: var(--text-xs);
    color: var(--body);
}

.contact-consent label {
    cursor: pointer;
}

.contact-loc__name {
    display: block;
    font-size: var(--text-md);
    color: var(--heading);
}

.contact-loc small {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
}

.contact-loc+.contact-loc {
    border-top: 1px solid var(--border-soft);
    padding-top: 12px;
}

.contact-loc .link-arrow {
    font-size: var(--text-xs);
}


/* Clinic switcher (also serves the contact + locations map block). */

.clinic-switch {
    max-width: 400px;
    margin: 0 auto 40px;
}

.clinic-switch select {
    width: 100%;
    padding: 14px 20px;
    font-weight: 600;
    border-radius: var(--r-btn);
    border: 1px solid var(--brand);
    color: var(--brand);
    background: var(--white);
}

.clinic-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.clinic-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.clinic-card__head h3 {
    font-size: var(--text-2xl);
    margin: 0;
}

.clinic-card__address {
    font-size: 1.05rem;
    color: var(--body);
    line-height: 1.6;
    margin-bottom: 24px;
}

.clinic-card__actions {
    margin-top: 40px;
}

.clinic-map {
    min-height: 420px;
    box-shadow: var(--shadow-lg);
}

.clinic-map iframe {
    width: 100%;
    height: 100%;
    min-height: 420px;
    border: 0;
    display: block;
}

@media (max-width: 960px) {
    .page-split__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .page-split__text,
    .page-split__media {
        max-width: none;
    }
}


/* Two-column split: main content + narrower sidebar. */

.split-main {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 40px;
    align-items: start;
}

.locations-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: stretch;
}

@media (max-width: 960px) {
    .split-main,
    .locations-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}


/* Icon + heading + text row (directions list, feature cards). */

.icon-row {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.icon-row__icon {
    margin: 0;
    flex-shrink: 0;
}

.icon-row h3,
.icon-row h4 {
    margin: 0 0 4px;
}

.icon-row h3 {
    font-size: var(--text-xl);
}

.icon-row h4 {
    font-size: 1.05rem;
}

.icon-row p {
    margin: 0;
    font-size: var(--text-md);
    line-height: 1.6;
    color: var(--body);
}

.icon-row p.has-link {
    margin-bottom: 12px;
}


/* Padded panel used to group a list on a tinted background. */

.panel {
    background: var(--page);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-card);
    padding: 40px;
}

@media (max-width: 576px) {
    .panel {
        padding: 26px 20px;
    }
}


/* Split section: content one side, framed media the other. */

.media-frame {
    border-radius: var(--r-card);
    overflow: hidden;
    background: var(--mint);
    box-shadow: var(--shadow-lg);
}

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


/* ═══════════════════════════════════════════════ patient results ══ */


/* Checkmark reassurance row under the hero. */

.check-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--heading);
}

.check-row>span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.check-row i {
    color: var(--brand);
}


/* Before/after image pair. */

.ba-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.ba-shot {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--mint);
}

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

.ba-shot__ph {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-size: var(--text-xs);
    color: var(--brand);
}

.ba-tag {
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: .6rem;
    padding: 4px 9px;
}

.ba-tag--after {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}


/* Floating quote card that overhangs the hero image. */

.hero-quote,
.about-float-card {
    position: absolute;
    right: -20px;
    bottom: -30px;
    max-width: 280px;
    padding: 20px;
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-lg);
    text-align: center;
}

.about-float-card {
    bottom: 20px;
}

.hero-quote p,
.about-float-card p {
    font-size: var(--text-sm);
    font-style: italic;
    line-height: 1.5;
    margin-bottom: 10px;
    color: var(--heading);
}

.hero-quote strong,
.about-float-card strong {
    display: block;
    font-size: var(--text-md);
    color: var(--brand);
}

.hero-quote small,
.about-float-card small {
    color: var(--muted);
    font-size: var(--text-xs);
}

@media (max-width: 960px) {
    .hero-quote,
    .about-float-card {
        position: relative;
        right: 0;
        bottom: 0;
        max-width: 100%;
        margin-top: 16px;
    }
}


/* Navy variant of the stats strip (results page). A dedicated modifier so it
   never has to fight the shared .stats rules with inline overrides. */

.stats--navy {
    background: var(--navy-deep);
    color: #fff;
    border: none;
    box-shadow: var(--shadow-lg);
}

.stats--navy .statbar__item {
    border-color: rgba(255, 255, 255, .10);
}

.stats--navy .statbar__item+.statbar__item {
    border-left-color: rgba(255, 255, 255, .10);
}

.stats--navy .statbar__icon {
    color: var(--brand-light);
}

.stats--navy .statbar__body strong {
    color: #fff;
}

.stats--navy .statbar__body small {
    color: rgba(255, 255, 255, .6);
}


/* Outcome metric card. */

.metric-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.metric-card__head h3 {
    margin: 0;
    font-size: 1.15rem;
}

.metric-card p {
    font-size: var(--text-md);
    color: var(--body);
    margin-bottom: 20px;
}

.metric-card__foot {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-sm);
    padding-top: 12px;
    border-top: 1px solid var(--border-soft);
}

.metric-card__foot span {
    color: var(--muted);
}

.metric-card__foot strong {
    color: var(--brand);
}


/* Gallery result card. */

.result-card {
    padding: 18px;
    border-color: var(--border-soft);
}

.result-card__service {
    color: var(--brand-light);
    font-weight: 700;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.result-card__quote {
    font-size: var(--text-md);
    margin-top: 8px;
    color: var(--heading);
    font-weight: 600;
    line-height: 1.45;
}

.result-card__patient {
    display: block;
    color: var(--muted);
    font-size: .7rem;
    margin-top: 6px;
}


/* Featured case-study panel. */

.case-study {
    background: var(--page);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-card);
    padding: 50px;
}

.case-study h3 {
    font-size: 2rem;
    line-height: 1.2;
    margin-bottom: 18px;
}

.case-study__quote {
    font-style: italic;
    font-size: 1rem;
    color: var(--heading);
    line-height: 1.6;
    margin-bottom: 24px;
}

.case-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-soft);
    font-size: var(--text-md);
}

.case-facts span {
    display: block;
    color: var(--muted);
}

.case-facts strong {
    color: var(--heading);
}

.case-facts strong.is-brand {
    color: var(--brand);
}

@media (max-width: 576px) {
    .case-study {
        padding: 30px 22px;
    }
}

@media (max-width: 576px) {
    .case-facts {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}


/* ═══════════════════════════════════════════════════════ treatment ══ */


/* Compact feature badge (icon + label, no sub-text). */

.feat-badge {
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-sm);
    padding: 16px;
    text-align: center;
}

.feat-badge__icon {
    display: block;
    margin-bottom: 6px;
    font-size: var(--text-xl);
    color: var(--brand);
}

.feat-badge strong {
    display: block;
    font-size: var(--text-xs);
    color: var(--heading);
}


/* Three-photo collage (two square + one wide). */

.photo-collage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.photo-collage__shot {
    aspect-ratio: 1;
    border-radius: var(--r-card);
    overflow: hidden;
    background: var(--mint);
}

.photo-collage__shot--wide {
    grid-column: span 2;
    aspect-ratio: 2 / 1;
}

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


/* Specialist card. */

.team-card {
    text-align: center;
}

.team-card img {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 20px;
    border: 3px solid var(--border-soft);
}

.team-card__ph {
    display: grid;
    place-items: center;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: var(--mint);
    color: var(--brand);
    font-size: 2.5rem;
    margin: 0 auto 20px;
}

.team-card h3 {
    font-size: 1.15rem;
    margin-bottom: .25em;
}

.team-card__role {
    color: var(--brand);
    font-size: var(--text-md);
    font-weight: 700;
    margin-bottom: 12px;
    text-transform: uppercase;
}


/* ═══════════════════════════════════════════════════ journey steps ══ */


/* Gold eyebrow flanked by short dashes. */

.eyebrow-dashed {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.eyebrow-dashed::before,
.eyebrow-dashed::after {
    content: '';
    width: 24px;
    height: 2px;
    background: #C98A22;
}

.eyebrow-dashed span {
    font-size: var(--text-sm);
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #C98A22;
}

.journey-box {
    background: #fff;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-card);
    box-shadow: var(--shadow);
    padding: 40px;
}


/* Assurance item: round icon + label + sub. */

.assure-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.assure-item__icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--mint);
    color: var(--brand);
    font-size: .95rem;
}

.assure-item strong {
    display: block;
    font-size: var(--text-md);
    color: var(--heading);
}

.assure-item span {
    font-size: .8rem;
    color: var(--body);
}


/* Image with a button overlaid at its base. */

.journey-media {
    position: relative;
}

.journey-media .media-round {
    aspect-ratio: 4/3;
    background: var(--mint);
    box-shadow: var(--shadow-lg);
}

.journey-media__btn {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
}

@media (max-width: 768px) {
    .journey-box {
        padding: 26px 20px;
    }
}


/* ═══════════════════════════════════════════════ featured banner ══ */


/* Full-bleed banner: photo on the right, copy over a white fade. */

.feat-banner {
    position: relative;
    background: #FAF7F2 center right / cover no-repeat;
    background-size: contain;
    background-repeat: no-repeat;
    padding-block: 60px 50px;
    overflow: hidden;
}


/* .feat-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, .96) 45%, rgba(255, 255, 255, .7) 65%, rgba(255, 255, 255, .1) 100%);
    pointer-events: none;
} */

.feat-banner>.container {
    position: relative;
    z-index: 1;
}

.feat-banner__inner {
    max-width: 580px;
}

.feat-banner h2 {
    font-size: clamp(1.6rem, 1.4rem + 2.2vw, 2.3rem);
    line-height: 1.1;
    margin-bottom: 20px;
}

.feat-banner h2 em {
    color: var(--brand-light);
    font-style: normal;
}

.feat-banner p {
    font-size: 1.05rem;
    color: var(--body);
    line-height: 1.6;
    margin-bottom: 36px;
}


/* Single-line (non-repeating) variant of the dashed eyebrow, left aligned. */

.eyebrow-dashed--start {
    margin-bottom: 16px;
}

.eyebrow-dashed--start::after {
    display: none;
}

@media (max-width: 768px) {
    .feat-banner {
        padding-block: 60px;
        background-position: 70% center;
        background-color: white;
        background-image: unset !important;
    }
    .feat-banner::before {
        background: linear-gradient(180deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .9) 100%);
    }
    .feat-banner__inner {
        max-width: none;
    }
    .feat-banner .btn {
        width: 100%;
    }
}


/* ═══════════════════════════════════════════════════════ financing ══ */


/* Contact rows in the billing CTA band. */

.billing-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
    font-size: var(--text-base);
    margin-top: 30px;
    color: #F7F1F1;
}

.billing-contact strong {
    font-size: 20px;
    color: #FFF;
}

.billing-contact__item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.billing-contact__item i {
    font-size: 1.2rem;
    width: 58px;
    height: 58px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    background: #4EA8A5;
    color: white;
}


/* Light-teal eyebrow variant (financing page). */

.eyebrow--light {
    color: var(--brand-light);
}


/* ═══════════════════════════════════════════════ page banner hero ══ */


/* Full-width banner: background photo on the right, copy over a white fade,
   feature cards along the bottom. Mirrors the book.php hero so every inner
   page shares one banner treatment. */

.page-banner {
    position: relative;
    background: #F8FAFC center right / cover no-repeat;
    padding: 70px 0 76px;
    overflow: hidden;
}

.page-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #F8FAFC 0%, rgba(248, 250, 252, .96) 42%, rgba(248, 250, 252, .75) 60%, rgba(248, 250, 252, 0) 100%);
    pointer-events: none;
}

.page-banner>.container {
    position: relative;
    z-index: 2;
}

.page-banner__content {
    max-width: 700px;
}

.page-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 8px;
}

.page-banner__actions+.booking-hero__features {
    margin-top: 40px;
}


/* On phones the fade goes vertical so the copy stays readable over the photo. */

@media (max-width: 768px) {
    .page-banner {
        padding: 52px 0 56px;
        background-position: 72% center;
        background-image: none !important;
    }
    .page-banner::before {
        background: linear-gradient(180deg, rgba(248, 250, 252, .97) 0%, rgba(248, 250, 252, .92) 60%, rgba(248, 250, 252, .86) 100%);
    }
    .page-banner__content {
        max-width: none;
    }
    .booking-hero__features {
        grid-template-columns: 1fr 1fr;
        gap: 12px 0;
        max-width: none;
    }
}

@media (max-width: 576px) {
    .billing-contact {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        text-align: center;
    }
    .billing-contact__item {
        flex-direction: column;
        text-align: center;
        width: 100%;
    }
    .billing-contact__item i {
        width: 48px;
        height: 48px;
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .booking-hero__features,
    .booking-hero__features--2col {
        grid-template-columns: 1fr;
    }
    .hero-feature-card,
    .booking-hero__features--2col .hero-feature-card:nth-child(odd) {
        border-right: 0 !important;
        border-bottom: 1px solid #E2E8F0;
        padding: 0 0 18px !important;
    }
    .hero-feature-card:last-child {
        border-bottom: 0;
    }
    .hero-feature-card:not(:first-child) {
        padding-top: 18px !important;
    }
    .page-banner__actions .btn {
        width: 100%;
    }
}


/* ═══════════════════════════════════════════════════ legal pages ══ */

.legal-sec {
    margin-bottom: 50px;
    scroll-margin-top: 110px;
}

.legal-body {
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--body);
}

.legal-list {
    padding-left: 1.5rem;
    margin-bottom: 20px;
    list-style-type: disc;
}

.legal-list li {
    margin-bottom: .5rem;
}

.legal-badge {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: 700;
    padding: 6px 12px;
}

.legal-link {
    color: var(--brand);
    text-decoration: underline;
}

.legal-link--onDark {
    color: #fff;
    text-decoration: underline;
}


/* spacing + layout utilities (kill one-off inline) */

.items-center {
    align-items: center;
}

.mb-2 {
    margin-bottom: 12px;
}

.mb-3 {
    margin-bottom: 20px;
}

.mb-4 {
    margin-bottom: 24px;
}

.mb-5 {
    margin-bottom: 28px;
}

.mb-6 {
    margin-bottom: 32px;
}

.mb-8 {
    margin-bottom: 40px;
}

.mt-3 {
    margin-top: 20px;
}

.gap-3 {
    gap: 16px;
}

.gap-4 {
    gap: 24px;
}

.ico-end {
    margin-left: 6px;
    font-size: .8rem;
}

.ico-end--sm {
    margin-left: 6px;
    font-size: var(--text-xs);
}

.ico-start {
    margin-right: 6px;
}

.block {
    display: block;
}


/* page-specific multi-prop */

.fin-cta-lead {
    font-size: var(--text-base);
    opacity: .8;
    max-width: 600px;
    margin: 0 auto 32px;
    line-height: 1.6;
}

.fin-sep {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding-top: 20px;
}

.acc-panel {
    box-shadow: var(--shadow-lg);
    border-color: var(--border-soft);
    padding: 40px;
}

.priv-grid {
    grid-template-columns: 2.8fr 1.2fr;
    gap: 60px;
    align-items: start;
}

@media (max-width: 960px) {
    .priv-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .privacy-sidebar {
        order: 2;
    }
}

.priv-sub {
    margin-top: 20px;
    margin-bottom: 6px;
    font-weight: 700;
}

.scroll-anchor {
    scroll-margin-top: 110px;
}

.justify-center {
    justify-content: center;
}

.lh-tight {
    line-height: 1.15;
}

.mb-14 {
    margin-bottom: 14px;
}

.mb-18 {
    margin-bottom: 18px;
}

.min-h-100 {
    min-height: 100px;
}


/* ═══════════════════════════════════════════════ Location Page Custom Sections (Figma Match) ══ */

.font-serif {}


/* Section 1: Plan Your Visit & New Patient Card */

.loc-hero-card {
    background: #FFFFFF;
    border: 1px solid #EAEAEA;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    display: flex;
    align-items: stretch;
    overflow: hidden;
    padding: 15px;
    margin-bottom: 50px;
}

.loc-hero-card__content {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 10px 25px;
    gap: 48px;
}

.loc-hero-card__item {
    flex: 1;
    display: flex;
    gap: 22px;
}

.loc-hero-card__icon {
    width: 120px;
    height: 120px;
    min-width: 120px;
    border-radius: 50%;
    background: #EDF6F6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #13606A;
}

.loc-hero-card__text h3 {
    font-weight: 700;
    color: #162B40;
    margin: 0 0 8px 0;
    line-height: 1.25;
}

.loc-hero-card__text p {
    font-size: 0.975rem;
    color: #556370;
    margin: 0 0 16px 0;
    line-height: 1.5;
}

.loc-hero-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 1rem;
    color: #13606A;
    text-decoration: none;
    transition: all 0.2s ease;
}

.loc-hero-card__link:hover {
    color: #0E4C55;
    gap: 12px;
}

.loc-hero-card__divider {
    width: 1px;
    background: #EAEAEA;
    align-self: stretch;
    margin: 10px 0;
}

.loc-hero-card__image {
    width: 25%;
    min-width: 340px;
    position: relative;
    overflow: hidden;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.loc-hero-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* Section 2: Directions Grid & CTA Banner */

.loc-directions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 32px;
    align-items: stretch;
}

.loc-directions-left {
    background: #F7FAF9;
    border: 1px solid #EBF1F0;
    border-radius: 20px;
    padding: 56px 48px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.loc-directions-bg-svg {
    position: absolute;
    right: -10px;
    bottom: -10px;
    width: 380px;
    height: 320px;
    pointer-events: none;
    opacity: 0.85;
    z-index: 1;
}

.loc-directions-left__content {
    position: relative;
    z-index: 2;
    max-width: 480px;
}

.loc-directions-eyebrow {
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #C98A22;
    margin-bottom: 24px;
    position: relative;
    display: inline-block;
}

.loc-directions-eyebrow::after {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background: #C98A22;
    margin-top: 8px;
}

.loc-directions-left h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #162B40;
    line-height: 1.22;
    margin-bottom: 24px;
}

.loc-directions-left p {
    font-size: 1.05rem;
    color: #4F5E6B;
    line-height: 1.65;
    margin: 0;
}

.loc-directions-right {
    background: #FFFFFF;
    border: 1px solid #EAEAEA;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    padding: 24px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.loc-directions-row {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 26px 0;
    border-bottom: 1px solid #F0F0F3;
}

.loc-directions-row:last-child {
    border-bottom: none;
}

.loc-directions-row__icon {
    width: 46px;
    height: 46px;
    min-width: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #13606A;
    margin-top: 2px;
}

.loc-directions-row__icon svg {
    width: 34px;
    height: 34px;
    stroke: #13606A;
}

.loc-directions-row__text h4 {
    font-size: 1.35rem;
    font-weight: 700;
    color: #162B40;
    margin: 0 0 6px 0;
}

.loc-directions-row__text p {
    font-size: 0.975rem;
    color: #52606D;
    margin: 0;
    line-height: 1.55;
}


/* CTA Banner at bottom */

.loc-cta-banner {
    background: linear-gradient(135deg, #095963 0%, #0E6D7A 100%);
    border-radius: 16px;
    padding: 36px 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(9, 89, 99, 0.25);
}

.loc-cta-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 80% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 60%);
    pointer-events: none;
}

.loc-cta-banner__left {
    display: flex;
    align-items: center;
    gap: 26px;
    position: relative;
    z-index: 2;
}

.loc-cta-banner__badge {
    width: 68px;
    height: 68px;
    min-width: 68px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.06);
}

.loc-cta-banner__badge svg {
    width: 34px;
    height: 34px;
    stroke: #FFFFFF;
}

.loc-cta-banner__text h3 {
    font-size: 1.7rem;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 6px 0;
    line-height: 1.25;
}

.loc-cta-banner__text p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    line-height: 1.45;
}

.loc-cta-banner__btn {
    background: #FFFFFF;
    color: #095963;
    font-weight: 700;
    font-size: 1rem;
    padding: 16px 32px;
    border-radius: 10px;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 2;
}

.loc-cta-banner__btn:hover {
    background: #F0F8F8;
    color: #064047;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

@media (max-width: 1200px) {
    .loc-hero-card {
        flex-direction: column;
    }
    .loc-hero-card__content {
        flex-direction: column;
        gap: 30px;
        padding: 30px 24px;
        align-items: flex-start;
    }
    .loc-hero-card__divider {
        width: 100%;
        height: 1px;
        margin: 0;
    }
    .loc-hero-card__image {
        width: 100%;
        min-width: 0;
        height: auto;
        border-radius: 0 0 20px 20px;
    }
    .loc-directions-grid {
        grid-template-columns: 1fr;
    }
    .loc-directions-left {
        padding: 40px 28px;
    }
    .loc-directions-right {
        padding: 16px 28px;
    }
    .loc-cta-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: 28px 24px;
    }
    .loc-cta-banner__left {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .loc-cta-banner__btn {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 576px) {
    .loc-hero-card__icon {
        width: 70px;
        height: 70px;
        min-width: 70px;
        border-radius: 50%;
        background: #EDF6F6;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #13606A;
    }
    .loc-hero-card__item {
        flex-direction: column;
    }
    .loc-hero-card__content {
        padding: 20px 18px;
    }
}


/* ==========================================================================
   REDESIGNED HOME SECTIONS (Figma Alignment)
   ========================================================================== */


/* --- Common Eyebrow Line & Diamond --- */

.eyebrow-line-wrap {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    justify-content: center;
}

.eyebrow-line-wrap--left {
    justify-content: flex-start;
}

.eyebrow-line {
    display: inline-block;
    width: 48px;
    height: 1px;
    background: #D8C3A5;
}

.eyebrow-text {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: #C59B27;
    text-transform: uppercase;
}

.eyebrow-diamond-sub {
    margin-top: 2px;
    text-align: center;
    color: #C59B27;
    font-size: 0.7rem;
}

.eyebrow-diamond-sub--left {
    text-align: left;
    padding-left: 64px;
}


/* ════════════════════════════════════════════════════════════════════
   1A. CONDITIONS WE ADDRESS (6 Horizontal Columns with Dividers)
   ════════════════════════════════════════════════════════════════════ */

.conditions-section {
    background: #fcf8f6;
    padding-block: 60px 50px;
    position: relative;
}

.conditions-header {
    margin-bottom: 44px;
}

.conditions-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    position: relative;
}

.condition-col {
    padding: 0 16px;
    text-align: center;
    position: relative;
}

.condition-col:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 10%;
    height: 80%;
    width: 1px;
    background: #E8DEC8;
}

.condition-icon-circle {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: #F4ECE1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px auto;
    transition: transform 0.25s ease, background 0.25s ease;
}

.condition-icon-circle img {
    object-fit: contain;
    display: block;
}

.condition-col:hover .condition-icon-circle {
    transform: translateY(-4px);
    background: #EDE2D3;
}

.condition-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0F2B44;
    margin-bottom: 8px;
}

.condition-dash {
    width: 28px;
    height: 2px;
    background: #007C89;
    margin: 0 auto 12px auto;
    border-radius: 2px;
}

.condition-desc {
    font-size: 0.83rem;
    line-height: 1.48;
    color: #5A6978;
    max-width: 200px;
    margin: 0 auto;
}

@media (min-width: 768px) and (max-width: 1200px) {
    .conditions-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
        position: relative;
    }
}

@media (max-width: 767px) {
    .conditions-row {
        grid-template-columns: repeat(2, 1fr);
        position: relative;
        gap: 25px;
    }
    .condition-col:not(:last-child)::after {
        display: none;
    }
}


/* ════════════════════════════════════════════════════════════════════
   1B. YOUR JOURNEY TO LASTING RELIEF
   ════════════════════════════════════════════════════════════════════ */

.journey-section {
    background: #f9f3ec;
    padding-block: 20px 50px;
}

.journey-card-wrap {
    border-radius: 28px;
    padding: 44px 0;
}

.journey-card-grid {
    display: grid;
    grid-template-columns: 1fr 1px 1.15fr;
    gap: 36px;
    align-items: center;
}

.journey-vertical-divider {
    background: #E8DEC8;
    height: 85%;
    width: 1px;
    align-self: center;
}

@media (max-width: 1024px) {
    .journey-card-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .journey-vertical-divider {
        display: none;
    }
}


/* Left side */

.journey-head {
    margin-bottom: 32px;
}

.journey-eyebrow {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: #C59B27;
    text-transform: uppercase;
    display: block;
    margin-bottom: 8px;
}

.journey-title {
    color: #0F2B44;
    line-height: 1.2;
    margin-bottom: 8px;
}

.journey-gold-line {
    color: #C59B27;
    font-size: 0.75rem;
}

.journey-process-bar {
    position: relative;
    margin-top: 36px;
}

.process-line-back {
    position: absolute;
    top: 25px;
    left: 40px;
    right: 40px;
    height: 2px;
    background: #D8C3A5;
    z-index: 1;
}

.process-steps-row {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

.process-step-item {
    text-align: center;
    flex: 1;
    padding: 0 4px;
}

.process-step-node {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #FBF8F3;
    border: 2px solid #007C89;
    color: #007C89;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin: 0 auto 12px auto;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.process-step-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: #0F2B44;
    margin-bottom: 4px;
}

.process-step-desc {
    font-size: 0.75rem;
    line-height: 1.35;
    color: #64748B;
}

@media (max-width: 1024px) {
    /* Five journey steps wrap instead of squeezing. */
    .process-steps-row {
        flex-wrap: wrap;
        justify-content: center;
        gap: 22px 16px;
    }
    .process-step-item {
        flex: 0 0 auto;
        min-width: 120px;
    }
    .process-line-back {
        display: none;
    }
}

@media (max-width: 640px) {
    /* Keep journey steps two per row on phones. */
    .process-steps-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 14px;
    }
    .process-step-item {
        min-width: 0;
    }
    .process-step-item:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
        width: min(100%, calc((100% - 14px) / 2));
    }
}


/* Right side */

.journey-right-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: center;
}

.journey-assurances-list {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.journey-assure-card {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding-bottom: 10px;
    border-bottom: 1px solid #E8DEC8;
}

.journey-assure-card:last-child {
    border-bottom: none;
}

.assure-icon-wrap {
    color: #007C89;
    font-size: 35px;
    margin-top: 2px;
}

.assure-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #0F2B44;
    margin-bottom: 2px;
}

.assure-desc {
    font-size: 0.78rem;
    color: #64748B;
    line-height: 1.4;
}

.journey-media-block {
    position: relative;
    padding-bottom: 24px;
}

.journey-img-frame {
    border-radius: 24px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    box-shadow: 0 10px 30px rgba(15, 42, 68, 0.12);
}

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

.journey-floating-btn {
    position: absolute;
    bottom: 0;
    left: 12px;
    background: #0F2B44;
    color: #FFFFFF !important;
    padding: 13px 26px;
    border-radius: 30px;
    font-size: 0.88rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 24px rgba(15, 42, 68, 0.28);
    text-decoration: none;
    transition: transform 0.2s ease, background 0.2s ease;
}

.journey-floating-btn:hover {
    transform: translateY(-2px);
    background: #13606A;
}

@media (max-width: 767px) {
    .journey-right-col {
        grid-template-columns: 1fr;
    }
    .journey-card-wrap {
        padding: 30px 0 0 0;
    }
}


/* ════════════════════════════════════════════════════════════════════
   2. OUR SERVICES (Figma Image 2 Layout)
   ════════════════════════════════════════════════════════════════════ */

.section--services-bg {
    background: #FAF6F0;
    padding-block: 50px;
}

.services-wrapper {
    width: 100%;
}

.services-banner-head {
    align-items: center;
    margin-bottom: 56px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 100px 0;
}

.services-main-heading {
    max-width: 600px;
    color: #0F2B44;
    line-height: 1.15;
    margin-block: 14px 12px;
}

.heading-teal-italic {
    color: #007C89;
    font-style: italic;
}

.services-gold-dash {
    width: 48px;
    height: 2px;
    background: #C59B27;
    margin-bottom: 16px;
}

.services-main-sub {
    font-size: 1.02rem;
    color: #5A6978;
    line-height: 1.6;
    max-width: 600px;
}

.services-hero-img-wrap {
    position: relative;
    border-radius: 200px 200px 0 0;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    box-shadow: 0 10px 30px rgba(15, 42, 68, 0.08);
}

.services-hero-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* 6 Service Cards (2 Rows x 3 Cols) */

.services-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px 0;
}

.svc-horizontal-card {
    display: flex;
    background: transparent;
    border: none;
    border-right: 1px solid #EAE2D5;
    padding: 12px 28px 12px 12px;
    gap: 18px;
    align-items: flex-start;
    position: relative;
}

.svc-horizontal-card:nth-child(3n) {
    border-right: none;
    padding-right: 12px;
}

.svc-icon-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: block;
}

.svc-card-media {
    width: 135px;
    height: 100%;
    flex-shrink: 0;
    border-radius: 16px;
    overflow: hidden;
}

.svc-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.svc-collage-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
    width: 100%;
    height: 100%;
}

.svc-card-body {
    flex: 1;
    min-width: 0;
}

.svc-card-icon {
    margin-bottom: 6px;
}

.svc-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0F2B44;
    margin-bottom: 6px;
}

.svc-card-desc {
    font-size: 0.82rem;
    line-height: 1.45;
    color: #5A6978;
    margin-bottom: 12px;
}

.svc-card-link {
    font-size: 0.85rem;
    font-weight: 700;
    color: #0F2B44;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease;
}

.svc-card-link:hover {
    color: #007C89;
}

@media (max-width: 1200px) {
    .services-banner-head {
        padding: 20px 0;
        background: #FAF6F0;
        background-image: none !important;
    }
}

@media (max-width: 1024px) {
    /* Treatment cards: 3 across is too tight below ~1024px. */
    .services-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

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


/* ════════════════════════════════════════════════════════════════════
   3. NOT SURE WHERE TO START? CTA PILL CARD (Figma Image 3)
   ════════════════════════════════════════════════════════════════════ */

.cta-pill-container {
    background: #FBF8F4;
    border: 1px solid #EFE5D8;
    border-radius: 36px;
    padding: 24px 36px;
    box-shadow: 0 8px 32px rgba(15, 42, 68, 0.04);
}

.cta-pill-inner {
    display: grid;
    grid-template-columns: 1.25fr 1px 1.5fr 1px 1.1fr;
    gap: 28px;
    align-items: center;
}

.cta-segment-divider {
    background: #E5DAC7;
    height: 64px;
    width: 1px;
}

.cta-segment--title {
    display: flex;
    gap: 16px;
    align-items: center;
}

.cta-title-icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #FAF2E6;
    color: #C59B27;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    flex-shrink: 0;
}

.cta-main-heading {
    font-size: 1.35rem;
    color: #0F2B44;
    font-weight: 700;
    margin-bottom: 4px;
}

.cta-gold-dash {
    width: 24px;
    height: 2px;
    background: #C59B27;
    margin-bottom: 6px;
}

.cta-main-desc {
    font-size: 0.8rem;
    line-height: 1.4;
    color: #5A6978;
}


/* ════════════════════════════════════════════════════════════════════
   SINGLE TREATMENT DETAIL PAGE SECTIONS (treatment.php)
   ════════════════════════════════════════════════════════════════════ */

.detail-split-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 52px;
    align-items: center;
}

.eyebrow-gold {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: #C59B27;
    text-transform: uppercase;
    display: block;
    margin-bottom: 8px;
}

.detail-main-title {
    font-size: clamp(1.6rem, 1.4rem + 2.2vw, 2.3rem);
    color: #0F2B44;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 16px;
}

.detail-main-desc {
    font-size: 1.02rem;
    line-height: 1.6;
    color: #5A6978;
    margin-bottom: 24px;
}

.detail-check-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.detail-check-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #0F2B44;
}

.detail-check-list li i {
    color: #007C89;
    font-size: 1.15rem;
}


/* Right Photo Collage (1 Tall Left + 3 Stacked Right) */

.detail-photo-collage {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 16px;
    align-items: stretch;
}

.collage-tall-left {
    border-radius: 24px;
    overflow: hidden;
    height: 100%;
    box-shadow: 0 8px 24px rgba(15, 42, 68, 0.08);
}

.collage-tall-left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.collage-stacked-right {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
}

.collage-stacked-right img {
    width: 100%;
    flex: 1;
    min-height: 95px;
    border-radius: 18px;
    object-fit: cover;
    display: block;
    box-shadow: 0 6px 18px rgba(15, 42, 68, 0.06);
}


/* --- How It Works 5-Step Section --- */

.how-it-works-section {
    padding-block: 70px;
}

.section-title-lg {
    font-size: clamp(1.6rem, 1.4rem + 2.2vw, 2.3rem);
    color: #0F2B44;
    font-weight: 700;
    max-width: 900px;
    margin: auto
}

.section-sub-text {
    font-size: 1rem;
    color: #5A6978;
    margin-top: 8px;
}

.how-works-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    margin-top: 20px;
}

.how-step-card {
    background: #FFFFFF;
    border: 1px solid #EFE5D8;
    border-radius: 20px;
    padding: 28px 16px 22px 16px;
    text-align: center;
    position: relative;
    box-shadow: 0 4px 16px rgba(15, 42, 68, 0.03);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.how-step-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(15, 42, 68, 0.08);
}

.how-step-badge {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #007C89;
    color: #FFFFFF;
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 124, 137, 0.3);
}

.how-step-icon {
    width: 120px;
    height: 120px;
    margin: 8px auto 12px auto;
    color: #007C89;
    font-size: 1.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.how-step-icon img {
    object-fit: contain;
    display: block;
}

.how-step-title {
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #0F2B44;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.how-step-desc {
    font-size: 0.82rem;
    line-height: 1.45;
    color: #5A6978;
}


/* --- Service page video block --- */

.svc-video {
    padding-block: 70px;
    background: #FAF8F5;
}

.svc-video__head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 34px;
}

.svc-video__title {
    font-size: clamp(1.6rem, 1.4rem + 2.2vw, 2.3rem);
    color: #0F2B44;
    line-height: 1.15;
    margin-block: 10px 12px;
}

.svc-video__desc {
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--body);
    margin: 0;
}


/* 16:9 box so a YouTube embed and an uploaded MP4 sit at the same size and
   the section never jumps as the video loads. */

.svc-video__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 20px;
    overflow: hidden;
    background: #0F2B44;
    box-shadow: 0 18px 48px rgba(15, 42, 68, .16);
}

.svc-video__frame iframe,
.svc-video__frame video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    object-fit: cover;
}

@media (max-width: 768px) {
    .svc-video {
        padding-block: 48px;
    }
    .svc-video__frame {
        border-radius: 14px;
    }
}


/* --- Conditions We Treat --- */

.conditions-treat-section {
    padding-block: 70px;
}

.heading-gold-italic {
    color: #C59B27;
    font-style: italic;
}

.conditions-treat-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
}

.treat-card {
    background: #F8F5EF;
    border: 1px solid #EFE5D8;
    border-radius: 18px;
    padding: 22px 14px;
    text-align: center;
    transition: transform 0.25s ease, background 0.25s ease;
}

.treat-card:hover {
    transform: translateY(-3px);
    background: #F3ECE1;
}

.treat-card img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    margin: 0 auto 12px auto;
    display: block;
}

.treat-card h4 {
    font-size: 0.9rem;
    font-weight: 700;
    color: #0F2B44;
    margin: 0;
}


/* Optional one-line note under a condition. Blank on most services, so the
   card keeps its original height unless the clinic fills it in. */

.treat-card p {
    font-size: 0.76rem;
    line-height: 1.55;
    color: #5A6B7A;
    margin: 8px 0 0;
}

@media (max-width: 1200px) {
    .detail-split-grid {
        grid-template-columns: 1fr;
    }
    .how-works-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px 18px;
    }
    .conditions-treat-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .detail-photo-collage {
        grid-template-columns: 1fr;
    }
    .how-works-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .conditions-treat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.cta-segment--features {
    display: flex;
    justify-content: space-around;
    gap: 16px;
}

.cta-feature-item {
    text-align: center;
}

.cta-feat-icon-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid #EADECC;
    color: #C59B27;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin: 0 auto 8px auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.cta-feat-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #0F2B44;
    line-height: 1.25;
    display: block;
}

.cta-segment--action {
    text-align: center;
}

.btn-cta-navy {
    background: #0F2B44;
    color: #FFFFFF !important;
    padding: 14px 28px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(15, 42, 68, 0.22);
    transition: background 0.2s ease, transform 0.2s ease;
}

.btn-cta-navy:hover {
    background: #13606A;
    transform: translateY(-2px);
}

.cta-footnote {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.75rem;
    color: #7A8794;
    margin-top: 10px;
}

.cta-footnote i {
    color: #C59B27;
}

@media (max-width: 1024px) {
    /* Stack the three CTA pill segments. */
    .cta-pill-inner {
        grid-template-columns: 1fr;
        gap: 24px;
        text-align: center;
    }
    .cta-segment-divider {
        display: none;
    }
    .cta-segment--title {
        justify-content: center;
    }
    .cta-feature-item {
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .cta-pill-container {
        padding-left: 18px;
        padding-right: 18px;
    }
}


/* ═══════════════════════════════════════════════════════════════════/* ════════════════════════════════════════════════════════════════════
   TARGETED THERAPIES SECTION (Figma Image 2 Exact Match)
   ════════════════════════════════════════════════════════════════════ */

.targeted-therapy-section {
    padding-block: 70px 80px;
    background: #FAF8F5;
}

.targeted-head-wrap {
    margin-bottom: 48px;
}

.dashed-eyebrow-line {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: #007C89;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.dashed-eyebrow-line::before,
.dashed-eyebrow-line::after {
    content: '';
    width: 36px;
    height: 1px;
    background: #007C89;
    opacity: 0.4;
}

.max-w-650 {
    max-width: 650px;
    margin-inline: auto;
}


/* 3 Column Grid for Large Desktop (>= 1280px) */

.targeted-therapy-grid {
    display: grid;
    grid-template-columns: 1fr 440px 1fr;
    gap: 28px;
    align-items: center;
    position: relative;
}

.targeted-col {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.targeted-center-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.targeted-connectors-svg {
    position: absolute;
    top: -28px;
    left: 1px;
    width: 480px;
    height: 440px;
    pointer-events: none;
    z-index: 3;
}


/* Card Styling */

.targeted-card {
    background: #FFFFFF;
    border: 1px solid #EEF2F2;
    border-radius: 22px;
    padding: 24px 28px;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    position: relative;
    box-shadow: 0 6px 22px rgba(15, 42, 68, 0.03);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    z-index: 2;
    height: 100%
}

.targeted-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(15, 42, 68, 0.08);
}

.targeted-card__icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid #EAEFEF;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
    color: #007C89;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.targeted-card__body h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0F2B44;
    margin-bottom: 5px;
}

.targeted-card__body p {
    font-size: 0.85rem;
    line-height: 1.45;
    color: #64748B;
    margin: 0;
}


/* Center Circle Image Frame (380px so outer 450px ring sits in white space outside photo) */

.targeted-circle-frame {
    width: 380px;
    height: 380px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    z-index: 2;
    border: 6px solid #FFFFFF;
    box-shadow: 0 14px 38px rgba(15, 42, 68, 0.12);
}

.targeted-circle-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* Focus Badge at bottom of circle */

.targeted-focus-badge {
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background: #007C89;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0, 124, 137, 0.35);
    border: 4px solid #FFFFFF;
}

.targeted-focus-badge i {
    font-size: 1.3rem;
    margin-bottom: 3px;
}

.targeted-focus-badge span {
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    line-height: 1.15;
}


/* Bottom Reassurance Pill Bar */

.targeted-bottom-bar {
    margin-top: 56px;
    background: #FFFFFF;
    border: 1px solid #EEF2F2;
    border-radius: 24px;
    padding: 24px 32px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    box-shadow: 0 6px 24px rgba(15, 42, 68, 0.03);
}

.targeted-pill-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-right: 12px;
    border-right: 1px solid #EAF0F0;
}

.targeted-pill-item:last-child {
    border-right: none;
    padding-right: 0;
}

.targeted-pill-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #E6F3F4;
    color: #007C89;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.targeted-pill-body strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: #007C89;
    margin-bottom: 3px;
}

.targeted-pill-body small {
    display: block;
    font-size: 0.8rem;
    color: #64748B;
    line-height: 1.4;
}


/* ── Responsive: tablet/laptop (<1280px) and mobile ── */

@media (max-width: 1200px) {
    /* Circle on top; all six cards flow into ONE even 2-column grid (no stray gap). */
    .targeted-therapy-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        align-items: start;
    }
    .targeted-connectors-svg {
        display: none;
    }
    .targeted-col--left,
    .targeted-col--right {
        display: contents;
    }
    .targeted-center-wrap {
        grid-column: 1 / -1;
        order: -1;
        margin-bottom: 10px;
    }
    .targeted-circle-frame {
        width: 300px;
        height: 300px;
    }
    .targeted-bottom-bar {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 28px;
    }
    .targeted-pill-item:nth-child(2n) {
        border-right: none;
    }
}

@media (max-width: 576px) {
    .targeted-therapy-grid {
        grid-template-columns: 1fr;
    }
    .targeted-circle-frame {
        width: 260px;
        height: 260px;
    }
    .targeted-bottom-bar {
        grid-template-columns: 1fr;
        padding: 20px;
    }
    .targeted-pill-item {
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid #EAF0F0;
        padding-bottom: 16px;
    }
    .targeted-pill-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
}


/* ═══════════════════════════════════════ testimonials marquee ══ */


/* Continuous auto-scrolling row of patient quotes:
   4 across on wide desktop, 3 from 1200px, 2 from 900px, 1 from 767px. The
   track holds two identical sets and the keyframe shifts it -50%, so the loop
   is seamless. Gaps use margin (not flex gap) so -50% lands exactly on one
   set. Widths use var(--gutter) so they track the global gutter shrink. */

.tm-marquee {
    --tm-gap: 24px;
    /* container inner width = min(100vw, 1640+2×gutter) - 2×gutter, split into 4. */
    --tm-slide: calc((min(100vw, 1704px) - 2 * var(--gutter)) / 4 - var(--tm-gap));
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.tm-track {
    display: flex;
    width: max-content;
    animation: tm-scroll 45s linear infinite;
}

.tm-marquee:hover .tm-track {
    animation-play-state: paused;
}

.tm-slide {
    flex: 0 0 var(--tm-slide);
    margin-right: var(--tm-gap);
    min-width: 0;
}

.tm-slide .quote {
    height: 100%;
    margin: 0;
}

@keyframes tm-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@media (max-width: 1200px) {
    .tm-marquee {
        --tm-gap: 20px;
        --tm-slide: calc((100vw - 2 * var(--gutter)) / 3 - var(--tm-gap));
        /* 3 across */
    }
}

@media (max-width: 900px) {
    .tm-marquee {
        --tm-gap: 20px;
        --tm-slide: calc((100vw - 2 * var(--gutter)) / 2 - var(--tm-gap));
        /* 2 across */
    }
}

@media (max-width: 767px) {
    .tm-marquee {
        --tm-gap: 16px;
        --tm-slide: calc((100vw - 2 * var(--gutter)) - var(--tm-gap));
        /* 1 across */
    }
}


/* Respect users who prefer no motion: freeze the loop, allow manual swipe. */

@media (prefers-reduced-motion: reduce) {
    .tm-track {
        animation: none;
    }
    .tm-marquee {
        overflow-x: auto;
    }
}


/* ════════════════════════════════════════════════════════════════════
   AWARDS & CERTIFICATIONS REDESIGN (Figma Screenshot 1 & 2)
   ════════════════════════════════════════════════════════════════════ */

.awards-certifications-wrapper {
    width: 100%;
}


/* Part 1: Top Hero Banner */

.awards-hero-banner {
    position: relative;
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    padding-block: 85px 95px;
    background-color: #FAF8F5;
    border-bottom: 1px solid #EAE2D5;
}

.awards-hero-content {
    max-width: 540px;
}

.awards-hero-title {
    font-size: 2.85rem;
    line-height: 1.12;
    font-weight: 700;
    color: #0F2B44;
    margin-block: 12px 18px;
}

.gold-dash-ornament {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-block: 14px 22px;
    color: #C59B27;
}

.gold-dash-ornament::before,
.gold-dash-ornament::after {
    content: '';
    width: 50px;
    height: 1px;
    background: #C59B27;
    opacity: 0.5;
}

.awards-hero-desc {
    font-size: 0.94rem;
    line-height: 1.6;
    color: #475569;
    margin-bottom: 12px;
}


/* Part 2: 5 Awards Grid */

.awards-section-block {
    padding-block: 70px;
    background: #FFFFFF;
}

.awards-grid-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.award-figma-card {
    background: #FAF8F5;
    border: 1px solid #F0E8DD;
    border-radius: 16px;
    padding: 28px 18px 24px 18px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.award-figma-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(15, 42, 68, 0.08);
}

.award-card-media {
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.award-card-media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.award-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0F2B44;
    line-height: 1.3;
    margin-bottom: 8px;
}

.award-card-subtext {
    font-size: 0.82rem;
    line-height: 1.45;
    color: #64748B;
    margin: 0;
}

.award-card-subtext strong {
    color: #0F2B44;
    font-weight: 700;
}


/* Part 3: 7 Certifications Grid */

.certs-section-block {
    padding-block: 70px;
    background: #FAF8F5;
    border-top: 1px solid #EAE2D5;
}

.certs-grid-7 {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 16px;
}

.cert-figma-card {
    background: #FFFFFF;
    border: 1px solid #EAE2D5;
    border-radius: 16px;
    padding: 24px 14px 20px 14px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cert-figma-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(15, 42, 68, 0.06);
}

.cert-card-media {
    width: 90px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.cert-card-media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.cert-card-title {
    font-size: 0.82rem;
    font-weight: 800;
    color: #0F2B44;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.cert-card-subtext {
    font-size: 0.76rem;
    line-height: 1.35;
    color: #64748B;
    margin: 0;
}


/* Responsive Media Queries */

@media (max-width: 1200px) {
    .awards-grid-5 {
        grid-template-columns: repeat(3, 1fr);
    }
    .certs-grid-7 {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 960px) {
    .awards-hero-banner {
        padding-block: 60px;
        background-position: center;
    }
    .awards-hero-title {
        font-size: 2.2rem;
    }
    .awards-grid-5 {
        grid-template-columns: repeat(2, 1fr);
    }
    .certs-grid-7 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .awards-hero-banner {
        background-image: none !important;
    }
}

@media (max-width: 576px) {
    .awards-grid-5,
    .certs-grid-7 {
        grid-template-columns: 1fr;
    }
}


/* ════════════════════════════════════════════════════════════════════
   TECHNOLOGY & INNOVATIONS SECTION (WHERE INNOVATION MEETS HEALING)
   ════════════════════════════════════════════════════════════════════ */

.tech-innovation-section {
    overflow: hidden;
}

.tech-innovation-bg {
    position: relative;
    padding: 90px 0 100px;
    background-color: #EBF4F6;
    background-position: center right;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}

.tech-innovation-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #F8FAFC 0%, rgba(248, 250, 252, 0.94) 45%, rgba(248, 250, 252, 0.6) 70%, rgba(248, 250, 252, 0.15) 100%);
    pointer-events: none;
    z-index: 1;
}

.tech-innovation-section>.container {
    position: relative;
    z-index: 2;
}


/* --- Top Hero Split --- */

.tech-hero-split {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 48px;
    align-items: center;
}

.tech-eyebrow {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: #C59B27;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.tech-main-heading {
    font-family: var(--font-head);
    font-size: clamp(2.2rem, 1.8rem + 2.5vw, 3.2rem);
    font-weight: 700;
    color: #0F2A44;
    line-height: 1.15;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.tech-main-heading .text-teal-italic {
    color: var(--brand);
    font-style: italic;
    font-weight: 500;
}

.tech-gold-line {
    width: 48px;
    height: 2.5px;
    background: #C59B27;
    margin-bottom: 20px;
    border-radius: 2px;
}

.tech-hero-sub {
    font-size: var(--text-base);
    line-height: 1.65;
    color: var(--body);
    max-width: 620px;
    margin-bottom: 36px;
}


/* Wreath Badges Grid */

.tech-wreath-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding-top: 10px;
}

.tech-wreath-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
}

.wreath-icon-wrap {
    width: 120px;
    height: 120px;
    display: grid;
    place-items: center;
}

.wreath-svg {
    width: 100%;
    height: 100%;
}

.wreath-text strong {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #0F2A44;
    letter-spacing: 0.04em;
    line-height: 1.25;
}

.wreath-text span {
    display: block;
    font-size: 15px;
    color: var(--brand);
    margin-top: 2px;
    line-height: 1.2;
}


/* --- Right Side: Powering the Future Card --- */

.tech-hero-right {
    display: flex;
    justify-content: flex-end;
}

.tech-glass-card {
    position: relative;
    top: auto;
    right: auto;
    width: 320px;
    max-width: 100%;
    background: linear-gradient(145deg, #091C2E 0%, #0F2B44 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 24px;
    padding: 32px 28px;
    color: #FFFFFF;
    box-shadow: 0 20px 50px rgba(15, 42, 68, 0.2);
}

.tech-glass-title {
    display: block;
    font-size: 0.78rem;
    font-weight: 800;
    color: #38BDF8;
    letter-spacing: 0.08em;
    margin-bottom: 22px;
    line-height: 1.3;
}

.tech-glass-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tech-glass-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
}

.glass-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: grid;
    place-items: center;
    color: #38BDF8;
    font-size: 0.85rem;
    flex-shrink: 0;
}


/* --- Bottom Ecosystem Card --- */

.tech-innovation-second-box {
    padding: 50px 0 50px 0;
}

.tech-ecosystem-card {
    background: #FFFFFF;
    border-radius: 24px;
    padding: 40px 36px;
    border: 1px solid var(--border-soft);
    box-shadow: 0 16px 48px rgba(15, 42, 68, 0.08);
}

.tech-ecosystem-head {
    text-align: center;
    margin: 0 auto 36px;
}

.tech-ecosystem-head h3 {
    color: #0F2A44;
    margin-bottom: 10px;
}

.tech-ecosystem-head h3 .text-teal {
    color: var(--brand);
}

.tech-diamond-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 12px;
}

.tech-diamond-divider .line {
    width: 40px;
    height: 1px;
    background: var(--border);
}

.tech-diamond-divider .diamond {
    color: #C59B27;
    font-size: 0.65rem;
}

.tech-ecosystem-head p {
    font-size: var(--text-md);
    color: var(--body);
    margin: 0;
}


/* Ecosystem Wrapper & Devices Box (Horizontal Image Left + Text Right) */

.tech-ecosystem-wrapper {
    display: flex;
    gap: 20px;
    align-items: stretch;
}

.tech-devices-box {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    padding: 24px 18px;
    background: #FFFFFF;
}

.tech-device-col {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding-right: 14px;
    border-right: 1px solid var(--border-soft);
}

.tech-device-col:last-child {
    border-right: none;
    padding-right: 0;
}

.device-thumb {
    width: 85px;
    height: 140px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
}

.device-thumb img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.device-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.device-title {
    font-family: var(--font-head);
    font-size: 0.98rem;
    font-weight: 800;
    color: #0F2A44;
    margin-bottom: 2px;
}

.device-sub {
    font-size: 0.74rem;
    font-weight: 700;
    color: #C59B27;
    margin-bottom: 12px;
    line-height: 1.3;
}

.device-checklist {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.device-checklist li {
    font-size: 0.74rem;
    color: var(--body);
    display: flex;
    align-items: center;
    gap: 6px;
}

.device-checklist li i {
    color: var(--brand);
    font-size: 0.68rem;
}

.device-fda {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px dashed var(--border-soft);
    font-size: 0.7rem;
    color: var(--muted);
    font-weight: 600;
}

.fda-badge-text {
    color: #0F2B44;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.05em;
}


/* Col 5: Future Innovations Dark Card */

.tech-future-col {
    width: 250px;
    flex-shrink: 0;
    background: linear-gradient(145deg, #091C2E 0%, #0F2B44 100%);
    border-radius: 16px;
    padding: 24px 20px;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.tech-future-col::after {
    content: '';
    position: absolute;
    right: -20px;
    bottom: -20px;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.25) 0%, rgba(56, 189, 248, 0) 70%);
    pointer-events: none;
}

.future-col-title {
    font-size: 0.8rem;
    font-weight: 800;
    color: #38BDF8;
    letter-spacing: 0.08em;
    margin-bottom: 20px;
}

.future-col-list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
}

.future-col-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
}

.fut-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(56, 189, 248, 0.3);
    display: grid;
    place-items: center;
    color: #38BDF8;
    font-size: 0.82rem;
    flex-shrink: 0;
}

.future-col-foot {
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.82rem;
    line-height: 1.35;
}

.future-col-foot strong {
    color: #38BDF8;
}

.future-col-foot span {
    color: rgba(255, 255, 255, 0.8);
}


/* --- Responsive Media Queries --- */

@media (max-width: 1200px) {
    .tech-hero-split {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
    .tech-ecosystem-wrapper {
        flex-direction: column;
    }
    .tech-devices-box {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 20px;
    }
    .tech-device-col:nth-child(2n) {
        border-right: none;
        padding-right: 0;
    }
    .tech-future-col {
        width: 100%;
    }
}

@media (max-width: 960px) {
    .tech-hero-split {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .tech-wreath-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .tech-glass-card {
        position: static;
        width: 100%;
        margin-top: 20px;
    }
}

@media (max-width: 767px) {
    .tech-innovation-bg {
        background-image: none !important;
    }
}

@media (max-width: 576px) {
    .tech-innovation-section {
        padding: 56px 0 64px;
    }
    .tech-ecosystem-card {
        padding: 24px 16px;
    }
    .tech-devices-box {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 18px 14px;
    }
    .tech-device-col {
        border-right: none;
        border-bottom: 1px solid var(--border-soft);
        padding-right: 0;
        padding-bottom: 20px;
    }
    .tech-device-col:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
    .wreath-icon-wrap {
        width: 48px;
        height: 48px;
    }
    .tech-arch-frame {
        border-radius: 200px 200px 24px 24px;
    }
    .tech-machine-img-wrap {
        height: 320px;
    }
}


/* ════════════════════════════════════════════════════════════════════
   FIGMA MATCHING BLOG & BLOG DETAIL STYLES
   ════════════════════════════════════════════════════════════════════ */


/* --- Blog Hero Section (Full Background Image) --- */

.blog-hero-section {
    position: relative;
    padding: 70px 0 90px;
    background-color: #FDFBF7;
    background-position: center right;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}

.blog-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #FDFBF7 0%, rgba(253, 251, 247, 0.96) 45%, rgba(253, 251, 247, 0.65) 70%, rgba(253, 251, 247, 0.15) 100%);
    pointer-events: none;
    z-index: 1;
}

.blog-hero-section>.container {
    position: relative;
    z-index: 2;
}

.blog-hero-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 48px;
    align-items: center;
}

.blog-hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: #C59B27;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.blog-hero-eyebrow .diamond-accent {
    color: #C59B27;
    font-size: 0.7rem;
}

.blog-hero-title {
    font-family: var(--font-head);
    font-size: clamp(2.4rem, 2rem + 2.5vw, 3.4rem);
    font-weight: 700;
    color: #0F2A44;
    line-height: 1.15;
    margin-bottom: 18px;
    letter-spacing: -0.02em;
}

.blog-hero-title .text-teal-italic {
    color: var(--brand);
    font-style: italic;
    font-weight: 500;
}

.blog-hero-sub {
    font-size: var(--text-md);
    line-height: 1.6;
    color: var(--body);
    max-width: 540px;
    margin-bottom: 28px;
}


/* Search Bar Pill */

.blog-search-pill {
    display: flex;
    align-items: center;
    background: #FFFFFF;
    border: 1px solid var(--border-soft);
    border-radius: 50px;
    padding: 6px 8px 6px 20px;
    box-shadow: 0 10px 30px rgba(15, 42, 68, 0.06);
    max-width: 480px;
}

.blog-search-pill i {
    color: var(--muted);
    font-size: 1rem;
    margin-right: 12px;
}

.blog-search-pill input {
    border: none;
    outline: none;
    background: transparent;
    flex: 1;
    font-size: 0.95rem;
    color: #0F2A44;
}

.blog-search-pill .btn-search-go {
    background: var(--brand);
    color: #FFF;
    border: none;
    border-radius: 40px;
    padding: 10px 22px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.blog-search-pill .btn-search-go:hover {
    background: var(--brand-dark);
}


/* Hero Center Towel Photo */

.blog-hero-center-media {
    width: 100%;
    height: 380px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(15, 42, 68, 0.1);
}

.blog-hero-center-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* Hero Floating Quote Card */

.blog-hero-quote-card {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 32px 26px;
    box-shadow: 0 20px 50px rgba(15, 42, 68, 0.08);
    border: 1px solid var(--border-soft);
}

.blog-hero-quote-card .big-quote-mark {
    font-size: 3rem;
    line-height: 1;
    color: var(--brand);
    font-family: Georgia, serif;
    margin-bottom: 10px;
    display: block;
}

.blog-hero-quote-card p {
    font-family: var(--font-head);
    font-size: 1.15rem;
    font-weight: 600;
    color: #0F2A44;
    line-height: 1.45;
    margin-bottom: 20px;
}

.blog-hero-quote-card .quote-divider {
    height: 1px;
    background: var(--border-soft);
    margin-bottom: 18px;
    position: relative;
}

.blog-hero-quote-card .badge-trust-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.blog-hero-quote-card .badge-trust-info i {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(19, 96, 106, 0.1);
    color: var(--brand);
    display: grid;
    place-items: center;
    font-size: 1rem;
}

.blog-hero-quote-card .badge-trust-info strong {
    display: block;
    font-size: 0.82rem;
    color: #0F2A44;
}

.blog-hero-quote-card .badge-trust-info span {
    font-size: 0.72rem;
    color: var(--muted);
}


/* --- Category Tab Filter Bar --- */

.blog-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 0;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 40px;
    gap: 20px;
}

.blog-tabs-list {
    display: flex;
    align-items: center;
    gap: 24px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.blog-tabs-list::-webkit-scrollbar {
    display: none;
}

.blog-tab-item {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
    padding-bottom: 8px;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.blog-tab-item:hover,
.blog-tab-item.active {
    color: var(--brand);
    border-bottom-color: var(--brand);
}

.blog-sort-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--muted);
    white-space: nowrap;
}

.blog-sort-select {
    border: none;
    outline: none;
    background: transparent;
    font-weight: 700;
    color: #0F2A44;
    cursor: pointer;
}


/* --- Main Layout 2-Column Split --- */

.blog-layout-split {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 48px;
    align-items: start;
}


/* Post Card Grid inside Main Col */

.blog-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

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

.blog-post-card {
    background: #FFFFFF;
    border-radius: 16px;
    border: 1px solid var(--border-soft);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}

.blog-post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(15, 42, 68, 0.08);
}

.blog-card-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: #F0F4F6;
}

.blog-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.blog-post-card:hover .blog-card-thumb img {
    transform: scale(1.05);
}

.blog-cat-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: var(--brand);
    color: #FFFFFF;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    border-radius: 4px;
    text-transform: uppercase;
}

.blog-card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.blog-card-meta {
    font-size: 0.78rem;
    color: var(--muted);
    margin-bottom: 10px;
}

.blog-card-title {
    font-family: var(--font-head);
    font-size: 1.15rem;
    font-weight: 700;
    color: #0F2A44;
    line-height: 1.35;
    margin-bottom: 10px;
}

.blog-card-title a {
    color: inherit;
    text-decoration: none;
}

.blog-card-title a:hover {
    color: var(--brand);
}

.blog-card-excerpt {
    font-size: 0.88rem;
    color: var(--body);
    line-height: 1.55;
    margin-bottom: 18px;
    flex: 1;
}

.blog-card-foot {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--border-soft);
}

.blog-read-link {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--brand);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.blog-read-link i {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.blog-read-link:hover i {
    transform: translateX(4px);
}


/* --- Right Sidebar Widgets --- */

.blog-sidebar {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.blog-widget {
    background: #FFFFFF;
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    padding: 26px 22px;
    box-shadow: 0 10px 30px rgba(15, 42, 68, 0.04);
}

.blog-widget-title {
    font-family: var(--font-head);
    font-size: 1.05rem;
    font-weight: 800;
    color: #0F2A44;
    margin-bottom: 18px;
}


/* Popular Topics List */

.popular-topics-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.popular-topic-item a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: #F8FAFC;
    border-radius: 10px;
    text-decoration: none;
    color: #0F2A44;
    font-size: 0.88rem;
    font-weight: 600;
    transition: background 0.2s ease;
}

.popular-topic-item a:hover {
    background: rgba(19, 96, 106, 0.08);
    color: var(--brand);
}

.popular-topic-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.popular-topic-left i {
    color: var(--brand);
    font-size: 0.9rem;
}


/* Newsletter Widget */

.widget-newsletter-sub {
    font-size: 0.85rem;
    color: var(--body);
    margin-bottom: 16px;
    line-height: 1.5;
}

.widget-newsletter-form {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.widget-newsletter-form input {
    flex: 1;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.85rem;
    outline: none;
}

.widget-newsletter-form button {
    background: var(--brand);
    color: #FFF;
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    cursor: pointer;
}

.widget-newsletter-form button:disabled {
    opacity: .6;
    cursor: default;
}


/* Sign-up result, shown in the widget itself rather than as a page toast.
   Collapsed until the request answers, so the card keeps its resting height. */

.widget-newsletter-msg {
    display: none;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 10px;
}

.widget-newsletter-msg.is-ok,
.widget-newsletter-msg.is-err {
    display: block;
    padding: 8px 12px;
    border-radius: 8px;
}

.widget-newsletter-msg.is-ok {
    color: #0F7B3E;
    background: #E7F7EE;
    border: 1px solid #B7E4C9;
}

.widget-newsletter-msg.is-err {
    color: #C0392B;
    background: #FDECEA;
    border: 1px solid #F5C0BA;
}

.widget-privacy-note {
    font-size: 0.72rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 6px;
}


/* Consultation Widget Card */

.widget-consult-card {
    background: linear-gradient(135deg, #E6F3F5 0%, #D8ECEF 100%);
    border: none;
}

.widget-consult-card p {
    font-size: 0.88rem;
    color: #0F2A44;
    line-height: 1.5;
    margin-bottom: 16px;
}


/* Bottom Evidence Banner */

.blog-evidence-banner {
    margin-top: 60px;
    background: #E8F3F4;
    border-radius: 16px;
    padding: 24px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.blog-evidence-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.blog-evidence-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(19, 96, 106, 0.12);
    color: var(--brand);
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.blog-evidence-text strong {
    display: block;
    font-size: 0.95rem;
    color: #0F2A44;
    margin-bottom: 2px;
}

.blog-evidence-text span {
    font-size: 0.82rem;
    color: var(--body);
}


/* ════════════════════════════════════════════════════════════════════
   BLOG DETAIL PAGE STYLES (FIGMA MATCHING)
   ════════════════════════════════════════════════════════════════════ */

.article-hero {
    margin-bottom: 40px;
}

.article-hero-cat {
    display: inline-block;
    background: var(--brand);
    color: #FFF;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 4px 12px;
    border-radius: 4px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.article-hero-title {
    font-family: var(--font-head);
    font-size: clamp(2.2rem, 1.8rem + 2vw, 3rem);
    font-weight: 800;
    color: #0F2A44;
    line-height: 1.2;
    margin-bottom: 16px;
}

.article-hero-sub {
    font-size: var(--text-lg);
    line-height: 1.6;
    color: var(--body);
    margin-bottom: 28px;
}

.article-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-soft);
    gap: 20px;
    flex-wrap: wrap;
}

.article-author-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.author-avatar-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.author-meta-name {
    display: block;
    font-weight: 700;
    color: #0F2A44;
    font-size: 0.95rem;
}

.author-meta-date {
    font-size: 0.8rem;
    color: var(--muted);
}

.social-share-btns {
    display: flex;
    align-items: center;
    gap: 10px;
}

.social-share-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border-soft);
    background: #FFFFFF;
    color: var(--body);
    display: grid;
    place-items: center;
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.social-share-btn:hover {
    background: var(--brand);
    color: #FFFFFF;
    border-color: var(--brand);
}


/* Numbered Steps List (01, 02, 03, 04) */

.numbered-step-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}

.step-num-badge {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--brand);
    line-height: 1;
    min-width: 32px;
}

.step-content-body strong {
    display: block;
    font-size: 1rem;
    color: #0F2A44;
    margin-bottom: 4px;
}

.step-content-body p {
    margin: 0;
    font-size: 0.92rem;
    color: var(--body);
}


/* Pull Quote Box */

.blog-pull-quote {
    background: #F8FAFC;
    border-left: 4px solid var(--brand);
    border-radius: 0 16px 16px 0;
    padding: 24px 28px;
    margin: 32px 0;
}

.blog-pull-quote blockquote {
    font-family: var(--font-head);
    font-size: 1.15rem;
    font-weight: 600;
    color: #0F2A44;
    line-height: 1.5;
    margin: 0 0 10px;
}

.blog-pull-quote cite {
    font-size: 0.85rem;
    font-style: normal;
    font-weight: 700;
    color: var(--brand);
}


/* Key Benefits 2x2 Grid */

.benefits-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 24px 0 36px;
}

.benefits-card-item {
    background: #F8FAFC;
    border-radius: 14px;
    padding: 20px;
    border: 1px solid var(--border-soft);
}

.benefits-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(19, 96, 106, 0.1);
    color: var(--brand);
    display: grid;
    place-items: center;
    font-size: 0.95rem;
    margin-bottom: 12px;
}

.benefits-card-item h4 {
    font-size: 0.95rem;
    font-weight: 800;
    color: #0F2A44;
    margin-bottom: 4px;
}

.benefits-card-item p {
    font-size: 0.82rem;
    color: var(--body);
    margin: 0;
}


/* Detail Page CTA Banner */

.blog-detail-cta-box {
    background: linear-gradient(135deg, #CFEDF3 0%, #E8F4F7 100%);
    border-radius: 16px;
    padding: 28px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 40px 0;
}

.blog-detail-cta-box h3 {
    font-family: var(--font-head);
    font-size: 1.25rem;
    font-weight: 800;
    color: #0F2A44;
    margin-bottom: 4px;
}

.blog-detail-cta-box p {
    font-size: 0.88rem;
    color: var(--body);
    margin: 0;
}


/* Author Widget Card in Detail Sidebar */

.author-widget-card {
    text-align: center;
}

.author-widget-img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 12px;
}

.author-widget-card h4 {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0F2A44;
    margin-bottom: 2px;
}

.author-widget-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--brand);
    margin-bottom: 12px;
    display: block;
}

.author-widget-bio {
    font-size: 0.82rem;
    color: var(--body);
    line-height: 1.45;
    margin-bottom: 16px;
}


/* Table of Contents Widget */

.toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toc-list a {
    font-size: 0.85rem;
    color: var(--body);
    text-decoration: none;
    transition: color 0.2s ease;
}

.toc-list a:hover,
.toc-list a.active {
    color: var(--brand);
    font-weight: 700;
}


/* Related Article Mini Item */

.related-mini-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.related-mini-item {
    display: flex;
    gap: 12px;
    align-items: center;
    text-decoration: none;
}

.related-mini-thumb {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}

.related-mini-info h5 {
    font-size: 0.85rem;
    font-weight: 700;
    color: #0F2A44;
    line-height: 1.3;
    margin-bottom: 4px;
}

.related-mini-info span {
    font-size: 0.72rem;
    color: var(--muted);
}


/* Dark Navy Sidebar CTA */

.dark-sidebar-cta {
    background: linear-gradient(145deg, #091C2E 0%, #0F2B44 100%);
    color: #FFFFFF;
    border-radius: 16px;
    padding: 28px 22px;
    text-align: center;
}

.dark-sidebar-cta .cta-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(56, 189, 248, 0.15);
    color: #38BDF8;
    display: grid;
    place-items: center;
    margin: 0 auto 14px;
    font-size: 1.1rem;
}

.dark-sidebar-cta h4 {
    font-size: 1.15rem;
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 8px;
}

.dark-sidebar-cta p {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 20px;
}


/* --- Responsive Breakpoints --- */

@media (max-width: 1200px) {
    .blog-hero-grid {
        grid-template-columns: 1fr 1fr;
    }
    .blog-hero-quote-card {
        display: none;
    }
}

@media (max-width: 960px) {
    .blog-hero-grid {
        grid-template-columns: 1fr;
    }
    .blog-layout-split {
        grid-template-columns: 1fr;
    }
    .blog-posts-grid {
        grid-template-columns: 1fr;
    }
    .benefits-card-grid {
        grid-template-columns: 1fr;
    }
    .blog-evidence-banner,
    .blog-detail-cta-box {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* ════════════════════════════════════════════════════════════════════
   HEADER / MOBILE DRAWER FIXES
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 960px) {
    /* Logo hard left, Book + hamburger hard right. Without the auto margin
       the actions sat straight after the logo instead of at the edge. */
    .site-header__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    .site-header__inner>.brand,
    .site-header__inner>a:first-child {
        margin-right: auto;
    }
    .header__actions {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
    }
    /* The mega menu is 740px wide and centred with left:50% on desktop.
       Inside the narrow drawer that pushed its content off the left edge,
       so the treatment names were clipped. Reset the whole box. */
    .nav .mega {
        position: static !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box;
    }
    .nav .mega__inner,
    .nav .mega__grid {
        grid-template-columns: 1fr !important;
        width: 100%;
        min-width: 0;
        margin: 0;
    }
    .nav .mega__card {
        width: 100%;
        min-width: 0;
        white-space: normal;
    }
    /* Long treatment names wrap instead of being cut off. */
    .nav .mega__card * {
        min-width: 0;
        overflow-wrap: anywhere;
    }
}


/* Country code + number pair used by includes/site/parts/phone_field.php. */

.phone-combo {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.phone-combo__cc {
    flex: 0 0 108px;
    min-width: 0;
    font-size: .92rem;
}

.phone-combo__num {
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 480px) {
    .phone-combo__cc {
        flex-basis: 92px;
        font-size: .85rem;
    }
}


/* ═══════════════════════════════════════════════ patient results ══════ */


/* Everything below belongs to patient-results.php and is namespaced `pr-`
   so it can never leak into the shared card / section rules it sits beside.
   Gold (#C59B27) is the accent the Figma uses on this page for eyebrows,
   rules and icon marks; teal stays the brand colour for headings and pills. */

.eyebrow--gold {
    color: #C59B27;
}


/* Thin gold rule that closes with a diamond — under the hero eyebrow, the
   hero title, and centred inside the hero quote card. */

.pr-rule {
    display: block;
    position: relative;
    width: 132px;
    height: 1px;
    margin-block: 16px;
    background: linear-gradient(90deg, #C59B27, rgba(197, 155, 39, 0));
}

.pr-rule::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 6px;
    height: 6px;
    background: #C59B27;
    transform: translateY(-50%) rotate(45deg);
}

.pr-rule--center {
    width: 120px;
    margin-inline: auto;
    background: linear-gradient(90deg, rgba(197, 155, 39, 0), #C59B27, rgba(197, 155, 39, 0));
}

.pr-rule--center::after {
    display: none;
}


/* ------------------------------------------------------------- hero -- */

.pr-hero {
    position: relative;
    padding-block: 64px 40px;
    background: var(--cream) center / cover no-repeat;
}

.pr-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #F7F3EE 0%, rgba(247, 243, 238, .92) 42%, rgba(247, 243, 238, .35) 70%, rgba(247, 243, 238, 0) 100%);
}

.pr-hero>.container {
    position: relative;
}

.pr-hero__grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
}

.pr-hero__copy {
    flex: 1;
    max-width: 620px;
}

.pr-hero__quote-col {
    flex-shrink: 0;
    display: flex;
    justify-content: end;
}

.pr-hero__quote {
    position: relative;
    width: min(320px, 100%);
    margin: 0;
    padding: 26px 24px;
    background: #FDFBF7;
    border-radius: 16px;
    box-shadow: 0 12px 36px rgba(15, 42, 68, 0.08);
    border: 1px solid rgba(197, 155, 39, 0.25);
}

.pr-hero__quote>i {
    font-size: 1.4rem;
    color: var(--brand);
    opacity: .55;
}

.pr-hero__quote blockquote {
    margin: 12px 0 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 1.02rem;
    line-height: 1.5;
    color: var(--heading);
}

.pr-hero__quote figcaption {
    text-align: left;
}

.pr-hero__quote figcaption strong {
    display: block;
    font-size: var(--text-base);
    color: var(--heading);
}

.pr-hero__quote figcaption small {
    display: block;
    margin-top: 3px;
    font-size: var(--text-md);
    color: var(--muted);
}


/* Trust row under the copy — dividers between, none on the ends. */

.pr-hero__trust {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    max-width: 760px;
    margin-top: 42px;
}

.pr-trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-inline: 14px;
    text-align: center;
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.35;
    color: var(--heading);
}

.pr-trust-item+.pr-trust-item {
    border-left: 1px solid rgba(197, 155, 39, .28);
}

.pr-trust-item i {
    font-size: 1.5rem;
    color: #C59B27;
}

.pr-statbar {
    margin-top: 44px;
}


/* --------------------------------------------- shared section heading -- */

.pr-sec-head {
    margin-bottom: 44px;
    text-align: center;
}

.pr-sec-head h2 {
    margin: 0;
    font-size: clamp(1.9rem, 2.8vw, 2.9rem);
    color: var(--heading);
}

.pr-sec-head .eyebrow {
    margin-bottom: 10px;
}

.pr-sec-head__sub {
    max-width: 62ch;
    margin: 14px auto 0;
    font-size: var(--text-lg);
    line-height: 1.7;
    color: var(--body);
}


/* Gold hairline with a centred diamond, as under "Results You Can Expect". */

.pr-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
    color: #C59B27;
}

.pr-ornament::before,
.pr-ornament::after {
    content: '';
    width: 84px;
    height: 1px;
    background: #C59B27;
    opacity: .55;
}

.pr-ornament em {
    font-style: normal;
    font-size: .6rem;
}


/* ------------------------------------------ results you can expect -- */

.pr-outcome-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 18px;
}

.pr-outcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 18px 34px;
    text-align: center;
    background: #FBFAF8;
    border: 1px solid var(--border-soft);
    border-radius: 14px;
}

.pr-outcome__icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin-bottom: 18px;
    font-size: 2.1rem;
    color: #C59B27;
}

.pr-outcome__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pr-outcome h3 {
    margin: 0 0 20px;
    font-size: 1.18rem;
    color: var(--brand);
}

.pr-outcome__stat {
    line-height: 1.5;
}

.pr-outcome__stat small {
    display: block;
    font-size: var(--text-base);
    color: var(--muted);
}

.pr-outcome__stat strong {
    display: block;
    margin-top: 2px;
    font-size: 1.02rem;
    color: var(--heading);
}

.pr-outcome__sep {
    display: block;
    width: 26px;
    height: 1px;
    margin: 14px auto;
    background: #C59B27;
    opacity: .5;
}


/* ------------------------------------------------ transformations -- */

.pr-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 34px;
}

.pr-filter {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 20px;
    font: inherit;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--heading);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.pr-filter i {
    font-size: .95rem;
    color: #C59B27;
}

.pr-filter:hover {
    border-color: var(--brand-light);
    color: var(--brand);
}

.pr-filter.is-active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.pr-filter.is-active i {
    color: #fff;
}

.pr-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.pr-card {
    padding: 10px 10px 16px;
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease;
}

.pr-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.pr-card__media {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    border-radius: 10px;
    overflow: hidden;
}

.pr-shot {
    position: relative;
    margin: 0;
    aspect-ratio: 1 / 1;
    background: var(--mint);
}

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

.pr-shot__tag {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 4px 9px;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(15, 42, 68, .72);
    border-radius: 5px;
}

.pr-shot__tag--after {
    left: auto;
    right: 8px;
}


/* The arrow sitting on the seam opens the full-size viewer. */

.pr-card__open {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    color: var(--brand);
    background: #fff;
    border: none;
    border-radius: 50%;
    box-shadow: 0 3px 14px rgba(15, 42, 68, .28);
    cursor: pointer;
    transition: transform .2s ease, background .2s ease, color .2s ease;
}

.pr-card__open:hover {
    background: var(--brand);
    color: #fff;
    transform: translate(-50%, -50%) scale(1.08);
}

.pr-card__title {
    margin: 14px 6px 8px;
    font-size: 1.02rem;
    color: var(--brand);
}

.pr-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-inline: 6px;
    font-size: var(--text-md);
    color: var(--muted);
}

.pr-card__meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.pr-card__meta i {
    color: #C59B27;
    font-size: .8rem;
}

.pr-card__who {
    margin-left: auto;
}

.pr-empty {
    margin-top: 26px;
    text-align: center;
    color: var(--muted);
}

.pr-more-wrap {
    margin-top: 28px;
    text-align: center;
}


/* Reassurance strip closing the gallery. */

.pr-trustbar {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
    gap: 26px;
    margin-top: 34px;
    padding: 22px 28px;
    background: var(--white);
    border: 1px solid rgba(197, 155, 39, .3);
    border-radius: 12px;
}

.pr-trustbar__note {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pr-trustbar__shield {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    font-size: 1.3rem;
    color: #C59B27;
    background: rgba(197, 155, 39, .1);
    border-radius: 10px;
}

.pr-trustbar__note p {
    margin: 0;
    font-size: var(--text-md);
    line-height: 1.55;
    color: var(--body);
}

.pr-trustbar__badges {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    padding-left: 26px;
    border-left: 1px solid var(--border);
}

.pr-trustbar__badge {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: var(--text-md);
    line-height: 1.35;
    color: var(--heading);
}

.pr-trustbar__badge i {
    color: var(--brand);
    font-size: 1rem;
}


/* ------------------------------------------------- full-size viewer -- */

.pr-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(15, 42, 68, .78);
    overflow-y: auto;
}

.pr-lightbox[hidden] {
    display: none;
}

.pr-lightbox__panel {
    position: relative;
    width: min(880px, 100%);
    padding: 30px;
    background: var(--white);
    border-radius: var(--r-card);
}

.pr-lightbox__close {
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 1.9rem;
    line-height: 1;
    color: var(--muted);
    background: none;
    border: none;
    cursor: pointer;
}

.pr-lightbox__panel h3 {
    margin: 0 0 4px;
    color: var(--brand);
}

.pr-lightbox__who {
    margin: 0 0 18px;
    font-size: var(--text-md);
    color: var(--muted);
}

.pr-lightbox__pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.pr-lightbox__pair figure {
    margin: 0;
}

.pr-lightbox__pair img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

.pr-lightbox__pair figcaption {
    margin-top: 8px;
    font-size: var(--text-md);
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
}

.pr-lightbox__quote {
    margin: 18px 0 0;
    padding-left: 16px;
    border-left: 3px solid var(--brand-light);
    font-style: italic;
    color: var(--heading);
}


/* --------------------------------------------- featured case study -- */

.pr-case__slide {
    display: none;
}

.pr-case__slide.is-active {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.3fr) minmax(0, .64fr);
    align-items: stretch;
}

.pr-case__panel {
    padding: 46px 42px;
    background: linear-gradient(150deg, #123353 0%, #0B2438 100%);
    border-radius: var(--r-card) 0 0 var(--r-card);
    color: #fff;
}

.pr-case__eyebrow {
    display: inline-block;
    margin-bottom: 16px;
    font-size: var(--text-md);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #C59B27;
}

.pr-case__panel h2 {
    margin: 0 0 20px;
    font-size: clamp(1.7rem, 2.3vw, 2.4rem);
    color: #fff;
}

.pr-case__quote {
    margin: 0 0 16px;
    font-size: 1.06rem;
    color: rgba(255, 255, 255, .95);
}

.pr-case__text {
    margin: 0 0 26px;
    font-size: var(--text-base);
    line-height: 1.85;
    color: rgba(255, 255, 255, .72);
}

.pr-case__facts {
    margin: 0;
}

.pr-case__facts>div {
    display: grid;
    grid-template-columns: 22px auto 1fr;
    align-items: baseline;
    gap: 10px;
    padding-block: 7px;
    font-size: var(--text-base);
}

.pr-case__facts i {
    color: #C59B27;
    font-size: .95rem;
}

.pr-case__facts dt {
    margin: 0;
    color: rgba(255, 255, 255, .72);
}

.pr-case__facts dd {
    margin: 0;
    font-weight: 700;
    color: #fff;
}

.pr-case__media {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    border-radius: 0 var(--r-card) var(--r-card) 0;
    overflow: hidden;
}

.pr-case__shot {
    position: relative;
    margin: 0;
    min-height: 460px;
    background: var(--mint);
}

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

.pr-case__shot figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 40px 22px 22px;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(180deg, rgba(15, 42, 68, 0), rgba(10, 22, 36, .8));
}


/* The hairline the two shots meet on, with the Figma's dot near the top. */

.pr-case__seam {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(255, 255, 255, .85);
    transform: translateX(-50%);
    pointer-events: none;
}

.pr-case__seam::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 52px;
    width: 9px;
    height: 9px;
    background: #fff;
    border-radius: 50%;
    transform: translateX(-50%);
}

.pr-case__nav {
    position: absolute;
    top: 50%;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transform: translateY(-50%);
    box-shadow: 0 4px 16px rgba(10, 22, 36, .3);
}

.pr-case__nav--prev {
    left: -23px;
    color: #fff;
    background: #1B3A57;
}

.pr-case__nav--next {
    right: -23px;
    color: var(--brand);
    background: #fff;
}

.pr-case__timeline {
    margin-left: 24px;
    padding: 34px 30px;
    background: #FAFAFA;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-card);
}

.pr-case__timeline h3 {
    margin: 0 0 18px;
    padding-bottom: 18px;
    font-size: var(--text-lg);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--brand);
    border-bottom: 1px solid var(--border);
}

.pr-case__timeline ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pr-case__timeline li {
    position: relative;
    padding: 0 0 26px 46px;
}

.pr-case__timeline li:last-child {
    padding-bottom: 0;
}


/* Connector between the ticks, stopping short of the last one. */

.pr-case__timeline li:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 32px;
    bottom: 2px;
    width: 2px;
    background: var(--brand-light);
    opacity: .55;
}

.pr-case__tick {
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    font-size: .8rem;
    color: #fff;
    background: var(--brand);
    border-radius: 50%;
}

.pr-case__timeline strong {
    display: block;
    font-size: 1.02rem;
    color: var(--heading);
}

.pr-case__timeline li span:not(.pr-case__tick) {
    display: block;
    margin-top: 3px;
    font-size: var(--text-base);
    color: var(--body);
}


/* ------------------------------------------------------ responsive -- */

@media (max-width: 1400px) {
    .pr-outcome-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1200px) {
    .pr-hero__grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .pr-hero__sub {
        max-width: none;
    }
    .pr-hero__trust {
        max-width: none;
    }
    .pr-hero__quote {
        position: static;
        width: auto;
        margin-top: 14px;
    }
    .pr-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .pr-case__slide.is-active {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    }
    .pr-case__timeline {
        grid-column: 1 / -1;
        margin: 24px 0 0;
    }
    .pr-hero__quote-col {
        justify-content: start;
    }
}

@media (max-width: 992px) {
    .pr-hero {
        padding-block: 44px 32px;
    }
    .pr-trustbar {
        grid-template-columns: 1fr;
    }
    .pr-trustbar__badges {
        padding-left: 0;
        padding-top: 18px;
        border-left: none;
        border-top: 1px solid var(--border);
    }
    .pr-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .pr-outcome-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .pr-case__slide.is-active {
        grid-template-columns: 1fr;
    }
    .pr-case__panel {
        padding: 34px 26px;
        border-radius: var(--r-card) var(--r-card) 0 0;
    }
    .pr-case__media {
        border-radius: 0 0 var(--r-card) var(--r-card);
    }
    .pr-case__shot {
        min-height: 320px;
    }
    .pr-case__nav--prev {
        left: 10px;
    }
    .pr-case__nav--next {
        right: 10px;
    }
}

@media (max-width: 640px) {
    .pr-hero__trust {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 22px;
    }
    .pr-trust-item:nth-child(odd) {
        border-left: none;
    }
    .pr-filters {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 6px;
    }
    .pr-filter {
        flex: 0 0 auto;
    }
    .pr-grid {
        grid-template-columns: 1fr;
    }
    .pr-outcome-grid {
        grid-template-columns: 1fr;
    }
    .pr-trustbar__badges {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .pr-lightbox__pair {
        grid-template-columns: 1fr;
    }
    .pr-case__timeline {
        padding: 26px 20px;
    }
}


/* ═══════════════════════════════════════════════════ thank you ══════ */


/* Post-submission screen shared by the contact and accessibility forms
   (thank-you.php). One centred card, no navigation dead ends. */

.thankyou {
    padding-block: 90px;
}

.thankyou__card {
    padding: 56px 48px;
    text-align: center;
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-card);
    box-shadow: var(--shadow);
}

.thankyou__mark {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    margin: 0 auto 26px;
    font-size: 2.2rem;
    color: var(--brand);
    background: var(--mint);
    border-radius: 50%;
}

.thankyou__card h1 {
    margin: 6px 0 0;
    font-size: clamp(1.9rem, 3vw, 2.6rem);
    color: var(--heading);
}

.thankyou__lead {
    max-width: 56ch;
    margin: 16px auto 0;
    font-size: var(--text-lg);
    line-height: 1.75;
    color: var(--body);
}

.thankyou__points {
    display: grid;
    gap: 14px;
    margin: 34px 0 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.thankyou__points li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    background: #FBFAF8;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
}

.thankyou__point-icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    font-size: 1rem;
    color: var(--brand);
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
}

.thankyou__points strong {
    display: block;
    font-size: var(--text-base);
    color: var(--heading);
}

.thankyou__points span {
    display: block;
    margin-top: 3px;
    font-size: var(--text-md);
    line-height: 1.6;
    color: var(--body);
}

.thankyou__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 34px;
}

@media (max-width: 576px) {
    .thankyou {
        padding-block: 56px;
    }
    .thankyou__card {
        padding: 36px 22px;
    }
    .thankyou__actions .btn {
        width: 100%;
    }
}


/* ------------------------------------------------- topic chart section -- */


/* A rail of topics on the left drives the detail panel on the right — the
   "patient chart" layout used for the long-tail keyword copy. */

.topic-chart {
    display: grid;
    /* The rail only holds short topic names; the panel carries the reading. */
    grid-template-columns: 0.7fr 1.3fr;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    overflow: hidden;
}

.topic-chart__rail {
    position: relative;
    padding-block: 26px;
}


/* The spine the markers sit on, stopping short of the first and last dot. */

.topic-chart__rail::before {
    content: "";
    position: absolute;
    left: 32px;
    top: 52px;
    bottom: 52px;
    width: 1px;
    background: var(--border);
}

.topic-chart__tab {
    position: relative;
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 15px 26px 15px 24px;
    background: none;
    border: 0;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.topic-chart__tab+.topic-chart__tab::after {
    content: "";
    position: absolute;
    left: 58px;
    right: 26px;
    top: 0;
    height: 1px;
    background: var(--border-soft);
}

.topic-chart__marker {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 3px;
    border-radius: 50%;
    background: var(--white);
    border: 2px solid var(--border);
    position: relative;
    z-index: 1;
    transition: border-color .2s ease, background .2s ease;
}

.topic-chart__tab[aria-selected="true"] .topic-chart__marker {
    border-color: var(--brand);
    background: var(--brand);
}

.topic-chart__kicker {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #C59B27;
    margin-bottom: 5px;
}

.topic-chart__tab-title {
    display: block;
    font-family: var(--font-head);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--heading);
    transition: color .2s ease;
}

.topic-chart__tab[aria-selected="true"] .topic-chart__tab-title {
    font-weight: 700;
}


/* Hover needs an affordance of its own now that the title is always dark. */

.topic-chart__tab:hover .topic-chart__marker {
    border-color: var(--brand-light);
}

.topic-chart__tab:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: -3px;
    border-radius: 8px;
}

.topic-chart__body {
    border-left: 1px solid var(--border);
    padding: 44px 46px;
}

.topic-chart__panel[hidden] {
    display: none;
}

.topic-chart__title {
    font-family: var(--font-head);
    font-size: clamp(1.375rem, 1.05rem + 1.1vw, 1.625rem);
    line-height: 1.28;
    color: var(--heading);
    margin: 0 0 14px;
}

.topic-chart__intro {
    font-size: 1.02rem;
    color: var(--body);
    max-width: 56ch;
    margin: 0 0 26px;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--border-soft);
}

.topic-chart__detail {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 26px 0;
    border-top: 1px solid var(--border-soft);
}

.topic-chart__detail:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.topic-chart__detail h4 {
    font-family: var(--font-head);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--heading);
    margin: 0;
}

.topic-chart__detail p {
    font-size: .95rem;
    line-height: 1.7;
    color: var(--body);
    margin: 0;
}


/* On laptop widths the narrow rail starts wrapping the longer topic names
   onto a second line, so it gets a little of its width back. */

@media (min-width: 1041px) and (max-width: 1200px) {
    .topic-chart {
        grid-template-columns: 0.85fr 1.15fr;
    }
}

@media (max-width: 1040px) {
    .topic-chart {
        grid-template-columns: 1fr;
    }
    /* Stacked, every topic stays on screen — nothing to scroll sideways for.
       Tapping one swaps the panel underneath it. */
    .topic-chart__rail {
        padding-block: 10px;
    }
    /* The spine would be painted over by the highlighted row, so the dots carry
       the list on their own here. */
    .topic-chart__rail::before {
        display: none;
    }
    .topic-chart__tab {
        gap: 14px;
        padding: 13px 20px;
    }
    .topic-chart__tab[aria-selected="true"] {
        background: var(--mint);
    }
    .topic-chart__tab+.topic-chart__tab::after {
        left: 50px;
        right: 20px;
    }
    /* No rule between two rows when the highlight already separates them. */
    .topic-chart__tab[aria-selected="true"]+.topic-chart__tab::after,
    .topic-chart__tab[aria-selected="true"]::after {
        display: none;
    }
    .topic-chart__marker {
        margin-top: 2px;
    }
    .topic-chart__body {
        border-left: 0;
        border-top: 1px solid var(--border);
        padding: 32px 24px;
    }
}


/* section_head--center only centres the block, not the text. Scoped to this
   section so no other page using the partial shifts. */

.topic-chart-section .section-head {
    text-align: center;
}

.topic-chart-section .section-head__sub {
    margin-inline: auto;
    max-width: 68ch;
}


/* --------------------------------------------------------- info block -- */


/* Heading + context paragraph + a grid of short cards. Used wherever the
   client's pages explain something and then break it into a few points. */

.info-block__head {
    text-align: center;
    margin-bottom: 40px;
}

.info-block__text {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--body);
    margin-top: 14px;
}

.info-block__grid {
    display: grid;
    gap: 20px;
}

.info-block__grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.info-block__grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.info-block__card {
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-card);
    padding: 26px 24px;
}


/* On a white section the cards need their own ground to read as cards. */

.section--white .info-block__card {
    background: var(--page);
    border-color: transparent;
}

.info-block__card h3 {
    font-family: var(--font-head);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--heading);
    margin: 0 0 8px;
}

.info-block__card p {
    font-size: .925rem;
    line-height: 1.7;
    color: var(--body);
    margin: 0;
}

.info-block__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-size: .85rem;
    font-weight: 700;
    color: var(--brand);
}

.info-block__link i {
    font-size: .7rem;
}

.info-block__link:hover {
    color: var(--brand-dark);
}

@media (max-width: 900px) {
    .info-block__grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 620px) {
    .info-block__grid--2,
    .info-block__grid--3 {
        grid-template-columns: 1fr;
    }
}


/* ------------------------------------------------------ language switch -- */


/* ES | EN segmented pill in the header bar. Stays visible on phones — it is
   the only way to reach the other language. */

.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: var(--white);
    flex-shrink: 0;
}

.lang-switch__opt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 30px;
    padding: 0 8px;
    border-radius: var(--r-pill);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1;
    color: var(--body);
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.lang-switch__opt:hover {
    color: var(--brand);
}

.lang-switch__opt.is-active {
    background: var(--brand);
    color: var(--on-dark);
}

.lang-switch__opt:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}


/* Phones: the switch shares the bar with the logo, the Book button and the
   menu toggle, so it tightens and "Book Appointment" shortens to "Book". */

@media (max-width: 480px) {
    .lang-switch {
        padding: 2px;
    }
    .lang-switch__opt {
        min-width: 28px;
        height: 26px;
        padding: 0 5px;
        font-size: 0.72rem;
    }
    .header__actions .hide-xs {
        display: none;
    }
}


/* Smallest phones: only the other language is offered, as a single pill. */

@media (max-width: 360px) {
    .lang-switch__opt.is-active {
        display: none;
    }
}


/* Desktop nav between 961px and 1200px: the switch plus the longer Spanish
   labels no longer fit, so nav links stay on one line and the portal button
   keeps only its icon (its label is still in the title). */

@media (min-width: 961px) and (max-width: 1200px) {
    .nav__link {
        white-space: nowrap;
    }
    .header__actions .btn--portal .btn--portal__label {
        display: none;
    }
    .header__actions .btn--portal {
        padding: 9px 11px;
    }
}


/* ------------------------------------------------ home stats strip (design) -- */


/* Five stats in one row with line-art marks and dividers, the clinic photo on
   the right behind a curved edge. Items size to their content, as in the
   design. Scoped to --home so the navy strip on Patient Results keeps its
   own look. The container stops growing around 1600px, so one desktop size
   serves every wide screen (larger type only made the Spanish captions wrap). */

.statbar--home {
    min-height: 150px;
}

.statbar--home .statbar__items {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 22px 24px 26px;
}

.statbar--home .statbar__item {
    flex: 0 1 auto;
    gap: 12px;
    padding-inline: 16px;
    height: auto;
    min-height: 84px;
}

.statbar--home .statbar__item:first-child {
    padding-left: 0;
}

.statbar--home .statbar__item+.statbar__item {
    border-left: 1px solid #E8E2DA;
}

.statbar--home .statbar__icon {
    width: 38px;
    height: 38px;
    font-size: 1.75rem;
    color: var(--brand);
}

.statbar--home .statbar__icon svg,
.statbar--home .statbar__icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.statbar--home .statbar__icon--wide {
    width: 84px;
    height: 28px;
}

.statbar--home .statbar__body {
    max-width: 160px;
}

.statbar--home .statbar__body strong {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.01em;
    white-space: nowrap;
    color: var(--heading);
}

.statbar--home .statbar__body small {
    margin-top: 6px;
    font-size: .875rem;
    line-height: 1.4;
    color: var(--heading);
    opacity: .88;
    text-wrap: pretty;
}

.statbar--home .statbar__body small.is-short {
    white-space: nowrap;
}

.statbar--home .statbar__photo {
    position: relative;
    flex: 0 0 20%;
    /* The curved edge: an ellipse anchored on the right side of the strip. */
    clip-path: ellipse(100% 96% at 100% 50%);
}

.statbar--home .statbar__photo img {
    position: absolute;
    inset: 0;
    object-position: 30% center;
}


/* Below this the photo would squeeze the stats, so the stats get the room. */

@media (max-width: 1300px) {
    .statbar--home .statbar__photo {
        display: none;
    }
    .statbar--home .statbar__items {
        padding-right: 26px;
    }
}

@media (max-width: 1040px) {
    .statbar--home .statbar__item {
        padding-inline: 12px;
        gap: 10px;
    }
    .statbar--home .statbar__body strong {
        font-size: 1.125rem;
    }
    .statbar--home .statbar__body small {
        font-size: .8125rem;
    }
    .statbar--home .statbar__icon--wide {
        width: 70px;
        height: 24px;
    }
}

@media (max-width: 960px) {
    .statbar--home .statbar__items {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        row-gap: 24px;
        padding: 24px 8px;
    }
    .statbar--home .statbar__item {
        min-height: 0;
        padding-inline: 16px;
    }
    .statbar--home .statbar__item:first-child {
        padding-left: 16px;
    }
    .statbar--home .statbar__item:nth-child(3n+1) {
        border-left: 0;
    }
    .statbar--home .statbar__body {
        max-width: none;
    }
    .statbar--home .statbar__body small.is-short {
        white-space: normal;
    }
}


/* Two columns; the map (widest mark, longest caption) gets a full row and the
   other four pair up around it. */

@media (max-width: 720px) {
    .statbar--home .statbar__items {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-flow: row dense;
    }
    .statbar--home .statbar__item {
        border-left: 0 !important;
        padding-inline: 12px;
    }
    .statbar--home .statbar__item:first-child {
        padding-left: 12px;
    }
    .statbar--home .statbar__item--map {
        grid-column: span 2;
    }
    .statbar--home .statbar__body strong {
        white-space: normal;
    }
}

@media (max-width: 480px) {
    .statbar--home .statbar__items {
        padding-inline: 4px;
    }
    .statbar--home .statbar__item,
    .statbar--home .statbar__item:first-child {
        gap: 8px;
        padding-inline: 8px;
    }
    .statbar--home .statbar__icon {
        width: 30px;
        height: 30px;
    }
    .statbar--home .statbar__icon--wide {
        width: 64px;
        height: 22px;
    }
    .statbar--home .statbar__body strong {
        font-size: 1.0625rem;
    }
}

@media (max-width: 380px) {
    .statbar--home .statbar__items {
        grid-template-columns: 1fr;
    }
    .statbar--home .statbar__item--map {
        grid-column: auto;
    }
}