@import url('https://db.onlinewebfonts.com/c/bd8a2781a8dc82326899b235a673ba54?family=Agatho+RegularCAPS');

:root {
    --bg: #F9F5FF;
    --surface: #FFFFFF;
    --text: #2D1046;
    --text-light: #6B5489;
    --primary: #B692D6;
    --primary-light: #D8C4EE;
    --primary-dark: #7E5A9E;
    --primary-deep: #6B4A88;
    --accent: #C9A8E8;

    /* --primary is a fill, not an ink. At #B692D6 it reads 2.6:1 on white and
       2.42:1 on --bg, so any text painted with it fails AA. Text that wants to
       sound like the accent uses --accent-ink instead: same hue, 5.46:1 on
       white and 5.18:1 on --bg. Use --primary for surfaces, borders and
       decorative marks; use --accent-ink the moment it becomes a word. */
    --accent-ink: #7E5A9E;
    /* For labels below ~0.8rem, where the extra step buys real legibility. */
    --accent-ink-strong: #6B4A88;

    /* One gradient for every white-text button. Kept inside the dark half of
       the violet ramp so the fill reads as a single colour instead of fading
       to pale lavender at one end — and so white clears 4.5:1 right across
       it (5.46:1 → 7.09:1) rather than dropping to 2.6:1. */
    --cta-gradient: linear-gradient(135deg, var(--primary-dark), var(--primary-deep));

    /* Specialty pair. Same lightness band, different hue, so neither
       specialty outranks the other and white sits legibly on both. */
    --neuro-from: #9D7CC9;
    --neuro-to: #6B4B96;
    --ent-from: #B87FC4;
    --ent-to: #8A4E8E;
    --border: #E4D8F0;
    --shadow: rgba(122, 90, 158, 0.08);
    --hero-overlay: rgba(182, 146, 214, 0.05);
    --card-bg: #F0E8F8;
    --collage-bg: #E8DFF5;
    --navbar-bg: #B692D6;
    --navbar-text: #FFFFFF;
    /* One step deeper than the old #8B6BAE, which put white text at 4.36:1
       and just missed AA. This clears it at 5.62:1. */
    --footer-bg: #7A5A97;
    --footer-text: #FFFFFF;

    /* Elevation. Every shadow carries an offset and a soft blur so it reads as
       light falling from above rather than as a coloured halo. Elevation is
       declared once per element — a shadow OR a border, never both. */
    --elev-1: 0 1px 2px rgba(45, 16, 70, 0.04),
              0 4px 12px -6px rgba(45, 16, 70, 0.10);
    --elev-2: 0 2px 4px rgba(45, 16, 70, 0.05),
              0 12px 28px -12px rgba(45, 16, 70, 0.16);
    --elev-3: 0 4px 8px rgba(45, 16, 70, 0.06),
              0 24px 48px -20px rgba(45, 16, 70, 0.22);

    /* Motion. One curve for entrances and hovers, one slower for arrivals.
       Both are exponential ease-out: things decelerate into place and stop,
       the way real objects do. Nothing in this project overshoots. */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out-slow: cubic-bezier(0.16, 1, 0.3, 1);

    /* Corner scale. Cards sit at 16px, panels at 24px, controls take the pill
       only when they are small. */
    --radius-control: 10px;
    --radius-card: 16px;
    --radius-panel: 24px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html::-webkit-scrollbar {
    display: none;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--bg);
    color: var(--text);
    transition: background-color 0.3s, color 0.3s;
    overflow-x: hidden;
    word-wrap: break-word;
}

html {
    scroll-behavior: smooth;
}

img, iframe, video, embed, object {
    max-width: 100%;
    height: auto;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ===================== NAVBAR ===================== */
.main-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: transparent;
    transition: background 0.35s ease, box-shadow 0.35s ease;
}

/* Once the page scrolls, the bar needs its own surface so content
   doesn't run underneath the logo */
.main-header.scrolled {
    background: rgba(249, 245, 255, 0.82);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    box-shadow: 0 1px 0 rgba(182, 146, 214, 0.16),
                0 12px 30px -22px rgba(45, 16, 70, 0.55);
}

/* This and .logo-mark's height below transition layout properties, which the
   design detector flags. Kept deliberately: the bar genuinely gets shorter on
   scroll, so its height has to change, and this is a single 0.35s transition
   on one class toggle rather than a per-frame animation. Translating instead
   would slide the bar without slimming it, which is not the effect. */
.navbar {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 18px 0;
    transition: padding 0.35s var(--ease-out);
}

.main-header.scrolled .navbar {
    padding: 10px 0;
}

/* ---- Logo ----
   "logo pic5.png" is white artwork and disappears on a light bar, and
   "logo pic6.png" is the same head mark in dark purple but has no
   wordmark — so the name is set in type beside it. */
.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    text-decoration: none;
}

.logo-mark {
    height: 44px;
    width: auto;
    display: block;
    transition: height 0.35s ease;
}

.main-header.scrolled .logo-mark {
    height: 37px;
}

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

.logo-name {
    font-family: 'Cinzel', serif;
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--text);
    transition: font-size 0.35s ease;
}

/* Every page now opens on a light surface, so this no longer has to survive
   a dark banner behind it: --primary was 2.42:1, --primary-dark is 5.46:1. */
.logo-sub {
    margin-top: 6px;
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--primary-dark);
    white-space: nowrap;
}

.main-header.scrolled .logo-name {
    font-size: 1.24rem;
}

/* ---- Nav pill ----
   The links and the CTA share one rounded white container that floats
   on the page background. */
.nav-links {
    display: flex;
    align-items: center;
    gap: 3px;
    list-style: none;
    margin-left: auto;
    padding: 5px;
    background: var(--surface);
    border: 1px solid rgba(182, 146, 214, 0.16);
    border-radius: 15px;
    box-shadow: 0 10px 26px -18px rgba(61, 26, 92, 0.5);
}

.nav-links a {
    display: block;
    padding: 11px 17px;
    border-radius: 10px;
    font-size: 0.71rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--text-light);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.25s ease, color 0.25s ease;
}

.nav-links a:hover {
    background: var(--bg);
    color: var(--text);
}

.nav-links a.active {
    background: var(--bg);
    color: var(--text);
}

.nav-links a:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ---- CTA, filling the right end of the pill ---- */
.nav-links .nav-cta {
    background: var(--cta-gradient);
    color: #FFFFFF;
    padding: 12px 20px;
    letter-spacing: 0.1em;
    box-shadow: 0 10px 20px -12px rgba(126, 90, 158, 0.85);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.28s ease, filter 0.28s ease;
}

.nav-links .nav-cta:hover {
    background: var(--cta-gradient);
    color: #FFFFFF;
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 14px 26px -12px rgba(126, 90, 158, 0.95);
}

/* ---- Hamburger ---- */
.mobile-menu {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    margin-left: auto;
    background: var(--surface);
    border: 1px solid rgba(182, 146, 214, 0.2);
    border-radius: 13px;
    box-shadow: 0 8px 20px -14px rgba(61, 26, 92, 0.5);
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease;
}

.mobile-menu:hover {
    border-color: var(--primary-light);
}

.mobile-menu .menu-bar {
    display: block;
    width: 19px;
    height: 2px;
    border-radius: 2px;
    background: var(--primary-dark);
    transition: transform 0.3s ease, opacity 0.2s ease;
}

.mobile-menu.open .menu-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.mobile-menu.open .menu-bar:nth-child(2) {
    opacity: 0;
}

.mobile-menu.open .menu-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ---- Responsive ---- */
@media (max-width: 1080px) {
    .nav-links a {
        padding: 10px 13px;
        font-size: 0.67rem;
        letter-spacing: 0.1em;
    }

    .logo-name {
        font-size: 1.24rem;
    }
}

@media (max-width: 900px) {
    .navbar {
        position: relative;
        padding: 14px 0;
        gap: 16px;
    }

    .main-header.scrolled .navbar {
        padding: 10px 0;
    }

    /* The bar is opaque from the start on mobile — the dropdown opens
       over page content and needs a solid surface behind it */
    .main-header {
        background: rgba(249, 245, 255, 0.92);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }

    .logo-mark,
    .main-header.scrolled .logo-mark {
        height: 38px;
    }

    .logo-name,
    .main-header.scrolled .logo-name {
        font-size: 1.15rem;
    }

    .logo-sub {
        font-size: 0.45rem;
        letter-spacing: 0.2em;
    }

    .mobile-menu {
        display: flex;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: calc(100% + 12px);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        margin: 0;
        padding: 10px;
        border-radius: 18px;
        box-shadow: 0 22px 48px -24px rgba(61, 26, 92, 0.6);
        z-index: 999;
    }

    .nav-links.active {
        display: flex;
        animation: navDropIn 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    }

    @keyframes navDropIn {
        from { opacity: 0; transform: translateY(-8px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .nav-links a {
        padding: 14px 16px;
        text-align: center;
        font-size: 0.72rem;
    }

    .nav-links .nav-cta {
        margin-top: 6px;
    }
}

@media (max-width: 420px) {
    .logo-sub {
        display: none;
    }

    .logo-name {
        font-size: 1.2rem;
    }
}

/* ===================== BUTTONS ===================== */
.btn {
    background: var(--cta-gradient);
    color: white;
    padding: 10px 24px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 500;
    transition: transform 0.2s, box-shadow 0.2s;
    border: none;
    cursor: pointer;
    display: inline-block;
    white-space: nowrap;
    text-align: center;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(126, 90, 158, 0.3);
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--primary);
    color: var(--accent-ink);
}

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


/* ===================== HERO (parallax) =====================
   A tall scroll stage. One sticky viewport holds the background and two
   text panels; JS writes a single 0..1 progress value to --px and every
   fade/shift below is derived from it, so scrolling only touches
   opacity and transform. */
/* On the homepage the header floats over the artwork instead of
   occupying flow space above it, so the hero starts flush at y=0.
   Other pages keep the sticky header in normal flow. */
body.home .main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

.hero {
    --px: 0;
    position: relative;
    height: 230vh;
    background: var(--bg);
    /* the generic `section { padding: 80px 0 }` rule would otherwise
       inset the sticky viewport and leave a band above the artwork */
    padding: 0;
}

/* sticky already creates a containing block for the absolute children,
   but be explicit — without it they size against the 230vh section */
.hero-px-viewport {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    isolation: isolate;
}

/* Two stacked plates. The first holds through the opening, the second
   drops in from above and lands as the copy fades through. Oversized so
   neither shift ever exposes an edge. */
.hero-px-bg {
    position: absolute;
    inset: -10% 0 -10%;
    background-repeat: no-repeat;
    background-size: cover;
    will-change: transform, opacity;
}

/* This plate is a 2.67:1 banner. `cover` over-zoomed it on desktop —
   the mark's outer arc clipped off the right edge and its neural
   branches collided with the headline. Sized down and anchored right
   instead, then feathered into the hero background so the banner's
   own edges never show. */
.hero-px-bg-1 {
    background-image: url('images/index/hero-bg-1.png');
    /* 92% height overshoots the plate vertically, so there are no bands
       to hide; pushing it past the right edge clears the headline while
       keeping the full arc in frame. Fade is horizontal only — the mark
       nearly fills the artwork's height, so a vertical fade would clip it. */
    /* Bottom-aligned and sized so the mark's crown clears the header
       rather than running up behind the nav pill. The plate overhangs
       the viewport by 10%, so aligning to its bottom still leaves no
       gap along the lower edge. */
    background-size: auto 88%;
    background-position: right -10vw bottom;
    -webkit-mask-image: linear-gradient(90deg,
        transparent 0%, rgba(0, 0, 0, 0.35) 18%, #000 42%, #000 100%);
    mask-image: linear-gradient(90deg,
        transparent 0%, rgba(0, 0, 0, 0.35) 18%, #000 42%, #000 100%);
    opacity: calc(1 - var(--p2, 0));
    /* No scroll drift on this plate. The mark is sized to sit exactly in
       frame, so any parallax translate pushes part of it out of view
       while scrolling — it holds still and only fades. The overscroll
       stretch stays, scaling from centre so nothing is cropped. */
    transform: scale(calc(1 + var(--pull, 0) / 900));
    transform-origin: center;
}

/* the drop: enters 11% high, settles to rest, easing supplied by JS */
.hero-px-bg-2 {
    background-image: url('images/index/hero-bg-2.png');
    background-position: center;
    opacity: var(--p2, 0);
    transform: translate3d(0,
        calc((var(--p2, 0) - 1) * 11% + var(--px) * 4%), 0)
        scale(calc(1.04 - var(--p2, 0) * 0.04));
}

/* The artwork is very light, so the veil follows the text rather than
   dimming the whole frame — left panel first, right panel after */
.hero-px-veil {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero-px-veil::before,
.hero-px-veil::after {
    content: '';
    position: absolute;
    inset: 0;
}

.hero-px-veil::before {
    background: linear-gradient(90deg,
        rgba(249, 245, 255, 0.94) 0%,
        rgba(249, 245, 255, 0.80) 32%,
        rgba(249, 245, 255, 0.10) 60%,
        transparent 74%);
    opacity: calc(1 - var(--p2, 0) * 1.4);
}

.hero-px-veil::after {
    /* The second plate has a hard seam where the photograph meets its
       watercolour panel. Feathering to a near-solid wash from ~40%
       hides it and gives the copy a clean surface to sit on. */
    /* The ramp used to reach fully opaque by 56%, which put the last 22% of
       its travel across only 8% of the width — a visible vertical seam down
       the middle of the hero where the photograph stopped and the flat wash
       began. Spread over twice the distance it dissolves instead. */
    background: linear-gradient(90deg,
        transparent 0%,
        transparent 22%,
        rgba(249, 245, 255, 0.18) 34%,
        rgba(249, 245, 255, 0.48) 46%,
        rgba(249, 245, 255, 0.78) 58%,
        rgba(249, 245, 255, 0.95) 70%,
        rgba(249, 245, 255, 1) 80%,
        rgba(249, 245, 255, 1) 100%);
    opacity: var(--pt, 0);
}

.hero-px-stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    pointer-events: none;
}

.hero-px-stage .container {
    width: 100%;
    display: flex;
}

.hero-px-block {
    max-width: 560px;
    pointer-events: auto;
}

/* Panel one fades out as you scroll in ... */
.hero-px-stage-1 {
    opacity: calc(1 - var(--p2, 0) * 1.7);
    transform: translate3d(0, calc(var(--px) * -60px), 0);
}

/* ... and panel two fades in behind it, from the right */
/* copy fades up after the plate has landed */
.hero-px-stage-2 {
    opacity: var(--pt, 0);
    transform: translate3d(0, calc((1 - var(--pt, 0)) * 44px), 0);
}

.hero-px-stage-2 .container {
    justify-content: flex-end;
}

.hero-px-stage-2 .hero-px-block {
    text-align: right;
}

/* ---- Type ---- */
.hero-px-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--primary-dark);
}

.hero-px-eyebrow::before {
    content: '';
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: var(--primary);
}

.hero-px-stage-2 .hero-px-eyebrow {
    flex-direction: row-reverse;
}

/* Panel one shares the frame with the logo mark, so it runs narrower */
.hero-px-stage-1 .hero-px-block {
    max-width: 460px;
}

.hero-px-stage-1 .hero-px-block h1 {
    font-size: clamp(2.3rem, 3.6vw, 3.5rem);
}

.hero-px-block h1,
.hero-px-block h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.6rem, 5.4vw, 4.4rem);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -0.025em;
    color: var(--text);
    margin-bottom: 22px;
}

