/* ==========================================================================
   OUZO Institute — Public site styles
   Custom layer on top of Bootstrap 5. Values mirror the Figma frame
   "Placements Page" (1440px artboard).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
    /* Brand colours */
    --ouzo-navy: #00135f;
    --ouzo-red: #e20a17;
    --ouzo-red-dark: #c2080f;
    --ouzo-white: #ffffff;
    --ouzo-offwhite: #f5f5f5;
    --ouzo-ink: #000000;
    --ouzo-nav-link: #555555;
    --ouzo-header-border: #fcf9f8;
    --ouzo-social-bg: rgba(255, 255, 255, 0.31);

    /* Type families */
    --ouzo-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --ouzo-font-nav: "Roboto Mono", ui-monospace, "Courier New", monospace;
    --ouzo-font-display: "Roboto Condensed", "Arial Narrow", sans-serif;
    --ouzo-font-topbar: "Montserrat", system-ui, sans-serif;
    --ouzo-font-footer: Arial, Helvetica, sans-serif;

    /* Layout */
    --ouzo-shell-max: 1345px;   /* top bar + header inner width */
    --ouzo-content-max: 1243px; /* page content width */
    --ouzo-radius-card: 20px;
    --ouzo-radius-btn: 4px;

    /* Motion — matches the hover language used across our other sites:
       buttons lift 2px, cards lift 4px, card imagery scales 1.05. */
    --ouzo-transition: all 0.3s ease;
    --ouzo-transition-card: transform 0.2s ease, box-shadow 0.2s ease;
    --ouzo-lift-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
body {
    font-family: var(--ouzo-font-body);
    color: var(--ouzo-ink);
    background-color: var(--ouzo-white);
}

/* Two shared width shells. Bootstrap's own containers cap at 1320px, which is
   narrower than the Figma artboard, so we define our own. */
.ouzo-shell,
.ouzo-container {
    width: 100%;
    margin-inline: auto;
    padding-inline: 16px;
}

.ouzo-shell {
    max-width: var(--ouzo-shell-max);
}

.ouzo-container {
    max-width: calc(var(--ouzo-content-max) + 32px);
}

/* Sticky masthead — top bar + primary nav stick together as one unit so the
   utility bar doesn't leave an awkward gap when the header pins on scroll. */
.ouzo-masthead {
    position: sticky;
    top: 0;
    z-index: 1030;
}

/* --------------------------------------------------------------------------
   3. Top bar — Figma node 480:530 (50px tall, navy)
   -------------------------------------------------------------------------- */
.ouzo-topbar {
    background-color: var(--ouzo-navy);
    font-family: var(--ouzo-font-topbar);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.2;
    min-height: 50px;
}

.ouzo-topbar__address {
    color: var(--ouzo-offwhite);
}

.ouzo-topbar__link {
    color: var(--ouzo-white);
    text-decoration: none;
    transition: color 0.2s ease;
}

.ouzo-topbar__link:hover,
.ouzo-topbar__link:focus {
    color: var(--ouzo-offwhite);
}

.ouzo-topbar__icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
}

/* The phone glyph is mirrored on the Figma canvas (rotate 180 + flip Y). */
.ouzo-topbar__icon--phone {
    transform: scaleX(-1);
}

/* --------------------------------------------------------------------------
   4. Header / primary navigation — Figma node 480:544 (84px tall)
   -------------------------------------------------------------------------- */
.ouzo-header {
    display: flex;
    align-items: center;
    background-color: var(--ouzo-white);
    border-bottom: 1px solid var(--ouzo-header-border);
    min-height: 84px;
    padding-block: 0;
}

/* The asset is trimmed to the mark and sized close to its display height, so
   the height alone drives it — no cropping or heavy browser downscaling. */
.ouzo-header__logo {
    width: auto;
    height: 62px;
}

/* Zero the navbar's own padding so the taller mark still fits the 84px bar. */
.ouzo-header .navbar {
    padding-block: 0;
}

/* The collapse fills the row so the link list can centre itself between the
   logo and the Apply CTA. */
.ouzo-header .navbar-collapse {
    flex-grow: 1;
}

.ouzo-nav {
    column-gap: 25px;
    row-gap: 4px;
}

.ouzo-nav__link {
    font-family: var(--ouzo-font-nav);
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
    text-transform: uppercase;
    color: var(--ouzo-nav-link);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.ouzo-nav__link:hover,
.ouzo-nav__link:focus {
    color: var(--ouzo-red);
}

/* "Home" is set one step larger than its siblings in the design. */
.ouzo-nav__link--lead {
    font-size: 20px;
}

.ouzo-nav__link.is-active {
    font-weight: 500;
    color: var(--ouzo-red);
}

/* Primary call to action — 123x41, 4px radius, red fill. */
.ouzo-btn-apply {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 123px;
    padding: 10px;
    border: 0;
    border-radius: var(--ouzo-radius-btn);
    background-color: var(--ouzo-red);
    color: var(--ouzo-white);
    font-family: var(--ouzo-font-display);
    font-weight: 700;
    font-size: 18px;
    line-height: normal;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--ouzo-transition);
}

.ouzo-btn-apply:hover,
.ouzo-btn-apply:focus {
    background-color: var(--ouzo-red-dark);
    color: var(--ouzo-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(226, 10, 23, 0.3);
}

.ouzo-header .navbar-toggler {
    border-color: rgba(0, 0, 0, 0.12);
    padding: 6px 10px;
}

.ouzo-header .navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(226, 10, 23, 0.2);
}

/* --------------------------------------------------------------------------
   5. Shared page typography
   -------------------------------------------------------------------------- */
.ouzo-heading {
    font-family: var(--ouzo-font-body);
    font-weight: 700;
    font-size: 36px;
    line-height: 31px;
    color: var(--ouzo-ink);
    margin: 0;
}

.ouzo-heading__accent {
    color: var(--ouzo-red);
}

.ouzo-body-text {
    font-family: var(--ouzo-font-body);
    font-weight: 500;
    font-size: 24px;
    line-height: 31px;
    color: var(--ouzo-ink);
    text-align: justify;
    margin: 0;
}

/* --------------------------------------------------------------------------
   6. Intro rows — Figma node 487:587 (two alternating text / image rows)
   -------------------------------------------------------------------------- */
.ouzo-intro {
    padding-top: 74px;
}

.ouzo-intro__row + .ouzo-intro__row {
    margin-top: 60px;
}

.ouzo-intro__copy {
    display: flex;
    flex-direction: column;
    gap: 36px;
    max-width: 703px;
}

/* Navy plate, 505x345, 20px radius, clipping a square photo. */
.ouzo-media {
    position: relative;
    width: 100%;
    max-width: 505px;
    aspect-ratio: 505 / 345;
    border-radius: var(--ouzo-radius-card);
    background-color: var(--ouzo-navy);
    overflow: hidden;
    transition: var(--ouzo-transition-card);
}

.ouzo-media:hover {
    transform: translateY(-4px);
    box-shadow: var(--ouzo-lift-shadow);
}

.ouzo-media__img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    pointer-events: none;
    transition: transform 0.4s ease;
}

.ouzo-media:hover .ouzo-media__img {
    transform: scale(1.05);
}

/* First photo is pulled up 80px within its 345px frame (-80 / 345). */
.ouzo-media__img--offset-top {
    top: -23.188%;
}

/* --------------------------------------------------------------------------
   7. Support list — Figma node 513:40
   -------------------------------------------------------------------------- */
.ouzo-support {
    padding-top: 119px;
    padding-bottom: 109px;
}

.ouzo-support__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 36px 0 0;
    padding: 0;
    list-style: none;
}

.ouzo-support__item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.ouzo-support__icon {
    width: 37px;
    height: 37px;
    flex: 0 0 37px;
}

/* --------------------------------------------------------------------------
   8. Footer — Figma node 480:477 (navy, 427px tall)
   -------------------------------------------------------------------------- */
.ouzo-footer {
    background-color: var(--ouzo-navy);
    color: var(--ouzo-white);
    padding-top: 92px;
}

/* align-self stops the flex column from stretching the mark to the full
   column width, which would squash it out of proportion. */
.ouzo-footer__logo {
    width: auto;
    height: 59px;
    align-self: flex-start;
}

.ouzo-footer__brand {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 367px;
}

