/* ============================================================
   FEET AHEAD PODIATRY — styles.css
   FIXED: no scroll animations, accessible colours, clean nav
   ============================================================ */

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

:root {
    --blue:        #1A56DB;
    --blue-dark:   #1340B0;
    --blue-deep:   #0B2A78;
    --blue-light:  #EBF2FF;
    --blue-mid:    #C7D9F8;
    --teal:        #0D7A76;
    --teal-light:  #C6EFED;
    --gold:        #D97706;
    --text:        #111827;
    --text-mid:    #374151;
    --text-light:  #4B5563;
    --white:       #FFFFFF;
    --off-white:   #F9FAFB;
    --border:      #D1D5DB;
    --shadow-xs:   0 1px 3px rgba(0,0,0,.08);
    --shadow-sm:   0 4px 12px rgba(26,86,219,.10);
    --shadow-md:   0 8px 28px rgba(26,86,219,.14);
    --shadow-lg:   0 20px 56px rgba(26,86,219,.18);
    --radius:      12px;
    --radius-lg:   20px;
    --max-w:       1260px;
    --hamburger-color: #111827;
    --transition:  0.25s ease;
}

/* ── NO MOTION — respect user preference + our rule ─────── */
*, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.15s !important;
    scroll-behavior: auto !important;
}

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text);
    background: var(--white);
    overflow-x: hidden;
}

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

/* ── TYPOGRAPHY ─────────────────────────────────────────── */
h1, h2, h3 { font-family: 'DM Serif Display', Georgia, serif; line-height: 1.2; color: var(--text); }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.05rem, 2vw, 1.3rem); }
h1 em { font-style: italic; color: #BFD7FF; }
p { color: var(--text-mid); }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible {
    outline: 3px solid #FCD34D;
    outline-offset: 3px;
}

/* ── SKIP LINK ──────────────────────────────────────────── */
.skip-link {
    position: absolute; top: -100px; left: 1rem;
    background: var(--blue); color: white; padding: .5rem 1rem;
    border-radius: .5rem; z-index: 9999; font-weight: 700;
}
.skip-link:focus { top: 1rem; }

/* ── ANNOUNCE BAR ───────────────────────────────────────── */
.announce-bar {
    background: var(--blue-deep);
    color: #F0F6FF;
    font-size: .9rem;
    text-align: center;
    padding: .6rem 1rem;
    font-weight: 600;
}
.announce-bar a { color: #BFD7FF; font-weight: 700; }
.announce-bar a:hover { color: white; text-decoration: underline; }
.announce-cta {
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.5);
    color: white; font-size: .9rem; font-weight: 700;
    padding: .2rem .85rem; border-radius: 4px; cursor: pointer;
    font-family: inherit;
}
.announce-cta:hover { background: rgba(255,255,255,.25); }

/* ── HEADER ─────────────────────────────────────────────── */
header {
    position: sticky; top: 0; z-index: 1000;
    background: #FFFFFF;
    border-bottom: 2px solid var(--border);
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
}
.header-inner {
    max-width: var(--max-w); margin: 0 auto;
    padding: .5rem 1.5rem;
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap;
}
.header-inner > .logo,
.header-inner > .hamburger {
    flex: 0 0 auto;
}
nav {
    flex: 1 1 auto;
    display: flex; gap: 1.75rem; align-items: center;
    flex-wrap: wrap; justify-content: flex-end;
}
.logo { display: flex; align-items: center; }
.logo img {
    height: clamp(3.5rem, 8vw, 9rem);
    width: auto;
    display: block;
    background: transparent !important;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    transition: none;
    max-width: 100%;
}
nav a {
    font-size: .95rem; font-weight: 700; color: #1F2937;
    padding: .35rem .1rem;
    border-bottom: 2px solid transparent;
    min-width: 0;
}
nav a:hover { color: var(--blue); border-bottom-color: var(--blue); text-decoration: none; }
nav a[aria-current="page"] { color: var(--blue); border-bottom-color: var(--blue); }

/* ── BUTTONS ────────────────────────────────────────────── */
.btn-primary {
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--blue);
    color: white; padding: .75rem 1.75rem;
    border: none; border-radius: 8px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700; font-size: .95rem; cursor: pointer;
    text-decoration: none; white-space: nowrap;
}
.btn-primary:hover { background: var(--blue-dark); text-decoration: none; color: white; }
.btn-primary.btn-lg { padding: 1rem 2.25rem; font-size: 1.05rem; border-radius: 10px; }
.btn-primary.btn-full { width: 100%; justify-content: center; padding: 1rem; font-size: 1rem; }

