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

   Its own shape. The homepage is cinematic; About is prose on paper; this
   page is about a *practice*, and a practice is a sequence. So the page's
   structural motif is a **vertical spine** — a hairline that the beats of a
   response hang off, and that the four PACE letterforms then run down at
   full scale. Nothing on the other two pages does that, and nothing else on
   this page needed inventing to make it work.
   ========================================================================== */

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

   About opens with a title across the full width. This one is a single
   left-hand column with the spine already showing beside it, so the page
   announces its structure in the first screen instead of explaining it.
   -------------------------------------------------------------------------- */
.oasis-care-open { padding-block: clamp(3.5rem, 7.5vw, 6.5rem) clamp(3rem, 6vw, 5rem); }
.oasis-care-open__inner {
	max-width: var(--oasis-w-wide);
	position: relative;
	padding-left: clamp(1.25rem, 3vw, 2.5rem);
	border-left: 2px solid var(--oasis-green-leaf);
}
.oasis-care-open__inner h1 {
	margin-top: 0.4rem;
	max-width: 15ch;
	text-wrap: balance;
}
@media (min-width: 900px) {
	.oasis-care-open__body {
		display: grid;
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		gap: clamp(1.75rem, 4vw, 3.5rem);
		align-items: start;
		margin-top: clamp(2.25rem, 4vw, 3.25rem);
	}
}
.oasis-care-open__lede {
	margin-top: clamp(1.75rem, 3vw, 2.25rem);
	font-family: var(--oasis-font-display);
	font-size: clamp(1.24rem, 1.06rem + 0.75vw, 1.55rem);
	line-height: 1.44;
	color: var(--oasis-ink);
	max-width: 34ch;
}
.oasis-care-open__para {
	margin-top: 1.15rem;
	color: var(--oasis-ink-soft);
	max-width: 46ch;
}
@media (min-width: 900px) {
	.oasis-care-open__lede { margin-top: 0; }
	.oasis-care-open__para { margin-top: 0.35rem; }
}

/* --------------------------------------------------------------------------
   2. The spine — four beats of a response.

   A real vertical line with nodes on it, because this genuinely IS a
   sequence: the order is the content. It is not a "timeline widget" — there
   is no progress bar, no scroll binding and no numbers, because numbering
   it would make it look like a procedure with a name, which is precisely
   what it must not be (see the template's compliance note).
   -------------------------------------------------------------------------- */
/* One head pattern for the whole page: the heading holds the left, its
   lede answers on the right. Used by every section that has both, so the
   page has one way of opening a section rather than four. */
.oasis-care-head { max-width: var(--oasis-w-wide); }
.oasis-care-head h2 { max-width: 20ch; text-wrap: balance; }
.oasis-care-head .oasis-lede { margin-top: 1.1rem; }
@media (min-width: 960px) {
	.oasis-care-head {
		display: grid;
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		column-gap: clamp(2rem, 5vw, 4.5rem);
		align-items: end;
	}
	.oasis-care-head > .oasis-eyebrow { grid-column: 1 / -1; }
	.oasis-care-head .oasis-lede { margin-top: 0; padding-bottom: 0.35rem; }
}

.oasis-spine {
	list-style: none;
	margin: clamp(2.5rem, 5vw, 4rem) 0 0;
	padding: 0;
	position: relative;
}
/* the line itself: it starts and ends AT the first and last node rather
   than running the full block height, so the sequence reads as bounded */
