/* =============================================================================
   Limitless — Dental Landing template
   -----------------------------------------------------------------------------
   Three colors: black, white, and Honolulu Blue. Nothing else. The blue is the
   one already used across limitlessenterprisespro.com (#0080C6, with #0076B6 on
   hover), so this page reads as part of the same company rather than a microsite
   bolted onto it.

   Two notes on why the values are what they are:

   - Buttons use the DARKER blue, not the primary. White on #0080C6 measures
     4.28:1 and fails AA at body size; on #0076B6 it measures 4.87:1 and passes.
     The primary blue is still used, but only where it sits on white.
   - The dark blocks get a lighter tint (--brand-lift). Brand blue on near-black
     lands around 3.9:1 — the same contrast trap that bites on dark backgrounds
     elsewhere, so it is avoided here rather than discovered later.

   Everything is scoped under .ld so the Salient theme cannot leak in and this
   cannot leak out.
   ========================================================================== */

.ld {
	--paper:      #ffffff;   /* ground — white, per brand */
	--paper-2:    #f4f5f7;   /* alternating band, barely off-white */
	--ink:        #0a0a0a;   /* near-black; the site's own darkest value */
	--ink-soft:   #2f3035;   /* dark blocks */
	--grey:       #56585f;   /* secondary text, passes AA on white */
	--line:       #d7d8dd;   /* hairlines, borrowed from the main site */
	--brand:      #0076b6;   /* Honolulu Blue, darker cut — buttons, links */
	--brand-hi:   #0080c6;   /* brand primary — on white only */
	--brand-press:#005f93;   /* hover / pressed */
	--brand-lift: #7cc6f0;   /* the only blue legible on the dark blocks */

	--gut: clamp(1.15rem, 5vw, 4rem);
	--wrap: 1180px;

	--serif: "Newsreader", Georgia, "Times New Roman", serif;
	--sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: clamp(1rem, 0.97rem + 0.2vw, 1.0938rem);
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

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

.ld p { margin: 0 0 1rem; }
.ld p:last-child { margin-bottom: 0; }

.ld img { display: block; max-width: 100%; height: auto; }

.ld a { color: var(--brand); }

/* The buttons are anchors, and `.ld a` scores (0,1,1) against `.ld-btn--primary`
   at (0,1,0) — so the generic link color won and the primary button rendered blue
   text on a blue ground. Qualifying with the element type settles it. */
.ld a.ld-btn--primary,
.ld a.ld-btn--primary:hover,
.ld a.ld-btn--primary:visited { color: #ffffff; }

.ld a.ld-btn--quiet,
.ld a.ld-btn--quiet:hover,
.ld a.ld-btn--quiet:visited { color: var(--ink); }

.ld :focus-visible {
	outline: 3px solid var(--brand);
	outline-offset: 3px;
	border-radius: 2px;
}

.ld-wrap {
	max-width: var(--wrap);
	margin: 0 auto;
	padding-left: var(--gut);
	padding-right: var(--gut);
}

/* ------------------------------------------------------------- type scale --- */

.ld-h1 {
	font-family: var(--serif);
	font-weight: 500;
	font-size: clamp(2.35rem, 6vw, 4.5rem);
	line-height: 1.03;
	letter-spacing: -0.022em;
	color: var(--ink);
	margin: 0 0 1.15rem;
	text-wrap: balance;
}

/* The one italic on the page, on the half of the sentence that carries the
   argument. Newsreader's italic is genuinely different from its roman, which is
   why it is worth using rather than slanting the roman. */
.ld-h1 em {
	font-style: italic;
	color: var(--brand);
}

.ld-h2 {
	font-family: var(--serif);
	font-weight: 500;
	font-size: clamp(1.65rem, 3.4vw, 2.6rem);
	line-height: 1.13;
	letter-spacing: -0.016em;
	margin: 0 0 1.1rem;
	text-wrap: balance;
}

.ld-h2--tight { margin-bottom: 2rem; }

.ld-eyebrow {
	font-family: var(--sans);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--brand);
	margin: 0 0 0.9rem;
}

.ld-lede {
	font-size: clamp(1.05rem, 0.99rem + 0.34vw, 1.28rem);
	line-height: 1.55;
	color: var(--grey);
	max-width: 46ch;
	margin: 0 0 1.9rem;
}

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

.ld-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--sans);
	font-size: 1.0313rem;
	font-weight: 600;
	line-height: 1;
	padding: 1.05rem 1.9rem;
	border-radius: 4px;
	border: 2px solid transparent;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.16s, border-color 0.16s, color 0.16s, transform 0.12s;
}

