/* =============================================================================
   ROYAL EDUCARE — Public design system
   Your Gateway to Global Education
   -----------------------------------------------------------------------------
   Loaded after Bootstrap 5. Mobile-first; overrides and additions only.

   The palette is taken from the official logo, and from nothing else:

     Deep navy       the graduation cap and the EDUCARE wordmark.
                     Primary. Trust and authority; most surfaces and type.
     Green           the Royal wordmark and the swoosh.
                     A SUPPORTING accent — active states, positive results,
                     highlights, the secondary call to action. Never the
                     dominant colour of a page.
     White / greys   separation and calm.

   Every colour below resolves to a --brand-* value, so changing the brand
   means editing one block rather than hunting through five thousand lines.
   ============================================================================= */

/* ------------------------------------------------------------------ tokens */
:root {
    /*
     * The --brand-* layer lives in brand.css, which every layout loads first.
     * It used to be defined here, which meant the admin panel — the one
     * surface that does not load app.css — never saw it.
     */

    /* ---------------------------------------------------- mapped tokens -- */
    --re-navy:        var(--brand-primary);
    --re-navy-700:    #0a2559;
    --re-navy-800:    var(--brand-primary-dark);
    --re-navy-900:    #04142f;
    --re-navy-500:    #1a4a9e;
    --re-navy-300:    #6b8fd4;
    --re-navy-050:    var(--brand-primary-soft);

    /* Was gold. The logo has no gold in it. */
    --re-accent:      var(--brand-accent);
    --re-accent-600:  var(--brand-accent-dark);
    --re-accent-050:  var(--brand-accent-soft);
    --re-accent-700:  var(--brand-accent-deep);
    --re-accent-light: var(--brand-accent-light);

    /* Was --re-kr-red, which was never a flag colour: this is what every
       invalid field and danger callout is painted with. --re-kr-blue is gone;
       nothing had ever referenced it. */
    --re-danger:      var(--brand-danger);
    --re-star:        var(--brand-star);

    /* Amber, and deliberately NOT the brand accent. A warning that matches
       the brand is a warning nobody reads as one — and these eight rules
       were riding the old gold token purely because gold looked the part. */
    --re-warn:        var(--brand-warning);
    --re-warn-600:    #8a6320;
    --re-warn-050:    #fdf6e8;

    --re-ink:         var(--brand-text);
    --re-body:        var(--brand-body);
    --re-muted:       var(--brand-muted);
    --re-line:        var(--brand-border);
    --re-line-soft:   #eef1f6;
    --re-white:       var(--brand-surface);
    --re-grey:        var(--brand-background);
    --re-grey-100:    #eff3f9;

    --re-r-sm:        10px;
    --re-r:           var(--brand-radius);
    --re-r-lg:        22px;
    --re-r-xl:        28px;

    --re-sh-xs:       0 1px 2px rgba(13, 21, 38, .06);
    --re-sh-sm:       0 4px 14px -6px rgba(11, 46, 111, .16);
    --re-sh:          0 14px 36px -20px rgba(11, 46, 111, .30);
    --re-sh-lg:       0 30px 70px -38px rgba(11, 46, 111, .42);

    --re-ease:        cubic-bezier(.16, .84, .44, 1);
    --re-t:           .22s var(--re-ease);

    --re-header-h:    74px;
    --re-actionbar-h: 62px;

    --re-font:        'Inter', 'Noto Sans Bengali', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --re-font-head:   'Poppins', 'Noto Sans Bengali', system-ui, -apple-system, 'Segoe UI', sans-serif;
}


/* ------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--re-header-h) + 16px); }

body.re-body {
    font-family: var(--re-font);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--re-body);
    background: var(--re-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--re-font-head);
    color: var(--re-ink);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -.02em;
}

p { margin-bottom: 1rem; }

a { color: var(--re-navy); text-decoration: none; transition: color var(--re-t); }
a:hover { color: var(--re-navy-500); }

img { max-width: 100%; height: auto; }

::selection { background: var(--re-navy); color: #fff; }

:focus-visible {
    outline: 3px solid rgba(26, 74, 158, .40);
    outline-offset: 2px;
    border-radius: 6px;
}

/* .re-skip now lives in brand.css, so the admin gets it as well. */

.re-main { min-height: 40vh; }

/* --------------------------------------------------------------- buttons */
.re-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-family: var(--re-font);
    font-weight: 600; font-size: .945rem; line-height: 1;
    padding: .8rem 1.4rem;
    border-radius: var(--re-r-sm);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform var(--re-t), background var(--re-t), color var(--re-t), box-shadow var(--re-t), border-color var(--re-t);
    text-align: center;
    white-space: nowrap;
}
.re-btn i { font-size: 1.05em; line-height: 1; }
.re-btn-lg { padding: 1rem 1.7rem; font-size: 1rem; }
.re-btn:active { transform: translateY(1px); }

