/* ==========================================================================
   alsigil — sections
   Order follows the page. The product-surface system (.ui*) sits in the
   middle because six sections render one; it scales entirely from a single
   font-size on .ui, so every interior measurement below is in em.
   ========================================================================== */

/* ==========================================================================
   NAV
   ========================================================================== */
/* The bar condenses without animating its own height: the box stays --nav-h
   (so scroll-padding-top keeps matching it) and the blurred plate behind it
   scales from the top edge while the row slides up. Transform and opacity
   only, no layout on every scroll frame. */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  isolation: isolate;
}
.nav::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  transform-origin: top;
  transform: scaleY(1);
  opacity: 0;
  background: rgba(246, 243, 238, 0.8);
  border-bottom: 1px solid var(--hairline);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  transition: transform 0.5s var(--ease), opacity 0.45s var(--ease);
}
.nav.is-stuck::before { opacity: 1; transform: scaleY(calc(62 / 76)); }
.nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  transition: transform 0.5s var(--ease);
}
.nav.is-stuck .nav-inner { transform: translate3d(0, -7px, 0); }

 /* The mark is one piece of outlined artwork — punch and wordmark in a single
   SVG, drawn from the identity sheet. It is not a glyph beside live text any
   more, so there is nothing here to set, track or colour: the height is the
   only thing a stylesheet gets to decide. */
.wordmark { display: inline-flex; align-items: center; }
.wordmark svg { height: 27px; width: auto; display: block; }
.wordmark--foot svg { height: 24px; }

.nav-links {
  display: flex;
  gap: 0.35rem;
  justify-self: center;
}
.nav-links a {
  padding: 0.5rem 0.9rem;
  border-radius: var(--r-pill);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-2);
  transition: color 0.3s var(--ease), background 0.3s var(--ease);
}
.nav-links a:hover { color: var(--ink); background: rgba(18,22,28,0.05); }

.nav-actions { display: flex; align-items: center; gap: 0.85rem; justify-self: end; }
.nav-signin { font-size: 0.9rem; font-weight: 600; color: var(--ink-2); transition: color 0.3s var(--ease); }
.nav-signin:hover { color: var(--ink); }

/* The language switch is the one nav control aimed at someone who may not read
   the rest of the bar, so it carries a border instead of sitting as plain text
   beside `Sign in` — and unlike `Sign in` it keeps its place on mobile, where
   it drops its label and rides on the globe alone. */
.nav-locale {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.7rem;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.nav-locale:hover { color: var(--ink); border-color: var(--hairline-bright); background: rgba(18,22,28,0.04); }
.nav-locale .ico { width: 15px; height: 15px; flex: none; }
.nav-burger { display: none; padding: 0.45rem; color: var(--ink); }
.nav-burger .ico { width: 24px; height: 24px; }

/* Mobile drawer */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 80;
  padding: 1.35rem var(--shell-pad) 2.5rem;
  background: rgba(246, 243, 238, 0.96);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.mobile-menu.is-open { opacity: 1; }
.mobile-menu[hidden] { display: none; }
.mobile-menu-head { display: flex; align-items: center; justify-content: space-between; }
.mobile-close { padding: 0.5rem; color: var(--ink); }
.mobile-close .ico { width: 24px; height: 24px; }
.mobile-links { display: flex; flex-direction: column; flex: 1; padding-top: 1rem; }
.mobile-links a {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 400;
  letter-spacing: -0.015em;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--hairline);
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  padding-top: calc(var(--nav-h) + clamp(3.5rem, 10vh, 8rem));
  padding-bottom: clamp(3rem, 6vw, 6rem);
  overflow: clip;
}
.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--ground-deep); }

.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s var(--ease);
}
.hero-video.is-ready { opacity: 1; }
/* When a real film is playing there is no reason to keep painting the
   authored loop underneath it. */
.hero-bg:has(.hero-video.is-ready) .amb { opacity: 0 !important; animation: none; }

/* Top and bottom gradient, plus a wash over the left third where the copy
   sits. The middle-right band stays open so the footage — authored or real —
   is actually visible rather than washed to black. */
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(246,243,238,0.94) 0%, rgba(246,243,238,0.42) 24%, rgba(246,243,238,0.40) 54%, rgba(246,243,238,0.88) 86%, var(--ground) 100%),
    linear-gradient(90deg, rgba(246,243,238,0.95) 0%, rgba(246,243,238,0.82) 26%, rgba(246,243,238,0.32) 58%, rgba(246,243,238,0.08) 82%);
}
.hero-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(120% 78% at 50% 42%, transparent 42%, rgba(18,22,28,0.05) 88%, rgba(18,22,28,0.08) 100%);
}
.hero-field-a { width: 68vw; height: 68vw; max-width: 900px; max-height: 900px; top: -22%; right: -12%; opacity: 0.5; }
.hero-field-b { width: 80vw; height: 60vw; max-width: 1100px; max-height: 760px; bottom: -26%; left: -14%; opacity: 0.8; }

/* --- Ambient product loop ------------------------------------------------
   Three scenes cross-dissolving on a 27s cycle: the matter board breathing,
   a clause resolving to its article of law, a matter timeline drawing. This
   is the hero's motion until a film is supplied; it is not a placeholder.
   -------------------------------------------------------------------------- */
/* The scenes occupy the open right region, and a mask concentrates them there:
   whatever the cycle is showing, it falls away toward the headline column
   instead of surfacing behind the type. A supplied film still plays full-bleed;
   this is a composition rule for the authored loop, whose job is to be read
   past, not through. */
/* Pinned to the first viewport's open right region — right of the lede and
   buttons, below the nav, above the dashboard — rather than to the whole hero,
   whose height includes the mockup and would put half of each scene behind it.
   The radial mask then falls the layer away toward the headline column. */
.amb {
  position: absolute;
  top: 0; right: 0; left: 30%;
  height: min(100svh, 980px);
  mask-image: radial-gradient(66% 62% at 78% 52%, #000 8%, rgba(0,0,0,0.3) 54%, transparent 84%);
  -webkit-mask-image: radial-gradient(66% 62% at 78% 52%, #000 8%, rgba(0,0,0,0.3) 54%, transparent 84%);
  opacity: 0;
  animation: ambCycle 27s linear infinite;
  will-change: opacity, transform;
}
.amb--1 { animation-delay: -1s; }
.amb--2 { animation-delay: -10s; }
.amb--3 { animation-delay: -19s; }

@keyframes ambCycle {
  0%   { opacity: 0; transform: scale(1.06) translate3d(0,0,0); }
  4%   { opacity: 1; }
  29%  { opacity: 1; }
  35%  { opacity: 0; }
  100% { opacity: 0; transform: scale(1.14) translate3d(0,-1.5%,0); }
}

.amb-rows {
  position: absolute; left: 46%; top: 46%; width: 50%;
  display: flex; flex-direction: column; gap: 1.6vh;
}
.amb-rows span {
  height: 1.35vh; min-height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(18,22,28,0.3), rgba(166,48,31,0.2));
  width: var(--w);
  transform-origin: left;
  animation: ambRow 9s var(--ease) infinite;
  animation-delay: var(--d);
}
@keyframes ambRow {
  0%, 100% { transform: scaleX(0.86); opacity: 0.35; }
  22%      { transform: scaleX(1);    opacity: 0.95; }
  70%      { transform: scaleX(1);    opacity: 0.6; }
}
.amb-bars {
  position: absolute; right: 5%; bottom: 6%;
  width: 40%; height: 21%;
  display: flex; align-items: flex-end; gap: 1.6%;
}
.amb-bars i {
  flex: 1;
  height: var(--h);
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, rgba(18,22,28,0.4), rgba(18,22,28,0.05));
  transform-origin: bottom;
  animation: ambBar 7s var(--ease) infinite;
  animation-delay: var(--d);
}
@keyframes ambBar {
  0%, 100% { transform: scaleY(0.55); }
  40%      { transform: scaleY(1); }
}

.amb-doc {
  position: absolute; right: 4%; top: 45%;
  width: min(58%, 440px);
  font-family: var(--font-ar-doc);
  font-size: clamp(0.9rem, 1.2vw, 1.2rem);
  line-height: 2.2;
  color: rgba(18,22,28,0.5);
}
.amb-line { opacity: 0; animation: ambLine 9s var(--ease) infinite; animation-delay: var(--d); }
@keyframes ambLine {
  0%       { opacity: 0; transform: translateY(8px); }
  10%, 78% { opacity: 1; transform: none; }
  92%      { opacity: 0; }
  100%     { opacity: 0; }
}
.amb-line--mark { color: var(--ink); position: relative; }
.amb-line--mark::after {
  content: "";
  position: absolute; inset-inline: -0.3em; bottom: 0.42em; height: 2px;
  background: linear-gradient(90deg, var(--seal), rgba(166,48,31,0));
  transform: scaleX(0); transform-origin: right;
  animation: ambUnderline 9s var(--ease) infinite;
  animation-delay: 1.1s;
}
@keyframes ambUnderline {
  0%, 12%  { transform: scaleX(0); }
  30%, 80% { transform: scaleX(1); }
  92%,100% { transform: scaleX(0); }
}
.amb-cite {
  position: absolute; right: 5%; top: 76%;
  padding: 0.5em 0.9em;
  border-radius: 9px;
  border: 1px solid var(--seal-line);
  background: var(--seal-wash);
  color: var(--seal-deep);
  font-family: var(--font-ar-ui);
  font-size: clamp(0.72rem, 1vw, 0.95rem);
  direction: rtl;
  opacity: 0;
  animation: ambCite 9s var(--ease) infinite;
  animation-delay: 2s;
}
@keyframes ambCite {
  0%, 14%  { opacity: 0; transform: translateY(10px) scale(0.96); }
  26%, 78% { opacity: 1; transform: none; }
  90%,100% { opacity: 0; }
}

