/* ==========================================================================
   Oasis House — homepage
   Loaded only on the front page. Section spec: /docs/HOMEPAGE_BLUEPRINT.md
   Nine sections: hero · registration · who · life · quote · how-we-care ·
   professionals · careers · contact.  Narrative: EMOTION → UNDERSTANDING
   → TRUST → PROFESSIONAL PATHWAY → ACTION.

   Phase B2 rebuild: every section resolves the full page width, and no two
   sections share a skeleton — full-bleed hero · 4/8 note · magazine opening ·
   photo essay · quote field · full-width index · pathway panel · rule strip
   · centred close.

   Phase B3 correction pass (/DESIGN.md §19.3): the hero is full-bleed film
   again with a measured scrim; the quote band gained tonal depth, the Arc at
   architectural scale and two type registers; the photo essay's right-hand
   column was closed up; careers gained a visual anchor.
   ========================================================================== */

/* The section grounds, the 12-column bed and the figure primitives
   moved to base.css when the About page needed them: they are the
   site's page vocabulary, not the homepage's. Nothing below assumes
   anything about them beyond what base.css declares. */

/* --------------------------------------------------------------------------
   1. Hero — full-bleed background film, type over the media.

   The client-approved composition (/CLAUDE.md §9, /DESIGN.md §8.5): the
   media carries the first impression and the headline and professional CTA
   sit on it. The scrim is deep green, never black, and is weighted into the
   corner the type occupies so the sky corner stays bright — a hero that is
   uniformly darkened stops being hopeful and starts being corporate.

   The site header stays a solid warm bar above the film rather than floating
   transparently over it. That keeps the logo and nav at full contrast on
   every frame of a moving picture, and the ivory band reads as a masthead
   over a plate. The media is still edge to edge.
   -------------------------------------------------------------------------- */
.oasis-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	min-height: min(84svh, 800px);
	background: #17301c;
	color: #fff;
	overflow: clip;
	/* Everything focusable in here sits on dark film, so the global
	   deep-green focus ring would be all but invisible. White clears 3:1
	   against every frame of the loop under the scrim (/DESIGN.md §16.3). */
	--oasis-focus: #fff;
}
/* ...except the registration chip, which is a mint surface: there the ring
   goes back to deep green, which is what reads on it. */
.oasis-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: clip;
	background: #17301c;
}
.oasis-hero__media picture,
.oasis-hero__media img,
.oasis-hero__media video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 38%;
}
.oasis-hero__media video {
	opacity: 0;
	transition: opacity 900ms var(--oasis-ease-out);
}
.oasis-hero__media video.is-playing { opacity: 1; }

.oasis-hero__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	/* The type plate. A wide, very soft deep-green vignette anchored off the
	   left edge at the height of the reading column, so the corner the words
	   occupy is dependably dark while the sky corner is untouched — light
	   falling off, not a panel laid over the picture. Never black
	   (/DESIGN.md §8.5).

	   The stops are not a guess. They were tuned against the WORST frame of
	   the loop, measured on the composited pixels behind every glyph run,
	   then walked back to the lightest setting that still clears AA — a hero
	   darker than it needs to be stops being hopeful. Run record in
	   DESIGN.md §19.3 S1-S3. Changing the footage, the crop or the hero type
	   sizes means re-running that measurement.

	   RE-MEASURED 6 September 2026, AND THE STOPS MOVED.

	   The reason is that the footage itself changed after the last run. The
	   loop these stops were tuned against was a canopy filmed from below —
	   dark leaves, no people. The clip that now ships is the second half of
	   the locked direction: children playing outdoors in open sunlight, on
	   bright grass. It is a far lighter plate, and nobody re-ran the
	   measurement when it was swapped in.

	   Measured on the composited pixels behind every glyph run, stepping the
	   whole loop, the old stops failed AA on the film at 1024–1600: the lime
	   italic "be a child" came back at 2.09–2.16:1 against the 3:1 it needs
	   as large text, and the white headline at 2.91:1. Lime on sunlit grass
	   is the worst pairing in the whole design, and it is exactly what the
	   new footage puts behind that word.

	   Every stop below is the previous value multiplied by 1.38 — the
	   lightest setting that clears AA at the tightest width measured (1280:
	   3.52:1, margin +0.52; 1440: 3.52:1; 1600: 3.47:1). A multiplier rather
	   than a uniform veil deliberately: it strengthens the vignette where
	   the type sits and still lets the ramp reach ZERO at 88%, so the sky
	   corner stays untouched and this remains light falling off rather than
	   a green filter laid over the picture. */
	background:
		/* a band behind the site header, which is transparent over this
		   film until the visitor scrolls. Short and soft, so it frames the
		   top of the frame rather than capping it. */
		linear-gradient(to bottom,
			rgba(10, 26, 13, 0.82) 0%,
			rgba(10, 26, 13, 0.66) 5%,
			rgba(10, 26, 13, 0.32) 12%,
			rgba(10, 26, 13, 0) 20%),
		radial-gradient(114% 152% at -10% 46%,
			rgba(10, 26, 13, 0.95) 0%,
			rgba(10, 26, 13, 0.916) 22%,
			rgba(10, 26, 13, 0.796) 38%,
			rgba(10, 26, 13, 0.564) 54%,
			rgba(10, 26, 13, 0.242) 72%,
			rgba(10, 26, 13, 0) 88%),
		linear-gradient(to top,
			rgba(10, 26, 13, 0.58) 0%,
			rgba(10, 26, 13, 0.193) 30%,
			rgba(10, 26, 13, 0) 60%);
}

.oasis-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--oasis-w-wide);
	margin-inline: auto;
	padding-inline: var(--oasis-gutter);
	padding-block: clamp(3.5rem, 8vw, 5.5rem) clamp(4rem, 7vw, 5.5rem);
}
.oasis-hero__col { max-width: 46rem; }

.oasis-eyebrow--light { color: rgba(255, 255, 255, 0.82); }
.oasis-eyebrow--light::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='9' viewBox='0 0 34 9'%3E%3Cpath d='M1.6 7.2C7 1.6 13 1.6 17 4.2s10 2.4 15.4-2.6' fill='none' stroke='%23b4ec51' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

.oasis-hero__title {
	font-size: clamp(2.5rem, 1.45rem + 4.4vw, 4.5rem);
	line-height: 1.02;
	letter-spacing: -0.024em;
	color: #fff;
	max-width: 16ch;
	text-shadow: 0 2px 34px rgba(8, 22, 10, 0.4);
}
.oasis-hero__title .oasis-em { color: var(--oasis-green-light); }

.oasis-hero__lede {
	font-family: var(--oasis-font-display);
	font-size: clamp(1.15rem, 1rem + 0.62vw, 1.45rem);
	line-height: 1.46;
	color: #fff;
	margin-top: clamp(1.2rem, 2vw, 1.65rem);
	max-width: 34ch;
	text-shadow: 0 1px 22px rgba(8, 22, 10, 0.4);
}

.oasis-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.85rem 1.1rem;
	margin-top: clamp(1.6rem, 2.8vw, 2.2rem);
}
/* Ghost button on film: a solid enough edge to read on any frame, no blur. */
.oasis-btn--on-media {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.62);
	background: rgba(14, 34, 18, 0.42);
}
.oasis-btn--on-media:hover,
.oasis-btn--on-media:focus-visible {
	background: rgba(14, 34, 18, 0.68);
	border-color: #fff;
	color: #fff;
}

/* The honest registration position, adjacent to the CTA in the first
   viewport (/docs/COMPLIANCE_RULES.md §3.3). It keeps the mint ground it has
   everywhere else on the site, so a professional meets one recognisable
   registration treatment (/DESIGN.md §4.4). */
