/* =====================================================================
   sgviva.com — Chartroom design system (see brand-spec.md)
   Brand tokens are viveedu.com's originals; layout/visual language is new.
   ===================================================================== */

:root {
  --navy-950: #071A2E;
  --navy-900: #0E2A47;
  --navy-800: #163756;
  --navy-700: #23466B;
  --gold-600: #A9832F;
  --gold-500: #C9A14A;
  --gold-300: #E0CB9A;
  --gold-100: #F3E9D2;
  --cream: #FFF8EC;
  --paper: #FBF8F1;
  --paper-2: #F3EEE2;
  --white: #FFFFFF;
  --ink: #13202F;
  --ink-2: #3D4A5E;
  --ink-3: #5C6880;
  --rule: rgba(14, 42, 71, 0.13);
  --rule-2: rgba(14, 42, 71, 0.26);
  --mark: #B4432F;
  --on-dark: #F4EFE3;
  --on-dark-2: rgba(244, 239, 227, 0.74);
  --on-dark-3: rgba(244, 239, 227, 0.52);
  --on-dark-rule: rgba(224, 203, 154, 0.18);

  --ff-display: "Playfair Display", "Noto Serif SC", "Songti SC", "STSong", Georgia, serif;
  --ff-zh-serif: "Noto Serif SC", "Songti SC", "STSong", Georgia, serif;
  --ff-ital: "Cormorant Garamond", "Noto Serif SC", Georgia, serif;
  --ff-sans: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Noto Sans CJK SC", "Segoe UI", system-ui, sans-serif;
  --ff-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --container: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --sec: clamp(64px, 8vw, 116px);
  --sec-tight: clamp(48px, 6vw, 84px);
  --header-h: 68px;

  /* compass ring (gold) — ticks are dash patterns on circles, so the SVG stays tiny */
  --compass-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23C9A14A'%3E%3Ccircle cx='50' cy='50' r='49.6' stroke-width='.14'/%3E%3Ccircle cx='50' cy='50' r='47.4' stroke-width='2.2' stroke-dasharray='.16 1.9087'/%3E%3Ccircle cx='50' cy='50' r='46.6' stroke-width='3.8' stroke-dasharray='.32 24.07'/%3E%3Ccircle cx='50' cy='50' r='44.4' stroke-width='.14'/%3E%3Ccircle cx='50' cy='50' r='31' stroke-width='.12'/%3E%3Ccircle cx='50' cy='50' r='30' stroke-width='.9' stroke-dasharray='.12 2.5'/%3E%3Ccircle cx='50' cy='50' r='12' stroke-width='.12'/%3E%3Cpath d='M50 .4V99.6M.4 50H99.6' stroke-width='.1'/%3E%3Cpath d='M14.9 14.9 85.1 85.1M85.1 14.9 14.9 85.1' stroke-width='.07' stroke-dasharray='.6 .8'/%3E%3Cpath d='M50 9 53.2 46.8 50 50 46.8 46.8Z' fill='%23C9A14A' fill-opacity='.55' stroke-width='.1'/%3E%3Cpath d='M50 91 53.2 53.2 50 50 46.8 53.2Z' stroke-width='.18'/%3E%3Cpath d='M9 50 46.8 46.8 50 50 46.8 53.2ZM91 50 53.2 46.8 50 50 53.2 53.2Z' stroke-width='.14'/%3E%3C/svg%3E");
  --compass-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%230E2A47'%3E%3Ccircle cx='50' cy='50' r='49.6' stroke-width='.14'/%3E%3Ccircle cx='50' cy='50' r='47.4' stroke-width='2.2' stroke-dasharray='.16 1.9087'/%3E%3Ccircle cx='50' cy='50' r='46.6' stroke-width='3.8' stroke-dasharray='.32 24.07'/%3E%3Ccircle cx='50' cy='50' r='44.4' stroke-width='.14'/%3E%3Ccircle cx='50' cy='50' r='31' stroke-width='.12'/%3E%3Ccircle cx='50' cy='50' r='30' stroke-width='.9' stroke-dasharray='.12 2.5'/%3E%3Cpath d='M50 .4V99.6M.4 50H99.6' stroke-width='.1'/%3E%3Cpath d='M50 9 53.2 46.8 50 50 46.8 46.8Z' fill='%230E2A47' fill-opacity='.5' stroke-width='.1'/%3E%3Cpath d='M50 91 53.2 53.2 50 50 46.8 53.2Z' stroke-width='.18'/%3E%3C/svg%3E");
  --needle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 1 23.4 16.6 39 20 23.4 23.4 20 39 16.6 23.4 1 20 16.6 16.6Z' fill='none' stroke='%23C9A14A' stroke-width='1'/%3E%3Cpath d='M20 1 23.4 16.6 20 20 16.6 16.6Z' fill='%23C9A14A'/%3E%3Ccircle cx='20' cy='20' r='2.2' fill='%23C9A14A'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  font: 400 16px/1.8 var(--ff-sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
.lang-en body, body.lang-en { line-height: 1.7; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--navy-900); text-decoration-color: rgba(201, 161, 74, 0.7); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--navy-700); text-decoration-color: var(--gold-500); }
strong { font-weight: 600; color: inherit; }
code { font-family: var(--ff-mono); font-size: 0.88em; padding: 0.08em 0.36em; background: rgba(14, 42, 71, 0.06); border-radius: 2px; }
::selection { background: var(--gold-300); color: var(--navy-950); }
:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--ff-display); color: var(--navy-900); font-weight: 700; text-wrap: balance; }
h1 { letter-spacing: 0.01em; }
h2 { font-size: clamp(28px, 3.5vw, 44px); line-height: 1.22; letter-spacing: 0.01em; }
h3 { font-size: clamp(20px, 1.9vw, 24px); line-height: 1.38; }
h4 { font-size: 18px; line-height: 1.45; }
p, li, dd { text-wrap: pretty; }
/* CJK display text: wrap at punctuation/spaces instead of mid-phrase; never overflow */
@media (min-width: 760px) {
  .lang-zh :is(h1, h2, h3, h4, summary, .pull-quote q, .origin-quote, .quote-slip__main, .checklist__title, .logo-group__host) { word-break: keep-all; overflow-wrap: anywhere; }
}
p + p { margin-top: 1em; }

.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--gold-500); color: var(--navy-950); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; }

