/* Oasis design tokens and base typography. Shared across every page template. */

:root {
	--oasis-navy: #04152B;
	--oasis-white: #FFFFFF;
	--oasis-steel: #5B6B79;
	--oasis-steel-light: #E3E7EA;
	--oasis-ink: #10202F;

	/* Overridden inline per the Customizer palette setting, see oasis_get_color_scheme_css(). */
	--oasis-tint: #D9F3F0;
	--oasis-accent: #308F89;
	--oasis-warm: #EAF7F5;

	/*
	 * Site-wide 3-tier type system: major headings (h1/h2) in a serif for
	 * editorial weight, subheadings (h3/h4) in plain system Arial, body and
	 * small text in Avenir where the visitor's OS has it installed (mainly
	 * Mac/iOS) falling back to Nunito Sans, a free, similarly humanist
	 * geometric sans, everywhere else, since Avenir itself isn't a
	 * licensed webfont here.
	 */
	--oasis-font-display: 'Libre Baskerville', Georgia, serif;
	--oasis-font-heading: 'Arial', Helvetica, sans-serif;
	--oasis-font-body: 'Avenir', 'Avenir Next', 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--oasis-radius: 20px;
	--oasis-container: 1400px;
	--oasis-gap: clamp(1.5rem, 3vw, 3rem);
}

/*
 * The whole rem scale is built on this. Astra's dynamic CSS used to set
 * 91.2%, which every size, gap and padding on the site was originally
 * tuned against; dequeuing Astra's stylesheet (see
 * oasis_dequeue_parent_css()) takes its inline CSS with it, so the value
 * is declared here instead of silently falling back to the browser's
 * 16px. Bumped to 100% (client feedback: text, nav links etc. read a
 * little small) — since everything on the site sizes off this one rem
 * base, that one change scales text, spacing and gaps uniformly instead
 * of needing dozens of individual font-size tweaks.
 */
html {
	font-size: 100%;
}

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

/*
 * Minimal normalize. Astra's own stylesheet used to supply these, but the
 * child theme replaces every template it styles, so that stylesheet is
 * dequeued for the render-blocking weight it added (see
 * oasis_dequeue_parent_css()). These are the few resets that were actually
 * doing work for us.
 */
body,
figure,
blockquote {
	margin: 0;
}

ul,
ol {
	margin-top: 0;
}

img,
video,
svg {
	max-width: 100%;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

body {
	font-family: var(--oasis-font-body);
	color: var(--oasis-ink);
	overflow-x: hidden;
	/* Astra still adds .ast-separate-container to <body> and colours it
	   pale blue via its inline dynamic CSS, which we keep. Overriding
	   here since that class isn't ours to remove safely. */
	background: var(--oasis-white);
}

/* Major headings: h1/h2 only, see --oasis-font-display. */
h1,
h2 {
	font-family: var(--oasis-font-display);
	font-weight: 700;
	font-style: normal;
	color: var(--oasis-navy);
	line-height: 1.15;
	margin: 0 0 1rem;
}

/* Subheadings: h3/h4, kept in the site's existing sans, see
   --oasis-font-heading. */
h3,
h4 {
	font-family: var(--oasis-font-heading);
	font-weight: 600;
	font-style: normal;
	color: var(--oasis-navy);
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0 0 1rem;
}

h1 {
	font-size: clamp(2.5rem, 5vw, 4rem);
}

h2 {
	font-size: clamp(1.8rem, 3vw, 2.75rem);
}

h3 {
	font-size: clamp(1.25rem, 2vw, 1.5rem);
}

p {
	line-height: 1.7;
	color: var(--oasis-steel);
	font-style: normal;
}

/* Lead/sub text under a heading: the paragraph directly supporting an
   h1/h2. Body/content font (Avenir), just a size step up. */
.oasis-lead {
	font-family: var(--oasis-font-body);
	font-style: normal;
	font-size: 1.15rem;
	line-height: 1.6;
}

a {
	color: var(--oasis-accent);
}

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

.oasis-container {
	max-width: var(--oasis-container);
	margin: 0 auto;
	padding: 0 1.5rem;
}

.oasis-section {
	width: 100%;
	padding: clamp(2rem, 5vw, 3.5rem) 0;
}

.oasis-section--compact {
	padding: clamp(1rem, 3vw, 2rem) 0;
}

/* Fades into white over a fixed 100px band at the top and bottom instead
   of cutting to the tint color on a hard line against the white sections
   above/below it. */
.oasis-section--tint {
	background: linear-gradient(
		180deg,
		var(--oasis-white) 0,
		var(--oasis-tint) 100px,
		var(--oasis-tint) calc(100% - 100px),
		var(--oasis-white) 100%
	);
}

.oasis-section--navy {
	background: var(--oasis-navy);
	color: var(--oasis-white);
}

.oasis-section--navy h2,
.oasis-section--navy h3 {
	color: var(--oasis-white);
}

.oasis-section--navy p {
	color: rgba(255, 255, 255, 0.72);
}

/*
 * Pill buttons with a trailing icon circle, drawn as a ::after pseudo
 * element so every existing call site gets the icon for free with no markup
 * changes. The circle is purely decorative (aria-hidden by nature, generated
 * content isn't exposed to screen readers), the button's accessible name is
 * still just its own text.
 */

.oasis-btn {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	padding: 0.7rem 3.25rem 0.7rem 1.5rem;
	border-radius: 999px;
	font-family: var(--oasis-font-body);
	font-weight: 500;
	font-size: 0.95rem;
	text-decoration: none;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease,
		transform 0.25s ease, box-shadow 0.25s ease;
}

/*
 * The icon badge grows sideways (width only, right edge stays anchored) to
 * cover the whole button on hover. Width and height are both fixed to the
 * same value so it's a true circle at rest regardless of the button's own
 * height, centered vertically with top: 50% / translateY. border-radius
 * 999px then caps at half of whichever dimension is smaller, so it stays a
 * full circle at rest and becomes a true stadium end once the width grows
 * to fill the button, no gaps either way. As an ::after it paints after (on
 * top of) the button's own text, so the growing badge naturally covers the
 * label, no separate hiding needed. It fills with whatever background the
 * badge already uses for that button variant, no separate hover color to
 * keep in sync.
 */
.oasis-btn::after {
	content: "\2192";
	position: absolute;
	top: 50%;
	right: 0.35rem;
	width: 2rem;
	height: 2rem;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	font-size: 0.9rem;
	line-height: 1;
	transition: width 0.3s ease, background 0.25s ease, color 0.25s ease;
}

.oasis-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(4, 21, 43, 0.15);
}

.oasis-btn:hover::after {
	width: calc(100% - 0.7rem);
}

.oasis-btn--primary {
	background: var(--oasis-navy);
	color: var(--oasis-white);
	border: 1px solid var(--oasis-navy);
}

.oasis-btn--primary::after {
	background: var(--oasis-accent);
	color: var(--oasis-white);
}

.oasis-btn--primary:hover {
	border-color: var(--oasis-accent);
}

.oasis-btn--outline {
	background: transparent;
	color: var(--oasis-navy);
	border: 1px solid var(--oasis-steel);
}

.oasis-btn--outline::after {
	background: var(--oasis-navy);
	color: var(--oasis-white);
}

.oasis-btn--outline:hover {
	border-color: var(--oasis-navy);
}

.oasis-section--navy .oasis-btn--outline {
	color: var(--oasis-white);
	border-color: rgba(255, 255, 255, 0.35);
}

.oasis-section--navy .oasis-btn--outline::after {
	background: var(--oasis-white);
	color: var(--oasis-navy);
}

.oasis-section--navy .oasis-btn--outline:hover {
	border-color: var(--oasis-white);
}

/* White pill, for CTAs sitting on a colored background, see
   .oasis-card--feature. */
.oasis-btn--light {
	background: var(--oasis-white);
	color: var(--oasis-navy);
	border: 1px solid var(--oasis-white);
}

.oasis-btn--light::after {
	background: var(--oasis-navy);
	color: var(--oasis-white);
}

.oasis-btn--light:hover {
	border-color: var(--oasis-white);
}

/* Scroll reveal utility, see assets/js/reveal.js. */
.oasis-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.oasis-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.oasis-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Placeholder media block. Swap for a real <img> once photography is uploaded. */
.oasis-placeholder {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--oasis-steel-light);
	border: 1px dashed var(--oasis-steel);
	border-radius: var(--oasis-radius);
	color: var(--oasis-steel);
	font-size: 0.85rem;
	text-align: center;
	padding: 1.5rem;
}

