/* ==========================================================================
   מחאריק ואגבאריה, עמוד נחיתה
   One stylesheet, RTL first, logical properties only.
   ========================================================================== */

:root{
  /* ground, sampled from the client's own logo artwork */
  --ink:#16213A;
  --ink-2:#20304F;
  --paper:#FAF7F1;
  --paper-2:#F1EBDF;
  --white:#fff;

  /* brand: navy carries the actions, gold is the accent */
  --brand:#16213A;
  --brand-2:#25365B;
  --brand-soft:#E7E3DA;
  --gold:#B8913A;
  --gold-hi:#D9B45C;      /* gold that still reads against the dark ground */
  --gold-deep:#8A6A23;    /* gold dark enough for small text on paper */
  --gold-soft:#F4ECD9;
  --sand:var(--gold);
  --sand-soft:var(--gold-soft);

  /* text */
  --text:#1B2536;
  --muted:#5E6577;
  --on-dark:#E9EFF3;
  --on-dark-mute:#A8BCC9;

  /* lines and shadow */
  --line:rgba(22,33,58,.10);
  --line-strong:rgba(22,33,58,.18);
  --line-dark:rgba(233,239,243,.14);
  --sh-1:0 1px 2px rgba(22,33,58,.06), 0 6px 16px rgba(22,33,58,.06);
  --sh-2:0 2px 6px rgba(22,33,58,.07), 0 18px 46px rgba(22,33,58,.10);
  --sh-3:0 30px 70px rgba(22,33,58,.22);

  /* shape */
  --r-sm:10px;
  --r:16px;
  --r-lg:26px;
  --r-xl:34px;

  --wrap:1180px;
  --gut:clamp(1.1rem,4vw,2.5rem);
  --hdr:78px;

  --ease:cubic-bezier(.22,.7,.28,1);
}

*,*::before,*::after{box-sizing:border-box}

html{
  font-size:17px;
  -webkit-text-size-adjust:100%;
  scroll-padding-block-start:calc(var(--hdr) + 14px);
}

/* The sideways entrance transforms and the decorative offsets push past the
   edge. `clip` is what we want rather than `hidden`: hidden would turn these
   into scroll containers and kill the sticky frame the zoom section rides on. */
html,body{overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip;overflow-y:visible}}

body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:'Assistant','Segoe UI',system-ui,sans-serif;
  font-size:1.02rem;
  font-weight:400;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:'Assistant','Segoe UI',system-ui,sans-serif;
  font-weight:700;
  line-height:1.28;
  margin:0 0 .6em;
  color:var(--ink);
  letter-spacing:0;
}
h1{font-size:clamp(2.15rem,5.6vw,3.9rem);line-height:1.16;font-weight:800}
h2{font-size:clamp(1.75rem,3.9vw,2.85rem)}
h3{font-size:clamp(1.12rem,2vw,1.38rem);line-height:1.4}
p{margin:0 0 1.1em}
a{color:var(--gold-deep);text-decoration:none}
img{max-width:100%;display:block;height:auto}
ul{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}

.wrap{width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto}
.nb{white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* --------------------------------------------------------------- shared bits */

/* A ruled kicker, not a capsule: the label sits on a hairline that runs out to
   the edge of the column, the way a section label sits on a ruled page. */
.eyebrow{
  --rule-rgb:184,145,58;
  display:flex;align-items:center;gap:.9rem;
  font-size:.78rem;font-weight:600;color:var(--muted);
  margin-block-end:1.15rem;
  line-height:1.6;
}
.eyebrow::after{
  content:"";flex:1;height:1px;min-width:2rem;
  background:linear-gradient(to left,rgba(var(--rule-rgb),.85),rgba(var(--rule-rgb),0));
}
/* a centred heading gets the rule on both sides, or it looks knocked off axis */
.sec__head--center .eyebrow{justify-content:center}
.sec__head--center .eyebrow::before{
  content:"";flex:1;height:1px;min-width:2rem;
  background:linear-gradient(to right,rgba(var(--rule-rgb),.85),rgba(var(--rule-rgb),0));
}

.lede{font-size:clamp(1.03rem,1.7vw,1.2rem);color:var(--muted);max-width:60ch}
.lede--dark{color:var(--on-dark-mute)}
.eyebrow--dark{--rule-rgb:217,180,92;color:#C3CBDA}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.78rem 1.6rem;
  border-radius:999px;
  border:1px solid transparent;
  font-weight:700;font-size:.98rem;line-height:1.5;
  cursor:pointer;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
  white-space:nowrap;
}
.btn svg{flex:none}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--wa{background:var(--brand);color:#fff;box-shadow:0 10px 26px rgba(22,33,58,.26)}
.btn--wa:hover{background:var(--brand-2);box-shadow:0 14px 32px rgba(22,33,58,.32)}
/* navy on navy would vanish, so every dark ground takes the gold instead */
.sec--dark .btn--wa,.cta .btn--wa,.mix__remote .btn--wa,.nav .btn--wa{
  background:var(--gold);color:var(--ink);box-shadow:0 10px 26px rgba(184,145,58,.28)}
.sec--dark .btn--wa:hover,.cta .btn--wa:hover,.mix__remote .btn--wa:hover,.nav .btn--wa:hover{
  background:var(--gold-hi);box-shadow:0 14px 32px rgba(184,145,58,.34)}
.btn--ghost{border-color:var(--line-strong);color:var(--ink);background:transparent}
.btn--ghost:hover{background:var(--white);border-color:var(--ink);box-shadow:var(--sh-1)}
.btn--onDark{border-color:var(--line-dark);color:var(--on-dark);background:rgba(255,255,255,.05)}
.btn--onDark:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4)}
.btn--sm{padding:.55rem 1.15rem;font-size:.9rem}