.hero-px-block p {
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--primary-dark);
    max-width: 44ch;
}

.hero-px-stage-2 .hero-px-block p {
    margin-left: auto;
}

.hero-px-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 34px;
}

.hero-px-stage-2 .hero-px-actions {
    justify-content: flex-end;
}

/* ---- Scroll cue ---- */
.hero-px-cue {
    position: absolute;
    left: 50%;
    bottom: 38px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--primary-dark);
    opacity: calc(1 - var(--px) * 5);
    pointer-events: none;
}

.hero-px-cue span.line {
    width: 1px;
    height: 42px;
    background: linear-gradient(180deg, var(--primary), transparent);
    animation: cueDrop 2s ease-in-out infinite;
}

@keyframes cueDrop {
    0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.5; }
    50%      { transform: scaleY(1);   transform-origin: top; opacity: 1; }
}

/* ---- Responsive ---- */
/* Narrower viewports bring the mark further left, so the copy gives way */
@media (max-width: 1440px) {
    .hero-px-stage-1 .hero-px-block {
        max-width: 400px;
    }
}

@media (max-width: 900px) {
    .hero {
        height: 200vh;
    }

    .hero-px-block,
    .hero-px-stage-2 .hero-px-block {
        max-width: 100%;
        text-align: left;
    }

    .hero-px-stage-2 .container,
    .hero-px-stage-2 .hero-px-actions {
        justify-content: flex-start;
    }

    .hero-px-stage-2 .hero-px-eyebrow {
        flex-direction: row;
    }

    .hero-px-stage-2 .hero-px-block p {
        margin-left: 0;
    }

    /* Right-anchored at this width the mark crops to a sliver, so it
       shrinks to a corner watermark above the copy instead */
    .hero-px-bg-1 {
        background-size: auto 34%;
        background-position: right -10vw top 20%;
        /* Dropping the mask here left the banner's own bottom edge showing as
           a ruled line straight through the illustration's jaw, roughly
           halfway down the phone viewport. The plate now feathers out over
           the band where that edge falls, so the mark dissolves into the
           ground the way it does on desktop. */
        -webkit-mask-image: linear-gradient(180deg,
            #000 0%, #000 28%, rgba(0, 0, 0, 0.35) 35%, transparent 40%);
        mask-image: linear-gradient(180deg,
            #000 0%, #000 28%, rgba(0, 0, 0, 0.35) 35%, transparent 40%);
    }

    /* One flat veil — a directional one can't serve both panels once
       they share the same alignment */
    .hero-px-veil::before {
        background: linear-gradient(180deg,
            rgba(249, 245, 255, 0.88) 0%,
            rgba(249, 245, 255, 0.80) 55%,
            rgba(249, 245, 255, 0.9) 100%);
        opacity: 1;
    }

    .hero-px-veil::after {
        display: none;
    }
}

@media (max-width: 600px) {
    .hero-px-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .hero-px-actions .hero-btn,
    .hero-px-actions .hero-btn-ghost {
        justify-content: center;
        text-align: center;
    }

    .hero-px-cue {
        display: none;
    }
}

/* Collapse the scroll choreography entirely */
@media (prefers-reduced-motion: reduce) {
    .hero {
        height: auto;
    }

    .hero-px-viewport {
        position: static;
        height: auto;
        display: block;
        padding: 72px 0;
    }

    .hero-px-bg {
        inset: 0;
    }

    .hero-px-stage {
        position: relative;
        inset: auto;
        opacity: 1 !important;
        transform: none !important;
        padding: 24px 0;
    }

    .hero-px-veil::before {
        background: linear-gradient(180deg,
            rgba(249, 245, 255, 0.86) 0%,
            rgba(249, 245, 255, 0.78) 50%,
            rgba(249, 245, 255, 0.88) 100%);
        opacity: 1;
    }

    .hero-px-veil::after { display: none; }
    .hero-px-cue          { display: none; }
    .hero-px-bg           { animation: none; }
}


/* ---- Buttons & strip carried over ---- */
/* Same gradient + lift as the navbar's Book Appointment button */
.hero-btn {
    padding: 15px 32px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 14px;
    background: var(--cta-gradient);
    color: #fff;
    box-shadow: 0 14px 28px -14px rgba(126, 90, 158, 0.9);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.3s ease, filter 0.3s ease;
}
/* light sweeps across the face on hover */
.hero-btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.hero-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(115deg,
        transparent 22%, rgba(255, 255, 255, 0.42) 48%, transparent 74%);
    transform: translateX(-115%);
    transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-btn:hover::before,
.hero-btn:focus-visible::before {
    transform: translateX(115%);
}

.hero-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.07);
    box-shadow: 0 20px 36px -16px rgba(126, 90, 158, 0.95);
}

.hero-btn:focus-visible,
.hero-btn-ghost:focus-visible {
    outline: 2px solid var(--primary-dark);
    outline-offset: 3px;
}
.hero-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 15px 24px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid rgba(182, 146, 214, 0.16);
    box-shadow: 0 10px 24px -18px rgba(61, 26, 92, 0.5);
    color: var(--primary-dark);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.3s ease, box-shadow 0.3s ease;
}
.hero-btn-ghost i {
    font-size: 0.78rem;
    transition: transform 0.3s ease;
}
/* brand gradient wipes in from the left */
.hero-btn-ghost {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.hero-btn-ghost::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-btn-ghost:hover::before,
.hero-btn-ghost:focus-visible::before {
    transform: scaleX(1);
}

.hero-btn-ghost:hover {
    transform: translateY(-2px);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 16px 30px -18px rgba(61, 26, 92, 0.6);
}
.hero-btn-ghost:hover i {
    transform: translateX(4px);
}
/* ---- Trust strip, closing the hero ---- */
@media (max-width: 600px) {
    .hero-btn,
    .hero-btn-ghost {
        justify-content: center;
        text-align: center;
    }

}

@media (prefers-reduced-motion: reduce) {
    .hero-btn:hover,
    .hero-btn-ghost:hover {
        transform: none;
    }
}

.collage-success {
    background: #F0E8F8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.success-inner {
    text-align: center;
    padding: 15px;
}

.success-icon {
    width: 44px;
    height: 44px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    color: white;
    font-size: 1.2rem;
}

.success-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
    margin-bottom: 4px;
}

.success-date {
    font-size: 0.75rem;
    color: var(--text-light);
}

.collage-stats {
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.stats-inner {
    text-align: center;
    color: white;
    padding: 15px;
}

.stats-icon {
    font-size: 1.6rem;
    margin-bottom: 8px;
}

.stats-number {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 2px;
}

.stats-label {
    font-size: 0.75rem;
    opacity: 0.85;
}

.collage-secondary {
    display: none;
}

.secondary-placeholder {
    background: linear-gradient(160deg, #D4C3E8, #B692D6);
}

/* ---- Hero Animation ---- */
.anim-fade-up,
.anim-fade-left {
    opacity: 0;
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.anim-fade-up {
    transform: translateY(30px);
}

.anim-fade-left {
    transform: translateX(40px);
}

.hero-content .anim-fade-up:nth-child(1) { transition-delay: 0.1s; }
.hero-content .anim-fade-up:nth-child(2) { transition-delay: 0.25s; }
.hero-content .anim-fade-up:nth-child(3) { transition-delay: 0.4s; }
.hero-content .anim-fade-up:nth-child(4) { transition-delay: 0.55s; }
.hero-content .anim-fade-up:nth-child(5) { transition-delay: 0.7s; }

.anim-fade-left { transition-delay: 0.3s; }

.hero.loaded .anim-fade-up,
.hero.loaded .anim-fade-left {
    opacity: 1;
    transform: translateY(0) translateX(0);
}

/* ===================== SECTIONS ===================== */
section {
    padding: 80px 0;
}

.section-title {
    text-align: center;
    margin-bottom: 50px;
}

/* Same treatment as the hero h1 (.hero-px-block h1): Playfair Display 600 at
   -0.025em, so the section headings and the hero read as one voice. */
.section-title h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.025em;
    /* --primary sat at 2.42:1 on --bg, below even the 3:1 large-text floor */
    color: var(--primary-deep);
    margin-bottom: 10px;
}

.section-title p {
    color: var(--text-light);
    max-width: 600px;
    margin: 0 auto;
}

/* ===================== PAGE BANNER ===================== */
/* ---- Breadcrumb page top (contact.html, book-appointment.html) ----
   The thinnest header these pages can have: a trail, a small heading, a
   hairline, then straight into content. No band and no colour block —
   the old purple .page-banner put white text at 2.6:1 and left the header
   logo sitting on purple at 2.1:1. */
.page-bar {
    margin-bottom: 26px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
}

.page-crumb {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
    font-size: 0.75rem;
}

.page-crumb a {
    display: inline-flex;
    align-items: center;
    color: var(--text-light);
    text-decoration: none;
    transition: color 0.25s var(--ease-out);
}

/* At 0.75rem the trail link was an 18px-tall target. The crumb keeps its
   small type — it is secondary by design — but the link itself takes a
   thumb-sized box on touch, and the row absorbs the extra height. */
@media (max-width: 600px) {
    .page-crumb {
        margin-bottom: 2px;
    }

    .page-crumb a {
        min-height: 44px;
    }
}

.page-crumb a:hover {
    color: var(--primary-dark);
}

.page-crumb [aria-current] {
    color: var(--text);
    font-weight: 500;
}

.page-crumb i {
    font-size: 0.58rem;
    color: var(--text-light);
    opacity: 0.6;
}

.page-bar h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--text);
    margin: 0 0 6px;
}

.page-bar p {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-light);
    margin: 0;
}

/* .appointment-section is white while the body is lavender, so it runs up
   behind the transparent sticky header instead of leaving a band above it. */
.appointment-section {
    margin-top: calc(var(--header-h, 80px) * -1);
    padding-top: calc(var(--header-h, 80px) + 30px);
}

@media (max-width: 768px) {
    .appointment-section {
        padding-top: calc(var(--header-h, 80px) + 22px);
    }

    .page-bar {
        margin-bottom: 20px;
        padding-bottom: 14px;
    }
}

/* ---- Booking steps ----
   Not a live progress tracker — the form is one page, so these name its
   three stages. Step 3 also states up front that submitting hands off to
   WhatsApp, which is currently only discovered at the end. */
.page-steps {
    display: flex;
    justify-content: center;
    list-style: none;
    max-width: 620px;
    margin: 0 auto 34px;
    padding: 0;
}

.page-step {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

/* Connector runs between the bubbles, not under them */
.page-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 17px;
    left: calc(50% + 25px);
    right: calc(-50% + 25px);
    height: 2px;
    border-radius: 2px;
    background: var(--border);
}

.page-step-num {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cta-gradient);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    flex-shrink: 0;
}

.page-step-label {
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-light);
}

/* The strip rides at the top of the form card, so the page header itself
   stays a single thin bar. */
.appointment-form .page-steps {
    max-width: none;
    margin: 0 0 26px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
}

@media (max-width: 768px) {
    .page-head {
        padding-top: calc(var(--header-h, 80px) + 34px);
    }
}

@media (max-width: 600px) {
    .page-steps {
        max-width: none;
    }

    .page-step-num {
        width: 30px;
        height: 30px;
        font-size: 0.78rem;
    }

    .page-step:not(:last-child)::after {
        top: 15px;
        left: calc(50% + 22px);
        right: calc(-50% + 22px);
    }

    .page-step-label {
        font-size: 0.74rem;
    }
}

/* ---- Bannerless page intro (doctors.html) ----
   No colour band and no artwork: the page opens straight into type on the
   section's own white, which runs up behind the transparent sticky header
   rather than leaving a strip of --bg above it. */
.doctors-section.doctors-page {
    margin-top: calc(var(--header-h, 80px) * -1);
    padding-top: calc(var(--header-h, 80px) + 58px);
}

.page-intro {
    max-width: 640px;
    margin: 0 auto 34px;
    text-align: center;
}

.page-intro h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 4vw, 2.9rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--text);
    margin-bottom: 12px;
}

.page-intro p {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text-light);
}

@media (max-width: 768px) {
    .doctors-section.doctors-page {
        padding-top: calc(var(--header-h, 80px) + 34px);
    }

    .page-intro {
        margin-bottom: 22px;
    }

    .page-intro p {
        font-size: 0.95rem;
    }
}

/* ===================== CTA ===================== */
.cta-section {
    background: var(--surface);
    text-align: center;
    padding: 60px 0;
}

/* The closing CTA on services.html and contact.html was set in Poppins 700 at
   2rem in --primary — a different family, weight and colour from every other
   heading on the site, and the largest, loudest thing on either page. It reads
   as a section heading now, in the same voice as the rest. */
.cta-section h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--primary-deep);
    margin-bottom: 12px;
}

.cta-section p {
    color: var(--text-light);
    margin-bottom: 25px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* ===================== SERVICES LIST ===================== */
.services-grid {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    margin: 0 auto;
}

.service-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 24px 0;
    border-bottom: 1px solid var(--border);
    cursor: default;
    transition: background 0.2s ease;
}

