/* ==========================================================================
   Devdaya design system  (Bootstrap 5.3 + golden ratio)
   --------------------------------------------------------------------------
   Rules (same as car-group / car-fleet):
   - Spacing only --s0 … --s7 (Fibonacci), text only --fs-*, radius --r-*.
   - Line height 1.618 for text, 1.272 for headings / buttons / figures.
   - Two columns 61.8 % / 38.2 %, images 1.618 : 1.
   - Logo = 61.8 % of the header height.
   - Accessibility first: touch targets ≥ 44 px, inputs ≥ 16 px, AA contrast.
   Breakpoints: 1200 (full menu), 992 (top bar), 900, 600, 377.
   ========================================================================== */

/* ---------- Fonts (self-hosted, no Google requests; Noto = Hindi / Gujarati) ---------- */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin-ext-wght-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/montserrat-latin-wght-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/montserrat-latin-ext-wght-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Noto Sans Devanagari';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/noto-sans-devanagari-devanagari-wght-normal.woff2') format('woff2');
    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
@font-face {
    font-family: 'Noto Sans Gujarati';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/noto-sans-gujarati-gujarati-wght-normal.woff2') format('woff2');
    unicode-range: U+0951-0952, U+0964-0965, U+0A80-0AFF, U+200C-200D, U+20B9, U+25CC, U+A830-A839;
}

/* ---------- Tokens ---------- */
:root {
    /* Golden ratio */
    --phi: 1.618;
    --phi-inv: .618;
    --s0: 3px;  --s1: 5px;  --s2: 8px;  --s3: 13px;
    --s4: 21px; --s5: 34px; --s6: 55px; --s7: 89px;
    --fs-13: 13px; --fs-16: 16px; --fs-21: 21px; --fs-26: 26px; --fs-34: 34px; --fs-42: 42px; --fs-55: 55px;
    --lh: 1.618;
    --lh-tight: 1.272;
    --r-sm: 8px; --radius: 13px; --radius-lg: 21px; --r-pill: 999px;
    --touch: 44px;

    /* Devdaya colours (from the logo) */
    --saffron: #FFC046;        /* menu bar / highlights */
    --saffron-600: #F5A623;
    --orange: #E2741A;         /* logo ring */
    --red: #D94B38;            /* accent words */
    --brown: #8F3218;          /* logo shield */
    --brown-900: #3A1A0E;      /* footer, top bar, headings */
    --cream: #FFF8EE;          /* soft section background */
    --cream-200: #FDEFD9;
    --ink: #2B1D16;            /* headings */
    --text: #4F443C;           /* body text  (≈ 9.6 : 1 on white) */
    --muted: #6E625A;          /* small text (≈ 5.8 : 1 on white) */
    --line: #EFE4D6;
    --white: #FFFFFF;
    --green-wa: #25D366;

    --shadow-sm: 0 2px 8px rgba(58, 26, 14, .06);
    --shadow: 0 8px 21px rgba(58, 26, 14, .08);
    --shadow-lg: 0 21px 55px rgba(58, 26, 14, .14);

    --font-head: 'Montserrat', 'Noto Sans Devanagari', 'Noto Sans Gujarati', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body: 'Inter', 'Noto Sans Devanagari', 'Noto Sans Gujarati', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --header-h: 89px;
    --container-max: 1260px;
    --ease: cubic-bezier(.22, .61, .36, 1);

    /* Bootstrap 5 variables */
    --bs-body-font-family: var(--font-body);
    --bs-body-color: var(--text);
    --bs-link-color-rgb: 226, 116, 26;
    --bs-border-radius: var(--radius);
}
@media (max-width: 1199.98px) { :root { --header-h: 72px; } }

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--s4)); }
body {
    font-family: var(--font-body);
    font-size: var(--fs-16);
    line-height: var(--lh);
    color: var(--text);
    background: var(--white);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); color: var(--ink); line-height: var(--lh-tight); letter-spacing: -.01em; }
p { line-height: var(--lh); }
a { color: var(--orange); }
a:hover { color: var(--brown); }
img { max-width: 100%; }
::selection { background: var(--saffron); color: var(--brown-900); }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: var(--r-sm); }

.skip-link {
    position: absolute; left: var(--s3); top: -100px; z-index: 2000;
    padding: var(--s2) var(--s3); border-radius: var(--r-sm);
    background: var(--brown-900); color: var(--white); font-weight: 600;
}
.skip-link:focus { top: var(--s3); color: var(--white); }

.container-dd { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--s4); }
@media (max-width: 377px) { .container-dd { padding-inline: var(--s3); } }

/* ---------- Buttons ---------- */
.btn-dd {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
    min-height: var(--touch);
    padding: var(--s2) var(--s4);
    border: 2px solid transparent; border-radius: var(--radius);
    font: 700 var(--fs-16)/var(--lh-tight) var(--font-head);
    text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s, color .2s, border-color .2s;
}
.btn-dd:hover { transform: translateY(-2px); }
.btn-dd:active { transform: translateY(0); }
.btn-dd .bi { font-size: 1.15em; line-height: 1; }

.btn-dd-primary { background: var(--saffron); color: var(--brown-900); box-shadow: 0 8px 21px rgba(245, 166, 35, .35); }
.btn-dd-primary:hover { background: var(--saffron-600); color: var(--brown-900); box-shadow: 0 13px 34px rgba(245, 166, 35, .45); }
.btn-dd-dark { background: var(--brown-900); color: var(--white); }
.btn-dd-dark:hover { background: var(--brown); color: var(--white); }
.btn-dd-outline { background: transparent; border-color: currentColor; color: var(--brown-900); }
.btn-dd-outline:hover { background: var(--brown-900); border-color: var(--brown-900); color: var(--white); }
.btn-dd-wa { background: var(--green-wa); color: #053D1E; }
.btn-dd-wa:hover { background: #1EBE5A; color: #053D1E; }
.btn-dd-block { width: 100%; }

/* subtle heartbeat on the donate heart */
.btn-dd .bi-heart-fill { animation: dd-beat 1.618s var(--ease) infinite; transform-origin: center; }
@keyframes dd-beat { 0%, 60%, 100% { transform: scale(1); } 15% { transform: scale(1.2); } 30% { transform: scale(1); } 45% { transform: scale(1.12); } }

/* ==========================================================================
   HEADER
   ========================================================================== */

/* ---- Top bar (desktop) ---- */
.topbar {
    background: var(--brown-900);
    color: rgba(255, 255, 255, .86);
    font-size: var(--fs-13);
    line-height: var(--lh-tight);
}
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 40px; }
.topbar a { color: rgba(255, 255, 255, .86); text-decoration: none; }
.topbar a:hover { color: var(--saffron); }
.topbar-contact { display: flex; align-items: center; gap: var(--s4); margin: 0; padding: 0; list-style: none; }
.topbar-contact li { display: flex; align-items: center; gap: var(--s2); }
.topbar-contact .bi { color: var(--saffron); }
.topbar-right { display: flex; align-items: center; gap: var(--s4); }
.topbar-tagline { color: rgba(255, 255, 255, .7); font-style: italic; }

.social-mini { display: flex; gap: var(--s1); }
.social-mini a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(255, 255, 255, .08); font-size: 14px;
    transition: background-color .2s, color .2s;
}
.social-mini a:hover { background: var(--saffron); color: var(--brown-900); }

/* Language switcher (Google Translate) */
.lang-switch { position: relative; display: inline-flex; align-items: center; }
.lang-switch .bi { position: absolute; left: 10px; pointer-events: none; font-size: 14px; }
.lang-switch select {
    appearance: none; -webkit-appearance: none;
    height: 30px; padding: 0 28px 0 30px;
    border: 1px solid rgba(255, 255, 255, .25); border-radius: var(--r-pill);
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23FFC046' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 11px center;
    color: inherit; font: 500 var(--fs-13) var(--font-body); cursor: pointer;
}
.lang-switch select option { color: var(--ink); }
.topbar .lang-switch .bi { color: var(--saffron); }

/* ---- Main header ---- */
.site-header {
    position: sticky; top: 0; z-index: 1030;
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid var(--line);
    transition: box-shadow .3s var(--ease), background-color .3s;
}
@supports (backdrop-filter: blur(8px)) {
    .site-header { background: rgba(255, 255, 255, .86); backdrop-filter: saturate(1.4) blur(13px); }
}
.site-header.is-scrolled { box-shadow: var(--shadow); border-bottom-color: transparent; }
.header-inner { display: flex; align-items: center; gap: var(--s4); height: var(--header-h); }

/* Brand: emblem (61.8 % of the header height) + name as real text (sharp + translatable) */
.brand { display: inline-flex; align-items: center; gap: var(--s3); flex-shrink: 0; text-decoration: none; }
.brand-mark {
    position: relative; display: inline-flex; flex-shrink: 0;
    width: calc(var(--header-h) * var(--phi-inv)); height: calc(var(--header-h) * var(--phi-inv));
    border-radius: 50%;
    transition: box-shadow .4s var(--ease), transform .6s var(--ease);
}
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand:hover .brand-mark, .brand:focus-visible .brand-mark {
    box-shadow: 0 0 0 5px rgba(255, 192, 70, .28), 0 8px 21px rgba(226, 116, 26, .35);
    transform: rotate(-8deg) scale(1.04);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text strong { font: 800 var(--fs-26) var(--font-head); color: var(--brown); letter-spacing: -.02em; }
.brand-text small { margin-top: 2px; font: 600 var(--fs-13) var(--font-body); color: var(--orange); letter-spacing: .02em; }
@media (max-width: 1199.98px) { .brand-text strong { font-size: var(--fs-21); } }
@media (max-width: 599.98px) { .brand-place { display: none; } .brand { gap: var(--s2); } }
@media (max-width: 377px) { .brand-text strong { font-size: 18px; } .brand-text small { font-size: 12px; } }
/* Smaller brand inside the mobile menu */
.brand-sm .brand-mark { width: 44px; height: 44px; }
.brand-sm .brand-text strong { font-size: var(--fs-21); }

/* Desktop navigation */
.main-nav { margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: var(--s1); margin: 0; padding: 0; list-style: none; }
.nav-list > li { position: relative; }
.nav-link-dd {
    position: relative;
    display: inline-flex; align-items: center; gap: var(--s1);
    height: var(--touch); padding: 0 var(--s3);
    border: 0; background: none;
    font: 600 15px/1 var(--font-body); color: var(--ink);
    text-decoration: none; white-space: nowrap; cursor: pointer;
}
.nav-link-dd::after {
    content: ""; position: absolute; left: var(--s3); right: var(--s3); bottom: 6px;
    height: 3px; border-radius: 3px; background: var(--saffron);
    transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.nav-link-dd:hover, .nav-list > li:focus-within > .nav-link-dd { color: var(--orange); }
.nav-link-dd:hover::after, .nav-list > li:focus-within > .nav-link-dd::after,
.nav-list > li.is-active > .nav-link-dd::after { transform: scaleX(1); }
.nav-list > li.is-active > .nav-link-dd { color: var(--brown); }
.nav-link-dd .bi-chevron-down { font-size: 11px; transition: transform .3s var(--ease); }
.nav-list > li:hover .bi-chevron-down, .nav-list > li:focus-within .bi-chevron-down { transform: rotate(180deg); }

.sub-menu {
    position: absolute; top: calc(100% + var(--s2)); left: 0; z-index: 10;
    min-width: 280px; margin: 0; padding: var(--s2); list-style: none;
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(var(--s2));
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-1 * var(--s3)); height: var(--s3); } /* hover bridge */
.nav-list > li:hover > .sub-menu, .nav-list > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.sub-menu a {
    display: flex; align-items: center; gap: var(--s2);
    min-height: var(--touch); padding: var(--s2) var(--s3); border-radius: var(--r-sm);
    font: 500 15px/var(--lh-tight) var(--font-body); color: var(--ink); text-decoration: none;
    transition: background-color .2s, color .2s, padding-left .2s var(--ease);
}
.sub-menu a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--saffron); flex-shrink: 0; }
.sub-menu a:hover, .sub-menu a:focus-visible { background: var(--cream); color: var(--brown); padding-left: var(--s4); }
.sub-menu li.is-active > a { background: var(--cream-200); color: var(--brown); font-weight: 600; }

/* Right side actions */
.header-actions { display: flex; align-items: center; gap: var(--s3); flex-shrink: 0; margin-left: auto; }
.header-call { display: none; align-items: center; gap: var(--s2); text-decoration: none; color: var(--ink); }
@media (min-width: 1600px) { .header-call { display: flex; } }   /* only where there is room */
.header-call .icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--touch); height: var(--touch); border-radius: 50%;
    background: var(--cream-200); color: var(--orange); font-size: 18px;
    transition: background-color .2s, color .2s;
}
.header-call small { display: block; font-size: var(--fs-13); color: var(--muted); line-height: 1.2; }
.header-call strong { display: block; font: 700 15px/1.2 var(--font-head); }
.header-call:hover .icon { background: var(--saffron); color: var(--brown-900); }
.header-call:hover strong { color: var(--orange); }

.nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--touch); height: var(--touch);
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--white); color: var(--ink); font-size: 24px;
}
.nav-toggle:hover { background: var(--cream); }

.header-actions .btn-dd .label-short { display: none; }
@media (max-width: 599.98px) {
    .header-actions .btn-dd { padding-inline: var(--s3); }
    .header-actions .btn-dd .label-long { display: none; }
    .header-actions .btn-dd .label-short { display: inline; }
}
@media (max-width: 377px) {
    .header-inner { gap: var(--s2); }
    .header-actions { gap: var(--s2); }
    .header-actions .btn-dd .label { display: none; }
}

