/* TGO Brands — site styles.
   One file, no build step. Tokens first, then base type, layout, components,
   page sections, the 中文 layer, responsive passes and motion. Built from the
   "TGO Brands v3 Glass" design and tightened into one system: Apple-style
   type on a #f5f5f7 ground, one spacing rhythm, cards that always contrast
   with the ground beneath them, a frosted capsule nav and a dark hero. */

/* ── Tokens ──────────────────────────────────────────────────────────── */
:root {
  --bg: #f5f5f7;
  --text: #1d1d1f;
  --ink-2: #424245;
  --ink-3: #6e6e73;
  --ink-4: #86868b;
  --line: #d2d2d7;
  --accent: #0071e3;
  --accent-hover: #0077ed;
  --accent-bright: #2997ff;
  --accent-deep: #0066cc;
  --paper-ink: #14161a;

  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* type ladder: display 72 / title 52 / headline 34 / subhead 24 / lead 21 / body 17 / caption 14 */
  --t-display: clamp(44px, 6vw, 72px);
  --t-title: clamp(34px, 4.2vw, 52px);
  --t-headline: clamp(26px, 2.8vw, 34px);
  --t-subhead: 24px;
  --t-lead: 21px;
  --t-body: 17px;
  --t-caption: 14px;

  /* rhythm: full section, half section, the page gutter, grid gaps */
  --sec-y: clamp(48px, 5.1vw, 74px);
  --sec-y-half: clamp(24px, 2.6vw, 37px);
  --gap: clamp(20px, 2.6vw, 34px);
  --gutter: clamp(22px, 5vw, 56px);
  --measure: 980px;
  --nav-space: 78px;

  /* card surfaces: white with a soft shadow on the grey ground; on a white
     band they flip to the ground colour so a card never disappears */
  --surface: #fff;
  --surface-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);

  --r-card: 18px;
  --r-mini: 14px;
  --r-strip: 22px;
  --r-sheet: 30px;
  --shadow-lift: 0 12px 32px rgba(0, 0, 0, 0.1);
  --glass-spec: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(255, 255, 255, 0.45);
  --glass-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.28), 0 2px 6px -2px rgba(0, 0, 0, 0.08);

  --ease: cubic-bezier(0.22, 0.61, 0.24, 1);
  --ease-snap: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ── Base ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-space) + 12px); }
/* in-page links (#check, #plan, the service groups) glide instead of jumping */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; min-height: 100svh;
  background: var(--bg); color: var(--text);
  font-family: var(--font-text); font-size: 15px; line-height: 1.55;
  text-wrap: pretty;
}
img, video { display: block; max-width: 100%; }
figure { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 600; text-wrap: balance; }
p { margin: 0; }
ol { margin: 0; padding: 0; }
a { color: var(--accent-deep); text-decoration: none; }
a:hover { color: var(--accent); }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
a, button, label { touch-action: manipulation; }

.skip {
  position: absolute; left: 12px; top: -80px; z-index: 100;
  padding: 10px 18px; border-radius: 980px; background: var(--text); color: #fff; font-size: 14px;
}
.skip:focus { top: 12px; color: #fff; }

/* type inside the page body — zero specificity so components override */
:where(.page) p { font-size: var(--t-body); line-height: 1.47; letter-spacing: -0.008em; color: var(--ink-2); }
:where(.page) :is(h1, h2, h3) { letter-spacing: -0.015em; }
:where(.page) h1 { font-size: var(--t-display); line-height: 1.06; }
:where(.page) h2 { font-size: var(--t-title); line-height: 1.07; }
:where(.page) h3 { font-size: var(--t-subhead); line-height: 1.17; }
:where(.page) a { color: var(--accent-deep); }
:where(.page) a:hover { color: var(--accent); text-decoration: underline; }
/* actions whose destination is still to come: same look, no dead click */
a.is-pending, a.is-pending:hover { cursor: default; text-decoration: none; color: var(--ink-3); }
.display { font-size: var(--t-display); line-height: 1.06; }

.eyebrow {
  font-size: 12px; font-weight: 600; line-height: 1.3;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3);
}
.lead {
  max-width: var(--mw, 44ch); margin-inline: auto; text-align: center; text-wrap: balance;
  font-size: var(--t-lead); line-height: 1.38; letter-spacing: -0.012em; color: var(--ink-3);
}
.footnote { margin-top: 28px; text-align: center; }

/* ── Layout ──────────────────────────────────────────────────────────── */
.page { padding-top: var(--nav-space); }
.page--home { padding-top: 0; }
.wrap { max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); }
.sec { padding-block: var(--sec-y); }
.band { --surface: var(--bg); --surface-shadow: none; background: #fff; }
.band--ruled { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* three-item rows (posts, story acts, contact channels) stay three-up until the phone stack */
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--280 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }

/* section header: grey eyebrow, one statement headline, optional lead */
.shead { margin-bottom: var(--sec-y-half); text-align: center; }
.shead .eyebrow { margin-bottom: 12px; }
.shead .lead { margin-top: 16px; }
.sech { max-width: 20ch; margin-inline: auto; line-height: 1.06; text-align: center; }
.title { max-width: var(--mw, none); margin-inline: auto; text-align: center; }

/* interior page header */
.phead { padding-top: var(--sec-y); padding-bottom: var(--sec-y-half); text-align: center; }
.phead > .eyebrow { margin-bottom: 24px; }
.phead > h1 { margin-bottom: 24px; }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 0 22px;
  border: 0; border-radius: 980px; background: transparent;
  font-family: var(--font-text); font-size: 17px; font-weight: 400; line-height: 1.2; letter-spacing: -0.01em;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.btn:hover { text-decoration: none; }
/* small link-style controls keep their look but get a 44px touch target */
.btn--link, .footer__links a, .back-link, .person__contact, .table td a { position: relative; }
.btn--link::after, .footer__links a::after, .back-link::after, .person__contact::after, .table td a::after {
  content: ""; position: absolute; inset: -15px -8px;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn--primary, .btn--primary:hover { color: #fff; }
.btn--primary { background: var(--accent); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--link { min-height: 0; padding: 0; color: var(--accent-deep); }
.btn--link:hover { color: var(--accent); text-decoration: underline; }
.btn--lg { min-height: 52px; padding: 0 30px; }
.btn--glass, .btn--glass:hover { color: #fff; }
.btn--glass {
  border: 1px solid rgba(255, 255, 255, 0.42); background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
}
.btn--glass:hover { background: rgba(255, 255, 255, 0.24); }
.btn--light, .btn--light:hover { color: var(--text); }
.btn--light { background: var(--bg); }
.btn--light:hover { background: rgba(255, 255, 255, 0.9); }
.btn--outline, .btn--outline:hover { color: var(--text); }
.btn--outline { padding: 0 26px; border: 1px solid var(--line); background: #fff; }

.chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 34px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 980px;
  background: rgba(255, 255, 255, 0.55); box-shadow: var(--glass-spec);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  color: var(--text); font-family: var(--font-display); font-size: 14px; font-weight: 600; line-height: 1;
  transition: transform 0.25s var(--ease), background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.chip:hover { transform: translateY(-2px); color: var(--text); text-decoration: none; }
.chip[aria-pressed="true"], .chip[aria-current="page"], .chip[aria-current="page"]:hover {
  border-color: var(--accent); background: var(--accent); color: #fff;
  box-shadow: 0 8px 20px -12px color-mix(in srgb, var(--accent) 85%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.chips, .region { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 32px; }
.region { align-items: center; }
.region .eyebrow { margin-right: 12px; }

.tag {
  display: inline-flex; align-items: center; padding: 3px 10px;
  border-radius: 999px; background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--accent-deep);
  font-size: 12px; font-weight: 500; letter-spacing: 0.01em; white-space: nowrap;
}
.tag--outline { border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: none; }

/* ── Cards and photographs ───────────────────────────────────────────── */
.panel, .person, .bcard, .done__card {
  border-radius: var(--r-card); background: var(--surface); box-shadow: var(--surface-shadow);
  transition: transform 0.4s var(--ease), box-shadow 0.4s ease;
}
.panel:hover, .person:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.panel { display: block; padding: clamp(26px, 2.8vw, 36px); color: var(--text); }
.panel:hover { color: var(--text); text-decoration: none; }
.panel h3 + p { margin-top: 10px; }

/* every photograph prints black and white */
.photo { overflow: hidden; border-radius: var(--r-card); filter: grayscale(1) contrast(1.08); }
.photo img {
  width: 100%; aspect-ratio: var(--ar, 4 / 3); object-fit: cover; border-radius: var(--r-card);
  filter: grayscale(1) contrast(1.02) brightness(1.04);
  transition: transform 0.7s var(--ease), filter 0.5s ease;
}
.photo--4x3 { --ar: 4 / 3; }
.photo--3x4 { --ar: 3 / 4; }
.photo--16x10 { --ar: 16 / 10; }
.photo--16x9 { --ar: 16 / 9; }
.photo--4x5 { --ar: 4 / 5; }
a:hover .photo img, article:hover .photo img { transform: scale(1.05); }
/* inside a card the photograph runs flush to the card's own corners */
:is(.bcard, .fcard, .person) :is(.photo, .photo img) { border-radius: 0; }

/* ── Nav: merged with the page at the top, a frosted capsule once scrolled ── */
.nav {
  position: fixed; z-index: 40; top: var(--nav-top, 22px); left: 0; right: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 46px;
  padding: 0 clamp(16px, 3vw, 40px);
  transition: top 0.6s var(--ease-snap);
}
.nav__logo, .nav__logo:hover {
  display: flex; justify-self: start; align-items: center; gap: 8px; min-width: 44px; min-height: 44px;
  color: var(--text); font-family: var(--font-display); font-size: 18px; font-weight: 600;
  letter-spacing: -0.01em; white-space: nowrap;
}
.nav__word { color: var(--ink-3); letter-spacing: -0.02em; }
.nav[data-scrolled="1"] .nav__word { color: var(--text); }

.nav__tools { display: flex; justify-self: end; align-items: center; gap: 8px; }
/* the links pill: frosted, with a hairline edge; the dropdown panels hang from it */
.nav__links { display: flex; align-items: center; gap: 2px; min-width: 0; }
.nav__links[popover] {
  position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: max-content; height: 44px; margin: 0; padding: 4px 6px;
  overflow: visible; border: 0.5px solid var(--chrome-line); border-radius: 14px; background: var(--chrome); color: inherit;
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.35);
  transition: background 0.4s ease, border-color 0.4s ease;
}
.nav[data-scrolled="1"] .nav__links[popover] { background: var(--chrome-solid); }
.nav__link {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; height: 36px; padding: 0 28px; border-radius: 10px;
  color: var(--text); font-size: 14px; font-weight: 400; white-space: nowrap;
  transition: color 0.28s ease;
}
.nav__link::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 999px;
  background: rgba(0, 0, 0, 0.05); opacity: 0; transform: scale(0.72);
  transition: transform 0.36s var(--ease), opacity 0.26s ease;
}
.nav__link:hover::before { opacity: 1; transform: scale(1); }
.nav__link:hover, .nav__link[aria-current="page"] { color: #000; }
.nav__lang {
  display: inline-flex; text-align: center; flex-shrink: 0; align-items: center; justify-content: center;
  height: 38px; padding: 0 16px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.04); color: var(--text);
  font-family: var(--font-display); font-size: 12px; font-weight: 800; line-height: normal; letter-spacing: 0.04em; white-space: nowrap;
  transition: transform 0.25s var(--ease), background 0.25s ease, color 0.25s ease;
}
.nav__lang:hover { transform: translateY(-1px); background: rgba(0, 0, 0, 0.1); color: #000; }
.nav__cta, .nav__cta:hover { color: #fff; }
.nav__cta {
  flex: 0 0 auto; gap: 14px; min-height: 46px; padding: 0 8px 0 22px;
  background: var(--text); font-size: 15px; font-weight: 500; white-space: nowrap;
  box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.6);
}
.nav__cta:hover { background: #000; }
.nav__arrow {
  display: grid; flex: 0 0 30px; place-items: center; width: 30px; height: 30px;
  border-radius: 999px; background: rgba(255, 255, 255, 0.16); font-size: 14px; line-height: 1;
  transition: transform 0.34s var(--ease), background 0.25s ease;
}
.nav__cta:hover .nav__arrow { transform: translateX(2px); background: rgba(255, 255, 255, 0.26); }
.nav__cta--drawer, .nav__burger { display: none; }

/* over the dark hero the chrome turns white: smoked glass keeps the white links legible */
.nav[data-hero="1"][data-dark="1"] :is(.nav__logo, .nav__word, .nav__lang, .nav__burger),
.nav[data-hero="1"][data-dark="1"] .nav__link { color: #fff; }
.nav[data-hero="1"][data-dark="1"] .nav__links[popover] { border-color: rgba(255, 255, 255, 0.16); background: rgba(18, 18, 18, 0.72); }
.nav[data-hero="1"][data-dark="1"] .nav__link::before { background: rgba(255, 255, 255, 0.16); }
.nav[data-hero="1"][data-dark="1"] .nav__lang { background: rgba(255, 255, 255, 0.16); }
.nav[data-hero="1"][data-dark="1"] .nav__lang:hover { background: rgba(255, 255, 255, 0.28); }

/* ── Footer ──────────────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--line); }
.footer__top {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px 0; align-items: start;
  max-width: 1280px; margin: 0 auto; padding: 48px var(--gutter) 28px;
}
/* the site map: on desktop its eight sections join the brand in one five-across grid of two rows
   (services take two cells); below 1100px the map is its own grid under the brand */
.footer__map { display: contents; }
.footer__brand { padding-right: 24px; }
/* fifteen services take a double column, listed in two */
.footer__col--wide { grid-column: span 2; }
.footer__col--wide .footer__list { columns: 2; column-gap: 16px; }
.footer__list a { break-inside: avoid; }
.footer__logo, .footer__logo:hover {
  display: inline-flex; gap: 6px; margin-bottom: 12px; color: var(--text);
  font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.01em;
}
.footer__logo span { color: var(--ink-3); }
.footer__brand p { max-width: 36ch; color: var(--ink-3); font-size: 14px; line-height: 1.5; }
.footer__h { display: block; margin-bottom: 8px; color: var(--text); font-size: 13px; font-weight: 600; line-height: 1.3; }
a.footer__h:hover { color: var(--accent); text-decoration: none; }
.footer__col a:not(.footer__h) { display: block; padding: 3px 0; color: var(--ink-3); font-size: 13px; line-height: 1.35; }
.footer__col a:hover { color: var(--text); }
.footer__top + .footer__in { border-top: 1px solid var(--line); }
.footer__in {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px 40px;
  max-width: 1200px; margin: 0 auto; padding: 36px var(--gutter);
  color: var(--ink-3); font-size: 13px;
}
.footer__in p { margin-right: auto; }
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 40px; }

/* ── Home: hero ──────────────────────────────────────────────────────── */




/* the plate resolves into the page ground rather than cutting off */









/* ── Marquees ────────────────────────────────────────────────────────── */







/* ── The route: one hairline, four stations ──────────────────────────── */
@keyframes rdraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rtick { from { opacity: 0; } to { opacity: 1; } }
.route { padding-bottom: clamp(40px, 5vw, 72px); }
.route__track { position: relative; padding-top: 30px; }
.route__track::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 26%, transparent) 10%,
    color-mix(in srgb, var(--text) 26%, transparent) 90%, transparent);
  transform-origin: left; animation: rdraw 1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
/* one line at every width, swipeable when it overflows; the padding keeps the dots unclipped */
.route__stations {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(104px, 1fr); gap: 16px 20px;
  margin-top: -48px; padding: 48px 0 4px; list-style: none; text-align: center;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: none;
}
.route__stations::-webkit-scrollbar { display: none; }
.route__stations > li { position: relative; scroll-snap-align: center; }
.route__stations > li { animation: rtick 0.5s ease-out 0.7s both; }
.route__dot {
  position: absolute; top: -36px; left: 50%; width: 11px; height: 11px;
  border-radius: 999px; background: var(--text); transform: translateX(-50%);
}
.route__name { margin-bottom: 8px; font-family: var(--font-display); font-size: clamp(18px, 1.7vw, 22px); font-weight: 600; }

/* ── Home sections ───────────────────────────────────────────────────── */
.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.cols p { font-size: var(--t-body); line-height: 1.55; }







.more { padding-top: 20px; text-align: center; }

.bcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sec-y-half); }
.bcard, .bcard:hover { color: var(--text); text-decoration: none; }
.bcard {
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform 0.4s var(--ease-snap), box-shadow 0.4s ease;
}
.bcard:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.1); }
.bcard__body { display: flex; flex: 1; flex-direction: column; padding: clamp(24px, 2.6vw, 32px); }
.bcard__body > .eyebrow { margin-bottom: 10px; }
.bcard h3 { margin-bottom: 10px; font-size: var(--t-subhead); }
.bcard__pos { margin-bottom: 16px; }
.bcard__body > .bcard__meta { margin-bottom: 14px; }
.bcard__link { margin-top: auto; color: var(--accent-deep); font-size: var(--t-caption); font-weight: 500; }
.bcard:hover .bcard__link { text-decoration: underline; }






.actions { display: flex; justify-content: center; margin-top: 40px; }

.post .eyebrow { margin-bottom: 12px; }
.post h3 { margin-bottom: 8px; }

/* home: audience doors, service groups, launch stages, tools */


/* each group is a row: what the stage is for on the left, its services on the right */


















.tool__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 10px; }

