/* ==========================================================================
   DORIC · Homepage sections 01–12
   --------------------------------------------------------------------------
   Page rhythm is a value sequence, not uniform padding:
   hero · elevated · photo grid · IVORY · black · black · elevated ·
   deep black · black · black · elevated · IVORY · footer
   Where two dark sections meet, a hairline does the separating.
   ========================================================================== */

/* ══ SECTION 01 · HERO ═══════════════════════════════════════════════════ */

/* The copy block sits low in the frame as one bottom-anchored stack, with the
   call to action at its foot. */
.d-hero {
	position: relative;
	display: grid;
	align-content: end;
	min-height: 100vh;
	min-height: 100svh;
	overflow: hidden;
	background: var(--d-obsidian);
}

.d-hero__stage { position: absolute; inset: 0; z-index: 0; }

/* Extra vertical bleed so parallax travel never exposes an edge. */
.d-hero__parallax { position: absolute; inset: -7% 0; }

/*
 * Phone: raise the frame so the statue sits higher behind the copy.
 *
 * object-position cannot do this here — at a phone's aspect the 9:16 master is
 * cropped horizontally, not vertically, so there is no vertical slack to shift
 * within. Deepening the top bleed moves the subject up while keeping the
 * bottom edge well outside the frame. Parallax is off at this width, so
 * nothing else writes to this element's geometry.
 */
@media (max-width: 767px) {
	.d-hero__parallax { inset: -49% 0 -7% 0; }

	/*
	 * Lifting the frame also enlarges it, which widens the horizontal crop and
	 * would push the figure out to the right. There IS horizontal slack at
	 * this size, so bias the crop toward the statue and let the extra sky fall
	 * off the left — which is the side the copy sits on anyway.
	 */
	.d-hero .d-media__img { object-position: 74% center; }
}
.d-hero__zoom { position: absolute; inset: 0; overflow: hidden; }

/*
 * Below 1024px the copy block sits from roughly 35% to 82% of the frame, and
 * on the portrait master that band crosses the statue's lit shoulder and hair.
 * The falloff is weighted to start lifting at ~34% so every line clears its
 * background, while the top 30% stays open for the sky.
 */
.d-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(11, 10, 9, .72) 0%,
		rgba(11, 10, 9, .26) 20%,
		rgba(11, 10, 9, .32) 34%,
		rgba(11, 10, 9, .66) 56%,
		rgba(11, 10, 9, .92) 100%
	);
}

@media (min-width: 1024px) {
	/*
	 * Third layer added once the real photograph landed: the seven-God index
	 * sits on the right edge, and with the statue's lit shoulder behind it the
	 * numerals dropped to an unreadable contrast. A narrow falloff on the outer
	 * ~14% restores them without touching the composition — the same scrim
	 * system that already makes the left-hand copy readable.
	 */
	.d-hero__scrim {
		background:
			linear-gradient(180deg, rgba(11, 10, 9, .62) 0%, rgba(11, 10, 9, .12) 30%, rgba(11, 10, 9, .12) 56%, rgba(11, 10, 9, .82) 100%),
			linear-gradient(90deg, rgba(11, 10, 9, .76) 0%, rgba(11, 10, 9, .22) 42%, rgba(11, 10, 9, 0) 68%),
			linear-gradient(270deg, rgba(11, 10, 9, .62) 0%, rgba(11, 10, 9, .28) 6%, rgba(11, 10, 9, 0) 14%);
	}
}

/* The slow cinematic zoom. Begins only once the hero has been revealed, so it
   never plays against a blank frame. */
.is-hero-ready .d-media--zoom {
	animation: d-slowzoom var(--d-dur-zoom) var(--d-ease-out) both;
}

@keyframes d-slowzoom {
	from { transform: scale(1.001); }
	to   { transform: scale(1.05); }
}

.d-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	/* Bottom clearance keeps the copy above the mobile bottom bar and the
	   seven-God progress line. */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-block: calc(var(--d-chrome-h) + var(--d-s8)) calc(var(--d-bottomnav-h) + var(--d-s12));
}

