/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 12px 24px; border-radius: var(--radius-input); font-weight: 600; font-size: var(--fs-body);
  border: 1px solid transparent; transition: transform var(--duration-standard) var(--ease-standard),
  box-shadow var(--duration-standard) var(--ease-standard), background var(--duration-standard) var(--ease-standard);
  text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--color-navy); color: #fff; }
.btn-primary:hover { background: var(--color-navy-deep); box-shadow: var(--shadow-card-hover); }
.btn-secondary { background: transparent; color: var(--color-navy); border-color: var(--color-navy); }
.btn-secondary:hover { background: var(--color-navy); color: #fff; }
.btn-ghost-inverse { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }
.btn-ghost-inverse:hover { background: rgba(255,255,255,0.12); }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 16px; font-size: var(--fs-small); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ---------- Header / Navigation ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100; background: rgba(246,237,231,0.92);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-border);
}
.site-header__bar { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) 0; }
.brand { display: flex; align-items: center; gap: var(--space-2); }
.brand__logo { height: 40px; width: auto; display: block; }
.brand__mark { width: 32px; height: 32px; flex-shrink: 0; }

.nav-primary { display: flex; align-items: center; gap: var(--space-6); }
.nav-primary__list { display: flex; gap: var(--space-5); align-items: center; }
.nav-primary__list > li { position: relative; margin-right: var(--space-5); }
.nav-primary__list > li:last-child { margin-right: 0; }
.nav-primary__link { font-weight: 500; color: var(--color-ink); padding: var(--space-2) 0; }
.nav-primary__link[aria-current="page"] { color: var(--color-gold); }

.nav-dropdown { display: none; position: absolute; top: 100%; left: 0; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  min-width: 240px; padding: var(--space-3); margin-top: var(--space-2); }
.nav-item--has-dropdown:hover .nav-dropdown,
.nav-item--has-dropdown:focus-within .nav-dropdown { display: block; }
.nav-dropdown__link { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-input); color: var(--color-ink); }
.nav-dropdown__link:hover { background: var(--color-cream); text-decoration: none; }

.header-cta { display: flex; align-items: center; gap: var(--space-4); }
.nav-toggle { display: none; background: none; border: 1px solid var(--color-border); border-radius: var(--radius-input); padding: 8px 10px; }
.nav-toggle__bar { display: block; width: 20px; height: 2px; background: var(--color-ink); margin: 4px 0; transition: transform var(--duration-standard); }

.mobile-nav { display: none; position: fixed; inset: 0; z-index: 150; background: var(--color-surface); overflow-y: auto; }
.mobile-nav.is-open { display: block; }
.mobile-nav__header { display: flex; justify-content: space-between; align-items: center; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); }
.mobile-nav__list > li { border-bottom: 1px solid var(--color-border); }
.mobile-nav__link { display: flex; justify-content: space-between; padding: var(--space-4) var(--space-5); font-weight: 500; color: var(--color-ink); font-size: 1.1rem; }
.mobile-nav__sublist { background: var(--color-cream); display: none; }
.mobile-nav__sublist.is-open { display: block; }
.mobile-nav__sublist a { display: block; padding: var(--space-3) var(--space-5) var(--space-3) var(--space-7); color: var(--color-muted); }
.mobile-nav__cta { padding: var(--space-5); }

