/* _single.css — Shared components reused by several Content Pod layouts
   (video poster/embed, content+image blocks, gallery+lightbox, testimonials
   slider, call-to-action band, contact section, carousel). These generic BEM
   names (ev-*, sp-*) are not JM-Reidys-branded — they're shared building
   blocks ported unchanged and re-themed via custom properties only.
   ============================================================================ */

/* ── Video poster / embed (used by: video, media_text, media_reviews) ────── */

.ev-cv__video-wrap {
    border-radius: var(--radius);
    overflow: hidden;
}

.ev-cv__video-poster {
    position: relative;
    width: 100%;
    aspect-ratio: 44 / 32;
    background: var(--color-primary-dark) no-repeat center / cover;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
}

.landscape-video .ev-cv__video-poster {
    aspect-ratio: 111 / 64;
}

.ev-cv__video-poster::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(25, 6, 45, 0.35);
    transition: background var(--transition-base);
}

.ev-cv__video-poster:hover::after {
    background: rgba(25, 6, 45, 0.20);
}

.ev-cv__play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    line-height: 0;
    transition: transform var(--transition-base);
}

.ev-cv__play-btn:hover {
    transform: translate(-50%, -50%) scale(1.08);
}

.ev-cv__video-embed {
    position: absolute;
    inset: 0;
    z-index: 3;
}

.ev-cv__video-embed iframe,
.ev-cv__video-embed video,
.ev-cv__video-self {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
}

/* ── CV list items (used by: content_split) ───────────────────────────────── */

.ev-cv__list {
    list-style: none;
    padding: 0;
    margin: var(--space-6) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.ev-cv__list-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: color-mix(in srgb, currentColor 85%, transparent);
    font-size: var(--text-base);
}

.ev-cv__list-item img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}

/* ── Content + Image Blocks pod (ev-plan) ─────────────────────────────────── */

.ev-plan__header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-20);
    align-items: start;
    margin-bottom: var(--space-16);
}

.ev-plan__heading {
    font-family: var(--font-heading);
    font-size: clamp(var(--text-4xl), 6vw, var(--text-6xl));
    font-weight: 500;;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0;
}

.ev-plan__desc {
    color: color-mix(in srgb, currentColor 75%, transparent);
    line-height: 1.7;
}

.ev-plan__grid {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: repeat(2, 1fr);
}

.ev-plan__grid h3 {
    font-size: clamp(1.125rem, 1rem + 1.5vw, 1.625rem);
}

.ev-plan__grid[data-blocks="1"] { grid-template-columns: 1fr; }
.ev-plan__grid[data-blocks="2"] { grid-template-columns: repeat(2, 1fr); }
.ev-plan__grid[data-blocks="3"] { grid-template-columns: repeat(3, 1fr); }
.ev-plan__grid[data-blocks="4"] { grid-template-columns: repeat(4, 1fr); }
.ev-plan__grid[data-blocks="5"] { grid-template-columns: repeat(5, 1fr); }
.ev-plan__grid[data-blocks="6"] { grid-template-columns: repeat(6, 1fr); }

.ev-plan__block {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ev-plan__block-img-wrap {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.ev-plan__block-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-slow);
}

.ev-plan__block:hover .ev-plan__block-img {
    transform: scale(1.04);
}

.ev-plan__block-tagline {
    position: absolute;
    bottom: var(--space-3);
    left: var(--space-3);
    background: rgba(25, 6, 45, 0.75);
    color: var(--color-highlight);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
}

.ev-plan__block-title {
    font-family: var(--font-heading);
    font-size: var(--text-xl-plus);
    font-weight: 500;
    line-height: 1.2;
    margin: 0;
}

.ev-plan__block-desc {
    color: color-mix(in srgb, currentColor 70%, transparent);
    line-height: 1.6;
    margin: 0;
}

.ev-plan__block-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;
    margin-top: auto;
    transition: gap var(--transition-fast);
}

.ev-plan__block-link:hover {
    gap: var(--space-3);
}

.ev-plan__block .btn {
    align-self: flex-start;
    margin-top: auto;
}

/* Content + Image Blocks — Version 2 (left-aligned image cards; Home "Stop problems") */
.ev-plan--cards .ev-plan__header {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    text-align: left;
    max-width: 768px;
    margin-inline: 0;
    margin-bottom: var(--space-20);
}
.ev-plan--cards .ev-plan__eyebrow {
    display: block;
    color: currentColor;
    font-weight: 600;
}
.ev-plan--cards .ev-plan__heading {
    font-size: var(--font-size-section-heading);
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.ev-plan--cards .ev-plan__desc {
    margin-inline: 0;
    font-size: var(--text-md);
    line-height: 1.5;
}
.ev-plan--cards .ev-plan__grid { gap: var(--space-8); }
.ev-plan--cards .ev-plan__block {
    text-align: left;
    align-items: stretch;
    gap: var(--space-6);
}
.ev-plan--cards .ev-plan__block-img-wrap {
    aspect-ratio: 296 / 160;
    border-radius: var(--radius-xl);
}
.ev-plan--cards .ev-plan__block-title {
    margin-top: 0;
    font-size: var(--text-xl-plus);
    line-height: 1.4;
}
.ev-plan--cards .ev-plan__block-desc {
    max-width: none;
    margin-inline: 0;
    line-height: 1.5;
}

.ev-plan__actions {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--space-6);
    margin-top: var(--space-20);
    flex-wrap: wrap;
}

@media (max-width: 1024px) {
    .ev-plan__header { grid-template-columns: 1fr; gap: var(--space-8); }
    .ev-plan__grid[data-blocks="4"] { grid-template-columns: repeat(2, 1fr); }
    .ev-plan__grid[data-blocks="5"],
    .ev-plan__grid[data-blocks="6"] { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
    .ev-plan__grid[data-blocks="3"],
    .ev-plan__grid[data-blocks="5"],
    .ev-plan__grid[data-blocks="6"] { grid-template-columns: repeat(2, 1fr); }
    .ev-plan__grid[data-blocks="4"] { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .ev-plan__grid { grid-template-columns: 1fr !important; }
}

/* ── Gallery pod (ev-gallery) + Lightbox ──────────────────────────────────── */

.ev-gallery__header {
    text-align: center;
    padding-bottom: var(--space-10);
    display: flex;
    max-width: 768px;
    margin: auto;
    flex-direction: column;
}

.ev-gallery__heading {
    font-family: var(--font-heading);
    font-size: var(--font-size-section-heading);
    font-weight: 500;;
    letter-spacing: -0.01em;
    margin: 0 0 var(--space-4);
}

.ev-gallery__desc {
    color: color-mix(in srgb, currentColor 70%, transparent);
    font-size: var(--text-base);
    max-width: 55ch;
    margin-inline: auto;
    line-height: 1.6;
}

.ev-gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 128px;
    grid-auto-flow: dense;
    gap: var(--space-5);
}

.ev-gallery__grid.is-js {
    display: block;
    position: relative;
}

.ev-gallery__grid.is-js .ev-gallery__thumb {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    grid-row: auto;
}

.ev-gallery__thumb {
    display: block;
    border: none;
    padding: 0;
    background: none;
    cursor: pointer;
    border-radius: var(--radius-sm);
    overflow: hidden;
    width: 100%;
    grid-row: span 2;
}

.ev-gallery__thumb:nth-child(odd) {
    grid-row: span 3;
}

.ev-gallery__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-sm);
    transition: transform var(--transition-slow);
}

.ev-gallery__thumb:hover img {
    transform: scale(1.04);
}

.ev-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(25, 6, 45, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.ev-lightbox.is-open {
    opacity: 1;
    pointer-events: all;
}

.ev-lightbox__img {
    max-width: 90vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: var(--radius-sm);
    display: block;
}

.ev-lightbox__close {
    position: absolute;
    top: var(--space-5);
    right: var(--space-5);
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-white);
    transition: background var(--transition-fast);
}