.oasis-spine::before {
	content: "";
	position: absolute;
	left: 0.34rem;
	top: 1.4rem;
	bottom: 1.4rem;
	width: 2px;
	background: linear-gradient(to bottom,
		var(--oasis-green-leaf) 0%,
		rgba(66, 147, 33, 0.35) 100%);
}
.oasis-spine__beat {
	position: relative;
	padding-left: clamp(2rem, 4vw, 3rem);
	padding-block: 0 clamp(2rem, 3.6vw, 3rem);
}
.oasis-spine__beat:last-child { padding-bottom: 0; }
.oasis-spine__node {
	position: absolute;
	left: 0;
	top: 1.05rem;
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 50%;
	background: var(--oasis-paper);
	border: 2px solid var(--oasis-green-leaf);
}
.oasis-spine__name {
	margin: 0;
	font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.95rem);
	line-height: 1.12;
	letter-spacing: -0.018em;
	color: var(--oasis-green-deep);
}
.oasis-spine__text {
	margin: 0.6rem 0 0;
	color: var(--oasis-ink-soft);
	font-size: clamp(1rem, 0.96rem + 0.2vw, 1.11rem);
	line-height: 1.62;
	max-width: 56ch;
}
@media (min-width: 900px) {
	/* name in the margin, text beside it: the four names then read as a
	   column of their own and the sequence is scannable in one pass */
	.oasis-spine__beat {
		display: grid;
		grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr);
		column-gap: clamp(1.5rem, 3vw, 3rem);
		align-items: baseline;
	}
	.oasis-spine__text { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   3. PACE — the signature moment.

   Four oversized letterforms down the page, each with its word and a plain
   sentence beside it. NOT four cards, not four tiles, not four icons in
   circles: an alphabet running down a spine, which is a shape a card grid
   physically cannot make.

   The letter is decorative in the accessibility sense — it is aria-hidden,
   and the word "Playfulness" (the <dt>) carries the meaning — so nothing is
   lost if it is not announced.
   -------------------------------------------------------------------------- */
.oasis-care-pace__head h2 { margin-top: 0.35rem; max-width: 16ch; }

.oasis-pace {
	margin: clamp(2.5rem, 5vw, 4.5rem) 0 0;
	padding: 0;
	position: relative;
}
.oasis-pace__row {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: 0.3rem;
	align-items: start;
	padding-left: calc(clamp(3rem, 7vw, 5.25rem) + clamp(1.25rem, 3vw, 2.75rem));
	transition: background-color var(--oasis-dur-short) var(--oasis-ease-soft);
	padding-block: clamp(1.75rem, 3.4vw, 2.75rem);
	border-top: 1px solid rgba(36, 92, 44, 0.18);
}
.oasis-pace__row:last-child { border-bottom: 1px solid rgba(36, 92, 44, 0.18); }

.oasis-pace__letter {
	/* Positioned rather than laid out: it sits inside its <dt> for markup
	   validity, but it belongs in the margin visually. */
	position: absolute;
	left: 0;
	top: clamp(1.5rem, 3vw, 2.5rem);
	font-family: var(--oasis-font-display);
	font-weight: 500;
	/* big enough to be a letterform rather than a label */
	font-size: clamp(3.75rem, 2rem + 7vw, 7rem);
	line-height: 0.78;
	letter-spacing: -0.04em;
	color: var(--oasis-green-leaf);
	/* the letters are different widths; a fixed box keeps the four words
	   aligned down a common edge instead of stepping in and out */
	min-width: clamp(3rem, 7vw, 5.25rem);
	text-align: left;
	transition: color var(--oasis-dur-short) var(--oasis-ease-soft);
}
.oasis-pace__name {
	font-family: var(--oasis-font-display);
	font-weight: 500;
	font-size: clamp(1.35rem, 1.1rem + 0.95vw, 1.85rem);
	line-height: 1.12;
	letter-spacing: -0.016em;
	color: var(--oasis-green-deep);
}
.oasis-pace__text {
	margin: 0;
	color: var(--oasis-ink-soft);
	font-size: clamp(1rem, 0.96rem + 0.2vw, 1.11rem);
	line-height: 1.62;
	max-width: 56ch;
}
@media (min-width: 1000px) {
	/* Three columns: letterform, word, sentence. The four words then form a
	   column of their own beside the four letters, which is the thing that
	   makes this read as an alphabet down the page rather than as four rows
	   of a list — and it uses the width the two-column version wasted. */
	.oasis-pace__row {
		grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr);
		column-gap: clamp(1.5rem, 3vw, 3rem);
		align-items: baseline;
	}
	.oasis-pace__name { grid-column: 1; }
	.oasis-pace__text { grid-column: 2; }
}
@media (hover: hover) {
	.oasis-pace__row:hover { background: rgba(255, 255, 255, 0.35); }
	.oasis-pace__row:hover .oasis-pace__letter { color: var(--oasis-green-deep); }
}

/* --------------------------------------------------------------------------
   4. Relationships — text leads, the photograph answers.
   -------------------------------------------------------------------------- */
