/*
Theme Name: BSI Theme
Theme URI: https://bangaloreshoulderinstitute.com
Author: Bee Online
Description: Lightweight Elementor-ready theme for Bangalore Shoulder Institute. Warm, reassuring design system built for a content-heavy clinical site. Ships one stylesheet, no jQuery UI, no legacy libraries.
Version: 1.0.0
Requires at least: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bsi
Tags: elementor, one-column, custom-colors, custom-menu, translation-ready
*/

/* ==========================================================================
   1. DESIGN TOKENS
   Single source of truth. Elementor Global Colors/Fonts are mapped onto
   these in Site Settings, so a palette change is one edit here + there,
   never 80 page edits.
   ========================================================================== */

:root {
	/* --- Brand: orange ---
	   Sampled from the logo: #EC7123.
	   That brand orange measures only 3.02:1 on white, so it CANNOT carry
	   body text. Two tiers instead:
	     --bsi-orange        deep, text-safe   5.20:1 white / 4.87:1 sand
	     --bsi-orange-bright #F68220 brand hue. As a BACKGROUND it needs dark
	                         text: white on it is only 2.58:1, ink is 6.15:1.
	   --------------------------------------------------------------- */
	--bsi-orange:        #B44E0C;
	--bsi-orange-dark:   #8F3B06;
	--bsi-orange-bright: #F68220;
	--bsi-orange-wash:   #FDF0E7;

	/* Secondary accent — ticks, rules, active dots. Light enough that ink
	   text on it still passes. */
	--bsi-amber:         #F5A24A;
	--bsi-amber-dark:    #D9822B;
	--bsi-amber-wash:    #FEF3E8;

	--bsi-sand:          #FAF7F2;
	--bsi-sand-deep:     #F5EDE4;
	--bsi-ink:           #2B2018;
	--bsi-ink-soft:      #5A4B40;

	/* WCAG audited: 5.20:1 on white, 4.87:1 on sand. */
	--bsi-ink-faint:     #6E5C4E;

	/* Decorative hairline only — never a control boundary. */
	--bsi-rule:          #E8DDD0;

	/* Form-control boundary: WCAG 1.4.11 needs 3:1. */
	--bsi-border-strong: #97836F;

	--bsi-white:         #FFFFFF;

	/* --- Semantic --- */
	--bsi-bg:            var(--bsi-white);
	--bsi-bg-alt:        var(--bsi-sand);
	--bsi-text:          var(--bsi-ink);
	--bsi-text-muted:    var(--bsi-ink-soft);
	--bsi-primary:       var(--bsi-orange);
	--bsi-accent:        var(--bsi-amber);
	--bsi-border:        var(--bsi-rule);

	/* --- Type ---
	   Inverted from the templated serif-display / sans-body pairing.
	   Medical publishing sets sans on anatomical plates and serif in journal
	   body text; this site is a clinical reference, so it follows that.
	   Both self-hosted — see assets/fonts/fonts.css. */
	--bsi-font-head: "Plex Cond", "IBM Plex Sans Condensed", "Helvetica Neue", Arial, sans-serif;
	--bsi-font-body: "Literata", Georgia, "Times New Roman", serif;
	--bsi-font-ui:   "Plex Cond", "IBM Plex Sans Condensed", "Helvetica Neue", Arial, sans-serif;

	/* Fluid scale: 320px -> 1280px viewport */
	--bsi-t-xs:   clamp(0.78rem, 0.76rem + 0.10vw, 0.83rem);
	--bsi-t-sm:   clamp(0.88rem, 0.85rem + 0.14vw, 0.94rem);
	--bsi-t-base: clamp(1.00rem, 0.96rem + 0.20vw, 1.09rem);
	--bsi-t-md:   clamp(1.13rem, 1.06rem + 0.33vw, 1.31rem);
	--bsi-t-lg:   clamp(1.35rem, 1.22rem + 0.62vw, 1.69rem);
	--bsi-t-xl:   clamp(1.62rem, 1.39rem + 1.09vw, 2.20rem);
	--bsi-t-2xl:  clamp(1.94rem, 1.56rem + 1.86vw, 2.94rem);
	--bsi-t-3xl:  clamp(1.95rem, 1.62rem + 1.65vw, 2.85rem);

	--bsi-lh-tight: 1.18;
	--bsi-lh-snug:  1.35;
	--bsi-lh-body:  1.7;   /* long clinical prose — generous by design */

	/* --- Spacing (4px base) --- */
	--bsi-s-1:  0.25rem;
	--bsi-s-2:  0.5rem;
	--bsi-s-3:  0.75rem;
	--bsi-s-4:  1rem;
	--bsi-s-5:  1.5rem;
	--bsi-s-6:  2rem;
	--bsi-s-7:  3rem;
	--bsi-s-8:  4rem;
	--bsi-s-9:  6rem;

	/* --- Form --- */
	--bsi-radius-sm: 6px;
	--bsi-radius:    12px;
	--bsi-radius-lg: 20px;

	--bsi-shadow-sm: 0 1px 2px rgba(43, 41, 38, 0.06);
	--bsi-shadow:    0 2px 8px rgba(43, 41, 38, 0.07), 0 1px 2px rgba(43, 41, 38, 0.04);
	--bsi-shadow-lg: 0 12px 32px rgba(43, 41, 38, 0.10), 0 2px 8px rgba(43, 41, 38, 0.05);

	--bsi-measure: 68ch;   /* readable line length for clinical copy */
	--bsi-wrap:    1180px;

	--bsi-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */

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

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

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

body {
	margin: 0;
	background: var(--bsi-bg);
	color: var(--bsi-text);
	font-family: var(--bsi-font-body);
	font-size: var(--bsi-t-base);
	line-height: var(--bsi-lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

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

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--bsi-font-head);
	color: var(--bsi-ink);
	font-weight: 600;
	line-height: var(--bsi-lh-tight);
	margin: 0 0 var(--bsi-s-4);
	text-wrap: balance;
}

h1 { font-size: var(--bsi-t-3xl); letter-spacing: -0.02em; }
h2 { font-size: var(--bsi-t-2xl); letter-spacing: -0.015em; margin-top: var(--bsi-s-8); }
h3 { font-size: var(--bsi-t-xl);  letter-spacing: -0.01em;  margin-top: var(--bsi-s-7); }
h4 { font-size: var(--bsi-t-lg);  margin-top: var(--bsi-s-6); }
h5 { font-size: var(--bsi-t-md);  margin-top: var(--bsi-s-5); }
h6 {
	font-size: var(--bsi-t-sm);
	font-family: var(--bsi-font-ui);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--bsi-ink-faint);
	margin-top: var(--bsi-s-5);
}

/* First heading in a content flow shouldn't push away from the top */
h1:first-child, h2:first-child, h3:first-child, h4:first-child { margin-top: 0; }

p { margin: 0 0 var(--bsi-s-4); }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 650; color: var(--bsi-ink); }

a {
	color: var(--bsi-orange);
	text-decoration-color: color-mix(in srgb, var(--bsi-orange) 35%, transparent);
	text-underline-offset: 0.18em;
	transition: color 0.18s var(--bsi-ease), text-decoration-color 0.18s var(--bsi-ease);
}
a:hover { color: var(--bsi-orange-dark); text-decoration-color: currentColor; }

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

blockquote {
	margin: var(--bsi-s-6) 0;
	padding: var(--bsi-s-5) var(--bsi-s-6);
	background: var(--bsi-orange-wash);
	border-left: 4px solid var(--bsi-orange);
	border-radius: 0 var(--bsi-radius) var(--bsi-radius) 0;
	font-size: var(--bsi-t-md);
	color: var(--bsi-ink);
}
blockquote p:last-child { margin-bottom: 0; }

hr {
	border: 0;
	height: 1px;
	background: var(--bsi-border);
	margin: var(--bsi-s-7) 0;
}

/* ==========================================================================
   4. LISTS
   Converted [items_list]/[item] markup lands here as .bsi-list.
   ========================================================================== */

ul, ol { margin: 0 0 var(--bsi-s-4); padding-left: var(--bsi-s-5); }
li { margin-bottom: var(--bsi-s-2); }
li:last-child { margin-bottom: 0; }

.bsi-list {
	list-style: none;
	padding-left: 0;
	margin: var(--bsi-s-5) 0;
}
.bsi-list > li {
	position: relative;
	padding-left: var(--bsi-s-6);
	margin-bottom: var(--bsi-s-3);
}
.bsi-list > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--bsi-amber);
	box-shadow: 0 0 0 4px var(--bsi-amber-wash);
}

/* ==========================================================================
   5. TABLES
   vc_raw_html decoded to <table> — 36 instances across the site.
   ========================================================================== */

.bsi-table-wrap { overflow-x: auto; margin: var(--bsi-s-6) 0; }

table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--bsi-t-sm);
	background: var(--bsi-white);
	border: 1px solid var(--bsi-border);
	border-radius: var(--bsi-radius);
	overflow: hidden;
}
th, td {
	padding: var(--bsi-s-3) var(--bsi-s-4);
	text-align: left;
	border-bottom: 1px solid var(--bsi-border);
	vertical-align: top;
}
th {
	background: var(--bsi-orange);
	color: var(--bsi-white);
	font-family: var(--bsi-font-ui);
	font-weight: 600;
	font-size: var(--bsi-t-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
tbody tr:nth-child(even) { background: var(--bsi-sand); }
tbody tr:last-child td { border-bottom: 0; }

/* ==========================================================================
   6. BUTTONS
   ========================================================================== */

.bsi-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--bsi-s-2);
	padding: var(--bsi-s-3) var(--bsi-s-6);
	font-family: var(--bsi-font-ui);
	font-size: var(--bsi-t-sm);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	border: 1.5px solid transparent;
	border-radius: var(--bsi-radius-sm);
	cursor: pointer;
	transition: background 0.18s var(--bsi-ease), border-color 0.18s var(--bsi-ease),
	            color 0.18s var(--bsi-ease), transform 0.18s var(--bsi-ease);
}
.bsi-btn--primary { background: var(--bsi-orange); color: var(--bsi-white); }
.bsi-btn--primary:hover { background: var(--bsi-orange-dark); color: var(--bsi-white); transform: translateY(-1px); }

.bsi-btn--accent { background: var(--bsi-amber); color: var(--bsi-ink); }
.bsi-btn--accent:hover { background: #D9A23C; color: var(--bsi-ink); transform: translateY(-1px); }

.bsi-btn--ghost { background: transparent; color: var(--bsi-orange); border-color: var(--bsi-orange); }
.bsi-btn--ghost:hover { background: var(--bsi-orange); color: var(--bsi-white); }

/* ==========================================================================
   7. LAYOUT HELPERS
   ========================================================================== */

.bsi-wrap {
	width: 100%;
	max-width: var(--bsi-wrap);
	margin-inline: auto;
	padding-inline: var(--bsi-s-5);
}

.bsi-prose { max-width: var(--bsi-measure); }
.bsi-prose img { border-radius: var(--bsi-radius); margin: var(--bsi-s-5) 0; }

.bsi-figure { margin: var(--bsi-s-6) 0; }
.bsi-figure img { border-radius: var(--bsi-radius); box-shadow: var(--bsi-shadow); }
.bsi-figure figcaption {
	margin-top: var(--bsi-s-2);
	font-size: var(--bsi-t-xs);
	color: var(--bsi-ink-faint);
	text-align: center;
}

.bsi-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: var(--bsi-s-3) var(--bsi-s-5);
	background: var(--bsi-orange);
	color: var(--bsi-white);
	border-radius: 0 0 var(--bsi-radius-sm) 0;
}
.bsi-skip-link:focus { left: 0; color: var(--bsi-white); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ==========================================================================
   8. ACCORDION  (converted vc_toggle / vc_tta_* — zero JS)
   ========================================================================== */

.bsi-accordion {
	border: 1px solid var(--bsi-border);
	border-radius: var(--bsi-radius);
	margin: var(--bsi-s-3) 0;
	background: var(--bsi-white);
	overflow: hidden;
}
.bsi-accordion > summary {
	padding: var(--bsi-s-4) var(--bsi-s-5);
	font-family: var(--bsi-font-head);
	font-size: var(--bsi-t-md);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--bsi-s-4);
	background: var(--bsi-sand);
	transition: background 0.18s var(--bsi-ease);
}
.bsi-accordion > summary:hover { background: var(--bsi-sand-deep); }
.bsi-accordion > summary::-webkit-details-marker { display: none; }
.bsi-accordion > summary::after {
	content: "+";
	font-family: var(--bsi-font-body);
	font-size: var(--bsi-t-lg);
	color: var(--bsi-orange);
	flex-shrink: 0;
	transition: transform 0.2s var(--bsi-ease);
}
.bsi-accordion[open] > summary::after { transform: rotate(45deg); }
.bsi-accordion > .bsi-accordion__body { padding: var(--bsi-s-5); }

