/*
 * FAMILY — CORPORATE. Consulting, IT, professional and advisory services.
 * ===========================================================================
 *
 * ## What a FAMILY is, and why this file exists (phase 6)
 *
 * Every theme before this was a standalone stylesheet of ~600-750 lines. That
 * is the right shape for six themes and the wrong shape for twenty-five: the
 * arithmetic comes to roughly eighteen thousand lines of CSS, and a fix to the
 * services grid would have to be made in twenty-five places, which means it
 * will be made in twenty-three.
 *
 * So a template is now TWO stylesheets, loaded as two <link>s in this order:
 *
 *     /themes/_families/corporate.css     <- this file. Structure.
 *     /themes/{key}/theme.css             <- the variant. Tokens + signature.
 *
 * This file holds everything STRUCTURAL — layout, rhythm, composition, the
 * relationships between elements. It defines no colour, no typeface and no
 * absolute size of its own: every one of those is read from a token that the
 * variant sets. A variant is 40-80 lines and reskins the whole family.
 *
 * Two links rather than an `@import`, because `@import` is render-blocking and
 * serialises the two requests — 5a rejected exactly that for webfonts. It is
 * also a cache win: five families are shared across twenty-five variants, so
 * somebody browsing templates downloads each family once.
 *
 * ## The seven original themes do not use this
 *
 * They keep `family = null` and load one stylesheet exactly as they always
 * have. Nothing already live changes shape.
 *
 * ## Mechanics are still in _shared/base.css
 *
 * Scroll-snap, list resets, reveal transitions, banner heights, the menu's
 * flyout positioning and drawer. This file never restates them.
 *
 * ## Every token used here MUST be defined by the variant
 *
 * There are no fallback values in this file, deliberately. A `var(--x, 1rem)`
 * scattered through eighteen hundred lines means a variant that forgets a token
 * renders *almost* right, and nobody finds the one panel that did not get the
 * memo. Missing tokens should be obvious immediately. The full list a variant
 * must define is at the top of `themes/apex/theme.css`, which is the reference
 * variant for this family.
 *
 * ## The composition this family draws on
 *
 * The confident end of corporate: a wide asymmetric hero with the promise held
 * left and a signature panel right, metrics stated as facts rather than
 * animated decoration, service cards that open on hover AND on :focus-within,
 * and section headings that carry a short eyebrow above them.
 *
 * Informed by commercial corporate packs (the MegaOne demos, the Bexon pack),
 * and every rule here is AUTHORED. Those packs' dependencies — Slider
 * Revolution, CubePortfolio, fancybox, Isotope, GSAP TweenMax, Font Awesome Pro
 * — are commercial or copyleft and cannot ship inside a product sold to
 * tenants. Their photography is licensed to us and not to our customers. So the
 * compositions are taken and none of the code or the assets are.
 *
 * ## Logical properties throughout
 *
 * `margin-inline`, `inset-inline-start`, `padding-block` — never left/right.
 * The Bexon pack's RTL stylesheet is 43 KB against 810 KB precisely because it
 * kept this discipline. Free now, expensive to retrofit.
 *
 * ## No fixed heights, and clamp() rather than a breakpoint ladder
 *
 * The reference packs set `height: 505px` with `overflow: hidden`, which clips
 * real CMS copy the moment a customer writes two more words, and carry 1,370
 * media queries with zero `clamp()`. Every size here is fluid; growing past a
 * setting is always allowed and being shorter than the content never is.
 */

/* ===========================================================================
 * SHELL
 * ======================================================================== */

.cms-shell {
    max-inline-size: var(--cms-shell);
    margin-inline: auto;
    padding-inline: var(--cms-gutter);
}

body {
    background: var(--cms-bg);
    color: var(--cms-fg);
    font-family: var(--cms-body);
    font-size: var(--cms-text);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--cms-display);
    font-weight: var(--cms-display-weight);
    line-height: 1.12;
    letter-spacing: var(--cms-display-tracking);
    margin-block: 0 .6em;
    text-wrap: balance;
}

h1 { font-size: var(--cms-h1); }
h2 { font-size: var(--cms-h2); }
h3 { font-size: var(--cms-h3); }

p { margin-block: 0 1em; }
p:last-child { margin-block-end: 0; }

a { color: var(--primary); }

