/*
 * Homepage PageDocument CSS — BARABOM HOMEPAGE MASTER 01 (Photo Editorial).
 *
 * Scoped entirely to `.brb-hv1`, the wrapper the builder puts around every
 * section. The Master palette is declared here as local custom properties
 * rather than by editing `tokens.css`: the global shell still carries the
 * current site palette, and migrating it is a separate, owner-gated step.
 *
 * Palette   deep green #0B3328 · gold #A88959 · cream #F5F1EA · charcoal #303432
 * Gold is restricted to small labels, section numbers, thin rules and
 * restrained accents. It is never a large fill or a button face.
 * Type      Noto Serif KR for display, Pretendard for body and UI.
 *
 * Mobile first. The two breakpoints match the validated viewports: 834 and 1440.
 */

.brb-hv1 {
	--hv1-green: #0b3328;
	--hv1-green-deep: #07241c;
	/* #A88959 is the brand gold and stays the colour of rules, dividers and
	 * other non-text accents. Small uppercase labels only reach 2.9:1 on the
	 * cream ground at that value, so gold that carries text uses a darkened
	 * step of the same hue (4.6:1 on cream, 4.9:1 on paper), and a lightened
	 * step on deep green (4.5:1). The look holds; the ratio no longer fails. */
	--hv1-gold: #a88959;
	--hv1-gold-text: #816945;
	--hv1-gold-on-dark: #cbb08a;
	--hv1-cream: #f5f1ea;
	--hv1-cream-deep: #ece5d9;
	--hv1-ink: #303432;
	/* 0.68 lands at 4.43:1 on the cream ground — just under AA for body copy;
	 * 0.72 clears it on both grounds and is visually the same grey. */
	--hv1-muted: rgba(48, 52, 50, 0.72);
	--hv1-line: rgba(48, 52, 50, 0.16);
	--hv1-line-soft: rgba(48, 52, 50, 0.1);
	--hv1-paper: #fbf9f5;
	--hv1-serif: "Noto Serif KR", var(--brb-font-display, serif);
	--hv1-sans: var(--brb-font-body, "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
	--hv1-gutter: 1.25rem;

	color: var(--hv1-ink);
	background: var(--hv1-paper);
	font-family: var(--hv1-sans);
	font-size: 1rem;
	line-height: 1.75;
	word-break: keep-all;
	overflow-wrap: anywhere;
	-webkit-font-smoothing: antialiased;
}

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

.brb-hv1 img { display: block; max-width: 100%; }
.brb-hv1 a { color: inherit; text-decoration: none; }
.brb-hv1 a:hover { color: var(--hv1-green); }
.brb-hv1 a:focus-visible { outline: 3px solid var(--hv1-green); outline-offset: 3px; }
/* `:where()` keeps the reset at zero specificity for the list itself, so a
 * component rule further down — the space rail's own padding, for one — is not
 * silently outranked by the reset. */
.brb-hv1 :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
.brb-hv1 h1,
.brb-hv1 h2,
.brb-hv1 h3,
.brb-hv1 p,
.brb-hv1 figure,
.brb-hv1 dl { margin: 0; }

.brb-hv1-section { padding-block: clamp(3.25rem, 8vw, 6rem); }
.brb-hv1-wrap { width: min(100% - (var(--hv1-gutter) * 2), 75rem); margin-inline: auto; }

.brb-hv1 h1 {
	font-family: var(--hv1-serif);
	font-size: clamp(2.125rem, 1.35rem + 3.3vw, 3.5rem);
	font-weight: 600;
	line-height: 1.24;
	letter-spacing: -0.03em;
}

.brb-hv1 h2 {
	font-family: var(--hv1-serif);
	font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.5rem);
	font-weight: 600;
	line-height: 1.34;
	letter-spacing: -0.025em;
}

.brb-hv1 h3 {
	font-family: var(--hv1-serif);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.5;
}

.brb-hv1-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-block-end: 0.9rem;
	color: var(--hv1-gold-text);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1.4;
}