/* ---- Mobile menu (Bootstrap offcanvas) ---- */
.mobile-nav.offcanvas { --bs-offcanvas-width: min(89vw, 377px); border-left: 0; }
.mobile-nav .offcanvas-header { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
.mobile-nav .offcanvas-body { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s4); }
.m-nav { margin: 0; padding: 0; list-style: none; }
.m-nav > li { border-bottom: 1px solid var(--line); }
.m-nav a, .m-nav button {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    min-height: 48px; padding: var(--s2) 0;
    border: 0; background: none; text-align: left;
    font: 600 var(--fs-16)/var(--lh-tight) var(--font-body); color: var(--ink); text-decoration: none;
}
.m-nav button .bi { transition: transform .3s var(--ease); }
.m-nav button[aria-expanded="true"] .bi { transform: rotate(180deg); }
.m-nav li.is-active > a, .m-nav li.is-active > button { color: var(--orange); }
.m-sub { margin: 0 0 var(--s2); padding: 0 0 0 var(--s3); list-style: none; border-left: 3px solid var(--saffron); }
.m-sub a { min-height: var(--touch); font-weight: 500; color: var(--text); }
.m-sub li.is-active a { color: var(--orange); font-weight: 600; }
.m-actions { display: grid; gap: var(--s2); }
.mobile-nav .m-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--line); }
.mobile-nav .social-mini a { background: var(--cream-200); color: var(--brown); width: var(--touch); height: var(--touch); font-size: 18px; }
.mobile-nav .lang-switch select { border-color: var(--line); color: var(--ink); height: var(--touch); }
.mobile-nav .lang-switch .bi { color: var(--orange); }

/* ---- Floating quick actions (phones / tablets) ---- */
.fab {
    position: fixed; right: var(--s3); bottom: calc(var(--s3) + env(safe-area-inset-bottom)); z-index: 1020;
    display: flex; flex-direction: column; gap: var(--s2);
}
.fab a {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 55px; height: 55px; border-radius: 50%;
    font-size: 24px; text-decoration: none; box-shadow: var(--shadow-lg);
    transition: transform .2s var(--ease);
}
.fab a:hover { transform: scale(1.08); }
.fab .fab-wa { background: var(--green-wa); color: var(--white); }
.fab .fab-call { background: var(--saffron); color: var(--brown-900); }
.fab .fab-wa::after {               /* gentle pulse ring */
    content: ""; position: absolute; width: 55px; height: 55px; border-radius: 50%;
    border: 2px solid var(--green-wa); animation: dd-ring 2.618s var(--ease) infinite;
}
@keyframes dd-ring { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } }
@media (min-width: 1200px) { .fab .fab-call { display: none; } }
body.offcanvas-open .fab { display: none; }


/* ==========================================================================
   FOOTER
   ========================================================================== */
.btn-dd-light { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .35); color: var(--white); }
.btn-dd-light:hover { background: var(--white); border-color: var(--white); color: var(--brown-900); }

/* ---- Donate band ---- */
.footer-cta {
    position: relative; overflow: hidden;
    padding: var(--s6) 0;
    background:
        radial-gradient(circle at 12% 20%, rgba(255, 192, 70, .35), transparent 38%),
        radial-gradient(circle at 92% 90%, rgba(217, 75, 56, .45), transparent 42%),
        linear-gradient(120deg, var(--brown) 0%, #B2481C 61.8%, var(--orange) 100%);
    color: var(--white);
}
.footer-cta::after {               /* soft eye outline in the background */
    content: ""; position: absolute; right: -34px; top: 50%; width: 377px; height: 233px;
    transform: translateY(-50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 62'%3E%3Cpath d='M2 31C18 8 82 8 98 31 82 54 18 54 2 31Z' fill='none' stroke='white' stroke-width='2'/%3E%3Ccircle cx='50' cy='31' r='14' fill='none' stroke='white' stroke-width='2'/%3E%3Ccircle cx='50' cy='31' r='6' fill='white'/%3E%3C/svg%3E") no-repeat center / contain;
    opacity: .08; pointer-events: none;
}
.footer-cta-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); align-items: center; gap: var(--s5); }
.footer-cta .eyebrow {
    display: inline-flex; align-items: center; gap: var(--s2);
    margin-bottom: var(--s3); padding: var(--s1) var(--s3);
    border-radius: var(--r-pill); background: rgba(255, 255, 255, .14);
    font: 600 var(--fs-13)/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase;
    color: var(--white);
}
.footer-cta h2 { margin: 0 0 var(--s3); font-size: clamp(var(--fs-26), 3vw, var(--fs-42)); font-weight: 800; color: var(--white); }
.footer-cta h2 span { color: var(--saffron); }
.footer-cta p { max-width: 610px; margin: 0; font-size: 17px; color: rgba(255, 255, 255, .88); }
.footer-cta-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s3); }

/* ---- Main footer ---- */
.site-footer {
    position: relative; overflow: hidden;
    background:
        radial-gradient(circle at 0% 0%, rgba(255, 192, 70, .08), transparent 34%),
        var(--brown-900);
    color: rgba(255, 255, 255, .78);
    font-size: 15px;
}
.footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr) minmax(0, 1.272fr) minmax(0, 1.618fr);
    gap: var(--s5);
    padding-block: var(--s7) var(--s6);
}
.site-footer h3 {
    position: relative; margin: 0 0 var(--s4); padding-bottom: var(--s3);
    font: 700 var(--fs-21)/var(--lh-tight) var(--font-head); color: var(--white);
}
.site-footer h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px; border-radius: 3px; background: var(--saffron); }
.site-footer a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.site-footer a:hover { color: var(--saffron); }

.f-brand { display: inline-flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.f-mark { display: inline-flex; flex-shrink: 0; border-radius: 50%; box-shadow: 0 0 0 5px rgba(255, 192, 70, .22), 0 0 0 13px rgba(255, 192, 70, .07); transition: transform .6s var(--ease); }
.f-mark img { width: 89px; height: 89px; object-fit: contain; }
.f-brand:hover .f-mark { transform: rotate(-8deg) scale(1.04); }
/* Large, very faint emblem slowly turning behind the footer */
.f-watermark {
    position: absolute; right: -144px; top: 50%; z-index: 0;
    width: 610px; height: 610px; margin-top: -305px;
    opacity: .045; pointer-events: none; user-select: none;
    animation: dd-spin 233s linear infinite;
}
.footer-grid, .footer-bottom { position: relative; z-index: 1; }
@keyframes dd-spin { to { transform: rotate(360deg); } }
@media (max-width: 599.98px) { .f-watermark { width: 377px; height: 377px; margin-top: -188px; right: -144px; } }
.f-brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.f-brand-text strong { font: 800 var(--fs-26) var(--font-head); color: var(--white); }
.f-brand-text small { font: 600 var(--fs-13) var(--font-body); color: var(--saffron); letter-spacing: .04em; }
.f-logo-tile { display: inline-flex; padding: var(--s3) var(--s4); border-radius: var(--radius); background: var(--white); }
.f-logo-tile img { height: 55px; width: auto; }
.f-tagline { margin: 0 0 var(--s3); font: italic 500 var(--fs-16) var(--font-body); color: var(--saffron); }
.f-about p { margin-bottom: var(--s4); }

.f-social { display: flex; gap: var(--s2); }
.f-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--touch); height: var(--touch); border-radius: 50%;
    background: rgba(255, 255, 255, .08); color: var(--white); font-size: 18px;
    transition: background-color .2s, color .2s, transform .2s var(--ease);
}
.f-social a:hover { background: var(--saffron); color: var(--brown-900); transform: translateY(-3px); }

.f-links { margin: 0; padding: 0; list-style: none; }
.f-links li + li { margin-top: var(--s1); }
.f-links a {
    display: inline-flex; align-items: center; gap: var(--s2);
    min-height: 34px; transition: color .2s, transform .2s var(--ease);
}
.f-links a::before { content: "\F285"; font-family: 'bootstrap-icons'; font-size: 11px; color: var(--saffron); }
.f-links a:hover { transform: translateX(var(--s1)); }

.f-office + .f-office { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid rgba(255, 255, 255, .1); }
.f-office-title { display: flex; flex-direction: column; margin: 0 0 var(--s2); }
.f-office-title span { font: 700 var(--fs-16) var(--font-head); color: var(--white); }
.f-office-title small { font-size: var(--fs-13); color: rgba(255, 255, 255, .6); }
.f-office ul { margin: 0; padding: 0; list-style: none; }
.f-office li { display: flex; gap: var(--s2); align-items: flex-start; padding: var(--s0) 0; line-height: 1.5; }
.f-office li .bi { flex: 0 0 auto; margin-top: 3px; color: var(--saffron); }
.f-office a { overflow-wrap: anywhere; }

.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); font-size: var(--fs-13); }
.footer-bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); padding-block: var(--s4); padding-right: var(--s7); }  /* right: room for the floating buttons */
.footer-bottom p { margin: 0; }
.f-made .bi { color: var(--red); }
.f-legal { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin: 0; padding: 0; list-style: none; }
.f-legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.f-legal a:hover { color: var(--saffron); }

/* ---- Back to top (joins the floating buttons) ---- */
.fab .fab-top {
    width: 44px; height: 44px; margin-left: auto; margin-right: 5px;
    border: 0; border-radius: 50%;
    background: var(--white); color: var(--brown-900); font-size: 18px;
    box-shadow: var(--shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(var(--s3));
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.fab .fab-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.fab .fab-top:hover { background: var(--saffron); }

/* ---- Footer responsive ---- */
@media (max-width: 1079.98px) {
    .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 900px) {
    .footer-cta-inner { grid-template-columns: minmax(0, 1fr); text-align: center; }
    .footer-cta p { margin-inline: auto; }
    .footer-cta-actions { justify-content: center; }
}
@media (max-width: 599.98px) {
    .footer-cta { padding: var(--s5) 0; }
    .footer-cta-actions .btn-dd { flex: 1 1 100%; }
    .footer-grid { gap: var(--s5) var(--s4); padding-block: var(--s6) var(--s5); }
    .f-about, .f-offices { grid-column: 1 / -1; }
    .footer-bottom-inner { flex-direction: column; align-items: flex-start; text-align: left; padding-bottom: calc(var(--s7) + var(--s4)); }  /* room for floating buttons */
}


/* ==========================================================================
   SHARED SECTION PIECES (used on Home, later on inner pages)
   ========================================================================== */
.sec { padding-block: var(--s7); }
.sec-head { margin-bottom: var(--s6); }
.split-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5); align-items: end; }
.split-head .prose p:last-child { margin-bottom: 0; }

.eyebrow {
    display: flex; align-items: center; gap: var(--s2);
    margin: 0 0 var(--s3);
    font: 700 var(--fs-13)/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase;
    color: var(--orange);
}
.eyebrow-dot { width: 21px; height: 3px; border-radius: 3px; background: var(--saffron); flex-shrink: 0; }
.eyebrow-light { color: var(--saffron); }
.h-sec {
    margin: 0 0 var(--s4);
    font: 800 clamp(var(--fs-26), 2.4vw + 10px, var(--fs-42))/var(--lh-tight) var(--font-head);
    color: var(--ink); letter-spacing: -.02em;
}
.h-sec span { color: var(--red); }
.sec-lead { font-size: 18px; color: var(--muted); }
.prose { color: var(--text); }
.prose p { margin-bottom: var(--s3); }
.prose b, .prose strong { color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); }

/* Two columns: 61.8 % / 38.2 % */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); gap: var(--s6); align-items: center; }
.split-media-first { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* Gentle floating (images going up / down) */
.float-slow { animation: dd-float 6.5s ease-in-out infinite; }
@keyframes dd-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-13px); } }

/* Reveal on scroll (only when JavaScript runs, see site.js) */
.js [data-reveal] { opacity: 0; transform: translateY(var(--s5)); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0ms); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   HOME — HERO
   ========================================================================== */
.hero {
    position: relative; overflow: hidden;
    background:
        radial-gradient(ellipse at 85% 30%, rgba(255, 192, 70, .35), transparent 55%),
        radial-gradient(ellipse at 10% 90%, rgba(226, 116, 26, .12), transparent 45%),
        var(--cream);
}
.hero::before {               /* soft eye-shaped ring behind the photo */
    content: ""; position: absolute; right: -8%; top: 50%; width: 62%; aspect-ratio: 1.618;
    transform: translateY(-50%);
    border: 2px dashed rgba(226, 116, 26, .18); border-radius: 50%;
    animation: dd-spin-c 89s linear infinite;
}
@keyframes dd-spin-c { from { transform: translateY(-50%) rotate(0); } to { transform: translateY(-50%) rotate(360deg); } }
.hero-dot { position: absolute; border-radius: 50%; pointer-events: none; }
.hero-dot-1 { width: 13px; height: 13px; left: 6%; top: 21%; background: var(--saffron); animation: dd-float 5s ease-in-out infinite; }
.hero-dot-2 { width: 21px; height: 21px; left: 44%; bottom: 13%; border: 3px solid var(--orange); animation: dd-float 7s ease-in-out infinite reverse; }
.hero-dot-3 { width: 8px; height: 8px; left: 52%; top: 13%; background: var(--red); animation: dd-float 4s ease-in-out infinite; }

.hero-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center; gap: var(--s6);
    min-height: min(calc(100svh - var(--header-h) - 40px), 720px);
    padding-block: var(--s6) var(--s7);
}
.hero-text { position: relative; z-index: 2; }
.hero-title {
    margin: 0 0 var(--s4);
    font: 800 clamp(34px, 3.4vw + 12px, 63px)/1.08 var(--font-head);
    letter-spacing: -.03em; color: var(--ink);
}
.hero-points { display: grid; gap: var(--s2); margin: 0 0 var(--s5); padding: 0; list-style: none; }
.hero-points li { display: flex; gap: var(--s2); align-items: flex-start; font-size: 18px; font-weight: 500; color: var(--text); }
.hero-points .bi { margin-top: 3px; color: var(--orange); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s3); }