/* ---------------------------------------------------------------- layout */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 3.2vw, 56px); row-gap: clamp(28px, 3vw, 44px); }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-12 { grid-column: 1 / -1; }
.section { padding-block: var(--sec); position: relative; }
.section--tight { padding-block: var(--sec-tight); }
.section--alt { background: var(--paper-2); }
.section-header { max-width: 48rem; margin-bottom: clamp(32px, 4vw, 56px); }
.section-header > * + * { margin-top: 14px; }
.section-header .lead { margin-top: 18px; }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 600 12px/1.35 var(--ff-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-600); }
.eyebrow::before { content: ""; flex: 0 0 18px; height: 1px; background: currentColor; }
.lead { font-size: clamp(17px, 1.45vw, 19.5px); line-height: 1.75; color: var(--ink-2); }
.small-print { font-size: 14px; line-height: 1.7; color: var(--ink-3); }
.sep { display: inline-block; margin-inline: 0.55em; opacity: 0.55; }
.break { display: block; }

/* ---------------------------------------------------------------- buttons, chips */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 48px; padding: 0 24px;
  font: 600 15px/1.2 var(--ff-sans); letter-spacing: 0.02em; text-decoration: none; white-space: nowrap;
  color: var(--cream); background: var(--navy-900); border: 1px solid var(--navy-900); border-radius: 2px;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.btn:hover { color: var(--cream); background: var(--navy-700); border-color: var(--navy-700); }
.btn .arrow { display: inline-block; transition: transform 0.2s; }
.btn:hover .arrow { transform: translateX(3px); }
.btn--ghost { color: var(--navy-900); background: transparent; border-color: var(--rule-2); }
.btn--ghost:hover { color: var(--navy-900); background: transparent; border-color: var(--navy-900); }
.btn--sm { min-height: 38px; padding: 0 14px; font-size: 13.5px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.chip { display: inline-block; padding: 4px 10px; font: 500 12.5px/1.45 var(--ff-sans); color: var(--ink-2); background: var(--white); border: 1px solid var(--rule-2); border-radius: 2px; }
.chip--ink { color: var(--cream); background: var(--navy-900); border-color: var(--navy-900); }

/* dark contexts */
.hero, .closer, .deep-card, .band-paper, .band-dark, .site-footer, .anti-ghost { --rule: var(--on-dark-rule); }
:is(.hero, .closer, .deep-card, .band-dark) .btn { color: var(--navy-950); background: var(--gold-500); border-color: var(--gold-500); }
:is(.hero, .closer, .deep-card, .band-dark) .btn:hover { color: var(--navy-950); background: var(--gold-300); border-color: var(--gold-300); }
:is(.hero, .closer, .deep-card, .band-dark) .btn--ghost { color: var(--on-dark); background: transparent; border-color: rgba(244, 239, 227, 0.32); }
:is(.hero, .closer, .deep-card, .band-dark) .btn--ghost:hover { color: var(--cream); background: rgba(244, 239, 227, 0.06); border-color: var(--gold-300); }
:is(.hero, .closer, .deep-card, .band-dark) .eyebrow { color: var(--gold-300); }
:is(.hero, .closer, .deep-card, .band-dark) :is(h1, h2, h3, h4) { color: var(--cream); }
:is(.hero, .closer, .deep-card, .band-dark) a:not(.btn) { color: var(--gold-300); }

/* ---------------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  color: var(--ink);
  background: rgba(251, 248, 241, 0.9);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--rule);
  transition: background-color 0.35s, color 0.35s, border-color 0.35s;
}
.site-header[data-tone="dark"] { color: var(--on-dark); background: var(--navy-950); border-bottom-color: rgba(224, 203, 154, 0.12); }
.site-header__inner { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); height: var(--header-h); display: flex; align-items: center; gap: 20px; }
.wordmark { display: inline-flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; flex: 0 0 auto; }
.wordmark__emblem { width: 34px; height: 34px; }
.wordmark__text { font: 700 20px/1 "Playfair Display", Georgia, serif; letter-spacing: 0.01em; color: var(--navy-900); }
[data-tone="dark"] .wordmark__text { color: var(--cream); }
.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 2px; list-style: none; }
.nav__list a { position: relative; display: block; padding: 10px 12px; font: 500 14.5px/1 var(--ff-sans); color: var(--ink-2); text-decoration: none; transition: color 0.2s; }
.nav__list a:hover { color: var(--navy-900); }
.nav__list a[aria-current="page"] { color: var(--navy-900); }
.nav__list a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 1px; background: var(--gold-500); }
[data-tone="dark"] .nav__list a { color: var(--on-dark-2); }
[data-tone="dark"] .nav__list a:hover, [data-tone="dark"] .nav__list a[aria-current="page"] { color: var(--cream); }
.nav__extra { display: none; }
.site-header__tools { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.lang-switch { display: inline-flex; align-items: center; min-height: 34px; padding: 0 9px; font: 600 12px/1 var(--ff-mono); letter-spacing: 0.06em; color: inherit; text-decoration: none; border: 1px solid var(--rule-2); border-radius: 2px; }
.lang-switch:hover { color: inherit; border-color: var(--gold-500); }
[data-tone="dark"] .lang-switch { border-color: rgba(244, 239, 227, 0.26); }
[data-tone="dark"] .header-cta { color: var(--navy-950); background: var(--gold-500); border-color: var(--gold-500); }
[data-tone="dark"] .header-cta:hover { background: var(--gold-300); border-color: var(--gold-300); color: var(--navy-950); }
.nav-toggle { display: none; align-items: center; gap: 9px; min-height: 38px; padding: 0 2px 0 6px; font: 600 14px/1 var(--ff-sans); color: inherit; background: none; border: 0; cursor: pointer; }
.nav-toggle__bars { position: relative; width: 20px; height: 12px; }
.nav-toggle__bars::before, .nav-toggle__bars::after, .nav-toggle__bars span { content: ""; position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; transition: transform 0.25s, opacity 0.2s; }
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars span { top: 5.25px; }
.nav-toggle__bars::after { bottom: 0; }
.nav-open .nav-toggle__bars::before { transform: translateY(5.25px) rotate(45deg); }
.nav-open .nav-toggle__bars::after { transform: translateY(-5.25px) rotate(-45deg); }
.nav-open .nav-toggle__bars span { opacity: 0; }

@media (max-width: 1060px) {
  .nav-toggle { display: inline-flex; }
  .header-cta { display: none; }
  .nav {
    position: fixed; inset: var(--header-h) 0 0 0; z-index: 49;
    display: flex; flex-direction: column;
    padding: 12px var(--gutter) calc(40px + env(safe-area-inset-bottom));
    overflow-y: auto; color: var(--on-dark); background: var(--navy-950);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 0.25s, transform 0.25s, visibility 0s 0.25s;
  }
  .nav-open .nav { opacity: 1; visibility: visible; transform: none; transition: opacity 0.25s, transform 0.25s; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list a, [data-tone] .nav__list a { padding: 18px 0; font: 600 25px/1.2 var(--ff-display); color: var(--on-dark); border-bottom: 1px solid rgba(224, 203, 154, 0.14); }
  .nav__list a[aria-current="page"] { color: var(--gold-300); }
  .nav__list a[aria-current="page"]::after { display: none; }
  .nav__extra { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; margin-top: 30px; }
  .nav__lang { font: 600 14px/1 var(--ff-mono); letter-spacing: 0.06em; color: var(--gold-300); text-decoration: none; }
  .nav__extra .btn { color: var(--navy-950); background: var(--gold-500); border-color: var(--gold-500); }
  body.nav-open { overflow: hidden; }
}

/* ---------------------------------------------------------------- footer */
.site-footer { color: var(--on-dark-2); background: #06172A; padding-top: clamp(56px, 7vw, 88px); font-size: 14.5px; line-height: 1.7; }
.site-footer__grid { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); display: grid; grid-template-columns: 1.5fr 1fr 1.6fr 1.1fr; gap: clamp(28px, 4vw, 56px); }
.site-footer__emblem { width: 56px; height: 56px; }
.site-footer__legal-name { margin-top: 18px; font: 700 16px/1.35 var(--ff-display); letter-spacing: 0.06em; color: var(--cream); }
.site-footer__tagline { margin-top: 6px; font: italic 500 17px/1.4 var(--ff-ital); font-synthesis: none; color: var(--gold-300); }
.site-footer__meta { margin-top: 14px; font: 12.5px/1.7 var(--ff-mono); color: var(--on-dark-3); }
.site-footer__h { margin-bottom: 18px; font: 600 11.5px/1 var(--ff-sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-300); }
.site-footer ul { list-style: none; display: grid; gap: 9px; }
.site-footer a { color: var(--on-dark); text-decoration: none; }
.site-footer a:hover, .site-footer a[aria-current="page"] { color: var(--gold-300); }
.site-footer__contact li { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; }
.site-footer .alias { flex: 0 0 auto; min-width: 84px; font: 500 11px/1.6 var(--ff-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--on-dark-3); }
.site-footer__contact a { overflow-wrap: anywhere; }
.site-footer__bottom { max-width: var(--container); margin: clamp(48px, 6vw, 72px) auto 0; padding: 22px var(--gutter) 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font: 12px/1.6 var(--ff-mono); color: var(--on-dark-3); border-top: 1px solid rgba(224, 203, 154, 0.12); }
.site-footer__bottom .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
@media (max-width: 960px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .site-footer__grid { grid-template-columns: 1fr; } }

.mobile-cta { display: none; }
@media (max-width: 760px) {
  .mobile-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: grid; grid-template-columns: 1fr 1.5fr;
    padding-bottom: env(safe-area-inset-bottom); background: var(--navy-950);
    box-shadow: 0 -1px 0 rgba(224, 203, 154, 0.25);
  }
  .mobile-cta a { display: flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 54px; font: 600 15px/1 var(--ff-sans); text-decoration: none; }
  .mobile-cta__wa { color: var(--on-dark); }
  .mobile-cta__main { color: var(--navy-950); background: var(--gold-500); }
  body { padding-bottom: calc(54px + env(safe-area-inset-bottom)); }
  .nav-open .mobile-cta { display: none; }
}

