/* ==========================================================================
   NAVA DIGITAL v2 — design system

   Printed, not lit. Ink on warm paper, one purple taken from the mark, rules
   instead of shadows, square corners instead of pills, a serif carrying the
   headlines. Nothing glows, nothing sweeps, nothing follows the cursor.
   ========================================================================== */

/* ---------- tokens: paper (default) ---------- */
:root{
  --paper:#F7F4ED;
  --paper-2:#EFEBE1;
  --card:#FFFFFF;

  --ink:#17130E;
  --ink-2:#4C453C;
  --ink-3:#7C7468;

  --rule:#DBD3C4;
  --rule-2:#C3B9A6;

  --violet:#5B21B6;
  --violet-2:#3D1382;
  --violet-wash:#EDE7FA;

  --wa:#1EA85A;
  --wa-ink:#FFFFFF;

  /* text that sits on a violet fill, and the hard offset under a button */
  --on-violet:#FFFFFF;
  --stack:#17130E;
  --band-bg:#17130E;
  --band-fg:#F7F4ED;

  --r-sm:2px;
  --r:3px;
  --r-lg:4px;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  --e-out:cubic-bezier(.2,.7,.3,1);
  --t-fast:.14s;
  --t:.24s;

  --maxw:1180px;
  --nav-h:70px;
}

/* ---------- tokens: night ----------
   A warm near-black. The blue-black every generated page uses is half of
   why they all look the same. */
:root[data-theme="dark"]{
  --paper:#14110D;
  --paper-2:#1C1813;
  --card:#1C1813;

  --ink:#F3EEE4;
  --ink-2:#BEB5A6;
  --ink-3:#8C8474;

  --rule:#332D25;
  --rule-2:#4A4237;

  --violet:#C9A6FF;
  --violet-2:#E0CCFF;
  --violet-wash:#241A38;

  --wa:#25D366;
  --wa-ink:#06240F;

  /* the violet is pale at night, so what sits on it has to darken */
  --on-violet:#1C1813;
  --stack:#4A4237;
  --band-bg:#241A38;
  --band-fg:#F3EEE4;
}

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

html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-padding-top:calc(var(--nav-h) + 16px)}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body,system-ui,sans-serif);
  font-size:17.5px;
  line-height:1.62;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
main,header,footer{position:relative;z-index:1}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}

:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
::selection{background:var(--violet);color:var(--on-violet)}

/* ---------- typography ---------- */
h1,h2,h3,h4{
  font-family:var(--font-head,inherit);
  font-weight:700;
  line-height:1.14;
  margin:0 0 var(--s4);
  letter-spacing:-.015em;
}
h1{font-size:clamp(2.3rem,5.4vw,4.15rem);line-height:1.04;font-weight:900;letter-spacing:-.025em}
h2{font-size:clamp(1.7rem,3.5vw,2.7rem);line-height:1.1;font-weight:700;letter-spacing:-.02em}
h3{font-size:clamp(1.16rem,1.9vw,1.42rem)}
h4{font-size:1.02rem}
/* Amiri sits low and needs air; Hebrew and Latin do not */
[lang="ar"] h1{line-height:1.28;letter-spacing:0}
[lang="ar"] h2{line-height:1.34;letter-spacing:0}

p{margin:0 0 var(--s4)}
p:last-child{margin-bottom:0}

/* was a gradient; a flat colour is what a printer could reproduce */
.grad{color:var(--violet)}

.lead{font-size:clamp(1.04rem,1.5vw,1.19rem);color:var(--ink-2);max-width:58ch}
.muted{color:var(--ink-3)}
.tiny{font-size:.83rem;line-height:1.55}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:22px}
section{padding-block:clamp(52px,6.5vw,92px);position:relative}
.sec-head{max-width:60ch;margin-bottom:var(--s7)}
.sec-head.center{margin-inline:auto;text-align:center}

/* a printed kicker: small caps and a square bullet, not a glowing pill */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-body,inherit);
  font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:var(--s4);
}
.eyebrow::before{content:"";width:7px;height:7px;background:var(--violet);flex:none}