.cms-measure { max-inline-size: var(--cms-measure); }
.cms-muted { color: var(--cms-muted); }
.cms-rule { border: 0; border-block-start: 1px solid var(--cms-border); margin-block: var(--cms-space); }

.cms-skip {
    background: var(--cms-fg);
    color: var(--cms-bg);
    padding: .75rem 1rem;
    border-radius: 0 0 var(--cms-radius) 0;
}

/* --- header --------------------------------------------------------------- */

.cms-header {
    border-block-end: 1px solid var(--cms-border);
    padding-block: 1.1rem;
    background: var(--cms-header-bg);
    backdrop-filter: blur(10px);
    position: sticky;
    inset-block-start: 0;
    z-index: 30;
}

.cms-header .cms-shell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.cms-header.is-stuck { box-shadow: var(--cms-shadow); }

.cms-brand {
    font-family: var(--cms-display);
    font-size: var(--cms-brand-size);
    font-weight: 600;
    letter-spacing: -.02em;
    text-decoration: none;
    color: var(--cms-fg);
}

.cms-brand__logo { display: block; }

.cms-main { padding-block-end: var(--cms-space); }

.cms-intro {
    max-inline-size: var(--cms-measure);
    color: var(--cms-muted);
    font-size: 1.05em;
    margin-block: 1.5rem;
}

/*
 * No `var(--accent, #0f766e)` fallback, and none anywhere in this file.
 *
 * `App\Support\Branding\BrandTokens` ALWAYS emits --primary, --accent and
 * both computed foregrounds onto <html> — per-field, with its own defaults, so
 * a customer who has set none still gets all four. A fallback here would be
 * dead code that quietly weakens the rule the family is built on: colour is
 * either the customer's or the variant's, and never this file's.
 */
.cms-preview-bar {
    background: var(--accent);
    color: var(--accent-foreground);
    padding-block: .55rem;
    font-size: .8125rem;
    font-weight: 600;
    text-align: center;
}

/* --- the menu (skin; mechanics are in base.css) --------------------------- */

.cms-nav__list { gap: var(--cms-nav-gap); }

.cms-nav__link {
    text-decoration: none;
    color: var(--cms-muted);
    font-weight: 500;
    font-size: .95rem;
    transition: color .16s ease;
}

.cms-nav__link:hover,
.cms-nav__link:focus { color: var(--cms-fg); }

.cms-nav__item--current > .cms-nav__link { color: var(--cms-fg); font-weight: 600; }
.cms-nav__item--in-branch > .cms-nav__link { color: var(--cms-fg); }

/*
 * A floating submenu MUST carry its own background. It sits over page content,
 * so a transparent one is two paragraphs printed on top of each other —
 * legible in a screenshot of an empty page and unreadable on a real one.
 */
.cms-nav__submenu {
    background: var(--cms-bg);
    border: 1px solid var(--cms-border);
    border-radius: var(--cms-radius);
    box-shadow: var(--cms-shadow-lg);
    padding: .5rem;
}

.cms-nav__submenu .cms-nav__list { gap: 0; }

.cms-nav__submenu .cms-nav__link {
    display: block;
    padding: .5rem .75rem;
    border-radius: var(--cms-radius-sm);
    white-space: nowrap;
}

.cms-nav__submenu .cms-nav__link:hover,
.cms-nav__submenu .cms-nav__link:focus { background: var(--cms-surface); }

.cms-nav__disclosure { padding-inline: .35rem; color: var(--cms-muted); }

@media (max-width: 47.999em) {
    .cms-nav { flex-basis: 100%; padding-block: .75rem; }
    .cms-nav__list { gap: .25rem; }
    .cms-nav__item { padding-block: .15rem; }

    /* In the drawer the panel is part of the list, not a card over it. */
    .cms-nav__submenu {
        background: none;
        border: 0;
        box-shadow: none;
        padding-block: 0;
        padding-inline-start: 1rem;
    }

    .cms-nav__submenu .cms-nav__link { white-space: normal; }
}

/* ===========================================================================
 * PRIMITIVES
 * ======================================================================== */

.cms-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .8rem 1.5rem;
    border: 1px solid transparent;
    border-radius: var(--cms-radius-pill);
    background: var(--primary);
    color: var(--primary-foreground);
    font-family: var(--cms-display);
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.cms-btn:hover,
.cms-btn:focus-visible {
    transform: translateY(-1px);
    box-shadow: var(--cms-shadow);
}

