/* ==========================================================================
   Oasis House — About Oasis House
   Loaded only on that page. Composes with base.css; restates nothing from it.

   The page is deliberately a different animal to the homepage. The homepage
   opens on film and argues emotionally, because it has to earn the next
   scroll. About opens on paper and argues in prose, because a reader who
   got here has already decided to read. Its rhythm is therefore quieter and
   its measures are longer — and it spends its one cinematic moment in a
   single place, the festoon-lights band at the ethos statement.

   Section spec: docs/CONTENT_MATRIX.md §2.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Opening — a masthead, not a hero.

   No media, no CTA, no scrim. The h1 takes the display size the homepage
   gives its hero, but on paper, so the page starts calm and confident
   rather than loud.
   -------------------------------------------------------------------------- */
.oasis-about-open {
	overflow: clip;
	padding-block: clamp(4rem, 8.5vw, 7.75rem) clamp(3.5rem, 7vw, 5.75rem);
}
.oasis-about-open::after {
	content: "";
	position: absolute;
	right: max(-8rem, calc((100vw - var(--oasis-w-wide)) / 2 - 11rem));
	top: clamp(4rem, 8vw, 7rem);
	width: clamp(18rem, 33vw, 34rem);
	height: clamp(5rem, 10vw, 8rem);
	background: no-repeat center / contain
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='150' viewBox='0 0 620 150'%3E%3Cpath d='M6 134C118 14 248 6 338 62s174 64 276-48' fill='none' stroke='%23429321' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	opacity: 0.09;
	pointer-events: none;
}
.oasis-about-open__inner { position: relative; z-index: 1; max-width: var(--oasis-w-wide); }
/* A masthead: the title runs across the top and the text sets beneath it in
   two columns, the way a magazine opens a feature. The homepage's own
   openings are all left-heading / right-body splits, so About gets a shape
   the homepage never uses — and the width is spent on the title, which is
   the one line that has to land. */
.oasis-about-open__head h1 {
	margin-top: 0.4rem;
	max-width: 12ch;
	text-wrap: balance;
}
.oasis-about-open__thesis {
	margin-top: 1.25rem;
	max-width: 25ch;
	padding-left: 1rem;
	border-left: 2px solid rgba(66, 147, 33, 0.42);
	font-family: var(--oasis-font-display);
	font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
	font-style: italic;
	line-height: 1.45;
	color: var(--oasis-green-deep);
}
@media (min-width: 760px) {
	.oasis-about-open__head {
		display: grid;
		grid-template-columns: minmax(0, 1.45fr) minmax(13rem, 0.55fr);
		column-gap: clamp(2rem, 5vw, 5.5rem);
		align-items: end;
	}
	.oasis-about-open__head .oasis-eyebrow { grid-column: 1 / -1; }
	.oasis-about-open__head h1 { grid-column: 1; }
	.oasis-about-open__thesis {
		grid-column: 2;
		margin: 0 0 0.65rem;
	}
	.oasis-about-open__body {
		display: grid;
		/* not two equal halves: the display lede leads and the body column
		   answers it, which is the same relationship the type sizes already
		   have. Equal columns made them argue. */
		grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
		gap: clamp(1.75rem, 4vw, 4rem);
		align-items: start;
		margin-top: clamp(2.75rem, 5vw, 4rem);
		padding-top: clamp(2rem, 3.4vw, 2.75rem);
		border-top: 1px solid var(--oasis-rule);
	}
	.oasis-about-open__para { margin-top: 0; }
}
@media (min-width: 1100px) {
	.oasis-about-open__head h1 { font-size: clamp(3.25rem, 1.6rem + 4.65vw, 4.85rem); }
}
.oasis-about-open__lede {
	font-family: var(--oasis-font-display);
	font-size: clamp(1.3rem, 1.08rem + 0.85vw, 1.66rem);
	line-height: 1.44;
	color: var(--oasis-ink);
	max-width: 33ch;
}
.oasis-about-open__para {
	margin-top: 1.15rem;
	color: var(--oasis-ink-soft);
	max-width: 42ch;
}

/* --------------------------------------------------------------------------
   2. What it is — the garden held against the argument.

   The picture leads on the left, which is the reverse of the homepage's
   photo essay: there the type opens and the photographs answer. Here the
   photograph is the evidence for the sentence beside it, so it goes first.
   -------------------------------------------------------------------------- */
