/* Apollos: shared tokens, base, components, nav, footer and the home page.
   Page-specific styles live in /css/<page>.css. */

:root {
  --navy: #14213D;
  --ink: var(--navy);
  --ink-2: #1E2D52;
  --ink-3: #2A3A63;
  --ink-deep: #0E1830;
  --gold: #C7A14A;
  --gold-light: #E2C27A;
  --gold-deep: #75581F;
  --gold-tint: #F7EED9;
  --ivory: #FAF8F3;
  --bg: var(--ivory);
  --white: #FFFFFF;
  --line: #E8DFCB;
  --line-2: #D8C9A7;
  --control-border: #8B7952;
  --muted: #5A6377;
  --muted-2: #636D80;
  --on-dark: rgba(255, 255, 255, 0.78);
  --on-dark-muted: rgba(255, 255, 255, 0.58);
  --glass: rgba(255, 255, 255, 0.07);
  --glass-line: rgba(255, 255, 255, 0.16);
  --green: #2E7D4F;
  --green-tint: #E8F5EC;

  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --r-sm: 10px;
  --r: 14px;
  --r-card: 18px;
  --r-lg: 24px;
  --pill: 999px;

  --shadow-sm: 0 1px 2px rgba(20, 33, 61, 0.04), 0 4px 14px -6px rgba(20, 33, 61, 0.10);
  --shadow: 0 2px 4px rgba(20, 33, 61, 0.04), 0 18px 40px -18px rgba(20, 33, 61, 0.28);
  --shadow-lg: 0 30px 60px -24px rgba(20, 33, 61, 0.45);
  --shadow-gold: 0 10px 24px -10px rgba(199, 161, 74, 0.75);

  --carousel-time: 650ms; /* both home carousels move with this duration and easing */
  --carousel-ease: cubic-bezier(.22, 1, .36, 1);
  --container: 1200px;
  --gutter: 24px;
  --nav-h: 76px;
  --section: 96px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 500; letter-spacing: -0.015em; line-height: 1.1; font-optical-sizing: auto; }
h1 em, h2 em, h3 em, .accent { font-style: italic; color: var(--gold-deep); font-weight: 500; }
.on-dark h1 em, .on-dark h2 em, .on-dark .accent { color: var(--gold-light); }

:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 3px; border-radius: 6px; }
.on-dark :focus-visible, .site-nav--dark :focus-visible, .site-footer :focus-visible { outline-color: var(--gold-light); }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--gold); color: var(--ink); padding: 10px 16px; border-radius: var(--pill); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* Local homepage comparison links sit above the site's own navigation. */
.home-review { background: var(--gold-tint); border-bottom: 1px solid var(--line-2); }
.home-review__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; padding-block: 8px; }
.home-review__label { color: var(--gold-deep); font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.home-review__options { display: flex; flex-wrap: wrap; gap: 4px; }
.home-review__options a { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 10px; border-radius: 6px; font-size: 13px; font-weight: 800; text-decoration: none; }
.home-review__options a:hover { text-decoration: underline; }
.home-review__options [aria-current] { background: var(--ink); color: var(--white); }
.home-review ~ .site-nav--dark { top: auto; }

.section { padding: var(--section) 0; }
.section--white { background: var(--white); }
.section--tight { padding: 64px 0; }

/* The small gold uppercase label above a heading, on every page. Its size, weight and gap below are
   variables, so every eyebrow changes together (13px on phones, set further down). */
:root { --eyebrow-size: 14.5px; --eyebrow-weight: 700; --eyebrow-gap: 18px; }
.eyebrow {
  display: inline-block; margin: 0 0 var(--eyebrow-gap);
  font-family: var(--sans); font-size: var(--eyebrow-size); font-weight: var(--eyebrow-weight); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep);
}
.on-dark .eyebrow { color: var(--gold-light); }
.h1 { font-size: clamp(40px, 5.4vw, 66px); line-height: 1.04; }
.h2 { font-size: clamp(30px, 3.4vw, 42px); }
.h3 { font-size: clamp(22px, 2vw, 26px); }
.lead { font-size: 17px; color: var(--muted); max-width: 560px; }
.on-dark { color: #fff; }
.on-dark .lead { color: var(--on-dark); }
.muted { color: var(--muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 26px; border-radius: var(--pill); border: 1.5px solid transparent;
  font-family: var(--sans); font-size: 15px; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--sm { min-height: 42px; padding: 0 20px; font-size: 14px; }
.btn--block { width: 100%; }
.btn--gold { background: var(--gold); color: var(--ink); box-shadow: var(--shadow-gold); }
.btn--gold:hover { background: #D1AC56; }
.btn--ink { background: var(--ink); color: #fff; box-shadow: 0 10px 22px -12px rgba(20, 33, 61, .8); }
.btn--ink:hover { background: var(--ink-2); }
.btn--white { background: #fff; color: var(--ink); }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--outline:hover { background: rgba(20, 33, 61, 0.05); }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.btn--outline-light:hover { border-color: #fff; background: rgba(255, 255, 255, 0.06); }
.btn--glass { background: rgba(255, 255, 255, 0.1); color: #fff; border-color: rgba(255, 255, 255, 0.22); }
.btn--glass:hover { background: rgba(255, 255, 255, 0.16); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.text-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; text-decoration: none; }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Chips, badges, ticks ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--pill);
  font-size: 12px; font-weight: 700; line-height: 1.2; white-space: nowrap;
}
.chip--gold-line { color: var(--gold-light); background: rgba(199, 161, 74, 0.1); border: 1px solid rgba(199, 161, 74, 0.45); letter-spacing: .1em; text-transform: uppercase; font-size: 11.5px; font-weight: 800; padding: 7px 14px; }
/* The hero's label is a chip, not an .eyebrow, but reads as one, so it uses the same variables. Below
   600px it would not fit on one line, so it shows "RPL" instead of "Recognition of Prior Learning". */
.home-hero .chip--gold-line { font-size: var(--eyebrow-size); font-weight: var(--eyebrow-weight); letter-spacing: .14em; }
.chip__short { display: none; }
@media (max-width: 599.98px) { .chip__long { display: none; } .chip__short { display: inline; } }
abbr.chip__short { text-decoration: none; }
.chip--glass { color: #fff; background: rgba(20, 33, 61, 0.55); border: 1px solid rgba(255, 255, 255, 0.22); backdrop-filter: blur(6px); }
.chip--gold-glass { color: var(--gold-light); background: rgba(199, 161, 74, 0.18); border: 1px solid rgba(199, 161, 74, 0.35); }
.chip--gold { color: var(--ink); background: var(--gold); }
.chip--light { color: var(--ink); background: #fff; border: 1px solid var(--line); }
.chip--dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-light); }

.ticks { display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 14px; font-weight: 500; }
.ticks li { display: inline-flex; align-items: center; gap: 8px; }
.ticks .icon { color: var(--gold); flex: none; }
.on-dark .ticks { color: var(--on-dark); }
.ticks--stack { flex-direction: column; gap: 10px; }

/* ---------- Cards ---------- */
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-sm); }
.card--pad { padding: 28px; }
.card--dark { background: linear-gradient(160deg, var(--ink-2) 0%, var(--ink) 70%); color: #fff; border-color: transparent; box-shadow: var(--shadow); }
.card--gold { background: linear-gradient(150deg, #D8B866 0%, var(--gold) 55%, #B98F35 100%); border-color: transparent; color: var(--ink); }

.tile-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; flex: none; }
.tile-icon--gold { background: var(--gold); box-shadow: var(--shadow-gold); }
.tile-icon--ink { background: var(--ink); }
.tile-icon--white { background: #fff; box-shadow: var(--shadow-sm); }
.tile-icon--glass { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); }

.photo { position: relative; overflow: hidden; border-radius: var(--r-lg); background: linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 100%); }
.photo > img { width: 100%; height: 100%; object-fit: cover; }
.photo--shade::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 24, 48, 0) 40%, rgba(14, 24, 48, 0.82) 100%); pointer-events: none; }
.photo__caption { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 1; color: #fff; font-family: var(--serif); font-size: 20px; line-height: 1.2; }

/* Course card (home featured + catalogue) */
.course-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.course-card { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-sm); color: inherit; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
a.course-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.course-card__media { position: relative; aspect-ratio: 16 / 10; background: linear-gradient(135deg, var(--gold-tint), var(--line)); }
.course-card__media img { width: 100%; height: 100%; object-fit: cover; }
.course-card__media--shade::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 33, 61, .05) 30%, rgba(20, 33, 61, .45) 100%); }
.course-card__mark { position: absolute; top: 16px; left: 16px; z-index: 1; }
.course-card__mark .logo-mark { width: 38px; height: 38px; border-radius: 10px; box-shadow: 0 6px 14px -6px rgba(20, 33, 61, .5); }
.course-card__badge { position: absolute; z-index: 1; }
.course-card__badge--bl { left: 16px; bottom: 16px; }
.course-card__badge--tr { right: 16px; top: 16px; }
.course-card__body { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 20px; }
.course-card__eyebrow { margin: 0 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); }
.course-card__title { font-size: 22px; line-height: 1.18; margin-bottom: 10px; }
.course-card__blurb { font-size: 14.5px; color: var(--muted); margin-bottom: 18px; }
.course-card__foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.course-card__price { font-size: 19px; font-weight: 800; }
.course-card__mode { font-size: 13px; color: var(--muted); }