.btn-outline {
    display: inline-flex; align-items: center; gap: .5rem;
    background: transparent; color: white;
    padding: .75rem 1.75rem; border: 2px solid rgba(255,255,255,.85);
    border-radius: 8px; font-family: 'DM Sans', sans-serif;
    font-weight: 700; font-size: .95rem; cursor: pointer;
    text-decoration: none; white-space: nowrap;
}
.btn-outline:hover { background: rgba(255,255,255,.18); border-color: white; text-decoration: none; color: white; }
.btn-outline.btn-lg { padding: 1rem 2.25rem; font-size: 1.05rem; border-radius: 10px; }

.btn-outline-white {
    display: inline-flex; align-items: center; gap: .5rem;
    background: transparent; color: white;
    padding: .85rem 2rem; border: 2px solid rgba(255,255,255,.6);
    border-radius: 8px; font-family: 'DM Sans', sans-serif;
    font-weight: 700; font-size: 1rem; cursor: pointer;
    text-decoration: none; margin-top: 1.5rem;
}
.btn-outline-white:hover { background: rgba(255,255,255,.2); border-color: white; text-decoration: none; color: white; }

.nav-book { padding: .6rem 1.4rem; font-size: .9rem; }

/* ── SOCIAL ─────────────────────────────────────────────── */
.footer-social { display: flex; gap: .75rem; margin-top: 1rem; }
.footer-social a {
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255,255,255,.12);
    color: rgba(255,255,255,.8); font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
}
.footer-social a:hover { background: rgba(255,255,255,.25); color: white; text-decoration: none; }

/* ── HAMBURGER ──────────────────────────────────────────── */
.hamburger {
    display: none; /* shown at smaller breakpoints */
    flex-direction: column; justify-content: space-between;
    width: 30px; height: 22px; background: transparent; border: none; cursor: pointer; padding: 0;
    z-index: 2000;
}
.hamburger span {
    display: block;
    width: 100%;
    height: 3px;
    background: var(--hamburger-color) !important;
    border-radius: 2px;
    opacity: 1 !important;
    visibility: visible !important;
    transition: transform 0.25s ease, opacity 0.15s ease, background-color 0.15s ease;
}
.hamburger.open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ── HERO ───────────────────────────────────────────────── */
.hero {
    background: linear-gradient(150deg, #0B2A78 0%, #1A56DB 60%, #1E40AF 100%);
    color: white; padding: 6rem 1.5rem 5rem;
    text-align: center; position: relative; overflow: hidden;
    min-height: 85vh; display: flex; flex-direction: column;
    justify-content: center; align-items: center;
}
.hero-bg-pattern {
    position: absolute; inset: 0; opacity: .03;
    background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0);
    background-size: 32px 32px;
    pointer-events: none;
}
.hero-content { position: relative; z-index: 5; max-width: 820px; }
.hero-badge {
    display: inline-flex; align-items: center; gap: .5rem;
    background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3);
    color: white; font-size: .8rem; font-weight: 700;
    padding: .4rem 1.1rem; border-radius: 50px;
    margin-bottom: 1.5rem;
    letter-spacing: .05em; text-transform: uppercase;
}
.hero h1 { color: white; margin-bottom: 1.25rem; }
.hero p {
    font-size: clamp(1.05rem, 2vw, 1.2rem);
    color: #E0EAFF; font-weight: 500; max-width: 660px; margin: 0 auto 2.5rem;
    line-height: 1.75;
}
.hero-cta {
    display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
    margin-bottom: 3rem;
}
.hero-trust { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.trust-item {
    display: flex; align-items: center; gap: .5rem;
    background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.2);
    color: white; font-size: .875rem; font-weight: 600;
    padding: .5rem 1.1rem; border-radius: 50px;
}
/* remove scroll cue bounce entirely */
.hero-scroll-cue { display: none; }