.oasis-about-what__figure { grid-column: 1 / -1; }
.oasis-about-what__text { grid-column: 1 / -1; }
@media (min-width: 900px) {
	.oasis-about-what .oasis-bed { align-items: center; }
	.oasis-about-what__figure { grid-column: 1 / span 7; }
	.oasis-about-what__text { grid-column: 9 / span 4; padding-top: 1rem; }
}
.oasis-about-what__figure .oasis-figure__frame img {
	aspect-ratio: 5 / 6;
	object-position: 50% 58%;
}
/* The caption is an annotation, not a credit line: it sits in the margin
   at the foot of the frame rather than centred under it. */
@media (min-width: 900px) {
	.oasis-about-what__figure figcaption {
		max-width: 26ch;
		padding-left: clamp(1rem, 2vw, 1.5rem);
		border-left: 2px solid rgba(66, 147, 33, 0.3);
		margin-top: 1.1rem;
	}
}
.oasis-about-what__text h2 {
	margin-top: 0.35rem;
	max-width: 14ch;
	text-wrap: balance;
}
.oasis-about-what__text p {
	margin-top: 1.15rem;
	color: var(--oasis-ink-soft);
	max-width: 46ch;
}
.oasis-about-what__text .oasis-arrowlink { margin-top: 1.75rem; }

/* --------------------------------------------------------------------------
   3. Why two — the page's argument, opened by a drop-word.

   "Two." is set at display scale and runs INTO the sentence rather than
   sitting above it as a statistic. That is the distinction that keeps this
   from being a counter: the number is the first word of the argument, not a
   figure decorating it. It is duplicated for screen readers as ordinary
   text so the sentence still parses when it is spoken.
   -------------------------------------------------------------------------- */
.oasis-about-two__inner { max-width: var(--oasis-w-wide); }
.oasis-about-two__statement {
	position: relative;
	margin-top: 1.25rem;
	font-family: var(--oasis-font-display);
	font-size: clamp(1.4rem, 1.08rem + 1.25vw, 2rem);
	line-height: 1.42;
	letter-spacing: -0.008em;
	color: var(--oasis-ink);
	text-wrap: pretty;
}
.oasis-about-two__drop {
	display: block;
	margin: 0 0 0.38em;
	font-size: clamp(4rem, 2.2rem + 7vw, 8.6rem);
	font-weight: 500;
	line-height: 0.78;
	letter-spacing: -0.045em;
	color: var(--oasis-green-deep);
}
.oasis-about-two__argument { display: block; max-width: 38ch; }
@media (min-width: 900px) {
	.oasis-about-two__statement {
		display: grid;
		grid-template-columns: minmax(15rem, 0.75fr) minmax(0, 1.25fr);
		column-gap: clamp(2.5rem, 7vw, 7rem);
		align-items: end;
	}
	.oasis-about-two__drop { margin: 0; }
	.oasis-about-two__argument {
		padding: 0 0 0.35rem clamp(1.5rem, 3vw, 2.5rem);
		border-left: 1px solid var(--oasis-rule-strong);
	}
}

/* Run-in headings, not a list. These are three further sentences of the
   same argument, so they are set as three paragraphs whose first phrase
   happens to be in the display face - the oldest editorial device there is
   for "here is the next point" without building a table. The six values
   further down ARE a glossary and get the ruled two-column treatment; using
   it here as well would make the page look like one component repeated. */
.oasis-about-reasons {
	list-style: none;
	margin: clamp(3rem, 6vw, 5rem) 0 0;
	padding: 0;
	display: grid;
	gap: clamp(1.75rem, 3.2vw, 2.5rem);
}
.oasis-about-reasons li {
	padding-top: clamp(1rem, 2vw, 1.4rem);
	border-top: 2px solid rgba(66, 147, 33, 0.3);
}
@media (min-width: 900px) {
	.oasis-about-reasons {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(0, 1.15fr);
		gap: clamp(2rem, 4.2vw, 4rem);
		align-items: start;
	}
	.oasis-about-reasons li:nth-child(2) { margin-top: clamp(2.5rem, 4vw, 4rem); }
	.oasis-about-reasons li:nth-child(3) { margin-top: clamp(0.8rem, 2vw, 1.75rem); }
}
/* The point, at a glance ... */
.oasis-about-reasons__because {
	margin: 0;
	font-family: var(--oasis-font-display);
	font-weight: 500;
	font-size: clamp(1.16rem, 1.02rem + 0.5vw, 1.42rem);
	line-height: 1.24;
	letter-spacing: -0.012em;
	color: var(--oasis-green-deep);
	text-wrap: balance;
}
/* ... and the working out, for the slower read. */
.oasis-about-reasons__text {
	margin: 0.45rem 0 0;
	color: var(--oasis-ink-soft);
	font-size: clamp(1rem, 0.96rem + 0.16vw, 1.09rem);
	line-height: 1.6;
}