/* White on the darker Honolulu Blue: 4.87:1, passes AA at body size. */
.ld-btn--primary {
	background: var(--brand);
	color: #ffffff;
	box-shadow: 0 10px 24px -14px rgba(0, 118, 182, 0.55);
}
.ld-btn--primary:hover { background: var(--brand-press); color: #ffffff; transform: translateY(-1px); }
.ld-btn--primary:active { transform: none; }

.ld-btn--quiet {
	background: transparent;
	color: var(--ink);
	border-color: var(--line);
}
.ld-btn--quiet:hover { border-color: var(--ink); color: var(--ink); }

.ld-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.ld-reassure {
	font-size: 0.9rem;
	color: var(--grey);
	margin: 0;
}

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

.ld-hero {
	padding: clamp(3rem, 8vw, 6rem) 0 clamp(2.5rem, 6vw, 4rem);
	background:
		radial-gradient(120% 80% at 85% 0%, rgba(0, 128, 198, 0.13), transparent 60%),
		var(--paper);
}

/* ---- the signature: real work, in browser frames, above the fold ---- */

.ld-proof { margin-top: clamp(2.25rem, 5vw, 3.5rem); }

.ld-proof__rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(268px, 340px);
	gap: 1.1rem;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	/* bleed to the viewport edge so it reads as "there is more" */
	padding: 0.5rem var(--gut) 1.5rem;
	margin: 0 auto;
	max-width: calc(var(--wrap) + 2 * var(--gut));
	scrollbar-width: thin;
	scrollbar-color: var(--line) transparent;
}

.ld-shot {
	margin: 0;
	scroll-snap-align: start;
}

/* The browser frame is the honest artifact of this subject's world — and it
   shows the practice's real address, which makes the proof checkable. */
.ld-chrome {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.7rem;
	background: #eceef1;
	border: 1px solid var(--line);
	border-bottom: 0;
	border-radius: 7px 7px 0 0;
}

.ld-chrome__dots { display: flex; gap: 4px; }
.ld-chrome__dots i {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: #c9ccd2;
}

.ld-chrome__url {
	font-size: 0.6875rem;
	color: var(--grey);
	letter-spacing: 0.01em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ld-shot img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: top center;
	border: 1px solid var(--line);
	background: #f2f3f5;
}

.ld-shot figcaption {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	padding-top: 0.7rem;
	font-size: 0.875rem;
}
.ld-shot figcaption strong { color: var(--ink); font-weight: 600; }
.ld-shot figcaption span { color: var(--grey); font-size: 0.8125rem; }

.ld-proof__note {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 var(--gut);
	font-size: 0.875rem;
	color: var(--grey);
}

/* ------------------------------------------------------- problem band --- */

.ld-band {
	background: var(--ink);
	color: #f1f2f4;
	padding: clamp(3rem, 7vw, 5rem) 0;
}

.ld-band__inner {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: start;
}

