/* ============================================================
   QANO AI — design tokens
   Direction: technical drawing / instrument panel.
   Grounded in what the company actually builds: closed, local,
   precise systems. Gold is the brand ink, used flat and sparingly.
   ============================================================ */
:root{
  color-scheme: dark;

  /* Ground — cool graphite, deliberately not the default near-black */
  --ink-900:#0B0D10;
  --ink-850:#0E1116;
  --ink-800:#12161C;
  --ink-700:#171C23;

  /* Structure */
  --line-soft:#191E25;
  --line:#222831;
  --line-strong:#2F3742;

  /* Text */
  --text:#E9ECF0;
  --text-dim:#98A1AD;
  --text-faint:#7E8794;

  /* Brand ink — brass. Carries identity, people, and every call to action. */
  --gold:#C9A961;
  --gold-bright:#DFC27D;
  --gold-deep:#8A7440;
  --gold-wash:rgba(201,169,97,0.10);
  --gold-line:rgba(201,169,97,0.28);

  /* Machine ink — blueprint blue. Carries anything the system does:
     live states, stack, telemetry, product screens. Splitting the two
     inks is what stops one accent colour from meaning everything. */
  --blue:#6F9BC6;
  --blue-bright:#93BADD;
  --blue-deep:#41607D;
  --blue-wash:rgba(111,155,198,0.10);
  --blue-line:rgba(111,155,198,0.30);

  /* Spacing — 4px base, nothing off-scale */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* Radius — near-square: spec sheet, not app store */
  --r-sm:3px; --r:4px; --r-lg:6px; --r-pill:999px;

  /* Motion */
  --dur-micro:150ms;
  --dur-small:240ms;
  --dur-med:360ms;
  --dur-slow:640ms;
  --ease-out:cubic-bezier(0.16,1,0.30,1);
  --ease-in:cubic-bezier(0.55,0,1,0.45);
  --stagger:70ms;

  /* Layers */
  --z-nav:100; --z-float:200; --z-panel:300;

  --maxw:1200px;
  --nav-h:72px;

  /* Type */
  --font-display:"Readex Pro","IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;
  --font-sans:"IBM Plex Sans Arabic","Segoe UI","Noto Sans Arabic",Tahoma,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"Cascadia Code",Consolas,monospace;

  --step-0:1rem;
  --step-1:1.125rem;
  --step-2:1.375rem;
  --step-3:1.75rem;
  --step-4:clamp(2rem,1.4rem + 2.6vw,2.75rem);
  --step-5:clamp(2.15rem,1.4rem + 4.2vw,4.25rem);
}

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

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + var(--s5))}

body{
  font-family:var(--font-sans);
  background:var(--ink-900);
  color:var(--text);
  font-size:var(--step-0);
  line-height:1.75;              /* Arabic needs the extra room */
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--gold);color:var(--ink-900)}

::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--ink-900)}
::-webkit-scrollbar-thumb{background:var(--line-strong);border:3px solid var(--ink-900);border-radius:var(--r-pill)}
::-webkit-scrollbar-thumb:hover{background:var(--gold-deep)}

/* --- Focus: visible everywhere, never removed --- */
:focus-visible{
  outline:2px solid var(--gold-bright);
  outline-offset:3px;
  border-radius:var(--r-sm);
}

.skip-link{
  position:absolute;inset-inline-start:var(--s4);top:-100px;
  background:var(--gold);color:var(--ink-900);
  padding:var(--s3) var(--s5);border-radius:var(--r);
  font-weight:600;z-index:calc(var(--z-panel) + 10);
  transition:top var(--dur-micro) var(--ease-out);
}
.skip-link:focus{top:var(--s4)}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ============================================================
   Typography
   ============================================================ */
/* Readex Pro is wide and low-contrast; it wants a tighter leading and
   zero tracking (Arabic is connected — negative tracking breaks joins). */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.28;letter-spacing:0;text-wrap:balance}
h1{font-size:var(--step-5);line-height:1.14;font-weight:700}
h2{font-size:var(--step-4);font-weight:600}
h3{font-size:var(--step-2)}
p{text-wrap:pretty}

/* The utility voice of the page: mono, tracked, uppercase-ish labels.
   Arabic is never letter-spaced — only the Latin/numeric variant is. */
.label{
  font-family:var(--font-mono);
  font-size:0.75rem;
  font-weight:500;
  color:var(--gold);
  letter-spacing:0.14em;
  text-transform:uppercase;
  line-height:1;
}
.label-ar{
  font-family:var(--font-sans);
  font-size:0.8125rem;
  font-weight:500;
  color:var(--gold);
  letter-spacing:0;          /* connected script — never track it */
  line-height:1;
}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ============================================================
   Layout primitives
   ============================================================ */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--s5)}
.section{padding-block:var(--s9)}
.section--tint{background:var(--ink-850);border-block:1px solid var(--line-soft)}

/* Section head: right-anchored with a rule that runs to the edge.
   Replaces the centred eyebrow / centred title / centred subhead stack. */
.sec-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:var(--s5);
  margin-bottom:var(--s8);
  padding-bottom:var(--s5);
  position:relative;
}
/* The rule under a section head is ruled in, right to left, as the head
   arrives — the page draws itself the way a drawing is drawn. */
.sec-head::after{
  content:"";position:absolute;inset-block-end:0;inset-inline:0;height:1px;
  background:var(--line);transform:scaleX(0);transform-origin:right;
  transition:transform 900ms var(--ease-out) 140ms;
}
.sec-head.is-in::after{transform:scaleX(1)}
.sec-head__title{max-width:min(34ch,100%)}
.sec-head__title .label-ar{display:block;margin-bottom:var(--s3)}
.sec-head__note{
  font-family:var(--font-mono);
  font-size:0.75rem;
  color:var(--text-faint);
  letter-spacing:0.08em;
  white-space:nowrap;
  padding-bottom:var(--s1);
  /* Latin + digits inside an RTL page: isolate so the runs don't reorder */
  direction:ltr;
  unicode-bidi:isolate;
  text-align:left;
}
.sec-head p{color:var(--text-dim);margin-top:var(--s3);max-width:min(56ch,100%)}
@media (max-width:640px){
  .sec-head{grid-template-columns:1fr}
  .sec-head__note{display:none}
}

/* ============================================================
   Panels — flat, hairline, near-square. No glassmorphism.
   ============================================================ */
.panel{
  background:var(--ink-800);
  border:1px solid var(--line);
  border-radius:var(--r);
  position:relative;
}
.panel--hover{
  transition:border-color var(--dur-small) var(--ease-out),
             background var(--dur-small) var(--ease-out),
             transform var(--dur-small) var(--ease-out);
}
.panel--hover:hover{border-color:var(--line-strong);background:var(--ink-700);transform:translateY(-3px)}

/* Signature: registration marks, like a drawing's corner ticks.
   Used only on the "why" panels and the hero console — one idea, few places. */
.ticked::before,.ticked::after{
  content:"";position:absolute;width:9px;height:9px;pointer-events:none;
  border-color:var(--gold);opacity:0;transition:opacity var(--dur-small) var(--ease-out);
}
.ticked::before{top:-1px;inset-inline-start:-1px;border-top:1px solid;border-inline-start:1px solid}
.ticked::after{bottom:-1px;inset-inline-end:-1px;border-bottom:1px solid;border-inline-end:1px solid}
.ticked:hover::before,.ticked:hover::after{opacity:1}

