/* =========================================================
   WhereNext — The Decision Room

   Styled to match the rest of theziboard.com: white sections,
   #D31E3D accent, black headings, 12px cards, pill buttons.
   Values taken from the site's own Elementor stylesheets.

   Everything is scoped under .zib-dr so no other page is touched.
   ========================================================= */

.zib-dr {
	--dr-red: #d31e3d;
	--dr-red-dark: #b01730;
	--dr-red-tint: #fff1f1;
	--dr-red-faint: rgba(211, 30, 61, .06);

	--dr-ink: #000000;
	--dr-body: #3f3f3f;
	--dr-mute: #6d6d6d;
	--dr-line: #e7e7e7;
	--dr-alt: #f7f7f8;
	--dr-white: #ffffff;

	background: var(--dr-white);
	color: var(--dr-body);
	font-family: inherit;   /* same face as every other page */
	line-height: 1.85;      /* roomier than the default; text was reading cramped */

	/* No overflow-x:hidden here on purpose. It makes the browser compute
	   overflow-y:auto, which turns this element into a scroll container and
	   silently stops position:sticky working for anything inside it. */
}

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

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

.dr-wrap {
	width: 100%;
	max-width: 1320px;      /* wider than the site default: 1140 left too much dead
	                           margin either side on a normal desktop */
	margin: 0 auto;
	padding: 0 20px;
}
.dr-wrap--narrow { max-width: 820px; }
.dr-center { text-align: center; }

/* ---------- Typography ---------- */
.zib-dr h1,
.zib-dr h2,
.zib-dr h3 {
	color: var(--dr-ink);
	font-weight: 600;
	line-height: 1.22;
	margin: 0;
}

.dr-h2 {
	font-size: clamp(26px, 2.2vw + 16px, 35px);
	line-height: 1.32;
	margin-bottom: 14px;
}

.dr-eyebrow {
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--dr-red);
	margin-bottom: 10px;
}

.dr-kicker {
	display: inline-block;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--dr-red);
}

.zib-dr p { margin: 0 0 16px; font-size: 17px; line-height: 1.85; }
.zib-dr p:last-child { margin-bottom: 0; }

/* ---------- Buttons ---------- */
.dr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 52px;
	padding: 0 34px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	border: 2px solid var(--dr-red);
	border-radius: 50px;
	background: var(--dr-red);
	color: #fff;
	cursor: pointer;
	transition: background .25s ease, color .25s ease, border-color .25s ease,
	            transform .2s ease, box-shadow .25s ease;
}
.dr-btn:hover {
	background: var(--dr-red-dark);
	border-color: var(--dr-red-dark);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(211, 30, 61, .26);
}
.dr-btn:active { transform: translateY(0); }
.dr-btn[disabled], .dr-btn.is-loading { opacity: .6; pointer-events: none; }

/* Class name kept from the original markup; reads as the site's primary button. */
.dr-btn--gold { background: var(--dr-red); border-color: var(--dr-red); color: #fff; }

.dr-btn--ghost { background: transparent; color: var(--dr-red); }
.dr-btn--ghost:hover { background: var(--dr-red); color: #fff; }

.dr-btn--block { width: 100%; }
.dr-btn--lg { min-height: 58px; padding: 0 44px; font-size: 16px; }

/* ---------- Sections ----------
   Kept tighter than the site default: this page is a single funnel and every
   extra band of empty space pushes the apply form further down the screen. */
.dr-section { padding: clamp(38px, 3.4vw, 54px) 0; }
.dr-section--alt { background: var(--dr-alt); }

.dr-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
}
@media (max-width: 900px) { .dr-grid-2 { grid-template-columns: 1fr; } }

.dr-signature {
	font-weight: 600;
	color: var(--dr-red);
	font-size: 18px !important;
}

/* =========================================================
   HERO
   ========================================================= */
.dr-hero {
	position: relative;
	/* Fit the first frame on any screen: the site header is 92px, so the hero
	   takes what is left. svh (not vh) so mobile browser chrome is excluded. */
	--dr-headerH: 92px;
	min-height: calc(100svh - var(--dr-headerH));
	display: flex;
	align-items: center;
	padding: clamp(20px, 2.2vw, 40px) 0;
	/* Same geometric watermark the site uses on its own light sections, so the
	   hero reads as part of theziboard.com rather than a blank white slab. */
	/* A photograph of an actual room, washed out almost to white on the left so
	   the copy keeps full contrast and stronger toward the right. No gradient
	   mesh — it read as a smudge rather than a background. */
	background:
		linear-gradient(100deg, #fff 0%, rgba(255,255,255,.97) 34%, rgba(255,255,255,.88) 58%, rgba(255,255,255,.82) 100%),
		url("/wp-content/uploads/2025/07/6-min.jpg") center right / cover no-repeat,
		var(--dr-white);
	border-bottom: 1px solid var(--dr-line);
}
.dr-hero__bg { display: none; }

.dr-hero__inner {
	width: 100%;
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: clamp(26px, 3vw, 44px);
	align-items: center;
}
@media (max-width: 980px) { .dr-hero__inner { grid-template-columns: 1fr; } }

.dr-hero__title {
	font-size: clamp(34px, 3.4vw + 14px, 58px);
	font-weight: 700;
	line-height: 1.05;
	margin: 8px 0 0;
	color: var(--dr-ink);
}
.dr-hero__title span { color: var(--dr-red); }

.dr-hero__sub {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--dr-line);
	font-size: clamp(17px, 1vw + 12px, 21px) !important;
	font-weight: 600;
	color: var(--dr-ink);
	text-transform: uppercase;
	letter-spacing: .02em;
	line-height: 1.4;
}

.dr-hero__lede { color: var(--dr-mute); max-width: 34em; }

.dr-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 26px;
}

.dr-hero__tag {
	margin-top: 22px;
	font-size: 13px !important;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--dr-red);
}

/* ---- Seats / price card ---- */
.dr-hero__card {
	background: var(--dr-white);
	border: 1px solid var(--dr-line);
	border-radius: 12px;
	padding: 26px;
	box-shadow: 0 18px 44px rgba(0, 0, 0, .08);
}

.dr-seats {
	text-align: center;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--dr-line);
}
.dr-seats span {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--dr-mute);
}
.dr-seats strong {
	display: block;
	font-size: 52px;
	line-height: 1.1;
	font-weight: 700;
	color: var(--dr-red);
}

.dr-hero__meta { list-style: none; margin: 0; padding: 20px 0 0; }
.dr-hero__meta li { padding: 12px 0; border-bottom: 1px dashed var(--dr-line); }
.dr-hero__meta li:last-child { border-bottom: 0; }
.dr-hero__meta span {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--dr-mute);
	margin-bottom: 3px;
}
.dr-hero__meta b { display: block; font-size: 16px; color: var(--dr-ink); font-weight: 600; }
.dr-hero__meta i { display: block; font-size: 13px; color: var(--dr-mute); font-style: normal; }

.dr-price {
	margin: 20px 0;
	padding: 18px;
	text-align: center;
	background: var(--dr-red-tint);
	border: 1px solid rgba(211, 30, 61, .18);
	border-radius: 12px;
}
.dr-price__label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--dr-red);
}
.dr-price__now {
	display: block;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--dr-ink);
}
.dr-price__was {
	display: inline-block;
	font-size: 17px;
	color: var(--dr-mute);
	text-decoration: line-through;
}
.dr-price__note { display: block; margin-top: 4px; font-size: 13px; color: var(--dr-mute); }

/* =========================================================
   STRIP
   ========================================================= */
.dr-strip { background: var(--dr-red); color: #fff; }
.dr-strip__inner {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	padding: 22px 20px;
}
.dr-strip span {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .02em;
	text-align: center;
}
@media (max-width: 800px) {
	.dr-strip__inner { grid-template-columns: 1fr; text-align: center; gap: 10px; }
}

/* =========================================================
   ABOUT
   ========================================================= */
.dr-figure__placeholder {
	display: grid;
	place-content: center;
	gap: 10px;
	min-height: 300px;
	padding: 40px 28px;
	text-align: center;
	background:
		radial-gradient(90% 120% at 50% 0%, var(--dr-red-faint) 0%, transparent 60%),
		var(--dr-alt);
	border: 1px solid var(--dr-line);
	border-radius: 12px;
}
.dr-figure__placeholder strong {
	font-size: clamp(24px, 2vw + 14px, 34px);
	font-weight: 700;
	color: var(--dr-ink);
	line-height: 1.2;
}
.dr-figure__placeholder em { font-style: normal; font-size: 14px; color: var(--dr-mute); }
.dr-figure img { border-radius: 12px; }

/* =========================================================
   TIMELINE
   ========================================================= */
.dr-timeline {
	margin-top: 28px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
	gap: 14px;
}
/* Five items over two columns leaves the last one alone; let it run full width
   instead of sitting next to a gap. */
.dr-timeline article:last-child:nth-child(odd) { grid-column: 1 / -1; }

.dr-timeline article {
	position: relative;
	padding: 20px 22px 20px 26px;
	background: var(--dr-white);
	border: 1px solid var(--dr-line);
	border-left: 3px solid var(--dr-red);
	border-radius: 12px;
	transition: transform .25s ease, box-shadow .25s ease;
}
.dr-timeline article:hover {
	transform: translateX(4px);
	box-shadow: 0 10px 26px rgba(0, 0, 0, .07);
}
.dr-time {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--dr-red);
	margin-bottom: 6px;
}
.dr-timeline h3 { font-size: 20px; margin-bottom: 6px; }
.dr-timeline p { font-size: 16px; line-height: 1.8; color: var(--dr-mute); margin: 0; }