.re-btn-primary { background: var(--re-navy); color: #fff; box-shadow: var(--re-sh-sm); }
.re-btn-primary:hover { background: var(--re-navy-800); color: #fff; box-shadow: var(--re-sh); transform: translateY(-2px); }

.re-btn-outline { background: transparent; color: var(--re-navy); border-color: rgba(11, 46, 111, .25); }
.re-btn-outline:hover { background: var(--re-navy-050); border-color: var(--re-navy); color: var(--re-navy-800); }

.re-btn-ghost { background: transparent; color: var(--re-navy); }
.re-btn-ghost:hover { background: var(--re-navy-050); color: var(--re-navy-800); }

.re-btn-light { background: #fff; color: var(--re-navy); }
.re-btn-light:hover { background: var(--re-navy-050); color: var(--re-navy-800); transform: translateY(-2px); }

/* Dark green with white type — 5.63:1. The mid green would give 3.51:1,
   which is below AA for a button label. */
.re-btn-accent { background: var(--re-accent-600); color: #fff; }
.re-btn-accent:hover { background: var(--re-accent-700); color: #fff; }

.re-btn-whatsapp { background: #25d366; color: #fff; }
.re-btn-whatsapp:hover { background: #1da851; color: #fff; }

.re-btn:disabled, .re-btn.disabled { opacity: .55; pointer-events: none; }

/* ------------------------------------------------------------------- tags */
.re-tag {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .735rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: .3rem .65rem; border-radius: 999px;
    background: var(--re-grey-100); color: var(--re-body);
}
.re-tag-navy  { background: var(--re-navy-050); color: var(--re-navy); }
.re-tag-accent  { background: var(--re-accent-050); color: var(--re-accent-600); }
.re-tag-green { background: #e6f6ed; color: #12734a; }
.re-tag-red   { background: #fdecee; color: var(--re-danger); }

.re-eyebrow {
    display: inline-block;
    font-family: var(--re-font);
    font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--re-navy-500);
    margin-bottom: .75rem;
}

.re-req { color: var(--re-danger); }

/* --------------------------------------------------------------- top strip */
.re-strip {
    background: var(--re-navy-900);
    color: rgba(255, 255, 255, .78);
    font-size: .85rem;
    padding: .5rem 0;
}
.re-strip-link { color: rgba(255, 255, 255, .82); display: inline-flex; align-items: center; gap: .4rem; }
.re-strip-link:hover { color: var(--re-accent-light); }
.re-strip-muted { color: rgba(255, 255, 255, .55); display: inline-flex; align-items: center; gap: .4rem; }
.re-strip-tagline {
    color: var(--re-accent-light); font-weight: 600; font-size: .8rem;
    padding-right: 1rem; border-right: 1px solid rgba(255, 255, 255, .16);
}
.re-strip-social { color: rgba(255, 255, 255, .72); font-size: .95rem; }
.re-strip-social:hover { color: var(--re-accent-light); }

/* ------------------------------------------------------------------ header */
.re-header {
    position: sticky; top: 0; z-index: 1040;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--re-line-soft);
    transition: box-shadow var(--re-t), background var(--re-t);
}
.re-header.is-stuck { box-shadow: var(--re-sh-sm); background: rgba(255, 255, 255, .98); }

.re-nav {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    min-height: var(--re-header-h);
}

.re-brand { display: flex; align-items: center; gap: .7rem; flex: 0 0 auto; text-decoration: none; }
.re-brand-img { height: 46px; width: auto; }

/* ---------------------------------------------------------- the logo --
   Rendered by partials/brand-logo.php. The inline height/width come from
   the file's own dimensions so the header does not reflow as it loads;
   these rules make sure nothing here can distort it. */
.re-brand-logo {
    display: block;
    width: auto;
    max-width: 260px;
    object-fit: contain;      /* never stretched to fill */
    flex: 0 0 auto;
}

/* The honest fallback when no logo has been supplied: the name, set as
   type. Never a stand-in graphic. */
.re-brand-wordmark {
    font-family: var(--re-font-head);
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -.01em;
    color: var(--re-navy);
    white-space: nowrap;
}
.re-brand-footer .re-brand-wordmark,
.re-brand-auth .re-brand-wordmark,
.re-brand-admin .re-brand-wordmark { color: #fff; }

/* Clear space, so the mark never crowds the navigation beside it. */
.re-brand-header { padding-right: .35rem; }
.re-brand-header .re-brand-logo { max-height: 52px; }
.re-brand-mobile .re-brand-logo { max-width: 190px; }
.re-brand-footer .re-brand-logo { max-width: 220px; }
.re-brand-auth   .re-brand-logo { max-width: 240px; }
.re-brand-admin  .re-brand-logo,
.re-brand-portal .re-brand-logo { max-width: 160px; }
.re-brand-mark {
    display: grid; place-items: center;
    width: 46px; height: 46px; border-radius: 13px;
    background: linear-gradient(140deg, var(--re-navy) 0%, var(--re-navy-500) 100%);
    color: #fff; font-family: var(--re-font-head); font-weight: 800; font-size: 1.02rem; letter-spacing: .03em;
    box-shadow: var(--re-sh-sm);
    flex: 0 0 auto;
}
.re-brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.re-brand-name {
    font-family: var(--re-font-head); font-weight: 800; font-size: 1.06rem;
    color: var(--re-ink); letter-spacing: -.025em;
}
.re-brand-sub { font-size: .665rem; color: var(--re-muted); letter-spacing: .02em; font-weight: 500; }

.re-menu { display: flex; align-items: center; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.re-menu > li { position: relative; }

.re-menu-link {
    display: inline-flex; align-items: center; gap: .3rem;
    font-family: var(--re-font);
    font-size: .925rem; font-weight: 600; color: var(--re-ink);
    padding: .55rem .8rem; border-radius: var(--re-r-sm);
    background: none; border: 0;
    transition: color var(--re-t), background var(--re-t);
}
.re-menu-link:hover { color: var(--re-navy); background: var(--re-navy-050); }
.re-menu-link.is-active { color: var(--re-navy); }
.re-menu-link.is-active::after {
    content: ""; position: absolute; left: .8rem; right: .8rem; bottom: -2px;
    height: 2px; border-radius: 2px; background: var(--re-accent);
}
.re-menu-link i { font-size: .7rem; transition: transform var(--re-t); }

/* dropdowns */
.re-has-drop:hover .re-drop,
.re-has-drop:focus-within .re-drop { opacity: 1; visibility: visible; transform: translateY(0); }
.re-has-drop:hover .re-drop-toggle i { transform: rotate(180deg); }

/* A plain white panel of rows, not a floating card: a modest radius, a light
   shadow, and a hairline between rows so a list of nine destinations reads as
   a list. The desktop menu is hidden below 1200px, so this panel is never
   shown at a width it could exceed — the cap keeps that true if the
   breakpoint ever moves. */
.re-drop {
    position: absolute; top: calc(100% + 10px); left: 0; z-index: 20;
    min-width: 244px; max-width: calc(100vw - 32px);
    padding: .25rem 0;
    background: #fff; border: 1px solid var(--re-line);
    border-radius: var(--re-r-sm);
    box-shadow: var(--re-sh-sm);
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity var(--re-t), transform var(--re-t), visibility var(--re-t);
}
.re-drop::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }

.re-drop-item {
    display: flex; align-items: center; gap: .6rem;
    padding: .6rem 1rem;
    border-top: 1px solid var(--re-line-soft, var(--re-line));
    transition: background var(--re-t), color var(--re-t);
}
/* No rule above the first row, and none above the "All destinations" link —
   that one carries its own heavier divider below. */
.re-drop-item:first-child { border-top: 0; }
.re-drop-item:hover { background: var(--re-navy-050); }

.re-drop-item i { color: var(--re-navy-500); font-size: 1rem; flex: 0 0 auto; }
.re-drop-item img { flex: 0 0 auto; border-radius: 2px; }
.re-drop-item span { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }

/* One line per destination where it fits, which is the whole point of the
   compact width — "Study in Australia" is the longest default label. */
.re-drop-item strong {
    font-size: .875rem; color: var(--re-navy); font-weight: 600;
    white-space: nowrap;
}
.re-drop-item small { font-size: .75rem; color: var(--re-muted); }

/* "All destinations" closes the list rather than sitting in it. */
.re-drop-more { margin-top: .25rem; border-top-width: 2px; }
.re-drop-more strong { color: var(--re-navy-500); font-weight: 700; }

.re-nav-actions { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }

/* burger */
.re-burger {
    width: 44px; height: 44px; border-radius: var(--re-r-sm);
    border: 1px solid var(--re-line); background: #fff;
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    transition: background var(--re-t);
}
.re-burger:hover { background: var(--re-navy-050); }
.re-burger span {
    display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--re-ink);
    transition: transform var(--re-t), opacity var(--re-t);
}
.re-burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.re-burger.is-open span:nth-child(2) { opacity: 0; }
.re-burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ----------------------------------------------------------- mobile nav */
.re-mobile-backdrop {
    position: fixed; inset: 0; z-index: 1050;
    background: rgba(4, 20, 47, .55); backdrop-filter: blur(3px);
    opacity: 0; transition: opacity var(--re-t);
}
.re-mobile-backdrop.is-visible { opacity: 1; }

.re-mobile-nav {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 1060;
    width: min(360px, 88vw);
    background: #fff;
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform .3s var(--re-ease);
    box-shadow: var(--re-sh-lg);
}
.re-mobile-nav.is-open { transform: translateX(0); }

.re-mobile-head {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: 1rem 1.15rem; border-bottom: 1px solid var(--re-line);
    flex: 0 0 auto;
}
.re-mobile-close {
    width: 40px; height: 40px; border-radius: var(--re-r-sm);
    border: 1px solid var(--re-line); background: #fff; color: var(--re-ink);
    display: grid; place-items: center; font-size: 1rem;
}
.re-mobile-close:hover { background: var(--re-navy-050); }

.re-mobile-body { flex: 1 1 auto; overflow-y: auto; padding: 1rem 1.15rem 2rem; overscroll-behavior: contain; }

.re-mobile-group { margin-top: 1.35rem; }
.re-mobile-group-title {
    font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--re-muted); margin: 0 0 .5rem .25rem;
}
/* The group heading is a button so the group can collapse. It keeps the
   look of the label it replaced. */
.re-mobile-accordion {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    width: 100%; padding: .35rem .25rem; background: none; border: 0; text-align: left;
    cursor: pointer;
}
.re-mobile-accordion i { font-size: .8rem; transition: transform var(--re-t); }
.re-mobile-accordion[aria-expanded="false"] i { transform: rotate(-90deg); }
.re-mobile-accordion:hover { color: var(--re-navy); }
.re-mobile-accordion:focus-visible { outline: 2px solid var(--re-navy-500); outline-offset: 2px; }
.re-mobile-link {
    display: flex; align-items: center; gap: .7rem;
    padding: .7rem .75rem; border-radius: var(--re-r-sm);
    font-size: .94rem; font-weight: 500; color: var(--re-ink);
    transition: background var(--re-t), color var(--re-t);
}
.re-mobile-link i { color: var(--re-navy-500); font-size: 1.05rem; width: 20px; text-align: center; }
.re-mobile-link:hover { background: var(--re-navy-050); color: var(--re-navy); }
.re-mobile-link.is-active { background: var(--re-navy-050); color: var(--re-navy); font-weight: 600; }
.re-mobile-link.is-top { font-weight: 600; }

.re-mobile-cta { margin-top: 1.6rem; }
.re-mobile-contact {
    margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--re-line);
    display: grid; gap: .55rem; font-size: .9rem;
}
.re-mobile-contact a { display: flex; align-items: center; gap: .55rem; color: var(--re-body); }
.re-mobile-contact a:hover { color: var(--re-navy); }
.re-mobile-contact i { color: var(--re-navy-500); }

body.re-nav-open { overflow: hidden; }

/* ------------------------------------------------------- mobile action bar */
.re-actionbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035;
    display: grid; grid-template-columns: repeat(var(--re-ab-cols, 3), 1fr);
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--re-line);
    box-shadow: 0 -6px 24px -12px rgba(11, 46, 111, .28);
    padding-bottom: env(safe-area-inset-bottom);
}
.re-actionbar[data-actions="1"] { --re-ab-cols: 1; }
.re-actionbar[data-actions="2"] { --re-ab-cols: 2; }
.re-actionbar[data-actions="3"] { --re-ab-cols: 3; }

.re-actionbar-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .18rem;
    min-height: var(--re-actionbar-h);
    font-size: .705rem; font-weight: 700; letter-spacing: .02em;
    color: var(--re-navy); background: transparent;
    border-right: 1px solid var(--re-line-soft);
    transition: background var(--re-t);
}
.re-actionbar-btn:last-child { border-right: 0; }
.re-actionbar-btn i { font-size: 1.2rem; }
.re-actionbar-btn:active { background: var(--re-navy-050); }
.re-actionbar-btn.is-whatsapp { color: #128c4a; }
.re-actionbar-btn.is-primary { background: var(--re-navy); color: #fff; }
.re-actionbar-btn.is-primary:active { background: var(--re-navy-800); }

/* Keep fixed bars off the page bottom on mobile. */
@media (max-width: 991.98px) {
    body.re-body { padding-bottom: var(--re-actionbar-h); }
}

/* ------------------------------------------------------------------- flash */
.re-flash-wrap { padding-top: 1.25rem; }
.re-flash {
    border: 0; border-radius: var(--re-r); box-shadow: var(--re-sh-sm);
    display: flex; align-items: flex-start; font-size: .93rem;
}
.re-flash .btn-close { margin-left: auto; }

/* The white split hero that lived here is gone — see the hero slider below. */

/* ------------------------------------------------------------------- trust */
.re-trust { background: var(--re-navy); padding: clamp(2.25rem, 4vw, 3rem) 0; }
.re-counter { text-align: center; color: #fff; }
.re-counter i { font-size: 1.55rem; color: var(--re-accent); display: block; margin-bottom: .45rem; }
.re-counter-value {
    display: block; font-family: var(--re-font-head);
    font-size: clamp(1.65rem, 3.4vw, 2.4rem); font-weight: 800; line-height: 1.1; letter-spacing: -.03em;
}
.re-counter-label { display: block; font-size: .82rem; color: rgba(255, 255, 255, .72); }

.re-trust-item {
    display: flex; align-items: flex-start; gap: .8rem;
    color: rgba(255, 255, 255, .86);
}
.re-trust-item i { color: var(--re-accent); font-size: 1.3rem; flex: 0 0 auto; margin-top: .1rem; }
.re-trust-item strong { display: block; color: #fff; font-size: .95rem; font-weight: 600; }
.re-trust-item span { display: block; font-size: .85rem; color: rgba(255, 255, 255, .68); line-height: 1.5; }

/* ---------------------------------------------------------------- sections */
.re-section { padding: clamp(3rem, 6.5vw, 5.5rem) 0; }
.re-section-alt { background: var(--re-grey); }

.re-sec-head { text-align: center; max-width: 64ch; margin: 0 auto clamp(2rem, 4vw, 3rem); }
.re-sec-head.is-start { text-align: left; margin-left: 0; margin-right: 0; }
.re-sec-title { font-size: clamp(1.55rem, 3.1vw, 2.2rem); margin-bottom: .7rem; }
.re-sec-lead { color: var(--re-body); margin: 0; font-size: 1.02rem; }

/* ------------------------------------------------------------ block cards */
.re-block {
    height: 100%; background: #fff;
    border: 1px solid var(--re-line);
    border-radius: var(--re-r-lg);
    padding: 1.7rem 1.5rem;
    position: relative;
    transition: transform var(--re-t), box-shadow var(--re-t), border-color var(--re-t);
}
.re-block:hover { transform: translateY(-4px); box-shadow: var(--re-sh); border-color: rgba(11, 46, 111, .22); }
.re-section-alt .re-block { border-color: transparent; box-shadow: var(--re-sh-xs); }
.re-section-alt .re-block:hover { box-shadow: var(--re-sh); }

.re-block-icon {
    display: grid; place-items: center;
    width: 52px; height: 52px; border-radius: 15px;
    background: var(--re-navy-050); color: var(--re-navy);
    font-size: 1.35rem; margin-bottom: 1.05rem;
    transition: background var(--re-t), color var(--re-t);
}
.re-block:hover .re-block-icon { background: var(--re-navy); color: #fff; }

.re-block-step {
    position: absolute; top: 1.35rem; right: 1.5rem;
    font-family: var(--re-font-head); font-size: 2rem; font-weight: 800;
    color: var(--re-navy-050); line-height: 1;
}
.re-block-title { font-size: 1.06rem; margin-bottom: .5rem; }
.re-block-sub { font-size: .875rem; color: var(--re-navy-500); font-weight: 600; margin-bottom: .35rem; }
.re-block-text { font-size: .93rem; color: var(--re-body); margin: 0; }
.re-block-link { display: inline-flex; align-items: center; gap: .35rem; margin-top: .9rem; font-weight: 600; font-size: .9rem; }

/* -------------------------------------------------------------- route card */
.re-route {
    height: 100%; background: #fff;
    border: 1px solid var(--re-line); border-radius: var(--re-r-lg);
    padding: 1.7rem 1.5rem;
    display: flex; flex-direction: column; align-items: flex-start; gap: .6rem;
    transition: transform var(--re-t), box-shadow var(--re-t), border-color var(--re-t);
}
.re-route:hover { transform: translateY(-4px); box-shadow: var(--re-sh); border-color: rgba(11, 46, 111, .22); }
.re-route-icon {
    display: grid; place-items: center;
    width: 52px; height: 52px; border-radius: 15px;
    background: linear-gradient(140deg, var(--re-navy) 0%, var(--re-navy-500) 100%);
    color: #fff; font-size: 1.3rem; margin-bottom: .3rem;
}
.re-route-title { font-size: 1.08rem; margin: 0; }
.re-route-text { font-size: .91rem; color: var(--re-body); margin: 0; flex: 1 1 auto; }
.re-route-link { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; font-size: .9rem; }

/* -------------------------------------------------------------- guide card */
.re-guide {
    display: flex; flex-direction: column; height: 100%;
    background: #fff; border: 1px solid var(--re-line); border-radius: var(--re-r-lg);
    padding: 1.6rem 1.4rem; color: inherit;
    transition: transform var(--re-t), box-shadow var(--re-t), border-color var(--re-t);
}
.re-guide:hover { transform: translateY(-4px); box-shadow: var(--re-sh); border-color: rgba(11, 46, 111, .22); color: inherit; }
.re-guide-icon {
    display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px;
    background: var(--re-accent-050); color: var(--re-accent-600); font-size: 1.2rem; margin-bottom: 1rem;
}
.re-guide-title { font-size: 1.02rem; margin-bottom: .45rem; }
.re-guide-text { font-size: .89rem; color: var(--re-body); flex: 1 1 auto; margin-bottom: .8rem; }
.re-guide-more { font-size: .875rem; font-weight: 600; color: var(--re-navy); display: inline-flex; align-items: center; gap: .35rem; }

/* ------------------------------------------------------------- programme */
.re-uni, .re-prog, .re-story, .re-post, .re-service, .re-visa, .re-intake, .re-office, .re-city {
    height: 100%; background: #fff;
    border: 1px solid var(--re-line); border-radius: var(--re-r-lg);
    padding: 1.5rem;
    transition: transform var(--re-t), box-shadow var(--re-t), border-color var(--re-t);
}
.re-uni:hover, .re-prog:hover, .re-story:hover,
.re-post:hover, .re-service:hover, .re-city:hover {
    transform: translateY(-4px); box-shadow: var(--re-sh); border-color: rgba(11, 46, 111, .2);
}

.re-uni-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.re-uni-logo { width: 56px; height: 56px; border-radius: 14px; object-fit: contain; background: var(--re-grey); padding: 6px; }
.re-uni-initials {
    display: grid; place-items: center; background: var(--re-navy-050); color: var(--re-navy);
    font-family: var(--re-font-head); font-weight: 800; font-size: 1.05rem; padding: 0;
}
.re-uni-name { font-size: 1.05rem; margin-bottom: .2rem; }
.re-uni-ko { font-size: .82rem; color: var(--re-muted); margin-bottom: .7rem; }
.re-uni-meta, .re-prog-meta { list-style: none; padding: 0; margin: 0 0 .8rem; display: flex; flex-wrap: wrap; gap: .4rem .95rem; }
.re-uni-meta li, .re-prog-meta li { display: inline-flex; align-items: center; gap: .35rem; font-size: .825rem; color: var(--re-muted); }
.re-uni-meta i, .re-prog-meta i { color: var(--re-navy-300); }
.re-uni-text { font-size: .89rem; color: var(--re-body); margin-bottom: .8rem; }
.re-uni-link, .re-prog-link, .re-service-link {
    display: inline-flex; align-items: center; gap: .35rem; font-size: .885rem; font-weight: 600;
}

.re-prog-head { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .85rem; }
.re-prog-title { font-size: 1.02rem; margin-bottom: .35rem; }
.re-prog-uni { font-size: .855rem; color: var(--re-body); margin-bottom: .7rem; display: flex; align-items: center; gap: .4rem; }
.re-prog-uni i { color: var(--re-navy-300); }


/* ------------------------------------------------------ stories and quotes */
.re-story { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.re-story-cover { width: 100%; height: 180px; object-fit: cover; }
.re-story-body { padding: 1.4rem; }
.re-story-title { font-size: 1.05rem; margin-bottom: .35rem; }
.re-story-meta { font-size: .82rem; color: var(--re-navy-500); font-weight: 600; margin-bottom: .6rem; }
.re-story-text { font-size: .9rem; color: var(--re-body); margin: 0; }

.re-stars { color: var(--re-star); font-size: .88rem; margin-bottom: .7rem; }
.re-quote-text { font-size: .95rem; color: var(--re-body); flex: 1 1 auto; margin-bottom: 1.1rem; }

/* --------------------------------------------------------------- blog post */
.re-post { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.re-post-img { width: 100%; height: 180px; object-fit: cover; }
.re-post-body { padding: 1.4rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.re-post-title { font-size: 1.03rem; margin: .6rem 0 .45rem; }
.re-post-text { font-size: .89rem; color: var(--re-body); flex: 1 1 auto; }
.re-post-date { font-size: .8rem; color: var(--re-muted); margin: .5rem 0 0; display: flex; align-items: center; gap: .4rem; }

/* ---------------------------------------------------------------- services */
.re-service { display: flex; flex-direction: column; }
.re-service-icon {
    display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px;
    background: var(--re-navy-050); color: var(--re-navy); font-size: 1.3rem; margin-bottom: 1rem;
}
.re-service-title { font-size: 1.05rem; margin-bottom: .5rem; }
.re-service-text { font-size: .9rem; color: var(--re-body); flex: 1 1 auto; margin-bottom: .8rem; }

/* ---- Our Services page: one card per published service -------------------- */
.re-services-grid {
    display: grid; gap: 1.5rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.re-service-card {
    position: relative; display: flex; flex-direction: column; height: 100%;
    background: #fff; border: 1px solid var(--re-line); border-radius: 16px; overflow: hidden;
    box-shadow: 0 1px 2px rgba(11, 46, 111, .04), 0 12px 30px -20px rgba(11, 46, 111, .28);
    transition: transform var(--re-t), box-shadow var(--re-t), border-color var(--re-t);
}
/* A thin green-to-navy line along the top edge, shown on hover and focus. */
.re-service-card::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 3px; z-index: 2;
    background: linear-gradient(90deg, var(--re-accent), var(--re-navy-500));
    opacity: 0; transition: opacity var(--re-t);
}
.re-service-card:hover, .re-service-card:focus-within {
    transform: translateY(-4px); border-color: rgba(11, 46, 111, .18);
    box-shadow: 0 2px 4px rgba(11, 46, 111, .05), 0 22px 44px -24px rgba(11, 46, 111, .4);
}
.re-service-card:hover::before, .re-service-card:focus-within::before { opacity: 1; }

.re-service-card-media { aspect-ratio: 16 / 9; background: var(--re-navy-050); overflow: hidden; }
.re-service-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.re-service-card-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 1.65rem 1.6rem 1.55rem; }
.re-service-card-icon {
    display: grid; place-items: center; flex: none;
    width: 56px; height: 56px; border-radius: 16px; margin-bottom: 1.15rem;
    background: var(--re-accent-050); color: var(--re-accent-600); font-size: 1.5rem;
}
/* With a picture, the icon sits half over its lower edge. */
.re-service-card.has-image .re-service-card-icon {
    position: relative; margin-top: calc(-1.65rem - 28px);
    background: #fff; box-shadow: 0 10px 22px -12px rgba(11, 46, 111, .45);
}
.re-service-card-title {
    font-size: 1.12rem; line-height: 1.35; color: var(--re-navy);
    margin-bottom: .55rem; overflow-wrap: break-word;
}
.re-service-card-text { flex: 1 1 auto; font-size: .92rem; line-height: 1.6; color: var(--re-body); margin-bottom: 1.2rem; }
.re-service-card-link {
    margin-top: auto; align-self: flex-start;
    display: inline-flex; align-items: center; gap: .45rem; min-height: 42px; padding: .5rem 1.05rem;
    border-radius: 999px; background: var(--re-navy-050); color: var(--re-navy);
    font-size: .9rem; font-weight: 600; text-decoration: none;
    transition: background-color var(--re-t), color var(--re-t);
}
.re-service-card-link i { transition: transform var(--re-t); }
.re-service-card:hover .re-service-card-link,
.re-service-card-link:hover, .re-service-card-link:focus-visible { background: var(--re-navy); color: #fff; text-decoration: none; }
.re-service-card:hover .re-service-card-link i { transform: translateX(3px); }
.re-service-card-link:focus-visible { outline: 3px solid var(--re-accent); outline-offset: 3px; }

@media (max-width: 991.98px) {
    .re-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
}
@media (max-width: 767.98px) {
    .re-services-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    .re-service-card-body { padding: 1.4rem 1.25rem 1.3rem; }
    .re-service-card.has-image .re-service-card-icon { margin-top: calc(-1.4rem - 28px); }
}
@media (prefers-reduced-motion: reduce) {
    .re-service-card, .re-service-card::before, .re-service-card-link, .re-service-card-link i { transition: none; }
    .re-service-card:hover, .re-service-card:focus-within { transform: none; }
}

/* ---- a service's own page -------------------------------------------------- */
/* Compound selectors: the general .re-prose rules come later in this file. */
.re-prose.re-service-prose > :first-child { margin-top: 0; }
.re-prose.re-service-prose h2 { font-size: 1.3rem; color: var(--re-navy); margin: 2rem 0 .8rem; }
.re-prose.re-service-prose h3 { color: var(--re-navy); }
/* Bullet points read as key support: a green tick in a soft circle. */
.re-prose.re-service-prose ul { list-style: none; padding-left: 0; display: grid; gap: .6rem; }
.re-prose.re-service-prose ul li { position: relative; margin: 0; padding-left: 2rem; }
.re-prose.re-service-prose ul li::before {
    content: ""; position: absolute; left: 0; top: .15em;
    width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--re-accent-050);
}
.re-prose.re-service-prose ul li::after {
    content: ""; position: absolute; left: .47rem; top: calc(.15em + .3rem);
    width: .36rem; height: .62rem; border: solid var(--re-accent-600); border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
/* Numbered lists read as steps: a navy numbered circle. */
.re-prose.re-service-prose ol { list-style: none; padding-left: 0; counter-reset: re-step; display: grid; gap: .75rem; }
.re-prose.re-service-prose ol > li {
    position: relative; margin: 0; padding: .2rem 0 0 2.75rem; min-height: 2rem; counter-increment: re-step;
}
.re-prose.re-service-prose ol > li::before {
    content: counter(re-step); position: absolute; left: 0; top: 0;
    width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
    background: var(--re-navy); color: #fff; font-size: .85rem; font-weight: 700;
}
.re-service-cta .re-service-card-icon { width: 48px; height: 48px; border-radius: 14px; font-size: 1.3rem; margin-bottom: .9rem; }
.re-aside-links.re-service-links i { font-size: 1rem; width: 1.25rem; color: var(--re-accent-600); }
.re-service-all { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1rem; font-size: .9rem; font-weight: 600; }

/* ---- Why Choose Royal Educare -------------------------------------------- */
/* Every part of this page is a content block, so each rule has to look right
   with one item or with six, and with or without a picture beside the text. */
.re-why-heading { font-size: clamp(1.4rem, 2.4vw, 1.9rem); color: var(--re-navy); margin-bottom: .9rem; }
.re-why-lead { font-size: 1.02rem; line-height: 1.75; color: var(--re-body); margin-bottom: 0; }
.re-why-figure { margin: 0; border-radius: var(--re-r-xl); overflow: hidden; box-shadow: 0 30px 60px -34px rgba(11, 46, 111, .5); }
/* A defined box, so the picture has a height of its own: height:100% inside a
   figure with no height collapses to nothing, and the image never appeared. */
.re-why-figure img {
    display: block; width: 100%; height: auto;
    aspect-ratio: 4 / 3; max-height: 420px; object-fit: cover;
}

.re-why-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.re-why-card {
    display: flex; flex-direction: column; height: 100%;
    background: #fff; border: 1px solid var(--re-line); border-radius: 16px; padding: 1.6rem 1.5rem;
    box-shadow: 0 1px 2px rgba(11, 46, 111, .04), 0 12px 30px -22px rgba(11, 46, 111, .3);
    transition: transform var(--re-t), box-shadow var(--re-t), border-color var(--re-t);
}
.re-why-card:hover {
    transform: translateY(-4px); border-color: rgba(31, 157, 77, .35);
    box-shadow: 0 2px 4px rgba(11, 46, 111, .05), 0 22px 44px -24px rgba(11, 46, 111, .38);
}
.re-why-icon {
    display: grid; place-items: center; width: 54px; height: 54px; border-radius: 15px; margin-bottom: 1.1rem;
    background: var(--re-accent-050); color: var(--re-accent-600); font-size: 1.45rem; flex: none;
}
.re-why-card-title { font-size: 1.06rem; color: var(--re-navy); margin-bottom: .5rem; }
.re-why-card-text { font-size: .92rem; line-height: 1.65; color: var(--re-body); margin: 0; }

/* The figures strip. Empty unless somebody entered numbers they can stand behind. */
.re-why-figures { padding-top: 0; }
.re-why-stats {
    list-style: none; margin: 0; padding: 1.6rem;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.25rem;
    background: var(--re-navy-050); border: 1px solid rgba(11, 46, 111, .12); border-radius: var(--re-r-lg);
}
.re-why-stat { display: grid; justify-items: center; text-align: center; gap: .2rem; }
.re-why-stat i { font-size: 1.3rem; color: var(--re-accent-600); margin-bottom: .2rem; }
.re-why-stat-value { font-family: var(--re-font-head); font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; color: var(--re-navy); line-height: 1.1; }
.re-why-stat-label { font-size: .85rem; color: var(--re-muted); }

/* The process, as numbered steps. */
.re-why-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.re-why-step {
    display: flex; gap: 1rem; align-items: flex-start;
    background: #fff; border: 1px solid var(--re-line); border-radius: 14px; padding: 1.15rem 1.25rem;
}
.re-why-step-no {
    display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%;
    background: var(--re-navy); color: #fff; font-weight: 700; font-size: .9rem;
}
.re-why-step-body { min-width: 0; }
.re-why-step-title { font-size: 1rem; color: var(--re-navy); margin-bottom: .25rem; }
.re-why-step-text { font-size: .9rem; line-height: 1.6; color: var(--re-body); margin: 0; }

/* The trust panel's points. */
.re-why-points { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .85rem; }
.re-why-points li { display: flex; align-items: flex-start; gap: .7rem; }
.re-why-points i { color: var(--re-accent-600); font-size: 1.15rem; line-height: 1.5; flex: none; }
.re-why-points strong { display: block; color: var(--re-navy); font-size: .97rem; }
.re-why-points small { display: block; color: var(--re-body); font-size: .88rem; line-height: 1.55; }

/* ---- Awards & Certificates ------------------------------------------------ */
/* A certificate is evidence, so the image is never cropped: `contain` on a
   light panel, portrait or landscape, and click to read it full size. */
.re-award-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 1.5rem; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.re-award-cell { min-width: 0; }
.re-award-card {
    display: flex; flex-direction: column; height: 100%; overflow: hidden;
    background: #fff; border: 1px solid var(--re-line); border-radius: 16px;
    box-shadow: 0 1px 2px rgba(11, 46, 111, .04), 0 12px 30px -22px rgba(11, 46, 111, .3);
    transition: transform var(--re-t), box-shadow var(--re-t), border-color var(--re-t);
}
.re-award-card:hover, .re-award-card:focus-within {
    transform: translateY(-3px); border-color: rgba(11, 46, 111, .18);
    box-shadow: 0 2px 4px rgba(11, 46, 111, .05), 0 22px 44px -26px rgba(11, 46, 111, .4);
}
.re-award-image {
    position: relative; display: block; padding: 1.1rem;
    background: var(--re-navy-050); border-bottom: 1px solid var(--re-line-soft);
}
.re-award-image img { display: block; width: 100%; height: 220px; object-fit: contain; }
.re-award-zoom {
    position: absolute; right: .8rem; bottom: .8rem;
    display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255, 255, 255, .92); color: var(--re-navy); font-size: .85rem;
    opacity: 0; transition: opacity var(--re-t);
}
.re-award-image:hover .re-award-zoom, .re-award-image:focus-visible .re-award-zoom { opacity: 1; }
.re-award-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 1.35rem 1.4rem 1.4rem; }
.re-award-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .7rem; }
.re-award-type, .re-award-featured {
    display: inline-flex; align-items: center; gap: .3rem; padding: .26rem .6rem;
    border-radius: 999px; font-size: .74rem; font-weight: 700; line-height: 1.2;
}
.re-award-type { background: var(--re-navy-050); color: var(--re-navy); }
.re-award-featured { background: var(--re-accent-050); color: var(--re-accent-600); }
.re-award-title { font-size: 1.06rem; line-height: 1.4; color: var(--re-navy); margin: 0 0 .7rem; overflow-wrap: break-word; }
.re-award-meta { display: grid; gap: .45rem; margin: 0 0 .9rem; }
.re-award-meta > div { display: flex; flex-wrap: wrap; gap: .35rem; font-size: .86rem; }
.re-award-meta dt { color: var(--re-muted); font-weight: 600; min-width: 5.5rem; }
.re-award-meta dd { margin: 0; color: var(--re-ink); font-weight: 600; overflow-wrap: anywhere; }
.re-award-text { font-size: .9rem; line-height: 1.6; color: var(--re-body); margin: 0 0 1.1rem; }
.re-award-verify { margin-top: auto; align-self: flex-start; font-size: .87rem; min-height: 40px; }

@media (max-width: 991.98px) {
    .re-award-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
}
@media (max-width: 767.98px) {
    .re-award-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    .re-award-image img { height: 200px; }
}
@media (prefers-reduced-motion: reduce) {
    .re-award-card { transition: none; }
    .re-award-card:hover, .re-award-card:focus-within { transform: none; }
    .re-award-zoom { opacity: 1; transition: none; }
}

@media (max-width: 991.98px) {
    .re-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
    .re-why-figure img { max-height: 320px; }
}
@media (max-width: 767.98px) {
    .re-why-grid, .re-why-steps { grid-template-columns: minmax(0, 1fr); }
    .re-why-stats { padding: 1.25rem; gap: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
    .re-why-card { transition: none; }
    .re-why-card:hover { transform: none; }
}

/* -------------------------------------------------------------- page hero */
.re-pagehero {
    background: linear-gradient(128deg, var(--re-navy-900) 0%, var(--re-navy) 55%, var(--re-navy-500) 100%);
    background-size: cover; background-position: center;
    color: #fff; padding: clamp(2.5rem, 5.5vw, 4.25rem) 0;
    position: relative; overflow: hidden;
}
.re-pagehero::after {
    content: ""; position: absolute; right: -140px; top: -120px;
    width: 420px; height: 420px; border-radius: 50%;
    background: rgba(31, 157, 77, .10);
}
.re-pagehero > .container { position: relative; z-index: 1; }
.re-pagehero-badge {
    display: inline-block; background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
    color: #fff; font-size: .78rem; font-weight: 600; letter-spacing: .04em;
    padding: .35rem .9rem; border-radius: 999px; margin-bottom: .9rem;
}
.re-pagehero-title { color: #fff; font-size: clamp(1.75rem, 3.8vw, 2.7rem); margin-bottom: .6rem; }
.re-pagehero-sub { color: rgba(255, 255, 255, .82); max-width: 62ch; margin: 0; font-size: 1.02rem; }

.re-crumbs {
    display: flex; flex-wrap: wrap; gap: .45rem; list-style: none;
    padding: 0; margin: 0 0 1rem; font-size: .855rem;
}
.re-crumbs li { color: rgba(255, 255, 255, .68); }
.re-crumbs li + li::before { content: "/"; margin-right: .45rem; opacity: .5; }
.re-crumbs a { color: rgba(255, 255, 255, .9); }
.re-crumbs a:hover { color: var(--re-accent-600); }

/* ------------------------------------------------------------------- prose */
.re-prose { font-size: 1.02rem; color: var(--re-body); }
.re-prose > :first-child { margin-top: 0; }
.re-prose h2 { font-size: 1.45rem; margin: 2.1rem 0 .85rem; }
.re-prose h3 { font-size: 1.18rem; margin: 1.6rem 0 .65rem; }
.re-prose ul, .re-prose ol { margin-bottom: 1.15rem; padding-left: 1.3rem; }
.re-prose li { margin-bottom: .45rem; }
.re-prose img { border-radius: var(--re-r); }
.re-prose table { width: 100%; margin-bottom: 1.4rem; border-collapse: collapse; }
.re-prose th, .re-prose td { border: 1px solid var(--re-line); padding: .7rem .9rem; }
.re-prose th { background: var(--re-grey); color: var(--re-ink); font-weight: 700; }
.re-prose blockquote {
    border-left: 4px solid var(--re-accent); background: var(--re-grey);
    padding: 1rem 1.25rem; border-radius: 0 var(--re-r-sm) var(--re-r-sm) 0; margin: 1.4rem 0;
}
.re-note {
    display: flex; gap: .7rem; align-items: flex-start;
    background: var(--re-navy-050); border-radius: var(--re-r);
    padding: 1rem 1.15rem; font-size: .92rem; color: var(--re-navy-800);
}
.re-note i { color: var(--re-navy-500); font-size: 1.05rem; margin-top: .1rem; flex: 0 0 auto; }

/* ------------------------------------------------------------------ aside */
.re-aside { display: grid; gap: 1.15rem; position: sticky; top: calc(var(--re-header-h) + 20px); }
.re-aside-card { background: #fff; border: 1px solid var(--re-line); border-radius: var(--re-r-lg); padding: 1.5rem; }
.re-aside-title { font-size: 1.02rem; margin-bottom: .85rem; }
.re-aside-card p { font-size: .91rem; color: var(--re-body); }
.re-aside-cta { background: linear-gradient(140deg, var(--re-navy-050), #fff); border-color: rgba(11, 46, 111, .18); }

.re-aside-facts { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.re-aside-facts li {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    padding-bottom: .7rem; border-bottom: 1px dashed var(--re-line);
    font-size: .9rem;
}
.re-aside-facts li:last-child { border-bottom: 0; padding-bottom: 0; }
.re-aside-facts span { color: var(--re-muted); }
.re-aside-facts strong { color: var(--re-ink); text-align: right; }

.re-aside-links { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.re-aside-links a { display: flex; align-items: center; gap: .4rem; font-size: .91rem; }
.re-aside-links i { font-size: .7rem; color: var(--re-navy-300); }

.re-mission { background: linear-gradient(140deg, var(--re-navy) 0%, var(--re-navy-800) 100%); border: 0; color: #fff; }
.re-mission .re-eyebrow { color: var(--re-accent-600); }
.re-mission-line { font-family: var(--re-font-head); font-size: 1.2rem; font-weight: 700; color: #fff; margin-bottom: .5rem; line-height: 1.35; }
.re-mission-sub { color: rgba(255, 255, 255, .76); font-size: .92rem; margin: 0; }

/* -------------------------------------------------------------- checklist */
.re-checklist { background: #fff; border: 1px solid var(--re-line); border-radius: var(--re-r-lg); padding: 1.5rem; height: 100%; }
.re-checklist-title { font-size: 1.02rem; margin-bottom: 1rem; display: flex; align-items: center; gap: .55rem; }
.re-checklist-title i { color: var(--re-navy-500); }
.re-checklist-items { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.re-checklist-items li { display: flex; align-items: flex-start; gap: .6rem; font-size: .9rem; }
.re-checklist-items i { font-size: .95rem; color: var(--re-line); margin-top: .18rem; flex: 0 0 auto; }
.re-checklist-items i.is-required { color: #12734a; }
.re-flag {
    font-style: normal; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    background: var(--re-accent-050); color: var(--re-accent-600); padding: .1rem .4rem; border-radius: 5px; margin-left: .3rem;
}
.re-legend {
    display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: center;
    margin-top: 1.75rem; font-size: .82rem; color: var(--re-muted);
}
.re-legend span { display: inline-flex; align-items: center; gap: .35rem; }

/* ------------------------------------------------------------------ steps */
.re-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.15rem; max-width: 62rem; }
.re-steps-compact { margin: 1.6rem 0; gap: .9rem; }
.re-step { display: flex; gap: 1.1rem; align-items: flex-start; }
.re-step-num {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 46px; height: 46px; border-radius: 13px;
    background: var(--re-navy); color: #fff;
    font-family: var(--re-font-head); font-weight: 800; font-size: .95rem;
}
.re-step-title { font-size: 1.03rem; margin-bottom: .3rem; }
.re-step-text { font-size: .92rem; color: var(--re-body); margin: 0; }

/* ------------------------------------------------------------------ alert */
.re-alert {
    display: flex; gap: .9rem; align-items: flex-start;
    background: var(--re-navy-050); border-left: 4px solid var(--re-navy);
    border-radius: 0 var(--re-r) var(--re-r) 0;
    padding: 1.15rem 1.35rem; margin-top: 2rem;
    font-size: .94rem; color: var(--re-navy-800);
}
.re-alert i { font-size: 1.2rem; color: var(--re-navy); flex: 0 0 auto; margin-top: .1rem; }
.re-alert-warn { background: var(--re-warn-050); border-left-color: var(--re-warn); color: #6b4c0d; }
.re-alert-warn i { color: var(--re-warn-600); }

/* ------------------------------------------------------------------ TOPIK */
.re-topik { display: grid; gap: .6rem; }
.re-topik-row {
    display: grid; grid-template-columns: auto auto auto 1fr; gap: .6rem 1.1rem; align-items: center;
    background: #fff; border: 1px solid var(--re-line); border-radius: var(--re-r); padding: 1rem 1.25rem;
}
.re-topik-num { font-family: var(--re-font-head); font-weight: 800; color: var(--re-navy); font-size: .95rem; white-space: nowrap; }
.re-topik-band { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--re-muted); }
.re-topik-label { font-size: .88rem; font-weight: 600; color: var(--re-ink); white-space: nowrap; }
.re-topik-text { font-size: .89rem; color: var(--re-body); }

/* ------------------------------------------------------------------- visa */
.re-visa-code {
    display: inline-block; font-family: var(--re-font-head); font-weight: 800;
    font-size: 1.35rem; color: var(--re-navy); letter-spacing: -.02em;
}
.re-visa-name { font-size: 1rem; margin: .3rem 0 .6rem; }
.re-visa-text { font-size: .88rem; color: var(--re-body); margin: .7rem 0 0; }
.re-visa-work { font-size: .84rem; color: #12734a; margin: .6rem 0 0; display: flex; align-items: center; gap: .4rem; }

/* ---------------------------------------------------------------- intakes */
.re-intake { text-align: center; }
.re-intake-season {
    display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--re-accent-600);
}
.re-intake-name { font-size: 1.08rem; margin: .35rem 0 .6rem; }
.re-intake-deadline { font-size: .85rem; color: var(--re-body); margin-bottom: .8rem; }

/* ----------------------------------------------------------------- cities */
.re-city { padding: 0; overflow: hidden; }
.re-city img { width: 100%; height: 150px; object-fit: cover; }
.re-city-body { padding: 1.2rem 1.3rem; }
.re-city-body h3 { font-size: 1.02rem; margin-bottom: .4rem; }
.re-city-body h3 span { font-size: .8rem; color: var(--re-muted); font-weight: 500; margin-left: .35rem; }
.re-city-body p { font-size: .87rem; color: var(--re-body); margin: 0; }
.re-city-cost { margin-top: .5rem !important; font-size: .82rem !important; color: var(--re-navy-500) !important; display: flex; align-items: center; gap: .35rem; }

/* ----------------------------------------------------------------- people */
.re-person {
    text-align: center; background: #fff; border: 1px solid var(--re-line);
    border-radius: var(--re-r-lg); padding: 1.8rem 1.4rem; height: 100%;
    transition: transform var(--re-t), box-shadow var(--re-t);
}
.re-person:hover { transform: translateY(-4px); box-shadow: var(--re-sh); }
.re-person-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin: 0 auto 1rem; display: block; }
.re-person-initials {
    display: grid; place-items: center; background: var(--re-navy-050); color: var(--re-navy);
    font-family: var(--re-font-head); font-weight: 800; font-size: 1.5rem;
}
.re-person-name { font-size: 1.02rem; margin-bottom: .2rem; }
.re-person-role { font-size: .855rem; color: var(--re-navy-500); font-weight: 600; margin-bottom: .5rem; }
.re-person-expertise { font-size: .85rem; color: var(--re-body); margin-bottom: .8rem; }
.re-person-links { display: flex; justify-content: center; gap: .6rem; }

/* ---- the Team page ---------------------------------------------------- */
/* Four across on a desktop, two on a tablet, one on a phone — and every card
   the same height whatever its biography, so the portraits line up. */
.re-team-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.re-team-grid .re-person {
    display: flex; flex-direction: column; height: 100%; padding: 0; overflow: hidden; text-align: left;
    background: #fff; border: 1px solid var(--re-line); border-radius: 16px;
    box-shadow: 0 1px 2px rgba(11, 46, 111, .04), 0 12px 30px -22px rgba(11, 46, 111, .3);
}
.re-team-grid .re-person.is-featured { border-color: rgba(31, 157, 77, .35); }
.re-team-grid .re-person-media { background: var(--re-navy-050); }
/* A consistent portrait box: the crop happens in the image, never the layout. */
.re-team-grid .re-person-photo {
    width: 100%; height: auto; aspect-ratio: 4 / 5; margin: 0; border-radius: 0;
    object-fit: cover; object-position: center top; display: block;
}
.re-team-grid .re-person-initials {
    display: grid; place-items: center; aspect-ratio: 4 / 5;
    background: linear-gradient(145deg, var(--re-navy) 0%, var(--re-navy-500) 100%);
    color: #fff; font-family: var(--re-font-head); font-size: 2rem; font-weight: 800; letter-spacing: .02em;
}
.re-team-grid .re-person-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 1.2rem 1.25rem 1.3rem; }
.re-team-grid .re-person-name { font-size: 1.05rem; color: var(--re-navy); margin: 0 0 .2rem; }
.re-team-grid .re-person-role { font-size: .87rem; color: var(--re-accent-600); font-weight: 700; margin: 0 0 .35rem; }
.re-person-dept { font-size: .8rem; color: var(--re-muted); margin: 0 0 .6rem; }
.re-person-bio { font-size: .88rem; line-height: 1.6; color: var(--re-body); margin: 0 0 .8rem; }
.re-person-tags { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 .9rem; padding: 0; }
.re-person-tags li {
    padding: .2rem .55rem; border-radius: 999px; background: var(--re-navy-050);
    color: var(--re-navy); font-size: .72rem; font-weight: 600;
}
.re-team-grid .re-person-links {
    justify-content: flex-start; gap: .4rem; margin-top: auto; padding-top: .3rem;
}
.re-team-grid .re-person-links a {
    display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
    background: var(--re-grey); color: var(--re-navy); font-size: .92rem;
    transition: background-color var(--re-t), color var(--re-t);
}
.re-team-grid .re-person-links a:hover, .re-team-grid .re-person-links a:focus-visible {
    background: var(--re-navy); color: #fff;
}
.re-team-grid .re-person:hover { transform: translateY(-4px); }

@media (max-width: 1199.98px) { .re-team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 991.98px)  { .re-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } }
@media (max-width: 575.98px)  { .re-team-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; } }
@media (prefers-reduced-motion: reduce) {
    .re-team-grid .re-person:hover { transform: none; }
}
.re-person-links a {
    width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
    background: var(--re-grey); color: var(--re-navy); transition: background var(--re-t), color var(--re-t);
}
.re-person-links a:hover { background: var(--re-navy); color: #fff; }

/* --------------------------------------------------------------------- FAQ */
.re-faq-nav { position: sticky; top: calc(var(--re-header-h) + 20px); display: grid; gap: .3rem; }
.re-faq-nav-title { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--re-muted); margin-bottom: .5rem; }
.re-faq-nav a {
    display: flex; align-items: center; gap: .55rem;
    padding: .6rem .75rem; border-radius: var(--re-r-sm);
    font-size: .9rem; color: var(--re-body); transition: background var(--re-t), color var(--re-t);
}
.re-faq-nav a:hover { background: var(--re-navy-050); color: var(--re-navy); }
.re-faq-nav a span { margin-left: auto; font-size: .75rem; color: var(--re-muted); }
.re-faq-nav i { color: var(--re-navy-300); }

.re-faq-group { margin-bottom: 2.5rem; scroll-margin-top: calc(var(--re-header-h) + 24px); }
.re-faq-group-title { font-size: 1.2rem; margin-bottom: 1rem; display: flex; align-items: center; gap: .6rem; }
.re-faq-group-title i { color: var(--re-navy-500); }

.re-accordion .accordion-item {
    border: 1px solid var(--re-line); border-radius: var(--re-r) !important;
    margin-bottom: .7rem; overflow: hidden; background: #fff;
}
.re-accordion .accordion-button {
    font-family: var(--re-font); font-weight: 600; font-size: .97rem;
    color: var(--re-ink); background: #fff; padding: 1.05rem 1.25rem;
}
.re-accordion .accordion-button:not(.collapsed) { color: var(--re-navy); background: var(--re-navy-050); box-shadow: none; }
.re-accordion .accordion-button:focus { box-shadow: none; border-color: transparent; }
.re-accordion .accordion-button::after { width: 1rem; height: 1rem; background-size: 1rem; }
.re-accordion .accordion-body { font-size: .94rem; color: var(--re-body); padding: 1.1rem 1.25rem; }

.re-faq-ask {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem;
    background: #fff; border: 1px solid var(--re-line); border-radius: var(--re-r-lg); padding: 2rem;
}
.re-faq-ask h2 { font-size: 1.25rem; margin-bottom: .35rem; }
.re-faq-ask p { margin: 0; font-size: .94rem; color: var(--re-body); }
.re-faq-ask-actions { display: flex; flex-wrap: wrap; gap: .7rem; }

/* ------------------------------------------------------------- faq page -- */
/* A centred column of question cards. Each question is a native <details>, so
   it opens and closes with no script and from the keyboard; site.js only keeps
   one open at a time. The green plus turns into a minus when a question opens.
   Scoped to the FAQ page. */

.re-faq-page .re-faq-column { max-width: 880px; margin: 0 auto; }

.re-faq-cats {
    display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem;
    margin: 0 0 2.25rem;
}
.re-faq-cat {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .5rem .95rem;
    border: 1px solid var(--re-line); border-radius: 999px;
    background: var(--re-white); color: var(--re-navy);
    font-size: .88rem; font-weight: 600; text-decoration: none;
    box-shadow: var(--re-sh-xs);
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.re-faq-cat i { color: var(--re-accent); }
.re-faq-cat:hover,
.re-faq-cat:focus-visible { border-color: var(--re-accent); color: var(--re-accent-700); background: var(--re-accent-050); }
.re-faq-cat-count {
    min-width: 1.5rem; padding: 0 .4rem; border-radius: 999px;
    background: var(--re-navy-050); color: var(--re-muted);
    font-size: .75rem; text-align: center;
}

.re-faq-page .re-faq-group { margin-bottom: 2.25rem; scroll-margin-top: calc(var(--re-header-h) + 24px); }
.re-faq-page .re-faq-group:last-child { margin-bottom: 0; }
.re-faq-page .re-faq-group-title { font-size: 1.15rem; color: var(--re-navy); margin-bottom: 1rem; }
.re-faq-page .re-faq-group-title i { color: var(--re-accent); }

.re-faq-page .re-faq { display: grid; gap: .85rem; }

.re-faq-page .re-faq-item {
    background: var(--re-white);
    border: 1px solid var(--re-line);
    border-radius: 14px;
    box-shadow: 0 10px 24px -20px rgba(11, 46, 111, .45);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.re-faq-page .re-faq-item[open] {
    border-color: rgba(31, 157, 77, .45);
    box-shadow: 0 16px 32px -22px rgba(11, 46, 111, .5);
}

.re-faq-question {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.15rem 1.35rem;
    border-radius: 14px;
    list-style: none; cursor: pointer;
    font-size: 1.02rem; font-weight: 600; line-height: 1.45; color: var(--re-navy);
}
.re-faq-question::-webkit-details-marker { display: none; }
.re-faq-question::marker { content: ""; }
.re-faq-question:hover { color: var(--re-accent-700); }
.re-faq-question:focus-visible { outline: 3px solid var(--re-accent); outline-offset: 2px; }

.re-faq-toggle {
    position: relative; flex: none;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--re-accent-050);
    transition: background .2s ease;
}
.re-faq-toggle::before,
.re-faq-toggle::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 12px; height: 2px; border-radius: 2px;
    background: var(--re-accent-700);
    transform: translate(-50%, -50%);
    transition: transform .25s ease, background .2s ease;
}
.re-faq-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.re-faq-item[open] .re-faq-toggle { background: var(--re-accent); }
.re-faq-item[open] .re-faq-toggle::before,
.re-faq-item[open] .re-faq-toggle::after { background: var(--re-white); }
/* The upright bar lies down: the plus becomes a minus. */
.re-faq-item[open] .re-faq-toggle::after { transform: translate(-50%, -50%) rotate(0deg); }

.re-faq-answer {
    margin: 0 1.35rem;
    padding: 1rem 0 1.25rem;
    border-top: 1px solid var(--re-line);
    font-size: .98rem; line-height: 1.75; color: var(--re-body);
}
.re-faq-answer > :last-child { margin-bottom: 0; }

@media (max-width: 575.98px) {
    /* The chips scroll sideways inside their own row, never the page. */
    .re-faq-cats {
        flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto;
        margin: 0 -.75rem 1.75rem; padding: 0 .75rem .35rem;
    }
    .re-faq-cat { flex: none; }
    .re-faq-question { padding: 1rem 1.05rem; font-size: .97rem; }
    .re-faq-answer { margin: 0 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
    .re-faq-page .re-faq-item,
    .re-faq-toggle,
    .re-faq-toggle::before,
    .re-faq-toggle::after,
    .re-faq-cat { transition: none; }
}

/* ------------------------------------------------------ eligibility checker */
.re-checker {
    background: #fff; border: 1px solid var(--re-line); border-radius: var(--re-r-xl);
    padding: 1.9rem; box-shadow: var(--re-sh);
}
.re-checker-progress { display: flex; gap: .4rem; margin-bottom: 1.5rem; }
.re-checker-progress span { flex: 1; height: 4px; border-radius: 2px; background: var(--re-line); transition: background var(--re-t); }
.re-checker-progress span.is-on { background: var(--re-navy); }

.re-checker-step { display: none; border: 0; padding: 0; margin: 0; }
.re-checker-step.is-active { display: block; animation: reFade .28s var(--re-ease); }
.re-checker-q {
    font-family: var(--re-font-head); font-size: 1.12rem; font-weight: 700;
    color: var(--re-ink); margin-bottom: 1.1rem; float: none; width: auto;
}
.re-checker-opts { display: grid; gap: .6rem; }

.re-opt { position: relative; display: block; cursor: pointer; }
.re-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.re-opt span {
    display: block; padding: .9rem 1.1rem;
    border: 1.5px solid var(--re-line); border-radius: var(--re-r);
    font-size: .93rem; color: var(--re-body);
    transition: border-color var(--re-t), background var(--re-t), color var(--re-t);
}
.re-opt:hover span { border-color: var(--re-navy-300); background: var(--re-navy-050); }
.re-opt input:checked + span {
    border-color: var(--re-navy); background: var(--re-navy-050);
    color: var(--re-navy-800); font-weight: 600;
}
.re-opt input:focus-visible + span { outline: 3px solid rgba(26, 74, 158, .35); outline-offset: 2px; }

.re-checker-result { animation: reFade .3s var(--re-ease); }
.re-checker-result-label { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--re-accent-600); }
.re-checker-result-title { font-size: 1.4rem; margin: .5rem 0 .6rem; }
.re-checker-result-text { font-size: .95rem; color: var(--re-body); }
.re-checker-result-meta { margin-bottom: 1.2rem; }
.re-checker-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 1.1rem; }
.re-checker-disclaimer {
    display: flex; gap: .55rem; align-items: flex-start;
    font-size: .82rem; color: var(--re-muted); margin: 0;
    padding-top: 1rem; border-top: 1px dashed var(--re-line);
}
.re-checker-disclaimer i { margin-top: .15rem; flex: 0 0 auto; }

.re-checker-nav { display: flex; gap: .6rem; margin-top: 1.5rem; }
.re-checker-nav .re-btn { flex: 1; }

@keyframes reFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ ticks */
.re-ticks { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .6rem; }
.re-ticks li { display: flex; align-items: flex-start; gap: .55rem; font-size: .93rem; color: var(--re-body); }
.re-ticks i { color: #12734a; margin-top: .15rem; flex: 0 0 auto; }

/* -------------------------------------------------------------------- CTA */
.re-cta { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.re-cta-inner {
    background: linear-gradient(128deg, var(--re-navy) 0%, var(--re-navy-500) 100%);
    color: #fff; border-radius: var(--re-r-xl);
    padding: clamp(2rem, 4vw, 3.1rem);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.75rem;
    box-shadow: var(--re-sh-lg);
    position: relative; overflow: hidden;
}
.re-cta-inner::after {
    content: ""; position: absolute; right: -90px; bottom: -130px;
    width: 340px; height: 340px; border-radius: 50%; background: rgba(31, 157, 77, .13);
}
.re-cta-copy { position: relative; z-index: 1; max-width: 44rem; }
.re-cta-title { color: #fff; font-size: clamp(1.35rem, 2.6vw, 1.95rem); margin-bottom: .5rem; }
.re-cta-text { color: rgba(255, 255, 255, .85); margin: 0; }
.re-cta-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: .75rem; }

.re-cta-soft .re-cta-inner { background: var(--re-grey); color: var(--re-ink); box-shadow: none; border: 1px solid var(--re-line); }
.re-cta-soft .re-cta-title { color: var(--re-ink); }
.re-cta-soft .re-cta-text { color: var(--re-body); }
.re-cta-soft .re-cta-inner::after { display: none; }

/* ------------------------------------------------------------------ forms */
.form-label { font-weight: 600; color: var(--re-ink); font-size: .885rem; margin-bottom: .4rem; }
.form-control, .form-select {
    border-radius: var(--re-r-sm); border: 1.5px solid var(--re-line);
    padding: .72rem .9rem; font-size: .95rem; color: var(--re-ink);
    transition: border-color var(--re-t), box-shadow var(--re-t);
}
.form-control:focus, .form-select:focus {
    border-color: var(--re-navy-500); box-shadow: 0 0 0 .2rem rgba(26, 74, 158, .13);
}
.form-control::placeholder { color: #b4bccb; }
.form-check-input { border-color: var(--re-line); }
.form-check-input:checked { background-color: var(--re-navy); border-color: var(--re-navy); }
.form-check-label { font-size: .9rem; color: var(--re-body); }
.invalid-feedback { font-size: .82rem; }
.is-invalid { border-color: var(--re-danger) !important; }

.re-form-card {
    background: #fff; border: 1px solid var(--re-line);
    border-radius: var(--re-r-xl); padding: clamp(1.5rem, 3vw, 2.25rem);
    box-shadow: var(--re-sh);
}
.re-form-card-lg { box-shadow: var(--re-sh-lg); }
.re-form-title { font-size: 1.25rem; margin-bottom: .4rem; }
.re-form-sub { font-size: .88rem; color: var(--re-muted); margin-bottom: 1.4rem; }
.re-form-note {
    display: flex; align-items: flex-start; gap: .5rem;
    font-size: .82rem; color: var(--re-muted); margin: .9rem 0 0;
}
.re-form-note i { color: #12734a; margin-top: .15rem; }

/* Honeypot: kept out of view without display:none, which some bots detect. */
.re-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------------- contact */
.re-contact-list { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: 1.05rem; }
.re-contact-list li { display: flex; gap: .85rem; align-items: flex-start; }
.re-contact-list i {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 42px; height: 42px; border-radius: 12px;
    background: var(--re-navy-050); color: var(--re-navy); font-size: 1.05rem;
}
.re-contact-list span { display: flex; flex-direction: column; line-height: 1.45; font-size: .95rem; color: var(--re-ink); }
.re-contact-list small { font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--re-muted); }

.re-contact-note {
    display: flex; gap: .7rem; align-items: flex-start;
    margin-top: 1.6rem; padding: 1.1rem 1.25rem;
    background: var(--re-accent-050); border-radius: var(--re-r); font-size: .9rem; color: #6b4c0d;
}
.re-contact-note i { color: var(--re-accent-600); font-size: 1.1rem; margin-top: .1rem; }

.re-office-name { font-size: 1.02rem; margin: .55rem 0 .7rem; }
.re-office-line { font-size: .875rem; color: var(--re-body); margin-bottom: .4rem; display: flex; align-items: flex-start; gap: .5rem; }
.re-office-line i { color: var(--re-navy-300); margin-top: .18rem; }

.re-map { line-height: 0; }
.re-map iframe { width: 100%; height: 420px; border: 0; display: block; }

/* ------------------------------------------------------------ empty state */
.re-empty-state {
    text-align: center; padding: 3rem 1.5rem;
    background: var(--re-grey); border-radius: var(--re-r-lg);
    border: 1px dashed var(--re-line);
}
.re-empty-state i { font-size: 2.2rem; color: var(--re-navy-300); display: block; margin-bottom: .9rem; }
.re-empty-state h3 { font-size: 1.1rem; margin-bottom: .45rem; }
.re-empty-state p { font-size: .93rem; color: var(--re-body); margin: 0 auto; max-width: 46ch; }

/* ----------------------------------------------------------------- footer */
.re-footer { background: var(--re-navy-900); color: rgba(255, 255, 255, .72); padding: clamp(3rem, 5vw, 4.25rem) 0 1.75rem; }
.re-footer .re-brand-name { color: #fff; }
.re-footer .re-brand-sub { color: rgba(255, 255, 255, .55); }
.re-footer-brand { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.1rem; }
.re-footer-text { font-size: .93rem; margin-bottom: .8rem; }
.re-footer-slogan { color: var(--re-accent-light); font-weight: 600; font-size: .88rem; margin-bottom: 1.2rem; }

/* Wraps rather than pushing the page sideways: six icons are wider than the
   contact column between 992px and 1200px. */
.re-footer-socials { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; list-style: none; }
.re-footer-socials a {
    width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
    background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .82);
    transition: background var(--re-t), color var(--re-t), transform var(--re-t);
}
.re-footer-socials a:hover { background: var(--re-accent); color: var(--re-navy-900); transform: translateY(-2px); }

.re-footer-heading {
    color: #fff; font-family: var(--re-font); font-size: .8rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em; margin-bottom: 1.1rem;
}
.re-footer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.re-footer-list a { color: rgba(255, 255, 255, .72); font-size: .92rem; }
.re-footer-list a:hover { color: var(--re-accent-light); }

.re-footer-contact { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; gap: .75rem; }
.re-footer-contact li { display: flex; gap: .65rem; align-items: flex-start; font-size: .92rem; }
.re-footer-contact i { color: var(--re-accent); margin-top: .2rem; flex: 0 0 auto; }
.re-footer-contact a { color: rgba(255, 255, 255, .72); }
.re-footer-contact a:hover { color: var(--re-accent); }

.re-footer-inline { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.re-footer-inline a { font-size: .86rem; color: rgba(255, 255, 255, .6); }
.re-footer-inline a:hover { color: var(--re-accent); }

.re-footer-rule { border-color: rgba(255, 255, 255, .1); margin: 2.5rem 0 1.4rem; opacity: 1; }
.re-footer-bottom {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
    font-size: .865rem; color: rgba(255, 255, 255, .55);
}
.re-footer-legal { list-style: none; display: flex; flex-wrap: wrap; gap: 1.1rem; padding: 0; margin: 0; }
.re-footer-legal a { color: rgba(255, 255, 255, .55); font-size: .865rem; }
.re-footer-legal a:hover { color: var(--re-accent); }


/* ---- the four-column grid ------------------------------------------------ */
/* The company column is widest because it carries the offices; the rest share
   what is left. Below 992px it becomes two columns, and one on a phone. */
.re-footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr);
    gap: clamp(1.75rem, 3vw, 3rem);
}

.re-footer-col { min-width: 0; }

/* A hairline between columns rather than boxes around them. */
@media (min-width: 992px) {
    .re-footer-col + .re-footer-col {
        padding-left: clamp(1.5rem, 2.5vw, 2.5rem);
        border-left: 1px solid rgba(255, 255, 255, .08);
    }
}

.re-footer-heading::after {
    content: ""; display: block; width: 34px; height: 2px; border-radius: 2px;
    margin-top: .55rem; background: var(--re-accent);
}

/* ---- offices ------------------------------------------------------------- */
.re-footer-offices { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }

.re-footer-office {
    padding-left: .85rem;
    border-left: 2px solid rgba(255, 255, 255, .12);
}
.re-footer-office-name {
    display: flex; align-items: center; gap: .45rem; margin: 0 0 .25rem;
    font-size: .86rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--re-white);
}
.re-footer-office-name i { color: var(--re-accent); }
.re-footer-office-line {
    display: flex; align-items: flex-start; gap: .45rem; margin: 0 0 .2rem;
    font-size: .88rem; line-height: 1.5; color: rgba(255, 255, 255, .68);
}
.re-footer-office-line i { margin-top: .18rem; color: rgba(255, 255, 255, .45); }
.re-footer-office-line a { color: rgba(255, 255, 255, .78); }
.re-footer-office-line a:hover { color: var(--re-accent-light); }

/* ---- links: a quiet slide on hover, nothing that jumps ------------------- */
.re-footer-list a { display: inline-block; transition: color .15s ease, transform .15s ease; }
.re-footer-list a:hover { transform: translateX(3px); }

/* ---- newsletter ---------------------------------------------------------- */
.re-footer-news { margin: 0 0 1.2rem; }
.re-footer-news-title {
    margin: 0 0 .3rem; font-size: .95rem; font-weight: 700; color: var(--re-white);
}
.re-footer-news-text { margin: 0 0 .7rem; font-size: .86rem; color: rgba(255, 255, 255, .62); }

.re-footer-news-row { display: flex; gap: .5rem; }
.re-footer-news-row .form-control {
    min-width: 0;
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .16);
    color: var(--re-white);
    border-radius: 10px;
}
.re-footer-news-row .form-control::placeholder { color: rgba(255, 255, 255, .45); }
.re-footer-news-row .form-control:focus {
    background: rgba(255, 255, 255, .12);
    border-color: var(--re-accent);
    box-shadow: none;
    color: var(--re-white);
}
.re-footer-news-row .re-btn { flex: 0 0 auto; }

/* ---- bottom bar ---------------------------------------------------------- */
.re-footer-bottom {
    margin-top: clamp(2rem, 3.5vw, 2.75rem);
    padding-top: 1.4rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
}
.re-footer-copy { margin: 0; }

/* The developer credit: quieter than the copyright beside it, and it wraps
   onto its own line on a phone rather than squeezing the year. */
.re-footer-credit { display: inline-block; margin-left: .5rem; color: rgba(255, 255, 255, .45); }
.re-footer-credit a { color: rgba(255, 255, 255, .62); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .18); }
.re-footer-credit a:hover { color: var(--re-accent-light); border-bottom-color: var(--re-accent); }

@media (max-width: 575.98px) {
    .re-footer-credit { display: block; margin-left: 0; margin-top: .35rem; }
}

@media (max-width: 991.98px) {
    .re-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    .re-footer-grid { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
    .re-footer-news-row { flex-wrap: wrap; }
    .re-footer-news-row .form-control,
    .re-footer-news-row .re-btn { width: 100%; }
    .re-footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ------------------------------------------------------------- back to top */
.re-to-top {
    position: fixed; right: 18px; bottom: calc(var(--re-actionbar-h) + 14px); z-index: 1030;
    width: 44px; height: 44px; border-radius: 50%; border: 0;
    background: var(--re-navy); color: #fff;
    display: grid; place-items: center;
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity var(--re-t), visibility var(--re-t), transform var(--re-t);
    box-shadow: var(--re-sh);
}
.re-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
@media (min-width: 992px) { .re-to-top { bottom: 22px; } }

/* ------------------------------------------------------------- responsive */
@media (max-width: 575.98px) {
    .re-hero-actions .re-btn,
    .re-cta-actions .re-btn,
    .re-checker-actions .re-btn { width: 100%; }
    .re-brand-sub { display: none; }
    /* Smaller, and capped so it can never reach the burger control. */
    .re-brand-logo { max-width: 150px; }
    .re-brand-header .re-brand-logo { max-height: 40px; }
    .re-topik-row { grid-template-columns: 1fr; gap: .3rem; }
    .re-topik-text { grid-column: 1; }
    .re-faq-ask { flex-direction: column; align-items: flex-start; }
    .re-checker { padding: 1.35rem; }
}

@media (max-width: 991.98px) {
    .re-aside, .re-faq-nav { position: static; }
    .re-cta-inner { flex-direction: column; align-items: flex-start; }
}


/* ================================================================ catalogue */
/* Programmes.

   Two ideas carry through the whole block. First, a card must look right when
   most of its fields are empty — a sparse record is the normal case here, not a
   broken one, so nothing reserves space it might not fill. Second, anything
   that reports how current the data is (deadline banners, "last verified"
   lines) stays visually quiet: it is context, not a sales badge. */

/* ------------------------------------------------------------ filter panel */
.re-filters-panel {
    background: #fff;
    border: 1px solid var(--re-line);
    border-radius: var(--re-r-lg);
    padding: 1.4rem;
    position: sticky;
    top: calc(var(--re-header-h) + 20px);
}

.re-filter-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem; padding-bottom: .85rem; margin-bottom: 1rem;
    border-bottom: 1px solid var(--re-line-soft);
}
.re-filter-title { font-size: 1rem; margin: 0; display: flex; align-items: center; gap: .45rem; }
.re-filter-title i { color: var(--re-navy-300); }
.re-filter-reset { font-size: .8rem; font-weight: 600; color: var(--re-navy-500); }

.re-filter-group { margin-bottom: .95rem; }
.re-filter-group .form-label { font-size: .8rem; font-weight: 600; color: var(--re-ink); margin-bottom: .3rem; }
.re-filter-group .form-control,
.re-filter-group .form-select { font-size: .9rem; }

.re-filter-note {
    font-size: .78rem; color: var(--re-muted); line-height: 1.6;
    margin: 1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--re-line-soft);
}

/* --------------------------------------------------------------- results */
.re-results-count { font-size: .87rem; color: var(--re-muted); margin-bottom: 1.1rem; }
.re-results-pagination { display: flex; justify-content: center; }

/* The fragment is replaced wholesale by the AJAX filter; the fade keeps the
   swap from reading as a flicker without delaying anything. */
.re-results[data-loading="true"] { opacity: .45; transition: opacity var(--re-t); }

/* ------------------------------------------------------------- featured */
.re-featured-strip { margin-bottom: 1.75rem; }
.re-featured-title {
    font-size: .78rem; text-transform: uppercase; letter-spacing: .09em;
    color: var(--re-muted); margin-bottom: .7rem;
}
.re-featured-card {
    display: flex; align-items: center; gap: .65rem; height: 100%;
    padding: .7rem .9rem; background: var(--re-navy-050);
    border: 1px solid rgba(11, 46, 111, .12); border-radius: var(--re-r-sm);
    font-size: .88rem; font-weight: 600; color: var(--re-navy);
    transition: border-color var(--re-t), background var(--re-t);
}
.re-featured-card:hover, .re-featured-card:focus-visible {
    background: #fff; border-color: var(--re-navy-300); color: var(--re-navy);
}
.re-featured-card img { width: 30px; height: 30px; object-fit: contain; flex: 0 0 auto; }
.re-featured-card span { min-width: 0; }

/* ------------------------------------------------------------ result card */
.re-uni-card, .re-prog-card, .re-sch-card {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--re-line);
    border-radius: var(--re-r-lg); padding: 1.35rem;
    transition: border-color var(--re-t), box-shadow var(--re-t), transform var(--re-t);
}
.re-uni-card:hover, .re-prog-card:hover, .re-sch-card:hover {
    border-color: var(--re-navy-300); box-shadow: var(--re-sh-sm); transform: translateY(-2px);
}

.re-uni-card-head { display: flex; align-items: flex-start; gap: .85rem; margin-bottom: .9rem; }
.re-uni-card-head > div { min-width: 0; }
.re-uni-logo-empty {
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--re-navy-300); font-size: 1.3rem;
}
.re-uni-card .re-uni-name { font-size: 1.02rem; margin-bottom: .15rem; line-height: 1.35; }
.re-uni-card .re-uni-name a { color: var(--re-ink); }
.re-uni-card .re-uni-name a:hover { color: var(--re-navy); }
.re-uni-card .re-uni-ko { margin-bottom: 0; }

.re-uni-levels { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .9rem; }

.re-uni-card-foot {
    display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
    margin-top: auto; padding-top: .85rem; border-top: 1px solid var(--re-line-soft);
}
.re-uni-card-foot .re-uni-link { margin-left: auto; }

.re-uni-verified {
    display: flex; align-items: center; gap: .3rem;
    font-size: .74rem; color: var(--re-muted); margin: .6rem 0 0;
}

/* ------------------------------------------------------- programme card */
.re-prog-name { font-size: 1.02rem; line-height: 1.4; margin-bottom: .35rem; }
.re-prog-name a { color: var(--re-ink); }
.re-prog-name a:hover { color: var(--re-navy); }

.re-prog-foot {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    margin-top: auto; padding-top: .85rem; border-top: 1px solid var(--re-line-soft);
}
.re-prog-foot .re-uni-verified { margin: 0; margin-left: auto; }

.re-sch-card { border-color: rgba(31, 157, 77, .35); }
.re-sch-card:hover { border-color: var(--re-accent); }

/* A plain list of related programmes or awards on a detail page. */
.re-prog-list { list-style: none; padding: 0; margin: 0 0 1.1rem; display: grid; gap: .1rem; }
.re-prog-list li {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    padding: .7rem 0; border-bottom: 1px solid var(--re-line-soft);
}
.re-prog-list li:last-child { border-bottom: 0; }
.re-prog-list a { font-weight: 600; color: var(--re-ink); }
.re-prog-list a:hover { color: var(--re-navy); }
.re-prog-list .re-tag { margin-left: auto; }

/* ---- Programmes page: the filter drawer ----------------------------------- */
/* Desktop: the panel sits in the left column. Below 992px it moves into an
   off-canvas drawer behind a Filter button, so the cards come first. */
.re-filter-toggle { display: flex; align-items: center; justify-content: center; gap: .5rem; }
.re-filter-count {
    display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem;
    border-radius: 999px; background: var(--re-accent); color: #fff; font-size: .72rem; font-weight: 700;
}
@media (min-width: 992px) {
    .re-filter-drawer, .re-filter-drawer .offcanvas-body { height: 100%; }
    .re-filter-drawer .offcanvas-body { display: block; }
}
@media (max-width: 991.98px) {
    .re-filter-drawer { --bs-offcanvas-width: min(360px, 90vw); }
    .re-filter-drawer .offcanvas-header { border-bottom: 1px solid var(--re-line); }
    .re-filter-drawer .offcanvas-title { font-size: 1.05rem; font-weight: 700; color: var(--re-navy); }
    .re-filter-drawer .re-filters-panel { position: static; margin: 0; padding: 0; border: 0; border-radius: 0; }
}

/* ---- Programmes page: the programme card ---------------------------------- */
.re-pcard-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.re-pcard {
    position: relative; display: flex; flex-direction: column; height: 100%;
    background: #fff; border: 1px solid var(--re-line); border-radius: 16px;
    padding: 1.4rem 1.4rem 1.3rem;
    box-shadow: 0 1px 2px rgba(11, 46, 111, .04), 0 12px 30px -22px rgba(11, 46, 111, .3);
    transition: transform var(--re-t), box-shadow var(--re-t), border-color var(--re-t);
}
.re-pcard:hover {
    transform: translateY(-3px); border-color: rgba(11, 46, 111, .18);
    box-shadow: 0 2px 4px rgba(11, 46, 111, .05), 0 22px 44px -26px rgba(11, 46, 111, .4);
}
.re-pcard.is-featured { border-color: rgba(31, 157, 77, .38); }
.re-pcard.is-featured::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 3px; border-radius: 16px 16px 0 0;
    background: linear-gradient(90deg, var(--re-accent), var(--re-navy-500));
}
.re-pcard-top { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .85rem; }
.re-pcard-level, .re-pcard-badge {
    display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .65rem;
    border-radius: 999px; font-size: .75rem; font-weight: 700; line-height: 1.2;
}
.re-pcard-level { background: var(--re-navy-050); color: var(--re-navy); }
.re-pcard-badge { background: var(--re-accent-050); color: var(--re-accent-600); }
.re-pcard-status { margin-left: auto; font-size: .7rem; }
.re-pcard-title { font-size: 1.1rem; line-height: 1.35; margin: 0 0 .35rem; overflow-wrap: break-word; }
.re-pcard-title a { color: var(--re-navy); text-decoration: none; }
.re-pcard-title a:hover { color: var(--re-accent-600); }
.re-pcard-place {
    display: flex; align-items: center; gap: .4rem; margin: 0 0 .8rem;
    font-size: .88rem; font-weight: 600; color: var(--re-body);
}
.re-pcard-place i { color: var(--re-accent-600); }
.re-pcard-place img { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.re-pcard-text { font-size: .9rem; line-height: 1.6; color: var(--re-body); margin: 0 0 1rem; }
.re-pcard-facts {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 1rem;
    margin: 0 0 1.2rem; padding-top: .9rem; border-top: 1px solid var(--re-line-soft);
}
.re-pcard-facts > div { min-width: 0; }
.re-pcard-facts dt {
    display: flex; align-items: center; gap: .35rem; margin-bottom: .1rem;
    font-size: .7rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--re-muted);
}
.re-pcard-facts dt i { color: var(--re-accent-600); font-size: .85rem; }
.re-pcard-facts dd { margin: 0; font-size: .88rem; font-weight: 600; color: var(--re-ink); overflow-wrap: break-word; }
.re-pcard-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: .5rem; }
.re-pcard-btn { flex: 1 1 auto; justify-content: center; min-height: 42px; font-size: .88rem; }
@media (max-width: 767.98px) {
    .re-pcard-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}
@media (max-width: 379.98px) {
    .re-pcard { padding: 1.15rem; }
    .re-pcard-facts { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .re-pcard { transition: none; }
    .re-pcard:hover { transform: none; }
}

/* ---- a programme's own page ------------------------------------------------ */
.re-pfacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: 0 0 2.25rem; }
.re-pfacts > div { min-width: 0; padding: .85rem 1rem; background: #fff; border: 1px solid var(--re-line); border-radius: 12px; }
.re-pfacts dt {
    display: flex; align-items: center; gap: .4rem; margin-bottom: .2rem;
    font-size: .72rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--re-muted);
}
.re-pfacts dt i { color: var(--re-accent-600); }
.re-pfacts dd { margin: 0; font-weight: 600; color: var(--re-navy); overflow-wrap: break-word; }
.re-program-lead { font-size: 1.05rem; line-height: 1.7; color: var(--re-ink); }
@media (max-width: 767.98px) { .re-pfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 379.98px) { .re-pfacts { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------- deadline banner */
.re-deadline-banner {
    display: flex; align-items: flex-start; gap: .75rem;
    padding: .95rem 1.15rem; border-radius: var(--re-r-sm);
    border: 1px solid var(--re-line); background: var(--re-grey);
    margin-bottom: 1.75rem;
}
.re-deadline-banner i { font-size: 1.15rem; line-height: 1.5; flex: 0 0 auto; }
.re-deadline-banner strong { display: block; font-size: .95rem; color: var(--re-ink); }
.re-deadline-banner span { font-size: .87rem; color: var(--re-body); }

.re-deadline-open        { background: #eefaf2; border-color: #b8e6cc; }
.re-deadline-open i      { color: #12734a; }
.re-deadline-closing_soon { background: #fff7e8; border-color: #f2d79a; }
.re-deadline-closing_soon i { color: var(--re-accent-600); }
.re-deadline-upcoming    { background: var(--re-navy-050); border-color: rgba(11, 46, 111, .18); }
.re-deadline-upcoming i  { color: var(--re-navy-500); }
.re-deadline-closed      { background: var(--re-grey-100); border-color: var(--re-line); }
.re-deadline-closed i    { color: var(--re-muted); }

/* ---------------------------------------------------- disclaimer and source */
/* The catalogue disclaimer. Deliberately not styled as a warning: it is a
   standing statement of fact about how this data ages, not an alert. */
.re-disclaimer {
    display: flex; align-items: flex-start; gap: .7rem;
    padding: .9rem 1.15rem; border-radius: var(--re-r-sm);
    background: var(--re-navy-050); border: 1px solid rgba(11, 46, 111, .14);
}
.re-disclaimer i { color: var(--re-navy-500); font-size: 1rem; line-height: 1.6; flex: 0 0 auto; }
.re-disclaimer p { margin: 0; font-size: .87rem; color: var(--re-navy-700); line-height: 1.6; }

.re-source-note {
    display: flex; align-items: baseline; gap: .35rem;
    font-size: .78rem; color: var(--re-muted); line-height: 1.6;
}
.re-source-note a { color: var(--re-navy-500); word-break: break-word; }

/* ------------------------------------------------------------ detail page */
.re-section-title {
    font-size: 1.35rem; margin-bottom: 1rem;
    padding-bottom: .55rem; border-bottom: 2px solid var(--re-line-soft);
}
.re-subsection-title { font-size: 1.05rem; margin: 1.4rem 0 .6rem; }

.re-muted { color: var(--re-muted); font-size: .9rem; }

/* Definition list used for every "key facts" block. A field with no value is
   never rendered at all, so this only ever describes rows that exist. */
.re-facts { margin: 0; display: grid; }
.re-facts > div {
    padding: .7rem 0; border-bottom: 1px dashed var(--re-line);
}
.re-facts > div:last-child { border-bottom: 0; }
.re-facts dt {
    font-size: .78rem; font-weight: 600; color: var(--re-muted);
    margin-bottom: .15rem; display: flex; align-items: center;
}
.re-facts dt i { color: var(--re-navy-300); }
.re-facts dd { margin: 0; font-size: .93rem; color: var(--re-ink); font-weight: 500; }
.re-facts dd .re-tag { margin-right: .25rem; }

@media (min-width: 576px) {
    .re-facts > div { display: grid; grid-template-columns: 210px 1fr; gap: 1rem; align-items: baseline; }
    .re-facts dt { margin-bottom: 0; }
}

.re-catalogue-cta .re-btn { justify-content: center; }
.re-btn-sm { padding: .45rem .9rem; font-size: .82rem; }

@media (max-width: 991.98px) {
    .re-filters-panel { position: static; margin-bottom: 1.5rem; }
}

/* ------------------------------------------------- narrow-screen gutters */
/* A Bootstrap row carries negative side margins of half its gutter, and a
   .container only pads by half of the default 1.5rem. So `g-5` (3rem) pulls
   12px past the viewport on each side — invisible only because the body hides
   horizontal overflow. Capping the gutter on phones lines the two back up.
   Site-wide on purpose: `row g-5` is the standard two-column pattern here. */
@media (max-width: 575.98px) {
    .row.g-5, .row.gx-5 { --bs-gutter-x: 1.5rem; }
}

/* ------------------------------------------------ enquiry context banner */
/* Shown at the top of the counselling form when the visitor arrived from a
   catalogue page, so it is obvious what the enquiry will be attached to. */
.re-form-context {
    background: var(--re-navy-050);
    border: 1px solid rgba(11, 46, 111, .14);
    border-radius: var(--re-r-sm);
    padding: .85rem 1.05rem;
    margin-bottom: 1.15rem;
}
.re-form-context-head {
    font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
    color: var(--re-navy-500); margin: 0 0 .45rem;
}
.re-form-context ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; }
.re-form-context li { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .88rem; }
.re-form-context li > span { color: var(--re-muted); min-width: 92px; }
.re-form-context a { font-weight: 600; }


/* ------------------------------------------------ eligibility assessment */
/* The result panel on "Can I Study in Korea?".
   Styled as a considered answer rather than a verdict: no traffic-light
   colours, no big tick, nothing that reads as approval. The disclaimer inside
   it uses the same .re-disclaimer treatment as the catalogue one, because it
   is the same kind of statement. */
.re-assessment {
    background: linear-gradient(140deg, var(--re-navy-050), #fff);
    border: 1px solid rgba(11, 46, 111, .18);
    border-radius: var(--re-r-lg);
    padding: 1.75rem;
}
.re-assessment:focus { outline: 3px solid var(--re-navy-300); outline-offset: 3px; }

.re-assessment-kicker {
    display: flex; align-items: center; gap: .45rem;
    font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
    color: var(--re-navy-500); margin: 0 0 .6rem;
}
.re-assessment-title { font-size: 1.3rem; line-height: 1.35; margin: 0 0 1.1rem; }

.re-assessment .re-ticks { margin-bottom: 1.1rem; }
.re-assessment .re-ticks li { align-items: flex-start; }

@media (max-width: 575.98px) {
    .re-assessment { padding: 1.25rem; }
    .re-assessment-title { font-size: 1.12rem; }
}

/* ------------------------------------------------------- motion preference */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    /* scroll-behavior is set on the track itself, and it is neither a
       transition nor an animation — so neither the html rule above nor
       the * rule below reaches it. Without this line the carousel
       arrows still animate for somebody who asked them not to. */
    .re-carousel-track { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .re-block:hover, .re-route:hover, .re-uni:hover, .re-person:hover { transform: none; }
}

/* ------------------------------------------------------------------- print */
@media print {
    .re-strip, .re-header, .re-mobile-nav, .re-mobile-backdrop,
    .re-actionbar, .re-to-top, .re-footer, .re-cta, .re-flash-wrap { display: none !important; }
    body.re-body { padding-bottom: 0; color: #000; background: #fff; }
    .re-section { padding: 1rem 0; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .75em; color: #555; }
}

/* ------------------------------------------------- homepage destination tile */
/* The grid the homepage never had. Four across on desktop, two on tablet, one
   on a phone. The navy bar carries the country name so the card reads at a
   glance; the image sits above it and is optional — a destination with no cover
   gets the navy panel alone rather than a stock photograph of somewhere else. */
/* ============================================================ hero slider */
/* The homepage hero: a full-width photograph, a navy scrim that is darkest
   behind the copy on the left and clears towards the right, the copy on the
   left, and — when the homepage has one — the white trust strip overlapping the
   bottom edge. Royal Educare navy and green throughout.

   HEIGHT. Desktop 620–700px from the admin setting (clamped in PHP before it
   reaches the style attribute, and again here), tablet 540px, phone 530px.
   Always min-height, never height: a long heading on a narrow phone makes the
   hero taller rather than cutting the text off.

   THE SLIDES SHARE ONE GRID CELL. They used to be absolutely positioned over
   the first slide, so a later slide with more text than the first overflowed a
   box sized for the first one and was clipped. In one grid cell the hero is as
   tall as its tallest slide, and it does not change height as it moves. */
:root {
    --re-hero-h: 660px;
    --re-hero-t: .7s;
    /* How far the trust strip reaches up into the hero. */
    --re-hero-trust-lift: 64px;
}

.re-hero-slider {
    position: relative;
    min-height: clamp(620px, var(--re-hero-h, 660px), 700px);
    background: linear-gradient(135deg, var(--re-navy-900) 0%, var(--re-navy) 58%, var(--re-navy-700) 100%);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}

.re-hero-track { display: grid; min-height: inherit; }

.re-hero-slide {
    grid-area: 1 / 1;
    position: relative;
    display: flex; align-items: center;
    min-height: inherit;
    opacity: 0; visibility: hidden;
    transition: opacity var(--re-hero-t, .7s) ease,
                visibility var(--re-hero-t, .7s) ease,
                transform var(--re-hero-t, .7s) ease;
}
.re-hero-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }

/* "Slide" is a subtle drift, not a full-width shove: the incoming slide moves
   the last few per cent into place while it fades in. */
.re-hero-anim-slide .re-hero-slide { transform: translateX(3%); }
.re-hero-anim-slide .re-hero-slide.is-active { transform: none; }

/* Room at the foot for the overlapping trust strip, so it never covers a button. */
.re-hero-has-trust .re-hero-slide { padding-bottom: var(--re-hero-trust-lift); }

/* ------------------------------------------------------------ the photo */
.re-hero-media { position: absolute; inset: 0; z-index: 0; }
.re-hero-media img {
    display: block; width: 100%; height: 100%;
    object-fit: cover;               /* cropped to fit, never stretched */
}
.re-hero-focal-left   .re-hero-media img { object-position: left center; }
.re-hero-focal-center .re-hero-media img { object-position: center; }
.re-hero-focal-right  .re-hero-media img { object-position: right center; }

/* The scrim: dark behind the copy, clearing towards the photograph. Strength is
   a stepped class, never an interpolated number. max() gives every step a floor
   behind the text, so a light photograph cannot make white copy illegible —
   measured over a fully white image: heading 11.6:1, accent and eyebrow 4.9:1. */
.re-hero-scrim {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg,
        rgba(4, 20, 47, max(var(--re-hero-ov, .55), .88)) 0%,
        rgba(4, 20, 47, max(calc(var(--re-hero-ov, .55) * .9), .72)) 40%,
        rgba(4, 20, 47, calc(var(--re-hero-ov, .55) * .45)) 70%,
        rgba(4, 20, 47, calc(var(--re-hero-ov, .55) * .12)) 100%);
}
/* Copy on the right: the same scrim, mirrored. Centred copy: an even wash. */
.re-hero-align-right  .re-hero-scrim { transform: scaleX(-1); }
.re-hero-align-center .re-hero-scrim { background: rgba(4, 20, 47, max(var(--re-hero-ov, .55), .7)); }

.re-hero-ov-0  { --re-hero-ov: 0; }
.re-hero-ov-10 { --re-hero-ov: .10; }
.re-hero-ov-20 { --re-hero-ov: .20; }
.re-hero-ov-30 { --re-hero-ov: .30; }
.re-hero-ov-40 { --re-hero-ov: .40; }
.re-hero-ov-50 { --re-hero-ov: .50; }
.re-hero-ov-60 { --re-hero-ov: .60; }
.re-hero-ov-70 { --re-hero-ov: .70; }
.re-hero-ov-80 { --re-hero-ov: .80; }
.re-hero-ov-90 { --re-hero-ov: .90; }

/* ------------------------------------------------------------- the copy */
.re-hero-inner {
    position: relative; z-index: 2; width: 100%;
    padding-block: clamp(3rem, 6vw, 4.5rem);
}

.re-hero-copy { max-width: 640px; }
.re-hero-align-center .re-hero-copy { margin-inline: auto; text-align: center; }
.re-hero-align-right  .re-hero-copy { margin-inline-start: auto; text-align: right; }

.re-hero-eyebrow {
    display: inline-flex; align-items: center; gap: .65rem;
    margin-bottom: 1.1rem;
    font-size: .8rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
    color: var(--re-accent-light);
}
.re-hero-eyebrow::before {
    content: ""; width: 34px; height: 2px; border-radius: 2px;
    background: currentColor;
}
.re-hero-align-center .re-hero-eyebrow::before { display: none; }

.re-hero-h1 {
    margin: 0 0 1.15rem;
    font-family: var(--re-font-head);
    font-size: clamp(2.35rem, 4.9vw, 4rem);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -.02em;
    color: #fff;
    text-wrap: balance;
}
.re-hero-h1-main   { display: block; }
.re-hero-h1-accent { display: block; color: var(--re-accent-light); }

.re-hero-sub {
    margin: 0 0 .6rem;
    font-size: clamp(1.05rem, 1.4vw, 1.2rem); font-weight: 600;
    color: rgba(255, 255, 255, .95);
}
.re-hero-desc {
    margin: 0 0 1.9rem; max-width: 54ch;
    font-size: clamp(1rem, 1.25vw, 1.1rem); line-height: 1.65;
    color: rgba(255, 255, 255, .92);
}
.re-hero-align-center .re-hero-desc { margin-inline: auto; }
.re-hero-align-right  .re-hero-desc { margin-inline-start: auto; }

.re-hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; }
.re-hero-align-center .re-hero-actions { justify-content: center; }
.re-hero-align-right  .re-hero-actions { justify-content: flex-end; }

.re-hero-btn { min-height: 52px; }
.re-hero-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* The secondary action on a photograph: transparent, outlined in white. */
.re-btn-outline-light {
    background: transparent;
    border-color: rgba(255, 255, 255, .8);
    color: #fff;
}
.re-btn-outline-light:hover { background: #fff; border-color: #fff; color: var(--re-navy); }

/* --------------------------------------------------------- the controls */
/* Grouped at the bottom right, inside the content width, and lifted clear of
   the trust strip. Pinned to the middle of each edge they used to sit on top of
   the copy on a phone. */
.re-hero-controls {
    position: absolute; z-index: 3; left: 0; right: 0; bottom: 26px;
    pointer-events: none;            /* the empty band must not block the slide */
}
.re-hero-has-trust .re-hero-controls { bottom: calc(var(--re-hero-trust-lift) + 22px); }

.re-hero-controls-inner {
    display: flex; align-items: center; justify-content: flex-end; gap: .75rem;
}
.re-hero-controls-inner > * { pointer-events: auto; }

.re-hero-arrow {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .55);
    background: rgba(4, 20, 47, .45); color: #fff;
    transition: background var(--re-t), border-color var(--re-t);
}
.re-hero-arrow:hover { background: var(--re-accent-600); border-color: var(--re-accent-600); }
.re-hero-arrow:focus-visible { outline: 3px solid var(--re-accent-light); outline-offset: 2px; }

.re-hero-dots { display: flex; align-items: center; gap: .55rem; }
.re-hero-dot {
    position: relative;
    width: 10px; height: 10px; padding: 0; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .8); background: transparent;
    transition: background var(--re-t), width var(--re-t);
}
/* A 10px dot is too small to hit; the invisible ring around it is not. */
.re-hero-dot::after { content: ""; position: absolute; inset: -10px; }
.re-hero-dot.is-active {
    width: 28px; border-radius: 6px;
    background: var(--re-accent); border-color: var(--re-accent);
}
.re-hero-dot:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ------------------------------------------------------- the trust strip */
/* One white container laid across the foot of the photograph, not three
   floating cards. */
.re-hero-trust {
    position: relative; z-index: 4;
    margin-top: calc(var(--re-hero-trust-lift) * -1);
}
.re-hero-trust-strip {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0; padding: .35rem; list-style: none;
    background: #fff;
    border-radius: var(--re-r-lg);
    box-shadow: 0 24px 60px -30px rgba(4, 20, 47, .45), var(--re-sh-sm);
}
.re-hero-trust-item {
    display: flex; align-items: flex-start; gap: 1rem;
    min-width: 0;
    padding: 1.5rem 1.6rem;
}
.re-hero-trust-item + .re-hero-trust-item { border-left: 1px solid var(--re-line); }
/* A fourth item starts a new row, and a row does not start with a divider. */
.re-hero-trust-item:nth-child(3n+1) { border-left: 0; }

.re-hero-trust-icon {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 50px; height: 50px; border-radius: 14px;
    background: var(--re-accent-050); color: var(--re-accent-600);
    font-size: 1.4rem;
}
.re-hero-trust-title {
    display: block; margin-bottom: .25rem;
    font-family: var(--re-font-head); font-size: 1.02rem; font-weight: 700;
    color: var(--re-navy);
}
.re-hero-trust-desc { display: block; font-size: .9rem; line-height: 1.55; color: var(--re-body); }

/* ------------------------------------------------------------ responsive */
@media (max-width: 991.98px) {
    :root { --re-hero-trust-lift: 48px; }
    .re-hero-slider { min-height: 540px; }
    .re-hero-trust-item { gap: .75rem; padding: 1.2rem 1.1rem; }
    .re-hero-trust-icon { width: 42px; height: 42px; border-radius: 12px; font-size: 1.2rem; }
}

@media (max-width: 767.98px) {
    :root { --re-hero-trust-lift: 40px; }
    .re-hero-slider { min-height: 530px; }

    /* On a phone the copy sits on the photograph rather than beside it, so it
       is always left-aligned and the scrim runs top to bottom. */
    .re-hero-copy,
    .re-hero-align-center .re-hero-copy,
    .re-hero-align-right  .re-hero-copy { max-width: none; margin-inline: 0; text-align: left; }
    .re-hero-align-center .re-hero-desc,
    .re-hero-align-right  .re-hero-desc { margin-inline: 0; }
    .re-hero-align-center .re-hero-actions,
    .re-hero-align-right  .re-hero-actions { justify-content: flex-start; }
    .re-hero-align-center .re-hero-eyebrow::before { display: inline-block; }

    .re-hero-scrim,
    .re-hero-align-right  .re-hero-scrim,
    .re-hero-align-center .re-hero-scrim {
        transform: none;
        background: linear-gradient(180deg,
            rgba(4, 20, 47, max(calc(var(--re-hero-ov, .55) * .6), .5)) 0%,
            rgba(4, 20, 47, max(calc(var(--re-hero-ov, .55) + .2), .84)) 100%);
    }

    .re-hero-h1 { font-size: clamp(2rem, 8.4vw, 2.6rem); }
    .re-hero-actions .re-btn { flex: 1 1 100%; }

    .re-hero-controls-inner { justify-content: center; }
    .re-hero-arrow { width: 34px; height: 34px; }

    /* On a phone the arrows and dots share the copy's column, so a slider keeps
       a clear band for them above the trust strip instead of laying them over
       the buttons. A single slide has no controls and keeps its space. */
    .re-hero-slider:not(.is-single) .re-hero-inner { padding-bottom: 0; }
    .re-hero-slider:not(.is-single) .re-hero-slide { padding-bottom: 64px; }
    .re-hero-slider:not(.is-single) .re-hero-controls { bottom: 14px; }
    .re-hero-has-trust:not(.is-single) .re-hero-slide { padding-bottom: calc(var(--re-hero-trust-lift) + 64px); }
    .re-hero-has-trust:not(.is-single) .re-hero-controls { bottom: calc(var(--re-hero-trust-lift) + 14px); }

    /* The strip stacks. It still overlaps, but only by the room the hero
       reserved for it, so nothing is covered. */
    .re-hero-trust-strip { grid-template-columns: 1fr; padding: .25rem; }
    .re-hero-trust-item { padding: 1.1rem; }
    .re-hero-trust-item + .re-hero-trust-item { border-left: 0; border-top: 1px solid var(--re-line); }
}

/* The narrowest phones: a slightly smaller heading keeps the longest slide
   inside the 500–560px height the design asks for, instead of growing the hero. */
@media (max-width: 359.98px) {
    .re-hero-h1 { font-size: 1.8rem; }
}

/* Reduced motion: no crossfade, no drift. The slide still changes, it just
   changes immediately — and site.js switches autoplay off entirely. */
@media (prefers-reduced-motion: reduce) {
    .re-hero-slide { transition: none; }
    .re-hero-anim-slide .re-hero-slide { transform: none; }
}

/* ------------------------------------------------ destination sections */
/* The three style options an administrator can pick per section. They are a
   fixed list in Destination::SECTION_STYLES and a fixed map in the template,
   so nothing typed into a form ever reaches a class attribute. */
.re-dest-section { scroll-margin-top: 90px; }
.re-dest-section + .re-dest-section { margin-top: 2.25rem; }

.re-dest-section-intro {
    color: var(--re-muted); font-size: .95rem; margin: -.25rem 0 1rem;
}

.re-dest-section-alt,
.re-dest-section-muted {
    padding: 1.35rem 1.5rem;
    border-radius: var(--re-r-sm);
    border: 1px solid var(--re-line);
}
.re-dest-section-alt   { background: var(--re-navy-050); }
.re-dest-section-muted { background: var(--re-grey-100); border-style: dashed; }

.re-onpage-nav {
    padding: 1rem 1.15rem; border: 1px solid var(--re-line);
    border-radius: var(--re-r-sm); background: #fff;
}
.re-onpage-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.re-onpage-nav a  { font-size: .875rem; color: var(--re-navy); text-decoration: none; }
.re-onpage-nav a:hover { text-decoration: underline; }


/* ---------------------------------------- destination guide, reference pass */
/* The counselling card beside the checklist, and the banner under both. The
   checklist cards themselves are already two across, which is the 2x2 the
   reference shows once four categories exist. */

/* A light blue ground under the guide, so the white cards read as cards. */
.re-dest-guide { background: var(--re-navy-050); }

/* ---- hero: the eyebrow above the title ----------------------------------- */
.re-page-eyebrow {
    display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 .6rem;
    font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--re-accent-light);
}
.re-page-eyebrow::before {
    content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--re-accent-light);
}


/* ========================================================= destination page */
/* An editorial layout on a light ground: words left, the country's picture
   right, a 2x2 checklist beside a tall counselling card, and a soft banner
   under both. Everything here is presentation — every string and every image
   still comes from the destination record. */

.re-dest-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(2rem, 4vw, 3.25rem);
    background:
        radial-gradient(70% 60% at 88% 12%, rgba(31, 157, 77, .09) 0%, rgba(31, 157, 77, 0) 60%),
        linear-gradient(170deg, #ffffff 0%, #f4f8fd 48%, #eef4fc 100%);
}

.re-dest-hero .re-crumbs { margin-bottom: 1.1rem; }
/* The base trail is white for dark page heads, and `.re-crumbs li` sets that
   colour on the item itself — so the current-page crumb needs naming here, or
   it stays white on this light ground. */
.re-dest-hero .re-crumbs,
.re-dest-hero .re-crumbs li,
.re-dest-hero .re-crumbs a { color: var(--re-body); }
.re-dest-hero .re-crumbs a:hover { color: var(--re-navy); }

/* The approved proportions: words on roughly 42%, the photograph on 58%. */
.re-dest-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: center;
}

.re-dest-hero-copy { min-width: 0; }

.re-dest-hero-eyebrow {
    display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 .9rem;
    padding: .35rem .85rem; border-radius: 99px;
    background: var(--re-white); box-shadow: var(--re-sh-xs);
    font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--re-accent-700);
}
.re-dest-hero-eyebrow::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--re-accent);
}

/* The one very large heading the design is built around. */
.re-dest-hero-title {
    margin: 0 0 .9rem;
    font-size: clamp(2.2rem, 4.6vw, 3.6rem);
    line-height: 1.06;
    letter-spacing: -.02em;
    color: var(--re-navy);
}

.re-dest-hero-lead {
    margin: 0; max-width: 52ch;
    font-size: clamp(1rem, 1.15vw, 1.08rem); line-height: 1.7; color: var(--re-body);
}
.re-dest-hero-caption { margin: .6rem 0 0; font-size: .87rem; color: var(--re-muted); }

.re-dest-hero-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.25rem;
    margin-top: 1.5rem;
}
.re-dest-hero-count { font-size: .95rem; color: var(--re-body); }
.re-dest-hero-count strong { color: var(--re-navy); font-size: 1.15rem; }

/* ---- the picture, and the card floating over its corner ------------------ */
.re-dest-hero-figure {
    position: relative; margin: 0; min-width: 0;
    border-radius: var(--re-r-xl);
    overflow: visible;
}
.re-dest-hero-figure picture {
    position: relative; display: block; overflow: hidden;
    border-radius: var(--re-r-xl);
    box-shadow: 0 30px 60px -32px rgba(11, 46, 111, .45);
}
.re-dest-hero-figure img {
    display: block; width: 100%; height: clamp(340px, 36vw, 500px);
    object-fit: cover;
}

/* A soft light wash where the photograph meets the text — never a dark
   overlay, and never across the whole picture. */
.re-dest-hero-figure picture::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(100deg,
        rgba(247, 250, 254, .92) 0%,
        rgba(247, 250, 254, .45) 12%,
        rgba(247, 250, 254, 0) 30%);
}
.re-dest-hero-figure.re-focal-left  img { object-position: left center; }
.re-dest-hero-figure.re-focal-right img { object-position: right center; }

.re-dest-hero-badge {
    position: absolute; top: 1.15rem; right: -.75rem;
    display: flex; align-items: center; gap: .65rem;
    padding: .65rem .95rem;
    background: var(--re-white);
    border-radius: 14px;
    box-shadow: 0 18px 34px -20px rgba(11, 46, 111, .55);
}
.re-dest-hero-badge img { border-radius: 3px; }
.re-dest-hero-badge-mark {
    width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
    background: var(--re-accent-050); color: var(--re-accent-700);
}
.re-dest-hero-badge-text { display: flex; flex-direction: column; line-height: 1.25; }
.re-dest-hero-badge-text strong { font-size: .92rem; color: var(--re-navy); }
.re-dest-hero-badge-text span { font-size: .74rem; color: var(--re-muted); }

/* With no picture uploaded yet the figure still holds its place: a light panel
   in the brand colours carrying the country's name, never an empty gap, so
   every destination keeps the same two-column hero. */
.re-dest-hero-fallback {
    display: grid; place-content: center; justify-items: center; gap: 1rem;
    height: clamp(340px, 36vw, 500px);
    border-radius: var(--re-r-xl);
    background:
        radial-gradient(60% 70% at 80% 15%, rgba(31, 157, 77, .22) 0%, rgba(31, 157, 77, 0) 65%),
        linear-gradient(150deg, #e4eefb 0%, #cfe0f5 55%, #dcefe4 100%);
    box-shadow: 0 30px 60px -32px rgba(11, 46, 111, .45);
    text-align: center;
}
.re-dest-hero-fallback-mark {
    width: 96px; height: 96px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: 2.6rem; color: var(--re-white);
    background: linear-gradient(145deg, var(--re-navy) 0%, #1a4a9e 100%);
    box-shadow: 0 18px 34px -18px rgba(11, 46, 111, .7);
}
.re-dest-hero-fallback-name {
    font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 700; letter-spacing: -.01em;
    color: var(--re-navy);
}
@media (max-width: 991.98px) { .re-dest-hero-fallback { height: clamp(260px, 40vw, 360px); } }
@media (max-width: 575.98px) { .re-dest-hero-fallback { height: 240px; } }

/* ---- the three benefits, along the bottom of the left column ------------- */
/* They share the narrower column with the heading, so each one stacks its
   circular icon above the words rather than sitting beside them. */
.re-dest-hero-features {
    list-style: none; margin: clamp(1.75rem, 3vw, 2.4rem) 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem;
}
.re-dest-hero-feature {
    display: flex; flex-direction: column; align-items: flex-start; gap: .6rem;
    min-width: 0;
}
.re-dest-hero-feature-icon {
    flex: none; width: 46px; height: 46px; border-radius: 50%;
    display: grid; place-items: center; font-size: 1.2rem;
    color: var(--re-white);
    background: linear-gradient(145deg, var(--re-accent-light) 0%, var(--re-accent) 100%);
    box-shadow: 0 10px 20px -12px rgba(31, 157, 77, .85);
}
.re-dest-hero-feature-text { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.re-dest-hero-feature-text strong {
    font-size: .95rem; line-height: 1.3; color: var(--re-navy);
}
.re-dest-hero-feature-text span { font-size: .82rem; line-height: 1.5; color: var(--re-body); }

/* ---- the guide row: checklist about 68%, counselling card about 32% ------ */
@media (min-width: 992px) {
    .re-dest-guide-row > .col-lg-8 { flex: 0 0 68%; max-width: 68%; }
    .re-dest-guide-row > .re-dest-aside { flex: 0 0 32%; max-width: 32%; }
}

/* ---- the counselling card: light, tall, and clearly a designed promo ----- */
/* Compound selector on purpose: the card also carries .re-side-card, which is
   defined further down the file and would otherwise win the shorthand at equal
   specificity and repaint this flat white. */
.re-side-card.re-side-cta {
    position: relative;
    overflow: hidden;
    padding: 1.5rem 1.5rem 0;
    background: linear-gradient(180deg, #eef4fd 0%, #ffffff 58%);
    border: 1px solid var(--re-line);
    border-radius: var(--re-r-lg);
    box-shadow: 0 24px 48px -34px rgba(11, 46, 111, .5);
    color: var(--re-ink);
}

/* A soft landmark shape behind the upper half, drawn rather than loaded. */
.re-side-cta::before {
    content: ""; position: absolute; top: -40px; right: -40px;
    width: 190px; height: 190px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(31, 157, 77, .16) 0%, rgba(31, 157, 77, 0) 68%);
    pointer-events: none;
}

.re-side-cta .re-side-cta-eyebrow {
    position: relative;
    display: inline-block; margin-bottom: .6rem;
    font-size: .68rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
    color: var(--re-accent-700);
}
.re-side-cta-title {
    position: relative;
    margin: 0 0 .55rem; font-size: 1.4rem; line-height: 1.2; color: var(--re-navy);
}
.re-side-cta-text {
    position: relative;
    margin: 0 0 1.1rem; font-size: .93rem; line-height: 1.6; color: var(--re-body);
}
.re-side-cta .re-btn-primary {
    position: relative;
    background: var(--re-accent); border-color: var(--re-accent);
    box-shadow: 0 14px 26px -16px rgba(31, 157, 77, .9);
}
.re-side-cta .re-btn-primary:hover { background: var(--re-accent-600); border-color: var(--re-accent-600); }

.re-side-cta-link {
    display: inline-flex; align-items: center; gap: .35rem; margin-top: .8rem;
    font-size: .88rem; font-weight: 600; text-decoration: none;
    color: var(--re-accent-700);
}
.re-side-cta-link:hover { color: var(--re-navy); }

.re-side-cta-points {
    position: relative;
    list-style: none; margin: 1.1rem 0 1.35rem; padding: 0;
    display: grid; gap: .5rem;
}
.re-side-cta-points li {
    display: flex; align-items: center; gap: .5rem;
    font-size: .87rem; font-weight: 600; color: var(--re-body);
}
.re-side-cta-points i { color: var(--re-accent); }

/* The picture fills the foot of the card, inside its corners. */
.re-side-cta-media {
    position: relative;
    margin: 0 -1.5rem; border-radius: 0 0 var(--re-r-lg) var(--re-r-lg); overflow: hidden;
}
.re-side-cta-media img { display: block; width: 100%; height: 210px; object-fit: cover; }

/* ---- the banner under both columns -------------------------------------- */
.re-guide-banner {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 1.25rem;
    margin-top: clamp(1.75rem, 3vw, 2.75rem);
    padding: 1.6rem 1.9rem;
    background: linear-gradient(120deg, #eaf2fd 0%, #f4f9ff 62%, #eef7f1 100%);
    border: 1px solid var(--re-line);
    border-radius: var(--re-r-lg);
    color: var(--re-ink);
    box-shadow: var(--re-sh-xs);
}

/* A skyline along the lower right, drawn in CSS rather than loaded. */
.re-guide-banner::after {
    content: ""; position: absolute; right: 0; bottom: 0;
    width: 320px; height: 74px; pointer-events: none; opacity: .5;
    background:
        linear-gradient(to top, rgba(11, 46, 111, .18) 0 18px, transparent 18px) 0 100% / 100% 18px no-repeat,
        linear-gradient(to top, rgba(11, 46, 111, .16) 0 54px, transparent 54px) 24px 100% / 26px 54px no-repeat,
        linear-gradient(to top, rgba(11, 46, 111, .13) 0 38px, transparent 38px) 62px 100% / 20px 38px no-repeat,
        linear-gradient(to top, rgba(11, 46, 111, .17) 0 66px, transparent 66px) 96px 100% / 14px 66px no-repeat,
        linear-gradient(to top, rgba(31, 157, 77, .18) 0 44px, transparent 44px) 124px 100% / 30px 44px no-repeat,
        linear-gradient(to top, rgba(11, 46, 111, .14) 0 58px, transparent 58px) 170px 100% / 18px 58px no-repeat,
        linear-gradient(to top, rgba(11, 46, 111, .12) 0 34px, transparent 34px) 200px 100% / 34px 34px no-repeat,
        linear-gradient(to top, rgba(11, 46, 111, .16) 0 50px, transparent 50px) 248px 100% / 22px 50px no-repeat;
}

.re-guide-banner-icon {
    flex: none; width: 56px; height: 56px; border-radius: 16px;
    display: grid; place-items: center; font-size: 1.4rem;
    background: var(--re-white); color: var(--re-accent-700);
    box-shadow: var(--re-sh-xs);
}
.re-guide-banner-title { margin: 0 0 .3rem; font-size: 1.2rem; font-weight: 700; color: var(--re-navy); }
.re-guide-banner-text  { position: relative; margin: 0; max-width: 68ch; font-size: .95rem; line-height: 1.65; color: var(--re-body); }

@media (max-width: 991.98px) {
    /* One column, and the words come first — the photograph follows them. */
    .re-dest-hero-grid { grid-template-columns: minmax(0, 1fr); }
    .re-dest-hero-figure img { height: clamp(260px, 40vw, 360px); }
    .re-dest-hero-badge { right: .75rem; }
    .re-dest-hero-lead { max-width: none; }
    .re-guide-banner::after { display: none; }
}

@media (max-width: 575.98px) {
    .re-dest-hero-title { font-size: clamp(1.9rem, 8vw, 2.4rem); }
    .re-dest-hero-figure img { height: 240px; }
    /* Below three-across the benefits read better stacked than squeezed. */
    .re-dest-hero-features { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    .re-dest-hero-feature { flex-direction: row; align-items: center; gap: .85rem; }
    .re-guide-banner { flex-direction: column; align-items: flex-start; padding: 1.25rem; }
    .re-side-cta { padding: 1.25rem 1.25rem 0; }
    .re-side-cta-media { margin: 0 -1.25rem; }
    .re-side-cta-media img { height: 170px; }
}

/* ------------------------------------------------------- destination hero -- */
/* A photograph the destination chose, under a navy scrim, with the country's
   own words on it. The picture is an <img> inside a <picture>, so it carries
   alt text and a narrow-screen crop; `re-focal-*` decides which edge survives
   when the crop bites. With no picture the navy gradient is the hero. */

.re-page-head {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(2.25rem, 5vw, 4rem) 0 clamp(1.75rem, 3.5vw, 2.75rem);
    background: linear-gradient(160deg, var(--re-navy) 0%, var(--re-navy-900) 100%);
    color: var(--re-white);
}

.re-page-head-media { position: absolute; inset: 0; z-index: -1; }
.re-page-head-media picture { display: block; width: 100%; height: 100%; }
.re-page-head-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Darkest where the words are, clearing towards the far edge. */
.re-page-head-media::after {
    content: ""; position: absolute; inset: 0;
    background:
        linear-gradient(90deg, rgba(4, 20, 47, .94) 0%, rgba(4, 20, 47, .84) 42%, rgba(4, 20, 47, .5) 100%),
        linear-gradient(180deg, rgba(4, 20, 47, .3) 0%, rgba(4, 20, 47, .62) 100%);
}

.re-focal-left   .re-page-head-media img { object-position: left center; }
.re-focal-center .re-page-head-media img { object-position: center; }
.re-focal-right  .re-page-head-media img { object-position: right center; }

.re-page-head-inner { position: relative; }

.re-page-head .re-crumbs,
.re-page-head .re-crumbs a { color: rgba(255, 255, 255, .78); }
.re-page-head .re-crumbs a:hover { color: var(--re-white); }

.re-page-title {
    font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 800; line-height: 1.12;
    color: var(--re-white); letter-spacing: -.01em;
}
.re-page-sub     { margin-top: .4rem; font-size: 1.05rem; color: rgba(255, 255, 255, .9); }
.re-page-lead    { margin-top: .6rem; max-width: 62ch; font-size: 1rem; line-height: 1.65; color: rgba(255, 255, 255, .82); }
.re-page-caption { margin-top: .5rem; font-size: .85rem; color: rgba(255, 255, 255, .6); }

.re-page-head .re-btn-primary { background: var(--re-accent); border-color: var(--re-accent); }
.re-page-head .re-btn-primary:hover { background: var(--re-accent-600); border-color: var(--re-accent-600); }

.re-dest-stats {
    list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
    margin: 1.1rem 0 0; padding: 0; font-size: .92rem; color: rgba(255, 255, 255, .85);
}
.re-dest-stats strong { color: var(--re-white); font-size: 1.05rem; }

/* The benefit points: three at most, and only what an administrator wrote. */
.re-page-head-points {
    list-style: none; display: flex; flex-wrap: wrap; gap: .6rem .75rem;
    margin: 1.4rem 0 0; padding: 0;
}
.re-page-head-points li {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .45rem .95rem; border-radius: 99px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    font-size: .9rem; font-weight: 600;
}
.re-page-head-points i { color: var(--re-accent-light); }

/* The same focal choice on the homepage card. */
.re-dest-tile-media.re-focal-left  img { object-position: left center; }
.re-dest-tile-media.re-focal-right img { object-position: right center; }

@media (max-width: 767.98px) {
    /* On a phone the scrim runs top to bottom: there is no "far edge". */
    .re-page-head-media::after {
        background: linear-gradient(180deg, rgba(4, 20, 47, .5) 0%, rgba(4, 20, 47, .88) 62%, rgba(4, 20, 47, .96) 100%);
    }
    .re-page-head-points li { font-size: .85rem; padding: .4rem .8rem; }
}



/* ------------------------------------------------------ partner logo strip */
/* Logos, sized to one another rather than to their files: each sits in a white
   card of fixed height and is contained inside it, so a tall crest and a wide
   wordmark read as the same weight and neither is stretched. */

.re-partners { background: var(--re-grey-100); }

.re-partner-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
}

.re-partner { min-width: 0; }

/* Below the strip, and only when there are more partners than it shows. Six
   across holds on every desktop, so twelve are always two full rows. */
.re-partners-more { margin: 2rem 0 0; text-align: center; }

.re-partner-card {
    display: flex; align-items: center; justify-content: center;
    height: 96px; padding: 1rem;
    background: var(--re-white);
    border: 1px solid var(--re-line);
    border-radius: 14px;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.re-partner-card img {
    max-width: 100%; max-height: 100%;
    width: auto; height: auto;          /* never stretched out of proportion */
    object-fit: contain;
}

/* A link lifts under the pointer; a logo with no link stays where it is. */
@media (hover: hover) and (min-width: 992px) {
    a.re-partner-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--re-sh-sm);
        border-color: var(--re-accent);
    }
}


@media (max-width: 991.98px) {
    .re-partner-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .re-partner-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .re-partner-card { height: 84px; padding: .75rem; }
}

@media (max-width: 575.98px) {
    .re-partner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
    .re-partner-card { height: 76px; }
}

/* ------------------------------------------------ partner list page cards */
/* The same partners as the strip above, larger, each with its name and its
   country. The logo sits in a box of fixed height and is contained inside it,
   so a tall crest and a wide wordmark read at the same weight and neither is
   ever stretched. */

.re-partner-list {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
}

.re-partner-item { min-width: 0; }

.re-partner-tile {
    display: flex; flex-direction: column; align-items: center;
    height: 100%;
    padding: 1.5rem 1.25rem 1.35rem;
    text-align: center;
    background: var(--re-white);
    border: 1px solid var(--re-line);
    border-radius: 16px;
    box-shadow: var(--re-sh-xs);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.re-partner-tile-logo {
    display: flex; align-items: center; justify-content: center;
    width: 100%;
    height: 112px;
    margin-bottom: 1.1rem;
    padding: .5rem .75rem 1rem;
    border-bottom: 1px solid var(--re-line);
}

.re-partner-tile-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.re-partner-tile-name {
    margin: 0 0 .35rem;
    font-size: 1rem; line-height: 1.35;
    color: var(--re-navy);
    overflow-wrap: anywhere;
}

.re-partner-tile-country {
    display: inline-flex; align-items: center; gap: .35rem;
    margin: 0;
    font-size: .85rem; font-weight: 600;
    color: var(--re-accent-700);
}

.re-partner-tile-link {
    display: inline-flex; align-items: center; gap: .3rem;
    margin-top: auto; padding-top: 1rem;
    font-size: .86rem; font-weight: 600;
    color: var(--re-navy); text-decoration: none;
}

.re-partner-tile-link:hover,
.re-partner-tile-link:focus-visible { color: var(--re-accent-700); text-decoration: underline; }

@media (hover: hover) {
    .re-partner-tile:hover {
        transform: translateY(-3px);
        box-shadow: var(--re-sh-sm);
        border-color: var(--re-accent);
    }
}

/* Five across only on a large desktop, where five still stay generous. A
   1440px desktop keeps four. */
@media (min-width: 1600px) {
    .re-partner-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 1199.98px) {
    .re-partner-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .re-partner-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
    .re-partner-tile { padding: 1.1rem .85rem; }
    .re-partner-tile-logo { height: 88px; }
}

@media (max-width: 399.98px) {
    .re-partner-list { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .re-partner-tile { transition: none; }
}

/* --------------------------------------------------------- success stories */
/* The listing page's cards. `.re-story` above is the homepage's compact tile;
   these are the page's own, and they had almost no chrome — a heading, a line
   of text and no card around either. Three across, two on a tablet, one on a
   phone, all the same height in a row. */

.re-stories-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.re-story-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.5rem;
    background: var(--re-white);
    border: 1px solid var(--re-line);
    border-radius: 18px;
    box-shadow: var(--re-sh-sm);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Desktop only: a card that lifts under the pointer. Nothing moves on touch. */
@media (hover: hover) and (min-width: 992px) {
    .re-story-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--re-sh);
        border-color: var(--re-navy-300);
    }
}

/* The quote mark: decoration, behind the words, never read aloud. */
.re-story-card::after {
    content: "\201C";
    position: absolute; top: .35rem; right: 1rem;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 4.5rem; line-height: 1;
    color: var(--re-navy-050);
    pointer-events: none;
}

.re-story-card-head { display: flex; align-items: center; gap: .85rem; margin-bottom: 1rem; }

.re-story-photo {
    flex: none; width: 56px; height: 56px; border-radius: 50%;
    object-fit: cover; background: var(--re-navy-050);
    box-shadow: 0 0 0 3px var(--re-accent-050);
}

/* No photograph: the student's initial, in the brand's own colours. */
.re-story-initial {
    flex: none; width: 56px; height: 56px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: 1.25rem; font-weight: 700; color: var(--re-white);
    background: linear-gradient(145deg, var(--re-navy-500) 0%, var(--re-navy) 100%);
    box-shadow: 0 0 0 3px var(--re-accent-050);
}

.re-story-card-who { min-width: 0; }
.re-story-card-name {
    margin: 0; font-size: 1rem; font-weight: 700; color: var(--re-navy);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.re-story-card-meta {
    margin: .1rem 0 0; font-size: .82rem; font-weight: 600; color: var(--re-accent-700);
}

.re-story-card-title {
    margin: 0 0 .5rem; font-size: 1.05rem; line-height: 1.35; color: var(--re-navy);
}
.re-story-card-title a { color: inherit; text-decoration: none; }
.re-story-card-title a:hover { color: var(--re-accent-700); }

.re-story-card-facts {
    margin: 0 0 .6rem; font-size: .84rem; color: var(--re-muted);
}

/* The rating, when the student gave one. Amber, because a rating is not
   a brand accent -- the same rule the testimonial stars follow. */
.re-story-stars { margin: 0 0 .6rem; font-size: .85rem; color: #d99b1c; letter-spacing: .05em; }

.re-story-card-text {
    margin: 0; font-size: .92rem; line-height: 1.6; color: var(--re-body);
}

/* Pinned to the bottom so every card in a row ends on the same line. */
.re-story-card-link {
    margin-top: auto; padding-top: 1rem;
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .88rem; font-weight: 600; text-decoration: none; color: var(--re-accent-700);
}
.re-story-card-link:hover { gap: .55rem; color: var(--re-accent-600); }

.re-story-badge {
    display: inline-block; margin-bottom: .6rem; padding: .15rem .55rem;
    border-radius: 99px; font-size: .7rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase;
    background: var(--re-accent-050); color: var(--re-accent-700);
}

/* The quieter testimonial block under the stories, same page. */
.re-stories-quotes { margin-top: 3rem; }
.re-testimonial {
    height: 100%; margin: 0; padding: 1.35rem;
    background: var(--re-grey-100); border-radius: 16px;
    border: 1px solid var(--re-line-soft);
}
.re-testimonial p { margin: 0 0 .6rem; font-size: .93rem; line-height: 1.6; color: var(--re-ink); }
.re-testimonial footer { color: var(--re-navy); font-weight: 600; }

@media (max-width: 991.98px) {
    .re-stories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    .re-stories-grid { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
    .re-story-card { padding: 1.25rem; }
}

/* ------------------------------------------------------------------ gallery -- */
/* A 3 x 3 grid of photos on a light ground: equal tiles at 4:3, cropped to fill
   and never stretched, with rounded corners and a soft shadow. Two across on a
   tablet, one on a phone. Every picture is an administrator's upload. */

.re-gallery { background: var(--re-grey-100); }

.re-gallery-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.re-gallery-cell { min-width: 0; }

.re-gallery-tile {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    background: var(--re-navy-050);
    box-shadow: 0 16px 32px -20px rgba(11, 46, 111, .38);
}

.re-gallery-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.re-gallery-tile::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(11, 46, 111, 0) 55%, rgba(11, 46, 111, .35) 100%);
    opacity: 0;
    transition: opacity .25s ease;
}

.re-gallery-zoom {
    position: absolute; right: .85rem; bottom: .85rem; z-index: 1;
    width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, .92); color: var(--re-navy);
    opacity: 0; transform: translateY(6px);
    transition: opacity .25s ease, transform .25s ease;
}

@media (hover: hover) {
    .re-gallery-tile:hover img { transform: scale(1.04); }
    .re-gallery-tile:hover::after,
    .re-gallery-tile:hover .re-gallery-zoom { opacity: 1; transform: none; }
}

/* A keyboard user sees exactly what a pointer user sees, plus the ring. */
.re-gallery-tile:focus-visible { outline: 3px solid var(--re-accent); outline-offset: 4px; }
.re-gallery-tile:focus-visible::after,
.re-gallery-tile:focus-visible .re-gallery-zoom { opacity: 1; transform: none; }

.re-gallery-pages {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 1rem;
    margin-top: 2.25rem;
}
.re-gallery-pages-count { font-size: .9rem; color: var(--re-muted); }

.re-gallery-back { margin: 2rem 0 0; text-align: center; }

.re-gallery-empty {
    max-width: 560px; margin: 0 auto; padding: 2.75rem 2rem;
    text-align: center;
    background: var(--re-white);
    border: 1px solid var(--re-line);
    border-radius: 18px;
    box-shadow: var(--re-sh-xs);
}
.re-gallery-empty-icon {
    display: inline-grid; place-items: center;
    width: 64px; height: 64px; margin-bottom: 1rem;
    border-radius: 50%;
    font-size: 1.6rem;
    background: var(--re-accent-050); color: var(--re-accent-700);
}
.re-gallery-empty p { color: var(--re-body); }

/* ---- the viewer ---------------------------------------------------------- */
.re-lightbox {
    width: min(1100px, 94vw); max-width: none; max-height: none;
    padding: 0; border: 0;
    background: transparent; color: #ffffff;
    overflow: visible;
}
.re-lightbox::backdrop { background: rgba(8, 18, 40, .9); }

.re-lightbox-frame { position: relative; display: flex; align-items: center; gap: .75rem; }

.re-lightbox-figure { flex: 1; min-width: 0; margin: 0; }
.re-lightbox-figure img {
    display: block; width: 100%; max-height: 78vh;
    object-fit: contain;            /* the whole photo, never cropped or stretched */
    border-radius: 14px;
    background: #0b1a36;
}

.re-lightbox-caption {
    display: flex; justify-content: space-between; gap: 1rem;
    margin-top: .75rem;
    font-size: .95rem; color: rgba(255, 255, 255, .92);
}
.re-lightbox-count { flex: none; color: rgba(255, 255, 255, .65); }

.re-lightbox-nav,
.re-lightbox-close {
    flex: none;
    width: 48px; height: 48px; border-radius: 50%; border: 0;
    display: grid; place-items: center;
    font-size: 1.25rem;
    background: rgba(255, 255, 255, .14); color: #ffffff;
    cursor: pointer;
}
.re-lightbox-nav:hover,
.re-lightbox-close:hover { background: rgba(255, 255, 255, .26); }
.re-lightbox-nav:focus-visible,
.re-lightbox-close:focus-visible { outline: 3px solid var(--re-accent-light); outline-offset: 2px; }

.re-lightbox-close { position: absolute; top: -58px; right: 0; }

html.re-lightbox-open { overflow: hidden; }

@media (max-width: 991.98px) {
    .re-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
}

@media (max-width: 575.98px) {
    .re-gallery-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    .re-gallery-empty { padding: 2rem 1.25rem; }

    .re-lightbox-frame { display: block; }
    .re-lightbox-nav { position: absolute; top: 38%; z-index: 1; width: 42px; height: 42px; }
    .re-lightbox-nav.is-prev { left: .5rem; }
    .re-lightbox-nav.is-next { right: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .re-gallery-tile img,
    .re-gallery-tile::after,
    .re-gallery-zoom { transition: none; }
}

/* ------------------------------------------------ destination page cards -- */
/* The guide's own furniture: the repeatable cards, the document checklist, the
   counselling card beside it and the note a page carries while its guide is
   still being written. None of these had any styling at all, which is why a
   checklist of forty documents arrived as one uninterrupted list. */

.re-dest-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
}

/* ---- document checklist: one card per category, two across ---------------- */
.re-doc-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.1rem;
}

.re-doc-card {
    background: var(--re-white);
    border: 1px solid var(--re-line);
    border-radius: var(--re-r);
    box-shadow: var(--re-sh-sm);
    padding: 1.15rem 1.25rem;
}

.re-doc-card-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .85rem; }

.re-doc-card-icon {
    flex: none; width: 38px; height: 38px; border-radius: 11px;
    display: grid; place-items: center; font-size: 1.05rem;
    color: var(--re-navy); background: var(--re-navy-050);
}

.re-doc-card-title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--re-navy); }

.re-doc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.re-doc-item { display: flex; align-items: flex-start; gap: .55rem; }
.re-doc-check { flex: none; margin-top: .15rem; font-size: 1rem; color: var(--re-accent); }
.re-doc-body { min-width: 0; font-size: .92rem; line-height: 1.5; color: var(--re-ink); }
.re-doc-name { font-weight: 600; }

.re-doc-flag {
    display: inline-block; margin-left: .4rem; padding: .05rem .45rem;
    border-radius: 99px; font-size: .7rem; font-weight: 700; letter-spacing: .02em;
    background: var(--re-grey-100); color: var(--re-body);
}
.re-doc-required { background: var(--re-accent-050); color: var(--re-accent-700); }
.re-doc-note { display: block; margin-top: .15rem; font-size: .84rem; color: var(--re-muted); }

/* A checklist is a starting point, and the caveat has to read as one. */
.re-doc-caveat {
    margin: 1rem 0 0; padding: .75rem .9rem;
    background: var(--re-navy-050); border-radius: var(--re-r-sm);
    font-size: .85rem; color: var(--re-body);
}

/* ---- the counselling card beside the guide ------------------------------- */
.re-side-card {
    background: var(--re-white);
    border: 1px solid var(--re-line);
    border-radius: var(--re-r);
    box-shadow: var(--re-sh-sm);
    padding: 1.35rem;
}
.re-side-card + .re-side-card { margin-top: 1rem; }

/* ---- guide in progress --------------------------------------------------- */
.re-guide-note {
    display: flex; align-items: flex-start; gap: 1rem;
    margin-top: 1.25rem; padding: 1.15rem 1.25rem;
    background: var(--re-navy-050);
    border: 1px solid var(--re-line);
    border-left: 4px solid var(--re-accent);
    border-radius: var(--re-r);
}
.re-guide-note-icon {
    flex: none; width: 40px; height: 40px; border-radius: 12px;
    display: grid; place-items: center; font-size: 1.1rem;
    background: var(--re-white); color: var(--re-navy);
}
.re-guide-note-title { margin: 0 0 .35rem; font-size: 1.05rem; font-weight: 700; color: var(--re-navy); }
.re-guide-note-text { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--re-body); }
.re-guide-note-link {
    display: inline-flex; align-items: center; gap: .35rem; margin-top: .7rem;
    font-size: .9rem; font-weight: 600; text-decoration: none; color: var(--re-accent-700);
}
.re-guide-note-link:hover { text-decoration: underline; }

@media (max-width: 767.98px) {
    .re-doc-grid { grid-template-columns: minmax(0, 1fr); }
    .re-guide-note { flex-direction: column; gap: .75rem; }
}

.re-dest-tile {
    display: flex; flex-direction: column;
    background: var(--re-white);
    border: 1px solid var(--re-line);
    border-radius: var(--re-r);
    overflow: hidden;
    transition: transform var(--re-t), box-shadow var(--re-t), border-color var(--re-t);
}
.re-dest-tile:hover { transform: translateY(-3px); box-shadow: var(--re-sh); border-color: var(--re-navy-300); }

.re-dest-tile-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }

.re-dest-tile-media {
    aspect-ratio: 4 / 3;
    background: var(--re-navy-050);
    overflow: hidden;
}
.re-dest-tile-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.re-dest-tile-bar {
    display: flex; align-items: center; gap: .5rem;
    background: var(--re-navy);
    color: #fff;
    padding: .7rem .9rem;
}
.re-dest-tile-flag { flex: 0 0 auto; border-radius: 2px; object-fit: cover; }
.re-dest-tile-title {
    font-family: var(--re-font-head);
    font-weight: 700; font-size: .95rem; letter-spacing: .01em;
}

.re-dest-tile-text {
    margin: 0; padding: .85rem .9rem 1rem;
    font-size: .88rem; line-height: 1.6; color: var(--re-body);
}

@media (max-width: 575.98px) {
    .re-dest-tile-media { aspect-ratio: 16 / 9; }
}

/* =========================================================== carousels ===== */
/* Scroll-snap, not a slider library. The track is a scrollable flex row; the
   buttons only nudge it. With JavaScript off it degrades to a horizontally
   scrollable list, which is a usable thing rather than a broken one. */
.re-carousel { position: relative; }

.re-carousel-track {
    display: flex; gap: 1.25rem;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: .25rem .25rem 1rem;
    margin: 0 -.25rem;
    scrollbar-width: thin;
}
.re-carousel-track > * { scroll-snap-align: start; flex: 0 0 auto; }
.re-carousel-track:focus-visible { outline: 2px solid var(--re-navy); outline-offset: 3px; border-radius: var(--re-r-sm); }

