/* ==========================================================================
   ESG Professional Certificate — Landing Page
   Rathinam Global University / School of Sustainability & Climate Studies
   --------------------------------------------------------------------------
   1.  Variables
   2.  Reset
   3.  Typography & shared blocks
   4.  Layout / containers
   5.  Buttons
   6.  Icons & lists
   7.  Header / Navbar
   8.  Hero
   9.  Lead capture form (hero + final CTA)
   10. Programme at a Glance
   11. Section navigation
   12. Learning Journey (roadmap)
   13. Program Curriculum (accordion)
   14. Beyond the Classroom (gallery)
   15. Faculty
   16. Partners
   17. Testimonials (carousel)
   18. Investment / Pricing
   19. Certification
   20. FAQ
   21. Final CTA / Enrollment
   22. Responsive — Tablet
   23. Responsive — Mobile
   ========================================================================== */


/* ==========================================================================
   1. VARIABLES
   ========================================================================== */
:root {
    /* Brand palette (sampled from the reference design) */
    --color-primary:        #134d49;
    --color-primary-dark:   #0e3b38;
    --color-primary-deep:   #0e403b;
    --color-primary-light:  #1f635e;

    --color-accent:         #c8a74d;
    --color-accent-bright:  #e7af17;
    --color-accent-soft:    #d9bd6a;

    --color-mint:           #e9f6f2;
    --color-white:          #ffffff;

    --color-text:           #18312f;
    --color-muted:          #64748a;
    --color-border:         #dde6e2;
    --color-border-soft:    #e6eeeb;

    --color-check:          #178a72;
    --color-success:        #4fc98d;

    /* Surfaces used on dark sections */
    --surface-dark:         rgba(255, 255, 255, 0.05);
    --surface-dark-border:  rgba(255, 255, 255, 0.16);
    --surface-dark-text:    rgba(255, 255, 255, 0.78);
    --surface-dark-hint:    #90bdb9;

    /* Typography */
    --font-sans: "Figtree", "Inter", "Segoe UI", Roboto, Arial, sans-serif;

    /* Radii */
    --radius-sm:  6px;
    --radius-md:  8px;
    --radius-lg:  10px;
    --radius-xl:  14px;
    --radius-2xl: 16px;

    /* Shadows */
    --shadow-card:  0 8px 24px rgba(19, 77, 73, 0.05);
    --shadow-media: 0 10px 24px rgba(19, 77, 73, 0.10);
    --shadow-lift:  0 18px 40px rgba(19, 77, 73, 0.18);

    /* Dark section background (hero + final CTA) */
    --gradient-dark: radial-gradient(115% 130% at 82% 48%,
                        var(--color-primary-light) 0%,
                        #135751 42%,
                        var(--color-primary-deep) 100%);
}


/* ==========================================================================
   2. RESET
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    overflow-x: hidden;
    overflow-x: clip;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-white);
    overflow-x: hidden;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

img, svg { max-width: 100%; }
img { display: block; height: auto; }

a { color: inherit; text-decoration: none; }

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button { cursor: pointer; }

s { text-decoration: line-through; }

:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: 3px;
}

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}


/* ==========================================================================
   3. TYPOGRAPHY & SHARED BLOCKS
   ========================================================================== */
.eyebrow {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0;
}
.eyebrow--center { text-align: center; }

.section__title {
    font-size: 36px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--color-primary);
    margin: 10px 0 0;
}
.section__title--center { text-align: center; }
.section__title--xl { font-size: 48px; }

.section__lead {
    max-width: 640px;
    margin: 16px auto 0;
    text-align: center;
    font-size: 18px;
    line-height: 25px;
    color: var(--color-muted);
}
.section__lead--sm  { font-size: 16px; line-height: 23px; max-width: 470px; }
.section__lead--wide { max-width: 900px; }


/* ==========================================================================
   4. LAYOUT / CONTAINERS
   ========================================================================== */
.container {
    width: min(1200px, calc(100% - 48px));
    margin-inline: auto;
}

.section { padding: 72px 0 78px; }
.section--white { background: var(--color-white); }
.section--mint  { background: var(--color-mint); padding: 58px 0 64px; }

/* Offset anchored sections so the sticky header never covers them */
section[id] { scroll-margin-top: 96px; }


/* ==========================================================================
   5. BUTTONS
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: background-color .18s ease, border-color .18s ease,
                color .18s ease, box-shadow .18s ease, filter .18s ease;
}

.btn--sm    { min-height: 47px; padding: 0 22px; font-size: 14px; }
.btn--lg    { min-height: 64px; padding: 0 30px; font-size: 16px; border-radius: var(--radius-lg); }
.btn--block { width: 100%; }

/* Gold gradient CTA (hero + final CTA) */
.btn--gold {
    background: linear-gradient(90deg,
                var(--color-accent) 0%,
                var(--color-accent-bright) 50%,
                var(--color-accent) 100%);
    color: var(--color-text);
}
.btn--gold:hover { filter: brightness(1.06); }

/* Flat gold (pricing card) */
.btn--gold-flat { background: var(--color-accent); color: var(--color-text); }
.btn--gold-flat:hover { background: #d5b45a; }

/* Solid dark green (navbar) */
.btn--dark { background: var(--color-primary); color: var(--color-white); }
.btn--dark:hover { background: var(--color-primary-dark); }

/* Outlined on light backgrounds */
.btn--outline {
    background: var(--color-white);
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn--outline:hover { background: var(--color-mint); }

/* Outlined on dark backgrounds */
.btn--ghost {
    background: transparent;
    color: var(--color-white);
    border-color: rgba(255, 255, 255, 0.34);
}
.btn--ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.55);
}

