/* ==========================================================================
   Who We Support — page stylesheet
   Loaded only on /who-we-support/ (inc/enqueue.php slug map).

   Composes with base.css and restates nothing from it. See /DESIGN.md
   §19.10 for the reasoning behind the decisions below.

   THE PAGE'S MOTIF IS THE PAIR. Two of things, meeting: three constants
   on one rule, two prose columns, two columns of matching criteria
   converging into one answer, two children in one house — and then, at
   the limits, a single column, because that is the one place on the page
   where there is only one honest answer and the paired structure should
   visibly stop.

   Sections
     1. Opening
     2. The whole child
     3. The needs, as run-in prose
     4. THE SIGNATURE MOMENT — matching, from both sides
     5. Two children, one home
     6. The limits
     7. Where this stands
     8. Next
     9. Narrow widths
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Opening. The headline runs wide and the two supporting voices sit
      beside each other underneath — the pair, stated before it is argued.
   -------------------------------------------------------------------------- */
.oasis-who-open {
	position: relative;
	overflow: clip;
}
.oasis-who-open::after {
	content: "";
	position: absolute;
	right: clamp(-9rem, -5vw, -3rem);
	top: clamp(6rem, 13vw, 10rem);
	width: clamp(22rem, 39vw, 35rem);
	aspect-ratio: 1.35;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 410'%3E%3Cpath d='M18 328C102 194 196 133 282 205' fill='none' stroke='%23429321' stroke-width='2'/%3E%3Cpath d='M542 92C450 205 365 257 282 205' fill='none' stroke='%23245c2c' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
	opacity: 0.1;
	pointer-events: none;
}
.oasis-who-open__inner {
	position: relative;
	z-index: 1;
	max-width: var(--oasis-w-wide);
}
.oasis-who-open h1 {
	margin-top: 0.4rem;
	max-width: 19ch;
	text-wrap: balance;
}
.oasis-who-open__body { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }
.oasis-who-open__lede {
	margin: 0;
	font-family: var(--oasis-font-display);
	font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.85rem);
	line-height: 1.4;
	letter-spacing: -0.012em;
	color: var(--oasis-green-deep);
	max-width: 22ch;
}
.oasis-who-open__para {
	margin-top: 1.15rem;
	color: var(--oasis-ink-soft);
	max-width: 52ch;
}
@media (min-width: 900px) {
	.oasis-who-open__body {
		display: grid;
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		column-gap: clamp(2.5rem, 6vw, 5.5rem);
		align-items: start;
	}
	.oasis-who-open__para { margin-top: 0.35rem; }
}

/* The three constants a placement officer needs in the first screen.
   NOT statistic cards and NOT counters: three short lines hung on one
   hairline, at reading scale, in the display face. They are facts about
   the home, not achievements to be celebrated at 5rem. */
.oasis-who-facts {
	list-style: none;
	margin: clamp(2.25rem, 4.5vw, 3.5rem) 0 0;
	padding: 0.95rem 0 0;
	max-width: none;
	border-top: 1px solid var(--oasis-rule);
	/* equal thirds rather than a left-clustered flex row: three facts hung
	   at measured intervals on one rule reads as a masthead, three facts
	   bunched under the left end of a 1200px rule reads as leftovers */
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	font-family: var(--oasis-font-display);
	font-size: clamp(1.02rem, 0.97rem + 0.24vw, 1.18rem);
	color: var(--oasis-green-deep);
}
.oasis-who-facts li + li {
	padding-left: clamp(1rem, 2.5vw, 2rem);
	border-left: 1px solid var(--oasis-rule);
}

/* --------------------------------------------------------------------------
   2. The whole child. One long sentence at scale, with the fragments
      italicised — the shape of the section is the sentence itself, so
      nothing else in it competes.
   -------------------------------------------------------------------------- */