.re-carousel-nav { display: flex; gap: .5rem; justify-content: center; margin-top: .25rem; }
.re-carousel-btn {
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--re-line); background: var(--re-white);
    color: var(--re-navy); display: inline-flex; align-items: center; justify-content: center;
    transition: background-color var(--re-t), color var(--re-t), border-color var(--re-t);
}
.re-carousel-btn:hover:not(:disabled) { background: var(--re-navy); color: #fff; border-color: var(--re-navy); }
.re-carousel-btn:disabled { opacity: .38; cursor: default; }

/* Pagination dots. Built by site.js once it has measured the track, because
   how many pages there are depends on how many cards fit on the screen. */
.re-carousel-dots { display: flex; align-items: center; gap: .4rem; }
.re-carousel-dot {
    width: 9px; height: 9px; padding: 0; border-radius: 50%;
    border: 1px solid var(--re-navy-300); background: transparent;
    transition: background-color var(--re-t), border-color var(--re-t), width var(--re-t);
}
.re-carousel-dot.is-active {
    width: 22px; border-radius: 99px;
    background: var(--re-accent); border-color: var(--re-accent);
}
.re-carousel-dot:focus-visible {
    outline: 2px solid var(--re-navy); outline-offset: 2px;
}

/* Nothing overflows, so there is no page to turn to and no control row worth
   drawing. site.js sets this once it has measured. */
.re-carousel-static .re-carousel-nav { display: none; }

/* ------------------------------------------------- enquiry / apply section */
/* A visual panel (about 43%) beside the form card (about 57%) from 992px,
   stretched to one height so neither side looks unfinished. One column below
   that: the panel first, then the form. */
.re-apply { background: var(--re-grey-100); }

.re-apply-grid {
    display: grid;
    grid-template-columns: minmax(0, 43fr) minmax(0, 57fr);
    gap: clamp(1.25rem, 2.4vw, 2rem);
    align-items: stretch;
}

/* ---- the panel ----------------------------------------------------------- */
/* Navy with a green glow, on its own or under a photograph. Its decorations
   sit on negative layers inside an isolated stacking context, so they can
   never paint over the words. */
.re-apply-visual {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
    min-height: 560px;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    border-radius: var(--re-r-xl);
    color: var(--re-white);
    background:
        radial-gradient(90% 60% at 100% 0%, rgba(31, 157, 77, .36) 0%, rgba(31, 157, 77, 0) 62%),
        radial-gradient(70% 50% at 0% 100%, rgba(26, 74, 158, .55) 0%, rgba(26, 74, 158, 0) 70%),
        linear-gradient(160deg, var(--re-navy) 0%, var(--re-navy-800) 55%, var(--re-navy-900) 100%);
    box-shadow: var(--re-sh);
}

/* The photograph fills the panel. The words sit on its lower part, where the
   overlay is darkest; the upper part stays clear for the people in it. */
.re-apply-visual-media { position: absolute; inset: 0; z-index: -1; }
.re-apply-visual-img {
    display: block; width: 100%; height: 100%;
    object-fit: cover; object-position: center top;   /* cropped, never stretched */
}
.re-apply-visual-media::after {
    content: ""; position: absolute; inset: 0;
    background:
        /* Dark enough for white text from the point the words begin, and no
           darker above it, so the picture keeps its top half. */
        linear-gradient(180deg, rgba(4, 20, 47, .12) 0%, rgba(4, 20, 47, .34) 18%,
                                rgba(4, 20, 47, .74) 32%, rgba(4, 20, 47, .90) 50%,
                                rgba(4, 20, 47, .97) 100%),
        linear-gradient(135deg, rgba(31, 157, 77, .34) 0%, rgba(31, 157, 77, 0) 42%);
}

/* Over a photograph the words carry a soft shadow, so a light patch in
   somebody else's picture cannot take the contrast away. */
.re-apply-visual.has-image .re-apply-visual-head,
.re-apply-visual.has-image .re-apply-visual-foot { text-shadow: 0 1px 10px rgba(4, 20, 47, .45); }

/* Words: at the top with no photograph, gathered at the bottom with one. */
.re-apply-visual-foot { margin-top: auto; }
.re-apply-visual.has-image .re-apply-visual-head { margin-top: auto; }
.re-apply-visual.has-image .re-apply-visual-foot { margin-top: 0; }

/* Decoration: a soft ring off the top corner and a fading dot grid. */
.re-apply-visual-ring {
    position: absolute; z-index: -1; pointer-events: none;
    top: -110px; right: -110px; width: 280px; height: 280px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 0 0 28px rgba(255, 255, 255, .035), 0 0 0 56px rgba(255, 255, 255, .025);
}
.re-apply-visual-dots {
    position: absolute; z-index: -1; pointer-events: none;
    right: 1.5rem; bottom: 1.5rem; width: 132px; height: 96px;
    background-image: radial-gradient(rgba(255, 255, 255, .26) 1.4px, transparent 1.6px);
    background-size: 14px 14px;
    -webkit-mask-image: linear-gradient(315deg, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 0) 85%);
            mask-image: linear-gradient(315deg, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 0) 85%);
}
.re-apply-visual.has-image .re-apply-visual-dots { top: 1.5rem; bottom: auto; }

