/* ============================================================
   NUPAF EDUCATION — SHARED STYLESHEET
   Institutional rebrand: deep navy, stone, disciplined type
   ============================================================ */

:root {
  /* Colour — institutional palette */
  --paper: #FAFAF7;
  --paper-2: #F2EFE8;
  --paper-3: #E8E3D5;
  --ink: #18191B;
  --ink-2: #4A4D55;
  --ink-3: #8B8E96;
  --rule: rgba(24,25,27,0.12);
  --rule-soft: rgba(24,25,27,0.06);
  --navy: #0A1F44;
  --navy-deep: #06173A;
  --navy-soft: #DDE2EC;
  --brass: #C9A961;

  /* Legacy aliases — point old --blue references at the new navy */
  --blue: #0A1F44;
  --blue-deep: #06173A;
  --blue-soft: #DDE2EC;

  /* Layout */
  --max: 1440px;
  --pad: clamp(20px, 4vw, 60px);
  --r: 4px;
  --r-lg: 6px;

  /* Type */
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --serif: 'Source Serif 4', 'Times New Roman', Georgia, serif;
  --mono: 'JetBrains Mono', monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--paper); }
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }

/* ============== HEADER ============== */
header.site {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 250, 247, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 0.5px solid var(--rule);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 32px;
}

/* ============== INSTITUTIONAL LOGO ============== */
.logo {
  display: inline-flex;
  align-items: stretch;
  background: var(--navy);
  color: #FFFFFF;
  height: 40px;
  text-decoration: none;
  border-radius: 0;
  overflow: hidden;
}
.logo .logo-mark {
  background: var(--navy-deep);
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.02em;
  line-height: 1;
}
.logo .logo-text {
  padding: 0 16px;
  display: flex;
  align-items: center;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.logo-lg {
  height: 56px;
}
.logo-lg .logo-mark {
  width: 56px;
  font-size: 24px;
}
.logo-lg .logo-text {
  padding: 0 22px;
  font-size: 16px;
}

/* Navigation */
nav.primary { display: flex; gap: 32px; flex: 1; justify-content: center; }
nav.primary a {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  position: relative;
  transition: color 0.2s;
  letter-spacing: -0.005em;
}
nav.primary a:hover { color: var(--navy); }
nav.primary a.active { color: var(--navy); font-weight: 600; }
nav.primary a.active::after {
  content: '';
  position: absolute;
  bottom: -19px;
  left: 0; right: 0;
  height: 2px;
  background: var(--navy);
}
.header-cta { display: flex; align-items: center; gap: 18px; }
.link-portal {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
}
.link-portal:hover { color: var(--navy); }

/* ============== BUTTONS ============== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: var(--navy);
  color: var(--paper);
  border-radius: 2px;
  transition: all 0.2s ease;
  letter-spacing: 0.005em;
}
.btn:hover { background: var(--navy-deep); }
.btn .arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  font-size: 13px;
  transition: transform 0.2s;
}
.btn:hover .arrow { transform: translateX(3px); }
.btn-navy { background: var(--navy); }
.btn-navy:hover { background: var(--navy-deep); }
.btn-blue { background: var(--navy); }
.btn-blue:hover { background: var(--navy-deep); }
.btn-ghost {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--navy);
}
.btn-ghost:hover { background: var(--navy); color: var(--paper); }
.btn-stone {
  background: var(--paper);
  color: var(--navy);
  border: 1px solid transparent;
}
.btn-stone:hover { background: #fff; }
.btn-cream {
  background: var(--paper);
  color: var(--navy);
}
.btn-cream:hover { background: #fff; }
.btn-lg { padding: 15px 28px; font-size: 14.5px; }

/* ============== TEXT LINK ============== */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  color: var(--navy);
  position: relative;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--navy);
  transition: gap 0.2s;
}
.tlink:hover { gap: 12px; }

/* ============== SECTION HELPERS ============== */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--navy);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--navy);
}
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: clamp(40px, 5vw, 64px);
  gap: 32px;
  flex-wrap: wrap;
}
.section-head h2 {
  font-family: var(--serif);
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--ink);
  max-width: 800px;
  margin-top: 18px;
}
.section-head h2 .blue,
.section-head h2 .accent {
  color: var(--navy);
  font-style: italic;
  font-weight: 400;
}

/* Global rule: any .blue or .accent inside any heading renders italic navy */
h1 .blue, h2 .blue, h3 .blue, h4 .blue,
h1 .accent, h2 .accent, h3 .accent, h4 .accent {
  color: var(--navy);
  font-style: italic;
  font-weight: 400;
}

/* ============== HERO BASE ============== */
.hero {
  padding: clamp(48px, 7vw, 96px) 0 clamp(60px, 8vw, 120px);
}
.hero h1 {
  font-family: var(--serif);
  font-size: clamp(48px, 7.5vw, 104px);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 28px 0 32px;
  max-width: 1100px;
}
.hero h1 .blue,
.hero h1 .accent {
  color: var(--navy);
  font-style: italic;
  font-weight: 400;
}
.hero-sub {
  font-family: var(--sans);
  font-size: clamp(16px, 1.4vw, 20px);
  color: var(--ink-2);
  max-width: 640px;
  margin-bottom: 40px;
  line-height: 1.55;
  font-weight: 400;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ============== MARQUEE ============== */
.marquee {
  border-top: 0.5px solid var(--rule);
  border-bottom: 0.5px solid var(--rule);
  background: var(--paper);
  overflow: hidden;
  padding: 18px 0;
}
.marquee-track {
  display: inline-flex;
  gap: 48px;
  animation: marquee 60s linear infinite;
  white-space: nowrap;
  align-items: center;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.015em;
  font-style: italic;
}
.marquee-item .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--navy);
  display: inline-block;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============== STATS / BENTO ============== */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  gap: 12px;
}
.bento-item {
  background: var(--paper-2);
  border: 0.5px solid var(--rule);
  border-radius: var(--r);
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease;
}
.bento-item:hover { transform: translateY(-3px); }
.bento-item.dark { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.bento-item.blue,
.bento-item.navy { background: var(--navy); color: var(--paper); border-color: var(--navy); }
.bento-item.image { background-size: cover; background-position: center; color: var(--paper); border: none; }
.bento-item.image::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 50%, rgba(10,31,68,0.7) 100%);
}
.bento-item.image > * { position: relative; z-index: 2; }
.bento-tag {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
}
.bento-figure {
  font-family: var(--serif);
  font-size: clamp(56px, 6vw, 88px);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 0.95;
}
.bento-figure sup { font-size: 0.4em; vertical-align: super; opacity: 0.7; margin-left: 4px; }
.bento-label {
  font-size: 14px;
  line-height: 1.4;
  opacity: 0.78;
  max-width: 240px;
}
.bento-2x { grid-column: span 2; }
.bento-3x { grid-column: span 3; }
.bento-2y { grid-row: span 2; }

/* ============== CARDS ============== */
.card {
  background: var(--paper-2);
  border: 0.5px solid var(--rule);
  border-radius: var(--r);
  overflow: hidden;
  transition: transform 0.3s ease;
  cursor: pointer;
}
.card:hover { transform: translateY(-4px); }
.card-image {
  aspect-ratio: 1.2 / 1;
  background: var(--ink);
  background-size: cover;
  background-position: center;
  transition: transform 0.6s ease;
  overflow: hidden;
}
.card:hover .card-image { transform: scale(1.03); }
.card-body { padding: 24px 28px 28px; }
.card-meta {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--navy);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: flex;
  gap: 12px;
}
.card-meta span:not(:first-child) { color: var(--ink-3); }
.card h3 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
}
.card p {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.55;
}

/* ============== DUAL ENTRY ============== */
.dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.dual-card {
  background: var(--paper-2);
  border: 0.5px solid var(--rule);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 540px;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.dual-card:hover { transform: translateY(-4px); }
.dual-card.dark { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.dual-card.blue,
.dual-card.navy { background: var(--navy); color: var(--paper); border-color: var(--navy); }
.dual-card .image {
  aspect-ratio: 16 / 9;
  background: var(--ink);
  background-size: cover;
  background-position: center;
}
.dual-card .body {
  padding: 32px 36px 36px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.dual-card .tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 18px;
  opacity: 0.7;
}
.dual-card h3 {
  font-family: var(--serif);
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: 16px;
}
.dual-card p {
  font-size: 15.5px;
  line-height: 1.55;
  margin-bottom: 24px;
  opacity: 0.85;
  max-width: 460px;
}
.dual-card .points {
  list-style: none;
  margin-bottom: auto;
  padding-bottom: 28px;
}
.dual-card .points li {
  padding: 12px 0;
  font-size: 14.5px;
  border-top: 0.5px solid currentColor;
  border-color: rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  gap: 14px;
  opacity: 0.92;
}
.dual-card.light .points li { border-color: var(--rule); }
.dual-card .points li::before {
  content: '—';
  font-weight: 400;
  font-size: 14px;
  opacity: 0.5;
}
.dual-card.light { background: var(--paper-2); color: var(--ink); }
.dual-card.light .tag { color: var(--navy); opacity: 1; }
.dual-card.light .btn { background: var(--navy); color: var(--paper); }
.dual-card.light .btn:hover { background: var(--navy-deep); }
.dual-card .btn { align-self: flex-start; }

/* ============== FOOTER ============== */
footer.site {
  background: var(--navy);
  color: rgba(250, 250, 247, 0.7);
  padding: 80px 0 28px;
  font-size: 14px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 48px;
  margin-bottom: 64px;
}
.footer-tagline {
  margin-top: 24px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.55;
  max-width: 320px;
  color: rgba(250, 250, 247, 0.7);
  font-weight: 400;
}
.footer-col h5 {
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(250, 250, 247, 0.5);
  letter-spacing: 0.14em;
  margin-bottom: 18px;
  font-weight: 500;
  text-transform: uppercase;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a, .footer-col span { color: rgba(250, 250, 247, 0.78); transition: color 0.2s; }
.footer-col a:hover { color: var(--paper); }
.footer-bottom {
  padding-top: 24px;
  border-top: 0.5px solid rgba(250, 250, 247, 0.12);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(250, 250, 247, 0.45);
}
.footer-bottom-links { display: flex; gap: 24px; }
.footer-bottom-links a { color: rgba(250, 250, 247, 0.55); }
.footer-bottom-links a:hover { color: var(--paper); }
footer.site .logo {
  background: rgba(250, 250, 247, 0.08);
  color: var(--paper);
}
footer.site .logo .logo-mark {
  background: rgba(250, 250, 247, 0.14);
}

/* ============== CTA STRIP ============== */
.cta-strip {
  padding: clamp(80px, 12vw, 160px) 0;
  background: var(--ink);
  color: var(--paper);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-strip::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(10, 31, 68, 0.5), transparent 60%);
  filter: blur(80px);
  z-index: 0;
}
.cta-strip > .container { position: relative; z-index: 1; }
.cta-strip h2 {
  font-family: var(--serif);
  font-size: clamp(40px, 6.5vw, 88px);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.025em;
  margin-bottom: 28px;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
.cta-strip h2 .blue,
.cta-strip h2 .accent { color: rgba(250, 250, 247, 0.55); font-style: italic; }
.cta-strip p {
  font-size: 17px;
  color: rgba(250, 250, 247, 0.7);
  max-width: 580px;
  margin: 0 auto 40px;
  line-height: 1.55;
}
.cta-strip .btn-ghost { color: var(--paper); border-color: rgba(250, 250, 247, 0.3); }
.cta-strip .btn-ghost:hover { background: var(--paper); color: var(--ink); }
.cta-strip .btn-stone, .cta-strip .btn-cream { background: var(--paper); color: var(--ink); }
.cta-strip .btn-stone:hover, .cta-strip .btn-cream:hover { background: #fff; }
.cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ============== UTILITY ============== */
.section { padding: clamp(80px, 10vw, 140px) 0; }
.section-stone, .section-cream { background: var(--paper-2); }
.section-dark { background: var(--ink); color: var(--paper); }
.section-navy { background: var(--navy); color: var(--paper); }
.section-dark .eyebrow, .section-navy .eyebrow { color: rgba(250,250,247,0.7); }
.section-dark .eyebrow::before, .section-navy .eyebrow::before { background: rgba(250,250,247,0.7); }
.section-dark h2, .section-navy h2 { color: var(--paper); }

/* ============== ANIMATIONS ============== */
.reveal { opacity: 0; transform: translateY(20px); animation: reveal 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.r1 { animation-delay: 0.06s; }
.r2 { animation-delay: 0.18s; }
.r3 { animation-delay: 0.30s; }
.r4 { animation-delay: 0.42s; }
.r5 { animation-delay: 0.54s; }
@keyframes reveal { to { opacity: 1; transform: none; } }

/* ============== PAGE LOAD REVEAL ============== */
.page-reveal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}
.page-reveal.done { display: none; }
.reveal-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50vw;
  background: var(--navy);
  transition: transform 1.6s cubic-bezier(0.76, 0, 0.24, 1);
  will-change: transform;
}
.reveal-panel.left { left: 0; transform: translateX(0); }
.reveal-panel.right { right: 0; transform: translateX(0); }
.page-reveal.split .reveal-panel.left { transform: translateX(-100%); }
.page-reveal.split .reveal-panel.right { transform: translateX(100%); }
.reveal-line {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100vh;
  background: rgba(250, 250, 247, 0.7);
  transform: translateX(-50%) scaleY(0);
  transform-origin: top center;
  z-index: 10000;
  transition: transform 2.6s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.5s ease-out;
  opacity: 1;
}
.page-reveal.line-draw .reveal-line { transform: translateX(-50%) scaleY(1); }
.page-reveal.split .reveal-line { opacity: 0; }
.reveal-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  z-index: 10001;
  opacity: 0;
  transition: opacity 0.7s ease-out, transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal-logo .logo {
  height: 64px;
  background: var(--navy-deep);
  color: var(--paper);
  border: 1px solid rgba(250, 250, 247, 0.20);
  box-shadow: 0 0 0 12px var(--navy);
}
.reveal-logo .logo .logo-mark {
  width: 64px;
  font-size: 26px;
  background: rgba(0, 0, 0, 0.40);
}
.reveal-logo .logo .logo-text {
  font-size: 17px;
  padding: 0 24px;
}
.page-reveal.show .reveal-logo {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.page-reveal.fade .reveal-logo {
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.04);
}

/* ============== RESPONSIVE ============== */
@media (max-width: 1024px) {
  /* Mobile burger menu replaces nav at <1024px */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 200px; }
  .bento-3x { grid-column: span 2; }
  .dual { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; }
  .bento-2x, .bento-3x { grid-column: span 1; }
  .header-cta .link-portal { display: none; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .logo .logo-text { font-size: 11px; padding: 0 12px; }
  .logo { height: 36px; }
  .logo .logo-mark { width: 36px; font-size: 16px; }
}

/* ============== MOBILE BURGER MENU ============== */
.burger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: 8px;
  position: relative;
  z-index: 200;
}
.burger-lines {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 22px;
}
.burger-lines span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
              opacity 0.25s ease;
  transform-origin: center;
}
.burger.is-open .burger-lines span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.burger.is-open .burger-lines span:nth-child(2) {
  opacity: 0;
}
.burger.is-open .burger-lines span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Mobile menu drawer */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--paper);
  z-index: 150;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
  overflow-y: auto;
  padding: 88px clamp(20px, 5vw, 48px) 48px;
}
.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease, visibility 0s linear 0s;
}
.mobile-menu-inner {
  max-width: 720px;
  margin: 0 auto;
}
.mobile-menu nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 0.5px solid var(--rule);
}
.mobile-menu nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0;
  border-bottom: 0.5px solid var(--rule);
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.02em;
  transition: color 0.2s, padding-left 0.3s;
  opacity: 0;
  transform: translateY(12px);
}
.mobile-menu.is-open nav a {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.2s;
}
.mobile-menu.is-open nav a:nth-child(1) { transition-delay: 0.1s; }
.mobile-menu.is-open nav a:nth-child(2) { transition-delay: 0.16s; }
.mobile-menu.is-open nav a:nth-child(3) { transition-delay: 0.22s; }
.mobile-menu.is-open nav a:nth-child(4) { transition-delay: 0.28s; }
.mobile-menu.is-open nav a:nth-child(5) { transition-delay: 0.34s; }
.mobile-menu.is-open nav a:nth-child(6) { transition-delay: 0.40s; }
.mobile-menu.is-open nav a:nth-child(7) { transition-delay: 0.46s; }
.mobile-menu nav a:hover {
  color: var(--navy);
  padding-left: 8px;
}
.mobile-menu nav a .arrow {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink-3);
  font-style: normal;
}
.mobile-menu-footer {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 0.5px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mobile-menu-footer .btn {
  align-self: flex-start;
}
.mobile-menu-footer .meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-top: 12px;
}

@media (max-width: 1024px) {
  .burger { display: inline-flex; }
  .header-cta .link-portal { display: none; }
  .header-cta .btn { display: none; }
}
@media (min-width: 1025px) {
  .mobile-menu { display: none; }
}

/* Lock body scroll when menu is open */
body.menu-open { overflow: hidden; }

