/* ==========================================================================
   MotionWave — styles.css
   Light, warm, editorial. Accents used sparingly.
   Themes: Champagne (light, the default) and Noir (dark). Noir is applied
   automatically when the system prefers dark, unless the visitor picks a
   theme explicitly via html[data-theme="…"].
   ========================================================================== */

/* Webfonts — self-hosted, latin subsets (other scripts fall through to the
   system stacks via unicode-range). Inter: body/UI. Playfair Display:
   display headings. Kept CDN-free on purpose; lives in assets/fonts. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/inter-400-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/inter-500-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/inter-600-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/inter-700-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/playfairdisplay-700-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Palette (branding guideline) */
  --charcoal: #171717;
  --gold: #B8944A;        /* accent */
  --champagne: #D8C18A;   /* soft accent */
  --ivory: #F8F6F1;
  --sand: #EEE9DE;
  --white: #FFFFFF;
  --slate: #4D5152;

  --ink-soft: rgba(23, 23, 23, 0.72);
  --line: rgba(23, 23, 23, 0.1);
  --line-strong: rgba(23, 23, 23, 0.16);

  /* Ambient background — warm beige with soft light */
  --bg-base: #F2ECDF;
  --bg-tint: #F7F2E8;
  --bg-deep: #E9E0CC;
  --glow-1: rgba(216, 193, 138, 0.38);
  --glow-2: rgba(224, 210, 180, 0.5);
  --spot-glow: rgba(255, 251, 240, 0.5); /* cursor spotlight pool */
  --grain-opacity: 0.05;                  /* paper grain over the ambient wash */
  --water-ink: rgba(184, 148, 74, 0.15);  /* wave lines of the water surface */

  /* Sheen that trails the cursor across a service card */
  --card-spot: rgba(184, 148, 74, 0.08);

  /* Surfaces */
  --surface: #FFFFFF;
  --xp-slide-bg: var(--band-1); /* carousel slides sit a step off the page */
  --edu-plate-bg: var(--band-1); /* school logo plates blend with the page */
  --card-bg: linear-gradient(155deg, #FBF6EA 0%, #F7F0DE 55%, #F1E6CB 100%); /* soft champagne-gold card */
  --card-border: color-mix(in srgb, var(--gold) 18%, var(--line));
  --band-1: #F0E9D9;
  --band-2: #E8DFC9;
  --header-bg: rgba(242, 236, 223, 0.88);
  --card-shadow: rgba(23, 23, 23, 0.05);
  --card-shadow-hover: rgba(23, 23, 23, 0.1);
  --portrait-shadow: rgba(23, 23, 23, 0.13);
  --accent-border: rgba(184, 148, 74, 0.4);
  --on-accent: #1D1B16;
  --ink-hover: #2E2C28;
  --header-shadow: 0 2px 14px rgba(23, 23, 23, 0.06);
  --header-shadow-scrolled: 0 10px 28px rgba(23, 23, 23, 0.09);
  --hover-wash: rgba(23, 23, 23, 0.05);

  /* Dark section (contact + footer) */
  --dark-bg: #1B1A17;
  --dark-glow: rgba(184, 148, 74, 0.14);
  --dark-ink: #F5F1E6;
  --dark-ink-soft: rgba(245, 241, 230, 0.74);
  --dark-ink-faint: rgba(245, 241, 230, 0.55);
  --dark-line: rgba(245, 241, 230, 0.16);
  --dark-accent: #D8C18A;
  --dark-field-bg: rgba(245, 241, 230, 0.06);
  --dark-field-line: rgba(245, 241, 230, 0.22);
  --dark-focus: #D8C18A;
  --success-bg: rgba(216, 193, 138, 0.14);
  --success-line: rgba(216, 193, 138, 0.45);

  /* Type — self-hosted Inter (body/UI) and Playfair Display (display
     headings), with system stacks and CJK fallbacks */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --font-display: "Playfair Display", Georgia, "Times New Roman",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "Noto Sans CJK SC", sans-serif;
  --font-serif: Georgia, "Times New Roman", "Songti SC", "SimSun", serif;

  --container: 72rem;
  --header-h: 4.25rem;
  --radius: 14px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   Themes — Champagne (light) is the default; Noir (dark) takes over when
   the system prefers dark, unless the visitor picks a theme via the header
   switcher (persisted in localStorage and pinned as data-theme).
   -------------------------------------------------------------------------- */

/* Noir — warm charcoal with champagne light.
   Keep the token set in sync with the prefers-color-scheme block below. */
html[data-theme="noir"] {
  color-scheme: dark;
  --charcoal: #F2EEE2;
  --gold: #C9A96A;
  --champagne: #D8C18A;
  --ivory: #161511;
  --sand: #1C1A15;
  --white: #201E19;
  --slate: rgba(238, 232, 218, 0.76);

  --ink-soft: rgba(238, 232, 218, 0.62);
  --line: rgba(238, 232, 218, 0.12);
  --line-strong: rgba(238, 232, 218, 0.22);

  --bg-base: #171511;
  --bg-tint: #1C1A14;
  --bg-deep: #110F0B;
  --glow-1: rgba(201, 169, 106, 0.14);
  --glow-2: rgba(96, 88, 66, 0.32);
  --spot-glow: rgba(216, 193, 138, 0.12);
  --grain-opacity: 0.07;
  --card-spot: rgba(201, 169, 106, 0.09);
  --water-ink: rgba(201, 169, 106, 0.13);

  --surface: #201E19;
  --xp-slide-bg: var(--surface);
  --edu-plate-bg: #DED7C6; /* light plate so the dark logos stay readable */
  --card-bg: var(--surface);
  --card-border: var(--line);
  --band-1: #1D1B15;
  --band-2: #181610;
  --header-bg: rgba(23, 21, 17, 0.86);
  --card-shadow: rgba(0, 0, 0, 0.35);
  --card-shadow-hover: rgba(0, 0, 0, 0.5);
  --portrait-shadow: rgba(0, 0, 0, 0.45);
  --accent-border: rgba(201, 169, 106, 0.45);
  --on-accent: #1D1B16;
  --ink-hover: #E3DCCA;
  --header-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
  --header-shadow-scrolled: 0 10px 28px rgba(0, 0, 0, 0.5);
  --hover-wash: rgba(238, 232, 218, 0.07);

  --dark-bg: #201E19;
  --dark-glow: rgba(201, 169, 106, 0.1);
  --dark-ink: #F5F1E6;
  --dark-ink-soft: rgba(245, 241, 230, 0.74);
  --dark-ink-faint: rgba(245, 241, 230, 0.55);
  --dark-line: rgba(245, 241, 230, 0.16);
  --dark-accent: #D8C18A;
  --dark-field-bg: rgba(245, 241, 230, 0.06);
  --dark-field-line: rgba(245, 241, 230, 0.22);
  --dark-focus: #D8C18A;
  --success-bg: rgba(216, 193, 138, 0.14);
  --success-line: rgba(216, 193, 138, 0.45);
}

/* System dark mode with no explicit pick — the stylesheet mirrors Noir so
   the default follows the OS setting even without JavaScript. Keep this
   token set in sync with html[data-theme="noir"] above. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    color-scheme: dark;
    --charcoal: #F2EEE2;
    --gold: #C9A96A;
    --champagne: #D8C18A;
    --ivory: #161511;
    --sand: #1C1A15;
    --white: #201E19;
    --slate: rgba(238, 232, 218, 0.76);

    --ink-soft: rgba(238, 232, 218, 0.62);
    --line: rgba(238, 232, 218, 0.12);
    --line-strong: rgba(238, 232, 218, 0.22);

    --bg-base: #171511;
    --bg-tint: #1C1A14;
    --bg-deep: #110F0B;
    --glow-1: rgba(201, 169, 106, 0.14);
    --glow-2: rgba(96, 88, 66, 0.32);
  --spot-glow: rgba(216, 193, 138, 0.12);
  --grain-opacity: 0.07;
  --card-spot: rgba(201, 169, 106, 0.09);
  --water-ink: rgba(201, 169, 106, 0.13);

    --surface: #201E19;
    --xp-slide-bg: var(--surface);
    --edu-plate-bg: #DED7C6;
    --card-bg: var(--surface);
    --card-border: var(--line);
    --band-1: #1D1B15;
    --band-2: #181610;
    --header-bg: rgba(23, 21, 17, 0.86);
    --card-shadow: rgba(0, 0, 0, 0.35);
    --card-shadow-hover: rgba(0, 0, 0, 0.5);
    --portrait-shadow: rgba(0, 0, 0, 0.45);
    --accent-border: rgba(201, 169, 106, 0.45);
    --on-accent: #1D1B16;
    --ink-hover: #E3DCCA;
    --header-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
    --header-shadow-scrolled: 0 10px 28px rgba(0, 0, 0, 0.5);
    --hover-wash: rgba(238, 232, 218, 0.07);

    --dark-bg: #201E19;
    --dark-glow: rgba(201, 169, 106, 0.1);
    --dark-ink: #F5F1E6;
    --dark-ink-soft: rgba(245, 241, 230, 0.74);
    --dark-ink-faint: rgba(245, 241, 230, 0.55);
    --dark-line: rgba(245, 241, 230, 0.16);
    --dark-accent: #D8C18A;
    --dark-field-bg: rgba(245, 241, 230, 0.06);
    --dark-field-line: rgba(245, 241, 230, 0.22);
    --dark-focus: #D8C18A;
    --success-bg: rgba(216, 193, 138, 0.14);
    --success-line: rgba(216, 193, 138, 0.45);
  }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--slate);
  /* Ambient, high-end wash: a champagne glow upper-right, a deeper beige
     rising from lower-left, over a vertical tint→base→deep gradient. */
  background-color: var(--bg-base);
  background-image:
    radial-gradient(52rem 38rem at 86% -6rem, var(--glow-1), transparent 65%),
    radial-gradient(46rem 34rem at -8rem 104%, var(--glow-2), transparent 62%),
    linear-gradient(180deg, var(--bg-tint) 0%, var(--bg-base) 42%, var(--bg-deep) 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html[lang="zh-CN"] body {
  line-height: 1.85;
  letter-spacing: 0.01em;
}

/* Cursor spotlight — a soft pool of light that follows the pointer across
   the ambient background. main.js only feeds the coordinates (once per
   frame, via --spot-x/--spot-y); the layer stays invisible without
   JavaScript, before the first move, and while the pointer is outside the
   window. It paints above the body background but below all content, so
   opaque sections and cards naturally cover it. */
body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 72rem;
  height: 72rem;
  margin: -36rem 0 0 -36rem; /* centre the pool on the translated point */
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle closest-side, var(--spot-glow), transparent 72%);
  transform: translate3d(var(--spot-x, 50vw), var(--spot-y, 32vh), 0);
  transition: opacity 0.45s var(--ease);
}

