/*
 * Iconic Collection — single-page editorial layout for `collection` terms
 * flagged as iconic. Magazine-style sequence on white, Trajan display + MADE
 * Mirage body. Uses theme tokens; no external font requests.
 */

.rd-iconic {
	background: #ffffff;
	color: var(--rd-ink);
	font-family: var(--rd-font);
	font-weight: 400;
	line-height: 1.6;
}

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

/* ───────── shared editorial primitives ───────── */

.rd-iconic__display {
	font-family: var(--rd-font-nav);
	font-weight: 400;
	font-size: clamp(2rem, 5vw, 4.2rem);
	line-height: 1.05;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0;
	color: var(--rd-navy);
}

.rd-iconic__display-line {
	white-space: nowrap;
}

.rd-iconic__spec {
	font-family: var(--rd-font-nav);
	font-size: 0.72rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--rd-muted);
	margin: clamp(1.2rem, 2vw, 1.8rem) 0 0;
	flex: 0 0 auto;
}

.rd-iconic__lede {
	font-family: var(--rd-font);
	font-size: clamp(1.05rem, 1.5vw, 1.25rem);
	line-height: 1.55;
	color: var(--rd-muted);
	max-width: 80%;
	margin: 2rem auto 0;
}

.rd-iconic__lede-em {
	font-weight: 500;
	color: var(--rd-navy);
}

/* Luna Azul hero: title and lede stay on a single line on desktop (no forced
   break). Both fall back to wrapping on mobile via the max-width:880px block. */
.rd-iconic__lede--nowrap {
	white-space: nowrap;
	max-width: none;
}

.rd-iconic__section-title {
	font-family: var(--rd-font-nav);
	font-weight: 400;
	font-size: clamp(1.5rem, 2.4vw, 2.1rem);
	line-height: 1.15;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	margin: 0 0 1.8rem;
	color: var(--rd-navy);
}

.rd-iconic__body {
	font-size: 1rem;
	line-height: 1.75;
	color: var(--rd-ink);
	max-width: 30rem;
}

.rd-iconic__body p {
	margin: 0 0 1.1em;
	/* Body copy is justified across all sections (titles and the centered
	   --lead subtitle keep their own alignment via more specific rules). */
	text-align: justify;
	text-justify: inter-word;
}

.rd-iconic__body--justify p {
	text-align: justify;
	text-justify: inter-word;
}

/* Lead line — a centered subtitle that sits right under a section title. */
.rd-iconic__body--lead {
	max-width: none;
}

.rd-iconic__body.rd-iconic__body--lead p {
	text-align: center;
	font-size: 1.15rem;
	line-height: 1.5;
	color: var(--rd-navy);
}

.rd-iconic__body--drop p:first-child::first-letter {
	font-family: var(--rd-font-nav);
	font-weight: 400;
	font-size: 4.4rem;
	line-height: 0.82;
	float: left;
	padding: 0.35rem 0.55rem 0 0;
	color: var(--rd-navy);
}

.rd-iconic__folio {
	font-family: var(--rd-font-nav);
	font-weight: 400;
	font-size: 0.72rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--rd-gold);
	margin: 0 0 1.2rem;
}

/* ───────── hero (title + lede + image in one fold) ───────── */