/* Blueprint grid — the page's ambient texture, replacing the particle canvas */
.grid-bg{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(var(--line-soft) 1px,transparent 1px),
    linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:80px 80px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 70% 35%,#000 0%,transparent 78%);
  mask-image:radial-gradient(ellipse 90% 70% at 70% 35%,#000 0%,transparent 78%);
}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  font-family:var(--font-sans);font-size:0.9375rem;font-weight:600;
  padding:var(--s3) var(--s5);
  min-height:48px;                   /* comfortable target */
  border-radius:var(--r);
  border:1px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:background var(--dur-micro) var(--ease-out),
             border-color var(--dur-micro) var(--ease-out),
             color var(--dur-micro) var(--ease-out),
             transform var(--dur-micro) var(--ease-out);
}
.btn:active{transform:translateY(1px)}
.btn--gold{background:var(--gold);color:var(--ink-900)}
.btn--gold:hover{background:var(--gold-bright)}
.btn--ghost{background:transparent;color:var(--gold);border-color:var(--gold-line)}
.btn--ghost:hover{background:var(--gold-wash);border-color:var(--gold)}
.btn--quiet{background:var(--ink-700);color:var(--text);border-color:var(--line)}
.btn--quiet:hover{border-color:var(--line-strong)}
.btn--block{width:100%}
.btn--sm{min-height:40px;padding:var(--s2) var(--s4);font-size:0.875rem}
.btn svg{flex:none}

/* ============================================================
   Navigation
   ============================================================ */
.nav{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:var(--z-nav);
  height:var(--nav-h);
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background var(--dur-small) var(--ease-out),
             border-color var(--dur-small) var(--ease-out),
             height var(--dur-med) var(--ease-out);
}
/* The bar settles once you leave the hero — less chrome while reading. */
.nav.is-stuck{height:60px}
.nav__progress{
  position:absolute;inset-block-end:-1px;inset-inline:0;height:1px;
  background:linear-gradient(to left,var(--gold),var(--blue));
  transform:scaleX(0);transform-origin:right;
  will-change:transform;
}
/* Solid once scrolled — a translucent bar lets body copy bleed through it */
.nav.is-stuck{background:var(--ink-900);border-bottom-color:var(--line)}
.nav__inner{
  max-width:var(--maxw);margin-inline:auto;height:100%;
  padding-inline:var(--s5);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
}
.brand{display:flex;align-items:center;gap:var(--s3);text-decoration:none}
.brand img{
  width:36px;height:36px;object-fit:cover;
  border:1px solid var(--line);border-radius:var(--r-sm);
}
.brand__name{
  font-family:var(--font-mono);font-weight:600;font-size:1rem;
  letter-spacing:0.16em;color:var(--gold);
}
.nav__links{display:flex;align-items:center;gap:var(--s6);list-style:none}
.nav__links a{
  text-decoration:none;color:var(--text-dim);font-size:0.9375rem;
  padding-block:var(--s2);position:relative;
  transition:color var(--dur-micro) var(--ease-out);
}
.nav__links a::after{
  content:"";position:absolute;inset-inline:0;bottom:0;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:right;
  transition:transform var(--dur-small) var(--ease-out);
}
.nav__links a:hover{color:var(--text)}
.nav__links a:hover::after{transform:scaleX(1)}
.nav__toggle{
  display:none;background:transparent;border:1px solid var(--line);
  color:var(--gold);width:44px;height:44px;border-radius:var(--r);
  align-items:center;justify-content:center;cursor:pointer;
}
.nav__mobile{
  position:absolute;inset-block-start:100%;inset-inline:0;
  background:var(--ink-850);border-bottom:1px solid var(--line);
  padding:var(--s5);
  transform-origin:top;
  animation:menuIn var(--dur-small) var(--ease-out);
}
@keyframes menuIn{from{opacity:0;transform:translateY(-8px)}}
.nav__mobile[hidden]{display:none}
.nav__mobile .btn{margin-top:var(--s4)}
.nav__mobile ul{list-style:none;display:flex;flex-direction:column;gap:var(--s1)}
.nav__mobile ul a{
  display:block;text-decoration:none;color:var(--text-dim);
  padding:var(--s3) var(--s2);border-radius:var(--r);
  border-bottom:1px solid var(--line-soft);
}
.nav__mobile ul a:hover{color:var(--gold)}
@media (max-width:900px){
  .nav__links,.nav__cta{display:none}
  .nav__toggle{display:flex}
}

/* ============================================================
   Hero — asymmetric: statement on the start side, the console
   on the end side. Not a centred column with a stat row under it.
   ============================================================ */
.hero{
  position:relative;
  padding-block:calc(var(--nav-h) + var(--s9)) var(--s9);
  overflow:hidden;
}
.hero__glow{
  position:absolute;z-index:0;pointer-events:none;
  inset-block-start:-12%;inset-inline-end:-8%;
  width:min(720px,90vw);aspect-ratio:1;
  background:radial-gradient(circle,rgba(201,169,97,0.09) 0%,transparent 68%);
}
.hero__inner{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);
  gap:var(--s8);align-items:center;
}
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:var(--s3);
  border:1px solid var(--gold-line);border-radius:var(--r-pill);
  padding:var(--s2) var(--s4);margin-bottom:var(--s5);
}
.hero__dot{
  width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none;
}
.hero h1 .accent{color:var(--gold);display:block}
.hero__lead{
  color:var(--text-dim);font-size:var(--step-1);
  max-width:min(52ch,100%);margin-block:var(--s5) var(--s7);
}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s3)}
.hero__lead strong{color:var(--gold);font-weight:600}

/* Risk-reversal line under the CTAs — the three objections that stop
   a first enquiry, answered before they're asked. */
.assure{
  list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);
  margin-top:var(--s5);font-size:0.8125rem;color:var(--text-faint);
}
.assure li{display:flex;align-items:center;gap:var(--s2)}
.assure li::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--gold);flex:none;
}

/* ============================================================
   SIGNATURE — the console.
   QANO sells manual work turned into a system that runs itself, on
   the client's own premises. So the hero doesn't describe that with
   four counting numbers; it runs one. A document walks the pipeline,
   the log stamps it with the real clock, and nothing leaves the box.
   Labelled as a simulation, because it is one.
   ============================================================ */
.console{padding:var(--s5) var(--s6) var(--s6);background:var(--ink-850)}
.console__head{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);padding-bottom:var(--s4);border-bottom:1px solid var(--line);
}
.console__state{
  display:flex;align-items:center;gap:var(--s2);
  font-family:var(--font-mono);font-size:0.6875rem;font-weight:500;
  letter-spacing:0.12em;color:var(--blue);
  direction:ltr;unicode-bidi:isolate;
}
.console__led{
  width:6px;height:6px;border-radius:50%;background:var(--blue);flex:none;
  animation:led 2.4s var(--ease-out) infinite;
}
@keyframes led{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(111,155,198,0.40)}
  55%{opacity:0.45;box-shadow:0 0 0 6px rgba(111,155,198,0)}
}

/* The pipeline: four stages, each with its own fill. Only one runs at
   a time — a filled bar sitting beside one that has not started reads
   as a queue, which is exactly what it is. With the caption and the log
   gone this is the panel's subject, so it is sized like one. */
