/*
| The public website's stylesheet — the only one. Edited directly, no build step.
|
| Rules of this file:
|   - One file for both languages: logical properties only (inline-start / inline-end), never left / right.
|   - Colors come from the tokens below. --primary and --secondary are the brand colors set on
|     Settings → Branding (printed by layouts/partials/head.blade.php); never type a brand color here.
|   - No <style> blocks and no style="" in the views: a new look gets a class in this file. The one exception is a
|     picture chosen on the dashboard, handed to its rule as a custom property (--banner, --hero, --photo).
|
| Contents:
|   1. Tokens and base
|   2. Shared pieces (sections, titles, text, links, outlined card, button, form)
|   3. Header and phone menu
|   4. Footer
|   5. Home page
|   6. About page
|   7. Programs pages
|   8. Scholarships page
|   9. Blog
|  10. Contact page
|  11. Application form
|  12. Motion (everything that moves by itself: page entrance, scroll reveal, the steps' line)
|  13. Sections only the dashboard adds (call to act, video, gallery, partners, team, map)
|  14. The page editor's preview (html[data-preview], drawn inside the dashboard)
*/

/* ---------------------------------------------------------------- 1. Tokens and base */

/*
| The fonts are the old website's own files, declared exactly as it declared them, so the letters
| look the same: one face for headings and paragraphs, one (the same file, marked bold) for
| everything else — menu, buttons, labels. These are fixed for the website; the fonts on
| Settings → Branding are the dashboard's.
*/
@font-face {
    font-family: 'bahnschrift-regular';
    src: url('../fonts/bahnschrift.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'bahnschrift-SemiBold';
    font-weight: bold;
    src: url('../fonts/bahnschrift.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'NotoSansArabic';
    src: url('../fonts/noto-sans-arabic.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'NotoSansArabic-bold';
    font-weight: bold;
    src: url('../fonts/noto-sans-arabic.ttf') format('truetype');
    font-display: swap;
}

.site {
    --site-ink: #001e43;                 /* headings, menu */
    --site-text: #555;                   /* paragraphs */
    --site-tint: #f6f6f6;                /* grey bands, footer */
    --site-header-height: 112px;
    --site-dir: 1;                       /* 1 or -1: turns a sideways movement around in Arabic */

    --site-font-text: 'bahnschrift-regular', serif;     /* headings and paragraphs */
    --site-font-ui: 'bahnschrift-SemiBold', serif;      /* everything else */

    margin: 0;
    font-family: var(--site-font-ui);
    color: var(--site-text);
    background: #fff;
    overflow-x: hidden;
}

/* Arabic: the whole Arabic site, and an Arabic block inside the English one (the testimonials). */
.site:lang(ar),
.site [lang="ar"] {
    --site-font-text: 'NotoSansArabic', serif;
    --site-font-ui: 'NotoSansArabic-bold', serif;
}

.site [lang="ar"] {
    font-family: var(--site-font-ui);
}

[dir="rtl"] .site {
    --site-dir: -1;
}

.site h1,
.site h2,
.site h3,
.site p {
    font-family: var(--site-font-text);
}

/* A link to a section stops under the header, not behind it: 84px is the bar's height. On a computer the
   bar is 112px until the page is scrolled and the page moves up by the difference as it shrinks, so the
   stop is taken from the taller one. (Plain numbers: --site-header-height lives on <body>, out of <html>'s reach.) */
html:has(.site) {
    scroll-behavior: smooth;
    scroll-padding-top: 84px;
}

@media (min-width: 1200px) {
    html:has(.site) {
        scroll-padding-top: 112px;
    }
}

.site img,
.site video {
    max-width: 100%;
    height: auto;
}

.site a {
    text-decoration: none;
}

/* A short page (an error, an empty blog) still reaches the bottom of the window: the footer stays down. */
.site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site > main {
    flex: 1;
}

/* ---------------------------------------------------------------- 2. Shared pieces */

/* The header's and the hero's width: wider than .container, as on the old website. */
.site-wide {
    width: 100%;
    max-width: 1680px;
    margin-inline: auto;
    padding-inline: 30px;
}

.site-section {
    padding-block: 75px;
}

.site-section-tint {
    background: var(--site-tint);
}

/* Photo band at the top of an inner page. Its photo is --banner (the banner section's picture, or
   .site-banner-{page} for the pages made in code); the photo is mirrored in Arabic so the title always
   sits on its teal side. */
.site-banner {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 300px;
    aspect-ratio: 1920 / 800;
    max-height: 70vh;
    width: 100%;
    overflow: hidden;                   /* the photo drifts inside the band (section 12) */
}

.site-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--banner, linear-gradient(135deg, var(--site-ink), var(--primary))) center / cover no-repeat;
}

[dir="rtl"] .site-banner::before {
    transform: scaleX(-1);
}

/* The title keeps to the photo's teal half: a long one wraps instead of running over the picture. */
.site-banner h1 {
    position: relative;
    max-width: 45%;
    margin: 0;
    color: #fff;
    font-size: 56px;
    font-weight: 800;
    line-height: 1.3;
}

/* A second, smaller line under the title (the application form's university year). */
.site-banner-sub {
    position: relative;
    max-width: 45%;
    margin: .5rem 0 0;
    color: #fff;
    font-size: clamp(1.1rem, 2.2vw, 2rem);
    font-weight: 700;
}

.site-banner-scholarships { --banner: url('../site/img/scholarships/banner.jpg'); }
.site-banner-blog { --banner: url('../site/img/programs/banner-education.jpg'); }

/* A plain photo (not one of the website's own, which carry their teal half): the brand color is laid over
   the title's side instead, and the photo is not mirrored. */
.site-banner-tint::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, color-mix(in srgb, var(--primary) 92%, transparent) 0%, color-mix(in srgb, var(--primary) 70%, transparent) 40%, transparent 75%);
}

[dir="rtl"] .site-banner-tint::after {
    background: linear-gradient(to left, color-mix(in srgb, var(--primary) 92%, transparent) 0%, color-mix(in srgb, var(--primary) 70%, transparent) 40%, transparent 75%);
}

[dir="rtl"] .site-banner-tint::before {
    transform: none;
}

.site-banner-tint .site-wide {
    position: relative;
    z-index: 1;
}

/* A long text beside the yellow line (the founder's story, the programs' introduction). */
.site-story {
    padding-block: 1.5rem;
    padding-inline-start: 2.5rem;
}

.site-story p:last-child {
    margin-bottom: 0;
}

/* The foundation's mark, faint, behind a block of text. */
.site-watermark {
    background: url('../site/img/logo-watermark.png') center / cover no-repeat;
}

/* The yellow line along the start edge of a block. */
.site-accent {
    border-inline-start: 6px solid var(--secondary);
}

.site-title {
    margin: 0 0 1.5rem;
    color: var(--site-ink);
    font-size: 42px;
    font-weight: 800;
    line-height: 1.3;
}

.site-title-lg {
    font-size: 48px;
}

.site-title-xl {
    font-size: 80px;
}

.site-text,
.site-text p {
    font-size: 20px;
    line-height: 1.8;
}

/* Arabic paragraphs are squared off on both edges, as on the old website. English ones are not:
   its longer words left wide gaps between them. */
[dir="rtl"] .site-text,
[dir="rtl"] .site-text p {
    text-align: justify;
}

.site-link-more {
    display: inline-block;
    margin-top: 1rem;
    color: var(--primary);
    font-weight: 600;
}

.site-link-more::after {
    content: '→';
    display: inline-block;
    margin-inline-start: .35em;
    transition: translate .3s ease;
}

[dir="rtl"] .site-link-more::after {
    content: '←';
}

.site-link-more:hover::after,
a:hover > * > .site-link-more::after {
    translate: calc(var(--site-dir) * 5px) 0;
}

.site-link-more:hover {
    color: var(--site-ink);
}

/* A bordered card whose icon sits on the top border, covering a piece of it. */
.site-outline-card {
    position: relative;
    height: 100%;
    padding: 50px 40px 40px;
    border: 4px solid var(--primary);
    border-radius: 20px;
}

.site-outline-card img {
    position: absolute;
    inset-block-start: -48px;
    inset-inline-end: 36px;
    width: 92px;
    height: 80px;
    padding-inline: 6px;
    background: #fff;
}

.site-outline-card h2 {
    margin: 0 0 1rem;
    color: var(--primary);
    font-size: 25px;
    font-weight: 800;
}

.site-outline-card p,
.site-outline-card li {
    margin: 0;
    font-family: var(--site-font-text);
    font-size: 18px;
    line-height: 1.8;
}

.site-outline-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-outline-card li {
    margin-bottom: .75rem;
}

/* The website's button: the second brand color, the first one under the pointer. */
.site-button {
    display: inline-flex;
    align-items: center;
    gap: .9rem;
    padding: 15px 33px;
    background: var(--secondary);
    color: var(--site-ink);
    font-size: 16px;
    font-weight: 700;
    transition: background-color .3s ease, color .3s ease;
}