.ouzo-footer__tagline {
    font-family: var(--ouzo-font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0.16px;
    text-transform: capitalize;
    margin: 0;
}

/* Social pills — 40px circles at 31% white. */
.ouzo-social {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 2px;
}

.ouzo-social__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--ouzo-social-bg);
    /* The mark is an icon-font glyph, so Bootstrap's link underline applies. */
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.ouzo-social__link:hover,
.ouzo-social__link:focus {
    background-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

/* Brand marks sit a touch larger than the Figma placeholder glyph so the
   logos stay legible inside the 40px pill. */
.ouzo-social__icon {
    display: inline-flex;
    font-size: 18px;
    line-height: 1;
    color: var(--ouzo-white);
}

/* On the artboard the link columns sit 26px above the brand logo. */
@media (min-width: 992px) {
    .ouzo-footer__col {
        margin-top: -26px;
    }
}

.ouzo-footer__col-title {
    font-family: var(--ouzo-font-display);
    font-weight: 700;
    font-size: 22px;
    line-height: normal;
    letter-spacing: 0.44px;
    text-transform: uppercase;
    color: var(--ouzo-white);
    margin: 0 0 22px;
}

.ouzo-footer__links {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ouzo-footer__link {
    font-family: var(--ouzo-font-footer);
    font-size: 18px;
    line-height: normal;
    text-transform: capitalize;
    color: var(--ouzo-white);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.ouzo-footer__link:hover,
.ouzo-footer__link:focus {
    color: var(--ouzo-white);
    opacity: 0.75;
}

.ouzo-footer__contact {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ouzo-footer__contact-item {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--ouzo-font-footer);
    font-size: 18px;
    line-height: normal;
    color: var(--ouzo-white);
}

.ouzo-footer__contact-item--email {
    text-transform: lowercase;
}

.ouzo-footer__contact-icon {
    flex: 0 0 auto;
}

/* Hairline rule + copyright strip. The Figma vector is a 0.5px white line. */
.ouzo-footer__divider {
    margin: 79px 0 0;
    border: 0;
    border-top: 0.5px solid var(--ouzo-white);
    opacity: 1;
}

.ouzo-footer__copyright {
    font-family: var(--ouzo-font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    color: var(--ouzo-white);
    margin: 0;
    padding-block: 21px 26px;
}

/* --------------------------------------------------------------------------
   9. Responsive — Bootstrap breakpoints (xxl / xl / lg / md)
   -------------------------------------------------------------------------- */

/* Laptop: tighten the nav so all eight links still fit on one row. */
@media (max-width: 1399.98px) {
    .ouzo-nav {
        column-gap: 16px;
    }

    .ouzo-nav__link {
        font-size: 15px;
    }

    .ouzo-nav__link--lead {
        font-size: 16px;
    }

    .ouzo-btn-apply {
        min-width: 108px;
        font-size: 16px;
    }
}

/* Below xl the nav collapses behind the toggler. */
@media (max-width: 1199.98px) {
    .ouzo-header .navbar-collapse {
        flex-grow: 1;
        padding-block: 16px;
    }

    .ouzo-nav {
        flex-direction: column;
        align-items: flex-start;
        column-gap: 0;
        row-gap: 14px;
    }

    .ouzo-nav__link,
    .ouzo-nav__link--lead {
        font-size: 17px;
    }

    .ouzo-intro {
        padding-top: 56px;
    }

    .ouzo-support {
        padding-top: 88px;
        padding-bottom: 88px;
    }

    .ouzo-heading {
        font-size: 32px;
        line-height: 1.25;
    }

    .ouzo-body-text {
        font-size: 21px;
        line-height: 30px;
    }
}

/* Tablet and below: the two intro rows stack. */
@media (max-width: 991.98px) {
    .ouzo-topbar {
        font-size: 15px;
        padding-block: 10px;
    }

    .ouzo-media,
    .ouzo-intro__copy {
        max-width: none;
    }

    .ouzo-intro__row + .ouzo-intro__row {
        margin-top: 48px;
    }

    .ouzo-heading {
        font-size: 28px;
    }

    .ouzo-body-text {
        font-size: 18px;
        line-height: 28px;
    }

    .ouzo-support__list {
        margin-top: 28px;
    }

    .ouzo-support__item {
        align-items: flex-start;
    }

    .ouzo-support__icon {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
        margin-top: 2px;
    }

    .ouzo-footer {
        padding-top: 56px;
    }

    .ouzo-footer__divider {
        margin-top: 48px;
    }
}

@media (max-width: 767.98px) {
    .ouzo-topbar {
        font-size: 14px;
    }

    .ouzo-topbar__icon {
        width: 20px;
        height: 20px;
        flex-basis: 20px;
    }

    .ouzo-header__logo {
        height: 50px;
    }

    .ouzo-intro {
        padding-top: 40px;
    }

    .ouzo-intro__copy {
        gap: 24px;
    }

    .ouzo-support {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .ouzo-heading {
        font-size: 24px;
    }

    .ouzo-body-text {
        font-size: 16px;
        line-height: 26px;
        text-align: left;
    }

    .ouzo-footer__col-title {
        font-size: 20px;
        margin-bottom: 16px;
    }

    .ouzo-footer__link,
    .ouzo-footer__contact-item {
        font-size: 16px;
    }

    .ouzo-footer__copyright {
        font-size: 14px;
    }
}

/* ==========================================================================
   Contact page — Figma frame "Contact Page" (401:30)
   ========================================================================== */

/* --------------------------------------------------------------------------
   10. Contact-specific tokens
   -------------------------------------------------------------------------- */
:root {
    --ouzo-cream: #fdf8f2;
    --ouzo-muted: #8d8d8d;
    --ouzo-field-bg: #fdfcf9;
    --ouzo-field-border: #e2ded5;
    --ouzo-placeholder: #888888;
    --ouzo-card-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
    --ouzo-content-wide: 1290px;
}

/* Wider shell used by the contact page sections. */
.ouzo-container--wide {
    max-width: calc(var(--ouzo-content-wide) + 32px);
}

/* --------------------------------------------------------------------------
   11. Page banner — Figma 401:107
   -------------------------------------------------------------------------- */
.ouzo-page-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 333px;
    background-color: var(--ouzo-navy);
    overflow: hidden;
}

.ouzo-page-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 38%;
    opacity: 0.6;
    pointer-events: none;
}

.ouzo-page-hero__title {
    position: relative;
    margin: 0;
    font-family: var(--ouzo-font-body);
    font-weight: 800;
    font-size: 80px;
    line-height: 70px;
    color: var(--ouzo-white);
    text-align: center;
}

/* --------------------------------------------------------------------------
   12. Shared section furniture
   -------------------------------------------------------------------------- */

/* Small red kicker above a section title. */
.ouzo-eyebrow {
    margin: 0;
    font-family: var(--ouzo-font-footer);
    font-weight: 700;
    font-size: 20px;
    line-height: normal;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--ouzo-red);
}

.ouzo-section-title {
    margin: 0;
    font-family: var(--ouzo-font-body);
    font-weight: 800;
    font-size: 48px;
    line-height: 62px;
    color: var(--ouzo-ink);
}

.ouzo-section-lede {
    margin: 0;
    font-family: var(--ouzo-font-body);
    font-weight: 400;
    font-size: 20px;
    line-height: 34px;
    color: var(--ouzo-muted);
}

/* Cream band running behind the contact + campus sections. */
.ouzo-cream-band {
    background-color: var(--ouzo-cream);
}

/* --------------------------------------------------------------------------
   13. Contact section — Figma 457:80
   -------------------------------------------------------------------------- */
.ouzo-contact {
    padding-top: 83px;
}

.ouzo-contact__intro {
    display: flex;
    flex-direction: column;
    gap: 29px;
    margin-bottom: 63px;
}

.ouzo-contact__details {
    display: flex;
    flex-direction: column;
    gap: 42px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ouzo-contact__detail {
    display: flex;
    align-items: flex-start;
    gap: 32px;
}

.ouzo-contact__detail-icon {
    width: 57px;
    height: 57px;
    flex: 0 0 57px;
}

.ouzo-contact__detail-label {
    margin: 0 0 5px;
    font-family: var(--ouzo-font-footer);
    font-weight: 700;
    font-size: 20px;
    line-height: normal;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--ouzo-navy);
}

.ouzo-contact__detail-value {
    margin: 0;
    font-family: var(--ouzo-font-footer);
    font-size: 22px;
    line-height: 32px;
    color: var(--ouzo-nav-link);
    text-decoration: none;
}

a.ouzo-contact__detail-value:hover,
a.ouzo-contact__detail-value:focus {
    color: var(--ouzo-red);
}

/* Follow Us block */
.ouzo-follow {
    margin-top: 95px;
}

/* Deliberately quieter than a section title — this block sits below the
   contact details rather than competing with them. */
.ouzo-follow__title {
    margin: 0 0 20px;
    font-family: var(--ouzo-font-body);
    font-weight: 600;
    font-size: 32px;
    line-height: 1.3;
    color: var(--ouzo-ink);
}

.ouzo-follow__list {
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ouzo-follow__link {
    display: inline-flex;
    color: var(--ouzo-nav-link);
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
}

.ouzo-follow__icon {
    font-size: 28px;
    line-height: 1;
}

.ouzo-follow__link:hover,
.ouzo-follow__link:focus {
    color: var(--ouzo-red);
    transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   14. Enquiry form card — Figma 414:333
   -------------------------------------------------------------------------- */
.ouzo-form-card {
    max-width: 725px;
    padding: 53px 35px 35px;
    background-color: var(--ouzo-white);
    box-shadow: var(--ouzo-card-shadow);
}

.ouzo-form-card__title {
    margin: 0 0 5px;
    font-family: var(--ouzo-font-body);
    font-weight: 800;
    font-size: 34px;
    line-height: 54px;
    color: var(--ouzo-ink);
}

.ouzo-form-card__lede {
    margin: 0 0 32px;
    font-family: var(--ouzo-font-body);
    font-weight: 400;
    font-size: 20px;
    line-height: 34px;
    color: var(--ouzo-muted);
}

.ouzo-form .form-label {
    margin-bottom: 5px;
    font-family: var(--ouzo-font-body);
    font-weight: 600;
    font-size: 20px;
    line-height: 34px;
    color: var(--ouzo-ink);
}

.ouzo-form .form-control,
.ouzo-form .form-select {
    height: 49px;
    padding: 0 16px;
    border: 1px solid var(--ouzo-field-border);
    border-radius: 1px;
    background-color: var(--ouzo-field-bg);
    font-family: var(--ouzo-font-body);
    font-size: 16px;
    color: var(--ouzo-ink);
    box-shadow: none;
}

.ouzo-form .form-select {
    font-size: 14px;
    background-image: url("../images/icon-chevron-down.svg");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 14px 14px;
}

.ouzo-form textarea.form-control {
    height: 135px;
    padding: 12px 16px;
    resize: vertical;
}

.ouzo-form .form-control:focus,
.ouzo-form .form-select:focus {
    border-color: var(--ouzo-navy);
    background-color: var(--ouzo-field-bg);
    box-shadow: 0 0 0 0.15rem rgba(0, 19, 95, 0.12);
}

.ouzo-form .form-control::placeholder {
    color: var(--ouzo-placeholder);
}

.ouzo-form option[disabled] {
    color: var(--ouzo-placeholder);
}

/* Honeypot field — parked off-screen rather than display:none, which some
   bots know to skip. */
.ouzo-form__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.ouzo-form__submit {
    width: 100%;
    height: 46px;
    margin-top: 55px;
    border: 0;
    border-radius: 2px;
    background-color: var(--ouzo-red);
    color: var(--ouzo-white);
    font-family: var(--ouzo-font-display);
    font-weight: 700;
    font-size: 18px;
    line-height: normal;
    text-transform: uppercase;
    transition: var(--ouzo-transition);
}

.ouzo-form__submit:hover,
.ouzo-form__submit:focus {
    background-color: var(--ouzo-red-dark);
    color: var(--ouzo-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(226, 10, 23, 0.3);
}

/* --------------------------------------------------------------------------
   15. Campus cards — Figma 414:330
   -------------------------------------------------------------------------- */
.ouzo-campus {
    padding-top: 99px;
    padding-bottom: 87px;
}

.ouzo-campus__intro {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 821px;
}

.ouzo-campus__lede {
    max-width: 1113px;
    margin-top: 14px;
    margin-bottom: 37px;
}

.ouzo-campus-card {
    position: relative;
    height: 100%;
    background-color: var(--ouzo-white);
    box-shadow: var(--ouzo-card-shadow);
    overflow: hidden;
    transition: var(--ouzo-transition-card);
}

.ouzo-campus-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.ouzo-campus-card__map {
    display: block;
    width: 100%;
    height: 305px;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.ouzo-campus-card:hover .ouzo-campus-card__map {
    transform: scale(1.05);
}

.ouzo-campus-card__body {
    padding: 16px 30px 29px;
}

.ouzo-campus-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 9px;
}

.ouzo-campus-card__title {
    margin: 0;
    font-family: var(--ouzo-font-body);
    font-weight: 800;
    font-size: 22px;
    line-height: 35px;
    color: var(--ouzo-ink);
}

.ouzo-campus-card__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ouzo-campus-card__item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--ouzo-font-footer);
    font-size: 16px;
    line-height: 32px;
    color: var(--ouzo-nav-link);
}

.ouzo-campus-card__icon {
    flex: 0 0 auto;
}

.ouzo-campus-card__link {
    color: inherit;
    text-decoration: none;
}

.ouzo-campus-card__link:hover,
.ouzo-campus-card__link:focus {
    color: var(--ouzo-red);
}

/* "Get directions" uses the same red button, one size wider (165px). */
.ouzo-btn-apply--wide {
    min-width: 165px;
}

/* Decorative map zoom widget riding on the static map image. */
.ouzo-campus-card__zoom {
    position: absolute;
    top: 0;
    right: 0;
    width: 21px;
    height: 47px;
    display: flex;
    flex-direction: column;
    background-color: var(--ouzo-white);
    border-radius: 2px;
    font-family: var(--ouzo-font-footer);
    color: var(--ouzo-nav-link);
    text-align: center;
    user-select: none;
}

.ouzo-campus-card__zoom span {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
}

.ouzo-campus-card__zoom span:first-child {
    border-bottom: 0.5px solid var(--ouzo-field-border);
}

/* --------------------------------------------------------------------------
   16. Contact page responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .ouzo-page-hero {
        height: 260px;
    }

    .ouzo-page-hero__title {
        font-size: 60px;
        line-height: 1.1;
    }

    .ouzo-section-title {
        font-size: 38px;
        line-height: 1.25;
    }

    .ouzo-contact {
        padding-top: 60px;
    }

    .ouzo-campus {
        padding-top: 72px;
        padding-bottom: 72px;
    }

    .ouzo-follow {
        margin-top: 64px;
    }
}

@media (max-width: 991.98px) {
    .ouzo-page-hero {
        height: 210px;
    }

    .ouzo-page-hero__title {
        font-size: 46px;
    }

    .ouzo-section-title {
        font-size: 32px;
    }

    .ouzo-follow__title {
        font-size: 28px;
    }

    .ouzo-contact__intro {
        gap: 20px;
        margin-bottom: 40px;
    }

    .ouzo-contact__details {
        gap: 30px;
    }

    .ouzo-contact__detail {
        gap: 20px;
    }

    .ouzo-contact__detail-icon {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }

    .ouzo-contact__detail-value {
        font-size: 18px;
        line-height: 28px;
    }

    .ouzo-form-card {
        max-width: none;
        padding: 32px 24px;
    }

    .ouzo-form-card__title {
        font-size: 28px;
        line-height: 40px;
    }

    .ouzo-form-card__lede,
    .ouzo-section-lede {
        font-size: 17px;
        line-height: 28px;
    }

    .ouzo-form .form-label {
        font-size: 17px;
        line-height: 28px;
    }

    .ouzo-form__submit {
        margin-top: 32px;
    }

    .ouzo-campus__lede {
        margin-bottom: 28px;
    }
}

@media (max-width: 767.98px) {
    .ouzo-page-hero {
        height: 170px;
    }

    .ouzo-page-hero__title {
        font-size: 34px;
    }

    .ouzo-section-title {
        font-size: 26px;
    }

    .ouzo-follow__title {
        font-size: 24px;
    }

    .ouzo-eyebrow {
        font-size: 16px;
    }

    .ouzo-follow__list {
        gap: 20px;
    }

    .ouzo-follow__icon {
        font-size: 24px;
    }

    .ouzo-campus-card__map {
        height: 220px;
    }

    .ouzo-campus-card__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .ouzo-campus-card__title {
        font-size: 19px;
        line-height: 28px;
    }
}

/* --------------------------------------------------------------------------
   17. Respect a reduced-motion preference
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .ouzo-btn-apply,
    .ouzo-form__submit,
    .ouzo-media,
    .ouzo-media__img,
    .ouzo-campus-card,
    .ouzo-campus-card__map,
    .ouzo-social__link,
    .ouzo-follow__link {
        transition: none;
    }

    .ouzo-btn-apply:hover,
    .ouzo-btn-apply:focus,
    .ouzo-form__submit:hover,
    .ouzo-form__submit:focus,
    .ouzo-media:hover,
    .ouzo-media:hover .ouzo-media__img,
    .ouzo-campus-card:hover,
    .ouzo-campus-card:hover .ouzo-campus-card__map,
    .ouzo-social__link:hover,
    .ouzo-follow__link:hover {
        transform: none;
    }
}

/* ==========================================================================
   Courses page — Figma frame "Courses Page" (354:119)
   ========================================================================== */

/* --------------------------------------------------------------------------
   18. Courses tokens
   -------------------------------------------------------------------------- */
:root {
    --ouzo-bg-alt: #fafafa;
    --ouzo-card-tint: #ffe6e8;
    --ouzo-tag-bg: #d9d9d9;
    --ouzo-hairline: #f3f0e9;
    --ouzo-soft-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12);
    --ouzo-content-xwide: 1353px;
}

.ouzo-container--xwide {
    max-width: calc(var(--ouzo-content-xwide) + 32px);
}

/* Neutral band behind the courses grid. */
.ouzo-alt-band {
    background-color: var(--ouzo-bg-alt);
}

/* --------------------------------------------------------------------------
   19. Courses banner — Figma 399:3
   Same shell as the contact banner, but the wordmark is red on a photo.
   -------------------------------------------------------------------------- */
.ouzo-page-hero__title--accent {
    color: var(--ouzo-red);
    font-size: 64px;
    line-height: 53px;
}

/* --------------------------------------------------------------------------
   20. Course cards — Figma 537:9
   Outer 670x541 tinted frame holding a 638x505 white card.
   -------------------------------------------------------------------------- */
.ouzo-courses {
    padding-top: 65px;
    padding-bottom: 57px;
}

.ouzo-course-card {
    height: 100%;
    padding: 18px 16px;
    background-color: var(--ouzo-bg-alt);
    box-shadow: var(--ouzo-soft-shadow);
    transition: var(--ouzo-transition-card);
}

.ouzo-course-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
}

.ouzo-course-card__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--ouzo-white);
    box-shadow: var(--ouzo-soft-shadow);
    overflow: hidden;
}