.grid{display:grid;gap:var(--s5)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ---------- brand mark ---------- */
.mark{
  width:33px;height:33px;flex:none;display:block;
  background:var(--violet);
  -webkit-mask:url("nava-mark.png") center/contain no-repeat;
  mask:url("nava-mark.png") center/contain no-repeat;
}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand-txt{display:flex;flex-direction:column;line-height:1;letter-spacing:.17em}
.brand-txt b{font-size:.92rem;font-weight:700;font-family:var(--font-body,inherit)}
.brand-txt span{font-size:.55rem;color:var(--ink-3);letter-spacing:.32em}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:80;height:var(--nav-h);
  display:flex;align-items:center;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.nav.stuck{border-bottom-color:var(--rule-2)}
.nav .wrap{display:flex;align-items:center;gap:var(--s5)}
.nav-links{display:flex;align-items:center;gap:0;margin-inline-start:auto}
.nav-links a{
  padding:8px 14px;font-size:.93rem;font-weight:600;color:var(--ink-2);
  transition:color var(--t-fast);white-space:nowrap;position:relative;
}
.nav-links a:hover{color:var(--ink)}
.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a[aria-current="page"]::after{
  content:"";position:absolute;inset-inline:14px;bottom:-2px;height:2px;background:var(--violet);
}
.nav-right{display:flex;align-items:center;gap:9px}

/* language switcher */
.lang{position:relative}
.lang-btn{
  display:flex;align-items:center;gap:7px;cursor:pointer;
  background:transparent;border:1px solid var(--rule-2);
  color:var(--ink-2);padding:7px 12px;border-radius:var(--r);font-size:.85rem;font-weight:600;
  transition:border-color var(--t-fast),color var(--t-fast);
}
.lang-btn:hover{border-color:var(--ink);color:var(--ink)}
.lang-btn svg{width:15px;height:15px;opacity:.65}
.lang-menu{
  position:absolute;inset-inline-end:0;top:calc(100% + 7px);min-width:162px;
  background:var(--card);border:1px solid var(--ink);border-radius:var(--r);
  padding:4px;
  opacity:0;visibility:hidden;transform:translateY(-5px);
  transition:opacity var(--t) var(--e-out),transform var(--t) var(--e-out),visibility var(--t);
}
.lang.open .lang-menu{opacity:1;visibility:visible;transform:translateY(0)}
.lang-menu a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;font-size:.9rem;font-weight:600;color:var(--ink-2);
  transition:background var(--t-fast),color var(--t-fast);
}
.lang-menu a:hover{background:var(--violet-wash);color:var(--ink)}
.lang-menu a[aria-current="true"]{color:var(--violet)}
.lang-menu a small{font-size:.68rem;color:var(--ink-3);letter-spacing:.09em}

.burger{
  display:none;width:42px;height:42px;border-radius:var(--r);cursor:pointer;
  background:transparent;border:1px solid var(--rule-2);
  align-items:center;justify-content:center;flex-direction:column;gap:4px;
}
.burger i{display:block;width:17px;height:2px;background:var(--ink);transition:transform var(--t) var(--e-out),opacity var(--t)}
body.menu-open .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-open .burger i:nth-child(2){opacity:0}
body.menu-open .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- buttons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;border-radius:var(--r);font-weight:700;font-size:.97rem;
  cursor:pointer;border:1.5px solid transparent;white-space:nowrap;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast),
             transform var(--t-fast),box-shadow var(--t-fast);
}
.btn svg{width:18px;height:18px;flex:none}
/* one hard offset instead of a glow — it reads as something physically stacked */
.btn-primary{
  background:var(--violet);color:var(--on-violet);border-color:var(--violet);
  box-shadow:3px 3px 0 var(--stack);
}
.btn-primary:hover{background:var(--violet-2);border-color:var(--violet-2);transform:translate(1px,1px);box-shadow:2px 2px 0 var(--stack)}
.btn-primary:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--stack)}
.btn-ghost{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn-wa{background:var(--wa);color:var(--wa-ink);border-color:var(--wa);box-shadow:3px 3px 0 var(--stack)}
.btn-wa:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--stack);filter:brightness(1.06)}
.btn-wa:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--stack)}
.btn-lg{padding:16px 32px;font-size:1.02rem}
.nav-cta{padding:9px 17px;font-size:.88rem;box-shadow:2px 2px 0 var(--stack)}
.nav-cta:hover{box-shadow:1px 1px 0 var(--stack)}
.btn-block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s3)}

.tlink{
  display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--violet);
  border-bottom:1.5px solid transparent;padding-bottom:1px;
  transition:border-color var(--t-fast),gap var(--t) var(--e-out);
}
.tlink:hover{border-bottom-color:var(--violet);gap:11px}
/* the inline arrow carries no width of its own, so it must be given one */
.arw{width:17px;height:17px;flex:none}
[dir="rtl"] .tlink .arw{transform:scaleX(-1)}

