/* ==========================================================================
   Sri Vamsi Superspeciality Clinics - Design System
   Palette: #011C4F is Dr. Vamsi's own chosen brand navy (replacing an
   earlier, too-bright #1A56DB pick) - used as the primary structural color
   (header, buttons, links, icon badges), with an even deeper shade for the
   darkest surfaces (footer, topbar). Paired with the logo's sky-blue
   caduceus #5BBCDF as the secondary accent, plus the letterhead's
   maroon/red #A6283C reserved for the CTA color.

   Design language: "Clinical Confidence" - deliberately distinct from the
   brandadoc-child-h1 sibling theme's "Editorial Clinic" language (Fraunces
   serif, sharp 4-6px radii, flat bordered cards, left-aligned heads, flat
   full-width bands). This theme uses Manrope (bold geometric sans display
   type) + Public Sans (body), generous 20-24px radii and pill buttons/badges
   echoing the client's own circular SV seal logo, borderless soft-shadow
   elevated cards, centered section heads, and layered/overlapping
   compositions (see .h1-trust-strip) instead of stacked flat bands.

   This stylesheet fully replaces the parent theme's CSS (dequeued in
   functions.php) - every class referenced by parent JS/shortcodes and by
   this child theme's templates is defined here from scratch.
   ========================================================================== */

:root {
	--navy: #011C4F;
	--navy-dark: #001640;
	--navy-deep: #00102F;
	--orange: #A6283C;
	--orange-dark: #841F30;
	--teal: #5BBCDF;
	--teal-dark: #4692AD;
	--cream: #F4FAFD;
	--cream-deep: #E7F3FA;
	--ink: #16202E;
	--slate: #52667A;
	--slate-light: #8CA0B4;
	--white: #FFFFFF;
	--border: rgba(1, 28, 79, 0.16);
	--border-soft: rgba(1, 28, 79, 0.08);
	--shadow-sm: 0 2px 10px rgba(1, 16, 47, 0.07);
	--shadow-md: 0 12px 32px rgba(1, 16, 47, 0.12);
	--shadow-lg: 0 24px 60px rgba(1, 16, 47, 0.18);
	--radius: 14px;
	--radius-lg: 22px;
	--radius-pill: 999px;
	--font-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--container-w: 1240px;
}

/* ---- Reset & base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.65;
	color: var(--ink);
	background: var(--cream);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, h5 {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--navy-deep);
	line-height: 1.1;
	margin: 0 0 0.5em;
	letter-spacing: -0.02em;
}
h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.8rem, 3.1vw, 2.6rem); font-weight: 800; }
h3 { font-size: 1.25rem; font-weight: 700; }
p { margin: 0 0 1em; }
.entry-content p { color: var(--slate); }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

.container { max-width: var(--container-w); margin: 0 auto; padding: 0 24px; }

.h1-section { padding: 88px 0; scroll-margin-top: 90px; }
.h1-section-tint { background: var(--cream-deep); }
.h1-section-head { max-width: 640px; margin: 0 auto 48px; text-align: center; }
.h1-section-head h2 { margin-bottom: 0.4em; }
.h1-section-lead { color: var(--slate); font-size: 1.08rem; }

.h1-eyebrow {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-body);
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--teal-dark);
	background: var(--cream-deep);
	padding: 7px 16px;
	border-radius: var(--radius-pill);
	margin: 0 0 1.1em;
}
.h1-section-tint .h1-eyebrow { background: var(--white); }
.h1-hero-copy .h1-eyebrow,
.h1-founders-copy .h1-eyebrow,
.h1-about-intro-copy .h1-eyebrow { margin-left: 0; }

.h1-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	color: var(--navy);
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease, gap 0.2s ease;
}
.h1-link-arrow:hover { border-color: var(--navy); gap: 10px; }

/* ---- Buttons ---- */
.h1-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 30px;
	font-weight: 700;
	font-size: 0.95rem;
	border-radius: var(--radius-pill);
	border: 1.5px solid transparent;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
	white-space: nowrap;
}
.h1-btn-lg { padding: 16px 34px; font-size: 1rem; }
.h1-btn-sm { padding: 9px 18px; font-size: 0.85rem; }
.h1-btn-primary { background: var(--orange); color: var(--white); box-shadow: var(--shadow-sm); }
.h1-btn-primary:hover { background: var(--orange-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.h1-btn-outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.h1-btn-outline:hover { background: var(--navy); color: var(--white); }
.h1-btn-outline-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.6); }
.h1-btn-outline-light:hover { background: var(--white); color: var(--navy); }
.h1-btn .h1-icon-phone svg { width: 17px; height: 17px; }
.h1-btn .h1-icon { margin-right: 0; }

/* ---- Icons ---- */
.h1-icon { display: inline-flex; align-items: center; margin-right: 6px; }
.h1-icon-phone svg { width: 16px; height: 16px; fill: currentColor; }

/* ==========================================================================
   Header
   ========================================================================== */
.h1-topbar { background: var(--navy-deep); color: rgba(255,255,255,0.78); font-size: 0.8rem; }
.h1-topbar-inner { display: flex; align-items: center; justify-content: space-between; padding: 7px 24px; gap: 16px; flex-wrap: wrap; }
.h1-topbar-info { display: flex; gap: 22px; flex-wrap: wrap; }
.h1-topbar-link { color: inherit; opacity: 0.92; }
.h1-topbar-link:hover { opacity: 1; text-decoration: underline; }
.h1-topbar-tagline { font-weight: 600; opacity: 0.85; font-family: var(--font-body); letter-spacing: 0.02em; }

/* Unified navy header (deliberately not the h1 sibling theme's two-tier
   white-bar-plus-dark-strip pattern) with a sky-blue accent edge. */