/* ---------- Hero ---------- */
.hero { padding: var(--space-8) 0; background: var(--color-navy); color: #fff; overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-8); align-items: center; }
.hero h1 { color: #fff; }
.hero__lede { font-size: 1.15rem; color: rgba(255,255,255,0.82); max-width: 46ch; }
.hero__ctas { display: flex; gap: var(--space-4); margin: var(--space-6) 0; flex-wrap: wrap; }
.hero__trust { display: flex; gap: var(--space-6); flex-wrap: wrap; margin-top: var(--space-6); border-top: 1px solid rgba(255,255,255,0.15); padding-top: var(--space-5); }
.hero__trust-item strong { display: block; font-family: var(--font-mono); font-size: 1.5rem; color: var(--color-gold); }
.hero__trust-item span { font-size: var(--fs-small); color: rgba(255,255,255,0.7); }

.route-map { width: 100%; height: auto; }
.route-map .route-line { fill: none; stroke: var(--color-gold); stroke-width: 1.5; stroke-dasharray: 6 6; opacity: 0.85; }
.route-map .route-line-draw { stroke-dasharray: 500; stroke-dashoffset: 500; animation: draw-route 2.2s var(--ease-standard) forwards; }
.route-map .pin { fill: var(--color-gold); }
.route-map .pin--origin { fill: var(--color-gold); }
.route-map text { font-family: var(--font-mono); font-size: 10px; fill: rgba(255,255,255,0.85); }
@keyframes draw-route { to { stroke-dashoffset: 0; } }

/* ---------- Boarding-pass card (signature component) ---------- */
.pass-card {
  display: flex; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card);
  transition: transform var(--duration-standard) var(--ease-standard), box-shadow var(--duration-standard) var(--ease-standard);
  text-decoration: none; color: inherit; height: 100%;
}
.pass-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); text-decoration: none; }
.pass-card__stub {
  flex: 0 0 76px; background: var(--color-navy); color: #fff; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--space-2); position: relative;
  border-right: 2px dashed rgba(255,255,255,0.35);
}
.pass-card__stub::before, .pass-card__stub::after {
  content: ""; position: absolute; width: 14px; height: 14px; background: var(--color-cream);
  border-radius: 50%; right: -7px;
}
.pass-card__stub::before { top: -7px; }
.pass-card__stub::after { bottom: -7px; }
.pass-card__code { font-family: var(--font-mono); font-weight: 700; writing-mode: vertical-rl; letter-spacing: 0.08em; font-size: 0.85rem; }
.pass-card__body { padding: var(--space-5); flex: 1; display: flex; flex-direction: column; }
.pass-card__title { font-family: var(--font-display); font-size: 1.15rem; color: var(--color-navy); margin-bottom: var(--space-2); }
.pass-card__meta { display: flex; gap: var(--space-4); flex-wrap: wrap; font-size: var(--fs-small); color: var(--color-muted); margin-bottom: var(--space-3); }
.pass-card__cta { margin-top: auto; font-weight: 600; color: var(--color-gold); font-size: var(--fs-small); }

/* ---------- Generic cards ---------- */
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card);
  padding: var(--space-5); box-shadow: var(--shadow-card); height: 100%; }
.card__icon { width: 40px; height: 40px; color: var(--color-gold); margin-bottom: var(--space-4); }
.card h3 { margin-bottom: var(--space-2); }
.card p { color: var(--color-muted); margin-bottom: var(--space-3); }

.grid { display: grid; gap: var(--space-5); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

/* ---------- Stats ---------- */
.stats { display: flex; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.stat { text-align: center; flex: 1; min-width: 140px; }
.stat strong { display: block; font-family: var(--font-mono); font-size: 2rem; color: var(--color-navy); }
.stat span { color: var(--color-muted); font-size: var(--fs-small); }

/* ---------- Timeline (application journey) ---------- */
.timeline { position: relative; }
.timeline__track { display: flex; overflow-x: auto; gap: var(--space-5); padding-bottom: var(--space-4); scroll-snap-type: x proximity; }
.timeline__step { flex: 0 0 220px; scroll-snap-align: start; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); padding: var(--space-5); position: relative; }
.timeline__index { font-family: var(--font-mono); color: var(--color-gold); font-weight: 700; font-size: var(--fs-small); }
.timeline__step h3 { font-size: 1rem; margin: var(--space-2) 0; }
.timeline__step p { font-size: var(--fs-small); color: var(--color-muted); margin: 0; }

/* ---------- Discovery / filters ---------- */
.discovery { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card);
  padding: var(--space-6); box-shadow: var(--shadow-card); }