/* The wordmark carries the hero on its own — no eyebrow above it. */
.d-hero__title {
	font-family: var(--d-font-display);
	font-size: clamp(4.25rem, 12vw, 11rem);
	font-weight: 400;
	line-height: .9;
	letter-spacing: .045em;
	text-indent: .045em;
	color: var(--d-ivory);
}

.d-hero__tagline {
	margin-top: var(--d-s4);
	font-family: var(--d-font-display);
	font-size: clamp(.9375rem, 1.55vw, 1.3125rem);
	font-weight: 400;
	line-height: 1.28;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--d-ivory);
}

/* Sits at the foot of the copy stack, hard against the left gutter. */
.d-hero__actions {
	margin-top: var(--d-s7);
	display: flex;
	flex-wrap: wrap;
	gap: var(--d-s3);
}

/*
 * A single, deliberately small call to action — roughly 35% shorter than the
 * site's standard button.
 *
 * That takes the drawn box below the 44px touch minimum, so the hit area is
 * restored invisibly on touch devices via the pseudo-element below. The button
 * looks the size it was asked to look; it still behaves like a thumb-sized
 * target on a phone.
 */
.d-hero__actions .d-btn {
	position: relative;
	min-height: 27.5px;
	padding-inline: 15px;
	gap: 7px;
	font-size: .53125rem;
	letter-spacing: .12em;
}

.d-hero__actions .d-btn svg { width: 12px; height: 12px; }

@media (pointer: coarse) {
	.d-hero__actions .d-btn::after {
		content: "";
		position: absolute;
		inset: -8px -6px;
	}
}

.d-hero__scroll {
	display: none;
	align-items: center;
	gap: var(--d-s3);
	margin-top: var(--d-s6);
	font-size: var(--d-fs-micro);
	font-weight: 500;
	letter-spacing: var(--d-ls-label);
	text-transform: uppercase;
	color: var(--d-text-muted);
	transition: color var(--d-dur-fast) var(--d-ease-out);
}

.d-hero__scroll:hover { color: var(--d-accent); }
.d-hero__scroll svg { animation: d-nudge 2.6s var(--d-ease-inout) infinite; }

@keyframes d-nudge {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(4px); }
}

@media (min-width: 1024px) {
	.d-hero__scroll { display: inline-flex; }
	.d-hero__inner { padding-block-end: var(--d-s11); }
}

/* Right rail: the seven Gods as an editorial index, not a slideshow UI. */
.d-hero__index {
	display: none;
	position: absolute;
	top: 50%;
	right: var(--d-gutter);
	z-index: 2;
	transform: translateY(-50%);
}

@media (min-width: 1024px) {
	.d-hero__index { display: block; }
}

.d-hero__indexitem {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--d-s3);
	min-height: 28px;
	font-size: var(--d-fs-micro);
	font-weight: 500;
	letter-spacing: .18em;
	color: var(--d-text-muted);
	transition: color var(--d-dur-fast) var(--d-ease-out);
}

.d-hero__indexnum { font-variant-numeric: tabular-nums; }

.d-hero__indexname {
	order: -1;
	font-size: 9px;
	letter-spacing: .22em;
	opacity: 0;
	transform: translateX(8px);
	transition:
		opacity var(--d-dur-base) var(--d-ease-out),
		transform var(--d-dur-base) var(--d-ease-out);
}

.d-hero__indexrule {
	width: 0;
	height: 1px;
	background: var(--d-accent);
	transition: width var(--d-dur-base) var(--d-ease-out);
}

.d-hero__indexitem:hover,
.d-hero__indexitem:focus-visible { color: var(--d-ivory); }

.d-hero__indexitem:hover .d-hero__indexname,
.d-hero__indexitem:focus-visible .d-hero__indexname { opacity: 1; transform: none; }

.d-hero__indexitem:hover .d-hero__indexrule { width: 18px; }

.d-hero__indexitem.is-active { color: var(--d-ivory); }
.d-hero__indexitem.is-active .d-hero__indexrule { width: 30px; }

/* ══ SECTION 02 · TRUST ══════════════════════════════════════════════════ */