.rd-iconic__hero {
	background: #ffffff;
	min-height: 100vh;
	padding: clamp(4rem, 7vw, 6rem) 1.5rem clamp(2rem, 4vw, 3rem);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.rd-iconic__hero-text {
	max-width: 64rem;
	margin: 0 auto;
	flex: 0 0 auto;
	order: 1;
}

.rd-iconic__hero-spec {
	margin-top: 0.5rem;
}

.rd-iconic__hero-image {
	order: 3;
}

.rd-iconic__hero-dots {
	order: 4;
}

.rd-iconic__hero-image {
	flex: 1 1 auto;
	width: 100%;
	margin-top: clamp(0.25rem, 0.8vw, 0.75rem);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
}

.rd-iconic__hero-image img {
	flex: 0 1 auto;
	max-width: min(51vw, 570px);
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.rd-iconic__hero-image--slide {
	display: flex;
	gap: 1rem;
	width: auto;
	justify-content: center;
	align-items: center;
	height: auto;
}

.rd-iconic__hero-img {
	flex: 0 1 auto;
	max-width: 25vw;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.rd-iconic__hero-img--from-left {
	animation: rd-iconic-slide-from-left 3s ease-in-out forwards;
}

.rd-iconic__hero-img--from-right {
	animation: rd-iconic-slide-from-right 3s ease-in-out forwards;
}

@keyframes rd-iconic-slide-from-left {
	0% {
		transform: translateX(-100%);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes rd-iconic-slide-from-right {
	0% {
		transform: translateX(100%);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

.rd-iconic__hero-spec {
	flex: 0 0 auto;
	margin-top: clamp(1.25rem, 2.5vw, 2rem);
	text-align: center;
}

.rd-iconic__hero-spec-title {
	font-family: var(--rd-font-nav);
	font-size: clamp(0.72rem, 1vw, 0.85rem);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--rd-ink);
	margin: 0;
}

.rd-iconic__hero-spec-ref {
	font-family: var(--rd-font);
	font-size: 12px;
	letter-spacing: 0.02em;
	color: var(--rd-ink);
	margin: 0.5rem 0 0;
}

/* Hero slider dots (mobile only) */
.rd-iconic__hero-dots {
	display: none;
	gap: 8px;
	justify-content: center;
	margin-top: 1.8rem;
}

.rd-iconic__hero-dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(9, 23, 52, 0.35);
	cursor: pointer;
	transition: background 0.25s ease, transform 0.25s ease;
}

.rd-iconic__hero-dot:hover {
	background: rgba(9, 23, 52, 0.6);
	transform: scale(1.1);
}

.rd-iconic__hero-dot.is-active {
	background: var(--rd-navy);
}

/* ───────── full-bleed image (subsequent stages) ───────── */

.rd-iconic__stage {
	position: relative;
	background: #ffffff;
	min-height: 90vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: clamp(2rem, 4vw, 4rem) 0;
}

.rd-iconic__stage img {
	max-width: min(92vw, 1400px);
	max-height: 84vh;
	width: auto;
	mix-blend-mode: multiply;
}

/* ───────── quote band (hairlines on white) ───────── */

.rd-iconic__quote {
	background: #ffffff;
	padding: clamp(3rem, 6vw, 5rem) 1.5rem;
	text-align: center;
	color: var(--rd-ink);
}

.rd-iconic__quote-inner {
	max-width: 60rem;
	margin: 0 auto;
	padding: clamp(3.5rem, 6vw, 5.5rem) 0;
	border-top: 1px solid rgba(9, 23, 52, 0.18);
	border-bottom: 1px solid rgba(9, 23, 52, 0.18);
}

.rd-iconic__quote-mark {
	font-family: var(--rd-font-nav);
	font-size: 3rem;
	line-height: 1;
	color: var(--rd-gold);
	margin: 0 0 1.2rem;
}

.rd-iconic__quote-text {
	font-family: var(--rd-font);
	font-weight: 400;
	font-size: clamp(1.7rem, 3.4vw, 2.6rem);
	line-height: 1.3;
	letter-spacing: -0.005em;
	margin: 0;
	color: var(--rd-navy);
}

.rd-iconic__quote-attr {
	margin-top: 2.5rem;
	font-family: var(--rd-font-nav);
	font-size: 0.68rem;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--rd-muted);
}

/* ───────── inline portrait video (within a split media column) ───────── */

/* The video column stretches to the row (text) height so no section
   background shows above or below the clip. */
.rd-iconic__split-media:has(.rd-iconic__split-video) {
	align-self: stretch;
	display: flex;
	flex-direction: column;
}

.rd-iconic__split-media .rd-iconic__split-video {
	position: relative;
	flex: 1 1 auto;
	min-height: min(48vw, 520px);
	width: 100%;
	max-width: min(34vw, 400px);
	margin: 0 auto;
	overflow: hidden;
	--rd-video-shimmer-bg: #efe6ef; /* soft lilac, tuned to the pink stone */
}

/* Blue-stone variant (e.g. Baby Blue Hope): cooler shimmer tone and a SQUARE
   frame (1:1) instead of the default portrait box — drop the flex stretch and
   portrait min-height/max-width so the aspect-ratio drives a true square. */
.rd-iconic__split-media .rd-iconic__split-video--blue {
	--rd-video-shimmer-bg: #e4ebf5;
	flex: 0 0 auto;
	min-height: 0;
	max-width: min(43.2vw, 504px); /* square frame, 10% smaller */
	aspect-ratio: 1 / 1;
}

/* Square frame variant (e.g. Rosa Cruzeiro do Sul Section II): same 1:1 box as
   the blue variant but keeps the default pink shimmer and the default 16:9
   iframe cover-crop — the horizontal source clip fills the square, cropped on
   the sides. Drops the portrait flex stretch and min-height/max-width. */
.rd-iconic__split-media .rd-iconic__split-video--square {
	flex: 0 0 auto;
	min-height: 0;
	max-width: min(43.2vw, 504px); /* square frame, matches blue variant */
	aspect-ratio: 1 / 1;
}

/* Portrait-source variant (e.g. Luna Azul): the source clip is vertical
   (≈9:16), so size the iframe to that ratio and let WIDTH drive it — height
   then overshoots and is clipped, giving a true cover crop with no pillarbox
   or shimmer bleed at the edges. Slight overscan kills sub-pixel gaps. */
.rd-iconic__split-media .rd-iconic__split-video--zoom iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 240 / 424;
	min-height: 100%;
	transform: translate(-50%, -50%) scale(1.06);
}

/* Loading feedback: a soft lilac shimmer sits behind the iframe and is hidden
   the moment the playing video paints over it. Pure CSS, no JS. */
.rd-iconic__split-video::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, 0.55) 50%, transparent 75%),
		var(--rd-video-shimmer-bg, #efe6ef);
	background-size: 220% 100%, 100% 100%;
	background-repeat: no-repeat;
	animation: rd-video-shimmer 1.5s ease-in-out infinite;
}

@keyframes rd-video-shimmer {
	from { background-position: -130% 0, 0 0; }
	to   { background-position: 230% 0, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
	.rd-iconic__split-video::before { animation: none; }
}

/* Vimeo's background player only fits-to-width, so we size the iframe to a
   16:9 box pinned to the frame's full height and centered — the surplus width
   overflows and is clipped, giving a cover crop on the sides for any frame
   aspect (height drives the size, so it adapts as the column stretches). */
.rd-iconic__split-video iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	/* slight overscan kills sub-pixel gaps at the edges */
	transform: translate(-50%, -50%) scale(1.04);
	height: 100%;
	width: auto;
	aspect-ratio: 16 / 9;
	min-width: 100%;
	border: 0;
	z-index: 1; /* paints over the loading shimmer */
}

/* Square frame variant (Rosa Cruzeiro do Sul): keep the 16:9 cover-crop so the
   horizontal clip fills the square, but drop the 1.04 overscan so there is no
   extra zoom — the video sits at its natural scale. */
.rd-iconic__split-video--square iframe {
	transform: translate(-50%, -50%);
}

/* Square-source variant (Baby Blue Hope): the Vimeo clip is already 1:1, so
   skip the 16:9 cover-crop and overscan — let the iframe fill the square frame
   exactly and show the full video with no zoom. */
.rd-iconic__split-video--blue iframe {
	width: 100%;
	height: 100%;
	min-width: 0;
	aspect-ratio: 1 / 1;
	transform: translate(-50%, -50%);
}

/* ───────── split sections ───────── */

.rd-iconic__split {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 2.5vw, 3rem);
	align-items: center;
	padding: clamp(1.7rem, 3.4vw, 3rem) 5%;
	background: #ffffff;
	overflow: hidden;
}