/* With no photograph: a globe emblem with two small badges, so the panel
   opens on a picture of what the section is about rather than on nothing. */
.re-apply-visual-emblem { position: relative; flex: none; width: 132px; height: 118px; }
.re-apply-visual-emblem-core {
    position: absolute; left: 16px; top: 14px;
    width: 90px; height: 90px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: 2.5rem; color: var(--re-white);
    background: linear-gradient(145deg, var(--re-accent-light) 0%, var(--re-accent) 45%, var(--re-accent-700) 100%);
    box-shadow: 0 0 0 10px rgba(255, 255, 255, .06), 0 0 0 22px rgba(255, 255, 255, .035),
                0 20px 40px -18px rgba(0, 0, 0, .55);
}
.re-apply-visual-emblem-chip {
    position: absolute; width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center; font-size: 1rem;
    color: var(--re-navy); background: var(--re-white);
    box-shadow: 0 10px 22px -10px rgba(4, 20, 47, .7);
}
.re-apply-visual-emblem-chip.is-cap   { right: 0; top: 0; }
.re-apply-visual-emblem-chip.is-plane { right: 8px; bottom: 0; color: var(--re-accent-600); }

.re-apply-eyebrow {
    display: inline-flex; align-items: center; gap: .6rem;
    font-size: .76rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--re-accent-light); margin: 0 0 .7rem;
}
.re-apply-eyebrow::before {
    content: ""; width: 28px; height: 2px; border-radius: 2px; background: var(--re-accent-light);
}
.re-apply-heading {
    color: var(--re-white); margin: 0;
    font-size: clamp(1.75rem, 2.9vw, 2.45rem); line-height: 1.15; letter-spacing: -.01em;
}
.re-apply-blurb {
    color: rgba(255, 255, 255, .86); font-size: 1rem; line-height: 1.6;
    margin: .8rem 0 0; max-width: 36ch;
}