.site-button:hover {
    background: var(--primary);
    color: #fff;
}

/* Its arrow steps forward under the pointer (translate, so the mirrored arrow of Arabic keeps its transform). */
.site-button i {
    transition: translate .3s ease;
}

.site-button:hover i {
    translate: calc(var(--site-dir) * 5px) 0;
}

/* The website's form: a label over each field. */
.site-form label,
.site-form .apply-cell {
    display: block;
    margin-bottom: .4rem;
    color: var(--site-ink);
    font-size: 15px;
    font-weight: 700;
}

.site-form label small {
    color: var(--site-text);
    font-weight: 400;
}

.site-form input:not([type="checkbox"]):not([type="file"]),
.site-form select,
.site-form textarea {
    display: block;
    width: 100%;
    padding: 14px 18px;
    border: 1.5px solid #dfe3e8;
    border-radius: 10px;
    background: #fff;
    color: var(--site-ink);
    font-family: var(--site-font-text);
    font-size: 17px;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.site-form textarea {
    resize: vertical;
}

.site-form input:focus,
.site-form select:focus,
.site-form textarea:focus {
    border-color: var(--primary);
    outline: 0;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent);
}

.site-form input.is-invalid:not([type="checkbox"]):not([type="file"]),
.site-form select.is-invalid,
.site-form textarea.is-invalid {
    border-color: #c62828;
}

.site-form-error {
    margin: .35rem 0 0;
    color: #c62828;
    font-size: 14px;
}

/* A value that is always written left to right (a phone, an email) keeps to the form's own edge. */
.site-form .ltr-value {
    direction: ltr;
    text-align: start;
}

[dir="rtl"] .site-form .ltr-value {
    text-align: right;
}

.site-form .site-button {
    margin-top: 1.5rem;
    border: 0;
}