.ev-lightbox__close:hover { background: rgba(255, 255, 255, 0.2); }

.ev-lightbox__prev,
.ev-lightbox__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-white);
    transition: background var(--transition-fast);
}

.ev-lightbox__prev:hover,
.ev-lightbox__next:hover { background: rgba(255, 255, 255, 0.2); }

.ev-lightbox__prev { left: var(--space-5); }
.ev-lightbox__next { right: var(--space-5); }

.ev-lightbox__prev[disabled],
.ev-lightbox__next[disabled] { opacity: 0.3; cursor: default; }

/* ── Video modal — poster stays static; play opens this and autoplays ──────── */

.ev-video-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(13, 4, 24, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.ev-video-modal.is-open {
    opacity: 1;
    pointer-events: all;
}

.ev-video-modal__inner {
    position: relative;
    width: 100%;
    max-width: 1100px;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--radius);
    overflow: hidden;
}

.ev-video-modal__inner iframe,
.ev-video-modal__inner video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.ev-video-modal__close {
    position: absolute;
    top: var(--space-5);
    right: var(--space-5);
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-white);
    transition: background var(--transition-fast);
    z-index: 1;
}

.ev-video-modal__close:hover { background: rgba(255, 255, 255, 0.2); }

@media (max-width: 640px) {
    .ev-gallery__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; }
    .ev-gallery__thumb,
    .ev-gallery__thumb:nth-child(odd) { grid-row: span 1; }
}

@media (max-width: 480px) {
    .ev-gallery__grid { grid-template-columns: 1fr; grid-auto-rows: 240px; }
    .ev-gallery__thumb,
    .ev-gallery__thumb:nth-child(odd) { grid-row: span 1; }
}

/* ── Media + Reviews pod (ev-testimonials) ────────────────────────────────── */

.ev-testimonials {
    color: var(--color-white);
    padding-top: 0;
}

.ev-testimonials__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto;
    min-height: 560px;
    border-radius: var(--radius);
    overflow: hidden;
}

/* ── Content Layout ratio modifiers (Media + Reviews pod) ────────────────── */
.layout-media-reviews--50-50 .ev-testimonials__inner { grid-template-columns: 50fr 50fr; }
.layout-media-reviews--60-40 .ev-testimonials__inner { grid-template-columns: 60fr 40fr; }
.layout-media-reviews--40-60 .ev-testimonials__inner { grid-template-columns: 40fr 60fr; }
.layout-media-reviews--70-30 .ev-testimonials__inner { grid-template-columns: 70fr 30fr; }
.layout-media-reviews--30-70 .ev-testimonials__inner { grid-template-columns: 30fr 70fr; }
.layout-media-reviews--80-20 .ev-testimonials__inner { grid-template-columns: 80fr 20fr; }
.layout-media-reviews--20-80 .ev-testimonials__inner { grid-template-columns: 20fr 80fr; }

.ev-testimonials__image {
    grid-column: 1;
    grid-row: 1;
    overflow: hidden;
}

.ev-testimonials__image img {
    width: 100%;
    object-fit: cover;
    display: block;
    height: 620px;
    aspect-ratio: 15 / 16;
    border-radius: var(--radius-sm);
}

.ev-testimonials__panel {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ev-testimonials__dots-bar {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    align-items: center;
    padding: var(--space-5) var(--space-1);
}

.ev-testimonials__arrows {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-8);
}

.ev-testimonials__dots {
    display: flex;
    gap: var(--space-2);
}

.ev-testimonials__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.ev-testimonials__dot.is-active {
    background: var(--color-accent);
    transform: scale(1.3);
}

.ev-testimonials__track {
    display: flex;
    flex: 1;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.ev-testimonials__track::-webkit-scrollbar { display: none; }

.ev-testimonials__slide {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    flex: 0 0 100%;
    scroll-snap-align: start;
    padding: var(--space-16) var(--space-12);
}

.vertical-align .ev-testimonials__slide {
    justify-content: center;
}

.ev-testimonials__stars {
    display: flex;
}

.ev-testimonials__star--on { color: var(--color-highlight); }
.ev-testimonials__star:not(.ev-testimonials__star--on) { color: rgba(255, 255, 255, 0.25); }

.ev-testimonials__quote {
    font-family: var(--font-heading);
    font-weight: 500;;
    font-size: var(--text-xl);
    color: var(--color-white);
    line-height: 1.6;
    margin: 0;
}

.ev-testimonials__byline {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.ev-testimonials__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.ev-testimonials__author {
    display: block;
    font-weight: 500;;
    color: var(--color-white);
}

.ev-testimonials__company {
    display: block;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 2px;
}

.ev-testimonials__logo {
    max-height: 32px;
    width: auto;
    object-fit: contain;
    margin-left: auto;
    opacity: 0.85;
    filter: brightness(0) invert(1);
}

.ev-testimonials__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    color: var(--color-white);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
    flex-shrink: 0;
}

.ev-testimonials__btn:hover:not([disabled]) {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.6);
}

.ev-testimonials__btn[disabled] { opacity: 0.25; cursor: default; }

@media (max-width: 1024px) {
    .ev-testimonials__slide { grid-template-columns: 1fr; min-height: auto; }
    .ev-testimonials__image { aspect-ratio: 16 / 9; }
    .ev-testimonials__content { padding: var(--space-10) var(--space-6); }
}

/* ── Call To Action pod (ev-cta) ───────────────────────────────────────────── */

.ev-cta {
    text-align: center;
}

.no-padding {
    padding: 0;
}

/* Centred copy block + optional contained image below, stacked in the
   container. Section background comes from the shared .section.{dark|alt-2}
   Theme Styles class, never set here. */
.ev-cta .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.625rem;
}

.ev-cta__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
    text-align: center;
    max-width: 768px;
}

.ev-cta__heading {
    font-family: var(--font-heading);
    font-size: var(--font-size-section-heading);
    font-weight: 500;;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: inherit;
}

.ev-cta__desc {
    max-width: 68ch;
    font-size: var(--text-md);
    color: color-mix(in srgb, currentColor 85%, transparent);
    line-height: 1.5;
}

.ev-cta__ctas {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    justify-content: center;
    margin-top: var(--space-2);
}

/* Large contained, rounded feature image below the copy. */
.ev-cta__media {
    width: 100%;
    align-self: stretch;
    aspect-ratio: 111 / 64;
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin: 0;
}

.ev-cta__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Get In Touch pod (ev-contact / sp-contact) ───────────────────────────── */

.ev-contact {
    padding-top: 0;
}

.sp-contact__inner {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: var(--space-12);
    align-items: start;
}

/* ── Content Layout ratio modifiers ──────────────────────────────────────── */
.ev-contact--50-50 .sp-contact__inner { grid-template-columns: 50fr 50fr; }
.ev-contact--60-40 .sp-contact__inner { grid-template-columns: 60fr 40fr; }
.ev-contact--40-60 .sp-contact__inner { grid-template-columns: 40fr 60fr; }
.ev-contact--70-30 .sp-contact__inner { grid-template-columns: 70fr 30fr; }
.ev-contact--30-70 .sp-contact__inner { grid-template-columns: 30fr 70fr; }
.ev-contact--80-20 .sp-contact__inner { grid-template-columns: 80fr 20fr; }
.ev-contact--20-80 .sp-contact__inner { grid-template-columns: 20fr 80fr; }

.sp-contact__heading {
    font-family: var(--font-heading);
    font-size: var(--font-size-section-heading);
    font-weight: 500;;
    line-height: 1.15;
    margin-bottom: var(--space-4);
}

.sp-contact__desc {
    color: color-mix(in srgb, currentColor 70%, transparent);
    line-height: 1.7;
}

