@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400..700;1,400..700&family=Instrument+Serif:ital@1&display=swap");

/* EXIVIZ component styles. Framework-free: plain classes over tokens.css.
   Every value is a token. Two documented exceptions: breakpoint literals inside
   @container conditions (mirror bp-tablet 640px, bp-desktop 1024px, bp-wide 1440px)
   and the responsive type block, which mirrors the "Display, phone" type styles.
   Section components are inline-size containers, so they reflow by their own width.
   State classes (.is-hover, .is-focus, .is-active) mirror the pseudo-classes for the style guide. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-height) + var(--space-5)); interpolate-size: allow-keywords; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); color: var(--text-1); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, video { display: block; max-width: 100%; }
h1, h2, h3, h4, p, dl, dd, figure, blockquote, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
.eyebrow { text-transform: uppercase; }
.stat, .stat-phone { font-variant-numeric: tabular-nums; }
/* The accent: a few words of a large heading in Instrument Serif italic. Line height stays the heading's (all are px). */
.xv-accent { font-family: var(--font-accent); font-style: italic; font-weight: 400; font-size: calc(var(--accent-scale) * 1em); letter-spacing: -0.005em; }
.t-1 { color: var(--text-1); }
.t-2 { color: var(--text-2); }
.t-3 { color: var(--text-3); }
.t-error { color: var(--error); }
.xv-sr { position: absolute; width: var(--hairline); height: var(--hairline); padding: 0; margin: calc(-1 * var(--hairline)); overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.xv-skip { position: absolute; left: var(--space-4); top: var(--space-4); z-index: var(--z-tooltip); transform: translateY(-200%); }
.xv-skip:focus-visible { transform: none; }

/* Responsive type: mirrors the "Display, phone" styles in tokens.json */
@container (max-width: 639.98px) {
  .display-xl { font-size: 46px; line-height: 48px; letter-spacing: -0.03em; }
  .display-l { font-size: 38px; line-height: 42px; letter-spacing: -0.025em; }
  .heading-1 { font-size: 32px; line-height: 38px; letter-spacing: -0.02em; }
  .heading-2 { font-size: 26px; line-height: 32px; letter-spacing: -0.015em; }
  .heading-3 { font-size: 21px; line-height: 28px; letter-spacing: -0.01em; }
  .stat { font-size: 40px; line-height: 44px; letter-spacing: -0.03em; }
  .quote { font-size: 30px; line-height: 36px; }
}
@container (min-width: 640px) and (max-width: 1023.98px) {
  .display-xl { font-size: 64px; line-height: 68px; letter-spacing: -0.03em; }
}

/* ---------- Layout ---------- */
.xv-section { container-type: inline-size; position: relative; }
.xv-wrap { --gutter: var(--gutter-desktop); width: 100%; max-width: calc(var(--content-max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.xv-pad { padding-block: var(--space-10); }
/* Stacked sections share their padding: one section's worth of space between two, never two */
.xv-section + .xv-section > .xv-pad { padding-top: 0; }
/* A plain section that opens a page (no hero) clears the fixed nav, like CaseStudyIntro */
main > .xv-section:first-child > .xv-pad { padding-top: calc(var(--nav-height) + var(--space-9)); }
.xv-cols { display: grid; grid-template-columns: repeat(var(--grid-columns-desktop), minmax(0, 1fr)); column-gap: var(--space-5); }
@container (min-width: 1440px) { .xv-wrap { --gutter: var(--gutter-wide); } }
@container (min-width: 640px) and (max-width: 1023.98px) {
  .xv-wrap { --gutter: var(--gutter-tablet); }
  .xv-pad { padding-block: var(--space-9); }
  .xv-cols { grid-template-columns: repeat(var(--grid-columns-tablet), minmax(0, 1fr)); }
}
@container (max-width: 1023.98px) {
  main > .xv-section:first-child > .xv-pad { padding-top: calc(var(--nav-height-phone) + var(--space-8)); }
}
@container (max-width: 639.98px) {
  .xv-wrap { --gutter: var(--gutter-phone); }
  .xv-pad { padding-block: var(--space-8); }
  .xv-cols { grid-template-columns: repeat(var(--grid-columns-phone), minmax(0, 1fr)); column-gap: var(--space-4); }
}

/* Eyebrow: the small uppercase label above a section heading */
.xv-eyebrow { display: inline-flex; align-items: center; color: var(--text-2); }

/* Media slot: sets the ratio, crops with an author focal point (--focus-x, --focus-y) */
.xv-media { position: relative; overflow: hidden; background: var(--surface-2); aspect-ratio: var(--ratio, var(--aspect-still)); }
.xv-media > img, .xv-media > video { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus-x, 50%) var(--focus-y, 50%); }
.xv-media.is-empty { display: grid; place-items: center; }
.xv-media__empty { display: grid; justify-items: center; gap: var(--space-2); color: var(--text-3); }

/* Icons: Lucide geometry, 24 grid, currentColor */
.xv-icon { flex: none; width: var(--icon-md); height: var(--icon-md); fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
.xv-icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
.xv-icon--lg { width: var(--icon-lg); height: var(--icon-lg); }
.xv-icon--fill { fill: currentColor; stroke: none; }
.xv-spin { animation: xv-spin var(--duration-cinematic) linear infinite; }
@keyframes xv-spin { to { transform: rotate(360deg); } }
@keyframes xv-pulse { 50% { opacity: 0.35; } }

/* Glass: the site's material for anything that floats over imagery or scrolling content.
   xv-glass (80%) holds text-1 and text-2; xv-glass--thin (64%) holds text-1 only. */
.xv-glass { background: var(--glass-fill); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); border: var(--hairline) solid var(--glass-line); border-radius: var(--radius-box); box-shadow: var(--shadow-glass); }
.xv-glass--thin { background: var(--glass-fill-thin); }
.xv-glass .xv-icon-btn:hover, .xv-glass .xv-icon-btn.is-hover { background: var(--glass-hover); }

/* ---------- Button ---------- */
.xv-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--control-height); padding: 0 var(--space-5); border: var(--hairline) solid transparent; border-radius: var(--radius-control); background: transparent; color: var(--text-1); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.xv-btn:focus-visible, .xv-btn.is-focus { outline: none; box-shadow: var(--focus-ring); }
.xv-btn .xv-icon { transition: transform var(--duration-base) var(--ease-out); }
.xv-btn:hover .xv-icon--nudge, .xv-btn.is-hover .xv-icon--nudge { transform: translateX(var(--space-1)); }
.xv-btn--primary { background: var(--brand); color: var(--on-brand); }
.xv-btn--primary:hover, .xv-btn--primary.is-hover { background: var(--brand-hover); }
.xv-btn--primary:active, .xv-btn--primary.is-active { background: var(--brand-active); }
.xv-btn--secondary { border-color: var(--line-strong); }
.xv-btn--secondary:hover, .xv-btn--secondary.is-hover { border-color: var(--text-2); background: var(--surface-2); }
.xv-btn--secondary:active, .xv-btn--secondary.is-active { background: var(--surface-3); }
.xv-btn--ghost { padding-inline: var(--space-4); }
.xv-btn--ghost:hover, .xv-btn--ghost.is-hover { background: var(--surface-3); }
.xv-btn--ghost:active, .xv-btn--ghost.is-active { background: var(--surface-2); }
/* Glass button: for any button that sits on imagery. Like every control it is a capsule. */
.xv-btn--glass { border-color: transparent; border-radius: var(--radius-control); background: var(--glass-fill-thin); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); box-shadow: var(--shadow-glass-control); color: var(--text-1); transition: background-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
.xv-btn--glass:hover, .xv-btn--glass.is-hover { background: var(--glass-fill); }
.xv-btn--glass:active, .xv-btn--glass.is-active { transform: scale(var(--press-scale)); }
.xv-btn--glass:focus-visible, .xv-btn--glass.is-focus { box-shadow: var(--focus-ring), var(--shadow-glass-control); }
.xv-btn--glass:disabled, .xv-btn--glass.is-disabled { background: var(--glass-fill-thin); border-color: transparent; color: var(--text-disabled); }
/* Liquid refraction, switched on per element by EXIVIZ.liquidGlass.init() in Chromium */
[data-liquid="on"] { -webkit-backdrop-filter: var(--liquid-filter); backdrop-filter: var(--liquid-filter); }
.xv-btn--sm { height: var(--control-height-sm); padding-inline: var(--space-4); }
.xv-btn--block { width: 100%; }
.xv-btn:disabled, .xv-btn[aria-disabled="true"], .xv-btn.is-disabled { cursor: not-allowed; color: var(--text-disabled); background: transparent; border-color: var(--line); }
.xv-btn--primary:disabled, .xv-btn--primary[aria-disabled="true"], .xv-btn--primary.is-disabled { background: var(--surface-3); border-color: transparent; }
.xv-btn--ghost:disabled, .xv-btn--ghost.is-disabled { border-color: transparent; }
.xv-btn.is-loading, .xv-btn[aria-busy="true"] { cursor: progress; pointer-events: none; }

.xv-link { color: var(--brand); text-decoration: underline; text-decoration-thickness: var(--hairline); text-underline-offset: var(--space-1); transition: color var(--duration-fast) var(--ease-standard); border-radius: var(--radius-mark); }
.xv-link:hover, .xv-link.is-hover { color: var(--brand-hover); }
.xv-link:focus-visible, .xv-link.is-focus { outline: none; box-shadow: var(--focus-ring); }
.xv-link--arrow { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; }
.xv-link--arrow .xv-icon { transition: transform var(--duration-base) var(--ease-out); }
.xv-link--arrow:hover .xv-icon, .xv-link--arrow.is-hover .xv-icon { transform: translateX(var(--space-1)); }
.xv-link--quiet { color: var(--text-2); text-decoration: none; }
.xv-link--quiet:hover, .xv-link--quiet.is-hover { color: var(--text-1); }

.xv-icon-btn { display: inline-grid; place-items: center; width: var(--control-height); height: var(--control-height); padding: 0; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--text-1); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard); }
.xv-icon-btn:hover, .xv-icon-btn.is-hover { background: var(--surface-3); }
.xv-icon-btn:focus-visible, .xv-icon-btn.is-focus { outline: none; box-shadow: var(--focus-ring); }
.xv-icon-btn--round { border-radius: var(--radius-control); background: var(--glass-fill-thin); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); box-shadow: var(--shadow-glass-control); transition: background-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
.xv-icon-btn--round:active, .xv-icon-btn--round.is-active { transform: scale(var(--press-scale)); }
.xv-icon-btn--round:focus-visible, .xv-icon-btn--round.is-focus { box-shadow: var(--focus-ring), var(--shadow-glass-control); }
.xv-icon-btn--round:hover, .xv-icon-btn--round.is-hover { background: var(--glass-fill); }
.xv-icon-btn:disabled { color: var(--text-disabled); cursor: not-allowed; background: transparent; }

