/* ==========================================================================
   Our Team — page stylesheet
   Loaded only on /our-team/ (inc/enqueue.php slug map).

   Composes with base.css and restates nothing from it.

   THE MOTIF IS ONE MARK, REPEATED. A single upright stroke — the
   smallest human-scale mark available — introduced in miniature under
   the headline, run out into the signature figure, and reused as the
   item marker in two later sections. A few recurring forms rather than
   many interchangeable ones, which is the page's argument about people
   made in its geometry.

   No portraits, no avatars, no cards, no org chart, no slider. The
   page has one name on it and that is designed for, not apologised
   for.

   Sections
     1. Opening
     2. THE MARK — the rhythm figure, at both scales
     3. Why there is one name here
     4. Continuity, and THE SIGNATURE MOMENT
     5. Proposed leadership
     6. The team being built
     7. What we will look for
     8. Supervision and development
     9. Join / next
    10. Narrow widths
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Opening.

      The headline is two sentences and the weight is on the second —
      the inverse of Referrals, which sets its turn in display italic at
      the same size. Here the abstraction ("a staffing model") is set
      small and quiet and the human half is set large, because that IS
      the argument.
   -------------------------------------------------------------------------- */
.oasis-team-open__inner { max-width: var(--oasis-w-wide); }
.oasis-team-open h1 { margin-top: 0.4rem; }

.oasis-team-open__l1,
.oasis-team-open__l2 { display: block; }

.oasis-team-open__l1 {
	font-size: clamp(1.5rem, 1.15rem + 1.55vw, 2.25rem);
	line-height: 1.22;
	color: var(--oasis-sage);
	max-width: 24ch;
}
.oasis-team-open__l2 {
	margin-top: 0.14em;
	font-size: clamp(2.35rem, 1.55rem + 3.35vw, 3.85rem);
	line-height: 1.08;
	letter-spacing: -0.021em;
	color: var(--oasis-green-deep);
	max-width: 19ch;
}

.oasis-team-open__body { margin-top: clamp(2rem, 4vw, 3.25rem); }
.oasis-team-open__lede {
	margin: 0;
	font-family: var(--oasis-font-display);
	font-size: clamp(1.24rem, 1rem + 1.05vw, 1.8rem);
	line-height: 1.4;
	letter-spacing: -0.012em;
	color: var(--oasis-green-deep);
	max-width: 26ch;
}
.oasis-team-open__paras { color: var(--oasis-ink-soft); max-width: 54ch; }

@media (min-width: 900px) {
	.oasis-team-open__body {
		display: grid;
		grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
		column-gap: clamp(2.5rem, 6vw, 5.5rem);
		align-items: start;
	}
	.oasis-team-open__paras { margin-top: 0.45rem; }
}

/* --------------------------------------------------------------------------
   2. THE MARK.

      A run of upright strokes that starts irregular in height, spacing
      and presence, and settles left to right into an even beat. Height,
      opacity and the spacing jitter arrive per-mark as --h / --o / --g
      from the template's generator, so the shape is deterministic and
      identical in every render and screenshot.

      Deliberately uncountable: at 48 strokes nobody tallies them, so it
      reads as a rhythm rather than as a number of staff — which is both
      the honest idea and the compliant one (COMPLIANCE_RULES §7.4).
   -------------------------------------------------------------------------- */
/* Centred, NOT bottom-aligned. The first build sat the strokes on a
   baseline and it immediately read as a bar chart — which invites
   counting, which is the one reading this figure must not have.
   Centred, the same data reads as notation: a pulse that stutters and
   then holds. */
