/* ==========================================================================
   Edukall Site — the public website's design layer (frontend/site/)
   --------------------------------------------------------------------------
   One set of views serves every site; what tells one site from another is its
   SKIN: the tokens in this file, selected by data-skin on <html> (site_skin()).
   A view never carries a colour, a font or a radius of its own — only these
   tokens — so a new skin is a new token block and nothing else.

   Bootstrap 5.3 is dressed, not replaced: the bridge at the end points its own
   --bs-* variables at these tokens, inside .s-site, so dropdowns, modals and
   forms follow the skin without extra rules.

   What only one family of pages uses (the product pages, the photography
   pages, the cart and checkout, the sign-in pages, the content pages) lives
   in that family's sheet, edukall-site-<family>.css, which only its pages
   load (SiteStylesheets): the home no longer downloads all of it.

   No dark mode: the public site is designed light only.
   ========================================================================== */

/* ── Skins ────────────────────────────────────────────────────────────────── */

/* Edukall (default): warm sand, forest green, tangerine accents. */
:root {
    --s-bg: #FBF7F0;
    --s-surface: #FFFFFF;
    --s-band: #F4EDE2;
    --s-line: #EADFCF;
    --s-ink: #1F1B15;
    --s-muted: #5E574C;
    /* At least 4.5:1 on the page, the band and the soft tints: it sets small print. */
    --s-faint: #6F675A;
    --s-accent: #1D5C45;
    --s-accent-hover: #174B38;
    --s-on-accent: #FFFFFF;
    /* The logo's height, per skin: Edukall's is a heavy wordmark cropped to its letters, whose
       x-height fills three quarters of the image — at Imago's height it shouted over the menu. */
    --s-logo-h: 26px;
    --s-logo-h-footer: 24px;
    --s-accent-soft: #DCEBE3;
    --s-accent-soft-ink: #34463D;
    --s-accent-deep: #245F49;
    --s-accent-deep-line: #3B7560;
    --s-on-accent-muted: #CFE3D8;
    --s-highlight: #F2A65A;
    --s-on-highlight: #1F1B15;
    --s-tint-1: #DCEBE3;
    --s-tint-2: #F1D2B4;
    --s-tint-3: #E6DCCB;
    --s-tint-4: #D8D0E6;
    --s-tint-ink: #4A443B;
    /* A dark band (a photo's panel, a quote), and the veil that keeps text readable on a photo. */
    --s-deep: #1F3A30;
    --s-on-deep: #FFFFFF;
    --s-on-deep-muted: #CFE3D8;
    --s-deep-line: rgba(255, 255, 255, 0.16);
    --s-scrim: 20, 18, 14;
    --s-topbar-bg: var(--s-highlight);
    --s-on-topbar: var(--s-on-highlight);

    --s-font-display: "Bricolage Grotesque", system-ui, sans-serif;
    --s-font-body: "Figtree", system-ui, sans-serif;
    /* The face of an accented word in a heading (site_accent()), and the brand's gradient. */
    --s-font-accent: var(--s-font-display);
    --s-accent-2: #2F8A66;
    --s-gradient: linear-gradient(120deg, var(--s-accent) 0%, var(--s-accent-2) 55%, var(--s-highlight) 100%);
    /* How an accented word is painted (site_accent()): a colour, or a gradient through the letters. */
    --s-accent-paint: none;
    --s-accent-paint-on-deep: none;
    --s-accent-fill: currentColor;
    --s-accent-track: normal;
    /* Section headings, eyebrows and buttons. */
    /* Every page's h1 (the display .s-h1, a page title set as .s-h2, a product or article
       title, a photo header) is its rule's size times this: a wider face asks for less. */
    --s-h1-scale: 1;
    --s-h2-size: clamp(30px, 3.6vw, 50px);
    --s-h2-leading: 1.05;
    --s-h2-track: var(--s-track-display);
    --s-eyebrow-track: .16em;
    --s-eyebrow-mark-width: 8px;
    --s-eyebrow-mark-height: 8px;
    --s-eyebrow-mark-radius: 999px;
    --s-eyebrow-mark: var(--s-highlight);
    --s-btn-radius: var(--s-radius-btn);
    --s-btn-primary-bg: var(--s-accent);
    --s-btn-primary-hover-bg: var(--s-accent-hover);
    --s-btn-primary-hover-filter: none;
    --s-btn-primary-border: 1px solid transparent;
    --s-btn-primary-shadow: none;
    --s-btn-highlight-shadow: none;
    --s-btn-highlight-hover-bg: var(--s-surface);
    --s-btn-highlight-hover-ink: var(--s-ink);
    --s-btn-hover-lift: none;
    /* The footer, and a phone's buy bar. */
    --s-footer-bg: var(--s-band);
    /* The keyboard focus ring: the action colour on light ground (the amber marker was 1.9:1
       on white), the amber on the dark bands, where it is the one that stands out. */
    --s-focus: var(--s-accent);
    --s-focus-on-deep: var(--s-highlight);
    --s-footer-focus: var(--s-focus);
    --s-footer-gap: 0px;
    --s-footer-ink: var(--s-muted);
    --s-footer-strong: var(--s-ink);
    --s-footer-link-hover: var(--s-ink);
    --s-footer-logo-filter: none;
    --s-footer-control-bg: var(--s-surface);
    --s-footer-control-line: var(--s-line);
    --s-footer-control-ink: var(--s-ink);
    --s-buybar-bg: var(--s-surface);
    --s-buybar-blur: none;
    --s-buybar-shadow: 0 -8px 24px rgba(31, 27, 21, 0.08);
    /* Dark surfaces a design lays photos and glass on. */
    --s-deep-3: var(--s-deep);
    --s-deep-4: var(--s-accent-deep);
    --s-on-deep-soft: var(--s-on-deep-muted);
    --s-on-deep-faint: var(--s-on-deep-muted);
    --s-highlight-soft: var(--s-highlight);
    --s-ink-soft: var(--s-ink);
    --s-warm-1: var(--s-highlight);
    --s-warm-2: var(--s-highlight);
    --s-warm-3: var(--s-highlight);
    --s-veil: var(--s-scrim);
    --s-glass: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05));
    --s-glass-line: rgba(255, 255, 255, .2);
    --s-lift: 0 40px 80px -40px rgba(31, 27, 21, .35), 0 0 0 1px rgba(31, 27, 21, .06);
    --s-lift-sm: 0 18px 40px -30px rgba(31, 27, 21, .4), 0 0 0 1px rgba(31, 27, 21, .04);
    --s-display-weight: 700;
    --s-track-display: -0.04em;

    --s-radius-sm: 12px;
    --s-radius: 20px;
    --s-radius-lg: 28px;
    --s-radius-btn: 999px;
    --s-shadow: 0 10px 30px rgba(31, 27, 21, 0.08);
    --s-shadow-lg: 0 18px 40px rgba(31, 27, 21, 0.14);
    /* Photos are viewed on dark in every skin. */
    --s-viewer-bg: #111111;
    --s-viewer-ink: #F2F2F2;
    --s-viewer-muted: #BDBDBD;
    --s-viewer-control: rgba(0, 0, 0, 0.5);
    --s-viewer-control-hover: rgba(0, 0, 0, 0.75);
    --s-viewer-chip: rgba(255, 255, 255, 0.12);
    --s-viewer-chip-hover: rgba(255, 255, 255, 0.22);
    /* Behind a QR code: white in every skin, or phones cannot read it. */
    --s-qr-bg: #FFFFFF;
    /* A photo someone has favourited. */
    --s-favorite: #D6336C;
    /* WhatsApp's own green, in every skin: the button is recognised by it. */
    --s-whatsapp: #25D366;
    --s-on-whatsapp: #FFFFFF;

    --s-container: 1312px;
    --s-gutter: 16px;
    --s-section: 104px;
}

/* A skin for a site not designed yet keeps the default tokens: a new block
   here, [data-skin="…"] { … }, is how it gets its own (its fonts: site_skin_fonts()). */

/* Imago (a school): white, the logo's purple for actions, its amber for markers, a deep
   aubergine for dark bands; one grotesk for everything, square-ish corners. */
