/*
 * Swastik Urology Clinic: site styles, built on Google Material Design 3.
 * Colour roles come from one seed colour (#0f5c6e) through the Material colour
 * utilities, tonal-spot scheme. WhatsApp green is used only on WhatsApp actions.
 * Mobile first. Text colours meet WCAG 2.1 AA on their backgrounds.
 */

@font-face {
    font-family: "Google Sans Flex";
    src: url("fonts/google-sans-flex-latin.woff2") format("woff2");
    font-weight: 400 700;
    font-display: swap;
    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;
}

:root {
    /* Material 3 colour roles */
    --md-primary: #00677c;
    --md-on-primary: #ffffff;
    --md-primary-container: #b2ebff;
    --md-on-primary-container: #004e5e;
    --md-secondary: #4b626a;
    --md-secondary-container: #cee7f0;
    --md-on-secondary-container: #344a51;
    --md-error: #ba1a1a;
    --md-error-container: #ffdad6;
    --md-on-error-container: #93000a;
    --md-surface: #f5fafd;
    --md-on-surface: #171c1e;
    --md-on-surface-variant: #40484b;
    --md-surface-lowest: #ffffff;
    --md-surface-low: #eff4f7;
    --md-surface-container: #eaeff1;
    --md-surface-high: #e4e9eb;
    --md-surface-highest: #dee3e6;
    --md-outline: #70787c;
    --md-outline-variant: #bfc8cc;
    --md-inverse-surface: #2c3133;
    --md-inverse-on-surface: #ecf1f4;
    --md-inverse-primary: #86d1e9;
    --wa: #1b7a4a;
    --wa-hover: #146139;
    --warn-bg: #fff4e5;
    --warn-ink: #7a3e00;

    /* Shape scale (Material 3 Expressive adds the larger steps) */
    --shape-xs: 4px;
    --shape-s: 8px;
    --shape-m: 12px;
    --shape-l: 16px;
    --shape-xl: 28px;
    --shape-xxl: 40px;
    --shape-full: 999px;

    /* Elevation */
    --elev-1: 0 1px 2px rgba(0, 0, 0, .3), 0 1px 3px 1px rgba(0, 0, 0, .15);
    --elev-2: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 6px 2px rgba(0, 0, 0, .15);
    --elev-3: 0 4px 8px 3px rgba(0, 0, 0, .15), 0 1px 3px rgba(0, 0, 0, .3);

    /* Motion: Material 3 emphasised easing */
    --ease: cubic-bezier(.2, 0, 0, 1);
    --ease-decel: cubic-bezier(.05, .7, .1, 1);

    --font: "Google Sans Flex", "Google Sans", Roboto, "Noto Sans Devanagari", "Nirmala UI", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --wrap: 1200px;
    --appbar: 64px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--appbar) + 16px); }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--md-on-surface);
    background: var(--md-surface);
    padding-bottom: 88px; /* room for the mobile bottom app bar */
    -webkit-font-smoothing: antialiased;
}

.lang-hi { line-height: 1.75; }
body.no-scroll { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--md-primary); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--md-on-primary-container); }
address { font-style: normal; }

:focus-visible { outline: 3px solid var(--md-primary); outline-offset: 2px; border-radius: 4px; }

/* Material 3 type scale */
h1, h2, h3, h4 { color: var(--md-on-surface); font-weight: 500; letter-spacing: 0; }
h1 { font-size: 1.75rem; line-height: 2.25rem; margin: 0 0 12px; }            /* headline medium */
h2 { font-size: 1.5rem; line-height: 2rem; margin: 40px 0 12px; }             /* headline small */
h3 { font-size: 1.25rem; line-height: 1.75rem; margin: 28px 0 8px; }          /* title large */
h4 { font-size: 1rem; line-height: 1.5rem; margin: 20px 0 6px; font-weight: 600; }
p, ul, ol { margin: 0 0 16px; }
.lead { font-size: 1.125rem; line-height: 1.7; color: var(--md-on-surface-variant); }
.label { font-size: .875rem; line-height: 1.25rem; font-weight: 500; letter-spacing: .1px; }
.eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--md-primary); margin: 0 0 8px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.icon { flex: none; display: inline-block; vertical-align: middle; }

.skip-link { position: absolute; left: -999px; top: 8px; background: var(--md-inverse-surface); color: #fff; padding: 8px 12px; z-index: 100; border-radius: var(--shape-s); }
.skip-link:focus { left: 8px; }

/* State layer shared by interactive surfaces */
.btn, .chip, .icon-btn, .nav-item, .seg, .card-link, .menu-item, .drawer-item, .quick {
    position: relative; isolation: isolate; overflow: hidden;
}
.btn::after, .chip::after, .icon-btn::after, .nav-item::after, .seg::after, .card-link::after, .menu-item::after, .drawer-item::after, .quick::after {
    content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0; transition: opacity .2s var(--ease); z-index: -1; pointer-events: none;
}
.btn:hover::after, .chip:hover::after, .icon-btn:hover::after, .nav-item:hover::after, .seg:hover::after, .card-link:hover::after, .menu-item:hover::after, .drawer-item:hover::after, .quick:hover::after { opacity: .08; }
.btn:active::after, .chip:active::after, .icon-btn:active::after, .card-link:active::after, .quick:active::after { opacity: .12; }

/* Buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 10px 24px;
    background: var(--md-primary); color: var(--md-on-primary);
    border: 0; border-radius: var(--shape-full);
    font: inherit; font-size: 1rem; font-weight: 500; letter-spacing: .1px; line-height: 1.25;
    text-decoration: none; cursor: pointer; transition: box-shadow .2s var(--ease), border-radius .2s var(--ease);
}
.btn:hover { color: var(--md-on-primary); box-shadow: var(--elev-1); }
.btn:active { border-radius: var(--shape-m); }
.btn .icon { width: 20px; height: 20px; }
.btn-wa { background: var(--wa); color: #fff; }
.btn-wa:hover { color: #fff; }
.btn-tonal { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.btn-tonal:hover { color: var(--md-on-secondary-container); }
.btn-outlined { background: transparent; color: var(--md-primary); box-shadow: inset 0 0 0 1px var(--md-outline); }
.btn-outlined:hover { color: var(--md-primary); box-shadow: inset 0 0 0 1px var(--md-outline); }
.btn-text { background: transparent; color: var(--md-primary); padding: 10px 12px; }
.btn-text:hover { color: var(--md-primary); box-shadow: none; }
.btn-on-primary { background: var(--md-surface-lowest); color: var(--md-primary); }
.btn-on-primary:hover { color: var(--md-primary); }
.btn-small { min-height: 40px; padding: 8px 18px; font-size: .9375rem; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0; }
.btn-big { min-height: 56px; padding: 14px 28px; font-size: 1.125rem; }
.btn-big .icon { width: 24px; height: 24px; }

.icon-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
    border: 0; border-radius: var(--shape-full); background: transparent; color: var(--md-on-surface-variant); cursor: pointer;
}

/* Chips */
.chip {
    display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 6px 16px 6px 12px;
    border-radius: var(--shape-s); border: 1px solid var(--md-outline-variant);
    background: var(--md-surface-lowest); color: var(--md-on-surface); font-size: .875rem; font-weight: 500; line-height: 1.25rem; text-decoration: none;
}
.chip .icon { width: 18px; height: 18px; color: var(--md-primary); }
.chip:hover { color: var(--md-on-surface); }
.chip-tonal { background: var(--md-secondary-container); border-color: transparent; color: var(--md-on-secondary-container); }
.chip-primary { background: var(--md-primary-container); border-color: transparent; color: var(--md-on-primary-container); }
.chip-primary .icon { color: var(--md-on-primary-container); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 16px; list-style: none; }
button.chip { font: inherit; font-size: .875rem; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--md-secondary-container); border-color: transparent; color: var(--md-on-secondary-container); }
.chip[aria-pressed="true"]::before {
    content: ""; width: 18px; height: 18px; margin-left: -4px; background: currentColor;
    -webkit-mask: var(--check) center / contain no-repeat; mask: var(--check) center / contain no-repeat;
}