.ev-contact__details {
    list-style: none;
    margin: var(--space-8) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ev-contact__detail {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.ev-contact__detail svg { flex-shrink: 0; opacity: 0.85; color: var(--color-accent); }

.ev-contact__detail a { color: inherit; text-decoration: none; }
.ev-contact__detail a:hover { text-decoration: underline; }

@media (max-width: 900px) {
    .sp-contact__inner,
    .ev-contact--50-50 .sp-contact__inner,
    .ev-contact--60-40 .sp-contact__inner,
    .ev-contact--40-60 .sp-contact__inner,
    .ev-contact--70-30 .sp-contact__inner,
    .ev-contact--30-70 .sp-contact__inner,
    .ev-contact--80-20 .sp-contact__inner,
    .ev-contact--20-80 .sp-contact__inner {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
}

/* ── Carousel pod (sp-gallery) ─────────────────────────────────────────────── */

.sp-gallery { overflow-x: clip; }

.sp-gallery .container {
    overflow: visible;
}

.sp-gallery__track {
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-right: calc(50% - 50vw);
    padding-right: var(--space-6);
}

.sp-gallery__track::-webkit-scrollbar { display: none; }

/* Card width fits --sp-gallery-visible slides PLUS a peek of the next one
   (divisor is visible + peek, not just visible) — the whole point of this
   carousel style is to signal there's more to scroll to. */
.sp-gallery__slide {
    flex: 0 0 calc(
        (min(100vw, var(--container-max)) - 2 * var(--space-6)
            - var(--sp-gallery-visible, 3) * var(--space-4))
        / (var(--sp-gallery-visible, 3) + var(--sp-gallery-peek, 0.15))
    );
    scroll-snap-align: start;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.sp-gallery__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sp-gallery__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--space-8);
}

.sp-gallery__dots {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.sp-gallery__dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
    border: none;
    padding: 0;
    background: currentColor;
    opacity: 0.3;
    cursor: pointer;
    transition: opacity var(--transition-base), width var(--transition-base);
}

.sp-gallery__dot.is-active { opacity: 1; width: 24px; background: var(--color-accent); }

.sp-gallery__arrows {
    display: flex;
    gap: var(--space-3);
}

.sp-gallery__btn {
    width: 44px;
    height: 44px;
    background: transparent;
    color: currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--transition-base), background var(--transition-base);
    border-radius: var(--radius-sm);
    border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}

.sp-gallery__btn:hover { opacity: 1; background: color-mix(in srgb, currentColor 10%, transparent); }
.sp-gallery__btn:disabled { opacity: 0.35; cursor: default; pointer-events: none; }

/* ── Carousel "overlay" style (carousel_style: 'overlay') — arrows float over
   the track edges instead of sitting in a controls row, dots centered below. */
.sp-gallery__viewport { position: relative; }

.sp-gallery__arrows--overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-4);
    gap: 0;
    pointer-events: none;
}

.sp-gallery__arrows--overlay .sp-gallery__btn {
    pointer-events: auto;
    background: color-mix(in srgb, black 45%, transparent);
    border-color: color-mix(in srgb, white 15%, transparent);
    color: var(--color-white);
    opacity: 1;
}

.sp-gallery__arrows--overlay .sp-gallery__btn:hover {
    background: color-mix(in srgb, black 60%, transparent);
}

.sp-gallery__dots--center {
    justify-content: center;
    margin-top: var(--space-8);
}

/* Mobile visible-count: same peek-inclusive formula, driven by its own
   --sp-gallery-visible-mobile var (default 1) instead of a fixed 82%. */
@media (max-width: 640px) {
    .sp-gallery__slide {
        flex: 0 0 calc(
            (100vw - 2 * var(--space-4)
                - var(--sp-gallery-visible-mobile, 1) * var(--space-4))
            / (var(--sp-gallery-visible-mobile, 1) + var(--sp-gallery-peek, 0.15))
        );
    }
}

/* Card carousel variant (dynamic_grid → Carousel): bleeds to the viewport edge
   exactly like the photo gallery above. The one thing that's different here
   is that the carousel markup is a DIV nested inside .container (not the
   outer <section> the photo gallery uses), and that div still carries the
   .sp-gallery class — including its `overflow-x: clip`. That clip is what
   makes the bleed trick's overflow invisible beyond the section edge on the
   photo gallery (where .sp-gallery IS the full-width section); here, clipping
   at the div's own (container-constrained) box cuts the bleed off before it
   ever reaches the screen edge. Cancel it so the ancestor chain's own clip
   boundary (ultimately .page, at the true viewport edge) applies instead. */
.layout-dgrid__carousel.sp-gallery {
    overflow-x: visible;
}

.sp-gallery--cards .sp-gallery__slide {
    aspect-ratio: auto;
    overflow: visible;
    border-radius: 0;
}
.sp-gallery--cards .sp-gallery__slide > .dcb-card { height: 100%; }
.layout-dgrid__carousel { margin-top: var(--space-4); }

/* ── Crèche Location single template — novel components ───────────────────
   (cr-*) These have no exact match in the ported pod library, so they're
   written fresh here, on the same design tokens as everything above.
   ============================================================================ */

/* ── Hero — large image below the hero text, with a small logo watermark ── */

.cr-hero__media {
    position: relative;
    grid-column: 1;
    margin-top: var(--space-10);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-lift);
}

.cr-hero__media img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 8;
    object-fit: cover;
    display: block;
}

.cr-hero__watermark {
    position: absolute;
    left: var(--space-6);
    bottom: var(--space-6);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: rgba(25, 6, 45, 0.55);
    border-radius: var(--radius-pill);
    backdrop-filter: blur(4px);
}

.cr-hero__watermark img {
    width: auto;
    height: 22px;
    aspect-ratio: auto;
    object-fit: contain;
}

.cr-hero__watermark-text {
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    letter-spacing: 0.02em;
}

@media (max-width: 768px) {
    .cr-hero__media img { aspect-ratio: 4 / 3; }
}

/* ── Location Info — 2-col (intro left, quick-facts right) ────────────────── */

.cr-location__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: center;
}

.cr-location__heading {
    font-family: var(--font-heading);
    font-size: var(--font-size-section-heading);
    font-weight: 500;;
    line-height: 1.15;
    margin: 0 0 var(--space-5);
}

.cr-location__desc {
    max-width: 52ch;
    line-height: 1.7;
    opacity: 0.92;
    margin-bottom: var(--space-6);
}

.cr-location__ctas {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* Quick facts — 2x2 grid with dividers, on the right of the band */
.cr-quickfacts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius);
    overflow: hidden;
}

.cr-quickfacts__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-7) var(--space-6);
    background: var(--color-accent);
}

.cr-quickfacts__label {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.cr-quickfacts__value {
    font-family: var(--font-heading);
    font-size: var(--text-xl-plus);
    font-weight: 500;;
    color: var(--color-white);
    line-height: 1.25;
}

@media (max-width: 900px) {
    .cr-location__inner { grid-template-columns: 1fr; gap: var(--space-10); }
}

@media (max-width: 480px) {
    .cr-quickfacts { grid-template-columns: 1fr; }
}

/* ── Rooms — centred header + per-room meta ───────────────────────────────── */

.cr-rooms__header {
    text-align: center;
    align-items: center;
    max-width: 720px;
    margin-inline: auto;
    margin-bottom: var(--space-12);
}

.cr-rooms__cta {
    margin-top: var(--space-6);
}

.cr-rooms__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: var(--space-2) 0;
    font-size: var(--text-sm);
    color: color-mix(in srgb, currentColor 70%, transparent);
}

/* ── Differentiators — centred header + section actions ───────────────────── */