/* ---------------------------------------------------------------- home hero */
.hero { position: relative; isolation: isolate; overflow: hidden; color: var(--on-dark); background: var(--navy-950); padding: clamp(44px, 6.5vw, 96px) 0 clamp(64px, 8vw, 120px); }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: linear-gradient(rgba(224, 203, 154, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(224, 203, 154, 0.055) 1px, transparent 1px);
  background-size: 92px 92px; background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(120% 90% at 75% 35%, #000 25%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 75% 35%, #000 25%, transparent 78%);
}
.hero::after { content: ""; position: absolute; z-index: -1; width: min(1100px, 150vw); aspect-ratio: 1; left: 58%; top: 48%; transform: translate(-50%, -50%); background: var(--compass-gold) center / contain no-repeat; opacity: 0.2; }
.hero .grid { align-items: end; }
.hero h1 { margin-top: 22px; font-size: clamp(46px, 7.4vw, 96px); line-height: 1.04; letter-spacing: 0.03em; color: var(--cream); }
.hero h1 .break + .break { color: var(--gold-300); }
.hero__tagline { margin-top: 20px; font: italic 500 clamp(19px, 1.9vw, 24px)/1.35 var(--ff-ital); font-synthesis: none; color: var(--gold-300); }
.hero__sub { margin-top: 22px; max-width: 34em; font-size: clamp(16px, 1.35vw, 18.5px); line-height: 1.85; color: var(--on-dark-2); }
.hero__credibility { margin-top: clamp(36px, 4vw, 52px); padding-top: 18px; max-width: 36em; font-size: 14px; line-height: 1.75; color: var(--on-dark-3); border-top: 1px solid var(--on-dark-rule); }
.hero__aside { display: grid; gap: 22px; }

.quote-slip { position: relative; padding: 26px 28px 28px; background: var(--white); border: 1px solid var(--rule-2); }
.quote-slip::before, .quote-slip::after { content: ""; position: absolute; width: 14px; height: 14px; border-color: var(--gold-500); border-style: solid; }
.quote-slip::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.quote-slip::after { right: -1px; bottom: -1px; border-width: 0 2px 2px 0; }
.quote-slip__label { display: block; font: 600 11.5px/1.3 var(--ff-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-600); }
.quote-slip__main { margin-top: 12px; font: 700 clamp(22px, 2.1vw, 27px)/1.38 var(--ff-display); color: var(--navy-900); }
.quote-slip__body { margin-top: 12px; font-size: 14.5px; line-height: 1.85; color: var(--ink-2); }
.hero .quote-slip { background: rgba(7, 26, 46, 0.72); border-color: rgba(224, 203, 154, 0.3); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.hero .quote-slip__label { color: var(--gold-300); }
.hero .quote-slip__main { color: var(--cream); }
.hero .quote-slip__body { color: var(--on-dark-2); }

.portrait-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.portrait-strip figure { margin: 0; }
.portrait-strip img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; background: #CFC8B8; outline: 1px solid rgba(224, 203, 154, 0.35); outline-offset: 4px; }
.portrait-strip figcaption { margin-top: 14px; font: 500 11.5px/1.5 var(--ff-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark-3); }
.portrait-strip figcaption strong { display: block; margin-bottom: 3px; font: 700 17px/1.3 var(--ff-display); letter-spacing: 0; text-transform: none; color: var(--cream); }

@media (max-width: 900px) {
  .hero .grid > * { grid-column: 1 / -1; }
  .hero::after { left: 85%; top: 22%; opacity: 0.16; }
  .portrait-strip { max-width: 520px; }
}

/* ---------------------------------------------------------------- inner page hero */
.page-hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(52px, 7.5vw, 112px) 0 clamp(60px, 7.5vw, 104px); background: var(--paper); }
.page-hero::before { content: ""; position: absolute; z-index: -1; width: min(820px, 120vw); aspect-ratio: 1; right: max(-260px, -22vw); top: 50%; transform: translateY(-50%); background: var(--compass-navy) center / contain no-repeat; opacity: 0.075; }
.page-hero::after, .legal-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16px;
  background:
    repeating-linear-gradient(90deg, rgba(14, 42, 71, 0.3) 0 1px, transparent 1px 96px) left bottom / 100% 14px no-repeat,
    repeating-linear-gradient(90deg, rgba(14, 42, 71, 0.16) 0 1px, transparent 1px 12px) left bottom / 100% 6px no-repeat;
  border-bottom: 1px solid rgba(14, 42, 71, 0.28);
}
.page-hero h1 { margin-top: 18px; font-size: clamp(40px, 6.2vw, 80px); line-height: 1.08; letter-spacing: 0.02em; }
.page-hero__tagline, .legal-hero__tagline { margin-top: 18px; font: italic 500 clamp(18px, 1.8vw, 22px)/1.35 var(--ff-ital); font-synthesis: none; color: var(--gold-600); }
.page-hero .lead { margin-top: 24px; max-width: 40em; }
.page-hero .small-print { margin-top: 14px; max-width: 40em; }
@media (max-width: 900px) { .page-hero .grid > * { grid-column: 1 / -1; } }