.brb-hv1-eyebrow-onphoto { color: #e6d6b8; }

.brb-hv1-flag {
	padding: 0.15rem 0.45rem;
	background: var(--hv1-green);
	color: var(--hv1-cream);
	font-size: 0.625rem;
	letter-spacing: 0.14em;
}

.brb-hv1-lead,
.brb-hv1-section-lead {
	max-width: 34em;
	margin-block-start: 1rem;
	color: var(--hv1-muted);
	font-size: 0.9688rem;
	line-height: 1.8;
}

.brb-hv1-more { margin-block-start: 2rem; font-size: 0.9375rem; font-weight: 600; }
.brb-hv1-more a { border-block-end: 1px solid var(--hv1-line); padding-block-end: 0.2rem; }

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

.brb-hv1-button {
	display: inline-flex;
	min-height: 48px;
	align-items: center;
	justify-content: center;
	padding-inline: 1.4rem;
	border: 1px solid var(--hv1-line);
	background: transparent;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.brb-hv1-button-primary { border-color: var(--hv1-green); background: var(--hv1-green); color: var(--hv1-cream) !important; }
.brb-hv1-button-primary:hover { background: var(--hv1-green-deep); }
.brb-hv1-button-ghost { border-color: rgba(48, 52, 50, 0.38); background: rgba(255, 255, 255, 0.86); }
.brb-hv1-button-onphoto { border-color: rgba(255, 255, 255, 0.68); background: rgba(11, 51, 40, 0.44); color: #fff !important; }
.brb-hv1-button-light { border-color: var(--hv1-cream); background: var(--hv1-cream); color: var(--hv1-green) !important; }
.brb-hv1-button-outline { border-color: rgba(245, 241, 234, 0.44); color: var(--hv1-cream) !important; }

.brb-hv1-actions { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-block-start: 1.75rem; }
.brb-hv1-actions > .brb-hv1-button { flex: 1 1 12rem; }

/* Secondary action that should not compete with the primary button: no box,
 * the site's green text and a thin underline. It keeps the 48px tap height. */
.brb-hv1 .brb-hv1-button-quiet {
	padding-inline: 0.25rem;
	border-color: transparent;
	color: var(--hv1-green) !important;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(11, 51, 40, 0.34);
	text-underline-offset: 0.4em;
}
.brb-hv1 .brb-hv1-button-quiet:hover { text-decoration-color: var(--hv1-green); }
.brb-hv1-actions > .brb-hv1-button-quiet { flex: 0 0 auto; }

/* Eyebrow led by a short gold hairline — the quiet form of a "new" marker. */
.brb-hv1-eyebrow-rule::before {
	content: "";
	flex: none;
	width: 1.5rem;
	height: 0;
	border-block-start: 1px solid var(--hv1-gold);
}

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

/* The owner-selected four-dermatologist portrait (H-02) with the copy laid over
 * it. The veil is deliberately light and close to neutral: nothing covers the
 * upper part of the photograph, and only the band behind the copy is darkened,
 * so the portrait keeps its own colours instead of reading green. */
.brb-hv1-hero {
	position: relative;
	display: grid;
	align-items: end;
	/* A little taller than the page's other photo bands at 390, so the copy
	 * starts below the seated doctors' faces. */
	min-height: min(44rem, 86svh);
	padding-block: 0 clamp(2.5rem, 7vw, 4.5rem);
	background: var(--hv1-green);
	isolation: isolate;
	overflow: clip;
}

.brb-hv1-hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }

.brb-hv1-hero-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	transform: scale(1.01);
	animation: brb-hv1-hero-drift 28s ease-in-out infinite alternate;
}

.brb-hv1-hero-veil {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(14, 26, 22, 0) 0%, rgba(14, 26, 22, 0) 42%, rgba(12, 30, 24, 0.48) 68%, rgba(10, 32, 25, 0.78) 100%),
		linear-gradient(90deg, rgba(14, 26, 22, 0.24) 0%, rgba(14, 26, 22, 0) 55%);
}

