/* ==========================================================================
   Marrod — site stylesheet
   The literals here mirror site.config.js `theme` and `motion`. Change both
   together; the config is the documented contract, this file is what paints.
   ========================================================================== */

:root {
  /* ink */
  --ink-950: #05080F;
  --ink-900: #0A0F1A;
  --ink-850: #0F1626;
  --ink-800: #121A28;
  --ink-700: #1E2A3D;
  --ink-500: #4B5768;
  --ink-300: #93A0B4;
  --ink-100: #DCE2EB;
  --paper:   #F4F6FA;
  --white:   #FFFFFF;
  /* accent */
  --accent-600: #1B5FE0;
  --accent-500: #2E75F0;
  --accent-400: #5B95FF;
  --accent-100: #E3ECFD;
  /* text on dark */
  --on-dark-strong: #C3CCD9;
  --on-dark:        #A7B3C4;
  --on-dark-soft:   #8E9BAC;
  --on-dark-faint:  #7C899B;
  /* type */
  --display: 'Manrope', system-ui, sans-serif;
  --text: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* radius */
  --r-input: 8px;
  --r-card: 16px;
  --r-pill: 999px;

  /* motion — mirrors site.config.js `motion` */
  --rv-dur: 900ms;
  --rv-dist: 48px;
  --rv-stagger: 90ms;
  --rv-ease: cubic-bezier(0.165, 0.84, 0.44, 1);   /* outQuart */
  --header-dur: 500ms;
  --header-ease: cubic-bezier(0.55, 0.085, 0.68, 0.53); /* inQuad */
  --marquee-dur: 60s;
  --hover: 300ms;
  --hover-ease: ease;

  --header-h: 72px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink-900);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: clip;            /* `clip`, not `hidden`: hidden would make this a
                                  scroll container and break position:sticky */
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-600); text-decoration: none; }
img, video { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; font-family: var(--display); text-wrap: pretty; }
p { margin: 0; }
input, textarea, button { font-family: var(--text); font-size: 100%; }
input::placeholder, textarea::placeholder { color: var(--ink-300); }

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

/* anchor targets clear the sticky header */
[id] { scroll-margin-top: calc(var(--header-h) + 24px); }

.wrap { max-width: 1200px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--white); color: var(--ink-900);
  padding: 10px 16px; border-radius: var(--r-input); font-weight: 600;
  transition: top 200ms ease;
}
.skip-link:focus { top: 12px; }

/* ==========================================================================
   Motion primitives
   ========================================================================== */

/* Only hide things when JS is running, so a failed script never blanks the page. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--rv-dist));
  transition:
    opacity var(--rv-dur) var(--rv-ease),
    transform var(--rv-dur) var(--rv-ease);
  transition-delay: calc(var(--i, 0) * var(--rv-stagger));
  will-change: opacity, transform;
}
.js [data-reveal].is-revealed { opacity: 1; transform: none; }
.js [data-reveal].is-revealed { will-change: auto; }

/* shorter travel for large blocks that would otherwise jump */
.js [data-reveal="soft"] { --rv-dist: 24px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .marquee__track { animation: none !important; transform: none !important; }
  .site-header { transition: none !important; transform: none !important; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 15, 26, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ink-700);
  transition: transform var(--header-dur) var(--header-ease),
              background-color var(--header-dur) ease;
}
.site-header.is-hidden { transform: translateY(-100%); }
.site-header.is-stuck  { background: rgba(5, 8, 15, 0.94); }

.site-header__inner {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
}

.logo { display: flex; align-items: baseline; gap: 3px; }
.logo__word {
  font-family: var(--display); font-weight: 700; font-size: 21px;
  letter-spacing: -0.04em; color: var(--white);
}
.logo__dot {
  width: 5px; height: 5px; border-radius: var(--r-pill);
  background: var(--accent-500); margin-bottom: 3px;
  transition: transform var(--hover) var(--hover-ease);
}
.logo:hover .logo__dot { transform: scale(1.6); }

.nav { display: flex; gap: 26px; align-items: center; }
.nav__link {
  font-size: 14.5px; color: var(--ink-300); position: relative;
  transition: color var(--hover) var(--hover-ease);
}
.nav__link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: var(--accent-400); transform: scaleX(0); transform-origin: left;
  transition: transform var(--hover) var(--hover-ease);
}
.nav__link:hover { color: var(--white); }
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--white); }

.header__right { display: flex; gap: 18px; align-items: center; }

/* hamburger — only exists below the nav breakpoint */
.nav-toggle {
  display: none; width: 40px; height: 40px; padding: 0;
  background: none; border: 1px solid var(--ink-700); border-radius: 10px;
  cursor: pointer; align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  transition: border-color var(--hover) var(--hover-ease);
}
.nav-toggle:hover { border-color: var(--accent-500); }
.nav-toggle span {
  display: block; width: 16px; height: 1.5px; background: var(--white); border-radius: 2px;
  transition: transform 260ms var(--rv-ease), opacity 200ms ease;
}
.site-header.is-open .nav-toggle span:first-child { transform: translateY(3.25px) rotate(45deg); }
.site-header.is-open .nav-toggle span:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

/* Language — a disclosure, not four competing links.
   Four codes in a row read as navigation and pull attention from the CTA. */
.lang { position: relative; }
.lang__btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 11px;
  background: transparent; border: 1px solid var(--ink-700); border-radius: 9px;
  color: var(--ink-300); cursor: pointer;
  font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  transition: color var(--hover) var(--hover-ease), border-color var(--hover) var(--hover-ease);
}
.lang__btn:hover { color: var(--white); border-color: var(--accent-600); }
.lang__chev { font-size: 8px; line-height: 1; transition: transform 220ms var(--rv-ease); }
.lang.is-open .lang__chev { transform: rotate(180deg); }