/* ============== HERO SIGNATURES ============== */
/* Per-page distinctive mark in corner of hero. Each page sets a data-mark attribute. */
.hero-signature {
  position: absolute;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(180px, 22vw, 360px);
  line-height: 0.85;
  letter-spacing: -0.06em;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  opacity: 0.10;
}
.hero-signature.tone-navy { color: var(--navy); }
.hero-signature.tone-brass { color: var(--brass); opacity: 0.16; }
.hero-signature.pos-right { right: -40px; bottom: -60px; }
.hero-signature.pos-left  { left: -40px;  bottom: -60px; }
.hero { position: relative; overflow: hidden; }
.hero .container { position: relative; z-index: 2; }

@media (max-width: 768px) {
  .hero-signature {
    font-size: clamp(140px, 38vw, 220px);
    bottom: -40px;
  }
}


/* === SPA PAGE ROUTING === */
.page { display: block; }



/* === PAGE-SPECIFIC: HOME === */

/* Home-page-specific */
  .home-hero {
    padding-top: clamp(40px, 5vw, 64px);
    padding-bottom: 0;
  }
  #page-home .home-hero-image{
    margin-top: clamp(48px, 6vw, 80px);
    height: clamp(380px, 60vh, 640px);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--ink) url('img/photo-1486325212027-8081e485255e-w2400.jpg') center/cover;
    position: relative;
  }
  .home-hero-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(10,11,13,0.65) 100%),
      linear-gradient(90deg, rgba(10,11,13,0.30) 0%, rgba(10,11,13,0) 60%);
  }
  .hero-photo-quote {
    position: absolute;
    bottom: clamp(28px, 4vw, 56px);
    left: clamp(28px, 4vw, 56px);
    right: clamp(28px, 4vw, 56px);
    max-width: 720px;
    color: var(--paper);
    z-index: 2;
  }
  .hero-photo-quote-mark {
    font-family: var(--serif);
    font-style: italic;
    font-size: 64px;
    font-weight: 400;
    color: rgba(250, 250, 247, 0.55);
    line-height: 0.5;
    margin-bottom: 12px;
  }
  .hero-photo-quote blockquote {
    font-family: var(--serif);
    font-size: clamp(20px, 2.4vw, 32px);
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--paper);
    margin-bottom: 22px;
    text-shadow: 0 2px 24px rgba(0,0,0,0.45);
    max-width: 640px;
  }
  .hero-photo-quote blockquote em {
    font-style: italic;
    color: rgba(250, 250, 247, 0.85);
  }
  .hero-photo-attr {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(250, 250, 247, 0.75);
  }
  .hero-photo-divider {
    width: 24px;
    height: 1px;
    background: rgba(250, 250, 247, 0.35);
  }
  @media (max-width: 600px) {
    .hero-photo-quote-mark { font-size: 44px; }
    .hero-photo-attr { flex-wrap: wrap; gap: 8px; }
    .hero-photo-divider { display: none; }
  }

  /* Pillars/value section */
  .pillars-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
  }
  @media (max-width: 1024px) {
    .pillars-grid { grid-template-columns: 1fr 1fr !important; }
  }
  @media (max-width: 600px) {
    .pillars-grid { grid-template-columns: 1fr !important; }
  }
  .pillar {
    background: var(--paper-2);
    border-radius: var(--r-lg);
    padding: 32px;
    transition: transform 0.3s, background 0.3s;
    cursor: default;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .pillar:hover { background: var(--paper-3); transform: translateY(-4px); }
  .pillar-icon {
    width: 44px; height: 44px;
    background: var(--blue);
    color: var(--paper);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 18px;
    margin-bottom: auto;
  }
  .pillar h3 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 24px 0 8px;
  }
  .pillar p {
    font-size: 14.5px;
    color: var(--ink-2);
    line-height: 1.5;
  }

  /* Destinations strip */
  .dest-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
  }
  .dest-tile {
    aspect-ratio: 0.78 / 1;
    background: var(--ink);
    background-size: cover;
    background-position: center;
    border-radius: var(--r-lg);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.4s;
  }
  .dest-tile:hover { transform: translateY(-6px); }
  .dest-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.75) 100%);
  }
  .dest-tile-content {
    position: absolute;
    bottom: 22px;
    left: 22px;
    right: 22px;
    color: var(--paper);
    z-index: 2;
  }
  .dest-tile-num {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    opacity: 0.75;
    margin-bottom: 6px;
  }
  .dest-tile-name {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
  }
  .dest-tile {
    background: var(--navy);
    background-size: cover;
    background-position: center;
    color: var(--paper);
    overflow: hidden;
    position: relative;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  #page-home /* Per-tile background images */
  .dest-tile.dt-vietnam{ background-image: linear-gradient(180deg, rgba(10,23,58,0.30) 40%, rgba(10,23,58,0.85) 100%), url("img/photo-1583417319070-4a69db38a482-w1200.jpg"); }
  #page-home .dest-tile.dt-thailand{ background-image: linear-gradient(180deg, rgba(10,23,58,0.30) 40%, rgba(10,23,58,0.85) 100%), url("img/photo-1563492065599-3520f775eeed-w1200.jpg"); }
  #page-home .dest-tile.dt-cambodia{ background-image: linear-gradient(180deg, rgba(10,23,58,0.30) 40%, rgba(10,23,58,0.85) 100%), url("img/photo-1508009603885-50cf7c579365-w1200.jpg"); }
  #page-home .dest-tile.dt-laos{ background-image: linear-gradient(180deg, rgba(10,23,58,0.30) 40%, rgba(10,23,58,0.85) 100%), url("img/photo-1555921015-5532091f6026-w1200.jpg"); }
  #page-home .dest-tile.dt-korea{ background-image: linear-gradient(180deg, rgba(10,23,58,0.30) 40%, rgba(10,23,58,0.85) 100%), url("img/photo-1538485399081-7191377e8241-w1200.jpg"); }
  .dest-tile:hover { transform: translateY(-6px); }
  .dest-tile-content {
    position: relative;
    z-index: 2;
    padding: 32px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .dest-tile-num {
    font-family: var(--mono);
    font-size: 11px;
    color: rgba(250, 250, 247, 0.75);
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .dest-tile-name {
    font-family: var(--serif);
    font-size: clamp(28px, 3vw, 36px);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.05;
  }
  .dest-tile-meta {
    font-family: var(--mono);
    font-size: 11px;
    color: rgba(250, 250, 247, 0.85);
    letter-spacing: 0.1em;
    margin-top: 6px;
  }

  /* ============== TWO AUDIENCES (editorial split) ============== */
  .two-audiences { padding: clamp(80px, 10vw, 140px) 0; }
  .ta-head {
    max-width: 880px;
    margin-bottom: clamp(60px, 8vw, 100px);
    padding-bottom: clamp(40px, 5vw, 64px);
    border-bottom: 0.5px solid var(--rule);
  }
  .ta-head h2 {
    font-family: var(--serif);
    font-size: clamp(40px, 5.5vw, 72px);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: var(--ink);
    margin: 18px 0 28px;
  }
  .ta-head h2 .blue {
    color: var(--navy);
    font-style: italic;
  }
  .ta-lede {
    font-family: var(--serif);
    font-size: clamp(18px, 1.5vw, 22px);
    line-height: 1.55;
    color: var(--ink);
    font-weight: 400;
    max-width: 720px;
  }

  .ta-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(48px, 6vw, 96px);
    align-items: center;
    margin-bottom: clamp(80px, 10vw, 120px);
  }
  .ta-row:last-child { margin-bottom: 0; }
  .ta-row.reverse .ta-image { order: -1; }

  .ta-text { padding: 12px 0; }
  .ta-num {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--navy);
    letter-spacing: 0.2em;
    margin-bottom: 18px;
    font-weight: 600;
  }
  .ta-tag {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-2);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 14px;
  }
  .ta-text h3 {
    font-family: var(--serif);
    font-size: clamp(34px, 4.5vw, 56px);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin-bottom: 24px;
  }
  .ta-text h3 em {
    font-style: italic;
    color: var(--navy);
  }
  .ta-text > p {
    font-size: 16.5px;
    color: var(--ink-2);
    line-height: 1.65;
    margin-bottom: 32px;
    max-width: 480px;
  }

  .ta-points {
    list-style: none;
    margin: 0 0 36px 0;
    padding: 0;
    border-top: 0.5px solid var(--rule);
  }
  .ta-points li {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 0.5px solid var(--rule);
    align-items: baseline;
  }
  .ta-points li .num {
    font-family: var(--serif);
    font-style: italic;
    font-size: 18px;
    color: var(--navy);
    font-weight: 400;
  }
  .ta-points li > span:last-child {
    font-size: 14.5px;
    color: var(--ink);
    line-height: 1.55;
  }

  .ta-image {
    position: relative;
    aspect-ratio: 4 / 5;
    background: var(--ink);
    background-size: cover;
    background-position: center;
    border-radius: var(--r-lg);
    overflow: hidden;
  }
  .ta-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(10,11,13,0.45) 100%);
  }
  #page-home .ta-image-schools{
    background:
      linear-gradient(180deg, rgba(10,31,68,0.10) 40%, rgba(10,31,68,0.60) 100%),
      url("img/photo-1580582932707-520aed937b7b-w1600.jpg") center/cover;
  }
  .ta-image-schools::before {
    content: '';
    display: none;
  }
  #page-home .ta-image-educators{
    background:
      linear-gradient(180deg, rgba(10,31,68,0.10) 40%, rgba(10,31,68,0.60) 100%),
      url("img/photo-1559592413-7cec4d0cae2b-w1600.jpg") center/cover;
  }
  .ta-image-educators::before {
    content: '';
    display: none;
  }
  .ta-image-tag {
    position: absolute;
    bottom: 24px;
    left: 24px;
    color: var(--paper);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    z-index: 2;
  }

  @media (max-width: 1024px) {
    .pillars-grid { grid-template-columns: 1fr; }
    .dest-strip { grid-template-columns: 1fr 1fr; }
    .dest-tile { aspect-ratio: 1.4 / 1; }
    .ta-row, .ta-row.reverse { grid-template-columns: 1fr; gap: 32px; }
    .ta-row.reverse .ta-image { order: 0; }
  }

/* === PAGE-SPECIFIC: SCHOOLS === */

.schools-hero {
    padding-top: clamp(40px, 5vw, 64px);
    padding-bottom: 0;
  }
  #page-schools .hero-split {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(32px, 4vw, 64px);
    align-items: center;
    margin-top: clamp(32px, 4vw, 56px);
  }
  #page-schools .hero-split-image {
    aspect-ratio: 4 / 5;
    background: var(--ink) none;
    border-radius: var(--r-lg);
  }
  #page-schools .hero-split h1 {
    margin-top: 8px;
  }

  /* Service grid */
  .service-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    margin-bottom: clamp(80px, 10vw, 120px);
  }
  .service-row:last-child { margin-bottom: 0; }
  .service-row.reverse .service-image { order: 2; }
  .service-image {
    aspect-ratio: 4 / 3;
    background: var(--ink);
    background-size: cover;
    background-position: center;
    border-radius: var(--r-lg);
  }
  .si-1 { background: var(--navy-deep) none; }
  .si-2 { background: var(--navy-deep) none; }
  .si-3 { background: var(--navy-deep) none; }
  .service-text .num {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--blue);
    letter-spacing: 0.08em;
    margin-bottom: 16px;
  }
  .service-text h3 {
    font-size: clamp(28px, 3.5vw, 44px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.04;
    margin-bottom: 20px;
  }
  .service-text p {
    font-size: 16.5px;
    color: var(--ink-2);
    line-height: 1.6;
    margin-bottom: 20px;
  }
  .service-text ul {
    list-style: none;
    margin-bottom: 24px;
  }
  .service-text li {
    padding: 12px 0;
    font-size: 14.5px;
    color: var(--ink);
    border-top: 0.5px solid var(--rule);
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .service-text li::before { content: '↗'; color: var(--blue); font-weight: 600; }
  .service-text li:last-child { border-bottom: 0.5px solid var(--rule); }

  /* Numbered process for schools */
  .process-list {
    display: grid;
    gap: 0;
    border-top: 0.5px solid var(--rule);
  }
  .process-row {
    display: grid;
    grid-template-columns: 80px 1fr 2fr;
    gap: 32px;
    padding: 28px 0;
    border-bottom: 0.5px solid var(--rule);
    align-items: baseline;
  }
  .process-row .pn {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--blue);
    font-weight: 600;
    letter-spacing: 0.06em;
  }
  .process-row h4 {
    font-size: clamp(18px, 1.8vw, 24px);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
  }
  .process-row p {
    font-size: 14.5px;
    color: var(--ink-2);
    line-height: 1.55;
    max-width: 540px;
  }

  /* Quote / proof */
  .proof {
    background: var(--paper-2);
    border-radius: var(--r-lg);
    padding: clamp(48px, 6vw, 88px);
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 64px;
    align-items: center;
  }
  .proof-quote {
    font-size: clamp(22px, 2.6vw, 36px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
    color: var(--ink);
    margin-bottom: 28px;
  }
  .proof-quote .blue { color: var(--blue); }
  .proof-attr {
    font-size: 14px;
    color: var(--ink-2);
  }
  .proof-attr strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }
  .proof-image {
    aspect-ratio: 4 / 5;
    background: var(--ink) none;
    border-radius: var(--r);
  }

  @media (max-width: 1024px) {
    #page-schools .hero-split, .service-row, .service-row.reverse, .proof { grid-template-columns: 1fr; gap: 32px; }
    .service-row.reverse .service-image { order: 0; }
    .process-row { grid-template-columns: 60px 1fr; }
    .process-row p { grid-column: 2; }
  }

/* schools-hero hero image */
.hero.schools-hero { position: relative; }
#page-schools .hero.schools-hero::before{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(250,250,247,0.92) 0%, rgba(250,250,247,0.55) 60%, rgba(250,250,247,0.95) 100%),
              url("img/photo-1580582932707-520aed937b7b-w2400.jpg") center/cover;
  z-index: 0;
  opacity: 0.55;
}
.hero.schools-hero .container { position: relative; z-index: 2; }
.hero.schools-hero .hero-signature { z-index: 1; }

/* === PAGE-SPECIFIC: EDUCATORS === */