/* ---------- Tag ---------- */
.xv-tag { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-2); }
.xv-tag--chip { height: var(--control-height-sm); padding: 0 var(--space-3); text-decoration: none; border: var(--hairline) solid var(--line-strong); border-radius: var(--radius-control); background: transparent; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.xv-tag--chip:hover, .xv-tag--chip.is-hover { background: var(--surface-3); color: var(--text-1); }
.xv-tag--chip[aria-pressed="true"], .xv-tag--chip[aria-current="page"], .xv-tag--chip.is-selected, .xv-choice input:checked + .xv-tag--chip { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.xv-tag--chip:focus-visible, .xv-tag--chip.is-focus, .xv-choice input:focus-visible + .xv-tag--chip { outline: none; box-shadow: var(--focus-ring); }
.xv-tag--chip:disabled, .xv-tag--chip.is-disabled { cursor: not-allowed; color: var(--text-disabled); border-color: var(--line); background: transparent; }
.xv-choice { position: relative; display: inline-flex; }
.xv-choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.xv-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.xv-tag + .xv-tag:not(.xv-tag--chip)::before { content: "·"; color: var(--text-3); margin-right: var(--space-2); }

/* ---------- Badge ---------- */
.xv-badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border: var(--hairline) solid var(--line); border-radius: var(--radius-control); background: var(--bg); color: var(--text-1); white-space: nowrap; }
.xv-badge__dot { width: var(--space-2); height: var(--space-2); border-radius: var(--radius-control); background: var(--text-3); }
.xv-badge--live .xv-badge__dot { background: var(--success); animation: xv-pulse calc(2 * var(--duration-cinematic)) var(--ease-standard) infinite; }
.xv-badge--starting .xv-badge__dot { background: var(--brand); animation: xv-pulse var(--duration-cinematic) var(--ease-standard) infinite; }
.xv-badge--busy .xv-badge__dot { background: var(--caution); }
.xv-badge--offline .xv-badge__dot { background: transparent; border: var(--bar-thickness) solid var(--text-3); }
.xv-badge--error .xv-badge__dot { background: var(--error); }
.xv-badge--new { background: var(--brand-soft); border-color: transparent; color: var(--brand); }

/* ---------- Divider ---------- */
.xv-divider { height: var(--hairline); margin: 0; border: 0; background: var(--line-subtle); }
.xv-divider--labeled { display: flex; align-items: center; gap: var(--space-4); height: auto; background: none; color: var(--text-3); }
.xv-divider--labeled::after { content: ""; flex: 1; height: var(--hairline); background: var(--line-subtle); }

/* ---------- Pagination ---------- */
.xv-pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-2); }
.xv-pagination__list { display: flex; gap: var(--space-1); }
.xv-page { display: inline-grid; place-items: center; min-width: var(--control-height-sm); height: var(--control-height-sm); padding: 0 var(--space-3); border: var(--hairline) solid transparent; border-radius: var(--radius-control); color: var(--text-2); text-decoration: none; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.xv-page:hover, .xv-page.is-hover { background: var(--surface-3); color: var(--text-1); }
.xv-page:focus-visible, .xv-page.is-focus { outline: none; box-shadow: var(--focus-ring); }
.xv-page[aria-current="page"] { border-color: var(--line-strong); color: var(--text-1); }
.xv-page--step { display: inline-flex; gap: var(--space-2); }
.xv-page[aria-disabled="true"] { color: var(--text-disabled); pointer-events: none; }
.xv-page--gap { pointer-events: none; color: var(--text-3); }

/* ---------- Tooltip ---------- */
.xv-tip { position: relative; display: inline-flex; }
.xv-tip__bubble { position: absolute; left: 50%; bottom: calc(100% + var(--space-2)); z-index: var(--z-tooltip); padding: var(--space-2) var(--space-3); border: var(--hairline) solid var(--glass-line); border-radius: var(--radius-control); background: var(--glass-fill); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); color: var(--text-1); box-shadow: var(--shadow-glass); white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, var(--space-1)); transition: opacity var(--duration-base) var(--ease-in), transform var(--duration-base) var(--ease-in); }
.xv-tip:hover .xv-tip__bubble, .xv-tip:focus-within .xv-tip__bubble, .xv-tip.is-open .xv-tip__bubble { opacity: 1; transform: translate(-50%, 0); transition-timing-function: var(--ease-out); transition-delay: var(--duration-slow); }
.xv-tip.is-open .xv-tip__bubble { transition-delay: 0ms; }
.xv-tip--below .xv-tip__bubble { bottom: auto; top: calc(100% + var(--space-2)); }

/* ---------- Navigation: a floating glass bar with hover menus ---------- */
.xv-nav { container-type: inline-size; position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav); padding-top: var(--space-3); }
.xv-nav--inline { position: relative; }
.xv-nav > .xv-wrap { position: relative; }
.xv-nav__bar { display: flex; align-items: center; gap: var(--space-5); max-width: var(--nav-max); margin-inline: auto; height: calc(var(--control-height-sm) + 2 * var(--space-2)); padding: 0 var(--space-2) 0 var(--space-4); transition: background-color var(--duration-base) var(--ease-standard); }
.xv-nav__bar.xv-glass { border-radius: var(--radius-control); }
.xv-nav.is-scrolled .xv-nav__bar, .xv-nav.is-menu .xv-nav__bar { background: var(--glass-fill); }
.xv-nav__brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--text-1); text-decoration: none; border-radius: var(--radius-mark); }
.xv-nav__brand:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.xv-nav__mark { height: var(--space-6); width: auto; }
/* Titles: buttons that open a panel. They never navigate; only the links inside a panel do. */
.xv-nav__menu { position: relative; margin-inline: auto; }
.xv-nav__triggers { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--space-1); }
.xv-nav__trigger { position: relative; display: inline-flex; align-items: center; gap: var(--space-1); height: var(--control-height-sm); padding: 0 var(--space-3) 0 var(--space-4); border: 0; border-radius: var(--radius-control); background: transparent; color: var(--text-1); cursor: default; }
.xv-nav__trigger:focus-visible, .xv-nav__trigger.is-focus { outline: none; box-shadow: var(--focus-ring); }
.xv-nav__chev { transition: transform var(--duration-base) var(--ease-standard); }
.xv-nav__trigger[aria-expanded="true"] .xv-nav__chev { transform: rotate(180deg); }
/* One highlight slides between the titles: it follows hover and focus, and stays on the open title */
.xv-nav__indicator { position: absolute; left: 0; top: 50%; z-index: 0; width: var(--ind-w, 0px); height: var(--control-height-sm); border-radius: var(--radius-control); background: var(--glass-hover); opacity: 0; transform: translate(var(--ind-x, 0px), -50%); transition: transform var(--duration-base) var(--ease-standard), width var(--duration-base) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard); pointer-events: none; }
.xv-nav__indicator.is-on { opacity: 1; }
.xv-nav__indicator.is-instant { transition: opacity var(--duration-fast) var(--ease-standard); }
/* The panel: one glass viewport under the bar. It resizes to the open menu, centres on its title,
   and swaps its content sideways in the direction the pointer moved. */