.oasis-care-rel__text { grid-column: 1 / -1; }
.oasis-care-rel__figure { grid-column: 1 / -1; }
@media (min-width: 900px) {
	.oasis-care-rel .oasis-bed { align-items: center; }
	.oasis-care-rel__text { grid-column: 1 / span 5; }
	.oasis-care-rel__figure { grid-column: 7 / span 6; }
}
.oasis-care-rel__text h2 { margin-top: 0.35rem; max-width: 18ch; text-wrap: balance; }
.oasis-care-rel__text p {
	margin-top: 1.15rem;
	color: var(--oasis-ink-soft);
	max-width: 48ch;
}
.oasis-care-rel__text strong { color: var(--oasis-ink); font-weight: 600; }
.oasis-care-rel__figure .oasis-figure__frame img { aspect-ratio: 4 / 3; }

/* --------------------------------------------------------------------------
   5. When things are hard — the one place the page raises its voice, and it
      does it with a sentence rather than with colour.
   -------------------------------------------------------------------------- */
.oasis-care-hard__inner { max-width: var(--oasis-w-wide); }
.oasis-care-hard__inner h2 { margin-top: 0.35rem; max-width: 16ch; }
@media (min-width: 960px) {
	/* the claim sits level with the heading that makes it, not underneath
	   waiting its turn */
	.oasis-care-hard__top {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: clamp(2rem, 5vw, 4.5rem);
		align-items: start;
	}
	.oasis-care-hard__top > .oasis-eyebrow { grid-column: 1 / -1; }
	.oasis-care-hard__top h2 { grid-column: 1; }
	.oasis-care-hard__statement { grid-column: 2; margin-top: 0.5rem; }
}
.oasis-care-hard__statement {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	font-family: var(--oasis-font-display);
	font-size: clamp(1.24rem, 1.02rem + 0.95vw, 1.7rem);
	line-height: 1.42;
	letter-spacing: -0.01em;
	color: var(--oasis-green-deep);
	max-width: 42ch;
}
.oasis-care-hard__cols {
	display: grid;
	gap: clamp(1.75rem, 3.5vw, 3rem);
	margin-top: clamp(2.25rem, 4vw, 3.25rem);
}
@media (min-width: 760px) {
	.oasis-care-hard__cols { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); }
}
.oasis-care-hard__cols h3 {
	margin: 0 0 0.6rem;
	padding-top: 1.1rem;
	border-top: 2px solid var(--oasis-green-leaf);
	font-size: clamp(1.14rem, 1.02rem + 0.42vw, 1.34rem);
	line-height: 1.2;
	color: var(--oasis-green-deep);
}
.oasis-care-hard__cols p {
	margin: 0;
	color: var(--oasis-ink-soft);
	font-size: clamp(1rem, 0.96rem + 0.16vw, 1.09rem);
	line-height: 1.6;
	max-width: 46ch;
}
/* The physical-intervention sentence. Set quietly and apart: it is
   important, it is legally careful, and it should read as a plain statement
   of limits rather than as a warning notice. */
.oasis-care-hard__note {
	margin-top: clamp(2.25rem, 4vw, 3.25rem);
	padding-top: clamp(1.4rem, 2.5vw, 1.9rem);
	border-top: 1px solid rgba(36, 92, 44, 0.22);
	max-width: 64ch;
	font-size: var(--oasis-fs-sm);
	line-height: 1.6;
	color: var(--oasis-ink-soft);
}

/* --------------------------------------------------------------------------
   6. The child's voice — the photograph leads this time, so the two picture
      sections do not read as one repeated layout.
   -------------------------------------------------------------------------- */
.oasis-care-voice__figure { grid-column: 1 / -1; }
.oasis-care-voice__text { grid-column: 1 / -1; }
@media (min-width: 900px) {
	.oasis-care-voice .oasis-bed { align-items: center; }
	.oasis-care-voice__figure { grid-column: 1 / span 5; }
	.oasis-care-voice__text { grid-column: 7 / span 6; }
}
.oasis-care-voice__figure .oasis-figure__frame img { aspect-ratio: 4 / 5; }
.oasis-care-voice__text h2 { margin-top: 0.35rem; max-width: 22ch; text-wrap: balance; }
.oasis-care-voice__text p {
	margin-top: 1.15rem;
	color: var(--oasis-ink-soft);
	max-width: 48ch;
}
/* the honest limit, marked as an aside rather than buried in the flow */
.oasis-care-voice__caveat {
	margin-top: 1.6rem;
	padding-left: clamp(1rem, 2vw, 1.5rem);
	border-left: 2px solid var(--oasis-sand);
	font-size: var(--oasis-fs-sm);
	line-height: 1.58;
}