.rd-iconic__split > .rd-iconic__split-text,
.rd-iconic__split > .rd-iconic__split-media {
	position: relative;
	z-index: 1;
}

/* Decorative Tanzania detail — old-map style: thin gold linework on a tinted
   parchment, slightly tilted, sitting in the gap between text and image. */
.rd-iconic__split-bg {
	position: absolute;
	width: 414px;
	height: 450px;
	left: calc(42% + 10px);
	top: 50%;
	z-index: 0;
	transform: translate(-50%, -50%) rotate(-7deg);
	background-color: transparent;
	background-image: url('../img/world-map-lines.svg');
	/* SVG scaled to 1260px wide; Tanzania at (756, 378). Place Tanzania at
	   the right side of the container (≈75% × 50%) → offset (-445, -153). */
	background-size: 1260px auto;
	background-position: -445px -153px;
	background-repeat: no-repeat;
	opacity: 0.5;
	pointer-events: none;
	/* Hard fade on the right so the map doesn't bleed onto the gallery. */
	mask-image:
		linear-gradient(to right, #000 0%, #000 70%, transparent 95%),
		radial-gradient(ellipse at 50% 50%, #000 55%, transparent 95%);
	mask-composite: intersect;
	-webkit-mask-image:
		linear-gradient(to right, #000 0%, #000 70%, transparent 95%),
		radial-gradient(ellipse at 50% 50%, #000 55%, transparent 95%);
	-webkit-mask-composite: source-in;
}

/* Tanzania marker — soft rosé dot gently pulsing. */
.rd-iconic__split-bg::after {
	content: '';
	position: absolute;
	left: calc(74% - 40px);
	top: 50%;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #e05a72;
	transform: translate(-50%, -50%);
	animation: rd-iconic-tanzania-pulse 2.6s ease-in-out infinite;
}

@keyframes rd-iconic-tanzania-pulse {
	0%, 100% {
		box-shadow: 0 0 0 3px rgba(224, 90, 114, 0.18), 0 0 8px 2px rgba(255, 130, 160, 0.35);
		opacity: 0.85;
	}
	50% {
		box-shadow: 0 0 0 6px rgba(224, 90, 114, 0.08), 0 0 14px 4px rgba(255, 150, 175, 0.55);
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rd-iconic__split-bg::after { animation: none; }
}

.rd-iconic__split + .rd-iconic__split {
	margin-top: clamp(3rem, 6vw, 6rem);
}

.rd-iconic__split--invert .rd-iconic__split-text { order: 2; }
.rd-iconic__split--invert .rd-iconic__split-media { order: 1; }

.rd-iconic__split-text {
	max-width: 38rem;
	justify-self: start;
}

.rd-iconic__split--redesign .rd-iconic__split-text {
	max-width: none;
	width: 100%;
}

/* Wide: content-width columns hug image + text. Explicit grid areas because
   .rd-iconic__split-bg is a third child and otherwise steals a column track. */
@media (min-width: 881px) {
	.rd-iconic__split {
		/* Fluid two-column grid capped at a readable text measure (44rem text,
		   36rem media). On wide screens the surplus centers the pair — margins
		   fall to the sides, never a gap in the middle. The fixed column-gap
		   keeps the two blocks tight together regardless of viewport width. */
		grid-template-columns: minmax(0, 44rem) minmax(0, 36rem);
		justify-content: center;
		column-gap: clamp(2rem, 3.5vw, 3.5rem);
	}

	.rd-iconic__split--invert,
	.rd-iconic__split--redesign.rd-iconic__split--invert {
		grid-template-columns: minmax(0, 36rem) minmax(0, 44rem);
	}

	/* Let copy fill its (already capped) column track instead of a tighter cap. */
	.rd-iconic__split-text,
	.rd-iconic__split .rd-iconic__body {
		max-width: none;
	}

	.rd-iconic__split-bg {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.rd-iconic__split:not(.rd-iconic__split--invert) .rd-iconic__split-text {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
	}

	.rd-iconic__split:not(.rd-iconic__split--invert) .rd-iconic__split-media {
		grid-column: 2;
		grid-row: 1;
		justify-self: start;
		width: 100%;
		max-width: 36rem;
	}

	.rd-iconic__split--invert .rd-iconic__split-media {
		grid-column: 1;
		grid-row: 1;
		justify-self: end;
		width: 100%;
		max-width: 36rem;
	}

	.rd-iconic__split--invert .rd-iconic__split-text {
		grid-column: 2;
		grid-row: 1;
		justify-self: start;
	}

	.rd-iconic__split--invert .rd-iconic__split-media .rd-iconic__compare,
	.rd-iconic__split--invert .rd-iconic__split-media .rd-iconic__gallery {
		margin-left: auto;
		margin-right: 0;
	}
}

.rd-iconic__split-media img {
	width: 100%;
	aspect-ratio: 4/5;
	object-fit: cover;
	mix-blend-mode: multiply;
}

.rd-iconic__split-media img.rd-iconic__img--contain {
	aspect-ratio: auto;
	object-fit: contain;
}

.rd-iconic__split-media img.rd-iconic__img--masterpiece {
	width: 75%;
	aspect-ratio: 4/5;
	object-fit: contain;
	margin-left: auto;
	margin-right: auto;
}

/* Zoom-in frame: 30% closer on the stone, clipped to its OWN box so the
   scaled image stays inside the 4/5 frame and never overlaps the caption
   below it. translateX shifts the view left; origin tracks the diamond. */
.rd-iconic__zoom-frame {
	width: 100%;
	aspect-ratio: 4/5;
	overflow: hidden;
}

.rd-iconic__zoom-frame img {
	height: 100%;
	aspect-ratio: auto;
	transform: translateX(-10%) scale(1.3);
	transform-origin: 57% 43%;
}

/* Centered variant: same 30% zoom, held to the middle of the frame with no
   directional shift — fills the 4/5 box and clips evenly on all sides. */
.rd-iconic__zoom-frame--center img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: auto;
	transform: scale(1.55);
	transform-origin: center center;
}

/* Wrapper that locks caption width to the compare slider. */
.rd-iconic__compare-wrap {
	display: flex;
	flex-direction: column;
	max-width: min(36vw, 440px);
	margin: 0 auto;
}

/* Spec caption sitting under a featured image. */
.rd-iconic__split-cap--media {
	text-align: center;
	margin-top: 2rem;
	max-width: 34rem;
	margin-left: auto;
	margin-right: auto;
}

.term-baby-blue-hope .rd-iconic__split-cap--media {
	margin-top: 0.6rem;
}

.term-baby-blue-hope .rd-iconic__split:nth-of-type(5) .rd-iconic__split-media > img {
	width: 50%;
	margin-left: auto;
	margin-right: auto;
	object-fit: contain;
}

.term-baby-blue-hope .rd-iconic__split:nth-of-type(3) .rd-iconic__split-media > img {
	width: 75%;
	margin-left: auto;
	margin-right: auto;
	object-fit: contain;
}

.term-the-orange .rd-iconic__split:nth-of-type(5) .rd-iconic__zoom-frame {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}

.term-the-orange .rd-iconic__split:nth-of-type(5) .rd-iconic__zoom-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: auto;
	transform: scale(1.25);
	transform-origin: center center;
}

/* Sections I & III: 25% zoom on the stone, clipped to the 4/5 zoom-frame so
   the scaled image stays inside the box (image only — no overflow). */
.term-eternal-ocean-tide .rd-iconic__split:nth-of-type(3) .rd-iconic__zoom-frame img,
.term-eternal-ocean-tide .rd-iconic__split:nth-of-type(5) .rd-iconic__zoom-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: auto;
	transform: scale(1.25);
	transform-origin: center center;
}

.rd-iconic__split-cap {
	margin-top: 1.6rem;
	font-family: var(--rd-font-nav);
	font-size: 0.68rem;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--rd-gold);
}

/* ───────── gallery (single-product-style, mirrored: thumbs on the right) ───────── */

.rd-iconic__gallery {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-right: 86px;
}

.rd-iconic__split-media .rd-iconic__gallery-main {
	display: block;
	max-width: min(36vw, 440px);
	max-height: 60vh;
	width: auto;
	height: auto;
	aspect-ratio: auto;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: opacity 0.3s ease;
}

.rd-iconic__gallery-video {
	position: relative;
	max-width: 100%;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #ffffff;
}

@media (min-width: 881px) {
	.rd-iconic__gallery-video {
		max-width: min(50vw, 600px);
	}
}

.rd-iconic__gallery-video iframe {
	width: 100%;
	height: 100%;
	border: 0;
}


.rd-iconic__gallery-thumb--video {
	position: relative;
}

.rd-iconic__gallery-thumb--video::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.22);
	z-index: 1;
}