/* Solid white (form submit on dark) */
.btn--white { background: var(--color-white); color: var(--color-primary-dark); }
.btn--white:hover { background: #f2f7f5; }


/* ==========================================================================
   6. ICONS & LISTS
   ========================================================================== */
.icon {
    width: 18px;
    height: 18px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.icon--arrow { width: 17px; height: 17px; stroke-width: 2; }

/* Tick lists — check-in-circle marker rendered as an inline SVG background */
.ticklist li,
.price-card__features li,
.cta__points li {
    position: relative;
    padding-left: 27px;
    background-repeat: no-repeat;
    background-position: 0 center;
    background-size: 16px 16px;
}

.ticklist li {
    font-size: 14px;
    line-height: 28px;
    color: var(--color-muted);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23178a72' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5V12a9 9 0 1 1-5.3-8.2'/%3E%3Cpath d='m9 11.5 3 3 8.5-8.5'/%3E%3C/svg%3E");
}


/* ==========================================================================
   7. HEADER / NAVBAR
   ========================================================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--color-white);
}

.navbar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    height: 85px;
}

.navbar__brand {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    overflow: hidden;
}
.navbar__logo {
    height: 44px;
    width: auto;
    min-width: 0;
    object-fit: contain;
}
.navbar__logo--rgu { height: 46px; }
.navbar__brand-divider {
    flex: none;
    width: 1px;
    height: 40px;
    background: var(--color-border);
}

.navbar__links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
}
.navbar__links a {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text);
    transition: color .18s ease;
}
.navbar__links a:hover { color: var(--color-primary); }

/* Gold button for ESG nav link (#D4AA42) */
.navbar__esg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #D4AA42 !important;
    color: #18312f !important;
    font-weight: 700 !important;
    padding: 10px 22px;
    border-radius: 12px;
    text-decoration: none;
    line-height: 1.2;
    transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}
.navbar__esg-btn:hover {
    background-color: #c49933 !important;
    color: #0e3b38 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(212, 170, 66, 0.4);
}

.navbar__actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Hamburger */
.navbar__toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-white);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.navbar__toggle span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--color-primary);
    transition: transform .22s ease, opacity .22s ease;
}
.navbar__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navbar__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.mobile-nav {
    border-top: 1px solid var(--color-border);
    background: var(--color-white);
    padding: 14px 24px 24px;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav__links li + li { border-top: 1px solid var(--color-border-soft); }
.mobile-nav__links a {
    display: block;
    padding: 13px 2px;
    font-size: 15px;
    color: var(--color-text);
}
.mobile-nav__links a.navbar__esg-btn {
    display: inline-flex;
    margin: 8px 0;
    padding: 8px 18px;
}
.mobile-nav__actions {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}


/* ==========================================================================
   8. HERO
   ========================================================================== */
.hero {
    background: var(--gradient-dark);
    color: var(--color-white);
    padding: 64px 0 66px;
}

.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 481px;
    gap: 60px;
    align-items: start;
}

.hero__eyebrow {
    display: inline-block;
    margin: 0;
    padding: 13px 19px;
    border: 1px solid rgba(200, 167, 77, 0.55);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.13em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--color-accent-soft);
}

.hero__title {
    margin: 12px 0 0;
    font-size: 58px;
    line-height: 0.96;
    font-weight: 700;
    letter-spacing: -0.015em;
}
.hero__title em {
    font-style: italic;
    color: var(--color-accent);
}

.hero__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    /* 2 x 228 + 14 gap. Sized so the longest label ("Career-Focused
       Curriculum", 174px) fits on one line with room to spare. */
    max-width: 470px;
    margin-top: 34px;
}
.pill {
    flex: 0 0 228px;
    display: inline-flex;
    align-items: center;
    /* start, not centre: centring the icon+label pair as a unit pushed each
       icon to a different offset depending on how long its label was, so the
       icons never lined up. Anchoring to the start puts every icon on the
       same x and every label on the same x. */
    justify-content: flex-start;
    gap: 9px;
    /* min-height, not height: a two-line label such as "Career-Focused
       Curriculum" used to overflow a fixed 40px box */
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.06);
    font-size: 14px;
    text-align: left;
    line-height: 1.3;
    color: var(--color-white);
}
.pill .icon {
    flex: none;                 /* never squeezed when the label wraps */
    width: 15px;
    height: 15px;
    color: var(--color-accent);
    stroke-width: 1.8;
}

.hero__lead {
    max-width: 620px;
    margin-top: 24px;
    font-size: 16px;
    line-height: 24px;
    color: var(--surface-dark-text);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}
.hero__actions .btn { min-width: 300px; }


/* ==========================================================================
   9. LEAD CAPTURE FORM (hero + final CTA)
   ========================================================================== */
.hero .lead-card { margin-top: 18px; }

.lead-card {
    background: var(--surface-dark);
    border: 1px solid var(--surface-dark-border);
    border-radius: var(--radius-2xl);
    padding: 26px 25px 24px;
}

.lead-card__title {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-white);
}
.lead-card__text {
    margin-top: 8px;
    font-size: 16px;
    line-height: 21px;
    color: var(--surface-dark-text);
}
.lead-card__text--tight { margin-top: 6px; }

.lead-form { margin-top: 22px; }

.field { position: relative; margin-bottom: 14px; }

.field input,
.field select {
    width: 100%;
    height: 52px;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-white);
    font-size: 14px;
    transition: border-color .18s ease, background-color .18s ease;
}
.field select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 44px;
    color: var(--surface-dark-hint);
}
.field select:valid { color: var(--color-white); }
.field select option { color: var(--color-text); background: var(--color-white); }

.field input::placeholder { color: var(--surface-dark-hint); }

.field input:focus,
.field select:focus {
    outline: none;
    border-color: rgba(200, 167, 77, 0.7);
    background: rgba(255, 255, 255, 0.09);
}

.field__chevron {
    position: absolute;
    top: 26px;
    right: 18px;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    color: var(--surface-dark-hint);
    pointer-events: none;
}

.field__error {
    margin: 5px 2px 0;
    font-size: 12px;
    line-height: 1.3;
    color: #f3b7a4;
    min-height: 0;
}
.field.is-invalid input,
.field.is-invalid select { border-color: #d98c74; }

.lead-form .btn { min-height: 56px; margin-top: 1px; }

.lead-form__note {
    margin-top: 16px;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    color: rgba(255, 255, 255, 0.62);
}
.lead-form__note strong { font-weight: 600; }

.lead-form__success {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(79, 201, 141, 0.45);
    border-radius: var(--radius-md);
    background: rgba(79, 201, 141, 0.12);
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
    color: #d8f5e6;
}

/* Form-level message: duplicate lead, network error */
.lead-form__error {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(217, 140, 116, 0.55);
    border-radius: var(--radius-md);
    background: rgba(217, 140, 116, 0.14);
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
    color: #f7d4c8;
}
.lead-form__error[hidden] { display: none; }

/* Honeypot. Kept in the layout and focusable-free rather than display:none,
   because scripted bots skip fields that are display:none. */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}