.ld-band .ld-h2 { color: #fff; margin-bottom: 0; }
.ld-band__body p { color: #c9cbd1; }

/* --------------------------------------------------------------- blocks --- */

.ld-section { padding: clamp(3rem, 7vw, 5.25rem) 0; }
.ld-section--alt { background: var(--paper-2); border-block: 1px solid var(--line); }

.ld-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.15rem;
}

.ld-card {
	background: var(--paper-2);
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 1.5rem 1.4rem;
}
.ld-section--alt .ld-card { background: var(--paper); }

.ld-card h3 {
	font-family: var(--serif);
	font-weight: 600;
	font-size: 1.22rem;
	line-height: 1.2;
	margin: 0 0 0.5rem;
	color: var(--ink);
}
.ld-card p { color: var(--grey); font-size: 0.9688rem; margin: 0; }

/* ---- process. Numbered because it genuinely is a sequence; nothing else
        on this page is numbered. ---- */

.ld-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.15rem;
	counter-reset: none;
}

.ld-steps li {
	padding-top: 1.1rem;
	border-top: 2px solid var(--brand);
}

.ld-steps__n {
	display: block;
	font-family: var(--serif);
	font-size: 1.75rem;
	line-height: 1;
	font-weight: 600;
	color: var(--brand-press);
	letter-spacing: 0.06em;
	margin-bottom: 0.5rem;
}

.ld-steps h3 {
	font-family: var(--serif);
	font-weight: 600;
	font-size: 1.15rem;
	margin: 0 0 0.4rem;
	color: var(--ink);
}
.ld-steps p { color: var(--grey); font-size: 0.9375rem; margin: 0; }

/* ------------------------------------------------------------ testimonial --- */

.ld-quote-wrap { padding-block: clamp(2.5rem, 5vw, 4rem); }

.ld-quote {
	margin: 0;
	max-width: 34ch;
	border-left: 3px solid var(--brand);
	padding-left: clamp(1rem, 2.5vw, 1.75rem);
}

.ld-quote p {
	font-family: var(--serif);
	font-size: clamp(1.3rem, 2.6vw, 1.9rem);
	line-height: 1.3;
	letter-spacing: -0.012em;
	color: var(--ink);
	margin: 0 0 0.85rem;
}

.ld-quote cite {
	font-style: normal;
	font-size: 0.875rem;
	color: var(--grey);
}

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

.ld-faq-wrap { max-width: 760px; }

.ld-faq details {
	border-bottom: 1px solid var(--line);
	padding: 0.25rem 0;
}
.ld-faq details:first-of-type { border-top: 1px solid var(--line); }

.ld-faq summary {
	list-style: none;
	cursor: pointer;
	padding: 1.05rem 2.25rem 1.05rem 0;
	position: relative;
	font-family: var(--serif);
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--ink);
}
.ld-faq summary::-webkit-details-marker { display: none; }

.ld-faq summary::after {
	content: "";
	position: absolute;
	right: 0.35rem;
	top: 50%;
	width: 11px;
	height: 11px;
	border-right: 2px solid var(--brand);
	border-bottom: 2px solid var(--brand);
	transform: translateY(-70%) rotate(45deg);
	transition: transform 0.2s;
}
.ld-faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }

.ld-faq p {
	margin: 0 0 1.15rem;
	color: var(--grey);
	max-width: 62ch;
}

/* -------------------------------------------------------------------- cta --- */

.ld-cta {
	background: var(--ink);
	color: #f1f2f4;
	padding: clamp(3rem, 7vw, 5.5rem) 0;
}