.cms-btn--ghost {
    background: none;
    border-color: var(--cms-border);
    color: var(--cms-fg);
}

.cms-card {
    border: 1px solid var(--cms-border);
    border-radius: var(--cms-radius-lg);
    padding: var(--cms-card-pad);
    background: var(--cms-bg);
}

.cms-card--filled { background: var(--cms-surface); border-color: transparent; }

.cms-notice {
    border-inline-start: 3px solid var(--primary);
    background: var(--cms-surface);
    padding: 1rem 1.25rem;
    border-radius: var(--cms-radius-sm);
}

.cms-error { color: var(--cms-danger); font-size: .875rem; }

/* --- forms ---------------------------------------------------------------- */

.cms-field { display: flex; flex-direction: column; gap: .4rem; margin-block-end: 1.1rem; }

.cms-field__label { font-weight: 600; font-size: .9rem; }
.cms-field__optional { color: var(--cms-muted); font-weight: 400; }

.cms-input,
.cms-file {
    inline-size: 100%;
    padding: .75rem 1rem;
    border: 1px solid var(--cms-border);
    border-radius: var(--cms-radius-sm);
    background: var(--cms-bg);
    color: var(--cms-fg);
    font: inherit;
}

.cms-input:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
    border-color: transparent;
}

/* ===========================================================================
 * SECTION RHYTHM
 *
 * One rule, so a widget added months from now is spaced correctly without
 * anybody touching this file. That is the whole reason widgets emit semantic
 * `cms-block-{type}` classes.
 * ======================================================================== */

.cms-block { padding-block: var(--cms-space); }

.cms-block-hero,
.cms-block-cta,
.cms-block-slider { padding-block: 0; }

/*
 * A section heading carries an eyebrow above it and sits on a short rule. The
 * family's signature gesture, applied once rather than per block.
 */
.cms-block-services__heading,
.cms-block-feature-grid__heading,
.cms-block-stats__heading,
.cms-block-steps__heading,
.cms-block-team__heading,
.cms-block-testimonials__heading,
.cms-block-faq__heading,
.cms-block-gallery__heading,
.cms-block-logos__heading,
.cms-block-careers__heading,
.cms-block-contact-form__heading,
.cms-block-opening-hours__heading,
.cms-block-video__heading,
.cms-block-text__heading,
.cms-page__section-heading {
    font-size: var(--cms-h2);
    margin-block-end: 1.5rem;
    position: relative;
    padding-block-start: 1rem;
}

.cms-block-services__heading::before,
.cms-block-feature-grid__heading::before,
.cms-block-stats__heading::before,
.cms-block-steps__heading::before,
.cms-block-team__heading::before,
.cms-block-testimonials__heading::before,
.cms-block-faq__heading::before,
.cms-page__section-heading::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 2.5rem;
    block-size: 3px;
    background: var(--accent, var(--primary));
    border-radius: 2px;
}

/* ===========================================================================
 * HERO
 *
 * Asymmetric: the promise held to the inline-start, generous space beside it.
 * The scrim machinery for a background photograph is SHARED and lives in
 * base.css (.cms-has-bg / .cms-bg) — never re-implemented per family, because
 * the contrast rule has to hold everywhere or it is worthless.
 * ======================================================================== */

.cms-block-hero {
    position: relative;
    padding-block: clamp(3.5rem, 7vw, 6.5rem);
}

.cms-block-hero__inner {
    max-inline-size: 46rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
}

.cms-block-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .9rem;
    border: 1px solid var(--cms-border);
    border-radius: var(--cms-radius-pill);
    background: var(--cms-surface);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cms-muted);
    margin: 0;
}

.cms-block-hero__headline {
    font-size: var(--cms-hero);
    margin: 0;
}

.cms-block-hero__body {
    max-inline-size: var(--cms-measure);
    font-size: 1.1em;
    color: var(--cms-muted);
}

.cms-block-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-block-start: .5rem; }

/* ===========================================================================
 * SERVICES + FEATURE GRID
 * ======================================================================== */

.cms-block-services__grid,
.cms-block-feature-grid__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
    gap: var(--cms-gap);
}