/* --------------------------------------------------------------------------
   7. Across 5 to 17 — two columns because the content genuinely is a
      contrast. Two, not three or six: this is a comparison, not a grid.
   -------------------------------------------------------------------------- */
.oasis-care-adapts__head h2 { margin-top: 0.35rem; max-width: 22ch; }
.oasis-care-ages {
	display: grid;
	gap: clamp(2rem, 4vw, 3rem);
	margin-top: clamp(2.25rem, 4vw, 3.25rem);
}
@media (min-width: 820px) {
	.oasis-care-ages {
		grid-template-columns: 1fr 1fr;
		gap: clamp(2.5rem, 5vw, 5rem);
	}
	/* the second column steps down, so the pair reads as a comparison
	   rather than as two equal tiles side by side */
	.oasis-care-ages__col:nth-child(2) { margin-top: clamp(1.5rem, 3vw, 2.75rem); }
}
.oasis-care-ages__col h3 {
	margin: 0 0 0.85rem;
	padding-bottom: 0.9rem;
	border-bottom: 2px solid var(--oasis-green-leaf);
	font-size: clamp(1.3rem, 1.08rem + 0.8vw, 1.7rem);
	line-height: 1.14;
	letter-spacing: -0.014em;
	color: var(--oasis-green-deep);
}
.oasis-care-ages__col p {
	margin: 0;
	color: var(--oasis-ink-soft);
	font-size: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
	line-height: 1.64;
}
.oasis-care-adapts__close {
	margin-top: clamp(2.5rem, 4.5vw, 3.75rem);
	padding-top: clamp(1.5rem, 2.6vw, 2rem);
	border-top: 1px solid var(--oasis-rule);
	max-width: 62ch;
	color: var(--oasis-ink-soft);
	font-size: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
	line-height: 1.62;
}

/* --------------------------------------------------------------------------
   8. Next — the same chapter language About closes with, on mint, so the
      site has one way of saying "keep reading" rather than a new one per
      page. Consistency is the point of a pattern.
   -------------------------------------------------------------------------- */
.oasis-care-next__inner { max-width: var(--oasis-w-wide); }
.oasis-care-next__inner h2 {
	margin-top: 0.35rem;
	font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
	max-width: 16ch;
}
.oasis-care-next__routes {
	display: grid;
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.oasis-care-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 rgba(36, 92, 44, 0.22);
	text-decoration: none;
	color: inherit;
	transition: background-color var(--oasis-dur-short) var(--oasis-ease-soft);
}
.oasis-care-next__routes > a:first-child { border-top: 2px solid var(--oasis-green-leaf); }
.oasis-care-next__routes > a:last-child { border-bottom: 1px solid rgba(36, 92, 44, 0.22); }
.oasis-care-next__label {
	grid-column: 1;
	font-family: var(--oasis-font-display);
	font-weight: 500;
	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-care-next__desc {
	grid-column: 1;
	color: var(--oasis-ink-soft);
	font-size: var(--oasis-fs-sm);
	line-height: 1.55;
	max-width: 56ch;
}
.oasis-care-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-care-next__routes > a:hover { background: rgba(255, 255, 255, 0.42); }
	.oasis-care-next__routes > a:hover .oasis-care-next__label { color: var(--oasis-green-deep-hover); }
	.oasis-care-next__routes > a:hover svg { transform: translateX(7px); }
}
.oasis-care-next__routes > a:focus-visible {
	background: rgba(255, 255, 255, 0.6);
	outline: 3px solid var(--oasis-focus);
	outline-offset: -3px;
}
.oasis-care-next__prof {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.9rem 1.5rem;
	margin-top: clamp(2rem, 3.5vw, 2.75rem);
}
.oasis-care-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 screens.

   The two compositions that need a deliberate mobile answer are the spine
   and PACE. Neither is allowed to become stacked text: the spine keeps its
   line and its nodes (it is short enough to), and the PACE letter moves
   above its word rather than shrinking to a bullet — the letterform is the
   idea, so it keeps its scale.
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
	.oasis-care-rel__figure,
	.oasis-care-voice__figure { margin-bottom: clamp(0.5rem, 2vw, 1.25rem); }
	.oasis-care-rel__text p,
	.oasis-care-voice__text p,
	.oasis-spine__text,
	.oasis-pace__text { max-width: none; }
}
@media (max-width: 599px) {
	.oasis-pace__row {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0.15rem;
		padding-left: 0;
	}
	/* on a phone the letter goes back into flow, above its word, so it can
	   keep its scale instead of shrinking to fit a margin that is not there */
	.oasis-pace__letter {
		position: static;
		display: block;
		font-size: clamp(3.25rem, 15vw, 4.5rem);
		min-width: 0;
		margin-bottom: 0.1rem;
	}
	.oasis-care-hard__note,
	.oasis-care-adapts__close { max-width: none; }
}

