@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Readex+Pro:wght@300;400;500;600;700;800&display=swap');

/* Layout: the original TAWAQLY sticker template (charcoal outline + hard offset shadow, cream/sand bands, orange CTAs, Readex Pro), re-sequenced to the approved copy, with teal/green added as the second brand colour and video/photo mockup plates. */
:root{
  --cream:#FDFBF7;
  --sand:#F3EADB;
  --sand-deep:#EADCC4;
  --charcoal:#262729;
  --charcoal-soft:#4A4B4E;
  --muted:#7C7D80;
  --orange:#F9A30E;
  --orange-text:#B87400;
  --teal:#1FA69B;
  --teal-ink:#0B6E66;
  --teal-soft:#DDF1EC;
  --green:#0F4A43;
  --green-2:#17594F;
  --line:#E4DED2;
  --radius:20px;
  --sticker-color:var(--charcoal);
  --sticker:2.5px solid var(--sticker-color);
  --shadow-color:var(--charcoal);
  --shadow:-6px 6px 0 var(--shadow-color);
  --shadow-sm:-4px 4px 0 var(--shadow-color);
  --shadow-hover:var(--charcoal);
  color-scheme:light;
}
[dir="ltr"], html[dir="ltr"], .site[dir="ltr"] {
  --shadow: 6px 6px 0 var(--shadow-color);
  --shadow-sm: 4px 4px 0 var(--shadow-color);
}

/* Neo-Brutalist Dark Mode Root Tokens */
[data-theme="dark"],
html.dark,
html[data-theme="dark"] {
  --cream:#121316;
  --sand:#1A1D24;
  --sand-deep:#222630;
  --charcoal:#F5F6F8;
  --charcoal-soft:#B5B9C2;
  --muted:#828794;
  --orange:#FFA726;
  --orange-text:#FFB74D;
  --teal:#26C6B8;
  --teal-ink:#4DD0E1;
  --teal-soft:rgba(38,198,184,.16);
  --green:#0E2925;
  --green-2:#143530;
  --line:#2D323E;
  --sticker-color:#3E4556;
  --sticker:2.5px solid var(--sticker-color);
  --shadow-color:#000000;
  --shadow:-6px 6px 0 var(--shadow-color);
  --shadow-sm:-4px 4px 0 var(--shadow-color);
  --shadow-hover:#000000;
  color-scheme:dark;
}
[dir="ltr"][data-theme="dark"],
[dir="ltr"] html.dark,
html[dir="ltr"].dark,
html[dir="ltr"][data-theme="dark"],
.site[dir="ltr"][data-theme="dark"] {
  --shadow: 6px 6px 0 var(--shadow-color);
  --shadow-sm: 4px 4px 0 var(--shadow-color);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:86px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{font-family:'Readex Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',Tahoma,sans-serif;background:var(--cream);color:var(--charcoal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.7}
.site{overflow-x:clip}
[dir="rtl"] .site, .site[dir="rtl"]{direction:rtl;text-align:right}
[dir="ltr"] .site, .site[dir="ltr"]{direction:ltr;text-align:left}

/* Typography & Font Stacks */
[dir="ltr"] body,
[dir="ltr"] .site,
html[dir="ltr"] body,
[dir="ltr"] input,
[dir="ltr"] button,
[dir="ltr"] select,
[dir="ltr"] textarea {
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif !important;
  letter-spacing:-0.015em;
  line-height:1.6;
}
[dir="rtl"] body,
[dir="rtl"] .site,
html[dir="rtl"] body,
[dir="rtl"] input,
[dir="rtl"] button,
[dir="rtl"] select,
[dir="rtl"] textarea {
  font-family:'Readex Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',Tahoma,sans-serif !important;
  letter-spacing:normal;
  line-height:1.7;
}

.wrap{max-width:1220px;margin:0 auto;padding-inline:clamp(16px,3.5vw,28px)}
section{position:relative}
img{max-width:100%;display:block}
a{color:inherit}
.num{font-variant-numeric:tabular-nums}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
:focus-visible{outline:3px solid var(--teal-ink);outline-offset:3px;border-radius:8px}
.skip{position:absolute;inset-inline-start:16px;top:-70px;z-index:100;background:var(--charcoal);color:var(--cream);padding:10px 16px;border-radius:12px;text-decoration:none;font-weight:600}
.skip:focus{top:12px}

/* type */
h1,h2,h3{text-wrap:balance}
h1{font-size:clamp(2.3rem,5.4vw,4.3rem);line-height:1.14;font-weight:700}
h2{font-size:clamp(1.9rem,4.2vw,3.3rem);line-height:1.18;font-weight:700}
h3{font-size:clamp(1.2rem,2.2vw,1.6rem);line-height:1.3;font-weight:600}
[dir="ltr"] h1{font-weight:800;letter-spacing:-.025em;line-height:1.12}
[dir="ltr"] h2{font-weight:800;letter-spacing:-.02em;line-height:1.18}
[dir="ltr"] h3{font-weight:700;letter-spacing:-.015em;line-height:1.26}
[dir="rtl"] h1{font-weight:700;letter-spacing:normal;line-height:1.22}
[dir="rtl"] h2{font-weight:700;letter-spacing:normal;line-height:1.24}
[dir="rtl"] h3{font-weight:600;letter-spacing:normal;line-height:1.3}

.lede{font-size:clamp(1.05rem,1.6vw,1.24rem);color:var(--charcoal-soft);font-weight:400;max-width:54ch}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.92rem;font-weight:600;color:var(--teal-ink);margin-bottom:16px}
[dir="ltr"] .eyebrow{font-weight:700;letter-spacing:.03em;text-transform:uppercase;font-size:.86rem}
.eyebrow::before{content:"";width:26px;height:8px;border-radius:8px;background:var(--teal);border:1.5px solid var(--charcoal)}
.sub{font-size:clamp(1.25rem,2.4vw,1.75rem);font-weight:600;color:var(--charcoal);margin-top:6px}

/* buttons */
.btn, .site .btn, [dir="rtl"] .btn, [dir="rtl"] .site .btn, [dir="ltr"] .btn, [dir="ltr"] .site .btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:inherit;
  font-size:1.02rem;
  font-weight:700;
  padding:14px 28px;
  min-height:52px;
  border-radius:100px !important;
  text-decoration:none !important;
  border:var(--sticker) !important;
  background:var(--orange);
  color:var(--charcoal) !important;
  box-shadow:var(--shadow-sm);
  transition:transform .16s ease,box-shadow .16s ease;
  cursor:pointer;
  white-space:nowrap !important;
  flex-shrink:0;
}
.btn:hover, .site .btn:hover, [dir="rtl"] .btn:hover {
  transform:translate(3px,-3px);
  box-shadow:-7px 7px 0 var(--charcoal);
  color:var(--charcoal) !important;
}
[dir="ltr"] .btn:hover, [dir="ltr"] .site .btn:hover {
  transform:translate(-3px,-3px);
  box-shadow:7px 7px 0 var(--charcoal);
  color:var(--charcoal) !important;
}
.btn svg{width:20px;height:20px;flex:none}
.btn.light, .site .btn.light{background:var(--cream)}
.btn.ghost, .site .btn.ghost{background:transparent;box-shadow:none}
.btn.ghost:hover, .site .btn.ghost:hover{background:var(--sand);transform:none;box-shadow:none}
.link, .site .link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-weight:700;
  color:var(--charcoal) !important;
  text-decoration:none !important;
  border-bottom:2.5px solid var(--orange) !important;
  padding-bottom:3px;
  font-size:1.02rem;
  white-space:nowrap;
}
.link:hover, .site .link:hover{color:var(--orange-text) !important}