/* --------------------------------------------------------------------------
   4. The ethos band — the About page's own moment.

   The home's festoon lights become a dark, edge-to-edge evening field.
   The ethos is set into that atmosphere, with the explanatory gloss held
   quieter beside it. One breath, in one place, rooted in a real detail of
   the house rather than in a generic brand treatment.

   The image is decorative (empty alt, aria-hidden) — it carries mood, not
   information, and the overlaid statement says everything it means.
   -------------------------------------------------------------------------- */
.oasis-section--flush { position: relative; }
.oasis-about-ethos {
	overflow: clip;
	background: var(--oasis-green-deep);
	min-height: clamp(31rem, 43vw, 38rem);
}
.oasis-about-ethos__media {
	position: absolute;
	inset: 0;
	line-height: 0;
}
.oasis-about-ethos__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 52%;
	display: block;
	transition: transform 900ms var(--oasis-ease-out);
}
.oasis-about-ethos__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(20, 57, 28, 0.96) 0%, rgba(26, 68, 33, 0.88) 48%, rgba(26, 68, 33, 0.38) 100%),
		linear-gradient(0deg, rgba(18, 49, 24, 0.94) 0%, rgba(18, 49, 24, 0.08) 66%);
}
.oasis-about-ethos__body {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	min-height: inherit;
	padding-block: clamp(5rem, 10vw, 8.5rem) clamp(4rem, 8vw, 6.5rem);
	color: rgba(255, 255, 255, 0.9);
}
.oasis-about-ethos__inner { max-width: var(--oasis-w-wide); }
@media (min-width: 1000px) {
	/* statement left at display scale, gloss right and quiet: the width is
	   spent on the sentence, and the explanation does not have to wait
	   underneath it for its turn */
	.oasis-about-ethos__inner {
		display: grid;
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
		column-gap: clamp(2.5rem, 5vw, 4.5rem);
		align-items: end;
	}
	.oasis-about-ethos__inner .oasis-eyebrow { grid-column: 1 / -1; }
	.oasis-about-ethos__statement { grid-column: 1; margin-top: 0.7rem; }
	.oasis-about-ethos__gloss {
		grid-column: 2;
		margin-top: 0;
		padding-top: 1.4rem;
	}
}
.oasis-about-ethos__statement {
	margin-top: 0.7rem;
	font-size: clamp(1.7rem, 1.15rem + 2.35vw, 3rem);
	line-height: 1.22;
	letter-spacing: -0.018em;
	max-width: 22ch;
	text-wrap: pretty;
	color: #fff;
}
/* The four rights are the load-bearing words in the sentence, so they take
   the leaf green and the italic. Emphasis inside a sentence, not four
   labels lifted out of it into a row of tiles. */
.oasis-about-ethos__word {
	font-style: italic;
	color: var(--oasis-green-light);
	font-synthesis: none;
}
.oasis-about-ethos__gloss {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	padding-top: clamp(1.4rem, 2.5vw, 1.9rem);
	border-top: 2px solid rgba(180, 236, 81, 0.58);
	color: rgba(255, 255, 255, 0.84);
	font-size: clamp(1rem, 0.95rem + 0.24vw, 1.11rem);
	line-height: 1.62;
	max-width: 52ch;
}
.oasis-about-ethos .oasis-eyebrow { color: rgba(255, 255, 255, 0.78); }
.oasis-about-ethos .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");
}
.js .oasis-about-ethos:has(.oasis-about-ethos__inner.is-pending) .oasis-about-ethos__media img {
	transform: scale(1.025);
}

/* --------------------------------------------------------------------------
   5. Values — a cascading glossary, not a grid.

   The section introduction holds the left rail while the six principles
   descend on the right. Small offsets create a human reading rhythm without
   turning the content into cards, tiles or a report table.
   -------------------------------------------------------------------------- */
