/* ==========================================================================
   The academy home template (HomeTemplates 'academy', frontend/site/home/academy.php)
   --------------------------------------------------------------------------
   Loaded only on a site whose home is the academy template, and only on its home. It styles
   the template's own blocks (frontend/site/blocks/): the cinematic cover and its next starts,
   the figures card, the area tiles, the programme cards, the students' work, the voices
   cards, the online course cards, the campus, the alliances and the closing band — and the
   header while it floats over the cover. Everything else a school wears (its accent face,
   gradients, buttons, footer) is its skin's tokens in edukall-site.css.
   ========================================================================== */

/* On the cover's dark photo and the students' dark band, an accented word runs warm. */
.s-cover, .s-work { --s-accent-paint: var(--s-accent-paint-on-deep); }
/* A skin without a paint for dark bands (edukall) sets the accented words in its marker colour:
   the action green on the dark cover was barely there. */
.s-site :is(.s-cover, .s-work) .s-accent { color: var(--s-highlight); }

.s-cover { position: relative; overflow: hidden; background: var(--s-deep-3); color: var(--s-on-deep); }
.s-cover__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: s-kenburns 22s ease-in-out infinite alternate; object-position: 35% 35%; }
.s-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--s-veil), .92) 0%, rgba(var(--s-veil), .62) 42%, rgba(var(--s-veil), .1) 75%), linear-gradient(0deg, rgba(var(--s-veil), .95) 0%, rgba(var(--s-veil), 0) 35%); z-index: 1; }
.s-cover__grid { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 56px; align-items: end; min-height: 600px; padding-top: 150px; padding-bottom: 140px; box-sizing: border-box; }
.s-cover__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; align-self: center; max-width: 700px; }
.s-site .s-cover h1 { color: var(--s-on-deep); font-size: calc(clamp(48px, 6.6vw, 96px) * var(--s-h1-scale)); line-height: .94; letter-spacing: -0.05em; font-weight: 800; }
.s-cover .s-lead { color: var(--s-on-deep-soft); max-width: 560px; font-size: 21px; }
.s-cover__panel { padding: 22px 24px 8px; border-radius: 22px; background: var(--s-glass); border: 1px solid var(--s-glass-line); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.s-cover + .s-container { margin-top: 48px; }
.s-headline { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.s-figures-wrap { margin-top: 72px; }
.s-figures { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0; border-top: 1px solid var(--s-line); padding: 34px 8px; border: 0; border-radius: 26px; background: var(--s-surface); box-shadow: var(--s-lift); }
.s-figures__item { display: flex; align-items: flex-start; gap: 0; padding: 6px 32px; border-left: 1px solid var(--s-line); flex-direction: column; }
.s-figures__item:first-child { padding-left: 32px; border-left: 0; }
.s-figures__value { margin: 0; font-size: clamp(32px, 3.2vw, 46px); line-height: 1; font-family: var(--s-font-display); font-weight: 800; letter-spacing: -0.05em; background: linear-gradient(100deg, var(--s-accent) 0%, var(--s-accent-2) 60%, var(--s-warm-1) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.s-figures__label { margin: 0; max-width: none; color: var(--s-ink); margin-top: 12px; font-weight: 600; }
/* The alliances are a strip of their own — a band with the school's corners, its name on top
   and the logos in a row — rather than a lone rule above them. */
.s-allies { display: flex; flex-direction: column; align-items: center; gap: 24px; margin-top: 128px; padding: 40px 48px; border-radius: 28px; background: var(--s-band); text-align: center; }
.s-allies .s-proof__logos { flex-grow: 0; justify-content: center; gap: 24px 56px; }
.s-intakes { align-self: stretch; }
.s-intakes__title { margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--s-muted); display: flex; justify-content: space-between; align-items: center; }
.s-intakes__list { list-style: none; margin: 0; padding: 0; }
.s-site .s-intake { display: grid; grid-template-columns: 62px minmax(0, 1fr) 20px; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--s-line); color: var(--s-ink); text-decoration: none; }
.s-intake__date { font-family: var(--s-font-display); font-weight: var(--s-display-weight); font-size: 22px; letter-spacing: var(--s-track-display); color: var(--s-accent); }
.s-intake__what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.s-intake__name { font-weight: 600; }
.s-intake__meta { font-size: 14px; color: var(--s-muted); }
.s-intake .bi { color: var(--s-muted); transition: transform .15s ease; }
.s-intake:hover .bi { transform: translateX(3px); }
.s-cover .s-intakes__title, .s-cover .s-intake__meta, .s-cover .s-intake .bi { color: var(--s-on-deep-muted); }
.s-site .s-cover .s-intake { color: var(--s-on-deep); border-top-color: var(--s-deep-line); }
.s-cover .s-intake__date { color: var(--s-highlight); }
.s-areas__intro { max-width: 520px; justify-self: end; }
.s-site .s-ccard { display: flex; flex-direction: column; gap: 10px; color: var(--s-ink); text-decoration: none; }
.s-ccard__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 20px; background: var(--s-tint-3); box-shadow: 0 24px 44px -30px color-mix(in srgb, var(--s-deep) 55%, transparent); }
.s-ccard__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.s-ccard:hover .s-ccard__media img { transform: scale(1.03); }
.s-ccard__title { font-family: var(--s-font-display); font-weight: 600; font-size: 18px; line-height: 1.25; letter-spacing: -0.01em; }
.s-ccard__price { font-weight: 700; }
.s-ccard__price del { margin-left: 6px; font-weight: 400; color: var(--s-muted); }
.s-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.s-site .s-tabs__item { padding: 11px 20px; border: 1px solid var(--s-line); border-radius: 99px; background: var(--s-surface); color: var(--s-ink); font-size: 15px; font-weight: 500; text-decoration: none; }
.s-site .s-tabs__item:hover { border-color: var(--s-ink); color: var(--s-ink); }
.s-site .s-tabs__item.is-active { background: var(--s-ink); border-color: var(--s-ink); color: var(--s-bg); font-weight: 600; }
.s-plist { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--s-line); display: flex; flex-direction: column; gap: 14px; border: 0; }
.s-site .s-plist__row { display: grid; grid-template-columns: 84px minmax(0, 1fr) 200px 180px 56px; align-items: center; gap: 28px; padding: 22px 26px; border-top: 1px solid var(--s-line); color: var(--s-ink); text-decoration: none; border: 0; border-radius: 22px; background: var(--s-surface); box-shadow: var(--s-lift-sm); transition: transform .3s ease, box-shadow .3s ease; }
.s-plist__name { font-family: var(--s-font-display); font-weight: var(--s-display-weight); font-size: 24px; line-height: 1.15; letter-spacing: -0.025em; }
.s-plist__type, .s-plist__schedule { font-size: 15px; color: var(--s-muted); }
.s-plist__start { display: flex; flex-direction: column; gap: 2px; font-size: 17px; }
.s-plist__label { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--s-muted); }
.s-plist__go { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; background: var(--s-surface); color: var(--s-accent); transition: transform .15s ease; }
.s-plist__row:hover .s-plist__go { transform: translateX(3px); }
.s-plist__foot { display: flex; justify-content: flex-end; margin-top: 24px; }
.s-campus { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 72px; align-items: center; }
.s-campus--solo { grid-template-columns: minmax(0, 760px); }
.s-campus__media { aspect-ratio: auto; max-height: none; overflow: hidden; border-radius: 30px; background: var(--s-tint-3); position: relative; height: 600px; box-shadow: 0 40px 80px -46px color-mix(in srgb, var(--s-deep) 60%, transparent); }
.s-campus__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-campus__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.s-campus__address { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; }
.s-site:has(.s-cover) .s-header { margin-bottom: calc(-1 * (var(--s-header-bar, 76px) + 1px)); background: transparent; border-bottom-color: transparent; transition: background-color .25s ease, box-shadow .25s ease; }
.s-site:has(.s-cover) .s-header:not(.is-scrolled) .s-header__logo img { filter: brightness(0) invert(1); }
.s-site:has(.s-cover) .s-header:not(.is-scrolled) .s-nav-link,
.s-site:has(.s-cover) .s-header:not(.is-scrolled) .s-icon-btn { color: var(--s-on-deep); }
.s-site:has(.s-cover) .s-header:not(.is-scrolled) .s-icon-btn { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); }
.s-site:has(.s-cover) .s-header:not(.is-scrolled) .s-avatar-btn { box-shadow: 0 0 0 1px var(--s-glass-line); }
.s-site:has(.s-cover) .s-header:not(.is-scrolled) .s-nav-link:hover { background: rgba(255, 255, 255, .12); color: var(--s-on-deep); }
.s-site:has(.s-cover) .s-header.is-scrolled { background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 10px 30px -20px color-mix(in srgb, var(--s-deep) 50%, transparent); }
.s-cover__light { position: absolute; border-radius: 50%; filter: blur(90px); mix-blend-mode: screen; z-index: 2; pointer-events: none; }
.s-cover__light--1 { width: 760px; height: 760px; left: -200px; top: 260px; opacity: .55; background: radial-gradient(circle, var(--s-accent-2) 0%, transparent 65%); animation: s-drift-1 16s ease-in-out infinite alternate; }
.s-cover__light--2 { width: 760px; height: 760px; left: 380px; top: 520px; opacity: .35; background: radial-gradient(circle, var(--s-highlight) 0%, transparent 60%); animation: s-drift-2 19s ease-in-out infinite alternate; }
.s-site .s-cover h1 .s-accent { font-size: 1.08em; letter-spacing: -0.02em; }
.s-cover__scroll { position: absolute; z-index: 3; left: 50%; bottom: 118px; width: 26px; height: 42px; margin-left: -13px; border: 2px solid rgba(255, 255, 255, .4); border-radius: 14px; }
.s-cover__scroll::after { content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--s-on-deep); animation: s-scrollcue 1.8s infinite; }
.s-datetile { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 62px; height: 62px; flex-shrink: 0; border-radius: 14px; background: var(--s-gradient); color: var(--s-on-accent); line-height: 1; box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--s-accent-2) 90%, transparent); }
.s-datetile b { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; }
.s-datetile span { margin-top: 3px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
.s-datetile--lg { width: 84px; height: 84px; border-radius: 18px; }
.s-datetile--lg b { font-size: 30px; }
.s-datetile--soon { background: var(--s-band); color: var(--s-accent); box-shadow: none; font-size: 26px; }
.s-cover .s-intakes__title { color: var(--s-on-deep-soft); }
.s-cover .s-intakes__title .s-live { color: var(--s-on-deep); font-size: 13px; }
.s-intake__meta em { font-style: normal; font-weight: 600; color: var(--s-highlight); }
.s-site .s-figures-wrap, .s-site .s-cover + .s-figures-wrap { position: relative; z-index: 4; margin-top: -96px; }
.s-figures__value sup { font-size: .5em; top: -.9em; }
.s-figures__note { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--s-muted); }
[data-ek-page="home"] main > .s-section { padding: 128px 0 0; }
/* Here a section brings its gap above it and none below, so two in a row keep the full gap:
   the shared sheet's collapse, which assumes a gap below each, left the campus glued to the
   online courses before it. */