.oasis-placeholder span {
	max-width: 32ch;
}

/* Setup notice, used wherever a Fluent Forms form ID hasn't been set yet
   (the hero quick inquiry card and the Contact page). */
.oasis-contact__notice {
	padding: 1.5rem;
	border: 1px dashed var(--oasis-steel);
	border-radius: var(--oasis-radius);
	color: var(--oasis-steel);
	font-size: 0.9rem;
}

/* Shared section components, used across the front page and interior pages.
   See template-parts/. */

.oasis-page-header {
	padding-bottom: 2rem;
}

.oasis-page-header p {
	max-width: 60ch;
}

.oasis-page-header--center {
	text-align: center;
}

.oasis-page-header--center p {
	margin-left: auto;
	margin-right: auto;
}

/*
 * Full-bleed photo hero, template-parts/photo-hero.php. Same rounded-top /
 * full-bleed treatment as the home page hero (see .oasis-hero-full in
 * front-page.css), but single-column and centered since there's no
 * quote-form card here, just eyebrow + heading + subtext + one CTA.
 */
.oasis-photo-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(420px, 90vh, 900px);
	padding: 3rem 0;
	border-radius: 28px 28px 0 0;
	overflow: hidden;
	text-align: center;
}

.oasis-photo-hero__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

img.oasis-photo-hero__media {
	object-fit: cover;
}

.oasis-photo-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(4, 21, 43, 0.35) 0%, rgba(4, 21, 43, 0.55) 55%, rgba(4, 21, 43, 0.78) 100%);
}

.oasis-photo-hero__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 46rem;
}

.oasis-photo-hero__eyebrow {
	display: inline-block;
	padding: 0.5rem 1.25rem;
	margin-bottom: 1.5rem;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 999px;
	color: var(--oasis-white);
	font-family: var(--oasis-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.oasis-photo-hero__content h1 {
	color: var(--oasis-white);
}

.oasis-photo-hero__content .oasis-lead {
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: 2rem;
}

@media (max-width: 720px) {
	.oasis-photo-hero {
		min-height: clamp(360px, 65vh, 520px);
		border-radius: 20px 20px 0 0;
	}
}

/*
 * Two half-width photos side by side with a shared scrim and centered
 * overlay, see template-parts/split-hero.php. Reuses .oasis-photo-hero's
 * eyebrow styling and .oasis-btn--light, only the media/scrim differ.
 */
.oasis-split-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(420px, 90vh, 900px);
	margin: 20px 0 0;
	padding: 3rem 0;
	border-radius: 28px 28px 0 0;
	overflow: hidden;
	text-align: center;
}

.oasis-split-hero__media {
	position: absolute;
	inset: 0;
	display: flex;
	width: 100%;
	height: 100%;
}

.oasis-split-hero__half {
	width: 50%;
	height: 100%;
	flex: none;
}

img.oasis-split-hero__half {
	object-fit: cover;
}

.oasis-split-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(4, 21, 43, 0.3) 0%, rgba(4, 21, 43, 0.5) 55%, rgba(4, 21, 43, 0.78) 100%);
}

.oasis-split-hero__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 46rem;
}

.oasis-split-hero__content h1 {
	color: var(--oasis-white);
}

.oasis-split-hero__content .oasis-lead {
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: 2rem;
}

@media (max-width: 720px) {
	.oasis-split-hero {
		min-height: clamp(360px, 65vh, 520px);
		margin: 12px 0 0;
		border-radius: 20px 20px 0 0;
	}
}

/*
 * The story block sits in a card that scales up as it scrolls into view.
 *
 * Driven by a CSS scroll-driven animation (animation-timeline: view()), so
 * the scaling is tied to scroll position and runs off the main thread, no
 * scroll listener. Browsers without support (Safari/Firefox at time of
 * writing) simply get the card at its final size, which is why the
 * un-animated state below is the finished one rather than the shrunken
 * one: nothing depends on the animation running.
 */
.oasis-story__card {
	background: var(--oasis-white);
	border-radius: 28px;
	padding: clamp(1.5rem, 3.5vw, 3.25rem);
	transform-origin: center top;
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.oasis-story__card {
			animation: oasis-story-grow linear both;
			animation-timeline: view();
			/* Starts as the card enters and finishes well before it leaves,
			   so it's at full size while it's the thing being read. */
			animation-range: entry 5% cover 40%;
		}
	}
}

@keyframes oasis-story-grow {
	from {
		transform: scale(0.88);
		border-radius: 44px;
		opacity: 0.55;
	}

	to {
		transform: scale(1);
		border-radius: 28px;
		opacity: 1;
	}
}

/*
 * Photo panel with the copy overlaid and the CTA below it, see
 * template-parts/story-feature.php. The photo zooms in and back out as
 * the panel crosses the viewport, driven by a CSS scroll-driven animation
 * so it runs off the main thread with no scroll listener. Browsers without
 * animation-timeline support just get the photo at its resting scale.
 */
.oasis-feature {
	position: relative;
	border-radius: 28px;
	overflow: hidden;
	min-height: clamp(26rem, 55vh, 40rem);
	display: flex;
	align-items: flex-end;
}

.oasis-feature__media {
	position: absolute;
	inset: 0;
}

.oasis-feature__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Resting state is the zoomed-in end so the un-animated fallback still
	   fills the frame rather than leaving gaps. */
	transform: scale(1.18);
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.oasis-feature__img {
			animation: oasis-feature-zoom linear both;
			animation-timeline: view();
			animation-range: cover 0% cover 100%;
		}
	}
}

@keyframes oasis-feature-zoom {
	from {
		transform: scale(1.18);
	}

	50% {
		transform: scale(1);
	}

	to {
		transform: scale(1.18);
	}
}

.oasis-feature__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(4, 21, 43, 0.25) 0%, rgba(4, 21, 43, 0.55) 45%, rgba(4, 21, 43, 0.88) 100%);
}

.oasis-feature__text {
	position: relative;
	z-index: 2;
	padding: clamp(1.75rem, 4vw, 3.5rem);
	max-width: 60ch;
}

.oasis-feature__text h2 {
	color: rgba(255, 255, 255, 0.62);
	margin-bottom: 1rem;
}

/* The named phrases stay full white, the rest of the heading sits back,
   same emphasis idea as .oasis-story__heading--muted on light sections. */
.oasis-feature__accent {
	color: var(--oasis-white);
}

.oasis-feature__text p {
	color: rgba(255, 255, 255, 0.85);
	font-size: 1.05rem;
}

.oasis-feature__text p:last-child {
	margin-bottom: 0;
}

.oasis-feature__actions {
	display: flex;
	margin-top: 1.75rem;
}

@media (max-width: 720px) {
	.oasis-feature {
		min-height: 0;
	}

	/* Overlaying long copy on a photo gets unreadable on a narrow screen,
	   so the text drops below the image into a navy panel instead. */
	.oasis-feature {
		display: block;
		background: var(--oasis-navy);
	}

	.oasis-feature__media {
		position: relative;
		height: 14rem;
	}

	.oasis-feature__scrim {
		display: none;
	}

	.oasis-feature__actions {
		justify-content: stretch;
	}

	.oasis-feature__actions .oasis-btn {
		width: 100%;
		justify-content: center;
	}
}

.oasis-story__grid {
	display: grid;
	grid-template-columns: 4fr 6fr;
	gap: var(--oasis-gap);
	align-items: center;
}

.oasis-story__grid--reverse {
	direction: rtl;
}

.oasis-story__grid--reverse > * {
	direction: ltr;
}

.oasis-story__media {
	aspect-ratio: 4 / 3;
}

img.oasis-story__media {
	object-fit: cover;
	width: 100%;
	height: auto;
	border-radius: var(--oasis-radius);
}

/* Muted heading: steel by default, .oasis-story__accent phrases stay navy.
   Opt in per story-split call with the muted_heading arg. */
.oasis-story__heading--muted {
	color: var(--oasis-steel);
}

.oasis-story__heading--muted .oasis-story__accent {
	color: var(--oasis-navy);
}

/* Small plain caption instead of .oasis-lead, opt in per story-split call
   with the compact arg, for rows that just need a title and a short line. */
.oasis-story__text--small {
	font-size: 0.9rem;
	color: var(--oasis-steel);
}

