/**
 * Homepage 2 — Dr. Dani B. Cosmetic Dentistry
 * 2026 monotone brand system.
 *
 * SPECIFICITY NOTE
 * This page runs inside Hello Elementor + an Elementor global kit that styles
 * bare elements with selectors like `.elementor-kit-6 h1` and
 * `.elementor-kit-6 a` (specificity 0,1,1). A plain `.hp2-heading` (0,1,0)
 * loses to those, which is why headings rendered in Wix/Barlow at 20px and
 * every link came out underlined with dark text on dark buttons.
 *
 * So the convention here is:
 *   element resets   -> .hp2.hp2 h1        (0,2,1)  beats the kit
 *   component styles -> .hp2.hp2 .hp2-foo  (0,3,0)  beats the resets
 *
 * Keep the `.hp2.hp2` prefix on every rule you add.
 *
 * TYPE SYSTEM
 *   Anton              -> H1 + H2 (.hp2-display, .hp2-heading), uppercase
 *   Cormorant Garamond -> sub-headings, quotes, numerals (--hp2-serif)
 *   Jost               -> body, eyebrows, buttons, UI (--hp2-sans)
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

.hp2.hp2 {
	/* Palette */
	--hp2-ink: #0D0D0D;
	--hp2-graphite: #2B2B2B;
	--hp2-slate: #6B6B6B;
	--hp2-ash: #A3A3A0;
	--hp2-silver: #D6D4CF;
	--hp2-mist: #E7E5E1;
	--hp2-bone: #F4F3F1;
	--hp2-paper: #FFFFFF;

	/* Working tones from the comp */
	--hp2-text: #1A1A1A;
	--hp2-text-muted: #45443F;
	--hp2-hairline: #E2E0DB;
	--hp2-hairline-strong: #DAD8D3;
	--hp2-ink-border: #2A2A2A;          /* dividers — decorative, exempt */
	/* Borders on interactive controls over #0D0D0D. #2A2A2A was 1.35:1, below
	   the 3:1 non-text minimum (WCAG 1.4.11); #6B6B6B is 3.65:1. */
	--hp2-ink-border-strong: #6B6B6B;

	/* Sampled from the hero photograph's own studio backdrop (median of its
	   edges, which is what meets the flat fill) so the picture's rectangle is
	   invisible against the section. Cooler than the warm page greys by design. */
	--hp2-hero-bg: #E0E2E5;

	/* Eyebrows */
	--hp2-eyebrow: #5F5F5F;             /* light sections */
	--hp2-eyebrow-hero: #4F4F4F;        /* over the hero photo */
	--hp2-eyebrow-on-ink: #D6D4D0;      /* on the #0D0D0D sections */

	/* On #0D0D0D. Raised from the old #C6C6C6/#9A9A9A/#A3A3A0 set: Jost 300 at
	   small sizes read too thin against pure black. All pass WCAG AA. */
	--hp2-on-ink: #D8D6D2;              /* body copy, card descriptions */
	--hp2-on-ink-label: #E4E2DE;        /* small-caps labels */
	--hp2-on-ink-label-strong: #EAE8E4; /* marquee */
	--hp2-on-ink-link: #DEDCD8;         /* quick links, social, map link */
	--hp2-on-ink-legal: #C4C2BE;        /* legal line */
	--hp2-on-ink-fine: #B8B6B2;         /* Open Payments disclosure */
	--hp2-on-ink-muted: #9A9A9A;        /* decorative only — dots, icon rests */

	/* Type */
	--hp2-condensed: 'Anton', 'Arial Narrow', Impact, sans-serif;
	--hp2-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--hp2-sans: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* Spacing scale — 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 120 */
	--hp2-4: 4px;
	--hp2-8: 8px;
	--hp2-12: 12px;
	--hp2-16: 16px;
	--hp2-24: 24px;
	--hp2-32: 32px;
	--hp2-48: 48px;
	--hp2-64: 64px;

	/* Layout */
	--hp2-content: 1280px;
	--hp2-gutter: clamp(24px, 5vw, 80px);
	--hp2-section-y: clamp(72px, 9vw, 130px);

	--hp2-ease: cubic-bezier(0.22, 1, 0.36, 1);

	background: var(--hp2-bone);
	color: var(--hp2-text);
	font-family: var(--hp2-sans);
	font-weight: 300;
	font-size: 17px;
	line-height: 1.75;
	letter-spacing: normal;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* ==========================================================================
   2. Element resets — these undo Hello Elementor + the Elementor kit
   ========================================================================== */

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

.hp2.hp2 h1,
.hp2.hp2 h2,
.hp2.hp2 h3,
.hp2.hp2 h4,
.hp2.hp2 h5,
.hp2.hp2 h6,
.hp2.hp2 p,
.hp2.hp2 figure,
.hp2.hp2 blockquote,
.hp2.hp2 ul,
.hp2.hp2 ol,
.hp2.hp2 li,
.hp2.hp2 address,
.hp2.hp2 figcaption {
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	font-style: normal;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: none;
}

.hp2.hp2 ul,
.hp2.hp2 ol {
	list-style: none;
}

.hp2.hp2 address {
	font-style: normal;
}

.hp2.hp2 a,
.hp2.hp2 a:link,
.hp2.hp2 a:visited,
.hp2.hp2 a:hover,
.hp2.hp2 a:focus,
.hp2.hp2 a:active {
	color: inherit;
	text-decoration: none;
	box-shadow: none;
}

.hp2.hp2 a {
	transition: color 240ms ease;
}

.hp2.hp2 a:hover {
	color: var(--hp2-slate);
}

.hp2.hp2 [data-hp2-ink] a:hover {
	color: var(--hp2-paper);
}

.hp2.hp2 button {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	background: none;
	border: 0;
	border-radius: 0;
	text-transform: none;
	letter-spacing: inherit;
	-webkit-appearance: none;
	appearance: none;
}

.hp2.hp2 img,
.hp2.hp2 picture,
.hp2.hp2 svg,
.hp2.hp2 iframe {
	max-width: 100%;
}

.hp2.hp2 img {
	display: block;
	height: auto;
	border-radius: 0;
}

.hp2.hp2 strong,
.hp2.hp2 b {
	font-weight: 500;
}

.hp2.hp2 :focus-visible {
	outline: 2px solid var(--hp2-ink);
	outline-offset: 3px;
}

.hp2.hp2 [data-hp2-ink] :focus-visible {
	outline-color: var(--hp2-paper);
}

.hp2.hp2 .hp2-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.hp2.hp2 .hp2-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--hp2-paper);
	color: var(--hp2-ink);
	padding: 14px 22px;
	font-size: 13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.hp2.hp2 .hp2-skip:focus {
	left: 12px;
	top: 12px;
}

body.hp2-locked {
	overflow: hidden;
}

/*
 * The site's header and footer are Elementor Theme Builder templates printed
 * around the page content. This template supplies its own, so the builder ones
 * are hidden here. functions.php also suppresses them server-side via the
 * `hello_elementor_header_footer` filter; this is the visual fallback for
 * theme versions that do not expose it.
 */
body.hp2-standalone > header.elementor-location-header,
body.hp2-standalone > footer.elementor-location-footer {
	display: none;
}

/*
 * Native scrollbar is hidden in favour of the header progress bar. Scrolling
 * itself is untouched — wheel, touch, keyboard and the scroll APIs all still
 * work; only the painted scrollbar is suppressed. The class is added from
 * homepage-2.js so it only ever applies to this template.
 */
html.hp2-no-scrollbar {
	scrollbar-width: none;      /* Firefox */
	-ms-overflow-style: none;   /* legacy Edge */
}

html.hp2-no-scrollbar::-webkit-scrollbar {
	width: 0;
	height: 0;
}

/* ==========================================================================
   3. Layout primitives
   ========================================================================== */

/* The comp caps content at 1280px with the gutter OUTSIDE that box (padding on
   the section, max-width on an inner div). We carry both on one element, so the
   gutter has to be added back into max-width — otherwise the content measures
   1280 minus two gutters and every section runs ~154px narrow at desktop. */
.hp2.hp2 .hp2-container {
	width: 100%;
	max-width: calc(var(--hp2-content) + var(--hp2-gutter) * 2);
	margin: 0 auto;
	padding-left: var(--hp2-gutter);
	padding-right: var(--hp2-gutter);
}

.hp2.hp2 .hp2-container--narrow {
	max-width: calc(900px + var(--hp2-gutter) * 2);
}

.hp2.hp2 .hp2-section {
	padding-top: var(--hp2-section-y);
	padding-bottom: var(--hp2-section-y);
}

.hp2.hp2 .hp2-section--tight {
	padding-top: clamp(48px, 5vw, 76px);
	padding-bottom: clamp(48px, 5vw, 76px);
}