[data-skin="imago"] {
    --s-logo-h: 36px;
    --s-logo-h-footer: 34px;
    --s-bg: #FFFFFF;
    --s-surface: #FFFFFF;
    --s-band: #F4F2F5;
    --s-line: #E4E0E6;
    --s-ink: #150D18;
    --s-muted: #5C5561;
    --s-faint: #6E6773;
    --s-accent: #7B2087;
    --s-accent-hover: #641A6E;
    --s-on-accent: #FFFFFF;
    --s-accent-soft: #F6EAF8;
    --s-accent-soft-ink: #5B1766;
    --s-accent-deep: #3A1044;
    --s-accent-deep-line: #55295F;
    --s-on-accent-muted: #E6D8EA;
    --s-highlight: #F4AC2B;
    --s-on-highlight: #1B1206;
    --s-tint-1: #F6EAF8;
    --s-tint-2: #FDEBC8;
    --s-tint-3: #ECE7EE;
    --s-tint-4: #E3DDF0;
    --s-tint-ink: #4A3F4F;
    --s-deep: #2B0B34;
    --s-on-deep: #FFFFFF;
    --s-on-deep-muted: #CDBFD3;
    --s-deep-line: rgba(255, 255, 255, 0.16);
    --s-scrim: 21, 8, 25;
    --s-topbar-bg: var(--s-deep);
    --s-on-topbar: var(--s-on-deep);

    --s-font-display: "Schibsted Grotesk", system-ui, sans-serif;
    --s-font-body: "Schibsted Grotesk", system-ui, sans-serif;
    --s-font-accent: "Instrument Serif", Georgia, serif;
    --s-accent-2: #B4238C;
    --s-gradient: linear-gradient(120deg, #7B2087 0%, #B4238C 52%, #F4AC2B 100%);
    --s-accent-paint: var(--s-gradient);
    --s-accent-paint-on-deep: linear-gradient(100deg, var(--s-highlight) 0%, var(--s-warm-2) 45%, var(--s-warm-3) 100%);
    --s-accent-fill: transparent;
    --s-accent-track: -0.01em;
    /* Schibsted Grotesk sets wider and heavier than Bricolage: at the same size its titles
       shouted, so they run smaller for the same presence. */
    --s-h1-scale: .8;
    --s-h2-size: clamp(34px, 3.9vw, 56px);
    --s-h2-leading: 1.02;
    --s-h2-track: -0.04em;
    --s-eyebrow-track: .18em;
    --s-eyebrow-mark-width: 22px;
    --s-eyebrow-mark-height: 2px;
    --s-eyebrow-mark-radius: 2px;
    --s-eyebrow-mark: var(--s-gradient);
    --s-btn-radius: 14px;
    /* The brand's gradient without its amber end: white on the amber was 1.95:1. */
    --s-btn-primary-bg: linear-gradient(120deg, var(--s-accent) 0%, var(--s-accent-2) 100%);
    --s-btn-primary-hover-bg: var(--s-btn-primary-bg);
    --s-btn-primary-hover-filter: brightness(1.06);
    --s-btn-primary-border: 0;
    --s-btn-primary-shadow: 0 14px 34px -12px rgba(123, 32, 135, .8);
    --s-btn-highlight-shadow: 0 12px 32px -10px rgba(244, 172, 43, .7);
    --s-btn-highlight-hover-bg: var(--s-highlight);
    --s-btn-highlight-hover-ink: var(--s-on-highlight);
    --s-btn-hover-lift: translateY(-1px);
    --s-footer-bg: var(--s-deep-3);
    --s-focus: var(--s-accent);
    --s-focus-on-deep: var(--s-highlight);
    --s-footer-focus: var(--s-focus-on-deep);
    --s-footer-gap: 120px;
    --s-footer-ink: var(--s-on-deep-faint);
    --s-footer-strong: var(--s-on-deep);
    --s-footer-link-hover: var(--s-on-deep);
    --s-footer-logo-filter: brightness(0) invert(1);
    --s-footer-control-bg: rgba(255, 255, 255, .08);
    --s-footer-control-line: rgba(255, 255, 255, .16);
    --s-footer-control-ink: var(--s-on-deep);
    --s-buybar-bg: rgba(255, 255, 255, .92);
    --s-buybar-blur: blur(14px);
    --s-buybar-shadow: 0 -16px 30px -18px rgba(43, 11, 52, .5);
    --s-deep-3: #16051C;
    --s-deep-4: #4A1257;
    --s-on-deep-soft: #E7DBEC;
    --s-on-deep-faint: #D6C6DD;
    --s-highlight-soft: #FFD386;
    --s-ink-soft: #2A2130;
    --s-warm-1: #E0662F;
    --s-warm-2: #FF7A59;
    --s-warm-3: #E85BB5;
    --s-veil: 22, 5, 28;
    --s-glass: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05));
    --s-glass-line: rgba(255, 255, 255, .2);
    --s-lift: 0 40px 80px -40px rgba(43, 11, 52, .45), 0 0 0 1px rgba(123, 32, 135, .08);
    --s-lift-sm: 0 18px 40px -30px rgba(43, 11, 52, .45), 0 0 0 1px rgba(43, 11, 52, .04);
    --s-display-weight: 700;
    --s-track-display: -0.035em;

    --s-radius-sm: 6px;
    --s-radius: 8px;
    --s-radius-lg: 12px;
    --s-radius-btn: 8px;
    --s-shadow: 0 10px 30px rgba(43, 11, 52, 0.08);
    --s-shadow-lg: 0 24px 48px -28px rgba(43, 11, 52, 0.45);
}

@media (min-width: 768px) {
    :root { --s-gutter: 32px; }
}
@media (min-width: 1200px) {
    :root { --s-gutter: 64px; }
}
@media (max-width: 767.98px) {
    :root { --s-section: 56px; }
}

/* ── Base ─────────────────────────────────────────────────────────────────── */

body.s-site {
    margin: 0;
    background: var(--s-bg);
    color: var(--s-ink);
    font-family: var(--s-font-body);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

.s-site a { color: var(--s-accent); }
.s-site a:hover { color: var(--s-accent-hover); }

.s-site h1, .s-site h2, .s-site h3, .s-site .s-display {
    font-family: var(--s-font-display);
    font-weight: var(--s-display-weight);
    letter-spacing: var(--s-track-display);
    color: var(--s-ink);
    margin: 0;
}

.s-site .s-accent { font-family: var(--s-font-accent); font-style: italic; font-weight: 400; letter-spacing: var(--s-accent-track); color: var(--s-accent); background: var(--s-accent-paint); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: var(--s-accent-fill); padding-right: .06em; }

.s-site :focus-visible {
    outline: 3px solid var(--s-focus);
    outline-offset: 2px;
}
/* Dark bands: the ring in the amber, which reads on them. */
.s-cover, .s-work, .s-utility, .s-voices, .s-closing--band, .s-feature { --s-focus: var(--s-focus-on-deep); }
.s-footer { --s-focus: var(--s-footer-focus); }
.s-topbar { --s-focus: var(--s-on-topbar); }

.s-skip {
    position: absolute;
    left: -9999px;
    top: 8px;
    z-index: 2000;
    padding: 10px 16px;
    border-radius: var(--s-radius-sm);
    background: var(--s-ink);
    color: var(--s-bg);
}
.s-skip:focus { left: 8px; color: var(--s-bg); }

.s-container {
    width: 100%;
    max-width: calc(var(--s-container) + 2 * var(--s-gutter));
    margin: 0 auto;
    padding: 0 var(--s-gutter);
    box-sizing: border-box;
}

.s-section { padding: var(--s-section) 0; }
.s-section--flush-top { padding-top: 0; }
/* On the home, two plain sections in a row share one gap instead of adding both paddings
   (104 + 104): the rhythm stays one section apart whichever blocks the admin switches on. */
[data-ek-page="home"] main > .s-section:not(.s-section--band, .s-section--accent, .s-voices, .s-closing--band)
    + .s-section:not(.s-section--band, .s-section--accent, .s-voices, .s-closing--band) { padding-top: 0; }
.s-section--band { background: var(--s-band); }
.s-section--accent { background: var(--s-accent); color: var(--s-on-accent); }
.s-section--accent h2, .s-section--accent h3 { color: var(--s-on-accent); }

/* Type scale — fluid, so one rule serves a phone and a desktop. */
.s-h1 { font-size: calc(clamp(44px, 6vw, 84px) * var(--s-h1-scale)); line-height: 0.98; }
.s-h2 { font-size: var(--s-h2-size); line-height: var(--s-h2-leading); }
/* A page title set as a section heading is still the page's h1. */
h1.s-h2 { font-size: calc(var(--s-h2-size) * var(--s-h1-scale)); }
.s-site .s-h2 { letter-spacing: var(--s-h2-track); }
.s-h3 { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.2; letter-spacing: -0.02em; }
.s-lead { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--s-muted); margin: 0; }
.s-muted { color: var(--s-muted); }
.s-small { font-size: 14px; }

.s-section-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px 48px;
    margin-bottom: 36px;
}
.s-section-head p { margin: 8px 0 0; }

/* ── Buttons, links, chips ────────────────────────────────────────────────── */

.s-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 24px;
    border: 1px solid transparent;
    border-radius: var(--s-btn-radius);
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s ease, background-color .15s ease, color .15s ease, border-color .15s ease, filter .15s ease;
    box-sizing: border-box;
}
.s-btn--lg { min-height: 58px; padding: 0 30px; font-size: 17px; }
.s-btn--block { display: flex; width: 100%; }

