/* ==========================================================
   VIPER SMART FILMS | الأفعى الذكية — film & protection, Al Bawadi
   Smoked glass and a hot afternoon. Blue-black, glass-grey and a
   single sun-orange — the thing their film is there to stop.
   ========================================================== */

:root{
  --smoke:  #11161B;
  --smoke-2:#19212A;
  --smoke-3:#25303B;
  --glass:  #8FB3C9;
  --mist:   #E8EDF1;
  --amb:    #FF8A3D;
  --amb-d:  #E06A1C;
  --mut:    #8A97A3;
  --line:   rgba(143,179,201,.18);

  --ff:  'Noto Sans Arabic', system-ui, sans-serif;
  --ff-d:'Kufam', 'Noto Sans Arabic', sans-serif;
  --wrp: 1220px;
  --pad: clamp(20px, 5vw, 56px);
  --e:   cubic-bezier(.22,.7,.14,1);
}
html[lang="en"]{ --ff:'Kufam', system-ui, sans-serif; --ff-d:'Chakra Petch', 'Kufam', sans-serif; }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:86px; -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--smoke); color:var(--mist); font-family:var(--ff); font-size:16.5px; line-height:1.85; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
html[lang="en"] body{ font-size:15.5px; line-height:1.75; }
body.lock{ overflow:hidden; }
img,svg,iframe{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3{ margin:0; font-family:var(--ff-d); font-weight:800; line-height:1.3; }
html[lang="en"] h1,html[lang="en"] h2{ font-weight:700; text-transform:uppercase; line-height:1; letter-spacing:-.01em; }
p,dl,dd,dt,figure,blockquote,address{ margin:0; font-style:normal; }
ul,ol{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:2px solid var(--amb); outline-offset:3px; }
::selection{ background:var(--amb); color:var(--smoke); }

.wrp{ width:100%; max-width:var(--wrp); margin-inline:auto; padding-inline:var(--pad); }
.rv{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--e), transform .9s var(--e); transition-delay:var(--d,0s); }
.rv.in{ opacity:1; transform:none; }

/* buttons with the cut corner of a film template */
.btn{ display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:10px 26px; font-weight:700; font-size:16px; white-space:nowrap;
  clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); transition:background .3s, color .3s; }
