/* ============================================================
   GTS — Fire & Life Safety Division
   Design system derived from the FLS Division Profile
   ============================================================ */

:root{
  --red:#F43921;
  --red-dark:#D42D17;
  --ink:#2C2E35;
  --ink-soft:#4A4D57;
  --gray:#F5F6F6;
  --gray-2:#E9EBEC;
  --line:#DFE2E4;
  --muted:#7A7F88;

  --shell:1240px;
  --gut:clamp(20px,5vw,48px);
  --sec:clamp(60px,7vw,96px);

  --skew:-13deg;
  --r:2px;
  --shadow:0 18px 50px -24px rgba(19,22,28,.35);
  --shadow-sm:0 8px 24px -14px rgba(19,22,28,.32);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:#fff;color:var(--ink);
  font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:16.5px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;line-height:1.12;letter-spacing:-.02em;font-weight:800}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

.shell{width:min(100% - var(--gut)*2,var(--shell));margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.center{text-align:center}
.mt{margin-top:clamp(30px,4vw,44px)}

/* ---------- type helpers ---------- */
.eyebrow{
  font-size:.73rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red);margin:0 0 14px
}
.h-sec{font-size:clamp(1.65rem,3.2vw,2.35rem);color:var(--red)}
.h-sub{font-size:clamp(1rem,1.6vw,1.1rem);font-weight:700;color:var(--ink);margin-top:8px}
.lede{max-width:72ch;color:var(--ink-soft);font-size:clamp(1rem,1.3vw,1.05rem)}
.rule{width:100%;height:2px;background:var(--red);margin:18px 0 0}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--red);--fg:#fff;--bd:var(--red);
  display:inline-flex;align-items:center;gap:.6em;
  padding:.9em 1.5em;background:var(--bg);color:var(--fg);border:2px solid var(--bd);
  font-weight:700;font-size:.88rem;letter-spacing:.02em;text-decoration:none;border-radius:var(--r);
  transition:transform .25s var(--ease),background .25s,color .25s,border-color .25s;
  white-space:nowrap;cursor:pointer;font-family:inherit
}
.btn:hover{transform:translateY(-2px)}
.btn--ghost{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.55)}
.btn--ghost:hover{--bg:#fff;--fg:var(--red);--bd:#fff}
.btn--dark{--bg:var(--ink);--fg:#fff;--bd:var(--ink)}
.btn--dark:hover{--bg:var(--red);--bd:var(--red)}
.btn--line{--bg:transparent;--fg:var(--red);--bd:var(--red)}
.btn--line:hover{--bg:var(--red);--fg:#fff}
.btn svg{width:1em;height:1em;flex:none;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ============================================================
   HEADER
   ============================================================ */
.hdr{
  position:fixed;inset:0 0 auto;z-index:100;background:rgba(255,255,255,.97);
  backdrop-filter:saturate(1.6) blur(10px);border-bottom:1px solid transparent;
  transition:box-shadow .3s,border-color .3s
}
.hdr.is-stuck{box-shadow:0 10px 30px -22px rgba(19,22,28,.5);border-bottom-color:var(--line)}
.hdr__in{display:flex;align-items:center;gap:clamp(12px,2vw,28px);height:82px}
.hdr__brand{display:flex;align-items:center;gap:clamp(10px,1.4vw,16px);flex:none;text-decoration:none}
.hdr__gts{height:38px;width:auto}
.hdr__fls{height:34px;width:auto}
.hdr__div{width:1px;height:32px;background:var(--line);flex:none}

.nav{margin-inline-start:auto;display:flex;align-items:center;gap:clamp(10px,1.5vw,26px)}
.nav a{
  position:relative;font-size:.85rem;font-weight:600;color:var(--ink);text-decoration:none;
  padding:6px 0;transition:color .2s
}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--red);
  transition:right .28s var(--ease)
}
.nav a:hover,.nav a.is-active{color:var(--red)}
.nav a:hover::after,.nav a.is-active::after{right:0}
.nav .btn::after{display:none}
.nav .btn{color:#fff;padding:.7em 1.2em;font-size:.8rem}
.nav .btn.is-active{color:#fff}

.burger{
  display:none;margin-inline-start:auto;width:44px;height:44px;border:0;background:none;padding:10px;cursor:pointer
}
.burger span{display:block;height:2px;background:var(--ink);margin:5px 0;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)}

@media (max-width:1040px){
  .burger{display:block}
  .nav{
    position:fixed;inset:82px 0 auto;flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--line);padding:8px var(--gut) 24px;
    transform:translateY(-12px);opacity:0;pointer-events:none;transition:.28s var(--ease);
    max-height:calc(100dvh - 82px);overflow:auto
  }
  .nav.is-open{transform:none;opacity:1;pointer-events:auto}
  .nav a{padding:15px 0;border-bottom:1px solid var(--gray-2);font-size:.98rem}
  .nav .btn{margin-top:18px;justify-content:center;border-bottom:0}
}
@media (max-width:420px){.hdr__fls{display:none}.hdr__div{display:none}}

/* ============================================================
   HOME HERO  (profile cover: red field + white diagonal)
   ============================================================ */
.hero{
  position:relative;color:#fff;overflow:hidden;
  background:#22242B url("../img/hero-lobby.jpg?v=95c23e24") center 44%/cover no-repeat;
  padding:clamp(140px,15vw,178px) 0 clamp(66px,8vw,102px)
}
/* neutral scrim so the dusk skyline keeps its colour while text stays legible */
.hero__media{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(24,26,31,.55) 0%,rgba(24,26,31,.2) 46%,rgba(24,26,31,.5) 100%)
}
/* the brand diagonal: a red panel carrying the copy, echoing the profile cover */
.hero__cut{
  position:absolute;top:-14%;bottom:-14%;left:-32%;width:80%;
  background:linear-gradient(90deg,var(--red) 0%,var(--red) 58%,rgba(244,57,33,.9) 100%);
  transform:skewX(var(--skew));
  box-shadow:22px 0 60px -30px rgba(19,22,28,.55)
}
.hero__in{
  position:relative;z-index:2;max-width:600px;
  margin-inline-start:max(var(--gut),(100% - var(--shell))/2);
  margin-inline-end:auto
}
.hero__logo{width:clamp(200px,22vw,258px)}
.hero h1{margin-top:clamp(24px,3.2vw,34px);font-size:clamp(1.95rem,4.2vw,3rem);letter-spacing:-.03em}
.hero h1 em{display:block;font-style:normal;font-weight:400;font-size:.62em;letter-spacing:-.02em;margin-top:.22em;opacity:.97}
.hero__txt{margin:clamp(18px,2.4vw,24px) 0 0;max-width:46ch;color:rgba(255,255,255,.95);font-size:clamp(.98rem,1.3vw,1.03rem)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3.2vw,34px)}
.hero__std{
  display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:clamp(28px,3.6vw,40px);
  padding-top:20px;border-top:1px solid rgba(255,255,255,.3);
  font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.94)
}
@media (max-width:900px){
  .hero{background-image:url("../img/hero-lobby-sm.jpg?v=ead5ebb6");background-position:54% center}
  /* phones: the photo becomes a red-washed backdrop, as the printed profile does */
  .hero__cut{
    inset:0;width:auto;transform:none;box-shadow:none;
    background:linear-gradient(175deg,rgba(244,57,33,.95) 0%,rgba(244,57,33,.87) 52%,rgba(222,46,24,.78) 100%)
  }
  .hero__media{background:linear-gradient(180deg,rgba(24,26,31,.18),rgba(24,26,31,.3))}
  .hero__in{max-width:none}
}

/* ============================================================
   PAGE HERO (inner pages — profile section divider)
   ============================================================ */
