/* TreVita theme — design system ported verbatim from trevita.netlify.app
   (tokens, type scale, and component styling extracted from its inline CSS). */

:root {
	--navy:  #002B51;
	--blue:  #0F4C81;
	--sky:   #BEE1FF;
	--bari:  #1CA6DA;
	--baril: #46C1EF;
	--stem:  #2CCCD3;
	--plas:  #7C3AB7;
	--hair:  #C8993A;
	--bg:    #F6F8FB;
	--w:     #FFFFFF;
	--bdr:   #E2EAF2;
	--bdr2:  #EDF2F7;
	--t1:    #060E18;
	--t2:    #3B4D60;
	--t3:    #8496AA;
	--sh:    0 1px 2px rgba(6,14,24,.04), 0 6px 24px rgba(6,14,24,.07);
	--sh2:   0 2px 8px rgba(6,14,24,.05), 0 16px 48px rgba(6,14,24,.10);
	--sh3:   0 4px 16px rgba(6,14,24,.06), 0 32px 80px rgba(6,14,24,.13);
	--font-head: 'Montserrat', sans-serif;
	--font-body: 'DM Sans', system-ui, sans-serif;
	--radius: 18px;
	--section-pad: clamp(56px, 7vw, 96px);
	--sp-sm: clamp(24px, 3vw, 40px);
	--sp-md: clamp(44px, 5vw, 72px); /* ref b376a57/ae4bd7b: 72px section rhythm */
	--sp-lg: clamp(64px, 8vw, 110px);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; scroll-padding-top: 88px; }
body {
	font-family: var(--font-body);
	background: var(--bg);
	color: var(--t1);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	line-height: 1.6;
}
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--navy); line-height: 1.15; margin: 0 0 .5em; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; }
p { margin: 0 0 .9em; }
p:last-child { margin-bottom: 0; }

.container { max-width: 1320px; margin-inline: auto; padding-inline: 5%; }
.component { padding-block: var(--sp-md); }

/* Buttons — .btn-fill / .btn-pill from the reference */
.button {
	display: inline-block;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .3px;
	padding: 12px 26px;
	border-radius: 100px;
	transition: all .2s;
	white-space: nowrap;
	cursor: pointer;
}
.button--primary { color: #fff; background: var(--navy); border: 1.5px solid var(--navy); }
.button--primary:hover { background: var(--blue); border-color: var(--blue); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(15,76,129,.28); }
.button--secondary { color: var(--blue); background: transparent; border: 1.5px solid var(--bdr); }
.button--secondary:hover { border-color: var(--blue); background: rgba(15,76,129,.04); }
.button--text { border: none; padding: 0; color: var(--blue); font-weight: 600; }
.buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 26px; } /* ref .hero-ctas / .closer-cta-row centre a text link against the pill */

/* Section headings — .sec-lbl / .sec-h2 from the reference */
/* The reference does not box its section heads — .ben-head, .surg-head,
   .facil-head and .comp-head all let the h2 run the full 1320px wrap, and
   only two are capped: .ovw-head at 660px and .procs-head h2 at 860px. Ours
   had it the other way round, a 760px box on everything, which wrapped
   headings the reference keeps on one line. The lede carries its own 480px
   (ref .sec-p), so dropping the box only frees the title. */
.section-heading { margin-bottom: 40px; }
/* ref .ovw-head: the opening section head is the one that is boxed. */
.process-story .section-heading { max-width: 660px; }
.section-heading__eyebrow {
	display: inline-flex; align-items: center; gap: 10px;
	font-size: 10px; font-weight: 700; letter-spacing: 3px;
	text-transform: uppercase; color: var(--blue); margin: 0 0 14px;
}
.section-heading__eyebrow::before { content: ''; display: block; width: 20px; height: 2px; background: var(--blue); border-radius: 1px; }
.section-heading__title {
	font-size: clamp(32px, 3.8vw, 52px); font-weight: 800;
	letter-spacing: -1.5px; line-height: 1.03;
}
.section-heading__title em, .section-heading__title i { font-style: italic; color: var(--blue); }
/* Heading alignment control (ref centres .steps-head / .benefits-head,
   which also narrow the block) */
.section-heading--center { text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; }
.section-heading--center .section-heading__eyebrow { justify-content: center; }
/* The dash stays when the head is centred. ref has exactly one
   .sec-lbl::before rule and never hides it — every eyebrow carries the
   dash, centred or not, including the two centred ones on the
   experience page. Hiding it here had already needed three separate
   rules elsewhere to put it back. */
/* ref .steps-head / .benefits-head: a centred head is boxed at 680-720px and
   its lede fills that box. Ours left the lede on the 480px base measure, so a
   sentence the reference keeps on one line wrapped to two inside a much wider
   head. */
.section-heading--center { max-width: 720px; margin-inline: auto; }
.section-heading--center .section-heading__sub { max-width: none; margin-left: auto; margin-right: auto; }
/* ref .sec-p: 15px/1.8, and capped at 480px. Ours ran 17px with no cap, so
   a section lede set two points larger and ran the full container width —
   the same sentence that wraps to two lines in the reference sat on one
   here. The per-context overrides below still win where a section needs
   its own measure. */
.section-heading__sub { font-size: 15px; line-height: 1.8; color: var(--t2); max-width: 480px; margin: 14px 0 0; }
/* The opening lede on a service page runs wider than the rest, as the
   reference widens its first .sec-p inline (640px on stem cell). */
.process-story .section-heading__sub { max-width: 640px; }

/* Hero */
.hero { position: relative; overflow: hidden; }
.hero:not(.hero--has-video)::before {
	content: ''; position: absolute; top: -180px; right: -120px;
	width: 650px; height: 650px; border-radius: 50%; pointer-events: none;
	background: radial-gradient(ellipse, rgba(190,225,255,.55) 0%, rgba(28,166,218,.18) 35%, transparent 68%);
}
.hero:not(.hero--has-video)::after {
	content: ''; position: absolute; bottom: -80px; left: -60px;
	width: 400px; height: 400px; border-radius: 50%; pointer-events: none;
	background: radial-gradient(ellipse, rgba(15,76,129,.14) 0%, transparent 65%);
}
.hero__inner { position: relative; z-index: 1; display: grid; gap: 32px; align-items: center; }
.hero__inner:has(.hero__media) { grid-template-columns: 1fr 1fr; }
.hero .section-heading { margin-bottom: 0; }
.hero .section-heading__title {
	font-size: clamp(44px, 5.5vw, 72px); font-weight: 800; /* ref caps at 72 */
	line-height: .99; letter-spacing: -2.5px;
}
.hero--minimal { padding-block: calc(var(--section-pad) * .65); }
.hero--minimal .section-heading__title { font-size: clamp(36px, 4.5vw, 60px); }
.hero--has-video { background: var(--navy); }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,20,38,.45), rgba(0,20,38,.62)); }
.hero--has-video .section-heading__title { color: #fff; }
.hero--has-video .section-heading__sub { color: var(--sky); }
.hero--has-video .section-heading__eyebrow { color: var(--sky); }
.hero--has-video .section-heading__eyebrow::before { background: var(--sky); }
.hero--has-video .button--secondary { color: #fff; border-color: rgba(255,255,255,.4); }
.hero--has-video .button--secondary:hover { border-color: #fff; background: rgba(255,255,255,.08); }

/* Stats bar */
.stats-bar__grid { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; margin: 0; }
.stats-bar__stat {
	flex: 1 1 180px; text-align: center; background: var(--w);
	border: 1px solid var(--bdr); border-radius: var(--radius);
	padding: 28px 20px; box-shadow: var(--sh);
}
.stats-bar__value { font-family: var(--font-head); font-size: clamp(28px, 3vw, 40px); font-weight: 800; letter-spacing: -1px; color: var(--navy); }
.stats-bar__label { margin: 4px 0 0; color: var(--t2); font-size: 14px; }

/* Social proof */
.social-proof { padding-block: 28px; border-block: 1px solid var(--bdr2); background: var(--w); }
.social-proof__inner { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: center; }
.social-proof__rating, .social-proof__lives { margin: 0; color: var(--t2); font-size: 14px; }
.social-proof__rating strong, .social-proof__lives strong { font-family: var(--font-head); color: var(--navy); font-weight: 800; font-size: 18px; }
.social-proof__logos { display: flex; flex-wrap: wrap; gap: 22px; list-style: none; margin: 0; padding: 0; align-items: center; }
.social-proof__logos img { height: 30px; width: auto; filter: grayscale(1); opacity: .65; }
.social-proof__logo-text { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--t3); }
.stars { color: var(--hair); letter-spacing: 2px; font-size: 14px; }

/* Cards (base) */
.card {
	background: var(--w);
	border: 1px solid var(--bdr);
	border-radius: var(--radius);
	padding: 26px;
	box-shadow: var(--sh);
	transition: transform .25s, box-shadow .25s;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--sh2); }

/* Card grid */
.card-grid__grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card--grid-item__media { margin: -26px -26px 18px; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; }
.card--grid-item__media img { width: 100%; height: 180px; object-fit: cover; transition: transform .4s; }
.card:hover .card--grid-item__media img { transform: scale(1.04); }
.card--grid-item__number { font-family: var(--font-head); font-size: 13px; font-weight: 800; letter-spacing: 2px; color: var(--bari); }
.card--grid-item__heading { font-size: 18px; font-weight: 700; letter-spacing: -.3px; margin: 8px 0 6px; }
.card--grid-item__text { color: var(--t2); font-size: 14.5px; margin: 0 0 14px; }
.card--grid-item__link { font-weight: 700; font-size: 13px; }
.card--grid-item__link::after { content: ' →'; }

/* Testimonial card */
.card--testimonial__outcome { font-family: var(--font-head); font-weight: 800; font-size: 15px; color: var(--bari); margin: 0 0 6px; letter-spacing: -.2px; }
.card--testimonial__quote { margin: 8px 0 16px; font-size: 15px; color: var(--t2); font-style: normal; }
.card--testimonial__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--t3); }
.card--testimonial__name { font-weight: 700; color: var(--navy); }
.card--testimonial__source { color: var(--blue); font-weight: 600; }
.card--testimonial__video { display: inline-block; margin-top: 12px; font-weight: 700; font-size: 13px; color: var(--blue); }

/* Team card (ref 80e512e standardized: horizontal, initials avatar) */
.card--team-member { --svc: var(--bari); display: flex; align-items: center; gap: 22px; padding: 28px 30px; border-radius: 20px; }
/* The WRAPPER owns the circle: fixed width + aspect-ratio + clip. Any
   image (any source ratio, any WP size attrs) fills it via cover — the
   circle can never be the wrong shape or size. */
.card--team-member__photo,
.card--team-member__initials {
	width: 78px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
}
.card--team-member__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.card--team-member__initials {
	background: linear-gradient(145deg, color-mix(in srgb, var(--svc) 55%, #fff) 0%, var(--svc) 55%, color-mix(in srgb, var(--svc) 35%, #06121f) 100%);
	font-family: var(--font-head); font-size: 22px; font-weight: 800; color: #fff; letter-spacing: .5px;
}
.card--team-member__name { font-size: 18px; font-weight: 800; letter-spacing: -.2px; margin: 0; }
.card--team-member__role { font-size: 12px; font-weight: 700; color: var(--svc); letter-spacing: 1px; text-transform: uppercase; margin: 6px 0 4px; }
.card--team-member__loc { font-size: 12.5px; color: var(--t3); margin: 0; }

/* Facility card */
/* ref .facil-grid: two columns sharing the full wrap, collapsing to one at
   1100px. Ours auto-filled at minmax(300px,1fr), which made three narrow
   columns out of a 1320px row and left the third empty on a two-card page —
   each card 333px where the reference gives it ~650px. The --ref variant
   keeps its own auto-fill; that is the experience page's wall of ten, which
   the reference lays out its own way. */
.facility-grid__grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.facility-grid__grid:not(.facility-grid__grid--ref) { grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 1100px) {
	.facility-grid__grid:not(.facility-grid__grid--ref) { grid-template-columns: 1fr; }
}
.card--facility { padding: 0; overflow: hidden; }
.card--facility__body { padding: 22px; }
.card--facility__type { text-transform: uppercase; font-size: 10px; letter-spacing: 2.5px; font-weight: 700; color: var(--bari); margin: 0 0 6px; }
.card--facility__name { font-size: 18px; letter-spacing: -.3px; }
.card--facility__address, .card--facility__hours { font-size: 13.5px; color: var(--t2); }
.card--facility__travel, .card--facility__amenities { list-style: none; padding: 0; margin: 12px 0; font-size: 13.5px; color: var(--t2); }
/* ref .fac-inc li + .who-ck: the tick sits on the first line of a wrapping
   item, in the service colour, and never shrinks. */
/* ref .fac-desc */
.card--facility__desc { font-size: 12.5px; color: var(--t2); line-height: 1.75; margin: 0 0 16px; }
.card--facility__amenities li { display: flex; align-items: flex-start; gap: 9px; line-height: 1.6; margin-bottom: 6px; }
.card--facility__ck { color: var(--svc, var(--blue)); font-weight: 800; flex-shrink: 0; margin-top: 1px; }
.card--facility__travel span { font-weight: 700; color: var(--navy); }
.card--facility__staff { font-size: 13.5px; font-weight: 600; color: var(--navy); }
.card--facility__tour { font-weight: 700; font-size: 13px; }

/* Newsroom card */
.resource-cards__grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.card--newsroom__metric { font-family: var(--font-head); font-weight: 800; font-size: 20px; letter-spacing: -.5px; color: var(--blue); margin: 0 0 10px; }
.card--newsroom__title { font-size: 16.5px; font-weight: 700; letter-spacing: -.3px; line-height: 1.3; }
.card--newsroom__title a { color: inherit; }
.card--newsroom__excerpt { color: var(--t2); font-size: 14px; }
.card--newsroom__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--t3); margin: 10px 0 0; }
.card--newsroom__link { display: inline-block; margin-top: 12px; font-weight: 700; font-size: 13px; }
.card--newsroom__link::after { content: ' ↗'; }

/* Numbered steps */
.numbered-steps__list { counter-reset: step; list-style: none; padding: 0; display: grid; gap: 22px; }
.numbered-steps--horizontal .numbered-steps__list { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.numbered-steps__step {
	position: relative; padding: 26px 26px 26px 74px;
	background: var(--w); border: 1px solid var(--bdr); border-radius: var(--radius); box-shadow: var(--sh);
}
.numbered-steps--horizontal .numbered-steps__step { padding: 26px; }
.numbered-steps__step::before {
	counter-increment: step; content: counter(step, decimal-leading-zero) "/";
	position: absolute; left: 26px; top: 26px;
	font-family: var(--font-head); font-weight: 800; font-size: 17px; color: var(--bari); letter-spacing: 1px;
}
.numbered-steps--horizontal .numbered-steps__step::before { position: static; display: block; margin-bottom: 10px; }
.numbered-steps__heading { font-size: 17px; font-weight: 700; letter-spacing: -.3px; }
.numbered-steps__step p { color: var(--t2); font-size: 14.5px; }
.numbered-steps__details { list-style: none; padding: 0; margin: 10px 0 0; font-size: 13.5px; color: var(--t2); }
.numbered-steps__details li { padding-left: 20px; position: relative; margin-bottom: 4px; }
.numbered-steps__details li::before { content: '✓'; position: absolute; left: 0; color: var(--bari); font-weight: 700; }

/* Cards orientation (ref .itin-days): one light card per day, icon tile,
   uppercase day label, check list — no step counter. */
.numbered-steps__locs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.numbered-steps__loc {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 12.5px; font-weight: 600; color: #fff; letter-spacing: .2px;
	background: var(--svc-dark, #083335); border: 1.5px solid var(--svc-dark, #083335);
	padding: 11px 22px; border-radius: 100px; box-shadow: 0 4px 14px rgba(8,51,53,.2);
}
/* The reference keeps both rails — Google reviews and the video stories —
   inside one .testi section, 36px apart (.hscroll margin-bottom). Ours are
   two sections, each carrying its own vertical padding, so the two stacked
   into 144px of empty page between them. */
.component.testimonial-carousel:has(+ .testimonial-cards) { padding-bottom: 36px; }
.component.testimonial-carousel + .component.testimonial-cards { padding-top: 0; }

/* ref .testi-head-row: the ratings badge sits beside the head, not beneath
   it — flex, ends aligned, pushed apart. Ours are siblings inside the
   container, so the container is what lays them out; the head itself stays
   plain, because what goes in its second column is the badge and not a
   lede. Wraps rather than squeezing, as the reference's flex-wrap does. */
.testimonial-carousel .container:has(> .testi-badge-card) {
	display: grid; grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 20px; align-items: end;
}
.testimonial-carousel .container > .section-heading { grid-column: 1; margin-bottom: 40px; }
.testimonial-carousel .container > .testi-badge-card { grid-column: 2; margin: 0 0 40px; }
/* min-width: 0 because a grid item defaults to min-width: auto, which is
   its min-content size — and this item holds a horizontally scrolling rail
   whose min-content is the whole rail. Without it the column grew to 745px
   inside a 375px container and the page scrolled sideways on a phone. */
.testimonial-carousel .container > .carousel { grid-column: 1 / -1; min-width: 0; }
@media (max-width: 900px) {
	/* minmax(0, 1fr), not 1fr: 1fr is minmax(auto, 1fr), and the auto is the
	   same trap one line up. */
	.testimonial-carousel .container:has(> .testi-badge-card) { grid-template-columns: minmax(0, 1fr); }
	.testimonial-carousel .container > .testi-badge-card { grid-column: 1; margin-top: -20px; }
}

/* Split head — the title on the left with the lede beside it, sharing the
   row's baseline. Six of the reference's heads do this (.svc-head,
   .testi-head-row, .itin-head-row, .stages-head-row, .adv-head,
   .exp-head-row) and thirteen do not, so it is a choice per section rather
   than a rule, and the editor makes it.

   The title takes 46px here rather than the page's 52px, as ref .itin-h2
   and .testi-h2 both do: it only has half the row to sit in. No bottom
   margin, or it would lift off the base that align-items:end puts the lede
   on. */
.section-heading--split {
	display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
	align-items: end; margin-bottom: 32px; max-width: none;
}
.section-heading--split .section-heading__eyebrow { grid-column: 1; grid-row: 1; }
.section-heading--split .section-heading__title {
	grid-column: 1; grid-row: 2; margin: 14px 0 0;
	font-size: clamp(30px, 3.5vw, 46px); letter-spacing: -1.2px; line-height: 1.04;
}
.section-heading--split .section-heading__sub { grid-column: 2; grid-row: 2; margin: 0; }
@media (max-width: 1100px) {
	.section-heading--split { grid-template-columns: 1fr; gap: 0; }
	.section-heading--split .section-heading__sub { grid-column: 1; grid-row: 3; margin-top: 14px; }
}
.numbered-steps--cards .numbered-steps__list { grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }
.numbered-steps--cards .numbered-steps__step {
	padding: 30px 28px; border-radius: 18px; overflow: hidden;
	transition: transform .3s, box-shadow .3s;
}
.numbered-steps--cards .numbered-steps__step:hover { transform: translateY(-3px); box-shadow: var(--sh2); }
.numbered-steps--cards .numbered-steps__step::before { content: none; } /* ref shows no counter here */
.numbered-steps--cards .numbered-steps__step::after {
	content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
	background: linear-gradient(90deg, transparent, var(--svc-bright, #2CCCD3), transparent);
}
.numbered-steps--cards .numbered-steps__ico {
	width: 44px; height: 44px; border-radius: 12px; margin-bottom: 16px;
	display: flex; align-items: center; justify-content: center;
	background: color-mix(in srgb, var(--svc, #008187) 9%, transparent); color: var(--svc, #008187);
}
/* margin resets the dark variant's 48px centred icon offset */
.numbered-steps--cards .numbered-steps__ico svg { width: 22px; height: 22px; margin: 0; }
.numbered-steps--cards .numbered-steps__heading {
	font-size: 13px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
	color: var(--svc, #008187); line-height: 1.35; margin-bottom: 14px;
}
.numbered-steps--cards .numbered-steps__details { margin: 0; font-size: 13px; line-height: 1.65; }
.numbered-steps--cards .numbered-steps__details li { padding: 8px 0 8px 21px; margin: 0; }
.numbered-steps--cards .numbered-steps__details li::before { top: 8px; color: var(--svc, #008187); font-weight: 800; }
.numbered-steps__action { display: flex; justify-content: center; margin-top: 32px; }
@media (max-width: 768px) { .numbered-steps--cards .numbered-steps__list { grid-template-columns: 1fr; } }

/* Tabs */
.tabbed-content__nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.tabbed-content__tab {
	font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: .2px;
	padding: 10px 22px; border: 1.5px solid var(--bdr); border-radius: 100px;
	background: var(--w); color: var(--blue); cursor: pointer; transition: all .2s;
}
.tabbed-content__tab:hover { border-color: var(--blue); }
.tabbed-content__tab[aria-selected="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.tabbed-content__badge { font-size: 9px; text-transform: uppercase; letter-spacing: 1.5px; margin-left: 8px; color: var(--hair); font-weight: 700; }
.tabbed-content__panel {
	background: var(--w); border: 1px solid var(--bdr); border-radius: var(--radius);
	padding: clamp(24px, 3vw, 40px); box-shadow: var(--sh);
}
.tabbed-content__prose { color: var(--t2); font-size: 15px; max-width: 720px; }
.tabbed-content__checklists { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-block: 22px; }
.tabbed-content__checklists h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: var(--t3); font-family: var(--font-body); font-weight: 700; margin-bottom: 10px; }
.tabbed-content__facts { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-block: 22px; }
.tabbed-content__facts > div { background: var(--bg); border-radius: 12px; padding: 14px 16px; }
.tabbed-content__facts dt { font-size: 10px; text-transform: uppercase; letter-spacing: 2px; color: var(--t3); font-weight: 700; }
.tabbed-content__facts dd { margin: 2px 0 0; font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--navy); letter-spacing: -.2px; }

/* Checklist */
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { padding-left: 24px; position: relative; margin-bottom: 8px; color: var(--t2); font-size: 14.5px; }
.checklist li::before { content: '✓'; position: absolute; left: 0; color: var(--bari); font-weight: 700; }

/* Comparison table */
.table-scroll { overflow-x: auto; background: var(--w); border: 1px solid var(--bdr); border-radius: var(--radius); box-shadow: var(--sh); }
.comparison-table table { border-collapse: collapse; width: 100%; min-width: 640px; }
.comparison-table th, .comparison-table td { padding: 14px 20px; border-bottom: 1px solid var(--bdr2); text-align: left; font-size: 14px; }
.comparison-table thead th { font-family: var(--font-head); font-weight: 700; font-size: 13px; letter-spacing: -.2px; color: var(--navy); }
.comparison-table tbody th { font-weight: 600; color: var(--t2); }
.comparison-table tr:last-child th, .comparison-table tr:last-child td { border-bottom: none; }
.comparison-table .is-highlight { background: rgba(190,225,255,.18); }
.comparison-table thead .is-highlight { color: var(--blue); }
.comparison-table .check { color: var(--bari); font-weight: 800; }
.comparison-table .cross { color: var(--t3); }

/* Journey timeline */
.journey-timeline__track { list-style: none; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); counter-reset: stage; }
.journey-timeline__stage { border-top: 3px solid var(--bari); padding-top: 14px; }
.journey-timeline__stage::before {
	counter-increment: stage; content: "Step " counter(stage);
	font-size: 10px; text-transform: uppercase; letter-spacing: 2.5px; color: var(--bari); font-weight: 700;
}
.journey-timeline__stage h3 { font-size: 15px; letter-spacing: -.2px; margin: 6px 0 4px; }
.journey-timeline__stage p { font-size: 13.5px; color: var(--t2); margin: 0; }

/* Carousel */
.carousel { position: relative; }
.carousel__track {
	display: grid; grid-auto-flow: column; grid-auto-columns: min(340px, 85%);
	gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
	padding: 4px 4px 12px; scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * { scroll-snap-align: start; }
.carousel__arrow {
	position: absolute; top: 40%; width: 42px; height: 42px; border-radius: 50%;
	border: 1px solid var(--bdr); background: var(--w); box-shadow: var(--sh);
	font-size: 20px; color: var(--navy); cursor: pointer; display: grid; place-items: center; z-index: 2; transition: all .2s;
}
.carousel__arrow:hover { border-color: var(--blue); color: var(--blue); }
.carousel__arrow--prev { left: -12px; }
.carousel__arrow--next { right: -12px; }

/* Filter buttons */
.filter-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.filter-buttons button {
	font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: .2px;
	padding: 8px 20px; border-radius: 100px; border: 1.5px solid var(--bdr);
	background: var(--w); color: var(--blue); cursor: pointer; transition: all .2s;
}
.filter-buttons button:hover { border-color: var(--blue); }
.filter-buttons button.is-active { background: var(--navy); color: #fff; border-color: var(--navy); }
/* ref .fac-filter / .fac-filter-lbl: the row carries a label, and the pills
   sit beside it rather than under it. */
.filter-buttons--labelled { align-items: center; gap: 16px 18px; margin-bottom: 22px; }
/* On a phone the label and the pills do not fit on one line, and the row
   wraps mid-list — "All" and "Baja California" on the first line with
   "Colombia" stranded below the label. The label takes a line of its own
   and the pills start together underneath it. */
@media (max-width: 600px) {
	.filter-buttons--labelled { gap: 10px; }
	.filter-buttons--labelled .filter-buttons__label { flex: 0 0 100%; margin-bottom: 2px; }
}
.filter-buttons__label {
	font-size: 10px; font-weight: 700; letter-spacing: 2.5px;
	text-transform: uppercase; color: var(--t3);
}
/* ref .fac-fbtn: 12.5px at 8px 18px, and the active pill takes the service
   rather than the house navy — this row sits on a service page, so navy was
   the one colour on it that belonged to no one. */
.filter-buttons button { font-size: 12.5px; padding: 8px 18px; color: var(--t2); }
[class*="theme-"] .filter-buttons button:hover { border-color: color-mix(in srgb, var(--svc) 40%, transparent); color: var(--svc); }
[class*="theme-"] .filter-buttons button.is-active {
	background: var(--svc); border-color: var(--svc); color: #fff;
	box-shadow: 0 3px 12px color-mix(in srgb, var(--svc) 25%, transparent);
}
/* !important because this is a visibility utility competing with layout
   rules, and it kept losing on source order alone: the carousel gives its
   cells `display: grid` at the same (0,3,0) specificity from further down
   the file, so a filtered-out facility stayed on screen. A rule whose only
   job is to remove something has to outrank whatever was arranging it. */
[data-filterable] [data-service].is-hidden { display: none !important; }

/* FAQ — one row treatment everywhere (ref .faq-item on the service pages).
   The accent follows the section's Theme; unthemed sections read house blue. */
.faq-accordion { --faq-accent: var(--svc, var(--blue)); --faq-accent-bright: var(--svc-bright, var(--sky)); }
/* ref .svc-subcat: a dotted label above each group, in the section accent */
.faq-accordion__group {
	display: flex; align-items: center; gap: 9px; margin: 36px 0 12px;
	font-family: var(--font-body); font-size: 10.5px; font-weight: 700;
	letter-spacing: 2px; text-transform: uppercase; color: var(--faq-accent);
}
.faq-accordion__group:first-child { margin-top: 0; }
.faq-accordion__group::before {
	content: ''; width: 7px; height: 7px; border-radius: 50%;
	background: var(--faq-accent); flex-shrink: 0;
}
.faq-accordion__list { background: none; border: none; box-shadow: none; padding: 0; }
.faq-item { border-bottom: 1px solid var(--bdr); }
.faq-item:first-child { border-top: 1px solid var(--bdr); }
.faq-item__question {
	font-size: 14px; font-weight: 600; color: var(--navy); line-height: 1.45;
	padding: 20px 48px 20px 0; cursor: pointer; list-style: none; position: relative;
	/* as tall as the 32px toggle, which the ref lays out as a flex child */
	min-height: 72px; display: flex; align-items: center;
}
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item__question::after {
	content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
	width: 32px; height: 32px; border-radius: 50%; line-height: 1;
	background: var(--w); border: 1.5px solid var(--bdr); color: var(--t3, #8a94a0);
	display: flex; align-items: center; justify-content: center;
	font-size: 17px; font-weight: 500; transition: all .3s;
}
.faq-item__question:hover,
html:not(.faq-js) .faq-item[open] .faq-item__question,
.faq-item.faq-open .faq-item__question { color: var(--faq-accent); }
html:not(.faq-js) .faq-item[open] .faq-item__question::after,
.faq-item.faq-open .faq-item__question::after {
	background: var(--faq-accent-bright); border-color: var(--faq-accent-bright); color: var(--navy);
	transform: translateY(-50%) rotate(45deg);
}
.faq-item__answer { padding: 0 48px 18px 0; color: var(--t2); font-size: 14.5px; max-width: 700px; }
.faq-accordion__cta { margin-top: 28px; color: var(--t2); font-size: 15px; }

/* Content + media */
.content-media__inner { display: grid; gap: 40px; align-items: center; }
.content-media__inner:has(.content-media__media) { grid-template-columns: 1fr 1fr; }
.content-media--flip .content-media__media { order: -1; }
.content-media__media { border-radius: var(--radius); overflow: hidden; box-shadow: var(--sh2); }
.content-media__quote { border-left: 3px solid var(--bari); margin: 22px 0; padding-left: 18px; font-style: italic; color: var(--navy); font-size: 16px; }
.prose { color: var(--t2); font-size: 15px; }
.prose strong { color: var(--navy); }
.prose ul { padding-left: 0; list-style: none; }
.prose ul li { padding-left: 24px; position: relative; margin-bottom: 8px; }
.prose ul li::before { content: '✓'; position: absolute; left: 0; color: var(--bari); font-weight: 700; }

/* CTA banner */
.cta-banner { background: var(--navy); border-radius: 0; color: #fff; }
.cta-banner__inner { text-align: center; }
.cta-banner .section-heading { margin-inline: auto; }
.cta-banner .section-heading__title { color: #fff; }
.cta-banner .section-heading__sub { color: var(--sky); }
.cta-banner .section-heading__eyebrow { color: var(--sky); }
.cta-banner .section-heading__eyebrow::before { background: var(--sky); }
.cta-banner__bullets { text-align: left; display: inline-block; margin-top: 8px; }
.cta-banner .checklist li { color: var(--sky); }
.cta-banner .buttons { justify-content: center; }
/* On the dark banners the emphasis, the mark and the lede all inherit
   colours picked for a light background: --blue on navy is barely a shade
   apart. They take sky, which is the contrast the reference draws. */
.cta-banner:not(.cta-banner--card) .section-heading__title em { color: var(--sky); }
.cta-banner:not(.cta-banner--card) .tv-mark--closer { color: var(--sky); opacity: .5; }
.cta-banner:not(.cta-banner--card) .section-heading__sub { max-width: 560px; margin-inline: auto; }
/* The dark banners carry a navy primary button on a navy panel, which is
   invisible — it reads as a line of bold text. It takes the sky fill the
   reference uses, with navy text. The light closer card is excluded: its
   panel is pale, so navy on it is right. */
.cta-banner:not(.cta-banner--card) .button--primary {
	background: var(--sky); color: var(--navy); border-color: var(--sky);
}
.cta-banner:not(.cta-banner--card) .button--primary:hover {
	background: #fff; border-color: #fff; color: var(--navy);
}
.cta-banner .button--secondary { color: #fff; border-color: rgba(255,255,255,.35); }
.cta-banner .button--secondary:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.contact-methods { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; margin-top: 22px; font-size: 14px; font-weight: 600; }
.cta-banner .contact-methods__item { color: var(--sky); }

/* Consultation form */
.consultation-form { background: var(--w); border-top: 1px solid var(--bdr2); }
.consultation-form__inner { display: grid; gap: 48px; grid-template-columns: 1fr 1fr; align-items: start; }
.consultation-form__form { background: var(--bg); border-radius: var(--radius); padding: 32px; border: 1px solid var(--bdr); box-shadow: var(--sh); }
.consultation-form__placeholder { color: var(--t3); font-size: 14px; }
.consultation-form__privacy { font-size: 12px; color: var(--t3); margin-top: 12px; }

/* App promo */
.app-promo { background: var(--navy); color: #fff; }
.app-promo .section-heading__title { color: #fff; }
.app-promo .section-heading__sub { color: var(--sky); }
.app-promo .section-heading__eyebrow { color: var(--sky); }
.app-promo .section-heading__eyebrow::before { background: var(--sky); }
.app-promo .checklist li { color: var(--sky); }
.app-promo__inner { display: grid; gap: 40px; grid-template-columns: 1fr 1fr; align-items: center; }
.app-promo__stores { display: flex; gap: 12px; margin-top: 22px; }
.app-promo .button--secondary { color: #fff; border-color: rgba(255,255,255,.35); }

/* Guided quiz */
.guided-quiz .container { max-width: 880px; }
.guided-quiz__steps { background: var(--w); border: 1px solid var(--bdr); border-radius: var(--radius); box-shadow: var(--sh2); padding: clamp(28px, 4vw, 48px); }
.guided-quiz__step { border: none; }
.guided-quiz__question { font-family: var(--font-head); font-size: 22px; font-weight: 700; letter-spacing: -.5px; color: var(--navy); margin-bottom: 20px; }
.guided-quiz__answers { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.guided-quiz__answer {
	font-family: var(--font-body); padding: 18px; border: 1.5px solid var(--bdr); border-radius: 14px;
	background: var(--w); font-size: 14px; font-weight: 600; color: var(--navy);
	cursor: pointer; text-align: left; transition: all .2s;
}
.guided-quiz__answer:hover { border-color: var(--bari); background: rgba(190,225,255,.12); transform: translateY(-1px); }

/* Article */
.article { background: var(--w); }
.article__header { padding-block: var(--section-pad) 16px; max-width: 780px; }
.article__type { text-transform: uppercase; letter-spacing: 2.5px; font-size: 10px; font-weight: 700; color: var(--bari); margin-bottom: 12px; }
.article__title { font-size: clamp(30px, 4vw, 46px); font-weight: 800; letter-spacing: -1.5px; line-height: 1.08; }
.article__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--t3); }
.article__author { font-weight: 600; color: var(--t2); }
.article__body { max-width: 780px; padding-block: 16px var(--section-pad); }
.article__body h2, .article__body h3 { letter-spacing: -.5px; margin-top: 1.4em; }
.article__footer { max-width: 780px; padding-bottom: var(--section-pad); }
.article__footer .cta-banner { border-radius: var(--radius); }

/* Prose page (legal) */
.page-prose { padding-block: var(--section-pad); max-width: 780px; }

/* Header */
.site-header {
	position: sticky; top: 0; z-index: 100;
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	height: 64px; padding-inline: 5%;
	background: rgba(255,255,255,.92); backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--bdr2);
}
.site-logo { display: flex; align-items: center; }
.site-logo__img { height: 30px; width: auto; }
.site-header nav ul { display: flex; flex-wrap: wrap; gap: 18px; list-style: none; margin: 0; padding: 0; }
.site-header nav a { color: var(--navy); font-size: 15px; font-weight: 500; letter-spacing: .1px; transition: color .2s; white-space: nowrap; }
.site-header nav a:hover { color: var(--blue); }
.site-header__phone {
	font-size: 12px; font-weight: 700; color: #fff; letter-spacing: .3px;
	padding: 9px 22px; background: var(--navy); border-radius: 100px; transition: all .2s; white-space: nowrap;
}
.site-header__phone:hover { background: var(--blue); }

/* Footer */
.site-footer { background: var(--navy); color: var(--sky); padding: var(--section-pad) 5% 32px; font-size: 14px; }
.site-footer :where(a) { color: #fff; }
.site-footer :where(a):hover { color: var(--sky); }
.site-footer__logo img { height: 30px; width: auto; margin-bottom: 20px; }
.site-footer__mission { max-width: 460px; color: var(--sky); opacity: .85; }
.site-footer nav ul { display: flex; flex-wrap: wrap; gap: 10px 24px; list-style: none; margin: 24px 0 0; padding: 0; font-weight: 500; }
.site-footer > p:last-child { margin-top: 24px; font-size: 12px; opacity: .55; }

@media (max-width: 860px) {
	.hero__inner:has(.hero__media),
	.content-media__inner:has(.content-media__media),
	.consultation-form__inner,
	.app-promo__inner { grid-template-columns: 1fr; }
	.content-media--flip .content-media__media { order: 0; }
	.site-header nav { display: none; }
}

/* Fidelity pass — top bar, dropdown nav, video-hero details (ref parity) */
.topbar { background: var(--navy); color: #fff; font-size: 13px; }
.topbar__inner { max-width: 1320px; margin-inline: auto; padding: 10px 5%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.topbar__phone { color: #fff; font-weight: 600; }
.topbar__announcement { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--sky); }
.topbar__announcement a { color: #fff; }
.topbar__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--stem); box-shadow: 0 0 8px var(--stem); }
.topbar__login { color: rgba(255,255,255,.65); }
.topbar__login:hover { color: #fff; }

.site-header__nav > ul > li { position: relative; }
.site-header__nav .sub-menu {
	display: none; position: absolute; top: 100%; left: -16px; z-index: 60;
	min-width: 220px; padding: 8px; margin: 0; list-style: none;
	background: var(--w); border: 1px solid var(--bdr); border-radius: 14px; box-shadow: var(--sh2);
}
.site-header__nav li:hover > .sub-menu, .site-header__nav li:focus-within > .sub-menu { display: block; }
.site-header__nav .sub-menu li { display: block; }
.site-header__nav .sub-menu a { display: block; padding: 11px 15px 13px; font-size: 14px; font-weight: 600; }
.site-header__nav .menu-item-has-children > a::after { content: ' ⌄'; font-size: 11px; color: var(--t3); display: inline-block; transform: translateY(-0.30em); margin-left: 3px; }
.site-header__cta { padding: 9px 22px; font-size: 12px; }

/* Video hero: badge-pill eyebrow, two-tone headline, sky primary button */
.hero--has-video .section-heading__eyebrow {
	border: 1px solid rgba(190,225,255,.35); border-radius: 100px;
	padding: 8px 16px; letter-spacing: 1.5px; font-size: 11px; text-transform: none;
	background: rgba(0,43,81,.35); color: #dbe9f7;
}
.hero--has-video .section-heading__eyebrow::before { width: 7px; height: 7px; border-radius: 50%; background: var(--stem); }
.hero--has-video .section-heading__title em,
.hero--has-video .section-heading__title i { font-style: normal; color: var(--baril); display: block; }
.hero--has-video .section-heading__title { letter-spacing: -2.5px; }
.hero--has-video .button--primary { background: var(--sky); border-color: var(--sky); color: var(--navy); }
.hero--has-video .button--primary:hover { background: #fff; border-color: #fff; box-shadow: 0 6px 20px rgba(190,225,255,.35); transform: translateY(-1px); }
.hero--has-video .button--secondary { border: none; padding-block: 12px; }
.hero--has-video .button--secondary::after { content: ' →'; }
.hero--has-video .buttons { gap: 22px; align-items: center; }

/* Signature service gradient cards (ref: 2×2 grid, photo top, gradient body,
   watermark number, white text) */
.card-grid--services .card-grid__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; counter-reset: svc; }
/* A pair that has become one: the second column stays empty and the card
   sits against a blank half. It takes the row instead, and its text is
   held to a readable measure so a short card does not run the full width. */
.card-grid--services .card-grid__grid:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.card-grid--services .card-grid__grid:has(> :only-child) .card > * { max-width: 68ch; }
/* The 520px floor is for a tall card standing beside another. Across the
   whole row it leaves the link stranded 200px under the text. */
.card-grid--services .card-grid__grid:has(> :only-child) .card { min-height: 0; }
.card-grid--services .card { border: none; color: #fff; position: relative; overflow: hidden; padding: 32px; counter-increment: svc; }
.card-grid--services .card::after {
	content: counter(svc, decimal-leading-zero);
	position: absolute; right: 18px; bottom: -14px;
	font-family: var(--font-head); font-weight: 900; font-size: 120px; line-height: 1;
	color: rgba(255,255,255,.10); pointer-events: none;
}
/* Gradient derived from the linked Service term's Brand color (--svc). */
.card-grid--services .card {
	--svc: var(--blue);
	/* ref .scard ramp: near-black → dark → brand → bright (145deg), derived
	   from the service term color so stem keeps its teal identity */
	background: linear-gradient(145deg, #001A33 0%, #002B51 35%, #0F4C81 70%, #1A6BB8 100%);
}
/* Ref .scard gradients verbatim; stem substitutes our teal palette into
   the same luminance roles (ref uses navy there). */
.card-grid--services .card[style*="#2CCCD3"] { background: linear-gradient(145deg, #062224 0%, #083335 35%, #008187 70%, #18AAB0 100%); }
.card-grid--services .card[style*="#1CA6DA"] { background: linear-gradient(145deg, #003650 0%, #005A7A 35%, #1CA6DA 75%, #46C1EF 100%); }
.card-grid--services .card[style*="#7C3AB7"] { background: linear-gradient(145deg, #1A0030 0%, #3E1563 40%, #5F2D8B 72%, #7C3AB7 100%); }
.card-grid--services .card[style*="#C8993A"] { background: linear-gradient(145deg, #2A1800 0%, #5C3500 40%, #9B6B20 72%, #C8993A 100%); }
.card-grid--services .card--grid-item__media { margin: -32px -32px 22px; border-radius: 0; }
.card-grid--services .card--grid-item__media img { height: 240px; }
.card-grid--services .card--grid-item__heading { color: #fff; font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; letter-spacing: -.8px; }
.card-grid--services .card--grid-item__text { color: rgba(255,255,255,.82); font-size: 15px; }
@media (max-width: 760px) { .card-grid--services .card-grid__grid { grid-template-columns: 1fr; } }

/* Google review cards (ref: colored top bar, initials avatar, G mark) */
.card--testimonial-reviews { border-top: 3px solid var(--bdr); }
.card--testimonial__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.card--testimonial__avatar {
	width: 40px; height: 40px; border-radius: 50%; flex: 0 0 40px;
	display: grid; place-items: center;
	background: var(--bg); border: 1px solid var(--bdr);
	font-family: var(--font-head); font-weight: 700; font-size: 13px; color: var(--blue);
}
.card--testimonial__head-name { display: flex; flex-direction: column; gap: 2px; font-weight: 700; color: var(--navy); font-size: 14px; }
.card--testimonial__g { margin-left: auto; flex-shrink: 0; display: inline-flex; }
.card--testimonial__g svg { width: 16px; height: 16px; }
.card--testimonial-reviews .card--testimonial__quote { font-style: italic; }

/* Video story cards (ref .sc: 9:16 portrait tile, centered play, scrim) */
.card--testimonial-video {
	border: none; color: #fff; position: relative; overflow: hidden;
	aspect-ratio: 9 / 16; min-height: 0; width: 100%;
	padding: 14px; border-radius: 16px;
	display: flex; flex-direction: column; justify-content: flex-end;
}
/* video-story sliders use narrow portrait columns (track is a grid) */
.testimonial-cards .carousel__track { grid-auto-columns: min(190px, 60%); } /* ref .sc (home) */
.testimonial-cards.theme-stem .carousel__track, .testimonial-cards.theme-plastic .carousel__track,
.testimonial-cards.theme-hair .carousel__track, .testimonial-cards.theme-bariatric .carousel__track { grid-auto-columns: min(200px, 60%); } /* service pages */
/* ref .sc is 210px; the portrait Shorts tiles above are deliberately narrower */
.testimonial-cards .carousel--story .carousel__track { grid-auto-columns: min(210px, 62%); }
.card--testimonial-video > * { position: relative; z-index: 2; }
.card--testimonial-video::before {
	content: '▶'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 46px; height: 46px; border-radius: 50%; z-index: 2;
	display: grid; place-items: center; font-size: 13px; padding-left: 3px;
	background: rgba(255,255,255,.25); border: 1.5px solid rgba(255,255,255,.55);
	color: #fff; backdrop-filter: blur(8px);
}
/* ref .scft carries the scrim itself, so it is exactly as tall as the text
   it has to make readable. Ours spread the same rgba(0,0,0,.85) over a fixed
   45% of a 9:16 card — about twice the distance, so it fell off half as fast
   and left the text sitting on far less black than the reference does.
   On the footer it also grows with the text: a detail line that wraps to two
   gets a taller scrim without anyone picking a new number. */
.card--testimonial-video .card--testimonial__chip { position: absolute; top: 12px; left: 12px; margin: 0; }
.card--testimonial-video .card--testimonial__quote { display: none; }
.card--testimonial-video .card--testimonial__outcome { font-size: 10.5px; margin: 0 0 3px; opacity: .85; }
.card--testimonial-video .card--testimonial__quote,
.card--testimonial-video .card--testimonial__meta,
.card--testimonial-video .card--testimonial__name,
.card--testimonial-video .card--testimonial__outcome,
.card--testimonial-video .card--testimonial__source,
.card--testimonial-video .card--testimonial__video { color: #fff; }
.card--testimonial-video .stars { color: #FFD97A; }

/* Punch-list pass */

/* Service card chips */
.card--grid-item__badge {
	display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 2px;
	text-transform: uppercase; color: #fff; background: rgba(6,14,24,.35);
	padding: 6px 12px; border-radius: 100px; margin-bottom: 12px;
}
.card-grid--services .card-grid__head {
	display: grid; grid-template-columns: 1.2fr 1fr; column-gap: 48px;
	align-items: end; margin-bottom: 52px;
}
.card-grid--services .card-grid__head .section-heading { margin-bottom: 0; max-width: none; }
.card-grid--services .section-heading__title { max-width: 19ch; }
.card-grid--services .card-grid__head-r { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
.card-grid--services .card-grid__head-r .section-heading__sub { max-width: 46ch; margin: 0; }
.card-grid--services .card-grid__head-r .buttons { margin: 0; }
.card-grid--services .card-grid__head-r .button { font-size: 12px; font-weight: 600; padding: 8px 20px; letter-spacing: .2px; }
@media (max-width: 760px) {
	.card-grid--services .card-grid__head { grid-template-columns: 1fr; row-gap: 20px; margin-bottom: 32px; }
	.card-grid--services .card-grid__head-r { align-items: flex-start; }
}

/* Dark (navy) component theme — ref "Why TreVita" section */
.component--dark { background: linear-gradient(180deg, #032243 0%, var(--navy) 100%); border-top: 3px solid var(--bari); }
.component--dark .section-heading__title { color: #fff; }
.component--dark .section-heading__sub { color: var(--sky); }
.component--dark .section-heading__eyebrow { color: var(--sky); }
.component--dark .section-heading__eyebrow::before { background: var(--sky); }
.component--dark .numbered-steps__step { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); box-shadow: none; }
.component--dark .numbered-steps__heading { color: #fff; }
.component--dark .numbered-steps__step p, .component--dark .numbered-steps__details { color: var(--sky); }
.component--dark .numbered-steps__step::before { color: var(--baril); }

/* Stats bar directly after a video hero reads as part of the hero (ref) */
.hero--has-video + .stats-bar { background: var(--navy); padding-block: 0 56px; }
.hero--has-video + .stats-bar .stats-bar__grid { justify-content: flex-start; gap: 48px; }
.hero--has-video + .stats-bar .stats-bar__stat {
	flex: 0 0 auto; background: transparent; border: none; box-shadow: none;
	text-align: left; padding: 0;
}
.hero--has-video + .stats-bar .stats-bar__value { color: #fff; }
.hero--has-video + .stats-bar .stats-bar__label { color: var(--sky); }
.hero--has-video { padding-block-end: 24px; }

/* Outcome ticker */
/* ref .ticker-strip: a light rule between the hero and the page, not a dark
   band across it — the hero is what should carry weight here. */
.outcome-ticker { padding-block: 20px; background: var(--w); border-block: 1px solid var(--bdr); overflow: hidden; }
.outcome-ticker__track { display: flex; width: max-content; animation: tv-ticker 40s linear infinite; }
.outcome-ticker:hover .outcome-ticker__track { animation-play-state: paused; }
.outcome-ticker__group { display: flex; }
.outcome-ticker__item { display: inline-flex; align-items: center; gap: 14px; padding: 0 40px; flex-shrink: 0; white-space: nowrap; }
.outcome-ticker__gem { width: 6px; height: 6px; transform: rotate(45deg); flex-shrink: 0; background: var(--blue); }
.outcome-ticker__txt { font-size: 12px; font-weight: 500; color: var(--t2); letter-spacing: .2px; }
.outcome-ticker__txt strong { color: var(--navy); font-weight: 700; margin-right: 6px; }
@keyframes tv-ticker { to { transform: translateX(-50%); } }

/* Hero bento cards — ref .hero-r: one wide feature tile over a pair of
   small stat tiles (community/, success-stories/). */
.hero__inner--bento { grid-template-columns: 1fr 1fr; align-items: start; gap: 32px; }
.hero__bento { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: auto; gap: 12px; }
.hero__bento-card {
	background: var(--w); border: 1px solid var(--bdr); border-radius: 18px;
	padding: 22px 20px; position: relative; overflow: hidden;
	display: flex; flex-direction: column; justify-content: space-between;
}
/* ref .hcard-sm::before / .hcard-main::before — centered gradient accent line */
.hero__bento-card::before {
	content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2;
	background: linear-gradient(90deg, transparent, var(--blue), transparent);
}
.hero__bento-card--lead {
	grid-column: 1 / -1; min-height: 240px; border-radius: 22px; padding: 30px 30px 28px;
	background: linear-gradient(145deg, #EEF5FF 0%, #F4F8FD 50%, #EAF2FA 100%);
	border-color: rgba(15,76,129,.12);
}
.hero__bento-card--lead::before { height: 4px; }
.hero__bento-card--sm { min-height: 140px; box-shadow: none; transition: box-shadow .3s, transform .3s; }
.hero__bento-card--sm:hover { box-shadow: var(--sh2); transform: translateY(-3px); }
.hero__bento-card--sm:first-of-type::before { background: linear-gradient(90deg, transparent, var(--stem), transparent); }
.hero__bento-body { position: relative; z-index: 2; }
/* ref .hcard-tag on the wide tile, .hcard-sm-label on the small ones */
.hero__bento-label {
	font-size: 9.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
	color: var(--t2); display: block; margin-bottom: 8px;
}
.hero__bento-card--lead .hero__bento-label {
	display: inline-flex; align-items: center; gap: 6px; width: fit-content;
	background: rgba(15,76,129,.1); border: 1px solid rgba(15,76,129,.18);
	color: var(--navy); padding: 4px 12px; border-radius: 100px; margin-bottom: 16px; line-height: 1.4;
}
.hero__bento-card--lead h3 {
	font-size: 22px; font-weight: 800; color: var(--navy);
	line-height: 1.15; letter-spacing: -.4px; max-width: 290px; margin: 0;
}
.hero__bento-card--lead h3 em { font-style: italic; color: var(--blue); }
/* a small tile with no explicit label falls back to its title for one */
.hero__bento-card--sm h3 {
	font-family: var(--font-body); font-size: 9.5px; font-weight: 700;
	letter-spacing: 2px; text-transform: uppercase; color: var(--t2); line-height: 1.35; margin: 0 0 8px;
}
.hero__bento-num { font-family: var(--font-head); font-size: 30px; font-weight: 800; letter-spacing: -1.2px; color: var(--navy); line-height: 1; margin: 0; }
.hero__bento-num em { color: var(--blue); font-style: normal; }
.hero__bento-sub { font-size: 10.5px; color: var(--t2); line-height: 1.5; margin: 5px 0 0; }
.hero__bento-foot { position: relative; z-index: 2; margin-top: 20px; display: flex; align-items: center; justify-content: space-between; }
.hero__bento-meta { font-size: 12px; color: #7A8D9F; font-weight: 500; }
.hero--has-video .hero__bento-card { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); backdrop-filter: blur(8px); }
.hero--has-video .hero__bento-card h3, .hero--has-video .hero__bento-num { color: #fff; }
.hero--has-video .hero__bento-sub, .hero--has-video .hero__bento-label, .hero--has-video .hero__bento-meta { color: var(--sky); }

/* ref .hvis: orbiting "+1" diamonds behind the wide tile */
.hero__cluster { position: absolute; top: 0; right: 0; bottom: 0; width: 40%; pointer-events: none; z-index: 1; display: flex; align-items: center; justify-content: center; }
.hero__cluster-glow { position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(15,76,129,.18) 0%, transparent 65%); filter: blur(20px); }
.hero__cluster-ring { position: absolute; border: 1px dashed rgba(15,76,129,.18); border-radius: 50%; }
.hero__cluster-ring--1 { width: 80%; aspect-ratio: 1; animation: tv-spin 60s linear infinite; }
.hero__cluster-ring--2 { width: 62%; aspect-ratio: 1; border-style: solid; border-color: rgba(15,76,129,.1); }
.hero__cluster-ring--3 { width: 46%; aspect-ratio: 1; animation: tv-spin 90s linear infinite reverse; }
@keyframes tv-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.hero__cluster-d {
	position: absolute; width: 46px; height: 46px; border-radius: 50%;
	background: rgba(15,76,129,.12); border: 1px solid rgba(15,76,129,.28);
	display: flex; align-items: center; justify-content: center; backdrop-filter: blur(10px);
	font-family: var(--font-head); font-weight: 800; font-size: 9.5px; letter-spacing: .5px; color: var(--blue);
}
.hero__cluster-d--you { top: 8%; left: 42%; background: rgba(15,76,129,.18); border-color: rgba(15,76,129,.4); color: var(--navy); font-size: 10px; }
.hero__cluster-d--2 { top: 24%; right: 10%; }
.hero__cluster-d--3 { bottom: 24%; right: 14%; }
.hero__cluster-d--4 { bottom: 8%; left: 38%; }
.hero__cluster-d--5 { bottom: 24%; left: 10%; }
.hero__cluster-d--6 { top: 24%; left: 8%; }
.hero__cluster-mark { position: relative; z-index: 2; display: flex; filter: drop-shadow(0 6px 18px rgba(15,76,129,.25)); }
.hero__cluster-mark .tv-mark--cluster { width: 56px; height: auto; color: var(--blue); }
.tv-noanim .hero__cluster-ring { animation: none; }
@media (prefers-reduced-motion: reduce) { .hero__cluster-ring { animation: none; } }
@media (max-width: 1100px) { .hero__inner--bento { grid-template-columns: 1fr; } }
@media (max-width: 768px) { .hero__bento { grid-template-columns: 1fr; } .hero__cluster { display: none; } }

/* Footer columns (ref layout) */
.site-footer__inner {
	max-width: 1320px; margin-inline: auto;
	display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px;
}
.site-footer__col h4 { color: #fff; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-family: var(--font-body); font-weight: 700; margin-bottom: 14px; }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer__col a { font-size: 14px; color: rgba(255,255,255,.75); font-weight: 400; }
.site-footer__col a:hover { color: #fff; }
.site-footer__bottom { max-width: 1320px; margin: 48px auto 0; border-top: 1px solid rgba(255,255,255,.12); padding-top: 24px; }
.site-footer__legal-menu { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; margin: 0 0 16px; padding: 0; }
.site-footer__legal-menu a { font-size: 12px; color: rgba(255,255,255,.6); }
.site-footer__copyright { font-size: 12px; opacity: .55; margin-top: 16px; }
@media (max-width: 860px) { .site-footer__inner { grid-template-columns: 1fr 1fr; } }

/* Scroll-in animation (ref data-r fade-up) */
@media (prefers-reduced-motion: no-preference) {
	.tv-reveal { opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s ease; }
	.tv-reveal.in-view { opacity: 1; transform: none; }
}

/* Cycling hero word (ref .cyc / .cw: the word slides up inside a clipped
   slot). The slot's box differs per hero; the slide itself is shared. */
.section-heading__title em[data-words] {
	position: relative; display: inline-block; overflow: hidden;
	height: 1.28em; line-height: 1.28; vertical-align: -.3em;
	white-space: nowrap; padding-right: .18em;
}
.hero--display .section-heading__title em[data-words] { display: block; height: 1.4em; line-height: 1.4; vertical-align: baseline; margin-top: .04em; padding-right: 0; }
/* A cycling word changes how the heading wraps, so the whole page moved
   every few seconds: "change lives." sits on one line where "change
   families." takes two. Reserve the taller state so the words swap inside
   a box that does not move.

   Three lines here is two ordinary ones plus the cycler's own, which runs
   taller than the rest (1.28 against the title's .99) because it is an
   inline-block clipping its words. Both numbers are the ones declared
   above, in em, so this tracks the clamped font size at every width.

   Only where the cycler is inline-block: --display and --has-video already
   give it a line of its own, so their headings never reflow and a floor
   would only add space under them. */
@media (min-width: 861px) {
	.hero:not(.hero--display):not(.hero--has-video) .section-heading__title:has(em[data-words]) {
		min-height: calc(2 * .99em + 1.28em);
	}
}
.hero--has-video .section-heading__title em[data-words] { display: block; height: 1.15em; line-height: 1.15; vertical-align: baseline; margin-top: .04em; padding-right: 0; }
.section-heading__title .cw {
	position: absolute; left: 0; top: 0; white-space: nowrap;
	transform: translateY(110%); opacity: 0;
	transition: transform .55s cubic-bezier(.16,1,.3,1), opacity .3s;
}
.section-heading__title .cw.on { position: relative; transform: translateY(0); opacity: 1; }
.section-heading__title .cw.off {
	position: absolute; transform: translateY(-110%); opacity: 0;
	transition: transform .42s cubic-bezier(.7,0,.85,1), opacity .25s;
}
@media (prefers-reduced-motion: reduce) { .section-heading__title .cw { transition: none; } }
.tv-noanim .section-heading__title .cw { transition: none; }

/* Per-block spacing utilities (Padding/Margin selects on every component) */
.component.pt-none { padding-top: 0; }
.component.pt-sm { padding-top: var(--sp-sm); }
.component.pt-md { padding-top: var(--sp-md); }
.component.pt-lg { padding-top: var(--sp-lg); }
.component.pb-none { padding-bottom: 0; }
.component.pb-sm { padding-bottom: var(--sp-sm); }
.component.pb-md { padding-bottom: var(--sp-md); }
.component.pb-lg { padding-bottom: var(--sp-lg); }
.component.mt-sm { margin-top: var(--sp-sm); }
.component.mt-md { margin-top: var(--sp-md); }
.component.mt-lg { margin-top: var(--sp-lg); }
.component.mb-sm { margin-bottom: var(--sp-sm); }
.component.mb-md { margin-bottom: var(--sp-md); }
.component.mb-lg { margin-bottom: var(--sp-lg); }

/* Re-asserted after utilities so coupled sections stay coupled */
.hero--has-video { padding-block-end: 24px; }
.hero--has-video + .stats-bar { background: var(--navy); padding-block: 0 44px; }
.outcome-ticker { padding-block: 18px; }
.social-proof { padding-block: 28px; }
.social-proof__label { font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--t3); }
.social-proof__logo-text { border: 1px solid var(--bdr); border-radius: 8px; padding: 8px 14px; display: inline-block; }
/* auto-fit, not auto-fill: two cards fill the row as the ref's 1fr 1fr
   rather than leaving an empty third track. */
.team-grid__row { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* Carousel polish: room for card shadows (no hard clip top/bottom) and
   soft transparent fade at the sides instead of a hard cut-off. */
.carousel__track {
	padding: 32px 40px 72px;
	margin: -32px -40px -60px;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.carousel__track { scroll-padding-inline: 40px; }
/* Arrows straddle the snapped card edge 50/50 — never over text */
.carousel__arrow--prev { left: -21px; }
.carousel__arrow--next { right: -21px; }

/* FAQ hover: the question takes the section accent (set with the rest of
   the row treatment above; the toggle keeps its own .3s transition). */
.faq-item__question { transition: color .2s ease; }

/* ── PX pass: home hero rebuilt to reference .vhero spec ─────────────── */
.hero--has-video {
	display: flex; align-items: center;
	min-height: 600px; height: calc(100vh - 105px); max-height: 820px;
	padding-block: 0;
}
.hero--has-video .hero__inner { width: 100%; }
.hero__scrim {
	background:
		linear-gradient(90deg, rgba(0,18,36,.84) 0%, rgba(0,24,46,.55) 46%, rgba(0,30,58,.22) 100%),
		linear-gradient(0deg, rgba(0,15,30,.6) 0%, transparent 42%);
}
.hero--has-video::after {
	content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; z-index: 4;
	background: linear-gradient(90deg, var(--blue) 0%, var(--bari) 35%, var(--stem) 65%, var(--sky) 100%);
}
.hero--has-video .section-heading__title { font-size: clamp(44px, 6vw, 80px); line-height: 1.02; margin-bottom: 22px; }
.hero--has-video .section-heading__sub {
	font-size: clamp(15px, 1.5vw, 18px); line-height: 1.7;
	color: rgba(224,238,255,.88); max-width: 580px; margin-bottom: 0;
}
.hero--has-video .buttons { margin-top: 34px; gap: 12px 22px; }
.hero--has-video .button--primary {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 16px 32px; font-size: 14.5px; letter-spacing: .2px;
}
.hero--has-video .button--primary::before {
	content: ''; width: 17px; height: 17px; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.hero--has-video .button--secondary { font-size: 14px; padding: 15px 6px; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; margin-top: 46px; }
.hero__trust-item { display: flex; align-items: center; gap: 11px; }
.hero__trust-item .stars { font-size: 11px; letter-spacing: 1.5px; color: #E8B93E; }
.hero__trust-n { font-family: var(--font-head); font-size: 23px; font-weight: 800; color: #fff; letter-spacing: -.5px; line-height: 1; }
.hero__trust-l { font-size: 11px; color: rgba(190,225,255,.72); font-weight: 500; line-height: 1.35; max-width: 120px; }
.hero__trust-div { width: 1px; height: 32px; background: rgba(190,225,255,.2); }
/* Certs card (reference .certs-box) directly after the video hero */
.hero--has-video + .social-proof { background: transparent; border: none; padding: 0 5% 28px; }
.hero--has-video + .social-proof .social-proof__inner {
	background: var(--w); border: 1px solid var(--bdr); border-radius: 18px;
	padding: 24px 32px; flex-direction: column; gap: 16px; max-width: 1320px; margin-inline: auto;
}
.hero--has-video + .social-proof .social-proof__label { font-size: 9.5px; color: var(--blue); }
/* Topbar announcement details */
.topbar__announcement strong { color: #fff; }
.topbar__announcement a { color: #fff; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; margin-left: 4px; }
.topbar__phone { display: inline-flex; align-items: center; gap: 8px; }
/* Screenshot mode (?tvnoanim=1): freeze reveals and cycling */
.tv-noanim .tv-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
.tv-noanim .outcome-ticker__track { animation: none !important; }

/* ══ PX pass 2 — section-by-section parity with the reference build ══ */

/* Topbar (ref .ann) */
.topbar { font-size: 11.5px; font-weight: 500; letter-spacing: .2px; color: rgba(190,225,255,.75); }
.topbar__inner { gap: 24px; }
.topbar__phone { font-weight: 700; font-size: 11.5px; }
.topbar__announcement { flex: 1; justify-content: center; color: rgba(190,225,255,.75); }
.topbar__announcement a { color: var(--sky); text-decoration-color: rgba(190,225,255,.3); }
.topbar__dot { width: 6px; height: 6px; box-shadow: none; background: var(--baril); }
.topbar__login { color: rgba(190,225,255,.6); font-size: 11.5px; }

/* Header (ref nav) */
.site-header { background: rgba(246,248,251,.95); backdrop-filter: blur(20px); border-bottom-color: var(--bdr); }
.site-logo__img { height: 46px; }
.site-header__right { display: flex; align-items: center; gap: 22px; }
.site-header__phone-link { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--navy); white-space: nowrap; transition: color .2s; }
.site-header__phone-link svg { color: var(--blue); flex-shrink: 0; }
.site-header__phone-link:hover { color: var(--blue); }
@media (max-width: 1100px) { .site-header__phone-link { display: none; } }

/* Hero: keep "Transform your life" on one line (ref .vhero-h1 max-width 820px) */
.hero--has-video { height: calc(100vh - 64px); }
.hero--has-video .section-heading { max-width: 820px; }
.hero--has-video .section-heading__title em,
.hero--has-video .section-heading__title i { color: #8FD4F0; }

/* Certs card (ref .certs-box): 1176px box, dashed logo placeholders + pills */
.hero--has-video + .social-proof .social-proof__inner { max-width: 1176px; padding: 24px 32px; gap: 16px; }
/*
 * Real accreditation marks come in whatever shape their issuer chose — a
 * circular seal beside a long wordmark. Sizing them by height alone left
 * the seal a dot next to a banner, so each gets the same box to sit in and
 * fits itself inside it. How big that box is, and how far apart, is the
 * editor's call: a row of six wordmarks wants different treatment from two
 * seals, and no single number is right for both.
 */
.social-proof__logos {
	justify-content: center;
	--sp-logo-h: 34px; --sp-logo-w: 132px;
	gap: 10px var(--sp-logo-gap, 26px);
}
.social-proof__logos--sm { --sp-logo-h: 26px; --sp-logo-w: 104px; }
.social-proof__logos--lg { --sp-logo-h: 46px; --sp-logo-w: 172px; }
.social-proof__logos--gap-sm { --sp-logo-gap: 14px; }
.social-proof__logos--gap-lg { --sp-logo-gap: 44px; }
.social-proof__logos li {
	display: flex; align-items: center; justify-content: center;
	height: var(--sp-logo-h); min-width: 60px;
}
.social-proof__logos li img {
	max-height: 100%; max-width: var(--sp-logo-w); height: auto; width: auto;
	object-fit: contain;
}
.social-proof__pills { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; list-style: none; margin: 0; padding: 0; }
.social-proof__pill { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; color: var(--t2); background: rgba(15,76,129,.05); border: 1px solid rgba(15,76,129,.1); padding: 5px 14px; border-radius: 100px; }
.social-proof__pill::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--blue); display: block; flex-shrink: 0; }

/* Services grid (ref .services/.scard) */
.card-grid--services { background: linear-gradient(180deg, var(--bg) 0%, #EEF5FF 50%, var(--bg) 100%); }
.card-grid--services .card-grid__grid { gap: 14px; }
.card-grid--services .card { border-radius: 22px; display: flex; flex-direction: column; min-height: 520px; }
.card-grid--services .card--grid-item__media { margin: -32px -32px 26px; }
.card-grid--services .card--grid-item__media img { height: 220px; filter: saturate(.78) contrast(1.05) brightness(1.02) sepia(.14); }
.card-grid--services .card--grid-item__heading { font-size: 24px; letter-spacing: -.5px; margin: 0 0 10px; }
.card-grid--services .card--grid-item__badge {
	align-self: flex-start; font-size: 9px; letter-spacing: 2.5px; padding: 5px 12px;
	background: rgba(255,255,255,.12); margin-bottom: 20px;
}
.card-grid--services .card {
	/* ref derives .stag and .scard-link from one pale value per service. */
	/* The fallback matters: an unset --svc makes color-mix invalid at
	   computed-value time, which would drop the link to inherited colour. */
	--svc-tint: color-mix(in srgb, var(--svc, #0F4C81) 35%, #fff);
}
.card-grid--services .card .card--grid-item__badge {
	color: var(--svc-tint);
	border: 1px solid color-mix(in srgb, var(--svc) 30%, transparent);
}
.card-grid--services .card--grid-item__text { font-size: 13px; line-height: 1.8; color: rgba(255,255,255,.6); margin: 0; }

/* ref .scard-link: the service's own pale tint, a shade under the chip's.
   It was #fff, which read as a fifth colour on a card built from one. */
.card-grid--services .card--grid-item__link {
	margin-top: auto; padding-top: 22px; font-size: 12px; letter-spacing: .3px;
	color: color-mix(in srgb, var(--svc-tint) 88%, transparent);
}
/* ref .scard-body.sm h3: the lower pair sit a step smaller, which is what
   keeps "Bariatric Surgery" on one line there and not here. */
.card-grid--services .card-grid__grid[data-count="4"] .card:nth-child(n+3) .card--grid-item__heading { font-size: 20px; }
.card-grid--services .card::after { font-size: 100px; letter-spacing: -5px; right: 16px; bottom: -10px; }

/* Quiz (ref .quiz — dark glass card on navy) */
.guided-quiz { background: var(--navy); position: relative; overflow: hidden; }
.guided-quiz::before { content: ''; position: absolute; top: -180px; left: 50%; transform: translateX(-50%); width: 900px; height: 900px; border-radius: 50%; background: radial-gradient(ellipse, rgba(28,166,218,.45) 0%, rgba(15,76,129,.6) 35%, transparent 65%); pointer-events: none; }
.guided-quiz::after { content: ''; position: absolute; bottom: -60px; right: 4%; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(ellipse, rgba(44,204,211,.18) 0%, rgba(190,225,255,.06) 50%, transparent 70%); pointer-events: none; }
.guided-quiz .container { max-width: 660px; position: relative; z-index: 2; padding-inline: 0; }
.guided-quiz .section-heading { text-align: center; margin: 0 auto 36px; max-width: none; }
.guided-quiz .section-heading__eyebrow { color: rgba(190,225,255,.45); }
.guided-quiz .section-heading__eyebrow::before { background: rgba(190,225,255,.3); }
.guided-quiz .section-heading__title { color: #fff; font-size: clamp(32px, 4vw, 50px); letter-spacing: -1.5px; line-height: 1.04; margin-bottom: 10px; }
.guided-quiz .section-heading__sub { font-size: 14.5px; color: rgba(190,225,255,.45); line-height: 1.8; margin-top: 0; }
.guided-quiz__steps { background: rgba(255,255,255,.06); border: 1.5px solid rgba(190,225,255,.22); border-radius: 22px; padding: 38px 40px; backdrop-filter: blur(16px); box-shadow: 0 0 60px rgba(28,166,218,.18), 0 0 120px rgba(15,76,129,.25); }
.guided-quiz__progress { display: flex; gap: 5px; margin-bottom: 26px; }
.guided-quiz__seg { height: 3px; flex: 1; border-radius: 2px; background: rgba(190,225,255,.15); }
.guided-quiz__seg.is-on { background: var(--sky); }
.guided-quiz__question { font-size: 19px; color: #fff; margin-bottom: 22px; line-height: 1.35; letter-spacing: 0; }
.guided-quiz__answers { grid-template-columns: 1fr 1fr; gap: 9px; }
.guided-quiz__answer { background: rgba(255,255,255,.04); border: 1.5px solid rgba(190,225,255,.15); color: rgba(190,225,255,.65); padding: 13px 16px; border-radius: 10px; font-size: 13px; font-weight: 500; line-height: 1.4; }
.guided-quiz__answer:hover { border-color: rgba(190,225,255,.5); color: #fff; background: rgba(190,225,255,.1); transform: none; }
.guided-quiz__answer.is-picked { background: rgba(28,166,218,.22); border-color: var(--bari); color: #fff; font-weight: 600; }
.guided-quiz__foot { margin-top: 22px; display: flex; justify-content: flex-end; }
.guided-quiz__next { background: var(--sky); color: var(--navy); border: none; padding: 11px 28px; border-radius: 100px; font-weight: 700; font-size: 12.5px; cursor: pointer; font-family: var(--font-body); letter-spacing: .3px; transition: all .2s; }
.guided-quiz__next:hover { background: #fff; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(190,225,255,.2); }
@media (max-width: 768px) { .guided-quiz__answers { grid-template-columns: 1fr; } .guided-quiz .container { padding-inline: 5%; } }

/* Testimonials (ref .testi): heading row + rating badge, small top-right arrows */
.testimonial-carousel__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 40px; }
.testimonial-carousel__head .section-heading { margin-bottom: 0; }
.testimonial-carousel__head .section-heading__sub { display: none; } /* shown inside the badge (ref .tbs-note) */
.testimonial-carousel .section-heading__title { font-size: clamp(30px, 3.5vw, 46px); letter-spacing: -1.2px; }
.testimonial-badge { display: flex; align-items: center; gap: 14px; background: var(--bg); border: 1px solid var(--bdr); border-radius: 14px; padding: 14px 22px; }
.testimonial-badge__stars { color: #F5C518; font-size: 14px; letter-spacing: 2px; display: block; line-height: 1.2; }
.testimonial-badge__n { font-family: var(--font-head); font-size: 26px; font-weight: 800; letter-spacing: -1px; color: var(--navy); display: block; line-height: 1.1; }
.testimonial-badge__l { font-size: 10px; font-weight: 500; color: var(--t2); display: block; }
.testimonial-badge__div { width: 1px; height: 36px; background: var(--bdr); }
.testimonial-badge__trust { font-size: 10.5px; font-weight: 700; color: var(--blue); background: rgba(15,76,129,.08); padding: 4px 12px; border-radius: 100px; display: inline-block; }
.testimonial-badge__note { font-size: 10.5px; color: var(--navy); max-width: 180px; line-height: 1.55; font-style: italic; margin: 4px 0 0; }
.testimonial-badge__cta { background: var(--navy); color: #fff; font-size: 11.5px; font-weight: 700; padding: 9px 20px; border-radius: 100px; border: 1.5px solid var(--navy); transition: all .2s; white-space: nowrap; }
.testimonial-badge__cta:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.testimonial-carousel .carousel__arrow { width: 32px; height: 32px; font-size: 13px; color: var(--t3); border: 1.5px solid var(--bdr); box-shadow: none; }
.testimonial-carousel .carousel__arrow:hover { color: var(--blue); border-color: var(--blue); }
.testimonial-carousel .carousel__arrow--prev { left: auto; right: 39px; top: -46px; }
.testimonial-carousel .carousel__arrow--next { right: 0; top: -46px; }

/* Google review cards (ref .rc) — data-service slugs are full ("bariatric-surgery") */
.card--testimonial-reviews { border-top-width: 5px; border-radius: 16px; padding: 22px; }
.card--testimonial__avatar { width: 36px; height: 36px; flex-basis: 36px; font-size: 11px; background: var(--blue); border: none; color: #fff; }
.card--testimonial__head-name { font-size: 12px; }
.card--testimonial__head-name .stars { color: #F5C518; font-size: 11px; letter-spacing: 1px; }
.card--testimonial-reviews .card--testimonial__quote { font-size: 12.5px; line-height: 1.8; margin: 0 0 10px; }
.card--testimonial-reviews .card--testimonial__meta { font-size: 9.5px; font-weight: 600; letter-spacing: .3px; color: var(--t3); }

/* Why TreVita (ref .why): two-column, sticky intro, accent-bordered rows */
.numbered-steps.component--dark { background: var(--navy); border-top: 4px solid var(--bari); position: relative; overflow: hidden; }
.numbered-steps.component--dark::before { content: ''; position: absolute; top: -100px; right: -8%; width: 700px; height: 700px; border-radius: 50%; background: radial-gradient(ellipse, rgba(44,204,211,.18) 0%, rgba(15,76,129,.35) 40%, transparent 68%); pointer-events: none; }
.numbered-steps.component--dark::after { content: ''; position: absolute; bottom: -60px; left: 3%; width: 450px; height: 450px; border-radius: 50%; background: radial-gradient(ellipse, rgba(28,166,218,.22) 0%, rgba(15,76,129,.3) 45%, transparent 68%); pointer-events: none; }
.numbered-steps.component--dark .container { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(48px, 7vw, 100px); align-items: start; position: relative; z-index: 2; }
.numbered-steps.component--dark .section-heading { position: static; margin-bottom: 0; }
.numbered-steps.component--dark .numbered-steps__intro { position: sticky; top: 80px; padding-top: 4px; }
.numbered-steps.component--dark .section-heading__eyebrow { color: rgba(190,225,255,.62); font-size: 11px; }
.numbered-steps.component--dark .section-heading__eyebrow::before { background: rgba(190,225,255,.3); }
.numbered-steps.component--dark .section-heading__title { font-size: clamp(32px, 3.8vw, 50px); margin-bottom: 16px; }
.numbered-steps.component--dark .section-heading__sub { font-size: 16px; color: rgba(190,225,255,.7); line-height: 1.75; margin-top: 0; }
.numbered-steps.component--dark .numbered-steps__list { gap: 0; }
.numbered-steps.component--dark .numbered-steps__step {
	background: transparent; border: none; box-shadow: none; border-radius: 0;
	border-bottom: 1px solid rgba(190,225,255,.07);
	border-left: 4px solid var(--bari);
	padding: 32px 0 32px 90px;
}
.numbered-steps.component--dark .numbered-steps__step:first-child { border-top: 1px solid rgba(190,225,255,.07); }
.numbered-steps.component--dark .numbered-steps__step::before { left: 20px; top: 34px; font-size: 13px; letter-spacing: .5px; color: var(--bari); }
.numbered-steps.component--dark .numbered-steps__step:nth-child(2) { border-left-color: var(--stem); }
.numbered-steps.component--dark .numbered-steps__step:nth-child(2)::before { color: var(--stem); }
.numbered-steps.component--dark .numbered-steps__step:nth-child(3) { border-left-color: var(--sky); }
.numbered-steps.component--dark .numbered-steps__step:nth-child(3)::before { color: var(--sky); }
.numbered-steps.component--dark .numbered-steps__step:nth-child(4) { border-left-color: var(--baril); }
.numbered-steps.component--dark .numbered-steps__step:nth-child(4)::before { color: var(--baril); }
.numbered-steps.component--dark .numbered-steps__step:nth-child(5) { border-left-color: var(--bari); }
.numbered-steps.component--dark .numbered-steps__step:nth-child(5)::before { color: var(--bari); }
.numbered-steps.component--dark .numbered-steps__heading { font-size: 16px; letter-spacing: -.2px; margin-bottom: 7px; line-height: 1.25; }
.numbered-steps.component--dark .numbered-steps__step p { font-size: 16px; line-height: 1.75; color: rgba(190,225,255,.7); }
@media (max-width: 1100px) {
	.numbered-steps.component--dark .container { grid-template-columns: 1fr; gap: 56px; }
	.numbered-steps.component--dark .numbered-steps__intro { position: static; }
}

/* Experience cards (ref .exp/.ecard): gradient video tile above each card body */
.home .card-grid--features { background: linear-gradient(180deg, var(--bg) 0%, #EBF5FF 50%, var(--bg) 100%); }
.home .card-grid--features .section-heading { display: grid; grid-template-columns: 1fr auto; column-gap: 30px; align-items: end; max-width: none; margin-bottom: 48px; }
.home .card-grid--features .section-heading__eyebrow { grid-column: 1; grid-row: 1; }
.home .card-grid--features .section-heading__title { grid-column: 1; grid-row: 2; font-size: clamp(30px, 3.5vw, 46px); letter-spacing: -1.2px; max-width: 21ch; }
.home .card-grid--features .section-heading__sub { grid-column: 2; grid-row: 2; align-self: end; font-size: 14px; line-height: 1.8; max-width: 360px; margin: 0; }
.home .card-grid--features .card-grid__grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
.home .card-grid--features .card { padding: 0 0 20px; border-radius: 18px; overflow: hidden; position: relative; }
/* The panel used to be drawn with pseudo-elements — ::before painted a
   gradient with a radial-gradient circle for the play mark, ::after set
   'Watch' over it. It looked right and could never do anything: a
   pseudo-element cannot hold a video, take a click target, or be read by a
   screen reader, and its text does not exist in the DOM at all. Replaced by
   real markup that opens the player. The gradients moved with it. */
.home .card-grid--features .card--grid-item__heading { font-size: 13px; letter-spacing: -.1px; margin: 0 18px 5px; }
.home .card-grid--features .card--grid-item__text { font-size: 11.5px; line-height: 1.65; margin: 0 18px; }
@media (max-width: 1100px) { .home .card-grid--features .card-grid__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) {
	.home .card-grid--features .section-heading { grid-template-columns: 1fr; }
	.home .card-grid--features .section-heading__sub { grid-column: 1; grid-row: 3; }
	/* Ref @768: one-at-a-time swipe carousel (.exp-grid → flex + scroll-snap) */
	.home .card-grid--features .card-grid__grid {
		display: flex; grid-template-columns: none;
		overflow-x: auto; -webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory; scroll-padding: 0 5%;
		gap: 14px; padding-bottom: 8px;
	}
	.home .card-grid--features .card-grid__grid::-webkit-scrollbar { height: 0; }
	.home .card-grid--features .card { flex: 0 0 84%; scroll-snap-align: center; }
}

/* Included band (ref .incl) — restyled cta-banner, tied to the experience grid */
.home .cta-banner { background: transparent; color: inherit; padding-block: 0; margin-top: calc(-1 * var(--sp-md) + 16px); padding-bottom: var(--sp-md); }
.home .cta-banner__inner { text-align: left; }
/* the CARD is an inner box, so its edges sit exactly on the content line
   (painting it on the container misaligned it at every width) */
.home .cta-banner__box {
	position: relative;
	background: linear-gradient(135deg, rgba(15,76,129,.1) 0%, rgba(28,166,218,.08) 50%, rgba(190,225,255,.14) 100%);
	border: 1.5px solid rgba(15,76,129,.2); border-radius: 18px; padding: 28px 34px;
}
.home .cta-banner .section-heading { margin: 0 0 20px; max-width: none; }
.home .cta-banner .section-heading__title { color: var(--blue); font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; line-height: 1.4; margin: 0; }
.home .cta-banner .section-heading__sub { position: absolute; top: 28px; right: 34px; margin: 0; background: var(--blue); color: #fff; font-size: 9.5px; font-weight: 700; padding: 4px 13px; border-radius: 100px; }
.home .cta-banner__bullets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0; }
.home .cta-banner .checklist li { color: var(--t1); font-size: 12.5px; line-height: 1.6; font-weight: 500; padding-left: 16px; margin: 0; }
.home .cta-banner .checklist li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); top: 6px; opacity: .8; }
@media (max-width: 1100px) { .home .cta-banner__bullets { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) { .home .cta-banner__bullets { grid-template-columns: 1fr; } }

/* Contact (ref .contact): light bg, 1fr/1.15fr, white form card, pill channels */
.consultation-form { background: var(--bg); border-top: 1px solid var(--bdr); }
.consultation-form__inner { max-width: 1100px; grid-template-columns: 1fr 1.15fr; gap: 80px; padding-inline: 0; }
@media (max-width: 1180px) { .consultation-form__inner { padding-inline: 5%; } }
.consultation-form .section-heading__title { font-size: clamp(32px, 4vw, 52px); line-height: 1.06; letter-spacing: -1.5px; }
.consultation-form .section-heading__sub { font-size: 14.5px; line-height: 1.85; max-width: 400px; }
.consultation-form .contact-methods { justify-content: flex-start; margin-top: 36px; gap: 10px; }
.consultation-form .contact-methods__item { display: inline-flex; align-items: center; gap: 8px; background: var(--w); border: 1.5px solid var(--bdr); color: var(--t2); padding: 10px 18px; border-radius: 100px; font-size: 12px; font-weight: 600; transition: all .2s; }
.consultation-form .contact-methods__item:hover { border-color: var(--blue); color: var(--blue); background: rgba(15,76,129,.04); }
.consultation-form__form { background: var(--w); border: 1px solid var(--bdr); border-radius: 22px; padding: 42px 38px; box-shadow: var(--sh2); }

/* Footer (ref canonical footer) */
.site-footer { background: #010D1C; border-top: 1px solid rgba(190,225,255,.06); padding: 60px 5% 28px; font-size: 13px; }
.site-footer__inner { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 52px; }
.site-footer__logo { margin: 0; }
.site-footer__logo img { height: 46px; margin-bottom: 18px; }
.site-footer__mission { font-size: 13px; color: rgba(190,225,255,.8); line-height: 1.85; max-width: 280px; opacity: 1; margin-bottom: 18px; }
.site-footer__pills { display: flex; gap: 7px; flex-wrap: wrap; margin: 0 0 16px; }
/* inline-flex with a gap: the star is an emoji, and its glyph box carries
   almost no side bearing, so a plain space renders flush against the word. */
.site-footer__pill { display: inline-flex; align-items: center; gap: 5px; background: rgba(190,225,255,.08); border: 1px solid rgba(190,225,255,.18); color: rgba(190,225,255,.7); padding: 5px 12px; border-radius: 100px; font-size: 10px; font-weight: 600; line-height: normal; transition: all .2s; }
.site-footer__pill:hover { color: rgba(190,225,255,.95); border-color: rgba(190,225,255,.35); }
.site-footer__soc { display: flex; gap: 8px; }
/* The marks draw in currentColor, so the colour lives here and the hover
   brightens the icon as well as its box. */
.site-footer__sb { width: 34px; height: 34px; border-radius: 8px; border: 1px solid color-mix(in srgb, currentColor 45%, transparent); display: flex; align-items: center; justify-content: center; background: rgba(190,225,255,.06); color: rgba(190,225,255,.5); transition: all .2s; }
.site-footer__sb:hover { border-color: currentColor; background: color-mix(in srgb, currentColor 14%, transparent); }
/* Each glyph in its own brand colour so the row stands out. Declared after
   the hover rule (equal specificity) so the colour holds on hover too, while
   the box still brightens. */
.site-footer__sb[data-net="instagram"] { color: #E4405F; }
.site-footer__sb[data-net="facebook"]  { color: #1877F2; }
.site-footer__sb[data-net="tiktok"]    { color: #25F4EE; }
.site-footer__sb[data-net="youtube"]   { color: #FF0000; }
.site-footer__sb[data-net="linkedin"]  { color: #0A66C2; }
.site-footer__sb svg { width: 15px; height: 15px; }
.site-footer__col h4 { font-size: 9px; letter-spacing: 2.5px; line-height: normal; color: rgba(190,225,255,.72); margin-bottom: 16px; }
.site-footer__col nav ul { display: block; margin: 0; }
.site-footer__col nav li { margin-bottom: 9px; }
.site-footer__col a { font-size: 13px; color: rgba(190,225,255,.82); }
.site-footer__col a:hover { color: rgba(190,225,255,.95); }
.site-footer__bottom { margin-top: 52px; border-top: 1px solid rgba(190,225,255,.1); padding-top: 26px; }
.site-footer__legal-menu { justify-content: center; gap: 8px 20px; margin: 0 0 16px; }
.site-footer__legal-menu a { font-size: 11px; color: rgba(190,225,255,.8); }
.site-footer__legal-menu a:hover { color: rgba(190,225,255,.85); }
.site-footer__copyright { text-align: center; font-size: 11px; line-height: normal; color: rgba(190,225,255,.62); opacity: 1; margin-top: 0; }

/* ── Mobile menu (ref pattern: burger → white dropdown panel) ────────── */
.site-header__burger { display: none; }
@media (max-width: 860px) {
	.topbar__announcement { display: none; }
	.site-header { position: sticky; }
	.site-header__burger {
		display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
		width: 40px; height: 40px; padding: 8px;
		background: none; border: none; cursor: pointer;
	}
	.site-header__burger span { display: block; height: 2.5px; width: 100%; background: var(--navy); border-radius: 2px; transition: transform .25s, opacity .2s; }
	.site-header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
	.site-header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
	.site-header__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
	.site-header__phone-link { display: none; }
	.site-header__cta { padding: 9px 18px; }
	/* Panel */
	.site-header .site-header__nav {
		display: none;
		position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
		background: var(--w); border-bottom: 1px solid var(--bdr);
		box-shadow: var(--sh2); padding: 12px 5% 22px;
		max-height: calc(100vh - 105px); overflow-y: auto;
	}
	.site-header.menu-open .site-header__nav { display: block; }
	.site-header .site-header__nav > ul { display: block; }
	.site-header__nav > ul > li { border-bottom: 1px solid var(--bdr2); }
	.site-header__nav > ul > li:last-child { border-bottom: none; }
	.site-header__nav > ul > li > a {
		display: flex; align-items: center; justify-content: space-between;
		padding: 18px 2px; font-size: 21px; font-weight: 600; letter-spacing: -.3px;
	}
	.site-header__nav .menu-item-has-children > a::after {
		content: ''; width: 10px; height: 10px; margin-left: 12px;
		border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy);
		transform: rotate(45deg); transition: transform .2s;
	}
	.site-header__nav .menu-item-has-children.is-open > a::after { transform: rotate(225deg); }
	/* Submenus: accordion instead of hover dropdown */
	.site-header__nav .sub-menu { display: none; position: static; min-width: 0; border: none; box-shadow: none; border-radius: 0; padding: 0 0 12px; }
	.site-header__nav li:hover > .sub-menu, .site-header__nav li:focus-within > .sub-menu { display: none; }
	.site-header__nav .menu-item-has-children.is-open > .sub-menu { display: block; }
	.site-header__nav .sub-menu a { padding: 10px 16px; font-size: 16px; color: var(--t2); font-weight: 500; }
}

/* ══ Mobile parity pass (390px loop) — must stay after the desktop overrides
   above so the cascade favors these at small widths ══ */
@media (max-width: 860px) {
	/* Hero collapses to natural height (ref .vhero @860) */
	.hero--has-video { height: auto; min-height: 0; max-height: none; padding-block: 54px 58px; }
	.hero__trust { gap: 14px 22px; margin-top: 36px; }
	.hero__trust-div { display: none; }

	/* Carousel: desktop -40px side bleed exceeds the container's 5% padding
	   at narrow widths and pushed the track past the viewport edge */
	.carousel__track {
		margin: -32px -5vw -60px;
		padding: 32px 5vw 72px;
		scroll-padding-inline: 5vw;
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
		mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
	}

	/* Testimonials: heading row stacks, badge wraps (ref .testi-head-row @768) */
	.testimonial-carousel__head { flex-direction: column; align-items: flex-start; }
	.testimonial-badge { flex-wrap: wrap; max-width: 100%; row-gap: 10px; }

	/* Footer columns (ref .ft-top @768) — re-asserted after the desktop
	   4-col override that otherwise wins the cascade at every width */
	.site-footer__inner { grid-template-columns: 1fr 1fr; gap: 32px; }

	/* Contact stacks (ref .contact-in @1100) — re-asserted after the
	   desktop 1fr/1.15fr override that otherwise wins the cascade */
	.consultation-form__inner { grid-template-columns: 1fr; gap: 56px; }
	.consultation-form__form { padding: 30px 22px; }
}

@media (max-width: 600px) {
	/* Ref .vhero-h1 / .vhero-eyebrow @600 */
	.hero--has-video .section-heading__title { font-size: 38px; letter-spacing: -1px; line-height: 1.06; }
	.hero--has-video .section-heading__eyebrow { font-size: 10.5px; letter-spacing: .5px; padding: 6px 14px 6px 12px; }
	/* Cycling word never wraps (ref .cw is nowrap inside an overflow-hidden
	   line); longest word overflows ~1px on the narrowest phones and clips */
	.section-heading__title em[data-words] { white-space: nowrap; max-width: 100%; overflow: hidden; }
	.guided-quiz__steps { padding: 28px 22px; }
}

@media (max-width: 520px) {
	/* Ref .ft-top @520 */
	.site-footer__inner { grid-template-columns: 1fr; gap: 28px; }
}

/* ── Service-driven color system ──────────────────────────────────────
   Each service term carries a Brand color (ACF color picker on the term).
   Cards expose it as --svc via an inline style; everything below derives
   from that one value. --svc falls back to the site blue when unset. */
.card--testimonial { --svc: var(--blue); }
/* ref .rc / .rcav both take the page's accent, which on hair is #DDB800 —
   our --svc there is #B8960A, a deeper gold meant for text on white. The
   accent token carries the brighter one and falls back to --svc everywhere
   it is not declared, so only hair changes. */
.card--testimonial-reviews { border-top-color: var(--svc-accent, var(--svc)); }
.card--testimonial-reviews .card--testimonial__avatar { background: var(--svc-accent, var(--svc)); color: #fff; border: none; }
.card--testimonial-video {
	/* ref .scbg: bright at the top-left, deepest at the bottom-right */
	background: linear-gradient(145deg, var(--svc-bright, var(--svc)) 0%, var(--svc-base, var(--svc)) 55%, var(--svc-dark, #071626) 100%);
}
.card--testimonial__chip {
	display: inline-block; align-self: flex-start; margin-bottom: 12px;
	font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
	color: #fff; background: color-mix(in srgb, var(--svc) 82%, #fff);
	padding: 6px 13px; border-radius: 100px;
	box-shadow: 0 2px 10px rgba(6,14,24,.25);
}
/* ref .sctag on the service rails: a dark tint of the service colour, and
   opaque. The pill sits over footage rather than over the page, so a
   translucent one would take its colour from whatever frame is behind it. */
.card--testimonial-video {
	/* The reference builds this card from two derived tones per service. On
	   stem cell they are --tur #008187 (the pill) and --turl #BFFCFF (the
	   label and the detail line). Both are mixed from --svc here so every
	   service derives its own rather than being hand-picked one at a time. */
	/* Lighter than it needs to be on bare footage, because it no longer sits
	   on bare footage: the service wash below darkened the card, and a pill
	   at 60% transparency takes that darkness through. Contrast is not the
	   constraint here — even the tightest service clears 5:1 against white. */
	--svc-pill: color-mix(in srgb, var(--svc) 65%, #000);
	/* The pale tone cannot come from a white mix: mixing carries the source's
	   saturation along, so --svc at 65% saturation lightens to a 65%-saturated
	   #CAF2F4 where the reference's --turl is a fully saturated #BFFCFF. Same
	   hue, same lightness, and it reads washed out beside it. Holding hue and
	   forcing saturation to full reproduces it, and derives per service.
	   The mix stays as a fallback for anything without relative colour. */
	--svc-pale: color-mix(in srgb, var(--svc) 25%, #fff);
	--svc-pale: hsl(from var(--svc) h 100% 88%);
}
.card--testimonial-video .card--testimonial__chip { /* ref .sctag */
	/* Lighter than the reference's .92 and darker in the mix to compensate:
	   at this transparency the frame is doing some of the work, so the tint
	   has to carry the white text on its own. Over bright footage it still
	   only reaches ~3.5:1, which the blur steadies by taking the detail out
	   of whatever is behind it. */
	background: color-mix(in srgb, var(--svc-pill) 60%, transparent);
	backdrop-filter: blur(4px);
	font-size: 8.5px; letter-spacing: 1.5px; padding: 3px 10px;
}
/* ref .scft: "Client Story" over the name over "Procedure · Outcome". */
.card--testimonial-video .card--testimonial__meta {
	display: block; gap: 0;
	/* Bleed past the card's 14px padding so the scrim reaches the edges the
	   way ref .scft does with left:0;right:0;bottom:0. */
	margin: 0 -14px -14px; padding: 14px 14px 18px;
	background: linear-gradient(0deg, rgba(0,0,0,.85) 0%, transparent 100%);
}
.card--testimonial__kicker { /* ref .sclabel, --turl at .65 */
	display: block; margin-bottom: 4px;
	font-size: 8.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
}
.card--testimonial-video .card--testimonial__kicker { color: var(--svc-pale); opacity: .65; }
.card--testimonial-video .card--testimonial__name { /* ref .scft h4 */
	display: block; font-family: var(--font-head);
	font-size: 12.5px; font-weight: 700; line-height: 1.3;
}
/* Quote mode: the pill carries the service, so it takes the service's own
   tint rather than the darker "Video Story" one, and the tile gives the rest
   of its room to the quote. */
.card--testimonial-video .card--testimonial__meta--quote { padding-bottom: 16px; }
.card--testimonial__pull { /* ref .scft h4 */
	display: block; margin: 0; border: 0; padding: 0;
	color: #fff; font-size: 11.5px; font-weight: 600; line-height: 1.35;
	/* Four lines is the tile's room. A longer quote is a writing problem, not
	   a layout one, so it truncates rather than pushing the card out. */
	overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
}
.card--testimonial-video .card--testimonial__sub { /* ref .scproc, --turl at full */
	display: block; margin-top: 3px; font-size: 10.5px; line-height: 1.35;
	color: var(--svc-pale);
}
.card--testimonial-video { position: relative; }
.card--testimonial__service { color: var(--t3); }
.card--testimonial__service a { color: inherit; }
.card--testimonial__service a:hover { color: var(--svc); }

/* ── Candidacy quiz app (v4) ──────────────────────────────────────── */
.tv-quiz { max-width: 660px; margin-inline: auto; }
.tvq-progress { display: flex; gap: 8px; margin-bottom: 22px; }
.tvq-progress > div { flex: 1; }
.tvq-seg::before { content: ''; display: block; height: 4px; border-radius: 2px; background: rgba(190,225,255,.22); }
.tvq-seg.is-on::before { background: var(--baril); }
.tvq-seg__label { display: block; margin-top: 6px; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(190,225,255,.6); }
.tvq-seg.is-on .tvq-seg__label { color: #fff; }
.tvq-card {
	background: rgba(255,255,255,.06); border: 1.5px solid rgba(190,225,255,.22);
	border-radius: 18px; padding: clamp(24px, 4vw, 40px); position: relative;
}
.tvq-back { position: absolute; top: 14px; left: 18px; background: none; border: none; color: rgba(190,225,255,.7); font-size: 12px; cursor: pointer; }
.tvq-title { color: #fff; font-family: var(--font-head); font-size: 21px; font-weight: 700; letter-spacing: -.4px; margin: 10px 0 6px; }
.tvq-subhead { color: rgba(190,225,255,.75); font-size: 13.5px; margin: 0 0 18px; }
.tvq-body { display: grid; gap: 10px; }
.tvq-answer, .tvq-chip {
	font-family: var(--font-body); text-align: left; padding: 14px 18px; font-size: 14px; font-weight: 600;
	color: #fff; background: rgba(255,255,255,.05); border: 1.5px solid rgba(190,225,255,.25);
	border-radius: 12px; cursor: pointer; transition: all .15s;
}
.tvq-chip { display: inline-block; padding: 9px 16px; border-radius: 100px; }
.tvq-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tvq-answer:hover, .tvq-chip:hover { border-color: var(--baril); }
.tvq-answer.is-picked, .tvq-chip.is-picked { background: var(--sky); border-color: var(--sky); color: var(--navy); }
.tvq-fieldlabel { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(190,225,255,.6); margin: 6px 0 2px; display: block; }
.tvq-select, .tvq-text {
	width: 100%; padding: 12px 14px; border-radius: 10px; font-size: 14px;
	background: rgba(255,255,255,.08); border: 1.5px solid rgba(190,225,255,.25); color: #fff;
}
.tvq-select option { color: var(--navy); }
.tvq-next {
	justify-self: end; margin-top: 10px; padding: 12px 26px; border-radius: 100px;
	background: var(--sky); color: var(--navy); border: none; font-weight: 700; font-size: 13.5px; cursor: pointer;
}
.tvq-next:disabled { opacity: .6; }
.tvq-next.is-shake { animation: tvq-shake .35s; }
@keyframes tvq-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.tvq-visual { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.tvq-visual__opt {
	background: rgba(255,255,255,.05); border: 1.5px solid rgba(190,225,255,.25); border-radius: 12px;
	padding: 12px; cursor: pointer; color: #fff; font-size: 12.5px; font-weight: 600; display: grid; gap: 6px; justify-items: center;
}
.tvq-visual__opt img { width: 84px; height: 84px; }
.tvq-visual__opt.is-picked { border: 2px solid #0F4C81; background: var(--sky); color: var(--navy); }
.tvq-panel { color: rgba(224,238,255,.9); font-size: 14px; }
.tvq-panel h4 { color: #fff; font-size: 17px; margin: 0 0 10px; }
.tvq-panel ul { padding-left: 18px; display: grid; gap: 8px; }
.tvq-panel summary { cursor: pointer; color: var(--baril); margin-top: 10px; }
.tvq-full { display: grid; gap: 12px; }
.tvq-field { display: block; }
.tvq-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; color: rgba(224,238,255,.8); }
.tvq-consent input { margin-top: 3px; }
.tvq-results { color: #fff; font-size: 16px; line-height: 1.7; }

/* ref c483fd1: values card grids become swipe carousels on mobile */
@media (max-width: 768px) {
	.card-grid--values .card-grid__grid {
		display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 10px;
	}
	.card-grid--values .card-grid__grid::-webkit-scrollbar { display: none; }
	.card-grid--values .card { flex: 0 0 62%; scroll-snap-align: start; }
}

/* ── Location cards (ref locs-grid, 110fdf2/aef4ecb/1121b00 final) ──── */
.location-cards__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: stretch; }
.loc-card {
	position: relative; background: #fff; border: 1px solid color-mix(in srgb, var(--plas) 22%, #fff);
	border-radius: 22px; overflow: hidden; display: flex; flex-direction: column;
	transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s;
}
.loc-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(62,21,99,.12); }
.loc-card__map {
	background: linear-gradient(160deg, color-mix(in srgb, var(--plas) 8%, #fff) 0%, #fff 100%);
	border-bottom: 1px solid color-mix(in srgb, var(--plas) 22%, #fff); flex-shrink: 0;
}
.loc-card__map img { width: 100%; height: auto; display: block; }
.loc-card__inner { padding: 26px 28px; flex: 1; }
.loc-card__inner h3 { font-size: 20px; font-weight: 800; letter-spacing: -.5px; line-height: 1.1; margin: 0; }
.loc-card__flag { font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--plas); margin: 4px 0 12px; }
.loc-card__text { font-size: 14px; line-height: 1.7; color: var(--t2); margin: 0; }
.loc-card__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.loc-card__chip {
	font-size: 12px; font-weight: 600; color: var(--plas);
	background: color-mix(in srgb, var(--plas) 8%, #fff);
	border: 1px solid color-mix(in srgb, var(--plas) 24%, #fff);
	border-radius: 100px; padding: 5px 13px;
}
@media (max-width: 860px) { .location-cards__grid { grid-template-columns: 1fr; } }

/* ref 7c80490: Five Stages timeline swipes on mobile */
@media (max-width: 768px) {
	/* text-column variant only — the themed tiles get their own snap
	   track below, sized to the ref's 62% cards */
	.journey-timeline__track:not(.journey-timeline__track--tiles) {
		display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 10px;
	}
	.journey-timeline__track:not(.journey-timeline__track--tiles)::-webkit-scrollbar { display: none; }
	.journey-timeline__track:not(.journey-timeline__track--tiles) .journey-timeline__stage { flex: 0 0 72%; scroll-snap-align: start; }
}

/* ref 56876ec: Services dropdown per-service colors (diamond + underline) */
.site-header__nav .sub-menu a { --c: var(--blue); --ct: rgba(15,76,129,.08); position: relative; display: flex; align-items: center; gap: 11px; border-radius: 10px; transition: background .18s, color .18s; }
.site-header__nav .sub-menu a[href*="/stem-cell"] { --c: #0FA6AD; --ct: rgba(15,166,173,.10); }
.site-header__nav .sub-menu a[href*="/plastic"] { --c: #7C3AB7; --ct: rgba(124,58,183,.10); }
.site-header__nav .sub-menu a[href*="/hair-transplant"] { --c: #B5822A; --ct: rgba(181,130,42,.12); }
.site-header__nav .sub-menu a[href*="/bariatric"] { --c: #1591C7; --ct: rgba(21,145,199,.10); }
.site-header__nav .sub-menu a::before {
	content: ''; width: 8px; height: 8px; flex-shrink: 0; background: var(--c);
	border-radius: 2px; transform: rotate(45deg); transition: transform .22s, box-shadow .22s;
}
.site-header__nav .sub-menu a::after {
	content: ''; position: absolute; left: 15px; right: 15px; bottom: 7px; height: 2px; border-radius: 2px;
	background: var(--c); opacity: .3; transform-origin: left; transition: opacity .2s;
}
.site-header__nav .sub-menu a:hover { background: var(--ct); color: var(--c); }
.site-header__nav .sub-menu a:hover::before { transform: rotate(45deg) scale(1.18); box-shadow: 0 0 0 4px var(--ct); }
.site-header__nav .sub-menu a:hover::after { opacity: 1; }
@media (max-width: 860px) {
	.site-header__nav .sub-menu a::after { display: none; }
}
/* ref 4e20bc6: hide in-nav phone at narrow-desktop; keep nav from overflowing */
@media (max-width: 1024px) {
	.site-header__phone-link { display: none; }
	.site-header nav ul { gap: 12px; }
	.site-header nav a { font-size: 14px; }
}

/* ── Jump nav (ref faq-jump: sticky translucent pill bar) ───────────── */
/* The sticky bar is one of the two jump-nav styles, so its chrome belongs
   to that variant. A row stored before the setting existed resolves to
   'sticky', which is why this keeps every existing bar exactly as it was. */
.component-jumpnav--sticky {
	position: sticky; top: 63px; z-index: 90;
	background: rgba(246,248,251,.95); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--bdr); padding: 12px 5%;
}
/* ref .story-jump: pills that sit where they are placed. No bar, no blur,
   no border — the page reads straight through them. */
.component-jumpnav--service { padding: 8px 5%; }
.component-jumpnav--service .jumpnav__inner { max-width: 1320px; gap: 12px; }
.component-jumpnav--service .jumpnav__label {
	display: block; text-align: center; font-size: 10px; font-weight: 700;
	letter-spacing: 3px; text-transform: uppercase; color: var(--blue); margin-bottom: 20px;
}
.component-jumpnav--service .jumpnav__label::before { content: '\25c6'; margin-right: 8px; }
/* ref .sjb: the pill is the service's colour on a wash of the same, and
   fills with it on hover. --svc comes from the service term on the pill,
   so an unset pill falls back to the house blue rather than going grey. */
.component-jumpnav--service .jumpnav__pill {
	display: inline-flex; align-items: center; gap: 9px;
	font-family: var(--font-head); font-size: 13.5px; font-weight: 700; letter-spacing: -.1px;
	padding: 13px 26px; border-radius: 100px; border: 1.5px solid var(--svc, var(--blue));
	color: var(--svc, var(--blue)); background: color-mix(in srgb, var(--svc, var(--blue)) 7%, transparent);
	box-shadow: none; transition: all .25s;
}
.component-jumpnav--service .jumpnav__pill span { font-weight: 800; transition: transform .2s; }
.component-jumpnav--service .jumpnav__pill:hover {
	background: var(--svc, var(--blue)); color: #fff;
	box-shadow: 0 6px 20px color-mix(in srgb, var(--svc, var(--blue)) 32%, transparent);
}
.component-jumpnav--service .jumpnav__pill:hover span { transform: translateY(2px); }
/* The scroll-spy still marks where you are, but a service pill says so in
   its own colour — the base bar's navy would read as a different service. */
.component-jumpnav--service .jumpnav__pill.is-active {
	background: var(--svc, var(--blue)); color: #fff; border-color: var(--svc, var(--blue));
}
@media (prefers-reduced-motion: reduce) { .component-jumpnav--service .jumpnav__pill:hover span { transform: none; } }
.jumpnav__inner { max-width: 920px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 9px; }
.jumpnav__pill {
	font-size: 12px; font-weight: 600; color: #55606B; padding: 7px 15px;
	border: 1.5px solid rgba(10,37,64,.12); border-radius: 100px; background: var(--w);
	white-space: nowrap; letter-spacing: .2px; transition: all .2s; box-shadow: 0 1px 2px rgba(6,14,24,.03);
}
/* A pill whose section drew nothing. The attribute alone cannot hide it:
   the rule above gives every pill a display, which outranks [hidden]. */
.jumpnav__pill[hidden] { display: none; }
.jumpnav__pill:hover { color: var(--blue); border-color: var(--blue); }
.jumpnav__pill.is-active { color: #fff; background: var(--navy); border-color: var(--navy); }
.jumpnav__div { width: 1px; height: 18px; background: var(--bdr); }
@media (max-width: 860px) {
	.jumpnav__inner { gap: 7px; }
	.jumpnav__pill { padding: 6px 13px; }
}

/* ── G9 polish (2c79e05 a7b6dd1 7430b9d 485ba4b e594421) ────────────── */
/* Home: badge foot under Google Reviews; extra air between the two rows */
.testimonial-badge-foot { display: flex; justify-content: center; margin-top: 48px; }
.testimonial-badge-foot .testimonial-badge { flex-wrap: wrap; justify-content: center; }
/* Cycling word never clips its final letter */
.section-heading__title em[data-words] { padding-right: .18em; }
/* Experience: hero orbs + section glows in logo navy */
.page-experience .hero:not(.hero--has-video)::before,
.page-experience .hero:not(.hero--has-video)::after {
	background: radial-gradient(ellipse, rgba(0,43,81,.13) 0%, rgba(15,76,129,.05) 40%, transparent 70%);
}
/* Hair "How it's done" (ref .step-card): a gold media panel carrying the
   icon and a numbered badge, then the copy. The icon block doubles as the
   panel so the ref's markup is matched without a bespoke template. */
.page-hair-transplant .numbered-steps--horizontal .numbered-steps__list {
	grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 44px;
}
.page-hair-transplant .numbered-steps--horizontal .numbered-steps__step {
	padding: 0; overflow: hidden; position: relative; border-radius: 18px;
	transition: transform .3s, box-shadow .3s;
}
.page-hair-transplant .numbered-steps--horizontal .numbered-steps__step:hover { transform: translateY(-4px); box-shadow: var(--sh2); }
.page-hair-transplant .numbered-steps--horizontal .numbered-steps__step::before {
	content: counter(step); counter-increment: step;
	position: absolute; top: 14px; left: 14px; width: 32px; height: 32px; border-radius: 50%; z-index: 2;
	background: var(--navy); color: var(--svc-bright, #DDB800);
	font-family: var(--font-head); font-size: 13px; font-weight: 800; letter-spacing: 0;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 3px 10px rgba(0,43,81,.22);
}
.page-hair-transplant .numbered-steps--horizontal .numbered-steps__ico {
	display: flex; align-items: center; justify-content: center;
	height: 132px; margin: 0 0 0; position: relative; overflow: hidden;
	background: linear-gradient(150deg, #FDF2C8 0%, #FCF8E8 58%, #FFFFFF 100%);
	border-bottom: 1px solid var(--bdr);
}
.page-hair-transplant .numbered-steps--horizontal .numbered-steps__ico::before,
.page-hair-transplant .numbered-steps--horizontal .numbered-steps__ico::after {
	content: ''; position: absolute; border-radius: 50%; pointer-events: none;
}
.page-hair-transplant .numbered-steps--horizontal .numbered-steps__ico::before {
	top: -74px; right: -54px; width: 184px; height: 184px; border: 1.5px solid rgba(221,184,0,.16);
}
.page-hair-transplant .numbered-steps--horizontal .numbered-steps__ico::after {
	bottom: -60px; left: -42px; width: 130px; height: 130px; border: 1.5px dashed rgba(221,184,0,.18);
}
.page-hair-transplant .numbered-steps--horizontal .numbered-steps__ico svg {
	width: 56px; height: 56px; margin: 0; position: relative; z-index: 1;
	color: var(--navy); transition: transform .3s;
}
.page-hair-transplant .numbered-steps--horizontal .numbered-steps__step:hover .numbered-steps__ico svg { transform: scale(1.08); }
.page-hair-transplant .numbered-steps--horizontal .numbered-steps__heading { font-size: 16px; font-weight: 800; color: var(--navy); letter-spacing: -.2px; margin: 22px 22px 10px; }
.page-hair-transplant .numbered-steps--horizontal .numbered-steps__step p { font-size: 13px; line-height: 1.7; color: var(--t2); margin: 0 22px 26px; }
@media (max-width: 1100px) { .page-hair-transplant .numbered-steps--horizontal .numbered-steps__list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) { .page-hair-transplant .numbered-steps--horizontal .numbered-steps__list { grid-template-columns: 1fr; } }

/* The service pills were colour-coded after ref 0e9b215; the reference has
   since gone back to one neutral pill per section, with only the active one
   filled. Those rules also out-ran .is-active, so the active pill wore the
   service colour as text on navy instead of white. */
.team-grid__meet { margin-top: 40px; text-align: center; } /* ref .fac-cta-wrap */

/* ── Comparison table: stacked cards on mobile (ref b7d1bbd) ────────── */
@media (max-width: 768px) {
	.table-scroll { overflow-x: visible; border: none; background: transparent; box-shadow: none; border-radius: 0; }
	.comparison-table table, .comparison-table tbody { display: block; width: 100%; min-width: 0; }
	.comparison-table thead { display: none; }
	.comparison-table tbody tr { display: block; background: var(--w); border: 1px solid var(--bdr); border-radius: 14px; overflow: hidden; margin-bottom: 12px; }
	.comparison-table td { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 14px; font-size: 12.5px; color: var(--t2); }
	.comparison-table tbody th { display: block; font-size: 13.5px; font-weight: 600; color: var(--navy); background: var(--bg); padding: 10px 14px; }
	.comparison-table td::before { content: attr(data-label); font-weight: 600; color: var(--t2); }
	.comparison-table tr:last-child th, .comparison-table tr:last-child td { border-bottom: 1px solid var(--bdr2); }
	.comparison-table tbody tr td:last-child { border-bottom: none; }
	/* ref: the TreVita row carries the accent — left bar + colored label */
	.comparison-table td { border-left: 3px solid transparent; border-bottom: 1px solid var(--bdr2); }
	.comparison-table[class*="theme-"] td.is-highlight { border-left-color: var(--svc); background: color-mix(in srgb, var(--svc) 5%, transparent); }
	.comparison-table[class*="theme-"] td.is-highlight::before { color: var(--svc); font-weight: 700; }
}

/* ── Newsroom filter bar + service-line gems (ref e4dbb50/18d4a2f) ──── */
/* ref .filter-bar, and the same treatment as .component-jumpnav on the
   service pages: it sticks under the 64px header while the streams scroll. */
.nr-filter {
	position: sticky; top: 63px; z-index: 90;
	padding: 12px 5%; border-bottom: 1px solid var(--bdr);
	background: rgba(246,248,251,.95); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.nr-filter__inner { max-width: 1320px; margin: 0 auto; display: grid; gap: 8px; }
.nr-filter__row { display: flex; align-items: center; gap: 9px; }
.nr-filter__pills { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.nr-filter__label {
	font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
	color: var(--t3, #8a94a0); flex: 0 0 96px; /* both labels share a column so the pills align */
}
.nr-filter__sep { width: 1px; height: 20px; background: var(--bdr); margin: 0 8px; }
.nr-filter__pill { font-size: 12px; font-weight: 600; color: #55606B; padding: 7px 14px; border: 1.5px solid rgba(10,37,64,.12); border-radius: 100px; background: var(--w); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; transition: all .2s; }
.nr-filter__pill:hover { border-color: var(--blue); color: var(--blue); }
.nr-filter__pill.is-on { color: #fff; background: var(--navy); border-color: var(--navy); }
.nr-filter__gem { color: var(--svc, var(--blue)); font-size: 10px; }
.card--newsroom__line { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--svc, var(--t2)); }
.card--newsroom__line .nr-filter__gem { font-size: 9px; }
.card--newsroom.is-filtered, .ccard.is-filtered, .component.is-filtered { display: none; }
@media (max-width: 768px) {
	.nr-filter__inner { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.nr-filter__inner::-webkit-scrollbar { display: none; }
}

/* ── Brand marks in section backgrounds (ref dmark/procs-deco/sep) ──── */
.tv-mark { display: inline-block; }
.tv-mark--dmark { display: block; width: 68px; margin: 0 auto 22px; color: #BEE1FF; opacity: .18; }
.tv-mark--corner { position: absolute; top: 32px; right: 4%; width: 60px; opacity: .2; pointer-events: none; z-index: 0; color: var(--blue); }
.tabbed-content, .content-media { position: relative; }
.tv-mark--closer { display: block; width: 48px; margin: 0 auto 22px; color: #0F4C81; }
.page-stem-cell .tv-mark--corner { color: #008187; }
.page-plastic .tv-mark--corner { color: #7C3AB7; }
.page-bariatric .tv-mark--corner { color: #46C1EF; }
.page-hair-transplant .tv-mark--corner { color: #DDB800; }
.tv-diamond-sep { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 32px 0 0; }
.tv-diamond-sep__line { flex: 1; max-width: 120px; height: 1px; background: linear-gradient(90deg, transparent, var(--bdr), transparent); }
/* ref .diamond-sep svg: 28px wide and held back to .35, so the mark reads as
   a rule's ornament rather than a heading of its own. */
.tv-mark--sep { width: 28px; opacity: .35; }
.tv-mark-chip { display: inline-flex; align-items: center; justify-content: center; padding: 8px 14px; border-radius: 10px; height: 44px; color: #fff; margin-bottom: 14px; }
.tv-mark--chip { width: 20px; }

/* ── Service themes (ACF "Theme" dropdown → theme-* on the section) ─── */
/* Palettes hand-tuned to the ref pages (accent / dark / bright / tints). */
.theme-stem      { --svc-btn: #083335; --svc-link: #008187; --svc: #008187; --svc-dark: #083335; --svc-bright: #2CCCD3; --svc-tint: rgba(0,129,135,.08); --svc-tint2: rgba(0,129,135,.14); --svc-brd: rgba(0,129,135,.18); --svc-glow1: rgba(44,204,211,.13); --svc-glow2: rgba(191,252,255,.05); }
.theme-bariatric { --svc-btn: #002B51; --svc-link: #0F4C81; --svc: #1CA6DA; --svc-dark: #084C72; --svc-bright: #46C1EF; --svc-tint: rgba(28,166,218,.08); --svc-tint2: rgba(28,166,218,.14); --svc-brd: rgba(28,166,218,.18); --svc-glow1: rgba(70,193,239,.13); --svc-glow2: rgba(191,252,255,.05); }
.theme-plastic   { --svc-btn: #3E1563; --svc-link: #7C3AB7; --svc: #7C3AB7; --svc-dark: #3E1563; --svc-bright: #A855F7; --svc-tint: rgba(124,58,183,.08); --svc-tint2: rgba(124,58,183,.14); --svc-brd: rgba(124,58,183,.18); --svc-glow1: rgba(124,58,183,.10); --svc-glow2: rgba(180,120,220,.05); }
/* The reference redefines --blue itself on the hair page — #8A6A00 rather
   than #0F4C81 — so every accent on that page turns gold. Nowhere else does
   this; it is the one service whose colour a blue accent fights. Ours does
   the same through --svc-link, which is what the text accents read. */
.theme-hair      { --svc-btn: #002B51; --svc-link: #8A6A00; --svc-accent: #DDB800; --svc-label: #7A5C00; --svc: #B8960A; --svc-dark: #4A3A12; --svc-bright: #DDB800; --svc-tint: rgba(221,184,0,.12); --svc-tint2: rgba(221,184,0,.2);  --svc-brd: rgba(221,184,0,.3); --svc-glow1: rgba(255,219,110,.18); --svc-glow2: rgba(255,231,165,.06); }
/* The reference re-tints its neutral text toward the service on two pages
   and leaves it alone on the rest: stem cell goes teal-grey, plastic goes
   violet-grey, and home, bariatric and hair keep the house blue-grey that
   our tokens already carry. So only these two need saying. */
.theme-stem    { --t1: #06201F; --t2: #41565A; --t3: #7E9698; }
.theme-plastic { --t1: #17071F; --t2: #4D4159; --t3: #8B7E99; }
/* One pale tone per service, the way the reference derives --turl (#BFFCFF
   on stem cell). A white mix carries the source's saturation along, so it
   lands washed out; holding the hue and forcing saturation to full
   reproduces it. Mix stays underneath as a fallback. */
[class*="theme-"] {
	--svc-pale: color-mix(in srgb, var(--svc-bright, var(--svc)) 25%, #fff);
	--svc-pale: hsl(from var(--svc-bright, var(--svc)) h 100% 88%);
}

/* Derived companions, resolved on the themed section itself:
   --svc-base survives cards that shadow --svc with their own service
   term colour; --svc-mid is the ref's mid tone (its --turm). */
/* Named, not [class*="theme-"] — that also matches body.wp-theme-trevita. */
.theme-stem, .theme-plastic, .theme-hair, .theme-bariatric {
	--svc-base: var(--svc);
	--svc-mid: color-mix(in srgb, var(--svc) 45%, var(--svc-bright));
}

/* Accent hooks inside any themed section. Most lines colour the eyebrow,
   its dash and the emphasis alike; hair splits them because its accent is
   too light to read at eyebrow size. */
.component[class*="theme-"] .section-heading__title em,
.component[class*="theme-"] .section-heading__title i { color: var(--svc-accent, var(--svc)); }
.component[class*="theme-"] .section-heading__eyebrow { color: var(--svc-label, var(--svc)); }
.component[class*="theme-"] .section-heading__eyebrow::before { background: var(--svc-accent, var(--svc)); }
/* ref .cta-main: stem/plastic use their own dark, hair/bariatric navy */
.component[class*="theme-"] .button--primary { background: var(--svc-btn, var(--svc-dark)); border-color: var(--svc-btn, var(--svc-dark)); }
.component[class*="theme-"] .button--primary:hover { background: var(--svc); border-color: var(--svc); box-shadow: 0 8px 28px var(--svc-tint2); }
.component[class*="theme-"] .tv-mark--corner { color: var(--svc); }
.component[class*="theme-"] .card--grid-item__link { color: var(--svc); }
/* ref .proc-tab-btn: resting label is body grey, not the link blue */
.component[class*="theme-"] .tabbed-content__tab { color: var(--t2); }
.component[class*="theme-"] .tabbed-content__tab:hover { border-color: var(--svc); color: var(--svc); }
.component[class*="theme-"] .tabbed-content__tab[aria-selected="true"] { background: var(--svc-btn, var(--svc-dark)); color: #fff; border-color: var(--svc-btn, var(--svc-dark)); box-shadow: 0 4px 14px var(--svc-tint2); }
/* The reference has two pill weights and we were using one for both. Its
   condition tabs are ref .proc-tab-btn — 11px 22px, active in the deep
   service tone. Its itinerary switcher is ref .itin-fbtn, the same pill the
   facility filter uses — smaller at 8px 18px, active in the service colour
   itself. It is a filter, not a tab set, and the reference styles it as one. */
.tabbed-content__tab { font-size: 12.5px; padding: 11px 22px; }
#itinerary .tabbed-content__tab { padding: 8px 18px; }
.component[class*="theme-"]#itinerary .tabbed-content__tab[aria-selected="true"] {
	background: var(--svc); border-color: var(--svc);
	box-shadow: 0 3px 12px color-mix(in srgb, var(--svc) 25%, transparent);
}

/* Themed hero: eyebrow becomes the ref pill with a pulsing dot, the
   secondary button reads as a text link, mesh orbs take the accent. */
@keyframes tv-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.hero[class*="theme-"] .section-heading__eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--svc-tint); border: 1px solid var(--svc-brd);
	padding: 5px 14px 5px 8px; border-radius: 100px;
	font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: none;
}
.hero[class*="theme-"] .section-heading__eyebrow::before {
	width: 7px; height: 7px; border-radius: 50%; background: var(--svc);
	animation: tv-pulse 2.5s ease-in-out infinite;
}
.tv-noanim .hero[class*="theme-"] .section-heading__eyebrow::before { animation: none; }
.hero[class*="theme-"] .button--secondary { border: none; background: none; padding-inline: 0; color: var(--svc); }
.hero[class*="theme-"] .button--secondary:hover { color: var(--svc-dark); }
.hero[class*="theme-"] .button--secondary::after { content: ' →'; }

/* ── Stats bento (themed stats_bar → ref hero stat cards) ───────────── */
.stats-bento { display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: auto auto; gap: 12px; align-items: stretch; }
.stats-bento__main { grid-row: 1 / 3; }
.stats-bento__main {
	background: linear-gradient(145deg, #EEF5FF 0%, #F4F8FD 50%, #EAF2FA 100%);
	border: 1px solid rgba(15,76,129,.12); border-radius: 22px; position: relative; overflow: hidden;
	padding: 32px 32px 30px; min-height: 220px; display: flex; flex-direction: column; justify-content: space-between;
}
.stats-bento__main::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, transparent, var(--svc-bright), transparent); }
.stats-bento__tag {
	display: inline-flex; align-items: center; gap: 6px; width: fit-content;
	background: var(--svc-tint); border: 1px solid var(--svc-brd); color: var(--svc-dark);
	font-size: 9.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
	padding: 4px 12px; border-radius: 100px; margin-bottom: 18px;
}
.stats-bento__tag span { color: var(--svc); }
.stats-bento__num { font-family: var(--font-head); font-size: clamp(48px, 5vw, 74px); font-weight: 800; color: var(--navy); line-height: 1; letter-spacing: -3.5px; margin: 0; }
.stats-bento__num em { color: var(--svc); font-style: normal; font-size: .72em; }
.stats-bento__lbl { font-size: 14px; font-weight: 600; color: var(--t2); letter-spacing: .2px; margin: 8px 0 0; }
.stats-bento__sub { font-size: 12px; color: var(--t3, #8a94a0); margin: 4px 0 0; }
.stats-bento__meta { font-size: 12px; color: var(--t2); font-weight: 500; margin: 18px 0 0; }
.stats-bento__sm {
	background: var(--w); border: 1px solid var(--bdr); border-radius: 18px; padding: 22px 20px;
	display: flex; flex-direction: column; justify-content: space-between; min-height: 140px;
	transition: box-shadow .3s, transform .3s; position: relative; overflow: hidden;
}
.stats-bento__sm::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--svc-bright), transparent); }
.stats-bento__sm:hover { box-shadow: var(--sh2); transform: translateY(-3px); }
.stats-bento__sm-label { font-size: 9.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--t3, #8a94a0); margin: 0 0 8px; }
.stats-bento__sm-num { font-family: var(--font-head); font-size: 38px; font-weight: 800; letter-spacing: -1.8px; color: var(--navy); line-height: 1; margin: 0; }
.stats-bento__sm-num em { color: var(--svc); font-style: normal; font-size: .6em; }
.stats-bento__sm-sub { font-size: 12px; color: var(--t3, #8a94a0); margin: 6px 0 0; }
@media (max-width: 900px) {
	.stats-bento { grid-template-columns: 1fr 1fr; }
	.stats-bento__main { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 560px) { .stats-bento { grid-template-columns: 1fr; } }

/* ── Themed procedure panels (ref .proc-panel/.proc-vis) ────────────── */
.proc-panel { display: grid; grid-template-columns: 1fr 1.5fr; gap: 18px; align-items: stretch; }
.proc-panel[hidden] { display: none; }
.proc-vis { /* ref .proc-vis */
	position: relative; border-radius: 22px; padding: 38px 32px; min-height: 430px; overflow: hidden;
	display: flex; flex-direction: column; justify-content: space-between; color: #fff;
	background: linear-gradient(145deg, var(--svc-dark) 0%, var(--svc) 70%, var(--svc-bright) 100%);
}
.proc-vis::before {
	content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 3;
	background: linear-gradient(90deg, transparent, var(--svc-bright, #2CCCD3), transparent);
}
.theme-plastic   .proc-vis { background: linear-gradient(145deg, #2A0E44 0%, #4B1E78 35%, #7C3AB7 78%, #9A5BD0 100%); }
.theme-bariatric .proc-vis { background: linear-gradient(145deg, #003650 0%, #005A7A 35%, #1CA6DA 75%, #46C1EF 100%); }
.theme-stem      .proc-vis { background: linear-gradient(145deg, #062224 0%, #083335 35%, #008187 78%, #18AAB0 100%); }
.theme-hair      .proc-vis { background: linear-gradient(145deg, #4A3800 0%, #765A00 38%, #B8960A 74%, #DDB800 100%); }
.proc-vis__ring, .proc-vis__ring2 { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 50%; }
.proc-vis__ring { width: 240px; height: 240px; border: 1px solid rgba(255,255,255,.12); }
.proc-vis__ring2 { width: 340px; height: 340px; border: 1px solid rgba(255,255,255,.06); }
.proc-vis__badge {
	position: absolute; top: 24px; right: 24px; z-index: 3; color: #fff;
	background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.36);
	font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
	padding: 5px 12px; border-radius: 100px; backdrop-filter: blur(8px);
}
.proc-vis__illus { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; }
.proc-vis__illus svg { width: 120px; height: 120px; }
.tv-mark--illus { width: 90px; color: rgba(255,255,255,.7); }
.proc-vis__lbl { font-size: 9.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.55); margin-top: 14px; }
/* Editor-uploaded illustration: replaces the built-in icon inside the gradient card. */
.proc-vis__img { max-width: 100%; max-height: 300px; width: auto; height: auto; object-fit: contain; border-radius: 16px; display: block; }
.proc-vis__title { font-family: var(--font-head); font-size: 24px; font-weight: 800; letter-spacing: -.5px; line-height: 1.15; margin-bottom: 6px; position: relative; z-index: 2; }
.proc-vis__sub { font-size: 13px; color: rgba(255,255,255,.78); line-height: 1.55; position: relative; z-index: 2; }
.proc-content {
	background: var(--w); border: 1px solid var(--bdr); border-radius: 22px; padding: 32px 34px;
	min-height: 430px; display: flex; flex-direction: column; justify-content: space-between; /* ref .proc-content */
}
/* ref .procs-head: the head is not boxed — its heading runs to 860px and its
   lede to 560px, each on its own. Ours inherited the global 760px box, which
   wrapped "Conditions commonly supported." onto a second line and pulled the
   lede in with it. */
.tabbed-content .section-heading { max-width: none; margin-bottom: 44px; }
.tabbed-content .section-heading__title { max-width: 860px; margin-bottom: 18px; }
.tabbed-content .section-heading__sub { max-width: 560px; }
.proc-subtabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; border-bottom: 1px solid var(--bdr2); padding-bottom: 16px; }
.proc-subtab {
	font-size: 11.5px; font-weight: 600; color: var(--t3, #8a94a0); background: transparent;
	border: 1.5px solid var(--bdr); padding: 7px 14px; border-radius: 100px; cursor: pointer;
	transition: all .2s; letter-spacing: .2px;
}
/* ref .proc-subtab.active is rgba(service, .10) on a .22 border. Ours read
   the shared --svc-tint/--svc-brd pair, which is .08/.18 — near enough to
   look right and not the reference's. Mixed from --svc so every service
   lands on its own pair. */
.proc-subtab.is-active {
	background: color-mix(in srgb, var(--svc) 10%, transparent);
	color: var(--svc);
	border-color: color-mix(in srgb, var(--svc) 22%, transparent);
}
/* ref .expect-steps: stages are numbered, not ticked. The counter sits in a
   26px disc in the service's own tint. */
.expect-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.expect-steps li {
	counter-increment: step; position: relative;
	padding: 13px 0 13px 42px; border-bottom: 1px solid var(--bdr2);
	font-size: 13px; color: var(--t2); line-height: 1.6;
}
.expect-steps li:last-child { border-bottom: none; }
.expect-steps li::before {
	content: counter(step); position: absolute; left: 0; top: 11px;
	width: 26px; height: 26px; border-radius: 50%;
	background: color-mix(in srgb, var(--svc, var(--blue)) 10%, transparent);
	color: var(--svc, var(--blue));
	border: 1px solid color-mix(in srgb, var(--svc, var(--blue)) 20%, transparent);
	font-family: var(--font-head); font-size: 11px; font-weight: 800;
	display: flex; align-items: center; justify-content: center;
}
.proc-subpanel { display: none; }
.proc-subpanel.is-active { display: block; }
.proc-desc { font-size: 14px; color: var(--t2); line-height: 1.8; margin-bottom: 22px; }
.proc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.proc-stats__box { background: var(--bg); border: 1px solid var(--bdr); border-radius: 12px; padding: 14px 16px; }
.proc-stats__lbl { font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--t3, #8a94a0); margin-bottom: 6px; display: block; }
.proc-stats__val { font-family: var(--font-head); font-size: 18px; font-weight: 800; color: var(--navy); letter-spacing: -.3px; }
.proc-list-lbl { font-size: 9.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--t3, #8a94a0); margin-bottom: 14px; display: block; }
.proc-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.proc-tag { font-size: 11px; padding: 8px 15px; background: var(--svc-tint); color: var(--svc); border-radius: 100px; font-weight: 600; border: 1px solid var(--svc-brd); }
.who-list { list-style: none; margin: 0; padding: 0; }
.who-list li { padding: 13px 0; border-bottom: 1px solid var(--bdr2); font-size: 13px; color: var(--t2); line-height: 1.6; display: flex; align-items: flex-start; gap: 12px; }
/* ref .who-list li:last-child drops its rule — the divider above .proc-actions
   already closes the list, so a border on the final item drew two lines a few
   pixels apart. */
.who-list li:last-child { border-bottom: none; }
.who-list li span { color: var(--svc); font-weight: 800; flex-shrink: 0; margin-top: 1px; }
.proc-actions { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--bdr2); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.proc-actions .button { flex: 1; justify-content: center; text-align: center; min-width: 220px; }
.proc-note { flex: 1; min-width: 200px; font-size: 11.5px; color: var(--t3, #8a94a0); line-height: 1.6; }
/* ref .cta-secondary: the Learn More is a text link on its own full-width
   row beneath the CTA, not a second pill */
.proc-actions__learn {
	flex: 1 0 100%; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	padding: 14px 0; font-size: 13.5px; font-weight: 600;
	color: var(--svc-link, var(--blue)); transition: gap .2s;
}
.proc-actions__learn:hover { gap: 13px; }
/* ref splits these: the panel stacks at 1100, the stat boxes only at 768.
   Ours did both at 860, so mid-widths lost the two-up stats early. */
@media (max-width: 1100px) {
	.proc-panel { grid-template-columns: 1fr; }
	.proc-vis { min-height: 340px; }
	.proc-content { min-height: 0; }
}
@media (max-width: 768px) {
	.proc-stats { grid-template-columns: 1fr; }
}

/* Ref per-service section glow: radial wash on every light themed section */
.component[class*="theme-"]:not(.component--dark):not(.hero) {
	background: radial-gradient(120% 42% at 50% 42%, var(--svc-glow1) 0%, var(--svc-glow2) 48%, transparent 92%), var(--bg);
}
/* Themed hero: mesh orbs take the service tint (ref .hero-mesh) */
.hero[class*="theme-"]:not(.hero--has-video)::before { background: radial-gradient(ellipse, var(--svc-glow1) 0%, var(--svc-glow2) 40%, transparent 70%); }
.hero[class*="theme-"]:not(.hero--has-video)::after { background: radial-gradient(ellipse, var(--svc-glow1) 0%, transparent 65%); }

/* ── Hero duo: themed hero + stats compose into ref's 2-col hero band ── */
/* ref .hero align-items:start — the stat panel hangs from the top of the
   band, not from its middle; .hero-l's 12px is what sets the eyebrow
   12px below the panel's top edge. */
.hero-duo { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.05fr 1fr; gap: 0 32px; align-items: start; max-width: 1320px; margin: 0 auto; padding: 0 5%; }
.hero-duo > .hero { padding: 56px 0 64px; overflow: visible; }
.hero-duo > .hero::before, .hero-duo > .hero::after { display: none; }
/* ref .hero-r carries no padding — only the .hero grid has 56/64, so the
   left column runs deeper than the stat panel and sets the row. Ours gave
   the right column its own 64px bottom, which made it the taller of the two
   and left a second 64px stacked under the button row. Top stays 56px: that
   is what sits the panel 12px above the eyebrow. */
.hero-duo > .stats-bar { padding: 56px 0 0; background: none !important; }
.hero-duo > .component .container { padding-inline: 0; max-width: none; }
.hero-duo[class*="theme-"]::before {
	content: ''; position: absolute; top: -180px; right: -120px; width: 650px; height: 650px;
	border-radius: 50%; pointer-events: none;
	background: radial-gradient(ellipse, var(--svc-glow1) 0%, var(--svc-glow2) 40%, transparent 70%);
}
.hero-duo[class*="theme-"]::after {
	content: ''; position: absolute; bottom: -80px; left: -60px; width: 400px; height: 400px;
	border-radius: 50%; pointer-events: none;
	background: radial-gradient(ellipse, var(--svc-glow1) 0%, transparent 65%);
}
.hero-duo .stats-bento { grid-template-columns: 1fr 1fr; }
.hero-duo .stats-bento__main { grid-row: auto; grid-column: 1 / -1; }
@media (max-width: 900px) {
	.hero-duo { grid-template-columns: 1fr; gap: 0; }
	.hero-duo > .hero { padding-bottom: 8px; }
	.hero-duo > .stats-bar { padding-top: 16px; }
}

/* ── Themed dark steps → ref .story: light section, dark rounded card ── */
.numbered-steps.component--dark[class*="theme-"] {
	background: radial-gradient(120% 42% at 50% 42%, var(--svc-glow1) 0%, var(--svc-glow2) 48%, transparent 92%), var(--bg);
	border-top: none;
}
.numbered-steps.component--dark[class*="theme-"] .section-heading__title { color: var(--navy); }
.numbered-steps.component--dark[class*="theme-"] .section-heading__title em { color: var(--svc); }
.numbered-steps.component--dark[class*="theme-"] .section-heading__sub { color: var(--t2); }
.numbered-steps.component--dark[class*="theme-"] .section-heading__eyebrow { color: var(--svc); }
.numbered-steps.component--dark[class*="theme-"] .section-heading__eyebrow::before { background: var(--svc); }
.numbered-steps.component--dark[class*="theme-"] .numbered-steps__list {
	background: linear-gradient(145deg, #062224 0%, var(--svc-dark) 38%, var(--svc) 100%);
	border-radius: 28px; padding: 44px 40px; overflow: hidden;
}
.theme-plastic.numbered-steps.component--dark .numbered-steps__list { background: linear-gradient(145deg, #1d0a30 0%, var(--svc-dark) 38%, var(--svc) 100%); }
.theme-hair.numbered-steps.component--dark .numbered-steps__list { background: linear-gradient(145deg, #2e2408 0%, var(--svc-dark) 38%, var(--svc) 100%); }
.theme-bariatric.numbered-steps.component--dark .numbered-steps__list { background: linear-gradient(145deg, #032243 0%, var(--svc-dark) 38%, var(--svc) 100%); }
.numbered-steps.component--dark[class*="theme-"] .numbered-steps__step::before { color: var(--svc-bright); }
/* Themed dark steps: story card, not the corporate standards layout */
.numbered-steps.component--dark[class*="theme-"]::before,
.numbered-steps.component--dark[class*="theme-"]::after { display: none; }
.numbered-steps.component--dark[class*="theme-"] .container { display: block; }
.numbered-steps.component--dark[class*="theme-"] .section-heading { position: static; margin-bottom: 32px; }
.numbered-steps.component--dark[class*="theme-"] .section-heading__title { font-size: clamp(30px, 3.2vw, 44px); }
.numbered-steps.component--dark[class*="theme-"] .numbered-steps__list {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
}
.numbered-steps.component--dark[class*="theme-"] .numbered-steps__step {
	border: none; padding: 0; background: transparent;
	border-top: 1px dashed rgba(191,252,255,.28); padding-top: 22px; position: relative;
}
.numbered-steps.component--dark[class*="theme-"] .numbered-steps__step::before {
	position: static; display: block; margin-bottom: 8px; color: rgba(255,255,255,.85);
	font-size: 11px; letter-spacing: 2px;
}
.numbered-steps.component--dark[class*="theme-"] .numbered-steps__step p { color: rgba(255,255,255,.75); font-size: 12.5px; line-height: 1.7; }
@media (max-width: 860px) {
	.numbered-steps.component--dark[class*="theme-"] .numbered-steps__list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
	.numbered-steps.component--dark[class*="theme-"] .numbered-steps__list { grid-template-columns: 1fr; }
}

/* Themed benefit cards (ref .ben-card): the illustration sits in a small
   gradient tile, not full-bleed. Tile gradients vary per card; they are
   derived from the theme tokens so every service line keeps the ref's
   depth without hardcoding one palette. */
.card-grid--features.component[class*="theme-"] {
	--ben-deepest: color-mix(in srgb, var(--svc-dark) 72%, #000);
	--ben-deep: color-mix(in srgb, var(--svc) 78%, #000);
}
.card-grid--features.component[class*="theme-"] .card-grid__grid { grid-template-columns: repeat(3, 1fr) !important; gap: 16px; }
.card-grid--features.component[class*="theme-"] .card {
	padding: 32px 30px 30px; border-radius: 20px; position: relative; overflow: hidden;
	transition: transform .3s, box-shadow .3s;
}
.card-grid--features.component[class*="theme-"] .card:hover { transform: translateY(-4px); box-shadow: var(--sh2); }
.card-grid--features.component[class*="theme-"] .card::before {
	content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 3;
	background: linear-gradient(90deg, transparent, var(--svc-bright), transparent);
}
.card--grid-item__ben {
	width: 66px; height: 66px; border-radius: 16px; margin-bottom: 22px;
	position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;
	border: 1px solid rgba(191,252,255,.16);
	background: linear-gradient(150deg, var(--ben-deepest) 0%, var(--svc-dark) 45%, var(--svc) 100%);
}
.card--grid-item__ben::after {
	content: ''; position: absolute; bottom: -30px; right: -24px; width: 80px; height: 80px;
	border-radius: 50%; pointer-events: none;
	background: radial-gradient(ellipse, color-mix(in srgb, var(--svc-bright) 35%, transparent) 0%, transparent 70%);
}
.card--grid-item__ben svg { width: 40px; height: 40px; max-width: none; position: relative; z-index: 2; transition: transform .4s cubic-bezier(.16,1,.3,1); }
.card:hover .card--grid-item__ben svg { transform: scale(1.04); }
.card-grid--features.component[class*="theme-"] .card:nth-child(2) .card--grid-item__ben { background: linear-gradient(150deg, var(--svc-dark) 0%, var(--svc) 55%, var(--svc-mid) 100%); }
.card-grid--features.component[class*="theme-"] .card:nth-child(3) .card--grid-item__ben { background: linear-gradient(150deg, var(--ben-deepest) 0%, var(--ben-deep) 50%, var(--svc-bright) 100%); }
.card-grid--features.component[class*="theme-"] .card:nth-child(4) .card--grid-item__ben { background: linear-gradient(150deg, var(--svc-dark) 0%, var(--ben-deepest) 45%, var(--svc-mid) 100%); }
.card-grid--features.component[class*="theme-"] .card:nth-child(5) .card--grid-item__ben { background: linear-gradient(150deg, var(--svc) 0%, var(--svc-dark) 60%, var(--svc-mid) 100%); }
.card-grid--features.component[class*="theme-"] .card:nth-child(6) .card--grid-item__ben { background: linear-gradient(150deg, var(--ben-deepest) 0%, var(--svc-mid) 70%, var(--svc-bright) 100%); }
.card-grid--features.component[class*="theme-"] .card--grid-item__heading { font-size: 17px; font-weight: 800; letter-spacing: -.3px; margin-bottom: 10px; }
.card-grid--features.component[class*="theme-"] .card--grid-item__text { font-size: 13px; line-height: 1.75; color: var(--t2); }
@media (max-width: 1100px) { .card-grid--features.component[class*="theme-"] .card-grid__grid { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 768px) { .card-grid--features.component[class*="theme-"] .card-grid__grid { grid-template-columns: 1fr !important; } }

/* Ref .surg-card spotlight (lone surgeon on themed pages) */
/* ── The doctor card, large (was .surg-spot) ───────────────────────────
 * The same record opened out: photo on the right, everything else on the
 * left. The centred portrait version it replaces put the photo, the name
 * and two labelled rows in one narrow column, which read as a business
 * card rather than an introduction.
 */
.card--team-member--large {
	/* Photo left, as the doctor's own page has it — the card is the short
	   form of that page, so it should not mirror it. */
	display: grid; grid-template-columns: minmax(160px, 30%) 1fr; gap: 36px; align-items: stretch;
	background: var(--w); border: 1px solid var(--bdr); border-radius: 22px;
	box-shadow: var(--sh); padding: 32px 34px; text-align: left; max-width: 860px;
}
.card--team-member--large .card--team-member__photo {
	/* Capped, so a tall portrait does not stretch the card past the detail
	   beside it — the copy decides the height, the photo fills what it gets. */
	grid-column: 1; grid-row: 1; aspect-ratio: 4 / 5; width: 100%; max-height: 300px; margin: 0;
	border-radius: 18px; overflow: hidden;
	background: linear-gradient(145deg, var(--svc-dark), var(--svc));
	display: flex; align-items: center; justify-content: center; color: #fff; font-size: 40px;
}
.card--team-member--large .card--team-member__photo img { width: 100%; height: 100%; object-fit: cover; }
/* Stretched and stacked so the action can sit on the card's bottom edge
   rather than trailing the facts — the photo sets the height, and the
   space it leaves goes above the button instead of below it. */
.card--team-member--large .card--team-member__info { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; }
.card--team-member--large .card--team-member__name { font-size: 26px; font-weight: 800; letter-spacing: -.6px; color: var(--navy); margin: 0 0 4px; }
.card--team-member--large .card--team-member__role { font-size: 13px; font-weight: 600; letter-spacing: .3px; text-transform: none; color: var(--svc); margin: 0; }
/* The facts read as they do at the top of the doctor's own page (.pdoc-meta):
   label above value, ruled, side by side — so the card is recognisably the
   short form of the page it links to. */
.card--team-member__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 32px; margin: 22px 0 0; }
.card--team-member__meta > div { border-top: 1px solid var(--bdr); padding-top: 12px; }
.card--team-member__meta dt { font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--t3, #8a94a0); margin-bottom: 4px; }
.card--team-member__meta dd { font-size: 14px; font-weight: 600; color: var(--navy); margin: 0; }
@media (max-width: 560px) { .card--team-member__meta { grid-template-columns: 1fr; } }
.card--team-member__cta { display: inline-flex; align-self: flex-end; margin-top: auto; }
@media (max-width: 720px) {
	.card--team-member--large { grid-template-columns: 1fr; gap: 24px; padding: 28px 24px; }
	.card--team-member--large .card--team-member__photo { grid-column: 1; grid-row: 1; max-width: 220px; }
	.card--team-member--large .card--team-member__info { grid-column: 1; grid-row: 2; }
	.card--team-member__cta { align-self: flex-start; margin-top: 22px; }
}

/* Themed facility cards (ref .fac-card) */
.card--facility--themed { border-radius: 18px; overflow: hidden; }
.card--facility__vid {
	aspect-ratio: 16 / 9; position: relative; display: flex; align-items: center; justify-content: center;
	background: linear-gradient(150deg, var(--svc-dark, #083335) 0%, var(--svc, #008187) 55%, var(--svc-bright, #2CCCD3) 100%);
}
/* The photograph fills the panel; the gradient stays underneath for the
   places the client has not sent a picture of. */
.card--facility__vid--shot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card--facility__vid--shot .card--facility__play,
.card--facility__vid--shot .card--facility__vtag { z-index: 1; }
.card--facility__vid--shot::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(160deg, color-mix(in srgb, var(--svc-dark, #083335) 55%, transparent) 0%, transparent 55%);
}
.card--facility__vtag { position: absolute; top: 14px; left: 14px; font-size: 8.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.85); }
.card--facility__play { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.22); border: 1.5px solid rgba(255,255,255,.42); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; }
.card--facility__play::after { content: ''; width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 15px; border-color: transparent transparent transparent #fff; margin-left: 3px; }
.card--facility__pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; align-items: flex-start; align-content: flex-start; }
.card--facility__pill { font-size: 8.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 4px 10px; border-radius: 100px; background: var(--svc-tint, rgba(0,129,135,.08)); color: var(--svc, var(--blue)); border: 1px solid var(--svc-brd, rgba(0,129,135,.16)); }
.card--facility__dist { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.card--facility__dist-box { background: var(--bg); border: 1px solid var(--bdr2); border-radius: 10px; padding: 9px 12px; }
.card--facility__dist-box span { display: block; font-size: 9px; color: var(--t3, #8a94a0); font-weight: 600; letter-spacing: .3px; }
.card--facility__dist-box strong { font-size: 12px; color: var(--navy); font-weight: 700; }

/* ── Themed journey tiles (ref .fstage-card) ─────────────────────────── */
.journey-timeline__track--tiles .journey-timeline__stage { border-top: none; }
.journey-timeline__track--tiles .journey-timeline__stage::before { display: none; }
.journey-timeline__track--tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; list-style: none; margin: 0; padding: 0; }
.journey-timeline__track--tiles .journey-timeline__stage { background: var(--w); border: 1px solid var(--bdr); border-radius: 18px; overflow: hidden; padding: 0; transition: transform .3s, box-shadow .3s; }
.journey-timeline__track--tiles .journey-timeline__stage:hover { transform: translateY(-3px); box-shadow: var(--sh2); }
.journey-timeline__vid { aspect-ratio: 9 / 16; position: relative; display: flex; align-items: center; justify-content: center; background: linear-gradient(165deg, var(--svc-bright) 0%, var(--svc) 55%, var(--svc-dark) 100%); }
.journey-timeline__num { position: absolute; top: 12px; left: 12px; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--svc); font-family: var(--font-head); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.journey-timeline__play { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.22); border: 1.5px solid rgba(255,255,255,.42); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; }
.journey-timeline__play::after { content: ''; width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 13px; border-color: transparent transparent transparent #fff; margin-left: 3px; }
/* A stage tile with a video becomes a playable poster. */
.journey-timeline__vid--playable { border: 0; cursor: pointer; padding: 0; width: 100%; overflow: hidden; }
.journey-timeline__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.journey-timeline__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(3,14,30,.14) 0%, rgba(3,14,30,.12) 45%, rgba(3,14,30,.46) 100%); }
.journey-timeline__vid--playable .journey-timeline__num,
.journey-timeline__vid--playable .journey-timeline__play { position: relative; z-index: 2; }
.journey-timeline__vid--playable .journey-timeline__play { transition: transform .2s, background .2s; }
.journey-timeline__track--tiles .journey-timeline__stage:hover .journey-timeline__vid--playable .journey-timeline__play { transform: scale(1.1); background: rgba(255,255,255,.35); }
.journey-timeline__body { padding: 18px 16px 20px; }
.journey-timeline__body h3 { font-size: 13.5px; font-weight: 700; letter-spacing: -.1px; margin-bottom: 6px; }
.journey-timeline__body p { font-size: 12px; color: var(--t2); line-height: 1.6; }
/* ref .fstages breakpoints: 5 across, 3 at 1100, then a snap track */
@media (max-width: 1100px) { .journey-timeline__track--tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) {
	.journey-timeline__track--tiles {
		display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 10px;
	}
	.journey-timeline__track--tiles::-webkit-scrollbar { display: none; }
	.journey-timeline__track--tiles .journey-timeline__stage { flex: 0 0 62%; scroll-snap-align: start; }
	.journey-timeline__vid { aspect-ratio: 4 / 5; } /* shorter tile once it swipes */
}

/* ── Themed referral panel (ref .ref-wrap) ───────────────────────────── */
.refwrap { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }
.refwrap__dark { background: linear-gradient(150deg, #062224 0%, var(--svc-dark) 45%, var(--svc) 100%); border-radius: 24px; padding: 44px 42px; color: #fff; display: flex; flex-direction: column; justify-content: space-between; }
.refwrap__dark .section-heading__title, .refwrap__dark p { color: #fff; }
.refwrap__dark .section-heading__title { font-size: clamp(26px, 2.6vw, 36px); }
.refwrap__dark .section-heading__title em { color: var(--svc-bright); }
/* The eyebrow is a <p> too, so a bare `p` rule here was setting it to 14px
   and beating .section-heading__eyebrow's own 10px on specificity. The
   heading's parts style themselves; this is for the body copy. */
.refwrap__dark p:not([class*="section-heading"]) { font-size: 14px; line-height: 1.8; margin-bottom: 12px; }
.refwrap__dark p.refwrap__amt { font-family: var(--font-head); font-size: 64px; font-weight: 800; letter-spacing: -3px; line-height: 1; margin: 20px 0 0; color: #fff; }
.refwrap__dark p.refwrap__amt-sub { font-size: 13px; margin: 8px 0 0; }

/* The panel is dark, so it needs the accents meant for dark. Ours were
   coming from .component[class*="theme-"] .section-heading__* — (0,3,1),
   which outranks anything scoped to the panel alone — and those give --svc
   (#008187 on stem cell), the colour chosen for white backgrounds. On this
   gradient it all but disappears. ref .ref-lbl and .ref-l h2 em both use
   --turb, the bright teal, and the copy sits in the pale tint rather than
   plain white. */
.component[class*="theme-"] .refwrap__dark .section-heading__eyebrow,
.component[class*="theme-"] .refwrap__dark .section-heading__title em { color: var(--svc-bright); }
.component[class*="theme-"] .refwrap__dark .section-heading__eyebrow::before { background: var(--svc-bright); }
.refwrap__dark p:not([class*="section-heading"]) { color: color-mix(in srgb, var(--svc-pale) 78%, transparent); }
.refwrap__dark p.refwrap__amt-sub { color: color-mix(in srgb, var(--svc-pale) 72%, transparent); }
/* ── Method split (ref .method-grid) ────────────────────────────────── */
.methodwrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: 22px; align-items: stretch; }
.methodwrap__copy {
	background: var(--w); border: 1px solid var(--bdr); border-radius: 22px; padding: 34px;
	display: flex; flex-direction: column; justify-content: center;
}
.methodwrap__copy p { font-size: 14.5px; line-height: 1.85; color: var(--t2); margin-bottom: 16px; }
.methodwrap__copy p:last-of-type { margin-bottom: 0; }
.methodwrap__copy strong { color: var(--navy); font-weight: 700; }
.methodwrap__cta {
	align-self: flex-start; margin-top: 22px; display: inline-flex; align-items: center; gap: 8px;
	color: var(--blue); font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
	transition: gap .2s;
}
.methodwrap__cta:hover { gap: 13px; }
.methodwrap__why {
	position: relative; overflow: hidden; border-radius: 22px; padding: 34px;
	background: linear-gradient(150deg, color-mix(in srgb, var(--svc-bright) 22%, #fff) 0%, color-mix(in srgb, var(--svc-bright) 7%, #fff) 100%);
	border: 1px solid color-mix(in srgb, var(--svc-bright) 28%, transparent);
}
.methodwrap__why::before {
	content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
	background: linear-gradient(90deg, color-mix(in srgb, var(--svc-bright) 55%, #fff), var(--svc-bright), transparent);
}
.methodwrap__tag {
	display: inline-flex; align-items: center; background: var(--svc-bright); color: var(--navy);
	font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
	padding: 5px 14px; border-radius: 6px; margin-bottom: 20px;
}
.methodwrap__why h3 {
	font-family: var(--font-head); font-size: 22px; font-weight: 800; color: var(--navy); letter-spacing: -.4px;
	margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid color-mix(in srgb, var(--svc) 22%, transparent);
}
.methodwrap__why ul { list-style: none; margin: 0; padding: 0; }
.methodwrap__why li { position: relative; padding: 11px 0 11px 26px; font-size: 13.5px; line-height: 1.6; color: var(--t2); }
.methodwrap__why li::before { content: ''; position: absolute; left: 0; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--svc-bright); }
@media (max-width: 1100px) { .methodwrap { grid-template-columns: 1fr; } }

.refwrap__dark p.refwrap__amt em { font-style: normal; font-size: 34px; letter-spacing: -1px; color: var(--svc-bright); }
.refwrap__card { background: var(--w); border: 1px solid var(--bdr); border-radius: 24px; padding: 38px 36px; box-shadow: var(--sh); }
/* ref .ref-r h3 — each block title, with a rule above every one after the first */
.refwrap__card p strong { display: block; font-family: var(--font-head); font-size: 18px; font-weight: 800; color: var(--navy); letter-spacing: -.3px; margin: 0 0 16px; }
.refwrap__card ul + p strong { margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--bdr2); }
.refwrap__card ul { list-style: none; margin: 0; padding: 0; }
.refwrap__card ul li { padding: 13px 0 13px 26px; position: relative; font-size: 13px; color: var(--t2); line-height: 1.6; border-bottom: 1px solid var(--bdr2); }
.refwrap__card ul li:last-child { border-bottom: none; }
.refwrap__card ul li::before { content: '✓'; position: absolute; left: 0; top: 13px; color: var(--svc); font-weight: 800; }
.refwrap__card .buttons { margin-top: 28px; } /* ref .ref-cta */
@media (max-width: 860px) { .refwrap { grid-template-columns: 1fr; } }

/* ── Themed comparison table (ref .ctbl, extracted verbatim) ─────────── */
.comparison-table[class*="theme-"] .table-scroll { border: 1px solid var(--bdr); border-radius: 22px; box-shadow: var(--sh); }
.comparison-table[class*="theme-"] thead { background: var(--bg); }
.comparison-table[class*="theme-"] thead th { padding: 18px 20px; font-size: 10px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--t3, #8a94a0); border-bottom: 1px solid var(--bdr); }
.comparison-table[class*="theme-"] thead th:first-child:empty::before { content: 'What matters to you'; }
.comparison-table[class*="theme-"] thead th.is-highlight { color: var(--svc); background: color-mix(in srgb, var(--svc) 7%, transparent); box-shadow: inset 0 3px 0 var(--svc); }
.comparison-table[class*="theme-"] td, .comparison-table[class*="theme-"] tbody th { padding: 16px 20px; border-bottom: 1px solid var(--bdr2); font-size: 13px; color: var(--t2); vertical-align: middle; }
.comparison-table[class*="theme-"] tbody th { font-weight: 600; color: var(--navy); }
.comparison-table[class*="theme-"] td.is-highlight { background: color-mix(in srgb, var(--svc) 5%, transparent); font-weight: 600; }
.comparison-table[class*="theme-"] tr:last-child td, .comparison-table[class*="theme-"] tr:last-child th { border-bottom: none; }
/* ref .cp: the qualifier notes — Varies, Partial, Limited, N/A — are the
   smallest type in the table and the only gold. The cells holding a tick or
   a cross are unaffected, because those marks carry their own size. */
.comparison-table[class*="theme-"] td:not(.is-highlight) { color: #B5852E; font-weight: 700; font-size: 11.5px; letter-spacing: .2px; }
.comparison-table[class*="theme-"] td .check { color: var(--svc); }
.comparison-table[class*="theme-"] td .cross { color: var(--t3, #8a94a0); font-weight: 500; }

/* ref table.ctbl declares 'DM Sans' for the whole table, and only its group
   rows use the heading face. Our header row was inheriting var(--font-head),
   so the column titles were set in Montserrat where the reference sets them
   in the body face. Applies to every instance of the component — the table
   is on all four service pages and financing. */
.comparison-table table { font-family: var(--font-body); }
.comparison-table thead th { font-family: inherit; }
/* ref .ck / .cx: both marks are deliberately larger than the text around
   them, and the cross sits back at half strength. */
.comparison-table .check { font-size: 17px; font-weight: 800; }
.comparison-table .cross { font-size: 15px; opacity: .5; }

/* ── Themed aggregate rating card (ref) ──────────────────────────────── */
/* ref .testi-badge-row dimensions */
.testi-badge-card {
	background: var(--w); border: 1px solid var(--bdr); border-radius: 14px; box-shadow: var(--sh);
	padding: 14px 22px; margin: 4px 0 36px; display: inline-flex; align-items: center; gap: 14px; max-width: 720px;
}
.testi-badge-card__score { display: flex; flex-direction: column; }
.testi-badge-card__score .stars { color: #F5A524; font-size: 14px; letter-spacing: 2px; }
.testi-badge-card__score strong { font-family: var(--font-head); font-size: 26px; font-weight: 800; color: var(--navy); line-height: 1.1; letter-spacing: -1px; }
.testi-badge-card__count { font-size: 10px; font-weight: 500; color: var(--t2); margin-top: 2px; }
.testi-badge-card__div { width: 1px; height: 36px; background: var(--bdr); }
.testi-badge-card__tag { font-style: italic; font-size: 11px; color: var(--navy); line-height: 1.5; max-width: 200px; }
@media (max-width: 560px) { .testi-badge-card { flex-direction: column; align-items: flex-start; gap: 14px; } .testi-badge-card__div { display: none; } }

/* Step + small benefit icons (ref .step-ico / .ben-ico) */
.numbered-steps__ico svg { width: 48px; height: 48px; fill: none; stroke: currentColor; color: var(--svc, var(--blue)); display: block; margin: 18px auto 4px; }
/* Line-icon benefit cards (ref hair .ben-ico): a round tinted chip and
   centred copy, rather than the illustration tiles the other service
   lines use. Keyed off the icon artwork itself — these sets ship as
   24-viewBox line icons, the illustrations as 160-viewBox drawings. */
.card--grid-item__ben:has(svg[viewBox="0 0 24 24"]),
/* outranks the per-card illustration gradients below, which are keyed on
   :nth-child and would otherwise fill these flat chips */
.card-grid--features.component[class*="theme-"] .card .card--grid-item__ben:has(svg[viewBox="0 0 24 24"]) {
	width: 56px; height: 56px; border-radius: 50%; border: none; margin: 0 auto 20px;
	background: color-mix(in srgb, var(--svc-bright, var(--blue)) 14%, transparent);
}
/* the ref's line-icon benefit cards carry no top accent */
.card-grid--features.component[class*="theme-"] .card:has(.card--grid-item__ben svg[viewBox="0 0 24 24"])::before { content: none; }
.card--grid-item__ben:has(svg[viewBox="0 0 24 24"])::after { content: none; }
.card--grid-item__ben svg[viewBox="0 0 24 24"] { width: 26px; height: 26px; fill: none; stroke: var(--svc-bright, var(--blue)); stroke-width: 2; max-width: none; }
.card-grid--features.component[class*="theme-"] .card-grid__grid:has(svg[viewBox="0 0 24 24"]) { grid-template-columns: repeat(3, 1fr) !important; gap: 20px; }
.card-grid--features.component[class*="theme-"] .card:has(svg[viewBox="0 0 24 24"]) { padding: 34px 30px; border-radius: 20px; text-align: center; }
@media (max-width: 1100px) {
	.card-grid--features.component[class*="theme-"] .card-grid__grid:has(svg[viewBox="0 0 24 24"]) { grid-template-columns: 1fr !important; }
}

/* Themed itinerary day cards (ref .stage-card) */
/* ref .stages: five across, two at 1100, one at 768 */
.stages { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; align-items: stretch; }
.stage-card { background: var(--w); border: 1px solid var(--bdr); border-radius: 18px; overflow: hidden; transition: transform .3s, box-shadow .3s; }
.stage-card:hover { transform: translateY(-3px); box-shadow: var(--sh2); }
.stage-card__top {
	position: relative; padding: 22px 18px 20px; min-height: 118px; overflow: hidden;
	display: flex; flex-direction: column; justify-content: flex-end; color: #fff;
	background: linear-gradient(160deg, color-mix(in srgb, var(--svc) 45%, #fff) 0%, var(--svc) 55%, var(--svc-dark) 100%);
}
.stage-card:nth-child(even) .stage-card__top { background: linear-gradient(160deg, color-mix(in srgb, var(--svc) 25%, #fff) 0%, var(--svc) 50%, var(--svc-dark) 100%); }
.stage-card:last-child .stage-card__top { background: linear-gradient(160deg, color-mix(in srgb, var(--svc) 45%, #fff) 0%, var(--svc-dark) 55%, color-mix(in srgb, var(--svc-dark) 60%, #000) 100%); }
.stage-card__num { position: absolute; top: 12px; left: 12px; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--navy); font-family: var(--font-head); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.stage-card__day { font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.8); }
.stage-card__phase { font-family: var(--font-head); font-size: 15px; font-weight: 800; letter-spacing: -.2px; margin-top: 3px; }
.stage-card__list { list-style: none; margin: 0; padding: 16px 16px 20px; }
.stage-card__list li { position: relative; padding: 6px 0 6px 15px; font-size: 11.5px; color: var(--t2); line-height: 1.5; }
.stage-card__list li::before { content: ''; position: absolute; left: 0; top: 12px; width: 5px; height: 5px; border-radius: 50%; background: var(--svc); }
@media (max-width: 1100px) { .stages { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .stages { grid-template-columns: 1fr; } }

/* Card icon chips (ACF Icon dropdown) — tinted circle, theme accent */
.card--grid-item__icon, .tv-icon-chip { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: var(--svc-tint, rgba(15,76,129,.08)); margin-bottom: 16px; color: var(--svc, var(--blue)); }
.card--grid-item__icon .tv-mark--card, .tv-icon-chip .tv-mark--card { width: 22px; height: auto; display: block; }
.card--facility--themed .card--facility__address { display: flex; gap: 7px; align-items: flex-start; font-size: 12.5px; }
.tv-mark--addr { width: 11px; flex-shrink: 0; margin-top: 2px; color: var(--svc, var(--blue)); }
/* ref .fac-info-item svg: 13px, inheriting the line's colour. */
.tv-pin { width: 13px; height: 13px; flex-shrink: 0; margin-top: 2px; color: var(--svc, var(--blue)); }

/* ref .div-row: the quieter divider — a hairline the width of the content
   column, broken in the middle by three diamonds with the centre one a
   shade darker. Between peers, where a colour band would announce a
   change of subject that has not happened. */
.tv-divider--gems { display: flex; align-items: center; gap: 12px; max-width: 1320px; margin: 0 auto; padding: 0 5%; }
.tv-divider__line { flex: 1; height: 1px; background: var(--bdr); }
.tv-divider__gem { width: 8px; height: 8px; transform: rotate(45deg); background: var(--bdr); }
.tv-divider__gem--hi { background: color-mix(in srgb, var(--blue) 25%, transparent); }
/* Section divider (ref .color-band): 4px gradient strip, theme-tinted */
.tv-color-band { height: 4px; background: linear-gradient(90deg, transparent 0%, var(--svc, var(--blue)) 30%, var(--svc-dark, var(--navy)) 50%, var(--svc, var(--blue)) 70%, transparent 100%); }
/* Stem's band is the light pair, not the dark one: ref draws it
   --turl #BFFCFF at 30% into --turb (our --svc-bright) at 50%, so the
   divider reads as a tint under the hero rather than a hard rule. */
/* The generic band runs --svc into --svc-dark, so its centre is the darkest
   point and it reads as a heavy rule. Every reference band does the reverse:
   a light stop at 30/70% and the service itself at 50%, so the line lifts in
   the middle. Each page names its own pair, so each is declared. */
.tv-color-band.theme-stem { background: linear-gradient(90deg, transparent 0%, #BFFCFF 30%, var(--svc-bright, #2CCCD3) 50%, #BFFCFF 70%, transparent 100%); }
.tv-color-band.theme-hair { background: linear-gradient(90deg, transparent 0%, #F2CC52 30%, #DDB800 50%, #F2CC52 70%, transparent 100%); }
.tv-color-band.theme-bariatric { background: linear-gradient(90deg, transparent 0%, #46C1EF 30%, #1CA6DA 50%, #46C1EF 70%, transparent 100%); }
.tv-color-band.theme-plastic { background: linear-gradient(90deg, transparent 0%, #7C3AB7 30%, #5F2D8B 50%, #7C3AB7 70%, transparent 100%); }

/* Themed jump-nav pills (ref .sj-pill hover/active in the service accent) */
.component-jumpnav[class*="theme-"] .jumpnav__pill:hover { color: var(--svc); border-color: color-mix(in srgb, var(--svc) 40%, transparent); }
.component-jumpnav[class*="theme-"] .jumpnav__pill.is-active { color: #fff; background: var(--svc); border-color: var(--svc); box-shadow: 0 3px 12px var(--svc-tint2); }

/* Facility slider (3+ facilities scroll with the reviews' fade mask) */
.facility-grid .carousel__track { grid-auto-columns: min(320px, 85%); gap: 12px; } /* ref .fac-card / .hscroll */
.facility-grid .carousel__track .facility-grid__cell .card { height: 100%; }

/* Carousel arrows disappear at the ends of the track */
.carousel__arrow.is-off { opacity: 0; pointer-events: none; }
.carousel__arrow { transition: opacity .25s; }

/* ── Blog marquee (ref .blog-track, rebuilt scrollable) ──────────────── */
.rc-marquee-wrap { position: relative; margin: 0 calc(50% - 50vw); }
.rc-marquee-wrap::before, .rc-marquee-wrap::after {
	content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none;
}
.rc-marquee-wrap::before { left: 0; background: linear-gradient(90deg, var(--bg) 0%, transparent 100%); }
.rc-marquee-wrap::after { right: 0; background: linear-gradient(270deg, var(--bg) 0%, transparent 100%); }
.rc-marquee {
	display: flex; overflow-x: auto; scrollbar-width: none;
	/* bottom room for the full hover shadow (16px offset + 48px blur) —
	   clipped shadows read as a grey rule under the hovered card */
	padding: 10px 5% 72px; margin-bottom: -46px; cursor: grab; outline: none;
}
.rc-marquee::-webkit-scrollbar { display: none; }
.rc-marquee.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.rc-marquee__set { display: flex; align-items: stretch; gap: 14px; flex-shrink: 0; padding-right: 14px; }
.rc-marquee .card--newsroom { width: 320px; flex-shrink: 0; }

/* Marquee blog cards (ref .bc) */
.card--newsroom--mq { width: 320px; flex-shrink: 0; display: flex; flex-direction: column; padding: 0; background: var(--w); border: 1px solid var(--bdr); border-radius: 18px; overflow: hidden; transition: transform .3s, box-shadow .3s; }
.card--newsroom--mq:hover { transform: translateY(-4px); box-shadow: var(--sh2); }
.card--newsroom__media { display: flex; width: 100%; height: 160px; flex-shrink: 0; position: relative; overflow: hidden; }
.card--newsroom--mq-0 .card--newsroom__media { background: linear-gradient(135deg, color-mix(in srgb, var(--svc) 55%, #fff) 0%, var(--svc-dark) 100%); }
.card--newsroom--mq-1 .card--newsroom__media { background: linear-gradient(135deg, color-mix(in srgb, var(--svc) 15%, #fff) 0%, var(--svc) 100%); }
.card--newsroom--mq-2 .card--newsroom__media { background: linear-gradient(135deg, color-mix(in srgb, var(--svc) 45%, #fff) 0%, color-mix(in srgb, var(--svc) 50%, var(--svc-dark)) 100%); }
.card--newsroom--mq-3 .card--newsroom__media { background: linear-gradient(135deg, var(--svc) 0%, color-mix(in srgb, var(--svc-dark) 80%, #1d0a30) 100%); }
.card--newsroom__mtag { position: absolute; bottom: 12px; left: 12px; background: rgba(255,255,255,.92); color: var(--svc); font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 4px 11px; border-radius: 100px; backdrop-filter: blur(6px); }
.card--newsroom__mbody { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.card--newsroom__mtitle { display: block; font-family: var(--font-head); font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 8px; line-height: 1.35; letter-spacing: -.1px; }
.card--newsroom__mexc {
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4;
	overflow: hidden; font-size: 12px; color: var(--t2); line-height: 1.65;
}
.card--newsroom__mmeta { display: block; font-size: 10.5px; color: var(--t3, #8a94a0); margin-top: auto; padding-top: 12px; font-weight: 600; letter-spacing: .3px; }

/* ── Split FAQ section (ref .faq-layout): intro left, rows right. The row
   treatment itself is the component default, shared with the FAQ page. ── */
.faq-accordion .faq-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: start; }
.faq-accordion .faq-layout__ask { margin-top: 4px; }
.faq-accordion .faq-layout__ask.button--primary { background: var(--navy); border-color: var(--navy); }
@media (max-width: 1100px) { .faq-accordion .faq-layout { grid-template-columns: 1fr; gap: 40px; } } /* ref */

/* Marquee drift runs as a compositor animation while idle */
@keyframes rc-drift { to { transform: translateX(calc(-1 * var(--rc-loop, 0px))); } }
.rc-marquee--drift .rc-marquee__set {
	animation: rc-drift var(--rc-dur, 40s) linear infinite;
	animation-delay: var(--rc-delay, 0s);
	will-change: transform;
}
.rc-marquee--drift:hover .rc-marquee__set { animation-play-state: paused; }

/* ── Facility slider: subgrid rows align sections across cards ───────── */
/* Cards share rows only for the parts every facility has; everything
   below the address flows inside one slot, so a hotel's amenity list
   doesn't reserve an empty row on every clinic card. */
.facility-grid .carousel__track { grid-template-rows: repeat(6, auto); row-gap: 0; }
.facility-grid .carousel__track .facility-grid__cell { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; }
.facility-grid .carousel__track .card--facility--themed { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; height: auto; }
.facility-grid .carousel__track .card--facility--themed .card--facility__body { display: contents; }
.facility-grid .carousel__track .card--facility--themed .card--facility__vid { grid-row: 1; }
.facility-grid .carousel__track .card--facility--themed .card--facility__pills { grid-row: 2; }
.facility-grid .carousel__track .card--facility--themed .card--facility__name { grid-row: 3; }
.facility-grid .carousel__track .card--facility--themed .card--facility__address { grid-row: 4; }
.facility-grid .carousel__track .card--facility--themed .card--facility__rest { grid-row: 5; }
/* Row six, so the action docks to the foot of every card however much or
   little sits above it. Without a row of its own it was auto-placed into
   the first free cell, which on a card with no address is row four —
   between the name and the travel boxes, and unpadded. */
.facility-grid .carousel__track .card--facility--themed .card--facility__more {
	grid-row: 6; align-self: end; width: auto;
	margin: 0 24px; padding: 14px 0 22px;
}
/* tight vertical rhythm: elements' own margins, no row-gap, no defaults */
.facility-grid .carousel__track .card--facility--themed .card--facility__pills { margin: 0 0 14px; }
.facility-grid .carousel__track .card--facility--themed .card--facility__name { margin: 0 0 10px; }
.facility-grid .carousel__track .card--facility--themed .card--facility__address { margin: 0 0 16px; }
.facility-grid .carousel__track .card--facility--themed .card--facility__dist { margin: 0 0 6px; }
.facility-grid .carousel__track .card--facility--themed .card--facility__staff { margin: 8px 0 0; }
.facility-grid .carousel__track .card--facility--themed .card--facility__hours { margin: 8px 0 0; }
/* body's box is gone (display: contents) — its padding moves to the rows */
.facility-grid .carousel__track .card--facility--themed :is(.card--facility__pills, .card--facility__name, .card--facility__address, .card--facility__dist, .card--facility__label, .card--facility__desc, .card--facility__amenities, .card--facility__staff, .card--facility__hours, .card--facility__meta, .card--facility__tour) { padding-inline: 24px; }
.facility-grid .carousel__track .card--facility--themed .card--facility__pills { padding-top: 22px; }
.facility-grid .carousel__track .card--facility--themed :is(.card--facility__hours, .card--facility__meta, .card--facility__tour):last-child { padding-bottom: 8px; }

/* ── Themed itinerary matches ref .itin: cards on the section bg ────── */
.tabbed-content[class*="theme-"]#itinerary .tabbed-content__panel { background: none; border: none; border-radius: 0; padding: 0; box-shadow: none; }
/* heading row: title left, description right (ref .itin-head-row) */
.tabbed-content[class*="theme-"]#itinerary .section-heading { display: grid; grid-template-columns: 1.1fr 1fr; gap: 12px 56px; align-items: start; }
.tabbed-content[class*="theme-"]#itinerary .section-heading__eyebrow { grid-column: 1 / -1; }
.tabbed-content[class*="theme-"]#itinerary .section-heading__sub { margin-top: 6px; }
@media (max-width: 860px) { .tabbed-content[class*="theme-"]#itinerary .section-heading { grid-template-columns: 1fr; } }
/* CHOOSE YOUR LOCATION micro-label before the switcher pills */
.tabbed-content[class*="theme-"]#itinerary .tabbed-content__nav::before {
	content: 'Choose your location'; text-transform: uppercase; letter-spacing: 2px;
	font-size: 10px; font-weight: 700; color: var(--t3, #8a94a0); margin-right: 10px; align-self: center;
}
/* The label is a flex item like the pills, so on a phone it takes the first
   line and leaves one pill beside it with the other stranded below. It gets
   a line of its own and the pills start together underneath — the same
   arrangement the facility filter uses, because it is the same problem. */
/* 639, not 600: these two pills need 349px beside a 150px label, and the
   row only has room for all three from 640 up. Stopping at 600 left a
   40px band where the label went back beside the pills and one of them
   dropped to its own line again. */
@media (max-width: 639px) {
	.tabbed-content[class*="theme-"]#itinerary .tabbed-content__nav { gap: 8px; }
	.tabbed-content[class*="theme-"]#itinerary .tabbed-content__nav::before {
		flex: 0 0 100%; margin: 0 0 2px;
	}
	/* Both place names are long — "Baja California, Mexico" and "Cartagena,
	   Colombia" came to 21px more than the row, so one dropped to a line of
	   its own. The side padding comes in rather than the type: the pills
	   keep their height, and so their tap target. */
	.tabbed-content[class*="theme-"]#itinerary .tabbed-content__tab { padding-inline: 12px; }
}

/* Facility footer meta (ref .fac-meta): rule above, bold labels */
.card--facility__meta { font-size: 11.5px; color: var(--t3, #8a94a0); line-height: 1.7; border-top: 1px solid var(--bdr2); margin: 14px 24px 0 !important; padding: 14px 0 0 !important; }
.card--facility__meta strong { color: var(--t2); font-weight: 700; }
.facility-grid .carousel__track .card--facility--themed .card--facility__meta { margin-inline: 24px !important; padding-inline: 0 !important; }

/* ── Native lead form (LP-styled) ────────────────────────────────────── */
.lead-form { display: grid; gap: 13px; }
.lead-form__title { font-family: var(--font-head); font-size: 24px; font-weight: 800; letter-spacing: -.6px; color: var(--svc-dark, var(--navy)); margin: 0 0 8px; }
.lead-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.lead-form__control {
	width: 100%; font: inherit; font-size: 14.5px; color: var(--navy);
	padding: 14px 18px; border: 1.5px solid var(--bdr); border-radius: 14px; background: var(--w);
	transition: border-color .2s, box-shadow .2s; appearance: none;
}
.lead-form__control:focus { outline: none; border-color: var(--svc, var(--blue)); box-shadow: 0 0 0 3px var(--svc-tint, rgba(15,76,129,.1)); }
select.lead-form__control { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a94a0' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px; }
.lead-form__submit { width: 100%; justify-content: center; text-align: center; padding: 15px 22px; border-radius: 100px; font-size: 15px; }
.lead-form__note { font-size: 12px; color: var(--t3, #8a94a0); text-align: center; margin: 2px 0 0; }
.lead-form__error { color: #B42318; font-size: 13px; margin: 0; }
.lead-form__success { background: var(--svc-tint, rgba(15,76,129,.06)); border: 1px solid var(--svc-brd, var(--bdr)); border-radius: 14px; padding: 20px 22px; font-size: 14.5px; color: var(--t2); }
@media (max-width: 560px) { .lead-form__row { grid-template-columns: 1fr; } }

/* Ref footer bottom: centered legal, sentence links between hairlines.
   Ref rhythm (.ft-legal / .ft-btm): 26px below the first hairline, 16px
   between the two paragraphs, 22px down to the second hairline, 20px
   from it to the copyright. */
.site-footer__bottom { border-top: 1px solid rgba(190,225,255,.1); }
.site-footer__legal { max-width: none; text-align: center; font-size: 12px; line-height: 1.85; color: rgba(190,225,255,.8); }
.site-footer__legal a { color: var(--sky); text-decoration: underline; text-underline-offset: 2px; }
.site-footer__legal a:hover { color: #fff; }
.site-footer__legal-links { text-align: center; font-size: 12px; line-height: 1.85; color: rgba(190,225,255,.82); margin: 16px 0 0; padding-bottom: 22px; border-bottom: 1px solid rgba(190,225,255,.1); }
.site-footer__legal-links a { color: var(--sky); text-decoration: underline; text-underline-offset: 2px; }
.site-footer__legal-links a:hover { color: #fff; }
.site-footer__copyright { text-align: center; margin-top: 20px; }

/* Included banner compact styles at the ref's 768 breakpoint (they were
   firing at 860 — thin padding + wrapped eyebrow ~100px too early) */
@media (max-width: 768px) {
	.home .cta-banner__box { padding: 24px 20px; }
	.home .cta-banner .section-heading__sub { top: 24px; right: 20px; }
	.home .cta-banner__bullets { grid-template-columns: 1fr; gap: 14px; }
}
/* Below this the heading fills the box on its own, so a chip pinned to the
   top-right corner lands on top of the words rather than beside them.
   It drops into the flow underneath instead — the qualifier still reads as
   a qualifier there, where hiding it would lose the line entirely. */
@media (max-width: 600px) {
	.home .cta-banner .section-heading { margin-bottom: 16px; }
	.home .cta-banner .section-heading__sub {
		position: static; display: inline-block; margin: 10px 0 0;
	}
}

/* ── Client story strips (ref .scroll-hdr + .sc tiles) ──────────────── */
.scroll-hdr { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.scroll-hdr__label { font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--svc-mid, var(--blue)); }
.scroll-hdr__actions { display: flex; align-items: center; gap: 7px; }
/* ref .srev-stars / .srev-cnt: the score sits next to the label on the same
   line, gold stars and a navy figure, with the count trailing it quietly. */
.scroll-hdr__rating { display: inline-flex; align-items: center; gap: 5px; margin-right: auto; }
.scroll-hdr__stars { font-size: 12px; color: #F5C518; letter-spacing: 1px; }
.scroll-hdr__rating strong { font-family: var(--font-head); font-size: 13px; font-weight: 800; color: var(--navy); }
.scroll-hdr__count { font-size: 10.5px; color: var(--t3, #8496AA); margin-left: 7px; }
/* The label no longer owns the free space once a rating follows it. */
.scroll-hdr:has(.scroll-hdr__rating) { gap: 12px; }
.scroll-hdr .carousel__arrow {
	position: static; transform: none; width: 32px; height: 32px; border-radius: 50%;
	border: 1.5px solid var(--bdr); background: var(--w); color: var(--t3, #8a94a0);
	font-size: 12px; box-shadow: none; display: flex; align-items: center; justify-content: center;
}
.scroll-hdr .carousel__arrow:hover { border-color: var(--svc-mid, var(--blue)); color: var(--svc-mid, var(--blue)); }
.scroll-hdr__see-all {
	font-family: var(--font-head); font-size: 11px; font-weight: 700; letter-spacing: .3px;
	color: var(--navy); padding: 8px 16px; border: 1.5px solid var(--bdr);
	border-radius: 100px; background: var(--w); white-space: nowrap; transition: all .2s;
}
.scroll-hdr__see-all:hover { border-color: var(--svc-mid, var(--blue)); color: var(--svc-mid, var(--blue)); background: var(--svc-tint, rgba(15,76,129,.06)); }

.carousel--story .carousel__track { grid-auto-columns: 190px; }
.card--testimonial-story {
	width: 100%; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; padding: 0;
	border: 1px solid var(--bdr); position: relative; display: flex; align-items: center; justify-content: center;
	background: linear-gradient(145deg, color-mix(in srgb, var(--svc, var(--blue)) 45%, #fff) 0%, var(--svc, var(--blue)) 45%, color-mix(in srgb, var(--svc, var(--blue)) 40%, #02101a) 100%);
	transition: transform .3s, box-shadow .3s; cursor: pointer;
}
.card--testimonial-story:hover { transform: translateY(-3px); box-shadow: var(--sh2); }
/* ref .scbg variants, keyed by the service brand color */
.card--testimonial-story[style*="#1CA6DA"] { background: linear-gradient(145deg, #46C1EF 0%, #0F4C81 55%, #002B51 100%); }
.card--testimonial-story[style*="#2CCCD3"] { background: linear-gradient(145deg, #BFFCFF 0%, #2CCCD3 40%, #083335 100%); }
.card--testimonial-story[style*="#7C3AB7"] { background: linear-gradient(145deg, #C89EE8 0%, #7C3AB7 45%, #3E1563 100%); }
.card--testimonial-story[style*="#C8993A"] { background: linear-gradient(145deg, #F5D98A 0%, #C8993A 45%, #6B4A00 100%); }
/*
 * ref .gh1/.gh2/.gh3 — the reference cycles three mixes per service so a rail
 * does not read as one repeated tile. Derived from the service colour rather
 * than tabulated, so a new service line gets the same treatment for free.
 */
.carousel__cell:nth-child(3n+2) .card--testimonial-story {
	background: linear-gradient(145deg,
		color-mix(in srgb, var(--svc, var(--blue)) 22%, #fff) 0%,
		color-mix(in srgb, var(--svc, var(--blue)) 88%, #fff) 50%,
		color-mix(in srgb, var(--svc, var(--blue)) 30%, #06131e) 100%);
}
.carousel__cell:nth-child(3n+3) .card--testimonial-story {
	background: linear-gradient(145deg,
		color-mix(in srgb, var(--svc, var(--blue)) 52%, #fff) 0%,
		color-mix(in srgb, var(--svc, var(--blue)) 76%, #10202c) 50%,
		color-mix(in srgb, var(--svc, var(--blue)) 18%, #02090f) 100%);
}
.card--testimonial-story .card--testimonial__play {
	position: relative; z-index: 3; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.25);
	border: 1.5px solid rgba(255,255,255,.55); backdrop-filter: blur(8px);
	display: flex; align-items: center; justify-content: center;
}
.card--testimonial-story .card--testimonial__play::after {
	content: ''; width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 15px;
	border-color: transparent transparent transparent #fff; margin-left: 3px;
}
.card--testimonial__scrim {
	position: absolute; bottom: 0; left: 0; right: 0; padding: 16px 14px; z-index: 3;
	background: linear-gradient(0deg, rgba(0,0,0,.6) 0%, transparent 100%);
	/* block layout on purpose: a grid/flex item blockifies -webkit-box and
	   kills the line clamp. Fixed heights give the same alignment. */
	display: block;
}
/* The base scrim above is ref .scft exactly: 16px 14px, rgba(0,0,0,.6) to
   transparent. It is ample there because ref .scbg is a flat gradient — the
   reference's tiles carry no footage at all. Ours do, with whatever caption
   the Short has burned into the bottom third, which is precisely where this
   sits. So the reference value stays for flat tiles and only a tile with a
   real still gets the stronger ramp. */
.card--testimonial-story:has(.card--testimonial__poster) .card--testimonial__scrim {
	padding-top: 26px;
	background: linear-gradient(0deg, rgba(0,0,0,.90) 0%, rgba(0,0,0,.58) 52%, transparent 100%);
}
.card--testimonial__tag { /* ref .sctag-bar */
	background: var(--svc, var(--blue)); color: #fff; font-size: 8px; font-weight: 700;
	letter-spacing: 2px; text-transform: uppercase; padding: 3px 9px; border-radius: 100px;
	display: inline-block; margin-bottom: 4px;
}
/* ref .scft h4 / p: the client, then their procedures a shade quieter. */
.card--testimonial__name {
	display: block; color: #fff; font-size: 11.5px; font-weight: 600; line-height: 1.35;
}
.card--testimonial__sub {
	display: block; color: rgba(255,255,255,.65); font-size: 10px; margin-top: 3px;
	/* The reference wraps this line rather than truncating it — "Orthopedic
	   Protocol · 80% pain reduction" does not fit a 200px tile on one line and
	   is worth reading in full. Two lines is the ceiling, so a long pair still
	   cannot push the name out of the tile. */
	overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
@media (max-width: 560px) { .scroll-hdr { flex-wrap: wrap; } }

/* Review cards: ref .rc is 285px on home, 300px on the service pages, and
   only goes one-per-view at 768 (ours widened at 860, so 768–860 viewports
   got a single giant card) */
.testimonial-carousel .carousel__track { grid-auto-columns: min(285px, 86%); }
.testimonial-carousel.theme-stem .carousel__track, .testimonial-carousel.theme-plastic .carousel__track,
.testimonial-carousel.theme-hair .carousel__track, .testimonial-carousel.theme-bariatric .carousel__track { grid-auto-columns: min(300px, 86%); }
@media (max-width: 768px) {
	.carousel__track { grid-auto-columns: 84%; }
	/*
	 * Review cards keep their width on a phone. The reference puts no media
	 * query on .rc at all — it is 285px everywhere and the rail scrolls — and
	 * blowing one up to fill the viewport loses the edge of the next card,
	 * which is the only thing telling anyone the rail scrolls.
	 */
	.testimonial-cards .carousel__track { grid-auto-columns: min(190px, 60%); }
	.testimonial-cards.theme-stem .carousel__track, .testimonial-cards.theme-plastic .carousel__track,
	.testimonial-cards.theme-hair .carousel__track, .testimonial-cards.theme-bariatric .carousel__track { grid-auto-columns: min(200px, 60%); }
	.carousel--story .carousel__track { grid-auto-columns: 190px; }
}

/* ── Review cards: subgrid rows + clamped quote for horizontal rhythm ── */
.testimonial-carousel .carousel__track {
	grid-template-rows: repeat(3, auto);
	/* The track's gap applies to rows as well as columns, and each card spans
	   all three rows — so a 20px gap was adding 40px to every card's height.
	   ref .hscroll is a flex row, where gap only ever works sideways. 12px is
	   its value. */
	row-gap: 0; column-gap: 12px;
}
.testimonial-carousel .carousel__track > .card--testimonial-reviews {
	grid-row: 1 / -1; display: grid; grid-template-rows: subgrid;
}
.card--testimonial-reviews .card--testimonial__head { grid-row: 1; align-self: start; margin-bottom: 14px; } /* ref .rctop */

.card--testimonial-reviews .card--testimonial__quote { /* ref .rct */
	grid-row: 2; line-height: 1.8; margin: 0 0 10px; align-self: start;
	/* Clamped as a ceiling, not pinned to a height. Forcing five lines made
	   every card as tall as five lines even when the review was three, and
	   ref .rct sets no height at all — the subgrid row already levels the
	   cards, which is what the fixed height was reaching for. */
	display: -webkit-box; -webkit-box-orient: vertical;
	-webkit-line-clamp: 5; line-clamp: 5; overflow: hidden;
}
/* One line, in reading order, with the separator between the two values. */
.card--testimonial-reviews .card--testimonial__meta {
	display: flex; flex-wrap: nowrap; gap: 0; align-items: baseline;
}
.card--testimonial-reviews .card--testimonial__service + .card--testimonial__source::before {
	/* A hex escape is terminated by a space, so ' \00b7 ' put a space before
	   the dot and nothing after it. Non-breaking spaces carry their own
	   width and cannot be eaten by the escape or collapsed. */
	content: '\00a0\00b7\00a0';
}
/* ref .rcm is one colour and one weight across the whole line. The blue was
   for a link, but most of these have no original to link to, so it coloured
   a plain span. A link still gets the accent, on hover, where it means
   something. */
.card--testimonial-reviews .card--testimonial__source { color: inherit; font-weight: inherit; }
.card--testimonial-reviews a.card--testimonial__source:hover { color: var(--blue); }
.card--testimonial-reviews .card--testimonial__meta { grid-row: 3; align-self: start; align-content: start; }

/* ── Why TreVita (ref .why): two columns, mark under intro, slide-in rows ── */
.numbered-steps__intro .tv-mark--dmark { display: block; width: 80px; margin: 36px 0 0; color: #BEE1FF; opacity: .18; }
.numbered-steps.component--dark .section-heading__sub { margin-bottom: 0; }
/* ref .wtag: 8.5px at .3, a shade set back from the heading it introduces.
   Ours ran 10px at .6, which brought it forward to compete with it. */
.numbered-steps__tag {
	display: block; font-size: 8.5px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
	color: rgba(190,225,255,.3); margin-bottom: 5px;
}
.numbered-steps:not(.component--dark) .numbered-steps__tag { color: var(--t3, #8a94a0); }
/* ref .why::before / ::after: two radial washes bleeding off the corners,
   which is what "decorative corners" meant here — not the brand mark. */
.numbered-steps.component--dark { position: relative; overflow: hidden; }
.numbered-steps.component--dark::before,
.numbered-steps.component--dark::after {
	content: ''; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
}
.numbered-steps.component--dark::before {
	top: -100px; right: -8%; width: 700px; height: 700px;
	background: radial-gradient(ellipse, rgba(44,204,211,.18) 0%, rgba(15,76,129,.35) 40%, transparent 68%);
}
.numbered-steps.component--dark::after {
	bottom: -60px; left: 3%; width: 450px; height: 450px;
	background: radial-gradient(ellipse, rgba(28,166,218,.22) 0%, rgba(15,76,129,.3) 45%, transparent 68%);
}
/* The content has to sit above them. */
.numbered-steps.component--dark > .container { position: relative; z-index: 2; }
/* rows slide in from the right, staggered (ref .wrow / .wv). Only hidden
   once JS has armed the observer, so no-JS visitors always see content. */
html.tv-wr .numbered-steps__step[data-wr] {
	opacity: 0; transform: translateX(20px);
	transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
html.tv-wr .numbered-steps__step[data-wr].is-in { opacity: 1; transform: none; }

/* Honour reduced motion for scrolling too — CSS smooth otherwise wins over
   a script asking for an instant jump. */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ── Contact: client-guide note (ref .ctdiv) ─────────────────────────── */
.consultation-form__guide { border-top: 1px solid var(--bdr); padding-top: 36px; margin-top: 36px; }
.consultation-form__guide-label {
	font-size: 9.5px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
	/* ref .ctdiv-lbl takes the service accent — --bari, --pur, --tur — and on
	   hair a dedicated text gold, --acc-txt #7A5C00, because the brighter
	   gold does not hold as small type on white. --svc-label carries exactly
	   that and is declared only on hair; everywhere else this falls through
	   to --svc, and to --blue on an unthemed section. */
	color: var(--svc-label, var(--svc, var(--blue))); margin: 0 0 10px;
}
.consultation-form__guide-text { font-size: 13.5px; color: var(--t2); line-height: 1.75; max-width: 360px; margin: 0 0 16px; }
.consultation-form__guide-cta {
	display: inline-flex; align-items: center; gap: 8px;
	color: var(--svc-label, var(--svc, var(--blue))); font-size: 13.5px; font-weight: 700; transition: opacity .2s;
}
.consultation-form__guide-cta:hover { opacity: .75; }

/* ── Hero: ref rhythm + load stagger ─────────────────────────────────── */
/*
 * ref .hero-eyebrow: in a hero the label is a pill with a live dot rather
 * than the rule-and-caps used for section heads further down the page. It
 * is the first thing on the page and earns the weight.
 */
.hero .section-heading__eyebrow {
	margin-bottom: 28px; gap: 8px;
	background: rgba(15,76,129,.07); border: 1px solid rgba(15,76,129,.14);
	padding: 5px 14px 5px 8px; border-radius: 100px;
	font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: none;
}
.hero .section-heading__eyebrow::before { /* ref .hero-dot */
	width: 7px; height: 7px; border-radius: 50%; background: var(--blue);
	animation: tv-hero-dot 2.5s ease-in-out infinite;
}
@keyframes tv-hero-dot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
	.hero .section-heading__eyebrow::before { animation: none; }
}
/*
 * ref .cta-secondary: the second hero action is a text link, not a second
 * button. Two pills side by side give the page no primary action.
 */
.hero .hero__content .button--secondary {
	background: none; border-color: transparent; box-shadow: none;
}
.hero .hero__content .button--secondary:hover {
	background: none; border-color: transparent; gap: 13px; transform: none;
}
/* ref .cta-secondary — the service's own link colour on its pale ground
   (stem #008187, plastic #7C3AB7, bariatric #0F4C81); only an unthemed
   interior hero falls back to the site blue. */
.hero--interior .hero__content .button--secondary { padding: 14px 0; color: var(--svc-link, var(--blue)); }
/* ref .vcta-sec — white, because this one sits on footage. */
.hero--has-video .hero__content .button--secondary { padding: 15px 6px; color: #fff; font-size: 14px; }
/* ref .cta-main is a touch larger than the buttons further down the page. */
.hero--interior .hero__content .button--primary { padding: 14px 28px; font-size: 13.5px; }

/*
 * ref .vhero-eyebrow: over footage the pill is a light tint on a blur, not
 * the navy tint an interior hero uses — that one all but vanishes on a dark
 * frame, which is what left ours looking like bare text.
 */
.hero--has-video .section-heading__eyebrow {
	background: rgba(190,225,255,.1); border-color: rgba(190,225,255,.24);
	padding: 6px 16px 6px 12px; color: #DCEBFF; backdrop-filter: blur(6px);
	font-size: 10.5px; gap: 9px;
}
.hero--has-video .section-heading__eyebrow::before { background: var(--stem, #2CCCD3); }
/* ref .vtrust-n em */
.hero--has-video .hero__trust-n em { color: var(--sky, #BEE1FF); font-style: normal; }
/*
 * ref .hero padding:56px 5% 64px and .ticker-strip padding:20px — both sit
 * inside the spacing scale rather than replacing it, the same way
 * .hero--display already overrides its own md.
 */
.hero--interior.pt-md { padding-top: 56px; }
.hero--interior.pb-md { padding-bottom: 64px; }
.outcome-ticker.pt-md { padding-top: 20px; }
.outcome-ticker.pb-md { padding-bottom: 20px; }
/* ref .hero-sub: measured to 460px so the lede breaks where the reference
   breaks it, and ref .hero-ctas, which stands well clear of the ticker. */
.hero--interior .hero__content .section-heading__sub { max-width: 460px; margin-bottom: 36px; }
/* ref .hero-ctas has margin-bottom 0 — the space under the button row is
   the hero's own 64px padding and nothing else. This 52px stacked on top of
   it, so the band sat 116px below the button instead of 64px. */
.hero--interior .hero__content .buttons { margin-bottom: 0; }
.hero .section-heading__title { line-height: .99; letter-spacing: -2.4px; margin-bottom: 24px; }
.hero .section-heading__sub { font-size: 16px; line-height: 1.8; max-width: 480px; margin-bottom: 36px; }
.hero .buttons { gap: 12px; }
.hero-duo { gap: 0 32px; }
.hero-duo > .hero { padding-top: 68px; }
/* only hidden once the animation is armed in <head>, so no-JS still shows */
html.tv-wr .hero .tv-hero-in {
	opacity: 0; transform: translateY(14px);
	transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}
html.tv-wr .hero .section-heading__sub.tv-hero-in { transition-delay: .5s; }
html.tv-wr .hero .buttons.tv-hero-in { transition-delay: .65s; }
html.tv-wr .hero .tv-hero-in.is-in { opacity: 1; transform: none; }

/* ── Process Story (ref .story) ──────────────────────────────────────── */
.story-card {
	border-radius: 28px; overflow: hidden; position: relative;
	background: linear-gradient(145deg,
		color-mix(in srgb, var(--svc-dark, #083335) 70%, #000) 0%,
		var(--svc-dark, #083335) 38%,
		var(--svc, #008187) 100%);
}
/* ref .story::before — accent line across the top edge */
.story-card::before {
	content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 3;
	background: linear-gradient(90deg, transparent, var(--svc-bright, #2CCCD3), transparent);
}
/* ref .story::after — corner glow */
.story-card::after {
	content: ''; position: absolute; bottom: -140px; right: -100px; width: 420px; height: 420px;
	border-radius: 50%; pointer-events: none;
	background: radial-gradient(ellipse, color-mix(in srgb, var(--svc-bright, #2CCCD3) 26%, transparent) 0%, transparent 70%);
}
.story-card__inner { position: relative; z-index: 2; padding: 48px 44px 44px; }
.story-card__eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--svc-bright, #2CCCD3); margin: 0 0 14px; }
.story-card__lede { max-width: 620px; margin-bottom: 44px; }
.story-card__lede h3 { font-family: var(--font-head); font-size: clamp(26px, 2.8vw, 36px); font-weight: 800; letter-spacing: -1.1px; line-height: 1.1; color: #fff; margin: 0 0 14px; }
.story-card__lede p { font-size: 14.5px; line-height: 1.8; color: color-mix(in srgb, var(--svc-pale, #fff) 75%, transparent); margin: 0; } /* ref .story-lede p */
.story-card__flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; position: relative; }
.story-card__flow[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
.story-card__flow[data-count="5"] { grid-template-columns: repeat(5, 1fr); }
/* dashed connector behind the diamonds */
.story-card__line {
	position: absolute; top: 33px; left: 8%; width: 84%; height: 2px; pointer-events: none;
	background: repeating-linear-gradient(90deg, rgba(255,255,255,.28) 0 5px, transparent 5px 12px);
}
.story-card__node { position: relative; z-index: 2; }
.story-card__dia {
	width: 66px; height: 66px; margin-bottom: 20px; display: flex; align-items: center; justify-content: center;
	background: linear-gradient(150deg, color-mix(in srgb, var(--svc-bright, #2CCCD3) 22%, transparent), color-mix(in srgb, var(--svc-dark, #083335) 90%, transparent));
	border: 1px solid rgba(255,255,255,.3); border-radius: 22px 4px 22px 4px; transform: rotate(45deg);
}
.story-card__dia svg { width: 32px; height: 32px; transform: rotate(-45deg); }
.story-card__step { font-size: 9px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; color: var(--svc-bright, #2CCCD3); margin: 0 0 8px; }
.story-card__node-heading { font-family: var(--font-head); font-size: 17px; font-weight: 800; letter-spacing: -.3px; color: #fff; margin: 0 0 9px; }
.story-card__desc { font-size: 12.5px; line-height: 1.75; color: color-mix(in srgb, var(--svc-pale, #fff) 66%, transparent); margin: 0; } /* ref .story-desc */
.story-card__foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 44px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.14); }
.story-card__chip { /* ref .story-chip */
	font-size: 11.5px; font-weight: 600; color: var(--svc-pale, #fff);
	background: color-mix(in srgb, var(--svc-pale, #fff) 8%, transparent);
	border: 1px solid color-mix(in srgb, var(--svc-pale, #fff) 18%, transparent);
	border-radius: 999px; padding: 6px 14px;
}
@media (max-width: 900px) {
	.story-card__inner { padding: 38px 28px 34px; }
	.story-card__flow, .story-card__flow[data-count="3"], .story-card__flow[data-count="5"] { grid-template-columns: 1fr 1fr; gap: 24px; }
	.story-card__line { display: none; }
}
@media (max-width: 560px) { .story-card__flow, .story-card__flow[data-count="3"], .story-card__flow[data-count="5"] { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════════
   Experience page — ported from the reference's experience/index.html.
   The reference draws this page in the house navy/blue palette, so the
   themed variants below resolve the same --svc* tokens as the service
   lines; nothing here hardcodes a service colour.
   ═══════════════════════════════════════════════════════════════════ */

/* House palette: the corporate token set behind .theme-corporate */
.theme-corporate {
	--svc: #0F4C81; --svc-dark: #002B51; --svc-bright: #BEE1FF;
	--svc-base: #0F4C81; --svc-mid: #1C6BAE;
	--svc-tint: rgba(15,76,129,.07); --svc-tint2: rgba(15,76,129,.14);
	--svc-brd: rgba(15,76,129,.14);
	--svc-glow1: rgba(0,43,81,.08); --svc-glow2: rgba(190,225,255,.05);
}
/* ref .facilities/.travel/.transport/.app-section: one soft centre wash.
   Specificity matches the shared themed wash it replaces on this palette. */
.component.theme-corporate:not(.component--dark):not(.hero):not(.cta-banner) {
	position: relative; overflow: hidden;
	background: radial-gradient(120% 60% at 50% 40%, var(--svc-glow1) 0%, var(--svc-glow2) 44%, transparent 72%), var(--bg);
}
/* ref .sec-p / .hero-sub read a step smaller than the house default */
.component.theme-corporate .section-heading__sub { font-size: 15px; line-height: 1.8; max-width: 440px; }
.hero.theme-corporate .section-heading__sub { line-height: 1.85; max-width: 560px; }
/* ref .hero-h1 */
.hero.theme-corporate .section-heading__title { line-height: .97; letter-spacing: -2.5px; }

/* ── Facilities (ref .facilities-grid / .fac-card) ──────────────────── */
.facility-grid__grid--ref { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.card--facility--detail { border-radius: 20px; border-top: 4px solid var(--svc); }
.card--facility--detail .card--facility__vid {
	background: linear-gradient(145deg, color-mix(in srgb, var(--svc-dark) 72%, #000) 0%, var(--svc-dark) 50%, var(--svc) 100%);
}
/* ref .fac-video-label: scrimmed caption along the bottom edge */
.card--facility--detail .card--facility__vtag {
	top: auto; left: 0; right: 0; bottom: 0; padding: 14px 16px;
	background: linear-gradient(0deg, rgba(0,0,0,.5) 0%, transparent 100%);
	font-size: 8.5px; letter-spacing: 2px; color: rgba(255,255,255,.5);
}
.card--facility--detail .card--facility__body { padding: 20px 22px 24px; }
.card--facility--detail .card--facility__pills { gap: 6px; margin-bottom: 14px; }
.card--facility--detail .card--facility__pill { font-size: 8px; letter-spacing: 1.5px; padding: 3px 10px; }
.card--facility--detail .card--facility__name { font-size: 17px; font-weight: 800; letter-spacing: -.3px; margin: 0 0 16px; }
.card--facility__label {
	font-size: 8.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
	color: var(--t3); font-family: var(--font-body); margin: 0 0 7px;
}
.card--facility__label--hours { margin-top: 10px; margin-bottom: 5px; }
.card--facility--detail .card--facility__address { font-size: 11.5px; line-height: 1.55; margin: 0 0 14px; }
.card--facility--detail .card--facility__dist { gap: 6px; margin: 8px 0 14px; }
.card--facility--detail .card--facility__dist-box { border-radius: 8px; padding: 7px 10px; }
.card--facility--detail .card--facility__dist-box span { font-size: 9.5px; margin-bottom: 2px; }
.card--facility--detail .card--facility__dist-box strong { font-size: 11px; }
.card--facility--detail .card--facility__amenities { list-style: none; margin: 0 0 14px; padding: 0; }
/* ref .fac-inc li: the tick is a real glyph in a .who-ck span, not a drawn
   pseudo-element, so it sits in the flex row and the text wraps beside it.
   This rule kept an older ::before tick from before the span existed, and
   the card drew both. */
.card--facility--detail .card--facility__amenities li {
	display: flex; align-items: flex-start; gap: 8px;
	font-size: 11.5px; color: var(--t2); line-height: 1.55; padding: 5px 0; margin-bottom: 0;
}
.card--facility__divider { height: 1px; background: var(--bdr); margin: 14px 0; }
.card--facility__surgeon { font-size: 11.5px; color: var(--t2); line-height: 1.55; margin: 0; }
.card--facility__surgeon strong { color: var(--navy); font-weight: 600; }
.card--facility--detail .card--facility__hours { display: flex; gap: 14px; flex-wrap: wrap; }
.card--facility__hour { font-size: 10.5px; color: var(--t3); }
.card--facility__hour span { color: var(--svc); font-weight: 600; }
.card--facility__note { font-size: 11px; color: var(--t3); font-style: italic; line-height: 1.55; margin: 14px 0 0; }
@media (max-width: 768px) { .facility-grid__grid--ref { grid-template-columns: 1fr; } }

/* ── Travel info (ref .travel-tabs / .tinfo-card / .pre-post-col) ───── */
.tabbed-content--travel .section-heading { max-width: none; margin: 0 auto 52px; text-align: center; }
/* ref .sec-h2 carries no cap, so a centred head's title runs the full
   .sec-wrap. Ours kept the .tabbed-content 860px box, which has no auto
   margin — so the box sat against the left edge and its centred text
   landed left of the lede below it, wrapping a line the reference keeps
   whole. Centring text inside a box that is not itself centred is not
   centring. */
.tabbed-content--travel .section-heading__title { max-width: none; }
/* ref caps .sec-p at 440px and widens this one inline to 480px. The
   corporate override is .component.theme-corporate (0,3,0), so the plain
   --travel selector never landed — it needs .component to carry the same
   weight the reference gets for free from a style attribute. */
.component.tabbed-content--travel .section-heading__sub { max-width: 480px; margin-inline: auto; }
.tabbed-content--travel .tabbed-content__nav {
	display: flex; justify-content: center; gap: 0; flex-wrap: nowrap;
	border-radius: 14px; overflow: hidden; border: 1.5px solid var(--bdr);
	max-width: 560px; margin: 0 auto 48px; background: var(--w); box-shadow: var(--sh);
}
.tabbed-content--travel .tabbed-content__tab {
	flex: 1; padding: 14px 20px; text-align: center; font-size: 11.5px; font-weight: 600;
	letter-spacing: .3px; color: var(--t3); border: none; border-right: 1px solid var(--bdr);
	border-radius: 0; background: var(--w); box-shadow: none;
}
.tabbed-content--travel .tabbed-content__tab:last-child { border-right: none; }
.tabbed-content--travel .tabbed-content__tab[aria-selected="true"] { background: var(--svc-dark); color: #fff; box-shadow: none; }
.tabbed-content--travel .tabbed-content__tab:hover[aria-selected="false"] { color: var(--svc); background: color-mix(in srgb, var(--svc) 4%, transparent); } /* ref .travel-tab:hover */
.tabbed-content--travel .tabbed-content__panel { background: none; border: none; border-radius: 0; padding: 0; box-shadow: none; }
.tinfo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.tinfo-card { background: var(--w); border: 1px solid var(--bdr); border-radius: 16px; padding: 24px; transition: box-shadow .25s, transform .25s; }
.tinfo-card:hover { box-shadow: var(--sh2); transform: translateY(-3px); }
.tinfo-card__icon {
	width: 40px; height: 40px; border-radius: 10px; background: var(--svc-tint);
	border: 1px solid var(--svc-brd); display: flex; align-items: center; justify-content: center;
	margin-bottom: 14px; color: var(--svc);
}
.tinfo-card__icon .tv-mark--card, .tinfo-card__icon .tv-icon { width: 20px; height: 20px; display: block; color: var(--svc, var(--blue)); }
.tinfo-card h4 { font-size: 14px; font-weight: 800; color: var(--navy); margin: 0 0 8px; letter-spacing: -.2px; }
.tinfo-card p { font-size: 12.5px; color: var(--t2); line-height: 1.75; margin: 0; }
.tinfo-card p strong { color: var(--navy); font-weight: 600; }
.prepost { background: var(--w); border: 1px solid var(--bdr); border-radius: 18px; padding: 28px; max-width: 680px; margin: 0 auto; box-shadow: var(--sh); }
.prepost h3 { font-size: 16px; font-weight: 800; color: var(--navy); margin: 0 0 20px; letter-spacing: -.3px; padding-bottom: 14px; border-bottom: 1px solid var(--bdr); }
.prepost__badge {
	display: inline-block; font-size: 8px; font-weight: 700; letter-spacing: 2px;
	padding: 2px 9px; border-radius: 100px; margin-right: 8px; vertical-align: middle;
	background: var(--svc-tint2); border: 1px solid var(--svc-brd); color: var(--svc); font-family: var(--font-body);
}
.prepost__item { display: flex; gap: 10px; margin-bottom: 14px; align-items: flex-start; }
.prepost__item:last-child { margin-bottom: 0; }
.prepost__check {
	width: 18px; height: 18px; border-radius: 5px; background: var(--svc-tint);
	border: 1px solid var(--svc-brd); flex-shrink: 0; margin-top: 2px; position: relative;
}
.prepost__check::after {
	content: ''; position: absolute; left: 4px; top: 5px; width: 8px; height: 4px;
	border-left: 1.8px solid var(--svc); border-bottom: 1.8px solid var(--svc); transform: rotate(-45deg);
}
.prepost__item p { font-size: 12.5px; color: var(--t2); line-height: 1.65; margin: 0; }
/* Only the lead is a line of its own. The body carries its own emphasis —
   "for at least <strong>8 hours</strong>" — and a blanket display:block
   here put every one of those on its own line mid-sentence. */
.prepost__item p > strong:first-child { display: block; margin-bottom: 2px; }
.prepost__item strong { color: var(--navy); font-weight: 700; }
@media (max-width: 768px) {
	.tabbed-content--travel .tabbed-content__nav { flex-direction: column; }
	.tabbed-content--travel .tabbed-content__tab { border-right: none; border-bottom: 1px solid var(--bdr); }
	.tabbed-content--travel .tabbed-content__tab:last-child { border-bottom: none; }
}

/* ── Copy + feature list (ref .transport-inner / .concierge-grid) ───── */
.content-media--features .content-media__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.content-media--features .content-media__inner--panels-2 { grid-template-columns: 1fr 1.6fr 1fr; gap: 48px; align-items: stretch; }
.content-media__panel { display: flex; justify-content: center; }
.content-media__inner--panels-2 .content-media__panel--start { justify-content: flex-end; }
.content-media__inner--panels-2 .content-media__panel--end { justify-content: flex-start; }
.content-media--features .section-heading { margin-bottom: 16px; }
.content-media--features .section-heading__title { margin-bottom: 0; }
.content-media__lede { font-size: 15px; line-height: 1.8; color: var(--t2); max-width: 440px; margin-bottom: 32px; }
.vidpanel {
	aspect-ratio: 9 / 16; max-width: 280px; width: 100%; border-radius: 20px; overflow: hidden;
	position: relative; border: 1px solid var(--bdr); box-shadow: var(--sh2);
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(165deg, color-mix(in srgb, var(--svc) 22%, #fff) 0%, var(--svc) 50%, var(--svc-dark) 100%);
}
.content-media__inner--panels-2 .vidpanel { max-width: 240px; aspect-ratio: auto; height: 100%; min-height: 460px; }
.vidpanel__play {
	width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,.22);
	border: 1.5px solid rgba(255,255,255,.5); display: flex; align-items: center; justify-content: center;
}
.vidpanel__play::after {
	content: ''; width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 20px;
	border-color: transparent transparent transparent #fff; margin-left: 4px;
}
.vidpanel__label { position: absolute; bottom: 0; left: 0; right: 0; padding: 18px 20px; background: linear-gradient(0deg, rgba(0,0,0,.55) 0%, transparent 100%); }
.vidpanel__label p { font-family: var(--font-head); font-size: 13px; font-weight: 800; color: #fff; letter-spacing: -.1px; margin: 0; }
.vidpanel__label span { font-size: 10px; color: rgba(255,255,255,.6); }
.tf-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; }
.tf { display: flex; gap: 14px; align-items: flex-start; }
.tf__icon {
	width: 38px; height: 38px; border-radius: 10px; background: var(--svc-tint);
	border: 1px solid var(--svc-brd); display: flex; align-items: center; justify-content: center;
	flex-shrink: 0; color: var(--svc);
}
.tf__icon .tv-mark--card, .tf__icon .tv-icon { width: 20px; height: 20px; display: block; color: var(--svc, var(--blue)); }
.tf__text h5 { font-family: var(--font-head); font-size: 13px; font-weight: 800; color: var(--navy); margin: 0 0 3px; letter-spacing: -.1px; }
.tf__text p { font-size: 12px; color: var(--t2); line-height: 1.65; margin: 0; }
@media (max-width: 1100px) {
	.content-media--features .content-media__inner,
	.content-media--features .content-media__inner--panels-2 { grid-template-columns: 1fr; }
	.content-media__inner--panels-2 .content-media__panel--start,
	.content-media__inner--panels-2 .content-media__panel--end { justify-content: center; }
	.content-media__inner--panels-2 .vidpanel { aspect-ratio: 9 / 16; height: auto; min-height: 0; }
}

/* ── App promo (ref .app-section is light, not navy) ────────────────── */
.app-promo.theme-corporate { background: none; color: inherit; }
.app-promo.theme-corporate .section-heading__title { color: var(--navy); }
.app-promo.theme-corporate .section-heading__sub { color: var(--t2); font-size: 15px; line-height: 1.8; max-width: 440px; }
.app-promo.theme-corporate .section-heading__eyebrow { color: var(--svc); }
.app-promo.theme-corporate .section-heading__eyebrow::before { background: var(--svc); }
.app-promo.theme-corporate .section-heading { margin-bottom: 32px; }
.app-promo__inner { gap: 64px; }
.app-promo__stores { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 36px; }
.asb { display: flex; align-items: center; gap: 10px; background: var(--w); border: 1.5px solid var(--bdr); border-radius: 12px; padding: 10px 18px; transition: all .2s; }
.asb:hover { border-color: var(--svc-link, var(--svc)); box-shadow: var(--sh); }
.asb__icon { display: flex; color: var(--svc); }
.asb__icon .tv-mark--card, .asb__glyph { width: 22px; height: 22px; display: block; }
.asb__glyph { fill: currentColor; }
.asb__sub { font-size: 9px; color: var(--t3); letter-spacing: .5px; display: block; text-transform: uppercase; }
.asb__label { font-family: var(--font-head); font-size: 13px; font-weight: 800; color: var(--navy); letter-spacing: -.2px; display: block; }
.app-promo__media--mock { display: flex; justify-content: center; }
.app-mock {
	aspect-ratio: 9 / 16; max-height: 520px; border-radius: 28px; border: 1px solid var(--bdr);
	box-shadow: var(--sh2); position: relative; overflow: hidden;
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(165deg, color-mix(in srgb, var(--svc) 22%, #fff) 0%, var(--svc) 50%, var(--svc-dark) 100%);
}
.app-mock__inner { position: relative; z-index: 2; text-align: center; padding: 28px 22px; width: 100%; }
.app-mock__glyph { display: flex; justify-content: center; margin-bottom: 24px; color: rgba(255,255,255,.7); }
.app-mock__glyph .tv-mark--card { width: 32px; height: auto; display: block; }
.app-mock__title { font-family: var(--font-head); font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -.5px; margin: 0 0 6px; }
.app-mock__sub { font-size: 11px; color: rgba(255,255,255,.6); margin: 0 0 28px; }
.app-mock__stats { display: flex; gap: 12px; justify-content: center; margin-bottom: 22px; }
.app-mock__stat { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25); border-radius: 12px; padding: 12px 16px; text-align: center; flex: 1; }
.app-mock__stat-val { font-family: var(--font-head); font-size: 24px; font-weight: 800; color: #fff; letter-spacing: -1px; display: block; }
.app-mock__stat-lbl { font-size: 8.5px; color: rgba(255,255,255,.55); margin-top: 3px; letter-spacing: .5px; display: block; }
.app-mock__goals { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 10px; padding: 14px; }
.app-mock__goals h6 { font-size: 9px; font-weight: 700; color: rgba(255,255,255,.4); letter-spacing: 1.5px; text-transform: uppercase; margin: 0 0 10px; font-family: var(--font-body); }
.app-mock__bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.app-mock__bar-lbl { font-size: 9.5px; color: rgba(255,255,255,.5); width: 60px; text-align: right; flex-shrink: 0; }
.app-mock__bar { flex: 1; height: 5px; background: rgba(255,255,255,.12); border-radius: 3px; overflow: hidden; }
.app-mock__bar-fill { height: 100%; border-radius: 3px; display: block; }
.app-mock__bar-fill--0 { background: rgba(255,255,255,.9); }
.app-mock__bar-fill--1 { background: rgba(255,255,255,.7); }
.app-mock__bar-fill--2 { background: color-mix(in srgb, var(--svc-bright) 80%, transparent); }
@media (max-width: 1100px) { .app-promo__inner { grid-template-columns: 1fr; } }

/* ── CTA strip (ref .cta-strip) ─────────────────────────────────────── */
.cta-banner--strip.component[class*="theme-"]:not(.component--dark):not(.hero) { background: var(--navy); }
.cta-banner--strip { position: relative; overflow: hidden; }
/* ref .cta-strip is a flat 72px band; our default md padding scales down
   with the viewport, so the strip read tight. Other spacing choices from
   the block's own controls still win. */
.cta-banner--strip.pt-md { padding-top: 72px; }
.cta-banner--strip.pb-md { padding-bottom: 72px; }
.cta-banner__glow {
	position: absolute; top: -180px; left: 50%; transform: translateX(-50%);
	width: 900px; height: 900px; border-radius: 50%; pointer-events: none;
	background: radial-gradient(ellipse, color-mix(in srgb, var(--svc) 55%, transparent) 0%, color-mix(in srgb, var(--svc) 40%, transparent) 35%, transparent 65%);
}
.cta-banner--strip .cta-banner__inner { position: relative; z-index: 2; }
.cta-banner--strip .cta-banner__box { max-width: 620px; margin-inline: auto; }
.cta-banner--strip .section-heading { max-width: none; margin-bottom: 0; }
.cta-banner--strip.component[class*="theme-"] .section-heading__eyebrow { color: rgba(190,225,255,.45); margin-bottom: 14px; }
.cta-banner--strip.component[class*="theme-"] .section-heading__eyebrow::before { background: rgba(190,225,255,.3); }
.cta-banner--strip .section-heading__title { font-size: clamp(30px, 4vw, 48px); letter-spacing: -1.5px; line-height: 1.04; margin-bottom: 14px; }
.cta-banner--strip.component[class*="theme-"] .section-heading__title em { color: var(--sky); }
.cta-banner--strip.component[class*="theme-"] .section-heading__sub { font-size: 14.5px; color: rgba(190,225,255,.45); line-height: 1.8; max-width: none; margin: 0 0 36px; }
.cta-banner--strip .buttons { margin-top: 0; }
.cta-banner--strip.component[class*="theme-"] .button--primary { background: var(--sky); border-color: var(--sky); color: var(--navy); padding: 14px 32px; font-size: 13.5px; letter-spacing: .2px; }
.cta-banner--strip.component[class*="theme-"] .button--primary:hover { background: #fff; border-color: #fff; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(6,14,24,.22); } /* ref .cta-main:hover */
.cta-banner--strip .button--secondary { color: rgba(190,225,255,.7); border-color: rgba(190,225,255,.2); padding: 14px 24px; font-size: 13.5px; font-weight: 600; }
.cta-banner--strip .button--secondary:hover { border-color: rgba(190,225,255,.5); color: #fff; background: none; }
/* ref: the facilities and travel headings are centred over their grids */
.facility-grid:has(.facility-grid__grid--ref) .section-heading { text-align: center; max-width: none; margin: 0 auto 20px; }
/* ref pairs every centred head with margin:14px auto 0 on its .sec-p. Ours
   centred the head and left the capped lede on margin:14px 0 0, so a 440px
   box sat against the left edge under a centred title. A centred head has to
   centre the measure, not just the text inside it. */
.facility-grid:has(.facility-grid__grid--ref) .section-heading__sub { margin-inline: auto; }
.facility-grid:has(.facility-grid__grid--ref) .filter-buttons { justify-content: center; margin: 32px 0 48px; }
.facility-grid:has(.facility-grid__grid--ref) .filter-buttons button { padding: 7px 18px; font-size: 11px; }

/* ── Hero border-crossing map (ref .border-anim-svg) ────────────────── */
@keyframes tv-map-travel { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } }
@keyframes tv-map-border { 0%, 100% { opacity: .15; } 50% { opacity: .4; } }
@keyframes tv-map-node   { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
.hero-map {
	position: absolute; right: max(5%, calc(50% - 594px)); top: 50%; transform: translateY(-50%);
	width: min(42%, 520px); height: auto; pointer-events: none; z-index: 1; opacity: .72;
}
.hero-map__border { animation: tv-map-border 3s ease-in-out infinite; }
.hero-map__node { animation: tv-map-node 2.5s ease-in-out infinite; }
.hero-map__node--b { animation-delay: .8s; }
.hero-map__dot {
	offset-path: path('M 420 60 C 380 80, 340 90, 310 120 C 280 148, 265 170, 250 200');
	offset-distance: 0%; animation: tv-map-travel 4s cubic-bezier(.4,0,.2,1) infinite;
	transform-box: fill-box; transform-origin: center;
}
.tv-noanim .hero-map__border, .tv-noanim .hero-map__node, .tv-noanim .hero-map__dot { animation: none; }
@media (max-width: 768px) { .hero-map { display: none; } }

/* ── Partner doctor detail page (ref /partner-doctor/) ───────────────────
   The reference ships one file per service, differing only in --accent,
   --accent-soft and --accent-light. Those map onto the theme tokens, so a
   single template covers every service line. */
.pdoc {
	--pd-accent: var(--svc-accent, var(--svc, var(--blue)));
	--pd-soft: color-mix(in srgb, var(--pd-accent) 9%, transparent);
	--pd-light: var(--svc-bright, #4E86C2);
}
.pdoc-hero { position: relative; overflow: hidden; background: var(--bg); }
.pdoc-hero__mesh { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.pdoc-hero__mesh::before {
	content: ''; position: absolute; top: -160px; right: -120px; width: 560px; height: 560px;
	border-radius: 50%; background: radial-gradient(ellipse, var(--pd-soft) 0%, transparent 66%);
}
.pdoc-profile { position: relative; z-index: 2; padding: 52px 0 60px; display: grid; grid-template-columns: 340px 1fr; gap: 52px; align-items: center; }
.pdoc-photo {
	aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; border: 1px solid var(--bdr); box-shadow: var(--sh2);
	background: linear-gradient(150deg, var(--pd-soft), rgba(255,255,255,.6));
	display: flex; align-items: center; justify-content: center; color: var(--pd-accent);
}
.pdoc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdoc-photo .tv-mark { width: 54px; height: auto; opacity: .5; }
.pdoc-tag {
	display: inline-flex; align-items: center; gap: 7px; margin: 0 0 18px;
	font-size: 9.5px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
	color: var(--pd-accent); background: var(--pd-soft); border: 1px solid var(--pd-accent);
	padding: 6px 14px; border-radius: 100px;
}
.pdoc-tag .tv-mark { width: 8px; height: 10px; }
.pdoc-name { font-family: var(--font-head); font-size: clamp(34px, 4.4vw, 52px); font-weight: 800; letter-spacing: -1.5px; color: var(--navy); line-height: 1.02; margin: 0 0 8px; }
.pdoc-spec { font-size: 15px; font-weight: 600; color: var(--t2); margin: 0 0 6px; }
.pdoc-spec b { color: var(--pd-accent); font-weight: 700; }
.pdoc-facility { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--t2); margin: 0 0 26px; }
.pdoc-facility b { color: var(--navy); font-weight: 700; }
.pdoc-facility .tv-mark { width: 15px; height: 15px; color: var(--pd-accent); flex-shrink: 0; }
.pdoc-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 32px; max-width: 520px; margin: 0; }
.pdoc-meta > div { border-top: 1px solid var(--bdr); padding-top: 12px; }
.pdoc-meta dt { font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--t3, #8a94a0); margin-bottom: 4px; }
.pdoc-meta dd { font-size: 14px; font-weight: 600; color: var(--navy); margin: 0; }
.pdoc-band { height: 4px; background: linear-gradient(90deg, transparent 0%, var(--pd-light) 30%, var(--pd-accent) 50%, var(--pd-light) 70%, transparent 100%); }
.pdoc-about { padding: 76px 0; background: var(--w); border-bottom: 1px solid var(--bdr); }
.pdoc-about__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: start; }
.pdoc-about__title { font-family: var(--font-head); font-size: clamp(26px, 3vw, 38px); font-weight: 800; letter-spacing: -1px; color: var(--navy); line-height: 1.06; margin: 14px 0 16px; }
.pdoc-about__title em { font-style: italic; color: var(--pd-accent); }
.pdoc-about__text, .pdoc-about__text p { font-size: 14.5px; line-height: 1.85; color: var(--t2); }
.pdoc .section-heading__eyebrow { color: var(--pd-accent); }
.pdoc .section-heading__eyebrow::before { background: var(--pd-accent); }
.pdoc-creds { display: flex; flex-direction: column; }
.pdoc-cred { display: grid; grid-template-columns: 26px 1fr; gap: 16px; align-items: center; padding: 13px 0 13px 16px; border-left: 3px solid var(--pd-accent); border-bottom: 1px solid var(--bdr2); }
.pdoc-cred:first-child { border-top: 1px solid var(--bdr2); }
.pdoc-cred__ico { width: 26px; height: 26px; border-radius: 50%; background: var(--pd-soft); color: var(--pd-accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pdoc-cred__ico::before { content: '✓'; font-size: 12px; font-weight: 800; }
.pdoc-cred p { font-size: 13.5px; line-height: 1.6; color: var(--t2); margin: 0; }
.pdoc-cred p b { color: var(--navy); font-weight: 700; }
.pdoc-pa { padding: 76px 0; background: var(--bg); }
.pdoc-pa__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
/* One column of content and nothing beside it: give it the whole width
   rather than leaving it wrapping in a strip against dead space. */
.pdoc-grid--solo { grid-template-columns: 1fr; }
.pdoc-pa__sub { font-size: 13.5px; line-height: 1.8; color: var(--t2); margin: 12px 0 22px; max-width: 420px; }
.pdoc-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.pdoc-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--navy); background: var(--w); border: 1.5px solid var(--bdr); padding: 8px 16px; border-radius: 100px; transition: border-color .2s; }
.pdoc-chip::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--pd-accent); flex-shrink: 0; }
.pdoc-chip:hover { border-color: var(--pd-accent); }
.pdoc-accred { display: flex; flex-direction: column; gap: 10px; }
.pdoc-accred__row { display: flex; align-items: center; gap: 16px; background: var(--w); border: 1px solid var(--bdr); border-radius: 14px; padding: 14px 18px; transition: box-shadow .2s; }
.pdoc-accred__row:hover { box-shadow: var(--sh); }
.pdoc-accred__logo { width: 64px; min-width: 64px; height: 40px; border-radius: 8px; background: var(--bg); border: 1.5px dashed var(--bdr2); display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 8px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--t3, #8a94a0); }
.pdoc-accred__logo img { width: 100%; height: 100%; object-fit: contain; }
.pdoc-accred__row h3 { font-family: var(--font-head); font-size: 13px; font-weight: 700; color: var(--navy); margin: 0 0 2px; }
.pdoc-accred__row p { font-size: 11.5px; color: var(--t2); line-height: 1.4; margin: 0; }
.pdoc-cta { background: var(--navy); position: relative; overflow: hidden; border-top: 4px solid var(--pd-accent); padding: 76px 0; }
.pdoc-cta::before {
	content: ''; position: absolute; top: -120px; right: -6%; width: 620px; height: 620px; border-radius: 50%;
	background: radial-gradient(ellipse, var(--pd-soft) 0%, rgba(15,76,129,.28) 42%, transparent 68%);
	pointer-events: none; opacity: .9;
}
.pdoc-cta__in { position: relative; z-index: 2; max-width: 820px; }
.pdoc-cta__lbl { display: inline-flex; align-items: center; gap: 10px; font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--pd-accent); margin: 0 0 18px; }
.pdoc-cta__lbl::before { content: ''; display: block; width: 20px; height: 2px; background: var(--pd-accent); border-radius: 1px; }
.pdoc-cta__quote { font-family: var(--font-head); font-size: clamp(21px, 2.6vw, 30px); font-weight: 700; color: #fff; letter-spacing: -.5px; line-height: 1.35; margin: 0 0 14px; }
.pdoc-cta__quote em { font-style: italic; color: var(--sky); }
.pdoc-cta__sub { font-size: 14px; color: rgba(190,225,255,.55); line-height: 1.8; max-width: 560px; margin: 0 0 32px; }
.pdoc-cta__btns { display: flex; gap: 12px; flex-wrap: wrap; }
.pdoc-cta__btns .button--primary { background: var(--pd-accent); border-color: var(--pd-accent); color: #fff; }
.pdoc-cta__btns .button--primary:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,.28); background: var(--pd-accent); border-color: var(--pd-accent); }
.pdoc-cta__btns .button--secondary { color: #fff; border-color: rgba(190,225,255,.28); }
.pdoc-cta__btns .button--secondary:hover { border-color: var(--sky); background: rgba(190,225,255,.08); }
@media (max-width: 900px) {
	.pdoc-profile { grid-template-columns: 1fr; gap: 32px; }
	.pdoc-photo { max-width: 320px; }
	.pdoc-about__grid, .pdoc-pa__grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 560px) {
	.pdoc-meta { grid-template-columns: 1fr; }
	.pdoc-cta__btns { flex-direction: column; }
	.pdoc-cta__btns .button { justify-content: center; }
}
/* ref: the whole surgeon card is a link to that doctor's detail page */
.card--team-member { position: relative; }
.card--team-member__link { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.card--team-member:hover { border-color: var(--svc, var(--blue)); }

/* ── Team member card — "Card" layout (ref .tc) ──────────────────────────
   Same component as the mini card; the portrait fills the top of the tile
   and the location line becomes the ref's small uppercase city line. */
.card--team-member--card {
	display: block; padding: 0; overflow: hidden; border-radius: 16px;
	width: 100%; align-items: stretch;
}
.card--team-member--card .card--team-member__photo,
.card--team-member--card .card--team-member__initials {
	width: 100%; aspect-ratio: 1; border-radius: 0; flex-shrink: 1;
}
.card--team-member--card .card--team-member__initials { font-size: 34px; }
.card--team-member--card .card--team-member__info { padding: 14px 16px; }
.card--team-member--card .card--team-member__name { font-size: 13px; font-weight: 700; margin: 0 0 3px; }
.card--team-member--card .card--team-member__role {
	font-size: 11px; font-weight: 400; line-height: 1.5; color: var(--t2);
	letter-spacing: normal; text-transform: none; margin: 0;
}
.card--team-member--card .card--team-member__loc {
	font-size: 8.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
	color: var(--svc-mid, var(--blue)); margin: 6px 0 0;
}
.card--team-member--card:hover { transform: translateY(-3px); box-shadow: var(--sh2); }
/* ref .team-scroll: fixed 185px tiles, tighter gutter than the wide cards */
.team-grid--card .carousel__track { grid-auto-columns: 185px; gap: 12px; }
.team-grid--card .team-grid__row { grid-template-columns: repeat(auto-fill, 185px); gap: 12px; }
/* On a phone the 185px tile is the wrong answer: two of them fit, the rest
   sit off-screen behind a horizontal scroll nobody finds, and each card is
   narrower than the name on it. They stack there — one per row, full width,
   in the reading direction the rest of the page uses. Only there: at any
   width with room for a row of tiles, a row of tiles is the design. */
@media (max-width: 560px) {
	.team-grid--card .carousel__track {
		grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr;
		gap: 14px; overflow-x: visible; scroll-snap-type: none;
	}
	.team-grid--card .team-grid__row { grid-template-columns: 1fr; gap: 14px; }
	/* Nothing scrolls sideways any more, so the arrows have nothing to do. */
	.team-grid--card .carousel__arrow { display: none; }
}
/* ref .tg-hdr: the team strip label sits on a rule, a size up from the
   service-page story strips that share .scroll-hdr */
.team-grid .scroll-hdr { margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1.5px solid var(--bdr); }
.team-grid .scroll-hdr__label { font-size: 12px; letter-spacing: 2.5px; color: var(--t3, #8496AA); }
.team-grid .scroll-hdr .carousel__arrow { width: 32px; height: 32px; font-size: 12px; }

/* ══ About (ref /about/) ═══════════════════════════════════════════════
   Hero eyebrow pill, spectrum divider, certification card, Purpose /
   Vision / Values gradient cards, founder story, growth timeline.      */

/* ref .hero-eyebrow / .hero-dot — shared by every corporate hero. */
.hero.theme-corporate .section-heading__eyebrow {
	gap: 8px; background: rgba(15,76,129,.07); border: 1px solid rgba(15,76,129,.14);
	padding: 5px 14px 5px 8px; border-radius: 100px; margin-bottom: 28px;
	font-size: 11px; font-weight: 600; line-height: normal; letter-spacing: .5px;
	text-transform: none; color: var(--blue);
}
.hero.theme-corporate .section-heading__eyebrow::before {
	width: 7px; height: 7px; border-radius: 50%; background: var(--blue);
	animation: tv-hero-dot 2.5s ease-in-out infinite;
}
@keyframes tv-hero-dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.55); opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
	.hero.theme-corporate .section-heading__eyebrow::before { animation: none; }
}
/* Centring an eyebrow drops its leading dash, which would read oddly under a
   centred headline. The corporate pill's dot is not a dash beside the label —
   it is part of the pill — so it stays. */

/* ── FAQ hero (ref .faq-hero) ──────────────────────────────────────────
   A pale blue falling to the page grey, under the bright hero mesh. Giving
   this hero the corporate palette for its pill eyebrow also handed it that
   palette's section wash — a pale navy meant for whole sections, which on a
   hero reads as a smudge — so the mesh is stated back at the ref's values. */
.page-faq .hero {
	background: linear-gradient(180deg, #EEF5FF 0%, var(--bg) 100%);
	padding-block: 72px 56px;
}
.page-faq .hero[class*="theme-"]:not(.hero--has-video)::before {
	background: radial-gradient(ellipse, rgba(190,225,255,.55) 0%, rgba(28,166,218,.18) 35%, transparent 68%);
}
.page-faq .hero[class*="theme-"]:not(.hero--has-video)::after {
	background: radial-gradient(ellipse, rgba(15,76,129,.14) 0%, transparent 65%);
}
/* ref .faq-h1 / .faq-sub: a step larger than the shared minimal hero, on a
   narrower lede column. */
.page-faq .hero .section-heading__title {
	font-size: clamp(40px, 5vw, 66px); line-height: .98; letter-spacing: -2px; margin-bottom: 20px;
}
/* The shared hero lede reserves 36px under itself for the buttons that
   usually follow; this hero has none, and ref .faq-sub closes the block. */
.page-faq .hero .section-heading__sub { font-size: 16px; line-height: 1.8; max-width: 520px; margin: 0 auto; }

/* ref .fj-pill: the FAQ bar's pills sit a touch larger than the service
   pages' .sj-pill, on a hairline border, and lift on hover. */
.page-faq .jumpnav__pill {
	padding: 8px 17px; border: 1px solid var(--bdr); color: var(--t2);
}
.page-faq .jumpnav__pill:hover {
	color: var(--blue); border-color: rgba(15,76,129,.32);
	transform: translateY(-1px); box-shadow: 0 3px 10px rgba(6,14,24,.07);
}
.page-faq .jumpnav__pill.is-active {
	color: #fff; background: var(--navy); border-color: var(--navy);
	box-shadow: 0 3px 12px rgba(0,43,81,.22); transform: none;
}
.page-faq .component-jumpnav { background: rgba(246,248,251,.88); }
.page-faq .jumpnav__div { margin: 0 3px; }

/* ref .sec-lbl / .sec-h2: the eyebrow and the heading carry the line's own
   colour, the same one the separator above them is drawn in — the palette's
   text-safe --svc-label would put three different golds in one header.
   Without an accent (the General section) they fall back to the house pair. */
.faq-accordion[class*="theme-"] .section-heading__title { color: var(--faq-head, var(--navy)); }
.faq-accordion[class*="theme-"] .section-heading__eyebrow { color: var(--faq-head, var(--faq-accent)); }
/* ref .sec-lbl keeps its rule, centred or not, and the rule is the label's
   own colour rather than the house blue. */
.faq-accordion .section-heading--center .section-heading__eyebrow::before { background: currentColor; }

/* ref about/ .hero-h1: the display scale the About / team heroes use. */
.hero--display .section-heading { max-width: none; } /* ref .hero: the headline runs the full width */
.hero.theme-corporate.hero--display .section-heading__title { font-size: clamp(36px, 6.5vw, 88px); line-height: 1; letter-spacing: -2px; margin-bottom: 24px; }
.hero.theme-corporate.hero--display .section-heading__sub { font-size: 16px; line-height: 1.8; max-width: 560px; margin: 0; }
/* ref .hero padding 72px 5% 80px */
.hero--display.pt-md { padding-top: 72px; }
.hero--display.pb-md { padding-bottom: 80px; }
/* ref .hero-mesh on about/ and meet-the-team/: these two keep the bright
   sky → bari mesh. A themed hero (experience/, the service lines) washes in
   its own palette, so the mesh keys off the variant, not the theme. */
.hero.hero--display:not(.hero--has-video)::before {
	background: radial-gradient(ellipse, rgba(190,225,255,.55) 0%, rgba(28,166,218,.18) 35%, transparent 68%);
}
.hero.hero--display:not(.hero--has-video)::after {
	background: radial-gradient(ellipse, rgba(15,76,129,.14) 0%, transparent 65%);
}

/* ref: the non-service pages divide on a full-spectrum band. */
.tv-color-band.theme-corporate {
	background: linear-gradient(90deg, var(--blue) 0%, var(--bari) 35%, var(--stem) 65%, var(--sky) 100%);
}

/* ── Certification card (ref .certs-box) ───────────────────────────── */
.social-proof--box { background: transparent; border: none; }
.social-proof--box .social-proof__inner {
	/* ref: a 1320px wrapper padded 5%, so the card is 90% of it (max 1188px) */
	width: min(90%, 1188px); max-width: none; margin: 28px auto;
	background: var(--w); border: 1px solid var(--bdr);
	border-radius: 18px; padding: 24px 32px; flex-direction: column; gap: 16px;
}
.social-proof--box .social-proof__label { font-size: 9.5px; letter-spacing: 3px; color: var(--blue); }
/* ref sets no body line-height, so these chips sit on their own metrics */
.social-proof__label, .social-proof__pill { line-height: normal; }

/* ── Purpose / Vision / Values (ref .mvv-sec) ──────────────────────── */
.component.theme-corporate.card-grid--mvv:not(.component--dark):not(.hero):not(.cta-banner) {
	background: linear-gradient(180deg, var(--bg) 0%, #EEF5FF 50%, var(--bg) 100%);
}
.card-grid--mvv .card-grid__head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 52px; }
.card-grid--mvv .card-grid__head .section-heading { margin-bottom: 0; max-width: none; }
.card-grid--mvv .card-grid__head .section-heading__title { margin-bottom: 0; } /* ref .sec-h2 carries no margin */
.card-grid--mvv .card-grid__head .section-heading__eyebrow,
.journey-timeline--growth .journey-timeline__head .section-heading__eyebrow,
.content-media--story .section-heading__eyebrow { line-height: normal; } /* ref .sec-lbl */
.card-grid--mvv .card-grid__head-r .section-heading__sub { margin: 0; }
.card-grid__grid--mvv { grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.card--mvv {
	position: relative; overflow: hidden; padding: 0; color: #fff; box-shadow: none;
	border: 1px solid rgba(255,255,255,.08); border-radius: 22px;
	/* ref .mvv-card.purpose ramp: near-black → navy → blue → lift */
	background: linear-gradient(145deg, #001A33 0%, var(--navy) 35%, var(--blue) 70%, #1A6BB8 100%);
	transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s;
}
.card--mvv:hover { transform: translateY(-4px); box-shadow: var(--sh3); }
.card--mvv-wide { background: linear-gradient(145deg, #001A33 0%, var(--navy) 40%, var(--blue) 80%, #1A6BB8 100%); }
/* ref .mvv-card.vision takes the lighter house ramp beside it */
.card-grid__grid--mvv .card--mvv:nth-child(2) {
	background: linear-gradient(145deg, #003650 0%, #005A7A 35%, var(--bari) 75%, var(--baril) 100%);
}
.card--mvv__bar { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--sky), var(--blue), transparent); }
.card-grid__grid--mvv .card--mvv:nth-child(2) .card--mvv__bar { background: linear-gradient(90deg, #BFFCFF, var(--baril), transparent); }
.card--mvv::after {
	content: ''; position: absolute; top: -40px; right: -40px; width: 260px; height: 260px;
	border-radius: 50%; pointer-events: none;
	background: radial-gradient(ellipse, rgba(190,225,255,.18) 0%, rgba(15,76,129,.12) 45%, transparent 68%);
}
.card-grid__grid--mvv .card--mvv:nth-child(2)::after {
	background: radial-gradient(ellipse, rgba(191,252,255,.18) 0%, rgba(28,166,218,.1) 45%, transparent 68%);
}
.card--mvv__glow {
	position: absolute; bottom: -60px; right: -60px; width: 240px; height: 240px;
	border-radius: 50%; pointer-events: none; z-index: 1; opacity: .25;
	background: radial-gradient(ellipse, var(--sky) 0%, transparent 70%);
}
.card-grid__grid--mvv .card--mvv:nth-child(2) .card--mvv__glow { background: radial-gradient(ellipse, var(--baril) 0%, transparent 70%); }
.card--mvv-wide .card--mvv__glow { opacity: .2; }
.card--mvv__inner { position: relative; z-index: 2; padding: 38px 34px 30px; min-height: 260px; display: flex; flex-direction: column; }
.card--mvv-wide .card--mvv__inner { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.card--mvv .card--grid-item__badge {
	align-self: flex-start; font-size: 9px; line-height: normal; letter-spacing: 2.5px; padding: 5px 12px; margin-bottom: 16px;
	color: rgba(190,225,255,.9); background: rgba(255,255,255,.12); border: 1px solid rgba(190,225,255,.2);
}
.card--mvv .card--grid-item__heading { color: #fff; font-size: 24px; font-weight: 800; letter-spacing: -.5px; line-height: 1.1; margin: 0 0 12px; }
.card--mvv .card--grid-item__text { font-size: 13px; color: rgba(255,255,255,.6); line-height: 1.8; margin: 0; }
.card--mvv .card--grid-item__number { /* ref .wm watermark */
	position: absolute; bottom: -10px; right: 16px; z-index: 1;
	font-family: var(--font-head); font-size: clamp(72px, 9vw, 120px); font-weight: 800;
	letter-spacing: -5px; color: rgba(255,255,255,.14); line-height: 1;
	pointer-events: none; user-select: none;
}
.card--mvv__points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.card--mvv__points li { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; font-size: 13px; line-height: 1.55; color: rgba(190,225,255,.7); }
.card--mvv__points strong { color: rgba(190,225,255,.85); font-weight: 700; }
.card--mvv__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--sky); flex-shrink: 0; margin-top: 5px; }

/* ── Founder story (ref .story-sec) ────────────────────────────────── */
.content-media--story.component--dark { background: var(--navy); border-top: 4px solid var(--bari); overflow: hidden; }
.content-media--story::before {
	content: ''; position: absolute; top: -100px; right: -8%; width: 700px; height: 700px;
	border-radius: 50%; pointer-events: none;
	background: radial-gradient(ellipse, rgba(44,204,211,.18) 0%, rgba(15,76,129,.35) 40%, transparent 68%);
}
.content-media--story::after {
	content: ''; position: absolute; bottom: -60px; left: 3%; width: 450px; height: 450px;
	border-radius: 50%; pointer-events: none;
	background: radial-gradient(ellipse, rgba(28,166,218,.22) 0%, rgba(15,76,129,.3) 45%, transparent 68%);
}
.content-media--story .container { position: relative; z-index: 2; }
.content-media--story .section-heading { max-width: none; margin-bottom: 56px; }
.content-media--story .section-heading__eyebrow { color: rgba(190,225,255,.4); margin-bottom: 14px; }
.content-media--story .section-heading__eyebrow::before { background: rgba(190,225,255,.3); }
/* The block is themed, and .component[class*="theme-"] sets the eyebrow to
   the service accent at (0,3,0) — which on the corporate palette is the
   navy, put on a navy panel. The values above were already the reference's
   rgba(190,225,255,.4/.3); they were simply being outranked. */
.component.content-media--story[class*="theme-"] .section-heading__eyebrow { color: rgba(190,225,255,.4); }
.component.content-media--story[class*="theme-"] .section-heading__eyebrow::before { background: rgba(190,225,255,.3); }
.content-media--story .section-heading__title { font-size: clamp(32px, 4.5vw, 56px); color: #fff; letter-spacing: -1.5px; line-height: 1.03; margin-bottom: 0; }
.content-media--story .content-media__inner { grid-template-columns: 1.2fr .8fr; gap: 52px; align-items: start; margin-bottom: 48px; }
.content-media--story .prose p { font-size: 13.5px; color: rgba(190,225,255,.5); line-height: 1.85; margin-bottom: 18px; }
.content-media--story .prose p:last-child { margin-bottom: 24px; }
.content-media--story .content-media__quote {
	border-left: none; padding: 28px 32px; margin: 4px 0 0; border-radius: 16px;
	background: rgba(255,255,255,.06); border: 1.5px solid rgba(190,225,255,.18);
	backdrop-filter: blur(12px); font-style: normal;
}
.content-media--story .content-media__quote p {
	font-family: var(--font-head); font-size: 16px; font-weight: 600; font-style: italic;
	color: rgba(255,255,255,.85); line-height: 1.65; letter-spacing: -.2px; margin: 0 0 12px;
}
.content-media--story .content-media__quote cite {
	font-size: 9px; font-style: normal; font-weight: 700; letter-spacing: 2px;
	text-transform: uppercase; color: rgba(190,225,255,.35); line-height: normal;
}
/* ref .story-vid: a 4:5 portrait plate standing in for the founder film */
.vidpanel--story {
	aspect-ratio: 4 / 5; max-width: none; border-radius: 18px; box-shadow: none;
	border: 1px solid rgba(190,225,255,.12); flex-direction: column; gap: 14px;
	background: linear-gradient(145deg, #001020 0%, var(--navy) 40%, var(--blue) 80%);
	transition: border-color .25s;
}
.vidpanel--story:hover { border-color: rgba(190,225,255,.25); }
.vidpanel--story .vidpanel__play {
	width: 56px; height: 56px; background: rgba(190,225,255,.15);
	border: 1.5px solid rgba(190,225,255,.3); backdrop-filter: blur(8px); transition: all .2s;
}
.vidpanel--story .vidpanel__play::after { border-width: 9px 0 9px 18px; margin-left: 4px; }
.vidpanel--story:hover .vidpanel__play { background: rgba(190,225,255,.28); transform: scale(1.08); }
.vidpanel__name { font-family: var(--font-head); font-size: 13px; font-weight: 700; color: rgba(255,255,255,.7); margin: 0; }
.vidpanel__sub { font-size: 9px; font-weight: 700; line-height: normal; letter-spacing: 2px; text-transform: uppercase; color: rgba(190,225,255,.3); }
/* Founder story tile wired to play: Short poster behind the play button. */
.vidpanel__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.vidpanel--playable { cursor: pointer; padding: 0; width: 100%; font: inherit; color: inherit; text-align: center; -webkit-appearance: none; appearance: none; }
.vidpanel--playable::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(0,16,32,.6) 0%, rgba(0,16,32,.12) 45%, rgba(0,16,32,.3) 100%); }
.vidpanel--playable .vidpanel__play, .vidpanel--playable .vidpanel__name { position: relative; z-index: 2; }
.vidpanel--playable .vidpanel__label { z-index: 2; }

/* ── Growth timeline (ref .timeline-sec / .tl-track) ───────────────── */
.component.theme-corporate.journey-timeline--growth:not(.component--dark):not(.hero):not(.cta-banner) {
	background: linear-gradient(180deg, var(--bg) 0%, #EEF5FF 50%, var(--bg) 100%);
}
.journey-timeline--growth .journey-timeline__head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-bottom: 52px; }
.journey-timeline--growth .journey-timeline__head .section-heading { margin-bottom: 0; max-width: none; }
.journey-timeline--growth .journey-timeline__head .section-heading__title { margin-bottom: 0; }
.journey-timeline--growth .journey-timeline__head > .section-heading__sub { margin: 0; }
.journey-timeline__track-wrap { position: relative; }
.journey-timeline__spine { position: absolute; top: 90px; left: 2%; right: 2%; height: 2px; background: var(--bdr); }
.journey-timeline__fill { position: absolute; top: 90px; left: 2%; width: 60%; height: 2px; background: linear-gradient(90deg, var(--blue), var(--bari)); }
.journey-timeline__track--growth { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.journey-timeline--growth .journey-timeline__stage { border-top: none; padding: 0 8px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.journey-timeline--growth .journey-timeline__stage::before { display: none; }
.journey-timeline__photo {
	width: 100%; aspect-ratio: 1 / 1; border-radius: 16px; margin-bottom: 18px;
	position: relative; z-index: 1; overflow: hidden; display: flex; align-items: center; justify-content: center;
	background: var(--w); border: 1.5px solid var(--bdr); box-shadow: var(--sh);
	transition: box-shadow .3s, transform .3s;
}
.journey-timeline__stage:hover .journey-timeline__photo { box-shadow: var(--sh2); transform: translateY(-3px); }
.journey-timeline__stage.is-future .journey-timeline__photo { border-style: dashed; border-color: var(--bdr2); background: var(--bg); }
.journey-timeline__photo span { font-size: 10px; font-weight: 600; letter-spacing: .5px; line-height: 1.4; color: var(--t3); padding: 12px; }
.journey-timeline__photo img { width: 100%; height: 100%; object-fit: cover; }
.journey-timeline__era { font-size: 9px; font-weight: 700; line-height: normal; letter-spacing: 1.5px; text-transform: uppercase; color: var(--blue); margin-bottom: 5px; }
.journey-timeline__stage.is-future .journey-timeline__era { color: var(--t3); }
.journey-timeline--growth .journey-timeline__stage h3 { font-size: 13.5px; font-weight: 700; color: var(--navy); line-height: 1.3; letter-spacing: normal; margin: 0 0 8px; }
.journey-timeline--growth .journey-timeline__stage.is-future h3 { color: var(--t3); }
.journey-timeline__metric { font-family: var(--font-head); font-size: 24px; font-weight: 800; color: var(--blue); line-height: 1; letter-spacing: -.5px; }
.journey-timeline__metric-label { font-size: 10px; line-height: normal; color: var(--t3); margin-top: 3px; }
.journey-timeline--growth .journey-timeline__stage p { font-size: 10.5px; font-style: italic; color: var(--t3); margin: 5px 0 0; }
/* ref: the tiles land 100ms apart */
@media (prefers-reduced-motion: no-preference) {
	.journey-timeline--growth .journey-timeline__stage:nth-child(2) { transition-delay: .1s; }
	.journey-timeline--growth .journey-timeline__stage:nth-child(3) { transition-delay: .2s; }
	.journey-timeline--growth .journey-timeline__stage:nth-child(4) { transition-delay: .3s; }
	.journey-timeline--growth .journey-timeline__stage:nth-child(5) { transition-delay: .4s; }
	.card-grid--mvv .card:nth-child(2) { transition-delay: .08s; }
	.card-grid--mvv .card--mvv-wide { transition-delay: .16s; }
	.content-media--story .content-media__quote.tv-reveal { transition-delay: .16s; }
	.content-media--story .vidpanel.tv-reveal { transition-delay: .08s; }
}

/* ref breakpoints for the About stack: 1100 then 768 */
@media (max-width: 1100px) {
	.card-grid__grid--mvv,
	.card--mvv-wide .card--mvv__inner,
	.content-media--story .content-media__inner { grid-template-columns: 1fr; }
	.journey-timeline__track--growth { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
	.journey-timeline--growth .journey-timeline__track--growth {
		display: flex; grid-template-columns: none; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 10px;
	}
	.journey-timeline--growth .journey-timeline__track--growth .journey-timeline__stage { flex: 0 0 62%; scroll-snap-align: start; padding: 0; }
	.journey-timeline__spine, .journey-timeline__fill { display: none; }
}

/* ── Accreditation ticker under the dark steps (ref .accred-ticker) ───── */
.numbered-steps.component--dark .numbered-steps__ticker {
	grid-column: 2; min-width: 0; position: relative; z-index: 2;
	margin-top: 52px; padding-top: 36px; border-top: 1px solid rgba(190,225,255,.1);
}
.numbered-steps__ticker-label {
	font-size: 9px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
	color: rgba(190,225,255,.25); text-align: center; margin: 0 0 18px;
}
.numbered-steps__ticker-scroll { overflow: hidden; position: relative; }
.numbered-steps__ticker-scroll::before,
.numbered-steps__ticker-scroll::after {
	content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 1; pointer-events: none;
}
.numbered-steps__ticker-scroll::before { left: 0; background: linear-gradient(to right, var(--navy), transparent); }
.numbered-steps__ticker-scroll::after { right: 0; background: linear-gradient(to left, var(--navy), transparent); }
.numbered-steps__ticker-track { display: flex; gap: 10px; width: max-content; animation: tv-ticker 30s linear infinite; }
.tv-noanim .numbered-steps__ticker-track { animation: none; }
.numbered-steps__ticker-tile {
	display: flex; align-items: center; gap: 7px; flex-shrink: 0; white-space: nowrap;
	background: rgba(255,255,255,.04); border: 1px solid rgba(190,225,255,.1);
	border-radius: 100px; padding: 6px 16px;
	font-size: 10.5px; font-weight: 500; line-height: normal; color: rgba(190,225,255,.35);
}
.numbered-steps__ticker-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--blue); opacity: .7; flex-shrink: 0; }
@media (max-width: 1100px) { .numbered-steps.component--dark .numbered-steps__ticker { grid-column: 1; } }

/* ref .contact-in collapses at 1100 on every reference page, not 860 */
@media (max-width: 1100px) {
	.consultation-form__inner { grid-template-columns: 1fr; gap: 56px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Client Community — parity with trevita.netlify.app/community/
   Breakpoints follow the reference: 1100 and 768.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Split head (ref .intro-head / .refer-head) ─────────────────────── */
.content-media__split { display: grid; grid-template-columns: 1fr 1.3fr; gap: 60px; align-items: start; }
.content-media--split .section-heading { margin-bottom: 0; }
/* ref .refer-head: a split whose right column is only the lede runs even
   columns, bottom-aligned; .intro-head (which carries prose) does not. */
.content-media__split:not(:has(.prose)) { grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; }
.content-media--split .section-heading__title { font-size: clamp(32px, 3.8vw, 48px); letter-spacing: -1.4px; line-height: 1.05; }
.content-media__split-r .section-heading__sub { font-size: 15px; line-height: 1.8; color: var(--t2); max-width: 520px; margin: 0 0 18px; }
.content-media__split-r .prose p { font-size: 15px; line-height: 1.85; color: var(--t2); margin-bottom: 18px; }
.content-media__split-r .prose p:last-child { margin-bottom: 0; }
.content-media__split-r .prose strong { color: var(--navy); font-weight: 600; }

/* ── Centred closing note (ref .refer-close) ────────────────────────── */
.content-media__note { text-align: center; color: var(--t2); font-size: 14px; line-height: 1.85; max-width: 680px; margin-inline: auto; font-style: italic; }

/* ── Advantage cards (ref .adv-grid / .acard) ───────────────────────── */
.card-grid--advantage .card-grid__grid { grid-template-columns: repeat(3, 1fr); gap: 14px; counter-reset: adv; }
.card-grid--advantage .card {
	--svc: var(--blue);
	border: 1px solid rgba(255,255,255,.08); border-radius: 18px; color: #fff;
	position: relative; overflow: hidden; min-height: 220px; box-shadow: none;
	display: flex; flex-direction: column; justify-content: space-between;
	padding: 28px 26px 24px; counter-increment: adv;
	background: linear-gradient(145deg, #001A33 0%, #002B51 40%, #0F4C81 80%, #1A6BB8 100%);
}
.card-grid--advantage .card:nth-child(even) { background: linear-gradient(145deg, #003650 0%, #005A7A 40%, #1CA6DA 78%, #46C1EF 100%); }
.card-grid--advantage .card:hover { transform: translateY(-4px); box-shadow: var(--sh2); }
.card-grid--advantage .card::before { /* ref .acard::before accent bar */
	content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 2;
	background: linear-gradient(90deg, var(--sky), var(--blue), transparent);
}
.card-grid--advantage .card:nth-child(even)::before { background: linear-gradient(90deg, #BFFCFF, var(--baril), transparent); }
.card-grid--advantage .card::after { /* ref .acard-num */
	content: counter(adv, decimal-leading-zero);
	position: absolute; bottom: -10px; left: 14px; right: auto;
	font-family: var(--font-head); font-size: 90px; font-weight: 800; letter-spacing: -4px; line-height: .9;
	color: rgba(190,225,255,.1); pointer-events: none;
}
.card-grid--advantage .card:nth-child(even)::after { color: rgba(191,252,255,.1); }
.card-grid--advantage .card > * { position: relative; z-index: 2; }
.card-grid--advantage .card--grid-item__badge { /* ref .adv-tag */
	font-size: 8.5px; letter-spacing: 2px; padding: 4px 10px; margin: 0;
	align-self: flex-start; line-height: 1.4;
	background: rgba(255,255,255,.12); border: 1px solid rgba(190,225,255,.2); color: rgba(190,225,255,.9);
}
.card-grid--advantage .card--grid-item__heading { font-size: 17px; font-weight: 800; color: #fff; line-height: 1.2; letter-spacing: -.3px; margin: 14px 0 8px; }
.card-grid--advantage .card--grid-item__text { font-size: 12.5px; color: rgba(255,255,255,.65); line-height: 1.7; margin: 0; }

/* ── Gradient service cards: ref .scard details the house grid lacked ── */
.card-grid--services .card::before { /* ref .scard-bar */
	content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 3;
	background: linear-gradient(90deg, color-mix(in srgb, var(--svc) 28%, #fff), var(--svc), transparent);
}
.card-grid--services .card > * { position: relative; z-index: 2; }
/* ref .scard{cursor:pointer}: the card is the target. The overlay sits above
   the decorative circles and watermark but below nothing that takes input —
   the card holds no other control. */
.card-grid--services .card { cursor: pointer; }
.card-grid--services .card .card--grid-item__hit { position: absolute; inset: 0; z-index: 5; }
.card-grid--services .card:hover .card--grid-item__link { gap: 14px; }
.card-grid--services .card:focus-within { outline: 2px solid var(--svc-tint); outline-offset: 3px; }
.card--grid-item__meta { /* ref .cm-meta */
	display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
	margin: 14px 0; font-size: 10.5px; font-weight: 600; letter-spacing: .4px;
	color: rgba(255,255,255,.7);
}
.card--grid-item__meta-item { display: inline-flex; align-items: center; gap: 6px; line-height: 1.3; }
.card--grid-item__meta-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: tv-blink 2s infinite; }
@keyframes tv-blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.tv-noanim .card--grid-item__meta-dot { animation: none; }
@media (prefers-reduced-motion: reduce) { .card--grid-item__meta-dot { animation: none; } }
.card--grid-item__footnote { /* ref .reward-foot, under its rule */
	font-size: 11.5px; line-height: 1.7; margin: 22px 0 0; padding-top: 18px;
	border-top: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.55);
}
/* The community / referral grids run 3-up and 2-up; the home grid stays 2-up
   image-led and is untouched (it is the only data-count="4" grid). */
/* ref .communities-head: the centred head spans the grid, only its lede narrows */
.card-grid--services .section-heading--center { max-width: none; }
.card-grid--services .section-heading--center .section-heading__title { max-width: none; }
.card-grid--services .section-heading--center .section-heading__sub { max-width: 600px; }
.card-grid--services .card-grid__grid[data-count="3"] { grid-template-columns: repeat(3, 1fr); gap: 14px; }
.card-grid--services .card-grid__grid[data-count="2"] { grid-template-columns: 1.15fr 1fr; gap: 14px; }
.card-grid--services .card-grid__grid[data-count="3"] .card,
.card-grid--services .card-grid__grid[data-count="2"] .card {
	display: flex; flex-direction: column; padding: 38px 34px 30px; border-radius: 22px;
}
.card-grid--services .card-grid__grid[data-count="3"] .card { min-height: 340px; }
.card-grid--services .card-grid__grid[data-count="2"] .card { min-height: 300px; }
.card-grid--services .card-grid__grid[data-count="3"] .card--grid-item__heading,
.card-grid--services .card-grid__grid[data-count="2"] .card--grid-item__heading { font-size: 28px; letter-spacing: -.6px; line-height: 1.1; max-width: none; margin: 0 0 12px; }
.card-grid--services .card-grid__grid[data-count="3"] .card--grid-item__text,
.card-grid--services .card-grid__grid[data-count="2"] .card--grid-item__text { font-size: 13.5px; line-height: 1.8; color: rgba(255,255,255,.7); max-width: none; }
.card-grid--services .card-grid__grid[data-count="3"] .card--grid-item__link,
.card-grid--services .card-grid__grid[data-count="2"] .card--grid-item__link { margin-top: auto; padding-top: 22px; font-size: 12.5px; letter-spacing: .3px; }
.card-grid--services .card-grid__grid[data-count="3"] .card--grid-item__badge,
.card-grid--services .card-grid__grid[data-count="2"] .card--grid-item__badge { font-size: 9px; letter-spacing: 2.5px; padding: 5px 12px; margin-bottom: 20px; line-height: 1.4; align-self: flex-start; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); }

/* ── Numbered rows in a card (ref .steps-card / .wrow) ──────────────── */
.numbered-steps--rows .numbered-steps__intro:empty { display: none; }
.steps-card { background: var(--w); border: 1px solid var(--bdr); border-radius: 22px; padding: 14px 38px; position: relative; overflow: hidden; box-shadow: var(--sh); }
.steps-card__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding: 18px 0 8px; border-bottom: 1px solid var(--bdr); }
.steps-card__title { font-size: 11px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--blue); }
.steps-card__badge { background: var(--stem); color: #083335; font-size: 9.5px; font-weight: 700; padding: 4px 13px; border-radius: 100px; }
.steps-card__rows { display: flex; flex-direction: column; }
.steps-card__row.numbered-steps__step {
	display: grid; grid-template-columns: 48px 1fr; gap: 22px;
	background: none; border: 0; border-bottom: 1px solid var(--bdr2); border-left: 4px solid transparent;
	border-radius: 0; box-shadow: none; padding: 28px 0 28px 20px; margin-left: -20px;
}
.steps-card__row.numbered-steps__step:last-child { border-bottom: none; }
.steps-card__row.numbered-steps__step::before { content: none; }
.steps-card__row:nth-child(1) { border-left-color: var(--stem); }
.steps-card__row:nth-child(2) { border-left-color: var(--baril); }
.steps-card__row:nth-child(3) { border-left-color: var(--blue); }
.steps-card__num { font-family: var(--font-head); font-size: 13px; font-weight: 800; letter-spacing: .5px; padding-top: 2px; color: var(--stem); }
.steps-card__row:nth-child(2) .steps-card__num { color: var(--baril); }
.steps-card__row:nth-child(3) .steps-card__num { color: var(--blue); }
.steps-card__row .numbered-steps__heading { font-size: 16px; font-weight: 700; color: var(--navy); line-height: 1.25; letter-spacing: -.2px; margin: 0 0 7px; }
.steps-card__row p { font-size: 13px; color: var(--t2); line-height: 1.85; margin: 0; }

/* ── Numbered pair (ref .participate / .part-card) ──────────────────── */
.card-grid--values .card-grid__grid[data-count="2"] { grid-template-columns: 1fr 1fr; gap: 14px; }
/* ref .part-card: the numeral is a circle beside a .part-body column, so
   the heading and copy share the second track rather than splitting. */
.card-grid--values .card-grid__grid[data-count="2"] .card { display: grid; grid-template-columns: 44px 1fr; column-gap: 18px; align-items: start; padding: 30px; border-radius: 18px; }
.card-grid--values .card-grid__grid[data-count="2"] .card--grid-item__heading,
.card-grid--values .card-grid__grid[data-count="2"] .card--grid-item__text { grid-column: 2; }
.card-grid--values .card-grid__grid[data-count="2"] .card--grid-item__number {
	grid-column: 1; grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 50%;
	background: color-mix(in srgb, var(--stem) 10%, transparent); border: 1.5px solid color-mix(in srgb, var(--stem) 30%, transparent);
	display: flex; align-items: center; justify-content: center;
	font-size: 14px; letter-spacing: -.3px; color: var(--stem);
}
.card-grid--values .card-grid__grid[data-count="2"] .card--grid-item__heading { font-size: 15px; font-weight: 800; letter-spacing: -.2px; margin: 0 0 8px; }
.card-grid--values .card-grid__grid[data-count="2"] .card--grid-item__text { font-size: 13.5px; color: var(--t2); line-height: 1.8; margin: 0; }

/* ── Value strip (ref .cval) ────────────────────────────────────────── */
.cardstrip {
	background: linear-gradient(135deg, rgba(15,76,129,.1) 0%, rgba(28,166,218,.08) 50%, rgba(190,225,255,.14) 100%);
	border: 1.5px solid rgba(15,76,129,.2); border-radius: 18px; padding: 28px 34px;
}
.cardstrip__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.cardstrip__title { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--blue); }
.cardstrip__badge { background: var(--blue); color: #fff; font-size: 9.5px; font-weight: 700; padding: 4px 13px; border-radius: 100px; }
.cardstrip__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cardstrip__item { display: flex; flex-direction: column; gap: 8px; }
.cardstrip__item-top { display: flex; align-items: center; gap: 10px; }
.cardstrip__ico {
	width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px;
	background: rgba(15,76,129,.1); border: 1px solid rgba(15,76,129,.2);
	display: flex; align-items: center; justify-content: center; color: var(--blue);
}
.cardstrip__ico .tv-icon, .cardstrip__ico .tv-mark { width: 14px; height: 14px; display: block; color: var(--blue); }
.cardstrip__item h5 { font-family: var(--font-head); font-size: 13px; font-weight: 800; color: var(--navy); letter-spacing: -.2px; line-height: 1.25; margin: 0; }
.cardstrip__item p { font-size: 12.5px; color: var(--t2); line-height: 1.7; font-weight: 500; margin: 0; }

/* ── Light closer card (ref .closer-card) ───────────────────────────── */
.cta-banner--card { background: var(--bg); }
.cta-banner--card .cta-banner__box {
	max-width: 980px; margin-inline: auto; position: relative; overflow: hidden;
	background: linear-gradient(145deg, #EEF5FF 0%, #F4F8FD 50%, #EAF2FA 100%);
	border: 1.5px solid rgba(15,76,129,.18); border-radius: 24px; padding: 54px 52px; text-align: center;
}
.cta-banner--card .cta-banner__box::before {
	content: ''; position: absolute; top: -80px; left: -80px; width: 280px; height: 280px; border-radius: 50%;
	background: radial-gradient(ellipse, rgba(15,76,129,.1) 0%, transparent 70%); pointer-events: none;
}
.cta-banner--card .cta-banner__box::after {
	content: ''; position: absolute; bottom: -100px; right: -100px; width: 340px; height: 340px; border-radius: 50%;
	background: radial-gradient(ellipse, rgba(190,225,255,.5) 0%, transparent 70%); pointer-events: none;
}
.cta-banner--card .cta-banner__box > * { position: relative; z-index: 2; }
.cta-banner--card .tv-mark--closer { margin: 0 auto 22px; color: var(--blue); opacity: .55; } /* ref .closer-dmark */
.cta-banner--card .section-heading { margin-bottom: 0; max-width: none; }
.cta-banner--card .section-heading__eyebrow { color: var(--blue); margin-bottom: 14px; }
.cta-banner--card .section-heading__title { color: var(--navy); font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -1.2px; line-height: 1.05; margin-bottom: 16px; }
.cta-banner--card .section-heading__title em { color: var(--blue); }
.cta-banner--card .section-heading__sub { font-size: 15px; color: var(--t2); line-height: 1.85; max-width: 520px; margin: 0 auto; }
.cta-banner--card .buttons { justify-content: center; margin-top: 32px; }
.cta-banner--card .button--secondary { color: var(--blue); border-color: var(--bdr); }
.cta-banner--card .button--secondary:hover { border-color: var(--blue); background: rgba(15,76,129,.04); }

/* ── Reference breakpoints: 1100 then 768 ───────────────────────────── */
@media (max-width: 1100px) {
	/* The :not(:has(.prose)) rule above outranks a bare class here (a media
	   query adds no specificity), so the lede-only split needs naming too
	   or it never stacks. ref .intro-head / .refer-head both go 1fr. */
	.content-media__split,
	.content-media__split:not(:has(.prose)) { grid-template-columns: 1fr; gap: 28px; align-items: start; }
	/* ref community/ + success-stories/ drop the hero bento outright here. */
	.page-community .hero__bento { display: none; }
	.card-grid--advantage .card-grid__grid { grid-template-columns: 1fr 1fr; }
	.card-grid--services .card-grid__grid[data-count="3"] { grid-template-columns: 1fr 1fr; }
	/* ref .refer-grid drops straight to one column here */
	.card-grid--services .card-grid__grid[data-count="2"] { grid-template-columns: 1fr; }
	.cardstrip__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
	.card-grid--advantage .card-grid__grid,
	.card-grid--services .card-grid__grid[data-count="3"],
	.card-grid--services .card-grid__grid[data-count="2"],
	.cardstrip__grid { grid-template-columns: 1fr; }
	/* ref .participate stacks; it is not one of the swipe carousels */
	.card-grid--values .card-grid__grid[data-count="2"] {
		display: grid; grid-template-columns: 1fr; overflow-x: visible; padding-bottom: 0;
	}
	.card-grid--values .card-grid__grid[data-count="2"] .card { flex: 0 1 auto; }
	.cta-banner--card .cta-banner__box { padding: 40px 26px; }
	.card-grid--services .card-grid__grid[data-count="3"] .card,
	.card-grid--services .card-grid__grid[data-count="2"] .card { padding: 30px 26px; }
	.steps-card { padding: 14px 24px; }
}

/* ref .team-sec wraps all the groups in one section: the last strip that
   actually rendered carries that section's bottom padding. */
.team-grid.pb-none:not(:has(+ .team-grid)) { padding-bottom: var(--sp-md); }

/* ═══ Client Community parity (ref /community/) ═══════════════════════
 * The reference draws three things the house grid could not express: a
 * letter watermark instead of the running number, a plain reward eyebrow
 * beside the pill chips, and a quieter second line under a card figure.
 */
/* ref .wm — letters set per card; --wm: "" leaves the corner empty. */
.card-grid--services .card::after { content: var(--wm, counter(svc, decimal-leading-zero)); }
/* ref .reward-eyebrow — the reward tile labels in plain caps, no chip. */
.card-grid--services .card-grid__grid .card .card--grid-item__badge--plain {
	background: none; border: none; padding: 0; margin-bottom: 14px;
	font-size: 9.5px; letter-spacing: 2.5px;
	color: color-mix(in srgb, var(--svc) 30%, rgba(255,255,255,.55));
}
/* ref .reward-unit — the unit under the figure, quieter and smaller. */
.card-grid--services .card--grid-item__heading small {
	display: block; margin-top: 6px;
	font-size: 14px; font-weight: 700; letter-spacing: .2px;
	color: color-mix(in srgb, var(--svc) 25%, rgba(255,255,255,.85));
}
/* ref .acard groups the heading and its line at the foot of the card, so
   only the tag floats at the top. */
.card-grid--advantage .card { justify-content: flex-start; }
.card-grid--advantage .card--grid-item__heading { margin: auto 0 8px; }
/* ref .hcard-sm-foot — an accent line at the foot of a small hero tile;
   <em> switches it from house blue to the stem accent. */
.hero__bento-card--sm .hero__bento-foot { margin-top: 0; }
.hero__bento-accent { font-size: 11px; font-weight: 700; letter-spacing: .2px; color: var(--blue); }
/* ref .stars inside .hcard-sm-foot: 11px gold, not the rail's --hair. */
.hero__bento-foot .stars { color: #F5C518; font-size: 11px; letter-spacing: 2px; }
.hero__bento-accent em { font-style: normal; color: var(--stem); }
/* ref .refer-head-l h2 em — this head alone takes the bright stem accent
   while its eyebrow stays house blue. */
.page-community #refer .section-heading__title em { color: var(--stem); }
/* ref community/ .hero-h1 / .hero-sub: this hero runs one step larger than
   the service lines and keeps a 480px lede, where the other corporate
   heroes (about/, experience/) set 560px. */
.page-community .hero .section-heading__title { font-size: clamp(48px, 5.8vw, 78px); }
.page-community .hero .section-heading__sub { line-height: 1.8; max-width: 480px; }
/* ref community/ .hero-mesh: this hero keeps the house sky/bari mesh, not
   the navy wash the corporate theme otherwise lays over a hero. */
.page-community .hero:not(.hero--has-video)::before {
	background: radial-gradient(ellipse, rgba(190,225,255,.55) 0%, rgba(28,166,218,.18) 35%, transparent 68%);
}
.page-community .hero:not(.hero--has-video)::after {
	background: radial-gradient(ellipse, rgba(15,76,129,.14) 0%, transparent 65%);
}
/* ref .closer-dmark: 56px wide and drawn at half strength, unlike the solid
   mark the boxed banners carry. */
.cta-banner--card .tv-mark--closer { width: 56px; color: rgba(15,76,129,.5); }
/* ref .section-icon: the zone chip centres with the header it belongs to. */
.faq-accordion:has(.section-heading--center) .tv-mark-chip { display: flex; width: fit-content; margin-inline: auto; }

/* ═══ Editorial detail pages ═══════════════════════════════════════════
 * One chrome (eyebrow / title / deck / meta / body / footer) shared by all
 * five types; below it, only what a given type actually has. Every block
 * is optional, because most stories arrive without most of them.
 */
.article { --svc: var(--blue); }
.article__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 14px; }
.article__kicker {
	text-transform: uppercase; letter-spacing: 2.5px; font-size: 10px;
	font-weight: 700; color: var(--svc);
}
.article__line { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--t3); }
.article__line .nr-filter__gem { color: var(--svc); font-size: 9px; }
.article__deck { font-size: 17px; line-height: 1.7; color: var(--t2); margin: 14px 0 20px; max-width: 62ch; }
/* The picture holds the same column as the head and the body. At 900 it
   was 60px proud on each side, so every article read as a wide image with
   a narrow column of text under it rather than as one column. The
   reference keeps head, figures and body on one measure throughout. */
.article__media { max-width: 780px; margin-bottom: 8px; }
.article__media img { width: 100%; height: auto; border-radius: var(--radius); }
.article__back { margin-top: 28px; font-size: 14px; font-weight: 600; }
.article > .container { max-width: 780px; }

/* Case study ---------------------------------------------------------- */
.cs-outcomes {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px;
	padding: 24px; margin: 8px 0 24px; border: 1px solid var(--bdr); border-radius: var(--radius);
	background: linear-gradient(145deg, var(--bg), #fff);
}
.cs-outcome__value { font-family: var(--font-head); font-size: 34px; font-weight: 800; letter-spacing: -1.5px; color: var(--svc); margin: 0; line-height: 1; }
.cs-outcome__label { font-size: 13px; font-weight: 600; color: var(--navy); margin: 8px 0 0; }
.cs-outcome__when { font-size: 12px; color: var(--t3); margin: 2px 0 0; }
.cs-media { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 24px; }
.cs-media__item { margin: 0; }
.cs-media__item img { width: 100%; height: auto; border-radius: 14px; }
.cs-media__item figcaption { font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: var(--t3); margin-top: 8px; }
.cs-section { margin-bottom: 8px; }
.cs-section__heading { font-size: 22px; font-weight: 800; letter-spacing: -.6px; margin: 32px 0 12px; }
.cs-quote {
	margin: 28px 0; padding: 22px 26px; border-left: 3px solid var(--svc);
	background: var(--bg); border-radius: 0 12px 12px 0;
}
.cs-quote p { font-size: 18px; line-height: 1.6; font-style: italic; color: var(--navy); margin: 0; }
.cs-quote cite { display: block; margin-top: 10px; font-size: 13px; font-style: normal; font-weight: 600; color: var(--t3); }
.cs-timeline { list-style: none; padding: 0; margin: 8px 0 24px; display: grid; gap: 2px; }
.cs-timeline__step { padding: 16px 0 16px 22px; border-left: 2px solid var(--bdr); position: relative; }
.cs-timeline__step::before {
	content: ''; position: absolute; left: -6px; top: 22px; width: 10px; height: 10px;
	border-radius: 50%; background: var(--svc);
}
.cs-timeline__stage { font-weight: 700; color: var(--navy); margin: 0; font-size: 14px; }
.cs-timeline__when { font-size: 12px; color: var(--svc); font-weight: 600; margin: 2px 0 0; }
.cs-timeline__note { font-size: 13.5px; color: var(--t2); margin: 6px 0 0; line-height: 1.7; }
.cs-credits { font-size: 13.5px; color: var(--t2); padding-top: 18px; border-top: 1px solid var(--bdr); }

/* Research ------------------------------------------------------------ */
.rs-finding { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin: 0 0 10px; }
.rs-finding__value { font-family: var(--font-head); font-size: clamp(34px, 5vw, 48px); font-weight: 800; letter-spacing: -2px; color: var(--svc); line-height: 1; }
.rs-finding__label { font-size: 15px; font-weight: 600; color: var(--navy); }
.rs-authors { font-size: 13px; color: var(--t3); margin-top: 12px; }
.rs-takeaways { padding: 24px 26px; border: 1px solid var(--bdr); border-radius: var(--radius); background: var(--bg); margin-bottom: 22px; }
.rs-takeaways__heading { font-size: 16px; font-weight: 800; margin: 0 0 12px; }
.rs-citation { padding: 22px 26px; border: 1px solid var(--bdr); border-radius: var(--radius); }
.rs-citation__label { text-transform: uppercase; letter-spacing: 2.5px; font-size: 10px; font-weight: 700; color: var(--t3); margin: 0 0 8px; }
.rs-citation__body { font-size: 14px; line-height: 1.7; color: var(--t2); margin: 0 0 6px; }
.rs-citation__doi { font-size: 12.5px; color: var(--t3); margin: 0 0 16px; }
.rs-disclaimer { font-size: 12px; line-height: 1.7; color: var(--t3); margin-top: 16px; }

/* Press release ------------------------------------------------------- */
.pr-dateline { font-weight: 700; color: var(--navy); }
.pr-boilerplate { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--bdr); }
.pr-boilerplate__heading { font-size: 16px; font-weight: 800; margin: 0 0 8px; }
.pr-contact { font-size: 14px; color: var(--t2); margin-top: 20px; }

/* Media mention ------------------------------------------------------- */
.mm-embed { margin-bottom: 24px; }
.mm-embed iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--radius); }
.mm-card {
	padding: 28px; border: 1px solid var(--bdr); border-radius: var(--radius);
	background: linear-gradient(145deg, var(--bg), #fff); text-align: center;
}
.mm-card__logo img { max-height: 34px; width: auto; margin: 0 auto 18px; display: block; }
.mm-card__quote { margin: 0 0 14px; }
.mm-card__quote p { font-size: 19px; line-height: 1.55; font-style: italic; color: var(--navy); margin: 0; }
.mm-card__headline { font-size: 13.5px; color: var(--t3); margin: 0 0 20px; }
@media (max-width: 640px) {
	.cs-media { grid-template-columns: 1fr; }
}
/* The reading column centres rather than hugging the left of the grid. */
.article__header, .article__body, .article__footer, .article__media, .article > .container { margin-inline: auto; }

/* ═══ Content cards ════════════════════════════════════════════════════
 * One card, four densities, each following the ref's anatomy for that kind:
 * research leads with its journal and closes on its finding, media leads
 * with its outlet, a blog card leads with its image. The accent is the
 * service line's colour, so a rail reads as a spread of lines at a glance.
 */
.ccard {
	--svc: var(--blue);
	display: flex; flex-direction: column; background: var(--w);
	border: 1px solid var(--bdr); border-radius: 14px; overflow: hidden;
	box-shadow: 0 1px 2px rgba(6,14,24,.04);
	transition: border-color .25s, box-shadow .25s, transform .25s;
	position: relative;
}
.ccard::before { /* ref .rcard/.ccard top accent */
	content: ''; position: absolute; inset: 0 0 auto; height: 3px; z-index: 2;
	background: linear-gradient(90deg, color-mix(in srgb, var(--svc) 30%, #fff), var(--svc), transparent);
}
.ccard:hover { border-color: color-mix(in srgb, var(--svc) 35%, var(--bdr)); box-shadow: var(--sh2); transform: translateY(-2px); }
.ccard__body { padding: 22px 24px 20px; display: flex; flex-direction: column; flex: 1; }

/* ref .mcard-top / .rcard-journal: the source line above the chips */
.ccard__source { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ccard__source-name {
	font-size: 9.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
	color: var(--svc); background: color-mix(in srgb, var(--svc) 8%, transparent);
	border: 1px solid color-mix(in srgb, var(--svc) 22%, transparent);
	padding: 4px 10px; border-radius: 6px;
}
.ccard__source-date { font-size: 11px; color: var(--t3); white-space: nowrap; }
.ccard--research .ccard__source-name { background: none; border: none; padding: 0; text-transform: none; letter-spacing: .2px; font-size: 12px; }

.ccard__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ccard__tag {
	font-size: 9px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
	padding: 4px 10px; border-radius: 100px; border: 1px solid var(--bdr); color: var(--t3);
}
.ccard__tag--type, .ccard__tag--topic {
	color: var(--svc); border-color: color-mix(in srgb, var(--svc) 28%, transparent);
	background: color-mix(in srgb, var(--svc) 7%, transparent);
}
.ccard__kicker { display: block; font-size: 12px; font-weight: 600; color: var(--svc); margin-bottom: 8px; }
.ccard__title { font-size: 16px; font-weight: 800; line-height: 1.32; letter-spacing: -.3px; margin: 0 0 10px; }
.ccard__title a { color: var(--navy); text-decoration: none; }
.ccard__title a:hover { color: var(--svc); }
.ccard__summary { font-size: 13.5px; line-height: 1.75; color: var(--t2); margin: 0 0 16px; }
/* Decks vary in length, the card doesn't: four lines, then an ellipsis. The
   feature panel is wide enough to run long, so it keeps its whole deck. */
.ccard--standard .ccard__summary,
.ccard--teaser .ccard__summary {
	display: -webkit-box; -webkit-box-orient: vertical;
	-webkit-line-clamp: 4; line-clamp: 4; overflow: hidden;
}
/* ref .rcard-stat aligns figure and label on a baseline, which only reads
   right while the label stays on one line; ours wraps at 18ch, and the
   figure then hung off the top of it. Centre them instead. */
.ccard__stat { display: flex; align-items: center; gap: 8px; }
.ccard__stat-value { font-family: var(--font-head); font-size: 26px; font-weight: 800; letter-spacing: -1px; color: var(--svc); line-height: 1; }
.ccard__stat-label { font-size: 11.5px; color: var(--t3); max-width: 18ch; line-height: 1.4; }
.ccard__foot {
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	margin-top: auto; padding-top: 14px; border-top: 1px solid var(--bdr2);
}
.ccard__meta { font-size: 11.5px; color: var(--t3); }
.ccard__link { font-size: 12px; font-weight: 700; color: var(--svc); white-space: nowrap; margin-left: auto; }
.ccard__link::after { content: ' →'; }
.ccard__link--out::after { content: ' ↗'; }

/* Feature — ref .feat-card / .news-feat-main. Values taken from the ref:
   22px radius, 38px padding, a 4px top accent, a corner glow, and a 120px
   ghost numeral. The gradient follows the service line the way the ref's
   .fc-* modifiers do. */
.ccard--feature {
	flex-direction: row; border-radius: 22px; overflow: hidden;
	border: 1px solid rgba(255,255,255,.07);
	background: linear-gradient(145deg, #001A33 0%, color-mix(in srgb, var(--svc) 22%, #002B51) 35%, color-mix(in srgb, var(--svc) 70%, #0F4C81) 70%, color-mix(in srgb, var(--svc) 85%, #1A6BB8) 100%);
	transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s;
}
.ccard--feature::before { /* ref ::before accent bar */
	display: block; height: 4px; z-index: 3;
	background: linear-gradient(90deg, color-mix(in srgb, var(--svc) 25%, #fff), var(--svc), transparent);
}
.ccard--feature::after { /* ref ::after corner glow */
	content: ''; position: absolute; top: -40px; right: -40px; width: 260px; height: 260px;
	border-radius: 50%; pointer-events: none; z-index: 1;
	background: radial-gradient(ellipse, rgba(190,225,255,.18) 0%, color-mix(in srgb, var(--svc) 12%, transparent) 45%, transparent 68%);
}
.ccard--feature:hover { transform: translateY(-4px); box-shadow: var(--sh3); }
.ccard--feature .ccard__media { /* ref .feat-img-col */
	flex: 0 0 42%; position: relative; overflow: hidden; min-height: 320px;
	display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.04);
}
.ccard--feature .ccard__media { padding: 18px; }
.ccard--feature .ccard__media .ccard__media-img { border-radius: 12px; }
/* ref .news-feat-main flows from the top (38px block, no image column);
   .feat-card centres its copy against the image beside it. */
.ccard--feature .ccard__body { padding: 38px; justify-content: flex-start; }
.ccard--feature:has(.ccard__media) .ccard__body { justify-content: center; }
.ccard--feature .ccard__source { margin-bottom: 16px; justify-content: flex-start; gap: 10px; }
.ccard--feature .ccard__source-name { /* ref .nf-source-lbl */
	height: 24px; padding: 0 12px; border-radius: 6px; background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.45);
	font-size: 9px; letter-spacing: 1.5px; display: inline-flex; align-items: center;
}
.ccard--feature .ccard__source-date { font-size: 10px; color: rgba(255,255,255,.25); } /* ref .nf-date */
.ccard--feature .ccard__tags { gap: 6px; margin-bottom: 16px; }
.ccard--feature .ccard__tag { /* ref .tag-d */
	font-size: 8.5px; padding: 4px 11px; letter-spacing: 1.5px;
	color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.1);
}
.ccard--feature .ccard__tag--featured { color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); letter-spacing: 2px; }
.ccard--feature .ccard__kicker { color: color-mix(in srgb, var(--svc) 25%, #fff); }
.ccard--feature .ccard__title { /* ref .feat-title */
	font-size: clamp(18px, 2.2vw, 26px); line-height: 1.15; letter-spacing: -.4px; margin-bottom: 12px;
}
.ccard--feature .ccard__title a { color: #fff; }
.ccard--feature .ccard__byline { color: rgba(255,255,255,.4); }
.ccard--feature .ccard__summary { /* ref .feat-desc */
	font-size: 13px; color: rgba(255,255,255,.55); line-height: 1.8; margin-bottom: 20px; max-width: 62ch;
}
.ccard--feature .ccard__foot { border-top: none; padding-top: 0; justify-content: flex-start; gap: 22px; }
.ccard--feature .ccard__link { margin-left: 0; }
.ccard__featmeta { /* ref .feat-meta: its own line above the read link */
	display: block; font-size: 10.5px; color: rgba(255,255,255,.3); margin-bottom: 22px;
}
.ccard--feature .ccard__meta { font-size: 10.5px; color: rgba(255,255,255,.3); } /* ref .feat-meta */
.ccard--feature .ccard__stat-value { color: #fff; }
.ccard--feature .ccard__stat-label { color: rgba(255,255,255,.6); }
.ccard--feature .ccard__link { /* ref .feat-read */
	display: inline-flex; align-items: center; gap: 10px;
	font-size: 12.5px; font-weight: 700; color: rgba(190,225,255,.9); letter-spacing: .3px;
	transition: gap .2s;
}
.ccard--feature .ccard__link:hover { gap: 16px; }
.ccard--feature .ccard__link::after { content: none; }
.ccard--feature .ccard__go {
	width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.35);
	display: inline-flex; align-items: center; justify-content: center; transition: all .25s;
}
.ccard--feature .ccard__link:hover .ccard__go { background: #fff; color: var(--navy); border-color: #fff; }
.ccard__index { /* ref .nf-wm */
	position: absolute; right: 16px; bottom: -10px; font-family: var(--font-head);
	font-size: 120px; font-weight: 800; letter-spacing: -5px; line-height: 1;
	color: rgba(190,225,255,.04); pointer-events: none; user-select: none; z-index: 1;
}

/* Row — ref .nf-item: a compact card with the line down its left edge */
.ccard--row {
	flex-direction: row; align-items: center; gap: 16px; border-radius: 12px;
	border-left: 3px solid var(--svc); box-shadow: none; text-decoration: none;
}
.ccard--row::before { display: none; }
.ccard--row:hover { transform: none; box-shadow: var(--sh); }
.ccard--row .ccard__body { padding: 16px 18px; gap: 0; }
.ccard--row .ccard__tags { margin-bottom: 8px; }
.ccard--row .ccard__title { font-size: 14px; line-height: 1.4; margin: 0 0 10px; }
.ccard--row .ccard__title, .ccard--row .ccard__title a { color: var(--navy); }
.ccard--row:hover .ccard__title { color: var(--svc); }
.ccard--row .ccard__foot { margin: 0; padding: 0; border: none; }
.ccard--row .ccard__source { margin: 0; justify-content: flex-start; gap: 10px; }
.ccard--row .ccard__source-name { font-size: 8.5px; padding: 3px 8px; }

/* Teaser — the service-page rail */
.ccard--teaser { width: 300px; flex: 0 0 300px; }
.ccard--teaser .ccard__media { display: flex; align-items: flex-end; justify-content: center; height: 156px; position: relative; overflow: hidden; padding: 7px 10px 0; background: linear-gradient(145deg, color-mix(in srgb, var(--svc) 75%, #001A33), color-mix(in srgb, var(--svc) 30%, #fff)); }
.ccard--teaser .ccard__media .ccard__media-img { border-radius: 10px 10px 0 0; }
/* ref .bc-tag: the chip sits wholly on the artwork, bottom-left. Pulling
   it up on a negative margin left it straddling the edge, so half the
   white pill fell on the white body and the label read as bare text. */
.ccard--teaser { position: relative; }
.ccard--teaser .ccard__tags {
	position: absolute; top: calc(156px - 12px); left: 12px; transform: translateY(-100%);
	margin: 0; z-index: 2;
}
.ccard--teaser .ccard__tag {
	background: rgba(255,255,255,.92); border-color: transparent;
	letter-spacing: 1.5px; padding: 4px 11px; backdrop-filter: blur(6px);
}
.ccard--teaser .ccard__foot { border: none; padding-top: 6px; }
.ccard--teaser .ccard__link { display: none; }

/* ── Newsroom streams ─────────────────────────────────────────────────── */
.news-stream--alt { background: var(--w); --rail-fade: var(--w); }
.news-stream__head {
	display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
	gap: 20px; margin-bottom: 36px;
}
.news-stream__title { font-size: clamp(32px, 3.8vw, 52px); font-weight: 800; letter-spacing: -1.5px; line-height: 1.03; margin: 10px 0 0; }
.news-stream__title em { font-style: italic; color: var(--blue); }
/* ref caps these per section: research 420, the rest 380. */
.news-stream__stand { font-size: 15px; line-height: 1.8; color: var(--t2); margin: 0; max-width: 380px; }
#research .news-stream__stand { max-width: 420px; }
.news-stream__lead { margin-bottom: 30px; }
.news-stream__lead--split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; align-items: stretch; }
.news-stream__rows { display: grid; gap: 12px; align-content: start; }

/* ref: label + "See all" pill on the left, arrows on the right */
.news-browse { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.news-browse__label { font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--t3); }
.news-browse__all {
	font-size: 12.5px; font-weight: 600; color: var(--navy); padding: 7px 18px;
	border: 1px solid var(--bdr); border-radius: 100px; background: var(--w); transition: all .2s;
}
.news-browse__all:hover { border-color: var(--blue); color: var(--blue); }
.news-browse__arrows { margin-left: auto; display: flex; gap: 8px; }
.news-browse__arrow {
	width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--bdr);
	background: var(--w); color: var(--t2); cursor: pointer; font-size: 14px; line-height: 1;
	display: inline-flex; align-items: center; justify-content: center; transition: all .2s;
}
.news-browse__arrow:hover { border-color: var(--blue); color: var(--blue); }
.news-browse__arrow[disabled] { opacity: .35; cursor: default; }

/* ref: the cards scroll sideways rather than wrapping into a grid */
/* Full-bleed with edge fades, as the service-page rail does — the row runs
   to the viewport and dissolves rather than stopping at a hard edge. */
.news-rail-wrap { position: relative; margin: 0 calc(50% - 50vw); }
.news-rail-wrap::before, .news-rail-wrap::after {
	content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none;
}
.news-rail-wrap::before { left: 0; background: linear-gradient(90deg, var(--rail-fade, var(--bg)) 0%, transparent 100%); }
.news-rail-wrap::after { right: 0; background: linear-gradient(270deg, var(--rail-fade, var(--bg)) 0%, transparent 100%); }
.news-rail {
	display: flex; gap: 20px; overflow-x: auto; scroll-behavior: smooth;
	/* bottom room for the hover shadow, as the marquee does */
	padding: 10px 5% 72px; margin-bottom: -52px;
	scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.news-rail::-webkit-scrollbar { display: none; }
.news-rail > .ccard { flex: 0 0 296px; }
.news-rail > .ccard--research { flex-basis: 360px; }      /* ref .rcard */
.news-rail > .ccard--post,
.news-rail > .ccard--case-study { flex-basis: 286px; }    /* ref .ccard */
.news-rail > .ccard--media-mention,
.news-rail > .ccard--press-release { flex-basis: 296px; } /* ref .mcard */
/* ref .ccard-img: a media header on the blog and story cards */
.ccard--standard .ccard__media {
	/* The 3px top accent sits over this slot, so the inset above the picture
	   is 10px minus that — the gap reads the same as the 10px at the sides —
	   and the slot is only as tall as the docked picture needs. */
	display: flex; align-items: flex-end; justify-content: center;
	height: 148px; overflow: hidden; position: relative; padding: 7px 10px 0;
	background: linear-gradient(145deg, color-mix(in srgb, var(--svc) 70%, #001A33), color-mix(in srgb, var(--svc) 35%, #fff));
}
.ccard--standard .ccard__media .ccard__media-img { border-radius: 10px 10px 0 0; }
/* A card's header image is fitted, not cropped: these graphics carry their
   own words and the slot is rarely their aspect, so filling it cut titles off
   mid-word. The blurred copy fills the slot behind the whole one; where the
   aspects match, the whole one covers it and none of it shows. */
.ccard__media { position: relative; overflow: hidden; }
.ccard__media-img {
	position: relative; z-index: 1; display: block;
	/* In a header slot the picture docks to the card body: the wash mattes it
	   on three sides and its bottom edge is the body's top edge. */
	/* Sizing by max- rather than object-fit keeps the element box the same
	   shape as the picture, so a corner radius clips the picture and not a
	   letterboxed box around it. */
	width: auto; height: auto; max-width: 100%; max-height: 100%;
}
.ccard__media-wash {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	filter: blur(22px) saturate(1.15); transform: scale(1.25); opacity: .9;
	pointer-events: none;
}
.news-rail:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }

/* ── /newsroom/all/ — the index behind the sectioned newsroom ──────────── */
.all-content__head .section-heading__eyebrow { margin-bottom: 10px; }
.all-content__title {
	font-size: clamp(34px, 4vw, 54px); font-weight: 800; letter-spacing: -1.6px;
	line-height: 1.03; color: var(--navy); margin: 0;
}
.all-content__title em { font-style: italic; color: var(--blue); }
.all-content__count { font-size: 13.5px; color: var(--t3); margin: 12px 0 0; }
/* The same card the rails use, wrapped instead of scrolled. */
.content-grid {
	display: grid; gap: 20px;
	grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
}
.all-content__empty { font-size: 15px; color: var(--t2); margin: 0; }
.all-content__pager { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 48px; }
.all-content__pager .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 14px; border-radius: 100px;
	border: 1.5px solid var(--bdr); background: var(--w);
	font-size: 13px; font-weight: 600; color: var(--t2); transition: all .2s;
}
.all-content__pager .page-numbers:hover { border-color: var(--blue); color: var(--blue); }
.all-content__pager .page-numbers.current {
	background: var(--navy); border-color: var(--navy); color: #fff;
}
.all-content__pager .page-numbers.dots { border-color: transparent; background: none; }
/* The bar is the page's own chrome here, so it sits under the header alone. */
.tv-all-content .nr-filter { top: 63px; }

/* ref .nm-deco: a fixed 380px panel centred in the hero's right column, with
   a soft glow in its lower corner and the diamond pale in its upper one —
   not the accent bar the other bento tiles wear. */
.post-type-archive-newsroom .hero__bento { display: flex; align-items: center; justify-content: center; }
.post-type-archive-newsroom .hero__bento-card--lead {
	width: 100%; max-width: 380px; min-height: 280px; padding: 36px;
}
.post-type-archive-newsroom .hero__bento-card--lead::before {
	top: auto; left: auto; right: -40px; bottom: -40px; width: 200px; height: 200px;
	border-radius: 50%; background: radial-gradient(ellipse, rgba(190,225,255,.4) 0%, transparent 68%);
}
.post-type-archive-newsroom .hero__bento-card--lead h3 { font-size: 24px; max-width: none; }
.post-type-archive-newsroom .hero__bento-label { margin-bottom: 20px; }
.tv-mark--bento {
	position: absolute; top: 24px; right: 24px; width: 52px; height: 62px;
	opacity: .22; color: var(--navy); pointer-events: none; z-index: 1;
}

@media (max-width: 1100px) { /* ref .nm-hero-r / .feat-card / .news-feat-grid */
	.post-type-archive-newsroom .hero__bento { display: none; }
	.post-type-archive-newsroom .hero__inner { grid-template-columns: 1fr; gap: 40px; }
	.news-stream__lead--split { grid-template-columns: 1fr; }
	.ccard--feature { flex-direction: column; min-height: 0; }
	.ccard--feature .ccard__media { flex: 0 0 200px; height: 200px; }
	.ccard--feature .ccard__body { padding: 28px 26px; }
}
@media (max-width: 900px) {
	.news-browse__arrow { width: 30px; height: 30px; font-size: 13px; }
}

/* The reading column centres rather than hugging the left of the grid. */
.article__header, .article__body, .article__footer, .article__media, .article > .container { margin-inline: auto; }

/* ref .rcard-authors */
.ccard__byline { font-size: 11.5px; color: var(--t3); margin: -2px 0 10px; line-height: 1.5; }
.ccard--feature .ccard__byline { color: rgba(255,255,255,.55); }
/* ref .nm-hero: the newsroom band is white, not the house grey, and carries
   the blue wash top-right with a fainter navy one bottom-left. The corporate
   palette's own wash is a pale navy meant for whole sections; over grey it
   read as a smudge, and .hero clips it, so the section edge cut it off in a
   straight line halfway down the band. */
.post-type-archive-newsroom .hero[class*="theme-"] {
	background: var(--w); border-bottom: 1px solid var(--bdr); padding-block: 64px 56px;
}
.post-type-archive-newsroom .hero[class*="theme-"]::before {
	top: -140px; right: -80px; width: 580px; height: 580px;
	background: radial-gradient(ellipse, rgba(190,225,255,.5) 0%, rgba(28,166,218,.14) 38%, transparent 68%);
}
.post-type-archive-newsroom .hero[class*="theme-"]::after {
	bottom: -60px; left: -40px; width: 320px; height: 320px;
	background: radial-gradient(ellipse, rgba(15,76,129,.1) 0%, transparent 65%);
}
/* ref .nm-hero-in */
.post-type-archive-newsroom .hero__inner { gap: 48px; align-items: center; }

/* ref .nm-stats / .nmstat: one compact strip, filled in the house grey so it
   reads against the white band, with only its outer corners rounded. */
.hero__stats { display: flex; gap: 0; margin: 36px 0 0; }
.hero__stat { flex: 1; padding: 18px 22px; background: var(--bg); border: 1px solid var(--bdr); }
.hero__stat:first-child { border-radius: 14px 0 0 14px; }
.hero__stat:last-child { border-radius: 0 14px 14px 0; }
.hero__stat-n {
	font-family: var(--font-head); font-size: 28px; font-weight: 800;
	letter-spacing: -1px; color: var(--navy); line-height: 1; margin-bottom: 3px;
}
.hero__stat-l { font-size: 10.5px; color: var(--t3); font-weight: 500; letter-spacing: .3px; margin: 0; }
.post-type-archive-newsroom .hero__stat:nth-child(2) .hero__stat-n { color: var(--blue); }
.post-type-archive-newsroom .hero__stat:nth-child(3) .hero__stat-n { color: var(--bari); }
/* ref .nm-h1 / .nm-sub / .nm-stats: the newsroom hero runs wider and a step
   larger than the service heroes, and its lede stays in a 500px column. */
.post-type-archive-newsroom .hero .section-heading { max-width: none; }
.post-type-archive-newsroom .hero .section-heading__title {
	font-size: clamp(42px, 5.2vw, 70px); letter-spacing: -2px; margin-bottom: 20px;
}
.post-type-archive-newsroom .hero .section-heading__sub { font-size: 15.5px; line-height: 1.8; max-width: 500px; }
/* ref .ft-pill: the lead card names itself */
.ccard__tag--featured { color: var(--navy); background: #fff; border-color: transparent; }
/* ref: decorative diamond clusters in the strip's corners — the newsroom
   band has them, experience/ does not, so they are scoped rather than added
   to every strip. */
.cta-banner__deco { display: none; }
.post-type-archive-newsroom .cta-banner__deco { position: absolute; z-index: 1; pointer-events: none; display: block; }
.cta-banner__deco svg { width: 100%; height: auto; display: block; }
.cta-banner__deco--tr { top: 48px; right: 3%; width: 48px; opacity: .3; color: var(--stem); }
.cta-banner__deco--bl { bottom: 60px; left: 3%; width: 36px; opacity: .22; color: var(--sky); }
/* The newsroom's ref closes on .btn-fill — a navy pill on the navy band —
   where community/ and experience/ use the sky .cta-main. Scoped so those
   keep theirs. */
.cta-banner--strip .buttons { justify-content: center; }
.post-type-archive-newsroom .cta-banner--strip.component[class*="theme-"] .button--primary {
	background: var(--navy); border-color: rgba(190,225,255,.35); color: #fff;
	padding: 14px 32px; font-size: 13.5px;
}
.post-type-archive-newsroom .cta-banner--strip.component[class*="theme-"] .button--primary:hover {
	background: var(--blue); border-color: var(--blue); color: #fff;
}

/* ── Newsroom card chips and type scale, to the ref's values ──────────
 * The outlet is a neutral source label, so it stays grey; the kind (News /
 * Media / Article) is grey too, per the client; only the service line is
 * allowed colour. That way a rail reads as a spread of lines, and nothing
 * else competes for the same signal.
 */
.news-rail .ccard__source-name, /* ref .mcard-src */
.ccard--row .ccard__source-name {
	height: 26px; padding: 0 12px; border-radius: 7px;
	background: var(--bg); border: 1px solid var(--bdr); color: var(--t3);
	font-size: 8.5px; letter-spacing: 1.5px; text-transform: uppercase;
	display: inline-flex; align-items: center;
}
.news-rail .ccard__source-date, .ccard--row .ccard__source-date { font-size: 10px; color: var(--t3); } /* ref .mcard-date */
.news-rail .ccard__tag--type, /* ref .tag-news — grey whatever the kind */
.ccard--row .ccard__tag--type {
	background: rgba(6,14,24,.05); color: var(--t2); border-color: var(--bdr);
}
/* ref .tag-stem / .tag-bari: the line is the one chip that carries colour.
   Darkened a touch against white, as the ref does for turquoise. */
.news-rail .ccard__tag--line, .ccard--row .ccard__tag--line {
	background: color-mix(in srgb, var(--svc) 10%, transparent);
	border-color: color-mix(in srgb, var(--svc) 22%, transparent);
	color: color-mix(in srgb, var(--svc) 88%, #002B51);
}
/* ref .mcard: a quieter type scale than the research and blog cards */
.ccard--media-mention.ccard--standard .ccard__title { font-size: 13.5px; font-weight: 700; line-height: 1.3; letter-spacing: -.2px; margin-bottom: 8px; }
.ccard--media-mention.ccard--standard .ccard__summary { font-size: 12px; color: var(--t3); line-height: 1.7; margin-bottom: 14px; }
.ccard--media-mention.ccard--standard .ccard__foot { font-size: 10.5px; color: var(--t3); padding-top: 12px; }
.ccard--media-mention.ccard--standard .ccard__link { font-size: 11px; color: var(--navy); gap: 4px; } /* ref .mcard-link */
.ccard--media-mention.ccard--standard .ccard__link::after { content: ' ↗'; }

/* ── Client story cards: poster behind the brand gradient ──────────── */
.card--testimonial__poster {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; z-index: 0; border-radius: inherit;
}
/* A real still needs more help than the reference's flat gradient ever did.
   The reference cards carry no footage, so its scrim only had to sit over a
   solid colour; ours sits over a face, a window, and whatever caption the
   Short has burned into it. Two layers, both over the poster and under the
   text: a dark ramp for contrast, and a wash of the service colour so a rail
   of photographs still reads as one service the way the reference's gradient
   tiles do.

   This declares the pseudo-element itself. The footer carries the scrim for
   the name and detail line, but the label sits at the top of that footer
   where the gradient is still transparent, so without this it was left
   reading against bare footage. */
.card--testimonial-video:has(.card--testimonial__poster)::after,
.card--testimonial-story:has(.card--testimonial__poster)::after {
	content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background:
		linear-gradient(0deg, rgba(4,10,18,.92) 0%, rgba(4,10,18,.34) 52%, transparent 100%),
		linear-gradient(200deg, color-mix(in srgb, var(--svc) 24%, transparent) 0%, color-mix(in srgb, var(--svc-pill) 42%, transparent) 100%);
}
.card--testimonial-video:has(.card--testimonial__poster) { background: var(--svc-dark, #071626); }
.card--testimonial__open {
	position: absolute; inset: 0; z-index: 3; cursor: pointer;
	background: none; border: 0; padding: 0; border-radius: inherit;
}
.card--testimonial__open:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.card--testimonial-video:hover .card--testimonial__poster { transform: scale(1.04); }
.card--testimonial__poster { transition: transform .45s ease; }

/* ── Full-screen story player ──────────────────────────────────────── */
html.tvp-open { overflow: hidden; }
.tvp { position: fixed; inset: 0; z-index: 9999; background: #000; }
.tvp__scroll {
	width: 100%; height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
	scroll-snap-type: y mandatory; scrollbar-width: none;
}
.tvp__scroll::-webkit-scrollbar { display: none; }
.tvp__slide {
	position: relative; height: 100dvh; overflow: hidden;
	scroll-snap-align: start; scroll-snap-stop: always;
}
.tvp__stage { position: absolute; inset: 0; }
/*
 * Height first: the video always runs the full height of the slide and takes
 * whatever width 9:16 gives it, so there is never a band above or below. On a
 * window wider than that it sits between black margins, the way Shorts does;
 * on a narrower one it overflows the sides and the slide clips it.
 */
.tvp__poster,
.tvp__frame {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	aspect-ratio: 9 / 16; height: 100%; width: auto; max-width: none; border: 0;
}
/* The still sits over the player, not under it, so a player that is still
   loading shows the frame it is about to play rather than a spinner. */
.tvp__poster { object-fit: cover; z-index: 2; transition: opacity .35s ease; }
.tvp__frame { z-index: 1; }
.tvp__slide.is-live .tvp__poster { opacity: 0; pointer-events: none; }
/*
 * A 16:9 interview is the one thing not cropped to portrait — the faces are
 * framed for the wide cut, so it sits inside the slide instead.
 */
.tvp__slide--long .tvp__poster,
.tvp__slide--long .tvp__frame {
	aspect-ratio: 16 / 9;
	width: 100%; height: auto; max-width: 100%; max-height: 100%;
}
.tvp__slide--long .tvp__poster { object-fit: contain; }
.tvp__close {
	position: fixed; top: 14px; right: 16px; z-index: 5;
	width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
	background: rgba(12,16,22,.55); border: 1px solid rgba(255,255,255,.3);
	color: #fff; font-size: 26px; line-height: 1; backdrop-filter: blur(8px);
}
.tvp__close:hover { background: rgba(255,255,255,.26); }

/*
 * Story stepping, pointer only. Touch already has the swipe, and a phone has
 * no room beside a full-bleed video to put these — so they exist from 1100px
 * up, which is also where the video stops filling the width and leaves a
 * margin to sit in.
 *
 * The offset is the video's own geometry: it is 9:16 at the full height of
 * the slide, so half its width is 100dvh * 9/32 either side of centre.
 */
.tvp__nav { display: none; }
@media (min-width: 1100px) and (pointer: fine) {
	.tvp__nav {
		display: grid; place-items: center; position: fixed; z-index: 5;
		left: calc(50% + (100dvh * 9 / 32) + 28px);
		width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
		background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28);
		color: #fff; backdrop-filter: blur(8px);
		transition: background .2s ease, opacity .2s ease;
	}
	.tvp__nav svg { width: 24px; height: 24px; }
	.tvp__nav--up { top: calc(50% - 56px); }
	.tvp__nav--down { top: calc(50% + 8px); }
	.tvp__nav:hover:not(:disabled) { background: rgba(255,255,255,.26); }
	.tvp__nav:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
	/* Nothing above the first story or below the last. */
	.tvp__nav:disabled { opacity: 0; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
	.tvp__scroll { scroll-behavior: auto; }
	.card--testimonial__poster { transition: none; }
}

/* ── Orbit trust (ref .orbit-sec) ──────────────────────────────────────
 * The headline number ringed by the clients it counts. Seats are absolute
 * against a 640x540 canvas, each drifting on its own duration and delay so
 * the group never pulses in step.
 */
.orbit-trust__canvas { position: relative; width: 640px; max-width: 100%; height: 540px; margin: 0 auto; }
.orbit-trust__rings { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.orbit-trust__centre {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	text-align: center; z-index: 5; width: 200px;
}
.orbit-trust__stars { color: #F5C518; font-size: 20px; letter-spacing: 2px; display: block; margin-bottom: 8px; }
.orbit-trust__figure {
	font-family: 'Montserrat', sans-serif; font-size: clamp(32px, 5vw, 58px);
	font-weight: 800; letter-spacing: -2px; color: var(--navy); line-height: 1; margin: 0;
}
.orbit-trust__figure em { color: var(--blue); font-style: normal; }
.orbit-trust__caption { font-size: 10px; font-weight: 600; letter-spacing: .3px; color: var(--t2); margin: 8px 0 0; line-height: 1.6; }
.orbit-trust__pill {
	display: inline-block; margin: 10px 0 0; background: rgba(15,76,129,.08);
	border: 1px solid rgba(15,76,129,.15); border-radius: 100px; padding: 5px 14px;
	font-size: 10.5px; font-weight: 600; color: var(--blue);
}
.orbit-trust__avatar {
	position: absolute; width: 42px; height: 42px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12px;
	border: 1.5px solid var(--bdr); box-shadow: var(--sh); color: var(--navy);
	/* ref .oav.b/.s/.p: the reviewer's service tints their seat. */
	background: linear-gradient(145deg, color-mix(in srgb, var(--svc, var(--blue)) 14%, transparent), var(--w));
}
.orbit-trust__avatar { color: var(--svc, var(--navy)); }
.orbit-trust__bubble {
	position: absolute; background: var(--w); border: 1px solid var(--bdr);
	border-radius: 100px; padding: 6px 14px; font-size: 10.5px; font-weight: 600;
	color: var(--t2); white-space: nowrap; box-shadow: var(--sh);
}
@keyframes tv-floatA { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes tv-floatB { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes tv-floatC { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes tv-floatD { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (max-width: 680px) {
	/* ref: the canvas keeps its geometry and is scaled bodily, because the
	   seats are absolute — reflowing them would scatter the composition. */
	.orbit-trust { overflow: hidden; }
	.orbit-trust__canvas {
		width: 640px; max-width: none; left: 50%;
		transform: translateX(-50%) scale(.52); transform-origin: top center;
		margin-bottom: -259px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.orbit-trust__avatar { animation: none !important; }
}

/* ── Reviews rail header (ref .rev-hdr / .testi-badge-row) ─────────────
 * The rating card stands where a strip label would, with the arrows and
 * "See all" opposite it. No "drag or use arrows" caption: the arrows are
 * right there and a rail that is visibly cut off already says it scrolls.
 */
.scroll-hdr--badge { align-items: center; gap: 20px; flex-wrap: wrap; }
.testi-badge-row {
	display: flex; align-items: center; gap: 14px;
	background: var(--w); border: 1px solid var(--bdr); border-radius: 14px;
	padding: 14px 22px; box-shadow: var(--sh);
}
.testi-badge-row__stars {
	color: #F5C518; font-size: 14px; letter-spacing: 2px; display: block;
	/* The inherited 1.6 put 8px of air under the stars and made the whole
	   card ~14px taller than it needed to be; the glyphs are their own box. */
	line-height: 1; margin-bottom: 5px;
}
.testi-badge-row__label { font-size: 10px; font-weight: 500; color: var(--t3); }
.testi-badge-row__n {
	font-family: 'Montserrat', sans-serif; font-size: 26px; font-weight: 800;
	letter-spacing: -1px; color: var(--navy);
}
.testi-badge-row__fig {
	font-family: 'Montserrat', sans-serif; font-size: 22px; font-weight: 800;
	letter-spacing: -1px; color: var(--navy); line-height: 1.1;
}
.testi-badge-row__fig em { color: var(--blue); font-style: normal; }
.testi-badge-row__div { width: 1px; height: 36px; background: var(--bdr); }
.testi-badge-row__trust {
	font-size: 12.5px; font-weight: 800; color: var(--navy);
	background: rgba(15,76,129,.12); padding: 5px 13px; border-radius: 100px;
	display: inline-block; white-space: nowrap;
}
/* Each column is its own centred stack, so a short one (the score pill)
   sits on the same middle line as a two-line one rather than on its own. */
.scroll-hdr--badge .testi-badge-row > div { display: flex; flex-direction: column; justify-content: center; }
/* ref .rev-sec padding:48px 0 72px, and .sec-lbl margin-bottom:14px — the
   heading sits close to the card it introduces rather than a section away. */
.testimonial-carousel:has(.scroll-hdr--badge).pt-md { padding-top: 48px; }
.testimonial-carousel:has(.scroll-hdr--badge).pb-md { padding-bottom: 72px; }
.testimonial-carousel:has(.scroll-hdr--badge) .section-heading { margin-bottom: 14px; }
@media (max-width: 680px) {
	/* ref: the dividers go and the row wraps rather than shrinking its type */
	.testi-badge-row { flex-wrap: wrap; gap: 10px 18px; padding: 16px 18px; }
	.testi-badge-row__div { display: none; }
}

/* ── Experience cards with a film (ref .ecard / .evid / .eplay / .elbl) ──
   The panel appears only on a card that holds a video, so the play mark
   never stands over nothing. Values transcribed from the reference: the
   circle is 44px at rgba(255,255,255,.22) over a 1.5px .4 border, and the
   8px under it is what sets the label away from the mark. */
.card--grid-item__vid { /* ref .evid */
	aspect-ratio: 3 / 4; width: 100%; border: 0; cursor: pointer;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	background: linear-gradient(165deg, #46C1EF 0%, #0F4C81 55%, #002B51 100%);
}
.card--grid-item--vid:nth-child(2) .card--grid-item__vid { background: linear-gradient(165deg, #BEE1FF 0%, #0F4C81 50%, #002B51 100%); }
.card--grid-item--vid:nth-child(3) .card--grid-item__vid { background: linear-gradient(165deg, #90CFFF 0%, #0A3A6E 55%, #001D38 100%); }
.card--grid-item--vid:nth-child(4) .card--grid-item__vid { background: linear-gradient(165deg, #BEE1FF 0%, #083060 55%, #001020 100%); }
.card--grid-item__play { /* ref .eplay */
	width: 44px; height: 44px; border-radius: 50%;
	background: rgba(255,255,255,.22); border: 1.5px solid rgba(255,255,255,.4);
	backdrop-filter: blur(8px);
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 8px; transition: transform .2s, background .2s;
}
.card--grid-item__play::after { /* ref .etri */
	content: ''; width: 0; height: 0; border-style: solid;
	border-width: 7px 0 7px 14px; border-color: transparent transparent transparent #fff;
	margin-left: 3px;
}
.card--grid-item--vid:hover .card--grid-item__play { transform: scale(1.1); background: rgba(255,255,255,.35); }
/* With a poster still, the panel shows the frame behind the play button. */
.card--grid-item__vid--poster { position: relative; overflow: hidden; }
.card--grid-item__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.card--grid-item__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(3,14,30,.12) 0%, rgba(3,14,30,.14) 52%, rgba(3,14,30,.5) 100%); }
.card--grid-item__vid--poster .card--grid-item__play,
.card--grid-item__vid--poster .card--grid-item__watch { position: relative; z-index: 2; }
.card--grid-item__vid--poster .card--grid-item__watch { color: rgba(255,255,255,.92); }
.card--grid-item__watch { /* ref .elbl */
	color: rgba(255,255,255,.5); font-size: 9px; font-weight: 700;
	letter-spacing: 2px; text-transform: uppercase;
}
/* ref .ebody — the heading and copy already carry the reference's 18px
   inset and type from the rules above; only the space under the panel is
   new, and it belongs to the panel rather than to the heading. */
.card--grid-item__vid { margin-bottom: 18px; }

/* ── Facility cards: one height per row, and a way to read the rest ─────
 *
 * The records are not the same shape — a clinic carries travel boxes and
 * office hours, a hotel a paragraph and a list of what the room includes —
 * so left alone the cards in a row ran from 613px to 945px. Rather than
 * pad the short ones, the long parts are cut to a common measure and the
 * card says what it is holding back.
 *
 * Every rule here is scoped to the grid. The dialog holds a clone of the
 * same markup outside it, so the full record needs no override to appear:
 * it is simply never clamped in the first place.
 */
/* Rows size to what they hold, and the cards even up within each row.
   Forcing every row to the tallest (grid-auto-rows: 1fr) did make all ten
   cards one height, but it also gave the short rows the tallest row's
   height — a clinic row has no description or amenity list, so that
   bought ~75px of empty card under every one of them. Even-within-a-row
   is the tidiness that was actually wanted. */
.facility-grid__grid .facility-grid__cell > .card--facility {
	/* The cell already stretches to the row; the card has to fill it. */
	height: 100%; display: flex; flex-direction: column;
}
.facility-grid__grid .card--facility__body { flex: 1; display: flex; flex-direction: column; }
/* The detail button sits on the bottom edge whatever the card holds, and
   the content keeps clear of the rule above it. On a full card — Quartz
   ends on a footnote — the last line was landing exactly on that rule
   at 0px, where every other gap in the card is 14. */
.facility-grid__grid .card--facility__rest { flex: 1; padding-bottom: 16px; }
/* Both containers: the grid on the Experience page and the carousel on the
   service pages. Scoped to the grid alone, the clamps did nothing in the
   carousel, where the cards share subgrid rows — one long description on
   Quartz stretched every card on the row to 1173px. */
:is(.facility-grid__grid, .facility-grid__track) .card--facility__address {
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
:is(.facility-grid__grid, .facility-grid__track) .card--facility__desc {
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
/* Four, matching the count the template prints, and one line each: a
   wrapping amenity is worth 20px on every card in the row, not just its
   own, because the cards share subgrid rows. */
:is(.facility-grid__grid, .facility-grid__track) .card--facility__amenities li:nth-child(n+5) { display: none; }
:is(.facility-grid__grid, .facility-grid__track) .card--facility__amenities li > :last-child {
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;
}
.card--facility__more-count { font-size: 11px; color: var(--t3, #8496AA); margin: 6px 0 0; }
.card--facility__more {
	appearance: none; background: none; border: 0; cursor: pointer;
	font-family: var(--font-head); font-size: 11.5px; font-weight: 700; letter-spacing: .2px;
	color: var(--svc, var(--blue)); text-align: left; width: fit-content;
	/* No horizontal padding: the body already insets its children, and a
	   button padding itself again started its text 24px in from the name
	   above it. Vertical padding stays — it is the tap target. */
	padding: 14px 0 0; transition: opacity .2s;
	/* Docked to the foot with a rule above it, so it reads as the card's
	   action rather than the last line of its content. Full width so the
	   rule spans the card; the label stays left. */
	width: 100%; margin-top: auto; border-top: 1px solid var(--bdr);
}
.card--facility__more:hover { opacity: .72; }
/* The whole card is clickable, so it should look it. */
:is(.facility-grid__grid, .facility-grid__track) .card--facility:has(.card--facility__more) { cursor: pointer; }
:is(.facility-grid__grid, .facility-grid__track) .card--facility:has(.card--facility__more):hover { box-shadow: var(--sh2); }

/* The record itself, in a native dialog so Escape, focus and the top layer
   are the browser's job rather than ours. */
.fac-modal {
	border: 0; padding: 0; background: none; max-width: min(560px, calc(100vw - 32px));
	width: 100%; max-height: min(86vh, 900px); overflow: visible;
	/* inset + margin:auto is what centres a modal dialog; without the insets
	   it sits wherever its static position put it, which is the top left. */
	inset: 0; margin: auto;
}
.fac-modal:focus, .fac-modal:focus-visible { outline: none; }
.fac-modal::backdrop { background: rgba(6, 20, 36, .62); backdrop-filter: blur(3px); }
.fac-modal__inner {
	position: relative; background: var(--w); border-radius: 22px; overflow: auto;
	max-height: min(86vh, 900px); box-shadow: 0 24px 70px rgba(6, 20, 36, .3);
}
.fac-modal__close {
	position: absolute; top: 12px; right: 12px; z-index: 5;
	width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
	border: 1px solid var(--bdr); background: rgba(255, 255, 255, .92);
	font-size: 18px; line-height: 1; color: var(--navy);
}
.fac-modal__close:hover { border-color: var(--blue); color: var(--blue); }
/* The clone is the record, not a card in a grid: no shadow, no rounding of
   its own, and neither control repeats inside it. */
.fac-modal .card--facility { box-shadow: none; border: 0; border-radius: 0; height: auto; }
/* The clone is the record being read, not a card offering to be opened, so
   it does not lift, shadow or change the cursor under the pointer. The
   global .card:hover lift would otherwise animate it inside the dialog. */
.fac-modal .card--facility,
.fac-modal .card--facility:hover {
	transform: none; box-shadow: none; cursor: default; transition: none;
}
/* The tour replaces the panel it was standing in for, at the same shape. */
.fac-modal__video { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; background: #000; }
.fac-modal .card--facility__more,
.fac-modal .card--facility__more-count { display: none; }

/* ── "See the Facility" ────────────────────────────────────────────────
 * The record's carousel, standing exactly where the card's panel stood so
 * the dialog opens without the picture jumping. Controls sit over the
 * image on a scrim rather than beside it, because the panel is already the
 * full width of the record and a control strip underneath would push the
 * name below the fold on a phone.
 */
.fac-gal { position: relative; aspect-ratio: 16 / 9; background: var(--navy, #0b2545); overflow: hidden; }
.fac-gal__viewport { position: absolute; inset: 0; }
.fac-gal__slide {
	position: absolute; inset: 0; opacity: 0; visibility: hidden;
	transition: opacity .45s ease;
}
.fac-gal__slide.is-active { opacity: 1; visibility: visible; }
.fac-gal__fig { margin: 0; height: 100%; }
.fac-gal__fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fac-gal__fig figcaption {
	position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 16px 12px;
	font-size: 12px; line-height: 1.4; color: #fff;
	background: linear-gradient(0deg, rgba(0, 0, 0, .62) 0%, transparent 100%);
}
.fac-gal__slide--video { background: #000; }
.fac-gal__slide--video iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Both arrows and the toggle share one shape; only their placing differs. */
.fac-gal__arrow, .fac-gal__toggle {
	position: absolute; z-index: 2; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%; border: 1px solid rgba(255, 255, 255, .42);
	background: rgba(12, 26, 44, .42); backdrop-filter: blur(8px);
	color: #fff; line-height: 1; padding: 0;
	transition: background .18s ease, border-color .18s ease;
}
.fac-gal__arrow:hover, .fac-gal__toggle:hover { background: rgba(12, 26, 44, .72); border-color: #fff; }
.fac-gal__arrow {
	top: 50%; transform: translateY(-50%);
	width: 38px; height: 38px; font-size: 22px;
}
.fac-gal__arrow--prev { left: 10px; }
.fac-gal__arrow--next { right: 10px; }
.fac-gal__toggle { right: 10px; bottom: 10px; width: 30px; height: 30px; }
/* Two bars while it is turning, a triangle while it is held. The button
   shows what pressing it does, which is the convention every player uses. */
.fac-gal__toggle::before {
	content: ''; width: 0; height: 0; margin-left: 2px;
	border-style: solid; border-width: 6px 0 6px 10px;
	border-color: transparent transparent transparent #fff;
}
.fac-gal__toggle.is-playing::before {
	width: 9px; height: 10px; margin-left: 0; border: 0;
	background: linear-gradient(90deg, #fff 0 3px, transparent 3px 6px, #fff 6px 9px);
}
/* The countdown to the next slide, drawn round the button that stops it.
   2πr where r is 16.5 in the 36-unit box: the whole circumference is the
   dash, and the offset walks it to zero over one turn. */
.fac-gal__ring {
	position: absolute; inset: 0; width: 100%; height: 100%;
	transform: rotate(-90deg); overflow: visible; pointer-events: none;
}
.fac-gal__ring circle { fill: none; stroke-width: 2; }
.fac-gal__ring-track { stroke: rgba(255, 255, 255, .28); }
.fac-gal__ring-fill {
	stroke: #fff; stroke-linecap: round;
	stroke-dasharray: 103.673; stroke-dashoffset: 103.673;
	animation: fac-gal-fill var(--fac-gal-turn, 4500ms) linear forwards;
	/* Held until the timer says otherwise — a ring that fills on its own
	   while nothing is turning promises a swap that is not coming. */
	animation-play-state: paused;
}
@keyframes fac-gal-fill { to { stroke-dashoffset: 0; } }
/* The ring is the button's edge now; its own border would double it. */
.fac-gal__toggle:has(.fac-gal__ring) { border-color: transparent; }
.fac-gal__toggle:has(.fac-gal__ring):hover { border-color: transparent; }
/* Nothing to count down when nothing moves on its own. */
@media (prefers-reduced-motion: reduce) {
	.fac-gal__ring { display: none; }
}

.fac-gal__count {
	position: absolute; left: 12px; bottom: 14px; z-index: 2; margin: 0;
	font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
	color: rgba(255, 255, 255, .92); text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}
.fac-gal:focus-visible, .fac-gal__arrow:focus-visible, .fac-gal__toggle:focus-visible {
	outline: 2px solid #fff; outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	.fac-gal__slide { transition: none; }
}
/* A phone gives the picture less room, so the controls shrink with it
   rather than covering a third of what they are controls for. */
@media (max-width: 480px) {
	.fac-gal__arrow { width: 32px; height: 32px; font-size: 19px; }
	.fac-gal__arrow--prev { left: 6px; }
	.fac-gal__arrow--next { right: 6px; }
	.fac-gal__toggle { width: 27px; height: 27px; right: 8px; bottom: 8px; }
}

@media (prefers-reduced-motion: no-preference) {
	.fac-modal[open] { animation: fac-modal-in .22s cubic-bezier(.16, 1, .3, 1); }
	@keyframes fac-modal-in { from { opacity: 0; transform: translateY(8px); } }
}

/* ── Financing pillars (ref .fin-pillars / .fin-pillar) ────────────────
 * Three icon-led cards: a boxed icon, an arrow against an uppercase
 * title, and a paragraph that can end on a quieter aside. Scoped to the
 * page the same way .home scopes its own feature cards, because the
 * shared variant is a plain icon card everywhere else.
 */
.page-financing .card-grid--features .card-grid__grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.page-financing .card-grid--features .card {
	padding: 28px 24px; border-radius: 18px; box-shadow: none;
	transition: box-shadow .3s, transform .3s;
}
.page-financing .card-grid--features .card:hover { box-shadow: var(--sh2); transform: translateY(-3px); }
.page-financing .card--grid-item__icon {
	width: 40px; height: 40px; border-radius: 12px; margin-bottom: 18px;
	background: color-mix(in srgb, var(--blue) 8%, transparent);
	border: 1px solid color-mix(in srgb, var(--blue) 15%, transparent);
	display: flex; align-items: center; justify-content: center; color: var(--blue);
}
.page-financing .card--grid-item__icon svg { width: 20px; height: 20px; }
/* ref .fin-pillar-arr sits against the title rather than above it. */
.page-financing .card--grid-item__heading {
	display: flex; align-items: center; gap: 8px;
	font-size: 14px; font-weight: 800; letter-spacing: .2px;
	text-transform: uppercase; line-height: 1.3; color: var(--navy); margin: 0 0 12px;
}
.page-financing .card--grid-item__heading::before {
	content: '\203A'; color: var(--blue); font-size: 14px; font-weight: 900; line-height: 1;
}
.page-financing .card--grid-item__text { font-size: 13px; line-height: 1.75; color: var(--t2); margin: 0; }
/* ref .fin-pillar p em: the rate example is an aside, not the sentence. */
.page-financing .card--grid-item__footnote {
	font-style: italic; font-size: 12px; color: var(--t3, #8496AA); line-height: 1.6; margin: 8px 0 0;
}
@media (max-width: 860px) { .page-financing .card-grid--features .card-grid__grid { grid-template-columns: 1fr; } }

/* ── Stats beside a film (ref .fin-top / .fin-video / .fin-stat) ───────
 * The figures are the short version of what the film explains, so they
 * sit next to it in a column rather than running across the page.
 */
.stats-bar__top { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: stretch; }
.stats-bar__film {
	appearance: none; cursor: pointer; min-height: 300px;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	background: linear-gradient(145deg, #EEF5FF 0%, #F4F8FD 50%, #EAF2FA 100%);
	border: 1px solid color-mix(in srgb, var(--blue) 12%, transparent);
	border-radius: 22px; transition: transform .3s, box-shadow .3s;
}
.stats-bar__film:hover { transform: translateY(-4px); box-shadow: var(--sh3, var(--sh2)); }
/* With a poster the panel becomes a video thumbnail: the still fills it, a
   scrim keeps the play button and title legible, and those flip to white. */
.stats-bar__film--poster { position: relative; overflow: hidden; background: var(--navy); border-color: transparent; }
.stats-bar__film-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.stats-bar__film-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(5,18,36,.28) 0%, rgba(5,18,36,.18) 42%, rgba(5,18,36,.62) 100%); }
.stats-bar__film--poster .stats-bar__film-play,
.stats-bar__film--poster .stats-bar__film-lbl,
.stats-bar__film--poster .stats-bar__film-ttl { position: relative; z-index: 2; }
.stats-bar__film--poster .stats-bar__film-play { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.55); }
.stats-bar__film--poster .stats-bar__film-play::after { border-left-color: #fff; }
.stats-bar__film--poster:hover .stats-bar__film-play { background: rgba(255,255,255,.34); }
.stats-bar__film--poster .stats-bar__film-lbl { color: rgba(255,255,255,.82); }
.stats-bar__film--poster .stats-bar__film-ttl { color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.4); }
.stats-bar__film-play {
	width: 74px; height: 74px; border-radius: 50%; margin-bottom: 14px;
	background: color-mix(in srgb, var(--blue) 10%, transparent);
	border: 1px solid color-mix(in srgb, var(--blue) 18%, transparent);
	display: flex; align-items: center; justify-content: center; transition: all .25s;
}
/* ref .fin-video-tri: a solid triangle, not a glyph. */
.stats-bar__film-play::after {
	content: ''; width: 0; height: 0; margin-left: 4px; border-style: solid;
	border-width: 11px 0 11px 20px; border-color: transparent transparent transparent var(--navy);
}
.stats-bar__film:hover .stats-bar__film-play { transform: scale(1.08); background: color-mix(in srgb, var(--blue) 18%, transparent); }
.stats-bar__film-lbl {
	font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
	color: var(--t3, #8496AA); margin-bottom: 6px;
}
.stats-bar__film-ttl { font-family: var(--font-head); font-size: 18px; font-weight: 800; letter-spacing: -.3px; color: var(--navy); }
.stats-bar__col { display: flex; flex-direction: column; gap: 16px; }
.stats-bar__card {
	background: var(--w); border: 1px solid var(--bdr); border-radius: 18px;
	padding: 24px 22px; position: relative; overflow: hidden; flex: 1;
	display: flex; flex-direction: column; justify-content: center;
}
/* ref accents only the first: it is the claim the page leads on. */
.stats-bar__card:first-child {
	background: linear-gradient(145deg, color-mix(in srgb, var(--blue) 4%, transparent) 0%, var(--w) 55%);
	border-color: color-mix(in srgb, var(--blue) 15%, transparent);
}
.stats-bar__card:first-child::before {
	content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
	background: linear-gradient(90deg, var(--blue), var(--sky), transparent);
}
.stats-bar__card-eye {
	font-size: 9px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
	color: var(--t3, #8496AA); margin: 0 0 8px;
}
.stats-bar__card-num {
	font-family: var(--font-head); font-size: clamp(36px, 4vw, 48px); font-weight: 800;
	color: var(--navy); line-height: 1; letter-spacing: -2px; margin: 0 0 6px;
}
.stats-bar__card:first-child .stats-bar__card-num { color: var(--blue); }
.stats-bar__card-cap { font-size: 13px; color: var(--t2); line-height: 1.6; margin: 0; }
@media (max-width: 860px) { .stats-bar__top { grid-template-columns: 1fr; } }
/* ref .page-h1 / .page-sub are capped at 800 and 580. Ours ran the heading
   to the full container, which put "Payments that fit your life." on one
   very long line where the reference breaks it. */
.page-financing .hero--interior .section-heading__title { max-width: 800px; }
.page-financing .hero--interior .section-heading__sub { max-width: 580px; }

/* ── Comparison as cards (ref .comp-grid / .comp-card) ─────────────────
 * Two sides read against each other rather than looked up feature by
 * feature. Ours is what we offer and ticks its lines; the other side
 * crosses its own and sits a shade quieter.
 */
.comparison-table--cards .comparison-table__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.comparison-table__card {
	background: var(--w); border: 1px solid var(--bdr); border-radius: 22px;
	padding: 36px 32px; position: relative; overflow: hidden;
}
.comparison-table__card.is-highlight {
	background: linear-gradient(145deg, color-mix(in srgb, var(--blue) 6%, transparent) 0%, var(--w) 55%);
	border-color: color-mix(in srgb, var(--blue) 20%, transparent);
}
.comparison-table__card.is-highlight::before {
	content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
	background: linear-gradient(90deg, var(--blue), var(--sky), transparent);
}
.comparison-table__card h3 {
	font-family: var(--font-head); font-size: 18px; font-weight: 800;
	letter-spacing: .5px; text-transform: uppercase; color: var(--navy); margin: 0 0 28px;
}
.comparison-table__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.comparison-table__list li {
	display: flex; align-items: flex-start; gap: 12px;
	font-size: 13.5px; line-height: 1.6; color: var(--t1, var(--navy));
}
.comparison-table__ico {
	width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; margin-top: 2px;
	display: flex; align-items: center; justify-content: center;
}
.comparison-table__card.is-highlight .comparison-table__ico {
	background: color-mix(in srgb, var(--blue) 10%, transparent);
	border: 1px solid color-mix(in srgb, var(--blue) 25%, transparent);
	color: var(--blue);
}
.comparison-table__card:not(.is-highlight) .comparison-table__ico {
	background: rgba(200,200,200,.15); border: 1px solid rgba(200,200,200,.3); color: #999;
}
/* The side that is not ours is quieter, as the reference has it. */
.comparison-table__card:not(.is-highlight) .comparison-table__list li { color: var(--t3, #8496AA); }
/* ref .comp-inner is 1100px, narrower than the page container, and its
   heading is uncapped inside that — so the title stays on one line
   where our centred head's 720px box broke it in two. */
.comparison-table--cards .container { max-width: 1100px; }
.comparison-table--cards .section-heading--center { max-width: none; }
.comparison-table--cards .section-heading__title { max-width: none; }
/* ref caps this lede at 500px rather than filling the centred head. */
.comparison-table--cards .section-heading__sub { max-width: 500px; }
@media (max-width: 860px) { .comparison-table--cards .comparison-table__cards { grid-template-columns: 1fr; } }

/* ── Steps as cards with a device mock (ref .proc-steps / .pstep) ──────
 * Three cards on a dashed thread, each opening on a numbered disc and a
 * drawing of the screen that step happens on.
 */
/* ref .proc-inner is 1200px and its heading is uncapped inside that, so
   the title holds one line where our centred head's 720px box broke it. */
.numbered-steps--screens .container { max-width: 1200px; }
.numbered-steps--screens .section-heading--center { max-width: none; }
.numbered-steps--screens .section-heading__title { max-width: none; }
.numbered-steps--screens .section-heading__sub { max-width: 620px; }
.numbered-steps__screens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; }
/* ref .proc-line: behind the discs, stopping short of the outer edges. */
.numbered-steps__thread {
	position: absolute; top: 50px; left: 20%; right: 20%; height: 1px; z-index: 0; pointer-events: none;
	background: repeating-linear-gradient(90deg, var(--bdr2) 0 8px, transparent 8px 16px);
}
.numbered-steps__card {
	background: var(--w); border: 1px solid var(--bdr); border-radius: 20px;
	padding: 28px 24px; position: relative; z-index: 1;
	transition: box-shadow .3s, transform .3s;
}
.numbered-steps__card:hover { box-shadow: var(--sh2); transform: translateY(-4px); }
.numbered-steps__num {
	width: 40px; height: 40px; border-radius: 50%; margin: 0 auto 20px;
	background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center;
	font-family: var(--font-head); font-size: 16px; font-weight: 800;
	/* The white ring is what lets the disc sit on the thread without the
	   line running through it. */
	border: 3px solid var(--w); box-shadow: 0 0 0 1px var(--bdr);
}
.numbered-steps__device {
	aspect-ratio: 4 / 5; margin-bottom: 20px; border-radius: 16px; overflow: hidden;
	background: linear-gradient(145deg, #F8FAFC 0%, #EEF5FF 50%, #E6F0FF 100%);
	border: 1px solid var(--bdr); display: flex; align-items: center; justify-content: center;
}
/* A supplied screen mockup (SVG) sits in the device card in place of the CSS phone. */
.numbered-steps__mockup { height: 92%; aspect-ratio: 320 / 600; display: flex; }
.numbered-steps__mockup svg { width: 100%; height: 100%; display: block; }
.numbered-steps__phone {
	width: 58%; aspect-ratio: 9 / 16; background: var(--w);
	border: 1px solid var(--bdr2); border-radius: 16px;
	display: flex; flex-direction: column; padding: 12px 8px; gap: 6px;
}
.numbered-steps__notch { width: 38%; height: 4px; background: var(--bdr2); border-radius: 3px; margin: 0 auto; }
.numbered-steps__phone-title {
	font-size: 7px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
	color: var(--blue); text-align: center; margin-top: 4px;
}
.numbered-steps__phone-line { height: 5px; background: var(--bdr2); border-radius: 3px; margin-top: 3px; }
.numbered-steps__phone-line--sm { width: 70%; }
.numbered-steps__phone-btn {
	margin-top: auto; margin-bottom: 3px; height: 12px; border-radius: 3px;
	background: color-mix(in srgb, var(--blue) 20%, transparent);
}
.numbered-steps__card-ttl {
	font-family: var(--font-head); font-size: 15px; font-weight: 800; color: var(--navy);
	letter-spacing: -.2px; line-height: 1.3; text-align: center; margin: 0 0 8px;
}
.numbered-steps--screens .numbered-steps__card p { font-size: 13px; color: var(--t2); line-height: 1.7; text-align: center; margin: 0; }
.numbered-steps--screens .numbered-steps__action { display: flex; justify-content: center; margin-top: 48px; }
@media (max-width: 860px) {
	.numbered-steps__screens { grid-template-columns: 1fr; }
	.numbered-steps__thread { display: none; }
}
/* ref .close-inner: 900px, and a gradient rule across the top. ::after
   rather than ::before, which the card already spends on its glow. */
.page-financing .cta-banner__box { max-width: 900px; position: relative; overflow: hidden; }
.page-financing .cta-banner__box::after {
	content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2;
	background: linear-gradient(90deg, var(--blue), var(--sky), transparent);
}
.page-financing .cta-banner .section-heading__sub { max-width: 500px; }

/* ── Payment accordion (ref .pay-accordion) ────────────────────────────
 * The methods lie side by side: one open, the rest as spines turned on
 * their side. Ported from the reference's own rules; the flex basis is
 * what animates, so a card opens by growing rather than by appearing.
 */
.tabbed-content--pay .pay-accordion { display: flex; gap: 14px; min-height: 480px; align-items: stretch; }
.tabbed-content--pay .pay-card {
	background: var(--w); border: 1px solid var(--bdr); border-radius: 20px;
	overflow: hidden; position: relative;
	transition: flex .5s cubic-bezier(.22, 1, .36, 1), border-color .25s ease, box-shadow .25s ease;
}
.tabbed-content--pay .pay-card.collapsed { flex: 0 0 80px; display: flex; align-items: stretch; }
.tabbed-content--pay .pay-card.collapsed:hover { border-color: rgba(15, 76, 129, .3); box-shadow: var(--sh); }
.tabbed-content--pay .pay-card.expanded { flex: 1; border-color: rgba(15, 76, 129, .2); box-shadow: var(--sh2); }
/* The spine is the control. Open, there is nothing left to press. */
.tabbed-content--pay .pay-card__spine {
	display: none; width: 100%; padding: 28px 0; cursor: pointer;
	background: none; border: 0; align-items: center; justify-content: center;
}
.tabbed-content--pay .pay-card.collapsed .pay-card__spine { display: flex; }
.tabbed-content--pay .pay-card__spine span {
	font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 800;
	letter-spacing: 2px; text-transform: uppercase; color: var(--t3);
	writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
	transition: color .25s;
}
.tabbed-content--pay .pay-card.collapsed:hover .pay-card__spine span { color: var(--blue); }
.tabbed-content--pay .pay-card.collapsed .pay-expanded { display: none; }
.tabbed-content--pay .pay-expanded { display: flex; padding: 40px 36px; flex-direction: column; height: 100%; min-height: 480px; }
.tabbed-content--pay .pay-expanded h3 {
	font-family: 'Montserrat', sans-serif; font-size: 22px; font-weight: 800;
	color: var(--navy); letter-spacing: -.4px; margin: 0 0 8px;
}
.tabbed-content--pay .pay-fee {
	font-size: 11px; font-weight: 700; color: var(--blue);
	letter-spacing: 1px; text-transform: uppercase; margin: 0 0 24px;
}
.tabbed-content--pay .pay-fee--warn { color: #C8993A; }
.tabbed-content--pay .pay-step-ttl {
	font-size: 10px; font-weight: 700; letter-spacing: 2px;
	text-transform: uppercase; color: var(--t3); margin: 0 0 16px;
}
.tabbed-content--pay .pay-steps {
	list-style: none; padding: 0; margin: 0 0 28px;
	display: flex; flex-direction: column; gap: 12px;
}
.tabbed-content--pay .pay-steps li { display: flex; align-items: flex-start; gap: 12px; color: var(--t1); font-size: 13px; line-height: 1.6; }
.tabbed-content--pay .pay-dot {
	flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%;
	background: rgba(15, 76, 129, .08); border: 1px solid rgba(15, 76, 129, .2);
	color: var(--blue); font-size: 10px; font-weight: 800;
	display: flex; align-items: center; justify-content: center;
	margin-top: 1px; font-family: 'Montserrat', sans-serif;
}
/* The caution closing the list is amber, so it reads as the exception it is. */
.tabbed-content--pay .pay-dot--note { background: rgba(200, 153, 58, .1); border-color: rgba(200, 153, 58, .3); color: #A87A22; }
.tabbed-content--pay .pay-steps li strong { color: var(--navy); font-weight: 700; }
.tabbed-content--pay .pay-steps li p { margin: 0; }
.tabbed-content--pay .pay-steps li code {
	background: rgba(15, 76, 129, .08); border: 1px solid rgba(15, 76, 129, .15);
	padding: 2px 8px; border-radius: 6px; font-family: 'DM Sans', monospace;
	font-size: 12px; color: var(--blue); font-weight: 600; letter-spacing: .2px;
}
.tabbed-content--pay .pay-wire {
	display: grid; grid-template-columns: 1fr; gap: 8px 16px;
	font-size: 13px; line-height: 1.5; margin: 0 0 auto;
}
.tabbed-content--pay .pay-wire > div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; }
.tabbed-content--pay .pay-wire dt { color: var(--t3); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; align-self: center; margin: 0; }
.tabbed-content--pay .pay-wire dd { color: var(--t1); font-weight: 600; margin: 0; }
/* margin-top:auto pins it to the foot of the panel, so every method's
   button sits on the same line however long its instructions ran. */
.tabbed-content--pay .pay-btn {
	margin-top: auto; align-self: flex-start;
	background: var(--navy); color: #fff; padding: 12px 28px; border-radius: 100px;
	font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12px;
	border: 1.5px solid var(--navy); cursor: pointer; letter-spacing: .2px;
	text-decoration: none; transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.tabbed-content--pay .pay-btn:hover { background: var(--blue); border-color: var(--blue); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(15, 76, 129, .28); }
.tabbed-content--pay .pay-btn--ghost { background: rgba(15, 76, 129, .06); color: var(--blue); border-color: rgba(15, 76, 129, .2); }
.tabbed-content--pay .pay-btn--ghost:hover { background: rgba(15, 76, 129, .12); color: var(--navy); }
/* ref @media(max-width:960px): side by side needs width it no longer has,
   so the spines lie flat and the cards stack. */
@media (max-width: 960px) {
	.tabbed-content--pay .pay-accordion { flex-direction: column; min-height: auto; }
	.tabbed-content--pay .pay-card.collapsed { flex: 0 0 auto; min-height: 60px; }
	.tabbed-content--pay .pay-card__spine { padding: 18px 0; }
	.tabbed-content--pay .pay-card__spine span { writing-mode: horizontal-tb; transform: none; }
	.tabbed-content--pay .pay-expanded { min-height: 0; padding: 28px 24px; }
	.tabbed-content--pay .pay-wire > div { grid-template-columns: 1fr; gap: 2px; }
	.tabbed-content--pay .pay-wire dt { margin-top: 8px; }
	.tabbed-content--pay .pay-btn { margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
	.tabbed-content--pay .pay-card { transition: none; }
}

/* ── Booking embed (HubSpot meetings) ──────────────────────────────────
 * HubSpot's script sizes its own iframe, so this only gives it a card to
 * sit in and a floor to stand on while it loads — without a min-height the
 * section collapses to nothing and the page jumps when the calendar
 * arrives.
 */
.booking-embed__frame {
	background: var(--w); border: 1px solid var(--bdr); border-radius: 22px;
	padding: 8px; box-shadow: var(--sh);
}
.booking-embed .meetings-iframe-container { min-height: 680px; }
.booking-embed .meetings-iframe-container iframe { display: block; width: 100%; border: 0; }
/* The way out for anyone the embed does not reach, and nothing more. It
   sits quiet and grey under the calendar: the calendar is the thing to
   use, and a second bold blue link beside it reads as a second offer. */
/* No padding above it on purpose. HubSpot's own card stops about 29px
   short of the bottom of the iframe it is drawn in, and that gap is inside
   a cross-origin frame, so it cannot be styled from here — it can only be
   counted. Padding below therefore carries the frame's own 8px up to the
   same 29, and the link sits in the middle of the space you can actually
   see rather than in the middle of the space the box measures. If a
   HubSpot release changes that inset, this is the number to re-measure. */
.booking-embed__fallback {
	margin: 0; padding: 0 16px 21px; text-align: center;
	font-size: 12px; line-height: 1.4;
}
.booking-embed__fallback a {
	color: var(--t3); font-weight: 600; text-decoration: none;
	letter-spacing: .2px; transition: color .18s ease;
}
.booking-embed__fallback a:hover { color: var(--t2); text-decoration: underline; }
@media (max-width: 640px) {
	.booking-embed__frame { padding: 4px; border-radius: 16px; }
	.booking-embed .meetings-iframe-container { min-height: 820px; }
}

/* ── Article pull quote (ref .art-quote) ───────────────────────────────
 * A blockquote in an article body was rendering as a paragraph — same
 * margin, same size, no rule — so 122 quotes across the blog read as
 * ordinary prose.
 *
 * The reference hardcodes the accent per page: its bariatric study quotes
 * in --bari, its stem cell piece in --stem. Ours does not need to, because
 * single.php already puts the article's own service colour on .article as
 * --svc. An untagged post falls back to the house blue rather than
 * borrowing a service it is not about.
 *
 * .wp-block-quote alongside the bare tag: the 199 imported posts are plain
 * HTML, but the block editor is on for new ones and writes a class.
 */
.article__body blockquote,
.article__body .wp-block-quote {
	margin: 32px 0;
	padding: 24px 28px;
	background: linear-gradient(145deg,
		color-mix(in srgb, var(--svc, var(--blue)) 7%, transparent),
		color-mix(in srgb, var(--svc, var(--blue)) 2%, transparent));
	border-left: 4px solid var(--svc, var(--blue));
	border-radius: 0 14px 14px 0;
	font-family: 'Montserrat', sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.48;
	letter-spacing: -.3px;
	color: var(--navy);
}
/* The figure a quote is emphasising takes the accent, as the ref has it. */
.article__body blockquote strong,
.article__body .wp-block-quote strong { color: var(--svc, var(--blue)); }
/* A quote is one voice; its paragraphs should not be spaced like the body. */
.article__body blockquote p,
.article__body .wp-block-quote p { margin: 0; }
.article__body blockquote p + p,
.article__body .wp-block-quote p + p { margin-top: 12px; }
/* The block editor's own citation line, where a new post uses one. */
.article__body .wp-block-quote cite {
	display: block; margin-top: 12px;
	font-family: inherit; font-size: 11px; font-weight: 700;
	letter-spacing: 1.5px; text-transform: uppercase;
	color: var(--t3); font-style: normal;
}
@media (max-width: 640px) {
	.article__body blockquote,
	.article__body .wp-block-quote { padding: 18px 20px; font-size: 17px; margin: 26px 0; }
}

/* ── Article lists (ref .art-body li) ──────────────────────────────────
 * Scoped to the article body on purpose. `.prose ul li::before` puts a
 * green tick on every bullet, which is right for a marketing list making
 * promises and wrong for editorial prose setting out a study's cohorts —
 * and it was landing on all 279 lists in the blog. Everywhere else keeps
 * the tick; only articles get this.
 *
 * A dot in the article's own service colour, and a hairline between items
 * rather than a gap, so a list reads as a set of rows.
 *
 * Doubled class (.article__body.prose) rather than relying on being later
 * in the file: both sit on the same element, so the tick rule matches at
 * equal weight and source order is too quiet a thing to depend on.
 */
.article__body.prose ul,
.article__body.prose ol { list-style: none; margin: 0 0 24px; padding: 0; }
.article__body.prose li {
	position: relative; margin: 0; padding: 9px 0 9px 26px;
	line-height: 1.6; border-bottom: 1px solid var(--bdr2);
}
.article__body.prose li:last-child { border-bottom: none; }
.article__body.prose li > p { margin: 0; }
/* Centred on the first line whatever the body size, rather than a fixed
   offset that only lines up at the size it was measured against. */
.article__body.prose ul li::before {
	content: ''; position: absolute; left: 2px;
	top: calc(9px + (1.6em - 8px) / 2);
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--svc, var(--blue));
}
/* Ordered lists kept their numerals but lost their indent — the marker sat
   hard against the text ("1What is the actual cell count?"). Counted here
   so the numeral sits where the dot does. */
.article__body.prose ol { counter-reset: tv-ol; }
.article__body.prose ol > li { counter-increment: tv-ol; }
.article__body.prose ol > li::before {
	content: counter(tv-ol) '.';
	position: absolute; left: 0; top: 9px;
	font-size: .85em; font-weight: 700; line-height: 1.9;
	color: var(--svc, var(--blue));
}
/* A list nested inside one is a sub-point, not another set of rows. */
.article__body.prose li ul li,
.article__body.prose li ol li { border-bottom: none; padding-top: 2px; padding-bottom: 2px; }
.article__body.prose li ul, .article__body.prose li ol { margin: 6px 0 0; }

/* ── Article source box (ref .art-source) ──────────────────────────────
 * Closes an article that summarises someone else's work: whose it is, a
 * way to the original, and the standing disclaimer under a rule.
 */
.art-source {
	display: block; margin: 44px 0 8px; padding: 24px 26px;
	background: var(--w); border: 1px solid var(--bdr); border-radius: 16px;
}
.art-source__label {
	font-size: 10px; font-weight: 700; letter-spacing: 2px;
	text-transform: uppercase; color: var(--t3); margin: 0 0 11px;
}
.art-source__cite { font-size: 14px; line-height: 1.65; color: var(--t2); margin: 0 0 14px; }
.art-source__cite em { font-style: italic; }
.art-source__link {
	display: inline-flex; font-size: 13px; font-weight: 700;
	color: var(--blue); text-decoration: none; transition: color .2s;
}
.art-source__link:hover { color: var(--navy); }
.art-source__disclaimer {
	font-size: 11.5px; line-height: 1.6; color: var(--t3);
	margin: 16px 0 0; padding-top: 15px; border-top: 1px solid var(--bdr2);
}

/* ── Article closing CTA (ref .art-cta) ────────────────────────────────
 * The copy sits left and the two ways to act sit right, dropping under it
 * when the row runs out of width.
 */
.art-cta { margin: 46px 0 0; }
.art-cta__inner {
	background: linear-gradient(135deg, var(--navy), var(--blue));
	border-radius: 22px; padding: 38px 36px;
	display: flex; flex-wrap: wrap; align-items: center;
	justify-content: space-between; gap: 26px;
}
.art-cta__label {
	font-size: 10px; font-weight: 700; letter-spacing: 2px;
	text-transform: uppercase; color: var(--sky); margin: 0 0 10px;
}
.art-cta__heading {
	font-family: 'Montserrat', sans-serif; font-size: 26px; font-weight: 800;
	color: #fff; letter-spacing: -.6px; line-height: 1.1; margin: 0 0 8px;
}
.art-cta__text { font-size: 14px; color: rgba(190, 225, 255, .82); margin: 0; }
.art-cta__acts { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
.art-cta__call {
	background: var(--sky); color: var(--navy); font-weight: 700; font-size: 14px;
	padding: 13px 24px; border-radius: 100px; text-align: center;
	white-space: nowrap; text-decoration: none; transition: transform .2s;
}
.art-cta__call:hover { transform: translateY(-1px); }
.art-cta__book { color: #fff; font-weight: 600; font-size: 13px; text-align: center; text-decoration: none; }
.art-cta__book:hover { text-decoration: underline; }
/* ref @media: the two stack and the buttons take the full width, so neither
   is squeezed into a column that cannot hold a phone number. */
@media (max-width: 720px) {
	.art-cta__inner { flex-direction: column; align-items: flex-start; padding: 28px 24px; }
	.art-cta__acts { width: 100%; }
	.art-cta__call, .art-cta__book { width: 100%; }
	.art-cta__heading { font-size: 22px; }
	.art-source { padding: 20px 20px; }
}

/* ── Article hero layouts ──────────────────────────────────────────────
 * Three arrangements of one set of parts. Stacked is what every post has
 * always had and carries no rules of its own, so a post that never chose
 * cannot be moved by anything written here.
 */

/* Centered — the head reads down the middle over a centred picture. The
   deck's own max-width is what centres it; without the auto margins it
   would sit left inside a centred column. */
.article__hero--centered .article__header { text-align: center; }
.article__hero--centered .article__eyebrow { justify-content: center; }
.article__hero--centered .article__deck { margin-inline: auto; }
.article__hero--centered .article__meta { justify-content: center; }


/* Side image — headline in one column, picture in the other. The picture
   fills its column at a fixed ratio rather than setting the row's height,
   so a tall image cannot stretch the head beside it. */
@media (min-width: 900px) {
	.article__hero--side {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
		gap: 40px;
		align-items: center;
		max-width: 1180px;
		margin-inline: auto;
		padding-inline: 5%;
	}
	/* Both are already inside the grid, so their own centring and width
	   caps would fight it. */
	.article__hero--side .article__header,
	.article__hero--side .article__media {
		max-width: none; margin-inline: 0; padding-inline: 0; width: 100%;
	}
	.article__hero--side .article__header { padding-block: var(--section-pad) 0; }
	.article__hero--side .article__media { margin-bottom: 0; }
	.article__hero--side .article__media img {
		aspect-ratio: 4 / 3; object-fit: cover; height: auto;
	}
	.article__hero--side .article__title { font-size: clamp(28px, 3.2vw, 40px); }
	.article__hero--side .article__deck { max-width: none; }
}
/* Below that there is no second column to put a picture in, so both
   arrangements are the stacked one again. */

/* ── Article body typography (ref .art-body) ───────────────────────────
 * The column was never the problem — ours runs 780px against the
 * reference's 760. The type was: 15px/1.6 where the reference sets
 * 17px/1.8, which fits about 105 characters to a line against its 85 and
 * is what reads as thin and dense.
 *
 * Scoped to the article body. `.prose` is shared with content-media rows
 * and the legal pages, which are set at their own sizes for their own
 * reasons and should not be dragged along by an article's measure.
 */
.article__body.prose { font-size: 17px; line-height: 1.8; }
.article__body.prose > p { margin-bottom: 22px; }
.article__body.prose > p:last-child { margin-bottom: 0; }
.article__body.prose h2 {
	font-size: 24px; font-weight: 800; letter-spacing: -.6px;
	line-height: 1.2; margin: 40px 0 15px;
}
.article__body.prose h3 { font-size: 19px; font-weight: 700; letter-spacing: -.3px; margin: 32px 0 12px; }
.article__body.prose h4 { font-size: 17px; font-weight: 700; margin: 26px 0 10px; color: var(--navy); }
/* A shade under the body, as the reference sets it — a list is a set of
   short lines and takes the extra weight of a rule around each one. */
.article__body.prose li { font-size: 16px; }
@media (max-width: 640px) {
	.article__body.prose { font-size: 16px; line-height: 1.75; }
	.article__body.prose h2 { font-size: 21px; margin-top: 32px; }
	.article__body.prose li { font-size: 15px; }
}

/* ── Article section eyebrow ───────────────────────────────────────────
 * "01 / The shift" above the heading it introduces. The number and the
 * name are one line in the copy, so they are one label here — the slash
 * is the author's, not ours to restyle.
 *
 * Takes the article's own service colour, as the pull quote and the list
 * dots do, so a piece reads in one accent from top to bottom.
 */
.article__body.prose .art-eyebrow {
	font-size: 11px; font-weight: 700; letter-spacing: 2px;
	text-transform: uppercase; color: var(--svc, var(--blue));
	margin: 42px 0 0; line-height: 1.4;
}
/* The heading belongs to the eyebrow, so it closes up under it rather than
   keeping the distance it holds from a paragraph. */
.article__body.prose .art-eyebrow + h2,
.article__body.prose .art-eyebrow + h3,
.article__body.prose .art-eyebrow + h4 { margin-top: 6px; }
/* First thing in the body, it does not need the gap that separates it from
   a section above. */
.article__body.prose .art-eyebrow:first-child { margin-top: 0; }