/* ==========================================================================
   10. PROGRAMME AT A GLANCE
   ========================================================================== */
.glance { padding: 48px 0 54px; }

.glance__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 32px;
}

.glance__item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 15px 24px 15px 15px;
    border-right: 1px solid var(--color-border);
}
.glance__item:nth-child(4n) { border-right: 0; }

.glance__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 47px;
    height: 48px;
    border-radius: 12px;
    background: var(--color-mint);
    color: var(--color-primary);
}
.glance__icon .icon { width: 23px; height: 23px; stroke-width: 1.6; }

.glance__body { display: block; }
.glance__label {
    display: block;
    font-size: 12px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-muted);
}
.glance__value {
    display: block;
    margin-top: 4px;
    font-size: 16px;
    line-height: 19px;
    font-weight: 500;
    color: var(--color-text);
}


/* ==========================================================================
   11. SECTION NAVIGATION
   ========================================================================== */
.section-nav { background: var(--color-white); }

.section-nav__list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 34px;
    height: 60px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.section-nav__list::-webkit-scrollbar { display: none; }
.section-nav__list a {
    display: inline-block;
    padding-bottom: 5px;
    border-bottom: 2px solid transparent;
    font-size: 14px;
    color: var(--color-muted);
    white-space: nowrap;
    transition: color .18s ease, border-color .18s ease;
}
.section-nav__list a:hover { color: var(--color-primary); }
.section-nav__list a.is-active {
    color: var(--color-primary);
    font-weight: 600;
    border-bottom-color: var(--color-accent);
}

/* Sticky state for section navigation */
.section-nav.is-sticky {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 80;
    background: var(--color-white);
    box-shadow: 0 6px 20px rgba(19,77,73,0.06);
}
.section-nav__placeholder { display: block; height: 0; }



/* ==========================================================================
   12. LEARNING JOURNEY (roadmap)
   ========================================================================== */
.journey { padding: 36px 0 44px; }
.journey .section__lead { margin-bottom: 0; }

.journey-map {
    position: relative;
    width: 100%;
    aspect-ratio: 1197 / 664;
    margin-top: -26px;
    container-type: inline-size;
}

.journey-map__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.jm-track {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 18;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.jm-flag {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 2.6;
    stroke-linecap: round;
}
.jm-dots line {
    stroke: var(--color-text);
    stroke-width: 4.4;
    stroke-linecap: round;
    stroke-dasharray: 0 13;
}
.jm-arrows path {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.journey-map__center {
    position: absolute;
    left: 50%;
    top: 26.9%;
    transform: translate(-50%, -50%);
    font-size: 3.01cqw;
    line-height: 1.17;
    font-weight: 500;
    text-align: center;
    color: var(--color-primary);
    white-space: nowrap;
}

/* Milestone disc */
.journey-stage__disc {
    position: absolute;
    left: calc(var(--cx) / 1197 * 100%);
    top: calc(var(--cy) / 664 * 100%);
    width: 16.98%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    /* Thick gold arc across the top, fading out at the lower flanks */
    background: conic-gradient(from 215deg,
                var(--color-accent) 0 280deg,
                transparent 280deg 360deg);
}
.journey-stage__disc::before {
    content: "";
    position: absolute;
    inset: 1.5% 0 -1.5%;
    border: 1.2px solid rgba(19, 77, 73, 0.7);
    border-radius: 50%;
}

.journey-stage__inner {
    position: absolute;
    inset: 5.66%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 9%;
    border-radius: 50%;
    background: var(--color-white);
    box-shadow: 7px 11px 20px rgba(19, 77, 73, 0.14);
    text-align: center;
}
.journey-stage__weeks {
    font-size: 1.17cqw;
    font-weight: 700;
    color: var(--color-text);
}
.journey-stage__name {
    margin-top: 0.5cqw;
    font-size: 1.34cqw;
    line-height: 1.2;
    color: var(--color-text);
}

/* Numbered step */
.journey-stage__num {
    position: absolute;
    left: calc(var(--nx) / 1197 * 100%);
    top: calc(var(--ny) / 664 * 100%);
    width: 4.79%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-white);
    box-shadow: 4px 7px 13px rgba(19, 77, 73, 0.22);
    font-size: 1.84cqw;
    font-weight: 700;
    color: var(--color-primary);
}

/* Vertical fallback (tablet & mobile) — hidden on desktop */
.journey-stages--vertical { display: none; }


/* ==========================================================================
   13. PROGRAM CURRICULUM (accordion)
   ========================================================================== */
.curriculum { padding: 62px 0 70px; }

.curriculum__head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 36px;
}
.curriculum__heading { text-align: right; }
.curriculum__heading .section__title { font-size: 32px; margin-top: 6px; }
.curriculum__rule {
    width: 1px;
    height: 74px;
    background: var(--color-border);
    flex: none;
}
.curriculum__head .btn { min-height: 48px; }

.accordion--weeks {
    max-width: 1040px;
    margin: 48px auto 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.week {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    box-shadow: 0 6px 18px rgba(19, 77, 73, 0.045);
}

.week__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    min-height: 82px;
    padding: 18px 26px;
    border: 0;
    border-radius: var(--radius-lg);
    background: none;
    text-align: left;
}
.week__label {
    flex: 0 0 116px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-accent);
}
.week__title {
    flex: 1 1 auto;
    padding-right: 20px;
    font-size: 16px;
    font-weight: 400;
    color: var(--color-text);
}
.week__chevron {
    width: 20px;
    height: 20px;
    color: var(--color-primary);
    transition: transform .28s ease;
}
.week__trigger[aria-expanded="true"] .week__chevron { transform: rotate(180deg); }

.week__panel {
    overflow: hidden;
    border-top: 1px solid var(--color-border);
    transition: height .3s ease;
}
.week__panel[hidden] { display: none; }