/* =========================================================
   CARDS — "You should apply if…"
   ========================================================= */
.dr-cards {
	margin-top: 28px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: 20px;
}

.dr-card {
	padding: 30px 26px;
	background: var(--dr-white);
	border: 1px solid var(--dr-line);
	border-radius: 12px;
	text-align: center;
	transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.dr-card:hover {
	transform: translateY(-5px);
	border-color: rgba(211, 30, 61, .4);
	box-shadow: 0 16px 36px rgba(0, 0, 0, .09);
}
.dr-card__icon {
	width: 62px;
	height: 62px;
	margin: 0 auto 16px;
	display: grid;
	place-items: center;
	font-size: 26px;
	color: var(--dr-red);
	background: var(--dr-red-tint);
	border: 1px solid rgba(211, 30, 61, .2);
	border-radius: 50%;
}
.dr-card h3 { font-size: 19px; margin-bottom: 10px; color: var(--dr-red); }
.dr-card p { font-size: 16px; line-height: 1.8; color: var(--dr-mute); margin: 0; }

/* =========================================================
   TAKEAWAYS
   ========================================================= */
.dr-takeaways {
	margin-top: 28px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: 20px;
}
.dr-takeaways > div {
	padding: 28px 24px;
	background: var(--dr-white);
	border: 1px solid var(--dr-line);
	border-radius: 12px;
}
.dr-takeaways span {
	display: block;
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
	color: var(--dr-red);
	opacity: .55;
	margin-bottom: 8px;
}
.dr-takeaways h3 { font-size: 20px; margin-bottom: 6px; }
.dr-takeaways p { font-size: 16px; line-height: 1.8; color: var(--dr-mute); margin: 0; }

/* =========================================================
   VIDEO TESTIMONIALS
   Click-to-play facade: the YouTube iframe is only inserted
   once someone presses play, so nothing is requested from
   YouTube for visitors who never watch.
   ========================================================= */
/* One scrollable row rather than a tall grid. Eleven videos stacked three-wide
   pushed the apply form a long way down the page; this keeps the section about
   one card tall and lets people swipe through as many as they want. */
.dr-videos {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(min(320px, 80vw), 1fr);
	gap: 18px;
	margin-top: 28px;
	padding-bottom: 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 20px;
	scrollbar-width: thin;
	scrollbar-color: var(--dr-red) var(--dr-line);
}
.dr-videos > * { scroll-snap-align: start; }

.dr-videos::-webkit-scrollbar { height: 6px; }
.dr-videos::-webkit-scrollbar-track { background: var(--dr-line); border-radius: 50px; }
.dr-videos::-webkit-scrollbar-thumb { background: var(--dr-red); border-radius: 50px; }

.dr-videos__hint {
	margin-top: 10px;
	font-size: 13px !important;
	color: var(--dr-mute);
	text-align: center;
}

.dr-video {
	margin: 0;
	background: var(--dr-white);
	border: 1px solid var(--dr-line);
	border-radius: 12px;
	overflow: hidden;
	transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.dr-video:hover {
	transform: translateY(-5px);
	border-color: rgba(211, 30, 61, .4);
	box-shadow: 0 16px 36px rgba(0, 0, 0, .1);
}

.dr-video__frame {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	padding: 0;
	border: 0;
	background: #000;
	cursor: pointer;
	overflow: hidden;
}
.dr-video__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s ease;
}
.dr-video:hover .dr-video__frame img { transform: scale(1.05); }

.dr-video__play {
	position: absolute;
	inset: 50% auto auto 50%;
	translate: -50% -50%;
	width: 62px;
	height: 62px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--dr-red);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
	transition: transform .28s ease, background .28s ease;
}
.dr-video__play svg { width: 20px; height: 20px; fill: #fff; margin-left: 3px; }
.dr-video__play { transition: scale .28s ease, background .28s ease; }
/* Hover uses the standalone scale property, never transform: the button is
   already centred with translate: -50% -50%, and a transform:translate here
   stacked on top of that and threw it out of position. */
.dr-video:hover .dr-video__play { scale: 1.08; background: var(--dr-red-dark); }

.dr-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.dr-video figcaption { padding: 14px 18px 16px; border-top: 1px solid var(--dr-line); }
.dr-video figcaption strong { display: block; font-size: 15px; font-weight: 600; color: var(--dr-ink); }
.dr-video figcaption span { display: block; margin-top: 2px; font-size: 13px; color: var(--dr-mute); }

/* =========================================================
   APPLY
   ========================================================= */
.dr-apply { background: var(--dr-alt); }

/* Facts and FAQ run down the left; the form sits in the right column and
   sticks while they scroll past. The form spans both rows so the sticky
   element has a tall enough container to travel inside. */
.dr-apply__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(380px, 430px);
	column-gap: clamp(28px, 3.5vw, 52px);
	row-gap: 34px;
	align-items: start;
}
.dr-apply__copy { grid-column: 1; grid-row: 1; }
.dr-apply__faq  { grid-column: 1; grid-row: 2; }
.dr-apply .dr-formwrap {
	grid-column: 2;
	grid-row: 1 / span 2;
	position: sticky;
	top: 24px;
	align-self: start;
}

@media (max-width: 940px) {
	/* Stack, and put the form directly after the facts so the call to action
	   is reached before the FAQ rather than after it. */
	.dr-apply__grid { grid-template-columns: 1fr; }
	.dr-apply__copy { grid-column: 1; grid-row: 1; }
	.dr-apply .dr-formwrap { grid-column: 1; grid-row: 2; position: static; }
	.dr-apply__faq { grid-column: 1; grid-row: 3; }
}

/* Only give up on sticky when the viewport is genuinely tiny. */
@media (max-height: 560px) {
	.dr-apply .dr-formwrap { position: static; }
}

.dr-apply__facts { list-style: none; margin: 26px 0 0; padding: 0; }
.dr-apply__facts li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 13px 0;
	border-bottom: 1px dashed var(--dr-line);
}
.dr-apply__facts li:last-child { border-bottom: 0; }
.dr-apply__facts span {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--dr-mute);
}
.dr-apply__facts b { font-size: 16px; color: var(--dr-ink); text-align: right; }
.dr-apply__facts i { font-style: normal; color: var(--dr-red); font-size: 14px; }

/* ---- Form ---- */
.dr-formwrap {
	background: var(--dr-white);
	border: 1px solid var(--dr-line);
	border-radius: 12px;
	padding: clamp(20px, 2vw, 26px);
	box-shadow: 0 18px 44px rgba(0, 0, 0, .07);
}

.dr-form__title { font-size: 22px; margin-bottom: 2px; }
.dr-form__hint { font-size: 13px !important; color: var(--dr-mute); margin-bottom: 14px; }

.dr-field { margin-bottom: 10px; }
.dr-field label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--dr-ink);
	margin-bottom: 6px;
}
.dr-field label span { color: var(--dr-red); }