.site-header.h1-header {
	background: var(--navy);
	border-bottom: 3px solid var(--teal);
	position: sticky;
	top: 0;
	z-index: 200;
	transition: box-shadow 0.2s ease;
}
.site-header.h1-header.scrolled { box-shadow: var(--shadow-lg); }
.h1-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 14px 24px; }
.h1-logo-img { height: 52px; width: auto; }
.h1-logo-link { display: flex; align-items: center; gap: 12px; }
.h1-logo-mark { height: 48px; width: 48px; }
.h1-logo-wordmark { display: flex; flex-direction: column; line-height: 1.2; }
.h1-logo-wordmark-main { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--white); }
.h1-logo-wordmark-sub { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); }
.h1-nav { flex: 1; display: flex; justify-content: center; }
.h1-nav #primary-menu { display: flex; gap: 26px; align-items: center; }
.h1-nav #primary-menu a { display: inline-block; white-space: nowrap; font-weight: 600; font-size: 0.92rem; color: rgba(255,255,255,0.85); padding: 6px 0; border-bottom: 2px solid transparent; }
.h1-nav #primary-menu a:hover,
.h1-nav #primary-menu a.active { color: var(--white); border-color: var(--teal); }
.h1-header-cta { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.menu-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: none;
	padding: 8px;
}
.menu-toggle span { width: 24px; height: 2px; background: var(--white); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
.menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */
.h1-hero { background: linear-gradient(180deg, var(--cream) 0%, var(--white) 100%); padding: 56px 0 0; position: relative; overflow: hidden; }
/* Real clinic building photo, washed into the light hero background - a
   light gradient sits on top of the photo (same layer, painted first) so
   the copy side stays fully legible and only a soft, brand-toned glimpse
   of the actual building shows through on the right, behind the portrait.
   Photo layer is dropped on small screens where the hero stacks to a
   single column, to keep stacked text legible. */
.h1-hero-backdrop {
	position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
	background-image:
		linear-gradient(115deg, var(--cream) 0%, var(--cream) 40%, rgba(244,250,253,0.75) 60%, rgba(244,250,253,0.45) 80%, rgba(244,250,253,0.65) 100%),
		var(--h1-hero-bg-image);
	background-size: cover, cover;
	background-position: center, 70% 30%;
	background-repeat: no-repeat, no-repeat;
}
.h1-hero-backdrop::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(244,250,253,0) 40%, var(--cream) 97%);
}
.h1-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; padding-bottom: 96px; }
.h1-hero-subtitle { font-size: 1.1rem; color: var(--slate); max-width: 58ch; }
.h1-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.h1-hero-chips li { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; color: var(--navy); background: var(--white); border: 1px solid var(--border); padding: 6px 14px; border-radius: var(--radius-pill); }
.h1-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin: 28px 0 30px; }
.h1-hero-trust { display: flex; flex-direction: column; gap: 10px; }
.h1-hero-trust li { display: flex; align-items: center; font-size: 0.92rem; color: var(--navy-deep); font-weight: 600; }

/* Circular-framed portrait on a soft decorative backdrop - echoes the
   client's own circular SV seal logo, rather than a plain rectangular
   photo card. The stat badge lives in normal flow ABOVE the photo wrap
   (not absolutely positioned over it) so it can never overlap the face -
   only its own bottom edge slightly overlaps the decorative ring via a
   small negative margin. */
/* The client's real clinic signage, mounted on a white plaque so the
   artwork's own navy field reads as a framed board rather than a bare
   rectangle dropped on the cream hero. Grouped tight under the eyebrow,
   with clear air before the headline. */
.h1-hero-signage {
	width: 100%;
	max-width: 560px;
	margin: 10px 0 26px;
	padding: 8px;
	background: var(--white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
}
.h1-hero-signage img {
	width: 100%;
	height: auto;
	border-radius: var(--radius);
}
.h1-hero-media { display: flex; flex-direction: column; align-items: flex-end; }
.h1-hero-photo-wrap { position: relative; padding: 24px; width: 100%; }
.h1-hero-photo-wrap::before {
	content: ''; position: absolute; inset: 0; z-index: 0;
	background: radial-gradient(circle at 50% 42%, var(--cream-deep) 0%, rgba(231,243,250,0) 68%);
}
.h1-hero-photo-wrap::after {
	content: ''; position: absolute; top: 50%; left: 50%; z-index: 0;
	width: 90%; aspect-ratio: 1/1; transform: translate(-50%, -50%);
	border-radius: 50%; border: 2px dashed var(--border); opacity: 0.7;
}
.h1-hero-photo-wrap img {
	position: relative; z-index: 1; display: block; margin: 0 auto;
	border-radius: 50%; box-shadow: var(--shadow-lg); aspect-ratio: 1/1; object-fit: cover;
	width: 84%; border: 6px solid var(--white); outline: 3px solid var(--teal);
}
.h1-hero-media-caption {
	position: absolute; z-index: 2; left: 10%; bottom: 8%;
	background: var(--navy); color: var(--white);
	padding: 12px 22px; border-radius: var(--radius-pill); box-shadow: var(--shadow-md);
	font-size: 0.82rem; font-weight: 700; display: flex; align-items: center;
}

/* Prominent experience/patients-treated callout, sitting above the photo
   in normal flow - the site's single strongest trust signal, surfaced
   right in the hero rather than only lower down in the trust strip. */
.h1-hero-stat-badge {
	position: relative; z-index: 2; margin: 0 8% -20px 0;
	background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
	padding: 16px 20px; display: flex; align-items: center; gap: 16px;
	border-top: 3px solid var(--orange);
}
.h1-hero-stat { text-align: center; }
.h1-hero-stat strong { display: block; font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; color: var(--navy-deep); line-height: 1.1; }
.h1-hero-stat span { display: block; font-size: 0.68rem; font-weight: 600; color: var(--slate); margin-top: 2px; white-space: nowrap; }
.h1-hero-stat-divider { width: 1px; align-self: stretch; background: var(--border); }

/* ---- Trust strip: a floating stat card overlapping the hero, rather than
   a flat full-width band stacked below it. ---- */
.h1-trust-strip { position: relative; z-index: 3; margin-top: -64px; padding: 0 24px; }
.h1-trust-strip-inner {
	max-width: var(--container-w); margin: 0 auto;
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
	background: var(--navy); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
	padding: 40px 24px;
}
.h1-trust-fact { text-align: center; color: var(--white); }
.h1-trust-value { display: block; font-family: var(--font-display); font-size: 2.4rem; font-weight: 800; color: var(--white); }
.h1-trust-label { display: block; font-size: 0.82rem; opacity: 0.82; margin-top: 4px; line-height: 1.35; }

/* ---- Founders story ---- */
/* Panel-left / copy-right - deliberately the mirror of the hero's
   copy-left / photo-right layout, for rhythm variety down the page. DOM
   order keeps the copy first for reading/accessibility order; only the
   visual position flips. */
.h1-founders-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center; }
.h1-founders-media { order: -1; }
.h1-founders-copy p { color: var(--slate); font-size: 1.02rem; }
.h1-founders-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); aspect-ratio: 4/5; object-fit: cover; }