.week__panel-inner {
    display: grid;
    grid-template-columns: 334px 334px minmax(0, 1fr);
    padding: 22px 26px 24px;
}
.week__col-title {
    margin: 0 0 13px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-accent);
}
.week__col-text {
    font-size: 14px;
    line-height: 22px;
    color: var(--color-muted);
    padding-right: 24px;
}


/* ==========================================================================
   14. BEYOND THE CLASSROOM (gallery)
   ========================================================================== */
.experience { padding: 36px 0 42px; }
.experience .section__title { font-size: 32px; }

/* Numbered highlight cards, in place of the photo grid. Six equal tiles on a
   mint section, so they are white with a hairline edge like the faculty and
   week cards already use.

   Hover is one coordinated move rather than several competing ones: the tile
   lifts, its edge picks up the gold accent, the index turns solid and the
   rule beneath it extends. Everything animated here is transform, opacity or
   colour, so none of it touches layout, and the global reduced-motion rule
   flattens the lot. */
.experience-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1040px;
    margin: 56px auto 0;
}

.experience-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 178px;
    padding: 26px 26px 24px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-white);
    box-shadow: var(--shadow-card);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

/* Gold rail that wipes down the leading edge. */
.experience-card::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: var(--color-accent);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .35s ease;
}

/* Barely-there warm wash, so the tile reads as lit rather than tinted. */
.experience-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(135deg, rgba(200, 167, 77, .09), rgba(200, 167, 77, 0) 62%);
    opacity: 0;
    transition: opacity .3s ease;
}

.experience-card:hover {
    transform: translateY(-4px);
    border-color: rgba(200, 167, 77, .55);
    box-shadow: 0 16px 32px rgba(19, 77, 73, .11);
}
.experience-card:hover::before { transform: scaleY(1); }
.experience-card:hover::after { opacity: 1; }

.experience-card__num {
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: rgba(200, 167, 77, .42);
    transition: color .3s ease;
}
.experience-card:hover .experience-card__num { color: var(--color-accent); }

.experience-card__rule {
    display: block;
    width: 26px;
    height: 2px;
    margin-top: 14px;
    border-radius: 2px;
    background: var(--color-accent);
    transition: width .35s ease;
}
.experience-card:hover .experience-card__rule { width: 54px; }

.experience-card__title {
    margin-top: auto;
    padding-top: 18px;
    font-size: 19px;
    line-height: 1.32;
    font-weight: 700;
    /* --color-text rather than --color-primary: it is the darker of the two,
       so the point reads as the thing to look at rather than the index. */
    color: var(--color-text);
    letter-spacing: -0.005em;
}

/* .gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1040px;
    margin: 56px auto 0;
} */
/* .gallery img {
    width: 100%;
    aspect-ratio: 332 / 249;
    object-fit: cover;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-media);
    background: #dfeae6;
} */


/* ==========================================================================
   14. BEYOND THE CLASSROOM (GALLERY)
   ========================================================================== */
/* .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 40px;
} */

/* .gallery li {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    cursor: pointer;
    list-style: none;
} */

/* .gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
} */

/* .gallery__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 50%);
    opacity: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 24px;
    transition: opacity 0.3s ease;
} */

/* .gallery__overlay span {
    color: var(--color-white);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    transform: translateY(10px);
    transition: transform 0.3s ease;
} */

/* .gallery li:hover img {
    transform: scale(1.05);
} */

/* .gallery li:hover .gallery__overlay {
    opacity: 1;
} */

/* .gallery li:hover .gallery__overlay span {
    transform: translateY(0);
} */


/* ==========================================================================
   15. FACULTY
   ========================================================================== */
.faculty { padding: 60px 0 56px; }
.faculty .section__title { font-size: 32px; }

/* A rail of faculty cards that advances one card at a time. --per-view is
   the only thing the breakpoints change; the card width and the number of
   clones the script makes both follow from it. */
.faculty-carousel {
    --per-view: 4;
    --rail-gap: 18px;
    margin-top: 40px;
}

.faculty-carousel__viewport {
    overflow: hidden;
    /* room for the card shadow, which would otherwise be clipped */
    margin: -8px;
    padding: 8px;
}

.faculty-carousel__track {
    display: flex;
    gap: var(--rail-gap);
    transition: transform .5s ease;
    will-change: transform;
}

.faculty-carousel__track > .faculty-card {
    flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--rail-gap)) / var(--per-view));
}

.faculty-carousel__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 26px;
}

.faculty-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-white);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.faculty-card__media { position: relative; }
/* Square, because every supplied portrait is square -- a wider box would
   crop the tops of their heads. */
.faculty-card__media img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: #e8eef0;
}

/* LinkedIn badge removed from the faculty cards; rules parked here.
   Restore the <a class="faculty-card__linkedin"> markup to use them. */

.faculty-card__body { padding: 21px 25px 20px; }
.faculty-card__name {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.15;
    color: var(--color-text);
}
.faculty-card__role {
    margin-top: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
}
.faculty-card__org {
    margin-top: 4px;
    font-size: 12px;
    color: var(--color-muted);
}

/* ==========================================================================
   16. PARTNERS
   ========================================================================== */
.partners { padding: 48px 0 58px; }
.partners .section__title { font-size: 32px; line-height: 1.22; }

.partners__logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 32px 46px;
    margin-top: 46px;
    list-style: none;
}
.partners__logos li {
    display: flex;
    align-items: center;
    justify-content: center;
}
.partners__logos a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
}
.partners__logos img {
    display: block;
    max-height: 52px;
    max-width: 180px;
    width: auto;
    object-fit: contain;
}
.partner-logo--wide {
    min-width: 70px;
}
.partner-logo--wide img {
    max-height: 74px;
    max-width: 240px;
}

.partners__note {
    margin-top: 42px;
    text-align: center;
    font-size: 18px;
    line-height: 24px;
    color: var(--color-muted);
}


/* ==========================================================================
   17. TESTIMONIALS (carousel)
   ========================================================================== */
.testimonials { padding: 66px 0 62px; }
.testimonials .container { position: relative; }
.testimonials .section__title { margin-top: 6px; }

.testimonial {
    max-width: 764px;
    margin: 32px auto 0;
}

