/* ============================================================
   Elementor compatibility layer.
   Prepended BEFORE the Marom rules (see tools/build_css.py), so
   Marom's own class rules still win where they set a property.
   ============================================================ */

/* Kit spacing between widgets would add 20px margins the design does not have */
body.marom-site{--kit-widget-spacing:0px}

/* Containers behave like the plain block / grid / flex boxes of the source.
   :where() keeps specificity at zero so any Marom class rule overrides these. */
:where(body.marom-site) .e-con{
  --display:block;
  --padding-top:0px;--padding-right:0px;--padding-bottom:0px;--padding-left:0px;
  --gap:0px;--row-gap:0px;--column-gap:0px;
}

/* HTML widgets hold exact source markup: let it sit directly in its container */
.m-raw,.m-raw>.elementor-widget-container{display:contents}

/* Kit global typography/colour would otherwise repaint text widgets */
body.marom-site .elementor-widget-text-editor{color:inherit;font-family:inherit;font-weight:inherit;font-size:inherit;line-height:inherit}
body.marom-site .elementor-heading-title{
  font-family:inherit;color:inherit;margin:0;padding:0;
  font-weight:500;line-height:1.1;letter-spacing:-.015em;text-wrap:balance;
}
body.marom-site h1.elementor-heading-title{font-size:var(--display);line-height:1.03;font-weight:600}
body.marom-site h2.elementor-heading-title{font-size:var(--h2);font-weight:600}
body.marom-site h3.elementor-heading-title{font-size:var(--h3);font-weight:600;line-height:1.25}

/* Button widget: neutralise the kit button, Marom variants are generated below */
body.marom-site .elementor-widget-button .elementor-button{
  background:transparent;border:0;border-radius:0;padding:0;font-family:inherit;
  font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;
  text-transform:none;text-shadow:none;fill:currentColor;box-shadow:none;
}
body.marom-site .elementor-widget-button .elementor-button-content-wrapper{gap:inherit;justify-content:inherit}

/* ---- Marom design system ---- */
/* Marom design system - extracted from marom-onefile.html.
   /wp-content/uploads/marom is replaced with the uploads URL at deploy time. */
/* ============================================================
   מרום — Design system
   Palette anchored on the company logo (#279AD6 cyan, #343745 ink)
   and pushed into a deep indigo range for the dark surfaces.
   ============================================================ */
:root{
  /* Blue ladder, built around the company blue #1F4D93 */
  --ink-950:#050D1C;
  --ink-900:#081930;
  --ink-800:#0D2A50;
  --indigo-700:#10305E;
  --indigo-600:#173E79;
  --indigo-500:#1F4D93;   /* the company blue — primary action */
  --indigo-400:#2E6ABF;   /* one step up, for hover and accents */
  --peri:#8CBBEE;         /* headline accent on dark */
  --cyan:#38B8F2;
  --cyan-soft:#9BD9F7;
  --brand-cyan:#279AD6;

  /* Light ladder */
  --paper:#F4F6FC;
  --paper-2:#EAEFF9;
  --surface:#FFFFFF;
  --line:#DEE4F1;
  --line-soft:#EDF1F9;

  /* Text */
  --ink:#141A33;
  --ink-soft:#525A78;
  --ink-faint:#858DA8;
  --on-dark:#FFFFFF;
  --on-dark-soft:rgba(226,232,255,.74);
  --on-dark-faint:rgba(200,210,245,.52);

  /* Type scale */
  --display:clamp(2.3rem,4.4vw,3.9rem);
  --h2:clamp(1.95rem,3.6vw,3.05rem);
  --h3:clamp(1.25rem,2vw,1.7rem);
  --body:1.0625rem;
  --small:.9375rem;
  --micro:.8125rem;

  /* Rhythm */
  --gutter:clamp(1.25rem,5vw,4rem);
  --section-y:clamp(4.5rem,8.5vw,8rem);
  --r-sm:6px; --r-md:14px; --r-lg:24px; --r-xl:34px;
  --edge:calc((100vw - min(100vw, 1280px)) / 2 + var(--gutter));

  --sh-1:0 1px 2px rgba(10,16,48,.06);
  --sh-2:0 1px 2px rgba(10,16,48,.06), 0 10px 24px -12px rgba(10,16,48,.22);
  --sh-3:0 2px 6px rgba(10,16,48,.08), 0 18px 40px -18px rgba(10,16,48,.3), 0 50px 90px -60px rgba(10,16,48,.5);
  --sh-dark:0 4px 14px rgba(0,0,0,.4), 0 30px 70px -28px rgba(0,0,0,.75);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--surface);color:var(--ink);
  font-family:'Rubik',system-ui,'Segoe UI',sans-serif;
  font-size:var(--body);line-height:1.7;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
h1,h2,h3,h4{margin:0;font-weight:500;line-height:1.1;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:var(--display);line-height:1.03;font-weight:600}
h2{font-size:var(--h2);font-weight:600}
h3{font-size:var(--h3);font-weight:600;line-height:1.25}
html[dir="ltr"] h1{letter-spacing:-.035em}
html[dir="ltr"] h2{letter-spacing:-.03em}
p{margin:0}a{color:inherit}img{max-width:100%;display:block}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2.5px solid var(--indigo-400);outline-offset:3px;border-radius:var(--r-sm)}
section[id]{scroll-margin-block-start:88px}

.wrap{max-width:1280px;margin-inline:auto;padding-inline:var(--gutter)}
.lede{font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.62;font-weight:300;max-width:56ch}
.on-dark .lede,.dark .lede{color:var(--on-dark-soft)}
.accent{color:var(--peri)}

/* Small eyebrow label */
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-size:var(--micro);font-weight:600;letter-spacing:.02em}
.eyebrow i{width:9px;height:9px;background:currentColor;transform:rotate(45deg);border-radius:2px;display:block;flex:none}

/* ============================================================
   Buttons
   ============================================================ */