.ed-hero {
    padding-top: clamp(20px, 2.5vw, 36px);
    padding-bottom: 0;
  }
  #page-educators .hero-split {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: clamp(32px, 4vw, 64px);
    align-items: center;
    margin-top: clamp(20px, 2.5vw, 32px);
  }
  #page-educators .hero-split-image {
    aspect-ratio: 4 / 5;
    background: var(--ink) url('img/photo-1528127269322-539801943592-w1600.jpg') center/cover;
    border-radius: var(--r-lg);
  }

  /* ============== JOURNEY INTRO (bridge section into the timeline) ============== */
  .journey-intro {
    padding: clamp(80px, 10vw, 140px) 0 clamp(60px, 8vw, 100px);
    background: var(--paper-2);
    border-bottom: 0.5px solid var(--rule);
  }
  .journey-intro-grid {
    display: grid;
    grid-template-columns: 0.55fr 1fr;
    gap: clamp(40px, 6vw, 100px);
    align-items: start;
  }
  .journey-intro h2 {
    font-family: var(--serif);
    font-size: clamp(36px, 4.8vw, 60px);
    font-weight: 400;
    letter-spacing: -0.025em;
    line-height: 1.04;
    color: var(--ink);
    margin-top: 16px;
  }
  .journey-intro h2 em {
    font-style: italic;
    color: var(--navy);
  }
  .journey-intro-body {
    padding-top: 8px;
  }
  .journey-intro-body p {
    font-family: var(--serif);
    font-size: clamp(18px, 1.5vw, 22px);
    line-height: 1.55;
    color: var(--ink);
    font-weight: 400;
    margin-bottom: 1.4em;
  }
  .journey-intro-body p:first-child::first-letter {
    font-family: var(--serif);
    font-size: 4.4em;
    font-weight: 400;
    float: left;
    line-height: 0.85;
    margin: 0.05em 0.12em -0.05em -0.04em;
    color: var(--navy);
    font-style: italic;
  }
  .journey-intro-body em {
    font-style: italic;
    color: var(--navy);
  }
  .journey-intro-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: clamp(48px, 6vw, 80px);
    padding-top: clamp(40px, 5vw, 56px);
    border-top: 0.5px solid var(--rule);
  }
  .journey-intro-fact {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .journey-intro-fact .num {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--navy);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .journey-intro-fact .figure {
    font-family: var(--serif);
    font-size: clamp(32px, 3.6vw, 48px);
    font-weight: 400;
    letter-spacing: -0.025em;
    line-height: 1;
    color: var(--ink);
    margin-bottom: 6px;
  }
  .journey-intro-fact .figure em {
    font-style: italic;
    color: var(--navy);
  }
  .journey-intro-fact .label {
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.5;
  }
  @media (max-width: 1024px) {
    .journey-intro-grid { grid-template-columns: 1fr; gap: 24px; }
    .journey-intro-meta { grid-template-columns: 1fr; gap: 24px; }
  }

  /* ============== JOURNEY — sticky stage, scroll-driven step swaps ============== */
  .cj {
    position: relative;
    background: #0A0B0D;
    color: var(--paper);
    /* Total scroll length: 7 steps × 100vh */
    height: 700vh;
  }

  /* The sticky stage — pins the entire composition to the viewport */
  .cj-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
  }

  /* Background image layer — absolute, full-bleed, all 7 stacked */
  .cj-bg-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
                transform 8s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 1;
  }
  .cj-bg-img.active {
    opacity: 1;
    transform: scale(1);
  }
  .cj-bg-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, rgba(10,11,13,0.45) 0%, rgba(10,11,13,0.30) 30%, rgba(10,11,13,0.65) 65%, rgba(10,11,13,0.78) 100%),
      linear-gradient(180deg, rgba(10,11,13,0) 50%, rgba(10,11,13,0.55) 100%),
      rgba(10, 11, 13, 0.18);
  }

  /* Top bar overlaid on the stage */
  .cj-bar {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 20;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 36px clamp(28px, 5vw, 64px);
    color: rgba(250, 250, 247, 0.7);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .cj-bar a {
    color: rgba(250, 250, 247, 0.7);
    transition: color 0.2s;
  }
  .cj-bar a:hover { color: var(--paper); }

  /* Step content layer — each step is absolute, only one .active at a time */
  .cj-step {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: 0 clamp(40px, 6vw, 96px);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  .cj-step.active {
    opacity: 1;
    pointer-events: auto;
  }

  /* The big step number — left half */
  .cj-num {
    font-family: var(--serif);
    font-size: clamp(140px, 22vw, 320px);
    font-weight: 300;
    line-height: 0.85;
    letter-spacing: -0.05em;
    color: var(--paper);
    grid-column: 1;
    align-self: center;
    padding-left: clamp(160px, 14vw, 240px);
    text-shadow: 0 4px 40px rgba(10, 11, 13, 0.4);
  }
  .cj-num em {
    font-style: italic;
    color: rgba(250, 250, 247, 0.7);
    font-weight: 300;
  }

  /* Text panel — right half */
  .cj-panel {
    grid-column: 2;
    max-width: 540px;
    align-self: center;
    position: relative;
    padding: 32px 0;
  }
  .cj-panel::before {
    content: '';
    position: absolute;
    inset: -40px -60px -40px -40px;
    background: radial-gradient(ellipse at center, rgba(10,11,13,0.50) 0%, rgba(10,11,13,0.25) 50%, transparent 80%);
    z-index: -1;
    pointer-events: none;
  }
  .cj-meta {
    font-family: var(--mono);
    font-size: 11px;
    color: rgba(250, 250, 247, 0.7);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .cj-meta::before {
    content: '';
    width: 32px;
    height: 1px;
    background: var(--paper);
  }
  .cj-panel h3 {
    font-family: var(--serif);
    font-size: clamp(34px, 4vw, 56px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--paper);
    margin-bottom: 22px;
    text-shadow: 0 2px 24px rgba(10, 11, 13, 0.5);
  }
  .cj-panel h3 em {
    font-style: italic;
    color: rgba(250, 250, 247, 0.7);
  }
  .cj-panel p {
    font-size: 16px;
    line-height: 1.65;
    color: rgba(250, 250, 247, 0.92);
    max-width: 460px;
    text-shadow: 0 1px 12px rgba(10, 11, 13, 0.5);
  }

  /* Left timeline — absolute inside the sticky stage */
  .cj-timeline {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: clamp(28px, 4vw, 64px);
    z-index: 30;
    list-style: none;
    padding-left: 26px;
    margin: 0;
  }
  .cj-timeline::before {
    content: '';
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 0;
    width: 2px;
    background: rgba(250, 250, 247, 0.20);
  }
  .cj-timeline li {
    position: relative;
    padding: 14px 0;
  }
  .cj-timeline a {
    display: flex;
    align-items: center;
    gap: 16px;
    color: rgba(250, 250, 247, 0.45);
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 500;
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    cursor: pointer;
    line-height: 1.2;
    text-shadow: 0 1px 8px rgba(10, 11, 13, 0.45);
  }
  .cj-timeline a .num {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    color: rgba(250, 250, 247, 0.4);
    width: 22px;
    transition: color 0.4s ease;
  }
  .cj-timeline a::before {
    content: '';
    position: absolute;
    left: -31px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #0A0B0D;
    border: 2px solid rgba(250, 250, 247, 0.35);
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 2;
  }
  .cj-timeline a:hover { color: rgba(250, 250, 247, 0.9); }
  .cj-timeline a:hover .num { color: rgba(250, 250, 247, 0.7); }
  .cj-timeline a:hover::before {
    border-color: var(--paper);
    transform: translateY(-50%) scale(1.15);
  }
  .cj-timeline a.active {
    color: var(--paper);
    font-weight: 600;
    font-size: 22px;
  }
  .cj-timeline a.active .num { color: var(--paper); }
  .cj-timeline a.active::before {
    background: var(--paper);
    border-color: var(--paper);
    transform: translateY(-50%) scale(1.5);
    box-shadow: 0 0 0 6px rgba(250, 250, 247, 0.10);
  }

  /* MOBILE — disable sticky, fall back to stacked layout */
  @media (max-width: 900px) {
    .cj { height: auto; }
    .cj-stage { position: relative; height: auto; overflow: visible; }
    .cj-bg-img,
    .cj-bar,
    .cj-timeline { display: none; }
    .cj-step {
      position: relative;
      inset: auto;
      grid-template-columns: 1fr;
      padding: 0 24px;
      opacity: 1;
      pointer-events: auto;
      min-height: auto;
    }
    .cj-step + .cj-step { margin-top: 0; }
    .cj-step::before {
      content: '';
      display: block;
      width: 100%;
      aspect-ratio: 16 / 10;
      background-image: var(--mob-img);
      background-size: cover;
      background-position: center;
      grid-column: 1;
      margin: 56px 0 28px;
    }
    .cj-num {
      grid-column: 1;
      padding-left: 0;
      font-size: 96px;
    }
    .cj-panel {
      grid-column: 1;
      max-width: none;
    }
    .cj-panel::before { display: none; }
    .cj-panel p { color: rgba(250,250,247,0.85); text-shadow: none; }
    .cj-num,
    .cj-panel h3 { text-shadow: none; }
  }

  /* Whats included grid */
  .inc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
  .inc {
    background: var(--paper-2);
    border-radius: var(--r-lg);
    padding: 28px;
    transition: transform 0.3s, background 0.3s;
  }
  .inc:hover { background: var(--paper-3); transform: translateY(-4px); }
  .inc h4 {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin-bottom: 8px;
  }
  .inc p {
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.55;
  }
  .inc .meta {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--blue);
    letter-spacing: 0.08em;
    margin-bottom: 14px;
  }

  /* Mentor feature */
  .mentor {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
  }
  #page-educators .mentor-image{
    aspect-ratio: 5 / 6;
    background: var(--ink) url('img/photo-1551836022-d5d88e9218df-w1200.jpg') center/cover;
    border-radius: var(--r-lg);
  }
  .mentor h2 {
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.02;
    margin-bottom: 24px;
  }
  .mentor p {
    font-size: 17px;
    color: var(--ink-2);
    line-height: 1.6;
    margin-bottom: 18px;
    max-width: 540px;
  }
  .mentor .blue { color: var(--blue); }

  /* Eligibility */
  .elig {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
  .elig-block {
    background: var(--paper-2);
    border-radius: var(--r-lg);
    padding: 36px;
  }
  .elig-block h3 {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
  }
  .elig-block .sub {
    font-size: 13px;
    color: var(--blue);
    font-weight: 600;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .elig-list {
    list-style: none;
  }
  .elig-list li {
    padding: 12px 0;
    font-size: 14.5px;
    border-top: 0.5px solid var(--rule);
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .elig-list li::before {
    content: '✓';
    color: var(--blue);
    font-weight: 700;
  }

  @media (max-width: 1024px) {
    #page-educators .hero-split, .mentor, .elig { grid-template-columns: 1fr; gap: 32px; }
    .inc-grid { grid-template-columns: 1fr; }
  }

/* === PAGE-SPECIFIC: LEADERS === */

/* ============== LEADERS PAGE ============== */
  .ld-hero {
    padding-top: clamp(20px, 2.5vw, 36px);
    padding-bottom: 0;
  }
  
  
  /* Subtle pinstripe texture for visual depth without a remote image */
  
  /* A monogram instead of a portrait */
  
  
  

  /* ============== POSITIONING (the "this is different" section) ============== */
  .ld-positioning {
    padding: clamp(80px, 10vw, 140px) 0 clamp(60px, 8vw, 100px);
    background: var(--paper-2);
    border-bottom: 0.5px solid var(--rule);
  }
  .ld-pos-grid {
    display: grid;
    grid-template-columns: 0.55fr 1fr;
    gap: clamp(40px, 6vw, 100px);
    align-items: start;
  }
  .ld-pos-grid h2 {
    font-family: var(--serif);
    font-size: clamp(36px, 4.5vw, 56px);
    font-weight: 400;
    letter-spacing: -0.025em;
    line-height: 1.05;
    color: var(--ink);
    margin-top: 16px;
  }
  .ld-pos-grid h2 em {
    font-style: italic;
    color: var(--navy);
  }
  .ld-pos-body p {
    font-family: var(--serif);
    font-size: clamp(18px, 1.5vw, 22px);
    line-height: 1.55;
    color: var(--ink);
    font-weight: 400;
    margin-bottom: 1.4em;
  }
  .ld-pos-body p:first-child::first-letter {
    font-family: var(--serif);
    font-size: 4.4em;
    font-weight: 400;
    float: left;
    line-height: 0.85;
    margin: 0.05em 0.12em -0.05em -0.04em;
    color: var(--navy);
    font-style: italic;
  }
  .ld-pos-body em {
    font-style: italic;
    color: var(--navy);
  }
  @media (max-width: 1024px) {
    .ld-pos-grid { grid-template-columns: 1fr; gap: 24px; }
  }

  /* ============== ROLES WE PLACE ============== */
  .ld-roles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .ld-role {
    background: var(--paper);
    border: 0.5px solid var(--rule);
    border-radius: var(--r-lg);
    padding: 36px 36px 32px;
    transition: transform 0.3s, background 0.3s;
  }
  .ld-role:hover { background: var(--paper-2); transform: translateY(-3px); }
  .ld-role-num {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--navy);
    letter-spacing: 0.16em;
    margin-bottom: 14px;
    font-weight: 600;
  }
  .ld-role h3 {
    font-family: var(--serif);
    font-size: 26px;
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
  }
  .ld-role h3 em { font-style: italic; color: var(--navy); }
  .ld-role p {
    font-size: 15px;
    color: var(--ink-2);
    line-height: 1.55;
    margin-bottom: 14px;
  }
  .ld-role-meta {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding-top: 14px;
    border-top: 0.5px solid var(--rule);
  }
  @media (max-width: 768px) { .ld-roles { grid-template-columns: 1fr; } }

  /* ============== SEARCH PROCESS (4 steps, alternating-row editorial) ============== */
  .ld-process {
    display: flex;
    flex-direction: column;
    gap: clamp(60px, 8vw, 100px);
  }
  .ld-process-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 80px);
    align-items: center;
  }
  .ld-process-row.reverse .ld-process-image { order: -1; }
  .ld-process-text { padding: 12px 0; }
  .ld-process-num {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(60px, 7vw, 88px);
    font-weight: 300;
    line-height: 0.85;
    color: var(--navy);
    letter-spacing: -0.04em;
    margin-bottom: 14px;
  }
  .ld-process-tag {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-2);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 14px;
  }
  .ld-process-text h3 {
    font-family: var(--serif);
    font-size: clamp(28px, 3.4vw, 42px);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 18px;
  }
  .ld-process-text h3 em {
    font-style: italic;
    color: var(--navy);
  }
  .ld-process-text p {
    font-size: 16px;
    color: var(--ink-2);
    line-height: 1.65;
    max-width: 480px;
    margin-bottom: 1em;
  }
  .ld-process-image {
    aspect-ratio: 4 / 5;
    background: var(--ink);
    background-size: cover;
    background-position: center;
    border-radius: var(--r-lg);
    position: relative;
    overflow: hidden;
  }
  .ld-process-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(10,31,68,0.35) 100%);
  }
  .ld-process-image-tag {
    position: absolute;
    bottom: 22px;
    left: 22px;
    color: var(--paper);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    z-index: 2;
  }
  #page-leaders .ld-pi-1{ background: var(--navy-deep) url("img/photo-1586281380349-632531db7ed4-w1200.jpg") center/cover; }
  #page-leaders .ld-pi-2{ background: var(--navy-deep) url("img/photo-1551836022-d5d88e9218df-w1200.jpg") center/cover; }
  #page-leaders .ld-pi-3{ background: var(--navy-deep) url("img/photo-1488646953014-85cb44e25828-w1200.jpg") center/cover; }
  #page-leaders .ld-pi-4{ background: var(--navy-deep) url("img/photo-1450101499163-c8848c66ca85-w1200.jpg") center/cover; }

  @media (max-width: 1024px) {
    .ld-process-row, .ld-process-row.reverse { grid-template-columns: 1fr; gap: 24px; }
    .ld-process-row.reverse .ld-process-image { order: 0; }
  }

  /* ============== CONFIDENTIALITY STRIP ============== */
  .ld-confidential {
    background: var(--navy);
    color: var(--paper);
    padding: clamp(60px, 8vw, 100px) 0;
  }
  .ld-confidential .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(48px, 6vw, 80px);
    align-items: center;
  }
  .ld-confidential h2 {
    font-family: var(--serif);
    font-size: clamp(36px, 4.5vw, 56px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--paper);
    margin-bottom: 22px;
  }
  .ld-confidential h2 em {
    font-style: italic;
    color: rgba(250, 250, 247, 0.65);
  }
  .ld-confidential .lede {
    font-family: var(--serif);
    font-size: clamp(17px, 1.4vw, 20px);
    line-height: 1.55;
    color: rgba(250, 250, 247, 0.85);
    margin-bottom: 24px;
  }
  .ld-confidential ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .ld-confidential ul li {
    padding: 16px 0;
    border-bottom: 0.5px solid rgba(250, 250, 247, 0.18);
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 24px;
    align-items: baseline;
  }
  .ld-confidential ul li:first-child { border-top: 0.5px solid rgba(250, 250, 247, 0.18); }
  .ld-confidential ul li .num {
    font-family: var(--serif);
    font-style: italic;
    font-size: 22px;
    color: rgba(250, 250, 247, 0.7);
  }
  .ld-confidential ul li h4 {
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 600;
    color: var(--paper);
    margin-bottom: 4px;
  }
  .ld-confidential ul li p {
    font-size: 14px;
    color: rgba(250, 250, 247, 0.78);
    line-height: 1.55;
  }
  @media (max-width: 1024px) {
    .ld-confidential .container { grid-template-columns: 1fr; gap: 32px; }
  }

  /* ============== APPLICATION FORM PREVIEW ============== */
  .ld-apply-preview {
    background: var(--paper-2);
    border: 0.5px solid var(--rule);
    border-radius: var(--r-lg);
    padding: clamp(32px, 5vw, 56px);
    margin-top: clamp(40px, 5vw, 64px);
  }
  .ld-form-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 0.5px solid var(--rule);
  }
  .ld-form-step {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .ld-form-step .num {
    font-family: var(--serif);
    font-style: italic;
    font-size: 22px;
    color: var(--navy);
    line-height: 1;
  }
  .ld-form-step .label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--ink-2);
    text-transform: uppercase;
  }
  .ld-apply-preview h3 {
    font-family: var(--serif);
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 12px;
  }
  .ld-apply-preview h3 em { font-style: italic; color: var(--navy); }
  .ld-apply-preview p {
    font-size: 15px;
    color: var(--ink-2);
    line-height: 1.6;
    max-width: 580px;
    margin-bottom: 24px;
  }
  @media (max-width: 768px) {
    .ld-form-steps { grid-template-columns: repeat(5, 1fr); gap: 6px; }
    .ld-form-step .num { font-size: 16px; }
    .ld-form-step .label { font-size: 8px; letter-spacing: 0.08em; }
  }

/* === PAGE-SPECIFIC: DESTINATIONS === */