/* The field only robots fill in: out of sight, out of the tab order. */
.site-form-trap {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

/* The answer to a sent form. */
.site-notice {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    font-size: 17px;
    font-weight: 600;
}

.site-notice-ok {
    background: color-mix(in srgb, var(--primary) 12%, #fff);
    color: color-mix(in srgb, var(--primary) 70%, #000);
}

.site-notice-error {
    background: #fdecea;
    color: #a31515;
}

/* An icon that points along the reading direction. */
[dir="rtl"] .site-flip {
    transform: scaleX(-1);
}

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

/* An error page (404, 403…) in the website's look. It fills what the header and footer leave of the window
   and no more, so the page does not scroll: <main> is stretched by the body, and the message sits in its middle. */
.site > main:has(> .site-error) {
    display: grid;
}

.site-error {
    display: grid;
    place-items: center;
    padding-block: 2rem;
    text-align: center;
}

.site-error-code {
    margin: 0;
    color: var(--primary);
    font-size: 120px;
    font-weight: 800;
    line-height: 1;
}

.site-error .site-title {
    margin: 1rem 0 .5rem;
}

.site-error .site-text {
    max-width: 520px;
    margin: 0 auto 2rem;
    text-align: center;
}

/* The same page without the header and footer (500, 503): the logo alone above the message. */
.site-error-plain {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding-top: 2.5rem;
}

.site-error-plain main {
    display: grid;
    flex: 1;
    place-items: center;
    width: 100%;
}

@media (max-width: 767.98px) {
    .site-error-code {
        font-size: 84px;
    }
}

/* ---------------------------------------------------------------- 3. Header and phone menu */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: #fff;
    transition: box-shadow .3s ease;
}

.site-header.scrolled {
    box-shadow: 0 2px 18px rgba(0, 30, 67, .1);
}

.site-header-bar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: var(--site-header-height);
    transition: min-height .3s ease;
}

.site-logo {
    margin-inline: 1rem;
}

.site-logo img {
    display: block;
    width: 200px;
    transition: width .3s ease;
}

/* The bar is lower once the page is scrolled (a computer only: a phone's is already that low). */
@media (min-width: 1200px) {
    .site-header.scrolled .site-header-bar {
        min-height: 84px;
    }

    .site-header.scrolled .site-logo img {
        width: 170px;
    }
}

.site-nav {
    display: flex;
    flex: 1;
    align-items: center;
}

.site-menu {
    display: flex;
    align-items: center;
    gap: 2.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-menu-side {
    margin-inline-start: auto;
}

.site-menu-item {
    position: relative;
}

.site-menu-link {
    position: relative;
    display: block;
    padding-block: 1rem;
    color: var(--site-ink);
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    transition: color .2s ease;
}

.site-menu-link:hover,
.site-menu-link.active {
    color: var(--secondary);
}

/* A line drawn under the link from its first letter to its last (not under the little arrow). */
.site-menu-link::before {
    content: '';
    position: absolute;
    inset-block-end: .6rem;
    inset-inline-start: 0;
    width: 0;
    height: 2px;
    background: var(--secondary);
    transition: width .3s ease;
}

.site-menu-link:hover::before,
.site-menu-link.active::before {
    width: var(--site-menu-line, 100%);
}

.has-children > .site-menu-link {
    --site-menu-line: calc(100% - 10px - .6rem);
}

.has-children > .site-menu-link::after {
    content: '';
    display: inline-block;
    margin-inline-start: .6rem;
    border: 5px solid transparent;
    border-top-color: #aab2bd;
    border-bottom-width: 0;
    vertical-align: middle;
}

.site-submenu {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
    min-width: 250px;
    margin: 0;
    padding: .5rem 0;
    list-style: none;
    background: #fff;
    border-top: 3px solid var(--primary);
    box-shadow: 0 12px 30px rgba(0, 30, 67, .12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.has-children:hover > .site-submenu,
.has-children:focus-within > .site-submenu {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.site-submenu a {
    display: block;
    padding: .6rem 1.25rem;
    color: var(--site-ink);
    font-size: 16px;
    font-weight: 600;
}

.site-submenu a:hover,
.site-submenu a.active {
    color: var(--primary);
}

/* Language switch: a pill with a globe and the other language's name. */
.site-lang {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem 1rem;
    border: 1.5px solid color-mix(in srgb, var(--site-ink) 25%, transparent);
    border-radius: 999px;
    color: var(--site-ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.site-lang i {
    color: var(--primary);
    transition: color .2s ease;
}

.site-lang:hover {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

.site-lang:hover i {
    color: #fff;
}

.site-drawer-lang {
    padding-top: 1.25rem;
}

.site-burger {
    display: none;
    flex-direction: column;
    gap: 6px;
    margin-inline-start: auto;
    padding: .5rem;
    border: 0;
    background: none;
}

.site-burger span {
    display: block;
    width: 28px;
    height: 3px;
    border-radius: 2px;
    background: var(--site-ink);
}

.site-drawer {
    --bs-offcanvas-width: min(320px, 86vw);
}

.site-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e9ecef;
}

.site-drawer-close {
    border: 0;
    background: none;
    color: var(--site-ink);
    font-size: 1.5rem;
    line-height: 1;
}

.site-drawer-menu,
.site-drawer-sub {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-drawer-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: .9rem 0;
    border: 0;
    border-bottom: 1px solid #eef0f3;
    background: none;
    color: var(--site-ink);
    font-size: 16px;
    font-weight: 700;
    text-align: start;
}

.site-drawer-link.active,
.site-drawer-link:hover {
    color: var(--primary);
}

.site-drawer-link i {
    font-size: .75rem;
    transition: transform .2s ease;
}

.site-drawer-link:not(.collapsed) i {
    transform: rotate(180deg);
}

.site-drawer-sub a {
    display: block;
    padding: .65rem 1rem;
    color: var(--site-text);
    font-weight: 600;
}

.site-drawer-sub a.active,
.site-drawer-sub a:hover {
    color: var(--primary);
}

@media (max-width: 1399.98px) {
    .site-menu {
        gap: 1.5rem;
    }

    .site-menu-link {
        font-size: 15px;
    }
}

@media (max-width: 1199.98px) {
    .site {
        --site-header-height: 84px;
    }

    .site-wide {
        padding-inline: 16px;
    }

    .site-nav {
        display: none;
    }

    .site-burger {
        display: flex;
    }

    .site-logo img {
        width: 170px;
    }
}

/* ---------------------------------------------------------------- 4. Footer */

.site-footer {
    padding-block: 25px;
    background: var(--site-tint);
}

.site-footer-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.site-footer img {
    width: 200px;
    mix-blend-mode: multiply;           /* the logo file has a white background */
}

.site-footer p {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
}

.site-footer strong {
    color: var(--primary);
}

/* Back to the top: a round button in the corner, there once the page is scrolled well down (.shown, from site.js). */
.site-top {
    position: fixed;
    inset-block-end: 24px;
    inset-inline-end: 24px;
    z-index: 1020;
    width: 48px;
    height: 48px;
    border: 2px solid #fff;             /* it stays clear over the colored bands too */
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 8px 22px rgba(0, 30, 67, .25);
    color: #fff;
    font-size: 18px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .3s ease, transform .3s ease, visibility .3s, background-color .25s ease, color .25s ease;
}

.site-top.shown {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.site-top:hover {
    background: var(--secondary);
    color: var(--site-ink);
}

.site-top:focus-visible {
    outline: 3px solid var(--secondary);
    outline-offset: 3px;
}

@media (max-width: 767.98px) {
    .site-top {
        inset-block-end: 16px;
        inset-inline-end: 16px;
        width: 42px;
        height: 42px;
        font-size: 16px;
    }
}

/* ---------------------------------------------------------------- 5. Home page */

/* Hero */
.home-hero {
    display: flex;
    align-items: center;
    min-height: 82vh;
    position: relative;
    padding-block: 3rem;
    overflow: hidden;                   /* the photo grows and drifts inside (section 12) */
}

/* The photo is its own layer so Arabic can mirror it: the text always sits on its teal side. */
.home-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--hero) center / cover no-repeat;
}

[dir="rtl"] .home-hero::before {
    transform: scaleX(-1);
}

.home-hero-text {
    position: relative;
    padding-bottom: 60px;               /* the words sit a little above the middle of the photo */
}

.home-hero h1 {
    margin: 0 0 1rem;
    max-width: 835px;
    color: #fff;
    font-size: 60px;
    font-weight: 800;
    line-height: 1.2;
}

.home-hero p {
    max-width: 630px;
    margin: 0;
    color: #fff;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.2;
}

/* A little mouse at the foot of the photo; its wheel keeps turning (section 12). It leads to the first section. */
.home-hero-scroll {
    position: absolute;
    inset-block-end: 28px;
    inset-inline-start: 50%;
    display: flex;
    justify-content: center;
    width: 30px;
    height: 48px;
    margin-inline-start: -15px;
    padding-top: 9px;
    border: 2px solid #fff;
    border-radius: 16px;
    opacity: .85;
    transition: opacity .25s ease, background-color .25s ease;
}

.home-hero-scroll:hover {
    background: rgba(255, 255, 255, .18);
    opacity: 1;
}

.home-hero-scroll:focus-visible {
    outline: 3px solid var(--secondary);
    outline-offset: 4px;
}

.home-hero-scroll span {
    width: 4px;
    height: 9px;
    border-radius: 2px;
    background: #fff;
}

/* Who we are */
.home-who {
    padding-block: 1rem;
    padding-inline-start: 2.5rem;       /* air between the yellow line and the words */
}

.home-who .site-title {
    margin: 0;
}

.home-stats {
    margin-top: 3rem;
}

.home-stat {
    padding: 1.5rem 1rem;
    text-align: center;
}

.home-stat img {
    width: 110px;
    height: 110px;
}

.home-stat-number {
    margin-block: 1.5rem 1rem;
    color: var(--primary);
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
}

.home-stat p {
    max-width: 230px;
    margin: 0 auto;
    color: #333;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.8;
}

/* Message from the founder */
.home-quote {
    margin: 0;
}

.home-quote p {
    margin-bottom: 1rem;
}

.home-quote p:last-child {
    margin-bottom: 0;
}

.home-quote-mark {
    margin-inline: .6rem;
    color: var(--primary);
    font-size: 20px;
}

[dir="rtl"] .home-quote-mark {
    transform: scaleX(-1);
}

.home-founder {
    text-align: center;
}

.home-founder img {
    width: 80%;
    max-width: 320px;
}

/* Our programs */
.home-programs-head {
    max-width: 820px;
    margin-bottom: 2.5rem;
}

.home-programs-head .site-title {
    margin-bottom: 1rem;
}

.home-programs {
    display: flex;
    gap: 12px;
    height: 460px;
}

.home-program {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 0;
    padding: 28px;
    overflow: hidden;
    border-radius: 14px;
    background: var(--site-ink) center / cover no-repeat;
    color: #fff;
    cursor: pointer;
    transition: flex-grow .5s ease;
}

/* The panel's photo is the program's own (--photo, chosen on the dashboard). */
.home-program,
.program-other {
    background-image: var(--photo, none);
}

/* The photo again, as a layer of its own, so it can grow slowly inside the open panel without the panel growing. */
.home-program::before {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    transition: scale 1.2s ease;
}

.home-program.active::before {
    scale: 1.12;
    transition-duration: 7s;
    transition-timing-function: ease-out;
}

/* Over the photo: a shade that darkens it under the name, and the brand color, which is no taller than
   nothing until the panel opens and then rises from the ground to cover it. */
.home-program::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, color-mix(in srgb, var(--primary) 92%, #000) 25%, color-mix(in srgb, var(--primary) 35%, transparent)) bottom / 100% 0% no-repeat,
        linear-gradient(to top, rgba(0, 30, 67, .9), rgba(0, 30, 67, .15) 65%);
    transition: background-size .7s cubic-bezier(.2, .7, .2, 1);
}

.home-program.active {
    flex-grow: 4.5;
    cursor: default;
}

.home-program.active::after {
    background-size: 100% 100%, auto;
}

.home-program:focus-visible {
    outline: 3px solid var(--secondary);
    outline-offset: 3px;
}

.home-program h3,
.home-program-more {
    position: relative;
    z-index: 1;                         /* above the two layers */
}

.home-program h3 {
    margin: 0;
    padding-inline-start: 14px;
    border-inline-start: 4px solid var(--secondary);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    transition: font-size .4s ease;
}

.home-program.active h3 {
    font-size: 28px;
}

/* The summary: folded away (0 rows) until its panel opens. */
.home-program-more {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .5s ease, opacity .3s ease;
}

.home-program-more > * {
    min-height: 0;
    overflow: hidden;
}

.home-program.active .home-program-more {
    grid-template-rows: 1fr auto;
    opacity: 1;
    transition-delay: 0s, .25s;
}

.home-program-more p {
    margin: 0;
    padding-top: 1rem;
    font-size: 16px;
    line-height: 1.8;
}

/* As the panel opens its summary is uncovered from its first line down, and the link comes up after it. */
.home-program-more p {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0s .3s;
}

.home-program.active .home-program-more p {
    clip-path: inset(0);
    transition: clip-path .9s ease .3s;
}

.home-program-more .site-link-more {
    opacity: 0;
    transform: translateY(12px);
}

.home-program.active .home-program-more .site-link-more {
    opacity: 1;
    transform: none;
    transition: opacity .4s ease .8s, transform .4s ease .8s, color .2s ease;
}

.home-program-more .site-link-more {
    justify-self: start;
    color: var(--secondary);
}

.home-program-more .site-link-more:hover {
    color: #fff;
}

/* Testimonials */
.home-testimonials {
    padding-block: 80px;
    background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 65%, var(--site-ink)));
    color: #fff;
}

.home-testimonials-title {
    margin: 0 0 2.5rem;
    font-size: 42px;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
}

.home-testimonials-title::after {
    content: '';
    display: block;
    width: 70px;
    height: 5px;
    margin: 1rem auto 0;
    background: var(--secondary);
}

/* Every slide sits in the same grid cell, so the band is as tall as the longest one and never jumps. */
.home-slides {
    display: grid;
    max-width: 980px;
    margin-inline: auto;
}

.home-slide {
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    opacity: 0;
    visibility: hidden;
    text-align: center;
    transition: opacity .6s ease, visibility .6s;
}

.home-slide.active {
    opacity: 1;
    visibility: visible;
}

.home-slide.has-video {
    text-align: start;
}

.home-slide video {
    flex: 0 0 42%;
    width: 42%;
    border-radius: 14px;
    aspect-ratio: 16 / 10;
    background: #000;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .25);
}

.home-slide-mark {
    margin-bottom: 1.25rem;
    color: var(--secondary);
    font-size: 42px;
}

.home-slide p {
    margin: 0 0 1.5rem;
    font-size: 22px;
    line-height: 2;
}

.home-slide.has-video p {
    font-size: 18px;
}

.home-slide strong {
    display: block;
    font-size: 19px;
}

.home-slide span {
    opacity: .85;
}

.home-slider-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 2.5rem;
}

.home-slider-arrow {
    width: 46px;
    height: 46px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: none;
    color: #fff;
    transition: background-color .2s ease, color .2s ease;
}

.home-slider-arrow:hover {
    background: #fff;
    color: var(--primary);
}

.home-slider-dots {
    display: flex;
    gap: .5rem;
}

.home-slider-dots button {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, .45);
    transition: width .3s ease, background-color .3s ease;
}

.home-slider-dots button.active {
    width: 30px;
    background: var(--secondary);
}

@media (max-width: 991.98px) {
    .site-title-xl {
        font-size: 56px;
    }

    .home-who .site-title {
        margin-bottom: 1.5rem;
    }

    .home-founder {
        margin-top: 2.5rem;
    }

    /* Programs stack: a closed one is a strip with its name, the open one shows its summary. */
    .home-programs {
        flex-direction: column;
        height: auto;
    }

    .home-program {
        flex: none;
        min-height: 76px;
        padding: 22px;
    }

    .home-program.active h3 {
        font-size: 22px;
    }

    .home-program.active {
        padding-top: 110px;
    }
}

@media (max-width: 767.98px) {
    .site-section {
        padding-block: 50px;
    }

    .site-title {
        font-size: 30px;
    }

    .site-title-lg {
        font-size: 26px;
    }

    .site-title-xl {
        font-size: 42px;
    }

    .site-text,
    .site-text p {
        font-size: 18px;
    }

    .site-footer-row {
        flex-direction: column;
        text-align: center;
    }

    .site-banner h1 {
        max-width: none;
        font-size: 34px;
    }

    .site-banner-sub {
        max-width: none;
    }

    .site-outline-card {
        padding: 44px 24px 28px;
    }

    .home-hero {
        min-height: 60vh;
    }

    .home-who {
        padding-inline-start: 1.25rem;
    }

    .home-hero::before {
        background-image: var(--hero-mobile);
    }

    .home-hero h1 {
        font-size: 34px;
    }

    .home-hero p {
        font-size: 18px;
    }

    .home-testimonials {
        padding-block: 50px;
    }

    .home-testimonials-title {
        font-size: 28px;
    }

    .home-slide,
    .home-slide.has-video {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }

    .home-slide video {
        flex: none;
        width: 100%;
    }

    .home-slide p,
    .home-slide.has-video p {
        font-size: 17px;
    }
}

/* ---------------------------------------------------------------- 6. About page */

/* Outlined cards (vision, mission, values) sit closer to the text above them. */
.about-pillars {
    padding-top: 45px;
}

.about-values li::before {
    content: '★';
    margin-inline-end: .5rem;
}

.about-values-text {
    margin: 3rem 0 0;
}

@media (max-width: 991.98px) {
    .about-pillars .row {
        row-gap: 3.5rem;
    }
}

@media (max-width: 767.98px) {
    .site-story {
        padding-inline-start: 1.25rem;
    }
}

/* ---------------------------------------------------------------- 7. Programs pages */

.programs-list {
    padding-top: 0;
}

.program-intro {
    padding-inline-start: 1.5rem;
}

.program-intro p {
    margin: 0;
}

.program-group {
    margin-top: 3.5rem;
}

.program-group-title {
    margin: 0 0 .5rem;
    color: var(--site-ink);
    font-size: 30px;
    font-weight: 800;
}

.program-key-title {
    margin: 2.5rem 0 1rem;
    color: #000;
    font-size: 32px;
    font-weight: 800;
}

.program-group-title + .site-text {
    margin-bottom: 0;
}

.program-cards {
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.program-card {
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 22px rgba(0, 30, 67, .09);
    transition: transform .3s ease, box-shadow .3s ease;
}

.program-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(0, 30, 67, .14);
}

.program-card-photo {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
}

.program-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.program-card:hover .program-card-photo img {
    transform: scale(1.06);
}

/* The title is a teal label sitting on the photo's lower edge. A long one runs to a second
   line and the label simply grows downward. */
.program-card h4 {
    position: relative;
    align-self: flex-start;
    margin: -26px 1.25rem .9rem;
    padding: .7rem 1.1rem;
    border-inline-start: 5px solid var(--secondary);
    border-radius: 10px;
    background: var(--primary);
    box-shadow: 0 8px 18px rgba(0, 30, 67, .18);
    color: #fff;
    font-family: var(--site-font-text);
    font-size: 19px;
    font-weight: 800;
    line-height: 1.4;
}

.program-card p {
    flex: 1;
    margin: 0;
    padding: 0 1.5rem 1.6rem;
    font-size: 17px;
    line-height: 1.75;
}

/* The other programs, as photo tiles on the same colored band as the home page's testimonials */
.program-others {
    background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 65%, var(--site-ink)));
}