/* nav */
header.nav, .site header.nav, .nav {
  position:sticky;
  top:env(safe-area-inset-top,0px);
  z-index:60;
  background:rgba(253,251,247,.93);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  display:block !important;
  width:100% !important;
}
.nav .wrap, .site .nav .wrap {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  height:76px;
  gap:clamp(10px, 1.6vw, 24px);
  width:100% !important;
  max-width:1220px;
  margin:0 auto;
  padding-inline:clamp(14px, 2.5vw, 28px);
}
.logo, .site .logo{display:flex;align-items:center;flex:none;text-decoration:none}
.logo img{height:44px;width:auto}
.nav-links{display:flex;gap:clamp(8px, 1.2vw, 20px);list-style:none;align-items:center;margin:0;padding:0;flex-wrap:nowrap}
.nav-links li{white-space:nowrap;flex-shrink:0}
.nav-links a{text-decoration:none;color:var(--charcoal-soft);font-size:clamp(0.85rem, 0.9vw, 0.95rem);font-weight:600;white-space:nowrap !important;line-height:1.2;display:inline-block;padding:4px 0;transition:color .16s ease}
.nav-links a:hover{color:var(--charcoal)}
.nav .btn, .nav .btn.top-cta{padding:9px clamp(12px, 1.1vw, 20px);min-height:44px;font-size:clamp(0.82rem, 0.88vw, 0.92rem);font-weight:700;white-space:nowrap !important;flex-shrink:0}
.nav-actions{display:flex;align-items:center;gap:clamp(8px, 1vw, 12px);flex-shrink:0}
.lang-btn{display:inline-flex;align-items:center;gap:7px;padding:8px clamp(10px, 1vw, 16px);min-height:42px;border:var(--sticker);border-radius:100px;background:var(--cream);color:var(--charcoal);font-size:.88rem;font-weight:600;text-decoration:none;box-shadow:var(--shadow-sm);transition:transform .16s ease,box-shadow .16s ease;cursor:pointer;flex:none;white-space:nowrap !important}
[dir="rtl"] .lang-btn:hover{transform:translate(2px,-2px);box-shadow:-5px 5px 0 var(--charcoal);color:var(--charcoal)}
[dir="ltr"] .lang-btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--charcoal);color:var(--charcoal)}
.lang-btn svg{width:16px;height:16px;stroke:currentColor;flex:none}
.theme-btn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;min-height:42px;padding:0;border:var(--sticker);border-radius:50%;background:var(--cream);color:var(--charcoal);box-shadow:var(--shadow-sm);transition:transform .16s ease,box-shadow .16s ease;cursor:pointer;flex:none;white-space:nowrap !important}
[dir="rtl"] .theme-btn:hover{transform:translate(2px,-2px);box-shadow:-5px 5px 0 var(--charcoal);color:var(--charcoal)}
[dir="ltr"] .theme-btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--charcoal);color:var(--charcoal)}
.theme-btn svg{width:18px;height:18px;stroke:currentColor;transition:transform .2s ease;flex:none}
.theme-btn:hover svg{transform:scale(1.12)}
.theme-text{display:none}
.nav-theme-m{display:none}

/* Icon visibility */
html:not([data-theme="dark"]) .theme-icon-sun,
[data-theme="light"] .theme-icon-sun{display:none !important}
html:not([data-theme="dark"]) .theme-icon-moon,
[data-theme="light"] .theme-icon-moon{display:block !important}

[data-theme="dark"] .theme-icon-sun,
html.dark .theme-icon-sun{display:block !important;color:var(--orange)}
[data-theme="dark"] .theme-icon-moon,
html.dark .theme-icon-moon{display:none !important}

.menu-btn{display:none;width:48px;height:48px;border:var(--sticker);border-radius:14px;background:var(--cream);box-shadow:-3px 3px 0 var(--charcoal);cursor:pointer;align-items:center;justify-content:center;color:var(--charcoal);white-space:nowrap !important}
[dir="ltr"] .menu-btn{box-shadow:3px 3px 0 var(--charcoal)}
.menu-btn svg{width:22px;height:22px}
.nav-cta-m{display:none}
.nav-lang-m{display:none}
@media(max-width:1140px){
  .nav nav, .site .nav nav{display:contents !important}
  .nav .wrap, .site .nav .wrap{
    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
    width:100% !important;
  }
  .nav .btn.top-cta{display:none !important}
  .nav-actions .lang-btn{display:none !important}
  .menu-btn{display:inline-flex !important;flex:none !important}
  .logo, .site .logo{flex:none !important}
  .nav-links{display:none;position:absolute;inset-inline:0;top:100%;flex-direction:column;gap:2px;background:var(--cream);border-bottom:var(--sticker);padding:12px clamp(16px,3.5vw,28px) 20px}
  .nav-links.open{display:flex !important}
  .nav-links li{width:100%}
  .nav-links a{display:block;padding:12px 6px;font-size:1.06rem;font-weight:600;color:var(--charcoal);border-bottom:1px solid var(--line)}
  .nav-cta-m{display:block;margin-top:12px}
  .nav-cta-m a.btn{width:100%;border-bottom:var(--sticker) !important}
  .nav-lang-m{display:block;margin-top:10px}
  .nav-lang-m a.lang-btn{width:100%;justify-content:center;border-bottom:var(--sticker) !important}
  .nav-theme-m{display:block;margin-top:10px}
  .nav-theme-m button.theme-btn{width:100% !important;border-radius:100px !important;justify-content:center !important;gap:8px !important;padding:8px 16px !important;border-bottom:var(--sticker) !important}
  .nav-theme-m .theme-text{display:inline !important;font-size:.88rem;font-weight:600}
}

/* plates: photo + video mockups */
.plate{position:relative;border:var(--sticker);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:linear-gradient(140deg,#E8E3DA 0%,#D6CFC2 45%,#C9C2B4 100%);isolation:isolate}
.plate::after{content:attr(data-note);position:absolute;inset:auto 14px 14px 14px;width:fit-content;max-width:calc(100% - 28px);background:var(--cream);border:1.5px solid var(--charcoal);border-radius:14px;padding:6px 13px;font-size:.74rem;font-weight:500;color:var(--charcoal-soft);line-height:1.5;z-index:3}
.plate.video{background:
  radial-gradient(110% 80% at 85% 0%,rgba(31,166,155,.55),transparent 60%),
  radial-gradient(80% 70% at 5% 100%,rgba(249,163,14,.35),transparent 60%),
  linear-gradient(160deg,var(--green-2),var(--green))}
.plate.video::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.12) 50%,transparent 65%);animation:sheen 6s ease-in-out infinite;z-index:1}
@keyframes sheen{0%,30%{transform:translateX(100%)}75%,100%{transform:translateX(-100%)}}
.plate .vtag{position:absolute;top:14px;inset-inline-start:14px;z-index:3;display:inline-flex;align-items:center;gap:7px;background:var(--charcoal);color:var(--cream);border-radius:100px;padding:5px 12px;font-size:.72rem;font-weight:600}
.plate .vtag i{width:8px;height:8px;border-radius:50%;background:var(--orange);display:block;animation:rec 1.6s ease-in-out infinite}
@keyframes rec{50%{opacity:.25}}
.plate .play{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);z-index:3;width:70px;height:70px;border-radius:50%;background:var(--orange);border:var(--sticker);box-shadow:-4px 4px 0 var(--charcoal);display:grid;place-items:center}
.plate .play svg{width:26px;height:26px;margin-left:4px;fill:var(--charcoal)}