/* ── STATS STRIP ────────────────────────────────────────── */
.stats-strip {
    background: var(--white); border-bottom: 1px solid var(--border);
    border-top: 1px solid var(--border); padding: 2rem 1.5rem;
    box-shadow: var(--shadow-xs);
}
.stats-inner {
    max-width: var(--max-w); margin: 0 auto;
    display: flex; justify-content: center; align-items: center;
    flex-wrap: wrap;
}
.stat {
    display: flex; flex-direction: column; align-items: center;
    padding: .75rem 3rem; text-align: center;
}
.stat-num {
    font-family: 'DM Serif Display', serif;
    font-size: 2.4rem; color: var(--blue); line-height: 1; display: inline;
}
.stat-suffix { font-family: 'DM Serif Display', serif; font-size: 2.4rem; color: var(--blue); }
.stat-icon { font-size: 2rem; color: var(--blue); margin-bottom: .25rem; }
.stat-label { font-size: .82rem; font-weight: 700; color: var(--text-light); margin-top: .35rem; text-transform: uppercase; letter-spacing: .06em; }
.stat-divider { width: 1px; height: 48px; background: var(--border); }

/* ── SECTION LAYOUT ─────────────────────────────────────── */
section { padding: 5rem 1.5rem; max-width: var(--max-w); margin: 0 auto; }
.section-header { margin-bottom: 3rem; }
.section-header h2 { margin-bottom: .75rem; }
.section-tag {
    display: inline-block; background: var(--blue-light);
    color: #1340B0; font-size: .8rem; font-weight: 800;
    letter-spacing: .08em; text-transform: uppercase;
    padding: .3rem .9rem; border-radius: 4px; margin-bottom: .75rem;
}
.section-intro {
    font-size: 1.05rem; color: var(--text-light);
    max-width: 740px; line-height: 1.8;
}