.cms-block-services__body,
.cms-block-feature-grid__body,
.cms-block-steps__body,
.cms-block-careers__body,
.cms-block-contact-form__body,
.cms-block-opening-hours__body,
.cms-block-video__body {
    max-inline-size: var(--cms-measure);
    color: var(--cms-muted);
    margin-block-end: 2rem;
}

.cms-block-feature-grid__item,
.cms-block-services__grid > * {
    border: 1px solid var(--cms-border);
    border-radius: var(--cms-radius-lg);
    padding: var(--cms-card-pad);
    background: var(--cms-bg);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/*
 * OPENS ON HOVER *AND* ON :focus-within.
 *
 * Hover alone makes the card's detail unreachable from a keyboard — the exact
 * fault 5a fixed in Bexon's service grid, and invisible to anybody testing with
 * a mouse.
 */
.cms-block-feature-grid__item:hover,
.cms-block-feature-grid__item:focus-within,
.cms-block-services__grid > *:hover,
.cms-block-services__grid > *:focus-within {
    transform: translateY(-3px);
    box-shadow: var(--cms-shadow-lg);
    border-color: transparent;
}

.cms-block-feature-grid__icon {
    display: grid;
    place-items: center;
    inline-size: 3rem;
    block-size: 3rem;
    border-radius: var(--cms-radius);
    background: var(--cms-surface);
    color: var(--primary);
    margin-block-end: 1rem;
}

.cms-block-feature-grid__title { font-size: var(--cms-h3); margin-block-end: .4rem; }
.cms-block-feature-grid__text { color: var(--cms-muted); margin: 0; }

.cms-block-services__img {
    inline-size: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--cms-radius);
    margin-block-end: 1rem;
}

/* ===========================================================================
 * STATS
 *
 * A counter renders its FINAL value in the HTML (`$2.4bn`, never `0`) — the
 * animation layer counts up to whatever it finds and restores the original
 * string. Starting at zero shows `0` to every crawler and to anybody the
 * bundle failed for. See _shared/motion.js.
 * ======================================================================== */

.cms-block-stats__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
    gap: var(--cms-gap);
}

.cms-block-stats__item {
    padding-block: 1.25rem;
    border-block-start: 3px solid var(--cms-border);
}

.cms-block-stats__figure {
    display: block;
    font-family: var(--cms-display);
    font-size: var(--cms-stat);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--cms-fg);
}

.cms-block-stats__label {
    display: block;
    margin-block-start: .5rem;
    color: var(--cms-muted);
    font-size: .9rem;
}

/* ===========================================================================
 * SPLIT ABOUT
 * ======================================================================== */

.cms-block-split-about {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.cms-block-split-about--flip .cms-block-split-about__media { order: 2; }

.cms-block-split-about__eyebrow {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--primary);
    margin-block-end: .5rem;
}

.cms-block-split-about__heading { font-size: var(--cms-h2); }
.cms-block-split-about__body { color: var(--cms-muted); }
.cms-block-split-about__actions { margin-block-start: 1.5rem; display: flex; flex-wrap: wrap; gap: .75rem; }

.cms-block-split-about__img {
    inline-size: 100%;
    border-radius: var(--cms-radius-lg);
    object-fit: cover;
}

/*
 * THE EMPTY PICTURE SLOT.
 *
 * A CLASS, not `:empty` — a Blade-rendered div always contains a newline, so
 * `:empty` never matches it (4e). The artwork is applied as a MASK so it takes
 * the customer's own colour: a data-URI SVG is an isolated document and var()
 * cannot reach inside it.
 */
.cms-block-split-about__media--placeholder {
    aspect-ratio: 4 / 3;
    border-radius: var(--cms-radius-lg);
    background: var(--cms-surface);
    position: relative;
}

.cms-block-split-about__media--placeholder::after {
    content: '';
    position: absolute;
    inset: 22%;
    background: var(--primary);
    opacity: .28;
    -webkit-mask: var(--cms-art) center / contain no-repeat;
    mask: var(--cms-art) center / contain no-repeat;
}

/* ===========================================================================
 * STEPS
 * ======================================================================== */

.cms-block-steps__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: var(--cms-gap);
    counter-reset: cms-step;
}

.cms-block-steps__item {
    counter-increment: cms-step;
    padding-block-start: 3.25rem;
    position: relative;
}

