/* ==========================================================================
   Oasis House — base stylesheet
   Global tokens, typography, header, navigation, footer, forms, motion.
   Homepage-specific styling is in home.css (front page only).

   Design source of truth: /DESIGN.md, /docs/MOTION_SYSTEM.md,
   /docs/COMPONENT_LANGUAGE.md. Token names: --oasis-*  (mirrors the
   theme.json presets so hand-written CSS has stable, readable names).

   Revision (Phase B2): the visual system was re-cut against DESIGN.md
   §3–§9 after the first homepage build read as "well formatted" rather
   than "designed". Changes are recorded in DESIGN.md §19.2:
     - the header is a solid warm bar on every page (the transparent
       over-hero header and the dark gradient it needed are gone)
     - a bigger, more confident heading scale
     - the eyebrow carries the small arc mark; the cradle line is a
       larger drawn arc used sparingly rather than under every heading
     - paper grain + warm washes give large flat grounds atmosphere
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
	/* Colour — see /DESIGN.md §4.2. Deep green is the ONLY brand green that
	   carries body text. green-mid / green-leaf / green-light / sand are
	   decorative or accent only. */
	--oasis-green-deep: #245c2c;
	--oasis-green-deep-hover: #1b4520;
	--oasis-green-mid: #69b445;
	--oasis-green-leaf: #429321;
	--oasis-green-light: #b4ec51;
	--oasis-sand: #deda94;
	--oasis-mint: #effbea;
	--oasis-parchment: #f1ead9;
	--oasis-shell: #f6f0e4;   /* between paper and parchment — quiet bands */
	--oasis-paper: #fbf9f4;
	--oasis-sage: #4e6b4d;    /* AA-safe for small text on paper/mint/parchment (~5.4:1) */
	--oasis-ink: #22271f;
	--oasis-ink-soft: #3c4438;
	--oasis-white: #fff;

	/* Rules */
	--oasis-rule: rgba(36, 92, 44, 0.16);
	--oasis-rule-soft: rgba(36, 92, 44, 0.1);
	--oasis-rule-strong: rgba(36, 92, 44, 0.3);
	--oasis-hairline: var(--oasis-rule);

	/* Paper grain — atmosphere on large flat grounds (/DESIGN.md §3, G9).
	   A 96px pre-rasterised greyscale+alpha tile (6 KB), NOT an inline
	   SVG feTurbulence: the filtered version measured as the first LCP
	   candidate on a throttled phone because the browser has to run the
	   turbulence filter over every painted band. A bitmap tile costs
	   nothing to repeat. Dropped entirely under prefers-reduced-data. */
	--oasis-grain: url("../img/grain.png");

	/* Widths & rhythm — /DESIGN.md §6, §7 */
	--oasis-w-text: 42rem;
	--oasis-w-content: 48rem;
	--oasis-w-wide: 78rem;
	--oasis-gutter: clamp(1.35rem, 5vw, 4.5rem);
	--oasis-section-gap: clamp(4rem, 8vw, 7.5rem);
	--oasis-heading-gap: clamp(1rem, 2vw, 1.75rem);

	/* Radii — the "held corner" is one corner markedly softer */
	--oasis-radius-sm: 5px;
	--oasis-radius-md: 12px;
	--oasis-radius-lg: 22px;
	--oasis-radius-held: 0.375rem 0.375rem 0.375rem 1.5rem;
	--oasis-radius-held-tr: 0.375rem 1.5rem 0.375rem 0.375rem;

	/* Type — fluid scale, /DESIGN.md §5.3 */
	--oasis-fs-xs: 0.78rem;
	/* was 0.9375rem. Captions, footer links and supporting notes all use
	   this, and at 15px they read as fine print rather than as content. */
	--oasis-fs-sm: clamp(0.97rem, 0.94rem + 0.14vw, 1.03rem);
	--oasis-fs-base: clamp(1.0625rem, 1rem + 0.3vw, 1.15rem);
	--oasis-fs-lede: clamp(1.22rem, 1.08rem + 0.66vw, 1.5rem);
	--oasis-fs-h3: clamp(1.35rem, 1.16rem + 0.85vw, 1.75rem);
	--oasis-fs-h2: clamp(2rem, 1.42rem + 2.35vw, 3.05rem);
	--oasis-fs-h1: clamp(2.35rem, 1.7rem + 2.9vw, 3.5rem);
	--oasis-fs-display: clamp(2.65rem, 1.7rem + 4.2vw, 4.35rem);

	--oasis-font-display: Newsreader, Georgia, "Times New Roman", serif;
	--oasis-font-body: "Instrument Sans", -apple-system, BlinkMacSystemFont,
		"Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Motion — /docs/MOTION_SYSTEM.md §2 */
	--oasis-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--oasis-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
	--oasis-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
	--oasis-dur-micro: 150ms;
	--oasis-dur-short: 240ms;
	/* the once-per-load page entrance: slower than a reveal on purpose,
	   because it is the page arriving rather than a section catching up */
	--oasis-dur-enter: 900ms;
	--oasis-dur-reveal: 620ms;
	--oasis-dur-image: 900ms;
	--oasis-rise: 18px;
	--oasis-rise-sm: 12px;
	--oasis-stagger: 80ms;

	--oasis-shadow-sm: 0 1px 2px rgba(31, 45, 31, 0.06);
	--oasis-shadow-md: 0 14px 40px -18px rgba(31, 45, 31, 0.3);
	--oasis-shadow-lg: 0 40px 90px -40px rgba(31, 45, 31, 0.42);

	--oasis-header-h: 4.75rem;
	--oasis-focus: var(--oasis-green-deep);

	color-scheme: light;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 6.5rem;
}

body {
	background-color: var(--oasis-paper);
	color: var(--oasis-ink);
	font-family: var(--oasis-font-body);
	font-size: var(--oasis-fs-base);
	line-height: 1.66;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-feature-settings: "kern" 1, "liga" 1;
	overflow-x: hidden;
}

img,
picture,
video,
svg { display: block; max-width: 100%; height: auto; }

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

a { color: var(--oasis-green-deep); }

:where(ul, ol) { padding-left: 1.25em; }

