/* =============================================================================
   Raven Tech — Home section styles
   OWNED BY PHASE 3A/3B — do not edit from other phases.
   Hero, trusted partners, what-we-do, interactive map, built-for-every-
   environment carousel, testimonials, CTA split, blog (front-page.php).

   Phase 3A ships: hero (+ shared cert-strip), trusted partners, what-we-do,
   and the shared components card-feature / section-head / logo-row (their
   base rules live here since this is the only stylesheet Phase 3A owns —
   Services/etc may add contextual overrides in their own section file).
   ========================================================================== */

/* =================================================================== HERO */
/* Node 4:86 (layout) / 133:29 (real photo). #EDF2FB tint bg, photo bled to
   the right edge under a left-to-right wash + a faint diagonal texture,
   Title 66 with gradient lead phrase, Body copy, two buttons, Small Body
   note. No true header/hero overlap in this build (the translucent nav is
   `position: sticky`, not layered over the hero at rest) — the Figma canvas
   simply composites both; visually the hero starts directly below the nav. */
.rt-hero {
	position: relative;
	overflow: hidden;
	background: var(--rt-hero-tint);
}
.rt-hero__bg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	pointer-events: none;
}
.rt-hero__photo {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 30%;
	background-image: url("../../img/hero-photo.jpg");
	background-size: cover;
	background-position: center 20%;
}
.rt-hero__wash {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(-90deg, rgba(237, 242, 251, 0) 0%, #edf2fb 89.554%);
}
.rt-hero__texture {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: url("../../img/hero-texture.jpg");
	background-size: cover;
	background-position: center bottom;
	opacity: 0.2;
}
.rt-hero__inner {
	position: relative;
	display: flex;
	align-items: center;
	min-height: max(560px, min(58vw, 715px));
	padding-top: max(48px, min(8vw, 96px));
	padding-bottom: max(48px, min(8vw, 96px));
}
.rt-hero__text {
	max-width: 710px;
	width: 100%;
}
.rt-hero__title {
	margin-bottom: 0.45em;
}
.rt-hero__text-body {
	max-width: 620px;
	opacity: 0.75;
	margin-bottom: 28px;
}
.rt-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-bottom: 24px;
}
.rt-hero__note {
	opacity: 0.65;
	max-width: 386px;
}

@media (max-width: 1024px) {
	.rt-hero__photo { top: 0; right: 0; bottom: 0; left: 15%; }
}

@media (max-width: 768px) {
	.rt-hero__inner { min-height: auto; }
	.rt-hero__photo { position: static; height: 260px; margin-bottom: 24px; top: auto; right: auto; bottom: auto; left: auto; }
	.rt-hero__wash { display: none; }
	.rt-hero__bg { position: static; }
	.rt-hero__text { max-width: none; }
}

@media (max-width: 390px) {
	.rt-hero__actions { flex-direction: column; align-items: stretch; }
	.rt-hero__actions .rt-btn { width: 100%; }
}

/* ======================================================= SECTION HEAD */
/* Shared by every section below (and reused by later phases). Centered by
   default; `--left` left-aligns for two-column layouts. */
.rt-section-head {
	max-width: 709px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	margin-bottom: 40px;
}
.rt-section-head__title {
	margin-bottom: 0.35em;
}
.rt-section-head__sub {
	opacity: 0.75;
	margin: 0;
}
.rt-section-head--left {
	margin-left: 0;
	margin-right: 0;
	text-align: left;
}