/*
 * Title/text (30%) beside an auto-scrolling image marquee (70%), see
 * template-parts/story-marquee.php. The track holds the image set twice
 * back to back and animates from translateX(0) to translateX(-50%), so
 * the moment it "restarts" it's showing the same frame as the duplicate
 * set beginning, no visible jump. The media column's mask-image fades
 * both edges to transparent so items scroll in/out softly instead of
 * being cut off hard at the column's boundary.
 */
.oasis-story-marquee {
	display: grid;
	grid-template-columns: 3fr 7fr;
	gap: var(--oasis-gap);
	align-items: center;
}

.oasis-story-marquee--reverse {
	direction: rtl;
}

.oasis-story-marquee--reverse > * {
	direction: ltr;
}

.oasis-story-marquee__text h2 {
	margin-bottom: 0.75rem;
}

.oasis-story-marquee__media {
	position: relative;
	overflow: hidden;
	height: 420px;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
}

.oasis-story-marquee__track {
	display: flex;
	gap: 1.5rem;
	height: 100%;
	width: max-content;
	animation: oasis-marquee-scroll 32s linear infinite;
}

.oasis-story-marquee__media:hover .oasis-story-marquee__track {
	animation-play-state: paused;
}

.oasis-story-marquee__item {
	flex: none;
	width: 300px;
	height: 100%;
}

.oasis-story-marquee__item img,
.oasis-story-marquee__item .oasis-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--oasis-radius);
	display: block;
}

@keyframes oasis-marquee-scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.oasis-story-marquee__track {
		animation: none;
	}
}

@media (max-width: 900px) {
	.oasis-story-marquee {
		grid-template-columns: 1fr;
	}

	.oasis-story-marquee__media {
		height: 280px;
	}

	.oasis-story-marquee__item {
		width: 220px;
	}
}

/*
 * Autoplaying background-video cards, see template-parts/video-cards.php.
 * Same bottom-anchored scrim + overlay language as .oasis-card--feature,
 * just with a <video> in place of the photo.
 */
.oasis-video-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 1.5rem;
}

.oasis-video-card {
	position: relative;
	aspect-ratio: 3 / 4;
	border-radius: var(--oasis-radius);
	overflow: hidden;
}

.oasis-video-card__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.oasis-video-card__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(4, 21, 43, 0.1) 0%, rgba(4, 21, 43, 0.45) 55%, rgba(4, 21, 43, 0.85) 100%);
}

.oasis-video-card__overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 2rem;
	z-index: 2;
}

.oasis-video-card__overlay h3 {
	color: var(--oasis-white);
	margin-bottom: 0.5rem;
}

.oasis-video-card__overlay p {
	color: rgba(255, 255, 255, 0.82);
	margin-bottom: 1.25rem;
}

@media (max-width: 720px) {
	.oasis-video-card {
		aspect-ratio: 4 / 5;
	}
}

/* Two-photo variant: a tall primary photo beside a shorter secondary photo
   with a button under it, the primary photo stretches to match their
   combined height. Deliberately more rounded than the site's flat 4px
   default, this pairing is meant to read as a soft, premium photo moment. */
.oasis-story__media-group {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	grid-template-rows: auto auto;
	gap: 1rem;
}

.oasis-story__media--primary {
	grid-column: 1 / 2;
	grid-row: 1 / 3;
	height: 100%;
}

img.oasis-story__media--primary {
	height: 100%;
	border-radius: 20px;
}

.oasis-story__media--secondary {
	grid-column: 2 / 3;
	grid-row: 1 / 2;
	aspect-ratio: 4 / 3;
}

img.oasis-story__media--secondary {
	border-radius: 20px;
	/* Fades the photo's own bottom edge into the section background
	   instead of ending in a hard cut right above the button below it. */
	-webkit-mask-image: linear-gradient(180deg, black 70%, transparent 100%);
	mask-image: linear-gradient(180deg, black 70%, transparent 100%);
}

.oasis-story__cta {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
	width: 100%;
	justify-content: center;
}

.oasis-placeholder.oasis-story__media--primary,
.oasis-placeholder.oasis-story__media--secondary {
	border-radius: 20px;
}

.oasis-section__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 2rem;
	flex-wrap: wrap;
}

.oasis-section__view-all {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--oasis-navy);
	text-decoration: none;
	font-weight: 500;
	font-size: 0.9rem;
	white-space: nowrap;
	flex-shrink: 0;
}

.oasis-section__view-all span {
	display: inline-block;
	transition: transform 0.2s ease;
}

.oasis-section__view-all:hover {
	color: var(--oasis-accent);
}

.oasis-section__view-all:hover span {
	transform: translate(2px, -2px);
}

.oasis-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.5rem;
	margin-top: 1.75rem;
}

.oasis-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--oasis-white);
	border: 1px solid var(--oasis-steel-light);
	border-radius: var(--oasis-radius);
	padding: 2rem;
	padding-bottom: 4.5rem;
}

.oasis-card__arrow {
	position: absolute;
	right: 1.5rem;
	bottom: 1.5rem;
	width: 2.5rem;
	height: 2.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--oasis-tint);
	color: var(--oasis-navy);
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.oasis-card__arrow:hover {
	background: var(--oasis-navy);
	color: var(--oasis-white);
	transform: translate(2px, -2px);
}

/*
 * The media block sizes itself from its aspect ratio alone. It must never
 * take height: 100%, because .oasis-card is a stretched grid item with a
 * definite height, so 100% resolves to the whole card and pushes the
 * heading, text and list out through the bottom of the card.
 */
.oasis-card__media {
	aspect-ratio: 16 / 10;
	margin-bottom: 1.5rem;
	flex: none;
}

img.oasis-card__media {
	object-fit: cover;
	width: 100%;
	height: auto;
	border-radius: var(--oasis-radius);
}

.oasis-card__list {
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.oasis-card__list li {
	position: relative;
	padding: 0.3rem 0 0.3rem 1.1rem;
	color: var(--oasis-steel);
	font-size: 0.9rem;
}

.oasis-card__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.85rem;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--oasis-accent);
}

.oasis-card__note {
	font-size: 0.8rem;
	color: var(--oasis-steel);
	margin-top: 1.25rem;
}

/*
 * Feature card variant: a compact (~300x500) full-bleed photo with a
 * bottom gradient scrim and the title/caption overlaid directly on it, a
 * corner arrow link, and nothing else, opt-in via card-grid's
 * card_style="feature" arg (so other card-grid callers, like the Products
 * page, keep the plain bordered card). Meant to sit two-up beside a text
 * column via layout="split", see .oasis-cards-split, so it stays a
 * portrait card instead of the full-height block the first version of
 * this variant produced.
 */
.oasis-card--feature {
	position: relative;
	display: block;
	aspect-ratio: 3 / 5;
	border: none;
	border-radius: 20px;
	padding: 0;
	overflow: hidden;
	color: var(--oasis-white);
}

.oasis-card--feature .oasis-card__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	border-radius: 0;
}

.oasis-card--feature .oasis-card__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(4, 21, 43, 0) 45%, rgba(4, 21, 43, 0.85) 100%);
}

.oasis-card--feature .oasis-card__overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1.25rem;
}

.oasis-card--feature h3 {
	color: var(--oasis-white);
	font-size: 1.1rem;
	margin: 0 0 0.25rem;
}

.oasis-card--feature .oasis-card__caption {
	margin: 0;
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.85rem;
}

.oasis-card--feature .oasis-card__arrow {
	top: 1rem;
	right: 1rem;
	bottom: auto;
	background: rgba(255, 255, 255, 0.9);
}

/*
 * Flip card variant: page-wide (single column, see .oasis-cards--flip),
 * click or Enter/Space flips the whole card in place — see
 * assets/js/flip-cards.js, which just toggles .is-flipped. Front shows the
 * photo with the title overlaid, back shows the tagline and fuller
 * description as plain text. Opt-in via card-grid's card_style="flip" arg.
 */
.oasis-cards--flip {
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
}

.oasis-card--flip {
	position: relative;
	background: transparent;
	border: none;
	padding: 0;
	perspective: 1600px;
	cursor: pointer;
	min-height: 24rem;
	transition: transform 0.25s ease;
}

/* Lifts the whole card on hover/focus, the clearest "this responds to you"
   signal, on top of the explicit flip-hint pill below. Lives on the outer
   element, not .oasis-card__flip-inner, so it doesn't fight that element's
   own rotateY transform. */