.oasis-team-rhythm {
	display: flex;
	align-items: center;
	width: 100%;
	height: clamp(4.75rem, 8vw, 7.75rem);
}
.oasis-team-rhythm > span {
	flex: 1 1 0;
	min-width: 0;
	height: calc(var(--h) * 100%);
	display: flex;
	justify-content: center;
	margin-left: calc((var(--g) - 1) * 0.5rem);
}
.oasis-team-rhythm > span::before {
	content: "";
	width: 2.5px;
	border-radius: 1.25px;
	background: var(--oasis-green-light);
	opacity: var(--o);
	transform-origin: center;
	transition:
		opacity var(--oasis-dur-reveal) var(--oasis-ease-out),
		transform 780ms var(--oasis-ease-out);
	transition-delay: calc(var(--i) * 11ms);
}

/* The miniature under the headline — the motif introduced once, quietly,
   before it means anything. Leaf green because this one sits on paper. */
.oasis-team-rhythm--mini {
	width: clamp(7rem, 15vw, 10.5rem);
	height: clamp(1.5rem, 2.6vw, 2rem);
	margin-top: clamp(1.6rem, 3vw, 2.4rem);
}
.oasis-team-rhythm--mini > span { margin-left: calc((var(--g) - 1) * 0.2rem); }
.oasis-team-rhythm--mini > span::before {
	width: 1.5px;
	background: var(--oasis-green-leaf);
}

/* The marks rise left to right as the figure enters — a rhythm arriving,
   not a chart drawing itself. One animation, and it means one thing. */
.js .oasis-reveal.is-pending .oasis-team-rhythm > span::before {
	opacity: 0;
	transform: scaleY(0.08);
}

/* The same upright stroke is reused as the item marker in sections 4 and
   8 (see .oasis-team-cont__lead::before and .oasis-team-support__when
   ::before) rather than a new ornament being introduced for each. */

@media (prefers-reduced-motion: reduce) {
	.oasis-team-rhythm > span::before { transition: none; }
	.js .oasis-reveal.is-pending .oasis-team-rhythm > span::before {
		opacity: var(--o);
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   3. Why there is one name here.

      Said early and said plainly. A professional who notices an absence
      for themselves trusts the page less than one who was told first.
   -------------------------------------------------------------------------- */
.oasis-team-honest__lead h2 {
	margin-top: 0.35rem;
	max-width: 24ch;
	text-wrap: balance;
}
.oasis-team-honest__body { color: var(--oasis-ink-soft); max-width: 56ch; }
.oasis-team-honest__note {
	margin-top: 1.5rem;
	padding-top: 1.35rem;
	border-top: 1px solid var(--oasis-rule);
	color: var(--oasis-sage);
	font-size: var(--oasis-fs-sm);
	line-height: 1.6;
}

@media (min-width: 900px) {
	.oasis-team-honest__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
		column-gap: clamp(2.5rem, 6.5vw, 5.5rem);
		align-items: start;
	}
	.oasis-team-honest__body > p:first-child { margin-top: 0.5rem; }
}

/* --------------------------------------------------------------------------
   4. Continuity — and THE SIGNATURE MOMENT.

      The four commitments are set as plain type with the page's mark
      hanging beside each one: no boxes, no fills, no rules between them.
      Then the figure closes the argument.

      The figure sits in the page's ONE deep-green field, and that field
      is an INSET PANEL rather than a full-bleed band. Every other page
      on the site raises its voice across the whole width; this page's
      subject is intimacy, so its loud moment is held rather than spread.
   -------------------------------------------------------------------------- */
.oasis-team-cont__head { max-width: var(--oasis-w-wide); }
.oasis-team-cont__head h2 { margin-top: 0.35rem; max-width: 24ch; text-wrap: balance; }
.oasis-team-cont__head .oasis-lede { margin-top: 1.1rem; max-width: 52ch; }

.oasis-team-cont__list { margin-top: clamp(2.25rem, 5vw, 3.5rem); }
.oasis-team-cont__item + .oasis-team-cont__item { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
.oasis-team-cont__lead {
	margin: 0 0 0.5rem;
	font-size: clamp(1.16rem, 1.02rem + 0.5vw, 1.42rem);
	line-height: 1.28;
	color: var(--oasis-green-deep);
	position: relative;
	padding-left: 1.05rem;
}
.oasis-team-cont__lead::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 2px;
	height: 0.92em;
	border-radius: 1px;
	background: var(--oasis-green-leaf);
}
.oasis-team-cont__item p {
	margin: 0;
	padding-left: 1.05rem;
	color: var(--oasis-ink-soft);
	font-size: var(--oasis-fs-sm);
	line-height: 1.62;
	max-width: 46ch;
}

@media (min-width: 880px) {
	.oasis-team-cont__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: clamp(2.5rem, 6vw, 5rem);
		row-gap: clamp(2rem, 4vw, 3rem);
	}
	.oasis-team-cont__item + .oasis-team-cont__item { margin-top: 0; }
}