/* ============================================================ PARTNERS */
/* Node 4:98 — "Trusted Partner of:" + 4 logo boxes (Settings-driven). */
.rt-partners {
	padding-top: 56px;
	padding-bottom: 56px;
}
.rt-partners__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 24px 40px;
}
.rt-partners__title {
	flex: none;
	margin: 0;
	white-space: nowrap;
}
.rt-partners__logos {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 17px;
	flex: 1 1 auto;
	min-width: 0;
}
.rt-partners__logobox {
	width: 189px;
	height: 74px;
	max-width: 100%;
	flex: none;
	background: var(--rt-grey-box);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.rt-partners__logoimg {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 10px;
}
.rt-partners__logo-placeholder {
	font: 400 16px/1 var(--rt-font-body);
	color: var(--rt-black);
}

/* Five or more logos (logo-row.php adds the modifier): the Figma row becomes a
   continuous marquee, so the section keeps one fixed height no matter how long
   the partner list gets. Strip runs beside the title, as in the static row;
   below 768px it stacks under it (see the mobile block). */
.rt-partners__inner--marquee {
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	text-align: left;
	gap: 40px;
	/* The base rule wraps; wrapping here would let the container grow a second
	   track column and size itself to the full track width instead of clipping. */
	flex-wrap: nowrap;
}
/* Title takes only the width of its own text. It used to reserve a flat third of
   the container, which at 1440 was ~160px more than the words needed — the strip
   started a long way right of the heading and the dead space in between read as
   "the logos are missing" rather than as a gap. */
.rt-partners__inner--marquee .rt-partners__title {
	flex: 0 0 auto;
	text-align: left;
	white-space: nowrap;
}

.rt-partners__marquee {
	/* min-width:0 is what actually lets this clip: a flex item defaults to
	   min-width:auto, i.e. never narrower than its content, and the track is
	   several thousand px wide. */
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	position: relative;
}
/* Fade the ends so logos enter and leave instead of being cut off mid-box.
   These are overlay gradients rather than a mask-image on the strip itself: a
   mask makes the whole strip a composited layer whose contents can fail to paint
   on some GPU/driver combinations, and when that happens the logos vanish
   entirely while the title stays put. Painting the fade over the top instead
   cannot take the logos with it if it fails. Safe because the section sits on
   flat --rt-white; revisit if it ever gets a photo or gradient background. */
.rt-partners__marquee::before,
.rt-partners__marquee::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 64px;
	max-width: 12%;
	pointer-events: none;
	z-index: 1;
}
.rt-partners__marquee::before {
	left: 0;
	background: linear-gradient(90deg, var(--rt-white), transparent);
}
.rt-partners__marquee::after {
	right: 0;
	background: linear-gradient(270deg, var(--rt-white), transparent);
}

.rt-partners__track {
	display: flex;
	width: max-content;
	animation: rt-marquee var(--rt-marquee-duration, 40s) linear infinite;
}
/* Let people stop it to read a logo — pointer or keyboard. */
.rt-partners__marquee:hover .rt-partners__track,
.rt-partners__marquee:focus-within .rt-partners__track {
	animation-play-state: paused;
}

.rt-partners__half {
	display: flex;
	gap: 17px;
	padding-right: 17px; /* keeps the seam gap equal to the others. */
	flex: none;
}

@keyframes rt-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* Motion off: main.css neutralises the animation globally, which would leave
   the strip frozen mid-slide and clipping logos. Reset the transform and hand
   over to normal scrolling instead. */
@media (prefers-reduced-motion: reduce) {
	.rt-partners__marquee {
		overflow-x: auto;
	}
	/* No fade over a strip the user scrolls by hand — it would hide the logo at
	   whichever end they have scrolled to. */
	.rt-partners__marquee::before,
	.rt-partners__marquee::after {
		display: none;
	}
	.rt-partners__track {
		animation: none;
		transform: none;
	}
	.rt-partners__half[aria-hidden="true"] {
		display: none;
	}
}