.dr-field input {
	width: 100%;
	min-height: 44px;
	padding: 10px 14px;
	font: inherit;
	font-size: 15px;
	color: var(--dr-ink);
	background: var(--dr-white);
	border: 1.5px solid #d8d8d8;
	border-radius: 10px;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.dr-field input:focus {
	outline: none;
	border-color: var(--dr-red);
	box-shadow: 0 0 0 3px rgba(211, 30, 61, .13);
}
.dr-field.has-error input { border-color: var(--dr-red); }

.dr-err {
	display: block;
	min-height: 0;
	margin-top: 4px;
	font-size: 13px;
	font-style: normal;
	color: var(--dr-red);
}

/* Honeypot — off-screen for people, inviting to bots. */
.dr-hp { position: absolute !important; left: -9999px; opacity: 0; pointer-events: none; }

.dr-form__secure {
	margin-top: 10px;
	margin-bottom: 10px;
	font-size: 13px !important;
	color: var(--dr-mute);
	text-align: center;
}
.dr-form__secure strong { color: var(--dr-ink); }

.dr-form__msg { margin-top: 14px; font-size: 14px !important; text-align: center; }
.dr-form__msg.is-error { color: var(--dr-red); }
.dr-form__msg.is-ok { color: #1c6b3f; }

/* ---- Success ---- */
.dr-success { text-align: center; }
.dr-success__tick {
	width: 66px;
	height: 66px;
	margin: 0 auto 16px;
	display: grid;
	place-items: center;
	font-size: 30px;
	color: #fff;
	background: #2e9e5b;
	border-radius: 50%;
}
.dr-success h3 { font-size: 24px; margin-bottom: 12px; }
.dr-success__body { color: var(--dr-mute); margin-bottom: 22px; text-align: left; }
.dr-success__body p { font-size: 16px; }

/* =========================================================
   FAQ
   ========================================================= */
.dr-apply__faq .dr-h2 { margin-bottom: 18px; }

.dr-faq {
	background: var(--dr-white);
	border: 1px solid var(--dr-line);
	border-radius: 12px;
	margin-bottom: 12px;
	overflow: hidden;
}
.dr-faq[open] { border-color: rgba(211, 30, 61, .4); }

.dr-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	font-size: 17px;
	font-weight: 600;
	color: var(--dr-ink);
	cursor: pointer;
	list-style: none;
	transition: color .2s ease;
}
.dr-faq summary::-webkit-details-marker { display: none; }
.dr-faq summary:hover { color: var(--dr-red); }
.dr-faq summary::after {
	content: "+";
	flex-shrink: 0;
	font-size: 22px;
	line-height: 1;
	color: var(--dr-red);
}
.dr-faq[open] summary::after { content: "\2212"; }

.dr-faq p { padding: 0 22px 20px; margin: 0; font-size: 16px; line-height: 1.85; color: var(--dr-mute); }

/* =========================================================
   CLOSING CTA
   ========================================================= */
/* A full-bleed red band here was overpowering — it competed with the apply
   button rather than pointing at it. Light panel, red only on the accents. */
.dr-final {
	padding: clamp(42px, 4vw, 60px) 0;
	background: var(--dr-alt);
	border-top: 1px solid var(--dr-line);
	color: var(--dr-body);
}
.dr-final .dr-h2 { color: var(--dr-ink); }
.dr-final .dr-h2 br + * , .dr-final .dr-h2 span { color: var(--dr-red); }
.dr-final p { color: var(--dr-mute); }
.dr-final .dr-btn { margin-top: 22px; }
.dr-final__meta {
	margin-top: 18px;
	font-size: 14px !important;
	color: var(--dr-mute);
}

/* =========================================================
   STICKY MOBILE BAR
   ========================================================= */
.dr-sticky {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 90;
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 12px 16px;
	background: var(--dr-white);
	border-top: 1px solid var(--dr-line);
	box-shadow: 0 -6px 22px rgba(0, 0, 0, .12);
}
.dr-sticky strong { display: block; font-size: 20px; font-weight: 700; color: var(--dr-ink); }
.dr-sticky span { display: block; font-size: 12px; color: var(--dr-mute); }
.dr-sticky .dr-btn { min-height: 46px; padding: 0 24px; font-size: 14px; }

@media (max-width: 780px) {
	.dr-sticky { display: flex; }
	/* Keep the closing CTA clear of the bar. */
	.dr-final { padding-bottom: 110px; }
}

@media (prefers-reduced-motion: reduce) {
	.zib-dr * { transition: none !important; }
	.dr-card:hover,
	.dr-video:hover,
	.dr-timeline article:hover,
	.dr-btn:hover { transform: none; }
}

/* =========================================================
   Mobile safety net

   The site shell already overflows horizontally on narrow screens (the live
   site does the same — see notes). These guards make sure nothing in the event
   content adds to it: grid and flex children default to min-width:auto, which
   refuses to shrink below their content and is the usual culprit.
   ========================================================= */
.zib-dr .dr-grid-2 > *,
.zib-dr .dr-apply__grid > *,
.zib-dr .dr-hero__inner > *,
.zib-dr .dr-cards > *,
.zib-dr .dr-takeaways > *,
.zib-dr .dr-timeline > * { min-width: 0; }

.zib-dr .dr-videos { max-width: 100%; }

/* Long unbroken strings (URLs, emails) must not push the layout wide. */
.zib-dr h1, .zib-dr h2, .zib-dr h3, .zib-dr p, .zib-dr li, .zib-dr summary {
	overflow-wrap: break-word;
}

@media (max-width: 480px) {
	.dr-wrap { padding-inline: 16px; }
	.dr-hero__card { padding: 20px; }
	.dr-formwrap { padding: 20px; }
	.dr-apply__facts li { flex-wrap: wrap; gap: 2px; }
	.dr-apply__facts b { text-align: left; }
}

/* =========================================================
   The site stylesheet sets overflow-x:hidden on <body>, which is the
   second thing that breaks position:sticky. Undo it for this page only
   (the builder adds .dr-page to <body>), so the apply form can stick.
   ========================================================= */
body.dr-page { overflow-x: visible; }

/* ---- Hero stat row ----
   The left column used to end well above the price card, leaving a block of
   dead space. These three figures fill it with something that actually sells
   the room rather than just padding. */
.dr-hero__stats {
	display: grid;
	grid-template-columns: repeat(3, auto);
	justify-content: start;
	gap: clamp(18px, 3vw, 38px);
	list-style: none;
	margin: 26px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--dr-line);
}
.dr-hero__stats b {
	display: block;
	font-size: 32px;
	font-weight: 700;
	line-height: 1;
	color: var(--dr-red);
}
.dr-hero__stats span {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	line-height: 1.45;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--dr-mute);
}
.dr-hero__tag { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--dr-line); }

@media (max-width: 420px) {
	.dr-hero__stats { gap: 14px; }
	.dr-hero__stats b { font-size: 26px; }
	.dr-hero__stats span { font-size: 11px; }
}

/* =========================================================
   TIMELINE — proper timeline format
   A two-column grid of boxes never read as a schedule. This is a real
   spine: time on the left, a dot on the line, the step on the right.
   ========================================================= */
.zib-dr .dr-timeline {
	display: block;
	margin-top: 30px;
	max-width: 900px;
}
.zib-dr .dr-timeline article {
	display: grid;
	grid-template-columns: 92px 1fr;
	grid-template-rows: auto auto;
	column-gap: 30px;
	position: relative;
	padding: 0 0 30px 0;
	background: none;
	border: 0;
	border-radius: 0;
	transform: none;
	box-shadow: none;
}
.zib-dr .dr-timeline article:last-child { padding-bottom: 0; }
.zib-dr .dr-timeline article:hover { transform: none; box-shadow: none; }

/* the connecting line */
.zib-dr .dr-timeline article::before {
	content: "";
	position: absolute;
	left: 92px;
	top: 14px;
	bottom: -2px;
	width: 2px;
	margin-left: 13px;
	background: var(--dr-line);
}
.zib-dr .dr-timeline article:last-child::before { display: none; }

/* the dot */
.zib-dr .dr-timeline article::after {
	content: "";
	position: absolute;
	left: 92px;
	top: 7px;
	width: 14px;
	height: 14px;
	margin-left: 7px;
	border-radius: 50%;
	background: var(--dr-red);
	box-shadow: 0 0 0 4px var(--dr-alt);
	transition: transform .3s ease;
}
.zib-dr .dr-timeline article:hover::after { transform: scale(1.35); }

.zib-dr .dr-time {
	grid-column: 1;
	grid-row: 1;
	text-align: right;
	margin: 0;
	padding-top: 2px;
	font-size: 13px;
	color: var(--dr-red);
}
.zib-dr .dr-timeline h3 {
	grid-column: 2;
	grid-row: 1;
	padding-left: 22px;
	font-size: 19px;
	margin-bottom: 4px;
}
.zib-dr .dr-timeline p {
	grid-column: 2;
	grid-row: 2;
	padding-left: 22px;
}

@media (max-width: 620px) {
	.zib-dr .dr-timeline article { grid-template-columns: 64px 1fr; column-gap: 18px; }
	.zib-dr .dr-timeline article::before,
	.zib-dr .dr-timeline article::after { left: 64px; }
	.zib-dr .dr-timeline h3,
	.zib-dr .dr-timeline p { padding-left: 16px; }
	.zib-dr .dr-time { font-size: 12px; }
}

/* =========================================================
   HERO on shorter / smaller screens
   The hero has to fit one frame everywhere, so the supporting lines give
   way before the things that actually convert (title, promise, buttons).
   ========================================================= */
@media (max-width: 980px) {
	.dr-hero { min-height: 0; padding: 30px 0 34px; }
}
@media (max-height: 780px) and (min-width: 981px) {
	.dr-hero__lede { display: none; }
	.dr-hero__stats { margin-top: 18px; padding-top: 14px; }
	.dr-hero__stats b { font-size: 26px; }
	.dr-hero__card { padding: 20px; }
	.dr-seats strong { font-size: 40px; }
	.dr-price { margin: 14px 0; padding: 14px; }
	.dr-price__now { font-size: 32px; }
	.dr-hero__meta li { padding: 9px 0; }
}
@media (max-height: 660px) and (min-width: 981px) {
	.dr-hero__stats, .dr-hero__tag { display: none; }
}

/* =========================================================
   FOUNDER VOICES — rail with arrows
   The repeated placeholder caption under every clip read as filler, so the
   card is now just the still and the play control. Arrows make the sideways
   scroll obvious instead of leaving a card mysteriously cut off.
   ========================================================= */
.dr-videos__rail { position: relative; }

.zib-dr .dr-videos {
	grid-auto-columns: minmax(min(300px, 78vw), 1fr);
	gap: 16px;
	margin-top: 26px;
	padding: 4px 2px 16px;
}

.zib-dr .dr-video { border-radius: 14px; }
.zib-dr .dr-video figcaption { display: none; }

