@charset "UTF-8";
/* ==========================================================================
   Stone Lodge Therapeutic School — design layer
   --------------------------------------------------------------------------
   Loaded LAST, after theme.css / theme-elements.css / stone-lodge.css /
   skin.css. Those are generated vendor files (Porto) full of hardcoded
   `!important` rules, so ordering here is load-bearing — this file only wins
   because it comes after them. Do not reorder the <link> tags in master.blade.php.

   `!important` is used deliberately below wherever we are overriding a Porto
   rule that already carries it. It is not used anywhere else.

   Contents
     1.  Tokens
     2.  Base & typography
     3.  Prose
     4.  Sections & surfaces
     5.  Buttons
     6.  Cards
     7.  Hero
     8.  Navigation
     9.  Carousels
     10. Footer
     11. Components (stat band, CTA band, document rows, staff, gallery)
     12. Motion & accessibility
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	/* Brand ramp, anchored on the existing #320041 aubergine. */
	--brand-900: #1e0027;
	--brand-800: #280034;
	--brand-700: #320041;   /* BRAND — unchanged */
	--brand-600: #3f0f51;
	--brand-500: #4d1a5e;
	--brand-400: #6b4179;
	--brand-300: #9d7fa8;
	--brand-200: #d9c9df;
	--brand-100: #ece3ef;
	--brand-50:  #f7f3f8;

	/* Accent — the existing --secondary token, now used deliberately
	   rather than as a stray button hover. */
	--accent:       #b38f66;
	--accent-dark:  #8f7050;
	--accent-light: #d8c3a8;

	/* Ink. Porto's body colour is #777, which fails WCAG AA on white. */
	--ink:        #2b2b33;
	--ink-muted:  #5f5f6b;
	--ink-subtle: #86868f;
	--on-brand:        #ffffff;
	--on-brand-muted:  rgba(255, 255, 255, .78);

	--surface:      #ffffff;
	--surface-tint: var(--brand-50);
	--surface-warm: #faf7f3;
	--hairline:     rgba(50, 0, 65, .10);

	--radius-sm: 6px;
	--radius-md: 12px;
	--radius-lg: 20px;
	--radius-xl: 28px;

	--shadow-sm: 0 1px 3px rgba(30, 0, 39, .08), 0 1px 2px rgba(30, 0, 39, .06);
	--shadow-md: 0 4px 16px rgba(30, 0, 39, .10), 0 2px 6px rgba(30, 0, 39, .06);
	--shadow-lg: 0 18px 48px rgba(30, 0, 39, .16), 0 6px 16px rgba(30, 0, 39, .08);
	--shadow-xl: 0 32px 80px rgba(30, 0, 39, .20), 0 12px 28px rgba(30, 0, 39, .10);

	--space-section: clamp(4rem, 8vw, 7.5rem);
	--space-block:   clamp(2rem, 4vw, 3.5rem);

	--font-sans:    "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-display: "Playfair Display", Georgia, "Times New Roman", serif;

	--ease: cubic-bezier(.22, .61, .36, 1);
	--measure: 68ch;

	/* Visual gap between the header and an open dropdown. The hover bridge in
	   section 18 spans exactly this, so the two can never drift apart. */
	--nav-dropdown-gap: 8px;

	/* Porto reads these for button hover/active states. Overriding them here
	   retires the #ceb190 barber-demo tan that shipped with the template. */
	--hover:  var(--brand-500);
	--active: var(--brand-900);

	/* Porto's own four tokens, kept in sync so any vendor rule referencing
	   them lands on the new ramp. */
	--primary:    #320041;
	--secondary:  #b38f66;
	--tertiary:   #2baab1;
	--quaternary: #383f48;
}

/* ==========================================================================
   2. Base & typography
   ========================================================================== */

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--ink);
	background-color: var(--surface);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Porto sets these on .text-N with !important; restore a real scale. */
html body .text-1 { font-size: .78rem !important; }
html body .text-2 { font-size: .875rem !important; }
html body .text-3 { font-size: 1rem !important; line-height: 1.75 !important; }
html body .text-4 { font-size: clamp(1.05rem, .3vw + 1rem, 1.15rem) !important; }
html body .text-5 { font-size: clamp(1.25rem, .6vw + 1.1rem, 1.5rem) !important; }
html body .text-6 { font-size: clamp(1.4rem, 1vw + 1.15rem, 1.85rem) !important; }
html body .text-7 { font-size: clamp(1.65rem, 1.6vw + 1.2rem, 2.35rem) !important; }
html body .text-8 { font-size: clamp(1.9rem, 2.2vw + 1.25rem, 2.75rem) !important; }
html body .text-12 { font-size: clamp(2.75rem, 6vw + 1rem, 5.5rem) !important; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-sans);
	color: var(--brand-700);
	line-height: 1.2;
	letter-spacing: -.02em;
	text-wrap: balance;
}

h1 { font-weight: 700; }
h2 { font-weight: 700; }
h3 { font-weight: 600; letter-spacing: -.015em; }
h4, h5, h6 { font-weight: 600; letter-spacing: -.01em; }

p { text-wrap: pretty; }

/* Porto applies negative-ls-05 to nearly every heading; -0.5px is too tight
   at display sizes and too loose at body sizes. Use a relative value. */
html .negative-ls-05 { letter-spacing: -.02em !important; }

a {
	color: var(--brand-700);
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
	transition: color .2s var(--ease);
}
a:hover  { color: var(--brand-500); }
a:active { color: var(--brand-900); }

::selection { background: var(--brand-700); color: #fff; }

/* Visible focus ring everywhere. The template shipped without one. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.owl-dot:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}

/* Display face, used sparingly for the large brand moments. */
.sl-display {
	font-family: var(--font-display);
	font-weight: 400;
	letter-spacing: -.01em;
}

/* Small caps eyebrow above section headings. */
.sl-eyebrow {
	display: inline-block;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--accent-dark);
	margin-bottom: .85rem;
}
.sl-surface-brand .sl-eyebrow,
.sl-hero .sl-eyebrow { color: var(--accent-light); }

/* Short accent rule under a section heading. */
.sl-rule {
	width: 56px;
	height: 3px;
	border: 0;
	border-radius: 3px;
	background: var(--accent);
	opacity: 1;
	margin: 1.25rem 0 0;
}
.sl-rule--center { margin-left: auto; margin-right: auto; }
.sl-surface-brand .sl-rule { background: var(--accent-light); }

.sl-lead {
	font-size: clamp(1.05rem, .5vw + 1rem, 1.2rem);
	line-height: 1.65;
	color: var(--ink-muted);
	font-weight: 400;
}
.sl-surface-brand .sl-lead { color: var(--on-brand-muted); }

/* ==========================================================================
   3. Prose
   ========================================================================== */

/* The interior pages set every paragraph to font-weight-semibold inside a
   full-width col-lg-12, giving ~140-character lines of bold text. This block
   fixes that for all of them at once, without touching 100+ paragraphs. */

.sl-prose {
	max-width: var(--measure);
	color: var(--ink);
	font-size: 1rem;
	line-height: 1.75;
}
.sl-prose--wide   { max-width: 78ch; }
.sl-prose--center { margin-left: auto; margin-right: auto; }

.sl-prose .font-weight-semibold,
.sl-prose p.font-weight-semibold { font-weight: 400 !important; }

.sl-prose p {
	margin-bottom: 1.35rem;
	color: var(--ink);
}
.sl-prose > :first-child { margin-top: 0; }
.sl-prose > :last-child  { margin-bottom: 0; }

.sl-prose h2 {
	margin-top: 2.75rem;
	margin-bottom: 1rem;
}
.sl-prose h3 {
	margin-top: 2.25rem;
	margin-bottom: .75rem;
	color: var(--brand-600);
}
.sl-prose h2:first-child,
.sl-prose h3:first-child { margin-top: 0; }

.sl-prose ul,
.sl-prose ol {
	margin: 0 0 1.35rem;
	padding-left: 1.35rem;
}
.sl-prose li { margin-bottom: .5rem; }
.sl-prose ul { list-style: none; padding-left: 1.6rem; }
.sl-prose ul > li { position: relative; }
.sl-prose ul > li::before {
	content: "";
	position: absolute;
	left: -1.1rem;
	top: .62em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent);
}

.sl-prose strong { font-weight: 600; color: var(--brand-700); }

.sl-prose a {
	color: var(--brand-700);
	text-decoration: underline;
	text-decoration-color: var(--brand-200);
}
.sl-prose a:hover { text-decoration-color: var(--brand-700); }

.sl-prose blockquote,
.sl-pullquote {
	margin: 2.25rem 0;
	padding: 1.5rem 0 1.5rem 1.75rem;
	border-left: 3px solid var(--accent);
	font-family: var(--font-display);
	font-size: clamp(1.15rem, 1vw + 1rem, 1.45rem);
	line-height: 1.55;
	color: var(--brand-700);
}
.sl-prose blockquote p:last-child { margin-bottom: 0; }

/* ==========================================================================
   4. Sections & surfaces
   ========================================================================== */

.sl-section {
	position: relative;
	padding-block: var(--space-section);
}
.sl-section--tight { padding-block: var(--space-block); }
.sl-section--flush-top    { padding-top: 0; }
.sl-section--flush-bottom { padding-bottom: 0; }

.sl-surface        { background: var(--surface); }
.sl-surface-tint   { background: var(--surface-tint); }
.sl-surface-warm   { background: var(--surface-warm); }

.sl-surface-brand {
	background: linear-gradient(145deg, var(--brand-900) 0%, var(--brand-700) 55%, var(--brand-600) 100%);
	color: var(--on-brand);
}
.sl-surface-brand h1, .sl-surface-brand h2, .sl-surface-brand h3,
.sl-surface-brand h4, .sl-surface-brand h5, .sl-surface-brand h6,
.sl-surface-brand p,  .sl-surface-brand li { color: var(--on-brand); }
.sl-surface-brand p { color: var(--on-brand-muted); }

/* A soft radial highlight so the brand panels read as lit rather than as a
   flat block of colour. */
.sl-surface-brand::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(60% 80% at 15% 0%, rgba(179, 143, 102, .18), transparent 62%),
		radial-gradient(50% 70% at 95% 100%, rgba(157, 127, 168, .22), transparent 60%);
	pointer-events: none;
}
.sl-surface-brand > * { position: relative; z-index: 1; }

/* Replaces the <hr> that currently separates every section. */
.sl-divider {
	height: 1px;
	border: 0;
	background: var(--hairline);
	margin: 0;
	opacity: 1;
}

/* Porto sets section.section { background:#f7f7f7; border-top:5px solid #f1f1f1 }
   which the views then cancel with border-0 m-0 on every instance. */
html section.section.sl-section {
	background: transparent;
	border: 0;
	margin: 0;
}

/* ==========================================================================
   5. Buttons
   ========================================================================== */

/* stone-lodge.css forces .custom-btn-style-1 to #000 background/border with
   !important. Rebuild it as a proper set of variants. */

html .btn.custom-btn-style-1,
html .sl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	font-family: var(--font-sans);
	font-size: .9rem !important;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.2;
	padding: .95rem 1.9rem !important;
	border-radius: 999px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: background-color .22s var(--ease), border-color .22s var(--ease),
	            color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
	will-change: transform;
}

/* Filled — the default. Overrides both the #000 from stone-lodge.css and the
   bg-primary/border-primary utilities the views stack on top of it. */
html .btn.custom-btn-style-1,
html .btn.custom-btn-style-1.bg-primary,
html a.btn.custom-btn-style-1.btn-dark,
html .sl-btn--primary {
	background-color: var(--brand-700) !important;
	border-color: var(--brand-700) !important;
	color: #fff !important;
	box-shadow: var(--shadow-sm);
}
html .btn.custom-btn-style-1:hover,
html .btn.custom-btn-style-1.bg-primary:hover,
html a.btn.custom-btn-style-1.btn-dark:hover,
html .sl-btn--primary:hover {
	background-color: var(--brand-500) !important;
	border-color: var(--brand-500) !important;
	color: #fff !important;
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}
html .btn.custom-btn-style-1:active,
html .sl-btn--primary:active {
	background-color: var(--brand-900) !important;
	border-color: var(--brand-900) !important;
	transform: translateY(0);
	box-shadow: var(--shadow-sm);
}

/* Accent — for the single most important call to action on a page. */
html .sl-btn--accent {
	background-color: var(--accent) !important;
	border-color: var(--accent) !important;
	color: var(--brand-900) !important;
	box-shadow: var(--shadow-sm);
}
html .sl-btn--accent:hover {
	background-color: var(--accent-light) !important;
	border-color: var(--accent-light) !important;
	color: var(--brand-900) !important;
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

/* Outline, for use on photography and brand panels. */
html .sl-btn--outline {
	background-color: transparent !important;
	border-color: rgba(255, 255, 255, .65) !important;
	color: #fff !important;
}
html .sl-btn--outline:hover {
	background-color: #fff !important;
	border-color: #fff !important;
	color: var(--brand-700) !important;
	transform: translateY(-2px);
}

/* Outline on light backgrounds. */
html .sl-btn--outline-dark {
	background-color: transparent !important;
	border-color: var(--brand-200) !important;
	color: var(--brand-700) !important;
}
html .sl-btn--outline-dark:hover {
	background-color: var(--brand-700) !important;
	border-color: var(--brand-700) !important;
	color: #fff !important;
	transform: translateY(-2px);
}

/* Text link with a sliding arrow. */
.sl-link {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-weight: 600;
	font-size: .95rem;
	letter-spacing: .01em;
	color: var(--brand-700);
	text-decoration: none;
}
.sl-link::after {
	content: "→";
	transition: transform .22s var(--ease);
}
.sl-link:hover { color: var(--brand-500); }
.sl-link:hover::after { transform: translateX(4px); }

/* ==========================================================================
   6. Cards
   ========================================================================== */

.sl-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--surface);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.sl-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-lg);
	border-color: transparent;
}

