/* ==========================================================================
   Contact Us — page stylesheet
   Loaded only on /contact/ (inc/enqueue.php slug map).

   Composes with base.css and restates nothing from it.

   THE SIGNATURE IS AN OPENING. One hairline runs across the page and
   parts in the middle, its two halves dissolving toward the gap, with
   the email and telephone sitting in the gap at display scale.

   Every other device on this site closes something — About brackets,
   Who converges, Safeguarding layers, Referrals draws a threshold,
   Vacancies contains one sentence inside another. This is the only mark
   that opens, which is exactly what the page is for.

   This is also the ONLY page on the site with no deep-green field. That
   absence is deliberate: eleven dense pages come before it, the brief
   is a release of that density, and a page that does not raise its
   voice anywhere is the honest way to end.

   Sections
     1. Opening
     2. THE SIGNATURE — the opening mark and the contact details
     3. Routes
     4. Where we are up to
     5. Narrow widths
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Opening. Short on purpose — email and telephone have to be visible
      without scrolling past an essay, and that is the one thing this
      page must get right.
   -------------------------------------------------------------------------- */
.oasis-con-open__inner {
	max-width: var(--oasis-w-wide);
	text-align: center;
	margin-inline: auto;
}
.oasis-con-open .oasis-eyebrow { justify-content: center; }
.oasis-con-open h1 {
	margin-top: 0.4rem;
	max-width: 16ch;
	margin-inline: auto;
	text-wrap: balance;
}
.oasis-con-open__lede {
	margin: clamp(1.1rem, 2.2vw, 1.6rem) auto 0;
	font-family: var(--oasis-font-display);
	font-size: clamp(1.2rem, 1rem + 0.9vw, 1.65rem);
	line-height: 1.42;
	letter-spacing: -0.011em;
	color: var(--oasis-sage);
	max-width: 42ch;
}

.oasis-con-open__who {
	margin: clamp(2rem, 4vw, 3rem) auto 0;
	font-size: var(--oasis-fs-sm);
	line-height: 1.65;
	color: var(--oasis-sage);
	max-width: 56ch;
	text-align: center;
}

/* --------------------------------------------------------------------------
   2. THE SIGNATURE — the opening mark.

      Three columns: rule, details, rule. Each rule is a 1px gradient
      that is strongest at the outer edge and dissolves toward the
      centre, so the line reads as PARTING rather than as broken.
   -------------------------------------------------------------------------- */
.oasis-con-mark {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	column-gap: clamp(1.5rem, 4vw, 3.5rem);
	margin-top: clamp(2.5rem, 5.5vw, 4.5rem);
	max-width: var(--oasis-w-wide);
	margin-inline: auto;
}
/* Each rule holds full strength at its OUTER edge and dissolves toward
   the centre. The first build faded both ends of both rules, which
   rendered two short dashes floating in the middle of their columns —
   the line has to reach the edge of the page for the gap to read as an
   opening rather than as a mistake. */
.oasis-con-mark__rule { height: 1px; min-width: 0; }
.oasis-con-mark__rule--a {
	background: linear-gradient(
		to right,
		var(--oasis-rule-strong) 0%,
		var(--oasis-rule-strong) 30%,
		transparent 100%
	);
}
.oasis-con-mark__rule--b {
	background: linear-gradient(
		to left,
		var(--oasis-rule-strong) 0%,
		var(--oasis-rule-strong) 30%,
		transparent 100%
	);
}

.oasis-con-mark__details { text-align: center; }

/* Email and telephone as the page's largest typographic objects. Both
   stay real links — a decorative telephone number would be useless to
   the phone the visitor is probably holding. */
.oasis-con-mark .oasis-contact-details__email,
.oasis-con-mark .oasis-contact-details__phone { margin: 0; }
.oasis-con-mark .oasis-contact-details__phone { margin-top: 0.5rem; }

.oasis-con-mark .oasis-contact-details a {
	display: inline-block;
	padding-block: 0.4rem;
	font-family: var(--oasis-font-display);
	line-height: 1.24;
	color: var(--oasis-green-deep);
	text-decoration: none;
	/* anywhere, not break-word: the address has no spaces and must not
	   be allowed to push the page sideways at 320px */
	overflow-wrap: anywhere;
	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-con-mark .oasis-contact-details__email a {
	font-size: clamp(1.32rem, 0.98rem + 1.4vw, 2.15rem);
	letter-spacing: -0.015em;
}
.oasis-con-mark .oasis-contact-details__phone a {
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.15rem);
	letter-spacing: -0.012em;
}

/* ONE LINE from 900px up.
   Stacked, the rule passed through the vertical midpoint of a two-line
   block and read as a strike-through separating the email from the
   telephone — the exact opposite of an opening. Side by side, the rule
   opens around a single horizontal object, which is what the device
   needs. Below 900px they stack and the rules move above and below. */
@media (min-width: 900px) {
	.oasis-con-mark .oasis-contact-details {
		display: flex;
		align-items: baseline;
		justify-content: center;
		gap: clamp(1.75rem, 3.5vw, 3rem);
	}
	.oasis-con-mark .oasis-contact-details__phone { margin-top: 0; }
}
.oasis-con-mark .oasis-contact-details a:hover,
.oasis-con-mark .oasis-contact-details a:focus-visible { background-size: 100% 1.5px; }

/* --------------------------------------------------------------------------
   3. Routes.

      Not a switchboard and not four cards. One small team, one inbox —
      so these are pointers to the page that already answers the
      question, framed as saving the reader a step.
   -------------------------------------------------------------------------- */
.oasis-con-routes__head { max-width: var(--oasis-w-wide); }
.oasis-con-routes__head h2 { margin-top: 0.35rem; max-width: 26ch; text-wrap: balance; }