.hero-media { position: relative; z-index: 1; }
.hero-photo {
    position: relative; overflow: hidden;
    aspect-ratio: 1.272;
    border-radius: 34px 34px 34px 144px;
    box-shadow: var(--shadow-lg);
    background: var(--cream-200);
}
.hero-photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(58, 26, 14, .06); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 6.5s linear; }
.carousel-item.active .hero-photo img { transform: scale(1); }

/* Slide text animation */
.carousel-item .hero-text > * { opacity: 0; transform: translateY(var(--s4)); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.carousel-item.active .hero-text > * { opacity: 1; transform: none; }
.carousel-item.active .hero-text > *:nth-child(2) { transition-delay: .1s; }
.carousel-item.active .hero-text > *:nth-child(3) { transition-delay: .2s; }
.carousel-item.active .hero-text > *:nth-child(4) { transition-delay: .3s; }

/* Floating cards over the photo area */
.hero-float-layer { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hero-float-area { position: relative; width: 50%; height: 100%; margin-left: auto; }
.float-card {
    position: absolute; display: flex; align-items: center; gap: var(--s3);
    padding: var(--s3) var(--s4); border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .92); box-shadow: var(--shadow-lg);
    backdrop-filter: blur(8px);
    pointer-events: auto;
}
.float-card strong { display: block; font: 800 var(--fs-21)/1.1 var(--font-head); color: var(--ink); }
.float-card small { display: block; font-size: var(--fs-13); color: var(--muted); line-height: 1.3; }
.float-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--touch); height: var(--touch); border-radius: var(--radius); background: var(--saffron); color: var(--brown-900); font-size: 20px; }
.float-icon-red { background: var(--red); color: var(--white); }
.float-eye { left: -8%; top: 13%; animation: dd-float 6s ease-in-out infinite; }
.float-eye strong { font-size: var(--fs-16); }
.float-since { right: -3%; top: 8%; animation: dd-float 7s ease-in-out infinite .8s; }
.float-patients { right: 5%; bottom: 13%; animation: dd-float 6.5s ease-in-out infinite 1.6s; }

/* The eye */
.eye { width: 89px; height: auto; flex-shrink: 0; overflow: visible; }
.eye-pupil { transition: transform .25s ease-out; }
.eye-lid { animation: dd-blink 5.5s infinite; }
@keyframes dd-blink { 0%, 92%, 100% { transform: translateY(0); } 95% { transform: translateY(72px); } }

/* Carousel controls */
.hero-controls { position: absolute; left: 0; right: 0; bottom: var(--s5); z-index: 4; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.hero-controls > * { pointer-events: auto; }
.hero-indicators { position: static; margin: 0; justify-content: flex-start; gap: var(--s2); }
.hero-indicators [data-bs-target] {
    width: 13px; height: 13px; margin: 0; border: 0; border-radius: var(--r-pill);
    background: var(--brown-900); opacity: .2; transition: width .4s var(--ease), opacity .4s;
}
.hero-indicators .active { width: 34px; opacity: 1; background: var(--orange); }
.hero-arrows { display: flex; gap: var(--s2); }
.hero-arrows button {
    width: var(--touch); height: var(--touch); border: 1px solid var(--line); border-radius: 50%;
    background: var(--white); color: var(--ink); font-size: 18px; box-shadow: var(--shadow-sm);
    transition: background-color .2s, color .2s;
}
.hero-arrows button:hover { background: var(--brown-900); color: var(--white); }

/* ==========================================================================
   HOME — IMPACT NUMBERS
   ========================================================================== */
.impact { position: relative; z-index: 5; margin-top: calc(-1 * var(--s5)); }
.impact-grid {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.impact-item { position: relative; padding: var(--s5) var(--s4); text-align: center; }
.impact-item + .impact-item::before { content: ""; position: absolute; left: 0; top: 25%; bottom: 25%; width: 1px; background: var(--line); }
.impact-num { display: block; font: 800 clamp(var(--fs-26), 2.4vw + 8px, var(--fs-42))/1 var(--font-head); color: var(--brown); letter-spacing: -.02em; }
.impact-item span { display: block; margin-top: var(--s2); font: 600 var(--fs-13) var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ==========================================================================
   HOME — WELCOME
   ========================================================================== */
.welcome-media { position: relative; padding: 0 var(--s6) var(--s6) 0; }
.welcome-photo-main { overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow); aspect-ratio: 1; }
.welcome-photo-main img, .welcome-photo-small img { width: 100%; height: 100%; object-fit: cover; }
.welcome-photo-small {
    position: absolute; right: 0; bottom: 0; width: 55%; aspect-ratio: 1.618;
    overflow: hidden; border: 8px solid var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.welcome-badge {
    position: absolute; left: calc(-1 * var(--s4)); top: var(--s5);
    display: grid; place-items: center; width: 144px; height: 144px;
    border-radius: 50%; background: var(--white); box-shadow: var(--shadow-lg);
}
.welcome-badge svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: dd-spin 21s linear infinite; }
.welcome-badge text { font: 700 12.5px var(--font-body); letter-spacing: .18em; fill: var(--orange); }
.welcome-badge span { text-align: center; line-height: 1; }
.welcome-badge small { display: block; font-size: 11px; color: var(--muted); }
.welcome-badge strong { display: block; font: 800 var(--fs-26) var(--font-head); color: var(--red); }

/* ==========================================================================
   HOME — GOVERNMENT APPROVAL
   ========================================================================== */
.sec-approved { padding-block: var(--s5); }
.approved-card {
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); align-items: stretch;
    border-radius: var(--radius-lg);
    background: radial-gradient(circle at 0% 0%, rgba(255, 192, 70, .2), transparent 40%), var(--brown-900);
    color: rgba(255, 255, 255, .85); box-shadow: var(--shadow-lg);
}
.approved-text { padding: var(--s6); }
.approved-text h2 { margin: 0 0 var(--s5); font: 800 clamp(var(--fs-21), 1.6vw + 10px, var(--fs-34))/var(--lh-tight) var(--font-head); color: var(--white); }
.approved-text h2 span { color: var(--saffron); }
.approved-icon { display: inline-flex; align-items: center; justify-content: center; width: 55px; height: 55px; margin-bottom: var(--s4); border-radius: var(--radius); background: var(--saffron); color: var(--brown-900); font-size: 26px; }
.approved-photo { min-height: 280px; }
.approved-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   HOME — SERVICES
   ========================================================================== */
.sec-services { background: linear-gradient(180deg, var(--white), var(--cream)); }
.service-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
.service-card {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: var(--s3);
    padding: var(--s5) var(--s4);
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    background: var(--white); color: var(--text); text-decoration: none;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.service-card::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
    background: linear-gradient(90deg, var(--saffron), var(--orange)); transform: scaleX(0); transform-origin: left;
    transition: transform .4s var(--ease);
}
.service-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; color: var(--text); }
.service-card:hover::before { transform: scaleX(1); }
.service-num { position: absolute; right: var(--s4); top: var(--s3); font: 800 55px/1 var(--font-head); color: var(--cream-200); }
.service-icon {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 55px; height: 55px; border-radius: var(--radius); background: var(--cream-200); color: var(--orange); font-size: 26px;
    transition: background-color .3s, color .3s, transform .4s var(--ease);
}
.service-card:hover .service-icon { background: var(--saffron); color: var(--brown-900); transform: rotate(-8deg); }
.service-card h3 { position: relative; margin: 0; font: 700 var(--fs-21)/var(--lh-tight) var(--font-head); color: var(--ink); }
.service-card p { margin: 0; flex-grow: 1; font-size: 15px; }
.service-more { display: inline-flex; align-items: center; gap: var(--s1); font: 700 15px var(--font-head); color: var(--orange); }
.service-more .bi { transition: transform .3s var(--ease); }
.service-card:hover .service-more .bi { transform: translateX(var(--s1)); }

/* ==========================================================================
   HOME — WHY PEOPLE TRUST US
   ========================================================================== */
.why-media { position: relative; padding-bottom: var(--s5); }
.why-video {
    position: relative; display: grid; place-items: center;
    aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle, var(--white) 55%, var(--cream-200) 56%, var(--cream-200) 70%, transparent 71%);
}
.why-emblem { width: 72%; height: auto; animation: dd-float 7s ease-in-out infinite; }
.play-btn {
    position: absolute; right: 12%; bottom: 14%;
    display: inline-flex; align-items: center; justify-content: center;
    width: 72px; height: 72px; border-radius: 50%;
    background: var(--red); color: var(--white); font-size: 34px; text-decoration: none;
    box-shadow: 0 13px 34px rgba(217, 75, 56, .45);
}
.play-btn::before, .play-btn::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--red); animation: dd-ring 2.6s var(--ease) infinite; }
.play-btn::after { animation-delay: 1.3s; }
.play-btn:hover { color: var(--white); background: var(--brown); }
.play-label { position: absolute; right: 2%; bottom: 3%; font: 700 var(--fs-13) var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--brown); }
.why-counter {
    position: absolute; left: 0; bottom: 0;
    display: flex; align-items: center; gap: var(--s3);
    padding: var(--s3) var(--s4); border-radius: var(--radius-lg);
    background: var(--brown-900); color: var(--white); box-shadow: var(--shadow-lg);
}
.why-counter .bi { font-size: 34px; color: var(--saffron); }
.why-counter strong { display: block; font: 800 var(--fs-26)/1 var(--font-head); }
.why-counter small { display: block; font-size: var(--fs-13); color: rgba(255, 255, 255, .75); }

.pill-tabs { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); }
.pill-tabs .nav-link {
    min-height: var(--touch); padding: var(--s2) var(--s4);
    border: 1px solid var(--line); border-radius: var(--r-pill);
    background: var(--white); color: var(--ink); font: 600 15px var(--font-body);
    transition: background-color .25s, color .25s, border-color .25s;
}
.pill-tabs .nav-link:hover { border-color: var(--saffron); color: var(--brown); }
.pill-tabs .nav-link.active { background: var(--brown-900); border-color: var(--brown-900); color: var(--white); }
.sec-why .tab-pane { padding: var(--s4); border-radius: var(--radius-lg); background: var(--cream); }
.sec-why .tab-pane p:last-child { margin-bottom: 0; }

/* ==========================================================================
   HOME — PRESS NOTES
   ========================================================================== */
.sec-press { background: var(--cream); }
.press-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.press-card {
    position: relative; display: block; overflow: hidden;
    aspect-ratio: 1 / 1.272; border-radius: var(--radius-lg);
    background: var(--white); box-shadow: var(--shadow); cursor: zoom-in;
}
.press-card img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .6s var(--ease); }
.press-card:hover img { transform: scale(1.05); }
.press-zoom {
    position: absolute; right: var(--s3); bottom: var(--s3);
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--touch); height: var(--touch); border-radius: 50%;
    background: var(--white); color: var(--brown); font-size: 18px; box-shadow: var(--shadow);
    opacity: 0; transform: scale(.8); transition: opacity .3s, transform .3s var(--ease);
}
.press-card:hover .press-zoom, .press-card:focus-visible .press-zoom { opacity: 1; transform: none; }

/* ==========================================================================
   HOME — RESPONSIVE
   ========================================================================== */
@media (max-width: 1199.98px) {
    .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1079.98px) {
    .float-eye { left: 0; }
    .float-since { right: 0; }
}
@media (max-width: 900px) {
    .sec { padding-block: var(--s6); }
    .hero-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: var(--s5); padding-block: var(--s5) calc(var(--s7) + var(--s4)); }
    /* phones/tablets: only the eye card, over the bottom-left of the photo */
    .hero-float-area { width: 100%; }
    .float-since, .float-patients { display: none; }
    .float-eye { left: var(--s3); top: auto; bottom: calc(var(--s7) + var(--s5)); padding: var(--s2) var(--s3); }
    .eye { width: 61px; }
    .hero::before { width: 120%; right: -50%; top: 75%; }
    .hero-photo { border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 89px; }
    .split, .split-media-first, .split-head, .approved-card { grid-template-columns: minmax(0, 1fr); }
    .split { gap: var(--s5); }
    .why-media { max-width: 420px; margin-inline: auto; }
    .welcome-media { max-width: 520px; }
    .impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .impact-item:nth-child(3)::before { display: none; }
    .impact-item:nth-child(n+3) { border-top: 1px solid var(--line); }
    .press-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .approved-text { padding: var(--s5); }
}
@media (max-width: 599.98px) {
    .hero-title { font-size: 34px; }
    .hero-points li { font-size: var(--fs-16); }
    .hero-actions .btn-dd { flex: 1 1 100%; }
    .btn-row .btn-dd { flex: 1 1 100%; }
    .service-grid { grid-template-columns: minmax(0, 1fr); }
    .press-grid { gap: var(--s3); }
    .welcome-badge { width: 110px; height: 110px; left: calc(-1 * var(--s2)); }
    .welcome-badge text { font-size: 11px; }
    .welcome-badge strong { font-size: var(--fs-21); }
    .welcome-media { padding: 0 var(--s5) var(--s5) 0; }
    .play-btn { width: 61px; height: 61px; font-size: 28px; }
    .impact-item { padding: var(--s4) var(--s3); }
}
@media (max-width: 377px) {
    .press-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Home: transparent header over the hero until the page is scrolled */
.page-home .hero { margin-top: calc(-1 * var(--header-h)); padding-top: var(--header-h); }
.page-home .site-header:not(.is-scrolled) { background: transparent; border-bottom-color: transparent; backdrop-filter: none; }


/* ==========================================================================
   INNER PAGES — banner with breadcrumb
   ========================================================================== */
.page-hero {
    position: relative; overflow: hidden;
    background:
        radial-gradient(ellipse at 90% 0%, rgba(255, 192, 70, .35), transparent 55%),
        radial-gradient(ellipse at 0% 100%, rgba(226, 116, 26, .1), transparent 50%),
        var(--cream);
    border-bottom: 1px solid var(--line);
}
.page-hero-ring {
    position: absolute; left: -89px; bottom: -144px; width: 377px; height: 233px;
    border: 2px dashed rgba(226, 116, 26, .2); border-radius: 50%;
    animation: dd-spin 89s linear infinite; pointer-events: none;
}
.page-hero-grid {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr);
    align-items: center; gap: var(--s5); padding-block: var(--s6);
}
.page-hero.has-photo .page-hero-grid { grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); margin: 0 0 var(--s3); padding: 0; list-style: none; font-size: 14px; }
.crumbs li { display: inline-flex; align-items: center; gap: var(--s1); color: var(--muted); }
.crumbs li + li::before { content: "\F285"; font-family: 'bootstrap-icons'; font-size: 10px; color: var(--orange); margin-right: var(--s1); }
.crumbs a { color: var(--brown); text-decoration: none; font-weight: 600; }
.crumbs a:hover { color: var(--orange); text-decoration: underline; }
.crumbs .bi-house-door-fill { color: var(--orange); }
.crumbs [aria-current] span { color: var(--ink); font-weight: 600; }
.page-title { margin: 0; font: 800 clamp(var(--fs-34), 3vw + 14px, 55px)/1.1 var(--font-head); color: var(--ink); letter-spacing: -.03em; }
.page-intro { max-width: 610px; margin: var(--s3) 0 0; font-size: 18px; color: var(--text); }
.page-hero-photo {
    position: relative; overflow: hidden; aspect-ratio: 1.618;
    border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 89px;
    box-shadow: var(--shadow-lg);
    animation: dd-float 7s ease-in-out infinite;
}
.page-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
    .page-hero.has-photo .page-hero-grid { grid-template-columns: minmax(0, 1fr); }
    .page-hero-photo { display: none; }
    .page-hero-grid { padding-block: var(--s5); }
}