html[lang="en"] .btn{ font-family:'Chakra Petch',sans-serif; text-transform:uppercase; letter-spacing:.06em; font-size:14.5px; }
.btn--amb{ background:var(--amb); color:var(--smoke); }
.btn--amb:hover{ background:#FFA266; }
.btn--line{ background:var(--smoke-3); color:var(--mist); }
.btn--line:hover{ background:var(--glass); color:var(--smoke); }
.btn--lg{ min-height:56px; padding:12px 30px; }

/* nav */
.nav{ position:fixed; top:0; inset-inline:0; z-index:900; padding-block:16px; transition:background .4s, padding .4s, transform .5s var(--e); }
.nav.stuck{ background:rgba(17,22,27,.9); padding-block:9px; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 1px 0 var(--line); }
.nav.slid{ transform:translateY(-130%); }
.nav__in{ width:100%; max-width:var(--wrp); margin-inline:auto; padding-inline:var(--pad); display:flex; align-items:center; gap:20px; }
.mark{ display:flex; align-items:center; gap:11px; }
.mark__v{ width:34px; height:34px; fill:var(--amb); }
.mark__eye{ fill:none; stroke:var(--smoke); stroke-width:2.4; stroke-linejoin:round; }
.mark__t{ display:grid; line-height:1.2; }
.mark__t b{ font-family:'Kufam',sans-serif; font-weight:800; font-size:18px; }
.mark__t i{ font-style:normal; font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:10px; letter-spacing:.2em; color:var(--glass); }
.menu{ display:flex; gap:28px; margin-inline:auto; }
.menu a{ color:var(--mut); font-weight:500; transition:color .3s; }
.menu a:hover{ color:var(--mist); }
.nav__r{ display:flex; align-items:center; gap:10px; }
.lng{ min-width:40px; height:40px; border:1px solid var(--line); font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:13px; color:var(--glass); }
.nav__cta{ min-height:40px; padding:6px 18px; }
.brg{ display:none; width:44px; height:44px; flex-direction:column; justify-content:center; gap:8px; padding:0 10px; }
.brg i{ display:block; height:2px; background:var(--mist); transition:.4s var(--e); }
.brg.on i:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.brg.on i:nth-child(2){ transform:translateY(-5px) rotate(-45deg); }

/* hero */
.hero{ padding-block:clamp(110px,15vh,150px) clamp(60px,8vw,110px); background:radial-gradient(80% 60% at 85% 10%, rgba(255,138,61,.14), transparent 60%), var(--smoke); overflow:hidden; }
.hero__in{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(30px,5vw,70px); align-items:center; }
.eyb{ color:var(--glass); font-weight:500; margin-bottom:12px; }
html[lang="en"] .eyb{ font-family:'Chakra Petch',sans-serif; text-transform:uppercase; letter-spacing:.14em; font-size:13px; }
.hero__h{ font-size:clamp(2.6rem,6.4vw,5rem); margin-bottom:18px; }
.hero__h .wm{ display:inline-block; overflow:hidden; vertical-align:bottom; padding-block:.1em; }
.hero__h .wm > i{ display:inline-block; font-style:normal; transform:translateY(105%); animation:up .9s var(--e) forwards; animation-delay:calc(.15s + var(--i) * .1s); }
@keyframes up{ to{ transform:none } }
.hero__p{ color:#B9C5CF; max-width:40ch; margin-bottom:28px; font-size:clamp(16.5px,1.7vw,18.5px); }
.hero__act{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---- the window ---- */
.win{ display:grid; gap:16px; }
/* a rear side window: sloped A-pillar, flat sill, rounded top */
.win__frame{ position:relative; aspect-ratio:16/10; overflow:hidden; border-radius:10px 40% 10px 10px;
  clip-path:polygon(16% 0, 100% 0, 100% 100%, 0 100%, 0 38%);
  background:#000; box-shadow:inset 0 0 0 10px #0B0F13; }
[dir="rtl"] .win__frame{ border-radius:40% 10px 10px 10px; clip-path:polygon(0 0, 84% 0, 100% 38%, 100% 100%, 0 100%); }
.win__scene{ position:absolute; inset:0; background:linear-gradient(180deg, #F7C27A 0%, #F39A55 46%, #E26B3A 70%, #6B3A2E 100%); }
.win__sun{ position:absolute; width:22%; aspect-ratio:1; border-radius:50%; top:14%; inset-inline-start:18%; background:#FFF4D6; box-shadow:0 0 60px 20px rgba(255,230,170,.8); }
.win__glare{ position:absolute; width:90%; aspect-ratio:1; border-radius:50%; top:-30%; inset-inline-start:-10%;
  background:radial-gradient(circle, rgba(255,250,230,.9), rgba(255,220,160,.3) 30%, transparent 60%);
  opacity:calc(1 - var(--t) * 1.3); transition:opacity .7s var(--e); animation:glare 4s ease-in-out infinite alternate; }
@keyframes glare{ to{ transform:scale(1.08) } }
.win__city{ position:absolute; bottom:12%; inset-inline:0; width:100%; height:34%; fill:#3B2420; opacity:.85; }
.win__road{ position:absolute; bottom:0; inset-inline:0; height:13%; background:#2A1A18; }
.win__film{ position:absolute; inset:0; background:#0A1016; opacity:var(--t); transition:opacity .7s var(--e); }
.win__sheen{ position:absolute; inset:-20%; background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.14) 46%, transparent 52%); pointer-events:none; }
.shades{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.shades button{ display:grid; justify-items:center; gap:6px; padding:8px 10px; min-width:74px; border:1px solid transparent; transition:border-color .3s, background .3s; }
.shades button i{ width:34px; height:34px; border-radius:50%; background:linear-gradient(180deg,#F7C27A,#E26B3A); position:relative; overflow:hidden; box-shadow:0 0 0 2px var(--smoke-3); }
.shades button i::after{ content:''; position:absolute; inset:0; background:#0A1016; opacity:var(--s); }
.shades button span{ font-size:14px; font-weight:600; color:var(--mut); }
.shades button.on{ border-color:var(--amb); background:rgba(255,138,61,.08); }
.shades button.on span{ color:var(--amb); }
.shades button.on i{ box-shadow:0 0 0 2px var(--amb); }
.win__n{ text-align:center; color:var(--mut); font-size:13.5px; }

/* sections */
.sec{ padding-block:clamp(70px,10vw,130px); }
.hd{ max-width:760px; margin-bottom:clamp(30px,5vw,54px); }
.kick{ color:var(--amb); font-weight:600; margin-bottom:8px; }
html[lang="en"] .kick{ font-family:'Chakra Petch',sans-serif; text-transform:uppercase; letter-spacing:.16em; font-size:13px; }
.h2{ font-size:clamp(2.1rem,4.8vw,3.6rem); }

/* service zones */
.serv{ background:var(--smoke-2); }
.zones{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px; background:var(--line); border:1px solid var(--line); }
.zone{ background:var(--smoke-2); padding:30px 28px; display:grid; gap:18px; align-content:start; }
.zone:nth-child(2){ --d:.08s } .zone:nth-child(3){ --d:.16s }
.zone__k{ font-family:var(--ff-d); font-weight:800; font-size:clamp(1.6rem,2.6vw,2.1rem); color:var(--glass); }
html[lang="en"] .zone__k{ text-transform:uppercase; }
.zone ul{ display:grid; gap:12px; }
.zone li{ position:relative; padding-inline-start:22px; }
.zone li::before{ content:''; position:absolute; inset-inline-start:0; top:.75em; width:10px; height:2px; background:var(--amb); }

/* ppf */
.ppf__in{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(30px,5vw,70px); align-items:center; }
.heal{ position:relative; aspect-ratio:3/2; border-radius:12px; overflow:hidden; background:linear-gradient(160deg, #3A4652, #1C232B 60%, #12171C); box-shadow:inset 0 1px 0 rgba(255,255,255,.12); }
.heal::after{ content:''; position:absolute; inset:0; background:linear-gradient(100deg, transparent 30%, rgba(255,160,90,.35) 48%, transparent 66%); transform:translateX(-120%); }
.heal.go::after{ animation:warm 2.4s var(--e) forwards; }
@keyframes warm{ to{ transform:translateX(120%) } }
.heal svg{ position:absolute; inset:0; width:100%; height:100%; }
.heal__scr{ fill:none; stroke:rgba(255,255,255,.75); stroke-width:1.6; stroke-linecap:round; stroke-dasharray:4 3; transition:opacity 2s ease .6s; }
.heal.go .heal__scr{ opacity:0; }
.heal__tag{ position:absolute; bottom:14px; inset-inline-start:14px; padding:4px 12px; background:rgba(0,0,0,.45); font-weight:600; font-size:13.5px; }
.ppf__p{ color:#B9C5CF; margin-block:14px 16px; }
.feats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.feats li{ border:1px solid var(--line); padding:12px 14px; font-weight:600; }
.feats li::before{ content:'◇'; color:var(--amb); margin-inline-end:8px; }

/* quote */
.quote{ background:var(--amb); color:var(--smoke); padding-block:clamp(60px,8vw,100px); }
.quote__s{ letter-spacing:4px; font-size:18px; }
.quote blockquote{ font-family:'Noto Sans Arabic',sans-serif; font-weight:600; font-size:clamp(1.25rem,2.4vw,1.75rem); line-height:1.75; margin-block:14px 16px; max-width:40ch; }
.quote__w{ font-weight:700; }

/* visit */
.visit__in{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(30px,5vw,70px); align-items:center; }
.visit address{ color:#B9C5CF; margin-block:12px 12px; }
.open{ display:inline-flex; align-items:center; gap:10px; font-weight:600; margin-bottom:14px; }
.open:empty{ display:none; }
.open i{ width:9px; height:9px; border-radius:50%; background:#45D483; }
.open.closed i{ background:var(--mut); }
.tbl{ width:100%; border-collapse:collapse; margin-bottom:24px; }
.tbl th,.tbl td{ padding:11px 0; border-bottom:1px solid var(--line); font-weight:500; text-align:start; }
.tbl td{ text-align:end; }
.tbl tr.off{ color:var(--mut); }
.visit__act{ display:flex; flex-wrap:wrap; gap:10px; }
.mapf{ aspect-ratio:4/3; overflow:hidden; border:1px solid var(--line); }
.mapf iframe{ width:100%; height:100%; border:0; filter:invert(.9) hue-rotate(180deg) saturate(.6) contrast(.95); }

/* footer */
.ft{ background:#0B0F13; padding-block:56px 110px; }
.ft__in{ display:grid; justify-items:center; gap:22px; text-align:center; }
.ft__nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:22px; color:var(--mut); }
.ft__end{ display:grid; gap:4px; font-size:13.5px; color:var(--mut); }
.credit a{ color:var(--mist); border-bottom:1px solid var(--amb); }

.dock{ position:fixed; inset-inline:12px; bottom:12px; z-index:950; display:none; gap:8px; transform:translateY(140%); transition:transform .5s var(--e); }
.dock.on{ transform:none; }
.dock a{ height:56px; display:grid; place-items:center; font-weight:700; clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }
.dock__call{ flex:0 0 32%; background:var(--smoke-3); }
.dock__go{ flex:1; background:var(--amb); color:var(--smoke); }

@media (max-width:980px){
  .hero__in,.ppf__in,.visit__in{ grid-template-columns:minmax(0,1fr); }
  .zones{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:860px){
  .brg{ display:flex; }
  .nav__cta{ display:none; }
  .menu{ position:fixed; top:0; left:0; width:100vw; height:100dvh; margin:0; flex-direction:column; justify-content:center; align-items:center; gap:24px;
    background:var(--smoke); font-size:28px; opacity:0; visibility:hidden; transition:opacity .4s, visibility .4s; z-index:-1; }
  .menu.open{ opacity:1; visibility:visible; }
  .menu a{ color:var(--mist); }
  .dock{ display:flex; }
}
@media (max-width:520px){
  .hero__act .btn{ flex:1; }
  .shades button{ min-width:64px; padding:6px; }
  .feats{ grid-template-columns:minmax(0,1fr); }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .rv{ opacity:1; transform:none; }
}