::selection { background: var(--oasis-green-light); color: var(--oasis-green-deep); }

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--oasis-font-display);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.012em;
	color: var(--oasis-green-deep);
	text-wrap: balance;
}

h1 { font-size: var(--oasis-fs-h1); }
h2 { font-size: var(--oasis-fs-h2); }
h3 { font-size: var(--oasis-fs-h3); line-height: 1.2; letter-spacing: -0.005em; }
h4 { font-size: var(--oasis-fs-lede); line-height: 1.28; letter-spacing: 0; }

/* An italic word inside a display heading — the emotional accent
   (/DESIGN.md §5.4). Used once per heading at most. */
.oasis-em { font-style: italic; font-synthesis: none; }

p { text-wrap: pretty; }
p + p { margin-top: 0.95em; }

strong, b { font-weight: 600; }

.oasis-lede {
	font-family: var(--oasis-font-display);
	font-weight: 400;
	font-size: var(--oasis-fs-lede);
	line-height: 1.45;
	color: var(--oasis-ink-soft);
	text-wrap: pretty;
}

.oasis-nb { white-space: nowrap; }

/* Eyebrow label — small caps preceded by a short arc mark, the smallest
   member of the Arc family (/DESIGN.md §9.1, /docs/COMPONENT_LANGUAGE.md §4.5). */
.oasis-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	font-family: var(--oasis-font-body);
	font-size: var(--oasis-fs-xs);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--oasis-sage);
	margin-bottom: 1.15rem;
}
.oasis-eyebrow::before {
	content: "";
	flex: none;
	width: 1.6rem;
	height: 0.45rem;
	background: no-repeat left 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='%23429321' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.oasis-eyebrow--plain::before { display: none; }

/* Body links — colour is constant; the underline animates. /DESIGN.md §5.4 */
.oasis-prose a,
.oasis-entry-content a {
	color: var(--oasis-green-deep);
	text-decoration: underline;
	text-decoration-color: var(--oasis-green-leaf);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 0.16em;
	transition: text-decoration-thickness var(--oasis-dur-micro) var(--oasis-ease-soft);
}
.oasis-prose a:hover,
.oasis-entry-content a:hover { text-decoration-thickness: 3px; }

/* Standalone "read more about X" link with the arc-arrow */
.oasis-arrowlink {
	display: inline-flex;
	align-items: baseline;
	gap: 0.55em;
	font-weight: 600;
	font-size: 0.98rem;
	letter-spacing: 0.005em;
	color: var(--oasis-green-deep);
	text-decoration: none;
	background-image: linear-gradient(var(--oasis-green-leaf), var(--oasis-green-leaf));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 1.5px;
	padding-bottom: 3px;
	transition: background-size var(--oasis-dur-short) var(--oasis-ease-out);
}
.oasis-arrowlink:hover,
.oasis-arrowlink:focus-visible { background-size: 100% 1.5px; }
.oasis-arrowlink > span { text-wrap: pretty; }
.oasis-arrowlink svg {
	width: 1.15em;
	height: auto;
	flex: none;
	align-self: center;
	transition: transform var(--oasis-dur-short) var(--oasis-ease-out);
}
.oasis-arrowlink:hover svg,
.oasis-arrowlink:focus-visible svg { transform: translateX(4px); }
.oasis-section--dark .oasis-arrowlink {
	color: #fff;
	background-image: linear-gradient(var(--oasis-green-light), var(--oasis-green-light));
}

/* --------------------------------------------------------------------------
   4. The Arc motif — cradle line  (/DESIGN.md §9)
   -------------------------------------------------------------------------- */
.oasis-cradle { position: relative; }
.oasis-cradle::after {
	content: "";
	display: block;
	width: clamp(3.25rem, 7vw, 5rem);
	height: 0.55rem;
	margin-top: 1.15rem;
	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='%23429321' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}
.oasis-cradle--center::after { margin-inline: auto; }
.oasis-section--dark .oasis-cradle::after,
.oasis-cradle--light::after {
	background-image: 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");
}

/* --------------------------------------------------------------------------
   5. Layout helpers
   -------------------------------------------------------------------------- */
.oasis-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}
.oasis-site__content { flex: 1 0 auto; }

.oasis-container {
	width: 100%;
	max-width: var(--oasis-w-wide);
	margin-inline: auto;
	padding-inline: var(--oasis-gutter);
}
.oasis-container--text { max-width: calc(var(--oasis-w-text) + 2 * var(--oasis-gutter)); }
.oasis-container--content { max-width: calc(var(--oasis-w-content) + 2 * var(--oasis-gutter)); }

.oasis-prose { max-width: var(--oasis-w-text); }
.oasis-prose > * + * { margin-top: 1em; }
.oasis-prose h2 { margin-top: 1.6em; }
.oasis-prose h3 { margin-top: 1.4em; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   6. Accessibility — skip link & focus
   -------------------------------------------------------------------------- */
.oasis-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: 0.85rem 1.35rem;
	background: var(--oasis-green-deep);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	border-radius: 0 0 var(--oasis-radius-md) 0;
}
.oasis-skip-link:focus { left: 0; }

:focus-visible {
	outline: 3px solid var(--oasis-focus);
	outline-offset: 2px;
	border-radius: 3px;
}
.oasis-section--dark { --oasis-focus: #fff; }

/* --------------------------------------------------------------------------
   7. Buttons  (/DESIGN.md §11, /docs/COMPONENT_LANGUAGE.md §4.1)
   -------------------------------------------------------------------------- */
.oasis-btn,
.oasis-cta,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	font-family: var(--oasis-font-body);
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: 0.005em;
	line-height: 1.2;
	text-decoration: none;
	padding: 0.95em 1.5em;
	min-height: 48px;
	border: 1.5px solid transparent;
	border-radius: var(--oasis-radius-held);
	cursor: pointer;
	transition: background-color var(--oasis-dur-micro) var(--oasis-ease-soft),
		border-color var(--oasis-dur-micro) var(--oasis-ease-soft),
		box-shadow var(--oasis-dur-short) var(--oasis-ease-out),
		transform var(--oasis-dur-micro) var(--oasis-ease-soft);
}