.service-card:last-child {
    border-bottom: none;
}

.service-card:hover {
    background: rgba(182, 146, 214, 0.03);
}

.service-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
}

.service-card h3 {
    font-size: 1.05rem;
    margin-bottom: 6px;
    color: var(--text);
    font-weight: 600;
}

.service-card p {
    font-size: 0.88rem;
    color: var(--text-light);
    line-height: 1.6;
    margin: 0;
}

/* ===================== SERVICES CATEGORY PAGE ===================== */
.services-category-page {
    padding: 50px 0 70px;
    background: linear-gradient(180deg, var(--bg) 0%, rgba(216, 196, 238, 0.08) 100%);
    min-height: 60vh;
}

.services-category-page .container {
    max-width: 820px;
}

.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-light);
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 30px;
    /* 39px tall, five short of a comfortable touch target. */
    min-height: 44px;
    padding: 10px 22px;
    margin-bottom: 36px;
    transition: all 0.6s var(--ease-out);
}

.back-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    transform: translateX(-6px);
    box-shadow: 0 6px 25px rgba(182, 146, 214, 0.35);
}

.back-btn i {
    font-size: 0.75rem;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.back-btn:hover i {
    transform: translateX(-5px);
}

/* The icon and the text block were centred against each other, so on a header
   this tall the icon floated somewhere beside the subtitle while the title
   started 82px to its right — three different left edges between the tile,
   the heading and the rule underneath. A grid pins the icon to the first row
   and lets the stats span the full width, so everything lines up on two
   columns instead of drifting. */
.category-header {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    column-gap: 22px;
    margin-bottom: 48px;
    padding-bottom: 32px;
    border-bottom: 2px solid var(--border);
}

.category-header .category-icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    /* Optical, not mathematical: nudged so the tile's centre sits on the
       title's x-height rather than on its box. */
    margin-top: 4px;
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    box-shadow: 0 8px 25px rgba(182, 146, 214, 0.3);
    transition: all 1s var(--ease-out);
}

.category-header:hover .category-icon {
    transform: scale(1.15) rotate(-8deg);
    box-shadow: 0 16px 45px rgba(182, 146, 214, 0.5);
}

.category-header h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.category-header p {
    font-size: 1rem;
    color: var(--text-light);
    margin: 0;
    line-height: 1.5;
    font-weight: 400;
}

.category-header .trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 6px 16px;
    background: linear-gradient(135deg, rgba(182, 146, 214, 0.08), rgba(182, 146, 214, 0.15));
    border: 1px solid rgba(182, 146, 214, 0.2);
    border-radius: 100px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary-dark);
    letter-spacing: 0.03em;
}

.category-header .trust-badge i {
    /* Was an emerald green — the one non-violet colour in the header, on a
       badge whose pill and text are both violet. */
    color: var(--accent-ink);
    font-size: 0.72rem;
}

/* Spans both grid columns so it starts on the same left edge as the icon and
   the rule below, rather than 82px in. It carried its own border-top, which
   put two hairlines 70px apart bracketing a single line of text; the header's
   own bottom border already separates this from what follows, so the row just
   needs air above it. */
.category-header .category-stats {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-top: 26px;
}

.category-header .category-stats span {
    font-size: 0.82rem;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 6px;
}

.category-header .category-stats span i {
    color: var(--accent-ink);
    font-size: 0.85rem;
}

.services-list {
    display: flex;
    flex-direction: column;
}

.service-row {
    display: flex;
    align-items: flex-start;
    gap: 26px;
    padding: 32px 0;
    border-bottom: 1px solid var(--border);
    transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
}

.service-row:last-child {
    border-bottom: none;
}

/* Same side-tab habit as .treatment-card, thinned to a hairline for the same
   reason. */
.service-row::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--primary);
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
    transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out);
}

.service-row:hover::before {
    opacity: 1;
    transform: scaleY(1);
}

/* Nudging padding-left reflowed the whole row on every hover; the translate
   is the same 14px of movement without the layout pass. */
.service-row {
    transition: transform 0.4s var(--ease-out);
}

.service-row:hover {
    transform: translateX(14px);
}

.service-row-icon {
    width: 140px;
    height: 120px;
    min-width: 140px;
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2.4rem;
    transition: all 0.9s var(--ease-out);
    box-shadow: 0 6px 20px rgba(182, 146, 214, 0.2);
    position: relative;
    overflow: hidden;
}

.service-row-icon::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.2), transparent);
    transform: rotate(45deg) translateX(-150%);
    transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.service-row:hover .service-row-icon {
    transform: scale(1.06) rotate(-3deg);
    box-shadow: 0 14px 40px rgba(182, 146, 214, 0.4);
}

.service-row:hover .service-row-icon::after {
    transform: rotate(45deg) translateX(150%);
}

.service-row-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 4px;
}

.service-row-info h3 {
    font-size: 1.15rem;
    color: var(--text);
    margin-bottom: 10px;
    font-weight: 600;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateX(0);
}

.service-row:hover .service-row-info h3 {
    color: var(--primary-dark);
    transform: translateX(6px);
}

.service-row-info p {
    font-size: 0.92rem;
    color: var(--text-light);
    line-height: 1.7;
    margin: 0;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.service-row:hover .service-row-info p {
    color: var(--text);
}

/* ===================== TREATMENT CARDS (Enhanced) ===================== */
.treatment-cards-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.treatment-card {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    /* The icon and the button used to centre against a three-or-four-line
       description, so the icon floated somewhere beside the second line while
       the title sat above it. Both now start level with the title. */
    align-items: start;
    gap: 24px;
    padding: 28px 30px;
    background: var(--surface);
    border-radius: 20px;
    border: 1px solid rgba(182, 146, 214, 0.1);
    box-shadow: 0 4px 24px rgba(126, 90, 158, 0.06);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.4s ease,
                border-color 0.3s ease;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}

/* This used to grow a 4px coloured stripe up the left edge on hover. The card
   already lifts, deepens its shadow and warms its border — the stripe was a
   fourth signal for one event, and a heavy side-tab is the most recognisable
   tell of a generated interface. A hairline is enough to trace the edge. */
.treatment-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--primary);
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
    transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out);
}

.treatment-card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 20px 60px rgba(126, 90, 158, 0.18);
    border-color: var(--primary-light);
    transition: transform 0.9s var(--ease-out),
                box-shadow 0.9s var(--ease-out),
                border-color 0.9s ease;
}

.treatment-card:hover::before {
    opacity: 1;
    transform: scaleY(1);
}

.treatment-card-icon {
    width: 64px;
    height: 64px;
    min-width: 64px;
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    transition: transform 0.9s var(--ease-out),
                box-shadow 0.9s var(--ease-out);
    box-shadow: 0 4px 16px rgba(182, 146, 214, 0.2);
}

.treatment-card:hover .treatment-card-icon {
    transform: scale(1.12) rotate(-6deg);
    box-shadow: 0 12px 36px rgba(182, 146, 214, 0.4);
}

.treatment-card-info {
    flex: 1;
    min-width: 0;
}

.treatment-card-info h3 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
    line-height: 1.3;
    transition: color 0.7s ease, transform 0.7s ease;
}

.treatment-card:hover .treatment-card-info h3 {
    color: var(--primary-dark);
    transform: translateX(4px);
}

.treatment-card-info p {
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.65;
    margin: 0;
    transition: color 0.7s ease;
}

.treatment-card:hover .treatment-card-info p {
    color: var(--text);
}

.treatment-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--cta-gradient);
    color: #fff !important;
    padding: 10px 22px;
    border-radius: 25px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    /* Sits on the title's line rather than floating against the middle of the
       description, now that the card aligns its rows to the top. */
    margin-top: 2px;
    transition: transform 0.7s var(--ease-out),
                box-shadow 0.7s ease,
                filter 0.7s ease;
    box-shadow: 0 4px 16px rgba(126, 90, 158, 0.2);
}

.treatment-card-cta i {
    font-size: 0.7rem;
    transition: transform 0.7s ease;
}

.treatment-card-cta:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 10px 30px rgba(126, 90, 158, 0.35);
    filter: brightness(1.12);
    color: #fff !important;
}

.treatment-card-cta:hover i {
    transform: translateX(5px);
}

/* ===================== TRUST STRIP ===================== */
.trust-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    background: var(--surface);
    border-radius: 20px;
    padding: 32px 28px;
    border: 1px solid var(--border);
    box-shadow: 0 4px 20px rgba(126, 90, 158, 0.05);
    margin-top: 50px;
}

.trust-item {
    text-align: center;
    padding: 16px 8px;
    border-radius: 14px;
    transition: background 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.trust-item:hover {
    background: rgba(182, 146, 214, 0.04);
    transform: translateY(-6px);
}

.trust-item-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    font-size: 1.3rem;
    color: white;
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.trust-item:hover .trust-item-icon {
    transform: scale(1.15) rotate(-5deg);
}

.trust-item-icon.trust-purple {
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
}

.trust-item-icon.trust-green {
    background: linear-gradient(135deg, #6ee7b7, #10b981);
}

.trust-item-icon.trust-blue {
    background: linear-gradient(135deg, #93c5fd, #3b82f6);
}

.trust-item-icon.trust-amber {
    background: linear-gradient(135deg, #fcd34d, #f59e0b);
}

.trust-item h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
}

.trust-item p {
    font-size: 0.78rem;
    color: var(--text-light);
    line-height: 1.5;
    margin: 0;
}

/* ===================== DOCTORS PREVIEW ===================== */
.doctors-preview {
    margin-top: 60px;
}

.doctors-preview .section-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-ink);
    margin-bottom: 8px;
}

.doctors-preview h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: var(--text);
    margin-bottom: 24px;
    font-weight: 600;
}

.doctors-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.doctor-preview-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px;
    background: var(--surface);
    border-radius: 16px;
    border: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.8s ease,
                border-color 0.8s ease;
}

.doctor-preview-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(126, 90, 158, 0.14);
    border-color: var(--primary-light);
}

.doctor-preview-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.4rem;
    flex-shrink: 0;
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.doctor-preview-card:hover .doctor-preview-avatar {
    transform: scale(1.1);
}

.doctor-preview-info h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}

.doctor-preview-info .role {
    font-size: 0.78rem;
    color: var(--primary-dark);
    font-weight: 500;
    margin-bottom: 6px;
}

.doctor-preview-info .view-link {
    font-size: 0.78rem;
    color: var(--accent-ink);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: gap 0.8s ease;
}

.doctor-preview-card:hover .view-link {
    gap: 8px;
}

/* ===================== FAQ SECTION ===================== */
.faq-section {
    margin-top: 60px;
}

.faq-section .section-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-ink);
    margin-bottom: 8px;
}

.faq-section h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: var(--text);
    margin-bottom: 24px;
    font-weight: 600;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faq-item {
    background: var(--surface);
    border-radius: 14px;
    border: 1px solid var(--border);
    overflow: hidden;
    transition: box-shadow 0.8s ease, border-color 0.8s ease;
}

.faq-item:hover {
    box-shadow: 0 8px 28px rgba(126, 90, 158, 0.08);
}

.faq-item.active {
    border-color: var(--primary-light);
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    transition: color 0.7s ease;
}

.faq-question:hover {
    color: var(--primary-dark);
}

.faq-question .faq-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    background: rgba(182, 146, 214, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--accent-ink);
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), background 0.7s ease;
}

.faq-item.active .faq-question .faq-icon {
    transform: rotate(180deg);
    background: var(--primary);
    color: #fff;
}

/* Was a max-height guess of 200px, which does two things wrong: an answer
   longer than the guess is silently clipped, and the eased travel is spent on
   whatever slack is left over, so short answers snap open and long ones crawl.
   Collapsing a grid row from 0fr to 1fr animates the content's own height, so
   every answer opens at the same speed and none can be cut off. */
.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.55s var(--ease-out);
}

.faq-item.active .faq-answer {
    grid-template-rows: 1fr;
}

.faq-answer-inner {
    overflow: hidden;
    padding: 0 24px;
}

.faq-item.active .faq-answer-inner {
    padding-bottom: 20px;
}

.faq-answer p {
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.7;
    margin: 0;
}

/* Firefox before 129 and Safari before 17.4 cannot interpolate
   grid-template-rows. There the answer simply appears — no animation, but
   never a clipped or missing answer. */
@supports not (grid-template-rows: 1fr) {
    .faq-answer { display: block; height: 0; overflow: hidden; }
    .faq-item.active .faq-answer { height: auto; }
}

/* ===================== BOOKING CTA SECTION ===================== */
.booking-cta-section {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    color: #fff;
    border-radius: 24px;
    padding: 56px 48px;
    text-align: center;
    margin-top: 60px;
    position: relative;
    overflow: hidden;
}

.booking-cta-section::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -10%;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    pointer-events: none;
}

.booking-cta-section::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -5%;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 50%;
    pointer-events: none;
}

.booking-cta-section h3 {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}

.booking-cta-section p {
    font-size: 1rem;
    opacity: 0.9;
    max-width: 500px;
    margin: 0 auto 28px;
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

.booking-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    color: var(--primary-dark);
    padding: 14px 36px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    position: relative;
    z-index: 1;
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.8s ease;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.booking-cta-btn:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
}

.booking-cta-btn i {
    transition: transform 0.8s ease;
}

.booking-cta-btn:hover i {
    transform: translateX(6px);
}

/* A second, older definition of the whole .reveal-fade system used to sit
   here. Every one of its declarations was overridden by the copy in the
   SCROLL REVEAL section further down — except the bare `opacity: 0`, which
   survived and kept the doctors section hidden regardless of what that
   section decided. One definition now, and it lives with its siblings. */

/* Slow floating animation for icons */
@keyframes slowFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.service-row:hover .service-row-icon {
    animation: slowFloat 3s ease-in-out infinite;
}

/* Slow pulse glow on category icon */
@keyframes slowPulse {
    0%, 100% { box-shadow: 0 8px 25px rgba(182, 146, 214, 0.3); }
    50% { box-shadow: 0 12px 35px rgba(182, 146, 214, 0.5); }
}

.category-header:hover .category-icon {
    animation: slowPulse 2.5s ease-in-out infinite;
}