.testimonial__quotemark {
    position: absolute;
    top: 4px;
    right: 30px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 250px;
    line-height: 1;
    font-weight: 700;
    color: #eef2f6;
    user-select: none;
    pointer-events: none;
    z-index: 0;
}

.testimonial__viewport { position: relative; z-index: 1; }

/* Base / no-JS: only the active slide occupies space. */
.testimonial__slide { display: none; }
.testimonial__slide.is-active { display: flex; flex-direction: column; }

/* Enhanced: every slide shares one grid cell, so the block is always as tall
   as the longest quote. Slides cross-fade in place and nothing below the
   carousel ever moves while it auto-advances. */
.testimonial.is-ready .testimonial__viewport { display: grid; }
.testimonial.is-ready .testimonial__slide {
    display: flex;
    flex-direction: column;
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity .45s ease, visibility .45s ease;
}
.testimonial.is-ready .testimonial__slide.is-active {
    opacity: 1;
    visibility: visible;
}

/* Quote grows so the attribution sits on a common baseline across slides. */
.testimonial__slide .testimonial__quote { flex: 1 1 auto; }

.testimonial__quote {
    font-size: 24px;
    line-height: 39px;
    font-style: italic;
    color: var(--color-text);
}

.testimonial__person {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 20px 0 0 40px;
    padding-top: 22px;
    border-top: 1px solid var(--color-border);
}
.testimonial__person img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    background: #e8eef0;
}
.testimonial__person strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
}
.testimonial__person em {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    font-style: normal;
    color: var(--color-muted);
}

.testimonial__controls {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 18px;
}
.carousel-btn {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-white);
    color: var(--color-text);
    transition: border-color .18s ease, background-color .18s ease;
}
.carousel-btn:hover { border-color: var(--color-primary); background: var(--color-mint); }

.carousel-dots { display: flex; align-items: center; gap: 8px; }
.carousel-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #ccd7dc;
    transition: width .22s ease, background-color .22s ease;
}
.carousel-dot.is-active {
    width: 26px;
    background: var(--color-primary);
}


/* ==========================================================================
   18. INVESTMENT / PRICING
   ========================================================================== */
.pricing { padding: 40px 0 42px; }

.price-card {
    position: relative;
    width: 372px;
    max-width: 100%;
    margin: 36px auto 0;
    padding: 36px 34px 28px;
    border-radius: var(--radius-2xl);
    background: var(--color-primary);
    color: var(--color-white);
    box-shadow: var(--shadow-lift);
}

.price-card__badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 17px;
    border-radius: 999px;
    background: var(--color-accent);
    color: var(--color-text);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
}

.price-card__eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-accent);
}
.price-card__amount {
    margin-top: 10px;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.1;
}
.price-card__was {
    margin-top: 6px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.45);
}
.price-card__save {
    margin-top: 6px;
    font-size: 14px;
    color: #8fb9ad;
}
.price-card__save strong {
    font-weight: 600;
    color: var(--color-success);
}

.price-card__features {
    margin-top: 26px;
    display: grid;
}
.price-card__features li {
    font-size: 14px;
    line-height: 32px;
    color: var(--color-white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8a74d' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5V12a9 9 0 1 1-5.3-8.2'/%3E%3Cpath d='m9 11.5 3 3 8.5-8.5'/%3E%3C/svg%3E");
}

.price-card .btn { min-height: 56px; margin-top: 26px; }

/* Small print under the Apply button. */
.price-card__note {
    margin-top: 14px;
    font-size: 12px;
    line-height: 1.45;
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
}


/* ==========================================================================
   19. CERTIFICATION
   ========================================================================== */
.certification { padding: 54px 0 56px; }

.certification__grid {
    display: grid;
    grid-template-columns: 560px minmax(0, 1fr);
    gap: 72px;
    align-items: start;
    margin-top: 56px;
}

/* A pure white card holds the transparent certificate artwork. The page
   section behind it is white too, so a hairline border and a soft shadow
   give the frame its edge -- the same treatment the faculty cards use. */
.certification__media {
    display: block;
    padding: 26px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: #ffffff;
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

/* height:auto keeps the artwork's own proportions instead of cropping it. */
.certification__media img {
    display: block;
    width: 100%;
    height: auto;
}

.certification__details { padding-top: 68px; }

.certification__subtitle {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-accent);
}
.certification__issuer {
    margin-top: 14px;
    font-size: 18px;
    line-height: 25px;
    color: var(--color-text);
}
.certification__subtitle--awarded {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 26px;
    font-size: 18px;
    color: var(--color-text);
}
.icon--check-badge {
    width: 19px;
    height: 19px;
    color: #21a05f;
    stroke-width: 2;
}

.certification__list { margin-top: 8px; }
.certification__list li {
    position: relative;
    padding-left: 27px;
    font-size: 18px;
    line-height: 26px;
    color: var(--color-text);
}
.certification__list li::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 12px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-text);
}


/* ==========================================================================
   20. FAQ
   ========================================================================== */
.faq { padding: 30px 0 24px; }
.faq .section__title { font-size: 32px; }

.accordion--faq {
    max-width: 672px;
    margin: 44px auto 0;
}

.faq-item + .faq-item { border-top: 1px solid rgba(19, 77, 73, 0.13); }

.faq-item__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 26px 0;
    border: 0;
    background: none;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.35;
    text-align: left;
    color: var(--color-text);
}
.faq-item__chevron {
    width: 20px;
    height: 20px;
    flex: none;
    color: var(--color-primary);
    transition: transform .28s ease;
}
.faq-item__trigger[aria-expanded="true"] .faq-item__chevron { transform: rotate(180deg); }

.faq-item__panel {
    overflow: hidden;
    transition: height .3s ease;
}
.faq-item__panel[hidden] { display: none; }
.faq-item__panel-inner {
    padding: 0 44px 26px 0;
    font-size: 15px;
    line-height: 24px;
    color: var(--color-muted);
}


/* ==========================================================================
   21. FINAL CTA / ENROLLMENT
   ========================================================================== */
.cta {
    background: var(--gradient-dark);
    color: var(--color-white);
    padding: 50px 0 56px;
}

.cta__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 481px;
    gap: 60px;
    align-items: center;
}