.lang__menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 168px; padding: 6px;
  background: var(--ink-950); border: 1px solid var(--ink-700); border-radius: 12px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.5);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 200ms var(--rv-ease), transform 200ms var(--rv-ease), visibility 200ms;
}
.lang.is-open .lang__menu { opacity: 1; visibility: visible; transform: none; }
.lang--up .lang__menu { top: auto; bottom: calc(100% + 8px); transform: translateY(6px); }
.lang--up.is-open .lang__menu { transform: none; }

.lang__item {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 9px 11px; border-radius: 7px;
  font-size: 14px; color: var(--ink-300);
  transition: background-color var(--hover) var(--hover-ease), color var(--hover) var(--hover-ease);
}
.lang__item:hover { background: var(--ink-800); color: var(--white); }
.lang__item.is-active { color: var(--white); }
.lang__item.is-active::after { content: '✓'; color: var(--accent-400); font-size: 12px; }
.lang__code {
  font-family: var(--display); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.1em; color: var(--ink-500);
}
.lang__item.is-active .lang__code { color: var(--accent-400); }

/* buttons ------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill); font-weight: 600; white-space: nowrap;
  border: none; cursor: pointer;
  transition: background-color var(--hover) var(--hover-ease),
              color var(--hover) var(--hover-ease),
              transform var(--hover) var(--hover-ease),
              box-shadow var(--hover) var(--hover-ease),
              border-color var(--hover) var(--hover-ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--accent-600); color: var(--white); }
.btn--primary:hover { background: var(--accent-500); color: var(--white); box-shadow: 0 8px 22px rgba(27, 95, 224, 0.32); }

.btn--ink { background: var(--ink-900); color: var(--white); }
.btn--ink:hover { background: var(--accent-600); color: var(--white); box-shadow: 0 8px 22px rgba(10, 15, 26, 0.22); }

.btn--white { background: var(--white); color: var(--ink-900); }
.btn--white:hover { background: var(--white); color: var(--ink-900); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22); }
.btn--white-blue { background: var(--white); color: var(--accent-600); }
.btn--white-blue:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18); }

.btn--sm { height: 38px; padding: 0 18px; font-size: 14px; }
.btn--md { height: 42px; padding: 0 22px; font-size: 14.5px; }
.btn--lg { height: 52px; padding: 0 30px; font-size: 15.5px; }
.btn--xl { height: 54px; padding: 0 30px; font-size: 15.5px; }
.btn--block { width: 100%; }

/* underlined text link with a sliding arrow */
.link-arrow {
  display: inline-flex; gap: 8px; align-items: center;
  font-size: 16px; font-weight: 600; color: var(--accent-600);
  transition: color var(--hover) var(--hover-ease);
}
.link-arrow span:last-child { transition: transform var(--hover) var(--hover-ease); }
.link-arrow:hover { color: var(--accent-500); }
.link-arrow:hover span:last-child { transform: translateX(5px); }

.link-underline {
  font-size: 15.5px; font-weight: 600; color: var(--white);
  border-bottom: 2px solid rgba(255, 255, 255, 0.35);
  padding-bottom: 4px;
  transition: border-color var(--hover) var(--hover-ease);
}
.link-underline:hover { border-color: var(--white); color: var(--white); }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative; min-height: 780px;
  background: var(--ink-950); color: var(--white);
  overflow: hidden; display: flex;
}
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(96deg, #05080F 0%, rgba(5,8,15,0.93) 38%, rgba(5,8,15,0.62) 68%, rgba(5,8,15,0.45) 100%);
}
.hero__fade {
  position: absolute; inset: auto 0 0 0; height: 220px; pointer-events: none;
  background: linear-gradient(180deg, rgba(5,8,15,0) 0%, rgba(5,8,15,0.85) 100%);
}
.hero__inner {
  position: relative; width: 100%;
  padding-top: 128px; padding-bottom: 56px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 96px;
}
.hero__lead { display: flex; flex-direction: column; gap: 28px; max-width: 760px; }
.hero__title {
  font-size: 78px; line-height: 1.02; letter-spacing: -0.042em; font-weight: 700;
}
.hero__body {
  font-size: 19.5px; line-height: 1.6; color: var(--on-dark-strong); max-width: 640px;
}
.hero__actions { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.hero__note { font-size: 14px; color: var(--on-dark-faint); }
.hero__foot { display: flex; align-items: end; }
.hero__blurb { font-size: 15px; line-height: 1.65; color: var(--on-dark-soft); max-width: 520px; }

.eyebrow {
  font-family: var(--display); font-size: 13px; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 600; color: var(--accent-600);
}
.eyebrow--onDark { color: var(--accent-400); }
.eyebrow--sm { font-size: 11px; letter-spacing: 0.14em; }

/* ==========================================================================
   Platform strip (marquee)
   The logo PNGs are not transparent — each is dark artwork on a solid white
   ground (measured: ~99% opaque pixels, mean luminance ~240). So the tiles
   must be white for the logo to sit flush; on ink they read as white boxes.
   ========================================================================== */

.strip { background: var(--paper); padding: 44px 0 48px; overflow: hidden; }
.strip__label {
  margin: 0 0 28px; text-align: center; font-size: 14.5px; color: var(--ink-500);
}
.marquee {
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex; gap: 16px; width: max-content;
  animation: noqo-marquee var(--marquee-dur) linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes noqo-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee__tile {
  flex: none; width: 190px; height: 76px;
  background: var(--white); border: 1px solid var(--ink-100);
  border-radius: 12px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  transition: border-color var(--hover) var(--hover-ease),
              box-shadow var(--hover) var(--hover-ease);
}
.marquee__tile:hover { border-color: var(--accent-600); box-shadow: 0 6px 18px rgba(10, 15, 26, 0.08); }
.marquee__tile img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  /* the strip should read as one quiet row, not eight competing brand colours */
  filter: grayscale(1); opacity: 0.72;
  transition: filter var(--hover) var(--hover-ease), opacity var(--hover) var(--hover-ease);
}
.marquee__tile:hover img { filter: none; opacity: 1; }

/* ==========================================================================
   Shared section furniture
   ========================================================================== */

.section { }
.section--paper { background: var(--paper); }
.section--white { background: var(--white); }
.section--ink   { background: var(--ink-900); color: var(--white); }
.section--rule  { border-top: 1px solid var(--ink-100); }

.section__inner { padding-top: 104px; padding-bottom: 104px; display: flex; flex-direction: column; gap: 44px; }
.section__inner--tight { padding-top: 96px; padding-bottom: 96px; }
.section__inner--tall  { padding-top: 112px; padding-bottom: 112px; }

.head { display: grid; grid-template-columns: 1fr 0.8fr; gap: 64px; align-items: end; }
.head--wide { grid-template-columns: 1.15fr 0.85fr; gap: 72px; }
.head--narrow { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.head__left { display: flex; flex-direction: column; gap: 14px; }
.head__title { font-size: 58px; line-height: 1.05; letter-spacing: -0.035em; font-weight: 700; }
.head__title--sm { font-size: 54px; letter-spacing: -0.03em; }
.head__body { font-size: 19px; line-height: 1.6; color: var(--ink-500); }
.section--ink .head__body { color: var(--on-dark); }

/* ==========================================================================
   Capabilities — bento
   ========================================================================== */

.bento { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }

.cap {
  border-radius: 18px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--hover) var(--hover-ease),
              box-shadow var(--hover) var(--hover-ease);
}
.cap:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(10, 15, 26, 0.13); }
.cap--2 { grid-column: span 2; }
.cap--3 { grid-column: span 3; }