html.spotlight-live body::after { opacity: 1; }

/* Paper grain — a fine fractal-noise tile, blended into the ambient wash.
   Static (no JS, no motion); it gives the flat gradient the tactile feel of
   premium stock. Sits with the spotlight below all content, so opaque
   bands and cards cover it. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
}

/* Water surface — a faint field of drifting wave lines on a fixed canvas
   that main.js creates (nothing renders without it). It sits just above
   the ambient wash but below the grain and the cursor spotlight, so
   opaque bands and cards still cover it. The pointer disturbs it like a
   hand drawn through water, and scrolling stirs it; both behaviours live
   in js/main.js. The stroke colour follows --water-ink per theme. */
.water-canvas {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

h1, h2, h3 {
  color: var(--charcoal);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
  font-weight: 700;
}

/* Display face for the big headings only. h3 stays in the body sans, and
   the serif accents (.gilt italics, quotes, founder belief) deliberately
   keep Georgia so the gold italics read exactly as before. */
h1, h2 { font-family: var(--font-display); }

p { margin: 0 0 1rem; }

a { color: inherit; }

/* Gold selection wash — readable on both themes via --on-accent */
::selection {
  background: var(--champagne);
  color: var(--on-accent);
}

img { max-width: 100%; height: auto; display: block; }

ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4.5vw, 2.5rem);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--charcoal);
  color: var(--ivory);
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  font-size: 0.9rem;
}
.skip-link:focus { top: 0; }