.oasis-team-figure {
	margin-top: clamp(2.5rem, 5.5vw, 4.25rem);
	background: var(--oasis-green-deep);
	border-radius: var(--oasis-radius-held);
	padding:
		clamp(2rem, 4.5vw, 3.25rem)
		clamp(1.5rem, 4vw, 3.25rem)
		clamp(1.75rem, 3.5vw, 2.5rem);
}
.oasis-team-figure__axis {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	margin-top: 1rem;
	padding-top: 0.85rem;
	border-top: 1px solid rgba(255, 255, 255, 0.22);
	font-size: var(--oasis-fs-xs);
	letter-spacing: 0.045em;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.82);
}
.oasis-team-figure__axis-b { text-align: right; }
.oasis-team-figure__line {
	margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
	font-family: var(--oasis-font-display);
	font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.95rem);
	line-height: 1.34;
	letter-spacing: -0.012em;
	color: #fff;
	max-width: 30ch;
}

/* --------------------------------------------------------------------------
   5. The leadership being built.

      Replaced the former "Proposed leadership" profile block on
      6 September 2026. Two states share one section:

        - NO published team member (today). Three accountabilities, set
          in the SAME measure and with the SAME leaf-green tick as the
          continuity commitments in section 4. That is deliberate reuse,
          not laziness: the page has one way of listing a short set of
          commitments, and inventing a second one for the section that
          happens to have no people in it would make the absence look
          like a different kind of content. It must not.

        - A published team member. The profile treatment below renders
          instead, unchanged.

      The status note closes the section in either state. It is set on
      the page's shell tint rather than as a bordered callout — a box
      would read as an apology, and this is a statement of policy.

      NO placeholder person anywhere: no silhouette, no avatar ring, no
      dashed portrait frame, no greyed-out card. There is nothing here
      shaped like a missing human being.
   -------------------------------------------------------------------------- */
.oasis-team-lead__head h2 { margin-top: 0.35rem; max-width: 22ch; }
.oasis-team-lead__head .oasis-lede { margin-top: 1.1rem; max-width: 54ch; }
.oasis-team-lead__profiles { margin-top: clamp(2rem, 4.5vw, 3.25rem); }

.oasis-team-lead__list { margin-top: clamp(2.25rem, 5vw, 3.5rem); }
.oasis-team-lead__item + .oasis-team-lead__item { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
.oasis-team-lead__lead {
	margin: 0 0 0.5rem;
	font-size: clamp(1.16rem, 1.02rem + 0.5vw, 1.42rem);
	line-height: 1.28;
	color: var(--oasis-green-deep);
	position: relative;
	padding-left: 1.05rem;
}
.oasis-team-lead__lead::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 2px;
	height: 0.92em;
	border-radius: 1px;
	background: var(--oasis-green-leaf);
}
.oasis-team-lead__item p {
	margin: 0;
	padding-left: 1.05rem;
	color: var(--oasis-ink-soft);
	font-size: var(--oasis-fs-sm);
	line-height: 1.62;
	max-width: 46ch;
}