/* Slow and shallow: kept close to 1:1 so the doctors at either edge stay in frame. */
@keyframes brb-hv1-hero-drift {
	from { transform: scale(1.01) translate3d(0, 0, 0); }
	to { transform: scale(1.04) translate3d(-0.6%, -0.4%, 0); }
}

.brb-hv1-hero-copy { color: var(--hv1-cream); }
.brb-hv1-hero-copy h1 { color: #fff; text-shadow: 0 1px 2px rgba(10, 20, 16, 0.35), 0 2px 22px rgba(10, 20, 16, 0.4); }
.brb-hv1-hero-copy .brb-hv1-eyebrow { color: #e8d5ad; text-shadow: 0 1px 10px rgba(10, 20, 16, 0.6); }
.brb-hv1-hero-copy .brb-hv1-lead { max-width: 30em; color: rgba(245, 241, 234, 0.92); text-shadow: 0 1px 12px rgba(10, 20, 16, 0.5); text-wrap: pretty; }
.brb-hv1-hero .brb-hv1-actions { margin-block-start: 2.25rem; }
/* Scoped so the paragraph reset on .brb-hv1 p cannot collapse it. */
.brb-hv1-hero .brb-hv1-hero-note { margin-block-start: 1.25rem; }
.brb-hv1-hero-note { margin-block-start: 1.75rem; color: rgba(245, 241, 234, 0.82); font-size: 0.8125rem; letter-spacing: 0.02em; text-shadow: 0 1px 8px rgba(10, 20, 16, 0.5); }
/* On the hero's dark ground the primary is the light, filled button; the
 * secondary is an outline only, so the order of the two reads at once. */
.brb-hv1-hero .brb-hv1-button-primary { border-color: var(--hv1-cream); background: var(--hv1-cream); color: var(--hv1-green) !important; }
.brb-hv1-hero .brb-hv1-button-primary:hover { border-color: #ffffff; background: #ffffff; }
.brb-hv1-hero .brb-hv1-button-ghost { border-color: rgba(245, 241, 234, 0.5); background: transparent; color: var(--hv1-cream) !important; font-weight: 500; }

/* 390: the portrait gets its own band at the top of the hero, sized so all four
 * doctors fit the frame side to side; below it the band fades into the hero's
 * green, where the copy sits. Framing only — the photograph is unchanged. */
@media (max-width: 52.124rem) {
	.brb-hv1-hero { min-height: 44.5rem; }
	.brb-hv1-hero-media { inset: 0 0 auto; height: min(34rem, 138vw); }
	.brb-hv1-hero-image { object-position: 49% 50%; animation: none; transform: none; }
	.brb-hv1-hero-veil {
		background: linear-gradient(180deg, rgba(11, 51, 40, 0) 0%, rgba(11, 51, 40, 0) 40%, rgba(11, 51, 40, 0.5) 72%, rgb(11, 51, 40) 100%);
	}
	.brb-hv1-hero .brb-hv1-actions { flex-wrap: nowrap; }
	.brb-hv1-hero .brb-hv1-actions > .brb-hv1-button { flex: 1 1 0; min-width: 0; padding-inline: 0.75rem; }
	.brb-hv1-hero .brb-hv1-actions > .brb-hv1-button-primary { flex-grow: 1.15; }
}

/* --- 02 quick find ------------------------------------------------------- */

.brb-hv1-quickfind { background: var(--hv1-cream); }

.brb-hv1-concern-editorial { margin-block-start: 2rem; border-block-start: 1px solid var(--hv1-ink); }
.brb-hv1-concern-editorial li { border-block-end: 1px solid var(--hv1-line); }

.brb-hv1-concern-editorial a {
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr) 1.25rem;
	align-items: center;
	gap: 0.75rem;
	min-height: 5.25rem;
	padding-block: 1.1rem;
}

.brb-hv1-concern-number { color: var(--hv1-gold-text); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; }
.brb-hv1-concern-copy { display: grid; gap: 0.2rem; }
.brb-hv1-concern-copy strong { font-family: var(--hv1-serif); font-size: 1.1875rem; font-weight: 600; line-height: 1.4; }
.brb-hv1-concern-copy > span { color: var(--hv1-muted); font-size: 0.875rem; line-height: 1.6; }
.brb-hv1-concern-arrow { color: var(--hv1-green); font-size: 1rem; text-align: end; }

.brb-hv1-quicklinks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-block-start: 1.5rem; }
.brb-hv1-quicklinks a {
	display: grid;
	gap: 0.15rem;
	min-height: 4.5rem;
	padding: 0.9rem 1rem;
	border: 1px solid var(--hv1-line);
	background: rgba(255, 255, 255, 0.72);
}
.brb-hv1-quicklinks strong { font-size: 0.9375rem; font-weight: 600; }
.brb-hv1-quicklinks span { color: var(--hv1-muted); font-size: 0.8125rem; }

/* --- 03 philosophy ------------------------------------------------------- */

.brb-hv1-philosophy-grid { display: grid; gap: 2rem; }
.brb-hv1-philosophy-media { position: relative; }
.brb-hv1-philosophy-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 42%; }
.brb-hv1-philosophy-media figcaption {
	margin-block-start: 0.65rem;
	color: var(--hv1-muted);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
}