.s-site .s-btn--primary { background: var(--s-btn-primary-bg); color: var(--s-on-accent); border: var(--s-btn-primary-border); box-shadow: var(--s-btn-primary-shadow); }
.s-site .s-btn--primary:hover { background: var(--s-btn-primary-hover-bg); color: var(--s-on-accent); filter: var(--s-btn-primary-hover-filter); }
.s-site .s-btn--outline { border-color: var(--s-ink); color: var(--s-ink); background: transparent; }
.s-site .s-btn--outline:hover { background: var(--s-ink); color: var(--s-bg); }
.s-site .s-btn--light { background: var(--s-surface); color: var(--s-ink); }
.s-site .s-btn--light:hover { background: var(--s-band); color: var(--s-ink); }
.s-site .s-btn--ghost-light { border-color: var(--s-on-accent); color: var(--s-on-accent); }
.s-site .s-btn--ghost-light:hover { background: var(--s-on-accent); color: var(--s-accent); }

.s-btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.s-site .s-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    text-decoration: none;
}
.s-link-arrow .bi { transition: transform .15s ease; }
.s-link-arrow:hover .bi { transform: translateX(3px); }

.s-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: var(--s-radius-btn);
    background: var(--s-accent-soft);
    color: var(--s-accent);
    font-size: 14px;
    font-weight: 600;
}
.s-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--s-radius-btn);
    background: var(--s-highlight);
    color: var(--s-on-highlight);
    font-size: 12px;
    font-weight: 700;
}

.s-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.s-checks li { display: inline-flex; align-items: center; gap: 6px; color: var(--s-muted); font-size: 15px; }
.s-checks .bi { color: var(--s-accent); }

/* ── Cards ────────────────────────────────────────────────────────────────── */

.s-card {
    background: var(--s-surface);
    border: 1px solid var(--s-line);
    border-radius: var(--s-radius);
}
.s-card--pad { padding: 28px; }

.s-grid { display: grid; gap: 20px; }
.s-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.s-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.s-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 991.98px) {
    .s-grid--3, .s-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .s-grid--2, .s-grid--3, .s-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

.s-media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--s-radius-lg);
    background: var(--s-tint-3);
}

/* ── Header ───────────────────────────────────────────────────────────────── */

.s-header {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: var(--s-bg);
    border-bottom: 1px solid transparent;
}
.s-header.is-scrolled { border-bottom-color: var(--s-line); }
/* --s-header-bar: the bar's height, which a page that slides under the header reads too. */
.s-header__bar { display: flex; align-items: center; gap: 28px; min-height: var(--s-header-bar, 76px); }
.s-header__logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.s-header__logo img { display: block; height: var(--s-logo-h); width: auto; }
.s-header__nav { display: flex; align-items: center; gap: 4px; flex-grow: 1; }
.s-header__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
/* A dropdown wrapper is a block: its button would sit on a line of text and ride a few pixels
   above the other buttons. */
.s-header__actions > .dropdown { display: flex; }
/* A narrow phone with a signed-in visitor: search, cart, notifications, avatar and menu beside
   the logo came to some 430px, wider than the screen — the menu button sat off its edge and
   every page could be dragged sideways. Below 420px the bar tightens so all five fit. */
@media (max-width: 419.98px) {
    .s-header__bar { gap: 12px; }
    .s-header__actions { gap: 6px; }
    .s-header__actions .s-icon-btn, .s-header__actions .s-avatar-btn, .s-header__actions .s-avatar { width: 40px; height: 40px; }
    /* A wide logo (a name set in full) gives way rather than the buttons. */
    .s-header__logo { flex-shrink: 1; min-width: 0; }
    .s-header__logo img { max-width: 100%; height: auto; max-height: var(--s-logo-h); }
}

.s-site .s-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--s-radius-sm);
    background: transparent;
    color: var(--s-ink);
    font: inherit;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}
/* A menu entry is one line: "Cursos online" broke in two at a laptop's 1280px. */
.s-site .s-nav-link, .s-header__actions .s-btn { white-space: nowrap; }
/* Between the phone menu and a wide screen the bar is tighter, so a school's full menu and
   its two calls to action fit beside the logo. */
@media (min-width: 1200px) and (max-width: 1439.98px) {
    .s-header__bar { gap: 16px; }
    .s-header__nav { gap: 0; }
    .s-site .s-header__nav .s-nav-link, .s-site .s-header__actions .s-nav-link { padding: 0 9px; font-size: 15px; }
    .s-header__actions { gap: 6px; }
}
.s-site .s-nav-link:hover, .s-site .s-nav-link[aria-expanded="true"] { background: var(--s-band); color: var(--s-ink); }
.s-site .s-nav-link.is-active { color: var(--s-accent); font-weight: 600; }
.s-site .s-nav-link--strong { color: var(--s-accent); font-weight: 600; }

.s-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--s-line);
    border-radius: var(--s-radius-btn);
    background: var(--s-surface);
    color: var(--s-ink);
    font-size: 18px;
    cursor: pointer;
    text-decoration: none;
}
.s-site .s-icon-btn:hover { background: var(--s-band); color: var(--s-ink); }
.s-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--s-highlight);
    color: var(--s-on-highlight);
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    box-sizing: border-box;
}

.s-avatar { width: 44px; height: 44px; border-radius: 999px; object-fit: cover; display: block; }
/* The account menu's button is the person's own round picture, not a square icon button. */
.s-avatar-btn { display: inline-flex; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; overflow: hidden; background: var(--s-band); box-shadow: 0 0 0 1px var(--s-line); cursor: pointer; }
.s-avatar-btn:hover, .s-avatar-btn[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--s-accent); }

.s-site .s-menu {
    --bs-dropdown-min-width: 260px;
    --bs-dropdown-padding-y: 8px;
    --bs-dropdown-item-padding-x: 14px;
    --bs-dropdown-item-padding-y: 10px;
    border-radius: var(--s-radius);
    box-shadow: var(--s-shadow-lg);
    padding: 8px;
}
.s-site .s-menu .dropdown-item { border-radius: var(--s-radius-sm); display: flex; flex-direction: column; gap: 2px; white-space: normal; }
.s-menu__title { font-weight: 600; color: var(--s-ink); }
.s-menu__desc { font-size: 14px; color: var(--s-muted); }

.s-header__toggle { display: none; }

@media (max-width: 1199.98px) {
    /* Scoped like the rules that style these links, or those win and the bar overflows. */
    .s-site .s-header__nav, .s-site .s-header__desktop-only { display: none; }
    .s-site .s-header__toggle { display: inline-flex; }
}
@media (max-width: 575.98px) {
    .s-header__bar { gap: 12px; }
}

/* The phone menu: an offcanvas that lists the same destinations. */
.s-site .s-drawer { --bs-offcanvas-width: min(360px, 88vw); background: var(--s-bg); }
.s-drawer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.s-drawer__group { padding: 12px 0; border-top: 1px solid var(--s-line); }
.s-drawer__group:first-child { border-top: 0; }
.s-drawer__label { margin: 0 0 4px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--s-muted); }
/* Only the list's links: the buttons above it keep their own colours (ink on the primary's
   dark fill could not be read). */
.s-site .s-drawer__list a { display: flex; align-items: center; min-height: 44px; color: var(--s-ink); text-decoration: none; font-size: 17px; }

/* ── Announcement bar (admin → top notification) ─────────────────────────── */

.s-topbar { background: var(--s-topbar-bg); color: var(--s-on-topbar); font-size: 15px; }
.s-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; }
.s-topbar__text p { margin: 0; }
.s-site .s-topbar a { color: var(--s-on-topbar); font-weight: 600; text-decoration: underline; }
.s-topbar__close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: transparent; color: var(--s-on-topbar); cursor: pointer; }

/* ── Floating WhatsApp (footer.php) ──────────────────────────────────────────── */

.s-site .s-whatsapp { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 1040; display: flex; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: 999px; background: var(--s-whatsapp); color: var(--s-on-whatsapp); font-size: 30px; text-decoration: none; box-shadow: 0 12px 28px -8px rgba(0, 0, 0, .45); transition: transform .2s ease; }
.s-site .s-whatsapp:hover { color: var(--s-on-whatsapp); transform: scale(1.06); }
/* A ring that pulses now and then, so the eye finds it without it shouting. */
.s-whatsapp::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--s-whatsapp); animation: s-whatsapp-ring 3.2s ease-out infinite; }
@keyframes s-whatsapp-ring { 0% { transform: scale(1); opacity: .7; } 45%, 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .s-whatsapp::after { animation: none; } }
/* Above a product page's buy bar on a phone. */
@media (max-width: 991.98px) { body.s-site:has(.s-buybar) .s-whatsapp { bottom: calc(92px + env(safe-area-inset-bottom)); } }