/* Responsive for Services Category Page */
@media (max-width: 900px) {
    .trust-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    .booking-cta-section {
        padding: 40px 28px;
    }

    .booking-cta-section h3 {
        font-size: 1.6rem;
    }
}

@media (max-width: 600px) {
    /* One column on a phone: the icon sits above the title rather than beside
       it, and the stats keep the full width they already had. */
    .category-header {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        row-gap: 16px;
    }

    .category-header .category-icon {
        margin-top: 0;
    }

    .category-header h2 {
        font-size: 1.7rem;
    }

    .category-header .category-stats {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .service-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 16px;
        padding: 24px 0;
    }
    
    .service-row::before {
        display: none;
    }
    
    .service-row:hover {
        padding-left: 0;
    }
    
    .service-row-icon {
        width: 120px;
        height: 100px;
        font-size: 2rem;
    }

    .treatment-card {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 24px 20px;
        text-align: center;
    }

    .treatment-card-icon {
        margin: 0 auto;
    }

    .treatment-card-cta {
        justify-content: center;
        width: 100%;
    }

    .trust-strip {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        padding: 24px 16px;
    }

    .trust-item {
        padding: 12px 4px;
    }

    .trust-item-icon {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }

    .trust-item h4 {
        font-size: 0.82rem;
    }

    .trust-item p {
        font-size: 0.72rem;
    }

    .doctors-preview h3,
    .faq-section h3 {
        font-size: 1.5rem;
    }

    .booking-cta-section {
        padding: 36px 20px;
        margin-top: 40px;
        border-radius: 18px;
    }

    .booking-cta-section h3 {
        font-size: 1.4rem;
    }

    .booking-cta-section p {
        font-size: 0.9rem;
    }

    .faq-question {
        padding: 16px 18px;
        font-size: 0.88rem;
    }

    .faq-answer {
        padding: 0 18px;
    }

    .faq-item.active .faq-answer {
        padding-bottom: 16px;
    }
}

@media (max-width: 420px) {
    .trust-strip {
        grid-template-columns: 1fr;
    }

    .treatment-card-cta {
        font-size: 0.78rem;
        padding: 9px 18px;
    }
}

    .service-row-icon {
        width: 100px;
        height: 85px;
        font-size: 1.8rem;
    }
}

/* ===================== SCROLL REVEAL =====================
   Every reveal class below parks its element at opacity 0 and waits for JS to
   add .revealed. That means a failed script, a blocked bundle or a browser
   without IntersectionObserver leaves whole sections — the services panels,
   the doctors, the CTA — permanently invisible with no way to reach them.

   The reveal is therefore opt-in: nothing hides until motion.js confirms it is
   running by putting .js-reveal on <html>. Anyone who never gets that far sees
   a plain, complete, static page. Readers who ask for reduced motion get the
   same static page by choice. */
/* The transition is always safe to declare — it only does anything once a
   hidden state exists to move away from. */
.reveal,
.reveal-scale {
    transition: opacity 0.8s var(--ease-out-slow),
                transform 0.8s var(--ease-out-slow);
}

.reveal-fade {
    transition: opacity 1.8s var(--ease-out-slow),
                transform 1.8s var(--ease-out-slow),
                filter 1.8s var(--ease-out-slow);
}

/* The hidden state — the only part that can strand content — is gated on
   both signals: motion.js has run, and the reader has not asked for less
   motion. `:not(.revealed)` means an element that has already arrived never
   re-hides if these rules are re-evaluated. */
@media (prefers-reduced-motion: no-preference) {
    .js-reveal .reveal:not(.revealed) {
        opacity: 0;
        transform: translateY(40px);
    }

    .js-reveal .reveal-scale:not(.revealed) {
        opacity: 0;
        transform: translateY(30px) scale(0.92);
    }

    .js-reveal .reveal-fade:not(.revealed) {
        opacity: 0;
        transform: translateY(50px);
        filter: blur(6px);
    }
}

.reveal-delay-1 { transition-delay: 0.15s; }
.reveal-delay-2 { transition-delay: 0.3s; }
.reveal-delay-3 { transition-delay: 0.45s; }
.reveal-delay-4 { transition-delay: 0.6s; }

.reveal-fade-d1 { transition-delay: 0.2s; }
.reveal-fade-d2 { transition-delay: 0.4s; }
.reveal-fade-d3 { transition-delay: 0.6s; }
.reveal-fade-d4 { transition-delay: 0.8s; }
.reveal-fade-d5 { transition-delay: 1.0s; }
.reveal-fade-d6 { transition-delay: 1.2s; }
.reveal-fade-d7 { transition-delay: 1.4s; }
.reveal-fade-d8 { transition-delay: 1.6s; }
.reveal-fade-d9 { transition-delay: 1.8s; }

/* ===================== FOCUS VISIBLE =====================
   Only a handful of components used to declare a focus ring, which left every
   nav link, footer link, phone link, carousel arrow and the WhatsApp button
   with no visible focus at all — a keyboard user could not tell where they
   were on any page. The ring is declared once, here, for everything focusable,
   and the two-tone outline keeps it visible on the pale lavender ground, on
   white cards and on the violet footer alike. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--accent-ink);
    outline-offset: 3px;
    border-radius: 6px;
}

/* On the violet footer and navbar the dark ring disappears into the ground,
   so those surfaces flip it to white. */
.site-footer :where(a, button):focus-visible,
.navbar .nav-cta:focus-visible,
.wa-float:focus-visible {
    outline-color: #FFFFFF;
    box-shadow: 0 0 0 6px rgba(45, 16, 70, 0.35);
}

/* Components that already own a radius keep it, so the ring traces the shape
   instead of boxing it. */
.flip-card:focus-visible {
    outline-offset: 4px;
    border-radius: 20px;
}

.btn:focus-visible,
.hero-btn:focus-visible,
.hero-btn-ghost:focus-visible,
.doctors-cta-btn:focus-visible,
.back-btn:focus-visible,
.nav-cta:focus-visible,
.wa-float:focus-visible {
    border-radius: 50px;
}

.feature-panel:focus-visible,
.category-tile:focus-visible,
.treatment-card:focus-visible,
.doctor-card-h:focus-visible {
    border-radius: var(--radius-panel);
}

/* ===================== FLIP CARDS (unused) ===================== */
.flip-card {
    perspective: 1000px;
    height: 340px;
    cursor: pointer;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px 25px;
    border: 1px solid var(--border);
}

.flip-card-front {
    background: var(--surface);
    box-shadow: 0 10px 30px var(--shadow);
}

.flip-card-back {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    transform: rotateY(180deg);
    box-shadow: 0 15px 40px rgba(126, 90, 158, 0.3);
}

.flip-icon,
.flip-back-icon {
    width: 70px;
    height: 70px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 18px;
}

.flip-icon {
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    color: white;
}

.flip-back-icon {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.flip-card-front h3,
.flip-card-back h3 {
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.flip-card-front p {
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.5;
    margin-bottom: 15px;
}

.flip-card-back p {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin-bottom: 18px;
}

.flip-hint {
    font-size: 0.75rem;
    color: var(--accent-ink);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0.7;
}

.flip-cta {
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.2);
    padding: 8px 20px;
    border-radius: 25px;
    transition: background 0.3s, transform 0.3s;
}

.flip-card:hover .flip-cta {
    background: rgba(255, 255, 255, 0.35);
    transform: scale(1.05);
}

/* ===================== BLUR REVEAL (Crossfade + Blur Dissolve) ===================== */
/* ---- Slow scroll reveal ----
   Longer and gentler than .blur-reveal, and genuinely triggered by the
   viewport rather than a timer, so the section unfolds as you arrive. */
.reveal-slow {
    transition: opacity 1.5s var(--ease-out-slow),
                filter 1.5s var(--ease-out-slow),
                transform 1.5s var(--ease-out-slow);
}

.blur-reveal {
    transition: opacity 0.8s var(--ease-out-slow),
                filter 0.8s var(--ease-out-slow),
                transform 0.8s var(--ease-out-slow);
}

/* Gated exactly like the .reveal family above: hidden only when the script is
   confirmed running and the reader has not asked for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
    .js-reveal .reveal-slow:not(.revealed) {
        opacity: 0;
        filter: blur(14px);
        transform: translateY(52px) scale(0.985);
        will-change: opacity, transform;
    }

    .js-reveal .blur-reveal:not(.revealed) {
        opacity: 0;
        filter: blur(12px);
        transform: translateY(20px);
    }
}

.reveal-slow[data-reveal-delay="1"] { transition-delay: 0.22s; }
.reveal-slow[data-reveal-delay="2"] { transition-delay: 0.42s; }
.reveal-slow[data-reveal-delay="3"] { transition-delay: 0.62s; }

.blur-d1 { transition-delay: 0.1s; }
.blur-d2 { transition-delay: 0.2s; }
.blur-d3 { transition-delay: 0.3s; }
.blur-d4 { transition-delay: 0.4s; }
.blur-d5 { transition-delay: 0.5s; }
.blur-d6 { transition-delay: 0.6s; }
.blur-d7 { transition-delay: 0.7s; }
.blur-d8 { transition-delay: 0.8s; }
.blur-d9 { transition-delay: 0.9s; }

/* ===================== TWO-CARD TREATMENT GRID ===================== */
.two-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 860px;
    margin: 0 auto 40px;
}

.treatment-main-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 36px 30px;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.4s var(--ease-out),
                box-shadow 0.4s ease,
                border-color 0.3s ease;
    text-decoration: none;
    color: inherit;
    display: block;
}

.treatment-main-card:hover {
    transform: scale(1.04) translateY(-8px);
    box-shadow: 0 24px 50px -12px rgba(126, 90, 158, 0.22);
    border-color: var(--primary-light);
}

.treatment-card-glow {
    position: absolute;
    top: -60px;
    right: -60px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    opacity: 0.1;
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}

.treatment-main-card:hover .treatment-card-glow {
    opacity: 0.18;
    transform: scale(1.2);
}

.neuro-glow { background: var(--primary); }
.ent-glow { background: var(--primary); }

.treatment-main-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.35rem;
    color: var(--text);
    margin-bottom: 10px;
}

.treatment-main-card > p {
    color: var(--text-light);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.treatment-card-doctor {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    margin-bottom: 20px;
    padding: 12px;
    background: var(--bg);
    border-radius: 12px;
}

/* ===================== FEATURE PANELS =====================
   Services block on the homepage. Borrows the geometry of .doctor-card-h —
   a full-height block on the left, text on the right — so the services and
   doctors sections read as one family rather than two experiments. */
.feature-panels {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 980px;
    margin: 0 auto 40px;
}

.feature-panel {
    display: flex;
    align-items: stretch;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    /* .reveal-slow declares its own transition earlier in the file and this
       rule wins on order, so the entrance properties are restated here —
       without them the panel would snap in with no fade and no unblur. */
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.45s ease,
                border-color 0.3s ease,
                opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1),
                filter 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.feature-panel:hover,
.feature-panel:focus-visible {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 24px 50px -12px rgba(126, 90, 158, 0.22);
    border-color: var(--primary-light);
}

.feature-panel:focus-visible {
    outline: 3px solid var(--primary-dark);
    outline-offset: 3px;
}

/* ---- Icon block ---- */
.feature-panel-icon {
    flex: 0 0 132px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.7rem;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.feature-panel-icon.neuro-icon {
    background: linear-gradient(135deg, var(--neuro-from), var(--neuro-to));
}

.feature-panel-icon.ent-icon {
    background: linear-gradient(150deg, var(--ent-from), var(--ent-to));
}

/* Light sweeps across the block once on hover */
.feature-panel-icon::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.14), transparent);
    transform: rotate(45deg) translateX(-150%);
    transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: none;
}

.feature-panel:hover .feature-panel-icon::after {
    transform: rotate(45deg) translateX(150%);
}

/* The glyph breathes, not the block: scaling a rotated block inside
   overflow:hidden pulls its corners in and exposes white wedges. */
.feature-panel-icon i {
    display: block;
    position: relative;
    z-index: 1;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.feature-panel:hover .feature-panel-icon i {
    transform: scale(1.09);
}

/* ---- Content ---- */
.feature-panel-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px 28px;
}

.feature-panel-content h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.35rem;
    line-height: 1.25;
    color: var(--text);
    margin-bottom: 8px;
    transition: color 0.3s ease;
}

.feature-panel:hover .feature-panel-content h3 {
    color: var(--primary-dark);
}

/* Two lines is the floor, so the shorter blurb reserves the same space as
   the longer one and both CTAs land on one baseline regardless of copy. */
.feature-panel-content > p {
    color: var(--text-light);
    font-size: 0.9rem;
    line-height: 1.6;
    min-height: 3.2em; /* 2 lines × 1.6 line-height */
    margin-bottom: 18px;
}

/* --bg on --surface is a 2% step, so the chip needs the hairline to read as
   a container at all — same treatment as .expand-doctor-strip. */
.feature-panel-doctor {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 18px;
}

.feature-doctor-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
    flex-shrink: 0;
}

.feature-doctor-name {
    display: block;
    font-weight: 600;
    color: var(--text);
    font-size: 0.88rem;
}

.feature-doctor-role {
    display: block;
    font-size: 0.75rem;
    color: var(--text-light);
}

/* Arrow trails the label, matching the CTAs on the category pages, so the
   widening gap and the arrow shift both travel the same direction. */
.feature-panel-cta {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    color: var(--primary-dark);
    font-size: 0.85rem;
    font-weight: 600;
    transition: gap 0.3s ease, color 0.3s ease;
}

.feature-panel:hover .feature-panel-cta {
    gap: 12px;
    color: var(--primary-deep);
}

.feature-panel-cta i {
    font-size: 0.75rem;
    transition: transform 0.3s ease;
}

.feature-panel:hover .feature-panel-cta i {
    transform: translateX(4px);
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .feature-panels {
        grid-template-columns: 1fr;
        max-width: 520px;
    }
}

@media (max-width: 600px) {
    .feature-panel {
        flex-direction: column;
    }

    .feature-panel-icon {
        flex: 0 0 118px;
        width: 100%;
        font-size: 2.3rem;
    }

    .feature-panel-content {
        padding: 24px 22px;
        text-align: center;
    }

    .feature-panel-doctor {
        justify-content: center;
        text-align: left;
    }

    .feature-panel-cta {
        align-self: center;
    }
}