.rd-iconic__gallery-thumb--video::after {
	content: '▶';
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 18px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.4);
	font-size: 10px;
	line-height: 1;
	color: #b08a3c;
	z-index: 2;
	box-shadow: 0 0 0 1px rgba(176, 138, 60, 0.5) inset;
}

.rd-iconic__gallery-thumbs {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 10px;
	z-index: 2;
}

.rd-iconic__gallery-thumb {
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	opacity: 0.4;
	overflow: hidden;
	transition: opacity 0.35s;
}

.rd-iconic__split-media .rd-iconic__gallery-thumb img {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.rd-iconic__gallery-thumb:hover { opacity: 0.7; }
.rd-iconic__gallery-thumb.is-active { opacity: 1; }

/* ───────── credentials strip (diluted specs) ───────── */

.rd-iconic__creds {
	background: #ffffff;
	color: var(--rd-ink);
	padding: clamp(2.5rem, 4vw, 3.5rem) 2rem;
	text-align: center;
	border-top: 1px solid rgba(9, 23, 52, 0.08);
	border-bottom: 1px solid rgba(9, 23, 52, 0.08);
}

.rd-iconic__creds-inner {
	max-width: 70rem;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
}

.rd-iconic__creds-item {
	padding: 0.5rem 0;
	border-left: 1px solid rgba(9, 23, 52, 0.08);
}

.rd-iconic__creds-item:first-child { border-left: none; }

.rd-iconic__creds-label {
	font-family: var(--rd-font-nav);
	font-size: 0.62rem;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--rd-gold);
	margin: 0 0 0.8rem;
}