.hp2.hp2 .hp2-section--paper { background: var(--hp2-paper); }
.hp2.hp2 .hp2-section--bone  { background: var(--hp2-bone); }

.hp2.hp2 .hp2-section--ink {
	background: var(--hp2-ink);
	color: var(--hp2-paper);
}

.hp2.hp2 .hp2-section--hairline {
	border-top: 1px solid var(--hp2-hairline);
}

.hp2.hp2 .hp2-head {
	display: flex;
	flex-direction: column;
	gap: var(--hp2-24);
	margin-bottom: var(--hp2-64);
}

.hp2.hp2 .hp2-head--split {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--hp2-64);
	align-items: start;
}

@media (min-width: 920px) {
	/* Even columns, as in the comp. The min-content floor lets a column claim
	   the extra it needs instead of clipping: Anton is condensed but a word
	   like "COMPREHENSIVE" is still wider than half the row at 78px. Only the
	   column that needs it grows, so every other header stays a true 50/50. */
	.hp2.hp2 .hp2-head--split {
		grid-template-columns: repeat(2, minmax(min-content, 1fr));
	}
}

.hp2.hp2 .hp2-head--baseline { align-items: end; }

.hp2.hp2 .hp2-head--center {
	align-items: center;
	text-align: center;
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
}

/* Eyebrow + heading pair inside a split header. These wrappers had no display
   of their own, and the element reset zeroes margins, so the eyebrow sat flush
   against the heading. Gaps below are the comp's, per section. */
.hp2.hp2 .hp2-head__group {
	display: flex;
	flex-direction: column;
	gap: var(--hp2-24);
}

.hp2.hp2 .hp2-veneers .hp2-head__group,
.hp2.hp2 .hp2-office .hp2-head__group { gap: 26px; }
.hp2.hp2 .hp2-journal .hp2-head__group { gap: 22px; }

.hp2.hp2 .hp2-head__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--hp2-24);
}

/* ==========================================================================
   4. Typography
   ========================================================================== */

/* Hero / banner headline (H1). Anton ships a single weight (400), so the
   `font-weight` here is the only one available — never set 700 on it or the
   browser will synthesise a fake bold. */
.hp2.hp2 .hp2-display {
	font-family: var(--hp2-condensed);
	font-weight: 400;
	font-size: clamp(50px, 6.8vw, 98px);
	line-height: 0.92;
	letter-spacing: 0.005em;
	color: var(--hp2-text);
	text-transform: uppercase;
	margin: 0;
	text-wrap: balance;
}

/* Primary section headings (H2). */
.hp2.hp2 .hp2-heading {
	font-family: var(--hp2-condensed);
	font-weight: 400;
	font-size: clamp(42px, 5.2vw, 78px);
	line-height: 0.94;
	letter-spacing: 0.005em;
	color: inherit;
	text-transform: uppercase;
	margin: 0;
	text-wrap: balance;
}

/* Secondary section headings — the smaller H2s on testimonials, press and
   articles. Inherits family, weight, case and tracking from .hp2-heading. */
.hp2.hp2 .hp2-heading--small {
	font-size: clamp(34px, 3.6vw, 54px);
	line-height: 0.96;
}

.hp2.hp2 .hp2-serif-lead {
	font-family: var(--hp2-serif);
	font-weight: 400;
	font-size: clamp(24px, 2.4vw, 30px);
	line-height: 1.25;
	color: var(--hp2-text);
	text-wrap: balance;
}

.hp2.hp2 .hp2-eyebrow {
	font-family: var(--hp2-sans);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--hp2-eyebrow);
	line-height: 1.5;
}

/* On the #0D0D0D sections. */
.hp2.hp2 .hp2-eyebrow--muted,
.hp2.hp2 [data-hp2-ink] .hp2-eyebrow,
.hp2.hp2 .hp2-section--ink .hp2-eyebrow {
	color: var(--hp2-eyebrow-on-ink);
}

.hp2.hp2 .hp2-meta {
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--hp2-slate);
}

.hp2.hp2 .hp2-meta--muted {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.18em;
	color: var(--hp2-on-ink-label);
}

.hp2.hp2 .hp2-lede {
	font-size: 21px;
	line-height: 1.6;
	font-weight: 300;
	color: var(--hp2-graphite);
	max-width: 54ch;
	text-wrap: pretty;
}

.hp2.hp2 .hp2-body {
	font-size: 17px;
	line-height: 1.8;
	font-weight: 300;
	color: var(--hp2-text-muted);
	max-width: 58ch;
	text-wrap: pretty;
}

.hp2.hp2 .hp2-body strong {
	font-weight: 500;
	color: var(--hp2-text);
}

.hp2.hp2 [data-hp2-ink] .hp2-lede,
.hp2.hp2 .hp2-section--ink .hp2-lede {
	color: var(--hp2-paper);
}

.hp2.hp2 [data-hp2-ink] .hp2-body,
.hp2.hp2 .hp2-section--ink .hp2-body {
	font-weight: 400;
	color: var(--hp2-on-ink);
}

.hp2.hp2 [data-hp2-ink] .hp2-body strong,
.hp2.hp2 .hp2-section--ink .hp2-body strong {
	color: var(--hp2-paper);
}

.hp2.hp2 .hp2-body--dim {
	color: var(--hp2-ash);
}

.hp2.hp2 .hp2-section--ink .hp2-body--dim,
.hp2.hp2 [data-hp2-ink] .hp2-body--dim {
	font-weight: 400;
	color: var(--hp2-on-ink);
}

.hp2.hp2 .hp2-pull-quote {
	border-left: 1px solid var(--hp2-ink);
	padding-left: 28px;
	margin: var(--hp2-8) 0;
	font-family: var(--hp2-serif);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(26px, 2.4vw, 34px);
	line-height: 1.4;
	color: var(--hp2-text);
	max-width: 26ch;
}

.hp2.hp2 .hp2-rule {
	display: block;
	width: 96px;
	height: 1px;
	background: var(--hp2-ink);
}

.hp2.hp2 .hp2-rule--light {
	background: var(--hp2-paper);
	transform-origin: left center;
	transform: scaleX(0);
	transition: transform 900ms var(--hp2-ease) 180ms;
}

.hp2.hp2 [data-hp2-revealed] .hp2-rule--light {
	transform: scaleX(1);
}

/* ==========================================================================
   5. Buttons and links
   ========================================================================== */

.hp2.hp2 .hp2-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 19px 38px;
	border: 1px solid transparent;
	border-radius: 0;
	font-family: var(--hp2-sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	cursor: pointer;
	transition: background 300ms ease, color 300ms ease, border-color 300ms ease,
		transform 300ms ease, box-shadow 300ms ease, gap 320ms ease;
}

.hp2.hp2 .hp2-btn--dark,
.hp2.hp2 a.hp2-btn--dark {
	background: var(--hp2-ink);
	color: var(--hp2-paper);
}

.hp2.hp2 .hp2-btn--dark:hover,
.hp2.hp2 a.hp2-btn--dark:hover {
	background: var(--hp2-graphite);
	color: var(--hp2-paper);
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(13, 13, 13, 0.22);
}

.hp2.hp2 .hp2-btn--outline,
.hp2.hp2 a.hp2-btn--outline {
	border-color: var(--hp2-ink);
	color: var(--hp2-ink);
	background: transparent;
	padding: 18px 37px;
}

.hp2.hp2 .hp2-btn--outline:hover,
.hp2.hp2 a.hp2-btn--outline:hover {
	background: var(--hp2-ink);
	color: var(--hp2-paper);
	transform: translateY(-2px);
}

.hp2.hp2 .hp2-btn--light,
.hp2.hp2 a.hp2-btn--light {
	background: var(--hp2-paper);
	color: var(--hp2-ink);
}

.hp2.hp2 .hp2-btn--light:hover,
.hp2.hp2 a.hp2-btn--light:hover {
	background: var(--hp2-mist);
	color: var(--hp2-ink);
	transform: translateY(-3px);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.hp2.hp2 .hp2-btn--arrow:hover { gap: 26px; }

.hp2.hp2 .hp2-btn--outline-light,
.hp2.hp2 a.hp2-btn--outline-light {
	border-color: var(--hp2-paper);
	color: var(--hp2-paper);
	background: transparent;
	padding: 18px 37px;
	align-self: flex-start;
}

.hp2.hp2 .hp2-btn--outline-light:hover,
.hp2.hp2 a.hp2-btn--outline-light:hover {
	background: var(--hp2-paper);
	color: var(--hp2-ink);
}

.hp2.hp2 .hp2-btn--ghost,
.hp2.hp2 a.hp2-btn--ghost {
	border-color: var(--hp2-slate);
	color: var(--hp2-paper);
	background: transparent;
}

.hp2.hp2 .hp2-btn--ghost:hover,
.hp2.hp2 a.hp2-btn--ghost:hover {
	background: var(--hp2-paper);
	color: var(--hp2-ink);
	border-color: var(--hp2-paper);
}

.hp2.hp2 .hp2-btn--small {
	padding: 11px 22px;
	font-size: 11px;
}

.hp2.hp2 .hp2-btn--block {
	display: flex;
	width: 100%;
}

.hp2.hp2 .hp2-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hp2-16);
	padding-top: var(--hp2-8);
}