/* ── A school's top strip (_utility_bar.php) ───────────────────────────────── */

.s-utility { background: var(--s-deep); color: var(--s-on-deep-muted); font-size: 13px; }
.s-utility__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.s-utility__notice { margin: 0; color: var(--s-on-deep); font-weight: 600; display: flex; align-items: center; gap: 10px; }
.s-utility__notice:not(:empty)::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--s-highlight); flex-shrink: 0; animation: s-breathe 2s infinite; }
.s-utility__links { display: flex; align-items: center; gap: 24px; margin: 0; padding: 0; list-style: none; }
.s-utility__links li { display: flex; align-items: center; gap: 6px; }
.s-site .s-utility a { display: inline-flex; align-items: center; gap: 6px; color: var(--s-on-deep); text-decoration: none; }
.s-site .s-utility a:hover { color: var(--s-highlight); }
/* The short links never break in two (the address may wrap); a long announcement shrinks and
   wraps rather than pushing the page sideways. */
.s-utility__notice { min-width: 0; }
.s-site .s-utility__links a { white-space: nowrap; }
@media (max-width: 767.98px) {
    /* As specific as the li rule above, or the address would stay on a phone. */
    .s-utility__links .s-utility__address { display: none; }
    .s-utility__links { gap: 14px; }
    .s-utility__inner { padding-top: 8px; padding-bottom: 8px; }
    .s-utility__notice { font-size: 12px; line-height: 1.4; }
}

/* ── Footer ───────────────────────────────────────────────────────────────── */

.s-footer { margin-top: var(--s-footer-gap); background: var(--s-footer-bg); color: var(--s-footer-ink); padding: 72px 0 40px; font-size: 15px; }
.s-footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.s-footer__brand img { height: var(--s-logo-h-footer); width: auto; display: block; margin-bottom: 14px; filter: var(--s-footer-logo-filter); }
.s-footer__title { margin: 0 0 10px; font-weight: 700; color: var(--s-footer-strong); }
.s-site .s-footer strong { color: var(--s-footer-strong); }
.s-site .s-footer .form-select { background-color: var(--s-footer-control-bg); border-color: var(--s-footer-control-line); color: var(--s-footer-control-ink); }
.s-footer ul { list-style: none; margin: 0; padding: 0; }
.s-site .s-footer a { display: inline-flex; align-items: center; min-height: 36px; color: var(--s-footer-ink); text-decoration: none; }
.s-site .s-footer a:hover { color: var(--s-footer-link-hover); }
.s-footer__social { display: flex; gap: 8px; margin-top: 16px; }
/* The networks on the footer's own ground (light or dark per skin), inverting on hover. */
.s-site .s-footer__social .s-icon-btn { background: var(--s-footer-control-bg); border-color: var(--s-footer-control-line); color: var(--s-footer-strong); }
.s-site .s-footer__social .s-icon-btn:hover { background: var(--s-footer-strong); border-color: var(--s-footer-strong); color: var(--s-footer-bg); }
.s-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--s-line); font-size: 14px; }
@media (max-width: 991.98px) {
    .s-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .s-footer__brand { grid-column: 1 / -1; }
}

/* ── Page blocks ──────────────────────────────────────────────────────────── */

.s-measure { max-width: 820px; }

/* Hero */
.s-hero { padding: 56px 0 88px; }
.s-hero__grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 64px; align-items: center; }
.s-hero__grid--solo { grid-template-columns: minmax(0, 860px); }
.s-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.s-hero__media { aspect-ratio: 6 / 5; padding: 14px; border-radius: var(--s-radius-lg); background: var(--s-accent-soft); box-sizing: border-box; }
.s-hero__media .s-media { border-radius: var(--s-radius); }
@media (max-width: 991.98px) {
    .s-hero { padding: 24px 0 48px; }
    .s-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

/* Proof strip */
.s-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 56px; padding: 28px 40px; }
.s-proof__stats { display: flex; gap: 40px; margin: 0; }
.s-proof__stats dd { margin: 0; }
.s-proof__value { font-size: 34px; line-height: 1.1; }
.s-proof__logos { flex-grow: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; list-style: none; margin: 0; padding: 0; }
.s-proof__logos img { display: block; height: 40px; width: auto; max-width: 160px; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .15s ease, opacity .15s ease; }
.s-proof__logos a:hover img { filter: none; opacity: 1; }
@media (max-width: 575.98px) { .s-proof { padding: 22px 20px; } }

/* Audiences */
.s-site .s-audience { display: flex; flex-direction: column; gap: 14px; min-height: 260px; padding: 32px; border-radius: var(--s-radius-lg); color: var(--s-ink); text-decoration: none; box-sizing: border-box; transition: transform .15s ease; }
.s-site .s-audience:hover { color: var(--s-ink); transform: translateY(-2px); }
.s-audience--1 { background: var(--s-tint-1); }
.s-audience--2 { background: var(--s-tint-2); }
.s-audience--3 { background: var(--s-tint-3); }
.s-audience__label { font-size: 30px; line-height: 1.1; }
.s-audience__text { color: var(--s-tint-ink); font-size: 17px; }
.s-audience__more { margin-top: auto; color: var(--s-accent); }

/* Steps */
.s-steps { list-style: none; margin: 0; padding: 0; }
.s-step { display: flex; flex-direction: column; gap: 14px; padding: 32px; border-radius: var(--s-radius-lg); background: var(--s-band); }
.s-step__n { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 999px; background: var(--s-accent); color: var(--s-on-accent); font-family: var(--s-font-display); font-weight: 700; font-size: 22px; }

/* Features (on the accent band) */
.s-features__intro { max-width: 420px; margin: 0; color: var(--s-on-accent-muted); font-size: 17px; }
.s-feature { display: flex; flex-direction: column; gap: 12px; min-height: 200px; padding: 28px; border-radius: var(--s-radius-lg); background: var(--s-accent-deep); border: 1px solid var(--s-accent-deep-line); color: var(--s-on-accent-muted); box-sizing: border-box; }
.s-feature .s-h3 { color: var(--s-on-accent); }
.s-feature__tag { align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--s-accent-soft); color: var(--s-accent); font-size: 12px; font-weight: 700; }