.program-others .site-title {
    color: #fff;
}

.program-others .site-title::after {
    content: '';
    display: block;
    width: 70px;
    height: 5px;
    margin-top: 1rem;
    background: var(--secondary);
}

.program-others-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.program-other {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 170px;
    padding: 20px;
    overflow: hidden;
    border-radius: 14px;
    background-color: var(--site-ink);
    background-position: center;
    background-size: cover;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    transition: transform .3s ease;
}

.program-other:hover {
    transform: translateY(-5px);
    color: #fff;
}

.program-other::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 30, 67, .9), rgba(0, 30, 67, .15) 75%);
    transition: background-color .3s ease;
}

.program-other:hover::before {
    background-color: rgba(0, 30, 67, .35);
}

.program-other span {
    position: relative;
    padding-inline-start: 12px;
    border-inline-start: 4px solid var(--secondary);
    line-height: 1.4;
}

@media (max-width: 991.98px) {
    .program-cards {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, 1fr);
    }

    .program-others-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767.98px) {
    .program-cards {
        grid-template-columns: 1fr;
    }

    .program-group-title {
        font-size: 24px;
    }

    .program-key-title {
        font-size: 26px;
    }

    .program-other {
        min-height: 120px;
        font-size: 17px;
    }
}

/* ---------------------------------------------------------------- 8. Scholarships page */

.scholarship-criteria {
    padding-top: 0;
}

.scholarship-criteria .site-title {
    text-align: center;
}

/* The four names in a column; the open one's text beside them. */
.criteria-tabs {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 1.5rem;
    margin-top: 2.5rem;
}

.criteria-tabs-list {
    display: grid;
    gap: .75rem;
}

/* The open tab trades 3.5px of padding for its thicker yellow edge, so its text does not move. */
.criteria-tab {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .9rem 1.1rem;
    padding-inline-start: calc(1.1rem + 3.5px);
    border: 1.5px solid #e3e6ea;
    border-radius: 14px;
    background: #fff;
    color: var(--site-ink);
    font-size: 17px;
    font-weight: 700;
    text-align: start;
    transition: border-color .25s ease, background-color .25s ease;
}

.criteria-tab:hover {
    border-color: var(--primary);
}

.criteria-tab.active {
    padding-inline-start: 1.1rem;
    border-color: var(--primary);
    border-inline-start: 5px solid var(--secondary);
    background: color-mix(in srgb, var(--primary) 9%, #fff);
    color: var(--primary);
}

.criteria-tabs-panel {
    padding: 2.25rem 2.5rem;
    border-radius: 20px;
    background: var(--site-tint);
}

.criteria-tabs-panel h3 {
    margin: 0 0 1rem;
    color: var(--primary);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.4;
}

.criteria-tabs-panel ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.criteria-tabs-panel p,
.criteria-tabs-panel li {
    margin: 0 0 .6rem;
    font-family: var(--site-font-text);
    font-size: 17px;
    line-height: 1.75;
}

.criteria-tabs-panel li {
    position: relative;
    padding-inline-start: 1.25em;
}

.criteria-tabs-panel li:last-child {
    margin-bottom: 0;
}

.criteria-tabs-panel li::before {
    content: '•';
    position: absolute;
    inset-inline-start: 0;
    color: var(--primary);
    font-weight: 800;
}

.scholarship-how-photo {
    display: block;
    width: 100%;
    max-width: 458px;
    height: auto;
    margin-inline: auto;
}

.scholarship-how .site-text {
    margin-bottom: 30px;
}

/* The steps: Bootstrap's accordion, stripped to a title over a thin line. */
.site-steps {
    --bs-accordion-bg: transparent;
    --bs-accordion-border-width: 0;
    --bs-accordion-btn-padding-x: 0;
    --bs-accordion-btn-padding-y: 0;
    --bs-accordion-body-padding-x: 0;
    --bs-accordion-body-padding-y: 0;
    --bs-accordion-btn-color: var(--site-ink);
    --bs-accordion-active-color: var(--primary);
    --bs-accordion-active-bg: transparent;
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-btn-icon-width: 14px;
    margin-bottom: 45px;
    padding-inline-start: 52px;         /* room for the numbers */
    counter-reset: site-step;
}

.site-steps .accordion-item {
    position: relative;
    margin-bottom: 25px;
    border-bottom: 1px solid #e2e2e2;
    counter-increment: site-step;
}

/* Each step's number in a circle, and a line from it down to the next one's. */
.site-steps .accordion-item::before {
    content: counter(site-step);
    position: absolute;
    z-index: 1;
    inset-block-start: -3px;
    inset-inline-start: -52px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}

.site-steps .accordion-item:not(:last-child)::after {
    content: '';
    position: absolute;
    inset-block: 29px -22px;
    inset-inline-start: -37px;
    width: 2px;
    background: color-mix(in srgb, var(--primary) 45%, transparent);
    transform-origin: top;
}

.site-steps .accordion-button {
    gap: 1rem;
    padding-bottom: 15px;
    box-shadow: none;
    font-size: 18px;
    font-weight: 700;
    text-align: start;
}

.site-steps .accordion-button::after {
    margin-inline: auto 0;
}

.site-steps .accordion-button:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 4px;
}