/* ==========================================================================
   9. ELEMENTOR BRIDGE
   Keeps Elementor's canvas from fighting the theme's rhythm.
   ========================================================================== */

.elementor-widget-text-editor { line-height: var(--bsi-lh-body); }
.elementor-widget-text-editor ul { padding-left: var(--bsi-s-5); }

/* Elementor injects its own <a> colours; align them with the token set. */
.elementor a { color: var(--bsi-orange); }
.elementor a:hover { color: var(--bsi-orange-dark); }

/* Full-bleed sections shouldn't inherit the prose measure. */
.elementor-section, .e-con { max-width: none; }

/* ==========================================================================
   10. SITE CHROME — fallback header/footer
   Used only when no Elementor Theme Builder template covers the location,
   so the site never renders naked if PRO Elements fails to load.
   ========================================================================== */

/* --- icons --- */
.bsi-icon { display: inline-block; vertical-align: -0.15em; flex-shrink: 0; }

/* --- masthead contact ---
   The dark utility strip is gone; email and phone now sit beside the logo,
   which removes a whole horizontal band and one repeated colour field. */
.bsi-contact {
	display: flex;
	align-items: center;
	gap: var(--bsi-s-6);
	list-style: none;
	margin: 0 0 0 auto;
	padding: 0;
	font-family: var(--bsi-font-ui);
}
.bsi-contact li { margin: 0; }
.bsi-contact a {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	min-height: 44px;              /* touch target */
	font-size: var(--bsi-t-sm);
	font-weight: 550;
	color: var(--bsi-ink-soft);
	text-decoration: none;
	white-space: nowrap;
}
.bsi-contact a:hover { color: var(--bsi-orange); }
.bsi-contact__icon {
	color: var(--bsi-orange);
	flex-shrink: 0;
}

/* --- masthead --- */
.bsi-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--bsi-white);
	box-shadow: 0 1px 0 var(--bsi-border);
}
/* The WP admin bar is fixed at the viewport top; without this the sticky
   header slides underneath it and the utility bar is unreadable. */
.admin-bar .bsi-header { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .bsi-header { top: 46px; }
}
.bsi-masthead { background: var(--bsi-white); }
.bsi-masthead__inner {
	display: flex;
	align-items: center;
	gap: var(--bsi-s-6);
	min-height: 84px;
}
/* Nav gets its own full-width row — 9 top-level items will not share a
   line with the brand at any realistic viewport. */
.bsi-navbar {
	background: var(--bsi-sand);
	border-top: 1px solid var(--bsi-border);
	border-bottom: 1px solid var(--bsi-border);
}

.bsi-brand__link {
	display: inline-flex;
	align-items: center;
	gap: var(--bsi-s-3);
	text-decoration: none;
}
.bsi-brand__mark {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	flex-shrink: 0;
	border-radius: 10px;
	background: var(--bsi-orange);
	color: var(--bsi-white);
	font-family: var(--bsi-font-head);
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
}
.bsi-brand__text { display: flex; flex-direction: column; line-height: 1.2; }
.bsi-brand__name {
	font-family: var(--bsi-font-head);
	font-size: var(--bsi-t-md);
	font-weight: 600;
	color: var(--bsi-ink);
	letter-spacing: -0.01em;
}
.bsi-brand__tag {
	font-size: var(--bsi-t-xs);
	color: var(--bsi-ink-faint);
	letter-spacing: 0.02em;
}
.bsi-header .custom-logo { max-height: 56px; width: auto; }

/* --- primary nav ---
   9 top-level items plus a CTA is tight at 1440px. Nowrap + a tighter,
   viewport-scaled gap keeps it on one line down to ~1100px, below which
   the burger takes over. */
.bsi-nav { min-width: 0; }
.bsi-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(1rem, 2.2vw, 2.2rem);
	list-style: none;
	margin: 0;
	padding: 0;
}
.bsi-nav__list li { position: relative; margin: 0; }
.bsi-nav__list a {
	display: inline-block;
	font-size: var(--bsi-t-sm);
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--bsi-ink-soft);
	text-decoration: none;
	padding-block: var(--bsi-s-3);
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}
.bsi-nav__list a:hover,
.bsi-nav__list .current-menu-item > a,
.bsi-nav__list .current-menu-ancestor > a {
	color: var(--bsi-orange);
	border-bottom-color: var(--bsi-amber);
}
.bsi-nav__chevron { margin-left: 0.3em; opacity: 0.55; transition: transform 0.18s var(--bsi-ease); }
.bsi-has-mega:hover > a .bsi-nav__chevron { transform: rotate(180deg); opacity: 1; }

/* ==========================================================================
   MEGA MENU
   Three panel shapes, because the menu is lopsided:
     .bsi-mega--grouped  SERVICES  (5 group headings, 17 links)
     .bsi-mega--flat     CONDITIONS (52 flat links -> columns)
     .bsi-mega--plain    INFO / PATIENT REVIEWS / GALLERY (2-4 links)
   ========================================================================== */

/* Specificity note: `.bsi-nav__list li` is (0,1,1) and would beat a bare
   `.bsi-has-mega` (0,1,0), pinning the panel to the item's own width. The
   list selector is repeated here so static actually wins and the panel can
   span the navbar. */
.bsi-navbar { position: relative; }
.bsi-nav__list li.bsi-has-mega { position: static; }
.bsi-nav__list li.bsi-mega--plain { position: relative; }

.bsi-mega {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 60;
	background: var(--bsi-white);
	border-top: 3px solid var(--bsi-orange);
	border-bottom: 1px solid var(--bsi-border);
	box-shadow: var(--bsi-shadow-lg);
}
.bsi-has-mega:hover > .bsi-mega,
.bsi-has-mega:focus-within > .bsi-mega { display: block; }

.bsi-mega__inner {
	width: 100%;
	max-width: var(--bsi-wrap);
	margin-inline: auto;
	padding: var(--bsi-s-6) var(--bsi-s-5);
	max-height: min(70vh, 620px);
	overflow-y: auto;
}
.bsi-mega__list { list-style: none; margin: 0; padding: 0; }
.bsi-mega__list li { margin: 0; }

.bsi-mega a {
	display: block;
	padding: 0.36rem 0;
	font-size: var(--bsi-t-sm);
	font-weight: 450;
	color: var(--bsi-ink-soft);
	text-decoration: none;
	white-space: normal;
	border: 0;
	line-height: 1.4;
}
.bsi-mega a:hover { color: var(--bsi-orange); }

/* grouped: one column per group heading.
   180px minimum so all five groups (SHOULDER KNEE ELBOW REHAB ANKLE) fit on
   one row — at 210px only four fit and ANKLE wrapped under SHOULDER, reading
   as if it belonged to that list. */
.bsi-mega--grouped .bsi-mega__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--bsi-s-5) var(--bsi-s-6);
	align-items: start;
}

/* Specificity: `.bsi-mega a` is (0,1,1) and would override a bare
   `.bsi-mega__grouptitle` (0,1,0), so linked headings lost their styling.
   Two classes (0,2,0) wins for both the <a> and <span> forms. */
.bsi-mega .bsi-mega__grouptitle {
	display: block;
	text-decoration: none;
	font-family: var(--bsi-font-ui);
	font-size: var(--bsi-t-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--bsi-orange);
	padding: 0 0 var(--bsi-s-2);
	margin-bottom: var(--bsi-s-2);
	border-bottom: 2px solid var(--bsi-amber);
	line-height: 1.3;
}
.bsi-mega a.bsi-mega__grouptitle:hover { color: var(--bsi-orange-dark); }
.bsi-mega__sublist { list-style: none; margin: 0; padding: 0; }

/* flat: 52 links flowed into balanced columns */
.bsi-mega--flat .bsi-mega__list {
	columns: 4;
	column-gap: var(--bsi-s-6);
}
.bsi-mega--flat .bsi-mega__list li { break-inside: avoid; }

/* plain: a narrow dropdown, anchored to its own item */
.bsi-mega--plain .bsi-mega {
	left: 0;
	right: auto;
	min-width: 240px;
	border-radius: 0 0 var(--bsi-radius-sm) var(--bsi-radius-sm);
}
.bsi-mega--plain .bsi-mega__inner { padding: var(--bsi-s-3) var(--bsi-s-4); }

/* --- CSS-only mobile toggle --- */
.bsi-burger { display: none; }
/* Mobile-only: added by initNav(), shown by the max-width:900px block. */
.bsi-nav__toggle { display: none; }
.bsi-nav-toggle { display: none; }

.bsi-main { min-height: 0; }

/* ==========================================================================
   11. FOOTER
   ========================================================================== */

/* No top margin: sections already carry generous padding-block, and the
   6rem margin here rendered as a bare white band between the last section
   and the footer. */
.bsi-footer { background: var(--bsi-ink); color: var(--bsi-sand); }

/* Three fact blocks: consultation, appointments phone, email. */
.bsi-footer__top { background: var(--bsi-orange-bright); }
.bsi-footer__top-inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--bsi-s-5);
	padding-block: var(--bsi-s-6);
}
.bsi-footer__fact { display: flex; align-items: flex-start; gap: var(--bsi-s-4); }
.bsi-footer__fact-icon { color: var(--bsi-ink); margin-top: 2px; }
.bsi-footer__fact-label {
	margin: 0 0 2px;
	font-size: var(--bsi-t-xs);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: color-mix(in srgb, var(--bsi-ink) 78%, transparent);
}
.bsi-footer__fact-value {
	margin: 0;
	font-family: var(--bsi-font-head);
	font-size: var(--bsi-t-md);
	font-weight: 600;
	color: var(--bsi-ink);
}
.bsi-footer__fact-value a { color: var(--bsi-ink); text-decoration: none; }
.bsi-footer__fact-value a:hover { color: var(--bsi-orange-dark); }

/* Five columns in a single row: Shoulder, Elbow, Ankle, Knee, Reach Us. */
.bsi-footer__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(220px, 1.15fr);
	gap: var(--bsi-s-6) var(--bsi-s-5);
	padding-block: var(--bsi-s-8) var(--bsi-s-7);
	align-items: start;
}

/* Ticked condition lists, matching the live footer. */
.bsi-footer__list--check li {
	display: grid;
	grid-template-columns: 14px 1fr;
	gap: 0.55em;
	align-items: start;
	margin-bottom: var(--bsi-s-2);
	line-height: 1.45;
}
.bsi-footer__tick { color: var(--bsi-amber); margin-top: 0.35em; }
.bsi-footer__list--check a,
.bsi-footer__list--check span {
	font-size: var(--bsi-t-sm);
	color: color-mix(in srgb, var(--bsi-sand) 85%, transparent);
}
.bsi-footer__list--check a:hover { color: var(--bsi-amber); }
/* Entries with no page behind them: same appearance, not a dead link. */
.bsi-footer__list--check span { color: color-mix(in srgb, var(--bsi-sand) 62%, transparent); }

/* --- Reach Us column --- */
.bsi-footer__map {
	aspect-ratio: 4 / 3;
	margin-bottom: var(--bsi-s-4);
	border-radius: var(--bsi-radius);
	overflow: hidden;
	border: 1px solid color-mix(in srgb, #fff 16%, transparent);
	background: color-mix(in srgb, #fff 6%, transparent);
}
.bsi-footer__map iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 1200px) {
	.bsi-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
	.bsi-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bsi-footer__map { max-width: 420px; }
}
@media (max-width: 560px) {
	.bsi-footer__grid { grid-template-columns: 1fr; }
}
.bsi-footer__address {
	font-style: normal;
	font-size: var(--bsi-t-sm);
	line-height: 1.75;
	color: color-mix(in srgb, var(--bsi-sand) 78%, transparent);
}
.bsi-footer__heading {
	font-family: var(--bsi-font-ui);
	font-size: var(--bsi-t-xs);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--bsi-amber);
	margin: 0 0 var(--bsi-s-4);
}
.bsi-footer__list { list-style: none; margin: 0; padding: 0; }
.bsi-footer__list li { margin-bottom: var(--bsi-s-2); }
.bsi-footer a { color: color-mix(in srgb, var(--bsi-sand) 85%, transparent); font-size: var(--bsi-t-sm); text-decoration: none; }
.bsi-footer a:hover { color: var(--bsi-amber); }

.bsi-footer__base { border-top: 1px solid color-mix(in srgb, #fff 12%, transparent); padding-block: var(--bsi-s-5); }
.bsi-footer__base-inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bsi-s-3);
	justify-content: space-between;
	font-size: var(--bsi-t-xs);
	color: color-mix(in srgb, var(--bsi-sand) 60%, transparent);
}
.bsi-footer__base p { margin: 0; }
.bsi-footer__disclaimer { font-style: italic; }

/* ==========================================================================
   12. HOMEPAGE
   ========================================================================== */