.xv-nav__viewport { position: absolute; left: 0; top: calc(100% + var(--space-2)); width: var(--vp-w, 0px); height: var(--vp-h, 0px); overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(var(--vp-x, 0px)) scale(var(--vp-s, 0.96)); transform-origin: top center; transition: opacity var(--duration-base) var(--ease-in), transform var(--duration-base) var(--ease-in), width var(--duration-base) var(--ease-out), height var(--duration-base) var(--ease-out), visibility 0s linear var(--duration-base); }
.xv-nav.is-menu .xv-nav__viewport { --vp-s: 1; opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), width var(--duration-base) var(--ease-out), height var(--duration-base) var(--ease-out), visibility 0s; }
.xv-nav__viewport.is-instant { transition: opacity var(--duration-base) var(--ease-out), visibility 0s; }
.xv-nav__panel { position: absolute; left: 0; top: 0; width: max-content; padding: var(--space-2); visibility: hidden; }
.xv-nav__panel.is-active, .xv-nav__panel.is-leaving { visibility: visible; }
.xv-nav__panel[data-motion="from-end"] { animation: xv-panel-from-end var(--duration-base) var(--ease-out) both; }
.xv-nav__panel[data-motion="from-start"] { animation: xv-panel-from-start var(--duration-base) var(--ease-out) both; }
.xv-nav__panel[data-motion="to-start"] { animation: xv-panel-to-start var(--duration-base) var(--ease-out) both; }
.xv-nav__panel[data-motion="to-end"] { animation: xv-panel-to-end var(--duration-base) var(--ease-out) both; }
@keyframes xv-panel-from-end { from { opacity: 0; transform: translateX(var(--space-8)); } }
@keyframes xv-panel-from-start { from { opacity: 0; transform: translateX(calc(-1 * var(--space-8))); } }
@keyframes xv-panel-to-start { to { opacity: 0; transform: translateX(calc(-1 * var(--space-8))); } }
@keyframes xv-panel-to-end { to { opacity: 0; transform: translateX(var(--space-8)); } }
.xv-nav__items { display: grid; grid-template-columns: repeat(var(--nav-cols, 1), var(--nav-column)); gap: var(--space-1); }
.xv-nav__panel--2 { --nav-cols: 2; }
/* A panel item holds two lines of content, so it takes radius-box, like a card */
.xv-nav__item { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4); border-radius: var(--radius-box); color: var(--text-1); text-decoration: none; transition: background-color var(--duration-fast) var(--ease-standard); }
.xv-nav__item:hover, .xv-nav__item.is-hover { background: var(--glass-hover); }
.xv-nav__item:focus-visible, .xv-nav__item.is-focus { outline: none; box-shadow: var(--focus-ring); }
.xv-nav__item-title { display: flex; align-items: center; gap: var(--space-2); }
.xv-nav__item-title .xv-icon { color: var(--text-3); transition: transform var(--duration-base) var(--ease-out), color var(--duration-fast) var(--ease-standard); }
.xv-nav__item:hover .xv-nav__item-title .xv-icon, .xv-nav__item.is-hover .xv-nav__item-title .xv-icon, .xv-nav__item:focus-visible .xv-nav__item-title .xv-icon { color: var(--brand); transform: translateX(var(--space-1)); }
.xv-nav__item-text { color: var(--text-2); }
.xv-nav__item[aria-current="page"] .xv-nav__item-title { color: var(--brand); }
.xv-nav__cta { flex: none; }
.xv-nav__toggle { display: none; }
.xv-nav__toggle:hover, .xv-nav__toggle.is-hover { background: var(--glass-hover); }
.xv-nav__sheet { display: none; }
@container (max-width: 1023.98px) {
  .xv-nav__bar { gap: var(--space-3); }
  .xv-nav__menu, .xv-nav__viewport { display: none; }
  .xv-nav__cta { margin-left: auto; }
  .xv-nav__toggle { display: inline-grid; width: var(--control-height-sm); height: var(--control-height-sm); }
  .xv-nav.is-open .xv-nav__bar { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .xv-nav.is-open .xv-nav__sheet { display: flex; flex: 1; min-height: 0; flex-direction: column; justify-content: space-between; gap: var(--space-7); padding-block: var(--space-6); overflow-y: auto; }
  .xv-nav.is-open .xv-nav__cta { visibility: hidden; }
}
@container (max-width: 639.98px) { .xv-nav__name { display: none; } }
/* Open (only reachable below 1024px, where the toggle shows): a full-screen glass sheet. On the nav itself, so outside its own container query. */
.xv-nav.is-open { position: fixed; inset: 0; z-index: var(--z-overlay); display: flex; flex-direction: column; background: var(--glass-fill); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); }
.xv-nav--inline.is-open { position: relative; }
/* The sheet lists the three menus as groups: eyebrow title, then its links */
.xv-nav__groups { display: grid; gap: var(--space-6); }
.xv-nav__group { display: grid; gap: var(--space-1); }
.xv-nav__group-title { color: var(--text-3); margin-bottom: var(--space-1); }
.xv-nav__sheet-link { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-2); color: var(--text-1); text-decoration: none; border-bottom: var(--hairline) solid var(--line-subtle); border-radius: var(--radius-mark); }
.xv-nav__sheet-link .xv-icon { color: var(--text-3); }
.xv-nav__sheet-link[aria-current="page"] { color: var(--brand); }
.xv-nav__sheet-link:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.xv-nav__sheet-foot { display: grid; gap: var(--space-5); }

/* ---------- Footer ---------- */
.xv-footer { container-type: inline-size; background: var(--bg); border-top: var(--hairline) solid var(--line-subtle); }
.xv-footer__top { display: grid; grid-template-columns: repeat(var(--grid-columns-desktop), minmax(0, 1fr)); column-gap: var(--space-5); row-gap: var(--space-7); padding-block: var(--space-9) var(--space-8); }
.xv-footer__brand { grid-column: span 4; display: grid; gap: var(--space-5); align-content: start; }
.xv-footer__lockup { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--text-1); }
.xv-footer__mark { height: var(--space-7); width: auto; }
.xv-footer__col { grid-column: span 2; display: grid; gap: var(--space-3); align-content: start; }
.xv-footer__col:first-of-type { grid-column: 5 / span 2; }
.xv-footer__col .eyebrow { color: var(--text-3); margin-bottom: var(--space-2); }
.xv-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-5); border-top: var(--hairline) solid var(--line-subtle); color: var(--text-3); }
.xv-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-5); }
@container (max-width: 1023.98px) {
  .xv-footer__top { grid-template-columns: repeat(var(--grid-columns-tablet), minmax(0, 1fr)); }
  .xv-footer__brand { grid-column: 1 / -1; }
  .xv-footer__col, .xv-footer__col:first-of-type { grid-column: span 2; }
}
@container (max-width: 639.98px) {
  .xv-footer__top { grid-template-columns: repeat(var(--grid-columns-phone), minmax(0, 1fr)); padding-block: var(--space-8) var(--space-7); }
  .xv-footer__col, .xv-footer__col:first-of-type { grid-column: span 2; }
}