:root {
    --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='m382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z'/%3E%3C/svg%3E");
    --check-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='m424-408-86-86q-11-11-28-11t-28 11q-11 11-11 28t11 28l114 114q12 12 28 12t28-12l226-226q11-11 11-28t-11-28q-11-11-28-11t-28 11L424-408Zm56 328q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z'/%3E%3C/svg%3E");
}

/* Top status strip */
.topbar { background: var(--md-surface-container); font-size: .875rem; color: var(--md-on-surface-variant); }
.topbar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; min-height: 40px; padding-top: 4px; padding-bottom: 4px; }
.topbar-hours { display: inline-flex; align-items: center; gap: 6px; }
.topbar-hours .icon { width: 18px; height: 18px; color: var(--md-primary); display: none; }
.topbar-label { display: none; }
.lang-chip { min-height: 36px; }
.lang-chip .icon { color: var(--md-on-secondary-container); }

.opd-pill {
    display: inline-flex; align-items: center; gap: 8px; padding: 2px 12px 2px 10px; min-height: 28px;
    border-radius: var(--shape-full); background: var(--md-surface-highest); color: var(--md-on-surface); font-weight: 600;
}
.opd-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--md-outline); }
.opd-pill.is-open { background: #c9f0d8; color: #0b3d22; }
.opd-pill.is-open .dot { background: var(--wa); box-shadow: 0 0 0 3px rgba(27, 122, 74, .25); }

/* Language segmented button */
.segmented { display: none; margin-left: auto; border: 1px solid var(--md-outline); border-radius: var(--shape-full); overflow: hidden; }
.seg { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 2px 14px; font-size: .875rem; font-weight: 500; color: var(--md-on-surface); text-decoration: none; }
.seg + .seg { border-left: 1px solid var(--md-outline); }
.seg[aria-current="true"] { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.seg[aria-current="true"] .icon { width: 16px; height: 16px; }
.seg:hover { color: var(--md-on-surface); }

/* Larger text (A+ in the top bar): type is set in rem, so it all grows with the root size. */
html.text-large { font-size: 120%; }
.text-size-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 32px; padding: 2px 12px; margin-left: auto; border: 1px solid var(--md-outline); border-radius: var(--shape-full); background: transparent; color: var(--md-on-surface); font: inherit; font-size: .875rem; font-weight: 700; line-height: 1; cursor: pointer; }
.text-size-btn:hover { background: var(--md-surface-highest); }
.text-size-btn[aria-pressed="true"] { background: var(--md-secondary-container); color: var(--md-on-secondary-container); border-color: transparent; }
.text-size-btn.in-topbar { display: none; }
.text-size-btn.in-appbar { min-height: 36px; min-width: 40px; padding: 2px 10px; margin-left: 0; }
.text-size-btn[hidden] { display: none !important; }
.text-size-btn + .segmented { margin-left: 0; }

/* Top app bar */
.appbar { position: sticky; top: 0; z-index: 40; background: var(--md-surface); transition: background .2s var(--ease), box-shadow .2s var(--ease); }
.appbar.is-scrolled { background: var(--md-surface-container); box-shadow: 0 1px 0 var(--md-outline-variant); }
.appbar-inner { display: flex; align-items: center; gap: 8px; min-height: var(--appbar); }
.brand { display: inline-flex; align-items: center; margin-right: auto; padding: 8px 0; }
.brand img { width: 140px; height: auto; }
.appbar-book { display: none; }

/* Navigation: modal drawer on phones, inline on wide screens */
.nav-button { margin-left: 4px; color: var(--md-on-surface); }
.main-nav ul { list-style: none; margin: 0; padding: 0; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 4px 8px 16px; }
.drawer-head img { width: 120px; }
.nav-section { display: block; padding: 18px 16px 8px; font-size: .875rem; font-weight: 600; color: var(--md-on-surface-variant); }
.nav-group { display: block; padding: 12px 16px 4px; font-size: .8125rem; font-weight: 600; color: var(--md-on-surface-variant); letter-spacing: .2px; }
.drawer-item, .main-nav .menu-item {
    display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px;
    border-radius: var(--shape-full); color: var(--md-on-surface-variant); text-decoration: none; font-weight: 500;
}
/* On Hindi pages, marks a menu item that opens an English page */
.menu-lang { margin-left: auto; padding: 1px 6px; border-radius: var(--shape-full); box-shadow: inset 0 0 0 1px var(--md-outline-variant); font-size: .6875rem; font-weight: 600; line-height: 1.4; }
.main-nav a[aria-current="page"] { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.main-nav .icon { width: 22px; height: 22px; }
.drawer-cta { padding: 16px; display: grid; gap: 10px; }
.nav-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .32); z-index: 55; opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); }
.nav-scrim.is-open { opacity: 1; pointer-events: auto; }
/* The sticky app bar is its own stacking layer, so while the drawer is open it is lifted above the scrim;
   otherwise the scrim sits over the drawer and catches every tap on a menu item. */
body.no-scroll .appbar { z-index: 60; }