.bsi-hero {
	background:
		radial-gradient(120% 90% at 88% 8%, var(--bsi-orange-wash) 0%, transparent 58%),
		linear-gradient(180deg, var(--bsi-sand) 0%, var(--bsi-white) 100%);
	border-bottom: 1px solid var(--bsi-border);
}
/* --- banner rail ---
   Scroll-snap, no JS. The slides are surgical plates on white, so they sit
   on a tinted band that reads as a light-box rather than bleeding into the
   page. */
/* ==========================================================================
   BANNER SLIDER  (replaces RevSlider)
   ========================================================================== */

.bsi-slider {
	position: relative;
	background: var(--bsi-sand-deep);
	border-bottom: 1px solid var(--bsi-border);
	overflow: hidden;
}
/* Full-bleed: the banner spans the viewport, not the content column.
   Height is capped so ultrawide screens don't get a letterbox slab. */
.bsi-slider__viewport {
	position: relative;
	width: 100%;
	aspect-ratio: 1170 / 400;
	max-height: 520px;
}
.bsi-slider__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s var(--bsi-ease);
}
.bsi-slider__slide.is-active { opacity: 1; visibility: visible; }
.bsi-slider__slide img,
.bsi-slider__link { display: block; width: 100%; height: 100%; }
.bsi-slider__slide img { object-fit: cover; }

/* No-JS: first slide is already .is-active, so the banner still shows. */

.bsi-slider__overlay {
	position: absolute;
	left: max(5%, calc(50% - var(--bsi-wrap) / 2));
	top: 50%;
	transform: translateY(-50%);
	max-width: min(46%, 460px);
	padding: var(--bsi-s-5);
	background: color-mix(in srgb, var(--bsi-white) 88%, transparent);
	backdrop-filter: blur(3px);
	border-radius: var(--bsi-radius);
	border-left: 4px solid var(--bsi-amber);
}
.bsi-slider__title {
	margin: 0 0 var(--bsi-s-2);
	font-family: var(--bsi-font-head);
	font-size: var(--bsi-t-lg);
	font-weight: 700;
	line-height: 1.15;
	color: var(--bsi-ink);
}
.bsi-slider__title span {
	display: block;
	font-size: var(--bsi-t-sm);
	font-weight: 500;
	color: var(--bsi-ink-soft);
	letter-spacing: 0.01em;
}
.bsi-slider__text {
	margin: 0 0 var(--bsi-s-4);
	font-size: var(--bsi-t-sm);
	line-height: 1.55;
	color: var(--bsi-ink-soft);
}

/* --- controls --- */
.bsi-slider__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;                 /* 44px minimum touch target */
	border: 1px solid var(--bsi-border);
	border-radius: 50%;
	background: color-mix(in srgb, var(--bsi-white) 90%, transparent);
	color: var(--bsi-ink);
	cursor: pointer;
	z-index: 3;
	transition: background 0.18s var(--bsi-ease), color 0.18s var(--bsi-ease);
}
.bsi-slider__nav:hover { background: var(--bsi-orange); color: #fff; border-color: var(--bsi-orange); }
.bsi-slider__nav--prev { left: clamp(12px, 3vw, 48px); }
.bsi-slider__nav--next { right: clamp(12px, 3vw, 48px); }
.bsi-slider__nav--prev .bsi-icon { transform: rotate(90deg); }
.bsi-slider__nav--next .bsi-icon { transform: rotate(-90deg); }

.bsi-slider__dots {
	position: absolute;
	left: 50%;
	bottom: 10px;
	transform: translateX(-50%);
	display: flex;
	gap: 2px;
	z-index: 3;
	padding: 2px 6px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--bsi-ink) 32%, transparent);
}
/* The visible dot stays 9px, but the button itself is 24px so it is
   actually clickable — a bare 9px target misses constantly and is under the
   WCAG 2.2 AA 24px minimum. The dot is drawn with ::before. */
.bsi-slider__dot {
	position: relative;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	display: grid;
	place-items: center;
}
.bsi-slider__dot::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: color-mix(in srgb, #fff 65%, transparent);
	transition: background 0.18s var(--bsi-ease), transform 0.18s var(--bsi-ease);
}
.bsi-slider__dot.is-active::before { background: var(--bsi-amber); transform: scale(1.35); }
.bsi-slider__dot:focus-visible { outline: 2px solid #fff; outline-offset: -2px; border-radius: 50%; }

@media (max-width: 782px) {
	.bsi-slider__viewport { aspect-ratio: 16 / 10; }
	.bsi-slider__overlay {
		position: static;
		transform: none;
		max-width: none;
		border-radius: 0;
		background: var(--bsi-white);
	}
	.bsi-slider__nav { width: 40px; height: 40px; }
	.bsi-slider__nav--prev { left: 8px; }
	.bsi-slider__nav--next { right: 8px; }
}

.bsi-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr);
	gap: var(--bsi-s-7);
	align-items: end;
	padding-block: clamp(var(--bsi-s-7), 5vw, var(--bsi-s-8));
}
.bsi-hero__title {
	margin: 0;
	font-weight: 600;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	line-height: 0.98;
}

/* --- credit block ---
   A definition list set like a case-note header: labelled fields, hairline
   rules, tabular alignment. Encodes the same four facts the live site
   prints, but as structured data rather than a centred stack. */
.bsi-credit { margin: 0; font-family: var(--bsi-font-ui); }
.bsi-credit__row {
	display: grid;
	grid-template-columns: 5.5rem 1fr;
	gap: var(--bsi-s-3);
	padding: var(--bsi-s-2) 0;
	border-top: 1px solid var(--bsi-border);
	align-items: baseline;
}
.bsi-credit__row:last-child { border-bottom: 1px solid var(--bsi-border); }
.bsi-credit dt {
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.11em;
	color: var(--bsi-ink-faint);
}
.bsi-credit dd { margin: 0; font-size: var(--bsi-t-sm); color: var(--bsi-ink); }
.bsi-credit__name { font-weight: 700; letter-spacing: 0.01em; }

/* Surgeon credit block — four stacked lines, as published. */
.bsi-hero__surgeon {
	display: inline-flex;
	flex-direction: column;
	gap: 0.18rem;
	margin: 0;
	padding: var(--bsi-s-5) var(--bsi-s-7);
	background: var(--bsi-white);
	border: 1px solid var(--bsi-border);
	border-top: 3px solid var(--bsi-amber);
	border-radius: var(--bsi-radius);
	box-shadow: var(--bsi-shadow);
}
.bsi-hero__surgeon-name {
	font-family: var(--bsi-font-head);
	font-size: var(--bsi-t-lg);
	font-weight: 600;
	color: var(--bsi-ink);
	letter-spacing: -0.01em;
}
.bsi-hero__surgeon-role {
	font-size: var(--bsi-t-xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--bsi-orange);
}
.bsi-hero__surgeon-spec,
.bsi-hero__surgeon-hosp {
	font-size: var(--bsi-t-xs);
	letter-spacing: 0.06em;
	color: var(--bsi-ink-faint);
}

/* --- intro: portrait + bio lifted from the page itself --- */
.bsi-intro__grid {
	display: grid;
	/* Portrait widened so the image holds its own against a long bio column;
	   at 320px it read as a thumbnail beside a wall of text. */
	grid-template-columns: minmax(300px, 440px) minmax(0, 1fr);
	gap: var(--bsi-s-8);
	align-items: start;
}
.bsi-intro__portrait { margin: 0; position: sticky; top: 150px; }
.bsi-intro__portrait img {
	width: 100%;
	border-radius: var(--bsi-radius);
	box-shadow: var(--bsi-shadow);
}
/* Credential block under the portrait — four stacked lines as published. */
.bsi-intro__portrait figcaption {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin-top: var(--bsi-s-4);
	padding-top: var(--bsi-s-3);
	border-top: 3px solid var(--bsi-amber);
	font-family: var(--bsi-font-ui);
}
.bsi-portrait__name {
	font-size: var(--bsi-t-md);
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--bsi-ink);
	line-height: 1.2;
}
.bsi-portrait__role {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.13em;
	color: var(--bsi-orange);
}
.bsi-portrait__spec,
.bsi-portrait__hosp {
	font-size: 0.72rem;
	letter-spacing: 0.07em;
	color: var(--bsi-ink-faint);
	line-height: 1.45;
}
.bsi-intro__body p:first-of-type {
	font-size: var(--bsi-t-md);
	color: var(--bsi-ink);
}
/* The source prose is centre-aligned inline in the original page markup. */
.bsi-intro__body p { text-align: left !important; }

/* --- sections --- */
.bsi-section { padding-block: clamp(var(--bsi-s-7), 5vw, var(--bsi-s-9)); }
.bsi-section--tint { background: var(--bsi-sand); }
.bsi-section--dark { background: var(--bsi-orange-dark); }
.bsi-section--dark .bsi-section__title { color: #fff; }
.bsi-section--dark .bsi-section__eyebrow { color: var(--bsi-amber); }

.bsi-section__head { max-width: none; margin-bottom: var(--bsi-s-7); }
.bsi-section__head--center { margin-inline: auto; text-align: center; }

.bsi-section__eyebrow {
	margin: 0 0 var(--bsi-s-2);
	font-size: var(--bsi-t-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--bsi-orange);
}
.bsi-section__title {
	margin: 0 0 var(--bsi-s-2);
	text-transform: uppercase;
	letter-spacing: -0.01em;
	font-weight: 600;
}
/* The amber stub that used to sit here was decoration that encoded nothing
   and appeared under every heading regardless of content. Hierarchy is
   carried by the condensed uppercase display face and a full-width hairline
   that actually divides the section. */
.bsi-section__head {
	border-bottom: 1px solid var(--bsi-border);
	padding-bottom: var(--bsi-s-4);
}
.bsi-section__sub { color: var(--bsi-ink-soft); margin: 0; font-size: var(--bsi-t-md); }
.bsi-section__foot { margin-top: var(--bsi-s-6); }

.bsi-grid { display: grid; gap: var(--bsi-s-5); }
.bsi-grid--3 { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }

/* --- service tile --- */
.bsi-tile {
	display: flex;
	flex-direction: column;
	background: var(--bsi-white);
	border: 1px solid var(--bsi-border);
	border-radius: var(--bsi-radius);
	overflow: hidden;
	text-decoration: none;
	transition: box-shadow 0.2s var(--bsi-ease), transform 0.2s var(--bsi-ease), border-color 0.2s var(--bsi-ease);
}
.bsi-tile:hover { box-shadow: var(--bsi-shadow-lg); transform: translateY(-3px); border-color: var(--bsi-orange-bright); }
.bsi-tile__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.bsi-tile__body { display: flex; flex-direction: column; gap: var(--bsi-s-2); padding: var(--bsi-s-5); flex: 1; }
.bsi-tile__title {
	font-family: var(--bsi-font-head);
	font-size: var(--bsi-t-md);
	font-weight: 600;
	color: var(--bsi-ink);
	line-height: var(--bsi-lh-snug);
}
.bsi-tile__text { font-size: var(--bsi-t-sm); color: var(--bsi-ink-soft); flex: 1; }
.bsi-tile__more {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: var(--bsi-t-sm);
	font-weight: 600;
	color: var(--bsi-orange);
	margin-top: var(--bsi-s-2);
}
.bsi-tile:hover .bsi-tile__more .bsi-icon { transform: translateX(3px); }
.bsi-tile__more .bsi-icon { transition: transform 0.18s var(--bsi-ease); }

/* --- quote --- */
.bsi-quote {
	background: var(--bsi-white);
	border: 1px solid var(--bsi-border);
	border-radius: var(--bsi-radius);
	padding: var(--bsi-s-6);
	margin: 0;
	font-size: var(--bsi-t-base);
	display: flex;
	flex-direction: column;
}
.bsi-quote__icon { color: var(--bsi-amber); margin-bottom: var(--bsi-s-3); }
.bsi-quote__text { color: var(--bsi-ink-soft); margin: 0 0 var(--bsi-s-4); flex: 1; font-size: var(--bsi-t-sm); }
.bsi-quote__who { font-weight: 650; color: var(--bsi-ink); font-size: var(--bsi-t-sm); }

/* ==========================================================================
   13. RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
	.bsi-hero__inner { grid-template-columns: 1fr; gap: var(--bsi-s-6); }
	.bsi-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
	.bsi-burger {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 44px;
		height: 44px;
		padding: 10px;
		cursor: pointer;
		border: 1px solid var(--bsi-border);
		border-radius: var(--bsi-radius-sm);
		flex-shrink: 0;
	}
	.bsi-burger span { display: block; height: 2px; background: var(--bsi-ink); border-radius: 2px; }

	/* Nav row collapses; the checkbox at header level drives it. */
	.bsi-navbar { display: none; }
	.bsi-nav-toggle:checked ~ .bsi-navbar {
		display: block;
		max-height: 70vh;
		overflow-y: auto;
	}
	.bsi-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.bsi-nav__list > li { border-bottom: 1px solid var(--bsi-border); }
	.bsi-nav__list > li:last-child { border-bottom: 0; }
	.bsi-nav__list > li > a {
		display: flex;
		align-items: center;
		min-height: 48px;
		padding: var(--bsi-s-2) 0;
		border-bottom: 0;
	}
	/* The panel's own top padding doubled the gap under the parent row. */
	.bsi-mega__inner { padding: 0 0 var(--bsi-s-3) var(--bsi-s-4); }
	.bsi-navbar .bsi-wrap { padding-block: var(--bsi-s-2); }

	/* Mega panels flatten into the flow on small screens — but collapsed.
	   Expanded, the nine panels stack to over 4000px, so the menu became a
	   wall of links you had to scroll past. initNav() adds the toggles. */
	.bsi-mega {
		display: none;
		position: static;
		border: 0;
		box-shadow: none;
		background: transparent;
	}
	.bsi-has-mega.is-open > .bsi-mega { display: block; }

	/* Toggle sits beside the parent link, so the link still navigates. */
	.bsi-nav__list > li.bsi-has-mega { position: relative; padding-right: 48px; }
	.bsi-nav__toggle {
		position: absolute;
		top: 0;
		right: 0;
		width: 48px;
		height: 48px;
		display: grid;
		place-items: center;
		padding: 0;
		background: none;
		border: 0;
		cursor: pointer;
		color: var(--bsi-ink-soft);
	}
	.bsi-nav__toggle span {
		width: 10px;
		height: 10px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-3px) rotate(45deg);
		transition: transform 0.2s var(--bsi-ease);
	}
	.bsi-has-mega.is-open > .bsi-nav__toggle span { transform: translateY(2px) rotate(-135deg); }
	.bsi-nav__toggle:focus-visible { outline: 2px solid var(--bsi-orange-bright); outline-offset: -4px; }
	.bsi-mega__inner { padding: 0 0 var(--bsi-s-3) var(--bsi-s-4); max-height: none; overflow: visible; }

	/* Touch targets: the desktop panel uses a dense 0.36rem row (~32px),
	   which is fine for a pointer but fails the 44px minimum on touch.
	   These are the 52 condition links — the densest tap area on the site. */
	.bsi-mega a {
		min-height: 44px;
		display: flex;
		align-items: center;
		padding: var(--bsi-s-2) 0;
	}
	.bsi-mega .bsi-mega__grouptitle { min-height: 0; padding-top: var(--bsi-s-3); }
	.bsi-mega--grouped .bsi-mega__list { grid-template-columns: 1fr; gap: var(--bsi-s-4); }
	.bsi-mega--flat .bsi-mega__list { columns: 1; }
	.bsi-nav__chevron { display: none; }

	/* Brand left, burger right, one row. The contact details move to the
	   floating bar at the bottom of the screen (see .bsi-callbar), so the
	   header no longer has to find room for a 33-character email address. */
	.bsi-masthead__inner {
		min-height: 64px;
		flex-wrap: nowrap;
		justify-content: space-between;
		gap: var(--bsi-s-4);
	}
	.bsi-contact { display: none; }
	.bsi-brand { min-width: 0; flex: 1 1 auto; }
	.bsi-header .custom-logo { max-height: 40px; }
}