/* ---------------------------------------------------------------- pillars, pull-quote */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.5vw, 56px); }
.pillar { position: relative; padding-top: 28px; border-top: 1px solid var(--navy-900); }
.pillar::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; background: var(--gold-500); transform: rotate(45deg); }
.pillar__roman { display: block; font: 600 12px/1.3 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-600); }
.pillar h3 { margin-top: 14px; }
.pillar p { margin-top: 12px; color: var(--ink-2); }
@media (max-width: 860px) { .pillars { grid-template-columns: 1fr; } }

.band-paper { color: var(--on-dark); background: var(--navy-900); text-align: center; }
.band-paper .container { padding-block: clamp(8px, 2vw, 24px); }
.pull-quote { max-width: 980px; margin-inline: auto; }
.pull-quote::before { content: ""; display: block; width: 34px; height: 34px; margin: 0 auto 26px; background: var(--needle) center / contain no-repeat; }
.pull-quote q { display: block; font: 700 clamp(25px, 3.6vw, 44px)/1.42 var(--ff-display); color: var(--cream); quotes: "「" "」"; text-wrap: balance; }
.lang-en .pull-quote q { quotes: "\201C" "\201D"; }
.pull-quote cite { display: block; margin-top: 22px; font: 600 12px/1.4 var(--ff-mono); font-style: normal; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-300); }

/* ---------------------------------------------------------------- checklist, route */
ol.checklist { list-style: none; border-top: 1px solid var(--rule-2); }
ol.checklist > li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--rule); }
.checklist__num { font: 700 24px/1.25 var(--ff-display); color: var(--gold-600); }
.checklist__title { font-size: 18.5px; line-height: 1.45; }
.checklist__body { margin-top: 8px; color: var(--ink-2); }

ol.route { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); border-top: 0; }
ol.route::before { content: ""; position: absolute; left: 8px; right: 0; top: 8px; border-top: 1px dashed var(--gold-500); }
ol.route > li { position: relative; display: block; padding: 40px 0 0; border: 0; }
ol.route > li::before { content: ""; position: absolute; top: 0; left: 0; width: 17px; height: 17px; border-radius: 50%; background: var(--paper-2); border: 2px solid var(--gold-500); }
ol.route > li:last-child::before { background: var(--gold-500); box-shadow: 0 0 0 4px var(--paper-2), 0 0 0 5px var(--gold-500); }
ol.route .checklist__num { font: 600 13px/1 var(--ff-mono); letter-spacing: 0.1em; color: var(--gold-600); }
ol.route .checklist__title { margin-top: 12px; font-size: 18px; line-height: 1.5; }
ol.route .checklist__body { margin-top: 10px; font-size: 14.5px; line-height: 1.8; }
@media (max-width: 1000px) {
  ol.route { grid-template-columns: 1fr; gap: 0; padding-left: 40px; }
  ol.route::before { left: 8px; right: auto; top: 10px; bottom: 10px; border-top: 0; border-left: 1px dashed var(--gold-500); }
  ol.route > li { padding: 0 0 32px; }
  ol.route > li:last-child { padding-bottom: 0; }
  ol.route > li::before { left: -40px; top: 1px; }
}

/* ---------------------------------------------------------------- logo wall */
.logo-wall { display: grid; gap: clamp(24px, 3vw, 36px); }
.logo-group { display: grid; grid-template-columns: minmax(200px, 3fr) 9fr; gap: clamp(20px, 3vw, 40px); padding-top: 26px; border-top: 1px solid var(--navy-900); }
.logo-group__eyebrow { display: block; font: 600 11.5px/1.3 var(--ff-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-600); }
.logo-group__host { margin-top: 10px; font-size: 21px; line-height: 1.3; }
.logo-group__pretty { margin-top: 8px; font-size: 13.5px; line-height: 1.65; color: var(--ink-3); }
.logo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); align-self: start; }
.logo-cell { position: relative; display: flex; align-items: center; justify-content: center; min-height: 104px; padding: 20px 24px; background: var(--white); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.logo-cell img { width: auto; height: auto; max-width: 100%; max-height: 44px; object-fit: contain; }
.logo-cell__text { font: 700 14.5px/1.3 var(--ff-display); text-align: center; color: var(--navy-900); }
.logo-cell__tag { position: absolute; right: 8px; bottom: 6px; font: 600 10px/1 var(--ff-mono); letter-spacing: 0.08em; color: var(--ink-3); }
.logo-wall__footnote { font-size: 14px; color: var(--ink-3); }
@media (max-width: 900px) { .logo-group { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .logo-cell { min-height: 92px; padding: 16px; } .logo-cell img { max-height: 38px; } }

/* ---------------------------------------------------------------- FAQ */
.faq-list { max-width: 940px; border-top: 1px solid var(--rule-2); }
.faq-item { border-bottom: 1px solid var(--rule-2); }
.faq-item summary { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 22px 0; cursor: pointer; list-style: none; font: 700 clamp(17px, 1.55vw, 20px)/1.5 var(--ff-display); color: var(--navy-900); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex: 0 0 14px; height: 14px; margin-top: 0.4em;
  background: linear-gradient(var(--gold-600), var(--gold-600)) center / 14px 1.5px no-repeat, linear-gradient(var(--gold-600), var(--gold-600)) center / 1.5px 14px no-repeat;
  transition: transform 0.25s;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--navy-700); }
.faq-item > p { max-width: 48em; padding-bottom: 24px; color: var(--ink-2); }
.faq-item > p + p { margin-top: -12px; }

/* ---------------------------------------------------------------- closer */
.closer { position: relative; isolation: isolate; overflow: hidden; padding: clamp(84px, 11vw, 150px) 0; color: var(--on-dark); background: var(--navy-950); text-align: center; }
.closer::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(980px, 170vw); aspect-ratio: 1; transform: translate(-50%, -50%); background: var(--compass-gold) center / contain no-repeat; opacity: 0.14; }
.closer .container { display: flex; flex-direction: column; align-items: center; }
.closer__emblem { width: 84px; height: auto; margin-bottom: 22px; }
.closer__sig { font: 600 12px/1.4 var(--ff-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-300); }
.closer .eyebrow { margin-top: 26px; }
.closer .eyebrow::before { display: none; }
.closer h2 { margin-top: 18px; max-width: 18em; font-size: clamp(30px, 4.6vw, 56px); line-height: 1.25; }
.closer h2 + p, .closer p { margin-top: 18px; max-width: 36em; font-size: clamp(16px, 1.4vw, 18.5px); color: var(--on-dark-2); }
.closer .hero__ctas { justify-content: center; margin-top: 36px; }