.rd-iconic__creds-value {
	font-family: var(--rd-font-nav);
	font-size: 1.35rem;
	font-weight: 400;
	color: var(--rd-navy);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0;
}

.rd-iconic__creds-cert {
	margin: 2.5rem 0 0;
	font-family: var(--rd-font-nav);
	font-size: 0.68rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--rd-muted);
}

/* ───────── CTA editorial (white, magazine endpage) ───────── */

.rd-iconic__cta {
	background: #ffffff;
	color: var(--rd-ink);
	text-align: center;
	padding: clamp(7rem, 13vw, 11rem) 1.5rem;
	border-top: 1px solid rgba(9, 23, 52, 0.08);
}

.rd-iconic__cta-inner { max-width: 44rem; margin: 0 auto; }

.rd-iconic__disclosure {
	width: 100%;
	background: #f7f7f7;
	padding: clamp(0.75rem, 1.6vw, 1.25rem) 1.5rem;
}

.rd-iconic__disclosure-inner {
	max-width: 83.5rem;
	margin: 0 auto;
}

.rd-iconic__disclosure-text {
	margin: 0;
	font-size: 12px;
	line-height: 1.65;
	color: var(--rd-ink);
	text-align: center;
}

.rd-iconic__cta .rd-iconic__folio {
	margin-left: auto;
	margin-right: auto;
}