.brb-hv1-principles { margin-block-start: 2rem; counter-reset: brb-hv1-principle; border-block-start: 1px solid var(--hv1-ink); }
.brb-hv1-principles li {
	counter-increment: brb-hv1-principle;
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr);
	gap: 0.35rem 0.75rem;
	padding-block: 1.35rem;
	border-block-end: 1px solid var(--hv1-line);
}
.brb-hv1-principles li::before {
	content: "0" counter(brb-hv1-principle);
	grid-row: 1 / 3;
	color: var(--hv1-gold-text);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.9;
}
.brb-hv1-principles strong { font-family: var(--hv1-serif); font-size: 1.0625rem; font-weight: 600; line-height: 1.5; }
.brb-hv1-principles span { color: var(--hv1-muted); font-size: 0.9063rem; line-height: 1.75; }

/* --- 04 new device ------------------------------------------------------- */

.brb-hv1-newdevice { background: var(--hv1-cream); }
.brb-hv1-newdevice-grid { display: grid; gap: 3rem; align-items: center; }
.brb-hv1-newdevice .brb-hv1-actions { align-items: center; column-gap: 1.5rem; }
/* The photograph itself is cropped at the bottom, so the frame fills edge to
 * edge: the device stays at full scale and runs off the lower edge rather than
 * being scaled down to fit a shorter box. */
.brb-hv1-newdevice-media { background: transparent; }
.brb-hv1-newdevice-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 0%; }
.brb-hv1-newdevice-media figcaption {
	margin-block-start: 0.75rem;
	color: var(--hv1-muted);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
}

/* --- 05 signature -------------------------------------------------------- */

.brb-hv1-signature-banner { position: relative; margin-block-start: 2rem; isolation: isolate; overflow: clip; }
.brb-hv1-signature-banner img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 50%; }

/* The copy sits directly on the photograph — no card, no white plate. The
 * scrim is a gradient on the container so the type stays readable at 390
 * without covering the room. */
.brb-hv1-signature-banner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(7, 36, 28, 0) 24%, rgba(7, 36, 28, 0.52) 58%, rgba(7, 36, 28, 0.86) 100%);
}

.brb-hv1-signature-banner-copy { position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 1; padding: 1.25rem; color: #fff; }
.brb-hv1-signature-banner-copy .brb-hv1-eyebrow { margin-block-end: 0.5rem; }
.brb-hv1-signature-banner-pair { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; font-family: var(--hv1-serif); font-size: 1.25rem; font-weight: 600; }
.brb-hv1-signature-banner-pair span + span { position: relative; padding-inline-start: 1.1rem; }
.brb-hv1-signature-banner-pair span + span::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block: 0.35em auto;
	width: 1px;
	height: 1em;
	background: rgba(255, 255, 255, 0.42);
}