.amb-time { position: absolute; right: 2%; top: 40%; width: 80%; height: 38%; }
.amb-axis path { fill: none; stroke: rgba(18,22,28,0.09); stroke-width: 1; }
.amb-spine { fill: none; stroke: rgba(18,22,28,0.2); stroke-width: 1.5; stroke-dasharray: 700; stroke-dashoffset: 700; animation: ambDraw 9s var(--ease) infinite; }
.amb-trend { fill: none; stroke: var(--seal); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 900; stroke-dashoffset: 900; animation: ambDraw 9s var(--ease) infinite; animation-delay: 0.7s; }
@keyframes ambDraw {
  0%       { stroke-dashoffset: 900; opacity: 0; }
  8%       { opacity: 1; }
  46%, 80% { stroke-dashoffset: 0; opacity: 1; }
  95%,100% { stroke-dashoffset: 0; opacity: 0; }
}
.amb-nodes circle { fill: var(--seal); opacity: 0; animation: ambNode 9s var(--ease) infinite; animation-delay: var(--d); }
@keyframes ambNode {
  0%, 8%   { opacity: 0; r: 2; }
  24%, 80% { opacity: 0.9; }
  95%,100% { opacity: 0; }
}
.amb-motes { position: absolute; inset: 0; }
.amb-motes i {
  position: absolute; left: var(--x); top: var(--y);
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(166,48,31,0.6);
  /* No halo: a mote on paper is a speck of ink, and a glow on a light ground
     reads as a rendering artefact rather than as light. */
  animation: ambMote 11s ease-in-out infinite;
  animation-delay: var(--d);
}
@keyframes ambMote {
  0%, 100% { opacity: 0; transform: translate3d(0,14px,0); }
  30%, 62% { opacity: 0.85; transform: translate3d(6px,-10px,0); }
}

/* --- Hero content --------------------------------------------------------- */
.hero-content { position: relative; z-index: 2; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.46rem 1rem 0.46rem 0.8rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline-strong);
  background: var(--surface-3);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 1.9rem;
}
.hero-eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--seal);
  box-shadow: 0 0 0 0 rgba(166,48,31,0.5);
  animation: pulse 3.4s var(--ease) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(166,48,31,0.45); }
  70%  { box-shadow: 0 0 0 9px rgba(166,48,31,0); }
  100% { box-shadow: 0 0 0 0 rgba(166,48,31,0); }
}

.hero-h1 { max-width: 17ch; }
.hero-lede { margin-top: 1.7rem; max-width: 56ch; font-size: clamp(1.05rem, 1.28vw, 1.2rem); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.4rem; }
.hero-proof {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.9rem;
  margin-top: 2.4rem;
  font-size: 0.87rem; font-weight: 600; color: var(--ink-3);
}
.hero-proof li { display: flex; align-items: center; gap: 0.5rem; }
.hero-proof .ico { width: 15px; height: 15px; color: var(--seal); flex: none; }

/* --- Floating dashboard --------------------------------------------------- */
.hero-stage {
  position: relative;
  z-index: 2;
  margin-top: clamp(3.5rem, 7vw, 6.5rem);
  margin-bottom: clamp(-9rem, -7vw, -3.5rem);
  perspective: 2200px;
}
.hero-stage-glow {
  position: absolute;
  left: 8%; right: 8%; bottom: -4%;
  height: 62%;
  background: radial-gradient(58% 100% at 50% 100%, rgba(18,22,28,0.3), rgba(18,22,28,0) 72%);
  filter: blur(46px);
  z-index: -1;
}
.hero-mockup {
  transform-style: preserve-3d;
  transform: rotateX(9deg) rotateZ(-0.5deg) scale(0.985);
  transition: transform 1.2s var(--ease);
}
.hero-mockup .ui { font-size: clamp(0.62rem, 0.82vw, 0.82rem); }

/* ==========================================================================
   PRODUCT SURFACES (.ui) — ten instances across five sections
   Everything inside scales from .ui's font-size, so one clamp resizes a
   whole screenshot without touching a single interior rule.
   ========================================================================== */
.ui {
  position: relative;
  border-radius: 14px;
  border: 1px solid var(--hairline-strong);
  background: linear-gradient(178deg, #FFFFFF 0%, #FBF9F6 62%);
  box-shadow: var(--shadow-deep);
  overflow: hidden;
  font-size: clamp(0.72rem, 0.86vw, 0.8rem);
  line-height: 1.45;
  color: var(--ink);
  user-select: none;
}
.ui::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.9);
}
.ui--sm { font-size: clamp(0.68rem, 0.72vw, 0.7rem); }
.ui--wide { font-size: clamp(0.7rem, 0.78vw, 0.76rem); }

.ui-bar {
  display: flex; align-items: center; gap: 1em;
  padding: 0.9em 1.15em;
  border-bottom: 1px solid rgba(18,22,28,0.09);
  background: rgba(18,22,28,0.022);
}
.ui-bar--rtl { direction: rtl; }
.ui-dots { display: inline-flex; gap: 0.45em; flex: none; }
.ui-dots i { width: 0.62em; height: 0.62em; border-radius: 50%; background: rgba(18,22,28,0.15); }
.ui-crumb {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-weight: 700; font-size: 0.95em; color: var(--ink-2); white-space: nowrap;
}
.ui-crumb .ico { width: 1.15em; height: 1.15em; color: var(--ink-3); }
.ui-crumb em { font-style: normal; font-weight: 500; color: var(--ink-3); }
.ui-search {
  flex: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 1em;
  min-width: 0;
  padding: 0.42em 0.7em;
  border-radius: 7px;
  border: 1px solid rgba(18,22,28,0.1);
  background: rgba(18,22,28,0.03);
  color: var(--ink-3);
  overflow: hidden;
}
.ui-search span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-search kbd {
  font-family: inherit; font-size: 0.85em; font-weight: 700;
  padding: 0.1em 0.4em; border-radius: 5px;
  border: 1px solid rgba(18,22,28,0.14); color: var(--ink-3); flex: none;
}
.ui-pill {
  margin-inline-start: auto; flex: none;
  padding: 0.3em 0.72em; border-radius: 999px;
  border: 1px solid rgba(18,22,28,0.14);
  background: var(--surface-3);
  font-size: 0.9em; font-weight: 700; color: var(--ink-2);
}
.ui-pill--ok { border-color: rgba(31,111,74,0.32); background: rgba(31,111,74,0.09); color: var(--ok); }

.ui-avs { display: inline-flex; flex: none; }
.ui-avs .ui-av + .ui-av { margin-inline-start: -0.35em; }
.ui-av {
  width: 2em; height: 2em; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.78em; font-weight: 700; letter-spacing: 0.02em;
  background: #E6E1D8; color: #5A6068;
  border: 1.5px solid #FFFFFF; flex: none;
}
.ui-av--2 { background: #EADFDA; color: #6E5A54; }
.ui-av--3 { background: #DDE5E3; color: #4C625F; }

.ui-frame { display: grid; grid-template-columns: 12.5em 1fr; }
.ui-rail {
  display: flex; flex-direction: column; gap: 0.18em;
  padding: 1.1em 0.8em;
  border-inline-end: 1px solid rgba(18,22,28,0.08);
  background: rgba(18,22,28,0.022);
}
.ui-rail-label {
  font-size: 0.8em; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-3); padding: 0.9em 0.7em 0.45em;
}
.ui-rail-item {
  display: flex; align-items: center; gap: 0.65em;
  padding: 0.52em 0.7em; border-radius: 7px;
  font-weight: 600; color: var(--ink-2);
}
.ui-rail-item .ico { width: 1.25em; height: 1.25em; color: var(--ink-3); flex: none; }
.ui-rail-item.is-on { background: var(--seal-wash); color: var(--ink); }
.ui-rail-item.is-on .ico { color: var(--seal); }
.ui-rail-item b {
  margin-inline-start: auto; font-size: 0.85em; font-weight: 700;
  padding: 0.05em 0.42em; border-radius: 5px;
  background: rgba(18,22,28,0.07); color: var(--ink-2);
}
.ui-rail-item b.is-warn { background: rgba(138,95,11,0.13); color: var(--warn); }

.ui-main, .ui-pad { padding: 1.3em 1.4em 1.5em; }
.ui-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1em; margin-bottom: 1.15em; }
.ui-title { display: block; font-family: var(--font-text); font-size: 1.45em; font-weight: 600; letter-spacing: -0.03em; }
.ui-sub { display: block; font-size: 0.92em; color: var(--ink-3); font-weight: 500; }
.ui-btn {
  flex: none;
  padding: 0.5em 0.95em; border-radius: 999px;
  background: var(--ink); color: var(--paper);
  font-size: 0.92em; font-weight: 800; white-space: nowrap;
}
.ui-btn--wide { display: block; text-align: center; padding: 0.72em; margin-top: 1em; }