.cap--white    { background: var(--white); border: 1px solid var(--ink-100); }
.cap--gradient { background: linear-gradient(135deg, #EDF2FF 0%, #F6F4FF 50%, #FFF7F3 100%); border: 1px solid #E3E8F2; }
.cap--ink      { background: var(--ink-900); border: 1px solid var(--ink-700); }
.cap--accent   { background: var(--accent-600); border: 1px solid var(--accent-600); }

.cap__body { padding: 34px 34px 24px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.cap__title { font-size: 31px; line-height: 1.12; letter-spacing: -0.03em; font-weight: 700; }
.cap__text { font-size: 15px; line-height: 1.6; color: var(--ink-500); max-width: 440px; }
.cap--ink .cap__title, .cap--accent .cap__title { color: var(--white); }
.cap--ink .cap__text { color: var(--on-dark); }
.cap--accent .cap__text { color: #D6E3FF; }

.cap__media { height: 262px; overflow: hidden; }
.cap__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms var(--rv-ease);
}
.cap:hover .cap__media img { transform: scale(1.045); }
.cap__media--inset  { margin: auto 0 0 24px; border-radius: 12px 0 0 0; box-shadow: 0 -1px 0 var(--ink-100), -1px 0 0 var(--ink-100); }
.cap__media--flush  { margin-top: auto; }
.cap__media--panel  { margin: auto 34px 0; border-radius: 14px 14px 0 0; background: var(--white); }

/* ==========================================================================
   Services — nine cards, coloured per pillar
   ========================================================================== */

.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.svc {
  border-radius: 12px; padding: 26px;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform var(--hover) var(--hover-ease),
              border-color var(--hover) var(--hover-ease),
              box-shadow var(--hover) var(--hover-ease);
}
.svc:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(10, 15, 26, 0.12); }
.svc__pillar {
  font-family: var(--display); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 600;
}
.svc__title { font-size: 19px; line-height: 1.25; letter-spacing: -0.02em; font-weight: 700; }
.svc__body { font-size: 14.5px; line-height: 1.6; }

.svc--ai { background: var(--ink-900); border: 1px solid var(--ink-700); }
.svc--ai:hover { border-color: var(--accent-500); }
.svc--ai .svc__pillar { color: var(--accent-400); }
.svc--ai .svc__title { color: var(--white); }
.svc--ai .svc__body { color: var(--on-dark); }

.svc--data { background: linear-gradient(135deg, #EDF2FF 0%, #F6F4FF 55%, #FFF7F3 100%); border: 1px solid #E3E8F2; }
.svc--data:hover { border-color: var(--accent-600); }
.svc--data .svc__pillar { color: var(--accent-600); }
.svc--data .svc__title { color: var(--ink-900); }
.svc--data .svc__body { color: var(--ink-500); }

.svc--app { background: var(--accent-600); border: 1px solid var(--accent-600); }
.svc--app:hover { border-color: var(--ink-900); }
.svc--app .svc__pillar { color: #BFD4FF; }
.svc--app .svc__title { color: var(--white); }
.svc--app .svc__body { color: #D6E3FF; }

/* ==========================================================================
   Stats
   ========================================================================== */

.stats__inner { padding-top: 104px; padding-bottom: 104px; display: flex; flex-direction: column; gap: 64px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); }
.stat { display: flex; flex-direction: column; gap: 14px; padding: 0 32px; }
.stat + .stat { border-left: 1px solid var(--ink-700); }
.stat:first-child { padding-left: 0; }
.stat__value {
  font-family: var(--display); font-size: 76px; line-height: 0.95;
  letter-spacing: -0.05em; font-weight: 700; color: var(--white);
}
.stat__label { font-size: 15.5px; line-height: 1.55; color: var(--on-dark); }

/* ==========================================================================
   Industries
   ========================================================================== */

.ind__inner {
  padding-top: 96px; padding-bottom: 96px;
  display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 72px; align-items: start;
}
.ind__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.ind__item {
  padding: 24px 0; border-top: 1px solid var(--ink-700);
  display: flex; flex-direction: column; gap: 7px;
  transition: border-color var(--hover) var(--hover-ease);
}
.ind__item:hover { border-color: var(--accent-500); }
.ind__title { font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: var(--white); }
.ind__body { font-size: 15px; line-height: 1.6; color: var(--on-dark); }

/* ==========================================================================
   Approach — stacking sticky cards
   ========================================================================== */

.approach__inner { padding-top: 104px; padding-bottom: 120px; display: flex; flex-direction: column; gap: 52px; }
.approach__intro { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.steps { display: flex; flex-direction: column; gap: 26px; }

.step {
  position: sticky;
  background: var(--white); border: 1px solid var(--ink-100); border-radius: 22px;
  box-shadow: 0 -2px 0 rgba(10,15,26,0.03), 0 18px 44px rgba(10,15,26,0.07);
  overflow: hidden;
}
.step:nth-child(1) { top: 104px; }
.step:nth-child(2) { top: 130px; }
.step:nth-child(3) { top: 156px; }
.step:nth-child(4) { top: 182px; }

.step__grid {
  display: grid; grid-template-columns: minmax(300px, 1fr) minmax(200px, 250px);
  gap: 44px; padding: 42px 44px 44px;
}
.step__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.step__meta { display: flex; align-items: baseline; gap: 18px; }
.step__n {
  font-family: var(--display); font-size: 58px; line-height: 0.8;
  letter-spacing: -0.06em; font-weight: 700; color: #C9D6EE;
}
.step__duration {
  font-family: var(--display); font-size: 11.5px; letter-spacing: 0.13em;
  text-transform: uppercase; font-weight: 600; color: var(--accent-600);
}
.step__title { font-size: 40px; line-height: 1.05; letter-spacing: -0.035em; font-weight: 700; }
.step__body { font-size: 18px; line-height: 1.62; color: var(--ink-500); }
.step__side {
  display: flex; flex-direction: column; gap: 12px;
  padding-left: 32px; border-left: 1px solid var(--ink-100); min-width: 0;
}
.step__side-label {
  font-family: var(--display); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 600; color: var(--ink-300);
}

.bullet { display: flex; gap: 10px; align-items: baseline; }
.bullet__dot { width: 5px; height: 5px; border-radius: var(--r-pill); background: var(--accent-600); flex: none; }
.bullet__text { font-size: 15.5px; line-height: 1.5; color: var(--ink-900); }

/* ==========================================================================
   Engagement
   ========================================================================== */

.eng-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.eng {
  background: var(--white); border: 1px solid var(--ink-100); border-radius: 20px;
  padding: 40px 36px 36px; display: flex; flex-direction: column; gap: 16px; position: relative;
  transition: transform var(--hover) var(--hover-ease), box-shadow var(--hover) var(--hover-ease);
}
.eng:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(10, 15, 26, 0.12); }
.eng--featured { border: 2px solid var(--accent-600); }
.eng__badge {
  position: absolute; top: -12px; left: 30px;
  font-family: var(--display); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 700; color: var(--white);
  background: var(--accent-600); padding: 5px 11px; border-radius: var(--r-pill);
}
.eng__title { font-size: 30px; line-height: 1.14; letter-spacing: 0; font-weight: 700; overflow-wrap: anywhere; }
.eng__sub {
  font-family: var(--display); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 600; color: var(--ink-500);
}
.eng__body { font-size: 16.5px; line-height: 1.6; color: var(--ink-500); }
.eng__points { display: flex; flex-direction: column; gap: 9px; padding-top: 6px; }
.eng__points .bullet__text { color: var(--ink-500); }
.eng .btn { margin-top: auto; }

/* ==========================================================================
   Track record
   ========================================================================== */

.track-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.track {
  background: var(--white); border: 1px solid var(--ink-100); border-radius: var(--r-card);
  padding: 30px; display: flex; flex-direction: column; gap: 14px; min-height: 300px;
  transition: transform var(--hover) var(--hover-ease), box-shadow var(--hover) var(--hover-ease);
}
.track:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(10, 15, 26, 0.1); }
.track__context {
  font-family: var(--display); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 600; color: var(--ink-300);
}
.track__body { font-size: 15.5px; line-height: 1.62; color: var(--ink-500); }
.track__foot {
  margin-top: auto; padding-top: 22px; display: flex; align-items: center; gap: 10px;
  border-top: 1px dashed #C9D2E0;
}
.track__foot--solid { border-top: 1px solid var(--ink-100); }
.track__marker { width: 7px; height: 7px; border-radius: var(--r-pill); border: 1px solid #C9D2E0; flex: none; }
.track__marker--on { background: var(--accent-600); border-color: var(--accent-600); }
.track__result {
  font-family: var(--display); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: #7C8798;
}
.track__result--on { color: var(--accent-600); font-weight: 600; }
.track__note {
  display: grid; grid-template-columns: 190px 1fr; gap: 32px; align-items: start;
  padding-top: 30px; border-top: 1px solid var(--ink-100);
}
.track__note p { font-size: 18px; line-height: 1.62; color: var(--ink-900); max-width: 820px; }

/* ==========================================================================
   Founders
   ========================================================================== */

.founders { display: flex; flex-direction: column; gap: 24px; }
.founder {
  border: 1px solid var(--ink-100); border-radius: 18px; overflow: hidden;
  display: grid; grid-template-columns: 300px 1fr; align-items: start;
  transition: box-shadow var(--hover) var(--hover-ease);
}
.founder:hover { box-shadow: 0 18px 44px rgba(10, 15, 26, 0.1); }
.founder__photo { position: relative; width: 300px; aspect-ratio: 4 / 5; align-self: start; min-width: 0; overflow: hidden; }
.founder__photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms var(--rv-ease);
}
.founder:hover .founder__photo img { transform: scale(1.04); }
.founder__text { padding: 38px 40px; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.founder__name { font-size: 26px; line-height: 1.18; letter-spacing: -0.03em; font-weight: 600; }
.founder__role { font-size: 15px; color: var(--accent-600); font-weight: 500; }
.founder__city {
  font-family: var(--display); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-300);
}
.founder__bio { margin-top: 14px; font-size: 16.5px; line-height: 1.66; color: var(--ink-500); max-width: 740px; }
.founder__link {
  margin-top: 22px; font-size: 14.5px; font-weight: 500; color: var(--ink-900);
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  transition: color var(--hover) var(--hover-ease);
}
.founder__link:hover { color: var(--accent-600); }
.founder__link span:last-child { color: var(--ink-300); transition: transform var(--hover) var(--hover-ease); }
.founder__link:hover span:last-child { transform: translate(3px, -3px); }

/* ==========================================================================
   Founders teaser — the strip that replaced the founders section on Home
   ========================================================================== */

.teaser {
  display: grid; grid-template-columns: 1fr auto;
  gap: 40px; align-items: center;
  /* one row of content does not need a full section's padding */
  padding-top: 54px; padding-bottom: 54px;
}
.teaser__people { display: flex; gap: 40px; flex-wrap: wrap; }
.teaser__text { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; text-align: right; }

@media (max-width: 900px) {
  .teaser { grid-template-columns: 1fr; gap: 28px; }
  .teaser__people { gap: 24px; }
  .teaser__text { align-items: flex-start; text-align: left; }
}
@media (max-width: 620px) {
  .teaser__people { flex-direction: column; gap: 18px; }
}

/* ==========================================================================
   Reach + principles
   ========================================================================== */

.reach__inner { padding-top: 92px; padding-bottom: 92px; display: flex; flex-direction: column; gap: 46px; }
.reach__right { display: flex; flex-direction: column; gap: 18px; }
.reach__cityline {
  font-family: var(--display); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 600; color: var(--ink-300);
}
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.trio__item {
  display: flex; flex-direction: column; gap: 7px;
  padding-top: 22px; border-top: 1px solid var(--ink-100);
  transition: border-color var(--hover) var(--hover-ease);
}
.trio__item:hover { border-color: var(--accent-600); }
.trio__title { font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; }
.trio__body { font-size: 14.5px; line-height: 1.62; color: var(--ink-500); }

.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 40px; }
.principle {
  padding: 26px 0; border-top: 1px solid var(--ink-100);
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color var(--hover) var(--hover-ease);
}
.principle:hover { border-color: var(--accent-600); }
.principle__head { display: flex; gap: 10px; align-items: baseline; }
.principle__dot { width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--accent-600); flex: none; }
.principle__title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.principle__body { margin-left: 16px; font-size: 15px; line-height: 1.62; color: var(--ink-500); }

/* ==========================================================================
   Why Marrod — contrast bento
   A table made the reader parse three columns to find one answer. Each claim
   is now its own card that states our side loud and the alternative quiet,
   so the comparison is read rather than decoded.
   ========================================================================== */

/* The reference paints this glow with a blurred DOM layer. A radial gradient on
   the section itself is smooth by construction — no blur pass, no extra layer,
   and crucially no hard seam where `overflow: hidden` would clip the blur. It
   fades to flat ink at the bottom, so this runs into the FAQ as one dark block. */
.vs-section {
  position: relative;
  color: var(--white);
  background:
    /* Settles the last strip to exactly --ink-900 so the join with whatever dark
       block follows is provably seamless. Measured from the BOTTOM, not in
       percentages: this section is shorter on about.html than on the home page,
       and a percentage window compresses with it and leaves a visible band. */
    linear-gradient(180deg, rgba(10, 15, 26, 0) calc(100% - 340px), var(--ink-900) calc(100% - 70px)),
    radial-gradient(1150px 640px at 18% 6%,  rgba(46, 117, 240, 0.30), transparent 60%),
    radial-gradient(820px 520px at 92% 34%, rgba(91, 149, 255, 0.16), transparent 62%),
    var(--ink-900);
}
.vs-section__inner { position: relative; z-index: 1; }

.vs-head__right { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.vs-section .head__body { color: var(--on-dark); }

.vs-legend { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.vs-legend__item {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--display); font-size: 11.5px; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 600; color: var(--ink-300);
}
.vs-legend__item--us { color: var(--white); }

.vs-dot {
  width: 7px; height: 7px; border-radius: var(--r-pill); flex: none;
  background: var(--accent-400); box-shadow: 0 0 0 3px rgba(91, 149, 255, 0.18);
}
.vs-cross { font-size: 13px; line-height: 1; color: var(--ink-500); flex: none; width: 7px; text-align: center; }

.vs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

.vs {
  background: rgba(15, 22, 38, 0.72);
  border: 1px solid var(--ink-700);
  border-radius: 14px;
  padding: 28px 28px 24px;
  display: flex; flex-direction: column; gap: 14px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform var(--hover) var(--hover-ease),
              border-color var(--hover) var(--hover-ease),
              background-color var(--hover) var(--hover-ease);
}
.vs:hover { transform: translateY(-4px); border-color: var(--accent-600); background: rgba(15, 22, 38, 0.92); }

.vs__label {
  font-family: var(--display); font-size: 11px; letter-spacing: 0.15em;
  text-transform: uppercase; font-weight: 600; color: var(--ink-300);
}
.vs__us {
  display: flex; gap: 11px; align-items: baseline;
  font-family: var(--display); font-size: 22px; line-height: 1.24;
  letter-spacing: -0.02em; font-weight: 600; color: var(--white);
}
.vs__them {
  display: flex; gap: 11px; align-items: baseline;
  font-size: 14.5px; line-height: 1.5; color: var(--ink-300);
  padding-top: 13px; border-top: 1px solid var(--ink-800);
  margin-top: auto;
}

.vs--cta {
  background: var(--accent-600); border-color: var(--accent-600);
  justify-content: space-between; align-items: flex-start; gap: 20px;
}
.vs--cta:hover { background: var(--accent-500); border-color: var(--accent-500); }
.vs__ctaTitle {
  font-family: var(--display); font-size: 22px; line-height: 1.24;
  letter-spacing: -0.02em; font-weight: 600; color: var(--white);
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq__inner {
  padding-top: 112px; padding-bottom: 112px;
  display: grid; grid-template-columns: 0.75fr 1.25fr; gap: 72px; align-items: start;
}
.faq__head { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 104px; }
.faq__title { font-size: 50px; line-height: 1.06; letter-spacing: -0.035em; font-weight: 600; }
.faq__list { display: flex; flex-direction: column; }

.faq__item { border-top: 1px solid var(--ink-700); }
.faq__item:last-child { border-bottom: 1px solid var(--ink-700); }
.faq__q {
  width: 100%; background: none; border: none; cursor: pointer; text-align: left;
  padding: 26px 0; display: flex; justify-content: space-between; gap: 28px; align-items: flex-start;
  color: inherit;
  font-size: 22px; font-weight: 500; line-height: 1.35; letter-spacing: -0.015em;
  font-family: var(--text);
  transition: color var(--hover) var(--hover-ease);
}
.faq__q:hover { color: var(--accent-400); }
.faq__sign {
  font-family: var(--display); font-size: 20px; color: var(--accent-400);
  line-height: 1.3; flex: none;
  transition: transform var(--hover) var(--hover-ease);
}
.faq__item.is-open .faq__sign { transform: rotate(180deg); }
/* 0fr -> 1fr animates a height the browser can actually interpolate */
.faq__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 400ms var(--rv-ease);
}
.faq__item.is-open .faq__panel { grid-template-rows: 1fr; }
.faq__panel > div { overflow: hidden; }
.faq__a {
  font-size: 16px; line-height: 1.68; color: var(--on-dark); max-width: 720px;
  padding-bottom: 26px;
  opacity: 0; transition: opacity 300ms ease 60ms;
}
.faq__item.is-open .faq__a { opacity: 1; }

/* ==========================================================================
   Contact
   ========================================================================== */

.contact__inner {
  padding-top: 96px; padding-bottom: 96px;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: stretch;
}
.contact__left { display: flex; flex-direction: column; gap: 14px; }
.contact__title { font-size: 46px; line-height: 1.06; letter-spacing: -0.035em; font-weight: 700; }
.contact__body { margin-bottom: 12px; font-size: 17.5px; line-height: 1.6; color: var(--ink-500); max-width: 480px; }

/* Fields are filled rather than outlined. On a --paper section a white box with
   a grey border reads as a floating outline; a tinted fill with no border reads
   as a field. */
.form { display: flex; flex-direction: column; gap: 18px; padding-top: 30px; border-top: 1px solid var(--ink-100); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 14px; font-weight: 500; color: var(--ink-900); }
.field input, .field textarea {
  border: 1px solid transparent; border-radius: 12px;
  background: #EAEEF5; font-size: 16px; color: var(--ink-900);
  outline: none; width: 100%;
  transition: background-color var(--hover) var(--hover-ease),
              border-color var(--hover) var(--hover-ease),
              box-shadow var(--hover) var(--hover-ease);
}
.field input { height: 54px; padding: 0 16px; }
.field textarea { padding: 15px 16px; resize: vertical; line-height: 1.55; }
.field input:hover, .field textarea:hover { background: #E3E8F1; }
.field input:focus, .field textarea:focus {
  background: var(--white); border-color: var(--accent-600);
  box-shadow: 0 0 0 3px rgba(27, 95, 224, 0.14);
}
.form__submit { height: 54px; border-radius: 12px; font-size: 15.5px; margin-top: 4px; }
.form__privacy {
  font-size: 13.5px; line-height: 1.55; color: var(--ink-500);
  transition: color var(--hover) var(--hover-ease);
}
.form__privacy:hover { color: var(--accent-600); }

/* The direct-contact side is one card, not a loose stack. It leads with the two
   people you actually reach, which is the section's whole argument. */
.contact__right { display: flex; flex-direction: column; }
.contact-card {
  background: var(--white); border: 1px solid var(--ink-100); border-radius: 18px;
  padding: 32px; display: flex; flex-direction: column; gap: 26px;
  /* fills the form column's height. Content stays top-aligned and only the
     address is pushed down: one deliberate gap reads as air, two read as a
     broken distribution. */
  flex: 1;
}
.contact-card__foot { margin-top: auto; display: flex; flex-direction: column; gap: 18px; }
.contact-card__note {
  display: flex; gap: 10px; align-items: baseline;
  font-size: 14.5px; line-height: 1.55; color: var(--ink-500);
}
.contact-card__note::before {
  content: ''; width: 6px; height: 6px; border-radius: var(--r-pill);
  background: #22B07D; flex: none; transform: translateY(-1px);
}
.contact-card__label {
  font-family: var(--display); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 600; color: var(--ink-300);
}
.contact-people { display: flex; flex-direction: column; gap: 16px; }
.person { display: flex; align-items: center; gap: 14px; }
.person img {
  width: 52px; height: 52px; border-radius: var(--r-pill);
  object-fit: cover; flex: none;
}
.person__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.person__name { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-900); }
.person__meta { font-size: 13.5px; color: var(--ink-500); }

.direct { display: flex; flex-direction: column; }
.direct__row {
  padding: 14px 0; border-top: 1px solid var(--ink-100);
  font-size: 15.5px; font-weight: 500; color: var(--ink-900);
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
  transition: color var(--hover) var(--hover-ease);
}
.direct__row:hover { color: var(--accent-600); }
.direct__row span:last-child { color: var(--ink-300); transition: transform var(--hover) var(--hover-ease); }
.direct__row:hover span:last-child { transform: translateX(4px); color: var(--accent-600); }
.direct__address {
  padding-top: 18px; border-top: 1px solid var(--ink-100);
  display: flex; flex-direction: column; gap: 4px;
}
.direct__address strong { font-size: 15.5px; font-weight: 500; color: var(--ink-900); }

/* ==========================================================================
   Final CTA
   ========================================================================== */

.cta { position: relative; overflow: hidden; background: var(--ink-900); color: var(--white); }
.cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; pointer-events: none; }
.cta__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, #0A0F1A 0%, rgba(10,15,26,0.9) 45%, rgba(10,15,26,0.55) 100%);
}
.cta__inner {
  position: relative; padding-top: 104px; padding-bottom: 104px;
  display: flex; flex-direction: column; gap: 24px; align-items: flex-start;
}
.cta__title { font-size: 52px; line-height: 1.06; letter-spacing: -0.04em; font-weight: 600; max-width: 760px; }
.cta__body { font-size: 18px; color: var(--on-dark); }
.cta .btn { margin-top: 8px; }

/* ==========================================================================
   Footer
   ========================================================================== */

.footer { background: var(--ink-950); color: var(--white); border-top: 1px solid var(--ink-700); }
.footer__inner { padding-top: 56px; padding-bottom: 30px; display: flex; flex-direction: column; gap: 40px; }
.footer__cols { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 40px; }
.footer__brand { display: flex; flex-direction: column; gap: 14px; }
.footer__blurb { font-size: 13.5px; line-height: 1.6; color: var(--ink-300); max-width: 280px; }
.footer__meta { display: flex; flex-direction: column; gap: 3px; }
.footer__meta span, .footer__meta a { font-size: 13.5px; line-height: 1.55; color: var(--ink-300); }
.footer__col { display: flex; flex-direction: column; gap: 12px; }
.footer__col-title {
  font-family: var(--display); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-500);
}
.footer__links { display: flex; flex-direction: column; gap: 9px; }
.footer a { color: var(--ink-300); transition: color var(--hover) var(--hover-ease); }
.footer a:hover { color: var(--white); }
.footer__links a { font-size: 13.5px; }
.footer__links a.is-active { color: var(--white); }
.footer__bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding-top: 22px; border-top: 1px solid var(--ink-800); flex-wrap: wrap;
}
.footer__bottom > span { font-family: var(--display); font-size: 11.5px; color: var(--ink-500); }
.footer__bottom .footer__cities { margin-left: auto; margin-right: 4px; }