/* Photo band with the darkening gradient and overlaid titling. */
.ouzo-course-card__media {
    position: relative;
    height: 220px;
    flex: 0 0 220px;
    background-color: var(--ouzo-card-tint);
    overflow: hidden;
}

.ouzo-course-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.ouzo-course-card:hover .ouzo-course-card__img {
    transform: scale(1.05);
}

.ouzo-course-card__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(49, 87, 166, 0) 0%,
        rgba(49, 87, 166, 0.36) 65.4%,
        rgba(36, 63, 131, 0.74) 100%
    );
    pointer-events: none;
}

.ouzo-course-card__flag {
    position: absolute;
    top: 13px;
    right: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 126px;
    height: 24px;
    padding-inline: 10px;
    background-color: var(--ouzo-red);
    font-family: var(--ouzo-font-footer);
    font-weight: 900;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.48px;
    color: var(--ouzo-white);
}

/* Title row sits on the gradient, badge and wordmark share a centre line. */
.ouzo-course-card__heading {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 11px;
    display: flex;
    align-items: center;
    gap: 17px;
}

.ouzo-course-card__badge {
    flex: 0 0 49px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 49px;
    height: 48px;
    background-color: var(--ouzo-white);
    border-radius: 1px;
}

.ouzo-course-card__badge img {
    width: 29px;
    height: 20px;
}

.ouzo-course-card__title {
    max-width: 221px;
    margin: 0;
    font-family: var(--ouzo-font-body);
    font-weight: 900;
    font-size: 24px;
    line-height: normal;
    color: var(--ouzo-white);
}

/* Card body */
.ouzo-course-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 23px 12px 36px;
}