.dr-videos__nav {
	position: absolute;
	top: calc(50% - 14px);
	z-index: 3;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	font-size: 26px;
	line-height: 1;
	color: var(--dr-ink);
	background: var(--dr-white);
	border: 1px solid var(--dr-line);
	border-radius: 50%;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .14);
	cursor: pointer;
	transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.dr-videos__nav:hover { background: var(--dr-red); border-color: var(--dr-red); color: #fff; }
.dr-videos__nav--prev { left: -14px; }
.dr-videos__nav--next { right: -14px; }
.dr-videos__nav[hidden] { display: none; }

@media (max-width: 760px) { .dr-videos__nav { display: none; } }

/* =========================================================
   MOTION
   Sections lift into place once as they are first scrolled to. Nothing
   loops, nothing moves on its own — the page still reads as a document.
   ========================================================= */
.zib-dr [data-reveal] {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .6s cubic-bezier(.22, .61, .36, 1),
	            transform .6s cubic-bezier(.22, .61, .36, 1);
	transition-delay: var(--dr-delay, 0ms);
	will-change: opacity, transform;
}
.zib-dr [data-reveal].is-in { opacity: 1; transform: none; }

/* JS off, or motion turned down: show everything immediately. */
.zib-dr.no-js [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.zib-dr [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* =========================================================
   FIXES from measuring at real screen sizes
   ========================================================= */

/* The rail arrows sat at -14px. Once the viewport is narrow enough that the
   container loses its side margin, that pushed them past the edge and the
   whole page scrolled sideways. Keep them inside the rail. */
.dr-videos__nav--prev { left: 8px; }
.dr-videos__nav--next { right: 8px; }

/* Give the container a little breathing room so nothing can sit flush to the
   viewport edge on mid-size screens. */
.dr-wrap { padding-inline: clamp(16px, 2vw, 28px); }

/* ---------------------------------------------------------
   Hero: fit the first frame on laptop screens
   A 1600x900 or 1366x768 laptop only has ~650px under the header, and the
   full hero wanted 709. These tiers shed the supporting detail in order of
   how little it contributes to the decision to apply.
   --------------------------------------------------------- */
@media (min-width: 981px) and (max-height: 820px) {
	.dr-hero { padding: 18px 0; }
	.dr-hero__title { font-size: clamp(30px, 2.6vw + 10px, 44px); }
	.dr-hero__sub { margin-top: 12px; padding-top: 12px; font-size: 16px !important; }
	.dr-hero__lede { display: none; }
	.dr-hero__cta { margin-top: 18px; }
	.dr-btn { min-height: 46px; padding: 0 26px; font-size: 14px; }
	.dr-hero__stats { margin-top: 16px; padding-top: 12px; }
	.dr-hero__stats b { font-size: 24px; }
	.dr-hero__stats span { font-size: 11px; }
	.dr-hero__tag { margin-top: 12px; padding-top: 10px; font-size: 12px !important; }
	.dr-hero__card { padding: 18px; }
	.dr-seats { padding-bottom: 12px; }
	.dr-seats strong { font-size: 36px; }
	.dr-hero__meta { padding-top: 12px; }
	.dr-hero__meta li { padding: 7px 0; }
	.dr-hero__meta b { font-size: 15px; }
	.dr-price { margin: 12px 0; padding: 12px; }
	.dr-price__now { font-size: 28px; }
}

@media (min-width: 981px) and (max-height: 700px) {
	.dr-hero__stats, .dr-hero__tag, .dr-hero__meta i { display: none; }
	.dr-hero__title { font-size: 34px; }
}

/* ---------------------------------------------------------
   Hero on phones and tablets
   The card carries date/time/venue, all of which repeat in the apply
   section further down. On a small screen those lines are what stop the
   price and the button being visible without scrolling, so they go.
   --------------------------------------------------------- */
@media (max-width: 980px) {
	.dr-hero {
		min-height: calc(100svh - var(--dr-headerH));
		padding: 22px 0;
	}
	.dr-hero__inner { gap: 20px; align-content: center; }
	.dr-hero__title { font-size: clamp(30px, 8vw, 44px); }
	.dr-hero__sub { margin-top: 12px; padding-top: 12px; font-size: 15px !important; }
	.dr-hero__lede { display: none; }
	.dr-hero__cta { margin-top: 16px; gap: 10px; }
	.dr-hero__stats { margin-top: 14px; padding-top: 12px; }
	.dr-hero__stats b { font-size: 22px; }
	.dr-hero__stats span { font-size: 10px; }
	.dr-hero__tag { display: none; }

	/* compact card: seats + price + button, details live further down */
	.dr-hero__card { padding: 16px; }
	.dr-hero__meta { display: none; }
	.dr-seats { padding-bottom: 12px; }
	.dr-seats strong { font-size: 34px; }
	.dr-price { margin: 12px 0; padding: 12px; }
	.dr-price__now { font-size: 28px; }
}

@media (max-width: 980px) and (max-height: 700px) {
	.dr-hero__stats { display: none; }
}

/* Tightest tier: 768px-tall laptops leave only ~520px under the header, so
   the date/time/venue rows collapse too — they repeat in the apply section. */
@media (min-width: 981px) and (max-height: 680px) {
	.dr-hero { padding: 12px 0; }
	.dr-hero__title { font-size: 30px; }
	.dr-hero__sub { margin-top: 10px; padding-top: 10px; font-size: 15px !important; }
	.dr-hero__meta { display: none; }
	.dr-hero__card { padding: 14px; }
	.dr-seats strong { font-size: 32px; }
	.dr-price { margin: 10px 0; padding: 10px; }
	.dr-price__now { font-size: 26px; }
	.dr-btn { min-height: 42px; font-size: 13px; }
}

/* Last two sizes measured over: a 1280x800 laptop by 15px and a small tablet
   in portrait by 127px (its header alone is 136px tall). */
@media (min-width: 981px) and (max-height: 640px) {
	.dr-hero { padding: 8px 0; }
	.dr-hero__stats { display: none; }
	.dr-hero__title { font-size: 28px; }
	.dr-hero__cta { margin-top: 14px; }
}

@media (max-width: 980px) and (max-height: 860px) {
	.dr-hero { padding: 16px 0; }
	.dr-hero__inner { gap: 14px; }
	.dr-hero__stats, .dr-hero__tag { display: none; }
	.dr-hero__title { font-size: clamp(26px, 7vw, 36px); }
	.dr-hero__sub { margin-top: 10px; padding-top: 10px; font-size: 14px !important; }
	.dr-hero__cta { margin-top: 14px; }
	.dr-btn { min-height: 44px; padding: 0 22px; font-size: 13px; }
	.dr-hero__card { padding: 14px; }
	.dr-seats { padding-bottom: 10px; }
	.dr-seats strong { font-size: 30px; }
	.dr-seats span { font-size: 11px; }
	.dr-price { margin: 10px 0; padding: 10px; }
	.dr-price__now { font-size: 26px; }
	.dr-price__was { font-size: 15px; }
}

/* =========================================================
   HERO CARD — seats left, price right
   Stacked vertically the card ran past the bottom of the screen and took the
   Apply button with it. Side by side it is ~140px shorter.
   ========================================================= */
.dr-card__top {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--dr-line);
}

.zib-dr .dr-seats {
	display: flex;
	align-items: baseline;
	gap: 10px;
	text-align: left;
	padding: 0;
	border: 0;
}
.zib-dr .dr-seats strong { font-size: 46px; line-height: .95; }
.zib-dr .dr-seats span {
	font-size: 11px;
	line-height: 1.35;
	letter-spacing: .14em;
	color: var(--dr-mute);
}

.zib-dr .dr-price {
	margin: 0;
	padding: 10px 14px;
	text-align: right;
	justify-self: end;
}
.zib-dr .dr-price__now { font-size: 30px; line-height: 1.15; }
.zib-dr .dr-price__was { font-size: 14px; }
.zib-dr .dr-price__label { font-size: 10px; letter-spacing: .16em; }
.zib-dr .dr-price__note { font-size: 11px; margin-top: 2px; }

.zib-dr .dr-hero__meta { padding-top: 14px; }
.zib-dr .dr-hero__meta li { padding: 10px 0; }
.dr-hero__card .dr-btn { margin-top: 16px; }

@media (max-width: 400px) {
	.dr-card__top { grid-template-columns: 1fr; gap: 12px; }
	.zib-dr .dr-price { justify-self: start; text-align: left; }
}

/* =========================================================
   FOUNDER VOICES — two rows
   ========================================================= */
.zib-dr .dr-videos {
	grid-auto-flow: column;
	grid-template-rows: repeat(2, auto);
	grid-auto-columns: minmax(min(280px, 76vw), 1fr);
	gap: 16px;
}

/* =========================================================
   CLOSING CTA — the line under the button was touching it
   ========================================================= */
.zib-dr .dr-final__meta { margin-top: 26px; }
.zib-dr .dr-final .dr-btn { margin-top: 24px; }

/* =========================================================
   TAKEAWAYS — deliberately not cards
   "You should apply if…" directly above is already three bordered cards, so
   repeating that shape here made the two sections read as the same thing.
   These are numbered columns split by rules instead: no box, oversized
   outlined numeral, the line of copy carrying the weight.
   ========================================================= */
.zib-dr .dr-takeaways {
	margin-top: 34px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: 0;
}

.zib-dr .dr-takeaways > div {
	position: relative;
	padding: 6px 34px 6px 0;
	background: none;
	border: 0;
	border-radius: 0;
}
.zib-dr .dr-takeaways > div + div { padding-left: 34px; }

/* hairline between columns, never before the first or after the last */
.zib-dr .dr-takeaways > div + div::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	bottom: 4px;
	width: 1px;
	background: var(--dr-line);
}

.zib-dr .dr-takeaways span {
	display: block;
	font-size: 56px;
	font-weight: 800;
	line-height: 1;
	margin-bottom: 6px;
	color: transparent;
	opacity: 1;
	-webkit-text-stroke: 1.5px var(--dr-red);
	text-stroke: 1.5px var(--dr-red);
}
.zib-dr .dr-takeaways h3 { font-size: 21px; margin-bottom: 4px; }
.zib-dr .dr-takeaways p { font-size: 16px; color: var(--dr-mute); }

/* Older engines ignore text-stroke and would render the numeral invisible. */
@supports not ((-webkit-text-stroke: 1px red) or (text-stroke: 1px red)) {
	.zib-dr .dr-takeaways span { color: var(--dr-red); opacity: .5; }
}

@media (max-width: 700px) {
	.zib-dr .dr-takeaways > div,
	.zib-dr .dr-takeaways > div + div { padding: 16px 0; padding-left: 0; }
	.zib-dr .dr-takeaways > div + div::before {
		left: 0; right: 0; top: 0; bottom: auto;
		width: auto; height: 1px;
	}
	.zib-dr .dr-takeaways span { font-size: 44px; }
}

/* =========================================================
   HERO CARD HEADER — final layout
   No tinted box behind the price: it fought with the card it sits in.
   Label on top, price with the struck-through figure beside it, the
   deadline underneath. Both halves share one baseline grid so the seats
   figure on the left lines up with the price on the right.
   ========================================================= */
.dr-card__top {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: space-between;
	align-items: start;
	gap: 20px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--dr-line);
}