.sl-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--brand-100);
}
.sl-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .55s var(--ease);
}
.sl-card:hover .sl-card__media img { transform: scale(1.06); }

.sl-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 1.75rem;
	gap: .6rem;
}
.sl-card__title {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--brand-700);
	margin: 0;
	letter-spacing: -.015em;
}
.sl-card__text {
	color: var(--ink-muted);
	font-size: .95rem;
	line-height: 1.65;
	margin: 0;
	flex: 1 1 auto;
}
.sl-card__footer { margin-top: 1rem; }

/* Icon badge for cards without photography. */
.sl-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: linear-gradient(140deg, var(--brand-700), var(--brand-500));
	color: #fff;
	font-size: 1.5rem;
	margin-bottom: .35rem;
	box-shadow: var(--shadow-sm);
}
.sl-card__icon i { color: #fff !important; }

/* Whole-card link overlay, so the card is clickable without nesting <a>s. */
.sl-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

/* Framed media, used where a photo previously bled edge-to-edge with no
   treatment at all. */
.sl-frame {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
	background: var(--brand-100);
}
.sl-frame img,
.sl-frame video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sl-frame--tall { aspect-ratio: 4 / 5; }
.sl-frame--wide { aspect-ratio: 16 / 10; }

/* ==========================================================================
   7. Hero
   ========================================================================== */

.sl-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: var(--brand-900);
	isolation: isolate;
}
.sl-hero--home   { min-height: min(88svh, 820px); }
.sl-hero--page   { min-height: min(56svh, 520px); }
.sl-hero--compact{ min-height: min(42svh, 400px); }

.sl-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.sl-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--hero-position, center);
	display: block;
}

/* Two-layer scrim. The brand wash unifies photography shot on different
   phones in different light; the vertical gradient guarantees text contrast.
   Replaces the flat `#212529 @ .4` overlay the template used. */
.sl-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(to top,
			rgba(20, 0, 26, .92) 0%,
			rgba(20, 0, 26, .62) 34%,
			rgba(20, 0, 26, .30) 66%,
			rgba(20, 0, 26, .38) 100%),
		linear-gradient(150deg, rgba(50, 0, 65, .55), rgba(30, 0, 39, .30));
	pointer-events: none;
}

.sl-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-block: clamp(3rem, 7vw, 6rem);
	/* Clear the fixed header. Replaces the hardcoded margin-top:100px that
	   was inlined on every interior page title. */
	padding-top: clamp(7rem, 12vw, 10rem);
	color: #fff;
}
.sl-hero__inner h1,
.sl-hero__inner h2,
.sl-hero__inner p { color: #fff; }

.sl-hero__title {
	font-weight: 700;
	line-height: 1.05;
	margin: 0 0 .75rem;
	text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}

/* The homepage value word (Care / Understanding / Ambition). */
.sl-hero__word {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -.02em;
	margin: 0 0 1.25rem;
	text-shadow: 0 4px 40px rgba(0, 0, 0, .4);
}

.sl-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .9rem;
	margin-top: 1.75rem;
}
.sl-hero--home .sl-hero__actions { justify-content: center; }

/* Breadcrumb on interior heroes. */
.sl-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	font-size: .82rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--on-brand-muted);
}
.sl-breadcrumb a { color: var(--on-brand-muted); text-decoration: none; }
.sl-breadcrumb a:hover { color: #fff; text-decoration: underline; }
.sl-breadcrumb li + li::before {
	content: "/";
	margin-right: .5rem;
	opacity: .5;
}
.sl-breadcrumb [aria-current="page"] { color: #fff; font-weight: 600; }

/* Scroll cue on the homepage hero. */
.sl-hero__cue {
	position: absolute;
	left: 50%;
	bottom: 1.75rem;
	z-index: 3;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, .7);
	font-size: 1.35rem;
	animation: slNudge 2.4s var(--ease) infinite;
}
@keyframes slNudge {
	0%, 100% { transform: translate(-50%, 0); opacity: .55; }
	50%      { transform: translate(-50%, 8px); opacity: 1; }
}

/* ==========================================================================
   8. Navigation
   ========================================================================== */

#header .header-body {
	background: var(--brand-700) !important;
	border: 0 !important;
	transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
}
#header.sl-nav-scrolled .header-body {
	background: rgba(30, 0, 39, .93) !important;
	backdrop-filter: saturate(140%) blur(12px);
	-webkit-backdrop-filter: saturate(140%) blur(12px);
	box-shadow: 0 8px 30px rgba(0, 0, 0, .28) !important;
}

/* Transparent over the hero, solid once scrolled. */
#header.sl-nav-over-hero:not(.sl-nav-scrolled) .header-body {
	background: transparent !important;
	box-shadow: none !important;
}
#header.sl-nav-over-hero:not(.sl-nav-scrolled)::after {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 160px;
	background: linear-gradient(to bottom, rgba(20, 0, 26, .55), transparent);
	pointer-events: none;
	z-index: -1;
}

html #header .navbar-nav .nav-link,
html #header .navbar-nav > .nav-item > .dropdown-item {
	position: relative;
	font-family: var(--font-sans);
	font-size: .92rem !important;
	font-weight: 600;
	letter-spacing: .01em;
	color: rgba(255, 255, 255, .88) !important;
	background: transparent !important;
	padding: .6rem .9rem !important;
	text-decoration: none !important;
	transition: color .2s var(--ease);
}
html #header .navbar-nav .nav-link:hover,
html #header .navbar-nav > .nav-item > .dropdown-item:hover,
html #header .navbar-nav .nav-link.active,
html #header .navbar-nav > .nav-item > .dropdown-item.active {
	color: #fff !important;
}

/* Animated underline replaces the template's `text-decoration-underline`
   active state and gives the links the hover they never had. */
html #header .navbar-nav .nav-link::after,
html #header .navbar-nav > .nav-item > .dropdown-item::after {
	content: "";
	position: absolute;
	left: .9rem;
	right: .9rem;
	bottom: .3rem;
	height: 2px;
	border-radius: 2px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .28s var(--ease);
}
html #header .navbar-nav .nav-link:hover::after,
html #header .navbar-nav > .nav-item > .dropdown-item:hover::after,
html #header .navbar-nav .nav-link.active::after,
html #header .navbar-nav > .nav-item > .dropdown-item.active::after {
	transform: scaleX(1);
}

/* Porto adds a decorative white dot between top-level items
   (stone-lodge.css #header .header-nav-main nav > ul > li > a:before). */
html #header .navbar-nav .dropdown-toggle::before { content: none !important; }

/* Dropdown panels. */
html #header .navbar-nav .dropdown-menu {
	min-width: 15rem;
	padding: .5rem;
	margin-top: .35rem;
	background: #fff;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
}
html #header .navbar-nav .dropdown-menu .dropdown-item {
	padding: .6rem .85rem !important;
	border-radius: var(--radius-sm);
	font-size: .9rem;
	font-weight: 500;
	color: var(--ink) !important;
	background: transparent !important;
	white-space: normal;
	transition: background-color .18s var(--ease), color .18s var(--ease);
}
html #header .navbar-nav .dropdown-menu .dropdown-item::after { content: none; }
html #header .navbar-nav .dropdown-menu .dropdown-item:hover,
html #header .navbar-nav .dropdown-menu .dropdown-item:focus-visible {
	background: var(--brand-50) !important;
	color: var(--brand-700) !important;
}

.navbar-brand img { transition: width .3s var(--ease); }

/* Mobile menu. */
@media (max-width: 991.98px) {
	html #header .navbar-collapse {
		background: var(--brand-800);
		border-radius: var(--radius-md);
		margin: .75rem 0 1rem;
		padding: .5rem;
		box-shadow: var(--shadow-lg);
		/* The header is position:fixed, so a menu taller than the screen would
		   otherwise be cut off with no way to reach the rest: touch scrolls fell
		   through to the page behind it. Cap the panel to the space below the
		   bar and let it scroll itself. --sl-bar-h is the toggler row's height
		   (measured in master.blade.php); the fallback matches its usual size. */
		max-height: calc(100vh - var(--sl-bar-h, 87px) - 1.75rem);
		max-height: calc(100dvh - var(--sl-bar-h, 87px) - 1.75rem);
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		scrollbar-color: rgba(255, 255, 255, .35) transparent;
	}
	/* Bootstrap animates the collapse via height; keep the cap out of the way
	   until the panel is fully open so the transition can measure itself. */
	html #header .navbar-collapse.collapsing { overflow-y: hidden; }
	html #header .navbar-nav .nav-link,
	html #header .navbar-nav > .nav-item > .dropdown-item {
		padding: .8rem 1rem !important;
		border-radius: var(--radius-sm);
	}
	html #header .navbar-nav .nav-link::after,
	html #header .navbar-nav > .nav-item > .dropdown-item::after {
		left: 1rem; right: auto; width: 22px; bottom: .45rem;
	}
	html #header .navbar-nav .dropdown-menu {
		background: rgba(255, 255, 255, .06);
		border: 0;
		box-shadow: none;
		margin: 0 0 .5rem;
	}
	html #header .navbar-nav .dropdown-menu .dropdown-item {
		color: rgba(255, 255, 255, .82) !important;
	}
	html #header .navbar-nav .dropdown-menu .dropdown-item:hover {
		background: rgba(255, 255, 255, .12) !important;
		color: #fff !important;
	}
	.navbar-toggler {
		border-color: rgba(255, 255, 255, .35);
		border-radius: var(--radius-sm);
		padding: .5rem .7rem;
	}
}

/* ==========================================================================
   9. Carousels
   ========================================================================== */

.sl-dots .owl-dots,
.owl-carousel.sl-dots .owl-dots {
	opacity: 1 !important;
	visibility: visible !important;
	margin-top: 1.25rem;
}
.sl-dots .owl-dot span {
	width: 10px !important;
	height: 10px !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, .4) !important;
	border: 0 !important;
	transition: background-color .25s var(--ease), transform .25s var(--ease), width .25s var(--ease);
}
.sl-dots .owl-dot.active span {
	background: var(--accent) !important;
	width: 28px !important;
	border-radius: 999px !important;
}
.sl-dots--dark .owl-dot span { background: var(--brand-200) !important; }
.sl-dots--dark .owl-dot.active span { background: var(--brand-700) !important; }

.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14) !important;
	backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, .28) !important;
	color: #fff !important;
	transition: background-color .22s var(--ease), transform .22s var(--ease);
}
.owl-carousel .owl-nav button.owl-prev:hover,
.owl-carousel .owl-nav button.owl-next:hover {
	background: rgba(255, 255, 255, .3) !important;
	transform: scale(1.06);
}

/* The three-value carousel on the homepage. */
.connected-curriculum-carousel .owl-dots .owl-dot img {
	border-radius: 50%;
	border: 3px solid transparent;
	opacity: .55;
	transition: opacity .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.connected-curriculum-carousel .owl-dots .owl-dot.active img {
	opacity: 1;
	border-color: var(--accent);
	transform: scale(1.12);
}
.connected-curriculum-carousel .owl-dots .owl-dot.active {
	text-decoration: none !important;
	transform: none !important;
}

/* ==========================================================================
   10. Footer
   ========================================================================== */

#footer { border: 0 !important; margin: 0 !important; }

.sl-location {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 380px;
	overflow: hidden;
	isolation: isolate;
}
.sl-location__media { position: absolute; inset: 0; z-index: 0; }
.sl-location__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: var(--loc-position, center);
	display: block;
}
/* Proper scrim, replacing the backdrop-filter + text-shadow legibility hack. */
.sl-location__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(30, 0, 39, .90), rgba(50, 0, 65, .74));
}
.sl-location__body {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: clamp(2rem, 5vw, 3.5rem);
	color: #fff;
	text-align: center;
}
.sl-location__name {
	font-size: clamp(1.15rem, 1vw + 1rem, 1.4rem);
	font-weight: 700;
	color: #fff;
	margin: 0 0 .75rem;
	letter-spacing: -.01em;
}
.sl-location__address {
	color: var(--on-brand-muted);
	font-size: .98rem;
	line-height: 1.7;
	margin: 0 0 1.5rem;
	font-style: normal;
}
.sl-location__contact { display: grid; gap: .5rem; justify-items: center; }
.sl-location__contact a {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	font-size: 1.02rem;
	padding: .35rem .2rem;
	border-bottom: 1px solid transparent;
	transition: border-color .2s var(--ease), color .2s var(--ease);
}
.sl-location__contact a:hover {
	color: var(--accent-light);
	border-bottom-color: var(--accent-light);
}
.sl-location__contact i { color: var(--accent-light); font-size: .9em; }
.sl-location__tel { font-size: 1.25rem !important; letter-spacing: .01em; }