/* --------------------------------------------------------------------------
   Shared pieces
   -------------------------------------------------------------------------- */

.eyebrow {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.1rem;
}

/* A short gold tick leads every section eyebrow — the hero keeps its
   pulsing dot instead. currentColor keeps it correct in the dark section. */
.section .eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.35rem;
  height: 1px;
  margin-right: 0.6rem;
  vertical-align: middle;
  background: currentColor;
  opacity: 0.75;
}

.accent { color: var(--gold); }

.section { padding-block: clamp(2.5rem, 5vw, 4rem); }

.section-lede {
  max-width: 44rem;
  font-size: 1.125rem;
  line-height: 1.75;
}

.section h2 {
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 2.9rem);
}
#services-title { max-width: 22ch; }
/* CJK glyphs are ~2x a latin ch — let the Chinese headline run on one line */
html[lang="zh-CN"] #services-title { max-width: none; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
    border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn .arrow { transition: transform 0.25s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

.btn-primary {
  background: var(--charcoal);
  color: var(--ivory);
}
.btn-primary:hover { background: var(--ink-hover); }

.btn-ghost {
  color: var(--charcoal);
  border-color: var(--line-strong);
  background: transparent;
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }

.btn-gold {
  background: var(--gold);
  color: var(--on-accent);
}
.btn-gold:hover { background: var(--champagne); }

/* Slow sheen sweeping across the filled buttons on hover/focus — clipped to
   the pill, one pass per hover. Ghost buttons keep their border treatment. */
.btn-primary,
.btn-gold {
  position: relative;
  overflow: hidden;
}
.btn-primary::after,
.btn-gold::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 34%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent,
    rgba(255, 252, 245, 0.32), transparent);
  transform: translateX(-240%) skewX(-18deg);
  transition: transform 0.9s var(--ease);
}
.btn-primary:hover::after,
.btn-gold:hover::after,
.btn-primary:focus-visible::after,
.btn-gold:focus-visible::after {
  transform: translateX(440%) skewX(-18deg);
}

.btn-sm { padding: 0.55rem 1.15rem; font-size: 0.9rem; }

/* --------------------------------------------------------------------------
   Header / navigation
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  box-shadow: var(--header-shadow);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.site-header.scrolled {
  border-bottom-color: var(--line);
  box-shadow: var(--header-shadow-scrolled);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
}
.brand-mark {
  width: 56px;
  height: 23px;
  flex: none;
  /* The mark's dot sits above the wave, so its bounding box centers high;
     shift up so the wave (the main mass) aligns with the brand text. */
  transform: translateY(-15%);
}
.brand-wordmark {
  display: block;
  width: auto;
  height: 15px;
  flex: none;
}
/* The noir theme turns the header dark, so it swaps the black wordmark for
   the white one; the footer (dark in every theme) only uses the white one. */
.brand-wordmark--noir { display: none; }
html[data-theme="noir"] .site-header .brand-wordmark:not(.brand-wordmark--noir) { display: none; }
html[data-theme="noir"] .site-header .brand-wordmark--noir { display: block; }
/* System dark with no explicit pick also turns the header dark — mirror the
   swap so the white wordmark shows before any theme is picked. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .site-header .brand-wordmark:not(.brand-wordmark--noir) { display: none; }
  html:not([data-theme]) .site-header .brand-wordmark--noir { display: block; }
}

/* The header carries a larger lockup; the footer keeps the compact one.
   The full lockup only fits beside the desktop nav from 1180px up — below
   that band the compact sizes keep the row on one line. */
.site-header .brand { flex-shrink: 0; } /* the height-sized wordmark img can't shrink — keep it out of the squeeze */
.site-header .brand-mark { width: 96px; height: 40px; }
.site-header .brand-wordmark { height: 25px; }
@media (max-width: 1179px) {
  .site-header .brand-mark { width: 72px; height: 30px; }
  .site-header .brand-wordmark { height: 18px; }
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2vw, 1.6rem);
}

/* Keep two-word labels on one line — the flex row must squeeze the gap, not the words */
.site-nav a { white-space: nowrap; }

.site-nav a:not(.btn):not(.submenu-item) {
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--charcoal);
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-position: left calc(100% - 2px);
  background-size: 0 2px;
  transition: background-size 0.25s var(--ease), color 0.25s var(--ease);
  padding-bottom: 4px;
}
.site-nav a:not(.btn):not(.submenu-item):hover {
  color: var(--gold);
  background-size: 100% 2px;
}