.rd-iconic__cta-title {
	font-family: var(--rd-font-nav);
	font-weight: 400;
	font-size: clamp(1.8rem, 3.4vw, 2.8rem);
	line-height: 1.15;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	margin: 0 0 1.6rem;
	color: var(--rd-navy);
}

.rd-iconic__cta-copy {
	font-family: var(--rd-font);
	font-size: 1.1rem;
	line-height: 1.6;
	color: var(--rd-muted);
	margin: 0 0 3rem;
}

.rd-iconic__cta-btn {
	display: inline-block;
	font-family: var(--rd-font-nav);
	font-size: 0.72rem;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--rd-navy);
	text-decoration: none;
	border-bottom: 1px solid var(--rd-navy);
	padding: 0.5rem 0 0.35rem;
	transition: opacity 0.25s ease;
}

.rd-iconic__cta-btn:hover { opacity: 0.6; }

/* ───────── discover more ───────── */

.rd-iconic__more {
	background: #ffffff;
	padding: clamp(5rem, 9vw, 7rem) 2rem;
	border-top: 1px solid rgba(9, 23, 52, 0.08);
}

.rd-iconic__more-title {
	font-family: var(--rd-font-nav);
	text-align: center;
	font-weight: 400;
	font-size: clamp(1.2rem, 1.8vw, 1.6rem);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--rd-navy);
	margin: 0 0 3rem;
}

.rd-iconic__more-grid {
	max-width: 84rem;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2.5rem;
}

.rd-iconic__more-item {
	text-align: center;
	text-decoration: none;
	color: var(--rd-ink);
}

.rd-iconic__more-img {
	width: 100%;
	aspect-ratio: 1/1;
	object-fit: cover;
	background: #ffffff;
	mix-blend-mode: multiply;
	margin-bottom: 1.2rem;
}

.rd-iconic__more-name {
	font-family: var(--rd-font-nav);
	font-weight: 400;
	font-size: 0.92rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--rd-navy);
	margin: 0 0 0.4rem;
}

.rd-iconic__more-spec {
	font-family: var(--rd-font-nav);
	font-size: 0.68rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--rd-muted);
	margin: 0;
}

/* ───────── responsive ───────── */

/* ───────── compare slider (before/after, drag a handle to reveal) ───────── */

