/*
 * Doctor profile — front-end styles.
 *
 * ONE document, TWO designs. The markup order is the desktop order from
 * doctor_profile_desktop.html; the mobile order from
 * doctor_profile_mobile.html is produced below with `display:contents` on the
 * column wrappers plus per-section `order`. Nothing is duplicated in markup
 * and nothing is served conditionally by device.
 *
 * Values are transcribed from the client artboards. Where the artboards are
 * silent (anything between 412px and 1440px) the behaviour is an assumption
 * and is flagged in the plan's Open Items.
 */

.avd.avd {
	/* Palette, lifted from the artboards */
	--avd-bg: #F6F7F1;
	--avd-band: #edeee3;
	--avd-surface: #fff;
	--avd-line: #DCDDD2;

	--avd-text: #565656;
	--avd-head: #333333;
	--avd-muted: #8A8A8A;

	--avd-teal: #007c9d;
	--avd-teal-dark: #00647f;
	--avd-teal-50: #E7F2F7;
	--avd-teal-200: #A9CEDD;
	--avd-teal-300: #BFDDE8;
	--avd-teal-400: #7FB9CE;

	--avd-blue: #bde3ff;
	--avd-blue-text: #1A5E7A;
	--avd-blue-line: #93CCF2;

	--avd-amber: #FDF1E3;
	--avd-amber-text: #B5691A;
	--avd-amber-line: #F3A858;

	--avd-green: #3E8F42;
	--avd-green-bg: #E8F5E9;
	--avd-wa: #25D366;
	--avd-star: #f3a858;

	--avd-radius: 12px;
	--avd-hair: 0.5px solid var(--avd-line);
	--avd-nav-h: 70px;
	/* Height of the SITE header. Elementor's header here is sticky
	   (sticky:top), so our own sticky nav has to clear it.
	   doctor-profile.js measures the real header and overwrites this. */
	--avd-header-h: 70px;

	background: var(--avd-bg);
	color: var(--avd-text);
	font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
	/* The Elementor kit gives body a 20px font-size; without this, every
	   element that does not name its own size would inherit 20px. */
	font-size: 14px;
	line-height: 1.5;
}

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

/* --------------------------------------------------------------------------
 * Host-theme reset.
 *
 * This template renders inside the live theme, so 53 other stylesheets sit in
 * the cascade with it. Two of them reach our markup.
 *
 * hello-elementor/reset.css loads AFTER us and restyles bare elements:
 *   a          -> color #c36, text-decoration underline
 *   button     -> 1px solid #c36 border, #c36 text
 *   blockquote -> 1px solid #ccc border
 *   table td/th-> 1px solid grey border, 15px padding
 *
 * The Elementor global kit restyles bare elements through the body class:
 *   .elementor-kit-5 a      -> color #007C9D, our exact button teal
 *   .elementor-kit-5 h2     -> #007C9D, 500 32px/50px Roboto
 *   .elementor-kit-5 h3     -> #030303, 28px
 *   .elementor-kit-5 button -> 20px, padding 10px 95px
 *   .elementor-kit-5 p      -> margin-block-end 11px
 *
 * `.elementor-kit-5 a` is (0,1,1) and beat `.avd-btn--primary` at (0,1,0),
 * painting every Book button's label the same teal as its own background.
 *
 * So every selector in this file carries a `.avd.avd ` prefix: element rules
 * land at (0,2,1) and component rules at (0,3,0) - above anything the host can
 * reach us with, and component rules still above these element resets.
 * KEEP THE PREFIX when editing; an unprefixed rule will silently lose.
 * ----------------------------------------------------------------------- */
.avd.avd img { max-width: 100%; height: auto; display: block; }
.avd.avd ul,
.avd.avd ol { list-style: none; margin: 0; padding: 0; }
.avd.avd p,
.avd.avd h1,
.avd.avd h2,
.avd.avd h3,
.avd.avd blockquote,
.avd.avd figure,
.avd.avd dl,
.avd.avd dd,
.avd.avd dt { margin: 0; margin-block: 0; }
.avd.avd h1,
.avd.avd h2,
.avd.avd h3,
.avd.avd h4,
.avd.avd h5,
.avd.avd h6 {
	font-family: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
}
.avd.avd a { color: var(--avd-teal); text-decoration: none; }
.avd.avd a:hover { color: var(--avd-teal-dark); text-decoration: none; }
.avd.avd blockquote { border: 0; padding: 0; }
.avd.avd table { border-collapse: collapse; font-size: inherit; margin: 0; }
.avd.avd th,
.avd.avd td {
	border: 0;
	padding: 0;
	text-align: left;
	font-weight: inherit;
	line-height: inherit;
	vertical-align: middle;
}
.avd.avd button {
	appearance: none;
	-webkit-appearance: none;
	background: none;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
	width: auto;
	font: inherit;
	color: inherit;
	text-align: inherit;
	text-transform: none;
}
.avd.avd input,
.avd.avd select,
.avd.avd textarea {
	font: inherit;
	color: inherit;
	width: auto;
	display: inline-block;
}

.avd.avd .avd-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding-left: 24px;
	padding-right: 24px;
}