/* ---------------------------------------------------------------- deep card, spec table, about */
.deep-card { position: relative; height: 100%; padding: clamp(26px, 3vw, 40px); color: var(--on-dark-2); background: var(--navy-900); }
.deep-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--gold-500) 0 64px, transparent 64px); }
.deep-card h3 { margin-top: 12px; }
.deep-card p { margin-top: 14px; }
.deep-card .small-print { color: var(--on-dark-3); }
.gloss-line { display: block; font: 600 11.5px/1.4 var(--ff-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-300); }
.col-6 > .eyebrow + h3, .col-7 > .eyebrow + h2, .col-6 > .eyebrow + h2 { margin-top: 14px; }
.col-6 > h3 + p, .col-6 > h2 + p, .col-7 > h2 + p { margin-top: 14px; }
.section :is(.col-6, .col-7) > p:not([class]) { color: var(--ink-2); }
.col-6 > ul { margin-top: 18px; list-style: none; border-top: 1px solid var(--rule); }
.col-6 > ul > li { padding: 14px 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); }
.col-6 > ul > li strong { color: var(--navy-900); }
.col-6 > ul + p { margin-top: 18px; }
.section--alt .grid > .col-6 > h3:first-child, .section .grid > .col-6 > h3:first-child { padding-top: 22px; border-top: 1px solid var(--rule-2); }

.lead-drop { margin-top: 20px; font-size: clamp(17px, 1.45vw, 19.5px); line-height: 1.8; color: var(--ink); }
.about-team-list { margin: 22px 0; list-style: none; border-top: 1px solid var(--rule-2); }
.about-team-list li { padding: 18px 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); }
.about-team-list strong { color: var(--navy-900); font-family: var(--ff-display); }
.col-7 > p + p, .col-7 > ul + p { margin-top: 1em; }
.section aside.col-5 > figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; background: #E3DDCF; }
.section aside.col-5 > figure figcaption { margin-top: 14px; font: 500 11.5px/1.5 var(--ff-sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.section aside.col-5 > figure figcaption strong { display: block; margin-bottom: 4px; font: 700 17px/1.3 var(--ff-display); letter-spacing: 0; text-transform: none; color: var(--navy-900); }

.mission-band { position: relative; margin-block: clamp(56px, 7vw, 96px); padding: clamp(40px, 5vw, 64px) clamp(20px, 5vw, 72px); text-align: center; background: var(--cream); border-top: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); }
.mission-band::before { content: ""; display: block; width: 30px; height: 30px; margin: 0 auto 18px; background: var(--needle) center / contain no-repeat; }
.mission-band .eyebrow::before { display: none; }
.origin-quote { margin-top: 18px; font: 700 clamp(22px, 3vw, 36px)/1.5 var(--ff-display); color: var(--navy-900); text-wrap: balance; }

.quote-slip--not .not-list { margin-top: 14px; list-style: none; }
.not-list li { position: relative; padding: 12px 0 12px 30px; font: 600 17px/1.5 var(--ff-display); color: var(--navy-900); border-bottom: 1px solid var(--rule); }
.not-list li:last-child { border-bottom: 0; }
.not-list li::before { content: ""; position: absolute; left: 0; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); background: linear-gradient(45deg, transparent 46%, var(--mark) 46% 54%, transparent 54%), linear-gradient(-45deg, transparent 46%, var(--mark) 46% 54%, transparent 54%); }

.spec-table { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); border-top: 1px solid var(--navy-900); }
.spec-table > div { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 24px 0; border-bottom: 1px solid var(--rule); }
.spec-table .eyebrow { font-size: 11px; letter-spacing: 0.12em; }
.spec-table .eyebrow::before { display: none; }
.spec-table strong { font: 600 17px/1.5 var(--ff-sans); color: var(--navy-900); overflow-wrap: anywhere; }
.spec-table a { text-decoration: none; }
.spec-table a:hover strong { color: var(--gold-600); }

/* ---------------------------------------------------------------- services */
.service-block { display: grid; grid-template-columns: minmax(180px, 3fr) 9fr; gap: clamp(20px, 4vw, 64px); padding-block: clamp(36px, 4.5vw, 60px); border-top: 1px solid var(--rule-2); }
.service-block:first-child { border-top: 0; }
.service-block__num { display: flex; flex-direction: column; gap: 12px; font: 700 clamp(56px, 6vw, 84px)/0.9 "Playfair Display", Georgia, serif; color: var(--gold-500); }
.service-block__num .eyebrow { order: -1; font-size: 11.5px; }
.service-block h2 { font-size: clamp(26px, 3vw, 38px); }
.service-block h2 + p, .service-block .lead + p, .service-block h2 + .lead { margin-top: 16px; }
.service-block p { color: var(--ink-2); }
.service-block .lead { color: var(--ink); }
.service-block .small-print { margin-top: 18px; }
.service-block ol.checklist { margin-top: 26px; }
.service-block ol.checklist > li { grid-template-columns: 52px minmax(0, 1fr); }
.service-block .checklist__num { font-family: var(--ff-zh-serif); }
@media (max-width: 820px) { .service-block { grid-template-columns: 1fr; } .service-block__num { flex-direction: row; align-items: baseline; justify-content: space-between; } .service-block__num .eyebrow { order: 1; } }