.ld-cta__inner {
	display: grid;
	grid-template-columns: 1fr minmax(0, 480px);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

.ld-cta .ld-h2 { color: #fff; }
.ld-cta__pitch > p { color: #c9cbd1; max-width: 44ch; }

.ld-cta__list {
	list-style: none;
	margin: 1.4rem 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}
.ld-cta__list li {
	position: relative;
	padding-left: 1.6rem;
	color: #d7d8dd;
	font-size: 0.9688rem;
}
.ld-cta__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 9px;
	height: 5px;
	border-left: 2px solid var(--brand);
	border-bottom: 2px solid var(--brand);
	transform: rotate(-45deg);
}

.ld-cta__call { font-size: 0.9375rem; color: #c9cbd1; }
.ld-cta__call a { color: var(--brand-lift); font-weight: 600; text-decoration: none; }
.ld-cta__call a:hover { text-decoration: underline; }

/* The shared form component sits inside the dark block, so its own wrapper
   spacing is neutralised here rather than in the component. */
.ld-cta__form .ld-form-wrap { max-width: none; margin: 0; }

/* ------------------------------------------------------------ responsive --- */

@media (max-width: 1000px) {
	.ld-grid { grid-template-columns: repeat(2, 1fr); }
	.ld-steps { grid-template-columns: repeat(2, 1fr); }
	.ld-band__inner { grid-template-columns: 1fr; }
	.ld-cta__inner { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
	.ld-grid { grid-template-columns: 1fr; }
	.ld-steps { grid-template-columns: 1fr; }
	.ld-actions .ld-btn { flex: 1 1 100%; }
	.ld-proof__rail { grid-auto-columns: minmax(240px, 84vw); }
	/* the sticky call bar covers the end of the page */
	.ld-cta { padding-bottom: calc(clamp(3rem, 7vw, 5.5rem) + 56px); }
}

@media (prefers-reduced-motion: reduce) {
	.ld *, .ld *::before, .ld *::after {
		transition-duration: 0.001ms !important;
		animation-duration: 0.001ms !important;
	}
}

/* ============================================================================
   Video, photography, case study, reviews
   ----------------------------------------------------------------------------
   Added when the page stopped being all type. The media is the argument here —
   these rules mostly get out of its way and keep it from breaking the grid.
   ========================================================================= */

/* A card with no browser frame (photography rather than a site) rounds all four
   corners, since there is no chrome bar sitting on top of it. */
.ld-shot__photo {
	border-radius: 7px;
}

.ld-shot__credit {
	flex-basis: 100%;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--brand);
}

/* ------------------------------------------------------------------ video --- */

.ld-video-lead {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	align-items: end;
}

.ld-video {
	width: 100%;
	aspect-ratio: 16 / 9;
	display: block;
	background: var(--ink);
	border-radius: 8px;
	border: 1px solid var(--line);
}

.ld-video__note {
	font-size: 0.9375rem;
	color: var(--grey);
	margin: 0;
}

/* ------------------------------------------------------------- case study --- */

.ld-case__where {
	display: block;
	font-family: var(--sans);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--grey);
	margin-top: 0.5rem;
}

.ld-case__lede {
	font-size: clamp(1rem, 0.96rem + 0.3vw, 1.2rem);
	color: var(--grey);
	max-width: 60ch;
	margin: 0 0 2rem;
}

.ld-case__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1.4rem 1.75rem;
	margin-bottom: 2.5rem;
}

.ld-case__item h3 {
	font-family: var(--sans);
	font-size: 0.9375rem;
	font-weight: 700;
	margin: 0 0 0.35rem;
	padding-top: 0.85rem;
	border-top: 2px solid var(--brand);
}

.ld-case__item p {
	font-size: 0.9375rem;
	color: var(--grey);
	margin: 0;
}

/* Photography grid. Fixed aspect so a mix of portrait and landscape originals
   still lines up; object-fit does the cropping rather than letterboxing. */
/* Three across, so six photographs land as two rows and each one is big enough to
   read a face in. auto-fit was packing all six into a single thin strip. */
.ld-photos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.85rem;
	margin-bottom: 2.75rem;
}

@media (max-width: 900px) {
	.ld-photos { grid-template-columns: repeat(2, 1fr); }
}

.ld-photos img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 6px;
	background: var(--paper-2);
}

.ld-case__sub {
	font-family: var(--serif);
	font-size: clamp(1.15rem, 2vw, 1.5rem);
	font-weight: 500;
	margin: 0 0 0.5rem;
}

.ld-case__caveat {
	font-size: 0.9375rem;
	color: var(--grey);
	max-width: 62ch;
	margin: 0 0 1.4rem;
}

/* These autoplay muted and loop, paused by an IntersectionObserver whenever they
   are off-screen — three videos decoding at once on a phone is real battery for
   something nobody is looking at. */
.ld-vids {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1rem;
}