.oasis-who-whole__inner { max-width: var(--oasis-w-wide); }
.oasis-who-whole h2 { margin-top: 0.35rem; max-width: 20ch; text-wrap: balance; }
.oasis-who-whole__statement {
	margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
	font-family: var(--oasis-font-display);
	font-size: clamp(1.36rem, 1.02rem + 1.55vw, 2.35rem);
	line-height: 1.32;
	letter-spacing: -0.014em;
	color: var(--oasis-ink);
	max-width: 34ch;
}
.oasis-who-whole__statement em {
	font-style: italic;
	font-synthesis: none;
	color: var(--oasis-green-deep);
}
.oasis-who-whole__after { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
.oasis-who-whole__after p { color: var(--oasis-ink-soft); max-width: 48ch; }
@media (min-width: 1000px) {
	/* the sentence holds the left; its two footnotes answer on the right,
	   which is also what stops a 34ch display line leaving half the band
	   empty */
	.oasis-who-whole__inner {
		display: grid;
		grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
		column-gap: clamp(2.5rem, 6vw, 5.5rem);
	}
	.oasis-who-whole > .oasis-container > .oasis-who-whole__inner > .oasis-eyebrow,
	.oasis-who-whole__inner > h2 { grid-column: 1 / -1; }
	.oasis-who-whole__inner > .oasis-eyebrow { grid-column: 1 / -1; }
	.oasis-who-whole__statement { grid-column: 1; margin-top: clamp(2rem, 4vw, 3rem); }
	.oasis-who-whole__after {
		grid-column: 2;
		margin-top: clamp(2.35rem, 4.4vw, 3.4rem);
		padding-left: clamp(1.5rem, 3vw, 2.5rem);
		border-left: 1px solid var(--oasis-rule);
		align-self: start;
	}
}

/* --------------------------------------------------------------------------
   3. The needs. RUN-IN PROSE, not cards.

      This is a deliberate content decision expressed in CSS. A term set
      alone in a box reads as a category a child is filed under; the same
      term leading a sentence reads as a description of what a child may
      need. Six rounded rectangles would have been faster and would have
      quietly undone the argument the page is making, so the terms run
      into their own sentences and the rules between them are hairlines,
      not borders around anything.
   -------------------------------------------------------------------------- */
/* The two sections that make an argument — the needs and the matching —
   share one head: the heading holds the left, its lede answers on the
   right. Used twice and nowhere else, so it reads as a pairing rather
   than as a template applied to every band on the page. */
.oasis-who-head { max-width: var(--oasis-w-wide); }
.oasis-who-head h2 { margin-top: 0.35rem; max-width: 20ch; text-wrap: balance; }
.oasis-who-head .oasis-lede { margin-top: 1.1rem; }
@media (min-width: 960px) {
	.oasis-who-head {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: clamp(2rem, 5vw, 4.5rem);
		align-items: end;
	}
	.oasis-who-head > .oasis-eyebrow { grid-column: 1 / -1; }
	.oasis-who-head .oasis-lede { margin-top: 0; padding-bottom: 0.35rem; }
}

.oasis-who-needs__run {
	margin-top: clamp(2.25rem, 4.5vw, 3.5rem);
	max-width: var(--oasis-w-wide);
}
.oasis-who-need {
	position: relative;
	margin: 0;
	max-width: 66ch;
	padding: 1.25rem 0 0 clamp(1rem, 1.7vw, 1.35rem);
	border-top: 1px solid var(--oasis-rule-soft);
	color: var(--oasis-ink-soft);
	line-height: 1.66;
	break-inside: avoid;
}
.oasis-who-need::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.82rem;
	width: 0.55rem;
	height: 2px;
	border-radius: 999px;
	background: var(--oasis-green-leaf);
	opacity: 0.65;
}
.oasis-who-need + .oasis-who-need { margin-top: 1.35rem; }
.oasis-who-need__term {
	font-family: var(--oasis-font-display);
	font-size: 1.14em;
	line-height: 1.3;
	color: var(--oasis-green-deep);
}
/* the em dash carries the run-in; it is not punctuation the reader has to
   parse, so it sits at rule weight rather than at text weight */
.oasis-who-need__sep { color: var(--oasis-sage); padding: 0 0.15em; }