@media (max-width: 768px) {
	.rt-partners__inner { justify-content: center; text-align: center; }
	.rt-partners__logos { justify-content: center; }
	/* Beside the title leaves too little room here to show much more than a
	   single logo, so the strip drops below it and runs the full width. */
	.rt-partners__inner--marquee {
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
		text-align: center;
	}
	.rt-partners__inner--marquee .rt-partners__title {
		text-align: center;
		white-space: normal;
	}
	/* Column flex puts the main axis vertical, so flex-basis:0 would collapse the
	   height instead of sizing the width. */
	.rt-partners__marquee {
		flex: 0 0 auto;
		width: 100%;
	}
}
@media (max-width: 480px) {
	/* Two-up only in the static wrapped layout. Scoped to .rt-partners__logos on
	   purpose: inside the marquee, 50% resolves against the multi-thousand-px
	   track, which blew each box up to ~1200px and pushed the logo out of view. */
	.rt-partners__logos .rt-partners__logobox { width: calc(50% - 9px); }
}

/* ============================================================ WHAT WE DO */
/* Node 5:117 — faint bg photo (Settings-driven, --rt-whatwedo-bg) + white
   fade-up gradient, centered section head, 4 icon cards. */
.rt-whatwedo {
	position: relative;
	overflow: hidden;
	padding-top: 100px;
	padding-bottom: 90px;
}
.rt-whatwedo__bg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: var(--rt-whatwedo-bg);
	background-size: cover;
	background-position: center;
	opacity: 0.17;
}
.rt-whatwedo__fade {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(to top, #fff 0%, rgba(255, 255, 255, 0) 23.372%);
}
.rt-whatwedo__inner {
	position: relative;
}
.rt-whatwedo__cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 27px;
}
/* .rt-wrap's own side padding (--rt-gutter, up to 40px) plus its 1195px cap
   leaves only ~1115px of usable width — a few px short of 4×278 cards + 3×27
   gaps (1193px). Bleed just this row back out to the wrap's full 1195px so
   the four cards sit in one row as designed; the section head above (709px,
   centered) is unaffected. Reverts to normal padding at the 2-col/1-col
   breakpoints below, so nothing bleeds to the viewport edge on tablet/mobile. */
@media (min-width: 1025px) {
	.rt-whatwedo__cards {
		margin-left: calc(-1 * var(--rt-gutter));
		margin-right: calc(-1 * var(--rt-gutter));
	}
}

/* ---------------------------------------------------------- card-feature */
/* Shared by What We Do (here) and Who We Serve (services page, taller
   variant via contextual override in services.css). */
.rt-card-feature {
	display: block;
	flex: 0 1 278px;
	max-width: 100%;
	min-height: 277px;
	background: var(--rt-white);
	border-radius: var(--rt-radius);
	box-shadow: var(--rt-shadow);
	padding: 24px;
	text-decoration: none;
	color: inherit;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
a.rt-card-feature:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}
.rt-card-feature__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 16px;
	color: var(--rt-red);
}
.rt-card-feature__icon .rt-icon {
	width: 100%;
	height: 100%;
}
.rt-card-feature__title {
	margin-bottom: 0.4em;
}
.rt-card-feature__text {
	opacity: 0.75;
	margin: 0;
}

@media (max-width: 1024px) {
	.rt-whatwedo__cards { gap: 20px; }
	.rt-card-feature { flex: 0 1 calc(50% - 10px); }
}
@media (max-width: 480px) {
	.rt-card-feature { flex: 0 1 100%; }
}

/* =========================================================================
   PHASE 3B — interactive map / built-for-every-environment / testimonials /
   blog (front-page.php sections 5, 6, 7, 9). Section 8 (CTA split) reuses
   template-parts/components/cta-split.php, styled in sections/services.css.
   ========================================================================== */

/* ================================================== SHARED CAROUSEL BASE */
/* Markup/behavior contract: assets/js/carousel.js. Scroll-snap track + a
   sibling square-dot nav row; powers both the environment carousel (6) and
   the testimonials carousel (7). */