.ui-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7em; margin-bottom: 1.25em; }
.ui-kpis--3 { grid-template-columns: repeat(3, 1fr); }
.ui-kpi {
  padding: 0.85em 0.9em; border-radius: 9px;
  border: 1px solid rgba(18,22,28,0.1);
  background: rgba(18,22,28,0.018);
  display: flex; flex-direction: column; gap: 0.18em;
}
.ui-kpi-l { font-size: 0.88em; font-weight: 600; color: var(--ink-3); }
.ui-kpi-v { font-family: var(--font-text); font-size: 1.5em; font-weight: 600; letter-spacing: -0.035em; }
.ui-kpi-v em { font-style: normal; font-size: 0.62em; color: var(--ink-3); margin-inline-start: 0.1em; }
/* Coloured by whether the movement is good for the firm, not by its sign:
   receivables ageing down and WIP over 90 days down are both wins, and
   painting them red because the number fell would misread the data. */
.ui-kpi-d { font-size: 0.85em; font-weight: 700; color: var(--ink-3); }
.ui-kpi-d.is-good { color: var(--ok); }
.ui-kpi-d.is-bad { color: var(--risk); }

.ui-split { display: grid; grid-template-columns: 1fr 15.5em; gap: 0.9em; align-items: start; }

.ui-list { display: flex; flex-direction: column; border-radius: 10px; border: 1px solid rgba(18,22,28,0.1); overflow: hidden; }
.ui-list--flat { border: 0; border-radius: 0; }
.ui-row {
  display: grid;
  grid-template-columns: 4.6em 1fr auto auto;
  align-items: center; gap: 0.9em;
  padding: 0.72em 0.9em;
  border-bottom: 1px solid rgba(18,22,28,0.07);
}
.ui-row:last-child { border-bottom: 0; }
.ui-row:nth-child(odd) { background: rgba(18,22,28,0.015); }
.ui-row-key { font-size: 0.86em; font-weight: 700; color: var(--ink-3); letter-spacing: 0.02em; }
.ui-row-main { min-width: 0; }
.ui-row-main b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-row-main b.ar { font-weight: 500; }
.ui-amt { font-family: var(--font-text); font-weight: 600; font-size: 1.02em; letter-spacing: -0.02em; }

.ui-tag {
  padding: 0.24em 0.62em; border-radius: 5px;
  font-size: 0.85em; font-weight: 700; white-space: nowrap;
  border: 1px solid transparent;
}
.tag-ok   { background: rgba(31,111,74,0.1);  color: var(--ok);   border-color: rgba(31,111,74,0.26); }
.tag-warn { background: rgba(138,95,11,0.1);  color: var(--warn); border-color: rgba(138,95,11,0.26); }
.tag-risk { background: var(--seal-wash);     color: var(--seal-deep); border-color: var(--seal-line); }
.tag-idle { background: rgba(18,22,28,0.05);  color: var(--ink-2); border-color: rgba(18,22,28,0.12); }
.is-ok { color: var(--ok); }
.is-warn { color: var(--warn); }

.ui-side { display: flex; flex-direction: column; gap: 0.7em; }
.ui-card {
  display: flex; flex-direction: column; gap: 0.5em;
  padding: 0.9em; border-radius: 10px;
  border: 1px solid rgba(18,22,28,0.1);
  background: rgba(18,22,28,0.018);
}
.ui-card-h {
  display: flex; align-items: center; gap: 0.45em;
  font-size: 0.86em; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-3);
}
.ui-card-h .ico { width: 1.15em; height: 1.15em; }
.ui-card--ai { background: linear-gradient(160deg, rgba(166,48,31,0.09), rgba(166,48,31,0.01)); border-color: var(--seal-line); }
.ui-card--ai .ui-card-h { color: var(--seal-deep); }
.ui-ai-q { font-weight: 600; color: var(--ink-2); }
.ui-ai-a { color: var(--ink); }

.ui-mini {
  display: flex; align-items: center; gap: 0.6em;
  font-size: 0.94em; color: var(--ink-2);
}
.ui-mini i { font-style: normal; font-size: 0.9em; font-weight: 700; color: var(--ink-3); flex: none; min-width: 3.4em; }
.ui-mini b { margin-inline-start: auto; font-weight: 700; color: var(--ink); }
.ui-mini--sum { padding-top: 0.5em; border-top: 1px solid rgba(18,22,28,0.1); font-weight: 700; color: var(--ink); }
.ui-mini > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Matter record */
.ui-matter-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1em; margin-bottom: 1em; }
.ui-matter-title { display: block; font-size: 1.25em; font-weight: 600; letter-spacing: -0.01em; }
.ui-meta {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75em 1em;
  padding: 0.95em; margin-bottom: 1em;
  border-radius: 9px; border: 1px solid rgba(18,22,28,0.1); background: rgba(18,22,28,0.02);
}
.ui-meta span { display: flex; flex-direction: column; gap: 0.1em; font-weight: 600; }
.ui-meta i { font-style: normal; font-size: 0.85em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.ui-timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5em; position: relative; }
.ui-tl-item { display: flex; flex-direction: column; gap: 0.35em; font-weight: 600; color: var(--ink-3); font-size: 0.94em; }
.ui-tl-item i {
  display: block; height: 3px; border-radius: 999px; background: rgba(18,22,28,0.12); margin-bottom: 0.25em;
}
.ui-tl-item em { font-style: normal; font-size: 0.9em; color: var(--ink-3); }
.ui-tl-item.is-done { color: var(--ink-2); }
.ui-tl-item.is-done i { background: rgba(31,111,74,0.55); }
.ui-tl-item.is-now { color: var(--ink); }
.ui-tl-item.is-now i { background: var(--seal); }

/* Documents */
.ui-docsplit { display: grid; grid-template-columns: 13em 1fr; min-height: 15em; }
.ui-doclist { display: flex; flex-direction: column; gap: 0.15em; padding: 0.8em; border-inline-end: 1px solid rgba(18,22,28,0.08); background: rgba(18,22,28,0.02); }
.ui-docitem { display: grid; grid-template-columns: auto 1fr; gap: 0.2em 0.55em; padding: 0.55em 0.6em; border-radius: 7px; color: var(--ink-2); }
.ui-docitem .ico { width: 1.2em; height: 1.2em; grid-row: span 2; color: var(--ink-3); }
.ui-docitem b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-docitem em { font-style: normal; font-size: 0.86em; color: var(--ink-3); }
.ui-docitem.is-on { background: rgba(18,22,28,0.055); color: var(--ink); }
.ui-docview { padding: 1.2em 1.3em; display: flex; flex-direction: column; gap: 0.7em; }
.ui-docview .ar-doc { color: var(--ink-2); font-size: 1.02em; }
.ui-clause mark {
  background: var(--seal-wash);
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--seal);
  padding: 0.05em 0.15em;
  border-radius: 2px;
}