/* left: 10 · founder seats only */
.zib-dr .dr-seats {
	display: grid;
	grid-template-columns: auto auto;
	align-items: center;
	column-gap: 10px;
	text-align: left;
	padding: 0;
	border: 0;
}
.zib-dr .dr-seats strong {
	font-size: 44px;
	line-height: 1;
	font-weight: 700;
	color: var(--dr-red);
}
.zib-dr .dr-seats span {
	font-size: 11px;
	line-height: 1.4;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--dr-mute);
}

/* right: early bird · price · deadline */
.zib-dr .dr-price {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	text-align: right;
}
.zib-dr .dr-price__label {
	display: block;
	margin-bottom: 2px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--dr-red);
}
.dr-price__row {
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	gap: 8px;
}
.zib-dr .dr-price__now {
	font-size: 34px;
	line-height: 1;
	font-weight: 700;
	color: var(--dr-ink);
}
.zib-dr .dr-price__was {
	font-size: 15px;
	font-weight: 500;
	color: var(--dr-mute);
	text-decoration: line-through;
}
.zib-dr .dr-price__note {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	letter-spacing: .04em;
	color: var(--dr-mute);
}

@media (max-width: 420px) {
	.dr-card__top { grid-template-columns: 1fr; justify-content: start; gap: 14px; }
	.zib-dr .dr-price { text-align: left; }
	.dr-price__row { justify-content: flex-start; }
}

/* =========================================================
   HERO COPY — scale, don't hide
   Earlier tiers made the hero fit by deleting the lede and the stat row on
   short screens, which left the left half looking thin. Everything is sized
   in svh instead, so the same content shrinks to fit whatever height the
   screen actually has and nothing disappears.
   ========================================================= */
@media (min-width: 981px) {
	.zib-dr .dr-hero__title {
		font-size: clamp(34px, 6.6svh, 58px);
		line-height: 1.04;
		margin-top: clamp(4px, 1svh, 12px);
	}
	.zib-dr .dr-hero__sub {
		display: block;
		margin-top: clamp(10px, 2svh, 20px);
		padding-top: clamp(10px, 2svh, 18px);
		font-size: clamp(15px, 2.4svh, 21px) !important;
	}
	.zib-dr .dr-hero__lede {
		display: block;
		margin-top: clamp(8px, 1.6svh, 16px);
		margin-bottom: 0;
		font-size: clamp(14px, 2svh, 17px) !important;
		line-height: 1.65;
	}
	.zib-dr .dr-hero__cta { margin-top: clamp(14px, 2.8svh, 26px); }
	.zib-dr .dr-btn {
		min-height: clamp(42px, 6svh, 52px);
		padding: 0 clamp(24px, 3.4vw, 34px);
		font-size: clamp(13px, 1.8svh, 15px);
	}
	.zib-dr .dr-hero__stats {
		display: grid;
		margin-top: clamp(12px, 2.4svh, 26px);
		padding-top: clamp(10px, 2svh, 20px);
	}
	.zib-dr .dr-hero__stats b { font-size: clamp(22px, 3.6svh, 32px); }
	.zib-dr .dr-hero__stats span { font-size: clamp(10px, 1.4svh, 12px); }
	.zib-dr .dr-hero__tag {
		display: block;
		margin-top: clamp(10px, 1.8svh, 16px);
		padding-top: clamp(8px, 1.4svh, 16px);
		font-size: clamp(11px, 1.5svh, 13px) !important;
	}

	/* card scales with the same rhythm so the two halves stay balanced */
	.zib-dr .dr-hero__card { padding: clamp(14px, 2.6svh, 26px); }
	.zib-dr .dr-seats strong { font-size: clamp(30px, 5svh, 46px); }
	.zib-dr .dr-price__now { font-size: clamp(24px, 4svh, 34px); }
	.zib-dr .dr-hero__meta li { padding: clamp(6px, 1.3svh, 12px) 0; }
	.zib-dr .dr-hero__meta b { font-size: clamp(14px, 1.9svh, 16px); }
	.zib-dr .dr-card__top { padding-bottom: clamp(10px, 2svh, 18px); }
	.dr-hero__card .dr-btn { margin-top: clamp(10px, 2svh, 16px); }
}

/* =========================================================
   FOUNDER VOICES — two looping rails
   ========================================================= */
.dr-voices { overflow: hidden; }
.dr-voices__lede { max-width: 46ch; margin: 0 auto; color: var(--dr-mute); }

.dr-marquee {
	display: grid;
	gap: 16px;
	margin: 32px 0 18px;
	/* fade the clips out at both edges so they leave the screen softly
	   instead of being chopped off by the viewport */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.dr-marquee__row { overflow: hidden; }

.dr-marquee__track {
	display: flex;
	gap: 16px;
	width: max-content;
	will-change: transform;
}

/* The track holds every clip twice, so travelling 50% lands exactly on the
   duplicate and the restart is invisible. */
@keyframes dr-drift-ltr { from { transform: translateX(0); }      to { transform: translateX(-50%); } }
@keyframes dr-drift-rtl { from { transform: translateX(-50%); }   to { transform: translateX(0); } }

.dr-marquee__row--ltr .dr-marquee__track { animation: dr-drift-ltr 46s linear infinite; }
.dr-marquee__row--rtl .dr-marquee__track { animation: dr-drift-rtl 52s linear infinite; }

/* Pause the rail you are pointing at, and every rail while the player is up. */
.dr-marquee__row:hover .dr-marquee__track,
.dr-marquee.is-paused .dr-marquee__track { animation-play-state: paused; }

/* ---- one clip ---- */
.dr-clip {
	position: relative;
	flex: 0 0 auto;
	width: clamp(230px, 22vw, 310px);
	aspect-ratio: 16 / 9;
	padding: 0;
	border: 1px solid var(--dr-line);
	border-radius: 14px;
	background: #000;
	overflow: hidden;
	cursor: pointer;
	transition: border-color .25s ease, box-shadow .25s ease;
}
.dr-clip img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity .25s ease;
}
.dr-clip:hover { border-color: var(--dr-red); box-shadow: 0 12px 30px rgba(0, 0, 0, .18); }
.dr-clip:hover img { opacity: .82; }
.dr-clip:focus-visible { outline: 3px solid var(--dr-red); outline-offset: 3px; }

/* Play badge: centred with left/top + margins, never with transform, so a
   hover effect cannot knock it out of position. */
.dr-clip__play {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 54px;
	height: 54px;
	margin: -27px 0 0 -27px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--dr-red);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
	transition: scale .25s ease, background .25s ease;
}
.dr-clip__play svg { width: 18px; height: 18px; fill: #fff; margin-left: 3px; }
.dr-clip:hover .dr-clip__play { scale: 1.1; background: var(--dr-red-dark); }

.dr-voices__hint { font-size: 13px !important; color: var(--dr-mute); }

@media (prefers-reduced-motion: reduce) {
	.dr-marquee__track { animation: none !important; }
	.dr-marquee__row { overflow-x: auto; }
}

/* =========================================================
   PLAYER OVERLAY
   ========================================================= */
.dr-lightbox { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; }
.dr-lightbox[hidden] { display: none; }

.dr-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 10, 12, .88);
	animation: dr-fade .25s ease;
}
@keyframes dr-fade { from { opacity: 0; } to { opacity: 1; } }

.dr-lightbox__inner {
	position: relative;
	width: min(1000px, 92vw);
	animation: dr-pop .28s cubic-bezier(.2, .7, .3, 1);
}
@keyframes dr-pop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