/* ==========================================================================
   INNER PAGES — shared pieces
   ========================================================================== */
.is-tinted { background: var(--cream); }
.sec-tight { padding-block: var(--s6) 0; }
.text-center .eyebrow, .eyebrow.justify-content-center { justify-content: center; }
.lead-narrow { max-width: 610px; margin-inline: auto; }
.empty-state { text-align: center; color: var(--muted); font-size: 18px; }
.empty-state > .bi { display: block; margin-bottom: var(--s3); font-size: 55px; color: var(--saffron); }
.empty-state .btn-row { justify-content: center; }
.link-more { display: inline-flex; align-items: center; gap: var(--s1); font: 700 15px var(--font-head); color: var(--orange); text-decoration: none; }
.link-more:hover { color: var(--brown); }
.back-link { margin-top: var(--s5); }
.back-link a { font-weight: 600; text-decoration: none; }

/* Content blocks (About, Biography) */
.content-sec { padding-block: var(--s6); }
.content-title { margin-bottom: var(--s4); }
.content-photo { margin-bottom: var(--s4); }

/* ==========================================================================
   RICH CONTENT  (HTML from the admin editor / WordPress import)
   ========================================================================== */
.rich { font-size: 17px; line-height: var(--lh); color: var(--text); }
.rich p { margin: 0 0 var(--s3); }
.rich b, .rich strong { color: var(--ink); font-weight: 700; }
.rich a { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }
.rich h2, .rich h3, .rich h4, .rich h5, .rich h6 { margin: var(--s4) 0 var(--s3); font-family: var(--font-head); color: var(--ink); line-height: var(--lh-tight); }
.rich h2 { font-size: var(--fs-34); font-weight: 800; }
.rich h3 { font-size: var(--fs-26); font-weight: 700; }
.rich h4 { font-size: var(--fs-21); font-weight: 700; }
.rich h5 { font-size: 18px; font-weight: 700; }
.rich h6 { font-size: var(--fs-16); font-weight: 800; }
.rich ul, .rich ol { margin: 0 0 var(--s3); padding-left: var(--s4); }
.rich li { margin-bottom: var(--s1); }
.rich ul li::marker { color: var(--orange); }
.rich blockquote { margin: var(--s4) 0; padding: var(--s4); border-left: 4px solid var(--saffron); border-radius: 0 var(--radius) var(--radius) 0; background: var(--cream); font-style: italic; }
.rich img { height: auto; border-radius: var(--radius); }
.rich table { width: 100%; margin-bottom: var(--s4); border-collapse: collapse; }
.rich th, .rich td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); text-align: left; }
.rich > *:first-child { margin-top: 0; }

/* Layout classes stored inside the content (see database/lib_elementor.php) */
.rich .dd-stack > * + * { margin-top: var(--s3); }
.rich .dd-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5); }
.rich .dd-row-reverse { flex-direction: row-reverse; }
.rich .dd-row + .dd-row, .rich .dd-stack + .dd-row, .rich .dd-row + .dd-stack,
.rich .dd-grid + *, .rich * + .dd-grid { margin-top: var(--s5); }
.rich .dd-cell { flex: 1 1 200px; min-width: 0; }   /* 200px start: a cell wraps to its own line when the row is full */
.rich .dd-cell[style*="--w"] { flex: 1 1 calc(var(--w) - var(--s5)); }
.rich .dd-cell[style*="--w:100%"] { flex-basis: 100%; }
.rich .dd-grid { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: var(--s4); }
.rich .dd-heading { margin: 0 0 var(--s3); font-family: var(--font-head); color: var(--ink); }
.rich h2.dd-heading { font-size: clamp(var(--fs-26), 2vw + 12px, var(--fs-34)); font-weight: 800; }
.rich .dd-heading.is-red { color: var(--red); }
.rich .dd-heading.text-center { text-align: center; }
.rich .dd-text { color: var(--text); }
.rich .dd-text p:last-child { margin-bottom: 0; }
.rich .text-justify { text-align: left; }      /* justified text reads badly on screens */
.rich .dd-figure { margin: 0 auto; }
.rich .dd-figure img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.rich .dd-figure figcaption { margin-top: var(--s2); font-size: 14px; text-align: center; color: var(--muted); }
.rich .dd-video { display: block; width: 100%; border-radius: var(--radius-lg); background: #000; box-shadow: var(--shadow-lg); }
.rich .dd-card { padding: var(--s5); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow); }
.rich .dd-outline {
    padding: var(--s5) var(--s4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.rich .dd-outline:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.rich .dd-outline .dd-heading { text-align: center; }
.rich .dd-iconbox { display: flex; gap: var(--s4); }
/* rows of icon cards: equal heights */
.rich .dd-row:has(.dd-iconbox-top) { align-items: stretch; }
.rich .dd-row:has(.dd-iconbox-top) > .dd-cell > .dd-stack, .rich .dd-row:has(.dd-iconbox-top) .dd-iconbox-top { height: 100%; }
.rich .dd-iconbox-top { flex-direction: column; align-items: center; text-align: center; padding: var(--s5) var(--s4); border-radius: var(--radius-lg); background: var(--cream); }
.rich .dd-iconbox-left { align-items: center; padding: var(--s5); border-radius: var(--radius-lg); background: linear-gradient(120deg, var(--cream), var(--cream-200)); }
.rich .dd-iconbox-icon {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 72px; height: 72px; border-radius: 50%;
    background: var(--white); color: var(--orange); font-size: 30px; box-shadow: var(--shadow);
}
.rich .dd-iconbox-left .dd-iconbox-icon { width: 89px; height: 89px; font-size: 38px; }
.rich .dd-iconbox h4 { margin: 0 0 var(--s2); font: 700 var(--fs-21) var(--font-head); color: var(--ink); }
.rich .dd-iconbox p { margin: 0; }
.rich .dd-icon {
    display: flex; align-items: center; justify-content: center;
    width: 61px; height: 61px; margin: 0 auto var(--s3); border-radius: var(--radius);
    background: var(--saffron); color: var(--brown-900); font-size: 28px;
}
.rich .dd-list { margin: 0; padding: 0; list-style: none; }
.rich .dd-list li { padding: var(--s2) 0 var(--s2) var(--s5); position: relative; border-bottom: 1px solid var(--line); }
.rich .dd-list li::before { content: "\F26B"; font-family: 'bootstrap-icons'; position: absolute; left: 0; color: var(--orange); }
.rich .dd-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); }
.rich .dd-gallery img { width: 100%; aspect-ratio: 1.272; object-fit: cover; border-radius: var(--r-sm); }
@media (max-width: 767.98px) {
    .rich .dd-row, .rich .dd-row-reverse { flex-direction: column; align-items: stretch; gap: var(--s4); }
    .rich .dd-cell, .rich .dd-cell[style*="--w"] { flex: 1 1 auto; width: 100%; }
    .rich .dd-grid { grid-template-columns: minmax(0, 1fr); }
    .rich .dd-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rich .dd-iconbox-left { flex-direction: column; text-align: center; }
    .rich { font-size: var(--fs-16); }
}

/* ==========================================================================
   SERVICE PAGE  (article + sidebar)
   ========================================================================== */
.article-layout { display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); gap: var(--s6); align-items: start; }
.article-main .dd-figure:first-child { margin-bottom: var(--s4); }
.article-side { position: sticky; top: calc(var(--header-h) + var(--s4)); display: grid; gap: var(--s4); }
.side-card { padding: var(--s4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-sm); }
.side-title { margin: 0 0 var(--s3); font: 800 var(--fs-21) var(--font-head); color: var(--ink); }
.side-links { margin: 0; padding: 0; list-style: none; }
.side-links a {
    display: flex; align-items: center; gap: var(--s3); min-height: var(--touch);
    padding: var(--s2) var(--s3); border-radius: var(--radius);
    font-weight: 600; color: var(--ink); text-decoration: none;
    transition: background-color .2s, color .2s;
}
.side-links .bi { color: var(--orange); font-size: 18px; }
.side-links a:hover { background: var(--cream); color: var(--brown); }
.side-links .is-active a { background: var(--brown-900); color: var(--white); }
.side-links .is-active .bi { color: var(--saffron); }
.side-donate { position: relative; overflow: hidden; border: 0; background: linear-gradient(140deg, var(--brown) 0%, var(--orange) 100%); color: rgba(255, 255, 255, .9); }
.side-donate .side-title { color: var(--white); }
.side-donate-icon { position: absolute; right: -13px; top: -13px; font-size: 89px; color: rgba(255, 255, 255, .1); }
.side-call { display: flex; align-items: center; gap: var(--s3); text-decoration: none; color: var(--ink); }
.side-call small { display: block; font-size: var(--fs-13); color: var(--muted); }
.side-call strong { display: block; font: 800 18px var(--font-head); }
.side-call:hover { border-color: var(--saffron); color: var(--ink); }
.article-narrow { max-width: 840px; margin-inline: auto; }
@media (max-width: 1079.98px) {
    .article-layout { grid-template-columns: minmax(0, 1fr); }
    .article-side { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

/* ==========================================================================
   DOCTORS / TRUSTEES (people)
   ========================================================================== */
.people-grid, .backer-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s4); }   /* last row centred */
.people-grid > * { flex: 0 1 calc(25% - var(--s4) * 3 / 4); min-width: 233px; }
.backer-grid > * { flex: 0 1 calc(33.333% - var(--s4) * 2 / 3); min-width: 260px; }
.doctor-card {
    overflow: hidden; border-radius: var(--radius-lg); background: var(--white);
    border: 1px solid var(--line); box-shadow: var(--shadow-sm);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.doctor-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.doctor-photo { position: relative; aspect-ratio: 1 / 1.1; overflow: hidden; background: var(--cream-200); }
.doctor-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .6s var(--ease); }
.doctor-card:hover .doctor-photo img { transform: scale(1.05); }
.doctor-initial { display: grid; place-items: center; height: 100%; font: 800 89px var(--font-head); color: var(--orange); }
.doctor-body { padding: var(--s4); text-align: center; }
.doctor-body h3 { margin: 0 0 var(--s1); font: 700 var(--fs-21) var(--font-head); color: var(--ink); }
.doctor-qual { margin: 0 0 var(--s2); font-size: 14px; color: var(--muted); }
.doctor-spec { display: inline-flex; align-items: center; gap: var(--s1); margin: 0; padding: var(--s1) var(--s3); border-radius: var(--r-pill); background: var(--cream-200); font-size: 14px; font-weight: 600; color: var(--brown); }

.visiting-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.visiting-item {
    display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4);
    border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm);
    font-weight: 600; color: var(--dark-orange); line-height: 1.45;
}
.visiting-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--touch); height: var(--touch); border-radius: 50%; background: var(--cream-200); color: var(--orange); font-size: 20px; }