.ouzo-course-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 38px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ouzo-course-card__meta li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ouzo-font-footer);
    font-size: 18px;
    line-height: normal;
    color: var(--ouzo-muted);
}

.ouzo-course-card__meta img {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

.ouzo-course-card__desc {
    max-width: 601px;
    margin: 19px 0 0;
    font-family: var(--ouzo-font-footer);
    font-size: 18px;
    line-height: 28px;
    color: var(--ouzo-muted);
}

.ouzo-course-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 19px 0 0;
    padding: 0;
    list-style: none;
}

/* 142x28 is the Figma chip, but real module names vary in length — so those
   are floors, not fixed sizes, and a long label grows instead of spilling. */
.ouzo-course-card__tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 142px;
    max-width: 100%;
    min-height: 28px;
    padding: 3px 12px;
    background-color: var(--ouzo-tag-bg);
    font-family: var(--ouzo-font-footer);
    font-weight: 700;
    font-size: 14px;
    line-height: 22px;
    color: var(--ouzo-navy);
    text-align: center;
    overflow-wrap: anywhere;
}

/* Text link with a trailing arrow, pinned to the foot of the card. */
.ouzo-course-card__link {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    margin-top: 27px;
    font-family: var(--ouzo-font-footer);
    font-weight: 700;
    font-size: 14px;
    line-height: normal;
    letter-spacing: 0.56px;
    text-transform: uppercase;
    color: var(--ouzo-red);
    text-decoration: none;
    transition: gap 0.2s ease, color 0.2s ease;
}

.ouzo-course-card__link:hover,
.ouzo-course-card__link:focus {
    gap: 14px;
    color: var(--ouzo-red-dark);
}

/* Both arrow assets are drawn pointing up; the design turns them right. */
.ouzo-arrow-right {
    transform: rotate(90deg);
}

/* --------------------------------------------------------------------------
   21. Counselling prompt — Figma 396:23
   -------------------------------------------------------------------------- */
.ouzo-prompt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 165px;
    padding: 24px 46px;
    background-color: var(--ouzo-white);
    border: 1px solid var(--ouzo-hairline);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
}

.ouzo-prompt__copy {
    max-width: 778px;
}

.ouzo-prompt__title {
    margin: 0 0 8px;
    font-family: var(--ouzo-font-body);
    font-weight: 800;
    font-size: 34px;
    line-height: 54px;
    color: var(--ouzo-ink);
}

.ouzo-prompt__lede {
    margin: 0;
    font-family: var(--ouzo-font-body);
    font-weight: 300;
    font-size: 20px;
    line-height: 30px;
    color: var(--ouzo-nav-link);
}

/* Wider sibling of the red button, with a trailing arrow. */
.ouzo-btn-apply--xl {
    min-width: 334px;
    height: 54px;
    gap: 10px;
}

.ouzo-prompt-spacer {
    height: 62px;
    background-color: var(--ouzo-bg-alt);
}

/* --------------------------------------------------------------------------
   22. Courses page responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1399.98px) {
    .ouzo-course-card__tag {
        min-width: 130px;
    }
}

@media (max-width: 1199.98px) {
    .ouzo-page-hero__title--accent {
        font-size: 48px;
        line-height: 1.1;
    }

    .ouzo-courses {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .ouzo-prompt {
        padding: 24px 32px;
    }

    .ouzo-prompt__title {
        font-size: 28px;
        line-height: 40px;
    }

    .ouzo-prompt__lede {
        font-size: 18px;
        line-height: 28px;
    }

    .ouzo-btn-apply--xl {
        min-width: 280px;
    }
}

@media (max-width: 991.98px) {
    .ouzo-page-hero__title--accent {
        font-size: 40px;
    }

    .ouzo-course-card__title {
        font-size: 21px;
    }

    .ouzo-course-card__desc,
    .ouzo-course-card__meta li {
        font-size: 16px;
    }

    .ouzo-prompt {
        justify-content: flex-start;
    }
}

@media (max-width: 767.98px) {
    .ouzo-page-hero__title--accent {
        font-size: 32px;
    }

    .ouzo-course-card {
        padding: 12px;
    }

    .ouzo-course-card__media {
        height: 190px;
        flex-basis: 190px;
    }

    .ouzo-course-card__heading {
        left: 14px;
        right: 14px;
        gap: 12px;
    }

    .ouzo-course-card__badge {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
    }

    .ouzo-course-card__title {
        font-size: 18px;
    }

    .ouzo-course-card__body {
        padding: 18px 12px 24px;
    }

    .ouzo-course-card__meta {
        gap: 20px;
    }

    .ouzo-course-card__tag {
        min-width: 0;
        font-size: 13px;
    }

    .ouzo-prompt {
        padding: 24px 20px;
    }

    .ouzo-prompt__title {
        font-size: 23px;
        line-height: 32px;
    }

    .ouzo-btn-apply--xl {
        min-width: 100%;
        font-size: 15px;
    }
}

/* ==========================================================================
   Gallery page — Figma frame "Gallery Page" (384:383)
   ========================================================================== */

/* --------------------------------------------------------------------------
   23. Banner variants
   Each page crops its banner photo differently and sets its own veil, so the
   shared hero takes modifiers rather than one hard-coded treatment.
   -------------------------------------------------------------------------- */

/* Courses — opaque photo, no navy veil (Figma 399:3). */
.ouzo-page-hero--courses .ouzo-page-hero__img {
    opacity: 1;
    object-position: center 13%;
}

/* Gallery — photo at 80% over a 60% navy wash (Figma 384:494). The crop lands
   on the brigade's faces and keeps the centre clear for the wordmark. */
.ouzo-page-hero--gallery {
    background-color: rgba(0, 19, 95, 0.6);
}

.ouzo-page-hero--gallery .ouzo-page-hero__img {
    opacity: 0.8;
    object-position: center 24%;
}

/* --------------------------------------------------------------------------
   24. Gallery grid — Figma 384:462
   -------------------------------------------------------------------------- */
:root {
    --ouzo-content-gallery: 1338px;
}

.ouzo-container--gallery {
    max-width: calc(var(--ouzo-content-gallery) + 32px);
}

.ouzo-gallery {
    padding-top: 81px;
    padding-bottom: 71px;
}

/* One photo tile: cropped image, gradient veil, caption bottom-left. */
.ouzo-tile {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 317 / 225;
    margin: 0;
    background-color: var(--ouzo-card-tint);
    overflow: hidden;
    transition: var(--ouzo-transition-card);
}

.ouzo-tile--tall {
    aspect-ratio: 668 / 472;
}

.ouzo-tile--wide {
    aspect-ratio: 655 / 225;
}

.ouzo-tile:hover {
    transform: translateY(-4px);
    box-shadow: var(--ouzo-lift-shadow);
}

.ouzo-tile__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.ouzo-tile:hover .ouzo-tile__img {
    transform: scale(1.05);
}

/* Crops carried over from the Figma placement of each photo. */
.ouzo-tile__img--top    { object-position: center 0; }
.ouzo-tile__img--low    { object-position: center 14%; }
.ouzo-tile__img--mid    { object-position: center 37%; }
.ouzo-tile__img--centre { object-position: center 50%; }
.ouzo-tile__img--wide   { object-position: 33% center; }

.ouzo-tile__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(49, 87, 166, 0) 0%,
        rgba(49, 87, 166, 0.31) 65.4%,
        rgba(36, 63, 131, 0.61) 100%
    );
    pointer-events: none;
}

/* The two full-width tiles carry a lighter veil in the design. */
.ouzo-tile__scrim--soft {
    background: linear-gradient(
        180deg,
        rgba(49, 87, 166, 0) 0%,
        rgba(49, 87, 166, 0.22) 65.4%,
        rgba(36, 63, 131, 0.4) 100%
    );
}

.ouzo-tile__caption {
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 10px;
    margin: 0;
    font-family: var(--ouzo-font-body);
    font-weight: 700;
    font-size: 14px;
    line-height: normal;
    color: var(--ouzo-white);
}

.ouzo-tile--tall .ouzo-tile__caption {
    left: 25px;
    bottom: 13px;
}

/* --------------------------------------------------------------------------
   25. Gallery responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .ouzo-gallery {
        padding-top: 56px;
        padding-bottom: 56px;
    }
}

@media (max-width: 767.98px) {
    .ouzo-gallery {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    /* Stacked on phones, so the tall tile no longer needs to carry a column. */
    .ouzo-tile--tall {
        aspect-ratio: 4 / 3;
    }

    .ouzo-tile--wide {
        aspect-ratio: 16 / 9;
    }

    .ouzo-tile__caption,
    .ouzo-tile--tall .ouzo-tile__caption {
        left: 12px;
        right: 12px;
        bottom: 8px;
        font-size: 13px;
    }
}

/* ==========================================================================
   Industry partners page — Figma frame "Industry partners Page" (475:158)
   ========================================================================== */

/* --------------------------------------------------------------------------
   26. Industry partners — Figma 478:467
   -------------------------------------------------------------------------- */
:root {
    --ouzo-content-narrow: 1020px;
}

.ouzo-container--narrow {
    max-width: calc(var(--ouzo-content-narrow) + 32px);
}

.ouzo-partners {
    padding-top: 48px;
}

.ouzo-partners__title {
    margin: 0;
    font-family: var(--ouzo-font-body);
    font-weight: 700;
    font-size: 40px;
    line-height: normal;
    text-transform: uppercase;
    text-align: center;
    color: var(--ouzo-ink);
}

.ouzo-partners__lede {
    max-width: 1020px;
    margin: 30px auto 0;
    font-family: var(--ouzo-font-body);
    font-weight: 500;
    font-size: 20px;
    line-height: 26px;
    text-align: center;
    color: var(--ouzo-ink);
}

.ouzo-partners__grid {
    margin-top: 62px;
    padding-bottom: 84px;
}