.oasis-card--flip:hover,
.oasis-card--flip:focus-visible {
	transform: translateY(-4px);
}

.oasis-card--flip:focus-visible {
	outline: 2px solid var(--oasis-accent);
	outline-offset: 4px;
	border-radius: var(--oasis-radius);
}

.oasis-card__flip-inner {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: inherit;
	transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
	transform-style: preserve-3d;
}

.oasis-card--flip.is-flipped .oasis-card__flip-inner {
	transform: rotateY(180deg);
}

.oasis-card__flip-front,
.oasis-card__flip-back {
	position: absolute;
	inset: 0;
	overflow: hidden;
	backface-visibility: hidden;
	border-radius: var(--oasis-radius);
}

/*
 * Front face: a full-bleed photo with a scrim and the title overlaid, same
 * language as .oasis-card--feature elsewhere on the site, instead of a
 * small inset thumbnail — that read as an awkward afterthought and its
 * fixed size didn't reliably fit accompanying text.
 */
.oasis-card__flip-front {
	background: var(--oasis-navy);
	box-shadow: 0 18px 40px rgba(4, 21, 43, 0.16);
	transition: box-shadow 0.25s ease;
}

.oasis-card--flip:hover .oasis-card__flip-front,
.oasis-card--flip:focus-visible .oasis-card__flip-front {
	box-shadow: 0 24px 48px rgba(4, 21, 43, 0.24);
}

.oasis-card__flip-media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

.oasis-card__flip-front::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(4, 21, 43, 0.85) 0%, rgba(4, 21, 43, 0.55) 45%, rgba(4, 21, 43, 0.25) 100%);
}

.oasis-card__flip-front-text {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: clamp(1.5rem, 4vw, 2.5rem);
}

.oasis-card__flip-front-text h3 {
	position: relative;
	color: var(--oasis-white);
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin: 0 0 1.25rem;
}

/* "Click to flip" hint, only surfaced on hover/focus so the front face
   stays clean at rest — the pill button below is the always-visible cue. */