.dr-lightbox__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.dr-lightbox__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.dr-lightbox__close {
	position: absolute;
	top: -46px;
	right: 0;
	width: 38px;
	height: 38px;
	font-size: 26px;
	line-height: 1;
	color: #fff;
	background: transparent;
	border: 0;
	cursor: pointer;
	transition: opacity .2s ease;
}
.dr-lightbox__close:hover { opacity: .65; }

@media (max-width: 560px) {
	.dr-clip { width: 74vw; }
	.dr-lightbox__close { top: -42px; }
}

/* =========================================================
   HERO CARD — left half scaled up to match the right
   The seats figure was much smaller than the price beside it, so the header
   looked lopsided. Now both sides carry the same weight and the two blocks
   fill the same height.
   ========================================================= */
.dr-card__top { align-items: stretch; }

.zib-dr .dr-seats {
	display: flex;
	align-items: center;
	gap: 12px;
}
.zib-dr .dr-seats strong {
	font-size: clamp(46px, 7.4svh, 68px);
	line-height: .88;
	letter-spacing: -.02em;
}
.zib-dr .dr-seats span {
	font-size: clamp(11px, 1.5svh, 13px);
	line-height: 1.35;
	letter-spacing: .1em;
	color: var(--dr-ink);
	font-weight: 700;
}

.zib-dr .dr-price { display: flex; flex-direction: column; justify-content: center; }

/* =========================================================
   HERO METRICS — the 10 / 5 / 1 row
   Three bare numbers on a rule read as an afterthought. Panelled, split by
   hairlines and with the figure given real size, it reads as a spec strip.
   ========================================================= */
.zib-dr .dr-hero__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	justify-content: stretch;
	gap: 0;
	margin-top: clamp(14px, 2.6svh, 26px);
	padding: clamp(12px, 2svh, 18px) 0;
	border-top: 1px solid var(--dr-line);
	border-bottom: 1px solid var(--dr-line);
	background: linear-gradient(180deg, rgba(211, 30, 61, .05), transparent);
	border-radius: 4px;
}

.zib-dr .dr-hero__stats li {
	position: relative;
	padding: 0 clamp(10px, 1.4vw, 20px);
}
.zib-dr .dr-hero__stats li + li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6%;
	bottom: 6%;
	width: 1px;
	background: var(--dr-line);
}

.zib-dr .dr-hero__stats b {
	display: block;
	font-size: clamp(26px, 4.4svh, 40px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--dr-red);
}
.zib-dr .dr-hero__stats span {
	display: block;
	margin-top: 6px;
	font-size: clamp(10px, 1.35svh, 12px);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--dr-mute);
}

/* =========================================================
   VOICES — centre the standfirst, and let a playing clip show through
   ========================================================= */
.zib-dr .dr-voices__lede {
	max-width: 46ch;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* The muted preview sits over the still and must not swallow the click that
   opens the full video. */
.dr-clip iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity .5s ease;
}
.dr-clip.is-playing iframe { opacity: 1; }
.dr-clip.is-playing img { opacity: 0; }
.dr-clip.is-playing .dr-clip__play { opacity: .9; }
.dr-clip__play { opacity: 1; transition: scale .25s ease, background .25s ease, opacity .3s ease; }

/* =========================================================
   HERO — dark treatment
   Same photograph, but darkened and blurred instead of washed to white. The
   copy sits on the dark; the card stays light so it reads as a panel lifted
   off the image rather than another layer of it.
   ========================================================= */
.dr-hero {
	background: #14161a;
	isolation: isolate;
}

/* The image lives on its own layer so it can be blurred without touching
   the text. Scaled up slightly because blur softens the edges inward. */
.dr-hero::before {
	content: "";
	position: absolute;
	inset: -40px;
	z-index: -2;
	background: url("/wp-content/uploads/2025/07/6-min.jpg") center / cover no-repeat;
	filter: blur(7px) saturate(.85);
	transform: scale(1.06);
}

/* Darkening pass: heaviest behind the copy on the left so every line keeps
   full contrast, lighter on the right where the card sits. */
.dr-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(100deg, rgba(12,13,16,.94) 0%, rgba(12,13,16,.88) 42%, rgba(12,13,16,.72) 100%),
		radial-gradient(70% 100% at 12% 45%, rgba(211,30,61,.20) 0%, transparent 62%);
}

.dr-hero .dr-hero__inner { position: relative; z-index: 1; }
.dr-hero { border-bottom: 0; }

/* ---- copy on dark ---- */
.zib-dr .dr-hero__title {
	color: #fff;
	font-weight: 800;
	letter-spacing: -.025em;
	font-size: clamp(40px, 8.4svh, 76px);
	line-height: .98;
}
.zib-dr .dr-hero__title span { color: var(--dr-red); }

.zib-dr .dr-kicker { color: #f0b8c4; letter-spacing: .22em; }

.zib-dr .dr-hero__sub {
	color: #fff;
	border-top-color: rgba(255, 255, 255, .18);
	font-weight: 600;
}
.zib-dr .dr-hero__lede { color: rgba(255, 255, 255, .72); }

.zib-dr .dr-hero__stats {
	border-top-color: rgba(255, 255, 255, .16);
	border-bottom-color: rgba(255, 255, 255, .16);
	background: linear-gradient(180deg, rgba(255, 255, 255, .06), transparent);
}
.zib-dr .dr-hero__stats li + li::before { background: rgba(255, 255, 255, .16); }
.zib-dr .dr-hero__stats b { color: #fff; }
.zib-dr .dr-hero__stats span { color: rgba(255, 255, 255, .58); }

.zib-dr .dr-hero__tag {
	color: #f0b8c4;
	border-top-color: rgba(255, 255, 255, .16);
}

/* the outline button needs to read on dark */
.dr-hero .dr-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .55); }
.dr-hero .dr-btn--ghost:hover { background: #fff; border-color: #fff; color: #14161a; }

/* ---- card lifts off the image ---- */
.zib-dr .dr-hero__card {
	box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
	border-color: rgba(255, 255, 255, .18);
}

/* ---- meta rows with icons ---- */
.zib-dr .dr-hero__meta li {
	display: grid;
	grid-template-columns: 34px 1fr;
	align-items: start;
	gap: 12px;
}
.dr-meta__ico {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	color: var(--dr-red);
	background: var(--dr-red-tint);
	border: 1px solid rgba(211, 30, 61, .16);
}
.dr-meta__ico svg { width: 17px; height: 17px; }
.dr-meta__body { display: block; min-width: 0; }

/* =========================================================
   FOUNDER VOICES — dark, so the clips carry the section
   ========================================================= */
.dr-voices {
	background: #14161a;
	color: rgba(255, 255, 255, .72);
}
.zib-dr .dr-voices .dr-h2 { color: #fff; }
.zib-dr .dr-voices .dr-eyebrow { color: #f0b8c4; }
.zib-dr .dr-voices__lede { color: rgba(255, 255, 255, .66); }
.zib-dr .dr-voices__hint { color: rgba(255, 255, 255, .42) !important; }

.zib-dr .dr-clip {
	border-color: rgba(255, 255, 255, .12);
	background: #000;
}
.zib-dr .dr-clip:hover {
	border-color: var(--dr-red);
	box-shadow: 0 16px 40px rgba(0, 0, 0, .6);
}

/* A two-stop mask left a visible edge. A long multi-stop ramp reaches
   transparent gradually enough that no boundary is perceptible. */
.dr-marquee {
	-webkit-mask-image: linear-gradient(90deg,
		rgba(0,0,0,0) 0%,   rgba(0,0,0,.10) 3%,  rgba(0,0,0,.35) 7%,
		rgba(0,0,0,.70) 12%, rgba(0,0,0,.92) 17%, #000 22%,
		#000 78%, rgba(0,0,0,.92) 83%, rgba(0,0,0,.70) 88%,
		rgba(0,0,0,.35) 93%, rgba(0,0,0,.10) 97%, rgba(0,0,0,0) 100%);
	mask-image: linear-gradient(90deg,
		rgba(0,0,0,0) 0%,   rgba(0,0,0,.10) 3%,  rgba(0,0,0,.35) 7%,
		rgba(0,0,0,.70) 12%, rgba(0,0,0,.92) 17%, #000 22%,
		#000 78%, rgba(0,0,0,.92) 83%, rgba(0,0,0,.70) 88%,
		rgba(0,0,0,.35) 93%, rgba(0,0,0,.10) 97%, rgba(0,0,0,0) 100%);
}

/* The label styling was written for `li > span` back when the label was the
   only span in the row. `.dr-meta__body` is a span too, so it inherited the
   uppercase and letter-spacing and shouted the values. Reset the wrapper and
   apply the label styling only to the label itself. */
.zib-dr .dr-hero__meta .dr-meta__body {
	font-size: inherit;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: inherit;
	margin-bottom: 0;
}
.zib-dr .dr-hero__meta .dr-meta__body > span {
	display: block;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--dr-mute);
	margin-bottom: 2px;
}
.zib-dr .dr-hero__meta .dr-meta__body > b {
	display: block;
	font-size: clamp(14px, 1.9svh, 16px);
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: var(--dr-ink);
}
.zib-dr .dr-hero__meta .dr-meta__body > i {
	display: block;
	font-style: normal;
	font-size: 12px;
	letter-spacing: normal;
	text-transform: none;
	color: var(--dr-mute);
}

/* The blurred image layer is inset by -40px so the blur has room to bleed;
   without clipping, that 40px pushed the page sideways at every width.
   Safe to clip here — the sticky apply form lives in another section, so this
   creates no scroll container around it. */
.dr-hero { overflow: hidden; }

/* =========================================================
   HERO — lighter darkening, so the photograph is visible
   The previous pass was heavy enough that the image read as flat black.
   This keeps the room legible and uses a vignette to pull focus inward
   instead of blanket opacity.
   ========================================================= */
.dr-hero::before { filter: blur(5px) saturate(.95) brightness(.92); }

.dr-hero::after {
	background:
		/* directional wash: enough contrast under the copy, clear on the right */
		linear-gradient(100deg, rgba(14,16,20,.86) 0%, rgba(14,16,20,.72) 38%,
		                        rgba(14,16,20,.46) 70%, rgba(14,16,20,.34) 100%),
		/* vignette */
		radial-gradient(120% 130% at 50% 45%, transparent 34%, rgba(8,9,12,.55) 100%),
		radial-gradient(70% 100% at 10% 45%, rgba(211,30,61,.16) 0%, transparent 60%);
}

/* =========================================================
   KICKER — bullet
   ========================================================= */
.zib-dr .dr-kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.zib-dr .dr-kicker i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--dr-red);
	box-shadow: 0 0 0 4px rgba(211, 30, 61, .22);
	flex: 0 0 auto;
}