.rd-iconic__compare {
	position: relative;
	width: 100%;
	max-width: min(36vw, 440px);
	max-height: 60vh;
	aspect-ratio: 5/4;
	margin: 0 auto;
	overflow: hidden;
	background: #ffffff;
	touch-action: none;
	user-select: none;
	/* No blend mode here: page bg, container bg and image bgs are all white,
	   so no halo to remove. Avoiding multiply prevents the "ghosting" where
	   the front's white turns transparent and lets the back image bleed through. */
}

/* Bump specificity to override .rd-iconic__split-media img (multiply + aspect-ratio). */
.rd-iconic__compare .rd-iconic__compare-back,
.rd-iconic__compare .rd-iconic__compare-front {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 0 8%;
	box-sizing: border-box;
	aspect-ratio: auto;
	background: #ffffff;
	mix-blend-mode: normal;
}

.rd-iconic__compare .rd-iconic__compare-front {
	clip-path: inset(0 calc(100% - var(--pos)) 0 0);
	background: #ffffff;
	padding: 0 8%;
}

/* Polished stone (back) rendered 20% smaller than the rough (front). */
.rd-iconic__compare .rd-iconic__compare-back {
	transform: scale(0.8);
	transform-origin: 50% 50%;
}

/* Royal Blush: shrink the "after" (polished heart) a further 30% on top of the
   global 0.8 → 0.56, mirror it horizontally, and rotate it 40° to the left.
   The rotate sits after scaleX(-1), so the mirrored axis flips its sense — +40deg
   here reads as 40° counter-clockwise (left) on screen. Scoped to the term so
   other compare sliders keep 0.8 and their original orientation. */
.term-royal-blush .rd-iconic__compare .rd-iconic__compare-back {
	transform: scale(0.56) scaleX(-1) rotate(40deg);
}

.rd-iconic__compare-handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--pos);
	width: 80px;
	transform: translateX(-50%);
	z-index: 3;
	cursor: ew-resize;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Round knob — contains the vertical gold trail + running dot inside. */
.rd-iconic__compare-knob {
	position: relative;
	z-index: 1;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: #ffffff;
	box-shadow: 0 4px 14px rgba(9, 23, 52, 0.18), 0 0 0 1px rgba(9, 23, 52, 0.06);
	opacity: 0.85;
	transition: transform 0.2s ease, opacity 0.2s ease;
	overflow: hidden;
}

.rd-iconic__compare:hover .rd-iconic__compare-knob,
.rd-iconic__compare.is-dragging .rd-iconic__compare-knob {
	opacity: 1;
}

.rd-iconic__compare:hover .rd-iconic__compare-knob,
.rd-iconic__compare.is-dragging .rd-iconic__compare-knob {
	transform: scale(1.06);
}

/* Horizontal gold trail inside the knob, dot runs left → right. */
.rd-iconic__compare-trail {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 22px;
	height: 1px;
	transform: translate(-50%, -50%);
	background: linear-gradient(
		to right,
		color-mix(in srgb, var(--rd-gold) 14%, transparent),
		color-mix(in srgb, var(--rd-gold) 60%, transparent)
	);
	overflow: visible;
	pointer-events: none;
}

.rd-iconic__compare-dot {
	position: absolute;
	top: 50%;
	left: 0;
	width: 5px;
	height: 5px;
	margin-top: -2.5px;
	border-radius: 50%;
	background: var(--rd-gold);
	box-shadow: 0 0 6px color-mix(in srgb, var(--rd-gold) 60%, transparent);
	animation: rd-iconic-compare-dot 2s cubic-bezier(.65, 0, .35, 1) infinite;
}