/* Hover still answers with colour, border and shadow — it just stops moving. */
@media (prefers-reduced-motion: reduce) {
    .feature-panel,
    .feature-panel-content h3,
    .feature-panel-icon i,
    .feature-panel-icon::after,
    .feature-panel-cta,
    .feature-panel-cta i {
        transition: none;
    }

    .feature-panel:hover,
    .feature-panel:focus-visible,
    .feature-panel:hover .feature-panel-icon i,
    .feature-panel:hover .feature-panel-cta i {
        transform: none;
    }

    .feature-panel:hover .feature-panel-icon::after {
        transform: rotate(45deg) translateX(-150%);
    }
}

/* ===================== CATEGORY TILES ===================== */
.category-tiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 900px;
    margin: 0 auto 40px;
}

.category-tile {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    cursor: pointer;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: transform 0.4s var(--ease-out),
                box-shadow 0.4s ease;
    border: 2px solid transparent;
    text-decoration: none;
    color: inherit;
}

.category-tile:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 30px 60px -15px rgba(126, 90, 158, 0.3);
    border-color: var(--primary-light);
}

.tile-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* Mesh gradients, with each category on its own hue so the two tiles
   read as a pair rather than duplicates */
/* Photo tiles. The scrim is layered above the illustration: nearly clear
   at the top so the artwork reads, opaque at the bottom so the white
   heading, description and count stay legible over light artwork. */
.neuro-tile-bg,
.ent-tile-bg {
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
}

/* The scrim used to reach 0.60 only at the halfway mark, but the heading sits
   at roughly 38% — so the title was landing on about 0.35 of cover over the
   brightest part of the artwork. The dark half now starts where the text
   starts, which is what lets the shadows below stay light. */
.neuro-tile-bg {
    background-image:
        linear-gradient(180deg,
            rgba(48, 27, 74, 0.08) 0%,
            rgba(48, 27, 74, 0.22) 20%,
            rgba(45, 25, 70, 0.66) 36%,
            rgba(39, 22, 62, 0.88) 54%,
            rgba(32, 18, 52, 0.96) 100%),
        url('images/Services/neurology-card.png');
    background-position: center, center 38%;
}

.ent-tile-bg {
    background-image:
        linear-gradient(180deg,
            rgba(48, 27, 74, 0.08) 0%,
            rgba(48, 27, 74, 0.22) 20%,
            rgba(45, 25, 70, 0.66) 36%,
            rgba(39, 22, 62, 0.88) 54%,
            rgba(32, 18, 52, 0.96) 100%),
        url('images/Services/ent-card.png');
    /* Framed on the clinician and patient rather than the room */
    background-position: center, 62% center;
}

/* Fill the tile so the icon can pin to the top and the footer to the
   bottom — otherwise a two-line description shunts everything down and
   the two tiles stop lining up */
.tile-content {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 34px 30px 30px;
    color: white;
}

.tile-content h3 {
    margin-top: auto;
}

.tile-icon {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    transition: transform 0.4s var(--ease-out);
}

.category-tile:hover .tile-icon {
    transform: scale(1.1) rotate(-5deg);
    background: rgba(255, 255, 255, 0.3);
}


.tile-content h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    margin-bottom: 10px;
    font-weight: 700;
    text-shadow: 0 2px 12px rgba(30, 14, 50, 0.55);
}

.tile-content p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.6;
    margin-bottom: 20px;
    min-height: 3.04em;      /* reserve two lines so both footers align */
    text-shadow: 0 1px 10px rgba(30, 14, 50, 0.5);
}

.tile-count {
    text-shadow: 0 1px 10px rgba(30, 14, 50, 0.5);
}

.tile-peek {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.tile-count {
    font-size: 0.85rem;
    font-weight: 500;
    opacity: 0.9;
}

.tile-arrow {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, background 0.3s ease;
}

.category-tile:hover .tile-arrow {
    transform: translateX(5px);
    background: rgba(255, 255, 255, 0.35);
}

/* ===================== CATEGORY DETAILS ===================== */
.category-details {
    display: none;
    /* scrollIntoView() lands this at the very top, where the sticky
       header would otherwise cover the back button */
    scroll-margin-top: 150px;
    animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.category-details.active {
    display: block;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.details-header {
    margin-bottom: 36px;
}

/* Page banner is gone from this page, so the section opens the page */
#services {
    padding-top: 56px;
}

/* Text chip above the title, same recipe as the hero eyebrow */
.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px 10px 15px;
    margin-bottom: 22px;
    background: var(--surface);
    border: 1px solid rgba(182, 146, 214, 0.16);
    border-radius: 100px;
    color: var(--primary-dark);
    font-family: inherit;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 8px 20px -16px rgba(61, 26, 92, 0.5);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.3s ease, box-shadow 0.3s ease;
}

.back-btn i {
    font-size: 0.7rem;
}

.back-btn:hover {
    transform: translateX(-3px);
    border-color: var(--primary-light);
    box-shadow: 0 14px 28px -18px rgba(61, 26, 92, 0.6);
}

.back-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

.back-btn i {
    transition: transform 0.3s ease;
}

.back-btn:hover i {
    transform: translateX(-5px);
}

.details-title {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Icon aligns to the heading line only, not the heading + subtitle block */
.details-title-row {
    display: flex;
    align-items: center;
    gap: 18px;
}

.details-title h3 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.9rem, 3.4vw, 2.7rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0;
}

.details-title p {
    color: var(--text-light);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 56ch;
}

/* ---- Treatment list: horizontal rows ----
   The 3-up grid gave wildly uneven card heights because the copy
   lengths differ. Rows read better and left-align the text. Scoped to
   .details-grid so .service-card elsewhere is untouched. */
.details-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 980px;
    margin: 0 auto;
}

.details-grid .service-card {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    column-gap: 30px;
    row-gap: 10px;
    padding: 18px;
    border-radius: 26px;
    text-align: left;
    background: var(--surface);
    border: 1px solid rgba(182, 146, 214, 0.16);
    box-shadow: 0 14px 34px -24px rgba(61, 26, 92, 0.5);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.45s ease, border-color 0.35s ease;
}

.details-grid .service-card:hover {
    transform: translateY(-4px);
    border-color: var(--primary-light);
    box-shadow: 0 26px 50px -28px rgba(61, 26, 92, 0.6);
}

/* The small round icon becomes the media panel on the left */
.details-grid .service-icon {
    grid-area: 1 / 1 / 3 / 2;
    width: 100%;
    height: 100%;
    min-height: 152px;
    margin: 0;
    border-radius: 20px;
    font-size: 2.5rem;
    background: linear-gradient(150deg, #F2ECFD 0%, #CBBBF0 54%, #B692D6 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.details-grid .service-card:hover .service-icon {
    transform: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.details-grid .service-card h3 {
    grid-area: 1 / 2 / 2 / 3;
    align-self: end;
    font-family: 'Playfair Display', serif;
    font-size: 1.42rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.012em;
    color: var(--text);
    margin: 0;
    padding-right: 12px;
}

.details-grid .service-card p {
    grid-area: 2 / 2 / 3 / 3;
    align-self: start;
    font-size: 0.92rem;
    line-height: 1.72;
    color: var(--text-light);
    max-width: 64ch;
    padding-right: 12px;
}


@media (max-width: 992px) {
    .category-tiles {
        grid-template-columns: 1fr;
        max-width: 500px;
    }

    .category-tile {
        min-height: 280px;
    }

}

@media (max-width: 768px) {
    .details-grid .service-card {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        row-gap: 14px;
        padding: 14px;
        border-radius: 22px;
    }

    .details-grid .service-icon {
        grid-area: 1 / 1 / 2 / 2;
        min-height: 128px;
        font-size: 2.1rem;
    }

    .details-grid .service-card h3 {
        grid-area: 2 / 1 / 3 / 2;
        font-size: 1.22rem;
        padding-right: 0;
    }

    .details-grid .service-card p {
        grid-area: 3 / 1 / 4 / 2;
        padding-right: 0;
    }

    .category-tile {
        min-height: 250px;
    }

    .tile-content h3 {
        font-size: 1.4rem;
    }


    /* Title wraps to two lines here, so pin the icon to the first one
       instead of letting it centre against the whole block */
    .details-title-row {
        align-items: flex-start;
        gap: 14px;
    }

    .details-title-row .category-icon {
        margin-top: 4px;
    }
}

.treatment-doctor-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
    flex-shrink: 0;
}

.treatment-doctor-name {
    display: block;
    font-weight: 600;
    color: var(--text);
    font-size: 0.88rem;
}

.treatment-doctor-role {
    display: block;
    font-size: 0.75rem;
    color: var(--text-light);
}

/* Old treatment-card-cta removed — new styles in SERVICES CATEGORY PAGE section */

/* ---- Expand Doctor Strip ---- */
.expand-doctor-strip {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 24px;
    margin: 0 24px 20px;
    background: var(--bg);
    border-radius: 14px;
    border: 1px solid var(--border);
}

.expand-doctor-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.expand-doctor-name {
    display: block;
    font-weight: 600;
    color: var(--text);
    font-size: 0.95rem;
}

.expand-doctor-role {
    display: block;
    font-size: 0.8rem;
    color: var(--text-light);
}

@media (max-width: 768px) {
    .two-card-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
    }
}

/* ===================== SERVICES SEARCH ===================== */
.services-search {
    max-width: 500px;
    margin: 0 auto 40px;
    display: none;
}

@media (max-width: 768px) {
    .services-search {
        display: block;
    }
}

.search-input-wrap {
    display: flex;
    align-items: center;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: 50px;
    padding: 6px 20px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.search-input-wrap:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(182, 146, 214, 0.12);
}

.search-icon {
    color: var(--text-light);
    font-size: 0.95rem;
    margin-right: 12px;
}

.search-input-wrap input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Poppins', sans-serif;
    font-size: 0.92rem;
    color: var(--text);
    padding: 10px 0;
}

.search-input-wrap input::placeholder {
    /* Was --text-light at 0.7 alpha, which fell under 4.5:1. */
    color: #6F5A8C;
    opacity: 1;
}

/* The input has no border of its own, so focus is shown on the wrapper —
   otherwise `outline: none` above leaves the search field with no keyboard
   affordance at all. */
.search-input-wrap:focus-within {
    border-color: var(--accent-ink);
    box-shadow: 0 0 0 3px rgba(126, 90, 158, 0.28);
}

.search-clear {
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 0.9rem;
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    display: none;
    transition: color 0.2s, background 0.2s;
}

.search-clear.visible {
    display: flex;
}

.search-clear:hover {
    color: var(--accent-ink);
    background: var(--bg);
}

.service-card.hidden {
    display: none;
}

.service-category.hidden {
    display: none;
}

.no-results-msg {
    text-align: center;
    color: var(--text-light);
    font-size: 0.95rem;
    padding: 40px 20px;
    display: none;
}

.no-results-msg.visible {
    display: block;
}

/* ===================== SERVICE CATEGORY GROUPS =====================
   A second .category-header definition used to live here, belonging to a
   .service-category grouping that no page ever rendered. Being later in the
   file it silently overrode the real header 2000 lines above — which is why
   that header's own layout rules had no effect. The stale copy is gone, along
   with the .category-header h3/p rules that came with it; the live definition
   in SERVICES CATEGORY PAGE is now the only one. The icon classes below stay:
   index.html and services.html both use them. */
.category-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.neuro-icon {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
}

.ent-icon {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
}


.service-category .services-grid {
    grid-template-columns: repeat(4, 1fr);
    max-width: 100%;
    margin: 0;
}

/* ===================== VIEW ALL TREATMENTS BUTTON ===================== */
.services-cta {
    text-align: center;
    margin-top: 40px;
}

.view-all-treatments-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--cta-gradient);
    color: white;
    padding: 14px 36px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: transform 0.3s var(--ease-out),
                box-shadow 0.3s,
                background 0.3s;
    cursor: pointer;
    border: none;
}

.view-all-treatments-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 12px 35px rgba(126, 90, 158, 0.35);
}

.view-all-treatments-btn i {
    transition: transform 0.3s;
}

.view-all-treatments-btn:hover i {
    transform: translateX(5px);
}

/* ===================== SERVICE EXPAND PANEL ===================== */
.service-expand-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

.service-expand-overlay.show {
    display: flex;
}

.service-expand-panel {
    background: var(--surface);
    border-radius: 24px;
    max-width: 600px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
    position: relative;
    animation: expandIn 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.service-expand-panel::-webkit-scrollbar {
    display: none;
}

@keyframes expandIn {
    from {
        opacity: 0;
        transform: scale(0.85) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.expand-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background 0.3s, transform 0.3s;
}

.expand-close:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: rotate(90deg);
}

.expand-header {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 28px 30px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    border-radius: 24px 24px 0 0;
}

.expand-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
}

.expand-header h2 {
    font-size: 1.5rem;
    margin-bottom: 3px;
}

.expand-header p {
    font-size: 0.88rem;
    opacity: 0.85;
}

.expand-body {
    padding: 28px 30px 32px;
}

.expand-body h3 {
    font-size: 1.05rem;
    color: var(--accent-ink);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary-light);
}

.expand-services-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 28px;
}

.expand-service-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--bg);
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--border);
    transition: transform 0.25s, box-shadow 0.25s;
}

.expand-service-item:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 15px var(--shadow);
}

.expand-service-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.expand-service-item h4 {
    font-size: 0.92rem;
    margin-bottom: 2px;
    color: var(--text);
}

.expand-service-item p {
    font-size: 0.8rem;
    color: var(--text-light);
    line-height: 1.45;
}

/* View All Treatments Button */
.expand-view-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--cta-gradient);
    color: white;
    padding: 14px 32px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: transform 0.3s var(--ease-out),
                box-shadow 0.3s;
    cursor: pointer;
}

.expand-view-all-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 10px 30px rgba(126, 90, 158, 0.35);
}

.expand-view-all-btn i {
    transition: transform 0.3s;
}

.expand-view-all-btn:hover i {
    transform: translateX(4px);
}

/* ===================== DOCTORS ===================== */
/* flow-root establishes a block formatting context so the last child's
   bottom margin stays inside the section. Without it, padding-bottom:0 lets
   that margin collapse out and the body's --bg shows as a lavender band
   between this section and the white one below. */