/* =========================================================
   TITLE — light sweeping across the letterforms
   A gradient band travels over the text every few seconds. The base colour
   stays painted underneath, so if background-clip is unsupported the title
   simply renders solid rather than disappearing.
   ========================================================= */
.dr-shine { position: relative; }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.dr-shine::after {
		content: attr(data-text);
		position: absolute;
		inset: 0;
		pointer-events: none;
		background: linear-gradient(105deg,
			transparent 38%,
			rgba(255, 255, 255, .95) 47%,
			rgba(255, 255, 255, .5) 52%,
			transparent 60%);
		background-size: 260% 100%;
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
		animation: dr-shine 5.5s ease-in-out infinite;
	}
}

@keyframes dr-shine {
	0%, 22%  { background-position: 165% 0; }
	62%,100% { background-position: -65% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.dr-shine::after { animation: none; opacity: 0; }
}

/* =========================================================
   CARD ICONS — two-tone, not hairline
   ========================================================= */
.dr-meta__ico {
	width: 38px;
	height: 38px;
	border-radius: 11px;
	color: var(--dr-red);
	background: linear-gradient(160deg, rgba(211, 30, 61, .16), rgba(211, 30, 61, .06));
	border: 1px solid rgba(211, 30, 61, .22);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}
.dr-meta__ico svg { width: 19px; height: 19px; stroke-width: 1.5; }
.zib-dr .dr-hero__meta li { grid-template-columns: 38px 1fr; gap: 13px; }

/* =========================================================
   VOICES — steadier previews
   The play badge no longer changes opacity when a preview starts; that
   toggle was what made the badges flicker as clips came and went.
   ========================================================= */
.dr-clip.is-playing .dr-clip__play { opacity: 1; }
.dr-clip iframe { transition: opacity .65s ease; }
.dr-clip img { transition: opacity .65s ease; }

/* Keep the rails on their own compositor layer so a playing clip does not
   force the whole row to repaint every frame. */
.dr-marquee__track { transform: translateZ(0); backface-visibility: hidden; }
.dr-clip { contain: paint; }

/* Voices background: lighter than the near-black it was. */
.dr-voices { background: #1b1e24; }
.dr-hero { background: #1b1e24; }

/* =========================================================
   TITLE SHINE — the site's own effect, not an imitation
   Copied from Premium Addons' `pa-shinny-text`, which is what the homepage
   hero runs, with the same values that page uses: 7s, white base, red
   highlight, 125px band. The previous version painted the title a second
   time through a ::after and ran far too fast.
   ========================================================= */
.zib-dr .dr-shine::after { content: none; }   /* kill the old overlay */

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.zib-dr .dr-shine {
		--base-color: #ffffff;
		--shiny-color: #d31e3d;
		--animation-speed: 7s;

		background: var(--base-color)
		            linear-gradient(to right,
		                var(--base-color) 0%,
		                var(--shiny-color) 50%,
		                var(--base-color) 100%) 0 0 no-repeat;
		background-size: 125px;
		-webkit-background-clip: text;
		background-clip: text;
		color: rgba(255, 255, 255, 0);
		-webkit-text-fill-color: transparent;
		animation: pa-shinny-text var(--animation-speed) infinite;
	}

	/* "Room" keeps its red, with the highlight running white through it. */
	.zib-dr .dr-shine span {
		--base-color: #d31e3d;
		--shiny-color: #ffffff;
		background: inherit;
		background-image: linear-gradient(to right,
			var(--base-color) 0%, var(--shiny-color) 50%, var(--base-color) 100%);
		background-size: 125px;
		-webkit-background-clip: text;
		background-clip: text;
		color: rgba(255, 255, 255, 0);
		-webkit-text-fill-color: transparent;
		animation: pa-shinny-text var(--animation-speed) infinite;
	}
}

@keyframes pa-shinny-text {
	0%   { background-position: 0; }
	100% { background-position: 200%; }
}

@media (prefers-reduced-motion: reduce) {
	.zib-dr .dr-shine,
	.zib-dr .dr-shine span { animation: none; }
}

/* =========================================================
   BUTTONS — match the site
   The site's buttons go red -> white with black text on hover. Mine were
   darkening, lifting and casting a shadow, which is a different language
   from every other page.
   ========================================================= */
.zib-dr .dr-btn {
	border-radius: 30px;
	border-width: 2px;
	transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.zib-dr .dr-btn:hover,
.zib-dr .dr-btn--gold:hover {
	background-color: #ffffff;
	border-color: #ffffff;
	color: #000000;
	transform: none;
	box-shadow: none;
}
.zib-dr .dr-btn:active { transform: none; }

/* On light sections a white fill would vanish, so those keep a visible edge. */
.dr-apply .dr-btn:hover,
.dr-final .dr-btn:hover,
.dr-formwrap .dr-btn:hover {
	background-color: #ffffff;
	border-color: var(--dr-red);
	color: #000000;
}

.dr-hero .dr-btn--ghost:hover { background-color: #fff; border-color: #fff; color: #000; }

/* =========================================================
   CARD ICONS — cleaner glyphs, quieter container
   ========================================================= */
.dr-meta__ico {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: var(--dr-red);
	background: transparent;
	border: 1.5px solid rgba(211, 30, 61, .28);
	box-shadow: none;
}
.dr-meta__ico svg {
	width: 18px;
	height: 18px;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.zib-dr .dr-hero__meta li { grid-template-columns: 40px 1fr; gap: 14px; align-items: center; }

/* =========================================================
   VOICES — photograph behind the rails
   Same treatment as the hero: the room, blurred and darkened, so the section
   is not a flat black slab but still lets the clips sit forward.
   ========================================================= */
.dr-voices {
	position: relative;
	background: #1b1e24;
	overflow: hidden;
	isolation: isolate;
}
.dr-voices::before {
	content: "";
	position: absolute;
	inset: -40px;
	z-index: -2;
	background: url("/wp-content/uploads/2025/07/6-min.jpg") center 30% / cover no-repeat;
	filter: blur(6px) saturate(.9) brightness(.9);
	transform: scale(1.06);
}
.dr-voices::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(16,18,22,.90) 0%, rgba(16,18,22,.78) 30%,
		                        rgba(16,18,22,.78) 70%, rgba(16,18,22,.90) 100%),
		radial-gradient(120% 120% at 50% 50%, transparent 30%, rgba(8,9,12,.6) 100%);
}
.dr-voices > * { position: relative; z-index: 1; }

/* Only two players run now, so the clips can afford a little more presence. */
.zib-dr .dr-clip {
	border-color: rgba(255, 255, 255, .14);
	box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
}

/* Cross-fade still -> video, and never animate a clip that is not playing. */
.dr-clip img     { transition: opacity .45s ease; }
.dr-clip iframe  { transition: opacity .45s ease; }
.dr-clip:not(.is-playing) iframe { opacity: 0; }

/* Isolate each rail on its own layer so a playing tile repaints alone. */
.dr-marquee__row { contain: layout paint; }

/* =========================================================
   TITLE SHINE — one gradient across both lines
   The span had its own background and its own animation. background-position
   is a percentage of (element width − band width), so the narrow word "Room"
   swept its band far faster than the wide first line and the two never lined
   up. The homepage runs the effect on a single element; do the same and let
   "Room" be painted by the parent's gradient, so one band crosses both lines.
   ========================================================= */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.zib-dr .dr-shine span {
		background: none;
		background-image: none;
		animation: none;
		-webkit-text-fill-color: inherit;
		color: inherit;
	}
}

/* =========================================================
   Apply button — red outline and red label on hover
   ========================================================= */
.zib-dr .dr-formwrap .dr-btn:hover,
.zib-dr .dr-hero__card .dr-btn:hover {
	background-color: #ffffff;
	border-color: var(--dr-red);
	color: var(--dr-red);
}

/* =========================================================
   HERO CARD — seats block owns the full height of the header row
   The figure now sets the height of the row and the price sits centred
   against it, so the two halves read as one band rather than two stacked
   fragments. Label goes back to the quieter grey it had before.
   ========================================================= */
.dr-card__top { align-items: stretch; }

.zib-dr .dr-seats {
	display: flex;
	align-items: center;
	gap: 14px;
	height: 100%;
}
.zib-dr .dr-seats strong {
	font-size: clamp(54px, 9.4svh, 86px);
	line-height: .82;
	font-weight: 700;
	letter-spacing: -.03em;
	color: var(--dr-red);
}
.zib-dr .dr-seats span {
	font-size: clamp(11px, 1.45svh, 12px);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--dr-mute);
}

.zib-dr .dr-price {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
}

/* Label scaled so its two lines stand as tall as the figure beside them.
   Weight stays at 500 and the tracking is pulled in — at this size the wide
   letter-spacing that suited 11px would read as heavy and push the words
   past the card. */
.zib-dr .dr-seats span {
	/* Two lines at 1.25 occupy 2.5x the font size; the figure occupies 0.82x
	   its own. Matching the two gives label = 0.33 x figure, which is where
	   3.1svh and the 28px ceiling come from — they track the same clamp. */
	font-size: clamp(18px, 3.1svh, 28px);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: .04em;
	color: var(--dr-mute);
}

/* =========================================================
   CARD ICONS — solid marks, properly centred
   The glyphs were outline strokes, which at 18px read as faint scratches,
   and the SVG was an inline element so its baseline gap pushed it off the
   centre of the circle. Filled shapes, and the svg made a block inside a
   flex box so it sits dead centre.
   ========================================================= */
.dr-meta__ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	border-radius: 50%;
	color: var(--dr-red);
	background: var(--dr-red-tint);
	border: 1px solid rgba(211, 30, 61, .2);
	line-height: 0;                 /* no inline leading to offset the glyph */
}
.dr-meta__ico svg {
	display: block;
	width: 18px;
	height: 18px;
	fill: currentColor;
	stroke: none;                   /* these are filled marks, not outlines */
}