.oasis-team-lead__status {
	margin-top: clamp(2.5rem, 5vw, 3.75rem);
	padding-top: clamp(1.5rem, 3vw, 2.1rem);
	border-top: 1px solid var(--oasis-rule);
	max-width: 62ch;
}
.oasis-team-lead__status-lead {
	margin: 0 0 0.55rem;
	font-size: var(--oasis-fs-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--oasis-green-leaf);
}
.oasis-team-lead__status-body {
	margin: 0;
	font-size: var(--oasis-fs-sm);
	line-height: 1.66;
	color: var(--oasis-ink-soft);
}

@media (min-width: 880px) {
	.oasis-team-lead__list {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: clamp(2rem, 4.5vw, 3.5rem);
		row-gap: clamp(2rem, 4vw, 3rem);
	}
	.oasis-team-lead__item + .oasis-team-lead__item { margin-top: 0; }
	.oasis-team-lead__item p { max-width: 38ch; }
}
.oasis-team-profile + .oasis-team-profile {
	margin-top: clamp(2.75rem, 5vw, 4rem);
	padding-top: clamp(2.75rem, 5vw, 4rem);
	border-top: 1px solid var(--oasis-rule);
}

.oasis-team-profile__name {
	margin: 0;
	font-size: clamp(2rem, 1.5rem + 2.1vw, 3rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--oasis-green-deep);
}
.oasis-team-profile__role {
	margin: 0.7rem 0 0;
	font-family: var(--oasis-font-body);
	font-size: clamp(1rem, 0.9rem + 0.42vw, 1.22rem);
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	line-height: 1.35;
	color: var(--oasis-green-deep);
}

.oasis-team-profile__body {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	color: var(--oasis-ink-soft);
	max-width: 54ch;
}
/* The explanation of the status prefix lives in the ASIDE, beside the
   photo state, not at the foot of the biography. Two reasons: it keeps
   the biography as clean prose, and it fills the column that would
   otherwise be half empty on a profile with no portrait. */
.oasis-team-profile__why {
	margin: clamp(1.5rem, 2.6vw, 2rem) 0 0;
	padding-left: 1.05rem;
	border-left: 2px solid var(--oasis-green-leaf);
	font-size: var(--oasis-fs-sm);
	line-height: 1.62;
	color: var(--oasis-sage);
}
.oasis-team-profile__why strong { color: var(--oasis-green-deep); }

/* The designed no-photo state. The space a portrait would occupy says
   why there is not one — which is the strongest thing available to put
   there, and makes the same argument as the rest of the page. */
.oasis-team-profile__nophoto {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--oasis-mint);
	border-radius: var(--oasis-radius-held-tr);
	padding: clamp(1.35rem, 2.6vw, 1.85rem) clamp(1.35rem, 2.6vw, 1.85rem) clamp(1.5rem, 2.8vw, 2rem);
}
.oasis-team-profile__nophoto-label {
	margin: 0 0 0.6rem;
	font-size: var(--oasis-fs-xs);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--oasis-sage);
}
.oasis-team-profile__nophoto-text {
	margin: 0;
	font-size: var(--oasis-fs-sm);
	line-height: 1.62;
	color: var(--oasis-ink-soft);
}

.oasis-team-profile__figure { margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; }
.oasis-team-profile__figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--oasis-radius-held-tr);
}

@media (min-width: 900px) {
	.oasis-team-profile {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.66fr);
		column-gap: clamp(2.5rem, 6vw, 5rem);
	}
	.oasis-team-profile__id { grid-column: 1 / -1; }
	.oasis-team-profile__body { grid-column: 1; }
	.oasis-team-profile__aside { grid-column: 2; align-self: start; }
}

/* --------------------------------------------------------------------------
   6. The team being built.

      Two roles set as type and one hairline — not two job-advert cards.
      The status line sits ABOVE the title so it is read first: nothing
      here may imply a post is filled (COMPLIANCE_RULES §7.3).
   -------------------------------------------------------------------------- */