.dest-hero {
    padding-top: clamp(40px, 5vw, 64px);
    padding-bottom: clamp(40px, 5vw, 80px);
  }

  /* Big country grid */
  .countries {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .country {
    aspect-ratio: 1.4 / 1;
    background: var(--ink);
    background-size: cover;
    background-position: center;
    border-radius: var(--r-lg);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.4s;
  }
  .country:hover { transform: translateY(-6px); }
  .country::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 30%, rgba(0,0,0,0.78) 100%);
  }
  .country-content {
    position: absolute;
    bottom: 32px;
    left: 32px;
    right: 32px;
    color: var(--paper);
    z-index: 2;
  }
  .country-num {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    opacity: 0.75;
    margin-bottom: 8px;
  }
  .country-name {
    font-size: clamp(36px, 4vw, 56px);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    margin-bottom: 12px;
  }
  .country-cities {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 18px;
    font-size: 13px;
    opacity: 0.85;
  }
  .country-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 14px;
    color: var(--paper);
    border-bottom: 1.5px solid var(--paper);
    padding-bottom: 4px;
    transition: gap 0.2s;
  }
  .country:hover .country-cta { gap: 14px; }
  .c-vietnam { background: var(--navy); }
  .c-thailand { background: var(--navy); }
  .c-cambodia { background: var(--navy); }
  .c-laos { background: var(--navy); }
  .c-korea { background: var(--navy); grid-column: span 2; aspect-ratio: 2.8 / 1; }

  @media (max-width: 1024px) {
    .countries { grid-template-columns: 1fr; }
    .c-korea { grid-column: span 1; aspect-ratio: 1.4 / 1; }
  }

  /* Why these countries */
  .why {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 80px;
    align-items: start;
  }
  .why h2 {
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.02;
    margin-bottom: 28px;
  }
  .why h2 .blue { color: var(--blue); }
  .why p {
    font-size: 17px;
    color: var(--ink-2);
    line-height: 1.65;
    margin-bottom: 16px;
    max-width: 540px;
  }
  .why-criteria {
    background: var(--paper-2);
    border-radius: var(--r-lg);
    padding: 32px;
  }
  .why-criteria h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 18px;
    color: var(--blue);
  }
  .why-criteria ul {
    list-style: none;
  }
  .why-criteria li {
    padding: 12px 0;
    border-top: 0.5px solid var(--rule);
    font-size: 14.5px;
    display: flex;
    gap: 12px;
  }
  .why-criteria li:first-child { border-top: none; padding-top: 0; }
  .why-criteria li::before { content: '↗'; color: var(--blue); font-weight: 600; }

  @media (max-width: 1024px) {
    .why { grid-template-columns: 1fr; gap: 32px; }
  #page-destinations }

/* Restored country tile imagery */
.country.c-vietnam{
  background:
    linear-gradient(180deg, rgba(10,23,58,0.30) 35%, rgba(10,23,58,0.85) 100%),
    url("img/photo-1583417319070-4a69db38a482-w1600.jpg") center/cover !important;
}
#page-destinations .country.c-thailand{
  background:
    linear-gradient(180deg, rgba(10,23,58,0.30) 35%, rgba(10,23,58,0.85) 100%),
    url("img/photo-1563492065599-3520f775eeed-w1600.jpg") center/cover !important;
}
#page-destinations .country.c-cambodia{
  background:
    linear-gradient(180deg, rgba(10,23,58,0.30) 35%, rgba(10,23,58,0.85) 100%),
    url("img/photo-1508009603885-50cf7c579365-w1600.jpg") center/cover !important;
}
#page-destinations .country.c-laos{
  background:
    linear-gradient(180deg, rgba(10,23,58,0.30) 35%, rgba(10,23,58,0.85) 100%),
    url("img/photo-1555921015-5532091f6026-w1600.jpg") center/cover !important;
}
#page-destinations .country.c-south-korea{
  background:
    linear-gradient(180deg, rgba(10,23,58,0.30) 35%, rgba(10,23,58,0.85) 100%),
    url("img/photo-1538485399081-7191377e8241-w1600.jpg") center/cover !important;
}

/* === PAGE-SPECIFIC: VIETNAM === */

.country-hero {
    padding: clamp(40px, 5vw, 64px) 0 0;
  }
  #page-vietnam .country-hero-image{
    margin-top: clamp(40px, 5vw, 64px);
    aspect-ratio: 21 / 9;
    background: var(--ink) url('img/photo-1583417319070-4a69db38a482-w2400.jpg') center/cover;
    border-radius: var(--r-lg);
    position: relative;
    overflow: hidden;
  }
  .country-hero-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 50%);
  }
  .country-hero-tag {
    position: absolute;
    bottom: 24px;
    left: 28px;
    color: var(--paper);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    z-index: 2;
  }
  .breadcrumb {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--ink-2);
    margin-bottom: 20px;
  }
  .breadcrumb a { color: var(--ink-2); transition: color 0.2s; }
  .breadcrumb a:hover { color: var(--blue); }

  /* Quick facts strip */
  .facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--rule);
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 0.5px solid var(--rule);
  }
  .fact {
    padding: 28px;
    background: var(--paper);
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .fact-label {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--blue);
    letter-spacing: 0.06em;
  }
  .fact-value {
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
  }
  .fact-detail {
    font-size: 13px;
    color: var(--ink-2);
    margin-top: 4px;
  }
  @media (max-width: 1024px) { .facts { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 600px) { .facts { grid-template-columns: 1fr; } }

  /* Cities */
  .cities {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .city {
    background: var(--paper-2);
    border-radius: var(--r-lg);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s;
  }
  .city:hover { transform: translateY(-4px); }
  .city-image {
    aspect-ratio: 4 / 3;
    background: var(--ink);
    background-size: cover;
    background-position: center;
  }
  #page-vietnam .city-1 .city-image{ background: var(--navy-deep) url('img/photo-1583417319070-4a69db38a482-w1200.jpg') center/cover; }
  #page-vietnam .city-2 .city-image{ background: var(--navy-deep) url('img/photo-1583417319070-4a69db38a482-w1200.jpg') center/cover; }
  #page-vietnam .city-3 .city-image{ background: var(--navy-deep) url('img/photo-1583417319070-4a69db38a482-w1200.jpg') center/cover; }
  .city-body { padding: 24px 26px 26px; }
  .city h4 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
  }
  .city .meta {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--blue);
    letter-spacing: 0.06em;
    margin-bottom: 10px;
  }
  .city p {
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.55;
  }
  @media (max-width: 1024px) { .cities { grid-template-columns: 1fr; } }

  /* Two column content */
  .twocol {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 64px;
    align-items: start;
  }
  .twocol-img {
    aspect-ratio: 4 / 5;
    background: var(--ink) none;
    border-radius: var(--r-lg);
  }
  .twocol h2 {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin-bottom: 20px;
  }
  .twocol h2 .blue { color: var(--blue); }
  .twocol p {
    font-size: 16px;
    color: var(--ink-2);
    line-height: 1.65;
    margin-bottom: 16px;
  }
  .twocol .info-list {
    list-style: none;
    margin-top: 28px;
    border-top: 0.5px solid var(--rule);
  }
  .twocol .info-list li {
    padding: 14px 0;
    border-bottom: 0.5px solid var(--rule);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 14.5px;
  }
  .twocol .info-list li strong { color: var(--ink); font-weight: 600; }
  .twocol .info-list li span { color: var(--ink-2); text-align: right; }
  @media (max-width: 1024px) { .twocol { grid-template-columns: 1fr; gap: 32px; } }

/* ============== CITY CARDS (editorial CSS-only) ============== */
.city-cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.city-card {
  display: grid;
  grid-template-columns: 320px 1fr;
  background: var(--paper-2);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 0.5px solid var(--rule);
}
.city-card-monogram {
  position: relative;
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--paper);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  min-height: 320px;
}
.city-card-monogram::before {
  content: attr(data-initial);
  position: absolute;
  right: -30px;
  bottom: -60px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(220px, 22vw, 320px);
  line-height: 0.85;
  letter-spacing: -0.06em;
  color: rgba(201, 169, 97, 0.16);
  pointer-events: none;
  z-index: 0;
}
.city-card-monogram .city-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: rgba(201, 169, 97, 0.85);
  text-transform: uppercase;
  position: relative;
  z-index: 2;
}
.city-card-monogram .city-coords {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(250, 250, 247, 0.7);
  position: relative;
  z-index: 2;
}
.city-card-body {
  padding: 40px clamp(28px, 3.5vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.city-card-body h3 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(36px, 4vw, 52px);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
  margin: 0;
}
.city-card-body .positioning {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 60ch;
  margin: 0;
}
.city-card-meta-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 24px;
  padding-top: 24px;
  border-top: 0.5px solid var(--rule);
}
.city-card-meta-block .label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.city-card-districts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
  font-size: 13px;
  color: var(--ink-2);
  letter-spacing: -0.005em;
}
.city-card-stat {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 32px;
  line-height: 1;
  color: var(--navy);
  margin-bottom: 4px;
}
.city-card-stat-sub {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
}
.city-card-quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.4;
  color: var(--navy);
  border-left: 2px solid var(--brass);
  padding-left: 16px;
  margin: 0;
}

@media (max-width: 880px) {
  .city-card { grid-template-columns: 1fr; }
  .city-card-monogram { min-height: 200px; padding: 32px 28px; }
  .city-card-monogram::before { font-size: 180px; right: -20px; bottom: -50px; }
  .city-card-body { padding: 32px 28px; }
  .city-card-meta-grid { grid-template-columns: 1fr; gap: 20px; }
  .city-card-districts { grid-template-columns: 1fr 1fr; }
}

/* === PAGE-SPECIFIC: THAILAND === */

.country-hero {
    padding: clamp(40px, 5vw, 64px) 0 0;
  }
  #page-thailand .country-hero-image{
    margin-top: clamp(40px, 5vw, 64px);
    aspect-ratio: 21 / 9;
    background: var(--ink) url('img/photo-1563492065599-3520f775eeed-w2400.jpg') center/cover;
    border-radius: var(--r-lg);
    position: relative;
    overflow: hidden;
  }
  .country-hero-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 50%);
  }
  .country-hero-tag {
    position: absolute;
    bottom: 24px;
    left: 28px;
    color: var(--paper);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    z-index: 2;
  }
  .breadcrumb {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--ink-2);
    margin-bottom: 20px;
  }
  .breadcrumb a { color: var(--ink-2); transition: color 0.2s; }
  .breadcrumb a:hover { color: var(--blue); }

  /* Quick facts strip */
  .facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--rule);
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 0.5px solid var(--rule);
  }
  .fact {
    padding: 28px;
    background: var(--paper);
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .fact-label {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--blue);
    letter-spacing: 0.06em;
  }
  .fact-value {
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
  }
  .fact-detail {
    font-size: 13px;
    color: var(--ink-2);
    margin-top: 4px;
  }
  @media (max-width: 1024px) { .facts { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 600px) { .facts { grid-template-columns: 1fr; } }

  /* Cities */
  .cities {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .city {
    background: var(--paper-2);
    border-radius: var(--r-lg);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s;
  }
  .city:hover { transform: translateY(-4px); }
  .city-image {
    aspect-ratio: 4 / 3;
    background: var(--ink);
    background-size: cover;
    background-position: center;
  }
  .city-1 .city-image { background: var(--navy-deep) none; }
  #page-thailand .city-2 .city-image{ background: var(--navy-deep) url('img/photo-1563492065599-3520f775eeed-w1200.jpg') center/cover; }
  #page-thailand .city-3 .city-image{ background: var(--navy-deep) url('img/photo-1563492065599-3520f775eeed-w1200.jpg') center/cover; }
  .city-body { padding: 24px 26px 26px; }
  .city h4 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
  }
  .city .meta {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--blue);
    letter-spacing: 0.06em;
    margin-bottom: 10px;
  }
  .city p {
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.55;
  }
  @media (max-width: 1024px) { .cities { grid-template-columns: 1fr; } }

  /* Two column content */
  .twocol {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 64px;
    align-items: start;
  }
  .twocol-img {
    aspect-ratio: 4 / 5;
    background: var(--ink) none;
    border-radius: var(--r-lg);
  }
  .twocol h2 {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin-bottom: 20px;
  }
  .twocol h2 .blue { color: var(--blue); }
  .twocol p {
    font-size: 16px;
    color: var(--ink-2);
    line-height: 1.65;
    margin-bottom: 16px;
  }
  .twocol .info-list {
    list-style: none;
    margin-top: 28px;
    border-top: 0.5px solid var(--rule);
  }
  .twocol .info-list li {
    padding: 14px 0;
    border-bottom: 0.5px solid var(--rule);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 14.5px;
  }
  .twocol .info-list li strong { color: var(--ink); font-weight: 600; }
  .twocol .info-list li span { color: var(--ink-2); text-align: right; }
  @media (max-width: 1024px) { .twocol { grid-template-columns: 1fr; gap: 32px; } }

/* ============== CITY CARDS (editorial CSS-only) ============== */
.city-cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.city-card {
  display: grid;
  grid-template-columns: 320px 1fr;
  background: var(--paper-2);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 0.5px solid var(--rule);
}
.city-card-monogram {
  position: relative;
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--paper);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  min-height: 320px;
}
.city-card-monogram::before {
  content: attr(data-initial);
  position: absolute;
  right: -30px;
  bottom: -60px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(220px, 22vw, 320px);
  line-height: 0.85;
  letter-spacing: -0.06em;
  color: rgba(201, 169, 97, 0.16);
  pointer-events: none;
  z-index: 0;
}
.city-card-monogram .city-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: rgba(201, 169, 97, 0.85);
  text-transform: uppercase;
  position: relative;
  z-index: 2;
}
.city-card-monogram .city-coords {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(250, 250, 247, 0.7);
  position: relative;
  z-index: 2;
}
.city-card-body {
  padding: 40px clamp(28px, 3.5vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.city-card-body h3 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(36px, 4vw, 52px);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
  margin: 0;
}
.city-card-body .positioning {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 60ch;
  margin: 0;
}
.city-card-meta-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 24px;
  padding-top: 24px;
  border-top: 0.5px solid var(--rule);
}
.city-card-meta-block .label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.city-card-districts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
  font-size: 13px;
  color: var(--ink-2);
  letter-spacing: -0.005em;
}
.city-card-stat {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 32px;
  line-height: 1;
  color: var(--navy);
  margin-bottom: 4px;
}
.city-card-stat-sub {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
}
.city-card-quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.4;
  color: var(--navy);
  border-left: 2px solid var(--brass);
  padding-left: 16px;
  margin: 0;
}

@media (max-width: 880px) {
  .city-card { grid-template-columns: 1fr; }
  .city-card-monogram { min-height: 200px; padding: 32px 28px; }
  .city-card-monogram::before { font-size: 180px; right: -20px; bottom: -50px; }
  .city-card-body { padding: 32px 28px; }
  .city-card-meta-grid { grid-template-columns: 1fr; gap: 20px; }
  .city-card-districts { grid-template-columns: 1fr 1fr; }
}

/* === PAGE-SPECIFIC: CAMBODIA === */

.country-hero {
    padding: clamp(40px, 5vw, 64px) 0 0;
  }
  #page-cambodia .country-hero-image{
    margin-top: clamp(40px, 5vw, 64px);
    aspect-ratio: 21 / 9;
    background: var(--ink) url('img/photo-1508009603885-50cf7c579365-w2400.jpg') center/cover;
    border-radius: var(--r-lg);
    position: relative;
    overflow: hidden;
  }
  .country-hero-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 50%);
  }
  .country-hero-tag {
    position: absolute;
    bottom: 24px;
    left: 28px;
    color: var(--paper);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    z-index: 2;
  }
  .breadcrumb {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--ink-2);
    margin-bottom: 20px;
  }
  .breadcrumb a { color: var(--ink-2); transition: color 0.2s; }
  .breadcrumb a:hover { color: var(--blue); }

  /* Quick facts strip */
  .facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--rule);
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 0.5px solid var(--rule);
  }
  .fact {
    padding: 28px;
    background: var(--paper);
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .fact-label {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--blue);
    letter-spacing: 0.06em;
  }
  .fact-value {
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
  }
  .fact-detail {
    font-size: 13px;
    color: var(--ink-2);
    margin-top: 4px;
  }
  @media (max-width: 1024px) { .facts { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 600px) { .facts { grid-template-columns: 1fr; } }

  /* Cities */
  .cities {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .city {
    background: var(--paper-2);
    border-radius: var(--r-lg);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s;
  }
  .city:hover { transform: translateY(-4px); }
  .city-image {
    aspect-ratio: 4 / 3;
    background: var(--ink);
    background-size: cover;
    background-position: center;
  }
  .city-1 .city-image { background: var(--navy-deep) none; }
  #page-cambodia .city-2 .city-image{ background: var(--navy-deep) url('img/photo-1508009603885-50cf7c579365-w1200.jpg') center/cover; }
  .city-3 .city-image { background: var(--navy-deep) none; }
  .city-body { padding: 24px 26px 26px; }
  .city h4 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
  }
  .city .meta {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--blue);
    letter-spacing: 0.06em;
    margin-bottom: 10px;
  }
  .city p {
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.55;
  }
  @media (max-width: 1024px) { .cities { grid-template-columns: 1fr; } }

  /* Two column content */
  .twocol {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 64px;
    align-items: start;
  }
  .twocol-img {
    aspect-ratio: 4 / 5;
    background: var(--ink) none;
    border-radius: var(--r-lg);
  }
  .twocol h2 {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin-bottom: 20px;
  }
  .twocol h2 .blue { color: var(--blue); }
  .twocol p {
    font-size: 16px;
    color: var(--ink-2);
    line-height: 1.65;
    margin-bottom: 16px;
  }
  .twocol .info-list {
    list-style: none;
    margin-top: 28px;
    border-top: 0.5px solid var(--rule);
  }
  .twocol .info-list li {
    padding: 14px 0;
    border-bottom: 0.5px solid var(--rule);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 14.5px;
  }
  .twocol .info-list li strong { color: var(--ink); font-weight: 600; }
  .twocol .info-list li span { color: var(--ink-2); text-align: right; }
  @media (max-width: 1024px) { .twocol { grid-template-columns: 1fr; gap: 32px; } }