.oasis-about-values { padding-block: clamp(4rem, 7vw, 6rem); }
.oasis-about-values__head { max-width: 34rem; }
.oasis-about-values__head h2 { max-width: 16ch; text-wrap: balance; }
.oasis-about-values__head .oasis-lede { margin-top: 1.2rem; max-width: 34ch; }
.oasis-about-values__list {
	margin: clamp(3rem, 6vw, 5rem) 0 0;
	padding: 0;
	counter-reset: none;
}
@media (min-width: 980px) {
	.oasis-about-values > .oasis-container {
		display: grid;
		grid-template-columns: minmax(15rem, 0.78fr) minmax(0, 1.22fr);
		column-gap: clamp(4rem, 8vw, 8rem);
		align-items: start;
	}
	.oasis-about-values__head {
		position: sticky;
		top: calc(var(--oasis-header-h) + 3rem);
	}
	.oasis-about-values__list { margin-top: 0; }
}

/* One principle. The name carries it; the explanation waits underneath in
   a measure short enough to be read in one go. */
.oasis-about-value {
	position: relative;
	padding: clamp(1.25rem, 2vw, 1.7rem) 0 clamp(2.25rem, 3.7vw, 3.15rem) clamp(1.25rem, 2.8vw, 2.25rem);
}
.oasis-about-value::before {
	content: "";
	position: absolute;
	left: 0;
	top: clamp(1.7rem, 3vw, 2.45rem);
	width: clamp(0.65rem, 1.2vw, 1rem);
	height: 2px;
	background: var(--oasis-green-leaf);
	border-radius: 999px;
	opacity: 0.7;
}

.oasis-about-value dt {
	font-family: var(--oasis-font-display);
	font-weight: 500;
	/* oversized on purpose: at this size the six names ARE the section's
	   navigation, and a professional can take the whole thing in one pass
	   before deciding whether to read the small print */
	font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3rem);
	line-height: 1.06;
	letter-spacing: -0.022em;
	color: var(--oasis-green-deep);
	text-wrap: balance;
	transition: color var(--oasis-dur-short) var(--oasis-ease-soft);
}
.oasis-about-value dd {
	margin: 0.9rem 0 0;
	color: var(--oasis-ink-soft);
	font-size: clamp(1rem, 0.96rem + 0.2vw, 1.11rem);
	line-height: 1.62;
	max-width: 46ch;
}

/* A quiet leaf rule grows under the name on hover and focus — enough to
   feel responsive on a desktop read, not enough to suggest the row is a
   link, because it is not. */
@media (min-width: 720px) {
	.oasis-about-value,
	.oasis-about-value:nth-child(even) {
		display: block;
		margin-left: 0;
	}
	.oasis-about-value:nth-child(even) { margin-left: clamp(2rem, 7vw, 6rem); }
	.oasis-about-value:nth-child(3n) { margin-right: clamp(1rem, 5vw, 4rem); }
	.oasis-about-value:nth-child(even) dt,
	.oasis-about-value:nth-child(even) dd { padding-left: 0; }
}

.oasis-about-value dt::after {
	content: "";
	display: block;
	height: 1px;
	width: 0;
	margin-top: 0.65rem;
	background: var(--oasis-green-leaf);
	transition: width var(--oasis-dur-reveal) var(--oasis-ease-out);
	pointer-events: none;
}
@media (hover: hover) {
	.oasis-about-value:hover dt::after { width: min(7rem, 30%); }
	.oasis-about-value:hover dt { color: var(--oasis-green-leaf); }
}
@media (prefers-reduced-motion: reduce) {
	.oasis-about-value dt::after,
	.oasis-about-ethos__media img { transition: none; transform: none; }
}

/* --------------------------------------------------------------------------
   6. Aims — prose, closed by the one line worth remembering.
   -------------------------------------------------------------------------- */
.oasis-about-aims__head { grid-column: 1 / -1; }
.oasis-about-aims__body { grid-column: 1 / -1; }
@media (min-width: 900px) {
	.oasis-about-aims .oasis-bed { align-items: start; }
	.oasis-about-aims__head { grid-column: 1 / span 4; }
	.oasis-about-aims__body { grid-column: 6 / span 7; }
}
.oasis-about-aims__head h2 { margin-top: 0.35rem; max-width: 14ch; text-wrap: balance; }
.oasis-about-aims__body p {
	color: var(--oasis-ink-soft);
	font-size: clamp(1rem, 0.95rem + 0.24vw, 1.11rem);
	line-height: 1.64;
	max-width: 56ch;
}
/* The pull-quote is the page's most human sentence and the one a
   commissioner is most likely to quote back, so it gets the display face,
   the leaf rule and room around it — and nothing else. */