@media (min-width: 901px) and (max-width: 1200px) {
	.bsi-mega--flat .bsi-mega__list { columns: 3; }
}

@media (max-width: 600px) {
	.bsi-footer__grid { grid-template-columns: 1fr; gap: var(--bsi-s-6); }
	.bsi-utility__inner { justify-content: center; text-align: center; }
	.bsi-footer__cta-inner { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   11. PAGE / ARCHIVE SCAFFOLD
   ========================================================================== */

.bsi-page { padding-block: var(--bsi-s-6) var(--bsi-s-7); }

/* ==========================================================================
   SINGLE POST
   Long-form clinical reading: the article column is constrained to a
   readable measure and centred, rather than running the full 1180px.
   ========================================================================== */

.bsi-single { padding-block: var(--bsi-s-6) var(--bsi-s-8); }
.bsi-single > .bsi-wrap { max-width: 1120px; }

/* --- article hero ---
   Title block and image side by side. A full-width 16:9 banner pushed the
   first paragraph ~900px down; this keeps the opening text near the fold. */
.bsi-single__header { margin-bottom: var(--bsi-s-7); }
.bsi-single__header--split {
	display: grid;
	/* Text gets the larger share; a 50/50 split made the image tower over a
	   short title block and left a dead gap under the meta line. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
	gap: var(--bsi-s-7);
	align-items: center;
	padding-bottom: var(--bsi-s-6);
	border-bottom: 1px solid var(--bsi-border);
}
.bsi-single__headtext { min-width: 0; }

.bsi-single__cat {
	display: inline-block;
	margin-bottom: var(--bsi-s-4);
	padding: 0.32em 0.9em;
	border-radius: 999px;
	background: var(--bsi-orange-wash);
	color: var(--bsi-orange-dark);
	font-family: var(--bsi-font-ui);
	font-size: var(--bsi-t-xs);
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.18s var(--bsi-ease), color 0.18s var(--bsi-ease);
}
.bsi-single__cat:hover { background: var(--bsi-orange); color: #fff; }

.bsi-single__title { margin-bottom: var(--bsi-s-4); text-wrap: balance; }

.bsi-single__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bsi-s-2) var(--bsi-s-5);
	margin: 0 0 var(--bsi-s-4);
	padding: 0;
	list-style: none;
	font-family: var(--bsi-font-ui);
	font-size: var(--bsi-t-xs);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bsi-ink-faint);
}
.bsi-single__meta li { display: flex; align-items: center; gap: 0.45em; margin: 0; }
.bsi-single__meta .bsi-icon { color: var(--bsi-orange-bright); }

/* Standfirst — lets the reader judge relevance before committing. */
.bsi-single__lede {
	margin: 0;
	padding-left: var(--bsi-s-4);
	border-left: 3px solid var(--bsi-orange-bright);
	font-size: var(--bsi-t-md);
	line-height: 1.55;
	color: var(--bsi-ink-soft);
}

.bsi-single__thumb {
	margin: 0;
	border-radius: var(--bsi-radius-lg);
	overflow: hidden;
	background: var(--bsi-sand-deep);
	box-shadow: var(--bsi-shadow);
}
.bsi-single__thumb img {
	width: 100%;
	aspect-ratio: 4 / 3;
	/* Larger now that the byline fills the text column — the two sides
	   balance, so the image no longer leaves a dead gap beneath the meta. */
	max-height: 460px;
	object-fit: cover;
	display: block;
}

@media (max-width: 860px) {
	.bsi-single__header--split { grid-template-columns: 1fr; gap: var(--bsi-s-5); }
	/* Image first on mobile — it orients the reader before the text. */
	.bsi-single__thumb { order: -1; }
	.bsi-single__thumb img { aspect-ratio: 16 / 9; }
}

.bsi-single__content { max-width: none; }
.bsi-single__content h2 { font-size: var(--bsi-t-xl); margin-top: var(--bsi-s-7); }
.bsi-single__content h3 { font-size: var(--bsi-t-lg); margin-top: var(--bsi-s-6); }
.bsi-single__content img { border-radius: var(--bsi-radius); }

/* --- prev / next --- */
.bsi-postnav {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--bsi-s-4);
	margin-top: var(--bsi-s-8);
	padding-top: var(--bsi-s-6);
	border-top: 1px solid var(--bsi-border);
}
.bsi-postnav__link {
	display: flex;
	flex-direction: column;
	gap: var(--bsi-s-1);
	padding: var(--bsi-s-4) var(--bsi-s-5);
	border: 1px solid var(--bsi-border);
	border-radius: var(--bsi-radius);
	text-decoration: none;
	transition: border-color 0.18s var(--bsi-ease), background 0.18s var(--bsi-ease);
}
.bsi-postnav__link:hover { border-color: var(--bsi-orange); background: var(--bsi-orange-wash); }
.bsi-postnav__link--next { text-align: right; }
.bsi-postnav__label {
	font-family: var(--bsi-font-ui);
	font-size: var(--bsi-t-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bsi-orange);
}
.bsi-postnav__title {
	font-family: var(--bsi-font-head);
	font-size: var(--bsi-t-sm);
	font-weight: 600;
	color: var(--bsi-ink);
	line-height: 1.35;
}

/* --- related --- */
.bsi-related { margin-top: var(--bsi-s-8); }
.bsi-related__title {
	font-size: var(--bsi-t-lg);
	margin: 0 0 var(--bsi-s-5);
	padding-bottom: var(--bsi-s-3);
	border-bottom: 1px solid var(--bsi-border);
}
/* Four across, filling the full article width. auto-fill left a third of
   the row empty whenever fewer cards came back than columns available. */
.bsi-related .bsi-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--bsi-s-5);
}
@media (max-width: 1024px) { .bsi-related .bsi-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .bsi-related .bsi-grid--4 { grid-template-columns: 1fr; } }

.bsi-archive__header {
	padding-block: var(--bsi-s-5) var(--bsi-s-4);
	border-bottom: 1px solid var(--bsi-border);
	margin-bottom: var(--bsi-s-6);
}
/* Archive titles sit just under a breadcrumb bar, so they don't need the
   full display size a standalone page title carries. */
.bsi-archive__title {
	font-size: var(--bsi-t-2xl);
	margin-bottom: 0;
}
.bsi-archive__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--bsi-s-6);
	margin-bottom: var(--bsi-s-8);
}

.bsi-card {
	background: var(--bsi-white);
	border: 1px solid var(--bsi-border);
	border-radius: var(--bsi-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.2s var(--bsi-ease), transform 0.2s var(--bsi-ease);
}
.bsi-card:hover { box-shadow: var(--bsi-shadow-lg); transform: translateY(-2px); }
.bsi-card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.bsi-card__body { padding: var(--bsi-s-5); }
.bsi-card__title { font-size: var(--bsi-t-md); margin: 0 0 var(--bsi-s-2); }
.bsi-card__title a { text-decoration: none; color: var(--bsi-ink); }
.bsi-card__title a:hover { color: var(--bsi-orange); }
.bsi-card__meta { font-size: var(--bsi-t-xs); color: var(--bsi-ink-faint); margin: 0 0 var(--bsi-s-3); }
.bsi-card__excerpt { font-size: var(--bsi-t-sm); color: var(--bsi-ink-soft); margin: 0; }

.bsi-404 { padding-block: var(--bsi-s-9); text-align: center; max-width: 60ch; }
.bsi-404 .search-form { margin: var(--bsi-s-6) auto; }
.bsi-empty { padding-block: var(--bsi-s-7); color: var(--bsi-ink-soft); }

.bsi-pagination, .pagination { padding-block: var(--bsi-s-6); }
.bsi-pagination a, .pagination a, .pagination .current {
	display: inline-block;
	padding: var(--bsi-s-2) var(--bsi-s-4);
	margin-right: var(--bsi-s-2);
	border: 1px solid var(--bsi-border);
	border-radius: var(--bsi-radius-sm);
	text-decoration: none;
}
.pagination .current { background: var(--bsi-orange); color: var(--bsi-white); border-color: var(--bsi-orange); }

.search-form { display: flex; gap: var(--bsi-s-2); }
/* Form controls: 3:1 boundary contrast, 16px text (prevents iOS auto-zoom),
   and a 44px minimum height for touch. */
.search-form input[type="search"] {
	flex: 1;
	min-height: 44px;
	padding: var(--bsi-s-3) var(--bsi-s-4);
	font: inherit;
	font-size: 1rem;
	border: 1px solid var(--bsi-border-strong);
	border-radius: var(--bsi-radius-sm);
	background: var(--bsi-white);
	color: var(--bsi-ink);
}
.search-form input[type="search"]::placeholder { color: var(--bsi-ink-faint); }
.search-form button, .search-form input[type="submit"] {
	min-height: 44px;
	padding: var(--bsi-s-3) var(--bsi-s-5);
	font: inherit;
	font-size: var(--bsi-t-sm);
	font-weight: 600;
	background: var(--bsi-orange);
	color: var(--bsi-white);
	border: 0;
	border-radius: var(--bsi-radius-sm);
	cursor: pointer;
}

/* ==========================================================================
   12. PRINT — patients do print condition pages
   ========================================================================== */

@media print {
	body { background: #fff; color: #000; font-size: 11pt; }
	.bsi-skip-link, nav, .bsi-btn, header, footer { display: none !important; }
	a { text-decoration: underline; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
	h2, h3 { page-break-after: avoid; }
	table, figure, .bsi-accordion { page-break-inside: avoid; }
}

/* Empty group columns (ELBOW, ANKLE) keep their grid slot so the panel
   stays a tidy 5-column layout instead of reflowing around the gaps. */
.bsi-mega__group--empty { min-height: 1px; }
.bsi-mega--grouped .bsi-mega__list > li { break-inside: avoid; }
a.bsi-mega__grouptitle:hover { color: var(--bsi-orange-dark); }


/* ==========================================================================
   14. UI FACE ASSIGNMENT
   Body is now a serif (long-form clinical reading). Chrome, controls and
   labels take the condensed sans so navigation reads as instrument panel,
   not as prose.
   ========================================================================== */

.bsi-utility,
.bsi-nav__list,
.bsi-mega,
.bsi-btn,
.bsi-chip,
.bsi-section__eyebrow,
.bsi-tile__more,
.bsi-card__meta,
.bsi-single__meta,
.bsi-quote__who,
.bsi-footer__fact-label,
.bsi-footer__list,
.bsi-footer__base,
.bsi-hero__surgeon-role,
.bsi-hero__surgeon-spec,
.bsi-hero__surgeon-hosp,
.bsi-video__caption,
.bsi-figure figcaption,
.search-form,
.bsi-pagination,
.pagination {
	font-family: var(--bsi-font-ui);
}

/* Prose keeps the serif and a slightly tighter measure — Literata sets
   wider than Inter at the same size. */
.bsi-prose, .bsi-intro__body { font-size: 1.02rem; }


/* Responsive for the reworked hero / intro */
@media (max-width: 900px) {
	.bsi-hero__inner { grid-template-columns: 1fr; gap: var(--bsi-s-5); align-items: start; }
	.bsi-intro__grid { grid-template-columns: 1fr; gap: var(--bsi-s-5); }
	.bsi-intro__portrait { position: static; max-width: 360px; }
	.bsi-banner__rail { padding: var(--bsi-s-3); }
}

/* Homepage intro heading — carries the page h1 now that the hero is gone. */
.bsi-intro__head { margin-bottom: var(--bsi-s-6); }
.bsi-intro__head .bsi-section__title { font-size: var(--bsi-t-2xl); }

/* ==========================================================================
   15. SERVICE CARDS  (homepage — 4 featured)
   ========================================================================== */

/* Section head with a trailing link on the same baseline as the title. */
.bsi-section__head--split {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--bsi-s-4);
}
.bsi-section__head--split .bsi-section__title { margin-bottom: 0; }
.bsi-section__link {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-family: var(--bsi-font-ui);
	font-size: var(--bsi-t-sm);
	font-weight: 650;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--bsi-orange);
	text-decoration: none;
	white-space: nowrap;
}
.bsi-section__link:hover { color: var(--bsi-orange-dark); }
.bsi-section__link .bsi-icon { transition: transform 0.18s var(--bsi-ease); }
.bsi-section__link:hover .bsi-icon { transform: translateX(3px); }

.bsi-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--bsi-s-5) var(--bsi-s-5);
}
/* With 16 cards the images dominate; a shorter crop keeps the grid scannable. */
.bsi-grid--4 .bsi-card2__media { aspect-ratio: 16 / 10; }