.discovery__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); align-items: end; }
.form-field { display: flex; flex-direction: column; gap: var(--space-2); }
.form-field label { font-size: var(--fs-small); font-weight: 600; color: var(--color-ink); }
.form-field select, .form-field input {
  padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-input);
  background: #fff; color: var(--color-ink);
}
.form-field select:focus, .form-field input:focus { border-color: var(--color-gold); }
.discovery__results { margin-top: var(--space-5); font-size: var(--fs-small); color: var(--color-muted); min-height: 24px; }

/* ---------- FAQ accordion ---------- */
.accordion__item { border-bottom: 1px solid var(--color-border); }
.accordion__trigger {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  background: none; border: none; padding: var(--space-5) 0; text-align: left; font-weight: 600; font-size: 1.05rem; color: var(--color-ink);
}
.accordion__icon { flex-shrink: 0; transition: transform var(--duration-standard) var(--ease-standard); }
.accordion__trigger[aria-expanded="true"] .accordion__icon { transform: rotate(45deg); }
.accordion__panel { max-height: 0; overflow: hidden; transition: max-height var(--duration-standard) var(--ease-standard); }
.accordion__panel[data-open="true"] { max-height: 500px; }
.accordion__panel-inner { padding-bottom: var(--space-5); color: var(--color-muted); }

/* ---------- Testimonials ---------- */
.testimonial { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card);
  padding: var(--space-6); box-shadow: var(--shadow-card); }
.testimonial__quote { font-family: var(--font-display); font-size: 1.15rem; color: var(--color-navy); margin-bottom: var(--space-4); }
.testimonial__person { display: flex; align-items: center; gap: var(--space-3); }
.testimonial__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--color-gold-light); flex-shrink: 0; }
.testimonial__name { font-weight: 600; }
.testimonial__meta { font-size: var(--fs-small); color: var(--color-muted); }

/* ---------- Multi-step form ---------- */
.stepper { display: flex; gap: var(--space-2); margin-bottom: var(--space-6); font-family: var(--font-mono); font-size: var(--fs-small); }
.stepper__step { flex: 1; text-align: center; padding-bottom: var(--space-2); border-bottom: 3px solid var(--color-border); color: var(--color-muted); }
.stepper__step.is-active { border-color: var(--color-gold); color: var(--color-ink); font-weight: 700; }
.stepper__step.is-done { border-color: var(--color-gold); }
.form-step { display: none; }
.form-step.is-active { display: block; animation: fade-in var(--duration-standard) var(--ease-standard); }
@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.option-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.option-tile { position: relative; border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-5); background: #fff;
  text-align: center; cursor: pointer; display: block; }
.option-tile:hover { border-color: var(--color-gold); }
.option-tile.is-selected { border-color: var(--color-gold); background: #EAF6F5; }
.option-tile input { position: absolute; opacity: 0; pointer-events: none; }
.form-actions { display: flex; justify-content: space-between; margin-top: var(--space-6); }
.field-error { color: var(--color-error); font-size: var(--fs-small); margin-top: var(--space-2); display: none; }
.field-error.is-visible { display: block; }
.form-success { text-align: center; padding: var(--space-8) 0; }

/* ---------- Toast ---------- */
.toast { position: fixed; bottom: var(--space-5); right: var(--space-5); background: var(--color-navy); color: #fff;
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-card); box-shadow: var(--shadow-card-hover);
  transform: translateY(20px); opacity: 0; transition: all var(--duration-standard) var(--ease-standard); z-index: 300; }
.toast.is-visible { transform: translateY(0); opacity: 1; }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { font-size: var(--fs-small); color: var(--color-muted); padding: var(--space-4) 0; }
.breadcrumbs a { color: var(--color-muted); }
.breadcrumbs__sep { margin: 0 var(--space-2); }

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 120; background: #fff;
  border-top: 1px solid var(--color-border); padding: var(--space-3) var(--space-4); box-shadow: 0 -4px 16px rgba(5,25,46,0.08); }