/* One partner cell — carries a logo once supplied, the name until then. */
.ouzo-partner {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 132px;
    padding: 20px;
    background-color: var(--ouzo-white);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 19, 95, 0.08);
    text-decoration: none;
    transition: var(--ouzo-transition-card);
}

.ouzo-partner:hover,
.ouzo-partner:focus {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 19, 95, 0.14);
}

.ouzo-partner__logo {
    max-width: 100%;
    max-height: 68px;
    object-fit: contain;
}

.ouzo-partner__name {
    margin: 0;
    font-family: var(--ouzo-font-body);
    font-weight: 600;
    font-size: 17px;
    line-height: 24px;
    text-align: center;
    color: var(--ouzo-navy);
}

/* --------------------------------------------------------------------------
   27. Industry partners responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .ouzo-partners__title {
        font-size: 32px;
    }

    .ouzo-partners__lede {
        margin-top: 22px;
        font-size: 17px;
        line-height: 26px;
    }

    .ouzo-partners__grid {
        margin-top: 44px;
        padding-bottom: 64px;
    }

    .ouzo-partner {
        min-height: 112px;
        padding: 16px;
    }

    .ouzo-partner__name {
        font-size: 15px;
        line-height: 21px;
    }
}

@media (max-width: 767.98px) {
    .ouzo-partners {
        padding-top: 32px;
    }

    .ouzo-partners__title {
        font-size: 26px;
    }

    .ouzo-partners__lede {
        font-size: 16px;
        line-height: 24px;
    }

    .ouzo-partners__grid {
        margin-top: 32px;
        padding-bottom: 48px;
    }

    .ouzo-partner {
        min-height: 96px;
    }

    .ouzo-partner__name {
        font-size: 14px;
        line-height: 20px;
    }
}

/* ==========================================================================
   About Us page — Figma frame "About US Page" (296:614)
   ========================================================================== */

/* --------------------------------------------------------------------------
   28. About tokens
   -------------------------------------------------------------------------- */
:root {
    --ouzo-bg-warm: #fffefd;
}

.ouzo-warm-band {
    background-color: var(--ouzo-bg-warm);
}

/* --------------------------------------------------------------------------
   29. About banner — Figma 301:694 / 301:766
   Full-bleed photo with the intro copy sitting over its left half.
   -------------------------------------------------------------------------- */
/* 721px is what the banner photo measures at 1441px wide. The painted splatter
   edge is the bottom ~95px of it, so it lands exactly where the banner ends and
   the "Be Skilled Be Employed" section begins. */
.ouzo-about-hero {
    position: relative;
    min-height: 721px;
    padding-top: 108px;
    padding-bottom: 48px;
    overflow: hidden;
}

/* Anchored to the bottom: the splatter edge is painted into the photo, so any
   cover-cropping has to come off the top or that edge gets clipped on wide
   screens. */
.ouzo-about-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    pointer-events: none;
}

.ouzo-about-hero__copy {
    position: relative;
    max-width: 634px;
}

.ouzo-about-hero__title {
    margin: 0 0 30px;
    font-family: var(--ouzo-font-body);
    font-weight: 700;
    font-size: 64px;
    line-height: normal;
    text-transform: uppercase;
    color: var(--ouzo-white);
}

.ouzo-about-hero__text {
    margin: 0;
    font-family: var(--ouzo-font-footer);
    font-size: 22px;
    line-height: 31px;
    text-align: justify;
    color: var(--ouzo-white);
}

/* --------------------------------------------------------------------------
   30. Feature rows — Figma 317:46
   -------------------------------------------------------------------------- */
.ouzo-features {
    padding-top: 37px;
    padding-bottom: 141px;
}

.ouzo-features__row + .ouzo-features__row {
    margin-top: 80px;
}

.ouzo-feature__media {
    width: 100%;
    max-width: 464px;
    aspect-ratio: 464 / 501;
    border-radius: 5px;
    overflow: hidden;
}

.ouzo-feature__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.ouzo-feature__media:hover img {
    transform: scale(1.05);
}

.ouzo-feature__copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    max-width: 675px;
    text-align: center;
}

.ouzo-feature__title {
    margin: 0 0 24px;
    font-family: var(--ouzo-font-body);
    font-weight: 700;
    font-size: 40px;
    line-height: normal;
    text-transform: uppercase;
    color: var(--ouzo-ink);
}

.ouzo-feature__text {
    margin: 0;
    font-family: var(--ouzo-font-footer);
    font-size: 18px;
    line-height: 26px;
    color: var(--ouzo-ink);
}

/* Wider, rounder sibling of the red button — 206x50, sentence case. */
.ouzo-btn-know {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 206px;
    height: 50px;
    padding-inline: 20px;
    border: 0;
    border-radius: 5px;
    background-color: var(--ouzo-red);
    color: var(--ouzo-white);
    font-family: var(--ouzo-font-body);
    font-weight: 700;
    font-size: 22px;
    line-height: normal;
    text-transform: capitalize;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--ouzo-transition);
}

.ouzo-btn-know:hover,
.ouzo-btn-know:focus {
    background-color: var(--ouzo-red-dark);
    color: var(--ouzo-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(226, 10, 23, 0.3);
}

/* --------------------------------------------------------------------------
   31. Director band — Figma 317:27
   A dark full-bleed panel whose top and bottom edges are swoosh cut-outs that
   overhang into the surrounding cream, so this wrapper must not clip.
   -------------------------------------------------------------------------- */
.ouzo-director {
    position: relative;
    margin-bottom: 121px;
}

.ouzo-director__inner {
    position: relative;
    min-height: 573px;
    padding-block: 111px 60px;
    overflow: hidden;
}

.ouzo-director__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 39%;
    pointer-events: none;
}

.ouzo-director__wave {
    position: absolute;
    left: 0;
    width: 100%;
    height: 66px;
    display: block;
    pointer-events: none;
}

.ouzo-director__wave--top {
    top: -49px;
}

.ouzo-director__wave--bottom {
    bottom: -54px;
    transform: scaleY(-1);
}

.ouzo-director__copy {
    position: relative;
    max-width: 570px;
}

.ouzo-director__name {
    margin: 0 0 27px;
    font-family: "Roboto", var(--ouzo-font-body);
    font-weight: 700;
    font-size: 62px;
    line-height: 0.92;
    text-align: center;
    text-transform: capitalize;
    color: var(--ouzo-white);
}

.ouzo-director__role {
    margin: 0 0 27px;
    font-family: var(--ouzo-font-body);
    font-weight: 700;
    font-size: 24px;
    line-height: normal;
    text-align: center;
    text-transform: uppercase;
    color: var(--ouzo-red);
}

/* Pull-quote marker: the glyph plus a red corner bracket. */
.ouzo-director__quote {
    position: relative;
    padding-left: 46px;
}

.ouzo-director__quote-mark {
    position: absolute;
    left: 0;
    top: -6px;
    width: 36px;
    height: 23px;
}

.ouzo-director__quote::before,
.ouzo-director__quote::after {
    content: "";
    position: absolute;
    background-color: var(--ouzo-red);
    border-radius: 20px;
}

.ouzo-director__quote::before {
    left: 44px;
    top: -15px;
    width: 53px;
    height: 2px;
}

.ouzo-director__quote::after {
    left: 30px;
    top: 20px;
    width: 2px;
    height: 44px;
}

.ouzo-director__text {
    margin: 0;
    font-family: var(--ouzo-font-footer);
    font-size: 18px;
    line-height: 24px;
    text-align: justify;
    text-transform: capitalize;
    color: var(--ouzo-white);
}

/* --------------------------------------------------------------------------
   32. About responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .ouzo-about-hero {
        min-height: 560px;
        padding-top: 72px;
    }

    .ouzo-about-hero__title {
        font-size: 48px;
        margin-bottom: 22px;
    }

    .ouzo-about-hero__text {
        font-size: 18px;
        line-height: 28px;
    }

    .ouzo-feature__title {
        font-size: 32px;
    }

    .ouzo-features {
        padding-bottom: 110px;
    }

    .ouzo-director__name {
        font-size: 48px;
    }
}

@media (max-width: 991.98px) {
    .ouzo-about-hero {
        min-height: 460px;
        padding-top: 56px;
    }

    .ouzo-about-hero__title {
        font-size: 38px;
    }

    .ouzo-about-hero__text {
        font-size: 16px;
        line-height: 26px;
    }

    .ouzo-features {
        padding-top: 48px;
        padding-bottom: 90px;
    }

    .ouzo-features__row + .ouzo-features__row {
        margin-top: 56px;
    }

    .ouzo-feature__media {
        max-width: none;
    }

    .ouzo-feature__copy {
        max-width: none;
        gap: 28px;
    }

    .ouzo-feature__title {
        font-size: 28px;
        margin-bottom: 16px;
    }

    .ouzo-director__inner {
        padding-block: 72px 56px;
    }

    .ouzo-director__copy {
        max-width: none;
    }

    .ouzo-director__name {
        font-size: 40px;
    }

    .ouzo-director {
        margin-bottom: 90px;
    }
}

@media (max-width: 767.98px) {
    .ouzo-about-hero {
        min-height: 400px;
        padding-top: 40px;
        padding-bottom: 32px;
    }

    .ouzo-about-hero__title {
        font-size: 30px;
    }

    .ouzo-about-hero__text {
        font-size: 15px;
        line-height: 24px;
        text-align: left;
    }

    .ouzo-feature__title {
        font-size: 23px;
    }

    .ouzo-feature__text {
        font-size: 16px;
    }

    .ouzo-btn-know {
        min-width: 176px;
        height: 46px;
        font-size: 18px;
    }

    .ouzo-director__wave--top {
        top: -28px;
    }

    .ouzo-director__wave--bottom {
        bottom: -32px;
    }

    .ouzo-director__wave {
        height: 40px;
    }

    .ouzo-director__name {
        font-size: 32px;
    }

    .ouzo-director__role {
        font-size: 20px;
    }

    .ouzo-director__text {
        font-size: 15px;
        text-align: left;
    }

    .ouzo-director {
        margin-bottom: 64px;
    }
}

/* ==========================================================================
   Course detail page
   ========================================================================== */

