/* ==========================================================================
   Vacancies / Join Our Team — page stylesheet
   Loaded only on /vacancies/ (inc/enqueue.php slug map).

   Composes with base.css and restates nothing from it.

   THE SIGNATURE IS A SHARED SENTENCE. One stem is set once and the
   three roles complete it; each completion repeats the one above it
   word for word and then continues, in a second colour. The distinction
   between the roles is therefore DEPTH, not height — which is why there
   is no ladder, staircase, tier, progress bar or chart anywhere in this
   file.

   Nothing on this page is boxed, filled or elevated. Two bordered
   columns with a title, a figure and a feature list is a pricing table,
   and a children's home must not look like a SaaS plan comparison.

   Sections
     1. Opening
     2. The work (the one dark field, placed early)
     2b. Priority vacancy — Deputy Manager
     3. THE SIGNATURE MOMENT — the shared sentence and the three roles
     4. The designed zero state
     5. What we look for — the balances
     6. What you would get
     7. How to apply
     8. Narrow widths
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Opening. One sentence, and it is a filter: it tells the wrong
      candidate this is not a job won on a CV, and the right one — who
      may have no residential experience at all — that they are welcome.
   -------------------------------------------------------------------------- */
.oasis-vac-open__inner { max-width: var(--oasis-w-wide); }
.oasis-vac-open h1 {
	margin-top: 0.4rem;
	max-width: 19ch;
	text-wrap: balance;
}

.oasis-vac-open__body { margin-top: clamp(2rem, 4vw, 3rem); }
.oasis-vac-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: 28ch;
}
.oasis-vac-open__paras { color: var(--oasis-ink-soft); max-width: 54ch; }

@media (min-width: 900px) {
	.oasis-vac-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-vac-open__paras { margin-top: 0.45rem; }
}

/* --------------------------------------------------------------------------
   2. The work — the page's one deep-green field, placed EARLY.

      Every other page on the site saves its dark band for authority at
      the end. Here the weight belongs at the front: a candidate should
      feel what the job actually is before they read what it pays.
   -------------------------------------------------------------------------- */
.oasis-vac-work__lead h2 { margin-top: 0.35rem; max-width: 18ch; text-wrap: balance; }
.oasis-vac-work__body { color: rgba(255, 255, 255, 0.84); max-width: 56ch; }
.oasis-vac-work__line {
	margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
	padding-top: clamp(1.35rem, 2.6vw, 1.85rem);
	border-top: 1px solid rgba(255, 255, 255, 0.24);
	font-family: var(--oasis-font-display);
	font-size: clamp(1.3rem, 1.06rem + 1.05vw, 1.95rem);
	line-height: 1.34;
	letter-spacing: -0.012em;
	color: #fff;
	max-width: 30ch;
}

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

/* --------------------------------------------------------------------------
   2b. PRIORITY VACANCY — Deputy Manager.

      Added 6 September 2026. The client asked for this role to read as
      a leadership and culture appointment, not a job listing, built
      around one sentence.

      Its prominence is made of AIR AND SCALE, nothing else. There is no
      card, no border, no fill, no shadow, no "featured" badge, no
      accent bar and no urgency device — every one of those would be the
      first boxed component on a page whose whole argument is that these
      roles are not products in a comparison table.

      The quote is the only place on this page set at hero scale, and it
      turns colour on its second sentence, which is the sentence that
      matters. That turn is the same deep-green → leaf-green move the
      stem uses below, so the emphasis reads as this site's, not as a
      highlight pen.
   -------------------------------------------------------------------------- */
.oasis-vac-priority__inner { max-width: var(--oasis-w-wide); }

.oasis-vac-priority__title {
	margin: 0.35rem 0 0;
	font-size: clamp(1.9rem, 1.45rem + 1.9vw, 2.9rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--oasis-green-deep);
}