.sec{padding-block:clamp(4rem,9vw,7.5rem)}
.sec--dark{background:var(--ink);color:var(--on-dark-mute)}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--paper2{background:var(--paper-2)}

.sec__head{max-width:62ch;margin-block-end:clamp(2rem,4vw,3.2rem)}
.sec__head--center{margin-inline:auto;text-align:center}
.sec__head--center .lede{margin-inline:auto}

/* ================================================================== header */

.hdr{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:70;
  height:var(--hdr);
  display:flex;align-items:center;
  transition:background-color .3s var(--ease),box-shadow .3s var(--ease),height .3s var(--ease);
}
.hdr__in{display:flex;align-items:center;gap:1rem;width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto}
.hdr.is-stuck{background:rgba(251,249,245,.92);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line),0 10px 30px rgba(13,34,51,.07);height:68px}

.logo{display:flex;align-items:center;gap:.7rem;color:var(--ink);flex:none}
.logo__mark{width:auto;height:42px;flex:none;transition:transform .4s var(--ease)}
.logo:hover .logo__mark{transform:rotate(-4deg) scale(1.04)}
.logo__txt{display:flex;flex-direction:column;line-height:1.15}
.logo__name{font-family:'Assistant','Segoe UI',system-ui,sans-serif;font-weight:700;font-size:1.34rem;line-height:1.2;color:var(--ink)}
.logo__sub{font-size:.75rem;color:var(--muted);font-weight:600}
.ftr__logo .logo__mark{height:52px}
.ftr__mail{margin-block-start:.9rem}
.ftr__mail a,.cta__mail a{display:inline-flex;align-items:center;gap:.5rem;font-weight:600}
.cta__mail{margin-block-start:1.3rem}
.cta__mail a{color:var(--gold-hi)}
.cta__mail a:hover,.ftr__mail a:hover{color:#fff}

.nav{margin-inline-start:auto;display:flex;align-items:center;gap:.25rem}
.nav a:not(.btn){
  padding:.45rem .7rem;border-radius:999px;
  color:var(--ink);font-weight:600;font-size:.94rem;
  transition:color .2s,background-color .2s;
}
.nav a:not(.btn):hover{color:var(--ink);background:rgba(22,33,58,.07)}
/* the bar already carries .hdr__cta, so the nav copy is for the mobile drawer only */
.nav .btn{display:none}

.burger{
  margin-inline-start:auto;
  width:46px;height:46px;display:none;
  border:1px solid var(--line-strong);border-radius:14px;background:rgba(255,255,255,.7);
  flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;
}
.burger span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ==================================================================== hero */

.hero{
  position:relative;
  padding-block:calc(var(--hdr) + clamp(2.5rem,7vw,5rem)) clamp(3rem,8vw,6rem);
  overflow:hidden;
  background:linear-gradient(170deg,#FFFDF9 0%,var(--paper) 44%,#EFF3F0 100%);
}
.hero__bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero__grid{
  position:absolute;inset:-20% -10%;
  background-image:
    repeating-linear-gradient(to bottom,rgba(13,34,51,.055) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(to right,rgba(13,34,51,.035) 0 1px,transparent 1px 46px);
  -webkit-mask-image:radial-gradient(120% 90% at 70% 10%,#000 0%,rgba(0,0,0,.55) 45%,transparent 78%);
  mask-image:radial-gradient(120% 90% at 70% 10%,#000 0%,rgba(0,0,0,.55) 45%,transparent 78%);
  will-change:transform;
}
.hero__glow{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;will-change:transform}
.hero__glow--a{inset-block-start:-12%;inset-inline-end:-8%;width:46vw;height:46vw;background:radial-gradient(circle,rgba(184,145,58,.28),transparent 68%)}
.hero__glow--b{inset-block-end:-18%;inset-inline-start:-10%;width:40vw;height:40vw;background:radial-gradient(circle,rgba(22,33,58,.16),transparent 70%)}

.hero__in{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}

.hero__copy h1{margin-block-end:.55rem}
.hero__copy h1 .accent{position:relative;color:var(--gold-deep);white-space:nowrap}
.hero__copy h1 .accent::after{
  content:"";position:absolute;inset-inline:0;inset-block-end:.04em;height:.14em;
  background:var(--gold);opacity:.45;border-radius:999px;
}
.hero__sub{font-size:clamp(1.03rem,1.7vw,1.18rem);color:var(--muted);max-width:44ch;margin-block-end:1.7rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-block-end:1.9rem}
.hero__trust{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;font-size:.9rem;font-weight:600;color:var(--muted)}
.hero__trust li{display:flex;align-items:center;gap:.45rem}
.hero__trust li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none}

.hero__vis{position:relative;aspect-ratio:1/1;max-width:560px;inline-size:100%;margin-inline:auto}
.hero__photo{
  position:absolute;inset:5% 3%;
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:var(--sh-3);
  will-change:transform;
}
.hero__photo img{width:100%;height:100%;object-fit:cover}
.hero__photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(200deg,rgba(13,34,51,0) 40%,rgba(13,34,51,.32));
}
.hero__ring{position:absolute;inset:-6%;border:1px dashed rgba(13,34,51,.22);border-radius:50%;will-change:transform}
.hero__ring--2{inset:-14%;border-style:solid;border-color:rgba(184,145,58,.40)}

.fcard{
  position:absolute;z-index:3;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--sh-2);
  padding:.75rem .95rem;
  will-change:transform;
}
.fcard__row{display:flex;align-items:center;gap:.6rem}
.fcard__ico{
  width:34px;height:34px;flex:none;border-radius:11px;
  display:grid;place-items:center;
  background:var(--gold-soft);color:var(--gold-deep);
}
.fcard__ico--sand{background:var(--sand-soft);color:var(--sand)}
.fcard__t{display:block;font-weight:700;font-size:.92rem;line-height:1.35;color:var(--ink)}
.fcard__s{display:block;font-size:.78rem;color:var(--muted);line-height:1.4;max-width:12rem}

.fcard--a{inset-block-start:4%;inset-inline-start:-4%}
.fcard--b{inset-block-end:17%;inset-inline-end:-5%}
.fcard--c{
  inset-block-end:-2%;inset-inline-start:8%;
  background:#DCF8C6;border-color:rgba(13,34,51,.08);
  max-width:15rem;padding:.6rem .85rem;
  border-end-end-radius:4px;
}
.fcard--c .fcard__t{font-weight:600;font-size:.86rem}
/* a chat bubble puts its receipt at the far end, which RTL flips for us */
.fcard__meta{display:flex;align-items:center;gap:.3rem;justify-content:flex-end;font-size:.68rem;color:#5C7A63;margin-block-start:.15rem}

/* ============================================================ ticker strip */

.ticker{
  /* The direction has to be on the OVERFLOW CONTAINER, not on the track. A
     child wider than an RTL container pins to the container's RIGHT edge and
     overflows leftward, so translating left drags it away and opens a gap on
     the right. Laid out LTR the track pins left, overflows right, and the
     travel pulls fresh copies in instead of pulling content away. */
  direction:ltr;
  background:var(--ink);color:var(--on-dark-mute);
  padding-block:.85rem;overflow:hidden;
  border-block:1px solid rgba(255,255,255,.06);
}
/* The track lays out left to right even though the page is RTL. In an RTL
   container the track's right edge pins to the container's right edge and the
   overflow hangs off to the left, so translating left drags it away from the
   right and opens a gap. Laid out LTR it overflows rightward and the loop
   closes. Each item keeps its own RTL direction so the Hebrew is unaffected. */
.ticker__track{
  direction:ltr;
  display:flex;width:max-content;
  animation:tick var(--tick-duration,46s) linear infinite;
  will-change:transform;
}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__track span{
  direction:rtl;unicode-bidi:isolate;
  display:flex;align-items:center;gap:1.6rem;
  padding-inline:.8rem;font-size:.95rem;font-weight:600;white-space:nowrap;
}
.ticker__track span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);opacity:.9;flex:none}
/* travel is exactly one copy's width, measured in JS, so copy N+1 lands where
   copy N began and the seam is invisible */
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(calc(-1 * var(--tick-distance,50%)))}}