/* Client instruction, 1 September 2026: no plate. It reads as type on the
   film like everything else in the hero — a light rule at the left marks it
   as an aside without boxing it. */
.oasis-hero__ofsted {
	display: flex;
	align-items: flex-start;
	margin-top: clamp(1.25rem, 2vw, 1.6rem);
	padding-left: 0.95rem;
	border-left: 2px solid rgba(180, 236, 81, 0.75);
	font-size: var(--oasis-fs-sm);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.92);
	max-width: 42ch;
}
.oasis-hero__ofsted a {
	color: #fff;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgba(180, 236, 81, 0.9);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 0.18em;
	white-space: nowrap;
}
.oasis-hero__ofsted a:hover { text-decoration-color: #fff; }

/* Standfirst facts — one editorial line, not a card row. */
.oasis-hero__facts {
	list-style: none;
	margin: clamp(1.4rem, 2.4vw, 1.9rem) 0 0;
	padding: 1.05rem 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.3);
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.35rem;
	font-size: 0.9rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.92);
	max-width: 40rem;
}
.oasis-hero__facts li { display: flex; align-items: center; gap: 1.35rem; }
.oasis-hero__facts li + li::before {
	content: "";
	width: 0.9rem;
	height: 0.3rem;
	flex: none;
	background: no-repeat center / contain
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='9' viewBox='0 0 34 9'%3E%3Cpath d='M1.6 7.2C7 1.6 13 1.6 17 4.2s10 2.4 15.4-2.6' fill='none' stroke='%23b4ec51' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* WCAG 2.2.2 — moving content over 5s must be pausable. Visible, keyboard
   operable, 44px, and it sits outside the media's clip so its focus ring is
   never cut (/DESIGN.md §16.6). */
.oasis-hero__mediactl {
	position: absolute;
	right: clamp(1rem, 3vw, 2rem);
	bottom: clamp(1rem, 3vw, 2rem);
	z-index: 2;
	display: none;
	align-items: center;
	gap: 0.55rem;
	background: rgba(14, 34, 18, 0.6);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 999px;
	padding: 0.5rem 1rem 0.5rem 0.85rem;
	font-size: var(--oasis-fs-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	min-height: 44px;
	transition: background-color var(--oasis-dur-micro) var(--oasis-ease-soft),
		border-color var(--oasis-dur-micro) var(--oasis-ease-soft);
}
.oasis-hero__mediactl.is-visible { display: inline-flex; }
.oasis-hero__mediactl:hover { background: rgba(14, 34, 18, 0.82); border-color: #fff; }
/* Two bars when playing, a triangle when paused — drawn in CSS so there is
   no icon file and no state where the glyph and the label disagree. */
.oasis-hero__mediactl-icon {
	width: 0.7rem;
	height: 0.8rem;
	flex: none;
	background: currentColor;
	clip-path: polygon(0 0, 38% 0, 38% 100%, 0 100%, 0 0, 62% 0, 100% 0, 100% 100%, 62% 100%, 62% 0);
}
.oasis-hero__mediactl[data-state="paused"] .oasis-hero__mediactl-icon {
	clip-path: polygon(6% 0, 100% 50%, 6% 100%);
}

/* Narrow: a grid that fits itself to the width, with the mark LEADING every
   item — including the first.

   Three states were measured before this one. Inline with separators
   between items wraps to a line beginning with a mark, which reads as an
   orphan glyph; moving the mark to trail each item instead leaves one
   dangling at the end of the wrapped line, which is only slightly better.
   And the run of three all on one line does not fit at any phone width:
   it needs 405px against 387 available at 430 and 347 at 390.

   `auto-fit` + `minmax` settles it without a breakpoint: two columns
   wherever two fit (390 and up), one column below that. Two rows instead of
   three, every item introduced by its own mark, and nothing can orphan
   because nothing is a separator. The ~36px saved goes back to the film. */
@media (max-width: 619px) {
	.oasis-hero__facts {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(8.75rem, 1fr));
		gap: 0.35rem 0.75rem;
		font-size: 0.82rem;
	}
	.oasis-hero__facts li { gap: 0.7rem; }
	/* The longest fact takes the whole of its row rather than half of it. In
	   a two-column grid at 360-375 the third cell is ~152px and
	   "Trauma-informed care" needs ~157px with its mark, so it wrapped to a
	   second line inside its own cell and cost back the height the grid had
	   just saved. Spanning is correct in the one-column state too. */
	.oasis-hero__facts li:last-child { grid-column: 1 / -1; }
	/* Both selectors carry the mark, and they must be written together:
	   `li + li::before` outscores `li::before` on specificity, so setting the
	   two separately left items 2 and 3 with the base rule's mark suppressed
	   and only item 1 marked. */
	.oasis-hero__facts li::before,
	.oasis-hero__facts li + li::before {
		content: "";
		display: block;
		width: 0.9rem;
		height: 0.3rem;
		flex: none;
		background: no-repeat center / contain
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='9' viewBox='0 0 34 9'%3E%3Cpath d='M1.6 7.2C7 1.6 13 1.6 17 4.2s10 2.4 15.4-2.6' fill='none' stroke='%23b4ec51' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
	}
}

@media (max-width: 899px) {
	/* Was min(90svh, 780px). On a 430x932 phone the 780px cap bound first and
	   threw away 150px the frame could have had — and because the type block
	   is bottom-anchored, every pixel of hero height above it is film. */
	.oasis-hero { min-height: min(92svh, 900px); }
	/* A tall frame crops the 16:9 plate hard at the sides — a 390px phone
	   sees only 28% of the source width, and a 320px one 33% — so the
	   horizontal anchor matters here in a way it cannot at desktop. The
	   vertical value is inert on a phone: `cover` shows the full image
	   height at these aspect ratios, so there is nothing to pan. It is
	   kept only so the declaration still reads correctly if the frame
	   ever gets shorter than the plate.

	   RE-MEASURED 6 September 2026, on a real phone-sized frame.

	   50% was wrong, and the earlier note explains why it was chosen:
	   the pans that had been tried were 60% and 68%, which move the
	   window RIGHT and push the child further off the left edge. Both
	   were indeed worse. But 50% was not neutral either — it sliced the
	   nearest child down the left-hand frame edge, cutting the side of
	   his head and one shoulder clean off. That is the single defect the
	   client reported seeing on a real handset.

	   The window has to move LEFT, not right. The near child sits at
	   roughly 32–48% of the source width; centring the window on 40%
	   puts him fully inside the frame at about a fifth in from the left,
	   with open ground ahead of him in the direction he is walking.
	   Stepped through 50 / 44 / 40 / 36 / 32 against both the poster and
	   a live video frame at 320, 360, 390 and 430: 40% is the only value
	   that keeps him whole at every one of them.

	   He now stands behind the headline rather than beside it. That is
	   fine and was always going to be true in a frame this tall — the
	   directed scrim below is measured against exactly this composition,
	   and legibility was re-checked after the change, not assumed. */
	.oasis-hero__media img,
	.oasis-hero__media video { object-position: 40% 42%; }
	/* On a narrow screen the type spans nearly the full width and sits in the
	   lower half, so the plate is built from the foot of the frame upward
	   rather than in from the left.

	   RE-MEASURED 2 September 2026, after the type block was rebalanced. The
	   old stops ran 0.86 at the foot to 0.08 at the very top — a wash over the
	   whole frame — and were tuned for a type block that filled 66-81% of the
	   hero. With the block down to 49-60% the measurement came back at
	   5.07-7.46:1 behind a headline that needs 3.0 and 6.79-9.85:1 behind a
	   lede that needs 4.5: the plate was darkening a picture it no longer had
	   to. §19.3's rule is the lightest setting that still clears AA, so it is
	   walked back and, more importantly, it now reaches ZERO before the top of
	   the frame instead of trailing 0.08 across the sky. The film reads as
	   film again. Re-verified across 14 frames of the 18s loop at 430, 390,
	   375, 360 and 320. */
	.oasis-hero__scrim {
		background:
		linear-gradient(to bottom,
			rgba(10, 26, 13, 0.82) 0%,
			rgba(10, 26, 13, 0.66) 5%,
			rgba(10, 26, 13, 0.32) 12%,
			rgba(10, 26, 13, 0) 20%),
		linear-gradient(to top,
			rgba(10, 26, 13, 0.80) 0%,
			rgba(10, 26, 13, 0.76) 24%,
			rgba(10, 26, 13, 0.71) 43%,
			rgba(10, 26, 13, 0.61) 59%,
			rgba(10, 26, 13, 0.38) 73%,
			rgba(10, 26, 13, 0.14) 87%,
			rgba(10, 26, 13, 0) 100%);
	}
	/* The header is fixed over this film and takes no space in flow, so the
	   hero's own top padding has to clear it. Without this the headline runs
	   straight under the wordmark on a short phone (375x667). */
	.oasis-hero__inner {
		padding-block: calc(var(--oasis-header-h) + clamp(0.85rem, 3vw, 1.75rem))
			clamp(3rem, 6vw, 4.25rem);
	}
	/* The hero eyebrow reads "Oasis House" — which the wordmark in the bar
	   about 100px above it already says. On a narrow screen that redundancy
	   costs a line of height in the tightest layout on the site AND sits at
	   the very top of the type block, the one place a bottom-weighted scrim
	   cannot reach without dimming the whole frame. Dropping it buys the
	   room and removes the contrast problem at once. */
	.oasis-hero__col > .oasis-eyebrow--light { display: none; }

	/* THE TYPE BLOCK IS SIZED AGAINST THE FRAME, NOT AGAINST THE DESKTOP SCALE.
	   It measured 515px of a 780px hero at 430 wide — 66% of the frame, and
	   79-81% on a 375 or 320 screen. At that ratio there is no picture left:
	   the film survives only as a strip above the headline, and since the
	   scrim is bottom-weighted the rest is a dark green field. The client's
	   note was exactly that — "the video is playing but you cannot tell".

	   So each element steps down and the gaps between them tighten. Nothing
	   is removed and no copy changes; the headline is still the largest thing
	   in the frame and still the first thing read. */
	.oasis-hero__title {
		/* The cap has to keep climbing toward the 900px breakpoint or the
		   headline steps DOWN as the screen gets bigger: capped at 2.45rem it
		   was 39px at 899 against 55px at 900. This meets the desktop scale
		   at the boundary (51.9px at 899) while still giving a 390 phone
		   32px. */
		font-size: clamp(2rem, 1.05rem + 3.9vw, 3.4rem);
		line-height: 1.06;
		max-width: 15ch;
	}
	.oasis-hero__lede {
		font-size: clamp(1rem, 0.94rem + 0.32vw, 1.1rem);
		line-height: 1.42;
		margin-top: 0.85rem;
		max-width: 33ch;
	}
	.oasis-hero__actions {
		flex-direction: column;
		align-items: stretch;
		gap: 0.6rem;
		margin-top: 1.35rem;
	}
	.oasis-hero__actions .oasis-btn,
	.oasis-hero__actions .oasis-cta {
		width: 100%;
		/* 46px, still clear of the 44px target minimum. */
		padding-block: 0.72em;
		min-height: 46px;
	}
	.oasis-hero__ofsted { margin-top: 1.05rem; }
	.oasis-hero__facts { margin-top: 1.15rem; padding-top: 0.8rem; }
	.oasis-hero__mediactl {
		/* Bottom right. The header owns the top-right corner on a phone, and
		   below it is where the headline runs — on a 375x667 screen the
		   control sat directly on the second line. The foot of the frame is
		   clear: the facts list ends well short of the right edge. */
		top: auto;
		/* clear of the shelter curve the mint band rises on (section 2), or
		   the control straddles the join between film and paper */
		bottom: clamp(2.6rem, 7vw, 3.5rem);
		right: clamp(0.85rem, 3vw, 1.25rem);
		padding: 0.5rem;
		min-width: 44px;
		justify-content: center;
	}
	.oasis-hero__mediactl-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* Small phones. At 375x667 the type block is nearly as tall as the hero
   itself, so the headline sits high in the frame where a bottom-weighted
   plate cannot reach it. Two changes rather than one: the headline steps
   down so the block is shorter and sits lower, and the plate carries much
   further up. At this size the picture reads as a green field behind words
   in any case — there is no bright corner left to protect. */
@media (max-width: 380px) {
	.oasis-hero__title { font-size: 1.92rem; max-width: 16ch; }
	.oasis-hero__lede { font-size: 0.98rem; max-width: 32ch; }
	/* Also re-measured. The old stops here were 0.90 at the foot and still
	   0.48 at the very top, which is not a vignette — it is a green filter
	   over the whole picture. The small-phone type block is shorter now and
	   the short-viewport step above shortens it again, so the plate can stop
	   well before the top of the frame.

	   RE-MEASURED AGAIN 6 September 2026, for the same reason as the desktop
	   plate: the footage was swapped for the brighter children-playing clip
	   and nobody re-ran the numbers. On a 320x568 handset the lime italic
	   came back at 2.46:1 against the 3:1 it needs.

	   Every stop is the previous value multiplied by 1.24 — the lightest
	   setting that clears AA here (320x568: 3.54:1, margin +0.54; 375x667:
	   8.59:1). The two innermost stops land above 0.95 and are held there:
	   they sit at the very foot of the frame, which the organic curve and
	   the section below it cover anyway.

	   Note the shape is unchanged. The top of the ramp is still 0.074 —
	   effectively clear — so the point of the last revision survives: this
	   is still a plate that stops before the top of the frame, not a filter
	   across the whole of it. */
	.oasis-hero__scrim {
		background:
			linear-gradient(to bottom,
				rgba(10, 26, 13, 0.82) 0%,
				rgba(10, 26, 13, 0.66) 5%,
				rgba(10, 26, 13, 0.32) 12%,
				rgba(10, 26, 13, 0) 20%),
			linear-gradient(to top,
				rgba(10, 26, 13, 0.95) 0%,
				rgba(10, 26, 13, 0.95) 30%,
				rgba(10, 26, 13, 0.95) 50%,
				rgba(10, 26, 13, 0.831) 66%,
				rgba(10, 26, 13, 0.570) 80%,
				rgba(10, 26, 13, 0.248) 92%,
				rgba(10, 26, 13, 0.074) 100%);
	}
}

/* SHORT PHONES — keyed on HEIGHT, because height is what is actually short.
   A 375x667 or 360x640 screen gives the hero ~615px to hold a headline, a
   three-line lede, two stacked buttons, the registration note and the facts.
   Width-based rules cannot help: 375 is not a narrow screen, it is a short
   one, and the same block on a 375x900 phone has room to spare. Every value
   here is one step below the phone scale above, and the ~55px it returns is
   the difference between a strip of film and a picture. */
@media (max-width: 899px) and (max-height: 730px) {
	.oasis-hero__title { font-size: 1.78rem; max-width: 16ch; }
	.oasis-hero__lede {
		font-size: 0.95rem;
		line-height: 1.36;
		margin-top: 0.6rem;
		max-width: 34ch;
	}
	.oasis-hero__actions { margin-top: 0.95rem; gap: 0.5rem; }
	.oasis-hero__actions .oasis-btn,
	.oasis-hero__actions .oasis-cta { padding-block: 0.62em; min-height: 44px; }
	.oasis-hero__ofsted {
		margin-top: 0.75rem;
		font-size: 0.82rem;
		line-height: 1.5;
	}
	.oasis-hero__facts { margin-top: 0.8rem; padding-top: 0.6rem; }
}

/* Hero entrance — the one orchestrated moment (/docs/MOTION_SYSTEM.md §3).
   The poster is painted unanimated; it carries the LCP element. */
@keyframes oasis-enter {
	from { opacity: 0; transform: translateY(var(--oasis-rise-sm)); }
	to { opacity: 1; transform: none; }
}
.js .oasis-hero__enter > * { animation: oasis-enter 620ms var(--oasis-ease-out) both; }
.js .oasis-hero__enter > *:nth-child(1) { animation-delay: 40ms; }
.js .oasis-hero__enter > *:nth-child(2) { animation-delay: 120ms; }
.js .oasis-hero__enter > *:nth-child(3) { animation-delay: 200ms; }
.js .oasis-hero__enter > *:nth-child(4) { animation-delay: 280ms; }
.js .oasis-hero__enter > *:nth-child(5) { animation-delay: 360ms; }
.js .oasis-hero__enter > *:nth-child(6) { animation-delay: 440ms; }
@media (prefers-reduced-motion: reduce) { .js .oasis-hero__enter > * { animation: none; } }

/* --------------------------------------------------------------------------
   2. Registration band — the honest position, stated once, verbatim.

   It also closes the hero. The film's bottom edge is not cut straight: this
   band rises into it on the shelter curve, the same gesture the Life band
   makes further down the page (section 4). Shallow — 2.75rem of rise across
   the whole width, so it reads as the ground coming up to meet the picture
   rather than as a wave graphic laid across the join.

   `border-radius` on a block already in flow: no SVG, no mask, no clip-path,
   nothing that can overflow horizontally or clip what is inside the hero.
   -------------------------------------------------------------------------- */
.oasis-registration {
	position: relative;
	z-index: 1;
	border-radius: 50% 50% 0 0 / 2.75rem 2.75rem 0 0;
	margin-top: -2.75rem;
	padding-top: calc(var(--oasis-section-gap) + 1rem);
}
@media (max-width: 599px) {
	/* A 50% horizontal radius over a narrow viewport is a much tighter arc
	   than over a wide one. Held to a shallower rise so the curve stays the
	   same *gesture* on a phone rather than becoming a dome. */
	.oasis-registration {
		border-radius: 50% 50% 0 0 / 1.75rem 1.75rem 0 0;
		margin-top: -1.75rem;
	}
}
.oasis-registration .oasis-bed { align-items: start; }
.oasis-registration__aside { grid-column: 1 / -1; }
.oasis-registration__main { grid-column: 1 / -1; }
@media (min-width: 900px) {
	.oasis-registration .oasis-bed { align-items: stretch; }
	.oasis-registration__aside {
		grid-column: 1 / span 4;
		display: flex;
		flex-direction: column;
	}
	.oasis-registration__aside .oasis-arrowlink { margin-top: auto; }
	.oasis-registration__main {
		grid-column: 5 / span 8;
		padding-left: clamp(1.5rem, 3vw, 3rem);
		border-left: 1px solid rgba(36, 92, 44, 0.2);
	}
}
.oasis-registration__aside h2 {
	font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
	margin-top: 0.3rem;
	max-width: 12ch;
}
.oasis-registration__aside .oasis-arrowlink { margin-top: 1.75rem; }
@media (min-width: 900px) {
	/* declared after the column rule above, so it has to restate the auto:
	   the link closes the aside against the foot of the statement */
	.oasis-registration__aside .oasis-arrowlink { margin-top: auto; padding-top: 2rem; }
}

/* On the band the notice partial drops its own card fill — the band IS the
   mint surface — so the treatment still reads as one consistent registration
   moment wherever a professional meets it. */
.oasis-registration .oasis-ofsted-notice {
	background: none;
	padding: 0;
	border-radius: 0;
	max-width: none;
}
.oasis-registration .oasis-ofsted-notice::before { display: none; }
.oasis-registration .oasis-ofsted-notice p {
	font-family: var(--oasis-font-display);
	font-size: clamp(1.26rem, 1.02rem + 1vw, 1.74rem);
	line-height: 1.42;
	letter-spacing: -0.012em;
	color: var(--oasis-green-deep);
	max-width: 34ch;
}
.oasis-registration__welcome {
	margin-top: 1.9rem;
	padding-top: 1.7rem;
	border-top: 1px solid rgba(36, 92, 44, 0.18);
	max-width: 46ch;
	font-size: clamp(1rem, 0.95rem + 0.22vw, 1.09rem);
	line-height: 1.6;
	color: var(--oasis-ink-soft);
}

/* --------------------------------------------------------------------------
   3. Who Oasis House is — a magazine opening, then three commitments.
   -------------------------------------------------------------------------- */
.oasis-who__head { grid-column: 1 / -1; }
.oasis-who__body { grid-column: 1 / -1; }
@media (min-width: 900px) {
	.oasis-who .oasis-bed { align-items: stretch; }
	.oasis-who__head {
		grid-column: 1 / span 5;
		display: flex;
		flex-direction: column;
	}
	/* the link drops to the foot of the row instead of hanging under the
	   heading with 200px of paper below it */
	.oasis-who__head .oasis-arrowlink { margin-top: auto; }
	.oasis-who__body { grid-column: 7 / span 6; padding-top: 0.4rem; }
	.oasis-who__body .oasis-who__lede { max-width: 30ch; }
}
.oasis-who__head h2 { max-width: 11ch; }
.oasis-who__head .oasis-arrowlink { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
@media (min-width: 900px) {
	.oasis-who__head .oasis-arrowlink { margin-top: auto; padding-top: 2rem; }
}
.oasis-who__lede {
	font-family: var(--oasis-font-display);
	font-size: clamp(1.24rem, 1.06rem + 0.75vw, 1.6rem);
	line-height: 1.44;
	color: var(--oasis-ink);
}
.oasis-who__para { margin-top: 1.15rem; color: var(--oasis-ink-soft); }

/* Not cards: three column-heads on their own leaf rule, stepped down a
   diagonal so the band never reads as an equal three-up
   (/docs/COMPONENT_LANGUAGE.md §2.5, /docs/DESIGN_QA_CHECKLIST.md Part A). */
.oasis-commitments {
	list-style: none;
	margin: clamp(3rem, 6vw, 5rem) 0 0;
	padding: 0;
	display: grid;
	gap: clamp(1.75rem, 4vw, 2.5rem);
}
@media (min-width: 800px) {
	.oasis-commitments {
		grid-template-columns: 1fr 0.92fr 1.24fr;
		gap: clamp(1.75rem, 3.4vw, 3.75rem);
		align-items: start;
	}
	.oasis-commitment:nth-child(2) { margin-top: 1.75rem; }
	.oasis-commitment:nth-child(3) { margin-top: 3.5rem; }
}
.oasis-commitment {
	display: grid;
	gap: 0.55rem;
	padding-top: 1.3rem;
	border-top: 2px solid var(--oasis-green-leaf);
}
.oasis-commitment__label {
	font-family: var(--oasis-font-display);
	font-weight: 500;
	font-size: clamp(1.34rem, 1.12rem + 0.72vw, 1.7rem);
	line-height: 1.16;
	letter-spacing: -0.012em;
	color: var(--oasis-green-deep);
	text-wrap: balance;
}
.oasis-commitment__text {
	font-size: clamp(1rem, 0.95rem + 0.22vw, 1.09rem);
	line-height: 1.58;
	color: var(--oasis-ink-soft);
	max-width: 32ch;
}

/* --------------------------------------------------------------------------
   4. Life at Oasis House — the photo essay. The site's authenticity anchor:
      the home's OWN rooms, never staged with people.

      Three sizes, three shapes, three vertical positions: a tall arched
      lead, a portrait held-corner dropped low beside it, and a small square
      detail opening the spread. The essay is deliberately graded — equal
      images in a row would be the card grid this brief bans.
   -------------------------------------------------------------------------- */
.oasis-life {
	/* the shelter curve: the band appears to hold the page above it */
	border-radius: 50% 50% 0 0 / 3.5rem 3.5rem 0 0;
	margin-top: calc(-1 * clamp(1rem, 2vw, 2rem));
	padding-top: clamp(4rem, 8vw, 7.5rem);
	padding-bottom: clamp(3rem, 5.5vw, 4.75rem);
}

/* --- the essay --- */
.oasis-life__intro { grid-column: 1 / -1; }
.oasis-life__intro .oasis-lede { margin-top: 1.3rem; max-width: 30ch; }
.oasis-life__intro .oasis-arrowlink { margin-top: 1.9rem; }
@media (min-width: 900px) {
	.oasis-life__intro .oasis-arrowlink { margin-top: auto; padding-top: 2rem; margin-bottom: 0.35rem; }
}
.oasis-life__figure { grid-column: 1 / -1; }

@media (max-width: 899px) {
	.oasis-life__figure { margin-top: clamp(1.25rem, 3vw, 2rem); }
	.oasis-life__lead .oasis-figure__frame img { aspect-ratio: 5 / 6; }
	.oasis-life__side .oasis-figure__frame img { aspect-ratio: 5 / 6; }
	.oasis-life__detail .oasis-figure__frame img { aspect-ratio: 4 / 3; }
}

/* Tablet: the essay pairs up rather than becoming three tall stacked
   photographs — the failure mode of a naive one-column collapse. */
@media (min-width: 620px) and (max-width: 899px) {
	.oasis-life .oasis-bed { align-items: start; }
	.oasis-life__intro { grid-column: 1 / span 9; }
	.oasis-life__lead { grid-column: 1 / span 7; grid-row: 2; }
	.oasis-life__side { grid-column: 8 / span 5; grid-row: 2; margin-top: clamp(3rem, 8vw, 6rem); }
	.oasis-life__detail { grid-column: 1 / span 5; grid-row: 3; }
	.oasis-life__lead .oasis-figure__frame img { aspect-ratio: 5 / 6; }
	.oasis-life__side .oasis-figure__frame img { aspect-ratio: 4 / 5; }
	.oasis-life__detail .oasis-figure__frame img { aspect-ratio: 1 / 1; }
}

@media (min-width: 900px) {
	.oasis-life .oasis-bed { align-items: start; row-gap: clamp(1.5rem, 2.5vw, 2.25rem); }

	/* Row 1: the title block, with the small square detail opening the spread
	   at the far right. Row 2: the two large rooms.

	   The right-hand column has to read as ONE column — detail above, dining
	   below — so the drop on the lower picture is only enough to break the
	   top line, not enough to strand it. At Phase B2 the drop was ~12rem and
	   the two right-hand pictures read as unrelated events with a hole
	   between them (/DESIGN.md §19.3 P1). */
	.oasis-life .oasis-bed { align-items: stretch; }
	.oasis-life__intro {
		grid-column: 1 / span 6;
		grid-row: 1;
		display: flex;
		flex-direction: column;
	}
	/* the link closes the column on the same line the detail's caption ends,
	   so row 1 reads as a spread rather than as a title with a hole under it */
	.oasis-life__intro .oasis-arrowlink { margin-top: auto; margin-bottom: 0.35rem; }
	.oasis-life__intro .oasis-lede { max-width: 40ch; }
	.oasis-life__detail {
		grid-column: 8 / span 5;
		grid-row: 1;
		justify-self: end;
		width: min(100%, 20rem);
		margin-top: clamp(0.5rem, 1.2vw, 1rem);
	}
	.oasis-life__detail .oasis-figure__frame img { aspect-ratio: 1 / 1; }

	.oasis-life__figure { align-self: start; }
	.oasis-life__lead { grid-column: 1 / span 6; grid-row: 2; }
	.oasis-life__lead .oasis-figure__frame img { aspect-ratio: 3 / 4; }

	.oasis-life__side {
		grid-column: 8 / span 5;
		grid-row: 2;
		margin-top: clamp(0.5rem, 1.5vw, 1.35rem);
	}
	.oasis-life__side .oasis-figure__frame img { aspect-ratio: 4 / 5; }
}

/* --------------------------------------------------------------------------
   5. Quote band — the one deep-green field on the page besides the footer.

   The band's job is to change the temperature of the page for one beat, so
   it stays a colour field rather than becoming a component. What it gained
   at Phase B3 is art direction rather than decoration:

     - the green is no longer one flat value. A very soft radial lifts it
       where the words begin and lets it settle at the far corner, which is
       the same "light falling across a surface" logic as the hero;
     - the Arc, the motif the whole identity rests on, is drawn ONCE at
       architectural scale, cradling the quote from beneath. It is a stroke,
       not a shape, at low opacity — the protective curve of the logo used as
       composition instead of as an ornament;
     - the sentence is set in two registers: the claim in roman, the working
       out in italic, so the block has an internal hierarchy instead of being
       an even wall of italic.
   -------------------------------------------------------------------------- */
.oasis-quote {
	padding-block: clamp(4.5rem, 9vw, 8rem);
	overflow: clip;
}
/* The band is a photograph under a directed scrim, not a flat green field
   (client instruction, 1 September 2026). The picture is illustrative
   foliage — NOT the home's garden — and must stay a background: never
   framed, never captioned, never given a credit that would read as a
   picture of the home. See ASSET_INVENTORY.md §7B.

   The scrim is weighted into the left of the frame, where the words sit
   (cols 1–10), so the leaves stay legible as leaves on the right instead
   of the whole picture being flattened to make room for type. */
.oasis-quote.oasis-section--dark {
	background-color: #17401d;
	--oasis-quote-veil: linear-gradient(100deg,
		rgba(16, 42, 20, 0.82) 0%,
		rgba(16, 42, 20, 0.76) 32%,
		rgba(17, 45, 22, 0.58) 58%,
		rgba(20, 54, 26, 0.4) 82%,
		rgba(22, 60, 29, 0.32) 100%);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-image: var(--oasis-quote-veil), url("../media/home/oasis-quote-bg-1100.jpg");
	background-image: var(--oasis-quote-veil),
		image-set(
			url("../media/home/oasis-quote-bg-1800.webp") type("image/webp"),
			url("../media/home/oasis-quote-bg-1100.jpg") type("image/jpeg"));
}
/* Narrow: the words run the full width, so the scrim has to be even rather
   than directed, and heavier — a tall frame gives the picture less room to
   be a picture anyway. */
@media (max-width: 899px) {
	.oasis-quote.oasis-section--dark {
		--oasis-quote-veil: linear-gradient(to bottom,
			rgba(16, 42, 20, 0.78) 0%,
			rgba(16, 42, 20, 0.74) 55%,
			rgba(17, 46, 22, 0.66) 100%);
		background-position: center 30%;
	}
}
/* Data-saver visitors get the flat field the band used to be. */
@media (prefers-reduced-data: reduce) {
	.oasis-quote.oasis-section--dark { background-image: var(--oasis-quote-veil); }
}

/* The Arc is NOT drawn here. It was, at architectural scale across the whole
   band, and at any opacity that made it visible it ran straight through the
   italic line — decorating the one section on the page whose job is to stop
   decorating and let a sentence land. The motif earns more by being absent
   here: the eyebrow mark above the quote is the only gesture the band needs.
   (/DESIGN.md section 19.5 M1, brief item 13 — motif restraint.) */
.oasis-quote__inner { position: relative; }

.oasis-quote .oasis-bed { align-items: end; row-gap: 2rem; }
.oasis-quote__body { grid-column: 1 / -1; }
@media (min-width: 900px) {
	.oasis-quote__body { grid-column: 1 / span 10; }
}

.oasis-quote__mark {
	display: block;
	width: 4.5rem;
	height: 0.65rem;
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
	background: no-repeat left center / contain
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='10' viewBox='0 0 72 10'%3E%3Cpath d='M2 8C14 2 26 2 36 5s22 3 34-3' fill='none' stroke='%23b4ec51' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

.oasis-quote blockquote {
	margin: 0;
	font-family: var(--oasis-font-display);
	color: #fff;
	text-wrap: pretty;
}
.oasis-quote blockquote p { margin: 0; }
.oasis-quote__lead {
	display: block;
	font-style: normal;
	font-weight: 500;
	font-size: clamp(2rem, 1.2rem + 3.2vw, 3.6rem);
	line-height: 1.06;
	letter-spacing: -0.022em;
	margin-bottom: 0.5em;
	max-width: 20ch;
}
.oasis-quote__rest {
	display: block;
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.2rem, 0.98rem + 0.95vw, 1.75rem);
	line-height: 1.42;
	color: rgba(255, 255, 255, 0.9);
	max-width: 40ch;
}

/* --------------------------------------------------------------------------
   6. How we care — a full-width index. Three strands, three rules, each row
      a whole target. No images exist for these subjects, so the structure
      has to carry them (/docs/HOMEPAGE_BLUEPRINT.md §6 note).
   -------------------------------------------------------------------------- */
/* The head and the index are one object, so they do not take the bed's
   full section row-gap between them. */
.oasis-care .oasis-bed { row-gap: clamp(1.25rem, 2.4vw, 2rem); }
.oasis-care__head { grid-column: 1 / -1; margin-bottom: 0; }
@media (min-width: 900px) {
	.oasis-care__head { grid-column: 1 / span 7; }
}
.oasis-care__strands { grid-column: 1 / -1; margin-top: 0; }
.oasis-care__head h2 { max-width: 18ch; }

.oasis-strand {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: clamp(1rem, 2.5vw, 1.75rem);
	row-gap: 0.7rem;
	align-items: baseline;
	padding-block: clamp(1.75rem, 3.2vw, 2.6rem);
	border-top: 1px solid var(--oasis-rule);
}
.oasis-strand:first-child {
	border-top: 2px solid var(--oasis-green-leaf);
	transition: background-color var(--oasis-dur-short) var(--oasis-ease-soft);
}
.oasis-strand:last-child { border-bottom: 1px solid var(--oasis-rule); }
@media (min-width: 820px) {
	.oasis-strand {
		/* folio | title | text | arrow. The title gets a fixed measure so all
		   three read down a common edge; the arrow sits in its own column so
		   it never drifts with the text length. */
		grid-template-columns: 4.5rem minmax(13rem, 15rem) minmax(0, 1fr) 3rem;
		column-gap: clamp(1.5rem, 3vw, 3rem);
		align-items: start;
		padding-block: clamp(2.25rem, 3.6vw, 3.1rem);
	}
}

/* The numeral is a folio, not a label: display face, large, and light
   enough in tone that it sets the row without competing with its title. */
.oasis-strand__num {
	font-family: var(--oasis-font-display);
	font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.6rem);
	font-weight: 400;
	line-height: 0.9;
	letter-spacing: -0.02em;
	/* A tint of the leaf green failed contrast at every alpha that still
	   looked like a tint (1.8:1 at 0.5, 3.2:1 at 0.9). This is the leaf
	   green taken one step deeper instead: 5.0:1 on ivory, so it passes at
	   any size, and still clearly lighter than the deep-green title beside
	   it — which was the only thing the tint was buying. */
	color: #3b7a22;
	font-variant-numeric: lining-nums tabular-nums;
	transition: color var(--oasis-dur-short) var(--oasis-ease-soft);
}
.oasis-strand__title {
	margin: 0;
	font-size: clamp(1.4rem, 1.1rem + 1.15vw, 1.95rem);
	line-height: 1.14;
	letter-spacing: -0.016em;
	text-wrap: balance;
	transition: color var(--oasis-dur-micro) var(--oasis-ease-soft);
}
.oasis-strand__title a { color: inherit; text-decoration: none; }
.oasis-strand__title a::after { content: ""; position: absolute; inset: 0; }
.oasis-strand__text {
	color: var(--oasis-ink-soft);
	max-width: 46ch;
	font-size: clamp(1rem, 0.96rem + 0.16vw, 1.09rem);
	line-height: 1.6;
}
.oasis-strand__go {
	display: none;
	color: var(--oasis-green-deep);
	transition: transform var(--oasis-dur-short) var(--oasis-ease-out);
}
.oasis-strand__go svg { width: 1.6rem; height: auto; }
@media (min-width: 820px) {
	.oasis-strand__go { display: block; justify-self: end; margin-top: 0.35rem; }
	/* the title column carries the row's own baseline, so nudge the folio to
	   sit on it rather than on the top of its own box */
	.oasis-strand__num { padding-top: 0.12em; }
}

/* Hover reads as "this row is a link": the ground warms, the folio comes
   up to full leaf green, the title deepens and the arrow moves. Four small
   things at once, none of them loud. */
@media (hover: hover) {
	.oasis-strand:hover { background: rgba(239, 251, 234, 0.66); }
	.oasis-strand:hover .oasis-strand__go { transform: translateX(7px); }
	.oasis-strand:hover .oasis-strand__title { color: var(--oasis-green-deep-hover); }
	.oasis-strand:hover .oasis-strand__num { color: var(--oasis-green-leaf); }
}
.oasis-strand:has(a:focus-visible) {
	background: rgba(239, 251, 234, 0.85);
	/* --oasis-focus-w was never defined, so this whole declaration was
	   invalid at computed-value time and the row's keyboard focus ring has
	   never rendered. 3px matches the global ring at base.css. */
	outline: 3px solid var(--oasis-focus);
	outline-offset: -3px;
}
.oasis-strand:has(a:focus-visible) .oasis-strand__title a:focus-visible { outline: none; }

.oasis-strand__mlink {
	margin-top: 1rem;
	font-size: 0.98rem;
	font-weight: 600;
	color: var(--oasis-green-deep);
}
@media (max-width: 819px) {
	/* the folio sits above the title rather than beside it, so a narrow
	   screen does not spend a third of its width on two digits */
	.oasis-strand { grid-template-columns: 1fr; row-gap: 0.55rem; }
	.oasis-strand__num { font-size: 1.5rem; }
}
@media (min-width: 820px) { .oasis-strand__mlink { display: none; } }

/* --------------------------------------------------------------------------
   7. For professionals — the placement pathway. Honest about "now".
   -------------------------------------------------------------------------- */
.oasis-professionals .oasis-bed { align-items: start; }
.oasis-professionals__aside { grid-column: 1 / -1; }
.oasis-professionals__main { grid-column: 1 / -1; }
@media (min-width: 940px) {
	.oasis-professionals .oasis-bed { align-items: stretch; }
	.oasis-professionals__aside {
		grid-column: 1 / span 5;
		display: flex;
		flex-direction: column;
	}
	.oasis-professionals__actions { margin-top: auto; padding-top: clamp(1.75rem, 3vw, 2.25rem); }
	.oasis-professionals__main { grid-column: 7 / span 6; }
}
.oasis-professionals__aside h2 { max-width: 12ch; }
.oasis-professionals__aside .oasis-lede {
	margin-top: 1.25rem;
	max-width: 30ch;
	font-size: var(--oasis-fs-base);
	font-family: var(--oasis-font-body);
}
.oasis-professionals__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.75rem;
	margin-top: clamp(1.75rem, 3vw, 2.25rem);
}
/* the note closes the right-hand column against the CTA on the left */
.oasis-professionals__main { display: flex; flex-direction: column; }

.oasis-pathway { list-style: none; margin: 0; padding: 0; display: grid; }
.oasis-pathway__item {
	display: grid;
	gap: 0.6rem;
	padding-block: clamp(1.6rem, 3vw, 2.2rem);
	border-top: 1px solid rgba(36, 92, 44, 0.2);
}
/* The row that is open now is the one a commissioner can act on today, so
   it carries the leaf rule and the full-strength label. The second row is
   deliberately quieter — it is true, it is important, and it is not an
   invitation. */
.oasis-pathway__item:first-child { border-top: 2px solid var(--oasis-green-leaf); }
.oasis-pathway__item:last-child { border-bottom: 1px solid rgba(36, 92, 44, 0.2); }
@media (min-width: 620px) {
	.oasis-pathway__item {
		grid-template-columns: 10.5rem minmax(0, 1fr);
		gap: 0.5rem 2rem;
		align-items: baseline;
	}
}
.oasis-pathway__when {
	font-size: var(--oasis-fs-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--oasis-green-leaf);
	line-height: 1.6;
}
.oasis-pathway__item:last-child .oasis-pathway__when { color: var(--oasis-sage); }
.oasis-pathway__what {
	color: var(--oasis-ink-soft);
	font-size: clamp(1rem, 0.96rem + 0.18vw, 1.09rem);
	line-height: 1.58;
	max-width: 44ch;
}
.oasis-pathway__what strong { display: block; margin-bottom: 0.2rem; }
.oasis-pathway__what strong { color: var(--oasis-ink); font-weight: 600; }

.oasis-professionals__note {
	margin-top: 1.6rem;
	font-size: var(--oasis-fs-sm);
	line-height: 1.55;
	color: var(--oasis-ink);
	max-width: 46ch;
	padding-left: 1rem;
	border-left: 2px solid var(--oasis-sand);
}

/* --------------------------------------------------------------------------
   8. Careers — one line, one link, one picture.

   The strip stays a strip: careers is a whole page and the homepage only
   nods to it. What it gained is a single visual anchor so the band is a
   composition rather than a sentence adrift in a wide rule. The picture is a
   tight DETAIL of the home's own sitting room — cushions, a bolster, a slice
   of floor. It is deliberately not a room shot (the Life spread has those)
   and deliberately not people: there is no compliant photograph of anyone
   connected to the home, and generic smiling-staff stock is exactly the
   recruitment cliché this project avoids (/docs/DESIGN_QA_CHECKLIST.md
   Part A). A detail of the actual place says "this is where you would work"
   without inventing anybody.
   -------------------------------------------------------------------------- */
.oasis-careers {
	border-block: 1px solid var(--oasis-rule);
	/* isolate, or a z-index:-1 child paints behind the section's own
	   background colour and never shows */
	isolation: isolate;
	overflow: clip;
	/* Wide: the veil thins to the right, so the words sit on clean paper and
	   the room opens up beside them. */
	--oasis-careers-veil: linear-gradient(100deg,
		rgba(247, 242, 229, 0.93) 0%,
		rgba(247, 242, 229, 0.8) 34%,
		rgba(247, 242, 229, 0.44) 64%,
		rgba(249, 240, 220, 0.2) 100%);
	--oasis-careers-pos: center;
}
/* Narrow: the text spans the full width, so a left-to-right veil would drop
   the ends of every line onto the brightest part of the picture. The wash
   goes top-to-bottom instead — solid behind the words, opening up below
   them. */
@media (max-width: 759px) {
	.oasis-careers {
		--oasis-careers-veil: linear-gradient(to bottom,
			rgba(251, 249, 244, 0.95) 0%,
			rgba(251, 249, 244, 0.92) 52%,
			rgba(251, 249, 244, 0.62) 82%,
			rgba(251, 249, 244, 0.4) 100%);
		--oasis-careers-pos: center 74%;
	}
}
/* A soft-focus warm interior, washed back under a warm-paper veil so it
   reads as atmosphere behind the words rather than as a photograph.
   It is NOT the home — it is illustrative — which is exactly why it is
   never framed, never captioned and never given an edge: the line
   /DESIGN.md §8.1 draws between the home's own rooms and illustrative
   imagery has to stay visible, and the footer's illustrative-imagery
   disclosure covers it (/docs/COMPLIANCE_RULES.md §4.2.4). */
/* The band sat between two pale sections and, with the veil on, read as a
   gap rather than as a section. The sand tint underneath gives the picture a
   floor to sit on, so the strip has a tone of its own without the veil
   having to be lifted to the point where the words stop being readable. */
.oasis-careers { background-color: #f4efe1; }
.oasis-careers::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-repeat: no-repeat;
	background-position: var(--oasis-careers-pos);
	background-size: cover;
	background-image: var(--oasis-careers-veil), url("../media/home/oasis-careers-bg-1000.jpg");
	background-image: var(--oasis-careers-veil),
		image-set(
			url("../media/home/oasis-careers-bg-1600.webp") type("image/webp"),
			url("../media/home/oasis-careers-bg-1000.jpg") type("image/jpeg"));
}
@media (prefers-reduced-data: reduce) {
	.oasis-careers::before { background-image: none; }
}
.oasis-careers { padding-block: clamp(3.75rem, 6.5vw, 6rem); }
.oasis-careers .oasis-bed { align-items: center; }
.oasis-careers__text { grid-column: 1 / -1; }
@media (min-width: 760px) {
	.oasis-careers__text { grid-column: 1 / span 6; }
}
.oasis-careers__line {
	font-family: var(--oasis-font-display);
	font-size: clamp(1.2rem, 1rem + 0.85vw, 1.65rem);
	line-height: 1.4;
	color: var(--oasis-ink);
	max-width: 44ch;
}
.oasis-careers__line b { color: var(--oasis-green-deep); font-weight: 500; }

/* The priority-vacancy line. Body copy, one step down from the display
   line above it and above the link — the homepage names the post, it
   does not advertise it. No badge, no pill, no "NEW", no colour block:
   the emphasis is one bolded role name and nothing else. */
.oasis-careers__priority {
	margin: clamp(0.85rem, 2vw, 1.15rem) 0 0;
	font-size: var(--oasis-fs-sm);
	line-height: 1.6;
	color: var(--oasis-ink-soft);
	max-width: 44ch;
}
.oasis-careers__priority b { color: var(--oasis-green-deep); font-weight: 600; }

.oasis-careers__text .oasis-arrowlink { margin-top: clamp(1.1rem, 2.5vw, 1.5rem); }

/* --------------------------------------------------------------------------
   9. Contact & confidentiality — the closing spread.

   The page's last beat is the only centred composition on it — a deliberate
   change of address after eight asymmetric sections.
   -------------------------------------------------------------------------- */
.oasis-contact__inner {
	max-width: 46rem;
	margin-inline: auto;
	text-align: center;
	display: grid;
	justify-items: center;
}
.oasis-contact__inner h2 { max-width: 16ch; }
.oasis-contact__inner .oasis-cradle::after { margin-inline: auto; }
.oasis-contact__inner .oasis-eyebrow { justify-content: center; }
/* Two named routes rather than two anonymous lines: a commissioner
   should be able to see at a glance which one is theirs. */
.oasis-contact__routes {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	margin-top: clamp(2rem, 3.6vw, 3rem);
	text-align: left;
}
@media (min-width: 720px) {
	.oasis-contact__routes {
		grid-template-columns: 1fr 1fr;
		gap: clamp(2rem, 4vw, 3.5rem);
	}
}
.oasis-contact__route {
	padding-top: 1.1rem;
	border-top: 2px solid var(--oasis-green-leaf);
}
.oasis-contact__route h3 {
	margin: 0 0 0.45rem;
	font-size: clamp(1.12rem, 1.02rem + 0.4vw, 1.3rem);
	line-height: 1.2;
	color: var(--oasis-green-deep);
}
.oasis-contact__route p {
	margin: 0;
	font-size: var(--oasis-fs-sm);
	line-height: 1.55;
	color: var(--oasis-ink-soft);
	max-width: 36ch;
}

.oasis-contact__confidentiality {
	margin-top: clamp(2.25rem, 4vw, 3rem);
	padding-top: 1.5rem;
	border-top: 1px solid var(--oasis-rule);
	font-size: var(--oasis-fs-sm);
	line-height: 1.6;
	color: var(--oasis-sage);
	max-width: 52ch;
}
.oasis-contact__details { margin-top: clamp(1.9rem, 3.5vw, 2.9rem); }
.oasis-contact__details .oasis-contact-details { display: grid; gap: 0.15rem; }
.oasis-contact__details .oasis-contact-details p { margin: 0; }
.oasis-contact__details .oasis-contact-details a {
	font-family: var(--oasis-font-display);
	font-size: clamp(1.55rem, 0.95rem + 2.6vw, 3.1rem);
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: var(--oasis-green-deep);
	text-decoration: none;
	overflow-wrap: anywhere;
}
.oasis-contact__details .oasis-contact-details a:hover {
	text-decoration: underline;
	text-decoration-color: var(--oasis-green-leaf);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.14em;
}
.oasis-contact__inner .oasis-cta { margin-top: clamp(1.6rem, 3vw, 2.25rem); }

/* ========================================================================== 
   Premium homepage refinement — September 2026

   A browser-led finishing pass, deliberately kept in the front-page sheet.
   It preserves the approved section architecture while improving the three
   places where the composition still felt like a first build: the hero at
   in-between widths, the long one-image-after-another mobile photo essay,
   and the distinction between an action available now and a future route.
   ========================================================================== */

/* Give the film a little more authority on wide screens without turning it
   into a trailer. The content still closes against the shelter curve, while
   the extra height lets the footage read before the page becomes regulatory. */
@media (min-width: 1200px) {
	.oasis-hero { min-height: min(88svh, 850px); }
	.oasis-hero__inner { padding-bottom: clamp(5.25rem, 7vw, 6.5rem); }
	.oasis-hero__col { transform: translateY(1.1rem) scale(0.96); transform-origin: left center; }
	.oasis-hero__title { font-size: clamp(4.25rem, 5vw, 4.85rem); max-width: 15ch; }
}

/* Laptop and landscape-tablet widths need a more editorial measure than the
   wide-screen setting. This keeps the title and lede on the dependable dark
   side of the moving frame and prevents either from drifting into the child. */
@media (min-width: 900px) and (max-width: 1199px) {
	.oasis-hero__col { max-width: min(55vw, 39rem); }
	.oasis-hero__title { font-size: clamp(3.45rem, 5.6vw, 4.2rem); max-width: 13ch; }
	.oasis-hero__lede { max-width: 31ch; }
}

/* Tablet has room for a true primary/secondary pair. Keeping the phone's
   full-width stack here made the hero feel like a form rather than a film. */
@media (min-width: 620px) and (max-width: 899px) {
	.oasis-hero__actions { flex-direction: row; align-items: center; }
	.oasis-hero__actions .oasis-btn,
	.oasis-hero__actions .oasis-cta { width: auto; }
}

/* The registration statement is the first content visitors meet after the
   film. A slightly firmer editorial measure makes it feel like a considered
   opening statement rather than a disclaimer spanning the whole column. */
@media (min-width: 900px) {
	.oasis-registration__main { padding-right: clamp(0rem, 2vw, 1.75rem); }
	.oasis-registration .oasis-ofsted-notice p { max-width: 30ch; }
}

/* At phone widths, retain the documentary lead image but turn the two
   supporting photographs into a compact magazine pair. This preserves all
   three authentic views, gives them an intentional hierarchy, and removes a
   large stretch of repetitive vertical scrolling. */
@media (max-width: 619px) {
	.oasis-life { padding-bottom: clamp(2.75rem, 9vw, 3.5rem); }
	.oasis-life .oasis-bed { row-gap: clamp(1.1rem, 4vw, 1.6rem); }
	.oasis-life__figure { margin-top: 0; }
	.oasis-life__lead { margin-top: clamp(1rem, 4vw, 1.5rem); }
	.oasis-life__side .oasis-figure__frame img,
	.oasis-life__detail .oasis-figure__frame img { aspect-ratio: 4 / 3; }
	.oasis-life__figure figcaption { margin-top: 0.65rem; }

	.oasis-commitments { margin-top: clamp(2.25rem, 9vw, 3rem); gap: 1.4rem; }
	.oasis-commitment { padding-top: 1rem; gap: 0.42rem; }
	.oasis-commitment__text { line-height: 1.52; }

	.oasis-care .oasis-bed { row-gap: 1rem; }
	.oasis-strand { padding-block: 1.45rem; row-gap: 0.42rem; }
	.oasis-strand__text { line-height: 1.53; }
	.oasis-strand__mlink { margin-top: 0.65rem; }
}

@media (min-width: 360px) and (max-width: 619px) {
	.oasis-life__side { grid-column: 1 / span 6; }
	.oasis-life__detail { grid-column: 7 / span 6; }
	.oasis-life__side,
	.oasis-life__detail { align-self: start; min-width: 0; }
	.oasis-life__side .oasis-figure__frame img,
	.oasis-life__detail .oasis-figure__frame img { aspect-ratio: 1 / 1; }
	.oasis-life__figure figcaption {
		font-size: 0.8rem;
		line-height: 1.42;
	}
}

/* "Now" is the active professional route. The inset leaf rule and quiet
   mint field make that state immediately scannable; the future route stays
   plain and factual, so it cannot be mistaken for current availability. */
.oasis-pathway__item:first-child {
	position: relative;
	padding-inline: clamp(0.9rem, 2.2vw, 1.35rem);
	background: rgba(239, 251, 234, 0.68);
	border-left: 3px solid var(--oasis-green-leaf);
}
.oasis-pathway__item:last-child { padding-inline: clamp(0.9rem, 2.2vw, 1.35rem); }

@media (min-width: 940px) {
	.oasis-professionals__main { padding-top: 0.25rem; }
	.oasis-professionals__note { margin-top: auto; padding-top: 1.6rem; }
}

/* Careers remains a restrained strip, but it now gives the room detail
   enough vertical presence to register as place rather than as a faint ad
   texture. The copy retains priority and the image stays atmospheric. */
@media (min-width: 760px) {
	.oasis-careers { min-height: 22rem; display: flex; align-items: center; }
	.oasis-careers__text { grid-column: 1 / span 5; }
}
@media (max-width: 759px) {
	.oasis-careers { min-height: 21rem; display: flex; align-items: flex-start; }
	.oasis-careers__line { max-width: 28ch; }
}

/* The close picks up the pale botanical note of the registration band. It
   bookends the page without another decorative curve and makes the move into
   the deep-green footer feel deliberate rather than abrupt. */
.oasis-contact { background: #f5f8ed; }
.oasis-contact__inner { max-width: 49rem; }
.oasis-contact__route { border-top-color: rgba(67, 156, 27, 0.78); }

/* The 320px failure was purely typographic: the shared professional CTA and
   email wrapped into tall blocks. Keep the same labels and touch targets,
   only tighten their homepage presentation at this one constrained width. */
@media (max-width: 359px) {
	.oasis-home .oasis-btn {
		gap: 0.45rem;
		padding-inline: 0.9rem;
		font-size: 0.84rem;
		letter-spacing: -0.01em;
	}
	.oasis-contact__details .oasis-contact-details a {
		font-size: 1.28rem;
		white-space: nowrap;
	}
}

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