.trustee-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.trustee-item { display: flex; align-items: center; gap: var(--s3); padding: var(--s3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.trustee-item strong { display: block; font: 700 var(--fs-16)/1.3 var(--font-head); color: var(--ink); }
.trustee-item small { display: inline-block; margin-top: 2px; padding: 0 var(--s2); border-radius: var(--r-pill); background: var(--saffron); font-size: 12px; font-weight: 700; color: var(--brown-900); }
.avatar {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: var(--touch); height: var(--touch); border-radius: 50%;
    background: linear-gradient(140deg, var(--saffron), var(--orange)); color: var(--white);
    font: 800 15px var(--font-head); letter-spacing: .02em;
}
.avatar-lg { width: 72px; height: 72px; font-size: var(--fs-21); margin-bottom: var(--s3); }
.trustee-card { padding: var(--s5) var(--s4); border-radius: var(--radius-lg); background: var(--white); text-align: center; box-shadow: var(--shadow-sm); }
.trustee-card h3 { margin: 0 0 var(--s2); font: 700 18px var(--font-head); color: var(--ink); }
.trustee-card p { margin: 0; font-size: 15px; color: var(--muted); }

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

/* ==========================================================================
   SUPPORTERS
   ========================================================================== */
.intro-card { position: relative; max-width: 987px; margin-inline: auto; padding: var(--s5) var(--s6); border-radius: var(--radius-lg); background: var(--cream); }
.intro-quote { position: absolute; left: var(--s3); top: var(--s1); font-size: 55px; color: var(--saffron); line-height: 1; }
.backer-card {
    display: flex; flex-direction: column; align-items: center; gap: var(--s2);
    padding: var(--s5) var(--s4); border: 1px solid var(--line); border-radius: var(--radius-lg);
    background: var(--white); text-align: center;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.backer-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.backer-logo { display: grid; place-items: center; width: 110px; height: 110px; margin-bottom: var(--s2); padding: var(--s2); border-radius: 50%; background: var(--cream); overflow: hidden; }
.backer-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.backer-card h3 { margin: 0; font: 700 18px/var(--lh-tight) var(--font-head); color: var(--ink); }
.backer-card p { margin: 0; font-size: 15px; color: var(--muted); }
.key-backers-text { max-width: 840px; margin: var(--s6) auto 0; }
.supporter-cloud { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.supporter-cloud li {
    display: inline-flex; align-items: center; gap: var(--s2);
    padding: var(--s2) var(--s4); border: 1px solid var(--line); border-radius: var(--r-pill);
    background: var(--white); font-size: 15px; font-weight: 600; color: var(--ink);
    transition: border-color .2s, transform .2s var(--ease);
}
.supporter-cloud li:hover { border-color: var(--saffron); transform: translateY(-2px); }
.supporter-cloud .bi { color: var(--red); font-size: 12px; }

/* ==========================================================================
   GALLERY
   ========================================================================== */
.photo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
.photo-tile { position: relative; display: block; overflow: hidden; aspect-ratio: 1.272; border-radius: var(--radius); cursor: zoom-in; background: var(--cream-200); }
.photo-tile:nth-child(7n + 1) { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), filter .4s; }
.photo-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(58, 26, 14, .55)); opacity: 0; transition: opacity .3s; }
.photo-tile:hover img { transform: scale(1.06); }
.photo-tile:hover::after, .photo-tile:focus-visible::after { opacity: 1; }
.photo-zoom { position: absolute; right: var(--s3); bottom: var(--s3); z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: var(--touch); height: var(--touch); border-radius: 50%; background: var(--white); color: var(--brown); opacity: 0; transform: scale(.8); transition: opacity .3s, transform .3s var(--ease); }
.photo-tile:hover .photo-zoom, .photo-tile:focus-visible .photo-zoom { opacity: 1; transform: none; }
.photo-caption { position: absolute; left: var(--s3); bottom: var(--s3); right: 70px; z-index: 1; color: var(--white); font-weight: 600; font-size: 14px; opacity: 0; transition: opacity .3s; }
.photo-tile:hover .photo-caption { opacity: 1; }
@media (max-width: 1079.98px) { .photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599.98px) {
    .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
    .photo-tile:nth-child(7n + 1) { grid-column: span 2; grid-row: auto; aspect-ratio: 1.618; }
}

/* ==========================================================================
   NEWS
   ========================================================================== */
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.news-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.news-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.news-photo { position: relative; display: block; aspect-ratio: 1.618; overflow: hidden; background: var(--cream-200); }
.news-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.news-card:hover .news-photo img { transform: scale(1.05); }
.news-photo-empty { display: grid; place-items: center; height: 100%; font-size: 55px; color: var(--saffron); }
.news-date { position: absolute; left: var(--s3); top: var(--s3); display: flex; flex-direction: column; align-items: center; padding: var(--s1) var(--s3); border-radius: var(--radius); background: var(--saffron); color: var(--brown-900); font-size: 12px; font-weight: 600; line-height: 1.2; }
.news-date strong { font: 800 var(--fs-21) var(--font-head); }
.news-body { display: flex; flex-direction: column; flex-grow: 1; padding: var(--s4); }
.news-body h3 { margin: 0 0 var(--s2); font: 700 var(--fs-21)/var(--lh-tight) var(--font-head); }
.news-body h3 a { color: var(--ink); text-decoration: none; }
.news-body h3 a:hover { color: var(--orange); }
.news-body p { flex-grow: 1; margin: 0 0 var(--s3); font-size: 15px; }
.news-foot { display: flex; align-items: center; justify-content: space-between; }
.news-social { display: flex; gap: var(--s2); }
.news-social a { color: var(--muted); font-size: 18px; }
.news-social a:hover { color: var(--orange); }
.pager { display: flex; justify-content: center; gap: var(--s2); margin: var(--s5) 0 0; padding: 0; list-style: none; }
.pager a { display: inline-flex; align-items: center; justify-content: center; min-width: var(--touch); height: var(--touch); border: 1px solid var(--line); border-radius: var(--radius); font-weight: 700; color: var(--ink); text-decoration: none; }
.pager a.is-active, .pager a:hover { background: var(--brown-900); border-color: var(--brown-900); color: var(--white); }
@media (max-width: 1079.98px) { .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599.98px) {
    .news-grid { grid-template-columns: minmax(0, 1fr); }
    .intro-card { padding: var(--s5) var(--s4); }
    .impact-grid-3 { grid-template-columns: minmax(0, 1fr); }
    .impact-grid-3 .impact-item + .impact-item::before { display: none; }
    .impact-grid-3 .impact-item + .impact-item { border-top: 1px solid var(--line); }
}


/* ==========================================================================
   DONATE
   ========================================================================== */
.donate-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.donate-card {
    position: relative; overflow: hidden;
    padding: var(--s5) var(--s4); border: 1px solid var(--line); border-radius: var(--radius-lg);
    background: var(--white);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.donate-card::after { content: ""; position: absolute; right: -34px; top: -34px; width: 110px; height: 110px; border-radius: 50%; background: var(--cream); transition: transform .5s var(--ease); }
.donate-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--saffron); }
.donate-card:hover::after { transform: scale(1.4); }
.donate-icon { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 55px; height: 55px; margin-bottom: var(--s3); border-radius: var(--radius); background: var(--saffron); color: var(--brown-900); font-size: 24px; }
.donate-amt { position: relative; z-index: 1; margin: 0; font: 800 var(--fs-34)/1.1 var(--font-head); color: var(--brown); letter-spacing: -.02em; }
.donate-gbp { display: inline-block; margin: var(--s2) 0 var(--s3); padding: var(--s0) var(--s3); border-radius: var(--r-pill); background: var(--cream-200); font-weight: 700; font-size: 14px; color: var(--dark-orange); }
.donate-desc { margin: 0; color: var(--text); }

.trust-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); margin-top: var(--s4); }
.trust-badges span { display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border-radius: var(--r-pill); background: var(--white); box-shadow: var(--shadow-sm); font-size: 14px; font-weight: 700; color: var(--ink); }
.trust-badges .bi { color: var(--orange); }

.pill-tabs .nav-link .bi { margin-right: var(--s1); }
.way-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); max-width: 987px; margin-inline: auto; }
.way-card { padding: var(--s5); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow); }
.way-card h3 { display: flex; align-items: center; gap: var(--s3); margin: 0 0 var(--s4); padding-bottom: var(--s3); border-bottom: 1px dashed var(--line); font: 800 var(--fs-21) var(--font-head); color: var(--ink); }
.way-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--touch); height: var(--touch); border-radius: var(--radius); background: var(--cream-200); color: var(--orange); font-size: 20px; }
.way-card .rich { font-size: var(--fs-16); }
.way-card .rich p { margin-bottom: var(--s2); }
.copy-val { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-weight: 700; color: var(--ink); letter-spacing: .03em; }
.copy-btn {
    display: inline-flex; align-items: center; gap: var(--s1); margin-left: var(--s2); padding: 2px var(--s2);
    border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--white);
    font-size: 12px; font-weight: 700; color: var(--brown); vertical-align: middle; cursor: pointer;
    transition: background-color .2s, color .2s;
}
.copy-btn:hover { background: var(--saffron); border-color: var(--saffron); color: var(--brown-900); }
.copy-btn.is-copied { background: #1E7D45; border-color: #1E7D45; color: var(--white); }
.justgiving-card { max-width: 610px; margin-inline: auto; text-align: center; }
.justgiving-card h3 { justify-content: center; }
@media (max-width: 1079.98px) { .donate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .way-grid { grid-template-columns: minmax(0, 1fr); } .way-card { padding: var(--s4); } }
@media (max-width: 599.98px) { .donate-grid { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-intro { margin-bottom: var(--s6); }
.office-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.office-card { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s5) var(--s4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-sm); }
.office-icon { display: inline-flex; align-items: center; justify-content: center; width: 55px; height: 55px; border-radius: 50%; background: linear-gradient(140deg, var(--saffron), var(--orange)); color: var(--white); font-size: 24px; }
.office-card h2 { margin: var(--s2) 0 0; font: 800 var(--fs-21) var(--font-head); color: var(--ink); }
.office-reg { margin: 0; font-size: 14px; color: var(--muted); }
.office-lines { margin: var(--s2) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s2); }
.office-lines li { display: flex; gap: var(--s2); align-items: flex-start; line-height: 1.5; }
.office-lines .bi { margin-top: 3px; color: var(--orange); }
.office-lines a { color: var(--ink); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.office-lines a:hover { color: var(--orange); }
.office-hours .rich { flex-grow: 1; }
.office-hours .btn-dd { margin-top: var(--s2); }

.contact-split { grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); align-items: start; }
.contact-form-card { padding: var(--s5); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow); }
.form-lead { margin-bottom: var(--s4); color: var(--muted); }
.dd-contact-form { display: grid; gap: var(--s3); }
.form-row-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.dd-contact-form .form-control { border-color: var(--line); border-radius: var(--radius); font-size: var(--fs-16); color: var(--ink); }
.dd-contact-form .form-control:focus { border-color: var(--saffron); box-shadow: 0 0 0 4px rgba(255, 192, 70, .3); }
.dd-contact-form textarea.form-control { min-height: 144px; }
.dd-contact-form .form-floating > label { color: var(--muted); }
.dd-contact-form .btn-dd { justify-self: start; }
.form-note { margin: 0; font-size: var(--fs-13); color: var(--muted); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-alert { display: flex; gap: var(--s2); align-items: flex-start; margin-bottom: var(--s4); padding: var(--s3) var(--s4); border-radius: var(--radius); font-weight: 600; }
.form-alert-ok { background: #E8F7EE; color: #1E6B3C; }
.form-alert-err { background: #FDECEA; color: #A8261A; }

.contact-side { display: grid; gap: var(--s3); }
.social-card {
    display: flex; align-items: center; gap: var(--s3);
    padding: var(--s3) var(--s4); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-sm);
    color: var(--ink); text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.social-card:hover { transform: translateX(var(--s1)); box-shadow: var(--shadow); color: var(--ink); }
.social-card > span:nth-child(2) { flex-grow: 1; }
.social-card strong { display: block; font: 800 var(--fs-16) var(--font-head); }
.social-card small { display: block; font-size: 14px; color: var(--muted); }
.social-card > .bi { color: var(--muted); }
.social-icon { display: inline-flex; align-items: center; justify-content: center; width: 55px; height: 55px; border-radius: var(--radius); color: var(--white); font-size: 24px; }
.social-facebook .social-icon { background: #1877F2; }
.social-instagram .social-icon { background: linear-gradient(45deg, #F58529, #DD2A7B 55%, #8134AF); }
.social-whatsapp .social-icon { background: #25D366; }

.map-card { position: relative; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.map-card iframe { display: block; width: 100%; height: 377px; border: 0; }
.map-btn { position: absolute; left: var(--s3); bottom: var(--s3); }
@media (max-width: 1079.98px) { .office-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .contact-split { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599.98px) {
    .office-grid, .form-row-2 { grid-template-columns: minmax(0, 1fr); }
    .contact-form-card { padding: var(--s4); }
    .dd-contact-form .btn-dd { justify-self: stretch; }
    .map-card iframe { height: 300px; }
}

/* ==========================================================================
   GALLERY ALBUMS, VIDEOS, PATIENT STORIES, HIGHLIGHTS, DOWNLOADS, FAQ
   ========================================================================== */
.photo-grid-plain .photo-tile:nth-child(7n + 1) { grid-column: auto; grid-row: auto; aspect-ratio: 1.272; }

.filter-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); margin-bottom: var(--s5); }
.filter-pills a { display: inline-flex; align-items: center; gap: var(--s1); min-height: var(--touch); padding: 0 var(--s4); border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--white); color: var(--ink); font-weight: 600; text-decoration: none; }
.filter-pills a:hover { border-color: var(--saffron); }
.filter-pills a.is-active { background: var(--brown-900); border-color: var(--brown-900); color: var(--white); }

.album-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.album-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.album-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); color: var(--ink); }
.album-cover { position: relative; display: block; aspect-ratio: 1.618; overflow: hidden; background: var(--cream-200); }
.album-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.album-card:hover .album-cover img { transform: scale(1.05); }
.album-count, .album-kind { position: absolute; display: inline-flex; align-items: center; gap: var(--s1); padding: 4px var(--s3); border-radius: var(--r-pill); font-size: var(--fs-13); font-weight: 700; }
.album-count { right: var(--s3); bottom: var(--s3); background: rgba(58, 26, 14, .82); color: var(--white); }
.album-kind { left: var(--s3); top: var(--s3); background: var(--saffron); color: var(--brown-900); }
.album-body { display: grid; gap: var(--s1); padding: var(--s4); }
.album-body strong { font: 800 var(--fs-21)/var(--lh-tight) var(--font-head); }
.album-body small { color: var(--muted); font-size: 14px; }

.video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.video-card { overflow: hidden; border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow); }
.video-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; overflow: hidden; background: #000; cursor: pointer; }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: transform .6s var(--ease), opacity .3s; }
.video-thumb:hover img { transform: scale(1.04); opacity: 1; }
.video-thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-play { position: absolute; left: 50%; top: 50%; display: inline-flex; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 50%; background: var(--saffron); color: var(--brown-900); font-size: 34px; transform: translate(-50%, -50%); box-shadow: 0 0 0 8px rgba(255, 192, 70, .35); transition: transform .3s var(--ease); }
.video-thumb:hover .video-play { transform: translate(-50%, -50%) scale(1.08); }
.video-body { padding: var(--s3) var(--s4) var(--s4); }
.video-body h3 { margin: 0 0 var(--s1); font-size: var(--fs-16); }
.video-body p { margin: 0; color: var(--muted); font-size: 14px; }

.story-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); align-items: start; }
.story-card { display: flex; flex-direction: column; gap: var(--s3); margin: 0; padding: var(--s4); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow); }
.story-video { border-radius: var(--radius); }
.story-stars { color: var(--saffron-600); letter-spacing: 2px; }
.story-card blockquote { margin: 0; font-size: 17px; color: var(--text, var(--ink)); }
.story-card blockquote::before { content: "\201C"; display: block; height: 28px; font: 800 55px/1 var(--font-head); color: var(--saffron); }
.story-who { display: flex; align-items: center; gap: var(--s3); margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--line); }
.story-who .avatar { flex: 0 0 auto; width: 55px; height: 55px; overflow: hidden; }
.story-who .avatar img { width: 100%; height: 100%; object-fit: cover; }
.story-who > span:nth-child(2) { flex-grow: 1; }
.story-who strong { display: block; font-family: var(--font-head); }
.story-who small { display: block; color: var(--muted); font-size: 14px; }
.story-src { color: var(--muted); font-size: 21px; }