.doctors-section {
  background: var(--surface);
  padding-bottom: 0;
  display: flow-root;
}

.doctors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
}

/* ===================== DOCTOR PROFILE SECTIONS =====================
   doctors.html. Alternating full-width rows with no card chrome — the
   photo and a gradient hairline carry the structure instead of a border. */
.doctor-profile-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 50px;
    padding: 50px 0;
}

.doctor-profile-section.doc-section-reversed {
    flex-direction: row-reverse;
}

/* ---- Photo ---- */
.doc-section-photo {
    width: 380px;
    min-width: 380px;
    height: 420px;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.doc-section-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 15%;
    display: block;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Scoped to the photo, not the whole row — otherwise the image moves while
   the cursor is somewhere in the text column, which reads as a glitch. */
.doc-section-photo:hover img {
    transform: scale(1.04);
}

.doc-section-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    box-shadow: inset 0 0 0 1px rgba(182, 146, 214, 0.12);
    pointer-events: none;
}

/* ---- Content ---- */
.doc-section-content {
    flex: 1;
    min-width: 0;
}

.doc-section-role {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary-dark);
    margin-bottom: 10px;
}

.doc-section-role::before {
    content: '';
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--primary);
}

.doc-section-name {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 3.6vw, 2.8rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--text);
    margin-bottom: 16px;
}

.doc-section-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.doc-section-meta span {
    font-size: 0.88rem;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --primary sits at 2.6:1 on white and reads as faded next to 6:1 text */
.doc-section-meta i {
    color: var(--primary-dark);
    font-size: 0.85rem;
}

.doc-section-bio {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-light);
    margin-bottom: 22px;
    max-width: 52ch;
}

.doc-section-specialties {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
}

.doc-specialty-tag {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 100px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-light);
    transition: border-color 0.3s ease, color 0.3s ease;
}

.doc-specialty-tag:hover {
    border-color: var(--primary-light);
    color: var(--primary-dark);
}

/* ---- Actions ----
   .btn carries no border and .btn-outline carries 2px, so side by side the
   outline button sits 4px taller. Give both the same border box. */
.doc-section-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.doc-section-actions .btn {
    font-size: 0.88rem;
    padding: 12px 28px;
    border: 2px solid transparent;
}

/* --primary is 2.6:1 on white — too light to carry a button label */
.doc-section-actions .btn-outline {
    background: transparent;
    border-color: var(--primary-dark);
    color: var(--primary-dark);
}

.doc-section-actions .btn-outline:hover {
    background: var(--primary-dark);
    color: #fff;
}

.doc-section-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
    margin: 0;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .doctor-profile-section,
    .doctor-profile-section.doc-section-reversed {
        flex-direction: column;
        gap: 30px;
        padding: 40px 0;
        text-align: center;
    }

    /* min-width beats max-width, so the 380px floor has to be released or
       the photo ignores its 400px cap and spans the whole container. */
    .doc-section-photo {
        width: 100%;
        min-width: 0;
        max-width: 400px;
        align-self: center;
        height: 350px;
        border-radius: 18px;
    }

    .doc-section-role {
        justify-content: center;
    }

    .doc-section-meta {
        justify-content: center;
    }

    .doc-section-bio {
        margin-left: auto;
        margin-right: auto;
    }

    .doc-section-specialties {
        justify-content: center;
    }

    .doc-section-actions {
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .doctor-profile-section {
        padding: 30px 0;
    }

    .doc-section-photo {
        height: 280px;
        border-radius: 16px;
    }

    .doc-section-name {
        font-size: 1.7rem;
    }

    .doc-section-meta {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }

    .doc-section-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .doc-section-actions .btn {
        text-align: center;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .doc-section-photo img,
    .doc-specialty-tag {
        transition: none;
    }

    .doc-section-photo:hover img {
        transform: none;
    }
}

/* ===================== DOCTORS PROFESSIONAL LAYOUT ===================== */
.doctors-professional-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  max-width: 100%;
  margin: 0 auto 40px;
}

/* ===================== DOCTORS 2-COLUMN GRID ===================== */
.doctors-grid-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 50px;
  margin: 0 auto 40px;
  max-width: 100%;
}

.doctor-card-h {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 28px;
}

.doctor-card-h-photo {
  width: 220px;
  height: 250px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 10px;
}

.doctor-card-h-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.doctor-card-h-info {
  flex: 1;
}

.doctor-card-h-info h3 {
  font-size: 1.3rem;
  color: var(--text);
  margin-bottom: 4px;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
}

.doctor-card-h-info .role {
  font-size: 0.78rem;
  color: var(--primary-dark);
  font-weight: 600;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.doctor-card-h-info > p {
  color: var(--text-light);
  font-size: 0.88rem;
  line-height: 1.65;
  margin-bottom: 16px;
}

.doctor-card-h-info .doctor-meta {
  display: flex;
  gap: 18px;
  margin-bottom: 20px;
}

.doctor-card-h-info .doctor-meta span {
  font-size: 0.82rem;
  color: var(--text-light);
  display: flex;
  align-items: center;
  gap: 6px;
}

.doctor-card-h-info .doctor-meta i {
  color: var(--accent-ink);
  font-size: 0.85rem;
}

.doctor-card-h-info .doctor-actions {
  display: flex;
  gap: 12px;
}

.doctor-card-h-info .doctor-actions .btn {
  font-size: 0.85rem;
  padding: 10px 24px;
  border-radius: 25px;
}

/* Responsive for Doctors 2-Column Grid */
@media (max-width: 900px) {
  .doctors-grid-2col {
    grid-template-columns: 1fr;
    max-width: 550px;
  }
}

@media (max-width: 600px) {
  .doctor-card-h {
    flex-direction: column;
    text-align: center;
  }
  
  .doctor-card-h-photo {
    width: 160px;
    height: 200px;
  }
  
  .doctor-card-h-info .doctor-meta {
    justify-content: center;
  }
  
  .doctor-card-h-info .doctor-actions {
    justify-content: center;
    flex-wrap: wrap;
  }
}

.doctor-card {
    background: var(--bg);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px var(--shadow);
    transition: transform 0.3s, box-shadow 0.3s;
    border: 1px solid var(--border);
    position: relative;
}

.doctor-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px var(--shadow);
}

.doctor-img {
    height: 250px;
    background: linear-gradient(135deg, var(--primary-light), var(--accent));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 4rem;
    position: relative;
    overflow: hidden;
}

.doctor-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.doctor-card:hover .doctor-photo {
    transform: scale(1.05);
}

.doctor-img-container {
    position: relative;
    height: 250px;
    overflow: hidden;
}

.doctor-summary {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(126, 90, 158, 0.85);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
    pointer-events: none;
}

.doctor-img-container:hover .doctor-summary {
    opacity: 1;
}

.doctor-info {
    padding: 25px;
}

.doctor-short-desc {
    color: var(--text-light);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 15px;
}

.doctor-info h3 {
    font-size: 1.3rem;
    margin-bottom: 5px;
}

.doctor-info .role {
    color: var(--accent-ink);
    font-weight: 500;
    font-size: 0.95rem;
    margin-bottom: 12px;
}

.doctor-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border);
    margin-bottom: 20px;
}

.doctor-meta span {
    font-size: 0.8rem;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.doctor-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.doctor-actions .btn {
    font-size: 0.85rem;
    padding: 8px 16px;
}

/* ---- Doctors CTA Block ---- */
.doctors-cta-block {
    text-align: center;
    margin-top: 30px;
    padding: 30px 30px 20px;
    background: var(--surface);
    border-radius: 20px;
    border: 1px solid var(--border);
}

.doctors-cta-block h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    color: var(--text);
    margin-bottom: 8px;
}

.doctors-cta-block p {
    color: var(--text-light);
    font-size: 0.95rem;
    margin-bottom: 24px;
}

.doctors-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--cta-gradient);
    color: #fff;
    padding: 14px 36px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
    transition: transform 0.4s var(--ease-out),
                box-shadow 0.4s ease,
                border-color 0.3s ease;
}

.doctors-cta-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
    transition: left 0.5s ease;
    pointer-events: none;
}

/* No border-color on hover: a --primary-light ring reads as a second colour
   around the pill. The lift and shadow carry the hover on their own. */
.doctors-cta-btn:hover {
    transform: translateY(-4px) scale(1.04);
    box-shadow: 0 16px 40px -8px rgba(126, 90, 158, 0.35);
}

.doctors-cta-btn:hover::before {
    left: 100%;
}

.doctors-cta-btn i {
    transition: transform 0.3s ease;
}

.doctors-cta-btn:hover i {
    transform: translateX(5px);
}

/* ===================== DOCTOR PROFILE ===================== */
.profile-container {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 40px;
    margin-top: 40px;
}

.profile-sidebar {
    background: var(--surface);
    padding: 30px;
    border-radius: 20px;
    border: 1px solid var(--border);
    box-shadow: 0 10px 30px var(--shadow);
    text-align: center;
}

.profile-img-large {
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 20px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 5rem;
}

.profile-details {
    background: var(--surface);
    padding: 40px;
    border-radius: 20px;
    border: 1px solid var(--border);
    box-shadow: 0 10px 30px var(--shadow);
}

.detail-section {
    margin-bottom: 30px;
}

.detail-section h3 {
    color: var(--accent-ink);
    margin-bottom: 15px;
    font-size: 1.4rem;
    border-bottom: 2px solid var(--primary-light);
    display: inline-block;
    padding-bottom: 5px;
}