.pipe{
  list-style:none;display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--s3);margin-top:var(--s6);
}
.pipe__stage{display:flex;flex-direction:column;gap:var(--s3)}
.pipe__name{
  font-size:0.875rem;color:var(--text-faint);line-height:1.4;
  transition:color var(--dur-small) var(--ease-out);
}
.pipe__bar{height:3px;background:var(--line);position:relative;overflow:hidden}
.pipe__bar::after{
  content:"";position:absolute;inset:0;background:var(--blue-deep);
  transform:scaleX(0);transform-origin:right;
  transition:none;
}
.pipe__stage.is-done .pipe__name{color:var(--text-dim)}
.pipe__stage.is-done .pipe__bar::after{
  transform:scaleX(1);
  transition:transform var(--dur-small) var(--ease-out);
}
.pipe__stage.is-live .pipe__name{color:var(--blue-bright)}
.pipe__stage.is-live .pipe__bar::after{
  background:var(--blue);transform:scaleX(1);
  transition:transform var(--fill,1s) linear;
}

/* One line, replaced in place, reporting what the pipeline is doing
   right now. A scrolling stack of log rows said the same thing three
   times over and was the busiest part of the panel.
   Sans for the Arabic, mono only for the timestamp — mono faces carry
   no Arabic, and a line that falls back halfway looks broken. */
.console__now{
  margin-top:var(--s6);padding-top:var(--s4);
  border-top:1px solid var(--line-soft);
  display:flex;align-items:baseline;gap:var(--s3);
  font-size:0.8125rem;color:var(--text-dim);line-height:1.5;
}
.console__now b{
  font-family:var(--font-mono);font-weight:500;font-size:0.75rem;
  color:var(--blue-deep);flex:none;
  direction:ltr;unicode-bidi:isolate;
}
.console__now span{
  min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  animation:nowIn 260ms var(--ease-out);
}
@keyframes nowIn{from{opacity:0;transform:translateY(4px)}}

/* Ledger: the company's real numbers, set as an instrument's cells
   rather than four hero-sized figures. Quiet on purpose — the running
   machine above is the claim; these are the footnote. */
.ledger{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  margin-top:var(--s6);background:var(--line);border:1px solid var(--line);
}
.ledger > div{
  background:var(--ink-850);padding:var(--s3) var(--s4);
  display:flex;flex-direction:column;gap:var(--s1);
}
.ledger dt{font-size:0.75rem;color:var(--text-faint);line-height:1.4}
.ledger dd{
  font-family:var(--font-mono);font-size:1.375rem;font-weight:600;
  color:var(--gold);line-height:1;font-variant-numeric:tabular-nums;
  /* keeps "50+" from rendering as "+50" under RTL */
  direction:ltr;unicode-bidi:isolate;text-align:left;
}
@media (max-width:900px){
  .hero__inner{grid-template-columns:1fr;gap:var(--s7)}
  .hero{padding-block:calc(var(--nav-h) + var(--s7)) var(--s7)}
}

/* ============================================================
   Trust strip
   ============================================================ */
.trust{border-block:1px solid var(--line);background:var(--ink-850)}
.trust__grid{
  display:grid;grid-template-columns:repeat(4,1fr);
}
.trust__item{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s5) var(--s4);
  border-inline-start:1px solid var(--line);
}
.trust__item:first-child{border-inline-start:0}
.trust__item svg{color:var(--gold);flex:none}
.trust__k{font-size:0.875rem;font-weight:600;line-height:1.4}
.trust__v{
  font-size:0.75rem;color:var(--blue);font-family:var(--font-mono);
  direction:ltr;unicode-bidi:isolate;text-align:right;
}
@media (max-width:860px){
  .trust__grid{grid-template-columns:repeat(2,1fr)}
  .trust__item:nth-child(odd){border-inline-start:0}
  .trust__item:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:420px){
  .trust__grid{grid-template-columns:1fr}
  .trust__item{border-inline-start:0}
  .trust__item + .trust__item{border-top:1px solid var(--line)}
}

/* ============================================================
   Card grids
   ============================================================ */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4)}
@media (max-width:960px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr}
}
@media (max-width:700px){
  .grid-4,.grid-2{grid-template-columns:1fr}
}

.card{padding:var(--s6)}
.card__icon{
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--gold-line);border-radius:var(--r);
  color:var(--gold);margin-bottom:var(--s5);
  transition:background var(--dur-small) var(--ease-out);
}
.card:hover .card__icon{background:var(--gold-wash)}
.card h3{margin-bottom:var(--s3);font-size:var(--step-1)}
.card p{color:var(--text-dim);font-size:0.9375rem}

/* Tech tags: square mono chips, not pill badges */
.tags{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5)}
.tag{
  font-family:var(--font-mono);font-size:0.6875rem;letter-spacing:0.06em;
  color:var(--blue);background:var(--blue-wash);
  border:1px solid var(--blue-line);border-radius:var(--r-sm);
  padding:3px var(--s2);line-height:1.6;
  transition:border-color var(--dur-micro) var(--ease-out),color var(--dur-micro) var(--ease-out);
}
.card:hover .tag,.case:hover .tag{border-color:var(--blue);color:var(--blue-bright)}

/* Bespoke band. Sits under the services grid as an invitation, not as
   a fifth card — a card would file "anything else" alongside four
   named things and lose it there. */
.bespoke{
  margin-top:var(--s4);padding:var(--s6) var(--s7);
  border-color:var(--gold-line);
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:var(--s6);align-items:center;
}
.bespoke h3{font-size:var(--step-2);margin-block:var(--s3) var(--s2)}
.bespoke p{color:var(--text-dim);font-size:0.9375rem;max-width:min(60ch,100%)}
.bespoke .btn{white-space:nowrap}
@media (max-width:760px){
  .bespoke{grid-template-columns:1fr;gap:var(--s5);padding:var(--s5)}
  .bespoke .btn{width:100%}
}

/* ============================================================
   Portfolio — case studies read as spec sheets
   ============================================================ */
.case{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;overflow:hidden}
.case + .case{margin-top:var(--s5)}
.case__media{position:relative;background:var(--ink-850);overflow:hidden;display:flex}

/* ---- Interface mockups, built as real markup ----
   Rendered UI instead of stock imagery: the text stays crisp at any
   size, the numbers are internally consistent, and it carries QANO's
   own palette rather than some other product's branding. */
.mock{
  flex:1;aspect-ratio:16/10;min-width:0;
  display:flex;flex-direction:column;
  background:var(--ink-900);
  font-size:11px;line-height:1.5;
  container-type:inline-size;
}
.mock__bar{
  display:flex;align-items:center;gap:var(--s2);
  padding:var(--s2) var(--s3);
  background:var(--ink-800);border-bottom:1px solid var(--line);
}
.mock__dots{display:flex;gap:4px;flex:none}
.mock__dots i{width:7px;height:7px;border-radius:50%;background:var(--line-strong);display:block}
.mock__title{
  font-family:var(--font-mono);font-size:9px;color:var(--text-faint);
  letter-spacing:0.06em;direction:ltr;unicode-bidi:isolate;
  margin-inline:auto;
}
.mock__live{display:flex;align-items:center;gap:4px;font-family:var(--font-mono);font-size:8px;color:var(--blue);flex:none}
.mock__live i{width:5px;height:5px;border-radius:50%;background:var(--blue);display:block;animation:led 2.4s var(--ease-out) infinite}

.mock__body{flex:1;padding:var(--s3);display:grid;gap:var(--s2);min-height:0;overflow:hidden}
.mock__cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);min-height:0}
.mock__cols--3{grid-template-columns:repeat(3,1fr)}