.main-nav {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 60; width: min(360px, 88vw);
    background: var(--md-surface-low); border-radius: 0 var(--shape-l) var(--shape-l) 0; padding: 4px 12px 24px;
    overflow-y: auto; transform: translateX(-105%); transition: transform .3s var(--ease-decel); visibility: hidden;
}
.main-nav.is-open { transform: none; visibility: visible; box-shadow: var(--elev-3); }
.no-js .main-nav { position: static; transform: none; visibility: visible; width: auto; border-radius: 0; }
.desktop-only { display: none; }

/* Breadcrumbs */
.breadcrumbs { padding-top: 12px; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; padding: 0; margin: 0 0 16px; font-size: .875rem; color: var(--md-on-surface-variant); }
.breadcrumbs li + li::before { content: "›"; margin-right: 6px; color: var(--md-outline); }
.breadcrumbs a { color: var(--md-on-surface-variant); }

/* Sections and surfaces */
.section { padding: 40px 0; }
.section-tight { padding: 24px 0; }
.section-head { max-width: 760px; margin-bottom: 24px; }
.section-head h2 { margin-top: 0; }
.section-head p { color: var(--md-on-surface-variant); }
.surface-low { background: var(--md-surface-low); }
.surface-panel { background: var(--md-surface-low); border-radius: var(--shape-xl); padding: 24px 16px; }

/* Home hero */
.hero { padding: 8px 0 8px; }
.hero-card {
    position: relative; display: grid; gap: 8px; overflow: hidden;
    background: var(--md-primary-container); color: var(--md-on-primary-container);
    border-radius: var(--shape-xl); padding: 28px 20px 0;
}
.hero-card h1 { color: var(--md-on-primary-container); font-size: 2rem; line-height: 2.5rem; margin-bottom: 12px; }
.hero-card .lead { color: var(--md-on-primary-container); }
.hero-card .chip { background: rgba(255, 255, 255, .65); border-color: transparent; color: var(--md-on-primary-container); }
.hero-card .chip .icon { color: var(--md-on-primary-container); }
.hero-media { position: relative; display: flex; justify-content: center; align-items: flex-end; min-height: 300px; }
.hero-media::before {
    content: ""; position: absolute; width: min(320px, 82%); aspect-ratio: 1; bottom: 24px; left: 50%; transform: translateX(-50%);
    background: var(--md-primary); opacity: .9;
    -webkit-mask: url("shape-cookie.svg") center / contain no-repeat; mask: url("shape-cookie.svg") center / contain no-repeat;
}
.hero-media img { position: relative; width: min(250px, 66%); height: auto; }
/* Page hero with an information panel instead of a portrait */
.hero-card.has-panel { padding-bottom: 20px; }
.hero-panel { background: var(--md-surface-lowest); border-radius: var(--shape-xl); padding: 16px 20px 20px; box-shadow: var(--elev-1); margin-bottom: 4px; }
.hero-panel .fact-list { margin-bottom: 8px; }
.hero-panel .fact-list li { padding: 8px 0; }
.hero-panel .btn { width: 100%; }
.hero-badge {
    position: absolute; left: 0; right: 0; bottom: 16px; margin: 0 auto; width: max-content; max-width: 92%;
    display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px;
    background: var(--md-surface-lowest); color: var(--md-on-surface); border-radius: var(--shape-l); box-shadow: var(--elev-2); font-size: .875rem; line-height: 1.3;
}
.hero-badge .icon { color: var(--md-primary); }
.hero-badge strong { display: block; font-size: .9375rem; }

/* Quick actions */
.quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.quick {
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; min-height: 104px;
    border-radius: var(--shape-l); background: var(--md-surface-lowest); color: var(--md-on-surface); text-decoration: none; font-weight: 500; box-shadow: var(--elev-1);
}
.quick:hover { color: var(--md-on-surface); }
.quick .icon-badge { width: 40px; height: 40px; border-radius: var(--shape-m); }
.quick small { display: block; font-weight: 400; color: var(--md-on-surface-variant); font-size: .8125rem; line-height: 1.3; }
.quick-wa .icon-badge { background: #c9f0d8; color: #0b3d22; }

/* Icon badges (tonal containers) */
.icon-badge {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 48px; height: 48px; border-radius: var(--shape-l);
    background: var(--md-primary-container); color: var(--md-on-primary-container);
}
.icon-badge.is-round { border-radius: 50%; }
.icon-badge.is-cookie { border-radius: 0; -webkit-mask: url("shape-cookie.svg") center / contain no-repeat; mask: url("shape-cookie.svg") center / contain no-repeat; }
.icon-badge.is-flower { border-radius: 0; -webkit-mask: url("shape-flower.svg") center / contain no-repeat; mask: url("shape-flower.svg") center / contain no-repeat; }
.icon-badge.is-large { width: 88px; height: 88px; }
.icon-badge.is-large .icon { width: 44px; height: 44px; }
.icon-badge.secondary { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }

/* Facts list (Material list items with leading icons) */
.fact-list { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 4px; }
.fact-list li { display: flex; gap: 14px; align-items: flex-start; padding: 10px 0; }
.fact-list .icon-badge { width: 40px; height: 40px; border-radius: var(--shape-m); }
.fact-list .icon-badge .icon { width: 22px; height: 22px; }
.fact-list strong { display: block; font-weight: 600; }
.fact-list span { color: var(--md-on-surface-variant); }
.fact-strip { display: grid; gap: 12px; grid-template-columns: 1fr; padding: 0; list-style: none; margin: 0; }
.fact-strip li { display: flex; gap: 12px; align-items: center; padding: 14px 16px; background: var(--md-surface-lowest); border-radius: var(--shape-l); border: 1px solid var(--md-outline-variant); }
.fact-strip strong { display: block; font-size: .9375rem; }
.fact-list .icon-badge, .fact-strip .icon-badge { display: inline-flex; color: var(--md-on-primary-container); }
.fact-strip span { display: block; color: var(--md-on-surface-variant); font-size: .875rem; line-height: 1.4; }

/* Cards */
.card-grid { display: grid; gap: 12px; grid-template-columns: 1fr; padding: 0; margin: 0; list-style: none; }
.card {
    display: block; padding: 20px; border-radius: var(--shape-l);
    background: var(--md-surface-lowest); color: var(--md-on-surface); border: 1px solid var(--md-outline-variant);
}
.card-grid .card, .carousel .card { height: 100%; }
.card-grid .card { display: flex; flex-direction: column; gap: 12px; }
.card-filled { background: var(--md-surface-highest); border-color: transparent; }
.card-elevated { background: var(--md-surface-low); border-color: transparent; box-shadow: var(--elev-1); }
.card-link { display: flex; flex-direction: column; gap: 12px; text-decoration: none; transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
.card-link:hover { color: var(--md-on-surface); box-shadow: var(--elev-2); border-color: transparent; }
.card h3, .card h2 { margin: 0; font-size: 1.125rem; line-height: 1.5rem; font-weight: 600; color: var(--md-on-surface); }
.card p { margin: 0; color: var(--md-on-surface-variant); font-size: .9375rem; line-height: 1.5; }
.card .more { margin-top: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--md-primary); font-weight: 500; font-size: .9375rem; }
.card .more .icon { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.card-link:hover .more .icon { transform: translateX(3px); }
[hidden] { display: none !important; }

/* Doctor profile */
.profile-card { display: grid; gap: 20px; align-items: center; background: var(--md-surface-lowest); border-radius: var(--shape-xl); padding: 20px; border: 1px solid var(--md-outline-variant); }
.profile-photo { position: relative; width: 220px; margin: 0 auto; padding: 20px 20px 0; background: var(--md-primary-container); border-radius: var(--shape-xl) var(--shape-xl) var(--shape-xl) 96px; overflow: hidden; }
.profile-photo img { position: relative; width: 100%; }
.profile-card h2, .profile-card h3 { margin-top: 0; }
.cred-list { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 10px; }
.cred-list li { display: flex; gap: 12px; align-items: flex-start; }
.cred-list .icon { color: var(--md-primary); margin-top: 2px; }

/* Photo gallery */
.gallery { display: grid; gap: 12px; grid-template-columns: 1fr; padding: 0; margin: 0 0 16px; list-style: none; }
.gallery figure { margin: 0; background: var(--md-surface-lowest); border-radius: var(--shape-l); overflow: hidden; border: 1px solid var(--md-outline-variant); }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gallery figcaption { padding: 10px 14px 12px; font-size: .875rem; color: var(--md-on-surface-variant); line-height: 1.45; }

/* Timeline (education) */
.timeline { list-style: none; margin: 0 0 16px; padding: 0 0 0 4px; }
.timeline li { position: relative; padding: 0 0 18px 32px; }
.timeline li::before { content: ""; position: absolute; left: 7px; top: 22px; bottom: -2px; width: 2px; background: var(--md-outline-variant); }
.timeline li:last-child::before { display: none; }
.timeline li::after { content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--md-primary-container); box-shadow: inset 0 0 0 4px var(--md-primary); }
.timeline strong { display: block; }
.timeline span { color: var(--md-on-surface-variant); }

/* Steps */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 12px; }
.steps li { counter-increment: step; position: relative; padding: 14px 16px 14px 64px; background: var(--md-surface-lowest); border-radius: var(--shape-l); border: 1px solid var(--md-outline-variant); min-height: 64px; }
.steps li::before {
    content: counter(step); position: absolute; left: 14px; top: 14px; width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center; border-radius: var(--shape-m);
    background: var(--md-primary); color: var(--md-on-primary); font-weight: 600;
}
.steps-cards { display: grid; gap: 12px; grid-template-columns: 1fr; }