/* --------------------------------------------------------------------------
   33. Course detail
   -------------------------------------------------------------------------- */
.ouzo-course-detail {
    padding-top: 56px;
    padding-bottom: 72px;
}

.ouzo-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
    font-family: var(--ouzo-font-body);
    font-size: 15px;
    color: var(--ouzo-muted);
}

.ouzo-breadcrumb a {
    color: var(--ouzo-red);
    text-decoration: none;
}

.ouzo-breadcrumb a:hover,
.ouzo-breadcrumb a:focus {
    text-decoration: underline;
}

.ouzo-course-detail__lede {
    margin: 0 0 28px;
    font-family: var(--ouzo-font-body);
    font-weight: 500;
    font-size: 21px;
    line-height: 32px;
    color: var(--ouzo-ink);
}

/* Free-form HTML from the admin editor — styled generically. */
.ouzo-prose {
    font-family: var(--ouzo-font-footer);
    font-size: 18px;
    line-height: 30px;
    color: var(--ouzo-nav-link);
}

.ouzo-prose > :first-child { margin-top: 0; }
.ouzo-prose > :last-child  { margin-bottom: 0; }

.ouzo-prose h2,
.ouzo-prose h3,
.ouzo-prose h4 {
    margin: 32px 0 12px;
    font-family: var(--ouzo-font-body);
    font-weight: 700;
    color: var(--ouzo-ink);
}

.ouzo-prose h2 { font-size: 28px; line-height: 36px; }
.ouzo-prose h3 { font-size: 22px; line-height: 30px; }
.ouzo-prose h4 { font-size: 19px; line-height: 27px; }

.ouzo-prose p,
.ouzo-prose ul,
.ouzo-prose ol {
    margin: 0 0 18px;
}

.ouzo-prose ul,
.ouzo-prose ol {
    padding-left: 22px;
}

.ouzo-prose li {
    margin-bottom: 8px;
}

.ouzo-prose a {
    color: var(--ouzo-red);
}

.ouzo-prose blockquote {
    margin: 24px 0;
    padding: 4px 0 4px 20px;
    border-left: 3px solid var(--ouzo-red);
    color: var(--ouzo-ink);
}

.ouzo-prose img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

/* At-a-glance sidebar */
.ouzo-course-facts {
    position: relative;
    padding: 28px;
    background-color: var(--ouzo-white);
    border-radius: 6px;
    box-shadow: var(--ouzo-soft-shadow);
}

.ouzo-course-facts__badge {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding-inline: 10px;
    margin-bottom: 14px;
    background-color: var(--ouzo-red);
    font-family: var(--ouzo-font-footer);
    font-weight: 900;
    font-size: 12px;
    letter-spacing: 0.48px;
    text-transform: uppercase;
    color: var(--ouzo-white);
}

.ouzo-course-facts__title {
    margin: 0 0 18px;
    font-family: var(--ouzo-font-body);
    font-weight: 800;
    font-size: 22px;
    line-height: 30px;
    color: var(--ouzo-ink);
}

.ouzo-course-facts__subtitle {
    margin: 26px 0 12px;
    font-family: var(--ouzo-font-body);
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ouzo-navy);
}

.ouzo-course-facts__list {
    margin: 0;
    font-family: var(--ouzo-font-footer);
    font-size: 16px;
}

.ouzo-course-facts__list dt {
    font-weight: 400;
    color: var(--ouzo-muted);
}

.ouzo-course-facts__list dd {
    margin: 2px 0 14px;
    font-weight: 700;
    color: var(--ouzo-ink);
}

.ouzo-course-facts__cta {
    width: 100%;
    margin-top: 26px;
}

.ouzo-course-more {
    padding-bottom: 72px;
}

@media (max-width: 991.98px) {
    .ouzo-course-detail {
        padding-top: 40px;
        padding-bottom: 48px;
    }

    .ouzo-course-detail__lede {
        font-size: 18px;
        line-height: 28px;
    }

    .ouzo-prose {
        font-size: 16px;
        line-height: 27px;
    }

    .ouzo-prose h2 { font-size: 23px; line-height: 31px; }
    .ouzo-prose h3 { font-size: 19px; line-height: 27px; }

    .ouzo-course-more {
        padding-bottom: 48px;
    }
}

/* ==========================================================================
   Home page — Figma frame "Home Page" (513:41)
   ========================================================================== */

/* --------------------------------------------------------------------------
   34. Home tokens
   -------------------------------------------------------------------------- */
:root {
    --ouzo-sand: #f3f0e9;
    --ouzo-hero-eyebrow: #cdcdcd;
    --ouzo-quote-meta: #626772;
}

.ouzo-sand-band {
    background-color: var(--ouzo-sand);
}

/* --------------------------------------------------------------------------
   35. Hero — Figma 513:42
   -------------------------------------------------------------------------- */
.ouzo-hero {
    background-color: var(--ouzo-navy);
    padding-block: 72px;
}

.ouzo-hero__copy {
    display: flex;
    flex-direction: column;
    gap: 27px;
    max-width: 604px;
}

.ouzo-hero__eyebrow {
    margin: 0 0 8px;
    font-family: var(--ouzo-font-body);
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0.72px;
    color: var(--ouzo-hero-eyebrow);
}

.ouzo-hero__title {
    margin: 0 0 16px;
    max-width: 557px;
    font-family: var(--ouzo-font-body);
    font-weight: 800;
    font-size: 60px;
    line-height: 62px;
    color: var(--ouzo-white);
}

.ouzo-hero__text {
    margin: 0;
    font-family: var(--ouzo-font-body);
    font-weight: 400;
    font-size: 20px;
    line-height: 32px;
    color: var(--ouzo-white);
}

.ouzo-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* Ghost twin of the red button, for the secondary action. */
.ouzo-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 207px;
    height: 46px;
    padding: 10px;
    border: 0.5px solid var(--ouzo-white);
    border-radius: 2px;
    background-color: rgba(250, 250, 250, 0.1);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(11px);
    color: var(--ouzo-white);
    font-family: var(--ouzo-font-display);
    font-weight: 700;
    font-size: 18px;
    line-height: normal;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--ouzo-transition);
}

.ouzo-btn-ghost:hover,
.ouzo-btn-ghost:focus {
    background-color: rgba(250, 250, 250, 0.2);
    color: var(--ouzo-white);
    transform: translateY(-2px);
}

/* Square-cornered red button used across the home page (2px radius). */
.ouzo-btn-solid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 207px;
    height: 46px;
    padding: 10px;
    border: 0;
    border-radius: 2px;
    background-color: var(--ouzo-red);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
    color: var(--ouzo-white);
    font-family: var(--ouzo-font-display);
    font-weight: 700;
    font-size: 18px;
    line-height: normal;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--ouzo-transition);
}

.ouzo-btn-solid:hover,
.ouzo-btn-solid:focus {
    background-color: var(--ouzo-red-dark);
    color: var(--ouzo-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(226, 10, 23, 0.3);
}

.ouzo-hero__media {
    width: 100%;
    max-width: 612px;
    aspect-ratio: 612 / 382;
    border-radius: 2px;
    background-color: var(--ouzo-white);
    overflow: hidden;
}

.ouzo-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   36. Stats strip — Figma 533:8

   The red bar straddles the seam between the navy hero and the band under it:
   the top half of its row is navy (so it reads as still sitting on the hero),
   the bottom half is transparent and shows whatever the next section paints —
   the neutral band today, a photo later. Using a 50% gradient rather than a
   negative margin keeps the split exact when the bar wraps to two rows on
   smaller screens.
   -------------------------------------------------------------------------- */
.ouzo-stats-strip {
    position: relative;
    z-index: 2;
    background-image: linear-gradient(
        to bottom,
        var(--ouzo-navy) 0 50%,
        transparent 50% 100%
    );
}

.ouzo-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 24px 50px;
    min-height: 150px;
    padding: 29px 32px;
    margin: 0;
    background-color: var(--ouzo-red);
    box-shadow: 0 0 4px 0 var(--ouzo-red);
    list-style: none;
}

.ouzo-stats__item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--ouzo-white);
    font-family: var(--ouzo-font-body);
    font-weight: 800;
}

.ouzo-stats__value {
    font-size: 42px;
    line-height: 1;
}

.ouzo-stats__label {
    font-size: 20px;
    line-height: 1.2;
}

.ouzo-stats__rule {
    width: 4px;
    height: 87px;
    background-color: rgba(255, 255, 255, 0.29);
}

/* --------------------------------------------------------------------------
   37. Section heading shared by the home page blocks
   -------------------------------------------------------------------------- */
.ouzo-home-head {
    max-width: 821px;
}

.ouzo-home-head__title {
    margin: 24px 0 0;
    font-family: var(--ouzo-font-body);
    font-weight: 800;
    font-size: 48px;
    line-height: 62px;
    color: var(--ouzo-ink);
}

/* --------------------------------------------------------------------------
   38. Programme cards — Figma 513:60
   -------------------------------------------------------------------------- */
.ouzo-programs {
    padding-top: 96px;
    padding-bottom: 96px;
}

.ouzo-programs__grid {
    margin-top: 55px;
}

.ouzo-program {
    height: 100%;
    min-height: 188px;
    padding: 27px 30px;
    background-color: var(--ouzo-white);
    border: 0.5px solid rgba(166, 166, 166, 0.3);
    box-shadow: var(--ouzo-soft-shadow);
    transition: var(--ouzo-transition-card);
}