.rt-carousel {
	position: relative;
}
.rt-carousel__track {
	display: flex;
	min-width: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.rt-carousel__track::-webkit-scrollbar {
	display: none;
}
.rt-carousel__slide {
	flex: 0 0 100%;
	min-width: 0;
	scroll-snap-align: start;
}
.rt-carousel__dots {
	display: flex;
	gap: 8px;
}
.rt-carousel__dot {
	width: 12px;
	height: 12px;
	flex: none;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: rgba(255, 255, 255, 0.75);
	cursor: pointer;
	transition: transform 0.15s ease;
}
.rt-carousel__dot.is-active {
	background: var(--rt-gradient);
}
.rt-carousel__dot:hover {
	transform: scale(1.15);
}
/* Safari <15.4 invalidates any selector containing :focus-visible and drops
   the whole rule — which also killed the :hover halves that shared these
   selectors. Rings are therefore declared on plain :focus (understood
   everywhere) and suppressed for pointer focus by a :focus:not(:focus-visible)
   rule that old Safari drops, leaving it with a ring on every focus. */
.rt-carousel__dot:focus {
	outline: 2px solid var(--rt-red);
	outline-offset: 2px;
}
.rt-carousel__dot:focus:not(:focus-visible) {
	outline: none;
}

/* =================================================== INTERACTIVE MAP (5) */
/* Node 5:482 (intro) / 87:86 (project selected). Left: map-neks.svg (pins
   stripped — see the note at the bottom of map-interactive.php) with
   rt_project pin buttons positioned by meta map_x/map_y %; right: a
   two-state panel (intro copy <-> case study) swapped by assets/js/map.js. */
.rt-map {
	position: relative;
	overflow: hidden;
	padding-top: 90px;
	padding-bottom: 90px;
}
.rt-map__bg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: var(--rt-map-bg);
	background-size: cover;
	background-position: center;
	opacity: 0.6;
}
.rt-map__fade {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, #fff 100%);
}
.rt-map__inner {
	position: relative;
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: max(32px, min(5vw, 72px));
}
/* Wider than the Figma frame's 520px: the pins are real project coords, and
   at 520 the closer localities crowd each other, so the map takes the larger
   share of the 1115px content row and the panel gives up the difference.
   Both bases are % of the row (not px) so the pair never exceeds one flex
   line and wraps only at the stacking breakpoint below. */
.rt-map__mapcol {
	flex: 1 1 57%;
	max-width: 650px;
}
.rt-map__svgwrap {
	position: relative;
	width: 100%;
	aspect-ratio: 520 / 499;
}
.rt-map__svg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
}
/* Pins per Figma 87:86: white circles, black glyphs; the selected pin is
   larger with a 65%-white fill that reads blush-pink over the red map. */
.rt-map__pin {
	position: absolute;
	transform: translate(-50%, -50%);
	width: 62px;
	height: 62px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--rt-white);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, width 0.18s ease, height 0.18s ease;
}
.rt-map__pin .rt-icon {
	width: 32px;
	height: 32px;
	/* Sprite glyphs carry baked brand-red fills (used as-is elsewhere);
	   pins need them black regardless, per the mockup. */
	filter: brightness(0);
}
.rt-map__pin:hover,
.rt-map__pin:focus {
	transform: translate(-50%, -50%) scale(1.12);
	z-index: 2;
}
/* Pins are keyboard-focusable buttons (see map-interactive.php) — give
   keyboard users a real focus ring distinct from the shared hover/focus
   scale-up above; hover alone (mouse-only) stays without an outline. */