/* ============== CITY CARDS (editorial CSS-only) ============== */
.city-cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.city-card {
  display: grid;
  grid-template-columns: 320px 1fr;
  background: var(--paper-2);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 0.5px solid var(--rule);
}
.city-card-monogram {
  position: relative;
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--paper);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  min-height: 320px;
}
.city-card-monogram::before {
  content: attr(data-initial);
  position: absolute;
  right: -30px;
  bottom: -60px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(220px, 22vw, 320px);
  line-height: 0.85;
  letter-spacing: -0.06em;
  color: rgba(201, 169, 97, 0.16);
  pointer-events: none;
  z-index: 0;
}
.city-card-monogram .city-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: rgba(201, 169, 97, 0.85);
  text-transform: uppercase;
  position: relative;
  z-index: 2;
}
.city-card-monogram .city-coords {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(250, 250, 247, 0.7);
  position: relative;
  z-index: 2;
}
.city-card-body {
  padding: 40px clamp(28px, 3.5vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.city-card-body h3 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(36px, 4vw, 52px);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
  margin: 0;
}
.city-card-body .positioning {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 60ch;
  margin: 0;
}
.city-card-meta-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 24px;
  padding-top: 24px;
  border-top: 0.5px solid var(--rule);
}
.city-card-meta-block .label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.city-card-districts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
  font-size: 13px;
  color: var(--ink-2);
  letter-spacing: -0.005em;
}
.city-card-stat {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 32px;
  line-height: 1;
  color: var(--navy);
  margin-bottom: 4px;
}
.city-card-stat-sub {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
}
.city-card-quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.4;
  color: var(--navy);
  border-left: 2px solid var(--brass);
  padding-left: 16px;
  margin: 0;
}

@media (max-width: 880px) {
  .city-card { grid-template-columns: 1fr; }
  .city-card-monogram { min-height: 200px; padding: 32px 28px; }
  .city-card-monogram::before { font-size: 180px; right: -20px; bottom: -50px; }
  .city-card-body { padding: 32px 28px; }
  .city-card-meta-grid { grid-template-columns: 1fr; gap: 20px; }
  .city-card-districts { grid-template-columns: 1fr 1fr; }
}

/* === PAGE-SPECIFIC: LAOS === */

.country-hero {
    padding: clamp(40px, 5vw, 64px) 0 0;
  }
  #page-laos .country-hero-image{
    margin-top: clamp(40px, 5vw, 64px);
    aspect-ratio: 21 / 9;
    background: var(--ink) url('img/photo-1555921015-5532091f6026-w2400.jpg') center/cover;
    border-radius: var(--r-lg);
    position: relative;
    overflow: hidden;
  }
  .country-hero-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 50%);
  }
  .country-hero-tag {
    position: absolute;
    bottom: 24px;
    left: 28px;
    color: var(--paper);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    z-index: 2;
  }
  .breadcrumb {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--ink-2);
    margin-bottom: 20px;
  }
  .breadcrumb a { color: var(--ink-2); transition: color 0.2s; }
  .breadcrumb a:hover { color: var(--blue); }

  /* Quick facts strip */
  .facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--rule);
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 0.5px solid var(--rule);
  }
  .fact {
    padding: 28px;
    background: var(--paper);
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .fact-label {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--blue);
    letter-spacing: 0.06em;
  }
  .fact-value {
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
  }
  .fact-detail {
    font-size: 13px;
    color: var(--ink-2);
    margin-top: 4px;
  }
  @media (max-width: 1024px) { .facts { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 600px) { .facts { grid-template-columns: 1fr; } }

  /* Cities */
  .cities {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .city {
    background: var(--paper-2);
    border-radius: var(--r-lg);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s;
  }
  .city:hover { transform: translateY(-4px); }
  .city-image {
    aspect-ratio: 4 / 3;
    background: var(--ink);
    background-size: cover;
    background-position: center;
  }
  #page-laos .city-1 .city-image{ background: var(--navy-deep) url('img/photo-1555921015-5532091f6026-w1200.jpg') center/cover; }
  #page-laos .city-2 .city-image{ background: var(--navy-deep) url('img/photo-1555921015-5532091f6026-w1200.jpg') center/cover; }
  .city-3 .city-image { background: var(--navy-deep) none; }
  .city-body { padding: 24px 26px 26px; }
  .city h4 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
  }
  .city .meta {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--blue);
    letter-spacing: 0.06em;
    margin-bottom: 10px;
  }
  .city p {
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.55;
  }
  @media (max-width: 1024px) { .cities { grid-template-columns: 1fr; } }

  /* Two column content */
  .twocol {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 64px;
    align-items: start;
  }
  #page-laos .twocol-img{
    aspect-ratio: 4 / 5;
    background: var(--ink) url('img/photo-1555921015-5532091f6026-w1200.jpg') center/cover;
    border-radius: var(--r-lg);
  }
  .twocol h2 {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin-bottom: 20px;
  }
  .twocol h2 .blue { color: var(--blue); }
  .twocol p {
    font-size: 16px;
    color: var(--ink-2);
    line-height: 1.65;
    margin-bottom: 16px;
  }
  .twocol .info-list {
    list-style: none;
    margin-top: 28px;
    border-top: 0.5px solid var(--rule);
  }
  .twocol .info-list li {
    padding: 14px 0;
    border-bottom: 0.5px solid var(--rule);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 14.5px;
  }
  .twocol .info-list li strong { color: var(--ink); font-weight: 600; }
  .twocol .info-list li span { color: var(--ink-2); text-align: right; }
  @media (max-width: 1024px) { .twocol { grid-template-columns: 1fr; gap: 32px; } }

/* ============== CITY CARDS (editorial CSS-only) ============== */
.city-cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.city-card {
  display: grid;
  grid-template-columns: 320px 1fr;
  background: var(--paper-2);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 0.5px solid var(--rule);
}
.city-card-monogram {
  position: relative;
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--paper);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  min-height: 320px;
}
.city-card-monogram::before {
  content: attr(data-initial);
  position: absolute;
  right: -30px;
  bottom: -60px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(220px, 22vw, 320px);
  line-height: 0.85;
  letter-spacing: -0.06em;
  color: rgba(201, 169, 97, 0.16);
  pointer-events: none;
  z-index: 0;
}
.city-card-monogram .city-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: rgba(201, 169, 97, 0.85);
  text-transform: uppercase;
  position: relative;
  z-index: 2;
}
.city-card-monogram .city-coords {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(250, 250, 247, 0.7);
  position: relative;
  z-index: 2;
}
.city-card-body {
  padding: 40px clamp(28px, 3.5vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.city-card-body h3 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(36px, 4vw, 52px);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
  margin: 0;
}
.city-card-body .positioning {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 60ch;
  margin: 0;
}
.city-card-meta-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 24px;
  padding-top: 24px;
  border-top: 0.5px solid var(--rule);
}
.city-card-meta-block .label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.city-card-districts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
  font-size: 13px;
  color: var(--ink-2);
  letter-spacing: -0.005em;
}
.city-card-stat {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 32px;
  line-height: 1;
  color: var(--navy);
  margin-bottom: 4px;
}
.city-card-stat-sub {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
}
.city-card-quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.4;
  color: var(--navy);
  border-left: 2px solid var(--brass);
  padding-left: 16px;
  margin: 0;
}

@media (max-width: 880px) {
  .city-card { grid-template-columns: 1fr; }
  .city-card-monogram { min-height: 200px; padding: 32px 28px; }
  .city-card-monogram::before { font-size: 180px; right: -20px; bottom: -50px; }
  .city-card-body { padding: 32px 28px; }
  .city-card-meta-grid { grid-template-columns: 1fr; gap: 20px; }
  .city-card-districts { grid-template-columns: 1fr 1fr; }
}

/* === PAGE-SPECIFIC: SOUTH-KOREA === */

.country-hero {
    padding: clamp(40px, 5vw, 64px) 0 0;
  }
  #page-south-korea .country-hero-image{
    margin-top: clamp(40px, 5vw, 64px);
    aspect-ratio: 21 / 9;
    background: var(--ink) url('img/photo-1538485399081-7191377e8241-w2400.jpg') center/cover;
    border-radius: var(--r-lg);
    position: relative;
    overflow: hidden;
  }
  .country-hero-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 50%);
  }
  .country-hero-tag {
    position: absolute;
    bottom: 24px;
    left: 28px;
    color: var(--paper);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    z-index: 2;
  }
  .breadcrumb {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--ink-2);
    margin-bottom: 20px;
  }
  .breadcrumb a { color: var(--ink-2); transition: color 0.2s; }
  .breadcrumb a:hover { color: var(--blue); }

  /* Quick facts strip */
  .facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--rule);
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 0.5px solid var(--rule);
  }
  .fact {
    padding: 28px;
    background: var(--paper);
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .fact-label {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--blue);
    letter-spacing: 0.06em;
  }
  .fact-value {
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
  }
  .fact-detail {
    font-size: 13px;
    color: var(--ink-2);
    margin-top: 4px;
  }
  @media (max-width: 1024px) { .facts { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 600px) { .facts { grid-template-columns: 1fr; } }

  /* Cities */
  .cities {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .city {
    background: var(--paper-2);
    border-radius: var(--r-lg);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s;
  }
  .city:hover { transform: translateY(-4px); }
  .city-image {
    aspect-ratio: 4 / 3;
    background: var(--ink);
    background-size: cover;
    background-position: center;
  }
  #page-south-korea .city-1 .city-image{ background: var(--navy-deep) url('img/photo-1538485399081-7191377e8241-w1200.jpg') center/cover; }
  #page-south-korea .city-2 .city-image{ background: var(--navy-deep) url('img/photo-1538485399081-7191377e8241-w1200.jpg') center/cover; }
  #page-south-korea .city-3 .city-image{ background: var(--navy-deep) url('img/photo-1538485399081-7191377e8241-w1200.jpg') center/cover; }
  .city-body { padding: 24px 26px 26px; }
  .city h4 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
  }
  .city .meta {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--blue);
    letter-spacing: 0.06em;
    margin-bottom: 10px;
  }
  .city p {
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.55;
  }
  @media (max-width: 1024px) { .cities { grid-template-columns: 1fr; } }

  /* Two column content */
  .twocol {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 64px;
    align-items: start;
  }
  #page-south-korea .twocol-img{
    aspect-ratio: 4 / 5;
    background: var(--ink) url('img/photo-1538485399081-7191377e8241-w1200.jpg') center/cover;
    border-radius: var(--r-lg);
  }
  .twocol h2 {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin-bottom: 20px;
  }
  .twocol h2 .blue { color: var(--blue); }
  .twocol p {
    font-size: 16px;
    color: var(--ink-2);
    line-height: 1.65;
    margin-bottom: 16px;
  }
  .twocol .info-list {
    list-style: none;
    margin-top: 28px;
    border-top: 0.5px solid var(--rule);
  }
  .twocol .info-list li {
    padding: 14px 0;
    border-bottom: 0.5px solid var(--rule);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 14.5px;
  }
  .twocol .info-list li strong { color: var(--ink); font-weight: 600; }
  .twocol .info-list li span { color: var(--ink-2); text-align: right; }
  @media (max-width: 1024px) { .twocol { grid-template-columns: 1fr; gap: 32px; } }

/* ============== CITY CARDS (editorial CSS-only) ============== */
.city-cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.city-card {
  display: grid;
  grid-template-columns: 320px 1fr;
  background: var(--paper-2);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 0.5px solid var(--rule);
}
.city-card-monogram {
  position: relative;
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--paper);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  min-height: 320px;
}
.city-card-monogram::before {
  content: attr(data-initial);
  position: absolute;
  right: -30px;
  bottom: -60px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(220px, 22vw, 320px);
  line-height: 0.85;
  letter-spacing: -0.06em;
  color: rgba(201, 169, 97, 0.16);
  pointer-events: none;
  z-index: 0;
}
.city-card-monogram .city-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: rgba(201, 169, 97, 0.85);
  text-transform: uppercase;
  position: relative;
  z-index: 2;
}
.city-card-monogram .city-coords {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(250, 250, 247, 0.7);
  position: relative;
  z-index: 2;
}
.city-card-body {
  padding: 40px clamp(28px, 3.5vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.city-card-body h3 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(36px, 4vw, 52px);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
  margin: 0;
}
.city-card-body .positioning {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 60ch;
  margin: 0;
}
.city-card-meta-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 24px;
  padding-top: 24px;
  border-top: 0.5px solid var(--rule);
}
.city-card-meta-block .label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.city-card-districts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
  font-size: 13px;
  color: var(--ink-2);
  letter-spacing: -0.005em;
}
.city-card-stat {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 32px;
  line-height: 1;
  color: var(--navy);
  margin-bottom: 4px;
}
.city-card-stat-sub {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
}
.city-card-quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.4;
  color: var(--navy);
  border-left: 2px solid var(--brass);
  padding-left: 16px;
  margin: 0;
}

@media (max-width: 880px) {
  .city-card { grid-template-columns: 1fr; }
  .city-card-monogram { min-height: 200px; padding: 32px 28px; }
  .city-card-monogram::before { font-size: 180px; right: -20px; bottom: -50px; }
  .city-card-body { padding: 32px 28px; }
  .city-card-meta-grid { grid-template-columns: 1fr; gap: 20px; }
  .city-card-districts { grid-template-columns: 1fr 1fr; }
}

/* === PAGE-SPECIFIC: PLATFORM === */