/* Focus visibility — the artboards show no focus states, so we supply one. */
.avd.avd a:focus-visible,
.avd.avd summary:focus-visible,
.avd.avd button:focus-visible {
	outline: 2px solid var(--avd-teal);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ---------------------------------------------------------------- buttons */

.avd.avd .avd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	border-radius: 8px;
	padding: 13px;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.avd.avd .avd-btn--primary { background: var(--avd-teal); color: #fff; }
.avd.avd .avd-btn--primary:hover { background: var(--avd-teal-dark); color: #fff; }
.avd.avd .avd-btn--outline { background: var(--avd-surface); color: var(--avd-teal); border: 1.5px solid var(--avd-teal); }
.avd.avd .avd-btn--outline:hover { background: var(--avd-teal-50); color: var(--avd-teal); }
.avd.avd .avd-btn--wa { background: var(--avd-wa); color: #fff; }
.avd.avd .avd-btn--wa:hover { background: #1EBE5A; color: #fff; }
.avd.avd .avd-btn--sm { padding: 9px 16px; font-size: 13px; }
.avd.avd .avd-btn--xs { padding: 7px; font-size: 11px; }
.avd.avd .avd-btn--block { display: flex; width: 100%; }

.avd.avd .avd-linkbtn {
	display: block;
	margin-top: 12px;
	padding: 11px;
	border: var(--avd-hair);
	border-color: var(--avd-teal);
	border-radius: 8px;
	color: var(--avd-teal);
	font-size: 13px;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
}
.avd.avd .avd-linkbtn:hover { background: var(--avd-teal-50); }

/* ------------------------------------------------------------- breadcrumb */

.avd.avd .avd-breadcrumb { background: var(--avd-surface); border-bottom: var(--avd-hair); }
.avd.avd .avd-breadcrumb__inner { padding-top: 11px; padding-bottom: 11px; font-size: 12px; }
.avd.avd .avd-breadcrumb__link { color: inherit; text-decoration: none; }
.avd.avd .avd-breadcrumb__link:hover { color: var(--avd-teal); }
.avd.avd .avd-breadcrumb__sep { color: var(--avd-muted); margin: 0 4px; }
.avd.avd .avd-breadcrumb__current { color: var(--avd-teal); }

/* ------------------------------------------------------------------- hero */

.avd.avd .avd-hero { background: var(--avd-surface); border-bottom: var(--avd-hair); }
.avd.avd .avd-hero__inner {
	display: flex;
	gap: 28px;
	align-items: flex-start;
	padding-top: 28px;
}
.avd.avd .avd-hero__photo { position: relative; flex-shrink: 0; }
.avd.avd .avd-hero__img {
	width: 150px;
	height: 150px;
	border-radius: 14px;
	background: var(--avd-teal-50);
	border: 2px solid var(--avd-teal-50);
	object-fit: cover;
}
.avd.avd .avd-verified {
	position: absolute;
	right: -5px;
	bottom: -7px;
	background: var(--avd-green);
	color: #fff;
	font-size: 9px;
	letter-spacing: .04em;
	padding: 3px 7px;
	border-radius: 4px;
}
.avd.avd .avd-hero__main { flex: 1; min-width: 0; padding-top: 4px; }
.avd.avd .avd-hero__nameline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.avd.avd .avd-hero__name { font-size: 30px; font-weight: 500; color: var(--avd-head); line-height: 1.15; }
.avd.avd .avd-hero__quals { font-size: 14px; margin: 7px 0 11px; }
.avd.avd .avd-hero__pills { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.avd.avd .avd-hero__meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12px; }
.avd.avd .avd-hero__pin { color: var(--avd-teal); }
.avd.avd .avd-hero__hours { color: var(--avd-teal); font-weight: 500; }
.avd.avd .avd-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--avd-muted); }

.avd.avd .avd-hero__cta { flex-shrink: 0; width: 300px; display: grid; gap: 8px; padding-top: 4px; }
.avd.avd .avd-hero__cta-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.avd.avd .avd-hero__cta-row .avd-btn { padding: 11px; font-size: 13px; }

.avd.avd .avd-badge { border-radius: 4px; padding: 2px 7px; font-size: 11px; }
.avd.avd .avd-badge--honour { background: var(--avd-amber); color: var(--avd-amber-text); border: 0.5px solid var(--avd-amber-line); }

.avd.avd .avd-pill { border-radius: 20px; padding: 4px 11px; font-size: 12px; font-weight: 500; }
.avd.avd .avd-pill--role { background: var(--avd-blue); color: var(--avd-blue-text); border: 0.5px solid var(--avd-blue-line); }
.avd.avd .avd-pill--avail { background: var(--avd-green-bg); color: var(--avd-green); }

/* ------------------------------------------------------------------ stats */

.avd.avd .avd-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-top: var(--avd-hair);
	margin: 24px 0 0;
}
/* Columns follow the number of stats that actually have values, so a doctor
   with two never renders two empty cells. */
.avd.avd .avd-stats[data-count="1"] { grid-template-columns: 1fr; }
.avd.avd .avd-stats[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
.avd.avd .avd-stats[data-count="3"] { grid-template-columns: repeat(3, 1fr); }

.avd.avd .avd-stat { padding: 16px 12px; text-align: center; border-right: var(--avd-hair); }
.avd.avd .avd-stat:last-child { border-right: 0; }
.avd.avd .avd-stat__num { margin: 0; font-size: 22px; font-weight: 500; color: var(--avd-teal); }
.avd.avd .avd-stat__num--rating { font-size: 18px; margin-top: 3px; }
.avd.avd .avd-stat__label { font-size: 11px; line-height: 1.5; margin-top: 5px; }
.avd.avd .avd-stat__num--rating + .avd-stat__label { margin-top: 0; }
.avd.avd .avd-stars { color: var(--avd-star); font-size: 14px; letter-spacing: 1px; }

/* -------------------------------------------------------------- sticky nav */

/* Sticky resolves against the nearest scrollport, so every ancestor between
   the bar and the document has to stay out of the way. We can only speak for
   our own boxes here; doctor-profile.js walks the theme's wrappers above us
   and rewrites any `overflow: hidden` it finds to `clip`, which still clips
   but is not a scroll container. */
.avd.avd { overflow: visible; }

.avd.avd .avd-sticky {
	position: sticky;
	top: var(--avd-header-h);
	z-index: 100;
	background: var(--avd-surface);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
	border-bottom: var(--avd-hair);
}
.avd.avd .avd-nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.avd.avd .avd-nav__links { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; }
.avd.avd .avd-nav__links::-webkit-scrollbar { display: none; }
.avd.avd .avd-nav__link {
	display: block;
	padding: 14px 0;
	font-size: 13px;
	color: var(--avd-text);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}
.avd.avd .avd-nav__link.is-active { color: var(--avd-teal); font-weight: 500; border-bottom-color: var(--avd-teal); }
.avd.avd .avd-nav__cta { display: flex; gap: 8px; flex-shrink: 0; padding: 9px 0; }

/* Mobile CTA bar — replaces the anchor nav below the breakpoint. */
.avd.avd .avd-mbar { display: none; }

/* ----------------------------------------------------------------- layout */

.avd.avd .avd-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 20px;
	align-items: start;
	padding-top: 20px;
	padding-bottom: 40px;
}
.avd.avd .avd-col { min-width: 0; }
.avd.avd .avd-col--main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.avd.avd .avd-col--side { position: sticky; top: calc(var(--avd-header-h) + var(--avd-nav-h)); display: flex; flex-direction: column; gap: 16px; }

.avd.avd .avd-section { scroll-margin-top: calc(var(--avd-header-h) + var(--avd-nav-h) + 8px); }

.avd.avd .avd-card {
	background: var(--avd-surface);
	border: var(--avd-hair);
	border-radius: var(--avd-radius);
	padding: 22px 24px;
}
.avd.avd .avd-card__title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
	font-size: 16px;
	font-weight: 500;
	color: var(--avd-head);
}
.avd.avd .avd-card__title > span { white-space: nowrap; }
.avd.avd .avd-card__title::after { content: ""; flex: 1; height: 0.5px; background: var(--avd-line); }
.avd.avd .avd-card__title--mobile { display: none; }

.avd.avd .avd-subhead { font-size: 14px; font-weight: 500; color: var(--avd-head); margin: 20px 0 12px; }
.avd.avd .avd-subhead--tight { margin: 0 0 8px; font-size: 13px; }
.avd.avd .avd-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: .05em; margin-bottom: 8px; }

/* ------------------------------------------------------------------ about */

.avd.avd .avd-highlights {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin-bottom: 16px;
}
.avd.avd .avd-highlight {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	background: var(--avd-teal-50);
	border: 0.5px solid var(--avd-teal-200);
	border-radius: 10px;
	padding: 12px 14px;
}
.avd.avd .avd-highlight__icon { font-size: 18px; line-height: 1.1; }
.avd.avd .avd-highlight__text { display: block; }
.avd.avd .avd-highlight__title { display: block; font-size: 15px; font-weight: 500; color: var(--avd-teal); line-height: 1.25; }
.avd.avd .avd-highlight__sub { display: block; font-size: 11px; line-height: 1.4; margin-top: 3px; }