/* ==================================================================== hook */

.hook__in{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.hook h2{max-width:20ch;font-size:clamp(1.9rem,4.4vw,3.15rem)}
.hook__q{color:var(--gold-deep)}
.hook__pts{display:grid;gap:.9rem;margin-block-start:1.6rem}
.hook__pts li{
  display:flex;gap:.85rem;align-items:flex-start;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:.9rem 1.1rem;box-shadow:var(--sh-1);
}
.hook__pts b{display:block;color:var(--ink);font-family:'Assistant','Segoe UI',system-ui,sans-serif;font-size:1.05rem}
.hook__pts span{font-size:.94rem;color:var(--muted);line-height:1.65}
.hook__n{
  flex:none;width:30px;height:30px;border-radius:9px;background:var(--ink);color:#fff;
  display:grid;place-items:center;font-size:.85rem;font-weight:700;font-family:'Assistant',sans-serif;
}
.hook__fig{position:relative}
.hook__fig img{border-radius:var(--r-lg);box-shadow:var(--sh-2);width:100%}
.hook__tag{
  position:absolute;inset-block-end:-1.1rem;inset-inline-start:-1.1rem;
  background:var(--ink);color:#fff;border-radius:var(--r);
  padding:.85rem 1.2rem;box-shadow:var(--sh-2);max-width:17rem;
}
.hook__tag b{font-family:'Assistant','Segoe UI',system-ui,sans-serif;font-size:1.02rem;display:block}
.hook__tag span{font-size:.82rem;color:var(--on-dark-mute)}

/* ================================================================ services */

.svc{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.svc__card{
  position:relative;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:1.6rem 1.4rem 1.5rem;
  overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.svc__card::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;height:3px;
  background:linear-gradient(to left,var(--gold),var(--gold-hi));
  transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .45s var(--ease);
}
.svc__card:hover{transform:translateY(-6px);box-shadow:var(--sh-2);border-color:rgba(184,145,58,.45)}
.svc__card:hover::before{transform:scaleX(1)}
.svc__ico{
  width:48px;height:48px;border-radius:14px;
  background:var(--gold-soft);color:var(--gold-deep);
  display:grid;place-items:center;margin-block-end:1rem;
  transition:background-color .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);
}
.svc__card:hover .svc__ico{background:var(--ink);color:var(--gold-hi);transform:translateY(-2px) rotate(-5deg)}
.svc__card h3{margin-block-end:.35rem}
.svc__card p{font-size:.93rem;color:var(--muted);margin:0;line-height:1.7}

/* ============================================================ zoom reveal */

.zoom{position:relative;background:var(--ink)}
.zoom__rail{height:360vh}

/* Every child sits in the same grid cell, so the picture and the type stack on
   one another and stay centred without a single physical offset. */
.zoom__stick{
  position:sticky;inset-block-start:0;z-index:1;
  height:100vh;height:100dvh;
  display:grid;overflow:hidden;
}
.zoom__stick > *{grid-area:1 / 1;place-self:center;margin:0}

/* The picture opens from a small card to the whole frame. width and height are
   animated rather than a scale transform, so the photograph re-crops as it
   grows instead of magnifying, and the type over it never softens. */
.zoom__frame{
  --zw0:300px;
  --zh0:400px;
  position:relative;z-index:1;
  width:var(--zw0);height:var(--zh0);
  border-radius:16px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.45);
  will-change:width,height;
}
.zoom__frame img{width:100%;height:100%;object-fit:cover}
/* The photograph is high key, so a flat wash left white type sitting on white
   shirts. This is a navy scrim that is deliberately heaviest through the middle
   band, which is exactly where the type sits. */