.oasis-about-aims__pull {
	margin: clamp(2rem, 3.5vw, 2.75rem) 0 0;
	padding-left: clamp(1.1rem, 2.4vw, 1.75rem);
	border-left: 2px solid var(--oasis-green-leaf);
}
/* The three beats use offset margin notes rather than a process diagram.
   Nothing here is a figure, bar or percentage: the copy says only how
   progress is understood and revisited. */
.oasis-about-arc {
	list-style: none;
	counter-reset: none;
	margin: clamp(2.25rem, 4vw, 3.25rem) 0 0;
	padding: 0;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: clamp(1.25rem, 2.4vw, 1.75rem);
}
.oasis-about-arc li {
	position: relative;
	display: grid;
	grid-template-columns: minmax(8.5rem, 0.72fr) minmax(0, 1.28fr);
	gap: 0.5rem clamp(1rem, 2.5vw, 2rem);
	padding: 1rem 0 1rem clamp(1rem, 2vw, 1.5rem);
	border-left: 2px solid rgba(66, 147, 33, 0.7);
}
/* the arc sits in the gap between beats, so the sequence reads as one
   movement rather than three items */
@media (min-width: 760px) {
	.oasis-about-arc li:nth-child(2) { margin-left: 8%; }
	.oasis-about-arc li:nth-child(3) { margin-left: 16%; }
}
.oasis-about-arc__step {
	display: block;
	font-family: var(--oasis-font-display);
	font-weight: 500;
	font-size: clamp(1.1rem, 1rem + 0.42vw, 1.3rem);
	line-height: 1.18;
	letter-spacing: -0.012em;
	color: var(--oasis-green-deep);
}
.oasis-about-arc__note {
	display: block;
	margin-top: 0;
	color: var(--oasis-ink-soft);
	font-size: var(--oasis-fs-sm);
	line-height: 1.55;
	max-width: 34ch;
}

.oasis-about-aims__pull p {
	margin: 0;
	font-family: var(--oasis-font-display);
	font-style: italic;
	font-size: clamp(1.24rem, 1.02rem + 0.95vw, 1.7rem);
	line-height: 1.36;
	color: var(--oasis-green-deep);
	max-width: 34ch;
}

/* --------------------------------------------------------------------------
   7. Where we are — the same mint ground the homepage uses for the same
      statement, so a professional meets one consistent registration
      treatment across the site (/docs/COMPONENT_LANGUAGE.md). The layout
      differs; the treatment of the statement itself does not.
   -------------------------------------------------------------------------- */
.oasis-about-journey__aside { grid-column: 1 / -1; }
.oasis-about-journey__main { grid-column: 1 / -1; }
@media (min-width: 900px) {
	.oasis-about-journey .oasis-bed { align-items: start; }
	.oasis-about-journey__aside { grid-column: 1 / span 4; }
	.oasis-about-journey__main {
		grid-column: 5 / span 8;
		padding-left: clamp(1.5rem, 3vw, 3rem);
		border-left: 1px solid rgba(36, 92, 44, 0.2);
	}
}
.oasis-about-journey__aside h2 {
	margin-top: 0.3rem;
	font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
	max-width: 13ch;
}
.oasis-about-journey .oasis-ofsted-notice {
	background: none;
	padding: 0;
	border-radius: 0;
	max-width: none;
}
.oasis-about-journey .oasis-ofsted-notice::before { display: none; }
.oasis-about-journey .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-about-journey__note {
	margin-top: 1.9rem;
	padding-top: 1.7rem;
	border-top: 1px solid rgba(36, 92, 44, 0.18);
	max-width: 52ch;
	font-size: clamp(1rem, 0.95rem + 0.22vw, 1.09rem);
	line-height: 1.6;
	color: var(--oasis-ink-soft);
}

/* --------------------------------------------------------------------------
   8. Next — two weighted routes and one professional line.

   Not three equal buttons. The two onward pages are large ruled targets
   with a sentence each, and the placement CTA sits beneath them as a
   single line, because it is a different kind of action and should not
   compete with the reading path.
   -------------------------------------------------------------------------- */