/* The nav CTA runs slightly smaller than the standalone button — the header
   row has to absorb five links, the CTA and the lockup within one container */
.site-nav .nav-cta-item .btn {
  padding-inline: 1.2rem;
  font-size: 0.95rem;
}

/* Language & theme submenu */
.nav-menu-item { position: relative; }

.nav-submenu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 34px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--charcoal);
  cursor: pointer;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.nav-submenu-toggle:hover,
.nav-submenu-toggle[aria-expanded="true"] { color: var(--gold); border-color: var(--gold); }

.nav-submenu {
  display: none;
  position: absolute;
  top: calc(100% + 0.75rem);
  right: 0;
  z-index: 60;
  min-width: 200px;
  padding: 0.3rem 0.35rem 0.55rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 20px 44px var(--card-shadow-hover);
}

/* No-JS fallback for the desktop popover: hover or keyboard focus opens it.
   Desktop widths only — the mobile panel shows the groups inline, and
   sticky :hover from taps must never hide them. */
@media (min-width: 861px) {
  .nav-menu-item:hover .nav-submenu,
  .nav-menu-item:focus-within .nav-submenu { display: block; }
  /* With JS, clicking the toggle owns the open state. */
  html.js .nav-menu-item:hover .nav-submenu:not(.open) { display: none; }
}
.nav-submenu.open {
  display: block;
  animation: submenu-in 0.18s var(--ease);
}

@keyframes submenu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.submenu-label {
  margin: 0.85rem 0.65rem 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.nav-submenu .submenu-label:first-child { margin-top: 0.45rem; }

.submenu-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font: inherit;
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--ink-soft);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.submenu-item:hover { background: var(--hover-wash); color: var(--charcoal); }
span.submenu-item { cursor: default; }
.submenu-item.is-current {
  color: var(--charcoal);
  font-weight: 600;
}

.lang-switch,
.theme-switch { display: flex; flex-direction: column; gap: 2px; }

.theme-swatch {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
}
.theme-option[aria-pressed="true"] { color: var(--charcoal); font-weight: 600; }
.theme-option[aria-pressed="true"]::after {
  content: "✓";
  margin-left: auto;
  font-weight: 700;
  color: var(--gold);
}
.theme-option[aria-pressed="true"] .theme-swatch {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--gold);
}

.dot-champagne { background: linear-gradient(135deg, #F2ECDF 50%, #B8944A 50%); }
.dot-noir      { background: linear-gradient(135deg, #26241E 50%, #C9A96A 50%); }

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--charcoal);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(2.5rem, 4vw, 3rem);
}

/* The first section sits tighter under the hero than the rest of the page */
#services { padding-top: clamp(2rem, 3.5vw, 2.75rem); }

/* Keep the copy above the glow and motif layers */
.hero .container { position: relative; }

/* Soft light pooling behind the headline and motif */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(38rem 30rem at 72% 38%, var(--glow-1), transparent 66%);
  pointer-events: none;
}

.hero h1 {
  font-size: clamp(2.6rem, 1.4rem + 5.2vw, 4.75rem);
  max-width: 15ch;
  margin-bottom: 1.4rem;
}

.hero-lede {
  max-width: 54rem;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  line-height: 1.75;
  margin-bottom: 2.2rem;
}

/* Gilded key terms — serif italic in accent gold, echoing the headline.
   Used in the hero lede and one phrase per capability card. */
.gilt {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.06em; /* Georgia reads small next to the sans body */
  color: var(--gold);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.gold-rule {
  width: 76px;
  height: 2px;
  margin-top: 2.25rem;
  background: linear-gradient(90deg, var(--gold), var(--champagne));
  transform-origin: left;
  animation: rule-grow 0.9s var(--ease) 0.8s both;
}

@keyframes rule-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Staggered hero entrance — pure CSS, runs on load (no JS needed) */
.hero-in {
  opacity: 0;
  animation: hero-in 0.9s var(--ease) forwards;
}
.hero .eyebrow.hero-in { animation-delay: 0.1s; }
.hero h1.hero-in { animation-delay: 0.28s; }
.hero .hero-lede.hero-in { animation-delay: 0.46s; }
.hero .hero-support.hero-in { animation-delay: 0.55s; }
.hero .hero-actions.hero-in { animation-delay: 0.64s; }

@keyframes hero-in {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

/* Gold highlight sweeps in behind the accent word */
.hero h1 .accent {
  position: relative;
  z-index: 0;
  white-space: nowrap;
}
.hero h1 .accent::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.06em;
  right: -0.06em;
  bottom: 0.05em;
  height: 0.34em;
  border-radius: 0.1em;
  background: var(--champagne);
  opacity: 0.5;
  transform: scaleX(0);
  transform-origin: left;
  animation: accent-sweep 0.7s var(--ease) 1.15s forwards;
}

@keyframes accent-sweep {
  to { transform: scaleX(1); }
}

/* Softly pulsing dot before the hero eyebrow */
.hero .eyebrow::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 0.6rem;
  border-radius: 50%;
  background: var(--gold);
  vertical-align: middle;
  animation: eyebrow-pulse 3.4s ease-out infinite;
}

@keyframes eyebrow-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 45%, transparent); }
  70%, 100% { box-shadow: 0 0 0 9px transparent; }
}