/* =========================================================
   FOUNDER VOICES — the hero's own treatment
   Reuses the same photograph, blur and darkening pass as the hero so the two
   dark sections are unmistakably the same surface.
   ========================================================= */
.dr-voices::before {
	filter: blur(5px) saturate(.95) brightness(.92);
	background-position: center 40%;
}
.dr-voices::after {
	background:
		linear-gradient(100deg, rgba(14,16,20,.86) 0%, rgba(14,16,20,.72) 38%,
		                        rgba(14,16,20,.46) 70%, rgba(14,16,20,.34) 100%),
		radial-gradient(120% 130% at 50% 45%, transparent 34%, rgba(8,9,12,.55) 100%),
		radial-gradient(70% 100% at 10% 45%, rgba(211,30,61,.16) 0%, transparent 60%);
}

/* ---- founder name on a clip ---- */
.dr-clip__name {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 26px 14px 11px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .01em;
	text-align: left;
	color: #fff;
	background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.5) 55%, transparent 100%);
	pointer-events: none;
}

/* The label rule is written as `.dr-hero__meta span`, and the icon wrapper is
   a span too — so it was inheriting the label's grey, its block display and
   its bottom margin, which is what pushed the glyph off centre and drained
   the colour. Match that specificity and reset what leaked in. */
.zib-dr .dr-hero__meta li .dr-meta__ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	font-size: 0;
	letter-spacing: normal;
	text-transform: none;
	line-height: 0;
	color: var(--dr-red);
	background: var(--dr-red-tint);
	border: 1px solid rgba(211, 30, 61, .2);
	border-radius: 50%;
}
.zib-dr .dr-hero__meta li .dr-meta__ico svg {
	display: block;
	width: 18px;
	height: 18px;
	fill: var(--dr-red);
	stroke: none;
}

/* Voices: a touch more weight in the darkening and the vignette, so the clips
   sit further forward than the room behind them. */
.dr-voices::after {
	background:
		linear-gradient(100deg, rgba(12,14,18,.90) 0%, rgba(12,14,18,.80) 38%,
		                        rgba(12,14,18,.60) 70%, rgba(12,14,18,.50) 100%),
		radial-gradient(115% 125% at 50% 45%, transparent 26%, rgba(6,7,10,.72) 100%),
		radial-gradient(70% 100% at 10% 45%, rgba(211,30,61,.14) 0%, transparent 60%);
}

/* =========================================================
   RESPONSIVE — content first
   Earlier tiers forced the hero into one screen by deleting whatever did not
   fit: the lede, the stat row, and on short laptops the date, time and venue.
   Losing the venue to save 90px is a bad trade — that is the event.

   Nothing is hidden any more. The type and spacing still scale with the
   viewport, so on most screens it fills exactly one frame; where it genuinely
   cannot, the hero simply runs a little longer and the page scrolls, which is
   what a page is supposed to do.
   ========================================================= */
.zib-dr .dr-hero__lede,
.zib-dr .dr-hero__stats,
.zib-dr .dr-hero__tag,
.zib-dr .dr-hero__meta,
.zib-dr .dr-hero__meta i { display: revert; }

.zib-dr .dr-hero__lede  { display: block; }
.zib-dr .dr-hero__stats { display: grid; }
.zib-dr .dr-hero__tag   { display: block; }
.zib-dr .dr-hero__meta  { display: block; }
.zib-dr .dr-hero__meta i { display: block; }

/* A viewport-height floor, not a ceiling: fill the screen when there is room,
   grow past it when there is not. */
.dr-hero {
	min-height: calc(100svh - var(--dr-headerH, 92px));
	height: auto;
	padding-block: clamp(20px, 3svh, 44px);
}

/* Short screens: tighten the rhythm instead of removing lines. */
@media (max-height: 760px) {
	.zib-dr .dr-hero__title  { font-size: clamp(28px, 6svh, 46px); }
	.zib-dr .dr-hero__sub    { margin-top: 10px; padding-top: 10px; font-size: 15px !important; }
	.zib-dr .dr-hero__lede   { margin-top: 8px; font-size: 14px !important; line-height: 1.55; }
	.zib-dr .dr-hero__cta    { margin-top: 14px; }
	.zib-dr .dr-hero__stats  { margin-top: 12px; padding: 10px 0; }
	.zib-dr .dr-hero__stats b { font-size: clamp(20px, 3.2svh, 26px); }
	.zib-dr .dr-hero__tag    { margin-top: 10px; padding-top: 8px; }
	.zib-dr .dr-hero__card   { padding: 16px; }
	.zib-dr .dr-seats strong { font-size: clamp(38px, 6.5svh, 52px); }
	.zib-dr .dr-price__now   { font-size: clamp(22px, 3.6svh, 28px); }
	.zib-dr .dr-hero__meta li { padding: 7px 0; }
	.zib-dr .dr-meta__ico    { width: 32px; height: 32px; flex-basis: 32px; }
	.zib-dr .dr-hero__meta li { grid-template-columns: 32px 1fr; gap: 11px; }
	.zib-dr .dr-meta__ico svg { width: 15px; height: 15px; }
	.dr-hero__card .dr-btn   { margin-top: 12px; }
}

/* =========================================================
   MOBILE POLISH
   ========================================================= */

/* "10:30 AM" was breaking across two lines in the timeline column. */
.zib-dr .dr-time { white-space: nowrap; }

/* Small screens keep the stills and skip the muted previews. YouTube paints
   its own title bar and logo over a small embed, which looks cluttered at this
   width, mobile browsers block muted autoplay as often as not, and it is
   somebody's mobile data. The clip still opens and plays on tap. */
@media (max-width: 760px) {
	.dr-clip iframe { display: none; }
	.dr-clip img    { opacity: 1 !important; }
	.dr-clip__play  { opacity: 1 !important; }
}

@media (max-width: 560px) {
	/* One clear line per stat rather than three cramped columns. */
	.zib-dr .dr-hero__stats { grid-template-columns: repeat(3, 1fr); gap: 0; }
	.zib-dr .dr-hero__stats span { font-size: 9px; letter-spacing: .04em; }
	.zib-dr .dr-hero__stats li { padding: 0 8px; }

	.zib-dr .dr-clip { width: 78vw; }
	.zib-dr .dr-clip__name { font-size: 12px; padding: 22px 12px 9px; }

	/* Facts list reads as label-above-value instead of squeezing side by side. */
	.zib-dr .dr-apply__facts li { flex-direction: column; align-items: flex-start; gap: 2px; }
	.zib-dr .dr-apply__facts b  { text-align: left; }
}

/* Stacked into one column, the numerals and copy read better centred — the
   left-aligned rag only made sense while they sat side by side as columns. */
@media (max-width: 700px) {
	.zib-dr .dr-takeaways > div { text-align: center; }
	.zib-dr .dr-takeaways span  { margin-left: auto; margin-right: auto; }
	.zib-dr .dr-takeaways h3,
	.zib-dr .dr-takeaways p     { text-align: center; }
}