.mock__panel{
  background:var(--ink-800);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:var(--s2) var(--s3);min-width:0;display:flex;flex-direction:column;gap:4px;
}
.mock__k{font-size:9px;color:var(--text-faint);line-height:1.4}
.mock__v{
  font-family:var(--font-mono);font-size:16px;font-weight:600;color:var(--blue);
  font-variant-numeric:tabular-nums;line-height:1;
  direction:ltr;unicode-bidi:isolate;
}
.mock__row{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  padding-block:4px;border-bottom:1px solid var(--line-soft);font-size:10px;
}
.mock__row:last-child{border-bottom:0}
.mock__row span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mock__num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-dim);flex:none;direction:ltr;unicode-bidi:isolate}
.mock__pill{
  font-family:var(--font-sans);font-size:9px;flex:none;
  padding:1px 6px;border-radius:2px;
  border:1px solid var(--blue-line);color:var(--blue);background:var(--blue-wash);
}
.mock__track{height:3px;background:var(--ink-700);border-radius:2px;overflow:hidden}
.mock__fill{display:block;height:100%;background:var(--blue)}
.mock__spark{display:flex;align-items:flex-end;gap:2px;height:30px;flex:none}
.mock__spark i{flex:1;background:var(--blue-deep);border-radius:1px 1px 0 0;display:block}
.mock__spark i:last-child{background:var(--blue)}
.mock__qr{
  width:44px;height:44px;flex:none;border-radius:2px;
  background:
    repeating-linear-gradient(90deg,var(--text) 0 4px,transparent 4px 8px),
    repeating-linear-gradient(0deg,var(--text) 0 4px,transparent 4px 8px);
  background-color:var(--ink-900);
  opacity:0.85;
}
@container (max-width: 340px){
  .mock__cols--3{grid-template-columns:1fr 1fr}
  .mock__cols--3 > :last-child{display:none}
}
/* On a phone the 16:10 frame is shorter than the interface inside it and
   the panels were overlapping. Below this width the frame stops dictating
   the height and takes whatever the content needs — which also holds if
   the mono face falls back and the line boxes grow. */
@container (max-width: 430px){
  .mock__body{gap:var(--s2);padding:var(--s2) var(--s3) var(--s3)}
}
/* On a phone the 16:10 frame is shorter than the interface inside it and
   the panels overlapped. Below this width the frame stops dictating the
   height and takes whatever the content needs — which also holds if the
   mono face falls back and the line boxes grow. */
@media (max-width:620px){
  .mock{aspect-ratio:auto}
}
/* Sits in the body, above the title — an overlay badge would cover
   part of the interface it is meant to label. */
.case__ref{
  display:inline-block;margin-bottom:var(--s3);
  font-family:var(--font-mono);font-size:0.6875rem;letter-spacing:0.1em;
  color:var(--gold);background:var(--gold-wash);
  border:1px solid var(--gold-line);border-radius:var(--r-sm);
  padding:var(--s1) var(--s2);
  direction:ltr;unicode-bidi:isolate;
}
.case__body{padding:var(--s7);border-inline-end:1px solid var(--line)}
.case:nth-child(even) .case__media{order:2}
.case:nth-child(even) .case__body{border-inline-end:0;border-inline-start:1px solid var(--line)}
.case h3{margin-bottom:var(--s5)}

/* Lead with the outcome — the result is the reason anyone reads a case study */
.case__win{
  display:flex;align-items:baseline;gap:var(--s3);
  padding:var(--s4) var(--s5);margin-bottom:var(--s5);
  background:var(--gold-wash);border:1px solid var(--gold-line);border-radius:var(--r);
}
.case__win b{
  font-family:var(--font-mono);font-size:1.5rem;font-weight:600;color:var(--gold);
  line-height:1;direction:ltr;unicode-bidi:isolate;
}
.case__win span{font-size:0.875rem;color:var(--text-dim)}
.case__spec{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s3) var(--s5);align-items:baseline}
.case__spec dt{
  font-family:var(--font-sans);font-size:0.8125rem;font-weight:600;
  color:var(--gold);white-space:nowrap;
}
.case__spec dd{color:var(--text-dim);font-size:0.9375rem}
@media (max-width:860px){
  .case{grid-template-columns:1fr}
  .case__body,.case:nth-child(even) .case__body{border-inline:0;border-top:1px solid var(--line);padding:var(--s6)}
  .case:nth-child(even) .case__media{order:0}
  .case__spec{grid-template-columns:1fr;gap:var(--s1)}
  .case__spec dd{margin-bottom:var(--s3)}
}

/* ============================================================
   Process — a single rail. Numbering stays here because this
   genuinely is a sequence; it was removed from the services grid,
   where order carried no information.
   ============================================================ */
.rail{position:relative;padding-inline-start:0}
.rail::before{
  content:"";position:absolute;inset-block:12px 12px;
  inset-inline-start:23px;width:1px;background:var(--line);
}
/* The rail fills to wherever you have read to. On a list whose order is
   itself the information, progress through it is worth showing. */
.rail::after{
  content:"";position:absolute;inset-block-start:12px;
  inset-inline-start:23px;width:1px;background:var(--gold);
  height:var(--rail,0%);
}
.step.is-lit .step__marker{border-color:var(--gold);background:var(--gold-wash)}
.step{
  position:relative;display:grid;
  grid-template-columns:48px minmax(0,1fr);
  gap:var(--s5);align-items:start;
}
.step + .step{margin-top:var(--s6)}
.step__marker{
  position:relative;z-index:1;
  width:48px;height:48px;display:flex;align-items:center;justify-content:center;
  background:var(--ink-800);border:1px solid var(--line);border-radius:var(--r);
  font-family:var(--font-mono);font-size:0.875rem;font-weight:600;color:var(--gold);
  font-variant-numeric:tabular-nums;
  transition:border-color var(--dur-small) var(--ease-out),background var(--dur-small) var(--ease-out);
}
.step:hover .step__marker{border-color:var(--gold);background:var(--gold-wash)}
.step__body{padding-top:var(--s2)}
.step__body h3{font-size:var(--step-1);margin-bottom:var(--s2)}
.step__body p{color:var(--text-dim);font-size:0.9375rem}

/* ============================================================
   Terms. A new firm cannot borrow a track record, so it sells the
   only thing it can honestly offer instead: the buyer's risk, taken
   off him in writing. Set as numbered clauses because that is the
   form the reassurance actually takes — and because the order is
   the order of the engagement, so the numbers carry information.
   ============================================================ */
.terms{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4)}
.term{padding:var(--s6);display:flex;flex-direction:column;gap:var(--s3)}
.term__no{
  align-self:flex-start;
  font-size:0.75rem;font-weight:600;color:var(--gold);line-height:1;
  padding-bottom:var(--s3);border-bottom:1px solid var(--gold-line);
}
.term h3{font-size:var(--step-1)}
.term p{color:var(--text-dim);font-size:0.9375rem}
.terms__note{
  margin-top:var(--s5);padding:var(--s4) var(--s5);
  border:1px solid var(--line);background:var(--ink-800);
  font-size:0.875rem;color:var(--text-dim);border-radius:var(--r);
}
.terms__note b{color:var(--text);font-weight:600}
@media (max-width:760px){
  .terms{grid-template-columns:1fr}
  .term{padding:var(--s5)}
}

/* ============================================================
   Testimonials — a static grid. No marquee, no star rows.
   ============================================================ */
.quote{padding:var(--s6);display:flex;flex-direction:column;gap:var(--s5)}
.quote__mark{
  font-family:var(--font-mono);font-size:2rem;line-height:1;
  color:var(--gold-deep);
}
.quote p{color:var(--text);font-size:1.0625rem;flex:1}
.quote__who{
  padding-top:var(--s4);border-top:1px solid var(--line);
}
.quote__name{font-weight:600;font-size:0.9375rem}
.quote__org{font-family:var(--font-mono);font-size:0.75rem;color:var(--text-faint);letter-spacing:0.04em}