/* ── CONDITIONS ─────────────────────────────────────────── */
.conditions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
}
.condition-card {
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: var(--shadow-xs);
    display: flex; flex-direction: column;
}
.condition-card:hover { border-color: var(--blue); box-shadow: var(--shadow-md); }
.condition-img-wrap { position: relative; overflow: hidden; height: 200px; }
.condition-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.condition-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(11,42,120,.8) 0%, transparent 55%);
    display: flex; align-items: flex-end; padding: 1rem;
}
.condition-overlay span { color: white; font-weight: 700; font-size: .9rem; }
.condition-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.condition-body h3 { color: #111827; margin-bottom: .6rem; font-size: 1.15rem; }
.condition-body p { font-size: .95rem; color: #374151; line-height: 1.75; margin-bottom: 1rem; }
.condition-signs { list-style: none; margin-top: auto; }
.condition-signs li {
    font-size: .875rem; color: #374151; font-weight: 500;
    padding: .3rem 0; border-top: 1px solid var(--border);
    display: flex; align-items: flex-start; gap: .5rem;
}
.condition-signs li::before { content: '·'; color: var(--blue); font-weight: 900; font-size: 1.2rem; line-height: 1.4; flex-shrink: 0; }

/* ── WHY SECTION ────────────────────────────────────────── */
.why-section { background: var(--off-white); padding: 5rem 1.5rem; max-width: none; }
.why-inner { max-width: var(--max-w); margin: 0 auto; }
.why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.75rem;
}
.why-card {
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 2rem;
    box-shadow: var(--shadow-xs);
    border-top: 3px solid var(--blue);
}
.why-card:hover { box-shadow: var(--shadow-md); }
.why-icon {
    width: 52px; height: 52px; background: var(--blue-light);
    border-radius: 12px; display: flex; align-items: center; justify-content: center;
    margin-bottom: 1.2rem; font-size: 1.35rem; color: var(--blue);
}
.why-card h3 { color: #111827; margin-bottom: .6rem; font-size: 1.1rem; }
.why-card p { font-size: .95rem; color: #374151; line-height: 1.75; }

/* ── SERVICES ───────────────────────────────────────────── */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 2rem;
}
.service-card {
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: var(--shadow-xs); display: flex; flex-direction: column;
}
.service-card:hover { border-color: var(--blue); box-shadow: var(--shadow-md); }
.service-img-wrap { height: 220px; overflow: hidden; }
.service-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.service-content { padding: 1.75rem; flex: 1; display: flex; flex-direction: column; }
.service-content h3 { color: #0B2A78; margin-bottom: .75rem; }
.service-content p { font-size: .95rem; color: #374151; line-height: 1.8; margin-bottom: .75rem; }
.service-note {
    font-size: .875rem; color: #1F2937; background: var(--blue-light);
    padding: .65rem .9rem; border-radius: 8px; border-left: 3px solid var(--blue);
    margin-top: auto; margin-bottom: 1.25rem; line-height: 1.6;
}
.service-note strong { color: #0B2A78; }
.service-cta {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--blue); border: none; color: white;
    font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: .9rem;
    padding: .65rem 1.25rem; border-radius: 8px; cursor: pointer;
    width: fit-content; margin-top: auto;
}
.service-cta:hover { background: var(--blue-dark); }

/* ── ABOUT / TEAM ───────────────────────────────────────── */
.about-section { background: var(--off-white); padding: 5rem 1.5rem; max-width: none; }
.about-section .section-header { max-width: var(--max-w); margin: 0 auto 3rem; }
.practitioners {
    max-width: var(--max-w); margin: 0 auto;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 2.5rem;
}
.practitioner-card {
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column;
}
.practitioner-card:hover { box-shadow: var(--shadow-lg); }
.practitioner-image { height: 360px; overflow: hidden; }
.practitioner-image img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.practitioner-info { padding: 2rem; flex: 1; display: flex; flex-direction: column; }
.practitioner-title {
    display: inline-block; background: var(--teal-light);
    color: var(--teal); font-size: .78rem; font-weight: 800;
    letter-spacing: .07em; text-transform: uppercase;
    padding: .25rem .75rem; border-radius: 4px; margin-bottom: .6rem;
}
.practitioner-info h3 { color: #111827; margin-bottom: .85rem; }
.practitioner-quals { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1.2rem; }
.practitioner-quals span {
    display: flex; align-items: flex-start; gap: .5rem;
    font-size: .875rem; color: #374151; font-weight: 600;
}
.practitioner-quals span i { color: var(--blue); margin-top: .1rem; flex-shrink: 0; }
.practitioner-info p { font-size: .95rem; color: #374151; line-height: 1.8; margin-bottom: .8rem; }
.practitioner-info .btn-primary { margin-top: auto; }

/* ── TESTIMONIALS ───────────────────────────────────────── */
.testimonials-section { background: #0B2A78; padding: 5rem 1.5rem; max-width: none; }
.testimonials-inner { max-width: var(--max-w); margin: 0 auto; }
.testimonials-section .section-tag { background: rgba(255,255,255,.18); color: #E0EAFF; }
.testimonials-section h2 { color: white; }
.testimonials-section .section-intro { color: #C7D9F8; }
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}
.testimonial {
    background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.15);
    border-radius: var(--radius-lg); padding: 2rem;
}
.testimonial:hover { background: rgba(255,255,255,.15); }
.testimonial-stars { color: #FCD34D; font-size: 1.1rem; margin-bottom: 1rem; letter-spacing: 3px; }
.testimonial p { color: #E0EAFF; font-size: .95rem; font-style: italic; line-height: 1.8; margin-bottom: 1rem; }
.testimonial footer { color: #93C5FD; font-size: .875rem; font-weight: 700; }
.testimonial cite { font-style: normal; }

/* ── BOOKING SECTION ────────────────────────────────────── */
.booking-section {
    background: #0B2A78;
    padding: 5rem 1.5rem; position: relative;
    max-width: none;
}
.booking-content {
    max-width: var(--max-w); margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start;
}
.booking-left h2 { color: white; margin-bottom: 1rem; }
.booking-left p { color: #C7D9F8; font-size: 1.05rem; margin-bottom: .5rem; }
.booking-benefits { list-style: none; margin: 1.5rem 0; }
.booking-benefits li {
    display: flex; align-items: center; gap: .85rem;
    color: #E0EAFF; font-size: 1rem; font-weight: 600;
    padding: .55rem 0; border-bottom: 1px solid rgba(255,255,255,.1);
}
.booking-benefits li i { color: #34D399; font-size: 1.1rem; flex-shrink: 0; }
.booking-form {
    background: white; border-radius: var(--radius-lg);
    padding: 2.5rem; box-shadow: 0 24px 64px rgba(0,0,0,.25);
}
.booking-form h3 { color: #0B2A78; margin-bottom: 1.75rem; text-align: center; font-size: 1.3rem; }

/* ── FORM ELEMENTS ──────────────────────────────────────── */
.form-group { margin-bottom: 1.25rem; }
.form-group label {
    display: block; margin-bottom: .45rem;
    font-weight: 700; font-size: .875rem; color: #111827;
}
.form-group input, .form-group select, .form-group textarea {
    width: 100%; padding: .85rem 1rem;
    border: 2px solid var(--border); border-radius: 8px;
    font-family: 'DM Sans', sans-serif; font-size: .95rem;
    color: #111827; background: var(--off-white);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none; border-color: var(--blue);
    box-shadow: 0 0 0 3px var(--blue-light); background: white;
}
.form-group textarea { resize: vertical; min-height: 80px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.booking-whatsapp-note {
    font-size: .875rem; color: #374151; font-weight: 600;
    margin-bottom: .75rem; display: flex; align-items: center; gap: .4rem;
}
.booking-whatsapp-note i { color: #16A34A; font-size: 1rem; }
.success-message {
    display: none; background: #ECFDF5; color: #065F46;
    border: 1px solid #6EE7B7; padding: 1rem; border-radius: 8px;
    margin-bottom: 1rem; font-weight: 700; font-size: .9rem;
}
.success-message.show { display: block; }

/* ── CONTACT / LOCATION ─────────────────────────────────── */
.location-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start;
}
.location-info h3 { color: #0B2A78; margin-bottom: 1.5rem; }
.contact-item {
    display: flex; gap: 1rem; margin-bottom: 1.25rem;
    padding: 1.2rem 1.5rem; background: var(--off-white);
    border: 1px solid var(--border); border-radius: var(--radius);
    align-items: flex-start;
}
.contact-item:hover { border-color: var(--blue); }
.contact-icon {
    width: 40px; height: 40px; background: var(--blue-light);
    border-radius: 10px; display: flex; align-items: center;
    justify-content: center; color: var(--blue); flex-shrink: 0;
    font-size: 1rem; margin-top: .1rem;
}
.contact-item strong { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: #4B5563; margin-bottom: .2rem; }
.contact-item span, .contact-item a { font-size: .95rem; color: #1F2937; font-weight: 600; line-height: 1.6; }
.contact-item a:hover { color: var(--blue); }
.map-placeholder { border-radius: var(--radius-lg); overflow: hidden; height: 440px; box-shadow: var(--shadow-md); }
.map-placeholder iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ── FAQ ────────────────────────────────────────────────── */
.faq-grid { max-width: 900px; }
.faq-item {
    border: 1px solid var(--border); border-radius: var(--radius);
    margin-bottom: 1rem; overflow: hidden; background: var(--white);
    box-shadow: var(--shadow-xs);
}
.faq-question {
    width: 100%; display: flex; justify-content: space-between; align-items: center;
    padding: 1.25rem 1.75rem; cursor: pointer; font-weight: 700;
    font-size: .975rem; color: #111827; background: var(--off-white);
    border: none; font-family: 'DM Sans', sans-serif; text-align: left;
    gap: 1rem;
}
.faq-question:hover { background: var(--blue-light); color: var(--blue); }
.faq-item.active .faq-question { background: var(--blue-light); color: #0B2A78; }
.faq-toggle { color: var(--blue); font-size: .9rem; flex-shrink: 0; }
.faq-item.active .faq-toggle { transform: rotate(180deg); }
.faq-answer {
    padding: 1.5rem 1.75rem; color: #1F2937; font-size: .975rem;
    line-height: 1.8; border-top: 2px solid var(--blue-mid); background: white;
}
.faq-answer[hidden] { display: none; }

/* ── FOOTER ─────────────────────────────────────────────── */
footer {
    background: #060D24;
    color: white; padding: 4rem 1.5rem 1.5rem;
}
.footer-top {
    max-width: var(--max-w); margin: 0 auto;
    display: grid; grid-template-columns: 1fr 2fr;
    gap: 4rem; padding-bottom: 3rem;
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-brand img { height: 80px; width: auto; margin-bottom: 1.2rem; opacity: .9; 
background-color: white;
border-radius: 12px;}
.footer-brand p { color: rgba(255,255,255,.65); font-size: .9rem; line-height: 1.8; max-width: 300px; margin-bottom: 1.5rem; }
.footer-contact-quick { display: flex; flex-direction: column; gap: .6rem; }
.footer-contact-quick a {
    display: inline-flex; align-items: center; gap: .5rem;
    color: rgba(255,255,255,.75); font-size: .9rem; font-weight: 600;
}
.footer-contact-quick a:hover { color: white; text-decoration: none; }
.footer-contact-quick a i { color: #5EEAD4; font-size: 1rem; }
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.footer-section h4 { color: white; font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1.2rem; font-family: 'DM Sans', sans-serif; }
.footer-section a {
    display: block; color: rgba(255,255,255,.6); font-size: .9rem;
    margin-bottom: .65rem; font-weight: 500;
}
.footer-section a:hover { color: white; text-decoration: none; }
.footer-bottom {
    max-width: var(--max-w); margin: 1.5rem auto 0;
    text-align: center; color: rgba(255,255,255,.4); font-size: .8rem; line-height: 1.9;
}
.footer-bottom a { color: rgba(255,255,255,.5); }
.footer-bottom a:hover { color: rgba(255,255,255,.85); text-decoration: none; }

/* ── WHATSAPP FAB ───────────────────────────────────────── */
.whatsapp-fab {
    position: fixed; bottom: 1.75rem; right: 1.75rem; z-index: 900;
    width: 58px; height: 58px; background: #16A34A;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 1.75rem; color: white;
    box-shadow: 0 6px 20px rgba(22,163,74,.4);
    text-decoration: none;
}
.whatsapp-fab:hover { background: #15803D; color: white; text-decoration: none; }
.whatsapp-tooltip {
    position: absolute; right: calc(100% + .75rem);
    background: #111827; color: white; font-size: .8rem; font-weight: 700;
    padding: .4rem .9rem; border-radius: 6px; white-space: nowrap;
    opacity: 0; pointer-events: none;
}
.whatsapp-fab:hover .whatsapp-tooltip { opacity: 1; }

/* ── MODAL ──────────────────────────────────────────────── */
.modal {
    display: none; position: fixed; inset: 0; z-index: 2000;
    background: rgba(0,0,0,.7);
}
.modal-content {
    background: white; border-radius: var(--radius-lg);
    margin: 4% auto; padding: 2.5rem;
    max-width: 560px; max-height: 90vh; overflow-y: auto;
    position: relative; box-shadow: 0 30px 80px rgba(0,0,0,.35);
}
.modal-close {
    position: absolute; top: 1rem; right: 1rem;
    width: 36px; height: 36px; background: var(--off-white);
    border: 1px solid var(--border); border-radius: 50%; cursor: pointer;
    font-size: 1.4rem; color: #374151; line-height: 1;
    display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.modal-close:hover { background: #FEE2E2; color: #DC2626; }
.booking-modal-title { color: #0B2A78; margin-bottom: 1.5rem; text-align: center; font-size: 1.3rem; }
.booking-modal-submit { width: 100%; justify-content: center; padding: 1rem; }

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 1024px) {
    .booking-content, .location-grid { gap: 2.5rem; }
    .footer-top { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 1024px) {
    nav {
        display: none; flex-direction: column; gap: 0;
        position: absolute; top: 100%; left: 0; right: 0;
        background: white; border-top: 2px solid var(--border);
        box-shadow: var(--shadow-md); padding: .5rem 0; z-index: 999;
    }
    nav.open { display: flex; }
    nav a {
        padding: .9rem 1.75rem; font-size: 1rem; width: 100%;
        border-bottom: 1px solid var(--border); border-radius: 0;
    }
    nav a:hover { background: var(--blue-light); text-decoration: none; }
    nav .nav-book { margin: .75rem 1.75rem; width: calc(100% - 3.5rem); justify-content: center; }
    .hamburger { display: flex; }
    .booking-content { grid-template-columns: 1fr; gap: 2rem; }
    .location-grid { grid-template-columns: 1fr; }
    .stat { padding: .75rem 1.75rem; }
}

@media (max-width: 640px) {
    .hero { padding: 4rem 1.25rem 4.5rem; min-height: auto; }
    .hero-trust { flex-direction: column; align-items: center; }
    .trust-item { width: 100%; max-width: 280px; justify-content: center; }
    .hero-cta { flex-direction: column; align-items: center; }
    .hero-cta .btn-primary, .hero-cta .btn-outline { width: 100%; max-width: 300px; justify-content: center; }
    .stats-inner { flex-direction: column; }
    .stat-divider { width: 80%; height: 1px; }
    .form-row { grid-template-columns: 1fr; }
    .conditions-grid, .services-grid, .practitioners { grid-template-columns: 1fr; }
    .booking-form { padding: 1.75rem 1.25rem; }
    .modal-content { margin: 5% .75rem; padding: 1.75rem 1.25rem; max-height: 88vh; }
    .footer-links { grid-template-columns: 1fr 1fr; }
    section { padding: 3.5rem 1.25rem; }
}