.d-trust {
	padding-block: 0;
	background: var(--d-bg-elevated);
	border-block: var(--d-hairline) solid var(--d-border);
}

.d-trust .d-trust__list {
	max-width: var(--d-container);
	margin-inline: auto;
	padding-inline: var(--d-gutter);
}

/*
 * Five items only become five columns when five columns are actually legible.
 * At 768px each column resolves to ~98px of content, which wraps every title
 * onto two lines and "Hassle-free returns" onto three — squeezed, not designed.
 * Below 1024px the strip stays the horizontal rail it is on mobile.
 */
@media (max-width: 1023px) {
	.d-trust .d-trust__list {
		gap: var(--d-s7);
		padding-block: var(--d-s6);
		scroll-padding-inline: var(--d-gutter);
	}

	.d-trust .d-trust__item { width: min(64vw, 230px); }
}

@media (min-width: 768px) and (max-width: 1023px) {
	.d-trust .d-trust__item { width: min(34vw, 250px); }
}

@media (min-width: 1024px) {
	.d-trust .d-trust__list {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 0;
		overflow: visible;
	}

	.d-trust .d-trust__item {
		padding: var(--d-s6) var(--d-s4);
		border-left: var(--d-hairline) solid var(--d-border);
	}

	.d-trust .d-trust__item:first-child { border-left: 0; padding-left: 0; }
	.d-trust .d-trust__item:last-child { padding-right: 0; }
}

@media (min-width: 1280px) {
	.d-trust .d-trust__item { padding-inline: var(--d-s5); }
}

/* ══ SECTION 03 · SHOP BY CATEGORY ═══════════════════════════════════════ */

.d-cats { padding-bottom: 0; }

/* Hairline separation instead of gutters: the six tiles read as one strip. */
.d-cats__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--d-hairline);
	background: var(--d-border);
	border-top: var(--d-hairline) solid var(--d-border);
}

@media (min-width: 768px) { .d-cats__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .d-cats__grid { grid-template-columns: repeat(6, 1fr); } }

/* ══ SECTION 04 · THE BRAND ══════════════════════════════════════════════ */

.d-brand {
	display: grid;
	background: var(--d-bg-inverse);
	color: var(--d-text-inverse);
}

.d-brand :focus-visible { outline-color: var(--d-brown); }

.d-brand__panel {
	display: grid;
	place-items: center;
	padding: var(--d-s11) var(--d-gutter);
}

.d-brand__inner { max-width: var(--d-measure-editorial); }
.d-brand__label { color: var(--d-text-inverse-2); }

/* Sized so "FOR TRENDS." holds one line inside the narrow ivory column. */
.d-brand__title {
	margin-top: var(--d-s4);
	font-family: var(--d-font-display);
	font-size: clamp(1.875rem, 3.4vw, 3.25rem);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -.012em;
	color: var(--d-obsidian);
}

.d-brand__copy {
	display: grid;
	gap: var(--d-s4);
	margin-top: var(--d-s6);
	font-size: var(--d-fs-body);
	line-height: 1.78;
	color: var(--d-text-inverse-2);
}

.d-brand__cta {
	margin-top: var(--d-s8);
	padding-bottom: var(--d-s2);
	color: var(--d-obsidian);
	border-bottom: var(--d-hairline) solid rgba(11, 10, 9, .32);
	transition:
		color var(--d-dur-fast) var(--d-ease-out),
		border-color var(--d-dur-fast) var(--d-ease-out);
}

.d-brand__cta:hover { color: var(--d-brown); border-bottom-color: var(--d-brown); }

@media (max-width: 899px) {
	.d-brand__panel { order: -1; padding-block: var(--d-s10); }
}

@media (min-width: 900px) {
	.d-brand { grid-template-columns: 1fr 1.12fr 1fr; align-items: stretch; }
	.d-brand__media { position: relative; }

	.d-brand__media .d-media {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
	}
}

/* ══ SECTION 05 · NEW ARRIVALS ═══════════════════════════════════════════ */

.d-arrivals { background: var(--d-bg); }
.d-arrivals__rail { gap: var(--d-s5); }