.detail-section p {
    color: var(--text-light);
    line-height: 1.8;
    font-size: 1rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.credentials-list {
    list-style: none;
    color: var(--text-light);
}

.credentials-list li {
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.credentials-list li i {
    color: var(--accent-ink);
    flex-shrink: 0;
    margin-top: 3px;
}

/* ===================== TESTIMONIALS ===================== */
/* The doctors section ends with padding-bottom 0 and this one began with
   padding-top 0, so on the shared white ground the testimonials heading sat
   59px under the doctors' buttons — closer to the section it was leaving than
   the cards it introduces. Two distinct groups, generously separated. */
.testimonials-section {
    padding-top: 96px;
    padding-bottom: 40px;
    background: var(--surface);
    overflow: hidden;
}

/* ---- Testimonials Grid ---- */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 28px;
}

/* ---- Testimonial Card with Zoom ---- */
.testimonial-card {
    background: var(--bg);
    padding: 30px;
    border-radius: 18px;
    border: 1px solid var(--border);
    position: relative;
    cursor: default;
    transition: transform 0.4s var(--ease-out),
                box-shadow 0.4s ease,
                border-color 0.3s ease;
    overflow: hidden;
}

.testimonial-card::before {
    content: '"';
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 4rem;
    color: var(--primary);
    opacity: 0.12;
    font-family: serif;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.testimonial-card:hover {
    transform: scale(1.04) translateY(-6px);
    box-shadow: 0 20px 45px -12px rgba(126, 90, 158, 0.2);
    border-color: var(--primary-light);
}

.testimonial-card:hover::before {
    opacity: 0.25;
    transform: scale(1.1) translateY(-5px);
}

/* ---- Stars ---- */
.stars {
    color: #f59e0b;
    margin-bottom: 15px;
    display: flex;
    gap: 2px;
}

/* ---- Review Text ---- */
.testimonial-card p {
    color: var(--text-light);
    line-height: 1.7;
    margin-bottom: 20px;
    word-wrap: break-word;
    transition: color 0.3s ease;
}

.testimonial-card:hover p {
    color: var(--text);
}

/* ---- Patient Info ---- */
.patient-name {
    font-weight: 600;
    color: var(--accent-ink);
    transition: letter-spacing 0.3s ease;
}

.testimonial-card:hover .patient-name {
    letter-spacing: 0.3px;
}

.patient-meta {
    font-size: 0.85rem;
    color: var(--text-light);
}

/* Cards used to be chopped flat against both edges of the viewport, which read
   as a clipped layout rather than a continuous belt. Feathering both ends
   makes them enter and leave instead of appearing and vanishing. */
.testi-marquee {
    -webkit-mask-image: linear-gradient(90deg,
        transparent 0%, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg,
        transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.testi-marquee-track {
    display: flex;
    gap: 24px;
    width: max-content;
    animation: marqueeScroll 40s linear infinite;
}

/* A belt that never stops is exactly what reduced-motion asks you not to
   build. It parks, and the cards stay reachable by scrolling the row. */
@media (prefers-reduced-motion: reduce) {
    .testi-marquee {
        overflow-x: auto;
    }

    .testi-marquee-track {
        animation: none;
    }
}

.testi-marquee:hover .testi-marquee-track {
    animation-play-state: paused;
}

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

/* ---- Marquee Card ---- */
.testi-m-card {
    width: 320px;
    min-width: 320px;
    background: var(--bg);
    border-radius: 16px;
    padding: 28px 24px;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    flex-shrink: 0;
}

.testi-m-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px -10px rgba(126, 90, 158, 0.15);
}

.testi-m-stars {
    /* The amber these used to be was the only warm colour on the page and it
       did not match the stars on testimonials.html. One rating colour now,
       drawn from the violet ramp, dark enough to read as filled. */
    color: var(--accent-ink);
    font-size: 0.85rem;
    margin-bottom: 14px;
    display: flex;
    gap: 2px;
}

.testi-m-text {
    color: var(--text-light);
    font-size: 0.88rem;
    line-height: 1.65;
    margin-bottom: 18px;
    flex: 1;
    font-style: italic;
}

.testi-m-patient {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.testi-m-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.9rem;
    /* Each of these carried an inline pastel — pink, blue, green, amber,
       indigo, rose — so ten cards produced a rainbow of six unrelated hues
       running along the bottom of the marquee. The colour never meant
       anything: it did not encode the specialty or anything else. One tint
       for all of them, from the page's own ramp. */
    background: var(--card-bg);
    color: var(--accent-ink);
}

.testi-m-name {
    font-weight: 600;
    color: var(--accent-ink);
    font-size: 0.9rem;
}

.testi-m-meta {
    font-size: 0.75rem;
    color: var(--text-light);
}

/* ===================== TESTIMONIALS SPLIT LAYOUT ===================== */
/* ===================== TESTIMONIALS NEW DESIGN ===================== */
.testi-new {
    padding: 80px 60px;
    background: #fff;
    min-height: 100vh;
}

.testi-new-header {
    max-width: 700px;
    margin-bottom: 50px;
}

.testi-new-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--accent-ink);
    text-transform: uppercase;
    margin-bottom: 16px;
}

.testi-new-heading {
    font-family: 'Playfair Display', serif;
    font-size: 2.8rem;
    color: var(--primary-dark);
    line-height: 1.15;
    margin-bottom: 20px;
    font-weight: 700;
}

.testi-new-subtext {
    color: var(--text-light);
    font-size: 0.95rem;
    line-height: 1.7;
    max-width: 560px;
}

.testi-new-carousel {
    overflow: hidden;
    margin-bottom: 40px;
    position: relative;
    /* The track runs wider than the rail, so the last visible card was being
       sliced off by a hard edge that read as a broken layout rather than as
       "keep scrolling". Feathering the right edge says the same thing the
       arrows do. */
    -webkit-mask-image: linear-gradient(90deg,
        #000 0%, #000 88%, transparent 100%);
    mask-image: linear-gradient(90deg,
        #000 0%, #000 88%, transparent 100%);
}

/* Once the reader reaches the end there is nothing more to hint at, so the
   fade lifts. */
.testi-new-carousel.at-end {
    -webkit-mask-image: none;
    mask-image: none;
}

.testi-new-track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 10px;
}

.testi-new-track::-webkit-scrollbar {
    display: none;
}

.testi-new-card {
    min-width: 320px;
    max-width: 320px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 28px;
    scroll-snap-align: start;
    flex-shrink: 0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testi-new-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(126, 90, 158, 0.12);
}

.testi-new-stars {
    color: var(--accent-ink);
    font-size: 0.85rem;
    margin-bottom: 16px;
    display: flex;
    gap: 2px;
}

.testi-new-card p {
    color: var(--text-light);
    font-size: 0.88rem;
    line-height: 1.65;
    margin-bottom: 20px;
}

.testi-new-author {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.testi-new-author strong {
    color: var(--text);
    font-size: 0.9rem;
}

.testi-new-author span {
    color: var(--text-light);
    font-size: 0.78rem;
}

.testi-new-date {
    font-size: 0.72rem !important;
    /* Was --text-light at opacity 0.7, which computed to 3.28:1. The date is
       secondary, so it stays lighter than the name — but by hue, not by
       fading the ink out from under the reader. */
    color: #6F5A8C;
}

.testi-new-footer {
    display: flex;
    align-items: center;
    gap: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.testi-new-rating-badge {
    display: flex;
    align-items: center;
    gap: 12px;
}

.testi-new-rating-icon {
    width: 36px;
    height: 36px;
    /* Was the Trustpilot green, which read as somebody else's badge dropped
       into our page. This is our own rating, in our own colour. */
    background: var(--accent-ink);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
}

.testi-new-rating-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.testi-new-rating-stars {
    color: var(--accent-ink);
    font-size: 0.8rem;
    display: flex;
    gap: 1px;
}

.testi-new-rating-label {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text);
}

.testi-new-rating-count {
    color: var(--text-light);
    font-size: 0.82rem;
    flex: 1;
}

.testi-new-rating-count strong {
    color: var(--text);
}

.testi-new-nav {
    display: flex;
    gap: 10px;
    margin-left: auto;
}

.testi-nav-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text);
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.testi-nav-btn:hover:not(:disabled) {
    background: var(--accent-ink);
    color: #fff;
    border-color: var(--accent-ink);
    transform: scale(1.05);
}

.testi-nav-btn:active:not(:disabled) {
    transform: scale(0.96);
}

/* An arrow that cannot move should say so rather than silently doing nothing. */
.testi-nav-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .testi-new {
        padding: 60px 30px;
    }

    .testi-new-heading {
        font-size: 2.2rem;
    }

    .testi-new-card {
        min-width: 280px;
        max-width: 280px;
    }
}

@media (max-width: 600px) {
    .testi-new {
        padding: 40px 16px;
    }

    .testi-new-heading {
        font-size: 1.8rem;
    }

    .testi-new-card {
        min-width: 260px;
        max-width: 260px;
    }

    .testi-new-footer {
        flex-wrap: wrap;
        gap: 16px;
    }

    .testi-new-rating-count {
        width: 100%;
        order: 3;
    }

    .testi-new-nav {
        margin-left: 0;
    }
}

/* ===================== APPOINTMENT FORM ===================== */
.appointment-section {
    background: var(--surface);
}

.appointment-form {
    max-width: 700px;
    margin: 0 auto;
    background: var(--bg);
    padding: 40px;
    border-radius: 20px;
    border: 1px solid var(--border);
    box-shadow: 0 10px 30px var(--shadow);
}

.form-group {
    margin-bottom: 25px;
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    /* One height for every control. The selects and the date field used to
       size themselves from the UA stylesheet, so a row of "date next to
       select" sat two different heights with two different baselines. */
    min-height: 50px;
    padding: 12px 15px;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--text);
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    line-height: 1.4;
    transition: border-color 0.25s var(--ease-out),
                box-shadow 0.25s var(--ease-out);
}

/* Drop the platform select chrome and draw one chevron, so the two selects
   match the text inputs beside them instead of looking like a different
   control family. */
.form-group select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 42px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%237E5A9E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px 8px;
    cursor: pointer;
}

.form-group input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.55;
}

.form-group input:hover:not(:disabled),
.form-group select:hover:not(:disabled),
.form-group textarea:hover:not(:disabled) {
    border-color: var(--primary);
}

.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {
    /* The field draws its own ring, so it opts out of the global outline —
       but at a weight a keyboard user can actually find. The old halo was
       0.2-alpha lavender, which vanished against the lavender card. */
    outline: none;
    border-color: var(--accent-ink);
    box-shadow: 0 0 0 3px rgba(126, 90, 158, 0.28);
}

/* Every field carries the halo on plain :focus too — showing it after a click
   as well is a fair trade for never losing it under the keyboard. */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-ink);
    box-shadow: 0 0 0 3px rgba(126, 90, 158, 0.28);
}

/* A date field is three controls in a trench coat: tabbing walks through its
   day, month and year sub-fields, and while focus sits on one of those the
   host input stops matching :focus, so the ring blinked out halfway through
   typing a date. :focus-within on the group holds it for the whole visit. */
.form-group:focus-within input[type="date"],
.form-group:focus-within input[type="time"] {
    border-color: var(--accent-ink);
    box-shadow: 0 0 0 3px rgba(126, 90, 158, 0.28);
}

.form-group input:disabled,
.form-group select:disabled,
.form-group textarea:disabled {
    background: #F4EFFA;
    color: #8B7AA3;
    border-color: #E8DFF3;
    cursor: not-allowed;
}

/* Placeholders were inheriting the browser grey, which measured below 4.5:1
   on the form's lavender card. */
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #6F5A8C;
    opacity: 1;
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.error-msg {
    color: #ef4444;
    font-size: 0.8rem;
    margin-top: 4px;
    display: none;
}

.error-msg.show {
    display: block;
}

.input-error {
    border-color: #ef4444 !important;
}

.success-banner {
    display: none;
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    padding: 15px 20px;
    border-radius: 12px;
    margin-bottom: 25px;
    text-align: center;
    font-weight: 500;
}

.success-banner.show {
    display: block;
}

.working-hours-note {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-top: 6px;
    /* The other hints on this form are upright; italic here made one of two
       adjacent notes look like a different kind of thing. */
    font-style: normal;
}

/* The opening hours ran inline after the label, so "Preferred Time" wrapped to
   two lines while "Preferred Doctor" beside it stayed on one — and the two
   controls under them stopped lining up. On its own line the label row is a
   fixed two lines in both columns, whatever the copy length. */
.hours-label {
    display: block;
    margin-top: 2px;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-light);
}

/* Both columns of a row reserve the same label height, so the fields sit on
   one baseline even when only one of them carries a hint. The label sits at
   the bottom of that reserved space, which keeps it tight to its own field
   and puts the slack above — space belongs above a label, not under it. */
.form-row .form-group > label {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 3.1em;
}

/* ===================== MODAL ===================== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

.modal-overlay.show {
    display: flex;
}

.modal-content {
    background: var(--surface);
    border-radius: 20px;
    max-width: 700px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px rgba(0,0,0,0.3);
    position: relative;
    animation: modalIn 0.3s ease;
}

@keyframes modalIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 1.4rem;
    color: var(--text-light);
    cursor: pointer;
    z-index: 10;
}

.modal-close:hover {
    color: var(--text);
}

/* ===================== MAP ===================== */
.map-wrapper {
    margin-top: 40px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    border: 1px solid rgba(255,255,255,0.2);
}

.map-wrapper iframe {
    width: 100%;
    height: 350px;
    display: block;
}

/* ===================== FOOTER ===================== */
.site-footer {
    background: var(--footer-bg);
    padding: 50px 24px 30px;
}

.footer-card {
    max-width: 1200px;
    margin: 0 auto;
    background: var(--footer-bg);
    border-radius: 24px;
    border: none;
    padding: 50px 50px 0;
    box-shadow: none;
}

.footer-top {
    display: grid;
    grid-template-columns: 1.4fr 2fr;
    gap: 50px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--border);
}

.footer-brand .footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    margin-bottom: 18px;
}

.footer-brand .footer-logo-img {
    height: 60px;
    width: auto;
}

.footer-brand .footer-desc {
    color: #FFFFFF;
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 22px;
    max-width: 340px;
}

.footer-socials {
    display: flex;
    gap: 12px;
}