/* ============================================================
   FAQ — native <details>, so keyboard and screen readers work
   without any JS. Grid-rows trick animates any content length.
   ============================================================ */
.faq{display:flex;flex-direction:column;gap:var(--s2)}
.faq__item{
  background:var(--ink-800);border:1px solid var(--line);border-radius:var(--r);
  transition:border-color var(--dur-small) var(--ease-out);
}
.faq__item[open]{border-color:var(--line-strong)}
.faq__item summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s5) var(--s6);
  font-weight:600;font-size:1.0625rem;
  min-height:56px;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--gold)}
.faq__sign{flex:none;color:var(--gold);transition:transform var(--dur-small) var(--ease-out)}
.faq__item[open] .faq__sign{transform:rotate(45deg)}
.faq__body{
  display:grid;grid-template-rows:1fr;
  padding-inline:var(--s6);
}
.faq__body > div{overflow:hidden}
.faq__body p{color:var(--text-dim);padding-bottom:var(--s6);font-size:0.9375rem;max-width:min(70ch,100%)}

/* ============================================================
   Contact
   ============================================================ */
.contact{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);gap:var(--s5);align-items:start}
@media (max-width:900px){.contact{grid-template-columns:1fr}}

.info{padding:var(--s6)}
.info h3{font-size:var(--step-1);margin-bottom:var(--s5)}
.info__row{
  display:flex;align-items:center;gap:var(--s4);
  padding-block:var(--s4);border-bottom:1px solid var(--line-soft);
  text-decoration:none;
}
.info__row:last-of-type{border-bottom:0}
.info__row svg{color:var(--gold);flex:none}
.info__k{font-size:0.75rem;color:var(--text-faint);font-family:var(--font-mono);letter-spacing:0.06em}
.info__v{font-weight:600;font-size:0.9375rem}
a.info__row:hover .info__v{color:var(--gold)}

.form{padding:var(--s6);display:flex;flex-direction:column;gap:var(--s5)}
.field{display:flex;flex-direction:column;gap:var(--s2)}
.field label{font-size:0.875rem;font-weight:600}
.field .opt{font-weight:400;color:var(--text-faint);font-size:0.8125rem}
.field .hint{font-size:0.75rem;color:var(--text-faint)}
.control{
  font-family:inherit;
  font-size:1rem;                 /* 16px — below this iOS zooms on focus */
  color:var(--text);
  background:var(--ink-900);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:var(--s3) var(--s4);
  min-height:48px;
  width:100%;
  transition:border-color var(--dur-micro) var(--ease-out);
}
.control::placeholder{color:var(--text-faint)}
.control:hover{border-color:var(--line-strong)}
.control:focus{border-color:var(--gold);outline:2px solid var(--gold-bright);outline-offset:1px}
textarea.control{resize:vertical;min-height:120px;line-height:1.7}
select.control{cursor:pointer}

.form__note{
  font-size:0.8125rem;color:var(--text-faint);
  padding-top:var(--s4);border-top:1px solid var(--line-soft);
}
.form__note a{
  display:inline-block;padding-block:var(--s1);min-height:24px;
  color:var(--gold);text-decoration:underline;text-underline-offset:2px;
}

.form__status{
  display:none;gap:var(--s3);align-items:flex-start;
  padding:var(--s4);border-radius:var(--r);
  background:var(--gold-wash);border:1px solid var(--gold-line);
  font-size:0.9375rem;
}
.form__status.is-shown{display:flex}
.form__status svg{color:var(--gold);flex:none;margin-top:2px}
/* Failure reads differently from success — an error that looks like a
   confirmation is worse than no message at all. */
.form__status.is-error{background:rgba(220,110,90,0.10);border-color:rgba(220,110,90,0.45)}
.form__status.is-error svg{color:#E08A72}
.btn[aria-busy="true"]{opacity:0.65;pointer-events:none}

/* ============================================================
   Footer
   ============================================================ */
.footer{background:var(--ink-850);border-top:1px solid var(--line);padding-block:var(--s8) var(--s6)}
.footer__top{display:grid;grid-template-columns:1.6fr repeat(auto-fit,minmax(120px,1fr));gap:var(--s6) var(--s7);padding-bottom:var(--s7)}
.footer__about{color:var(--text-dim);font-size:0.9375rem;max-width:min(38ch,100%);margin-top:var(--s4)}
.footer h4{font-size:0.875rem;margin-bottom:var(--s4);color:var(--text)}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:var(--s1)}
/* inline-block + vertical padding so the tap target clears the 24px
   floor (WCAG 2.2 AA 2.5.8); the text alone measured 19-22px. */
.footer ul a{
  display:inline-block;padding-block:var(--s1);min-height:24px;
  color:var(--text-dim);text-decoration:none;font-size:0.9375rem;
  transition:color var(--dur-micro) var(--ease-out);
}
.footer ul a:hover{color:var(--gold)}
.footer__bottom{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s4);padding-top:var(--s5);border-top:1px solid var(--line);
  font-size:0.8125rem;color:var(--text-faint);
}
.footer__bottom .num{color:var(--text-dim)}
@media (max-width:860px){.footer__top{grid-template-columns:1fr 1fr;gap:var(--s6)}}
@media (max-width:520px){.footer__top{grid-template-columns:1fr}}

/* ============================================================
   Floating actions — stacked in one corner (inline-end), so they
   don't fight each other from opposite sides of an RTL page.
   ============================================================ */
.dock{
  position:fixed;inset-block-end:var(--s5);inset-inline-end:var(--s5);
  z-index:var(--z-float);display:flex;flex-direction:column;gap:var(--s3);align-items:center;
}
.dock__btn{
  width:52px;height:52px;border-radius:var(--r-lg);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;border:1px solid var(--line);
  background:var(--ink-800);color:var(--gold);
  transition:border-color var(--dur-micro) var(--ease-out),
             background var(--dur-micro) var(--ease-out),
             opacity var(--dur-small) var(--ease-out);
}
.dock__btn:hover{border-color:var(--gold);background:var(--gold-wash)}
.dock__btn--primary{background:var(--gold);color:var(--ink-900);border-color:var(--gold)}
.dock__btn--primary:hover{background:var(--gold-bright);border-color:var(--gold-bright)}
.dock__btn[hidden]{display:none}