.brb-hv1-signature-list { margin-block-start: 2rem; border-block-start: 1px solid var(--hv1-ink); }
.brb-hv1-signature-list li { border-block-end: 1px solid var(--hv1-line); }
.brb-hv1-signature-list a {
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr) 1.25rem;
	align-items: center;
	gap: 0.75rem;
	min-height: 4.75rem;
	padding-block: 1rem;
}
.brb-hv1-signature-list a > span:nth-child(2) { display: grid; gap: 0.15rem; }
.brb-hv1-signature-number { color: var(--hv1-gold-text); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; }
.brb-hv1-signature-list strong { font-family: var(--hv1-serif); font-size: 1.0938rem; font-weight: 600; }
.brb-hv1-signature-list small { color: var(--hv1-muted); font-size: 0.8438rem; line-height: 1.6; }

/* --- 06 doctors ---------------------------------------------------------- */

/* Doctors follows Signature on the same paper ground (owner decision
 * 2026-09-19 removed the cream medical band between them), so it takes no top
 * padding of its own — the same join Event uses after the space rail. */
.brb-hv1-doctors { padding-block-start: 0; }

.brb-hv1-doctor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1rem; margin-block-start: 2rem; }
.brb-hv1-doctor-grid a { display: grid; gap: 0.15rem; }
.brb-hv1-doctor-grid li { text-align: center; }

/* Equal head size with the head centred is the approval: every card uses the
 * same ratio and the same object-position, so no doctor can drift larger. */
.brb-hv1-doctor-photo {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: 50% 50%;
	background: var(--hv1-cream);
}

.brb-hv1-doctor-grid strong { margin-block-start: 0.85rem; font-family: var(--hv1-serif); font-size: 1.0625rem; font-weight: 600; }
.brb-hv1-doctor-grid span { color: var(--hv1-muted); font-size: 0.8125rem; }
.brb-hv1-doctor-grid em { margin-block-start: 0.35rem; color: var(--hv1-gold-text); font-size: 0.75rem; font-style: normal; letter-spacing: 0.06em; }
.brb-hv1-doctors .brb-hv1-more { display: flex; justify-content: center; margin-block-start: 2.75rem; }

/* --- 07 journal ---------------------------------------------------------- */

.brb-hv1-journal { background: var(--hv1-cream); }
.brb-hv1-journal-feed { margin-block-start: 2rem; }
.brb-hv1-journal-feed .brb-hv1-more { order: 2; margin-block-start: 1.75rem; }

.brb-hv1-story-list { border-block-start: 1px solid var(--hv1-ink); }
.brb-hv1-story-list li { border-block-end: 1px solid var(--hv1-line); }
.brb-hv1-story-list a { display: grid; gap: 0.45rem; padding-block: 1.5rem; }
.brb-hv1-story-list time { color: var(--hv1-gold-text); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; }
.brb-hv1-story-list strong { font-family: var(--hv1-serif); font-size: 1.1875rem; font-weight: 600; line-height: 1.55; }
.brb-hv1-story-list span { color: var(--hv1-muted); font-size: 0.9063rem; line-height: 1.75; }
.brb-hv1-story-list em { color: var(--hv1-green); font-size: 0.8438rem; font-style: normal; font-weight: 600; }

.brb-hv1-journal-channel {
	display: grid;
	gap: 0.3rem;
	margin-block-start: 2rem;
	padding: 1.25rem;
	border: 1px solid var(--hv1-line);
}
.brb-hv1-journal-channel > span:nth-child(2) { color: var(--hv1-muted); font-size: 0.9063rem; }
.brb-hv1-journal-channel a { margin-block-start: 0.35rem; font-size: 0.9375rem; font-weight: 600; }

/* --- 08 clinic space ----------------------------------------------------- */

/* The rail deliberately bleeds off the right edge to show there is more to
 * scroll, but its first frame has to start on the same line as every other
 * section, so the leading pad tracks the wrap edge rather than the viewport. */