.sl-map { min-height: 380px; height: 100%; background: var(--brand-100); }

.sl-footer-base {
	background: linear-gradient(160deg, var(--brand-900), var(--brand-700));
	color: var(--on-brand-muted);
	padding-block: clamp(3rem, 6vw, 4.5rem) 0;
}
.sl-footer-base a { color: var(--on-brand-muted); text-decoration: none; }
.sl-footer-base a:hover { color: #fff; }
.sl-footer-base h2, .sl-footer-base h3 { color: #fff; }

.sl-footer-heading {
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--accent-light);
	margin-bottom: 1.1rem;
}
.sl-footer-list { list-style: none; margin: 0; padding: 0; }
.sl-footer-list li { margin-bottom: .6rem; }
.sl-footer-list a {
	position: relative;
	display: inline-block;
	transition: transform .2s var(--ease), color .2s var(--ease);
}
.sl-footer-list a:hover { transform: translateX(4px); color: #fff; }

.sl-footer-logo img {
	max-height: 78px;
	width: auto;
	/* The template put a translucent circle behind the white logo to make it
	   legible. On the brand gradient it no longer needs one. */
	background: none;
	border-radius: 0;
	padding: 0;
}

.sl-footer-social {
	display: flex;
	gap: .6rem;
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
}
.sl-footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px; height: 42px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .18);
	color: #fff;
	transition: background-color .22s var(--ease), transform .22s var(--ease);
}
.sl-footer-social a:hover {
	background: var(--accent);
	color: var(--brand-900);
	transform: translateY(-3px);
}

.sl-footer-legal {
	margin-top: clamp(2rem, 5vw, 3rem);
	border-top: 1px solid rgba(255, 255, 255, .14);
	padding-block: 1.75rem;
	font-size: .875rem;
}
.sl-footer-legal p { margin: 0; color: rgba(255, 255, 255, .6); }

/* Cookie banner — was #626262. */
html #cb-cookie-banner {
	background: var(--brand-900) !important;
	color: #fff !important;
	border: 0 !important;
	border-top: 1px solid rgba(255, 255, 255, .14) !important;
	padding: 1rem 1.25rem;
	font-size: .92rem;
	box-shadow: 0 -8px 30px rgba(0, 0, 0, .25);
}
html #cb-cookie-banner a { color: var(--accent-light); text-decoration: underline; }
html #cb-cookie-banner .btn {
	background: var(--accent) !important;
	border-color: var(--accent) !important;
	color: var(--brand-900) !important;
	font-weight: 600;
	border-radius: 999px;
	padding: .45rem 1.25rem;
}
html #cb-cookie-banner .btn:hover {
	background: var(--accent-light) !important;
	border-color: var(--accent-light) !important;
}

/* ==========================================================================
   11. Components
   ========================================================================== */

/* At-a-glance statistics band. */
.sl-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
	text-align: center;
}
.sl-stat__value {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(2.2rem, 3.5vw, 3.2rem);
	line-height: 1;
	color: #fff;
	margin-bottom: .5rem;
}
.sl-stat__label {
	display: block;
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--on-brand-muted);
	line-height: 1.5;
}
.sl-stat + .sl-stat { position: relative; }
/* Three short figures: keep them in one row on phones too. auto-fit alone
   dropped to two columns at 375px and left the third stat alone on a second
   row, half-width with a blank space beside it. */
@media (max-width: 767.98px) {
	.sl-stats {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: .75rem;
	}
	.sl-stat__value { font-size: clamp(1.7rem, 8vw, 2.2rem); }
	.sl-stat__label { font-size: .72rem; letter-spacing: .08em; }
}
@media (min-width: 768px) {
	.sl-stat + .sl-stat::before {
		content: "";
		position: absolute;
		left: calc(-1 * clamp(.75rem, 1.5vw, 1.25rem));
		top: 12%;
		height: 76%;
		width: 1px;
		background: rgba(255, 255, 255, .18);
	}
}

/* Closing call-to-action band. */
.sl-cta { position: relative; overflow: hidden; isolation: isolate; }
.sl-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .9rem;
	justify-content: center;
	margin-top: 2rem;
}

/* Document/policy rows — replaces bare links on the DB-driven pages. */
.sl-doc {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.1rem 1.35rem;
	background: var(--surface);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-md);
	margin-bottom: .75rem;
	text-decoration: none !important;
	color: var(--ink);
	transition: transform .22s var(--ease), box-shadow .22s var(--ease),
	            border-color .22s var(--ease), background-color .22s var(--ease);
}
.sl-doc:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
	border-color: transparent;
	background: var(--surface);
}
.sl-doc__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	border-radius: var(--radius-sm);
	background: var(--brand-50);
	color: var(--brand-700);
	font-size: 1.05rem;
}
.sl-doc:hover .sl-doc__icon { background: var(--brand-700); color: #fff; }
.sl-doc__title {
	flex: 1 1 auto;
	font-weight: 600;
	color: var(--brand-700);
	line-height: 1.4;
	margin: 0;
	font-size: 1rem;
}
.sl-doc__meta {
	flex: 0 0 auto;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-subtle);
}
.sl-doc__chevron { flex: 0 0 auto; color: var(--brand-300); transition: transform .22s var(--ease); }
.sl-doc:hover .sl-doc__chevron { transform: translateX(4px); color: var(--brand-700); }

/* Staff cards. */
.sl-staff { text-align: center; }
.sl-staff__media {
	position: relative;
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	margin: 0 auto 1.1rem;
	max-width: 210px;
	box-shadow: var(--shadow-md);
	border: 4px solid #fff;
	background: var(--brand-100);
}
.sl-staff__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s var(--ease);
}
.sl-staff:hover .sl-staff__media img { transform: scale(1.07); }
.sl-staff__name {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--brand-700);
	margin: 0 0 .2rem;
}
.sl-staff__role {
	font-size: .88rem;
	color: var(--ink-muted);
	margin: 0;
	line-height: 1.5;
}

/* Gallery grid. */
.sl-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	gap: 1rem;
}
.sl-gallery__item {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--brand-100);
	box-shadow: var(--shadow-sm);
	transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.sl-gallery__item img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .55s var(--ease);
}
.sl-gallery__item::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(30, 0, 39, .5), transparent 55%);
	opacity: 0;
	transition: opacity .3s var(--ease);
}
.sl-gallery__item:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.sl-gallery__item:hover img { transform: scale(1.07); }
.sl-gallery__item:hover::after { opacity: 1; }

/* Testimonial cards. */
.sl-quote {
	position: relative;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: var(--radius-lg);
	padding: clamp(1.75rem, 3vw, 2.5rem);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	height: 100%;
}
.sl-quote__mark {
	font-family: var(--font-display);
	font-size: 4.5rem;
	line-height: .8;
	color: var(--accent);
	display: block;
	margin-bottom: .5rem;
	opacity: .9;
}
.sl-quote__text {
	font-family: var(--font-display);
	font-size: clamp(1.05rem, .8vw + .95rem, 1.3rem);
	line-height: 1.6;
	color: #fff !important;
	margin: 0 0 1.5rem;
}
.sl-quote__author {
	font-family: var(--font-sans);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--accent-light) !important;
	margin: 0;
}

/* Video with a poster and an overlaid play affordance. */
.sl-video { position: relative; }
.sl-video video {
	display: block;
	width: 100%;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	background: var(--brand-900);
}
.sl-video__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	cursor: pointer;
	border-radius: var(--radius-lg);
	transition: opacity .25s var(--ease);
}
.sl-video__play span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 82px; height: 82px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--brand-700);
	font-size: 1.5rem;
	padding-left: 5px;
	box-shadow: var(--shadow-lg);
	transition: transform .25s var(--ease), background-color .25s var(--ease);
}
.sl-video__play:hover span { transform: scale(1.08); background: #fff; }
.sl-video.is-playing .sl-video__play { opacity: 0; pointer-events: none; }

/* FAQ / accordion. */
.sl-accordion { border-top: 1px solid var(--hairline); }
.sl-accordion__item { border-bottom: 1px solid var(--hairline); }
.sl-accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding: 1.35rem 0;
	background: none;
	border: 0;
	text-align: left;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--brand-700);
	cursor: pointer;
	transition: color .2s var(--ease);
}
.sl-accordion__trigger:hover { color: var(--brand-500); }
.sl-accordion__trigger i { transition: transform .25s var(--ease); color: var(--accent-dark); }
.sl-accordion__trigger[aria-expanded="true"] i { transform: rotate(180deg); }
.sl-accordion__panel { padding: 0 0 1.5rem; color: var(--ink-muted); }

/* Layout helper: photo column that fills its grid cell. */
.sl-media-fill {
	position: relative;
	min-height: 340px;
	height: 100%;
	overflow: hidden;
	background: var(--brand-100);
}
.sl-media-fill img {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: var(--media-position, center);
}

/* ==========================================================================
   12. Motion & accessibility
   ========================================================================== */

.sl-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 10000;
	padding: .85rem 1.25rem;
	background: var(--brand-700);
	color: #fff;
	font-weight: 600;
	border-radius: 0 0 var(--radius-sm) 0;
}
.sl-skip-link:focus {
	left: 0;
	color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}

	/* Porto's scroll-reveal system sets opacity:0 and waits for jquery.appear
	   to add the animation class. With animations suppressed, force the end
	   state so nothing stays invisible. */
	.appear-animation,
	[data-appear-animation] {
		opacity: 1 !important;
		transform: none !important;
		visibility: visible !important;
	}

	.sl-hero__cue { display: none; }
}

/* Safety net: if JS fails, reveal-animated content must still be readable. */
.no-js .appear-animation,
.no-js [data-appear-animation] { opacity: 1 !important; }

@media print {
	#header, #footer, #cb-cookie-banner, .sl-hero__cue, .sl-cta { display: none !important; }
	.sl-prose { max-width: none; }
	body { color: #000; }
}

/* ==========================================================================
   13. Homepage hero carousel
   --------------------------------------------------------------------------
   The previous hero carried the `manual` class, which theme.init.js:51 uses to
   opt an element OUT of carousel initialisation ('.owl-carousel:not(.manual)').
   Owl therefore never ran, the hand-written .owl-stage/.owl-item markup was
   left with height:100% against no definite parent height, and the whole hero
   collapsed to an empty block. The carousel below is initialised normally and
   lets Owl build its own stage.
   ========================================================================== */

.sl-hero--home { position: relative; display: block; }

.sl-hero-carousel {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0 !important;
}
.sl-hero-carousel,
.sl-hero-carousel .owl-stage-outer,
.sl-hero-carousel .owl-stage,
.sl-hero-carousel .owl-item { height: 100%; }

.sl-hero-slide {
	position: relative;
	height: 100%;
	min-height: min(88svh, 820px);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.sl-hero-slide__media { position: absolute; inset: 0; z-index: 0; }
.sl-hero-slide__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--hero-position, center);
	display: block;
}
.sl-hero-slide__content {
	position: relative;
	z-index: 2;
	text-align: center;
	padding: 6rem 1.25rem 11rem;
	max-width: 62rem;
}

/* Dots sit above the static footer actions. */
.sl-hero-carousel .owl-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 1.5rem;
	z-index: 6;
	margin: 0;
	text-align: center;
}

.sl-hero__foot {
	position: absolute;
	left: 0;
	right: 0;
	bottom: clamp(3.5rem, 8vh, 5.5rem);
	z-index: 5;
	text-align: center;
	padding-inline: 1.25rem;
	pointer-events: none;
}
.sl-hero__foot > * { pointer-events: auto; }

@media (max-width: 767.98px) {
	.sl-hero-slide__content { padding: 5rem 1rem 12rem; }
}

/* Screen-reader-only, for the page's real <h1>. Bootstrap 5.0's .sr-only was
   renamed .visually-hidden; define our own so this does not depend on which
   is present in the vendor bundle. */
.sl-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* The three-circle curriculum graphic. */
/* (the circle graphic is defined in section 19) */

/* Value cards used by the curriculum carousel. */
.sl-value-card {
	background: #fff;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: clamp(1.75rem, 3vw, 2.5rem);
	text-align: center;
	max-width: 30rem;
	margin: 0 auto;
}

/* Testimonials band. Replaces the Porto parallax section, which relied on
   `overlay-op-4` (a flat #212529 at 40%) for contrast. */
.sl-testimonials { position: relative; overflow: hidden; isolation: isolate; }
.sl-testimonials__media { position: absolute; inset: 0; z-index: 0; }
.sl-testimonials__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-testimonials__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(20, 0, 26, .86), rgba(30, 0, 39, .82)),
		linear-gradient(140deg, rgba(50, 0, 65, .5), transparent);
}
.sl-testimonials .owl-stage-outer { padding-block: 4px; }

/* ==========================================================================
   14. Fixed header over the hero
   --------------------------------------------------------------------------
   Porto's sticky plugin is disabled in center-logo-menu.blade.php
   ('stickyEnabled': false) and the behaviour is done here instead, so the
   header reliably overlays the hero rather than sitting above it in normal
   flow and leaving a band of page background. Every public page now opens
   with a hero, so there is no layout that needs the header to take up space.
   ========================================================================== */