.oasis-btn--primary,
.oasis-cta--professional,
.wp-block-button:not(.is-style-oasis-outline) .wp-block-button__link {
	background: var(--oasis-green-deep);
	color: #fff;
	border-color: var(--oasis-green-deep);
}
.oasis-btn--primary:hover,
.oasis-cta--professional:hover,
.wp-block-button:not(.is-style-oasis-outline) .wp-block-button__link:hover {
	background: var(--oasis-green-deep-hover);
	border-color: var(--oasis-green-deep-hover);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 12px 26px -14px rgba(27, 69, 32, 0.75);
}
.oasis-btn--primary:active,
.oasis-cta--professional:active { transform: none; box-shadow: none; }

.oasis-btn--secondary,
.is-style-oasis-outline .wp-block-button__link {
	background: transparent;
	color: var(--oasis-green-deep);
	border-color: rgba(36, 92, 44, 0.42);
}
.oasis-btn--secondary:hover,
.is-style-oasis-outline .wp-block-button__link:hover {
	background: var(--oasis-mint);
	border-color: var(--oasis-green-deep);
	color: var(--oasis-green-deep);
}

/* --------------------------------------------------------------------------
   Buttons on a dark ground.

   The primary button's fill is `--oasis-green-deep`, which is also the
   fill of `.oasis-section--dark`. On a dark band it therefore rendered
   as invisible chrome around white text and stopped reading as a button
   at all — found on Resources, which was the first page to place a
   primary CTA on a deep-green field.

   The dark variant inverts to the brand's light green, and hover goes
   to white. Both are contextual variants of the SAME component: no new
   class, and symmetrical with the `--secondary` rules that already
   existed here. Light grounds are untouched.

   Contrast: #245c2c on #b4ec51 = 5.7:1; on #fff = 7.9:1. The focus ring
   is white (set below on `.oasis-section--dark`) and sits outside the
   button, on the dark ground, where it has full contrast.
   -------------------------------------------------------------------------- */
.oasis-section--dark .oasis-btn--primary,
.oasis-section--dark .oasis-cta--professional,
.oasis-section--dark .wp-block-button:not(.is-style-oasis-outline) .wp-block-button__link {
	background: var(--oasis-green-light);
	border-color: var(--oasis-green-light);
	color: var(--oasis-green-deep);
}
.oasis-section--dark .oasis-btn--primary:hover,
.oasis-section--dark .oasis-cta--professional:hover,
.oasis-section--dark .wp-block-button:not(.is-style-oasis-outline) .wp-block-button__link:hover {
	background: #fff;
	border-color: #fff;
	color: var(--oasis-green-deep);
	box-shadow: 0 12px 26px -14px rgba(0, 0, 0, 0.55);
}

.oasis-section--dark .oasis-btn--secondary {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.55);
}
.oasis-section--dark .oasis-btn--secondary:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: #fff;
	color: #fff;
}

.oasis-btn svg,
.oasis-cta svg { width: 1.15em; height: auto; flex: none; transition: transform var(--oasis-dur-short) var(--oasis-ease-out); }
.oasis-btn:hover svg,
.oasis-cta:hover svg { transform: translateX(4px); }
.oasis-btn > span,
.oasis-cta > span { text-wrap: balance; }

@media (max-width: 520px) {
	.oasis-btn,
	.oasis-cta { font-size: 0.98rem; padding: 0.92em 1.25em; }
}

/* --------------------------------------------------------------------------
   7B. Page scaffolding shared by every page

   Promoted from home.css when the About page became the first
   internal page to need it. Section grounds, the twelve-column bed
   and the figure primitives are the site vocabulary; a page-specific
   stylesheet composes with them and never restates them.
   -------------------------------------------------------------------------- */
/* Shared section scaffolding ---------------------------------------------- */
.oasis-section {
	padding-block: var(--oasis-section-gap);
	position: relative;
}
.oasis-section--tight { padding-block: clamp(2.75rem, 5vw, 4.25rem); }
.oasis-front-page .oasis-section { scroll-margin-top: 5.5rem; }

.oasis-section--mint { background: var(--oasis-mint); }
.oasis-section--parchment { background: var(--oasis-parchment); }
.oasis-section--shell { background: var(--oasis-shell); }
.oasis-section--ivory { background: var(--oasis-paper); }
.oasis-section--dark {
	background: var(--oasis-green-deep);
	color: rgba(255, 255, 255, 0.92);
}
.oasis-section--mint,
.oasis-section--parchment,
.oasis-section--shell,
.oasis-section--dark {
	background-image: var(--oasis-grain);
}
.oasis-section--dark { background-blend-mode: soft-light; }
.oasis-section--dark h1,
.oasis-section--dark h2,
.oasis-section--dark h3 { color: #fff; }
.oasis-section--dark .oasis-eyebrow { color: rgba(255, 255, 255, 0.72); }
.oasis-section--dark .oasis-eyebrow::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-section--dark .oasis-lede { color: rgba(255, 255, 255, 0.84); }

/* A twelve-column bed used by the sections that need real asymmetry. */
.oasis-bed {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: clamp(1rem, 2vw, 2rem);
	row-gap: clamp(2rem, 4vw, 3rem);
}

/* --- figure primitives (declared before the layout that offsets them) --- */
.oasis-figure { margin: 0; }
.oasis-figure__frame {
	position: relative;
	overflow: clip;
	background: var(--oasis-paper);
	box-shadow: var(--oasis-shadow-md);
}
.oasis-figure--arch .oasis-figure__frame {
	border-radius: 50% 50% var(--oasis-radius-lg) var(--oasis-radius-lg) / 24% 24% 0 0;
}
.oasis-figure--held .oasis-figure__frame { border-radius: 0.5rem 2.25rem 0.5rem 0.5rem; }
.oasis-figure--held-l .oasis-figure__frame { border-radius: 2.25rem 0.5rem 0.5rem 0.5rem; }
.oasis-figure__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 5;
}
.js .oasis-figure__frame img {
	transform: scale(1.06);
	transition: transform var(--oasis-dur-image) var(--oasis-ease-out);
}
.js .oasis-reveal:not(.is-pending) .oasis-figure__frame img { transform: scale(1); }
.oasis-figure figcaption {
	margin-top: 0.95rem;
	font-size: var(--oasis-fs-sm);
	line-height: 1.52;
	/* sage on ivory is a pale pairing for something the reader is meant to
	   read; the softer ink holds the tone without whispering */
	color: var(--oasis-ink-soft);
	max-width: 32ch;
}