@media (min-width: 1080px) {
	/* Two columns, so a professional scans it the way they would scan a
	   reference entry. Five items across two columns is 3 + 2, which is
	   also a quiet reminder that the set is a description and not a grid
	   that was designed to come out even. */
	.oasis-who-needs__run {
		columns: 2;
		column-gap: clamp(2.5rem, 5vw, 4.5rem);
	}
	.oasis-who-need + .oasis-who-need { margin-top: 0; }
	.oasis-who-need { margin-bottom: 1.6rem; }
}

/* The softened treatment of the presenting-needs list — an inset panel,
   not a warning. Sand rule above, held corner, paper ground on shell. */
.oasis-who-reserve {
	margin: clamp(2.5rem, 5vw, 4rem) 0 0;
	max-width: none;
	padding: clamp(1.6rem, 3.5vw, 2.5rem);
	background: rgba(251, 249, 244, 0.82);
	border-top: 3px solid var(--oasis-sand);
	border-radius: 0 0 0 1.8rem;
}
.oasis-who-reserve h3 {
	margin: 0;
	font-size: clamp(1.18rem, 1.05rem + 0.55vw, 1.5rem);
	line-height: 1.3;
	color: var(--oasis-green-deep);
	max-width: 24ch;
}
.oasis-who-reserve p {
	margin-top: 1rem;
	color: var(--oasis-ink-soft);
	font-size: var(--oasis-fs-sm);
	line-height: 1.66;
}
.oasis-who-reserve__close { color: var(--oasis-ink) !important; }
@media (min-width: 900px) {
	.oasis-who-reserve {
		display: grid;
		grid-template-columns: minmax(13rem, 0.7fr) minmax(0, 1.3fr);
		column-gap: clamp(2.5rem, 6vw, 5rem);
		align-items: start;
	}
	.oasis-who-reserve h3 { grid-row: 1 / span 3; }
	.oasis-who-reserve p { grid-column: 2; margin-top: 0; }
	.oasis-who-reserve p + p { margin-top: 1rem; }
}

/* --------------------------------------------------------------------------
   4. THE SIGNATURE MOMENT — matching, asked from both sides.

      Two columns of criteria, then a bracket: two stems curving into one
      line, a single stem down from its centre, a node, and one sentence.
      Two questions resolving into one answer, drawn rather than
      described.

      What it deliberately is not: a Venn diagram, a compatibility score,
      a percentage, a dashboard, a pass/fail interface, a quiz. Every one
      of those says "assessment bureaucracy" about a judgement that two
      professionals make together about one child.

      It is pure CSS borders and radii — no SVG, no clip-path, nothing
      that can overflow — and at narrow widths the bracket straightens
      into a single vertical stem, which means the same thing.
   -------------------------------------------------------------------------- */
.oasis-who-matching {
	position: relative;
	overflow: clip;
}
.oasis-who-matching__head,
.oasis-who-matching .oasis-match,
.oasis-who-matching__note { position: relative; z-index: 1; }
.oasis-who-matching__head h2 { max-width: 18ch; }
@media (min-width: 860px) {
	.oasis-who-matching {
		background: linear-gradient(90deg, var(--oasis-paper) 0%, var(--oasis-paper) 50%, #f3f6ec 50%, #f3f6ec 100%);
	}
}

.oasis-match {
	--oasis-stem: clamp(1.4rem, 3vw, 2.15rem);
	/* the signature graphic gets its own line colour: the same leaf as the
	   node it arrives at, so the whole figure reads as one mark rather than
	   as a grey rule with a green dot stuck on the end */
	--oasis-match-line: rgba(66, 147, 33, 0.58);
	margin-top: clamp(2.5rem, 5vw, 4rem);
	max-width: var(--oasis-w-wide);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: 0;
}
.oasis-match__side + .oasis-match__side { margin-top: clamp(2rem, 4vw, 2.75rem); }
.oasis-match__title {
	margin: 0 0 1.3rem;
	font-size: clamp(1.7rem, 1.35rem + 1.25vw, 2.4rem);
	line-height: 1.08;
	letter-spacing: -0.018em;
	color: var(--oasis-green-deep);
}
.oasis-match__pre {
	display: block;
	margin-bottom: 0.35rem;
	font-family: var(--oasis-font-body);
	font-size: 0.7rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--oasis-ink-soft);
}
.oasis-match__list { list-style: none; margin: 0; padding: 0; }
.oasis-match__list li {
	padding: 0.9rem 0;
	border-top: 1px solid var(--oasis-rule-soft);
	color: var(--oasis-ink-soft);
	font-size: var(--oasis-fs-sm);
	line-height: 1.6;
}
.oasis-match__list li:last-child { padding-bottom: 0; }