/* Vertical doctor-card variant for the tall, portrait-proportioned
   founders-media column (the horizontal 220px-photo card reads too
   short/squat here - this column wants a tall, photo-forward card). */
.h1-doctor-card.h1-founders-doctor-card {
	grid-template-columns: 1fr; max-width: 400px; margin: 0 auto;
}
.h1-founders-doctor-card .h1-doctor-card-media { aspect-ratio: 4/5; }
.h1-founders-doctor-card .h1-doctor-card-info { padding: 28px 26px; text-align: center; align-items: center; }
.h1-founders-doctor-card .h1-doctor-card-info h3 { font-size: 1.3rem; }
.h1-founders-doctor-card .h1-doctor-experience-badge { align-self: center; }

/* ---- Locations ---- */
.h1-primary-location {
	display: grid; grid-template-columns: 1.1fr 1fr; align-items: stretch; gap: 0;
	background: var(--navy-deep); border-radius: var(--radius-lg); overflow: hidden;
	box-shadow: var(--shadow-lg); margin-bottom: 40px;
}
.h1-primary-location-media { min-height: 100%; }
.h1-primary-location-media img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; display: block; }
.h1-primary-location-info { padding: 40px 44px; color: var(--white); display: flex; flex-direction: column; justify-content: center; }
.h1-primary-location-info .h1-location-tag { color: var(--teal); }
.h1-primary-location-info h3 { color: var(--white); font-size: 1.6rem; margin-bottom: 14px; }
.h1-primary-location-info .h1-location-address { color: rgba(255,255,255,0.82); font-size: 0.98rem; margin-bottom: 14px; }
.h1-primary-location-info .h1-location-schedule { color: var(--white); font-size: 0.98rem; margin-bottom: 24px; }
.h1-primary-location-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
.h1-primary-location-info .h1-btn-outline { border-color: rgba(255,255,255,0.5); color: var(--white); }
.h1-primary-location-info .h1-btn-outline:hover { background: rgba(255,255,255,0.1); }
.h1-primary-location-info .h1-location-google { color: var(--teal); }
/* auto-fit rather than a fixed column count, so the secondary clinic grid
   stays balanced whether there are two cards or more. */
.h1-locations-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.h1-location-card { background: var(--white); border: none; border-top: 4px solid transparent; box-shadow: var(--shadow-sm); border-radius: var(--radius-lg); padding: 30px 26px; transition: box-shadow 0.2s ease, transform 0.2s ease; }
.h1-location-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.h1-location-card--featured { border-top-color: var(--orange); box-shadow: var(--shadow-md); }
.h1-location-card--featured .h1-location-icon { background: var(--orange); }
.h1-location-card--featured .h1-location-tag { color: var(--orange-dark); }
.h1-location-icon {
	width: 52px; height: 52px; border-radius: 50%; background: var(--navy);
	display: flex; align-items: center; justify-content: center; color: var(--white);
	font-size: 1.4rem; margin-bottom: 16px;
}
.h1-location-tag { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-dark); margin: 0 0 6px; }
.h1-location-card h3 { font-size: 1.05rem; margin-bottom: 10px; }
.h1-location-address { color: var(--slate); font-size: 0.9rem; margin-bottom: 14px; }
.h1-location-schedule { font-weight: 700; color: var(--navy-deep); font-size: 0.92rem; margin-bottom: 6px; display: flex; align-items: center; }
.h1-location-contact { color: var(--slate); font-size: 0.86rem; margin: 0; }
.h1-location-google { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; font-size: 0.84rem; font-weight: 700; color: var(--navy); }
.h1-location-google:hover { text-decoration: underline; }
.h1-locations-more { margin-top: 30px; text-align: center; }
.h1-gallery-empty { color: var(--slate); font-size: 1.02rem; text-align: center; padding: 40px 0; }

/* ---- Doctors ---- */
.h1-doctors-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.h1-doctors-grid-single { grid-template-columns: 1fr; max-width: 780px; margin: 0 auto; }
.h1-doctors-grid-single .h1-doctor-card { grid-template-columns: 300px 1fr; }
.h1-doctors-grid-single .h1-doctor-card-info { padding: 36px 40px; justify-content: center; }
.h1-doctors-grid-single .h1-doctor-card-info h3 { font-size: 1.5rem; }
.h1-doctors-grid-single .h1-doctor-designation { font-size: 1.02rem; }
.h1-doctors-grid-single .h1-doctor-specialization { font-size: 0.98rem; margin-bottom: 18px; }
.h1-doctor-card {
	display: grid; grid-template-columns: 220px 1fr;
	background: var(--white); border: none; border-radius: var(--radius-lg);
	overflow: hidden; box-shadow: var(--shadow-md); transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.h1-doctor-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.h1-doctor-card-media { position: relative; background: var(--cream-deep); min-height: 100%; }
.h1-doctor-card-media img { width: 100%; height: 100%; object-fit: cover; }
.h1-doctor-monogram {
	width: 100%; height: 100%; min-height: 220px; display: flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, var(--navy) 0%, var(--teal) 100%);
	color: var(--white); font-family: var(--font-display); font-size: 2.6rem; font-weight: 600;
}
.h1-doctor-monogram-lg { min-height: 340px; font-size: 3.4rem; border-radius: var(--radius-lg); }
.h1-doctor-card-info { padding: 26px 24px; display: flex; flex-direction: column; }
.h1-doctor-card-info h3 { margin-bottom: 4px; }
.h1-doctor-designation { font-weight: 700; color: var(--navy); font-size: 0.92rem; margin-bottom: 2px; }
.h1-doctor-specialization { color: var(--slate); font-size: 0.9rem; margin-bottom: 10px; }
.h1-doctor-experience-badge {
	display: inline-block; align-self: flex-start; background: var(--cream-deep); color: var(--orange-dark);
	font-size: 0.78rem; font-weight: 700; padding: 4px 12px; border-radius: 20px; margin-bottom: 14px;
}
.h1-doctor-card-info .h1-link-arrow { margin-top: auto; }

