/* =========================================================================
   Designs By Nhyi — Homepage (editorial scroll experience)
   Loaded only on the front page. Builds on main.css tokens.
   ========================================================================= */

/* ----- Section index labels ----- */
.dbn-sectionno {
	display: inline-block; font-family: var(--dbn-sans); font-weight: 500;
	font-size: var(--dbn-fs-2xs); letter-spacing: 0.24em; text-transform: uppercase;
	color: var(--dbn-blue); margin-bottom: 1.5rem;
}
.dbn-sectionno--light { color: var(--dbn-sky); }

/* =========================================================================
   1 — KINETIC HERO
   ========================================================================= */
.dbn-xhero {
	position: relative;
	padding-top: clamp(3rem, 8vh, 6rem);
	padding-bottom: clamp(2rem, 5vh, 4rem);
	/* Clip the oversized monogram horizontally without creating a scroll
	   container that would disable the hero montage's sticky positioning. */
	overflow-x: clip;
	overflow-y: visible;
}
.dbn-xhero__mark {
	position: absolute; top: -6vw; right: -2vw; z-index: 0; pointer-events: none; user-select: none;
	font-family: var(--dbn-serif); font-weight: 500; font-size: 48vw; line-height: 0.8;
	color: rgba(4, 72, 159, 0.06);
}
.dbn-xhero__mark--symbol {
	width: min(42vw, 560px);
	aspect-ratio: 1;
	top: clamp(2rem, 6vw, 5rem);
	right: clamp(-5rem, -4vw, -2rem);
	display: block;
	opacity: 0.08;
}
.dbn-xhero__mark--symbol img { width: 100%; height: 100%; object-fit: contain; }
.dbn-xhero__inner { position: relative; z-index: 1; }
.dbn-xhero__text { max-width: 820px; }
.dbn-xhero__eyebrow { display: block; }
.dbn-xhero__title {
	font-size: clamp(2.6rem, 7.5vw, 6.2rem); line-height: 0.98; letter-spacing: -0.02em;
	margin: 0 0 0.4em; max-width: 16ch;
}
.dbn-xhero__rotate-line { font-family: var(--dbn-serif); font-size: clamp(1.3rem, 2.6vw, 2rem); color: var(--dbn-blue); margin: 0 0 1.2rem; }
.dbn-xhero__rotate-prefix { color: var(--dbn-muted); }
.dbn-xhero__rotate {
	display: inline-block; position: relative; color: var(--dbn-blue); font-style: italic;
	transition: opacity var(--dbn-dur-md) var(--dbn-ease), transform var(--dbn-dur-md) var(--dbn-ease);
	min-width: 5ch;
}
.dbn-xhero__rotate.is-swapping { opacity: 0; transform: translateY(-0.3em); }
.dbn-xhero__sub { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--dbn-muted); max-width: 48ch; }
.dbn-xhero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.8rem; }

/* scroll cue */
.dbn-scrollcue { position: absolute; right: var(--dbn-gutter); bottom: 0; display: inline-flex; flex-direction: column; align-items: center; gap: 0.6rem; color: var(--dbn-blue); }
.dbn-scrollcue__text { writing-mode: vertical-rl; font-size: var(--dbn-fs-2xs); letter-spacing: 0.22em; text-transform: uppercase; }
.dbn-scrollcue__line { width: 1px; height: 56px; background: var(--dbn-blue); position: relative; overflow: hidden; }
.dbn-scrollcue__line::after { content: ""; position: absolute; inset: 0; background: var(--dbn-white); animation: dbn-cue 1.8s var(--dbn-ease) infinite; }
@keyframes dbn-cue { 0% { transform: translateY(-100%); } 60%,100% { transform: translateY(100%); } }

/* hero load reveal (staggered) — only hidden when JS is present (.dbn-js) */
.dbn-js .dbn-xhero__eyebrow, .dbn-js .dbn-xhero__title, .dbn-js .dbn-xhero__rotate-line, .dbn-js .dbn-xhero__sub, .dbn-js .dbn-xhero__actions {
	opacity: 1; transform: translateY(12px);
	transition: transform 0.55s var(--dbn-ease);
}
.dbn-xhero.is-loaded .dbn-xhero__eyebrow { transform: none; transition-delay: 0.02s; }
.dbn-xhero.is-loaded .dbn-xhero__title { transform: none; transition-delay: 0.07s; }
.dbn-xhero.is-loaded .dbn-xhero__rotate-line { transform: none; transition-delay: 0.12s; }
.dbn-xhero.is-loaded .dbn-xhero__sub { transform: none; transition-delay: 0.17s; }
.dbn-xhero.is-loaded .dbn-xhero__actions { transform: none; transition-delay: 0.22s; }

/* The Studio stage: a framed typographic panel that rises over the pinned
   hero, expands to full bleed, and fills the manifesto in word by word
   (home.js initStudioStage drives it — one shared progress read). The stage
   is 200vh so the word beat has room after the frame opens. */