.chat{
  position:absolute;inset-block-end:calc(100% + var(--s3));inset-inline-end:0;
  width:min(370px,calc(100vw - var(--s8)));height:min(500px,70vh);
  background:var(--ink-850);border:1px solid var(--line-strong);
  border-radius:var(--r-lg);display:flex;flex-direction:column;overflow:hidden;
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity var(--dur-small) var(--ease-out),transform var(--dur-small) var(--ease-out);
}
.chat.is-open{opacity:1;transform:none;pointer-events:auto}
.chat__head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s4);border-bottom:1px solid var(--line);background:var(--ink-800);
}
.chat__id{display:flex;align-items:center;gap:var(--s3)}
.chat__id img{width:32px;height:32px;border-radius:var(--r-sm);border:1px solid var(--line);object-fit:cover}
.chat__name{font-weight:600;font-size:0.875rem;line-height:1.3}
.chat__role{font-family:var(--font-mono);font-size:0.6875rem;color:var(--text-faint)}
.chat__close{background:transparent;border:0;color:var(--text-dim);cursor:pointer;width:32px;height:32px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center}
.chat__close:hover{color:var(--gold);background:var(--ink-700)}
.chat__log{flex:1;overflow-y:auto;padding:var(--s4);display:flex;flex-direction:column;gap:var(--s4)}
.msg{display:flex;gap:var(--s3);max-width:88%}
.msg--me{margin-inline-start:auto;flex-direction:row-reverse}
.msg img{width:28px;height:28px;border-radius:var(--r-sm);border:1px solid var(--line);flex:none;object-fit:cover}
.msg__bubble{
  padding:var(--s3) var(--s4);border-radius:var(--r-lg);font-size:0.875rem;line-height:1.65;
  background:var(--ink-800);border:1px solid var(--line);
}
.msg--me .msg__bubble{background:var(--gold-wash);border-color:var(--gold-line)}
.chat__foot{padding:var(--s4);border-top:1px solid var(--line);background:var(--ink-800)}
.chat__chips{display:flex;gap:var(--s2);overflow-x:auto;padding-bottom:var(--s3)}
.chip{
  flex:none;font-family:var(--font-sans);font-size:0.75rem;
  background:transparent;color:var(--gold);cursor:pointer;
  border:1px solid var(--gold-line);border-radius:var(--r-pill);
  padding:var(--s1) var(--s3);white-space:nowrap;
  transition:background var(--dur-micro) var(--ease-out);
}
.chip:hover{background:var(--gold-wash)}
.chat__send{display:flex;gap:var(--s2)}
/* 16px exactly — anything smaller makes iOS Safari zoom the viewport
   the moment the field takes focus. */
.chat__send .control{min-height:42px;padding:var(--s2) var(--s3);font-size:1rem}
.chat__send button{
  flex:none;width:42px;height:42px;border-radius:var(--r);
  background:var(--gold);color:var(--ink-900);border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.chat__send button:hover{background:var(--gold-bright)}

/* ============================================================
   Reveal — one gentle entrance, not a fade-up on every section.
   ============================================================ */
.reveal{opacity:0;transform:translateY(18px)}
.reveal.is-in{
  opacity:1;transform:none;
  transition:opacity var(--dur-slow) var(--ease-out) var(--delay,0ms),
             transform var(--dur-slow) var(--ease-out) var(--delay,0ms);
}

/* ============================================================
   Page-load sequence — hero only, once. Everything past the fold
   waits for the scroll observer, so the two never overlap.
   ============================================================ */
.lift{
  opacity:0;transform:translateY(14px);
  animation:lift var(--dur-slow) var(--ease-out) forwards;
  animation-delay:calc(var(--d,0) * var(--stagger) + 120ms);
}
@keyframes lift{to{opacity:1;transform:none}}

/* Headline lines ride up from behind their own baseline. The padding /
   negative-margin pair keeps Arabic descenders out of the clip. */
.rise{display:block;overflow:hidden;padding-bottom:0.14em;margin-bottom:-0.14em}
.rise > span{
  display:block;transform:translateY(105%);
  animation:rise 820ms var(--ease-out) forwards;
  animation-delay:calc(var(--d,0) * var(--stagger) + 120ms);
}
@keyframes rise{to{transform:none}}

.grid-bg{animation:gridIn 1400ms var(--ease-out) 100ms backwards}
@keyframes gridIn{from{opacity:0;transform:scale(1.05)}}

/* Reasserted last: a press must beat a hover, whatever the variant. */
.btn--gold:hover,.btn--ghost:hover,.btn--quiet:hover{transform:translateY(-1px)}
.btn--gold:active,.btn--ghost:active,.btn--quiet:active{transform:translateY(1px)}

/* ============================================================
   Touch. A tap fires :hover on most phones and it then sticks until
   you tap elsewhere — a card left hovering is worse than one that
   never reacted. Hover effects are unwound here and replaced with a
   press state, which is the gesture a phone actually has.
   ============================================================ */
@media (hover:none){
  .panel--hover:hover{transform:none;background:var(--ink-800);border-color:var(--line)}
  .panel--hover:active{background:var(--ink-700);border-color:var(--line-strong)}
  .ticked:hover::before,.ticked:hover::after{opacity:0}
  .btn--gold:hover,.btn--ghost:hover,.btn--quiet:hover{transform:none}
  .btn--gold:hover{background:var(--gold)}
  .btn--ghost:hover{background:transparent;border-color:var(--gold-line)}
  .card:hover .tag,.case:hover .tag{border-color:var(--blue-line);color:var(--blue)}
  .card:hover .card__icon{background:transparent}
  .step:hover .step__marker{border-color:var(--line);background:var(--ink-800)}
  .nav__links a::after{display:none}
}
body{-webkit-tap-highlight-color:transparent}

/* ============================================================
   Phones. Most visitors arrive on one, so the vertical rhythm is
   retuned rather than merely reflowed: less air between sections,
   full-width actions inside the thumb arc, one column everywhere.
   ============================================================ */
@media (max-width:640px){
  .section{padding-block:var(--s8)}
  .sec-head{margin-bottom:var(--s7);padding-bottom:var(--s4)}
  .hero{padding-block:calc(var(--nav-h) + var(--s6)) var(--s8)}
  .hero__lead{margin-block:var(--s4) var(--s6);font-size:var(--step-0)}
  .hero__eyebrow{margin-bottom:var(--s4)}

  /* Stacked and full width: two buttons sharing a row on a 375px screen
     leaves neither a comfortable target. */
  .hero__actions{flex-direction:column;align-items:stretch}
  .hero__actions .btn{width:100%}

  .assure{gap:var(--s2) var(--s4);margin-top:var(--s4)}
  .console{padding:var(--s4) var(--s5) var(--s5)}
  .pipe{gap:var(--s2);margin-top:var(--s5)}
  .pipe__name{font-size:0.8125rem}
  .card,.quote,.info,.form{padding:var(--s5)}
  .case__body{padding:var(--s5)}
  .faq__item summary{padding:var(--s4) var(--s5);font-size:1rem}
  .faq__body{padding-inline:var(--s5)}
  .faq__body p{padding-bottom:var(--s5)}
  .footer{padding-block:var(--s7) var(--s5)}
  .dock{inset-block-end:var(--s4);inset-inline-end:var(--s4)}
}

/* ============================================================
   Reduced motion: land on the destination state instantly.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .lift,.rise > span,.grid-bg{opacity:1;transform:none;animation:none}
  .sec-head::after{transform:scaleX(1)}
  .console__led{animation:none}
  .fields > div{opacity:1;transform:none}
  .case__media img{transform:none !important}
}

/* ============================================================
   Service pages. Same instrument language as the homepage, with
   a quieter head: the visitor arrives from a search with a problem
   already in mind, so the page opens on that problem rather than
   on the company.
   ============================================================ */
.crumb{
  display:flex;align-items:center;gap:var(--s2);
  font-size:0.8125rem;color:var(--text-faint);margin-bottom:var(--s5);
}
.crumb a{color:var(--text-dim);text-decoration:none}
.crumb a:hover{color:var(--gold)}
.crumb span{color:var(--line-strong)}

.phero{position:relative;padding-block:calc(var(--nav-h) + var(--s8)) var(--s8);overflow:hidden}
.phero__body{position:relative;z-index:1;max-width:min(60ch,100%)}
.phero__inner{position:relative;z-index:1}
.phero h1{font-size:var(--step-4);line-height:1.2;margin-bottom:var(--s5)}
.phero__lead{color:var(--text-dim);font-size:var(--step-1);margin-bottom:var(--s6)}
.phero__lead strong{color:var(--gold);font-weight:600}
.phero__for{
  margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--line);
  font-size:0.875rem;color:var(--text-faint);
}
.phero__for b{color:var(--text-dim);font-weight:600}