/* Plans */
.s-plan { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: var(--s-radius-lg); background: var(--s-surface); border: 1px solid var(--s-line); }
.s-plan--popular { border: 2px solid var(--s-accent); box-shadow: var(--s-shadow-lg); }
.s-plan__flag { position: absolute; top: -13px; left: 24px; padding: 4px 12px; border-radius: 999px; background: var(--s-accent); color: var(--s-on-accent); font-size: 12px; font-weight: 700; }
.s-plan__name { margin: 0; font-size: 17px; font-weight: 700; }
.s-plan__price { margin: 0; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.s-plan__price .s-display { font-size: 36px; line-height: 1; }
.s-plan__list { list-style: none; margin: 0 0 auto; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; color: var(--s-muted); }
.s-plan__list li { display: flex; gap: 8px; align-items: flex-start; }
.s-plan__list .bi { color: var(--s-accent); }

/* Testimonials */
.s-quote { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; margin: 0; font-size: 17px; }
.s-quote__who { display: flex; align-items: center; gap: 12px; font-weight: 600; }

/* Learners band */
.s-learn { padding: 48px; border-radius: var(--s-radius-lg); background: var(--s-band); }
.s-site .s-course-mini { display: flex; gap: 14px; align-items: center; padding: 10px; border-radius: var(--s-radius); background: var(--s-surface); color: var(--s-ink); text-decoration: none; }
.s-site .s-course-mini:hover { color: var(--s-ink); box-shadow: var(--s-shadow); }
.s-course-mini img { width: 76px; height: 76px; flex-shrink: 0; border-radius: var(--s-radius-sm); object-fit: cover; background: var(--s-tint-3); }
.s-course-mini > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.s-course-mini__title { font-family: var(--s-font-display); font-weight: 600; font-size: 16px; line-height: 1.25; letter-spacing: -0.01em; }
.s-course-mini__price { font-size: 15px; font-weight: 700; }
@media (max-width: 575.98px) { .s-learn { padding: 24px 16px; } }

/* Closing call to action */
.s-closing { text-align: center; }
.s-closing .s-container { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.s-closing__copy { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.s-closing .s-btn-row { justify-content: center; }

/* Centred page head (pricing) */
.s-hero--center { text-align: center; padding-bottom: 56px; }
.s-hero--center .s-container { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.s-hero--center .s-lead { max-width: 640px; }

/* ── Eyebrows and the buttons for dark bands and photos ─────────────────────── */

/* An eyebrow may be a heading (a section with no other title), so it beats the headings' type. */
.s-site .s-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-family: var(--s-font-body); font-size: 12px; font-weight: 600; letter-spacing: var(--s-eyebrow-track); text-transform: uppercase; color: var(--s-muted); }
.s-eyebrow::before { content: ""; width: var(--s-eyebrow-mark-width); height: var(--s-eyebrow-mark-height); border-radius: var(--s-eyebrow-mark-radius); background: var(--s-eyebrow-mark); flex-shrink: 0; }
.s-site .s-eyebrow--on-deep { color: var(--s-on-deep-muted); }
.s-site .s-btn--highlight { background: var(--s-highlight); color: var(--s-on-highlight); box-shadow: var(--s-btn-highlight-shadow); }
.s-site .s-btn--highlight:hover { background: var(--s-btn-highlight-hover-bg); color: var(--s-btn-highlight-hover-ink); transform: var(--s-btn-hover-lift); }
/* On a photo: a pane of frosted glass. */
.s-site .s-btn--glass { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .28); color: var(--s-on-deep); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.s-site .s-btn--glass:hover { background: rgba(255, 255, 255, .2); color: var(--s-on-deep); }

/* A dot that breathes: something is live (admissions open). */
.s-live { display: inline-flex; align-items: center; gap: 8px; letter-spacing: 0; text-transform: none; font-weight: 600; }
.s-live::before { content: ""; width: 8px; height: 8px; border-radius: 99px; background: var(--s-highlight); animation: s-breathe 2s infinite; }
@keyframes s-breathe { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--s-highlight) 60%, transparent); } 70% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--s-highlight) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--s-highlight) 0%, transparent); } }
.s-site .s-btn--on-deep { border-color: var(--s-deep-line); color: var(--s-on-deep); background: transparent; }
.s-site .s-btn--on-deep:hover { background: var(--s-on-deep); color: var(--s-deep); }
.s-voices { background: var(--s-deep); color: var(--s-on-deep); }
.s-voices__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 96px; }
.s-voices__grid--solo { grid-template-columns: minmax(0, 860px); }
.s-voices__lead { display: flex; flex-direction: column; gap: 32px; margin: 0; }
.s-voices__lead blockquote { margin: 0; }
.s-voices__lead p { margin: 0; font-family: var(--s-font-display); font-weight: 600; font-size: clamp(26px, 3vw, 42px); line-height: 1.18; letter-spacing: -0.02em; text-wrap: balance; }
.s-voices__lead--long p { font-size: clamp(20px, 2vw, 26px); line-height: 1.35; }
.s-voices__others { display: flex; flex-direction: column; justify-content: flex-end; gap: 28px; }
.s-voices__quote { margin: 0; display: flex; flex-direction: column; gap: 14px; padding-top: 22px; border-top: 1px solid var(--s-deep-line); }
.s-voices__quote blockquote, .s-voices__quote p { margin: 0; }
.s-voices__quote p { font-size: 16px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.s-voices .s-quote__who { color: var(--s-on-deep); }
@media (max-width: 991.98px) {
    .s-voices__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
.s-checks--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px 24px; }
.s-checks--grid li { color: var(--s-ink); }
.s-site .s-audience--compact { min-height: 0; padding: 24px 28px; }
.s-audience--compact .s-audience__label { font-size: 24px; }

/* Forms */
.s-form { display: flex; flex-direction: column; gap: 18px; }
.s-field { display: flex; flex-direction: column; gap: 6px; }
.s-field .form-label { margin: 0; font-weight: 600; }
.s-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 575.98px) { .s-field-row { grid-template-columns: minmax(0, 1fr); } }
.s-required { color: var(--s-accent); }
.s-password { position: relative; }
.s-password .form-control { padding-right: 52px; }
.s-password__toggle { position: absolute; top: 2px; right: 2px; width: 44px; height: 44px; border: 0; background: transparent; color: var(--s-muted); cursor: pointer; }
.s-notice { display: flex; gap: 10px; align-items: flex-start; padding: 14px 18px; border-radius: var(--s-radius-sm); font-size: 15px; }
.s-notice--ok { background: var(--s-accent-soft); color: var(--s-accent-soft-ink); }
.s-notice--error { background: var(--s-tint-2); color: var(--s-ink); }

/* ── Product pages (course, programme) ────────────────────────────────────── */

.s-crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; }
.s-site .s-crumbs a { color: var(--s-muted); text-decoration: none; }
.s-site .s-crumbs a:hover { color: var(--s-ink); }
.s-crumbs a + a::before { content: "/"; margin-right: 6px; color: var(--s-faint); }

.s-share__title { margin: 8px 0; font-size: 14px; font-weight: 600; }
.ek-share .d-flex .s-icon-btn { width: 40px; height: 40px; }

/* Content panels */
.s-panel { padding: 32px; border-radius: var(--s-radius-lg); background: var(--s-surface); border: 1px solid var(--s-line); }
.s-panel > .s-h3, .s-panel__head { margin-bottom: 18px; }
.s-panel__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.s-panel__head .s-h3 { margin: 0; }
.s-panel--tint { background: var(--s-accent-soft); border-color: transparent; color: var(--s-accent-soft-ink); }
@media (max-width: 575.98px) { .s-panel { padding: 22px 18px; } }

/* Rich text written in an editor */
.s-prose { font-size: 16px; line-height: 1.7; overflow-wrap: anywhere; }
.s-prose > :first-child { margin-top: 0; }
.s-prose > :last-child { margin-bottom: 0; }
.s-prose img, .s-prose iframe, .s-prose video { max-width: 100%; border-radius: var(--s-radius-sm); }
.s-prose img, .s-prose video { height: auto; }
/* An embedded video: inside the editor's 16:9 box it fills the box (height: auto collapsed it to
   a strip); on its own it keeps the video's shape across the column. */
.s-prose > iframe, .s-prose :not(.ratio) > iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.s-prose h2, .s-prose h3, .s-prose h4 { font-size: 20px; margin: 24px 0 8px; letter-spacing: -0.01em; }
.s-prose--sm { font-size: 15px; }

/* Accordions (curriculum, FAQs): native <details>, no script */
.s-accordion { display: flex; flex-direction: column; border: 1px solid var(--s-line); border-radius: var(--s-radius); overflow: hidden; }
.s-accordion details + details { border-top: 1px solid var(--s-line); }
.s-accordion summary { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 14px 18px; list-style: none; cursor: pointer; font-weight: 600; }
.s-accordion summary::-webkit-details-marker { display: none; }
.s-accordion summary > span:first-child { flex-grow: 1; }
.s-accordion summary::after { content: "\F282"; font-family: "bootstrap-icons"; font-weight: 400; color: var(--s-muted); transition: transform .15s ease; }
.s-accordion details[open] > summary::after { transform: rotate(180deg); }
.s-accordion summary:hover { background: var(--s-bg); }
.s-accordion__answer { padding: 0 18px 18px; }
.s-link-button { border: 0; background: transparent; padding: 6px 0; color: var(--s-accent); font: inherit; font-weight: 600; cursor: pointer; }

/* A product card (related items) */
.s-site .s-card-link { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--s-line); border-radius: var(--s-radius); background: var(--s-surface); color: var(--s-ink); text-decoration: none; transition: box-shadow .15s ease; }
.s-site .s-card-link:hover { color: var(--s-ink); box-shadow: var(--s-shadow); }
.s-card-link img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--s-tint-3); display: block; }
.s-card-link__body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 20px; }
.s-card-link__title { font-family: var(--s-font-display); font-weight: 600; font-size: 18px; line-height: 1.25; letter-spacing: -0.01em; }
.s-card-link__price { font-weight: 700; }
.s-date__schedule { font-weight: 400; opacity: .8; }
.s-dates { display: flex; flex-wrap: wrap; gap: 6px; }
.s-date { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--s-line); border-radius: 999px; background: var(--s-bg); color: var(--s-ink); font: inherit; font-size: 14px; font-weight: 600; }
button.s-date { cursor: pointer; }
button.s-date:hover { border-color: var(--s-accent); color: var(--s-accent); }
button.s-date[aria-pressed="true"] { background: var(--s-accent); border-color: var(--s-accent); color: var(--s-on-accent); }
.s-date--hot { background: var(--s-tint-2); border-color: transparent; }
.s-notice[hidden] { display: none; }
.s-notice--hot { background: var(--s-tint-2); color: var(--s-ink); }
/* The advisor's floating button: stacked above the WhatsApp button (62px, 14px apart) when
   there is one, and above a phone's purchase bar — fixed places, clear of the iPhone's home
   indicator, so both move together as the browser's own bar comes and goes. */