.dbn-xhero__visual-stage { position: relative; height: 200vh; margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.dbn-xhero__visual-sticky {
	position: sticky; top: var(--dbn-header-h); height: calc(100svh - var(--dbn-header-h));
	display: grid; place-items: center; overflow: hidden;
}
.dbn-xhero__band {
	--dbn-frame-x: 13vw;
	--dbn-frame-y: 15vh;
	--dbn-frame-radius: 24px;
	position: relative; width: 100vw; height: 86vh;
	border-radius: var(--dbn-frame-radius); overflow: hidden;
	display: grid; place-items: center;
	box-shadow: 0 24px 70px -36px rgba(4,72,159,0.65);
	clip-path: inset(var(--dbn-frame-y) var(--dbn-frame-x) round var(--dbn-frame-radius));
	/* A lit surface, not a flat fill: sky glow above, deep pooling below. */
	background:
		radial-gradient(90% 130% at 50% 0%, rgba(207, 247, 255, 0.16), transparent 55%),
		radial-gradient(120% 120% at 50% 100%, rgba(11, 73, 160, 0.55), transparent 62%),
		linear-gradient(165deg, var(--dbn-blue-deep), #052a5c 55%, #041f45);
}
/* Fine film grain so the panel reads as material. */
.dbn-xhero__band::after {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	opacity: 0.1; mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 160px 160px;
}
/* Ghost monogram watermark. The supplied secondary logo is used as an alpha
   mask so the silhouette inherits the stage's original pale-sky watermark
   colour exactly; no colour is baked into or destructively applied to the PNG. */
.dbn-xhero__band-mark {
	position: absolute; inset: 0; z-index: 0;
	pointer-events: none; user-select: none;
	background-color: rgba(207, 247, 255, 0.075);
	-webkit-mask-image: url("../images/dbn-symbol.png");
	mask-image: url("../images/dbn-symbol.png");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	/* The source PNG's visible alpha is 557px tall inside a 1563px canvas.
	   Multiplying the former clamp(12rem, 44vh, 26rem) text scale by
	   1563 / 557 preserves that watermark's visible height. */
	-webkit-mask-size: clamp(33.7rem, 123.5vh, 73rem) auto;
	mask-size: clamp(33.7rem, 123.5vh, 73rem) auto;
}

/* The Studio content column. Padded so the copy stays inside the frame's
   initial clip window while it rises, and keeps a stately measure at bleed. */
.dbn-studio {
	position: relative; z-index: 2;
	display: flex; flex-direction: column; align-items: center; text-align: center;
	gap: clamp(1.1rem, 3vh, 1.9rem);
	padding: clamp(5rem, 17vh, 11rem) clamp(2rem, 15vw, 15rem);
}
.dbn-studio .dbn-sectionno { margin-bottom: 0; }
.dbn-studio__statement {
	font-family: var(--dbn-serif);
	font-size: clamp(1.7rem, 1.2rem + 2vw, 2.9rem);
	line-height: 1.35; letter-spacing: -0.01em;
	max-width: 34ch; margin: 0; text-wrap: balance;
	color: #fff;
}
/* Words are lit by default (no-JS and reduced/off motion read the full
	statement); only a JS-driven desktop/phone stage starts them as ghosts. */
.dbn-studio__word { transition: color 0.45s var(--dbn-ease); }
.is-kinetic .dbn-studio__word { color: rgba(255, 255, 255, 0.24); }
.is-kinetic .dbn-studio__word.is-on { color: #fff; }
/* The closing word is the typographic payoff — accent serif, sky, italic. */
.dbn-studio__word--accent { font-family: var(--dbn-accent-serif); font-style: italic; color: var(--dbn-sky); }
.is-kinetic .dbn-studio__word--accent.is-on { color: var(--dbn-sky); }
.dbn-studio__foot { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; max-width: 52ch; }
.dbn-studio__note { color: rgba(207, 247, 255, 0.85); font-size: var(--dbn-fs-md); margin: 0; }
.is-kinetic .dbn-studio__foot {
	opacity: 0; transform: translateY(14px);
	transition: opacity 0.5s var(--dbn-ease), transform 0.5s var(--dbn-ease);
}
.is-kinetic .dbn-studio__foot.is-in { opacity: 1; transform: none; }
/* Cinematic phone homepage (v1.21.0). Full-motion phones use the same
   owner-controlled content as desktop, composed as tactile scroll scenes. */
@media (max-width: 820px) and (prefers-reduced-motion: no-preference) {
	html.dbn-mobile-cinematic .dbn-xhero__screen { overflow: clip; }
	html.dbn-mobile-cinematic .dbn-xhero__bg { clip-path: inset(0); }
	html.dbn-mobile-cinematic .dbn-xhero__bg-inner { inset: -8% -3%; transform-origin: 54% 46%; transition: transform 1.4s var(--dbn-motion-ease); }
	html.dbn-mobile-cinematic .dbn-xhero__mark {
		opacity: 0.12;
		transform: translate3d(calc(var(--dbn-page-progress,0) * -18px),calc(var(--dbn-page-progress,0) * 22px),0) rotate(calc(var(--dbn-page-progress,0) * -5deg));
	}
	html.dbn-mobile-cinematic .dbn-xhero__eyebrow,
	html.dbn-mobile-cinematic .dbn-xhero__title,
	html.dbn-mobile-cinematic .dbn-xhero__rotate-line,
	html.dbn-mobile-cinematic .dbn-xhero__sub,
	html.dbn-mobile-cinematic .dbn-xhero__actions {
		opacity: 0;
		transform: translate3d(0,28px,0);
		transition: opacity 0.7s ease, transform 1s var(--dbn-motion-ease);
	}
	html.dbn-mobile-cinematic .dbn-xhero__eyebrow { transform: translate3d(-22px,0,0); }
	html.dbn-mobile-cinematic .dbn-xhero__title { transform: translate3d(0,42px,0) skewY(1.2deg); }
	html.dbn-mobile-cinematic .dbn-xhero__actions { transform: translate3d(0,32px,0) scale(0.97); }
	html.dbn-mobile-cinematic .dbn-xhero.is-loaded .dbn-xhero__eyebrow,
	html.dbn-mobile-cinematic .dbn-xhero.is-loaded .dbn-xhero__title,
	html.dbn-mobile-cinematic .dbn-xhero.is-loaded .dbn-xhero__rotate-line,
	html.dbn-mobile-cinematic .dbn-xhero.is-loaded .dbn-xhero__sub,
	html.dbn-mobile-cinematic .dbn-xhero.is-loaded .dbn-xhero__actions { opacity: 1; transform: none; }
	html.dbn-mobile-cinematic .dbn-xhero.is-loaded .dbn-xhero__eyebrow { transition-delay: 0.12s; }
	html.dbn-mobile-cinematic .dbn-xhero.is-loaded .dbn-xhero__title { transition-delay: 0.2s; }
	html.dbn-mobile-cinematic .dbn-xhero.is-loaded .dbn-xhero__rotate-line { transition-delay: 0.36s; }
	html.dbn-mobile-cinematic .dbn-xhero.is-loaded .dbn-xhero__sub { transition-delay: 0.44s; }
	html.dbn-mobile-cinematic .dbn-xhero.is-loaded .dbn-xhero__actions { transition-delay: 0.54s; }
	html.dbn-mobile-cinematic .dbn-xhero__rotate.is-swapping { transform: translate3d(0,-0.45em,0) rotate(-1deg); filter: blur(4px); }
	html.dbn-mobile-cinematic .dbn-xhero__actions .dbn-btn:active { transform: scale(0.96); }

	/* Studio becomes a full mobile scroll scene: frame opening, word lighting,
	   watermark drift and a deliberately late CTA landing. */
	html.dbn-mobile-cinematic .dbn-xhero__visual-stage { height: 230svh; margin-top: clamp(1.5rem,5svh,3rem); }
	html.dbn-mobile-cinematic .dbn-xhero__visual-sticky {
		position: sticky; top: var(--dbn-header-h); height: calc(100svh - var(--dbn-header-h));
		display: grid; place-items: center; overflow: hidden;
	}
	html.dbn-mobile-cinematic .dbn-xhero__band {
		width: 100vw !important; height: 100% !important;
		border-radius: var(--dbn-frame-radius) !important;
		clip-path: inset(var(--dbn-frame-y) var(--dbn-frame-x) round var(--dbn-frame-radius)) !important;
		box-shadow: 0 38px 100px -45px rgba(1,28,64,0.95);
		background: radial-gradient(85% 65% at 20% 0%,rgba(207,247,255,0.2),transparent 66%),
			radial-gradient(80% 80% at 92% 100%,rgba(29,111,212,0.34),transparent 72%),
			linear-gradient(155deg,#062d63 0%,#031e43 62%,#02162f 100%);
	}
	html.dbn-mobile-cinematic .dbn-xhero__band::before {
		content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
		background: linear-gradient(115deg,transparent 28%,rgba(207,247,255,0.08) 48%,transparent 66%);
		transform: translate3d(calc(-70% + (var(--dbn-studio-p,0) * 140%)),0,0);
	}
	html.dbn-mobile-cinematic .dbn-xhero__band-mark {
		background-color: rgba(207,247,255,calc(0.045 + (var(--dbn-studio-p,0) * 0.07)));
		-webkit-mask-size: clamp(36rem,150vw,48rem) auto; mask-size: clamp(36rem,150vw,48rem) auto;
		transform: translate3d(calc((0.5 - var(--dbn-studio-p,0)) * 26px),calc((0.5 - var(--dbn-studio-p,0)) * -20px),0)
			rotate(calc((var(--dbn-studio-p,0) - 0.5) * 4deg)) scale(calc(0.92 + (var(--dbn-studio-p,0) * 0.08)));
	}
	html.dbn-mobile-cinematic .dbn-studio {
		min-height: 100%; justify-content: center; gap: clamp(0.85rem,2.4svh,1.35rem);
		padding: clamp(2rem,6svh,3.5rem) clamp(1.5rem,7vw,2.2rem);
	}
	html.dbn-mobile-cinematic .dbn-studio .dbn-sectionno {
		opacity: calc(0.45 + (var(--dbn-studio-p,0) * 0.55));
		transform: translate3d(0,calc((1 - var(--dbn-studio-p,0)) * 14px),0);
	}
	html.dbn-mobile-cinematic .dbn-studio__statement {
		font-size: clamp(1.65rem,7.25vw,2.35rem); line-height: 1.25; max-width: 22ch;
		text-shadow: 0 12px 34px rgba(0,0,0,0.18);
	}
	html.dbn-mobile-cinematic .is-kinetic .dbn-studio__word { color: rgba(255,255,255,0.18); transition: color 0.42s ease,text-shadow 0.55s ease; }
	html.dbn-mobile-cinematic .is-kinetic .dbn-studio__word.is-on { color: #fff; text-shadow: 0 0 22px rgba(207,247,255,0.12); }
	html.dbn-mobile-cinematic .is-kinetic .dbn-studio__word--accent.is-on { color: var(--dbn-sky); text-shadow: 0 0 24px rgba(207,247,255,0.22); }
	html.dbn-mobile-cinematic .is-kinetic .dbn-studio__foot { transform: translate3d(0,28px,0) scale(0.96); filter: blur(6px); }
	html.dbn-mobile-cinematic .is-kinetic .dbn-studio__foot.is-in { transform: none; filter: none; }

	/* Editorial chapters gain a mobile focus beat without changing content. */
	html.dbn-mobile-cinematic .dbn-marquee { box-shadow: 0 14px 50px -36px rgba(4,72,159,0.6); }
	html.dbn-mobile-cinematic .dbn-srow {
		transform: translate3d(0,28px,0) scale(0.975); opacity: 0.72;
		transition: transform 0.9s var(--dbn-motion-ease),opacity 0.65s ease;
	}
	html.dbn-mobile-cinematic .dbn-srow.is-active,
	html.dbn-mobile-cinematic .dbn-srow.is-visible { transform: none; opacity: 1; }
	html.dbn-mobile-cinematic .dbn-srow__media { overflow: hidden; border-radius: var(--dbn-mobile-radius,22px); box-shadow: 0 28px 72px -48px rgba(4,72,159,0.85); }
	html.dbn-mobile-cinematic .dbn-srow__media-inner { transform: scale(1.055); transition: transform 1.2s var(--dbn-motion-ease); }
	html.dbn-mobile-cinematic .dbn-srow.is-active .dbn-srow__media-inner { transform: scale(1); }
	html.dbn-mobile-cinematic .dbn-world { overflow: clip; }
	html.dbn-mobile-cinematic .dbn-worldmarquee { transform: rotate(-0.45deg) scale(1.015); }
	html.dbn-mobile-cinematic .dbn-worldmarquee--right { transform: rotate(0.45deg) scale(1.015); }
	html.dbn-mobile-cinematic .dbn-worldtile:active { transform: scale(0.97); }
	html.dbn-mobile-cinematic .dbn-feature { min-height: max(720px,100svh); display: grid; align-items: center; overflow: clip; }
	html.dbn-mobile-cinematic .dbn-feature__bg-inner { inset: -8%; }
	html.dbn-mobile-cinematic .dbn-feature__stack > * { transition: transform 0.35s linear; }
	html.dbn-mobile-cinematic .dbn-foundri-preview .dbn-grid,
	html.dbn-mobile-cinematic .dbn-voices .dbn-testimonials {
		mask-image: linear-gradient(90deg,transparent 0,#000 var(--dbn-gutter),#000 calc(100% - var(--dbn-gutter)),transparent 100%);
	}
	html.dbn-mobile-cinematic .dbn-bigcta {
		min-height: max(570px,72svh); display: grid; align-items: center;
		background: radial-gradient(70% 55% at 50% 100%,rgba(207,247,255,0.15),transparent),linear-gradient(145deg,var(--dbn-blue-deep),#052b60 55%,#021a39);
	}
}

@media (max-width: 820px) and (max-height: 680px) and (prefers-reduced-motion: no-preference) {
	html.dbn-mobile-cinematic .dbn-studio { padding-block: 1.4rem; gap: 0.72rem; }
	html.dbn-mobile-cinematic .dbn-studio__statement { font-size: clamp(1.45rem,6vw,1.85rem); line-height: 1.2; }
	html.dbn-mobile-cinematic .dbn-studio__note { font-size: var(--dbn-fs-sm); line-height: 1.4; }
	html.dbn-mobile-cinematic .dbn-studio__foot { gap: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
	.dbn-studio__word, .is-kinetic .dbn-studio__foot { transition: none; }
}

/* Static stage for tablets/compact fallbacks and reduced motion. The
   full-motion phone rules below intentionally override this normal-flow
   treatment with their own sticky scene. */
@media (max-width: 1180px), (prefers-reduced-motion: reduce) {
	.dbn-xhero__visual-stage { height: auto; }
	.dbn-xhero__visual-sticky { position: static; height: auto; overflow: visible; }
	.dbn-xhero__band { width: 100%; height: auto; clip-path: none; border-radius: var(--dbn-radius-lg); }
}
.dbn-motion-off .dbn-xhero__visual-stage { height: auto; }
.dbn-motion-off .dbn-xhero__visual-sticky { position: static; height: auto; overflow: visible; }
.dbn-motion-off .dbn-xhero__band { width: 100%; height: auto; clip-path: none; border-radius: var(--dbn-radius-lg); }

/* -------------------------------------------------------------------------
   Full-bleed hero background: looping video / editable image / placeholder.
   The intro screen sits over the media; the montage below is unaffected.
   ------------------------------------------------------------------------- */
.dbn-xhero--media { padding-top: 0; }
.dbn-xhero__screen { position: relative; }
.dbn-xhero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--dbn-blue-deep); }
.dbn-xhero__bg-inner { position: absolute; inset: -6% 0; }
.dbn-xhero__bg .dbn-media,
.dbn-xhero__bg .dbn-ph { width: 100%; height: 100%; border: 0; border-radius: 0; }
.dbn-xhero__bg .dbn-media__img { width: 100%; height: 100%; object-fit: cover; }

/* The hero screen owns the first viewport exactly. The header floats over
   the hero's top edge (v1.12.4), so 100svh already accounts for the bar —
   sizing never stacks vh on top of the header height. The inner is the
   screen's only in-flow child, so sizing it sizes the media behind it too.
   Top inset clears the floating header (single source: --dbn-header-h). */
.dbn-xhero--media .dbn-xhero__inner {
	min-height: min(94svh, 900px); /* no-JS fallback keeps a full hero */
	display: flex; flex-direction: column; justify-content: center;
	padding-top: calc(var(--dbn-header-h) + clamp(1rem, 3.5vh, 2.75rem));
	padding-bottom: clamp(1.5rem, 4vh, 3.5rem);
}
/* Desktop fit: exactly one viewport, with a 600px floor for short or zoomed
   windows — the composition is capped by the type/spacing clamps below, not
   by shrinking the full-bleed media. */
@media (min-width: 1181px) {
	.dbn-js .dbn-xhero--media .dbn-xhero__inner { height: max(100svh, 600px); min-height: 0; }
}
/* Tablet/mobile: normal flow — about one screen when it fits, free to grow
   so stacked content is never cramped or clipped. */
@media (max-width: 1180px) {
	.dbn-js .dbn-xhero--media .dbn-xhero__inner { min-height: max(92svh, 560px); }
}
.dbn-xhero--media .dbn-xhero__mark { display: none; }
.dbn-xhero--media .dbn-xhero__eyebrow { color: var(--dbn-sky); }
.dbn-xhero--media .dbn-xhero__title { color: #fff; }
.dbn-xhero--media .dbn-xhero__rotate-line { color: rgba(255,255,255,0.92); }
.dbn-xhero--media .dbn-xhero__rotate-prefix { color: rgba(255,255,255,0.7); }
.dbn-xhero--media .dbn-xhero__rotate { color: var(--dbn-sky); }
.dbn-xhero--media .dbn-xhero__sub { color: rgba(255,255,255,0.85); }
.dbn-xhero--media .dbn-scrollcue { color: rgba(255,255,255,0.85); }
.dbn-xhero--media .dbn-scrollcue__line { background: rgba(255,255,255,0.55); }
.dbn-xhero--media .dbn-scrollcue__line::after { background: #fff; }
/* Outline button needs a light border/label to survive on the dark hero. */
.dbn-xhero--media .dbn-btn--secondary { --btn-fg: #fff; --btn-bd: rgba(255,255,255,0.7); }
.dbn-xhero--media .dbn-btn--secondary:hover { --btn-bg: #fff; --btn-fg: var(--dbn-blue-deep); --btn-bd: #fff; }

/* Viewport-fit composition: headline, rotate line, supporting copy, CTAs and
   scroll cue must all share the first screen. The long headline holds ~3
   lines on desktop (instead of 5-6 lines of ~99px type that pushed the CTA
   below the fold); spacing breathes with the viewport via vh-based clamps.
   Scoped to the media hero so the base .dbn-xhero scale is untouched. */
.dbn-xhero--media .dbn-xhero__text { max-width: min(100%, 960px); }
.dbn-xhero--media .dbn-xhero__title {
	font-size: clamp(2.5rem, 4.6vw + 0.2rem, 4.4rem);
	line-height: 0.98;
	max-width: 28ch;
	text-wrap: balance;
	margin: 0 0 clamp(0.5rem, 1.6vh, 1rem);
}
.dbn-xhero--media .dbn-xhero__rotate-line {
	font-size: clamp(1.15rem, 1.9vw, 1.6rem);
	margin: 0 0 clamp(0.7rem, 1.8vh, 1.1rem);
}
.dbn-xhero--media .dbn-xhero__sub {
	max-width: 52ch;
	font-size: clamp(1rem, 1.2vw, 1.2rem);
	line-height: 1.55;
	margin: 0;
}
.dbn-xhero--media .dbn-xhero__actions { margin-top: clamp(1.1rem, 2.8vh, 1.8rem); }
.dbn-xhero--media .dbn-xhero__actions .dbn-btn { min-height: 48px; font-size: clamp(0.95rem, 1vw, 1.05rem); }
.dbn-xhero--media .dbn-scrollcue { bottom: clamp(0.75rem, 2.5vh, 1.5rem); }

/* -------------------------------------------------------------------------
   Cinematic treatment: a slow Ken Burns push on the footage, fine film grain,
   an edge vignette and depth on the type. Tones are neutral near-black (a
   filmic grade, not a flat blue wash); legibility rides on the vignette edges
   and text shadow. All motion is reduced-motion aware.
   ------------------------------------------------------------------------- */
/* Slow Ken Burns push on the image/placeholder — the parallax stays on the
   wrapper, so the two layer into a subtle sense of depth. A looping video is
   left untouched so its own footage plays as composed. */
.dbn-xhero__bg-inner > .dbn-ph { transform-origin: 54% 46%; }
@media (prefers-reduced-motion: no-preference) {
	.dbn-xhero__bg-inner > .dbn-ph {
		animation: dbn-kenburns 30s ease-in-out infinite alternate;
		will-change: transform;
	}
}
@keyframes dbn-kenburns {
	from { transform: scale(1.04) translate3d(0, 0, 0); }
	to   { transform: scale(1.16) translate3d(-2%, -1.6%, 0); }
}

/* Clean film grain (::before) + directional graphite grade (::after). The
   grade is strongest behind the copy, preserves the focal artwork, and adds
   a restrained cool bloom rather than covering the whole image in blue. */
.dbn-xhero__bg::before,
.dbn-xhero__bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.dbn-xhero__bg::before {
	inset: -6%; /* oversized so the grain jitter never exposes an edge */
	z-index: 2; opacity: 0.05; mix-blend-mode: soft-light;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 180px 180px;
}
.dbn-xhero__bg::after {
	z-index: 3;
	background:
		linear-gradient(90deg, rgba(2,6,12,0.345) 0%, rgba(3,8,15,0.24) 39%, rgba(3,8,15,0.06) 72%, rgba(2,6,12,0.125) 100%),
		radial-gradient(circle at 76% 36%, rgba(145,207,232,0.11) 0%, transparent 31%),
		radial-gradient(135% 108% at 52% 40%, transparent 49%, rgba(1,4,9,0.24) 100%),
		linear-gradient(0deg, rgba(1,4,9,0.25) 0%, transparent 28%);
}

/* Depth on the type so the copy reads over any footage without a flat scrim. */
.dbn-xhero--media .dbn-xhero__eyebrow { letter-spacing: 0.24em; }
.dbn-xhero--media .dbn-xhero__title { text-shadow: 0 2px 44px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.32); }
.dbn-xhero--media .dbn-xhero__eyebrow,
.dbn-xhero--media .dbn-xhero__rotate-line,
.dbn-xhero--media .dbn-xhero__sub { text-shadow: 0 1px 20px rgba(0,0,0,0.42); }

/* -------------------------------------------------------------------------
   Homepage-only: the nav bar uses the hero media (image/photo/video) as its
   background. The hero tucks up under the transparent bar at rest; a soft
   top-down scrim keeps the nav legible over any media, and the standard
   solid bar returns the moment the page scrolls (is-stuck).

   Deliberate constraints:
   - The shared header treatment in motion.css keeps the Site Identity logo
     and renders that same asset white over media; it never swaps logos.
   - Gated behind html.dbn-js: without JavaScript the is-over-hero state can
     never be applied, so the hero must not hide under the solid bar.
   - Applies only when the hero media section exists (data-dbn-hero-cover).
   ------------------------------------------------------------------------- */
.dbn-js .dbn-xhero--media { margin-top: calc(-1 * var(--dbn-header-h)); }

/* -------------------------------------------------------------------------
   Sticky hero handoff (desktop only): the hero screen stays pinned while the
   framed montage rises over it (70svh of overlap travel), then the montage's
   own sticky morph takes over — one overlapping handoff, never two pinned
   stages at once. The montage morph only begins once its stage reaches the
   header (see initHeroMorph), so the frame rides up intact over the hero;
   the hero copy bows out via initHeroHandoff before the frame reaches it.
   Disabled below the nav collapse (normal flow) and under reduced-motion /
   motion-off, where the copy stays fully visible.
   ------------------------------------------------------------------------- */
@media (min-width: 1181px) and (prefers-reduced-motion: no-preference) {
	.dbn-js body:not(.dbn-motion-off) .dbn-xhero__pin {
		position: relative;
		min-height: calc(max(100svh, 600px) + 70svh);
	}
	.dbn-js body:not(.dbn-motion-off) .dbn-xhero__pin > .dbn-xhero__screen {
		position: sticky; top: 0;
	}
	/* Pull the montage stage up into the pin's extra travel so it slides
	   over the still-pinned hero (later sibling, paints above). */
	.dbn-js body:not(.dbn-motion-off) .dbn-xhero__visual-stage { margin-top: -70svh; }
}

/* =========================================================================
   2 — MARQUEE
   ========================================================================= */
.dbn-marquee { overflow: hidden; border-block: 1px solid var(--dbn-line); padding-block: 0.55rem; background: var(--dbn-sky); }
.dbn-marquee__track { display: flex; width: max-content; animation: dbn-marquee 34s linear infinite; }
.dbn-marquee:hover .dbn-marquee__track { animation-play-state: paused; }
.dbn-marquee__group { font-family: var(--dbn-accent-serif); font-size: clamp(1.08rem, 2vw, 1.7rem); color: var(--dbn-blue-deep); white-space: nowrap; padding-right: 1.4rem; }
.dbn-marquee__sep { display: none; }
@keyframes dbn-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* (Section 3, The Studio manifesto, lives inside the hero stage above.) */

/* =========================================================================
   4 — SERVICES as numbered editorial rows
   ========================================================================= */
.dbn-srows { padding-block: var(--dbn-section-y); }
.dbn-srows__head { margin-bottom: clamp(2rem, 4vw, 3.5rem); max-width: 720px; }
.dbn-srows__title { font-size: clamp(1.9rem, 4.5vw, 3.4rem); margin: 0; }
.dbn-srows__list { border-top: 1px solid var(--dbn-line); }
.dbn-srow {
	display: grid; grid-template-columns: 5rem 1fr 34%; gap: clamp(1.5rem, 3vw, 3rem);
	align-items: center; padding-block: clamp(2rem, 4vw, 3.2rem); border-bottom: 1px solid var(--dbn-line);
}
.dbn-srow__index { font-family: var(--dbn-serif); font-size: var(--dbn-fs-2xl); color: var(--dbn-blue); }
.dbn-srow__name { font-size: clamp(1.7rem, 3.8vw, 3rem); margin: 0 0 0.4em; transition: transform var(--dbn-dur-md) var(--dbn-ease), color var(--dbn-dur-md) var(--dbn-ease); }
.dbn-srow__desc { color: var(--dbn-muted); max-width: 46ch; margin: 0 0 1rem; }
.dbn-srow__media { overflow: hidden; border-radius: var(--dbn-radius); }
.dbn-srow__media-inner { transform: translate3d(0,0,0); }
.dbn-srow__art { --dbn-srow-object-position: center center; }
.dbn-srow__art .dbn-ph__media > img,
.dbn-srow__art .dbn-ph__media > picture,
.dbn-srow__art .dbn-ph__media > picture > img { object-position: var(--dbn-srow-object-position); }
.dbn-srow__art--fit-contain .dbn-ph__media {
	background:
		radial-gradient(circle at 18% 12%, rgba(207,247,255,0.9), transparent 58%),
		linear-gradient(145deg, var(--dbn-white), #eafaff);
}
.dbn-srow__art--fit-contain .dbn-ph__media > img,
.dbn-srow__art--fit-contain .dbn-ph__media > picture,
.dbn-srow__art--fit-contain .dbn-ph__media > picture > img { object-fit: contain; }
.dbn-srow__art--position-top { --dbn-srow-object-position: center 15%; }
.dbn-srow__art--position-bottom { --dbn-srow-object-position: center 85%; }
.dbn-srow__art--position-left { --dbn-srow-object-position: 15% center; }
.dbn-srow__art--position-right { --dbn-srow-object-position: 85% center; }
.dbn-srow__art--position-top-left { --dbn-srow-object-position: 15% 15%; }
.dbn-srow__art--position-top-right { --dbn-srow-object-position: 85% 15%; }
.dbn-srow__art--position-bottom-left { --dbn-srow-object-position: 15% 85%; }
.dbn-srow__art--position-bottom-right { --dbn-srow-object-position: 85% 85%; }
.dbn-srow:hover .dbn-srow__name { transform: translateX(0.4rem); color: var(--dbn-blue); }

/* Desktop: services become a restrained stack of full-screen chapters. */
@media (min-width: 821px) {
	.dbn-srows__list { border-top: 0; display: grid; gap: 1rem; }
	.dbn-srow {
		position: sticky; top: 88px; min-height: calc(100vh - 112px);
		grid-template-columns: 5rem minmax(0, 1.15fr) minmax(280px, 0.85fr);
		padding: clamp(2.5rem, 5vw, 4.5rem); border: 1px solid var(--dbn-line);
		border-radius: 24px; background: var(--dbn-white); overflow: hidden;
		box-shadow: 0 24px 70px -50px rgba(4,72,159,0.65);
	}
	.dbn-srow:nth-child(even) { background: var(--dbn-sky); }
	.dbn-srow:nth-child(3) { background: var(--dbn-blue-deep); color: var(--dbn-white); border-color: rgba(207,247,255,0.22); }
	.dbn-srow:nth-child(3) .dbn-srow__name,
	.dbn-srow:nth-child(3) .dbn-srow__desc { color: var(--dbn-white); }
	.dbn-srow:nth-child(3) .dbn-srow__index { color: var(--dbn-sky); }
	.dbn-srow:nth-child(3) .dbn-btn--ghost { --btn-fg: var(--dbn-sky); }
	.dbn-srow:nth-child(1) { z-index: 1; }
	.dbn-srow:nth-child(2) { z-index: 2; }
	.dbn-srow:nth-child(3) { z-index: 3; }
	.dbn-srow:nth-child(4) { z-index: 4; }
	.dbn-srow:nth-child(5) { z-index: 5; }
	.dbn-srow__media { height: min(66vh, 620px); opacity: 0.84; filter: grayscale(0.45); transition: opacity 0.7s var(--dbn-ease), filter 0.7s var(--dbn-ease); }
	.dbn-srow__media-inner, .dbn-srow__media-inner > * { height: 100%; }
	.dbn-srow.is-active .dbn-srow__media { opacity: 1; filter: grayscale(0); }
}

/* =========================================================================
   5 — THE WORK: image marquees
   ========================================================================= */
.dbn-world { padding-block: var(--dbn-section-y); overflow: hidden; }
.dbn-world__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.dbn-world__intro { color: var(--dbn-muted); max-width: 56ch; }
.dbn-worldmarquee { overflow: hidden; margin-bottom: clamp(0.8rem, 1.5vw, 1.4rem); touch-action: pan-y; }
.dbn-worldmarquee__track { display: flex; gap: clamp(0.8rem, 1.5vw, 1.4rem); width: max-content; animation: dbn-marquee 60s linear infinite; }
.dbn-js .dbn-world:not(.is-world-active) .dbn-worldmarquee__track { animation-play-state: paused; }
.dbn-worldmarquee--right .dbn-worldmarquee__track { animation-direction: reverse; }
.dbn-worldmarquee:hover .dbn-worldmarquee__track,
.dbn-worldmarquee:focus-within .dbn-worldmarquee__track { animation-play-state: paused; }
.dbn-worldtile { position: relative; flex: 0 0 clamp(220px, 24vw, 320px); display: block; color: inherit; }
.dbn-worldtile__cap {
	position: absolute; left: 0.8rem; bottom: 0.8rem; z-index: 2; color: #fff; font-size: var(--dbn-fs-xs);
	letter-spacing: 0.04em; opacity: 0; transform: translateY(6px);
	transition: opacity var(--dbn-dur-sm) var(--dbn-ease), transform var(--dbn-dur-sm) var(--dbn-ease);
	text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
.dbn-worldtile::after { content: ""; position: absolute; inset: 0; border-radius: var(--dbn-radius); background: linear-gradient(0deg, rgba(4,72,159,0.62), transparent 55%); opacity: 0; transition: opacity var(--dbn-dur-sm) var(--dbn-ease); }
.dbn-worldtile:hover .dbn-worldtile__cap, .dbn-worldtile:hover::after,
.dbn-worldtile:focus-visible .dbn-worldtile__cap, .dbn-worldtile:focus-visible::after { opacity: 1; transform: none; }

/* Give touch layouts a deliberately faster Selected Work rhythm. The v1.24.2
   durations matched desktop's physical image velocity; v1.24.3 halves each
   responsive cycle so tablet and phone cards travel at exactly twice that pace. */
@media (max-width: 720px) {
	.dbn-worldmarquee__track { animation-duration: 27s; }
	.dbn-worldtile { flex-basis: min(76vw, 300px); }
}
@media (min-width: 721px) and (max-width: 820px) {
	.dbn-worldmarquee__track { animation-duration: 21s; }
}
@media (min-width: 821px) and (max-width: 1180px) {
	.dbn-worldmarquee__track { animation-duration: 23s; }
}

/* =========================================================================
   6 / 7 — Full-bleed feature sections
   ========================================================================= */
.dbn-feature { position: relative; padding-block: clamp(3rem, 6vw, 6rem); overflow: hidden; }
.dbn-feature--weddings { background: var(--dbn-sky); }
.dbn-feature--dark { background: var(--dbn-blue-deep); color: var(--dbn-sky); }
.dbn-feature--dark .dbn-feature__title { color: #fff; }
.dbn-feature--dark .dbn-feature__body { color: var(--dbn-sky); }
.dbn-feature__inner { position: relative; z-index: 1; }
.dbn-feature__inner--split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.dbn-feature__title { font-size: clamp(2rem, 5vw, 3.6rem); max-width: 16ch; margin: 0 0 0.5em; }
.dbn-feature__body { color: var(--dbn-muted); max-width: 50ch; font-size: 1.1rem; }

/* -------------------------------------------------------------------------
   Media-background feature (Weddings by DBN): the video/image covers the
   ENTIRE section behind the copy, rather than sitting in a box above it.
   ------------------------------------------------------------------------- */
.dbn-feature--media-bg {
	background: var(--dbn-blue-deep);
	color: #fff;
	min-height: clamp(30rem, 72vh, 46rem);
	display: flex;
	align-items: center;
}
.dbn-feature--media-bg .dbn-feature__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.dbn-feature--media-bg .dbn-feature__bg-inner { position: absolute; inset: -6% 0; }
.dbn-feature--media-bg .dbn-feature__bg .dbn-media,
.dbn-feature--media-bg .dbn-feature__bg .dbn-ph { width: 100%; height: 100%; border: 0; border-radius: 0; }
.dbn-feature--media-bg .dbn-feature__bg .dbn-media__img { width: 100%; height: 100%; object-fit: cover; }
.dbn-feature--media-bg .dbn-feature__bg::after {
	content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
	background:
		linear-gradient(180deg, rgba(3,32,74,0.5), rgba(3,32,74,0.72)),
		linear-gradient(90deg, rgba(3,32,74,0.62), rgba(3,32,74,0.12) 72%);
}
.dbn-feature--media-bg .dbn-feature__inner { width: 100%; }
.dbn-feature--media-bg .dbn-feature__title { color: #fff; }
.dbn-feature--media-bg .dbn-feature__body { color: rgba(255,255,255,0.85); }
.dbn-feature--media-bg .dbn-sectionno { color: var(--dbn-sky); }
/* A solid light button reads best against the darkened media. */
.dbn-feature--media-bg .dbn-btn--primary { --btn-bg: #fff; --btn-fg: var(--dbn-blue-deep); --btn-bd: #fff; }
.dbn-feature--media-bg .dbn-btn--primary:hover { --btn-bg: var(--dbn-sky); --btn-bd: var(--dbn-sky); --btn-fg: var(--dbn-blue-deep); }
.dbn-feature__stack { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.dbn-feature__stack > *:last-child { margin-top: 2.5rem; }

/* =========================================================================
   10 — OVERSIZED FINAL CTA
   ========================================================================= */
.dbn-bigcta { background: linear-gradient(135deg, var(--dbn-blue-deep), var(--dbn-blue)); color: var(--dbn-sky); padding-top: clamp(4rem, 9vw, 7rem); padding-bottom: 0; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,0.65); }
.dbn-bigcta__inner { text-align: center; max-width: 820px; margin-inline: auto; padding-bottom: clamp(3rem, 6vw, 5rem); }
.dbn-bigcta .dbn-eyebrow { color: var(--dbn-sky); }
.dbn-bigcta__title { color: #fff; font-size: clamp(2.4rem, 7vw, 5rem); line-height: 1.04; margin: 0 0 0.5em; }
.dbn-bigcta__body { color: var(--dbn-sky); font-size: 1.15rem; max-width: 50ch; margin: 0 auto 2rem; }

/* =========================================================================
   Reveal variants (extend main.js [data-dbn-reveal])
   ========================================================================= */
.dbn-js [data-dbn-reveal="mask"] { clip-path: inset(0 0 100% 0); opacity: 0; transition: clip-path 1s var(--dbn-ease), opacity 1s var(--dbn-ease); }
.dbn-js [data-dbn-reveal="mask"].is-visible { clip-path: inset(0 0 0 0); opacity: 1; }
.dbn-js .dbn-xhero__band[data-dbn-reveal="mask"] {
	clip-path: inset(var(--dbn-frame-y) var(--dbn-frame-x) round var(--dbn-frame-radius));
	opacity: 1;
	transition: clip-path 0.12s linear;
}

/* Optional direct colour preview complements the existing scroll reveal. */
@media (hover: hover) and (pointer: fine) {
	.dbn-hover-color .dbn-srow__media:hover,
	.dbn-hover-color .dbn-srow__media:focus-within { filter: grayscale(0); opacity: 1; }
}

.dbn-save-data .dbn-xhero__bg::before,
.dbn-motion-subtle .dbn-xhero__bg::before,
.dbn-motion-off .dbn-xhero__bg::before { display: none; }
.dbn-save-data .dbn-xhero__bg-inner > .dbn-ph,
.dbn-motion-subtle .dbn-xhero__bg-inner > .dbn-ph,
.dbn-motion-off .dbn-xhero__bg-inner > .dbn-ph { animation: none; }
.dbn-motion-off .dbn-marquee__track,
.dbn-motion-off .dbn-worldmarquee__track,
.dbn-motion-off .dbn-scrollcue__line::after { animation: none; }
.dbn-motion-off .dbn-srow { position: relative; top: auto; min-height: 0; }
.dbn-motion-off [data-dbn-reveal="mask"] { clip-path: none; opacity: 1; transition: none; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 980px) {
	.dbn-xhero__text { max-width: none; }
	.dbn-feature__inner--split { grid-template-columns: 1fr; }
	.dbn-scrollcue { display: none; }
}
@media (max-width: 720px) {
	.dbn-xhero { padding-top: 2.5rem; }
	.dbn-xhero--media { padding-top: 0; }
	/* Match the specificity of the tablet rule above. The hero begins behind
	   the floating header, so 100svh fills one phone screen without adding the
	   header height twice. min-height lets very short screens grow with copy. */
	.dbn-js .dbn-xhero--media .dbn-xhero__inner {
		min-height: 100svh;
		padding-top: calc(var(--dbn-header-h) + clamp(0.75rem, 3.5vh, 1.5rem));
		padding-bottom: clamp(1.5rem, 5vh, 2.5rem);
	}
	.dbn-feature--media-bg { min-height: 68vh; }
	.dbn-xhero__title,
	.dbn-xhero--media .dbn-xhero__title { font-size: clamp(2.25rem, 10.8vw, 3.15rem); max-width: 15.5ch; }
	.dbn-xhero__mark { top: 3rem; right: -18vw; font-size: 80vw; }
	.dbn-xhero__rotate-line { font-size: 1.2rem; }
	.dbn-xhero__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }
	.dbn-xhero__actions .dbn-btn { width: 100%; min-height: 46px; padding-inline: 0.75rem; }
	/* Phone copy spans most of the frame. A neutral, directional scrim keeps
	   it readable without burying the uploaded artwork in a heavy blue veil. */
	.dbn-xhero__bg::after {
		background:
			linear-gradient(180deg, rgba(2,7,14,0.215), rgba(2,7,14,0.295)),
			linear-gradient(90deg, rgba(2,7,14,0.21), rgba(2,7,14,0.06)),
			radial-gradient(circle at 74% 29%, rgba(145,207,232,0.09), transparent 31%);
	}

	.dbn-xhero__visual-stage { height: auto; margin-top: 2.5rem; }
	.dbn-xhero__visual-sticky { position: relative; top: auto; height: auto; display: block; overflow: visible; }
	/* The morph never runs here — release the compositor layer promotion. */
	.dbn-xhero__band { width: 100% !important; height: auto !important; border-radius: var(--dbn-radius-lg) !important; clip-path: none !important; overflow: hidden; box-shadow: none; }
	.dbn-xhero__band::after { display: none; }
	.dbn-studio { padding: 3.5rem 1.5rem; }
	.dbn-studio__statement { font-size: clamp(1.5rem, 6.5vw, 2rem); max-width: none; }

	.dbn-srow { grid-template-columns: 2.5rem 1fr; gap: 1rem; padding-block: 2rem; }
	.dbn-srow__name { font-size: clamp(1.65rem, 8vw, 2.25rem); }
	.dbn-srow__media { grid-column: 1 / -1; margin-top: 0.5rem; max-width: none; }

	.dbn-feature { padding-block: 4.25rem; }
	.dbn-feature__title { font-size: clamp(2.15rem, 10vw, 3rem); }
	.dbn-feature__stack { gap: 0.7rem; }
	.dbn-bigcta__inner { text-align: left; }
	.dbn-bigcta__title { font-size: clamp(2.45rem, 12vw, 3.5rem); }
	.dbn-bigcta__body { margin: 0 0 1.5rem; }
	.dbn-bigcta__inner .dbn-btn { width: 100%; }
}

/* Preserve the full narrative on small, short phones without allowing the
   headline and controls to consume the entire visible canvas. */
@media (max-width: 720px) and (max-height: 650px) {
	.dbn-js .dbn-xhero--media .dbn-xhero__inner {
		padding-top: calc(var(--dbn-header-h) + 0.65rem);
		padding-bottom: 1.25rem;
	}
	.dbn-xhero__title,
	.dbn-xhero--media .dbn-xhero__title { font-size: clamp(2rem, 9.8vw, 2.6rem); max-width: 15.5ch; margin-bottom: 0.45rem; }
	/* The rotating line repeats the headline's idea; on a genuinely short
	   canvas the supporting copy and project actions take priority. */
	.dbn-xhero__rotate-line { display: none; }
	.dbn-xhero__sub { font-size: 0.96rem; line-height: 1.48; }
	.dbn-xhero__actions { margin-top: 1rem; }
}

/* =========================================================================
   Cinematic tablet homepage (v1.23.0)

	The 821–1180px range receives its own full-motion composition. The Studio
	keeps the desktop frame-opening narrative and the phone's tactile focus, but
	uses broader measures and shorter travel for a two-handed tablet canvas.
	========================================================================= */
@media (min-width: 821px) and (max-width: 1180px) and (prefers-reduced-motion: no-preference) {
	html.dbn-tablet-cinematic .dbn-xhero__screen { overflow: clip; }
	html.dbn-tablet-cinematic .dbn-xhero__bg-inner { inset: -7% -2%; transform-origin: 54% 46%; transition: transform 1.5s var(--dbn-motion-ease); }
	html.dbn-tablet-cinematic .dbn-xhero__eyebrow,
	html.dbn-tablet-cinematic .dbn-xhero__title,
	html.dbn-tablet-cinematic .dbn-xhero__rotate-line,
	html.dbn-tablet-cinematic .dbn-xhero__sub,
	html.dbn-tablet-cinematic .dbn-xhero__actions {
		opacity: 0;
		transform: translate3d(0,30px,0);
		transition: opacity 0.72s ease,transform 1.05s var(--dbn-motion-ease);
	}
	html.dbn-tablet-cinematic .dbn-xhero__eyebrow { transform: translate3d(-24px,0,0); }
	html.dbn-tablet-cinematic .dbn-xhero__title { transform: translate3d(0,38px,0) skewY(0.8deg); }
	html.dbn-tablet-cinematic .dbn-xhero__actions { transform: translate3d(0,28px,0) scale(0.98); }
	html.dbn-tablet-cinematic .dbn-xhero.is-loaded .dbn-xhero__eyebrow,
	html.dbn-tablet-cinematic .dbn-xhero.is-loaded .dbn-xhero__title,
	html.dbn-tablet-cinematic .dbn-xhero.is-loaded .dbn-xhero__rotate-line,
	html.dbn-tablet-cinematic .dbn-xhero.is-loaded .dbn-xhero__sub,
	html.dbn-tablet-cinematic .dbn-xhero.is-loaded .dbn-xhero__actions { opacity: 1; transform: none; }
	html.dbn-tablet-cinematic .dbn-xhero.is-loaded .dbn-xhero__eyebrow { transition-delay: 0.1s; }
	html.dbn-tablet-cinematic .dbn-xhero.is-loaded .dbn-xhero__title { transition-delay: 0.18s; }
	html.dbn-tablet-cinematic .dbn-xhero.is-loaded .dbn-xhero__rotate-line { transition-delay: 0.32s; }
	html.dbn-tablet-cinematic .dbn-xhero.is-loaded .dbn-xhero__sub { transition-delay: 0.4s; }
	html.dbn-tablet-cinematic .dbn-xhero.is-loaded .dbn-xhero__actions { transition-delay: 0.5s; }
	html.dbn-tablet-cinematic .dbn-xhero__rotate.is-swapping { transform: translate3d(0,-0.4em,0) rotate(-0.7deg); filter: blur(3px); }

	/* Scroll-led Studio: a restrained frame opening, word lighting and a final
	   CTA landing. No content is duplicated; home.js writes the same variables. */
	html.dbn-tablet-cinematic .dbn-xhero__visual-stage { height: 190svh; margin-top: clamp(2rem,4svh,3rem); }
	html.dbn-tablet-cinematic .dbn-xhero__visual-sticky {
		position: sticky;
		top: var(--dbn-header-h);
		height: calc(100svh - var(--dbn-header-h));
		display: grid;
		place-items: center;
		overflow: hidden;
	}
	html.dbn-tablet-cinematic .dbn-xhero__band {
		width: 100vw;
		height: 100%;
		border-radius: var(--dbn-frame-radius);
		clip-path: inset(var(--dbn-frame-y) var(--dbn-frame-x) round var(--dbn-frame-radius));
		box-shadow: 0 42px 110px -50px rgba(1,28,64,0.92);
		background: radial-gradient(82% 70% at 14% 0%,rgba(207,247,255,0.2),transparent 68%),
			radial-gradient(76% 82% at 96% 100%,rgba(29,111,212,0.3),transparent 72%),
			linear-gradient(155deg,#062f68 0%,#031f46 62%,#02162f 100%);
	}
	html.dbn-tablet-cinematic .dbn-xhero__band::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		pointer-events: none;
		background: linear-gradient(112deg,transparent 30%,rgba(207,247,255,0.07) 49%,transparent 67%);
		transform: translate3d(calc(-68% + (var(--dbn-studio-p,0) * 136%)),0,0);
	}
	html.dbn-tablet-cinematic .dbn-xhero__band-mark {
		background-color: rgba(207,247,255,calc(0.04 + (var(--dbn-studio-p,0) * 0.065)));
		-webkit-mask-size: clamp(54rem,115vw,76rem) auto;
		mask-size: clamp(54rem,115vw,76rem) auto;
		transform: translate3d(calc((0.5 - var(--dbn-studio-p,0)) * 22px),calc((0.5 - var(--dbn-studio-p,0)) * -16px),0)
			rotate(calc((var(--dbn-studio-p,0) - 0.5) * 3deg)) scale(calc(0.94 + (var(--dbn-studio-p,0) * 0.06)));
	}
	html.dbn-tablet-cinematic .dbn-studio {
		min-height: 100%;
		justify-content: center;
		gap: clamp(1rem,2.4svh,1.5rem);
		padding: clamp(3rem,8svh,5.5rem) clamp(3.5rem,10vw,8rem);
	}
	html.dbn-tablet-cinematic .dbn-studio .dbn-sectionno {
		opacity: calc(0.48 + (var(--dbn-studio-p,0) * 0.52));
		transform: translate3d(0,calc((1 - var(--dbn-studio-p,0)) * 12px),0);
	}
	html.dbn-tablet-cinematic .dbn-studio__statement {
		font-size: clamp(2.15rem,4.25vw,3.25rem);
		line-height: 1.25;
		max-width: 28ch;
		text-shadow: 0 14px 38px rgba(0,0,0,0.18);
	}
	html.dbn-tablet-cinematic .is-kinetic .dbn-studio__word { color: rgba(255,255,255,0.2); transition: color 0.44s ease,text-shadow 0.56s ease; }
	html.dbn-tablet-cinematic .is-kinetic .dbn-studio__word.is-on { color: #fff; text-shadow: 0 0 24px rgba(207,247,255,0.12); }
	html.dbn-tablet-cinematic .is-kinetic .dbn-studio__word--accent.is-on { color: var(--dbn-sky); text-shadow: 0 0 28px rgba(207,247,255,0.22); }
	html.dbn-tablet-cinematic .is-kinetic .dbn-studio__foot { transform: translate3d(0,24px,0) scale(0.975); filter: blur(5px); }
	html.dbn-tablet-cinematic .is-kinetic .dbn-studio__foot.is-in { transform: none; filter: none; }

	/* Homepage chapters retain their existing content while reading as tablet
	   canvases rather than oversized desktop cards. */
	html.dbn-tablet-cinematic .dbn-srow { transform: translate3d(0,22px,0) scale(0.985); opacity: 0.78; transition: transform 0.9s var(--dbn-motion-ease),opacity 0.65s ease; }
	html.dbn-tablet-cinematic .dbn-srow.is-active,
	html.dbn-tablet-cinematic .dbn-srow.is-visible { transform: none; opacity: 1; }
	html.dbn-tablet-cinematic .dbn-srow__media { overflow: hidden; border-radius: var(--dbn-tablet-radius); box-shadow: 0 30px 78px -50px rgba(4,72,159,0.82); }
	html.dbn-tablet-cinematic .dbn-srow__media-inner { transform: scale(1.045); transition: transform 1.25s var(--dbn-motion-ease); }
	html.dbn-tablet-cinematic .dbn-srow.is-active .dbn-srow__media-inner { transform: scale(1); }
	html.dbn-tablet-cinematic .dbn-world { overflow: clip; }
	html.dbn-tablet-cinematic .dbn-worldmarquee { transform: rotate(-0.32deg) scale(1.01); }
	html.dbn-tablet-cinematic .dbn-worldmarquee--right { transform: rotate(0.32deg) scale(1.01); }
	html.dbn-tablet-cinematic .dbn-feature { min-height: min(820px,90svh); display: grid; align-items: center; overflow: clip; }
	html.dbn-tablet-cinematic .dbn-feature__stack > * { transition: transform 0.35s linear; }
	html.dbn-tablet-cinematic .dbn-bigcta {
		min-height: min(680px,74svh);
		display: grid;
		align-items: center;
		background: radial-gradient(68% 56% at 50% 100%,rgba(207,247,255,0.14),transparent),linear-gradient(145deg,var(--dbn-blue-deep),#052b60 56%,#021a39);
	}
}

@media (min-width: 821px) and (max-width: 1180px) and (max-height: 820px) and (orientation: landscape) and (prefers-reduced-motion: no-preference) {
	html.dbn-tablet-cinematic .dbn-xhero--media .dbn-xhero__inner {
		min-height: max(100svh,620px);
		padding-top: calc(var(--dbn-header-h) + 1.5rem);
		padding-bottom: 1.5rem;
	}
	html.dbn-tablet-cinematic .dbn-xhero--media .dbn-xhero__title { font-size: clamp(3rem,6.2vw,4rem); max-width: 22ch; }
	html.dbn-tablet-cinematic .dbn-xhero--media .dbn-xhero__rotate-line { margin-bottom: 0.7rem; }
	html.dbn-tablet-cinematic .dbn-xhero--media .dbn-xhero__sub { font-size: 1rem; line-height: 1.48; }
	html.dbn-tablet-cinematic .dbn-xhero--media .dbn-xhero__actions { margin-top: 1rem; }
	html.dbn-tablet-cinematic .dbn-scrollcue { display: none; }
	html.dbn-tablet-cinematic .dbn-studio { padding-block: 2.5rem; gap: 0.9rem; }
	html.dbn-tablet-cinematic .dbn-studio__statement { font-size: clamp(1.9rem,3.8vw,2.6rem); line-height: 1.2; }
	html.dbn-tablet-cinematic .dbn-studio__note { font-size: var(--dbn-fs-sm); line-height: 1.45; }
	html.dbn-tablet-cinematic .dbn-studio__foot { gap: 0.8rem; }
}

/* =========================================================================
   Reduced motion — disable all movement, show everything
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	.dbn-marquee__track, .dbn-worldmarquee__track { animation: none; }
	.dbn-scrollcue__line::after { animation: none; }
	.dbn-xhero__eyebrow, .dbn-xhero__title, .dbn-xhero__rotate-line, .dbn-xhero__sub, .dbn-xhero__actions { opacity: 1; transform: none; transition: none; }
	.dbn-xhero__visual-stage { height: auto; }
	.dbn-xhero__visual-sticky { position: relative; top: auto; height: auto; }
	/* 100% (not 100vw): the sticky stage is already full width, and vw units
	   include the scrollbar — a latent horizontal-overflow source. Height
	   stays auto so the studio statement is never clipped. */
	.dbn-xhero__band { width: 100% !important; height: auto !important; border-radius: var(--dbn-radius-lg) !important; clip-path: none !important; }
	.dbn-srow { position: relative !important; top: auto !important; min-height: auto !important; }
	[data-dbn-reveal="mask"] { clip-path: none; opacity: 1; transition: none; }
}