.oasis-vac-priority__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.55rem 0.85rem;
	margin: 0.9rem 0 0;
	font-size: var(--oasis-fs-xs);
	letter-spacing: 0.11em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
	color: var(--oasis-sage);
}
/* A hairline separator rather than a bullet or a pipe character, so the
   two facts read as one line rather than a list.

   IT DOES NOT SURVIVE WRAPPING, and CSS cannot ask whether an item is
   first on its line. Left to `flex-wrap` alone the second item kept its
   rule and its indent after wrapping, which puts a stray vertical stroke
   in the left margin at the start of its own line — visible at 320, 360
   and 390. So the two states are declared explicitly rather than left to
   chance: stacked with no rule below 720px, joined by the rule above it.
   The wider breakpoint accommodates the newly approved salary and hours
   without leaving a separator stranded at the start of a wrapped line. */
.oasis-vac-priority__meta {
	flex-direction: column;
	align-items: flex-start;
}

@media (min-width: 720px) {
	.oasis-vac-priority__meta { flex-direction: row; align-items: baseline; }
	.oasis-vac-priority__meta-item + .oasis-vac-priority__meta-item {
		padding-left: 0.85rem;
		border-left: 1px solid var(--oasis-rule-strong);
	}
}

.oasis-vac-priority__quote {
	margin: clamp(2rem, 4.5vw, 3.25rem) 0 0;
	padding: 0;
	border: 0;
	max-width: 30ch;
}
.oasis-vac-priority__quote p {
	margin: 0;
	font-family: var(--oasis-font-display);
	font-size: clamp(1.5rem, 1.08rem + 1.75vw, 2.62rem);
	line-height: 1.16;
	letter-spacing: -0.021em;
	color: var(--oasis-green-deep);
	text-wrap: balance;
}
.oasis-vac-priority__quote-turn {
	margin-top: 0.42em !important;
	color: var(--oasis-green-leaf);
}

.oasis-vac-priority__body {
	margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0;
	color: var(--oasis-ink-soft);
	font-size: var(--oasis-fs-sm);
	line-height: 1.66;
	max-width: 54ch;
}

.oasis-vac-priority__cta { margin: clamp(1.5rem, 3vw, 2.1rem) 0 0; }

@media (min-width: 960px) {
	/* The quote holds the left column at full scale; the supporting
	   paragraph and the CTA sit beside it in one block, so the eye
	   lands on the sentence first and finds the explanation second.

	   Every child is placed by AREA, including the CTA. Leaving the CTA
	   to auto-placement put it in a row of its own below the quote,
	   floating a screen away from the paragraph it belongs to. */
	.oasis-vac-priority__inner {
		display: grid;
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		column-gap: clamp(3rem, 6vw, 5rem);
		grid-template-areas:
			"eyebrow eyebrow"
			"title   title"
			"meta    meta"
			"quote   body"
			"quote   cta";
		/* The body row is sized to its own content and the CTA row
		   absorbs whatever height the taller quote column adds, so the
		   link stays tucked under the paragraph it belongs to instead
		   of drifting down beside the quote's last line. */
		grid-template-rows: auto auto auto min-content 1fr;
		align-content: start;
	}
	.oasis-vac-priority__inner > .oasis-eyebrow { grid-area: eyebrow; }
	.oasis-vac-priority__title { grid-area: title; max-width: 24ch; }
	.oasis-vac-priority__meta { grid-area: meta; }
	.oasis-vac-priority__quote { grid-area: quote; }
	.oasis-vac-priority__body { grid-area: body; margin-top: clamp(2rem, 4.5vw, 3.25rem); }
	.oasis-vac-priority__cta { grid-area: cta; align-self: start; }
}