/* phone */
.phone{border:var(--sticker);border-radius:28px;background:#fff;box-shadow:var(--shadow);padding:2px;position:relative}
.phone .notch{width:52px;height:5px;background:var(--charcoal);border-radius:100px;margin:2px auto 10px;opacity:.25}
.screen{background:var(--cream);border-radius:19px;padding:14px;font-size:.74rem;min-height:250px}
.s-top{display:flex;justify-content:space-between;align-items:center;font-size:.64rem;color:var(--muted);margin-bottom:12px}
.s-title{font-weight:600;font-size:.88rem;margin-bottom:11px}
.s-card{background:#fff;border:1.5px solid var(--line);border-radius:13px;padding:10px 11px;margin-bottom:9px}
.s-card.hot{border-color:var(--charcoal);border-width:2px;box-shadow:-3px 3px 0 var(--orange)}
.s-row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.s-mut{color:var(--muted);font-size:.66rem;font-weight:300}
.s-chip{background:var(--orange);border:1.5px solid var(--charcoal);border-radius:100px;padding:2px 10px;font-size:.64rem;font-weight:600;white-space:nowrap}
.s-chip.t{background:var(--teal-soft);border-color:var(--teal-ink);color:var(--teal-ink)}
.s-btn{background:var(--charcoal);color:var(--cream);border-radius:100px;padding:9px;text-align:center;font-weight:600;font-size:.76rem;margin-top:10px}
.s-map{height:88px;border-radius:11px;background:repeating-linear-gradient(48deg,#EDE7DC 0 13px,#E5DED2 13px 26px);border:1.5px solid var(--line);position:relative;margin-bottom:10px;overflow:hidden}
.s-map::before{content:"";position:absolute;top:22%;left:24%;width:46%;height:60%;border-radius:40% 55% 45% 50%;background:rgba(31,166,155,.25);border:1.5px solid var(--teal)}
.s-map::after{content:"";position:absolute;top:44%;left:44%;width:13px;height:13px;border-radius:50%;background:var(--orange);border:2px solid var(--charcoal)}


/* phone screens mirrored from the Tawaqly app */
.phone .screen{background:#FBF8F2}
.a-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}
.a-loc{display:flex;align-items:center;gap:4px;background:#fff;border-radius:20px;padding:3px 8px 3px 4px;font-size:.55rem;font-weight:600;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.a-loc i{width:12px;height:12px;border-radius:50%;background:#FFF1D6;display:block}
.a-av{width:18px;height:18px;border-radius:50%;background:var(--sand)}
.a-wx{display:flex;align-items:center;gap:5px;background:#fff;border-radius:9px;padding:4px 4px 4px 6px;margin-bottom:6px;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.a-wx .ic{width:14px;height:14px;border-radius:5px;background:#FFF1D6;flex:none}
.a-wx .t{flex:1;font-size:.5rem;line-height:1.2}
.a-wx .t b{display:block;font-size:.58rem}
.a-wx .bt{background:var(--orange);border-radius:6px;padding:2px 6px;font-size:.5rem;font-weight:700}
.a-nat{border-radius:10px;height:54px;background:#0B5638 url(/landing-images/tawaqly/mockup_national_address.webp) left center/auto 100% no-repeat;color:#fff;padding:6px 8px;margin-bottom:6px;position:relative;overflow:hidden}
.a-nat::before{content:"";position:absolute;inset:0;background:linear-gradient(270deg,#0B5638 45%,rgba(11,86,56,0) 85%)}
.a-nat span{position:relative;display:block;font-size:.45rem;opacity:.85}
.a-nat b{position:relative;display:block;font-size:.85rem;line-height:1.1}
.a-nat em{position:relative;font-style:normal;display:inline-block;background:#fff;color:#0B5638;border-radius:4px;padding:0 4px;font-size:.45rem;font-weight:700;margin-top:2px}
.a-svc{background:#fff;border-radius:11px;overflow:hidden;border:1.5px solid var(--orange);box-shadow:0 3px 10px rgba(0,0,0,.08)}
.a-svc .ph{height:58px;background:#333 url(/landing-images/tawaqly/mockup_service_card.webp) center 55%/cover}
.a-svc .bd{display:flex;justify-content:space-between;align-items:center;padding:5px 7px;gap:4px}
.a-svc .bd b{display:block;font-size:.66rem}
.a-svc .bd small{font-size:.45rem;color:var(--muted)}
.a-svc .pr{background:var(--sand);border-radius:6px;padding:2px 5px;font-weight:700;font-size:.62rem;text-align:center;line-height:1.1}
.a-svc .pr small{display:block;font-size:.42rem}
.a-bar{margin-top:7px;background:var(--orange);border-radius:10px;display:flex;justify-content:space-between;align-items:center;padding:6px 8px;box-shadow:0 5px 12px rgba(249,163,14,.35)}
.a-bar b{font-size:.66rem}
.a-bar small{display:block;font-size:.45rem;opacity:.75}
.a-bar span{background:rgba(255,255,255,.4);border-radius:6px;padding:1px 6px;font-size:.58rem;font-weight:700}
.a-sheet-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}
.a-sheet-h b{font-size:.78rem}
.a-sheet-h small{display:block;font-size:.45rem;color:var(--muted)}
.a-sheet-h i{width:16px;height:16px;border-radius:50%;background:var(--sand);display:block}
.a-prog{display:flex;gap:3px;margin-bottom:7px}
.a-prog i{flex:1;height:3px;border-radius:3px;background:var(--sand);display:block}
.a-prog i.on{background:var(--orange)}
.a-same{background:var(--charcoal);color:#fff;border-radius:9px;padding:6px 7px;display:flex;align-items:center;gap:5px;margin-bottom:6px}
.a-same i{width:14px;height:14px;border-radius:4px;background:var(--orange);display:block;flex:none}
.a-same b{display:block;font-size:.58rem}
.a-same small{font-size:.44rem;opacity:.75}
.a-ch{background:#fff;border-radius:8px;padding:5px 7px;margin-bottom:5px;display:flex;align-items:center;gap:5px;box-shadow:0 1px 4px rgba(0,0,0,.06);border:1.5px solid transparent}
.a-ch.on{background:#FFF4DF;border-color:var(--orange)}
.a-ch i{width:14px;height:14px;border-radius:4px;background:var(--sand);display:block;flex:none}
.a-ch b{display:block;font-size:.58rem}
.a-ch small{font-size:.44rem;color:var(--muted)}
.a-slots{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.a-slots span{background:#fff;border-radius:6px;padding:4px;text-align:center;font-size:.5rem;font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.a-slots span.first{grid-column:1 / -1;background:var(--orange)}
.a-grp{background:#fff;border-radius:9px;box-shadow:0 1px 4px rgba(0,0,0,.06);margin-bottom:6px;overflow:hidden}
.a-row{display:flex;justify-content:space-between;align-items:center;padding:4px 7px;font-size:.52rem}
.a-row + .a-row{border-top:1px solid var(--line)}
.a-row b{font-size:.56rem}
.a-row small{color:#9A6200;font-size:.45rem;font-weight:600}
.a-tot{display:flex;justify-content:space-between;align-items:baseline;font-size:.5rem;color:var(--charcoal-soft);margin:4px 2px}
.a-tot b{font-size:.8rem;color:var(--charcoal)}
.a-pay{background:var(--charcoal);color:#fff;border-radius:9px;padding:6px;text-align:center;font-size:.62rem;font-weight:700}
.a-pay em{font-style:normal;background:#fff;color:#000;border-radius:3px;padding:0 3px;margin-inline-start:3px;font-size:.5rem}

/* 1 hero */
.hero{padding:clamp(48px,7vw,86px) 0 clamp(56px,7vw,80px)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero-grid > *{min-width:0}
.hero .pin{display:inline-flex;align-items:center;gap:8px;background:var(--teal-soft);border:1.5px solid var(--teal-ink);color:var(--teal-ink);border-radius:100px;padding:6px 14px;font-size:.88rem;font-weight:600;margin-bottom:22px}
.hero .pin svg{width:16px;height:16px}
.hero h1{margin-bottom:22px}
.hero h1 .mark{background:linear-gradient(transparent 62%,rgba(249,163,14,.55) 62%, rgba(249,163,14,.55) 92%,transparent 92%)}
.hero .lede{margin-bottom:32px}
.hero-cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-bottom:32px}
.assure{display:flex;gap:10px 24px;flex-wrap:wrap;font-size:.92rem;color:var(--charcoal-soft);border-top:1px solid var(--line);padding-top:20px;list-style:none}
.assure li{display:flex;align-items:center;gap:8px}
.assure b{width:8px;height:8px;border-radius:50%;background:var(--orange);display:inline-block;border:1.5px solid var(--charcoal)}
.assure b.t{background:var(--teal)}
.assure .assure-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--orange-text, var(--orange));font-size:0.95rem;line-height:1;flex-shrink:0;width:18px;text-align:center}
.assure .assure-icon.t{color:var(--teal)}
.hero-visual{position:relative;padding-bottom:28px}
.hero-visual .plate{aspect-ratio:4/3.5}
.hero-visual .phone{position:absolute;bottom:0;right:-14px;width:206px;transform:rotate(-4deg);z-index:4}
.hero-visual .plate::after{inset:auto auto 14px 14px;max-width:52%}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-visual{display:flex;flex-direction:column;align-items:center;padding-bottom:0}
  .hero-visual .plate{width:100%;aspect-ratio:1/1}
  .hero-visual .play{top:44%}
  .hero-visual .phone{position:relative;bottom:auto;right:auto;width:196px;margin:-70px 0 0;transform:rotate(-3deg)}
  .hero-visual .plate::after{inset:56px 14px auto auto;max-width:calc(100% - 28px)}
}

/* 2 services */
.serv{padding:clamp(64px,9vw,104px) 0;background:var(--sand);border-top:2.5px solid var(--charcoal);border-bottom:2.5px solid var(--charcoal)}
.serv-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:48px;align-items:center;margin-top:44px}
.serv-grid > *{min-width:0}
.svc{background:var(--cream);border:var(--sticker);border-radius:var(--radius);box-shadow:var(--shadow);padding:30px;display:flex;flex-direction:column}
.svc .dur{align-self:flex-start;background:var(--orange);border:var(--sticker);border-radius:100px;padding:6px 18px;font-weight:700;font-size:.98rem;margin-bottom:20px;box-shadow:-3px 3px 0 var(--charcoal)}
.svc h3{margin-bottom:10px}
.svc p{font-size:1rem;color:var(--charcoal-soft);font-weight:400}
.svc .note{display:flex;gap:10px;align-items:flex-start;margin-top:20px;padding:14px 16px;border:1.5px dashed var(--charcoal);border-radius:14px;background:var(--sand);font-size:.95rem;color:var(--charcoal);font-weight:400}
.svc .note svg{width:20px;height:20px;flex:none;margin-top:3px;color:var(--teal-ink)}
.svc .btn{margin-top:26px;align-self:flex-start}
/* before / after */
.reveal{position:relative;border:var(--sticker);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/3;--pos:50%;background:#555 url(/landing-images/tawaqly/slider_before.webp) center/cover no-repeat}
.reveal .clean{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0);background:#555 url(/landing-images/tawaqly/slider_after_clean.webp) center/cover no-repeat}
.reveal .divider{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:var(--charcoal);z-index:2}
.reveal .knob{position:absolute;top:50%;left:var(--pos);transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:var(--orange);border:var(--sticker);display:grid;place-items:center;z-index:3;box-shadow:-3px 3px 0 var(--charcoal);pointer-events:none}
.reveal .knob svg{width:22px;height:22px}
.reveal .tag{position:absolute;top:16px;padding:5px 14px;border:1.5px solid var(--charcoal);border-radius:100px;background:var(--cream);font-size:.8rem;font-weight:600;z-index:3}
.reveal .tag.a{left:16px}.reveal .tag.b{right:16px}
.reveal .rnote{position:absolute;bottom:14px;right:14px;left:14px;width:fit-content;margin-inline-start:auto;background:var(--charcoal);color:var(--cream);border-radius:14px;padding:6px 13px;font-size:.74rem;z-index:3}
.reveal input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:4;margin:0}
.reveal:has(input:focus-visible){outline:3px solid var(--teal-ink);outline-offset:4px}
@media(max-width:900px){.serv-grid{grid-template-columns:1fr;gap:40px}}


/* packages strip (no prices on the website) */
.pk-strip{margin-top:44px;background:var(--cream);border:var(--sticker);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(22px,3.5vw,34px);display:grid;grid-template-columns:1fr auto;gap:22px 36px;align-items:center}
.pk-strip > *{min-width:0}
.pk-head h3{font-size:clamp(1.3rem,2.4vw,1.7rem)}
.pk-head p{margin-top:6px;color:var(--charcoal-soft);font-weight:400;max-width:46ch}
.pk-list{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(84px,1fr));gap:12px;grid-row:span 2}
.pk-list li{position:relative;background:var(--sand);border:2px solid var(--charcoal);border-radius:16px;padding:18px 10px 14px;text-align:center;box-shadow:-3px 3px 0 var(--charcoal)}
.pk-list li b{display:block;font-size:2.3rem;line-height:1;font-weight:700}
.pk-list li span{font-size:.9rem;color:var(--charcoal-soft)}
.pk-list li.pop{background:var(--orange)}
.pk-list li.pop span{color:var(--charcoal)}
.pk-list li em{position:absolute;top:-12px;left:50%;transform:translateX(-50%);white-space:nowrap;font-style:normal;font-size:.7rem;font-weight:600;background:var(--charcoal);color:var(--cream);border-radius:100px;padding:2px 10px}
.pk-foot{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.pk-note{font-size:.95rem;font-weight:600;color:var(--charcoal)}
@media(max-width:900px){.pk-strip{grid-template-columns:1fr}.pk-list{grid-row:auto;grid-template-columns:repeat(2,1fr)}}

/* 3 how */
.how{padding:clamp(64px,9vw,100px) 0}
.how-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:50px;flex-wrap:wrap}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;list-style:none}
.step{background:var(--cream);border:var(--sticker);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:22px 22px 26px;min-width:0}
.step .num{width:44px;height:44px;border:var(--sticker);border-radius:12px;background:var(--orange);display:grid;place-items:center;font-weight:700;font-size:1.2rem;margin-bottom:18px;box-shadow:-3px 3px 0 var(--charcoal)}
.step .phone{margin-bottom:18px;box-shadow:none;border-width:2px}
.step .screen{min-height:216px}
.step h3{font-size:1.16rem;margin-bottom:7px}
.step p{font-size:.97rem;color:var(--charcoal-soft);font-weight:400}
@media(max-width:860px){.three{grid-template-columns:1fr}.step{display:grid;grid-template-columns:1fr 170px;gap:0 20px;align-items:center}.step .phone{grid-row:1 / span 3;grid-column:2;margin:0}.step .screen{min-height:180px}}
@media(max-width:460px){.step{grid-template-columns:1fr}.step .phone{grid-row:auto;grid-column:auto;margin:0 auto 18px;width:min(100%,240px)}.step .screen{min-height:0}}

/* 4 why (green band, template trust layout) */
.trust{background:var(--green);color:var(--cream);padding:clamp(66px,9vw,110px) 0;border-top:2.5px solid var(--charcoal);border-bottom:2.5px solid var(--charcoal);overflow:hidden}
.trust::before{content:"";position:absolute;inset-inline-start:-140px;top:-140px;width:440px;height:440px;border-radius:50%;border:60px solid rgba(31,166,155,.15)}
.trust .eyebrow{color:#8FE0D6}
.trust .eyebrow::before{background:var(--orange);border-color:var(--cream)}
.trust h2{max-width:22ch}
.guar{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:50px;position:relative}
.g{border:2px solid rgba(253,251,247,.18);border-radius:18px;padding:24px;background:rgba(253,251,247,.06);min-width:0;display:flex;flex-direction:column}
.g .gi{width:44px;height:44px;border-radius:12px;background:var(--orange);border:2px solid var(--cream);margin-bottom:16px;display:grid;place-items:center;color:var(--charcoal)}
.g .gi svg{width:22px;height:22px}
.g h3{font-size:1.12rem;margin-bottom:8px}
.g p{font-size:.93rem;color:#C9DCD8;font-weight:400}
.g.water{background:var(--cream);color:var(--charcoal);border:var(--sticker);box-shadow:-5px 5px 0 var(--orange)}
.g.water p{color:var(--charcoal-soft)}
.g.water .gi{background:var(--teal);border-color:var(--charcoal);color:#fff}
.g .litre{margin-top:auto;padding-top:16px;display:flex;align-items:baseline;gap:8px;border-top:1px dashed var(--line);margin-top:16px}
.g .litre b{font-size:2.2rem;line-height:1;color:var(--teal-ink)}
.g .litre span{font-size:.86rem;color:var(--charcoal-soft)}
.moments{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px;position:relative}
.moments .plate{aspect-ratio:16/9;box-shadow:-5px 5px 0 rgba(0,0,0,.35);border-color:var(--cream)}
.moments .mt{position:absolute;inset:auto 0 0 0;padding:20px 22px;z-index:2;background:linear-gradient(to top,rgba(15,30,28,.85),transparent);color:var(--cream)}
.moments .mt strong{display:block;font-size:1.15rem}
.moments .mt span{font-size:.88rem;opacity:.85;font-weight:400}
.moments .plate::after{inset:14px 14px auto auto}
.moments .plate .vtag{top:auto;bottom:auto;top:14px;inset-inline-start:auto;left:14px}
.moment{position:relative;margin:0;border:2.5px solid var(--cream);border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;box-shadow:-5px 5px 0 rgba(0,0,0,.35);background:var(--green-2)}
.moment img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.moment:hover img{transform:scale(1.03)}
.moment .mt{position:absolute;inset:auto 0 0 0;padding:20px 22px;background:linear-gradient(to top,rgba(15,30,28,.88),transparent);color:var(--cream)}
.moment .mt strong{display:block;font-size:1.15rem}
.moment .mt span{font-size:.88rem;opacity:.88;font-weight:400}
.trust .btn{margin-top:40px}
@media(max-width:1000px){.guar{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.guar,.moments{grid-template-columns:1fr}}

/* 5 coverage (template water layout) */
.cov{padding:clamp(66px,9vw,110px) 0}
.cov-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:center}
.cov-grid > *{min-width:0}
.cov h2{margin-bottom:10px}
.cov .lede + .lede{margin-top:12px}
.cov .btn{margin-top:30px}
.mapcard{border:var(--sticker);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow);padding:18px}
.mapcard svg{display:block;width:100%;height:auto;border-radius:14px}
.mapcard .mrow{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;font-size:.9rem}
.live{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--teal-ink)}
.live i{width:10px;height:10px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(31,166,155,.22);display:block}
.mapcard small{color:var(--muted);font-size:.78rem}
.pulse{transform-box:fill-box;transform-origin:center;animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{transform:scale(.6);opacity:.7}100%{transform:scale(2.3);opacity:0}}
@media(max-width:900px){.cov-grid{grid-template-columns:1fr;gap:40px}}

/* 6 about (template hilite) */
.about{padding:0 0 clamp(66px,9vw,110px)}
.hilite{border:var(--sticker);border-radius:var(--radius);box-shadow:var(--shadow);background:var(--sand);display:grid;grid-template-columns:1.15fr .85fr;overflow:hidden;align-items:stretch}
.hilite > *{min-width:0}
.hilite .hx{padding:clamp(28px,4vw,48px)}
.hilite h2{font-size:clamp(1.7rem,3.4vw,2.6rem);margin-bottom:6px}
.hilite p.body{color:var(--charcoal-soft);font-weight:400;font-size:1.04rem;max-width:52ch;margin-top:14px}
.hilite .plate{border:0;border-radius:0;box-shadow:none;border-right:2.5px solid var(--charcoal);min-height:320px}
@media(max-width:760px){.hilite{grid-template-columns:1fr}.hilite .plate{border-right:0;border-top:2.5px solid var(--charcoal);aspect-ratio:4/3;min-height:0}}

.hilite .about-photo{margin:0;border-right:2.5px solid var(--charcoal);min-height:360px;position:relative;overflow:hidden;background:var(--sand-deep)}
.hilite .about-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
@media(max-width:760px){.hilite .about-photo{border-right:0;border-top:2.5px solid var(--charcoal);aspect-ratio:4/3.4;min-height:0}}

/* 7 faq */
.faq{padding:clamp(66px,9vw,104px) 0;background:var(--sand);border-top:2.5px solid var(--charcoal)}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.faq-grid > *{min-width:0}
.faq .lede{margin-top:16px}
.qa{display:flex;flex-direction:column;gap:14px}
.qa details{background:var(--cream);border:2px solid var(--charcoal);border-radius:16px;transition:box-shadow .16s}
.qa details[open]{box-shadow:var(--shadow-sm)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px}
.qa summary::-webkit-details-marker{display:none}
.qa summary h3{font-size:1.08rem;font-weight:600}
.qa .pm{flex:none;width:32px;height:32px;border-radius:50%;border:2px solid var(--charcoal);background:var(--cream);display:grid;place-items:center;transition:transform .2s,background .2s}
.qa .pm svg{width:14px;height:14px}
.qa details[open] .pm{transform:rotate(45deg);background:var(--orange)}
.qa .ans{padding:0 22px 20px;color:var(--charcoal-soft);font-weight:400}
@media(max-width:860px){.faq-grid{grid-template-columns:1fr;gap:32px}}

/* 8 final */
.final{background:var(--orange);border-top:2.5px solid var(--charcoal);padding:clamp(66px,9vw,110px) 0;text-align:center;overflow:hidden}
.final::before,.final::after{content:"";position:absolute;border:2.5px solid var(--charcoal);border-radius:50%;opacity:.14}
.final::before{width:320px;height:320px;top:-120px;right:-80px}
.final::after{width:220px;height:220px;bottom:-90px;left:-40px}
.final .wrap{position:relative}
.final h2{margin-bottom:14px}
.final p{font-size:1.18rem;color:#5A4413;margin-bottom:34px}
.stores{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
.store{display:flex;align-items:center;gap:11px;background:var(--charcoal);color:var(--cream);border:2.5px solid var(--charcoal);border-radius:14px;padding:12px 24px;text-decoration:none;text-align:right;box-shadow:-4px 4px 0 var(--cream);transition:transform .16s}
.store:hover{transform:translate(3px,-3px)}
.store svg{width:24px;height:24px;fill:currentColor}
.store small{display:block;font-size:.7rem;opacity:.75;font-weight:400}
.store b{font-size:1rem;font-weight:600}
.app-note{font-size:.9rem;color:#5A4413;margin-bottom:30px}
.final .assure{justify-content:center;border-top:1px solid rgba(38,39,41,.22);color:#4A3A12;max-width:640px;margin:0 auto;padding-top:22px}
.final .assure b{background:var(--charcoal)}

/* 9 contact */
.contact{background:var(--cream);padding:clamp(66px,9vw,104px) 0;text-align:center;border-top:2.5px solid var(--charcoal)}
.contact .eyebrow{justify-content:center}
.contact .lede{margin:14px auto 0}
.contact-opts{margin-top:36px;display:flex;flex-direction:column;align-items:center;gap:18px}
.contact .btn{font-size:1.08rem;min-height:60px;padding:14px 30px;max-width:100%}
.contact .btn .addr{direction:ltr;unicode-bidi:isolate;overflow-wrap:anywhere}
.or{display:flex;align-items:center;gap:14px;width:min(320px,100%);color:var(--charcoal-soft);font-weight:600}
.or::before,.or::after{content:"";flex:1;height:2px;background:var(--line);border-radius:2px}
.tel{display:inline-flex;align-items:center;gap:10px;font-size:clamp(1.3rem,2.6vw,1.6rem);font-weight:700;color:var(--teal-ink);text-decoration:none;border-bottom:2.5px solid var(--teal);padding-bottom:2px}
.tel:hover{color:var(--charcoal)}
.tel svg{width:24px;height:24px}

/* footer */
footer{background:var(--cream);padding:64px 0 0;border-top:1px solid var(--line)}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:38px;padding-bottom:44px}
.fgrid > *{min-width:0}
.fbrand img{height:48px;width:auto}
.fbrand p{color:var(--charcoal-soft);font-weight:400;font-size:.96rem;margin:14px 0 10px;max-width:34ch}
.fbrand .pun{font-size:1.05rem;font-weight:600;color:var(--orange-text)}
footer h2{font-size:.9rem;color:var(--muted);margin-bottom:14px;font-weight:600;letter-spacing:0}
footer ul{list-style:none}
footer li{margin-bottom:10px;color:var(--charcoal-soft);font-size:.95rem;font-weight:400}
footer li a{color:var(--charcoal-soft);text-decoration:none}
footer li a:hover{color:var(--charcoal);text-decoration:underline}
footer .fsocial{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
footer .fsocial li{margin:0}
footer .fsocial a{display:inline-flex;width:36px;height:36px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%}
footer .fsocial a:hover{border-color:var(--charcoal-soft);text-decoration:none}
footer .fsocial svg{width:18px;height:18px}
.fbar{border-top:1px solid var(--line);padding:22px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.88rem;color:var(--muted);font-weight:400}
@media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr;gap:30px}.fbrand{grid-column:1 / -1}}

/* mobile booking bar */
.mbar{display:none}
@media(max-width:640px){
  .mbar{display:flex;position:fixed;inset-inline:0;bottom:0;z-index:50;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(253,251,247,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:2px solid var(--charcoal);transition:transform .25s}
  .mbar .btn{flex:1}
  .mbar.hide{transform:translateY(115%)}
  body{padding-bottom:84px}
}

/* Cookie Banner Polish */
#cookiePopup {
  background: var(--sand) !important;
  border-top: var(--sticker) !important;
  box-shadow: 0 -4px 16px rgba(0,0,0,.08) !important;
  z-index: 100 !important;
  font-family: inherit !important;
  color: var(--charcoal) !important;
}
#cookiePopup h5 {
  font-size: 1rem !important;
  font-weight: 700 !important;
  margin-bottom: 4px !important;
  color: var(--charcoal) !important;
}
#cookiePopup p {
  font-size: .88rem !important;
  color: var(--charcoal-soft) !important;
  margin: 0 !important;
}
#cookiePopup #acceptCookie {
  min-height: 44px !important;
  padding: 10px 24px !important;
  font-size: .95rem !important;
  border-radius: 100px !important;
  background: var(--orange) !important;
  color: var(--charcoal) !important;
  border: var(--sticker) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ========================================================
   LTR Bi-directional Component Mirroring & Flipping
   ======================================================== */
[dir="ltr"] .hero-visual .phone {
  left: -14px;
  right: auto;
  transform: rotate(4deg);
}
[dir="ltr"] .hero-visual .plate::after {
  inset: auto 14px 14px auto;
}
@media(max-width:900px){
  [dir="ltr"] .hero-visual .phone {
    left: auto;
    right: auto;
    transform: rotate(3deg);
  }
}

/* Slider Mirroring in LTR */
[dir="ltr"] .reveal .knob {
  box-shadow: 3px 3px 0 var(--charcoal);
}
[dir="ltr"] .reveal .clean {
  clip-path: inset(0 0 0 var(--pos));
}
[dir="ltr"] .reveal .tag.a {
  right: 16px;
  left: auto;
}
[dir="ltr"] .reveal .tag.b {
  left: 16px;
  right: auto;
}
[dir="ltr"] .reveal .rnote {
  margin-inline-start: 0;
  margin-inline-end: auto;
}

/* Component Shadows in LTR */
[dir="ltr"] .pk-list li {
  box-shadow: 3px 3px 0 var(--charcoal);
}
[dir="ltr"] .step .num {
  box-shadow: 3px 3px 0 var(--charcoal);
}
[dir="ltr"] .g.water {
  box-shadow: 5px 5px 0 var(--orange);
}
[dir="ltr"] .moments .plate,
[dir="ltr"] .moment {
  box-shadow: 5px 5px 0 rgba(0,0,0,.35);
}
[dir="ltr"] .store {
  text-align: left;
  box-shadow: 4px 4px 0 var(--cream);
}
[dir="ltr"] .store:hover {
  box-shadow: 6px 6px 0 var(--cream);
  transform: translate(-2px, -2px);
}
[dir="ltr"] .hilite .plate {
  border-left: 2.5px solid var(--charcoal);
  border-right: 0;
}
@media(max-width:860px){
  [dir="ltr"] .hilite .plate {
    border-left: 0;
    border-bottom: 2.5px solid var(--charcoal);
  }
}
[dir="ltr"] .s-card.hot {
  box-shadow: 3px 3px 0 var(--orange);
}
[dir="ltr"] .plate.video .play {
  box-shadow: 4px 4px 0 var(--charcoal);
}
[dir="ltr"] .svc .dur {
  box-shadow: 3px 3px 0 var(--charcoal);
}
[dir="ltr"] .phone .s-card.hot {
  box-shadow: 3px 3px 0 var(--orange);
}

[dir="ltr"] body,
[dir="ltr"] .site,
html[dir="ltr"] body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  letter-spacing: -0.015em;
}

/* ========================================================
   Neo-Brutalist Dark Mode Component Styling
   ======================================================== */
[data-theme="dark"] body {
  background-color: var(--cream);
  color: var(--charcoal);
}

/* Nav & Header */
[data-theme="dark"] .nav,
[data-theme="dark"] .site .nav {
  background: rgba(18, 19, 22, 0.94);
  border-bottom-color: #383F50;
}
[data-theme="dark"] .nav-links {
  background: #121316;
  border-bottom-color: #383F50;
}
[data-theme="dark"] .nav-links a {
  color: #B5B9C2;
  border-bottom-color: #2D323E;
}
[data-theme="dark"] .nav-links a:hover {
  color: #F5F6F8;
}
[data-theme="dark"] .lang-btn,
[data-theme="dark"] .theme-btn,
[data-theme="dark"] .menu-btn {
  background: #1C202A;
  border-color: #383F50;
  color: #F5F6F8;
  box-shadow: var(--shadow-sm);
}
[dir="rtl"][data-theme="dark"] .lang-btn:hover,
[dir="rtl"][data-theme="dark"] .theme-btn:hover,
[dir="rtl"][data-theme="dark"] .menu-btn:hover {
  box-shadow: -5px 5px 0 #000000;
  color: #FFA726;
}
[dir="ltr"][data-theme="dark"] .lang-btn:hover,
[dir="ltr"][data-theme="dark"] .theme-btn:hover,
[dir="ltr"][data-theme="dark"] .menu-btn:hover {
  box-shadow: 5px 5px 0 #000000;
  color: #FFA726;
}

/* Primary Brutalist Buttons */
[data-theme="dark"] .btn,
[data-theme="dark"] .site .btn,
[dir="rtl"][data-theme="dark"] .btn,
[dir="rtl"][data-theme="dark"] .site .btn {
  background: var(--orange) !important;
  color: #121316 !important;
  border: 2.5px solid #121316 !important;
  box-shadow: -4px 4px 0 #000000;
}
[dir="ltr"][data-theme="dark"] .btn,
[dir="ltr"][data-theme="dark"] .site .btn {
  box-shadow: 4px 4px 0 #000000;
}
[data-theme="dark"] .btn:hover,
[data-theme="dark"] .site .btn:hover,
[dir="rtl"][data-theme="dark"] .btn:hover {
  box-shadow: -7px 7px 0 #000000;
  color: #121316 !important;
}
[dir="ltr"][data-theme="dark"] .btn:hover,
[dir="ltr"][data-theme="dark"] .site .btn:hover {
  box-shadow: 7px 7px 0 #000000;
  color: #121316 !important;
}
[data-theme="dark"] .btn.light,
[data-theme="dark"] .site .btn.light {
  background: #242936 !important;
  color: #F5F6F8 !important;
  border: 2.5px solid #383F50 !important;
}
[data-theme="dark"] .btn.ghost,
[data-theme="dark"] .site .btn.ghost {
  color: #F5F6F8 !important;
  border-color: transparent !important;
}
[data-theme="dark"] .btn.ghost:hover,
[data-theme="dark"] .site .btn.ghost:hover {
  background: #1E232E !important;
}
[data-theme="dark"] .link,
[data-theme="dark"] .site .link {
  color: #F5F6F8 !important;
  border-bottom-color: var(--orange) !important;
}
[data-theme="dark"] .link:hover,
[data-theme="dark"] .site .link:hover {
  color: var(--orange) !important;
}
[data-theme="dark"] .pin {
  background: #1C202A;
  border-color: #383F50;
  color: #F5F6F8;
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .pin svg {
  color: var(--orange);
}

/* Media Plates & Video Mockup */
[data-theme="dark"] .plate {
  background: linear-gradient(140deg, #262A35 0%, #1A1D24 45%, #15171D 100%);
  border-color: #383F50;
  box-shadow: -6px 6px 0 #000000;
}
[dir="ltr"][data-theme="dark"] .plate {
  box-shadow: 6px 6px 0 #000000;
}
[data-theme="dark"] .plate::after {
  background: #1E222C;
  border: 1.5px solid #383F50;
  color: #B5B9C2;
}
[data-theme="dark"] .plate.video {
  background:
    radial-gradient(110% 80% at 85% 0%, rgba(38,198,184,.3), transparent 60%),
    radial-gradient(80% 70% at 5% 100%, rgba(255,167,38,.25), transparent 60%),
    linear-gradient(160deg, #143530, #0E2925);
}
[data-theme="dark"] .plate .vtag {
  background: #000000;
  color: #F5F6F8;
  border: 1px solid #383F50;
}
[data-theme="dark"] .plate .play {
  border-color: #121316;
  box-shadow: -4px 4px 0 #000000;
}
[dir="ltr"][data-theme="dark"] .plate .play {
  box-shadow: 4px 4px 0 #000000;
}

/* Phone Mockup (Hero & How It Works) */
[data-theme="dark"] .phone {
  background: #181B22;
  border-color: #383F50;
  box-shadow: -6px 6px 0 #000000;
}
[dir="ltr"][data-theme="dark"] .phone {
  box-shadow: 6px 6px 0 #000000;
}
[data-theme="dark"] .phone .notch {
  background: #0B0C0E;
}
[data-theme="dark"] .phone .screen {
  background: #121419;
  color: #F5F6F8;
}
[data-theme="dark"] .s-card {
  background: #1C202A;
  border-color: #2D323E;
  color: #F5F6F8;
}
[data-theme="dark"] .s-card.hot {
  border-color: var(--orange);
  box-shadow: -3px 3px 0 var(--orange);
}
[dir="ltr"][data-theme="dark"] .s-card.hot {
  box-shadow: 3px 3px 0 var(--orange);
}
[data-theme="dark"] .a-loc {
  background: #252A36;
  color: #F5F6F8;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
[data-theme="dark"] .a-loc i {
  background: #FFA726;
}
[data-theme="dark"] .a-wx {
  background: #252A36;
  color: #F5F6F8;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
[data-theme="dark"] .a-wx .ic {
  background: #FFA726;
}
[data-theme="dark"] .a-nat {
  background-color: #0A3D28;
}
[data-theme="dark"] .a-nat em {
  background: #26C6B8;
  color: #0A3D28;
}
[data-theme="dark"] .a-svc {
  background: #1C202A;
  border-color: var(--orange);
}
[data-theme="dark"] .a-svc .ph {
  background: linear-gradient(135deg, #2D3342, #1F232D);
}
[data-theme="dark"] .a-bar {
  background: #000000;
  color: #FFFFFF;
}
[data-theme="dark"] .a-sheet-h {
  background: #1C202A;
  color: #F5F6F8;
}
[data-theme="dark"] .a-ch {
  background: #252A36;
  color: #F5F6F8;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
[data-theme="dark"] .a-ch.on {
  background: rgba(255, 167, 38, 0.18);
  border-color: var(--orange);
}
[data-theme="dark"] .a-slots span {
  background: #252A36;
  color: #F5F6F8;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
[data-theme="dark"] .a-slots span.on {
  background: var(--orange);
  color: #121316;
}
[data-theme="dark"] .a-grp {
  background: #1C202A;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
[data-theme="dark"] .a-grp-r {
  border-color: #2D323E;
  color: #F5F6F8;
}
[data-theme="dark"] .a-pay {
  background: #000000;
  color: #FFFFFF;
}
[data-theme="dark"] .a-pay em {
  background: #FFFFFF;
  color: #000000;
}
[data-theme="dark"] .a-av {
  background: #2D3342;
}

/* Services Section */
[data-theme="dark"] .serv {
  background: var(--sand);
  border-top-color: #2D323E;
  border-bottom-color: #2D323E;
}
[data-theme="dark"] .svc {
  background: #171A21;
  border-color: #383F50;
  box-shadow: -6px 6px 0 #000000;
}
[dir="ltr"][data-theme="dark"] .svc {
  box-shadow: 6px 6px 0 #000000;
}
[data-theme="dark"] .svc .dur {
  color: #121316;
  border-color: #121316;
  box-shadow: -3px 3px 0 #000000;
}
[dir="ltr"][data-theme="dark"] .svc .dur {
  box-shadow: 3px 3px 0 #000000;
}
[data-theme="dark"] .svc .note {
  background: #1E222C;
  border-color: #383F50;
  color: #F5F6F8;
}
[data-theme="dark"] .svc .note svg {
  color: var(--teal);
}

/* Before / After Slider */
[data-theme="dark"] .reveal {
  border-color: #383F50;
  box-shadow: -6px 6px 0 #000000;
}
[dir="ltr"][data-theme="dark"] .reveal {
  box-shadow: 6px 6px 0 #000000;
}
[data-theme="dark"] .reveal .divider {
  background: #FFA726;
}
[data-theme="dark"] .reveal .knob {
  border-color: #121316;
  box-shadow: -3px 3px 0 #000000;
  color: #121316;
}
[dir="ltr"][data-theme="dark"] .reveal .knob {
  box-shadow: 3px 3px 0 #000000;
}
[data-theme="dark"] .reveal .tag {
  background: #1E222C;
  border-color: #383F50;
  color: #F5F6F8;
}
[data-theme="dark"] .reveal .rnote {
  background: #000000;
  color: #FFFFFF;
  border: 1px solid #383F50;
}

/* Packages Strip */
[data-theme="dark"] .pk-strip {
  background: #171A21;
  border-color: #383F50;
  box-shadow: -6px 6px 0 #000000;
}
[dir="ltr"][data-theme="dark"] .pk-strip {
  box-shadow: 6px 6px 0 #000000;
}
[data-theme="dark"] .pk-list li {
  background: #1F232E;
  border-color: #383F50;
  box-shadow: -3px 3px 0 #000000;
  color: #F5F6F8;
}
[dir="ltr"][data-theme="dark"] .pk-list li {
  box-shadow: 3px 3px 0 #000000;
}
[data-theme="dark"] .pk-list li.pop {
  background: var(--orange);
  color: #121316;
  border-color: #121316;
}
[data-theme="dark"] .pk-list li.pop b,
[data-theme="dark"] .pk-list li.pop span {
  color: #121316;
}
[data-theme="dark"] .pk-list li em {
  background: #000000;
  color: #FFFFFF;
}

/* Step Cards */
[data-theme="dark"] .step {
  background: #171A21;
  border-color: #383F50;
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .step .num {
  color: #121316;
  border-color: #121316;
  box-shadow: -3px 3px 0 #000000;
}
[dir="ltr"][data-theme="dark"] .step .num {
  box-shadow: 3px 3px 0 #000000;
}

/* Trust / Why Section */
[data-theme="dark"] .trust {
  background: var(--green);
  color: #FDFBF7;
  border-top-color: #2D323E;
  border-bottom-color: #2D323E;
}
[data-theme="dark"] .trust h2,
[data-theme="dark"] .trust h3,
[data-theme="dark"] .trust .sub {
  color: #FFFFFF !important;
}
[data-theme="dark"] .trust .eyebrow {
  color: #8FE0D6 !important;
}
[data-theme="dark"] .trust .eyebrow::before {
  border-color: #FFFFFF !important;
}
[data-theme="dark"] .trust .g h3 {
  color: #FFFFFF !important;
}
[data-theme="dark"] .trust .g p {
  color: #C9DCD8 !important;
}
[data-theme="dark"] .g.water {
  background: #171A21;
  border-color: #383F50;
  color: #F5F6F8;
  box-shadow: -5px 5px 0 var(--orange);
}
[dir="ltr"][data-theme="dark"] .g.water {
  box-shadow: 5px 5px 0 var(--orange);
}
[data-theme="dark"] .g.water h3 {
  color: #F5F6F8 !important;
}
[data-theme="dark"] .g.water p {
  color: #B5B9C2 !important;
}
[data-theme="dark"] .g.water .gi {
  background: var(--teal);
  border-color: #383F50;
  color: #121316;
}
[data-theme="dark"] .g .litre b {
  color: var(--teal);
}
[data-theme="dark"] .moments .plate,
[data-theme="dark"] .moment {
  border-color: #383F50;
}
[data-theme="dark"] .trust .moments .mt,
[data-theme="dark"] .trust .moment .mt,
[data-theme="dark"] .trust .moments .mt strong,
[data-theme="dark"] .trust .moment .mt strong {
  color: #FFFFFF !important;
}
[data-theme="dark"] .trust .moments .mt span,
[data-theme="dark"] .trust .moment .mt span {
  color: #C9DCD8 !important;
}

/* Coverage & SVG Map */
[data-theme="dark"] .mapcard {
  background: #171A21;
  border-color: #383F50;
  box-shadow: -6px 6px 0 #000000;
}
[dir="ltr"][data-theme="dark"] .mapcard {
  box-shadow: 6px 6px 0 #000000;
}
[data-theme="dark"] .mapcard svg rect[fill="#F3EADB"] {
  fill: #1A1D25;
}
[data-theme="dark"] .mapcard svg g[stroke="#EADCC4"] {
  stroke: #252A36;
}
[data-theme="dark"] .mapcard svg path[stroke="#FDFBF7"] {
  stroke: #2C3241;
}
[data-theme="dark"] .mapcard svg path[stroke="#262729"] {
  stroke: var(--orange);
}
[data-theme="dark"] .mapcard svg text[fill="#0B6E66"] {
  fill: var(--teal-ink);
}
[data-theme="dark"] .live {
  color: var(--teal-ink);
}

/* About Us */
[data-theme="dark"] .hilite {
  background: #171A21;
  border-color: #383F50;
  box-shadow: -6px 6px 0 #000000;
}
[dir="ltr"][data-theme="dark"] .hilite {
  box-shadow: 6px 6px 0 #000000;
}
[data-theme="dark"] .hilite .about-photo {
  background: #1E232E;
  border-color: #383F50;
}
[dir="ltr"][data-theme="dark"] .hilite .plate {
  border-left-color: #383F50;
}

/* FAQ Details */
[data-theme="dark"] .faq {
  background: var(--sand);
  border-top-color: #2D323E;
}
[data-theme="dark"] .qa details {
  background: #171A21;
  border-color: #343A48;
}
[data-theme="dark"] .qa details[open] {
  border-color: var(--teal);
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .qa .pm {
  background: #1F232E;
  border-color: #343A48;
  color: #F5F6F8;
}
[data-theme="dark"] .qa details[open] .pm {
  background: var(--orange);
  color: #121316;
  border-color: #121316;
}

/* Final CTA */
[data-theme="dark"] .final {
  background: var(--orange);
  border-top-color: #2D323E;
}
[data-theme="dark"] .final h2 {
  color: #121316;
}
[data-theme="dark"] .final p {
  color: #3E2D07;
}
[data-theme="dark"] .store {
  background: #121316;
  color: #FFFFFF;
  border-color: #121316;
  box-shadow: -4px 4px 0 #000000;
}
[dir="ltr"][data-theme="dark"] .store {
  box-shadow: 4px 4px 0 #000000;
}
[data-theme="dark"] .store:hover {
  box-shadow: -6px 6px 0 #000000;
}
[dir="ltr"][data-theme="dark"] .store:hover {
  box-shadow: 6px 6px 0 #000000;
}

/* Contact */
[data-theme="dark"] .contact {
  background: var(--cream);
  border-top-color: #2D323E;
}
[data-theme="dark"] .tel {
  color: var(--teal-ink);
  border-color: var(--teal);
}
[data-theme="dark"] .tel:hover {
  color: #F5F6F8;
}

/* Footer */
[data-theme="dark"] footer {
  background: var(--cream);
  border-top-color: #2D323E;
}
[data-theme="dark"] footer li a:hover {
  color: #F5F6F8;
}
[data-theme="dark"] .fbar {
  border-top-color: #2D323E;
}

/* Mobile Sticky Bar & Cookie Popup */
[data-theme="dark"] .mbar {
  background: rgba(18, 19, 22, 0.95);
  border-top-color: #383F50;
}
[data-theme="dark"] #cookiePopup {
  background: #1A1D24 !important;
  border-top-color: #383F50 !important;
  color: #F5F6F8 !important;
}
[data-theme="dark"] #cookiePopup h5 {
  color: #F5F6F8 !important;
}
[data-theme="dark"] #cookiePopup p {
  color: #B5B9C2 !important;
}
[data-theme="dark"] #cookiePopup #acceptCookie {
  background: var(--orange) !important;
  color: #121316 !important;
  border-color: #121316 !important;
}