/*
 * These are 1280x720 — landscape, not portrait. The frame was 9:16, so every one of
 * them was letterboxed with a black band above and below. Matching the real ratio
 * removes the bands; object-fit:cover means a future clip shot at another ratio
 * fills the frame instead of reintroducing them.
 */
.ld-vid {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
	background: var(--ink);
	border-radius: 8px;
	border: 1px solid var(--line);
}

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

.ld-reviews {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.5rem;
}

.ld-review {
	margin: 0;
	padding-left: 1.15rem;
	border-left: 3px solid var(--brand);
}

.ld-review p {
	font-family: var(--serif);
	font-size: 1.0625rem;
	line-height: 1.5;
	margin: 0 0 0.7rem;
}

.ld-review cite {
	font-style: normal;
	font-size: 0.8125rem;
	color: var(--grey);
}
.ld-review cite strong { display: block; color: var(--ink); font-size: 0.875rem; }

@media (max-width: 760px) {
	.ld-video-lead { grid-template-columns: 1fr; }
}

/* ------------------------------------------- step numbers, theme override --- */

/*
 * The steps are an <ol>, so Salient contributes its own generated number on top of
 * the styled "01" — hence a "1" and an "01" side by side. list-style:none does not
 * remove a theme's ::before, so it is killed explicitly. !important is warranted:
 * this is overriding theme CSS that loads after ours and is not otherwise reachable.
 */
.ld-steps { counter-reset: none; }
.ld-steps li { list-style: none; }
.ld-steps li::marker { content: ""; }
.ld-steps li::before {
	content: none !important;
	display: none !important;
}

/* ------------------------------------------------------ video play control --- */

.ld-videoframe {
	position: relative;
	display: block;
	border-radius: 8px;
	overflow: hidden;
	background: var(--ink);
}

/*
 * The control sits over the whole frame so the entire video is a click target,
 * with the visible button centred inside it.
 */
.ld-videobtn {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	width: 100%;
	border: 0;
	background: transparent;
	cursor: pointer;
	padding: 0;
	transition: opacity 0.2s;
}

.ld-videobtn__icon {
	width: clamp(48px, 7vw, 66px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 6px 22px -8px rgba(0, 0, 0, 0.65);
	position: relative;
	transition: transform 0.16s, background 0.16s;
}

/* Play triangle, drawn rather than shipped as an asset. */
.ld-videobtn__icon::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-40%, -50%);
	border-style: solid;
	border-width: 0.55em 0 0.55em 0.92em;
	border-color: transparent transparent transparent var(--brand);
}

.ld-videobtn:hover .ld-videobtn__icon { transform: scale(1.06); background: #ffffff; }

/* Once it is running, the control fades out of the way but stays reachable —
   hover or keyboard focus brings it straight back. */
.ld-videoframe.is-playing .ld-videobtn { opacity: 0; }
.ld-videoframe.is-playing .ld-videobtn:hover,
.ld-videoframe.is-playing .ld-videobtn:focus-visible { opacity: 1; }

/* Paused, it shows a pause glyph instead of the triangle. */
.ld-videoframe.is-playing .ld-videobtn__icon::before {
	border: 0;
	width: 0.30em;
	height: 0.95em;
	background: var(--brand);
	box-shadow: 0.42em 0 0 var(--brand);
	transform: translate(-90%, -50%);
}

.ld-videoframe .ld-video,
.ld-videoframe .ld-vid {
	border: 0;
	border-radius: 0;
}

/* ------------------------------------------ CTA list, theme bullet override --- */

/*
 * The checkmark on these items is our own ::before. The disc next to it is the
 * theme's, re-applied to the <li> with more specificity than list-style:none on the
 * <ul> — so it has to be reset on the item itself. The marker is emptied rather than
 * the ::before killed, because the ::before *is* the checkmark.
 */
.ld-cta__list li {
	list-style: none !important;
}
.ld-cta__list li::marker {
	content: "" !important;
}

/* ============================================================================
   Hero
   ----------------------------------------------------------------------------
   The headline used to sit alone above a scroll rail, which meant the first
   screen was a sentence and some white space. It now runs as a pair: the claim
   on the left, and immediately to its right a video of the work actually being
   claimed. The argument and its evidence arrive together.
   ========================================================================= */

.ld-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
	gap: clamp(1.75rem, 4vw, 3.25rem);
	align-items: center;
}