.site-steps .accordion-body {
    padding-bottom: 15px;
    font-family: var(--site-font-text);
    font-size: 17px;
    line-height: 1.8;
}

.site-steps .accordion-body a {
    display: inline-block;
    margin-top: .5rem;
    color: var(--primary);
    font-family: var(--site-font-ui);
    font-weight: 700;
    text-decoration: underline;
}

.site-steps .accordion-body a:hover {
    color: var(--site-ink);
}

@media (max-width: 991.98px) {
    .criteria-tabs {
        grid-template-columns: 1fr;
    }

    .criteria-tabs-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .scholarship-how-photo {
        max-width: 320px;
        margin-bottom: 2rem;
    }
}

@media (max-width: 767.98px) {
    .criteria-tab {
        flex-direction: column;
        align-items: flex-start;
        gap: .5rem;
        padding-block: .8rem;
        font-size: 15px;
    }

    .criteria-tabs-panel {
        padding: 1.5rem 1.25rem;
    }
}

/* ---------------------------------------------------------------- 9. Blog */

.blog-empty {
    text-align: center;
}

/* Article cards: the blog's list, and "more articles" under an article. */
.post-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
}

.post-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 22px rgba(0, 30, 67, .09);
    color: var(--site-text);
    transition: transform .3s ease, box-shadow .3s ease;
}

.post-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(0, 30, 67, .14);
    color: var(--site-text);
}

.post-card-photo {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--site-tint);
}

.post-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.post-card:hover .post-card-photo img {
    transform: scale(1.06);
}

.post-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.4rem 1.5rem 1.5rem;
}

.post-card time,
.post-head time {
    color: var(--primary);
    font-size: 14px;
    font-weight: 700;
}

.post-card strong {
    margin: .4rem 0 .6rem;
    color: var(--site-ink);
    font-family: var(--site-font-text);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.5;
}

.post-card-excerpt {
    flex: 1;
    font-family: var(--site-font-text);
    font-size: 16px;
    line-height: 1.75;
}

/* One article: a reading column, the cover a little wider than the text. */
.post-head,
.post-body,
.post-share {
    max-width: 820px;
    margin-inline: auto;
}

.post-back {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.5rem;
    color: var(--site-ink);
    font-size: 15px;
    font-weight: 700;
}

.post-back:hover {
    color: var(--primary);
}

.post-head time {
    display: block;
    margin-bottom: .5rem;
}

.post-head .site-title {
    margin-bottom: 1rem;
}

.post-lead {
    margin: 0;
    padding-inline-start: 1.25rem;
    border-inline-start: 5px solid var(--secondary);
    color: var(--site-ink);
    font-family: var(--site-font-text);
    font-size: 21px;
    line-height: 1.8;
}

.post-cover {
    display: block;
    width: 100%;
    max-width: 1040px;
    max-height: 480px;
    margin: 2.5rem auto 0;
    border-radius: 20px;
    object-fit: cover;
}

.post-body {
    margin-top: 2.5rem;
}

/* Text written in the dashboard's editor, as the website prints it. */
.site .rich-text {
    font-family: var(--site-font-text);
    font-size: 19px;
    line-height: 1.95;
    overflow-wrap: anywhere;
}

.site .rich-text > :first-child {
    margin-top: 0;
}

.site .rich-text > :last-child {
    margin-bottom: 0;
}

.site .rich-text p {
    margin: 0 0 1.25rem;
}

.site .rich-text h1,
.site .rich-text h2,
.site .rich-text h3,
.site .rich-text h4 {
    margin: 2rem 0 .75rem;
    color: var(--site-ink);
    font-weight: 800;
    line-height: 1.4;
}

.site .rich-text h1,
.site .rich-text h2 {
    font-size: 28px;
}

.site .rich-text h3 {
    font-size: 23px;
}

.site .rich-text h4 {
    font-size: 20px;
}

.site .rich-text a {
    color: var(--primary);
    text-decoration: underline;
}

.site .rich-text img,
.site .rich-text iframe,
.site .rich-text video {
    max-width: 100%;
    border-radius: 12px;
}

.site .rich-text img {
    height: auto;
}

.site .rich-text blockquote {
    margin: 1.5rem 0;
    padding: .5rem 1.25rem;
    border-inline-start: 5px solid var(--secondary);
    color: var(--site-ink);
}

.site .rich-text table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

.site .rich-text td,
.site .rich-text th {
    padding: .5rem .75rem;
    border: 1px solid #dfe3e8;
}

.post-share {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e3e6ea;
    color: var(--site-ink);
    font-size: 17px;
}

.post-share-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
}

.post-share-links a,
.post-share-links button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-width: 44px;
    height: 44px;
    padding-inline: .9rem;
    border: 1.5px solid #dfe3e8;
    border-radius: 22px;
    background: #fff;
    color: var(--site-ink);
    font-size: 15px;
    font-weight: 700;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

.post-share-links a {
    padding-inline: 0;
    font-size: 17px;
}

.post-share-links a:hover,
.post-share-links button:hover,
.post-share-links button.copied {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

@media (max-width: 991.98px) {
    .post-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767.98px) {
    .post-cards {
        grid-template-columns: 1fr;
    }

    .post-lead {
        font-size: 18px;
    }

    .post-cover {
        margin-top: 1.75rem;
        border-radius: 14px;
    }

    .site .rich-text {
        font-size: 17px;
    }
}

/* ---------------------------------------------------------------- 10. Contact page */

/* One card in two parts: the foundation's words on the brand color, the form beside them. */
.contact-split {
    display: grid;
    grid-template-columns: 5fr 7fr;
    overflow: hidden;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 14px 44px rgba(0, 30, 67, .12);
}

/* The foundation's mark shows faintly through the color. */
.contact-split-info {
    padding: 3rem 2.5rem;
    background:
        url('../site/img/logo-watermark.png') center / cover no-repeat,
        linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 65%, var(--site-ink)));
    background-blend-mode: soft-light, normal;
    color: #fff;
}

.contact-split-info h2 {
    margin: 0 0 1rem;
    padding-bottom: 1rem;
    border-bottom: 4px solid var(--secondary);
    font-size: 30px;
    font-weight: 800;
    line-height: 1.4;
}

.contact-split-info p {
    margin: 0;
    font-family: var(--site-font-text);
    font-size: 18px;
    line-height: 1.9;
}

.contact-info-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    padding: 1.25rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, .14);
}

.contact-info-card i {
    display: grid;
    flex: none;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff;
    color: var(--primary);
    font-size: 20px;
}

.contact-info-card span {
    display: block;
    font-size: 15px;
}

.contact-info-card a,
.contact-info-card a:hover {
    color: #fff;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.contact-info-card a:hover {
    text-decoration: underline;
}

.contact-info-card a span {
    display: inline;
    font-size: 16px;
}

.contact-split-form {
    padding: 3rem 2.5rem;
}

.contact-split-form .site-title {
    font-size: 34px;
}