@media (max-width: 767px) {
	.d-arrivals__rail {
		display: block;
		overflow: visible;
		border-top: var(--d-hairline) solid var(--d-border);
	}
}

@media (min-width: 768px) {
	.d-arrivals__rail {
		margin-inline: calc(var(--d-gutter) * -1);
		padding-inline: var(--d-gutter);
		scroll-padding-inline: var(--d-gutter);
	}

	.d-arrivals__rail > * { width: clamp(230px, 30vw, 300px); }
	.d-arrivals__all { display: none; }
}

@media (min-width: 1280px) {
	.d-arrivals__rail > * { width: clamp(260px, 20vw, 330px); }
}

.d-arrivals__all { margin-top: var(--d-s7); }

/* ══ SECTION 06 · THE GODS ═══════════════════════════════════════════════ */

.d-gods { background: var(--d-bg); border-top: var(--d-hairline) solid var(--d-border); }

.d-gods__head { max-width: 880px; margin-bottom: var(--d-s10); }

.d-gods__title {
	margin-top: var(--d-s4);
	font-family: var(--d-font-display);
	font-size: var(--d-fs-display-l);
	font-weight: 400;
	line-height: 1.04;
	letter-spacing: -.012em;
}

.d-gods__lede {
	margin-top: var(--d-s5);
	max-width: 52ch;
	font-size: var(--d-fs-body);
	color: var(--d-text-muted);
}

/* The seven run as one strip: no air between them left or right, so the
   frames meet and the row reads as a single band. The captions keep their
   own inset instead, or they would touch across the join. */
.d-gods__grid { gap: 0; }

/* The band is the width of the screen: the first frame starts at the edge,
   not at the container's gutter. */
.d-gods__grid { margin-inline: calc(var(--d-gutter) * -1); }

/* No entrance here. The band is read by scrolling it sideways, and a card
   that fades in as it arrives fights the scroll. */
.js .d-gods__grid [data-reveal] {
	opacity: 1;
	transform: none;
	transition: none;
}

@media (max-width: 767px) {
	.d-gods__grid {
		padding-inline: 0;
		scroll-padding-inline: 0;
	}

	.d-gods__grid > * { width: min(69vw, 288px); }
}

@media (min-width: 768px) {
	.d-gods__grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--d-s9) 0;
		overflow: visible;
	}
}

@media (min-width: 1024px) {
	.d-gods__grid { grid-template-columns: repeat(4, 1fr); }
}

.d-gods__all {
	display: grid;
	place-items: center;
	padding: var(--d-s8) var(--d-s6);
	border: var(--d-hairline) solid var(--d-border);
	background: var(--d-surface-1);
	transition: border-color var(--d-dur-base) var(--d-ease-out);
}

.d-gods__all:hover { border-color: var(--d-border-strong); }

.d-gods__allinner {
	display: grid;
	justify-items: center;
	gap: var(--d-s5);
	text-align: center;
}

.d-gods__alltitle {
	font-family: var(--d-font-display);
	font-size: 1.25rem;
	letter-spacing: .14em;
}

/* ══ SECTION 07 · THE CRAFT ══════════════════════════════════════════════ */

.d-craft {
	position: relative;
	overflow: hidden;
	background: var(--d-surface-1);
}

/* Fluting — a Doric column detail, drawn in CSS so it costs nothing and never
   competes with the photography that will sit on top of it. */
.d-craft::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: repeating-linear-gradient(
		90deg,
		rgba(233, 226, 215, .03) 0 1px,
		rgba(233, 226, 215, 0) 1px 24px
	);
	mask-image: radial-gradient(120% 90% at 50% 0%, rgba(0, 0, 0, .9), rgba(0, 0, 0, 0) 78%);
	-webkit-mask-image: radial-gradient(120% 90% at 50% 0%, rgba(0, 0, 0, .9), rgba(0, 0, 0, 0) 78%);
}

.d-craft__grid { position: relative; display: grid; gap: var(--d-s10); }

@media (min-width: 900px) {
	.d-craft__grid {
		grid-template-columns: 1fr 1fr;
		gap: clamp(48px, 6vw, 112px);
		align-items: center;
	}
}