/* Client portal */
.ui--portal { background: linear-gradient(178deg, #FFFFFF 0%, #F7F4F0 62%); }
.ui-portal-status { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35em; margin-bottom: 1em; }
.ui-portal-rows { display: flex; flex-direction: column; gap: 0.35em; }
.ui-portal-row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.7em;
  padding: 0.7em 0.85em; border-radius: 9px;
  border: 1px solid rgba(18,22,28,0.1); background: rgba(18,22,28,0.02);
  font-weight: 600;
}
.ui-portal-row .ico { width: 1.25em; height: 1.25em; color: var(--ink-3); }
.ui-portal-row em { font-style: normal; font-size: 0.9em; color: var(--ink-3); font-weight: 600; }

/* Time capture */
.ui-cap-sum { display: grid; grid-template-columns: auto 1fr; gap: 0.15em 0.7em; align-items: baseline; margin-bottom: 1.1em; }
.ui-cap-sum b { font-family: var(--font-text); font-size: 2.1em; font-weight: 600; letter-spacing: -0.04em; grid-row: span 2; }
.ui-cap-sum > span:first-of-type { font-weight: 600; color: var(--ink-2); }
.ui-cap-bar { grid-column: 2; display: block; height: 5px; border-radius: 999px; background: rgba(18,22,28,0.1); overflow: hidden; }
.ui-cap-bar u { display: block; height: 100%; width: var(--w); border-radius: 999px; background: linear-gradient(90deg, var(--ink-2), var(--ink)); }
.ui-cap-sum .ui-sub { grid-column: 2; }
.ui-caps { display: flex; flex-direction: column; gap: 0.35em; }
.ui-cap {
  display: grid; grid-template-columns: 3.4em auto 1fr auto auto; align-items: center; gap: 0.75em;
  padding: 0.62em 0.8em; border-radius: 9px;
  border: 1px solid rgba(18,22,28,0.08); background: rgba(18,22,28,0.016);
}
.ui-cap-t { font-style: normal; font-size: 0.88em; font-weight: 700; color: var(--ink-3); }
.ui-cap .ico { width: 1.2em; height: 1.2em; color: var(--ink-3); }
.ui-cap b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ui-cap em { font-style: normal; font-family: var(--font-text); font-weight: 600; letter-spacing: -0.02em; }
.ui-cap u {
  text-decoration: none; font-size: 0.86em; font-weight: 700;
  padding: 0.22em 0.55em; border-radius: 5px;
  border: 1px solid rgba(18,22,28,0.14); color: var(--ink-2);
}
.ui-cap u.ui-ok { border-color: rgba(31,111,74,0.3); background: rgba(31,111,74,0.1); color: var(--ok); padding: 0.22em 0.4em; display: inline-flex; }
.ui-cap u.ui-ok .ico { width: 1em; height: 1em; color: inherit; }
.ui-cap.is-pending { border-color: rgba(138,95,11,0.24); background: rgba(138,95,11,0.05); }
.ui-cap.is-pending u { border-color: rgba(138,95,11,0.35); color: var(--warn); }

/* Receivables */
.ui-aged { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7em; align-items: end; height: 8.5em; margin-bottom: 1.1em; }
.ui-aged-col { display: flex; flex-direction: column; justify-content: flex-end; gap: 0.3em; height: 100%; }
.ui-aged-col i {
  display: block; height: var(--h); border-radius: 7px 7px 2px 2px;
  background: linear-gradient(180deg, rgba(18,22,28,0.62), rgba(18,22,28,0.1));
}
.ui-aged-col i.is-warn { background: linear-gradient(180deg, rgba(138,95,11,0.7), rgba(138,95,11,0.1)); }
.ui-aged-col i.is-risk { background: linear-gradient(180deg, rgba(166,48,31,0.85), rgba(166,48,31,0.12)); }
.ui-aged-col b { font-size: 0.88em; font-weight: 700; color: var(--ink-3); }
.ui-aged-col em { font-style: normal; font-family: var(--font-text); font-weight: 600; letter-spacing: -0.02em; }

/* Client funds */
.ui-vault { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7em; margin-bottom: 1em; }
.ui-vault span {
  display: flex; flex-direction: column; gap: 0.15em;
  padding: 0.8em 0.9em; border-radius: 9px;
  border: 1px solid rgba(18,22,28,0.1); background: rgba(18,22,28,0.018);
}
.ui-vault i { font-style: normal; font-size: 0.86em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.ui-vault b { font-family: var(--font-text); font-size: 1.22em; font-weight: 600; letter-spacing: -0.03em; }
.ui-ledger { display: flex; flex-direction: column; border-radius: 9px; border: 1px solid rgba(18,22,28,0.1); overflow: hidden; margin-bottom: 1em; }
.ui-led, .ui-led-h { display: grid; grid-template-columns: 4.6em 1fr 5em 5em 6em; gap: 0.6em; padding: 0.6em 0.9em; align-items: center; }
.ui-led-h { background: rgba(18,22,28,0.03); }
.ui-led-h i { font-style: normal; font-size: 0.85em; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); }
.ui-led { border-top: 1px solid rgba(18,22,28,0.07); }
.ui-led i { font-style: normal; font-weight: 600; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-led i:nth-child(n+3) { text-align: end; font-family: var(--font-text); letter-spacing: -0.02em; }
.ui-led i:last-child { color: var(--ink); font-weight: 600; }
.ui-guard {
  display: grid; grid-template-columns: auto 1fr; gap: 0.2em 0.7em;
  padding: 0.85em 0.95em; border-radius: 9px;
  border: 1px solid var(--seal-line); background: var(--seal-wash);
}
.ui-guard .ico { width: 1.35em; height: 1.35em; color: var(--risk); grid-row: span 2; }
.ui-guard b { font-weight: 700; color: var(--seal-deep); }

/* Insights / reports charts */
.ui-graph { position: relative; margin-bottom: 1em; }
.ui-graph svg { width: 100%; height: 9em; display: block; }
.ui-grid-l { stroke: rgba(18,22,28,0.08); stroke-width: 1; }
.ui-legend { display: flex; align-items: center; gap: 0.45em; font-size: 0.88em; font-weight: 600; color: var(--ink-3); }
.ui-legend i { width: 0.7em; height: 0.7em; border-radius: 2px; display: inline-block; }
.ui-legend i.is-v { background: var(--ink); }
.ui-legend i.is-d { background: rgba(18,22,28,0.28); margin-inline-start: 0.9em; }
.ui-legend i.is-b { background: var(--warn); margin-inline-start: 0.9em; }
.ui-report-main .ui-graph svg { height: 5.5em; }
.ui-report-main .ui-report-h--sm { margin-top: 1.3em; }
.ui-earners { display: flex; flex-direction: column; gap: 0.45em; }
.ui-earner { display: grid; grid-template-columns: 7em 1fr 2.6em; align-items: center; gap: 0.7em; font-weight: 600; }
.ui-earner i { display: block; height: 6px; border-radius: 999px; background: rgba(18,22,28,0.09); overflow: hidden; }
.ui-earner u { display: block; height: 100%; width: var(--w); border-radius: 999px; background: linear-gradient(90deg, var(--ink-2), var(--ink)); }
.ui-earner u.is-warn { background: linear-gradient(90deg, rgba(138,95,11,0.55), var(--warn)); }
.ui-earner em { font-style: normal; text-align: end; font-family: var(--font-text); font-weight: 600; letter-spacing: -0.02em; }

.ui-report { display: grid; grid-template-columns: 1fr 15em; gap: 1.4em; }
.ui-report-h { display: block; font-size: 0.86em; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.9em; }
.ui-report-h--sm { margin-top: 1.1em; }
.ui-hbars { display: flex; flex-direction: column; gap: 0.7em; }
.ui-hbar { display: grid; grid-template-columns: 13.5em minmax(0, 1fr) 5.5em; align-items: center; gap: 0.8em; font-weight: 600; }
.ui-hbar b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-hbar i { display: block; height: 9px; border-radius: 999px; background: rgba(18,22,28,0.08); overflow: hidden; }
.ui-hbar u { display: block; height: 100%; width: var(--w); border-radius: 999px; background: linear-gradient(90deg, rgba(18,22,28,0.45), var(--ink)); }
.ui-hbar u.is-warn { background: linear-gradient(90deg, rgba(138,95,11,0.4), var(--warn)); }
.ui-hbar em { font-style: normal; text-align: end; font-family: var(--font-text); font-weight: 600; letter-spacing: -0.025em; }
.ui-report-side { display: flex; flex-direction: column; gap: 0.4em; padding-inline-start: 1.4em; border-inline-start: 1px solid rgba(18,22,28,0.1); }
.ui-donut { position: relative; width: 100%; max-width: 11em; margin: 0 auto 0.6em; }
.ui-donut svg { width: 100%; height: auto; }
.ui-donut-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ui-donut-c b { font-family: var(--font-text); font-size: 1.8em; font-weight: 600; letter-spacing: -0.04em; }
.ui-donut-c i { font-style: normal; font-size: 0.88em; font-weight: 600; color: var(--ink-3); }
.ui-report-note { display: flex; align-items: center; gap: 0.5em; font-size: 0.9em; font-weight: 600; color: var(--ink-3); }
.ui-report-note i { width: 0.7em; height: 0.7em; border-radius: 2px; flex: none; }
.ui-report-note i.is-v { background: var(--ink); }
.ui-report-note i.is-b { background: var(--warn); }

/* AI review */
.ui-review { display: grid; grid-template-columns: minmax(0, 1fr) 17.5em; min-height: 14em; }
.ui-review-doc { min-width: 0; padding: 1.2em 1.3em; display: flex; flex-direction: column; gap: 0.7em; border-inline-end: 1px solid rgba(18,22,28,0.08); }
.ui-review-doc .ar-doc { color: var(--ink-2); font-size: 1.02em; }
.ui-flag mark { background: transparent; color: var(--ink); padding: 0.05em 0.15em; border-radius: 2px; }
.ui-flag--risk mark { background: var(--seal-wash); box-shadow: inset 0 -2px 0 var(--seal); }
.ui-flag--warn mark { background: rgba(138,95,11,0.1); box-shadow: inset 0 -2px 0 rgba(138,95,11,0.6); }
.ui-findings { min-width: 0; display: flex; flex-direction: column; gap: 0.55em; padding: 1em; background: rgba(18,22,28,0.028); }
.ui-find {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.25em 0.6em;
  padding: 0.7em 0.8em; border-radius: 9px;
  border: 1px solid rgba(18,22,28,0.1); background: var(--surface-3);
}
.ui-find > b, .ui-find > em { min-width: 0; }
.ui-find i { width: 0.55em; height: 0.55em; border-radius: 50%; margin-top: 0.45em; grid-row: span 3; }
.ui-find--risk i { background: var(--risk); }
.ui-find--warn i { background: var(--warn); }
.ui-find--miss i { background: var(--ink-3); }
.ui-find b { font-weight: 700; }
.ui-find em { font-style: normal; font-size: 0.94em; color: var(--ink-3); line-height: 1.5; }
.ui-find .cite { margin-top: 0.35em; justify-self: start; max-width: 100%; font-family: var(--font-ar-ui); }
/* The seal wraps rather than clipping: an article reference that runs off the
   edge of its own panel is the opposite of what this mark is for. */
.cite { white-space: normal; }
.ui-card > .cite { align-self: flex-start; }

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee-sec { padding-top: clamp(7rem, 12vw, 12rem); }
.marquee-label {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 2.6rem;
}
.marquee {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 5rem);
  width: max-content;
  animation: marquee 46s linear infinite;
}
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }

.firm {
  display: inline-flex; align-items: center; gap: 0.7rem;
  color: var(--ink-3);
  flex: none;
  transition: color 0.5s var(--ease);
}
.marquee .firm:hover { color: var(--ink-2); }
.firm svg { width: 30px; height: 30px; flex: none; opacity: 0.85; }
.firm b {
  font-family: var(--font-text);
  font-size: 1.02rem; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap;
}
.firm b.ar { font-family: var(--font-ar-ui); font-weight: 500; }
.firm em { font-style: normal; font-weight: 400; opacity: 0.72; }

/* ==========================================================================
   MISSION
   ========================================================================== */
.mission { overflow: clip; }
.mission-field { width: 92vw; height: 60vw; max-width: 1300px; max-height: 780px; top: -18%; left: -22%; opacity: 0.55; }
.mission .shell { position: relative; z-index: 1; }
.mission-statement {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.35vw, 3rem);
  line-height: 1.24;
  letter-spacing: -0.015em;
  font-weight: 400;
  max-width: 24ch;
  color: var(--ink-2);
  text-wrap: pretty;
}
.mission-hi { color: var(--ink); }
.mission-close { margin-top: 2.6rem; max-width: 52ch; font-size: 1.05rem; }

/* ==========================================================================
   PRODUCT OVERVIEW
   ========================================================================== */
.tabs { margin-top: clamp(2.5rem, 5vw, 4rem); }
.tabs-bar {
  display: inline-flex;
  gap: 0.3rem;
  padding: 0.35rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  background: var(--surface-1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  margin-bottom: 2.2rem;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs-bar::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.66rem 1.15rem;
  border-radius: var(--r-pill);
  font-size: 0.92rem; font-weight: 700;
  color: var(--ink-3);
  white-space: nowrap;
  transition: color 0.4s var(--ease), background 0.4s var(--ease);
}
.tab .ico { width: 17px; height: 17px; }
.tab:hover { color: var(--ink-2); }
.tab[aria-selected="true"] { background: var(--surface-3); color: var(--ink); box-shadow: 0 1px 2px rgba(18,22,28,0.08); }

.ov-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.ov-panel[hidden] { display: none; }
/* Panels ship visible so a script failure leaves all of them readable. This
   hides the inactive ones for the moment between first paint and init; the
   flag is set inline in <head> and removed by script once the tablists own
   visibility, so a no-JS reader keeps every panel. */
.js-boot [data-initial-hidden] { display: none; }
.ov-copy .body-2 { margin-top: 1.1rem; }
.ov-shot { min-width: 0; }

/* ==========================================================================
   FEATURES
   ========================================================================== */
.features { overflow: clip; }
.features-field { width: 76vw; height: 76vw; max-width: 1000px; max-height: 1000px; top: 4%; right: -26%; opacity: 0.42; }
.features .shell { position: relative; z-index: 1; }

.feat { margin-top: clamp(2.5rem, 5vw, 4rem); }
.feat-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: clamp(2.2rem, 4vw, 3.4rem);
}
.feat-tab {
  position: relative;
  padding: 1.05rem 0.75rem;
  font-family: var(--font-text);
  font-size: clamp(0.92rem, 1.15vw, 1.08rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-3);
  transition: color 0.4s var(--ease);
}
.feat-tab::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--seal);
  transform: scaleX(0);
  transition: transform 0.55s var(--ease);
}
.feat-tab:hover { color: var(--ink-2); }
.feat-tab[aria-selected="true"] { color: var(--ink); }
.feat-tab[aria-selected="true"]::after { transform: scaleX(1); }

.feat-panel { display: grid; }
.feat-panel[hidden] { display: none; }
.feat-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: center;
}
.feat-copy .body-2 { margin-top: 1.15rem; }
.feat-list { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 1.7rem; }
.feat-list li { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start; color: var(--ink-2); font-size: 0.95rem; }
.feat-list .ico { width: 16px; height: 16px; color: var(--ink-3); margin-top: 0.28rem; }
.feat-quote {
  margin-top: 2rem;
  padding-inline-start: 1.3rem;
  border-inline-start: 1px solid var(--hairline-strong);
}
.feat-quote p { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 1.14rem; letter-spacing: -0.008em; line-height: 1.5; }
.feat-quote cite {
  display: block; margin-top: 0.7rem;
  font-style: normal; font-size: 0.86rem; font-weight: 700; color: var(--ink-2);
}
.feat-quote cite span { display: block; font-weight: 500; color: var(--ink-3); }
.feat-shot { min-width: 0; }

/* Accordion mode (mobile) — set by script below 900px */
.feat.is-acc .feat-bar { display: none; }
.feat.is-acc .feat-panel {
  display: grid;
  grid-template-rows: 0fr;
  border-bottom: 1px solid var(--hairline);
  transition: grid-template-rows 0.6s var(--ease);
}
.feat.is-acc .feat-panel[hidden] { display: grid; }
.feat.is-acc .feat-panel.is-open { grid-template-rows: 1fr; }
.feat.is-acc .feat-inner { overflow: hidden; visibility: hidden; grid-template-columns: 1fr; gap: 1.6rem;
  transition: visibility 0s linear 0.6s; }
.feat.is-acc .feat-panel.is-open .feat-inner { visibility: visible; transition-delay: 0s; }
.feat.is-acc .feat-panel.is-open .feat-inner { padding-bottom: 2.2rem; }
.feat-acc { display: none; }
.feat.is-acc .feat-acc {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-display);
  font-size: 1.16rem; font-weight: 400; letter-spacing: -0.012em;
  color: var(--ink-2);
  text-align: start;
}
.feat-acc .ico { width: 20px; height: 20px; color: var(--ink-3); transition: transform 0.5s var(--ease), color 0.4s var(--ease); flex: none; }
.feat-acc[aria-expanded="true"] { color: var(--ink); border-bottom-color: transparent; }
.feat-acc[aria-expanded="true"] .ico { transform: rotate(180deg); color: var(--ink); }

/* ==========================================================================
   SOLUTIONS
   ========================================================================== */
.sol-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr);
  grid-template-rows: auto auto;
  gap: clamp(1rem, 1.6vw, 1.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.sol-hero {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(1.8rem, 3vw, 2.8rem);
  padding: clamp(1.6rem, 2.8vw, 2.6rem);
  background: linear-gradient(165deg, var(--seal-wash), rgba(255,255,255,0.5) 46%);
}
.sol-tag {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--seal-deep);
  margin-bottom: 1.1rem;
}
.sol-tag .ico { width: 15px; height: 15px; }
.sol-hero-copy .body-2 { margin-top: 1.1rem; margin-bottom: 1.9rem; }
.sol-hero-shot { min-width: 0; }

.sol-card { padding: clamp(1.5rem, 2.4vw, 2rem); display: flex; flex-direction: column; }
.sol-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid var(--hairline-strong);
  background: var(--surface-3);
  color: var(--ink-2);
  margin-bottom: 1.2rem;
}
.sol-ico .ico { width: 21px; height: 21px; }
.sol-card-h {
  font-family: var(--font-display);
  font-size: 1.3rem; font-weight: 400; letter-spacing: -0.014em;
  margin-bottom: 0.7rem;
  text-wrap: balance;
}
.sol-mini { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 1.2rem; }
.sol-mini li { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: start; font-size: 0.9rem; color: var(--ink-3); }
.sol-mini .ico { width: 15px; height: 15px; color: var(--ink-3); margin-top: 0.24rem; }

/* ==========================================================================
   TESTIMONIAL
   ========================================================================== */
.testimonial {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr) 15.5rem;
  gap: clamp(1.8rem, 3.4vw, 3.4rem);
  align-items: center;
  padding: clamp(1.8rem, 3vw, 3rem);
  background: linear-gradient(150deg, var(--paper-deep), rgba(255,255,255,0.55) 52%);
}
.testimonial-field { width: 46rem; height: 34rem; top: -40%; left: -14%; opacity: 0.7; }
/* :not(.field) matters: the glow is absolutely positioned, and forcing every
   child to position:relative would drop it back into the grid as a fourth
   track — 46rem wide — which blows the quote column out of the card. */
.testimonial > *:not(.field) { position: relative; z-index: 1; }

.tm-portrait { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; }
.tm-plate {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.4rem;
  padding: 1.5rem 1rem;
  text-align: center;
  background:
    linear-gradient(150deg, rgba(255,255,255,0.9), rgba(255,255,255,0.2) 48%, rgba(18,22,28,0.06)),
    linear-gradient(180deg, #EFEBE3, #E2DDD3);
  border: 1px solid var(--hairline-strong);
  border-radius: inherit;
}
.tm-plate::after {
  content: "";
  position: absolute; inset: 0.55rem;
  border: 1px solid var(--hairline);
  border-radius: 12px;
}
.tm-plate-ar { font-family: var(--font-ar-doc); font-size: 1.75rem; color: var(--ink); line-height: 1.5; }
.tm-plate-en { font-family: var(--font-text); font-size: 1.02rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-2); }
.tm-plate-rule { width: 2.6rem; height: 1px; background: var(--hairline-bright); margin: 0.3rem 0; }
.tm-plate-role { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
.tm-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.tm-firm { color: var(--ink-2); margin-bottom: 1.5rem; }
.tm-firm svg { width: 26px; height: 26px; }
.tm-quote p {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.85vw, 1.72rem);
  line-height: 1.36;
  letter-spacing: -0.014em;
  font-weight: 500;
  text-wrap: pretty;
}
.tm-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.4rem; margin-top: 2rem; }
.tm-cite { font-style: normal; font-weight: 700; font-size: 0.95rem; }
.tm-cite span { display: block; font-weight: 500; font-size: 0.88rem; color: var(--ink-3); margin-top: 0.15rem; }