.explore { display: flex; flex-direction: column; gap: 10px; }
.explore:hover h3 { color: var(--accent); }
.explore__arrow {
  margin-top: auto; padding-top: 18px; color: var(--accent-deep); font-size: 15px; font-weight: 500;
  transition: transform 0.35s var(--ease-snap);
}
.explore:hover .explore__arrow { transform: translateX(6px); }






/* the closing statement: a full-bleed ink poster */
.poster { background: var(--text); color: var(--bg); text-align: center; }
.poster .title { margin-bottom: 24px; color: var(--bg); }
.poster .title span { display: block; }


/* ── What we do ──────────────────────────────────────────────────────── */
.pillars { padding-bottom: clamp(40px, 5vw, 68px); }
.pillar-row {
  display: grid; justify-items: center; gap: 16px; padding: 30px 0; text-align: center;
  border-top: 1px solid var(--line); transition: border-color 0.3s ease;
}
.pillar-row:hover { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.pillar-row h2 { margin-bottom: 12px; }
.pillar-row__who { color: var(--ink-3); }
.pillar-row__d { max-width: 54ch; }
.start__kicker { margin-bottom: 12px; text-align: center; }
.start__note { max-width: 54ch; margin: 0 auto 40px; text-align: center; }
.step { padding-top: 16px; border-top: 1px solid var(--line); }
.step__n { margin-bottom: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.step h3 { margin-bottom: 12px; }
.cases__kicker { margin-bottom: 32px; text-align: center; }
.case { padding-top: 16px; border-top: 4px solid var(--accent); font-weight: 600; text-align: center; }

/* ── Brands ──────────────────────────────────────────────────────────── */
.brands-table, .brands-cards, .brand-specs, .channels, .posts, .markets, .people { padding-bottom: var(--sec-y); }
.table {
  width: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card);
  border-collapse: separate; border-spacing: 0; font-size: 15px;
}
.table th, .table td { padding: 16px 16px 16px 20px; border-bottom: 1px solid var(--line); }
.table th {
  color: var(--ink-3); font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-align: left; text-transform: uppercase;
}
.table td { font-size: var(--t-body); }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.table td a { font-family: var(--font-display); font-size: var(--t-body); font-weight: 600; }
.nowrap { white-space: nowrap; }


.brand-back { padding-top: var(--sec-y-half); }
.back-link { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.brand-hero {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--gap); align-items: start;
  padding-top: var(--sec-y-half); padding-bottom: var(--sec-y);
}
.brand-hero .lead { margin-inline: 0; text-align: left; }
.brand-hero .eyebrow { margin-bottom: 16px; }
.brand-hero h1 { margin-bottom: 24px; }
.brand-hero__site { margin-top: 28px; }
.spec { padding-top: 16px; border-top: 1px solid var(--line); }
.spec .eyebrow { margin-bottom: 16px; }
.spec__item { margin-bottom: 8px; }
.spec__tag { margin-bottom: 12px; }

/* ── Founders ────────────────────────────────────────────────────────── */
.story { padding-block: var(--sec-y); text-align: center; }
.story > .eyebrow, .story > h1 { margin-bottom: 24px; }
.story > .lead { margin-bottom: clamp(40px, 5vw, 72px); }
.story .grid { text-align: left; }
.act { padding-top: 18px; border-top: 1px solid var(--line); }
.act .eyebrow, .act h2 { margin-bottom: 16px; }
.act h2, .channel-card h2 { font-size: var(--t-headline); line-height: 1.1; }
.profiles-head { padding-top: var(--sec-y); padding-bottom: var(--sec-y-half); text-align: center; }
.profiles-head .eyebrow { margin-bottom: 8px; }
.trio--people { align-items: start; }
.person { height: 100%; overflow: hidden; }
.person > div { padding: clamp(24px, 2.6vw, 32px); }
.person > div > .eyebrow:first-child, .person h2 { margin-bottom: 12px; }
.person h2 { font-size: var(--t-subhead); line-height: 1.17; }
.person__role { margin-bottom: 16px; }
.person__bio { margin-bottom: 20px; }
.people--team .person__bio { margin-bottom: 16px; }
.person__contact { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 20px; font-size: var(--t-caption); color: var(--accent-deep); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.people__kicker { margin-bottom: 24px; padding-top: 40px; border-top: 1px solid var(--line); text-align: center; }

/* ── Markets ─────────────────────────────────────────────────────────── */
.market { padding-block: var(--sec-y-half); border-top: 1px solid var(--line); }
.market__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 12px 24px; margin-bottom: 24px; }
.market .grid .eyebrow { margin-bottom: 12px; }
.facts { row-gap: 28px; }

/* ── Insights ────────────────────────────────────────────────────────── */
.post-row { display: block; padding: 28px 0; border-top: 1px solid var(--line); color: var(--text); text-align: center; }
.post-row:hover { color: var(--text); text-decoration: none; }
.post-row h2 { transition: color 0.25s ease; }
.post-row:hover h2 { color: var(--accent); }
.post-row > .eyebrow:first-child { margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.post-row h2 { max-width: 30ch; margin: 0 auto 12px; font-size: var(--t-headline); }
.post-row__ex { max-width: 62ch; margin: 0 auto 12px; }
.channel { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--gap); align-items: center; }
.channel .eyebrow, .channel h2 { margin-bottom: 16px; }
/* balancing a two-word title in a half-width column splits "Founder-led" at its hyphen */
.channel h2 { text-wrap: wrap; }
.channel p:not(.eyebrow) { max-width: 46ch; margin-bottom: 24px; }

/* page numbers under a listing: shown only once there is more than one page */
.pages { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; padding-top: 28px; border-top: 1px solid var(--line); }
.pages ol { display: flex; gap: 6px; list-style: none; }
.pages__n, .pages__step {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 14px;
  border-radius: 980px; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.pages__n { border: 1px solid var(--line); background: #fff; color: var(--text); transition: border-color 0.25s ease, color 0.25s ease; }
.pages__n:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.pages__n[aria-current="page"], .pages__n[aria-current="page"]:hover { border-color: var(--accent); background: var(--accent); color: #fff; }
.pages__step:hover { text-decoration: none; }
.pages__step.is-off { color: var(--ink-4); }

/* ── Article ─────────────────────────────────────────────────────────── */
.post-head { padding-top: var(--sec-y-half); padding-bottom: var(--sec-y-half); text-align: center; }
.post-head .back-link { display: inline-block; margin-bottom: 32px; }
.post-head > .eyebrow:not(.post-head__lang) { margin-bottom: 16px; }
.post-head h1 { max-width: 20ch; margin: 0 auto 20px; font-size: var(--t-title); line-height: 1.07; }
.post-head .lead { margin-bottom: 16px; }
.post-body { padding-bottom: var(--sec-y-half); }
.post-body .photo { margin-bottom: 36px; }
.post-body p { max-width: 62ch; margin: 0 auto 1em; font-size: 19px; line-height: 1.6; }
.post-body .post-body__soon {
  padding: 22px 24px; border: 1px dashed var(--line); border-radius: var(--r-card);
  color: var(--ink-3); font-size: var(--t-body); text-align: center;
}

/* ── Pager: previous / next at the foot of a page ────────────────────── */
.pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); padding-top: var(--sec-y-half); padding-bottom: var(--sec-y); }
.pager__link {
  display: flex; flex-direction: column; gap: 6px; padding: 22px 26px;
  border-radius: var(--r-card); background: var(--surface); box-shadow: var(--surface-shadow); color: var(--text);
  transition: transform 0.4s var(--ease), box-shadow 0.4s ease;
}
.pager__link:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); color: var(--text); text-decoration: none; }
.pager__link--next { grid-column: 2; text-align: right; }
.pager__dir { color: var(--ink-3); font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; }
.pager__title {
  font-family: var(--font-display); font-size: var(--t-subhead); font-weight: 600; line-height: 1.17;
  letter-spacing: -0.015em; text-wrap: balance; transition: color 0.25s ease;
}
.pager__link:hover .pager__title { color: var(--accent); }