/* anti-ghost-writing: the one section allowed the red-pen colour */
#anti-ghost-writing { color: var(--on-dark-2); background: var(--navy-950); }
#anti-ghost-writing .section-header h2 { color: var(--cream); font-size: clamp(26px, 3.2vw, 40px); }
#anti-ghost-writing .section-header .lead { color: var(--on-dark-2); }
#anti-ghost-writing .eyebrow { color: var(--gold-300); }
#anti-ghost-writing .col-6 > h3 { color: var(--cream); padding-top: 22px; border-top: 1px solid var(--on-dark-rule); }
#anti-ghost-writing .col-6 > p { color: var(--on-dark-2); }
#anti-ghost-writing .col-6 > p strong { color: var(--gold-300); }
#anti-ghost-writing .small-print { color: var(--on-dark-3); }
#anti-ghost-writing .deep-card { background: #0B2239; border: 1px solid rgba(180, 67, 47, 0.45); }
#anti-ghost-writing .deep-card::before { background: linear-gradient(90deg, var(--mark) 0 64px, transparent 64px); }
#anti-ghost-writing .deep-card .gloss-line { color: #E39A86; }
ol.ladder { counter-reset: step; list-style: none; margin-top: 20px; display: grid; gap: 8px; }
ol.ladder li { counter-increment: step; position: relative; display: flex; align-items: center; gap: 14px; min-height: 46px; padding: 10px 14px; margin-left: calc((var(--i, 1) - 1) * 14px); font: 500 15px/1.5 var(--ff-sans); color: var(--cream); background: rgba(180, 67, 47, calc(0.1 + var(--i, 1) * 0.1)); }
ol.ladder li::before { content: counter(step); flex: 0 0 auto; font: 700 13px/1 var(--ff-mono); color: #F2C1B4; }
ol.ladder li:nth-child(1) { --i: 1; } ol.ladder li:nth-child(2) { --i: 2; } ol.ladder li:nth-child(3) { --i: 3; } ol.ladder li:nth-child(4) { --i: 4; } ol.ladder li:nth-child(5) { --i: 5; }
@media (max-width: 560px) { ol.ladder li { margin-left: calc((var(--i, 1) - 1) * 6px); } }

/* 12-week voyage log */
.voyage-scale { display: grid; grid-template-columns: 5fr 7fr; column-gap: clamp(20px, 3vw, 48px); padding-bottom: 10px; border-bottom: 1px solid var(--navy-900); }
.voyage-scale::before { content: ""; }
.voyage-scale__weeks { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); font: 600 10.5px/1 var(--ff-mono); letter-spacing: 0.02em; color: var(--ink-3); }
.voyage-scale__weeks span { position: relative; padding-top: 8px; }
.voyage-scale__weeks span::before { content: ""; position: absolute; top: 0; left: 0; height: 5px; border-left: 1px solid var(--rule-2); }
ol.voyage { border-top: 0; }
ol.voyage > li { grid-template-columns: 5fr 7fr; column-gap: clamp(20px, 3vw, 48px); row-gap: 8px; align-items: start; padding: 22px 0; }
ol.voyage > li > .checklist__num { grid-column: 1; grid-row: 1; justify-self: start; padding: 3px 8px; font: 600 12px/1.3 var(--ff-mono); letter-spacing: 0.04em; color: var(--cream); background: var(--navy-900); }
ol.voyage > li > div { grid-column: 1; grid-row: 2; }
ol.voyage > li::after {
  content: ""; grid-column: 2; grid-row: 1 / span 2; align-self: start; margin-top: 2px;
  height: 22px; margin-left: calc(var(--from) / 13 * 100%); width: calc((var(--to) - var(--from) + 1) / 13 * 100%);
  background-color: var(--navy-900);
  background-image: repeating-linear-gradient(90deg, transparent 0 calc(100% / (var(--to) - var(--from) + 1) - 1px), rgba(255, 248, 236, 0.4) calc(100% / (var(--to) - var(--from) + 1) - 1px) calc(100% / (var(--to) - var(--from) + 1)));
}
ol.voyage > li:nth-child(4)::after, ol.voyage > li:last-child::after { background-color: var(--gold-500); }
ol.voyage > li:nth-child(4) > .checklist__num, ol.voyage > li:last-child > .checklist__num { color: var(--navy-950); background: var(--gold-500); }
@media (max-width: 860px) {
  .voyage-scale { display: none; }
  ol.voyage { border-top: 1px solid var(--rule-2); }
  ol.voyage > li { grid-template-columns: 1fr; }
  ol.voyage > li::after { display: none; }
}

ol.pledges { list-style: none; margin-top: 18px; border-top: 1px solid var(--on-dark-rule); }
ol.pledges li { padding: 12px 0; color: var(--on-dark); border-bottom: 1px solid var(--on-dark-rule); }

/* ---------------------------------------------------------------- team */
.tutor-card { display: grid; grid-template-columns: minmax(220px, 4fr) 8fr; gap: clamp(24px, 4vw, 64px); padding-block: clamp(32px, 4vw, 56px); border-top: 1px solid var(--navy-900); }
.tutor-card + .tutor-card { border-top-color: var(--rule-2); }
.tutor-card__portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; background: #E3DDCF; }
.tutor-card__text h2 { margin-top: 14px; font-size: clamp(30px, 3.6vw, 46px); }
.tutor-card__chips, .tutor-mini__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.tutor-card__text p { margin-top: 20px; color: var(--ink-2); max-width: 44em; }
@media (max-width: 760px) { .tutor-card { grid-template-columns: 1fr; } .tutor-card__portrait { max-width: 340px; } }