.tm-stat {
  display: flex; flex-direction: column; gap: 0.4rem;
  padding: clamp(1.3rem, 2vw, 1.7rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--seal-line);
  background: linear-gradient(160deg, var(--seal-wash), rgba(166,48,31,0.015));
}
.tm-stat-v {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4vw, 3.5rem);
  font-weight: 400; letter-spacing: -0.018em; line-height: 1;
  color: var(--ink);
}
.tm-stat-l { font-weight: 700; font-size: 0.98rem; }
.tm-stat-note { font-size: 0.84rem; color: var(--ink-2); line-height: 1.5; margin-top: 0.4rem; }

/* ==========================================================================
   STATS BAND
   ========================================================================== */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(3rem, 5vw, 4.5rem);
  text-align: center;
}
.stat { position: relative; padding-inline: 1rem; }
.stat + .stat::before {
  content: "";
  position: absolute; left: 0; top: 12%; bottom: 12%; width: 1px;
  background: linear-gradient(180deg, transparent, var(--hairline) 30%, var(--hairline) 70%, transparent);
}
.stat-v {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 5.4rem);
  font-weight: 400;
  letter-spacing: -0.018em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-l { display: block; margin-top: 0.9rem; color: var(--ink-3); font-weight: 600; font-size: 0.95rem; }

/* ==========================================================================
   INTEGRATIONS
   ========================================================================== */
.int-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: clamp(0.9rem, 1.8vw, 1.6rem) 0.6rem;
  margin-top: clamp(3rem, 5vw, 4.5rem);
}
.int { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; text-align: center; }
.int-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: clamp(48px, 5.2vw, 62px); aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: var(--surface-1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--ink-2);
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), color 0.5s var(--ease), background 0.5s var(--ease);
}
.int-badge svg { width: 52%; height: 52%; }
/* No hover lift: these badges are labels, not controls. */
.int b { font-size: 0.76rem; font-weight: 600; color: var(--ink-3); line-height: 1.3; }

.int-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 1.6vw, 1.5rem);
  margin-top: clamp(3rem, 5vw, 4.5rem);
}
.int-card { display: flex; flex-direction: column; }
.int-card .body-2 { margin-bottom: 1.4rem; }
.int-card .link-arrow { margin-top: auto; align-self: flex-start; padding-top: 1.5rem; }
.code {
  padding: 1.05rem 1.15rem;
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  background: rgba(18,22,28,0.04);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.78rem;
  line-height: 1.75;
  color: var(--ink-2);
  overflow-x: auto;
}
.code b { color: var(--seal-deep); font-weight: 700; }
.code i { color: var(--ink-3); font-style: normal; }

/* ==========================================================================
   PLATFORM SHOWCASE
   ========================================================================== */
.showcase { overflow: clip; }
.showcase-field { width: 70vw; height: 70vw; max-width: 900px; max-height: 900px; top: 12%; left: -22%; opacity: 0.4; }
.showcase .shell { position: relative; z-index: 1; }
.showcase-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.showcase-copy .lede { margin-top: 1.2rem; margin-bottom: 1.9rem; }
.showcase-shot { min-width: 0; }

/* ==========================================================================
   SECURITY
   ========================================================================== */
.sec-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  padding: clamp(1.8rem, 3.4vw, 3.4rem);
}
.sec-copy .display--section { font-size: clamp(1.9rem, 3vw, 2.7rem); }
.sec-copy .lede { margin-top: 1.2rem; }
.sec-ai {
  display: grid; grid-template-columns: auto 1fr; gap: 0.9rem;
  margin-top: 1.9rem; padding-top: 1.6rem;
  border-top: 1px solid var(--hairline);
  color: var(--ink-2); font-size: 0.94rem; line-height: 1.62;
}
.sec-ai .ico { width: 19px; height: 19px; color: var(--ink-2); margin-top: 0.2rem; }
.sec-ai b { color: var(--ink); }

.sec-badges { display: flex; flex-direction: column; gap: 0.8rem; }
.sec-badge {
  display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1.1rem;
  padding: 1.15rem 1.25rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline);
  background: var(--surface-1);
}
.sec-badge-mark {
  grid-row: span 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px;
  border: 1px solid var(--hairline-strong);
  background: var(--surface-3);
  color: var(--ink-2);
}
.sec-badge-mark .ico { width: 20px; height: 20px; }
.sec-badge b { font-family: var(--font-text); font-size: 1.02rem; font-weight: 600; letter-spacing: -0.02em; }
.sec-badge em { font-style: normal; font-size: 0.88rem; color: var(--ink-3); line-height: 1.5; }

/* ==========================================================================
   CASE STUDY
   ========================================================================== */