.btn,
.elementor-widget-button.m-btn .elementor-button{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1.7rem;border:1px solid transparent;border-radius:var(--r-md);
  font-weight:500;font-size:var(--small);text-decoration:none;white-space:nowrap;
  transition:transform .18s cubic-bezier(.2,.7,.3,1),background .2s,border-color .2s,box-shadow .2s,color .2s;
}
.btn--primary,
.elementor-widget-button.m-btn--primary .elementor-button{background:var(--indigo-500);color:#fff;box-shadow:0 8px 22px -10px rgba(31,77,147,.85)}
.btn--primary:hover,
.elementor-widget-button.m-btn--primary .elementor-button:hover{background:var(--indigo-400);transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(46,106,191,.9)}
.btn--ghost-dark,
.elementor-widget-button.m-btn--ghost-dark .elementor-button{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.24)}
.btn--ghost-dark:hover,
.elementor-widget-button.m-btn--ghost-dark .elementor-button:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.45)}
.btn--ghost,
.elementor-widget-button.m-btn--ghost .elementor-button{background:#fff;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover,
.elementor-widget-button.m-btn--ghost .elementor-button:hover{border-color:var(--indigo-500);color:var(--indigo-500)}
.btn--light,
.elementor-widget-button.m-btn--light .elementor-button{background:#fff;color:var(--ink-900)}
.btn--light:hover,
.elementor-widget-button.m-btn--light .elementor-button:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(0,0,0,.5)}

/* ============================================================
   Header
   ============================================================ */
.masthead{position:sticky;top:0;z-index:70;transition:background .3s,box-shadow .3s,backdrop-filter .3s}
.masthead__inner{display:flex;align-items:center;gap:clamp(.9rem,2.4vw,2.2rem);min-height:88px}
.brand{display:flex;align-items:center;color:var(--ink);text-decoration:none;flex:none}
.brand svg{height:clamp(44px,3.6vw,54px);width:auto}
.nav{display:flex;align-items:center;gap:1.6rem;margin-inline-start:auto;font-size:var(--small);font-weight:400}
.nav > a{text-decoration:none;color:var(--ink-soft);position:relative;padding-block:.35rem;transition:color .2s}
.nav > a::after{content:'';position:absolute;inset-inline-start:0;bottom:0;height:1.5px;width:0;background:var(--indigo-500);transition:width .28s}
.nav > a:hover{color:var(--ink)}.nav > a:hover::after{width:100%}
.nav > a[aria-current="page"]{color:var(--indigo-500)}
.nav > a[aria-current="page"]::after{width:100%;background:var(--indigo-500)}
.tools{display:flex;align-items:center;gap:.6rem;flex:none}
.lang{display:inline-flex;border:1px solid var(--line);border-radius:999px;background:#fff;padding:2px;font-size:var(--micro);font-weight:500}
.lang button{border:0;background:none;padding:.28rem .7rem;border-radius:999px;color:var(--ink-faint);line-height:1.5;transition:.2s}
.lang button[aria-pressed="true"]{background:var(--indigo-500);color:#fff}
.burger{display:none;border:1px solid var(--line);background:#fff;border-radius:var(--r-sm);padding:.5rem .6rem}
.burger span{display:block;width:18px;height:1.6px;background:var(--ink);margin:3.4px 0}

/* Transparent over a dark hero, solid once scrolled */
body[data-hero-dark] .masthead:not(.is-stuck) .brand{color:#fff}
body[data-hero-dark] .masthead:not(.is-stuck) .nav > a{color:var(--on-dark-soft)}
body[data-hero-dark] .masthead:not(.is-stuck) .nav > a:hover{color:#fff}
body[data-hero-dark] .masthead:not(.is-stuck) .nav > a::after{background:var(--peri)}
body[data-hero-dark] .masthead:not(.is-stuck) .lang{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22)}
body[data-hero-dark] .masthead:not(.is-stuck) .lang button{color:var(--on-dark-soft)}
body[data-hero-dark] .masthead:not(.is-stuck) .lang button[aria-pressed="true"]{background:#fff;color:var(--ink-900)}
body[data-hero-dark] .masthead:not(.is-stuck) .burger{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.24)}
body[data-hero-dark] .masthead:not(.is-stuck) .burger span{background:#fff}
.masthead.is-stuck{background:rgba(255,255,255,.9);backdrop-filter:saturate(160%) blur(14px);box-shadow:0 1px 0 var(--line),0 14px 32px -28px rgba(10,16,48,.6)}

@media (max-width:900px){
  .nav{
    position:fixed;inset-block-start:88px;inset-inline:0;background:#fff;
    flex-direction:column;align-items:stretch;gap:0;padding:.4rem var(--gutter) 1.2rem;
    margin:0;display:none;border-block-end:1px solid var(--line);
    box-shadow:0 24px 40px -30px rgba(10,16,48,.6);
  }
  .nav.is-open{display:flex}
  .nav > a{padding-block:.9rem;border-block-end:1px solid var(--line-soft);font-size:1.05rem;color:var(--ink-soft) !important}
  .burger{display:block;order:9}
  .tools{margin-inline-start:auto}
  .tools .btn,
  .tools .elementor-widget-button.m-btn .elementor-button{display:none}
}

/* ============================================================
   Dark surface: the signature gradient
   ============================================================ */
.dark{
  position:relative;color:var(--on-dark);
  background:
    radial-gradient(58% 62% at 88% 14%, rgba(56,124,206,.6) 0%, rgba(56,124,206,0) 62%),
    radial-gradient(46% 50% at 96% 62%, rgba(31,77,147,.62) 0%, rgba(31,77,147,0) 66%),
    linear-gradient(118deg, var(--ink-950) 0%, var(--ink-900) 32%, var(--indigo-600) 72%, var(--indigo-500) 100%);
}
html[dir="ltr"] .dark{
  background:
    radial-gradient(58% 62% at 12% 14%, rgba(56,124,206,.6) 0%, rgba(56,124,206,0) 62%),
    radial-gradient(46% 50% at 4% 62%, rgba(31,77,147,.62) 0%, rgba(31,77,147,0) 66%),
    linear-gradient(242deg, var(--ink-950) 0%, var(--ink-900) 32%, var(--indigo-600) 72%, var(--indigo-500) 100%);
}
/* Faint circuit grid, the "systems" texture */
.dark::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:74px 74px;
  -webkit-mask-image:radial-gradient(80% 70% at 50% 30%, #000, transparent 78%);
  mask-image:radial-gradient(80% 70% at 50% 30%, #000, transparent 78%);
}
.dark > *{position:relative;z-index:1}

/* The diagonal that hands the dark surface off to the white page below.
   It sits inside the dark section so the white shape cuts into the gradient. */
.swoosh{position:absolute;inset-inline:0;inset-block-end:-1px;z-index:3;
  display:block;width:100%;height:clamp(44px,5.6vw,96px)}
.swoosh path{fill:var(--surface)}

/* ============================================================
   Hero
   ============================================================ */
.hero{padding-block:clamp(4.5rem,9vw,8rem) clamp(2rem,4vw,3.5rem);overflow:hidden}
body[data-hero-dark] .hero{margin-block-start:-88px;padding-block-start:calc(88px + clamp(4.5rem,9vw,8rem))}
.hero__grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(2.5rem,5vw,4.5rem);align-items:center}
.hero h1{max-width:21ch}
.hero .lede{margin-block-start:1.6rem;max-width:44ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-block-start:2.4rem}
@media (max-width:1000px){.hero__grid{grid-template-columns:1fr;gap:3rem}.hero h1{max-width:none}}

/* ============================================================
   Rotating screen carousel
   ============================================================ */
.ring{position:relative;perspective:1600px}
.ring__stage{position:relative;height:clamp(230px,27vw,380px);transform-style:preserve-3d}
.scr{
  position:absolute;top:0;left:50%;margin:0;
  width:min(84%,620px);
  transform:translateX(-50%);
  transition:transform .85s cubic-bezier(.22,.75,.28,1), opacity .85s, filter .85s;
  will-change:transform,opacity;
}
.scr__box{
  border-radius:var(--r-md);overflow:hidden;background:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.16), var(--sh-dark);
}
.scr__bar{display:flex;align-items:center;gap:5px;padding:.5rem .8rem;background:linear-gradient(180deg,#FAFCFE,#EDF2F9);border-block-end:1px solid #E3EAF4}
.scr__bar i{width:7px;height:7px;border-radius:50%;background:#D5DDEA;display:block}
.scr__bar em{margin-inline-start:auto;font-style:normal;font-size:11px;color:#98A2B8;direction:ltr}
.scr img{width:100%;height:auto;display:block}
.scr figcaption{
  margin-block-start:.9rem;text-align:center;font-size:var(--micro);
  color:var(--on-dark-soft);font-weight:500;transition:opacity .5s;
}
.scr[data-off="0"] figcaption{opacity:1}
.scr:not([data-off="0"]) figcaption{opacity:0}
.ring__dots{display:flex;justify-content:center;gap:.5rem;margin-block-start:clamp(1.2rem,2.4vw,2rem)}
.ring__dots button{
  width:30px;height:4px;border:0;border-radius:999px;padding:0;
  background:rgba(255,255,255,.22);transition:background .3s,width .3s;
}
.ring__dots button[aria-selected="true"]{background:var(--peri);width:46px}

/* ============================================================
   Four-column strip on the gradient
   ============================================================ */
.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-block-start:clamp(3rem,6vw,5.5rem)}
.strip > div{padding:clamp(1.2rem,2vw,1.8rem) clamp(1.2rem,2.2vw,2rem);border-inline-start:1px solid rgba(255,255,255,.16)}
.strip > div:first-child{border-inline-start:0;padding-inline-start:0}
.strip h3{font-size:clamp(1.1rem,1.7vw,1.4rem);margin-block-end:.6rem;color:#fff}
.strip p{font-size:var(--small);color:var(--on-dark-soft);font-weight:300;line-height:1.6}
@media (max-width:900px){
  .strip{grid-template-columns:1fr 1fr}
  .strip > div{border-inline-start:0;border-block-start:1px solid rgba(255,255,255,.16);padding-inline:0 1.2rem}
}
@media (max-width:520px){.strip{grid-template-columns:1fr}}

/* ============================================================
   Sections
   ============================================================ */
.section{padding-block:var(--section-y);position:relative}
.section--tint{background:var(--paper)}
.section__head{max-width:62ch;margin-block-end:clamp(2.2rem,4vw,3.4rem)}
.section__head .eyebrow{color:var(--indigo-500);margin-block-end:.9rem}
.section__head p{margin-block-start:1rem;color:var(--ink-soft)}
.dark .section__head .eyebrow{color:var(--peri)}

/* Split head: title on one side, text on the other */
.split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (max-width:880px){.split{grid-template-columns:1fr;gap:1.4rem}}

/* ============================================================
   System cards
   ============================================================ */
.syscards{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:clamp(1rem,1.8vw,1.4rem)}
.syscard{
  position:relative;display:flex;flex-direction:column;gap:.6rem;
  padding:clamp(1.5rem,2.4vw,2rem);text-decoration:none;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;
  transition:transform .22s cubic-bezier(.2,.7,.3,1),border-color .22s,box-shadow .22s;
}
.syscard::after{content:'';position:absolute;inset-block-start:0;inset-inline:0;height:3px;background:var(--c,var(--indigo-500))}
.syscard:hover{transform:translateY(-4px);border-color:transparent;box-shadow:var(--sh-3)}
.syscard b{font-weight:600;font-size:1.08rem}
.syscard p{font-size:var(--small);color:var(--ink-soft);font-weight:300;line-height:1.6;flex:1}
.syscard em{font-style:normal;font-size:var(--micro);color:var(--ink-faint)}
.syscard u{text-decoration:none;color:var(--indigo-500);font-size:var(--small);font-weight:500}

/* ============================================================
   Capability card — the Upvest "what it covers / what you get" split
   ============================================================ */
.cap{
  display:grid;grid-template-columns:minmax(0,.36fr) minmax(0,1fr);
  gap:clamp(1.6rem,3.4vw,3.4rem);
  padding:clamp(1.6rem,3vw,2.8rem);
  border:1px solid var(--line);border-radius:var(--r-xl);
  background:linear-gradient(158deg,#FFFFFF 0%,#F7F9FE 52%,#EFF4FC 100%);
  box-shadow:var(--sh-2);
}
.cap + .cap{margin-block-start:clamp(1rem,1.8vw,1.5rem)}
.cap__left{position:relative}
.cap__left h3{font-size:clamp(1.5rem,2.5vw,2.1rem);font-weight:600;margin-block-end:1.6rem}
.cap__left b{display:block;font-weight:600;font-size:var(--small);margin-block-end:.4rem}
.cap__left p{font-size:var(--small);color:var(--ink-soft);font-weight:300;line-height:1.62}
.cap__right{position:relative;padding-inline-start:clamp(1.4rem,2.6vw,2.6rem)}
.cap__right::before{content:'';position:absolute;inset-block:0;inset-inline-start:0;width:1px;background:var(--line)}
.cap__right > b{display:block;font-weight:600;margin-block-end:1.1rem}
.cap__right li{display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:start;padding-block:.5rem;font-size:var(--small);color:var(--ink-soft);font-weight:300;line-height:1.62}
.cap__right li i{width:9px;height:9px;background:var(--c,var(--indigo-500));border-radius:2px;display:block;margin-block-start:.55rem;flex:none}
@media (max-width:860px){
  .cap{grid-template-columns:1fr;gap:1.4rem}
  .cap__right{padding-inline-start:0;padding-block-start:1.4rem}
  .cap__right::before{inset-block:0 auto;inset-inline:0;width:auto;height:1px}
  .cap__left h3{margin-block-end:.9rem}
}

/* ============================================================
   Screen gallery on system pages
   ============================================================ */
.gallery{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:clamp(1.2rem,2.6vw,2.2rem);align-items:start}
.gallery__main{
  position:relative;border-radius:var(--r-lg);overflow:hidden;background:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.14), var(--sh-dark);
}
.gallery__main .pane{display:none}
.gallery__main .pane[data-on="true"]{display:block;animation:paneIn .5s cubic-bezier(.2,.7,.3,1)}
@keyframes paneIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.gallery__main .pane[data-on="true"]{animation:none}}
.gallery__list{display:grid;gap:.5rem}
.gthumb{
  display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:start;text-align:start;
  padding:.9rem 1rem;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);
  background:rgba(255,255,255,.04);color:var(--on-dark-soft);transition:.25s;
}
.gthumb i{width:9px;height:9px;background:var(--c,var(--cyan));transform:rotate(45deg);border-radius:2px;display:block;margin-block-start:.5rem;opacity:.5;transition:opacity .25s}
.gthumb b{display:block;font-weight:500;font-size:var(--small);color:#fff}
.gthumb span{display:block;font-size:var(--micro);line-height:1.5;font-weight:300}
.gthumb[aria-selected="true"]{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.34)}
.gthumb[aria-selected="true"] i{opacity:1}
.gthumb:hover{border-color:rgba(255,255,255,.3)}
@media (max-width:900px){
  .gallery{grid-template-columns:1fr}
  .gallery__list{grid-auto-flow:column;grid-auto-columns:minmax(190px,1fr);overflow-x:auto;scrollbar-width:none}
  .gallery__list::-webkit-scrollbar{display:none}
}


/* A screen that is a dialog, not a full page (tenders: smart agent). It sits
   on a frame with the same proportions as the other screenshots, at a scale
   that matches their text size, instead of stretching to the full width. */
.gallery__main .pane--fit[data-on="true"]{
  display:block;position:relative;aspect-ratio:1600/804;
  background:
    radial-gradient(120% 90% at 50% 40%, #F4F7FC 0%, #E3EAF5 100%);
}
.gallery__main .pane--fit img{
  position:absolute;inset:0;margin:auto;
  width:auto;max-width:86%;height:86%;object-fit:contain;
  border-radius:20px;box-shadow:0 24px 50px -22px rgba(8,25,48,.45),0 0 0 1px rgba(8,25,48,.06);
}

/* Placeholder pane until a real screen arrives */
.shot-slot{
  aspect-ratio:16/9;display:grid;place-items:center;gap:.5rem;text-align:center;padding:2rem;
  background:
    repeating-linear-gradient(45deg, rgba(56,124,206,.09) 0 12px, transparent 12px 24px),
    linear-gradient(160deg,#0F2C55,#081930);
  color:var(--on-dark-faint);
}
.shot-slot b{color:rgba(255,255,255,.82);font-weight:500;font-size:var(--small)}
.shot-slot span{font-size:var(--micro);max-width:36ch;line-height:1.55}
.shot-slot i{width:34px;height:34px;border:1.5px solid rgba(140,187,238,.42);border-radius:50%;display:grid;place-items:center;margin-block-end:.3rem}
.shot-slot i::after{content:'';width:11px;height:11px;background:var(--peri);transform:rotate(45deg);border-radius:2px}

/* ============================================================
   AI band
   ============================================================ */
.ai{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media (max-width:960px){.ai{grid-template-columns:1fr;gap:2.4rem}}
.pipeline{display:grid;gap:.7rem}
.pnode{
  display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;
  padding:1rem 1.2rem;border-radius:var(--r-md);
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);
  position:relative;overflow:hidden;
}
.pnode::after{
  content:'';position:absolute;inset-block:0;inset-inline-start:0;width:3px;
  background:var(--c,var(--cyan));opacity:.75;
}
.pnode__ico{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.1);display:grid;place-items:center;flex:none}
.pnode__ico span{width:11px;height:11px;background:var(--c,var(--cyan));transform:rotate(45deg);border-radius:2px;display:block}
.pnode b{display:block;font-weight:500;font-size:var(--small);color:#fff}
.pnode p{font-size:var(--micro);color:var(--on-dark-soft);font-weight:300;line-height:1.5}
.pnode em{
  font-style:normal;font-size:11px;font-weight:500;color:var(--ink-900);
  background:var(--cyan-soft);padding:.2rem .55rem;border-radius:999px;flex:none;
}
/* A pulse travels down the pipeline, one node at a time */
@media (prefers-reduced-motion:no-preference){
  .pnode{animation:pulse 4.8s ease-in-out infinite}
  .pnode:nth-child(2){animation-delay:.5s}
  .pnode:nth-child(3){animation-delay:1s}
  .pnode:nth-child(4){animation-delay:1.5s}
  @keyframes pulse{
    0%,68%,100%{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
    12%,22%{background:rgba(46,106,191,.28);border-color:rgba(140,187,238,.55)}
  }
}

/* ============================================================
   Clients marquee
   ============================================================ */
.marquee{position:relative;overflow:hidden;direction:ltr;padding-block:.4rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee + .marquee{margin-block-start:.7rem}
.marquee__row{display:flex;gap:.7rem;width:max-content;will-change:transform;animation:roll var(--dur,72s) linear infinite}
.marquee__row--back{animation-direction:reverse}
.marquee:hover .marquee__row{animation-play-state:paused}
@keyframes roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marquee__row{animation:none;flex-wrap:wrap;width:auto;direction:inherit}
  .marquee{-webkit-mask-image:none;mask-image:none;direction:inherit}
}
.marquee li{
  flex:none;display:grid;place-items:center;
  inline-size:clamp(146px,14vw,196px);block-size:clamp(72px,7.6vw,92px);
  padding:clamp(.85rem,1.5vw,1.25rem) clamp(1rem,1.8vw,1.5rem);
  border-radius:clamp(12px,1.3vw,17px);
  background:linear-gradient(168deg,#FEFEFF 0%,#F1F3F9 44%,#CDD2E4 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 2px rgba(0,0,0,.26),0 14px 30px -14px rgba(0,0,0,.58);
}
.marquee li img{max-block-size:clamp(36px,4.4vw,52px);max-inline-size:100%;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply}

/* ============================================================
   Partners, FAQ, contact, footer
   ============================================================ */
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(1.4rem,2.6vw,2.4rem)}
.person{border-block-start:2px solid var(--indigo-500);padding-block-start:1.1rem}
.person h3{font-size:1.16rem;margin-block-end:.7rem}
.person p{font-size:var(--small);color:var(--ink-soft);font-weight:300;line-height:1.62}

.timeline{display:grid;gap:0;max-width:760px}
.tl{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;padding-block:1.4rem;border-block-start:1px solid var(--line)}
.tl:first-child{border-block-start:0;padding-block-start:0}
.tl b{font-weight:600;color:var(--indigo-500);font-variant-numeric:tabular-nums;font-size:1.05rem}
.tl h3{font-size:1.1rem;margin-block-end:.35rem}
.tl p{font-size:var(--small);color:var(--ink-soft);font-weight:300;line-height:1.62}

.faq{max-width:840px}
.faq details{border-block-start:1px solid var(--line)}
.faq details:last-of-type{border-block-end:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding-block:1.3rem;display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;font-weight:500;font-size:1.02rem;transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--indigo-500)}
.faq summary i{width:10px;height:10px;border-right:1.8px solid var(--ink-faint);border-bottom:1.8px solid var(--ink-faint);transform:rotate(45deg) translateY(-2px);transition:transform .28s;display:block}
.faq details[open] summary i{transform:rotate(225deg) translateY(-2px)}
.faq p{padding-block-end:1.3rem;color:var(--ink-soft);font-weight:300;max-width:68ch;font-size:var(--small);line-height:1.7}

.contact{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(2rem,5vw,4rem);align-items:end}
@media (max-width:900px){.contact{grid-template-columns:1fr;align-items:start}}
.contact h2{color:#fff;max-width:17ch}
.contact p{color:var(--on-dark-soft);margin-block-start:1rem;max-width:48ch;font-weight:300}
.contact__actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-block-start:2rem}
.card-contact{
  border:1px solid rgba(255,255,255,.2);border-radius:var(--r-lg);
  padding:1.6rem 1.8rem;min-width:min(100%,300px);
  background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.04));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),var(--sh-dark);
}
.card-contact small{display:block;font-size:var(--micro);color:var(--on-dark-faint)}
.card-contact b{display:block;font-size:1.45rem;font-weight:500;margin-block:.15rem .3rem;letter-spacing:-.015em}
.card-contact a{color:#fff;text-decoration:none;direction:ltr;display:inline-block}
.card-contact a:hover{text-decoration:underline;text-underline-offset:4px}
.card-contact hr{border:0;border-block-start:1px solid rgba(255,255,255,.18);margin-block:1rem}

.foot{background:var(--ink-950);color:var(--on-dark-faint);font-size:var(--small)}
.foot__inner{padding-block:2.4rem;display:flex;flex-wrap:wrap;gap:1.2rem 2.2rem;align-items:center;border-block-start:1px solid rgba(255,255,255,.1)}
.foot svg{height:42px;width:auto;color:#fff}
.foot nav{display:flex;flex-wrap:wrap;gap:1.3rem;margin-inline-start:auto}
.foot a{text-decoration:none;transition:color .2s}
.foot a:hover{color:#fff}
.foot small{font-size:var(--micro);color:rgba(200,210,245,.36);width:100%}

/* ============================================================
   Page hero for inner pages
   ============================================================ */
.phero{padding-block:clamp(3rem,6vw,5.5rem) clamp(2rem,4vw,3.5rem);overflow:hidden}
body[data-hero-dark] .phero{margin-block-start:-88px;padding-block-start:calc(88px + clamp(3rem,6vw,5.5rem))}
.phero h1{font-size:clamp(2.1rem,4.4vw,3.6rem);max-width:16ch}
.phero .lede{margin-block-start:1.3rem;max-width:50ch}
.crumbs{display:flex;gap:.5rem;align-items:center;font-size:var(--micro);color:var(--on-dark-faint);margin-block-end:1.4rem}
.crumbs a{text-decoration:none}.crumbs a:hover{color:#fff}
.crumbs i{width:4px;height:4px;background:currentColor;transform:rotate(45deg);display:block;opacity:.7}
/* Figures run across the page, divided by hairlines */
.metrics{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  margin-block-start:clamp(2.6rem,5vw,4rem);
  border-block-start:1px solid rgba(255,255,255,.18);
}
.metrics > div{
  padding:clamp(1.4rem,2.4vw,2.1rem) clamp(1.2rem,2.4vw,2.2rem);
  border-inline-start:1px solid rgba(255,255,255,.18);
}
.metrics > div:first-child{border-inline-start:0;padding-inline-start:0}
.metrics b{
  display:block;font-size:clamp(2.4rem,4.6vw,3.9rem);font-weight:600;color:#fff;
  line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.metrics span{display:block;margin-block-start:.6rem;font-size:var(--small);color:var(--on-dark-soft);font-weight:300}
/* Some figures are words rather than numbers; they need a calmer size */
.metrics b.is-word{font-size:clamp(1.5rem,2.5vw,2.15rem);letter-spacing:-.015em;line-height:1.15}

/* Placed alongside the hero text rather than across the page: same structure,
   one size down, and vertically centred in its column. */
.metrics--aside{
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-block-start:0;align-self:center;
}
/* The system hero pairs long headlines with a compact figure block,
   so the text column takes the larger share. */
.hero__grid--aside{grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr)}
@media (max-width:1000px){.hero__grid--aside{grid-template-columns:1fr}}
.metrics--aside > div{padding:clamp(1rem,1.8vw,1.5rem) clamp(.8rem,1.4vw,1.3rem)}
.metrics--aside b{font-size:clamp(1.6rem,2.7vw,2.45rem)}
.metrics--aside b.is-word{font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.25}
.metrics--aside span{margin-block-start:.45rem;font-size:var(--micro)}
@media (max-width:1000px){
  .metrics--aside{margin-block-start:clamp(1.6rem,3vw,2.4rem)}
}
@media (max-width:560px){
  .metrics--aside{grid-template-columns:1fr}
  .metrics--aside > div{border-inline-start:0;border-block-start:1px solid rgba(255,255,255,.18);padding-inline:0}
  .metrics--aside > div:first-child{border-block-start:0}
}
@media (max-width:760px){
  .metrics{grid-template-columns:1fr}
  .metrics > div{border-inline-start:0;border-block-start:1px solid rgba(255,255,255,.18);padding-inline:0}
  .metrics > div:first-child{border-block-start:0;padding-block-start:1.2rem}
}

/* ============================================================
   Reveal
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  .rise{opacity:0;transform:translateY(16px);animation:rise .8s cubic-bezier(.2,.7,.25,1) forwards}
  @keyframes rise{to{opacity:1;transform:none}}
  .obs{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.25,1),transform .7s cubic-bezier(.2,.7,.25,1)}
  .obs.in{opacity:1;transform:none}
}
@media print{.masthead,.ring__dots{display:none}}


/* Sections carrying a swoosh need room for it. Declared last so the
   padding-block shorthands on .hero / .phero cannot override it. */
.has-swoosh{padding-block-end:clamp(6rem,10vw,10rem)}


/* The company blue is a mid tone, so on a dark surface it sinks into the
   background. There the primary action inverts to white. */
.dark .btn--primary,
.dark .elementor-widget-button.m-btn--primary .elementor-button{
  background:#fff;color:var(--ink-900);
  box-shadow:0 10px 26px -12px rgba(0,0,0,.65);
}
.dark .btn--primary:hover,
.dark .elementor-widget-button.m-btn--primary .elementor-button:hover{
  background:#fff;color:var(--indigo-500);
  transform:translateY(-2px);box-shadow:0 16px 34px -14px rgba(0,0,0,.75);
}

/* ============================================================
   Clients list
   ============================================================ */
.namelist{display:flex;flex-wrap:wrap;gap:.5rem .55rem;max-width:1040px}
.namelist li{
  border:1px solid var(--line);background:var(--surface);border-radius:999px;
  padding:.42rem 1rem;font-size:var(--small);color:var(--ink-soft);
}

/* ============================================================
   Contact page
   ============================================================ */
.contactgrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (max-width:880px){.contactgrid{grid-template-columns:1fr;gap:2.4rem}}
.detail{padding-block:1.2rem;border-block-start:1px solid var(--line)}
.detail:first-of-type{margin-block-start:2rem}
.detail b{display:block;font-size:var(--micro);color:var(--ink-faint);font-weight:500;margin-block-end:.3rem}
.detail a,.detail > span{font-size:1.25rem;font-weight:500;color:var(--ink);text-decoration:none}
.detail a:hover{color:var(--indigo-500)}
.detail small{display:block;font-size:var(--micro);color:var(--ink-faint);margin-block-start:.2rem}

.cform{
  display:grid;gap:1rem;padding:clamp(1.6rem,3vw,2.4rem);
  border:1px solid var(--line);border-radius:var(--r-xl);
  background:linear-gradient(158deg,#FFFFFF 0%,#F7F9FE 52%,#EFF4FC 100%);
  box-shadow:var(--sh-2);
}
.cform__note{font-size:var(--small);color:var(--ink-soft);font-weight:300;margin-block-end:.4rem}
.cform label{display:grid;gap:.4rem}
.cform label > span{font-size:var(--micro);font-weight:500;color:var(--ink-soft)}
.cform input,.cform textarea{
  font:inherit;font-size:var(--small);color:var(--ink);
  padding:.75rem .95rem;border:1px solid var(--line);border-radius:var(--r-md);
  background:#fff;transition:border-color .2s,box-shadow .2s;
}
.cform input:focus,.cform textarea:focus{
  outline:0;border-color:var(--indigo-500);box-shadow:0 0 0 3px rgba(31,77,147,.14);
}
.cform textarea{resize:vertical;min-height:110px}
.cform button{justify-self:start;margin-block-start:.4rem}

/* ============================================================
   Policy documents
   ============================================================ */
.doc{max-width:760px}
.doc__warn{
  padding:1rem 1.2rem;border-radius:var(--r-md);margin-block-end:2.4rem;
  background:#FFF7E6;border:1px solid #F3DCA6;color:#6B4E10;
  font-size:var(--small);font-weight:400;line-height:1.6;
}
.doc__block + .doc__block{margin-block-start:2.2rem}
.doc__block h2{font-size:clamp(1.2rem,1.9vw,1.5rem);margin-block-end:.7rem}
.doc__block p{color:var(--ink-soft);font-weight:300;line-height:1.75;font-size:var(--small)}

/* ============================================================
   INTERACTIVE LAYER
   ============================================================ */

/* --- Scroll progress, thin line under the header ------------------------- */
.progress{position:absolute;inset-block-end:0;inset-inline-start:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--cyan),var(--peri));transition:width .08s linear;opacity:0}
.masthead.is-stuck .progress{opacity:1}

/* --- Pipeline nodes open on click ---------------------------------------- */
.pnode{
  width:100%;text-align:start;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);cursor:pointer;
}
.pnode:hover{border-color:rgba(255,255,255,.3)}
.pnode[aria-expanded="true"]{background:rgba(46,106,191,.28);border-color:rgba(140,187,238,.55)}
.pnode__more{
  grid-column:1 / -1;display:none;
  margin-block-start:.7rem;padding-block-start:.8rem;
  border-block-start:1px solid rgba(255,255,255,.16);
  font-size:var(--small);color:var(--on-dark-soft);font-weight:300;line-height:1.65;
}
.pnode[aria-expanded="true"] .pnode__more{display:block}
@media (prefers-reduced-motion:no-preference){
  .pnode[aria-expanded="true"] .pnode__more{animation:slideDown .35s cubic-bezier(.2,.7,.3,1)}
  @keyframes slideDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  .pnode{animation:none}          /* the pulse is replaced by real selection */
}

/* --- Savings estimator ---------------------------------------------------- */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,4vw,3.5rem);align-items:start}
@media (max-width:900px){.calc{grid-template-columns:1fr;gap:2rem}}
.calc__controls{display:grid;gap:1.6rem}
.field label{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-block-end:.6rem}
.field span{font-size:var(--small);font-weight:400;color:var(--on-dark-soft)}
.field output{font-size:1.15rem;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.field input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:999px;
  background:rgba(255,255,255,.18);outline-offset:6px;
}
.field input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:#fff;border:0;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.5);
}
.field input[type=range]::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;background:#fff;border:0;cursor:pointer;
}
.calc__out{
  border:1px solid rgba(255,255,255,.2);border-radius:var(--r-xl);
  padding:clamp(1.6rem,3vw,2.4rem);
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),var(--sh-dark);
}
.calc__big{font-size:clamp(2.6rem,5.5vw,4.2rem);font-weight:600;line-height:1;color:#fff;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.calc__unit{font-size:var(--small);color:var(--on-dark-soft);margin-block-start:.5rem}
.calc__row{display:flex;gap:clamp(1.2rem,3vw,2.4rem);margin-block-start:1.6rem;padding-block-start:1.4rem;border-block-start:1px solid rgba(255,255,255,.18)}
.calc__row b{display:block;font-size:1.5rem;font-weight:600;color:#fff;line-height:1.1;font-variant-numeric:tabular-nums}
.calc__row span{font-size:var(--micro);color:var(--on-dark-faint)}
.calc__note{margin-block-start:1.4rem;font-size:var(--micro);color:var(--on-dark-faint);line-height:1.6}

/* --- Maagarim module cluster --------------------------------------------- */
.cluster{display:grid;place-items:center;padding-block:1rem}
.cluster svg{height:auto;overflow:visible}
.cluster g{cursor:pointer;transition:transform .3s cubic-bezier(.2,.7,.3,1),opacity .3s}
.cluster g:hover{transform:scale(1.07)}
.cluster g:focus-visible{outline:none}
.cluster g:focus-visible rect{stroke:#fff;stroke-width:3}
.cluster figcaption{margin-block-start:1.2rem;text-align:center;font-size:var(--micro);color:var(--on-dark-faint)}
.cap.is-lit{border-color:var(--c,var(--indigo-500));box-shadow:0 0 0 3px color-mix(in srgb, var(--c, #1F4D93) 22%, transparent), var(--sh-3)}
@media (prefers-reduced-motion:no-preference){.cap{transition:box-shadow .5s,border-color .5s}}


/* --- Maagarim cluster: larger, floating, clearly clickable -------------- */
/* Bigger on desktop, paid for out of the empty space around it, so the
   blue hero keeps exactly the same height as before. */
@media (min-width:900px){
  .cluster[data-jump]{padding-block:0;margin-block-start:-2rem}
  .cluster[data-jump] figcaption{margin-block-start:.8rem}
  .cluster[data-jump] svg{width:min(100%,590px)}
  .phero.has-swoosh.phero--cluster{padding-block-end:calc(clamp(6rem,10vw,10rem) - 50px)}
}
.cluster g[data-cap]{transform-box:fill-box;transform-origin:center;
  transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.cluster .fl,.cluster .core-d{transform-box:fill-box;transform-origin:center}
.cluster .fl{filter:drop-shadow(0 14px 16px rgba(2,8,26,.5));transition:filter .35s}
.cluster .fl rect{stroke:rgba(255,255,255,.38);stroke-width:1.5}
.cluster .core-d{filter:drop-shadow(0 18px 24px rgba(2,8,26,.55))}
.cluster g[data-cap]:hover{transform:scale(1.09)}
.cluster g[data-cap]:hover .fl{filter:drop-shadow(0 26px 26px rgba(2,8,26,.6)) brightness(1.07)}
.cluster g[data-cap]:hover .fl rect{stroke:rgba(255,255,255,.8);stroke-width:2.5}
@media (prefers-reduced-motion:no-preference){
  .cluster .fl{animation:clFloat 4.8s ease-in-out infinite}
  .cluster g[data-cap]:nth-of-type(2) .fl{animation-delay:-1.2s}
  .cluster g[data-cap]:nth-of-type(3) .fl{animation-delay:-2.4s}
  .cluster g[data-cap]:nth-of-type(4) .fl{animation-delay:-3.6s}
  .cluster g[data-cap]:hover .fl{animation-play-state:paused}
}
@keyframes clFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
/* Module cluster labels */
.cluster svg{width:min(96%,470px)}
.dlabel{
  font-family:'Rubik',system-ui,sans-serif;font-size:21px;font-weight:600;
  fill:#0F2340;pointer-events:none;letter-spacing:-.01em;
}
.dlabel--core{fill:#fff;font-size:24px}

/* ============================================================
   SERVICES MEGA PANEL
   ============================================================ */
.has-mega{position:relative}
.navtrig{
  display:inline-flex;align-items:center;gap:.4rem;
  background:none;border:0;padding:.35rem 0;font:inherit;font-size:var(--small);
  color:var(--ink-soft);position:relative;transition:color .2s;
}
.navtrig::after{content:'';position:absolute;inset-inline-start:0;bottom:0;height:1.5px;width:0;background:var(--indigo-500);transition:width .28s}
.navtrig:hover{color:var(--ink)}
.navtrig:hover::after,.navtrig[aria-expanded="true"]::after{width:100%}
.navtrig[aria-current="page"]{color:var(--indigo-500)}
.navtrig[aria-current="page"]::after{width:100%}
.navtrig svg{width:10px;height:10px;transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.navtrig[aria-expanded="true"] svg{transform:rotate(180deg)}
body[data-hero-dark] .masthead:not(.is-stuck) .navtrig{color:var(--on-dark-soft)}
body[data-hero-dark] .masthead:not(.is-stuck) .navtrig:hover,
body[data-hero-dark] .masthead:not(.is-stuck) .navtrig[aria-expanded="true"]{color:#fff}
body[data-hero-dark] .masthead:not(.is-stuck) .navtrig::after{background:var(--peri)}

.mega{
  position:absolute;inset-block-start:calc(100% + 20px);
  left:50%;                                   /* physical: inset-inline flips in RTL */
  inline-size:max-content;max-inline-size:min(92vw,740px);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  padding:1.1rem;box-shadow:0 30px 70px -30px rgba(10,16,48,.5),0 4px 12px -6px rgba(10,16,48,.2);
  opacity:0;visibility:hidden;transform:translateX(-50%) translateY(-8px);
  transition:opacity .22s,transform .22s,visibility .22s;z-index:90;
}
.mega[data-open="true"]{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega__grid{display:grid;grid-template-columns:repeat(2,minmax(0,330px));gap:.3rem}
.mega__grid a{
  display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:start;
  padding:.95rem 1rem;border-radius:var(--r-md);text-decoration:none;transition:background .18s;
}
.mega__grid a:hover{background:var(--paper)}
.mega__grid i{width:11px;height:11px;background:var(--c);transform:rotate(45deg);border-radius:2px;display:block;margin-block-start:.5rem;flex:none}
.mega__grid b{display:block;font-weight:600;font-size:.98rem;color:var(--ink);line-height:1.4}
.mega__grid span span{display:block;font-size:var(--micro);color:var(--ink-faint);font-weight:300;line-height:1.5;margin-block-start:.15rem}
.mega__foot{
  margin-block-start:.5rem;padding:.9rem 1rem 0;border-block-start:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;font-size:var(--micro);font-weight:500;
}
.mega__foot a{color:var(--indigo-500);text-decoration:none}
.mega__foot a:hover{text-decoration:underline;text-underline-offset:3px}

@media (max-width:900px){
  .has-mega{width:100%}
  .navtrig{width:100%;justify-content:space-between;padding-block:.9rem;
    border-block-end:1px solid var(--line-soft);font-size:1.05rem;color:var(--ink-soft) !important}
  .mega{position:static;left:auto;opacity:1;visibility:visible;transform:none;display:none;
    border:0;border-radius:0;box-shadow:none;padding:.3rem 0 .8rem;
    inline-size:auto;max-inline-size:100%}
  .mega[data-open="true"]{display:block;transform:none}
  .mega__grid{grid-template-columns:minmax(0,1fr)}
  .mega__grid a{padding-inline:.3rem}
}



/* ============================================================
   CLIENTS BAND ON WHITE
   The logo tiles were built to lift off a dark ground; on white they
   need a hairline and a far softer shadow instead of a glow.
   ============================================================ */
.clients-band{background:var(--surface)}
.clients-band h2{color:var(--indigo-500)}
.clients-band .eyebrow{color:var(--indigo-500)}
.clients-band .lede,.clients-band p{color:var(--ink-soft)}
.clients-band .marquee li{
  /* the tile dissolves into the page: the white around each mark becomes
     its matting, so the logos read as a row and not as a row of boxes */
  background:#fff;border:1px solid #fff;box-shadow:none;
}
.clients-band .marquee li img{mix-blend-mode:normal}
.clients-band .marquee{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}


/* ============================================================
   HERO VIDEO
   Drone footage runs underneath, and the brand gradient is laid back
   over it as a scrim. The palette stays intact; the city shows through.

   In use: the high, quiet aerial. A second clip sits beside it as
   assets/video/hero-alt-street.mp4 — a busier street-level shot that ends
   on the sea. To compare, swap the <source src> in the hero markup and
   regenerate the poster from the matching clip.
   ============================================================ */
.has-video{background-color:var(--ink-950)}
.herovid{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;object-position:50% 58%;
  pointer-events:none;
}
.heroscrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(58% 62% at 88% 14%, rgba(56,124,206,.55) 0%, rgba(56,124,206,0) 62%),
    radial-gradient(46% 50% at 96% 62%, rgba(31,77,147,.6) 0%, rgba(31,77,147,0) 66%),
    linear-gradient(118deg,
      rgba(5,13,28,.9) 0%, rgba(8,25,48,.82) 30%,
      rgba(23,62,121,.7) 68%, rgba(31,77,147,.62) 100%);
}
html[dir="ltr"] .heroscrim{
  background:
    radial-gradient(58% 62% at 12% 14%, rgba(56,124,206,.55) 0%, rgba(56,124,206,0) 62%),
    radial-gradient(46% 50% at 4% 62%, rgba(31,77,147,.6) 0%, rgba(31,77,147,0) 66%),
    linear-gradient(242deg,
      rgba(5,13,28,.9) 0%, rgba(8,25,48,.82) 30%,
      rgba(23,62,121,.7) 68%, rgba(31,77,147,.62) 100%);
}
/* the faint grid and the content both belong above the footage */
.has-video::before{z-index:2}
.has-video > *:not(.herovid):not(.heroscrim):not(.swoosh):not(.energyflow){position:relative;z-index:3}
.has-video .swoosh{z-index:4}

@media (prefers-reduced-motion:reduce){
  .herovid{display:none}
  .has-video{background-image:url("/wp-content/uploads/marom/img/i40.webp");background-size:cover;background-position:50% 58%}
}

/* A trailing "+" is a neutral character: in RTL the bidi algorithm moves it
   to the left of the digits. The figure runs LTR, the cell still aligns right. */
html[dir="rtl"] .metrics b{direction:ltr;text-align:right}
html[dir="ltr"] .metrics b{direction:ltr;text-align:left}


/* ============================================================
   STORY BLOCK
   Replaces the timeline: prose, then the figures that back it.
   ============================================================ */
.story{max-width:660px}
.story p{color:var(--ink-soft);font-weight:300;line-height:1.75;font-size:var(--small)}
.story p + p{margin-block-start:1.1rem}
.story__lead{font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.62;color:var(--ink) !important;font-weight:400}
.facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  margin-block-start:clamp(2rem,3.4vw,2.8rem);
  border-block-start:1px solid var(--line);
}
.facts > div{padding:clamp(1.1rem,2vw,1.5rem) clamp(1rem,1.8vw,1.4rem);border-inline-start:1px solid var(--line)}
.facts > div:first-child{border-inline-start:0;padding-inline-start:0}
.facts b{
  display:block;font-size:clamp(1.6rem,2.7vw,2.3rem);font-weight:600;color:var(--indigo-500);
  line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
html[dir="rtl"] .facts b{direction:ltr;text-align:right}
html[dir="ltr"] .facts b{direction:ltr;text-align:left}
.facts span{display:block;margin-block-start:.5rem;font-size:var(--micro);color:var(--ink-faint);line-height:1.5}
@media (max-width:560px){
  .facts{grid-template-columns:1fr}
  .facts > div{border-inline-start:0;border-block-start:1px solid var(--line);padding-inline:0}
  .facts > div:first-child{border-block-start:0}
}


/* About hero: office photograph behind the headline. A deep navy wash
   from the text side keeps the copy readable; the far side stays lively. */
.phero--photo{isolation:isolate}
.phero--photo::before{display:none}
.aboutbg{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--ink-950)}
.aboutbg img{width:100%;height:100%;object-fit:cover;object-position:35% 50%;display:block;
  animation:fadeIn 1.2s ease both}
.aboutbg img{filter:saturate(.55) contrast(1.05)}
/* The wash is the site's own .dark gradient (navy into company blue, with
   the blue glow at the top), made partly transparent so the photo reads
   through it. Same colours as every other hero, never a black veil. */
.aboutbg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(58% 62% at 88% 14%, rgba(56,124,206,.5) 0%, rgba(56,124,206,0) 62%),
    radial-gradient(46% 50% at 96% 62%, rgba(31,77,147,.5) 0%, rgba(31,77,147,0) 66%),
    linear-gradient(118deg, rgba(8,25,48,.72) 0%, rgba(13,42,80,.74) 35%, rgba(23,62,121,.9) 66%, rgba(31,77,147,.94) 100%);
}
html[dir="ltr"] .aboutbg::after{
  background:
    radial-gradient(58% 62% at 12% 14%, rgba(56,124,206,.5) 0%, rgba(56,124,206,0) 62%),
    radial-gradient(46% 50% at 4% 62%, rgba(31,77,147,.5) 0%, rgba(31,77,147,0) 66%),
    linear-gradient(242deg, rgba(8,25,48,.72) 0%, rgba(13,42,80,.74) 35%, rgba(23,62,121,.9) 66%, rgba(31,77,147,.94) 100%);
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@media (max-width:760px){
  .aboutbg img{object-position:30% 50%}
  .aboutbg::after{background:
    radial-gradient(58% 62% at 88% 14%, rgba(56,124,206,.5) 0%, rgba(56,124,206,0) 62%),
    linear-gradient(118deg, rgba(8,25,48,.9) 0%, rgba(13,42,80,.88) 35%, rgba(23,62,121,.9) 68%, rgba(31,77,147,.92) 100%)}
  html[dir="ltr"] .aboutbg::after{background:
    radial-gradient(58% 62% at 12% 14%, rgba(56,124,206,.5) 0%, rgba(56,124,206,0) 62%),
    linear-gradient(242deg, rgba(8,25,48,.9) 0%, rgba(13,42,80,.88) 35%, rgba(23,62,121,.9) 68%, rgba(31,77,147,.92) 100%)}
}

/* ============================================================
   ABOUT HERO FIELD
   A vector piece rather than a photograph: nodes in the company diamond,
   linked into a web, with signals running inward to one core. Drawn in
   the brand palette so it belongs to the page instead of sitting on it.
   ============================================================ */
.aboutfig{
  position:absolute;z-index:0;margin:0;
  inset-inline-end:-6%;
  inset-block-start:50%;transform:translateY(-50%);
  inline-size:min(46vw,620px);
  animation:fadeUp .9s cubic-bezier(.2,.7,.25,1) .2s both;
}
.aifield{display:block;width:100%;height:auto;overflow:visible}

.aifield .web line{stroke:rgba(140,187,238,.16);stroke-width:1}
.aifield .nd rect{fill:var(--peri);opacity:.55}
.aifield .core rect{fill:#fff;filter:drop-shadow(0 0 14px rgba(140,187,238,.9))}
.aifield .core__ring{fill:none;stroke:var(--cyan-soft);stroke-width:1.2;opacity:0}
.aifield .sig{
  stroke:#fff;stroke-width:2;stroke-linecap:round;
  stroke-dasharray:9 100;stroke-dashoffset:109;opacity:0;
  filter:drop-shadow(0 0 5px rgba(255,255,255,.8)) drop-shadow(0 0 12px rgba(56,184,242,.8));
}

@media (prefers-reduced-motion:no-preference){
  /* each node breathes on its own clock, so the field never pulses as a block */
  .aifield .nd{animation:ndBreathe 4.2s ease-in-out var(--d,0s) infinite}
  @keyframes ndBreathe{0%,100%{opacity:.4}50%{opacity:1}}

  /* signals run from the outer nodes in toward the core */
  .aifield .sig{animation:sigRun var(--t,3.2s) cubic-bezier(.4,0,.5,1) var(--d,0s) infinite}
  @keyframes sigRun{
    0%{stroke-dashoffset:109;opacity:0}
    12%{opacity:.95}
    78%{opacity:.95}
    100%{stroke-dashoffset:0;opacity:0}
  }

  .aifield .core{transform-box:fill-box;transform-origin:center;
    animation:corePulse 3.4s ease-in-out infinite}
  @keyframes corePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
  .aifield .core__ring{transform-box:fill-box;transform-origin:center;
    animation:coreRing 3.4s cubic-bezier(.1,.6,.3,1) infinite}
  .aifield .core__ring--2{animation-delay:1.7s}
  @keyframes coreRing{
    0%{opacity:.7;transform:scale(.45)}
    100%{opacity:0;transform:scale(1.6)}
  }
}
@media (prefers-reduced-motion:reduce){.aifield .nd rect{opacity:.7}}


/* ============================================================
   CLIENT LIST BAND
   The map sits beside the names. Its original pins were painted out of
   the artwork; the ones you see are drawn as the company diamond, and
   they arrive one after another, north to south.
   ============================================================ */
.list-band{position:relative}
.listgrid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.mapfig{position:relative;margin:0;justify-self:center;inline-size:min(34vw,340px)}
.mapfig img{display:block;width:100%;height:auto}
.mapfig__pins{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

.pin{opacity:0}
.pin__dot{fill:var(--c);filter:drop-shadow(0 2px 3px rgba(12,32,70,.3))}
.pin__halo{fill:none;stroke:var(--c);stroke-width:2.4;opacity:0;transform-box:fill-box;transform-origin:center}

/* keep the names clear of the map; English pills are longer */
@media (min-width:901px){
  .list-band .namelist,.list-band .section__head{max-width:min(100%,690px)}
}

@media (prefers-reduced-motion:no-preference){
  .mapfig.in .pin{animation:pinIn .5s cubic-bezier(.2,1.5,.4,1) var(--d) forwards}
  @keyframes pinIn{
    0%{opacity:0;transform:scale(.1)}
    62%{opacity:1;transform:scale(1.28)}
    100%{opacity:1;transform:scale(1)}
  }
  .mapfig.in .pin__halo{animation:pinHalo 1.5s ease-out var(--d) 2}
  @keyframes pinHalo{
    0%{opacity:.6;transform:scale(.5)}
    100%{opacity:0;transform:scale(2.3)}
  }
}
@media (prefers-reduced-motion:reduce){.pin{opacity:1}}

@media (max-width:900px){
  .listgrid{grid-template-columns:1fr}
  .mapfig{inline-size:min(58%,250px);margin-block-start:2.5rem;justify-self:center}
}


/* ============================================================
   ENERGY FLOW
   Light travelling down the energy hero along right-angled routes, the
   way current runs on a board. The viewBox is stretched to the section
   (preserveAspectRatio:none), which keeps the turns square because
   scaling each axis on its own leaves axis-aligned lines alone;
   non-scaling-stroke then keeps the line an even width.
   ============================================================ */
.has-flow{position:relative;overflow:hidden}
.has-flow > .wrap{position:relative;z-index:2}
.has-flow .swoosh{z-index:3}
.energyflow{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none;overflow:visible}
.flow__trace{
  fill:none;stroke:rgba(190,220,255,.045);stroke-width:1;
  stroke-linejoin:miter;
}
.flow__spark{
  fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:miter;
  stroke-dasharray:74 1400;stroke-dashoffset:1474;opacity:0;
  filter:drop-shadow(0 0 5px rgba(255,255,255,.55)) drop-shadow(0 0 16px rgba(140,187,238,.55));
}
@media (prefers-reduced-motion:no-preference){
  .flow__spark{animation:flowTravel var(--dur,7s) linear var(--delay,0s) infinite}
  @keyframes flowTravel{
    0%{stroke-dashoffset:1474;opacity:0}
    8%{opacity:.62}
    88%{opacity:.62}
    100%{stroke-dashoffset:-74;opacity:0}
  }
}


/* The diagonal takes the colour of whatever section follows it. */
.swoosh--tint path{fill:var(--paper)}

/* ============================================================
   FOUR-STAGE PROCESS
   The rail fills from the first diamond to the last, and each stage is
   written as the light reaches it. One clock drives both: the rail runs
   2.94s from 0.5s, and stage i lands at 0.5s + (i-1) x 0.98s, which is
   exactly a third of the rail apart. Change one and change the other.
   ============================================================ */
.flow4{
  list-style:none;padding:0;position:relative;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1rem,2.4vw,2rem);
  /* the rail starts an eighth in from each end, so the block is pushed
     outward to bring the first and last diamond near the content edges */
  margin:clamp(2.4rem,5vw,3.6rem) clamp(-7.5rem,-8vw,0rem) 0;
}
/* the unlit rail, and over it the lit one that grows */
.flow4::before,.flow4::after{
  content:'';position:absolute;z-index:0;
  inset-inline:12.5%;inset-block-start:23px;height:1px;
}
.flow4::before{background:rgba(140,187,238,.16)}
.flow4::after{
  background:linear-gradient(90deg, rgba(140,187,238,.9), rgba(56,184,242,.9));
  box-shadow:0 0 10px rgba(140,187,238,.5);
  transform:scaleX(0);transform-origin:right center;
}
html[dir="ltr"] .flow4::after{transform-origin:left center}

.step{position:relative;z-index:1;text-align:center}
.step__mark{
  position:relative;display:grid;place-items:center;
  inline-size:46px;block-size:46px;margin-inline:auto;
}
.step__mark i{
  position:absolute;inset:0;transform:rotate(45deg);border-radius:5px;
  border:1.5px solid var(--peri);background:var(--ink-900);
  box-shadow:0 0 0 6px rgba(10,25,48,.9);
}
.step__mark b{position:relative;font-size:1.05rem;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.step h3{
  margin-block-start:1.1rem;font-size:clamp(.98rem,1.4vw,1.1rem);
  font-weight:600;color:#fff;line-height:1.35;
}
.step p{
  margin-block-start:.5rem;font-size:var(--micro);line-height:1.65;
  color:var(--on-dark-soft);font-weight:300;
}

@media (prefers-reduced-motion:no-preference){
  .flow4.in::after{animation:railFill 2.94s cubic-bezier(.4,0,.25,1) .5s forwards}
  @keyframes railFill{to{transform:scaleX(1)}}

  .flow4 .step__mark,.flow4 .step h3,.flow4 .step p{opacity:0}
  .flow4.in .step__mark{
    animation:markLand .8s cubic-bezier(.2,1.1,.3,1) calc(.5s + (var(--i) - 1) * .98s) forwards;
  }
  @keyframes markLand{
    0%{opacity:0;transform:scale(.55)}
    55%{opacity:1;transform:scale(1.12)}
    100%{opacity:1;transform:scale(1)}
  }
  .flow4.in .step__mark i{
    animation:markGlow 1.3s ease-out calc(.5s + (var(--i) - 1) * .98s) forwards;
  }
  @keyframes markGlow{
    0%{border-color:rgba(140,187,238,.25);box-shadow:0 0 0 6px rgba(10,25,48,.9)}
    30%{border-color:#fff;box-shadow:0 0 0 6px rgba(10,25,48,.9), 0 0 22px rgba(140,187,238,.7)}
    100%{border-color:var(--peri);box-shadow:0 0 0 6px rgba(10,25,48,.9)}
  }
  /* the words are written just behind the mark */
  .flow4.in .step h3{
    animation:stepWrite .9s cubic-bezier(.2,.7,.25,1) calc(.74s + (var(--i) - 1) * .98s) forwards;
  }
  .flow4.in .step p{
    animation:stepWrite 1s cubic-bezier(.2,.7,.25,1) calc(.9s + (var(--i) - 1) * .98s) forwards;
  }
  @keyframes stepWrite{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){
  .flow4::after{transform:scaleX(1)}
}

@media (max-width:760px){
  .flow4{grid-template-columns:1fr;gap:1.8rem;text-align:start;margin-inline:0}
  .flow4::before,.flow4::after{
    inset-inline:auto;inset-inline-start:22px;
    inset-block:24px 24px;height:auto;width:1px;
  }
  .flow4::after{
    background:linear-gradient(180deg, rgba(140,187,238,.9), rgba(56,184,242,.9));
    transform:scaleY(0);transform-origin:center top;
  }
  @media (prefers-reduced-motion:no-preference){
    .flow4.in::after{animation:railFillY 2.94s cubic-bezier(.4,0,.25,1) .5s forwards}
    @keyframes railFillY{to{transform:scaleY(1)}}
  }
  .step{display:grid;grid-template-columns:46px 1fr;gap:0 1rem;text-align:start}
  .step__mark{margin-inline:0;grid-row:1 / span 2}
  .step h3{margin-block-start:.35rem}
}

/* ============================================================
   CONTACT BAND
   The page closes on the bright blue. A single linear sweep, no radial
   pools — those read as clouds drifting over the band rather than as
   one surface. The bright blue holds most of the width; it only deepens
   on the text side, and the body copy there is raised to near-white so
   it still clears AA.
   The multi-page build marks this section by id, the single-file build
   by class, so both selectors are needed.
   ============================================================ */
:root{--blue-bright:#3D6BE7}
#contact.dark,
.cta-band{
  background-image:linear-gradient(115deg,
    var(--blue-bright) 0%, var(--blue-bright) 40%, #3762D6 62%, #2A4CA8 84%, #1B3A7A 100%);
}
html[dir="ltr"] #contact.dark,
html[dir="ltr"] .cta-band{
  background-image:linear-gradient(245deg,
    var(--blue-bright) 0%, var(--blue-bright) 40%, #3762D6 62%, #2A4CA8 84%, #1B3A7A 100%);
}
/* the grid texture is what gives the band its surface; keep it faint here */
#contact.dark::before,
.cta-band::before{opacity:.5}
/* on the brighter ground the body copy is raised to near-white */
#contact.dark .lede,#contact.dark p,
.cta-band .lede,.cta-band p{color:rgba(255,255,255,.93)}
/* the ghost button needs a firmer edge against the brighter ground */
#contact.dark .btn--ghost-dark,
.cta-band .btn--ghost-dark,
#contact.dark .elementor-widget-button.m-btn--ghost-dark .elementor-button,
.cta-band .elementor-widget-button.m-btn--ghost-dark .elementor-button{border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.13)}
#contact.dark .btn--ghost-dark:hover,
.cta-band .btn--ghost-dark:hover,
#contact.dark .elementor-widget-button.m-btn--ghost-dark .elementor-button:hover,
.cta-band .elementor-widget-button.m-btn--ghost-dark .elementor-button:hover{border-color:rgba(255,255,255,.64);background:rgba(255,255,255,.21)}

/* ============================================================
   CONTACT BAND: one flat colour (#486ADF)
   Every closing contact section is a single solid surface: no gradient,
   no grid texture, and the card sits on the same colour with only a
   hairline edge. White on #486ADF measures 4.8:1 (AA).
   ============================================================ */
:root{--contact-blue:#486ADF}
section[id^="contact--"].dark,
html[dir="ltr"] section[id^="contact--"].dark,
#contact.dark,html[dir="ltr"] #contact.dark,
.cta-band,html[dir="ltr"] .cta-band{
  background:var(--contact-blue) !important;
  background-image:none !important;
}
section[id^="contact--"].dark::before,
#contact.dark::before,.cta-band::before{display:none}
section[id^="contact--"] .eyebrow{color:rgba(255,255,255,.88) !important}
section[id^="contact--"] .lede,
section[id^="contact--"] .contact p{color:rgba(255,255,255,.93)}
section[id^="contact--"] .card-contact{
  background:transparent;box-shadow:none;
  border-color:rgba(255,255,255,.4);
}
section[id^="contact--"] .card-contact small{color:rgba(255,255,255,.8)}
section[id^="contact--"] .card-contact hr{border-block-start-color:rgba(255,255,255,.3)}
section[id^="contact--"] .btn--ghost-dark,
section[id^="contact--"] .elementor-widget-button.m-btn--ghost-dark .elementor-button{border-color:rgba(255,255,255,.55);background:transparent}
section[id^="contact--"] .btn--ghost-dark:hover,
section[id^="contact--"] .elementor-widget-button.m-btn--ghost-dark .elementor-button:hover{border-color:#fff;background:rgba(255,255,255,.12)}

/* The header call to action carries the same bright blue as the closing
   band, so the first and the last thing on the page rhyme.
   White on #3D6BE7 measures 4.7:1, which clears AA for this text size. */
.masthead .btn--primary,
.masthead .elementor-widget-button.m-btn--primary .elementor-button{
  background:var(--blue-bright);
  box-shadow:0 8px 22px -10px rgba(61,107,231,.85);
}
.masthead .btn--primary:hover,
.masthead .elementor-widget-button.m-btn--primary .elementor-button:hover{
  background:#3360DC;
  box-shadow:0 14px 30px -12px rgba(61,107,231,.95);
}


/* ============================================================
   ENERGY HERO VIDEO
   Footage of a city with its consumption and production called out,
   under the same brand scrim as the home hero.
   This section also holds the screen gallery, so it is far taller than
   the words; the footage is capped to the top of it and faded out below,
   otherwise object-fit:cover would blow it up to fill the whole height.
   ============================================================ */
.has-flow.has-video .herovid,
.has-flow.has-video .heroscrim{
  block-size:min(96%,860px);inset-block-end:auto;
  -webkit-mask-image:linear-gradient(180deg, #000 62%, rgba(0,0,0,.45) 84%, transparent 100%);
  mask-image:linear-gradient(180deg, #000 62%, rgba(0,0,0,.45) 84%, transparent 100%);
}
.has-flow.has-video .herovid{z-index:0;object-position:50% 46%}
/* the footage carries its own labels, so it is held further back than on
   the home hero — otherwise it argues with the heading */
.has-flow.has-video .heroscrim{
  z-index:1;
  background:
    radial-gradient(58% 62% at 88% 14%, rgba(56,124,206,.5) 0%, rgba(56,124,206,0) 62%),
    linear-gradient(118deg,
      rgba(5,13,28,.96) 0%, rgba(8,25,48,.93) 30%,
      rgba(23,62,121,.9) 68%, rgba(31,77,147,.86) 100%);
}
html[dir="ltr"] .has-flow.has-video .heroscrim{
  background:
    radial-gradient(58% 62% at 12% 14%, rgba(56,124,206,.5) 0%, rgba(56,124,206,0) 62%),
    linear-gradient(242deg,
      rgba(5,13,28,.96) 0%, rgba(8,25,48,.93) 30%,
      rgba(23,62,121,.9) 68%, rgba(31,77,147,.86) 100%);
}
/* the drawn routes step back too, now that the footage does the talking */
.has-flow.has-video .energyflow{z-index:2;opacity:.45}
.has-flow.has-video > .wrap{position:relative;z-index:3}
.has-flow.has-video .swoosh{z-index:4}
@media (prefers-reduced-motion:reduce){
  .has-flow.has-video{background-image:url("/wp-content/uploads/marom/img/i39.webp");background-size:cover;background-position:50% 46%}
}


/* A headline that is a full sentence rather than a phrase. At the display
   size it would run eight lines in Hebrew and thirteen in English, so it
   is set smaller and given a wider measure. */
.hero h1.h1--statement{
  font-size:clamp(1.55rem,2.5vw,2.25rem);
  line-height:1.35;
  letter-spacing:-.01em;
  max-width:28ch;
}

/* ============================================================
   FEATURE ROWS
   Each capability shown beside the screen that delivers it, instead of
   a list of capabilities and a separate gallery the reader has to match
   up. Rows alternate sides so the page does not march in one direction.
   ============================================================ */
.feat{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1.6rem,4vw,3.4rem);align-items:center;
  margin-block-start:clamp(3rem,6vw,5rem);
}
.feat--flip .feat__shot{order:2}
.feat__shot{
  margin:0;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid rgba(16,48,94,.06);
  background:var(--surface);
  /* four stacked shadows: a contact edge, a close one, a wide soft one and
     a very wide tinted one. A single shadow reads as a drawn outline;
     stacked, the panel reads as lifted off the page. */
  box-shadow:
    0 1px 2px rgba(10,16,48,.05),
    0 10px 20px -10px rgba(10,16,48,.16),
    0 36px 60px -30px rgba(10,16,48,.42),
    0 70px 110px -60px rgba(16,48,94,.55);
  transform:translateY(-2px);
  transition:transform .55s cubic-bezier(.2,.7,.25,1), box-shadow .55s cubic-bezier(.2,.7,.25,1);
}
@media (prefers-reduced-motion:no-preference){
  .feat__shot:hover{
    transform:translateY(-10px);
    box-shadow:
      0 1px 2px rgba(10,16,48,.05),
      0 14px 26px -12px rgba(10,16,48,.2),
      0 46px 76px -32px rgba(10,16,48,.5),
      0 92px 140px -64px rgba(16,48,94,.62);
  }
}
.feat__shot img{display:block;width:100%;height:auto}
.feat__text h3{font-size:clamp(1.25rem,2vw,1.6rem);font-weight:600;line-height:1.25}
.feat__text b{
  display:block;margin-block-start:1.3rem;
  font-size:var(--micro);font-weight:600;color:var(--indigo-500);
}
.feat__text p{margin-block-start:.4rem;color:var(--ink-soft);font-weight:300;line-height:1.7}
.feat__text ul{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.7rem}
.feat__text li{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start}
.feat__text li i{
  inline-size:7px;block-size:7px;margin-block-start:.5rem;border-radius:2px;
  background:var(--indigo-500);transform:rotate(45deg);
}
.feat__text li span{font-size:var(--small);color:var(--ink-soft);line-height:1.6;font-weight:300}
@media (max-width:860px){
  .feat{grid-template-columns:1fr;gap:1.4rem}
  .feat--flip .feat__shot{order:0}
}

/* A capability with no screen yet runs the full width rather than leaving
   an empty frame beside it. */
.feat--solo{grid-template-columns:1fr;max-width:62ch}

/* ============================================================
   CAPABILITY ARTWORK
   For modules with no screenshot yet. Drawn in the module's own colour
   (--c) from the same diamond the brand uses, so the row has a visual
   anchor without pretending to be a screen.
   ============================================================ */
.feat__shot--art{background:linear-gradient(160deg,#FBFCFE 0%,#F2F6FC 100%)}
.capart{display:block;width:100%;height:auto}
.capart .sheet{fill:#fff;stroke:rgba(16,48,94,.09)}
.capart .chrome,.capart .chrome__flat{fill:var(--c);opacity:.14}
.capart .axis{stroke:rgba(16,48,94,.14);stroke-width:1}
.capart .bar{fill:rgba(16,48,94,.3)}
.capart .bar--dim{fill:rgba(16,48,94,.14)}
.capart .pill{fill:var(--c);opacity:.22}
.capart .mark{fill:var(--c)}
.capart .mark--dim{fill:var(--c);opacity:.35}
.capart .col{fill:var(--c);opacity:.3}
.capart .col--win{opacity:.85}
@media (prefers-reduced-motion:no-preference){
  .feat.in .capart .row{animation:artIn .6s cubic-bezier(.2,.7,.25,1) var(--d,0s) both}
  @keyframes artIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .capart .row{opacity:0}
  .feat.in .capart .row{opacity:1}
}


/* Section headings on light surfaces carry the company blue, like the
   clients heading; on dark surfaces they keep inheriting white. */
h2{color:var(--indigo-500)}
.dark h2,.dark .card h2{color:inherit}

/* In-page jumps land below the fixed header, not under it */
[id^="faq--"],[id^="contact--"],[id^="screens--"]{scroll-margin-top:96px}

/* ============================================================
   ENERGY · CLOSE-UP COLLAGES
   Real screens, layered: one large view with two smaller ones over
   it, each with a short label. Text on one side, collage on the other.
   ============================================================ */
.clg{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.clg + .clg{margin-block-start:clamp(4rem,8vw,7rem)}
.clg--flip{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}
.clg--flip .clg__text{order:2}
.clg__kicker{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--micro);font-weight:700;color:var(--ink-soft)}
.clg__kicker::before{content:"";width:9px;height:9px;border-radius:2px;transform:rotate(45deg);background:var(--dot)}
.clg__text h3{margin-block-start:.8rem;font-size:var(--h3);font-weight:600;color:var(--indigo-500);line-height:1.2}
.clg__text p{margin:1rem 0 0;color:var(--ink-soft);line-height:1.7;max-width:38ch}

.clg__stage{position:relative;aspect-ratio:1.18}
.clg__item{position:absolute;margin:0}
.clg__item img{
  display:block;width:100%;height:auto;border-radius:14px;background:#fff;
  border:1px solid rgba(20,26,51,.08);
  box-shadow:0 2px 6px rgba(10,16,48,.06),0 22px 50px -24px rgba(10,16,48,.38);
  transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s;
}
.clg__item:hover img{transform:translateY(-4px);box-shadow:0 2px 6px rgba(10,16,48,.06),0 30px 60px -24px rgba(10,16,48,.45)}
.clg__item figcaption{
  position:absolute;z-index:2;inset-block-end:0;inset-inline-start:1rem;transform:translateY(55%);
  display:flex;align-items:baseline;gap:.5rem;white-space:nowrap;
  padding:.5rem .85rem;border-radius:999px;background:#fff;
  box-shadow:0 1px 2px rgba(10,16,48,.08),0 10px 24px -12px rgba(10,16,48,.35);
  font-size:var(--micro);color:var(--ink-soft);
}
.clg__item figcaption i{align-self:center;width:8px;height:8px;border-radius:50%;background:var(--dot);flex:none}
.clg__item figcaption b{font-weight:700;color:var(--ink)}

/* consumption: dashboard behind, asset list low on the far side, meter card in front */
.clg__stage--use .clg__item--a{inset-block-start:0;inset-inline-start:0;width:80%;z-index:1}
.clg__stage--use .clg__item--b{inset-block-start:50%;inset-inline-end:0;width:62%;z-index:2}
.clg__stage--use .clg__item--c{inset-block-start:60%;inset-inline-start:2%;width:40%;z-index:3}
/* production: solar view behind, report and AI fault over it */
.clg__stage--gen .clg__item--a{inset-block-start:0;inset-inline-end:0;width:84%;z-index:1}
.clg__stage--gen .clg__item--b{inset-block-start:42%;inset-inline-start:0;width:52%;z-index:2}
.clg__stage--gen .clg__item--c{inset-block-start:54%;inset-inline-end:0;width:50%;z-index:3}
.clg__stage--use .clg__item--d{inset-block-start:5%;inset-inline-end:-1%;width:27%;z-index:4}
.clg__stage--use .clg__item--d img{padding:6px;background:#fff;border-radius:18px;
  box-shadow:0 0 0 1px rgba(20,26,51,.06),0 26px 50px -18px rgba(10,16,48,.45)}
.clg__stage--use .clg__item--d figcaption{inset-inline-start:auto;inset-inline-end:.4rem}
.clg.in .clg__item--d{transition-delay:.45s}
/* label placement: the big view is labelled on its top edge, the two
   front cards on their outer bottom corners, so no label is covered */
.clg__item--a figcaption{inset-block-end:auto;inset-block-start:0;transform:translateY(-55%)}
.clg__stage--use .clg__item--a figcaption,.clg__stage--use .clg__item--c figcaption,.clg__stage--gen .clg__item--b figcaption{inset-inline-start:1rem;inset-inline-end:auto}
.clg__stage--use .clg__item--b figcaption,.clg__stage--gen .clg__item--a figcaption,.clg__stage--gen .clg__item--c figcaption{inset-inline-start:auto;inset-inline-end:1rem}
.clg__item figcaption{z-index:5}
/* whichever screen is pointed at comes to the front, over every other layer */
.clg__stage .clg__item:hover{z-index:10}

/* entrance: the layers arrive one after another */
.clg .clg__item{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.25,1),transform .7s cubic-bezier(.2,.7,.25,1)}
.clg.in .clg__item{opacity:1;transform:none}
.clg.in .clg__item--b{transition-delay:.15s}
.clg.in .clg__item--c{transition-delay:.3s}
@media (prefers-reduced-motion:reduce){.clg .clg__item{opacity:1;transform:none;transition:none}}

@media (max-width:900px){
  .clg,.clg--flip{grid-template-columns:1fr;gap:1.6rem}
  .clg--flip .clg__text{order:0}
  .clg__text p{max-width:none}
  .clg__stage{aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:2.4rem .8rem}
  .clg__item,.clg__stage .clg__item{position:relative;inset:auto !important;width:auto !important}
  .clg__item--a,.clg__stage--use .clg__item--b{grid-column:1 / -1}
  .clg__item figcaption{position:static;transform:none;margin-block-start:.7rem;white-space:normal;flex-wrap:wrap;
    background:transparent;box-shadow:none;padding:0;border-radius:0;align-items:center;gap:.25rem .5rem}
  .clg__item figcaption span{flex-basis:100%;padding-inline-start:calc(8px + .5rem)}
}

/* ============================================================
   HOME · STACKED SYSTEM CARDS
   Each system is a large card that sticks under the header while the
   next one slides up over it; the covered cards stay as stepped edges
   at the top and dim a little, like a pile of cards.
   ============================================================ */
.stack{--top:calc(88px + 1.2rem);--step:22px;position:relative;margin-block-start:.5rem}
.stack__card{
  position:sticky;inset-block-start:calc(var(--top) + var(--i) * var(--step));
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  min-height:min(62vh,500px);margin-block-end:clamp(2.5rem,8vh,5rem);
  border-radius:28px;overflow:hidden;text-decoration:none;color:var(--ink);
  background:#fff;border:1px solid var(--line);
  box-shadow:0 -10px 30px -18px rgba(10,16,48,.25),0 30px 60px -40px rgba(10,16,48,.35);
  transform-origin:50% 0;transform:scale(calc(1 - var(--p,0) * .04));
  will-change:transform;
}
.stack__card:last-child{margin-block-end:0}
/* a dark veil that thickens as the next card covers this one */
.stack__card::after{content:"";position:absolute;inset:0;background:var(--ink-900);opacity:calc(var(--p,0) * .45);pointer-events:none;z-index:3}
.stack__text{display:flex;flex-direction:column;gap:1rem;padding:clamp(2rem,4vw,3.6rem);position:relative;z-index:1}
.stack__num{font-size:clamp(3rem,6.5vw,5.4rem);font-weight:800;line-height:.9;color:var(--c);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stack__text b{font-size:clamp(2.2rem,5vw,4.2rem);font-weight:800;line-height:1.02;letter-spacing:-.025em;color:var(--ink-900);margin-block-start:.6rem}
.stack__text p{margin:0;font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.6;color:var(--ink-soft);font-weight:300;max-width:32ch}
.stack__text em{font-style:normal;font-size:var(--small);font-weight:600;color:var(--c);display:inline-flex;align-items:center;gap:.5rem}
.stack__text em::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.stack__text u{
  margin-block-start:auto;align-self:flex-start;text-decoration:none;display:inline-flex;align-items:center;gap:.6rem;
  padding:.85rem 1.3rem;border-radius:999px;background:var(--c);color:#fff;font-size:var(--small);font-weight:600;transition:gap .3s;
}
.stack__text u i{width:16px;height:16px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E") center/contain no-repeat}
html[dir="ltr"] .stack__text u i{transform:scaleX(-1)}
.stack__card:hover .stack__text u{gap:.95rem}
/* the second column: the fuller description and what the system does */
.stack__more{
  display:flex;flex-direction:column;justify-content:center;gap:1rem;
  padding:clamp(2rem,4vw,3.6rem);border-inline-start:1px solid var(--line-soft);
  background:color-mix(in srgb,var(--c) 5%,#F7F9FD);
}
.stack__more p{margin:0;font-size:clamp(1.05rem,1.35vw,1.2rem);line-height:1.75;color:var(--ink);max-width:46ch}
.stack__lbl{margin-block-start:.6rem;font-size:var(--micro);font-weight:700;letter-spacing:.02em;color:var(--c)}
.stack__more ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.55rem}
.stack__more li{
  display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .95rem;border-radius:999px;
  background:#fff;border:1px solid color-mix(in srgb,var(--c) 22%,var(--line));
  font-size:var(--small);font-weight:500;color:var(--ink);
}
.stack__more li::before{content:"";width:7px;height:7px;border-radius:2px;transform:rotate(45deg);background:var(--c);flex:none}

@media (max-width:760px){
  .stack{--top:calc(76px + .6rem);--step:12px}
  .stack__card{grid-template-columns:1fr;grid-template-rows:auto 1fr;min-height:0;border-radius:22px;margin-block-end:2rem}
  .stack__text{padding:1.6rem 1.4rem 1.2rem;gap:.7rem}
  .stack__text u{margin-block-start:.4rem}
  .stack__more{padding:1.3rem 1.4rem 1.6rem;border-inline-start:0;border-block-start:1px solid var(--line-soft);gap:.8rem}
  .stack__more p{font-size:1rem;line-height:1.65}
  .stack__more li{padding:.45rem .8rem;font-size:var(--micro)}
}
@media (prefers-reduced-motion:reduce){
  .stack__card{transform:none}
  .stack__card,.stack__text u{transition:none}
}

/* ============================================================
   MOBILE PASS
   Everything below tunes the site for phones. Desktop is untouched
   except where noted (larger hit area on the carousel dots).
   ============================================================ */

/* Carousel dots: same 4px bar, but a 32px tall hit area */
.ring__dots{margin-block-end:-14px}
.ring__dots button{position:relative;height:32px;background:transparent !important;margin-block:-14px 0}
.ring__dots button::before{
  content:"";position:absolute;inset-inline:0;inset-block-start:50%;height:4px;margin-block-start:-2px;
  border-radius:999px;background:rgba(255,255,255,.22);transition:background .3s;
}
.ring__dots button[aria-selected="true"]::before{background:var(--peri)}

.nav__cta{display:none}

@media (max-width:900px){
  /* Menu: a full-height sheet under the header, the page locked behind it */
  html.menu-open{overflow:hidden}
  /* backdrop-filter would make the header the containing block of the
     fixed menu sheet and clip it, so the open state uses a flat fill */
  html.menu-open .masthead{-webkit-backdrop-filter:none;backdrop-filter:none;background:#fff}
  .nav{
    inset-block-end:0;overflow-y:auto;overscroll-behavior:contain;
    padding-block-end:calc(1.4rem + env(safe-area-inset-bottom));
    border-block-end:0;box-shadow:none;
  }
  .nav.is-open{animation:navIn .28s cubic-bezier(.2,.7,.3,1)}
  @keyframes navIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  .nav > a,.nav .navtrig{min-height:52px;display:flex;align-items:center}
  .nav__cta{display:grid;gap:.7rem;margin-block-start:auto;padding-block-start:1.6rem}
  .nav__cta .btn,
  .nav__cta .elementor-widget-button.m-btn .elementor-button{width:100%;justify-content:center;padding-block:1rem}
  .nav__tel{justify-self:center;padding:.6rem 1rem;color:var(--ink-soft);text-decoration:none;font-weight:500}
  .burger{width:44px;height:44px;display:grid !important;place-content:center;padding:0}
  .burger span{transition:transform .25s,opacity .2s}
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8.4px) rotate(45deg)}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8.4px) rotate(-45deg)}

  /* Screen galleries (tenders, energy): three equal picks, titles only */
  .gallery__list{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible}
  .gthumb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;
    padding:.75rem .5rem;text-align:center;min-height:64px}
  .gthumb i{margin:0}
  .gthumb > span > span{display:none}
  .gthumb b{font-size:var(--micro);line-height:1.35}
}

@media (max-width:760px){
  /* Hero and page metrics: side by side instead of a tall stack */
  .metrics--aside,.metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
  .metrics:has(> div:nth-child(4)),.metrics--aside:has(> div:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}
  .metrics--aside > div,.metrics > div,
  .metrics--aside > div:first-child,.metrics > div:first-child{
    border-block-start:0;border-inline-start:1px solid rgba(255,255,255,.18);
    padding:1rem .7rem;
  }
  .metrics--aside > div:first-child,.metrics > div:first-child{border-inline-start:0;padding-inline-start:0}
  .metrics--aside b,.metrics b{font-size:clamp(1.35rem,6vw,1.75rem)}
  .metrics--aside b.is-word,.metrics b.is-word{font-size:1.05rem}
  .metrics--aside span,.metrics span{font-size:.78rem;line-height:1.45;margin-block-start:.35rem}

  .facts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .facts > div,.facts > div:first-child{border-block-start:0;border-inline-start:1px solid var(--line);padding:1rem .7rem}
  .facts > div:first-child{border-inline-start:0;padding-inline-start:0}
  .facts b{font-size:clamp(1.35rem,6vw,1.75rem)}
  .facts span{font-size:.78rem}

  /* Comfortable tap targets */
  .crumbs a{padding-block:.7rem;margin-block:-.7rem}
  .card-contact a,.detail a{display:inline-block;padding-block:.45rem}
  .mega__foot a{display:inline-block;padding-block:.6rem}

  /* Contact form: no zoom-on-focus on iOS, full-width send */
  .cform input,.cform textarea{font-size:16px}
  .cform .btn,
  .cform .elementor-widget-button.m-btn .elementor-button{width:100%;justify-content:center;padding-block:1rem}
}