.oasis-card__flip-cue {
	position: absolute;
	top: clamp(1.25rem, 3vw, 1.75rem);
	right: clamp(1.25rem, 3vw, 1.75rem);
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.oasis-card--flip:hover .oasis-card__flip-cue,
.oasis-card--flip:focus-visible .oasis-card__flip-cue {
	opacity: 1;
	transform: translateY(0);
}

/* A real .oasis-btn--light underneath (see main.css's button block above),
   so it gets the same grow-to-fill arrow badge as every other button on the
   site for free — the bespoke version this replaced didn't reuse that
   ::after mechanic, so its circle never actually stretched on hover. Only
   what's specific to sitting inside a flip card is added here. */
.oasis-card__flip-hint.oasis-btn--light {
	font-size: 0.85rem;
	padding: 0.6rem 2.6rem 0.6rem 1.1rem;
}

.oasis-card__flip-hint:focus-visible {
	outline: 2px solid var(--oasis-white);
	outline-offset: 2px;
}

/* Back face: plain text, the same treatment the front face used to have —
   white card, tagline as a subtitle, then the fuller description. */
.oasis-card__flip-back {
	transform: rotateY(180deg);
	background: var(--oasis-white);
	border: 1px solid var(--oasis-steel-light);
	padding: clamp(2rem, 4vw, 3rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.oasis-card__tagline {
	color: var(--oasis-navy);
	font-weight: 500;
	font-size: 1.15rem;
	margin: 0 0 0.75rem;
}

.oasis-card__flip-desc {
	color: var(--oasis-steel);
	max-width: 46ch;
	margin: 0;
}

@media (max-width: 700px) {
	.oasis-cards--flip {
		grid-template-columns: 1fr;
	}

	.oasis-card__flip-back {
		padding: 1.75rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.oasis-card__flip-inner {
		transition: none;
	}
}

/*
 * Heading/intro/CTA beside the card grid instead of above it, used by
 * card-grid's layout="split" (Home's "What we manufacture" section).
 */
.oasis-cards-split {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: var(--oasis-gap);
	align-items: center;
}

.oasis-cards-split__text .oasis-btn {
	margin-top: 1.5rem;
}

.oasis-cards-split .oasis-cards {
	margin-top: 0;
	max-width: 620px;
}

@media (max-width: 900px) {
	.oasis-cards-split {
		grid-template-columns: 1fr;
	}

	.oasis-cards-split .oasis-cards {
		max-width: none;
	}
}

/*
 * Scroll-stacking process cards, see template-parts/process-steps.php.
 * Every item sticks at the SAME top offset, so each new card arrives
 * directly over the previous one instead of peeking a sliver below it.
 * The previous card's shrink-and-fade as the next one covers it is driven
 * by assets/js/stack-scroll.js, which sets --oasis-stack-progress per card
 * from real scroll position: CSS scroll-driven animations can't express
 * "shrink exactly during the hand-off to the next sticky sibling" cleanly,
 * since a stuck element counts as fully "contained" in its view-timeline
 * for its whole pinned duration, not just the hand-off moment. The script
 * is rAF-throttled and only ever writes one CSS custom property, so the
 * actual paint work stays in CSS.
 *
 * Cards are white with a crisp border rather than four shades of navy:
 * the near-identical dark tones read as one flat block once stacked, and
 * the photo in each card already supplies the colour.
 */
.oasis-stack__heading {
	text-align: center;
}

.oasis-stack {
	margin-top: 1.75rem;
}

.oasis-stack__item {
	position: sticky;
	top: 6rem;
	padding-bottom: 0.75rem;
}

.oasis-stack__card {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	align-items: stretch;
	gap: 1.5rem;
	min-height: 24rem;
	width: 84%;
	margin: 0 auto;
	border-radius: 20px;
	background: var(--oasis-white);
	border: 1px solid var(--oasis-steel-light);
	box-shadow: 0 14px 32px rgba(4, 21, 43, 0.1);
	/* This is the "padding for image and container" ask: the card itself
	   pads on all sides, and the photo (below) gets its own border-radius
	   rather than bleeding to the card's edge, so it reads as an inset
	   framed photo instead of a full-bleed cover image. */
	padding: 1.5rem;
	transform-origin: top center;
	transform: scale(calc(1 - var(--oasis-stack-progress, 0) * 0.12)) translateY(calc(var(--oasis-stack-progress, 0) * -1.25rem));
	opacity: calc(1 - var(--oasis-stack-progress, 0) * 0.5);
}

@media (prefers-reduced-motion: reduce) {
	.oasis-stack__card {
		transform: none;
		opacity: 1;
	}
}

.oasis-stack__text {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: clamp(1rem, 2vw, 1.75rem);
}

.oasis-stack__index {
	font-family: var(--oasis-font-heading);
	font-weight: 600;
	letter-spacing: 0.08em;
	font-size: 0.8rem;
	color: var(--oasis-accent);
	display: block;
	margin-bottom: 0.5rem;
}

.oasis-stack__card h3 {
	color: var(--oasis-navy);
	margin-bottom: 0.75rem;
}

.oasis-stack__card p {
	color: var(--oasis-steel);
	margin: 0 auto;
	max-width: 40ch;
	font-size: 0.95rem;
}

.oasis-stack__media {
	position: relative;
	border-radius: 14px;
	overflow: hidden;
}

.oasis-stack__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 900px) {
	.oasis-stack__card {
		grid-template-columns: 1fr;
		min-height: 0;
		width: 100%;
	}

	/* Photo first, then the copy, and the media needs an explicit height
	   once it's no longer stretching to a side-by-side row. */
	.oasis-stack__media {
		order: -1;
		height: 9rem;
	}

	.oasis-stack__item {
		top: 4.5rem;
		padding-bottom: 0.6rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.oasis-stack__item {
		position: static;
	}
}

/*
 * Inline world map (assets/img/world-map.svg), MIT licensed, see the credit
 * in that file's header comment. The SVG's viewBox is cropped to the Middle
 * East, the underlying path data still has the whole world so no country
 * geometry needed touching, only what the viewport shows is limited. The
 * four export markets each get their own color, everything else stays a
 * flat neutral fill for geographic context.
 */
.oasis-markets-head {
	text-align: center;
}

.oasis-markets-head p {
	max-width: 60ch;
	margin-left: auto;
	margin-right: auto;
}

/*
 * Pillars-as-accordion beside the map, Home's merged "Why buyers work with
 * us" section only. Own markup and classes, not template-parts/pillars.php's
 * .oasis-pillars grid, so the About page's standalone pillar grid is
 * untouched. Built on <details>/<summary> so expand/collapse and keyboard
 * access come free from the browser, no JS needed.
 */
.oasis-markets-split {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: var(--oasis-gap);
	align-items: center;
	margin-top: 1.75rem;
}

/* Fills the whole column instead of capping at a fixed px width — the old
   560px cap left a lot of empty space around a comparatively small map
   next to the taller accordion list. */
.oasis-markets-split .oasis-worldmap-wrap {
	max-width: 100%;
	margin: 0 auto;
}

.oasis-pillars-col__heading {
	font-size: 1.5rem;
	margin: 0 0 0.5rem;
}

.oasis-pillars-col__desc {
	color: var(--oasis-steel);
	font-size: 1.05rem;
	margin: 0 0 1.75rem;
}

.oasis-pillars-accordion {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	border-top: 1px solid var(--oasis-steel-light);
}

.oasis-pillar-accordion {
	border-bottom: 1px solid var(--oasis-steel-light);
	border-radius: var(--oasis-radius);
	transition: background 0.2s ease, border-color 0.2s ease;
}

.oasis-pillar-accordion summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.6rem 1.1rem;
	cursor: pointer;
	list-style: none;
	outline: none;
}

.oasis-pillar-accordion summary::-webkit-details-marker {
	display: none;
}

.oasis-pillar-accordion summary:focus-visible {
	outline: 2px solid var(--oasis-accent);
	outline-offset: 2px;
}

.oasis-pillar-accordion__title {
	font-family: var(--oasis-font-heading);
	font-weight: 600;
	font-size: 1.2rem;
	color: var(--oasis-navy);
	transition: color 0.2s ease;
}

/* Circular badge, navy bg / white arrow at rest, same corner-arrow
   language as .oasis-card__arrow elsewhere on the site. Points down by
   default and flips to white bg / navy arrow, rotated to point up, once
   open, matching the reference the client shared. */
.oasis-pillar-accordion__chevron {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--oasis-navy);
	color: var(--oasis-white);
	font-size: 0.9rem;
	transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.oasis-pillar-accordion[open] .oasis-pillar-accordion__chevron {
	background: var(--oasis-white);
	color: var(--oasis-navy);
	transform: rotate(180deg);
}

.oasis-pillar-accordion__desc {
	margin: 0 0 0.75rem;
	padding: 0 1.1rem 0.75rem;
	color: var(--oasis-steel);
	font-size: 1rem;
	transition: color 0.2s ease;
}

/*
 * Open item gets a solid navy block instead of blending into the same
 * plain list as the collapsed ones, same pattern as the reference the
 * client shared, using the site's own navy instead of an unrelated brand
 * color. No padding added here on purpose, so the title stays at the same
 * horizontal position whether the item is open or closed; border-bottom
 * is hidden rather than removed so nothing shifts height.
 */
.oasis-pillar-accordion[open] {
	background: var(--oasis-navy);
	border-bottom-color: transparent;
}

.oasis-pillar-accordion[open] .oasis-pillar-accordion__title {
	color: var(--oasis-white);
}

.oasis-pillar-accordion[open] .oasis-pillar-accordion__desc {
	color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 900px) {
	.oasis-markets-split {
		grid-template-columns: 1fr;
	}
}

.oasis-worldmap-wrap {
	position: relative;
	max-width: 880px;
	margin: 1.5rem auto 0;
}

/*
 * Stays fully opaque out to 78% of the way to the edge, only fading in
 * that last stretch (ellipse sized to "farthest-side" hits exactly 0 at
 * the midpoint of each side, so corners, being further still, are fully
 * transparent too) — enough to soften the hard rectangular edge without
 * dimming most of the map the way an earlier, more aggressive fade did.
 */
.oasis-worldmap {
	display: block;
	width: 100%;
	height: auto;
	-webkit-mask-image: radial-gradient(ellipse farthest-side at 50% 50%, black 78%, transparent 100%);
	mask-image: radial-gradient(ellipse farthest-side at 50% 50%, black 78%, transparent 100%);
}

.oasis-worldmap #World {
	fill: transparent;
}

.oasis-worldmap #Ocean {
	fill: transparent;
	stroke: rgba(255, 255, 255, 0.08);
}

/*
 * Every country gets a fill, not just the four tracked markets below: the
 * flat grey continents used to read as one bland blob sitting in a hard
 * rectangular frame, so worldmap.js assigns each non-tracked country one
 * of a small muted palette via --oasis-country-fill (deterministic per
 * country code, no per-country CSS needed). Every country is also
 * hoverable and clickable, showing its name via Intl.DisplayNames and
 * linking to Contact, so the map reads as "we can ship anywhere" rather
 * than only to the four highlighted markets.
 */
.oasis-worldmap g[id] path {
	fill: var(--oasis-country-fill, rgba(255, 255, 255, 0.14));
	fill-opacity: 0.55;
	stroke: rgba(255, 255, 255, 0.12);
	/* Kept thin: the underlying country paths butt up against each other
	   with tiny sub-pixel gaps, and a heavier stroke centred on each path's
	   outline exaggerates those gaps into a visible "offset" seam between
	   neighbours. */
	stroke-width: 0.2;
	transition: fill-opacity 0.2s ease;
}

.oasis-worldmap g[id] {
	cursor: pointer;
}

.oasis-worldmap g[id]:hover path {
	fill-opacity: 0.9;
}

.oasis-worldmap g[id="SA"],
.oasis-worldmap g[id="AE"],
.oasis-worldmap g[id="YE"],
.oasis-worldmap g[id="OM"] {
	transform-box: fill-box;
	transform-origin: center;
	transition: transform 0.2s ease;
}

.oasis-worldmap g[id="SA"] path,
.oasis-worldmap g[id="AE"] path,
.oasis-worldmap g[id="YE"] path,
.oasis-worldmap g[id="OM"] path {
	/* Full strength, not the generic countries' 0.55: these four are the
	   ones meant to visually lead. */
	fill-opacity: 1;
	stroke: rgba(255, 255, 255, 0.4);
	transition: fill 0.2s ease;
}

/* Each market gets its own color, kept within one muted, similar-lightness
   family so four colors still reads as one deliberate palette. */
.oasis-worldmap g[id="SA"] path {
	fill: #3fa79d;
}

.oasis-worldmap g[id="AE"] path {
	fill: #d9a441;
}

.oasis-worldmap g[id="YE"] path {
	fill: #c97b5a;
}

.oasis-worldmap g[id="OM"] path {
	fill: #6c8ebf;
}

.oasis-worldmap g[id="SA"]:hover,
.oasis-worldmap g[id="AE"]:hover,
.oasis-worldmap g[id="YE"]:hover,
.oasis-worldmap g[id="OM"]:hover {
	transform: scale(1.01);
}

.oasis-worldmap g[id="SA"]:hover path,
.oasis-worldmap g[id="AE"]:hover path,
.oasis-worldmap g[id="YE"]:hover path,
.oasis-worldmap g[id="OM"]:hover path {
	fill: var(--oasis-white);
}

@media (prefers-reduced-motion: reduce) {
	.oasis-worldmap g[id] {
		transition: none;
	}
}

/*
 * Light variant, used where the map sits on a white/tint section instead of
 * navy (Home's merged "Why buyers work with us" section). Rules here must
 * stay below the default rules above, same specificity, source order
 * decides the winner.
 */
.oasis-worldmap--light #Ocean {
	stroke: var(--oasis-steel-light);
}

.oasis-worldmap--light g[id] path {
	fill: var(--oasis-country-fill, var(--oasis-steel-light));
	fill-opacity: 0.65;
	stroke: var(--oasis-white);
	stroke-width: 0.3;
}

.oasis-worldmap--light g[id]:hover path {
	fill-opacity: 1;
}

/*
 * Re-declared here, not inherited from the default rules above: the
 * generic ".oasis-worldmap--light g[id] path" rule just above has the same
 * specificity as ".oasis-worldmap g[id="SA"] path" etc. and comes later in
 * the file, so without this it silently wins and flattens all four markets
 * back to steel-light grey on the light variant.
 */
.oasis-worldmap--light g[id="SA"] path {
	fill: #3fa79d;
}