.hero-motif {
  position: absolute;
  top: 50%;
  right: -12%;
  width: clamp(320px, 42vw, 620px);
  height: auto;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--gold);
  /* The motif as a whole breathes in once; the inner orbits/draws keep
     running. Implied "to" keyframe keeps the ≤900px 0.5 opacity intact. */
  animation: motif-in 1.6s var(--ease) 0.15s both;
}

@keyframes motif-in {
  from { opacity: 0; }
}

.motif-dot-soft { fill: var(--champagne); }

.motif-orbit {
  transform-origin: 300px 300px;
  animation: orbit-spin 120s linear infinite;
}
.motif-orbit--reverse {
  animation-duration: 90s;
  animation-direction: reverse;
}

@keyframes orbit-spin {
  to { transform: rotate(360deg); }
}

/* Flowing arcs draw themselves across the motif on load */
.motif-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: motif-draw 1.4s var(--ease) forwards;
}
.motif-flow .motif-draw:nth-of-type(1) { animation-delay: 0.45s; }
.motif-flow .motif-draw:nth-of-type(2) { animation-delay: 0.7s; }
.motif-flow .motif-draw:nth-of-type(3) { animation-delay: 0.95s; }

@keyframes motif-draw {
  to { stroke-dashoffset: 0; }
}

/* Nodes drifting gently along the arcs */
.motif-float { animation: motif-float 7s ease-in-out infinite alternate; }
.motif-float--b { animation-duration: 9s; animation-delay: -2.5s; }
.motif-float--c { animation-duration: 10s; animation-delay: -1.5s; }
.motif-float--d { animation-duration: 8s; animation-delay: -4s; }

@keyframes motif-float {
  from { transform: translateY(-5px); }
  to { transform: translateY(6px); }
}

/* Sonar pulse — one node broadcasts a slow expanding ring */
.motif-pulse-ring {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: motif-pulse 4.5s ease-out infinite;
}

@keyframes motif-pulse {
  0% { transform: scale(0.3); opacity: 0.65; }
  60%, 100% { transform: scale(1.9); opacity: 0; }
}

/* --------------------------------------------------------------------------
   Services
   -------------------------------------------------------------------------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}

.card {
  position: relative;
  overflow: hidden;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 2.5vw, 2.2rem);
  box-shadow: 0 1px 2px var(--card-shadow);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
    border-color 0.35s var(--ease), background-color 0.35s var(--ease);
}
.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px var(--card-shadow-hover);
  border-color: var(--accent-border);
}

/* Gold sheen that trails the cursor across the card surface. main.js feeds
   --mx/--my (percentages) on pointermove; without JS the layer never shows.
   Painted above the text at very low alpha — the standard quiet-luxury
   spotlight treatment. */
.js .card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  background: radial-gradient(19rem 19rem at var(--mx, 50%) var(--my, 35%),
    var(--card-spot), transparent 72%);
}
.js .card:hover::after { opacity: 1; }

/* Gold sheen slides across the top edge on hover */
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--champagne));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.card:hover::before { transform: scaleX(1); }

.card-kicker {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.4rem;
}
.card-kicker span { color: var(--ink-soft); font-weight: 500; }

/* Icon and kicker share the head row of each capability card */
.card-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.4rem;
}
.card-head .card-icon { margin-bottom: 0; }
.card-head .card-kicker { margin-bottom: 0; }

/* Line-art service icons — strokes draw in as the card reveals */
.card-icon {
  width: 46px;
  height: 46px;
  color: var(--gold);
  margin-bottom: 1.25rem;
  transition: transform 0.35s var(--ease);
}
.card:hover .card-icon { transform: translateY(-3px); }

.js .card .icon-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.js .card.is-visible .icon-draw {
  animation: icon-draw 0.9s var(--ease) 0.25s forwards;
}
.js .card .icon-fade {
  opacity: 0;
  transition: opacity 0.7s ease 0.8s;
}
.js .card.is-visible .icon-fade { opacity: 0.55; }

@keyframes icon-draw {
  to { stroke-dashoffset: 0; }
}

.card h3 { font-size: 1.35rem; margin-bottom: 0.7rem; }
.card p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Opportunity
   -------------------------------------------------------------------------- */

.opportunity {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--band-1), var(--band-2));
  border-block: 1px solid var(--line);
}

/* Canada ↔ Asia bridge — node clusters joined by arcs, with slow
   pulses travelling between them. Purely decorative. */
.opportunity-motif {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--gold);
  pointer-events: none;
}
.opportunity .container { position: relative; }

.ow-dot { opacity: 0.9; }
@supports (offset-path: path("M0 0 L10 10")) {
  .ow-dot--a {
    offset-path: path("M185 305 C 480 265, 750 190, 1015 115");
    animation: ow-travel 9s linear infinite;
  }
  .ow-dot--b {
    offset-path: path("M185 305 C 430 330, 770 220, 1015 115");
    animation: ow-travel 13s linear infinite;
    animation-delay: -5s;
  }
}
@keyframes ow-travel {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}

.split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.opportunity h2 {
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 2.9rem);
  max-width: 20ch;
}

.opportunity-quote blockquote {
  margin: 0 0 1.5rem;
  padding-left: 1.4rem;
  border-left: 2px solid var(--gold);
}

.opportunity-quote blockquote p {
  font-family: var(--font-serif);
  font-size: clamp(1.45rem, 1.1rem + 1.7vw, 2.1rem);
  line-height: 1.4;
  color: var(--charcoal);
  margin: 0;
  letter-spacing: 0;
}

.quote-support { max-width: 34rem; }

/* --------------------------------------------------------------------------
   Why MotionWave — dark editorial band, deliberately unlike the boxed card
   sections: centered display type with gold full stops, a hairline 2x2
   point lattice with ghost numerals, and a letter-spaced gold strip.
   Shares the contact/footer dark token family so it reads as one system.
   -------------------------------------------------------------------------- */