.cms-block-steps__item::before {
    content: counter(cms-step, decimal-leading-zero);
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    font-family: var(--cms-display);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--primary);
    opacity: .5;
}

.cms-block-steps__title { font-size: var(--cms-h3); margin-block-end: .4rem; }
.cms-block-steps__text { color: var(--cms-muted); margin: 0; }

/* ===========================================================================
 * TEAM
 * ======================================================================== */

.cms-block-team__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
    gap: var(--cms-gap);
}

.cms-block-team__portrait {
    inline-size: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--cms-radius-lg);
    background: var(--cms-surface);
    margin-block-end: .85rem;
}

.cms-block-team__name { font-family: var(--cms-display); font-weight: 600; display: block; }
.cms-block-team__role { color: var(--cms-muted); font-size: .875rem; }

/* ===========================================================================
 * TESTIMONIALS
 * ======================================================================== */

.cms-block-testimonials__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
    gap: var(--cms-gap);
}

.cms-block-testimonials__quote {
    border: 1px solid var(--cms-border);
    border-radius: var(--cms-radius-lg);
    padding: var(--cms-card-pad);
    background: var(--cms-bg);
    margin: 0;
}

.cms-block-testimonials__text { font-size: 1.05em; }

.cms-block-testimonials__text::before {
    content: '\201C';
    display: block;
    font-family: var(--cms-display);
    font-size: 2.5rem;
    line-height: .8;
    color: var(--accent, var(--primary));
    margin-block-end: .35rem;
}

.cms-block-testimonials__cite {
    display: block;
    margin-block-start: 1rem;
    color: var(--cms-muted);
    font-size: .875rem;
    font-style: normal;
}

/* ===========================================================================
 * FAQ
 *
 * <details>/<summary>, so it works with no JavaScript at all. The animation
 * layer only smooths the open, and a page whose script never arrives still
 * opens and closes every answer.
 * ======================================================================== */

.cms-block-faq__item {
    border-block-end: 1px solid var(--cms-border);
    padding-block: 1.1rem;
}

.cms-block-faq__question {
    font-family: var(--cms-display);
    font-weight: 600;
    font-size: 1.05em;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.cms-block-faq__question::-webkit-details-marker { display: none; }

.cms-block-faq__question::after {
    content: '+';
    color: var(--primary);
    font-size: 1.4em;
    line-height: 1;
    flex: none;
}

[open] > .cms-block-faq__question::after { content: '\2212'; }

.cms-block-faq__answer { color: var(--cms-muted); padding-block-start: .75rem; max-inline-size: var(--cms-measure); }

/* ===========================================================================
 * GALLERY · LOGOS · IMAGE · VIDEO
 * ======================================================================== */

.cms-block-gallery__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
    gap: var(--cms-gap-sm);
}

.cms-block-gallery__img {
    inline-size: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--cms-radius);
}

.cms-block-logos__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(1.5rem, 4vw, 3.5rem);
}

.cms-block-logos__img {
    max-block-size: 2.5rem;
    inline-size: auto;
    filter: grayscale(1);
    opacity: .6;
    transition: filter .2s ease, opacity .2s ease;
}

.cms-block-logos__img:hover { filter: none; opacity: 1; }

.cms-block-image__img { inline-size: 100%; border-radius: var(--cms-radius-lg); }
.cms-block-image__caption { color: var(--cms-muted); font-size: .875rem; margin-block-start: .6rem; }

.cms-block-video__frame {
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--cms-radius-lg);
    background: var(--cms-surface);
    display: block;
}

.cms-block-video--background .cms-block-video__frame { border-radius: 0; }

/* ===========================================================================
 * OPENING HOURS
 *
 * An empty hours cell renders "Closed" rather than being dropped — "shut on
 * Sunday" and "forgot to fill Sunday in" look identical when the row vanishes.
 * ======================================================================== */

.cms-block-opening-hours__list { max-inline-size: 32rem; }

.cms-block-opening-hours__row {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: .7rem;
    border-block-end: 1px dashed var(--cms-border);
}

.cms-block-opening-hours__day { font-weight: 600; }
.cms-block-opening-hours__hours { color: var(--cms-muted); text-align: end; }
.cms-block-opening-hours__note { color: var(--cms-muted); font-size: .875rem; margin-block-start: 1rem; }