.google-badge { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s3) var(--s4); max-width: 680px; margin: var(--s5) auto 0; padding: var(--s3) var(--s4); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-sm); }
.google-g { display: inline-flex; align-items: center; justify-content: center; width: 55px; height: 55px; border-radius: 50%; background: var(--cream); color: #4285F4; font-size: 26px; }
.google-score { display: grid; }
.google-score strong { font: 800 var(--fs-26)/1 var(--font-head); }
.google-score small { color: var(--muted); }

.highlight-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s4); }
.highlight-card { padding: var(--s4); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-sm); text-align: center; }
.highlight-icon { display: inline-flex; align-items: center; justify-content: center; width: 68px; height: 68px; margin-bottom: var(--s3); border-radius: 50%; background: var(--cream-200); color: var(--brown); font-size: 30px; }
.highlight-card h3 { font-size: var(--fs-16); margin-bottom: var(--s2); }
.highlight-card p { margin: 0; color: var(--muted); font-size: 15px; }

.download-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.download-card { display: flex; align-items: center; gap: var(--s3); height: 100%; padding: var(--s3) var(--s4); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none; transition: box-shadow .3s, transform .3s var(--ease); }
.download-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); color: var(--ink); }
.download-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 55px; height: 55px; border-radius: var(--radius); background: #FDECEA; color: #C0392B; font-size: 26px; }
.download-text { display: grid; flex-grow: 1; }
.download-text strong { font-family: var(--font-head); }
.download-text small { color: var(--muted); font-size: 14px; }
.download-meta { font-weight: 700; letter-spacing: .02em; }
.download-go { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: var(--touch); height: var(--touch); border-radius: 50%; background: var(--saffron); color: var(--brown-900); font-size: 18px; }

.faq-wrap { max-width: 900px; }
.faq-block { margin-top: var(--s6); }
.dd-faq .accordion-item { margin-bottom: var(--s3); border: 1px solid var(--line); border-radius: var(--radius) !important; overflow: hidden; background: var(--white); }
.dd-faq .accordion-button { min-height: 55px; font: 700 var(--fs-16)/var(--lh-tight) var(--font-head); color: var(--ink); background: var(--white); box-shadow: none; }
.dd-faq .accordion-button:not(.collapsed) { background: var(--cream); color: var(--brown); }
.dd-faq .accordion-button:focus-visible { box-shadow: 0 0 0 4px rgba(255, 192, 70, .45); }
.dd-faq .accordion-body { color: var(--text, var(--ink)); }
.info-cta { margin-top: var(--s6); padding: var(--s4) var(--s5); border-radius: var(--radius-lg); background: var(--cream); }
.info-cta p { margin: 0; font-weight: 600; }

@media (max-width: 1079.98px) {
    .album-grid, .video-grid, .story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599.98px) {
    .album-grid, .video-grid, .story-grid, .download-list { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   EYE HOSPITAL: EMERGENCY STRIP, OPD TIMETABLE, EYE CAMPS, PATIENT INFO, DONATIONS
   ========================================================================== */
.em-strip { background: var(--red); color: var(--white); font-size: 14px; }
.em-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px var(--s4); min-height: 36px; padding-block: 4px; }
.em-strip a { display: inline-flex; align-items: center; gap: var(--s1); min-height: 32px; color: var(--white); text-decoration: none; }
.em-strip a:hover { color: var(--saffron); }
.em-call strong { font-size: 15px; letter-spacing: .02em; }
.em-more { margin-left: var(--s2); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 599.98px) { .em-inner { justify-content: center; } .em-more { display: none; } }

.h-sub { display: flex; align-items: center; gap: var(--s2); margin: var(--s5) 0 var(--s4); font-size: var(--fs-26); }
.h-sub .bi { color: var(--orange); }
.today-line { display: inline-flex; align-items: center; gap: var(--s2); margin-bottom: var(--s5); padding: var(--s2) var(--s4); border-radius: var(--r-pill); background: var(--cream-200); font-weight: 700; color: var(--brown); }

.centre-block { margin-bottom: var(--s6); overflow: hidden; border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow); }
.centre-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); padding: var(--s4) var(--s5); background: var(--brown-900); color: var(--white); }
.centre-head > div { flex: 1 1 280px; }
.centre-head h2 { margin: 0; color: var(--white); font-size: var(--fs-21); }
.centre-head p { margin: var(--s1) 0 0; color: #E9D9CC; font-size: 14px; }
.centre-icon { display: inline-flex; align-items: center; justify-content: center; width: 55px; height: 55px; border-radius: 50%; background: var(--saffron); color: var(--brown-900); font-size: 26px; }

.tt-table { width: 100%; border-collapse: collapse; }
.tt-table th, .tt-table td { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tt-table thead th { font-size: var(--fs-13); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: var(--cream); }
.tt-table tbody tr:last-child > * { border-bottom: 0; }
.tt-table tr.is-open { background: #F2FBF5; }
.tt-dept { display: inline-flex; gap: var(--s2); font-family: var(--font-head); font-weight: 700; color: var(--ink); }
.tt-dept .bi { color: var(--orange); }
.tt-doctor, .tt-note, .tt-next { display: block; color: var(--muted); font-weight: 400; }
.tt-note { font-style: italic; }
.tt-today { white-space: nowrap; text-align: right !important; }
.badge-today { display: inline-flex; align-items: center; gap: var(--s1); padding: 4px var(--s3); border-radius: var(--r-pill); background: #1E6B3C; color: var(--white); font-size: var(--fs-13); font-weight: 700; }
.tt-footnote { margin-top: var(--s4); color: var(--muted); font-size: 15px; }
@media (max-width: 767.98px) {
    .tt-table thead { display: none; }
    .tt-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s1) var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
    .tt-table th, .tt-table td { padding: 0; border: 0; }
    .tt-table th[scope="row"] { grid-column: 1 / -1; }
    .tt-table td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
    .tt-today { grid-column: 1 / -1; text-align: left !important; }
}

.today-card .side-title small { display: block; margin-top: 2px; font: 600 14px var(--font-body); color: var(--muted); }
.today-list { display: grid; gap: var(--s2); margin: 0 0 var(--s3); padding: 0; list-style: none; }
.today-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px var(--s3); padding-bottom: var(--s2); border-bottom: 1px dashed var(--line); }
.today-list span { font-weight: 600; color: var(--ink); }
.today-list .bi { color: var(--orange); }
.today-list small { color: var(--muted); }

.doctor-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); padding: var(--s4) var(--s5); border-radius: var(--radius-lg); background: var(--cream); }
.doctor-cta .highlight-icon { margin: 0; }
.doctor-cta p { flex: 1 1 260px; margin: 0; font-weight: 600; }

.camp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.camp-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow); }
.camp-card.is-past { opacity: .92; }
.camp-photo { position: relative; display: block; aspect-ratio: 1.618; overflow: hidden; background: var(--cream-200); }
.camp-photo img { width: 100%; height: 100%; object-fit: cover; }
.camp-photo-empty { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 55px; color: var(--saffron); }
.camp-date { position: absolute; left: var(--s3); top: var(--s3); display: grid; justify-items: center; min-width: 68px; padding: var(--s2); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); font-size: var(--fs-13); font-weight: 700; color: var(--brown); line-height: 1.2; }
.camp-date strong { font: 800 var(--fs-26)/1 var(--font-head); color: var(--ink); }
.camp-body { display: flex; flex-direction: column; gap: var(--s3); flex-grow: 1; padding: var(--s4); }
.camp-body h3 { margin: 0; font-size: var(--fs-21); }
.camp-body h3 a { color: var(--ink); text-decoration: none; }
.camp-meta { display: grid; gap: var(--s1); margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: 15px; }
.camp-meta .bi { color: var(--orange); }
.camp-body .btn-dd, .camp-body .link-more { margin-top: auto; align-self: flex-start; }
.camp-empty { padding: var(--s5); border: 2px dashed var(--line); border-radius: var(--radius-lg); text-align: center; }
.camp-facts { display: grid; gap: var(--s3); margin: 0 0 var(--s4); padding: 0; list-style: none; }
.camp-facts li { display: flex; gap: var(--s3); align-items: flex-start; }
.camp-facts .bi { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: var(--touch); height: var(--touch); border-radius: 50%; background: var(--cream-200); color: var(--brown); font-size: 20px; }
.camp-facts small { display: block; font-size: var(--fs-13); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.camp-facts span { font-weight: 600; color: var(--ink); }
@media (max-width: 1079.98px) { .camp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599.98px) { .camp-grid { grid-template-columns: minmax(0, 1fr); } }

.info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s4); }
.info-card { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s; }
.info-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); color: var(--ink); }
.info-card .highlight-icon { margin-bottom: var(--s1); }
.info-card strong { font: 800 var(--fs-21)/var(--lh-tight) var(--font-head); }
.info-card small { color: var(--muted); font-size: 15px; }
.info-card .link-more { margin-top: auto; }

.upi-card { text-align: center; }
.upi-qr { display: block; width: 220px; max-width: 100%; height: auto; margin: 0 auto var(--s3); padding: var(--s2); border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.upi-app-btn { display: none; }
@media (hover: none) and (pointer: coarse) { .upi-app-btn { display: inline-flex; } }
.note-80g { background: var(--cream); }
.note-80g p { margin-bottom: var(--s2); }

.donor-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.donor-wall li { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) var(--s4); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); }
.donor-wall .bi { margin-top: 3px; color: var(--red); }
.donor-wall strong { display: block; font-family: var(--font-head); }
.donor-wall small { display: block; color: var(--muted); }
.donor-wall em { display: block; margin-top: 2px; font-size: 14px; color: var(--text); }

/* ==========================================================================
   ANNOUNCEMENT, PHONE BOTTOM BAR, POP-UP
   ========================================================================== */
.announce { background: var(--saffron); color: var(--brown-900); font-weight: 700; font-size: 15px; }
.announce-inner { display: flex; align-items: center; justify-content: center; gap: var(--s3); min-height: 40px; padding-block: 4px; text-align: center; }
.announce a, .announce span { color: inherit; text-decoration: none; }
.announce a:hover { text-decoration: underline; }
.announce-close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-left: auto; border: 0; border-radius: 50%; background: transparent; color: inherit; }
.announce-close:hover { background: rgba(58, 26, 14, .1); }
.announce.is-closed { display: none; }