/* Article (health pages) */
.page-header { padding: 4px 0 8px; }
.page-header-card { background: var(--md-surface-low); border-radius: var(--shape-xl); padding: 20px 16px 24px; display: grid; gap: 16px; }
.page-header-card h1 { margin-bottom: 8px; }
.page-header-card .lead { margin-bottom: 12px; }
.page-header-art { display: none; }
.page-body { padding-top: 16px; padding-bottom: 8px; }
.content { max-width: 760px; min-width: 0; }
.content-with-aside { display: grid; gap: 24px; }
.prose { font-size: 1.0625rem; line-height: 1.75; }
.prose h2 { padding-top: 8px; }
.prose ul:not([class]), .prose ol:not([class]) { padding-left: 1.3em; }
.prose li { margin-bottom: 6px; }
.check-list { list-style: none; padding: 0; }
.check-list li { position: relative; padding-left: 34px; margin-bottom: 10px; }
.check-list li::before {
    content: ""; position: absolute; left: 0; top: .2em; width: 22px; height: 22px; background: var(--md-primary);
    -webkit-mask: var(--check-circle) center / contain no-repeat; mask: var(--check-circle) center / contain no-repeat;
}
.toc { background: var(--md-surface-lowest); border: 1px solid var(--md-outline-variant); border-radius: var(--shape-l); padding: 14px 16px; margin: 0 0 24px; }
.toc p { margin: 0 0 8px; font-weight: 600; font-size: .9375rem; }
.prose .toc ol { list-style: none; margin: 0; padding: 0 0 4px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.toc li { flex: none; margin: 0; }
.toc a { display: inline-flex; min-height: 32px; align-items: center; padding: 4px 12px; border-radius: var(--shape-s); background: var(--md-surface-container); color: var(--md-on-surface); text-decoration: none; font-size: .875rem; font-weight: 500; }
.toc a:hover { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }

.info-box { display: block; background: var(--md-secondary-container); color: var(--md-on-secondary-container); padding: 18px 20px; border-radius: var(--shape-l); margin: 0 0 20px; }
.info-box h2, .info-box h3 { margin-top: 0; color: inherit; font-size: 1.25rem; }
.info-box p:last-child, .info-box ul:last-child { margin-bottom: 0; }
.emergency { background: var(--md-error-container); color: var(--md-on-error-container); position: relative; padding-left: 60px; }
.emergency::before {
    content: ""; position: absolute; left: 18px; top: 20px; width: 26px; height: 26px; background: var(--md-error);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M109-120q-11 0-20-5.5T75-140q-5-9-5.5-19.5T75-180l370-640q6-10 15.5-15t19.5-5q10 0 19.5 5t15.5 15l370 640q6 10 5.5 20.5T885-140q-5 9-14 14.5t-20 5.5H109Zm371-120q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm0-120q17 0 28.5-11.5T520-400v-120q0-17-11.5-28.5T480-560q-17 0-28.5 11.5T440-520v120q0 17 11.5 28.5T480-360Z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M109-120q-11 0-20-5.5T75-140q-5-9-5.5-19.5T75-180l370-640q6-10 15.5-15t19.5-5q10 0 19.5 5t15.5 15l370 640q6 10 5.5 20.5T885-140q-5 9-14 14.5t-20 5.5H109Zm371-120q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm0-120q17 0 28.5-11.5T520-400v-120q0-17-11.5-28.5T480-560q-17 0-28.5 11.5T440-520v120q0 17 11.5 28.5T480-360Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.emergency h2, .emergency h3 { color: var(--md-on-error-container); }
.emergency a { color: var(--md-on-error-container); }

/* Review line (E-E-A-T) */
.review-line { display: flex; gap: 12px; align-items: center; font-size: .875rem; line-height: 1.5; color: var(--md-on-surface-variant); background: var(--md-surface-lowest); border-radius: var(--shape-l); padding: 10px 14px; margin: 0; }
.review-line img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: top; background: var(--md-primary-container); flex: none; }

/* Placeholders that must be resolved before launch */
.confirm { background: var(--warn-bg); color: var(--warn-ink); padding: 0 4px; border-radius: 4px; font-weight: 600; }

/* FAQ (expansion panels) */
.faq { margin: 40px 0 0; }
.faq h2 { margin-top: 0; }
.faq details { background: var(--md-surface-lowest); border-radius: var(--shape-l); margin-bottom: 8px; border: 1px solid var(--md-outline-variant); transition: background .2s var(--ease); }
.faq details[open] { background: var(--md-surface-low); border-color: transparent; }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 14px 20px; font-weight: 600; min-height: 56px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: ""; flex: none; width: 24px; height: 24px; background: var(--md-on-surface-variant); transition: transform .2s var(--ease);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-361q-8 0-15-2.5t-13-8.5L268-556q-11-11-11-28t11-28q11-11 28-11t28 11l156 156 156-156q11-11 28-11t28 11q11 11 11 28t-11 28L508-372q-6 6-13 8.5t-15 2.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-361q-8 0-15-2.5t-13-8.5L268-556q-11-11-11-28t11-28q11-11 28-11t28 11l156 156 156-156q11-11 28-11t28 11q11 11 11 28t-11 28L508-372q-6 6-13 8.5t-15 2.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.faq details[open] summary::after { transform: rotate(180deg); }
.faq-answer { padding: 0 20px 16px; color: var(--md-on-surface-variant); }
.faq-answer p:last-child { margin-bottom: 0; }

/* Call to action band */
.cta { padding: 16px 0 40px; }
.cta-card { background: var(--md-primary); color: var(--md-on-primary); border-radius: var(--shape-xl); padding: 28px 20px; display: grid; gap: 16px; position: relative; overflow: hidden; }
.cta-card::after {
    content: ""; position: absolute; width: 260px; height: 260px; right: -80px; top: -90px; background: rgba(255, 255, 255, .08);
    -webkit-mask: url("shape-flower.svg") center / contain no-repeat; mask: url("shape-flower.svg") center / contain no-repeat; pointer-events: none;
}
.cta h2 { color: var(--md-on-primary); margin: 0 0 8px; }
.cta p { margin: 0; color: #d9f4fc; }
.cta a:not(.btn) { color: #fff; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 10px; position: relative; z-index: 1; }

/* Visit card beside health pages */
.visit-card { background: var(--md-surface-lowest); border-radius: var(--shape-xl); padding: 20px; border: 1px solid var(--md-outline-variant); }
.visit-card h2 { font-size: 1.25rem; line-height: 1.75rem; margin: 0 0 4px; }
.visit-card .fact-list { margin-bottom: 8px; }
.visit-card .fact-list li { padding: 8px 0; font-size: .9375rem; line-height: 1.45; }
.visit-card .btn { width: 100%; margin-top: 8px; }
.visit-card .book-link { margin: 12px 0 0; text-align: center; font-size: .9375rem; }

/* Related pages carousel */
.carousel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 78%); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 12px; margin: 0; list-style: none; scrollbar-width: thin; }
.carousel > li { scroll-snap-align: start; }

/* Form (Material 3 outlined text fields) */
.appointment-form { background: var(--md-surface-lowest); border-radius: var(--shape-xl); padding: 24px 20px; border: 1px solid var(--md-outline-variant); }
.appointment-form h2 { margin-top: 0; }
.appointment-form > p { color: var(--md-on-surface-variant); }
.field { margin: 0 0 16px; }
.field label { display: block; font-weight: 500; font-size: .9375rem; margin: 0 0 6px; color: var(--md-on-surface); }
.appointment-form input, .appointment-form select {
    width: 100%; min-height: 56px; padding: 14px 16px; font: inherit; color: var(--md-on-surface);
    border: 1px solid var(--md-outline); border-radius: var(--shape-xs); background: var(--md-surface-lowest);
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.appointment-form input:hover, .appointment-form select:hover { border-color: var(--md-on-surface); }
.appointment-form input:focus, .appointment-form select:focus { outline: none; border-color: var(--md-primary); box-shadow: inset 0 0 0 1px var(--md-primary); }
.appointment-form small { display: block; color: var(--md-on-surface-variant); font-size: .8125rem; margin: 4px 16px 0; }
.appointment-form .btn { width: 100%; margin-top: 8px; }
.privacy-note { display: flex; gap: 8px; font-size: .8125rem; color: var(--md-on-surface-variant); margin: 14px 0 0; line-height: 1.5; }
.privacy-note .icon { width: 18px; height: 18px; color: var(--md-primary); margin-top: 1px; }
.form-errors { background: var(--md-error-container); color: var(--md-on-error-container); border-radius: var(--shape-m); padding: 10px 16px; margin-bottom: 16px; }
.form-errors ul { margin: 0; padding-left: 1.2em; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Map */
.map {
    position: relative; min-height: 280px; height: 100%; border-radius: var(--shape-xl); overflow: hidden;
    display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; padding: 20px;
    background:
        repeating-linear-gradient(0deg, transparent 0 38px, rgba(0, 103, 124, .07) 38px 40px),
        repeating-linear-gradient(90deg, transparent 0 38px, rgba(0, 103, 124, .07) 38px 40px),
        var(--md-surface-container);
}
.map .icon-badge { box-shadow: var(--elev-2); }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-directions { font-weight: 500; }

/* Areas */
.areas { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 8px; }

/* Blog */
.post-meta { color: var(--md-on-surface-variant); font-size: .875rem; }
.post-list { list-style: none; padding: 0; display: grid; gap: 12px; }
.post-cover { border-radius: var(--shape-l); margin: 0 0 20px; }

/* Tables */
.table-wrap { overflow-x: auto; }
table { border-collapse: separate; border-spacing: 0; width: 100%; margin-bottom: 16px; background: var(--md-surface-lowest); border: 1px solid var(--md-outline-variant); border-radius: var(--shape-l); overflow: hidden; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--md-outline-variant); vertical-align: top; }
tr:last-child th, tr:last-child td { border-bottom: 0; }
th { font-weight: 600; }

.note { font-size: .9375rem; color: var(--md-on-surface-variant); }
.doctor-facts { font-size: .9375rem; color: var(--md-on-surface-variant); }
.two-col { display: grid; gap: 24px; }

/* Footer */
.site-footer { background: var(--md-inverse-surface); color: var(--md-inverse-on-surface); padding: 40px 0 20px; font-size: .9375rem; margin-top: 24px; border-radius: var(--shape-xl) var(--shape-xl) 0 0; }
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--md-inverse-primary); }
.footer-grid { display: grid; gap: 28px; }
.footer-logo { display: inline-block; background: var(--md-surface-lowest); border-radius: var(--shape-l); padding: 10px 14px; margin-bottom: 14px; }
.footer-logo img { width: 140px; }
.footer-name, .footer-heading { font-weight: 600; color: #fff; margin-bottom: 8px; font-size: 1rem; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 6px; }
.footer-links a, .footer-contact a { text-decoration: none; }
.footer-links a:hover, .footer-contact a:hover { text-decoration: underline; }
.footer-contact { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; }
.footer-contact .icon { color: var(--md-inverse-primary); width: 20px; height: 20px; margin-top: 2px; }
.footer-bottom { border-top: 1px solid #454c4f; margin-top: 28px; padding-top: 16px; font-size: .8125rem; color: #c0c8cb; display: grid; gap: 6px; }
.footer-bottom p { margin: 0; }

/* Mobile bottom app bar */
.mobile-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--md-surface-container); box-shadow: 0 -1px 0 var(--md-outline-variant), 0 -2px 8px rgba(0, 0, 0, .06);
}
.mobile-bar .btn { min-height: 52px; }