.brb-hv1-space-rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 74vw;
	gap: 0.75rem;
	margin-block-start: 2rem;
	padding-inline: max(var(--hv1-gutter), calc((100% - 75rem) / 2));
	/* Without a matching scroll padding the first frame snaps to the scrollport
	 * edge and cancels the inline padding that aligns it with the wrap. */
	scroll-padding-inline-start: max(var(--hv1-gutter), calc((100% - 75rem) / 2));
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.brb-hv1-space-rail::-webkit-scrollbar { display: none; }
.brb-hv1-space-rail li { scroll-snap-align: start; }
.brb-hv1-space-rail img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.brb-hv1-space-rail figcaption { margin-block-start: 0.55rem; color: var(--hv1-muted); font-size: 0.8125rem; }
.brb-hv1-space .brb-hv1-more { margin-block-start: 1.5rem; }

/* --- 09 event ------------------------------------------------------------ */

.brb-hv1-event { padding-block: 0 clamp(3.25rem, 8vw, 6rem); }
.brb-hv1-event-band { position: relative; isolation: isolate; overflow: clip; }

/* Event still life (owner-supplied, 2026-09-15): the gift box and flowers sit in
 * the upper part of a 5:4 frame and the lower part is calm stone, so at 390 the
 * copy lands on the stone and nothing is cropped. */