.rt-map__pin:focus {
	outline: 3px solid var(--rt-red);
	outline-offset: 3px;
}
.rt-map__pin:focus:not(:focus-visible) {
	outline: none;
}
.rt-map__pin.is-active {
	/* Above its neighbours whether or not the pointer is on it — the enlarged
	   selected pin overlaps them, and selection also comes from the text links
	   and the keyboard, where the hover z-index above doesn't apply. */
	z-index: 3;
	width: 86px;
	height: 86px;
	background: rgba(255, 255, 255, 0.65);
	border: 3px solid var(--rt-white);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.rt-map__pin.is-active .rt-icon {
	width: 44px;
	height: 44px;
}
.rt-map__panel {
	flex: 1 1 36%;
	min-width: 280px;
	position: relative;
	min-height: 300px;
}
.rt-map__state {
	transition: opacity 0.16s ease;
}
.rt-map__panel.is-swapping .rt-map__state:not([hidden]) {
	opacity: 0;
}
/* Intro-state text links — one per pin, so the case studies are reachable
   without aiming at the map (and readable as a plain list of locations). */
.rt-map__links {
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.rt-map__link {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 10px;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background: none;
	text-align: left;
	font-family: var(--rt-font-body);
	font-size: 16px;
	line-height: 1.5;
	color: var(--rt-red);
	cursor: pointer;
}
.rt-map__link-title {
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.rt-map__link:hover .rt-map__link-title,
.rt-map__link:focus .rt-map__link-title {
	text-decoration-thickness: 2px;
}
.rt-map__link-locality {
	font-size: 15px;
	color: var(--rt-ink-soft);
}
.rt-map__link:focus {
	outline: 3px solid var(--rt-red);
	outline-offset: 3px;
}
.rt-map__link:focus:not(:focus-visible) {
	outline: none;
}
.rt-map__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
	padding: 0;
	border: 0;
	background: none;
	font: 700 14px var(--rt-font-body);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--rt-red);
	cursor: pointer;
}
.rt-map__back-arrow {
	font-size: 16px;
	line-height: 1;
}
.rt-map__detail-title {
	margin-bottom: 0.2em;
}
.rt-map__detail-locality {
	margin-bottom: 1em;
}
.rt-map__detail-story p {
	margin-bottom: 1em;
	opacity: 0.75;
}
.rt-map__detail-story strong {
	opacity: 1;
}

@media (max-width: 1024px) {
	.rt-map__inner { flex-direction: column; }
	.rt-map__mapcol {
		/* .rt-map__mapcol's row-layout `flex: 1 1 57%` sets a flex-basis that
		   flex-direction:column reinterprets as a *height*, collapsing the
		   column to 0 width (and, with it, every %-positioned pin) — reset
		   sizing to plain block/width rules once stacked. Stacked, the map has
		   the whole row, so it keeps roughly its desktop size instead of
		   shrinking the pin cluster back into a pile. */
		flex: 0 0 auto;
		width: 100%;
		max-width: 640px;
		margin-left: auto;
		margin-right: auto;
	}
	.rt-map__panel {
		flex: 0 0 auto;
		width: 100%;
		min-height: 0;
	}
}
/* Below ~600px the map is viewport-bound and can't grow any further, so the
   pins step down instead of the map up: the cluster's tightest pair sits ~60px
   apart here, which 62px pins would overlap. */
@media (max-width: 600px) {
	.rt-map__pin { width: 48px; height: 48px; }
	.rt-map__pin .rt-icon { width: 24px; height: 24px; }
	.rt-map__pin.is-active { width: 64px; height: 64px; }
	.rt-map__pin.is-active .rt-icon { width: 32px; height: 32px; }
}
@media (max-width: 480px) {
	.rt-map { padding-top: 56px; padding-bottom: 56px; }
}
/* Phone widths leave the map ~340px, closing that pair to ~38px — one more
   step down. The .rt-map__links list is the real affordance at this size. */
@media (max-width: 430px) {
	.rt-map__pin { width: 38px; height: 38px; }
	.rt-map__pin .rt-icon { width: 20px; height: 20px; }
	.rt-map__pin.is-active { width: 52px; height: 52px; }
	.rt-map__pin.is-active .rt-icon { width: 26px; height: 26px; }
}

/* ===================================== BUILT FOR EVERY ENVIRONMENT (6) */
/* Node 5:483 / carousel 6:497. Full-width 50/50 split (not wrap-constrained,
   matching the CTA split's own edge-to-edge treatment) — left white text,
   right photo carousel w/ dark overlay + white title + square dots. */
.rt-environment {
	display: grid;
	/* minmax(0, 1fr), not bare 1fr: a bare `1fr` track has an implicit
	   `min-width: auto` floor, so a long, unbreakable category name (e.g.
	   "Colleges/Universities") in the carousel's min-content measurement
	   blows the column out past 50% and drags the whole grid — and the
	   scroll-snap carousel's slide math — wider than the viewport. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	background: var(--rt-white);
	overflow: hidden;
}
.rt-environment__inner {
	display: contents;
}
.rt-environment__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: max(40px, min(6vw, 90px)) max(24px, min(6vw, 140px)) max(40px, min(6vw, 90px)) max(24px, min(8vw, 163px));
}
.rt-environment__text .rt-section-head {
	max-width: 467px;
	margin-bottom: 0;
}
.rt-environment__carousel {
	position: relative;
	min-width: 0;
	min-height: 380px;
}
.rt-env-carousel {
	height: 100%;
	min-height: 380px;
	overflow: hidden;
}
.rt-env-carousel .rt-carousel__track {
	height: 100%;
}
/* Figma 6:497/87:79: the title block sits vertically centered in the slide
   (title top y≈150 of 458), NOT bottom-anchored; the dots ride ~35px below
   the centered title (absolute, offset from the vertical midpoint). */
.rt-env-carousel__slide {
	height: 100%;
	position: relative;
	display: flex;
	align-items: center;
	padding: 40px;
	background-size: cover;
	background-position: center;
}
.rt-env-carousel__overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.4);
}
.rt-env-carousel__title {
	position: relative;
	z-index: 1;
	margin: 0;
	max-width: 100%;
	color: var(--rt-white);
	font-family: var(--rt-font-heading);
	font-weight: 700;
	font-size: max(30px, min(3.4vw, 66px));
	line-height: 1.1;
	text-transform: uppercase;
	overflow-wrap: break-word;
	word-break: break-word;
}
.rt-env-carousel__title span {
	display: block;
}
.rt-env-carousel__dots {
	position: absolute;
	left: 40px;
	top: calc(50% + 78px);
	z-index: 2;
}