.bsi-card2 {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--bsi-white);
	border: 1px solid var(--bsi-border);
	border-radius: var(--bsi-radius);
	overflow: hidden;
	text-decoration: none;
	transition: transform 0.22s var(--bsi-ease), box-shadow 0.22s var(--bsi-ease), border-color 0.22s var(--bsi-ease);
}
.bsi-card2:hover {
	transform: translateY(-4px);
	box-shadow: var(--bsi-shadow-lg);
	border-color: var(--bsi-orange-bright);
}

/* Orange rule that draws itself across the top on hover — signals the whole
   card is the target without adding another button. */
.bsi-card2::after {
	content: "";
	position: absolute;
	left: 0; top: 0;
	height: 3px;
	width: 0;
	background: var(--bsi-orange);
	transition: width 0.28s var(--bsi-ease);
	z-index: 2;
}
.bsi-card2:hover::after { width: 100%; }

.bsi-card2__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--bsi-sand-deep);
}
.bsi-card2__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 0.4s var(--bsi-ease);
}
.bsi-card2:hover .bsi-card2__media img { transform: scale(1.05); }

.bsi-card2__body {
	display: flex;
	flex-direction: column;
	gap: var(--bsi-s-2);
	padding: var(--bsi-s-5);
	flex: 1;
}
.bsi-card2__title {
	font-family: var(--bsi-font-head);
	font-size: var(--bsi-t-md);
	font-weight: 600;
	line-height: 1.25;
	color: var(--bsi-ink);
	text-wrap: balance;
}
.bsi-card2__text {
	font-size: var(--bsi-t-sm);
	line-height: 1.55;
	color: var(--bsi-ink-soft);
	flex: 1;
}
.bsi-card2__more {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-top: var(--bsi-s-3);
	padding-top: var(--bsi-s-3);
	border-top: 1px solid var(--bsi-border);
	font-family: var(--bsi-font-ui);
	font-size: var(--bsi-t-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bsi-orange);
}
.bsi-card2__more .bsi-icon { transition: transform 0.18s var(--bsi-ease); }
.bsi-card2:hover .bsi-card2__more .bsi-icon { transform: translateX(4px); }

@media (max-width: 1024px) { .bsi-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .bsi-grid--4 { grid-template-columns: 1fr; } }

/* ==========================================================================
   16. CONDITIONS CAROUSEL
   52 conditions as a browsable image track. Scroll-snap rather than a fade
   slider: this is a list to browse, not slides to watch. Native horizontal
   scrolling means it works without JS, and the arrows only nudge scrollLeft.
   ========================================================================== */

.bsi-carousel__controls { display: flex; gap: var(--bsi-s-2); }
.bsi-carousel__nav {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--bsi-border);
	border-radius: 50%;
	background: var(--bsi-white);
	color: var(--bsi-ink);
	cursor: pointer;
	transition: background 0.18s var(--bsi-ease), color 0.18s var(--bsi-ease), border-color 0.18s var(--bsi-ease);
}
.bsi-carousel__nav:hover { background: var(--bsi-orange); color: #fff; border-color: var(--bsi-orange); }
.bsi-carousel__nav:first-child .bsi-icon { transform: rotate(90deg); }
.bsi-carousel__nav:last-child  .bsi-icon { transform: rotate(-90deg); }

.bsi-carousel { position: relative; }
.bsi-carousel__track {
	display: flex;
	gap: var(--bsi-s-5);
	list-style: none;
	margin: 0;
	/* Aligned to the content column. The previous full-bleed padding
	   resolved against the track's own width, not the viewport, so the
	   first card sat hard against the screen edge while the heading was
	   inset. Vertical padding leaves room for the hover lift. */
	padding: 4px 4px var(--bsi-s-3);
	overflow-x: auto;
	scroll-snap-type: x proximity;   /* proximity, not mandatory — less fighty */
	scroll-behavior: smooth;
	scrollbar-width: none;
	overscroll-behavior-x: contain;  /* don't chain to page/back-nav */
}
.bsi-carousel__track::-webkit-scrollbar { display: none; }
.bsi-carousel__item {
	flex: 0 0 clamp(210px, 22vw, 270px);
	margin: 0;
	scroll-snap-align: start;
}

.bsi-ccard {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--bsi-white);
	border: 1px solid var(--bsi-border);
	border-radius: var(--bsi-radius);
	overflow: hidden;
	text-decoration: none;
	transition: transform 0.2s var(--bsi-ease), box-shadow 0.2s var(--bsi-ease), border-color 0.2s var(--bsi-ease);
}
.bsi-ccard:hover {
	transform: translateY(-3px);
	box-shadow: var(--bsi-shadow-lg);
	border-color: var(--bsi-orange-bright);
}
.bsi-ccard__media {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	/* One condition page has no image at all — the wash keeps the card from
	   collapsing into a bare title. */
	background: var(--bsi-orange-wash);
}
.bsi-ccard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--bsi-ease); }
.bsi-ccard:hover .bsi-ccard__media img { transform: scale(1.06); }
.bsi-ccard__title {
	display: flex;
	align-items: center;
	flex: 1;
	padding: var(--bsi-s-4) var(--bsi-s-4) var(--bsi-s-5);
	font-family: var(--bsi-font-head);
	font-size: var(--bsi-t-sm);
	font-weight: 600;
	line-height: 1.3;
	color: var(--bsi-ink);
	text-wrap: balance;
}
.bsi-ccard:hover .bsi-ccard__title { color: var(--bsi-orange); }

@media (max-width: 782px) {
	.bsi-carousel__item { flex-basis: 200px; }
}

/* ==========================================================================
   17. SHORTS  (vertical patient videos)
   9:16 frames with a click-to-play facade. Nothing is requested from
   YouTube until the viewer presses play.
   ========================================================================== */

.bsi-shorts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--bsi-s-5);
}
.bsi-short { margin: 0; }

.bsi-short__player {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 9 / 16;
	padding: 0;
	border: 1px solid var(--bsi-border);
	border-radius: var(--bsi-radius);
	overflow: hidden;
	background: var(--bsi-ink);
	cursor: pointer;
	transition: transform 0.22s var(--bsi-ease), box-shadow 0.22s var(--bsi-ease);
}
.bsi-short__player:hover { transform: translateY(-3px); box-shadow: var(--bsi-shadow-lg); }

.bsi-short__poster {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--bsi-ease), filter 0.3s var(--bsi-ease);
}
.bsi-short__player:hover .bsi-short__poster { transform: scale(1.04); }

/* Darkens toward the bottom so the play control stays legible on any frame. */
.bsi-short__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 42%, rgba(0,0,0,0.42) 100%);
}

.bsi-short__play {
	position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	display: grid;
	place-items: center;
	width: 62px; height: 62px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--bsi-white) 92%, transparent);
	color: var(--bsi-orange);
	box-shadow: 0 4px 18px rgba(0,0,0,0.28);
	transition: transform 0.22s var(--bsi-ease), background 0.22s var(--bsi-ease), color 0.22s var(--bsi-ease);
}
.bsi-short__play .bsi-icon { margin-left: 3px; fill: currentColor; }
.bsi-short__player:hover .bsi-short__play {
	transform: translate(-50%, -50%) scale(1.1);
	background: var(--bsi-orange);
	color: #fff;
}
.bsi-short__player:focus-visible { outline: 3px solid var(--bsi-orange-bright); outline-offset: 3px; }

/* Swapped in on click. */
.bsi-short__player iframe {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	border: 0;
}

.bsi-short__caption {
	margin-top: var(--bsi-s-3);
	font-family: var(--bsi-font-ui);
	font-size: var(--bsi-t-sm);
	line-height: 1.45;
	color: var(--bsi-ink-soft);
}

@media (max-width: 782px) {
	.bsi-shorts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bsi-s-5); }
}
@media (max-width: 480px) {
	.bsi-shorts { grid-template-columns: 1fr; max-width: 340px; margin-inline: auto; }
}

/* featured_item blocks (About / Contact pages) */
.bsi-feature {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: var(--bsi-s-4);
	align-items: start;
	margin: var(--bsi-s-5) 0;
	padding: var(--bsi-s-5);
	background: var(--bsi-sand);
	border: 1px solid var(--bsi-border);
	border-left: 3px solid var(--bsi-orange);
	border-radius: var(--bsi-radius);
}
.bsi-feature__icon {
	display: grid;
	place-items: center;
	width: 44px; height: 44px;
	border-radius: 50%;
	background: var(--bsi-white);
	border: 1px solid var(--bsi-border);
	color: var(--bsi-orange);
}
.bsi-feature__body > :first-child { margin-top: 0; }
.bsi-feature__body > :last-child { margin-bottom: 0; }

/* ==========================================================================
   18. BREADCRUMBS
   ========================================================================== */

.bsi-crumbs {
	background: var(--bsi-sand);
	border-bottom: 1px solid var(--bsi-border);
	font-family: var(--bsi-font-ui);
}
.bsi-crumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--bsi-s-2);
	list-style: none;
	margin: 0;
	padding: var(--bsi-s-3) 0;
	font-size: var(--bsi-t-xs);
}
.bsi-crumbs__item { display: flex; align-items: center; gap: var(--bsi-s-2); margin: 0; }

/* Separator via ::before so it is decorative and skipped by screen readers. */
.bsi-crumbs__item + .bsi-crumbs__item::before {
	content: "";
	width: 5px; height: 5px;
	border-top: 1.5px solid var(--bsi-ink-faint);
	border-right: 1.5px solid var(--bsi-ink-faint);
	transform: rotate(45deg);
	flex-shrink: 0;
	opacity: 0.7;
}
.bsi-crumbs a { color: var(--bsi-ink-soft); text-decoration: none; }
.bsi-crumbs a:hover { color: var(--bsi-orange); text-decoration: underline; }
.bsi-crumbs [aria-current="page"] {
	color: var(--bsi-ink);
	font-weight: 600;
	/* Long clinical titles must not blow out the bar. */
	max-width: 46ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 560px) {
	.bsi-crumbs [aria-current="page"] { max-width: 22ch; }
}