/* ---------- cards ---------- */
.card{
  position:relative;background:var(--card);
  border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:var(--s6);
  transition:border-color var(--t-fast);
}
.card:hover{border-color:var(--ink)}
/* the flagship cards get a printed rule across the top, not a moving beam */
.beam{border-top:3px solid var(--violet)}

/* the icon stands on its own — a tinted rounded tile is template furniture */
.card-ico{margin-bottom:var(--s4);height:28px}
.card-ico svg{
  width:27px;height:27px;stroke:var(--violet);fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}

.badge{
  position:absolute;inset-block-start:0;inset-inline-end:var(--s6);
  transform:translateY(-50%);
  font-family:var(--font-body,inherit);
  font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  padding:4px 9px;background:var(--violet);color:var(--on-violet);
}
.badge.teal{background:var(--ink);color:var(--paper)}
.badge.soft{font-weight:700}
.badge.soft{background:var(--paper-2);color:var(--ink-2);border:1px solid var(--rule-2)}

/* price */
.price{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:var(--s4) 0}
.price b{
  font-family:var(--font-head,inherit);font-size:2.3rem;font-weight:900;
  letter-spacing:-.03em;color:var(--ink);line-height:1;
  /* a bare number range must not be reordered by the RTL paragraph around it */
  unicode-bidi:plaintext;
}
.price s{color:var(--ink-3);font-size:1rem}
.price i{font-style:normal;color:var(--ink-3);font-size:.9rem}

.feats{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;gap:9px}
.feats li{display:flex;gap:10px;align-items:flex-start;font-size:.93rem;color:var(--ink-2);line-height:1.5}
.feats li::before{
  content:"";flex:none;width:8px;height:8px;margin-top:.5em;background:var(--violet);
}

/* plain-language explainer */
.simply{
  margin-top:var(--s4);padding:var(--s4) var(--s5);
  background:var(--paper-2);
  border-inline-start:3px solid var(--violet);
  font-size:.93rem;color:var(--ink-2);line-height:1.62;
}
.simply b{
  color:var(--ink);display:block;margin-bottom:5px;font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;font-family:var(--font-body,inherit);
}

/* ---------- hero ----------
   Deliberately not a full screen. A page that starts with content visible
   under the headline behaves like a publication, not a pitch deck. */