/* ---------- Back to top ---------- */
.back-to-top { position: fixed; bottom: var(--space-6); right: var(--space-6); width: 44px; height: 44px; border-radius: 50%;
  background: var(--color-navy); color: #fff; border: none; display: none; align-items: center; justify-content: center;
  box-shadow: var(--shadow-card-hover); z-index: 110; }
.back-to-top.is-visible { display: flex; }

/* ---------- Cookie banner ---------- */
.cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background: var(--color-navy); color: #fff; z-index: 200;
  padding: var(--space-5); display: none; }
.cookie-banner.is-visible { display: block; }
.cookie-banner__row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.cookie-banner p { margin: 0; max-width: 60ch; font-size: var(--fs-small); color: rgba(255,255,255,0.85); }
.cookie-banner__actions { display: flex; gap: var(--space-3); flex-shrink: 0; }

/* ---------- Footer ---------- */
/* ---------- Footer (current) is defined further below under "NZ MOCKUP REBUILD" ---------- */

/* =========================================================
   NZ MOCKUP REBUILD — components matched to the approved mockup
   ========================================================= */

/* Header CTA button (outlined gold, on cream bg) */
.btn-outline-gold { background: transparent; color: var(--color-gold); border: 1px solid var(--color-gold); }
.btn-outline-gold:hover { background: var(--color-gold); color: #fff; text-decoration: none; }
.btn-gold-solid { background: var(--color-gold); color: #fff; border: 1px solid var(--color-gold); }
.btn-gold-solid:hover { background: #a3711f; text-decoration: none; }

/* Full-bleed navy announcement strip */
.nav-banner { background: var(--color-navy); color: #fff; text-align: center; padding: var(--space-4) 0; }
.nav-banner p { margin: 0; font-family: var(--font-display); font-size: 1.05rem; }

/* Hero (split layout, photo right) */
.hero-split { background: var(--color-cream); padding: var(--space-8) 0; }
.hero-split__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--space-8); align-items: center; }
.hero-split h1 { color: var(--color-navy-deep); }
.hero-split__lede { color: var(--color-muted); font-size: 1.05rem; max-width: 42ch; }
.hero-split__phone { display: flex; align-items: center; gap: var(--space-2); color: var(--color-navy-deep); margin-top: var(--space-5); }
.hero-split__phone a { color: var(--color-navy-deep); font-weight: 700; }
.hero-split__media { position: relative; border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 4/3; background: linear-gradient(160deg, #cfe3ef 0%, #e8dcc8 55%, #cbb98f 100%); }
.hero-split__media img, .hero-split__media svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-split__media-caption { position: absolute; bottom: var(--space-3); right: var(--space-3); font-size: 0.7rem; color: rgba(255,255,255,0.85); background: rgba(5,25,46,0.55); padding: 3px 8px; border-radius: var(--radius-pill); }

/* Section heading pattern used throughout (centered serif navy) */
.section-title { text-align: center; color: var(--color-navy-deep); margin-bottom: var(--space-7); }
.section-title--onDark { color: #fff; }

/* University grid (bordered boxes, cream fill) */
.uni-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.uni-card { border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-cream); padding: var(--space-5) var(--space-4); text-align: center; display: flex; align-items: center; justify-content: center; min-height: 88px; }
.uni-card__name { font-family: var(--font-display); color: var(--color-navy-deep); font-weight: 400; font-size: 1.2rem; line-height: 1.3; }
.uni-card a.uni-card__name { text-decoration: none; }
.uni-card:hover { border-color: var(--color-gold); }

/* Courses (navy section with outlined pills) */
.courses-section { background: var(--color-navy); padding: var(--space-8) 0; }
.courses-columns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); max-width: 760px; margin: 0 auto; }
.courses-columns__label { text-align: center; color: var(--color-gold); font-family: var(--font-display); font-size: 1.15rem; margin-bottom: var(--space-4); }
.course-pill-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.course-pill { border: 1px solid rgba(255,255,255,0.35); border-radius: var(--radius-input); color: #fff; text-align: center; padding: var(--space-3) var(--space-2); font-size: 0.95rem; background: transparent; text-decoration: none; }
.course-pill:hover { border-color: var(--color-gold); background: rgba(255,255,255,0.05); text-decoration: none; }
.courses-cta { text-align: center; margin-top: var(--space-7); }

/* Intake / "start early" section */
.intake-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-7); }
.intake-card { border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-cream); padding: var(--space-5); display: flex; align-items: center; gap: var(--space-4); }
.intake-card__icon { flex-shrink: 0; color: var(--color-gold); }
.intake-card__title { font-family: var(--font-display); color: var(--color-navy-deep); font-size: 1.15rem; margin: 0 0 2px; }
.intake-card__sub { color: var(--color-muted); font-size: var(--fs-small); margin: 0; }