.oasis-con-routes__list {
	margin-top: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid var(--oasis-rule-strong);
}
.oasis-con-route {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: 0.5rem;
	padding: clamp(1.35rem, 2.6vw, 1.9rem) 0;
	border-bottom: 1px solid var(--oasis-rule);
	text-decoration: none;
	color: var(--oasis-ink);
}
.oasis-con-route__label {
	font-family: var(--oasis-font-display);
	font-size: clamp(1.22rem, 1.04rem + 0.8vw, 1.7rem);
	line-height: 1.24;
	letter-spacing: -0.014em;
	color: var(--oasis-green-deep);
	transition: color var(--oasis-dur-micro) var(--oasis-ease-soft);
}
.oasis-con-route__text {
	font-size: var(--oasis-fs-sm);
	line-height: 1.62;
	color: var(--oasis-ink-soft);
	max-width: 60ch;
}
.oasis-con-route__to {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
}
.oasis-con-route__to-label {
	font-size: var(--oasis-fs-xs);
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--oasis-green-leaf);
	background-image: linear-gradient(var(--oasis-green-leaf), var(--oasis-green-leaf));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 1px;
	padding-bottom: 3px;
	transition: background-size var(--oasis-dur-short) var(--oasis-ease-out);
}
.oasis-con-route .oasis-arc-arrow {
	width: 1.3rem;
	height: auto;
	flex: none;
	color: var(--oasis-green-leaf);
	transition: transform var(--oasis-dur-short) var(--oasis-ease-out);
}
.oasis-con-route:hover .oasis-con-route__label,
.oasis-con-route:focus-visible .oasis-con-route__label { color: var(--oasis-green-leaf); }
.oasis-con-route:hover .oasis-con-route__to-label,
.oasis-con-route:focus-visible .oasis-con-route__to-label { background-size: 100% 1px; }
.oasis-con-route:hover .oasis-arc-arrow,
.oasis-con-route:focus-visible .oasis-arc-arrow { transform: translateX(5px); }

@media (min-width: 860px) {
	.oasis-con-route {
		/* 18rem so "Resources / Professionals" holds one line; at 16rem
		   it wrapped and its arrow dropped out of the column the other
		   three sit in. */
		grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
		column-gap: clamp(2rem, 5vw, 4rem);
		align-items: start;
		row-gap: 0.5rem;
	}
	.oasis-con-route__label { grid-column: 1; }
	.oasis-con-route__text { grid-column: 1; }
	.oasis-con-route__to {
		grid-column: 2;
		grid-row: 1 / span 2;
		justify-content: flex-end;
		align-self: start;
		padding-top: 0.4rem;
	}
	.oasis-con-route__to-label { text-align: right; }
}

.oasis-con-routes__foot { margin-top: clamp(2rem, 4vw, 3rem); }
.oasis-con-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: 54ch;
}
.oasis-con-privacy strong { color: var(--oasis-green-deep); }
.oasis-con-routes__cta { margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0; }

@media (min-width: 900px) {
	.oasis-con-routes__foot {
		display: grid;
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		column-gap: clamp(2.5rem, 6vw, 5rem);
		align-items: center;
	}
	.oasis-con-routes__cta { margin-top: 0; justify-self: start; }
}

/* --------------------------------------------------------------------------
   4. Where we are up to.

      COMPLIANCE_RULES §9.4 requires the space a map would occupy to go
      to the approved statement and the professional routes. This is
      that space. The ofsted-notice partial keeps its own mint card,
      which on parchment reads as the one held object on the page.
   -------------------------------------------------------------------------- */
.oasis-con-stand__head h2 { margin-top: 0.35rem; max-width: 20ch; text-wrap: balance; }
.oasis-con-stand__body { margin-top: clamp(1.5rem, 3vw, 2rem); }
.oasis-con-stand__conf {
	margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
	color: var(--oasis-ink-soft);
	max-width: 58ch;
}
.oasis-con-stand__conf > p:first-child { margin-top: 0; }

@media (min-width: 900px) {
	.oasis-con-stand__inner {
		display: grid;
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
		column-gap: clamp(3rem, 7vw, 6rem);
		align-items: start;
	}
	.oasis-con-stand__body { margin-top: 0.35rem; }
}

/* --------------------------------------------------------------------------
   5. Narrow widths.

      Many visitors will reach this page on the phone they are about to
      ring from, so this is the width that matters most. The mark stacks
      rather than compressing: the rules become full-width lines above
      and below the details, each still dissolving toward them, so the
      opening survives the change of axis.
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
	.oasis-con-mark {
		grid-template-columns: minmax(0, 1fr);
		row-gap: clamp(1.5rem, 5vw, 2.25rem);
	}
	/* Stacked, the rules run the full width and fade toward the details
	   from both sides — the opening survives the change of axis. */
	.oasis-con-mark__rule--a,
	.oasis-con-mark__rule--b {
		background: linear-gradient(to right, transparent, var(--oasis-rule-strong) 50%, transparent);
	}
	.oasis-con-mark .oasis-contact-details__phone { margin-top: 0.75rem; }
}

@media (max-width: 599px) {
	.oasis-con-open h1 { max-width: none; }
	.oasis-con-open__lede { max-width: 34ch; }
	.oasis-con-route { padding-block: 1.25rem; }
	.oasis-con-routes__cta > .oasis-btn { width: 100%; justify-content: center; }
}

@media (max-width: 380px) {
	/* At this width the email is the constraint, not the heading. */
	.oasis-con-mark .oasis-contact-details__email a { font-size: 1.2rem; }
	.oasis-con-mark .oasis-contact-details__phone a { font-size: 1.55rem; }
}