.re-apply-benefits {
    list-style: none; margin: 0; padding: 1.25rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, .16);
    display: grid; gap: .8rem;
}
.re-apply-benefit { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.re-apply-benefit-icon {
    flex: none; width: 38px; height: 38px; border-radius: 12px;
    display: grid; place-items: center; font-size: 1.1rem;
    color: var(--re-white); background: var(--re-accent);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.re-apply-benefit-text  { display: flex; flex-direction: column; min-width: 0; }
.re-apply-benefit-title { font-weight: 600; font-size: .98rem; color: var(--re-white); }
.re-apply-benefit-body  { font-size: .84rem; color: rgba(255, 255, 255, .76); }

.re-apply-highlight {
    display: inline-flex; align-items: center; gap: .5rem; margin: 1rem 0 0;
    background: rgba(255, 255, 255, .1); color: var(--re-white);
    border: 1px solid rgba(255, 255, 255, .18); border-radius: 99px;
    padding: .45rem .9rem; font-size: .86rem; font-weight: 600;
}
.re-apply-highlight i { color: var(--re-accent-light); }

/* ---- the form card ------------------------------------------------------- */
/* One soft border and one soft shadow — a premium card is quiet, not heavy. */
.re-apply-card {
    min-width: 0;
    background: var(--re-white);
    border: 1px solid var(--re-line);
    border-radius: 18px;
    box-shadow: var(--re-sh);
    padding: clamp(1.5rem, 2.8vw, 2.25rem);
}
/* Heading and intro share one block, so the space below them is the same
   whether an administrator wrote an intro or not. */
.re-apply-form-head    { margin-bottom: 1.25rem; }
.re-apply-form-heading { color: var(--re-navy); font-size: 1.15rem; margin: 0; }
.re-apply-form-intro   { color: var(--re-body); font-size: .9rem; margin: .35rem 0 0; }

/* The progress line: two labelled segments, green as they are reached. */
.re-enquiry-progress {
    list-style: none; margin: 0 0 1.6rem; padding: 0;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem;
}
.re-enquiry-progress-item {
    position: relative; min-width: 0;
    display: flex; align-items: center; gap: .6rem; padding-bottom: .9rem;
    font-size: .88rem; font-weight: 600; color: var(--re-muted);
}
.re-enquiry-progress-item::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0;
    height: 4px; border-radius: 4px; background: var(--re-line-soft);
    transition: background-color .25s ease;
}
.re-enquiry-progress-item.is-active,
.re-enquiry-progress-item.is-done { color: var(--re-navy); }
.re-enquiry-progress-item.is-active::after,
.re-enquiry-progress-item.is-done::after { background: var(--re-accent); }

.re-enquiry-progress-num {
    flex: none; width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center; font-size: .82rem; font-weight: 700;
    color: var(--re-body); background: var(--re-white); border: 1.5px solid var(--re-line);
}
.re-enquiry-progress-num .bi { display: none; font-size: 1rem; }
.re-enquiry-progress-item.is-active .re-enquiry-progress-num {
    color: var(--re-white); background: var(--re-accent); border-color: var(--re-accent);
}
.re-enquiry-progress-item.is-done .re-enquiry-progress-num {
    color: var(--re-accent-700); background: var(--re-accent-050); border-color: var(--re-accent-050);
}
.re-enquiry-progress-item.is-done .re-enquiry-progress-digit { display: none; }
.re-enquiry-progress-item.is-done .re-enquiry-progress-num .bi { display: block; }
.re-enquiry-progress-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.re-enquiry-step-title { color: var(--re-navy); font-size: 1.22rem; line-height: 1.3; margin: 0 0 1.15rem; }
.re-enquiry-step-title:focus { outline: none; }
.re-enquiry-step-title:focus-visible { outline: 2px solid var(--re-navy); outline-offset: 4px; border-radius: 4px; }

/* Without JavaScript both steps show, one under the other. */
.re-enquiry-form:not(.is-stepped) .re-enquiry-step + .re-enquiry-step {
    margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--re-line-soft);
}