.hp2.hp2 .hp2-link,
.hp2.hp2 a.hp2-link {
	display: inline-block;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--hp2-ink);
	/* Tight, so the rule sits just under the text as in the comp rather than
	   floating below it on the inherited 1.75 body leading. */
	line-height: 1.1;
	border-bottom: 1px solid var(--hp2-ink);
	padding-bottom: 4px;
	transition: color 240ms ease, border-color 240ms ease;
}

.hp2.hp2 .hp2-link:hover,
.hp2.hp2 a.hp2-link:hover {
	color: var(--hp2-slate);
	border-color: var(--hp2-slate);
}

.hp2.hp2 .hp2-link--muted,
.hp2.hp2 a.hp2-link--muted {
	color: var(--hp2-on-ink-link);
	border-color: var(--hp2-ink-border-strong);
	align-self: flex-start;
}

.hp2.hp2 .hp2-link--muted:hover,
.hp2.hp2 a.hp2-link--muted:hover {
	color: var(--hp2-paper);
	border-color: var(--hp2-paper);
}

/* ==========================================================================
   6. Header
   ========================================================================== */

/* Solid black at every scroll position — no frosted glass. Only the shadow
   changes on scroll. */
.hp2.hp2 .hp2-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 60;
	background: var(--hp2-ink);
	color: var(--hp2-paper);
	transition: box-shadow 520ms ease;
}

.hp2.hp2 .hp2-header.is-condensed {
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.hp2.hp2 .hp2-header__utility {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 32px;
	padding: 10px var(--hp2-gutter);
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
	overflow: hidden;
	max-height: 60px;
	transition: max-height 420ms var(--hp2-ease), opacity 320ms ease,
		padding 420ms ease, border-color 520ms ease;
}

.hp2.hp2 .hp2-header.is-condensed .hp2-header__utility {
	max-height: 0;
	opacity: 0;
	padding-top: 0;
	padding-bottom: 0;
	border-bottom-color: rgba(255, 255, 255, 0.09);
}

.hp2.hp2 .hp2-header__utility-tag,
.hp2.hp2 .hp2-header__utility-link {
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--hp2-paper);
}

.hp2.hp2 .hp2-header__utility-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 22px;
}

.hp2.hp2 .hp2-header__utility-link {
	border-bottom: 1px solid var(--hp2-slate);
	padding: 0 0 3px;
	cursor: pointer;
	transition: border-color 280ms ease, color 280ms ease;
}

.hp2.hp2 .hp2-header__utility-link:hover {
	border-color: var(--hp2-paper);
	color: var(--hp2-paper);
}

.hp2.hp2 .hp2-header__utility-btn {
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--hp2-paper);
	border: 1px solid var(--hp2-slate);
	padding: 7px 16px;
	transition: background 260ms ease, color 260ms ease, border-color 260ms ease;
}

.hp2.hp2 .hp2-header__utility-btn:hover {
	background: var(--hp2-paper);
	color: var(--hp2-ink);
	border-color: var(--hp2-paper);
}

.hp2.hp2 .hp2-header__progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 3px;
	background: var(--hp2-paper);
	z-index: 2;
}

.hp2.hp2 .hp2-header__progress-bar {
	display: block;
	width: 0;
	height: 100%;
	background: var(--hp2-ink);
}

.hp2.hp2 .hp2-header__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px 32px;
	padding: 16px var(--hp2-gutter);
	transition: padding 420ms var(--hp2-ease);
}

.hp2.hp2 .hp2-header.is-condensed .hp2-header__nav {
	padding-top: 11px;
	padding-bottom: 11px;
}

.hp2.hp2 .hp2-header__logo img {
	height: 34px;
	width: auto;
	object-fit: contain;
	filter: invert(1);
	transition: opacity 280ms ease;
}

.hp2.hp2 .hp2-header__logo:hover img { opacity: 0.7; }

/* Top level only — the child selector matters now that this renders a real
   WordPress menu whose .sub-menu lists must not become flex rows. */
.hp2.hp2 .hp2-header__menu > ul {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0 clamp(16px, 1.7vw, 30px);
}

.hp2.hp2 .hp2-header__menu > ul > li {
	position: relative;
	display: flex;
	align-items: center;
}

/* The design's caret, drawn from the class WordPress adds rather than a span
   in the markup, since wp_nav_menu() emits the items. */
.hp2.hp2 .hp2-header__menu .menu-item-has-children > a::after {
	content: '\25BE';
	font-size: 9px;
	line-height: 1;
	opacity: 0.85;
	transition: transform 240ms var(--hp2-ease);
}

.hp2.hp2 .hp2-header__menu .menu-item-has-children:hover > a::after,
.hp2.hp2 .hp2-header__menu .menu-item-has-children:focus-within > a::after {
	transform: translateY(1px);
}

/* Dropdown panel */
.hp2.hp2 .hp2-header__menu .sub-menu {
	position: absolute;
	top: 100%;
	left: -18px;
	z-index: 5;
	min-width: 248px;
	margin-top: 14px;
	padding: 10px 0;
	display: flex;
	flex-direction: column;
	gap: 0;
	background: var(--hp2-ink);
	border: 1px solid var(--hp2-ink-border-strong);
	box-shadow: 0 24px 54px rgba(0, 0, 0, 0.5);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 220ms ease, transform 220ms var(--hp2-ease), visibility 220ms;
}

.hp2.hp2 .hp2-header__menu > ul > li:hover > .sub-menu,
.hp2.hp2 .hp2-header__menu > ul > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.hp2.hp2 .hp2-header__menu .sub-menu li { display: block; }

/* Sentence case here: the real menu has labels like "Benefits of Veneers",
   which are hard to scan in all-caps at this size. */
.hp2.hp2 .hp2-header__menu .sub-menu a {
	display: block;
	padding: 11px 22px;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0.03em;
	text-transform: none;
	white-space: normal;
	background-image: none;
	color: var(--hp2-on-ink);
}

.hp2.hp2 .hp2-header__menu .sub-menu a:hover {
	background: #1A1A1A;
	color: var(--hp2-paper);
}

/* Mobile drawer: children shown inline and indented, no hover needed. */
.hp2.hp2 .hp2-header__drawer .sub-menu {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	min-width: 0;
	margin: 0;
	padding: 0 0 var(--hp2-8) var(--hp2-16);
	background: none;
	border: 0;
	box-shadow: none;
}

.hp2.hp2 .hp2-header__drawer .sub-menu a {
	font-size: 12px;
	letter-spacing: 0.1em;
	color: var(--hp2-on-ink);
	text-transform: none;
}

.hp2.hp2 .hp2-header__menu a {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	color: var(--hp2-paper);
	padding-bottom: 4px;
	background-image: linear-gradient(var(--hp2-paper), var(--hp2-paper));
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 0 1px;
	transition: background-size 340ms var(--hp2-ease), color 260ms ease;
}

.hp2.hp2 .hp2-header__menu a:hover {
	color: #C6C6C6;
	background-size: 100% 1px;
}

.hp2.hp2 .hp2-header__caret {
	font-size: 8px;
	line-height: 1;
}

.hp2.hp2 .hp2-header__compact {
	display: none;
	align-items: center;
	gap: var(--hp2-12);
}

.hp2.hp2 .hp2-header__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--hp2-ink-border-strong);
	color: var(--hp2-paper);
}

.hp2.hp2 .hp2-header__toggle {
	display: flex;
	align-items: center;
	gap: var(--hp2-12);
	border: 1px solid var(--hp2-ink-border-strong);
	color: var(--hp2-paper);
	padding: 12px 20px;
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color 240ms ease;
}

.hp2.hp2 .hp2-header__toggle:hover { border-color: var(--hp2-paper); }

.hp2.hp2 .hp2-header__toggle-bars {
	display: flex;
	flex-direction: column;
	gap: var(--hp2-4);
}

.hp2.hp2 .hp2-header__toggle-bars span {
	display: block;
	width: 18px;
	height: 1px;
	background: var(--hp2-paper);
}

.hp2.hp2 .hp2-header__drawer {
	border-top: 1px solid var(--hp2-ink-border);
	padding: var(--hp2-16) var(--hp2-gutter) 26px;
	max-height: 66vh;
	overflow-y: auto;
}

.hp2.hp2 .hp2-header__drawer[hidden] { display: none; }