.tutor-mini-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3vw, 40px) clamp(18px, 2.2vw, 28px); }
.tutor-mini { display: flex; flex-direction: column; }
.tutor-mini__portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; background: #E3DDCF; }
.tutor-mini__role { margin-top: 16px; font: 600 11.5px/1.4 var(--ff-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-600); }
.tutor-mini__name { margin-top: 6px; font-size: 22px; }
.tutor-mini__chips { margin-top: 12px; }
.tutor-mini__chips .chip { font-size: 12px; }
.tutor-mini__subjects { margin-top: 14px; padding-top: 12px; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); border-top: 1px solid var(--rule); }
.tutor-mini__subjects strong { display: block; margin-bottom: 2px; font: 600 11px/1.5 var(--ff-sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.tutor-mini__highlight { margin-top: 12px; font: 500 14.5px/1.75 var(--ff-zh-serif); color: var(--navy-900); }
.lang-en .tutor-mini__highlight { font-family: var(--ff-ital); font-size: 17px; font-style: italic; font-synthesis: none; line-height: 1.5; }
@media (max-width: 1100px) { .tutor-mini-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .tutor-mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .tutor-mini-grid { grid-template-columns: 1fr; } .tutor-mini__portrait { max-width: 320px; } }

/* ---------------------------------------------------------------- contact */
.page-contact ol.checklist, .page-en-contact ol.checklist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--navy-900); }
.page-contact ol.checklist > li, .page-en-contact ol.checklist > li { grid-template-columns: 1fr; gap: 10px; padding: 24px 24px 26px 0; }
@media (max-width: 860px) { .page-contact ol.checklist, .page-en-contact ol.checklist { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .page-contact ol.checklist, .page-en-contact ol.checklist { grid-template-columns: 1fr; } }
.map-wrap { position: relative; border: 1px solid var(--rule-2); background: var(--paper-2); }
.map-wrap iframe { display: block; width: 100%; height: clamp(300px, 42vw, 440px); border: 0; filter: grayscale(0.35) contrast(1.02); }
.map-fallback { margin-top: 14px; font-size: 14px; color: var(--ink-3); }

/* ---------------------------------------------------------------- programmes */
.prog-tally { display: flex; flex-wrap: wrap; gap: 0; margin-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--navy-900); }
.prog-tally a { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex: 1 1 200px; padding: 18px 22px 18px 0; text-decoration: none; border-bottom: 1px solid var(--rule); }
.prog-tally a + a { padding-left: 22px; border-left: 1px solid var(--rule); }
.prog-tally__name { font: 700 19px/1.3 var(--ff-display); color: var(--navy-900); }
.prog-tally__count { font: 600 28px/1 "Playfair Display", Georgia, serif; color: var(--gold-600); }
.prog-tally a:hover .prog-tally__name { color: var(--gold-600); }
@media (max-width: 640px) { .prog-tally a + a { padding-left: 0; border-left: 0; } }