#header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1030;
	padding: 0;
}
#header .header-body {
	position: static;
	background: transparent !important;
	box-shadow: none !important;
}

/* A soft gradient keeps the nav legible over a bright photo before any
   scrolling has happened. */
#header::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 190px;
	background: linear-gradient(to bottom, rgba(20, 0, 26, .78) 0%, rgba(20, 0, 26, .35) 55%, transparent 100%);
	pointer-events: none;
	opacity: 1;
	transition: opacity .3s var(--ease);
}

#header.sl-nav-scrolled .header-body {
	background: rgba(30, 0, 39, .95) !important;
	backdrop-filter: saturate(140%) blur(12px);
	-webkit-backdrop-filter: saturate(140%) blur(12px);
	box-shadow: 0 8px 30px rgba(0, 0, 0, .28) !important;
}
#header.sl-nav-scrolled::before { opacity: 0; }

/* The logo shrinks slightly once scrolled. */
#header .navbar-brand img { width: 92px; }
#header.sl-nav-scrolled .navbar-brand img { width: 70px; }
@media (max-width: 991.98px) {
	#header .navbar-brand img,
	#header.sl-nav-scrolled .navbar-brand img { width: 68px; }
}

/* The mobile panel needs its own solid backing since the bar is transparent. */
@media (max-width: 991.98px) {
	#header .header-container { padding-block: .5rem; }
}

/* ==========================================================================
   15. Reveal on scroll
   --------------------------------------------------------------------------
   theme-elements.css:222 sets `.appear-animation { opacity: 0 }` and depends on
   Porto's JS adding `.appear-animation-visible` to bring it back. That class is
   not reliably applied, which leaves headings and body copy permanently
   invisible. Since a third of the site's 130 reveal attributes were attached to
   images that do not exist anyway, the system is neutralised here and replaced
   with the small IntersectionObserver in master.blade.php.

   Porto still adds its animation classes, so genuinely useful bespoke effects
   (the lineProgressAndFill SVG circle on the homepage, which animates
   stroke-dashoffset and fill-opacity rather than opacity) keep working.
   ========================================================================== */

html .appear-animation,
html [data-appear-animation] { opacity: 1; }

/* The hidden starting state is scoped to .sl-js, which an inline script in
   master.blade.php puts on <html>. If scripting is unavailable or that script
   never runs, the content is simply visible — it can never be stranded at
   opacity:0, which is the failure mode of the system this replaces. */
.sl-js .sl-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .7s var(--ease), transform .7s var(--ease);
	will-change: opacity, transform;
}
.sl-js .sl-reveal.is-visible {
	opacity: 1;
	transform: none;
}
.sl-reveal--delay-1 { transition-delay: .1s; }
.sl-reveal--delay-2 { transition-delay: .2s; }
.sl-reveal--delay-3 { transition-delay: .3s; }

/* If JS never runs, nothing may stay hidden. */
/* (no-JS is handled by scoping the hidden state to .sl-js above.) */

@media (prefers-reduced-motion: reduce) {
	.sl-js .sl-reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ==========================================================================
   16. Interior pages
   --------------------------------------------------------------------------
   `.sl-page` is on the <div role="main"> of every non-homepage view. These
   pages were a hero followed by `container py-5` blocks whose paragraphs sat in
   a full-width `col-lg-12` at font-weight-semibold — roughly 140 characters of
   bold text per line. The rules below fix the reading experience without
   touching the 100+ individual paragraphs.
   ========================================================================== */

.sl-page > .container,
.sl-page > div > .container {
	padding-block: var(--space-block);
}

/* Porto's utility, applied to nearly every paragraph on these pages. Body copy
   should not be semibold. */
.sl-page p.font-weight-semibold,
.sl-page .font-weight-semibold p,
.sl-page li.font-weight-semibold { font-weight: 400 !important; }

.sl-page p {
	color: var(--ink);
	line-height: 1.75;
	margin-bottom: 1.35rem;
}

.sl-page h2 {
	color: var(--brand-700);
	margin-top: 2.75rem;
	margin-bottom: 1rem;
}
.sl-page h3 {
	color: var(--brand-600);
	margin-top: 2rem;
	margin-bottom: .65rem;
}
.sl-page .container > .row:first-child h2:first-of-type,
.sl-page h2:first-child,
.sl-page h3:first-child { margin-top: 0; }

/* Porto forces heading colour with `text-color-primary`; keep it on the ramp. */
.sl-page .text-color-primary { color: var(--brand-700) !important; }

.sl-page ul:not(.sl-breadcrumb, .navbar-nav, .dropdown-menu, .sl-footer-list, .list-unstyled, .list-inline, .social-icons, .owl-dots, .sl-contact-list) {
	padding-left: 1.6rem;
	list-style: none;
}
.sl-page ul:not(.sl-breadcrumb, .navbar-nav, .dropdown-menu, .sl-footer-list, .list-unstyled, .list-inline, .social-icons, .owl-dots, .sl-contact-list) > li {
	position: relative;
	margin-bottom: .55rem;
}
.sl-page ul:not(.sl-breadcrumb, .navbar-nav, .dropdown-menu, .sl-footer-list, .list-unstyled, .list-inline, .social-icons, .owl-dots, .sl-contact-list) > li::before {
	content: "";
	position: absolute;
	left: -1.1rem;
	top: .62em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent);
}

/* Links inside page copy need to be distinguishable from the text. */
.sl-page .container a:not(.btn, .sl-btn, .sl-link, .sl-doc, .sl-gallery__item, .custom-btn-style-1) {
	color: var(--brand-700);
	text-decoration: underline;
	text-decoration-color: var(--brand-200);
	text-underline-offset: .18em;
	font-weight: 500;
}
.sl-page .container a:not(.btn, .sl-btn, .sl-link, .sl-doc, .sl-gallery__item, .custom-btn-style-1):hover {
	text-decoration-color: var(--brand-700);
	color: var(--brand-500);
}

/* Tables (term dates, exam results). */
.sl-page table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	margin-bottom: 2rem;
	font-size: .95rem;
	background: #fff;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-md);
	overflow: hidden;
}
.sl-page thead th {
	background: var(--brand-700);
	color: #fff;
	font-weight: 600;
	font-size: .82rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: .9rem 1rem;
	text-align: left;
	border: 0;
}
.sl-page tbody td {
	padding: .85rem 1rem;
	border-top: 1px solid var(--hairline);
	vertical-align: top;
}
.sl-page tbody tr:nth-child(even) td { background: var(--brand-50); }

/* Wide content must scroll inside its own box, never the page. */
.sl-page .table-responsive,
.sl-page .sl-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* The interior-page link rule above matches any <a> inside a .container within
   .sl-page — which includes the breadcrumb, since the hero has its own
   .container. That painted the breadcrumb links --brand-700 on a dark hero,
   making them invisible. Restate them here, after that rule and with higher
   specificity. */
.sl-page .sl-hero .container a,
.sl-page .sl-hero .sl-breadcrumb a {
	color: var(--on-brand-muted);
	text-decoration: none;
	font-weight: 400;
}
.sl-page .sl-hero .container a:hover,
.sl-page .sl-hero .sl-breadcrumb a:hover {
	color: #fff;
	text-decoration: underline;
	text-decoration-color: currentColor;
}
.sl-page .sl-hero .sl-btn { color: inherit; }

/* ==========================================================================
   17. Scrim tuning
   --------------------------------------------------------------------------
   The first scrim stacked a heavy vertical gradient on a brand wash, which
   composited to ~0.96 alpha at the bottom and buried the photography — a
   particular problem on the already-dark images (door-snowdrops, camp-close).
   These are weighted towards where the text actually sits: centred on the
   homepage, lower-left on interior pages.
   ========================================================================== */

.sl-hero__scrim {
	background:
		radial-gradient(ellipse 90% 70% at 50% 62%,
			rgba(20, 0, 26, .74) 0%,
			rgba(20, 0, 26, .52) 45%,
			rgba(20, 0, 26, .30) 100%),
		linear-gradient(to top, rgba(20, 0, 26, .55) 0%, rgba(20, 0, 26, .10) 45%, rgba(20, 0, 26, .30) 100%);
}

/* Interior heroes are left-aligned, so the weight goes to the left edge and the
   right side of the photograph stays open. */
.sl-hero--page .sl-hero__scrim,
.sl-hero--compact .sl-hero__scrim {
	background:
		linear-gradient(to right,
			rgba(20, 0, 26, .86) 0%,
			rgba(20, 0, 26, .60) 42%,
			rgba(20, 0, 26, .26) 100%),
		linear-gradient(to top, rgba(20, 0, 26, .50) 0%, rgba(20, 0, 26, .06) 55%, rgba(20, 0, 26, .34) 100%);
}

/* The white hero type needs a little help over the brighter photographs. */
.sl-hero__title,
.sl-hero__word { text-shadow: 0 2px 20px rgba(10, 0, 14, .55); }
.sl-hero .sl-eyebrow,
.sl-hero .sl-lead,
.sl-breadcrumb { text-shadow: 0 1px 10px rgba(10, 0, 14, .6); }

/* Fallback for team members with no photograph on file. */
.sl-staff__initials {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: linear-gradient(140deg, var(--brand-500), var(--brand-700));
	color: #fff;
	font-size: 2rem;
	font-weight: 600;
	letter-spacing: .02em;
}
.sl-docs { max-width: 46rem; }

/* Exam results tiles. These replace nine hand-picked background colours
   (#e07b39, #a84d2b, #4aa1c4, #8c4a8a, #4a9d4a, #6fb96f, #d57a6d, #3f9ca8,
   #933c6c) that appeared nowhere else on the site, on elements classed `.card`
   and `.grid` — names that collide with Bootstrap's own. */
.sl-results {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 1rem;
	max-width: 100%;
}
.sl-result {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: 1.75rem 1.5rem;
	background: #fff;
	border: 1px solid var(--hairline);
	border-top: 3px solid var(--accent);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.sl-result:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.sl-result__figure {
	font-family: var(--font-display);
	font-size: clamp(2.1rem, 3vw, 2.8rem);
	line-height: 1;
	color: var(--brand-700);
}
.sl-result__label {
	font-size: .92rem;
	line-height: 1.5;
	color: var(--ink-muted);
}

/* In-content dividers (as opposed to .sl-rule, which is a heading accent). */
.sl-page hr:not(.sl-rule) {
	border: 0;
	height: 1px;
	background: var(--hairline);
	opacity: 1;
	margin-block: 2.5rem;
	max-width: var(--measure);
}

/* Contact cards. The addresses were previously two <ul class="list-unstyled">
   with mb-4 on every line, so a four-line address spanned most of the screen. */
.sl-contact-card {
	height: 100%;
	background: #fff;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: clamp(1.75rem, 3vw, 2.5rem);
	text-align: center;
	transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.sl-contact-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.sl-contact-card__name {
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--brand-700);
	margin: 0 0 1rem;
}
.sl-contact-card__address {
	font-style: normal;
	line-height: 1.8;
	color: var(--ink-muted);
	margin: 0 0 1.5rem;
}
.sl-contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.sl-contact-list li { display: flex; align-items: center; justify-content: center; gap: .6rem; }
.sl-contact-list i { color: var(--accent-dark); font-size: .9em; }
.sl-page .sl-contact-list a {
	font-weight: 600;
	color: var(--brand-700);
	text-decoration: none;
	border-bottom: 1px solid var(--brand-200);
	transition: border-color .2s var(--ease), color .2s var(--ease);
}
.sl-page .sl-contact-list a:hover { color: var(--brand-500); border-bottom-color: var(--brand-500); }

/* On the text-only interior pages the prose column is the only thing in the
   row, so a 68ch measure pinned left leaves a large empty margin. Centre it. */
.sl-page .col-lg-12.sl-prose {
	margin-inline: auto;
}
@media (min-width: 992px) {
	.sl-page .col-lg-12.sl-prose { padding-inline: 1rem; }
}

/* The homepage hero words sit in .sl-hero-slide__content, not .sl-hero__inner,
   so they were missing the white-text rule and fell through to theme.css's
   body colour of #777 — grey type on a dark photograph. */
.sl-hero-slide__content,
.sl-hero-slide__content h1,
.sl-hero-slide__content h2,
.sl-hero-slide__content h3,
.sl-hero-slide__content p { color: #fff; }
.sl-hero-slide__content .sl-hero__word { color: #fff; }
.sl-hero-slide__content .sl-eyebrow { color: var(--accent-light); }

/* Cookie banner takes over the screen on a small viewport. */
@media (max-width: 575.98px) {
	html #cb-cookie-banner {
		font-size: .82rem;
		padding: .75rem .9rem;
		line-height: 1.5;
	}
	html #cb-cookie-banner .btn {
		display: inline-block;
		margin-top: .5rem;
		font-size: .8rem;
		padding: .4rem 1rem;
	}
}

/* ==========================================================================
   18. Nav vertical alignment
   --------------------------------------------------------------------------
   The centred logo is a list item inside .navbar-nav and is much taller than
   the text links, so it sets the row height. Without an explicit alignment the
   flex default (stretch) leaves the link items sitting flush to the top of the
   bar rather than on the logo's centre line.

   This rule previously lived in an inline <style> block in
   center-logo-menu.blade.php; it belongs here now that the nav's styling does.
   ========================================================================== */

#header .navbar-nav {
	align-items: center;
}