.oasis-worldmap--light g[id="AE"] path {
	fill: #d9a441;
}

.oasis-worldmap--light g[id="YE"] path {
	fill: #c97b5a;
}

.oasis-worldmap--light g[id="OM"] path {
	fill: #6c8ebf;
}

.oasis-worldmap--light g[id="SA"] path,
.oasis-worldmap--light g[id="AE"] path,
.oasis-worldmap--light g[id="YE"] path,
.oasis-worldmap--light g[id="OM"] path {
	fill-opacity: 1;
	stroke: rgba(4, 21, 43, 0.2);
}

.oasis-worldmap--light g[id="SA"]:hover path,
.oasis-worldmap--light g[id="AE"]:hover path,
.oasis-worldmap--light g[id="YE"]:hover path,
.oasis-worldmap--light g[id="OM"]:hover path {
	fill: var(--oasis-navy);
}

.oasis-worldmap__tooltip {
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	background: var(--oasis-white);
	color: var(--oasis-navy);
	font-size: 0.85rem;
	font-weight: 500;
	padding: 0.4rem 0.75rem;
	border-radius: 999px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.15s ease, transform 0.15s ease;
	white-space: nowrap;
	z-index: 5;
}

.oasis-worldmap__tooltip.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Pulsing "beacon" marker on Mumbai, our origin point — see
   show_origin_blip in markets-banner.php. Positioned by percentage
   (left/top set inline per instance), not tied to any one map variant. */
.oasis-worldmap__blip {
	position: absolute;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
	border-radius: 50%;
	background: var(--oasis-accent);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
	pointer-events: none;
	z-index: 4;
}

.oasis-worldmap__blip::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	background: var(--oasis-accent);
	animation: oasis-blip-ping 2.2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes oasis-blip-ping {
	0% {
		transform: scale(1);
		opacity: 0.6;
	}
	100% {
		transform: scale(3.2);
		opacity: 0;
	}
}

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

.oasis-pillars {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	margin-top: 1.75rem;
}

.oasis-pillar {
	padding: 1.75rem;
	background: var(--oasis-tint);
	border-radius: var(--oasis-radius);
}

.oasis-cta {
	text-align: center;
}

.oasis-cta__actions {
	display: flex;
	justify-content: center;
	margin-top: 1.5rem;
}

.oasis-section__footer-link {
	display: flex;
	justify-content: center;
	margin-top: 1.75rem;
}

@media (max-width: 900px) {
	.oasis-story__grid,
	.oasis-pillars {
		grid-template-columns: repeat(2, 1fr);
	}

	.oasis-story__grid--reverse {
		direction: ltr;
	}

	.oasis-story__media-group {
		grid-template-columns: 1fr;
		grid-template-rows: none;
	}

	.oasis-story__media--primary,
	.oasis-story__media--secondary {
		grid-column: 1 / 2;
		grid-row: auto;
		height: auto;
		aspect-ratio: 4 / 3;
	}

	img.oasis-story__media--primary {
		height: auto;
	}

	.oasis-story__cta {
		grid-column: 1 / 2;
	}
}

@media (max-width: 560px) {
	.oasis-story__grid,
	.oasis-pillars {
		grid-template-columns: 1fr;
	}
}

/*
 * Site header (header.php). Fully custom, Astra's header builder is not
 * used at all.
 */

/*
 * White at the very top of the page, freezing to navy once the page has
 * scrolled (see the is-scrolled toggle in assets/js/header.js). Every
 * color below this point comes in a default (white bg) declaration and an
 * .is-scrolled (navy bg) override directly under it.
 */
.oasis-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--oasis-white);
	transition: background 0.25s ease, box-shadow 0.25s ease;
}

.oasis-header.is-scrolled {
	background: var(--oasis-navy);
	box-shadow: 0 8px 24px rgba(4, 21, 43, 0.15);
}

.oasis-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.1rem 1.5rem;
}

/* Relative, not a size-changing layout: the wordmark link stays in normal
   flow (so it alone sets the brand's footprint) and the monogram is
   absolutely positioned on top of it, so the monogram can run much
   bigger than the wordmark's own height without inflating the header at
   all times — only the crossfade opacity changes on scroll, nothing
   about the header's height does. */
.oasis-header__brand {
	position: relative;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	flex-shrink: 0;
}

.oasis-header__brand > a {
	transition: opacity 0.3s ease;
}

.oasis-header__brand-text {
	font-family: var(--oasis-font-heading);
	font-weight: 600;
	letter-spacing: -0.02em;
	font-size: 1.35rem;
	color: var(--oasis-navy);
}

.oasis-header.is-scrolled .oasis-header__brand-text {
	color: var(--oasis-white);
}

/* The uploaded logo file is a dark wordmark, which already reads fine on
   the default white header. Same dark-wordmark-to-white trick as the
   footer logo (see .oasis-footer__logo img) inverts it only once the
   header itself has frozen to navy. */
.oasis-header__brand img,
.oasis-header__brand .custom-logo {
	display: block;
	max-height: 42px;
	width: auto;
	transition: filter 0.25s ease;
}

.oasis-header.is-scrolled .oasis-header__brand img,
.oasis-header.is-scrolled .oasis-header__brand .custom-logo {
	filter: brightness(0) invert(1);
}

/* Crossfades in over the wordmark once the header freezes to navy (see
   the is-scrolled toggle in assets/js/header.js). Decorative and inert —
   it sits on top of the wordmark's own link, which stays the one click
   target throughout so there's no second/duplicate link to the same URL. */
.oasis-header__monogram {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	display: block;
	height: 100px;
	width: auto;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

/* Already the white cut of the mark, so excluded (higher-specificity
   override) from the wordmark's dark-to-white invert filter above. */
img.oasis-header__monogram {
	filter: none;
}

.oasis-header.is-scrolled .oasis-header__monogram {
	opacity: 1;
}

.oasis-header.is-scrolled .oasis-header__brand > a {
	opacity: 0;
}

.oasis-header__nav {
	flex: 1;
	display: flex;
	justify-content: center;
}

.oasis-header__menu {
	display: flex;
	align-items: center;
	gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.oasis-header__menu a {
	color: var(--oasis-steel);
	text-decoration: none;
	font-weight: 500;
	font-size: 0.95rem;
	transition: color 0.2s ease;
}

.oasis-header__menu a:hover {
	color: var(--oasis-navy);
}

.oasis-header__menu .current-menu-item > a,
.oasis-header__menu .current_page_item > a {
	color: var(--oasis-navy);
}

.oasis-header.is-scrolled .oasis-header__menu a {
	color: rgba(255, 255, 255, 0.85);
}

.oasis-header.is-scrolled .oasis-header__menu a:hover {
	color: var(--oasis-white);
}

.oasis-header.is-scrolled .oasis-header__menu .current-menu-item > a,
.oasis-header.is-scrolled .oasis-header__menu .current_page_item > a {
	color: var(--oasis-white);
}

.oasis-header__cta {
	flex-shrink: 0;
}

/* CTA is .oasis-btn--primary (navy on white) by default so it stands out
   against the white header; once frozen to navy it flips to the light
   pill instead of disappearing into the now-navy background. */
.oasis-header.is-scrolled .oasis-header__cta.oasis-btn--primary {
	background: var(--oasis-white);
	color: var(--oasis-navy);
	border-color: var(--oasis-white);
}

.oasis-header.is-scrolled .oasis-header__cta.oasis-btn--primary::after {
	background: var(--oasis-navy);
	color: var(--oasis-white);
}

.oasis-header__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	gap: 5px;
	width: 2.4rem;
	height: 2.4rem;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	flex-shrink: 0;
}

.oasis-header__toggle-bar {
	height: 2px;
	background: var(--oasis-navy);
	transition: background 0.2s ease;
}

.oasis-header.is-scrolled .oasis-header__toggle-bar {
	background: var(--oasis-white);
}

@media (max-width: 860px) {
	.oasis-header__cta {
		display: none;
	}

	.oasis-header__toggle {
		display: flex;
	}

	.oasis-header__nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: block;
		background: var(--oasis-white);
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.25s ease, background 0.25s ease;
	}

	.oasis-header.is-scrolled .oasis-header__nav {
		background: var(--oasis-navy);
	}

	.oasis-header__nav.is-open {
		max-height: 70vh;
		overflow-y: auto;
		border-bottom: 1px solid rgba(4, 21, 43, 0.12);
	}

	.oasis-header.is-scrolled .oasis-header__nav.is-open {
		border-bottom-color: rgba(255, 255, 255, 0.12);
	}

	.oasis-header__menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0.5rem 1.5rem 1rem;
	}

	.oasis-header__menu li {
		border-top: 1px solid rgba(4, 21, 43, 0.12);
	}

	.oasis-header.is-scrolled .oasis-header__menu li {
		border-top-color: rgba(255, 255, 255, 0.12);
	}

	.oasis-header__menu li:first-child {
		border-top: none;
	}

	.oasis-header__menu a {
		display: block;
		padding: 0.9rem 0;
	}
}