/* ---- Departments ---- */
/* Horizontal cards, icon-badge-left / content-right - deliberately not the
   h1 sibling theme's vertical icon-on-top layout. */
.h1-departments-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.h1-department-card {
	background: var(--white); border: none; box-shadow: var(--shadow-sm);
	border-radius: var(--radius-lg); padding: 28px 24px; scroll-margin-top: 140px;
	display: flex; align-items: flex-start; gap: 16px;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.h1-department-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.h1-department-icon {
	flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%;
	background: var(--cream-deep); display: flex; align-items: center; justify-content: center;
	font-size: 1.5rem;
}
.h1-department-content { min-width: 0; }
.h1-department-lead { font-size: 0.84rem; font-weight: 600; color: var(--teal-dark); margin-bottom: 14px; }
.h1-department-bullets li { position: relative; padding-left: 18px; font-size: 0.92rem; color: var(--slate); margin-bottom: 8px; }
.h1-department-bullets li::before { content: '\2013'; position: absolute; left: 0; color: var(--orange); font-weight: 700; }
.h1-departments-more { margin-top: 36px; text-align: center; }

/* ---- Facilities bento ---- */
.h1-facilities-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: 18px; }
.h1-facility-item { position: relative; overflow: hidden; border-radius: var(--radius-lg); grid-column: span 2; }
.h1-facility-wide { grid-column: span 4; }
.h1-facility-tall { grid-row: span 2; }
.h1-facility-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.h1-facility-item:hover img { transform: scale(1.05); }
.h1-facility-caption {
	position: absolute; left: 0; right: 0; bottom: 0; padding: 20px;
	background: linear-gradient(180deg, transparent 0%, rgba(1,16,47,0.86) 100%);
	color: var(--white);
}
.h1-facility-caption h3 { color: var(--white); font-size: 1.1rem; margin-bottom: 2px; }
.h1-facility-caption p { color: rgba(255,255,255,0.85); font-size: 0.86rem; margin: 0; }
.h1-facilities-more { margin-top: 30px; }

/* ---- Credentials ---- */
.h1-credentials-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.h1-credentials-grid-single { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
.h1-credential-card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 36px 34px; position: relative; overflow: hidden; }
.h1-credential-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--teal); }
.h1-credential-title { color: var(--slate); font-size: 0.94rem; margin-bottom: 12px; }
.h1-credential-quals { font-size: 0.85rem; letter-spacing: 0.02em; color: var(--navy); font-weight: 600; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--border-soft); }
.h1-credential-awards li { display: flex; gap: 10px; font-size: 0.92rem; color: var(--slate); margin-bottom: 12px; line-height: 1.5; }
.h1-credential-awards li::before { content: '\1F3C6'; flex-shrink: 0; }

/* ---- Patient journey ---- */
.h1-journey-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-bottom: 40px; }
.h1-journey-step { position: relative; padding-top: 8px; text-align: center; }
.h1-journey-num {
	display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;
	width: 48px; height: 48px; border-radius: 50%; background: var(--orange);
	font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; color: var(--white);
}
.h1-journey-step p { color: var(--slate); font-size: 0.94rem; }
.h1-journey-cta { text-align: center; }