/* --------------------------------------------------------------------------
   3. THE SIGNATURE MOMENT — the shared sentence, and the three roles.

      The stem sits under the section heading, set once. Each role then
      completes it: `lead-a` is the text that role shares with the ones
      above it, `lead-b` is what it carries on top. Because `lead-a` is
      rendered identically every time, the containment is visible rather
      than asserted.

      Three rows since 6 September 2026. The Deputy Manager's completion
      is the longest and therefore the tallest — which is the argument,
      not an accident of copy length, so the measure is NOT widened to
      even the rows up.
   -------------------------------------------------------------------------- */
.oasis-vac-roles__head { max-width: var(--oasis-w-wide); }
.oasis-vac-roles__head h2 { margin-top: 0.35rem; max-width: 24ch; }
/* THE SIGNATURE, as one object. Both completions adjacent, same column,
   same size — the second line begins with the first line's exact words
   and then keeps going in leaf green. The first build put each
   completion inside its own role section, a screen apart, and the
   device depends entirely on seeing the repetition, so it did not
   land. */
.oasis-vac-stem {
	margin-top: clamp(2rem, 4vw, 3rem);
	padding-top: clamp(1.5rem, 3vw, 2.25rem);
	border-top: 1px solid var(--oasis-rule-strong);
}
.oasis-vac-stem__lead {
	margin: 0 0 clamp(1.25rem, 2.5vw, 1.85rem);
	font-size: var(--oasis-fs-sm);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--oasis-sage);
}
.oasis-vac-stem__pair { margin: 0; }
.oasis-vac-stem__row + .oasis-vac-stem__row { margin-top: clamp(1.35rem, 2.6vw, 2rem); }
.oasis-vac-stem__row dt {
	font-size: var(--oasis-fs-xs);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--oasis-sage);
}
.oasis-vac-stem__row dd {
	margin: 0.5rem 0 0;
	font-family: var(--oasis-font-display);
	font-size: clamp(1.4rem, 1.06rem + 1.5vw, 2.35rem);
	line-height: 1.2;
	letter-spacing: -0.017em;
	max-width: 30ch;
}
.oasis-vac-stem__a { color: var(--oasis-green-deep); }
.oasis-vac-stem__b { color: var(--oasis-green-leaf); }

@media (min-width: 860px) {
	/* The label sits in a fixed margin column so BOTH completions start
	   at exactly the same x — without that the repetition is invisible
	   and the whole device fails. */
	.oasis-vac-stem__row {
		display: grid;
		grid-template-columns: 14rem minmax(0, 1fr);
		column-gap: clamp(1.5rem, 3vw, 2.5rem);
		align-items: baseline;
	}
	.oasis-vac-stem__row dd { margin-top: 0; }
}

.oasis-vac-roles__list {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: clamp(2.5rem, 5vw, 4rem);
	border-top: 1px solid var(--oasis-rule);
}

/* One hairline between the roles. No borders, no fills, no elevation —
   the roles are separated by a rule and differentiated by what they
   say, at editorial scale. */
.oasis-vac-role + .oasis-vac-role {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: clamp(2.5rem, 5vw, 4rem);
	border-top: 1px solid var(--oasis-rule);
}

.oasis-vac-role__label {
	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-vac-role__title {
	margin: 0;
	font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.6rem);
	line-height: 1.1;
	letter-spacing: -0.019em;
	color: var(--oasis-green-deep);
}

.oasis-vac-role__intro {
	color: var(--oasis-ink-soft);
	max-width: 54ch;
}
.oasis-vac-role__intro > p:first-child { margin-top: 0; }

/* Particulars. These genuinely ARE comparable facts between the two
   roles, so they are set identically — but small, and below the
   argument, so the page never reads as a price comparison. */
.oasis-vac-parts {
	margin: clamp(1.35rem, 2.6vw, 1.85rem) 0 0;
	padding-top: clamp(1.1rem, 2.2vw, 1.5rem);
	border-top: 1px solid var(--oasis-rule);
}
.oasis-vac-part + .oasis-vac-part { margin-top: 0.85rem; }
.oasis-vac-part dt {
	font-size: var(--oasis-fs-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--oasis-sage);
}
.oasis-vac-part dd {
	margin: 0.25rem 0 0;
	font-family: var(--oasis-font-display);
	font-size: clamp(1.08rem, 1rem + 0.4vw, 1.3rem);
	line-height: 1.35;
	color: var(--oasis-green-deep);
}