/* --------------------------------------------------------------------------
   8. Site header  (/DESIGN.md §10)

   Two states.

   Everywhere except the top of the homepage it is a solid warm bar with a
   hairline, in flow, sticky.

   At the top of the homepage it is TRANSPARENT and sits over the hero film,
   so the picture runs edge to edge and top to bottom — the client's
   instruction of 1 September 2026. The mark flips to its reversed variant,
   the nav and the toggle go white, and the CTA takes the on-media ghost
   treatment. As soon as the visitor scrolls, it returns to the solid bar.

   Legibility is not left to chance: the hero's own scrim carries a
   top-down band behind the bar (see .oasis-hero__scrim in home.css), and
   the nav's worst-case contrast over the moving loop was measured the same
   way the hero type was — see DESIGN.md §19.4.
   -------------------------------------------------------------------------- */
.oasis-site-header {
	position: sticky;
	top: 0;
	/* Above the mobile nav overlay (z-index 200): when the panel is open
	   the toggle becomes its close button, and a touch user has no other
	   way out (Escape is a keyboard-only affordance). */
	z-index: 300;
	background: var(--oasis-paper);
	border-bottom: 1px solid var(--oasis-rule-soft);
	transition: box-shadow var(--oasis-dur-short) var(--oasis-ease-inout),
		border-color var(--oasis-dur-short) var(--oasis-ease-inout);
}
.oasis-site-header.is-scrolled {
	box-shadow: 0 1px 0 var(--oasis-rule-soft), 0 12px 28px -22px rgba(31, 45, 31, 0.5);
	border-color: transparent;
}

/* --- the transparent state, homepage only, before any scroll --- */
/* fixed rather than sticky so it takes no space in flow and the hero can
   start at the very top of the viewport underneath it */
.oasis-front-page .oasis-site-header {
	position: fixed;
	inset: 0 0 auto 0;
}
.oasis-front-page .oasis-site-header:not(.is-scrolled) {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
	--oasis-header-fg: #fff;
	--oasis-focus: #fff;
}
/* The open mobile panel is a paper surface, so the bar has to drop back to
   its dark-on-light appearance while it is up or the toggle disappears. */
.oasis-front-page .oasis-site-header:has(.oasis-primary-nav__toggle[aria-expanded="true"]) {
	background: var(--oasis-paper);
	--oasis-header-fg: var(--oasis-ink-soft);
	--oasis-focus: var(--oasis-green-deep);
}
.oasis-front-page .oasis-site-header:has(.oasis-primary-nav__toggle[aria-expanded="true"]) .oasis-branding__icon--light,
.oasis-front-page .oasis-site-header:has(.oasis-primary-nav__toggle[aria-expanded="true"]) .oasis-branding__word--light { display: none; }
.oasis-front-page .oasis-site-header:has(.oasis-primary-nav__toggle[aria-expanded="true"]) .oasis-branding__icon--dark,
.oasis-front-page .oasis-site-header:has(.oasis-primary-nav__toggle[aria-expanded="true"]) .oasis-branding__word--dark { display: block; }
.oasis-site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1rem, 3vw, 2.5rem);
	min-height: var(--oasis-header-h);
	padding-block: 0.8rem;
	transition: min-height var(--oasis-dur-short) var(--oasis-ease-inout),
		padding-block var(--oasis-dur-short) var(--oasis-ease-inout);
}
.oasis-site-header.is-scrolled .oasis-site-header__inner {
	min-height: 4.1rem;
	padding-block: 0.55rem;
}

.oasis-branding { display: flex; flex: none; }
.oasis-branding__link {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	line-height: 0;
}
/* Sizes are set from the CAP HEIGHT of the mark, not from the SVG box: each
   derived file now carries a small optical pad inside its viewBox, so the
   box is a few per cent taller than the artwork it holds
   (docs/ASSET_INVENTORY.md §6.3). */
.oasis-branding__icon { width: auto; height: 2.4rem; transition: height var(--oasis-dur-short) var(--oasis-ease-inout); }
.oasis-branding__word { width: auto; height: 0.8rem; }
.oasis-site-header.is-scrolled .oasis-branding__icon { height: 2.1rem; }

/* Dark mark by default; the reversed pair only while the bar is
   transparent over the hero. */
.oasis-branding__icon--light,
.oasis-branding__word--light { display: none; }
.oasis-front-page .oasis-site-header:not(.is-scrolled) .oasis-branding__icon--dark,
.oasis-front-page .oasis-site-header:not(.is-scrolled) .oasis-branding__word--dark { display: none; }
.oasis-front-page .oasis-site-header:not(.is-scrolled) .oasis-branding__icon--light,
.oasis-front-page .oasis-site-header:not(.is-scrolled) .oasis-branding__word--light { display: block; }
@media (max-width: 430px) {
	.oasis-branding__word { height: 0.72rem; }
	.oasis-branding__icon { height: 2.1rem; }
	.oasis-branding__link { gap: 0.5rem; }
}
@media (max-width: 340px) {
	.oasis-branding__word { display: none; }
}

.oasis-header-cta { flex: none; display: flex; align-items: center; }
.oasis-header-cta .oasis-cta {
	padding: 0.6em 1.1em;
	min-height: 42px;
	font-size: 0.875rem;
}
.oasis-header-cta .oasis-cta svg { width: 1.05em; }
/* On the film the filled deep-green pill would sit as a dark block on a dark
   picture. The ghost treatment reads on every frame and keeps the CTA
   unmistakably a button. */