.mbar { display: none; }
@media (max-width: 991.98px) {
    .mbar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
        display: flex; padding-bottom: env(safe-area-inset-bottom);
        background: var(--white); box-shadow: 0 -4px 21px rgba(58, 26, 14, .12);
    }
    .mbar a { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 58px; color: var(--ink); font-size: 12px; font-weight: 700; text-decoration: none; }
    .mbar a .bi { font-size: 20px; color: var(--brown); }
    .mbar .mbar-wa .bi { color: #128C7E; }
    .mbar .mbar-main { background: var(--saffron); }
    .mbar .mbar-main .bi { color: var(--brown-900); }
    body.has-mbar { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
    body.has-mbar .fab { bottom: calc(58px + var(--s3) + env(safe-area-inset-bottom)); }
    body.has-mbar .fab .fab-call { display: none; }
    body.offcanvas-open .mbar { display: none; }
}

.dd-popup .modal-content { overflow: hidden; border: 0; border-radius: var(--radius-lg); }
.dd-popup .btn-close { position: absolute; right: var(--s3); top: var(--s3); z-index: 2; padding: var(--s2); border-radius: 50%; background-color: var(--white); opacity: .9; }
.dd-popup-img { display: block; width: 100%; height: auto; max-height: 300px; object-fit: cover; }
.dd-popup picture { display: block; }
.dd-popup-body { padding: var(--s5); text-align: center; }
.dd-popup-body .h-sec { font-size: var(--fs-26); }

/* ==========================================================================
   DESIGN UPGRADE 1: booking strip, why-choose cards, CTA band, service photos,
   press slider, doctor cards, donate calculator
   ========================================================================== */
.btn-dd-ghost { border: 2px solid rgba(255, 255, 255, .6); background: transparent; color: var(--white); }
.btn-dd-ghost:hover { border-color: var(--white); background: rgba(255, 255, 255, .12); color: var(--white); }

/* Booking strip under the slider */
.quick-strip { position: relative; z-index: 4; padding: var(--s5) 0 0; }
.quick-grid { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--s3); padding: var(--s3); border-radius: var(--radius-lg); background: var(--brown-900); box-shadow: var(--shadow-lg); }
.quick-item { flex: 1 1 220px; display: flex; align-items: center; gap: var(--s3); min-height: 68px; padding: var(--s2) var(--s4); border-radius: var(--radius); background: rgba(255, 255, 255, .06); color: var(--white); text-decoration: none; transition: background .3s; }
.quick-item:hover { background: rgba(255, 255, 255, .12); color: var(--white); }
.quick-item small { display: block; color: #E9D9CC; font-size: var(--fs-13); }
.quick-item strong { display: block; font: 700 var(--fs-16)/1.35 var(--font-head); }
.quick-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: var(--touch); height: var(--touch); border-radius: 50%; background: var(--saffron); color: var(--brown-900); font-size: 20px; }
.quick-dot { flex: 0 0 auto; width: 14px; height: 14px; margin: 0 var(--s2); border-radius: 50%; background: #9CA3AF; box-shadow: 0 0 0 5px rgba(156, 163, 175, .25); }
.quick-status.is-open .quick-dot { background: #22C55E; box-shadow: 0 0 0 5px rgba(34, 197, 94, .25); animation: dd-pulse 1.618s infinite; }
.quick-status.is-later .quick-dot { background: var(--saffron); box-shadow: 0 0 0 5px rgba(255, 192, 70, .25); }
@keyframes dd-pulse { 50% { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); } }
.quick-camp .quick-icon { background: var(--red); color: var(--white); }
.quick-book { flex: 0 1 auto; align-self: center; margin-inline: var(--s2); }
@media (max-width: 599.98px) { .quick-book { flex: 1 1 100%; justify-content: center; margin: 0; } }

/* Why patients choose Devdaya */
.why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.why-card { --tone: var(--orange); --tone-soft: #FDEBDC; position: relative; overflow: hidden; padding: var(--s5) var(--s4) var(--s4); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-sm); transition: transform .35s var(--ease), box-shadow .35s; }
.why-card::after { content: ""; position: absolute; right: -34px; top: -34px; width: 89px; height: 89px; border-radius: 50%; background: var(--tone-soft); }
.why-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.why-card.tone-1 { --tone: #0E8A7E; --tone-soft: #DDF3F0; }
.why-card.tone-2 { --tone: var(--red); --tone-soft: #FBE3DF; }
.why-card.tone-3 { --tone: #4F5BD5; --tone-soft: #E5E7FA; }
.why-card.tone-4 { --tone: #C2410C; --tone-soft: #FFEAD5; }
.why-card.tone-5 { --tone: #15803D; --tone-soft: #DCFCE7; }
.why-icon { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 55px; height: 55px; margin-bottom: var(--s3); border-radius: var(--radius); background: var(--tone); color: var(--white); font-size: 24px; box-shadow: 0 8px 21px -8px var(--tone); }
.why-card h3 { position: relative; z-index: 1; margin: 0 0 var(--s2); font-size: var(--fs-21); }
.why-card p { position: relative; z-index: 1; margin: 0; color: var(--muted); font-size: 15px; }
@media (max-width: 1079.98px) { .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599.98px) { .why-grid { grid-template-columns: minmax(0, 1fr); } }

/* Call-to-action band */
.cta-band-sec { padding: var(--s6) 0; }
.cta-band { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); align-items: center; gap: var(--s5); padding: var(--s6); border-radius: var(--radius-lg); background: linear-gradient(120deg, var(--red), var(--orange) 60%, var(--saffron-600)); color: var(--white); box-shadow: var(--shadow-lg); }
.cta-band.is-camp { background: linear-gradient(120deg, #0E6B63, #0E8A7E 55%, #2BB3A3); }
.cta-band::before { content: ""; position: absolute; left: -89px; bottom: -89px; width: 233px; height: 233px; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.cta-band h2 { margin: var(--s2) 0 var(--s3); font-size: clamp(var(--fs-26), 3vw, var(--fs-42)); color: var(--white); }
.cta-band h2 span { color: var(--brown-900); background: var(--saffron); padding: 0 var(--s2); border-radius: var(--r-sm); }
.cta-band.is-camp h2 span { color: inherit; background: none; }
.cta-band p { max-width: 560px; color: rgba(255, 255, 255, .92); font-size: 17px; }
.cta-band .btn-row { margin-top: var(--s4); }
.cta-band .btn-dd-light { background: var(--white); border-color: var(--white); color: var(--brown-900); box-shadow: var(--shadow); }
.cta-band .btn-dd-light:hover { background: var(--saffron); border-color: var(--saffron); }
.cta-band-art { position: relative; display: flex; align-items: center; justify-content: center; }
.cta-eye { width: min(260px, 100%); filter: drop-shadow(0 21px 34px rgba(58, 26, 14, .35)); animation: dd-float 4.236s var(--ease) infinite; }
.cta-heart { position: absolute; right: 12%; top: 0; font-size: 42px; color: var(--white); animation: dd-beat 1.618s var(--ease) infinite; }
@media (max-width: 899.98px) { .cta-band { grid-template-columns: minmax(0, 1fr); padding: var(--s5) var(--s4); text-align: center; } .cta-band p { margin-inline: auto; } .cta-band .btn-row { justify-content: center; } .cta-band-art { display: none; } }

/* Monthly goal bar */
.goal-bar { margin-top: var(--s4); }
.goal-head { display: flex; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s1); font-size: 14px; font-weight: 600; }
.goal-track { height: 13px; overflow: hidden; border-radius: var(--r-pill); background: var(--cream-200); }
.goal-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--orange), var(--saffron)); }
.goal-bar.is-light .goal-track { background: rgba(255, 255, 255, .25); }
.goal-bar.is-light .goal-track span { background: var(--white); }

/* Service cards with photo and points */
.service-card.has-photo { padding-top: 0; }
.service-photo { display: block; margin: 0 calc(-1 * var(--s4)) var(--s1); aspect-ratio: 1.618; overflow: hidden; background: var(--cream-200); }
.service-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.service-card:hover .service-photo img { transform: scale(1.06); }
.service-card.has-photo .service-num { top: auto; bottom: var(--s3); font-size: 42px; }
.service-card.has-photo .service-icon { margin-top: calc(-1 * var(--s5) - var(--s1)); position: relative; z-index: 1; box-shadow: var(--shadow); background: var(--white); }
.service-points { display: grid; gap: var(--s1); flex-grow: 1; margin: 0; padding: 0; list-style: none; font-size: 15px; }
.service-points li { display: flex; gap: var(--s2); }
.service-points .bi { flex: 0 0 auto; margin-top: 3px; color: var(--orange); }

/* Press notes slider */
.press-slider { position: relative; }
.press-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--s4)) / 3); gap: var(--s4); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: var(--s2) var(--s1) var(--s4); scrollbar-width: none; }
.press-track::-webkit-scrollbar { display: none; }
.press-track .press-card { scroll-snap-align: start; }
.slider-btn { position: absolute; top: 42%; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: var(--touch); height: var(--touch); border: 0; border-radius: 50%; background: var(--white); color: var(--brown); box-shadow: var(--shadow); font-size: 18px; }
.slider-btn:hover { background: var(--saffron); }
.slider-prev { left: calc(-1 * var(--s3)); }
.slider-next { right: calc(-1 * var(--s3)); }
.slider-btn[disabled] { opacity: 0; pointer-events: none; }
.press-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s3); background: linear-gradient(transparent, rgba(58, 26, 14, .85)); color: var(--white); font-weight: 600; font-size: 14px; }
.press-caption small { display: block; opacity: .85; font-weight: 400; }
@media (max-width: 1079.98px) { .press-track { grid-auto-columns: calc((100% - var(--s4)) / 2); } }
@media (max-width: 599.98px) { .press-track { grid-auto-columns: 82%; } .slider-btn { display: none; } }

/* Doctor cards */
.doc-filter { margin-top: var(--s5); margin-bottom: 0; }
.doc-filter button { display: inline-flex; align-items: center; min-height: var(--touch); padding: 0 var(--s4); border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--white); color: var(--ink); font-weight: 600; }
.doc-filter button:hover { border-color: var(--saffron); }
.doc-filter button.is-active { background: var(--brown-900); border-color: var(--brown-900); color: var(--white); }
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--s4); }
.doc-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow); transition: transform .35s var(--ease), box-shadow .35s; }
.doc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.doc-card[hidden] { display: none; }
.doc-photo { position: relative; aspect-ratio: 1; overflow: hidden; background: linear-gradient(135deg, var(--cream-200), #F7D9B5); }
.doc-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.doc-grid-visiting .doc-photo { aspect-ratio: 2.2; }
.doc-initial { display: flex; align-items: center; justify-content: center; height: 100%; font: 800 68px/1 var(--font-head); color: var(--brown); opacity: .55; }
.doc-photo .badge-today { position: absolute; left: var(--s3); bottom: var(--s3); }
.doc-body { display: flex; flex-direction: column; gap: var(--s1); flex-grow: 1; padding: var(--s4); }
.doc-dept { align-self: flex-start; display: inline-flex; gap: var(--s1); padding: 2px var(--s3); border-radius: var(--r-pill); background: var(--cream-200); color: var(--brown); font-size: var(--fs-13); font-weight: 700; }
.doc-body h3 { margin: var(--s1) 0 0; font-size: 18px; }
.doc-body .doctor-qual, .doc-body .doctor-spec { margin: 0; color: var(--muted); font-size: 15px; }
.doc-times { display: grid; gap: 2px; margin: var(--s2) 0 0; padding: var(--s2) 0 0; border-top: 1px dashed var(--line); list-style: none; font-size: 14px; color: var(--text); }
.doc-times .bi { color: var(--orange); }
.doc-body .link-more { margin-top: auto; padding-top: var(--s2); }

/* Donate: calculator and steps */
.calc-card { display: grid; grid-template-columns: minmax(0, 1.272fr) minmax(0, 1fr); gap: var(--s5); padding: var(--s5); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow); }
.calc-amounts { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s4) 0; }
.calc-amt { min-height: 55px; padding: 0 var(--s4); border: 2px solid var(--line); border-radius: var(--radius); background: var(--white); font: 800 var(--fs-21) var(--font-head); color: var(--ink); }
.calc-amt:hover { border-color: var(--saffron); }
.calc-amt.is-active { border-color: var(--orange); background: #FFF3E3; color: var(--brown); }
.calc-own { display: grid; gap: var(--s1); max-width: 280px; font-weight: 600; }
.calc-own .form-control { min-height: var(--touch); font-size: 18px; }
.calc-result { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2); padding: var(--s4); border-radius: var(--radius-lg); background: linear-gradient(135deg, #FFF3E3, var(--cream)); text-align: center; }
.calc-eye { display: inline-flex; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 50%; background: var(--white); color: var(--orange); font-size: 34px; box-shadow: var(--shadow-sm); }
.calc-amount { font: 800 var(--fs-42)/1 var(--font-head); color: var(--brown); }
.calc-out { margin: 0; font-size: 18px; font-weight: 600; color: var(--ink); }
.calc-result .goal-bar { align-self: stretch; text-align: left; }
.give-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); margin: var(--s5) 0 var(--s6); padding: 0; list-style: none; counter-reset: none; }
.give-steps li { position: relative; display: grid; gap: 2px; padding: var(--s4) var(--s4) var(--s4) 89px; border-radius: var(--radius-lg); background: var(--cream); }
.give-num { position: absolute; left: var(--s4); top: 50%; display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; background: var(--brown-900); color: var(--saffron); font: 800 var(--fs-21) var(--font-head); transform: translateY(-50%); }
.give-steps strong { font-family: var(--font-head); font-size: 18px; }
.give-steps small { color: var(--muted); font-size: 14px; }
@media (max-width: 899.98px) { .calc-card, .give-steps { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   DESIGN UPGRADE 2: hero chips, timeline, centre chooser, map, pre-footer, text size
   ========================================================================== */
.hero-chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s4); padding: 0; list-style: none; }
.hero-chips li { display: inline-flex; align-items: center; gap: var(--s1); padding: var(--s1) var(--s3); border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--white); font-size: 14px; font-weight: 700; color: var(--brown); box-shadow: var(--shadow-sm); }
.hero-chips .bi { color: var(--orange); }