/* FAQ accordion (native details, enhanced in main.js) */
.faq { display: grid; gap: 12px; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; cursor: pointer; list-style: none; font-weight: 700; font-size: 15px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { color: var(--gold); transition: transform .2s ease; flex: none; }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq summary:focus-visible { outline-offset: -3px; border-radius: var(--r); }
.faq__answer { padding: 0 22px 20px; color: var(--muted); font-size: 14.5px; }
.faq__answer p:last-child { margin: 0; }

/* Forms */
.form-grid { display: grid; gap: 16px; }
.form-grid--2 { grid-template-columns: 1fr 1fr; }
.form-grid--3 { grid-template-columns: repeat(3, 1fr); }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label, .field .label { font-size: 13px; font-weight: 700; }
.field .optional { font-weight: 500; color: var(--muted); }
.input {
  width: 100%; min-height: 48px; padding: 12px 14px; background: #fff; border: 1px solid var(--control-border); border-radius: var(--r-sm);
  font-size: 15px; transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder { color: var(--muted-2); }
.input:hover { border-color: var(--gold-deep); }
.input:focus { outline: 2px solid var(--gold-deep); outline-offset: 2px; border-color: var(--gold-deep); }
select.input, .listbox__button { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2314213D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; cursor: pointer; }
textarea.input { min-height: 110px; resize: vertical; }
/* Styled dropdown: main.js swaps a select[data-listbox] for this button and list, because the open
   list of a real select is drawn by the browser (system font, blue highlight) and can't be styled. */
.listbox { position: relative; display: inline-block; }
.listbox__button { display: inline-grid; align-items: center; text-align: left; white-space: nowrap; }
.listbox__button > * { grid-area: 1 / 1; }
.listbox__sizer { visibility: hidden; }
.listbox__button[aria-expanded="true"] { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(199, 161, 74, 0.25); }
.listbox__list { position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; min-width: 100%; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--shadow); font-family: var(--sans); font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--ink); text-align: left; }
.listbox__list--up { top: auto; bottom: calc(100% + 8px); }
.listbox__option { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 12px; border-radius: 8px; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.listbox__option + .listbox__option { margin-top: 2px; }
.listbox__option::after { content: ''; flex: none; width: 14px; height: 14px; }
.listbox__option.is-active { background: rgba(199, 161, 74, 0.2); }
.listbox__option[aria-selected="true"] { background: var(--gold); font-weight: 700; }
.listbox__option[aria-selected="true"].is-active { background: #D1AC56; }
.listbox__option[aria-selected="true"]::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2314213D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.input[aria-invalid="true"] { border-color: #C0392B; box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12); }
.field-error { font-size: 12.5px; color: #B03A2E; font-weight: 600; }
.form-error { padding: 12px 16px; border-radius: var(--r-sm); background: #FDECEA; color: #8E2B21; font-size: 14px; font-weight: 600; }
.form-success { text-align: center; padding: 40px 28px; }
.form-success__icon { display: inline-grid; place-items: center; width: 60px; height: 60px; margin-bottom: 18px; border-radius: 50%; background: var(--gold); color: var(--ink); box-shadow: var(--shadow-gold); }
.form-success h3 { font-size: 28px; margin-bottom: 10px; }
.form-success p { color: var(--muted); max-width: 420px; margin: 0 auto 6px; }
[hidden] { display: none !important; }
.form-consent { margin: 0; text-align: center; font-size: 12px; color: var(--muted); }
.form-consent a { color: var(--ink); font-weight: 700; white-space: nowrap; text-decoration: underline; text-underline-offset: 2px; }
.form-consent a:hover { color: var(--gold-deep); }

/* ---------- "Book a free consult" modal (views/partials/consult-modal.ejs) ---------- */
.consult-modal { width: min(560px, calc(100% - 32px)); max-width: none; max-height: none; padding: 0; border: 0; background: transparent; color: var(--ink); overflow: visible; }
.consult-modal[open] { animation: consult-in .22s ease-out; }
.consult-modal::backdrop { background: rgba(14, 24, 48, .62); backdrop-filter: blur(4px); }
@keyframes consult-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
body:has(.consult-modal[open]) { overflow: hidden; }
.consult-modal__card { position: relative; max-height: calc(100dvh - 32px); overflow-y: auto; padding: 32px; background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.consult-modal__close { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer; }
.consult-modal__close:hover { background: var(--bg); }
.consult-modal__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.consult-modal__head .eyebrow { margin: 0; }
.consult-modal__title { font-size: clamp(28px, 3vw, 36px); margin-bottom: 10px; }
.consult-modal__lead { margin-bottom: 22px; font-size: 15px; color: var(--muted); }
.consult-modal .form-success { padding: 24px 8px 8px; }
.consult-modal .form-success h3 { font-size: 24px; margin-bottom: 18px; }

/* ---------- Nav ---------- */
.site-nav { position: relative; z-index: 30; height: var(--nav-h); }
.site-nav--dark { position: absolute; inset: 0 0 auto; color: #fff; }
.site-nav--light { background: #fff; border-bottom: 1px solid var(--line); }
.site-nav__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.brand__word { font-family: var(--serif); font-size: 25px; font-weight: 600; letter-spacing: -0.01em; }
.site-nav__menu { display: flex; align-items: center; flex: 1; justify-content: space-between; margin-left: 40px; }
.site-nav__links { display: flex; gap: 4px; margin: 0 auto; }
.nav-link { display: block; padding: 9px 15px; border-radius: var(--pill); font-size: 14.5px; font-weight: 600; text-decoration: none; opacity: .92; transition: background-color .15s ease; }
.nav-link:hover { opacity: 1; background: rgba(20, 33, 61, 0.05); }
.site-nav--dark .nav-link:hover { background: rgba(255, 255, 255, 0.08); }
.nav-link.is-active { background: var(--gold-tint); opacity: 1; }
.site-nav--dark .nav-link.is-active { background: rgba(255, 255, 255, 0.12); }
.site-nav__actions { display: flex; gap: 10px; }
.site-nav--light .btn--outline { border-color: var(--line-2); border-width: 1px; }
.nav-toggle { display: none; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: 12px; background: transparent; cursor: pointer; }
.site-nav--dark .nav-toggle { border-color: rgba(255, 255, 255, .25); color: #fff; }
.nav-toggle__close { display: none; }
.nav-open .nav-toggle__open { display: none; }
.nav-open .nav-toggle__close { display: inline; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink-deep); color: var(--on-dark); font-size: 14px; padding: 64px 0 28px; }
.site-footer .brand { color: #fff; margin-bottom: 16px; }
.site-footer .brand__word { font-size: 24px; }
.logo-mark--framed { border-radius: 10px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.site-footer__brand p { max-width: 300px; margin-bottom: 14px; line-height: 1.55; }
.site-footer__heading { font-family: var(--sans); font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-light); margin: 6px 0 18px; }
.site-footer ul { display: grid; gap: 12px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.site-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 13px; color: var(--on-dark-muted); }
.site-footer__bottom p { margin: 0; }
/* Half the bottom row's 13px, but never under 11px */
.site-footer__disclaimer { font-size: max(11px, .5em); }
.site-footer__policies { display: flex !important; gap: 22px; white-space: nowrap; }

/* Acknowledgement of Country: sits directly above the footer on every page */
.acknowledgement { background: var(--ink); color: var(--on-dark); font-family: var(--sans); font-size: 14px; line-height: 1.55; padding: 24px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.acknowledgement__inner { display: flex; align-items: center; gap: 28px; }
.acknowledgement__flags { display: flex; gap: 8px; flex-shrink: 0; }
/* box-shadow, not border: a border would squeeze the 3:2 image inside its fixed box */
.acknowledgement__flags img { width: 42px; height: 28px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .22); }
.acknowledgement p { flex: 1; margin: 0; max-width: 720px; }
.acknowledgement__nrt { display: inline-flex; flex-shrink: 0; margin-left: auto; padding: 5px 9px; background: #fff; border-radius: 8px; }
.acknowledgement__nrt img { width: auto; height: 40px; }

/* ---------- Shared dark hero ---------- */
.hero-dark {
  position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(900px 520px at 85% 10%, rgba(42, 58, 99, .9) 0%, rgba(20, 33, 61, 0) 70%), linear-gradient(180deg, #14213D 0%, #192950 100%);
}
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 33, 61, .97) 0%, rgba(20, 33, 61, .88) 45%, rgba(20, 33, 61, .6) 100%), linear-gradient(0deg, rgba(20, 33, 61, .6), rgba(20, 33, 61, 0) 40%); }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; margin-bottom: 18px; }
.breadcrumb li + li::before { content: '/'; margin-right: 8px; opacity: .5; }
.breadcrumb a { text-decoration: none; opacity: .8; }
.breadcrumb a:hover { opacity: 1; text-decoration: underline; }
.breadcrumb [aria-current] { font-weight: 700; }

/* CTA bands */
.cta-band { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 48px 56px; border-radius: var(--r-lg); box-shadow: var(--shadow); }
.cta-band h2 { font-size: clamp(28px, 3vw, 38px); margin-bottom: 8px; }
.cta-band p { margin: 0; }
.cta-band--gold { background: linear-gradient(120deg, #DCC07A 0%, var(--gold) 45%, #BC9138 100%); box-shadow: 0 24px 50px -24px rgba(169, 133, 47, .7); }
.cta-band--gold p { color: rgba(20, 33, 61, .78); }

/* ---------- Home ---------- */
.home-hero { padding: calc(var(--nav-h) + 72px) 0 96px; }
.home-hero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.home-hero__grid > * { min-width: 0; } /* the carousel track is 14 cards wide; never let it size the column */
.home-hero h1 { margin: 26px 0 24px; } /* 4px more below the label, like the eyebrows' larger gap */
.home-hero .lead { margin-bottom: 30px; }
.home-hero .btn-row { margin-bottom: 26px; }
/* The card slide and the photo crossfade share one duration and easing (--carousel-time and
   --carousel-ease on :root, also used by the row carousels), and main.js starts both in the same
   frame. Only transform and opacity ever animate, so the compositor does all the work. */
.home-hero__media { position: relative; padding-bottom: 120px; }
.home-hero__arch { aspect-ratio: 1 / 0.82; border-radius: 300px 300px 28px 28px; box-shadow: var(--shadow-lg); }
/* One photo per course, stacked. The incoming photo fades in on top of the outgoing one, which is
   held underneath until the fade ends: a true crossfade, with no dip to the background between them. */
.home-hero__arch img { object-position: 50% 30%; opacity: 0; }
.home-hero__arch img.is-leaving { opacity: 1; }
.home-hero__arch img.is-active { z-index: 1; opacity: 1; transition: opacity var(--carousel-time) var(--carousel-ease); }
/* Hero course carousel: every seeded course on the same card. The track is a flex row, so all
   slides stretch to the tallest one and the hero never changes height. public/js/main.js moves the
   track one card at a time; a copy of the first card after the last one makes the loop seamless. */
.hero-carousel { position: absolute; left: 4%; right: -2%; bottom: 0; z-index: 2; }
.hero-carousel__viewport { overflow: hidden; overflow: clip; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.hero-carousel__track { display: flex; gap: 16px; transform: translate3d(0, 0, 0); will-change: transform; }
.hero-carousel__track.is-sliding { transition: transform var(--carousel-time) var(--carousel-ease); }
/* Without JS only the first card shows, and the hidden ones stay out of the tab order. */
.hero-carousel:not(.is-ready) .popular-card + .popular-card { visibility: hidden; }
.hero-carousel__controls { position: absolute; right: 18px; top: -56px; z-index: 3; display: flex; gap: 8px; }
.hero-carousel__arrow {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; cursor: pointer;
  color: #fff; background: rgba(20, 33, 61, .62); border: 1px solid rgba(255, 255, 255, .28); backdrop-filter: blur(6px);
}
.hero-carousel__arrow:hover { background: rgba(20, 33, 61, .8); }
.hero-carousel__arrow--prev .icon { transform: rotate(180deg); }
/* Opaque, with no backdrop blur: a blurred glass card would have to be re-blurred on every frame it moves. */
.popular-card {
  flex: 0 0 100%; min-width: 0; padding: 22px 24px 24px;
  background: linear-gradient(160deg, #24345C 0%, var(--ink) 100%);
  border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--r-lg);
  display: flex; flex-direction: column;
}
.popular-card .btn { margin-top: auto; }
.popular-card__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.popular-card__top .eyebrow { margin: 0; }
.popular-card__head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.popular-card__head .logo-mark { width: 52px; height: 52px; border-radius: 12px; flex: none; }
.popular-card__head h3 { font-size: 22px; }
.popular-card__head p { margin: 3px 0 0; font-size: 13.5px; color: var(--on-dark); }
.stat-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.stat-tile { padding: 12px 14px; border-radius: var(--r); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.stat-tile span { display: block; font-size: 11.5px; color: var(--on-dark-muted); margin-bottom: 2px; }
.stat-tile strong { display: block; font-size: 18px; font-weight: 800; line-height: 1.2; }

/* Paused by default: main.js adds .is-playing only while the strip is on screen and the visitor has not
   pressed the pause button (WCAG 2.2.2). Without JS it stays a still row of logos. */
.sponsor-marquee { background: var(--white); border-bottom: 1px solid var(--line); }
.sponsor-marquee .container { position: relative; }
.sponsor-marquee__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.sponsor-marquee__track {
  display: flex; width: max-content; will-change: transform;
  animation: sponsor-marquee 56s linear infinite;
  animation-play-state: paused;
}
.sponsor-marquee.is-playing .sponsor-marquee__track { animation-play-state: running; }
.sponsor-marquee__toggle {
  position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); z-index: 1;
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; cursor: pointer;
  color: var(--ink); background: var(--white); border: 1.5px solid var(--line-2);
  transition: color .2s ease, border-color .2s ease;
}
.sponsor-marquee__toggle[hidden] { display: none; }
.sponsor-marquee__toggle:hover, .sponsor-marquee__toggle:focus-visible { color: var(--gold-deep); border-color: var(--gold); }
.sponsor-marquee__toggle:focus-visible { border-radius: 50%; }
.sponsor-marquee__icon-play, .sponsor-marquee.is-stopped .sponsor-marquee__icon-pause { display: none; }
.sponsor-marquee.is-stopped .sponsor-marquee__icon-play { display: block; }
/* No track gap: each equal half owns its trailing space. -50% is exactly one half,
   including the seam gap, so the next frame is visually identical on every loop. */
.sponsor-marquee__group { display: flex; flex: none; gap: 64px; padding-right: 64px; }
.sponsor-marquee__logo { display: flex; align-items: center; justify-content: center; width: 160px; height: 104px; flex: none; }
.sponsor-marquee__logo img { width: 100%; height: 48px; object-fit: contain; opacity: .82; }
@keyframes sponsor-marquee { to { transform: translate3d(-50%, 0, 0); } }
@media (max-width: 640px) {
  .sponsor-marquee__group { gap: 40px; padding-right: 40px; }
  .sponsor-marquee__logo { width: 128px; height: 88px; }
  .sponsor-marquee__logo img { height: 40px; }
  .sponsor-marquee__track { animation-duration: 44s; }
}
@media (prefers-reduced-motion: reduce) {
  .sponsor-marquee__track { animation: none; transform: none; will-change: auto; width: 100%; }
  .sponsor-marquee__viewport { overflow-x: auto; }
  .sponsor-marquee__toggle { display: none; } /* nothing moves, so nothing to pause */
  .sponsor-marquee__group { gap: 40px; padding: 0 24px; margin: auto; }
  .sponsor-marquee__group + .sponsor-marquee__group,
  .sponsor-marquee__logo[data-repeat] { display: none; }
}

.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 40px; }
.section-head p { margin: 12px 0 0; }
/* Row carousel: the home page's "Featured courses" and "What our clients say". Without JS (.is-ready
   not set) the row simply scrolls sideways. With JS, main.js moves the track one card at a time with a
   transform (same timing as the hero carousel) and keeps a full copy of the cards on each side, so it
   loops in both directions. --row-per is how many cards show at once; main.js sets --row-arrow-y to the
   height of the part the arrows centre on (data-arrow-anchor, e.g. the photos; else the whole card). */
.carousel-row { --row-gap: 24px; --row-per: 3; position: relative; }
.carousel-row__viewport { overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 12px 32px; margin: -8px -12px -32px; } /* padding leaves room for the cards' shadows */
.carousel-row__track { display: flex; gap: var(--row-gap); margin: 0; padding: 0; list-style: none; }
.carousel-row__slide { flex: 0 0 calc((100% - (var(--row-per) - 1) * var(--row-gap)) / var(--row-per)); min-width: 0; display: flex; scroll-snap-align: start; }
.carousel-row__slide > * { width: 100%; }
.carousel-row.is-ready { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; column-gap: 20px; }
.carousel-row.is-ready .carousel-row__viewport { grid-area: 1 / 2; overflow: hidden; overflow: clip; touch-action: pan-y; }
.carousel-row.is-ready .carousel-row__track { transform: translate3d(0, 0, 0); will-change: transform; }
.carousel-row__track.is-sliding { transition: transform var(--carousel-time) var(--carousel-ease); }
.carousel-row__arrow {
  grid-area: 1 / 1; align-self: start; margin-top: calc(var(--row-arrow-y, 220px) / 2 - 24px);
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 50%; cursor: pointer;
  color: var(--ink); background: transparent; border: 1.5px solid var(--ink); opacity: .35;
  transition: opacity .2s ease, transform .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.carousel-row__arrow:last-child { grid-column: 3; }
.carousel-row__arrow[hidden] { display: none; }
.carousel-row__arrow:hover, .carousel-row__arrow:focus-visible {
  opacity: 1; color: var(--gold); border-color: var(--gold); transform: scale(1.06);
  box-shadow: 0 0 0 6px rgba(199, 161, 74, .12), 0 10px 26px -8px rgba(199, 161, 74, .6);
}
.carousel-row__arrow:focus-visible { outline: 3px solid var(--gold); outline-offset: 5px; border-radius: 50%; }
.carousel-row__arrow:active { transform: scale(1); }
/* Wide screens have room beside the container: the arrows sit out there and the row keeps its full width. */
@media (min-width: 1380px) { .carousel-row.is-ready { margin-inline: -68px; } }

.how { display: grid; grid-template-columns: 1fr 1.05fr; gap: 72px; align-items: center; }
.how__photo { aspect-ratio: 1.08 / 1; }
.how__photo img { object-position: 40% center; }
.how__photo .photo__caption { font-size: 24px; max-width: 280px; }
.steps { position: relative; display: grid; gap: 30px; margin-top: 32px; }
.steps::before { content: ''; position: absolute; left: 21px; top: 30px; bottom: 30px; width: 2px; background: linear-gradient(var(--ink), var(--gold)); opacity: .35; }
.step { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 20px; }
/* All three circles are ink at rest. main.js moves .is-active from one step to the next every 2s while
   the section is on screen: a gold layer (with a soft glow) fades in over the ink one while the
   previous step's fades out over the same 400ms, so there is always one circle on its way to gold.
   The gold layer animates opacity only; the number's colour crossfades with it. */
.step__num { position: relative; isolation: isolate; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: #fff; font-family: var(--serif); font-size: 18px; box-shadow: 0 0 0 6px var(--bg); transition: color .4s ease; }
.step__num::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--gold); box-shadow: 0 0 18px 2px rgba(199, 161, 74, .38); opacity: 0; transition: opacity .4s ease; }
.step.is-active .step__num { color: var(--ink); }
.step.is-active .step__num::before { opacity: 1; }
.step h3 { font-family: var(--sans); font-size: 18px; font-weight: 700; letter-spacing: 0; margin: 9px 0 6px; }
.step p { margin: 0; color: var(--muted); font-size: 14.5px; }

.rpl-band { position: relative; overflow: hidden; padding: 56px; border-radius: 28px; box-shadow: var(--shadow-lg); }
.rpl-band .hero-bg::after { background: linear-gradient(90deg, rgba(20, 33, 61, .98) 0%, rgba(20, 33, 61, .9) 42%, rgba(20, 33, 61, .55) 100%); }
.rpl-band__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.rpl-band__label { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.rpl-band__label .eyebrow { margin: 0; }
.rpl-band h2 { margin-bottom: 20px; }
.rpl-band p { color: var(--on-dark); max-width: 470px; margin-bottom: 28px; }
/* Fast-track stats. The tiles keep the old price tiles' glass look, minus the backdrop blur, which
   would be recomputed on every frame of the rise. main.js (when motion is allowed) marks the tiles
   .is-waiting, then on scroll-in lets each rise and fade in while its number counts up (.is-counting);
   the gold dot appears when the count lands. Digits are fixed-width and main.js pins the number's
   width at the final value, so nothing beside it moves while the digits change. */
.proof-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.proof-tile {
  padding: 20px 22px; border-radius: var(--r-card); background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .18);
}
/* The rise only has a transition once it starts, so hiding the tiles on page load is instant. */
.proof-tile.is-waiting { opacity: 0; transform: translate3d(0, 24px, 0); }
.proof-tile.is-counting { transition: opacity .6s var(--carousel-ease), transform .6s var(--carousel-ease); }
.proof-tile p { margin: 0; max-width: none; }
.proof-tile__num { position: relative; display: inline-block; padding-right: 16px; font-family: var(--serif); font-size: 40px; line-height: 1.1; font-weight: 500; color: #fff; font-variant-numeric: tabular-nums lining-nums; }
/* Fraunces has no tabular figures (a 1 is far narrower than a 0), so each digit sits in a fixed cell:
   the same markup comes from the server and from main.js on every frame of the count. */
.proof-tile__value { display: inline-block; white-space: nowrap; }
.proof-tile__value .digit { display: inline-block; width: .62em; text-align: center; }
.proof-tile__dot { position: absolute; top: 6px; right: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(199, 161, 74, .18), 0 0 10px 1px rgba(199, 161, 74, .65); transition: opacity .4s ease; }
.proof-tile.is-waiting .proof-tile__dot, .proof-tile.is-counting .proof-tile__dot { opacity: 0; }
.rpl-band .proof-tile__label { margin: 6px 0 6px; font-size: 13.5px; line-height: 1.4; color: var(--on-dark); }
.rpl-band .proof-tile__note { font-size: 13px; font-weight: 700; color: var(--gold-light); }

.why { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: start; }
.why__intro h2 { margin-bottom: 20px; }
.why__intro .lead { margin-bottom: 20px; }
.why__night { margin-top: 32px; aspect-ratio: 1.6 / 1; }
.why__night img, .why__night video { object-position: center 35%; }
.photo > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.night-bar { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 1; display: flex; justify-content: space-between; gap: 12px; padding: 14px 18px; border-radius: var(--r); background: rgba(20, 33, 61, .7); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(8px); color: #fff; font-size: 14px; font-weight: 700; }
.night-bar span:last-child { color: var(--gold-light); font-size: 13px; }
.features { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.feature { padding: 26px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-card); }
.feature .icon { color: var(--gold); margin-bottom: 16px; }
.feature h3 { font-family: var(--sans); font-size: 17px; font-weight: 700; letter-spacing: 0; margin-bottom: 8px; }
.feature p { margin: 0; font-size: 14px; color: var(--muted); }

/* Client reviews (in a row carousel). The cards in a row stretch to the tallest; a quote too long for
   its card is clamped to 8 lines (none of the current ones are, at any width). */
#stories-title { margin-bottom: 36px; }
.review-card { display: flex; flex-direction: column; padding: 28px; }
.review-card__mark { font-family: var(--serif); font-size: 44px; line-height: .8; color: var(--gold); height: 28px; }
.review-card__quote { margin: 18px 0 22px; font-size: 16px; line-height: 1.6; }
.review-card__quote p { margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; line-clamp: 8; overflow: hidden; }
.review-card__by { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); }
.review-card__by > * { display: block; }
.review-card__by strong { font-size: 15px; }
.review-card__by span { margin-top: 2px; font-size: 13px; color: var(--muted); }
.review-card__by .review-card__course { margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--gold-deep); }
.reviews__note { margin: 28px 0 0; font-size: 13px; color: var(--muted); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .carousel-row { --row-per: 2; }
  .site-nav__menu { margin-left: 20px; }
  .nav-link { padding: 9px 11px; }
}

@media (max-width: 960px) {
  :root { --section: 72px; --nav-h: 68px; }
  .nav-toggle { display: grid; }
  .site-nav__menu {
    position: absolute; top: calc(var(--nav-h) - 4px); left: var(--gutter); right: var(--gutter); margin: 0;
    display: none; flex-direction: column; align-items: stretch; gap: 16px; padding: 16px;
    background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-lg);
  }
  .site-nav--dark .site-nav__menu { background: var(--ink-2); color: #fff; border-color: rgba(255, 255, 255, .14); }
  .nav-open .site-nav__menu { display: flex; }
  .site-nav__links { flex-direction: column; margin: 0; }
  .nav-link { padding: 12px 14px; font-size: 16px; border-radius: 12px; }
  .site-nav__actions { flex-direction: column; }
  .site-nav__actions .btn { min-height: 48px; }

  .home-hero__grid, .how, .why, .rpl-band__grid { grid-template-columns: 1fr; gap: 40px; }
  .home-hero { padding-bottom: 72px; }
  .course-grid { grid-template-columns: 1fr 1fr; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
  .cta-band { flex-direction: column; align-items: flex-start; padding: 40px 32px; }
}

@media (max-width: 640px) {
  :root { --gutter: 16px; --section: 60px; }
  :root { --eyebrow-size: 13px; }
  body { font-size: 15.5px; }
  .course-grid, .features, .proof-tiles { grid-template-columns: 1fr; }
  .carousel-row { --row-per: 1; --row-gap: 16px; }
  .carousel-row.is-ready { display: block; } /* no arrows on phones: swipe instead */
  .carousel-row__arrow { display: none; }
  .form-grid--2, .form-grid--3 { grid-template-columns: 1fr; }
  .section-head { flex-direction: column; align-items: flex-start; }
  .home-hero { padding-top: calc(var(--nav-h) + 40px); }
  .home-hero__media { padding-bottom: 0; }
  .home-hero__arch { border-radius: 200px 200px 24px 24px; }
  .hero-carousel { position: relative; left: auto; right: auto; margin-top: -60px; margin-inline: 8px; }
  .hero-carousel__controls { right: 12px; top: -52px; }
  .popular-card { padding: 18px; }
  .consult-modal__card { padding: 26px 20px 22px; }
  .popular-card__top { flex-wrap: wrap; }
  .stat-tiles { gap: 8px; }
  .stat-tile { padding: 10px; }
  .stat-tile strong { font-size: 16px; }
  .rpl-band { padding: 32px 22px; border-radius: 22px; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .acknowledgement__inner { flex-direction: column; gap: 16px; text-align: center; }
  .acknowledgement__nrt { margin-left: 0; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
  .cta-band { padding: 32px 22px; }
  .btn-row .btn { flex: 1 1 auto; }
}

/* ---------- Scroll reveal ---------- */
/* [data-reveal] fades in and rises 16px once its top passes ~85% of the way down the screen;
   [data-reveal-stagger] does the same for its direct children, --reveal-step apart. Nothing here hides
   anything by itself: main.js adds .is-waiting only to elements still below the screen when the page
   loads, so whatever is already on screen, and everything without JS or with reduced motion, simply
   shows. .is-in carries the transition and is taken off again when it ends, so an element's own
   transitions (a card's hover lift) are untouched afterwards. Only opacity and transform change, so
   nothing around the element moves. The timing and easing match the fast-track tiles. */
:root { --reveal-time: 600ms; --reveal-ease: var(--carousel-ease); --reveal-step: 90ms; }
[data-reveal].is-waiting, [data-reveal-stagger] > .is-waiting { opacity: 0; transform: translate3d(0, 16px, 0); }
[data-reveal].is-in, [data-reveal-stagger] > .is-in {
  opacity: 1; transform: none;
  transition: opacity var(--reveal-time) var(--reveal-ease) var(--reveal-delay, 0ms), transform var(--reveal-time) var(--reveal-ease) var(--reveal-delay, 0ms);
}

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

/* Utilities (no inline styles: the CSP blocks them) */
.pt-0 { padding-top: 0 !important; }
.rpl-band { background: var(--ink); }
figure { margin: 0; }
.course-card__media { overflow: hidden; }
.course-card__media img { position: absolute; inset: 0; }
.photo > img { position: absolute; inset: 0; }
ol.breadcrumb, ol.steps, ol.process, ol.next-list { list-style: none; margin: 0; padding: 0; }
/* Gold badge over photos: ink glass so it stays legible on light images */
.course-card__badge.chip--gold-glass { background: rgba(20, 33, 61, .62); border-color: rgba(226, 194, 122, .5); color: var(--gold-light); backdrop-filter: blur(6px); }