.oasis-front-page .oasis-site-header:not(.is-scrolled) .oasis-header-cta .oasis-cta {
	background: rgba(14, 34, 18, 0.84);
	border-color: rgba(255, 255, 255, 0.7);
	color: #fff;
}
.oasis-front-page .oasis-site-header:not(.is-scrolled) .oasis-header-cta .oasis-cta:hover {
	background: rgba(14, 34, 18, 0.75);
	border-color: #fff;
}
/* The professional CTA stays in the bar wherever it fits; below that it
   is pinned at the foot of the open nav panel instead (/DESIGN.md §10.3).

   THE NAV BREAKPOINT IS 1250px, not 1100px. Measured: branding (192) +
   eight-item nav (696) + the CTA pill (240) + two flex gaps + the two
   container gutters need ~1246px. At the old 1100px breakpoint every
   viewport from 1100 to 1245 kept the full desktop bar and pushed
   "Discuss a Future Placement" off the right-hand edge — at 1100px the
   button read "Discuss a Future" and the rest was outside the window.
   Nothing scrolled, so nothing announced the problem; the site's most
   important call to action was simply half there. The band covers real
   laptop widths and any browser window that is not maximised.

   The panel layout that now takes over below 1250 is the one that
   already shipped at 1080 — branding, toggle, CTA — so this widens a
   tested state rather than introducing one. main.js matches this number
   in initNav and initSubmenus; if it moves, move it there too. */
@media (max-width: 719px) { .oasis-header-cta { display: none; } }
@media (max-width: 1249px) { .oasis-primary-navigation { margin-left: auto; } }
/* The compact pill was scoped to the panel widths only. It is wanted for a
   little longer than that: between 1250 and 1400 the full-size pill leaves
   the bar's right-hand margin at 6–20px against the logo's 72px, which
   reads as a button about to fall off the page. The compact state is 35px
   narrower and already part of the design; extending it to 1400 is enough
   to give the narrow desktop bar a margin somebody would call deliberate. */
@media (min-width: 720px) and (max-width: 1399px) {
	.oasis-header-cta .oasis-cta { padding: 0.55em 0.95em; font-size: 0.83rem; }
}

/* --------------------------------------------------------------------------
   9. Primary navigation
   -------------------------------------------------------------------------- */
.oasis-primary-navigation { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.oasis-primary-nav__panel { display: contents; }

.oasis-primary-nav__toggle {
	display: none;
	align-items: center;
	gap: 0.55rem;
	background: none;
	border: 1.5px solid currentColor;
	color: var(--oasis-header-fg, var(--oasis-green-deep));
	border-radius: var(--oasis-radius-held);
	padding: 0.6rem 0.95rem;
	min-height: 44px;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	cursor: pointer;
}
.oasis-primary-nav__toggle-bars {
	position: relative;
	width: 1.05rem; height: 1.5px;
	background: currentColor;
}
.oasis-primary-nav__toggle-bars::before,
.oasis-primary-nav__toggle-bars::after {
	content: ""; position: absolute; left: 0;
	width: 100%; height: 1.5px; background: currentColor;
}
.oasis-primary-nav__toggle-bars::before { top: -5px; }
.oasis-primary-nav__toggle-bars::after { top: 5px; }
.oasis-primary-nav__toggle[aria-expanded="true"] {
	background: var(--oasis-mint);
	border-color: var(--oasis-green-deep);
}
.oasis-primary-nav__toggle[aria-expanded="true"] .oasis-primary-nav__toggle-bars { background: transparent; }
.oasis-primary-nav__toggle[aria-expanded="true"] .oasis-primary-nav__toggle-bars::before { top: 0; transform: rotate(45deg); }
.oasis-primary-nav__toggle[aria-expanded="true"] .oasis-primary-nav__toggle-bars::after { top: 0; transform: rotate(-45deg); }
.oasis-primary-nav__toggle-bars::before,
.oasis-primary-nav__toggle-bars::after { transition: transform var(--oasis-dur-micro) var(--oasis-ease-soft), top var(--oasis-dur-micro) var(--oasis-ease-soft); }

.oasis-primary-nav__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: clamp(0.7rem, 1.5vw, 1.5rem);
}
.oasis-primary-nav__menu ul { list-style: none; margin: 0; padding: 0; }

.oasis-menu-item { position: relative; }
.oasis-menu-item--has-children { display: flex; align-items: center; gap: 0.1rem; }

.oasis-menu-item__link {
	display: inline-block;
	padding-block: 0.55rem;
	font-weight: 500;
	font-size: 0.9rem;
	letter-spacing: 0.005em;
	white-space: nowrap;
	text-decoration: none;
	color: var(--oasis-header-fg, var(--oasis-ink-soft));
	position: relative;
	transition: color var(--oasis-dur-micro) var(--oasis-ease-soft);
}
.oasis-menu-item__link:hover { color: var(--oasis-green-deep); }
.oasis-front-page .oasis-site-header:not(.is-scrolled) .oasis-menu-item__link:hover { color: #fff; }
/* the current-page cradle mark needs the light stroke on the film */
.oasis-front-page .oasis-site-header:not(.is-scrolled) .oasis-menu-item__link::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='6' viewBox='0 0 40 6'%3E%3Cpath d='M2 4C10 1 18 1 26 2.5S36 4 38 2' fill='none' stroke='%23b4ec51' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.oasis-menu-item__link::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0.05rem;
	height: 4px;
	background: no-repeat center / 100% 100%
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='6' viewBox='0 0 40 6'%3E%3Cpath d='M2 4C10 1 18 1 26 2.5S36 4 38 2' fill='none' stroke='%23429321' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
	opacity: 0;
	transform: scaleX(0.4);
	transition: opacity var(--oasis-dur-micro) var(--oasis-ease-out),
		transform var(--oasis-dur-micro) var(--oasis-ease-out);
}
.oasis-menu-item__link:hover::after,
.oasis-menu-item.current-menu-item > .oasis-menu-item__link::after,
.oasis-menu-item.current-menu-ancestor > .oasis-menu-item__link::after,
.oasis-menu-item.current_page_item > .oasis-menu-item__link::after {
	opacity: 1;
	transform: scaleX(1);
}
.oasis-menu-item.current-menu-item > .oasis-menu-item__link,
.oasis-menu-item.current_page_item > .oasis-menu-item__link { color: var(--oasis-green-deep); }
/* on the film the deep green would all but vanish; the current item stays
   white and is marked by the cradle stroke underneath it instead */