.cr-diff__header {
    text-align: center;
    max-width: 680px;
    margin-inline: auto;
    margin-bottom: var(--space-12);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.layout-features--center .layout-features__strip {
    text-align: center;
}

.cr-diff__actions {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-top: var(--space-12);
}

.cr-gallery__header {
    margin-bottom: var(--space-8);
    max-width: none;
}

.cr-gallery {
    --sp-gallery-visible: 2 !important;
}

/* ── Features (alternating) — CTAs row ────────────────────────────────────── */

.cr-feature__ctas {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-top: var(--space-6);
}

/* ── The People Here — team card grid ─────────────────────────────────────── */

.cr-team__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
}

.cr-team__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-1);
}

.cr-team__photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: var(--space-4);
}

.cr-team__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cr-team__name {
    font-family: var(--font-heading);
    font-size: var(--text-xl-plus);
    font-weight: 500;;
    color: var(--color-white);
    margin: 0;
}

.cr-team__role {
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.cr-team__socials {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.cr-team__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-white);
    transition: background var(--transition-fast);
}

.cr-team__social:hover {
    background: var(--color-accent);
}

.cr-team__cta {
    text-align: center;
    margin-top: var(--space-14);
}

@media (max-width: 1024px) {
    .cr-team__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .cr-team__grid { grid-template-columns: 1fr; }
}

/* ── What Happens In Our Care — optional link below the strip ─────────────── */

.cr-care__cta {
    text-align: center;
    margin-top: var(--space-10);
}

/* ── Admissions — 2-column long-form text on desktop ──────────────────────── */

.cr-admissions__heading {
    margin-bottom: var(--space-8);
}

.cr-admissions__body {
    columns: 2;
    column-gap: var(--space-12);
}

.cr-admissions__body > *:first-child { margin-top: 0; }

.cr-admissions__cta {
    margin-top: var(--space-8);
}

@media (max-width: 900px) {
    .cr-admissions__body { columns: 1; }
}

/* ── Resources — simple bordered row list ─────────────────────────────────── */

.cr-resources__heading {
    margin-bottom: var(--space-8);
}

.cr-resources__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.cr-resources__item {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-5) 0;
    border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}

.cr-resources__item:first-child {
    border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}

.cr-resources__thumb {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    flex-shrink: 0;
}

.cr-resources__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1;
}

.cr-resources__tag {
    display: inline-flex;
    align-self: flex-start;
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 2px 10px;
    border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
    border-radius: 4px;
    margin-bottom: var(--space-1);
}

.cr-resources__title {
    font-family: var(--font-heading);
    font-size: var(--text-xl-plus);
    font-weight: 400;
    letter-spacing: -0.01em;
}

.cr-resources__excerpt {
    font-size: var(--text-sm);
    color: color-mix(in srgb, currentColor 65%, transparent);
}

.cr-resources__link {
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .cr-resources__item { flex-wrap: wrap; }
}

/* ── Closing CTA — small logo mark above the heading ──────────────────────── */

.cr-cta__logo {
    height: 40px;
    width: auto;
    object-fit: contain;
    margin-bottom: var(--space-2);
}

/* ── Case Study single template — novel components ─────────────────────────
   (cs-*) Simplest template in this project: mostly a long-form narrative
   article, centered single column, generous readable max-width.
   ============================================================================ */
.cs-header {
    padding-bottom: 0;
}

.cs-header__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
}

.cs-header__text {
    max-width: 768px;
    margin-inline: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.cs-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: color-mix(in srgb, currentColor 65%, transparent);
}

.cs-breadcrumb a {
    color: inherit;
    text-decoration: none;
}

.cs-breadcrumb a:hover {
    color: var(--color-accent);
}

.cs-breadcrumb__sep {
    opacity: 0.6;
}

.cs-title {
    font-family: var(--font-heading);
    font-size: clamp(var(--text-4xl), 5vw, var(--text-6xl));
    font-weight: 500;;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--color-text);
    margin: var(--space-4) 0 0;
}

.cs-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-6);
    padding-bottom: var(--space-6);
}

.cs-byline {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.cs-byline__avatar {
    display: flex;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    line-height: 0;
}

.cs-byline__avatar img {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.cs-byline__text {
    font-size: var(--text-sm);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.cs-byline__author {
    font-weight: 500;;
    color: var(--color-text);
}

.cs-byline__sep {
    margin: 0 var(--space-1);
    opacity: 0.6;
}

.cs-featured-image {
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.cs-featured-image img {
    display: block;
    width: 100%;
    object-fit: cover;
    height: 600px;
    align-self: stretch;
    aspect-ratio: 32 / 15;
}

/* ── 2-col "side heading / rich text" content sections ───────────────────────
   Reused for both the native post_content body and each cm_cs_keypoints row
   (Figma "Content / 17" — 468px heading column + 732px body, 80px gap). */

.cs-content__inner {
    display: flex;
    gap: var(--space-20);
    align-items: flex-start;
}

.cs-content__heading {
    flex: 0 0 468px;
    font-family: var(--font-heading);
    font-size: var(--text-3xl-plus) !important;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0;
}

.cs-content__body {
    flex: 1 0 0;
    min-width: 0;
    font-size: var(--text-base);
    line-height: 1.5;
}

.cs-content__body p:last-child { margin-bottom: 0; }

.section.light.cs-content + .section.light.cs-content { padding-top: 0; }

@media (max-width: 900px) {
    .cs-content__inner { flex-direction: column; gap: var(--space-6); }
    .cs-content__heading { flex: none; }
}

@media (max-width: 640px) {
    .cs-meta {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── Research Post single template — novel components ─────────────────────
   (rs-*) Much simpler template than the others: a hero + long-form article
   body rendered from the native editor, so most styling here just supports
   the hero meta grid, tag pills, share row and author card around it.
   ============================================================================ */

/* ── Hero — tagline + tag pills on the left, 2x2 meta grid on the right ──── */

.rs-hero__inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-12);
    align-items: start;
}

/* Archive hero: single-column, left-aligned title + tagline (no meta grid). */
.rs-hero--archive .rs-hero__title { margin-bottom: var(--space-5); }
.rs-hero--archive .rs-hero__desc { max-width: 60ch; margin-bottom: 0; }

.rs-hero__title {
    color: var(--color-white);
    margin: 0 0 var(--space-5);
}

.rs-hero__desc {
    font-size: var(--text-lg);
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    max-width: 52ch;
    margin: 0 0 var(--space-6);
}

.rs-tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
}

.rs-tags__pill {
    font-size: var(--text-sm);
    display: flex;
    padding: 4px 10px;
    align-items: flex-start;
    font-weight: 600;
    border-radius: 4px;
    border: 1px solid rgba(13, 10, 0, 0.15);
}

/* On the dark hero the tag pills need a light border + white text. */
.rs-hero .rs-tags__pill {
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--color-white);
}

.rs-meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-10) var(--space-12);
    margin: 0;
    padding: 0;
}

.rs-meta__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

/* Figma: label is the Anton heading, value is the light regular line below. */
.rs-meta__label {
    font-family: var(--font-heading);
    font-size: var(--text-xl-plus);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--color-white);
}

.rs-meta__value {
    font-size: var(--text-base);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.rs-meta__value a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration-color: rgba(255, 255, 255, 0.4);
}

.rs-meta__value a:hover {
    color: var(--color-highlight);
    text-decoration-color: var(--color-highlight);
}

.rs-share.bottom {
    padding-top: var(--space-16) !important;
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-12);
    align-self: stretch;

	.rs-share__label {
	    font-size: var(--text-md);
	}

	.rs-share {
	    flex-direction: column;
	}
}