@media (max-width: 1024px) {
	.rt-environment { grid-template-columns: 1fr; }
	.rt-environment__text { padding: 56px max(24px, min(6vw, 60px)) 40px; }
	.rt-environment__carousel,
	.rt-env-carousel { min-height: 340px; }
}
@media (max-width: 480px) {
	.rt-env-carousel__title { font-size: max(26px, min(8vw, 34px)); }
	.rt-env-carousel__slide { padding: 24px; }
	.rt-env-carousel__dots { left: 24px; top: calc(50% + 48px); }
}

/* ================================================== TESTIMONIALS (7) */
/* Node 7:506 — black section + bg photo @20%; left fixed title, right
   carousel: stars, quote, name/business, city, square dots. */
.rt-testimonials {
	position: relative;
	overflow: hidden;
	background: var(--rt-black);
	color: var(--rt-white);
	padding-top: 90px;
	padding-bottom: 90px;
}
.rt-testimonials__bg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: var(--rt-testimonials-bg);
	background-size: cover;
	background-position: center;
	opacity: 0.2;
}
.rt-testimonials__inner {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: max(40px, min(6vw, 90px));
}
.rt-testimonials__title {
	flex: 1 1 380px;
	max-width: 457px;
	margin: 0;
	color: var(--rt-white);
}
.rt-review-carousel {
	flex: 1 1 420px;
	min-width: 280px;
}
.rt-review {
	margin: 0;
}
.rt-review__stars {
	display: flex;
	gap: 6px;
	margin-bottom: 20px;
}
.rt-review__star .rt-icon {
	width: 26px;
	height: 29px;
	fill: none;
}
.rt-review__star--empty {
	opacity: 0.25;
}
.rt-review__quote {
	color: var(--rt-white);
	max-width: 580px;
	margin-bottom: 20px;
}
.rt-review__meta {
	margin: 0;
}
.rt-review__name {
	display: block;
	font-style: normal;
	color: rgba(255, 255, 255, 0.75);
	margin-bottom: 6px;
}
.rt-review__city {
	color: rgba(255, 255, 255, 0.75);
	margin: 0 0 24px;
}