.step-row { display: flex; align-items: center; justify-content: center; gap: var(--space-3); flex-wrap: nowrap; }
.step-row__item { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); flex: 0 0 auto; margin-right: var(--space-3); }
.step-row__item:last-child { margin-right: 0; }
.step-row__circle { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--color-gold); color: var(--color-navy-deep); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 700; background: var(--color-cream); }
.step-row__label { font-size: var(--fs-small); color: var(--color-navy-deep); font-weight: 500; white-space: nowrap; }
.step-row__arrow { color: var(--color-gold); flex: 0 0 auto; margin-right: var(--space-3); }

/* Investment box */
.investment-box { border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-cream); padding: var(--space-7) var(--space-6); margin-top: var(--space-8); }
.investment-box h2 { text-align: center; }
.investment-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; }
.investment-col { text-align: center; padding: 0 var(--space-4); border-left: 1px solid var(--color-border); }
.investment-col:first-child { border-left: none; }
.investment-col__icon { color: var(--color-gold); margin-bottom: var(--space-3); }
.investment-col__title { color: var(--color-navy-deep); font-weight: 700; margin-bottom: 2px; }
.investment-col__sub { color: var(--color-muted); font-size: var(--fs-small); }
.investment-cta { text-align: center; margin-top: var(--space-6); }

/* Consultation form */
.consult-box { border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-cream); padding: var(--space-7) var(--space-6); }
.consult-box h2 { text-align: center; }
.consult-box__sub { text-align: center; color: var(--color-muted); margin-bottom: var(--space-2); }
.consult-box__phone { text-align: center; color: var(--color-navy-deep); margin-bottom: var(--space-6); }
.consult-box__phone a { color: var(--color-navy-deep); font-weight: 700; }
.consult-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-bottom: var(--space-5); }
.consult-field label { display: block; font-size: var(--fs-small); font-weight: 600; color: var(--color-navy-deep); margin-bottom: var(--space-2); }
.consult-field input { width: 100%; padding: 11px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-input); background: #fff; font-size: var(--fs-body); }
.consult-field input:focus { border-color: var(--color-gold); }
.consult-radio-group { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.consult-radio { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-body); color: var(--color-navy-deep); cursor: pointer; }
.consult-radio input[type="radio"] { width: 18px; height: 18px; accent-color: var(--color-gold); }
.consult-note { text-align: center; color: var(--color-muted); font-size: var(--fs-small); margin-top: var(--space-4); margin-bottom: 0; }

/* Footer (simple two-part layout matching mockup) */
.site-footer { background: var(--color-navy); color: rgba(255,255,255,0.85); padding: var(--space-6) 0; }
.footer__row { display: flex; align-items: center; gap: var(--space-6); }
.footer__brand-block { flex: 0 0 auto; }
.footer__logo { height: 32px; width: auto; margin-bottom: var(--space-2); }
.footer__address { margin: 0; font-size: var(--fs-small); color: rgba(255,255,255,0.75); }
.footer__divider { width: 1px; align-self: stretch; background: rgba(255,255,255,0.2); }
.footer__cta-block { flex: 1; }
.footer__cta-text { margin: 0 0 var(--space-3); font-family: var(--font-display); font-size: 1.05rem; }
.footer__whatsapp { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; }

/* Anchor scroll offset so #consultation isn't hidden under sticky header */
#consultation { scroll-margin-top: 90px; }