/* ══ ZOHAR design tokens — the only file allowed to declare a raw value ══ */
:root{
  /* dark backgrounds */
  --z-canvas:#04150F; --z-surface-1:#07201A; --z-surface-2:#0A2B22; --z-surface-3:#0F3A2E;
  --z-glass:rgba(7,32,26,.74);
  /* emerald */
  --z-emerald-700:#0B5C43; --z-emerald-600:#10795A; --z-emerald-500:#16A37B;
  /* luminous action green */
  --z-action-400:#34E39B; --z-action-300:#6FF3BC;
  /* warm-white type */
  --z-text-hi:#F4F1EA; --z-text:#E6E2D8; --z-text-mute:#A9B5AC; --z-text-faint:#7E8F85;
  --z-text-on-light:#04150F;
  /* secondary proof / data */
  /* BRASS — the system's ONE non-green hue, declared rather than decorative.
     Green means "available now, act on this". Brass is the secondary,
     non-actionable register and carries exactly four uses:
       · ordinals and indices      .pillar-n .step-n .rm-v
       · sector / category labels  .card-sector
       · "foundation we prepare"   .chip-found and the notice explaining it
       · inline validation text    .err
     Nothing clickable is ever brass, and brass is never used for emphasis or
     as a third status. If a fifth use appears, extend this list or drop it. */
  --z-brass-400:#E4B363; --z-brass-600:#A97B36;
  /* heritage gold — reserved for the ZOHAR studio identity and editorial
     highlights. It warms the emerald system without competing with action. */
  --z-gold-hi:#F7DA91; --z-gold:#D6B56F; --z-gold-deep:#875B22; --z-ivory:#F8F4EA;
  --z-ink:#3D5148; --z-gold-border:rgba(214,181,111,.28);
  --z-gold-border-soft:rgba(214,181,111,.24); --z-shadow-deep:rgba(0,0,0,.22);
  /* borders */
  --z-border:rgba(244,241,234,.10); --z-border-strong:rgba(52,227,155,.28);
  --z-border-brass:rgba(228,179,99,.24);
  /* controlled gradients */
  --z-grad-action:linear-gradient(135deg,#16A37B 0%,#34E39B 100%);
  --z-grad-dawn:radial-gradient(ellipse 70% 50% at 50% -10%,rgba(52,227,155,.10) 0%,transparent 70%);
  --z-grad-gold:linear-gradient(135deg,#875B22 0%,#F7DA91 46%,#D6B56F 70%,#875B22 100%);
  /* elevation */
  --z-shadow-1:0 1px 2px rgba(0,0,0,.4);
  --z-shadow-2:0 8px 28px rgba(0,0,0,.45);
  --z-shadow-glow:0 0 0 1px rgba(52,227,155,.22),0 8px 32px rgba(52,227,155,.12);
  --z-inset-hi:inset 0 1px 0 rgba(155,250,210,.055);
  /* type */
  --font-display:"Fraunces","Iowan Old Style",Georgia,"Times New Roman",serif;
  --font-body:"Assistant","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,monospace;
  --fs-d1:clamp(2.6rem,5.2vw,4.25rem); --fs-d2:clamp(1.875rem,3.4vw,2.7rem);
  --fs-d3:clamp(1.25rem,2vw,1.5rem);
  --fs-lead:1.25rem; --fs-body:1.0625rem; --fs-sm:.9375rem; --fs-xs:.875rem; --fs-label:.875rem;
  --lh-d1:1.05; --lh-d2:1.12; --lh-body:1.65;
  /* space */
  --gutter:clamp(20px,5vw,80px); --maxw:1200px; --maxw-wide:1440px;
  --sec-pad:clamp(4rem,8vw,7rem);
  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-pill:999px;
}
/* Hebrew and Arabic: display serif, looser leading, never negative tracking */
:root:lang(he),:root:lang(ar){
  --font-display:"Frank Ruhl Libre","Noto Serif Hebrew",Georgia,serif;
  --lh-d1:1.18; --lh-d2:1.25; --lh-body:1.8;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-block-start:6rem}
html,body{max-width:100%}
img,svg,video{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
a{color:inherit}
ul,ol{list-style:none}
:where(h1,h2,h3,h4){font-weight:inherit}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ── self-hosted, subsetted, no third-party font request ── */
@font-face{font-family:"Fraunces";src:url("/assets/fonts/fraunces-600-latin.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:optional;unicode-range:U+0000-00FF,U+2000-206F,U+20AA,U+2190-21FF,U+25A0-25FF}
@font-face{font-family:"Assistant";src:url("/assets/fonts/assistant-400-latin.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:optional;unicode-range:U+0000-00FF,U+2000-206F,U+20AA,U+2190-21FF,U+25A0-25FF}
@font-face{font-family:"Assistant";src:url("/assets/fonts/assistant-400-hebrew.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:optional;unicode-range:U+0590-05FF,U+200E-200F,U+FB1D-FB4F}
@font-face{font-family:"Assistant";src:url("/assets/fonts/assistant-700-latin.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:optional;unicode-range:U+0000-00FF,U+2000-206F,U+20AA,U+2190-21FF,U+25A0-25FF}
@font-face{font-family:"Assistant";src:url("/assets/fonts/assistant-700-hebrew.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:optional;unicode-range:U+0590-05FF,U+200E-200F,U+FB1D-FB4F}
@font-face{font-family:"Frank Ruhl Libre";src:url("/assets/fonts/frankruhl-700-hebrew.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:optional;unicode-range:U+0590-05FF,U+200E-200F,U+FB1D-FB4F}
@font-face{font-family:"Frank Ruhl Libre";src:url("/assets/fonts/frankruhl-700-latin.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:optional;unicode-range:U+0000-00FF,U+2000-206F,U+20AA}
/* metric-matched fallback — removes the swap layout shift */
@font-face{font-family:"Assistant Fallback";src:local("Arial");size-adjust:103%;
  ascent-override:92%;descent-override:24%;line-gap-override:0%}

body{font-family:var(--font-body),"Assistant Fallback";background:var(--z-canvas);color:var(--z-text);
  font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;
  overflow-x:hidden;text-rendering:optimizeLegibility}
::selection{background:var(--z-action-400);color:var(--z-text-on-light)}
:focus-visible{outline:2px solid var(--z-action-400);outline-offset:2px;border-radius:3px}
.skip{position:absolute;inset-block-start:0;inset-inline-start:0;z-index:200;
  background:var(--z-action-400);color:var(--z-text-on-light);padding:12px 20px;
  border-radius:0 0 var(--r-sm) 0;font-weight:700;
  clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
.skip:focus-visible{clip-path:none;width:auto;height:auto;overflow:visible;
  display:inline-flex;align-items:center;min-block-size:44px;padding-inline:18px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wide{max-width:var(--maxw-wide);margin-inline:auto;padding-inline:var(--gutter)}

.d1{font-family:var(--font-display);font-weight:600;font-size:var(--fs-d1);line-height:var(--lh-d1);
  letter-spacing:-.02em;color:var(--z-text-hi);text-wrap:balance}
.d2{font-family:var(--font-display);font-weight:600;font-size:var(--fs-d2);line-height:var(--lh-d2);
  letter-spacing:-.015em;color:var(--z-text-hi);text-wrap:balance}
.d3{font-family:var(--font-display);font-weight:600;font-size:var(--fs-d3);line-height:1.25;
  letter-spacing:-.01em;color:var(--z-text-hi)}
:lang(he) .d1,:lang(he) .d2,:lang(he) .d3,:lang(ar) .d1,:lang(ar) .d2,:lang(ar) .d3{
  letter-spacing:0;font-weight:700}
.lead{font-size:var(--fs-lead);line-height:1.6;color:var(--z-text);max-inline-size:38rem;text-wrap:pretty}
:lang(he) .lead,:lang(ar) .lead{line-height:1.75}
.sm{font-size:var(--fs-sm);color:var(--z-text-mute)}
.xs{font-size:var(--fs-xs);color:var(--z-text-mute)}
.label{font-size:var(--fs-label);letter-spacing:.09em;text-transform:uppercase;font-weight:600;color:var(--z-text-mute)}
:lang(he) .label,:lang(ar) .label{text-transform:none;letter-spacing:0}
.brass{color:var(--z-brass-400)} .mute{color:var(--z-text-mute)} .hi{color:var(--z-text-hi)}

/* ══ THE LUMINOUS EDGE — the single repeated motif ══
   Every meaningful boundary is revealed by one precise line of light at its
   START edge. Never decorative; it always marks where something begins. */
.edge{position:relative;padding-block-start:22px}
.edge::before{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;
  inline-size:clamp(28px,4vw,54px);block-size:1.5px;border-radius:1px;
  background:linear-gradient(to right,var(--z-action-400),rgba(52,227,155,0))}

/* ── sections ── */
.sec{padding-block:var(--sec-pad);position:relative}
@media(max-width:560px){ :root{--sec-pad:clamp(2.75rem,9vw,4rem)} }
.sec+.sec{border-block-start:1px solid var(--z-border)}
.sec-head{margin-block-end:clamp(2.25rem,4.5vw,3.5rem);max-inline-size:44rem}
.sec-head .label{margin-block-end:14px} .sec-head .lead{margin-block-start:16px}
.surface{background:var(--z-surface-1)}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-block-size:48px;
  padding-inline:24px;border-radius:var(--r-pill);text-decoration:none;font-weight:700;font-size:1rem;
  cursor:pointer;border:1px solid transparent;transition:transform .16s,box-shadow .2s,background .2s}
.btn-primary{background:var(--z-grad-action);color:var(--z-text-on-light);
  box-shadow:var(--z-shadow-glow),inset 0 1px 0 rgba(255,255,255,.28)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{border-color:var(--z-border-strong);color:var(--z-text-hi);background:transparent}
.btn-ghost:hover{background:var(--z-surface-2);border-color:var(--z-action-400)}
.btn-sm{min-block-size:44px;padding-inline:18px;font-size:var(--fs-xs)}
.btn-lg{min-block-size:56px;padding-inline:30px;font-size:1.0625rem}
.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none!important}
/* an unconfigured destination renders as inert text, never a broken link */
.inert{display:inline-flex;align-items:center;gap:8px;min-block-size:44px;padding-inline:18px;
  border:1px dashed var(--z-border);border-radius:var(--r-pill);color:var(--z-text-faint);font-size:var(--fs-xs)}

/* ── chips ── */
.chip{display:inline-flex;align-items:center;gap:7px;min-block-size:28px;padding:4px 12px;
  border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;line-height:1.35;max-inline-size:100%}
:lang(he) .chip,:lang(ar) .chip{text-transform:none;letter-spacing:0}
.chip-now{background:var(--z-emerald-600);color:#F0FFF8}
.chip-found{background:rgba(228,179,99,.10);border:1px solid var(--z-border-brass);color:var(--z-brass-400)}
.chip-dev{background:transparent;border:1px solid var(--z-border-strong);color:var(--z-action-400)}
.chip-vision{background:transparent;border:1px dashed var(--z-border);color:var(--z-text-faint)}

/* ── nav ── */
.nav{position:sticky;inset-block-start:0;z-index:80;background:var(--z-glass);
  backdrop-filter:blur(12px);border-block-end:1px solid var(--z-border);box-shadow:inset 0 -1px 0 rgba(52,227,155,.07)}
.nav-in{max-inline-size:var(--maxw-wide);margin-inline:auto;padding-inline:var(--gutter);
  block-size:72px;display:flex;align-items:center;gap:clamp(14px,3vw,40px)}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;
  min-block-size:44px}
/* Keep the ZA signature on the same visual side in both locales. The page
   direction may change, but the approved lockup does not. */
[dir="rtl"] .nav-logo{flex-direction:row-reverse}
.wm-lock{display:flex;flex-direction:column;line-height:1}
.nav-logo .wm{font-family:var(--font-display);font-weight:600;font-size:1.22rem;letter-spacing:.11em;color:var(--z-ivory);white-space:nowrap}
.nav-logo .wm b{font-family:var(--font-sans);font-size:.66em;font-weight:700;letter-spacing:.08em;color:var(--z-gold)}
.wm-studio{margin-block-start:4px;font-size:.58rem;font-weight:700;letter-spacing:.22em;color:var(--z-gold)}
.nav-logo svg{overflow:visible;filter:drop-shadow(0 4px 12px rgba(0,0,0,.36))}
.nav-links{display:flex;gap:clamp(6px,1.4vw,18px);margin-inline-start:auto}
.nav-links a{display:inline-flex;align-items:center;justify-content:center;
  min-block-size:44px;min-inline-size:44px;padding-inline:8px;border-radius:10px}
.nav-links a{text-decoration:none;font-size:var(--fs-sm);font-weight:500;color:var(--z-text-mute);
  padding-block:6px;transition:color .18s}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--z-text-hi)}
.nav-right{display:flex;align-items:center;gap:10px;margin-inline-start:auto}
.nav-links+.nav-right{margin-inline-start:0}
.lang-btn{display:flex;align-items:center;gap:6px;block-size:44px;min-inline-size:44px;padding-inline:13px;
  border-radius:var(--r-pill);border:1px solid var(--z-border);background:transparent;color:var(--z-text-mute);
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;cursor:pointer;flex-shrink:0}
.lang-btn:hover{border-color:var(--z-border-strong);color:var(--z-text-hi)}
.burger{display:none;inline-size:44px;min-inline-size:44px;block-size:44px;border:1px solid var(--z-border);
  background:none;border-radius:var(--r-sm);cursor:pointer;flex-direction:column;align-items:center;
  justify-content:center;gap:5px;flex-shrink:0}
.burger i{inline-size:18px;block-size:1.5px;background:var(--z-text-hi);display:block}
@media(max-width:560px){
  .nav-in{block-size:64px;gap:10px;position:relative;justify-content:space-between}
  .nav-logo{gap:7px;position:absolute;left:50%;transform:translateX(-50%);z-index:2}
  .nav-logo .wm{font-size:.98rem;letter-spacing:.075em}
  .wm-studio{font-size:.42rem;letter-spacing:.11em}
  .nav-logo svg{inline-size:38px;block-size:38px}
  .nav-right{inline-size:100%;margin-inline:0;justify-content:space-between}
  .nav-right .btn-sm{display:none}
}
/* full-screen sheet, focus-trapped */
.sheet{position:fixed;inset:0;z-index:120;background:var(--z-canvas);display:none;
  flex-direction:column;padding:max(16px,env(safe-area-inset-top)) var(--gutter) max(20px,env(safe-area-inset-bottom))}
.sheet[open],.sheet.open{display:flex}
.sheet-top{display:flex;align-items:center;justify-content:space-between;block-size:56px;flex-shrink:0}
.sheet-nav{margin-block-start:14px;flex:1;overflow-y:auto}
.sheet-nav a{display:flex;align-items:center;min-block-size:60px;font-family:var(--font-display);
  font-size:1.5rem;font-weight:600;color:var(--z-text-hi);text-decoration:none;border-block-end:1px solid var(--z-border)}
.sheet-foot{flex-shrink:0;padding-block-start:16px}

/* ── hero ── */
.hero-eyebrow{margin-block-end:18px}
.hero h1{margin-block-end:16px}
.hero .promise{font-family:var(--font-display);font-size:clamp(1.125rem,1.9vw,1.5rem);font-style:italic;
  color:var(--z-action-400);line-height:1.35;margin-block-end:18px;font-weight:400}
:lang(he) .hero .promise,:lang(ar) .hero .promise{font-style:normal;font-weight:700}
.hero .lead{margin-block-end:26px;max-inline-size:34rem}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-block-end:16px}
.hero-reassure{display:flex;gap:10px;flex-wrap:wrap;font-size:var(--fs-xs);color:var(--z-text-faint)}

/* ── BUILD demonstration ── */
.demo{inline-size:100%;aspect-ratio:4/5;background:#06251C;border:1px solid var(--z-border);
  border-radius:16px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 0 1px rgba(52,227,155,.06)}
.demo svg{inline-size:100%;block-size:100%}
.demo-cap{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-block-start:16px;
  font-size:var(--fs-xs);color:var(--z-text-mute);line-height:1.5}
.demo-label{display:inline-flex;align-items:center;min-block-size:28px;padding:4px 12px;border-radius:var(--r-pill);
  font-size:var(--fs-xs);font-weight:700;color:var(--z-text-faint);border:1px dashed var(--z-border);flex-shrink:0}

/* ── proof strip ── */
.proof{background:linear-gradient(180deg,#07231B,#061C16);border-block:1px solid var(--z-border);padding-block:32px}
.proof-in{display:flex;align-items:center;gap:clamp(18px,4vw,52px);flex-wrap:wrap;justify-content:center}
.proof-lbl{font-size:var(--fs-xs);letter-spacing:.09em;text-transform:uppercase;color:var(--z-text-faint);font-weight:600}
:lang(he) .proof-lbl,:lang(ar) .proof-lbl{text-transform:none;letter-spacing:0}
.proof-item{font-family:var(--font-display);font-size:1.125rem;font-weight:600;color:var(--z-text-mute);
  text-decoration:none;letter-spacing:.02em;transition:color .18s;
  display:inline-flex;align-items:center;min-block-size:44px;padding-inline:4px}
.proof-item:hover{color:var(--z-text-hi)}

/* ── pillars ── */
.governing{display:inline-flex;align-items:center;border:1px solid var(--z-border-brass);
  background:rgba(228,179,99,.07);border-radius:var(--r-pill);padding:9px 18px;margin-block-end:24px}
.governing b{font-family:var(--font-display);font-style:italic;font-weight:600;color:var(--z-brass-400);font-size:1.0625rem}
:lang(he) .governing b,:lang(ar) .governing b{font-style:normal}
.legend{display:flex;gap:10px;flex-wrap:wrap;margin-block-end:32px}
.pillars{display:grid;grid-template-columns:repeat(4,1fr)}
.pillar{padding:26px clamp(14px,1.6vw,22px) 4px;border-block-start:1px solid var(--z-border);position:relative}
.pillar::after{content:"";position:absolute;inset-block-start:-1px;inset-inline-start:0;inline-size:42%;
  block-size:1.5px;background:linear-gradient(to right,var(--z-action-400),rgba(52,227,155,0))}
.pillar-n{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--z-brass-400);letter-spacing:.1em;margin-block-end:12px}
.pillar h3{margin-block-end:12px}
.pillar-status{margin-block-end:14px}
.pillar p{font-size:var(--fs-sm);line-height:1.6;color:var(--z-text-mute)}
.pillar-note{font-size:var(--fs-xs);color:var(--z-text-faint);line-height:1.5;margin-block-start:10px;
  border-inline-start:2px solid var(--z-border-brass);padding-inline-start:11px}

/* ── cards, panels, rails ── */
.card,.panel,.tile,.rm-step,.brief{background:linear-gradient(180deg,#08241C 0%,#061E17 100%);
  border:1px solid var(--z-border);border-radius:var(--r-md);box-shadow:var(--z-inset-hi)}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,calc((100% - 40px)/2.2));gap:20px;
  overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-inline:contain;padding-block-end:10px}
.card{scroll-snap-align:start;overflow:hidden;text-decoration:none;display:block;position:relative;
  transition:border-color .2s,transform .2s}
.card:hover{border-color:var(--z-border-strong);transform:translateY(-2px)}
.card::after{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:38%;
  block-size:1.5px;background:linear-gradient(to right,var(--z-action-400),rgba(52,227,155,0));opacity:.75}
.card-media{aspect-ratio:16/10;background:var(--z-surface-2);border-block-end:1px solid var(--z-border);position:relative}
.card-media svg{inline-size:100%;block-size:100%}
.ph-tag{position:absolute;inset-block-start:10px;inset-inline-start:10px;z-index:2}
.card-body{padding:20px}
.card-body h3{margin-block-end:5px}
.card-sector{font-size:var(--fs-xs);color:var(--z-brass-400);letter-spacing:.06em;text-transform:uppercase;
  font-weight:600;margin-block-end:10px}
:lang(he) .card-sector,:lang(ar) .card-sector{text-transform:none;letter-spacing:0}
.card-body p{font-size:var(--fs-sm);color:var(--z-text-mute);line-height:1.55}
.rail-ctl{display:flex;gap:8px;flex-shrink:0}
.rail-btn{inline-size:44px;min-inline-size:44px;block-size:44px;border-radius:var(--r-pill);
  border:1px solid var(--z-border);background:none;color:var(--z-text-hi);cursor:pointer;display:grid;place-items:center}
.rail-btn[data-rail="prev"] .icon-dir{transform:rotate(180deg)}
.rail-btn:hover{border-color:var(--z-border-strong)}
.rail-dots{display:none;gap:6px;justify-content:center;margin-block-start:14px}
.rail-dots button{inline-size:44px;block-size:44px;border:none;background:none;cursor:pointer;display:grid;place-items:center}
.rail-dots i{inline-size:7px;block-size:7px;border-radius:var(--r-pill);background:var(--z-text-faint);display:block;transition:.2s}
.rail-dots button[aria-current="true"] i{background:var(--z-action-400);inline-size:20px}

/* ── offer ── */
/* The two sellable services carry equal structural weight. CRM receives a
   restrained gold/green distinction without changing the visual language. */
.panel{padding:clamp(24px,3vw,34px);position:relative}
.panel-now{border-color:var(--z-border-strong)}
.panel-now::after{content:"";position:absolute;inset-block-start:-1px;inset-inline-start:-1px;inline-size:44%;
  block-size:2px;border-radius:2px;background:linear-gradient(to right,var(--z-action-400),rgba(52,227,155,0))}
.offer-lead{padding:clamp(28px,3.4vw,44px)}
.offer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.offer-grid .offer-lead{display:flex;flex-direction:column}
.offer-grid .offer-actions{margin-block-start:auto;padding-block-start:26px}
.offer-crm{border-color:rgba(228,179,99,.52);background:
  radial-gradient(circle at 92% 8%,rgba(228,179,99,.12),transparent 34%),
  linear-gradient(145deg,rgba(52,227,155,.055),var(--z-surface-1) 58%)}
.offer-crm::after{inline-size:68%;background:linear-gradient(to right,var(--z-gold),var(--z-action-400),rgba(52,227,155,0))}
.offer-crm .price{color:var(--z-action-300)}
.offer-lead-line{max-inline-size:40rem;margin-block-start:6px}
.offer-note{color:var(--z-text-mute);margin-block-start:4px;max-inline-size:40rem}
.inc-two{grid-template-columns:1fr;column-gap:36px}
@media(min-width:820px){.inc-two{grid-template-columns:1fr 1fr}}
/* Secondary, but body size and body colour — it qualifies the price, so it has
   to be readable without hunting for it. */
.offer-qualifier{color:var(--z-text-mute);max-inline-size:44rem;
  padding-block-start:16px;border-block-start:1px solid var(--z-border)}
.offer-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-block-start:26px}
.offer-brief-link,.hero-brief-link{color:var(--z-text-mute);font-size:var(--fs-sm);
  text-underline-offset:4px;display:inline-flex;align-items:center;min-block-size:44px}
.offer-brief-link:hover,.hero-brief-link:hover{color:var(--z-text-hi)}
.roadmap-band{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;
  margin-block-start:18px;padding:16px 20px;border:1px dashed var(--z-border);
  border-radius:14px;background:var(--z-surface-1);opacity:.78}
.roadmap-band-name{font-family:var(--font-display);font-weight:600;letter-spacing:.08em;
  color:var(--z-text-mute);font-size:var(--fs-sm);margin-block-end:2px}
.roadmap-band .xs{max-inline-size:60rem}
.growth-band{border-style:solid;border-color:rgba(52,227,155,.32);
  background:linear-gradient(135deg,rgba(52,227,155,.08),var(--z-surface-1));opacity:1}
.growth-band .roadmap-band-name{color:var(--z-text-hi)}
.panel h3{margin-block:14px 8px}
.price{font-family:var(--font-display);font-size:2rem;font-weight:600;color:var(--z-text-hi);margin-block:18px 4px}
.inc{margin-block:20px 24px;display:grid;gap:11px}
.inc li{display:flex;gap:11px;font-size:var(--fs-sm);color:var(--z-text-mute);line-height:1.5}
.inc svg{flex-shrink:0;margin-block-start:3px}

/* ── process, roadmap, trust ── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.step{padding:26px clamp(14px,1.6vw,22px) 0;border-block-start:1px solid var(--z-border);position:relative}
.step::after{content:"";position:absolute;inset-block-start:-1px;inset-inline-start:0;inline-size:34%;block-size:1.5px;
  background:linear-gradient(to right,var(--z-action-400),rgba(52,227,155,0))}
.step-n{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--z-brass-400);letter-spacing:.1em;margin-block-end:10px}
.step h3{margin-block-end:8px}
.step p{font-size:var(--fs-sm);color:var(--z-text-mute);line-height:1.55}
.roadmap{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--z-border);
  border:1px solid var(--z-border);border-radius:var(--r-sm);overflow:hidden;opacity:.85}
.rm-step{padding:14px 16px 16px;border:none;border-radius:0;box-shadow:none}
.rm-v{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--z-brass-400);letter-spacing:.06em;margin-block-end:6px}
.rm-t{font-family:var(--font-display);font-weight:600;font-size:var(--fs-sm);color:var(--z-text-hi);line-height:1.3;margin-block-end:5px}
:lang(he) .rm-t,:lang(ar) .rm-t{font-weight:700}
.rm-s{font-size:var(--fs-xs);color:var(--z-text-mute);line-height:1.45}
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,28px)}
.tile{padding:24px}
.tile h3{font-family:var(--font-display);font-size:1.0625rem;font-weight:600;color:var(--z-text-hi);margin-block:12px 8px}
.tile p{font-size:var(--fs-sm);color:var(--z-text-mute);line-height:1.55}

/* ── FAQ ── */
.faq{display:grid;gap:0;max-inline-size:52rem}
.faq details{border-block-end:1px solid var(--z-border)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;
  padding-block:20px;min-block-size:44px;list-style:none;font-family:var(--font-display);
  font-size:clamp(1.0625rem,1.6vw,1.25rem);font-weight:600;color:var(--z-text-hi)}
:lang(he) .faq summary,:lang(ar) .faq summary{font-weight:700}
.faq summary::-webkit-details-marker{display:none}
/* Disclosure indicator. PHYSICAL borders on purpose: border-inline-* flips in
   RTL and turns the chevron sideways. Closed points DOWN, open points UP, in
   every script. Do not convert these to logical properties. */
.faq summary::after{content:"";inline-size:12px;block-size:12px;
  border-right:1.7px solid var(--z-action-400);border-bottom:1.7px solid var(--z-action-400);
  transform:rotate(45deg);transform-origin:60% 60%;flex-shrink:0;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq p{padding-block-end:22px;font-size:var(--fs-sm);color:var(--z-text-mute);line-height:1.7;max-inline-size:44rem}

/* ── brief ── */
.brief{padding:clamp(26px,4vw,44px);max-inline-size:760px;margin-inline:auto;
  border-color:rgba(52,227,155,.44);box-shadow:0 0 0 1px rgba(52,227,155,.08),
    0 18px 60px rgba(0,0,0,.2),0 0 46px rgba(52,227,155,.07),var(--z-inset-hi)}
.prog{display:flex;gap:6px;margin-block-end:22px}
.prog i{block-size:3px;flex:1;border-radius:2px;background:var(--z-surface-3);display:block}
.prog i[data-active="true"]{background:var(--z-action-400)}
.brief-step{border:0;padding:0;margin:0;min-inline-size:0}
.brief-step legend{display:block;margin-block-end:10px;inline-size:100%}
.brief label{display:block;margin-block-end:10px}
.brief textarea{inline-size:100%;min-block-size:118px;background:var(--z-canvas);color:var(--z-text);
  border:1px solid rgba(52,227,155,.46);border-radius:12px;padding:15px 17px;font-size:1.0625rem;
  box-shadow:inset 0 0 0 1px rgba(52,227,155,.035),0 0 24px rgba(52,227,155,.055);
  resize:vertical;line-height:1.6;-webkit-appearance:none;appearance:none;transition:border-color .2s,box-shadow .2s}
.brief textarea::placeholder{color:var(--z-text-faint)}
.brief textarea:focus-visible{outline:2px solid var(--z-action-400);outline-offset:2px;
  border-color:var(--z-action-400);box-shadow:0 0 0 4px rgba(52,227,155,.10),0 0 34px rgba(52,227,155,.12)}
.brief textarea[aria-invalid="true"]{border-color:#E4B363}
.err{display:none;color:var(--z-brass-400);font-size:var(--fs-xs);margin-block-start:10px}
.err[data-show="1"]{display:block}
.brief-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-block-start:22px}
.brief-review{margin-block-start:4px}
.brief-review ol{display:grid;gap:12px;margin-block:20px 24px;counter-reset:brief}
.brief-review li{display:grid;gap:5px;padding:14px 16px;border:1px solid var(--z-border);
  border-radius:12px;background:rgba(4,21,15,.48)}
.brief-review strong{font-size:var(--fs-xs);color:var(--z-brass-400);font-weight:700}
.brief-review span{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--z-text-hi)}
.brief-send{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.brief-send .btn{min-block-size:48px}
.brief-edit{border:0;background:transparent;color:var(--z-text-mute);text-decoration:underline;
  text-underline-offset:4px;min-block-size:44px;padding-inline:8px;cursor:pointer}
.brief-review .xs{margin-block-start:14px;max-inline-size:38rem}
.brief-privacy{font-size:var(--fs-xs);color:var(--z-text-faint);margin-block-start:18px;line-height:1.55}
.alt{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-block-start:26px}

@media(max-width:560px){
  .brief{padding:24px 18px}
  .brief-row,.brief-send{align-items:stretch}
  .brief-row .btn,.brief-send .btn{inline-size:100%;justify-content:center}
  .brief-edit{inline-size:100%;text-align:center}
}

/* ── footer ── */
.foot{border-block-start:1px solid var(--z-border);padding-block:clamp(42px,6vw,72px) 28px;
  background:radial-gradient(ellipse 58% 90% at 50% 0,rgba(52,227,155,.075),transparent 68%),
    linear-gradient(180deg,var(--z-surface-1),var(--z-canvas));position:relative}
.foot::before{content:"";position:absolute;inset-block-start:-1px;inset-inline:0;margin-inline:auto;
  inline-size:min(560px,70vw);block-size:1.5px;background:linear-gradient(to right,transparent,var(--z-action-400),transparent)}
.foot-in{display:grid;grid-template-columns:minmax(220px,1.2fr) minmax(220px,.8fr) minmax(180px,.7fr);
  gap:28px 5vw;align-items:start}
.foot-brand{align-self:start;padding-block-start:3px}
.foot-brand svg{inline-size:34px;block-size:34px;filter:drop-shadow(0 0 12px rgba(52,227,155,.20))}
.foot-legal{display:grid;align-content:start;gap:4px}
.foot-legal::before{content:attr(aria-label);margin-block-end:7px;font-size:.7rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--z-brass-400)}
.foot-legal a,.foot-contact a{display:inline-flex;align-items:center;min-block-size:44px;width:max-content}
.foot-contact{display:flex;flex-direction:column;align-items:flex-start}
.foot-bottom{grid-column:1/-1;border-block-start:1px solid var(--z-border);padding-block-start:18px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.foot-bottom p{margin:0;color:var(--z-text-faint)}
.foot-langs{display:flex;gap:4px;flex-wrap:wrap;font-size:var(--fs-xs)}
.foot-langs a{display:inline-flex;align-items:center;
  min-block-size:44px;min-inline-size:44px;justify-content:center;padding-inline:10px;border-radius:10px}
.foot-langs a{color:var(--z-text-mute);text-decoration:none}
.foot-langs a:hover{color:var(--z-text-hi);background:var(--z-surface-2)}
.foot-langs a[aria-current="page"]{color:var(--z-text-hi);background:rgba(52,227,155,.10);
  box-shadow:inset 0 0 0 1px rgba(52,227,155,.28)}
@media(max-width:760px){
  .foot-in{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}
@media(max-width:520px){
  .foot-in{grid-template-columns:1fr;gap:22px}
  .foot-brand,.foot-bottom{grid-column:auto}
  .foot-bottom{align-items:flex-start;flex-direction:column}
}

/* ── legal and accessibility pages ── */
.legal-page{padding-block-end:clamp(56px,8vw,104px)}
.legal-hero{position:relative;overflow:hidden;border-block-end:1px solid var(--z-border);
  background:radial-gradient(circle at 82% 18%,rgba(52,227,155,.13),transparent 28%),
    linear-gradient(145deg,var(--z-surface-2),var(--z-canvas) 62%)}
[dir="rtl"] .legal-hero{background:radial-gradient(circle at 18% 18%,rgba(52,227,155,.13),transparent 28%),
  linear-gradient(215deg,var(--z-surface-2),var(--z-canvas) 62%)}
.legal-hero::after{content:"";position:absolute;inset-block:0;inset-inline-end:8%;inline-size:1px;
  background:linear-gradient(transparent,var(--z-action-400),transparent);opacity:.55}
.legal-hero-in{padding-block:clamp(64px,9vw,120px);position:relative;z-index:1}
.legal-title{max-inline-size:14ch;margin-block:14px 20px}
.legal-intro{max-inline-size:48rem}
.legal-updated{margin-block-start:24px;color:var(--z-text-faint)}
.legal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  margin-block:clamp(42px,6vw,76px);background:var(--z-border);border:1px solid var(--z-border);border-radius:18px;overflow:hidden}
.legal-section{display:grid;grid-template-columns:42px 1fr;gap:14px;padding:clamp(24px,4vw,42px);
  min-block-size:220px;background:var(--z-surface-1)}
.legal-number{font-family:var(--font-display);color:var(--z-brass-400);font-size:.84rem;letter-spacing:.08em}
.legal-section h2{font-family:var(--font-display);font-size:clamp(1.25rem,2vw,1.55rem);color:var(--z-text-hi);line-height:1.25}
.legal-section p{margin-block-start:12px;color:var(--z-text-mute);line-height:1.75;max-inline-size:42rem}
.legal-contact{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:clamp(24px,4vw,38px);
  border:1px solid var(--z-border-brass);border-radius:16px;background:linear-gradient(120deg,rgba(228,179,99,.08),rgba(52,227,155,.04))}
.legal-contact p:last-child{margin-block-start:8px;color:var(--z-text-mute)}
@media(max-width:700px){
  .legal-grid{grid-template-columns:1fr}
  .legal-section{min-block-size:0;grid-template-columns:34px 1fr;padding:24px 20px}
  .legal-contact{align-items:flex-start;flex-direction:column}
  .legal-contact .btn{inline-size:100%}
}

/* ── notices ── */
.notice{background:rgba(228,179,99,.07);border:1px solid var(--z-border-brass);border-radius:12px;
  padding:16px 18px;font-size:var(--fs-sm);color:var(--z-text-mute);line-height:1.6}
.notice b{color:var(--z-brass-400)}

/* ══ RESPONSIVE ══ */
@media(max-width:1000px){
  .nav-links{display:none} .burger{display:flex}
  .hero{padding-block:1.5rem 2.5rem}
  .demo{aspect-ratio:16/11}
  .pillars,.steps{grid-template-columns:repeat(2,1fr)}
  .trust{grid-template-columns:repeat(2,1fr)}
  .offer-actions{gap:12px}
  .rail{grid-auto-columns:86%;gap:14px}
  .rail-ctl{display:none} .rail-dots{display:flex}
  .roadmap{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:819px){.offer-grid{grid-template-columns:1fr}}
@media(max-width:768px){
  .hero-ctas .btn{inline-size:100%}
  .hero-ctas{gap:10px}
}
@media(max-width:560px){
  .pillars{grid-template-columns:1fr}
  .roadmap{grid-template-columns:1fr}
  /* Two-up, not stacked: four single-column cards was the longest stretch of
     dead scroll on a phone. Below 380px they fall back to one column. */
  .steps,.trust{grid-template-columns:1fr 1fr;gap:14px}
  .steps h3,.trust h3{font-size:1rem}
}
@media(max-width:379px){ .steps,.trust{grid-template-columns:1fr} }
@media(max-width:520px){ .nav-right>.btn{display:none} }
@media(max-width:375px){
  .hero-eyebrow{display:none}
  :root{--fs-d1:2rem;--gutter:20px}
  .demo{aspect-ratio:16/12}
}
@media(max-width:360px){ :root{--gutter:16px} .nav-in{gap:10px} .proof-in{gap:14px} }
/* landscape phone */
@media(max-height:480px) and (orientation:landscape) and (max-width:1000px){
  .hero-grid{grid-template-columns:5.2fr 6.8fr}   :root{--fs-d1:1.875rem} .nav-in{block-size:56px}
}
@media(min-width:2200px){ .wide{max-width:1600px} }
/* iOS: inputs must be >=16px or Safari zooms on focus */
@media(max-width:767px){ input,textarea,select{font-size:16px} }

/* ══ BUILD demonstration — the composition is COMPLETE on first paint ══
   The finished frame is in the markup and is never hidden. [data-play="1"]
   adds two purely ADDITIVE layers on top of it — a luminous sweep and a
   border trace — so there is no blank state, no skeleton, no poster and no
   layout shift. `aspect-ratio` on .demo reserves the box before paint.
   Reduced motion and no-JS show exactly the same completed composition;
   the only difference is that the two extra layers never run.
   Never reintroduce an `opacity:0` start state on .m-fill here. */
.demo .m-fill{opacity:1;transform:none}
.demo .m-trace{stroke-dashoffset:0}
.demo .m-lum{display:none}
[data-play="1"] .m-trace{stroke-dasharray:1660;stroke-dashoffset:1660;animation:mTrace .55s ease-out .35s forwards}
[data-play="1"] .m-lum{display:block;opacity:0;animation:mLum 1.1s ease-out .15s forwards}
@keyframes mTrace{to{stroke-dashoffset:0}}
@keyframes mLum{0%{opacity:0;transform:translateY(-40%)}45%{opacity:.5}100%{opacity:0;transform:translateY(120%)}}
@media(prefers-reduced-motion:reduce){ [data-play="1"] *{animation:none!important} }

/* ── offer fine print: present but not shouting ── */
.fineprint{margin-block-start:24px;border-block-start:1px solid var(--z-border);padding-block-start:6px}
.fineprint summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;
  list-style:none;min-block-size:44px;font-size:var(--fs-sm);font-weight:600;color:var(--z-text-mute)}
.fineprint summary::-webkit-details-marker{display:none}
/* Same physical-geometry rule as .faq summary::after above. */
.fineprint summary::after{content:"";inline-size:9px;block-size:9px;border-right:1.6px solid var(--z-text-faint);
  border-bottom:1.6px solid var(--z-text-faint);transform:rotate(45deg);transform-origin:60% 60%;flex-shrink:0;transition:transform .2s}
.fineprint[open] summary::after{transform:rotate(-135deg)}
.exc{display:grid;gap:8px;padding-block-end:8px}
.exc li{font-size:var(--fs-xs);color:var(--z-text-mute);line-height:1.55;
  padding-inline-start:14px;position:relative}
.exc li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:.65em;
  inline-size:6px;block-size:1.5px;background:var(--z-text-faint)}
.foot-in a{color:var(--z-text-mute);text-decoration:none}
.foot-in a:hover{color:var(--z-text-hi)}


/* ── conversion honesty ────────────────────────────────────────────────────
   A form that cannot send must not wear the primary-action colour. */
.btn-muted{background:transparent;color:var(--z-text-mute);border:1px dashed var(--z-border-strong)}
.btn-muted:hover{color:var(--z-text-hi);border-color:var(--z-text-faint)}
.chip-preview{display:inline-flex;align-items:center;gap:7px;margin-block-end:16px;
  border:1px dashed var(--z-border-strong);color:var(--z-text-faint);
  padding:5px 12px;border-radius:var(--r-pill);font-size:var(--fs-xs)}

/* ── one deliberate brand moment ───────────────────────────────────────────
   The mark stays at navigation size everywhere else. This is the single place
   the chamfer and the incision are large enough to read. */
.brand-moment{display:flex;align-items:center;gap:clamp(18px,2.4vw,26px);
  padding-block:clamp(34px,5vw,56px);border-block-start:1px solid var(--z-border)}
.brand-moment svg{inline-size:clamp(64px,7vw,96px);block-size:clamp(64px,7vw,96px);flex-shrink:0}
.brand-moment-copy{max-inline-size:40rem}
.brand-moment-name{font-family:var(--font-display);font-weight:600;letter-spacing:.16em;
  font-size:1.35rem;color:var(--z-text-hi);margin-block-end:6px}

/* ── work card media ── */
.card-media img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
.card-media picture{display:block;inline-size:100%;block-size:100%}

/* ══ HERO STAGE ═══════════════════════════════════════════════════════════
   The motion is the hero's field, not a card beside the text. The copy sits on
   the stage; two scrims carry the contrast so type never lands on the bright
   architecture. Nothing here may cost layout shift: the stage is absolutely
   positioned inside a hero whose height is set before paint. */
.hero{position:relative;isolation:isolate;display:flex;align-items:center;
  min-block-size:min(900px,92svh);padding-block:clamp(2.5rem,6vh,5rem);overflow:hidden}
.hero-stage{position:absolute;inset:0;z-index:0}
.hero-stage-poster,.hero-stage-poster img,.hero-stage-video{
  position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;display:block}
/* No grade. The licensed scene needed one; this film is authored from the
   site's own tokens, so lifting it here only flattened the blacks and pushed
   the whole hero towards a single mid-green. Grade the film, not the stage. */
.hero-stage-poster{z-index:0}
/* The 1px inset is load-bearing: poster and video are otherwise the same box
   with the same imagery, so which one wins LCP was a coin flip on paint order.
   Insetting the video makes the poster strictly larger, so the poster always
   wins. Do not remove without re-measuring LCP. */
.hero-stage-video{z-index:1;inset:1px;opacity:0;transition:opacity .5s ease}
.hero-stage[data-playing="1"] .hero-stage-video{opacity:1}
.hero-stage[data-ended="1"] .hero-stage-video{display:none}
/* NOT mirrored. The film carries real words in the visitor's own language, so
   a scaleX flip would reverse every glyph in it. Each direction is composed
   separately in tools/hero-film and selected at build time; the quiet side
   still lands behind the copy, because the composition puts it there. */

.hero-scrim-edge,.hero-scrim-foot{position:absolute;inset:0;z-index:2;pointer-events:none}
/* LENGTH-based stops, not percentages. A percentage scrim tracks the viewport
   while the copy column tracks a max measure, so at 1920 the bright frame
   drifted under the H1 and contrast measured 1.40:1. In rem the scrim stays
   locked to the copy at every width. */
/* Pulled in once the film gained its own quiet zone: the old 62rem reach was
   sized for a photographic frame that was bright edge to edge, and over an
   authored composition it only made the surfaces read as ghosts. */
.hero-scrim-edge{background:linear-gradient(to left,
  rgba(4,21,15,.78) 0,rgba(4,21,15,.62) 25rem,rgba(4,21,15,.20) 36rem,rgba(4,21,15,0) 47rem)}
[dir="rtl"] .hero-scrim-edge{background:linear-gradient(to left,
  rgba(4,21,15,.78) 0,rgba(4,21,15,.62) 25rem,rgba(4,21,15,.20) 36rem,rgba(4,21,15,0) 47rem)}
.hero-scrim-foot{background:linear-gradient(to bottom,transparent 70%,rgba(4,21,15,.5) 88%,var(--z-canvas) 100%)}

.hero-inner{position:relative;z-index:3;inline-size:100%;
  display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,3vh,34px)}
/* The copy carries its own guarantee. Contrast cannot depend on where the
   frame's bright architecture happens to fall, so a soft panel travels with
   the text and fades out before it can read as a box. */
.hero-copy{max-inline-size:min(44rem,52%);position:relative;
  --hero-vpad:clamp(14px,2vh,26px);
  padding-block:var(--hero-vpad);
  padding-inline:clamp(14px,2vw,30px) clamp(30px,6vw,120px);
  margin-inline:calc(-1 * clamp(14px,2vw,30px)) 0;
  /* The opaque region covers the whole text measure and the fade happens only
     inside the trailing padding. A percentage fade put the soft end underneath
     the headline, which is how a 1.10:1 H1 survived at 1920. */
  --hero-fade:clamp(30px,6vw,120px)}
/* The approved master frame deliberately reserves its right-hand side for
   copy. Keep both writing directions in that quiet zone; LTR text remains
   left-aligned inside the right-hand column. */
[dir="ltr"] .hero-copy,[dir="ltr"] .hero-foot{margin-inline-start:auto}
/* The panel is a pseudo-element, not the element's own background, so it can be
   masked without touching the type. A hard top edge with a rounded corner read
   as a card sitting on a picture; the copy has to feel printed into the frame. */
.hero-copy::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to left,rgba(4,21,15,.62) 0,
    rgba(4,21,15,.58) calc(100% - var(--hero-fade)),rgba(4,21,15,0) 100%);
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 var(--hero-vpad),
    #000 calc(100% - var(--hero-vpad)),rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 var(--hero-vpad),
    #000 calc(100% - var(--hero-vpad)),rgba(0,0,0,0) 100%)}
[dir="rtl"] .hero-copy::after{background:linear-gradient(to left,rgba(4,21,15,.62) 0,
  rgba(4,21,15,.58) calc(100% - var(--hero-fade)),rgba(4,21,15,0) 100%)}
.hero-copy h1,.hero-copy .promise,.hero-copy .lead,.hero-brief-link{
  text-shadow:0 2px 18px rgba(0,0,0,.68),0 1px 2px rgba(0,0,0,.8)}
.hero-copy .lead{max-inline-size:33rem}

/* The luminous edge runs from the copy into the stage: one authored system
   rather than a text column next to an unrelated picture. */
.hero-copy::before{content:"";position:absolute;inset-block-start:0;inset-inline-start:clamp(14px,2vw,30px);
  inline-size:clamp(120px,22vw,340px);block-size:1.5px;
  background:linear-gradient(to right,var(--z-action-400),rgba(52,227,155,0))}
[dir="rtl"] .hero-copy::before{background:linear-gradient(to left,var(--z-action-400),rgba(52,227,155,0))}

.hero-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hero-caption{font-size:var(--fs-xs);color:var(--z-text-mute);max-inline-size:40rem;line-height:1.5}
.hero-caption-chip{display:inline-flex;align-items:center;margin-inline-end:9px;
  padding:4px 11px;border-radius:var(--r-pill);border:1px solid var(--z-border);
  background:rgba(4,21,15,.6);color:var(--z-text)}

.hero-motion-btn{inline-size:44px;block-size:44px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(244,241,234,.22);border-radius:var(--r-pill);
  background:rgba(4,21,15,.72);backdrop-filter:blur(10px);color:var(--z-text-hi);
  cursor:pointer;transition:border-color .18s}
.hero-motion-btn:hover{border-color:var(--z-action-400)}
.hero-motion-btn .mi-play{display:none}
.hero-motion-btn[data-state="paused"] .mi-play,
.hero-motion-btn[data-state="ended"] .mi-play{display:block}
.hero-motion-btn[data-state="paused"] .mi-pause,
.hero-motion-btn[data-state="ended"] .mi-pause{display:none}

@media(max-width:1000px){
  /* Mobile: the stage still fills the hero, so meaningful motion is inside the
     first viewport rather than below a full screen of copy. The copy sits in
     the upper portion and the scrim runs top-to-bottom instead of edge-to-edge. */
  /* stretch, not flex-start: the inner column has to fill the hero or the
     foot's auto top margin has nothing to push against and the caption lands
     in the middle of the film instead of under it. */
  .hero{min-block-size:min(760px,94svh);align-items:stretch;padding-block:clamp(1rem,2.4vh,1.75rem)}
  .hero-copy{max-inline-size:100%;padding-block:10px 22px}
  [dir="ltr"] .hero-copy,[dir="ltr"] .hero-foot{margin-inline-start:0}
  .hero-copy .lead{max-inline-size:34rem}
  /* Every gap removed here is exposed stage. The phone reads the promise and
     the CTA without scrolling, and the structure keeps the bottom third. */
  .hero h1{margin-block-end:10px}
  .hero .promise{margin-block-end:10px}
  .hero .lead{margin-block-end:16px}
  .hero-ctas{margin-block-end:10px}
  /* The eyebrow restates what the H1 and the promise already say. On a phone
     its height is worth more as exposed film than as a third restatement. */
  .hero-eyebrow{display:none}
  /* The copy panel is translucent on a phone, not a lid: the structure reads
     through the type instead of the first viewport being a dark rectangle.
     LENGTH-based fade, confined to the trailing padding — a percentage fade
     put the soft end under the reassurance line and measured 1.15:1. */
  .hero-copy{--hero-vpad:10px}
  .hero-copy::after,[dir="rtl"] .hero-copy::after{
    background:linear-gradient(to bottom,rgba(4,21,15,.43) 0%,rgba(4,21,15,.39) 72%,rgba(4,21,15,.10) 100%);
    -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 var(--hero-vpad),
      #000 calc(100% - 22px),rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 var(--hero-vpad),
      #000 calc(100% - 22px),rgba(0,0,0,0) 100%)}
  /* The scrims stop where the copy stops. Carrying them to the foot is what
     made the exposed band read as an almost-black strip: the film was there
     and two gradients were painting over it. */
  .hero-scrim-edge,[dir="rtl"] .hero-scrim-edge{background:linear-gradient(to bottom,
    rgba(4,21,15,.58) 0%,rgba(4,21,15,.46) 32%,rgba(4,21,15,.22) 45%,
    rgba(4,21,15,.05) 57%,rgba(4,21,15,.01) 100%)}
  .hero-scrim-foot{background:linear-gradient(to bottom,transparent 84%,rgba(4,21,15,.42) 94%,var(--z-canvas) 100%)}
  .hero-inner{justify-content:flex-start;gap:12px}
  /* The caption sits on the stage, not in the panel, so it carries its own
     contrast — as a thickening of the foot scrim rather than a box. It is kept
     as short and as low as it can be: every pixel it takes is a pixel of film
     the visitor never sees. */
  .hero-foot{margin-block-start:auto;gap:9px;
    padding:12px var(--gutter) 6px;margin-inline:calc(-1 * var(--gutter));
    background:linear-gradient(to top,rgba(4,21,15,.9) 0,rgba(4,21,15,.8) 58%,rgba(4,21,15,0) 100%)}
  .hero-reassure{gap:7px;row-gap:1px;font-size:13px}
}
@media(max-width:560px){
  /* The approved visual is a lead character, not wallpaper. Keep only the
     decision-making copy above it and reserve almost half the first viewport
     as a clean, unobstructed stage. */
  .hero{min-block-size:calc(100svh - 64px);block-size:auto;padding-block:12px 0}
  .hero-inner{min-block-size:calc(100svh - 76px);gap:0}
  .hero-copy{padding-block:8px 14px;max-inline-size:100%}
  .hero h1{font-size:clamp(2.65rem,12.5vw,3.45rem);line-height:1.02;margin-block-end:8px}
  .hero .promise{font-size:1.075rem;margin-block-end:10px}
  .hero .lead,.hero-reassure{display:none}
  .hero-ctas{margin-block-end:0;gap:8px}
  .hero-ctas .btn-lg{min-block-size:52px;inline-size:100%;font-size:1rem}
  .hero-brief-link{min-block-size:36px;font-size:.875rem}
  .hero-scrim-edge,[dir="rtl"] .hero-scrim-edge{background:linear-gradient(to bottom,
    rgba(4,21,15,.72) 0%,rgba(4,21,15,.60) 31%,rgba(4,21,15,.34) 43%,
    rgba(4,21,15,.07) 55%,rgba(4,21,15,0) 66%)}
  .hero-scrim-foot{background:linear-gradient(to bottom,transparent 88%,rgba(4,21,15,.38) 96%,var(--z-canvas) 100%)}
  .hero-stage-poster img,.hero-stage-video{object-position:center 64%}
  /* The honesty caption never shortens, so it gets the width instead: the
     control keeps its 44px target and the sentence runs under it. */
  .hero-foot{align-items:flex-end;padding:30px 0 8px;margin-inline:0;
    background:linear-gradient(to top,rgba(4,21,15,.72),rgba(4,21,15,0));gap:8px}
  .hero-caption{font-size:12px;line-height:1.35;flex:1 1 180px;text-wrap:pretty}
  .hero-caption-chip{padding:3px 8px;margin-inline-end:5px}
  html[lang="en"] .hero h1,html[lang="fr"] .hero h1{font-size:clamp(2.38rem,10.7vw,2.85rem);line-height:1.01;
    max-inline-size:10.5ch;text-wrap:balance}
  html[lang="en"] .hero .promise,html[lang="fr"] .hero .promise{font-size:1rem;line-height:1.3}
  html[lang="fr"] .hero h1{font-size:clamp(2.05rem,9.6vw,2.6rem);max-inline-size:12.5ch}
  html[lang="es"] .hero h1,html[lang="ru"] .hero h1{
    font-size:clamp(2rem,9.3vw,2.55rem);line-height:1.01;max-inline-size:13ch;text-wrap:balance}
  html[lang="ar"] .hero h1{font-size:clamp(2.18rem,10vw,2.75rem);line-height:1.08;
    max-inline-size:12ch;text-wrap:balance}
  html:not([lang="he"]) .hero-copy{padding-block-start:4px;padding-block-end:10px}
  html:not([lang="he"]) .hero .promise{margin-block-end:7px}
}
/* Landscape phones: stacking is wrong here — there is width to spare and no
   height at all, so the copy returns to a column beside the stage and the
   scrim goes back to running edge-to-edge. */
@media(max-height:560px) and (orientation:landscape) and (min-width:700px){
  .hero{min-block-size:auto;padding-block:1.25rem;align-items:center}
  .hero-inner{gap:12px}
  .hero-copy{max-inline-size:min(34rem,56%);padding-block:10px 14px}
  /* The copy keeps a panel here too — the edge scrim alone measured 1.44:1 on
     the lead at 844x390. It runs inline, like the desktop composition. */
  .hero-copy{--hero-fade:60px;--hero-vpad:10px;
    padding-inline:16px 70px;margin-inline:-16px 0}
  .hero-copy::after{background:linear-gradient(to right,rgba(4,21,15,.9) 0,
    rgba(4,21,15,.9) calc(100% - var(--hero-fade)),rgba(4,21,15,0) 100%);
    -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 var(--hero-vpad),
      #000 calc(100% - var(--hero-vpad)),rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 var(--hero-vpad),
      #000 calc(100% - var(--hero-vpad)),rgba(0,0,0,0) 100%)}
  [dir="rtl"] .hero-copy::after{background:linear-gradient(to left,rgba(4,21,15,.9) 0,
    rgba(4,21,15,.9) calc(100% - var(--hero-fade)),rgba(4,21,15,0) 100%)}
  .hero .lead{margin-block-end:14px}
  .hero-eyebrow{display:none}
  .hero-scrim-edge{background:linear-gradient(to right,
    rgba(4,21,15,.96) 0,rgba(4,21,15,.9) 22rem,rgba(4,21,15,.5) 32rem,rgba(4,21,15,0) 46rem)}
  [dir="rtl"] .hero-scrim-edge{background:linear-gradient(to left,
    rgba(4,21,15,.96) 0,rgba(4,21,15,.9) 22rem,rgba(4,21,15,.5) 32rem,rgba(4,21,15,0) 46rem)}
  .hero-foot{margin-block-start:10px;padding:0;margin-inline:0;background:none}
}
/* Short phones. This is a floor, not a preference: the headline, the promise,
   the CTA and a real band of film all have to be above the fold at 320x568,
   so the reassurance line goes below it. */
@media(max-width:360px),(max-height:620px) and (orientation:portrait){
  .hero{min-block-size:calc(100svh - 56px)}
  .hero-inner{min-block-size:calc(100svh - 68px)}
  .hero .promise{font-size:1rem;margin-block-end:8px}
  .hero h1{margin-block-end:8px}
  .hero-ctas{margin-block-end:8px}
  .hero-reassure{display:none}
  .hero-caption{font-size:11px}
  .hero-foot{padding-block:10px 4px}
}

/* Ultra-wide. Cover-fitting a 16:9 frame into a 3440x900 hero scales it 2.7x
   and leaves a zoomed centre band with the composition cut off on every side.
   The stage is capped instead, anchored to the outer edge where the film lives,
   and masked on its inner edge so it resolves into the canvas rather than
   ending on a seam. The video keeps its 1px inset, so the poster is still
   strictly the larger element and still wins LCP. */
@media(min-width:2100px){
  .hero-stage-poster,.hero-stage-video{
    inline-size:1900px;inset-inline-start:auto;inset-inline-end:0;
    -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,0) 0,#000 15%);
    mask-image:linear-gradient(to right,rgba(0,0,0,0) 0,#000 15%)}
  [dir="rtl"] .hero-stage-poster,[dir="rtl"] .hero-stage-video{
    -webkit-mask-image:linear-gradient(to left,rgba(0,0,0,0) 0,#000 15%);
    mask-image:linear-gradient(to left,rgba(0,0,0,0) 0,#000 15%)}
  .hero-stage-video{inset-block:1px;inset-inline-end:1px;inline-size:1898px}
}

@media(prefers-reduced-motion:reduce){
  .hero-stage-video{display:none}
  .hero-motion-btn{display:none!important}
}

/* ══ WORK SHOWCASE ═════════════════════════════════════════════════════════
   Desktop is one animated track carrying the real list plus a single
   aria-hidden duplicate; translating by exactly half the track resets on an
   identical frame, so the loop never visibly jumps.
   Mobile keeps the same cinematic motion. It pauses immediately while a
   visitor touches, drags or focuses the rail, then resumes after release. */
.showcase{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent)}
.showcase-track{--rail-gap:20px;display:flex;inline-size:max-content;gap:var(--rail-gap);
  animation:showcaseRun var(--showcase-duration,58s) linear infinite;
  will-change:transform;backface-visibility:hidden;transform:translate3d(0,0,0)}
[dir="rtl"] .showcase-track{animation-name:showcaseRunRtl}
.showcase-list{display:flex;gap:var(--rail-gap);margin:0;padding:0;list-style:none;align-items:flex-start}
.showcase-item{flex:0 0 auto;inline-size:min(340px,76vw);contain:layout paint}

@keyframes showcaseRun{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-50% - (var(--rail-gap) / 2)),0,0)}}
@keyframes showcaseRunRtl{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(50% + (var(--rail-gap) / 2)),0,0)}}

/* Pause on hover, on keyboard focus anywhere inside, and when the controller
   marks the rail paused (tab hidden, pointer held, explicit toggle). */
.showcase:hover .showcase-track,
.showcase:focus-within .showcase-track,
.showcase[data-paused="1"] .showcase-track,
.showcase[data-interacting="1"] .showcase-track{animation-play-state:paused}

/* Cards are equal height regardless of copy length, and the call to action
   sits on the same baseline across the rail. */
.showcase-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  border:1px solid var(--z-gold-border);border-radius:16px;overflow:hidden;
  background:var(--z-ivory);box-shadow:0 18px 48px rgba(0,0,0,.2);
  block-size:412px;
  backface-visibility:hidden;transform:translateZ(0);
  transition:border-color .2s,transform .2s,box-shadow .2s}
.showcase-card:hover{border-color:var(--z-gold);transform:translateY(-3px)}
.showcase-card:focus-visible{outline:2px solid var(--z-action-400);outline-offset:3px}
.showcase-media{display:block;aspect-ratio:16/10;background:var(--z-surface-2)}
.showcase-media picture,.showcase-media img{display:block;inline-size:100%;block-size:100%;object-fit:cover}
.showcase-body{display:flex;flex-direction:column;min-block-size:178px;padding:16px 18px 18px}
.showcase-name{display:block;font-family:var(--font-display);font-size:1.25rem;font-weight:600;
  letter-spacing:.02em;color:var(--z-canvas)}
.showcase-sector{display:block;margin-block-start:4px;font-size:var(--fs-xs);
  color:var(--z-brass-400);letter-spacing:.05em}
.showcase-desc{display:block;margin-block-start:8px;font-size:var(--fs-sm);
  color:var(--z-ink);line-height:1.55}
.showcase-visit{display:inline-flex;align-items:center;gap:7px;margin-block-start:auto;padding-block-start:14px;align-self:flex-start;
  min-block-size:44px;font-size:var(--fs-sm);font-weight:700;color:var(--z-emerald-700)}
.showcase-card:hover .showcase-visit{text-decoration:underline;text-underline-offset:4px}
.showcase-ext{flex-shrink:0}
[dir="rtl"] .showcase-ext{transform:scaleX(-1)}

.showcase-btn{inline-size:44px;block-size:44px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--z-border);border-radius:var(--r-pill);
  background:transparent;color:var(--z-text-mute);cursor:pointer;transition:border-color .18s,color .18s}
.showcase-btn:hover{border-color:var(--z-border-strong);color:var(--z-text-hi)}
.showcase-btn .mi-play{display:none}
.showcase-btn[data-paused="1"] .mi-play{display:block}
.showcase-btn[data-paused="1"] .mi-pause{display:none}

/* Mobile stays automatic, but touch pauses it immediately. The duplicate is
   aria-hidden and untabbable, so assistive technology hears one set. */
@media(max-width:860px){
  .showcase{overflow:hidden;
    -webkit-mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent);
    mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent)}
  .showcase-track{--rail-gap:14px;inline-size:max-content;animation-duration:52s}
  .showcase-item{inline-size:min(258px,74vw)}
  .showcase-media{aspect-ratio:16/9}
  .showcase-card{block-size:auto}
  .showcase-body{block-size:132px;min-block-size:132px;padding:12px 14px 13px}
  .showcase-name{font-size:1.08rem}
  .showcase-sector{font-size:.78rem}
  .showcase-desc{display:none}
  .showcase-visit{padding-block-start:7px;font-size:.84rem}
  .showcase-btn{display:inline-flex}
}
@media(max-width:360px){
  .nav-right .lang-btn{inline-size:44px;padding-inline:0;justify-content:center}
  .nav-right .lang-btn span{display:none}
}

/* Reduced motion: automatic movement stops everywhere. The rail stays a
   normal, manually scrollable list, so nothing becomes unreachable. */
@media(prefers-reduced-motion:reduce){
  .showcase-track{animation:none!important}
  .showcase{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  [data-showcase-clone]{display:none}
  .showcase-btn{display:none}
}

/* ══ CAPABILITY RIBBON ═════════════════════════════════════════════════════
   Same seamless-loop principle as the work showcase, deliberately a different
   register: smaller fragments, varied shape and vertical offset, a slower
   pass, and the opposite direction so the page never reads as two identical
   rails stacked on each other. */
.cap{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent)}
.cap-track{display:flex;inline-size:max-content;gap:18px;margin:0;padding:0;list-style:none;
  animation:capRun 72s linear infinite;will-change:transform;
  backface-visibility:hidden;transform:translate3d(0,0,0)}
[dir="rtl"] .cap-track{animation-name:capRunRtl}
.cap-group{display:block}
.cap-list{display:flex;align-items:center;gap:18px;margin:0;padding:0;list-style:none}
.cap-item{flex:0 0 auto}
/* opposite direction to the work rail */
@keyframes capRun{from{transform:translate3d(calc(-50% - 9px),0,0)}to{transform:translate3d(0,0,0)}}
@keyframes capRunRtl{from{transform:translate3d(calc(50% + 9px),0,0)}to{transform:translate3d(0,0,0)}}
.cap:hover .cap-track,.cap:focus-within .cap-track,
.cap[data-paused="1"] .cap-track,
.cap[data-interacting="1"] .cap-track{animation-play-state:paused}

.cap-frame{margin:0;position:relative;border:1px solid var(--z-gold-border-soft);border-radius:14px;
  overflow:hidden;background:var(--z-ivory);box-shadow:0 18px 45px var(--z-shadow-deep)}
.cap-frame img{display:block;inline-size:100%;block-size:100%;object-fit:cover}
.cap-wide .cap-frame{inline-size:340px;aspect-ratio:4/3}
.cap-tall .cap-frame{inline-size:212px;aspect-ratio:3/4}
/* the depth cue: alternating items sit slightly higher and slightly back */
.cap-lift{transform:translateY(-16px) scale(.94)}
.cap-cap{position:absolute;inset-inline:0;inset-block-end:0;padding:22px 13px 11px;
  font-size:var(--fs-xs);color:var(--z-text);line-height:1.35;
  background:linear-gradient(to top,rgba(4,21,15,.92),rgba(4,21,15,.72) 55%,transparent)}
.cap-frame::after{content:"";position:absolute;inset-block-start:0;inset-inline:0;block-size:1px;
  background:linear-gradient(to right,rgba(52,227,155,.55),rgba(52,227,155,0))}

.cap-note .cap-frame-note{inline-size:296px;aspect-ratio:4/3;display:flex;flex-direction:column;
  justify-content:center;gap:9px;padding:20px 22px;background:var(--z-surface-2);
  border-style:dashed}
.cap-note-title{font-family:var(--font-display);font-size:1.0625rem;font-weight:600;color:var(--z-text-hi)}
.cap-note-body{font-size:var(--fs-xs);color:var(--z-text-mute);line-height:1.6}

@media(max-width:860px){
  .cap{overflow:hidden;padding-block:20px;
    -webkit-mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent);
    mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent)}
  .cap-track{inline-size:max-content;animation-duration:48s}
  .cap-lift{transform:translateY(-10px) scale(.96)}
  .cap-wide .cap-frame{inline-size:230px}
  .cap-tall .cap-frame{inline-size:154px}
  .cap-note .cap-frame-note{inline-size:220px}
}
@media(prefers-reduced-motion:reduce){
  .cap-track{animation:none!important}
  .cap{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  [data-rail-clone]{display:none}
  .cap-lift{transform:none}
}

/* ══ UTILITIES ═════════════════════════════════════════════════════════════
   These exist because the production Content-Security-Policy sets
   style-src 'self' with no 'unsafe-inline': every inline style= attribute is
   REFUSED by the browser on the real host, while working fine on a local
   server that sends no CSP. Anything here was previously an inline style and
   was silently dropped in production. Do not reintroduce inline styles. */
.u-sprite{position:absolute}
.u-center{text-align:center;margin-inline:auto}
.u-center-narrow{text-align:center;max-inline-size:44rem;margin-inline:auto}
.u-mi-auto{margin-inline:auto}
.u-lead-gap{margin-block-start:14px}
.u-label-gap{margin-block:26px 12px}
.u-label-gap-end{margin-block-end:14px}
.u-title-gap{margin-block:26px 14px}
.u-404-title{margin-block:12px 14px}
.u-ctas-center{justify-content:center;margin-block-start:30px}
.u-inert-lg{min-block-size:56px}
.u-full{inline-size:100%}
.u-full-center{inline-size:100%;justify-content:center}
.u-measure{max-inline-size:40rem}
.u-flush-end{padding-block-end:0}
.sec-head-split{display:flex;justify-content:space-between;align-items:flex-end;
  gap:24px;flex-wrap:wrap;max-inline-size:none}
.foot-brand{display:flex;align-items:center;gap:11px}
.foot-brand-name{font-family:var(--font-display);font-weight:600;letter-spacing:.14em;color:var(--z-text-hi)}

/* Direction handling. The layout uses logical properties throughout, so this
   file only carries what genuinely cannot be expressed logically. */
[dir="rtl"] .icon-dir{transform:scaleX(-1)}
/* Carousel controls. The base arrow points toward the inline END. "previous"
   is the same glyph turned 180deg, and in RTL the pair mirrors as a pair — so
   prev and next always point in OPPOSITE logical directions, in both scripts.
   The JS already treats +1 as "further into the list" in either direction. */
[dir="rtl"] .rail-btn[data-rail="prev"] .icon-dir{transform:scaleX(-1) rotate(180deg)}
/* numbers and Latin runs inside RTL text keep their own direction */
bdi{unicode-bidi:isolate}
/* Arabic must never be letter-spaced, uppercased or synthetically bolded */
:lang(ar){font-synthesis-weight:none}
:lang(ar) *{letter-spacing:normal!important;text-transform:none!important}

/* generated: per-project focal crops */
.focal-sadafronia{object-position:50% 12%}
.focal-better-world{object-position:50% 12%}
.focal-yayin{object-position:50% 22%}
.focal-zohar-crm{object-position:50% 50%}
.focal-zohar{object-position:42% 50%}
.focal-eco-tech-israel{object-position:55.00000000000001% 18%}
.focal-urban-fashion-store{object-position:50% 18%}
.focal-le-monde-sefarade{object-position:50% 18%}
.focal-gourmet-delivery{object-position:50% 18%}