.hp2.hp2 .hp2-header__drawer a {
	display: block;
	padding: 13px 0;
	font-size: 13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--hp2-paper);
	border-bottom: 1px solid #1E1E1E;
}

.hp2.hp2 .hp2-header__drawer .hp2-btn { margin-top: var(--hp2-24); }

/* ==========================================================================
   7. Hero
   ========================================================================== */

/* The portrait is a cut-out again, so the grey gradient below IS the backdrop.
   Built on the sampled studio grey so it still reads as his photographic
   background rather than a separate brand colour. */
.hp2.hp2 .hp2-hero {
	position: relative;
	min-height: 92vh;
	/* Just clears the fixed header (123px at rest); the breathing room below it
	   comes from .hp2-hero__inner, so the two no longer stack up. */
	padding-top: 124px;
	/* Copy and portrait are the two ends of a space-between row inside the same
	   1280px content band the rest of the page uses, so the outer gutters match.
	   The portrait used to be absolutely positioned, which let it sit ~77px from
	   the right while the copy started ~400px from the left. */
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(24px, 3vw, 56px);
	/* Same content edge as .hp2-container, so the hero copy lines up with every
	   section below it. The old expression added a gutter on top of the half
	   difference and pushed the copy 80px further in at 1920. */
	padding-left: max(var(--hp2-gutter), calc((100% - var(--hp2-content)) / 2));
	padding-right: max(var(--hp2-gutter), calc((100% - var(--hp2-content)) / 2));
	overflow: hidden;
	background:
		/* Pool of deeper grey under the figure so he is not floating. */
		radial-gradient(118% 84% at 76% 104%,
			rgba(150, 154, 162, 0.55) 0%,
			rgba(150, 154, 162, 0.20) 40%,
			rgba(150, 154, 162, 0) 68%),
		linear-gradient(104deg,
			var(--hp2-paper) 0%,
			#F1F2F4 32%,
			var(--hp2-hero-bg) 62%,
			#D3D6DB 100%);
}

/* Width drives the size and the height follows the portrait's aspect ratio —
   no percentage height, which would need a definite height on the flex
   container, and no letterboxing since the box matches the image exactly. */
.hp2.hp2 .hp2-hero__media {
	position: relative;
	/* The <picture> precedes the copy in the markup (it did not matter while it
	   was absolutely positioned), so order puts it back on the right. */
	order: 2;
	flex: 0 0 auto;
	align-self: flex-end;
	width: min(44%, 580px);
	display: block;
}

.hp2.hp2 .hp2-hero__media img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	object-position: bottom center;
}

/* No scrim on desktop: the fill is flat and light, so the copy already clears
   AA against it (body 7.5:1), and any gradient here would break the flat
   colour. The mobile block gives this element its own dark scrim. */
.hp2.hp2 .hp2-hero__veil {
	position: absolute;
	inset: 0;
	background: none;
}

.hp2.hp2 .hp2-hero__inner {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	max-width: 660px;
	display: flex;
	flex-direction: column;
	gap: var(--hp2-32);
	margin: 0;
	padding: clamp(32px, 4vw, 60px) 0 clamp(48px, 6vw, 84px);
}

.hp2.hp2 .hp2-hero__intro,
.hp2.hp2 .hp2-hero__copy {
	display: flex;
	flex-direction: column;
	gap: var(--hp2-32);
}

.hp2.hp2 .hp2-hero .hp2-eyebrow { color: var(--hp2-eyebrow-hero); }

/* ==========================================================================
   8. Marquee
   ========================================================================== */

.hp2.hp2 .hp2-marquee {
	background: var(--hp2-ink);
	color: var(--hp2-paper);
	overflow: hidden;
	padding: 20px 0;
}

.hp2.hp2 .hp2-marquee__track {
	display: flex;
	width: max-content;
	animation: hp2-marquee 80s linear infinite;
}

/* Moving content can be paused (WCAG 2.2.2). Focus-within covers keyboard
   users, who cannot hover. */
.hp2.hp2 .hp2-marquee:hover .hp2-marquee__track,
.hp2.hp2 .hp2-marquee:focus-within .hp2-marquee__track,
.hp2.hp2 .hp2-filmstrip:hover .hp2-filmstrip__track,
.hp2.hp2 .hp2-filmstrip:focus-within .hp2-filmstrip__track {
	animation-play-state: paused;
}

.hp2.hp2 .hp2-marquee__group {
	display: flex;
	gap: 56px;
	padding-right: 56px;
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.20em;
	text-transform: uppercase;
	color: var(--hp2-on-ink-label-strong);
	white-space: nowrap;
}

.hp2.hp2 .hp2-marquee__dot { color: var(--hp2-on-ink-muted); }

@keyframes hp2-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ==========================================================================
   9. Credentials
   ========================================================================== */

.hp2.hp2 .hp2-credentials { border-bottom: 1px solid var(--hp2-hairline); }

.hp2.hp2 .hp2-credentials__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--hp2-32);
	margin-bottom: var(--hp2-48);
}

.hp2.hp2 .hp2-rating {
	display: flex;
	align-items: center;
	gap: var(--hp2-24);
	background: var(--hp2-ink);
	color: var(--hp2-paper);
	padding: 20px 28px;
	box-shadow: 0 18px 40px rgba(13, 13, 13, 0.18);
}

.hp2.hp2 .hp2-rating__score {
	font-family: var(--hp2-serif);
	font-size: 56px;
	line-height: 1;
}

.hp2.hp2 .hp2-rating__detail {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.hp2.hp2 .hp2-rating__stars {
	font-size: 14px;
	letter-spacing: 0.24em;
}

.hp2.hp2 .hp2-rating__count {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hp2-on-ink-label);
}

.hp2.hp2 .hp2-credentials__logos {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--hp2-48) var(--hp2-32);
	align-items: center;
}

.hp2.hp2 .hp2-credentials__logos li {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 60px;
}

.hp2.hp2 .hp2-credentials__logos img {
	max-height: 56px;
	max-width: 100%;
	width: auto;
	object-fit: contain;
	opacity: 0.85;
}

/* ==========================================================================
   10. Results / before-after
   ========================================================================== */

.hp2.hp2 .hp2-results__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(12px, 1.8vw, 32px);
}

.hp2.hp2 .hp2-case {
	display: flex;
	flex-direction: column;
	gap: var(--hp2-16);
}

.hp2.hp2 .hp2-compare {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 2;
	background: var(--hp2-mist);
	border: 1px solid var(--hp2-hairline);
	overflow: hidden;
	user-select: none;
	touch-action: pan-y;
	cursor: ew-resize;
	box-shadow: 0 24px 60px rgba(13, 13, 13, 0.12);
}

.hp2.hp2 .hp2-compare img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

.hp2.hp2 .hp2-compare__before {
	clip-path: inset(0 calc(100% - var(--hp2-split)) 0 0);
}

.hp2.hp2 .hp2-compare__tag {
	position: absolute;
	top: 12px;
	background: rgba(13, 13, 13, 0.82);
	color: var(--hp2-paper);
	padding: 6px 12px;
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	pointer-events: none;
}

.hp2.hp2 .hp2-compare__tag--l { left: 12px; }
.hp2.hp2 .hp2-compare__tag--r { right: 12px; }

.hp2.hp2 .hp2-compare__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--hp2-split);
	width: 1px;
	background: var(--hp2-paper);
	pointer-events: none;
}

.hp2.hp2 .hp2-compare__grip {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--hp2-paper);
	color: var(--hp2-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
}

.hp2.hp2 .hp2-case__caption {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--hp2-16);
	border-top: 1px solid var(--hp2-silver);
	padding-top: 14px;
}

.hp2.hp2 .hp2-case__label {
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--hp2-text);
}

.hp2.hp2 .hp2-case__note {
	font-size: 13px;
	font-weight: 300;
	color: #6B6A65;
}

.hp2.hp2 .hp2-results__foot {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--hp2-32);
	margin-top: var(--hp2-48);
}

/* ==========================================================================
   11. About
   ========================================================================== */

.hp2.hp2 .hp2-about__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
	gap: var(--hp2-64);
	align-items: center;
}

/* The portrait is a cut-out, so the panel carries the grey gradient behind it
   the way the hero does. */
.hp2.hp2 .hp2-about__media {
	position: relative;
	overflow: hidden;
	box-shadow: 0 34px 74px rgba(13, 13, 13, 0.22);
	background:
		radial-gradient(112% 74% at 50% 26%,
			rgba(255, 255, 255, 0.72) 0%,
			rgba(255, 255, 255, 0) 62%),
		linear-gradient(168deg,
			var(--hp2-mist) 0%,
			var(--hp2-silver) 58%,
			var(--hp2-ash) 100%);
}

/* contain, bottom-anchored — the whole figure stays in frame, uncropped. */
.hp2.hp2 .hp2-about__media img {
	display: block;
	width: 100%;
	height: clamp(560px, 46vw, 700px);
	object-fit: contain;
	object-position: bottom center;
}