/*
 * Fluent Forms reskin, matched to the Oasis token system. Used on the hero
 * quick inquiry card and the Contact page form. Follows Fluent Forms'
 * default (non Bootstrap) markup as of writing, verify against the live
 * plugin once installed, its form styling mode is configurable in Fluent
 * Forms' own settings and changes the generated class names.
 */

/*
 * Fluent Forms also injects its own per-form stylesheet (a
 * "form.fluent_form_N .ff-btn-submit" rule using its own --fluentform-*
 * color variables), which outranks a same-class selector here because it
 * adds a type selector Fluent's markup doesn't give us a matching hook for.
 * The color/background/border declarations below carry !important so this
 * reskin always wins regardless of that per-form stylesheet.
 */

/* One moderate radius across every field regardless of width: a true
   999px pill reads fine on a short field like First Name, but stretched
   across a full-width field like Email or Subject the rounding all but
   disappears into two barely-visible curves at the far ends, so short and
   long fields ended up looking like two different, unmatched styles. */
.fluentform .ff-el-form-control {
	font-family: var(--oasis-font-body);
	background: var(--oasis-white) !important;
	border: 1px solid var(--oasis-steel-light) !important;
	border-radius: 14px !important;
	padding: 0.95rem 1.25rem;
	box-shadow: none !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fluentform .ff-el-form-control:focus {
	border-color: var(--oasis-accent) !important;
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--oasis-accent) 15%, transparent) !important;
}

.fluentform .ff-el-group {
	margin-bottom: 1.5rem;
}

.fluentform label,
.fluentform .ff-el-input--label label {
	font-family: var(--oasis-font-body);
	font-weight: 500;
	font-size: 0.9rem;
	color: var(--oasis-navy);
}

.fluentform .ff-el-input--label {
	margin-bottom: 0.5rem;
}

/* Fits its own content rather than stretching full-width — the reference
   layout this was matched to (see contact.css) treats the submit button as
   a normal compact CTA, not a full-width bar. */
.fluentform .ff-btn.ff-btn-submit {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--oasis-navy) !important;
	border: 1px solid var(--oasis-navy) !important;
	color: var(--oasis-white) !important;
	border-radius: 999px;
	font-family: var(--oasis-font-body);
	font-weight: 500;
	padding: 0.85rem 3.25rem 0.85rem 1.5rem;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* Same grow-to-fill arrow badge as .oasis-btn, see the comment on
   .oasis-btn::after, so the primary form CTA matches the rest of the
   site's buttons instead of looking like a generic plugin default. */
.fluentform .ff-btn.ff-btn-submit::after {
	content: "\2192";
	position: absolute;
	top: 50%;
	right: 0.4rem;
	width: 2.3rem;
	height: 2.3rem;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--oasis-accent);
	color: var(--oasis-white);
	font-size: 0.9rem;
	line-height: 1;
	transition: width 0.3s ease;
}

.fluentform .ff-btn.ff-btn-submit:hover {
	background: var(--oasis-navy) !important;
	border-color: var(--oasis-accent) !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(4, 21, 43, 0.15);
}

.fluentform .ff-btn.ff-btn-submit:hover::after {
	width: calc(100% - 0.8rem);
}

/* Site footer, added via astra_footer_before, see oasis_render_footer(). */

.oasis-footer {
	background: var(--oasis-navy);
	color: rgba(255, 255, 255, 0.7);
	padding: 4rem 0 0;
}

.oasis-footer__grid {
	display: grid;
	/* The nav column sizes to fit "Home / About Us / Products /
	   Manufacturing / Contact" on one line (max-content) instead of a
	   fixed fr share, which was narrow enough to wrap Contact onto a
	   second row; brand and contact share whatever's left. */
	grid-template-columns: 1.3fr max-content 1fr;
	gap: 3rem;
	padding-bottom: 3rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.oasis-footer__logo {
	margin: 0 0 1rem;
}

/* The uploaded site logo is a dark wordmark, made for a light header
   background. brightness(0) flattens it to solid black, invert(1) then
   flips that to white so it reads on the navy footer without needing a
   second logo asset uploaded just for this. */
.oasis-footer__logo img {
	display: block;
	height: 3.25rem;
	width: auto;
	filter: brightness(0) invert(1);
}

.oasis-footer__logo-text {
	font-family: var(--oasis-font-heading);
	font-weight: 600;
	letter-spacing: -0.02em;
	font-size: 1.5rem;
	color: var(--oasis-white);
	margin: 0 0 0.75rem;
}

.oasis-footer__tagline {
	font-family: var(--oasis-font-body);
	font-style: normal;
	color: rgba(255, 255, 255, 0.75);
	max-width: 40ch;
}

.oasis-footer__heading {
	font-family: var(--oasis-font-body);
	font-weight: 500;
	color: var(--oasis-white);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0 0 1rem;
}

.oasis-footer__nav {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0.5rem 1.5rem;
}

.oasis-footer__nav a {
	font-family: var(--oasis-font-body);
	font-style: normal;
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	font-size: 0.95rem;
}

.oasis-footer__nav a:hover {
	color: var(--oasis-white);
}

.oasis-footer__contact {
	text-align: right;
}

.oasis-footer__contact p {
	margin: 0 0 0.6rem;
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.95rem;
}

.oasis-footer__contact a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
}

.oasis-footer__contact a:hover {
	color: var(--oasis-white);
}

/* The <p> inside needs its own colour: the global `p` rule sets steel
   grey, and an element selector beats the white the footer would
   otherwise pass down, leaving grey-on-navy at about 3.3:1. */
.oasis-footer__bottom,
.oasis-footer__bottom p {
	padding: 1.5rem 0;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.75);
}

.oasis-footer__bottom p {
	padding: 0;
	margin: 0;
}

@media (max-width: 720px) {
	.oasis-footer__grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

/* Floating WhatsApp button, every page, see oasis_render_whatsapp_button()
   in functions.php. #25D366 is WhatsApp's own brand green, kept literal
   rather than a design token since it's a third-party mark, not meant to
   shift with the site's color scheme. */
.oasis-whatsapp-button {
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: 999;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: #25d366;
	color: var(--oasis-white);
	box-shadow: 0 8px 24px rgba(4, 21, 43, 0.25);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.oasis-whatsapp-button svg {
	width: 1.75rem;
	height: 1.75rem;
}

.oasis-whatsapp-button:hover {
	transform: translateY(-2px) scale(1.05);
	box-shadow: 0 12px 28px rgba(4, 21, 43, 0.3);
}

@media (max-width: 720px) {
	.oasis-whatsapp-button {
		right: 1rem;
		bottom: 1rem;
		width: 3.25rem;
		height: 3.25rem;
	}
}

/*
 * Visual product categories, see template-parts/product-category.php.
 * Each group is a wide banner photo (name + short subtext overlaid)
 * followed by a row of variants as rounded photo cards, same overlay
 * language as .oasis-card--feature on the home page, and an Enquire now
 * CTA, replacing what used to be a plain bullet list.
 */
.oasis-product-groups {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	margin-top: 2rem;
}

.oasis-product-group__banner {
	position: relative;
	aspect-ratio: 21 / 6;
	border-radius: var(--oasis-radius);
	overflow: hidden;
}

.oasis-product-group__banner-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.oasis-product-group__banner-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(4, 21, 43, 0.75) 0%, rgba(4, 21, 43, 0.2) 50%, rgba(4, 21, 43, 0) 75%);
}

.oasis-product-group__banner-text {
	position: absolute;
	left: 2rem;
	top: 50%;
	transform: translateY(-50%);
	max-width: 22rem;
}

.oasis-product-group__banner-title {
	color: var(--oasis-white);
	margin: 0 0 0.35rem;
}

.oasis-product-group__banner-subtitle {
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.92rem;
	margin: 0;
}