@media (max-width: 991.98px) {
    .contact-split {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .contact-split-info,
    .contact-split-form {
        padding: 1.75rem 1.25rem;
    }

    .contact-split-form .site-title {
        font-size: 28px;
    }

    /* Narrow enough here that the address would break in two: everything a size down. */
    .contact-info-card {
        gap: .6rem;
        padding: .9rem .75rem;
    }

    .contact-info-card i {
        width: 38px;
        height: 38px;
        font-size: 15px;
    }

    .contact-info-card a span {
        font-size: clamp(11px, 3.3vw, 13px);
    }
}

/* ---------------------------------------------------------------- 11. Application form */

/*
| /apply_now: the email question, the steps, the review page. Built on .site-form; the pieces
| here are the progress bar, the cards that hold a section, repeated rows and the document tiles.
*/
.apply .container {
    max-width: 1080px;
}

.apply-head .site-title {
    margin-bottom: 1.5rem;
}

/* The university year the form is for, right under the title. */
.apply-head .site-title:has(+ .apply-year) {
    margin-bottom: .35rem;
}

.apply-year {
    margin: 0 0 1.5rem;
    font-size: 1.15rem;
    font-weight: 700;
    opacity: .7;
}

/* The steps: a numbered dot each, joined by a line; done ones are filled. */
.apply-steps {
    display: flex;
    gap: .5rem;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.apply-steps li {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
}

.apply-steps li + li::before {
    content: '';
    position: absolute;
    inset-block-start: 19px;
    inset-inline-end: calc(50% + 24px);
    width: calc(100% - 48px + .5rem);
    height: 2px;
    background: #dfe3e8;
}

.apply-steps li.is-done + li::before {
    background: var(--primary);
}

.apply-steps a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    color: var(--site-text);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.apply-step-dot {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 2px solid #dfe3e8;
    border-radius: 50%;
    background: #fff;
    color: var(--site-text);
    font-size: 15px;
    transition: border-color .25s ease, background-color .25s ease, color .25s ease;
}

.apply-steps .is-done .apply-step-dot {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

.apply-steps .is-current .apply-step-dot {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent);
    color: var(--primary);
}

.apply-steps .is-current.is-done .apply-step-dot {
    color: #fff;
}

.apply-steps .is-current a,
.apply-steps a:hover {
    color: var(--site-ink);
}

/* Whose draft this is. */
.apply-owner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem 1.5rem;
    margin-bottom: 1.5rem;
    padding: .9rem 1.25rem;
    border-radius: 12px;
    background: var(--site-tint);
    color: var(--site-text);
    font-size: 15px;
}

.apply-owner strong {
    color: var(--site-ink);
}

.apply-owner details {
    flex: 1 1 auto;
}

.apply-owner summary,
.apply-link {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    color: var(--primary);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.apply-owner summary {
    list-style: none;
}

.apply-owner summary::-webkit-details-marker {
    display: none;
}

.apply-owner summary:hover,
.apply-link:hover {
    color: var(--site-ink);
}

.apply-inline {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: .75rem;
}

.apply-inline input:not([type="checkbox"]):not([type="file"]) {
    flex: 1 1 240px;
    width: auto;
    padding-block: 10px;
}

.site-form.apply-inline .site-button {
    margin-top: 0;
    padding: 10px 24px;
}

/* A section of the form. */
.apply-card {
    margin-bottom: 1.5rem;
    padding: 2rem;
    border: 1px solid #e6e9ee;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 24px rgba(0, 30, 67, .05);
}

.apply-card > h2,
.apply-review-head h2 {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0 0 1.5rem;
    color: var(--site-ink);
    font-size: 24px;
    font-weight: 800;
}

.apply-card > h2 i {
    color: var(--primary);
    font-size: 20px;
}

.apply-subtitle,
.apply-table h3 {
    margin: 2rem 0 .5rem;
    color: var(--site-ink);
    font-size: 18px;
    font-weight: 700;
}

.apply-table h3 {
    margin-top: .5rem;
}

.apply-hint {
    margin: .35rem 0 .75rem;
    color: var(--site-text);
    font-size: 14px;
    text-align: start;
}

/* A list on a computer (select.js): the <select> stays in its place, unseen, to hold the
   answer and its size; a button covers it and the choices open in one scrolling list on <body>. */
.ui-select {
    position: relative;
}

.ui-select > select {
    opacity: 0;
    pointer-events: none;
}

.site-form .ui-select-button {
    position: absolute;
    inset: 0;
    width: 100%;
    padding: 0 18px;
    padding-inline-end: 44px;
    overflow: hidden;
    border: 1.5px solid #dfe3e8;
    border-radius: 10px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m3 6 5 5 5-5'/%3E%3C/svg%3E") no-repeat left 16px center / 14px;
    color: var(--site-ink);
    font-family: var(--site-font-text);
    font-size: 17px;
    font-weight: 400;
    text-align: start;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .25s ease, box-shadow .25s ease;
}

[dir="ltr"] .site-form .ui-select-button {
    background-position: right 16px center;
}

.site-form .ui-select-button:focus,
.site-form .ui-select-button[aria-expanded="true"] {
    border-color: var(--primary);
    outline: 0;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent);
}

.site-form .ui-select-button.is-invalid {
    border-color: #c62828;
}

.site-form .ui-select-button.is-empty {
    color: var(--site-text);
}

.site-form .ui-select-button:disabled {
    opacity: .6;
    cursor: default;
}

.ui-select-list {
    position: fixed;
    z-index: 1080;
    max-height: 264px;
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    border: 1px solid #dfe3e8;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 32px rgb(0 0 0 / .14);
    list-style: none;
}

.ui-select-list li {
    padding: 9px 12px;
    border-radius: 7px;
    color: var(--site-ink);
    font-family: var(--site-font-text);
    font-size: 16px;
    font-weight: 400;
    white-space: nowrap;
    cursor: pointer;
}

.ui-select-list li.is-empty {
    color: var(--site-text);
}

.ui-select-list li:hover,
.ui-select-list li.is-active {
    background: color-mix(in srgb, var(--primary) 12%, #fff);
}

.ui-select-list li.is-chosen {
    color: var(--primary);
    font-weight: 700;
}

.site-form .apply-date .ui-select-button {
    padding-inline: 10px 28px;
    background-position: left 9px center;
    background-size: 12px;
}

[dir="ltr"] .site-form .apply-date .ui-select-button {
    background-position: right 9px center;
}

/* A date as three lists: day, month, year. Tighter than a lone list, so a year fits on a phone. */
.apply-date {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr) minmax(0, 1.3fr);
    gap: .4rem;
}

.site-form .apply-date select {
    padding-inline: 10px 28px;
    background-position: left 9px center;
    background-size: 12px;
}

[dir="ltr"] .site-form .apply-date select {
    background-position: right 9px center;
}

.apply-hint.is-warning {
    color: #c62828;
    font-weight: 700;
}

.apply-required {
    margin-inline-start: .25rem;
    color: #c62828;
}

.apply-form fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.apply-form legend {
    float: none;
    margin-bottom: .6rem;
    color: var(--site-ink);
    font-size: 15px;
    font-weight: 700;
}

.site-form select {
    appearance: none;
    padding-inline-end: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m3 6 5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 16px center;
    background-size: 14px;
}

[dir="ltr"] .site-form select {
    background-position: right 16px center;
}

/* Tick boxes: "applied through", the declaration. */
.apply-checks {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 2rem;
}

.site-form .apply-check,
.apply-check {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: 0;
    color: var(--site-ink);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.apply-check input {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: .2rem;
    accent-color: var(--primary);
}

.apply-words {
    margin: .4rem 0 0;
    color: var(--site-text);
    font-size: 14px;
}

.apply-words.is-done {
    color: color-mix(in srgb, var(--primary) 70%, #000);
    font-weight: 600;
}

/* Repeated rows: a number, the row's fields, and (where rows can be added) a remove button. */
.apply-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1.25rem;
    border-radius: 12px;
    background: var(--site-tint);
}

.apply-row-number {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-top: 1.9rem;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.apply-row .row > div {
    min-width: 180px;
}

.apply-row-remove {
    flex: none;
    width: 36px;
    height: 36px;
    margin-top: 1.8rem;
    border: 0;
    border-radius: 8px;
    background: #fdecea;
    color: #a31515;
}

.apply-row-add,
.apply-save {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: 10px 20px;
    border: 1.5px solid var(--primary);
    border-radius: 0;
    background: #fff;
    color: var(--primary);
    font-size: 15px;
    font-weight: 700;
    transition: background-color .25s ease, color .25s ease;
}

.apply-row-add:hover,
.apply-save:hover {
    background: var(--primary);
    color: #fff;
}

/* A document: its name, the button that chooses it, and what became of it. */
.apply-file {
    height: 100%;
    padding: 1.1rem 1.25rem;
    border: 1.5px dashed #c9d0d9;
    border-radius: 12px;
    background: #fff;
    transition: border-color .25s ease, background-color .25s ease;
}

.apply-file.is-done {
    border-style: solid;
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 5%, #fff);
}

.apply-file.is-invalid {
    border-color: #c62828;
}

.apply-file-label {
    margin: 0 0 .75rem;
    color: var(--site-ink);
    font-size: 15px;
    font-weight: 700;
    text-align: start;
}

.apply-file-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
}

/* The real file field stays reachable by keyboard but out of sight; its label is the button. */
.apply-file input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.site-form .apply-file-pick {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    padding: 9px 18px;
    background: var(--site-ink);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: background-color .25s ease;
}

.apply-file-pick:hover,
.apply-file input[type="file"]:focus-visible + .apply-file-pick {
    background: var(--primary);
}

.apply-file.is-busy .apply-file-pick {
    pointer-events: none;
    opacity: .75;
}

.apply-file-state {
    display: none;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    color: color-mix(in srgb, var(--primary) 70%, #000);
    font-size: 14px;
}

.apply-file.is-done:not(.is-busy) .apply-file-state {
    display: flex;
}

.apply-file-state a {
    overflow: hidden;
    max-width: 220px;
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-overflow: ellipsis;
    white-space: nowrap;
    direction: ltr;
}

.apply-file-bar {
    display: none;
    height: 6px;
    margin-top: .9rem;
    overflow: hidden;
    border-radius: 3px;
    background: #e6e9ee;
}

.apply-file.is-busy .apply-file-bar {
    display: block;
}

.apply-file-bar span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--primary);
    transition: width .2s ease;
}

.apply-file .site-form-error:empty {
    display: none;
}

/* The buttons under a step. */
.apply-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 2rem;
}

