@font-face {
  font-family: Archivo;
  src: url("/assets/archivo-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
/* Contact form honeypot, kept off screen */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status:empty { display: none; }

body { margin: 0; background: #ffffff; }
/* Augmora · augmora.org
 * Tokens: design/augmora-tokens.json. Button metrics: design/escalate-style-kit/escalate.css,
 * in Augmora's ink and silver. Light only; the tour is the one dark stage. */

:root, .aug {
  color-scheme: light;
  --bg: #f3f4f6;
  --surface: #ffffff;
  --text: #181b21;
  --muted: #5c6470;
  --border: #dde1e7;
  --ink: #212630;
  --ink-hover: #171c24;
  --on-ink: #ffffff;
  --soft: #e9edf3;
  --soft-text: #394352;
  --band: #2a3039;
  --alt: #f6f7f9;
  --tour-bg: #0b0d11;
  --tour-text: #f5f7fa;
  --tour-muted: #aeb8c6;
  --tour-body: #c9d1dc;
  --pearl: #e7ecf4;
  --sh-card: 0 10px 36px rgba(24, 27, 33, 0.055);
  --sh-kit: 0 2px 3px rgba(23, 58, 71, 0.063);
  --font-brand: Archivo, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-ui: -apple-system, "SF Pro Text", "SF Pro Display", system-ui, "Helvetica Neue", Arial, sans-serif;
  --gutter: 24px;
  --page: 88vw;   /* one content width for every section; grows with the window */
  --topbar-h: max(81px, 4.2vw);
  --page-left: max(var(--gutter), calc((100% - var(--page)) / 2 + var(--gutter)));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.aug {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
:where(.aug) img { display: block; max-width: 100%; }
:where(.aug) a { color: inherit; text-decoration: none; }
:where(.aug) a:hover { opacity: 0.78; }
:where(.aug) a:focus-visible, :where(.aug) button:focus-visible, :where(.aug) input:focus-visible, :where(.aug) textarea:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
:where(.aug) :is(h1, h2, h3, p) { margin: 0; }
[hidden] { display: none !important; }

.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 200;
  padding: 14px 20px; border-radius: 4px;
  background: var(--ink); color: var(--on-ink);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.wrap {
  max-width: var(--page); margin: 0 auto;
  padding-left: var(--gutter); padding-right: var(--gutter);
  display: flex; flex-direction: column; gap: 32px;
}

/* ---------- Lockup ---------- */

.lockup { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; justify-content: center; min-height: 44px; flex: none; }
/* The brushed-graphite AUGMORA wordmark is one image. The brand line under it is set to the same width
   (a 9px line at 0.27em measures 232px), and the two grow with the window in step. */
.lockup-mark { display: block; width: max(232px, 16.1vw); height: auto; max-width: 100%; }
.lockup-line {
  font-family: var(--font-brand); font-size: max(9px, 0.625vw); line-height: 1.3; font-weight: 600;
  letter-spacing: 0.27em; text-transform: uppercase; color: var(--muted);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 26px;
  min-width: min(236px, 100%); min-height: 52px; max-width: 100%;
  padding: 0 23px; margin: 0; appearance: none;
  font-family: var(--font-brand); font-size: 13px; font-weight: 500; line-height: 1.4;
  letter-spacing: 0.065em; text-transform: uppercase; text-align: left;
  border-radius: 4px; box-shadow: var(--sh-kit); cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.btn:hover { opacity: 1; }
.btn:active { transform: scale(0.98); }
.btn svg { flex: none; }
.btn-primary { background: var(--ink); color: var(--on-ink); border: 1px solid var(--ink); }
.btn-primary:hover { background: var(--ink-hover); border-color: var(--ink-hover); }
.btn-secondary { background: var(--soft); color: var(--text); border: 1px solid rgba(24, 27, 33, 0.15); }
.btn-secondary:hover { background: var(--border); }
.btn-pearl { background: var(--pearl); color: var(--ink-hover); border: 1px solid var(--pearl); }
.btn-line { background: transparent; color: var(--tour-text); border: 1px solid rgba(231, 236, 244, 0.45); box-shadow: none; }
.btn-pearl:focus-visible, .btn-line:focus-visible { outline-color: var(--pearl); }
.btn-compact { min-width: min(188px, 100%); min-height: 44px; padding: 0 18px; font-size: 12px; justify-content: center; box-shadow: none; }
.btn-block { width: 100%; }
@media (max-width: 760px) { .btn { min-width: 0; } }

/* ---------- Top bar ---------- */

/* Pinned to the top of the window so the navigation stays reachable while scrolling. */
.topbar { background: var(--soft); color: var(--text); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 30; }
main [id] { scroll-margin-top: var(--topbar-h); }
/* The bar spans the whole window; its gutter and spacing grow with the window width. */
.topbar-inner { display: flex; align-items: center; gap: max(48px, 3vw); padding: max(10px, 0.6vw) max(var(--gutter), 2vw); }
/* Nav links are pills: a soft fill on hover and focus, the section under the bar marked with a pearl */
.nav { display: flex; gap: max(2px, 0.3vw); }
.nav a { position: relative; display: inline-flex; align-items: center; height: 44px; padding: 0 max(13px, 0.95vw); border-radius: 9999px; font-family: var(--font-brand); font-size: max(14px, 1.02vw); line-height: 1; font-weight: 500; letter-spacing: 0.01em; color: var(--muted); white-space: nowrap; transition: background-color 180ms ease, color 180ms ease; }
.nav a:hover, .nav a:focus-visible { background: rgba(24, 27, 33, 0.07); color: var(--text); opacity: 1; }
.nav a:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.nav a.on { color: var(--text); }
.nav a.on::after { content: ''; position: absolute; left: 50%; bottom: 3px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: radial-gradient(circle at 36% 32%, #ffffff 0, #d9dde3 22%, #b4b4b4 50%, #6a6a6a 82%, #4a4a4a 100%); box-shadow: 0 0 0 1px rgba(24, 27, 33, 0.1); }
.topbar-tools { display: flex; align-items: center; gap: max(20px, 1.4vw); flex: none; margin-left: auto; }
.topbar-tools .tool > svg { width: auto; height: max(22px, 1.45vw); }
.tool {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-width: 44px; min-height: 44px; font-size: max(15px, 1vw); line-height: 1.3; font-weight: 500;
}
.menu-btn { background: none; border: 0; padding: 0; color: var(--text); cursor: pointer; font: inherit; display: none; }
.menu-btn .icon-close { display: none; }
.menu-btn[aria-expanded="true"] .icon-open { display: none; }
.menu-btn[aria-expanded="true"] .icon-close { display: block; }
.mmenu { display: flex; flex-direction: column; padding: 20px 24px 28px; background: var(--bg); border-bottom: 1px solid var(--border); }
.mmenu a {
  display: block; text-align: right; padding: 6px 0;
  font-size: 34px; line-height: 42px; font-weight: 600; letter-spacing: -0.6px; color: var(--muted);
}
.mmenu a[aria-current] { color: var(--text); font-weight: 700; }
@media (max-width: 1180px) { .topbar-inner { gap: 32px; } .nav { gap: 24px; } }
@media (max-width: 1040px) {
  .nav, .tool-label { display: none; }
  .menu-btn { display: inline-flex; }
  .topbar-inner { padding: 10px 16px; gap: 12px; }
  .topbar-tools { gap: 8px; }
}
@media (max-width: 480px) {
  .topbar-tools { gap: 0; }
  .topbar .lockup-mark { width: 197px; }
  .topbar .lockup-line { font-size: 9px; line-height: 12px; letter-spacing: 1.2px; }
}
@media (min-width: 1041px) { .mmenu { display: none !important; } }

/* ---------- Opening screen ---------- */

.opening { background: var(--bg); }
.opening-inner {
  max-width: var(--page); margin: 0 auto; min-height: calc(900px - var(--topbar-h)); padding: 4vw var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: center;
}
.opening-copy { display: flex; flex-direction: column; gap: max(20px, 1.5vw); min-width: 0; transition: opacity 600ms ease, transform 600ms ease; }
.opening h1 { font-family: var(--font-brand); font-size: clamp(44px, 4.6vw, 76px); line-height: 1.02; font-weight: 500; letter-spacing: -0.02em; color: var(--text); text-wrap: balance; }
.opening .lede { font-size: max(20px, 1.45vw); line-height: 1.3; font-weight: 600; color: var(--soft-text); }
.opening .body { font-size: max(18px, 1.3vw); line-height: 1.55; color: var(--muted); max-width: 46ch; }
.opening .btn { font-size: max(13px, 0.85vw); min-height: max(52px, 3.3vw); min-width: max(236px, 15vw); padding: 0 max(23px, 1.5vw); }
.opening .actions { gap: max(14px, 1vw); }
.actions { display: flex; gap: 14px; flex-wrap: wrap; padding-top: 4px; }
.hero-art { width: 100%; height: auto; justify-self: center; min-width: 0; transition: opacity 600ms ease; }
.intro-running .opening-copy { opacity: 0; transform: translateY(14px); }
.intro-running .hero-art { opacity: 0; }
@media (max-width: 760px) {
  .opening-inner { grid-template-columns: 1fr; min-height: 0; padding: 40px 16px 48px; gap: 28px; }
  .hero-art { order: -1; }
}

/* ---------- The tour ---------- */

.tour { position: relative; background: var(--tour-bg); color: var(--tour-text); }
.tour-anchor { position: absolute; left: 0; width: 1px; height: 1px; }
.tour-stage { position: sticky; top: 0; overflow: hidden; background: var(--tour-bg); }
.tour-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 2; pointer-events: none; }
.tour-col { position: absolute; left: var(--page-left); top: 0; bottom: 0; width: min(calc(min(100%, var(--page)) * 0.44), max(560px, 38.9vw)); z-index: 3; pointer-events: none; }
.tour-panel {
  position: absolute; left: 0; right: 0; top: 50%;
  display: flex; flex-direction: column; gap: max(18px, 1.250vw);
  opacity: 0; transform: translateY(-38%); pointer-events: none;
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.tour-panel.on { opacity: 1; transform: translateY(-50%); pointer-events: auto; }
.tour-eyebrow { font-size: max(12px, 0.833vw); line-height: 1.333; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--tour-muted); }
.tour-panel h2 { font-size: max(44px, 3.056vw); line-height: 1.136; font-weight: 300; letter-spacing: -0.8px; color: var(--tour-text); }
.tour-body { font-size: max(18px, 1.250vw); line-height: 1.556; color: var(--tour-body); }
.tour-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: max(12px, 0.833vw); }
.tour-steps li { display: flex; align-items: center; gap: max(14px, 0.972vw); font-size: max(18px, 1.250vw); line-height: 1.333; }
.tour-steps b {
  width: max(32px, 2.222vw); height: max(32px, 2.222vw); border-radius: 50%; border: 1px solid rgba(231, 236, 244, 0.4);
  display: flex; align-items: center; justify-content: center; font-size: max(14px, 0.972vw); font-weight: 600; flex: none;
}
.tour-panel .actions { padding-top: 6px; }
.tour-rail {
  position: absolute; right: max(20px, calc((100% - var(--page)) / 2 + 8px)); top: 50%; transform: translateY(-50%); z-index: 4;
  display: flex; flex-direction: column; padding: 6px 0; border-radius: 9999px;
  background: rgba(245, 247, 250, 0.06); border: 1px solid rgba(245, 247, 250, 0.12);
}
.tour-rail a { width: max(44px, 3.056vw); height: max(40px, 2.778vw); display: flex; align-items: center; justify-content: center; }
.tour-rail a:focus-visible { outline-color: var(--pearl); }
.tour-rail span { width: max(8px, 0.556vw); height: max(8px, 0.556vw); border-radius: 50%; background: rgba(231, 236, 244, 0.35); transition: all 0.3s ease; }
.tour-rail a[aria-current] span, .tour-rail a.on span { width: max(12px, 0.833vw); height: max(12px, 0.833vw); background: var(--tour-text); box-shadow: 0 0 0 4px rgba(231, 236, 244, 0.18), 0 0 14px rgba(245, 247, 250, 0.6); }
.tour-hint {
  position: absolute; left: var(--page-left); bottom: max(28px, 1.944vw); z-index: 3;
  display: flex; align-items: center; gap: max(10px, 0.694vw);
  font-size: max(13px, 0.903vw); line-height: 1.385; color: var(--tour-muted); transition: opacity 0.4s ease;
}
@media (max-width: 760px) {
  .tour-col { left: max(20px, 1.389vw); right: max(64px, 4.444vw); width: auto; top: auto; bottom: max(24px, 1.667vw); height: 46%; }
  .tour-panel { top: auto; bottom: 0; transform: translateY(16px); }
  .tour-panel.on { transform: none; }
  .tour-panel h2 { font-size: max(30px, 2.083vw); line-height: 1.200; }
  .tour-body { font-size: max(16px, 1.111vw); line-height: 1.500; }
  .tour-steps li { font-size: max(16px, 1.111vw); }
  .tour-rail { right: max(8px, 0.556vw); }
  .tour-rail a { width: max(36px, 2.500vw); height: max(36px, 2.500vw); }
  .tour-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) { .tour-panel, .tour-rail span, .tour-hint { transition: none; } }

/* ---------- Sections ---------- */

.sec { padding: max(72px, 5.000vw) 0; border-top: 1px solid var(--border); background: var(--surface); }
.sec.alt { background: var(--alt); }
.head { display: flex; flex-direction: column; gap: max(12px, 0.833vw); max-width: max(680px, 47.222vw); }
.eyebrow { font-size: max(12px, 0.833vw); line-height: 1.333; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--soft-text); }
.klabel { font-size: max(12px, 0.833vw); line-height: 1.333; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.klabel small { font-size: inherit; font-weight: 400; letter-spacing: 0; text-transform: none; margin-left: max(8px, 0.556vw); }
.h2 { font-size: max(38px, 2.640vw); line-height: 1.15; font-weight: 600; letter-spacing: -0.6px; }
.sub { font-size: max(17px, 1.181vw); line-height: 1.412; color: var(--muted); }
.ct { font-size: max(20px, 1.389vw); line-height: 1.300; font-weight: 600; }
.cd { font-size: max(16px, 1.111vw); line-height: 1.438; color: var(--muted); }
.grid { display: grid; gap: max(16px, 1.111vw); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: max(40px, 2.778vw); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.medallion {
  width: max(44px, 3.056vw); height: max(44px, 3.056vw); border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--soft); color: var(--soft-text); font-size: max(15px, 1.042vw); font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(221, 225, 231, 0.6);
}
.badge {
  display: inline-flex; align-items: center; height: max(28px, 1.944vw); padding: 0 max(12px, 0.833vw); border-radius: 9999px;
  background: var(--soft); color: var(--soft-text); font-size: max(13px, 0.903vw); font-weight: 600; line-height: 1.231; white-space: nowrap;
}
.pill {
  display: inline-flex; align-items: center; height: max(24px, 1.667vw); padding: 0 max(10px, 0.694vw); border-radius: 9999px;
  background: var(--soft); border: 1px solid var(--border); color: var(--soft-text);
  font-size: max(11px, 0.764vw); line-height: 1.273; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; white-space: nowrap;
}
.pill.live { background: var(--surface); border-color: var(--soft-text); }
.card {
  display: flex; flex-direction: column; gap: max(14px, 0.972vw); min-width: 0; padding: max(24px, 1.667vw);
  background: var(--surface); border: 1px solid var(--border); border-radius: 26px; box-shadow: var(--sh-card);
}
.card.ink { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.card.ink .cd { color: inherit; opacity: 0.8; }
.card .badge { align-self: flex-start; }

/* What we build */
.build-grid { width: 100%; gap: max(20px, 1.389vw); }
.wcard {
  display: flex; flex-direction: column; gap: max(12px, 0.833vw); min-width: 0; padding: max(22px, 1.528vw) max(22px, 1.528vw) max(18px, 1.250vw);
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--sh-card);
  transition: border-color 180ms ease;
}
.wcard:hover { opacity: 1; border-color: var(--muted); }
/* Line the four cards up row by row, so titles, descriptions and examples start at the same height */
@supports (grid-template-rows: subgrid) {
  .build-grid .wcard { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: max(12px, 0.833vw); }
}
.wkind { font-size: max(12px, 0.833vw); line-height: 1.333; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--soft-text); }
.wtitle { font-size: max(22px, 1.528vw); line-height: 1.273; font-weight: 600; }
.wdesc { font-size: max(15px, 1.042vw); line-height: 1.467; color: var(--muted); flex: 1; }
/* Each card shows a small, labelled example of the result instead of a placeholder */
.wart {
  position: relative; display: flex; flex-direction: column; gap: max(8px, 0.556vw); justify-content: center;
  padding: max(36px, 2.500vw) max(14px, 0.972vw) max(14px, 0.972vw); border-radius: 12px; background: var(--soft);
  min-height: max(176px, 12.222vw); font-size: max(13px, 0.903vw); line-height: 1.385; color: var(--text);
}
.wart-tag { position: absolute; top: max(12px, 0.833vw); left: max(14px, 0.972vw); font-size: max(11px, 0.764vw); font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--muted); }
.msg { max-width: 88%; padding: 8px 12px; border-radius: 14px; display: flex; flex-direction: column; gap: 2px; }
.msg em { font-style: normal; font-size: 0.85em; opacity: 0.65; }
.msg.in { align-self: flex-start; background: var(--surface); border-bottom-left-radius: 4px; }
.msg.out { align-self: flex-end; background: var(--ink); color: var(--on-ink); border-bottom-right-radius: 4px; }
.wstatus, .wcheck { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--soft-text); }
.wstatus { padding-top: 4px; }
.wstatus svg, .wcheck svg { flex: none; }
.wcheck { font-weight: 500; color: var(--text); padding: 6px 10px; background: var(--surface); border-radius: 8px; }
.wrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 8px 10px; background: var(--surface); border-radius: 8px; }
.wrow span { grid-column: 1; color: var(--muted); font-size: 0.92em; }
.wrow i { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; font-size: 0.85em; font-weight: 600; padding: 3px 8px; border-radius: 9999px; background: var(--soft); color: var(--soft-text); white-space: nowrap; }
.wrow i.wait { background: var(--ink); color: var(--on-ink); }
.wfield { display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px; background: var(--surface); border-radius: 8px; }
.wfield span { color: var(--muted); }
.wfield b { font-weight: 600; text-align: right; }

/* Systems we've built */
.work-wrap { gap: max(28px, 1.944vw); }
.work-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: max(40px, 2.778vw); align-items: start; }
.rows { border-top: 1px solid var(--border); margin-top: max(12px, 0.833vw); }
.arow {
  display: grid; grid-template-columns: 200px minmax(0, 1fr) auto 16px; gap: max(20px, 1.389vw); align-items: center;
  padding: max(18px, 1.250vw) 0; border-bottom: 1px solid var(--border); min-height: max(44px, 3.056vw);
}
.arow:hover { opacity: 1; background: rgba(233, 237, 243, 0.5); }
.aname { font-size: max(19px, 1.319vw); line-height: 1.263; font-weight: 600; }
.adesc { font-size: max(16px, 1.111vw); line-height: 1.375; color: var(--muted); }
.chev { width: max(8px, 0.556vw); height: max(8px, 0.556vw); border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted); transform: rotate(-45deg); justify-self: end; margin-right: 4px; }
.side { display: flex; flex-direction: column; gap: max(24px, 1.667vw); min-width: 0; }
.kcard-head { display: flex; justify-content: space-between; align-items: center; gap: max(12px, 0.833vw); }
/* Featured systems: one spotlight card per product, full width under the systems list. */
.feat { display: flex; flex-direction: column; gap: max(18px, 1.25vw); border-top: 1px solid var(--border); padding-top: max(18px, 1.25vw); }
.feat-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 24px; flex-wrap: wrap; }
.feat-sub { font-size: max(15px, 1.042vw); line-height: 1.4; color: var(--muted); }
.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: max(16px, 1.111vw); }
.fcard { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--sh-card); }
/* Each stage sits on the product's own ground color; two phones in graphite bezels rise out of its bottom edge. */
.fstage { position: relative; height: max(300px, 21vw); overflow: hidden; border-bottom: 1px solid var(--border); }
.fphone { position: absolute; display: block; width: 42%; aspect-ratio: 9 / 19.5; padding: 3px; border-radius: 22px; background: var(--text); box-sizing: border-box; }
.fphone img, .fphone video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 19px; background: var(--soft); }
.fphone-front { left: 15%; top: 56px; z-index: 2; box-shadow: 0 18px 40px rgba(24, 27, 33, 0.2); }
.fphone-back { right: 11%; top: 80px; z-index: 1; transform: rotate(4deg); box-shadow: 0 10px 28px rgba(24, 27, 33, 0.14); }
.fbody { display: flex; flex-direction: column; gap: 14px; flex: 1; padding: max(20px, 1.389vw); }
.ftop { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; }
/* The status pill sits on the stage's top-left corner, above the phones. */
.fstage > .pill { position: absolute; top: 14px; left: 14px; z-index: 3; box-shadow: 0 2px 8px rgba(24, 27, 33, 0.08); }
.fstage > .pill:not(.live) { background: var(--surface); }
.ficon { width: 44px; height: 44px; border-radius: 10px; box-shadow: 0 0 0 1px var(--border); }
.fname-wrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fname { font-size: max(19px, 1.319vw); line-height: 1.2; font-weight: 700; }
.fkind { font-size: max(13px, 0.903vw); line-height: 1.3; color: var(--muted); }
.fdesc { font-size: max(15px, 1.042vw); line-height: 1.47; color: var(--muted); }
.ffacts { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ffacts li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; font-size: max(14px, 0.972vw); line-height: 1.4; }
.ffacts b { padding-top: 2px; font-size: max(11px, 0.764vw); line-height: 1.3; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--muted); }
.fweb { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 44px; padding: 10px; border-radius: 12px; background: var(--soft); }
.fweb img { width: 96px; height: 54px; object-fit: cover; object-position: top; border-radius: 6px; box-shadow: 0 0 0 1px var(--border); }
.fweb-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fweb-text b { font-size: max(15px, 1.042vw); line-height: 1.3; font-weight: 600; overflow-wrap: anywhere; }
.fweb-text span { font-size: max(13px, 0.903vw); line-height: 1.3; color: var(--soft-text); }
.fweb-go { font-weight: 600; color: var(--soft-text); padding-right: 4px; }
.brief { display: flex; flex-direction: column; gap: max(10px, 0.694vw); border-top: 1px solid var(--border); padding-top: max(18px, 1.250vw); }
.brief-title { font-size: max(22px, 1.528vw); line-height: 1.273; font-weight: 700; letter-spacing: -0.3px; }
.facts { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: max(10px, 0.694vw) max(16px, 1.111vw); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: max(14px, 0.972vw) 0; font-size: max(15px, 1.042vw); line-height: 1.467; }
.facts .klabel { padding-top: 3px; }
.timeline { display: flex; flex-direction: column; gap: max(14px, 0.972vw); border-top: 1px solid var(--border); padding-top: max(18px, 1.250vw); }
.timeline-head { display: flex; justify-content: space-between; align-items: center; gap: max(12px, 0.833vw); flex-wrap: wrap; min-height: max(44px, 3.056vw); }
.tstep { display: flex; flex-direction: column; gap: max(8px, 0.556vw); padding-top: 4px; }
.tdot { width: max(12px, 0.833vw); height: max(12px, 0.833vw); border-radius: 50%; border: 1.5px solid var(--muted); background: var(--soft); }
.tdot.now { background: var(--soft-text); border-color: var(--soft-text); }
.tdate { font-size: max(12px, 0.833vw); line-height: 1.333; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); }
.tdate.now { color: var(--text); }
.ttxt { font-size: max(16px, 1.111vw); line-height: 1.375; }