.hero{
  position:relative;
  padding-block:clamp(56px,8vw,104px) clamp(48px,6vw,76px);
  border-bottom:1px solid var(--rule);
  overflow:hidden;
}
/* the trace field sits at the outer edge, drawn like a schematic */
#scene{
  position:absolute;inset-block:0;inset-inline-end:0;
  width:min(44%,600px);height:100%;z-index:0;
  opacity:0;transition:opacity 1.2s ease;pointer-events:none;
  /* solid at the outer edge of the page, dissolving towards the text, and
     fading before it reaches the rule at the foot of the hero */
  mask-image:linear-gradient(to var(--fade,right),#000 26%,transparent 97%),
             linear-gradient(to top,transparent 2%,#000 22%);
  -webkit-mask-image:linear-gradient(to var(--fade,right),#000 26%,transparent 97%),
                     linear-gradient(to top,transparent 2%,#000 22%);
  mask-composite:intersect;-webkit-mask-composite:source-in;
}
[dir="ltr"] #scene{--fade:left}
#scene.on{opacity:1}
.hero .wrap{position:relative;z-index:2}
.hero-inner{max-width:47ch}
.hero h1{margin-bottom:var(--s5)}
.hero .lead{margin-bottom:var(--s6);max-width:52ch}
.hero .btn-row{margin-bottom:var(--s7)}

/* stat strip — a rule of figures, set like a table */
.stats{display:flex;flex-wrap:wrap;gap:var(--s5) var(--s8);padding-top:var(--s5);border-top:1px solid var(--rule)}
.stat b{
  display:block;font-family:var(--font-head,inherit);font-weight:900;letter-spacing:-.03em;
  font-size:clamp(1.8rem,3.4vw,2.5rem);line-height:1;color:var(--ink);
  unicode-bidi:plaintext;
}
.stat span{font-size:.85rem;color:var(--ink-3);display:block;margin-top:6px;max-width:21ch}

/* ---------- marquee ---------- */
.marquee{
  overflow:hidden;position:relative;padding-block:13px;
  border-block:1px solid var(--rule);background:var(--paper-2);
}
.marquee-track{display:flex;gap:var(--s7);width:max-content;animation:slide 46s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-track span{
  display:inline-flex;align-items:center;gap:11px;white-space:nowrap;
  font-size:.8rem;font-weight:700;color:var(--ink-3);
  letter-spacing:.1em;text-transform:uppercase;
}
.marquee-track span::before{content:"";width:5px;height:5px;background:var(--violet);flex:none}

/* ---------- "which one am I" picker ---------- */
.pick{
  display:block;position:relative;padding:var(--s6);
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);
  transition:border-color var(--t-fast),background var(--t-fast);
}
.pick:hover{border-color:var(--ink)}
.pick h3{font-size:1.2rem;margin-bottom:8px}
.pick p{font-size:.93rem;color:var(--ink-2);margin-bottom:var(--s4)}

/* ---------- steps ---------- */
.steps{counter-reset:st;display:grid;gap:0}
.step{
  position:relative;padding-inline-start:74px;padding-block:var(--s5);
  border-bottom:1px solid var(--rule);
}
.step:last-child{border-bottom:0}
.step::before{
  counter-increment:st;content:counter(st,decimal-leading-zero);
  position:absolute;inset-inline-start:0;top:var(--s5);
  font-family:var(--font-head,inherit);font-weight:700;font-size:1.5rem;
  color:var(--violet);line-height:1;
}
.step h3{font-size:1.1rem;margin-bottom:5px}
.step p{font-size:.93rem;color:var(--ink-2);margin:0}

/* ---------- FAQ — a list of rules, not a stack of boxes ---------- */
.faq{display:grid;gap:0;max-width:820px;margin-inline:auto;border-top:1px solid var(--rule)}
.qa{border-bottom:1px solid var(--rule)}
.qa summary{
  cursor:pointer;list-style:none;padding-block:var(--s5);
  display:flex;align-items:flex-start;gap:var(--s4);
  font-weight:700;font-size:1.02rem;line-height:1.5;
  font-family:var(--font-head,inherit);
  transition:color var(--t-fast);
}
.qa summary:hover{color:var(--violet)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"";flex:none;width:14px;height:14px;margin-inline-start:auto;margin-top:7px;
  border-inline-end:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform var(--t) var(--e-out);
}
.qa[open] summary::after{transform:rotate(-135deg)}
.qa .ans{padding-bottom:var(--s5);color:var(--ink-2);font-size:.96rem;line-height:1.72;max-width:68ch}
.qa .ans a{color:var(--violet);border-bottom:1px solid var(--violet)}

/* ---------- contact / form ---------- */
.form{display:grid;gap:var(--s4)}
.field{display:grid;gap:6px}
.field label{font-size:.8rem;font-weight:700;color:var(--ink-2);letter-spacing:.04em}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border-radius:var(--r);
  background:var(--card);border:1px solid var(--rule-2);color:var(--ink);font-size:1rem;
  transition:border-color var(--t-fast);
}
.field textarea{min-height:118px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--ink);border-width:1px;box-shadow:inset 0 0 0 1px var(--ink);
}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C7468' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 15px center;background-size:17px;
}
[dir="ltr"] .field select{background-position:right 15px center}
.field select option{background:var(--card);color:var(--ink)}
.err{color:#B3261E;font-size:.82rem;display:none}
:root[data-theme="dark"] .err{color:#FF9A92}
.field.bad input,.field.bad select,.field.bad textarea{border-color:#B3261E}
.field.bad .err{display:block}

/* ---------- footer ---------- */
.footer{
  border-top:1px solid var(--rule);padding-block:var(--s8) var(--s6);
  background:var(--paper-2);
}
.footer-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:var(--s7)}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}
.footer h4{
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:var(--s4);font-family:var(--font-body,inherit);font-weight:700;
}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.footer a{color:var(--ink-2);font-size:.92rem;transition:color var(--t-fast)}
.footer a:hover{color:var(--violet)}
.footer-bot{
  margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between;align-items:center;
  font-size:.83rem;color:var(--ink-3);
}

/* ---------- floating whatsapp ---------- */
.fab{
  position:fixed;inset-block-end:22px;inset-inline-end:22px;z-index:70;
  width:56px;height:56px;border-radius:var(--r-lg);display:grid;place-items:center;
  background:var(--wa);border:1.5px solid var(--stack);box-shadow:3px 3px 0 var(--stack);
  transition:transform var(--t-fast),box-shadow var(--t-fast);
}
.fab:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--stack)}
.fab svg{width:28px;height:28px;fill:var(--wa-ink)}