/* The pain list. Each line is one concrete minute of the reader's
   week, not a benefit statement \u2014 recognition before persuasion. */
.pain{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.pain li{background:var(--ink-800);padding:var(--s5) var(--s6);display:flex;gap:var(--s4);align-items:flex-start}
.pain li::before{
  content:"";flex:none;margin-top:9px;
  width:6px;height:6px;background:var(--flag,#C4705A);
  transform:rotate(45deg);
}
.pain p{color:var(--text-dim);font-size:0.9375rem}
@media (max-width:760px){.pain{grid-template-columns:1fr}}

/* What the system does: a spec table, because the reader at this
   point is comparing, not being sold to. */
.spec-list{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line)}
.spec-list > div{
  background:var(--ink-800);padding:var(--s5) var(--s6);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:var(--s3) var(--s6);align-items:baseline;
}
.spec-list dt,.spec-list b{font-weight:600;font-size:0.9375rem;color:var(--text)}
.spec-list p{color:var(--text-dim);font-size:0.9375rem}
@media (max-width:700px){.spec-list > div{grid-template-columns:1fr;gap:var(--s2)}}

/* Compact terms for inner pages \u2014 the clauses are the same, set as a
   reminder rather than restated at homepage length. */
.terms--tight{grid-template-columns:repeat(4,1fr)}
.terms--tight .term{padding:var(--s5);gap:var(--s2)}
.terms--tight .term h3{font-size:1rem}
.terms--tight .term p{font-size:0.875rem}
@media (max-width:900px){.terms--tight{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.terms--tight{grid-template-columns:1fr}}

/* Closing band. One offer, one button, nothing else competing. */
.cta-band{
  padding:var(--s8) var(--s7);text-align:center;
  border:1px solid var(--gold-line);background:var(--ink-800);
  display:flex;flex-direction:column;align-items:center;gap:var(--s4);
}
.cta-band h2{font-size:var(--step-3);max-width:min(24ch,100%)}
.cta-band p{color:var(--text-dim);max-width:min(56ch,100%)}
.cta-band__actions{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:center;margin-top:var(--s2)}
@media (max-width:560px){
  .cta-band{padding:var(--s6) var(--s5)}
  .cta-band__actions{flex-direction:column;align-self:stretch}
  .cta-band__actions .btn{width:100%}
}

/* Sibling services, so a page that is not the right one still routes. */
.also{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.also a{
  display:flex;flex-direction:column;gap:var(--s2);
  padding:var(--s5);text-decoration:none;
  background:var(--ink-800);border:1px solid var(--line);border-radius:var(--r);
  transition:border-color var(--dur-small) var(--ease-out),transform var(--dur-small) var(--ease-out);
}
.also a:hover{border-color:var(--gold-line);transform:translateY(-3px)}
.also b{font-weight:600;font-size:0.9375rem}
.also span{color:var(--text-dim);font-size:0.875rem;line-height:1.6}
@media (max-width:760px){.also{grid-template-columns:1fr}}
@media (hover:none){.also a:hover{transform:none;border-color:var(--line)}}

/* A card that navigates has to look like it does, and read as a link
   to a screen reader rather than as four stray paragraphs. */
a.card{display:block;text-decoration:none;color:inherit}
.card__go{
  display:inline-flex;align-items:center;gap:var(--s2);
  margin-top:var(--s5);
  font-size:0.875rem;font-weight:600;color:var(--gold);
  transition:gap var(--dur-small) var(--ease-out);
}
a.card:hover .card__go{gap:var(--s3)}
@media (hover:none){a.card:hover .card__go{gap:var(--s2)}}

/* ============================================================
   English (LTR). The layout itself needs nothing: it is built on
   logical properties throughout, so it mirrors on its own. What does
   not mirror is transform-origin and the few hard-coded text-aligns,
   which would otherwise sweep and align the wrong way.
   ============================================================ */
[dir="ltr"] .nav__progress,
[dir="ltr"] .nav__links a::after,
[dir="ltr"] .sec-head::after,
[dir="ltr"] .pipe__bar::after{transform-origin:left}
[dir="ltr"] .sec-head__note{text-align:right}
[dir="ltr"] .trust__v{text-align:left}
[dir="ltr"] .nav__progress{background:linear-gradient(to right,var(--gold),var(--blue))}
[dir="ltr"] .quote__mark{transform:scaleX(-1);display:inline-block}

/* Language switch. A quiet link, not a button competing with the CTA. */
.lang{
  font-family:var(--font-mono);font-size:0.75rem;font-weight:500;
  letter-spacing:0.08em;color:var(--text-dim);text-decoration:none;
  padding:var(--s2) var(--s3);border:1px solid var(--line);border-radius:var(--r);
  transition:color var(--dur-micro) var(--ease-out),border-color var(--dur-micro) var(--ease-out);
  white-space:nowrap;
}
.lang:hover{color:var(--gold);border-color:var(--gold-line)}
@media (max-width:900px){.nav__inner .lang{display:none}}

/* ============================================================
   Founder. The clauses above are a promise, and a promise needs
   somebody making it. Laid out as an identity card beside a
   statement, so the person reads as a credential rather than as a
   photo caption.
   ============================================================ */
.founder{
  display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.6fr);
  gap:var(--s7);padding:var(--s7);align-items:start;
}
.founder__id{
  display:flex;gap:var(--s5);align-items:center;
  padding-bottom:var(--s5);
}
.founder__monogram{
  flex:none;width:76px;height:76px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:2.25rem;font-weight:600;
  color:var(--gold);background:var(--gold-wash);
  border:1px solid var(--gold-line);border-radius:var(--r);
  line-height:1;
}
.founder__name{font-family:var(--font-display);font-size:var(--step-2);font-weight:600;line-height:1.2}
.founder__role{color:var(--text-dim);font-size:0.9375rem;margin-top:var(--s1)}
.founder__meta{
  margin-top:var(--s3);font-size:0.6875rem;letter-spacing:0.1em;
  color:var(--text-faint);direction:ltr;unicode-bidi:isolate;text-align:left;
}
.founder__body{display:flex;flex-direction:column;gap:var(--s4)}
.founder__body p{color:var(--text-dim);font-size:0.9375rem}
.founder__body strong{color:var(--text);font-weight:600}
.founder__ps{
  padding-top:var(--s4);border-top:1px solid var(--line);
  color:var(--text-faint) !important;font-size:0.875rem !important;
}
.founder__links{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s2)}

@media (max-width:860px){
  .founder{grid-template-columns:1fr;gap:var(--s5);padding:var(--s5)}
  .founder__id{border-bottom:1px solid var(--line)}
  .founder__monogram{width:60px;height:60px;font-size:1.75rem}
}
@media (max-width:480px){
  .founder__links{flex-direction:column;align-items:stretch}
  .founder__links .btn{width:100%}
}

/* The bar reports which section you are in, using the same underline the
   hover state uses — so the affordance and the status read as one idea
   rather than two. */
.nav__links a.is-current{color:var(--text)}
.nav__links a.is-current::after{transform:scaleX(1)}

/* The bar settles in with the hero rather than arriving fully formed
   ahead of it. */
.nav__inner > *{
  opacity:0;
  animation:lift var(--dur-slow) var(--ease-out) forwards;
  animation-delay:60ms;
}
.nav__inner > *:nth-child(2){animation-delay:120ms}
.nav__inner > *:nth-child(3){animation-delay:180ms}
.nav__inner > *:nth-child(4){animation-delay:220ms}
@media (prefers-reduced-motion:reduce){
  .nav__inner > *{opacity:1;animation:none}
}

/* Standards. Professionalism asserted is an adjective; professionalism
   listed is a commitment the reader can hold you to. Set as a checked
   list because each line is something that either happened or did not. */
.standards{
  list-style:none;display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--s3) var(--s5);
  margin-top:var(--s2);padding-top:var(--s5);
  border-top:1px solid var(--line);
}
.standards li{
  display:flex;align-items:flex-start;gap:var(--s3);
  font-size:0.875rem;color:var(--text-dim);line-height:1.6;
}
.standards li::before{
  content:"";flex:none;margin-top:7px;
  width:9px;height:5px;
  border-inline-start:1.5px solid var(--gold);
  border-bottom:1.5px solid var(--gold);
  transform:rotate(-45deg);
}
@media (max-width:760px){.standards{grid-template-columns:1fr;gap:var(--s3)}}