.cta__title {
    margin-top: 26px;
    font-size: 50px;
    line-height: 58px;
    font-weight: 700;
    letter-spacing: -0.015em;
}
.cta__title em {
    font-style: normal;
    color: var(--color-accent);
}

.cta__lead {
    max-width: 660px;
    margin-top: 26px;
    font-size: 16px;
    line-height: 24px;
    color: var(--surface-dark-text);
}

.cta__points {
    display: grid;
    gap: 10px;
    margin-top: 26px;
}
.cta__points li {
    font-size: 14px;
    line-height: 21px;
    color: var(--color-white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8a74d' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5V12a9 9 0 1 1-5.3-8.2'/%3E%3Cpath d='m9 11.5 3 3 8.5-8.5'/%3E%3C/svg%3E");
}

.cta .hero__actions { margin-top: 34px; }
.cta .lead-card__text { font-size: 14px; line-height: 20px; }


/* ==========================================================================
   22. RESPONSIVE — SMALL DESKTOP / TABLET / MOBILE
   ========================================================================== */

/* --- Small desktop: keep the two-column layouts, scale them down --------- */
@media (min-width: 1024px) and (max-width: 1279px) {

    .hero__grid,
    .cta__grid {
        grid-template-columns: minmax(0, 1fr) 424px;
        gap: 44px;
    }
    .hero__title { font-size: 56px; }
    .cta__title { font-size: 42px; line-height: 50px; }
    .hero__actions .btn { min-width: 244px; }
    .lead-card { padding: 24px 22px 22px; }

    .curriculum__head { gap: 28px; }

    .certification__grid {
        grid-template-columns: minmax(0, 1fr) 396px;
        gap: 48px;
    }
    .certification__details { padding-top: 26px; }
}

/* Roadmap type stays legible as the container narrows */
@container (max-width: 1080px) {
    .journey-stage__weeks { font-size: 1.32cqw; }
    .journey-stage__name  { font-size: 1.50cqw; }
    .journey-stage__num   { font-size: 2.00cqw; }
}

@media (max-width: 1199px) {
    .testimonial__quotemark { display: none; }
}

@media (max-width: 1023px) {

    .container { width: min(1200px, calc(100% - 40px)); }

    .section { padding: 62px 0 66px; }
    .section--mint { padding: 54px 0 58px; }

    /* Navbar */
    .navbar { height: 74px; }
    .navbar__links,
    .navbar__actions { display: none; }
    .navbar { grid-template-columns: 1fr auto; }
    .navbar__toggle { display: flex; }

    /* Hero */
    .hero { padding: 52px 0 58px; }
    .hero__grid,
    .cta__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 44px;
    }
    .hero__title { font-size: 56px; }
    .hero__lead,
    .cta__lead { max-width: none; }
    .hero__actions .btn { min-width: 262px; }
    .lead-card { max-width: 560px; }

    /* Glance */
    .glance__grid { grid-template-columns: repeat(2, 1fr); }
    .glance__item:nth-child(4n) { border-right: 1px solid var(--color-border); }
    .glance__item:nth-child(2n) { border-right: 0; }

    /* Section nav — horizontal scroll */
    .section-nav__list {
        justify-content: flex-start;
        gap: 28px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .section-nav__list::-webkit-scrollbar { display: none; }

    /* Learning journey — vertical roadmap */
    .journey-map { display: none; }
    .journey-stages--vertical {
        display: grid;
        gap: 0;
        max-width: 620px;
        margin: 38px auto 0;
    }
    .journey-stage-row {
        position: relative;
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 22px;
        padding-bottom: 26px;
    }
    .journey-stage-row:last-child { padding-bottom: 0; }
    .journey-stage-row::before {
        content: "";
        position: absolute;
        left: 31px;
        top: 68px;
        bottom: 0;
        width: 3px;
        border-radius: 3px;
        background-image: linear-gradient(var(--color-primary) 40%, transparent 0);
        background-size: 3px 11px;
        background-repeat: repeat-y;
    }
    .journey-stage-row:last-child::before { display: none; }

    .journey-stage-row__disc {
        position: relative;
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: conic-gradient(from 215deg,
                    var(--color-accent) 0 280deg,
                    transparent 280deg 360deg);
    }
    .journey-stage-row__disc::before {
        content: "";
        position: absolute;
        inset: 1.5% 0 -1.5%;
        border: 1px solid rgba(19, 77, 73, 0.6);
        border-radius: 50%;
    }
    .journey-stage-row__num {
        position: absolute;
        inset: 5px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--color-white);
        box-shadow: 2px 4px 9px rgba(19, 77, 73, 0.18);
        font-size: 20px;
        font-weight: 700;
        color: var(--color-primary);
    }
    .journey-stage-row__body { padding-top: 9px; }
    .journey-stage-row__weeks {
        display: block;
        font-size: 13px;
        font-weight: 700;
        color: var(--color-text);
    }
    .journey-stage-row__name {
        display: block;
        margin-top: 3px;
        font-size: 16px;
        line-height: 22px;
        color: var(--color-text);
    }

    /* Curriculum */
    .curriculum__head {
        flex-direction: column;
        gap: 22px;
        text-align: center;
    }
    .curriculum__heading { text-align: center; }
    .curriculum__rule { display: none; }
    .accordion--weeks { margin-top: 42px; }
    .week__panel-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 26px 24px;
    }

    /* Faculty */
    .faculty-carousel { --per-view: 2; }
    .faculty-card__name { font-size: 21px; }

    /* Testimonials */
    .testimonials { padding: 58px 0 64px; }
    .section__title--xl { font-size: 38px; }
    .testimonial__quote { font-size: 21px; line-height: 34px; }
    .testimonial__person { margin-left: 0; }

    /* Certification */
    .certification__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }
    .certification__media {
        width: 100%;
        max-width: 560px;
        margin-inline: auto;
    }
    .certification__details { padding-top: 0; }
}


/* ==========================================================================
   23. RESPONSIVE — MOBILE (max-width: 767px)
   ========================================================================== */