.phero{position:relative;background:var(--red);color:var(--ink);overflow:hidden}
.phero__photo{
  position:absolute;top:0;right:0;width:min(44%,520px);height:100%;
  clip-path:polygon(26% 0,100% 0,100% 100%,0 100%);overflow:hidden
}
.phero__photo img{width:100%;height:100%;object-fit:cover}
.phero__in{
  position:relative;z-index:2;display:flex;align-items:center;gap:clamp(16px,3vw,36px);
  padding:clamp(122px,13vw,158px) 0 clamp(44px,5vw,60px)
}
.phero__num{font-size:clamp(3.6rem,10vw,8rem);font-weight:800;line-height:.78;letter-spacing:-.07em;flex:none}
.phero h1{font-size:clamp(1.55rem,3.6vw,2.75rem);letter-spacing:-.03em}
.phero p{margin:.6em 0 0;font-weight:700;color:rgba(44,46,53,.82);font-size:clamp(.9rem,1.4vw,1.02rem)}
.crumbs{
  position:relative;z-index:2;padding-bottom:20px;font-size:.76rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:rgba(44,46,53,.7)
}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:#fff}
.crumbs span{margin:0 .5em;opacity:.55}
@media (max-width:820px){
  .phero__photo{width:52%;opacity:.9}
  .phero__in{padding-top:clamp(128px,22vw,160px)}
  .phero__num{font-size:clamp(3rem,13vw,5rem)}
}

/* ============================================================
   STATS STRIP
   ============================================================ */
.stats{background:var(--ink);color:#fff;padding:clamp(48px,6vw,74px) 0}
.stats__grid{display:grid;gap:clamp(24px,3.4vw,38px);grid-template-columns:repeat(3,minmax(0,1fr))}
.stat{position:relative;padding-left:26px}
.stat::before{
  content:"";position:absolute;left:0;top:4px;bottom:10px;width:2px;background:rgba(255,255,255,.35);
  transform:skewX(var(--skew))
}
.stat b{display:block;font-size:clamp(1.8rem,4vw,2.85rem);font-weight:800;color:var(--red);letter-spacing:-.035em;line-height:1}
.stat span{display:block;margin-top:10px;font-size:.8rem;font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.88)}
.stats__core{
  margin-top:clamp(32px,4vw,44px);padding-top:clamp(24px,3vw,30px);border-top:1px solid rgba(255,255,255,.16);
  display:flex;flex-wrap:wrap;gap:10px 40px;align-items:baseline
}
.stats__core p{margin:0;font-weight:700;font-size:clamp(.94rem,1.5vw,1.06rem)}
.stats__core p span{color:var(--red)}
.stats__sectors{margin-top:16px;color:rgba(255,255,255,.6);font-size:.86rem}
.stats__sectors i{font-style:normal;color:var(--red);margin:0 .5em}
@media (max-width:760px){.stats__grid{grid-template-columns:1fr}}

/* ============================================================
   SECTIONS
   ============================================================ */
.sec{padding:var(--sec) 0;position:relative}
.sec--gray{background:var(--gray)}
.sec--tight{padding-top:clamp(40px,5vw,60px)}
.sec--diag{background:#fff;overflow:hidden}
.sec--diag::before{
  content:"";position:absolute;top:-8%;bottom:-8%;left:-6%;width:70%;background:var(--gray);
  transform:skewX(var(--skew));z-index:0
}
.sec--diag::after{
  content:"";position:absolute;top:-8%;bottom:-8%;right:-18%;width:26%;background:var(--gray-2);
  transform:skewX(var(--skew));z-index:0;opacity:.55
}
.sec--diag > *{position:relative;z-index:1}
.sec__head{margin-bottom:clamp(32px,4vw,48px);max-width:78ch}
.sec__head--row{
  max-width:none;display:flex;flex-wrap:wrap;gap:18px 30px;align-items:flex-end;justify-content:space-between
}
.sec__head--row > div{max-width:70ch}

/* ============================================================
   ABOUT
   ============================================================ */
.about__grid{display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start}
.about__brand img{width:210px}
.about__brand .rule{margin-top:24px;width:60px;height:3px}
.about__brand p{margin-top:16px;font-size:.86rem;color:var(--muted);line-height:1.6}
.strengths{margin-top:clamp(24px,3vw,32px);display:grid;gap:11px}
.strengths li{position:relative;padding-left:28px;color:var(--ink-soft)}
.strengths li::before{
  content:"";position:absolute;left:0;top:.62em;width:13px;height:3px;background:var(--red);
  transform:skewX(var(--skew))
}
.pillars{margin-top:20px;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.pillar{background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);padding:20px 22px;border-radius:var(--r)}
.pillar b{display:block;color:var(--ink);font-size:.97rem;margin-bottom:5px}
.pillar span{color:var(--ink-soft);font-size:.91rem;line-height:1.55}
@media (max-width:860px){.about__grid{grid-template-columns:1fr}.about__brand img{width:175px}}

/* ============================================================
   DIVISIONS + CERTS
   ============================================================ */
.divisions{display:grid;gap:clamp(16px,2.2vw,22px);grid-template-columns:repeat(auto-fit,minmax(282px,1fr))}
.division{
  position:relative;background:#fff;padding:clamp(24px,3vw,32px);border-radius:var(--r);
  box-shadow:var(--shadow-sm);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s
}
.division::before{
  content:"";position:absolute;top:0;left:0;width:68px;height:5px;background:var(--red);
  transform:skewX(var(--skew));transform-origin:left top
}
.division:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.division b{display:block;font-size:1.22rem;font-weight:800;color:var(--red);margin:12px 0 2px}
.division b i{font-style:normal;font-weight:600;color:var(--ink);font-size:.7em}
.division p{color:var(--ink-soft);font-size:.93rem;margin-top:12px}

.certs{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(16px,3vw,36px)
}
.certs figure{margin:0;text-align:center}
.certs img{height:60px;width:auto;object-fit:contain}
.certs figcaption{margin-top:9px;font-size:.65rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:700}

/* ============================================================
   MESSAGE FROM MANAGEMENT
   ============================================================ */
.msg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:clamp(30px,5vw,60px);align-items:start}
.msg__body p{color:var(--ink-soft);text-align:justify;hyphens:auto}
.msg__card{
  background:var(--ink);color:#fff;padding:clamp(26px,3vw,34px);border-radius:var(--r);
  position:relative;overflow:hidden
}
.msg__card::before{
  content:"";position:absolute;top:0;left:0;width:74px;height:5px;background:var(--red);
  transform:skewX(var(--skew));transform-origin:left top
}
.msg__card b{display:block;font-size:1.12rem;margin-top:14px}
.msg__card span{display:block;font-size:.9rem;color:rgba(255,255,255,.76);margin-top:4px}
.msg__card .quotemark{font-size:3.2rem;line-height:.6;color:var(--red);font-weight:800}
.msg__card p{margin-top:16px;font-size:.95rem;color:rgba(255,255,255,.9);font-style:italic}
@media (max-width:860px){.msg{grid-template-columns:1fr}}

/* ============================================================
   FEATURE GRID (Why GTS)
   ============================================================ */
.feat{display:grid;gap:clamp(18px,2.4vw,26px);grid-template-columns:repeat(auto-fit,minmax(295px,1fr))}
.feat li{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(22px,2.6vw,28px);transition:transform .35s var(--ease),box-shadow .35s,border-color .3s
}
.feat li::before{
  content:"";position:absolute;top:0;left:0;width:58px;height:4px;background:var(--red);
  transform:skewX(var(--skew));transform-origin:left top
}
.feat li:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent}
.feat b{display:block;color:var(--red);font-size:1rem;font-weight:800;margin-bottom:6px}
.feat span{color:var(--ink-soft);font-size:.94rem;line-height:1.6}

/* ============================================================
   INDUSTRIES
   ============================================================ */