/* ---------- Hero ---------- */
.xv-hero { container-type: inline-size; position: relative; isolation: isolate; display: flex; min-height: 100svh; background: var(--surface-2); overflow: hidden; }
.xv-hero--cinema { min-height: 0; aspect-ratio: var(--aspect-cinema); }
.xv-hero__media { position: absolute; inset: 0; z-index: -1; }
.xv-hero__media > img, .xv-hero__media > video { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus-x, 50%) var(--focus-y, 50%); animation: xv-fade var(--duration-cinematic) var(--ease-out) both; }
.xv-hero__media::after { content: ""; position: absolute; inset: 0; background-image: var(--scrim-bottom); }
.xv-hero--left .xv-hero__media::after { background-image: var(--scrim-left); }
.xv-hero--left .xv-hero__text { max-width: var(--media-text-max); }
.xv-hero__content { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-7); padding-block: calc(var(--nav-height) + var(--space-8)) var(--space-9); }
.xv-hero__text { display: grid; gap: var(--space-5); min-width: 0; }
.xv-hero__title { max-width: var(--measure-headline); text-wrap: balance; }
.xv-hero__lead { max-width: var(--measure-lead); color: var(--text-1); }
.xv-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }
.xv-hero--embed, .xv-hero--page { display: block; min-height: 0; background: var(--bg); }
.xv-hero--embed .xv-hero__content, .xv-hero--page .xv-hero__content { padding-block: calc(var(--nav-height) + var(--space-9)) var(--space-7); align-items: flex-start; }
.xv-hero--embed .xv-hero__lead, .xv-hero--page .xv-hero__lead { color: var(--text-2); }
/* Page head: the hero of inner pages (services, showcase, studio). Text on bg, no media. */
.xv-hero--page .xv-hero__title { max-width: var(--media-wide-max); }
.xv-hero__embed { padding-bottom: var(--space-10); }
@keyframes xv-fade { from { opacity: 0; } }
@container (max-width: 1023.98px) {
  .xv-hero__content { flex-direction: column; align-items: flex-start; justify-content: flex-end; }
  .xv-hero--left .xv-hero__media::after { background-image: var(--scrim-bottom); }
  .xv-hero--left .xv-hero__text { max-width: none; }
  .xv-hero--embed .xv-hero__content, .xv-hero--page .xv-hero__content { padding-block: calc(var(--nav-height-phone) + var(--space-8)) var(--space-6); }
}
@container (max-width: 639.98px) {
  .xv-hero__media::after, .xv-hero--left .xv-hero__media::after { background-image: var(--scrim-bottom-phone); }
  .xv-hero--cinema { aspect-ratio: var(--aspect-portrait); }
  .xv-hero__content { padding-block: calc(var(--nav-height-phone) + var(--space-7)) var(--space-7); gap: var(--space-5); }
  .xv-hero__text { gap: var(--space-4); }
  .xv-hero__actions .xv-btn { flex: 1 1 100%; }
  .xv-hero__embed { padding-bottom: var(--space-8); }
}

/* ---------- Project card + portfolio grid ---------- */
.xv-card { display: grid; gap: var(--space-4); color: var(--text-1); text-decoration: none; border-radius: var(--radius-box); }
.xv-card:focus-visible, .xv-card.is-focus { outline: none; box-shadow: var(--focus-ring); }
.xv-card__media { border-radius: var(--radius-box); }
.xv-card__media > img { transition: transform var(--duration-slow) var(--ease-out); }
.xv-card:hover .xv-card__media > img, .xv-card.is-hover .xv-card__media > img { transform: scale(var(--media-zoom)); }
.xv-card__body { display: grid; gap: var(--space-2); }
.xv-card__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.xv-card__row .xv-badge { margin-block: calc(-1 * var(--space-1)); }
.xv-card__title { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.xv-card__title-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.xv-card__title .xv-icon { margin-top: var(--space-1); color: var(--text-3); transition: transform var(--duration-base) var(--ease-out), color var(--duration-fast) var(--ease-standard); }
.xv-card:hover .xv-card__title .xv-icon, .xv-card.is-hover .xv-card__title .xv-icon { color: var(--brand); transform: translate(var(--space-1), calc(-1 * var(--space-1))); }
.xv-card__meta { color: var(--text-3); }
.xv-card.is-loading .xv-card__media { animation: xv-pulse var(--duration-cinematic) var(--ease-standard) infinite; }
.xv-card.is-loading .xv-card__line { height: var(--space-4); border-radius: var(--radius-mark); background: var(--surface-2); }

.xv-grid__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-7); }
.xv-grid__intro { display: grid; gap: var(--space-3); }
.xv-grid__chips { margin-bottom: var(--space-7); }
.xv-grid__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-5); }
.xv-grid__items--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.xv-grid__items--feature > :first-child { grid-column: 1 / -1; }
.xv-grid__items--feature > :first-child .xv-card__media { --ratio: var(--aspect-wide); }
@container (max-width: 1023.98px) { .xv-grid__items--three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 639.98px) {
  .xv-grid__items, .xv-grid__items--three { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
  .xv-grid__items--feature > :first-child .xv-card__media { --ratio: var(--aspect-still); }
}

/* ---------- Case study ---------- */
.xv-cs-intro__head { display: grid; grid-template-columns: repeat(var(--grid-columns-desktop), minmax(0, 1fr)); column-gap: var(--space-5); row-gap: var(--space-7); padding-block: calc(var(--nav-height) + var(--space-9)) var(--space-8); }
.xv-cs-intro__text { grid-column: 1 / span 8; display: grid; gap: var(--space-5); align-content: start; }
.xv-cs-intro__summary { color: var(--text-2); max-width: var(--prose-max); }
.xv-facts { grid-column: 10 / span 3; display: grid; gap: var(--space-5); align-content: start; }
.xv-facts__item { display: grid; gap: var(--space-1); padding-top: var(--space-3); border-top: var(--hairline) solid var(--line-subtle); }
.xv-facts dt { color: var(--text-3); }
.xv-cs-intro__media { --ratio: var(--aspect-cinema); border-radius: var(--radius-none); }
@container (max-width: 1023.98px) {
  .xv-cs-intro__head { grid-template-columns: minmax(0, 1fr); padding-block: calc(var(--nav-height-phone) + var(--space-8)) var(--space-7); }
  .xv-cs-intro__text, .xv-facts { grid-column: 1 / -1; }
  .xv-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xv-cs-intro__media { --ratio: var(--aspect-wide); }
}

.xv-block__grid { row-gap: var(--space-5); }
.xv-block__label { grid-column: 1 / span 3; align-self: start; padding-top: var(--space-3); }
.xv-block__body { grid-column: 5 / span 7; display: grid; gap: var(--space-5); }
.xv-block__body p { color: var(--text-2); max-width: var(--prose-max); }
@container (max-width: 1023.98px) {
  .xv-block__label, .xv-block__body { grid-column: 1 / -1; }
  .xv-block__label { padding-top: 0; }
}

.xv-stats__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); margin-top: var(--space-7); }
.xv-stats__item { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--space-3); padding-top: var(--space-5); border-top: var(--hairline) solid var(--line); }
.xv-stats__item dt { color: var(--text-2); max-width: var(--measure-label); }
.xv-stats__item dd { color: var(--text-1); }
.xv-stats__quote { display: grid; gap: var(--space-4); max-width: var(--media-wide-max); margin-top: var(--space-9); }
.xv-stats__quote figcaption { color: var(--text-3); }
.xv-eyebrow + .xv-stats__quote { margin-top: var(--space-5); }
@container (max-width: 1023.98px) { .xv-stats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 639.98px) { .xv-stats__list { grid-template-columns: minmax(0, 1fr); } .xv-stats__quote { margin-top: var(--space-8); } }