.apply-back {
    margin-inline-end: auto;
    color: var(--site-text);
    font-weight: 600;
}

.apply-back:hover {
    color: var(--primary);
}

.site-form .apply-actions .site-button {
    margin-top: 0;
}

.apply-actions button:disabled,
.apply-submit button:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* The entrance: what to prepare beside the email question. */
.apply-start {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 3rem;
    align-items: start;
}

.apply-list {
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}

.apply-list li {
    display: flex;
    gap: .75rem;
    margin-bottom: .75rem;
    color: var(--site-ink);
    font-size: 17px;
}

.apply-list i {
    margin-top: .35rem;
    color: var(--primary);
}

.apply-start-form h2 {
    margin-bottom: .5rem;
}

.apply-start-form > p {
    text-align: start;
    font-size: 16px;
}

.apply-start-form .apply-hint {
    margin: 1.25rem 0 0;
}

/* A page that is one message: closed, done. */
.apply-message {
    max-width: 720px;
    margin-inline: auto;
    padding: 3rem 2rem;
    text-align: center;
}

.apply-message > i {
    margin-bottom: 1.25rem;
    color: var(--site-text);
    font-size: 56px;
}

.apply-message-ok > i {
    color: var(--primary);
}

.apply-message h2 {
    justify-content: center;
}

.apply-message p {
    text-align: center;
}

.apply-number {
    color: var(--site-ink);
    font-weight: 700;
}

.apply-number strong {
    color: var(--primary);
    font-size: 28px;
}

/* The review page. */
.apply-review-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.apply-review-head h2 {
    margin: 0;
}

.apply-missing {
    margin-bottom: 1.25rem;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    background: #fdecea;
    color: #a31515;
    font-size: 15px;
}

.apply-missing ul {
    margin: .5rem 0 0;
    padding-inline-start: 1.25rem;
}

.apply-answers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 2rem;
    margin: 0;
}

.apply-answers .is-wide {
    grid-column: 1 / -1;
}

.apply-answers dt {
    color: var(--site-text);
    font-size: 14px;
    font-weight: 400;
}

.apply-answers dd {
    margin: .15rem 0 0;
    color: var(--site-ink);
    font-size: 16px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.apply-rows {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.apply-rows th,
.apply-rows td {
    padding: .6rem .75rem;
    border-bottom: 1px solid #e6e9ee;
    text-align: start;
}

.apply-rows th {
    color: var(--site-text);
    font-weight: 600;
    white-space: nowrap;
}

.apply-rows td {
    color: var(--site-ink);
}

.apply-docs {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.apply-docs a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .9rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--primary) 10%, #fff);
    color: color-mix(in srgb, var(--primary) 70%, #000);
    font-size: 14px;
    font-weight: 600;
}

.apply-submit {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
}

.apply-submit .site-button {
    border: 0;
}

@media (max-width: 991.98px) {
    .apply-start {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

@media (max-width: 767.98px) {
    .apply-card {
        padding: 1.25rem;
    }

    .apply-card > h2,
    .apply-review-head h2 {
        font-size: 20px;
    }

    /* Six names do not fit: the dots stay, only the current step is named. */
    .apply-steps {
        gap: .25rem;
    }

    .apply-step-name {
        display: none;
    }

    .apply-steps .is-current .apply-step-name {
        display: block;
        position: absolute;
        inset-block-start: 48px;
        inset-inline-start: 50%;
        width: max-content;
        max-width: 60vw;
        transform: translateX(-50%);
    }

    [dir="rtl"] .apply-steps .is-current .apply-step-name {
        transform: translateX(50%);
    }

    .apply-steps {
        margin-bottom: 3rem;
    }

    .apply-steps li + li::before {
        inset-block-start: 17px;
        inset-inline-end: calc(50% + 20px);
        width: calc(100% - 40px + .25rem);
    }

    .apply-step-dot {
        width: 36px;
        height: 36px;
    }

    .apply-row {
        flex-wrap: wrap;
        padding: 1rem;
    }

    .apply-row-number,
    .apply-row-remove {
        margin-top: 0;
    }

    .apply-row > .row {
        order: 3;
        flex-basis: 100%;
    }

    .apply-row-remove {
        margin-inline-start: auto;
    }

    .apply-answers {
        grid-template-columns: 1fr;
    }

    .apply-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .apply-actions > * {
        justify-content: center;
        text-align: center;
    }

    .apply-back {
        margin-inline-end: 0;
    }
}

/* ---------------------------------------------------------------- 12. Motion */

/*
| Everything that moves by itself is here, and only for a visitor who has not asked their device for
| less motion: without this block the page is simply all there. What moves under the pointer (a card
| that lifts, a button's arrow) is beside the thing it belongs to.
|
|   data-reveal             the block rises into place as it comes into view
|   data-reveal="start|end" it comes in from its own side instead (a title and the text beside it)
|   data-reveal="wipe"      a picture uncovered from its start edge
|   data-reveal-group       its children rise one after the other
|   data-reveal-group="text" the same at reading pace: the paragraphs of a long text
|
| site.js adds .js to <html>, then .revealed to each of them as it comes into view.
*/
@media (prefers-reduced-motion: no-preference) {
    /* Going from one page of the website to another: a short cross-fade; the header stays where it is. */
    @view-transition {
        navigation: auto;
    }

    .site-header {
        view-transition-name: site-header;
    }

    /* The top of a page as it opens: the title, then the line under it, and the photo settling behind them. */
    .site-banner h1 {
        animation: site-rise .9s ease .15s backwards;
    }

    .site-banner-sub {
        animation: site-rise .9s ease .4s backwards;
    }

    /* The home page's two lines are written out word by word (whole words: Arabic letters change shape as
       their neighbours arrive). site.js wraps each word and gives it its turn; until it has, the lines wait
       unseen, and show by themselves after two seconds if the script never comes. */
    [data-words]:not(.words-ready) > * {
        animation: site-fade .4s ease 2s backwards;
    }

    .site-word {
        display: inline-block;
        animation: site-word .55s ease var(--word-delay, 0s) backwards;
    }

    .home-hero::before {
        animation: site-settle 12s ease-out backwards;
    }

    .home-hero-scroll {
        animation: site-fade .8s ease 1s backwards;
    }

    .home-hero-scroll span {
        animation: site-wheel 1.8s ease-in-out infinite;
    }

    /* On a computer the photo also moves down more slowly than the page (browsers that can tie it to the scroll). */
    @supports (animation-timeline: scroll()) {
        @media (min-width: 992px) {
            .site-banner::before {
                animation: site-drift 1ms linear both;
                animation-timeline: scroll(root);
                animation-range: 0 100vh;
            }

            .home-hero::before {
                animation: site-settle 12s ease-out backwards, site-drift 1ms linear both;
                animation-timeline: auto, scroll(root);
                animation-range: normal, 0 100vh;
            }
        }
    }

    /* Scroll reveal */
    .js [data-reveal] {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity .7s ease, transform .7s ease;
    }

    .js [data-reveal="wipe"] {
        opacity: 1;
        transform: none;
        clip-path: inset(0 100% 0 0);
        transition: clip-path 1.1s cubic-bezier(.65, 0, .35, 1);
    }

    .js[dir="rtl"] [data-reveal="wipe"] {
        clip-path: inset(0 0 0 100%);
    }

    .js [data-reveal].revealed {
        opacity: 1;
        transform: none;
        clip-path: inset(0);
    }

    /* The children are animated, not transitioned: what each does under the pointer stays its own. */
    .js [data-reveal-group] > * {
        opacity: 0;
    }

    .js [data-reveal-group] > .revealed {
        opacity: 1;
        animation: site-rise .7s ease var(--reveal-delay, 0s) backwards;
    }

    /* A long text: its paragraphs follow one another slowly, as if being said. */
    .js [data-reveal-group="text"] > .revealed {
        animation-duration: .9s;
        animation-delay: calc(var(--reveal-delay, 0s) * 4 + .2s);
    }

    /* The programs' panels are unveiled from the ground up, one after the other; the name on a panel
       follows its photo. */
    .js .home-programs > .revealed {
        animation: site-unveil 1s cubic-bezier(.2, .7, .2, 1) calc(var(--reveal-delay, 0s) * 1.6) backwards;
    }

    .js .home-programs > .revealed h3 {
        animation: site-rise .6s ease calc(var(--reveal-delay, 0s) * 1.6 + .45s) backwards;
    }

    /* The steps: each number lights up as its step arrives, then the line runs down to the next. */
    .js .site-steps .accordion-item::before {
        background: var(--site-tint);
        box-shadow: inset 0 0 0 2px #cfd6dd;
        color: #8a94a0;
        transition: background-color .4s ease, box-shadow .4s ease, color .4s ease;
        transition-delay: calc(var(--reveal-delay, 0s) + .3s);
    }

    .js .site-steps .accordion-item.revealed::before {
        background: var(--primary);
        box-shadow: none;
        color: #fff;
    }

    .js .site-steps .accordion-item::after {
        scale: 1 0;
        transition: scale .5s ease calc(var(--reveal-delay, 0s) + .5s);
    }

    .js .site-steps .accordion-item.revealed::after {
        scale: 1 1;
    }

    /* "Apply now": a light passes over the button every few seconds. */
    .site-button-shine {
        position: relative;
        overflow: hidden;
    }

    .site-button-shine::after {
        content: '';
        position: absolute;
        inset-block: 0;
        inset-inline-start: 0;
        width: 40%;
        background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent);
        translate: calc(var(--site-dir) * -150%) 0;
        animation: site-shine 5s ease-in-out infinite;
    }

    @media (min-width: 992px) {
        .js [data-reveal="start"] {
            transform: translateX(calc(var(--site-dir) * -50px));
        }

        .js [data-reveal="end"] {
            transform: translateX(calc(var(--site-dir) * 50px));
        }
    }
}

@keyframes site-rise {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
}

@keyframes site-word {
    from {
        opacity: 0;
        filter: blur(6px);
        transform: translateY(.3em);
    }
}

@keyframes site-unveil {
    from {
        clip-path: inset(100% 0 0 0 round 14px);
    }

    to {
        clip-path: inset(0 0 0 0 round 14px);
    }
}

@keyframes site-fade {
    from {
        opacity: 0;
    }
}

@keyframes site-wheel {
    0% {
        opacity: 0;
        translate: 0 -3px;
    }

    30% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        translate: 0 16px;
    }
}

@keyframes site-settle {
    from {
        scale: 1.12;
    }
}

@keyframes site-drift {
    to {
        translate: 0 22%;
    }
}

@keyframes site-shine {
    0%,
    70% {
        translate: calc(var(--site-dir) * -150%) 0;
    }

    100% {
        translate: calc(var(--site-dir) * 400%) 0;
    }
}

/* The footer's link to the privacy policy. */
.site-footer p a {
    color: inherit;
    text-decoration: underline;
}

.site-footer p a:hover {
    color: var(--primary);
}

/* The privacy policy: its date under the text. */
.privacy-updated {
    margin-top: 2.5rem !important;
    color: var(--site-text);
    opacity: .8;
    font-size: 15px;
}

/* ---------------------------------------------------------------- 13. Sections only the dashboard adds */

/* A program's groups of cards follow its opening text as one block: no band's air between them, only the group's own. */
.site-section:not(.site-section-tint):has(+ .site-cards-photo) {
    padding-bottom: 0;
}

.site-section:not(.site-section-tint) + .site-cards-photo {
    padding-top: 0;
}

/* Text from the rich editor inside a website text: its paragraphs spaced as the website's own. */
.site-rich > :last-child {
    margin-bottom: 0;
}

/* A text section's opening line, a little larger than the text under it. */
.site-lead {
    font-size: 20px;
}

/* The title and line over a section's content. */
.site-section-head {
    max-width: 820px;
    margin-bottom: 2.5rem;
}

.site-section-head .site-title {
    margin-bottom: 1rem;
}

/* The picture beside a text (a "text and picture" section). */
.site-media-photo img {
    width: 100%;
    height: auto;
    border-radius: 14px;
}

/* A call to act: the brand color, a title and a line, the button at the end. */
.site-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 3rem;
    border-radius: 18px;
    background: var(--primary);
    color: #fff;
}

.site-cta h2 {
    margin: 0 0 .5rem;
    color: #fff;
    font-size: 32px;
    font-weight: 800;
}

.site-cta p {
    margin: 0;
    color: rgba(255, 255, 255, .88);
    font-family: var(--site-font-text);
    font-size: 18px;
}

.site-cta .site-button {
    flex-shrink: 0;
}

.site-cta .site-button:hover {
    background: #fff;
    color: var(--primary);
}

/* One video, at the width of the text. */
.site-video-frame {
    max-width: 960px;
    overflow: hidden;
    border-radius: 14px;
    background: #000;
    aspect-ratio: 16 / 9;
}

.site-video-frame iframe,
.site-video-frame video {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Photos in a grid, each cut to the same shape. */
.site-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.site-gallery figure {
    margin: 0;
}

.site-gallery img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 12px;
    transition: transform .4s ease;
}

.site-gallery a {
    display: block;
    overflow: hidden;
    border-radius: 12px;
}

.site-gallery a:hover img {
    transform: scale(1.04);
}

.site-gallery figcaption {
    margin-top: .5rem;
    color: var(--site-text);
    font-size: 14px;
}

/* Partners' logos: grey until pointed at. */
.site-partners {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 1rem;
}

.site-partner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 1.25rem;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    background: #fff;
    color: var(--site-ink);
    font-weight: 700;
    text-align: center;
}