.avd.avd .avd-about__body { display: flex; gap: 24px; align-items: flex-start; }
.avd.avd .avd-bio { flex: 1; min-width: 0; }
.avd.avd .avd-bio__text { font-size: 14px; line-height: 1.75; }
.avd.avd .avd-bio__text p + p { margin-top: 1em; }
/* JS adds .is-clamped on mobile only; without JS the full bio always shows. */
.avd.avd .avd-bio__text.is-clamped {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.avd.avd .avd-bio__toggle {
	display: none;
	margin-top: 4px;
	background: none;
	border: 0;
	padding: 0;
	color: var(--avd-teal);
	font: inherit;
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
}
.avd.avd .avd-bio__toggle.is-shown { display: block; }

.avd.avd .avd-meet { width: 170px; flex-shrink: 0; }
.avd.avd .avd-meet__heading,
.avd.avd .avd-meet__copy { display: none; } /* mobile-only copy */

.avd.avd .avd-video {
	position: relative;
	display: block;
	height: 262px;
	border-radius: var(--avd-radius);
	overflow: hidden;
	border: var(--avd-hair);
	background: var(--avd-teal);
	cursor: pointer;
}
.avd.avd .avd-video__img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; }
.avd.avd .avd-video__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.75) 100%);
}
.avd.avd .avd-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255,255,255,.94);
	color: var(--avd-teal);
	font-size: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 4px;
}
.avd.avd .avd-play--sm { width: 36px; height: 36px; font-size: 13px; padding-left: 3px; background: rgba(255,255,255,.9); }
.avd.avd .avd-video__cue {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #fff;
	font-size: 11px;
	font-weight: 500;
}
.avd.avd .avd-video__dur { opacity: .85; }

/* -------------------------------------------------------------- expertise */

.avd.avd .avd-taggroup + .avd-taggroup { margin-top: 16px; }
.avd.avd .avd-taggroup__label { font-size: 11px; font-weight: 500; letter-spacing: .05em; margin-bottom: 8px; }
.avd.avd .avd-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.avd.avd .avd-tag {
	display: inline-block;
	border-radius: 20px;
	padding: 6px 12px;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
}
.avd.avd .avd-tag--teal { background: var(--avd-teal-50); color: var(--avd-teal); border: 0.5px solid var(--avd-teal-200); }
.avd.avd .avd-tag--amber { background: var(--avd-amber); color: var(--avd-amber-text); border: 0.5px solid var(--avd-amber-line); }
.avd.avd .avd-tag--blue { background: var(--avd-blue); color: var(--avd-blue-text); border: 0.5px solid var(--avd-blue-line); }
.avd.avd .avd-tag--sm { padding: 4px 9px; font-size: 11px; }

/* ----------------------------------------------------------- satisfaction */

.avd.avd .avd-sat { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.avd.avd .avd-sat__score { flex-shrink: 0; }
.avd.avd .avd-sat__big { font-size: 52px; font-weight: 500; color: var(--avd-teal); line-height: 1; }
.avd.avd .avd-sat__pct { font-size: 22px; }
.avd.avd .avd-sat__label { font-size: 12px; margin-top: 8px; }
.avd.avd .avd-sat__note { font-size: 11px; margin-top: 2px; }

.avd.avd .avd-bars { flex: 1; min-width: 180px; }
.avd.avd .avd-bar { display: flex; align-items: center; gap: 8px; }
.avd.avd .avd-bar + .avd-bar { margin-top: 7px; }
.avd.avd .avd-bar__track { flex: 1; height: 6px; border-radius: 3px; background: var(--avd-line); overflow: hidden; }
.avd.avd .avd-bar__fill { display: block; height: 6px; border-radius: 3px; background: var(--avd-teal); }
.avd.avd .avd-bar__fill--2 { background: var(--avd-teal-400); }
.avd.avd .avd-bar__fill--3 { background: var(--avd-teal-300); }
.avd.avd .avd-bar__label { font-size: 11px; min-width: 30px; }

.avd.avd .avd-subscores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; flex-shrink: 0; width: 330px; }
.avd.avd .avd-subscore {
	background: var(--avd-band);
	border: var(--avd-hair);
	border-radius: 8px;
	padding: 12px 8px;
	text-align: center;
}
.avd.avd .avd-subscore__val { display: block; font-size: 18px; font-weight: 500; color: var(--avd-teal); }
.avd.avd .avd-subscore__label { display: block; font-size: 11px; line-height: 1.4; margin-top: 3px; }

/* ---------------------------------------------------------------- reviews */