/* How we work: three steps on one rule, a pearl sitting on the line above each, the way the A sits on the tour's edge */
.steps { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: max(28px, 1.944vw); }
.steps li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: max(10px, 0.694vw); min-width: 0; padding-top: max(28px, 1.944vw); border-top: 1px solid var(--border); }
.steps .pearl-dot { width: 16px; height: 16px; border-radius: 50%; flex: none; margin-top: calc(-1 * max(28px, 1.944vw) - 8px); background: radial-gradient(circle at 36% 32%, #ffffff 0, #d9dde3 22%, #b4b4b4 50%, #6a6a6a 82%, #4a4a4a 100%); box-shadow: 0 1px 3px rgba(24, 27, 33, 0.25); }
.steps .slabel { color: var(--soft-text); }
.steps h3 { font-size: max(20px, 1.389vw); line-height: 1.300; font-weight: 600; }
.steps p { font-size: max(15px, 1.042vw); line-height: 1.5; color: var(--muted); max-width: 34ch; }

/* Start a conversation */
/* Start here: the company beside the form */
.talk-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: max(40px, 2.778vw); align-items: start; width: 100%; max-width: max(1040px, 72.222vw); margin: 0 auto; }
.talk-grid .card { width: 100%; min-width: 0; }
.founder-facts { list-style: none; margin: 0; padding: max(14px, 0.972vw) 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; font-size: max(15px, 1.042vw); line-height: 1.4; font-weight: 600; }
.founder-facts li { display: flex; align-items: center; gap: 12px; }
.founder .pearl-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; background: radial-gradient(circle at 36% 32%, #ffffff 0, #d9dde3 22%, #b4b4b4 50%, #6a6a6a 82%, #4a4a4a 100%); box-shadow: 0 1px 2px rgba(24, 27, 33, 0.25); }
.field-label { font-size: max(15px, 1.042vw); line-height: 1.333; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 9999px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: inherit; font-size: max(14px, 0.972vw); font-weight: 600; line-height: 1.2; cursor: pointer; transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease; }
.chip:hover { border-color: var(--muted); opacity: 1; }
.chip.on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.form-head { display: flex; flex-direction: column; gap: 4px; padding-bottom: 4px; }
.form-note { font-size: max(13px, 0.903vw); line-height: 1.385; color: var(--muted); text-align: center; }
.form-note a { text-decoration: underline; text-underline-offset: 2px; }
.founder { display: flex; flex-direction: column; gap: max(18px, 1.25vw); align-items: flex-start; padding-top: 6px; scroll-margin-top: max(24px, 1.667vw); }
.founder-text { gap: 10px; }
.founder-photo { width: max(140px, 9.722vw); height: max(140px, 9.722vw); border-radius: 28px; flex: none; border-radius: 50%; object-fit: cover; background: var(--soft); box-shadow: 0 0 0 1px var(--border); }
.founder-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.founder-name { font-size: max(17px, 1.181vw); line-height: 1.294; font-weight: 600; }
.founder-name span { font-weight: 500; color: var(--muted); }
.founder-links { display: flex; gap: max(16px, 1.111vw); flex-wrap: wrap; font-size: max(15px, 1.042vw); line-height: 1.333; font-weight: 600; color: var(--soft-text); }
.founder-links > * { padding: max(12px, 0.833vw) 0; }
.founder-links span { font-weight: 400; color: var(--muted); }
.form { padding: max(28px, 1.944vw); gap: max(16px, 1.111vw); }
.form .g2 { gap: max(14px, 0.972vw); }
.field { display: flex; flex-direction: column; gap: max(8px, 0.556vw); min-width: 0; }
.field label { font-size: max(15px, 1.042vw); line-height: 1.333; font-weight: 600; }
.field input, .field textarea {
  width: 100%; min-height: max(52px, 3.611vw); padding: max(14px, 0.972vw) max(16px, 1.111vw); border-radius: 18px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
  font: inherit; font-size: max(17px, 1.181vw); line-height: 1.294; resize: vertical;
}
.field input[aria-invalid="true"] { border-color: var(--soft-text); }
.form-error { font-size: max(15px, 1.042vw); line-height: 1.400; color: var(--soft-text); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.notice { display: flex; gap: max(14px, 0.972vw); align-items: flex-start; padding: max(16px, 1.111vw); background: var(--soft); border-radius: 14px; color: var(--soft-text); font-size: max(16px, 1.111vw); line-height: 1.312; }
.notice svg { flex: none; margin-top: 1px; }
.notice > div { display: flex; flex-direction: column; gap: 5px; }
.notice strong { font-weight: 600; }
.notice a { font-weight: 600; text-decoration: underline; }
.sent { padding: max(28px, 1.944vw); justify-content: center; }

/* Footer */
.footer { border-top: 1px solid var(--border); background: var(--surface); }
.footer-inner {
  max-width: var(--page); margin: 0 auto; padding: 28px var(--gutter);
  display: flex; flex-wrap: wrap; gap: max(16px, 1.111vw); align-items: center; justify-content: space-between;
  font-size: max(13px, 0.903vw); line-height: 1.385; color: var(--muted);
}
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: max(8px, 0.556vw); }
.footer .lockup-mark { width: max(200px, 13.9vw); }
.footer-links { display: flex; gap: max(24px, 1.667vw); flex-wrap: wrap; align-items: center; }
.footer-links a, .footer-links button { padding: max(12px, 0.833vw) 0; color: var(--muted); }
.link-btn { background: none; border: 0; font: inherit; cursor: pointer; }
.link-btn:hover { opacity: 0.78; }

/* The service examples need about 290px a card; below that, two per row */
@media (max-width: 960px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-grid, .talk-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .aug { --gutter: 16px; }
  .sec { padding: max(48px, 3.333vw) 0; }
  .g2, .g4 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 36px; }
  .talk-grid { gap: 32px; }
  .founder-photo { width: 96px; height: 96px; border-radius: 22px; }
  .chips { gap: 6px; }
  .chip { font-size: 13px; min-height: 36px; padding: 0 12px; }
  .lower .wrap { gap: 36px; }
  .h2 { font-size: max(30px, 2.083vw); line-height: 1.2; }
  .arow { grid-template-columns: minmax(0, 1fr) auto 16px; gap: max(8px, 0.556vw) max(16px, 1.111vw); }
  .arow .adesc { grid-column: 1 / -1; order: 3; }
  .form { padding: max(20px, 1.389vw); }
}

/* Brushed-graphite AUGMORA wordmark above the brand line, the two set to the same width
   (9px brand line at 0.27em measures 232px; both grow with the window in step). */
.lockup, .footer-brand { align-items: flex-start; }
.lockup-mark { display: block; width: max(232px, 16.1vw); height: auto; max-width: 100%; }
.lockup .lockup-line { font-size: max(9px, 0.625vw); letter-spacing: 0.27em; }
.footer .lockup-mark { width: max(200px, 13.9vw); }
@media (max-width: 480px) {
  .topbar .lockup-mark, .signin-col .lockup-mark { width: 194px; }
  .topbar .lockup-line, .signin-col .lockup-line { font-size: 9px; letter-spacing: 0.12em; }
}

/* ---------- Proposed opening: centred, the A in dots over the pearl, the film settled inside the pearl ---------- */
.opening.centre { background: var(--surface); position: relative; overflow: visible; z-index: 6; }
/* The opening film covers the hero, ends on the graphite A, glides onto the mark and dissolves into the dots. */
.intro { position: absolute; inset: 0; z-index: 20; background: #0b0d11; overflow: hidden; transition: opacity 700ms ease; display: none; }
.intro-playing .intro, .intro-handoff .intro, .intro-dissolve .intro { display: block; }
.intro-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transform-origin: 0 0; transition: none; }

.intro-skip { position: absolute; right: 28px; bottom: 24px; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border: 1px solid rgba(231, 236, 244, 0.45); border-radius: 4px; background: rgba(11, 13, 17, 0.6); color: var(--tour-text); font-family: var(--font-brand); font-size: 12px; font-weight: 500; letter-spacing: 0.065em; text-transform: uppercase; cursor: pointer; }
.intro-handoff .intro, .intro-dissolve .intro { background: #ffffff; }
.intro-dissolve .intro { background: transparent; }
.intro-handoff .intro-film, .intro-dissolve .intro-film { -webkit-mask-image: radial-gradient(ellipse 34% 40% at 50% 55%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 34% 40% at 50% 55%, #000 55%, transparent 100%); }
.intro-handoff .intro-film.portrait, .intro-dissolve .intro-film.portrait { -webkit-mask-image: radial-gradient(ellipse 44% 24% at 50% 52%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 44% 24% at 50% 52%, #000 55%, transparent 100%); }
.intro-handoff .intro-film { transition: transform 1100ms cubic-bezier(.65, 0, .35, 1); }
.intro-dissolve .intro { opacity: 0; pointer-events: none; }
.intro-dissolve .intro-film { transition: opacity 700ms ease; }
.intro-done .intro { display: none; }
.mark-dots, .lens, .mark-word, .opening.centre .opening-copy { transition: opacity 700ms ease; }
.intro-playing .mark-dots, .intro-handoff .mark-dots { opacity: 0; }
.intro-playing .lens, .intro-handoff .lens { opacity: 0; }
.intro-playing .mark-word, .intro-handoff .mark-word, .intro-playing .opening-copy, .intro-handoff .opening-copy { opacity: 0; }
.opening.centre .opening-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0; height: 720px; min-height: 0; padding: 24px var(--gutter) 28px; }
.mark { position: relative; width: 480px; height: 294px; flex: none; max-width: 100%; }
.mark-dots { position: absolute; inset: 0; width: 480px; height: 294px; display: block; }
.lens { position: absolute; left: 190px; top: 140px; width: 100px; height: 100px; border-radius: 50%; overflow: hidden; box-shadow: 0 18px 40px rgba(24, 27, 33, 0.25), inset 0 0 0 1px rgba(255,255,255,0.6); }
.lens-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: var(--soft); }
.lens::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 36% 32%, rgba(255,255,255,0.55) 0, rgba(255,255,255,0.05) 40%, rgba(0,0,0,0.28) 100%); }
.mark-word { position: relative; z-index: 1; width: 300px; max-width: 100%; height: auto; display: block; margin: 14px 0 22px; }
.opening.centre .opening-copy { align-items: center; gap: 14px; max-width: 720px; }
.opening.centre h1 { font-size: clamp(30px, 3.2vw, 44px); font-weight: 500; letter-spacing: 0.065em; text-transform: uppercase; line-height: 1.15; }
/* The lede is set like the lockup's brand line: Archivo, small spaced capitals, muted */
.opening.centre .lede { font-family: var(--font-brand); font-size: max(12px, 0.9vw); line-height: 1.7; font-weight: 600; letter-spacing: 0.27em; text-transform: uppercase; color: var(--muted); max-width: 46ch; }
.opening.centre .actions { justify-content: center; padding-top: 14px; }
.film-ctl { position: absolute; right: 20px; bottom: 20px; z-index: 30; display: flex; align-items: center; gap: 8px; }
.film-ctl .intro-skip { position: static; display: none; }
.intro-playing .film-ctl .intro-skip { display: inline-flex; }
/* Small round media controls, after meta.com: a translucent dark disc with a white glyph, on film and page alike */
.round { width: 40px; height: 40px; flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%; border: 0; background: rgba(11, 13, 17, 0.55); color: #ffffff; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color 200ms ease; }
.round:hover { background: rgba(11, 13, 17, 0.75); }
.round svg { width: 15px; height: 15px; }
@media (max-width: 760px) {
  .film-ctl { right: 12px; bottom: 12px; }
  .round { width: 36px; height: 36px; }
  .round svg { width: 14px; height: 14px; }
  .opening.centre .opening-inner { height: auto; min-height: 560px; }
  .mark { width: 320px; height: 196px; }
  .mark-dots { width: 320px; height: 196px; }
  .lens { left: 127px; top: 93px; width: 66px; height: 66px; }
  .mark-word { width: 260px; }
}


/* ---------- Scrolling down: the mark rides with you while the page slides away beneath it ----------
   Driven by the scroll position itself (CSS scroll-driven animation), so it is smooth and reversible.
   Over the first 1120px of scroll the mark drifts up at a tenth of the page's speed and shrinks a little,
   so it hovers over the dark stage while its dots leave for the pearl; the wordmark, headline and buttons
   fade and lift away in the first 280px. */
@supports (animation-timeline: scroll()) {
  .intro-done .mark { animation: aug-ride linear both; animation-timeline: scroll(root); animation-range: 0px 1120px; }
  .intro-done .mark-word, .intro-done .opening-copy { animation: aug-lift linear both; animation-timeline: scroll(root); animation-range: 0px 280px; }
}
@keyframes aug-ride { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(0, 1000px, 0) scale(0.9); } }
@keyframes aug-lift { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-28px); } }
@media (prefers-reduced-motion: reduce) {
  .intro-done .mark, .intro-done .mark-word, .intro-done .opening-copy { animation: none; }
}