/* ---- FAQ accordion ---- */
.brandadoc-faq-accordion { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq-item { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.faq-question {
	width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
	background: none; border: none; padding: 20px 24px; text-align: left; font-weight: 700; font-size: 1.02rem; color: var(--navy-deep);
}
.faq-icon {
	flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--cream-deep);
	display: flex; align-items: center; justify-content: center;
	font-size: 1.2rem; color: var(--orange); transition: transform 0.2s ease;
}
.faq-question[aria-expanded="true"] .faq-icon { transform: rotate(45deg); background: var(--orange); color: var(--white); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-answer.open { max-height: 600px; }
.faq-answer :is(p) { padding: 0 24px 20px; color: var(--slate); }
.h1-faq-more { margin-top: 30px; text-align: center; }

/* ---- On-site pharmacy + diagnostic lab ---- */
/* The page's one dark band. Every other section alternates white and cream,
   so painting this one in the brand navy makes it read as the feature
   moment rather than another row of cards - and the white cards on top gain
   far more separation than they had on the cream tint. */
.h1-onsite {
	position: relative;
	background: linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 55%, #032566 100%);
	overflow: hidden;
}
/* Soft teal glow behind the cards, echoing the logo's sky-blue caduceus. */
.h1-onsite::before {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(closest-side at 18% 0%, rgba(91,188,223,0.20), transparent),
		radial-gradient(closest-side at 88% 100%, rgba(91,188,223,0.13), transparent);
}
.h1-onsite > .container { position: relative; z-index: 1; }
.h1-onsite .h1-eyebrow { background: rgba(91,188,223,0.16); color: var(--teal); }
.h1-onsite .h1-section-head h2 { color: var(--white); }
.h1-onsite .h1-section-lead { color: rgba(255,255,255,0.76); }

.h1-onsite-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.h1-onsite-card {
	background: var(--white);
	border-radius: var(--radius-lg);
	padding: 38px 34px;
	box-shadow: var(--shadow-lg);
	border-top: 4px solid var(--teal);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.h1-onsite-card:hover { transform: translateY(-3px); }
/* Circular icon badge, echoing the clinic's own round SV seal. */
.h1-onsite-icon {
	display: flex; align-items: center; justify-content: center;
	width: 62px; height: 62px; margin-bottom: 20px;
	border-radius: 50%; background: var(--cream-deep);
	font-size: 1.7rem; line-height: 1;
}
.h1-onsite-lead {
	margin: 0 0 4px;
	font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
	text-transform: uppercase; color: var(--teal-dark);
}
.h1-onsite-card h3 { font-size: 1.45rem; margin-bottom: 0.5em; text-transform: uppercase; }
.h1-onsite-desc { color: var(--slate); font-size: 0.95rem; margin-bottom: 20px; }
.h1-onsite-list { display: flex; flex-direction: column; gap: 10px; }
.h1-onsite-list li {
	position: relative; padding-left: 28px;
	font-size: 0.93rem; font-weight: 600; color: var(--navy-deep);
}
.h1-onsite-list li::before {
	content: ''; position: absolute; left: 0; top: 0.36em;
	width: 16px; height: 16px; border-radius: 50%;
	background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px 10px no-repeat;
}

/* The one-visit sequence, stated as a flow rather than a third card - it is
   the point of having both facilities, so it gets its own band. Outlined in
   translucent white to sit on the navy without competing with the cards. */
.h1-onsite-flow {
	display: grid; grid-template-columns: repeat(3, 1fr);
	margin-top: 28px;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.16);
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.h1-onsite-flow-step {
	position: relative;
	display: flex; flex-direction: column; gap: 3px;
	padding: 24px 30px;
	color: var(--white);
}
.h1-onsite-flow-step + .h1-onsite-flow-step { border-left: 1px solid rgba(255,255,255,0.16); }
.h1-onsite-flow-num {
	font-family: var(--font-display); font-size: 0.78rem; font-weight: 800;
	letter-spacing: 0.12em; color: var(--teal);
}
.h1-onsite-flow-step strong { font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; }
.h1-onsite-flow-step span:last-child { font-size: 0.86rem; color: rgba(255,255,255,0.7); }
/* Chevron pointing into the next step, drawn on the divider. */
.h1-onsite-flow-step + .h1-onsite-flow-step::before {
	content: ''; position: absolute; left: -7px; top: 50%; z-index: 1;
	width: 12px; height: 12px; transform: translateY(-50%) rotate(45deg);
	background: #031C4C;
	border-top: 1px solid rgba(255,255,255,0.16);
	border-right: 1px solid rgba(255,255,255,0.16);
}
.h1-onsite-note { margin: 22px 0 0; text-align: center; font-size: 0.92rem; color: rgba(255,255,255,0.66); }
.h1-onsite-note a { font-weight: 700; color: var(--teal); border-bottom: 1px solid rgba(91,188,223,0.45); }
.h1-onsite-note a:hover { color: var(--white); border-color: var(--white); }

/* ---- Contact CTA + forms ---- */
.h1-contact-cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.h1-contact-details { margin-top: 24px; display: flex; flex-direction: column; gap: 14px; }
.h1-contact-details li,
.h1-footer-contact li { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; }
.h1-contact-details a,
.h1-footer-contact a { font-weight: 600; }
.h1-contact-details a:hover,
.h1-footer-contact a:hover { text-decoration: underline; }

/* The one conversion unit on the site. Appointments are taken by phone
   only, so every slot that used to hold a booking or enquiry form renders
   this card: the number stated once, large, and tappable. */
.h1-call-card {
	background: var(--white);
	border-radius: var(--radius-lg);
	padding: 36px 32px;
	box-shadow: var(--shadow-md);
	border-top: 4px solid var(--orange);
	text-align: center;
}
.h1-call-card-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 56px; height: 56px; margin-bottom: 18px;
	border-radius: 50%; background: var(--cream-deep); color: var(--navy);
}
.h1-call-card-icon svg { width: 26px; height: 26px; }
.h1-call-card-heading { font-size: 1.4rem; margin-bottom: 0.4em; }
.h1-call-card-lead { color: var(--slate); font-size: 0.95rem; margin-bottom: 22px; }
.h1-call-card-number {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(1.7rem, 3.4vw, 2.2rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--navy-deep);
	margin-bottom: 18px;
	white-space: nowrap;
}
.h1-call-card-number:hover { color: var(--orange); }
.h1-call-card-btn { width: 100%; }
.h1-call-card-note {
	margin: 18px 0 0;
	font-size: 0.84rem;
	color: var(--slate);
	line-height: 1.5;
}

.h1-contact-letterhead { width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--border-soft); margin-bottom: 24px; }
.h1-contact-info-box { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; }
.h1-contact-info-box .h1-icon { width: 34px; height: 34px; background: var(--cream-deep); border-radius: 50%; align-items: center; justify-content: center; flex-shrink: 0; margin: 0; }
.h1-contact-info-box h4 { margin-bottom: 2px; font-size: 0.95rem; }
.h1-contact-info-box p { margin: 0; color: var(--slate); font-size: 0.92rem; }
.h1-contact-map { margin-top: 40px; }
.google-map-embed { width: 100%; height: 420px; border: 0; border-radius: var(--radius-lg); }

.h1-google-profiles { margin: 8px 0 24px; padding: 22px 24px; background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.h1-google-profiles h4 { font-size: 0.95rem; margin-bottom: 14px; }
.h1-google-profiles ul { display: flex; flex-direction: column; gap: 10px; }
.h1-google-profiles li a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius); transition: background 0.15s ease; }
.h1-google-profiles li a:hover { background: var(--cream-deep); }
.h1-google-profiles .h1-icon { width: 32px; height: 32px; background: var(--cream-deep); border-radius: 50%; align-items: center; justify-content: center; flex-shrink: 0; margin: 0; font-size: 0.95rem; color: #F5A623; }
.h1-google-profiles li strong { display: block; font-size: 0.9rem; color: var(--navy-deep); }
.h1-google-profiles li em { display: block; font-size: 0.78rem; font-style: normal; color: var(--slate); margin-top: 1px; }
.h1-google-profiles-inline { max-width: 720px; margin: 40px auto 0; }
.h1-google-profiles-inline ul { flex-direction: row; flex-wrap: wrap; gap: 10px; }
.h1-google-profiles-inline li a { background: var(--cream-deep); }
.h1-google-profiles-inline li a:hover { background: var(--cream); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer.h1-footer { background: var(--navy-deep); color: rgba(255,255,255,0.82); padding: 64px 0 0; }
.h1-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 40px; padding-bottom: 48px; }
.h1-footer-col h3 { color: var(--white); font-size: 1rem; margin-bottom: 16px; }
.h1-footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.h1-footer-col a { color: rgba(255,255,255,0.78); font-size: 0.92rem; }
.h1-footer-col a:hover { color: var(--white); }
.h1-footer-logo { height: 56px; width: 56px; margin-bottom: 16px; border-radius: 50%; background: var(--white); padding: 3px; }
.h1-footer-about p { font-size: 0.9rem; color: rgba(255,255,255,0.68); margin-bottom: 18px; }
.h1-footer-contact li { color: rgba(255,255,255,0.82); }
.h1-footer-contact a { color: rgba(255,255,255,0.9); }
/* Labels are full words ("Facebook", "Instagram"), not icon glyphs, so
   these render as pill text-links rather than fixed-size icon circles -
   auto-width so the label never overflows its background. Base styling
   below suits the light backgrounds these appear on elsewhere in the
   theme (e.g. the Contact page); .h1-footer-about overrides for the dark
   footer context. */
.brandadoc-social-links { display: flex; gap: 8px; flex-wrap: wrap; }
.social-link {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 8px 16px; background: var(--cream-deep); border-radius: var(--radius-pill);
	font-size: 0.82rem; font-weight: 600; color: var(--navy);
}
.social-link:hover { background: var(--orange); color: var(--white); }
.h1-footer-about .social-link { background: rgba(255,255,255,0.1); color: var(--white); }
.h1-footer-about .social-link:hover { background: var(--orange); }
.h1-footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); padding: 22px 24px; font-size: 0.82rem; color: rgba(255,255,255,0.6); text-align: center; }