/* NOTE: do not make .nav-item a flex container to centre its label. Porto
   opens dropdowns with `top: auto` (theme.css:1683), which makes the
   absolutely-positioned menu fall back to its static position — and inside a
   flex container that static position is set by align-items, so the menu opens
   vertically centred on its trigger, half of it above the header. The <ul>
   alignment above already centres the items; nothing further is needed. */

/* The logo item carries Bootstrap's .navbar-brand margin, which pushes the
   items to its right off-centre. */
#header .navbar-nav .navbar-brand {
	margin: 0;
	padding: 0 1rem;
	display: flex;
	align-items: center;
}

@media (max-width: 991.98px) {
	/* Stacked menu: items should fill the width, not sit centred in a column. */
	#header .navbar-nav { align-items: stretch; }
	#header .navbar-nav > .nav-item { display: block; }
}

/* Porto pins .header-container to min-height:100px, so shrinking the logo on
   scroll left it floating in a bar that never changed height. Shrink both. */
#header .header-container {
	min-height: 100px;
	transition: min-height .3s var(--ease);
}
#header.sl-nav-scrolled .header-container {
	min-height: 78px;
}
@media (max-width: 991.98px) {
	#header .header-container,
	#header.sl-nav-scrolled .header-container { min-height: 0; }
}

/* ==========================================================================
   19. Connected-strands graphic
   --------------------------------------------------------------------------
   Three circular icons on a ring that draws itself in as the section arrives.

   Replaces the Porto barber-demo composition, which broke in three ways once
   it sat in a wider column:

     - the circle used r="80%", and SVG resolves a percentage radius against the
       normalised diagonal of the viewport, not the width — in a 560x380 column
       that is a ~383px radius, a 766px disc, which `overflow-visible` then let
       spill out over the adjacent copy;
     - it carried fill="#320041", so it painted as a solid aubergine blob rather
       than a ring;
     - the icons were placed by `.custom-images-position-1 div:nth-child(n)`
       translate3d percentages, which are relative to each image's own box and
       assume a much smaller container, so they clustered in one corner.

   The ring is now viewBox-based: its geometry is fixed relative to the artwork
   and independent of how wide the column happens to be.
   ========================================================================== */

.sl-strands {
	position: relative;
	width: min(100%, 380px);
	aspect-ratio: 1;
	margin-inline: auto;
}

/* Soft brand disc, so the group has weight without becoming a solid block. */
.sl-strands::before {
	content: "";
	position: absolute;
	inset: 8%;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, var(--brand-100), var(--brand-50) 70%);
}

.sl-strands__ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}
.sl-strands__ring circle {
	fill: none;
	stroke: var(--brand-700);
	stroke-width: 2.5;
	stroke-linecap: round;
	/* 2 * pi * 94 = 590.6 */
	stroke-dasharray: 591;
	stroke-dashoffset: 591;
	transform: rotate(-90deg);
	transform-origin: 50% 50%;
	transition: stroke-dashoffset 1.9s var(--ease) .15s;
}
.sl-strands.is-visible .sl-strands__ring circle { stroke-dashoffset: 0; }

.sl-strands__icon {
	position: absolute;
	display: block;
	width: 42%;
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	background: #fff;
	box-shadow: var(--shadow-md);
	transition: transform .45s var(--ease);
}
.sl-strands__icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.sl-strands:hover .sl-strands__icon { transform: scale(1.04); }

/* Arranged on the ring: one at the top, two along the lower edge. */
.sl-strands__icon--therapy     { top: -2%;    left: 50%; transform: translateX(-50%); }
.sl-strands__icon--curriculum  { bottom: 4%;  left: 2%; }
.sl-strands__icon--development { bottom: 4%;  right: 2%; }

.sl-strands:hover .sl-strands__icon--therapy { transform: translateX(-50%) scale(1.04); }

@media (max-width: 991.98px) {
	.sl-strands { width: min(100%, 320px); margin-bottom: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
	.sl-strands__ring circle {
		stroke-dashoffset: 0;
		transition: none;
	}
	.sl-strands__icon { transition: none; }
}

/* Pin the open dropdown explicitly rather than leaving it to `top: auto` and
   whatever the static position happens to resolve to. Porto keeps the closed
   state off-screen at top:-10000px with opacity:0, so only the open state is
   overridden here — otherwise a closed menu would sit under the cursor at
   opacity 0 and swallow clicks. */
@media (min-width: 992px) {
	#header ul.navbar-nav > li.dropdown:hover > .dropdown-menu,
	#header ul.navbar-nav > li.dropdown.open > .dropdown-menu,
	#header ul.navbar-nav > li.dropdown.show > .dropdown-menu,
	#header ul.navbar-nav > li.dropdown.accessibility-open > .dropdown-menu,
	#header ul.navbar-nav > li.dropdown > .dropdown-menu.show {
		top: 100%;
		left: 0;
		right: auto;
		margin-top: var(--nav-dropdown-gap);
		/* Porto only restores opacity on :hover and .open. Bootstrap's
		   data-bs-toggle adds .show instead, so opening by click — or by
		   keyboard, which is the only way without a pointer — positioned the
		   menu correctly but left it at opacity 0. */
		display: block;
		opacity: 1;
	}

	/* Hover bridge.

	   The panel is offset below the header by --nav-dropdown-gap, which puts it
	   outside the <li>'s own box. Porto opens the menu on `li.dropdown:hover`,
	   so travelling the cursor across that gap dropped the hover and shut the
	   menu before it could be reached.

	   This spans the gap with a transparent strip. Because the strip belongs to
	   the menu, and the menu is a DOM child of the <li>, hovering it keeps
	   `li:hover` true — an ancestor stays hovered while any descendant is, even
	   one positioned outside its box.

	   It covers exactly the gap and no more, so it never overlaps the trigger
	   link above it and cannot swallow a click meant for the nav item. */
	#header ul.navbar-nav > li.dropdown > .dropdown-menu::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		/* 2px taller than the gap, so it overlaps the <li>'s bottom edge and
		   leaves no sub-pixel seam where the hit test falls through to the page
		   behind. The overlap lands on the link's lower padding, well clear of
		   its text, so the trigger stays clickable. */
		top: calc(-1 * var(--nav-dropdown-gap) - 2px);
		height: calc(var(--nav-dropdown-gap) + 2px);
		/* Purely a hover target. */
		background: transparent;
	}

	/* The rightmost items would push a left-aligned panel past the viewport. */
	#header ul.navbar-nav > li.dropdown:nth-last-child(-n+2) > .dropdown-menu {
		left: auto;
		right: 0;
	}
}

/* Make the nav items span the full height of the header bar so that the
   dropdown's `top: 100%` lands exactly on the bar's bottom edge rather than on
   the bottom of the text link, which sat 28px higher and left the panel
   overlapping the bar.

   The items stretch; the label is centred inside each one, so the alignment
   with the logo is unchanged. This is safe now only because the open dropdown
   has an explicit `top` above — with Porto's `top: auto` the stretched item
   would move the menu's static position again. */
@media (min-width: 992px) {
	#header .header-container {
		display: flex;
		align-items: stretch;
	}
	#header .header-container > .container-fluid {
		display: flex;
		align-items: stretch;
		width: 100%;
	}
	#header .navbar-collapse { align-items: stretch; }

	#header .navbar-nav {
		align-items: stretch;
		height: 100%;
	}
	#header .navbar-nav > .nav-item {
		display: flex;
		align-items: center;
	}
	#header .navbar-nav > .nav-item > .nav-link,
	#header .navbar-nav > .nav-item > .navbar-brand {
		display: flex;
		align-items: center;
	}
}

/* Centred logo item. Replaces `d-none d-lg-block`, whose `display: block
   !important` stopped the item from centring the logo in the full-height bar. */
/* Scoped to beat `#header .navbar-nav > .nav-item { display: block }` in the
   mobile block above, which would otherwise reveal the centred desktop logo as
   an extra item inside the stacked menu. */
#header .navbar-nav > .nav-item.sl-nav-logo { display: none; }
@media (min-width: 992px) {
	#header .navbar-nav > .nav-item.sl-nav-logo {
		display: flex;
		align-items: center;
	}
}

/* Dropdown panel and item styling.

   The rules in section 8 were written as
   `html #header .navbar-nav .dropdown-menu .dropdown-item` (specificity 1,3,1),
   which loses to Porto's
   `#header ul.navbar-nav > li.dropdown .dropdown-menu li a` (1,3,4). The result
   was a panel with Porto's square corners, grey #777 items and hairline
   separators, while only the hover rule (which happened to outrank it) came
   from the design layer. These match Porto's shape so the whole component is
   styled from one place. */
@media (min-width: 992px) {
	#header ul.navbar-nav > li.dropdown > .dropdown-menu {
		min-width: 15rem;
		padding: .5rem;
		background: #fff;
		border: 1px solid var(--hairline);
		border-top: 1px solid var(--hairline);
		/* Porto ships a reset whose selector list includes .dropdown-menu and
		   sets border-radius: 0 !important, so this has to match it. */
		border-radius: var(--radius-md) !important;
		box-shadow: var(--shadow-lg);
		text-align: left;
	}

	#header ul.navbar-nav > li.dropdown > .dropdown-menu li > a {
		display: block;
		border-bottom: 0;
		border-radius: var(--radius-sm);
		color: var(--ink);
		font-size: .92rem;
		font-weight: 500;
		letter-spacing: 0;
		text-transform: none;
		padding: .6rem .85rem;
		white-space: normal;
		transition: background-color .18s var(--ease), color .18s var(--ease);
	}

	#header ul.navbar-nav > li.dropdown > .dropdown-menu li > a:hover,
	#header ul.navbar-nav > li.dropdown > .dropdown-menu li > a:focus-visible,
	#header ul.navbar-nav > li.dropdown > .dropdown-menu li:hover > a {
		background-color: var(--brand-50);
		color: var(--brand-700);
	}

	/* Porto draws a 5px bar under the open trigger in its own demo colour. */
	#header ul.navbar-nav > li.dropdown.open > a:before,
	#header ul.navbar-nav > li.dropdown.show > a:before,
	#header ul.navbar-nav > li.dropdown:hover > a:before {
		content: none;
	}
}

/* ==========================================================================
   20. School sites
   --------------------------------------------------------------------------
   Site details come from config/sites.php and are rendered by the
   <x-site.location> and <x-site.map> components.
   ========================================================================== */

/* --- Contact grid at the foot of every page --------------------------------
   Previously three full-width rows, each pairing a contact panel with a live
   Google map. The maps now live on the individual site pages. */

.sl-location-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	background: var(--brand-900);
}
.sl-location-grid .sl-location {
	min-height: 360px;
	height: 100%;
}
.sl-location-grid .sl-location + .sl-location {
	box-shadow: inset 1px 0 0 rgba(255, 255, 255, .12);
}
.sl-location-grid .sl-location__body {
	padding: clamp(2rem, 3vw, 2.75rem) clamp(1.25rem, 2vw, 2rem);
}
.sl-location-grid .sl-location__contact a {
	font-size: .95rem;
	overflow-wrap: anywhere;
}
.sl-location-grid .sl-location__tel { font-size: 1.15rem !important; }

@media (max-width: 991.98px) {
	.sl-location-grid { grid-template-columns: minmax(0, 1fr); }
	.sl-location-grid .sl-location { min-height: 300px; }
	.sl-location-grid .sl-location + .sl-location {
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
	}
}