.oasis-about-next__inner { max-width: var(--oasis-w-wide); }
.oasis-about-next__inner h2 {
	font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
	max-width: 16ch;
}
.oasis-about-next__routes {
	display: grid;
	gap: 0;
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.oasis-about-next__routes > a {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 2.5rem;
	align-items: center;
	gap: 0.4rem 1.5rem;
	padding-block: clamp(1.75rem, 3.4vw, 2.6rem);
	border-top: 1px solid var(--oasis-rule);
	text-decoration: none;
	color: inherit;
	transition: background-color var(--oasis-dur-short) var(--oasis-ease-soft);
}
.oasis-about-next__routes > a:first-child { border-top: 2px solid var(--oasis-green-leaf); }
.oasis-about-next__routes > a:last-child { border-bottom: 1px solid var(--oasis-rule); }
.oasis-about-next__label {
	grid-column: 1;
	font-family: var(--oasis-font-display);
	font-weight: 500;
	/* chapter scale: these are the next thing to read, not two buttons */
	font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.15rem);
	line-height: 1.12;
	letter-spacing: -0.018em;
	color: var(--oasis-green-deep);
	transition: color var(--oasis-dur-micro) var(--oasis-ease-soft);
}
.oasis-about-next__desc {
	grid-column: 1;
	color: var(--oasis-ink-soft);
	font-size: var(--oasis-fs-sm);
	line-height: 1.55;
	max-width: 56ch;
}
.oasis-about-next__routes svg {
	grid-column: 2;
	grid-row: 1 / span 2;
	width: 1.9rem;
	height: auto;
	justify-self: end;
	color: var(--oasis-green-deep);
	transition: transform var(--oasis-dur-short) var(--oasis-ease-out);
}
@media (hover: hover) {
	.oasis-about-next__routes > a:hover { background: rgba(239, 251, 234, 0.66); }
	.oasis-about-next__routes > a:hover .oasis-about-next__label { color: var(--oasis-green-deep-hover); }
	.oasis-about-next__routes > a:hover svg { transform: translateX(7px); }
}
.oasis-about-next__routes > a:focus-visible {
	background: rgba(239, 251, 234, 0.85);
	outline: 3px solid var(--oasis-focus);
	outline-offset: -3px;
}
.oasis-about-next__prof {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.9rem 1.5rem;
	margin-top: clamp(2rem, 3.5vw, 2.75rem);
}
.oasis-about-next__prof > span {
	font-family: var(--oasis-font-display);
	font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem);
	color: var(--oasis-ink-soft);
}

/* --------------------------------------------------------------------------
   9. Narrow-screen behaviour.

   The page is a reading page, so the phone layout is about measure and
   pacing rather than about fitting things in. The drop-word comes down a
   long way, because at 5rem on a 375px screen it takes half the line box
   and the sentence stops being a sentence.
   -------------------------------------------------------------------------- */
@media (max-width: 759px) {
	.oasis-about-open::after { right: -9rem; top: 6rem; opacity: 0.07; }
	.oasis-about-open__thesis { margin-top: 1rem; }
	.oasis-about-two__drop { font-size: clamp(3.8rem, 18vw, 5rem); }
	.oasis-about-two__statement { max-width: none; }
	.oasis-about-reasons__text,
	.oasis-about-value dd { max-width: none; }
	.oasis-about-ethos__statement { max-width: none; }
	.oasis-about-arc li { grid-template-columns: 1fr; }
	.oasis-about-arc__note { margin-top: 0.35rem; }
}
@media (max-width: 899px) {
	.oasis-about-what__figure { margin-bottom: clamp(0.5rem, 2vw, 1.25rem); }
	.oasis-about-what__figure .oasis-figure__frame img { aspect-ratio: 5 / 4; }
	.oasis-about-ethos__media::after {
		background: linear-gradient(0deg, rgba(18, 49, 24, 0.97) 0%, rgba(22, 60, 29, 0.84) 68%, rgba(22, 60, 29, 0.48) 100%);
	}
}
@media (max-width: 400px) {
	/* the arch reads as a shape rather than as a rounding at this width */
	.oasis-about-what__figure .oasis-figure__frame img { aspect-ratio: 6 / 5; }
	.oasis-about-ethos { min-height: 37rem; }
}