.avd.avd .avd-gsummary { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.avd.avd .avd-glogo {
	background: var(--avd-surface);
	border: var(--avd-hair);
	border-radius: 8px;
	padding: 6px 10px;
	font-size: 13px;
	font-weight: 500;
}
.avd.avd .avd-glogo .g1 { color: #4285F4; }
.avd.avd .avd-glogo .g2 { color: #EA4335; }
.avd.avd .avd-glogo .g3 { color: #FBBC05; }
.avd.avd .avd-glogo .g4 { color: #34A853; }
.avd.avd .avd-gsummary__score { display: flex; gap: 10px; align-items: center; }
.avd.avd .avd-gsummary__num { font-size: 32px; font-weight: 500; color: var(--avd-head); line-height: 1; }
.avd.avd .avd-gsummary__count { display: block; font-size: 12px; margin-top: 2px; }

.avd.avd .avd-reviews { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.avd.avd .avd-reviews--single { grid-template-columns: 1fr; }
.avd.avd .avd-review {
	background: var(--avd-band);
	border: var(--avd-hair);
	border-radius: 10px;
	padding: 14px 16px;
	min-width: 0;
	/* Google reviews are user-written: one pasted URL or a 40-character
	   unbroken word would otherwise set the card's minimum width and push
	   the whole row past the edge of the phone. */
	overflow-wrap: anywhere;
}
.avd.avd .avd-review__head { display: flex; gap: 9px; align-items: center; margin-bottom: 8px; min-width: 0; }
/* The author/date column is a flex item, so its min-width is `auto` and it
   would refuse to shrink below the widest line inside it. */
.avd.avd .avd-review__head > span:last-child { min-width: 0; }
.avd.avd .avd-avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.avd.avd .avd-avatar--teal { background: var(--avd-teal); }
.avd.avd .avd-avatar--amber { background: var(--avd-amber-text); }
.avd.avd .avd-review__author { display: block; font-size: 13px; font-weight: 500; color: var(--avd-head); }
.avd.avd .avd-review__date { display: block; font-size: 11px; }
.avd.avd .avd-review .avd-stars { display: block; font-size: 12px; margin-bottom: 7px; }
.avd.avd .avd-review__quote { font-size: 13px; line-height: 1.65; font-style: italic; }

.avd.avd .avd-chip { display: inline-block; border-radius: 20px; padding: 3px 9px; font-size: 11px; font-weight: 500; }
.avd.avd .avd-chip--cond { background: var(--avd-green-bg); color: var(--avd-green); margin-top: 10px; }
.avd.avd .avd-chip--open { background: var(--avd-green-bg); color: var(--avd-green); font-size: 10px; padding: 2px 7px; margin-left: 5px; }

/* ------------------------------------------------------------ credentials */

.avd.avd .avd-creds { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.avd.avd .avd-cred { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: var(--avd-hair); }
.avd.avd .avd-creds > .avd-cred:last-child,
.avd.avd .avd-creds > .avd-cred:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.avd.avd .avd-cred__icon {
	width: 34px;
	height: 34px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 16px;
}
.avd.avd .avd-cred__icon--teal { background: var(--avd-teal-50); }
.avd.avd .avd-cred__icon--amber { background: var(--avd-amber); }
.avd.avd .avd-cred__icon--blue { background: var(--avd-blue); }
.avd.avd .avd-cred__text { display: block; min-width: 0; }
.avd.avd .avd-cred__title { display: block; font-size: 13px; font-weight: 500; color: var(--avd-head); margin-bottom: 3px; }
.avd.avd .avd-cred__sub { display: block; font-size: 11px; line-height: 1.5; }

/* ---------------------------------------------------------------- stories */

.avd.avd .avd-stories { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.avd.avd .avd-stories--single { grid-template-columns: minmax(0, 320px); }
.avd.avd .avd-story { min-width: 0; }
.avd.avd .avd-story__link {
	display: block;
	background: var(--avd-surface);
	border: var(--avd-hair);
	border-radius: 10px;
	overflow: hidden;
	text-decoration: none;
	height: 100%;
}
.avd.avd .avd-story__thumb {
	position: relative;
	display: block;
	height: 110px;
	background: linear-gradient(135deg, #333 0%, #296762 100%);
}
.avd.avd .avd-story__img { width: 100%; height: 100%; object-fit: cover; }
.avd.avd .avd-story__badge {
	position: absolute;
	top: 8px;
	left: 8px;
	background: rgba(0,0,0,.6);
	color: #fff;
	font-size: 10px;
	padding: 3px 8px;
	border-radius: 20px;
}
.avd.avd .avd-story__body { display: block; padding: 10px 12px; }
.avd.avd .avd-story__title { display: block; font-size: 12px; font-weight: 500; color: var(--avd-head); line-height: 1.4; margin-bottom: 4px; }
.avd.avd .avd-story__cap { display: block; font-size: 11px; color: var(--avd-text); }

/* Photo gallery. Two to four pictures of the doctor, in a carousel; this
   block replaced the written testimonials. The plain grid below is only the
   sub-minimum fallback — one photo does not earn arrows and dots. */
.avd.avd .avd-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; list-style: none; margin: 0; padding: 0; }
.avd.avd .avd-gallery--single { grid-template-columns: 1fr; max-width: 320px; }
.avd.avd .avd-gallery__item { min-width: 0; }
.avd.avd .avd-gallery__figure {
	margin: 0;
	width: 100%;
	background: var(--avd-band);
	border: var(--avd-hair);
	border-radius: 10px;
	overflow: hidden;
	height: 100%;
}
.avd.avd .avd-gallery__img { width: 100%; height: 200px; object-fit: cover; }
.avd.avd .avd-gallery__cap { padding: 8px 12px; font-size: 11px; line-height: 1.45; color: var(--avd-text); }

/* --------------------------------------------------------------- carousel */
/*
 * One component behind both the patient-review carousel and the photo
 * gallery. The track is a scroll-snap flex row and nothing more; the arrows
 * and dots simply call scrollTo on it. The control strip ships `hidden` and
 * doctor-profile.js reveals it, so with scripting off the block is still a
 * swipeable, keyboard-scrollable list rather than a strip of dead buttons.
 *
 * Slides per view is set per instance in the markup, as a data attribute
 * rather than an inline style: an inline declaration outranks every
 * stylesheet rule, so a mobile override could never win and phones rendered
 * the desktop slide count squeezed into 390px.
 */
.avd.avd .avd-carousel { max-width: 100%; }
.avd.avd .avd-carousel__viewport {
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	min-width: 0;
	/* Vertical only. Horizontal padding would offset every scroll position
	   by 2px and the JS measures slide pitch straight off the track. */
	padding: 2px 0;
	margin: -2px 0;
}
.avd.avd .avd-carousel__viewport::-webkit-scrollbar { display: none; }
.avd.avd .avd-carousel__viewport:focus-visible { outline: 2px solid var(--avd-teal); outline-offset: 2px; }
.avd.avd .avd-carousel__track {
	display: flex;
	align-items: stretch;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Slide width.
 *
 * Written out per slide-count instead of computed from a custom property.
 * The previous version was
 *
 *   flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view))
 *
 * and a value containing var() is only checked for validity AFTER
 * substitution — so anything that left --per-view unresolved made the whole
 * declaration invalid at computed-value time and flex-basis silently fell
 * back to `auto`. Slides then sized to their own content: the review card
 * grew as wide as its longest quote, the cards stopped being equal widths,
 * and the JS - which measures slide pitch to know where a page starts -
 * parked the viewport in the middle of the cloned set. That is why one
 * over-wide card showed with its text cut off, and why the other-doctors row
 * opened on the last doctor instead of the first.
 *
 * These are literal numbers: nothing to substitute, nothing to invalidate.
 * The subtraction is the gap's share of each slide, gap * (n - 1) / n.
 * The 100% base guarantees a usable width even if no attribute matches.
 */
.avd.avd .avd-carousel__slide {
	flex: 0 0 100%;
	/* Belt and braces. flex-basis wins over width whenever it resolves, so
	   this is inert in normal operation — it only matters if a basis ever
	   falls back to `auto` again, and then it keeps the slide at one screen
	   instead of letting it grow to its content. */
	width: 100%;
	max-width: 100%;
	/* Without this a flex item refuses to shrink below its own content, and
	   the card would push the row wider than the phone. */
	min-width: 0;
	scroll-snap-align: start;
}
.avd.avd .avd-carousel[data-per-view="2"] .avd-carousel__slide { flex-basis: calc(50% - 6px); }
.avd.avd .avd-carousel[data-per-view="3"] .avd-carousel__slide { flex-basis: calc(33.3333% - 8px); }
.avd.avd .avd-carousel[data-per-view="4"] .avd-carousel__slide { flex-basis: calc(25% - 9px); }
.avd.avd .avd-carousel__ctl {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 12px;
}
.avd.avd .avd-carousel__ctl[hidden] { display: none; }
.avd.avd .avd-carousel__arrow {
	width: 34px;
	height: 34px;
	border: 1px solid var(--avd-teal-200);
	border-radius: 50%;
	background: var(--avd-surface);
	color: var(--avd-teal);
	font-size: 20px;
	line-height: 1;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background .15s, border-color .15s, color .15s;
}
.avd.avd .avd-carousel__arrow:hover {
	background: var(--avd-teal);
	border-color: var(--avd-teal);
	color: #fff;
}
.avd.avd .avd-carousel__arrow:focus-visible { outline: 2px solid var(--avd-teal); outline-offset: 2px; }
.avd.avd .avd-carousel__dots { display: inline-flex; align-items: center; gap: 6px; }
.avd.avd .avd-carousel__dot {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--avd-teal-200);
	cursor: pointer;
	transition: width .15s, background .15s;
}
.avd.avd .avd-carousel__dot.is-active { width: 18px; border-radius: 4px; background: var(--avd-teal); }
.avd.avd .avd-carousel__slide--clone { user-select: none; }

@media (prefers-reduced-motion: reduce) {
	.avd.avd .avd-carousel__arrow,
	.avd.avd .avd-carousel__dot { transition: none; }
}

/* -------------------------------------------------------------------- faq */

.avd.avd .avd-faq__item { border-bottom: var(--avd-hair); padding: 14px 0; }
.avd.avd .avd-faq__q {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	color: var(--avd-head);
	line-height: 1.45;
	list-style: none;
}
.avd.avd .avd-faq__q::-webkit-details-marker { display: none; }
/* One glyph, rotated, rather than two swapped: a swap cannot be animated,
   and the turn is what tells you the panel is on its way. */
.avd.avd .avd-faq__chev {
	color: var(--avd-teal);
	font-size: 17px;
	line-height: 1;
	flex-shrink: 0;
	transition: transform .24s cubic-bezier(.4, 0, .2, 1);
}
.avd.avd .avd-faq__chev::before { content: "\25BE"; display: block; }
.avd.avd .avd-faq__item[open] .avd-faq__chev { transform: rotate(180deg); }

/* Padding, not margin: the answer's height is animated with overflow hidden,
   and a margin sits outside that box — the gap would appear instantly while
   the text was still sliding, which is exactly the jump the animation is
   there to remove. */
.avd.avd .avd-faq__a { font-size: 13px; line-height: 1.7; padding-top: 9px; max-width: 80ch; }
/* Rich-text answers arrive wrapped in <p>. A leading or trailing paragraph
   margin escapes the animated box and collapses through it, so the panel's
   measured height and its painted height disagree. */
.avd.avd .avd-faq__a > :first-child { margin-top: 0; }
.avd.avd .avd-faq__a > :last-child { margin-bottom: 0; }

/* -------------------------------------------------------- other doctors */

.avd.avd .avd-docs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.avd.avd .avd-docs--single { grid-template-columns: minmax(0, 200px); }
.avd.avd .avd-doc {
	border: var(--avd-hair);
	border-radius: 10px;
	overflow: hidden;
	text-align: center;
	padding-bottom: 12px;
	background: var(--avd-surface);
	display: flex;
	flex-direction: column;
}
/* Doctor photographs are portrait. A fixed 90px band cropped them to a
   landscape letterbox, which on a headshot means the top of a head and the
   bottom of a chin. A 3:4 box matches the source, so `cover` has almost
   nothing left to throw away. */
.avd.avd .avd-doc__avatar {
	display: block;
	aspect-ratio: 3 / 4;
	/* Floor for browsers with no aspect-ratio, and a ceiling so a narrow card
	   in a four-across row does not become a column of photograph. */
	min-height: 120px;
	max-height: 260px;
	overflow: hidden;
	background: linear-gradient(135deg, var(--avd-teal-50), var(--avd-teal-300));
}
.avd.avd .avd-doc__initials {
	display: flex;
	height: 100%;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	font-weight: 500;
	color: var(--avd-teal);
}
/* Faces sit above centre in a headshot, so a crop anchored at the middle
   takes it off the top. */
.avd.avd .avd-doc__img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.avd.avd .avd-doc__body { display: block; padding: 10px 10px 0; flex: 1; }
.avd.avd .avd-doc__name { display: block; font-size: 13px; font-weight: 500; color: var(--avd-head); text-decoration: none; margin-bottom: 4px; }
.avd.avd .avd-doc__qual { display: block; font-size: 11px; line-height: 1.4; margin-bottom: 10px; }
.avd.avd .avd-doc .avd-btn { margin: 0 10px; }

/* ------------------------------------------------------------------- form */

.avd.avd .avd-formcard {
	background: var(--avd-surface);
	border: var(--avd-hair);
	border-radius: var(--avd-radius);
	padding: 18px 20px;
}
.avd.avd .avd-formcard__heading { font-size: 15px; font-weight: 500; color: var(--avd-teal); }
.avd.avd .avd-formcard__sub { font-size: 12px; margin: 4px 0 14px; }
.avd.avd .avd-formcard__form { display: grid; gap: 8px; }
.avd.avd .avd-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.avd.avd .avd-formcard input,
.avd.avd .avd-formcard select,
.avd.avd .avd-formcard textarea {
	width: 100%;
	background: var(--avd-surface);
	border: var(--avd-hair);
	border-radius: 8px;
	padding: 10px 12px;
	font-family: inherit;
	font-size: 13px;
	color: var(--avd-head);
}
.avd.avd .avd-formcard textarea { height: 70px; resize: none; }
.avd.avd .avd-formcard__privacy { font-size: 11px; text-align: center; margin-top: 9px; line-height: 1.5; }
/* Phase 1 only: the preview form is inert and must never ship. */
.avd.avd .avd-formcard__form--preview { opacity: .95; }


/* ------------------------------------------------- Fluent Form, re-skinned
 *
 * Fluent Forms owns the markup below; we only dress it. Every selector is
 * scoped to .avd-formcard__form--fluent so nothing here can reach a Fluent
 * Form anywhere else on the site, and nothing is renamed, removed or
 * restructured — the field names, validation hooks and lead routing that
 * carry submissions to LeadSquared are untouched by a stylesheet.
 *
 * The plain input/select/textarea rules above already win against Fluent
 * Forms' own CSS on specificity, so the fields inherit our look for free.
 * What is left is the furniture around them: groups, labels, columns, the
 * submit button and the message states.
 */

/* Groups: Fluent Forms spaces with margins, we space with the grid gap.
 *
 * 14px between groups, 6px between a label and its own field. The order
 * matters: a label has to sit closer to the field it names than to the field
 * above it, or it reads as a caption on the wrong control. At an 8px gap and
 * a 4px label margin it was the wrong way round. */
.avd.avd .avd-formcard__form--fluent .ff-el-group,
.avd.avd .avd-formcard__form--fluent .ff-el-input--content { margin: 0; }
.avd.avd .avd-formcard__form--fluent .frm-fluent-form,
.avd.avd .avd-formcard__form--fluent form { display: grid; gap: 14px; }

/* Labels. Small and quiet — the artboard leads with the field, not its name.
 *
 * Three selectors because Fluent Forms emits the label three ways depending
 * on the form's label-placement setting: a <label> nested inside a
 * .ff-el-input--label wrapper, a <label> carrying that class itself, or a
 * bare <label> as the group's first child. Matching only the nested case
 * left the labels at the theme's 15px, which is what the rest of this block
 * was then sized against. */
.avd.avd .avd-formcard__form--fluent .ff-el-input--label label,
.avd.avd .avd-formcard__form--fluent label.ff-el-input--label,
.avd.avd .avd-formcard__form--fluent .ff-el-group > label {
	display: block;
	margin: 0 0 6px;
	padding: 0;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--avd-head);
}
.avd.avd .avd-formcard__form--fluent .ff-el-input--label { margin: 0; padding: 0; }

/* The required marker is a real element, not a pseudo — Fluent Forms puts a
   <span> in the label. Pull it back against the word it belongs to; it was
   floating a full space away and reading as its own column. */
.avd.avd .avd-formcard__form--fluent .ff-el-is-required,
.avd.avd .avd-formcard__form--fluent label .ff-el-is-required {
	margin-left: 2px;
	color: #c0392b;
	font-weight: 500;
}

/* Placeholder-only variant. Off by default: hiding a label on a field with no
   placeholder leaves a box nobody can identify, so this is opt-in per doctor
   and the labels stay in the accessibility tree either way. */
.avd.avd .avd-formcard__form--nolabels .ff-el-input--label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Columns. Fluent Forms lays multi-column rows out with its own container;
   re-express it as our two-up grid so a name row matches the artboard. */
.avd.avd .avd-formcard__form--fluent .ff-t-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
}
.avd.avd .avd-formcard__form--fluent .ff-t-cell {
	padding: 0;
	min-width: 0;
	flex: initial;
}

/* Fields. The generic rules above supply the box; these fix what Fluent
   Forms sets at higher specificity or on elements we do not otherwise reach. */
.avd.avd .avd-formcard__form--fluent input.ff-el-form-control,
.avd.avd .avd-formcard__form--fluent select.ff-el-form-control,
.avd.avd .avd-formcard__form--fluent textarea.ff-el-form-control {
	height: auto;
	min-height: 0;
	box-shadow: none;
	line-height: 1.4;
}
.avd.avd .avd-formcard__form--fluent textarea.ff-el-form-control { height: 70px; }
.avd.avd .avd-formcard__form--fluent input.ff-el-form-control:focus,
.avd.avd .avd-formcard__form--fluent select.ff-el-form-control:focus,
.avd.avd .avd-formcard__form--fluent textarea.ff-el-form-control:focus {
	border-color: var(--avd-teal);
	box-shadow: 0 0 0 3px var(--avd-teal-50);
	outline: none;
}
.avd.avd .avd-formcard__form--fluent ::placeholder { color: #9aa0a6; opacity: 1; }

/* The phone field's country selector (intl-tel-input).
 *
 * It renders as an absolutely-positioned box on top of the input, and the
 * input has to be padded out of its way — without that the placeholder
 * starts underneath the flag, which is exactly what it was doing. The
 * library's own stylesheet does this, but its padding is calculated against
 * its own field metrics, not ours.
 *
 * Class names changed in intl-tel-input v18 (flag-container → country-
 * container, selected-flag → selected-country) and Fluent Forms ships
 * whichever version it was built against, so both are covered. */
.avd.avd .avd-formcard__form--fluent .iti { position: relative; display: block; width: 100%; }

.avd.avd .avd-formcard__form--fluent .iti__flag-container,
.avd.avd .avd-formcard__form--fluent .iti__country-container {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	padding: 0;
	border: 0;
}

/* Transparent, with a hairline instead of the library's grey fill: a filled
   box inside a hairline field reads as two controls. */
.avd.avd .avd-formcard__form--fluent .iti__selected-flag,
.avd.avd .avd-formcard__form--fluent .iti__selected-country {
	height: 100%;
	padding: 0 8px;
	background: transparent;
	border-right: var(--avd-hair);
	border-radius: 8px 0 0 8px;
	outline: none;
}
.avd.avd .avd-formcard__form--fluent .iti--separate-dial-code .iti__selected-flag,
.avd.avd .avd-formcard__form--fluent .iti--separate-dial-code .iti__selected-country { background: transparent; }
.avd.avd .avd-formcard__form--fluent .iti__selected-flag:hover,
.avd.avd .avd-formcard__form--fluent .iti__selected-country:hover { background: var(--avd-teal-50); }

/* Clear of the selector. Wider when a dial code shows beside the flag. */
.avd.avd .avd-formcard__form--fluent .iti input[type="tel"],
.avd.avd .avd-formcard__form--fluent .iti input.ff-el-form-control { padding-left: 54px; }
.avd.avd .avd-formcard__form--fluent .iti--separate-dial-code input[type="tel"],
.avd.avd .avd-formcard__form--fluent .iti--separate-dial-code input.ff-el-form-control { padding-left: 92px; }

/* The country list must not be clipped by the card, and must sit above the
   sticky rail it lives in. */
.avd.avd .avd-formcard__form--fluent .iti__country-list {
	z-index: 20;
	max-width: 260px;
	text-align: left;
	font-size: 13px;
}

/* Checkboxes and radios — consent lines, mostly. */
.avd.avd .avd-formcard__form--fluent .ff-el-form-check { margin: 0 0 4px; }
.avd.avd .avd-formcard__form--fluent .ff-el-form-check-label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--avd-text);
}
.avd.avd .avd-formcard__form--fluent .ff-el-form-check input[type="checkbox"],
.avd.avd .avd-formcard__form--fluent .ff-el-form-check input[type="radio"] {
	width: auto;
	margin: 2px 0 0;
	padding: 0;
	flex: 0 0 auto;
	accent-color: var(--avd-teal);
}

/* Submit. Fluent Forms renders a real <button>, so it gets the button look
   rather than a copy of it — same radius, same teal, same full width. */
.avd.avd .avd-formcard__form--fluent .ff_submit_btn_wrapper,
.avd.avd .avd-formcard__form--fluent .ff-el-group.ff-text-left,
.avd.avd .avd-formcard__form--fluent .ff-el-group.ff-text-center { margin: 0; text-align: left; }
.avd.avd .avd-formcard__form--fluent button.ff-btn-submit,
.avd.avd .avd-formcard__form--fluent .ff-btn.ff-btn-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 0;
	border: 0;
	border-radius: 8px;
	padding: 13px;
	background: var(--avd-teal);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	text-transform: none;
	box-shadow: none;
	cursor: pointer;
	transition: background-color .15s ease;
}
.avd.avd .avd-formcard__form--fluent button.ff-btn-submit:hover,
.avd.avd .avd-formcard__form--fluent .ff-btn.ff-btn-submit:hover { background: var(--avd-teal-dark); color: #fff; }
.avd.avd .avd-formcard__form--fluent .ff-btn-submit[disabled] { opacity: .6; cursor: default; }

/* States. Errors read as errors; success replaces the form, so it has to
   look like a finished thing rather than a stray line of green text. */
.avd.avd .avd-formcard__form--fluent .ff-el-is-error input.ff-el-form-control,
.avd.avd .avd-formcard__form--fluent .ff-el-is-error select.ff-el-form-control,
.avd.avd .avd-formcard__form--fluent .ff-el-is-error textarea.ff-el-form-control { border-color: #c0392b; }
.avd.avd .avd-formcard__form--fluent .error-text,
.avd.avd .avd-formcard__form--fluent .text-danger,
.avd.avd .avd-formcard__form--fluent .ff-el-is-error .error {
	display: block;
	margin-top: 3px;
	font-size: 11px;
	line-height: 1.4;
	color: #c0392b;
}
.avd.avd .avd-formcard__form--fluent .ff-el-help-message {
	margin-top: 3px;
	font-size: 11px;
	line-height: 1.4;
	color: var(--avd-text);
}
.avd.avd .avd-formcard__form--fluent .ff-message-success,
.avd.avd .avd-formcard__form--fluent .ff_submit_success {
	border: 0.5px solid var(--avd-teal-200);
	border-radius: 8px;
	background: var(--avd-teal-50);
	padding: 16px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--avd-head);
	text-align: center;
}
.avd.avd .avd-formcard__form--fluent .ff-errors-in-stack,
.avd.avd .avd-formcard__form--fluent .error.text-danger {
	border-radius: 8px;
	font-size: 12px;
	line-height: 1.5;
}

/* reCAPTCHA is a fixed 304px and will burst the rail, which is narrower. */
.avd.avd .avd-formcard__form--fluent .ff-el-recaptcha,
.avd.avd .avd-formcard__form--fluent .g-recaptcha { overflow: hidden; max-width: 100%; }

/* ----------------------------------------------------------------- clinic */

.avd.avd .avd-clinic__card {
	background: var(--avd-surface);
	border: var(--avd-hair);
	border-radius: var(--avd-radius);
	overflow: hidden;
}
/* A doctor may consult at more than one hospital, so this is a stack rather
   than a single card. The gap has to come from the sibling and not from the
   section, or a doctor with one hospital gains a phantom space below it. */
.avd.avd .avd-clinic__card + .avd-clinic__card { margin-top: 12px; }
.avd.avd .avd-clinic__media {
	height: 110px;
	background: linear-gradient(135deg, var(--avd-teal-50) 0%, var(--avd-teal-300) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: var(--avd-hair);
}
.avd.avd .avd-clinic__img { width: 100%; height: 100%; object-fit: cover; }
.avd.avd .avd-clinic__placeholder { font-size: 12px; }
.avd.avd .avd-clinic__body { padding: 14px 16px; }
.avd.avd .avd-clinic__name { font-size: 14px; font-weight: 500; color: var(--avd-head); margin-bottom: 4px; }
.avd.avd .avd-clinic__addr { font-size: 12px; margin-bottom: 12px; }
.avd.avd .avd-clinic__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.avd.avd .avd-clinic__actions .avd-btn--block { grid-column: 1 / -1; }
.avd.avd .avd-clinic__actions .avd-btn { padding: 9px; font-size: 12px; border-width: 1px; }
.avd.avd .avd-clinic__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 12px 16px;
	border-top: var(--avd-hair);
}

.avd.avd .avd-sched { border-top: var(--avd-hair); padding: 14px 16px; background: var(--avd-surface); }
.avd.avd .avd-clinic .avd-sched { border: var(--avd-hair); border-top: 0; border-radius: 0 0 var(--avd-radius) var(--avd-radius); margin-top: -1px; }
.avd.avd .avd-sched__table {
	width: 100%;
	border-collapse: collapse;
	border: var(--avd-hair);
	border-radius: 10px;
	overflow: hidden;
	table-layout: fixed;
}
.avd.avd .avd-sched__table th {
	background: var(--avd-teal);
	color: #fff;
	font-size: 11px;
	font-weight: 500;
	text-align: left;
	padding: 9px 12px;
}
.avd.avd .avd-sched__table td { padding: 10px 12px; font-size: 11px; border-top: var(--avd-hair); vertical-align: middle; }
.avd.avd .avd-sched__loc { font-size: 12px; color: var(--avd-head); }
.avd.avd .avd-sched__note { font-size: 11px; margin-top: 7px; }

/* =========================================================================
 * MOBILE — doctor_profile_mobile.html
 *
 * The mobile artboard is not a reflow of the desktop one: it interleaves the
 * two desktop columns into a different sequence. `display:contents` dissolves
 * the column wrappers so every section becomes a direct flex child, and
 * `order` puts them in the client's order. Markup is untouched.
 * ====================================================================== */

@media (max-width: 1023px) {

	.avd.avd .avd-wrap { padding-left: 16px; padding-right: 16px; }

	.avd.avd .avd-hero__inner { gap: 14px; padding-top: 20px; }
	.avd.avd .avd-hero__img { width: 96px; height: 96px; border-radius: 12px; }
	.avd.avd .avd-hero__main { padding-top: 0; }
	.avd.avd .avd-hero__name { font-size: 20px; line-height: 1.2; }
	.avd.avd .avd-hero__quals { font-size: 12px; margin: 4px 0 8px; }
	.avd.avd .avd-hero__pills { gap: 6px; margin-bottom: 10px; }
	.avd.avd .avd-hero__meta { font-size: 11px; gap: 5px; }
	.avd.avd .avd-badge--honour { font-size: 9px; padding: 1px 5px; border-radius: 3px; }
	.avd.avd .avd-pill { font-size: 11px; padding: 3px 8px; }
	/* The mobile artboard drops the availability pill and the hero CTA stack;
	   the sticky bar below carries those actions instead. */
	.avd.avd .avd-pill--avail { display: none; }
	.avd.avd .avd-hero__cta { display: none; }

	.avd.avd .avd-stats { margin-top: 16px; }
	.avd.avd .avd-stat { padding: 12px 8px; }
	.avd.avd .avd-stat__num { font-size: 16px; }
	.avd.avd .avd-stat__num--rating { font-size: 14px; }
	.avd.avd .avd-stat__label { font-size: 10px; line-height: 1.4; }
	.avd.avd .avd-stars { font-size: 12px; letter-spacing: .5px; }

	/* Anchor nav out, 3-button CTA bar in. */
	.avd.avd .avd-nav { display: none; }
	.avd.avd .avd-mbar {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 8px;
		padding: 12px 16px;
	}
	.avd.avd .avd-mbar .avd-btn { padding: 11px 8px; font-size: 13px; }

	/* Flat single column in the mobile sequence. */
	.avd.avd .avd-layout {
		display: flex;
		flex-direction: column;
		gap: 8px;
		padding: 8px 0 0;
		max-width: none;
		/* The desktop rule sets align-items:start, which is right for a grid
		   — it stops the two columns stretching to equal height. Here the
		   same element is a flex COLUMN, where align-items governs the
		   inline axis instead, so start made every section shrink to its own
		   content width. It went unnoticed because most sections hold
		   something full-width anyway; the credentials card, once its list
		   was capped, collapsed to exactly the width of that list. */
		align-items: stretch;
	}
	.avd.avd .avd-col--main,
	.avd.avd .avd-col--side { display: contents; }

	.avd.avd .avd-section {
		background: var(--avd-surface);
		border: 0;
		border-radius: 0;
		padding: 18px 16px;
		/* The sections are flex items of .avd-layout, so their min-width is
		   `auto` and they refuse to shrink below their content. The 180px/140px
		   carousel rows below are wider than the phone, so without this the
		   section grows past the viewport and overflow-x never engages. */
		min-width: 0;
	}

	/* Mobile order, transcribed from doctor_profile_mobile.html. */
	.avd.avd .avd-section--about { order: 1; }
	.avd.avd .avd-section--expertise { order: 2; }
	.avd.avd .avd-section--satisfaction { order: 3; }
	.avd.avd .avd-section--reviews { order: 4; }
	.avd.avd .avd-section--credentials { order: 5; }
	.avd.avd .avd-section--clinic { order: 6; }
	.avd.avd .avd-section--stories { order: 7; }
	.avd.avd .avd-section--faq { order: 8; }
	.avd.avd .avd-section--form { order: 9; }
	.avd.avd .avd-section--related { order: 10; }

	/* Alternating bands, per the mobile artboard. */
	.avd.avd .avd-section--satisfaction,
	.avd.avd .avd-section--credentials,
	.avd.avd .avd-section--stories,
	.avd.avd .avd-section--faq,
	.avd.avd .avd-section--related { background: var(--avd-band); }

	.avd.avd .avd-card__title { font-size: 14px; gap: 10px; margin-bottom: 12px; }
	.avd.avd .avd-card__title--mobile { display: flex; }
	.avd.avd .avd-eyebrow--desktop { display: none; }

	.avd.avd .avd-highlights { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
	.avd.avd .avd-highlight { padding: 10px 12px; gap: 8px; }
	.avd.avd .avd-highlight__icon { font-size: 16px; }
	.avd.avd .avd-highlight__sub { font-size: 10px; }

	.avd.avd .avd-about__body { display: block; }
	.avd.avd .avd-bio__text { font-size: 13px; line-height: 1.7; }

	/* The intro video becomes its own band. The 8px page-coloured border
	   reproduces the gap between mobile sections without a second wrapper. */
	.avd.avd .avd-meet {
		width: auto;
		margin: 18px -16px -18px;
		padding: 18px 16px;
		background: var(--avd-surface);
		border-top: 8px solid var(--avd-bg);
	}
	.avd.avd .avd-meet__heading { display: flex; }
	.avd.avd .avd-meet__copy { display: block; }
	.avd.avd .avd-meet__body { display: flex; gap: 14px; align-items: center; }
	.avd.avd .avd-video { width: 124px; height: 196px; flex-shrink: 0; }
	.avd.avd .avd-play { width: 38px; height: 38px; font-size: 14px; padding-left: 3px; }
	.avd.avd .avd-video__cue { left: 10px; right: 10px; bottom: 8px; font-size: 10px; }
	.avd.avd .avd-meet__title { font-size: 13px; font-weight: 500; color: var(--avd-head); line-height: 1.45; margin-bottom: 6px; }
	.avd.avd .avd-meet__desc { font-size: 12px; line-height: 1.6; }

	.avd.avd .avd-tag { font-size: 12px; padding: 5px 10px; }
	.avd.avd .avd-tags { gap: 6px; }
	.avd.avd .avd-taggroup + .avd-taggroup { margin-top: 12px; }

	/* Score and bars sit side by side; the sub-scores wrap to a full-width
	   row beneath them, matching doctor_profile_mobile.html. */
	.avd.avd .avd-sat { gap: 16px; align-items: flex-start; }
	.avd.avd .avd-sat__big { font-size: 42px; }
	.avd.avd .avd-sat__pct { font-size: 18px; }
	.avd.avd .avd-sat__label { font-size: 11px; margin-top: 6px; }
	.avd.avd .avd-sat__note { font-size: 10px; }
	.avd.avd .avd-bars { flex: 1; min-width: 140px; padding-top: 6px; }
	.avd.avd .avd-subscores { flex-basis: 100%; width: auto; margin-top: 0; }
	.avd.avd .avd-subscore { background: var(--avd-surface); padding: 8px; }
	.avd.avd .avd-subscore__val { font-size: 16px; }
	.avd.avd .avd-subscore__label { font-size: 10px; }

	.avd.avd .avd-gsummary__num { font-size: 28px; }
	.avd.avd .avd-reviews { grid-template-columns: 1fr; gap: 8px; }
	.avd.avd .avd-review { padding: 12px 14px; }
	.avd.avd .avd-review__quote { font-size: 12px; line-height: 1.6; }

	/* Qualifications & recognition is centred as a whole on mobile.
	   The heading gets a second hairline so it sits between two rules
	   instead of losing the motif, and the list is capped and centred as a
	   block — the rows keep their left-aligned text so it still scans as a
	   list rather than a ragged centred stack. */
	.avd.avd .avd-section--credentials .avd-card__title { justify-content: center; }
	.avd.avd .avd-section--credentials .avd-card__title::before {
		content: "";
		flex: 1;
		height: 0.5px;
		background: var(--avd-line);
	}
	.avd.avd .avd-creds {
		/* Full-width grid with a narrower centred track — not a narrow grid,
		   which would let the card shrink to it. */
		width: 100%;
		grid-template-columns: minmax(0, 300px);
		justify-content: center;
		gap: 0;
	}
	.avd.avd .avd-cred { padding: 10px 0; }
	.avd.avd .avd-cred:last-child { border-bottom: 0; }
	.avd.avd .avd-cred__icon { width: 32px; height: 32px; font-size: 15px; }

	/* The video stories and the other-doctors row used to be bare overflow-x
	   scrollers with fixed 180px/140px cards, which is what clipped them
	   mid-card at the viewport edge. They are carousels now: two per view,
	   sized to the viewport, so a card is never half off-screen. */
	.avd.avd .avd-story__thumb { height: 100px; }
	.avd.avd .avd-story__title { font-size: 11px; }
	.avd.avd .avd-story__cap { font-size: 10px; }
	.avd.avd .avd-doc__avatar { min-height: 110px; max-height: 200px; }
	.avd.avd .avd-doc__initials { font-size: 22px; }
	.avd.avd .avd-doc__name { font-size: 12px; }
	.avd.avd .avd-doc__qual { font-size: 10px; }

	/* Phones get their own slide count — one for reading (reviews, photos),
	   two for browsing (video stories, other doctors). Same specificity as
	   the desktop rules above, and later in the file, so these win. */
	.avd.avd .avd-carousel__track { gap: 8px; }
	/* One review — or one photo — per screen, at exactly screen width. */
	.avd.avd .avd-carousel[data-per-view-mobile="1"] .avd-carousel__slide { flex-basis: 100%; width: 100%; }
	.avd.avd .avd-carousel[data-per-view-mobile="2"] .avd-carousel__slide { flex-basis: calc(50% - 4px); }
	/* Bigger targets on a touch screen, and the strip sits far enough below
	   the row to read as a control rather than part of the last card. */
	.avd.avd .avd-carousel__ctl { gap: 14px; margin-top: 12px; }
	.avd.avd .avd-carousel__arrow { width: 38px; height: 38px; font-size: 22px; }
	.avd.avd .avd-carousel__dot { width: 8px; height: 8px; }
	.avd.avd .avd-carousel__dot.is-active { width: 20px; }

	.avd.avd .avd-gallery { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.avd.avd .avd-gallery__img { height: 180px; }

	.avd.avd .avd-faq__item { padding: 12px 0; }
	.avd.avd .avd-faq__q { font-size: 13px; }
	.avd.avd .avd-faq__a { font-size: 12px; line-height: 1.65; }

	/* The mobile artboard nests the form in a tinted card. */
	.avd.avd .avd-formcard { background: var(--avd-teal-50); border-color: var(--avd-teal-200); padding: 16px; }
	.avd.avd .avd-formcard input,
	.avd.avd .avd-formcard select,
	.avd.avd .avd-formcard textarea { background: #fff; }
	/* The card itself is teal on mobile, so the success panel needs to lift
	   off it rather than blend into it. */
	.avd.avd .avd-formcard__form--fluent .ff-message-success,
	.avd.avd .avd-formcard__form--fluent .ff_submit_success { background: #fff; }
	.avd.avd .avd-formcard__heading { font-size: 14px; }
	.avd.avd .avd-formcard__sub { font-size: 11px; margin: 3px 0 14px; }

	.avd.avd .avd-section--clinic { padding-bottom: 18px; }
	.avd.avd .avd-clinic__actions { grid-template-columns: repeat(3, 1fr); }
	.avd.avd .avd-clinic__actions .avd-btn--block { grid-column: auto; }
	.avd.avd .avd-clinic .avd-sched { border: 0; margin-top: 14px; padding: 0; background: transparent; }

	.avd.avd .avd-linkbtn { font-size: 12px; padding: 10px; }
}

/* Narrow phones: the highlight grid stops fitting two across. */
@media (max-width: 380px) {
	.avd.avd .avd-highlights { grid-template-columns: 1fr; }
	.avd.avd .avd-mbar { grid-template-columns: 1fr 1fr; }
	.avd.avd .avd-mbar .avd-btn:first-child { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
	.avd.avd * { transition: none !important; scroll-behavior: auto !important; }
}

/* Print: drop the sticky chrome and the interactive-only blocks. */
@media print {
	.avd.avd .avd-sticky,
	.avd.avd .avd-mbar,
	.avd.avd .avd-section--form,
	.avd.avd .avd-linkbtn { display: none !important; }
	.avd.avd .avd-layout { display: block; }
	.avd.avd .avd-card { break-inside: avoid; border: 1px solid #ccc; }
}