.ouzo-program:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.ouzo-program__icon {
    height: 29px;
    width: auto;
    margin-bottom: 17px;
}

/* Category icons are Bootstrap Icons font glyphs (<i> tags), not <img>s. */
i.ouzo-program__icon {
    display: block;
    height: auto;
    font-size: 29px;
    line-height: 1;
    color: var(--ouzo-red);
}

.ouzo-program__title {
    margin: 0 0 5px;
    font-family: var(--ouzo-font-body);
    font-weight: 700;
    font-size: 20px;
    line-height: normal;
    text-transform: capitalize;
    color: var(--ouzo-ink);
}

.ouzo-program__text {
    margin: 0;
    font-family: var(--ouzo-font-body);
    font-weight: 300;
    font-size: 12px;
    line-height: 20px;
    text-transform: capitalize;
    color: var(--ouzo-nav-link);
}

/* Auto-rotating carousel of category cards, four per slide (Bootstrap's
   carousel component) — same grid as before, just cycling between slides. */
.ouzo-programs__carousel {
    position: relative;
    padding-bottom: 44px;
}

.ouzo-carousel-control {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background-color: var(--ouzo-white);
    border: 0.5px solid rgba(166, 166, 166, 0.3);
    border-radius: 50%;
    box-shadow: var(--ouzo-soft-shadow, 0 4px 12px rgba(0, 0, 0, 0.08));
    color: var(--ouzo-red);
    font-size: 16px;
    transform: translateY(-50%);
    transition: var(--ouzo-transition-card);
}

.ouzo-carousel-control:hover,
.ouzo-carousel-control:focus {
    background-color: var(--ouzo-red);
    color: var(--ouzo-white);
}

.ouzo-carousel-control--prev { left: -20px; }
.ouzo-carousel-control--next { right: -20px; }

.ouzo-carousel-indicators {
    position: static;
    margin: 20px 0 0;
}

.ouzo-carousel-indicators [data-bs-target] {
    width: 8px;
    height: 8px;
    margin: 0 4px;
    border: 0;
    border-radius: 50%;
    background-color: rgba(226, 10, 23, 0.25);
    opacity: 1;
}

.ouzo-carousel-indicators [data-bs-target].active {
    background-color: var(--ouzo-red);
}

@media (max-width: 575.98px) {
    .ouzo-carousel-control--prev { left: 0; }
    .ouzo-carousel-control--next { right: 0; }
}

/* --------------------------------------------------------------------------
   39. Featured courses — Figma 583:355
   Navy full-bleed band. On the artboard the card row measures 1768px inside a
   1309px shell, so the third card is deliberately clipped; we honour that by
   making the row a sideways-scrolling rail rather than squeezing three cards in.
   -------------------------------------------------------------------------- */
.ouzo-home-courses {
    padding-block: 96px;
    background-color: var(--ouzo-navy);
    overflow: hidden;
}

.ouzo-home-courses__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 87px;
}

.ouzo-home-courses__head .ouzo-home-head {
    max-width: 916px;
}

/* The band's title sits on navy, so it flips to white. */
.ouzo-home-head__title--light {
    color: var(--ouzo-white);
}

.ouzo-home-courses__rail {
    display: flex;
    gap: 32px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ouzo-home-courses__rail::-webkit-scrollbar {
    display: none;
}

.ouzo-home-courses__rail:focus-visible {
    outline: 2px solid var(--ouzo-white);
    outline-offset: 4px;
}

.ouzo-home-courses__slide {
    flex: 0 0 568px;
    max-width: 568px;
    scroll-snap-align: start;
}

/* --------------------------------------------------------------------------
   40. Why OUZO — Figma 513:81
   -------------------------------------------------------------------------- */
.ouzo-why {
    padding-block: 96px;
}

.ouzo-why__media {
    width: 100%;
    max-width: 569px;
    aspect-ratio: 569 / 549;
    border-radius: 2px;
    overflow: hidden;
    background-color: var(--ouzo-white);
}

.ouzo-why__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.ouzo-why__media:hover img {
    transform: scale(1.05);
}

.ouzo-why__text {
    margin: 12px 0 19px;
    font-family: var(--ouzo-font-footer);
    font-size: 22px;
    line-height: 32px;
    text-align: justify;
    color: var(--ouzo-nav-link);
}

.ouzo-why__list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0 0 25px;
    padding: 0;
    list-style: none;
}

.ouzo-why__list li {
    display: flex;
    align-items: center;
    gap: 19px;
    font-family: var(--ouzo-font-footer);
    font-size: 22px;
    line-height: 32px;
    color: var(--ouzo-nav-link);
}

.ouzo-why__list img {
    flex: 0 0 22px;
    width: 22px;
    height: 21px;
}

/* Red uppercase text link with a trailing arrow. */
.ouzo-text-link {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    font-family: var(--ouzo-font-footer);
    font-weight: 700;
    font-size: 18px;
    line-height: normal;
    text-transform: uppercase;
    color: var(--ouzo-red);
    text-decoration: none;
    transition: gap 0.2s ease, color 0.2s ease;
}

.ouzo-text-link:hover,
.ouzo-text-link:focus {
    gap: 22px;
    color: var(--ouzo-red-dark);
}

/* --------------------------------------------------------------------------
   41. Placement partners marquee — Figma 513:298
   -------------------------------------------------------------------------- */
.ouzo-partners-strip {
    padding-block: 56px;
    background-color: var(--ouzo-white);
    border-block: 1px solid #d9d9d9;
    text-align: center;
}

.ouzo-partners-strip__title {
    margin: 0 0 34px;
    font-family: var(--ouzo-font-footer);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--ouzo-red);
}

/* Edge-to-edge fade so logos scroll in/out instead of hard-clipping. */
.ouzo-partners-marquee {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}

.ouzo-partners-marquee__track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: ouzo-marquee 32s linear infinite;
}

.ouzo-partners-marquee:hover .ouzo-partners-marquee__track {
    animation-play-state: paused;
}

.ouzo-partners-marquee__item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    height: 44px;
    padding-inline: 40px;
}

.ouzo-partners-marquee__item img {
    height: 100%;
    max-width: 140px;
    width: auto;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.55;
    transition: filter 0.25s ease, opacity 0.25s ease;
}

.ouzo-partners-marquee__item img:hover {
    filter: grayscale(0);
    opacity: 1;
}

.ouzo-partners-marquee__name {
    font-family: var(--ouzo-font-footer);
    font-weight: 900;
    font-size: 20px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--ouzo-muted);
    white-space: nowrap;
}

@keyframes ouzo-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .ouzo-partners-marquee__track {
        animation: none;
    }

    .ouzo-partners-marquee {
        overflow-x: auto;
    }
}

/* --------------------------------------------------------------------------
   42. Campus life strip — Figma 513:145
   -------------------------------------------------------------------------- */
.ouzo-campus-life {
    padding-block: 96px;
}

.ouzo-campus-life__grid {
    margin-block: 61px;
}

.ouzo-campus-life__tile {
    width: 100%;
    aspect-ratio: 290 / 254;
    background-color: var(--ouzo-tag-bg);
    overflow: hidden;
    transition: var(--ouzo-transition-card);
}

.ouzo-campus-life__tile:hover {
    transform: translateY(-4px);
    box-shadow: var(--ouzo-lift-shadow);
}

.ouzo-campus-life__tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.ouzo-campus-life__tile:hover img {
    transform: scale(1.05);
}

/* --------------------------------------------------------------------------
   43. Testimonials — Figma 513:167
   -------------------------------------------------------------------------- */
.ouzo-testimonials {
    padding-block: 96px;
    background-color: var(--ouzo-white);
}

.ouzo-testimonials__grid {
    margin-top: 43px;
}

.ouzo-quote {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    padding: 32px 30px;
    background-color: var(--ouzo-card-tint);
    box-shadow: 0 1px 2px 0 rgba(246, 145, 14, 0.12);
    transition: var(--ouzo-transition-card);
}

.ouzo-quote:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(226, 10, 23, 0.12);
}

.ouzo-quote__stars {
    width: 127px;
    height: 18px;
}

.ouzo-quote__text {
    flex: 1 1 auto;
    margin: 0;
    font-family: "Plus Jakarta Sans", var(--ouzo-font-body);
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0.36px;
    text-align: justify;
    color: var(--ouzo-ink);
}

.ouzo-quote__rule {
    height: 1px;
    background-color: rgba(0, 0, 0, 0.12);
}

.ouzo-quote__author {
    display: flex;
    align-items: center;
    gap: 22px;
}

.ouzo-quote__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 57px;
    width: 57px;
    height: 57px;
    border-radius: 99px;
    background-color: var(--ouzo-red);
    font-family: var(--ouzo-font-body);
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    color: var(--ouzo-white);
}

.ouzo-quote__name {
    margin: 0;
    font-family: var(--ouzo-font-body);
    font-weight: 700;
    font-size: 16px;
    line-height: 26px;
    color: var(--ouzo-ink);
}

.ouzo-quote__role {
    margin: 0;
    font-family: "Plus Jakarta Sans", var(--ouzo-font-body);
    font-size: 13px;
    line-height: 20px;
    letter-spacing: 0.26px;
    color: var(--ouzo-quote-meta);
}

/* --------------------------------------------------------------------------
   44. Admissions CTA band — Figma 513:237
   -------------------------------------------------------------------------- */
.ouzo-admissions {
    padding-block: 73px;
    background-color: var(--ouzo-bg-alt);
}

.ouzo-admissions__card {
    padding: 62px 32px;
    border-radius: 2px;
    background-color: var(--ouzo-navy);
    text-align: center;
}