/* ── Services ───────────────────────────────────────────────────────── */
/* pricing-model badges: one colour per model, readable at 12px */
.badge {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap;
}
.badge--fixed { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--ink-2); }
.badge--retainer { background: color-mix(in srgb, var(--accent) 10%, transparent); color: #005bb5; }
.badge--share { background: #e6f4ea; color: #1b6e34; }
.svc-cards > :last-child:nth-child(odd):not(:first-child) { grid-column: 1 / -1; }
.svc-card { display: flex; flex-direction: column; gap: 10px; }
.svc-card h3 + p { margin-top: 0; }
.svc-card__models { display: flex; flex-wrap: wrap; gap: 6px; }
.svc-card__meta {
  display: flex; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 8px;
  color: var(--ink-3); font-size: var(--t-caption); font-weight: 500;
}
.svc-card__meta span { color: var(--accent-deep); transition: transform 0.35s var(--ease-snap); }
.svc-card:hover .svc-card__meta span { transform: translateX(6px); }
.svc-card:hover h3 { color: var(--accent); }
.svc-hero { padding-top: var(--sec-y-half); padding-bottom: var(--sec-y-half); text-align: center; }
.svc-hero > .eyebrow { margin-bottom: 16px; }
.svc-hero h1 { margin-bottom: 20px; }
.svc-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 36px; text-align: left; }
.svc-facts--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.fact { padding: 16px 18px; border-radius: 14px; background: var(--surface); box-shadow: var(--surface-shadow); }
.fact .eyebrow { margin-bottom: 6px; }
.page .fact__v { color: var(--text); font-size: 16px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.fact__v .badge { margin: 2px 4px 2px 0; }
.svc-body { padding-bottom: var(--sec-y); }
.svc-body .eyebrow { margin-bottom: 14px; }
.svc-problem p:not(.eyebrow) { font-size: 19px; line-height: 1.55; }
.ticks { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.ticks li { position: relative; padding-left: 28px; color: var(--ink-2); font-size: var(--t-body); line-height: 1.47; }
.ticks li::before {
  content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent-deep); font-weight: 700;
}
.ticks--no li::before { content: "✕"; color: var(--ink-3); }
.note { margin-top: 20px; color: var(--ink-3); text-align: center; }
.page .note { font-size: var(--t-caption); }

/* ── Launch ─────────────────────────────────────────────────────────── */
.stages { list-style: none; counter-reset: stage; }
.stage { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px 24px; padding: 28px 0; border-top: 1px solid var(--line); }
.stage:last-child { border-bottom: 1px solid var(--line); }
.page .stage__n {
  color: var(--accent-deep); font-family: var(--font-display); font-size: 28px; font-weight: 600;
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.stage h3 { margin-bottom: 8px; }
.stage__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 18px 0 14px; }
.stage__facts dt {
  margin-bottom: 4px; color: var(--ink-3); font-size: 12px; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase;
}
.stage__facts dd { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.45; }
.fit h3 { margin-bottom: 16px; }
.faq { max-width: 760px; margin-inline: auto; }
.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__item summary {
  position: relative; padding: 20px 40px 20px 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: 19px; font-weight: 600; line-height: 1.35;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  color: var(--accent-deep); font-size: 24px; font-weight: 400; transition: transform 0.25s var(--ease);
}
.faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq__item p { padding-bottom: 20px; }
.poster .poster__note { max-width: 48ch; margin: -8px auto 28px; color: rgba(245, 245, 247, 0.72); }

/* ── Audiences, playbooks, expeditions ──────────────────────────────── */
.page .offer__n { margin-bottom: 10px; color: var(--accent-deep); font-family: var(--font-display); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.offer h3 { margin-bottom: 8px; }
.actions--row { gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.playbook__lead { margin-top: 16px; }
.panel > .eyebrow { margin-bottom: 12px; }
.panel .ticks li { font-size: 16px; }
.page .cities { color: var(--text); font-size: 19px; font-weight: 600; line-height: 1.5; }
.page .price { color: var(--text); font-size: 21px; font-weight: 600; }
.table--spec th[scope="row"] { color: var(--text); font-weight: 600; text-align: left; }
.table--spec td { color: var(--ink-2); }
.itinerary { list-style: none; max-width: 760px; margin-inline: auto; }
.day { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 4px 20px; padding: 20px 0; border-top: 1px solid var(--line); }
.day:last-child { border-bottom: 1px solid var(--line); }
.page .day__n { color: var(--accent-deep); font-weight: 600; font-size: 15px; }
.day h3 { margin-bottom: 4px; font-size: 19px; }

/* ── Entry estimator ─────────────────────────────────────────────────── */
.estimator-wrap { padding-bottom: var(--sec-y); }
.estimator__fields { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; text-align: left; }
.estimator .field label { text-align: left; }
.estimator .input { text-align: left; }
select.input {
  -webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236e6e73' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 16px center;
}
.page .estimator__hint { margin-top: 10px; color: var(--ink-3); font-size: var(--t-caption); }
.est-result { margin-top: 20px; }
.est-result:empty { display: none; }
.est-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.est-block { margin-top: 12px; }
.est-certs { display: grid; margin: 0; padding: 0; list-style: none; }
.est-certs li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 16px; }
.est-certs li:first-child { border-top: 0; }
.est-certs span:last-child { color: var(--text); font-weight: 600; white-space: nowrap; }
.est-services { display: flex; flex-wrap: wrap; gap: 8px; }
.est-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 20px; margin-top: 20px; }

/* ── Partner portal preview ──────────────────────────────────────────── */
.portal-wrap { padding-bottom: var(--sec-y); }
.portal { padding: clamp(20px, 3vw, 32px); border-radius: var(--r-card); background: #fff; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08); text-align: left; }
.portal__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.demo-badge {
  display: inline-block; margin-bottom: 10px; padding: 4px 12px; border-radius: 999px;
  background: #fff4e5; color: #8a4b00; font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
}
.page .portal__company { font-size: var(--t-headline); line-height: 1.1; }
.page .portal__note { color: var(--ink-3); font-size: 15px; }
.page .portal__stage { color: var(--text); font-size: 19px; font-weight: 600; }
.pstages { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; list-style: none; margin: 20px 0; }
.pstage { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 3px solid var(--line); font-size: 12px; }
.pstage.is-done { border-top-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.pstage.is-now { border-top-color: var(--accent); }
.pstage__n { color: var(--ink-3); font-weight: 600; font-variant-numeric: tabular-nums; }
.pstage__t { color: var(--ink-2); line-height: 1.3; }
.pstage.is-now .pstage__t { color: var(--text); font-weight: 600; }
.tabs { display: flex; gap: 6px; margin: 4px 0 20px; padding: 4px; overflow-x: auto; border-radius: 980px; background: var(--bg); scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto; min-height: 44px; padding: 0 16px; border: 0; border-radius: 980px; background: none;
  color: var(--ink-2); font-size: 14px; font-weight: 600;
}
.tab[aria-selected="true"] { background: #fff; color: var(--text); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); }
.js .tabs ~ .panes .pane[hidden] { display: none; }
.pane + .pane { margin-top: 32px; }
.js .pane + .pane { margin-top: 0; }
.pane__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
html:not(.js) .tabs { display: none; }
html:not(.js) .pane__title { position: static; width: auto; height: auto; clip-path: none; margin-bottom: 12px; font-size: var(--t-subhead); }
.portal .svc-facts { margin-top: 0; }
.portal .fact { box-shadow: none; background: var(--bg); }
.next { margin: 16px 0 24px; padding: 16px 18px; border-left: 3px solid var(--accent); border-radius: 0 12px 12px 0; background: color-mix(in srgb, var(--accent) 6%, transparent); }
.page .next p:not(.eyebrow) { color: var(--text); font-weight: 600; }
.page .portal__h { margin-bottom: 14px; font-size: 19px; }
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.quote { margin: 0; padding: 16px 18px; border-radius: 14px; background: var(--bg); }
.page .quote p { color: var(--text); font-size: 15px; line-height: 1.5; }
.quote footer { margin-top: 10px; color: var(--ink-3); font-size: 13px; }
.clock { padding: 16px 0; border-top: 1px solid var(--line); }
.clock__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.clock h3 { font-size: 17px; }
.page .clock__meta { margin: 4px 0 10px; color: var(--ink-3); font-size: 14px; }
.bar { height: 8px; overflow: hidden; border-radius: 980px; background: var(--bg); }
.bar > div { height: 100%; border-radius: 980px; background: var(--accent); }
.sales { display: grid; gap: 14px; }
.sale { display: grid; grid-template-columns: 110px minmax(0, 1fr) 48px; align-items: center; gap: 12px; }
.page .sale__city { color: var(--text); font-size: 15px; font-weight: 600; }
.page .sale__pct { color: var(--ink-2); font-size: 15px; text-align: right; font-variant-numeric: tabular-nums; }
.docs, .msgs { margin: 0; padding: 0; list-style: none; }
.doc { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.doc__icon { flex: 0 0 auto; padding: 4px 6px; border-radius: 6px; background: #fdecea; color: #b3261e; font-size: 11px; font-weight: 700; }
.doc__t { flex: 1; color: var(--text); font-size: 15px; }
.msgs { display: grid; gap: 10px; }
.msg { max-width: 80%; padding: 12px 16px; border-radius: 16px 16px 16px 4px; background: var(--bg); }
.msg--me { justify-self: end; border-radius: 16px 16px 4px 16px; background: color-mix(in srgb, var(--accent) 10%, transparent); }
.page .msg__who { margin-bottom: 2px; color: var(--ink-3); font-size: 12px; font-weight: 600; }
.page .msg p:not(.msg__who) { color: var(--text); font-size: 15px; }

/* ── Contact ─────────────────────────────────────────────────────────── */
.channel-card { padding-top: 18px; border-top: 1px solid var(--line); }
.channel-card h2 { margin-bottom: 12px; }
.channel-card p { margin-bottom: 16px; }
.offices { border-top: 1px solid var(--line); }
.offices__kicker { margin-bottom: 32px; text-align: center; }
.office-list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); text-align: center; }
.office { flex: 0 1 150px; }
.office__city { margin-bottom: 8px; font-weight: 600; }

/* ── Service practices (the IT catalogue) ────────────────────────────
   Numbered cards: the practice, one line on what it is for, then its services
   as a hairline-divided list. Three across on desktop, two on tablets, one on phones. */
.caps-wrap { padding-bottom: var(--sec-y); }
.caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.cap { display: flex; flex-direction: column; }
.cap:hover { transform: none; }
.page .cap__n { margin-bottom: 18px; color: var(--accent); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.cap h3 { margin-bottom: 8px; font-size: 21px; line-height: 1.2; }
.page .cap__d { margin-bottom: 16px; color: var(--ink-3); font-size: 15px; line-height: 1.45; }
.cap__list { margin: 0; padding: 0; list-style: none; }
.cap__list li { padding: 10px 0; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 15px; line-height: 1.4; }
.cap__more { align-self: flex-start; margin-top: 14px; font-size: 15px; }
/* cross-links: a service's see-also row, an article's related page, a tool's button, a linked tag */
.svc-also { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 22px; margin-top: 24px; }
.svc-also .eyebrow { flex: 0 0 100%; margin: 0; text-align: center; }
.post-body .post-rel { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; margin-top: 32px; }
.post-rel .eyebrow { margin: 0; }
.tool__cta { align-self: flex-start; margin-top: auto; }
a.tag--link:hover { border-color: var(--accent); text-decoration: none; }
/* the tag stays small; its touch area does not */
a.tag--link { position: relative; }
a.tag--link::after { content: ""; position: absolute; inset: -9px -4px; }
@media (max-width: 1000px) { .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .caps { grid-template-columns: minmax(0, 1fr); } }

/* ── Founder portraits ───────────────────────────────────────────────
   A real photograph prints in the same black and white, a touch richer, and
   melts into its card at the bottom edge instead of stopping at a hard line.
   The grade sits on the image alone so the fade matches the card exactly. */
.photo--portrait { position: relative; filter: none; }
/* height: auto lets the card ratio win over the width/height attributes (kept to stop layout shift) */
.photo--portrait img { height: auto; filter: grayscale(1) contrast(1.12) brightness(1.02); }
.photo--portrait::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26%; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--surface));
}
.host__face {
  display: block; width: 64px; height: 64px; margin-bottom: 16px; border-radius: 50%; object-fit: cover;
  filter: grayscale(1) contrast(1.1); box-shadow: 0 0 0 1px var(--chip-line), 0 0 0 4px var(--surface), 0 0 0 5px var(--line);
}
@media (max-width: 680px) {
  /* on phones the home cards put the photo beside the text: no fade there */
  
}

/* ── Legal pages: privacy notice, terms of use ──────────────────────── */
.wrap.legal { max-width: calc(760px + 2 * var(--gutter)); padding-bottom: var(--sec-y); }
.page .legal__updated { margin-bottom: 24px; color: var(--ink-3); font-size: var(--t-caption); text-align: center; }
.legal__toc { margin-bottom: 8px; }
.legal__toc .eyebrow { margin-bottom: 12px; }
.legal__toc ol { display: grid; gap: 4px 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-left: 22px; }
.legal__toc li { color: var(--ink-3); font-size: 15px; }
.legal__toc a { display: inline-block; padding: 4px 0; font-size: 15px; }
.legal__toc:hover { transform: none; }
.legal__sec { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.legal__sec h2 { margin-bottom: 14px; font-size: var(--t-subhead); line-height: 1.2; }
.legal__sec p + p, .legal__sec p + ul, .legal__sec ul + p { margin-top: 12px; }
.legal__list { display: grid; gap: 8px; margin: 12px 0 0; padding-left: 22px; color: var(--ink-2); font-size: var(--t-body); line-height: 1.5; }
.legal__list li::marker { color: var(--accent); }
.legal__other { margin-top: 44px; text-align: center; }
/* the collection notice under a form's send button */
.page .form-note { margin-top: 14px; color: var(--ink-3); font-size: var(--t-caption); line-height: 1.5; text-align: center; }
@media (max-width: 680px) {
  .legal__toc ol { grid-template-columns: minmax(0, 1fr); }
  .legal__toc a { display: flex; align-items: center; min-height: 44px; padding: 0; }
}

/* ── Partner survey: a centred sheet, one question per screen ────────── */
.page--partner { min-height: calc(70vh + var(--nav-space)); }
.survey__intro, .survey__step, .done {
  max-width: 760px; margin-inline: auto; padding: var(--sec-y) var(--gutter); text-align: center;
}
.survey__intro .eyebrow, .survey__intro h1 { margin-bottom: 24px; }
.survey__intro h1 { max-width: 20ch; margin-inline: auto; }
.survey__intro .lead { margin-bottom: 32px; }
.survey__intro .btn { display: flex; width: fit-content; margin-inline: auto; }
.progress { max-width: 420px; height: 4px; margin: 0 auto 12px; overflow: hidden; border-radius: 980px; background: var(--line); }
.progress > div { height: 4px; border-radius: 980px; background: var(--accent); }
.step-count { margin-bottom: clamp(28px, 4vw, 52px); font-variant-numeric: tabular-nums; }
.survey__step .display { max-width: 24ch; margin: 0 auto 16px; }
.survey__step .lead { margin-bottom: 32px; }
.opts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 32px; }
.opt {
  position: relative; flex: 0 1 300px; padding: 18px 20px;
  border: 1px solid var(--line); border-radius: 16px; background: #fff;
  color: var(--text); font-family: var(--font-display); font-size: 17px; font-weight: 500; line-height: normal;
  text-align: center; cursor: pointer;
  transition: transform 0.25s var(--ease), border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.opt:hover { transform: translateY(-2px); border-color: var(--accent); }
.opt input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.opt:has(input:checked) {
  border-color: var(--accent); background: var(--accent); color: #fff;
  box-shadow: 0 8px 20px -12px color-mix(in srgb, var(--accent) 85%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.survey__nav { display: flex; justify-content: center; gap: 12px; padding-top: 22px; border-top: 1px solid var(--line); }
.survey__error { margin: 0 0 16px; color: #c4001a; font-size: 15px; font-weight: 500; text-align: center; }
/* the honeypot: off-screen for people, still a field for form-filling bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; text-align: left; }
.field label {
  display: block; margin-bottom: 8px; color: var(--ink-2);
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-align: left; text-transform: uppercase;
}
.field--wide { margin-bottom: 32px; }
.input {
  width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff;
  color: var(--text); font-size: 17px; line-height: 1.55; caret-color: var(--accent);
}
.input:hover { border-color: color-mix(in srgb, var(--text) 45%, transparent); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.16); }
textarea.input { display: block; min-height: 90px; resize: vertical; }
/* a grid cell may shrink below its content, so no field can push past its column */
.field, .input { min-width: 0; }
/* iOS Safari draws date fields natively: a fixed intrinsic width that ignores the
   column, its own height and a centred value. Strip that so they line up with the
   text fields and selects beside them. */
.input[type="date"] {
  -webkit-appearance: none; appearance: none; display: block; max-width: 100%;
  height: calc(17px * 1.55 + 30px); text-align: left;
}
.input[type="date"]::-webkit-date-and-time-value { min-height: calc(17px * 1.55); margin: 0; text-align: left; }

/* the survey runs as a stepper only when scripting is on; without it every
   question is listed in order and the form still reads top to bottom */
.js .survey__step:not(.is-active),
.js .survey[data-state="intro"] .survey__steps,
.js .survey:not([data-state="intro"]) .survey__intro { display: none; }

@keyframes donepop { 0% { opacity: 0; transform: scale(0.5); } 60% { transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } }
@keyframes donetick { to { stroke-dashoffset: 0; } }
.done { display: grid; place-items: center; min-height: 78vh; padding: clamp(60px, 8vw, 110px) var(--gutter); }
.done__in { width: 100%; max-width: 640px; }
.done__tick {
  display: inline-grid; place-items: center; width: 76px; height: 76px; margin-bottom: 28px;
  border-radius: 999px; background: linear-gradient(180deg, #34c759, #28a745); color: #fff;
  box-shadow: 0 16px 34px -16px rgba(40, 167, 69, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  animation: donepop 0.7s var(--ease-snap) both;
}
.done__tick path { stroke-dasharray: 44; stroke-dashoffset: 44; animation: donetick 0.5s cubic-bezier(0.65, 0, 0.35, 1) 0.28s forwards; }
.done .eyebrow { margin-bottom: 12px; }
.done__title { margin-bottom: 16px; font-size: clamp(38px, 5vw, 64px); line-height: 1.06; outline: none; }
.done__sub {
  max-width: 44ch; margin: 0 auto 40px; color: var(--ink-3);
  font-size: var(--t-lead); line-height: 1.4; letter-spacing: -0.012em;
}
.wa-link { position: relative; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.wa { position: absolute; top: -6px; right: -13px; width: 11px; height: 11px; fill: #8e8e93; opacity: 0.75; }
.done__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 560px; margin: 0 auto 40px; }
.done__card { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 20px; }
.done__card .eyebrow { margin-bottom: 10px; }
.done__fig {
  display: inline-block; color: var(--text); font-family: var(--font-display);
  font-size: 28px; font-weight: 600; line-height: 1.1; letter-spacing: -0.018em; font-variant-numeric: tabular-nums;
}
:where(.page) a.done__fig { color: var(--accent); text-decoration: none; }
:where(.page) a.done__fig:hover { text-decoration: underline; }
/* the WhatsApp mark sits beside the name, not pinned above it */
.done__fig { display: inline-flex; align-items: center; gap: 8px; }
.done__fig .wa { position: static; flex: none; width: 18px; height: 18px; fill: currentColor; opacity: 0.6; }
.done__sub .wa-link { display: inline-flex; align-items: center; gap: 4px; }
.done__sub .wa { position: static; width: 14px; height: 14px; fill: currentColor; opacity: 0.6; }
/* inside a button the mark leads the label instead of floating off its corner */
.btn .wa { position: static; flex: none; width: 18px; height: 18px; margin-right: 8px; fill: currentColor; opacity: 0.85; }
.done__score { color: var(--accent); }
.done__of { margin-left: 6px; color: var(--ink-3); font-size: 20px; font-weight: 400; }
.done__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
/* the send buttons are a step of their own: the same 40px above the cards as the lead has above them */
.done__send { margin-bottom: 40px; }

/* ── How-we-work sheet ───────────────────────────────────────────────── */



html:has(.how[open]) { overflow: hidden; }













/* ── 中文 ─────────────────────────────────────────────────────────────
   Stroke-dense glyphs need a larger floor, looser leading, no tracking and
   heavier display weights. Latin keeps the system face; CJK falls to
   PingFang / YaHei / Noto — all system fonts, nothing loaded from a CDN. */
html:lang(zh) {
  --font-cjk: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC";
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, var(--font-cjk), sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, var(--font-cjk), sans-serif;
}
:lang(zh) p { font-size: 17px; line-height: 1.8; letter-spacing: 0; }
:lang(zh) .disp { font-weight: 900; letter-spacing: 0; }
:lang(zh) .eyebrow { font-size: 13px; line-height: 1.6; letter-spacing: 0.07em; }
:lang(zh) .cols p { line-height: 1.55; }



:lang(zh) .route__name { font-size: clamp(16px, 1.7vw, 22px); }



:lang(zh) .done__sub { font-size: 21px; line-height: 1.4; }
:lang(zh) .done__fig { font-size: 28px; line-height: 1.1; letter-spacing: -0.018em; }
:lang(zh) .table :is(th, td) { line-height: 1.6; }
:lang(zh) .table td { font-size: 13px; }


/* ── Responsive ──────────────────────────────────────────────────────── */
/* laptop: the bar runs out of room before the links do */
/* ── Travel: destinations, steps, guide, enquiry form ────────────────── */
.dests .dest--guide { grid-column: 1 / -1; }
.dest { display: flex; flex-direction: column; gap: 16px; }
.dest h3 { font-size: var(--t-subhead); }
.dest__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 20px; margin: 0; }
.dest__facts .eyebrow { margin-bottom: 4px; }
.dest__facts dd { margin: 0; color: var(--text); font-size: 15px; font-weight: 500; line-height: 1.35; }
.dest__links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: auto; padding-top: 4px; }
.hsteps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.hstep { padding-top: 16px; border-top: 2px solid var(--text); }
.hstep__n { display: block; margin-bottom: 8px; color: var(--accent-deep); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hstep h3 { margin-bottom: 8px; font-size: 18px; line-height: 1.25; }
.hstep p { color: var(--ink-2); font-size: 15px; line-height: 1.45; }
/* six visa steps run 3 × 2, seven booking steps 4 + 3; phones list them (below) */
.hsteps--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
.hsteps--7 { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 28px; }
.guide-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.guide-tips { max-width: 760px; margin-inline: auto; }
.isle > .eyebrow, .plan > .eyebrow { margin-bottom: 10px; }
.plan h3 { margin-bottom: 14px; }
.plan__days { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.plan__days li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px; color: var(--ink-2); font-size: 15px; line-height: 1.45; }
.plan__days span { color: var(--accent-deep); font-size: 13px; font-weight: 600; line-height: 1.7; }
.host p { color: var(--ink-2); }
.host .wa-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; color: var(--accent-deep); }
/* a service page names the person who leads it, under what it delivers */
.svc-lead { max-width: 560px; margin-top: var(--gap); }
.tform { max-width: 760px; margin-inline: auto; text-align: left; }
.tform__group { min-width: 0; margin: 0 0 24px; padding: 0; border: 0; }
.tform__group legend { margin-bottom: 12px; padding: 0; color: var(--text); font-size: 17px; font-weight: 600; }
.tform .opts { justify-content: flex-start; gap: 8px; margin-bottom: 0; }
.tform .opt { display: inline-flex; flex: 0 1 auto; align-items: center; justify-content: center; min-width: 56px; min-height: 48px; padding: 0 16px; border-radius: 12px; font-size: 15px; }
.tform .field--wide { margin-bottom: 20px; }
.tform__nav { display: flex; justify-content: center; padding-top: 20px; border-top: 1px solid var(--line); }
.tdone { max-width: 760px; margin-inline: auto; text-align: center; }
.tdone__title { margin-bottom: 10px; font-size: var(--t-subhead); outline: none; }
.tdone p { margin-bottom: 20px; color: var(--ink-2); }
.tform:hover, .tdone:hover { transform: none; box-shadow: var(--surface-shadow); }
/* visa and passport check */
.checker { text-align: left; }
.checker:hover, .vresult:hover { transform: none; box-shadow: var(--surface-shadow); }
.checker__fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.checker__result { margin-top: 16px; }
.checker__result:empty { display: none; }
.vresult { display: grid; gap: 16px; text-align: left; }
.vresult__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.vresult__title { font-size: var(--t-subhead); }
.vresult__note { color: var(--ink-2); }
.page .vresult__rule { color: var(--ink-3); font-size: var(--t-caption); }
.vresult__list > .eyebrow { margin-bottom: 10px; }
.vresult__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.vbadge {
  display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border: 1px solid transparent; border-radius: 980px;
  font-size: 14px; font-weight: 600; line-height: 1;
}
.vbadge--free, .vbadge--voa { background: #e3f3e9; color: #13643a; }
.vbadge--evisa, .vbadge--eta { background: #e2eefb; color: #005bb5; }
.vbadge--visa { background: #fbeedd; color: #8a4a00; }
.vbadge--blocked { background: #fbe4e7; color: #a30016; }
.vbadge--home, .vbadge--check { border-color: var(--line); color: var(--ink-2); }
.band .vresult .fact { background: #fff; box-shadow: none; }
.fact.is-ok .fact__v { color: #13643a; }
.fact.is-bad .fact__v { color: #a30016; }
.vtable-wrap { margin-top: 36px; }
.vtable__kicker, .vtable__title { text-align: center; }
.vtable__title { margin: 8px 0 16px; font-size: var(--t-subhead); }
.vtable-scroll { overflow-x: auto; border-radius: 16px; background: var(--surface); box-shadow: var(--surface-shadow); }
.vtable-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.vtable { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 14px; }
.vtable th, .vtable td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.vtable thead th { color: var(--ink-3); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.vtable tbody th { color: var(--text); font-weight: 600; }
/* the passport column stays put while the destinations scroll */
.vtable tbody th, .vtable thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.vtable td { color: var(--ink-2); }
.vtable tbody tr:last-child th, .vtable tbody tr:last-child td { border-bottom: 0; }
.vt::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--line); vertical-align: middle; }
.vt--free::before, .vt--voa::before { background: #1d8a4e; }
.vt--evisa::before, .vt--eta::before { background: var(--accent); }
.vt--visa::before { background: #c27a00; }
.vt--blocked::before { background: #c4001a; }
.vt--home::before { background: transparent; }
.phase__dates { display: grid; gap: 8px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.phase__dates > div { display: flex; justify-content: space-between; gap: 12px; }
.phase__dates dt { color: var(--ink-3); font-size: 14px; }
.phase__dates dd { margin: 0; color: var(--text); font-size: 15px; font-weight: 600; text-align: right; }
.pkg { display: flex; flex-direction: column; gap: 10px; }
.pkg h3 { font-size: var(--t-subhead); }
.pkg__cities { color: var(--ink-2); font-size: 15px; }
.pkg__price { display: flex; flex-direction: column; gap: 2px; margin: 6px 0; color: var(--text); font-size: 28px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
.pkg__price span { color: var(--ink-3); font-size: 14px; font-weight: 500; letter-spacing: 0; }
.pkg__best { color: var(--ink-2); }
.pkg .ticks { margin: 4px 0 10px; }
.pkg .ticks li { font-size: 15px; }
.pkg > .btn { align-self: flex-start; margin-top: auto; }
.pkg__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: auto; }
/* the visas door at the foot of the packages page */
.travel-visas { max-width: 760px; margin-inline: auto; }
.travel-visas .eyebrow { margin-bottom: 10px; }
.pkg--featured, .pkg--featured:hover { box-shadow: 0 0 0 2px var(--accent), var(--surface-shadow); }

  .nav__cta { gap: 10px; padding: 0 6px 0 16px; font-size: 14px; }
}
@media (max-width: 900px) {
  
  /* the premise reads as one column once three no longer fit, at a comfortable measure */
  .cols { grid-template-columns: minmax(0, 1fr); max-width: 62ch; margin-inline: auto; }
  
  
  /* seven stages become a timetable: number, stage, duration */
  
  
  
  .hsteps { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 640px; margin-inline: auto; }
  .hstep { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); }
  .hstep:last-child { border-bottom: 1px solid var(--line); }
  .hstep__n { grid-row: 1 / span 2; margin: 0; line-height: 1.5; }
}
/* narrower desktops: tighter links so the centred pill clears the tools at the right */
@media (max-width: 1400px) and (min-width: 1301px) { .nav__link { padding: 0 20px; } }
@media (max-width: 1300px) and (min-width: 1241px) { .nav__link { padding: 0 15px; font-size: 13.5px; } }
/* below 1240px the centred pill no longer clears the brand and the tools:
   the bar keeps one row and the links move into a drawer */
@media (max-width: 1240px) {
  .nav {
    top: 0; grid-template-columns: minmax(0, 1fr) auto; padding: 10px 16px;
    border-bottom: 0.5px solid transparent; transition: background 0.4s ease, border-color 0.4s ease;
  }
  .nav[data-scrolled="1"] { border-bottom-color: var(--chrome-line); background: var(--chrome); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); }
  .nav[data-hero="1"][data-dark="1"][data-scrolled="1"] { border-bottom-color: #242222; background: rgba(18, 18, 18, 0.8); }
  .nav__lang { min-width: 40px; }
  .nav__burger {
    display: flex; flex-direction: column; flex-shrink: 0; align-items: center; justify-content: center; gap: 4px;
    width: 40px; height: 40px; padding: 0; border: 0; border-radius: 14px; background: transparent; color: var(--text);
  }
  .nav__burger span {
    display: block; width: 17px; height: 1.5px; border-radius: 2px; background: currentColor;
    transition: transform 0.3s var(--ease), opacity 0.2s ease;
  }
  .nav:has(.nav__links:popover-open) .nav__burger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .nav:has(.nav__links:popover-open) .nav__burger span:nth-child(2) { opacity: 0; }
  .nav:has(.nav__links:popover-open) .nav__burger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

  .nav__links[popover] {
    position: fixed; inset: 72px 10px auto; height: auto; max-height: calc(100vh - 94px); overflow-y: auto; padding: 0; width: auto;
    flex-direction: column; align-items: stretch; gap: 0;
    border: 1px solid rgba(255, 255, 255, 0.85); border-radius: 22px; background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
    box-shadow: var(--glass-shadow), var(--glass-spec), 0 0 0 1px rgba(20, 30, 50, 0.07);
    opacity: 0; transform: translateY(-8px); pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, display 0.18s allow-discrete, overlay 0.18s allow-discrete;
  }
  .nav__links[popover]:not(:popover-open) { display: none; }
  .nav__links[popover]:popover-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav__links[popover]:not(:popover-open) { transform: translateY(-8px); }
  @starting-style { .nav__links[popover]:popover-open { opacity: 0; transform: translateY(-8px); } }
  .nav__link {
    display: block; height: auto; padding: 16px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.85); border-radius: 0; text-align: left;
    font-size: 15px; transition: background 0.2s ease, color 0.2s ease;
  }
  .nav__link::before { display: none; }
  .nav__link:hover { background: rgba(255, 255, 255, 0.5); }
  .nav__links > .nav__cta--drawer { display: inline-flex; margin: 14px 18px 18px; }
  /* over the hero the drawer darkens so the white links stay legible */
  .nav[data-hero="1"][data-dark="1"] .nav__links[popover] { border-color: rgba(255, 255, 255, 0.22); background: rgba(20, 20, 22, 0.55); }
  .nav[data-hero="1"][data-dark="1"] .nav__link { border-bottom-color: rgba(255, 255, 255, 0.16); }
  .nav[data-hero="1"][data-dark="1"] .nav__link:hover { background: rgba(255, 255, 255, 0.12); }
  /* wider screens: the drawer drops from the burger instead of spanning the window */
  @media (min-width: 681px) {
    .nav__links[popover] { left: auto; right: 10px; width: min(420px, calc(100% - 20px)); }
  }
}
/* phone: the CTA moves into the drawer; tables, chips and footer links resize for touch */
@media (max-width: 860px) {
  :root { --nav-space: 76px; }
  /* compact on phones: 32px rows, above the 24px minimum target (WCAG 2.2 AA) */
  .footer__col a:not(.footer__h), a.footer__h { display: flex; align-items: center; min-height: 32px; padding: 0; }
  a.footer__h { margin-bottom: 2px; }
  .nav__word { display: none; }
  .nav__tools > .nav__cta { display: none; }
  /* the brand table becomes compact rows: name, category, markets, status */
  .table, .table :is(thead, tbody, tr) { display: block; width: 100%; }
  .table thead { display: none; }
  .table tr { padding: 16px 20px; border-bottom: 1px solid var(--line); }
  .table tr:last-child { border-bottom: 0; }
  .table td { display: block; padding: 0; border-bottom: 0; }
  .table td:first-child { margin-bottom: 4px; }
  .table td:nth-child(2), .table td:nth-child(3) { color: var(--ink-3); font-size: 15px; line-height: 1.45; }
  .table td:last-child { margin-top: 10px; }
  .chip { min-height: 44px; }
  /* phone controls never drop below a 44px touch target */
  .nav__burger { width: 44px; height: 44px; }
  .nav__lang { height: 40px; }
}
@media (max-width: 680px) {
  /* a phone-sized system: tighter gaps and card insets, one step down in type */
  :root { --gap: 14px; --t-lead: 19px; --t-subhead: 21px; }
  .grid, .cols, .trio, .bcards, .brand-hero, .channel, .fields { grid-template-columns: minmax(0, 1fr); }
  .cols { gap: 18px; }
  .panel { padding: 20px; }
  .bcard__body, .person > div { padding: 20px; }
  .shead .lead { margin-top: 12px; }
  
  
  .explore__arrow { padding-top: 6px; }
  /* doors: the arrow sits beside the text rather than on a line of its own */
  
  
  
  
  .tool__chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dest__facts { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .checker__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dest__facts > div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; align-items: baseline; }
  .dest__facts .eyebrow { margin: 0; }
  .tform .opt { flex: 1 0 auto; min-width: calc(50% - 4px); max-width: 100%; }
  /* paired actions stack as equal full-width buttons instead of two ragged rows */
  :is(.actions--row, .est-links) { flex-direction: column; align-items: stretch; width: 100%; max-width: 360px; margin-inline: auto; }
  .actions { margin-top: 28px; }

  /* hero: sized to its content rather than forced to a full screen — a forced
     100svh left an empty band of photograph under the route line on taller
     phones. Equal-width stacked actions; the route line sits just clear of the
     fade into the page, and the next section peeks in as a cue to scroll. */
  
  
  
  
  
  

  /* founders on the home page: a compact row each, not three full-screen portraits */
  
  
  
  
  
  
  

  /* all four stations on one row, no hidden fourth behind a swipe */
  .route__stations { grid-auto-columns: minmax(0, 1fr); gap: 12px; }
  .route__name { font-size: 16px; }

  /* chip rows fill the width instead of wrapping one chip onto its own line */
  .chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .region .eyebrow { flex: 0 0 100%; margin: 0 0 4px; text-align: center; }
  .region .chip { flex: 1 1 auto; padding: 0 12px; }

  /* offices read as a list: city on the left, what is there on the right */
  .office-list { display: block; text-align: left; }
  .office { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
  .office:last-child { border-bottom: 1px solid var(--line); }
  .office__city { margin: 0; white-space: nowrap; }
  .office p:not(.office__city) { color: var(--ink-3); font-size: 15px; text-align: right; }

  .svc-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-facts--5 > :last-child { grid-column: 1 / -1; }
  /* destination facts read as rows: label on the left, the value beside it */
  .guide-facts { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .guide-facts .fact { display: grid; grid-template-columns: 116px minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 14px 16px; }
  .guide-facts .fact .eyebrow { margin: 0; }
  .estimator__fields, .est-grid { grid-template-columns: minmax(0, 1fr); }
  .est-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .day { grid-template-columns: minmax(0, 1fr); }
  .pstages { grid-template-columns: repeat(7, minmax(64px, 1fr)); overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .tabs { border-radius: 22px; }
  .quotes { grid-template-columns: minmax(0, 1fr); }
  .sale { grid-template-columns: 84px minmax(0, 1fr) 40px; }
  .msg { max-width: 92%; }
  .stage { grid-template-columns: minmax(0, 1fr); padding: 22px 0; }
  .stage__facts { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .faq__item summary { font-size: 17px; }
  .footer__top { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 36px; }
  .footer__map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; align-items: start; }
  /* previous / next stack full width, so long trip and service names keep to one or two lines */
  .pager { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pager__link--next { grid-column: 1; }
  .pager__link { padding: 16px 18px; }
  .pager__title { font-size: 18px; }
  .post-body p { font-size: 17px; }
  .pages__step { padding: 0 8px; }

  /* long copy reads flush left on a phone; only titles and short leads stay centred */
  .pillar-row { justify-items: start; text-align: left; }
  .case { text-align: left; }
  .post-row { text-align: left; }
  .post-row h2, .post-row__ex { margin-inline: 0; }
  .start__note { text-align: left; margin-inline: 0; }
  .start__kicker, .cases__kicker { text-align: left; }

  .survey__nav .btn--link { padding-inline: 14px; }
  .opts { margin-bottom: 24px; }

  /* footer: stacked, links on one row with full-size touch targets */
  .footer__in { flex-direction: column; align-items: flex-start; gap: 4px; padding-block: 28px 20px; }
  .footer__links { gap: 0 28px; margin-top: 8px; }
  .footer__links a { display: inline-block; min-width: 44px; padding-block: 12px; }
  .footer__links a::after { display: none; }
}
@media (max-width: 380px) {
  /* the smallest phones: one field per row, so a full date fits */
  .checker__fields { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  /* content photographs take a shorter phone crop */
  .page .photo img { aspect-ratio: 4 / 3; }
  
  .page .person .photo img { aspect-ratio: 16 / 10; }
  .nav__links[popover] { inset: 72px 8px auto; }
}
/* big screens: scale the whole system up together rather than letting the
   980px column float as a small island on a 27-inch display */
@media (min-width: 1600px) {
  :root { --gutter: 80px; --measure: 1440px; --r-card: 22px; --r-strip: 26px; --r-sheet: 34px; }
  
  .done__in { max-width: 760px; }
  :where(.page) h1, .display { font-size: clamp(56px, 4.4vw, 88px); }
  :where(.page) h2 { font-size: clamp(42px, 3.2vw, 60px); }
  :where(.page) h3 { font-size: 27px; }
  :where(.page) p { font-size: 19px; }
  .page .eyebrow { font-size: 14px; }
  
  
  .done__title { font-size: clamp(46px, 4vw, 76px); }
  .nav { padding-inline: 48px; }
  .nav__link { font-size: 16px; }
  .nav__cta { padding: 0 10px 0 26px; }
  .panel { padding: 40px; }
  .person > div { padding: 36px; }
}

/* ── Motion ──────────────────────────────────────────────────────────── */
/* blocks rise into focus as they enter the viewport; the class is only set
   when scripting runs, so nothing is hidden without it. Live result areas ([aria-live]) are drawn
   after load and must show at once, so they are left out. */
@media (prefers-reduced-motion: no-preference) {
  .js :where(.page > section:not(.hero, .lobby, .hero-slides), .page .survey) :where(h1, h2, h3, p, article, figure, .figs):not(.marq *, [aria-live] *) {
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 1s var(--ease);
  }
  .js :where(.page > section:not(.hero, .lobby, .hero-slides), .page .survey) :where(h1, h2, h3, p):not(.is-in, .marq *, [aria-live] *) {
    opacity: 0; transform: translateY(20px); filter: blur(9px);
  }
  /* phones and tablets: rise and fade only; a blur on every block costs frames while scrolling */
  @media (hover: none), (max-width: 860px) {
    .js :where(.page > section:not(.hero, .lobby, .hero-slides), .page .survey) :where(h1, h2, h3, p):not(.is-in, .marq *, [aria-live] *) { filter: none; }
    .js :where(.page > section:not(.hero, .lobby, .hero-slides), .page .survey) :where(h1, h2, h3, p, article, figure, .figs):not(.marq *, [aria-live] *) {
      transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
    }
  }
  /* structural blocks resolve without the blur — only type unblurs */
  .js :where(.page > section:not(.hero, .lobby, .hero-slides), .page .survey) :where(article, figure, .figs):not(.is-in, .marq *, [aria-live] *) {
    opacity: 0; transform: translateY(20px);
  }
}
@media (hover: none) {
  .panel:hover,
.person:hover,
.bcard:hover,
.chip:hover,
.opt:hover,
.pager__link:hover,
a:hover .photo img,
article:hover .photo img,
.explore:hover .explore__arrow { transform: none; }
  .panel:hover, .person:hover, .bcard:hover, .pager__link:hover { box-shadow: var(--surface-shadow); }
  .explore:hover h3 { color: inherit; }
  .bcard:hover .bcard__link { text-decoration: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

/* ── Obsidian: one system on two grounds ─────────────────────────────────
   Both themes follow the Obsidian design system: Work Sans at 500 for
   headings, one blue signal, GlowCards (a gradient hairline edge and two soft
   corner shades, never a drop shadow), white-or-black primary buttons with a
   blue gradient arrow chip, line eyebrows between diamond-ended rules,
   broken-outline fields, squarer frosted chrome and a hairline footer grid.
   Every rule below reads tokens; only the token values change with the theme.
   Light is a white stage with ink type; dark is the original black stage.
   Text tokens are chosen for at least 4.5:1 on the ground and on cards. */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --card: #f7f7f7;
  --inset: #ffffff;
  --surface: var(--card);
  --text: #131313;
  --ink-2: #3f3f3f;
  --ink-3: #5c5c5c;
  --ink-4: #6b6b6b;
  --line: #e5e5e5;
  --line-soft: rgba(0, 0, 0, 0.08);
  --line-strong: #8c8c8c;
  --line-hover: #5c5c5c;
  --track: #d6d6d6;
  --accent: #3d60c9;
  --accent-hover: #2f4fb3;
  --accent-bright: #6289ff;
  --accent-deep: #3d60c9;
  --paper-ink: #131313;
  --font-text: "Work Sans", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Work Sans", "Helvetica Neue", Arial, sans-serif;
  --surface-shadow: none;
  --shadow-lift: none;
  --r-card: 15px;
  --r-mini: 12px;
  --r-strip: 15px;
  --r-sheet: 23px;
  --glass-spec: inset 0 0 0 transparent;
  --glass-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.25);
  --edge: linear-gradient(15deg, rgba(0, 0, 0, 0.07) 35%, rgba(0, 0, 0, 0.2) 80%);
  --edge-hi: linear-gradient(15deg, rgba(0, 0, 0, 0.12) 35%, rgba(0, 0, 0, 0.4) 80%);
  --edge-blue: linear-gradient(15deg, rgba(61, 96, 201, 0.35) 35%, #3d60c9 80%);
  --shade: #ffffff;
  --shades: radial-gradient(circle 110px at 0 calc(100% + 30px), var(--shade), transparent) padding-box,
    radial-gradient(circle 110px at 100% -30px, var(--shade), transparent) padding-box;
  --chip-grad: linear-gradient(224deg, #6c8ae3 -47.2%, #3d60c9 74.45%);
  --btn-bg: #131313;
  --btn-ink: #ffffff;
  --btn-hover: #3a3a3a;
  --field: #ffffff;
  --fill: rgba(0, 0, 0, 0.03);
  --fill-hover: rgba(0, 0, 0, 0.06);
  --chip-line: rgba(0, 0, 0, 0.18);
  --chrome: rgba(255, 255, 255, 0.82);
  --chrome-solid: rgba(255, 255, 255, 0.95);
  --chrome-line: #e6e6e6;
  --chrome-chip: rgba(0, 0, 0, 0.05);
  --chrome-hover: #ededed;
  --tabs: #efefef;
  --tab-on: #ffffff;
  --wash: rgba(61, 96, 201, 0.1);
  --wash-soft: rgba(61, 96, 201, 0.06);
  --placeholder: #767676;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235c5c5c' stroke-width='1.6'/%3E%3C/svg%3E");
  --scrim: rgba(255, 255, 255, 0.6);
  --sheet: rgba(255, 255, 255, 0.94);
  --glow-top: rgba(0, 0, 0, 0.04);
  --glow-blue: rgba(0, 85, 255, 0.08);
  --selection: rgba(61, 96, 201, 0.2);
  /* status: tint behind, ink on top */
  --ok-bg: #e3f3e9; --ok-ink: #13643a; --ok-dot: #1d8a4e;
  --info-bg: #e8edfb; --info-ink: #2f4fb3;
  --warn-bg: #fbeedd; --warn-ink: #8a4a00; --warn-dot: #c27a00;
  --bad-bg: #fbe4e7; --bad-ink: #a30016; --bad-dot: #c4001a;
  --neutral-bg: rgba(0, 0, 0, 0.05); --neutral-ink: #3f3f3f;
  --danger: #c4001a;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --card: #0f0f0f;
  --inset: #151515;
  --text: #ffffff;
  --ink-2: #cbcbcb;
  --ink-3: #a7a7a7;
  --ink-4: #8a8a8a;
  --line: #2a2828;
  --line-soft: rgba(65, 65, 65, 0.51);
  --line-strong: #666666;
  --line-hover: #ababab;
  --track: #444444;
  --accent: #6289ff;
  --accent-hover: #7b9cff;
  --accent-bright: #6289ff;
  --accent-deep: #6289ff;
  --paper-ink: #ffffff;
  --glass-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.9);
  --edge: linear-gradient(15deg, rgba(50, 50, 50, 0.5) 35%, rgba(255, 255, 255, 0.25) 80%);
  --edge-hi: linear-gradient(15deg, rgba(70, 70, 70, 0.6) 35%, rgba(255, 255, 255, 0.5) 80%);
  --edge-blue: linear-gradient(15deg, rgba(61, 96, 201, 0.55) 35%, #6289ff 80%);
  --shade: #262626;
  --btn-bg: #ffffff;
  --btn-ink: #131313;
  --btn-hover: #d1d1d1;
  --field: rgba(217, 217, 217, 0.05);
  --fill: rgba(217, 217, 217, 0.05);
  --fill-hover: rgba(217, 217, 217, 0.1);
  --chip-line: rgba(102, 102, 102, 0.6);
  --chrome: rgba(18, 18, 18, 0.8);
  --chrome-solid: rgba(18, 18, 18, 0.92);
  --chrome-line: #242222;
  --chrome-chip: rgba(255, 255, 255, 0.08);
  --chrome-hover: #282828;
  --tabs: #121212;
  --tab-on: #282828;
  --wash: rgba(98, 137, 255, 0.14);
  --wash-soft: rgba(98, 137, 255, 0.08);
  --placeholder: rgba(255, 255, 255, 0.5);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a7a7a7' stroke-width='1.6'/%3E%3C/svg%3E");
  --scrim: rgba(0, 0, 0, 0.7);
  --sheet: rgba(18, 18, 18, 0.88);
  --glow-top: #2c2c2c;
  --glow-blue: rgba(0, 85, 255, 0.25);
  --selection: rgba(255, 255, 255, 0.35);
  --ok-bg: rgba(52, 199, 89, 0.14); --ok-ink: #6fdc8c; --ok-dot: #3ecf6e;
  --info-bg: rgba(98, 137, 255, 0.14); --info-ink: #8fa9ff;
  --warn-bg: rgba(255, 170, 60, 0.14); --warn-ink: #ffbe6b; --warn-dot: #ffaa3c;
  --bad-bg: rgba(255, 107, 107, 0.14); --bad-ink: #ff8a8a; --bad-dot: #ff6b6b;
  --neutral-bg: rgba(255, 255, 255, 0.08); --neutral-ink: #cbcbcb;
  --danger: #ff6b6b;
}
/* 中文 pages never load Work Sans (Google Fonts is blocked in mainland China):
   the CJK system faces come first, so Latin and the ch-based measures stay
   close to the system face instead of narrowing to Helvetica's */
html:lang(zh) {
  --font-text: "Work Sans", var(--font-cjk), "Helvetica Neue", Arial, sans-serif;
  --font-display: "Work Sans", var(--font-cjk), "Helvetica Neue", Arial, sans-serif;
}
:root ::selection { background: var(--selection); }
:root :is(h1, h2, h3) { font-weight: 500; }
:root :where(.page) :is(h1, h2, h3) { letter-spacing: -0.02em; }

:root .skip, :root .skip:focus { background: var(--btn-bg); color: var(--btn-ink); }
:root .lead { color: var(--ink-2); }

/* bands sit on the same ground; cards carry the separation */
:root .band { --surface: var(--card); background: var(--bg); }
:root .band--ruled { border-color: var(--line); }

/* LineEyebrow: blue, sentence case, between two diamond-ended rules */
:root .eyebrow { color: var(--accent); font-weight: 400; font-size: 14px; letter-spacing: 0; text-transform: none; }
:root :is(.shead, .phead) > .eyebrow { display: inline-flex; align-items: center; gap: 12px; }
:root :is(.shead, .phead) > .eyebrow::before,
:root :is(.shead, .phead) > .eyebrow::after {
  content: ""; flex: 0 0 auto; width: clamp(40px, 5vw, 76px); height: 6px;
}
:root :is(.shead, .phead) > .eyebrow::before {
  background:
    linear-gradient(currentColor 0 0) left center / calc(100% - 3px) 1px no-repeat,
    linear-gradient(to bottom right, transparent 50%, currentColor 50%) calc(100% - 3px) 0 / 3px 3px no-repeat,
    linear-gradient(to bottom left, transparent 50%, currentColor 50%) 100% 0 / 3px 3px no-repeat,
    linear-gradient(to top right, transparent 50%, currentColor 50%) calc(100% - 3px) 100% / 3px 3px no-repeat,
    linear-gradient(to top left, transparent 50%, currentColor 50%) 100% 100% / 3px 3px no-repeat;
}
:root :is(.shead, .phead) > .eyebrow::after {
  background:
    linear-gradient(currentColor 0 0) right center / calc(100% - 3px) 1px no-repeat,
    linear-gradient(to bottom right, transparent 50%, currentColor 50%) 0 0 / 3px 3px no-repeat,
    linear-gradient(to bottom left, transparent 50%, currentColor 50%) 3px 0 / 3px 3px no-repeat,
    linear-gradient(to top right, transparent 50%, currentColor 50%) 0 100% / 3px 3px no-repeat,
    linear-gradient(to top left, transparent 50%, currentColor 50%) 3px 100% / 3px 3px no-repeat;
}
/* phones: shorter rules so a long label keeps one line between them */
@media (max-width: 520px) {
  :root :is(.shead, .phead) > .eyebrow::before,
:root :is(.shead, .phead) > .eyebrow::after { width: 24px; }
  :root :is(.shead, .phead) > .eyebrow { gap: 8px; max-width: 100%; }
}
/* Work Sans runs wider than the system face: on phones the hero title scales
   with the screen so "Chinese brands" keeps its line down to 320px */

@media (max-width: 380px) {
  :root :is(.shead, .phead) > .eyebrow::before,
:root :is(.shead, .phead) > .eyebrow::after { width: 14px; }
  :root :is(.shead, .phead) > .eyebrow { font-size: 13px; }
}
:root :lang(zh) .eyebrow, :root:lang(zh) .eyebrow { letter-spacing: 0; }

/* hero: the photograph stays dark in both themes; its eyebrow is a pale blue that
   holds 4.5:1 over the shaded photograph (the accent blue only reaches ~3.4:1) */
/* the photograph's bright lights sit behind the copy: a deeper shade plus a soft
   pool behind the text keeps every hero line at 4.5:1 or better, in both themes */




/* GlowCard: card fill, two corner shades, a hairline edge brightest at the top-right */
:root :is(.fact, .vtable-scroll) {
  border: 1px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--edge) border-box;
  box-shadow: none;
}
:root :is(.panel, .tile, .person, .bcard, .fcard, .done__card, .pager__link, .portal) {
  border: 1px solid transparent;
  background: var(--shades), linear-gradient(var(--surface), var(--surface)) padding-box, var(--edge) border-box;
  box-shadow: none;
}
@media (hover: hover) {
  :root :is(.panel, .tile, .person, .bcard, .pager__link):hover { --edge: var(--edge-hi); box-shadow: none; }
  /* panels that hold tools rather than links stay still */
  :root :is(.sgroup, .tool, .checker, .vresult, .tform, .tdone, .cap, .legal__toc):hover { --edge: inherit; }
}
:root .pkg--featured, :root .pkg--featured:hover { --edge: var(--edge-blue); }
:root :is(.portal .fact, .band .vresult .fact, .vresult .fact) { --surface: var(--inset); }
:root .band .vresult .fact { background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--edge) border-box; }
:root .vtable tbody th, :root .vtable thead th:first-child { background: var(--surface); }
:root .portal .fact { box-shadow: none; }

/* PrimaryButton: ink-on-ground fill, then a square chip with the blue gradient and a white arrow */
:root .btn { border-radius: 12px; }
:root .btn--primary, :root .btn--primary:hover { color: var(--btn-ink); }
:root .btn--primary { gap: 12px; padding: 0 7px 0 20px; background: var(--btn-bg); letter-spacing: -0.02em; font-weight: 500; }
:root .btn--primary:hover { background: var(--btn-hover); }
:root .btn--primary::after {
  content: ""; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11.5M9 3.5 13.5 8 9 12.5' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat, var(--chip-grad);
  transition: background-position 0.15s ease-out;
}
:root .btn--primary:hover::after { background-position: calc(50% + 2px) center, 0 0; }
:root .btn--lg.btn--primary { padding: 0 8px 0 24px; }
:root .btn--lg.btn--primary::after { width: 36px; height: 36px; border-radius: 10px; }
/* on the hero photograph the primary button is white in both themes */



/* the light button only sits on the black poster */
:root .btn--light, :root .btn--light:hover { color: #131313; }
:root .btn--light { background: #fff; font-weight: 500; }
:root .btn--light:hover { background: #d1d1d1; }
:root .btn--outline, :root .btn--outline:hover { color: var(--text); }
:root .btn--outline { border-color: var(--line-strong); background: var(--fill); font-weight: 500; }
:root .btn--outline:hover { border-color: var(--line-hover); background: var(--fill-hover); }
/* the glass button only sits on the hero photograph */
:root .btn--glass { border-color: rgba(255, 255, 255, 0.22); background: rgba(173, 173, 173, 0.18); }
:root .btn--link { color: var(--accent); }

/* chips, tags, pagination: squarer, tinted rather than filled when chosen */
:root .chip {
  border-radius: 10px; border-color: var(--chip-line); background: var(--fill);
  box-shadow: none; color: var(--text); font-weight: 500;
}
:root .chip:hover { border-color: var(--line-hover); color: var(--text); }
:root :is(.chip[aria-pressed="true"], .chip[aria-current="page"], .chip[aria-current="page"]:hover) {
  border-color: var(--accent); background: var(--wash); color: var(--text); box-shadow: none;
}
:root .tag { background: var(--wash); color: var(--accent); }
:root .tag--outline { background: none; }
:root .pages__n { border-color: var(--line); background: var(--fill); border-radius: 10px; }
:root .pages__n:hover { border-color: var(--accent); color: var(--text); }
:root :is(.pages__n[aria-current="page"], .pages__n[aria-current="page"]:hover) { border-color: var(--accent); background: var(--wash); color: var(--text); }

/* nav: a transparent header; the links pill carries the frosted chrome */
:root .nav__link { border-radius: 10px; color: var(--text); font-weight: 400; }
:root .nav__link::before { background: var(--chrome-hover); border-radius: 10px; box-shadow: inset 0 -0.5px 0 var(--line-strong); }
:root :is(.nav__link:hover, .nav__link[aria-current="page"]) { color: var(--text); font-weight: 500; }
:root :is(.nav__lang, .nav__theme) { border-radius: 10px; background: var(--chrome-chip); color: var(--text); }
:root :is(.nav__lang, .nav__theme):hover { background: var(--chrome-hover); color: var(--text); }
:root .nav__cta, :root .nav__cta:hover { color: var(--btn-ink); }
:root .nav__cta { background: var(--btn-bg); box-shadow: none; padding-left: 16px; padding-right: 6px; }
:root .nav__cta:hover { background: var(--btn-hover); }
:root .nav__arrow, :root .nav__cta:hover .nav__arrow { border-radius: 9px; background: var(--chip-grad); color: #fff; }
/* over the dark hero the chrome turns white in both themes: smoked glass, white CTA */
:root .nav[data-hero="1"][data-dark="1"] :is(.nav__logo, .nav__word, .nav__lang, .nav__burger, .nav__theme),
:root .nav[data-hero="1"][data-dark="1"] .nav__link { color: #fff; }
:root .nav[data-hero="1"][data-dark="1"] :is(.nav__lang, .nav__theme) { background: rgba(255, 255, 255, 0.12); }
:root .nav[data-hero="1"][data-dark="1"] :is(.nav__lang, .nav__theme):hover { background: rgba(255, 255, 255, 0.24); }
:root .nav[data-hero="1"][data-dark="1"] .nav__link::before { background: rgba(255, 255, 255, 0.16); }
:root .nav[data-hero="1"][data-dark="1"] .nav__cta { background: #fff; color: #131313; }
:root .nav[data-hero="1"][data-dark="1"] .nav__cta:hover { background: #d1d1d1; }
@media (max-width: 1240px) {
  :root .nav__links[popover] { border: 1px solid var(--chrome-line); border-radius: 16px; background: var(--chrome-solid); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: none; backdrop-filter: none; }
  :root .nav__link { border-radius: 0; border-bottom-color: var(--chrome-line); }
  :root .nav__link:hover { background: var(--chrome-hover); }
  /* over the hero the drawer stays dark so its white links read */
  :root .nav[data-hero="1"][data-dark="1"] .nav__links[popover] { border-color: #242222; background: rgba(18, 18, 18, 0.92); }
  :root .nav[data-hero="1"][data-dark="1"] .nav__link { border-bottom-color: #242222; }
  :root .nav[data-hero="1"][data-dark="1"] .nav__link:hover { background: #282828; }
}

/* the closing poster is a lit black stage in both themes */
:root .poster {
  background: radial-gradient(70% 42% at 50% 62%, rgba(0, 85, 255, 0.24), rgba(0, 0, 0, 0)), #000;
  color: #fff; border-top: 1px solid #2a2828;
}
:root .poster .title { color: #fff; }
:root .poster .poster__note { color: #cbcbcb; }

/* Field: a line-strong outline nicked open on the top and bottom edges;
   focus closes the outline and darkens or lightens it */
:root .input {
  border-color: var(--line-strong); background-color: var(--field); color: var(--text);
  -webkit-mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0) left / 1px 100% no-repeat, linear-gradient(#000 0 0) right / 1px 100% no-repeat,
    linear-gradient(90deg, #000 20%, transparent 26% 74%, #000 80%) top / 100% 1px no-repeat,
    linear-gradient(90deg, #000 36%, transparent 42% 88%, #000 92%) bottom / 100% 1px no-repeat,
    linear-gradient(#000 0 0) top left / 12px 12px no-repeat, linear-gradient(#000 0 0) top right / 12px 12px no-repeat,
    linear-gradient(#000 0 0) bottom left / 12px 12px no-repeat, linear-gradient(#000 0 0) bottom right / 12px 12px no-repeat;
  mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0) left / 1px 100% no-repeat, linear-gradient(#000 0 0) right / 1px 100% no-repeat,
    linear-gradient(90deg, #000 20%, transparent 26% 74%, #000 80%) top / 100% 1px no-repeat,
    linear-gradient(90deg, #000 36%, transparent 42% 88%, #000 92%) bottom / 100% 1px no-repeat,
    linear-gradient(#000 0 0) top left / 12px 12px no-repeat, linear-gradient(#000 0 0) top right / 12px 12px no-repeat,
    linear-gradient(#000 0 0) bottom left / 12px 12px no-repeat, linear-gradient(#000 0 0) bottom right / 12px 12px no-repeat;
}
:root .input:hover { border-color: var(--line-hover); }
:root .input:focus { -webkit-mask: none; mask: none; border-color: var(--line-hover); box-shadow: 0 0 0 4px var(--wash); }
:root .input::placeholder { color: var(--placeholder); opacity: 1; }
:root select.input { background-image: var(--select-arrow); }
:root[data-theme="dark"] select.input option { background: #121212; color: #fff; }
:root .field label { color: var(--ink-2); font-weight: 500; }
/* ChoiceChip: line-strong at 60% over the field fill; chosen turns to a blue tint */
:root .opt { border-color: var(--chip-line); border-radius: 12px; background-color: var(--fill); color: var(--text); }
:root .opt:hover { border-color: var(--line-hover); background-color: var(--fill-hover); }
:root .opt:has(input:checked) { border-color: var(--accent); background-color: var(--wash); color: var(--text); box-shadow: none; }
:root .survey__error { color: var(--danger); }

/* tabs and tracks: squarer, on the system's greys */
:root .tabs { border: 0.5px solid var(--line); border-radius: 12px; background: var(--tabs); }
:root .tab { border-radius: 9px; color: var(--ink-2); }
:root .tab[aria-selected="true"] { background: var(--tab-on); color: var(--text); box-shadow: inset 0 -0.5px 0 var(--line-strong); }
:root :is(.bar, .progress) { background: var(--track); }
:root :is(.lstage, .hstep) { border-top-color: var(--track); }
:root .pstage { border-top-color: var(--track); }
:root .pstage.is-done { border-top-color: color-mix(in srgb, var(--accent) 50%, transparent); }
:root .pstage.is-now { border-top-color: var(--accent); }

/* status colours */
:root .badge--fixed { background: var(--neutral-bg); color: var(--neutral-ink); }
:root :is(.badge--retainer, .vbadge--evisa, .vbadge--eta) { background: var(--info-bg); color: var(--info-ink); }
:root :is(.badge--share, .vbadge--free, .vbadge--voa) { background: var(--ok-bg); color: var(--ok-ink); }
:root :is(.vbadge--visa, .portal__kicker, .demo-badge) { background: var(--warn-bg); color: var(--warn-ink); }
:root :is(.vbadge--blocked, .doc__icon) { background: var(--bad-bg); color: var(--bad-ink); }
:root :is(.vbadge--home, .vbadge--check) { border-color: var(--track); color: var(--ink-2); }
:root .fact.is-ok .fact__v { color: var(--ok-ink); }
:root .fact.is-bad .fact__v { color: var(--bad-ink); }
:root .vt::before { background: var(--track); }
:root :is(.vt--free, .vt--voa)::before { background: var(--ok-dot); }
:root .vt--visa::before { background: var(--warn-dot); }
:root .vt--blocked::before { background: var(--bad-dot); }
:root :is(.vt--evisa, .vt--eta)::before { background: var(--accent); }
:root .vt--home::before { background: transparent; }
:root .next { background: var(--wash-soft); }
:root :is(.quote, .msg) { background: var(--inset); }
:root .msg--me { background: var(--wash); }
:root .done__tick { background: var(--chip-grad); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); }
:root .post-body .post-body__soon { border-color: var(--track); }
:root .table tbody tr:hover { background: var(--fill); }



/* how-we-work sheet */



/* footer: a hairline grid lit by a soft glow above and a blue glow below */
:root .footer { position: relative; overflow: hidden; isolation: isolate; border-top-color: var(--line-soft); }
:root .footer::before, :root .footer::after {
  content: ""; position: absolute; left: 50%; z-index: -1; width: min(720px, 120vw); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
}
:root .footer::before { top: 0; transform: translate(-50%, -55%); background: radial-gradient(var(--glow-top), rgba(0, 0, 0, 0) 70%); }
:root .footer::after { bottom: 0; transform: translate(-50%, 45%); background: radial-gradient(var(--glow-blue), rgba(0, 0, 0, 0) 70%); }
:root .footer__top + .footer__in { border-top-color: var(--line-soft); }
:root .footer__col a:not(.footer__h) { color: var(--ink-3); }
:root .footer__col a:not(.footer__h):hover { color: var(--text); }
:root .footer__h { color: var(--text); font-size: 13px; font-weight: 500; }
:root a.footer__h:hover { color: var(--accent); }
@media (min-width: 681px) {
  :root .footer__col { padding: 0 14px 0 16px; border-left: 1px solid var(--line-soft); }
  /* the brand lines up with the text of the columns, which sits past their divider */
  :root .footer__brand { padding-left: 17px; }
}
/* tablets: the brand sits above the map, which runs three across in three rows */
@media (max-width: 1100px) and (min-width: 681px) {
  .footer__top { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .footer__map { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 0; align-items: start; }
}

/* ── Theme switch (nav): one icon button beside the language link ───── */
.nav__theme {
  display: inline-grid; flex-shrink: 0; place-items: center; width: 38px; height: 38px; padding: 0;
  border: 0; transition: transform 0.25s var(--ease), background 0.25s ease, color 0.25s ease;
}
.nav__theme:hover { transform: translateY(-1px); }
.nav__theme svg {
  grid-area: 1 / 1; width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  transition: opacity 0.3s ease, transform 0.45s var(--ease-snap);
}
/* the icon shows where the switch goes: a moon in light, a sun in dark */
.nav__sun { opacity: 0; transform: rotate(-90deg) scale(0.6); }
.nav__theme[aria-checked="true"] .nav__moon { opacity: 0; transform: rotate(90deg) scale(0.6); }
.nav__theme[aria-checked="true"] .nav__sun { opacity: 1; transform: none; }
html:not(.js) .nav__theme { display: none; }
@media (max-width: 860px) {
  /* drawn at 40px like the language link; the touch area is a full 44px */
  .nav__theme { position: relative; width: 40px; height: 40px; }
  .nav__theme::after { content: ""; position: absolute; inset: -2px; }
}

/* ── Theme switch (footer) ───────────────────────────────────────────── */
.theme-switch {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0;
  border: 0; background: none; color: var(--ink-3); font-size: 13px;
}
.theme-switch:hover { color: var(--text); }
.theme-switch__track {
  position: relative; display: inline-flex; align-items: center; justify-content: space-between;
  width: 64px; height: 32px; padding: 0 9px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--fill);
  transition: background 0.3s ease, border-color 0.3s ease;
}
.theme-switch__track svg {
  position: relative; z-index: 1; width: 14px; height: 14px;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  transition: color 0.3s ease, opacity 0.3s ease;
}
.theme-switch__thumb {
  position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 999px;
  background: #fff; box-shadow: 0 0 0 1px var(--line-strong);
  transition: transform 0.35s var(--ease-snap), background 0.3s ease;
}
.theme-switch__sun { color: var(--text); }
.theme-switch__moon { color: var(--ink-4); }
.theme-switch[aria-checked="true"] .theme-switch__thumb {
  transform: translateX(32px); background: var(--chip-grad); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.theme-switch[aria-checked="true"] .theme-switch__sun { color: var(--ink-4); }
.theme-switch[aria-checked="true"] .theme-switch__moon { color: #fff; }
/* without scripting the switch has nothing to do */
html:not(.js) .theme-switch { display: none; }
/* a short cross-fade when the visitor flips the theme */
.theme-swap, .theme-swap *, .theme-swap *::before, .theme-swap *::after {
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease !important;
}

/* ── Site map page: every section in a card, every page listed ──────── */
.smap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; padding-bottom: 96px; }
.smap__group--wide { grid-column: span 2; }
.smap__group--wide .smap__list { columns: 2; column-gap: 32px; }
.smap__h { margin: -6px 0 4px; font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
/* the heading link is a full row, so it is as easy to tap as the links under it */
.smap__h a { display: block; padding: 6px 0; color: var(--text); }
.smap__h a:hover { color: var(--accent); text-decoration: none; }
.smap__sub { margin: 18px 0 2px; color: var(--ink-3); font-size: 13px; font-weight: 600; line-height: 1.3; }
.smap__list { margin: 0; padding: 0; list-style: none; }
.smap__list li { break-inside: avoid; }
.smap__list a { display: block; padding: 6px 0; color: var(--ink-2); font-size: 15px; line-height: 1.4; }
.smap__list a:hover { color: var(--accent); text-decoration: none; }
@media (max-width: 1100px) {
  .smap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .smap { grid-template-columns: minmax(0, 1fr); padding-bottom: 64px; }
  .smap__group--wide { grid-column: auto; }
}
@media (max-width: 520px) {
  .smap__group--wide .smap__list { columns: 1; }
}

/* ── Plates: where a real photograph will go ──────────────────────────
   Initials on a quiet ground until the founders' own photos arrive. No stock photography. */
.photo.plate {
  display: grid; place-items: center; aspect-ratio: var(--ar, 4 / 3); filter: none;
  border: 1px solid var(--line-soft);
  background: radial-gradient(120% 90% at 18% 0%, var(--wash), transparent 62%), var(--card);
}
.plate__mark {
  color: var(--ink-3); font-family: var(--font-display); font-size: clamp(34px, 4.6vw, 60px);
  font-weight: 500; letter-spacing: 0.02em; line-height: 1;
}

/* ── Homepage: the founders' lobby ─────────────────────────────────────
   Left-aligned and editorial: a typographic hero with the route line, then four plain sections. */
.shead--left { text-align: left; }
.shead--left .sech { max-width: 22ch; margin-inline: 0; text-align: left; }
.shead--left .lead { margin-inline: 0; text-align: left; --mw: 58ch; }









/* the route line: Guangzhou, 2006, to the world */
.route-line { position: relative; height: clamp(64px, 8vw, 104px); margin-top: clamp(40px, 5vw, 72px); }
.route-line svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.route-line path {
  fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: route-draw 2.2s var(--ease) 0.4s forwards;
}
.route-line__dot {
  position: absolute; left: var(--x); top: var(--y); width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border: 1.5px solid var(--accent); border-radius: 50%; background: var(--bg);
  opacity: 0; animation: route-dot 0.45s var(--ease) forwards; animation-delay: calc(0.4s + var(--i) * 0.36s);
}
.route-line__dot--end { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; background: var(--accent); }
.page .route-line__ends { display: flex; justify-content: space-between; margin-top: 16px; color: var(--ink-3); font-size: 14px; }
@keyframes route-draw { to { stroke-dashoffset: 0; } }
@keyframes route-dot { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .route-line path { stroke-dashoffset: 0; animation: none; }
  .route-line__dot { opacity: 1; animation: none; }
}

/* what you can come to us for: a numbered list, each row a link */
.needs { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.need {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) 32px; gap: 24px; align-items: baseline;
  padding: clamp(22px, 2.6vw, 32px) 0; border-bottom: 1px solid var(--line); color: var(--text);
}
.need:hover { color: var(--text); text-decoration: none; }
.need__n { color: var(--accent); font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.need__body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 8px 40px; align-items: baseline; }
.need__t {
  font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 34px); font-weight: 500;
  line-height: 1.15; letter-spacing: -0.02em; transition: color 0.25s ease;
}
.need__d { color: var(--ink-2); font-size: var(--t-body); line-height: 1.5; }
.need__go { justify-self: end; color: var(--accent); font-size: 22px; transition: transform 0.35s var(--ease-snap); }
.need:hover .need__t { color: var(--accent); }
.need:hover .need__go { transform: translateX(6px); }
.page .needs__who { margin-top: 28px; color: var(--ink-3); font-size: 15px; line-height: 1.9; }
.needs__label { margin-right: 6px; color: var(--ink-2); font-weight: 500; }
.needs__who a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.needs__who a:hover { color: var(--accent); text-decoration-color: currentColor; }

/* how we look after you: three promises under a rule */
.care { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); margin: 0; padding: 0; list-style: none; }
.care__item { padding-top: 20px; border-top: 2px solid var(--text); }
.page .care__n { margin-bottom: 18px; color: var(--accent); font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.care__item h3 { margin-bottom: 10px; font-size: clamp(22px, 2vw, 26px); letter-spacing: -0.015em; }

/* the founders, their own figures, and the way into their story */
.founders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.founder .photo { margin-bottom: 20px; }
.founder h3 { font-size: 22px; letter-spacing: -0.015em; }
.founder .eyebrow { margin: 6px 0 10px; }
.page .founder p:not(.eyebrow) { color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: clamp(40px, 5vw, 64px) 0 0; padding-top: 28px; border-top: 1px solid var(--line); }
.figures dt { font-family: var(--font-display); font-size: clamp(32px, 3.4vw, 44px); font-weight: 500; line-height: 1; letter-spacing: -0.03em; }
.figures dd { margin: 10px 0 0; color: var(--ink-3); font-size: 14px; line-height: 1.4; }
.page .figures__note { margin-top: 18px; text-align: left; font-size: 14px; }
.home-founders__more { margin-top: 20px; }

/* brands: one row each, no picture until there is a real one */
.brandrows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.brandrow {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 6fr) 32px; gap: 8px 32px; align-items: baseline;
  padding: 24px 0; border-bottom: 1px solid var(--line); color: var(--text);
}
.brandrow:hover { color: var(--text); text-decoration: none; }
.brandrow__name { font-family: var(--font-display); font-size: clamp(20px, 2vw, 24px); font-weight: 500; letter-spacing: -0.015em; transition: color 0.25s ease; }
.brandrow__cat { color: var(--ink-3); font-size: 14px; }
.brandrow__pos { color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.brandrow__go { justify-self: end; color: var(--accent); transition: transform 0.35s var(--ease-snap); }
.brandrow:hover .brandrow__name { color: var(--accent); }
.brandrow:hover .brandrow__go { transform: translateX(6px); }

/* the close: the application, or a founder on WhatsApp */
.home-close__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.home-close__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip--wa { gap: 8px; min-height: 44px; padding: 0 18px; }
.chip--wa .wa { position: static; width: 15px; height: 15px; fill: currentColor; opacity: 1; }

@media (max-width: 860px) {
  .care { grid-template-columns: minmax(0, 1fr); }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brandrow { grid-template-columns: minmax(0, 1fr) 24px; gap: 6px 16px; }
  .brandrow > :not(.brandrow__go) { grid-column: 1; }
  .brandrow__go { grid-column: 2; grid-row: 1; }
}
@media (max-width: 680px) {
  .need { grid-template-columns: 32px minmax(0, 1fr) 20px; gap: 14px; }
  .need__body { grid-template-columns: minmax(0, 1fr); }
  .founders { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .founder { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 18px; align-items: start; }
  .founder .photo { grid-row: span 3; margin: 0; }
  .founder .plate__mark { font-size: 30px; }
  .home-close__acts .btn { width: 100%; }
}

/* ── Nav dropdowns ──────────────────────────────────────────────────────
   As the design system's mega menu: a compact solid panel under the bar, columns of grouped
   links with a small caption each, a centred "all …" link, opening with a short rise and fade.
   No arrows: on desktop the panel opens on hover or keyboard focus; in the drawer the row
   itself unfolds the links in place. */
.nav__item { position: static; display: flex; align-items: center; }
.nav__row { display: flex; align-items: center; }
.nav__menu {
  position: absolute; z-index: 1; top: calc(100% + 6px); left: 0; display: grid; grid-template-columns: repeat(var(--cols, 1), max-content);
  justify-content: space-between; gap: 12px 16px; min-width: 100%; width: max-content; max-width: calc(100vw - 32px); padding: 16px 18px 14px;
  border: 0.5px solid var(--chrome-line); border-radius: 14px; background: var(--chrome-solid);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.55);
  opacity: 0; visibility: hidden; transform: translateY(24px);
  transition: opacity 0.08s ease, transform 0.08s ease, visibility 0s linear 0.08s;
}
.nav__item.is-open .nav__menu, html:not(.js) .nav__item:is(:hover, :focus-within) .nav__menu {
  opacity: 1; visibility: visible; transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0s;
}
.nav__group { display: grid; align-content: start; gap: 1px; }
.nav__cap { margin: 0 0 5px; padding: 0 7px; color: var(--ink-3); font-size: 10.5px; font-weight: 400; line-height: 1.4; }
.nav__menu a {
  display: flex; align-items: center; min-height: 30px; padding: 0 8px; border-radius: 8px;
  color: var(--text); font-size: 13.5px; font-weight: 500; line-height: 1.2; white-space: nowrap;
  opacity: 0; transition: background 0.2s ease, opacity 0.05s ease;
}
.nav__item.is-open .nav__menu a, html:not(.js) .nav__item:is(:hover, :focus-within) .nav__menu a {
  opacity: 1; transition: background 0.2s ease, opacity 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53) calc(60ms + var(--i, 0) * 50ms);
}
.nav__menu a:hover, .nav__menu a:focus-visible { background: var(--chrome-hover); text-decoration: none; }
.nav__menu a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.nav__all { grid-column: 1 / -1; justify-self: center; margin-top: 2px; padding: 0 18px; }
@media (max-width: 1240px) {
  .nav__item { position: relative; flex-direction: column; align-items: stretch; border-bottom: 1px solid rgba(255, 255, 255, 0.85); }
  .nav__row { display: block; }
  .nav__row .nav__link { border-bottom: 0; }
  .nav__menu {
    position: static; display: none; width: auto; min-width: 0; max-width: none; padding: 4px 8px 12px; grid-template-columns: minmax(0, 1fr); gap: 10px;
    border: 0; border-radius: 0; background: var(--fill); box-shadow: none;
    opacity: 1; visibility: visible; transform: none; transition: none;
  }
  .nav__item.is-open .nav__menu { display: grid; }
  .nav__cap { padding: 10px 12px 2px; font-size: 11px; }
  .nav__menu a { min-height: 44px; padding: 0 12px 0 24px; font-size: 15px; opacity: 1; transition: background 0.2s ease; white-space: normal; }
  .nav__item.is-open .nav__menu a { transition: background 0.2s ease; }
  .nav__all { justify-self: stretch; margin-top: 2px; padding-left: 12px; }
  .nav[data-hero="1"][data-dark="1"] .nav__item { border-bottom-color: rgba(255, 255, 255, 0.16); }
}
@media (prefers-reduced-motion: reduce) {
  .nav__menu, .nav__menu a { transition: none; }
  .nav__item.is-open .nav__menu a { transition-delay: 0s; }
}
:root .nav__item { border-bottom-color: var(--chrome-line); }

/* ── Home slides ────────────────────────────────────────────────────────
   As the design system's HeroSlider: full-screen slides, the next one waiting collapsed at the
   right edge and wiping in, copy pinned low and centred that cross-fades, glass arrows at the
   sides, step labels over a progress line at the bottom right, and a scroll cue. The slides
   are dark in both themes, like a photograph, and the chrome turns white over them. */
.hero-slides { position: relative; z-index: 0; height: 100svh; min-height: 600px; max-height: 1100px; overflow: hidden; isolation: isolate; background: #000; color: #fff; }
.hero-slides:focus { outline: none; }
.slide { position: absolute; inset: 0; clip-path: inset(0); transition: clip-path 1s cubic-bezier(0.455, 0.03, 0.515, 0.955); }
.slide--1 { z-index: 2; }
.slide.close-right { clip-path: inset(0 0 0 100%); }
.slide.close-left { clip-path: inset(0 100% 0 0); }
.slide__shot { position: absolute; inset: 0; background: radial-gradient(62% 56% at 72% 22%, #3b4c7c 0%, #161c30 42%, #000 78%); }
.slide--2 .slide__shot {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 96px),
    radial-gradient(72% 60% at 24% 36%, #4b4642 0%, #1f1c1a 44%, #000 80%);
}
.slide--3 .slide__shot { background: radial-gradient(66% 58% at 58% 28%, #2a4fb8 0%, #121c3e 44%, #000 80%); }
.slide--4 .slide__shot { background: radial-gradient(70% 56% at 34% 26%, #2f6172 0%, #10232a 44%, #000 80%); }
.slide__shot :is(img, video) { width: 100%; height: 100%; object-fit: cover; }
.slide__fade { position: absolute; inset: auto 0 0; height: 48%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000); }
/* slide one carries the route line, large, as the page's signature */
.slide__route { position: absolute; left: 50%; top: 14%; width: min(1100px, 92vw); transform: translateX(-50%); opacity: 0.75; }
.slide__route .route-line { height: clamp(70px, 10vw, 128px); margin: 0; }
.slide__route .route-line path { stroke: #6289ff; }
.slide__route .route-line__dot { border-color: #6289ff; background: #000; }
.slide__route .route-line__dot--end { background: #6289ff; }
.slide__copy {
  position: absolute; z-index: 3; left: 50%; bottom: 16vh; width: min(92vw, 760px); transform: translateX(-50%); text-align: center;
  opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
.slide__copy.is-active { opacity: 1; visibility: visible; transition-delay: 0.5s, 0s; }
.page .slide__kicker { margin-bottom: 18px; color: #b4c6ff; font-size: 14px; font-weight: 500; letter-spacing: 0.02em; }
.slide__title { margin: 0; color: #fff; font-size: clamp(36px, 5.6vw, 72px); line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance; }
.page .slide__sub { max-width: 58ch; margin: 20px auto 0; color: rgba(255, 255, 255, 0.74); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.45; }
.slide__copy .btn { margin-top: 28px; }
.slide-arrow {
  position: absolute; z-index: 4; top: 50%; display: grid; place-items: center; width: 56px; height: 56px; padding: 0;
  border: 0.5px solid rgba(255, 255, 255, 0.22); border-radius: 14px; background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #fff; cursor: pointer;
  transform: translateY(-50%); transition: background 0.25s ease, border-color 0.25s ease;
}
.slide-arrow:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.42); }
.slide-arrow:focus-visible { outline: 2px solid #6289ff; outline-offset: 2px; }
.slide-arrow--prev { left: clamp(16px, 4vw, 56px); }
.slide-arrow--next { right: clamp(16px, 4vw, 56px); }
.slide-arrow__ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s var(--ease); }
.slide-arrow--prev .slide-arrow__ico { transform: scaleX(-1); }
.slide-arrow:hover .slide-arrow__ico { transform: scale(1.2); }
.slide-arrow--prev:hover .slide-arrow__ico { transform: scaleX(-1) scale(1.2); }
.slide-steps { position: absolute; z-index: 4; right: clamp(16px, 4vw, 56px); bottom: 6vh; width: clamp(180px, 18vw, 240px); }
.slide-steps__labels { display: flex; justify-content: space-between; }
.slide-steps__labels button {
  min-width: 36px; min-height: 36px; padding: 0 6px; border: 0; background: none; color: #fff;
  font-family: inherit; font-size: 14px; font-weight: 500; opacity: 0.62; cursor: pointer; transition: opacity 0.3s ease;
}
.slide-steps__labels button.is-active { opacity: 1; }
.slide-steps__labels button:focus-visible { outline: 2px solid #6289ff; outline-offset: -2px; border-radius: 6px; }
.slide-steps__line { height: 2px; margin-top: 6px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, 0.22); }
.slide-steps__line span { display: block; height: 100%; background: #6289ff; }
.slide-cue {
  position: absolute; z-index: 4; left: 50%; bottom: 4vh; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px;
  transform: translateX(-50%); color: rgba(255, 255, 255, 0.85); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap;
}
.slide-cue:hover { color: #fff; text-decoration: none; }
.slide-cue__ico { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; animation: cue-bob 1.8s ease-in-out infinite; }
@keyframes cue-bob { 0%, 100% { transform: translateY(-2px); opacity: 0.5; } 50% { transform: translateY(4px); opacity: 1; } }
/* on load the copy rises in line by line, then the controls fade in */
.js .hero-slides:not(.is-ready) :is(.slide__copy > *, .slide-arrow, .slide-steps, .slide-cue) { opacity: 0; }
.hero-slides.is-ready .slide__copy.is-active > * { animation: slide-rise 1s cubic-bezier(0.215, 0.61, 0.355, 1) backwards; }
.hero-slides.is-ready .slide__copy.is-active > :nth-child(2) { animation-delay: 0.1s; }
.hero-slides.is-ready .slide__copy.is-active > :nth-child(3) { animation-delay: 0.2s; }
.hero-slides.is-ready .slide__copy.is-active > :nth-child(4) { animation-delay: 0.3s; }
.hero-slides.is-ready :is(.slide-arrow, .slide-steps, .slide-cue) { animation: slide-fade 1s ease 0.6s backwards; }
.hero-slides.is-settled :is(.slide__copy > *, .slide-arrow, .slide-steps, .slide-cue) { animation: none; opacity: 1; }
@keyframes slide-rise { from { transform: translateY(28px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slide-fade { from { opacity: 0; } to { opacity: 1; } }
html:not(.js) .slide:not(.slide--1), html:not(.js) :is(.slide-arrow, .slide-steps) { display: none; }
@media (prefers-reduced-motion: reduce) {
  .slide, .slide__copy { transition: none; }
  .slide-cue__ico, .hero-slides.is-ready .slide__copy.is-active > *, .hero-slides.is-ready :is(.slide-arrow, .slide-steps, .slide-cue) { animation: none; }
}
@media (max-width: 860px) {
  .slide-steps { display: none; }
}
@media (max-width: 680px) {
  .hero-slides { min-height: 560px; }
  .slide__route { top: 12%; }
  .slide__copy { bottom: 9vh; width: calc(100% - 48px); }
  .page .slide__kicker { margin-bottom: 12px; font-size: 12px; }
  .slide__title { font-size: clamp(27px, 7.6vw, 34px); }
  .page .slide__sub { margin-top: 12px; font-size: 15px; }
  .slide__copy .btn { margin-top: 16px; }
  .slide-arrow { width: 38px; height: 38px; border-radius: 10px; }
  .slide-arrow--prev { left: 11px; }
  .slide-arrow--next { right: 11px; }
  .slide-arrow__ico { width: 16px; height: 16px; }
  .slide-cue { bottom: 1.5vh; font-size: 10px; }
}

/* ── Client case on a market playbook: anonymous, labelled in progress ── */
.case__private { max-width: 60ch; margin: -12px auto 40px; color: var(--ink-3); font-size: var(--t-caption); line-height: 1.5; text-align: center; }
.case__did { margin-bottom: 16px; text-align: center; }
.case-card { display: flex; flex-direction: column; gap: 10px; }
.case-card h3 + p { margin-top: 0; }
.case-card p { color: var(--ink-2); }
.case-card__svc { margin-top: auto; padding-top: 6px; align-self: flex-start; }
.case-phases { margin: 0; padding: 0; list-style: none; }
.case-phase { display: flex; flex-direction: column; gap: 10px; }
.case-phase p { color: var(--ink-2); }
.case-phase h3 + p { margin-top: 0; }
.case-phase__gate { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); color: var(--text) !important; font-weight: 600; }
.case-phase__gate .eyebrow { display: block; margin-bottom: 6px; font-weight: 500; }
.case-deliver { margin-top: var(--gap); }
.case-did { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1023px) { .case-did { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .case-did { grid-template-columns: minmax(0, 1fr); } }