.oasis-team-shape__head { max-width: var(--oasis-w-wide); }
.oasis-team-shape__head h2 { margin-top: 0.35rem; max-width: 22ch; }
.oasis-team-shape__head .oasis-lede { margin-top: 1.1rem; max-width: 50ch; }

.oasis-team-shape__roles {
	margin-top: clamp(2.25rem, 5vw, 3.5rem);
	padding-top: clamp(1.75rem, 3.5vw, 2.5rem);
	border-top: 1px solid var(--oasis-rule);
}
.oasis-team-role + .oasis-team-role { margin-top: clamp(2rem, 4vw, 2.75rem); }
.oasis-team-role__status {
	margin: 0 0 0.55rem;
	font-size: var(--oasis-fs-xs);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--oasis-sage);
}
.oasis-team-role__title {
	margin: 0;
	font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.25rem);
	line-height: 1.12;
	letter-spacing: -0.017em;
	color: var(--oasis-green-deep);
}
.oasis-team-role__text {
	margin: 0.85rem 0 0;
	color: var(--oasis-ink-soft);
	max-width: 44ch;
}

/* Three roles since 6 September 2026, not two. The columns are driven
   by `auto-fit` on a min track rather than a fixed `repeat(2)`: with a
   fixed two-column rule the third role wrapped underneath the first and
   sat inside its neighbour's text. Auto-fit gives 3-up on a wide
   screen, 2-up in the middle and 1-up narrow, and it will keep working
   if a fourth role is ever advertised.

   The dividing hairline is drawn as a column gap rule on every item
   except the first IN EACH ROW, so a wrapped row never begins with an
   orphan vertical line. */
@media (min-width: 840px) {
	.oasis-team-shape__roles {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
		column-gap: clamp(1.75rem, 4vw, 3.25rem);
		row-gap: clamp(2rem, 4vw, 2.75rem);
	}
	.oasis-team-role + .oasis-team-role {
		margin-top: 0;
		padding-left: clamp(1.75rem, 4vw, 3.25rem);
		margin-left: calc(-1 * clamp(1.75rem, 4vw, 3.25rem));
		border-left: 1px solid var(--oasis-rule);
	}
	.oasis-team-role__text { max-width: 36ch; }
}

.oasis-team-shape__model {
	margin-top: clamp(2.5rem, 5vw, 3.75rem);
	padding-top: clamp(1.75rem, 3.5vw, 2.5rem);
	border-top: 1px solid var(--oasis-rule);
}
.oasis-team-shape__model-h {
	margin: 0 0 1.1rem;
	font-size: clamp(1.16rem, 1.02rem + 0.5vw, 1.42rem);
	line-height: 1.28;
	color: var(--oasis-green-deep);
}
.oasis-team-shape__model-cols p {
	margin: 0;
	color: var(--oasis-ink-soft);
	font-size: var(--oasis-fs-sm);
	line-height: 1.65;
	/* Capped for the stacked case: below 840px this is a single column in
	   a full-width container and would otherwise run to ~62 characters. */
	max-width: 54ch;
}
.oasis-team-shape__model-cols p + p { margin-top: 1rem; }
.oasis-team-shape__model-note {
	margin: 1.5rem 0 0;
	font-family: var(--oasis-font-display);
	font-size: clamp(1.08rem, 0.98rem + 0.42vw, 1.3rem);
	line-height: 1.45;
	color: var(--oasis-sage);
	max-width: 50ch;
}