.brb-hv1-event-band img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 50%; }
.brb-hv1-event-band::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(7, 36, 28, 0.08) 30%, rgba(7, 36, 28, 0.62) 66%, rgba(7, 36, 28, 0.9) 100%);
}
.brb-hv1-event-copy { position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 1; padding: 1.5rem 1.25rem; color: #fff; }
.brb-hv1-event-copy h2 { color: #fff; }
.brb-hv1-event-copy p:last-child { margin-block-start: 1.1rem; }

/* --- 10 visit ------------------------------------------------------------ */

.brb-hv1-clinic { background: var(--hv1-cream); }
.brb-hv1-clinic-profile { margin-block-start: 1.5rem; }
.brb-hv1-clinic-grid { display: grid; gap: 2rem; margin-block-start: 2rem; }
.brb-hv1-clinic-grid > div { display: grid; gap: 0.65rem; align-content: start; padding-block-start: 1.25rem; border-block-start: 1px solid var(--hv1-ink); }
.brb-hv1-clinic-grid dl { display: grid; gap: 0.4rem; }
.brb-hv1-clinic-grid dl > div { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.35rem; border-block-end: 1px solid var(--hv1-line-soft); }
.brb-hv1-clinic-grid dt { color: var(--hv1-muted); font-size: 0.9063rem; }
.brb-hv1-clinic-grid dd { margin: 0; font-size: 0.9375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.brb-hv1-clinic-grid p { color: var(--hv1-muted); font-size: 0.875rem; line-height: 1.75; }
.brb-hv1-clinic-grid a[href^="tel:"] { color: var(--hv1-ink); font-size: 1.0625rem; font-weight: 600; }

/* --- 11 final CTA -------------------------------------------------------- */

.brb-hv1-finale { background: var(--hv1-green); color: var(--hv1-cream); text-align: center; }
.brb-hv1-finale h2 { color: #fff; }
.brb-hv1-finale .brb-hv1-section-lead { margin-inline: auto; color: rgba(245, 241, 234, 0.78); }
.brb-hv1-finale .brb-hv1-actions { justify-content: center; }
.brb-hv1-finale-note { margin-block-start: 1.5rem; color: rgba(245, 241, 234, 0.7); font-size: 0.875rem; }
.brb-hv1-finale-note a { color: var(--hv1-cream); font-weight: 600; }
.brb-hv1-finale a:focus-visible { outline-color: var(--hv1-cream); }

/* --- 834 ----------------------------------------------------------------- */

@media (min-width: 52.125rem) {
	.brb-hv1 { --hv1-gutter: 2rem; }

	.brb-hv1-actions > .brb-hv1-button { flex: 0 0 auto; }

	.brb-hv1-concern-editorial a { grid-template-columns: 4rem minmax(0, 1fr) 2rem; min-height: 5.75rem; }
	.brb-hv1-concern-copy { grid-template-columns: 13rem minmax(0, 1fr); align-items: baseline; gap: 1.5rem; }
	.brb-hv1-quicklinks { grid-template-columns: repeat(4, minmax(0, 1fr)); }

	.brb-hv1-philosophy-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
	.brb-hv1-philosophy-media img { aspect-ratio: 3 / 4; }

	.brb-hv1-newdevice-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 3rem; }

	.brb-hv1-signature-banner img { aspect-ratio: 21 / 9; }
	.brb-hv1-signature-banner-copy { padding: 2rem; }
	.brb-hv1-signature-banner-pair { font-size: 1.5rem; }
	.brb-hv1-signature-list a { grid-template-columns: 4rem 20rem minmax(0, 1fr) 2rem; }
	.brb-hv1-signature-list a > span:nth-child(2) { display: contents; }
	.brb-hv1-signature-list small { align-self: center; }


	.brb-hv1-doctor-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem 1.25rem; }

	.brb-hv1-story-list a { grid-template-columns: 9rem minmax(0, 1fr); column-gap: 2rem; padding-block: 1.75rem; }
	.brb-hv1-story-list time { grid-row: 1 / 4; padding-block-start: 0.4rem; }
	.brb-hv1-journal-channel { grid-template-columns: 10rem minmax(0, 1fr) auto; align-items: center; column-gap: 1.5rem; padding: 1.5rem 2rem; }
	.brb-hv1-journal-channel a { margin-block-start: 0; }

	.brb-hv1-space-rail { grid-auto-columns: 34vw; gap: 1rem; }

	/* the 24:9 band keeps the upper part of the still life: bow, box and tulips stay whole */
	.brb-hv1-event-band img { aspect-ratio: 24 / 9; object-position: 50% 20%; }
	.brb-hv1-event-copy { padding: 2.5rem 2rem; }

	.brb-hv1-clinic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; }
}

/* --- 834: hero framing ------------------------------------------------------ */

@media (min-width: 52.125rem) {
	.brb-hv1-hero { min-height: min(44rem, 78svh); }
	/* Wide viewports crop the portrait vertically; hold it near the top so the
	 * standing doctors' heads are never cut. */
	.brb-hv1-hero-image { object-position: 50% 10%; }
}

/* --- 1440 ---------------------------------------------------------------- */

@media (min-width: 90rem) {
	.brb-hv1-hero { min-height: min(48rem, 84svh); }
	.brb-hv1-hero-copy h1 { max-width: 14em; }

	.brb-hv1-concern-copy { grid-template-columns: 16rem minmax(0, 1fr); }
	.brb-hv1-philosophy-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: 4.5rem; }
	.brb-hv1-newdevice-grid { gap: 4.5rem; }
	.brb-hv1-signature-list a { grid-template-columns: 4.5rem 24rem minmax(0, 1fr) 2rem; }
	.brb-hv1-space-rail { grid-auto-columns: 23.5vw; }

	/* Hours and Location stay side by side and the actions become the third
	 * column. The actions are a sibling of the two-cell grid, not a third
	 * cell of it, so the three-column frame is declared on their shared
	 * parent instead. */
	.brb-hv1-clinic-profile {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 20rem;
		column-gap: 3rem;
		align-items: start;
	}

	.brb-hv1-clinic-profile > .brb-hv1-section-lead { grid-column: 1 / -1; }
	.brb-hv1-clinic-profile > .brb-hv1-clinic-grid { grid-column: 1; }

	.brb-hv1-clinic-profile > .brb-hv1-actions {
		grid-column: 2;
		display: grid;
		gap: 0.5rem;
		margin-block-start: 2rem;
		padding-block-start: 1.25rem;
		border-block-start: 1px solid var(--hv1-ink);
	}
}

/* --- reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.brb-hv1-hero-image { animation: none; transform: none; }
	.brb-hv1-space-rail { scroll-snap-type: none; }
	.brb-hv1 * { transition: none !important; }
}