/* ---- Floating call button + mobile call bar ---- */
.h1-call-float {
	position: fixed; right: 22px; bottom: 32px; z-index: 300;
	width: 58px; height: 58px; border-radius: 50%; background: var(--orange); color: var(--white);
	display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg);
	transition: transform 0.15s ease, background 0.15s ease;
}
.h1-call-float:hover { background: var(--orange-dark); transform: translateY(-2px); }
.h1-call-float svg { width: 26px; height: 26px; }
.h1-mobile-cta-bar { display: none; }

/* ==========================================================================
   Inner-page shared components
   ========================================================================== */
.h1-page-header { background: var(--cream-deep); padding: 56px 0 40px; }
.h1-page-header h1 { margin-bottom: 10px; }
.breadcrumbs { font-size: 0.85rem; color: var(--slate); }
.breadcrumbs a { color: var(--navy); font-weight: 600; }
.breadcrumbs span { color: var(--slate); }

.content-area { padding: 88px 0; }

/* ---- Contact page ---- */
.h1-contact-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: start; }
.h1-contact-call-area { position: sticky; top: 110px; }
.h1-contact-map { margin-top: 40px; }

/* ---- Doctor single page ---- */
.h1-doctor-hero { background: var(--cream); padding: 64px 0; }
.h1-doctor-hero-inner { display: grid; grid-template-columns: 340px 1fr; gap: 56px; align-items: center; }
.h1-doctor-hero-media img,
.h1-doctor-hero-media .h1-doctor-monogram-lg { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); aspect-ratio: 3/4; width: 100%; object-fit: cover; }
.h1-doctor-hero-designation { font-weight: 700; color: var(--navy); font-size: 1.05rem; margin-bottom: 2px; }
.h1-doctor-hero-specialization { color: var(--slate); font-size: 1rem; margin-bottom: 14px; }
.h1-doctor-experience-badge { display: inline-block; background: var(--white); border: 1px solid var(--border); color: var(--orange-dark); font-size: 0.8rem; font-weight: 700; padding: 5px 14px; border-radius: 20px; margin-bottom: 20px; }

.h1-doctor-quickfacts { background: var(--navy); }
.h1-quickfacts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 32px 24px; }
.h1-quickfact { text-align: center; color: var(--white); }
.h1-quickfact strong { display: block; font-family: var(--font-display); font-size: 1.9rem; }
.h1-quickfact span { font-size: 0.8rem; opacity: 0.82; }

.h1-doctor-about-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; }
.h1-doctor-why { background: var(--cream-deep); border-radius: var(--radius-lg); padding: 30px 26px; align-self: start; position: sticky; top: 100px; }
.h1-doctor-why h3 { margin-bottom: 16px; }
.h1-doctor-why-list li { position: relative; padding-left: 22px; font-size: 0.92rem; color: var(--slate); margin-bottom: 12px; }
.h1-doctor-why-list li::before { content: '\2713'; position: absolute; left: 0; color: var(--teal-dark); font-weight: 700; }

.h1-education-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.h1-education-card { background: var(--white); border: none; box-shadow: var(--shadow-sm); border-radius: var(--radius-lg); padding: 22px; display: flex; gap: 14px; align-items: center; }
.h1-education-icon {
	flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: var(--cream-deep);
	display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.h1-education-card p { margin: 0; font-size: 0.9rem; color: var(--slate); font-weight: 600; }

.h1-achievements-list { max-width: 780px; }
.h1-achievements-list li { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border-soft); font-size: 0.96rem; color: var(--slate); }
.h1-achievement-icon { flex-shrink: 0; }

/* ---- Experience timeline: connected dots-on-a-line, continuing the
   circular medallion motif used for icon badges elsewhere. ---- */
.h1-experience-timeline { max-width: 720px; margin: 0 auto; position: relative; }
.h1-experience-timeline::before {
	content: ''; position: absolute; top: 8px; bottom: 8px; left: 7px;
	width: 2px; background: var(--border);
}
.h1-experience-item { position: relative; padding: 0 0 32px 40px; }
.h1-experience-item:last-child { padding-bottom: 0; }
.h1-experience-dot {
	position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%;
	background: var(--navy); border: 3px solid var(--cream-deep);
}
.h1-experience-dates { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--teal-dark); margin-bottom: 4px; }
.h1-experience-content h3 { font-size: 1.05rem; margin-bottom: 2px; }
.h1-experience-content p { color: var(--slate); font-size: 0.92rem; margin: 0; }

.h1-care-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.h1-care-card { background: var(--white); border: none; box-shadow: var(--shadow-sm); border-radius: var(--radius-lg); padding: 24px 18px; text-align: center; transition: box-shadow 0.2s ease, transform 0.2s ease; }
.h1-care-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.h1-care-icon {
	width: 48px; height: 48px; border-radius: 50%; background: var(--cream-deep);
	display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;
	font-size: 1.4rem;
}
.h1-care-card h3 { font-size: 0.95rem; font-family: var(--font-body); font-weight: 600; color: var(--navy-deep); margin: 0; }
.h1-doctor-services-more { margin-top: 28px; }
.h1-doctor-book-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.h1-doctor-book-card { margin-top: 30px; max-width: 460px; margin-inline: auto; }