.sl-location__more {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	margin-top: 1.4rem;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--accent-light);
	text-decoration: none;
}
.sl-location__more::after {
	content: "→";
	transition: transform .22s var(--ease);
}
.sl-location__more:hover { color: #fff; }
.sl-location__more:hover::after { transform: translateX(4px); }

/* --- Footer: expandable site list ----------------------------------------- */

.sl-footer-sites { border-top: 1px solid rgba(255, 255, 255, .12); }

.sl-footer-site { border-bottom: 1px solid rgba(255, 255, 255, .12); }

.sl-footer-site summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .8rem 0;
	cursor: pointer;
	list-style: none;
	color: #fff;
	font-weight: 600;
	font-size: .98rem;
	transition: color .2s var(--ease);
}
.sl-footer-site summary::-webkit-details-marker { display: none; }
.sl-footer-site summary::after {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--accent-light);
	border-bottom: 2px solid var(--accent-light);
	transform: translateY(-3px) rotate(45deg);
	transition: transform .25s var(--ease);
}
.sl-footer-site[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.sl-footer-site summary:hover { color: var(--accent-light); }
.sl-footer-site summary:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

.sl-footer-site__body {
	padding: 0 0 1rem;
	color: var(--on-brand-muted);
	line-height: 1.8;
	font-size: .95rem;
}
.sl-footer-site__body address { font-style: normal; margin: 0 0 .5rem; }
.sl-footer-base .sl-footer-site__link {
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--accent-light);
}
.sl-footer-base .sl-footer-site__link:hover { color: #fff; }

/* --- Site page: contact banner beside its map ------------------------------ */

.sl-site-contact {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
	background: var(--brand-900);
}
.sl-site-contact__banner { min-height: 440px; height: 100%; }
.sl-site-contact__map { min-height: 440px; height: 100%; }

@media (max-width: 991.98px) {
	.sl-site-contact { grid-template-columns: minmax(0, 1fr); }
	.sl-site-contact__banner { min-height: 340px; }
	.sl-site-contact__map { min-height: 320px; }
}

/* The interior-page type rules in section 16 would otherwise colour the site
   name and contact links aubergine — on an aubergine banner — and give the
   name a 2.75rem top margin. Restate them for the banner. */
.sl-page .sl-location .sl-location__name {
	color: #fff;
	margin-top: 0;
}
.sl-page .sl-location .sl-location__contact a {
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
.sl-page .sl-location .sl-location__contact a:hover {
	color: var(--accent-light);
	border-bottom-color: var(--accent-light);
}

/* --- Nav: "Our Sites" flyout ---------------------------------------------- */

@media (min-width: 992px) {
	/* Porto places the flyout at left:100% of its <li>, which sits inside the
	   parent panel's padding, so it would overlap the parent. Push it clear of
	   the panel and line its first item up with the trigger row. */
	#header ul.navbar-nav > li.dropdown .dropdown-menu li.dropdown-submenu > .dropdown-menu {
		left: calc(100% + .5rem);
		margin-top: calc(-.5rem - 1px);
		margin-left: 0;
		/* Wide enough for "Stone Lodge Therapeutic School" on one line. */
		min-width: 19.5rem;
		padding: .5rem;
		background: #fff;
		border: 1px solid var(--hairline);
		border-radius: var(--radius-md) !important;
		box-shadow: var(--shadow-lg);
	}

	/* Keyboard users reach the flyout by tabbing into it. */
	#header ul.navbar-nav > li.dropdown .dropdown-menu li.dropdown-submenu:focus-within > .dropdown-menu {
		top: 0;
		opacity: 1;
	}

	/* Hover bridge across the gap to the parent panel, for the same reason as
	   the top-level one in section 18: without it the cursor leaves
	   li.dropdown-submenu while crossing and the flyout shuts. */
	#header ul.navbar-nav > li.dropdown .dropdown-menu li.dropdown-submenu > .dropdown-menu::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: calc(-.5rem - 3px);
		width: calc(.5rem + 3px);
	}
}

/* Current page / section within the dropdown panels. */
#header ul.navbar-nav > li.dropdown > .dropdown-menu li > a.active {
	background-color: var(--brand-50);
	color: var(--brand-700);
	font-weight: 600;
}

@media (max-width: 991.98px) {
	#header .dropdown-submenu > .dropdown-menu {
		display: none;
		position: static;
		margin: 0 0 .35rem .75rem;
		padding: .25rem;
		background: rgba(255, 255, 255, .05);
	}
	#header .dropdown-submenu.open > .dropdown-menu { display: block; }

	#header .sl-submenu-toggle {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
	}
	#header .sl-submenu-toggle::after {
		content: "";
		width: 7px;
		height: 7px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-2px) rotate(45deg);
		transition: transform .25s var(--ease);
	}
	#header .dropdown-submenu.open > .sl-submenu-toggle::after {
		transform: translateY(2px) rotate(-135deg);
	}
}

/* --- Footer link colours ---------------------------------------------------
   theme.css sets `#footer a:not(.btn):not(.no-footer-css) { color: #777 }`.
   At specificity 1,2,1 it outranks every footer link rule above that is not
   itself scoped to #footer, so the contact links, the "More about" links and
   the Explore/legal links in the footer base were all rendering Porto grey on
   the dark background. Restated here with a #footer scope so they win. */

#footer .sl-location .sl-location__contact a:not(.btn) {
	color: #fff;
}
#footer .sl-location .sl-location__contact a:not(.btn):hover {
	color: var(--accent-light);
}
#footer .sl-location a.sl-location__more:not(.btn) {
	color: var(--accent-light);
}
#footer .sl-location a.sl-location__more:not(.btn):hover {
	color: #fff;
}

#footer .sl-footer-base a:not(.btn) {
	color: var(--on-brand-muted);
}
#footer .sl-footer-base a:not(.btn):hover {
	color: #fff;
}
#footer .sl-footer-base a.sl-footer-site__link:not(.btn) {
	color: var(--accent-light);
}
#footer .sl-footer-base a.sl-footer-site__link:not(.btn):hover {
	color: #fff;
}
#footer .sl-footer-base .sl-footer-social a:not(.btn) {
	color: #fff;
}
#footer .sl-footer-base .sl-footer-social a:not(.btn):hover {
	color: var(--brand-900);
}

/* theme-elements.css uppercases every <h3>. The site name is an <h3> in the
   footer grid and an <h2> on the site's own page, so without this the same
   name was set in capitals in one place and not the other. */
.sl-location .sl-location__name { text-transform: none; }
#footer .sl-footer-base p,
#footer .sl-footer-base address { color: var(--on-brand-muted); }
#footer .sl-footer-base .sl-footer-legal p { color: rgba(255, 255, 255, .6); }

@media (min-width: 992px) {
	#header ul.navbar-nav > li.dropdown .dropdown-menu li.dropdown-submenu > .dropdown-menu li > a {
		white-space: nowrap;
	}
}

/* "Our Sites" is a <button> (see center-logo-menu.blade.php). Reset it to sit
   exactly like the link items around it at every breakpoint. Colour, padding
   and hover backgrounds already come from the .dropdown-item rules. */
#header .dropdown-menu button.sl-submenu-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	border: 0;
	background: transparent;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

@media (min-width: 992px) {
	#header ul.navbar-nav > li.dropdown > .dropdown-menu li > button.sl-submenu-toggle {
		border-radius: var(--radius-sm);
		font-size: .92rem;
		font-weight: 500;
		padding: .6rem .85rem;
		color: var(--ink);
	}
	/* Keep the trigger highlighted while its flyout is open. */
	#header ul.navbar-nav > li.dropdown > .dropdown-menu li.dropdown-submenu:hover > button.sl-submenu-toggle,
	#header ul.navbar-nav > li.dropdown > .dropdown-menu li.dropdown-submenu.open > button.sl-submenu-toggle,
	#header ul.navbar-nav > li.dropdown > .dropdown-menu li.dropdown-submenu:focus-within > button.sl-submenu-toggle,
	#header ul.navbar-nav > li.dropdown > .dropdown-menu li > button.sl-submenu-toggle.active {
		background-color: var(--brand-50) !important;
		color: var(--brand-700) !important;
	}
	/* Right-pointing chevron; Porto's version only targets <a>. */
	#header .dropdown-menu button.sl-submenu-toggle::after {
		content: "";
		flex: 0 0 auto;
		width: 6px;
		height: 6px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(-45deg);
		opacity: .7;
		transition: transform .2s var(--ease), opacity .2s var(--ease);
	}
	#header ul.navbar-nav li.dropdown-submenu:hover > button.sl-submenu-toggle::after,
	#header ul.navbar-nav li.dropdown-submenu.open > button.sl-submenu-toggle::after {
		opacity: 1;
		transform: translateX(2px) rotate(-45deg);
	}
}

/* The chevron rules above lose to section 8's
   `html #header .navbar-nav .dropdown-menu .dropdown-item::after { content: none }`
   (1,3,2), which exists to strip the nav-link underline from dropdown items.
   These restate the chevron with enough weight to win, at both breakpoints. */
html #header .navbar-nav .dropdown-menu button.sl-submenu-toggle::after {
	content: "";
	position: static;
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	background: none;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	opacity: .75;
	transition: transform .2s var(--ease), opacity .2s var(--ease);
}

@media (min-width: 992px) {
	html #header .navbar-nav .dropdown-menu button.sl-submenu-toggle::after {
		transform: rotate(-45deg);
	}
	html #header .navbar-nav li.dropdown-submenu:hover > button.sl-submenu-toggle::after,
	html #header .navbar-nav li.dropdown-submenu.open > button.sl-submenu-toggle::after,
	html #header .navbar-nav li.dropdown-submenu:focus-within > button.sl-submenu-toggle::after {
		opacity: 1;
		transform: translateX(2px) rotate(-45deg);
	}
}

@media (max-width: 991.98px) {
	/* Match the centred items around it in the stacked menu. */
	html #header .navbar-nav .dropdown-menu button.sl-submenu-toggle {
		justify-content: center;
		text-align: center;
		gap: .55rem;
	}
	html #header .navbar-nav .dropdown-menu button.sl-submenu-toggle::after {
		transform: translateY(-2px) rotate(45deg);
	}
	html #header .navbar-nav li.dropdown-submenu.open > button.sl-submenu-toggle::after {
		transform: translateY(2px) rotate(-135deg);
	}
	/* Nested site links: slightly smaller so they read as children. */
	html #header .navbar-nav .dropdown-submenu > .dropdown-menu .dropdown-item {
		font-size: .88rem;
	}
}

/* Footer site list: space the "View site" and "Website" links when both show. */
.sl-footer-site__body .sl-footer-site__link + .sl-footer-site__link { margin-left: 1.25rem; }

/* Site page actions wrap onto two lines on a phone. */
@media (max-width: 575.98px) {
	.sl-page .sl-btn.ms-2 { margin: .75rem 0 0 !important; }
}

/* External link in a dropdown (Meadow Farm's own website). */
#header .dropdown-menu a.sl-external {
	display: flex;
	align-items: center;
	gap: .5rem;
}
#header .dropdown-menu a.sl-external i {
	font-size: .7em;
	opacity: .6;
}
@media (max-width: 991.98px) {
	#header .dropdown-menu a.sl-external { justify-content: center; }
}

/* Four sites: four across on wide screens, two-by-two in between, stacked on
   a phone. (Replaces the three-column rule earlier in section 20.) */
@media (min-width: 992px) and (max-width: 1199.98px) {
	.sl-location-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sl-location-grid .sl-location:nth-child(odd) { box-shadow: none; }
	.sl-location-grid .sl-location:nth-child(n+3) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
	.sl-location-grid .sl-location:nth-child(4) { box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .12); }
}
@media (min-width: 1200px) {
	.sl-location-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 768px) and (max-width: 991.98px) {
	.sl-location-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sl-location-grid .sl-location + .sl-location { box-shadow: none; }
	.sl-location-grid .sl-location:nth-child(even) { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .12); }
	.sl-location-grid .sl-location:nth-child(n+3) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
	.sl-location-grid .sl-location:nth-child(4) { box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .12); }
}

/* Longer site names ("More about The Vocational Centre") wrap in a quarter-width
   card. As an inline-flex row the arrow sat beside both lines; inline flow keeps
   it after the last word, and balance evens out the two lines. */
.sl-location__more {
	display: inline-block;
	max-width: 100%;
	text-wrap: balance;
	line-height: 1.6;
}
.sl-location__more::after {
	display: inline-block;
	margin-left: .45rem;
}

/* ==========================================================================
   21. School day timetable (About Our Day)
   ========================================================================== */

.sl-prose ol.sl-timetable,
.sl-timetable {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
	position: relative;
}

/* The vertical line joining the slots. */
.sl-timetable::before {
	content: "";
	position: absolute;
	top: 1.4rem;
	bottom: 1.4rem;
	left: calc(7.5rem + 11px);
	width: 2px;
	background: var(--brand-100);
}

.sl-timetable__slot {
	position: relative;
	display: grid;
	grid-template-columns: 7.5rem 1fr;
	align-items: center;
	column-gap: 2.25rem;
	margin: 0 0 .5rem;
	padding: 0;
}

/* Marker on the line. */
.sl-timetable__slot::before {
	content: "";
	position: absolute;
	left: calc(7.5rem + 5px);
	top: 50%;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	transform: translateY(-50%);
	background: #fff;
	border: 3px solid var(--brand-700);
	z-index: 1;
}

.sl-timetable__time {
	text-align: right;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: var(--brand-700);
	white-space: nowrap;
	line-height: 1.3;
}
.sl-timetable__to {
	display: block;
	font-size: .8rem;
	font-weight: 500;
	color: var(--ink-subtle);
}

.sl-timetable__label {
	display: block;
	padding: .9rem 1.25rem;
	background: #fff;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	font-weight: 600;
	color: var(--ink);
}

/* Tutor time: pastoral, so tinted rather than white. */
.sl-timetable__slot--pastoral .sl-timetable__label {
	background: var(--brand-50);
	border-color: var(--brand-100);
	color: var(--brand-700);
}

/* Break and lunch: lighter weight, accent marker, no card. */
.sl-timetable__slot--break::before {
	border-color: var(--accent);
	width: 10px;
	height: 10px;
	left: calc(7.5rem + 7px);
}
.sl-timetable__slot--break .sl-timetable__time { color: var(--accent-dark); }
.sl-timetable__slot--break .sl-timetable__label {
	background: transparent;
	border: 1px dashed var(--accent-light);
	box-shadow: none;
	font-weight: 500;
	color: var(--accent-dark);
	padding-block: .55rem;
}