.why {
  background:
    radial-gradient(48rem 30rem at 50% -8rem, var(--dark-glow), transparent 70%),
    var(--dark-bg);
  color: var(--dark-ink);
  border-top: 1px solid var(--dark-line);
  border-bottom: 1px solid var(--dark-line);
}
.why .eyebrow {
  color: var(--dark-accent);
  text-align: center;
}
.why-title {
  max-width: 26ch;
  margin: 0 auto;
  text-align: center;
  text-wrap: balance;
}
.why .accent { color: var(--dark-accent); }
.why h2, .why h3 { color: var(--dark-ink); } /* headings carry an explicit --charcoal that would beat inheritance */
.why-lede {
  max-width: 42rem;
  margin: 1.4rem auto 0;
  text-align: center;
  color: var(--dark-ink-soft);
}
.why-grid {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: clamp(2.6rem, 4.5vw, 3.6rem);
  border: 1px solid var(--dark-line);
}
.why-point {
  position: relative;
  padding: clamp(1.7rem, 2.6vw, 2.4rem) clamp(1.7rem, 2.8vw, 2.6rem) clamp(1.9rem, 2.8vw, 2.6rem);
  border-bottom: 1px solid var(--dark-line);
}
.why-point:last-child { border-bottom: none; }
.why-point h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  margin: 0 0 0.6rem;
}
.why-point p { margin: 0; color: var(--dark-ink-soft); }
.why-num {
  position: absolute;
  top: 0.9rem;
  right: 1.1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 3.6vw, 3.4rem);
  line-height: 1;
  color: var(--dark-accent);
  opacity: 0.16;
  pointer-events: none;
}
/* Narrow screens: the ghost numeral would collide with the heading, so it
   becomes a small inline gold label above it instead */
@media (max-width: 900px) {
  .why-num {
    position: static;
    display: block;
    font-size: 1rem;
    letter-spacing: 0.14em;
    opacity: 0.6;
    margin-bottom: 0.45rem;
  }
}
.why-strip {
  margin: clamp(2.4rem, 4vw, 3.2rem) 0 0;
  padding: 1.05rem 0;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  text-indent: 0.3em; /* rebalances the trailing gap letter-spacing adds */
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--dark-accent);
  border-top: 1px solid var(--dark-line);
  border-bottom: 1px solid var(--dark-line);
}
@media (min-width: 901px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .why-point { border-right: 1px solid var(--dark-line); }
  .why-point:nth-child(2n) { border-right: none; }
  .why-point:nth-child(n+3) { border-bottom: none; }
}

/* --------------------------------------------------------------------------
   Founder
   -------------------------------------------------------------------------- */

.founder-grid { align-items: start; }

.portrait {
  max-width: 26rem;
  margin: 2.5rem 0 0;
}

/* The frame wrapper carries the offset frame and ring motif, so the
   email caption below sits outside them */
.portrait-frame {
  position: relative;
  isolation: isolate;
}

.portrait img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 28px var(--portrait-shadow);
}

/* Editorial reveal — the portrait starts fractionally zoomed inside a
   clipped window and settles out as it enters the viewport. Clipping the
   img (not the figure) keeps the offset frame and ring motif unclipped. */
.js .portrait.reveal img {
  clip-path: inset(5% 4% 5% 4% round var(--radius));
  transform: scale(1.06);
  transition: clip-path 1.1s var(--ease) 0.1s, transform 1.3s var(--ease) 0.1s;
}
.js .portrait.reveal.is-visible img {
  clip-path: inset(0 0 0 0 round var(--radius));
  transform: none;
}

/* Offset gold frame behind the portrait, plus a faint ring motif
   peeking out of the top-right corner */
.portrait-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid var(--accent-border);
  border-radius: var(--radius);
  transform: translate(18px, 18px);
  transition: transform 0.5s var(--ease);
}
.portrait-frame:hover::before { transform: translate(11px, 11px); }

.portrait-frame::after {
  content: "";
  position: absolute;
  top: -46px;
  right: -46px;
  z-index: -1;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 16px, var(--accent-border) 16px 17px);
}

.founder h2 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 2.9rem); }

/* Email line under the founder portrait */
.portrait-contact {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 2rem;
  padding-left: 1.125rem;
  font-size: 0.95rem;
}
.portrait-mail {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--gold);
}
.portrait-contact a {
  color: var(--charcoal);
  text-decoration: none;
  transition: color 0.25s var(--ease);
}
.portrait-contact a:hover { color: var(--gold); }

.founder-belief {
  position: relative;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--charcoal);
  border-top: 1px solid var(--line);
  padding-top: 1.4rem;
  padding-left: 2.4rem;
  margin-top: 1.6rem;
  max-width: 34rem;
}

.founder-belief::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: 0.95rem;
  font-size: 3.2rem;
  line-height: 1;
  color: var(--champagne);
}

/* Support line under the founder belief quote, aligned with the quote text */
.belief-support {
  margin: 0.9rem 0 0;
  padding-left: 2.4rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* Identity / expertise chips */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1.1rem 0 0.6rem;
  padding: 0;
  list-style: none;
}
.chip-row li {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--accent-border);
  border-radius: 999px;
  padding: 0.24rem 0.7rem;
}

/* The three identity chips always share one line on desktop */
@media (min-width: 1100px) {
  .founder-grid .chip-row { flex-wrap: nowrap; }
}

/* Education facts under the founder bio */
.founder-edu {
  margin-top: 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}