.hp2.hp2 .hp2-about__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 30px;
}

/* ==========================================================================
   12. Cards and panels
   ========================================================================== */

.hp2.hp2 .hp2-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--hp2-24);
}

.hp2.hp2 .hp2-card {
	background: var(--hp2-ink);
	border: 1px solid var(--hp2-ink-border);
	padding: 40px 36px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition: transform 420ms ease-out, border-color 420ms ease-out,
		box-shadow 420ms ease-out, background 420ms ease-out;
}

.hp2.hp2 .hp2-card:hover {
	transform: translateY(-5px);
	border-color: var(--hp2-slate);
	background: #141414;
	box-shadow: 0 24px 54px rgba(0, 0, 0, 0.5);
}

.hp2.hp2 .hp2-card__title {
	font-family: var(--hp2-serif);
	font-weight: 400;
	font-size: 32px;
	line-height: 1.15;
	color: var(--hp2-paper);
	text-transform: none;
	text-wrap: balance;
}

.hp2.hp2 .hp2-card__text {
	font-size: 16px;
	line-height: 1.7;
	font-weight: 400;
	color: var(--hp2-on-ink);
	text-wrap: pretty;
}

.hp2.hp2 .hp2-panels {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background: var(--hp2-hairline-strong);
	border: 1px solid var(--hp2-hairline-strong);
}

.hp2.hp2 .hp2-panel {
	background: var(--hp2-paper);
	padding: 56px 54px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	transition: box-shadow 450ms ease-out, transform 450ms ease-out;
}

.hp2.hp2 .hp2-panel:hover {
	box-shadow: 0 18px 44px rgba(13, 13, 13, 0.1);
	transform: translateY(-3px);
}

.hp2.hp2 .hp2-panel__title {
	font-family: var(--hp2-serif);
	font-weight: 400;
	font-size: clamp(28px, 2.6vw, 38px);
	line-height: 1.2;
	color: var(--hp2-text);
	text-transform: none;
	text-wrap: balance;
}

/* ==========================================================================
   13. Process
   ========================================================================== */

.hp2.hp2 .hp2-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--hp2-48);
}

.hp2.hp2 .hp2-step {
	display: flex;
	flex-direction: column;
	gap: var(--hp2-24);
}

.hp2.hp2 .hp2-step__media {
	height: 230px;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(13, 13, 13, 0.12);
}

.hp2.hp2 .hp2-step__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 45%;
	transition: transform 500ms ease-out;
}

.hp2.hp2 .hp2-step__media img:hover { transform: scale(1.03); }

.hp2.hp2 .hp2-step__body {
	display: flex;
	flex-direction: column;
	gap: var(--hp2-12);
	border-top: 1px solid var(--hp2-ink);
	padding-top: 22px;
}

.hp2.hp2 .hp2-step__number {
	font-family: var(--hp2-serif);
	font-size: 48px;
	line-height: 1;
	color: var(--hp2-text);
}

.hp2.hp2 .hp2-step__title {
	font-family: var(--hp2-sans);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hp2-text);
}

/* ==========================================================================
   14. Services
   ========================================================================== */

.hp2.hp2 .hp2-service-list {
	border-top: 1px solid var(--hp2-silver);
	margin-bottom: var(--hp2-48);
}

.hp2.hp2 .hp2-service {
	display: grid;
	grid-template-columns: 44px minmax(180px, 1.1fr) minmax(240px, 1.4fr) 32px;
	gap: 28px;
	align-items: center;
	padding: 40px 8px;
	border-bottom: 1px solid var(--hp2-silver);
	color: var(--hp2-text);
	text-decoration: none;
	transition: background 320ms ease, box-shadow 320ms ease;
}

.hp2.hp2 .hp2-service:hover {
	background: var(--hp2-paper);
	color: var(--hp2-text);
	box-shadow: 0 12px 32px rgba(13, 13, 13, 0.07);
}

.hp2.hp2 .hp2-service__index {
	font-size: 12px;
	letter-spacing: 0.2em;
	color: var(--hp2-slate);
}

.hp2.hp2 .hp2-service__title {
	font-family: var(--hp2-serif);
	font-size: clamp(30px, 2.9vw, 42px);
	line-height: 1.1;
}

.hp2.hp2 .hp2-service__text {
	font-size: 17px;
	line-height: 1.7;
	font-weight: 300;
	color: var(--hp2-text-muted);
	text-wrap: pretty;
}

.hp2.hp2 .hp2-service__arrow {
	font-size: 20px;
	text-align: right;
	color: var(--hp2-slate);
}

/* ==========================================================================
   15. Office
   ========================================================================== */

.hp2.hp2 .hp2-office__intro {
	padding-top: var(--hp2-section-y);
}

.hp2.hp2 .hp2-office__intro .hp2-head { margin-bottom: 0; }

.hp2.hp2 .hp2-office__strip-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--hp2-24);
	padding-top: clamp(56px, 6vw, 80px);
	padding-bottom: var(--hp2-24);
}

.hp2.hp2 .hp2-filmstrip {
	position: relative;
	overflow: hidden;
	border-top: 1px solid var(--hp2-ink-border);
	border-bottom: 1px solid var(--hp2-ink-border);
	padding: 20px 0;
}

.hp2.hp2 .hp2-filmstrip__track {
	display: flex;
	gap: var(--hp2-24);
	width: max-content;
	animation: hp2-marquee 120s linear infinite;
}

.hp2.hp2 .hp2-filmstrip__track img {
	width: 460px;
	height: 300px;
	object-fit: cover;
	flex: none;
	box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
	transition: transform 500ms ease-out, box-shadow 500ms ease-out;
}

.hp2.hp2 .hp2-filmstrip__track img:hover {
	transform: scale(1.03);
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
}

.hp2.hp2 .hp2-filmstrip.is-paused .hp2-filmstrip__track {
	animation-play-state: paused;
}

.hp2.hp2 .hp2-filmstrip__fade {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(90deg,
		var(--hp2-ink) 0%,
		rgba(13, 13, 13, 0) 12%,
		rgba(13, 13, 13, 0) 88%,
		var(--hp2-ink) 100%);
}

.hp2.hp2 .hp2-capabilities {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--hp2-32);
	padding-top: 30px;
	padding-bottom: 30px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hp2-on-ink-label);
}

/* ==========================================================================
   16. Reviews
   ========================================================================== */

.hp2.hp2 .hp2-carousel {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(20px, 3vw, 48px);
	border-top: 1px solid var(--hp2-silver);
	border-bottom: 1px solid var(--hp2-silver);
	padding: 44px 0;
}

.hp2.hp2 .hp2-carousel__viewport {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 22px;
}

.hp2.hp2 .hp2-carousel__nav {
	flex: none;
	width: 46px;
	height: 46px;
	border: 1px solid var(--hp2-ink);
	color: var(--hp2-ink);
	background: transparent;
	font-size: 16px;
	cursor: pointer;
	transition: background 260ms ease, color 260ms ease;
}

.hp2.hp2 .hp2-carousel__nav:hover {
	background: var(--hp2-ink);
	color: var(--hp2-paper);
}

.hp2.hp2 .hp2-review {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
}

.hp2.hp2 .hp2-review[hidden] { display: none; }

.hp2.hp2 .hp2-review__quote {
	font-family: var(--hp2-serif);
	font-weight: 300;
	font-style: italic;
	font-size: clamp(24px, 2.3vw, 34px);
	line-height: 1.4;
	color: var(--hp2-text);
	max-width: 42ch;
	text-wrap: balance;
}

.hp2.hp2 .hp2-review__byline {
	display: flex;
	align-items: baseline;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px 20px;
}

.hp2.hp2 .hp2-review__name {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.hp2.hp2 .hp2-review__meta {
	font-size: 13px;
	color: var(--hp2-slate);
}

/* ==========================================================================
   17. Travel, Instagram, Journal
   ========================================================================== */

.hp2.hp2 .hp2-travel__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
	gap: var(--hp2-64);
	align-items: center;
}

.hp2.hp2 .hp2-travel__media img {
	width: 100%;
	height: 420px;
	object-fit: cover;
	box-shadow: 0 34px 74px rgba(13, 13, 13, 0.22);
}

.hp2.hp2 .hp2-travel__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 28px;
}

.hp2.hp2 .hp2-instagram__intro {
	display: flex;
	flex-direction: column;
	gap: 22px;
	max-width: 780px;
}

.hp2.hp2 .hp2-instagram__collage { width: 100%; }

/* Wrapper for the third-party Instagram feed, which replaces the collage
   image. The widget sizes itself, so this only reserves the width and keeps
   its own overflow from pushing the page sideways. Elfsight injects its grid
   with its own styles — deliberately not restyled here, so a widget update
   cannot be broken by selectors of ours it never expected. */