.doc-grid-home { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1079.98px) { .doc-grid-home { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599.98px) { .doc-grid-home { grid-template-columns: minmax(0, 1fr); } }

/* Timeline (About Us) */
.timeline { position: relative; display: grid; gap: var(--s4); max-width: 980px; margin: 0 auto; padding: 0; list-style: none; }
.timeline::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; border-radius: 3px; background: linear-gradient(var(--saffron), var(--orange)); transform: translateX(-50%); }
.tl-item { position: relative; display: grid; grid-template-columns: 1fr 55px 1fr; align-items: center; gap: var(--s4); }
.tl-year { font: 800 var(--fs-34)/1 var(--font-head); color: var(--brown); text-align: right; }
.tl-dot { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 55px; height: 55px; border: 4px solid var(--cream); border-radius: 50%; background: var(--brown-900); color: var(--saffron); font-size: 20px; }
.tl-card { padding: var(--s3) var(--s4); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-sm); }
.tl-card h3 { margin: 0 0 var(--s1); font-size: 18px; }
.tl-card p { margin: 0; color: var(--muted); font-size: 15px; }
.tl-item:nth-child(even) .tl-year { order: 3; text-align: left; }
.tl-item:nth-child(even) .tl-card { order: 1; }
.tl-item:nth-child(even) .tl-dot { order: 2; }
@media (max-width: 767.98px) {
    .timeline::before { left: 27px; }
    .tl-item, .tl-item:nth-child(even) { grid-template-columns: 55px minmax(0, 1fr); gap: var(--s1) var(--s3); }
    .tl-item .tl-dot, .tl-item:nth-child(even) .tl-dot { order: 0; grid-row: span 2; align-self: start; }
    .tl-item .tl-year, .tl-item:nth-child(even) .tl-year { order: 1; text-align: left; font-size: var(--fs-26); }
    .tl-item .tl-card, .tl-item:nth-child(even) .tl-card { order: 2; }
}

/* Contact: which centre */
.centre-choose { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.centre-card { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow); }
.centre-card-head { display: flex; gap: var(--s3); align-items: flex-start; }
.centre-card h3 { margin: 0 0 var(--s1); font-size: var(--fs-21); }
.centre-for { margin: 0; color: var(--muted); font-size: 15px; }
.centre-card .office-lines { margin: 0; }
@media (max-width: 899.98px) { .centre-choose { grid-template-columns: minmax(0, 1fr); } }

/* Map that loads on click */
.map-facade { position: relative; min-height: 300px; background: #E8E4DC repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 13px, transparent 13px 26px); }
.map-facade.is-small { min-height: 233px; margin-top: auto; }
.map-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-load { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2); width: 100%; border: 0; background: transparent; color: var(--brown-900); font-weight: 700; }
.map-pin { display: inline-flex; align-items: center; justify-content: center; width: 55px; height: 55px; border-radius: 50%; background: var(--red); color: var(--white); font-size: 26px; box-shadow: var(--shadow); transition: transform .3s var(--ease); }
.map-load:hover .map-pin { transform: translateY(-4px); }
.map-load-text { padding: 4px var(--s3); border-radius: var(--r-pill); background: var(--white); box-shadow: var(--shadow-sm); }
.map-facade .map-btn { z-index: 2; }

/* Pre-footer quick blocks */
.pre-footer { padding: var(--s5) 0; background: var(--cream); }
.pre-footer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.pre-card { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s; }
.pre-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); color: var(--ink); }
.pre-card small { display: block; color: var(--muted); font-size: var(--fs-13); }
.pre-card strong { display: block; font: 700 var(--fs-16)/1.3 var(--font-head); }
.pre-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; background: var(--brown-900); color: var(--saffron); font-size: 21px; }
.pre-donate .pre-icon { background: var(--red); color: var(--white); }
@media (max-width: 899.98px) { .pre-footer-grid { grid-template-columns: minmax(0, 1fr); } }

/* Text size switch */
.text-size { display: inline-flex; overflow: hidden; border: 1px solid rgba(255, 255, 255, .25); border-radius: var(--r-pill); }
.text-size button { min-width: 36px; height: 32px; padding: 0 var(--s2); border: 0; background: transparent; color: inherit; font-weight: 800; font-size: 14px; }
.text-size button + button { border-left: 1px solid rgba(255, 255, 255, .25); }
.text-size button:hover { background: rgba(255, 255, 255, .12); }
.topbar .text-size { color: var(--white); margin-right: var(--s3); }
.mobile-nav .text-size { border-color: var(--line); color: var(--ink); }
.mobile-nav .text-size button { height: var(--touch); min-width: var(--touch); }
.mobile-nav .text-size button + button { border-left-color: var(--line); }
html.text-lg body { zoom: 1.12; }
html.text-xl body { zoom: 1.25; }

/* ==========================================================================
   DESIGN UPGRADE 3: teal health accent, waves, service facts, share, gallery
   filmstrip, featured video, before / after, eye self-check
   ========================================================================== */
:root { --teal: #0E8A7E; --teal-700: #0B6F66; --teal-soft: #DDF3F0; }

/* Calm teal accent for health information */
.highlight-icon { background: var(--teal-soft); color: var(--teal); }
.info-card:hover .highlight-icon, .highlight-card:hover .highlight-icon { background: var(--teal); color: var(--white); }
.highlight-card { border-top: 3px solid var(--teal-soft); transition: border-color .3s, transform .3s var(--ease); }
.highlight-card:hover { border-top-color: var(--teal); transform: translateY(-3px); }
.facts-card { border-top: 4px solid var(--teal); }

/* Soft wave between sections (sections with a tinted background) */
.sec-why-choose, .sec-stories, .timeline-sec { position: relative; }
.sec-why-choose::before, .sec-stories::before, .timeline-sec::before {
    content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 34px; pointer-events: none;
    background: var(--white);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 34' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v8c-240 26-480 26-720 13S240-5 0 21z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 34' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v8c-240 26-480 26-720 13S240-5 0 21z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* Service page: quick facts */
.facts-list { display: grid; gap: var(--s2); margin: 0 0 var(--s3); padding: 0; list-style: none; font-size: 15px; }
.facts-list li { display: flex; gap: var(--s2); align-items: flex-start; }
.facts-list .bi { flex: 0 0 auto; margin-top: 3px; color: var(--teal); }
.facts-list .quick-dot { margin: 6px var(--s1) 0 2px; width: 12px; height: 12px; }
.facts-list .is-open { font-weight: 700; color: #15803D; }
.facts-list .is-open .quick-dot { background: #22C55E; box-shadow: 0 0 0 4px rgba(34, 197, 94, .25); }
.facts-list .is-later .quick-dot { background: var(--saffron); }
.facts-actions { display: grid; gap: var(--s2); }

/* Share buttons */
.share-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: var(--s5) 0 var(--s3); padding-top: var(--s3); border-top: 1px dashed var(--line); font-weight: 600; }
.share-row a, .share-row .share-copy { display: inline-flex; align-items: center; gap: var(--s1); min-height: 40px; padding: 0 var(--s3); border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--white); color: var(--ink); font-size: 14px; text-decoration: none; }
.share-row .share-wa .bi { color: #128C7E; }
.share-row .share-fb .bi { color: #1877F2; }
.share-row a:hover, .share-row .share-copy:hover { border-color: var(--saffron); }

/* Gallery filmstrip and album thumbs */
.filmstrip { display: grid; grid-auto-flow: column; grid-auto-columns: 180px; gap: var(--s2); overflow-x: auto; margin-bottom: var(--s5); padding-bottom: var(--s2); scroll-snap-type: x proximity; }
.film-item { display: block; aspect-ratio: 1.272; overflow: hidden; border-radius: var(--radius); scroll-snap-align: start; }
.film-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.film-item:hover img { transform: scale(1.08); }
.album-thumbs { position: absolute; right: var(--s3); top: var(--s3); display: grid; gap: var(--s1); }
.album-thumbs img { display: block; width: 55px; height: 42px; object-fit: cover; border: 2px solid var(--white); border-radius: var(--r-sm); box-shadow: var(--shadow-sm); }

/* Featured video */
.featured-video { position: relative; display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); align-items: center; gap: var(--s5); padding: var(--s4); border-radius: var(--radius-lg); background: var(--brown-900); color: var(--white); box-shadow: var(--shadow-lg); }
.featured-thumb { border-radius: var(--radius); }
.featured-thumb .video-play { width: 89px; height: 89px; font-size: 44px; }
.featured-text h2 { margin: var(--s2) 0; color: var(--white); font-size: clamp(var(--fs-21), 2.4vw, var(--fs-34)); }
.featured-text p { color: #E9D9CC; }
@media (max-width: 899.98px) { .featured-video { grid-template-columns: minmax(0, 1fr); } }

/* Before / after slider */
.ba-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 400px)); justify-content: center; gap: var(--s4); }
.ba-card { margin: 0; overflow: hidden; border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow); }
.ba { position: relative; aspect-ratio: 1.272; overflow: hidden; user-select: none; }
.ba picture, .ba img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ba-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; background: var(--white); box-shadow: 0 0 8px rgba(0, 0, 0, .4); transform: translateX(-50%); pointer-events: none; }
.ba-range { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba-tag { position: absolute; top: var(--s2); z-index: 1; padding: 2px var(--s2); border-radius: var(--r-pill); background: rgba(58, 26, 14, .75); color: var(--white); font-size: var(--fs-13); font-weight: 700; }
.ba-tag-before { left: var(--s2); }
.ba-tag-after { right: var(--s2); }
.ba-card figcaption { display: grid; gap: 2px; padding: var(--s3) var(--s4); }
.ba-card figcaption span { color: var(--muted); font-size: 14px; }
.ba:focus-within::after { background: var(--saffron); }

/* Eye self-check */
.selfcheck { max-width: 840px; margin: 0 auto; }
.selfcheck-list { display: grid; gap: var(--s3); margin: 0 0 var(--s4); padding: 0; list-style: none; }
.selfcheck-list fieldset { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-sm); }
.selfcheck-list legend { float: left; display: flex; gap: var(--s3); align-items: center; width: auto; max-width: 560px; margin: 0; font-size: 17px; font-weight: 600; }
.sc-num { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--teal-soft); color: var(--teal-700); font-weight: 800; }
.sc-choice { display: inline-flex; gap: var(--s2); }
.sc-choice input { position: absolute; opacity: 0; pointer-events: none; }
.sc-choice label { display: inline-flex; align-items: center; justify-content: center; min-width: 76px; min-height: var(--touch); padding: 0 var(--s4); border: 2px solid var(--line); border-radius: var(--r-pill); font-weight: 700; cursor: pointer; }
.sc-choice input:focus-visible + label { outline: 3px solid var(--saffron); outline-offset: 2px; }
.sc-choice input:checked + label { border-color: var(--teal); background: var(--teal); color: var(--white); }
.selfcheck-result { display: grid; justify-items: center; gap: var(--s2); margin-bottom: var(--s4); padding: var(--s5); border-radius: var(--radius-lg); background: var(--teal-soft); text-align: center; }
.selfcheck-result.is-warn { background: #FFF3E3; }
.sc-icon { display: inline-flex; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 50%; background: var(--white); color: var(--teal); font-size: 34px; }
.sc-text { margin: 0; max-width: 560px; font-size: 19px; font-weight: 700; color: var(--ink); }
.sc-urgent { display: flex; gap: var(--s2); padding: var(--s3) var(--s4); border-radius: var(--radius); background: #FDECEA; color: #A8261A; font-weight: 600; }

/* ---------- Website forms (partials/enquiry-form) ---------- */
.dd-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s4); }
.dd-field-full { grid-column: 1 / -1; }
.dd-form .form-label { margin-bottom: var(--s1); font-weight: 600; color: var(--ink); }
.dd-form .req { color: var(--red); }
.dd-form .form-control, .dd-form .form-select { min-height: var(--touch); border-color: var(--line); border-radius: var(--radius); font-size: var(--fs-16); color: var(--ink); }
.dd-form .form-control:focus, .dd-form .form-select:focus { border-color: var(--saffron); box-shadow: 0 0 0 4px rgba(255, 192, 70, .3); }
.dd-form textarea.form-control { min-height: 110px; }
.dd-form .form-check { display: flex; gap: var(--s2); align-items: flex-start; padding-left: 0; }
.dd-form .form-check-input { flex: 0 0 auto; width: 22px; height: 22px; margin: 1px 0 0; }
.dd-form .form-check-input:checked { background-color: var(--orange); border-color: var(--orange); }
.dd-form .invalid-feedback { font-weight: 600; }
.dd-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); margin-top: var(--s4); }
.dd-form-foot .form-note { flex: 1 1 260px; }
.dd-form .btn-dd[disabled] { opacity: .7; cursor: progress; }
@media (max-width: 599.98px) {
    .dd-form-grid { grid-template-columns: minmax(0, 1fr); }
    .dd-form-foot .btn-dd { width: 100%; justify-content: center; }
}

/* Small message at the bottom of the screen (form sent / error) */
.dd-toast {
    position: fixed; left: 50%; bottom: var(--s5); z-index: 1090; max-width: min(92vw, 520px);
    display: flex; gap: var(--s2); align-items: flex-start; padding: var(--s3) var(--s4);
    border-radius: var(--radius); box-shadow: var(--shadow-lg); font-weight: 600; color: var(--white);
    background: #1E6B3C; transform: translate(-50%, 150%); transition: transform .4s var(--ease);
}
.dd-toast.is-error { background: #A8261A; }
.dd-toast.is-shown { transform: translate(-50%, 0); }

/* Thank-you page */
.thanks-card { max-width: 680px; margin: 0 auto; padding: var(--s6) var(--s5); text-align: center; border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow); }
.thanks-icon { display: inline-flex; align-items: center; justify-content: center; width: 89px; height: 89px; margin-bottom: var(--s4); border-radius: 50%; background: #E8F7EE; color: #1E6B3C; font-size: 55px; }
.thanks-card .sec-lead { margin: 0 auto var(--s5); }

/* ---------- Hindi / Gujarati pages ---------- */
/* Indic scripts join letters: never squeeze or space them, and give the taller glyphs room. */
:lang(hi) *, :lang(gu) * { letter-spacing: normal !important; }
:lang(hi) body, :lang(gu) body { line-height: 1.75; }
:lang(hi) h1, :lang(hi) h2, :lang(hi) h3, :lang(gu) h1, :lang(gu) h2, :lang(gu) h3 { line-height: 1.4; }

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