.founder-edu p {
  margin: 0 0 0.3rem;
  font-size: 0.95rem;
}

/* School logos beside each education entry */
.edu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.95rem;
}
.edu-list li {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.edu-logo {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 60px;
  padding: 8px 12px;
  background: var(--edu-plate-bg);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.edu-logo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}
.edu-degree {
  margin: 0;
  font-weight: 600;
  font-size: 0.98rem;
}
.edu-school {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

/* Small gold caps label reused above chip rows and fact rows */
.edu-label {
  margin: 0 0 0.55rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Experience spans — auto-rotating carousel of capability blocks */
.expertise-band {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

/* Anchor target for the Expertise nav link — clears the sticky header */
#expertise { scroll-margin-top: calc(var(--header-h) + 1.25rem); }

.xp-carousel {
  margin-top: 1.75rem;
  position: relative;
}

.xp-viewport {
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y; /* horizontal drags drive the carousel, vertical still scrolls the page */
  /* cards fade out as they reach either edge of the rail */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.xp-viewport.is-dragging { cursor: grabbing; }
/* Without JS the strip stays a scrollable snap row instead of a carousel */
html:not(.js) .xp-viewport { overflow-x: auto; scroll-snap-type: x mandatory; cursor: auto; }

.xp-track {
  display: flex;
  gap: 1.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  will-change: transform;
}

/* Narrow playing-card proportions */
.xp-slide {
  flex: 0 0 170px;
  min-height: 12.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--xp-slide-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem 1.1rem 1.5rem;
  text-align: center;
}
html:not(.js) .xp-slide { scroll-snap-align: start; }
.xp-icon {
  display: block;
  width: 40px;
  height: 40px;
  color: var(--gold);
  margin: 0 auto 0.9rem;
}
.xp-slide h3 { font-size: 1.02rem; margin: 0 0 0.45rem; }
.xp-slide p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Hover (desktop): the drift pauses and the manual scroll arrows appear.
   Touch devices drag instead, so the arrows never show there. */
.xp-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--charcoal);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 10px 24px var(--card-shadow);
  transition: opacity 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.xp-arrow--prev { left: -10px; }
.xp-arrow--next { right: -10px; }
.xp-carousel:hover .xp-arrow,
.xp-carousel:focus-within .xp-arrow {
  opacity: 1;
  pointer-events: auto;
}
.xp-arrow:hover { border-color: var(--gold); color: var(--gold); }
@media (hover: none) {
  .xp-arrow { display: none; }
}

/* Icons draw in once the band scrolls into view */
.js .expertise-band .icon-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .expertise-band.is-visible .icon-draw {
  animation: icon-draw 0.9s var(--ease) 0.3s forwards;
}
.js .expertise-band .icon-fade { opacity: 0; transition: opacity 0.7s ease 0.9s; }
.js .expertise-band.is-visible .icon-fade { opacity: 0.55; }

/* --------------------------------------------------------------------------
   Contact (the single dark section) + footer
   -------------------------------------------------------------------------- */

.contact {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(80% 130% at 88% -10%, var(--dark-glow), transparent 58%),
    var(--dark-bg);
  color: var(--dark-ink-soft);
}

/* Faint arcs with a slow pulse travelling across the dark section */
.contact-motif {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 62%;
  color: var(--dark-accent);
  pointer-events: none;
  opacity: 0.85;
}
.contact .container { position: relative; }

.ct-dot {
  opacity: 0.8;
  animation: ct-travel 18s linear infinite;
}
@supports (offset-path: path("M0 0 L10 10")) {
  .ct-dot {
    offset-path: path("M-20 260 C 300 190, 620 300, 900 235 S 1180 165, 1230 180");
  }
}
@keyframes ct-travel {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}
.contact h2 {
  color: var(--dark-ink);
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 2.9rem);
  max-width: 18ch;
}
.contact .eyebrow { color: var(--dark-accent); }
.contact h2 .accent { color: var(--dark-accent); }
.contact .section-lede { max-width: 30rem; }

/* In Noir the dark section sits close to the page base — add a seam. */
html[data-theme="noir"] .contact { border-top: 1px solid var(--dark-line); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .contact { border-top: 1px solid var(--dark-line); }
}

.contact-grid { align-items: start; }

.contact-form p { margin: 0 0 1.1rem; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}

.contact-form label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--dark-ink);
  margin-bottom: 0.4rem;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  font: inherit;
  font-size: 1rem;
  color: var(--dark-ink);
  background: var(--dark-field-bg);
  border: 1px solid var(--dark-field-line);
  border-radius: 10px;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--dark-ink-faint); }
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--dark-focus);
  background: var(--dark-field-bg);
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--dark-focus) 15%, transparent);
}
.contact-form textarea { resize: vertical; min-height: 7rem; }

.hidden-field {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  margin: 0;
}

.form-success {
  background: var(--success-bg);
  border: 1px solid var(--success-line);
  color: var(--dark-ink);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  margin: 0;
}

/* Footer */
.site-footer {
  background: var(--dark-bg);
  color: var(--dark-ink-soft);
  border-top: 1px solid var(--dark-line);
  padding-block: 2.6rem;
}

/* Thin gold seam where the footer meets the dark contact section */
.site-footer::before {
  content: "";
  display: block;
  width: 76px;
  height: 2px;
  margin: -2.6rem auto 2.2rem;
  background: linear-gradient(90deg, var(--gold), var(--champagne));
  border-radius: 999px;
  opacity: 0.75;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem 2.5rem;
}