.footer-socials a {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-socials a:hover {
    background: #FFFFFF;
    color: var(--accent-ink);
    border-color: #FFFFFF;
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(255, 255, 255, 0.25);
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.footer-col h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 18px;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col ul li a {
    display: inline-block;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 0.88rem;
    /* Was a padding-left transition, which reflows the list on every hover.
       Translating the same 4px is the identical movement without the layout
       pass. */
    transition: transform 0.25s var(--ease-out), text-shadow 0.25s var(--ease-out);
}

.footer-col ul li a:hover {
    color: #FFFFFF;
    transform: translateX(4px);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 0;
    flex-wrap: wrap;
    gap: 12px;
}

.footer-copy {
    color: #FFFFFF;
    font-size: 0.82rem;
}

.footer-legal {
    display: flex;
    gap: 24px;
}

.footer-legal a {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 0.82rem;
    transition: color 0.25s;
}

.footer-legal a:hover {
    color: #FFFFFF;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* ---- Footer Responsive ---- */
@media (max-width: 900px) {
    .footer-top {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .footer-card {
        padding: 36px 28px 0;
    }
}

@media (max-width: 600px) {
    .footer-links {
        grid-template-columns: 1fr 1fr;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    .footer-legal {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* On a phone these anchors were 20px tall and stacked 10px apart — a
       column of targets smaller than the fingertip aiming at them. The type
       size is unchanged; the link just claims the space around it. The list
       becomes a grid so the gaps stay even, since a link that wraps to two
       lines is taller than one that does not. */
    .footer-col ul {
        display: grid;
        row-gap: 4px;
    }

    .footer-col ul li {
        margin-bottom: 0;
    }

    .footer-col ul li a,
    .footer-legal a {
        display: flex;
        align-items: center;
        min-height: 44px;
    }

    .footer-legal {
        gap: 8px 24px;
    }
}

/* ===================== CONTACT PAGE ===================== */
.contact-page-section {
    padding: 60px 0;
    background: var(--bg);
}

.contact-page-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.contact-page-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-info-card {
    background: var(--surface);
    padding: 25px;
    border-radius: var(--radius-card);
    border: 1px solid var(--border);
    display: flex;
    align-items: flex-start;
    gap: 20px;
    transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.contact-info-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--elev-2);
    border-color: transparent;
}

.contact-info-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* These four tiles used to carry the brand colours of the services behind
   them — WhatsApp green, Gmail red, Maps blue, an amber for hours — which put
   four unrelated hues in a column down the middle of an otherwise violet page
   and made the channels look like third-party badges rather than our own
   contact details. They are one family now, separated by depth within the
   violet ramp instead of by borrowed colour. The WhatsApp button in the corner
   keeps its green: there it is a recognised affordance, not decoration. */
.contact-info-icon.whatsapp-icon {
    background: linear-gradient(135deg, #C4A5E2, #8A63B0);
}

.contact-info-icon.email-icon {
    background: linear-gradient(135deg, #B692D6, #7E5A9E);
}

.contact-info-icon.address-icon {
    background: linear-gradient(135deg, #A98BD2, #6B4A88);
}

.contact-info-icon.hours-icon {
    background: linear-gradient(135deg, #CDB2E8, #9370BC);
}

.contact-info-details {
    flex: 1;
}

.contact-info-details h3 {
    font-size: 1.1rem;
    margin-bottom: 8px;
    color: var(--text);
}

.contact-info-details p {
    color: var(--text-light);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 4px;
}

.contact-info-details a {
    color: var(--accent-ink);
    text-decoration: none;
    font-size: 0.95rem;
    /* These are the phone numbers and the email address — the things people
       come to this page to tap. Flex with a minimum height gives each one a
       full-size target instead of the 23px line box it had. */
    display: flex;
    align-items: center;
    min-height: 44px;
    transition: color 0.2s var(--ease-out);
}

.contact-info-details a:hover {
    color: var(--accent-ink-strong);
    text-decoration: underline;
}

.contact-note {
    font-size: 0.8rem;
    color: var(--text-light);
    /* Upright, like the form hints — italic was the only slanted text on the
       page and made this one note look like a different kind of thing. */
    font-style: normal;
}

.contact-page-map {
    position: sticky;
    top: 120px;
}

.contact-socials {
    margin-top: 60px;
    text-align: center;
}

.contact-socials h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--primary-deep);
    margin-bottom: 20px;
}

.social-links-row {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.social-link-card {
    width: 55px;
    height: 55px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.3rem;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}

.social-link-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    color: white;
}

.social-link-card.facebook {
    background: linear-gradient(135deg, #1877f2, #0d5bbd);
}

.social-link-card.instagram {
    background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.social-link-card.twitter {
    background: linear-gradient(135deg, #1da1f2, #0d8ecf);
}

.social-link-card.linkedin {
    background: linear-gradient(135deg, #0077b5, #005582);
}

.social-link-card.whatsapp {
    background: linear-gradient(135deg, #25d366, #128c7e);
}

/* ==================================================================
   RESPONSIVE - TABLET
   ================================================================== */
/* ===================== RESPONSIVE - TABLET ===================== */
@media (max-width: 992px) {
    .hero .container {
        gap: 30px;
    }

    .hero-content h2 {
        font-size: 2.4rem;
    }

    .hero-collage {
        max-width: 420px;
        height: 360px;
    }

    .section-title h2 {
        font-size: 1.9rem;
    }

    .profile-container {
        grid-template-columns: 1fr;
    }

    .profile-sidebar {
        max-width: 400px;
        margin: 0 auto;
    }
}

/* ==================================================================
   RESPONSIVE - MOBILE
   ================================================================== */
@media (max-width: 768px) {

    /* Top bar - hide on mobile */
    .top-bar {
        display: none;
    }

    /* Header */

    .navbar {
        position: relative;
        gap: 12px;
        padding: 10px 0;
    }


    /* Desktop pill CTA is replaced by the one inside the dropdown */

    /* Mobile nav menu */


    @keyframes navDropIn {
        from { opacity: 0; transform: translateY(-8px); }
        to   { opacity: 1; transform: translateY(0); }
    }


    /* Booking link becomes a solid pill at the bottom of the dropdown */



    .hero .container {
        flex-direction: column;
        gap: 35px;
        text-align: left;
    }

    .hero-content {
        max-width: 100%;
    }

    .hero-content h2 {
        font-size: 2rem;
    }

    .hero-tagline {
        font-size: 0.7rem;
    }

    .hero-buttons {
        justify-content: flex-start;
    }

    .hero-collage {
        width: 100%;
        max-width: 100%;
        height: 300px;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }

    .collage-main {
        grid-row: 1 / 2;
    }

    .collage-success {
        display: flex;
    }

    .collage-stats {
        display: flex;
    }

    .collage-secondary {
        display: block;
        background: linear-gradient(160deg, #D4C3E8, #B692D6);
    }

    .secondary-placeholder {
        background: linear-gradient(160deg, #D4C3E8, #B692D6);
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        color: white;
        font-size: 0.85rem;
        font-weight: 500;
    }

    .secondary-placeholder i {
        font-size: 2rem;
    }

    .hero-social-proof {
        flex-wrap: wrap;
    }

    /* Sections */
    section {
        padding: 50px 0;
    }

    .section-title {
        margin-bottom: 30px;
    }

    .section-title h2 {
        font-size: 1.6rem;
    }

    .section-title p {
        font-size: 0.9rem;
    }

    /* CTA */
    .cta-section {
        padding: 40px 0;
    }

    .cta-section h2 {
        font-size: 1.4rem;
    }

    .cta-section p {
        font-size: 0.9rem;
    }

    /* Services */
    .services-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .service-category .services-grid {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 16px;
        padding-bottom: 10px;
        scroll-snap-type: x mandatory;
        cursor: grab;
    }

    .service-category .services-grid::-webkit-scrollbar {
        display: none;
    }

    .service-category .services-grid:active {
        cursor: grabbing;
    }

    .service-category .services-grid .service-card {
        min-width: 260px;
        max-width: 260px;
        flex-shrink: 0;
        scroll-snap-align: start;
    }

    /* The 600px rule above already stacks this; flex-direction here was left
       over from when the header was a flexbox and did nothing either way. */

    .flip-card {
        height: 300px;
    }

    .treatment-main-card {
        padding: 28px 22px;
    }

    .treatment-card-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

    .expand-doctor-strip {
        margin: 0 16px 16px;
        padding: 14px 16px;
    }

    .doctors-cta-block h3 {
        font-size: 1.3rem;
    }

    .doctors-cta-block p {
        font-size: 0.88rem;
    }

    .service-expand-panel {
        width: 95%;
        border-radius: 18px;
    }

    .expand-header {
        padding: 22px 22px;
    }

    .expand-header h2 {
        font-size: 1.3rem;
    }

    .expand-body {
        padding: 22px 22px 26px;
    }

    .expand-view-all-btn {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
    }

    /* Doctors */
    .doctors-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .doctor-actions {
        flex-direction: column;
        gap: 10px;
    }

    .doctor-actions .btn {
        width: 100%;
        text-align: center;
        padding: 10px 16px;
    }

    /* Doctor Profile */
    .profile-container {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .profile-sidebar {
        padding: 25px;
    }

    .profile-img-large {
        width: 150px;
        height: 150px;
        font-size: 4rem;
    }

    .profile-details {
        padding: 25px;
    }

    .detail-section h3 {
        font-size: 1.2rem;
    }

    .detail-section p {
        font-size: 0.9rem;
    }

    .profile-cta-btn {
        width: 100%;
        display: block;
        text-align: center;
        padding: 14px 20px;
        font-size: 0.95rem;
    }

    .profile-sidebar .btn {
        font-size: 0.9rem;
    }

    /* Testimonials */
    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .testimonial-card {
        padding: 25px 20px;
    }

    .testi-m-card {
        width: 260px;
        min-width: 260px;
        padding: 22px 20px;
    }

    .testi-m-text {
        font-size: 0.82rem;
    }

    /* Map */
    .map-wrapper iframe {
        height: 250px;
    }

    /* Appointment Form */
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .form-group {
        margin-bottom: 20px;
    }

    .appointment-form {
        padding: 25px 20px;
    }

    .appointment-form .btn {
        width: 100%;
        padding: 14px 20px;
        font-size: 1rem;
    }

    /* One column at this width, so labels no longer need to agree on height. */
    .form-row .form-group > label {
        min-height: 0;
    }

    .modal-content {
        width: 95%;
        border-radius: 16px;
    }

    /* Contact Page */
    .contact-page-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .contact-page-map {
        position: static;
        order: -1;
    }

    .contact-info-card {
        padding: 20px;
    }

    .contact-info-icon {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }

    .social-link-card {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
}

/* ==================================================================
   RESPONSIVE - VERY SMALL SCREENS (320px - 400px)
   ================================================================== */
@media (max-width: 400px) {
    .container {
        padding: 0 15px;
    }

    .hero-content h2 {
        font-size: 1.6rem;
    }

    .hero-tagline {
        font-size: 0.65rem;
        letter-spacing: 2px;
    }

    .hero-collage {
        height: 250px;
        gap: 10px;
    }

    .collage-card {
        border-radius: 14px;
    }

    .success-title {
        font-size: 0.8rem;
    }

    .stats-number {
        font-size: 1.2rem;
    }

    .hero-btn {
        padding: 12px 28px;
        font-size: 0.9rem;
    }

    .avatar-circle {
        width: 36px;
        height: 36px;
    }


    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    .hero-buttons .btn {
        width: 100%;
        max-width: 260px;
    }

    .section-title h2 {
        font-size: 1.4rem;
    }

    .btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }

    .doctor-info {
        padding: 20px 15px;
    }

    .doctor-info h3 {
        font-size: 1.1rem;
    }

    .profile-details {
        padding: 20px 15px;
    }

    .detail-section h3 {
        font-size: 1.1rem;
    }

    .detail-section p {
        font-size: 0.85rem;
        line-height: 1.6;
    }

    .testimonial-card p {
        font-size: 0.85rem;
    }

    .testi-m-card {
        width: 220px;
        min-width: 220px;
        padding: 18px 16px;
    }

    .testi-m-text {
        font-size: 0.78rem;
    }

    .appointment-form {
        padding: 20px 15px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px; /* prevents iOS zoom on focus */
        padding: 10px 12px;
    }
}

/* ==================================================================
   PREFERS-REDUCED-MOTION
   ================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .flip-card-inner {
        transition: none;
    }

    .flip-card:hover .flip-card-inner {
        transform: none;
    }

    .flip-card.expanding,
    .flip-card.returning {
        transition: none;
    }

    .flip-card.expanding.to-overlay {
        opacity: 0;
    }

    .flip-card.returning.to-place {
        opacity: 1;
    }
}

/* ==================================================================
   FLIP CARD - EXPANDED OVERLAY STATE (positioned in place)
   ================================================================== */
.flip-card[aria-expanded="true"] {
    position: relative;
    z-index: auto;
}

.service-expand-overlay.show {
    display: flex;
}

.service-expand-panel:focus {
    outline: none;
}

/* ==================================================================
   FRAMER-MOTION-LIKE ANIMATIONS
   ================================================================== */

/* A family of five spring keyframes — springBounce, springIn, springSlideRight,
   springSlideLeft, springScale — used to live here, each on an overshooting
   curve that pushed past its target and sprang back before settling. Nothing
   in the site ever applied them, and neither did the
   ten stagger-delay classes that existed only to sequence them. They are gone
   rather than re-eased: the rest of the project decelerates into place, and
   nothing here needed to bounce. */

/* ---- Scroll-Triggered Motion ----
   Same gate as the .reveal family: these hide only once motion.js has flagged
   that it is running, and never for a reader who asked for reduced motion.
   Ungated, an unreachable script left the two service tiles — the entire
   content of services.html — invisible. */
.motion-view,
.motion-view-left,
.motion-view-right,
.motion-scale-in {
    transition: opacity 0.6s var(--ease-out-slow),
                transform 0.6s var(--ease-out-slow);
}

@media (prefers-reduced-motion: no-preference) {
    .js-reveal .motion-view:not(.motion-visible) {
        opacity: 0;
        transform: translateY(40px);
    }

    .js-reveal .motion-view-left:not(.motion-visible) {
        opacity: 0;
        transform: translateX(-60px);
    }

    .js-reveal .motion-view-right:not(.motion-visible) {
        opacity: 0;
        transform: translateX(60px);
    }

    .js-reveal .motion-scale-in:not(.motion-visible) {
        opacity: 0;
        transform: scale(0.8);
    }
}

/* ---- Gesture / Hover Effects ---- */
.motion-hover {
    transition: transform 0.3s var(--ease-out),
                box-shadow 0.3s ease;
}

.motion-hover:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px -10px rgba(126, 90, 158, 0.25);
}

.motion-hover:active {
    transform: translateY(-2px) scale(0.98);
    transition-duration: 0.1s;
}

.motion-magnetic {
    transition: transform 0.3s var(--ease-out);
    will-change: transform;
}

/* ---- Parallax Layers ---- */
.parallax-container {
    overflow: hidden;
    position: relative;
}

.parallax-layer {
    will-change: transform;
    transition: transform 0.1s linear;
}

/* ---- Text Reveal Animation ---- */
@keyframes textReveal {
    0% {
        clip-path: inset(0 100% 0 0);
        opacity: 0;
    }
    100% {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

@keyframes textSlideUp {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.motion-text-reveal {
    animation: textReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.motion-text-slide {
    overflow: hidden;
}

.motion-text-slide span {
    display: inline-block;
    animation: textSlideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ---- Card Flip Animation ---- */
@keyframes cardFlipIn {
    0% {
        transform: perspective(1000px) rotateY(-90deg);
        opacity: 0;
    }
    100% {
        transform: perspective(1000px) rotateY(0);
        opacity: 1;
    }
}

.motion-flip-in {
    animation: cardFlipIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ---- Glow Pulse ---- */
@keyframes glowPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(182, 146, 214, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(182, 146, 214, 0.6);
    }
}

.motion-glow {
    animation: glowPulse 2s ease-in-out infinite;
}

/* ---- Float Animation ---- */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
}

.motion-float {
    animation: float 3s ease-in-out infinite;
}

/* ---- Rotate Animation ---- */
@keyframes rotate3d {
    0% {
        transform: perspective(1000px) rotateY(0deg);
    }
    100% {
        transform: perspective(1000px) rotateY(360deg);
    }
}

.motion-rotate {
    animation: rotate3d 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ---- Morphing Shape ---- */
@keyframes morph {
    0%, 100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }
}

.motion-morph {
    animation: morph 8s ease-in-out infinite;
}

/* ---- Ripple Effect ---- */
@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 0.6;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

.ripple-effect {
    position: relative;
    overflow: hidden;
}

.ripple-effect::after {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    transform: scale(0);
    pointer-events: none;
}

.ripple-effect:active::after {
    animation: ripple 0.6s linear;
}

/* ---- Tilt Effect ---- */
.tilt-effect {
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: transform 0.3s ease;
}

/* ---- Page Transition ---- */
@keyframes pageSlideIn {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes pageSlideOut {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(-100%);
        opacity: 0;
    }
}

.page-transition-in {
    animation: pageSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.page-transition-out {
    animation: pageSlideOut 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ===================== WHATSAPP FLOAT =====================
   Fixed contact affordance on every page. z-index sits below the mobile nav
   (999) and the modal overlays (2000) so it can never cover an open dialog.
   Greens match the existing .social-link-card.whatsapp treatment. */
.wa-float {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 990;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #25d366, #128c7e);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 10px 26px -6px rgba(18, 140, 126, 0.55);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.25s ease;
}

.wa-float:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 16px 34px -8px rgba(18, 140, 126, 0.65);
    color: #fff;
}

/* Focus is declared once in the FOCUS VISIBLE section, which gives this a
   white ring and a dark halo — the only combination that stays visible over
   the green pill on the pale lavender ground. */

/* Text label, so the affordance is not carried by the glyph alone */
.wa-float-label {
    position: absolute;
    right: calc(100% + 12px);
    padding: 8px 14px;
    border-radius: 10px;
    background: var(--text);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateX(6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.wa-float:hover .wa-float-label,
.wa-float:focus-visible .wa-float-label {
    opacity: 1;
    transform: translateX(0);
}

@media (max-width: 600px) {
    .wa-float {
        right: 16px;
        bottom: 16px;
        width: 52px;
        height: 52px;
        font-size: 1.45rem;
    }

    .wa-float-label {
        display: none;
    }

    /* The button is fixed, so at the bottom of the page it parks on top of
       whatever the last row of content happens to be — on the doctors cards
       that was the Book Now button. Its footprint is 52px plus a 16px offset,
       so reserving 72px at the end of the document means nothing is ever
       permanently sitting underneath it. */
    .site-footer {
        padding-bottom: 72px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wa-float,
    .wa-float-label {
        transition: none;
    }

    .wa-float:hover {
        transform: none;
    }
}