@media (max-width: 1024px) {
	.rt-testimonials__inner { flex-direction: column; align-items: flex-start; }
	/* Same fix as the map section: a row-layout `flex-basis` in px is
	   reinterpreted as a *height* once flex-direction switches to column,
	   which both overflows the title past the viewport and starves the
	   carousel's width. */
	.rt-testimonials__title,
	.rt-review-carousel {
		flex: 0 0 auto;
		width: 100%;
		max-width: 100%;
	}
}
@media (max-width: 480px) {
	.rt-testimonials { padding-top: 56px; padding-bottom: 56px; }
}

/* ============================================================== BLOG (9) */
/* Node 7:548, card 7:546 — near-white section bg, 3 blog cards (image top,
   title, 2-sentence excerpt, "READ MORE" + rule). */
.rt-blog {
	background: #faf8f8;
	padding-top: 90px;
	padding-bottom: 90px;
}
.rt-blog__cards {
	display: flex;
	flex-wrap: wrap;
	gap: 37px;
	margin-top: 16px;
}
.rt-blog-card {
	display: block;
	width: 345px;
	max-width: 100%;
	flex: 0 1 345px;
	background: var(--rt-white);
	border-radius: var(--rt-radius);
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.rt-blog-card:hover {
	transform: translateY(-4px);
	box-shadow: 6px 8px 18px rgba(0, 0, 0, 0.16);
}
/* An <img>, not a background: the width/height attributes reserve the box
   before it loads, and object-fit reproduces the old `background-size: cover`
   for the (rare) source whose crop isn't the slot's 345:163. */
.rt-blog-card__thumb {
	display: block;
	width: 100%;
	height: 163px;
	object-fit: cover;
	object-position: center;
}
.rt-blog-card__body {
	padding: 22px 32px 28px 30px;
}
.rt-blog-card__title {
	margin-bottom: 0.35em;
}
/* Publish date — spec'd by the Resources wireframe, not the Figma card, so it
   is kept quiet: uppercase micro-label between title and excerpt. */
.rt-blog-card__date {
	display: block;
	margin-bottom: 0.6em;
	font-family: var(--rt-font-heading);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--rt-red);
}
.rt-blog-card__excerpt {
	opacity: 0.75;
	margin-bottom: 1em;
}
.rt-blog-card__more {
	display: inline-block;
	font: 700 16px var(--rt-font-heading);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--rt-black);
	/* The Figma rule is ~100px, but the label must never wrap — let the
	   underline track the text width instead of clamping it. */
	white-space: nowrap;
	min-width: 100px;
}

@media (max-width: 1024px) {
	.rt-blog-card { flex: 0 1 calc(50% - 19px); width: auto; }
}
@media (max-width: 768px) {
	.rt-blog-card { flex: 0 1 100%; }
}
@media (max-width: 480px) {
	.rt-blog { padding-top: 56px; padding-bottom: 56px; }
}

/* ------------------------------------------- legacy: aspect-ratio fallback */
@supports not (aspect-ratio: 1 / 1) {
	.rt-map__svgwrap::before {
		content: "";
		display: block;
		padding-top: 95.9615%; /* 499 / 520 */
	}
}