/* The Leadership Charter. Five standing commitments, set as display
   lines rather than bullets: the criteria below are things a candidate
   either has or has not, these are promises about how the job is held,
   and they only read as promises if they are not punctuated like
   requirements. The leaf-green tick is the mark this site already uses
   to open a short set of commitments — reused, not reinvented. */
.oasis-vac-role__charter {
	margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
	padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
	border-top: 1px solid var(--oasis-rule);
}
.oasis-vac-role__charter-h {
	margin: 0 0 clamp(1rem, 2vw, 1.35rem);
	font-size: var(--oasis-fs-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--oasis-sage);
}
.oasis-vac-charter { list-style: none; margin: 0; padding: 0; }
.oasis-vac-charter li {
	position: relative;
	padding-left: 1.05rem;
	font-family: var(--oasis-font-display);
	font-size: clamp(1.06rem, 0.98rem + 0.34vw, 1.24rem);
	line-height: 1.34;
	color: var(--oasis-green-deep);
	max-width: 34ch;
}
.oasis-vac-charter li + li { margin-top: 0.6rem; }
.oasis-vac-charter li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.42em;
	width: 2px;
	height: 0.86em;
	border-radius: 1px;
	background: var(--oasis-green-leaf);
}

.oasis-vac-role__need { margin-top: clamp(1.6rem, 3vw, 2.25rem); }
.oasis-vac-role__need-h {
	margin: 0 0 1rem;
	font-family: var(--oasis-font-body);
	font-size: var(--oasis-fs-xs);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--oasis-sage);
}
.oasis-vac-need { list-style: none; margin: 0; padding: 0; }
.oasis-vac-need li {
	position: relative;
	padding-left: 1.5rem;
	font-size: var(--oasis-fs-sm);
	line-height: 1.62;
	color: var(--oasis-ink-soft);
	max-width: 56ch;
}
.oasis-vac-need li + li { margin-top: 0.7rem; }
/* A short leaf rule, not a bullet, tick or icon. */
.oasis-vac-need li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.72em;
	width: 0.7rem;
	height: 1.5px;
	border-radius: 1px;
	background: var(--oasis-green-leaf);
}
.oasis-vac-role__desirable {
	margin-top: 1.2rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--oasis-rule);
	font-size: var(--oasis-fs-sm);
	line-height: 1.62;
	color: var(--oasis-sage);
	max-width: 56ch;
}
.oasis-vac-role__desirable strong { color: var(--oasis-green-deep); }

/* Free-text detail from a CMS-driven vacancy. The client's separate
   fields are concatenated, so the spacing has to do the separating —
   without it the responsibilities, criteria and benefits ran together
   as one undifferentiated block. */
.oasis-vac-role__detail {
	margin-top: clamp(1.5rem, 3vw, 2rem);
	font-size: var(--oasis-fs-sm);
	line-height: 1.65;
	color: var(--oasis-ink-soft);
	max-width: 60ch;
}
.oasis-vac-role__detail > p { margin-top: 1.35rem; }
.oasis-vac-role__detail > p:first-child { margin-top: 0; }
.oasis-vac-role__detail ul { margin: 0.6rem 0 0; padding-left: 1.15rem; }
.oasis-vac-role__detail li + li { margin-top: 0.35rem; }
.oasis-vac-role__detail strong { color: var(--oasis-green-deep); }

@media (min-width: 940px) {
	.oasis-vac-role {
		display: grid;
		grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
		column-gap: clamp(3rem, 7vw, 5.5rem);
		align-items: start;
	}
	/* No sticky head. With the particulars now in this column its
	   height varies, and a sticky element whose height approaches the
	   viewport behaves badly on the way past. */
	.oasis-vac-role__body { margin-top: 0.35rem; }
}