.oasis-product-variants {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin-top: 1.5rem;
}

/* Same rounded photo-card-with-overlay pattern as .oasis-card--feature,
   sized to sit several per row instead of two. */
.oasis-product-variant {
	position: relative;
	width: 15rem;
	aspect-ratio: 3 / 4;
	border-radius: var(--oasis-radius);
	overflow: hidden;
}

.oasis-product-variant__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.oasis-product-variant__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(4, 21, 43, 0) 45%, rgba(4, 21, 43, 0.88) 100%);
}

.oasis-product-variant__text {
	position: absolute;
	left: 1.1rem;
	right: 1.1rem;
	bottom: 1.1rem;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.oasis-product-variant__label {
	font-family: var(--oasis-font-heading);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--oasis-white);
}

.oasis-product-variant__description {
	font-family: var(--oasis-font-body);
	font-size: 0.82rem;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.82);
}

.oasis-product-group__cta {
	margin-top: 1.75rem;
}

@media (max-width: 720px) {
	.oasis-product-group__banner {
		aspect-ratio: 16 / 9;
	}

	.oasis-product-group__banner-text {
		left: 1.25rem;
		max-width: calc(100% - 2.5rem);
	}

	/* Horizontal scroll with a peek of the next card, instead of wrapping
	   to a cramped 2-up grid on narrow screens. Bleeds to the screen edges
	   (negative margin matching .oasis-container's own padding) so the
	   peeking card reads naturally against the edge, with scroll-snap so
	   it settles on a card instead of stopping mid-scroll. */
	.oasis-product-variants {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		margin-left: -1.5rem;
		margin-right: -1.5rem;
		padding: 0 1.5rem 0.5rem;
		scrollbar-width: none;
	}

	.oasis-product-variants::-webkit-scrollbar {
		display: none;
	}

	.oasis-product-variant {
		flex: 0 0 78%;
		width: auto;
		scroll-snap-align: start;
	}

	.oasis-product-group__cta {
		display: flex;
		justify-content: center;
		width: 100%;
	}
}

/*
 * Private label / OEM bento grid, template-products.php. Six photos in a
 * deliberately uneven layout (one big hero, a wide banner, two tall
 * portrait cells, two small squares) via named grid-template-areas, so
 * every cell's rectangle is explicit rather than left to grid
 * auto-placement guesswork.
 */
.oasis-bento-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(3, 200px);
	grid-template-areas:
		"hero hero jeans jeans"
		"hero hero machine cut"
		"label stripe machine cut";
	gap: 1.25rem;
	margin-top: 2rem;
}

.oasis-bento-item {
	position: relative;
	border-radius: var(--oasis-radius);
	overflow: hidden;
}

.oasis-bento-item__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.oasis-bento-item--hero {
	grid-area: hero;
}

.oasis-bento-item--jeans {
	grid-area: jeans;
}

.oasis-bento-item--machine {
	grid-area: machine;
}

.oasis-bento-item--cut {
	grid-area: cut;
}

.oasis-bento-item--label {
	grid-area: label;
}

.oasis-bento-item--stripe {
	grid-area: stripe;
}

.oasis-bento-cta {
	margin-top: 2rem;
}

@media (max-width: 900px) {
	.oasis-bento-grid {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, 200px) 160px 160px;
		grid-template-areas:
			"hero hero"
			"jeans jeans"
			"machine cut"
			"label stripe";
	}
}

@media (max-width: 540px) {
	.oasis-bento-grid {
		grid-template-columns: 1fr;
		grid-template-rows: repeat(6, 220px);
		grid-template-areas:
			"hero"
			"jeans"
			"machine"
			"cut"
			"label"
			"stripe";
	}
}

/*
 * About page "Our Story" timeline: a vertical rail down the center with
 * milestones alternating left/right, content on one side and photo on the
 * other, flipping each row via :nth-child(even). The rail's accent fill
 * grows with scroll position (assets/js/timeline-scroll.js sets a CSS
 * transform, not a custom property, since scaleY needs a stable transform
 * origin rather than a value the browser has to reinterpret every frame).
 */
.oasis-timeline-heading {
	text-align: center;
	margin-bottom: 3rem;
}

.oasis-timeline {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: clamp(3rem, 6vw, 5rem);
}

.oasis-timeline__rail {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	transform: translateX(-50%);
	background: var(--oasis-steel-light);
}

.oasis-timeline__rail-fill {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--oasis-accent);
	transform: scaleY(0);
	transform-origin: top;
}

.oasis-timeline__item {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 60px 1fr;
	align-items: center;
	gap: clamp(1.5rem, 3vw, 3rem);
}

.oasis-timeline__marker {
	grid-column: 2;
	justify-self: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--oasis-white);
	border: 3px solid var(--oasis-steel-light);
	transition: border-color 0.3s ease, background 0.3s ease;
	z-index: 1;
}

.oasis-timeline__marker.is-passed {
	background: var(--oasis-accent);
	border-color: var(--oasis-accent);
}

.oasis-timeline__content {
	grid-column: 1;
	text-align: right;
}

.oasis-timeline__media {
	grid-column: 3;
}

.oasis-timeline__item:nth-child(even) .oasis-timeline__content {
	grid-column: 3;
	text-align: left;
}

.oasis-timeline__item:nth-child(even) .oasis-timeline__media {
	grid-column: 1;
}

.oasis-timeline__year {
	display: block;
	font-family: var(--oasis-font-heading);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 700;
	color: var(--oasis-navy);
	line-height: 1;
	margin-bottom: 0.5rem;
}

.oasis-timeline__content h3 {
	margin: 0 0 0.5rem;
}

.oasis-timeline__content p {
	color: var(--oasis-steel);
}

.oasis-timeline__img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--oasis-radius);
}

@media (prefers-reduced-motion: reduce) {
	.oasis-timeline__rail-fill {
		transition: none;
	}
}

@media (max-width: 780px) {
	.oasis-timeline__rail {
		left: 20px;
	}

	.oasis-timeline__item,
	.oasis-timeline__item:nth-child(even) {
		grid-template-columns: 40px 1fr;
		text-align: left;
	}

	.oasis-timeline__item .oasis-timeline__marker,
	.oasis-timeline__item:nth-child(even) .oasis-timeline__marker {
		grid-column: 1;
		grid-row: 1 / 3;
		justify-self: start;
		margin-left: 13px;
	}

	.oasis-timeline__item .oasis-timeline__content,
	.oasis-timeline__item:nth-child(even) .oasis-timeline__content {
		grid-column: 2;
		grid-row: 1;
		text-align: left;
	}

	.oasis-timeline__item .oasis-timeline__media,
	.oasis-timeline__item:nth-child(even) .oasis-timeline__media {
		grid-column: 2;
		grid-row: 2;
		margin-top: 1.25rem;
	}
}

/*
 * About page "What we believe in": full-bleed navy section, each
 * principle dims to a smaller, faded state except the one nearest the
 * vertical center of the viewport (assets/js/principles-scroll.js, an
 * IntersectionObserver with a thin center band, no scroll math needed).
 */
.oasis-principles {
	padding: clamp(3rem, 8vw, 6rem) 0;
}

.oasis-principles__heading {
	color: var(--oasis-white);
	text-align: center;
	margin-bottom: clamp(2rem, 6vw, 4rem);
}

.oasis-principles-list {
	max-width: 54rem;
	margin: 0 auto;
}

.oasis-principles-item {
	padding: 3rem 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	opacity: 0.35;
	transform: scale(0.94);
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.oasis-principles-item.is-active {
	opacity: 1;
	transform: scale(1);
}

.oasis-principles-item__index {
	font-family: var(--oasis-font-heading);
	font-size: 1.15rem;
	color: var(--oasis-accent);
	letter-spacing: 0.1em;
	margin-bottom: 1rem;
}

.oasis-principles-item h3 {
	color: var(--oasis-white);
	font-size: clamp(2.25rem, 6vw, 4rem);
	line-height: 1.05;
	margin: 0 0 1.25rem;
}

.oasis-principles-item p {
	color: rgba(255, 255, 255, 0.75);
	font-size: clamp(1.15rem, 2vw, 1.4rem);
	max-width: 42ch;
}

@media (prefers-reduced-motion: reduce) {
	.oasis-principles-item {
		transition: none;
	}
}

@media (max-width: 700px) {
	.oasis-principles-item {
		padding: 2rem 0;
	}
}