.hp2.hp2 .hp2-instagram__feed {
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
}

.hp2.hp2 .hp2-journal__list { border-top: 1px solid var(--hp2-hairline); }

.hp2.hp2 .hp2-journal__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	gap: 28px;
	align-items: baseline;
	padding: 22px 4px;
	border-bottom: 1px solid var(--hp2-hairline);
	color: var(--hp2-text);
	text-decoration: none;
	transition: background 280ms ease;
}

.hp2.hp2 .hp2-journal__item:hover {
	background: var(--hp2-paper);
	color: var(--hp2-text);
}

.hp2.hp2 .hp2-journal__title {
	font-family: var(--hp2-serif);
	font-weight: 400;
	font-size: clamp(20px, 1.7vw, 25px);
	line-height: 1.3;
	text-wrap: balance;
}

.hp2.hp2 .hp2-journal__term {
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--hp2-slate);

	/* The design assumed a two-word category. Real ones run to "Cosmetic
	   Dental Office in Los Angeles", which at 0.2em tracking is wide enough
	   to crush the title column if it stays on one line.

	   15em (180px here) is measured, not guessed: the widest two-word category
	   in use, "Biomimetic Dentistry", renders at 171px, so every short label
	   stays on one line and only the genuinely long ones wrap to two. ch units
	   are no good for this — they ignore the 0.2em tracking and under-measure
	   by a third. em rather than px so the cap tracks the font size. */
	max-width: 15em;
	text-align: right;
	text-wrap: balance;
}

.hp2.hp2 .hp2-journal__arrow {
	font-size: 15px;
	color: var(--hp2-slate);
}

/* ==========================================================================
   18. Final CTA
   ========================================================================== */

.hp2.hp2 .hp2-cta__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 26px;
	max-width: 860px;
}

.hp2.hp2 .hp2-cta__inner .hp2-lede,
.hp2.hp2 .hp2-cta__inner .hp2-body { max-width: 52ch; }

.hp2.hp2 .hp2-cta__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 28px;
	padding-top: 14px;
}

.hp2.hp2 .hp2-cta__phone {
	font-size: 15px;
	font-weight: 300;
	color: var(--hp2-text-muted);
}

.hp2.hp2 .hp2-cta__phone a {
	color: var(--hp2-ink);
	border-bottom: 1px solid var(--hp2-slate);
	padding-bottom: 2px;
}

/* ==========================================================================
   19. Footer
   ========================================================================== */

.hp2.hp2 .hp2-footer {
	background: var(--hp2-ink);
	color: var(--hp2-paper);
	padding: clamp(40px, 4vw, 56px) var(--hp2-gutter) 0;
}

.hp2.hp2 .hp2-footer__inner {
	max-width: var(--hp2-content);
	margin: 0 auto;
}

.hp2.hp2 .hp2-footer__intro {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--hp2-32) 56px;
	padding-bottom: var(--hp2-32);
	border-bottom: 1px solid var(--hp2-ink-border);
}

.hp2.hp2 .hp2-footer__brand {
	display: flex;
	flex-direction: column;
	gap: var(--hp2-12);
}

.hp2.hp2 .hp2-footer__logo {
	width: 100%;
	max-width: 210px;
	height: auto;
	filter: invert(1);
}

.hp2.hp2 .hp2-footer__blurb {
	font-size: 17px;
	line-height: 1.8;
	font-weight: 400;
	color: var(--hp2-on-ink);
	max-width: 62ch;
	text-wrap: pretty;
}

/* Contact · office hours · map. auto-fit would drop the hours column to its
   own row at common widths, so the three tracks are explicit above 1100px. */
.hp2.hp2 .hp2-footer__columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: 56px;
	padding: clamp(44px, 4.5vw, 64px) 0;
}

@media (min-width: 760px) {
	.hp2.hp2 .hp2-footer__columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.hp2.hp2 .hp2-footer__columns {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1.1fr);
		gap: clamp(32px, 4vw, 64px);
	}
}

.hp2.hp2 .hp2-hours {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: var(--hp2-24);
}

.hp2.hp2 .hp2-hours__row {
	display: grid;
	grid-template-columns: minmax(96px, 0.8fr) minmax(0, 1.2fr);
	gap: var(--hp2-16);
	align-items: baseline;
}

.hp2.hp2 .hp2-hours dt {
	font-size: 15px;
	font-weight: 400;
	color: var(--hp2-on-ink);
}

.hp2.hp2 .hp2-hours dd {
	margin: 0;
	font-size: 15px;
	font-weight: 400;
	color: var(--hp2-on-ink);
	font-variant-numeric: tabular-nums;
}

.hp2.hp2 .hp2-footer__contact {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--hp2-24);
}

.hp2.hp2 .hp2-footer__address {
	font-size: 16px;
	line-height: 1.8;
	font-weight: 400;
	color: var(--hp2-on-ink);
}

.hp2.hp2 .hp2-footer__phone-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
}

.hp2.hp2 .hp2-footer__phone {
	font-size: 22px;
	color: var(--hp2-paper);
	border-bottom: 1px solid var(--hp2-ink-border-strong);
	padding-bottom: 6px;
	transition: border-color 240ms ease;
}

.hp2.hp2 .hp2-footer__phone:hover {
	color: var(--hp2-paper);
	border-color: var(--hp2-paper);
}

.hp2.hp2 .hp2-footer__social {
	display: flex;
	gap: var(--hp2-12);
	padding-top: var(--hp2-8);
}

.hp2.hp2 .hp2-footer__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--hp2-ink-border-strong);
	color: var(--hp2-on-ink);
	transition: border-color 240ms ease, color 240ms ease;
}

.hp2.hp2 .hp2-footer__social a:hover {
	border-color: var(--hp2-paper);
	color: var(--hp2-paper);
}

.hp2.hp2 .hp2-footer__map {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.hp2.hp2 .hp2-footer__map iframe {
	width: 100%;
	height: 100%;
	min-height: 300px;
	border: 1px solid var(--hp2-ink-border);
	filter: grayscale(1) invert(0.92) contrast(0.9);
}

.hp2.hp2 .hp2-footer__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px 40px;
	border-top: 1px solid var(--hp2-ink-border);
	padding: 26px 0 32px;
	font-size: 15px;
	font-weight: 400;
	color: var(--hp2-on-ink-link);
}

/* wp_nav_menu() wraps the links in ul/li, which stack as blocks. Carry the
   row onto the list so a WordPress-managed footer menu lays out the same as
   the hand-written links did. */
.hp2.hp2 .hp2-footer__links ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 14px 40px;
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
}

.hp2.hp2 .hp2-footer__links li { display: block; }

/* Legal links: same ul/li flattening, left in the row beside the copyright. */
.hp2.hp2 .hp2-footer__legal-links ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hp2.hp2 .hp2-footer__legal-links li { display: block; }

.hp2.hp2 .hp2-footer__credit {
	padding: 0 0 26px;
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--hp2-on-ink-fine);
}

.hp2.hp2 .hp2-footer__credit a {
	color: var(--hp2-on-ink-link);
	border-bottom: 1px solid var(--hp2-ink-border-strong);
	padding-bottom: 1px;
	transition: color 240ms ease, border-color 240ms ease;
}

.hp2.hp2 .hp2-footer__credit a:hover {
	color: var(--hp2-paper);
	border-color: var(--hp2-paper);
}

.hp2.hp2 .hp2-footer__links a { color: var(--hp2-on-ink-link); }
.hp2.hp2 .hp2-footer__links a:hover { color: var(--hp2-paper); }

.hp2.hp2 .hp2-footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 20px 36px;
	border-top: 1px solid var(--hp2-ink-border);
	padding: 28px 0 32px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hp2-on-ink-legal);
}

.hp2.hp2 .hp2-footer__legal div {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hp2-24);
}

.hp2.hp2 .hp2-footer__legal a:hover { color: var(--hp2-paper); }

.hp2.hp2 .hp2-footer__disclosure {
	border-top: 1px solid var(--hp2-ink-border);
	margin: 0 calc(-1 * var(--hp2-gutter));
	padding: 22px var(--hp2-gutter) 26px;
	font-size: 12px;
	line-height: 1.7;
	letter-spacing: 0.04em;
	color: var(--hp2-on-ink-fine);
	text-wrap: pretty;
}

.hp2.hp2 .hp2-footer__disclosure a {
	color: var(--hp2-on-ink-link);
	border-bottom: 1px solid var(--hp2-ink-border-strong);
	border-bottom: 1px solid var(--hp2-ink-border);
}

.hp2.hp2 .hp2-footer__disclosure a:hover { color: var(--hp2-paper); }