/* ===========================================================================
 * CALL TO ACTION
 * ======================================================================== */

.cms-block-cta {
    position: relative;
    text-align: center;
    padding-block: clamp(3rem, 6vw, 5rem);
    padding-inline: var(--cms-gutter);
    background: var(--cms-cta-bg);
    color: var(--cms-cta-fg);
    border-radius: var(--cms-radius-lg);
}

.cms-block-cta__headline { font-size: var(--cms-h2); color: inherit; }
.cms-block-cta__body { max-inline-size: var(--cms-measure); margin-inline: auto; opacity: .85; }
.cms-block-cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-block-start: 1.5rem; }

/* A full-bleed CTA has no corners to round. */
.cms-w--full > .cms-block-cta { border-radius: 0; }

/* ===========================================================================
 * SLIDER
 * ======================================================================== */

.cms-block-slider__viewport { border-radius: var(--cms-radius-lg); overflow: hidden; }
.cms-w--full .cms-block-slider__viewport { border-radius: 0; }

.cms-block-slider__slide {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-block-size: 26rem;
    background: var(--cms-surface);
}

.cms-block-slider__caption { padding: clamp(1.5rem, 4vw, 3rem); position: relative; z-index: 2; }
.cms-block-slider__eyebrow { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }
.cms-block-slider__headline { font-size: var(--cms-h1); margin-block-end: .5rem; }
.cms-block-slider__body { max-inline-size: var(--cms-measure); }
.cms-block-slider__actions { margin-block-start: 1.25rem; display: flex; flex-wrap: wrap; gap: .75rem; }

.cms-block-slider__controls {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-block-start: 1rem;
}

.cms-block-slider--controls-over .cms-block-slider__controls {
    position: absolute;
    inset-block-end: 1rem;
    inset-inline-end: 1rem;
    padding-block-start: 0;
    z-index: 3;
}

.cms-block-slider__arrow,
.cms-block-slider__play {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--cms-border);
    border-radius: 50%;
    background: var(--cms-bg);
    color: var(--cms-fg);
    cursor: pointer;
}

.cms-block-slider__dots { display: flex; gap: .4rem; }

.cms-block-slider__dot {
    inline-size: .5rem;
    block-size: .5rem;
    border: 0;
    border-radius: 50%;
    background: var(--cms-border);
    cursor: pointer;
}

.cms-block-slider__dot[aria-current="true"] { background: var(--primary); }

.cms-block-slider__art { position: absolute; inset: 0; background: var(--cms-surface); }

/* ===========================================================================
 * CONTACT FORM · CAREERS · BOOKING · LISTINGS
 * ======================================================================== */

.cms-block-contact-form__form { max-inline-size: 36rem; }

.cms-block-careers__list,
.cms-page__list { display: flex; flex-direction: column; gap: 1rem; }