body.s-site:has(.s-whatsapp) .eadv-launcher { bottom: calc(96px + env(safe-area-inset-bottom)); }
@media (max-width: 991.98px) { body.s-site:has(.s-buybar) .eadv-launcher { bottom: calc(92px + env(safe-area-inset-bottom)); } }
@media (max-width: 991.98px) { body.s-site:has(.s-buybar):has(.s-whatsapp) .eadv-launcher { bottom: calc(166px + env(safe-area-inset-bottom)); } }
/* On a phone the two floating buttons covered the page's own content — the advisor's pill
   alone ran some 200px across. Below 768px they share one narrow column by the edge, 48px
   high, above the purchase bar when there is one. The advisor keeps its words ("Ask …") while
   the visitor may be deciding — on arrival, when they stop or scroll up — and folds to its
   icon while they scroll down, reading (eadv-compact, set by _advisor_widget.php). */
@media (max-width: 767.98px) {
    .s-site .s-whatsapp { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); width: 48px; height: 48px; font-size: 24px; }
    body.s-site .eadv-launcher { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); height: 48px; padding: 0 16px 0 13px; gap: 8px; border-radius: 999px; transition: padding .25s ease, gap .25s ease, transform .18s ease; }
    body.s-site .eadv-launcher .eadv-icon { width: 22px; height: 22px; }
    body.s-site .eadv-launcher > span { max-width: 180px; overflow: hidden; white-space: nowrap; transition: max-width .25s ease, opacity .2s ease; }
    body.s-site .eadv-launcher.eadv-compact { padding: 0 13px; gap: 0; }
    body.s-site .eadv-launcher.eadv-compact > span { max-width: 0; opacity: 0; }
    body.s-site:has(.s-whatsapp) .eadv-launcher { bottom: calc(72px + env(safe-area-inset-bottom)); }
    body.s-site:has(.s-buybar) .s-whatsapp { bottom: calc(88px + env(safe-area-inset-bottom)); }
    body.s-site:has(.s-buybar) .eadv-launcher { bottom: calc(88px + env(safe-area-inset-bottom)); }
    body.s-site:has(.s-buybar):has(.s-whatsapp) .eadv-launcher { bottom: calc(146px + env(safe-area-inset-bottom)); }
}
@media (max-width: 767.98px) {
    /* Above the upload page's summary bar, whose "Pay" sits where they would. */
    body.s-site:has(.s-upbar:not([hidden])) .s-whatsapp { bottom: calc(150px + env(safe-area-inset-bottom)); }
    body.s-site:has(.s-upbar:not([hidden])) .eadv-launcher { bottom: calc(208px + env(safe-area-inset-bottom)); }
}
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
    body.s-site .eadv-launcher, body.s-site .eadv-launcher > span { transition: none; }
}
@media (max-width: 991.98px) {
    body.s-site:has(.s-buybar) { padding-bottom: 76px; }
}

/* Preview modal */
.s-preview { border-radius: var(--s-radius); overflow: hidden; }
.s-preview .modal-header { border-bottom: 1px solid var(--s-line); }
.s-preview__loading { display: flex; align-items: center; justify-content: center; min-height: 240px; color: var(--s-accent); }
/* The photo layout's body is built like the classic one: every section a white card on a
   band, one heading size, no cards inside cards. The skin shows in the header, the buy box and
   the accents, not in a different arrangement per section — which read as disorder. */
.s-site main:has(.s-product--showcase) { background: var(--s-band); }
@keyframes s-kenburns { from { transform: scale(1.02); } to { transform: scale(1.12) translate(-1.5%, 1%); } }

/* ── Bootstrap bridge ─────────────────────────────────────────────────────── */

.s-site {
    --bs-body-bg: var(--s-bg);
    --bs-body-color: var(--s-ink);
    --bs-body-font-family: var(--s-font-body);
    --bs-border-color: var(--s-line);
    --bs-secondary-color: var(--s-muted);
    --bs-primary: var(--s-accent);
    --bs-dropdown-bg: var(--s-surface);
    --bs-dropdown-border-color: var(--s-line);
    --bs-dropdown-link-hover-bg: var(--s-band);
    --bs-dropdown-link-active-bg: var(--s-accent-soft);
    --bs-dropdown-link-active-color: var(--s-ink);
}
.s-site .dropdown-menu { --bs-dropdown-bg: var(--s-surface); --bs-dropdown-border-color: var(--s-line); --bs-dropdown-link-hover-bg: var(--s-band); --bs-dropdown-link-active-bg: var(--s-accent-soft); --bs-dropdown-link-active-color: var(--s-ink); }
.s-site .form-control, .s-site .form-select { background-color: var(--s-surface); border-color: var(--s-line); border-radius: var(--s-radius-sm); min-height: 48px; }
.s-site .form-control:focus, .s-site .form-select:focus { border-color: var(--s-accent); box-shadow: 0 0 0 3px var(--s-accent-soft); }

/* ── Catalogues (programs.php, courses.php via _catalog.php) ──────────────── */

.s-catalog { padding-top: 32px; padding-bottom: 72px; }
.s-catalog__head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.s-catalog__layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; align-items: start; }
@media (max-width: 991.98px) { .s-catalog__layout { grid-template-columns: minmax(0, 1fr); } }

/* Facets: a column on a desktop, a drawer (offcanvas-lg) on a phone */
.s-site .s-catalog__filters { --bs-offcanvas-width: min(360px, 88vw); --bs-offcanvas-bg: var(--s-bg); }
@media (min-width: 992px) {
    .s-catalog__filters { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; }
    .s-catalog__filters .offcanvas-header { display: none; }
}
.s-catalog__filters .offcanvas-header { border-bottom: 1px solid var(--s-line); }
@media (max-width: 991.98px) { .s-catalog__filters .offcanvas-body { padding: 20px var(--s-gutter) 32px; } }
.s-facet { margin: 0; padding: 0; border: 0; min-width: 0; }
.s-facet__title { float: none; margin: 0 0 10px; padding: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--s-muted); }
.s-facet__hint { margin: -6px 0 10px; font-size: 13px; color: var(--s-faint); }
.s-facet__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.s-facet__option { position: relative; }
.s-facet__option input { position: absolute; opacity: 0; pointer-events: none; }
.s-facet__option label { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; padding: 6px 12px; border-radius: var(--s-radius-sm); color: var(--s-ink); font-size: 15px; cursor: pointer; }
.s-facet__option label:hover { background: var(--s-band); }
.s-facet__option--sub label { padding-left: 28px; font-size: 14px; }
.s-facet__option input:checked + label { background: var(--s-accent-soft); color: var(--s-accent-soft-ink); font-weight: 700; }
.s-facet__option input:focus-visible + label { outline: 3px solid var(--s-focus); outline-offset: 2px; }
.s-facet__count { font-size: 13px; color: var(--s-faint); font-variant-numeric: tabular-nums; }

/* Results bar, filters in use */
.s-catalog__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 16px; }
.s-catalog__count { margin: 0; color: var(--s-muted); }
.s-catalog__count strong { color: var(--s-ink); font-size: 18px; }
.s-catalog__headline { margin-left: 4px; font-size: 14px; opacity: 0; transition: opacity .4s ease; }
.s-catalog__tools { display: flex; align-items: center; gap: 10px; }
.s-catalog__tools .form-select { min-height: 44px; border-radius: var(--s-radius-btn); padding-left: 16px; }
.s-catalog__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--s-highlight); color: var(--s-on-highlight); font-size: 12px; font-weight: 700; }
.s-btn--sm { min-height: 44px; padding: 0 16px; font-size: 15px; }

/* The grid and its cards */
.s-catalog__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1199.98px) { .s-catalog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .s-catalog__grid { grid-template-columns: minmax(0, 1fr); } }
.s-catalog__sentinel { height: 1px; }
.s-catalog__loading { display: none; padding: 24px 0; text-align: center; color: var(--s-accent); }
.s-catalog__empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 56px 16px; border: 1px dashed var(--s-line); border-radius: var(--s-radius); text-align: center; color: var(--s-muted); }
.s-catalog__empty .bi { font-size: 32px; color: var(--s-faint); }
.s-catalog__empty p { margin: 0; }
.s-catalog .pagination { margin-top: 32px; }