/* ==========================================================================
   19b. Floating contact widget
   Sits above the header (60) but below the dialog (200) and lightbox (220),
   so opening the consultation form covers it rather than fighting it.
   ========================================================================== */

.hp2.hp2 .hp2-contact {
	position: fixed;
	right: clamp(16px, 3vw, 32px);
	bottom: clamp(16px, 3vw, 32px);
	z-index: 90;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--hp2-12);
}

.hp2.hp2 .hp2-contact__trigger {
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: var(--hp2-ink);
	color: var(--hp2-paper);
	cursor: pointer;
	box-shadow: 0 14px 34px rgba(13, 13, 13, 0.28);
	transition: background 300ms ease, transform 300ms var(--hp2-ease),
		box-shadow 300ms ease;
}

.hp2.hp2 .hp2-contact__trigger:hover {
	background: var(--hp2-graphite);
	transform: translateY(-2px) scale(1.04);
	box-shadow: 0 18px 42px rgba(13, 13, 13, 0.34);
}

.hp2.hp2 .hp2-contact__trigger svg { transition: transform 300ms var(--hp2-ease); }
.hp2.hp2 .hp2-contact.is-open .hp2-contact__trigger svg { transform: rotate(12deg); }

.hp2.hp2 .hp2-contact__panel {
	order: -1;
	width: min(320px, calc(100vw - 32px));
	background: var(--hp2-paper);
	border: 1px solid var(--hp2-hairline);
	box-shadow: 0 24px 60px rgba(13, 13, 13, 0.22);
	overflow: hidden;
	transform-origin: bottom right;
}

/* [hidden] would be overridden by the display below, so hide explicitly. */
.hp2.hp2 .hp2-contact__panel[hidden] { display: none; }

.hp2.hp2 .hp2-contact.is-open .hp2-contact__panel {
	animation: hp2-contact-in 260ms var(--hp2-ease) both;
}

@keyframes hp2-contact-in {
	from { opacity: 0; transform: translateY(12px) scale(0.97); }
	to   { opacity: 1; transform: none; }
}

/* Section eyebrows are 14px/0.28em, which is too wide for this panel's ~230px
   text column — "We Are Here for You" wrapped to two lines. Sized to fit on one
   line here; still 13.1:1 on ink, and only this compact head is affected. */
.hp2.hp2 .hp2-contact__head .hp2-eyebrow {
	font-size: 12px;
	letter-spacing: 0.2em;
	white-space: nowrap;
}

.hp2.hp2 .hp2-contact__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--hp2-16);
	padding: 20px 22px 18px;
	background: var(--hp2-ink);
}

.hp2.hp2 .hp2-contact__title {
	font-family: var(--hp2-serif);
	font-weight: 300;
	font-size: 24px;
	line-height: 1.15;
	color: var(--hp2-paper);
	margin-top: var(--hp2-8);
}

.hp2.hp2 .hp2-contact__close {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--hp2-on-ink-muted);
	cursor: pointer;
	transition: color 240ms ease;
}

.hp2.hp2 .hp2-contact__close:hover { color: var(--hp2-paper); }

.hp2.hp2 .hp2-contact__option {
	display: flex;
	align-items: center;
	gap: var(--hp2-16);
	width: 100%;
	padding: 15px 22px;
	border: 0;
	border-bottom: 1px solid var(--hp2-hairline);
	background: transparent;
	color: var(--hp2-text);
	font-family: var(--hp2-sans);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: left;
	line-height: 1.2;
	cursor: pointer;
	transition: background 240ms ease, color 240ms ease;
}

.hp2.hp2 .hp2-contact__option:last-child { border-bottom: 0; }

.hp2.hp2 .hp2-contact__option:hover {
	background: var(--hp2-bone);
	color: var(--hp2-ink);
}

.hp2.hp2 .hp2-contact__option-icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--hp2-hairline-strong);
	border-radius: 50%;
	background: var(--hp2-bone);
	color: var(--hp2-ink);
}

.hp2.hp2 .hp2-contact__option-text { flex: 1 1 auto; }

.hp2.hp2 .hp2-contact__option-arrow {
	flex: none;
	color: var(--hp2-ash);
	transition: transform 260ms var(--hp2-ease), color 260ms ease;
}

.hp2.hp2 .hp2-contact__option:hover .hp2-contact__option-arrow {
	color: var(--hp2-ink);
	transform: translateX(4px);
}

/* ==========================================================================
   20. Dialogs
   ========================================================================== */

.hp2.hp2 .hp2-dialog,
.hp2.hp2 .hp2-lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(16px, 4vw, 48px);
	background: rgba(13, 13, 13, 0.72);
}

.hp2.hp2 .hp2-lightbox {
	z-index: 220;
	background: rgba(13, 13, 13, 0.88);
}

.hp2.hp2 .hp2-dialog[hidden],
.hp2.hp2 .hp2-lightbox[hidden] { display: none; }

.hp2.hp2 .hp2-dialog__scrim {
	position: absolute;
	inset: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
}

.hp2.hp2 .hp2-dialog__panel {
	position: relative;
	width: 100%;
	max-width: 720px;
	max-height: 92vh;
	background: var(--hp2-paper);
	box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45);
	display: flex;
	flex-direction: column;
}

.hp2.hp2 .hp2-dialog__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--hp2-24);
	padding: 26px 30px 20px;
	border-bottom: 1px solid var(--hp2-hairline);
}

.hp2.hp2 .hp2-dialog__title {
	font-family: var(--hp2-serif);
	font-weight: 300;
	font-size: 30px;
	line-height: 1.1;
	color: var(--hp2-text);
	margin-top: var(--hp2-8);
}

.hp2.hp2 .hp2-dialog__close {
	flex: none;
	width: 40px;
	height: 40px;
	border: 1px solid var(--hp2-silver);
	background: var(--hp2-paper);
	color: var(--hp2-text);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background 240ms ease, color 240ms ease, border-color 240ms ease;
}

.hp2.hp2 .hp2-dialog__close:hover {
	background: var(--hp2-ink);
	color: var(--hp2-paper);
	border-color: var(--hp2-ink);
}

.hp2.hp2 .hp2-dialog__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

.hp2.hp2 .hp2-dialog__body iframe {
	display: block;
	width: 100%;
	height: 900px;
	border: 0;
}

.hp2.hp2 .hp2-lightbox__figure {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 900px;
}

.hp2.hp2 .hp2-lightbox__figure img {
	width: 100%;
	max-height: 72vh;
	object-fit: contain;
	box-shadow: 0 34px 74px rgba(0, 0, 0, 0.55);
}

.hp2.hp2 .hp2-lightbox__caption {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--hp2-32);
	font-size: 16px;
	line-height: 1.7;
	font-weight: 300;
	color: var(--hp2-mist);
}

.hp2.hp2 img[data-hp2-lightbox] { cursor: zoom-in; }

/* ==========================================================================
   21. Reveal motion
   ========================================================================== */

.hp2.hp2 [data-hp2-reveal] {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 500ms ease-out, transform 500ms ease-out;
}

.hp2.hp2 [data-hp2-reveal][data-hp2-revealed] {
	opacity: 1;
	transform: none;
}

/* ==========================================================================
   22. Responsive
   ========================================================================== */

@media (max-width: 1100px) {
	.hp2.hp2 .hp2-header__menu { display: none; }
	.hp2.hp2 .hp2-header__compact { display: flex; }

	.hp2.hp2 .hp2-results__grid {
		grid-template-columns: 1fr;
		gap: var(--hp2-32);
	}

	.hp2.hp2 .hp2-credentials__logos { grid-template-columns: repeat(3, 1fr); }

	.hp2.hp2 .hp2-panels { grid-template-columns: 1fr; }

	.hp2.hp2 .hp2-service {
		grid-template-columns: 32px minmax(0, 1fr) 24px;
		grid-template-areas:
			'index title arrow'
			'.     text  .';
		gap: var(--hp2-8) var(--hp2-16);
		padding: 28px 4px;
	}

	.hp2.hp2 .hp2-service__index { grid-area: index; }
	.hp2.hp2 .hp2-service__title { grid-area: title; }
	.hp2.hp2 .hp2-service__text  { grid-area: text; }
	.hp2.hp2 .hp2-service__arrow { grid-area: arrow; }
}