.xv-credits__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-5); margin-top: var(--space-6); }
.xv-credits__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-4); padding-block: var(--space-4); border-top: var(--hairline) solid var(--line-subtle); }
.xv-credits__row dt { color: var(--text-3); padding-top: var(--space-1); }
@container (max-width: 639.98px) { .xv-credits__list { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Figure, gallery, lightbox ---------- */
.xv-figure { display: grid; gap: var(--space-3); width: 100%; max-width: var(--prose-max); margin-inline: auto; }
.xv-figure--wide { max-width: var(--media-wide-max); }
.xv-figure--full { max-width: none; }
.xv-figure .xv-media { border-radius: var(--radius-box); }
.xv-figure--full .xv-media { border-radius: var(--radius-none); }
.xv-figure__caption { color: var(--text-3); max-width: var(--prose-max); }
.xv-figure--full .xv-figure__caption { padding-inline: var(--gutter-desktop); }
@container (max-width: 639.98px) { .xv-figure--full .xv-figure__caption { padding-inline: var(--gutter-phone); } }

.xv-gallery__items { display: grid; gap: var(--space-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.xv-gallery__items--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.xv-gallery__items--mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; }
.xv-gallery__items--mosaic > :first-child { grid-column: span 2; grid-row: span 2; }
.xv-gallery__items--mosaic > :first-child .xv-media { height: 100%; aspect-ratio: auto; }
.xv-gallery__item { display: block; padding: 0; border: 0; background: none; border-radius: var(--radius-box); cursor: zoom-in; }
.xv-gallery__item .xv-media { border-radius: var(--radius-box); }
.xv-gallery__item .xv-media > img { transition: transform var(--duration-slow) var(--ease-out); }
.xv-gallery__item:hover .xv-media > img, .xv-gallery__item.is-hover .xv-media > img { transform: scale(var(--media-zoom)); }
.xv-gallery__item:focus-visible, .xv-gallery__item.is-focus { outline: none; box-shadow: var(--focus-ring); }
@container (max-width: 639.98px) {
  .xv-gallery__items, .xv-gallery__items--three, .xv-gallery__items--mosaic { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .xv-gallery__items--mosaic > :first-child { grid-column: auto; grid-row: auto; }
  .xv-gallery__items--mosaic > :first-child .xv-media { aspect-ratio: var(--ratio, var(--aspect-still)); }
}
.xv-lightbox { position: fixed; inset: 0; z-index: var(--z-overlay); display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-4); padding: var(--space-5); background: var(--glass-fill); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); }
.xv-lightbox--inline { position: relative; }
.xv-lightbox__bar { display: flex; align-items: center; justify-content: space-between; color: var(--text-2); }
.xv-lightbox__stage { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); }
.xv-lightbox__img { border-radius: var(--radius-box); box-shadow: var(--shadow-overlay); overflow: hidden; }
.xv-lightbox__caption { color: var(--text-2); text-align: center; }

/* ---------- Video ---------- */
.xv-video { position: relative; --ratio: var(--aspect-wide); border-radius: var(--radius-box); }
.xv-video__veil { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: var(--space-4); padding: var(--space-5); text-align: center; }
.xv-video.is-error .xv-video__veil, .xv-video.is-loading .xv-video__veil { background: var(--overlay); }
.xv-video__play { width: calc(1.5 * var(--control-height)); height: calc(1.5 * var(--control-height)); }
.xv-video__play .xv-icon { width: var(--icon-lg); height: var(--icon-lg); }
.xv-video__duration { position: absolute; left: var(--space-4); bottom: var(--space-4); padding: var(--space-1) var(--space-2); color: var(--text-1); }
.xv-video__duration.xv-glass { border-radius: var(--radius-control); }
.xv-video__controls { position: absolute; left: var(--space-3); right: var(--space-3); bottom: var(--space-3); display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1); color: var(--text-1); border-radius: var(--radius-control); }
.xv-video__track { position: relative; flex: 1; height: var(--bar-thickness); border-radius: var(--radius-control); background: var(--line-strong); }
.xv-video__progress { position: absolute; inset: 0 auto 0 0; width: var(--progress, 0%); border-radius: inherit; background: var(--brand); }
.xv-video__time { color: var(--text-1); font-variant-numeric: tabular-nums; }

/* ---------- Demo embed: the live platform inside the site ---------- */
.xv-demo { container-type: inline-size; display: grid; gap: var(--space-3); }
.xv-demo__frame { position: relative; overflow: hidden; aspect-ratio: var(--aspect-wide); border: var(--hairline) solid var(--line); border-radius: var(--radius-box); background: var(--surface-2); box-shadow: var(--shadow-media); }
.xv-demo__frame > img, .xv-demo__frame > video { width: 100%; height: 100%; object-fit: cover; }
.xv-demo__veil { position: absolute; inset: 0; background: var(--overlay); }
.xv-demo.is-live .xv-demo__veil { display: none; }
.xv-demo__card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; gap: var(--space-4); justify-items: start; width: min(var(--panel-max), calc(100% - 2 * var(--space-5))); padding: var(--space-6); }
.xv-demo__card p { color: var(--text-2); }
.xv-demo__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.xv-demo__progress { width: 100%; height: var(--bar-thickness); border-radius: var(--radius-control); background: var(--line-strong); overflow: hidden; }
.xv-demo__progress span { display: block; height: 100%; width: var(--progress, 40%); background: var(--brand); transition: width var(--duration-base) var(--ease-standard); }
.xv-demo__hud { position: absolute; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); }
.xv-demo__hud.xv-glass { border-radius: var(--radius-control); }
.xv-demo__hud .xv-badge { background: transparent; border-color: transparent; padding-inline: 0; }
.xv-demo__timer { color: var(--text-2); font-variant-numeric: tabular-nums; margin-right: auto; }
/* positioned so it paints above the frame's shadow-media, which falls across it */
.xv-demo__note { position: relative; color: var(--text-3); }
.xv-demo__caution { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-3); border-radius: var(--radius-box); background: var(--caution-soft); color: var(--caution); }
@container (max-width: 639.98px) {
  .xv-demo__frame { aspect-ratio: var(--aspect-portrait); }
  .xv-demo__card { left: var(--space-3); right: var(--space-3); top: auto; bottom: var(--space-3); width: auto; transform: none; padding: var(--space-5); }
  .xv-demo__actions .xv-btn { flex: 1 1 100%; }
}