[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: 128px; }
[data-ek-page="home"] main > .s-programs, [data-ek-page="home"] main > .s-work { margin-top: 128px; padding: 120px 0; }
[data-ek-page="home"] main > .s-programs + .s-work { margin-top: 0; }
.s-areas .s-section-head, .s-work .s-section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 64px; margin-bottom: 48px; }
/* The areas are a slider: a row of tiles that snaps a tile at a time, three to a view on a
   desktop (two or one when there are only that many), most of one on a phone with the next
   peeking in. The tiles are flat — dark on the page, they need no shadow, and a scrolling row cuts any off —
   and nothing lifts on hover. */
.s-tiles { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.s-tiles::-webkit-scrollbar { display: none; }
.s-tiles:focus-visible { outline-offset: 6px; }
/* Square from three areas up; fewer, wider tiles would be squares as tall as the screen. */
.s-site .s-tiles--2 .s-tile { flex-basis: calc((100% - 24px) / 2); aspect-ratio: 4 / 3; }
.s-site .s-tiles--1 .s-tile { flex-basis: 100%; aspect-ratio: 21 / 9; }
.s-site .s-tile { position: relative; display: flex; align-items: flex-end; aspect-ratio: 1 / 1; padding: 28px; overflow: hidden; border-radius: 26px; background: linear-gradient(160deg, var(--s-deep) 0%, var(--s-accent) 70%, var(--s-accent-2) 100%); color: var(--s-on-deep); text-decoration: none; }
.s-site .s-tiles .s-tile { flex: 0 0 calc((100% - 48px) / 3); scroll-snap-align: start; }
.s-tile__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
.s-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(var(--s-veil), .92) 0%, rgba(var(--s-veil), .2) 55%, rgba(var(--s-veil), 0) 100%); }
.s-tile--plain::after { background: radial-gradient(420px 320px at 90% 0%, color-mix(in srgb, var(--s-highlight) 35%, transparent), transparent 70%); }
.s-tile__body { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-right: 64px; }
.s-tile__pill { padding: 7px 14px; border-radius: 99px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .24); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 13px; font-weight: 600; }
.s-tile__title { margin-top: 6px; font-family: var(--s-font-display); font-weight: 700; font-size: 40px; line-height: 1; letter-spacing: -0.035em; }
.s-tile__text { font-size: 16px; line-height: 1.5; color: var(--s-on-deep-soft); max-width: 320px; }
.s-tile__go { position: absolute; z-index: 2; right: 28px; bottom: 28px; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 99px; background: var(--s-surface); color: var(--s-accent); font-size: 20px; transition: transform .4s ease, background-color .4s ease; }
.s-site .s-tile:hover { color: var(--s-on-deep); }
/* Only with a pointer that hovers: on a touch screen a hover stays stuck after the tap. */
@media (hover: hover) {
    .s-tile:hover .s-tile__image { transform: scale(1.07); }
    .s-tile:hover .s-tile__go { background: var(--s-highlight); color: var(--s-on-highlight); transform: rotate(-45deg); }
}
.s-slider__controls { display: flex; align-items: center; gap: 10px; margin-top: 24px; }
.s-slider__controls[hidden] { display: none; }
.s-slider__dots { display: flex; flex-wrap: wrap; gap: 2px; margin-right: auto; }
.s-slider__dot { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.s-slider__dot::before { content: ""; width: 8px; height: 8px; border-radius: 99px; background: var(--s-line); transition: width .25s ease, background-color .25s ease; }
.s-slider__dot[aria-current="true"] { width: 34px; }
.s-slider__dot[aria-current="true"]::before { width: 26px; background: var(--s-accent); }
.s-site .s-slider__btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--s-line); border-radius: 99px; background: var(--s-surface); color: var(--s-ink); font-size: 18px; }
.s-site .s-slider__btn:hover:not(:disabled) { border-color: var(--s-accent); color: var(--s-accent); }
.s-site .s-slider__btn:disabled { opacity: .35; cursor: default; }
.s-programs { background: radial-gradient(600px 420px at 8% 10%, color-mix(in srgb, var(--s-accent-2) 10%, transparent), transparent 70%), radial-gradient(700px 480px at 92% 90%, color-mix(in srgb, var(--s-highlight) 13%, transparent), transparent 70%), var(--s-band); }
.s-site .s-plist__row:hover { transform: translateY(-4px); box-shadow: 0 28px 50px -30px color-mix(in srgb, var(--s-accent) 55%, transparent), 0 0 0 1.5px color-mix(in srgb, var(--s-accent) 25%, transparent); }
.s-plist__main { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.s-site .s-plist__type { display: inline-block; padding: 4px 10px; border-radius: 8px; background: var(--s-accent-soft); color: var(--s-accent-soft-ink); font-size: 13px; font-weight: 600; }
.s-plist__start, .s-plist__price { display: flex; flex-direction: column; gap: 2px; font-size: 15px; color: var(--s-muted); line-height: 1.4; }
.s-plist__start strong, .s-plist__price strong { font-size: 16px; color: var(--s-ink); }
.s-site .s-plist__go { width: 56px; height: 56px; background: var(--s-gradient); color: var(--s-on-accent); box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--s-accent) 90%, transparent); }
.s-work { position: relative; overflow: hidden; background: var(--s-deep-3); color: var(--s-on-deep); }
.s-work::before { content: ""; position: absolute; left: 50%; top: -420px; width: 900px; height: 900px; margin-left: -450px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--s-accent-2) 45%, transparent), transparent 65%); filter: blur(40px); pointer-events: none; }
.s-work .s-container { position: relative; }
.s-site .s-work h2 { color: var(--s-on-deep); }
.s-work__side { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 520px; }
.s-work .s-lead { color: var(--s-on-deep-faint); }
.s-site .s-work .s-link-arrow { color: var(--s-highlight); }
.s-marquee { position: relative; margin-top: 18px; overflow: hidden; }
.s-marquee:first-of-type { margin-top: 0; }
.s-marquee__track { display: flex; gap: 18px; width: max-content; margin: 0; padding: 0; list-style: none; animation: s-marquee 60s linear infinite; }
.s-marquee--reverse .s-marquee__track { animation-direction: reverse; animation-duration: 70s; }
.s-marquee:hover .s-marquee__track, .s-marquee:focus-within .s-marquee__track, .s-work.is-paused .s-marquee__track { animation-play-state: paused; }
.s-site .s-work__pause { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--s-deep-line); border-radius: 999px; background: transparent; color: var(--s-on-deep); font-size: 14px; font-weight: 600; }
.s-site .s-work__pause:hover { background: rgba(255, 255, 255, .1); }
.s-site .s-work__item { position: relative; display: block; width: 360px; height: 260px; overflow: hidden; border-radius: 18px; color: var(--s-on-deep); }
.s-work__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s ease; }
.s-work__item:hover img { transform: scale(1.05); }
.s-work__caption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; padding: 40px 16px 14px; background: linear-gradient(0deg, rgba(0, 0, 0, .75), transparent); font-size: 14px; }
.s-work__caption strong { font-size: 15px; }
.s-work__caption span { color: var(--s-on-deep-soft); }
.s-work .s-section-head { margin-bottom: 44px; }
.s-voices--cards { background: transparent; color: var(--s-ink); }
.s-voices--cards .s-voices__grid { gap: 72px; align-items: center; }
.s-site .s-voices--cards .s-voices__lead { position: relative; gap: 30px; padding: 56px 56px 48px; border-radius: 30px; background: linear-gradient(160deg, var(--s-surface), var(--s-band)); box-shadow: var(--s-lift); }
.s-voices--cards .s-voices__mark { position: absolute; top: -28px; left: 48px; font-family: var(--s-font-accent); font-size: 120px; line-height: 1; background: var(--s-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.s-voices--cards .s-voices__lead p { font-family: var(--s-font-display); font-size: clamp(19px, 1.7vw, 25px); line-height: 1.4; letter-spacing: -0.025em; color: var(--s-ink); }
.s-voices--cards .s-quote__who { color: var(--s-ink); }
.s-voices--cards .s-voices__lead .s-avatar { width: 56px; height: 56px; border: 3px solid var(--s-surface); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .4); }
.s-voices--cards .s-voices__others { gap: 18px; justify-content: center; }
.s-voices--cards .s-voices__quote { padding: 26px; border: 0; border-radius: 22px; background: var(--s-band); }
.s-voices--cards .s-voices__quote p { color: var(--s-ink-soft); }
.s-campus__card { position: absolute; left: 28px; bottom: 28px; display: flex; align-items: center; gap: 14px; margin: 0; padding: 18px 22px; max-width: calc(100% - 56px); border-radius: 20px; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 26px 50px -24px color-mix(in srgb, var(--s-deep) 55%, transparent); font-weight: 600; }
.s-campus__pin { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex-shrink: 0; border-radius: 14px; background: var(--s-gradient); color: var(--s-on-accent); font-size: 20px; }
.s-campus__features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; align-self: stretch; }
.s-campus__features li { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 16px; background: var(--s-band); font-size: 15px; font-weight: 600; }
.s-campus__features .bi { color: var(--s-accent); font-size: 18px; }