@media (max-width: 767px) {

    .container { width: calc(100% - 32px); }

    .section { padding: 56px 0 60px; }
    .section--mint { padding: 48px 0 54px; }

    /* Typography */
    .section__title { font-size: 27px; }
    .section__title--xl { font-size: 30px; }
    .section__lead { font-size: 16px; line-height: 24px; }
    .partners .section__title,
    .curriculum__heading .section__title,
    .faq .section__title { font-size: 26px; }

    /* Navbar */
    .navbar__brand { gap: 10px; }
    .navbar__logo { height: 36px; }
    .navbar__logo--rgu { height: 38px; }
    .navbar__brand-divider { height: 32px; }

    /* Hero */
    .hero { padding: 40px 0 46px; }
    .hero__title { font-size: 38px; line-height: 1.06; }
    .hero__eyebrow { font-size: 11px; padding: 10px 15px; letter-spacing: 0.1em; }
    .hero__pills { max-width: none; gap: 10px; margin-top: 28px; }
    .pill { flex: 1 1 100%; padding: 10px 14px; }   /* alignment now inherited from the base rule */
    .hero__lead { margin-top: 24px; font-size: 15px; }
    .hero__actions { gap: 12px; margin-top: 28px; }
    .hero__actions .btn { min-width: 0; width: 100%; min-height: 56px; }

    /* Lead card */
    .lead-card { padding: 22px 18px 20px; border-radius: var(--radius-xl); }
    .lead-card__title { font-size: 19px; }
    .lead-card__text { font-size: 15px; line-height: 21px; }
    .field input,
    .field select { height: 50px; }

    /* Glance */
    .glance { padding: 52px 0 56px; }
    .glance__grid { grid-template-columns: 1fr; margin-top: 32px; }
    .glance__item {
        padding: 16px 0;
        border-right: 0 !important;
        border-bottom: 1px solid var(--color-border);
    }
    .glance__item:last-child { border-bottom: 0; }

    /* Section nav */
    .section-nav__list { gap: 22px; height: 54px; padding-inline: 2px; }

    /* Journey */
    .journey-stages--vertical { margin-top: 30px; }
    .journey-stage-row { grid-template-columns: 56px minmax(0, 1fr); gap: 16px; }
    .journey-stage-row::before { left: 27px; top: 60px; }
    .journey-stage-row__disc { width: 56px; height: 56px; }
    .journey-stage-row__num { font-size: 18px; }
    .journey-stage-row__name { font-size: 15px; line-height: 21px; }

    /* Curriculum */
    .accordion--weeks { gap: 8px; }
    .week__trigger {
        flex-wrap: wrap;
        align-items: flex-start;
        min-height: 0;
        padding: 18px 18px;
        column-gap: 12px;
    }
    .week__label { flex: 1 1 auto; font-size: 13px; }
    .week__title { flex: 1 1 100%; order: 3; padding-right: 0; margin-top: 4px; font-size: 15px; }
    .week__chevron { margin-top: 1px; }
    .week__panel-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
        padding: 20px 18px 24px;
    }
    .week__col-text { padding-right: 0; }

    /* Gallery */
    /* .gallery { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 32px; } */
    .experience-list { grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 32px; }
    .experience-card { min-height: 160px; padding: 22px 20px 20px; }
    .experience-card__title { font-size: 17px; padding-top: 16px; }

    /* Faculty */
    .faculty-carousel { --per-view: 1; margin-top: 34px; }
    .faculty-card__body { padding: 18px 20px 18px; }
    .faculty-card__name { font-size: 20px; }

    /* Partners */
    .partners__logos { gap: 24px 30px; margin-top: 32px; }
    .partners__logos img { max-height: 42px; }
    .partners__note { margin-top: 30px; font-size: 15px; line-height: 22px; }
    .partners__note br { display: none; }

    /* Testimonials */
    .testimonials { padding: 50px 0 56px; }
    .testimonial { margin-top: 26px; }
    .testimonial__quote { font-size: 18px; line-height: 30px; }
    .testimonial__person { margin-top: 26px; padding-top: 20px; gap: 13px; }
    .testimonial__person img { width: 48px; height: 48px; }
    .testimonial__controls { gap: 14px; margin-top: 26px; }
    .carousel-dots { gap: 6px; }
    .carousel-dot.is-active { width: 20px; }

    /* Pricing */
    .pricing { padding: 44px 0 52px; }
    .price-card { margin-top: 48px; padding: 32px 22px 26px; }
    .price-card__amount { font-size: 32px; }

    /* Certification */
    .certification { padding: 54px 0 58px; }
    .certification__grid { margin-top: 32px; gap: 28px; }
    .certification__media { padding: 14px; border-radius: var(--radius-lg); }
    .certification__subtitle { font-size: 20px; }
    .certification__issuer,
    .certification__subtitle--awarded,
    .certification__list li { font-size: 16px; line-height: 24px; }
    .certification__list li::before { top: 10px; }

    /* FAQ */
    .faq { padding: 40px 0 46px; }
    .accordion--faq { margin-top: 30px; }
    .faq-item__trigger { padding: 20px 0; font-size: 15px; gap: 16px; }
    .faq-item__panel-inner { padding: 0 30px 20px 0; font-size: 14px; line-height: 22px; }

    /* Final CTA */
    .cta { padding: 46px 0 50px; }
    .cta__title { margin-top: 20px; font-size: 34px; line-height: 1.1; }
    .cta__lead { margin-top: 20px; font-size: 15px; }
    .cta__points { margin-top: 22px; }
    .cta .hero__actions { margin-top: 28px; }
}


/* Very small screens (320px) */
@media (max-width: 359px) {
    .hero__title { font-size: 33px; }
    .cta__title { font-size: 30px; }
    /* .gallery { grid-template-columns: minmax(0, 1fr); } */
    .experience-list { grid-template-columns: minmax(0, 1fr); }
    .navbar__brand { gap: 8px; }
    .navbar__logo { height: 30px; }
    .navbar__logo--rgu { height: 32px; }
}


/* ==========================================================================
   24. HOVER & FOCUS INTERACTIONS
   --------------------------------------------------------------------------
   Three motions, applied consistently:
     raise   — cards lift on a soft shadow
     pan     — images scale gently inside a clipped frame
     offset  — list rows slide right, revealing their marker
   Everything is transform/opacity only so it stays on the compositor,
   and every effect is switched off under prefers-reduced-motion.
   ========================================================================== */