/* ---------- Feature section ---------- */
.xv-feature__head { display: grid; gap: var(--space-3); max-width: var(--media-wide-max); margin-bottom: var(--space-8); }
.xv-feature__items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-7) var(--space-5); }
.xv-feature__item { display: grid; gap: var(--space-4); align-content: start; padding-top: var(--space-5); border-top: var(--hairline) solid var(--line); }
.xv-feature__index { color: var(--brand); }
.xv-feature__item p { color: var(--text-2); }
.xv-feature__list { display: grid; gap: var(--space-2); color: var(--text-2); }
.xv-feature__list li { display: flex; gap: var(--space-2); }
.xv-feature__list li::before { content: "–"; color: var(--text-3); }
.xv-feature__icon { color: var(--brand); }
.xv-split { display: grid; grid-template-columns: repeat(var(--grid-columns-desktop), minmax(0, 1fr)); column-gap: var(--space-5); row-gap: var(--space-6); align-items: center; }
.xv-split + .xv-split { margin-top: var(--space-9); }
.xv-split__media { grid-column: 1 / span 7; border-radius: var(--radius-box); --ratio: var(--aspect-wide); }
.xv-split__text { grid-column: 9 / span 4; display: grid; gap: var(--space-4); }
.xv-split__text p { color: var(--text-2); }
.xv-split--flip .xv-split__media { grid-column: 6 / span 7; grid-row: 1; }
.xv-split--flip .xv-split__text { grid-column: 1 / span 4; grid-row: 1; }
@container (max-width: 1023.98px) {
  .xv-feature__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xv-split { grid-template-columns: minmax(0, 1fr); }
  .xv-split__media, .xv-split__text, .xv-split--flip .xv-split__media, .xv-split--flip .xv-split__text { grid-column: 1 / -1; grid-row: auto; }
  .xv-split + .xv-split { margin-top: var(--space-8); }
}
@container (max-width: 639.98px) { .xv-feature__items { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Blog: article card + prose ---------- */
.xv-acard { display: grid; gap: var(--space-4); align-content: start; color: var(--text-1); text-decoration: none; border-radius: var(--radius-box); }
.xv-acard:focus-visible, .xv-acard.is-focus { outline: none; box-shadow: var(--focus-ring); }
.xv-acard .xv-media { border-radius: var(--radius-box); }
.xv-acard .xv-media > img { transition: transform var(--duration-slow) var(--ease-out); }
.xv-acard:hover .xv-media > img, .xv-acard.is-hover .xv-media > img { transform: scale(var(--media-zoom)); }
.xv-acard__body { display: grid; gap: var(--space-2); }
.xv-acard__title { transition: color var(--duration-fast) var(--ease-standard); }
.xv-acard:hover .xv-acard__title, .xv-acard.is-hover .xv-acard__title { color: var(--brand-hover); }
.xv-acard__excerpt { color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.xv-acard__meta { color: var(--text-3); }
.xv-acard--text { padding-top: var(--space-5); border-top: var(--hairline) solid var(--line); }

.xv-prose { container-type: inline-size; }
.xv-prose__body { max-width: var(--prose-max); margin-inline: auto; color: var(--text-2); }
.xv-prose__body > * + * { margin-top: var(--space-5); }
.xv-prose__body > h2 { margin-top: var(--space-8); color: var(--text-1); }
.xv-prose__body > h3 { margin-top: var(--space-7); color: var(--text-1); }
.xv-prose__body > h2 + *, .xv-prose__body > h3 + * { margin-top: var(--space-4); }
.xv-prose__body strong { color: var(--text-1); font-weight: 600; }
.xv-prose__body a { color: var(--brand); text-decoration: underline; text-decoration-thickness: var(--hairline); text-underline-offset: var(--space-1); }
.xv-prose__body a:hover { color: var(--brand-hover); }
.xv-prose__body a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-mark); }
.xv-prose__body ul, .xv-prose__body ol { display: grid; gap: var(--space-2); }
.xv-prose__body ul > li { display: flex; gap: var(--space-3); }
.xv-prose__body ul > li::before { content: "–"; color: var(--text-3); }
.xv-prose__body ol { counter-reset: xv-ol; }
.xv-prose__body ol > li { display: flex; gap: var(--space-3); counter-increment: xv-ol; }
.xv-prose__body ol > li::before { content: counter(xv-ol, decimal-leading-zero); color: var(--brand); font-variant-numeric: tabular-nums; }
.xv-prose__body blockquote { display: grid; gap: var(--space-4); margin-block: var(--space-8); color: var(--text-1); }
.xv-prose__body blockquote cite { font-style: normal; color: var(--text-3); }
.xv-prose__body code { padding: 0 var(--space-1); border-radius: var(--radius-mark); background: var(--surface-2); color: var(--text-1); }
.xv-prose__body pre { overflow-x: auto; padding: var(--space-5); border: var(--hairline) solid var(--line); border-radius: var(--radius-box); background: var(--surface-1); color: var(--text-1); }
.xv-prose__body pre code { padding: 0; background: none; }
.xv-prose__body > .xv-figure { margin-block: var(--space-7); max-width: none; }
.xv-prose__body > .xv-figure--wide { width: min(var(--media-wide-max), calc(100cqi - 2 * var(--gutter-desktop))); margin-left: 50%; transform: translateX(-50%); }
.xv-prose__body > .xv-figure--full { width: 100cqi; margin-left: 50%; transform: translateX(-50%); }
.xv-prose__head { display: grid; gap: var(--space-5); max-width: var(--prose-max); margin: 0 auto var(--space-8); }
.xv-prose__meta { display: flex; flex-wrap: wrap; gap: var(--space-3); color: var(--text-3); }
@container (max-width: 639.98px) { .xv-prose__body > .xv-figure--wide { width: 100cqi; } }

/* ---------- CTA block ---------- */
.xv-cta { container-type: inline-size; position: relative; isolation: isolate; background: var(--surface-1); border-top: var(--hairline) solid var(--line-subtle); overflow: hidden; }
.xv-cta__inner { display: grid; gap: var(--space-5); justify-items: start; }
.xv-cta__title { max-width: var(--measure-headline); }
.xv-cta__text { color: var(--text-2); max-width: var(--measure-lead); }
.xv-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); margin-top: var(--space-3); }
.xv-cta--media { background: var(--bg); }
.xv-cta--media .xv-cta__media { position: absolute; inset: 0; z-index: -1; }
.xv-cta--media .xv-cta__media > img { width: 100%; height: 100%; object-fit: cover; }
.xv-cta--media .xv-cta__inner { width: fit-content; max-width: calc(var(--measure-lead) + 2 * var(--space-8)); padding: var(--space-8); }
/* Grid: the kinetic grid canvas behind the glass card. Without JavaScript a static grid of hairlines stands in. */
.xv-cta--grid { background-color: var(--bg); background-image: linear-gradient(var(--line-subtle) var(--hairline), transparent var(--hairline)), linear-gradient(90deg, var(--line-subtle) var(--hairline), transparent var(--hairline)); background-size: var(--grid-cell) var(--grid-cell); }
.xv-cta__canvas { position: absolute; inset: 0; z-index: -1; display: block; width: 100%; height: 100%; pointer-events: none; }
.xv-cta--grid .xv-cta__inner { width: fit-content; max-width: calc(var(--measure-lead) + 2 * var(--space-8)); padding: var(--space-8); }
.xv-cta--compact { background: none; border: 0; container-type: normal; }
.xv-cta--compact .xv-cta__inner { gap: var(--space-4); padding: var(--space-6); border: var(--hairline) solid var(--line); border-radius: var(--radius-box); background: var(--surface-1); }
@container (max-width: 639.98px) {
  .xv-cta__actions .xv-btn { flex: 1 1 100%; }
}
@container (max-width: 639.98px) {
  .xv-cta--media .xv-cta__inner, .xv-cta--grid .xv-cta__inner { width: auto; padding: var(--space-6); }
}