/* --------------------------------------------------------------------------
   4. The designed zero state.

      Reached only once vacancy records exist and none is open. Not "No
      jobs found", and no promise that something will open.
   -------------------------------------------------------------------------- */
.oasis-vac-none {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	padding-top: clamp(1.6rem, 3vw, 2.25rem);
	border-top: 1px solid var(--oasis-rule-strong);
	color: var(--oasis-ink-soft);
	max-width: 58ch;
}
.oasis-vac-none__lead {
	margin: 0 0 1rem;
	font-family: var(--oasis-font-display);
	font-size: clamp(1.3rem, 1.06rem + 1.05vw, 1.9rem);
	line-height: 1.32;
	letter-spacing: -0.012em;
	color: var(--oasis-green-deep);
	max-width: 24ch;
}

/* --------------------------------------------------------------------------
   5. What we look for — the balances.

      Paired sentences pivoting on a comma, because the source states
      these as balances rather than as qualities. Not six icon cards,
      and not a list of adjectives.
   -------------------------------------------------------------------------- */
.oasis-vac-look__head h2 { margin-top: 0.35rem; max-width: 22ch; text-wrap: balance; }
.oasis-vac-look__list { margin-top: clamp(2rem, 4vw, 3rem); }
.oasis-vac-pair + .oasis-vac-pair {
	margin-top: clamp(1.85rem, 3.5vw, 2.75rem);
	padding-top: clamp(1.85rem, 3.5vw, 2.75rem);
	border-top: 1px solid var(--oasis-rule);
}
.oasis-vac-pair__line {
	margin: 0;
	font-family: var(--oasis-font-display);
	font-size: clamp(1.32rem, 1.06rem + 1.15vw, 2rem);
	line-height: 1.24;
	letter-spacing: -0.015em;
}
.oasis-vac-pair__a { color: var(--oasis-green-deep); }
.oasis-vac-pair__b { color: var(--oasis-sage); font-style: italic; font-synthesis: none; }
.oasis-vac-pair__text {
	margin: 0.7rem 0 0;
	font-size: var(--oasis-fs-sm);
	line-height: 1.65;
	color: var(--oasis-ink-soft);
	max-width: 54ch;
}

@media (min-width: 900px) {
	.oasis-vac-pair {
		display: grid;
		grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
		column-gap: clamp(2.5rem, 6vw, 5rem);
		align-items: start;
	}
	.oasis-vac-pair__text { margin-top: 0.3rem; }
}

/* --------------------------------------------------------------------------
   6. What you would get.
   -------------------------------------------------------------------------- */
.oasis-vac-offer__head h2 { margin-top: 0.35rem; max-width: 20ch; }
.oasis-vac-offer__list { margin-top: clamp(2rem, 4vw, 3rem); }
.oasis-vac-offer__item + .oasis-vac-offer__item { margin-top: clamp(1.6rem, 3vw, 2.25rem); }
.oasis-vac-offer__item h3 {
	margin: 0 0 0.5rem;
	font-size: clamp(1.14rem, 1.02rem + 0.46vw, 1.4rem);
	line-height: 1.28;
	color: var(--oasis-green-deep);
}
.oasis-vac-offer__item p {
	margin: 0;
	font-size: var(--oasis-fs-sm);
	line-height: 1.65;
	color: var(--oasis-ink-soft);
	max-width: 58ch;
}

@media (min-width: 880px) {
	.oasis-vac-offer__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: clamp(2.5rem, 6vw, 5rem);
		row-gap: clamp(1.85rem, 3.5vw, 2.75rem);
	}
	.oasis-vac-offer__item + .oasis-vac-offer__item { margin-top: 0; }
	/* Five items in two columns: the last spans, so the grid never ends
	   on a lonely half-width orphan. */
	.oasis-vac-offer__item:last-child { grid-column: 1 / -1; }
	.oasis-vac-offer__item:last-child p { max-width: 68ch; }
}