.ld-hero__copy { min-width: 0; }

.ld-hero__media {
	position: relative;
	min-width: 0;
}

/* The blue is doing the work here — a soft off-axis bloom behind the frame,
   which lifts it off a white page without needing a border or a drop shadow
   heavy enough to look like a 2012 template. */
.ld-hero__media::before {
	content: "";
	position: absolute;
	inset: -14% -10% -18% -6%;
	background:
		radial-gradient(58% 58% at 72% 28%, rgba(0, 128, 198, 0.34), transparent 70%),
		radial-gradient(52% 52% at 22% 82%, rgba(0, 95, 147, 0.22), transparent 72%);
	filter: blur(26px);
	z-index: 0;
	animation: ld-bloom 14s ease-in-out infinite alternate;
}

@keyframes ld-bloom {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to   { transform: translate3d(1.5%, -2%, 0) scale(1.06); }
}

.ld-hero__frame {
	position: relative;
	z-index: 1;
	border-radius: 12px;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.6) inset,
		0 28px 60px -30px rgba(0, 40, 66, 0.55);
}

.ld-hero__frame .ld-video {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.ld-hero__mediacap {
	position: relative;
	z-index: 1;
	margin: 0.7rem 0 0;
	font-size: 0.8125rem;
	color: var(--grey);
	text-align: right;
}

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

/*
 * A quiet band of checkable figures directly under the fold line. Serif numerals
 * because the rest of the page's authority is carried by the serif, and because a
 * sans number at this size reads as a dashboard rather than a claim.
 */
.ld-stats {
	list-style: none;
	margin: clamp(2rem, 4vw, 3rem) 0 0;
	padding: clamp(1.35rem, 3vw, 1.9rem) 0 0;
	border-top: 1px solid var(--line);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;
}

.ld-stats li { list-style: none; }
.ld-stats li::marker { content: ""; }
.ld-stats li::before { content: none !important; }

.ld-stats__v {
	display: block;
	font-family: var(--serif);
	font-weight: 500;
	font-size: clamp(1.75rem, 3.4vw, 2.6rem);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--brand);
}

.ld-stats__l {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--grey);
}

/* ----------------------------------------------------------------- showreel --- */

.ld-reel {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1.15rem;
	margin-top: 1.75rem;
}

.ld-reel__item { margin: 0; }

.ld-reel__item .ld-videoframe { border-radius: 10px; }

.ld-reel__item .ld-video {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.ld-reel__item figcaption {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.45rem;
	padding-top: 0.65rem;
	font-size: 0.875rem;
}
.ld-reel__item figcaption strong { color: var(--ink); font-weight: 600; }
.ld-reel__item figcaption span { color: var(--grey); font-size: 0.8125rem; }

/* --------------------------------------------------------------- responsive --- */

@media (max-width: 900px) {
	.ld-hero__grid { grid-template-columns: 1fr; }
	.ld-hero__mediacap { text-align: left; }
	.ld-stats { grid-template-columns: repeat(2, 1fr); }
}

/*
 * The bloom is the only thing on the page that moves without being asked. Autoplay
 * is already suppressed in JS under this query; this covers the decoration.
 */
@media (prefers-reduced-motion: reduce) {
	.ld-hero__media::before { animation: none; }
}

/* --------------------------------------------------------- YouTube embed --- */

/*
 * The frame owns the ratio, because an iframe has no intrinsic size to derive one
 * from — unlike the <video> elements elsewhere on this page, which do.
 */
.ld-hero__frame--yt {
	aspect-ratio: 16 / 9;
}

.ld-ytframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}