/* Phones: icon cards (no picture) as compact list items */
@media (max-width: 599px) {
    .card-grid .card-link:has(> .icon-badge) { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 4px; align-items: start; padding: 16px; }
    .card-grid .card-link > .icon-badge { grid-row: span 2; }
    .card-grid .card-link:has(> .icon-badge) .more { display: none; }
    .hero-card h1 { font-size: 1.75rem; line-height: 2.25rem; }
    .hero-card.is-page h1 { font-size: 1.625rem; line-height: 2.125rem; }
}

/* Small utilities */
.mt-0 { margin-top: 0; }
.mt-16 { margin-top: 16px; }
.card .card-title { margin: 16px 0 8px; font-size: 1.375rem; line-height: 1.75rem; font-weight: 500; }
.card-filled p { color: var(--md-on-surface); }

/* Wider screens */
@media (min-width: 600px) {
    .topbar-label { display: inline; }
    .topbar-hours .icon { display: inline-block; }
    .quick-grid { grid-template-columns: repeat(4, 1fr); }
    .card-grid { grid-template-columns: repeat(2, 1fr); }
    .fact-strip { grid-template-columns: repeat(2, 1fr); }
    .fact-strip.is-1 { grid-template-columns: 1fr; }
    .gallery { grid-template-columns: repeat(2, 1fr); }
    .carousel { grid-auto-columns: minmax(260px, 44%); }
    .hero-card { padding: 36px 32px 0; }
    .surface-panel { padding: 32px; }
}