.d-craft__title {
	margin-top: var(--d-s4);
	font-family: var(--d-font-display);
	font-size: var(--d-fs-display-l);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -.012em;
}

.d-craft__lede {
	margin-top: var(--d-s6);
	font-family: var(--d-font-display);
	font-size: 1.125rem;
	line-height: 1.65;
	color: var(--d-text-2);
}

.d-craft__principles {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--d-s7) var(--d-s5);
	margin-top: var(--d-s9);
}

@media (min-width: 1280px) {
	.d-craft__principles { grid-template-columns: repeat(4, 1fr); }
}

.d-craft__icon { color: var(--d-accent); }

.d-craft__ptitle {
	margin-top: var(--d-s4);
	font-size: var(--d-fs-micro);
	font-weight: 500;
	letter-spacing: var(--d-ls-label);
	text-transform: uppercase;
}

.d-craft__ptext { margin-top: var(--d-s1); font-size: var(--d-fs-small); color: var(--d-text-muted); }

.d-craft__copy .d-btn { margin-top: var(--d-s9); }

/* The three studies meet, and the band reaches the screen: both edges while
   the section is one column, the right edge once the copy takes the left. */
.d-craft__media {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	margin-inline: calc(var(--d-gutter) * -1);
}

@media (min-width: 900px) {
	.d-craft__media { margin-left: 0; }
}

/* ══ SECTION 08 · LIMITED EDITION ════════════════════════════════════════ */

/* Deliberately the only section without a media slot: after five image-led
   sections the page needs a breath, and scarcity reads more expensive stated
   plainly than illustrated. */
.d-limited {
	background: var(--d-obsidian);
	border-top: var(--d-hairline) solid var(--d-border);
}

.d-limited__inner {
	display: grid;
	justify-items: center;
	max-width: 720px;
	text-align: center;
}

.d-limited__title {
	margin-top: var(--d-s4);
	font-family: var(--d-font-display);
	font-size: var(--d-fs-display-l);
	font-weight: 400;
	line-height: 1.01;
	letter-spacing: -.012em;
}

.d-limited__lede {
	margin-top: var(--d-s6);
	font-size: var(--d-fs-body);
	line-height: 1.95;
	color: var(--d-text-muted);
}

.d-limited .d-plate { margin-top: var(--d-s9); }
.d-limited__cta { margin-top: var(--d-s8); }

/* ══ SECTION 09 · PACKAGING ══════════════════════════════════════════════ */

.d-pack { border-top: var(--d-hairline) solid var(--d-border); }
.d-pack__head { margin-bottom: var(--d-s10); }

.d-pack__title {
	margin-top: var(--d-s4);
	font-family: var(--d-font-display);
	font-size: var(--d-fs-h1);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -.01em;
	max-width: 16ch;
}

/* Read like the Gods band: the frames touch, the strip runs to the screen
   edge, the numbers and titles keep their own inset, and nothing fades in as
   it is scrolled to. */
.d-pack__steps {
	gap: 0;
	margin-inline: calc(var(--d-gutter) * -1);
}

/* Both sit on the photograph: the number at its head, the title at its foot.
   The frames are pale — cream knit, travertine, paper — so each line gets a
   band of black behind it: dense where the text sits, eased out before the
   middle so the object in the frame stays untouched. */
.d-pack__step { position: relative; }

.d-pack__step .d-media::before,
.d-pack__step .d-media::after {
	content: '';
	position: absolute;
	z-index: 1;
	pointer-events: none;
}

.d-pack__step .d-media::before {
	inset: 0 0 60% 0;
	background: linear-gradient(180deg,
		rgba(11, 10, 9, .94) 0%,
		rgba(11, 10, 9, .8) 35%,
		rgba(11, 10, 9, .38) 68%,
		rgba(11, 10, 9, 0) 100%);
}

.d-pack__step .d-media::after {
	inset: 56% 0 0 0;
	background: linear-gradient(0deg,
		rgba(11, 10, 9, .92) 0%,
		rgba(11, 10, 9, .74) 30%,
		rgba(11, 10, 9, .34) 65%,
		rgba(11, 10, 9, 0) 100%);
}