.zoom__dim{
  position:absolute;inset:0;
  background:
    radial-gradient(115% 74% at 50% 50%,
      rgba(9,16,30,.86) 0%, rgba(9,16,30,.74) 42%, rgba(9,16,30,.52) 100%),
    linear-gradient(to bottom, rgba(22,33,58,.42), rgba(22,33,58,.58));
}

.zoom__label,.zoom__title,.zoom__meta,.zoom__body{
  z-index:2;text-align:center;color:#fff;
  padding-inline:clamp(1.1rem,5vw,3rem);
  text-shadow:0 1px 3px rgba(6,12,24,.75), 0 4px 26px rgba(6,12,24,.65);
  pointer-events:none;
}
.zoom__label{
  translate:0 -232px;
  font-size:.82rem;font-weight:700;color:var(--gold-hi);
}
.zoom__title{
  font-family:'Assistant','Segoe UI',system-ui,sans-serif;font-weight:800;
  font-size:clamp(2.6rem,9vw,6.5rem);line-height:1.05;
}
.zoom__meta{
  translate:0 96px;
  font-size:clamp(1.05rem,2vw,1.4rem);color:var(--gold-hi);font-weight:600;
  will-change:opacity;
}
.zoom__body{
  translate:0 156px;
  max-width:44ch;
  font-size:clamp(1.12rem,2.2vw,1.6rem);line-height:1.7;color:#F4F7FB;
  opacity:0;will-change:opacity,transform;
}
.zoom__hint{
  z-index:2;place-self:end center;margin-block-end:2rem;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  color:rgba(255,255,255,.55);font-size:.8rem;font-weight:600;
  will-change:opacity;
}
.zoom__hint::after{
  content:"";width:1px;height:26px;background:currentColor;
  animation:hintDrop 1.9s var(--ease) infinite;
  transform-origin:50% 0;
}

/* The section after it climbs over the picture while the frame is still
   pinned, on a ground you can see through. */
.sec--overlay{
  position:relative;z-index:2;
  /* matches the sticky frame's unit, or the two drift apart on a phone where
     the dynamic viewport is shorter than the large one */
  margin-block-start:-100vh;
  margin-block-start:-100dvh;
  background:rgba(11,28,42,.86);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-block-start:1px solid rgba(255,255,255,.08);
}

@keyframes hintDrop{0%{transform:scaleY(.2);opacity:0}40%{transform:scaleY(1);opacity:1}100%{transform:scaleY(.2);opacity:0}}