.s-pcard { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--s-line); border-radius: var(--s-radius); background: var(--s-surface); transition: box-shadow .15s ease, opacity .25s ease, transform .25s ease; }
.s-pcard:hover { box-shadow: var(--s-shadow); }
.s-pcard__media { position: relative; aspect-ratio: 16 / 10; background: var(--s-tint-3); }
.s-pcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.s-pcard__flag { position: absolute; top: 12px; left: 12px; }
.s-pcard__body { flex-grow: 1; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px; }
.s-pcard__kicker { margin: 0; font-size: 13px; font-weight: 600; color: var(--s-accent); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.s-pcard__title { margin: 0; font-family: var(--s-font-display); font-weight: 600; font-size: 19px; line-height: 1.25; letter-spacing: -0.01em; }
.s-site .s-pcard__link { color: var(--s-ink); text-decoration: none; }
.s-pcard__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.s-pcard:hover .s-pcard__link { color: var(--s-accent); }
.s-pcard__link:focus-visible { outline: none; }
.s-pcard:has(.s-pcard__link:focus-visible) { outline: 3px solid var(--s-focus); outline-offset: 2px; }
.s-pcard__status { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.4; }
.s-pcard__status .bi { margin-top: 1px; }
.s-pcard__status--hot { color: var(--s-ink); }
.s-pcard__status--hot .bi { color: var(--s-accent); }
.s-pcard__status--ok { color: var(--s-ink); }
.s-pcard__status--ok .bi { color: var(--s-accent); }
.s-pcard__status--muted { color: var(--s-muted); }
.s-pcard__detail { display: block; color: var(--s-muted); }
.s-pcard__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; color: var(--s-muted); }
.s-pcard__facts li { display: inline-flex; align-items: center; gap: 6px; }
.s-pcard__by { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--s-muted); }
.s-pcard__by img { width: 28px; height: 28px; border-radius: 999px; object-fit: contain; border: 1px solid var(--s-line); background: var(--s-surface); }
.s-pcard__rating { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 14px; }
.s-pcard__rating .bi { color: var(--s-highlight); }
.s-pcard__foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--s-line); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.s-pcard__price { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.s-pcard__price strong { font-size: 18px; color: var(--s-ink); }
.s-pcard__price del { font-size: 14px; color: var(--s-faint); }
.s-pcard__price-label, .s-pcard__then { font-size: 13px; color: var(--s-muted); }
.s-pcard__actions { position: relative; z-index: 2; display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: auto; }
.s-pcard__actions .s-pill { font-size: 13px; padding: 4px 10px; }
.s-icon-save { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--s-line); border-radius: 999px; background: var(--s-surface); color: var(--s-muted); font-size: 18px; cursor: pointer; }
.s-icon-save:hover { color: var(--s-accent); border-color: var(--s-accent); }
.s-icon-save[aria-pressed="true"] { color: var(--s-accent); }

/* ── Cart and checkout (shopping_cart.php, checkout.php) ──────────────────── */
.s-site .s-link-button--muted { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--s-muted); font-size: 14px; }
.s-site .s-link-button--muted:hover { color: var(--s-ink); }
.s-field > label { font-weight: 600; }
.s-social { display: flex; flex-direction: column; gap: 10px; }
.s-site .s-social a { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; border: 1px solid var(--s-line); border-radius: var(--s-radius-btn); background: var(--s-surface); color: var(--s-ink); font-weight: 600; text-decoration: none; }
.s-site .s-social a:hover { border-color: var(--s-ink); }
.s-divider { margin: 0; display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--s-muted); }
.s-divider::before, .s-divider::after { content: ""; flex: 1; height: 1px; background: var(--s-line); }

/* ── Events: the agenda (events.php) and the event page (event_page.php) ──── */
.s-pill--muted { background: var(--s-band); color: var(--s-muted); }
.s-panel__cta { margin: 20px 0 0; }
.s-map { overflow: hidden; border-radius: var(--s-radius); border: 1px solid var(--s-line); aspect-ratio: 16 / 9; }
.s-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ── Sign-in pages (login, sign_up, forgot_password, reset_password, …) ───── */
.s-field__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.s-field__head label { font-weight: 600; }
.was-validated .s-password:has(.form-control:invalid) ~ .invalid-feedback { display: block; }

/* ── Blog (blog.php, blog_read_post.php) ──────────────────────────────────── */

.s-blog { padding-top: 32px; padding-bottom: 72px; display: flex; flex-direction: column; gap: 28px; }
.s-blog__head { display: flex; flex-direction: column; gap: 14px; }
.s-blog__head .s-lead { max-width: 640px; }
.s-blog__search { position: relative; max-width: 520px; }
.s-blog__search .bi { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--s-muted); }
.s-blog__search .form-control { padding-left: 44px; border-radius: var(--s-radius-btn); }
.s-blog__cats { display: flex; flex-wrap: wrap; gap: 8px; }
.s-site .s-blog__cats a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--s-line); border-radius: 999px; background: var(--s-surface); color: var(--s-ink); font-size: 14px; font-weight: 600; text-decoration: none; }
.s-site .s-blog__cats a:hover { border-color: var(--s-accent); color: var(--s-accent); }
.s-site .s-blog__cats a[aria-current="page"] { background: var(--s-accent); border-color: var(--s-accent); color: var(--s-on-accent); }
.s-blog__results { margin: 0; color: var(--s-muted); }
.s-blog__layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
@media (max-width: 991.98px) { .s-blog__layout { grid-template-columns: minmax(0, 1fr); } }
.s-blog__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.s-blog__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 991.98px) { .s-blog__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .s-blog__grid, .s-blog__grid--3 { grid-template-columns: minmax(0, 1fr); } }
.s-blog__aside { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 24px; }
@media (max-width: 991.98px) { .s-blog__aside { position: static; } }
.s-site .s-blog__aside-title { margin: 0 0 12px; font-family: var(--s-font-body); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--s-muted); }
.s-blog__cta { padding: 20px; border-radius: var(--s-radius); background: var(--s-band); display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.s-blog__cta p { margin: 0; font-weight: 600; }

.s-post { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--s-line); border-radius: var(--s-radius); background: var(--s-surface); transition: box-shadow .15s ease; }
.s-post:hover { box-shadow: var(--s-shadow); }
.s-post:hover .s-pcard__link { color: var(--s-accent); }
.s-post:has(.s-pcard__link:focus-visible) { outline: 3px solid var(--s-focus); outline-offset: 2px; }
.s-post__media img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; display: block; background: var(--s-tint-3); }
.s-post__body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; flex-grow: 1; }
.s-post__body p { margin: 0; }
.s-post__kicker { font-size: 13px; font-weight: 600; color: var(--s-accent); }
.s-post__title { margin: 0; font-family: var(--s-font-display); font-weight: 600; font-size: 20px; line-height: 1.25; letter-spacing: -0.01em; }
.s-post__excerpt { color: var(--s-muted); font-size: 15px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.s-post__body .s-post__meta { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--s-muted); }
.s-post__meta img { width: 28px; height: 28px; border-radius: 999px; object-fit: cover; }
.s-post--wide { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.s-post--wide .s-post__media img { height: 100%; aspect-ratio: auto; min-height: 300px; }
.s-post--wide .s-post__body { justify-content: center; padding: 32px; gap: 14px; }
.s-post--wide .s-post__title { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15; }
@media (max-width: 767.98px) { .s-post--wide { grid-template-columns: minmax(0, 1fr); } .s-post--wide .s-post__media img { min-height: 0; aspect-ratio: 16 / 9; } .s-post--wide .s-post__body { padding: 20px; } }
.s-prose--article { font-size: 19px; line-height: 1.75; }
.s-prose--article h2 { font-size: 28px; margin: 40px 0 12px; }
.s-prose--article h3 { font-size: 22px; margin: 32px 0 10px; }
.s-prose--article img { display: block; margin: 24px auto; }
.s-prose--article blockquote { margin: 28px 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--s-accent); font-family: var(--s-font-display); font-size: 22px; color: var(--s-ink); }

/* ── Search and content pages (search_results, faq, contact_us, about_us, facilities, legal, page, 404) ── */
.s-card-link img { height: auto; }

/* ── Profiles and the gift claim (user_profile, partner_profile, gift_redeem) ── */

.s-profile { padding-top: 40px; padding-bottom: 72px; display: flex; flex-direction: column; gap: 32px; }
.s-profile__head { display: flex; gap: 28px; align-items: center; }
.s-profile__avatar { width: 140px; height: 140px; flex-shrink: 0; border-radius: 999px; object-fit: cover; background: var(--s-tint-3); }
.s-profile__who { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.s-profile__stats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; color: var(--s-muted); }
.s-profile__stats strong { color: var(--s-ink); font-size: 18px; }
.s-profile__section { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 575.98px) { .s-profile__head { flex-direction: column; align-items: flex-start; } .s-profile__avatar { width: 112px; height: 112px; } }
.s-date--pick { position: relative; cursor: pointer; }
.s-date--pick input { position: absolute; opacity: 0; pointer-events: none; }
.s-date--pick:has(input:checked) { background: var(--s-accent); border-color: var(--s-accent); color: var(--s-on-accent); }
.s-date--pick:has(input:focus-visible) { outline: 3px solid var(--s-focus); outline-offset: 2px; }

/* ── Gallery and contests (gallery, contests_home, contests, contest_page, contest_results) ── */

