/* ============ LOGO EVENTS ============ */

/* Thmanyah (Arabic): the licence does not allow shipping the font files inside a website,
   so it is referenced only if installed on the visitor's device (local) or if you add licensed
   web files at assets/fonts/. Everyone else gets the Arabic fallback in the stack. */
@font-face{font-family:"Thmanyah";font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF;src:local("thmanyah sans Regular"),local("thmanyahsans-Regular")}
@font-face{font-family:"Thmanyah";font-weight:500;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF;src:local("thmanyah sans Medium"),local("thmanyahsans-Medium")}
@font-face{font-family:"Thmanyah";font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF;src:local("thmanyah sans Bold"),local("thmanyahsans-Bold")}
@font-face{font-family:"Thmanyah";font-weight:800;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF;src:local("thmanyah sans Black"),local("thmanyahsans-Black")}

:root{
  --lime:#c4ff0a; --ink:#0a0a0a; --ink2:#121212; --line:rgba(255,255,255,.12);
  --txt:#f4f4f2; --mute:#a1a1a0;
  --bold:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:"Helvetica Neue",Helvetica,Arial,"Inter",sans-serif;
  --r:24px; --gut:clamp(18px,4vw,56px); --hp:clamp(18px,3.6vw,56px);
  --ease:cubic-bezier(.22,1,.36,1);      /* soft deceleration */
  --ease-io:cubic-bezier(.65,0,.35,1);
  --lux:cubic-bezier(.22,.61,.36,1);     /* long, soft landing for hover lift */
}
[dir=rtl]{
  --bold:"Inter","Thmanyah","IBM Plex Sans Arabic",Arial,sans-serif;
  --body:"Thmanyah","IBM Plex Sans Arabic","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto!important;scroll-padding-top:20px}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{background:var(--ink);color:var(--txt);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,h5,.btn-pill,.pills a,.brand span,.f-giant,.lang-sw button{font-family:var(--bold)}
.wrap{width:min(1240px,100% - 2*var(--gut));margin-inline:auto}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;isolation:isolate;overflow:hidden;background:#0a0a0a}
.hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;animation:heroIn 2.4s var(--ease) both}
.hero-img{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover;object-position:center;background:#0a0a0a;will-change:transform;backface-visibility:hidden;transform:translate3d(0,0,0);opacity:.999}
@keyframes heroIn{from{opacity:0;transform:scale(1.14)}to{opacity:1;transform:scale(1)}}
/* dark overlay over the hero video: solid black at 55% so white text and buttons stay readable */
.hero-shade{position:absolute;inset:0;background:rgba(0,0,0,.55)}

/* green spectrum at the bottom to break the black */
.hero-glow{position:absolute;inset-inline:0;bottom:0;height:62%;pointer-events:none;background:
  radial-gradient(60% 80% at 20% 118%,rgba(196,255,10,.40),transparent 68%),
  radial-gradient(55% 70% at 85% 122%,rgba(120,255,60,.22),transparent 70%);
  animation:breathe 9s ease-in-out infinite alternate}
@keyframes breathe{from{opacity:.75;transform:translate3d(0,0,0)}to{opacity:1;transform:translate3d(0,-2%,0)}}

.nav-wrap{position:fixed;inset:0 0 auto 0;z-index:100;padding:clamp(16px,2.2vw,28px) var(--hp) 0;pointer-events:none;animation:fadeDown 1.2s var(--ease) .15s backwards}
@keyframes fadeDown{from{opacity:0;transform:translate3d(0,-18px,0)}to{opacity:1;transform:none}}
.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.nav .brand,.nav .pills,.nav .nav-end{pointer-events:auto}
.nav .brand{justify-self:start;transition:opacity .6s var(--ease),transform .7s var(--ease)}
.nav .nav-end{justify-self:end}
html.nav-scrolled .nav .brand{opacity:0;transform:translate3d(-10px,0,0);pointer-events:none}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.05rem;letter-spacing:.04em}
.brand img{height:34px;width:auto}
.pills{position:relative;isolation:isolate;display:flex;gap:6px;padding:5px;border-radius:999px;background:rgba(16,16,16,.62);backdrop-filter:blur(28px) saturate(150%);-webkit-backdrop-filter:blur(28px) saturate(150%);border:1px solid rgba(255,255,255,.07)}
.pills a{position:relative;z-index:1;display:block;padding:9px 18px;border-radius:999px;font-size:.86rem;font-weight:600;color:#d3d3d3;transition:color .5s var(--ease)}
.pills a:hover{color:#fff}
.pills a.active{color:#0a0a0a}
.pill-fx{position:absolute;left:0;top:0;width:0;height:0;border-radius:999px;pointer-events:none;z-index:0;list-style:none}
.pill-active{background:#fff;opacity:0}
.pill-active.ready{opacity:1;transition:transform .75s var(--ease),width .75s var(--ease),height .75s var(--ease)}
.pill-hover{background:rgba(255,255,255,.17);opacity:0;transition:opacity .45s var(--ease),transform .6s var(--ease),width .6s var(--ease),height .6s var(--ease)}
.pill-hover.show{opacity:1}
.nav-end{display:flex;align-items:center;gap:10px}

/* language switch */
.lang-sw{position:relative;flex:none;width:52px;height:52px;border-radius:50%;overflow:hidden;color:#d3d3d3;background:rgba(16,16,16,.62);backdrop-filter:blur(28px) saturate(150%);-webkit-backdrop-filter:blur(28px) saturate(150%);border:1px solid rgba(255,255,255,.07);transition:background .6s var(--ease),color .5s var(--ease),transform .5s var(--ease)}
.lang-sw:hover{background:rgba(255,255,255,.17);color:#fff}
.lang-sw:active{transform:scale(.93)}
.lang-sw:focus-visible,.pills a:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.ls-roll{position:absolute;inset:0;display:block}
.ls{position:absolute;inset:0;display:grid;place-items:center;font-weight:700;line-height:1;transition:transform .8s var(--ease),opacity .55s var(--ease),filter .7s var(--ease)}
.ls-ar{font-family:"IBM Plex Sans Arabic","Thmanyah",Arial,sans-serif;font-size:1rem;font-weight:600}
.ls-en{font-family:"Inter","Helvetica Neue",Arial,sans-serif;font-size:.82rem;letter-spacing:.06em}
/* shows the language you can switch TO: Arabic label while on English, English label while on Arabic */
.ls-ar{transform:none;opacity:1;filter:none}
.ls-en{transform:translate3d(0,70%,0);opacity:0;filter:blur(4px)}
[dir=rtl] .ls-ar{transform:translate3d(0,-70%,0);opacity:0;filter:blur(4px)}
[dir=rtl] .ls-en{transform:none;opacity:1;filter:none}
.burger{display:none;width:44px;height:44px;border-radius:50%;background:rgba(16,16,16,.62);backdrop-filter:blur(28px) saturate(150%);-webkit-backdrop-filter:blur(28px) saturate(150%);border:1px solid rgba(255,255,255,.07);position:relative}
.burger span{position:absolute;left:13px;right:13px;height:2px;background:#fff;transition:transform .6s var(--ease),top .6s var(--ease)}
.burger span:first-child{top:18px}.burger span:last-child{top:25px}
.burger[aria-expanded=true] span:first-child{top:21px;transform:rotate(45deg)}
.burger[aria-expanded=true] span:last-child{top:21px;transform:rotate(-45deg)}

.hero-grid{flex:1;display:flex;align-items:flex-end;justify-content:space-between;gap:30px;padding:clamp(30px,6vh,70px) var(--hp) clamp(20px,3vh,36px)}
.hero-copy{max-width:min(980px,100%)}
.hero-copy>*{animation:rise 1.4s var(--ease) both}
.hero-title{animation-delay:.35s!important}.hero-sub{animation-delay:.5s!important}.hero-copy .btn-pill{animation-delay:.65s!important}
.hero-card{animation:rise 1.4s var(--ease) .8s both}
@keyframes rise{from{opacity:0;transform:translate3d(0,34px,0);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
.hero-title{font-weight:800;font-size:clamp(1.9rem,6vw,5.6rem);line-height:1;;letter-spacing:-.02em;text-transform:uppercase}
[dir=rtl] .hero-title{line-height:1.15;letter-spacing:0;text-transform:none}
.hero-sub{margin:22px 0 30px;font-size:clamp(.95rem,1.5vw,1.25rem);letter-spacing:.06em;color:#e2e2e2;font-weight:500;max-width:34ch}
[dir=rtl] .hero-sub{letter-spacing:0}

/* buttons — arrow turns up ~45° on hover */
.btn-pill{display:inline-flex;align-items:center;gap:14px;padding:7px 7px 7px 26px;border-radius:999px;background:#fff;color:#0a0a0a;font-weight:700;font-size:.95rem;transition:background .6s var(--ease),transform .6s var(--ease),box-shadow .6s var(--ease)}
[dir=rtl] .btn-pill{padding:7px 26px 7px 7px}
.btn-pill .arrow{width:42px;height:42px;border-radius:50%;background:var(--ink);display:grid;place-items:center;transition:transform .6s var(--ease),background .6s var(--ease)}
.btn-pill .arrow svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .7s var(--ease)}
[dir=rtl] .btn-pill .arrow svg{transform:scaleX(-1)}
.btn-pill:hover{background:#e3ff7a;box-shadow:0 10px 40px -10px rgba(196,255,10,.55);transform:translate3d(0,-2px,0)}
.btn-pill:hover .arrow{transform:scale(1.06)}
.btn-pill:hover .arrow svg{transform:rotate(-45deg)}
[dir=rtl] .btn-pill:hover .arrow svg{transform:scaleX(-1) rotate(-45deg)}
.btn-pill.small{font-size:.82rem;padding:5px 5px 5px 18px}
[dir=rtl] .btn-pill.small{padding:5px 18px 5px 5px}
.btn-pill.small .arrow{width:32px;height:32px}.btn-pill.small .arrow svg{width:14px;height:14px}

.hero-card{width:230px;flex:none;padding:12px;border-radius:22px;background:rgba(255,255,255,.1);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.14);display:flex;flex-direction:column;gap:12px}
.hc-media{position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:#222}
.slide{position:absolute;inset:0;opacity:0;transform:scale(1.08);transition:opacity 1.3s var(--ease),transform 3.6s var(--ease)}
.slide.on{opacity:1;transform:scale(1)}
.slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hc-title{font-size:1.05rem;font-weight:700;padding-inline:4px}
.hero-card .btn-pill{align-self:flex-start}

.hero-foot{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:16px 0 clamp(14px,2vw,24px);border-top:1px solid rgba(255,255,255,.22);margin-inline:var(--hp);color:#e2e2e2;animation:rise 1.4s var(--ease) 1s both}
.hero-foot span:nth-child(2){text-align:center}
.hero-foot span:nth-child(3){text-align:end}
.hero-foot span{font-family:var(--bold);font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:.78rem}
[dir=rtl] .hero-foot span{letter-spacing:0;text-transform:none;font-size:.95rem}

/* ---------- CUSTOMERS STRIP (never pauses) ---------- */
.marquee{background:#000;overflow:hidden;padding:30px 0 26px;border-block:1px solid #1b1b1b}
.mq-head{display:flex;justify-content:center;margin-bottom:20px;padding-inline:var(--gut)}
.marquee-track{display:flex;align-items:center;width:max-content;animation:scroll var(--mq-dur,120s) linear infinite;will-change:transform;backface-visibility:hidden}
@keyframes scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
[dir=rtl] .marquee-track{animation-name:scrollr}
@keyframes scrollr{from{transform:translate3d(0,0,0)}to{transform:translate3d(50%,0,0)}}
.m-item{flex:none;display:flex;align-items:center;justify-content:center;width:330px;height:84px}
.m-item img{width:auto;height:auto;max-width:200px;max-height:76px;object-fit:contain}
.m-ph{border:1px dashed rgba(255,255,255,.25);border-radius:10px;height:44px;padding:0 22px;display:grid;place-items:center;font:600 .72rem var(--bold);letter-spacing:.18em;color:#6c6c6c;text-transform:uppercase;white-space:nowrap}

/* ---------- shared ---------- */
section{position:relative}
.pill-tag{display:inline-block;padding:7px 16px;border:1px solid var(--line);border-radius:999px;font:600 .8rem var(--bold);color:var(--txt);background:rgba(255,255,255,.03)}
.big{font-weight:700;font-size:clamp(1.9rem,4.4vw,3.6rem);line-height:1.1;letter-spacing:-.02em}
[dir=rtl] .big{line-height:1.35;letter-spacing:0}
.big em{font-style:normal;color:#6c6c6c}
.lead{color:var(--mute);font-size:1.08rem;max-width:62ch}
.sec-head{display:grid;grid-template-columns:1fr;justify-items:center;text-align:center;gap:22px;margin-bottom:clamp(36px,5vw,64px)}
.sec-head .big{max-width:22ch}
.sec-head .lead{max-width:62ch}

/* ---------- ABOUT ---------- */
.about{padding:clamp(70px,10vw,140px) 0}
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:24px;align-items:stretch}
.about-logo{position:relative;display:grid;place-items:center;min-height:340px;padding:44px;border-radius:var(--r);border:1px solid var(--line);overflow:hidden;background:#0d0d0d}
.about-logo::before{content:"";position:absolute;inset:-20%;background:
  radial-gradient(60% 55% at 50% 100%,rgba(196,255,10,.34),transparent 70%),
  radial-gradient(40% 40% at 20% 20%,rgba(196,255,10,.10),transparent 70%);animation:breathe 8s ease-in-out infinite alternate}
.about-logo .lg-wrap{position:relative;width:min(78%,360px)}
.pillars{display:grid;gap:16px}
.pillar{position:relative;isolation:isolate;display:flex;gap:22px;align-items:center;padding:26px 28px;border:1px solid var(--line);border-radius:var(--r);background:var(--ink2);transform:translate3d(0,0,0) scale(1);transition:transform .82s var(--lux),opacity 1.2s var(--ease) var(--d,0s),translate 1.3s var(--ease) var(--d,0s)}
.pillar::before,.card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid rgba(196,255,10,.55);opacity:0;transition:opacity .82s var(--lux);pointer-events:none}
.pillar::after,.card::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 26px 64px -26px rgba(196,255,10,.34);opacity:0;transition:opacity .82s var(--lux);pointer-events:none;z-index:-1}
.pillar b{color:var(--lime);font:700 .95rem var(--bold);letter-spacing:.1em}
.pillar h4{font-size:1.25rem;margin-bottom:4px}
.pillar p{color:var(--mute);font-size:.95rem}
@media (hover:hover){
  .pillar:hover{transform:translate3d(0,-7px,0) scale(1.022);z-index:2}
  .card:hover{transform:translate3d(0,-9px,0) scale(1.025);z-index:3}
  .pillar:hover::before,.pillar:hover::after,.card:hover::before,.card:hover::after{opacity:1}
  .card:hover .c-img svg.art,.card:hover .c-img img{transform:scale(1.06)}
  .proj:hover{transform:translate3d(0,-8px,0) scale(1.03);z-index:2}
  .proj:hover .p-img img,.proj:hover .p-img .ph{transform:scale(1.06)}
  .proj:hover .p-img::after{opacity:1}
}

/* ---------- SERVICES ---------- */
.services{padding:clamp(40px,6vw,90px) 0 0;background:var(--ink);overflow-x:clip}
.services>.wrap{position:relative}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{position:relative;isolation:isolate;border-radius:26px;perspective:1800px;transform:translate3d(0,0,0) scale(1);transition:transform .82s var(--lux),opacity 1.2s var(--ease) var(--d,0s),translate 1.3s var(--ease) var(--d,0s)}

.c-img{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#1d1d1d}
.c-img svg.art,.c-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.25s var(--lux)}

.c-img .chip{position:absolute;top:12px;inset-inline-start:12px;background:#fff;color:#0a0a0a;font:600 .72rem var(--bold);padding:5px 12px;border-radius:999px;z-index:1}
.c-body{padding:18px 14px 14px;display:flex;flex-direction:column;gap:10px;flex:1}
.c-body h3{font-size:1.28rem;line-height:1.25}
.c-body p{color:var(--mute);font-size:.95rem;flex:1}
.c-body .btn-pill{align-self:flex-start;margin-top:10px;gap:10px;font-size:.78rem;padding:4px 4px 4px 16px}
[dir=rtl] .c-body .btn-pill{padding:4px 16px 4px 4px}
.c-body .btn-pill .arrow{width:28px;height:28px}.c-body .btn-pill .arrow svg{width:12px;height:12px}

/* feature strip — pulled toward the centre, icon on top */
.features{margin-top:clamp(56px,7vw,100px);background:#080808;border-block:1px solid #1a1a1a;display:grid;grid-template-columns:repeat(4,1fr);padding-inline:max(var(--gut),calc((100% - 1040px)/2))}
.feat{padding:42px 14px 40px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;border-inline-end:1px solid #161616;transition:background .8s var(--ease),transform .8s var(--ease),opacity 1.2s var(--ease) var(--d,0s),translate 1.3s var(--ease) var(--d,0s)}
.feat:first-child{border-inline-start:1px solid #161616}
.feat:hover{background:#111}
.feat svg.ic{width:46px;height:46px;flex:none;stroke:var(--lime);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .8s var(--ease)}
.feat:hover svg.ic{transform:translate3d(0,-4px,0) scale(1.08)}
.feat h4{font:700 .86rem var(--bold);letter-spacing:.2em;text-transform:uppercase;line-height:1.75}
[dir=rtl] .feat h4{letter-spacing:.02em;text-transform:none;font-size:1.05rem}
.feat a{display:inline-flex;gap:8px;align-items:center;margin-top:10px;font-size:.88rem;color:#dadada;transition:color .5s var(--ease)}
.feat a svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .7s var(--ease)}
[dir=rtl] .feat a svg{transform:scaleX(-1)}
.feat a:hover{color:var(--lime)}
.feat a:hover svg{transform:rotate(-45deg)}
[dir=rtl] .feat a:hover svg{transform:scaleX(-1) rotate(-45deg)}

/* ---------- PORTFOLIO ---------- */
.portfolio{padding:clamp(70px,10vw,140px) 0;background:#0d0908}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.proj{position:relative;display:block;transform:translate3d(0,0,0) scale(1);transition:transform 1.3s var(--lux),opacity 1.2s var(--ease) var(--d,0s),translate 1.3s var(--ease) var(--d,0s)}


.p-img{position:relative;aspect-ratio:3/2;border-radius:14px;overflow:hidden;background:#1b1512}

.p-img::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(196,255,10,.55);opacity:0;transition:opacity 1.3s var(--lux);pointer-events:none}
.p-img img,.p-img .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 2s var(--lux)}

.ph{display:grid;place-items:center;font:700 .8rem var(--bold);letter-spacing:.2em;color:#606060;text-transform:uppercase;background:linear-gradient(135deg,var(--c1),var(--c2))}
.p-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 4px 0}
.p-meta h3{font-size:.98rem;font-weight:600}
.p-tags span{font:500 .62rem "SF Mono",ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.1);color:#cecece}
[dir=rtl] .p-tags span{font-family:var(--body);letter-spacing:0;text-transform:none;font-size:.72rem}

/* ---------- FOOTER ---------- */
.footer{background:#121212;position:relative;overflow:hidden;padding-top:clamp(54px,7vw,90px);border-top:1px solid rgba(255,255,255,.18)}
.f-top{display:flex;justify-content:space-between;gap:50px;flex-wrap:wrap}
.f-brand{max-width:520px}
.f-brand .lg-wrap{width:120px}
.f-brand p{margin-top:22px;color:#dadada;font-size:.95rem}
.f-info{display:grid;gap:12px;margin-top:26px;justify-items:start}
.f-info span{display:inline-flex;align-items:center;gap:11px;font-size:.92rem;color:#fff;user-select:text;-webkit-user-select:text;cursor:text}
.f-info svg{width:20px;height:20px;flex:none;stroke:#fff;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.f-info bdi{direction:ltr;unicode-bidi:isolate}
.f-contact{display:flex;gap:26px;flex-wrap:wrap;margin-top:clamp(26px,3.5vw,44px)}
.f-contact a{display:inline-flex;align-items:center;gap:9px;font-size:.9rem;transition:color .5s var(--ease),transform .6s var(--ease)}
.f-contact a:hover{color:var(--lime);transform:translate3d(0,-2px,0)}
.f-contact svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.f-cols{display:flex;gap:clamp(40px,7vw,110px)}
.f-cols h5{font:500 .8rem var(--bold);color:#919191;text-transform:uppercase;margin-bottom:18px}
[dir=rtl] .f-cols h5{text-transform:none;font-size:.95rem}
.f-cols li+li{margin-top:13px}
.f-cols li{font-size:.9rem}
.f-cols a{font-size:.9rem;transition:color .5s var(--ease)}
.f-cols a:hover{color:var(--lime)}
.f-bottom{margin-top:clamp(40px,5vw,70px);padding-top:22px;border-top:1px solid rgba(255,255,255,.18);font-size:.82rem;color:#919191;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.f-giant{display:block;width:100%;height:auto;margin-top:clamp(30px,5vw,70px);user-select:none;direction:ltr;overflow:hidden}
.f-giant text{font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700}

/* endless animations stop while their section is off screen (less work per frame while scrolling) */
.is-off,.is-off::before,.is-off .hero-glow,.is-off .marquee-track{animation-play-state:paused!important}

/* ---------- INTRO LOADER: logo rises on a light screen, the screen lifts away, the logo turns white and flies into the nav ---------- */
.loader{display:none;position:fixed;inset:0;z-index:9999;pointer-events:none;animation:ldFail .01s 9s forwards}
@keyframes ldFail{to{visibility:hidden}}
html.ld-active .loader{display:block}
/* native scrollbar hidden (page uses the full width); a slim transparent custom one (.sb) is drawn by main.js */
html,html.lenis.lenis-stopped{overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}
.ld-white,.ld-curtain{position:absolute;inset:0}
.ld-curtain{background:#f0eee9;clip-path:inset(0 0 0 0)}
.ld-logo{--lw:clamp(210px,32vw,480px);position:absolute;left:calc(50% - var(--lw) / 2);top:calc(50% - var(--lw) * .383);width:var(--lw);aspect-ratio:900/689;transform-origin:0 0;will-change:transform}
.ld-curtain .ld-logo{filter:brightness(.04)}
.ld-band{position:absolute;left:0;width:100%;top:calc(var(--t) * 100%);height:calc(var(--f) * 100%);overflow:hidden}
.ld-in{position:absolute;left:0;width:100%;top:calc(var(--t) / var(--f) * -100%);height:calc(100% / var(--f));clip-path:inset(calc(var(--t) * 100%) 0 calc((1 - var(--t) - var(--f)) * 100%) 0)}
.ld-in img{display:block;width:100%;height:100%;max-width:none}
.ld-curtain .ld-in{transform:translate3d(0,104%,0)}
.ld-play .ld-curtain .ld-in{animation:ldRise 1s var(--ease) calc(var(--i) * .1s) both}
@keyframes ldRise{from{transform:translate3d(0,104%,0)}to{transform:translate3d(0,0,0)}}
/* hold the page behind the loader, release it in stages from main.js */
html.is-loading:not(.ld-lift) .hero-bg,html.is-loading:not(.ld-lift) .nav-wrap,
html.is-loading .hero-copy>*,html.is-loading .hero-card,html.is-loading .hero-foot{animation-play-state:paused}
html.ld-active .brand{visibility:hidden}
html.ld-done .brand span{animation:ldFade .8s var(--ease) both}
@keyframes ldFade{from{opacity:0;transform:translate3d(-8px,0,0)}to{opacity:1;transform:none}}
[dir=rtl].ld-done .brand span,html[dir=rtl].ld-done .brand span{animation-name:ldFadeR}
@keyframes ldFadeR{from{opacity:0;transform:translate3d(8px,0,0)}to{opacity:1;transform:none}}

/* ---------- brand logo: white -> full colour after the intro (diagonal wipe + soft glow) ---------- */
.brand-mark{position:relative;flex:none;height:34px;border-radius:2px}
.brand-mark img{display:block;height:34px;width:auto}
.brand-mark .col{position:absolute;left:0;top:0;clip-path:polygon(-50% 0,-10% 0,-50% 100%,-50% 100%);will-change:clip-path}
html.logo-color .brand-mark{animation:lgGlow 2.2s var(--ease-io) both}
html.logo-color .brand-mark .col{animation:lgWipe 1.5s var(--ease-io) 0s both}
@keyframes lgWipe{
  from{clip-path:polygon(-50% 0,-10% 0,-50% 100%,-50% 100%)}
  to{clip-path:polygon(-50% 0,160% 0,120% 100%,-50% 100%)}
}
@keyframes lgGlow{
  0%{filter:drop-shadow(0 0 0 rgba(196,255,10,0))}
  45%{filter:drop-shadow(0 0 12px rgba(196,255,10,.6))}
  100%{filter:drop-shadow(0 0 0 rgba(196,255,10,0))}
}
.brand .lg{font-weight:inherit;color:#fff;transition:color 1.3s var(--ease-io) .3s}
html.logo-color .brand .lg{color:var(--lime)}
@media (prefers-reduced-motion:reduce){
  .brand-mark .col{clip-path:none;opacity:0}
  html.logo-color .brand-mark .col{opacity:1}
  html.logo-color .brand-mark,html.logo-color .brand-mark .col{animation:none}
  .brand .lg{transition:none}
}

/* ---------- big logos (About + footer): same white -> colour wipe, starts when they scroll into view ---------- */
.lg-wrap{position:relative}
.lg-wrap img{display:block;width:100%;height:auto}
.lg-wrap .col{position:absolute;left:0;top:0;height:100%;clip-path:polygon(-50% 0,-10% 0,-50% 100%,-50% 100%);will-change:clip-path}
.lg-wrap.lg-on{animation:lgGlow 2.4s var(--ease-io) both}
.lg-wrap.lg-on .col{animation:lgWipe 1.7s var(--ease-io) 0s both}
@media (prefers-reduced-motion:reduce){
  .lg-wrap .col{clip-path:none;opacity:0}
  .lg-wrap.lg-on,.lg-wrap.lg-on .col{animation:none}
  .lg-wrap.lg-on .col{opacity:1}
}

/* ---------- giant footer wordmark: rises slowly from below (end frame = the resting position, bottom ~20% cropped) ---------- */
.f-giant.pre text{transform:translateY(100px);opacity:0}
.f-giant.pre.in text{transform:none;opacity:1;transition:transform 2.6s cubic-bezier(.22,1,.36,1),opacity .7s ease-out}
@media (prefers-reduced-motion:reduce){.f-giant.pre text{transform:none;opacity:1}}

/* ---------- scroll smoothness: keep everything that moves on the GPU compositor ---------- */
html{-webkit-text-size-adjust:100%;overflow-anchor:none}
.rv:not(.in){will-change:opacity,translate}
.proj,.pillar,.feat{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.p-img img,.c-img img,.c-img svg.art{transform:translateZ(0);backface-visibility:hidden}
.hero-card{transform:translateZ(0)}
.marquee,.gallery,.cards{contain:layout style}

/* ---------- reveal (opacity + independent translate: no blur filters, no transform clash with hover) ---------- */
.card.flash::before,.card.flash::after{opacity:1}
.rv{opacity:0;translate:0 40px;transition:opacity 1.2s var(--ease) var(--d,0s),translate 1.3s var(--ease) var(--d,0s)}
.rv.in{opacity:1;translate:0 0}
/* .rv (reveal) would otherwise replace the hover transition of these elements: keep both */
.rv.proj{transition:transform 1.3s var(--lux),opacity 1.2s var(--ease) var(--d,0s),translate 1.3s var(--ease) var(--d,0s)}
.rv.card,.rv.pillar{transition:transform .82s var(--lux),opacity 1.2s var(--ease) var(--d,0s),translate 1.3s var(--ease) var(--d,0s)}
.rv.feat{transition:background .8s var(--ease),transform .8s var(--ease),opacity 1.2s var(--ease) var(--d,0s),translate 1.3s var(--ease) var(--d,0s)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .rv{opacity:1;translate:none}
  html{scroll-behavior:auto}
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .features{grid-template-columns:repeat(2,1fr)}
  .feat:nth-child(2){border-inline-end:1px solid #161616}
  .feat:nth-child(-n+2){border-bottom:1px solid #161616}
}
@media (max-width:900px){
  .pills{position:absolute;top:calc(100% + 6px);inset-inline:var(--hp);flex-direction:column;border-radius:22px;background:rgba(10,10,10,.94);padding:8px;opacity:0;visibility:hidden;transform:translate3d(0,-10px,0);transition:opacity .6s var(--ease),transform .7s var(--ease),visibility .6s}
  .pills.open{opacity:1;visibility:visible;transform:none}
  .pills a{padding:13px 18px}
  .burger{display:block}
  .cards{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .proj:last-child:nth-child(odd){grid-column:1/-1}
  .proj:last-child:nth-child(odd) .p-img{aspect-ratio:16/9}

  .hero-grid{flex-direction:column;align-items:flex-start;justify-content:flex-end}
  .about-grid{grid-template-columns:1fr}
  .about-logo{min-height:260px}
}
@media (max-width:640px){
  .cards,.gallery{grid-template-columns:1fr}
  .features{grid-template-columns:1fr 1fr;padding-inline:0}
  .hero-card{width:100%;flex-direction:row;align-items:center}
  .hc-media{width:110px;flex:none}
  .hc-title{flex:1}
  .hero-card .btn-pill.small span{display:none}
  .hero-card .btn-pill.small{padding:5px}
  .brand span{display:none}
  .f-cols{gap:40px}
  .pillar{padding:20px}
  .proj:last-child:nth-child(odd){grid-column:auto}
  .proj:last-child:nth-child(odd) .p-img{aspect-ratio:3/2}
  .m-item{width:250px;height:70px}
  .m-item img{max-width:140px;max-height:60px}
  .gallery{gap:20px}
}


/* ============ fixed nav, figures, decoration (v3) ============ */
html{scroll-padding-top:90px}

.srv-intro{display:grid;grid-template-columns:1fr;justify-items:center;gap:clamp(8px,2vw,24px);margin-bottom:clamp(32px,5vw,64px)}
.srv-intro .sec-head{margin-bottom:0}


/* outline logo ornaments */
.about,.services,.portfolio,.footer{position:relative}
.about,.portfolio{overflow:hidden}
.about>.wrap,.portfolio>.wrap,.footer>.wrap{position:relative;z-index:1}
.about::before,.services::after,.portfolio::before,.portfolio::after,.footer::before{content:"";position:absolute;z-index:0;pointer-events:none;aspect-ratio:1352/1112;background:url(assets/logo-outline.png) center/contain no-repeat}
.about::before{top:-5%;inset-inline-end:-15%;width:min(860px,100vw);opacity:.1}
.services::after{top:-4%;inset-inline-start:-15%;width:min(860px,100vw);opacity:.1}
.portfolio::before{top:4%;inset-inline-start:-14%;width:min(820px,100vw);opacity:.075}
.portfolio::after{top:3%;inset-inline-end:-15%;width:min(860px,100vw);opacity:.1}
.footer::before{top:-12%;inset-inline-end:-10%;width:min(780px,100vw);opacity:.07}


@media (max-width:1100px){
}
@media (max-width:900px){
  .nav{grid-template-columns:1fr auto}
  .pills{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
}
@media (max-width:640px){
  .lang-sw{width:46px;height:46px}
}

/* ============ lightbox ============ */
.proj{cursor:zoom-in}
.lb{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:clamp(16px,4vw,56px);background:rgba(6,6,6,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s}
.lb.open{opacity:1;visibility:visible}
.lb figure{margin:0;display:grid;gap:14px;justify-items:center;max-width:100%;max-height:100%;transform:scale(.96);transition:transform .6s var(--ease)}
.lb.open figure{transform:none}
.lb img{display:block;max-width:min(1400px,100%);max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px);width:auto;height:auto;object-fit:contain;border-radius:14px;box-shadow:0 30px 80px -20px rgba(0,0,0,.8)}
.lb figcaption{color:#e6e6e6;font:600 1rem var(--bold);text-align:center}
.lb-x{position:absolute;top:clamp(14px,2.4vw,28px);inset-inline-end:clamp(14px,2.4vw,28px);width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.1);color:#fff;display:grid;place-items:center;transition:background .4s var(--ease),transform .4s var(--ease)}
.lb-x:hover{background:rgba(255,255,255,.22);transform:rotate(90deg)}
.lb-x svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;stroke-linecap:round;fill:none}

/* ============ transparent scroll indicator (part of the page) ============ */
.sb{position:fixed;top:0;bottom:0;inset-inline-end:0;width:22px;z-index:250;pointer-events:none;opacity:0;transition:opacity .5s var(--ease)}
.sb.on,.sb.drag{opacity:1}
.sb-thumb{position:absolute;top:0;inset-inline-end:5px;width:4px;min-height:44px;border-radius:99px;background:rgba(255,255,255,.28);pointer-events:auto;cursor:grab;touch-action:none;transition:width .3s var(--ease),inset-inline-end .3s var(--ease),background .3s var(--ease)}
.sb-thumb::before{content:"";position:absolute;inset:0 -9px}
@media (hover:hover){.sb-thumb:hover{width:8px;inset-inline-end:3px;background:rgba(255,255,255,.5)}}
.sb.drag .sb-thumb{width:8px;inset-inline-end:3px;background:var(--lime);cursor:grabbing}
html.ld-active .sb,html.is-loading .sb{display:none}
@media (max-width:640px){.sb-thumb{width:3px;inset-inline-end:3px}}

/* ============ service cards: luxury flip ============ */
.card-inner{display:grid;height:100%;transform-style:preserve-3d;will-change:transform}
.card.is-flipped .card-inner{transform:rotateY(180deg)}
.card-face{grid-area:1/1;min-width:0;border-radius:26px;display:flex;flex-direction:column;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.card-front{padding:10px;background:var(--ink2);border:1px solid #1c1c1c}
.card-back{transform:rotateY(180deg);position:relative;overflow:hidden;padding:30px 28px 26px;gap:12px;border:1px solid rgba(196,255,10,.32);
  background:radial-gradient(120% 70% at 85% 115%,rgba(196,255,10,.16),transparent 60%),linear-gradient(160deg,#171717 0%,#0e0e0e 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.card-back::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.07) 50%,transparent 65%);transform:translateX(-120%)}
.card.is-flipped .card-back::after{transform:translateX(120%);transition:transform 1.5s var(--ease) .35s}
.cb-tag{align-self:flex-start;background:var(--lime);color:#0a0a0a;font:700 .7rem var(--bold);letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
[dir=rtl] .cb-tag{letter-spacing:0;text-transform:none}
.cb-title{font:700 1.3rem/1.25 var(--bold);margin-top:4px;padding-inline-end:56px}
.cb-p{color:#cfcfcd;font-size:.9rem;line-height:1.6}
.cb-list{list-style:none;display:grid;gap:8px;margin:2px 0 4px;padding:0}
.cb-list li{position:relative;padding-inline-start:20px;color:var(--txt);font-size:.86rem;line-height:1.45}
.cb-list li::before{content:"";position:absolute;inset-inline-start:0;top:.5em;width:7px;height:7px;border-radius:50%;background:var(--lime)}
.cb-actions{margin-top:auto;padding-top:10px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cb-actions .btn-pill{gap:10px;font-size:.78rem;padding:4px 4px 4px 16px}
[dir=rtl] .cb-actions .btn-pill{padding:4px 16px 4px 4px}
.cb-actions .btn-pill .arrow{width:28px;height:28px}.cb-actions .btn-pill .arrow svg{width:12px;height:12px}
.cb-back{display:inline-flex;align-items:center;gap:8px;color:#d6d6d4;font:600 .82rem var(--bold);padding:9px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.16);transition:color .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease)}
.cb-back svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--ease)}
[dir=rtl] .cb-back svg{transform:scaleX(-1)}
@media (hover:hover){.cb-back:hover{color:var(--lime);border-color:rgba(196,255,10,.55);background:rgba(196,255,10,.06)}.cb-back:hover svg{transform:translateX(-3px)}[dir=rtl] .cb-back:hover svg{transform:scaleX(-1) translateX(-3px)}}
/* back-face content rises in one after another, once the card has turned past halfway */
.cb-i{opacity:0;transform:translate3d(0,14px,0);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.card.is-flipped .cb-i{opacity:1;transform:none;transition:opacity .8s var(--ease) calc(.55s + var(--s,0)*.075s),transform .9s var(--ease) calc(.55s + var(--s,0)*.075s)}
.card.is-flipped::before,.card.is-flipped::after{opacity:1}
.card.is-flipped{z-index:4}
/* green frame + glow: soft fade-out as the flip starts, slow graded fade-in when it ends */
.card.is-turning::before,.card.is-turning::after{opacity:0!important;transition:opacity .5s cubic-bezier(.4,0,.6,1)}
.card.is-flipped:not(.is-turning)::before,.card.is-flipped:not(.is-turning)::after{transition:opacity 1.3s var(--lux)}
@media (max-width:640px){.card-back{padding:26px 22px 22px}}
@media (prefers-reduced-motion:reduce){.card-inner{transition:none}.card-back::after{display:none}.cb-i{opacity:1;transform:none;transition:none}}

/* ---------- lime glow cues ---------- */
.f-credit{color:var(--mute);text-decoration:none;transition:color .25s}
.f-credit b{font-weight:600;color:var(--ice)}
.f-credit:hover,.f-credit:focus-visible,.f-credit:hover b,.f-credit:focus-visible b{color:var(--lime)}
/* footer email + phone */
.f-info span{position:relative;isolation:isolate}
.f-info.glow span{animation:cGlowTxt 2.2s var(--ease-io,ease-in-out) both}
.f-info.glow span svg{animation:cGlowIc 2.2s var(--ease-io,ease-in-out) both}
.f-info.glow span:nth-child(2),.f-info.glow span:nth-child(2) svg{animation-delay:2s}
@keyframes cGlowTxt{
  0%,100%{color:#fff;text-shadow:0 0 0 rgba(255,255,255,0)}
  38%{color:#fff;text-shadow:0 0 4px rgba(255,255,255,1),0 0 19px rgba(255,255,255,.74),0 0 46px rgba(255,255,255,.38)}
}
@keyframes cGlowIc{
  0%,100%{stroke:#fff;filter:none;transform:scale(1)}
  38%{stroke:#fff;filter:drop-shadow(0 0 3px rgba(255,255,255,1)) drop-shadow(0 0 12px rgba(255,255,255,.8));transform:scale(1.12)}
}
/* "Learn more" button of the service the visitor was sent to: the hover look, flashed once */
.btn-pill.glow{animation:btnHover 1.5s var(--ease-io,ease-in-out) both}
.btn-pill.glow .arrow{animation:btnHoverArrow 1.5s var(--ease-io,ease-in-out) both}
.btn-pill.glow .arrow svg{animation:btnHoverIcon 1.5s var(--ease-io,ease-in-out) both}
[dir=rtl] .btn-pill.glow .arrow svg{animation-name:btnHoverIconRtl}
@keyframes btnHover{0%,100%{background:#fff;box-shadow:none;transform:none}35%,60%{background:#e3ff7a;box-shadow:0 10px 40px -10px rgba(196,255,10,.55);transform:translate3d(0,-2px,0)}}
@keyframes btnHoverArrow{0%,100%{transform:none}35%,60%{transform:scale(1.06)}}
@keyframes btnHoverIcon{0%,100%{transform:none}35%,60%{transform:rotate(-45deg)}}
@keyframes btnHoverIconRtl{0%,100%{transform:scaleX(-1)}35%,60%{transform:scaleX(-1) rotate(-45deg)}}
@media (prefers-reduced-motion:reduce){.f-info.glow span,.f-info.glow span svg,.btn-pill.glow,.btn-pill.glow .arrow{animation:none}}

html.lenis,html.lenis body{scroll-behavior:auto!important}

.services>.wrap{position:relative;z-index:1}
.services>.features{position:relative;z-index:1}


/* ---------- floating WhatsApp button (same pill as "Contact Us", WhatsApp mark instead of the arrow) ---------- */
.wa-fab{position:fixed;z-index:120;inset-inline-start:var(--hp);bottom:calc(clamp(16px,2.2vw,28px) + env(safe-area-inset-bottom,0px));
  opacity:0;visibility:hidden;pointer-events:none;transform:translate3d(-10px,0,0);
  transition:opacity .6s var(--ease),transform .7s var(--ease),visibility 0s linear .7s}
[dir=rtl] .wa-fab{transform:translate3d(10px,0,0)}
.wa-fab.on{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .6s var(--ease),transform .7s var(--ease),visibility 0s}
html.ld-active .wa-fab,html.is-loading .wa-fab{display:none}
.wa-btn{position:relative;gap:12px;font-size:.9rem;padding:6px 6px 6px 22px;box-shadow:0 14px 36px -14px rgba(0,0,0,.9)}
[dir=rtl] .wa-btn{padding:6px 22px 6px 6px}
.wa-btn .arrow{width:40px;height:40px}
/* soft lime pulse around the pill, once per cycle, only while visible */
.wa-btn::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;border:1px solid rgba(196,255,10,.55);opacity:0}
.wa-fab.on .wa-btn::after{animation:waPulse 4.8s var(--ease) 1.2s infinite}
@keyframes waPulse{0%{opacity:.9;transform:scale(1)}55%,100%{opacity:0;transform:scale(1.28,1.7)}}
/* the mark: lime on hover, and a short "incoming call" wiggle at the start of every cycle */
.btn-pill .arrow svg.wa-ic{width:20px;height:20px;fill:#fff;stroke:none;transform:none;transform-origin:50% 55%;transition:fill .5s var(--ease)}
[dir=rtl] .btn-pill .arrow svg.wa-ic,[dir=rtl] .btn-pill:hover .arrow svg.wa-ic,.btn-pill:hover .arrow svg.wa-ic{transform:none}
.wa-btn:hover .arrow svg.wa-ic{fill:var(--lime)}
.wa-fab.on .wa-ic{animation:waRing 4.8s var(--ease) 1.2s infinite}
@keyframes waRing{0%{transform:scale(1) rotate(0)}6%{transform:scale(1.14) rotate(-12deg)}12%{transform:scale(1.14) rotate(10deg)}18%{transform:scale(1.1) rotate(-7deg)}24%{transform:scale(1.06) rotate(4deg)}30%,100%{transform:scale(1) rotate(0)}}
@media (max-width:640px){.wa-btn{font-size:.82rem;gap:10px;padding:5px 5px 5px 18px}[dir=rtl] .wa-btn{padding:5px 18px 5px 5px}.wa-btn .arrow{width:36px;height:36px}}
@media (prefers-reduced-motion:reduce){.wa-fab.on .wa-btn::after,.wa-fab.on .wa-ic{animation:none}.wa-fab{transition:opacity .3s}}

/* balanced headings (no lonely last word) */
.big,.hero-title{text-wrap:balance}

/* ---------- frosted glass (nav pills, language button, burger): always on ----------
   1) the nav bar entrance animation no longer keeps an opacity/transform animation attached after it ends
      (a lingering one turns the bar into a "backdrop root" and the browser then drops the blur at random);
   2) each glass element gets its own stable compositing layer so page scrolling / card flips can't switch it off. */
.pills,.lang-sw,.burger{
  transform:translateZ(0);
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  background:rgba(16,16,16,.58);
  backdrop-filter:blur(28px) saturate(150%);-webkit-backdrop-filter:blur(28px) saturate(150%);
}
.lang-sw:hover{background:rgba(255,255,255,.17)}
@media (max-width:900px){.pills{backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%)}}

/* ---------- glass outline: hair-thin, dark grey leaning to the site's black ---------- */
.pills,.lang-sw,.burger{border:1.09px solid rgba(157,157,161,.2)}
@media (min-resolution:2dppx){.pills,.lang-sw,.burger{border-width:.545px;border-color:rgba(162,162,166,.3)}}