.oasis-match__bracket {
	position: relative;
	height: clamp(1.75rem, 3.5vw, 3rem);
	border: 0 solid var(--oasis-match-line);
	border-width: 0 0 0 1px;
	width: 1px;
	margin: clamp(0.5rem, 1.5vw, 1rem) auto 0;
	/* the arms emerge rather than starting on a hard edge — the lines look
	   like they come out of the columns above them instead of being drawn
	   underneath. no-repeat is not optional: the default tiles the gradient
	   and would fade anything else painted by this element. */
	-webkit-mask: linear-gradient(to bottom, transparent 0%, #000 42%) no-repeat 0 0 / 100% 100%;
	mask: linear-gradient(to bottom, transparent 0%, #000 42%) no-repeat 0 0 / 100% 100%;
}
.oasis-match__answer {
	position: relative;
	margin: calc(var(--oasis-stem) + 1.5rem) auto 0;
	max-width: 22ch;
	text-align: center;
	font-family: var(--oasis-font-display);
	font-size: clamp(1.45rem, 1.04rem + 1.7vw, 2.55rem);
	line-height: 1.34;
	letter-spacing: -0.012em;
	color: var(--oasis-green-deep);
	text-wrap: balance;
}
.oasis-match__answer em {
	font-style: italic;
	font-synthesis: none;
}
/* the stem down from the bracket */
.oasis-match__answer::before {
	content: "";
	position: absolute;
	left: 50%;
	top: calc(-1 * (var(--oasis-stem) + 1.5rem));
	width: 1px;
	height: var(--oasis-stem);
	background: var(--oasis-match-line);
}
/* the node the two sides arrive at */
.oasis-match__answer::after {
	content: "";
	position: absolute;
	left: 50%;
	top: -1.5rem;
	width: 0.5rem;
	height: 0.5rem;
	margin: -0.25rem 0 0 -0.25rem;
	border-radius: 50%;
	background: var(--oasis-green-leaf);
	box-shadow: 0 0 0 0.42rem rgba(66, 147, 33, 0.12);
}

@media (min-width: 860px) {
	.oasis-match {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: clamp(2.5rem, 6vw, 6rem);
	}
	.oasis-match__side + .oasis-match__side { margin-top: 0; }
	.oasis-match__bracket,
	.oasis-match__answer { grid-column: 1 / -1; }
	/* the bracket opens: two arms at the outer edge of each column, curving
	   into one line beneath them */
	.oasis-match__bracket {
		/* auto inline margins disable a grid item's stretch, so the narrow
		   rule's centring has to be cleared before the bracket can open
		   across both columns */
		margin-inline: 0;
		width: auto;
		border-width: 0 1px 1px 1px;
		/* the arms have to be tall enough to read as two stems descending
		   from the two columns; at 48px against 1100px of width the same
		   shape reads as an underline with turned-up ends */
		height: clamp(3.5rem, 7vw, 6rem);
		border-radius: 0 0 clamp(2.5rem, 7vw, 5.5rem) clamp(2.5rem, 7vw, 5.5rem);
		margin-top: clamp(1.75rem, 3vw, 2.5rem);
	}
}

/* Once the two sides have resolved, the section stays on the single axis
   they resolved onto — so the closing note is centred as a block rather
   than returning to the left margin the columns started from. */
.oasis-who-matching__note {
	margin: clamp(2.5rem, 5vw, 4rem) auto 0;
	padding-top: clamp(1.5rem, 3vw, 2rem);
	border-top: 1px solid var(--oasis-rule);
	max-width: 58ch;
	color: var(--oasis-ink-soft);
	font-size: var(--oasis-fs-sm);
	line-height: 1.66;
}

/* Motion (brief B17): the two sides settle toward each other and the
   bracket draws down after them. It is 14px and one scale, and it is here
   because it makes the idea legible — two things resolving into one —
   not because a page needs movement. Off entirely under reduced motion,
   and off at narrow widths where the sides are stacked and "toward each
   other" would mean nothing. */
@media (min-width: 860px) {
	.js .oasis-match__side {
		transition: transform var(--oasis-dur-image) var(--oasis-ease-out);
	}
	.js .oasis-match.is-pending .oasis-match__side--child { transform: translateX(-14px); }
	.js .oasis-match.is-pending .oasis-match__side--home { transform: translateX(14px); }
}
.js .oasis-match__bracket {
	transform-origin: top center;
	transition: opacity var(--oasis-dur-reveal) 220ms var(--oasis-ease-out),
		transform var(--oasis-dur-image) 220ms var(--oasis-ease-out);
}
.js .oasis-match.is-pending .oasis-match__bracket {
	opacity: 0;
	transform: scaleY(0.35);
}
@media (prefers-reduced-motion: reduce) {
	.js .oasis-match__side,
	.js .oasis-match__bracket { transition: none; }
	.js .oasis-match.is-pending .oasis-match__side--child,
	.js .oasis-match.is-pending .oasis-match__side--home,
	.js .oasis-match.is-pending .oasis-match__bracket { transform: none; }
}

/* --------------------------------------------------------------------------
   5. Two children, one home. The heading holds the left margin and the
      argument runs beside it — a different two-column relationship from
      the one above, so the pair motif does not become a single layout
      used four times.
   -------------------------------------------------------------------------- */
.oasis-who-pair__inner { max-width: var(--oasis-w-wide); }
.oasis-who-pair h2 { margin-top: 0.35rem; max-width: 15ch; text-wrap: balance; }
.oasis-who-pair__body { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.oasis-who-pair__body p { color: var(--oasis-ink-soft); max-width: 56ch; }
.oasis-who-pair__body p:first-child {
	padding-left: clamp(1.15rem, 2.5vw, 1.75rem);
	border-left: 2px solid var(--oasis-green-leaf);
	font-family: var(--oasis-font-display);
	font-size: clamp(1.18rem, 1.04rem + 0.58vw, 1.48rem);
	line-height: 1.48;
	color: var(--oasis-green-deep);
}
@media (min-width: 960px) {
	.oasis-who-pair__inner {
		display: grid;
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
		column-gap: clamp(2.5rem, 6vw, 5.5rem);
		align-items: start;
	}
	.oasis-who-pair__body { margin-top: 0.5rem; }
}

/* --------------------------------------------------------------------------
   6. The limits. ONE column, on purpose — see the file header. Plain
      hairlines, no icon, no cross, no red, no alert styling. The tone of
      this section is the whole argument of it.
   -------------------------------------------------------------------------- */
.oasis-who-limits__inner { max-width: 62rem; }
.oasis-who-limits h2 { margin-top: 0.35rem; max-width: 24ch; text-wrap: balance; }
.oasis-who-limits__statement {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	font-family: var(--oasis-font-display);
	font-size: clamp(1.24rem, 1.04rem + 0.9vw, 1.72rem);
	line-height: 1.42;
	letter-spacing: -0.012em;
	color: var(--oasis-green-deep);
	max-width: 46ch;
}
.oasis-who-limits__intro {
	margin-top: 1.35rem;
	color: var(--oasis-ink-soft);
	max-width: 54ch;
}
.oasis-who-limits__list {
	list-style: none;
	margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0;
	padding: 0;
}
.oasis-who-limits__list li {
	padding: 1.05rem 0;
	border-top: 1px solid var(--oasis-rule-soft);
	color: var(--oasis-ink-soft);
	line-height: 1.6;
}
.oasis-who-limits__list li:last-child { border-bottom: 1px solid var(--oasis-rule-soft); }
.oasis-who-limits__close {
	margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
	font-family: var(--oasis-font-display);
	font-size: clamp(1.14rem, 1.02rem + 0.5vw, 1.4rem);
	line-height: 1.46;
	color: var(--oasis-ink);
	max-width: 44ch;
}

/* The vacancy/placement sentence. Set one step larger than the close
   above it and in deep green, because it is the claim a placement team
   will actually remember from this page — but still as type on the
   page's own surface, with no box, rule, icon or callout treatment. */
.oasis-who-limits__vacancy {
	margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
	font-family: var(--oasis-font-display);
	font-size: clamp(1.26rem, 1.04rem + 0.95vw, 1.78rem);
	line-height: 1.4;
	letter-spacing: -0.013em;
	color: var(--oasis-green-deep);
	max-width: 40ch;
}

/* --------------------------------------------------------------------------
   7. Where this stands. The approved wording, once, from its partial —
      here as a paper notice on the mint band, because on the page a
      commissioner reads it should look like a formal statement rather
      than like more prose. (About sets the same partial as display type;
      this is deliberately a different treatment of the same sentence.)
   -------------------------------------------------------------------------- */
.oasis-who-now__inner { max-width: 56rem; }
.oasis-who-now h2 { margin-top: 0.35rem; max-width: 18ch; }
.oasis-who-now .oasis-ofsted-notice {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--oasis-paper);
}
.oasis-who-now .oasis-ofsted-notice p { font-size: clamp(1.1rem, 1rem + 0.45vw, 1.3rem); }
.oasis-who-now__para {
	margin-top: clamp(1.5rem, 3vw, 2rem);
	color: var(--oasis-ink-soft);
	max-width: 56ch;
}
.oasis-who-now__note {
	margin-top: 1.25rem;
	padding-left: clamp(1rem, 2vw, 1.5rem);
	border-left: 2px solid var(--oasis-green-leaf);
	font-size: var(--oasis-fs-sm);
	line-height: 1.58;
	color: var(--oasis-ink);
	max-width: 48ch;
}
.oasis-who-now .oasis-cta { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }

/* --------------------------------------------------------------------------
   8. Next. Two routes side by side — the pair one last time — rather than
      the stacked column Our Approach closes with.
   -------------------------------------------------------------------------- */
.oasis-who-next__inner { max-width: var(--oasis-w-wide); }
.oasis-who-next h2 { margin-top: 0.35rem; max-width: 16ch; }
.oasis-who-next__routes {
	margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
}
.oasis-who-next__routes a {
	display: block;
	padding: clamp(1.25rem, 2.5vw, 1.75rem) 0;
	border-top: 1px solid var(--oasis-rule);
	text-decoration: none;
	color: inherit;
}
.oasis-who-next__routes a:last-child { border-bottom: 1px solid var(--oasis-rule); }
.oasis-who-next__label {
	display: block;
	font-family: var(--oasis-font-display);
	font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.15rem);
	line-height: 1.16;
	letter-spacing: -0.018em;
	color: var(--oasis-green-deep);
	transition: color var(--oasis-dur-short) var(--oasis-ease-soft);
}
.oasis-who-next__desc {
	display: block;
	margin-top: 0.5rem;
	max-width: 42ch;
	font-size: var(--oasis-fs-sm);
	line-height: 1.55;
	color: var(--oasis-ink-soft);
}
.oasis-who-next__routes a .oasis-arc-arrow {
	display: block;
	width: 1.75rem;
	height: auto;
	margin-top: 1rem;
	color: var(--oasis-green-deep);
	transition: transform var(--oasis-dur-short) var(--oasis-ease-out);
}
@media (hover: hover) {
	.oasis-who-next__routes a:hover .oasis-who-next__label { color: var(--oasis-green-deep-hover); }
	.oasis-who-next__routes a:hover .oasis-arc-arrow { transform: translateX(6px); }
}
.oasis-who-next__routes a:focus-visible {
	outline: 3px solid var(--oasis-focus);
	outline-offset: 4px;
}
@media (min-width: 860px) {
	.oasis-who-next__routes {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: clamp(2.5rem, 6vw, 5.5rem);
	}
	.oasis-who-next__routes a:last-child { border-bottom: 0; }
}

/* --------------------------------------------------------------------------
   9. Narrow widths. Measures that were set to hold a column open have to
      be released once there is only one column, or a phone gets a page of
      short lines with a ragged right edge.
   -------------------------------------------------------------------------- */
@media (max-width: 859px) {
	.oasis-who-open::after { right: -10rem; top: 6rem; width: 25rem; opacity: 0.075; }
	.oasis-who-open__lede,
	.oasis-who-open__para,
	.oasis-who-whole__statement,
	.oasis-who-whole__after p,
	.oasis-who-pair__body p,
	.oasis-who-limits__statement,
	.oasis-who-limits__intro,
	.oasis-who-limits__list li,
	.oasis-who-limits__close,
	.oasis-who-matching__note,
	.oasis-who-now__para,
	.oasis-match__answer { max-width: none; }
	.oasis-match__answer {
		text-align: left;
		margin-top: calc(var(--oasis-stem) + 1.15rem);
	}
	/* STACKED, "toward each other" has no meaning — so the bracket
	   straightens into one stem running down from the second side to the
	   node and the answer, which says the same thing in a column.

	   REBUILT 6 September 2026. The idea was right; the execution read as
	   a stray mark on a real handset. Three things were wrong:

	     1. The stem kept the desktop mask, which fades its top 42% away.
	        At 40px tall that leaves about 23 visible pixels — a fragment
	        hanging in the margin rather than a line coming down from the
	        column above it.
	     2. The node sat at `left: 0` with a -0.25rem margin, so half the
	        dot hung into the container's gutter, outside the text column
	        every other element on the page aligns to.
	     3. Stem and node together read as debris left over from a desktop
	        drawing, not as a connector — which is worse than having no
	        drawing at all, because a reader stops to work out what broke.

	   Now: the whole figure is inset into its own narrow gutter, so the
	   stem has somewhere to live and the node is centred ON the stem and
	   fully inside the column. The line is unbroken from the last list
	   item to the node, at full strength. The answer keeps its left
	   alignment — a centred display sentence in a stacked column would
	   pull against every other block on the page. */
	.oasis-match__answer {
		padding-left: var(--oasis-match-gutter);
	}
	.oasis-match__answer::before {
		left: var(--oasis-match-stem-x);
		top: calc(-1 * (var(--oasis-stem) + 1.15rem));
	}
	.oasis-match__answer::after {
		left: var(--oasis-match-stem-x);
		top: -1.15rem;
	}
	.oasis-match__bracket {
		--oasis-match-gutter: 1.35rem;
		/* the stem sits in the middle of that gutter, so the node centred
		   on it clears the column edge by its own radius */
		--oasis-match-stem-x: 0.42rem;
		margin-left: var(--oasis-match-stem-x);
		height: clamp(2.5rem, 8vw, 3.25rem);
		/* no fade: at this length the mask leaves a fragment, not a line */
		-webkit-mask: none;
		mask: none;
	}
	.oasis-match {
		--oasis-match-gutter: 1.35rem;
		--oasis-match-stem-x: 0.42rem;
	}
	.oasis-who-facts {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0;
	}
	.oasis-who-facts li { padding: 0.65rem 0; }
	.oasis-who-facts li + li {
		/* the vertical divider between thirds becomes a horizontal one
		   between rows; the desktop indent has to be cleared with it */
		padding-left: 0;
		border-left: 0;
		border-top: 1px solid var(--oasis-rule-soft);
	}
	.oasis-who-facts li:nth-child(2) {
		padding-left: clamp(0.9rem, 4vw, 1.4rem);
		border-left: 1px solid var(--oasis-rule-soft);
		border-top: 0;
	}
	.oasis-who-facts li:nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
	.oasis-who-need__term { display: block; margin-bottom: 0.3rem; }
	.oasis-who-need__sep { display: none; }
	.oasis-who-reserve {
		padding: clamp(1.25rem, 5vw, 1.75rem);
		margin-left: calc(-1 * clamp(0.5rem, 2vw, 1rem));
		margin-right: calc(-1 * clamp(0.5rem, 2vw, 1rem));
	}
}