.s-gallery { padding-top: 32px; padding-bottom: 72px; display: flex; flex-direction: column; gap: 24px; }
.s-gallery__head { display: flex; flex-direction: column; gap: 14px; }
.s-gallery__head .s-lead { margin: 0; }
.s-gallery__cats { display: flex; flex-wrap: wrap; gap: 6px; }
.s-site .s-gallery__cats a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; background: var(--s-band); color: var(--s-muted); font-size: 13px; font-weight: 600; text-decoration: none; }
.s-site .s-gallery__cats a[aria-current="page"] { background: var(--s-ink); color: var(--s-bg); }
/* A photo grid runs nearly edge to edge: the photographs are the page. */
.s-gallery__grid { padding: 0 max(8px, calc(var(--s-gutter) / 2)); }
.s-contest-stats p { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.s-contest-stats .s-display { font-size: clamp(34px, 4vw, 52px); color: var(--s-on-accent); }
.s-contest-stats span { color: var(--s-on-accent-muted); font-weight: 600; }
.s-section-head--stack { flex-direction: column; align-items: flex-start; gap: 8px; }
.s-section-head--stack p { margin: 0; }

/* ── Photo page and feed (photo.php, feed.php) ────────────────────────────── */
@keyframes s-photo-loader-in { to { opacity: 1; } }

/* ── Upload and My gallery (upload.php, my_gallery.php) ───────────────────── */

/* The photo viewer (_photo_viewer.php): photo.php's own markup, full screen over the listing. */
.s-viewer .modal-content { background: var(--s-bg); border: 0; border-radius: 0; }
.s-viewer__loading { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--s-viewer-bg); color: var(--s-viewer-ink); }
@media (min-width: 768px) { .s-viewer__loading { padding-top: 40px; } }
@media (max-width: 767.98px) { .s-viewer__loading { min-height: calc(64px + 100vw * 2 / 3 + 16px); padding: 64px 0 16px; } }

/* ── The jury (jury_contests.php, jury_deliberation.php) ─────────────────── */
.s-site .s-blog__cats button { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--s-line); border-radius: 999px; background: var(--s-surface); color: var(--s-ink); font-size: 14px; font-weight: 600; }
.s-site .s-blog__cats button:hover { border-color: var(--s-accent); color: var(--s-accent); }
.s-site .s-blog__cats button[aria-pressed="true"] { background: var(--s-accent); border-color: var(--s-accent); color: var(--s-on-accent); }

/* ── The administrator's second step (two_factor, two_factor_setup, two_factor_recovery) ── */
.s-preview__player { background: var(--s-viewer-bg); }
.s-preview__player video { object-fit: contain; background: var(--s-viewer-bg); }
.s-preview__message { margin: 0; padding: 48px 24px; display: flex; justify-content: center; text-align: center; }

/* ── The notification bell (navbar.php, _notifications.php) ───────────────── */

.s-notif .s-icon-btn { position: relative; }
.s-site .s-notif__menu { width: min(380px, calc(100vw - 24px)); padding: 0; overflow: hidden; }
.s-notif__scroll { max-height: min(460px, 70vh); overflow-y: auto; overscroll-behavior: contain; padding: 8px; }
.s-notif__loading { display: flex; justify-content: center; padding: 24px; color: var(--s-muted); }
.s-notif__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 10px; }
.s-notif__title { margin: 0; font-weight: 700; font-size: 16px; color: var(--s-ink); }
.s-site .s-notif__all { padding: 0; font-size: 14px; }
.s-notif__empty { margin: 0; padding: 28px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--s-muted); font-size: 14px; text-align: center; }
.s-notif__empty .bi { font-size: 26px; }
.s-notif__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.s-site .s-notif__item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 8px; border-radius: var(--s-radius-sm); color: var(--s-ink); text-decoration: none; }
.s-site .s-notif__item:hover { background: var(--s-band); color: var(--s-ink); }
.s-notif__item.is-unread { background: var(--s-accent-soft); }
.s-site .s-notif__item.is-unread:hover { background: var(--s-tint-1); }
.s-notif__icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--s-band); color: var(--s-muted); font-size: 17px; }
.s-notif__item.is-unread .s-notif__icon { background: var(--s-accent); color: var(--s-on-accent); }
.s-notif__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.35; }
.s-notif__text strong { font-weight: 600; }
.s-notif__item:not(.is-unread) .s-notif__text strong { font-weight: 500; }
.s-notif__body { color: var(--s-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.s-notif__when { color: var(--s-faint); font-size: 12px; }
.s-notif__dot { flex-shrink: 0; align-self: center; width: 8px; height: 8px; border-radius: 999px; background: var(--s-accent); }

/* ── The closing band: a dark, lit invitation that ends a school's home and a showcase
   programme page (blocks/closing_band.php, program_page.php) ─────────────── */
.s-closing--band { --s-accent-paint: var(--s-accent-paint-on-deep); }
.s-closing--band { background: var(--s-deep); color: var(--s-on-deep); text-align: left; position: relative; overflow: hidden; margin: 120px var(--s-gutter) 0; padding: 96px 0 !important; border-radius: 36px; }
.s-closing--band .s-container { flex-direction: row; justify-content: space-between; align-items: center; gap: 48px; position: relative; padding: 0 56px; }
.s-closing--band .s-closing__copy { align-items: flex-start; gap: 14px; max-width: 760px; }
.s-site .s-closing--band h2 { color: var(--s-on-deep); font-size: clamp(34px, 4.4vw, 64px); line-height: 1; letter-spacing: -0.045em; font-weight: 800; }
.s-closing--band .s-lead { color: var(--s-on-deep-muted); }
.s-closing--band .s-btn-row { flex-shrink: 0; justify-content: flex-start; flex-direction: column; align-items: stretch; }
.s-closing__light { position: absolute; border-radius: 50%; pointer-events: none; }
.s-closing__light--1 { width: 800px; height: 800px; right: -160px; top: -300px; background: radial-gradient(circle, var(--s-accent-2), transparent 62%); filter: blur(30px); animation: s-drift-1 14s ease-in-out infinite alternate; }
.s-closing__light--2 { width: 600px; height: 600px; left: -120px; bottom: -360px; background: radial-gradient(circle, var(--s-highlight), transparent 60%); filter: blur(40px); opacity: .7; animation: s-drift-2 18s ease-in-out infinite alternate; }
@media (max-width: 991.98px) {
    .s-closing--band .s-container { flex-direction: column; align-items: flex-start; gap: 24px; }
}
@media (max-width: 767.98px) {
    .s-closing--band { padding: 44px 0 !important; border-radius: 28px; margin-top: 56px; }
    .s-closing--band .s-container { padding: 0 24px; }
}
@keyframes s-drift-1 { to { transform: translate(120px, -80px) scale(1.15); } }
@keyframes s-drift-2 { to { transform: translate(-140px, -60px) scale(.9); } }
@media (prefers-reduced-motion: reduce) {
    .s-closing__light { animation: none !important; }
}

/* ── Motion: appearing as the page scrolls (edukall-site-motion.js adds .ek-motion) ──
   [data-reveal] always rises; [data-reveal="skin"] only where the skin's own layer says so. */

.ek-motion [data-reveal]:not([data-reveal="skin"]) { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); }
.ek-motion [data-reveal].is-in { opacity: 1; transform: none; }
/* Siblings that arrive together follow one another by a beat. */
.ek-motion [data-reveal]:nth-child(2) { transition-delay: 70ms; }
.ek-motion [data-reveal]:nth-child(3) { transition-delay: 140ms; }
.ek-motion [data-reveal]:nth-child(4) { transition-delay: 210ms; }
.ek-motion [data-reveal]:nth-child(n+5) { transition-delay: 280ms; }

@media (prefers-reduced-motion: reduce) {
    .ek-motion [data-reveal] { opacity: 1; transform: none; transition: none; }
    .s-live::before, .s-utility__notice::before { animation: none !important; }
}

/* A phone pays for every blurred or endlessly moving layer on each frame of a scroll: there the
   photos stand still, the lights keep their soft gradient without a blur filter, and glass is
   a plain tint. What moves on purpose (the student work rows) keeps moving. */
@media (max-width: 767.98px) {
    .s-closing__light { animation: none; }
    .s-closing__light { filter: none; }
    .s-site .s-btn--glass { -webkit-backdrop-filter: none; backdrop-filter: none; }
    body.s-site { --s-buybar-blur: none; --s-buybar-bg: color-mix(in srgb, var(--s-surface) 97%, transparent); }
}

/* iOS zooms the page into any field whose text is under 16px when it takes the focus, and does
   not zoom back out. On a touch screen every field of the site — forms, the coupon, the jury's
   notes, the advisor and the search — sets its text at 16px at least; a larger one keeps its
   size. Important, because several fields set a smaller size on purpose for a mouse. */
@media (hover: none) and (pointer: coarse) {
    body.s-site :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="submit"], [type="button"]), select, textarea) { font-size: max(16px, 1em) !important; }
}