/* --------------------------------------------------------------------------
   7b. What progress can look like.

      Added 6 September 2026. An ASYMMETRIC composition, not an
      eight-card grid: the first item — feeling safer and more settled —
      holds its own column at display scale, and the other seven run
      beside it as a quieter two-up list.

      That asymmetry is the argument. Feeling safe is the precondition
      for the other seven rather than one of eight equivalents, and a
      grid of eight equal tiles would say the opposite while also
      turning a page about a child's recovery into a dashboard.

      No numerals, no counters, no progress bars, no percentages, no
      chart of any kind anywhere in this section.
   -------------------------------------------------------------------------- */
.oasis-care-progress__head { max-width: var(--oasis-w-wide); }
.oasis-care-progress__head h2 { margin-top: 0.35rem; max-width: 18ch; text-wrap: balance; }
.oasis-care-progress__head .oasis-lede { margin-top: 1.1rem; max-width: 50ch; }

.oasis-care-progress__body { margin-top: clamp(2.25rem, 5vw, 3.5rem); }

.oasis-care-progress__lead-h {
	margin: 0;
	font-family: var(--oasis-font-display);
	font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.5rem);
	line-height: 1.16;
	letter-spacing: -0.019em;
	color: var(--oasis-green-deep);
	text-wrap: balance;
}
.oasis-care-progress__lead-p {
	margin: 1rem 0 0;
	color: var(--oasis-ink-soft);
	line-height: 1.66;
	max-width: 42ch;
}
.oasis-care-progress__lead-note {
	margin: 1.1rem 0 0;
	padding-top: 0.9rem;
	border-top: 1px solid var(--oasis-rule);
	font-size: var(--oasis-fs-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--oasis-green-leaf);
	max-width: 42ch;
}

.oasis-care-progress__rest {
	margin-top: clamp(2.25rem, 4.5vw, 3rem);
}
.oasis-care-progress__item + .oasis-care-progress__item {
	margin-top: clamp(1.5rem, 3vw, 2rem);
}
.oasis-care-progress__item h3 {
	margin: 0 0 0.4rem;
	font-family: var(--oasis-font-display);
	font-size: clamp(1.08rem, 0.99rem + 0.36vw, 1.26rem);
	line-height: 1.3;
	color: var(--oasis-green-deep);
}
.oasis-care-progress__item p {
	margin: 0;
	color: var(--oasis-ink-soft);
	font-size: var(--oasis-fs-sm);
	line-height: 1.6;
	max-width: 44ch;
}

.oasis-care-progress__close {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
	border-top: 1px solid var(--oasis-rule);
	max-width: 64ch;
	color: var(--oasis-ink-soft);
	font-size: var(--oasis-fs-sm);
	line-height: 1.64;
}

@media (min-width: 900px) {
	/* Two rows so the closing paragraph can sit directly beneath the
	   lead rather than being pushed to the foot of the taller list
	   column. The list spans both rows; row 1 is sized to the lead. */
	.oasis-care-progress__body {
		display: grid;
		grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
		grid-template-rows: min-content 1fr;
		column-gap: clamp(2.5rem, 6vw, 5rem);
		align-items: start;
	}
	.oasis-care-progress__lead { grid-column: 1; grid-row: 1; }
	.oasis-care-progress__rest {
		grid-column: 2;
		grid-row: 1 / span 2;
		margin-top: 0.4rem;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: clamp(1.75rem, 4vw, 3rem);
		row-gap: clamp(1.5rem, 3vw, 2.1rem);
	}
	.oasis-care-progress__item + .oasis-care-progress__item { margin-top: 0; }
	.oasis-care-progress__item p { max-width: 34ch; }
	.oasis-care-progress__close {
		grid-column: 1;
		grid-row: 2;
		align-self: start;
		margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
		max-width: 42ch;
	}
}