@media (min-width: 840px) {
	.oasis-team-shape__model-cols {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: clamp(2.5rem, 6vw, 5rem);
	}
	.oasis-team-shape__model-cols p + p { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   7. What we will look for.

      Four things in a narrow measure with the leads in display italic —
      a treatment used nowhere else on the site — so the section reads as
      somebody being straight with you rather than as a values grid.
   -------------------------------------------------------------------------- */
.oasis-team-look__head h2 {
	margin-top: 0.35rem;
	max-width: 21ch;
	text-wrap: balance;
}
.oasis-team-look__list { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
.oasis-team-look__item + .oasis-team-look__item { margin-top: clamp(1.6rem, 3vw, 2.25rem); }
.oasis-team-look__item h3 {
	margin: 0 0 0.45rem;
	font-style: italic;
	font-synthesis: none;
	font-size: clamp(1.18rem, 1.04rem + 0.55vw, 1.5rem);
	line-height: 1.26;
	color: var(--oasis-green-deep);
}
.oasis-team-look__item p {
	margin: 0;
	color: var(--oasis-ink-soft);
	font-size: var(--oasis-fs-sm);
	line-height: 1.65;
	max-width: 50ch;
}
/* The supporting prose sits with the heading, in the LEFT column. The
   first build left that column empty below the H2 and the section read
   as a heading floating beside a list; balancing the two columns is
   what makes it read as one piece of writing. */
.oasis-team-look__intro {
	margin-top: 1.2rem;
	color: var(--oasis-ink-soft);
	max-width: 42ch;
}
.oasis-team-look__safer {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	padding-top: clamp(1.35rem, 2.6vw, 1.85rem);
	border-top: 1px solid var(--oasis-rule);
	font-size: var(--oasis-fs-sm);
	line-height: 1.65;
	color: var(--oasis-sage);
	max-width: 46ch;
}

@media (min-width: 960px) {
	.oasis-team-look__inner {
		display: grid;
		grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
		column-gap: clamp(3rem, 7vw, 6rem);
		align-items: start;
	}
	.oasis-team-look__head { grid-column: 1; }
	.oasis-team-look__list { grid-column: 2; grid-row: 1; margin-top: 0.35rem; }
}

/* --------------------------------------------------------------------------
   8. Supervision and development.

      Arranged by cadence rather than as a list of provisions, because
      the page's subject is consistency and a rhythm is the honest way to
      show it. No rules between rows — whitespace does the separating,
      and the page's own mark does the marking.
   -------------------------------------------------------------------------- */
.oasis-team-support__head h2 { margin-top: 0.35rem; max-width: 20ch; }
.oasis-team-support__list { margin-top: clamp(2rem, 4vw, 3rem); }
.oasis-team-support__item + .oasis-team-support__item { margin-top: clamp(1.85rem, 3.5vw, 2.75rem); }
.oasis-team-support__when {
	margin: 0 0 0.6rem;
	font-style: italic;
	font-synthesis: none;
	font-size: clamp(1.14rem, 1.02rem + 0.46vw, 1.4rem);
	line-height: 1.28;
	color: var(--oasis-green-deep);
	position: relative;
	padding-left: 1.05rem;
}
.oasis-team-support__when::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 2px;
	height: 0.92em;
	border-radius: 1px;
	background: var(--oasis-green-leaf);
}
.oasis-team-support__item p {
	margin: 0;
	padding-left: 1.05rem;
	color: var(--oasis-ink-soft);
	font-size: var(--oasis-fs-sm);
	line-height: 1.65;
	max-width: 58ch;
}
.oasis-team-support__close {
	margin: clamp(2.25rem, 4.5vw, 3.25rem) 0 0;
	padding-top: clamp(1.5rem, 3vw, 2rem);
	border-top: 1px solid var(--oasis-rule);
	font-family: var(--oasis-font-display);
	font-size: clamp(1.14rem, 1rem + 0.6vw, 1.5rem);
	line-height: 1.45;
	color: var(--oasis-green-deep);
	max-width: 54ch;
}

@media (min-width: 900px) {
	.oasis-team-support__item {
		display: grid;
		grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
		column-gap: clamp(2rem, 5vw, 4rem);
		align-items: start;
	}
	.oasis-team-support__when { margin-bottom: 0; }
	.oasis-team-support__item p { padding-left: 0; }
}

/* --------------------------------------------------------------------------
   9. Join, and what to read next.
   -------------------------------------------------------------------------- */
.oasis-team-join__lead h2 { margin-top: 0.35rem; max-width: 20ch; text-wrap: balance; }
.oasis-team-join__para {
	margin-top: 1.1rem;
	color: var(--oasis-ink-soft);
	max-width: 46ch;
}
.oasis-team-join__link { margin-top: clamp(1.5rem, 3vw, 2rem); }

.oasis-team-join__next { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.oasis-team-next__routes { border-top: 1px solid var(--oasis-rule); }
.oasis-team-next__routes a {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 0.75rem 1.5rem;
	padding: clamp(1.1rem, 2.2vw, 1.5rem) 0;
	border-bottom: 1px solid var(--oasis-rule);
	text-decoration: none;
	color: var(--oasis-ink);
}
.oasis-team-next__label {
	font-family: var(--oasis-font-display);
	font-size: clamp(1.22rem, 1.06rem + 0.65vw, 1.6rem);
	line-height: 1.2;
	color: var(--oasis-green-deep);
	transition: color var(--oasis-dur-micro) var(--oasis-ease-soft);
}
.oasis-team-next__desc {
	grid-column: 1;
	font-size: var(--oasis-fs-sm);
	line-height: 1.55;
	color: var(--oasis-sage);
	max-width: 52ch;
}
.oasis-team-next__routes a .oasis-arc-arrow {
	grid-column: 2;
	grid-row: 1;
	width: 1.5rem;
	height: auto;
	color: var(--oasis-green-leaf);
	transition: transform var(--oasis-dur-short) var(--oasis-ease-out);
}
.oasis-team-next__routes a:hover .oasis-arc-arrow,
.oasis-team-next__routes a:focus-visible .oasis-arc-arrow { transform: translateX(5px); }
.oasis-team-next__routes a:hover .oasis-team-next__label { color: var(--oasis-green-leaf); }

.oasis-team-join__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.9rem 1.5rem;
	margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}
.oasis-team-join__cta-label {
	font-family: var(--oasis-font-display);
	font-size: clamp(1.08rem, 1rem + 0.35vw, 1.28rem);
	color: var(--oasis-sage);
}

@media (min-width: 960px) {
	.oasis-team-join__inner {
		display: grid;
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
		column-gap: clamp(3rem, 7vw, 6rem);
		align-items: start;
	}
	/* Zero, not a nudge: the two eyebrows are on the same optical line and
	   any offset reads as a mistake at this scale. */
	.oasis-team-join__next { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   10. Narrow widths.

       The risk on a page with no photographs is that mobile becomes an
       unbroken column of prose. The counter is pacing: the figure keeps
       its full height, the role titles and the deep-green panel stay
       large, and the axis labels stack rather than shrink to nothing.
   -------------------------------------------------------------------------- */
@media (max-width: 599px) {
	.oasis-team-open__l1 { font-size: clamp(1.32rem, 1.05rem + 1.4vw, 1.6rem); }
	.oasis-team-rhythm { height: 4.75rem; }
	.oasis-team-rhythm > span { margin-left: calc((var(--g) - 1) * 0.24rem); }

	.oasis-team-figure__axis {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0.4rem;
	}
	.oasis-team-figure__axis-b { text-align: left; }

	.oasis-team-cont__lead,
	.oasis-team-cont__item p,
	.oasis-team-support__when,
	.oasis-team-support__item p { padding-left: 0.9rem; }

	.oasis-team-join__cta { gap: 0.75rem; }
	.oasis-team-join__cta-label { flex-basis: 100%; }
}

@media (max-width: 400px) {
	/* Below this the strokes start to collide; fewer, wider gaps read
	   better than a solid green block. */
	.oasis-team-rhythm { height: 4.25rem; }
	.oasis-team-rhythm > span:nth-child(2n) { display: none; }
	.oasis-team-rhythm > span { margin-left: calc((var(--g) - 1) * 0.3rem); }
	.oasis-team-rhythm--mini > span:nth-child(2n) { display: flex; }
}