/* End of day. */
.sl-timetable__slot--end::before {
	background: var(--brand-700);
}
.sl-timetable__slot--end .sl-timetable__label {
	background: var(--brand-700);
	border-color: var(--brand-700);
	color: #fff;
}

/* The bullet dots that .sl-prose / .sl-page add to list items. */
.sl-page .sl-timetable > li::before { top: 50%; }
.sl-page ul.sl-timetable > li::before,
.sl-prose .sl-timetable > li::before { border-radius: 50%; }

@media (max-width: 575.98px) {
	.sl-timetable::before { left: calc(5.25rem + 11px); }
	.sl-timetable__slot {
		grid-template-columns: 5.25rem 1fr;
		column-gap: 1.75rem;
	}
	.sl-timetable__slot::before { left: calc(5.25rem + 5px); }
	.sl-timetable__slot--break::before { left: calc(5.25rem + 7px); }
	.sl-timetable__label { padding: .75rem 1rem; }
}

/* Centre the line and markers in the gap between the times and the cards
   (36px gap: line at 18px, 14px marker from 11px, 10px break marker from 13px),
   so neither the time nor the card touches a marker. */
.sl-timetable::before                 { left: calc(7.5rem + 17px); }
.sl-timetable__slot::before           { left: calc(7.5rem + 11px); }
.sl-timetable__slot--break::before    { left: calc(7.5rem + 13px); }

@media (max-width: 575.98px) {
	/* 28px gap: line at 14px, markers from 7px / 9px. */
	.sl-timetable::before              { left: calc(5.25rem + 13px); }
	.sl-timetable__slot::before        { left: calc(5.25rem + 7px); }
	.sl-timetable__slot--break::before { left: calc(5.25rem + 9px); }
}

/* ==========================================================================
   22. Raise a concern (Safeguarding page, MyVoice QR code)
   ========================================================================== */

.sl-concern {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 2rem;
	margin: 0 0 3rem;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--brand-50);
	border: 1px solid var(--brand-100);
	border-left: 4px solid var(--brand-700);
	border-radius: var(--radius-lg);
}

.sl-page .sl-concern .sl-concern__title {
	margin: 0 0 .85rem;
	font-size: clamp(1.35rem, 1vw + 1.1rem, 1.65rem);
	color: var(--brand-700);
}
.sl-concern p { margin-bottom: .85rem; }
.sl-concern .sl-concern__hint {
	color: var(--ink-muted);
	font-size: .95rem;
	margin-bottom: 1.25rem;
}
.sl-concern .sl-btn i { font-size: .8em; }

.sl-concern .sl-concern__urgent {
	/* Block, not flex: as a flex row every text run and the 999 link became
	   separate items and the sentence broke apart. */
	display: block;
	margin: 1.25rem 0 0;
	font-size: .92rem;
	font-weight: 600;
	color: var(--brand-700);
}
.sl-concern .sl-concern__urgent i { color: var(--accent-dark); margin-right: .35rem; }

/* QR codes need contrast and a light quiet zone around them to scan reliably;
   the SVG carries its own white margin, this frame just presents it. */
.sl-concern__qr {
	padding: .5rem;
	background: #fff;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	line-height: 0;
}
.sl-concern__qr img {
	display: block;
	width: 180px;
	height: 180px;
}

@media (max-width: 767.98px) {
	.sl-concern { grid-template-columns: minmax(0, 1fr); }
	.sl-concern__qr { justify-self: center; }
	/* On a phone the button is the practical route, so it comes first. */
	.sl-concern__qr { order: 2; }
}

/* ==========================================================================
   23. Audience links (Careers page)
   ========================================================================== */

.sl-audiences {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	list-style: none;
	margin: 0;
	padding: 0;
}
.sl-page ul.sl-audiences > li { margin: 0; }
.sl-page ul.sl-audiences > li::before { content: none; }

.sl-page .container a.sl-audience,
.sl-audience {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	height: 100%;
	min-height: 17rem;
	padding: clamp(1.75rem, 3vw, 2.5rem);
	background: linear-gradient(150deg, var(--brand-900), var(--brand-700) 60%, var(--brand-600));
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	color: #fff;
	text-decoration: none;
	overflow: hidden;
	isolation: isolate;
	transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
/* Soft lit corner, matching the brand panels elsewhere. */
.sl-audience::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(70% 80% at 100% 0%, rgba(179, 143, 102, .22), transparent 60%);
	transition: opacity .3s var(--ease);
}
.sl-page .container a.sl-audience:hover,
.sl-audience:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-xl);
	color: #fff;
}
.sl-audience:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 4px;
}

.sl-audience__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: 1.5rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .2);
	color: var(--accent-light);
	font-size: 1.6rem;
}
.sl-audience__title {
	font-size: clamp(1.6rem, 1.5vw + 1.1rem, 2.1rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.02em;
	margin-bottom: .5rem;
}
.sl-audience__summary {
	color: var(--on-brand-muted);
	font-size: .95rem;
	line-height: 1.55;
	margin-bottom: 1.5rem;
}
.sl-audience__go {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--accent-light);
}
.sl-audience__go i { transition: transform .25s var(--ease); }
.sl-audience:hover .sl-audience__go i { transform: translateY(3px); }

/* Anchored sections must clear the fixed header when jumped to. */
.sl-audience-section { scroll-margin-top: 90px; }

.sl-page .sl-audience-section h2 { margin-top: 0; }
.sl-audience-section__top { margin: 2rem 0 0; }
.sl-link--up::after { content: "↑"; }
.sl-link--up:hover::after { transform: translateY(-3px); }

@media (max-width: 767.98px) {
	.sl-audiences { grid-template-columns: minmax(0, 1fr); }
	.sl-page .container a.sl-audience,
	.sl-audience { min-height: 0; }
}

/* ==========================================================================
   24. Named contact (Careers page)
   ========================================================================== */

.sl-contact-person {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 1.5rem 2rem;
	margin: 0 0 clamp(2rem, 4vw, 3rem);
	padding: clamp(1.5rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2.25rem);
	background: var(--brand-50);
	border: 1px solid var(--brand-100);
	border-left: 4px solid var(--brand-700);
	border-radius: var(--radius-lg);
}

.sl-contact-person__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: linear-gradient(140deg, var(--brand-700), var(--brand-500));
	color: #fff;
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: .02em;
	box-shadow: var(--shadow-sm);
}

/* The heading is styled as a small label; it exists for the page outline. */
.sl-page h2.sl-contact-person__label {
	margin: 0 0 .3rem;
	font-size: .8rem;
	line-height: 1.4;
}
.sl-page .sl-contact-person .sl-contact-person__name {
	margin: 0 0 .35rem;
	font-size: clamp(1.25rem, .8vw + 1.05rem, 1.5rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--brand-700);
}
.sl-page .sl-contact-person .sl-contact-person__text {
	margin: 0;
	color: var(--ink-muted);
	line-height: 1.6;
}

.sl-contact-person__email {
	white-space: nowrap;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

@media (max-width: 991.98px) {
	.sl-contact-person { grid-template-columns: auto minmax(0, 1fr); }
	.sl-contact-person__email { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 575.98px) {
	.sl-contact-person__avatar { width: 56px; height: 56px; font-size: 1.1rem; }
	/* A long address must be able to wrap rather than push the page wide. */
	.sl-contact-person__email {
		white-space: normal;
		overflow-wrap: anywhere;
		justify-self: stretch;
		text-align: center;
	}
}

/* Section 16 indents every list on an interior page
   (`.sl-page ul:not(...) { padding-left: 1.6rem }`), which shifted the careers
   link cards right of the content edge. This outranks it. */
.sl-page .container ul.sl-audiences { padding-left: 0; }

/* `.sl-page h2` colours all h2s aubergine; this one is a gold eyebrow label. */
.sl-page h2.sl-contact-person__label { color: var(--accent-dark); }
@media (max-width: 575.98px) {
	html .sl-contact-person .sl-btn.sl-contact-person__email {
		font-size: .78rem !important;
		padding: .85rem 1rem !important;
		gap: .45rem;
	}
}
@media (max-width: 575.98px) {
	/* Too long for one line on a phone: allow a break only at the <wbr> after
	   the "@", so it reads "alice.girdlestone@ / stonelodgeschool.org". */
	html .sl-contact-person .sl-btn.sl-contact-person__email {
		overflow-wrap: normal;
		word-break: normal;
		font-size: .82rem !important;
		line-height: 1.35;
	}
	html .sl-contact-person .sl-btn.sl-contact-person__email span { text-align: left; }
}

/* External resource links (Careers page sections). */
.sl-page .container ul.sl-resources {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	display: grid;
	gap: .85rem;
}
.sl-page .container ul.sl-resources > li { margin: 0; }
.sl-page .container ul.sl-resources > li::before { content: none; }

.sl-page .container a.sl-resource {
	display: flex;
	align-items: flex-start;
	gap: 1.1rem;
	padding: 1.25rem 1.4rem;
	background: #fff;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	color: var(--ink);
	font-weight: 400;
	text-decoration: none;
	transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.sl-page .container a.sl-resource:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
	border-color: transparent;
	color: var(--ink);
}

.sl-resource__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-sm);
	background: var(--brand-50);
	color: var(--brand-700);
	font-size: .95rem;
	transition: background-color .22s var(--ease), color .22s var(--ease);
}
.sl-resource:hover .sl-resource__icon { background: var(--brand-700); color: #fff; }

.sl-resource__body { display: flex; flex-direction: column; min-width: 0; }
.sl-resource__title {
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.3;
	color: var(--brand-700);
}
.sl-resource:hover .sl-resource__title { text-decoration: underline; text-underline-offset: .18em; }
.sl-resource__source {
	margin: .15rem 0 .45rem;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--accent-dark);
}
.sl-resource__text {
	font-size: .95rem;
	line-height: 1.6;
	color: var(--ink-muted);
}

/* ==========================================================================
   25. Careers curriculum map
   ========================================================================== */

.sl-cmap__intro { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.sl-page .sl-cmap__intro h2 { margin: 0 0 1rem; }
.sl-page .sl-cmap__badge {
	display: inline-block;
	margin: 0;
	padding: .5rem 1.1rem;
	border-radius: 999px;
	background: var(--brand-700);
	color: #fff;
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: .04em;
}

.sl-cmap__grid { display: grid; gap: 1.5rem; margin-bottom: 1.5rem; }
.sl-cmap__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sl-cmap__grid > .sl-cmap__card { margin-bottom: 0; }

.sl-cmap__card {
	margin-bottom: 1.5rem;
	padding: clamp(1.25rem, 2.5vw, 2rem);
	background: #fff;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	min-width: 0;
}
.sl-cmap__card--accent { border-top: 4px solid var(--accent); }
.sl-cmap__card--dark {
	background: linear-gradient(150deg, var(--brand-900), var(--brand-700));
	border-color: transparent;
	color: #fff;
}
.sl-page .sl-cmap__card--dark h3,
.sl-page .sl-cmap__card--dark li { color: #fff; }

.sl-page .sl-cmap__title {
	display: flex;
	align-items: center;
	gap: .65rem;
	margin: 0 0 1rem;
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--brand-700);
}
.sl-cmap__title i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--brand-50);
	color: var(--brand-700);
	font-size: .95rem;
	flex: 0 0 auto;
}
.sl-cmap__card--dark .sl-cmap__title i { background: rgba(255, 255, 255, .12); color: var(--accent-light); }

.sl-page .sl-cmap__subtitle {
	margin: 1rem 0 .4rem;
	font-size: .95rem;
	font-weight: 700;
	color: var(--brand-700);
}
.sl-page .sl-cmap__card > .sl-cmap__subtitle:first-of-type { margin-top: 0; }
.sl-page .sl-cmap__card p { font-size: .95rem; margin-bottom: 1rem; }
.sl-page .sl-cmap__card p:last-child { margin-bottom: 0; }
.sl-page .sl-cmap__lead { font-weight: 700; color: var(--brand-700); }

/* Tables. The generic .sl-page table rules give the header and striping. */
.sl-page .sl-cmap__table { margin-bottom: 0; font-size: .9rem; }
.sl-page .sl-cmap__table th,
.sl-page .sl-cmap__table td { vertical-align: top; }
.sl-page .sl-cmap__table thead th { white-space: nowrap; }
.sl-page .sl-cmap__table tbody th {
	padding: .85rem 1rem;
	border-top: 1px solid var(--hairline);
	background: transparent;
	color: var(--brand-700);
	font-weight: 700;
	font-size: .9rem;
	text-align: left;
	white-space: nowrap;
}
.sl-page .sl-cmap__table tbody tr:nth-child(even) th { background: var(--brand-50); }
.sl-cmap__icon { width: 1.1rem; margin-right: .3rem; color: var(--accent-dark); text-align: center; }
.sl-cmap__bm-col { white-space: nowrap; text-align: center !important; }
.sl-cmap__stage { text-align: center !important; }
.sl-cmap__table--compact tbody th,
.sl-cmap__table--compact td { padding-block: .6rem; }