@keyframes rd-iconic-compare-dot {
	0%   { transform: translateX(0);    opacity: 0; }
	15%  {                                opacity: 1; }
	78%  {                                opacity: 1; }
	100% { transform: translateX(22px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.rd-iconic__compare-dot { animation: none; opacity: 0.7; transform: translateX(10px); }
}

@media (max-width: 880px) {
	/* Hero on mobile: reorder to title → specs → images */
	.rd-iconic__hero {
		min-height: auto;
	}

	.rd-iconic__hero-text {
		order: 1;
	}

	.rd-iconic__hero-spec {
		margin-top: 0.5rem;
	}

	.rd-iconic__hero-image {
		order: 3;
		flex: 0 1 auto;
		min-height: auto;
		margin-top: 2rem;
	}

	/* Hero slide images: horizontal slider on mobile */
	.rd-iconic__hero-image--slide {
		flex-direction: row;
		gap: 0;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
		width: 100vw;
		margin-left: calc(-50vw + 50%);
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		height: auto;
	}

	.rd-iconic__hero-img,
	.rd-iconic__hero-image--slide img {
		width: 100vw;
		flex: 0 0 auto;
		scroll-snap-align: center;
		max-width: 100vw;
		max-height: 100%;
		height: auto;
		object-fit: contain;
		mix-blend-mode: multiply;
	}

	.rd-iconic__hero-img--from-left {
		animation: none;
	}

	.rd-iconic__hero-img--from-right {
		display: block;
		animation: none;
	}

	.rd-iconic__hero-dots {
		display: flex;
	}

	.rd-iconic__split {
		display: flex;
		flex-direction: column;
		padding: 4rem 15px;
	}
	.rd-iconic__split-text {
		display: contents;
	}
	.rd-iconic__split .rd-iconic__folio { order: 1; text-align: center; margin-bottom: 0.4rem; }
	.rd-iconic__split .rd-iconic__section-title { order: 2; text-align: center; }
	.rd-iconic__split .rd-iconic__split-media,
	.rd-iconic__split--invert .rd-iconic__split-media { order: 3; width: 100%; }
	.rd-iconic__split .rd-iconic__body { order: 4; margin-top: 1.5rem; }
	.rd-iconic__split .rd-iconic__split-cap { order: 5; }

	/* On mobile the wrapper goes full-width so the compare slider keeps its
	   existing centring behaviour (margin:auto + its own max-width). */
	.rd-iconic__compare-wrap { max-width: 100%; }

	/* Quote + CTA: 15px lateral to match the rest. */
	.rd-iconic__quote { padding-left: 15px; padding-right: 15px; }
	.rd-iconic__cta { padding-left: 15px; padding-right: 15px; }

	/* Map bg softer + Tanzania marker hidden on mobile. */
	.rd-iconic__split-bg { opacity: 0.18; }
	.rd-iconic__split-bg::after { display: none; }

	/* Caption: tighter + centered on mobile so it doesn't orphan-wrap. */
	.rd-iconic__split-cap {
		font-size: 0.58rem;
		letter-spacing: 0.12em;
		margin-top: 0.4rem;
		text-align: center;
	}

	/* Gallery: main image on top, thumbs in a row below. */
	.rd-iconic__gallery {
		flex-direction: column;
		padding-right: 0;
		gap: 18px;
	}
	.rd-iconic__split-media .rd-iconic__gallery-main {
		max-width: 100%;
		max-height: none;
	}
	.rd-iconic__compare {
		max-width: 100%;
		max-height: none;
	}
	.rd-iconic__gallery-thumbs {
		position: static;
		transform: none;
		flex-direction: row;
		justify-content: flex-start;
		overflow-x: auto;
		flex-wrap: nowrap;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding: 4px 1rem;
		margin: 0;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}
	.rd-iconic__gallery-thumbs::-webkit-scrollbar { display: none; }
	.rd-iconic__gallery-thumb {
		flex: 0 0 auto;
		width: 72px;
		height: 72px;
		scroll-snap-align: center;
	}
	/* Centra os thumbs se couberem todos sem scroll. */
	.rd-iconic__gallery-thumbs:not(:has(.rd-iconic__gallery-thumb:nth-child(4))) {
		justify-content: center;
	}

	.rd-iconic__creds-inner { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
	.rd-iconic__creds-item:nth-child(odd) { border-left: none; }
	.rd-iconic__more-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
	.rd-iconic__stage { min-height: 60vh; }
	.rd-iconic__stage img { max-width: 88vw; }
	.rd-iconic__hero-image img { max-width: 95vw; }
	.rd-iconic__hero {
		padding: 2rem 15px 2rem;
		min-height: 0;
	}
	.rd-iconic__lede { max-width: 100%; }

	/* Justify body copy on mobile (lede stays centered as a subtitle). */
	.rd-iconic__quote-text,
	.rd-iconic__cta-copy,
	.rd-iconic__body p { text-align: justify; }
	.rd-iconic__lede { text-align: center; }
	.rd-iconic__body.rd-iconic__body--lead p { text-align: center; }

	/* Luna Azul: restore the two-line title + wrapping lede on mobile. */
	.rd-iconic__display--oneline .rd-iconic__display-line { display: block; }
	.rd-iconic__lede--nowrap { white-space: normal; max-width: 100%; }
}