/* ============== PLATFORM PAGE ============== */
  .pf-hero {
    padding: clamp(32px, 4vw, 56px) 0 clamp(48px, 6vw, 80px);
  }
  .pf-hero h1 { max-width: 1100px; }
  .pf-hero-eyebrow { display: inline-flex; gap: 14px; align-items: center; }

  /* ============== PORTAL MOCKUP — institutional palette ============== */
  .pf-portal-frame {
    margin-top: clamp(40px, 5vw, 64px);
    background: var(--paper-2);
    border-radius: 12px;
    padding: clamp(20px, 3vw, 32px);
    box-shadow: 0 30px 80px rgba(10, 31, 68, 0.18), 0 8px 24px rgba(10, 31, 68, 0.06);
    border: 0.5px solid var(--rule);
    position: relative;
    overflow: hidden;
  }
  .pf-portal-window-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px 18px;
    border-bottom: 0.5px solid var(--rule);
    margin-bottom: 18px;
  }
  .pf-portal-dot {
    width: 11px; height: 11px;
    border-radius: 50%;
    background: rgba(24,25,27,0.18);
  }
  .pf-portal-dot.r { background: #FF5F57; }
  .pf-portal-dot.y { background: #FFBD2E; }
  .pf-portal-dot.g { background: #28CA42; }
  .pf-portal-window-title {
    margin-left: 14px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.06em;
  }

  .pf-portal-app {
    background: var(--paper);
    border: 0.5px solid var(--rule);
    border-radius: 8px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 540px;
    color: var(--ink);
  }

  /* Sidebar — navy ground, mirrors the institutional logo */
  .pf-portal-side {
    background: var(--navy);
    border-right: 0.5px solid rgba(255,255,255,0.06);
    padding: 24px 0;
    color: rgba(250, 250, 247, 0.85);
  }
  .pf-portal-brand {
    padding: 0 22px 24px;
    border-bottom: 0.5px solid rgba(255,255,255,0.10);
    margin-bottom: 18px;
  }
  .pf-portal-brand-mark {
    display: inline-flex;
    align-items: stretch;
    background: var(--navy-deep);
    color: #fff;
    height: 32px;
    overflow: hidden;
  }
  .pf-portal-brand-mark .m {
    background: rgba(0,0,0,0.25);
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
  }
  .pf-portal-brand-mark .t {
    padding: 0 13px;
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
  }
  .pf-portal-side-title {
    padding: 0 22px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    color: rgba(250, 250, 247, 0.45);
    text-transform: uppercase;
    margin-bottom: 12px;
  }
  .pf-portal-side ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .pf-portal-side li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 22px;
    font-size: 13.5px;
    color: rgba(250, 250, 247, 0.7);
    transition: background 0.15s, color 0.15s;
    border-left: 2px solid transparent;
  }
  .pf-portal-side li a:hover {
    color: var(--paper);
    background: rgba(255,255,255,0.06);
  }
  .pf-portal-side li a.active {
    color: var(--paper);
    background: rgba(255,255,255,0.10);
    border-left-color: var(--brass);
    font-weight: 500;
  }
  .pf-portal-side li a .bdg {
    background: var(--brass);
    color: var(--navy-deep);
    font-size: 10px;
    font-family: var(--mono);
    padding: 1px 7px;
    border-radius: 8px;
    font-weight: 700;
  }
  .pf-portal-side-divider {
    margin: 20px 22px;
    height: 0.5px;
    background: rgba(255,255,255,0.10);
  }
  .pf-portal-user {
    padding: 0 22px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .pf-portal-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--brass);
    color: var(--navy-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
  }
  .pf-portal-user-meta { font-size: 12px; line-height: 1.3; }
  .pf-portal-user-meta strong { display: block; color: var(--paper); font-weight: 500; }
  .pf-portal-user-meta span { color: rgba(250, 250, 247, 0.5); }

  /* Main panel — light, on-brand */
  .pf-portal-main {
    padding: 28px 36px 32px;
    background: var(--paper);
  }
  .pf-portal-greet {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 22px;
    gap: 16px;
    flex-wrap: wrap;
  }
  .pf-portal-greet h4 {
    font-family: var(--serif);
    font-size: 28px;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 4px;
  }
  .pf-portal-greet h4 em {
    font-style: italic;
    color: var(--navy);
  }
  .pf-portal-greet p {
    font-size: 12px;
    color: var(--ink-3);
    font-family: var(--mono);
    letter-spacing: 0.06em;
  }

  /* Action banner — brass on stone, institutional warning */
  .pf-portal-action {
    background: rgba(201, 169, 97, 0.12);
    border: 0.5px solid rgba(201, 169, 97, 0.55);
    border-left: 3px solid var(--brass);
    border-radius: 4px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
    font-size: 13.5px;
  }
  .pf-portal-action strong {
    color: #8B6F2A;
    font-weight: 600;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    margin-right: 12px;
    text-transform: uppercase;
  }
  .pf-portal-action span { color: var(--ink); }
  .pf-portal-action a {
    color: #8B6F2A;
    font-weight: 600;
    font-size: 12.5px;
    white-space: nowrap;
  }

  /* Stats — stone surface cards */
  .pf-portal-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 28px;
  }
  .pf-portal-stat {
    background: var(--paper-2);
    border: 0.5px solid var(--rule);
    border-radius: 4px;
    padding: 18px 20px;
  }
  .pf-portal-stat-figure {
    font-family: var(--serif);
    font-size: 32px;
    font-weight: 400;
    color: var(--ink);
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
  }
  .pf-portal-stat-figure em {
    color: var(--navy);
    font-style: italic;
  }
  .pf-portal-stat-label {
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--ink-2);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  /* Pipeline — institutional sequence */
  .pf-portal-pipeline-title {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--navy);
    text-transform: uppercase;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .pf-portal-pipeline-title::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--navy);
  }
  .pf-portal-pipeline {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-bottom: 24px;
  }
  .pf-pipe-step {
    background: var(--paper-2);
    border: 0.5px solid var(--rule);
    border-radius: 4px;
    padding: 14px 10px;
    text-align: center;
    font-size: 11.5px;
    color: var(--ink-2);
    line-height: 1.3;
  }
  .pf-pipe-step .n {
    display: block;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-3);
    margin-bottom: 4px;
  }
  /* Completed steps: navy filled */
  .pf-pipe-step.done {
    background: var(--navy);
    border-color: var(--navy);
    color: var(--paper);
  }
  .pf-pipe-step.done .n { color: rgba(250, 250, 247, 0.7); }
  /* Current step: stone bg, brass top accent */
  .pf-pipe-step.current {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--navy);
    border-top: 3px solid var(--brass);
    padding-top: 12px;
    font-weight: 600;
  }
  .pf-pipe-step.current .n { color: var(--navy); font-weight: 600; }

  /* Match score card — institutional treatment */
  .pf-portal-match {
    background: var(--navy);
    color: var(--paper);
    border-radius: 4px;
    padding: 22px 24px;
  }
  .pf-portal-match-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 0.5px solid rgba(255,255,255,0.18);
  }
  .pf-portal-match-head .l {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: rgba(250, 250, 247, 0.65);
    text-transform: uppercase;
  }
  .pf-portal-match-head .score {
    font-family: var(--serif);
    font-size: 28px;
    font-weight: 400;
    color: var(--paper);
    letter-spacing: -0.02em;
  }
  .pf-portal-match-head .score em {
    color: var(--brass);
    font-style: italic;
    font-size: 1.15em;
  }
  .pf-portal-match p {
    font-size: 13px;
    color: rgba(250, 250, 247, 0.85);
    line-height: 1.55;
  }
  .pf-portal-match p strong {
    color: var(--paper);
    font-weight: 500;
  }

  @media (max-width: 900px) {
    .pf-portal-app { grid-template-columns: 1fr; min-height: auto; }
    .pf-portal-side {
      display: flex;
      flex-direction: row;
      overflow-x: auto;
      padding: 14px;
      border-right: none;
      border-bottom: 0.5px solid rgba(255,255,255,0.10);
    }
    .pf-portal-brand, .pf-portal-side-title, .pf-portal-side-divider, .pf-portal-user { display: none; }
    .pf-portal-side ul { display: flex; gap: 4px; }
    .pf-portal-side li a { padding: 8px 14px; white-space: nowrap; border-radius: 4px; border-left: none; }
    .pf-portal-stats { grid-template-columns: 1fr; }
    .pf-portal-pipeline { grid-template-columns: repeat(4, 1fr); }
    .pf-pipe-step:nth-child(n+5) { display: none; }
  }

  
  /* ============== PLATFORM INTRO (bridge before mockup) ============== */
  .pf-intro {
    padding: clamp(80px, 10vw, 140px) 0 clamp(40px, 5vw, 80px);
    background: var(--paper-2);
    border-bottom: 0.5px solid var(--rule);
  }
  .pf-intro-grid {
    display: grid;
    grid-template-columns: 0.55fr 1fr;
    gap: clamp(40px, 6vw, 100px);
    align-items: start;
  }
  .pf-intro h2 {
    font-family: var(--serif);
    font-size: clamp(36px, 4.5vw, 56px);
    font-weight: 400;
    letter-spacing: -0.025em;
    line-height: 1.05;
    color: var(--ink);
    margin-top: 16px;
  }
  .pf-intro h2 em {
    font-style: italic;
    color: var(--navy);
  }
  .pf-intro-body p {
    font-family: var(--serif);
    font-size: clamp(18px, 1.5vw, 22px);
    line-height: 1.55;
    color: var(--ink);
    font-weight: 400;
    margin-bottom: 1.4em;
  }
  .pf-intro-body p:first-child::first-letter {
    font-family: var(--serif);
    font-size: 4.4em;
    font-weight: 400;
    float: left;
    line-height: 0.85;
    margin: 0.05em 0.12em -0.05em -0.04em;
    color: var(--navy);
    font-style: italic;
  }
  .pf-intro-body em {
    font-style: italic;
    color: var(--navy);
  }
  .pf-intro-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: clamp(48px, 6vw, 72px);
    padding-top: clamp(40px, 5vw, 56px);
    border-top: 0.5px solid var(--rule);
  }
  .pf-intro-fact .num {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--navy);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .pf-intro-fact .figure {
    font-family: var(--serif);
    font-size: clamp(32px, 3.6vw, 44px);
    font-weight: 400;
    letter-spacing: -0.025em;
    line-height: 1;
    color: var(--ink);
    margin-bottom: 6px;
  }
  .pf-intro-fact .figure em {
    font-style: italic;
    color: var(--navy);
  }
  .pf-intro-fact .label {
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.5;
  }
  @media (max-width: 1024px) {
    .pf-intro-grid { grid-template-columns: 1fr; gap: 24px; }
    .pf-intro-meta { grid-template-columns: 1fr; gap: 24px; }
  }

  /* ============== APPLICATION PROGRESS STRIP ============== */
  /* Sits inside the portal-frame at the top — mirrors the original 5-step pattern */
  .pf-app-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    background: var(--navy);
    padding: 18px clamp(20px, 3vw, 32px);
    border-radius: 6px 6px 0 0;
    margin: -32px -32px 18px;
    border-bottom: 0.5px solid rgba(255,255,255,0.10);
  }
  @media (max-width: 1024px) {
    .pf-app-steps {
      margin: -20px -20px 14px;
      padding: 14px 16px;
    }
  }
  .pf-app-step {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(250,250,247,0.45);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    transition: color 0.3s;
    padding: 4px 6px;
    position: relative;
  }
  .pf-app-step .pf-app-step-num {
    font-family: var(--serif);
    font-style: italic;
    font-size: 18px;
    font-weight: 400;
    color: rgba(250,250,247,0.55);
    letter-spacing: -0.02em;
    line-height: 1;
  }
  .pf-app-step.active {
    color: var(--paper);
  }
  .pf-app-step.active .pf-app-step-num {
    color: var(--brass);
  }
  .pf-app-step.complete {
    color: rgba(250,250,247,0.7);
  }
  .pf-app-step.complete .pf-app-step-num {
    color: rgba(250,250,247,0.7);
  }
  .pf-app-step.complete .pf-app-step-num::after {
    content: ' ✓';
    color: rgba(250,250,247,0.5);
    font-style: normal;
    font-size: 0.7em;
    margin-left: 2px;
  }
  /* Active step gets a brass underline */
  .pf-app-step.active::after {
    content: '';
    position: absolute;
    bottom: -19px;
    left: 6px;
    right: 6px;
    height: 2px;
    background: var(--brass);
  }
  @media (max-width: 768px) {
    .pf-app-steps { grid-template-columns: repeat(5, 1fr); gap: 0; padding: 12px 8px; }
    .pf-app-step { font-size: 9px; gap: 4px; padding: 4px 2px; flex-direction: column; align-items: flex-start; }
    .pf-app-step .pf-app-step-num { font-size: 13px; }
    .pf-app-step.active::after { bottom: -13px; }
  }

  /* ============== FEATURE CARDS ============== */
  .pf-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .pf-feat {
    background: var(--paper-2);
    border: 0.5px solid var(--rule);
    border-radius: var(--r-lg);
    padding: 36px 36px 40px;
    transition: transform 0.3s, background 0.3s;
  }
  .pf-feat:hover { background: var(--paper-3); transform: translateY(-3px); }
  .pf-feat-num {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--navy);
    letter-spacing: 0.16em;
    margin-bottom: 18px;
    font-weight: 600;
  }
  .pf-feat h3 {
    font-family: var(--serif);
    font-size: 28px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 14px;
  }
  .pf-feat h3 em { font-style: italic; color: var(--navy); }
  .pf-feat p {
    font-size: 15px;
    color: var(--ink-2);
    line-height: 1.6;
    margin-bottom: 20px;
  }
  .pf-feat ul {
    list-style: none;
    padding: 0;
    border-top: 0.5px solid var(--rule);
  }
  .pf-feat li {
    padding: 12px 0;
    border-bottom: 0.5px solid var(--rule);
    font-size: 13.5px;
    color: var(--ink);
    display: flex;
    align-items: baseline;
    gap: 12px;
  }
  .pf-feat li::before {
    content: '—';
    color: var(--navy);
    font-weight: 400;
  }
  @media (max-width: 768px) { .pf-features { grid-template-columns: 1fr; } }

  /* ============== AUDIENCE SPLIT ============== */
  .pf-audience {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--rule);
    border: 0.5px solid var(--rule);
    border-radius: var(--r-lg);
    overflow: hidden;
  }
  .pf-aud {
    background: var(--paper);
    padding: 48px 44px;
  }
  .pf-aud-tag {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--navy);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 14px;
  }
  .pf-aud h3 {
    font-family: var(--serif);
    font-size: 30px;
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
  }
  .pf-aud h3 em { font-style: italic; color: var(--navy); }
  .pf-aud p {
    font-size: 15px;
    color: var(--ink-2);
    line-height: 1.6;
    margin-bottom: 20px;
  }
  @media (max-width: 768px) { .pf-audience { grid-template-columns: 1fr; } }

/* === PAGE-SPECIFIC: LIFE-ABROAD === */

/* ============== LIFE-ABROAD PAGE ============== */
  .life-hero {
    padding: clamp(40px, 5vw, 64px) 0 0;
  }
  .life-hero-image {
    margin-top: clamp(40px, 5vw, 64px);
    aspect-ratio: 21 / 9;
    background: var(--ink) none;
    border-radius: var(--r-lg);
    position: relative;
    overflow: hidden;
  }
  .life-hero-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(10,31,68,0.45) 100%);
  }
  .life-hero-tag {
    position: absolute;
    bottom: 26px;
    left: 28px;
    color: var(--paper);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .life-hero-tag::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--paper);
  }

  /* What life looks like — 3 column intro */
  .life-intro {
    display: grid;
    grid-template-columns: 0.6fr 1.4fr;
    gap: clamp(40px, 6vw, 100px);
    align-items: start;
  }
  .life-intro h2 {
    font-family: var(--serif);
    font-size: clamp(36px, 4.5vw, 56px);
    font-weight: 400;
    letter-spacing: -0.025em;
    line-height: 1.05;
    position: sticky;
    top: 100px;
  }
  .life-intro h2 em { color: var(--navy); font-style: italic; }
  .life-intro .body p {
    font-family: var(--serif);
    font-size: clamp(18px, 1.5vw, 22px);
    line-height: 1.55;
    color: var(--ink);
    font-weight: 400;
    margin-bottom: 1.4em;
  }
  .life-intro .body p:first-child::first-letter {
    font-family: var(--serif);
    font-size: 4.4em;
    font-weight: 400;
    float: left;
    line-height: 0.85;
    margin: 0.05em 0.12em -0.05em -0.04em;
    color: var(--navy);
    font-style: italic;
  }
  .life-intro .body em { font-style: italic; color: var(--navy); }
  @media (max-width: 1024px) {
    .life-intro { grid-template-columns: 1fr; gap: 24px; }
    .life-intro h2 { position: static; }
  }

  /* The numbers strip — what life actually costs */
  .cost {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--rule);
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 0.5px solid var(--rule);
  }
  .cost-item {
    background: var(--paper);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .cost-label {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--navy);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .cost-figure {
    font-family: var(--serif);
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 400;
    letter-spacing: -0.025em;
    line-height: 1;
    color: var(--ink);
  }
  .cost-figure em { font-style: italic; color: var(--navy); font-weight: 400; }
  .cost-detail {
    font-size: 13.5px;
    color: var(--ink-2);
    line-height: 1.55;
  }
  @media (max-width: 1024px) { .cost { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 600px) { .cost { grid-template-columns: 1fr; } }

  /* The week — 7 day timeline */
  .week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
  }
  .day {
    background: var(--paper-2);
    border: 0.5px solid var(--rule);
    border-radius: var(--r);
    padding: 24px 22px;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s, background 0.3s;
  }
  .day:hover { background: var(--paper-3); transform: translateY(-3px); }
  .day-name {
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--navy);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 14px;
  }
  .day h4 {
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.015em;
    margin-bottom: 10px;
  }
  .day p {
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.55;
    margin-top: auto;
  }
  .day.weekend { background: var(--navy); color: var(--paper); border-color: var(--navy); }
  .day.weekend:hover { background: var(--navy-deep); }
  .day.weekend .day-name { color: rgba(250,250,247,0.65); }
  .day.weekend p { color: rgba(250,250,247,0.85); }

  @media (max-width: 1024px) {
    .week { grid-template-columns: 1fr 1fr; }
    .day { min-height: auto; }
  }

  /* Travel grid — weekend trips */
  .travel-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 280px 280px;
    gap: 12px;
  }
  .trip {
    border-radius: var(--r-lg);
    overflow: hidden;
    position: relative;
    background: var(--ink);
    background-size: cover;
    background-position: center;
    cursor: pointer;
    transition: transform 0.3s;
  }
  .trip:hover { transform: translateY(-4px); }
  .trip::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.78) 100%);
  }
  .trip-content {
    position: absolute;
    bottom: 22px;
    left: 24px;
    right: 24px;
    color: var(--paper);
    z-index: 2;
  }
  .trip-meta {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    opacity: 0.78;
    margin-bottom: 8px;
    text-transform: uppercase;
  }
  .trip h4 {
    font-family: var(--serif);
    font-size: 24px;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.1;
  }
  .trip-large { grid-column: span 1; grid-row: span 2; }
  .t-1 { background: var(--navy-deep) none; }
  .t-2 { background: var(--navy-deep) none; }
  .t-3 { background: var(--navy-deep) none; }
  .t-4 { background: var(--navy-deep) none; }
  .t-5 { background: var(--navy-deep) none; }
  @media (max-width: 1024px) {
    .travel-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
    .trip-large { grid-row: span 1; aspect-ratio: 1.4 / 1; }
    .trip { aspect-ratio: 1.4 / 1; }
  }

  /* Big editorial quote */
  .editorial-quote {
    padding: clamp(60px, 8vw, 120px) 0;
    background: var(--paper-2);
    border-top: 0.5px solid var(--rule);
    border-bottom: 0.5px solid var(--rule);
  }
  .quote-grid {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: clamp(48px, 6vw, 96px);
    align-items: center;
  }
  .quote-image {
    aspect-ratio: 4 / 5;
    background: var(--ink) none;
    border-radius: var(--r-lg);
  }
  .quote-mark {
    font-family: var(--serif);
    font-style: italic;
    font-size: 88px;
    font-weight: 400;
    color: var(--navy);
    line-height: 0.6;
    margin-bottom: 14px;
  }
  blockquote {
    font-family: var(--serif);
    font-size: clamp(24px, 2.8vw, 38px);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 32px;
  }
  blockquote em { font-style: italic; color: var(--navy); }
  .quote-attr {
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--ink-2);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .quote-attr strong { color: var(--ink); display: block; margin-bottom: 4px; font-weight: 600; }
  @media (max-width: 1024px) { .quote-grid { grid-template-columns: 1fr; } }

  /* Honest list — what's hard */
  .honest {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: clamp(40px, 5vw, 80px);
    align-items: start;
  }
  .honest-list {
    list-style: none;
    border-top: 0.5px solid var(--rule);
  }
  .honest-list li {
    padding: 22px 0;
    border-bottom: 0.5px solid var(--rule);
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 24px;
    align-items: baseline;
  }
  .honest-list .num {
    font-family: var(--serif);
    font-style: italic;
    font-size: 22px;
    color: var(--navy);
  }
  .honest-list h4 {
    font-family: var(--serif);
    font-size: 19px;
    font-weight: 400;
    letter-spacing: -0.015em;
    margin-bottom: 6px;
  }
  .honest-list p {
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.55;
  }
  @media (max-width: 1024px) { .honest { grid-template-columns: 1fr; } }