/* ---------- Top bar, after meta.com's header ----------
   One thin, calm bar. Over the film it is transparent with white marks and a soft dark fade for legibility;
   on the page it settles into frosted white with a hairline. On phones the menu button leads, then the lockup,
   with the contact and sign-in icons on the right, all thin-stroked and evenly spaced. */
.topbar { background: rgba(255, 255, 255, 0.84); -webkit-backdrop-filter: saturate(1.4) blur(18px); backdrop-filter: saturate(1.4) blur(18px); border-bottom: 0; box-shadow: 0 1px 0 rgba(24, 27, 33, 0.08); transition: background-color 320ms ease, box-shadow 320ms ease, color 320ms ease; }
.topbar-inner { min-height: 80px; padding: 0 max(var(--gutter), 2vw); gap: max(28px, 2.2vw); }
.topbar .lockup-mark { width: max(176px, 12vw); transition: filter 320ms ease; }
.topbar .lockup .lockup-line { transition: color 320ms ease; }
.topbar-tools { gap: max(26px, 1.8vw); }
.topbar-tools .tool > svg { height: 26px; stroke-width: 1.5; }
.topbar .menu-btn > svg { width: 28px; height: 28px; stroke-width: 1.6; }
.topbar .tool, .topbar .menu-btn { color: inherit; }
.topbar.over-media { background: linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0, rgba(0, 0, 0, 0.18) 60%, rgba(0, 0, 0, 0) 100%); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; color: #ffffff; }
.topbar.over-media .lockup-mark { filter: brightness(0) invert(1); }
.topbar.over-media .lockup-line { color: rgba(255, 255, 255, 0.88); }
.topbar.over-media .nav a { color: rgba(255, 255, 255, 0.78); }
.topbar.over-media .nav a:hover, .topbar.over-media .nav a:focus-visible { background: rgba(255, 255, 255, 0.14); color: #ffffff; }
.topbar.over-media .nav a:focus-visible { outline-color: #ffffff; }
.topbar.over-media .nav a.on { color: #ffffff; }
.topbar.over-media .nav a.on::after { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35); }
.topbar.over-media .mmenu { background: #0b0d11; color: var(--tour-text); border-bottom-color: rgba(255, 255, 255, 0.14); }
.topbar.over-media .mmenu a { color: var(--tour-muted); }
.topbar.over-media .mmenu a[aria-current] { color: var(--tour-text); }
/* the hero band runs under the bar, so the film shows through it */
.opening.centre { margin-top: -80px; }
.opening.centre .opening-inner { height: 800px; padding-top: 100px; }
@media (max-width: 1040px) {
  .topbar-inner { padding: 0 20px; gap: 16px; min-height: 76px; }
  .topbar .menu-btn { order: -1; margin-right: 4px; }
  .topbar-tools { gap: 18px; }
  .topbar .lockup-mark { width: 164px; }
  .topbar .lockup .lockup-line { font-size: 8px; letter-spacing: 0.18em; }
  .opening.centre { margin-top: -76px; }
  .opening.centre .opening-inner { height: auto; min-height: 640px; padding-top: 96px; padding-bottom: 92px; }
}
@media (max-width: 480px) {
  .topbar-inner { padding: 0 16px; gap: 12px; }
  .topbar-tools { gap: 14px; }
  .topbar .lockup-mark { width: 150px; }
}
@media (prefers-reduced-motion: reduce) { .topbar, .topbar .lockup-mark, .topbar .lockup .lockup-line { transition: none; } }

/* ---------- What we build: one lead example, three beside it; icons resolve from dots, examples fill in ----------
   The booking assistant is the wide card on the left and its text exchange plays out when the card scrolls into
   view; the three smaller cards sit to its right and their example rows fill in one by one. Each card's icon is a
   small dark tile where pearl-white dots gather into the symbol, the same language as the tour. */
.whead { display: flex; align-items: center; gap: 12px; }
.wicon { width: 44px; height: 44px; border-radius: 10px; background: #0b0d11; flex: none; display: block; }
.chat-head { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; margin-top: 8px; margin-bottom: auto; padding-bottom: 12px; border-bottom: 1px solid rgba(24, 27, 33, 0.08); }
.chat-head i { grid-row: 1 / span 2; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 36% 32%, #ffffff 0, #d9dde3 22%, #b4b4b4 50%, #6a6a6a 82%, #4a4a4a 100%); }
.chat-head b { font-weight: 600; }
.chat-head span { font-size: 0.9em; color: var(--muted); }
.wart-chat .msg { opacity: 0; transform: translateY(8px); }
.wart-chat .msg.reply { position: relative; }
.wart-chat .msg.reply .t { display: flex; flex-direction: column; gap: 2px; opacity: 0; }
.wart-chat .msg.reply .dots { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 5px; opacity: 0; }
.wart-chat .msg.reply .dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.75); display: block; animation: aug-dot 900ms ease-in-out infinite; }
.wart-chat .msg.reply .dots i:nth-child(2) { animation-delay: 150ms; }
.wart-chat .msg.reply .dots i:nth-child(3) { animation-delay: 300ms; }
.wart-chat .wstatus { opacity: 0; }
.in .wart-chat > .msg:nth-child(3) { animation: aug-rise 420ms ease both 300ms; }
.in .wart-chat > .msg.reply { animation: aug-rise 420ms ease both 1000ms; }
.in .wart-chat > .msg.reply .dots { animation: aug-blink 1200ms ease both 1000ms; }
.in .wart-chat > .msg.reply .t { animation: aug-fadein 300ms ease both 2200ms; }
.in .wart-chat > .msg:nth-child(5) { animation: aug-rise 420ms ease both 3000ms; }
.in .wart-chat > .wstatus { animation: aug-rise 420ms ease both 3800ms; }
.wart .wrow, .wart .wfield, .wart .wcheck, .wart:not(.wart-chat) .wstatus { opacity: 0; transform: translateY(6px); }
.in .wart:not(.wart-chat) > :nth-child(2) { animation: aug-rise 360ms ease both 250ms; }
.in .wart:not(.wart-chat) > :nth-child(3) { animation: aug-rise 360ms ease both 550ms; }
.in .wart:not(.wart-chat) > :nth-child(4) { animation: aug-rise 360ms ease both 850ms; }
.in .wart:not(.wart-chat) > :nth-child(5) { animation: aug-rise 360ms ease both 1150ms; }
.in .wart:not(.wart-chat) > :nth-child(6) { animation: aug-rise 360ms ease both 1450ms; }
@keyframes aug-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes aug-blink { 0% { opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes aug-fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes aug-dot { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(-3px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .wart .msg, .wart .wrow, .wart .wfield, .wart .wcheck, .wart .wstatus { opacity: 1; transform: none; animation: none !important; }
  .wart-chat .msg.reply .t { opacity: 1; } .wart-chat .msg.reply .dots { display: none; }
}
/* Hero buttons as pills, after meta.com: fully round, sentence case, bold, sized to their label, side by side */
.opening.centre .actions { gap: 12px; }
.opening.centre .actions .btn { border-radius: 9999px; font-family: var(--font-brand); font-size: 14px; font-weight: 500; letter-spacing: 0.065em; text-transform: uppercase; line-height: 1.2; min-height: 56px; min-width: 0; padding: 0 30px; justify-content: center; gap: 0; box-shadow: none; }
.opening.centre .actions .btn svg { display: none; }
.opening.centre .actions .btn-secondary { background: var(--soft); border-color: transparent; }
.opening.centre .actions .btn-secondary:hover { background: var(--border); }
.opening.centre .actions .btn .short { display: none; }
@media (max-width: 760px) {
  .opening.centre .actions { flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: stretch; width: 100%; gap: 10px; }
  .opening.centre .actions .btn { flex: 0 1 auto; font-size: 13px; min-height: 54px; padding: 0 22px; white-space: nowrap; }
  .opening.centre .actions .btn .long { display: none; }
  .opening.centre .actions .btn .short { display: inline; }
}

/* ---------- Lower sections, set in the opening's language: centred heads, the brand line's spaced capitals, the headline's Archivo caps, pills ---------- */
.sec.lower { padding: max(88px, 6.111vw) 0; }
.lower .wrap { gap: max(44px, 3.056vw); }
.shead { display: flex; flex-direction: column; align-items: center; text-align: center; gap: max(14px, 0.972vw); max-width: max(900px, 62.5vw); margin: 0 auto; }
.slabel { font-family: var(--font-brand); font-size: max(11px, 0.76vw); line-height: 1.4; font-weight: 600; letter-spacing: 0.27em; text-transform: uppercase; color: var(--muted); }
.stitle { font-family: var(--font-brand); font-size: clamp(24px, 2.5vw, 34px); line-height: 1.2; font-weight: 500; letter-spacing: 0.065em; text-transform: uppercase; }
.shead .sub { max-width: 52ch; }
.lower .wcard, .lower .card { border-radius: 18px; box-shadow: none; }
.lower .form { padding: max(24px, 1.667vw); }
.lower .field input, .lower .field textarea { border-radius: 14px; }
.btn-pill .short { display: none; }
@media (max-width: 760px) { .btn-pill { font-size: 13px; min-height: 54px; padding: 0 22px; white-space: nowrap; } .btn-pill .long { display: none; } .btn-pill .short { display: inline; } }
.btn-pill { border-radius: 9999px; font-family: var(--font-brand); font-size: 14px; font-weight: 500; letter-spacing: 0.065em; text-transform: uppercase; line-height: 1.2; min-height: 56px; min-width: 0; padding: 0 30px; justify-content: center; gap: 0; box-shadow: none; }

/* ---------- What we build as a flow: a sticky stage where the four cards gather into a list while a phone shows each result ---------- */
.build-flow { padding: 0; }
.build-flow .build-stage { position: sticky; top: 80px; box-sizing: border-box; padding: max(44px, 3.056vw) 0 max(32px, 2.222vw); overflow: hidden; }
.build-flow .build-stage::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(24, 27, 33, 0.22) 1.2px, transparent 1.8px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 56%, transparent 58%, #000 100%); mask-image: radial-gradient(ellipse 62% 58% at 50% 56%, transparent 58%, #000 100%); }
.build-flow .build-stage > .wrap { position: relative; z-index: 1; gap: max(30px, 2.083vw); }
.build-split { position: relative; display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: max(32px, 2.5vw); align-items: start; }
/* The opening state: four cards in a row */
.build-row { grid-column: 1 / -1; grid-row: 1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: max(14px, 1vw); transform-origin: 0 0; transition: opacity 380ms ease, transform 560ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.build-row .wcard { padding: 18px 18px 16px; gap: 10px; }
.build-row .wtitle { font-size: max(19px, 1.32vw); line-height: 1.25; }
.build-row .wdesc { font-size: max(14px, 0.97vw); line-height: 1.45; }
.build-row .wart { min-height: 0; padding: 30px 12px 12px; font-size: 12.5px; line-height: 1.35; gap: 6px; }
.build-row .wart-tag { top: 10px; left: 12px; font-size: 10px; }
.build-row .chat-head { grid-template-columns: 28px 1fr; margin-top: 2px; padding-bottom: 8px; }
.build-row .chat-head i { width: 28px; height: 28px; }
.build-row .msg { padding: 6px 10px; max-width: 94%; }
.build-row .wrow, .build-row .wfield, .build-row .wcheck { padding: 6px 8px; }
.build-row .wrow i { font-size: 0.8em; padding: 2px 6px; }
/* The gathered state: a list on the left, the pearl on its line, the phone on the right */
.build-list { grid-column: 1; grid-row: 1; position: relative; list-style: none; margin: 0; padding: 0 0 0 42px; display: flex; flex-direction: column; gap: 6px; opacity: 0; transform: translateY(24px); pointer-events: none; transition: opacity 420ms ease 140ms, transform 560ms cubic-bezier(0.2, 0.7, 0.2, 1) 140ms; }
.list-line { position: absolute; left: 13px; top: -36px; width: 1px; background: var(--border); transition: height 520ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.list-pearl { position: absolute; left: 6px; top: -8px; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 36% 32%, #ffffff 0, #d9dde3 22%, #b4b4b4 50%, #6a6a6a 82%, #4a4a4a 100%); box-shadow: 0 1px 3px rgba(24, 27, 33, 0.25); transition: transform 520ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.brow { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 16px; border-radius: 16px; border: 1px solid transparent; opacity: 0.55; cursor: pointer; transition: opacity 300ms ease, background-color 300ms ease, border-color 300ms ease; }
.brow:hover { opacity: 0.85; }
.brow.on { opacity: 1; background: var(--surface); border-color: var(--border); }
.brow-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.brow b { font-size: max(17px, 1.18vw); line-height: 1.25; font-weight: 600; }
.brow span { font-size: max(13px, 0.9vw); line-height: 1.4; color: var(--muted); }
.wicon-list { border-radius: 50%; }
.build-demo { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: max(24px, 2vw); align-items: center; opacity: 0; transform: translateX(40px); pointer-events: none; transition: opacity 420ms ease 200ms, transform 620ms cubic-bezier(0.2, 0.7, 0.2, 1) 200ms; }
.build-flow.is-list .build-row { opacity: 0; transform: translate3d(-20px, -14px, 0) scale(0.94); pointer-events: none; }
.build-flow.is-list .build-list, .build-flow.is-list .build-demo { opacity: 1; transform: none; pointer-events: auto; }
.demo-copy { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.demo-copy h3 { font-size: max(24px, 1.8vw); line-height: 1.2; font-weight: 600; letter-spacing: -0.2px; }
.demo-copy p { font-size: max(15px, 1.05vw); line-height: 1.5; color: var(--muted); max-width: 34ch; }
.demo-dots { display: flex; gap: 8px; padding: 6px 0 2px; }
.demo-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--border); transition: background-color 300ms ease, transform 300ms ease; }
.demo-dots i.on { background: var(--ink); transform: scale(1.3); }
.demo-copy .btn-pill { align-self: flex-start; margin-top: 6px; }
.phone { width: 236px; height: 500px; padding: 8px; border-radius: 40px; background: #1b1f26; box-shadow: 0 30px 60px rgba(24, 27, 33, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.08); flex: none; }
.phone-screen { position: relative; width: 100%; height: 100%; border-radius: 32px; background: var(--surface); overflow: hidden; }
.phone-notch { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 78px; height: 22px; border-radius: 12px; background: #1b1f26; z-index: 2; }
.phone-bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px 0; font-size: 12px; font-weight: 600; }
.phone-sig { display: flex; gap: 2px; align-items: flex-end; height: 10px; }
.phone-sig i { display: block; width: 3px; background: var(--text); border-radius: 1px; height: 5px; }
.phone-sig i:nth-child(2) { height: 7px; } .phone-sig i:nth-child(3) { height: 10px; }
.screen { position: absolute; inset: 40px 0 0 0; padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 10px; opacity: 0; transform: translateX(22px); pointer-events: none; transition: opacity 320ms ease, transform 460ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.screen.in { opacity: 1; transform: none; }
.app-head { display: flex; flex-direction: column; gap: 1px; padding: 4px 4px 8px; border-bottom: 1px solid var(--border); }
.app-head b { font-size: 17px; font-weight: 700; letter-spacing: -0.2px; }
.app-head span { font-size: 12px; color: var(--muted); }
.screen .wart { flex: 1; background: transparent; padding: 22px 2px 0; min-height: 0; font-size: 13px; line-height: 1.35; gap: 8px; justify-content: flex-start; }
.screen .wart-tag { top: 2px; left: 4px; font-size: 10px; }
.screen .chat-head { grid-template-columns: 30px 1fr; margin-top: 0; padding-bottom: 8px; }
.screen .chat-head i { width: 30px; height: 30px; }
.screen .msg { padding: 7px 10px; max-width: 92%; }
.screen .msg.in, .screen .wrow, .screen .wfield, .screen .wcheck { background: var(--soft); }
.screen .wrow i { font-size: 0.78em; padding: 2px 6px; }
/* On the design canvas the whole story shows at once: the row of cards above, the list and the phone below */
.build-flow.is-compact .build-stage { position: static; height: auto !important; }
.build-flow.is-compact .build-split { grid-template-rows: auto auto; row-gap: max(40px, 2.8vw); }
.build-flow.is-compact .build-row { grid-row: 1; opacity: 1; transform: none; pointer-events: auto; }
.build-flow.is-compact .build-list { grid-row: 2; grid-column: 1; }
.build-flow.is-compact .build-demo { grid-row: 2; grid-column: 2; }
.build-flow.is-compact .build-list, .build-flow.is-compact .build-demo { opacity: 1; transform: none; pointer-events: auto; transition: none; }
@media (max-width: 1180px) { .phone { width: 212px; height: 450px; } .build-demo { grid-template-columns: 1fr; justify-items: start; } }
@media (max-width: 960px) {
  .build-flow { height: auto !important; }
  .build-flow .build-stage { position: static; height: auto !important; padding: max(48px, 3.333vw) 0; }
  .build-flow .build-stage::before { display: none; }
  .build-split { display: flex; flex-direction: column; }
  .build-row { grid-template-columns: 1fr; opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
  .build-row .wart { font-size: 13px; }
  .build-list, .build-demo { display: none; }
}
@media (prefers-reduced-motion: reduce) { .build-row, .build-list, .build-demo, .screen, .list-line, .list-pearl, .brow, .demo-dots i { transition: none; } }

/* ---------- Chat button: a floating ink disc, bottom left, that takes you to the conversation form ---------- */

/* ---------- The tab pages: a page head in the opening's language, cross-links and a closing invitation ---------- */
.page-head { padding: max(76px, 5.3vw) 0 max(44px, 3vw); background: var(--surface); }
.page-head .shead { gap: max(16px, 1.1vw); }
.page-head .stitle { font-size: clamp(28px, 3.2vw, 44px); line-height: 1.15; }
.page-head .sub { font-size: max(17px, 1.2vw); line-height: 1.5; }
.page-head .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.btn-pill.btn-secondary { background: var(--soft); color: var(--text); border-color: transparent; }
.btn-pill.btn-secondary:hover { background: var(--border); }
.next-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: max(16px, 1.1vw); width: 100%; }
.ncard { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: max(24px, 1.67vw); border: 1px solid var(--border); border-radius: 18px; background: var(--surface); transition: border-color 180ms ease, transform 180ms ease; }
.ncard:hover { opacity: 1; border-color: var(--muted); transform: translateY(-2px); }
.ncard b { font-size: max(20px, 1.39vw); line-height: 1.25; font-weight: 600; }
.ncard .d { font-size: max(15px, 1.04vw); line-height: 1.5; color: var(--muted); }
.ncard .go { margin-top: auto; padding-top: 6px; font-size: max(14px, 0.97vw); font-weight: 600; color: var(--soft-text); }
.ncard .go span { display: inline-block; transition: transform 180ms ease; }
.ncard:hover .go span { transform: translateX(3px); }
.cta-band .shead .btn-pill { margin-top: 8px; }
.tools-line { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; }
.tools-line .badge { height: 40px; padding: 0 18px; font-family: var(--font-brand); font-weight: 500; letter-spacing: 0.02em; background: var(--surface); border: 1px solid var(--border); }
/* How we work */
.paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: max(16px, 1.1vw); width: 100%; }
.path-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: max(28px, 1.94vw); border-radius: 18px; border: 1px solid var(--border); background: var(--surface); }
.path-card.ink { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.path-card.ink .slabel { color: var(--pearl); }
.path-card h3 { font-size: max(24px, 1.67vw); line-height: 1.2; font-weight: 600; }
.path-card p { font-size: max(16px, 1.11vw); line-height: 1.5; color: var(--muted); }
.path-card.ink p { color: rgba(255, 255, 255, 0.78); }
.path-card .yield { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); font-size: max(14px, 0.97vw); line-height: 1.45; font-weight: 600; color: var(--text); }
.path-card.ink .yield { border-color: rgba(255, 255, 255, 0.18); color: var(--on-ink); }
.vows { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: max(28px, 1.94vw); }
.vows li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; min-width: 0; padding-top: max(26px, 1.8vw); border-top: 1px solid var(--border); }
.vows .pearl-dot { width: 16px; height: 16px; border-radius: 50%; flex: none; margin-top: calc(-1 * max(26px, 1.8vw) - 8px); margin-bottom: 10px; background: radial-gradient(circle at 36% 32%, #ffffff 0, #d9dde3 22%, #b4b4b4 50%, #6a6a6a 82%, #4a4a4a 100%); box-shadow: 0 1px 3px rgba(24, 27, 33, 0.25); }
.vows strong { font-size: max(18px, 1.25vw); line-height: 1.3; font-weight: 600; }
.vows span { font-size: max(15px, 1.04vw); line-height: 1.5; color: var(--muted); }
.portal-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: max(40px, 2.8vw); align-items: center; width: 100%; }
.portal-copy { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.portal-copy .stitle { text-align: left; }
.portal-copy .sub { max-width: 44ch; }
.text-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: max(16px, 1.11vw); font-weight: 600; color: var(--soft-text); }
.pcard { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: max(22px, 1.53vw); border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.pcard-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.progress { display: flex; flex-direction: column; gap: 8px; }
.progress-label { display: flex; justify-content: space-between; font-size: max(13px, 0.9vw); font-weight: 600; color: var(--soft-text); }
.progress-bar { height: 6px; border-radius: 3px; background: var(--soft); overflow: hidden; }
.progress-bar span { display: block; width: 60%; height: 100%; background: var(--ink); border-radius: 3px; }
.task { display: flex; gap: 14px; align-items: flex-start; }
.task.waiting { padding: 14px; background: var(--soft); border-radius: 14px; }
.task.waiting .medallion { background: var(--surface); }
.task.done { align-items: center; }
.task-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.task-text strong { font-size: max(16px, 1.11vw); line-height: 1.3; font-weight: 600; }
.task-text > span { font-size: max(14px, 0.97vw); line-height: 1.43; color: var(--muted); }
.task-actions { display: flex; gap: 8px; padding-top: 6px; flex-wrap: wrap; }
.mini { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 9999px; background: var(--surface); border: 1px solid var(--border); font-size: 13px; font-weight: 600; color: var(--soft-text); }
.mini.ink { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.pfiles { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--border); font-size: max(13px, 0.9vw); color: var(--muted); }
.pfiles b { font-weight: 600; margin-right: 4px; }
.pfiles span { padding: 4px 10px; border-radius: 8px; background: var(--soft); color: var(--soft-text); font-weight: 500; }
/* Team */
.person { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: max(36px, 2.5vw); align-items: center; width: 100%; max-width: max(980px, 68vw); margin: 0 auto; }
.person-photo { width: max(260px, 18vw); height: max(260px, 18vw); border-radius: 32px; object-fit: cover; background: var(--soft); box-shadow: 0 0 0 1px var(--border); }
.person-text { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.person-name { font-size: max(30px, 2.2vw); line-height: 1.15; font-weight: 600; letter-spacing: -0.4px; }
.person-name span { display: block; margin-top: 6px; font-family: var(--font-brand); font-size: max(11px, 0.76vw); font-weight: 600; letter-spacing: 0.27em; text-transform: uppercase; color: var(--muted); }
.person-text .cd { font-size: max(17px, 1.18vw); line-height: 1.55; max-width: 52ch; }
.talk-solo { width: 100%; max-width: max(640px, 44.4vw); margin: 0 auto; }
@media (max-width: 960px) {
  .next-grid, .paths, .portal-grid { grid-template-columns: 1fr; }
  .vows { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px; }
}
@media (max-width: 760px) {
  .vows { grid-template-columns: 1fr; }
  .person { grid-template-columns: 1fr; justify-items: start; gap: 24px; }
  .person-photo { width: 168px; height: 168px; border-radius: 26px; }
}
.person .pearl-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; background: radial-gradient(circle at 36% 32%, #ffffff 0, #d9dde3 22%, #b4b4b4 50%, #6a6a6a 82%, #4a4a4a 100%); box-shadow: 0 1px 2px rgba(24, 27, 33, 0.25); }
/* Where to next: stronger cards */
.ncard { position: relative; gap: 12px; min-height: max(250px, 17.4vw); padding: max(26px, 1.8vw); border-radius: 22px; box-shadow: var(--sh-card); transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease; }
.ncard:hover { border-color: var(--border); transform: translateY(-3px); box-shadow: 0 18px 44px rgba(24, 27, 33, 0.10); }
.ntop { display: flex; align-items: center; justify-content: space-between; margin-bottom: max(10px, 0.7vw); }
.nicon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: var(--ink); background: radial-gradient(circle at 34% 28%, #ffffff 0, #eef1f5 30%, #d5d9df 70%, #b9bec6 100%); box-shadow: inset 0 0 0 1px rgba(24, 27, 33, 0.06), 0 2px 6px rgba(24, 27, 33, 0.10); }
.ngo { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border); color: var(--text); transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease; }
.ncard:hover .ngo { background: var(--ink); border-color: var(--ink); color: var(--on-ink); transform: translateX(2px); }
.ncard b { font-size: max(21px, 1.46vw); line-height: 1.25; letter-spacing: -0.2px; }
.ntags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: max(10px, 0.7vw); }
.ntags span { padding: 5px 11px; border-radius: 9999px; background: var(--soft); color: var(--soft-text); font-size: max(13px, 0.9vw); font-weight: 600; line-height: 1.3; }
.ncard:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .ncard, .ngo { transition: none; } .ncard:hover { transform: none; } .ncard:hover .ngo { transform: none; } }
@media (max-width: 760px) { .ncard { min-height: 0; } }
/* Company page, in the home page's language */
.co-hero { background: var(--surface); border-bottom: 1px solid var(--border); }
.co-hero-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: max(40px, 2.8vw) var(--gutter) max(64px, 4.4vw); }
.co-mark { width: min(560px, 88vw); height: max(320px, 23vw); object-fit: cover; object-position: 50% 50%; margin-bottom: 4px; -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 65%, transparent 100%); }
.co-hero h1 { margin: 0; font-family: var(--font-brand); font-size: clamp(30px, 3.2vw, 44px); line-height: 1.15; font-weight: 500; letter-spacing: 0.065em; text-transform: uppercase; color: var(--text); text-wrap: balance; max-width: 30ch; }
.co-hero .lede { margin: 0; font-family: var(--font-brand); font-size: max(12px, 0.9vw); line-height: 1.7; font-weight: 600; letter-spacing: 0.27em; text-transform: uppercase; color: var(--muted); max-width: 46ch; }
.co-hero .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding-top: 14px; }
.co-hero .btn-secondary { background: var(--soft); border-color: transparent; }
.co-who { background: var(--tour-bg); color: var(--tour-text); padding: max(88px, 6.1vw) 0; }
.co-who-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: max(40px, 3vw); align-items: center; width: 100%; }
.co-who-copy { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.co-who .slabel { color: var(--tour-muted); }
.co-who h2 { margin: 0; font-size: max(34px, 3vw); line-height: 1.12; font-weight: 500; letter-spacing: -0.02em; color: var(--tour-text); }
.co-body { margin: 0; font-size: max(17px, 1.2vw); line-height: 1.55; color: var(--tour-body); max-width: 46ch; }
.co-facts { list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.14); display: flex; flex-direction: column; gap: 10px; font-size: max(15px, 1.04vw); font-weight: 600; }
.co-facts li { display: flex; align-items: center; gap: 12px; }
.co-facts .pearl-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; background: radial-gradient(circle at 36% 32%, #ffffff 0, #d9dde3 22%, #b4b4b4 50%, #6a6a6a 82%, #4a4a4a 100%); }
.co-links { display: flex; gap: 20px; flex-wrap: wrap; font-size: max(15px, 1.04vw); font-weight: 600; }
.co-links a { color: var(--tour-text); }
.co-links span { color: var(--tour-muted); font-weight: 400; }
.co-sphere { display: grid; place-items: center; }
.co-sphere i { width: min(440px, 34vw); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 1.1px, transparent 1.6px) 0 0 / 11px 11px; -webkit-mask-image: radial-gradient(circle at 42% 40%, #000 0, rgba(0, 0, 0, 0.85) 40%, rgba(0, 0, 0, 0.25) 66%, transparent 71%); mask-image: radial-gradient(circle at 42% 40%, #000 0, rgba(0, 0, 0, 0.85) 40%, rgba(0, 0, 0, 0.25) 66%, transparent 71%); }
.ccards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: max(16px, 1.11vw); width: 100%; }
.ccard { display: flex; flex-direction: column; gap: max(12px, 0.833vw); min-width: 0; padding: max(22px, 1.528vw) max(22px, 1.528vw) max(18px, 1.25vw); background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--sh-card); }
.chead { display: flex; align-items: center; gap: 12px; }
.cicon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 10px; background: #0b0d11; color: #ffffff; }
.cpanel { position: relative; display: flex; flex-direction: column; gap: max(8px, 0.556vw); padding: max(36px, 2.5vw) max(14px, 0.972vw) max(14px, 0.972vw); border-radius: 12px; background: var(--soft); font-size: max(13px, 0.903vw); line-height: 1.385; }
.crow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; background: var(--surface); border-radius: 8px; }
.crow b { font-weight: 600; }
.crow i { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--on-ink); }
.co-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cnum { font-family: var(--font-brand); font-size: max(52px, 4vw); line-height: 1; font-weight: 500; letter-spacing: -0.01em; color: var(--text); }
.story { border-radius: 14px; }
.story .wtitle { font-size: max(22px, 1.528vw); line-height: 1.273; font-weight: 600; }
.story-dark .wkind { color: var(--tour-muted); }
@media (max-width: 960px) {
  .ccards, .co-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .co-who-grid { grid-template-columns: 1fr; }
  .co-sphere { order: -1; }
  .co-sphere i { width: min(280px, 70vw); }
}
@media (max-width: 560px) {
  .ccards, .co-steps { grid-template-columns: 1fr; }
  .co-hero .btn-pill .long { display: none; }
  .co-hero .btn-pill .short { display: inline; }
}
/* Company: Where to next, as a closing dark band */
.co-next { background: var(--tour-bg); color: var(--tour-text); padding: max(88px, 6.1vw) 0; }
.co-next-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: max(48px, 4vw); align-items: center; width: 100%; }
.co-next-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.co-next .slabel { color: var(--tour-muted); }
.co-next h2 { margin: 0; font-size: max(40px, 3.6vw); line-height: 1.05; font-weight: 500; letter-spacing: -0.02em; color: var(--tour-text); }
.co-next-copy p { margin: 0; max-width: 40ch; font-size: max(17px, 1.2vw); line-height: 1.55; color: var(--tour-body); }
.co-next-btn { margin-top: 8px; background: var(--on-ink); color: var(--ink); border: 0; }
.co-next-btn:hover { opacity: 1; background: var(--pearl); }
.nrows { display: flex; flex-direction: column; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.nrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: max(20px, 1.6vw); padding: max(24px, 1.8vw) max(8px, 0.6vw); border-bottom: 1px solid rgba(255, 255, 255, 0.14); color: var(--tour-text); transition: background-color 220ms ease, padding 220ms ease; }
.nrow:hover { opacity: 1; background: rgba(255, 255, 255, 0.04); padding-left: max(16px, 1.2vw); }
.nnum { font-family: var(--font-brand); font-size: max(13px, 0.9vw); font-weight: 600; letter-spacing: 0.2em; color: var(--tour-muted); }
.ntext { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nname { font-size: max(24px, 1.9vw); line-height: 1.2; font-weight: 600; letter-spacing: -0.3px; }
.ndesc { font-size: max(15px, 1.04vw); line-height: 1.45; color: var(--tour-body); }
.narrow { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.24); transition: background-color 220ms ease, color 220ms ease, transform 220ms ease; }
.nrow:hover .narrow { background: var(--on-ink); color: var(--ink); transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .nrow, .narrow { transition: none; } .nrow:hover { padding-left: max(8px, 0.6vw); } .nrow:hover .narrow { transform: none; } }
@media (max-width: 960px) { .co-next-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .narrow { width: 40px; height: 40px; } .co-next-btn .long { display: none; } .co-next-btn .short { display: inline; } }
/* Company: light opening (replaces the A-and-pearl hero) */
.co-open { background: var(--surface); border-bottom: 1px solid var(--border); padding: max(64px, 4.4vw) 0 max(72px, 5vw); }
.co-open-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: max(40px, 3vw); align-items: center; width: 100%; }
.co-open-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; min-width: 0; }
.co-open h1 { margin: 0; font-size: max(40px, 3.8vw); line-height: 1.05; font-weight: 500; letter-spacing: -0.025em; color: var(--text); }
.co-open .lede { margin: 0; font-family: var(--font-brand); font-size: max(12px, 0.9vw); line-height: 1.7; font-weight: 600; letter-spacing: 0.27em; text-transform: uppercase; color: var(--muted); }
.co-open .co-body { color: var(--muted); }
.co-open .co-facts { border-top-color: var(--border); color: var(--text); width: 100%; max-width: 46ch; }
.co-open .actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 6px; }
.co-open .btn-secondary { background: var(--soft); border-color: transparent; }
.co-open .co-links a { color: var(--text); }
.co-open .co-links span { color: var(--muted); }
.co-open .co-sphere i { background: radial-gradient(circle, rgba(24, 27, 33, 0.85) 0 1.1px, transparent 1.6px) 0 0 / 11px 11px; }
/* Company: values spotlight (Direction B) */
.co-values { background: var(--tour-bg); color: var(--tour-text); padding: max(88px, 6.1vw) 0; }
.co-values .shead { margin-bottom: max(40px, 2.8vw); }
.co-values .slabel { color: var(--tour-muted); }
.co-values .stitle { color: var(--tour-text); }
.co-values .sub { color: var(--tour-body); }
.vspot { display: grid; grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.6fr); gap: max(32px, 2.8vw); align-items: stretch; width: 100%; }
.vtabs { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.vtab { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 60px; padding: 16px 20px; border: 0; border-radius: 16px; background: transparent; color: var(--tour-muted); font: inherit; font-size: max(19px, 1.4vw); font-weight: 600; text-align: left; cursor: pointer; transition: background-color 200ms ease, color 200ms ease; }
.vtab:hover { color: var(--tour-text); }
.vtab i { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); transition: background 200ms ease, box-shadow 200ms ease; }
.vtab.on { background: rgba(255, 255, 255, 0.06); color: var(--tour-text); }
.vtab.on i { border: 0; background: radial-gradient(circle at 36% 32%, #fff 0, #d9dde3 30%, #a9adb3 100%); box-shadow: 0 0 14px rgba(231, 236, 244, 0.5); }
.vtab:focus-visible { outline: 2px solid var(--tour-text); outline-offset: 2px; }
.vpanels { display: grid; }
.vpanel { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 14px; padding: max(36px, 3vw); border-radius: 26px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)); border: 1px solid rgba(255, 255, 255, 0.10); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 320ms ease, transform 320ms ease, visibility 0s linear 320ms; }
.vpanel.on { opacity: 1; visibility: visible; transform: none; transition: opacity 320ms ease, transform 320ms ease, visibility 0s; }
.vbig { display: grid; place-items: center; width: 88px; height: 88px; margin-bottom: 8px; border-radius: 50%; color: var(--ink); background: radial-gradient(circle at 34% 28%, #ffffff 0, #eef1f5 30%, #d5d9df 70%, #b9bec6 100%); box-shadow: 0 0 60px rgba(231, 236, 244, 0.18); }
.vkind { font-family: var(--font-brand); font-size: 12px; font-weight: 600; letter-spacing: 0.27em; text-transform: uppercase; color: var(--tour-muted); }
.vpanel b { font-size: max(36px, 3.1vw); line-height: 1.08; font-weight: 500; letter-spacing: -0.02em; }
.vpanel p { margin: 0; max-width: 44ch; font-size: max(17px, 1.25vw); line-height: 1.55; color: var(--tour-body); }
.vproof { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.vproof span { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 9999px; background: rgba(255, 255, 255, 0.08); font-size: max(14px, 1vw); font-weight: 600; }
.vproof i { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: #ffffff; color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .vpanel, .vpanel.on { transition: none; transform: none; } }
@media (max-width: 960px) {
  .co-open-grid { grid-template-columns: 1fr; }
  .co-open .co-sphere { display: none; }
  .vspot { grid-template-columns: 1fr; }
  .vtabs { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .vtab { width: auto; min-height: 44px; padding: 10px 16px; border-radius: 9999px; font-size: 15px; background: rgba(255, 255, 255, 0.04); }
}
@media (max-width: 560px) { .co-open .btn-pill .long { display: none; } .co-open .btn-pill .short { display: inline; } }
/* How we work page */
.hsteps { list-style: none; margin: 0; padding: 0 0 0 28px; display: flex; flex-direction: column; gap: max(26px, 1.9vw); position: relative; }
.hsteps::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 1px; background: var(--border); }
.hsteps li { position: relative; display: flex; flex-direction: column; gap: 6px; padding: max(20px, 1.4vw) max(22px, 1.6vw); border-radius: 18px; background: var(--bg); }
.hsteps .pearl-dot { position: absolute; left: -28px; top: max(26px, 1.8vw); width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 36% 32%, #ffffff 0, #d9dde3 22%, #b4b4b4 50%, #6a6a6a 82%, #4a4a4a 100%); box-shadow: 0 1px 2px rgba(24, 27, 33, 0.25); }
.hsteps b { font-size: max(20px, 1.4vw); line-height: 1.3; font-weight: 600; }
.hsteps li > span:last-child { font-size: max(15px, 1.04vw); line-height: 1.5; color: var(--muted); }
.h-portal { background: var(--tour-bg); color: var(--tour-text); padding: max(88px, 6.1vw) 0; }
.h-portal .slabel { color: var(--tour-muted); }
.h-portal .portal-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.h-portal h2 { margin: 0; font-size: max(36px, 3.2vw); line-height: 1.08; font-weight: 500; letter-spacing: -0.02em; color: var(--tour-text); }
.hp-sub { margin: 0; max-width: 44ch; font-size: max(17px, 1.2vw); line-height: 1.55; color: var(--tour-body); }
.hp-list { list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.14); display: flex; flex-direction: column; gap: 12px; font-size: max(15px, 1.04vw); font-weight: 600; }
.hp-list li { display: flex; align-items: center; gap: 12px; }
.hp-list i { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: #ffffff; color: var(--ink); }
.hp-link { font-size: max(15px, 1.04vw); font-weight: 600; color: var(--tour-text); }
.h-portal .pcard { color: var(--text); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); }
.h-portal .pcard .slabel { color: var(--soft-text); }
.h-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: max(980px, 68vw); margin: 0 auto; }
@media (max-width: 960px) { .h-paths { grid-template-columns: 1fr; } }