/* ---- raise: Programme at a Glance ---------------------------------------- */
.glance__item {
    border-radius: var(--radius-lg);
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.glance__item:hover {
    transform: translateY(-6px);
    background-color: var(--color-mint);
    box-shadow: var(--shadow-card);
    border-right-color: transparent;
}
.glance__icon {
    transition: transform .25s ease, background-color .25s ease, color .25s ease;
}
.glance__item:hover .glance__icon {
    transform: scale(1.08) rotate(-4deg);
    background-color: var(--color-white);
}

/* ---- raise: hero feature pills ------------------------------------------- */
.pill {
    transition: transform .22s ease, border-color .22s ease, background-color .22s ease;
}
.pill:hover {
    transform: translateY(-4px);
    border-color: var(--color-accent);
    background-color: rgba(255, 255, 255, 0.08);
}

/* ---- raise + pan: faculty cards ------------------------------------------ */
.faculty-card {
    transition: transform .28s ease, box-shadow .28s ease;
}
.faculty-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lift);
}
.faculty-card__media {
    overflow: hidden;               /* clip the pan */
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.faculty-card__media img {
    transition: transform .45s ease;
}
.faculty-card:hover .faculty-card__media img {
    transform: scale(1.06);
}

/* ---- raise: curriculum weeks, FAQ rows, pricing -------------------------- */
.week,
.faq-item {
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.week:hover,
.faq-item:hover {
    transform: translateY(-3px);
    border-color: var(--color-accent);
    box-shadow: var(--shadow-card);
}

.price-card {
    transition: transform .28s ease, box-shadow .28s ease;
}
.price-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lift);
}

/* ---- pan: partner logos --------------------------------------------------- */
.partners__logos img {
    transition: transform .25s ease, filter .25s ease;
}
.partners__logos img:hover {
    transform: translateY(-5px) scale(1.06);
}

/* ---- pan: certification artwork ------------------------------------------- */
.certification__media img {
    transition: transform .45s ease;
}
.certification__media:hover img {
    transform: scale(1.05);
}

/* ---- offset: tick lists slide right on hover ------------------------------ */
.ticklist li,
.price-card__features li,
.cta__points li,
.certification__list li {
    transition: transform .2s ease, color .2s ease;
}
.ticklist li:hover,
.price-card__features li:hover,
.cta__points li:hover,
.certification__list li:hover {
    transform: translateX(6px);
    color: var(--color-text);
}

/* ---- raise: learning-journey stages --------------------------------------- */
.journey-stage__inner {
    transition: transform .24s ease;
}
.journey-stage__inner:hover {
    transform: translateY(-5px);
}
.journey-stage__disc {
    transition: transform .24s ease, box-shadow .24s ease;
}
.journey-stage__inner:hover .journey-stage__disc {
    transform: scale(1.1);
    box-shadow: var(--shadow-card);
}

/* ---- keyboard users get the same affordance ------------------------------- */
.week:focus-within,
.faq-item:focus-within {
    transform: translateY(-3px);
    border-color: var(--color-accent);
}
.faculty-card:focus-within {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lift);
}

/* ---- touch devices: no hover state, so no lift ---------------------------- */
@media (hover: none) {
    .glance__item:hover,
    .pill:hover,
    .faculty-card:hover,
    .week:hover,
    .faq-item:hover,
    .price-card:hover,
    .journey-stage__inner:hover,
    .partners__logos img:hover,
    .ticklist li:hover,
    .price-card__features li:hover,
    .cta__points li:hover,
    .certification__list li:hover {
        transform: none;
    }
}

/* ---- respect reduced motion: keep the colour cue, drop the movement ------- */
@media (prefers-reduced-motion: reduce) {
    .glance__item:hover,
    .glance__item:hover .glance__icon,
    .pill:hover,
    .faculty-card:hover,
    .faculty-card:hover .faculty-card__media img,
    .week:hover,
    .faq-item:hover,
    .price-card:hover,
    .partners__logos img:hover,
    .certification__media:hover img,
    .journey-stage__inner:hover,
    .journey-stage__inner:hover .journey-stage__disc,
    .ticklist li:hover,
    .price-card__features li:hover,
    .cta__points li:hover,
    .certification__list li:hover {
        transform: none;
    }
}

/* ==========================================================================
   24. TOAST + BROCHURE GATE
   ========================================================================== */
.toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 200;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: min(380px, calc(100vw - 32px));
    padding: 15px 16px;
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--color-accent);
    background: var(--color-primary);
    color: var(--color-white);
    box-shadow: 0 16px 38px rgba(14, 59, 56, 0.28);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .24s ease, transform .24s ease;
}
.toast.is-visible { opacity: 1; transform: translateY(0); }
.toast[hidden] { display: none; }

.toast__icon {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--color-accent) no-repeat center / 12px 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23134d49' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 8v5'/%3E%3Cpath d='M12 16.5v.01'/%3E%3C/svg%3E");
}
.toast--success .toast__icon {
    background-color: var(--color-success);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23134d49' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.toast--success { border-left-color: var(--color-success); }

.toast__text {
    flex: 1 1 auto;
    font-size: 14px;
    line-height: 20px;
}

.toast__close {
    flex: none;
    width: 22px;
    height: 22px;
    margin: -2px -4px 0 0;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: none;
    color: rgba(255, 255, 255, 0.65);
    font-size: 20px;
    line-height: 1;
    transition: color .18s ease;
}
.toast__close:hover { color: var(--color-white); }

/* The form the visitor was just sent to. */
.lead-form.is-highlighted .field input,
.lead-form.is-highlighted .field select {
    border-color: rgba(200, 167, 77, 0.85);
}

/* Manual fallback inside the success panel, shown when the brochure tab was
   blocked by a popup blocker. */
.lead-form__brochure {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    padding: 8px 15px;
    border-radius: var(--radius-md);
    background: var(--color-accent);
    color: var(--color-text);
    font-size: 13px;
    font-weight: 600;
    transition: background-color .18s ease;
}
.lead-form__brochure:hover { background: #d5b45a; }
.lead-form__brochure[hidden] { display: none; }

@media (max-width: 767px) {
    .toast {
        right: 16px;
        left: 16px;
        bottom: 16px;
        width: auto;
    }
}