/* life-hero hero image */
.hero.life-hero { position: relative; }
#page-life-abroad .hero.life-hero::before{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(250,250,247,0.92) 0%, rgba(250,250,247,0.55) 60%, rgba(250,250,247,0.95) 100%),
              url("img/photo-1528127269322-539801943592-w2400.jpg") center/cover;
  z-index: 0;
  opacity: 0.65;
}
.hero.life-hero .container { position: relative; z-index: 2; }
.hero.life-hero .hero-signature { z-index: 1; }

/* === PAGE-SPECIFIC: SAFEGUARDING === */

.sg-hero {
    padding-top: clamp(40px, 5vw, 64px);
    padding-bottom: clamp(40px, 5vw, 80px);
  }

  .pillars-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .sg-pillar {
    background: var(--paper-2);
    border-radius: var(--r-lg);
    padding: 36px;
    transition: background 0.3s, transform 0.3s;
  }
  .sg-pillar:hover { background: var(--paper-3); transform: translateY(-4px); }
  .sg-pillar.dark { background: var(--ink); color: var(--paper); }
  .sg-pillar.dark:hover { background: #2a2b2e; }
  .sg-pillar.blue { background: var(--blue); color: var(--paper); }
  .sg-pillar.blue:hover { background: var(--blue-deep); }
  .sg-pillar .num {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--blue);
    letter-spacing: 0.08em;
    margin-bottom: 18px;
  }
  .sg-pillar.dark .num, .sg-pillar.blue .num { color: var(--blue-soft); }
  .sg-pillar h3 {
    font-size: clamp(22px, 2.4vw, 32px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin-bottom: 14px;
  }
  .sg-pillar p {
    font-size: 15px;
    line-height: 1.6;
    opacity: 0.85;
  }
  @media (max-width: 1024px) { .pillars-row { grid-template-columns: 1fr; } }

  /* Detailed list */
  .req-list {
    border-top: 0.5px solid var(--rule);
  }
  .req-row {
    display: grid;
    grid-template-columns: 80px 1fr 1.6fr 200px;
    gap: 32px;
    padding: 32px 0;
    border-bottom: 0.5px solid var(--rule);
    align-items: baseline;
  }
  .req-row .pn {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--blue);
    font-weight: 600;
  }
  .req-row h4 {
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
  }
  .req-row p {
    font-size: 14.5px;
    color: var(--ink-2);
    line-height: 1.6;
    max-width: 540px;
  }
  .req-row .timing {
    text-align: right;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.06em;
  }
  @media (max-width: 1024px) {
    .req-row { grid-template-columns: 60px 1fr; }
    .req-row > *:nth-child(3), .req-row > *:nth-child(4) { grid-column: 2; }
    .req-row .timing { text-align: left; }
  }

  /* Contact safeguarding lead block */
  .sg-contact {
    background: var(--ink);
    color: var(--paper);
    border-radius: var(--r-lg);
    padding: clamp(40px, 5vw, 72px);
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 48px;
    align-items: center;
  }
  .sg-contact h3 {
    font-size: clamp(28px, 3.5vw, 44px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin-bottom: 18px;
  }
  .sg-contact h3 .blue { color: var(--blue-soft); }
  .sg-contact p {
    color: rgba(251, 248, 242, 0.7);
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 24px;
  }
  .sg-contact .btn-cream { color: var(--ink); }
  @media (max-width: 1024px) { .sg-contact { grid-template-columns: 1fr; } }

/* === PAGE-SPECIFIC: ABOUT === */

.about-hero { padding: clamp(40px, 5vw, 64px) 0 0; }
  .about-hero-image {
    margin-top: clamp(40px, 5vw, 64px);
    aspect-ratio: 21 / 9;
    background: var(--ink) none;
    border-radius: var(--r-lg);
  }
  .twocol-essay {
    display: grid;
    grid-template-columns: 0.55fr 1fr;
    gap: 80px;
    align-items: start;
  }
  .twocol-essay h2 {
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    position: sticky;
    top: 100px;
  }
  .twocol-essay h2 .blue { color: var(--blue); }
  .twocol-essay .body p {
    font-size: 17px;
    color: var(--ink);
    line-height: 1.7;
    margin-bottom: 22px;
  }
  .twocol-essay .body p:first-child::first-letter {
    font-size: 4.4em;
    font-weight: 800;
    float: left;
    line-height: 0.85;
    margin: 0.05em 0.12em -0.05em -0.04em;
    color: var(--blue);
    letter-spacing: -0.04em;
  }
  @media (max-width: 1024px) { .twocol-essay { grid-template-columns: 1fr; gap: 24px; } .twocol-essay h2 { position: static; } }

  /* Values bento */
  .values {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .value {
    background: var(--paper-2);
    border-radius: var(--r-lg);
    padding: 36px;
    transition: background 0.3s, transform 0.3s;
  }
  .value:hover { background: var(--paper-3); transform: translateY(-4px); }
  .value-num {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--blue);
    letter-spacing: 0.08em;
    margin-bottom: 16px;
  }
  .value h3 {
    font-size: clamp(22px, 2.5vw, 32px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin-bottom: 10px;
  }
  .value p {
    font-size: 15px;
    color: var(--ink-2);
    line-height: 1.6;
  }
  @media (max-width: 1024px) { .values { grid-template-columns: 1fr; } }

  /* Group structure */
  .group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
  }
  .group-image {
    aspect-ratio: 4 / 3;
    background: var(--ink) none;
    border-radius: var(--r-lg);
  }
  .group h2 {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin-bottom: 20px;
  }
  .group h2 .blue { color: var(--blue); }
  .group p {
    font-size: 16.5px;
    color: var(--ink-2);
    line-height: 1.65;
    margin-bottom: 16px;
  }
  .group .info-list {
    list-style: none;
    margin-top: 28px;
    border-top: 0.5px solid var(--rule);
  }
  .group .info-list li {
    padding: 14px 0;
    border-bottom: 0.5px solid var(--rule);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 14.5px;
  }
  .group .info-list strong { color: var(--ink); font-weight: 600; }
  .group .info-list span { color: var(--ink-2); text-align: right; }
  @media (max-width: 1024px) { .group { grid-template-columns: 1fr; gap: 32px; } }

  /* Team placeholder */
  .team {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  .team-member {
    text-align: left;
  }
  .team-photo {
    aspect-ratio: 4 / 5;
    background: var(--paper-2);
    border-radius: var(--r-lg);
    margin-bottom: 14px;
    background-size: cover;
    background-position: center;
    background-color: var(--paper-3);
  }
  .team-member h4 {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin-bottom: 4px;
  }
  .team-member .role {
    font-size: 13px;
    color: var(--blue);
    font-weight: 500;
  }
  @media (max-width: 1024px) { .team { grid-template-columns: 1fr 1fr; } }

/* about-hero hero image */
.hero.about-hero { position: relative; }
#page-about .hero.about-hero::before{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(250,250,247,0.92) 0%, rgba(250,250,247,0.55) 60%, rgba(250,250,247,0.95) 100%),
              url("img/photo-1486325212027-8081e485255e-w2400.jpg") center/cover;
  z-index: 0;
  opacity: 0.6;
}
.hero.about-hero .container { position: relative; z-index: 2; }
.hero.about-hero .hero-signature { z-index: 1; }

/* === PAGE-SPECIFIC: INSIGHTS === */

.ins-hero { padding: clamp(40px, 5vw, 64px) 0 clamp(40px, 5vw, 64px); }

  /* Featured article */
  .featured {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 48px;
    align-items: center;
    background: var(--paper-2);
    border-radius: var(--r-lg);
    padding: clamp(32px, 4vw, 56px);
    margin-bottom: clamp(60px, 7vw, 96px);
    cursor: pointer;
    transition: transform 0.4s;
  }
  .featured:hover { transform: translateY(-4px); }
  .featured-image {
    aspect-ratio: 4 / 3;
    background: var(--ink) none;
    border-radius: var(--r);
  }
  .featured-meta {
    display: flex;
    gap: 14px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--blue);
    letter-spacing: 0.08em;
    margin-bottom: 18px;
  }
  .featured-meta span:not(:first-child) { color: var(--ink-3); }
  .featured h2 {
    font-size: clamp(28px, 3.6vw, 44px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.06;
    margin-bottom: 16px;
    color: var(--ink);
  }
  .featured h2 .blue { color: var(--blue); }
  .featured p {
    font-size: 16px;
    color: var(--ink-2);
    line-height: 1.6;
    margin-bottom: 24px;
    max-width: 520px;
  }
  @media (max-width: 1024px) { .featured { grid-template-columns: 1fr; gap: 24px; } }

  /* Article grid */
  .article-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
  .article {
    cursor: pointer;
    transition: transform 0.4s;
  }
  .article:hover { transform: translateY(-6px); }
  .article-image {
    aspect-ratio: 4 / 3;
    background: var(--ink);
    background-size: cover;
    background-position: center;
    border-radius: var(--r-lg);
    margin-bottom: 20px;
    overflow: hidden;
    transition: transform 0.6s ease;
  }
  .article:hover .article-image { transform: scale(1.02); }
  .article-meta {
    display: flex;
    gap: 14px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--blue);
    letter-spacing: 0.08em;
    margin-bottom: 12px;
  }
  .article-meta span:not(:first-child) { color: var(--ink-3); }
  .article h3 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.18;
    margin-bottom: 10px;
  }
  .article p {
    font-size: 14.5px;
    color: var(--ink-2);
    line-height: 1.55;
  }
  .a1 .article-image { background: var(--navy-deep) none; }
  .a2 .article-image { background: var(--navy-deep) none; }
  .a3 .article-image { background: var(--navy-deep) none; }
  .a4 .article-image { background: var(--navy-deep) none; }
  .a5 .article-image { background: var(--navy-deep) none; }
  .a6 .article-image { background: var(--navy-deep) none; }
  @media (max-width: 1024px) { .article-grid { grid-template-columns: 1fr; } }

  /* Filter tabs */
  .filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 40px;
    padding-bottom: 24px;
    border-bottom: 0.5px solid var(--rule);
  }
  .filter {
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--paper-2);
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: 0.5px solid transparent;
  }
  .filter:hover { background: var(--paper-3); }
  .filter.active { background: var(--ink); color: var(--paper); }

  /* Newsletter signup */
  .newsletter {
    background: var(--ink);
    color: var(--paper);
    border-radius: var(--r-lg);
    padding: clamp(48px, 6vw, 88px);
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .newsletter::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 600px; height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(10, 31, 68, 0.45), transparent 60%);
    filter: blur(80px);
    z-index: 0;
  }
  .newsletter > * { position: relative; z-index: 1; }
  .newsletter h2 {
    font-size: clamp(32px, 4.5vw, 56px);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.02;
    margin-bottom: 18px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
  .newsletter h2 .blue { color: rgba(250,250,247,0.55); }
  .newsletter p {
    color: rgba(251, 248, 242, 0.7);
    font-size: 16px;
    max-width: 480px;
    margin: 0 auto 32px;
    line-height: 1.55;
  }
  .news-form {
    display: flex;
    gap: 8px;
    max-width: 480px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.08);
    padding: 6px;
    border-radius: 999px;
    border: 0.5px solid rgba(255,255,255,0.12);
  }
  .news-form input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 10px 18px;
    color: var(--paper);
    font-family: inherit;
    font-size: 14.5px;
    outline: none;
  }
  .news-form input::placeholder { color: rgba(251, 248, 242, 0.4); }
  .news-form button {
    background: var(--blue);
    color: var(--paper);
    border: none;
    padding: 10px 22px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
  }
  .news-form button:hover { background: var(--blue-deep); }

/* Insights hero — Hoi An sunset */
.hero.insights-hero {
  position: relative;
}
#page-insights .hero.insights-hero::before{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(250,250,247,0.95) 0%, rgba(250,250,247,0.65) 60%, rgba(250,250,247,0.95) 100%),
              url("img/photo-1559592413-7cec4d0cae2b-w2400.jpg") center/cover;
  z-index: 0;
  opacity: 0.55;
}
.hero.insights-hero .container { position: relative; z-index: 2; }

/* === PAGE-SPECIFIC: CONTACT === */

.contact-hero { padding: clamp(40px, 5vw, 64px) 0 clamp(40px, 5vw, 64px); }

  /* Quick paths */
  .paths {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: clamp(60px, 7vw, 100px);
  }
  .path {
    background: var(--paper-2);
    border-radius: var(--r-lg);
    padding: 32px;
    cursor: pointer;
    transition: background 0.3s, transform 0.3s;
    display: flex;
    flex-direction: column;
    min-height: 220px;
  }
  .path:hover { background: var(--paper-3); transform: translateY(-4px); }
  .path.dark { background: var(--ink); color: var(--paper); }
  .path.dark:hover { background: #2a2b2e; }
  .path.blue { background: var(--blue); color: var(--paper); }
  .path.blue:hover { background: var(--blue-deep); }
  .path .num {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--blue);
    letter-spacing: 0.08em;
    margin-bottom: 16px;
  }
  .path.dark .num, .path.blue .num { color: var(--blue-soft); }
  .path h3 {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
    line-height: 1.15;
  }
  .path p {
    font-size: 14.5px;
    line-height: 1.55;
    opacity: 0.85;
    margin-bottom: auto;
    padding-bottom: 24px;
  }
  .path .arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    transition: gap 0.2s;
  }
  .path:hover .arrow-link { gap: 12px; }
  @media (max-width: 1024px) { .paths { grid-template-columns: 1fr; } }

  /* Form */
  .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
  }
  .form-side h2 {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin-bottom: 18px;
  }
  .form-side h2 .blue { color: var(--blue); }
  .form-side p {
    font-size: 16px;
    color: var(--ink-2);
    line-height: 1.6;
    margin-bottom: 20px;
    max-width: 460px;
  }

  form.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .field {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .field input, .field select, .field textarea {
    background: var(--paper-2);
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 14px 18px;
    font-family: inherit;
    font-size: 15px;
    color: var(--ink);
    outline: none;
    transition: border-color 0.2s, background 0.2s;
  }
  .field input:focus, .field select:focus, .field textarea:focus {
    border-color: var(--blue);
    background: var(--paper);
  }
  .field textarea {
    resize: vertical;
    min-height: 140px;
    font-family: inherit;
  }
  .field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .form-submit {
    margin-top: 8px;
    align-self: flex-start;
  }
  @media (max-width: 1024px) {
    .form-grid { grid-template-columns: 1fr; gap: 32px; }
    .field-row { grid-template-columns: 1fr; }
  }

  /* Office grid */
  .offices {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
  }
  .office {
    background: var(--paper-2);
    border-radius: var(--r-lg);
    padding: 28px;
    transition: background 0.3s, transform 0.3s;
  }
  .office:hover { background: var(--paper-3); transform: translateY(-4px); }
  .office .city {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
  }
  .office .country {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--blue);
    letter-spacing: 0.08em;
    margin-bottom: 18px;
  }
  .office .role {
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.55;
    border-top: 0.5px solid var(--rule);
    padding-top: 14px;
  }
  @media (max-width: 1024px) { .offices { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 600px) { .offices { grid-template-columns: 1fr; } }

  /* FAQs accordion */
  .faqs-list {
    border-top: 0.5px solid var(--rule);
    max-width: 880px;
  }
  .faq-item {
    border-bottom: 0.5px solid var(--rule);
  }
  .faq-q {
    width: 100%;
    background: none;
    border: none;
    padding: 22px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    cursor: pointer;
    font-family: var(--serif);
    font-size: clamp(18px, 1.6vw, 22px);
    font-weight: 400;
    color: var(--ink);
    text-align: left;
    letter-spacing: -0.01em;
    transition: color 0.2s;
  }
  .faq-q:hover { color: var(--navy); }
  .faq-q .icon {
    font-family: var(--mono);
    font-size: 18px;
    color: var(--navy);
    flex-shrink: 0;
    transition: transform 0.3s;
    width: 24px;
    text-align: center;
  }
  .faq-item.open .faq-q .icon { transform: rotate(45deg); }
  .faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
  }
  .faq-item.open .faq-a { max-height: 600px; }
  .faq-a-inner {
    padding: 0 0 24px;
    font-size: 15.5px;
    color: var(--ink-2);
    line-height: 1.65;
    max-width: 760px;
  }

  /* Booking calendar */
  .booking-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: start;
  }
  @media (max-width: 900px) { .booking-grid { grid-template-columns: 1fr; } }
  .booking-info ul {
    list-style: none;
    padding: 0;
    margin-top: 18px;
  }
  .booking-info li {
    padding: 14px 0;
    border-top: 0.5px solid var(--rule);
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 14px;
  }
  .booking-info li .num {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--navy);
  }
  .booking-info li h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 4px;
  }
  .booking-info li p {
    font-size: 13.5px;
    color: var(--ink-2);
    line-height: 1.5;
  }
  .booking-cal {
    background: var(--paper-2);
    border: 0.5px solid var(--rule);
    border-radius: var(--r-lg);
    padding: clamp(24px, 3vw, 32px);
  }
  .booking-cal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 0.5px solid var(--rule);
  }
  .booking-cal-head h4 {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -0.02em;
  }
  .booking-cal-head h4 em { font-style: italic; color: var(--navy); }
  .booking-cal-head .ctrl {
    display: flex;
    gap: 4px;
  }
  .booking-cal-head .ctrl button {
    background: var(--paper);
    border: 0.5px solid var(--rule);
    border-radius: 4px;
    padding: 6px 10px;
    font-family: var(--mono);
    font-size: 13px;
    cursor: pointer;
    color: var(--ink);
  }
  .booking-cal-head .ctrl button:hover { background: var(--paper-3); }
  .booking-slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
  }
  .booking-slot {
    background: var(--paper);
    border: 0.5px solid var(--rule);
    border-radius: 4px;
    padding: 12px 14px;
    text-align: left;
    cursor: pointer;
    font-family: var(--sans);
    font-size: 14px;
    color: var(--ink);
    transition: border-color 0.2s, background 0.2s;
  }
  .booking-slot:hover {
    border-color: var(--navy);
    background: rgba(10, 31, 68, 0.04);
  }
  .booking-slot.booked {
    background: var(--paper-2);
    color: var(--ink-3);
    cursor: not-allowed;
    text-decoration: line-through;
  }
  .booking-slot .day {
    display: block;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--ink-3);
    text-transform: uppercase;
    margin-bottom: 4px;
  }
  .booking-slot.selected {
    background: var(--navy);
    color: var(--paper);
    border-color: var(--navy);
  }
  .booking-slot.selected .day { color: rgba(250,250,247,0.7); }

  /* Info Pack download block */
  .infopack {
    background: var(--navy);
    color: var(--paper);
    padding: clamp(36px, 5vw, 56px);
    border-radius: var(--r-lg);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 56px);
    align-items: center;
  }
  @media (max-width: 768px) { .infopack { grid-template-columns: 1fr; } }
  .infopack h3 {
    font-family: var(--serif);
    font-size: clamp(28px, 3.5vw, 40px);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.08;
    margin-bottom: 14px;
  }
  .infopack h3 em { font-style: italic; color: var(--brass); }
  .infopack p {
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.55;
    color: rgba(250, 250, 247, 0.85);
    margin-bottom: 20px;
  }
  .infopack .pack-includes {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 0.5px solid rgba(250,250,247,0.2);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: rgba(250,250,247,0.55);
    text-transform: uppercase;
    line-height: 1.7;
  }
  .infopack-form input[type="email"] {
    width: 100%;
    padding: 14px 16px;
    background: rgba(255,255,255,0.08);
    border: 0.5px solid rgba(255,255,255,0.25);
    border-radius: 4px;
    font-family: var(--sans);
    font-size: 15px;
    color: var(--paper);
    margin-bottom: 12px;
  }
  .infopack-form input::placeholder { color: rgba(250,250,247,0.45); }
  .infopack-form input:focus {
    outline: none;
    border-color: var(--brass);
    box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.15);
  }