@media (max-width: 900px) {
    .rs-hero__inner { grid-template-columns: 1fr; }
    .rs-meta { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .rs-meta { grid-template-columns: 1fr; }
}

/* ── Article body — single centred column, generous reading width ────────── */

.rs-article__inner {
    max-width: 768px;
    margin-inline: auto;
}

.rs-article__body figure {
    margin: var(--space-8) 0;
}

/* Pull-quote — left accent bar, italic (from the WYSIWYG editor). */
.rs-article__body blockquote {
    margin: var(--space-8) 0;
    padding: var(--space-1) 0 var(--space-1) var(--space-6);
    border-left: 3px solid var(--color-accent);
    font-style: italic;
    font-size: var(--text-lg);
    line-height: 1.6;
    color: color-mix(in srgb, currentColor 85%, transparent);
}
.rs-article__body blockquote p:last-child { margin-bottom: 0; }

.rs-article__body.wysiwyg .wp-caption {
    width: 100% !important;
}

.rs-article__body figure img {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    display: block;
}

.rs-article__body figcaption {
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    color: color-mix(in srgb, currentColor 65%, transparent);
    text-align: left;
}

.rs-article__ext-link {
    margin-top: var(--space-8);
}

/* ── Share row — icon buttons + a repeat of the tag pills ─────────────────── */

.rs-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-5);
    padding-top: var(--space-8);
    border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}

.cs-meta .rs-share {
    border-top: none;
    padding-top: 0;
}

.rs-share__label {
    font-weight: 500;;
    color: var(--color-primary);
}

.rs-share__icons {
    display: flex;
    gap: var(--space-3);
}

.rs-share__icon {
    cursor: pointer;
}

.rs-tags--footer {
    margin-left: auto;
}

.rs-tags--footer .rs-tags__pill {
    color: var(--color-primary);
}

.single--news .rs-share {
    border-top: 0;
    padding-top: 0;
}

.single--news .section.rs-article {
    padding-top: 0;
}

@media (max-width: 640px) {
    .rs-tags--footer { margin-left: 0; }
}

/* ── Author bio card — small centred card at the very bottom ─────────────── */

.rs-author {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-2);
    margin: var(--space-12) auto 0;
    padding: var(--space-12) 0 0;
    border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}

.rs-author__avatar {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 500;;
    margin-bottom: var(--space-2);

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }
}

.rs-author__meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
}

.rs-author__name {
    font-weight: 500;;
    color: var(--color-primary);
    margin: 0;
}

.rs-author__role {
    font-size: var(--text-sm);
    color: color-mix(in srgb, currentColor 65%, transparent);
    margin: 0;
}

/* ── Pathway single template — novel components ────────────────────────────
   (path-*) No exact match in the ported pod library for the audience
   switcher, the services card grid, or the citation list, so they're
   written fresh here, on the same design tokens as everything above.
   ============================================================================ */

/* ── Hero — centred title/body/actions + a wide image below (Figma) ──────── */

.path-hero .hero__inner {
    text-align: center;
    justify-items: center;
}
.path-hero .hero__title,
.path-hero .hero__body {
    margin-inline: auto;
    max-width: 44ch;
}
.path-hero .hero__actions {
    justify-content: center;
}
.path-hero__body.wysiwyg {
    margin-top: var(--space-6);
    text-align: left;
}
.path-hero__image {
    margin-top: var(--space-12);
}
.path-hero__image img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-xl);
    display: block;
}

/* ── Audience switcher — small icon-grid nav across all Pathway posts ────── */

.path-nav__title {
    margin-bottom: var(--space-10);
    text-align: center;
}

.path-nav__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}

.path-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
    padding: var(--space-5);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    transition: background var(--transition-base);
}

.path-nav__item:hover {
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}

.path-nav__item.is-active {
    background: var(--color-highlight);
    color: var(--color-primary);
}

.path-nav__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-card);
    color: var(--color-primary);
    flex-shrink: 0;
}

.path-nav__icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.path-nav__label {
    font-weight: 600;
    font-size: var(--text-sm);
}

@media (max-width: 768px) {
    .path-nav__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Finding Your Way Forward Together — help blocks + video ──────────────── */

.path-help__title {
    margin-bottom: var(--space-8);
}

.path-help__video {
    margin-top: var(--space-12);
    max-width: 720px;
    margin-inline: auto;
}

/* ── Services — 3-card grid (Figma: borderless cards, image + tag) ───────── */

.path-services__eyebrow {
    color: var(--color-accent);
}

.path-services__intro {
    margin-top: var(--space-2);
    color: color-mix(in srgb, currentColor 70%, transparent);
}

.path-services__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
    margin-top: var(--space-10);
}

.path-services__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.path-services__image {
    aspect-ratio: 3 / 2;
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: var(--space-3);
}
.path-services__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.path-services__tag {
    display: inline-flex;
    align-self: flex-start;
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 2px 10px;
    border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
    border-radius: 4px;
}

.path-services__label {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--text-sm);
    font-weight: 500;;
    color: var(--color-accent);
}

.path-services__title {
    font-family: var(--font-heading);
    font-size: var(--text-xl-plus);
    font-weight: 500;;
    margin: 0;
}

.path-services__desc {
    color: color-mix(in srgb, currentColor 70%, transparent);
    line-height: 1.6;
}

.path-services__more {
    display: flex;
    justify-content: center;
    margin-top: var(--space-12);
}

.path-services__links {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: var(--space-2);
}

@media (max-width: 1024px) {
    .path-services__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .path-services__grid { grid-template-columns: 1fr; }
}

/* ── Sources and Further Reading — simple citation list ───────────────────── */

.path-research__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.path-research__item {
    padding-bottom: var(--space-5);
    border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}

.path-research__item a {
    font-weight: 500;;
    color: var(--color-accent);
    text-decoration: underline;
}

.path-research__meta {
    margin-top: var(--space-1);
    font-size: var(--text-sm);
    color: color-mix(in srgb, currentColor 65%, transparent);
}

/* ── Practice Area single template — novel components ──────────────────────
   (pa-*) Hero + body reuse existing hero/wysiwyg patterns unchanged. The
   Highlights section reuses the Tabbed Showcase pod with a horizontal-tabs
   modifier (see .layout-tabbed--horizontal in _layouts.css) plus a small
   text-only detail pane style below. Key Points and External Supports reuse
   .layout-features__strip unchanged. Resources here is the same simple
   bordered-row list pattern as the Crèche template's .cr-resources__*, just
   re-namespaced and set on a dark background per the mockup.
   ============================================================================ */

.single-cm_practice_area .hero__title{
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.05;
}
.single-cm_practice_area .pa-body__content h2{
  font-size: clamp(26px, 3.1vw, 40px);
  line-height: 1.12;
}
.single-cm_practice_area .layout-tabbed__heading,
.single-cm_practice_area .layout-features__title{
  font-size: clamp(26px, 3.1vw, 40px);
  line-height: 1.12;
}
.single-cm_practice_area .pa-body__content h3{
  font-size: clamp(20px, 2.1vw, 26px);
  line-height: 1.2;
}
.single-cm_practice_area .pa-highlights__title{
  font-size: clamp(19px, 1.9vw, 24px);
}
.single-cm_practice_area .layout-features__item-title{
    /* Match the !important declaration in _layouts.css. */
    font-size: clamp(18px, 1.7vw, 21px) !important;
}

.pa-highlights__detail {
    position: static;
}

.pa-highlights__pane {
    padding: var(--space-2) 0;
}

.pa-highlights__title {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: 500;;
    line-height: 1.2;
    margin-bottom: var(--space-3);
}

.pa-highlights__desc {
    color: color-mix(in srgb, currentColor 75%, transparent);
    line-height: 1.7;
    max-width: 65ch;
}

.pa-resources__heading {
    margin-bottom: var(--space-10);
}

.pa-resources__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.pa-resources__item {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding-block: var(--space-6);
    border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}

.pa-resources__item:first-child {
    border-top: none;
}