.inds{display:grid;gap:clamp(16px,2.2vw,24px);grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.ind{
  display:flex;gap:18px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:clamp(20px,2.4vw,26px);transition:transform .35s var(--ease),box-shadow .35s
}
.ind:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.ind__ico{
  position:relative;flex:none;width:58px;height:58px;background:var(--red);display:grid;place-items:center;
  border-radius:var(--r)
}
.ind__ico::after{
  content:"";position:absolute;right:0;bottom:-8px;width:15px;height:9px;background:var(--red);
  clip-path:polygon(100% 0,100% 100%,0 0);opacity:.85
}
.ind__ico svg{width:32px;height:32px;stroke:#fff;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ind b{display:block;color:var(--red);font-size:.93rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;margin-bottom:6px}
.ind p{color:var(--ink-soft);font-size:.92rem;line-height:1.58}

/* ============================================================
   SCOPE TILES
   ============================================================ */
.tiles{display:grid;gap:clamp(12px,1.5vw,16px);grid-template-columns:repeat(5,minmax(0,1fr))}
.tile{
  position:relative;display:flex;flex-direction:column;text-decoration:none;border-radius:var(--r);
  overflow:hidden;background:var(--red);transition:transform .35s var(--ease),box-shadow .35s
}
.tile__ico{aspect-ratio:1/.78;display:grid;place-items:center;background:var(--ink);margin:13px 13px 0}
.tile__ico svg{width:52%;max-width:70px;height:auto;stroke:#fff;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tile b{display:block;padding:15px 12px 19px;color:#fff;font-size:.87rem;font-weight:700;text-align:center;line-height:1.3}
.tile:nth-child(even){background:var(--ink)}
.tile:nth-child(even) .tile__ico{background:var(--red)}
.tile:hover{transform:translateY(-7px);box-shadow:var(--shadow)}
@media (max-width:1040px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.tile b{font-size:.8rem}}

/* ============================================================
   SERVICE DETAIL BLOCKS
   ============================================================ */
.svcs{display:grid;gap:clamp(30px,4vw,52px)}
.svc{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow-sm);scroll-margin-top:100px
}
.svc__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--gray)}
.svc__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.svc:hover .svc__media img{transform:scale(1.04)}
.svc__body{padding:clamp(24px,3vw,40px)}
.svc__ico{width:44px;height:44px;margin-bottom:15px}
.svc__ico svg{width:100%;height:100%;stroke:var(--ink);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.svc h2{font-size:clamp(1.18rem,2vw,1.5rem);color:var(--red);letter-spacing:-.02em}
.svc h3{margin:16px 0 6px;font-size:.93rem;color:var(--ink)}
.svc ul{margin-top:16px;display:grid;gap:8px}
.svc ul li{position:relative;padding-left:20px;color:var(--ink-soft);font-size:.93rem;line-height:1.55}
.svc ul li::before{content:"";position:absolute;left:0;top:.66em;width:10px;height:2px;background:var(--red)}
.svc--flip .svc__media{order:2}
.svc--flip .svc__body{order:1}
@media (max-width:900px){
  .svc{grid-template-columns:1fr}
  .svc__media,.svc--flip .svc__media{order:0}
  .svc__body,.svc--flip .svc__body{order:0}
}

/* ============================================================
   PROJECT HIGHLIGHT CARDS
   ============================================================ */
.pcards{display:grid;gap:clamp(16px,2.2vw,24px);grid-template-columns:repeat(auto-fit,minmax(285px,1fr))}
.pcard{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(24px,2.8vw,30px);transition:transform .35s var(--ease),box-shadow .35s
}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.pcard__yr{
  display:inline-block;background:var(--red);color:#fff;font-size:.72rem;font-weight:800;
  letter-spacing:.1em;padding:5px 11px;border-radius:var(--r);margin-bottom:16px
}
.pcard h3{font-size:1.06rem;color:var(--ink);line-height:1.3}
.pcard .client{margin-top:8px;font-size:.87rem;color:var(--muted)}
.pcard .val{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--gray-2);
  font-size:1.18rem;font-weight:800;color:var(--red);font-variant-numeric:tabular-nums
}
.pcard .val small{display:block;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:2px}

/* ============================================================
   APPROVALS / COMPLIANCE
   ============================================================ */
.facts{display:grid;gap:clamp(12px,1.8vw,18px);grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.fact{background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);padding:18px 20px;border-radius:var(--r)}
.fact b{display:block;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.fact span{font-size:1rem;font-weight:700;color:var(--ink);line-height:1.35}
.steps{display:grid;gap:clamp(14px,2vw,20px);grid-template-columns:repeat(auto-fit,minmax(215px,1fr));counter-reset:s}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,2.4vw,26px)}
.step::before{
  counter-increment:s;content:"0" counter(s);display:block;font-size:1.6rem;font-weight:800;
  color:var(--red);letter-spacing:-.04em;margin-bottom:10px;line-height:1
}
.step b{display:block;font-size:.98rem;margin-bottom:5px}
.step span{color:var(--ink-soft);font-size:.91rem;line-height:1.55}

/* ============================================================
   TABLES
   ============================================================ */