.oasis-front-page .oasis-site-header:not(.is-scrolled) .oasis-menu-item.current-menu-item > .oasis-menu-item__link,
.oasis-front-page .oasis-site-header:not(.is-scrolled) .oasis-menu-item.current_page_item > .oasis-menu-item__link { color: #fff; }

.oasis-submenu-toggle {
	background: none; border: none; padding: 0.35rem;
	cursor: pointer; color: var(--oasis-header-fg, var(--oasis-ink-soft));
	display: inline-flex; align-items: center; justify-content: center;
	/* WCAG 2.2 2.5.8 target size — the chevron glyph is small, the
	   target is not (/DESIGN.md §16.4). */
	min-width: 2rem;
	min-height: 2.75rem;
	margin-inline-start: -0.2rem;
}
.oasis-submenu-toggle__chevron {
	width: 0.4em; height: 0.4em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--oasis-dur-micro) var(--oasis-ease-soft);
}
.oasis-submenu-toggle[aria-expanded="true"] .oasis-submenu-toggle__chevron {
	transform: translateY(1px) rotate(-135deg);
}

/* Submenu — a disclosure opened only by its button (JS keeps the
   [hidden] attribute and aria-expanded in sync). No hover/focus-within
   reveal, so the visual state and the accessible state never disagree. */
.oasis-sub-menu {
	position: absolute;
	top: calc(100% + 0.55rem);
	left: -1rem;
	min-width: 16.5rem;
	background: var(--oasis-paper);
	border: 1px solid var(--oasis-rule);
	border-radius: 0.375rem 0.375rem 1.5rem 0.375rem;
	box-shadow: var(--oasis-shadow-md);
	padding: 0.75rem;
	gap: 0.1rem;
	z-index: 20;
}
.oasis-sub-menu[hidden] { display: none; }
.oasis-sub-menu:not([hidden]) {
	display: grid;
	animation: oasis-submenu-in var(--oasis-dur-micro) var(--oasis-ease-out) both;
}
@keyframes oasis-submenu-in {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}
.oasis-sub-menu .oasis-menu-item__link {
	display: block;
	padding: 0.65rem 0.85rem;
	border-radius: var(--oasis-radius-sm);
	color: var(--oasis-ink);
	font-size: 0.95rem;
	font-weight: 500;
	white-space: normal;
}
.oasis-sub-menu .oasis-menu-item__link::after { display: none; }
.oasis-sub-menu .oasis-menu-item__link:hover { background: var(--oasis-mint); color: var(--oasis-green-deep); }

/* Mobile navigation panel.
   With JS (html.js): the panel is a fixed overlay toggled by .is-open.
   Without JS: the menu falls back to a plain stacked list, always
   visible, and the toggle button is hidden — fully usable, unstyled. */
@media (max-width: 1249px) {
	.js .oasis-primary-nav__toggle { display: inline-flex; }
	html:not(.js) .oasis-primary-nav__toggle { display: none; }

	.js .oasis-primary-nav__panel {
		display: flex;
		position: fixed;
		inset: 0;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
		background: var(--oasis-paper);
		background-image: var(--oasis-grain);
		padding: calc(var(--oasis-header-h) + 1.5rem) var(--oasis-gutter) 2.5rem;
		overflow-y: auto;
		z-index: 200;
		visibility: hidden;
		opacity: 0;
		transform: translateY(-8px);
		transition: opacity var(--oasis-dur-short) var(--oasis-ease-out),
			transform var(--oasis-dur-short) var(--oasis-ease-out),
			visibility 0s linear var(--oasis-dur-short);
	}
	.js .oasis-primary-nav__panel.is-open {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition-delay: 0s;
	}

	/* The panel is a descendant of the header, so raising the header does
	   not lift the toggle above it — the toggle and the wordmark need
	   their own stacking order inside it. This is what keeps the bar (and
	   therefore the close control) usable while the overlay is open. */
	.js .oasis-primary-nav__toggle,
	.js .oasis-branding { position: relative; z-index: 250; }

	html:not(.js) .oasis-primary-nav__panel { display: block; width: 100%; }
	html:not(.js) .oasis-primary-nav__menu { flex-direction: row; flex-wrap: wrap; gap: 0.1rem 1.1rem; }
	html:not(.js) .oasis-menu-item { border: 0; }
	html:not(.js) .oasis-menu-item__link {
		font-family: var(--oasis-font-body);
		font-size: 0.95rem;
		padding-block: 0.45rem;
	}
	html:not(.js) .oasis-sub-menu { padding-left: 0.75rem; }
	html:not(.js) .oasis-nav-panel-cta { display: none; }

	.oasis-primary-nav__menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.oasis-menu-item { border-bottom: 1px solid var(--oasis-rule-soft); }
	.oasis-menu-item--has-children { flex-wrap: wrap; justify-content: space-between; }
	.oasis-menu-item__link {
		font-family: var(--oasis-font-display);
		font-size: clamp(1.4rem, 5vw, 1.75rem);
		font-weight: 500;
		letter-spacing: -0.01em;
		color: var(--oasis-green-deep);
		padding-block: 0.75rem;
	}
	.oasis-menu-item__link::after { display: none; }
	.oasis-submenu-toggle { padding: 0.9rem; color: var(--oasis-green-deep); }
	.oasis-submenu-toggle__chevron { width: 0.5em; height: 0.5em; border-width: 2px; }

	.oasis-sub-menu {
		position: static;
		width: 100%;
		min-width: 0;
		box-shadow: none;
		border: none;
		background: transparent;
		padding: 0 0 0.85rem 0.1rem;
		animation: none;
	}
	.oasis-sub-menu[hidden] { display: none; }
	html:not(.js) .oasis-sub-menu[hidden] { display: grid; } /* no-JS: submenus stay open */
	.oasis-sub-menu .oasis-menu-item { border: none; }
	.oasis-sub-menu .oasis-menu-item__link {
		font-size: var(--oasis-fs-base);
		font-family: var(--oasis-font-body);
		color: var(--oasis-ink-soft);
		padding-block: 0.5rem;
	}

	/* The professional CTA is pinned at the foot of the open panel */
	.oasis-nav-panel-cta { margin-top: auto; padding-top: 2rem; display: grid; gap: 1.1rem; justify-items: start; }
	.oasis-nav-panel-cta .oasis-cta { width: 100%; }
	.oasis-nav-panel-cta .oasis-contact-details {
		font-size: var(--oasis-fs-sm);
		color: var(--oasis-sage);
		display: flex;
		gap: 1.25rem;
		flex-wrap: wrap;
	}
	.oasis-nav-panel-cta .oasis-contact-details a { color: var(--oasis-green-deep); }
	/* The two lines are <p>s, so the global `p + p { margin-top: 0.95em }`
	   applied to the telephone. Stacked that is right; here they are flex
	   items on one row and it dropped the number half a line below the
	   email, which read as a mistake rather than as a pair. */
	.oasis-nav-panel-cta .oasis-contact-details p { margin: 0; }
}