@media (min-width: 840px) {
    h1 { font-size: 2.25rem; line-height: 2.75rem; }
    h2 { font-size: 1.75rem; line-height: 2.25rem; }
    .hero { padding: 16px 0 8px; }
    .hero-card { grid-template-columns: 1.25fr .75fr; align-items: center; padding: 48px 48px 0; border-radius: var(--shape-xxl); }
    .hero-card h1 { font-size: 2.875rem; line-height: 3.375rem; }
    .hero-card.is-page h1 { font-size: 2.25rem; line-height: 2.875rem; }
    .hero-card.has-panel { padding-bottom: 48px; }
    .hero-card.has-panel .hero-copy { padding-bottom: 0; }
    .hero-panel { padding: 20px 24px 24px; }
    .fact-strip.is-2 { grid-template-columns: repeat(2, 1fr); align-content: start; }
    .hero-copy { padding-bottom: 48px; }
    .hero-media { min-height: 420px; }
    .hero-media::before { width: 340px; }
    .hero-media img { width: 290px; }
    .two-col { grid-template-columns: 1fr 1fr; gap: 32px; }
    .steps-cards { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1.4fr 1.2fr 1fr 1fr; }
    .cta-card { grid-template-columns: 1.4fr 1fr; align-items: center; padding: 40px; border-radius: var(--shape-xxl); }
    .cta-actions { justify-content: flex-end; }
    .profile-card { grid-template-columns: 220px 1fr; padding: 28px; }
    .page-header-card { grid-template-columns: 1fr auto; align-items: center; padding: 32px 40px; border-radius: var(--shape-xxl); }
    .page-header-art { display: block; padding-right: 8px; }
    .page-header-art .icon-badge { width: 160px; height: 160px; }
    .page-header-art .icon-badge .icon { width: 72px; height: 72px; }
    .fact-strip { grid-template-columns: repeat(4, 1fr); }
    .fact-strip.is-1 { grid-template-columns: 1fr; }
    .gallery { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
    body { padding-bottom: 0; }
    .mobile-bar, .nav-button, .drawer-head, .drawer-cta, .nav-scrim, .mobile-only { display: none; }
    .desktop-only { display: initial; }
    .segmented { display: inline-flex; }
    .text-size-btn.in-topbar { display: inline-flex; }
    .text-size-btn.in-appbar { display: none; }
    .prose .toc ol { flex-wrap: wrap; overflow: visible; }
    .toc li { flex: initial; }
    .appbar-inner { min-height: 72px; gap: 16px; }
    .appbar-book { display: inline-flex; }
    .brand img { width: 150px; }
    .main-nav {
        position: static; transform: none; visibility: visible; width: auto; background: none; padding: 0; border-radius: 0; overflow: visible; box-shadow: none;
    }
    .main-nav > ul { display: flex; align-items: center; gap: 4px; }
    .main-nav .nav-section { display: none; }
    .main-nav .nav-item, .main-nav > ul > li > a.drawer-item {
        display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 14px; border-radius: var(--shape-full);
        color: var(--md-on-surface); font-weight: 500; text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer; white-space: nowrap;
    }
    .main-nav > ul > li > a.drawer-item .icon { display: none; }
    .main-nav .nav-item .icon { width: 20px; height: 20px; transition: transform .2s var(--ease); }
    .has-sub { position: relative; }
    .has-sub.is-open > .nav-item .icon, .no-js .has-sub:hover > .nav-item .icon { transform: rotate(180deg); }
    .has-sub.is-open > .nav-item { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
    .menu {
        display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 50; min-width: 280px;
        background: var(--md-surface-container); border-radius: var(--shape-l); padding: 8px; box-shadow: var(--elev-2);
    }
    /* Opened by site.js (hover with a short close delay, or click). Without JavaScript, hover and focus open it. */
    .has-sub.is-open > .menu, .no-js .has-sub:hover > .menu, .no-js .has-sub:focus-within > .menu { display: block; }
    /* Invisible bridge over the gap between the button and the menu, so the pointer never "falls off". */
    .menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
    .menu.is-wide { min-width: 720px; left: -120px; }
    .has-sub.is-open > .menu.is-wide, .no-js .has-sub:hover > .menu.is-wide, .no-js .has-sub:focus-within > .menu.is-wide { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 8px; }
    .menu .nav-group { padding: 8px 12px 4px; }
    .main-nav .menu .drawer-item { min-height: 44px; padding: 0 12px; border-radius: var(--shape-m); color: var(--md-on-surface); font-size: .9375rem; white-space: nowrap; }
    .main-nav .menu .drawer-item .icon { color: var(--md-primary); width: 20px; height: 20px; }
    .content-with-aside { grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
    .aside-sticky { position: sticky; top: 96px; }
    .card-grid.is-3 { grid-template-columns: repeat(3, 1fr); }
    .card-grid.is-4 { grid-template-columns: repeat(4, 1fr); }
    .gallery.is-4 { grid-template-columns: repeat(4, 1fr); }
    .carousel { grid-auto-columns: minmax(260px, 31%); }
}

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

@media print {
    .mobile-bar, .appbar, .topbar, .cta, .appointment-form, .nav-scrim { display: none; }
    body { background: #fff; padding: 0; }
}

/* Pictures: free-licence (Pexels) photos on condition cards, illustrations on article cards and page headers,
   figures inside health pages, the doctor's photo on the visit card. Illustrations are flat SVGs drawn for this site. */
.card-media {
    display: block; margin: -20px -20px 4px; aspect-ratio: 16 / 9; overflow: hidden; background: #eef8fc;
    border-radius: calc(var(--shape-l) - 1px) calc(var(--shape-l) - 1px) 0 0;
}
.card-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease); }
.card-media.is-photo img { object-position: center 30%; }
.card-link:hover .card-media img { transform: scale(1.04); }
.card-photo { margin: 0 0 4px; }
.card-photo img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 30%; border-radius: var(--shape-l); }
.card-photo figcaption { margin-top: 8px; font-size: .8125rem; color: var(--md-on-surface-variant); }

.page-header-art.has-illustration { display: block; }
.page-header-art.has-illustration img { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto; }

/* Figures use the full width of the text column. Wide photos sit above their caption;
   other pictures sit beside it from 640px, so the space is used without enlarging them. */
.figure { margin: 28px 0; background: var(--md-surface-lowest); border: 1px solid var(--md-outline-variant); border-radius: var(--shape-l); overflow: hidden; }
.figure img { display: block; width: 100%; height: auto; background: #fff; }
.figure figcaption { padding: 14px 18px 16px; font-size: .9375rem; line-height: 1.5; color: var(--md-on-surface-variant); }
.figure.is-wide img { aspect-ratio: 16 / 9; object-fit: cover; }
.figure-row { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 28px 0; }
.figure-row > .figure { margin: 0; }

.visit-doctor { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 12px; border-bottom: 1px solid var(--md-outline-variant); }
.visit-doctor img { width: 64px; height: 64px; flex: none; border-radius: 50%; object-fit: cover; object-position: center top; background: var(--md-primary-container); }
.visit-doctor p { margin: 0; display: grid; font-size: .8125rem; line-height: 1.35; color: var(--md-on-surface-variant); }
.visit-doctor strong { font-size: .9375rem; color: var(--md-on-surface); }

/* Appointment form: inline errors (Material 3 error colour), date and time side by side. */
.field-row { display: grid; grid-template-columns: 1fr; gap: 0 12px; }
.field-row .field { margin-bottom: 8px; }
.field-hint { margin: -2px 0 16px; }
.field-hint small { margin-top: 2px; }
.field-error { margin: 6px 16px 0; font-size: .8125rem; line-height: 1.4; color: var(--md-error); font-weight: 500; }
.field.has-error label { color: var(--md-error); }
.appointment-form .field.has-error input, .appointment-form .field.has-error select { border-color: var(--md-error); box-shadow: inset 0 0 0 1px var(--md-error); }
.appointment-form input[type="date"] { min-height: 56px; }
.appointment-form select option:disabled { color: var(--md-outline); }
.form-errors p { margin: 0; font-weight: 500; }

@media (max-width: 599px) {
    .card-media { aspect-ratio: 2 / 1; }
    .page-header-art.has-illustration img { max-width: 260px; }
}
@media (min-width: 640px) {
    .figure:not(.is-wide) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .figure.is-tall { grid-template-columns: 240px minmax(0, 1fr); }
    .figure:not(.is-wide) img { height: 100%; object-fit: cover; }
    .figure:not(.is-wide) figcaption { display: flex; align-items: center; padding: 24px 28px; font-size: 1rem; line-height: 1.55; background: var(--md-surface-low); }
    .figure-row > .figure { display: block; }
    .figure-row > .figure img { height: auto; }
    .figure-row > .figure figcaption { display: block; padding: 14px 18px 16px; font-size: .9375rem; background: none; }
}
@media (min-width: 480px) {
    .figure-row { grid-template-columns: 1fr 1fr; }
    .field-row { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 840px) {
    .page-header-art.has-illustration { padding-right: 0; }
    .page-header-art.has-illustration img { width: 300px; max-width: none; }
}

/* Home slider: full-width slides that scroll and snap, so it works by swipe without the script.
   The script adds dots, previous/next and autoplay, which stops once a visitor picks a slide. Slide 1 holds the H1
   and the portrait, which is the page's largest image; the other slides' photos load after the page. */
.slider { position: relative; }
.slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.slides::-webkit-scrollbar { display: none; }
.slide { --tone-bg: var(--md-primary-container); position: relative; flex: 0 0 100%; display: flex; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; background: var(--tone-bg); color: var(--md-on-primary-container); }
.tone-secondary { --tone-bg: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.tone-deep { --tone-bg: var(--md-on-primary-container); color: #fff; }
.slide-inner { position: relative; width: 100%; max-width: var(--wrap); margin: 0 auto; display: grid; gap: 16px; align-content: center; padding: 28px 16px 24px; }
.slide-copy { position: relative; z-index: 1; }
.slide h1, .slide h2, .slide .lead { color: inherit; }
.slide h1 { font-size: 1.75rem; line-height: 2.25rem; margin-bottom: 12px; }
.slide h2 { font-size: 1.625rem; line-height: 2.125rem; margin: 0 0 12px; font-weight: 500; }
.slide .lead { margin: 0; }
.tone-deep .eyebrow { color: var(--md-primary-container); }
.slide .chip { background: rgba(255, 255, 255, .65); border-color: transparent; color: inherit; }
.slide .chip .icon { color: inherit; }
.btn-on-tone { background: var(--md-primary); color: var(--md-on-primary); }
.tone-deep .btn-on-tone, .tone-deep .btn-on-tone:hover { background: var(--md-surface-lowest); color: var(--md-on-primary-container); }
.btn-outlined-tone, .btn-outlined-tone:hover { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }
.slide-media.is-photo { order: -1; margin: -28px -16px 0; aspect-ratio: 16 / 9; background: rgba(0, 0, 0, .12); }
.slide-media.is-photo img { width: 100%; height: 100%; object-fit: cover; }
.slide-media.is-visual { display: flex; justify-content: center; align-items: center; }
.slide:has(.slide-media.is-photo) .slide-inner { align-content: start; }
.slider-controls { display: flex; align-items: center; gap: 4px; padding-top: 8px; padding-bottom: 0; }
.slider-controls[hidden] { display: none; }
.slider-dots { display: flex; align-items: center; margin-right: auto; }
/* Each dot is a 24px target (WCAG 2.5.8); the visible dot is drawn inside it. */
.slider-dots button { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; transition: width .3s var(--ease); }
.slider-dots button::before { content: ""; width: 10px; height: 10px; border-radius: var(--shape-full); background: var(--md-outline); transition: width .3s var(--ease), background .3s var(--ease); }
.slider-dots button[aria-current="true"] { width: 40px; }
.slider-dots button[aria-current="true"]::before { width: 28px; background: var(--md-primary); }

/* The time-slot and address cards drawn on two slides */
.slot-card, .map-card { width: 100%; max-width: 420px; border-radius: var(--shape-xl); padding: 24px; }
.slot-card { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.slot-time { margin: 0; font-size: 2.25rem; line-height: 1.15; font-weight: 700; }
.slot-time span { font-size: 1.125rem; font-weight: 400; }
.slot-time small { font-size: 1rem; font-weight: 500; }
.slot-days { margin: 4px 0 16px; }
.slot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
.slot-grid li { padding: 8px 0; text-align: center; border-radius: var(--shape-full); background: rgba(255, 255, 255, .16); font-weight: 600; font-size: .9375rem; }
.map-card {
    display: grid; justify-items: center; gap: 12px; text-align: center; color: var(--md-on-surface);
    background-color: var(--md-surface-lowest);
    background-image: linear-gradient(var(--md-surface-low) 2px, transparent 2px), linear-gradient(90deg, var(--md-surface-low) 2px, transparent 2px);
    background-size: 32px 32px; box-shadow: var(--elev-1);
}
.map-card p { margin: 0; padding: 8px 14px; border-radius: var(--shape-m); background: var(--md-surface-lowest); }
.map-card strong { display: block; font-size: 1.125rem; }

/* University topper: shown large and bold (owner, 22 October 2026) */
.topper { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 10px 18px 10px 10px; border-radius: var(--shape-l); background: #ffefc2; color: #3b2d00; line-height: 1.3; }
.topper-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: #f6c445; color: #3b2d00; }
.topper strong { display: block; font-size: 1.375rem; line-height: 1.2; font-weight: 800; }
.topper strong + span { display: block; font-size: .875rem; font-weight: 600; }
/* On the first home slide it sits with the text, never over the portrait (owner, 22 October 2026). */
.slide .topper { margin: 16px 0; box-shadow: var(--elev-1); }
.topper.is-large strong { font-size: 1.75rem; }
.timeline .topper { margin: 8px 0 0; }

/* Home: the clinic at a glance, symptoms, features */
.glance { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.glance li { padding: 16px; border-radius: var(--shape-l); background: var(--md-on-primary-container); color: #fff; }
.glance strong { display: block; font-size: 1.5rem; line-height: 1.25; font-weight: 700; }
.glance span { display: block; margin-top: 4px; font-size: .875rem; line-height: 1.4; color: #d3f1fb; }
.symptom-grid { display: grid; gap: 8px; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; }
.symptom-grid a {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; padding: 12px 12px 12px 16px;
    border-radius: var(--shape-l); background: var(--md-surface-lowest); border: 1px solid var(--md-outline-variant); color: var(--md-on-surface); font-weight: 500; text-decoration: none;
}
.symptom-grid a:hover { color: var(--md-on-surface); border-color: var(--md-primary); }
.symptom-grid .icon { color: var(--md-primary); flex: none; }
.feature-grid { display: grid; gap: 12px; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; }
.feature { padding: 20px; border-radius: var(--shape-xl); background: var(--md-surface-low); }
.feature h3 { margin: 14px 0 6px; font-size: 1.125rem; line-height: 1.5rem; font-weight: 600; }
.feature p { margin: 0; color: var(--md-on-surface-variant); font-size: .9375rem; line-height: 1.5; }

/* Clinic details table and nearby areas (About the clinic) */
.details-table { width: 100%; border-collapse: collapse; background: var(--md-surface-lowest); border-radius: var(--shape-l); overflow: hidden; }
.details-table th, .details-table td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--md-outline-variant); }
.details-table th { width: 34%; font-weight: 600; color: var(--md-on-surface); background: var(--md-surface-low); }
.details-table tr:last-child th, .details-table tr:last-child td { border-bottom: 0; }

@media (min-width: 600px) {
    .glance { grid-template-columns: repeat(4, 1fr); }
    .symptom-grid, .feature-grid { grid-template-columns: repeat(2, 1fr); }
    .slide-inner { padding: 36px 32px 32px; }
    .slide-media.is-photo { margin: -36px -32px 0; }
}

@media (min-width: 840px) {
    .slide { min-height: 520px; }
    /* Photos are placed against the slide, so they run to the screen edge. */
    .slide-inner { position: static; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding: 56px 32px; }
    .slide.is-first .slide-inner { position: relative; }
    .slide.is-first .slide-inner { grid-template-columns: 1.25fr .75fr; padding-bottom: 0; }
    .slide.is-first .slide-copy { padding-bottom: 48px; }
    .slide h1 { font-size: 2.875rem; line-height: 3.375rem; }
    .slide h2 { font-size: 2.25rem; line-height: 2.75rem; }
    .slide-media.is-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; margin: 0; aspect-ratio: auto; }
    .slide-media.is-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--tone-bg), transparent 40%); }
    .slider-controls { padding-top: 12px; }
}

@media (min-width: 1024px) {
    .symptom-grid, .feature-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .slides { scroll-behavior: auto; }
}

/* Long pages: sections marked render-later are laid out when they come near the screen, not all at
   page load. Used on the Hindi home page, where shaping Devanagari text makes the first layout slower. */
.render-later { content-visibility: auto; contain-intrinsic-size: auto 900px; }