/* --------------------------------------------------------------------------
   7. How to apply.

      No form, and no upload control of any kind. The contact details
      come from the global partial and are given real scale, because
      they ARE the application route.
   -------------------------------------------------------------------------- */
.oasis-vac-apply__lead h2 { margin-top: 0.35rem; max-width: 18ch; text-wrap: balance; }
.oasis-vac-apply__para {
	margin-top: 1.1rem;
	color: var(--oasis-ink-soft);
	max-width: 46ch;
}
.oasis-vac-apply .oasis-contact-details {
	margin-top: clamp(1.5rem, 3vw, 2rem);
	padding-top: clamp(1.35rem, 2.6vw, 1.85rem);
	border-top: 1px solid var(--oasis-rule);
}
.oasis-vac-apply .oasis-contact-details a {
	display: inline-block;
	padding-block: 0.32rem;
	font-family: var(--oasis-font-display);
	font-size: clamp(1.24rem, 1.04rem + 0.85vw, 1.72rem);
	line-height: 1.3;
	color: var(--oasis-green-deep);
	text-decoration: none;
	background-image: linear-gradient(var(--oasis-green-leaf), var(--oasis-green-leaf));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 1.5px;
	transition: background-size var(--oasis-dur-short) var(--oasis-ease-out);
}
.oasis-vac-apply .oasis-contact-details a:hover,
.oasis-vac-apply .oasis-contact-details a:focus-visible { background-size: 100% 1.5px; }

.oasis-vac-apply__rolling {
	margin-top: clamp(1.35rem, 2.6vw, 1.85rem);
	font-size: var(--oasis-fs-sm);
	line-height: 1.62;
	color: var(--oasis-sage);
	max-width: 42ch;
}

.oasis-vac-apply__privacy {
	margin: 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-ink-soft);
	max-width: 52ch;
}
.oasis-vac-apply__privacy strong { color: var(--oasis-green-deep); }

.oasis-vac-apply__legal {
	margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
	padding-top: clamp(1.35rem, 2.6vw, 1.85rem);
	border-top: 1px solid var(--oasis-rule);
	max-width: 56ch;
}
.oasis-vac-apply__legal p {
	margin: 0;
	font-size: var(--oasis-fs-xs);
	line-height: 1.7;
	color: var(--oasis-sage);
}
.oasis-vac-apply__legal p + p { margin-top: 0.85rem; }
.oasis-vac-apply__legal strong { color: var(--oasis-ink-soft); }

.oasis-vac-apply__next {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem clamp(1.5rem, 3vw, 2.5rem);
	margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

@media (min-width: 960px) {
	.oasis-vac-apply__inner {
		display: grid;
		grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
		column-gap: clamp(3rem, 7vw, 6rem);
		align-items: start;
	}
	.oasis-vac-apply__side { padding-top: 0.35rem; }
}

/* --------------------------------------------------------------------------
   8. Narrow widths.

      The risk here is a wall of advert copy stacked twice over. The
      counter is that each role leads with a display-scale sentence and
      a short intro before any criteria appear, so a candidate can
      decide which role they are reading for before the detail starts.
   -------------------------------------------------------------------------- */
@media (max-width: 939px) {
	.oasis-vac-role__body { margin-top: clamp(1.5rem, 3vw, 2rem); }
}

@media (max-width: 599px) {
	.oasis-vac-open h1 { max-width: none; }
	.oasis-vac-pair__line { font-size: clamp(1.24rem, 1.02rem + 1.05vw, 1.5rem); }
	.oasis-vac-need li { padding-left: 1.25rem; }
	.oasis-vac-apply__next { gap: 0.85rem; }
	.oasis-vac-apply__next > * { flex-basis: 100%; }
}