@media (max-width: 991.98px) {
    .s-cover::after { background: linear-gradient(180deg, rgba(var(--s-veil), .25) 0%, rgba(var(--s-veil), .55) 38%, rgba(var(--s-veil), .96) 70%); }
    .s-cover__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; min-height: 0; padding-top: 220px; padding-bottom: 32px; }
    .s-site .s-cover h1 { font-size: calc(clamp(40px, 11vw, 56px) * var(--s-h1-scale)); }
    .s-cover .s-lead { font-size: 17px; }
    .s-cover__panel { padding: 18px 18px 6px; }
    .s-figures { grid-auto-flow: row; padding: 0; background: transparent; box-shadow: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .s-areas__intro { justify-self: start; }
    .s-site .s-plist__row { grid-template-columns: 60px minmax(0, 1fr) 40px; gap: 14px; padding: 14px; grid-template-areas: none; }
    .s-plist__name { font-size: 16px; grid-area: name; }
    .s-plist__type, .s-plist__schedule { display: none; }
    .s-plist__start { flex-direction: row; gap: 6px; font-size: 15px; grid-area: meta; flex-wrap: wrap; }
    .s-plist__go { grid-area: go; }
    .s-campus { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .s-campus__media { height: 360px; }
    .s-cover__light--1 { width: 420px; height: 420px; left: -140px; top: 360px; }
    .s-cover__light--2 { display: none; }
    .s-cover__scroll { display: none; }
    .s-site .s-figures-wrap, .s-site .s-cover + .s-figures-wrap { margin-top: 24px; }
    .s-figures__note { display: none; }
    .s-figures__item, .s-figures__item:first-child { padding: 18px; border: 0; border-radius: 18px; background: var(--s-band); }
    .s-areas .s-section-head, .s-work .s-section-head { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .s-site .s-tiles .s-tile, .s-site .s-tiles--2 .s-tile { aspect-ratio: 1 / 1; flex: 0 0 calc((100% - var(--s-gutter) - 12px) / 2); }
    .s-tile__title { font-size: 30px; }
    .s-tiles { gap: 12px; margin: 0 calc(-1 * var(--s-gutter)); padding: 0 var(--s-gutter); scroll-padding-inline: var(--s-gutter); }
    .s-slider__controls { margin-top: 16px; }
    .s-plist__start, .s-plist__price { display: none; }
    .s-site .s-plist__go { width: 40px; height: 40px; }
    .s-plist__row .s-datetile--lg { width: 60px; height: 60px; border-radius: 14px; }
    .s-plist__row .s-datetile--lg b { font-size: 22px; }
    .s-campus__features { grid-template-columns: minmax(0, 1fr); }
    .s-cover .s-btn-row .s-btn { flex: 1 1 100%; justify-content: center; }
    .s-plist__go, .s-plist__start, .s-plist__main { grid-area: auto; }
}

@media (max-width: 767.98px) {
    .s-figures-wrap { margin-top: 40px; }
    .s-figures__item { border-left: 0; }
    .s-figures__label { font-size: 13px; }
    .s-allies { gap: 20px; margin-top: 64px; padding: 28px 20px; border-radius: 22px; }
    .s-allies .s-proof__logos { gap: 20px 32px; }
    [data-ek-page="home"] main > .s-section,
    [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: 64px; }
    [data-ek-page="home"] main > .s-programs, [data-ek-page="home"] main > .s-work { margin-top: 64px; padding: 56px 0; }
    .s-site .s-work__item { width: 250px; height: 190px; }
    .s-site .s-voices--cards .s-voices__lead { padding: 34px 24px 26px; }
    .s-voices--cards .s-voices__mark { top: -20px; left: 24px; font-size: 90px; }
}

@keyframes s-scrollcue { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }
@keyframes s-marquee { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
    .s-cover__image, .s-cover__light, .s-marquee__track, .s-cover__scroll::after { animation: none !important; }
    .s-work__pause { display: none !important; }
}

/* On a phone: the cover's photo stands still, its two blurred lights are left out, and the glass
   of the panel and of the scrolled header is a plain tint (see edukall-site.css). */
@media (max-width: 767.98px) {
    .s-cover__image, .s-cover__scroll::after { animation: none; }
    .s-cover__light { display: none; }
    .s-cover__panel { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(var(--s-veil), .62); }
    .s-site:has(.s-cover) .s-header.is-scrolled { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, .97); }
}

/* On a phone most of one tile, the next one peeking in so the row says it moves. */
@media (max-width: 575.98px) {
    .s-site .s-tiles .s-tile, .s-site .s-tiles--2 .s-tile { flex-basis: 84%; }
    .s-site .s-tiles--1 .s-tile { flex-basis: 100%; }
}