.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
}
.footer-nav a,
.footer-lang a {
  text-decoration: none;
  font-size: 0.92rem;
  color: var(--dark-ink-soft);
  background-image: linear-gradient(var(--dark-accent), var(--dark-accent));
  background-repeat: no-repeat;
  background-position: left calc(100% - 2px);
  background-size: 0 1px;
  transition: color 0.25s var(--ease), background-size 0.25s var(--ease);
}
.footer-nav a:hover,
.footer-lang a:hover {
  color: var(--dark-accent);
  background-size: 100% 1px;
}

.footer-lang { margin: 0; }

.copyright {
  margin: 0;
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--dark-ink-faint);
}

/* --------------------------------------------------------------------------
   Reveal-on-scroll (only when JS is present)
   -------------------------------------------------------------------------- */

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}
.js .card-grid .reveal:nth-child(2),
.js .card-grid .reveal:nth-child(5) { transition-delay: 0.08s; }
.js .card-grid .reveal:nth-child(3),
.js .card-grid .reveal:nth-child(6) { transition-delay: 0.16s; }
.js .why-grid .reveal:nth-child(2) { transition-delay: 0.08s; }
.js .why-grid .reveal:nth-child(3) { transition-delay: 0.16s; }
.js .why-grid .reveal:nth-child(4) { transition-delay: 0.24s; }

/* Background motifs (opportunity bridge, contact waves) — their arcs draw
   themselves in once the section enters the viewport. The svg carries
   .motif-reveal and each arc .motif-draw-in with pathLength="1"; main.js
   adds .is-visible via the same observer used for .reveal. Without JS the
   arcs are simply fully drawn. */
.js .motif-reveal .motif-draw-in {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.js .motif-reveal.is-visible .motif-draw-in {
  animation: motif-draw 1.9s var(--ease) 0.2s forwards;
}
.js .motif-reveal.is-visible .motif-draw-in:nth-of-type(2) { animation-delay: 0.45s; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: 1fr; max-width: 34rem; }
  .hero-motif { opacity: 0.5; right: -30%; }
  .contact-grid { gap: 3rem; }
  .copyright { margin-left: 0; width: 100%; }
  .opportunity-motif { opacity: 0.6; }
}

@media (max-width: 1119px) {
  .nav-toggle { display: flex; }

  .site-nav {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: var(--bg-base);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px rgba(0, 0, 0, 0.12);
    display: none;
    padding: 1rem clamp(1.25rem, 4.5vw, 2.5rem) 1.6rem;
  }
  .site-nav.open { display: block; }

  .site-nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  .site-nav li { width: 100%; }
  .site-nav a:not(.btn):not(.submenu-item) {
    display: block;
    width: 100%;
    font-size: 1.05rem;
    padding: 0.65rem 0;
    background: none;
  }
  .site-nav .nav-cta-item { margin-top: 0.9rem; }
  .site-nav .nav-menu-item { width: 100%; }
  .nav-submenu-toggle { display: none; }
  .site-nav .nav-submenu {
    display: block;
    position: static;
    min-width: 0;
    margin-top: 0.9rem;
    padding: 0.4rem 0 0.7rem;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
  }

  /* Language — compact segmented control */
  .site-nav .lang-switch {
    flex-direction: row;
    gap: 0.5rem;
    padding-inline: 0.25rem;
  }
  .site-nav .lang-switch .submenu-item {
    flex: 1;
    justify-content: center;
    min-height: 44px;
    padding-block: 0.55rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font-size: 0.95rem;
  }
  .site-nav .lang-switch .is-current {
    background: var(--charcoal);
    border-color: var(--charcoal);
    color: var(--ivory);
  }

  /* Theme — 2×2 selectable cards */
  .site-nav .theme-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
    padding-inline: 0.25rem;
  }
  .site-nav .theme-option {
    min-height: 44px;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: var(--surface);
    color: var(--charcoal);
    font-size: 0.95rem;
  }
  .site-nav .theme-option[aria-pressed="true"] { border-color: var(--gold); }
  .site-nav .theme-swatch { width: 20px; height: 20px; }

  .site-nav .submenu-label { margin-inline: 0.25rem; }
}

@media (max-width: 700px) {
  .form-row { grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .portrait-frame::after { display: none; }
  .opportunity-motif { opacity: 0.45; }
}

@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .portrait-frame::after { display: none; }
  .opportunity-motif { opacity: 0.45; }
}


/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .motif-orbit { animation: none; }
  .water-canvas { display: none; }
  .gold-rule { animation: none; transform: scaleX(1); }
  .hero-in { animation: none; opacity: 1; }
  .hero h1 .accent::after { animation: none; transform: scaleX(1); }
  .hero .eyebrow::before { animation: none; }
  .motif-draw { animation: none; stroke-dashoffset: 0; }
  .motif-float,
  .motif-pulse-ring { animation: none !important; }
  .motif-pulse-ring { opacity: 0; }
  .js .card .icon-draw { animation: none; stroke-dashoffset: 0; }
  .js .card .icon-fade { opacity: 0.55; }
  .js .expertise-band .icon-draw { animation: none; stroke-dashoffset: 0; }
  .js .expertise-band .icon-fade { opacity: 0.55; }
  .ow-dot,
  .ct-dot { animation: none !important; }
  .hero-motif { animation: none; }
  .btn-primary::after,
  .btn-gold::after { display: none; }
  .js .card::after { display: none; }
  .js .motif-reveal .motif-draw-in {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
  .js .motif-reveal.is-visible .motif-draw-in { animation: none; }
  .js .portrait.reveal img {
    clip-path: none;
    transform: none;
    transition: none;
  }
}