.re-enquiry-actions { display: flex; gap: .75rem; margin-top: 1.5rem; }
.re-enquiry-actions .re-btn { justify-content: center; }
.re-enquiry-next, .re-enquiry-submit { flex: 1 1 auto; }
.re-enquiry-back { flex: 0 0 auto; }

/* The follow-up questions a "Yes" opens, grouped under their question. */
.re-enquiry-reveal {
    padding: 1rem; border-radius: 14px;
    background: var(--re-grey-100); border: 1px solid var(--re-line-soft);
}

/* A fieldset must not inherit the browser's default box, but its legend still
   has to read as the question it is. */
.re-apply-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.re-apply-fieldset legend {
    float: none; width: auto; padding: 0; margin-bottom: .5rem;
    font-size: .86rem; font-weight: 600; color: var(--re-ink);
}

/* Yes / No as two pills. The radio inputs are real and stay focusable
   (Bootstrap's .btn-check); the pill is their label. */
.re-choice-group { display: flex; flex-wrap: wrap; gap: .5rem; }
.re-choice {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 92px; min-height: 44px; padding: .45rem 1.2rem; margin: 0;
    border: 1.5px solid var(--re-line); border-radius: 99px;
    background: var(--re-white); color: var(--re-ink);
    font-size: .92rem; font-weight: 600; cursor: pointer; user-select: none;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.re-choice:hover { border-color: var(--re-navy-300); }
.btn-check:checked + .re-choice {
    border-color: var(--re-accent); background: var(--re-accent-050); color: var(--re-accent-700);
}
.btn-check:focus-visible + .re-choice { outline: 2px solid var(--re-navy); outline-offset: 2px; }

.re-apply-scope-note {
    display: flex; align-items: center; gap: .45rem;
    font-size: .85rem; color: var(--re-body);
    background: var(--re-navy-050); border-radius: var(--re-r-sm);
    padding: .6rem .85rem; margin: 0;
}
/* The note's column takes no room while the note is hidden. */
.re-enquiry-form [data-enquiry-scope-wrap]:has(> [hidden]) { display: none; }

/* Spacious controls: 48px tall, easy to hit on a phone. */
.re-apply .form-label { font-size: .86rem; font-weight: 600; color: var(--re-ink); margin-bottom: .4rem; }
.re-apply .form-control,
.re-apply .form-select { min-height: 48px; border-radius: 12px; border-color: var(--re-line); font-size: .95rem; }
.re-apply textarea.form-control { min-height: 96px; }
.re-apply .form-control::placeholder { color: var(--re-muted); opacity: .8; }
.re-apply .form-control:focus,
.re-apply .form-select:focus { border-color: var(--re-navy-300); box-shadow: 0 0 0 .2rem rgba(11, 46, 111, .12); }
.re-apply .re-req { color: var(--re-danger, #c0392b); }

/* Focus must be visible on every control, not only the ones Bootstrap styles. */
.re-apply .form-control:focus-visible,
.re-apply .form-select:focus-visible,
.re-apply .form-check-input:focus-visible {
    outline: 2px solid var(--re-navy); outline-offset: 2px;
}

@media (max-width: 1199.98px) {
    .re-apply-visual { min-height: 520px; }
}

@media (max-width: 991.98px) {
    .re-apply-grid { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
    .re-apply-visual { min-height: 0; }
    .re-apply-visual.has-image { min-height: 460px; }
    .re-apply-blurb { max-width: 52ch; }
    .re-apply-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .re-apply-benefits { grid-template-columns: minmax(0, 1fr); }
}

/* A phone: the photograph becomes a band across the top of the panel, fading
   into the navy the words sit on; the card keeps breathing room without the
   inputs becoming unusably narrow, and nothing pushes the page sideways. */
@media (max-width: 575.98px) {
    .re-apply-visual { padding: 1.5rem; gap: 1.25rem; border-radius: var(--re-r-lg); }
    .re-apply-visual.has-image { min-height: 0; padding-top: 0; }
    .re-apply-visual.has-image .re-apply-visual-media {
        position: relative; inset: auto; z-index: 0; height: 220px; margin: 0 -1.5rem;
    }
    .re-apply-visual.has-image .re-apply-visual-media::after {
        background:
            linear-gradient(180deg, rgba(4, 20, 47, 0) 40%, rgba(4, 20, 47, .55) 75%, rgba(4, 20, 47, .95) 100%),
            linear-gradient(135deg, rgba(31, 157, 77, .3) 0%, rgba(31, 157, 77, 0) 45%);
    }
    .re-apply-visual.has-image .re-apply-visual-head { margin-top: 0; }
    .re-apply-card { padding: 1.25rem; border-radius: var(--re-r); }
    .re-enquiry-progress-item { font-size: .8rem; gap: .45rem; }
    .re-enquiry-actions { flex-direction: column-reverse; }
    .re-enquiry-actions .re-btn { width: 100%; }
}

/* ------------------------------------------------------- testimonial card */
/* 3 across on desktop, 2 on tablet, 1 on a phone — the gap is subtracted so
   the cards line up with the container rather than overflowing it. */
.re-quote-card {
    width: calc((100% - 2.5rem) / 3);
    min-width: 260px;
    display: flex; flex-direction: column; gap: .75rem;
    background: var(--re-white);
    border: 1px solid var(--re-line);
    border-radius: var(--re-r);
    box-shadow: var(--re-sh-xs);
    padding: 1.35rem;
}
/* A card lifts a little on hover — enough to say it is a distinct thing,
   not enough to be movement for its own sake. */
.re-quote-card { transition: border-color var(--re-t), box-shadow var(--re-t); }
.re-quote-card:hover { border-color: var(--re-navy-300); box-shadow: var(--re-sh-sm); }

.re-quote-head {
    display: flex; align-items: center; gap: .8rem;
    padding-bottom: .15rem;
}

/* The photograph and the initials fallback are the SAME circle. They used to
   be 56px and 42px, so a card without a photograph sat visibly lower than the
   one beside it. */
.re-quote-head .re-quote-photo,
.re-quote-head .re-quote-initials {
    width: 56px; height: 56px; border-radius: 50%;
    object-fit: cover; flex: 0 0 auto;
    border: 2px solid var(--re-accent-050);
}
.re-quote-head .re-quote-initials {
    display: grid; place-items: center;
    background: var(--re-navy-050); color: var(--re-navy);
    font-weight: 700; font-size: .95rem;
}

.re-quote-who { display: flex; flex-direction: column; line-height: 1.35; }
.re-quote-who strong { font-size: .98rem; color: var(--re-navy); font-weight: 700; }
.re-quote-who small { font-size: .82rem; color: var(--re-accent-600); font-weight: 600; }
.re-quote-meta { margin: -.35rem 0 0; font-size: .8rem; color: var(--re-body); }

/* The opening quotation mark is decoration and belongs in the stylesheet:
   in the markup it would be read aloud before every testimonial. */
.re-quote-card .re-quote-text {
    font-size: .93rem; color: var(--re-body); margin: 0; flex: 1 1 auto;
    position: relative; padding-left: 1.15rem;
}
.re-quote-card .re-quote-text::before {
    content: '\201C';
    position: absolute; left: 0; top: -.35rem;
    font-size: 1.9rem; line-height: 1; font-weight: 700;
    color: var(--re-accent); opacity: .5;
}

.re-quote-foot {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
    font-size: .82rem; padding-top: .35rem; border-top: 1px solid var(--re-line);
}
/* --re-muted measures 3.06:1 on the white card. The source and programme lines
   are small text carrying real information, so they need 4.5:1, not the 3:1 a
   graphic would. --re-body gives 7.53:1 and they stay visually secondary
   through size, not faintness. */
.re-quote-source { color: var(--re-body); font-style: italic; }
.re-quote-more,
.re-quote-video  { color: var(--re-navy); font-weight: 600; display: inline-flex; align-items: center; gap: .3rem; }

@media (max-width: 991.98px) { .re-quote-card { width: calc((100% - 1.25rem) / 2); } }
@media (max-width: 575.98px) { .re-quote-card { width: 100%; min-width: 0; } }



/* ------------------------------------------------------ study abroad blog */
/* The listing bar, the card shared by the listing, related posts and the
   homepage, and the article. Images sit in a fixed 16:9 frame and are covered,
   never stretched. */

/* minmax(0, 1fr): the scrolling chip row on a phone must not widen the column. */
.re-blog-bar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-bottom: 1.75rem; }

.re-blog-search {
    display: flex; align-items: center; gap: .5rem;
    max-width: 640px; min-width: 0; padding: .35rem .35rem .35rem 1rem;
    background: #fff; border: 1px solid var(--re-line); border-radius: 999px;
    box-shadow: var(--re-sh-sm);
}
.re-blog-search > i { color: var(--re-muted); flex: 0 0 auto; }
.re-blog-search input {
    flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent;
    font-size: .95rem; color: var(--re-ink); padding: .45rem 0;
}
.re-blog-search:focus-within { border-color: var(--re-navy); }
.re-blog-search .re-btn { flex: 0 0 auto; padding: .55rem 1.2rem; border-radius: 999px; }

.re-blog-cats { display: flex; flex-wrap: wrap; gap: .5rem; min-width: 0; }
.re-blog-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .42rem .9rem; border-radius: 999px;
    background: #fff; border: 1px solid var(--re-line);
    color: var(--re-body); font-size: .86rem; font-weight: 600; text-decoration: none;
    white-space: nowrap;
}
.re-blog-chip:hover { border-color: var(--re-navy); color: var(--re-navy); }
.re-blog-chip.is-active { background: var(--re-navy); border-color: var(--re-navy); color: #fff; }
.re-blog-chip-count {
    min-width: 1.35rem; padding: 0 .35rem; border-radius: 999px; text-align: center;
    background: var(--re-grey-100); color: var(--re-body); font-size: .74rem;
}
.re-blog-chip.is-active .re-blog-chip-count { background: rgba(255, 255, 255, .2); color: #fff; }

.re-blog-count { font-size: .88rem; color: var(--re-muted); margin-bottom: 1rem; }
.re-blog-empty {
    padding: 3rem 1.5rem; border: 1px dashed var(--re-line); border-radius: var(--re-r-lg);
    background: var(--re-grey-100);
}
.re-blog-empty > i { font-size: 2.4rem; color: var(--re-navy); display: block; margin-bottom: .8rem; }
.re-blog-empty p { max-width: 52ch; margin-left: auto; margin-right: auto; }

/* The card. */
.re-blog-card { display: flex; flex-direction: column; height: 100%; min-width: 0; }
.re-blog-card-media {
    display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden;
    background: var(--re-grey-100);
}
.re-blog-card-media img {
    display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;
    transition: transform .35s ease;
}
.re-blog-card:hover .re-blog-card-media img { transform: scale(1.03); }
.re-blog-card-placeholder {
    position: absolute; inset: 0; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--re-navy-050), var(--re-grey-100));
    color: var(--re-navy); font-size: 2.2rem;
}
.re-blog-card .re-post-body { gap: .15rem; }
.re-blog-card-cat { align-self: flex-start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.re-blog-card .re-post-title { overflow-wrap: anywhere; }
.re-blog-card .re-post-title a { color: var(--re-ink); text-decoration: none; }
.re-blog-card .re-post-title a:hover { color: var(--re-navy); }
.re-blog-card-excerpt {
    /* Not the flexible filler .re-post-text is elsewhere: growing would show a fourth line past the clamp. */
    flex: 0 0 auto;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    margin-bottom: .75rem;
}
.re-blog-card-meta {
    display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0 0 .85rem;
    font-size: .8rem; color: var(--re-muted);
}
.re-blog-card-meta i { margin-right: .25rem; }
.re-blog-card-more {
    margin-top: auto; align-self: flex-start;
    display: inline-flex; align-items: center; gap: .4rem;
    font-weight: 700; font-size: .9rem; color: var(--re-navy); text-decoration: none;
}
.re-blog-card-more:hover { color: var(--re-accent-600); }
.re-blog-card-more i { transition: transform .2s ease; }
.re-blog-card-more:hover i { transform: translateX(3px); }

/* The article. */
.re-article-cat { text-decoration: none; }
.re-article-cat:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.re-article-meta {
    display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; margin: .25rem 0 0;
    color: rgba(255, 255, 255, .85); font-size: .92rem;
}
.re-article-meta i { margin-right: .3rem; }
.re-article-body { max-width: 820px; margin: 0 auto; min-width: 0; }
.re-article-cover {
    margin: 0 0 1.75rem; aspect-ratio: 16 / 9; overflow: hidden;
    border-radius: var(--re-r-lg); background: var(--re-grey-100);
}
.re-article-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.re-article-lead { font-size: 1.12rem; line-height: 1.7; color: var(--re-ink); font-weight: 500; margin-bottom: 1.5rem; }
.re-article .re-prose { overflow-wrap: anywhere; }
.re-article .re-prose img { max-width: 100%; height: auto; border-radius: var(--re-r-sm); }
.re-article .re-prose table { display: block; max-width: 100%; overflow-x: auto; }
.re-article .re-source-note {
    display: block; margin: 2rem 0 0; padding: 1.1rem 1.25rem;
    border: 1px solid var(--re-line); border-left: 4px solid var(--re-navy);
    border-radius: var(--re-r-sm); background: var(--re-grey-100);
    font-size: .92rem; color: var(--re-body);
}
.re-article .re-source-caution { margin-top: .5rem; font-size: .84rem; color: var(--re-muted); }
.re-article-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 0; }
.re-article-updated { margin: 1rem 0 0; font-size: .84rem; color: var(--re-muted); }
.re-article-back { margin: 2rem 0 0; }

.re-blog-related { background: var(--re-grey-100); }
.re-blog-related-title { font-size: clamp(1.35rem, 2.6vw, 1.75rem); margin-bottom: 1.25rem; }

@media (max-width: 575.98px) {
    .re-blog-search { padding-left: .85rem; }
    .re-blog-search .re-btn { padding: .5rem .9rem; }
    .re-blog-cats { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .25rem; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
    .re-article-meta { font-size: .86rem; }
}

@media (prefers-reduced-motion: reduce) {
    .re-blog-card-media img, .re-blog-card-more i { transition: none; }
    .re-blog-card:hover .re-blog-card-media img { transform: none; }
}