/* ================================================================= process */

.proc__list{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;position:relative}
.proc__list::before{
  content:"";position:absolute;inset-block-start:26px;inset-inline:7%;
  height:2px;background:var(--line-strong);
}
.proc__line{
  position:absolute;inset-block-start:26px;inset-inline-start:7%;
  height:2px;background:linear-gradient(to left,var(--gold),var(--gold-hi));
  width:0;transition:width 1.6s var(--ease);
}
.proc__step{position:relative;padding-inline-end:.5rem}
.proc__dot{
  position:relative;z-index:2;
  width:54px;height:54px;border-radius:50%;
  background:var(--paper);border:2px solid var(--line-strong);
  color:var(--ink);display:grid;place-items:center;
  font-weight:700;font-size:1.1rem;margin-block-end:1.1rem;
  transition:background-color .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease);
}
.proc__step.is-on .proc__dot{background:var(--ink);border-color:var(--ink);color:var(--gold-hi);transform:scale(1.06)}
.proc__step h3{margin-block-end:.3rem}
.proc__step p{font-size:.93rem;color:var(--muted);margin:0}

/* ================================================================== values */

.vals{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.val{
  border:1px solid var(--line-dark);border-radius:var(--r-lg);
  padding:1.5rem 1.3rem;background:rgba(255,255,255,.03);
  transition:background-color .35s var(--ease),transform .35s var(--ease),border-color .35s var(--ease);
}
.val:hover{background:rgba(255,255,255,.07);transform:translateY(-4px);border-color:rgba(184,145,58,.45)}
.val__ico{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:rgba(184,145,58,.16);color:var(--gold-hi);margin-block-end:.9rem}
.val h3{font-size:1.14rem;margin-block-end:.3rem}
.val p{margin:0;font-size:.93rem;line-height:1.7}

/* ============================================================== audience */

.aud{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.aud__card{
  position:relative;overflow:hidden;
  border-radius:var(--r-lg);
  background:var(--white);border:1px solid var(--line);
  padding:1.7rem 1.5rem;
  box-shadow:var(--sh-1);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.aud__card:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.aud__card::after{
  content:"";position:absolute;inset-block-start:0;inset-inline-end:0;
  width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,rgba(184,145,58,.16),transparent 70%);
  transform:translate(35%,-35%);
}
.aud__k{font-family:'Assistant','Segoe UI',system-ui,sans-serif;font-size:1.35rem;font-weight:700;color:var(--ink);margin-block-end:.4rem}
.aud__card p{margin:0;color:var(--muted);font-size:.95rem}

/* ================================================================= offices */

.mix{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem;align-items:start}
.mix__remote{
  background:var(--ink);color:var(--on-dark-mute);
  border-radius:var(--r-lg);padding:1.9rem 1.7rem;
  position:relative;overflow:hidden;
  box-shadow:var(--sh-2);
}
.mix__remote::after{
  content:"";position:absolute;inset-block-start:-30%;inset-inline-start:-20%;
  width:70%;height:90%;border-radius:50%;
  background:radial-gradient(circle,rgba(184,145,58,.26),transparent 68%);
  pointer-events:none;
}
.mix__remote h3{color:#fff;font-size:1.5rem;margin-block-end:.4rem;position:relative}
.mix__remote > p{position:relative;font-size:.97rem}
.mix__ico{
  position:relative;
  width:50px;height:50px;border-radius:15px;display:grid;place-items:center;
  background:rgba(184,145,58,.18);color:var(--gold-hi);margin-block-end:1rem;
}
.mix__pts{display:grid;gap:.6rem;margin-block:1.2rem 1.6rem;position:relative}
.mix__pts li{display:flex;gap:.6rem;align-items:flex-start;font-size:.95rem;color:var(--on-dark)}
.mix__pts li svg{flex:none;margin-block-start:.35rem;color:var(--gold-hi)}
.mix__remote .btn{position:relative}

.mix__offices{display:grid;gap:1rem}
.mix__lbl{
  display:flex;align-items:center;gap:.55rem;
  margin:0 0 .2rem;font-weight:700;color:var(--ink);font-size:.98rem;
}
.mix__lbl svg{color:var(--gold-deep);flex:none}

.off__card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.7rem 1.6rem;box-shadow:var(--sh-1);
  display:flex;flex-direction:column;gap:.3rem;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.off__card:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.off__city{display:flex;align-items:center;gap:.6rem;color:var(--gold-deep);font-weight:700;font-size:.92rem}
.off__card h3{margin:.25rem 0 .1rem;font-size:1.45rem}
.off__meta{color:var(--muted);font-size:.95rem;margin:0}
.off__acts{display:flex;flex-wrap:wrap;gap:.6rem;margin-block-start:auto;padding-block-start:1.2rem}
bdi{unicode-bidi:isolate}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}

/* ================================================================ contact */

.cta{position:relative;overflow:hidden;background:var(--ink)}
.cta__bg{position:absolute;inset-block-start:-10%;inset-inline:0;height:120%;opacity:.22;will-change:transform}
.cta__bg img{width:100%;height:100%;object-fit:cover}
.cta__veil{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(13,34,51,.78),rgba(13,34,51,.95))}
.cta__in{position:relative;z-index:2;display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.cta h2{color:#fff}
.cta p{color:var(--on-dark-mute)}

.form{
  background:rgba(255,255,255,.06);
  border:1px solid var(--line-dark);
  border-radius:var(--r-lg);
  padding:clamp(1.3rem,3vw,2rem);
  backdrop-filter:blur(6px);
}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.field{display:flex;flex-direction:column;gap:.35rem}
.field--full{grid-column:1 / -1}
.field label{font-size:.85rem;font-weight:700;color:#CFDDE7}
.field input,.field select,.field textarea{
  background:rgba(255,255,255,.07);
  border:1px solid var(--line-dark);
  border-radius:12px;
  padding:.65rem .85rem;
  color:#fff;
  transition:border-color .25s,background-color .25s,box-shadow .25s;
  width:100%;
}
.field textarea{resize:vertical;min-height:92px;line-height:1.7}
.field input::placeholder,.field textarea::placeholder{color:#7B909E}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold);background:rgba(255,255,255,.11);
  box-shadow:0 0 0 3px rgba(184,145,58,.22);
}
.field select option{background:var(--ink-2);color:#fff}
.form__note{font-size:.8rem;color:#8AA0AE;margin:.9rem 0 0;line-height:1.6}
.form__err{font-size:.86rem;color:#FFB4A8;min-height:1.3em;margin:.5rem 0 0;font-weight:600}
.form__err.is-ok{color:#8FE3B5}
.field__opt{font-weight:400;color:#8AA0AE}
/* the honeypot has to be reachable to a bot and invisible to everyone else,
   so it is moved off screen rather than display:none */
.hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
#formWa{margin-block-start:.6rem;width:100%}
.form .btn{margin-block-start:1.1rem;width:100%}

.cta__side ul{display:grid;gap:.75rem;margin-block-start:1.4rem}
.cta__side li{display:flex;gap:.7rem;align-items:flex-start;color:var(--on-dark);font-size:.97rem}
.cta__side li svg{flex:none;margin-block-start:.35rem;color:var(--gold-hi)}

/* ================================================================== footer */

.ftr{background:#081724;color:var(--on-dark-mute);padding-block:clamp(2.6rem,5vw,4rem) 1.6rem;font-size:.93rem}
.ftr__in{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:2rem}
.ftr h4{color:#fff;font-size:1.02rem;margin-block-end:.7rem}
.ftr a{color:var(--on-dark-mute)}
.ftr a:hover{color:#fff}
.ftr__logo{display:flex;align-items:center;gap:.7rem;margin-block-end:.9rem}
.ftr__logo .logo__name{color:#fff}
.ftr__logo .logo__sub{color:var(--on-dark-mute)}
.ftr__links{display:grid;gap:.4rem}
.ftr__bar{
  margin-block-start:2.2rem;padding-block-start:1.2rem;
  border-block-start:1px solid rgba(255,255,255,.10);
  display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;justify-content:space-between;
  font-size:.83rem;color:#7B909E;
}
.ftr__bar a{color:#9FB4C1}

/* ============================================================== mobile bar */

/* Floating WhatsApp, pinned bottom right on every screen size.
   The page is RTL, so inline-start IS the right hand edge. */
.wafab{
  position:fixed;z-index:80;
  inset-block-end:calc(clamp(1rem,3vw,1.6rem) + env(safe-area-inset-bottom));
  inset-inline-start:clamp(1rem,3vw,1.6rem);
  width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;
  background:#25D366;color:#fff;          /* WhatsApp's own green: read as the app, not the brand */
  box-shadow:0 6px 18px rgba(7,20,30,.28), 0 2px 6px rgba(7,20,30,.18);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.wafab:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 12px 28px rgba(7,20,30,.34)}
.wafab:active{transform:translateY(0) scale(.98)}
.wafab svg{width:31px;height:31px;position:relative}
.wafab__ring{
  position:absolute;inset:0;border-radius:50%;
  background:#25D366;opacity:.45;
  animation:waPulse 2.6s var(--ease) infinite;
}
@keyframes waPulse{
  0%{transform:scale(1);opacity:.45}
  70%{transform:scale(1.7);opacity:0}
  100%{transform:scale(1.7);opacity:0}
}
@media (max-width:640px){ .wafab{width:54px;height:54px} .wafab svg{width:28px;height:28px} }
@media (prefers-reduced-motion:reduce){ .wafab__ring{animation:none;opacity:0} }

/* ================================================================= reveals */

.js .rv{opacity:0;transform:translateY(26px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.js .rv[data-rv="start"]{transform:translate3d(30px,0,0)}
.js .rv[data-rv="end"]{transform:translate3d(-30px,0,0)}
.js .rv[data-rv="zoom"]{transform:scale(.94)}
.js .rv.is-in{opacity:1;transform:none}

/* ============================================================== breakpoints */

@media (max-width:1080px){
  .svc{grid-template-columns:repeat(2,1fr)}
  .vals{grid-template-columns:repeat(2,1fr)}
  .proc__list{grid-template-columns:repeat(2,1fr);gap:2rem 1.4rem}
  .proc__list::before,.proc__line{display:none}
}

@media (max-width:920px){
  html{font-size:16px}
  .nav{
    position:fixed;inset-block-start:0;inset-inline:0;
    flex-direction:column;align-items:stretch;gap:.2rem;
    background:var(--paper);
    padding:calc(var(--hdr) + 1rem) var(--gut) 2rem;
    box-shadow:0 20px 40px rgba(13,34,51,.14);
    transform:translateY(-102%);
    transition:transform .4s var(--ease);
    margin:0;
  }
  .nav.is-open{transform:translateY(0)}
  .nav a:not(.btn){padding:.75rem .5rem;border-radius:12px;border-block-end:1px solid var(--line);font-size:1.02rem}
  .nav .btn{display:inline-flex;margin:.9rem 0 0;justify-content:center}
  .burger{display:flex}
  .hdr__cta{display:none}

  .hero__in{grid-template-columns:1fr;gap:2.5rem}
  .hero__sub{max-width:none}
  .hero__vis{max-width:420px;margin-block-start:.5rem}
  .fcard--a{inset-inline-start:-2%}
  .fcard--b{inset-inline-end:-2%}
  .fcard--c{inset-inline-start:2%;max-width:13rem}

  .hook__in{grid-template-columns:1fr;gap:2.6rem}
  .hook__tag{inset-inline-start:auto;inset-inline-end:0;inset-block-end:-1rem}

  /* A sideways slide has nowhere to go on a narrow screen, so every reveal
     rises instead. This is also what stops the page overflowing sideways. */
  .js .rv[data-rv="start"],
  .js .rv[data-rv="end"],
  .js .rv[data-rv="zoom"]{transform:translateY(26px)}
  .cta__in{grid-template-columns:1fr}
  .mix{grid-template-columns:1fr}
  .ftr__in{grid-template-columns:1fr 1fr}
  .aud{grid-template-columns:1fr}
}

@media (max-width:640px){
  .svc{grid-template-columns:1fr}
  .vals{grid-template-columns:1fr}
  .proc__list{grid-template-columns:1fr;gap:1.6rem}
  .form__grid{grid-template-columns:1fr}
  .ftr__in{grid-template-columns:1fr}
  .hero__cta .btn{width:100%}
  .hero__vis{max-width:330px}
  .fcard{padding:.6rem .75rem}
  .fcard__ico{width:30px;height:30px}
  .fcard__t{font-size:.84rem}
  .fcard__s{font-size:.72rem}
}

/* A phone gets a smaller opening card and the type pulled in to match it.
   backdrop-filter over a full screen is too expensive here, so the ground the
   next section rides in on is simply more opaque instead. */
@media (max-width:760px){
  .zoom__frame{--zw0:220px;--zh0:300px}
  .zoom__label{translate:0 -186px}
  .zoom__meta{translate:0 74px}
  .zoom__body{translate:0 124px}
  .sec--overlay{
    background:rgba(11,28,42,.93);
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
}

/* =========================================================== reduced motion */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .js .rv{opacity:1;transform:none}
  .ticker__track{animation:none}
  .zoom__rail{height:auto}
  .zoom__stick{position:static;height:auto;padding-block:clamp(4rem,9vw,7rem)}
  .zoom__frame{width:min(1100px,92vw);height:clamp(420px,54vw,620px);border-radius:var(--r-lg)}
  .zoom__meta{opacity:0}
  .zoom__body{opacity:1}
  .zoom__hint{display:none}
  .sec--overlay{margin-block-start:0;background:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ==========================================================================
   Accessibility panel, privacy notice and the legal pages.
   Concatenated onto site.css by the build.
   ========================================================================== */

/* ------------------------------------------------- accessibility controls */

.a11y-btn{
  position:fixed;z-index:80;
  inset-block-end:calc(clamp(1rem,3vw,1.6rem) + env(safe-area-inset-bottom));
  inset-inline-end:clamp(1rem,3vw,1.6rem);     /* inline-end is the LEFT here, clear of WhatsApp */
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--ink);color:#fff;border:2px solid rgba(255,255,255,.22);
  box-shadow:0 6px 18px rgba(7,20,30,.28);
  cursor:pointer;
  transition:transform .25s var(--ease),background-color .25s var(--ease);
}
.a11y-btn:hover{transform:translateY(-3px);background:var(--ink-2)}
.a11y-btn svg{width:27px;height:27px}

.a11y-panel{
  position:fixed;z-index:81;
  inset-block-end:calc(clamp(1rem,3vw,1.6rem) + 64px + env(safe-area-inset-bottom));
  inset-inline-end:clamp(1rem,3vw,1.6rem);
  width:min(300px,calc(100vw - 2rem));
  background:var(--white);color:var(--text);
  border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 24px 60px rgba(7,20,30,.28);
  padding:1.1rem 1.1rem 1rem;
  display:none;
}
.a11y-panel[data-open="true"]{display:block}
.a11y-panel h2{font-size:1.05rem;margin:0 0 .15rem}
.a11y-panel__sub{font-size:.78rem;color:var(--muted);margin:0 0 .9rem}
.a11y-opts{display:grid;gap:.4rem}
.a11y-opt{
  display:flex;align-items:center;gap:.6rem;width:100%;
  padding:.55rem .7rem;border-radius:12px;
  border:1px solid var(--line);background:var(--white);
  font-size:.9rem;font-weight:600;color:var(--ink);
  cursor:pointer;text-align:start;
  transition:background-color .2s,border-color .2s;
}
.a11y-opt:hover{background:var(--gold-soft);border-color:var(--gold)}
.a11y-opt[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.a11y-opt__k{margin-inline-start:auto;font-size:.72rem;opacity:.7;font-weight:600}
.a11y-reset{margin-block-start:.6rem;width:100%;justify-content:center}

/* what the options actually do */
html[data-a11y-contrast="1"]{filter:contrast(1.32) saturate(1.12)}
html[data-a11y-links="1"] a:not(.btn):not(.logo):not(.wafab){
  text-decoration:underline !important;text-underline-offset:3px;font-weight:700;
}
html[data-a11y-font="1"] body,
html[data-a11y-font="1"] h1,html[data-a11y-font="1"] h2,
html[data-a11y-font="1"] h3,html[data-a11y-font="1"] h4{
  font-family:Arial,"Segoe UI",sans-serif !important;letter-spacing:0;
}
html[data-a11y-still="1"] *,
html[data-a11y-still="1"] *::before,
html[data-a11y-still="1"] *::after{
  animation:none !important;transition:none !important;scroll-behavior:auto !important;
}
html[data-a11y-still="1"] .rv{opacity:1 !important;transform:none !important}

/* a visible focus ring for keyboard users, on every interactive thing */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--gold);outline-offset:3px;border-radius:4px;
}

/* ---------------------------------------------------- the privacy notice */

.notice{
  position:fixed;z-index:78;
  inset-block-end:0;inset-inline:0;
  background:var(--ink);color:var(--on-dark);
  border-block-start:1px solid rgba(255,255,255,.12);
  padding:.9rem clamp(1rem,4vw,2rem) calc(.9rem + env(safe-area-inset-bottom));
  display:none;
  box-shadow:0 -8px 28px rgba(7,20,30,.22);
}
.notice[data-open="true"]{display:block}
.notice__in{
  max-width:var(--wrap);margin-inline:auto;
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
}
.notice p{margin:0;font-size:.88rem;line-height:1.6;flex:1;min-width:16rem}
.notice a{color:var(--gold-hi);text-decoration:underline}
.notice .btn{flex:none}
@media (max-width:620px){
  .notice{padding-inline:1rem}
  .notice .btn{width:100%}
}

/* while the notice is up, lift the two round buttons clear of it */
body.has-notice .wafab,
body.has-notice .a11y-btn{
  inset-block-end:calc(clamp(1rem,3vw,1.6rem) + 82px + env(safe-area-inset-bottom));
}
body.has-notice .a11y-panel{
  inset-block-end:calc(clamp(1rem,3vw,1.6rem) + 146px + env(safe-area-inset-bottom));
}

/* --------------------------------------------------------- legal pages */

.legal{padding-block:calc(var(--hdr) + 2.5rem) clamp(3rem,7vw,5rem);background:var(--paper)}
.wrap--legal{width:min(760px,100% - var(--gut)*2);margin-inline:auto}
.legal__back{margin-block-end:1.2rem;font-size:.9rem;font-weight:600}
.legal h1{font-size:clamp(1.9rem,4.5vw,2.8rem);margin-block-end:.3rem}
.legal__updated{color:var(--muted);font-size:.85rem;margin-block-end:2rem}
.legal h2{font-size:clamp(1.2rem,2.4vw,1.5rem);margin-block:2rem .6rem}
.legal p{line-height:1.85}
.legal__list{display:grid;gap:.6rem;margin-block:.6rem 1.2rem}
.legal__list li{
  position:relative;padding-inline-start:1.3rem;line-height:1.8;color:var(--text);
}
.legal__list li::before{
  content:"";position:absolute;inset-inline-start:.25rem;inset-block-start:.72em;
  width:6px;height:6px;border-radius:50%;background:var(--gold);
}
.legal__note{
  background:var(--gold-soft);border:1px solid rgba(184,145,58,.35);
  border-radius:var(--r);padding:.9rem 1.1rem;margin-block-end:2rem;
}
.legal__note p{margin:0;font-size:.92rem;line-height:1.7}
.ftr__legal{display:flex;gap:1rem;flex-wrap:wrap}
.ftr__legal a{text-decoration:underline}

@media (prefers-reduced-motion:reduce){
  .a11y-btn,.a11y-opt{transition:none}
}