/* ---- About page ---- */
.h1-about-intro-grid { max-width: 780px; margin: 0 auto; }
.h1-about-intro-copy p { font-size: 1.05rem; color: var(--slate); }
.h1-team-groups-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.h1-team-group-card { background: var(--white); border: none; box-shadow: var(--shadow-sm); border-radius: var(--radius-lg); padding: 26px; }
.h1-team-group-card h3 { font-size: 1rem; margin-bottom: 10px; color: var(--teal-dark); }
.h1-team-group-card li { font-size: 0.94rem; color: var(--navy-deep); font-weight: 600; padding: 4px 0; }
.h1-team-group-card li a { color: var(--navy); font-weight: 600; font-size: 0.88rem; }
.h1-team-group-card li a:hover { text-decoration: underline; }
.h1-about-cta { text-align: center; }
.h1-about-cta-inner .h1-hero-actions { justify-content: center; margin-top: 24px; }

/* ---- Services page ---- */
.h1-service-group { margin-bottom: 64px; scroll-margin-top: 100px; }
.h1-service-group:last-child { margin-bottom: 0; }
.h1-service-group-head { max-width: 720px; margin-bottom: 28px; }
.h1-service-group-lead { color: var(--teal-dark); font-style: italic; font-size: 0.95rem; }

/* ---- Gallery page ---- */
.h1-gallery-filter,
.gallery-filter { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 32px; }
.filter-btn {
	background: var(--white); border: 1.5px solid var(--border); color: var(--navy-deep);
	padding: 9px 20px; border-radius: 24px; font-weight: 600; font-size: 0.88rem; transition: all 0.15s ease;
}
.filter-btn.active,
.filter-btn:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }
.brandadoc-gallery-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 18px; }
.gallery-item { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-overlay {
	position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(1,16,47,0.82) 100%);
	display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; opacity: 0; transition: opacity 0.25s ease;
}
.gallery-item:hover .gallery-overlay { opacity: 1; }
.gallery-zoom { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.9); color: var(--navy); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.gallery-caption { color: var(--white); font-weight: 600; font-size: 0.9rem; }

.brandadoc-lightbox {
	position: fixed; inset: 0; background: rgba(10,20,35,0.94); z-index: 999;
	display: none; align-items: center; justify-content: center;
}
.brandadoc-lightbox.active { display: flex; }
.brandadoc-lightbox img { max-width: 88vw; max-height: 84vh; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.lightbox-close, .lightbox-nav {
	position: absolute; background: rgba(255,255,255,0.12); color: var(--white); border: none;
	width: 46px; height: 46px; border-radius: 50%; font-size: 1.6rem; display: flex; align-items: center; justify-content: center;
}
.lightbox-close { top: 24px; right: 24px; }
.lightbox-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-close:hover, .lightbox-nav:hover { background: var(--orange); }

/* ---- Utility ---- */
.back-to-top {
	position: fixed; right: 22px; bottom: 22px; width: 44px; height: 44px; border-radius: 50%;
	background: var(--navy); color: var(--white); display: none; align-items: center; justify-content: center;
	font-size: 1.2rem; box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transition: opacity 0.2s ease;
	z-index: 250;
}
.back-to-top.show { opacity: 1; visibility: visible; }
.screen-reader-text {
	position: absolute; left: -9999px; top: 10px; background: var(--white); color: var(--navy);
	padding: 10px 18px; z-index: 1000; border-radius: var(--radius);
}
.screen-reader-text:focus { left: 10px; }
.table-responsive { overflow-x: auto; }
[class*="fade-in-up"] { animation: h1FadeInUp 0.5s ease both; }
@keyframes h1FadeInUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* ==========================================================================
   Responsive - Tablet
   ========================================================================== */
@media (max-width: 1024px) {
	.h1-hero-inner,
	.h1-founders-grid,
	.h1-doctor-about-grid,
	.h1-contact-cta-grid,
	.h1-contact-grid,
	.h1-primary-location,
	.h1-doctor-hero-inner { grid-template-columns: 1fr; }
	.h1-contact-call-area { position: static; }
	.h1-primary-location-media img { min-height: 260px; }
	.h1-hero-media { order: -1; max-width: 420px; margin: 0 auto; }
	/* Hero stacks to one column here, so the backdrop switches from the
	   desktop left-right split to a top-down fade: the photo stays visible
	   behind the portrait at the top, then washes out to solid cream
	   before the copy text begins below it, keeping it legible. */
	.h1-hero-backdrop {
		background-image:
			linear-gradient(180deg, rgba(244,250,253,0.5) 0%, var(--cream) 46%, var(--cream) 100%),
			var(--h1-hero-bg-image);
		background-size: cover, cover;
		background-position: center, 60% 25%;
		background-repeat: no-repeat, no-repeat;
	}
	.h1-doctor-why { position: static; margin-top: 24px; }
	.h1-departments-grid,
	.h1-credentials-grid,
	.h1-team-groups-grid,
	.h1-locations-grid { grid-template-columns: repeat(2, 1fr); }
	.h1-onsite-grid { grid-template-columns: 1fr; }
	.h1-onsite-flow { grid-template-columns: 1fr; }
	.h1-onsite-flow-step + .h1-onsite-flow-step { border-left: none; border-top: 1px solid rgba(255,255,255,0.16); }
	/* Flow runs vertically here, so the chevron points down, not right. */
	.h1-onsite-flow-step + .h1-onsite-flow-step::before {
		left: 50%; top: -7px;
		transform: translateX(-50%) rotate(135deg);
	}
	.h1-journey-steps,
	.h1-education-grid,
	.h1-care-grid,
	.h1-quickfacts-grid,
	.h1-trust-strip-inner { grid-template-columns: repeat(2, 1fr); }
	.h1-facilities-grid { grid-template-columns: repeat(2, 1fr); }
	.h1-facility-wide { grid-column: span 2; }
	.brandadoc-gallery-grid { grid-template-columns: repeat(2, 1fr) !important; }
	.h1-doctor-card { grid-template-columns: 160px 1fr; }
	.h1-topbar-tagline { display: none; }

	/* The full horizontal nav + the Call to Book button don't fit next to
	   the logo below desktop width - collapse to the hamburger menu here
	   rather than only at the phone breakpoint. */
	.h1-nav { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--white); padding: 90px 24px 24px; transform: translateX(100%); transition: transform 0.25s ease; z-index: 199; overflow-y: auto; }
	.h1-nav.active { transform: translateX(0); }
	.h1-nav #primary-menu { flex-direction: column; align-items: flex-start; gap: 22px; }
	.h1-nav #primary-menu a { font-size: 1.1rem; color: var(--navy-deep); }
	.h1-nav #primary-menu a:hover,
	.h1-nav #primary-menu a.active { color: var(--navy); border-color: var(--orange); }
	.menu-toggle { display: flex; }
	.h1-header-cta .h1-btn-outline,
	.h1-header-cta .h1-btn-primary { display: none; }
}