/* === PAGE-SPECIFIC: APPLY === */

/* ============== APPLICATION FORM PAGE ============== */
  .ap-hero {
    padding: clamp(20px, 2.5vw, 36px) 0 clamp(40px, 5vw, 60px);
  }
  .ap-hero h1 { max-width: 900px; }

  /* ============== FORM SHELL ============== */
  .ap-shell {
    background: var(--paper-2);
    border-radius: var(--r-lg);
    padding: clamp(24px, 3vw, 40px) clamp(24px, 3vw, 48px) clamp(36px, 5vw, 56px);
    border: 0.5px solid var(--rule);
  }

  /* Step indicator strip */
  .ap-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    padding-bottom: 24px;
    margin-bottom: clamp(28px, 4vw, 40px);
    border-bottom: 0.5px solid var(--rule);
  }
  .ap-step {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px 0;
    border-top: 2px solid var(--rule);
    transition: border-color 0.3s, color 0.3s;
  }
  .ap-step .num {
    font-family: var(--serif);
    font-style: italic;
    font-size: 22px;
    color: var(--ink-3);
    line-height: 1;
    transition: color 0.3s;
  }
  .ap-step .label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--ink-3);
    text-transform: uppercase;
    transition: color 0.3s;
  }
  .ap-step.complete {
    border-top-color: var(--navy);
  }
  .ap-step.complete .num { color: var(--navy); }
  .ap-step.complete .label { color: var(--ink-2); }
  .ap-step.complete .num::after {
    content: ' ✓';
    font-style: normal;
    font-size: 0.65em;
    color: var(--ink-3);
    margin-left: 2px;
  }
  .ap-step.active {
    border-top-color: var(--brass);
    border-top-width: 3px;
    padding-top: 5px;
  }
  .ap-step.active .num { color: var(--navy); font-weight: 500; }
  .ap-step.active .label { color: var(--navy); font-weight: 600; }
  @media (max-width: 768px) {
    .ap-step .num { font-size: 14px; }
    .ap-step .label { font-size: 8px; letter-spacing: 0.08em; }
  }

  /* Step panels */
  .ap-panel { display: none; animation: ap-fade 0.4s ease; }
  .ap-panel.active { display: block; }
  @keyframes ap-fade {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .ap-panel-head {
    margin-bottom: clamp(24px, 3vw, 32px);
  }
  .ap-panel-head h2 {
    font-family: var(--serif);
    font-size: clamp(28px, 3.4vw, 38px);
    font-weight: 400;
    letter-spacing: -0.025em;
    line-height: 1.08;
    margin-bottom: 10px;
  }
  .ap-panel-head h2 em { font-style: italic; color: var(--navy); }
  .ap-panel-head p {
    font-size: 16px;
    color: var(--ink-2);
    line-height: 1.55;
    max-width: 620px;
  }

  /* Form fields */
  .ap-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .ap-grid-1 { display: grid; grid-template-columns: 1fr; gap: 20px; }
  @media (max-width: 640px) { .ap-grid-2 { grid-template-columns: 1fr; } }

  .ap-field { margin-bottom: 20px; }
  .ap-field label {
    display: block;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-2);
    margin-bottom: 8px;
    font-weight: 500;
  }
  .ap-field label .req { color: var(--brass); margin-left: 2px; }
  .ap-field input[type="text"],
  .ap-field input[type="email"],
  .ap-field input[type="tel"],
  .ap-field input[type="date"],
  .ap-field select,
  .ap-field textarea {
    width: 100%;
    padding: 14px 16px;
    background: var(--paper);
    border: 0.5px solid var(--rule);
    border-radius: 4px;
    font-family: var(--sans);
    font-size: 15px;
    color: var(--ink);
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .ap-field input:focus,
  .ap-field select:focus,
  .ap-field textarea:focus {
    outline: none;
    border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(10, 31, 68, 0.08);
  }
  .ap-field textarea { min-height: 110px; resize: vertical; }
  .ap-field .helper {
    font-size: 12.5px;
    color: var(--ink-3);
    margin-top: 6px;
    line-height: 1.5;
  }

  /* Radio / checkbox blocks */
  .ap-radio-group, .ap-check-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .ap-radio-group label,
  .ap-check-group label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--paper);
    border: 0.5px solid var(--rule);
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--sans);
    font-size: 14.5px;
    color: var(--ink);
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.45;
    margin: 0;
    font-weight: 400;
    transition: border-color 0.2s, background 0.2s;
  }
  .ap-radio-group label:hover,
  .ap-check-group label:hover {
    background: var(--paper-3);
    border-color: var(--ink-3);
  }
  .ap-radio-group input[type="radio"],
  .ap-check-group input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--navy);
    width: 16px;
    height: 16px;
  }
  .ap-radio-group label:has(input:checked),
  .ap-check-group label:has(input:checked) {
    border-color: var(--navy);
    background: rgba(10, 31, 68, 0.04);
  }

  /* Safeguarding declaration callout */
  .ap-callout {
    background: rgba(201, 169, 97, 0.10);
    border: 0.5px solid rgba(201, 169, 97, 0.45);
    border-left: 3px solid var(--brass);
    border-radius: 4px;
    padding: 18px 20px;
    margin-bottom: 24px;
  }
  .ap-callout strong {
    display: block;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #8B6F2A;
    margin-bottom: 8px;
  }
  .ap-callout p {
    font-size: 14px;
    color: var(--ink);
    line-height: 1.55;
  }

  /* Review summary */
  .ap-review {
    background: var(--paper);
    border: 0.5px solid var(--rule);
    border-radius: 4px;
    padding: 24px 28px;
    margin-bottom: 24px;
  }
  .ap-review h3 {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--navy);
    margin-bottom: 14px;
  }
  .ap-review-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 20px;
    padding: 12px 0;
    border-bottom: 0.5px solid var(--rule);
    font-size: 14.5px;
  }
  .ap-review-row:last-child { border-bottom: none; }
  .ap-review-row .k {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .ap-review-row .v { color: var(--ink); }
  .ap-review-row .v em { color: var(--ink-3); font-style: italic; }
  @media (max-width: 640px) {
    .ap-review-row { grid-template-columns: 1fr; gap: 4px; }
  }

  /* Navigation buttons */
  .ap-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-top: clamp(24px, 3vw, 32px);
    margin-top: clamp(24px, 3vw, 32px);
    border-top: 0.5px solid var(--rule);
  }
  .ap-nav-step {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .ap-nav-buttons { display: flex; gap: 10px; }

  /* ============== AI SCREENING ANIMATION ============== */
  .ap-screening {
    display: none;
    padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 60px);
    text-align: center;
    background: var(--navy);
    color: var(--paper);
    border-radius: var(--r-lg);
    margin: clamp(24px, 4vw, 40px) 0;
    position: relative;
    overflow: hidden;
  }
  .ap-screening.active { display: block; }
  .ap-screening::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--brass), transparent);
    animation: ap-scan 2.4s linear infinite;
  }
  @keyframes ap-scan {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }
  .ap-screening h3 {
    font-family: var(--serif);
    font-size: clamp(28px, 3.5vw, 40px);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 12px;
  }
  .ap-screening h3 em { font-style: italic; color: var(--brass); }
  .ap-screening .lede {
    font-family: var(--serif);
    font-size: clamp(15px, 1.3vw, 18px);
    color: rgba(250, 250, 247, 0.78);
    line-height: 1.55;
    margin-bottom: clamp(28px, 4vw, 40px);
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
  }
  .ap-meters {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 2vw, 28px);
    max-width: 720px;
    margin: 0 auto clamp(28px, 4vw, 40px);
  }
  @media (max-width: 640px) {
    .ap-meters { grid-template-columns: 1fr 1fr; }
  }
  .ap-meter {
    text-align: left;
  }
  .ap-meter-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: rgba(250, 250, 247, 0.55);
    text-transform: uppercase;
    margin-bottom: 8px;
    height: 28px;
    display: flex;
    align-items: flex-start;
  }
  .ap-meter-bar {
    width: 100%;
    height: 3px;
    background: rgba(255,255,255,0.12);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 8px;
  }
  .ap-meter-fill {
    height: 100%;
    background: var(--brass);
    width: 0%;
    transition: width 1.4s cubic-bezier(0.65, 0, 0.35, 1);
  }
  .ap-meter-value {
    font-family: var(--serif);
    font-size: 26px;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--paper);
  }
  .ap-meter-value em { font-style: italic; color: var(--brass); }

  .ap-final-score {
    margin-top: clamp(28px, 4vw, 36px);
    padding-top: clamp(24px, 3vw, 32px);
    border-top: 0.5px solid rgba(255,255,255,0.18);
  }
  .ap-final-score .label {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: rgba(250, 250, 247, 0.65);
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .ap-final-score .figure {
    font-family: var(--serif);
    font-size: clamp(56px, 7vw, 88px);
    font-weight: 300;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--paper);
  }
  .ap-final-score .figure em { font-style: italic; color: var(--brass); }
  .ap-final-score .verdict {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--brass);
    text-transform: uppercase;
    margin-top: 12px;
  }

  /* ============== SUCCESS PANEL ============== */
  .ap-success {
    display: none;
    padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 60px);
    text-align: center;
    background: var(--paper-2);
    border-radius: var(--r-lg);
    border: 0.5px solid var(--rule);
  }
  .ap-success.active { display: block; }
  .ap-success-mark {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--navy);
    color: var(--paper);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-style: italic;
    font-size: 32px;
    margin-bottom: 24px;
  }
  .ap-success h2 {
    font-family: var(--serif);
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 400;
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin-bottom: 14px;
  }
  .ap-success h2 em { font-style: italic; color: var(--navy); }
  .ap-success p {
    font-family: var(--serif);
    font-size: clamp(17px, 1.4vw, 20px);
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 540px;
    margin: 0 auto 24px;
  }
  .ap-success-next {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    max-width: 720px;
    margin: clamp(28px, 4vw, 36px) auto;
    text-align: left;
  }
  @media (max-width: 768px) { .ap-success-next { grid-template-columns: 1fr; } }
  .ap-success-step {
    background: var(--paper);
    border: 0.5px solid var(--rule);
    border-radius: 4px;
    padding: 16px 18px;
  }
  .ap-success-step .n {
    font-family: var(--serif);
    font-style: italic;
    font-size: 22px;
    color: var(--navy);
    line-height: 1;
    margin-bottom: 6px;
  }
  .ap-success-step .t {
    font-size: 13px;
    color: var(--ink);
    line-height: 1.5;
  }

/* === PAGE-SPECIFIC: REFER === */

.rf-hero { padding: clamp(20px, 2.5vw, 36px) 0 clamp(40px, 5vw, 60px); }
.rf-hero h1 { max-width: 900px; }
.rf-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 1024px) { .rf-pillars { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px)  { .rf-pillars { grid-template-columns: 1fr; } }
.rf-pillar {
  background: var(--paper-2);
  border: 0.5px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 32px 28px;
}
.rf-pillar .num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--navy);
  letter-spacing: 0.16em;
  margin-bottom: 14px;
  font-weight: 600;
}
.rf-pillar h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 10px;
}
.rf-pillar h3 em { font-style: italic; color: var(--navy); }
.rf-pillar p { font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }

.rf-form {
  background: var(--paper-2);
  border: 0.5px solid var(--rule);
  border-radius: var(--r-lg);
  padding: clamp(28px, 4vw, 48px);
  max-width: 720px;
  margin: 0 auto;
}
.rf-form h3 {
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 400;
  letter-spacing: -0.025em;
  margin-bottom: 24px;
}
.rf-form h3 em { font-style: italic; color: var(--navy); }
.rf-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 600px) { .rf-form .row { grid-template-columns: 1fr; } }
.rf-form label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-2);
  margin-bottom: 6px;
  text-transform: uppercase;
  font-weight: 500;
}
.rf-form input, .rf-form select, .rf-form textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--paper);
  border: 0.5px solid var(--rule);
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 14.5px;
  color: var(--ink);
}
.rf-form input:focus, .rf-form select:focus, .rf-form textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(10,31,68,0.08);
}
.rf-form textarea { min-height: 90px; resize: vertical; }
.rf-form .single { margin-bottom: 16px; }

/* === PAGE-SPECIFIC: PRIVACY === */

.legal { max-width: 760px; padding-top: 40px; padding-bottom: 80px; }
.legal h1 { font-family: var(--serif); font-size: clamp(36px, 4.5vw, 56px); font-weight: 400; letter-spacing: -0.025em; line-height: 1.05; margin-bottom: 18px; }
.legal h1 em { font-style: italic; color: var(--navy); }
.legal h2 { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 28px); font-weight: 400; letter-spacing: -0.02em; margin: 32px 0 12px; color: var(--ink); }
.legal p { font-size: 15.5px; line-height: 1.7; color: var(--ink-2); margin-bottom: 16px; }
.legal .meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ink-3); text-transform: uppercase; margin-bottom: 24px; }
.legal a { color: var(--navy); border-bottom: 1px solid currentColor; }

/* === PAGE-SPECIFIC: TERMS === */

.legal { max-width: 760px; padding-top: 40px; padding-bottom: 80px; }
.legal h1 { font-family: var(--serif); font-size: clamp(36px, 4.5vw, 56px); font-weight: 400; letter-spacing: -0.025em; line-height: 1.05; margin-bottom: 18px; }
.legal h1 em { font-style: italic; color: var(--navy); }
.legal h2 { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 28px); font-weight: 400; letter-spacing: -0.02em; margin: 32px 0 12px; color: var(--ink); }
.legal p { font-size: 15.5px; line-height: 1.7; color: var(--ink-2); margin-bottom: 16px; }
.legal .meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ink-3); text-transform: uppercase; margin-bottom: 24px; }
.legal a { color: var(--navy); border-bottom: 1px solid currentColor; }