/* ==========================================================================
   Privacy page
   ========================================================================== */

.legal-hero { background: var(--ink-900); color: var(--white); }
.legal-hero__inner { padding-top: 104px; padding-bottom: 88px; display: flex; flex-direction: column; gap: 22px; }
.legal-hero__title { font-size: 66px; line-height: 1.02; letter-spacing: -0.045em; font-weight: 700; max-width: 900px; }
.legal-hero__body { font-size: 20px; line-height: 1.6; color: var(--on-dark); max-width: 720px; }
.legal-hero__updated {
  font-family: var(--display); font-size: 11.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-500); padding-top: 12px;
}
.legal__inner { padding-top: 96px; padding-bottom: 96px; display: flex; flex-direction: column; }
.legal__row {
  display: grid; grid-template-columns: 300px 1fr; gap: 56px;
  padding: 34px 0; border-top: 1px solid var(--ink-100); align-items: start;
}
.legal__row:last-of-type { border-bottom: 1px solid var(--ink-100); }
.legal__row--accent { background: var(--paper); }
.legal__row--accent h2 { padding-left: 26px; }
.legal__row--accent p { color: var(--ink-900); padding-right: 26px; }
.legal__row h2 { font-size: 23px; line-height: 1.2; letter-spacing: -0.03em; font-weight: 600; }
.legal__row p { font-size: 18px; line-height: 1.68; color: var(--ink-500); max-width: 720px; }
.legal__pending {
  display: grid; grid-template-columns: 300px 1fr; gap: 56px;
  padding-top: 40px; align-items: start; border-top: none !important;
}
.legal__pending-head { display: flex; flex-direction: column; gap: 10px; }
.legal__pending-flag { display: flex; align-items: center; gap: 9px; }
.legal__pending-flag span:last-child {
  font-family: var(--display); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: #8A97A8;
}
.legal-cta { background: var(--ink-900); color: var(--white); }
.legal-cta__inner { padding-top: 88px; padding-bottom: 88px; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.legal-cta__title { font-size: 44px; line-height: 1.06; letter-spacing: -0.04em; font-weight: 600; }
.legal-cta__actions { display: flex; align-items: center; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
.btn--outline { border: 1px solid var(--ink-700); color: var(--white); font-weight: 500; background: transparent; }
.btn--outline:hover { border-color: var(--accent-400); color: var(--white); }
.legal-cta__meta { display: flex; flex-direction: column; gap: 5px; padding-top: 34px; }
.legal-cta__meta span, .legal-cta__meta a { font-size: 14.5px; line-height: 1.6; color: var(--ink-300); }

/* ==========================================================================
   Responsive
   The prototype was drawn at 1440. Below 1180 the fixed grids collapse in the
   order that keeps the reading line intact: side columns first, then halves.
   ========================================================================== */

@media (max-width: 1180px) {
  .wrap { padding-left: 32px; padding-right: 32px; }
  .hero__title { font-size: 62px; }
  .head__title, .head__title--sm { font-size: 46px; }
  .stat__value { font-size: 62px; }
  .faq__title { font-size: 42px; }
  .cta__title { font-size: 44px; }
  .legal-hero__title { font-size: 54px; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .cap--2, .cap--3 { grid-column: span 1; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .vs-grid { grid-template-columns: repeat(2, 1fr); }
  .ind__inner { grid-template-columns: 1fr; gap: 44px; }
  .faq__inner { grid-template-columns: 1fr; gap: 44px; }
  .faq__head { position: static; }
  .step__grid { grid-template-columns: 1fr; gap: 28px; }
  .step__side { padding-left: 0; padding-top: 24px; border-left: none; border-top: 1px solid var(--ink-100); }
  .eng-grid { grid-template-columns: minmax(0, 1fr); }
  .track-grid { grid-template-columns: 1fr; }
  .track { min-height: 0; }
  .contact__inner { grid-template-columns: 1fr; gap: 48px; }
  .legal__row, .legal__pending { grid-template-columns: 1fr; gap: 16px; }
  .legal__row--accent h2, .legal__row--accent p { padding-left: 0; padding-right: 0; }
}

@media (max-width: 900px) {
  /* the nav becomes a disclosure panel under the bar rather than disappearing */
  .nav-toggle { display: flex; }
  .nav {
    position: absolute; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 32px 20px;
    background: var(--ink-950);   /* solid: a menu over video has to stay legible */
    border-bottom: 1px solid var(--ink-700);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity 240ms var(--rv-ease), transform 240ms var(--rv-ease), visibility 240ms;
  }
  .site-header.is-open .nav { opacity: 1; visibility: visible; transform: none; }
  .nav__link {
    padding: 15px 0; font-size: 17px; color: var(--white);
    border-bottom: 1px solid var(--ink-800);
  }
  .nav__link::after { display: none; }
  /* the button sits at the left of a cramped control cluster, so a right-anchored
     menu would hang off the viewport — anchor it left instead */
  .header__right .lang__menu { right: auto; left: 0; min-width: 156px; }
  .header__right .lang__btn { padding: 0 9px; }
  .site-header__inner { gap: 12px; }

  .hero { min-height: 0; }
  .hero__inner { padding-top: 104px; padding-bottom: 48px; gap: 56px; }
  .hero__title { font-size: 46px; }
  .hero__body { font-size: 17.5px; }
  .hero__foot { display: block; }
  .section__inner, .section__inner--tight, .section__inner--tall,
  .stats__inner, .approach__inner, .reach__inner { padding-top: 72px; padding-bottom: 72px; }
  .ind__inner, .contact__inner, .faq__inner, .legal__inner { padding-top: 72px; padding-bottom: 72px; }
  .head, .head--wide { grid-template-columns: 1fr; gap: 20px; align-items: start; }
  .head__title, .head__title--sm { font-size: 36px; }
  .head__body { font-size: 17px; }
  .stats { grid-template-columns: 1fr 1fr; gap: 32px 0; }
  .stat { padding: 0 24px; }
  .stat:nth-child(odd) { padding-left: 0; border-left: none; }
  .stat__value { font-size: 54px; }
  .ind__list { grid-template-columns: 1fr; }
  .trio, .principles { grid-template-columns: 1fr; gap: 0; }
  .founder { grid-template-columns: 1fr; }
  .founder__photo { width: 100%; aspect-ratio: 16 / 10; }
  .founder__text { padding: 28px 24px; }
  .track__note { grid-template-columns: 1fr; gap: 12px; }
  .step { position: static; }           /* stacking needs height the phone lacks */
  .step__grid { padding: 30px 26px 32px; }
  .step__title { font-size: 30px; }
  .step__body { font-size: 16.5px; }
  .step__n { font-size: 44px; }
  .vs-grid { grid-template-columns: 1fr; }
  .vs__us { font-size: 20px; }
  .faq__q { font-size: 19px; }
  .contact__title { font-size: 34px; }
  .cta__title { font-size: 34px; }
  .cta__inner { padding-top: 72px; padding-bottom: 72px; }
  .footer__cols { grid-template-columns: 1fr 1fr; gap: 32px; }
  .legal-hero__inner { padding-top: 80px; padding-bottom: 64px; }
  .legal-hero__title { font-size: 38px; }
  .legal-hero__body { font-size: 17.5px; }
  .legal__row p { font-size: 16.5px; }
  .legal-cta__title { font-size: 32px; }
}

@media (max-width: 620px) {
  .wrap { padding-left: 20px; padding-right: 20px; }
  .header__right { flex: 1; min-width: 0; gap: 8px; justify-content: flex-end; }
  .header__right > .btn {
    flex: 1; min-width: 0; max-width: 160px;
    height: auto; min-height: 40px; padding: 8px;
    white-space: normal; text-align: center; line-height: 1.2;
  }
  .header__right > .lang, .header__right > .nav-toggle { flex-shrink: 0; }
  .hero__title { font-size: 36px; }
  .hero__actions { gap: 18px; }
  .hero__actions .btn { width: 100%; }
  .bento, .svc-grid { grid-template-columns: 1fr; }
  .cap__body { padding: 26px 24px 20px; }
  .cap__title { font-size: 26px; }
  .stats { grid-template-columns: 1fr; }
  .stat { padding: 0; border-left: none; }
  .stat + .stat { padding-top: 26px; border-top: 1px solid var(--ink-700); }
  .form__row { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: 1fr; }
  .marquee__tile { width: 150px; height: 66px; }
}