/* ---------- Form ---------- */
.xv-field { display: grid; gap: var(--space-2); align-content: start; }
.xv-field__label { color: var(--text-1); }
.xv-field__opt { color: var(--text-3); font-weight: 400; }
.xv-field__hint { color: var(--text-3); }
.xv-field__msg { display: flex; align-items: flex-start; gap: var(--space-2); color: var(--error); }
.xv-input { width: 100%; height: var(--control-height); padding: 0 var(--space-4); border: var(--hairline) solid var(--line-strong); border-radius: var(--radius-box); background: var(--surface-2); color: var(--text-1); font-family: var(--font-sans); appearance: none; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
textarea.xv-input { height: auto; min-height: calc(var(--space-10) + var(--space-6)); padding-block: var(--space-3); resize: vertical; }
.xv-input::placeholder { color: var(--text-3); }
.xv-input:hover, .xv-input.is-hover { background: var(--surface-3); }
.xv-input:focus, .xv-input.is-focus { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); }
.xv-field.is-error .xv-input, .xv-input[aria-invalid="true"] { border-color: var(--error); }
.xv-input:disabled, .xv-input.is-disabled { cursor: not-allowed; background: var(--surface-1); border-color: var(--line); color: var(--text-disabled); }
.xv-select { position: relative; }
.xv-select .xv-input { padding-right: calc(var(--space-4) + var(--icon-md) + var(--space-2)); cursor: pointer; }
.xv-select .xv-icon { position: absolute; right: var(--space-4); top: 50%; transform: translateY(-50%); color: var(--text-2); pointer-events: none; }
.xv-check { display: inline-flex; align-items: flex-start; gap: var(--space-3); color: var(--text-2); cursor: pointer; }
.xv-check input { position: absolute; opacity: 0; width: var(--icon-md); height: var(--icon-md); margin: 0; }
.xv-check__box { flex: none; display: grid; place-items: center; width: var(--icon-md); height: var(--icon-md); border: var(--hairline) solid var(--line-strong); border-radius: var(--radius-mark); background: var(--surface-2); color: transparent; transition: background-color var(--duration-fast) var(--ease-standard); }
.xv-check input:checked + .xv-check__box { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.xv-check input:focus-visible + .xv-check__box, .xv-check.is-focus .xv-check__box { box-shadow: var(--focus-ring); }
.xv-check .xv-icon { width: var(--icon-sm); height: var(--icon-sm); stroke-width: calc(var(--icon-stroke) * 2); }
.xv-fieldset { display: grid; gap: var(--space-3); margin: 0; padding: 0; border: 0; min-width: 0; }
.xv-fieldset legend { padding: 0; margin-bottom: var(--space-3); }

.xv-notice { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-radius: var(--radius-box); }
.xv-notice--success { background: var(--success-soft); color: var(--success); }
.xv-notice--error { background: var(--error-soft); color: var(--error); }
.xv-notice__text { display: grid; gap: var(--space-1); color: var(--text-1); }
.xv-notice__text strong { font-weight: 600; }

/* Neural: the WebGL vortex behind the contact page; the form panel turns to glass over it */
.xv-contact--neural { isolation: isolate; overflow: hidden; }
.xv-contact__canvas { position: absolute; inset: 0; z-index: -1; display: block; width: 100%; height: 100%; opacity: var(--neural-opacity); pointer-events: none; -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / var(--neural-text-fade)) 0%, rgb(0 0 0 / var(--neural-text-fade)) 40%, #000 62%); mask-image: linear-gradient(90deg, rgb(0 0 0 / var(--neural-text-fade)) 0%, rgb(0 0 0 / var(--neural-text-fade)) 40%, #000 62%); }
@container (max-width: 1023.98px) { .xv-contact__canvas { -webkit-mask-image: linear-gradient(180deg, rgb(0 0 0 / var(--neural-text-fade)) 0%, rgb(0 0 0 / var(--neural-text-fade)) 30%, #000 50%); mask-image: linear-gradient(180deg, rgb(0 0 0 / var(--neural-text-fade)) 0%, rgb(0 0 0 / var(--neural-text-fade)) 30%, #000 50%); } }
.xv-contact--neural .xv-contact__form { background: var(--glass-fill); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); border-color: var(--glass-line); box-shadow: var(--shadow-glass); }
.xv-contact__grid { display: grid; grid-template-columns: repeat(var(--grid-columns-desktop), minmax(0, 1fr)); column-gap: var(--space-5); row-gap: var(--space-8); }
.xv-contact__intro { grid-column: 1 / span 5; display: grid; gap: var(--space-5); align-content: start; }
.xv-contact__intro > p { color: var(--text-2); }
.xv-contact__direct { display: grid; gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-5); border-top: var(--hairline) solid var(--line-subtle); }
.xv-contact__form { grid-column: 7 / span 6; display: grid; gap: var(--space-6); padding: var(--space-7); border: var(--hairline) solid var(--line); border-radius: var(--radius-box); background: var(--surface-1); }
.xv-contact__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); }
.xv-contact__foot { display: grid; gap: var(--space-4); }
.xv-contact__sent { display: grid; gap: var(--space-5); justify-items: start; align-content: start; }
@container (max-width: 1023.98px) {
  .xv-contact__intro, .xv-contact__form { grid-column: 1 / -1; }
}
@container (max-width: 639.98px) {
  .xv-contact__form { padding: var(--space-5); }
  .xv-contact__row { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Empty state + 404 ---------- */
.xv-empty__inner { display: grid; gap: var(--space-5); justify-items: start; max-width: var(--media-wide-max); }
.xv-empty__inner > p { color: var(--text-2); max-width: var(--prose-max); }
.xv-empty__links { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
.xv-empty--quiet .xv-empty__inner { justify-items: center; text-align: center; margin-inline: auto; padding: var(--space-8) var(--space-5); border: var(--hairline) dashed var(--line); border-radius: var(--radius-box); }
.xv-empty__icon { color: var(--text-3); }

/* ---------- Faq ---------- */
.xv-faq__grid { row-gap: var(--space-6); }
.xv-faq__head { grid-column: 1 / span 4; display: grid; gap: var(--space-3); align-content: start; }
.xv-faq__list { grid-column: 6 / span 7; border-bottom: var(--hairline) solid var(--line-subtle); }
.xv-faq__item { border-top: var(--hairline) solid var(--line-subtle); }
.xv-faq__q { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding-block: var(--space-5); color: var(--text-1); list-style: none; cursor: pointer; border-radius: var(--radius-mark); }
.xv-faq__q::-webkit-details-marker { display: none; }
.xv-faq__q:focus-visible, .xv-faq__q.is-focus { outline: none; box-shadow: var(--focus-ring); }
.xv-faq__q .xv-icon { color: var(--text-3); transition: transform var(--duration-base) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.xv-faq__q:hover .xv-icon, .xv-faq__q.is-hover .xv-icon { color: var(--text-1); }
.xv-faq__item[open] .xv-faq__q .xv-icon { transform: rotate(45deg); color: var(--brand); }
.xv-faq__a { display: grid; gap: var(--space-4); padding-bottom: var(--space-5); color: var(--text-2); max-width: var(--prose-max); }
/* Where the browser supports it, the answer opens smoothly instead of jumping */
.xv-faq__item::details-content { block-size: 0; overflow: clip; transition: block-size var(--duration-base) var(--ease-out), content-visibility var(--duration-base) allow-discrete; }
.xv-faq__item[open]::details-content { block-size: auto; }
@container (max-width: 1023.98px) { .xv-faq__head, .xv-faq__list { grid-column: 1 / -1; } }

/* ---------- Steps: how a project runs ---------- */
/* A centred head, then a lit panel with the steps in a row: glowing nodes on one rail. With motion on,
   the section pins on desktop and a bright line with a glowing tip runs node to node as the page scrolls:
   done steps light up with a tick, the current one glows, upcoming ones wait unlit. Below 1024px the
   steps stack with a connector between nodes. Without motion every step shows lit. --n is the step count.
   Glow is allowed here (decision 2026-10-03). */
.xv-steps__head { display: grid; justify-items: center; gap: var(--space-4); max-width: var(--media-wide-max); margin: 0 auto var(--space-7); text-align: center; }
.xv-steps__lead { color: var(--text-2); max-width: var(--measure-lead); }
.xv-steps__panel { --node: calc(var(--control-height) + var(--space-4)); position: relative; isolation: isolate; overflow: hidden; padding: var(--space-8) var(--space-6) var(--space-7); border: var(--hairline) solid var(--line); border-radius: var(--radius-box); background: radial-gradient(ellipse 70% 120% at 0% 0%, var(--brand-glow) 0%, transparent 60%), radial-gradient(ellipse 60% 90% at calc(var(--p, 1) * 100%) 0%, var(--brand-glow-soft) 0%, transparent 70%), linear-gradient(100deg, var(--brand-deep) 0%, var(--bg) 85%); box-shadow: var(--shadow-glass); }
.xv-steps__list { position: relative; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: var(--space-5); }
/* The rail runs from the centre of the first node to the centre of the last */
.xv-steps__rail { position: absolute; z-index: 0; top: calc(var(--space-8) + var(--node) / 2 - var(--bar-thickness) / 2); inset-inline: calc(var(--space-6) + (100% - 2 * var(--space-6) - (var(--n, 4) - 1) * var(--space-5)) / (2 * var(--n, 4))); height: var(--bar-thickness); border-radius: var(--radius-control); background: var(--brand-glow-soft); }
.xv-steps__fill { position: absolute; inset: 0 auto 0 0; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand) 0%, var(--brand-hover) 80%, var(--text-1) 100%); box-shadow: var(--glow-line); }
/* The glowing tip at the front of the line */
.xv-steps__fill::after { content: ""; position: absolute; right: calc(-1 * var(--space-1)); top: 50%; width: var(--space-3); height: var(--space-3); border-radius: var(--radius-control); background: var(--text-1); box-shadow: var(--glow-tip); transform: translateY(-50%); }
.xv-steps__item { position: relative; z-index: 1; display: grid; justify-items: center; align-content: start; gap: var(--space-2); text-align: center; }
.xv-steps__node { display: grid; place-items: center; width: var(--node); height: var(--node); margin-bottom: var(--space-3); border: var(--hairline) solid var(--brand); border-radius: var(--radius-control); background: radial-gradient(circle at 35% 30%, var(--brand-hover) 0%, var(--brand) 45%, var(--brand-active) 100%); color: var(--on-brand); box-shadow: var(--glow-node); font-variant-numeric: tabular-nums; transition: background var(--duration-slow) var(--ease-out), border-color var(--duration-slow) var(--ease-out), color var(--duration-slow) var(--ease-out), box-shadow var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); }
.xv-steps__check { display: none; }
.xv-steps__index { color: var(--brand); transition: color var(--duration-base) var(--ease-standard); }
.xv-steps__item h3 { color: var(--text-1); transition: color var(--duration-base) var(--ease-standard); }
.xv-steps__text { color: var(--text-2); max-width: var(--measure-label); transition: color var(--duration-base) var(--ease-standard); }
/* With motion: upcoming (unlit), current (glowing, larger) and done (lit, with a tick) */
html.xv-motion .xv-steps__fill { width: calc(var(--p, 0) * 100%); }
html.xv-motion .xv-steps.is-idle .xv-steps__fill::after { opacity: 0; }
html.xv-motion .xv-steps__node { border-color: var(--brand-glow); background: radial-gradient(circle at 50% 30%, var(--brand-glow-soft) 0%, var(--brand-deep) 70%); color: var(--text-3); box-shadow: inset 0 0 14px var(--brand-glow-soft), 0 0 24px var(--brand-glow-soft); }
html.xv-motion .xv-steps__index, html.xv-motion .xv-steps__item h3, html.xv-motion .xv-steps__text { color: var(--text-3); }
/* Done: a softer, translucent lit node with a tick; current: the full brand node with the strongest glow */
html.xv-motion .xv-steps__item.is-done .xv-steps__node { border-color: var(--brand); background: radial-gradient(circle at 50% 40%, var(--brand-glow) 0%, var(--brand-deep) 80%); color: var(--text-1); box-shadow: var(--glow-node); }
html.xv-motion .xv-steps__item.is-active .xv-steps__node { border-color: var(--brand-hover); background: radial-gradient(circle at 35% 30%, var(--brand-hover) 0%, var(--brand) 45%, var(--brand-active) 100%); color: var(--on-brand); box-shadow: var(--glow-node-active); transform: scale(var(--steps-active-scale)); }
html.xv-motion .xv-steps__item.is-done .xv-steps__num { display: none; }
html.xv-motion .xv-steps__item.is-done .xv-steps__check { display: block; }
html.xv-motion .xv-steps__item:is(.is-done, .is-active) .xv-steps__index { color: var(--brand); }
html.xv-motion .xv-steps__item:is(.is-done, .is-active) h3 { color: var(--text-1); }
html.xv-motion .xv-steps__item:is(.is-done, .is-active) .xv-steps__text { color: var(--text-2); }
/* Pinned on desktop: the track gives the scroll room, the stage holds the section in view */
@container (min-width: 1024px) {
  html.xv-motion .xv-steps__track { height: calc(100svh + var(--n, 4) * var(--steps-track-step)); }
  html.xv-motion .xv-steps__stage { position: sticky; top: 0; display: grid; align-content: center; min-height: 100svh; }
}
/* Stacked below 1024px: node on the left, text beside it, a glowing connector down to the next node */
@container (max-width: 1023.98px) {
  .xv-steps__panel { --node: var(--control-height); padding: var(--space-6) var(--space-5); background: radial-gradient(ellipse 120% 50% at 0% 0%, var(--brand-glow) 0%, transparent 60%), linear-gradient(180deg, var(--brand-deep) 0%, var(--bg) 90%); }
  .xv-steps__rail { display: none; }
  .xv-steps__list { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .xv-steps__item { grid-template-columns: var(--node) minmax(0, 1fr); column-gap: var(--space-4); row-gap: var(--space-1); justify-items: start; text-align: left; }
  .xv-steps__node { grid-row: 1 / span 3; margin-bottom: 0; }
  .xv-steps__text { max-width: none; }
  .xv-steps__item:not(:last-child)::before { content: ""; position: absolute; z-index: -1; left: calc(var(--node) / 2 - var(--bar-thickness) / 2); top: var(--node); bottom: calc(-1 * var(--space-6)); width: var(--bar-thickness); background: var(--brand); box-shadow: var(--glow-line); }
  html.xv-motion .xv-steps__item:not(:last-child)::before { background: var(--brand-glow-soft); box-shadow: none; }
  html.xv-motion .xv-steps__item.is-done::before { background: var(--brand); box-shadow: var(--glow-line); }
  html.xv-motion .xv-steps__item.is-active .xv-steps__node { transform: none; }
}

/* ---------- Zoom parallax: a page head made of renders ---------- */
/* Static: a three-column mosaic. With motion: the stage pins for zoom-track and seven renders scale
   out at different speeds until the centre one fills the screen. Positions and zoom factors are the
   component's layout, like a grid template. */
.xv-zoom { container-type: inline-size; }
.xv-zoom__items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.xv-zoom__item .xv-media { border-radius: var(--radius-box); }
@container (max-width: 639.98px) { .xv-zoom__items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } }
html.xv-motion .xv-zoom__track { height: var(--zoom-track); }
html.xv-motion .xv-zoom__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; container-type: size; }
html.xv-motion .xv-zoom__stage > .xv-wrap { display: contents; }
html.xv-motion .xv-zoom__items { display: block; }
html.xv-motion .xv-zoom__item { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transform: scale(calc(1 + (var(--z) - 1) * var(--p, 0))); will-change: transform; }
html.xv-motion .xv-zoom__item .xv-media { position: relative; width: 25cqw; height: 25cqh; aspect-ratio: auto; border-radius: var(--radius-none); }
html.xv-motion .xv-zoom__item:nth-child(1) { --z: 4; }
html.xv-motion .xv-zoom__item:nth-child(2) { --z: 5; }
html.xv-motion .xv-zoom__item:nth-child(2) .xv-media { top: -30cqh; left: 5cqw; width: 35cqw; height: 30cqh; }
html.xv-motion .xv-zoom__item:nth-child(3) { --z: 6; }
html.xv-motion .xv-zoom__item:nth-child(3) .xv-media { top: -10cqh; left: -25cqw; width: 20cqw; height: 45cqh; }
html.xv-motion .xv-zoom__item:nth-child(4) { --z: 5; }
html.xv-motion .xv-zoom__item:nth-child(4) .xv-media { left: 27.5cqw; width: 25cqw; height: 25cqh; }
html.xv-motion .xv-zoom__item:nth-child(5) { --z: 6; }
html.xv-motion .xv-zoom__item:nth-child(5) .xv-media { top: 27.5cqh; left: 5cqw; width: 20cqw; height: 25cqh; }
html.xv-motion .xv-zoom__item:nth-child(6) { --z: 8; }
html.xv-motion .xv-zoom__item:nth-child(6) .xv-media { top: 27.5cqh; left: -22.5cqw; width: 30cqw; height: 25cqh; }
html.xv-motion .xv-zoom__item:nth-child(7) { --z: 9; }
html.xv-motion .xv-zoom__item:nth-child(7) .xv-media { top: 22.5cqh; left: 25cqw; width: 15cqw; height: 15cqh; }