.pa-resources__thumb {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.pa-resources__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1;
}

.pa-resources__title {
    font-family: var(--font-heading);
    font-weight: 500;;
}

.pa-resources__excerpt {
    font-size: var(--text-sm);
    color: color-mix(in srgb, currentColor 65%, transparent);
}

.pa-resources__link {
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .pa-resources__item { flex-wrap: wrap; }
}

.pa-external__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
}

.pa-external__intro {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 60ch;
}

.pa-external .layout-features__strip .layout-features__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
}

/* ── Event single template — novel components ──────────────────────────────
   (evt-*) Structurally mirrors the Research Post template (rs-*) — a hero +
   long-form article body, share row and author card, all reused directly
   (.rs-share, .rs-tags, .rs-author, .rs-article__*) — but the hero sits on a
   LIGHT/cream background instead of dark navy, with event-specific meta and
   two booking CTAs. Deliberately does not reuse the generic `.hero__title`/
   `.hero__body` BEM: that component hardcodes white text for legibility over
   photography, which would be illegible here against the cream background
   (the same latent issue exists in the Crèche Location template's `.cr-hero`
   on `.section.light` — worth a look there too).
   ============================================================================ */

.evt-hero__inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-12);
    align-items: start;
    margin-top: var(--space-8);
}

.evt-hero__title {
    font-family: var(--font-heading);
    font-size: clamp(var(--text-4xl), 5vw, var(--text-6xl));
    font-weight: 500;;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--color-primary);
    margin: 0 0 var(--space-5);
}

.evt-hero__desc {
    font-size: var(--text-lg);
    color: var(--color-primary);
    opacity: 0.8;
    line-height: 1.6;
    max-width: 52ch;
    margin: 0 0 var(--space-8);
}

.evt-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

/* ── Shared meta list (template-parts/shared/meta-list.php) ─────────────────
   Generic 2-col label/value grid. Used by Event (hero date/location/speaker/
   type), and reusable by Job/Crèche without depending on Event's naming
   (single-cm_event.php's old `.evt-meta` markup was replaced by this shared
   part — the old selector has been removed). */
.cm-meta-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6) var(--space-8);
    margin: 0;
    padding: var(--space-8);
    background: var(--color-white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

.cm-meta-list[data-columns="1"] { grid-template-columns: 1fr; }
.cm-meta-list[data-columns="3"] { grid-template-columns: repeat(3, 1fr); }

.cm-meta-list__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.cm-meta-list__label {
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: color-mix(in srgb, currentColor 60%, transparent);
}

.cm-meta-list__value {
    font-family: var(--font-heading);
    font-size: var(--text-md);
    font-weight: 500;;
    color: var(--color-primary);
    margin: 0;
}

@media (max-width: 480px) {
    .cm-meta-list,
    .cm-meta-list[data-columns] { grid-template-columns: 1fr; }
}

/* ── Event single (Figma "Events post page") ──────────────────────────────
   Header meta is a plain 2×2 grid (no card box), with the Anton label above a
   light regular value — matching the research/event hero design. Scoped to the
   event hero so the boxed .cm-meta-list stays available to other templates. */
.evt-hero .cm-meta-list {
    padding: 0;
    background: none;
    box-shadow: none;
    gap: var(--space-10) var(--space-12);
}
.evt-hero .cm-meta-list__label {
    font-family: var(--font-heading);
    font-size: var(--text-xl-plus);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--color-primary);
}
.evt-hero .cm-meta-list__value {
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: 400;
    color: color-mix(in srgb, currentColor 70%, transparent);
}

/* Article top row: breadcrumb left, share buttons right (no divider here). */
.rs-article__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-10);
}
.rs-article__top .rs-share {
    border-top: 0;
    padding-top: 0;
}

/* Event article footer: share, tags and author all centred (Figma). */
.single--event .rs-share {
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.single--event .rs-tags--footer {
    margin: var(--space-4) auto 0;
    justify-content: center;
}

.evt-hero__image {
    margin-top: var(--space-14);
}

.evt-hero__share {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-8);
    padding-top: 0;
    border-top: none;
}

@media (max-width: 900px) {
    .evt-hero__inner { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .evt-hero__share { flex-direction: column; align-items: flex-start; }
}

/* ── Closing CTA — split layout with an image on the right. .ev-cta only
   supports a full-bleed bg-image + overlay (layout-cta.php), so this is a
   distinct two-column modifier for when a right-hand image is wanted
   instead, reusing .ev-cta__heading/__desc/__ctas unchanged. ────────────── */

.ev-cta--split .ev-cta__inner {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-12);
    align-items: center;
    text-align: left;
}

.ev-cta--split .ev-cta__desc {
    max-width: none;
    margin-inline: 0;
}

.ev-cta--split .ev-cta__ctas {
    justify-content: flex-start;
}

.evt-cta__image {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-lift);
}

.evt-cta__image img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

@media (max-width: 900px) {
    .ev-cta--split .ev-cta__inner { grid-template-columns: 1fr; text-align: center; }
    .ev-cta--split .ev-cta__ctas  { justify-content: center; }
}

/* ── CTA pod "Split" layout (layout-cta.php cta_layout=split) — heading in a
   left column, description + buttons in a right column, spanning the full
   container (About "Join Us"). Scoped to .layout-cta--split so the single-
   template closing CTA (.ev-cta--split above) is unaffected. ─────────────── */
.layout-cta--split .ev-cta__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-20);
    max-width: none;
    width: 100%;
    align-items: center;
}
.layout-cta--split .ev-cta__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6);
}
@media (max-width: 900px) {
    .layout-cta--split .ev-cta__inner { grid-template-columns: 1fr; }
    .layout-cta--split .ev-cta__body  { align-items: center; }
}

/* ── Service single template — novel components (srv-*) ────────────────────
   Everything else on this template reuses ported components verbatim
   (hero / media-text / layout-features / ev-testimonials / ev-cta). These
   are the few genuinely new shapes: the Overview CTA note, the Key Band's
   stacked icon+text list (right column of the shared layout-features__upper
   grid), the plain schema-only sections, and the 3-up numbered Process Steps.
   ============================================================================ */

/* Overview Image is optional on this CPT. When it's empty the template swaps
   the .media-text__media column for a heading-only column instead (eyebrow +
   title left, body + CTAs right) — matching the plain two-column text block
   used elsewhere on the site (e.g. /our-services/), rather than stacking
   everything in one full-width column. Scoped to .srv-overview rather than
   the shared .media-text component so other templates/pods keep their
   current (always-has-media) behaviour. */
.srv-overview--no-media .media-text__inner {
    align-items: start;
}

.srv-overview--no-media .media-text__heading-col .eyebrow {
    display: block;
    margin-bottom: var(--space-3);
}

.srv-overview--no-media .media-text__heading-col .media-text__heading {
    margin-bottom: 0;
}

.srv-overview__ctas {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-top: var(--space-8);
}

.srv-overview__cta-note {
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    color: color-mix(in srgb, currentColor 65%, transparent);
}

/* Video always sits directly under the Overview block (fixed template order,
   nothing else can render between them) — close the full section-to-section
   padding gap so the video reads as part of the block above it. */
.srv-overview.media-text {
    padding-bottom: var(--space-5);
}

.srv-video.section {
    padding-top: var(--space-5);
}