.cms-listing__title { font-family: var(--cms-display); font-size: var(--cms-h3); margin-block-end: .3rem; }
.cms-listing__meta,
.cms-listing__facts { color: var(--cms-muted); font-size: .875rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.cms-listing__summary { color: var(--cms-muted); margin-block: .5rem 0; }
.cms-listing__more { font-weight: 600; text-decoration: none; }

.cms-block-booking__day { border: 1px solid var(--cms-border); border-radius: var(--cms-radius); padding: 1rem; }
.cms-block-booking__date { font-weight: 600; margin-block-end: .6rem; }
.cms-block-booking__times { display: flex; flex-wrap: wrap; gap: .4rem; }

.cms-block-booking__slot {
    padding: .45rem .8rem;
    border: 1px solid var(--cms-border);
    border-radius: var(--cms-radius-pill);
    background: var(--cms-bg);
    font-size: .875rem;
    cursor: pointer;
}

.cms-block-booking__slot:hover { border-color: var(--primary); }
.cms-block-booking__chosen { font-weight: 600; }
.cms-block-booking__closed { color: var(--cms-muted); font-size: .875rem; }
.cms-block-booking__paging { display: flex; gap: .5rem; margin-block-start: 1rem; }

/*
 * A POST'S SECTIONS (2026-09-21). Inside an article a gallery or a video is
 * part of the story, not a new section of a landing page, so the gap between
 * them is roughly half a section's. The call to action keeps its own padding;
 * it gets the gap as margin instead, so its dark panel does not touch the text.
 */
.cms-post__sections { margin-block-start: calc(var(--cms-space) * .35); }
.cms-post__sections > .cms-w > .cms-block:not(.cms-block-cta) { padding-block: calc(var(--cms-space) * .4); }
.cms-post__sections > .cms-w > .cms-block-cta { margin-block: calc(var(--cms-space) * .4); }

/* ===========================================================================
 * PAGE FURNITURE
 * ======================================================================== */

.cms-page__back { font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.cms-page__lede { font-size: 1.15em; color: var(--cms-muted); max-inline-size: var(--cms-measure); }
.cms-page__body { max-inline-size: var(--cms-measure); }
.cms-page__media { inline-size: 100%; border-radius: var(--cms-radius-lg); margin-block: 1.5rem; }
.cms-page__facts { display: flex; flex-wrap: wrap; gap: 1.5rem; color: var(--cms-muted); font-size: .9rem; }
.cms-page__form { max-inline-size: 36rem; }
.cms-page__note { color: var(--cms-muted); font-size: .875rem; }
.cms-placeholder__heading { font-size: var(--cms-h1); }

.cms-layout--full-width .cms-main .cms-shell { max-inline-size: none; padding-inline: 0; }
.cms-layout--landing .cms-main { padding-block-start: var(--cms-space); }

/* ===========================================================================
 * FOOTER
 * ======================================================================== */

.cms-footer {
    border-block-start: 1px solid var(--cms-border);
    padding-block: clamp(2.5rem, 5vw, 4rem);
    color: var(--cms-muted);
    font-size: .9rem;
    background: var(--cms-footer-bg);
}

.cms-footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
    gap: var(--cms-gap);
}

.cms-footer__name { font-family: var(--cms-display); font-size: 1.15rem; font-weight: 600; color: var(--cms-fg); }
.cms-footer__tagline { margin-block-start: .4rem; }
.cms-footer__heading { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cms-fg); margin-block-end: .8rem; }
.cms-footer__links { display: flex; flex-direction: column; gap: .5rem; }
.cms-footer__links a,
.cms-footer__contact a { color: inherit; text-decoration: none; }
.cms-footer__links a:hover { color: var(--cms-fg); }
.cms-footer__contact { display: flex; flex-direction: column; gap: .5rem; }
.cms-footer-social { display: flex; gap: 1rem; margin-block-end: 1rem; }
.cms-footer__legal { margin-block-start: 2rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--cms-border); font-size: .8125rem; }
.cms-footer--rich .cms-footer__brand { max-inline-size: 22rem; }

/* ===========================================================================
 * EMBED
 *
 * RAW MARKUP the owner pasted — a booking widget, a map, a form from another
 * system. The family cannot style its INSIDES and must not try: whatever is in
 * there brings its own CSS, and a rule reaching into it would fight that.
 *
 * What a theme owes it is a container that sits correctly in the page rhythm,
 * and an `iframe` that behaves responsively rather than at whatever fixed
 * width the third party wrote. Without even that, a pasted embed is the one
 * widget on the page with no relationship to anything around it.
 * ======================================================================== */

.cms-block-embed__heading {
    font-size: var(--cms-h2);
    margin-block-end: 1.25rem;
}

.cms-block-embed iframe {
    max-inline-size: 100%;
    border: 0;
}

/* Anything wide scrolls INSIDE its own box; the page never scrolls sideways. */
.cms-block-embed {
    overflow-x: auto;
}


/* ===========================================================================
 * MAP · VIDEO GALLERY · GALLERY CAPTIONS (phase 6)
 *
 * Mechanics — the lightbox dialog, the column arithmetic, the play mark, the
 * map's min-heights — are in _shared/base.css. Skin only here.
 * ======================================================================== */

.cms-block-map__heading,
.cms-block-video-gallery__heading {
    font-size: var(--cms-h2);
}

.cms-block-map__body,
.cms-block-video-gallery__body {
    max-inline-size: var(--cms-measure);
    color: var(--cms-muted);
    margin-block-end: 1.5rem;
}

.cms-block-map__frame {
    border-radius: var(--cms-radius-lg);
    background: var(--cms-surface);
}