.sl-bm {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.7rem;
	height: 1.7rem;
	padding: 0 .4rem;
	margin: .1rem;
	border-radius: 999px;
	background: var(--brand-700);
	color: #fff;
	font-size: .8rem;
	font-weight: 700;
}
.sl-cmap__check { color: #2e7d32; font-size: 1.05rem; }
.sl-cmap__phase { font-weight: 700; color: var(--brand-700); font-size: .85rem; }

/* Ticked lists (entitlement, themes). */
.sl-page .container ul.sl-cmap__checks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .55rem;
}
.sl-page .container ul.sl-cmap__checks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem 1.5rem; }
.sl-page .container ul.sl-cmap__checks > li {
	position: relative;
	margin: 0;
	padding-left: 1.85rem;
	font-size: .95rem;
	line-height: 1.55;
}
.sl-page .container ul.sl-cmap__checks > li::before {
	content: "\f00c";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	position: absolute;
	left: 0;
	top: .1em;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: #2e7d32;
	color: #fff;
	font-size: .65rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Plain bulleted lists inside cards. */
.sl-page .container ul.sl-cmap__list { margin: 0; padding-left: 1.25rem; font-size: .92rem; }
.sl-page .container ul.sl-cmap__list > li { margin-bottom: .3rem; }
.sl-page .container ul.sl-cmap__list--2 { columns: 2; column-gap: 1.5rem; }
.sl-page .container ul.sl-cmap__list--2 > li { break-inside: avoid; }

/* Preparation for adulthood: four steps down the card. */
.sl-cmap__pathway { display: grid; gap: 1.1rem; }
.sl-cmap__pathway-step { display: flex; gap: 1rem; align-items: flex-start; }
.sl-cmap__pathway-step .sl-cmap__subtitle { margin-top: .35rem; }
.sl-cmap__pathway-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-sm);
	background: var(--brand-50);
	color: var(--brand-700);
	font-size: 1.1rem;
}

/* Numbered "supported by" list. */
.sl-page .container ol.sl-cmap__numbered {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .85rem 2rem;
}
.sl-page .container ol.sl-cmap__numbered > li {
	display: flex;
	gap: .75rem;
	align-items: flex-start;
	margin: 0;
	font-size: .95rem;
	line-height: 1.55;
}
.sl-cmap__num {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.7rem;
	height: 1.7rem;
	border-radius: 50%;
	background: var(--accent);
	color: var(--brand-900);
	font-weight: 700;
	font-size: .85rem;
}

@media (max-width: 991.98px) {
	.sl-cmap__grid--2 { grid-template-columns: minmax(0, 1fr); }
	.sl-page .container ol.sl-cmap__numbered { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
	.sl-page .container ul.sl-cmap__checks--2 { grid-template-columns: minmax(0, 1fr); }
	.sl-page .container ul.sl-cmap__list--2 { columns: 1; }
	.sl-page .sl-cmap__table tbody th { white-space: normal; }
}

/* Curriculum map fixes after first render. */
.sl-cmap__columns { columns: 2; column-gap: 2.5rem; }
.sl-cmap__columns p { break-inside: avoid; }
/* Row headings may wrap; nowrap here forced tables wider than their cards. */
.sl-page .sl-cmap__table tbody th { white-space: normal; min-width: 11rem; }
.sl-page .sl-cmap__table thead th { white-space: normal; }
.sl-page .sl-cmap__table thead th.sl-cmap__bm-col,
.sl-page .sl-cmap__table thead th.sl-cmap__stage { white-space: nowrap; }
.sl-page .sl-cmap__table--framework tbody th { min-width: 14rem; }
.sl-scroll-x { max-width: 100%; }
@media (max-width: 767.98px) { .sl-cmap__columns { columns: 1; } }
/* Half-width tables: the benchmark heading may wrap to two lines. */
.sl-cmap__grid--2 .sl-page .sl-cmap__table thead th.sl-cmap__bm-col,
.sl-page .sl-cmap__grid--2 .sl-cmap__table thead th.sl-cmap__bm-col { white-space: normal; min-width: 6rem; }
.sl-page .sl-cmap__grid--2 .sl-cmap__table tbody th { min-width: 9rem; }
/* A single-column map grid must not size its track to the table inside it. */
.sl-cmap__grid { grid-template-columns: minmax(0, 1fr); }
.sl-cmap__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 991.98px) { .sl-cmap__grid--2 { grid-template-columns: minmax(0, 1fr); } }
/* Screen-reader-only labels (.sl-sr-only) are absolutely positioned. Inside a
   scrolling table they would anchor to the section and sit far outside the
   viewport, scrolling the whole page sideways. Anchor them to the scroll box. */
.sl-scroll-x { position: relative; }

/* Nested menu that opens to the LEFT. The Student panel is right-aligned near
   the edge of the screen, so its Careers flyout would run off the right. */
@media (min-width: 992px) {
	#header ul.navbar-nav > li.dropdown .dropdown-menu li.dropdown-submenu.sl-submenu--reverse > .dropdown-menu {
		left: auto;
		right: calc(100% + .5rem);
	}
	#header ul.navbar-nav > li.dropdown .dropdown-menu li.dropdown-submenu.sl-submenu--reverse > .dropdown-menu::before {
		left: auto;
		right: calc(-.5rem - 3px);
	}
	/* The chevron keeps pointing right like every other submenu item; it means
	   "more here", not which side the panel appears on. The panel itself still
	   opens to the left (rules above) so it stays on screen. */
}
/* The map now sits on a white page, so its cards need a hairline to read. */
.sl-cmap .sl-cmap__card { border-color: var(--brand-100); }

/* ==========================================================================
   26. Careers overview: contact links, vision, Gatsby benchmarks
   ========================================================================== */

.sl-contact-person__links { display: grid; gap: .6rem; justify-items: stretch; }
.sl-contact-person__links .sl-btn { justify-content: center; }
@media (max-width: 991.98px) {
	.sl-contact-person__links { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
	.sl-contact-person__links { grid-template-columns: minmax(0, 1fr); }
}

.sl-vision { margin-top: clamp(2.5rem, 5vw, 4rem); }
.sl-page .sl-vision h2 { margin-top: 0; }

/* Gatsby Benchmarks: a plain numbered list that continues the vision text,
   in the same column and tone. */
.sl-page .sl-vision .sl-gatsby__heading {
	margin: clamp(2rem, 3.5vw, 2.75rem) 0 .5rem;
	padding-top: clamp(1.5rem, 3vw, 2.25rem);
	border-top: 1px solid var(--hairline);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--brand-700);
	text-transform: none; /* theme-elements.css uppercases every h3 */
}
.sl-page .sl-vision .sl-gatsby__intro {
	margin: 0 0 1.5rem;
	color: var(--ink-muted);
}
.sl-page .container ol.sl-gatsby {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem 2.5rem;
}
.sl-page .container ol.sl-gatsby > li.sl-gatsby__item {
	display: flex;
	gap: .9rem;
	align-items: flex-start;
	margin: 0;
}
.sl-gatsby__num {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	margin-top: .1rem;
	border-radius: 50%;
	background: var(--accent);
	color: var(--brand-900);
	font-size: .9rem;
	font-weight: 700;
}
.sl-page .sl-vision .sl-gatsby__title {
	margin: 0 0 .25rem;
	font-size: 1rem;
	font-weight: 700;
	color: var(--brand-700);
}
.sl-page .sl-vision .sl-gatsby__text {
	margin: 0;
	font-size: .92rem;
	line-height: 1.6;
	color: var(--ink-muted);
}
@media (max-width: 767.98px) {
	.sl-page .container ol.sl-gatsby { grid-template-columns: minmax(0, 1fr); }
}

/* Section 16 colours every interior-page h2 aubergine, which beat the brand
   band's white heading rule (same specificity, later in the file). */
.sl-page .sl-surface-brand h2,
.sl-page .sl-surface-brand h3 { color: #fff; }
/* A second heading/text block following the vision, separated by a hairline. */
.sl-vision--follow-on {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: clamp(2.5rem, 5vw, 4rem);
	border-top: 1px solid var(--hairline);
}

/* ==========================================================================
   27. Career partners (Careers overview)
   ========================================================================== */

.sl-page .container ul.sl-partners {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
}
.sl-page .container ul.sl-partners > li.sl-partner {
	margin: 0;
	padding: clamp(1.5rem, 2.5vw, 2rem);
	background: #fff;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.sl-page .container ul.sl-partners > li.sl-partner:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
}

/* Fixed-height logo area so cards line up whatever the logo's shape. */
.sl-partner__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 84px;
	margin-bottom: 1.25rem;
}
.sl-partner__logo img {
	max-width: 180px;
	max-height: 72px;
	width: auto;
	height: auto;
	object-fit: contain;
}
/* Placeholder until a logo file is supplied. */
.sl-partner__initials {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 72px;
	height: 72px;
	padding: 0 1.1rem;
	border-radius: 50%;
	background: var(--brand-50);
	border: 1px solid var(--brand-100);
	color: var(--brand-700);
	font-family: var(--font-display);
	font-size: 1.35rem;
	font-weight: 600;
	letter-spacing: .01em;
}

.sl-page .sl-partner .sl-partner__name {
	margin: 0 0 .6rem;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
	text-transform: none;
	color: var(--brand-700);
}
.sl-page .container .sl-partner__name a {
	color: var(--brand-700);
	text-decoration: none;
	font-weight: 700;
}
.sl-page .container .sl-partner__name a:hover {
	color: var(--brand-500);
	text-decoration: underline;
	text-underline-offset: .18em;
}
.sl-page .sl-partner .sl-partner__text {
	margin: 0;
	font-size: .92rem;
	line-height: 1.6;
	color: var(--ink-muted);
}

@media (max-width: 991.98px) {
	.sl-page .container ul.sl-partners { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
	.sl-page .container ul.sl-partners { grid-template-columns: minmax(0, 1fr); }
}
/* Not a bulleted list: undo the interior-page list bullet and indent. */
.sl-page .container ul.sl-partners { padding-left: 0; }
.sl-page .container ul.sl-partners > li::before { content: none; }
.sl-page .container ul.sl-partners > li { position: static; }

/* ==========================================================================
   28. Useful links page
   ========================================================================== */

.sl-page .container .sl-jumps ul {
	list-style: none;
	margin: 0 0 clamp(2.5rem, 5vw, 4rem);
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .6rem;
}
.sl-page .container .sl-jumps li { margin: 0; }
.sl-page .container .sl-jumps li::before { content: none; }
.sl-page .container .sl-jumps a {
	display: inline-block;
	padding: .55rem 1.1rem;
	border-radius: 999px;
	background: var(--brand-50);
	border: 1px solid var(--brand-100);
	color: var(--brand-700);
	font-size: .88rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .2s var(--ease), color .2s var(--ease);
}
.sl-page .container .sl-jumps a:hover {
	background: var(--brand-700);
	border-color: var(--brand-700);
	color: #fff;
}

.sl-linkgroup {
	scroll-margin-top: 90px;
	margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.sl-page .sl-linkgroup .sl-linkgroup__title {
	margin: 0 0 .35rem;
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--brand-700);
	text-transform: none;
}
.sl-page .sl-linkgroup .sl-linkgroup__intro {
	margin: 0 0 1.25rem;
	color: var(--ink-muted);
}
.sl-page .container ul.sl-resources--grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}
/* Host name under the title reads better in lower case without the tracking. */
.sl-resource__source { text-transform: none; letter-spacing: .02em; }
.sl-page .sl-linkgroup__note {
	margin: 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--hairline);
	font-size: .9rem;
	color: var(--ink-muted);
}


/* Local authority cards: council name on top, the same five pages beneath. */
.sl-page .container ul.sl-councils {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}
.sl-page .container .sl-councils > li { margin: 0; padding: 0; }
.sl-page .container .sl-councils li::before { content: none; }
.sl-council {
	background: #fff;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}
.sl-page .sl-council .sl-council__name {
	margin: 0;
	padding: 1rem 1.25rem;
	background: var(--brand-50);
	border-bottom: 1px solid var(--hairline);
	font-size: 1rem;
	font-weight: 700;
	text-transform: none;
}
.sl-page .sl-council .sl-council__name a {
	color: var(--brand-700);
	text-decoration: none;
}
.sl-page .sl-council .sl-council__name a:hover { text-decoration: underline; }
.sl-page .container ul.sl-council__links {
	margin: 0;
	padding: .5rem 0;
	display: block;
}
.sl-page .container .sl-council__links li { margin: 0; padding: 0; }
.sl-page .container .sl-council__links a {
	display: flex;
	align-items: center;
	gap: .65rem;
	padding: .55rem 1.25rem;
	color: var(--ink);
	font-weight: 600;
	font-size: .92rem;
	text-decoration: none;
	transition: background-color .2s var(--ease), color .2s var(--ease);
}
.sl-page .container .sl-council__links a i {
	font-size: .7rem;
	color: var(--brand-300);
	transition: color .2s var(--ease);
}
.sl-page .container .sl-council__links a:hover {
	background: var(--brand-50);
	color: var(--brand-700);
}
.sl-page .container .sl-council__links a:hover i { color: var(--brand-700); }

@media (max-width: 991.98px) {
	.sl-page .container ul.sl-councils { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
	.sl-page .container ul.sl-resources--grid { grid-template-columns: minmax(0, 1fr); }
	.sl-page .container ul.sl-councils { grid-template-columns: minmax(0, 1fr); }
}