/* ============================================================
   SIGNATURE, third pass — the product screen.
   The hero used to carry an instrument readout: thin bars, small mono
   labels, and a ledger whose largest figure was a "0". It described a
   system. This shows one: a queue, a document moving through the four
   stages, and the fields that come out of it. Same mockup language as
   the builds section, at hero scale.
   ============================================================ */
.screen{
  position:relative;
  background:var(--ink-900);
  border:1px solid var(--line-strong);
  border-radius:var(--r-lg);
  overflow:hidden;
  font-size:12px;line-height:1.5;
  box-shadow:
    0 0 0 1px rgba(201,169,97,0.06),
    0 40px 90px -40px rgba(0,0,0,0.85),
    0 0 140px -50px rgba(201,169,97,0.28);
}
.screen__bar{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3) var(--s4);
  background:var(--ink-800);border-bottom:1px solid var(--line);
}
.screen__title{
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.08em;
  color:var(--text-faint);direction:ltr;unicode-bidi:isolate;
  margin-inline:auto;
}
.screen .pipe{margin:0;padding:var(--s4) var(--s5) 0;gap:var(--s3)}
.screen .pipe__name{font-size:0.8125rem}
.screen__body{
  display:grid;grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr);
  gap:var(--s3);padding:var(--s4) var(--s5);
}
.screen__k{
  display:block;font-size:10px;color:var(--text-faint);
  margin-bottom:var(--s2);line-height:1.4;
}

.queue{list-style:none;display:flex;flex-direction:column;gap:4px}
.queue__doc{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  padding:7px var(--s3);
  background:var(--ink-850);border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--text-dim);
  transition:border-color var(--dur-small) var(--ease-out),
             background var(--dur-small) var(--ease-out),
             color var(--dur-small) var(--ease-out),
             opacity var(--dur-small) var(--ease-out);
}
.queue__doc > span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.queue__state{
  font-style:normal;font-size:9px;flex:none;line-height:1.5;
  padding:1px 6px;border-radius:2px;
  border:1px solid var(--line);color:var(--text-faint);
}
.queue__doc.is-active{border-color:var(--blue-line);background:var(--blue-wash);color:var(--text)}
.queue__doc.is-active .queue__state{border-color:var(--blue-line);color:var(--blue)}
.queue__doc.is-done{opacity:0.55}
.queue__doc.is-done .queue__state{border-color:var(--gold-line);color:var(--gold)}

.fields{
  display:flex;flex-direction:column;
  background:var(--ink-850);border:1px solid var(--line);border-radius:var(--r-sm);
  overflow:hidden;
}
.fields > div{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
  padding:6px var(--s3);border-bottom:1px solid var(--line-soft);
  opacity:0;transform:translateY(4px);
  transition:opacity 320ms var(--ease-out),transform 320ms var(--ease-out);
}
.fields > div:last-child{border-bottom:0}
.fields > div.is-on{opacity:1;transform:none}
.fields dt{color:var(--text-faint);flex:none}
/* Values carry Arabic ("ر.س", "أسبوعياً"), so they stay in the sans face;
   tabular figures keep the numbers aligned without a mono fallback that
   would break the Arabic mid-line. */
.fields dd{
  font-weight:600;color:var(--blue);font-variant-numeric:tabular-nums;
  unicode-bidi:plaintext;text-align:left;
  min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.screen .console__now{
  margin:0;padding:var(--s3) var(--s5);
  border-top:1px solid var(--line);background:var(--ink-850);
}
@media (max-width:560px){
  .screen__body{grid-template-columns:1fr}
  .screen .pipe{padding-inline:var(--s4)}
  .screen__body,.screen .console__now{padding-inline:var(--s4)}
}

/* ============================================================
   Principles — statements, not products. The same four points that
   were icon cards, set as a list so the page stops being a box grid
   three sections running.
   ============================================================ */
.principles{
  list-style:none;
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:0 var(--s8);
}
.principles li{
  padding-block:var(--s6);
  border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:var(--s3);
}
.principles li:nth-child(-n+2){border-top:0;padding-top:0}
.principles h3{font-size:var(--step-2);line-height:1.3}
.principles p{color:var(--text-dim);font-size:0.9375rem;max-width:min(44ch,100%)}
@media (max-width:760px){
  .principles{grid-template-columns:1fr;gap:0}
  .principles li{padding-block:var(--s5)}
  .principles li:nth-child(2){border-top:1px solid var(--line);padding-top:var(--s5)}
  .principles h3{font-size:var(--step-1)}
}

/* ============================================================
   Brass plaque — the one inverted section on a dark page. The four
   clauses are the offer, so they get the one place the eye cannot
   miss, printed dark on brass like a plate on a door.
   ============================================================ */
.section--brass{
  --plate-ink:#141109;
  --plate-ink-2:rgba(20,17,9,0.72);
  --plate-ink-3:rgba(20,17,9,0.52);
  --plate-line:rgba(20,17,9,0.22);
  background:var(--gold);
  color:var(--plate-ink);
  border-block:1px solid var(--gold-deep);
}
.section--brass .label-ar{color:var(--plate-ink-3)}
.section--brass h2,.section--brass h3{color:var(--plate-ink)}
.section--brass .sec-head p{color:var(--plate-ink-2)}
.section--brass .sec-head__note{color:var(--plate-ink-3)}
.section--brass .sec-head::after{background:var(--plate-line)}
.section--brass ::selection{background:var(--ink-900);color:var(--gold)}

.section--brass .terms{
  counter-reset:term;
  gap:1px;background:var(--plate-line);
  border:1px solid var(--plate-line);
}
.section--brass .term{
  counter-increment:term;
  background:var(--gold);
  padding:var(--s6) var(--s6) var(--s7);
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:var(--s2) var(--s5);align-items:start;
}
.section--brass .term::before{
  content:counter(term);
  grid-row:1 / span 3;
  font-family:var(--font-display);font-size:2.75rem;font-weight:700;
  line-height:1;color:var(--plate-ink);opacity:0.28;
  font-variant-numeric:tabular-nums;
}
[dir="rtl"] .section--brass .term::before{content:counter(term,arabic-indic)}
.section--brass .term__no{
  color:var(--plate-ink-3);border-bottom-color:var(--plate-line);
  padding-bottom:var(--s2);
}
.section--brass .term p{color:var(--plate-ink-2)}
.section--brass .terms__note{
  background:rgba(20,17,9,0.08);border-color:var(--plate-line);
  color:var(--plate-ink-2);
}
.section--brass .terms__note b{color:var(--plate-ink)}
@media (max-width:760px){
  .section--brass .term{padding:var(--s5)}
  .section--brass .term::before{font-size:2rem}
}