.site-partner img {
    max-width: 100%;
    max-height: 70px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .75;
    transition: filter .3s ease, opacity .3s ease;
}

.site-partner:hover img {
    filter: none;
    opacity: 1;
}

/* People: a round photo (or their first letter), a name, what they do. */
.site-team {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 2rem 1.5rem;
    text-align: center;
}

.site-person img,
.site-person-initial {
    display: block;
    width: 150px;
    height: 150px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    object-fit: cover;
}

.site-person-initial {
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--primary) 12%, #fff);
    color: var(--primary);
    font-size: 48px;
    font-weight: 800;
}

.site-person h3 {
    margin: 0 0 .25rem;
    color: var(--site-ink);
    font-size: 19px;
    font-weight: 700;
}

.site-person p {
    margin: 0;
    color: var(--site-text);
    font-size: 15px;
}

/* A map beside its address. */
.site-map {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    align-items: center;
    gap: 2.5rem;
}

.site-map-address {
    display: flex;
    gap: .6rem;
    color: var(--site-ink);
    font-size: 17px;
}

.site-map-address i {
    margin-top: .3rem;
    color: var(--primary);
}

.site-map-frame {
    display: block;
    width: 100%;
    min-height: 380px;
    border: 0;
    border-radius: 14px;
}

@media (max-width: 991.98px) {
    .site-cta {
        flex-direction: column;
        align-items: flex-start;
        padding: 2rem 1.5rem;
    }

    .site-cta h2 {
        font-size: 26px;
    }

    .site-map {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------- 14. The page editor's preview */
/* The page drawn inside the editor (SitePageController::live): nothing moves, and the dashboard's script lays
   boxes over it: the section being edited, the one pointed at, the hidden ones. The page is drawn small, so the
   boxes' sizes are multiplied by --preview-ui (how much it is shrunk), set by the dashboard. */
html[data-preview] *,
html[data-preview] *::before,
html[data-preview] *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}

html[data-preview] {
    scrollbar-width: none;              /* a phone's width is a phone's width */
}

html[data-preview] .site-header {
    view-transition-name: none;
}

/* The frame is as tall as the room in the dashboard, not as a screen: what is measured against the window's
   height takes a usual screen's instead (--preview-vh, a hundredth of 768px on a computer, 844px on a phone). */
html[data-preview] .site {
    min-height: 0;
}

html[data-preview] .home-hero {
    min-height: calc(82 * var(--preview-vh, 1vh));
}

html[data-preview] .site-banner {
    max-height: calc(70 * var(--preview-vh, 1vh));
}

@media (max-width: 767.98px) {
    html[data-preview] .home-hero {
        min-height: calc(60 * var(--preview-vh, 1vh));
    }
}

html[data-preview] [data-preview-section] {
    cursor: pointer;
}

.site-preview-box {
    position: absolute;
    z-index: 2000;
    pointer-events: none;
    --ui: var(--preview-ui, 1);
}

.site-preview-hover {
    outline: calc(2px * var(--ui)) dashed var(--primary);
    outline-offset: calc(-2px * var(--ui));
}

.site-preview-active {
    outline: calc(4px * var(--ui)) solid var(--primary);
    outline-offset: calc(-4px * var(--ui));
}

.site-preview-hidden {
    background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .72) 0 calc(14px * var(--ui)), rgba(226, 232, 240, .72) calc(14px * var(--ui)) calc(28px * var(--ui)));
}

.site-preview-tag {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    padding: calc(6px * var(--ui)) calc(12px * var(--ui));
    border-end-end-radius: calc(10px * var(--ui));
    background: var(--primary);
    color: #fff;
    font-size: calc(13px * var(--ui));
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.site-preview-hidden .site-preview-tag {
    top: 50%;
    inset-inline-start: 50%;
    border-radius: calc(20px * var(--ui));
    background: #475569;
    transform: translate(-50%, -50%);
}

[dir="rtl"] .site-preview-hidden .site-preview-tag {
    transform: translate(50%, -50%);
}