/* ==========================================================================
   Responsive - Mobile
   ========================================================================== */
@media (max-width: 767px) {
	.container { padding: 0 18px; }
	.h1-section { padding: 56px 0; }
	.h1-section-head { margin-bottom: 30px; }

	.h1-topbar-info { gap: 12px; font-size: 0.76rem; }
	.h1-topbar-hours { display: none; }
	.h1-header-inner { padding: 12px 18px; }
	.h1-logo-img { height: 38px; }
	.h1-logo-mark { height: 36px; width: 36px; }
	.h1-logo-wordmark-main { font-size: 1rem; }
	.h1-logo-wordmark-sub { font-size: 0.56rem; }
	.h1-nav { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--white); padding: 90px 24px 24px; transform: translateX(100%); transition: transform 0.25s ease; z-index: 199; overflow-y: auto; }
	.h1-nav.active { transform: translateX(0); }
	.h1-nav #primary-menu { flex-direction: column; align-items: flex-start; gap: 22px; }
	.h1-nav #primary-menu a { font-size: 1.1rem; color: var(--navy-deep); }
	.h1-nav #primary-menu a:hover,
	.h1-nav #primary-menu a.active { color: var(--navy); border-color: var(--orange); }
	.menu-toggle { display: flex; }
	.h1-header-cta .h1-btn-outline,
	.h1-header-cta .h1-btn-primary { display: none; }

	.h1-hero { padding: 32px 0 0; }
	.h1-hero-backdrop {
		background-image:
			linear-gradient(180deg, rgba(244,250,253,0.4) 0%, var(--cream) 38%, var(--cream) 100%),
			var(--h1-hero-bg-image);
		background-position: center, 55% 22%;
	}
	.h1-hero-inner { padding-bottom: 56px; }
	.h1-hero-signage { max-width: 100%; margin: 10px 0 20px; padding: 6px; border-radius: var(--radius); }
	.h1-hero-signage img { border-radius: 9px; }
	.h1-hero-actions { flex-direction: column; }
	.h1-hero-actions .h1-btn { width: 100%; }
	.h1-primary-location-info { padding: 28px 24px; }
	.h1-primary-location-actions { flex-direction: column; }
	.h1-primary-location-actions .h1-btn { width: 100%; text-align: center; justify-content: center; }
	.h1-hero-trust { gap: 8px; }
	.h1-hero-chips li { font-size: 0.72rem; padding: 5px 12px; }
	.h1-hero-media-caption { font-size: 0.74rem; padding: 9px 16px; }
	.h1-hero-stat-badge { padding: 10px 12px; gap: 10px; margin: 0 4% -14px 0; }
	.h1-hero-stat strong { font-size: 1.05rem; }
	.h1-hero-stat span { font-size: 0.6rem; }
	.h1-trust-strip { margin-top: -40px; }
	.h1-trust-strip-inner { padding: 28px 20px; }

	.h1-trust-strip-inner,
	.h1-departments-grid,
	.h1-credentials-grid,
	.h1-journey-steps,
	.h1-education-grid,
	.h1-care-grid,
	.h1-quickfacts-grid,
	.h1-team-groups-grid,
	.h1-locations-grid,
	.h1-doctors-grid { grid-template-columns: 1fr; }
	.h1-onsite-card { padding: 28px 24px; }
	.h1-onsite-flow-step { padding: 20px 22px; }
	.h1-trust-value { font-size: 2rem; }

	.h1-facilities-grid { grid-template-columns: 1fr; grid-auto-rows: 240px; }
	.h1-facility-wide, .h1-facility-tall { grid-column: span 1; grid-row: span 1; }

	.h1-doctor-card,
	.h1-doctors-grid-single .h1-doctor-card { grid-template-columns: 1fr; }
	.h1-doctors-grid-single .h1-doctor-card-info { padding: 26px 24px; }
	.h1-doctor-monogram { min-height: 180px; }

	.h1-call-card { padding: 26px 22px; }

	.h1-footer-grid { grid-template-columns: 1fr; gap: 32px; padding: 40px 0; }
	.h1-call-float { display: none; }
	.h1-mobile-cta-bar {
		display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 280;
		background: var(--white); border-top: 1px solid var(--border); box-shadow: 0 -6px 20px rgba(20,40,70,0.1);
	}
	.h1-mobile-cta {
		flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
		padding: 14px 8px; font-weight: 700; font-size: 0.86rem; color: var(--navy-deep); border-right: 1px solid var(--border-soft);
	}
	.h1-mobile-cta:last-child { border-right: none; }
	.h1-mobile-cta .h1-icon-phone svg { width: 15px; height: 15px; }
	/* Calling is the only way to book, so it takes the bar's primary
	   treatment and twice the width of the secondary link. */
	.h1-mobile-cta-call { flex: 2; background: var(--orange); color: var(--white); border-right: none; }
	body { padding-bottom: 58px; }

	.brandadoc-gallery-grid { grid-template-columns: 1fr !important; }
	.h1-doctor-hero-media img,
	.h1-doctor-hero-media .h1-doctor-monogram-lg { aspect-ratio: 4/3; }
}