.ouzo-admissions__title {
    max-width: 903px;
    margin: 0 auto 15px;
    font-family: var(--ouzo-font-body);
    font-weight: 800;
    font-size: 48px;
    line-height: 1.15;
    letter-spacing: -0.96px;
    color: var(--ouzo-white);
}

.ouzo-admissions__text {
    max-width: 694px;
    margin: 0 auto 32px;
    font-family: var(--ouzo-font-footer);
    font-size: 22px;
    line-height: 32px;
    color: var(--ouzo-white);
}

/* --------------------------------------------------------------------------
   45. Home responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .ouzo-hero__title { font-size: 46px; line-height: 54px; }
    .ouzo-home-head__title,
    .ouzo-admissions__title { font-size: 36px; line-height: 46px; }
    .ouzo-why__text,
    .ouzo-why__list li { font-size: 19px; line-height: 30px; }
    .ouzo-stats__value { font-size: 34px; }
    .ouzo-stats__label { font-size: 17px; }
    .ouzo-programs,
    .ouzo-why,
    .ouzo-home-courses,
    .ouzo-campus-life,
    .ouzo-testimonials { padding-block: 72px; }

    .ouzo-home-courses__head { margin-bottom: 56px; }
}

@media (max-width: 991.98px) {
    .ouzo-hero { padding-block: 56px; }
    .ouzo-hero__title { font-size: 36px; line-height: 44px; }
    .ouzo-hero__text { font-size: 17px; line-height: 28px; }
    .ouzo-hero__media { max-width: none; }

    .ouzo-stats { gap: 20px 32px; }
    .ouzo-stats__rule { display: none; }
    .ouzo-stats__item { flex: 1 1 40%; }

    .ouzo-home-head__title,
    .ouzo-admissions__title { font-size: 30px; line-height: 40px; }

    .ouzo-why__media { max-width: none; }
    .ouzo-why__text,
    .ouzo-why__list li { font-size: 17px; line-height: 28px; }

    .ouzo-programs,
    .ouzo-why,
    .ouzo-home-courses,
    .ouzo-campus-life,
    .ouzo-testimonials { padding-block: 56px; }

    /* The heading and its "all courses" button stop sharing a row. */
    .ouzo-home-courses__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        margin-bottom: 36px;
    }

    .ouzo-programs__grid,
    .ouzo-campus-life__grid { margin-top: 36px; }
    .ouzo-campus-life__grid { margin-bottom: 36px; }

    .ouzo-admissions { padding-block: 48px; }
    .ouzo-admissions__card { padding: 40px 24px; }
    .ouzo-admissions__text { font-size: 18px; line-height: 28px; }
}

@media (max-width: 767.98px) {
    .ouzo-hero__title { font-size: 30px; line-height: 38px; }
    .ouzo-hero__copy { gap: 20px; }
    .ouzo-btn-solid,
    .ouzo-btn-ghost { min-width: 100%; font-size: 16px; }

    .ouzo-home-head__title,
    .ouzo-admissions__title { font-size: 25px; line-height: 34px; }

    .ouzo-why__text,
    .ouzo-why__list li { font-size: 16px; line-height: 26px; text-align: left; }
    .ouzo-why__list li { gap: 12px; }

    /* Below the Figma card width the rail shows one card at a time, with a
       sliver of the next one peeking to signal that it scrolls. */
    .ouzo-home-courses__rail { gap: 20px; }
    .ouzo-home-courses__slide { flex-basis: 88%; max-width: 88%; }

    .ouzo-partners-strip__list { gap: 16px 28px; font-size: 16px; }
    .ouzo-quote { padding: 24px 20px; }
    .ouzo-quote__text { font-size: 16px; line-height: 26px; text-align: left; }
}

/* ==========================================================================
   Resources — public articles index and article detail
   ========================================================================== */

/* --------------------------------------------------------------------------
   46. Resources index
   -------------------------------------------------------------------------- */
.ouzo-articles {
    padding-top: 72px;
    padding-bottom: 72px;
}

/* Category chips above the grid. */
.ouzo-article-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 32px 0 40px;
}

.ouzo-article-filter {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding-inline: 18px;
    border: 1px solid var(--ouzo-hairline);
    border-radius: 999px;
    background-color: var(--ouzo-white);
    color: var(--ouzo-nav-link);
    font-family: var(--ouzo-font-body);
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--ouzo-transition);
}

.ouzo-article-filter:hover,
.ouzo-article-filter:focus {
    border-color: var(--ouzo-red);
    color: var(--ouzo-red);
}

.ouzo-article-filter.is-active {
    border-color: var(--ouzo-red);
    background-color: var(--ouzo-red);
    color: var(--ouzo-white);
}

.ouzo-articles__pager {
    display: flex;
    justify-content: center;
    margin-top: 48px;
}

.ouzo-articles__pager .page-link {
    color: var(--ouzo-navy);
}

.ouzo-articles__pager .active > .page-link {
    background-color: var(--ouzo-red);
    border-color: var(--ouzo-red);
    color: var(--ouzo-white);
}

/* --------------------------------------------------------------------------
   47. Article card
   -------------------------------------------------------------------------- */
.ouzo-article-card {
    height: 100%;
}

.ouzo-article-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 6px;
    background-color: var(--ouzo-white);
    box-shadow: var(--ouzo-soft-shadow);
    overflow: hidden;
    text-decoration: none;
    transition: var(--ouzo-transition-card);
}

.ouzo-article-card__link:hover,
.ouzo-article-card__link:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--ouzo-lift-shadow);
}

.ouzo-article-card__media {
    position: relative;
    aspect-ratio: 16 / 9;
    background-color: var(--ouzo-offwhite);
    overflow: hidden;
}

.ouzo-article-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ouzo-article-card__flag {
    position: absolute;
    top: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding-inline: 12px;
    border-radius: 2px;
    background-color: var(--ouzo-red);
    color: var(--ouzo-white);
    font-family: var(--ouzo-font-display);
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    text-transform: uppercase;
}

.ouzo-article-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 12px;
    padding: 22px 24px 26px;
}

.ouzo-article-card__meta,
.ouzo-article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--ouzo-font-body);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    color: var(--ouzo-muted);
}

/* Bullet between the meta items. */
.ouzo-article-card__meta li + li::before,
.ouzo-article-meta li + li::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    margin-right: 12px;
    border-radius: 50%;
    background-color: currentColor;
    vertical-align: middle;
}

.ouzo-article-card__title {
    margin: 0;
    font-family: var(--ouzo-font-body);
    font-weight: 800;
    font-size: 21px;
    line-height: 30px;
    color: var(--ouzo-ink);
}

.ouzo-article-card__desc {
    margin: 0;
    font-family: var(--ouzo-font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: var(--ouzo-nav-link);

    /* Three lines, so cards in a row stay the same height. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.ouzo-article-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 6px;
    color: var(--ouzo-red);
    font-family: var(--ouzo-font-display);
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   48. Article detail
   -------------------------------------------------------------------------- */

/* Article titles run long, so the banner reads smaller than the one-word
   page banners and keeps the photo behind a navy veil for legibility. */
.ouzo-page-hero--article {
    background-color: rgba(0, 19, 95, 0.72);
}

.ouzo-page-hero--article .ouzo-page-hero__img {
    opacity: 0.35;
}

.ouzo-page-hero__title--article {
    max-width: 900px;
    padding-inline: 16px;
    font-size: 46px;
    line-height: 58px;
}

.ouzo-article-meta {
    margin-bottom: 20px;
}

.ouzo-article-meta__cat {
    color: var(--ouzo-red);
    font-weight: 700;
    text-transform: uppercase;
}

.ouzo-article-tags {
    margin-top: 32px;
}

.ouzo-course-facts__lede {
    margin: 0;
    font-family: var(--ouzo-font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: var(--ouzo-nav-link);
}

/* Outline twin of the red apply button, for the secondary panel action. */
.ouzo-btn-apply--ghost {
    border: 1px solid var(--ouzo-navy);
    background-color: transparent;
    color: var(--ouzo-navy);
}

.ouzo-btn-apply--ghost:hover,
.ouzo-btn-apply--ghost:focus {
    background-color: var(--ouzo-navy);
    color: var(--ouzo-white);
}

@media (max-width: 991.98px) {
    .ouzo-articles { padding-block: 56px; }
    .ouzo-page-hero__title--article { font-size: 34px; line-height: 44px; }
}

/* --------------------------------------------------------------------------
   49. 404 — page not found
   -------------------------------------------------------------------------- */
.ouzo-404 {
    padding-block: 120px 140px;
    background-color: var(--ouzo-sand);
    text-align: center;
}

.ouzo-404__eyebrow {
    margin: 0 0 12px;
    font-family: var(--ouzo-font-body);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ouzo-red);
}

.ouzo-404__code {
    margin: 0;
    font-family: var(--ouzo-font-body);
    font-weight: 800;
    font-size: clamp(96px, 16vw, 180px);
    line-height: 1;
    letter-spacing: -2px;
    color: var(--ouzo-navy);
}

.ouzo-404__title {
    margin: 20px auto 12px;
    max-width: 560px;
    font-family: var(--ouzo-font-body);
    font-weight: 700;
    font-size: 32px;
    line-height: 1.25;
    color: var(--ouzo-ink);
}

.ouzo-404__text {
    margin: 0 auto 36px;
    max-width: 460px;
    font-family: var(--ouzo-font-body);
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    color: var(--ouzo-nav-link);
}

.ouzo-404__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 32px;
}

@media (max-width: 767.98px) {
    .ouzo-404 { padding-block: 88px 96px; }
    .ouzo-404__title { font-size: 26px; }
    .ouzo-404__text { font-size: 16px; line-height: 26px; }
}

@media (max-width: 767.98px) {
    .ouzo-page-hero__title--article { font-size: 26px; line-height: 36px; }
    .ouzo-article-card__title { font-size: 19px; line-height: 28px; }
}