/* ---------- scroll progress ---------- */
.prog{position:fixed;top:0;inset-inline-start:0;height:2px;z-index:90;width:0;background:var(--violet)}

/* ---------- scroll reveal ----------
   A short fade and nothing else. Content sliding up in a staggered cascade is
   the single most recognisable generated-page motion. */
.js .rv{opacity:0;transition:opacity .5s ease}
.js .rv.in{opacity:1}
.rv-d1,.rv-d2{transition-delay:.04s}
.rv-d3,.rv-d4{transition-delay:.08s}
.rv-d5,.rv-d6{transition-delay:.12s}

/* the word-by-word headline reveal is gone; the markup stays harmless */
.sw{display:inline}
.sw>i{font-style:inherit}

/* ---------- misc ---------- */
.hr{height:1px;background:var(--rule);border:0;margin-block:0}
.center{text-align:center}
.chip{
  display:inline-flex;align-items:center;gap:7px;font-size:.79rem;font-weight:600;
  padding:5px 11px;border-radius:var(--r-sm);
  background:transparent;border:1px solid var(--rule-2);color:var(--ink-2);
}
.chip.teal{background:var(--violet-wash);border-color:var(--violet);color:var(--violet)}
.chips{display:flex;flex-wrap:wrap;gap:8px}

.callout{
  padding:var(--s6);background:var(--violet-wash);
  border:1px solid var(--rule-2);border-inline-start:4px solid var(--violet);
}

.crumbs{font-size:.82rem;color:var(--ink-3);padding-top:var(--s5)}
.crumbs a:hover{color:var(--violet)}
.crumbs span{margin-inline:7px;opacity:.55}