.d-pack__index,
.d-pack__steptitle {
	position: absolute;
	inset-inline: 0;
	z-index: 2;
	padding-inline: var(--d-s4);
	text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 2px 16px rgba(0, 0, 0, .85);
}

.d-pack__index { top: var(--d-s4); }
.d-pack__steptitle { bottom: var(--d-s4); }

.js .d-pack__steps [data-reveal] {
	opacity: 1;
	transform: none;
	transition: none;
}

@media (max-width: 767px) {
	.d-pack__steps {
		padding-inline: 0;
		scroll-padding-inline: 0;
	}

	.d-pack__steps > * { width: min(62vw, 253px); }
}

@media (min-width: 768px) {
	.d-pack__steps {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		overflow: visible;
		padding-top: var(--d-s6);
		border-top: var(--d-hairline) solid var(--d-border);
	}
}

.d-pack__index {
	display: block;
	font-family: var(--d-font-display);
	font-size: var(--d-fs-small);
	letter-spacing: .22em;
	color: var(--d-accent);
}

.d-pack__steptitle {
	color: var(--d-ivory);
	font-size: var(--d-fs-micro);
	font-weight: 500;
	letter-spacing: var(--d-ls-label);
	text-transform: uppercase;
}

.d-pack__steptext { margin-top: var(--d-s2); font-size: var(--d-fs-small); color: var(--d-text-muted); }

/* ══ SECTION 10 · LOOKBOOK ═══════════════════════════════════════════════ */

.d-look { border-top: var(--d-hairline) solid var(--d-border); }
/* Four frames, two to a row, meeting on every side and running to the edge of
   the screen — the same band the Gods and the Experience are read as. */
.d-look__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
	margin-inline: calc(var(--d-gutter) * -1);
}

.d-look__grid > * { width: auto; }

.js .d-look__grid [data-reveal] {
	opacity: 1;
	transform: none;
	transition: none;
}

/* ══ SECTION 11 · JOURNAL ════════════════════════════════════════════════ */

.d-journal { background: var(--d-bg-elevated); }
.d-journal__grid { gap: var(--d-s7) var(--d-s5); }

@media (max-width: 767px) {
	.d-journal__grid {
		margin-inline: calc(var(--d-gutter) * -1);
		padding-inline: var(--d-gutter);
		scroll-padding-inline: var(--d-gutter);
	}

	.d-journal__grid > * { width: min(78vw, 320px); }
}

@media (min-width: 768px) {
	.d-journal__grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		overflow: visible;
	}
}

@media (min-width: 1024px) {
	.d-journal__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ══ SECTION 12 · FINAL TRUST / CTA ══════════════════════════════════════ */

.d-final {
	background: var(--d-bg-inverse);
	color: var(--d-text-inverse);
	padding-block: var(--d-s10) var(--d-s12);
}

.d-final :focus-visible { outline-color: var(--d-brown); }

.d-final__trust {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--d-s7) var(--d-s5);
	padding-bottom: var(--d-s9);
	border-bottom: var(--d-hairline) solid var(--d-border-inverse);
}

@media (min-width: 900px) {
	.d-final__trust { grid-template-columns: repeat(4, 1fr); }
}

.d-final .d-trust__icon { color: var(--d-brown); }
.d-final .d-trust__title { color: var(--d-text-inverse); }
.d-final .d-trust__sub { color: var(--d-text-inverse-2); }

.d-final__cta {
	display: grid;
	justify-items: center;
	padding-top: var(--d-s11);
	text-align: center;
}

.d-final__mark { color: var(--d-brown); }

.d-final__title {
	margin-top: var(--d-s6);
	font-family: var(--d-font-display);
	font-size: var(--d-fs-display-l);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -.012em;
	color: var(--d-obsidian);
}

.d-final__text {
	margin-top: var(--d-s5);
	max-width: 52ch;
	font-size: var(--d-fs-body);
	line-height: 1.78;
	color: var(--d-text-inverse-2);
}

.d-final__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--d-s3);
	margin-top: var(--d-s8);
}