.cms-block-map__link {
    margin-block-start: .85rem;
    font-size: .9rem;
}

.cms-block-map__link a { color: var(--cms-muted); }
.cms-block-map__link a:hover { color: var(--cms-fg); }

.cms-block-video-gallery__tile {
    border-radius: var(--cms-radius);
    background: var(--cms-surface);
}

.cms-block-video-gallery__poster--placeholder {
    background: var(--cms-surface-2);
}

.cms-block-video-gallery__title {
    font-family: var(--cms-display);
    font-size: .95rem;
    font-weight: 600;
}

.cms-block-video-gallery__frame { border-radius: var(--cms-radius); }

.cms-block-gallery__link { border-radius: var(--cms-radius); overflow: hidden; }

.cms-block-gallery__caption {
    color: var(--cms-muted);
    font-size: .8125rem;
    line-height: 1.4;
}


/* --- blog and news (phase 6) --------------------------------------------- */

.cms-block-blog-grid__heading { font-size: var(--cms-h2); }

.cms-block-blog-grid__body,
.cms-block-blog-grid__empty {
    max-inline-size: var(--cms-measure);
    color: var(--cms-muted);
    margin-block-end: 1.5rem;
}

.cms-block-blog-grid__thumb,
.cms-blog__thumb { border-radius: var(--cms-radius); }

.cms-block-blog-grid__category,
.cms-blog__category {
    align-self: flex-start;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent);
    text-decoration: none;
}

.cms-block-blog-grid__title,
.cms-blog__title {
    font-family: var(--cms-display);
    font-size: var(--cms-h3);
    margin: 0;
}

.cms-block-blog-grid__title a,
.cms-blog__title a { color: var(--cms-fg); text-decoration: none; }
.cms-block-blog-grid__title a:hover,
.cms-blog__title a:hover { color: var(--primary); }

.cms-block-blog-grid__meta,
.cms-blog__meta { color: var(--cms-muted); font-size: .8125rem; margin: 0; }

.cms-block-blog-grid__summary,
.cms-blog__summary { color: var(--cms-muted); margin: 0; }

.cms-block-blog-grid__all { margin-block-start: 2rem; }

.cms-blog__filter {
    padding: .35rem .85rem;
    border: 1px solid var(--cms-border);
    border-radius: var(--cms-radius-pill);
    color: var(--cms-muted);
    font-size: .85rem;
    text-decoration: none;
}

.cms-blog__filter--current { background: var(--cms-fg); border-color: var(--cms-fg); color: var(--cms-bg); }

.cms-post__title { font-size: var(--cms-h1); }
.cms-post__meta { color: var(--cms-muted); font-size: .875rem; }
.cms-post__header { margin-block-end: 2rem; }
.cms-post__media { border-radius: var(--cms-radius-lg); margin-block-end: 2rem; }
.cms-post__back { margin-block-start: 2.5rem; }


/* --- posts: list and split layouts (phase 6) ----------------------------- */

.cms-block-blog-grid--list .cms-block-blog-grid__item,
.cms-block-blog-grid--split .cms-block-blog-grid__item {
    padding-block-end: 1.5rem;
    border-block-end: 1px solid var(--cms-border);
}

.cms-block-blog-grid--list .cms-block-blog-grid__item:last-child,
.cms-block-blog-grid--split .cms-block-blog-grid__item:last-child {
    border-block-end: 0;
    padding-block-end: 0;
}

.cms-block-blog-grid--list .cms-block-blog-grid__title { font-size: 1.05rem; }

.cms-block-blog-grid__search .cms-btn { flex: none; }
.cms-block-blog-grid__clear { color: var(--cms-muted); font-size: .875rem; text-decoration: none; }
.cms-block-blog-grid__clear:hover { color: var(--cms-fg); }

.cms-pagination__link {
    border: 1px solid var(--cms-border);
    border-radius: var(--cms-radius);
    color: var(--cms-muted);
    font-size: .875rem;
}

.cms-pagination__link:hover { color: var(--cms-fg); border-color: var(--cms-fg); }

.cms-pagination__link--current {
    background: var(--cms-fg);
    border-color: var(--cms-fg);
    color: var(--cms-bg);
    font-weight: 600;
}

.cms-pagination__link--disabled:hover { color: var(--cms-muted); border-color: var(--cms-border); }