/* ==========================================================================
   19. ARTICLE + TABLE OF CONTENTS
   Two columns on desktop: prose left, sticky contents right. The prose
   column keeps a readable measure rather than stretching to fill.
   ========================================================================== */

.bsi-article--has-toc {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 260px;
	gap: var(--bsi-s-8);
	align-items: start;
}
.bsi-article--has-toc .bsi-single__content { max-width: 68ch; }

.bsi-article__aside {
	position: sticky;
	top: 130px;
	max-height: calc(100vh - 160px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.bsi-toc {
	padding: var(--bsi-s-5);
	background: var(--bsi-sand);
	border: 1px solid var(--bsi-border);
	border-radius: var(--bsi-radius);
	font-family: var(--bsi-font-ui);
}
.bsi-toc__title {
	margin: 0 0 var(--bsi-s-3);
	padding-bottom: var(--bsi-s-3);
	border-bottom: 1px solid var(--bsi-border);
	font-size: var(--bsi-t-xs);
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--bsi-ink-faint);
}
.bsi-toc__list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.bsi-toc__item { margin: 0; }
.bsi-toc__item a {
	display: block;
	padding: 0.42rem 0 0.42rem var(--bsi-s-3);
	border-left: 2px solid transparent;
	font-size: var(--bsi-t-sm);
	line-height: 1.35;
	color: var(--bsi-ink-soft);
	text-decoration: none;
	transition: color 0.15s var(--bsi-ease), border-color 0.15s var(--bsi-ease);
}
.bsi-toc__item a:hover { color: var(--bsi-orange); border-left-color: var(--bsi-orange-bright); }
.bsi-toc__item--l1 a { padding-left: var(--bsi-s-5); font-size: var(--bsi-t-xs); }
.bsi-toc__item--l2 a { padding-left: var(--bsi-s-6); font-size: var(--bsi-t-xs); }
.bsi-toc__item--l3 a { padding-left: var(--bsi-s-7); font-size: var(--bsi-t-xs); }

/* Set by scroll-spy in slider.js */
.bsi-toc__item.is-current > a {
	color: var(--bsi-orange);
	font-weight: 650;
	border-left-color: var(--bsi-orange);
}

/* Anchor targets must clear the sticky header when jumped to. */
.bsi-single__content :is(h1,h2,h3,h4)[id] { scroll-margin-top: 130px; }

@media (max-width: 1024px) {
	.bsi-article--has-toc { grid-template-columns: 1fr; gap: var(--bsi-s-5); }
	.bsi-article--has-toc .bsi-single__content { max-width: none; order: 2; }
	.bsi-article__aside { position: static; order: 1; max-height: none; overflow: visible; }
	.bsi-toc__list { max-height: 260px; overflow-y: auto; }
}

/* ==========================================================================
   20. ARTICLE POLISH
   ========================================================================== */

/* --- reading progress ---
   CSS scroll-driven animation: no scroll listener, nothing on the main
   thread. Hidden entirely where the feature is unsupported, so it never
   sits there as a dead bar. */
.bsi-progress { display: none; }
@supports (animation-timeline: scroll()) {
	.bsi-progress {
		display: block;
		position: sticky;
		top: 0;
		z-index: 90;
		height: 3px;
		background: color-mix(in srgb, var(--bsi-orange) 14%, transparent);
	}
	.bsi-progress span {
		display: block;
		height: 100%;
		background: var(--bsi-orange-bright);
		transform-origin: 0 50%;
		animation: bsi-progress-grow linear both;
		animation-timeline: scroll(root block);
	}
	@keyframes bsi-progress-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
@media (prefers-reduced-motion: reduce) { .bsi-progress { display: none; } }

/* --- prose refinements --- */
.bsi-single__content > p:first-of-type {
	font-size: var(--bsi-t-md);
	line-height: 1.65;
	color: var(--bsi-ink);
}
.bsi-single__content ul { list-style: none; padding-left: 0; }
.bsi-single__content ul > li {
	position: relative;
	padding-left: var(--bsi-s-5);
	margin-bottom: var(--bsi-s-3);
}
.bsi-single__content ul > li::before {
	content: "";
	position: absolute;
	left: 0; top: 0.62em;
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--bsi-orange-bright);
}
.bsi-single__content ol { padding-left: var(--bsi-s-5); }
.bsi-single__content ol > li::marker { color: var(--bsi-orange); font-weight: 700; }
.bsi-single__content blockquote {
	background: var(--bsi-orange-wash);
	border-left-color: var(--bsi-orange);
}

/* --- medical authority ---
   The trust signal on a health article: who stands behind the advice. */
.bsi-authority {
	display: grid;
	grid-template-columns: 76px 1fr;
	gap: var(--bsi-s-5);
	align-items: center;
	margin-top: var(--bsi-s-8);
	padding: var(--bsi-s-5) var(--bsi-s-6);
	background: var(--bsi-sand);
	border: 1px solid var(--bsi-border);
	border-left: 4px solid var(--bsi-orange);
	border-radius: var(--bsi-radius);
}
.bsi-authority__avatar img {
	width: 76px; height: 76px;
	border-radius: 50%;
	object-fit: cover;
	object-position: center 20%;
}
.bsi-authority__label {
	margin: 0 0 2px;
	font-family: var(--bsi-font-ui);
	font-size: var(--bsi-t-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bsi-ink-faint);
}
.bsi-authority__name {
	margin: 0 0 2px;
	font-family: var(--bsi-font-head);
	font-size: var(--bsi-t-md);
	font-weight: 700;
	color: var(--bsi-ink);
}
.bsi-authority__role {
	margin: 0 0 var(--bsi-s-3);
	font-family: var(--bsi-font-ui);
	font-size: var(--bsi-t-xs);
	letter-spacing: 0.04em;
	color: var(--bsi-ink-soft);
}
.bsi-authority__dot { margin-inline: 0.4em; opacity: 0.6; }
.bsi-authority__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-family: var(--bsi-font-ui);
	font-size: var(--bsi-t-sm);
	font-weight: 650;
	color: var(--bsi-orange);
	text-decoration: none;
}
.bsi-authority__cta:hover { color: var(--bsi-orange-dark); }
.bsi-authority__cta .bsi-icon { transition: transform 0.18s var(--bsi-ease); }
.bsi-authority__cta:hover .bsi-icon { transform: translateX(3px); }

/* --- share --- */
.bsi-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bsi-s-2) var(--bsi-s-3);
	margin-top: var(--bsi-s-6);
	padding-top: var(--bsi-s-5);
	border-top: 1px solid var(--bsi-border);
	font-family: var(--bsi-font-ui);
}
.bsi-share__label {
	font-size: var(--bsi-t-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bsi-ink-faint);
	margin-right: var(--bsi-s-2);
}
.bsi-share__link {
	min-height: 36px;
	display: inline-flex;
	align-items: center;
	padding: 0 var(--bsi-s-4);
	border: 1px solid var(--bsi-border);
	border-radius: 999px;
	font-size: var(--bsi-t-xs);
	font-weight: 600;
	color: var(--bsi-ink-soft);
	text-decoration: none;
	transition: all 0.18s var(--bsi-ease);
}
.bsi-share__link:hover {
	background: var(--bsi-orange);
	border-color: var(--bsi-orange);
	color: #fff;
}

@media (max-width: 560px) {
	.bsi-authority { grid-template-columns: 1fr; text-align: left; }
	.bsi-authority__avatar img { width: 64px; height: 64px; }
}

/* --- article byline --- */
.bsi-byline {
	display: flex;
	align-items: center;
	gap: var(--bsi-s-3);
	margin-bottom: var(--bsi-s-4);
}
.bsi-byline__avatar img {
	width: 46px; height: 46px;
	border-radius: 50%;
	object-fit: cover;
	object-position: center 20%;
	border: 2px solid var(--bsi-orange-wash);
}
.bsi-byline__text { display: flex; flex-direction: column; line-height: 1.3; }
.bsi-byline__name {
	font-family: var(--bsi-font-head);
	font-size: var(--bsi-t-sm);
	font-weight: 700;
	color: var(--bsi-ink);
}
.bsi-byline__role {
	font-family: var(--bsi-font-ui);
	font-size: var(--bsi-t-xs);
	letter-spacing: 0.03em;
	color: var(--bsi-ink-faint);
}

/* ==========================================================================
   21. CONVERTED LAYOUT (.bsi-row / .bsi-col)
   The WPBakery conversion emits these for multi-column rows — 63 published
   items use .bsi-row and 247 use .bsi-col. They had no styles at all, so
   every converted two-column layout was rendering as a stack.
   Column width comes through as --bsi-col-w (e.g. 50%).
   ========================================================================== */

.bsi-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bsi-s-6);
	align-items: flex-start;
	margin-block: var(--bsi-s-5);
}
.bsi-col {
	/* Subtract the gap so two 50% columns still fit on one line. */
	flex: 1 1 calc(var(--bsi-col-w, 100%) - var(--bsi-s-6));
	min-width: min(100%, 240px);
}
.bsi-row > .bsi-col > :first-child { margin-top: 0; }
.bsi-row > .bsi-col > :last-child { margin-bottom: 0; }

/* A row nested directly inside another column shouldn't double its margins. */
.bsi-col > .bsi-row:first-child { margin-top: 0; }
.bsi-col > .bsi-row:last-child { margin-bottom: 0; }

@media (max-width: 720px) {
	.bsi-row { gap: var(--bsi-s-5); }
	.bsi-col { flex-basis: 100%; }
}

/* --------------------------------------------------------------------------
   Prose measure applies to TEXT, not the container. Capping .bsi-prose at
   68ch also squeezed any .bsi-row inside it into 68ch, so converted
   two-column layouts had nowhere to go.
   -------------------------------------------------------------------------- */
.bsi-page__content { max-width: none; }
.bsi-page__content > p,
.bsi-page__content > ul,
.bsi-page__content > ol,
.bsi-page__content > blockquote,
.bsi-page__content > h1,
.bsi-page__content > h2,
.bsi-page__content > h3,
.bsi-page__content > h4,
.bsi-page__content > h5,
.bsi-page__content > h6 {
	max-width: var(--bsi-measure);
}
.bsi-page__content > .bsi-row,
.bsi-page__content > .bsi-gallery,
.bsi-page__content > .bsi-table-wrap,
.bsi-page__content > figure { max-width: none; }

/* --- page header --- */
/* The rule spans the container while the text keeps its reading measure.
   Capping the whole header at 68ch stopped the divider two-thirds of the
   way across, which read as a broken layout rather than a margin. */
.bsi-page__header {
	padding-bottom: var(--bsi-s-5);
	margin-bottom: var(--bsi-s-6);
	border-bottom: 1px solid var(--bsi-border);
}
.bsi-page__title { margin-bottom: var(--bsi-s-3); }
.bsi-page__summary {
	max-width: var(--bsi-measure);
	margin: 0;
	font-size: var(--bsi-t-md);
	line-height: 1.55;
	color: var(--bsi-ink-soft);
}

/* The About page is a CV: dense all-caps lists that need air and a clear
   hierarchy rather than running together. */
.bsi-page__content h2 { font-size: var(--bsi-t-xl); margin-top: var(--bsi-s-8); }
.bsi-page__content h3 { font-size: var(--bsi-t-lg); margin-top: var(--bsi-s-6); }
.bsi-page__content h4 { font-size: var(--bsi-t-md); margin-top: var(--bsi-s-5); }
.bsi-page__content ul { list-style: none; padding-left: 0; }
.bsi-page__content ul > li {
	position: relative;
	padding-left: var(--bsi-s-5);
	margin-bottom: var(--bsi-s-3);
	line-height: 1.55;
}
.bsi-page__content ul > li::before {
	content: "";
	position: absolute;
	left: 0; top: 0.6em;
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--bsi-orange-bright);
}
.bsi-page__content figure img { border-radius: var(--bsi-radius); }

/* Content images are full-size originals after the WPBakery conversion —
   the About page opens with a 4032x3024 phone photo, which rendered ~840px
   tall and pushed the CV off the screen. Cap the display height; srcset
   still lets the browser pick an appropriately sized file. */
.bsi-page__content figure img,
.bsi-single__content figure img,
.bsi-page__content > p > img,
.bsi-single__content > p > img {
	max-height: 460px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}
.bsi-page__content figure,
.bsi-single__content figure {
	margin-block: var(--bsi-s-6);
}
/* Portrait photos read better constrained and left-aligned beside text
   rather than stretched across the measure. */
.bsi-col .bsi-figure img { max-height: 420px; }

/* ==========================================================================
   22. PAGE CONTENT WIDTH + LEADING PORTRAIT
   The measure was capping every text element at 68ch, which is right for
   paragraphs but left a wide empty gutter on a page that is mostly headings
   and credential lists. Paragraphs keep the reading measure; lists and
   headings get more room.
   ========================================================================== */