.prog-filter-wrap { position: relative; padding: clamp(20px, 2.6vw, 32px); background: var(--white); border: 1px solid var(--rule-2); }
.prog-filter { display: grid; gap: 18px; }
.prog-filter__group { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: start; }
.prog-filter__label { padding-top: 8px; font: 600 11.5px/1.3 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.prog-filter__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chip { min-height: 34px; padding: 0 12px; font: 500 13.5px/1 var(--ff-sans); color: var(--ink-2); background: var(--paper); border: 1px solid var(--rule-2); border-radius: 2px; cursor: pointer; transition: background-color 0.15s, color 0.15s, border-color 0.15s; }
.filter-chip:hover { border-color: var(--navy-900); color: var(--navy-900); }
.filter-chip.is-active { color: var(--cream); background: var(--navy-900); border-color: var(--navy-900); }
.prog-filter__actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 18px; border-top: 1px solid var(--rule); }
.prog-filter__search { flex: 1 1 260px; min-height: 40px; padding: 0 14px; font: 400 15px/1 var(--ff-sans); color: var(--ink); background: var(--paper); border: 1px solid var(--rule-2); border-radius: 2px; }
.prog-filter__search:focus { outline: 2px solid var(--gold-500); outline-offset: 1px; border-color: var(--navy-900); }
@media (max-width: 640px) { .prog-filter__group { grid-template-columns: 1fr; gap: 8px; } .prog-filter__label { padding-top: 0; } }
.prog-result-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin: 28px 0 8px; padding-bottom: 12px; border-bottom: 1px solid var(--navy-900); }
.prog-result-bar__count { font: 700 20px/1.3 var(--ff-display); color: var(--navy-900); }
.prog-result-bar__hint { font-size: 13.5px; color: var(--ink-3); }
.prog-group { padding-top: clamp(32px, 4vw, 48px); }
.prog-group__head { display: flex; align-items: center; gap: 14px; }
.prog-group__title { font-size: clamp(24px, 2.6vw, 32px); }
.prog-group__count { font: 500 14px/1 var(--ff-mono); color: var(--ink-3); }
.prog-sub { margin-top: 22px; }
.prog-sub__title { padding-bottom: 10px; font: 600 12px/1.3 var(--ff-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-600); border-bottom: 1px solid var(--rule); }
.prog-sub__count { color: var(--ink-3); }
.prog-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 clamp(16px, 2vw, 28px); }
.prog-card { display: flex; flex-direction: column; gap: 10px; padding: 20px 0 18px; border-bottom: 1px solid var(--rule); }
.prog-card__head { display: flex; align-items: center; gap: 12px; min-height: 30px; }
.prog-card__logo img { width: auto; height: auto; max-width: 110px; max-height: 28px; object-fit: contain; }
.prog-card__logo-text { font: 700 12px/1.3 var(--ff-display); color: var(--navy-900); }
.prog-card__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 12.5px; color: var(--ink-3); }
.prog-card__country { font: 600 10.5px/1 var(--ff-mono); letter-spacing: 0.08em; }
.prog-card__title { font: 700 17px/1.45 var(--ff-display); color: var(--navy-900); }
.prog-card__note { font-size: 13px; color: var(--ink-3); }
.prog-card__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.prog-card__chips .chip { font-size: 11.5px; padding: 2px 8px; }
.prog-card__dl { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 4px 22px; font-size: 12.5px; }
.prog-card__dl dt { font: 600 10.5px/1.4 var(--ff-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.prog-card__dl dd { margin: 0; color: var(--ink-2); }
.prog-card__toggle { align-self: flex-start; padding: 6px 0; font: 600 13px/1 var(--ff-sans); color: var(--navy-900); background: none; border: 0; border-bottom: 1px solid var(--gold-500); cursor: pointer; }
.prog-card__modules { padding: 12px 14px; background: var(--paper-2); }
.prog-card__modules-note { font-size: 12.5px; color: var(--ink-3); }
.prog-card__module-list { margin-top: 8px; padding-left: 18px; font-size: 13.5px; color: var(--ink-2); }
.prog-empty { padding: 32px 0; color: var(--ink-3); }

/* ---------------------------------------------------------------- legal */
.legal-hero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(48px, 6.5vw, 96px) 0 clamp(52px, 6vw, 84px); background: var(--paper); }
.legal-hero__inner { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.legal-hero h1 { margin-top: 18px; font-size: clamp(38px, 5.4vw, 68px); line-height: 1.1; }
.legal-hero__lead { margin-top: 22px; max-width: 46em; font-size: clamp(16px, 1.3vw, 18px); color: var(--ink-2); }
.legal-meta { display: flex; flex-wrap: wrap; gap: 0; margin-top: 30px; border-top: 1px solid var(--rule-2); }
.legal-meta__cell { display: flex; flex-direction: column; gap: 6px; padding: 14px 28px 0 0; margin-right: 28px; }
.legal-meta__cell + .legal-meta__cell { padding-left: 28px; border-left: 1px solid var(--rule); }
.legal-meta__cell .eyebrow { font-size: 10.5px; }
.legal-meta__cell .eyebrow::before { display: none; }
.legal-meta__cell strong { font: 600 15px/1.4 var(--ff-mono); color: var(--navy-900); }
@media (max-width: 640px) { .legal-meta__cell + .legal-meta__cell { padding-left: 0; border-left: 0; } }

.legal-article { display: grid; grid-template-columns: minmax(200px, 3fr) minmax(0, 8fr); gap: clamp(24px, 5vw, 80px); max-width: var(--container); margin-inline: auto; padding: clamp(40px, 5vw, 72px) var(--gutter) var(--sec); }
.legal-article > :not(.legal-toc) { grid-column: 2; }
.legal-toc { grid-column: 1; grid-row: 1 / span 40; align-self: start; position: sticky; top: calc(var(--header-h) + 24px); max-height: calc(100vh - var(--header-h) - 48px); overflow-y: auto; padding-right: 8px; }
.legal-toc__label { display: block; padding-bottom: 12px; font: 600 11.5px/1.3 var(--ff-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-600); border-bottom: 1px solid var(--navy-900); }
.legal-toc ol { list-style: none; }
.legal-toc li a { display: block; padding: 9px 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--rule); }
.legal-toc li a:hover, .legal-toc li a.is-active { color: var(--navy-900); }
.legal-toc li a.is-active { box-shadow: inset 2px 0 0 var(--gold-500); padding-left: 10px; }
.legal-article section { max-width: 46em; padding-bottom: clamp(32px, 4vw, 48px); scroll-margin-top: calc(var(--header-h) + 20px); }
.legal-article section + section { padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--rule); }
.legal-article h2 { font-size: clamp(22px, 2.3vw, 28px); line-height: 1.35; }
.legal-article h2 .num { display: block; margin-bottom: 8px; font: 600 11.5px/1.3 var(--ff-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-600); }
.legal-article h3 { margin-top: 22px; font-size: 18.5px; }
.legal-article p, .legal-article li, .legal-article dd { color: var(--ink-2); }
.legal-article h2 + p, .legal-article h2 + ul, .legal-article h2 + ol, .legal-article h2 + dl { margin-top: 16px; }
.legal-article section > p + ul, .legal-article section > p + ol, .legal-article section > p + dl, .legal-article section > ul + p, .legal-article section > ol + p, .legal-article section > dl + p, .legal-article section > div + p { margin-top: 14px; }
.legal-article section > ul, .legal-article section > ol { padding-left: 1.3em; }
.legal-article section > ul li + li, .legal-article section > ol li + li { margin-top: 8px; }
.legal-article li::marker { color: var(--gold-600); }
.legal-dl { margin-top: 16px; display: grid; grid-template-columns: minmax(140px, 13em) minmax(0, 1fr); border-top: 1px solid var(--rule-2); }
.legal-dl dt, .legal-dl dd { padding: 13px 0; border-bottom: 1px solid var(--rule); }
.legal-dl dt { padding-right: 18px; font-weight: 600; color: var(--navy-900); }
@media (max-width: 640px) { .legal-dl { grid-template-columns: 1fr; } .legal-dl dt { padding-bottom: 0; border-bottom: 0; } .legal-dl dd { padding-top: 4px; } }
.legal-dpo { margin-top: 22px; padding: 24px 26px; background: var(--white); border: 1px solid var(--rule-2); border-top: 2px solid var(--gold-500); }
.legal-dpo h3 { margin-top: 10px; }
.legal-dpo p { margin-top: 8px; }
.legal-callout { margin-top: 18px; padding: 16px 20px; background: var(--cream); border: 1px solid var(--rule-2); }
.legal-cross { margin-top: clamp(24px, 3vw, 40px); padding-top: 24px; border-top: 1px solid var(--navy-900); }
.legal-cross__label { display: block; font: 600 11.5px/1.3 var(--ff-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-600); }
.legal-cross__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 14px; border-top: 1px solid var(--rule); }
.legal-cross__grid a { display: flex; justify-content: space-between; gap: 12px; padding: 14px 12px 14px 0; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--rule); }
.legal-cross__grid a:hover { color: var(--gold-600); }
@media (max-width: 900px) {
  .legal-article { grid-template-columns: 1fr; }
  .legal-article > :not(.legal-toc) { grid-column: 1; }
  .legal-toc { position: static; grid-row: auto; max-height: none; overflow: visible; }
  .legal-cross__grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- 404 */
.notfound { min-height: 56vh; display: flex; align-items: center; }
.notfound h1 { font-size: clamp(56px, 10vw, 120px); line-height: 1; color: var(--gold-500); }
.notfound p { margin-top: 16px; font-size: 18px; color: var(--ink-2); }
.notfound .hero__ctas { margin-top: 28px; }

/* ---------------------------------------------------------------- responsive grid + motion */
@media (max-width: 900px) {
  .grid > .col-5, .grid > .col-6, .grid > .col-7 { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s ease, transform 0.7s ease; }
  .reveal.is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}
@media print {
  .site-header, .mobile-cta, .site-footer, .closer, .legal-toc { display: none !important; }
  body { background: #fff; padding: 0; }
  .hero, #anti-ghost-writing { color: #000; background: #fff; }
}

/* header while the mobile menu is open */
.nav-open .site-header { color: var(--on-dark); background: var(--navy-950); border-bottom-color: rgba(224, 203, 154, 0.12); }
.nav-open .wordmark__text { color: var(--cream); }
.nav-open .lang-switch { border-color: rgba(244, 239, 227, 0.26); }

/* FAQ sections: heading column + accordion column on wide screens */
@media (min-width: 1000px) {
  .section > .container:has(> .faq-list) { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(32px, 5vw, 80px); align-items: start; }
  .section > .container:has(> .faq-list) > .section-header { position: sticky; top: calc(var(--header-h) + 32px); margin-bottom: 0; }
  .section > .container:has(> .faq-list) > .faq-list { max-width: none; }
}

/* spacing fixes */
.page-contact ol.checklist > li, .page-en-contact ol.checklist > li { align-content: start; }
.section .container > .grid + p { margin-top: clamp(28px, 3vw, 40px); max-width: 60em; color: var(--ink-2); }
.section--alt + .section--alt { padding-top: 0; }