.srv-band__items {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

/* Key Band with no items — centered statement, same proportions as
   .srv-focus__quote below, just on the light band instead of alt-2. */
.srv-band__statement {
    max-width: 40ch;
    margin: 0 auto;
    text-align: center;
    font-family: var(--font-heading);
    font-size: var(--font-size-section-heading);
    font-weight: 500;
    line-height: 1.25;
}

.srv-band__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.srv-band__item .layout-features__item-icon {
    flex-shrink: 0;
    margin-bottom: 0;
}

.srv-band__item-body .layout-features__item-title,
.srv-band__item-body .layout-features__item-desc {
    text-align: left;
}

/* ── Plain schema-only sections (audience / focus / outcomes / media) ────── */

.srv-audience__heading {
    margin-bottom: var(--space-6);
}

.srv-audience__desc {
    max-width: 70ch;
}

.srv-audience__bullets {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding-left: var(--space-6);
    list-style: disc;
}

.srv-audience__cta {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-top: var(--space-8);
}

.srv-audience__cta-note {
    font-size: var(--text-sm);
    color: color-mix(in srgb, currentColor 65%, transparent);
}

/* "Who This Service Is For" sits directly above the headerless Service
   Features strip again — tighten the space between them so the strip reads
   as belonging to the block above it, rather than two separate sections. */
.srv-audience.layout-split {
    padding-bottom: var(--space-10);
}

.srv-features.layout-features {
    padding-top: var(--space-10);
}

/* "See More" link hidden for now (kept in the markup so it's a one-line
   revert — remove this rule to bring it back). */
.srv-features .layout-features__item-link {
    display: none;
}

.srv-focus__quote {
    max-width: 60ch;
    margin: 0 auto;
    text-align: center;
    font-family: var(--font-heading);
    font-size: clamp(24px, 3vw, 40px);
    font-weight: 500;;
    line-height: 1.2;
    border-left: none;
    padding-left: 0;
    /* The base `blockquote` rule (_typography.css) hardcodes a dark
       `--color-text`, which wins over the alt-2 band's inherited white since
       inheritance always loses to a rule matching the element itself. */
    color: inherit;
}

.srv-cta {
    padding-block: var(--space-16);
}

.srv-media__video {
    margin-bottom: var(--space-10);
    border-radius: var(--radius);
    overflow: hidden;
}

.srv-media__video iframe { width: 100%; aspect-ratio: 16 / 9; display: block; }

/* ── Process Steps — 3-up numbered grid (novel; not chronological, so the
   timeline connecting-line treatment doesn't apply — a simple badge does) ── */

.srv-process__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
}

.srv-process__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.srv-process__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-weight: 500;;
    font-size: var(--text-base);
    margin-bottom: var(--space-2);
}

.srv-process__heading {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 500;;
    line-height: 1.2;
}

.srv-process__desc {
    color: color-mix(in srgb, currentColor 70%, transparent);
    line-height: 1.5;
}

@media (max-width: 860px) {
    .srv-process__grid { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* ── Testimonial band — static card grid (Service template only; independent
   of the shared ev-testimonials slider used by layout-media-reviews.php) ─── */

.srv-testimonial__head {
    margin-bottom: var(--space-10);
}

.srv-testimonial__heading {
    color: var(--color-white);
    margin: 0;
}

.srv-testimonial__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.srv-testimonial__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-sm);
    padding: var(--space-8) var(--space-6);
}

.srv-testimonial__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.18);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
}

.srv-testimonial__stars {
    display: flex;
    gap: 2px;
}

.srv-testimonial__star--on { color: var(--color-white); }
.srv-testimonial__star:not(.srv-testimonial__star--on) { color: rgba(255, 255, 255, 0.35); }

.srv-testimonial__quote {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-white);
    margin: 0;
}

.srv-testimonial__author {
    font-weight: 500;
    color: var(--color-white);
}

@media (max-width: 1024px) {
    .srv-testimonial__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .srv-testimonial__grid { grid-template-columns: 1fr; }
}

/* ── Hero — Service now reuses layout-hero-story.php (the same "Hero Split"
   component /our-services/ uses via page-pods.php), hs_bg="dark", so it needs
   no novel CSS of its own — dark/light/alt-1/alt-2 backgrounds are generated
   at runtime from the "Theme Styles" ACF options page (see
   speire-base/modules/cm_theme_styles.php), not from static CSS. ────────── */

/* ── Who This Service Is For — icon grid variant (falls back to the plain
   text/bullets rendering — .srv-audience__desc/__bullets/__cta above —
   when no icon-grid items are entered) ───────────────────────────────────── */

.srv-audience__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
}

/* Column count follows the actual item count (1-4, same [data-count] pattern
   as .layout-features__strip) so 2 items fill half the row width each
   instead of sitting in 2 of 4 fixed 25% tracks. */
.srv-audience__grid[data-count="1"] { grid-template-columns: 1fr; }
.srv-audience__grid[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
.srv-audience__grid[data-count="3"] { grid-template-columns: repeat(3, 1fr); }

.srv-audience__item {
    display: flex;
    flex-direction: column;
}

.srv-audience__item .layout-features__item-title,
.srv-audience__item .layout-features__item-desc {
    text-align: left;
}

.srv-audience__item .btn--link {
    margin-top: var(--space-2);
    align-self: flex-start;
}

@media (max-width: 1024px) {
    .srv-audience__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .srv-audience__grid { grid-template-columns: 1fr; }
}

/* ── Related Services — centered header + single action row below the grid ── */

.srv-related__header {
    max-width: 60ch;
    margin: 0 auto var(--space-10);
    text-align: center;
}

.srv-related__header .srv-related__heading {
    margin-top: var(--space-2);
}

.srv-related__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-10);
}

/* ── Services archive (archive-cm_service.php) ────────────────────────────── */

.srv-archive__grid {
    margin-bottom: var(--space-10);
}

.pagination .nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 600;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.pagination .page-numbers:hover {
    border-color: var(--color-accent);
}

.pagination .page-numbers.current {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

/* ── Job Vacancy (single-cm_job.php) ──────────────────────────────────────
   The hero reuses .rs-hero__inner / .rs-tags / .rs-meta structurally (see
   single-cm_research.php) but is restyled here, scoped under .job-hero, to
   match Figma exactly: outlined (not filled) pills, a boxless meta list with
   large Anton labels + plain values below (inverted from Research's small-
   label/bold-value convention), and a wider column gap. Body sections + the
   "Why you should join" band reuse .cs-content (Case Study's 2-col pattern). */

.job-hero .rs-hero__inner {
    gap: var(--space-20);
}

.job-hero__pills {
    margin-bottom: var(--space-5);
}

.job-hero .rs-tags__pill {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.job-hero__ref {
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.6);
}

.job-hero__actions {
    margin-top: var(--space-8);
}

.job-hero__meta {
    max-width: 480px;
    background: none;
    padding: 0;
    border-radius: 0;
}

.job-hero__meta .rs-meta__label {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 400;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--color-white);
    margin-bottom: var(--space-1);
}

.job-hero__meta .rs-meta__value {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
}

.job-whyjoin{
    padding-bottom: var(--space-28);
}
.job-whyjoin__inner {
    align-items: center;
}

.job-whyjoin__intro {
    flex: 0 0 auto;
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.job-whyjoin .cs-content__body {
    flex: 0 0 auto;
    width: 50%;
}

@media (max-width: 900px) {
    .job-whyjoin__intro,
    .job-whyjoin .cs-content__body { width: 100%; }
}

/* ── Apply modal ─────────────────────────────────────────────────────────── */

.job-apply-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
}

.job-apply-modal.is-open {
    display: flex;
}

.job-apply-modal__backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--color-primary) 70%, transparent);
}

.job-apply-modal__dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--color-white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lift);
    padding: var(--space-10);
}

.job-apply-modal__close {
    position: absolute;
    top: var(--space-5);
    right: var(--space-5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-bg-alt);
    color: var(--color-primary);
    border: none;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.job-apply-modal__close:hover,
.job-apply-modal__close:focus-visible {
    background: var(--color-accent);
    color: var(--color-white);
}

.job-apply-modal__label {
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-2);
}

.job-apply-modal__title {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: 500;;
    color: var(--color-primary);
    margin: 0 0 var(--space-6);
}