.bsi-page__content > ul,
.bsi-page__content > ol,
.bsi-page__content .bsi-col > ul,
.bsi-page__content .bsi-col > ol { max-width: 82ch; }
/* No max-width on content headings: at 40ch, combined with text-wrap:
   balance and a floated portrait intruding, the credentials line collapsed
   to two words per line. Headings wrap against the available column. */
.bsi-page__content h2,
.bsi-page__content h3,
.bsi-page__content h4 { max-width: none; text-wrap: pretty; }

/* Converted content carries inline `text-align: center` on some headings.
   Centred titles above left-aligned lists read as a mistake, so align them
   with the text they introduce. */
.bsi-page__content h2[style*="center"],
.bsi-page__content h3[style*="center"],
.bsi-page__content h4[style*="center"],
.bsi-page__content .bsi-col h2[style*="center"],
.bsi-page__content .bsi-col h3[style*="center"] { text-align: left !important; }

/* --------------------------------------------------------------------------
   PROFILE MASTHEAD
   A page that opens with a portrait, a name and its credentials is a profile.
   Floating the portrait was tried first and misbehaved: the <li> boxes still
   spanned the full width beneath the float, so the bullet markers sat in the
   float's gutter, detached from their text. A grid puts the portrait in its
   own column, so everything beside it lays out normally.
   -------------------------------------------------------------------------- */

.bsi-profile {
	display: grid;
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	gap: clamp(1.75rem, 4vw, 3.25rem);
	align-items: start;
	margin: 0 0 var(--bsi-s-8);
	padding-bottom: var(--bsi-s-7);
	border-bottom: 1px solid var(--bsi-rule);
}

/* The portrait is a 4032px original. Sticky keeps the face in view while the
   reader works down a long credential list. */
.bsi-profile__media { position: sticky; top: var(--bsi-s-5); }
.bsi-page__content .bsi-profile__media .bsi-figure { margin: 0; }
/* Selector carries .bsi-page__content because the generic content-figure rule
   above sets max-height/object-fit: contain at (0,2,1) and would otherwise
   letterbox the portrait inside its crop box. */
.bsi-page__content .bsi-profile__media img {
	display: block;
	width: 100%;
	height: auto;
	max-height: none;
	max-width: none;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center 22%;
	border-radius: var(--bsi-radius);
	background: var(--bsi-sand-deep);
}

/* The name is the page's real headline — the h1 above it is the section
   label ("About"), so this carries the weight. */
.bsi-profile__body > :first-child { margin-top: 0; }
.bsi-profile__body h2 {
	font-size: clamp(1.75rem, 3.2vw, 2.5rem);
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin-bottom: var(--bsi-s-3);
}
/* Credentials are a subtitle, not a section heading: same words, quieter. */
.bsi-profile__body h3 {
	font-family: var(--bsi-font-ui);
	font-size: clamp(0.9rem, 1.4vw, 1.02rem);
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: 0.04em;
	color: var(--bsi-orange);
	margin: 0 0 var(--bsi-s-5);
	padding-bottom: var(--bsi-s-5);
	border-bottom: 1px solid var(--bsi-rule);
}
.bsi-profile__body ul { max-width: none; }
.bsi-profile__body ul li { font-size: 0.95rem; }

@media (max-width: 860px) {
	.bsi-profile {
		grid-template-columns: 1fr;
		gap: var(--bsi-s-6);
	}
	.bsi-profile__media {
		position: static;
		max-width: 300px;
	}
}

/* --------------------------------------------------------------------------
   CONVERTED ROWS THAT NEEDED A SHAPE
   Both patterns below arrived as bare three-column rows and ended in a wide
   band of empty page. See bsi_classify_rows() for how they are detected.
   -------------------------------------------------------------------------- */

/* Equal items — the three fellowships — read as a set of cards. */
.bsi-page__content .bsi-row--cards { align-items: stretch; }
.bsi-page__content .bsi-row--cards > .bsi-col {
	display: flex;
	background: var(--bsi-sand);
	border: 1px solid var(--bsi-rule);
	border-top: 3px solid var(--bsi-orange-bright);
	border-radius: var(--bsi-radius);
	padding: var(--bsi-s-6) var(--bsi-s-5);
}
.bsi-page__content .bsi-row--cards > .bsi-col > p {
	margin: 0;
	max-width: none;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--bsi-ink-soft);
}
/* The institution and country sit under the fellowship title, which the
   source marks up with <strong> and <br>. */
.bsi-page__content .bsi-row--cards strong {
	display: block;
	margin-bottom: var(--bsi-s-3);
	/* The source follows the title with a <br>; making the title a block
	   already ends the line, so the break would double the gap. */
	font-family: var(--bsi-font-head);
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--bsi-ink);
}
.bsi-page__content .bsi-row--cards strong + br { display: none; }

/* Merged achievement list: CSS balances the columns, so no column runs out
   early. break-inside keeps a wrapped item from splitting across columns. */
.bsi-page__content .bsi-list--balanced {
	max-width: none;
	columns: 3;
	column-gap: var(--bsi-s-7);
	margin-top: var(--bsi-s-5);
}
.bsi-page__content .bsi-list--balanced > li {
	break-inside: avoid;
	margin-bottom: var(--bsi-s-4);
}

@media (max-width: 900px) {
	.bsi-page__content .bsi-list--balanced { columns: 2; }
}
@media (max-width: 620px) {
	.bsi-page__content .bsi-list--balanced { columns: 1; }
}

/* ==========================================================================
   23. CONTACT PAGE
   The converted page put the three clinics' consulting hours — the thing a
   patient actually came for — into a 33% column as a run of bold text, while
   the 66% column held a photograph and then stopped. See
   bsi_build_contact_layout() for how the same blocks are regrouped.
   ========================================================================== */

.bsi-contactpage__top {
	display: grid;
	grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
	gap: clamp(1.75rem, 4vw, 3.5rem);
	align-items: start;
	padding-bottom: var(--bsi-s-8);
	margin-bottom: var(--bsi-s-8);
	border-bottom: 1px solid var(--bsi-rule);
}
.bsi-page__content .bsi-contactpage__media .bsi-figure { margin: 0; }
.bsi-page__content .bsi-contactpage__media img {
	display: block;
	width: 100%;
	height: auto;
	max-height: none;
	max-width: none;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--bsi-radius);
	background: var(--bsi-sand-deep);
}

.bsi-page__content .bsi-contactpage__panel > h2 {
	margin: 0;
	max-width: none;
	font-size: clamp(1.6rem, 3vw, 2.25rem);
	line-height: 1.1;
	letter-spacing: -0.01em;
}
/* The doctor's name names the subject of the heading above it. */
.bsi-contactpage__name {
	margin: var(--bsi-s-3) 0 var(--bsi-s-6);
	font-family: var(--bsi-font-ui);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--bsi-orange);
}

/* Reachable-by rows: quieter than the standalone feature card, since here
   they sit together as one group. */
.bsi-contactpage__ways .bsi-feature {
	margin: 0 0 var(--bsi-s-4);
	padding: var(--bsi-s-4) var(--bsi-s-5);
}
.bsi-contactpage__ways .bsi-feature:last-child { margin-bottom: 0; }
.bsi-contactpage__ways .bsi-feature__body { font-size: 0.98rem; }
/* Prefixed with .bsi-page__content: the generic content-list rule that
   draws the orange bullet is `.bsi-page__content ul > li::before`, which
   outranks a bare `.bsi-contactpage__ways li::before`. */
.bsi-page__content .bsi-contactpage__ways ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.bsi-page__content .bsi-contactpage__ways ul > li::before { content: none; }
.bsi-page__content .bsi-contactpage__ways ul > li { padding-left: 0; margin: 0; }
/* Empty paragraphs left by the converter (one held only an HTML comment). */
.bsi-contactpage__ways p:empty { display: none; }

/* Phone and email are the actions on this page: big enough to tap, and
   clearly interactive rather than plain text. 44px minimum height. */
.bsi-contact-action {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-family: var(--bsi-font-ui);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--bsi-orange);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	word-break: break-word;
}
.bsi-contact-action:hover,
.bsi-contact-action:focus-visible {
	color: var(--bsi-orange-dark);
	border-bottom-color: currentColor;
}

/* --- consulting hours --- */
.bsi-hours {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--bsi-s-6);
}
.bsi-hours__clinic {
	background: var(--bsi-sand);
	border: 1px solid var(--bsi-rule);
	border-top: 3px solid var(--bsi-orange-bright);
	border-radius: var(--bsi-radius);
	padding: var(--bsi-s-6) var(--bsi-s-5) var(--bsi-s-5);
}
.bsi-page__content .bsi-hours__name {
	margin: 0 0 var(--bsi-s-4);
	max-width: none;
	font-size: 1.1rem;
	line-height: 1.25;
	letter-spacing: 0.01em;
}
/* The section-5 table skin (white panel, orange uppercase header cells,
   zebra rows) is meant for the site's 36 data tables. A two-column opening
   hours list wants none of it, and `th { white-space: nowrap }` pushed the
   table past the card while `table { overflow: hidden }` clipped the times.
   Every inherited property is reset explicitly. */
.bsi-page__content .bsi-hours__table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	background: none;
	border: 0;
	border-radius: 0;
	overflow: visible;
	font-size: 0.95rem;
}
.bsi-page__content .bsi-hours__table tbody tr:nth-child(even) { background: none; }
.bsi-page__content .bsi-hours__table th,
.bsi-page__content .bsi-hours__table td {
	padding: var(--bsi-s-3) 0;
	text-align: left;
	vertical-align: baseline;
	border-bottom: 1px solid var(--bsi-rule);
}
.bsi-page__content .bsi-hours__table tr:last-child th,
.bsi-page__content .bsi-hours__table tr:last-child td { border-bottom: 0; }
.bsi-page__content .bsi-hours__table th {
	width: 45%;
	background: none;
	color: var(--bsi-ink);
	font-family: var(--bsi-font-ui);
	font-size: 0.95rem;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	white-space: normal;
	padding-right: var(--bsi-s-4);
}
/* Times align right so the shape of the week reads down the column;
   tabular figures stop the digits shifting between rows. */
.bsi-page__content .bsi-hours__table td {
	text-align: right;
	font-variant-numeric: tabular-nums;
	color: var(--bsi-ink-soft);
}

.bsi-page__content .bsi-hours__note {
	margin: var(--bsi-s-6) 0 0;
	max-width: none;
	text-align: center;
	font-family: var(--bsi-font-ui);
	font-size: 0.92rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--bsi-orange);
}

@media (max-width: 860px) {
	.bsi-contactpage__top {
		grid-template-columns: 1fr;
		gap: var(--bsi-s-6);
	}
}

/* ==========================================================================
   24. VIDEO EMBEDS
   Every converted embed carries width="1180" height="664" from the old
   editor, so a 1180px iframe rendered inside a 356px column. 138 published
   items are affected, which is why this override is not scoped to one page.
   ========================================================================== */

.bsi-page__content iframe,
.bsi-single__content iframe {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--bsi-radius);
	background: var(--bsi-ink);
}
/* Embeds that are not video keep their own height. */
.bsi-page__content iframe[src*="maps"],
.bsi-single__content iframe[src*="maps"] { aspect-ratio: 4 / 3; }

/* --- gallery of videos --- */
/* auto-fill, not auto-fit: auto-fit collapses the unused tracks, so the one
   video that sits alone in its group stretched to the full 1132px container
   while its siblings elsewhere were a third of that. auto-fill keeps the
   track count constant, so every card is the same size. */
.bsi-videogrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--bsi-s-6);
	margin: var(--bsi-s-6) 0 var(--bsi-s-8);
	align-items: start;
}
.bsi-page__content .bsi-video { margin: 0; }

/* Click-to-play poster. Same mechanism as the homepage Shorts — the shared
   data-bsi-short hook means no extra JavaScript — but 16:9 rather than 9:16,
   and object-fit: cover trims the letterbox bars YouTube bakes into its
   480x360 stills. */
.bsi-video__player {
	position: relative;
	display: block;
	width: 100%;
	/* Set per card from the poster's own dimensions; 16:9 only as a fallback
	   for a video whose still could not be measured. */
	aspect-ratio: var(--bsi-video-ratio, 16 / 9);
	padding: 0;
	border: 1px solid var(--bsi-border);
	border-radius: var(--bsi-radius);
	overflow: hidden;
	background: var(--bsi-ink);
	cursor: pointer;
	transition: transform 0.22s var(--bsi-ease), box-shadow 0.22s var(--bsi-ease);
}
.bsi-video__player:hover { transform: translateY(-3px); box-shadow: var(--bsi-shadow-lg); }
.bsi-video__player:focus-visible { outline: 3px solid var(--bsi-orange-bright); outline-offset: 3px; }