/* ---------- Glass fallback: no backdrop blur means a solid surface ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .xv-glass, .xv-glass--thin, .xv-nav.is-scrolled .xv-nav__bar, .xv-nav.is-menu .xv-nav__bar, .xv-icon-btn--round, .xv-tip__bubble, .xv-contact--neural .xv-contact__form { background: var(--surface-1); }
  .xv-nav.is-open, .xv-lightbox { background: var(--bg); }
}

@media (prefers-reduced-transparency: reduce) {
  .xv-glass, .xv-glass--thin, .xv-btn--glass, .xv-icon-btn--round, .xv-tip__bubble, .xv-nav.is-scrolled .xv-nav__bar, .xv-nav.is-menu .xv-nav__bar, .xv-contact--neural .xv-contact__form { background: var(--surface-1); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .xv-nav.is-open, .xv-lightbox { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- Reveal: scroll-driven motion (EXIVIZ.motion) ---------- */
/* Hidden starting states apply only under html.xv-motion, which EXIVIZ.motion sets when motion is allowed.
   Without JS, or with reduced motion, every element shows in its final state and nothing pins. */
html.xv-motion [data-reveal="rise"], html.xv-motion .xv-reveal { opacity: 0; transform: translateY(var(--reveal-distance)); transition: opacity var(--duration-slow) var(--ease-out) var(--reveal-delay, 0ms), transform var(--duration-slow) var(--ease-out) var(--reveal-delay, 0ms); }
html.xv-motion [data-reveal="rise"].is-in, html.xv-motion .xv-reveal.is-in { opacity: 1; transform: none; }
/* Lines: every word rises from behind its own mask; the words of one line move together */
.xv-w { display: inline-block; }
html.xv-motion [data-reveal="lines"] .xv-w { overflow: clip; vertical-align: top; padding-bottom: var(--reveal-mask-bleed); margin-bottom: calc(-1 * var(--reveal-mask-bleed)); }
html.xv-motion [data-reveal="lines"] .xv-w__in { display: inline-block; transform: translateY(110%); transition: transform var(--duration-cinematic) var(--ease-out) var(--reveal-delay, 0ms); }
html.xv-motion [data-reveal="lines"].is-in .xv-w__in { transform: none; }
/* Words: a statement lights up word by word, text-3 to its own colour, as it scrolls through the screen */
html.xv-motion [data-reveal="words"] .xv-w { color: var(--text-3); transition: color var(--duration-fast) var(--ease-standard); }
html.xv-motion [data-reveal="words"] .xv-w.is-lit { color: inherit; }
/* Unclip: media opens from an inset box to its full width; full-bleed media also loses its corners */
html.xv-motion [data-reveal="unclip"] { clip-path: inset(0 calc(var(--unclip-inset) * (1 - var(--p, 0))) round calc(var(--radius-box) * (1 - var(--p, 0)))); }
html.xv-motion [data-reveal="unclip"] > img { transform: scale(calc(1 + var(--unclip-zoom) * (1 - var(--p, 0)))); }
/* Tilt: a product screen lies back in 3D and stands up flat as it scrolls in */
.xv-tilt { perspective: var(--tilt-perspective); }
.xv-tilt__screen { --ratio: var(--aspect-wide); border: var(--hairline) solid var(--line); border-radius: var(--radius-box); box-shadow: var(--shadow-media); }
/* Statement: one large paragraph that says who we are, lit word by word */
.xv-statement__inner { display: grid; gap: var(--space-6); justify-items: start; max-width: var(--media-wide-max); }
.xv-statement__text { color: var(--text-1); }
html.xv-motion [data-reveal="tilt"] { transform: rotateX(calc(var(--tilt-angle) * (1 - var(--p, 0)))); transform-origin: center top; will-change: transform; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0ms !important; scroll-behavior: auto !important; }
  .xv-btn, .xv-link, .xv-input, .xv-page, .xv-tag--chip, .xv-nav__trigger, .xv-nav__item { transition-duration: var(--duration-fast) !important; transition-property: color, background-color, border-color !important; }
  .xv-card:hover .xv-card__media > img, .xv-acard:hover .xv-media > img, .xv-gallery__item:hover .xv-media > img { transform: none; }
}