/* =============================================================================
   LEGACY FALLBACK — flexbox `gap`
   `gap` only works on flex containers from Safari 14.1; before that it is
   ignored outright and every flex row/stack in this file collapses to zero
   spacing. WebKit shipped flex `gap` and the `inset` shorthand in the same
   release, so `@supports not (inset: 0)` is an exact probe for "this engine
   has no flex gap" on Safari (and only catches a few pre-2020 Chrome/Firefox
   builds, which get the same correct spacing anyway).

   Recipes below, matching each container's direction:
     column        -> `> * + *` margin-top
     row, no wrap  -> `> * + *` margin-left
     row + wrap    -> margin-bottom on every child + margin-right on all but
                      the last, with a negative margin-bottom on the container
                      cancelling the trailing row. Containers that are
                      themselves children of another wrapping container skip
                      that compensation, since their parent already sets
                      margin-bottom on them.
   Modern browsers never see any of this.
   ========================================================================== */
@supports not (inset: 0) {
	/* column stacks */
	.rt-map__links > * + * { margin-top: 10px; }

	/* single-line rows */
	.rt-partners__inner--marquee > * + * { margin-left: 40px; }
	.rt-partners__half > * + * { margin-left: 17px; }
	.rt-carousel__dots > * + * { margin-left: 8px; }
	.rt-map__back > * + * { margin-left: 8px; }
	.rt-review__stars > * + * { margin-left: 6px; }

	/* wrapping rows */
	.rt-hero__actions > * { margin-bottom: 16px; }
	.rt-hero__actions > *:not(:last-child) { margin-right: 16px; }
	.rt-hero__actions { margin-bottom: 8px; }
	/* ^ 8px = the rule's own 24px bottom margin minus the 16px trailing row */

	.rt-partners__inner > * { margin-bottom: 24px; }
	.rt-partners__inner > *:not(:last-child) { margin-right: 40px; }
	.rt-partners__inner { margin-bottom: -24px; }

	/* nested inside .rt-partners__inner — see the note in chrome.css */
	.rt-partners__logos > * { margin-bottom: 17px; }
	.rt-partners__logos > *:not(:last-child) { margin-right: 17px; }

	.rt-whatwedo__cards > * { margin-bottom: 27px; }
	.rt-whatwedo__cards > *:not(:last-child) { margin-right: 27px; }
	.rt-whatwedo__cards { margin-bottom: -27px; }

	.rt-map__inner > * { margin-bottom: max(32px, min(5vw, 72px)); }
	.rt-map__inner > *:not(:last-child) { margin-right: max(32px, min(5vw, 72px)); }
	.rt-map__inner { margin-bottom: -max(32px, min(5vw, 72px)); }

	.rt-map__link > * { margin-bottom: 4px; }
	.rt-map__link > *:not(:last-child) { margin-right: 10px; }
	.rt-map__link { margin-bottom: -4px; }

	.rt-testimonials__inner > * { margin-bottom: max(40px, min(6vw, 90px)); }
	.rt-testimonials__inner > *:not(:last-child) { margin-right: max(40px, min(6vw, 90px)); }
	.rt-testimonials__inner { margin-bottom: -max(40px, min(6vw, 90px)); }

	.rt-blog__cards > * { margin-bottom: 37px; }
	.rt-blog__cards > *:not(:last-child) { margin-right: 37px; }
	.rt-blog__cards { margin-bottom: -37px; }

	/* containers that switch to a column at these widths: the bottom
	   margins keep doing the work, the inline ones must stand down. */
	@media (max-width: 1024px) {
		.rt-map__inner > *, .rt-testimonials__inner > * { margin-right: 0; }
		.rt-whatwedo__cards > * { margin-bottom: 20px; }
		.rt-whatwedo__cards > *:not(:last-child) { margin-right: 20px; }
		.rt-whatwedo__cards { margin-bottom: -20px; }
	}

	@media (max-width: 768px) {
		.rt-partners__inner--marquee > * + * { margin-left: 0; margin-top: 20px; }
	}

	@media (max-width: 390px) {
		.rt-hero__actions > * { margin-right: 0; }
	}
}