@media (min-width: 1250px) {
	.oasis-nav-panel-cta { display: none; }
}

/* The public email and telephone are the site's primary contact route and
   the thing somebody taps on a phone, but with no vertical padding they
   measured 19–20px in the header panel and the footer — under the WCAG
   2.2 target-size minimum. `inline-block` plus padding lifts the hit area
   clear of 24px without changing the type or the line spacing. Pages that
   set the contact details at display scale declare their own
   `padding-block` and are unaffected. */
.oasis-contact-details a {
	display: inline-block;
	padding-block: 0.3rem;
}

/* On a touch device the same links come out at 35–36px. That clears the
   WCAG 2.2 minimum of 24px, but it is still a small thing to hit with a
   thumb, and in the mobile nav panel these two are the only links that
   are not a full-width row. Padding is raised on coarse pointers only, so
   the height reaches the 44px comfort target on a phone and nothing at
   all changes for a mouse.

   Padding rather than an invisible pseudo-element overlay: a transparent
   pseudo with no background does not reliably generate a hit-test region
   in Chromium, so the "fix" could not be proven to work. This can be —
   the rendered height is measurable. Added 6 September 2026. */
@media (pointer: coarse) {
	.oasis-contact-details a { padding-block: 0.6rem; }
}

/* --------------------------------------------------------------------------
   10. Footer  (/DESIGN.md §10.4)
   -------------------------------------------------------------------------- */