.job-apply-modal__terms {
    margin-bottom: var(--space-6);
}

.job-apply-modal__terms a {
    color: var(--color-accent);
    text-decoration: underline;
}

.job-apply-modal__external {
    margin-top: var(--space-5);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.job-apply-modal__external a {
    color: var(--color-accent);
    font-weight: 600;
}

body.job-modal-open {
    overflow: hidden;
}

@media (max-width: 480px) {
    .job-apply-modal__dialog {
        padding: var(--space-6);
    }
}

/* ── News single (native Post) — novel components ────────────────────────────
   (.news-*) Centred 768px hero (back link, category+read-time, title, full
   image, byline+share row) then the shared 2-col article body pattern
   (.rs-article__*, .rs-share, .rs-tags, .rs-author) reused from Event/Case
   Study. ============================================================ */

.news-hero > .container {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
}

.news-hero__text {
    margin-inline: auto;
    max-width: 768px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.meta-share {
    max-width: 100%;
}

.news-hero__back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    align-self: flex-start;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
}

.news-hero__back:hover { color: var(--color-accent); }

.news-hero__info {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.news-hero__tag {
    font-size: var(--text-sm);
    font-weight: 600;
    padding: 4px 10px;
    border: 1px solid color-mix(in srgb, var(--color-text) 15%, transparent);
    border-radius: var(--radius-sm);
    color: var(--color-text);
}

.news-hero__readtime {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
}

.news-hero__title {
    font-family: var(--font-heading);
    font-size: clamp(var(--text-4xl), 5vw, var(--text-6xl));
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--color-primary);
    margin: 0;
}

.news-hero__image {
    width: 100%;
}

.news-hero__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.news-hero__byline {
    display: flex;
    gap: var(--space-8);
}

.news-hero__byline-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.news-hero__byline-label {
    font-size: var(--text-sm);
    color: color-mix(in srgb, currentColor 60%, transparent);
}

.news-hero__byline-value {
    font-weight: 600;
    color: var(--color-primary);
}

.news-article__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

@media (max-width: 640px) {
    .news-hero__meta { flex-direction: column; align-items: flex-start; }
    .news-hero__byline { gap: var(--space-6); }
}

/* ══════════════════════════════════════════════════════════════════════════
   Room single template (single-cm_room.php) + shared split hero
   ════════════════════════════════════════════════════════════════════════ */

/* ── Shared split hero: title left, desc+buttons right, wide image below ──
   Used by single-cm_room.php and single-cm_creche.php. Sits on .section.light
   so the title/text follow the light band's dark text (fixes the old
   white-title-on-cream bug). */
.split-hero__top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: start;
}
.split-hero__title {
    font-family: var(--font-heading);
    font-size: clamp(var(--text-4xl), 6vw, var(--text-6xl));
    font-weight: 500;;
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin: 0;
    max-width: 14ch;
}
.split-hero__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding-top: var(--space-2);
}
.split-hero__desc {
    font-size: var(--text-md);
    line-height: 1.6;
    color: color-mix(in srgb, currentColor 80%, transparent);
}
.split-hero__desc p { margin: 0 0 var(--space-4); }
.split-hero__desc p:last-child { margin-bottom: 0; }
.split-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.split-hero__image {
    margin-top: var(--space-12);
}
.split-hero__image img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-xl);
    display: block;
}
@media (max-width: 900px) {
    .split-hero__top { grid-template-columns: 1fr; gap: var(--space-6); }
    .split-hero__title { max-width: none; }
}

/* ── Vertical timeline (room "What children experience", dark 2-col) ────── */
.rm-timeline__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: start;
}
.rm-timeline__heading {
    font-family: var(--font-heading);
    font-size: var(--font-size-section-heading);
    font-weight: 500;;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: var(--space-4) 0 0;
}
.rm-timeline__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-8); }
.rm-timeline__list { list-style: none; margin: 0; padding: 0; }
.rm-timeline__item { display: grid; grid-template-columns: 48px 1fr; gap: var(--space-6); position: relative; padding-bottom: var(--space-10); }
.rm-timeline__item:last-child { padding-bottom: 0; }
/* connector line down from each marker except the last */
.rm-timeline__item:not(:last-child) .rm-timeline__marker::after {
    content: "";
    position: absolute;
    top: 48px;
    left: 23px;
    bottom: 0;
    width: 1px;
    background: color-mix(in srgb, currentColor 25%, transparent);
}
.rm-timeline__marker {
    position: relative;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.rm-timeline__marker img { width: 32px; height: 32px; object-fit: contain; }
.rm-timeline__item-title { font-family: var(--font-heading); font-size: var(--text-xl-plus); font-weight: 400; margin: 0 0 var(--space-2); }
.rm-timeline__item-desc { margin: 0; color: color-mix(in srgb, currentColor 75%, transparent); line-height: 1.5; }
@media (max-width: 900px) {
    .rm-timeline__inner { grid-template-columns: 1fr; gap: var(--space-10); }
}

/* ── Icon bullet list (room media + list) ──────────────────────────────── */
.rm-list { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.rm-list__item { display: flex; align-items: center; gap: var(--space-3); }
.rm-list__icon { flex-shrink: 0; display: inline-flex; }
.rm-list__icon img { width: 20px; height: 20px; object-fit: contain; }
.rm-list__text { font-size: var(--text-base); }
.rm-media__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-8); }

/* ── Sub-items (room media + split, 2-col heading/text pairs) ───────────── */
.rm-subitems { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); margin-top: var(--space-6); }
.rm-subitems__title { font-family: var(--font-heading); font-size: var(--text-xl-plus); font-weight: 400; margin: 0 0 var(--space-2); }
.rm-subitems__text { margin: 0; color: color-mix(in srgb, currentColor 70%, transparent); line-height: 1.5; }
@media (max-width: 640px) { .rm-subitems { grid-template-columns: 1fr; } }

/* ── Rich text 2-col blocks (room) ─────────────────────────────────────── */
.rm-rich__inner { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-16); align-items: start; }
.rm-rich__heading { font-family: var(--font-heading); font-size: var(--font-size-section-heading); font-weight: 500;; line-height: 1.1; letter-spacing: -0.01em; margin: 0; }
.rm-rich__body { line-height: 1.6; }
.rm-rich--media .rm-rich__inner { grid-template-columns: 1fr 1fr; align-items: center; }
.rm-rich--media .rm-rich__col { display: flex; flex-direction: column; gap: var(--space-4); }
.rm-rich__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-xl); display: block; }
@media (max-width: 900px) {
    .rm-rich__inner,
    .rm-rich--media .rm-rich__inner { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* ── Reconstructed 2026-08-14 (K08 room-template rebuild) — the pieces above
   this point are the original leftover rules; everything below fills gaps
   the rebuild needed that weren't already covered by shared component CSS
   (hero, layout-features, media-text, ev-cta). ─────────────────────────── */

.rm-hero__media {
    margin-top: var(--space-10);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-lift);
}
.rm-hero__media img { width: 100%; height: auto; aspect-ratio: 16 / 8; object-fit: cover; display: block; }

.rm-highlights__header {
    text-align: center;
    max-width: 680px;
    margin-inline: auto;
    margin-bottom: var(--space-10);
}

.rm-highlights .layout-features__item-icon {
    width: 64px;
    height: 64px;
    aspect-ratio: 1;
}

.rm-highlights .layout-features__item-icon img {
    object-fit: contain;
}

.rm-list--plain .rm-list__item { align-items: flex-start; }

.rm-timeline__col { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }

.rm-cta__logo { height: 40px; width: auto; object-fit: contain; margin-bottom: var(--space-2); }

@media (max-width: 900px) {
    .rm-hero__media img { aspect-ratio: 4 / 3; }
}