.bsi-page__content .bsi-video__poster {
	width: 100%;
	height: 100%;
	max-height: none;
	max-width: none;
	object-fit: cover;
	border-radius: 0;
	transition: transform 0.5s var(--bsi-ease);
}
.bsi-video__player:hover .bsi-video__poster { transform: scale(1.04); }

.bsi-video__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.16) 0%, rgba(0,0,0,0) 45%, rgba(0,0,0,0.40) 100%);
}
/* Play triangle drawn in CSS: one less request, and it cannot go missing. */
.bsi-video__play {
	position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	width: 58px; height: 58px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--bsi-white) 92%, transparent);
	box-shadow: 0 4px 18px rgba(0,0,0,0.28);
	transition: transform 0.22s var(--bsi-ease), background 0.22s var(--bsi-ease);
}
.bsi-video__play::after {
	content: "";
	position: absolute;
	left: 52%; top: 50%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 9px 0 9px 15px;
	border-color: transparent transparent transparent var(--bsi-orange);
	transition: border-left-color 0.22s var(--bsi-ease);
}
.bsi-video__player:hover .bsi-video__play {
	transform: translate(-50%, -50%) scale(1.1);
	background: var(--bsi-orange);
}
.bsi-video__player:hover .bsi-video__play::after { border-left-color: #fff; }

/* Swapped in on click by initShorts(). */
.bsi-video__player iframe {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	aspect-ratio: auto;
	border: 0;
	border-radius: 0;
}

/* Videos with no local still keep a real iframe. */
.bsi-video__frame { border-radius: var(--bsi-radius); overflow: hidden; }

.bsi-page__content .bsi-video__caption {
	margin: var(--bsi-s-4) 0 0;
	max-width: none;
	font-family: var(--bsi-font-ui);
	font-size: 0.95rem;
	line-height: 1.45;
	color: var(--bsi-ink-soft);
}

/* A video YouTube no longer serves: the URL stays as a link rather than raw
   text, so nothing is lost while the owner decides what to do with it. */
.bsi-video--linkonly {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 0;
	padding: var(--bsi-s-6) var(--bsi-s-5);
	background: var(--bsi-sand);
	border: 1px dashed var(--bsi-border-strong);
	border-radius: var(--bsi-radius);
}
.bsi-video__link {
	font-family: var(--bsi-font-ui);
	font-size: 0.9rem;
	word-break: break-all;
	color: var(--bsi-orange);
}

@media (prefers-reduced-motion: reduce) {
	.bsi-video__player,
	.bsi-video__poster,
	.bsi-video__play { transition: none; }
	.bsi-video__player:hover { transform: none; }
	.bsi-video__player:hover .bsi-video__poster { transform: none; }
	.bsi-video__player:hover .bsi-video__play { transform: translate(-50%, -50%); }
}

/* ==========================================================================
   25. PHOTO GALLERIES
   Rendered from the NextGEN tables by inc/gallery.php rather than by the
   plugin, which is switched off. Album view lists the galleries; a gallery
   opens at ?photos=<slug>.
   ========================================================================== */

/* --bsi-photos-cols / --bsi-photo-min are set by the Elementor widget's
   Columns control; unset, the grid fits as many tracks as the space allows. */
.bsi-album {
	display: grid;
	grid-template-columns: repeat(var(--bsi-photos-cols, auto-fill), minmax(var(--bsi-photo-min, 260px), 1fr));
	gap: var(--bsi-s-6);
	margin: var(--bsi-s-6) 0;
}
.bsi-album__item {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--bsi-white);
	border: 1px solid var(--bsi-rule);
	border-radius: var(--bsi-radius);
	overflow: hidden;
	text-decoration: none;
	transition: transform 0.22s var(--bsi-ease), box-shadow 0.22s var(--bsi-ease);
}
.bsi-album__item:hover { transform: translateY(-3px); box-shadow: var(--bsi-shadow-lg); }
.bsi-album__item:focus-visible { outline: 3px solid var(--bsi-orange-bright); outline-offset: 3px; }

.bsi-album__media { display: block; background: var(--bsi-sand-deep); }
.bsi-album__media { overflow: hidden; }
.bsi-album .bsi-album__media img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	max-height: none;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 0;
	transition: transform 0.5s var(--bsi-ease);
}
.bsi-album__item:hover .bsi-album__media img { transform: scale(1.04); }

.bsi-album__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: var(--bsi-s-2);
	padding: var(--bsi-s-5);
	border-top: 3px solid var(--bsi-orange-bright);
}
.bsi-album__title {
	font-family: var(--bsi-font-head);
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--bsi-ink);
}
.bsi-album__count {
	font-family: var(--bsi-font-ui);
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	color: var(--bsi-orange);
}

/* --- one gallery --- */
.bsi-photoset .bsi-photoset__back { margin: 0 0 var(--bsi-s-4); max-width: none; }
.bsi-photoset__back a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-family: var(--bsi-font-ui);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--bsi-orange);
	text-decoration: none;
}
.bsi-photoset__back a::before { content: "\2190"; margin-right: 0.5rem; }
.bsi-photoset__back a:hover { text-decoration: underline; }

.bsi-photoset .bsi-photoset__title {
	margin: 0 0 var(--bsi-s-6);
	max-width: none;
	font-size: clamp(1.4rem, 2.6vw, 1.9rem);
}

.bsi-photos {
	display: grid;
	grid-template-columns: repeat(var(--bsi-photos-cols, auto-fill), minmax(var(--bsi-photo-min, 190px), 1fr));
	gap: var(--bsi-s-4);
	margin-bottom: var(--bsi-s-8);
}
.bsi-photo {
	display: block;
	border-radius: var(--bsi-radius);
	overflow: hidden;
	background: var(--bsi-sand-deep);
	transition: transform 0.22s var(--bsi-ease), box-shadow 0.22s var(--bsi-ease);
}
.bsi-photo:hover { transform: translateY(-2px); box-shadow: var(--bsi-shadow-lg); }
.bsi-photo:focus-visible { outline: 3px solid var(--bsi-orange-bright); outline-offset: 3px; }
.bsi-photos .bsi-photo img,
.bsi-photo img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	max-height: none;
	aspect-ratio: var(--bsi-photo-ratio, 3 / 2);
	object-fit: cover;
	border-radius: 0;
}

/* --- lightbox --- */
.bsi-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
	padding: clamp(1rem, 4vw, 3rem);
	background: rgba(20, 14, 10, 0.92);
}
.bsi-lightbox[hidden] { display: none; }
.bsi-lightbox__img {
	max-width: 100%;
	max-height: 82vh;
	border-radius: var(--bsi-radius);
	background: var(--bsi-ink);
}
.bsi-lightbox__caption {
	margin: var(--bsi-s-4) 0 0;
	font-family: var(--bsi-font-ui);
	font-size: 0.92rem;
	line-height: 1.45;
	text-align: center;
	color: #F3ECE4;
}
.bsi-lightbox__figure { margin: 0; display: grid; justify-items: center; }
.bsi-lightbox__btn {
	position: absolute;
	display: grid;
	place-items: center;
	width: 48px; height: 48px;
	border: 1px solid rgba(255,255,255,0.35);
	border-radius: 50%;
	background: rgba(0,0,0,0.45);
	color: #fff;
	font-size: 1.35rem;
	line-height: 1;
	cursor: pointer;
}
.bsi-lightbox__btn:hover { background: var(--bsi-orange); border-color: var(--bsi-orange); }
.bsi-lightbox__btn:focus-visible { outline: 3px solid var(--bsi-orange-bright); outline-offset: 2px; }
.bsi-lightbox__close { top: clamp(0.75rem, 2vw, 1.5rem); right: clamp(0.75rem, 2vw, 1.5rem); }
.bsi-lightbox__prev { left: clamp(0.5rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); }
.bsi-lightbox__next { right: clamp(0.5rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); }

@media (prefers-reduced-motion: reduce) {
	.bsi-album__item, .bsi-photo, .bsi-album__media img { transition: none; }
	.bsi-album__item:hover, .bsi-photo:hover { transform: none; }
	.bsi-album__item:hover .bsi-album__media img { transform: none; }
}

/* ==========================================================================
   26. CONVERTED WORDPRESS GALLERIES
   The converter emits .bsi-gallery / .bsi-gallery__item for WordPress's own
   galleries and nothing styled them, so five published items rendered as a
   vertical stack of full-width photographs — the Training Opportunities page
   ended in ten of them, one per screen.
   (Not to be confused with .bsi-photoset, which is the NextGEN album view.)
   ========================================================================== */

.bsi-page__content .bsi-gallery,
.bsi-single__content .bsi-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: var(--bsi-s-5);
	align-items: start;
	margin: var(--bsi-s-6) 0 var(--bsi-s-8);
	max-width: none;
}
.bsi-page__content .bsi-gallery__item,
.bsi-single__content .bsi-gallery__item {
	margin: 0;
	display: flex;
	flex-direction: column;
}
/* Portraits, squares and landscapes are mixed in the same gallery, so a
   common frame keeps the grid even; object-fit crops rather than distorts. */
.bsi-page__content .bsi-gallery__item img,
.bsi-single__content .bsi-gallery__item img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	max-height: none;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: center 25%;
	border-radius: var(--bsi-radius);
	background: var(--bsi-sand-deep);
}
.bsi-page__content .bsi-gallery__item figcaption,
.bsi-single__content .bsi-gallery__item figcaption {
	margin-top: var(--bsi-s-3);
	font-family: var(--bsi-font-ui);
	font-size: 0.88rem;
	line-height: 1.4;
	color: var(--bsi-ink-soft);
}

/* Key facts about a course: three short bold lines in the source, presented
   as a set rather than as orphaned lines under the heading. */
.bsi-page__content .bsi-keyfacts,
.bsi-single__content .bsi-keyfacts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bsi-s-3);
	list-style: none;
	max-width: none;
	margin: 0 0 var(--bsi-s-6);
	padding: 0;
}
.bsi-page__content .bsi-keyfacts > li,
.bsi-single__content .bsi-keyfacts > li {
	margin: 0;
	padding: var(--bsi-s-3) var(--bsi-s-5);
	background: var(--bsi-orange-wash);
	border: 1px solid var(--bsi-rule);
	border-radius: 999px;
	font-family: var(--bsi-font-ui);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--bsi-orange-dark);
}
.bsi-page__content .bsi-keyfacts > li::before,
.bsi-single__content .bsi-keyfacts > li::before { content: none; }

/* Caption under a photograph, when the widget's Captions switch is on. It is
   a sibling of the link rather than inside it, so it is not read as part of
   the link text. */
.bsi-photo__caption {
	display: block;
	margin-top: calc(var(--bsi-s-2) * -1);
	font-family: var(--bsi-font-ui);
	font-size: 0.85rem;
	line-height: 1.4;
	color: var(--bsi-ink-soft);
}

/* ==========================================================================
   27. FLOATING CONTACT BAR (phones)
   Calling or emailing is the main thing a visitor wants from a clinic site,
   and on a phone the header could not hold either without overflowing. The
   bar is fixed to the bottom of the viewport, clear of the content.
   ========================================================================== */

:root { --bsi-callbar-row: 56px; }
.bsi-callbar { display: none; }

@media (max-width: 900px) {
	.bsi-callbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 900; /* Under the lightbox (1000), over everything else. */
		display: grid;
		grid-template-columns: 1fr 1fr;
		background: var(--bsi-orange);
		border-top: 1px solid var(--bsi-orange-dark);
		box-shadow: 0 -2px 14px rgba(43, 32, 24, 0.18);
		/* Clear of the home indicator on a modern iPhone. */
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}

	.bsi-callbar__item {
		min-height: var(--bsi-callbar-row);
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--bsi-s-3);
		font-family: var(--bsi-font-ui);
		font-size: 0.98rem;
		font-weight: 600;
		letter-spacing: 0.03em;
		color: #fff;
		text-decoration: none;
	}
	.bsi-callbar__item + .bsi-callbar__item { border-left: 1px solid var(--bsi-orange-dark); }
	.bsi-callbar__item:hover,
	.bsi-callbar__item:active { background: var(--bsi-orange-dark); color: #fff; }
	.bsi-callbar__item:focus-visible {
		outline: 3px solid #fff;
		outline-offset: -4px;
	}
	.bsi-callbar__item .bsi-icon { flex-shrink: 0; }

	/* Make room so the bar never covers the end of the page. Derived from the
	   bar's own height rather than repeated by hand: at a literal 56px the
	   copyright line ended up exactly 1px behind the bar, because the 1px top
	   border was not counted. The extra gap keeps them visibly apart. */
	body {
		padding-bottom: calc(
			var(--bsi-callbar-row) + 1px + var(--bsi-s-4) + env(safe-area-inset-bottom, 0px)
		);
	}

	/* The progress bar sits at the top, so it is unaffected — but a fixed
	   lightbox must cover the call bar, not sit behind it. */
	.bsi-lightbox { z-index: 1000; }
}