.oasis-site-footer {
	background: var(--oasis-green-deep);
	background-image: var(--oasis-grain);
	background-blend-mode: soft-light;
	color: rgba(255, 255, 255, 0.86);
	--oasis-focus: #fff;
	padding-block: clamp(2.75rem, 6vw, 5rem) 2rem;
}
.oasis-site-footer a { color: #fff; text-decoration: none; }
.oasis-site-footer a:hover {
	text-decoration: underline;
	text-decoration-color: var(--oasis-green-light);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 0.2em;
}

.oasis-footer__top {
	display: grid;
	gap: clamp(2.25rem, 5vw, 4rem);
	grid-template-columns: 1fr;
	padding-bottom: clamp(2.25rem, 4vw, 3rem);
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
@media (min-width: 780px) {
	.oasis-footer__top { grid-template-columns: minmax(auto, 19rem) 1fr; }
}

.oasis-footer__brand-logo { width: 12.5rem; max-width: 62%; height: auto; margin-bottom: 1.35rem; }
.oasis-footer__tagline {
	font-family: var(--oasis-font-display);
	font-style: italic;
	font-size: var(--oasis-fs-lede);
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.92);
	max-width: 20ch;
}

.oasis-footer__navhead {
	font-size: var(--oasis-fs-xs);
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--oasis-green-light);
	margin-bottom: 0.9rem;
	padding-bottom: 0.7rem;
	border-bottom: 1px solid rgba(180, 236, 81, 0.22);
}
.oasis-footer__nav {
	display: grid;
	gap: clamp(2rem, 4vw, 2.75rem) clamp(1.75rem, 3.5vw, 3.25rem);
	grid-template-columns: 1fr;
}
@media (min-width: 560px) { .oasis-footer__nav { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .oasis-footer__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.oasis-footer-sitemap {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.15rem;
}
.oasis-footer-sitemap a {
	display: block;
	/* the padding is the touch target: 15px links set 10px apart were a
	   miss-tap on a phone and a squint on a desktop */
	padding-block: 0.42rem;
	font-size: var(--oasis-fs-sm);
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.82);
	transition: color var(--oasis-dur-micro) var(--oasis-ease-soft);
}
.oasis-footer-sitemap a:hover { color: #fff; }

.oasis-footer__bottom {
	display: grid;
	gap: 1.5rem 3rem;
	align-items: start;
	padding-top: clamp(2rem, 4vw, 2.75rem);
}
@media (min-width: 560px) and (max-width: 779px) {
	.oasis-footer__bottom { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 780px) {
	.oasis-footer__bottom { grid-template-columns: minmax(auto, 19rem) 1fr auto; }
}
.oasis-footer__contact .oasis-contact-details p { margin: 0.2rem 0; }
.oasis-footer__contact a { font-weight: 500; font-size: 1.02rem; }

.oasis-business-address { font-size: var(--oasis-fs-sm); color: rgba(255, 255, 255, 0.78); max-width: 26ch; }
.oasis-business-address__value { margin: 0; }
.oasis-business-address__label { display: block; font-style: italic; margin-top: 0.4rem; line-height: 1.45; }

.oasis-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.5rem;
	font-size: var(--oasis-fs-sm);
}
.oasis-footer__fineprint {
	margin-top: clamp(2rem, 4vw, 2.75rem);
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	display: grid;
	gap: 0.6rem;
}
.oasis-footer__meta,
.oasis-footer__disclosure {
	font-size: var(--oasis-fs-sm);
	color: rgba(255, 255, 255, 0.66);
	max-width: 68ch;
	line-height: 1.55;
}
.oasis-footer__disclosure { font-size: var(--oasis-fs-xs); letter-spacing: 0.01em; }

/* Developer credit. Separated from the home's own fineprint by a hairline,
   because it is a different kind of statement — a third-party credit, not
   something Oasis House is telling you about itself. White at 0.72 gives
   ~5:1 on the deep-green ground, and the padding lifts the link clear of
   the 24px target minimum. */
.oasis-footer__credit {
	margin-top: 0.5rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.oasis-footer__credit-link {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding-block: 0.3rem;
	font-size: var(--oasis-fs-xs);
	letter-spacing: 0.045em;
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
	transition: color var(--oasis-dur-micro) var(--oasis-ease-soft);
}
/* 1.7rem, not the 1.2rem this first shipped at. The mark is an OUTLINED
   letterform inside a solid hexagon; below about 24px the cream strokes
   fall under a pixel and the "S" closes up into a smear. 1.7rem is the
   smallest height at which it still reads as a letter. */
.oasis-footer__credit-link img {
	width: auto;
	height: 1.7rem;
	flex: none;
	display: block;
}
.oasis-footer__credit-link:hover,
.oasis-footer__credit-link:focus-visible { color: #fff; }

/* --------------------------------------------------------------------------
   11. Global compliance partials
   -------------------------------------------------------------------------- */
.oasis-ofsted-notice {
	background: var(--oasis-mint);
	border-radius: 0.5rem 0.5rem 0.5rem 1.75rem;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	position: relative;
}
.oasis-ofsted-notice::before {
	content: "";
	display: block;
	width: 3.5rem;
	height: 0.5rem;
	margin-bottom: 1rem;
	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='%23429321' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}
.oasis-ofsted-notice p {
	margin: 0;
	font-size: var(--oasis-fs-lede);
	line-height: 1.5;
	color: var(--oasis-ink);
	max-width: 54ch;
}

/* --------------------------------------------------------------------------
   12. Motion — reveal utility + reduced motion

   Fail-open: .oasis-reveal is VISIBLE by default. JavaScript adds the
   .is-pending class only to elements that are below the fold at load;
   the IntersectionObserver (and a 3s safety timeout) remove it. If JS,
   the observer, or a scroll never happens, content is still shown.
   -------------------------------------------------------------------------- */
/* --- the page entrance ---------------------------------------------------

   What is already on screen when the page loads rises into place, once,
   slowly. Same gesture as the scroll reveal so the page has one motion
   language rather than two.

   The opacity and the transform run at different rates on purpose. Chrome
   does not count an element as the LCP candidate while it is at opacity 0,
   so a 900ms fade would push the metric out by 900ms; here the fade is done
   at 45% and only the movement carries on. The reader sees a slow arrival;
   the browser sees the text at ~400ms.

   `both` fill so the element is not visible for a frame before the
   animation starts, and `will-change` is deliberately NOT set: this runs
   once, on load, and promoting a dozen layers during the busiest moment of
   the page's life costs more than it saves. */
@keyframes oasis-page-enter {
	from { opacity: 0; transform: translateY(var(--oasis-rise, 14px)); }
	45%  { opacity: 1; }
	to   { opacity: 1; transform: none; }
}
.js .oasis-reveal.is-entering {
	animation: oasis-page-enter var(--oasis-dur-enter, 900ms)
		var(--oasis-ease-out) both;
}
/* A gentle stagger down the first screen — enough to read as sequence,
   not enough to feel like a slideshow. Capped at six: past that the last
   item would be arriving nearly a second after the first. */
.js .oasis-reveal.is-entering[data-enter="1"] { animation-delay: 60ms; }
.js .oasis-reveal.is-entering[data-enter="2"] { animation-delay: 150ms; }
.js .oasis-reveal.is-entering[data-enter="3"] { animation-delay: 240ms; }
.js .oasis-reveal.is-entering[data-enter="4"] { animation-delay: 330ms; }
.js .oasis-reveal.is-entering[data-enter="5"] { animation-delay: 420ms; }
.js .oasis-reveal.is-entering[data-enter="6"] { animation-delay: 500ms; }

/* The bar fades rather than moves: a header that slides on every load draws
   attention to itself, and it is the one element the visitor did not come
   for. */
.js .oasis-site-header { animation: oasis-header-enter 700ms var(--oasis-ease-soft) both; }
@keyframes oasis-header-enter {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.js .oasis-reveal.is-entering,
	.js .oasis-site-header { animation: none; }
}

.js .oasis-reveal.is-pending {
	opacity: 0;
	transform: translateY(var(--oasis-rise));
}
.js .oasis-reveal {
	transition: opacity var(--oasis-dur-reveal) var(--oasis-ease-out),
		transform var(--oasis-dur-reveal) var(--oasis-ease-out);
}
.js .oasis-reveal.is-pending[data-reveal-stagger] > * {
	opacity: 0;
	transform: translateY(var(--oasis-rise));
}
.js .oasis-reveal[data-reveal-stagger] > * {
	transition: opacity var(--oasis-dur-reveal) var(--oasis-ease-out),
		transform var(--oasis-dur-reveal) var(--oasis-ease-out);
}
.js .oasis-reveal[data-reveal-stagger]:not(.is-pending) > *:nth-child(2) { transition-delay: var(--oasis-stagger); }
.js .oasis-reveal[data-reveal-stagger]:not(.is-pending) > *:nth-child(3) { transition-delay: calc(var(--oasis-stagger) * 2); }
.js .oasis-reveal[data-reveal-stagger]:not(.is-pending) > *:nth-child(4) { transition-delay: calc(var(--oasis-stagger) * 3); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.js .oasis-reveal.is-pending,
	.js .oasis-reveal.is-pending[data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }
}

/* Grain is atmosphere, not information — drop it when data is precious. */
@media (prefers-reduced-data: reduce) {
	:root { --oasis-grain: none; }
}

/* --------------------------------------------------------------------------
   13. Generic page template (not the homepage)
   -------------------------------------------------------------------------- */
.oasis-page {
	padding-top: clamp(2.5rem, 6vw, 4.5rem);
	padding-bottom: var(--oasis-section-gap);
}
.oasis-page__header { max-width: var(--oasis-w-text); margin-bottom: var(--oasis-heading-gap); }
.oasis-entry-content { max-width: var(--oasis-w-text); }
.oasis-entry-content > * + * { margin-top: 1em; }

.oasis-dev-flag {
	display: inline-block;
	background: #ffe08a;
	color: #4a3b00;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.15rem 0.5rem;
	border-radius: 4px;
	margin-bottom: 0.5rem;
}