.tablewrap{overflow-x:auto;background:#fff;box-shadow:var(--shadow-sm);border-radius:var(--r);-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse;min-width:900px;font-size:.86rem}
.tbl thead th{
  background:var(--red);color:#fff;font-weight:700;text-align:left;padding:14px 16px;
  font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;vertical-align:bottom
}
.tbl tbody td{padding:15px 16px;border-bottom:1px solid var(--gray-2);color:var(--ink-soft);vertical-align:top;line-height:1.5}
.tbl tbody tr:nth-child(odd){background:var(--gray)}
.tbl tbody tr:hover{background:#FFF1EE}
.tbl .c-year{font-weight:800;color:var(--ink);white-space:nowrap;width:72px}
.tbl .c-name{font-weight:700;color:var(--ink);min-width:200px}
.tbl .c-val{white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink);text-align:right}
.tbl .c-scope{min-width:290px}
.tbl-hint{margin-top:12px;font-size:.78rem;color:var(--muted)}

/* ============================================================
   QUOTE BAND
   ============================================================ */
.quote{position:relative;padding:clamp(70px,9vw,118px) 0;color:#fff;text-align:center;overflow:hidden;background:var(--red)}
.quote__bg{position:absolute;inset:0;background:url("../img/quote.jpg?v=35e85113") center/cover no-repeat;opacity:.6}
.quote__slab{
  position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(300px,40%);height:120%;
  background:rgba(44,46,53,.42);transform:skewX(var(--skew))
}
.quote .shell{position:relative;z-index:2}
.quote blockquote{
  margin:0;font-size:clamp(1.4rem,3.6vw,2.5rem);font-weight:800;letter-spacing:.01em;
  text-transform:uppercase;line-height:1.16;text-shadow:0 6px 30px rgba(0,0,0,.28)
}
.quote .qm{display:block;font-size:clamp(2.4rem,5vw,3.8rem);line-height:.5;opacity:.92}
.quote .qm--b{margin-top:.5em}

/* ============================================================
   CLIENTS
   ============================================================ */
.clients{display:grid;gap:clamp(10px,1.4vw,14px);grid-template-columns:repeat(7,minmax(0,1fr))}
.clients li{
  display:grid;place-items:center;padding:18px 12px;background:#fff;border:1px solid var(--gray-2);
  border-radius:var(--r);aspect-ratio:4/3;min-width:0;overflow:hidden;
  transition:border-color .3s,transform .3s var(--ease),box-shadow .3s
}
.clients li:hover{border-color:var(--red);transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.clients img{max-height:100%;width:auto;max-width:100%;object-fit:contain;filter:grayscale(1);opacity:.7;transition:.35s}
.clients li:hover img{filter:none;opacity:1}
@media (max-width:1040px){.clients{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:620px){.clients{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta{position:relative;background:var(--ink);color:#fff;overflow:hidden;padding:clamp(52px,6vw,78px) 0}
.cta::before{
  content:"";position:absolute;top:-30%;bottom:-30%;right:-8%;width:34%;background:var(--red);
  transform:skewX(var(--skew));opacity:.9
}
.cta__in{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:22px 40px;align-items:center;justify-content:space-between}
.cta h2{font-size:clamp(1.4rem,2.8vw,2.05rem);letter-spacing:-.02em;max-width:22ch}
.cta p{margin:10px 0 0;color:rgba(255,255,255,.82);max-width:52ch;font-size:.98rem}
.cta .btn{--bg:var(--red);--bd:var(--red)}
.cta .btn:hover{--bg:#fff;--fg:var(--red);--bd:#fff}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:clamp(32px,5vw,64px);align-items:start}
.cinfo{display:grid;gap:14px;margin-top:clamp(24px,3vw,32px)}
.cinfo a{
  display:flex;align-items:center;gap:16px;text-decoration:none;color:var(--ink);
  padding:16px 18px;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  transition:.25s var(--ease)
}
.cinfo a:hover{border-color:var(--red);transform:translateX(4px);box-shadow:var(--shadow-sm)}
.cinfo .ic{flex:none;width:42px;height:42px;display:grid;place-items:center;background:var(--red);border-radius:var(--r)}
.cinfo svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cinfo b{display:block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.cinfo span{font-size:1rem;font-weight:700}

.form{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,3vw,34px);box-shadow:var(--shadow-sm)}
.form h2{font-size:1.2rem;color:var(--red)}
.form p.note{margin-top:8px;font-size:.87rem;color:var(--muted)}
.field{margin-top:18px}
.field label{display:block;font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:.95rem;color:var(--ink);padding:12px 14px;
  border:1px solid var(--line);border-radius:var(--r);background:#fff;transition:border-color .2s,box-shadow .2s
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--red);box-shadow:0 0 0 3px rgba(244,57,33,.14)
}
.form .btn{margin-top:22px;width:100%;justify-content:center}
@media (max-width:900px){.contact{grid-template-columns:1fr}}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{position:relative;background:var(--red);color:#fff;overflow:hidden;padding:clamp(56px,6.5vw,88px) 0 0}
.foot::before{
  content:"";position:absolute;top:-20%;bottom:-20%;left:-24%;width:46%;background:rgba(255,255,255,.055);
  transform:skewX(var(--skew))
}
.foot__grid{position:relative;z-index:1;display:grid;gap:clamp(32px,4.5vw,56px);grid-template-columns:1.15fr .8fr .95fr}
.foot__logo{width:230px;margin-bottom:24px}
.foot__tag b{display:block;font-size:1rem}
.foot__tag span{display:block;color:rgba(255,255,255,.88);font-size:.94rem}
.foot__tag .rule{background:#fff;width:50px;height:3px;margin:18px 0 0}
.foot__gts{width:170px;margin-top:26px;opacity:.95}
.foot h2{font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:18px;color:rgba(255,255,255,.75);font-weight:800}
.foot__links{display:grid;gap:10px}
.foot__links a{font-size:.93rem;text-decoration:none;color:rgba(255,255,255,.95);transition:.2s;width:fit-content;border-bottom:1px solid transparent}
.foot__links a:hover{border-bottom-color:#fff}
.foot__cta{display:grid;gap:12px}
.foot__cta a{
  display:flex;align-items:center;gap:14px;text-decoration:none;color:#fff;
  padding:13px 15px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r);transition:.25s var(--ease)
}
.foot__cta a:hover{background:#fff;color:var(--red);transform:translateX(4px)}
.foot__cta svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.foot__cta b{display:block;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;opacity:.72;font-weight:700}
.foot__cta span{font-size:.95rem;font-weight:700}
.foot__bar{
  position:relative;z-index:1;margin-top:clamp(40px,5vw,60px);padding:20px 0;
  border-top:1px solid rgba(255,255,255,.22);display:flex;flex-wrap:wrap;gap:10px 24px;
  align-items:center;justify-content:space-between;font-size:.79rem;color:rgba(255,255,255,.85)
}
.foot__bar a{text-decoration:none;font-weight:700}
@media (max-width:900px){.foot__grid{grid-template-columns:1fr}.foot__logo{width:190px}}

/* ---------- back to top ---------- */
.totop{
  position:fixed;right:20px;bottom:20px;z-index:90;width:44px;height:44px;border:0;cursor:pointer;
  background:var(--ink);color:#fff;border-radius:var(--r);display:grid;place-items:center;
  opacity:0;pointer-events:none;transform:translateY(10px);transition:.3s var(--ease)
}
.totop.is-on{opacity:1;pointer-events:auto;transform:none}
.totop:hover{background:var(--red)}
.totop svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(20px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
}

/* ============================================================
   INDUSTRY CHIPS (home)
   ============================================================ */
.chips{display:grid;gap:clamp(10px,1.3vw,14px);grid-template-columns:repeat(auto-fit,minmax(195px,1fr))}
.chip{
  display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:16px 18px;text-decoration:none;color:var(--ink);
  font-weight:700;font-size:.88rem;line-height:1.3;
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s,color .3s
}
.chip svg{width:26px;height:26px;flex:none;stroke:var(--red);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.chip:hover{border-color:var(--red);color:var(--red);transform:translateY(-4px);box-shadow:var(--shadow-sm)}

/* ============================================================
   SCROLL PROGRESS — a fire main filling as you read
   ============================================================ */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:120;pointer-events:none;background:rgba(44,46,53,.08)}
.progress__bar{
  height:100%;width:0;
  background:linear-gradient(90deg,var(--red),#FF7A45 60%,#FFB36B);
  box-shadow:0 0 10px rgba(244,57,33,.65)
}

/* ============================================================
   MOTION PRIMITIVES
   ============================================================ */
.rv--l{transform:translateX(-26px)}
.rv--r{transform:translateX(26px)}
.rv--l.is-in,.rv--r.is-in{transform:none}

/* hero mark: slow ember glow */
@keyframes ember{
  0%,100%{filter:drop-shadow(0 0 0 rgba(255,206,160,0))}
  50%{filter:drop-shadow(0 0 22px rgba(255,206,160,.5))}
}
.hero__logo{animation:ember 5s ease-in-out infinite}

/* detector ping behind the scope tiles */
@keyframes ping{
  0%{transform:translate(-50%,-50%) scale(.5);opacity:.75}
  100%{transform:translate(-50%,-50%) scale(6.5);opacity:0}
}
.tile__ico{position:relative;overflow:hidden}
.tile__ico::after{
  content:"";position:absolute;left:50%;top:50%;width:26px;height:26px;border-radius:50%;
  border:2px solid rgba(255,255,255,.6);opacity:0;pointer-events:none
}
.tile:hover .tile__ico::after,.tile:focus-visible .tile__ico::after{animation:ping 1.4s ease-out infinite}
.tile__ico svg{transition:transform .45s var(--ease)}
.tile:hover .tile__ico svg{transform:translateY(-3px) scale(1.06)}

/* service icons drift gently once revealed */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.svc.is-in .svc__ico svg{animation:float 4.5s ease-in-out infinite}

/* accent rules draw themselves in */
.rv .rule{transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease) .15s}
.rv.is-in .rule,.is-in .rule{transform:scaleX(1)}

/* ============================================================
   RESPONSE SEQUENCE — detection to discharge
   ============================================================ */
.seq{background:var(--ink);color:#fff;padding:clamp(56px,7vw,86px) 0;position:relative;overflow:hidden}
.seq::before{
  content:"";position:absolute;top:-30%;bottom:-30%;left:-12%;width:15%;
  background:rgba(244,57,33,.10);transform:skewX(var(--skew))
}
.seq .shell{position:relative;z-index:1}
.seq__head{max-width:62ch;margin-bottom:clamp(30px,3.6vw,42px)}
.seq__head h2{font-size:clamp(1.5rem,2.9vw,2.15rem);letter-spacing:-.025em}
.seq__head p{margin-top:14px;color:rgba(255,255,255,.76);font-size:clamp(.98rem,1.3vw,1.05rem)}
.seq__stage{width:100%;height:auto;max-width:960px;margin-inline:auto;display:block}
.seq__legend{
  display:grid;gap:clamp(16px,2.4vw,26px);grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  margin-top:clamp(26px,3.2vw,38px)
}
.seq__legend div{padding-top:18px;border-top:2px solid rgba(255,255,255,.2)}
.seq__legend b{display:block;color:var(--red);font-size:.71rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:8px}
.seq__legend span{font-size:.93rem;color:rgba(255,255,255,.82);line-height:1.55}

.seq .ring{opacity:0;transform-origin:center;transform-box:fill-box}
.seq .drop{opacity:0;transform-box:fill-box}
.seq .flow{stroke-dasharray:8 10}
.seq .bell{transform-origin:center;transform-box:fill-box}
.seq .spray{opacity:0;stroke-dasharray:46;stroke-dashoffset:46}

@keyframes seqRing{0%{transform:scale(.35);opacity:.9}100%{transform:scale(2.7);opacity:0}}
@keyframes seqFlow{to{stroke-dashoffset:-180}}
@keyframes seqBell{0%,100%{transform:rotate(0)}25%{transform:rotate(11deg)}75%{transform:rotate(-11deg)}}
@keyframes seqSpray{0%{opacity:0;stroke-dashoffset:46}25%{opacity:1}100%{opacity:1;stroke-dashoffset:0}}
@keyframes seqDrop{
  0%{opacity:0;transform:translateY(0) scale(.6)}
  18%{opacity:1;transform:translateY(7px) scale(1)}
  100%{opacity:0;transform:translateY(62px) scale(.75)}
}

.seq.is-in .ring{animation:seqRing 2.6s ease-out infinite}
.seq.is-in .ring--2{animation-delay:.6s}
.seq.is-in .ring--3{animation-delay:1.2s}
.seq.is-in .flow{animation:seqFlow 2.4s linear infinite}
.seq.is-in .bell{animation:seqBell 1.4s ease-in-out infinite 1s}
.seq.is-in .spray{animation:seqSpray 1.5s ease-out forwards 1.4s}
.seq.is-in .drop{animation:seqDrop 1.9s ease-in infinite 1.9s}
.seq.is-in .drop--2{animation-delay:2.2s}
.seq.is-in .drop--3{animation-delay:2.5s}
.seq.is-in .drop--4{animation-delay:2.8s}
.seq.is-in .drop--5{animation-delay:3.1s}
.seq.is-in .drop--6{animation-delay:3.4s}

/* ============================================================
   KINGDOM-WIDE COVERAGE MAP
   ============================================================ */
.ksa{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4.5vw,58px);align-items:center}
.ksa__map svg{width:100%;height:auto;display:block}
.ksa__dots{fill:none;stroke:#C6CBD0;stroke-width:4.4;stroke-linecap:round}
.ksa__outline{fill:none;stroke:rgba(44,46,53,.26);stroke-width:1.8;stroke-linejoin:round}

.pin__halo{fill:var(--red);opacity:0;transform-origin:center;transform-box:fill-box}
.pin__dot{fill:var(--red);stroke:#fff;stroke-width:2.4;transform-origin:center;transform-box:fill-box}
.pin__label{font:800 12.5px "Inter",Arial,sans-serif;fill:var(--ink);opacity:0;transition:opacity .5s var(--ease)}
@keyframes pinHalo{0%{transform:scale(.4);opacity:.5}100%{transform:scale(3.6);opacity:0}}
@keyframes pinPop{0%{transform:scale(0)}60%{transform:scale(1.3)}100%{transform:scale(1)}}
.ksa.is-in .pin__dot{animation:pinPop .55s var(--ease) both}
.ksa.is-in .pin__label{opacity:1}
.ksa.is-in .pin.is-live .pin__halo{animation:pinHalo 2s ease-out infinite}

.ksa__regions{display:grid;gap:10px}
.region{
  display:flex;gap:15px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-left:4px solid var(--gray-2);border-radius:var(--r);padding:15px 18px;
  transition:border-left-color .35s,transform .35s var(--ease),box-shadow .35s
}
.region.is-live,.region:hover{border-left-color:var(--red);transform:translateX(5px);box-shadow:var(--shadow-sm)}
.region__n{
  flex:none;width:29px;height:29px;display:grid;place-items:center;border-radius:50%;
  background:var(--gray);color:var(--muted);font-size:.74rem;font-weight:800;transition:.35s
}
.region.is-live .region__n,.region:hover .region__n{background:var(--red);color:#fff}
.region b{display:block;font-size:.95rem;color:var(--ink)}
.region span{display:block;font-size:.86rem;color:var(--ink-soft);line-height:1.5;margin-top:3px}
@media (max-width:900px){
  .ksa{grid-template-columns:1fr}
  /* SVG text scales with the viewBox, so bump it in user units on small screens */
  .pin__label{font-size:26px}
  .pin__dot{r:11;stroke-width:3.4}
  .pin__halo{r:11}
  .ksa__dots{stroke-width:5.6}
}

/* ============================================================
   VISION 2030
   ============================================================ */
.v2030{position:relative;overflow:hidden;background:var(--ink);color:#fff;padding:clamp(52px,6.5vw,82px) 0}
.v2030::before{
  content:"";position:absolute;top:-40%;bottom:-40%;right:-30%;width:26%;
  background:var(--red);transform:skewX(var(--skew))
}
.v2030__in{
  position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:clamp(28px,4.5vw,58px);align-items:center
}
.v2030 .ar{font-size:clamp(1.45rem,2.9vw,2rem);font-weight:800;direction:rtl;text-align:left;color:#fff;margin-bottom:12px;letter-spacing:0}
.v2030 h2{font-size:clamp(1.4rem,2.7vw,1.95rem);letter-spacing:-.025em}
.v2030 p{margin-top:16px;color:rgba(255,255,255,.82);max-width:58ch;font-size:clamp(.97rem,1.3vw,1.03rem)}
.v2030__stats{display:grid;gap:12px}
.v2030__stat{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:var(--r);padding:17px 19px}
.v2030__stat b{display:block;font-size:clamp(1.25rem,2.3vw,1.7rem);color:#fff;letter-spacing:-.03em;line-height:1.1}
.v2030__stat span{display:block;margin-top:6px;font-size:.79rem;color:rgba(255,255,255,.72);font-weight:600}
@media (max-width:860px){.v2030__in{grid-template-columns:1fr}}

/* ============================================================
   MOTION PREFERENCES
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .hero__logo{animation:none}
  .progress{display:none}
  .seq.is-in .ring,.seq.is-in .flow,.seq.is-in .bell,.seq.is-in .spray,.seq.is-in .drop,
  .ksa.is-in .pin__dot,.ksa.is-in .pin.is-live .pin__halo,.svc.is-in .svc__ico svg,
  .tile:hover .tile__ico::after{animation:none}
  .seq .spray,.seq .drop,.seq .ring{opacity:1}
  .seq .spray{stroke-dashoffset:0}
  .pin__label{opacity:1}
  .rule{transform:scaleX(1)}
}

/* ============================================================
   WHATSAPP BUTTON
   ============================================================ */
.btn--wa{--bg:#1FAF54;--fg:#fff;--bd:#1FAF54}
.btn--wa:hover{--bg:#16863f;--bd:#16863f}
.btn--wa svg{width:1.15em;height:1.15em;stroke:none;fill:currentColor}
.hero .btn--wa{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.55)}
.hero .btn--wa:hover{--bg:#fff;--fg:#1FAF54;--bd:#fff}
.cinfo--wa .ic{background:#1FAF54}
.cinfo--wa:hover{border-color:#1FAF54}
.cinfo--wa svg{stroke:none;fill:#fff}

/* ============================================================
   HEADER CART BUTTON
   ============================================================ */
.cartbtn{
  position:relative;flex:none;width:44px;height:44px;margin-inline-start:10px;
  background:var(--ink);border:0;border-radius:var(--r);cursor:pointer;
  display:grid;place-items:center;transition:background .25s var(--ease),transform .25s var(--ease)
}
.cartbtn:hover{background:var(--red);transform:translateY(-2px)}
.cartbtn svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cartbtn__n{
  position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;
  background:var(--red);color:#fff;border:2px solid #fff;border-radius:10px;
  font-size:.66rem;font-weight:800;line-height:16px;text-align:center
}
.cartbtn:hover .cartbtn__n{background:var(--ink)}
@media (max-width:1040px){.cartbtn{margin-inline-start:auto;order:2}.burger{margin-inline-start:12px;order:3}}

/* ============================================================
   STORE
   ============================================================ */
.storenav{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(26px,3.4vw,36px)}
.storenav .chip{padding:12px 16px;font-size:.84rem}

.storehow{
  display:grid;gap:clamp(12px,1.8vw,18px);grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  margin-top:clamp(28px,3.4vw,38px);padding-top:clamp(24px,3vw,30px);border-top:1px solid var(--line)
}
.storehow div{display:flex;gap:14px;align-items:flex-start}
.storehow b{
  flex:none;font-size:1.05rem;font-weight:800;color:var(--red);letter-spacing:-.03em;
  width:34px;height:34px;display:grid;place-items:center;background:var(--gray);border-radius:50%
}
.storehow span{font-size:.9rem;color:var(--ink-soft);line-height:1.5}

.svgrid{display:grid;gap:clamp(16px,2.2vw,22px);grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
.sv{
  position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:clamp(22px,2.6vw,26px);
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s
}
.sv::before{
  content:"";position:absolute;top:0;left:0;width:54px;height:4px;background:var(--red);
  transform:skewX(var(--skew));transform-origin:left top
}
.sv:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent}
.sv__ico{width:40px;height:40px;margin-bottom:14px}
.sv__ico svg{width:100%;height:100%;stroke:var(--ink);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sv h3{font-size:1.02rem;color:var(--ink);line-height:1.3}
.sv p{margin-top:9px;font-size:.88rem;color:var(--ink-soft);line-height:1.55;flex:1}

.sv__term{display:block;margin-top:16px}
.sv__term span{
  display:block;font-size:.68rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin-bottom:7px
}
.sv__term select{
  width:100%;font:inherit;font-size:.86rem;color:var(--ink);padding:10px 12px;
  border:1px solid var(--line);border-radius:var(--r);background:#fff;cursor:pointer
}
.sv__term select:focus{outline:0;border-color:var(--red);box-shadow:0 0 0 3px rgba(244,57,33,.14)}

.sv__foot{display:flex;gap:10px;align-items:center;margin-top:16px}
.qty{display:flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:var(--r);padding:3px}
.qty button{
  width:28px;height:28px;border:0;background:var(--gray);border-radius:var(--r);cursor:pointer;
  display:grid;place-items:center;transition:background .2s,color .2s;color:var(--ink)
}
.qty button:hover{background:var(--red);color:#fff}
.qty button svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round}
.qty input{
  width:42px;border:0;text-align:center;font:inherit;font-size:.9rem;font-weight:700;color:var(--ink);
  -moz-appearance:textfield;background:transparent
}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty input:focus{outline:0}
.qty__u{font-size:.7rem;color:var(--muted);font-weight:700;padding-inline:4px;white-space:nowrap}
.sv__add{flex:1;justify-content:center;padding:.72em 1em;font-size:.84rem}
.sv__add.is-added{--bg:var(--ink);--bd:var(--ink)}

/* ============================================================
   CART DRAWER
   ============================================================ */
.cart{position:fixed;inset:0;z-index:200}
.cart[hidden]{display:none}
.cart__veil{
  position:absolute;inset:0;background:rgba(19,22,28,.55);backdrop-filter:blur(2px);
  opacity:0;transition:opacity .3s var(--ease)
}
.cart.is-open .cart__veil{opacity:1}
.cart__panel{
  position:absolute;top:0;right:0;bottom:0;width:min(100%,468px);background:#fff;
  display:flex;flex-direction:column;box-shadow:-30px 0 60px -40px rgba(19,22,28,.6);
  transform:translateX(100%);transition:transform .34s var(--ease)
}
.cart.is-open .cart__panel{transform:none}

.cart__top{
  flex:none;display:flex;align-items:flex-start;gap:16px;justify-content:space-between;
  padding:22px clamp(20px,3vw,26px);background:var(--ink);color:#fff
}
.cart__top h2{font-size:1.1rem}
.cart__top p{margin:5px 0 0;font-size:.82rem;color:rgba(255,255,255,.7)}
.cart__x{
  flex:none;width:34px;height:34px;border:0;background:rgba(255,255,255,.12);border-radius:var(--r);
  cursor:pointer;display:grid;place-items:center;transition:background .2s
}
.cart__x:hover{background:var(--red)}
.cart__x svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round}

.cart__body{flex:1;overflow-y:auto;padding:clamp(16px,2.4vw,22px);background:var(--gray)}
.cart__empty{text-align:center;padding:44px 20px;color:var(--muted)}
.cart__empty svg{width:44px;height:44px;margin:0 auto 16px;stroke:var(--gray-2);fill:none;stroke-width:1.4}
.cart__empty b{display:block;color:var(--ink);font-size:1rem;margin-bottom:6px}
.cart__empty p{font-size:.88rem;line-height:1.55}
.cart__empty .btn{margin-top:20px}

.ci{
  display:grid;grid-template-columns:1fr auto;gap:6px 12px;background:#fff;border:1px solid var(--line);
  border-left:3px solid var(--red);border-radius:var(--r);padding:14px 15px;margin-bottom:10px
}
.ci b{font-size:.92rem;color:var(--ink);line-height:1.3;grid-column:1}
.ci__term{grid-column:1;font-size:.79rem;color:var(--ink-soft);line-height:1.45}
.ci__x{
  grid-row:1 / span 2;grid-column:2;align-self:start;width:28px;height:28px;border:0;background:none;
  cursor:pointer;display:grid;place-items:center;border-radius:var(--r);transition:background .2s
}
.ci__x:hover{background:#FFEDEA}
.ci__x svg{width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ci__x:hover svg{stroke:var(--red)}
.ci .qty{grid-column:1 / -1;justify-self:start;margin-top:6px}

.cart__form{
  flex:none;padding:clamp(16px,2.4vw,22px);border-top:1px solid var(--line);background:#fff;
  max-height:58vh;overflow-y:auto
}
.cart__form h3{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.cart__fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cart__fields label{display:block;font-size:.7rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft)}
.cart__fields label.wide{grid-column:1 / -1}
.cart__fields input,.cart__fields textarea{
  width:100%;margin-top:5px;font:inherit;font-size:.9rem;color:var(--ink);padding:10px 12px;
  border:1px solid var(--line);border-radius:var(--r);background:#fff;
  letter-spacing:normal;text-transform:none;font-weight:400
}
.cart__fields textarea{resize:vertical;min-height:62px}
.cart__fields input:focus,.cart__fields textarea:focus{outline:0;border-color:var(--red);box-shadow:0 0 0 3px rgba(244,57,33,.14)}
.cart__fields input:invalid:not(:placeholder-shown){border-color:var(--red)}

.cart__send{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.cart__send .btn{justify-content:center;padding:.82em .9em;font-size:.83rem}
.cart__note{margin-top:12px;font-size:.74rem;color:var(--muted);line-height:1.5}
.cart__note strong{color:var(--ink-soft)}

@media (max-width:520px){
  .cart__fields{grid-template-columns:1fr}
  .cart__send{grid-template-columns:1fr}
  .cart__form{max-height:50vh}
}

/* ============================================================
   FLOATING WHATSAPP
   ============================================================ */
.wafab{
  position:fixed;right:20px;bottom:74px;z-index:90;width:48px;height:48px;border-radius:50%;
  background:#1FAF54;display:grid;place-items:center;text-decoration:none;
  box-shadow:0 10px 26px -10px rgba(31,175,84,.75);
  transition:transform .3s var(--ease),background .25s
}
.wafab:hover{transform:translateY(-3px) scale(1.05);background:#16863f}
.wafab svg{width:26px;height:26px;fill:#fff;stroke:none}
@media (max-width:620px){.wafab{bottom:70px;right:16px;width:46px;height:46px}}

@media (prefers-reduced-motion:reduce){
  .cart__panel,.cart__veil{transition:none}
}

/* ============================================================
   LANGUAGE SWITCH
   ============================================================ */
.lang{
  display:inline-flex;align-items:center;gap:7px;font-weight:700;
  padding:6px 12px;border:1px solid var(--line);border-radius:var(--r);
  text-decoration:none;transition:border-color .25s,color .25s,background .25s
}
.lang::after{display:none}
.lang svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7}
.lang:hover{border-color:var(--red);color:var(--red);background:#FFF3F1}
.foot__links .lang{border:0;padding:0}

/* ============================================================
   ARABIC / RIGHT-TO-LEFT
   ------------------------------------------------------------
   Layout is mostly logical properties and grid, so it mirrors on its own.
   What needs help: the diagonal motif (a mirrored skew), anything pinned
   with left/right, and Arabic typography, which needs more line height and
   no negative letter-spacing.
   ============================================================ */
[dir="rtl"]{
  --skew:13deg;                      /* mirror the brand diagonal */
  --font-ar:"IBM Plex Sans Arabic","Inter",system-ui,sans-serif;
}
[dir="rtl"] body{
  font-family:var(--font-ar);
  line-height:1.8;
  letter-spacing:0;
}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{
  letter-spacing:0;line-height:1.35;font-weight:700
}
[dir="rtl"] .eyebrow{letter-spacing:.08em}
[dir="rtl"] .btn{letter-spacing:0;font-weight:700}
[dir="rtl"] .hero h1,[dir="rtl"] .phero h1,[dir="rtl"] .h-sec,
[dir="rtl"] .stat b,[dir="rtl"] .phero__num,[dir="rtl"] .divider__num{letter-spacing:0}
[dir="rtl"] .hero h1{line-height:1.3}
[dir="rtl"] .quote blockquote{text-transform:none;line-height:1.5;letter-spacing:0}
[dir="rtl"] .seq__legend b,[dir="rtl"] .fact b,[dir="rtl"] .cinfo b,
[dir="rtl"] .foot__cta b,[dir="rtl"] .v2030__stat span{letter-spacing:.04em}
[dir="rtl"] .tbl thead th{letter-spacing:.02em}
[dir="rtl"] .ind b{letter-spacing:.02em}

/* Latin runs (phone numbers, emails, standards, SAR values) stay LTR */
[dir="rtl"] bdi{font-family:"Inter",sans-serif;font-feature-settings:"tnum"}

/* --- hero: the red panel and photo swap sides --- */
[dir="rtl"] .hero{background-image:url("../img/hero-lobby-rtl.jpg?v=f206ba50");background-position:38% 44%}
[dir="rtl"] .hero__media{inset:0 40% 0 -14%;transform:skewX(var(--skew)) scale(1.04)}
[dir="rtl"] .hero__media::after{
  background:linear-gradient(270deg,var(--red) 0%,rgba(244,57,33,.9) 22%,rgba(244,57,33,.42) 55%,rgba(244,57,33,.16) 100%)
}
[dir="rtl"] .hero__cut{
  left:auto;right:-32%;
  background:linear-gradient(270deg,var(--red) 0%,var(--red) 58%,rgba(244,57,33,.9) 100%);
  box-shadow:-22px 0 60px -30px rgba(19,22,28,.55)
}
[dir="rtl"] .hero__in{
  margin-inline-start:max(var(--gut),(100% - var(--shell))/2);
  margin-inline-end:auto
}
@media (max-width:900px){
  [dir="rtl"] .hero{background-image:url("../img/hero-lobby-sm.jpg?v=ead5ebb6");background-position:46% center}
  [dir="rtl"] .hero__media{inset:0}
  [dir="rtl"] .hero__cut{right:0;inset:0;width:auto}
}

/* --- page hero photo sits on the left in RTL --- */
[dir="rtl"] .phero__photo{
  right:auto;left:0;
  clip-path:polygon(0 0,78% 0,100% 100%,0 100%)
}

/* --- pinned decoration --- */
[dir="rtl"] .sec--diag::before{left:auto;right:-6%}
[dir="rtl"] .sec--diag::after{right:auto;left:-18%}
[dir="rtl"] .message::after{right:auto;left:-10%}
[dir="rtl"] .cta::before{right:auto;left:-8%}
[dir="rtl"] .v2030::before{right:auto;left:-30%}
[dir="rtl"] .seq::before{left:auto;right:-12%}
[dir="rtl"] .foot::before{left:auto;right:-24%}
[dir="rtl"] .division::before,[dir="rtl"] .feat li::before,
[dir="rtl"] .msg__card::before,[dir="rtl"] .sv::before{left:auto;right:0;transform-origin:right top}
[dir="rtl"] .ind__ico::after{right:auto;left:0;clip-path:polygon(0 0,0 100%,100% 0)}

/* --- borders that mark a side --- */
[dir="rtl"] .pillar{border-left:1px solid var(--line);border-right:4px solid var(--red)}
[dir="rtl"] .fact{border-left:1px solid var(--line);border-right:4px solid var(--red)}
[dir="rtl"] .region{border-left:1px solid var(--line);border-right:4px solid var(--gray-2)}
[dir="rtl"] .region.is-live,[dir="rtl"] .region:hover{border-right-color:var(--red);transform:translateX(-5px)}
[dir="rtl"] .ci{border-left:1px solid var(--line);border-right:3px solid var(--red)}
[dir="rtl"] .approvals-note div{border-left:0;border-right:4px solid var(--red)}

/* --- directional motion --- */
[dir="rtl"] .rule{transform-origin:right}
[dir="rtl"] .rv .rule{transform:scaleX(0)}
[dir="rtl"] .rv.is-in .rule,[dir="rtl"] .is-in .rule{transform:scaleX(1)}
[dir="rtl"] .nav a::after{right:0;left:100%;transition:left .28s var(--ease)}
[dir="rtl"] .nav a:hover::after,[dir="rtl"] .nav a.is-active::after{left:0;right:0}
[dir="rtl"] .cinfo a:hover{transform:translateX(-4px)}
[dir="rtl"] .foot__cta a:hover{transform:translateX(-4px)}
[dir="rtl"] .btn svg,[dir="rtl"] .chip svg{transform:scaleX(-1)}
[dir="rtl"] .lang svg{transform:none}

/* --- cart drawer opens from the left --- */
[dir="rtl"] .cart__panel{right:auto;left:0;transform:translateX(-100%);box-shadow:30px 0 60px -40px rgba(19,22,28,.6)}
[dir="rtl"] .cart.is-open .cart__panel{transform:none}
[dir="rtl"] .totop{right:auto;left:20px}
[dir="rtl"] .wafab{right:auto;left:20px}
@media (max-width:620px){[dir="rtl"] .wafab{left:16px;right:auto}}

/* --- tables keep numeric columns readable --- */
[dir="rtl"] .tbl thead th,[dir="rtl"] .tbl tbody td{text-align:right}
[dir="rtl"] .tbl .c-val{text-align:left}

/* --- the coverage map and the sequence diagram stay LTR artwork --- */
[dir="rtl"] .ksa__map svg,[dir="rtl"] .seq__stage{direction:ltr}
[dir="rtl"] .pin__label{font-family:var(--font-ar);font-size:13.5px}
@media (max-width:900px){[dir="rtl"] .pin__label{font-size:27px}}

/* --- Arabic reads better with a touch more room in dense blocks --- */
[dir="rtl"] .sv p,[dir="rtl"] .ind p,[dir="rtl"] .feat span,
[dir="rtl"] .step span,[dir="rtl"] .region span{line-height:1.75}
[dir="rtl"] .svc ul li{padding-left:0;padding-right:20px}
[dir="rtl"] .svc ul li::before{left:auto;right:0}
[dir="rtl"] .strengths li{padding-left:0;padding-right:28px}
[dir="rtl"] .strengths li::before{left:auto;right:0}
[dir="rtl"] .stat{padding-left:0;padding-right:26px}
[dir="rtl"] .stat::before{left:auto;right:0}
[dir="rtl"] .msg__body p{text-align:justify}
[dir="rtl"] .storehow b,[dir="rtl"] .step::before{letter-spacing:0}

/* ============================================================
   PROFILE FLIPBOOK
   ============================================================ */
.fb{margin-top:clamp(26px,3.4vw,38px)}

.fb__stage{
  position:relative;perspective:2400px;perspective-origin:center;
  background:var(--ink);border-radius:var(--r);overflow:hidden;
  box-shadow:0 30px 70px -40px rgba(19,22,28,.7)
}
.fb__sheet{width:100%;height:auto;display:block;cursor:pointer}

/* the turning sheet, stacked exactly over the static page */
.fb__flip{
  position:absolute;inset:0;transform-style:preserve-3d;
  transform-origin:left center;will-change:transform;z-index:3
}
[dir="rtl"] .fb__flip{transform-origin:right center}
.fb__face{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden;background:#fff}
.fb__face img{width:100%;height:100%;object-fit:contain;display:block}
.fb__face--back{transform:rotateY(180deg)}

/* a shadow that deepens toward the spine while a page is mid-turn */
.fb__flip.is-turning .fb__face::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(19,22,28,.34),rgba(19,22,28,0) 42%)
}
[dir="rtl"] .fb__flip.is-turning .fb__face::after{
  background:linear-gradient(270deg,rgba(19,22,28,.34),rgba(19,22,28,0) 42%)
}

/* a faint spine crease so the flat page still reads as paper */
.fb__gloss{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(90deg,rgba(19,22,28,.12),rgba(19,22,28,0) 6%,rgba(19,22,28,0) 94%,rgba(19,22,28,.1))
}

.fb__nav{
  position:absolute;top:50%;translate:0 -50%;z-index:4;
  width:clamp(40px,4vw,52px);height:clamp(40px,4vw,52px);border:0;cursor:pointer;
  background:rgba(19,22,28,.55);color:#fff;border-radius:50%;
  display:grid;place-items:center;backdrop-filter:blur(4px);
  transition:background .25s,opacity .25s,transform .25s var(--ease)
}
.fb__nav svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fb__nav:hover{background:var(--red);transform:translateY(-50%) scale(1.06)}
.fb__nav:disabled{opacity:0;pointer-events:none}
.fb__nav--prev{left:14px}
.fb__nav--next{right:14px}
.fb__nav--prev svg{transform:scaleX(-1)}
[dir="rtl"] .fb__nav--prev{left:auto;right:14px}
[dir="rtl"] .fb__nav--next{right:auto;left:14px}
[dir="rtl"] .fb__nav--prev svg{transform:none}
[dir="rtl"] .fb__nav--next svg{transform:scaleX(-1)}

.fb__bar{
  display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;justify-content:space-between;
  margin-top:18px;padding-bottom:18px;border-bottom:1px solid var(--line)
}
.fb__count{font-size:.9rem;font-weight:700;color:var(--ink);white-space:nowrap}
.fb__count b{color:var(--red);font-variant-numeric:tabular-nums}
.fb__hint{font-size:.8rem;color:var(--muted);flex:1;min-width:140px}
.fb__acts{display:flex;flex-wrap:wrap;gap:10px}
.fb__acts .btn{padding:.72em 1.15em;font-size:.82rem}
.fb__acts .btn small{font-weight:600;opacity:.75;font-size:.92em}
.fb__acts .btn svg{transform:rotate(90deg)}
[dir="rtl"] .fb__acts .btn svg{transform:rotate(90deg)}

.fb__thumbs{
  display:flex;gap:9px;overflow-x:auto;padding:16px 2px 6px;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch
}
.fb__thumbs button{
  position:relative;flex:none;width:clamp(72px,7vw,96px);padding:0;border:2px solid var(--gray-2);
  background:#fff;border-radius:var(--r);cursor:pointer;overflow:hidden;line-height:0;
  transition:border-color .25s,transform .25s var(--ease)
}
.fb__thumbs button img{width:100%;height:auto;display:block}
.fb__thumbs button span{
  position:absolute;inset-inline-end:3px;inset-block-end:3px;
  background:rgba(19,22,28,.72);color:#fff;font-size:.6rem;font-weight:800;
  line-height:1;padding:3px 5px;border-radius:2px
}
.fb__thumbs button:hover{border-color:var(--red);transform:translateY(-3px)}
.fb__thumbs button.is-on{border-color:var(--red)}
.fb__thumbs button.is-on span{background:var(--red)}

@media (max-width:620px){
  .fb__hint{display:none}
  .fb__bar{justify-content:center}
  .fb__acts{width:100%}
  .fb__acts .btn{flex:1;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  .fb__flip{transition:none !important}
  .fb__nav,.fb__thumbs button{transition:none}
}

/* ============================================================
   DOCUMENTS HUB
   ============================================================ */
.docs{display:grid;gap:clamp(18px,2.4vw,26px);margin-top:clamp(26px,3.4vw,36px)}
.doc{
  display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(20px,3vw,34px);
  align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(20px,2.6vw,26px);transition:transform .35s var(--ease),box-shadow .35s,border-color .3s
}
.doc:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent}
.doc__cover{
  display:block;border:1px solid var(--gray-2);border-radius:var(--r);overflow:hidden;
  background:var(--gray);line-height:0;box-shadow:var(--shadow-sm)
}
.doc__cover img{width:100%;height:auto;display:block;transition:transform .6s var(--ease)}
.doc:hover .doc__cover img{transform:scale(1.03)}
.doc__body h2{font-size:clamp(1.05rem,1.9vw,1.3rem);color:var(--red);letter-spacing:-.02em}
.doc__body p{margin-top:10px;color:var(--ink-soft);font-size:.94rem;line-height:1.6}
.doc__meta{
  margin-top:12px;font-size:.72rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted)
}
.doc__acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.doc__acts .btn{padding:.74em 1.2em;font-size:.83rem}
@media (max-width:760px){
  .doc{grid-template-columns:1fr}
  .doc__cover{max-width:280px}
}

/* ============================================================
   NAV DROPDOWN
   ============================================================ */
.nav__grp{position:relative}
.nav__btn{
  display:inline-flex;align-items:center;gap:6px;position:relative;
  font:inherit;font-size:.85rem;font-weight:600;color:var(--ink);
  background:none;border:0;padding:6px 0;cursor:pointer;transition:color .2s
}
.nav__btn::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--red);
  transition:right .28s var(--ease)
}
.nav__btn svg{
  width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)
}
.nav__grp:hover .nav__btn,.nav__grp.is-open .nav__btn,.nav__grp.is-active .nav__btn{color:var(--red)}
.nav__grp:hover .nav__btn::after,.nav__grp.is-active .nav__btn::after{right:0}
.nav__grp:hover .nav__btn svg,.nav__grp.is-open .nav__btn svg{transform:rotate(180deg)}

.nav__menu{
  position:absolute;top:calc(100% + 14px);left:50%;translate:-50% 0;z-index:5;
  min-width:210px;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 22px 50px -26px rgba(19,22,28,.5);padding:8px;
  display:grid;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s
}
/* a hit area bridging the gap, so the menu survives the trip from button to panel */
.nav__menu::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.nav__grp:hover .nav__menu,
.nav__grp:focus-within .nav__menu,
.nav__grp.is-open .nav__menu{opacity:1;visibility:visible;transform:none}

.nav__menu a{
  display:block;padding:10px 14px;font-size:.86rem;font-weight:600;white-space:nowrap;
  border-radius:var(--r);transition:background .2s,color .2s
}
.nav__menu a::after{display:none}
.nav__menu a:hover,.nav__menu a.is-active{background:var(--gray);color:var(--red)}

@media (max-width:1040px){
  .nav__grp{width:100%}
  .nav__btn{
    width:100%;justify-content:space-between;padding:15px 0;font-size:.98rem;
    border-bottom:1px solid var(--gray-2)
  }
  .nav__btn::after{display:none}
  .nav__menu{
    position:static;translate:none;transform:none;min-width:0;border:0;box-shadow:none;
    padding:0;background:none;opacity:1;visibility:visible;
    display:none
  }
  .nav__menu::before{display:none}
  .nav__grp.is-open .nav__menu{display:grid}
  .nav__menu a{
    padding:13px 0 13px 18px;border-bottom:1px solid var(--gray-2);border-radius:0;
    font-size:.93rem;color:var(--ink-soft)
  }
  .nav__menu a:hover,.nav__menu a.is-active{background:none}
  [dir="rtl"] .nav__menu a{padding:13px 18px 13px 0}
}