.cs-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(1.8rem, 3.4vw, 3.4rem);
  align-items: center;
  padding: clamp(1.4rem, 2.4vw, 2.2rem);
}
.cs-art {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: linear-gradient(160deg, #EFEAE1, #E4DED4 62%);
}
.cs-art-inner { position: absolute; inset: 0; padding: 1.4rem 1.5rem; display: flex; flex-direction: column; }
.cs-art-label { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.cs-chart { position: absolute; inset: auto 0 22% 0; width: 100%; height: 58%; }
.cs-art-bars { position: absolute; inset: auto 1.5rem 1.4rem 1.5rem; height: 26%; display: flex; align-items: flex-end; gap: 5px; }
.cs-art-bars i { flex: 1; height: var(--h); border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, rgba(18,22,28,0.4), rgba(18,22,28,0.05)); }
.cs-copy .body-2 { margin-top: 1.1rem; margin-bottom: 1.7rem; }
.cs-card:hover .link-arrow::after { transform: scaleX(1); }
.cs-card:hover .link-arrow .ico { transform: translateX(4px); }

/* ==========================================================================
   INSIGHTS
   ========================================================================== */
.ins-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.ins-controls { display: flex; gap: 0.6rem; flex: none; }
.ins-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  background: var(--surface-1);
  color: var(--ink-2);
  transition: background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.ins-btn:hover { background: var(--surface-3); color: var(--ink); border-color: var(--hairline-bright); }
.ins-btn[disabled] { opacity: 0.32; pointer-events: none; }
.ins-btn .ico { width: 20px; height: 20px; }

/* The rail bleeds to both viewport edges while its first card still lines up
   with the section heading, so a gutter-width padding stands in for the shell
   rather than a max-width the flex track would fight. */
.ins-rail {
  margin-top: clamp(2.2rem, 4vw, 3.2rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-behavior: smooth;
  padding-block: 0.5rem;
  padding-inline: max(var(--shell-pad), (100% - var(--shell)) / 2 + var(--shell-pad));
  scroll-padding-inline-start: max(var(--shell-pad), (100% - var(--shell)) / 2 + var(--shell-pad));
}
.ins-rail::-webkit-scrollbar { display: none; }
.ins-track { display: flex; gap: clamp(1rem, 1.6vw, 1.5rem); width: max-content; padding: 0; max-width: none; }
.ins-card {
  flex: 0 0 clamp(255px, 27vw, 330px);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  padding: 0.75rem 0.75rem 1.4rem;
}
.ins-thumb {
  display: block;
  aspect-ratio: 5 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 1.15rem;
  border: 1px solid var(--hairline);
}
.ins-thumb svg { width: 100%; height: 100%; }
.ins-thumb--1 { background: linear-gradient(158deg, #F1ECE3, #E4DED4); }
.ins-thumb--2 { background: linear-gradient(158deg, #F2EAE6, #E6DCD6); }
.ins-thumb--3 { background: linear-gradient(158deg, #E9EFEB, #DDE4DE); }
.ins-thumb--4 { background: linear-gradient(158deg, #EFEDE6, #E2DFD5); }
.ins-cat {
  display: inline-block; align-self: flex-start;
  margin-inline: 0.55rem;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.7rem;
}
.ins-title {
  font-family: var(--font-display);
  font-size: 1.18rem; font-weight: 400; letter-spacing: -0.014em; line-height: 1.34;
  margin-inline: 0.55rem;
  text-wrap: pretty;
}
.ins-meta {
  display: flex; align-items: center; gap: 0.6rem;
  margin: auto 0.55rem 0;
  padding-top: 1.2rem;
  font-size: 0.84rem; font-weight: 600; color: var(--ink-3);
}
.ins-meta i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.ins-foot { margin-top: clamp(2rem, 3.5vw, 3rem); }

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r-2xl);
  border: 1px solid rgba(18,22,28,0.9);
  padding: clamp(3.5rem, 8vw, 7rem) clamp(1.5rem, 5vw, 5rem);
  text-align: center;
  background: linear-gradient(152deg, #1D222B 0%, #12161C 46%, #0B0E13 100%);

  /* The identity's Reversed plate, and the only dark surface on the page. Ink
     and Paper swap inside it rather than every child getting an override, so
     buttons, ledes, hairlines and notes all come out right on their own. */
  --ink: #F6F3EE;
  --ink-2: rgba(246, 243, 238, 0.74);
  --ink-3: rgba(246, 243, 238, 0.55);
  --paper: #12161C;
  --paper-lit: #12161C;
  --surface-3: rgba(246, 243, 238, 0.07);
  --hairline: rgba(246, 243, 238, 0.16);
  --hairline-strong: rgba(246, 243, 238, 0.28);
  --hairline-bright: rgba(246, 243, 238, 0.44);
  --seal-deep: #E4785F;
  --seal-line: rgba(228, 120, 95, 0.44);
  color: var(--ink);
}
.cta-tex { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.cta-video { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s var(--ease); }
.cta-video.is-ready { opacity: 0.42; }
/* Authored texture: a slow weave of light that reads as film grain in motion,
   replaced automatically when a real texture file is supplied. */
.cta-weave {
  position: absolute; inset: -30%;
  background:
    repeating-linear-gradient(115deg, rgba(166,48,31,0.22) 0 2px, transparent 2px 26px),
    repeating-linear-gradient(65deg, rgba(166,48,31,0.12) 0 2px, transparent 2px 34px);
  mask-image: radial-gradient(58% 58% at 50% 45%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(58% 58% at 50% 45%, #000, transparent 72%);
  animation: ctaWeave 34s linear infinite;
}
@keyframes ctaWeave {
  0%   { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(2%,-2%,0) rotate(1.5deg) scale(1.06); }
  100% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
}
.cta-sheen {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 34%, rgba(255,255,255,0.07) 48%, transparent 62%);
  animation: ctaSheen 11s var(--ease-soft) infinite;
}
@keyframes ctaSheen {
  0%, 62% { transform: translateX(-60%); opacity: 0; }
  72%     { opacity: 1; }
  100%    { transform: translateX(60%); opacity: 0; }
}
.cta-field-a { width: 46rem; height: 34rem; top: -46%; left: 6%; opacity: 0.55; z-index: -1; }
.cta-field-b { width: 52rem; height: 34rem; bottom: -52%; right: 2%; opacity: 0.75; z-index: -1; }

.cta-body { position: relative; max-width: 44rem; margin-inline: auto; }
.cta-h { max-width: 15ch; margin-inline: auto; }
.cta-lede { margin: 1.35rem auto 0; max-width: 46ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; margin-top: 2.4rem; }
.cta-note { margin-top: 1.6rem; font-size: 0.86rem; color: var(--ink-3); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { position: relative; padding-top: clamp(4rem, 7vw, 7rem); overflow: clip; }
.foot-top {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.35fr);
  gap: clamp(2.5rem, 5vw, 5rem);
}
.foot-mark { margin-bottom: 1.3rem; }
.foot-news-copy { color: var(--ink-3); font-size: 0.94rem; line-height: 1.6; max-width: 38ch; margin-bottom: 1.6rem; }
.news-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.news input {
  flex: 1 1 13rem;
  min-width: 0;
  padding: 0.9rem 1.1rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline-strong);
  background: var(--surface-3);
  color: var(--ink);
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.news input::placeholder { color: var(--ink-3); }
.news input:hover { border-color: var(--hairline-bright); }
.news input:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; background: var(--paper-lit); }
.news input[aria-invalid="true"] { border-color: var(--seal); }
.news-msg { margin-top: 0.75rem; font-size: 0.85rem; font-weight: 600; min-height: 1.2rem; color: var(--ink-3); }
.news-msg.is-err { color: var(--seal-deep); }
.news-msg.is-ok { color: var(--ok); }

.foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.5rem; }
.foot-h {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 1.1rem;
}
.foot-col ul { display: flex; flex-direction: column; gap: 0.72rem; }
.foot-col a {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.92rem; color: var(--ink-2);
  transition: color 0.3s var(--ease);
}
.foot-col a:hover { color: var(--ink); }
.foot-col .ico { width: 13px; height: 13px; opacity: 0.55; }

.foot-rule { margin-block: clamp(2.5rem, 4vw, 3.5rem) 1.8rem; }
.foot-legal { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.5rem 3rem; align-items: start; }
.foot-compliance { font-size: 0.875rem; line-height: 1.65; color: var(--ink-2); max-width: 68ch; }
.foot-meta { display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.82rem; color: var(--ink-3); justify-self: end; text-align: end; }
/* text-align on .foot-meta cannot reach these two: as flex items they are
   blockified to full-width flex containers, so the alignment has to be
   justify-content or they hang left while the copyright sits right. */
.foot-locale { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.45rem; }
.foot-locale .ico { width: 14px; height: 14px; }
.foot-locale i { font-style: normal; opacity: 0.4; }
.foot-locale a:hover { color: var(--ink); }

/* Colophon. The heart takes the line's own colour rather than a red of its
   own: brass is reserved for material that resolves to a source, and one
   14px glyph is not worth a new hue on a page this controlled. */
.foot-credit { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.4rem; }
.foot-heart { width: 13px; height: 13px; flex: none; }
.foot-credit a {
  color: var(--ink-2);
  font-weight: 600;
  transition: color 0.3s var(--ease);
}
.foot-credit a:hover { color: var(--ink); }

.foot-watermark {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
  pointer-events: none;
}
/* The wordmark sinks into the page edge. The fade is a mask on the element,
   not a gradient painted into the glyphs — same result, and the letterforms
   keep a single solid fill and a single solid stroke. */
.foot-watermark svg {
  display: block;
  width: 100%;
  height: auto;
  width: 106%;
  margin-inline-start: -3%;
  transform: translateY(7%);
  mask-image: linear-gradient(180deg, #000 14%, rgba(0,0,0,0.3) 78%, transparent 98%);
  -webkit-mask-image: linear-gradient(180deg, #000 8%, rgba(0,0,0,0.25) 74%, transparent 96%);
}
/* Fill and hairline rather than a tint: at this size the wordmark is a
   watermark pressed into the stock, and the edge is what makes it read as
   pressed rather than merely faint. */
.foot-watermark .wm-word { fill: rgba(18,22,28,0.055); stroke: rgba(18,22,28,0.13); stroke-width: 4; }
.foot-watermark .wm-punch { fill: rgba(166,48,31,0.13); }

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.lightbox { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem); }
.lightbox[hidden] { display: none; }
.lightbox-scrim {
  position: absolute; inset: 0;
  background: rgba(18, 22, 28, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0; transition: opacity 0.4s var(--ease);
}
.lightbox.is-open .lightbox-scrim { opacity: 1; }
.lightbox-inner {
  position: relative;
  width: min(1000px, 100%);
  opacity: 0; transform: translateY(14px) scale(0.985);
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
}
.lightbox.is-open .lightbox-inner { opacity: 1; transform: none; }
.lightbox-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; }
.lightbox-title { font-family: var(--font-text); font-size: 1.05rem; font-weight: 600; letter-spacing: -0.02em; }
.lightbox-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--hairline-strong); background: var(--surface-1); color: var(--ink-2);
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}
.lightbox-close:hover { background: var(--surface-3); color: var(--ink); }
.lightbox-close .ico { width: 20px; height: 20px; }
.lightbox-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--hairline-strong);
  background: var(--paper-deep);
  box-shadow: var(--shadow-deep);
}
.lightbox-video { width: 100%; height: 100%; object-fit: cover; }
.lightbox-fallback {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.9rem; padding: clamp(1.5rem, 4vw, 3rem); text-align: center;
  background: var(--paper-deep);
}
.lightbox-fallback[hidden] { display: none; }
.lightbox-fallback .body-2 { max-width: 46ch; font-size: 0.94rem; }
.lightbox-fallback-h { font-family: var(--font-display); font-size: 1.35rem; font-weight: 400; letter-spacing: -0.014em; }
.lightbox-fallback-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 50%;
  border: 1px solid var(--hairline-strong); background: var(--surface-3);
  color: var(--ink-2); margin-bottom: 0.4rem;
}
.lightbox-fallback-mark .ico { width: 24px; height: 24px; }
.lightbox-fallback .btn { margin-top: 0.6rem; }
body.is-locked { overflow: hidden; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1180px) {
  .nav-links { display: none; }
  .nav-inner { grid-template-columns: auto 1fr; }
  .nav-actions { gap: 0.7rem; }
  .testimonial { grid-template-columns: 12rem minmax(0, 1fr); }
  .tm-stat { grid-column: 1 / -1; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 0.3rem 1.2rem; }
  .tm-stat-note { width: 100%; margin-top: 0; }
  .int-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .ov-panel, .showcase-grid, .sec-wrap, .cs-card { grid-template-columns: 1fr; }
  .ov-panel { gap: 2rem; }
  .sol-grid { grid-template-columns: 1fr; }
  .sol-hero { grid-row: auto; }
  .cs-art { order: -1; }
  .foot-top { grid-template-columns: 1fr; }
  .foot-legal { grid-template-columns: 1fr; }
  .foot-meta { justify-self: start; text-align: start; }
  .foot-locale, .foot-credit { justify-content: flex-start; }
  .ui-report { grid-template-columns: 1fr; }
  .ui-report-side { padding-inline-start: 0; border-inline-start: 0; padding-top: 1.2em; border-top: 1px solid rgba(18,22,28,0.1); }
}

@media (max-width: 860px) {
  .nav-signin { display: none; }
  .nav-burger { display: inline-flex; }
  /* The pill stays in the bar rather than retreating into the drawer like
     `Sign in` — but the label drops to the accessible name only, so it fits a
     360px screen beside the wordmark, the demo button and the burger. The
     drawer carries the switch again, worded. (Below 360px even this is too
     much; see the rule further down.) */
  .nav-locale { padding: 0.5rem; }
  .nav-locale .ico { width: 20px; height: 20px; }
  .nav-locale-label {
    position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  /* A fourth item in the bar leaves no slack, and flex spends slack by
     squeezing: without this the burger collapses to a 14px tap target and the
     wordmark to a third of its width, worst on Arabic where the CTA is wider. */
  .nav-locale, .nav-burger, .nav-actions .btn { flex: none; }
  /* The mark is artwork with no intrinsic minimum, so a tight grid track
     squashes it rather than refusing; hold it at its drawn width. */
  .wordmark svg { min-width: 90px; }
  .nav-inner { gap: 0.9rem; }
  .nav-actions { gap: 0.5rem; }
  /* The CTA gives up the width the switch takes. It is the only item here with
     padding to spare, and Arabic — where the label is longest — is exactly the
     case that has to fit. */
  .nav-actions .btn { padding-inline: 0.85rem; }
  .hero-h1 { max-width: 100%; }
  .hero-stage { margin-bottom: clamp(-4rem, -6vw, -2rem); }
  .testimonial { grid-template-columns: 1fr; text-align: start; }
  .tm-portrait { max-width: 15rem; aspect-ratio: 1; }
  .int-cards { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; gap: 2.5rem; text-align: start; }
  .stat + .stat::before { top: -1.25rem; bottom: auto; left: 0; right: 0; width: auto; height: 1px;
    background: linear-gradient(90deg, var(--hairline), transparent 70%); }
  .stat { padding-inline: 0; }
  .ins-head { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .ui-split { grid-template-columns: 1fr; }
  .ui-frame { grid-template-columns: 1fr; }
  .ui-rail { display: none; }
  .ui-review, .ui-docsplit { grid-template-columns: 1fr; }
  .ui-review-doc { border-inline-end: 0; border-bottom: 1px solid rgba(18,22,28,0.08); }
  .ui-doclist { flex-direction: row; overflow-x: auto; border-inline-end: 0; border-bottom: 1px solid rgba(18,22,28,0.08); }
  .ui-docitem { flex: 0 0 11em; }
}

@media (max-width: 680px) {
  :root { --nav-h: 66px; }
  .hero { padding-top: calc(var(--nav-h) + 2.5rem); }
  .hero-proof { flex-direction: column; gap: 0.55rem; }
  .hero-ctas .btn { flex: 1 1 100%; }
  .hero-stage { perspective: none; }
  .hero-mockup { transform: none !important; }
  /* Phones get the poster frame, per the brief: no film is fetched, and the
     ambient loop is switched off rather than left running behind the headline,
     where the statute text it renders would compete with the copy for the same
     pixels. The poster is the whole background here. */
  .amb { display: none; }
  .hero-video { opacity: 1; object-fit: cover; object-position: 78% 42%; }
  .hero-scrim {
    background:
      linear-gradient(180deg, rgba(246,243,238,0.94) 0%, rgba(246,243,238,0.62) 28%, rgba(246,243,238,0.8) 62%, var(--ground) 100%);
  }
  .int-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem 0.4rem; }
  .int b { font-size: 0.68rem; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-kpis { grid-template-columns: repeat(2, 1fr); }
  .ui-meta { grid-template-columns: repeat(2, 1fr); }
  .ui-timeline { grid-template-columns: repeat(2, 1fr); gap: 0.8em; }
  .ui-row { grid-template-columns: 1fr auto; gap: 0.5em 0.7em; }
  .ui-row-key { grid-column: 1; font-size: 0.82em; }
  .ui-row-main { grid-column: 1 / -1; grid-row: 2; }
  .ui-row .ui-av { display: none; }
  .ui-led, .ui-led-h { grid-template-columns: 3.8em 1fr 4.4em 4.4em; }
  .ui-led i:nth-child(5), .ui-led-h i:nth-child(5) { display: none; }
  .ui-cap { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .ui-cap .ico { display: none; }
  .ui-cap u { justify-self: end; }
  .ui-cap b { white-space: normal; }
  .ui-avs { display: none; }
  .ui-hbar { grid-template-columns: 8em 1fr 4.6em; }
  .ui-earner { grid-template-columns: 5.5em 1fr 2.4em; }
  .ui-search { display: none; }
  .marquee-track { gap: 2.5rem; animation-duration: 34s; }
  .ins-card { flex: 0 0 80vw; }
  .sec-badge { grid-template-columns: 1fr; gap: 0.5rem; }
  .sec-badge-mark { grid-row: auto; }
}

@media (max-width: 540px) {
  /* The overview tab bar carries three labels; dropping the icons is cheaper
     than a scroller that hides the third one behind a fade. */
  .tabs-bar { width: 100%; justify-content: space-between; overflow: visible; }
  .tab { padding: 0.6rem 0.7rem; font-size: 0.82rem; }
  .tab .ico { display: none; }
}

@media (max-width: 420px) {
  .int-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tm-quote p { font-size: 1.12rem; }
}

/* Below 360px the bar cannot hold four controls without squeezing one of them
   to nothing — Arabic first, since its CTA is the longest label on the page.
   The switch is the one that steps out, because it is the only one repeated in
   the drawer. Everything above this width keeps it one tap away. */
@media (max-width: 359px) {
  .nav-locale { display: none; }
}

/* ==========================================================================
   REDUCED MOTION
   The hero swaps to its static poster frame, exactly as a paused film would
   look: the ambient loop is removed rather than frozen mid-dissolve, and the
   <video> element — which carries the poster and has no source yet — becomes
   the visible layer.
   ========================================================================== */
/* --- RTL ------------------------------------------------------------------
   Almost nothing, because the page is written in logical properties: `dir=rtl`
   on <html> flips the grids, the padding and the text on its own. What is left
   is the handful of places that are positioned in physical space on purpose.
   -------------------------------------------------------------------------- */

/* The ambient loop is pinned to the open side of the hero, opposite the
   headline column. Which side that is depends on the reading direction. */
[dir="rtl"] .amb {
  right: 30%;
  left: 0;
  mask-image: radial-gradient(66% 62% at 22% 52%, #000 8%, rgba(0,0,0,0.3) 54%, transparent 84%);
  -webkit-mask-image: radial-gradient(66% 62% at 22% 52%, #000 8%, rgba(0,0,0,0.3) 54%, transparent 84%);
}
[dir="rtl"] .amb-rows { left: auto; right: 46%; }
[dir="rtl"] .amb-rows span { transform-origin: right; }
[dir="rtl"] .amb-bars { right: auto; left: 5%; }
[dir="rtl"] .amb-doc { right: auto; left: 4%; }
[dir="rtl"] .amb-cite { right: auto; left: 5%; }
[dir="rtl"] .amb-time { right: auto; left: 2%; }

/* The hero scrim's horizontal wash sits under the copy column. */
[dir="rtl"] .hero-scrim {
  background:
    linear-gradient(180deg, rgba(246,243,238,0.94) 0%, rgba(246,243,238,0.42) 24%, rgba(246,243,238,0.40) 54%, rgba(246,243,238,0.88) 86%, var(--ground) 100%),
    linear-gradient(270deg, rgba(246,243,238,0.95) 0%, rgba(246,243,238,0.82) 26%, rgba(246,243,238,0.32) 58%, rgba(246,243,238,0.08) 82%);
}

/* Fields are decoration and are positioned physically; mirroring them keeps
   the composition rather than the coordinates. */
[dir="rtl"] .hero-field-a { right: auto; left: -12%; }
[dir="rtl"] .hero-field-b { left: auto; right: -14%; }
[dir="rtl"] .mission-field { left: auto; right: -22%; }
[dir="rtl"] .testimonial-field { left: auto; right: -14%; }
[dir="rtl"] .cta-field-a { left: auto; right: 6%; }
[dir="rtl"] .cta-field-b { right: auto; left: 2%; }

/* A number, an invoice id or a case reference inside Arabic prose is a mixed
   run, and the bidi algorithm resolves it against the paragraph unless it is
   told not to: "4412 / 91 Q" comes out as "Q 91 / 4412". `plaintext` derives
   each run's base direction from its own first strong character, which is the
   rule for content whose script is not known ahead of time. The product app
   solves this the same way, on its own text primitive. */
[lang="ar"] .ui :is(b, i, em, u, span, p, code, kbd) {
  unicode-bidi: plaintext;
}

/* The API sample and the code block are Latin by nature. */
[lang="ar"] .code { direction: ltr; text-align: left; }

/* A seal field is sized in viewport units, so on a phone the one blurred disc
   on the page covers the whole screen and stops reading as a flush under a
   section — Paper turns pink. Below the breakpoint the fields go quiet and the
   ruled grids carry the texture on their own. Placed here, after
   `.hero-field-b` and friends set their own opacities, so it wins on order. */
@media (max-width: 860px) {
  .field--seal { opacity: 0.22; }
}

@media (prefers-reduced-motion: reduce) {
  .amb { display: none; }
  .hero-video { opacity: 1; object-fit: cover; object-position: 78% 42%; }
  .marquee-track { animation: none; transform: none; }
  .marquee { mask-image: none; -webkit-mask-image: none; overflow-x: auto; }
  .cta-weave, .cta-sheen { animation: none; }
  .hero-eyebrow-dot { animation: none; }
}