@media (max-width: 900px) {
	.hp2.hp2 .hp2-head--split,
	.hp2.hp2 .hp2-about__grid,
	.hp2.hp2 .hp2-travel__grid {
		grid-template-columns: 1fr;
		gap: var(--hp2-32);
	}

	.hp2.hp2 .hp2-head { margin-bottom: var(--hp2-48); }

	/* Mobile hero, per the comp: a 450px photo band with the eyebrow at the top
	   and the headline at the foot in white over a dark scrim, then a white
	   card of body copy pulled up over the band's bottom edge. */
	.hp2.hp2 .hp2-hero {
		display: grid;
		grid-template-rows: auto auto;
		align-items: stretch;
		min-height: 0;
		/* Start the band below the fixed header, or it crops his face. The
		   utility bar is still shown down to 700px, so the header is ~139px
		   here; the ≤700 block drops this to match the collapsed header. */
		padding-top: 140px;
		/* The desktop row's content-band padding must not apply once stacked —
		   the band and the card set their own insets. */
		padding-left: 0;
		padding-right: 0;
		gap: 0;
		background: var(--hp2-hero-bg);
	}

	.hp2.hp2 .hp2-hero__inner { display: contents; }

	.hp2.hp2 .hp2-hero__media,
	.hp2.hp2 .hp2-hero__veil,
	.hp2.hp2 .hp2-hero__intro {
		grid-area: 1 / 1;
		position: relative;
		inset: auto;
	}

	.hp2.hp2 .hp2-hero__media {
		/* Back to DOM order here: order also controls paint order, and at 2
		   the photo covered the scrim and headline sharing this grid cell. */
		order: 0;
		width: 100%;
		height: 450px;
		overflow: hidden;
		/* Grey gradient behind the cut-out, matching the desktop treatment. */
		background:
			radial-gradient(124% 74% at 50% 30%,
				rgba(255, 255, 255, 0.60) 0%,
				rgba(255, 255, 255, 0) 62%),
			linear-gradient(168deg, #EDEFF2 0%, var(--hp2-hero-bg) 52%, #CFD3D9 100%);
	}

	/* contain, not cover — the whole figure stays in frame, nothing cropped. */
	.hp2.hp2 .hp2-hero__media img {
		position: static;
		height: 100%;
		object-fit: contain;
		object-position: bottom center;
	}

	.hp2.hp2 .hp2-hero__veil {
		height: 450px;
		background: linear-gradient(180deg,
			rgba(13, 13, 13, 0.42) 0%,
			rgba(13, 13, 13, 0.10) 30%,
			rgba(13, 13, 13, 0.28) 62%,
			rgba(13, 13, 13, 0.72) 100%);
	}

	.hp2.hp2 .hp2-hero__intro {
		height: 450px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		text-align: center;
		gap: var(--hp2-16);
		padding: 22px 24px 34px;
		max-width: none;
		color: var(--hp2-paper);
	}

	.hp2.hp2 .hp2-hero .hp2-eyebrow {
		font-size: 12px;
		letter-spacing: 0.28em;
		color: var(--hp2-paper);
	}

	.hp2.hp2 .hp2-hero .hp2-display {
		font-size: 44px;
		line-height: 0.94;
		color: var(--hp2-paper);
		text-shadow: 0 2px 26px rgba(0, 0, 0, 0.55);
	}

	/* White card lapping over the photo's bottom edge. */
	.hp2.hp2 .hp2-hero__copy {
		grid-area: 2 / 1;
		position: relative;
		z-index: 1;
		margin: -26px 16px 0;
		background: var(--hp2-paper);
		box-shadow: 0 24px 60px rgba(13, 13, 13, 0.18);
		padding: 30px 24px 32px;
		gap: var(--hp2-16);
		max-width: none;
	}

	.hp2.hp2 .hp2-about__media img { height: clamp(360px, 70vw, 520px); }
	.hp2.hp2 .hp2-travel__media img { height: 300px; }

	.hp2.hp2 .hp2-filmstrip__track img {
		width: 300px;
		height: 200px;
	}

	.hp2.hp2 .hp2-instagram .hp2-btn { align-self: flex-start; }
}

@media (max-width: 700px) {
	.hp2.hp2 {
		--hp2-section-y: 64px;
		font-size: 16px;
	}

	.hp2.hp2 .hp2-header__utility { display: none; }

	/* Utility bar is gone below 700px, so the header is ~79px here. */
	.hp2.hp2 .hp2-hero { padding-top: 80px; }

	.hp2.hp2 .hp2-credentials__head {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--hp2-24);
	}

	.hp2.hp2 .hp2-credentials__logos {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--hp2-32) var(--hp2-24);
	}

	.hp2.hp2 .hp2-rating { width: 100%; }

	.hp2.hp2 .hp2-panel { padding: 36px 28px; }
	.hp2.hp2 .hp2-card { padding: 32px 28px; }

	.hp2.hp2 .hp2-carousel {
		flex-wrap: wrap;
		gap: var(--hp2-24);
	}

	.hp2.hp2 .hp2-carousel__viewport {
		order: -1;
		flex-basis: 100%;
	}

	.hp2.hp2 .hp2-steps { gap: var(--hp2-32); }

	.hp2.hp2 .hp2-journal__item {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			'title arrow'
			'term  .';
		gap: var(--hp2-8) var(--hp2-16);
	}

	.hp2.hp2 .hp2-journal__title { grid-area: title; }
	.hp2.hp2 .hp2-journal__arrow { grid-area: arrow; }

	/* Stacked under the title here, so the desktop right-alignment and the
	   narrow column that protected it no longer apply. */
	.hp2.hp2 .hp2-journal__term {
		grid-area: term;
		max-width: none;
		text-align: left;
	}

	.hp2.hp2 .hp2-btn { padding: 17px 28px; }

	/* The comp stacks the hero pair full width rather than letting the two
	   buttons hug their text at different widths. */
	.hp2.hp2 .hp2-btn-row {
		flex-direction: column;
		align-items: stretch;
		gap: 11px;
	}

	.hp2.hp2 .hp2-btn-row .hp2-btn { padding: 18px 24px; }
	.hp2.hp2 .hp2-btn-row .hp2-btn--outline { padding: 17px 24px; }

	/* Re-assert after the .hp2-btn rule above, which is equal specificity and
	   later in source, so it would otherwise inflate the small variant. */
	.hp2.hp2 .hp2-btn--small {
		padding: 12px 18px;
		font-size: 11px;
	}

	/* Three ghost buttons drop to underlined text links on mobile, per the
	   comp — a full-width outlined box would compete with the hero pair. */
	.hp2.hp2 .hp2-btn--mobile-link,
	.hp2.hp2 a.hp2-btn--mobile-link {
		display: inline-flex;
		align-self: flex-start;
		width: auto;
		padding: 0 0 4px;
		border: 0;
		border-bottom: 1px solid currentColor;
		background: transparent;
	}

	.hp2.hp2 .hp2-btn--mobile-link:hover,
	.hp2.hp2 a.hp2-btn--mobile-link:hover {
		background: transparent;
		box-shadow: none;
		transform: none;
		color: var(--hp2-slate);
	}

	.hp2.hp2 .hp2-btn--outline-light.hp2-btn--mobile-link,
	.hp2.hp2 a.hp2-btn--outline-light.hp2-btn--mobile-link {
		color: var(--hp2-paper);
		border-bottom-color: var(--hp2-slate);
	}

	.hp2.hp2 .hp2-btn--outline-light.hp2-btn--mobile-link:hover,
	.hp2.hp2 a.hp2-btn--outline-light.hp2-btn--mobile-link:hover {
		color: var(--hp2-mist);
	}

	.hp2.hp2 .hp2-btn--mobile-center,
	.hp2.hp2 a.hp2-btn--mobile-center { align-self: center; }

	/* Text links and buttons hug their text; their flex/grid parents stretch
	   children by default, which the comp does not. .hp2-head--split is a
	   grid, so horizontal placement there is justify-self — align-self only
	   moves a grid item on the block axis. */
	.hp2.hp2 .hp2-link,
	.hp2.hp2 a.hp2-link { align-self: flex-start; }

	.hp2.hp2 .hp2-head--split > .hp2-btn,
	.hp2.hp2 .hp2-head--split > a.hp2-btn,
	.hp2.hp2 .hp2-head--split > .hp2-link,
	.hp2.hp2 .hp2-head--split > a.hp2-link {
		justify-self: start;
		width: auto;
	}

	/* The comp centres this one under the carousel and sets it a step smaller. */
	.hp2.hp2 .hp2-carousel .hp2-link,
	.hp2.hp2 .hp2-carousel a.hp2-link {
		align-self: center;
		font-size: 11px;
	}

	.hp2.hp2 .hp2-link--muted,
	.hp2.hp2 a.hp2-link--muted { font-size: 11px; }

	/* Hero intro and card set their own padding in the ≤900 block, matching the
	   comp; the page-wide 40px gutter must not override them here. */

	.hp2.hp2 .hp2-footer__legal,
	.hp2.hp2 .hp2-capabilities {
		justify-content: flex-start;
		gap: var(--hp2-16);
	}

	.hp2.hp2 .hp2-dialog__body iframe { height: 78vh; }
}

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

	.hp2.hp2 [data-hp2-reveal] {
		opacity: 1;
		transform: none;
	}

	.hp2.hp2 .hp2-rule--light { transform: none; }
}