/* big CTA band — a solid block of ink, reversed out */
.band{
  position:relative;padding:clamp(36px,5.5vw,72px);
  background:var(--band-bg);color:var(--band-fg);text-align:center;border-radius:var(--r-lg);
}
.band h2,.band h3{color:var(--band-fg)}
.band p{color:var(--band-fg);opacity:.78}
.band .btn-ghost{border-color:var(--band-fg);color:var(--band-fg)}
.band .btn-ghost:hover{background:var(--band-fg);color:var(--band-bg)}
.band .btn-wa,.band .btn-primary{box-shadow:3px 3px 0 rgba(0,0,0,.45)}
.band .tlink{color:var(--band-fg)}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .nav-links{
    position:fixed;inset:var(--nav-h) 0 auto;flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);
    padding:var(--s4) 22px calc(var(--s6) + env(safe-area-inset-bottom));
    border-bottom:1px solid var(--ink);
    transform:translateY(-10px);opacity:0;visibility:hidden;
    transition:opacity var(--t) var(--e-out),transform var(--t) var(--e-out),visibility var(--t);
    max-height:calc(100dvh - var(--nav-h));overflow-y:auto;margin:0;
  }
  body.menu-open .nav-links{opacity:1;visibility:visible;transform:none}
  .nav-links a{padding:14px 2px;font-size:1.04rem;border-bottom:1px solid var(--rule)}
  .nav-links a[aria-current="page"]::after{inset-inline:auto;width:0}
  .burger{display:flex}
  .nav-cta{display:none}
}
@media(max-width:640px){
  body{font-size:16.5px}
  section{padding-block:clamp(44px,9vw,64px)}
  .card{padding:var(--s5)}
  .stats{gap:var(--s5) var(--s6)}
  .stat{min-width:38%}
  .btn{width:100%;justify-content:center}
  .btn-row .btn{width:100%}
  .fab{width:52px;height:52px;inset-block-end:calc(16px + env(safe-area-inset-bottom))}
  .step{padding-inline-start:54px}
  .step::before{font-size:1.2rem}
  .hero-inner{max-width:none}
  /* on a phone the schematic lies across the foot of the hero instead */
  #scene{
    inset-inline:0;width:100%;height:52%;top:auto;bottom:0;
    mask-image:linear-gradient(to top,#000 0%,transparent 78%);
    -webkit-mask-image:linear-gradient(to top,#000 0%,transparent 78%);
    mask-composite:add;-webkit-mask-composite:source-over;
  }
}

/* ---------- 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;
  }
  .rv{opacity:1}
  #scene{display:none}
}

/* ---------- print ---------- */
@media print{
  #scene,.fab,.nav,.prog{display:none!important}
  body{background:#fff;color:#000}
}

/* ---------- theme switch ---------- */
.theme-btn{
  width:38px;height:38px;flex:none;display:grid;place-items:center;cursor:pointer;
  background:transparent;border:1px solid var(--rule-2);border-radius:var(--r);
  color:var(--ink-2);transition:border-color var(--t-fast),color var(--t-fast);
}
.theme-btn:hover{border-color:var(--ink);color:var(--ink)}
.theme-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.theme-btn .sun{display:none}
:root[data-theme="dark"] .theme-btn .sun{display:block}
:root[data-theme="dark"] .theme-btn .moon{display:none}

/* ---------- hand-drawn emphasis ----------
   A rough stroke under a word, drawn once when the line scrolls in. It is the
   one deliberately imperfect thing on the page. */
.hl{position:relative;white-space:nowrap}
.hl>svg{
  position:absolute;inset-inline-start:-2%;bottom:-.2em;width:104%;height:.4em;
  overflow:visible;pointer-events:none;
}
/* Amiri hangs far below the baseline, so the stroke has to drop with it */
[lang="ar"] .hl>svg{bottom:-.42em}
.hl>svg path{
  fill:none;stroke:var(--violet);stroke-width:6;stroke-linecap:round;opacity:.85;
  stroke-dasharray:420;stroke-dashoffset:420;
}
.js .rv.in .hl>svg path,.hl.in>svg path{animation:draw .9s var(--e-out) .2s forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- the businesses we build for ---------- */
.sectors{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
@media(max-width:900px){.sectors{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.sectors{grid-template-columns:repeat(2,1fr)}}
.sector{
  position:relative;overflow:hidden;aspect-ratio:3/4;
  border:1px solid var(--rule);border-radius:var(--r);
  transition:border-color var(--t-fast);
}
.sector:hover{border-color:var(--ink)}
.sector img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.04);
  transition:filter .5s var(--e-out);
}
.sector:hover img{filter:grayscale(0)}
.sector b{
  position:absolute;inset-inline:0;bottom:0;padding:8px 10px;
  font-size:.76rem;font-weight:700;background:var(--paper);color:var(--ink);
  border-top:1px solid var(--rule);
}

/* ---------- a note pinned at an angle, so the grid is not perfect ---------- */
.sticky-note{
  display:inline-block;padding:15px 19px;
  background:var(--violet-wash);border:1px solid var(--violet);
  font-size:.92rem;font-weight:600;line-height:1.55;max-width:34ch;
  transform:rotate(-1.2deg);
}
.sticky-note em{font-style:normal;color:var(--violet)}

/* ---------- editorial list ---------- */
.rows{display:grid;gap:0;border-top:1px solid var(--rule)}
.row-item{
  display:grid;grid-template-columns:auto 1fr;gap:var(--s5);align-items:start;
  padding-block:var(--s5);border-bottom:1px solid var(--rule);
}
.row-item .n{
  font-family:var(--font-head,inherit);font-size:1.05rem;font-weight:700;
  color:var(--violet);padding-top:2px;min-width:2.2em;
}
.row-item h3{font-size:1.1rem;margin-bottom:5px}
.row-item p{font-size:.93rem;color:var(--ink-2);margin:0;max-width:64ch}
@media(max-width:560px){.row-item{grid-template-columns:1fr;gap:6px}}

/* ---------- service page header ----------
   The price card rides along on desktop and simply stacks under the
   headline on a phone, where sticky would eat the screen. */
.svc-head{grid-template-columns:1.55fr .95fr;gap:48px;align-items:start}
.price-card{position:sticky;top:calc(var(--nav-h) + 20px)}
@media(max-width:900px){
  .svc-head{grid-template-columns:1fr;gap:32px}
  .price-card{position:static}
}

/* ---------- a standing offer, called out where the price is ---------- */
.deal{
  margin:16px 0 0;padding:12px 14px;
  background:var(--violet-wash);border-inline-start:3px solid var(--violet);
  font-size:.88rem;font-weight:600;line-height:1.55;color:var(--ink);
}