/* ============================================================
   TRORO — Gulf site
   Direction: semlerpremium.dk restraint · one accent · two weights
   ============================================================ */

/* ---------- Primitives ---------- */
:root{
  --black:#0B0B0E;
  --dark:#1A1A1A;
  --offwhite:#F8F8F8;
  --white:#FFFFFF;
  --hairline:#E2E2E2;
  --ink:#202020;
  --grey-600:#5E5E64;
  --lime:#EEFF5B;
  --lime-glow:rgba(238,255,91,.55);
  --danger:#B42318;

  /* ---------- Semantic tokens ---------- */
  --color-bg:var(--white);
  --color-bg-alt:var(--offwhite);
  --color-surface:var(--white);
  --color-text:var(--ink);
  --color-text-strong:var(--black);
  --color-text-muted:var(--grey-600);
  --color-border:var(--hairline);
  --color-accent:var(--lime);
  --color-on-accent:var(--black);
  --color-mark:var(--black);
  --color-focus:var(--black);

  /* ---------- Type ---------- */
  --font:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --stretch-head:125%;
  --track-head:-.02em;
  --track-label:.05em;
  --lh-head:1.1;
  --lh-body:1.4;
  --lh-lead:1.5;

  --fs-display:clamp(3.1rem,1rem + 8vw,9.5rem);
  --fs-h1:clamp(2.75rem,1.2rem + 5.4vw,6.25rem);
  --fs-h2:clamp(2.1rem,1.1rem + 3.7vw,4.6rem);
  --fs-h3:clamp(1.25rem,1.05rem + .7vw,1.65rem);
  --fs-lead:clamp(1.0625rem,.98rem + .4vw,1.3125rem);
  --fs-body:1rem;
  --fs-small:.875rem;
  --fs-label:.8125rem;

  /* ---------- Space & shape ---------- */
  --gutter:clamp(20px,4.6vw,72px);
  --maxw:1360px;
  --section-y:clamp(96px,12vw,184px);
  --r-media:8px;
  --r-card:12px;
  --r-pill:999px;
  --shadow-soft:0 1px 2px rgba(11,11,14,.04),0 8px 24px -12px rgba(11,11,14,.16);
  --shadow-lift:0 2px 4px rgba(11,11,14,.05),0 24px 48px -20px rgba(11,11,14,.28);

  /* ---------- Motion ---------- */
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-reveal:cubic-bezier(.7,0,.3,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:150ms;
  --dur:300ms;
  --dur-reveal:.5s;

  --dir:1;
}
[dir="rtl"]{--dir:-1}

html[lang="ar"]{
  --font:"IBM Plex Sans Arabic","Archivo",ui-sans-serif,system-ui,sans-serif;
  --stretch-head:100%;
  --track-head:0;
  --track-label:0;
  --lh-head:1.3;
  --lh-body:1.6;
  --lh-lead:1.7;
  --fs-body:1.0625rem;
}

[data-theme="dark"]{
  --color-bg:var(--black);
  --color-bg-alt:var(--dark);
  --color-surface:#141417;
  --color-text:#EDEDEE;
  --color-text-strong:var(--offwhite);
  --color-text-muted:rgba(248,248,248,.64);
  --color-border:rgba(255,255,255,.12);
  --color-mark:var(--lime);
  --color-focus:var(--lime);
}
[data-theme="alt"]{--color-bg:var(--offwhite)}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;background:var(--white);color:var(--color-text);
  font-family:var(--font);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,video,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
h1,h2,h3,h4,p,figure,blockquote,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
::selection{background:var(--lime);color:var(--black)}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px;border-radius:4px}
[hidden]{display:none!important}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{
  position:fixed;inset-block-start:12px;inset-inline-start:12px;z-index:200;
  padding:10px 18px;border-radius:var(--r-pill);background:var(--black);color:var(--white);
  translate:0 -160%;transition:translate var(--dur) var(--ease);
}
.skip-link:focus{translate:0 0}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{position:relative;padding-block:var(--section-y);background:var(--color-bg);color:var(--color-text)}

/* ---------- Type ---------- */
.display,.h1,.h2,.h3{
  font-weight:700;font-stretch:var(--stretch-head);letter-spacing:var(--track-head);
  line-height:var(--lh-head);color:var(--color-text-strong);text-wrap:balance;
}
.display{font-size:var(--fs-display);line-height:1}
.h1{font-size:var(--fs-h1);line-height:1.02}
.h2{font-size:var(--fs-h2)}
.h3{font-size:var(--fs-h3)}
html[lang="ar"] .display,html[lang="ar"] .h1{line-height:1.2}
.lead{font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--color-text-muted);max-width:56ch;text-wrap:pretty}
.label{
  display:inline-flex;align-items:center;gap:10px;
  font-size:var(--fs-label);letter-spacing:var(--track-label);color:var(--color-text-muted);
}
.label::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 1.5px var(--black)}
[data-theme="dark"] .label::before{box-shadow:0 0 12px var(--lime-glow)}
.num{font-variant-numeric:tabular-nums}

/* ---------- Buttons: pill + round arrow icon ---------- */
.btn{
  --btn-bg:transparent;--btn-fg:var(--black);--btn-line:transparent;
  --icon-bg:var(--black);--icon-fg:var(--lime);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:14px;
  min-height:54px;padding-block:6px;padding-inline:26px 26px;border-radius:var(--r-pill);
  background:var(--btn-bg);color:var(--btn-fg);box-shadow:inset 0 0 0 1.5px var(--btn-line);
  font-size:.9375rem;font-weight:700;letter-spacing:.01em;white-space:nowrap;
  transition:translate var(--dur) var(--ease),scale var(--dur-fast) var(--ease),box-shadow var(--dur) var(--ease),background-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.btn:has(.btn__icon){padding-inline:26px 6px}
html[lang="ar"] .btn{letter-spacing:0}
.btn:active{scale:.97}
.btn__icon{
  display:grid;place-items:center;width:42px;height:42px;border-radius:50%;flex:none;
  background:var(--icon-bg);color:var(--icon-fg);
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.btn__icon svg{width:18px;height:18px;transition:translate var(--dur) var(--ease)}
.btn--outline{--btn-line:var(--black)}
.btn--outline-light{--btn-fg:var(--white);--btn-line:rgba(255,255,255,.7);--icon-bg:var(--lime);--icon-fg:var(--black)}
.btn--lime{--btn-bg:var(--lime);--btn-fg:var(--black)}
.btn--black{--btn-bg:var(--black);--btn-fg:var(--white);--icon-bg:var(--lime);--icon-fg:var(--black)}
.btn--sm{min-height:44px;font-size:.875rem;padding-inline:18px}
.btn--sm:has(.btn__icon){padding-inline:18px 5px}
.btn--sm .btn__icon{width:34px;height:34px}
.btn--sm .btn__icon svg{width:15px;height:15px}
@media (hover:hover){
  .btn:hover .btn__icon svg{translate:calc(3px * var(--dir)) 0}
  .btn--outline:hover{--btn-bg:var(--black);--btn-fg:var(--white);--icon-bg:var(--lime);--icon-fg:var(--black)}
  .btn--outline-light:hover{--btn-bg:var(--white);--btn-fg:var(--black);--btn-line:var(--white);--icon-bg:var(--black);--icon-fg:var(--lime)}
  .btn--lime:hover,.btn--black:hover{translate:0 -2px;box-shadow:0 16px 34px -16px rgba(11,11,14,.55)}
}
.arrow{scale:var(--dir) 1}

/* link: lime highlighter that grows from the start edge */
.link{
  background-image:linear-gradient(var(--lime),var(--lime));
  background-repeat:no-repeat;background-size:0% 38%;background-position:left 92%;
  padding-inline:1px;transition:background-size var(--dur) var(--ease);
}
[dir="rtl"] .link{background-position:right 92%}
[data-theme="dark"] .link{background-size:0% 1px;background-position:left 100%}
[dir="rtl"] [data-theme="dark"] .link{background-position:right 100%}
@media (hover:hover){
  .link:hover{background-size:100% 38%}
  [data-theme="dark"] .link:hover{background-size:100% 1px}
}

/* ---------- Scroll progress (lives inside the nav) ---------- */
.progress{
  position:absolute;inset-inline:0;inset-block-start:0;height:2px;z-index:2;
  background:var(--nav-accent);transform-origin:left center;transform:scaleX(0);pointer-events:none;
}
[dir="rtl"] .progress{transform-origin:right center}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;inset-inline:0;inset-block-start:0;z-index:100;
  --nav-fg:var(--black);--nav-muted:rgba(11,11,14,.62);--nav-bg:rgba(248,248,248,.72);--nav-line:rgba(11,11,14,.08);--nav-accent:var(--black);
  color:var(--nav-fg);
  transition:color var(--dur) var(--ease),translate var(--dur) var(--ease);
}
.nav[data-tone="dark"]{--nav-fg:var(--white);--nav-muted:rgba(255,255,255,.68);--nav-bg:rgba(11,11,14,.6);--nav-line:rgba(255,255,255,.1);--nav-accent:var(--lime)}
.nav::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--nav-bg);border-block-end:1px solid var(--nav-line);
  -webkit-backdrop-filter:saturate(1.4) blur(18px);backdrop-filter:saturate(1.4) blur(18px);
  opacity:0;transition:opacity var(--dur) var(--ease),background-color var(--dur) var(--ease);
}
.nav.is-solid::before{opacity:1}
.nav__inner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  max-width:var(--maxw);margin-inline:auto;padding:14px var(--gutter);
}
.brand{display:inline-flex;align-items:center;flex:none;color:inherit}
.brand__logo{height:36px;width:auto;aspect-ratio:293.3 / 100;fill:currentColor;transition:color var(--dur) var(--ease)}
.brand-sprite{position:absolute;width:0;height:0;overflow:hidden}
.nav__links{display:flex;align-items:center;gap:30px}
.nav__links a{font-size:.9375rem;color:var(--nav-muted);transition:color var(--dur) var(--ease)}
@media (hover:hover){.nav__links a:hover{color:var(--nav-fg)}}
.nav__actions{display:flex;align-items:center;gap:14px}
.lang{display:inline-flex;align-items:center;gap:8px;font-size:.875rem;color:var(--nav-muted)}
.lang a{padding:6px 2px;transition:color var(--dur) var(--ease)}
.lang a[aria-current="true"]{color:var(--nav-fg);font-weight:700}
.lang .sep{width:1px;height:14px;background:currentColor;opacity:.4}
.lang a[lang="ar"]{font-family:"IBM Plex Sans Arabic",var(--font)}
.lang a[lang="en"]{font-family:"Archivo",var(--font)}
.nav .btn--nav{--btn-bg:var(--black);--btn-fg:var(--white);--icon-bg:var(--lime);--icon-fg:var(--black)}
.nav[data-tone="dark"] .btn--nav{--btn-bg:var(--white);--btn-fg:var(--black);--icon-bg:var(--black);--icon-fg:var(--lime)}
.nav__burger{display:none;width:42px;height:42px;border-radius:50%;align-items:center;justify-content:center}
.nav__burger span{position:relative;display:block;width:18px;height:1.5px;background:currentColor;transition:background-color var(--dur-fast) var(--ease)}
.nav__burger span::before,.nav__burger span::after{content:"";position:absolute;inset-inline:0;height:1.5px;background:currentColor;transition:translate var(--dur) var(--ease),rotate var(--dur) var(--ease)}
.nav__burger span::before{translate:0 -6px}
.nav__burger span::after{translate:0 6px}
.nav.is-open .nav__burger span{background:transparent}
.nav.is-open .nav__burger span::before{translate:0 0;rotate:45deg}
.nav.is-open .nav__burger span::after{translate:0 0;rotate:-45deg}
.nav__drawer{display:none}

@media (max-width:1020px){
  .nav__links{display:none}
  .nav__burger{display:inline-flex}
  .nav__actions .btn--nav{display:none}
  .nav__drawer{
    display:flex;flex-direction:column;gap:6px;position:fixed;inset-inline:0;inset-block-start:0;z-index:-2;
    padding:88px var(--gutter) 28px;background:var(--offwhite);color:var(--black);
    translate:0 -100%;visibility:hidden;
    transition:translate .5s var(--ease-reveal),visibility 0s linear .5s;
  }
  .nav.is-open .nav__drawer{translate:0 0;visibility:visible;transition:translate .5s var(--ease-reveal)}
  .nav.is-open{--nav-fg:var(--black);--nav-muted:rgba(11,11,14,.62);color:var(--black)}
  .nav.is-open::before{opacity:0}
  .nav__drawer a{font-size:1.75rem;font-weight:700;font-stretch:var(--stretch-head);padding-block:8px;border-block-end:1px solid var(--hairline)}
  .nav__drawer .btn{margin-block-start:18px;font-size:1rem;border:0;justify-content:space-between}
  .nav.is-open{--nav-accent:var(--black)}
}
body.no-scroll{overflow:hidden}

/* ============================================================
   MOTION UTILITIES
   ============================================================ */
.js .reveal{opacity:0;translate:0 28px;transition:opacity .8s var(--ease-out),translate .8s var(--ease-out);transition-delay:var(--delay,0ms)}
.js .reveal.is-in{opacity:1;translate:0 0}

.js .lines .line{display:block;overflow:clip;padding-block-end:.08em;margin-block-end:-.08em}
.js .lines .line>span{display:inline-block;translate:0 105%;transition:translate .9s var(--ease-out);transition-delay:calc(var(--i,0) * 90ms + var(--delay,0ms))}
.js .lines.is-in .line>span{translate:0 0}

.js [data-scrub-words] .w{color:#C8C8CC;transition:color .35s var(--ease)}
.js [data-scrub-words] .w.is-lit{color:var(--color-text-strong)}

.js .curtain{clip-path:inset(100% 0 0 0);transition:clip-path .9s var(--ease-reveal)}
.js .curtain.is-in{clip-path:inset(0 0 0 0)}

.js .scale-in img,.js .scale-in video{scale:1.08;transition:scale 1.4s var(--ease-out)}
.js .scale-in.is-in img,.js .scale-in.is-in video{scale:1}

/* blur-up media */
.media{position:relative;overflow:hidden;background:var(--dark) var(--lq,none) center/cover no-repeat;border-radius:var(--r-media)}
.media::before{content:"";position:absolute;inset:-12px;background:inherit;filter:blur(14px);transition:opacity .6s var(--ease)}
.media>img,.media>video{position:relative;width:100%;height:100%;object-fit:cover}
.js .media>img[loading="lazy"]{opacity:0;transition:opacity .6s var(--ease),scale 1.4s var(--ease-out)}
.js .media>img.is-loaded{opacity:1}
.media.is-loaded::before{opacity:0}
.media::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);pointer-events:none}
[data-theme="dark"] .media::after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
@media (max-width:720px){.media{--r-media:0px}}

.grain{position:relative;isolation:isolate}
.grain::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.06;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   HERO — pinned stage, portrait video card scrubbed by scroll + cursor
   ============================================================ */
.hero{position:relative;background:var(--black);color:var(--offwhite)}
.hero.is-scrub{height:240vh}
.hero__stage{
  position:relative;height:100vh;height:100svh;min-height:620px;overflow:clip;
  touch-action:pan-y;
}
.hero.is-scrub .hero__stage{position:sticky;inset-block-start:0}
.hero__glow{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 50% at 50% 58%,rgba(238,255,91,.07),transparent 70%),
    radial-gradient(40% 60% at 50% 40%,rgba(255,255,255,.05),transparent 70%);
}
.hero__card{
  --card-h:min(100svh,1280px);
  position:absolute;top:50%;left:50%;
  height:var(--card-h);aspect-ratio:9/16;
  translate:-50% -50%;scale:.64;transform-origin:50% 50%;
  border-radius:var(--r-media);overflow:hidden;background:var(--dark);
  box-shadow:0 40px 120px -40px rgba(0,0,0,.9);
  will-change:scale;
}
.hero__card video,.hero__card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,11,14,.35) 0%,transparent 26%,transparent 60%,rgba(11,11,14,.72) 100%);
}
.js .hero__card{clip-path:inset(100% 0 0 0);transition:clip-path 1.1s var(--ease-reveal) .1s}
.js .hero.is-ready .hero__card{clip-path:inset(0 0 0 0)}

.hero__title{
  position:absolute;inset-inline:var(--gutter);top:50%;translate:0 -50%;z-index:2;
  font-size:var(--fs-display);color:var(--white);pointer-events:none;
}
.hero__title .line{display:block}
.hero__title .line:first-child{text-align:start}
.hero__title .line:nth-child(2){text-align:end}
.hero__title .line>span{display:inline-block;will-change:translate,opacity}
/* clip only top and bottom (for the rise-in); the lines also slide sideways on scroll, so the sides must not clip */
.js .hero__title .line{overflow:visible;clip-path:inset(0 -100vw);padding-block-end:.06em}
.js .hero__title .line>span>span{display:inline-block;translate:0 105%;transition:translate 1s var(--ease-out)}
.js .hero__title .line:nth-child(2)>span>span{transition-delay:.12s}
.js .hero.is-ready .hero__title .line>span>span{translate:0 0}

.hero__foot{
  position:absolute;inset-inline:var(--gutter);inset-block-end:clamp(28px,6vh,64px);z-index:3;
  display:flex;align-items:flex-end;justify-content:space-between;gap:32px;
}
.hero__intro{max-width:30rem;display:grid;gap:22px;justify-items:start}
.hero__sub{font-size:var(--fs-lead);line-height:var(--lh-lead);color:rgba(248,248,248,.78)}
.hero__region{font-size:var(--fs-label);letter-spacing:var(--track-label);color:rgba(248,248,248,.56);text-align:end}
.js .hero__intro,.js .hero__region{opacity:0;translate:0 16px;transition:opacity .8s var(--ease-out) .55s,translate .8s var(--ease-out) .55s}
.js .hero.is-ready .hero__intro,.js .hero.is-ready .hero__region{opacity:1;translate:0 0}
.js .hero.is-settled .hero__intro,.js .hero.is-settled .hero__region{transition:none}

.hero__hint{
  position:absolute;left:50%;translate:-50% 0;inset-block-end:18px;z-index:3;
  display:grid;justify-items:center;gap:8px;font-size:.75rem;letter-spacing:var(--track-label);color:rgba(248,248,248,.6);
}
.hero__hint i{position:relative;display:block;width:1px;height:34px;background:rgba(255,255,255,.18);overflow:hidden}
.hero__hint i::after{content:"";position:absolute;inset-inline:0;top:0;height:40%;background:var(--white);animation:hint 1.8s var(--ease) infinite}
@keyframes hint{0%{translate:0 -100%}100%{translate:0 260%}}

.hero__specs{
  --col:calc(min(100svh,1280px) * 9 / 16 + 72px);
  position:absolute;inset:0;z-index:2;pointer-events:none;
  display:grid;grid-template-columns:1fr var(--col) 1fr;grid-template-rows:1fr auto auto 1fr;
  grid-template-areas:". . ." "a . c" "b . c" ". . .";
  column-gap:0;row-gap:40px;padding-inline:var(--gutter);
}
.spec{display:grid;gap:6px;max-width:19rem;opacity:0;translate:0 20px;will-change:opacity,translate}
.spec:nth-child(1){grid-area:a;justify-self:end;margin-inline-end:8px;width:min(17rem,100%)}
.spec:nth-child(2){grid-area:b;justify-self:end;margin-inline-end:8px;width:min(17rem,100%)}
.spec:nth-child(3){grid-area:c;align-self:center;margin-inline-start:8px}
.spec__n{font-size:.75rem;letter-spacing:var(--track-label);color:var(--lime);font-variant-numeric:tabular-nums}
.spec strong{font-size:var(--fs-h3);font-weight:700;font-stretch:var(--stretch-head);letter-spacing:var(--track-head);line-height:1.15;color:var(--white)}
.spec span:last-child{color:rgba(248,248,248,.66);font-size:.9375rem}
.spec--big strong{font-size:clamp(2.4rem,1.2rem + 3vw,4.25rem);line-height:1}

@media (max-width:900px){
  .hero.is-scrub{height:200vh}
  .hero__card{inset:0;top:0;left:0;height:100%;width:100%;aspect-ratio:auto;translate:none;scale:1;border-radius:0;box-shadow:none}
  .hero__card::after{background:linear-gradient(180deg,rgba(11,11,14,.55) 0%,transparent 22%,transparent 42%,rgba(11,11,14,.92) 100%)}
  .hero__title{top:auto;translate:none;inset-block-end:calc(clamp(28px,6vh,64px) + 210px);font-size:clamp(3rem,13.5vw,5.5rem)}
  .hero__title .line:nth-child(2){text-align:start}
  .hero__foot{flex-direction:column;align-items:stretch;gap:18px}
  .hero__intro{max-width:none}
  .hero__region{text-align:start}
  .hero__hint{display:none}
  .hero__specs{
    inset:auto 0 0 0;padding:0 var(--gutter) clamp(28px,6vh,64px);
    grid-template-columns:1fr;grid-template-rows:auto;grid-template-areas:"a" "b" "c";row-gap:18px;
  }
  .spec:nth-child(n){justify-self:start;margin:0;align-self:auto;max-width:none}
  .spec strong{font-size:1.375rem}
  .spec--big strong{font-size:2.5rem}
}
@media (max-width:900px) and (max-height:700px){.hero__title{font-size:clamp(2.6rem,11vw,4rem)}}

/* ============================================================
   STICKY CTA
   ============================================================ */
.sticky-cta{
  position:fixed;inset-inline-end:24px;inset-block-end:24px;z-index:90;
  display:flex;align-items:center;gap:10px;
  opacity:0;translate:0 24px;pointer-events:none;
  transition:opacity var(--dur) var(--ease),translate var(--dur) var(--ease);
}
.sticky-cta.is-visible{opacity:1;translate:0 0;pointer-events:auto}
.sticky-cta .btn{box-shadow:0 14px 34px -14px rgba(11,11,14,.5)}
.wa-btn{
  display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:var(--black);color:var(--white);flex:none;
  box-shadow:0 14px 34px -14px rgba(11,11,14,.5);
  transition:translate var(--dur) var(--ease),scale var(--dur-fast) var(--ease),color var(--dur) var(--ease);
}
.wa-btn svg{width:22px;height:22px}
.wa-btn:active{scale:.97}
@media (hover:hover){.wa-btn:hover{translate:0 -2px;color:var(--lime)}}
@media (max-width:720px){
  .sticky-cta{
    inset-inline:0;inset-block-end:0;gap:10px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(248,248,248,.86);border-block-start:1px solid rgba(11,11,14,.08);
    -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);translate:0 100%;
  }
  .sticky-cta .btn{flex:1;box-shadow:none;justify-content:space-between;padding-inline:62px 6px}
  .sticky-cta .btn__label{flex:1;text-align:center}
  .sticky-cta .wa-btn{box-shadow:none;width:52px;height:52px}
}

/* ============================================================
   INTRO / STATEMENT
   ============================================================ */
.intro__head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-block-end:clamp(28px,4vw,48px)}
.statement{
  font-size:clamp(1.9rem,.9rem + 3.2vw,4rem);font-weight:700;font-stretch:112%;
  letter-spacing:var(--track-head);line-height:1.12;color:var(--color-text-strong);max-width:22ch;text-wrap:balance;
}
html[lang="ar"] .statement{font-stretch:100%;line-height:1.35;max-width:26ch}
.statement .muted{color:#A3A3A8}
.intro__body{
  display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-block-start:clamp(48px,7vw,96px);
}
.intro__story{grid-column:1 / span 5;display:grid;gap:18px;align-content:start}
.intro__story p{color:var(--color-text-muted);max-width:44ch}
.stats{grid-column:7 / span 6;display:grid;grid-template-columns:repeat(3,1fr);border-block-start:1px solid var(--color-border)}
.stat{padding-block-start:22px;padding-inline-end:16px;display:grid;gap:8px;align-content:start}
.stat__n{
  display:inline-block;font-size:clamp(2.4rem,1.4rem + 2.6vw,4.25rem);font-weight:700;font-stretch:var(--stretch-head);
  letter-spacing:var(--track-head);line-height:1;color:var(--color-text-strong);font-variant-numeric:tabular-nums;
  transform-origin:left bottom;
}
[dir="rtl"] .stat__n{transform-origin:right bottom}
.stat__l{font-size:var(--fs-small);color:var(--color-text-muted)}
@media (max-width:900px){
  .intro__story,.stats{grid-column:1 / -1}
  .intro__head{flex-direction:column;align-items:flex-start}
}
@media (max-width:520px){.stats{grid-template-columns:1fr 1fr}.stat:last-child{grid-column:1 / -1}}

/* ============================================================
   SECTION HEAD (shared)
   ============================================================ */
.sec-head{display:grid;grid-template-columns:repeat(12,1fr);gap:20px 24px;align-items:end;margin-block-end:clamp(40px,6vw,80px)}
.sec-head__title{display:grid;gap:22px;justify-items:start}
.sec-head .sec-head__title{grid-column:1 / span 7}
.sec-head .lead{grid-column:8 / span 5}
@media (max-width:900px){.sec-head .sec-head__title,.sec-head .lead{grid-column:1 / -1}}
/* page links under a section's lead (e.g. "Car window tinting: compare GS and MQ") sit under the lead, not in a narrow column */
.sec-head>.link{grid-column:8 / span 5;justify-self:start;align-self:start;font-weight:700;margin-block-start:-4px}
@media (max-width:900px){.sec-head>.link{grid-column:1 / -1}}

/* ============================================================
   HEAT & UV — thermal sweep
   ============================================================ */
.heat__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:stretch}
.thermal{
  --p:0;
  grid-column:1 / span 7;position:relative;aspect-ratio:4 / 5;overflow:hidden;
  border-radius:var(--r-media);background:#05060c;isolation:isolate;
}
.thermal__layer{position:absolute;inset:0;isolation:isolate}
.thermal__layer img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.25) brightness(.9)}
.thermal__layer::before,.thermal__layer::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}
.thermal__layer--cool::before{background:linear-gradient(165deg,#07123a 0%,#1740c9 38%,#2fa8ff 62%,#0b2a8a 100%);mix-blend-mode:color}
.thermal__layer--cool::after{background:radial-gradient(70% 55% at 50% 40%,rgba(120,220,255,.35),transparent 70%);mix-blend-mode:overlay}
.thermal__hot-wrap{position:absolute;inset:0;overflow:hidden;translate:calc(var(--p) * 100% * var(--dir)) 0;will-change:translate}
.thermal__hot-wrap>.thermal__layer{translate:calc(var(--p) * -100% * var(--dir)) 0;will-change:translate}
.thermal__layer--hot::before{background:radial-gradient(85% 70% at 50% 42%,#fff3a8 0%,#ffc53a 16%,#ff7a18 36%,#e5261b 58%,#6d0f4e 88%);mix-blend-mode:color}
.thermal__layer--hot::after{background:radial-gradient(55% 40% at 50% 38%,rgba(255,236,160,.55),transparent 70%);mix-blend-mode:overlay}
.thermal__edge{position:absolute;inset:0;pointer-events:none;translate:calc(var(--p) * 100% * var(--dir)) 0;will-change:translate}
.thermal__edge::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:2px;margin-inline-start:-1px;background:var(--white);box-shadow:0 0 18px rgba(255,255,255,.8)}
.thermal__edge span{
  position:absolute;top:50%;inset-inline-start:0;translate:calc(var(--p) * -100% * var(--dir)) -50%;
  padding:7px 12px;border-radius:var(--r-pill);background:var(--white);color:var(--black);
  font-size:.75rem;font-weight:700;white-space:nowrap;box-shadow:var(--shadow-soft);
}
.thermal__hud{position:absolute;inset:0;padding:clamp(16px,2.4vw,28px);display:flex;flex-direction:column;justify-content:space-between;color:var(--white);pointer-events:none}
.thermal__top{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:.8125rem;letter-spacing:var(--track-label)}
.thermal__scale{display:flex;align-items:center;gap:10px;font-size:.75rem;opacity:.85}
.thermal__bar{position:relative;width:clamp(90px,12vw,150px);height:6px;border-radius:6px;background:linear-gradient(90deg,#fff3a8,#ff7a18,#e5261b,#6d0f4e,#1740c9,#2fa8ff)}
[dir="rtl"] .thermal__bar{background:linear-gradient(-90deg,#fff3a8,#ff7a18,#e5261b,#6d0f4e,#1740c9,#2fa8ff)}
.thermal__bar i{position:absolute;top:50%;inset-inline-start:0;width:12px;height:12px;margin-inline-start:-6px;border-radius:50%;background:var(--white);box-shadow:0 0 0 3px rgba(0,0,0,.25);translate:0 -50%;left:calc(var(--p) * 100%)}
[dir="rtl"] .thermal__bar i{left:auto;right:calc(var(--p) * 100%)}
.thermal__readout{display:grid;gap:4px;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.thermal__num{font-size:clamp(3rem,1.6rem + 4.4vw,6.5rem);font-weight:700;font-stretch:var(--stretch-head);letter-spacing:var(--track-head);line-height:1;font-variant-numeric:tabular-nums}
.thermal__num small{font-size:.32em;font-weight:700;letter-spacing:0;vertical-align:.25em;margin-inline-end:.35em}
.thermal__cap{font-size:.9375rem;opacity:.9}

.heat__side{grid-column:8 / span 5;display:grid;grid-template-rows:1fr auto;gap:18px}
.heat__video{min-height:0;aspect-ratio:auto;height:100%}
.heat__video video{position:absolute;inset:0}
.heat__caption{display:flex;justify-content:space-between;gap:16px;font-size:var(--fs-small);color:var(--color-text-muted)}

.film-list{margin-block-start:clamp(48px,6vw,88px);border-block-start:1px solid var(--color-border)}
.film-row{
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr) minmax(0,2fr);gap:24px;align-items:baseline;
  padding-block:24px;border-block-end:1px solid var(--color-border);
}
.film-row h3{font-size:1.125rem;font-weight:700;font-stretch:var(--stretch-head);letter-spacing:var(--track-head);color:var(--color-text-strong)}
.film-row p{color:var(--color-text-muted)}
.film-row .film-row__spec{text-align:end;font-weight:700;color:var(--color-text-strong);font-variant-numeric:tabular-nums}
@media (max-width:900px){
  .thermal,.heat__side{grid-column:1 / -1}
  .heat__video{aspect-ratio:4 / 5;height:auto}
  .film-row{grid-template-columns:1fr auto;gap:6px 16px}
  .film-row p{grid-column:1 / -1;grid-row:2}
}

/* ============================================================
   SELF-HEALING — the black event
   ============================================================ */
.heal{overflow:clip}
.heal__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start}
.heal-stage{
  grid-column:1 / span 8;position:relative;aspect-ratio:16 / 11;overflow:hidden;
  border-radius:var(--r-media);background:#0f0f12;cursor:crosshair;touch-action:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.heal-stage canvas{width:100%;height:100%}
.heal-stage.is-shaking{animation:shake .18s var(--ease)}
@keyframes shake{0%,100%{translate:0 0}25%{translate:1.5px -1px}50%{translate:-1.5px 1px}75%{translate:1px 1px}}
.heal-stage__badge{
  position:absolute;inset-block-start:16px;inset-inline-start:16px;display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:var(--r-pill);background:rgba(11,11,14,.6);color:var(--white);font-size:.8125rem;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}
.heal-stage__badge i{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 rgba(238,255,91,.7);animation:pulse 2s var(--ease) infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(238,255,91,0)}100%{box-shadow:0 0 0 0 rgba(238,255,91,0)}}
.heal-stage__hint{
  position:absolute;left:50%;top:50%;translate:-50% -50%;padding:10px 18px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.8);font-size:.875rem;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transition:opacity var(--dur) var(--ease);
}
.heal-stage.is-touched .heal-stage__hint{opacity:0}
.heal-stage__reset{position:absolute;inset-block-end:16px;inset-inline-end:16px;min-height:38px;padding:0 14px;background:rgba(255,255,255,.1);color:var(--white);font-size:.8125rem;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
@media (hover:hover){.heal-stage__reset:hover{background:rgba(255,255,255,.18)}}

.facts{grid-column:9 / span 4;display:grid;border-block-start:1px solid var(--color-border)}
.fact{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;padding-block:22px;border-block-end:1px solid var(--color-border)}
.fact__n{grid-row:span 2;font-size:.75rem;letter-spacing:var(--track-label);color:var(--color-text-muted);font-variant-numeric:tabular-nums;padding-block-start:4px}
.fact h3{font-size:1.125rem;font-weight:700;font-stretch:var(--stretch-head);letter-spacing:var(--track-head);color:var(--color-text-strong)}
.fact p{color:var(--color-text-muted);font-size:.9375rem}
@media (max-width:900px){
  .heal-stage{grid-column:1 / -1;aspect-ratio:4 / 5;margin-inline:calc(var(--gutter) * -1)}
  .facts{grid-column:1 / -1}
}
@media (max-width:720px){.heal-stage{border-radius:0}}

/* ============================================================
   FILMS — horizontal swipe slider
   ============================================================ */
.films__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-block-end:clamp(32px,4vw,56px)}
.films__controls{display:flex;align-items:center;gap:14px}
.films__count{font-size:var(--fs-small);color:var(--color-text-muted);font-variant-numeric:tabular-nums;min-width:4.5ch;text-align:center}
.round-btn{
  display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;
  border:1px solid var(--color-border);color:var(--color-text-strong);
  transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease),color var(--dur) var(--ease),scale var(--dur-fast) var(--ease),opacity var(--dur) var(--ease);
}
.round-btn svg{width:18px;height:18px}
.round-btn:active{scale:.97}
.round-btn:disabled{opacity:.35;cursor:default}
@media (hover:hover){.round-btn:not(:disabled):hover{background:var(--black);border-color:var(--black);color:var(--white)}}

.films__track{
  --edge:max(var(--gutter),calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--edge);padding-inline:var(--edge);padding-block:8px 28px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab;
}
.films__track::-webkit-scrollbar{display:none}
.films__track.is-dragging{cursor:grabbing;scroll-snap-type:none}
.films__track.is-dragging *{pointer-events:none}
.film-card{
  flex:0 0 clamp(272px,29vw,420px);scroll-snap-align:start;position:relative;
  border-radius:var(--r-card);background:var(--color-surface);
  transition:translate var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.film-card__media{aspect-ratio:3 / 4;border-radius:var(--r-card)}
.film-card__media img{user-select:none;-webkit-user-drag:none}
.film-card__tag{
  position:absolute;inset-block-start:14px;inset-inline-start:14px;z-index:2;
  padding:6px 11px;border-radius:var(--r-pill);background:rgba(255,255,255,.92);color:var(--black);font-size:.75rem;font-weight:700;
}
.film-card__tag--new{background:var(--lime)}
.film-card__body{display:grid;gap:14px;padding:18px 4px 0}
.film-card__name{font-size:clamp(1.5rem,1.2rem + .9vw,2rem);font-weight:700;font-stretch:var(--stretch-head);letter-spacing:var(--track-head);line-height:1.05;color:var(--color-text-strong)}
.film-card__line{color:var(--color-text-muted);font-size:.9375rem;margin-block-start:-6px}
.film-card__specs{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;padding-block-start:14px;border-block-start:1px solid var(--color-border)}
.film-card__specs div{display:grid;gap:2px}
.film-card__specs dt{font-size:.75rem;letter-spacing:var(--track-label);color:var(--color-text-muted)}
.film-card__specs dd{margin:0;font-size:.9375rem;font-weight:700;color:var(--color-text-strong);font-variant-numeric:tabular-nums}
@media (hover:hover) and (min-width:721px){
  .film-card__media::after{background:linear-gradient(180deg,transparent 40%,rgba(11,11,14,.82) 100%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
  .film-card__body{
    position:absolute;inset-inline:0;inset-block-end:0;z-index:2;padding:22px;overflow:hidden;border-radius:0 0 var(--r-card) var(--r-card);
    --film-dt:rgba(255,255,255,.62);
  }
  .film-card__stack{display:grid;gap:14px;translate:0 var(--shift,0px);transition:translate .45s var(--ease-out)}
  .film-card__name{color:var(--white)}
  .film-card__line{color:rgba(255,255,255,.72)}
  .film-card__specs{border-color:rgba(255,255,255,.2);opacity:0;transition:opacity .35s var(--ease)}
  .film-card__specs dt{color:var(--film-dt)}
  .film-card__specs dd{color:var(--white)}
  .film-card:hover,.film-card:focus-within{translate:0 -4px;box-shadow:0 0 0 1.5px var(--black),0 0 0 6px var(--lime),0 30px 60px -30px rgba(11,11,14,.5)}
  .film-card:hover .film-card__stack,.film-card:focus-within .film-card__stack{translate:0 0}
  .film-card:hover .film-card__specs,.film-card:focus-within .film-card__specs{opacity:1}
  .film-card .film-card__media img{transition:scale 1s var(--ease-out),opacity .6s var(--ease)}
  .film-card:hover .film-card__media img{scale:1.04}
}
@media (max-width:720px){.film-card__media{--r-media:var(--r-card)}.films__head{flex-direction:column;align-items:flex-start}}

/* ============================================================
   WARRANTY — one huge claim
   ============================================================ */
.warranty__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:center}
.warranty__copy{grid-column:1 / span 7;display:grid;gap:28px;justify-items:start}
.warranty__big{
  display:flex;align-items:flex-end;gap:.08em;
  font-size:clamp(8.5rem,4rem + 17vw,23rem);font-weight:700;font-stretch:var(--stretch-head);
  letter-spacing:-.05em;line-height:.82;color:var(--color-text-strong);
}
html[lang="ar"] .warranty__big{letter-spacing:0;line-height:.95}
.warranty__big .num{display:inline-block;transform-origin:50% 100%}
.warranty__unit{font-size:.2em;letter-spacing:var(--track-head);line-height:1;padding-block-end:.28em}
.gauge{width:min(100%,520px);display:grid;gap:10px}
.gauge__track{position:relative;height:14px;border-radius:14px;background:var(--black);overflow:hidden}
.gauge__fill{position:absolute;inset:3px;border-radius:inherit;background:var(--lime);transform-origin:left center;transform:scaleX(var(--g,0));box-shadow:0 0 16px var(--lime-glow)}
[dir="rtl"] .gauge__fill{transform-origin:right center}
.gauge__ticks{display:flex;justify-content:space-between}
.gauge__ticks span{position:relative;width:1px;height:8px;background:#BDBDC2}
.gauge__ticks span:nth-child(5n+1){height:14px;background:var(--grey-600)}
.gauge__labels{display:flex;justify-content:space-between;font-size:.75rem;color:var(--color-text-muted);font-variant-numeric:tabular-nums}
.warranty__text{display:grid;gap:14px;max-width:34rem}
.warranty__text .h3{font-size:clamp(1.5rem,1.1rem + 1.2vw,2.25rem)}
.warranty__text p{color:var(--color-text-muted)}
.warranty__media{grid-column:9 / span 4;aspect-ratio:3 / 4}
@media (max-width:900px){.warranty__copy,.warranty__media{grid-column:1 / -1}.warranty__media{aspect-ratio:4 / 5}}

/* ============================================================
   PROCESS — self-drawing timeline
   ============================================================ */
.process__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start}
.process__visual{grid-column:1 / span 5;position:sticky;inset-block-start:96px}
.process__video{aspect-ratio:4 / 5}
.process__visual figcaption{margin-block-start:14px;font-size:var(--fs-small);color:var(--color-text-muted)}
.process__content{grid-column:7 / span 6;display:grid;gap:clamp(36px,5vw,64px)}
.timeline{--t:0;position:relative;display:grid;gap:clamp(40px,5vw,64px);padding-inline-start:72px}
.timeline__rail{position:absolute;inset-block:10px;inset-inline-start:19px;width:1px;background:var(--color-border)}
.timeline__fill{position:absolute;inset:0;background:var(--black);transform-origin:top center;transform:scaleY(var(--t))}
.step{position:relative;display:grid;gap:10px}
.step__node{
  position:absolute;inset-inline-start:-72px;top:0;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;background:var(--color-bg);box-shadow:inset 0 0 0 1px var(--color-border);
  color:var(--color-text-muted);transition:box-shadow var(--dur) var(--ease),color var(--dur) var(--ease),background-color var(--dur) var(--ease);
}
.step__node svg{width:18px;height:18px}
.step__node path,.step__node circle,.step__node rect{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--ease-out) .15s}
.step.is-in .step__node path,.step.is-in .step__node circle,.step.is-in .step__node rect,.no-js .step__node *{stroke-dashoffset:0}
.step.is-active .step__node{background:var(--black);box-shadow:none;color:var(--lime)}
.step__n{font-size:.75rem;letter-spacing:var(--track-label);color:var(--color-text-muted);font-variant-numeric:tabular-nums}
.step h3{font-size:var(--fs-h3);font-weight:700;font-stretch:var(--stretch-head);letter-spacing:var(--track-head);line-height:1.15;color:var(--color-text-strong)}
.step p{color:var(--color-text-muted);max-width:42ch}
@media (max-width:900px){
  .process__visual{grid-column:1 / -1;position:relative;inset-block-start:auto}
  .process__content{grid-column:1 / -1}
  .timeline{padding-inline-start:60px}
  .step__node{inset-inline-start:-60px}
}

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews__inner{display:grid;justify-items:center;text-align:center;gap:28px;max-width:62rem;margin-inline:auto}
.reviews__mark{display:grid;place-items:center;width:clamp(72px,8vw,104px);aspect-ratio:1;border-radius:50%;background:var(--black);color:var(--lime)}
.reviews__mark svg{width:44%;height:auto}
[dir="rtl"] .reviews__mark svg{scale:-1 1}
.stars{display:flex;gap:6px}
.star{position:relative;width:22px;height:22px}
.star svg{position:absolute;inset:0;width:100%;height:100%}
.star__base{color:#D4D4D8}
.star__fill{color:var(--black);clip-path:inset(0 100% 0 0);transition:clip-path .45s var(--ease-out);transition-delay:calc(var(--i) * 120ms + 200ms)}
[dir="rtl"] .star__fill{clip-path:inset(0 0 0 100%)}
.stars.is-in .star__fill{clip-path:inset(0 0 0 0)}
.review p{font-size:clamp(1.6rem,1rem + 2.2vw,3rem);font-weight:700;font-stretch:112%;letter-spacing:var(--track-head);line-height:1.18;color:var(--color-text-strong);text-wrap:balance}
html[lang="ar"] .review p{font-stretch:100%;line-height:1.45}
.review footer{margin-block-start:20px;color:var(--color-text-muted)}
.review--placeholder p{color:#9A9AA0}
.placeholder-tag{
  display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:var(--r-pill);
  border:1px dashed #B8B8BE;color:var(--color-text-muted);font-size:.8125rem;
}

/* ============================================================
   QUOTE FORM
   ============================================================ */
.quote__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start}
.quote__intro{grid-column:1 / span 5;display:grid;gap:26px;justify-items:start;position:sticky;inset-block-start:110px}
.quote__contacts{display:grid;gap:12px;width:100%;margin-block-start:8px;border-block-start:1px solid var(--color-border);padding-block-start:24px}
.contact-row{display:flex;align-items:center;gap:14px;color:var(--color-text-strong)}
.contact-row .ico{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--color-border);flex:none;transition:color var(--dur) var(--ease),background-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.contact-row .ico svg{width:20px;height:20px}
.contact-row small{display:block;color:var(--color-text-muted);font-size:.8125rem}
@media (hover:hover){.contact-row:hover .ico{background:var(--black);color:var(--lime);box-shadow:none}}
.contact-row bdi{unicode-bidi:isolate;direction:ltr}

.form{
  grid-column:7 / span 6;display:grid;grid-template-columns:1fr 1fr;gap:14px;
  padding:clamp(22px,3vw,40px);border-radius:16px;background:var(--offwhite);
}
.field{position:relative;display:grid;transition:translate var(--dur) var(--ease)}
.field--full{grid-column:1 / -1}
.field__control{
  width:100%;height:62px;padding:24px 44px 8px 16px;border-radius:10px;border:1px solid var(--hairline);background:var(--white);
  color:var(--black);outline:none;appearance:none;-webkit-appearance:none;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
[dir="rtl"] .field__control{padding:24px 16px 8px 44px}
textarea.field__control{height:132px;resize:vertical;padding-block-start:30px}
select.field__control{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%235E5E64' stroke-width='1.6'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
[dir="rtl"] select.field__control{background-position:left 16px center}
.field__label{
  position:absolute;inset-inline-start:17px;top:21px;color:var(--grey-600);pointer-events:none;
  transform-origin:left top;transition:translate var(--dur) var(--ease),scale var(--dur) var(--ease),color var(--dur) var(--ease);
}
[dir="rtl"] .field__label{transform-origin:right top}
.field__control:focus~.field__label,.field__control:not(:placeholder-shown)~.field__label,.field--select .field__label{translate:0 -11px;scale:.78}
.field:focus-within{translate:0 -2px}
.field__control:focus{border-color:var(--black);box-shadow:0 0 0 4px var(--lime)}
.field__control:focus~.field__label{color:var(--black)}
.field.is-invalid .field__control{border-color:var(--danger)}
.field__error{grid-column:1 / -1;font-size:.8125rem;color:var(--danger);padding:6px 4px 0}
.field__check{
  position:absolute;inset-inline-end:14px;top:20px;width:22px;height:22px;border-radius:50%;
  background:var(--black);color:var(--lime);display:grid;place-items:center;
  opacity:0;scale:.25;filter:blur(4px);pointer-events:none;
  transition:opacity .3s cubic-bezier(.2,0,0,1),scale .3s cubic-bezier(.2,0,0,1),filter .3s cubic-bezier(.2,0,0,1);
}
.field--select .field__check{inset-inline-end:40px}
.field__check svg{width:12px;height:12px}
.field__check path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .35s var(--ease-out) .12s}
.field.is-valid .field__check{opacity:1;scale:1;filter:blur(0)}
.field.is-valid .field__check path{stroke-dashoffset:0}
.phone{display:grid;grid-template-columns:132px 1fr;gap:8px}
.phone .field--select .field__check{display:none}
.form__actions{grid-column:1 / -1;display:grid;gap:12px;margin-block-start:6px}
.form__actions .btn{width:100%;min-height:60px;font-size:1rem;justify-content:space-between}
.form__actions .btn:disabled{opacity:.7;cursor:progress}
.form__note{font-size:.8125rem;color:var(--color-text-muted)}
.form__success{grid-column:1 / -1;display:none;gap:12px;justify-items:start;padding:12px 4px;outline:none}
.form.is-sent .form__success{display:grid}
.form__success .h3{font-size:clamp(1.5rem,1.1rem + 1.2vw,2.25rem)}
.form__success p{color:var(--color-text-muted)}
.form.is-sent>:not(.form__success){display:none}
@media (max-width:900px){.quote__intro,.form{grid-column:1 / -1}.quote__intro{position:relative;inset-block-start:auto}}
@media (max-width:560px){.form{grid-template-columns:1fr;padding:18px;border-radius:12px}.phone{grid-template-columns:112px 1fr}}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--black);color:var(--color-text);padding-block:clamp(72px,9vw,120px) 28px;overflow:clip}
.footer__top{display:grid;grid-template-columns:repeat(12,1fr);gap:40px 24px}
.footer__brand{grid-column:1 / span 4;display:grid;gap:20px;align-content:start;justify-items:start}
.footer__brand p{color:var(--color-text-muted);max-width:32ch}
.footer__col{grid-column:span 2;display:grid;gap:12px;align-content:start}
.footer__col h2,.footer__news h2{font-size:.8125rem;font-weight:400;letter-spacing:var(--track-label);color:var(--color-text-muted);margin-block-end:4px}
.footer__col a{color:var(--offwhite);justify-self:start}
.footer__news{grid-column:span 4;display:grid;gap:14px;align-content:start}
.footer__news p{color:var(--color-text-muted);font-size:.9375rem}
.news{display:flex;gap:8px;padding:6px;border-radius:var(--r-pill);background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:box-shadow var(--dur) var(--ease)}
.news:focus-within{box-shadow:inset 0 0 0 1px var(--lime),0 0 0 4px rgba(238,255,91,.18)}
.news input{flex:1;min-width:0;background:transparent;border:0;outline:0;padding:0 16px;color:var(--white)}
.news input::placeholder{color:rgba(255,255,255,.45)}
.news .btn{min-height:44px;padding-inline:20px}
.news__msg{font-size:.875rem;color:var(--offwhite)}
.socials{display:flex;gap:10px}
.socials a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:var(--offwhite);transition:color var(--dur) var(--ease),background-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.socials svg{width:20px;height:20px}
@media (hover:hover){.socials a:hover{color:var(--black);background:var(--lime);box-shadow:none}}
.footer__word{display:block;margin-block:clamp(56px,8vw,110px) 22px;color:#17171B;user-select:none}
.footer__word svg{display:block;width:100%;height:auto;fill:currentColor}
.footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 24px;padding-block-start:22px;border-block-start:1px solid var(--color-border);font-size:.875rem;color:var(--color-text-muted)}
.footer__legal{display:flex;flex-wrap:wrap;gap:8px 22px}
.footer .lang{color:var(--color-text-muted)}
.footer .lang a[aria-current="true"]{color:var(--white)}
@media (max-width:1020px){.footer__brand,.footer__news{grid-column:1 / -1}.footer__col{grid-column:span 6}}
@media (max-width:720px){.footer{padding-block-end:96px}}

/* ============================================================
   BRAND INTRO (first visit per session)
   ============================================================ */
.loader{display:none}
.is-intro .loader{
  position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:var(--black);color:var(--white);
  animation:loader-out .8s var(--ease-reveal) 1.6s forwards;
}
.loader__inner{display:grid;justify-items:center;gap:24px}
.is-intro .loader__inner{animation:loader-fade .45s var(--ease) 1.35s forwards}
.loader__emblem{width:clamp(56px,6vw,76px);aspect-ratio:88.2 / 100;fill:currentColor;clip-path:inset(100% 0 0 0);animation:loader-clip .9s var(--ease-out) .1s forwards}
.loader__word{width:clamp(130px,13vw,170px);aspect-ratio:391.2 / 100;fill:currentColor;opacity:0;translate:0 12px;animation:loader-up .7s var(--ease-out) .5s forwards}
.loader__bar{width:clamp(130px,13vw,170px);height:2px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden}
.loader__bar i{display:block;height:100%;background:var(--lime);transform-origin:left center;transform:scaleX(0);animation:loader-bar 1.25s var(--ease) .1s forwards}
[dir="rtl"] .loader__bar i{transform-origin:right center}
@keyframes loader-clip{to{clip-path:inset(0 0 0 0)}}
@keyframes loader-up{to{opacity:1;translate:0 0}}
@keyframes loader-bar{to{transform:scaleX(1)}}
@keyframes loader-fade{to{opacity:0;translate:0 -16px}}
@keyframes loader-out{to{translate:0 -100%;visibility:hidden}}
html.is-intro-lock,html.is-intro-lock body{overflow:hidden}

/* ============================================================
   MARQUEE — speeds up with scroll velocity
   ============================================================ */
.marquee{position:relative;overflow:clip;background:var(--black);color:var(--white);padding-block:clamp(22px,3vw,38px);border-block-start:1px solid rgba(255,255,255,.08)}
.marquee__track{display:flex;width:max-content;will-change:transform}
.marquee__group{display:flex;align-items:center;flex:none}
.marquee__item{
  display:inline-flex;align-items:center;gap:clamp(22px,3vw,44px);padding-inline-end:clamp(22px,3vw,44px);
  font-size:clamp(1.9rem,1rem + 3.2vw,4.4rem);font-weight:700;font-stretch:var(--stretch-head);letter-spacing:var(--track-head);
  line-height:1.15;white-space:nowrap;
}
.marquee__item:nth-child(even) .marquee__text{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.6)}
html[lang="ar"] .marquee__item:nth-child(even) .marquee__text{color:rgba(255,255,255,.42);-webkit-text-stroke:0}
.marquee__sep{width:.5em;aspect-ratio:88.2 / 100;fill:var(--lime);flex:none}

/* ============================================================
   INTRO — statement + media card with rotating seal
   ============================================================ */
.intro__top{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start}
.intro__top .statement{grid-column:1 / span 8}
.intro__aside{--seal:clamp(108px,9vw,136px);grid-column:9 / span 4;position:relative;display:grid;gap:14px;container-type:inline-size}
.intro__media{aspect-ratio:4 / 5}
.intro__media img{position:absolute;inset:-7% 0 auto;height:114%;translate:0 var(--py,0px);will-change:translate}
.intro__caption{display:flex;justify-content:space-between;gap:16px;padding-inline-start:calc(var(--seal) / 2 + 10px);font-size:var(--fs-small);color:var(--color-text-muted)}
.seal{position:absolute;z-index:3;width:var(--seal);aspect-ratio:1;inset-inline-start:calc(var(--seal) / -2);top:calc(125cqw - var(--seal) * .62);filter:drop-shadow(0 18px 30px rgba(11,11,14,.28))}
.seal svg{display:block;width:100%;height:100%}
.seal__ring{transform-box:view-box;transform-origin:50% 50%;rotate:var(--seal-rot,0deg)}
.seal text{font-family:"Archivo",sans-serif;font-size:13.2px;font-weight:700;font-stretch:112%;fill:var(--lime)}
.seal__emblem{fill:var(--white)}
@media (max-width:900px){
  .intro__top .statement,.intro__aside{grid-column:1 / -1}
  .intro__aside{margin-block-start:28px;width:min(100%,460px);justify-self:end}
  .intro__aside{--seal:96px}
  .seal{inset-inline-start:14px;top:calc(125cqw - var(--seal) - 14px)}
  .intro__caption{padding-inline-start:0}
}

/* ---------- films progress ---------- */
.films__progress{height:4px;margin-block-start:6px;border-radius:4px;background:var(--hairline);overflow:hidden}
.films__progress i{display:block;height:100%;border-radius:inherit;background:var(--black);transform-origin:left center;transform:scaleX(var(--fp,.15));transition:transform .25s var(--ease)}
[dir="rtl"] .films__progress i{transform-origin:right center}

/* ============================================================
   RTL / ARABIC
   ============================================================ */
[dir="rtl"] .flip-rtl{scale:-1 1}
html[lang="ar"].js .lines .line{padding-block-end:.4em;margin-block-end:-.4em}
html[lang="ar"].js .hero__title .line{padding-block:.1em .42em;margin-block-end:-.3em}
html[lang="ar"] .hero__title{line-height:1.15}
html[lang="ar"] .spec strong,html[lang="ar"] .film-card__name,html[lang="ar"] .step h3,html[lang="ar"] .fact h3,html[lang="ar"] .film-row h3{line-height:1.35}
html[lang="ar"] .thermal__num small{font-size:.3em}
html[lang="ar"] .nav__drawer a{font-size:1.5rem}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  .js .reveal,.js .lines .line>span,.js .hero__title .line>span>span,.js .hero__intro,.js .hero__region{opacity:1;translate:none;transition:none}
  .js .curtain,.js .hero__card{clip-path:none;transition:none}
  .js .scale-in img,.js .scale-in video{scale:1;transition:none}
  .star__fill{clip-path:none;transition:none}
  .step__node *{stroke-dashoffset:0!important;transition:none!important}
  .hero__hint i::after{animation:none}
}

/* process visual: four clips, one per timeline step */
.process__video{position:relative}
.media>video.process__clip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;z-index:0;transition:opacity .7s var(--ease);will-change:opacity}
.media>video.process__clip.is-prev{opacity:1;z-index:1;transition:none}
.media>video.process__clip.is-active{opacity:1;z-index:2}
@media (prefers-reduced-motion:reduce){.process__clip{transition:none}}

/* hydrophobic proof clip inside the facts list */
.fact__proof{grid-column:2;margin-block-start:12px;aspect-ratio:16 / 11;border-radius:var(--r-media);overflow:hidden}
.fact__proof video,.fact__proof img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- nav: soften the edge big type scrolls under ---------- */
/* No mask-image on the frosted layer: mask + backdrop-filter on the same element changed
   how the page composited and stopped the card videos painting. The frosted bar keeps its
   original setup, loses only the hairline that read as a slice, and the soft edge comes
   from a plain gradient just below the bar. */
.nav::before{border-block-end:0}
.nav::after{
  content:"";position:absolute;inset-inline:0;z-index:-2;pointer-events:none;
  opacity:0;transition:opacity var(--dur) var(--ease);
}
/* over the hero: a scrim so the white logo stays legible on the pale studio ceiling */
.nav[data-tone="dark"]:not(.is-solid)::after{
  top:0;height:calc(100% + 56px);opacity:1;
  background:linear-gradient(to bottom,rgba(11,11,14,.62) 0%,rgba(11,11,14,.28) 55%,rgba(11,11,14,0) 100%);
}
/* solid bar: headings fade toward the bar colour before they reach it */
.nav.is-solid::after{
  top:100%;height:30px;opacity:1;
  background:linear-gradient(to bottom,var(--nav-bg),transparent);
}
.nav.is-open::after{opacity:0}
/* footer: London HQ and GCC marketer, from the brochure's back page */
.footer__addr{font-style:normal;display:grid;gap:6px;font-size:.8125rem;line-height:1.55;color:var(--color-text-muted);max-width:44ch}
.footer__addr bdi{unicode-bidi:isolate}

/* ---------- self-healing panel: let vertical swipes scroll the page ---------- */
/* touch-action:none handed every touch to the scratch effect, so on phones the page
   could not be scrolled past it. pan-y gives vertical swipes back to the browser;
   the script only scratches on a clearly sideways drag. */
.heal-stage{touch-action:pan-y}

/* ---------- before / after: a drag slider, before on the left, after on the right ---------- */
.ba__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:center}
.ba__copy{grid-column:1 / span 5;display:grid;gap:22px;align-content:center;justify-items:start}
.ba__copy .lead{max-width:38ch}
.ba__stage{
  grid-column:7 / span 6;position:relative;width:100%;height:min(78svh,760px);margin:0;
  border-radius:var(--r-media);overflow:hidden;background:#0f0f12;isolation:isolate;
  touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none;
}
.ba__src{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:50% 58%;pointer-events:none;-webkit-user-drag:none}
.ba__src--after{z-index:1;clip-path:inset(0 0 0 var(--pos))}
/* solid fills only: no backdrop-filter near video (it stopped videos painting before) */
.ba__tag{position:absolute;z-index:2;top:18px;padding:8px 15px;border-radius:var(--r-pill);font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;pointer-events:none}
.ba__tag--before{left:18px;background:var(--black);color:var(--white)}
.ba__tag--after{right:18px;background:var(--white);color:var(--black)}
.ba__divider{position:absolute;z-index:3;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:var(--white);pointer-events:none}
.ba__handle{
  position:absolute;z-index:4;top:50%;left:var(--pos);width:60px;height:60px;margin:-30px 0 0 -30px;
  display:grid;place-items:center;border-radius:50%;background:var(--black);color:var(--white);
  box-shadow:0 0 0 2px var(--white),0 12px 30px -8px rgba(0,0,0,.6);cursor:ew-resize;
  transition:scale var(--dur-fast) var(--ease);
}
.ba__handle svg{width:24px;height:24px}
.ba__handle:focus-visible{outline:none;box-shadow:0 0 0 2px var(--white),0 0 0 6px var(--lime)}
.ba__stage.is-dragging .ba__handle{scale:1.08}
@media (max-width:900px){
  .ba__grid{grid-template-columns:1fr;gap:28px}
  .ba__copy,.ba__stage{grid-column:1 / -1}
  .ba__stage{height:auto;aspect-ratio:4 / 5;max-height:78svh}
  .ba__handle{width:52px;height:52px;margin:-26px 0 0 -26px}
}

/* ---------- price guide (appears only once starting prices are set) ---------- */
.film-card__price{position:relative;z-index:3;align-self:start;justify-self:start;display:inline-flex;align-items:center;gap:6px;margin-block-start:10px;min-height:32px;padding:0 13px;border-radius:var(--r-pill);background:var(--lime);color:var(--black);font-size:.8125rem;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.film-card__price svg{width:14px;height:14px}
.price-sheet{position:fixed;inset:0;z-index:300;display:grid;place-items:end center}
.price-sheet[hidden]{display:none}
.price-sheet__backdrop{position:absolute;inset:0;background:rgba(11,11,14,.55)}
.price-sheet__panel{position:relative;width:min(460px,100%);display:grid;gap:14px;padding:30px 24px calc(24px + env(safe-area-inset-bottom));border-radius:20px 20px 0 0;background:var(--white);color:var(--ink);box-shadow:var(--shadow-lift);animation:sheet-in .32s var(--ease-out)}
@media (min-width:721px){.price-sheet{place-items:center}.price-sheet__panel{border-radius:20px;padding-block-end:28px}}
@keyframes sheet-in{from{transform:translateY(24px);opacity:0}}
.price-sheet__close{position:absolute;top:12px;inset-inline-end:12px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--offwhite);font-size:1.5rem;line-height:1}
.price-sheet__name{margin:0;font-size:var(--fs-h3);font-stretch:var(--stretch-head);letter-spacing:var(--track-head);line-height:var(--lh-head)}
.price-sheet__from{margin:0;display:grid;gap:4px}
.price-sheet__from small{font-size:.8125rem;letter-spacing:var(--track-label);color:var(--color-text-muted)}
.price-sheet__from strong{font-size:clamp(2rem,1.4rem + 2.4vw,2.75rem);font-stretch:var(--stretch-head);letter-spacing:var(--track-head);line-height:1;font-variant-numeric:tabular-nums}
.price-sheet__cur{justify-self:start;display:inline-flex;gap:4px;padding:4px;border-radius:var(--r-pill);background:var(--offwhite)}
.price-sheet__cur button{min-height:34px;padding:0 16px;border-radius:var(--r-pill);font-size:.8125rem;font-weight:700;color:var(--color-text-muted)}
.price-sheet__cur button[aria-pressed="true"]{background:var(--black);color:var(--white)}
.price-sheet__note{margin:0;font-size:.875rem;line-height:1.5;color:var(--color-text-muted)}
.price-sheet .btn{justify-self:stretch;justify-content:space-between}
body.has-sheet{overflow:hidden}

/* ---------- client reviews: five quotes, one at a time ---------- */
.reviews__slides{display:grid;width:100%;touch-action:pan-y}
.reviews__slides .review{grid-area:1 / 1;display:grid;justify-items:center;align-content:center;opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .6s var(--ease),transform .6s var(--ease),visibility 0s linear .6s}
.reviews__slides .review.is-active{opacity:1;visibility:visible;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease),visibility 0s}
.reviews__slides .review p{font-size:clamp(1.3rem,.95rem + 1.45vw,2.15rem);line-height:1.26;max-width:38ch;margin:0;text-wrap:balance}
.review__name{display:block;font-weight:700;color:var(--color-text-strong)}
.review__meta{display:block;margin-block-start:4px;font-size:.9375rem;color:var(--color-text-muted)}
.review__meta bdi{unicode-bidi:isolate}
.reviews__nav{display:flex;align-items:center;gap:18px}
.reviews__dots{display:flex;align-items:center;gap:4px}
.reviews__dots button{position:relative;width:24px;height:24px;display:grid;place-items:center}
.reviews__dots button::before{content:"";width:8px;height:8px;border-radius:8px;background:var(--color-border);transition:width .3s var(--ease),background-color .3s var(--ease)}
.reviews__dots button[aria-current="true"]::before{width:22px;background:var(--black)}
.reviews__note{font-size:.8125rem;color:var(--color-text-muted)}
@media (prefers-reduced-motion:reduce){.reviews__slides .review{transition:none;transform:none}}

/* ---------- film details: tap a card, see everything, carry the film into the quote ---------- */
.film-card{cursor:pointer}
.film-card:focus-visible{outline:none;box-shadow:0 0 0 1.5px var(--black),0 0 0 6px var(--lime)}
.film-card__more{position:absolute;z-index:3;top:14px;inset-inline-end:14px;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 8px 0 13px;border-radius:var(--r-pill);background:var(--lime);color:var(--black);font-size:.8125rem;font-weight:700;pointer-events:none;box-shadow:0 6px 16px -6px rgba(0,0,0,.45);transition:background-color var(--dur) var(--ease),scale var(--dur) var(--ease)}
.film-card__more svg{width:15px;height:15px;padding:2px;border-radius:50%;background:var(--black);color:var(--lime);box-sizing:content-box}
.film-card:first-child .film-card__more{animation:more-pulse 2.4s var(--ease) 1.2s 3}
@keyframes more-pulse{0%,100%{box-shadow:0 6px 16px -6px rgba(0,0,0,.45),0 0 0 0 rgba(238,255,91,.7)}50%{box-shadow:0 6px 16px -6px rgba(0,0,0,.45),0 0 0 10px rgba(238,255,91,0)}}
.film-card__cta{display:inline-flex;align-items:center;gap:8px;justify-self:start;font-size:.9375rem;font-weight:700;color:var(--color-text-strong,var(--black));text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:2px;text-underline-offset:5px}
.film-card__cta svg{width:16px;height:16px}
.films__hint{display:flex;align-items:center;gap:8px;font-size:.9375rem;color:var(--color-text-muted)}
.films__hint svg{width:20px;height:20px;flex:none;color:var(--black)}
@media (hover:hover){.film-card:hover .film-card__more{scale:1.06}}
.film-sheet{position:fixed;inset:0;z-index:300;display:grid;place-items:end center}
.film-sheet[hidden]{display:none}
.film-sheet__backdrop{position:absolute;inset:0;background:rgba(11,11,14,.6)}
.film-sheet__panel{
  position:relative;width:min(880px,100%);max-height:92svh;overflow:auto;overscroll-behavior:contain;
  display:grid;grid-template-columns:minmax(0,1fr);border-radius:20px 20px 0 0;background:var(--white);color:var(--ink);
  box-shadow:var(--shadow-lift);animation:sheet-in .32s var(--ease-out)}
.film-sheet__media{position:relative;margin:0;aspect-ratio:4 / 3;background:#0f0f12;overflow:hidden}
.film-sheet__media video,.film-sheet__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.film-sheet__tag{position:absolute;z-index:1;top:14px;inset-inline-start:14px;padding:6px 11px;border-radius:var(--r-pill);background:rgba(255,255,255,.92);color:var(--black);font-size:.75rem;font-weight:700}
.film-sheet__body{display:grid;gap:16px;align-content:start;padding:26px 24px calc(24px + env(safe-area-inset-bottom))}
.film-sheet__kind{font-size:var(--fs-label);letter-spacing:var(--track-label);color:var(--color-text-muted)}
.film-sheet__name{margin:0;font-size:clamp(1.8rem,1.3rem + 2vw,2.6rem);font-stretch:var(--stretch-head);letter-spacing:var(--track-head);line-height:1}
.film-sheet__line{margin:0;font-size:1.0625rem;line-height:1.5;color:var(--color-text-muted)}
.film-sheet__specs{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;margin:0;padding-block-start:16px;border-block-start:1px solid var(--color-border)}
.film-sheet__specs div{display:grid;gap:3px}
.film-sheet__specs dt{font-size:.8125rem;letter-spacing:var(--track-label);color:var(--color-text-muted)}
.film-sheet__specs dd{margin:0;font-weight:700;font-size:1rem}
.film-sheet__actions{display:grid;gap:10px;margin-block-start:4px}
.film-sheet__actions .btn{justify-content:space-between;width:100%;white-space:normal;text-align:start}
.film-sheet__close{position:absolute;z-index:2;top:12px;inset-inline-end:12px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--black);font-size:1.5rem;line-height:1;box-shadow:0 4px 14px -6px rgba(0,0,0,.4)}
@media (min-width:821px){
  .film-sheet{place-items:center;padding:24px}
  .film-sheet__panel{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);border-radius:22px;max-height:min(640px,90vh)}
  .film-sheet__media{aspect-ratio:auto;min-height:100%}
  .film-sheet__body{padding:34px 32px 30px}
}
@media (prefers-reduced-motion:reduce){.film-sheet__panel{animation:none}}

/* quote form: WhatsApp fallback when the email service can't take the request */
.form__fallback{display:inline-flex;align-items:center;gap:8px;margin-block-start:8px;font-weight:700;color:var(--black);text-decoration:underline;text-underline-offset:3px}
.form__fallback[hidden]{display:none}

/* ============================================================
   LANDING PAGES (PPF, window tinting, privacy) + FAQ
   ============================================================ */
.page-hero{padding-block:calc(var(--section-y) * .5 + 72px) calc(var(--section-y) * .6)}
.page-hero__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:32px 24px;align-items:center}
.page-hero__copy{grid-column:1 / span 7;display:grid;gap:22px;justify-items:start}
.page-hero__media{grid-column:9 / span 4;aspect-ratio:3 / 4;margin:0}
.page-hero__media video,.page-hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-hero h1{font-size:clamp(2.4rem,1.4rem + 4.4vw,5rem);line-height:1;letter-spacing:var(--track-head);font-stretch:var(--stretch-head);font-weight:700;text-wrap:balance}
.page-hero__ctas{display:flex;flex-wrap:wrap;gap:10px;margin-block-start:6px}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px;font-size:.8125rem;color:var(--color-text-muted)}
.crumbs li+li::before{content:"/";margin-inline-end:6px;opacity:.6}
.crumbs a{text-decoration:underline;text-underline-offset:3px}
.crumbs [aria-current]{color:var(--color-text)}
@media (max-width:900px){
  .page-hero__copy,.page-hero__media{grid-column:1 / -1}
  .page-hero__media{aspect-ratio:4 / 3}
}
.prose{display:grid;gap:18px;max-width:68ch}
.prose h2{font-size:var(--fs-h3,1.6rem);line-height:1.15;font-stretch:var(--stretch-head);letter-spacing:var(--track-head);margin-block-start:10px}
.prose p,.prose li{font-size:1.0625rem;line-height:1.65;color:var(--color-text-muted)}
.prose strong{color:var(--color-text)}
.prose ul{display:grid;gap:8px;padding-inline-start:1.1em;list-style:disc}
.prose a{text-decoration:underline;text-underline-offset:3px;color:var(--color-text)}
.two-col{display:grid;grid-template-columns:repeat(12,1fr);gap:40px 24px;align-items:start}
.two-col>:first-child{grid-column:1 / span 5}
.two-col>:last-child{grid-column:7 / span 6}
@media (max-width:900px){.two-col>*{grid-column:1 / -1 !important}}
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.feature{display:grid;gap:10px;align-content:start;padding:26px 24px;border-radius:var(--r-media);background:var(--color-surface,#fff);box-shadow:inset 0 0 0 1px var(--color-border)}
[data-theme="alt"] .feature{background:var(--white)}
.feature__n{font-size:.8125rem;letter-spacing:var(--track-label);color:var(--color-text-muted)}
.feature h3{font-size:1.25rem;line-height:1.2;font-stretch:var(--stretch-head)}
.feature p{font-size:1rem;line-height:1.55;color:var(--color-text-muted)}
.spec-table-wrap{overflow-x:auto;border-radius:var(--r-media);box-shadow:inset 0 0 0 1px var(--color-border)}
.spec-table{width:100%;min-width:640px;border-collapse:collapse;font-size:.9375rem}
.spec-table th,.spec-table td{padding:14px 18px;text-align:start;border-block-end:1px solid var(--color-border);vertical-align:top}
.spec-table thead th{font-size:.8125rem;letter-spacing:var(--track-label);color:var(--color-text-muted);font-weight:400}
.spec-table tbody th{font-weight:700;white-space:nowrap}
.spec-table tbody tr:last-child>*{border-block-end:0}
.note{font-size:.875rem;color:var(--color-text-muted);margin-block-start:14px}
/* FAQ */
.faq{display:grid;gap:0;border-block-start:1px solid var(--color-border)}
.faq details{border-block-end:1px solid var(--color-border)}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;cursor:pointer;font-weight:700;font-size:clamp(1.05rem,.95rem + .4vw,1.25rem);line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--color-border);font-weight:400;font-size:1.25rem;transition:rotate var(--dur) var(--ease),background-color var(--dur) var(--ease)}
.faq details[open] summary::after{rotate:45deg;background:var(--lime);color:var(--black);box-shadow:none}
.faq summary:focus-visible{outline:2px solid var(--color-focus,var(--black));outline-offset:4px;border-radius:4px}
.faq__a{padding:0 0 24px;max-width:72ch;display:grid;gap:12px}
.faq__a p{color:var(--color-text-muted);line-height:1.65}
.faq__a a{text-decoration:underline;text-underline-offset:3px;color:var(--color-text)}
.faq-head{display:grid;gap:16px;margin-block-end:clamp(28px,4vw,48px);justify-items:start}
/* closing call to action */
.cta-band{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end}
.cta-band>div{grid-column:1 / span 8;display:grid;gap:18px;justify-items:start}
.cta-band__actions{grid-column:9 / span 4;display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
@media (max-width:900px){.cta-band>div,.cta-band__actions{grid-column:1 / -1;justify-content:flex-start}}
.legal{max-width:72ch}
.note a{text-decoration:underline;text-underline-offset:3px;color:var(--color-text)}

.nav__drawer-label{display:none}
@media (max-width:1020px){
  .nav__drawer-label{display:block;margin-block-start:6px;font-size:.8125rem;letter-spacing:var(--track-label);color:rgba(11,11,14,.55)}
  .nav__drawer a.nav__drawer-sub{font-size:1.35rem;padding-inline-start:14px}
  html[lang="ar"] .nav__drawer a.nav__drawer-sub{font-size:1.2rem}
}

/* ---------- our services: who we are / what we provide ---------- */
.services__grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.service{display:flex;flex-direction:column;gap:12px;padding:28px 24px 24px}
.service h3{font-size:1.3rem}
.service__link{display:inline-flex;align-items:center;gap:8px;margin-block-start:auto;padding-block-start:10px;font-weight:700;font-size:.9375rem;color:var(--color-text-strong,var(--color-text))}
.service__link svg{width:16px;height:16px;transition:translate var(--dur) var(--ease)}
@media (hover:hover){.service__link:hover svg{translate:calc(4px * var(--dir)) 0}.service__link:hover{color:var(--lime)}}
.service{transition:box-shadow var(--dur) var(--ease)}
@media (hover:hover){.service:hover{box-shadow:inset 0 0 0 1px rgba(238,255,91,.55)}}

/* ============================================================
   SERVICES PAGE — who we are / what we provide
   ============================================================ */
.svc-hero{position:relative;overflow:clip;padding-block:calc(var(--section-y) * .5 + 84px) calc(var(--section-y) * .55)}
.svc-hero__glow{position:absolute;inset:-20% -10% auto auto;width:min(900px,90vw);aspect-ratio:1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(238,255,91,.13),rgba(238,255,91,0) 70%)}
[dir="rtl"] .svc-hero__glow{inset:-20% auto auto -10%}
.svc-hero .wrap{position:relative;display:grid;gap:22px;justify-items:start}
.svc-hero__title{font-size:clamp(2.8rem,1.4rem + 6.2vw,7.2rem);line-height:.95;letter-spacing:var(--track-head);font-stretch:var(--stretch-head);font-weight:700;max-width:13ch;text-wrap:balance;margin-block-end:clamp(10px,3vw,40px)}
html[lang="ar"] .svc-hero__title{line-height:1.2}
.svc-hero__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:40px 24px;width:100%;align-items:end}
.svc-hero__lead{grid-column:1 / span 6;display:grid;gap:16px}
.svc-hero__lead p{font-size:clamp(1.05rem,.98rem + .35vw,1.25rem);line-height:1.65;color:var(--color-text-muted)}
.svc-hero__lead p:first-child{color:var(--color-text)}
.svc-stats{grid-column:8 / span 5;display:grid;grid-template-columns:1fr 1fr;gap:28px 24px}
.svc-stat{display:grid;gap:6px;padding-block-start:16px;border-block-start:1px solid var(--color-border)}
.svc-stat strong{font-size:clamp(2.2rem,1.5rem + 2.6vw,3.6rem);line-height:1;font-weight:700;font-stretch:var(--stretch-head);letter-spacing:var(--track-head);color:var(--lime)}
.svc-stat span{font-size:.875rem;letter-spacing:var(--track-label);color:var(--color-text-muted)}
@media (max-width:900px){.svc-hero__lead,.svc-stats{grid-column:1 / -1}}

.svc-rows{display:grid;gap:clamp(72px,10vw,150px)}
.svc-row{display:grid;grid-template-columns:repeat(12,1fr);gap:32px 24px;align-items:center}
.svc-row__media{grid-column:1 / span 5;aspect-ratio:4 / 5;margin:0;box-shadow:0 50px 90px -50px rgba(238,255,91,.35)}
.svc-row__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:scale 1.2s var(--ease-out)}
.svc-row__body{grid-column:7 / span 6;display:grid;gap:18px;justify-items:start}
.svc-row--flip .svc-row__media{grid-column:8 / span 5;grid-row:1}
.svc-row--flip .svc-row__body{grid-column:1 / span 6;grid-row:1}
@media (hover:hover){.svc-row:hover .svc-row__media video{scale:1.045}}
.svc-row__n{font-size:clamp(4.2rem,2rem + 7.5vw,9rem);line-height:.8;font-weight:700;font-stretch:var(--stretch-head);color:transparent;-webkit-text-stroke:1.2px rgba(238,255,91,.75);font-family:"Archivo",var(--font)}
.svc-row__title{font-size:clamp(1.9rem,1.25rem + 2.4vw,3.1rem);line-height:1.05;font-stretch:var(--stretch-head);letter-spacing:var(--track-head);font-weight:700;text-wrap:balance}
html[lang="ar"] .svc-row__title{line-height:1.3}
.svc-row__desc{font-size:1.0625rem;line-height:1.65;color:var(--color-text-muted);max-width:52ch}
.svc-chips{display:flex;flex-wrap:wrap;gap:8px}
.svc-chips li{padding:8px 14px;border-radius:var(--r-pill);font-size:.875rem;line-height:1.2;color:var(--color-text);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);background:rgba(255,255,255,.03)}
.svc-row__body .btn{margin-block-start:6px}
@media (max-width:900px){
  .svc-row__media,.svc-row--flip .svc-row__media{grid-column:1 / -1;grid-row:auto;aspect-ratio:4 / 3}
  .svc-row__body,.svc-row--flip .svc-row__body{grid-column:1 / -1;grid-row:auto}
}
@media (prefers-reduced-motion:reduce){.svc-row__media video{transition:none}}

/* services: mission & vision */
.svc-about{padding-block-start:0}
.svc-mv{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.svc-mv__card{margin:0;display:grid;gap:18px;align-content:start;padding:clamp(28px,4vw,48px);border-radius:var(--r-media);
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015));box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.svc-mv__card--alt{background:linear-gradient(160deg,rgba(238,255,91,.12),rgba(238,255,91,.02));box-shadow:inset 0 0 0 1px rgba(238,255,91,.35)}
.svc-mv__card blockquote{margin:0;font-size:clamp(1.35rem,1rem + 1.4vw,2.1rem);line-height:1.3;font-weight:700;font-stretch:var(--stretch-head);letter-spacing:var(--track-head);text-wrap:pretty}
html[lang="ar"] .svc-mv__card blockquote{line-height:1.55}
@media (max-width:820px){.svc-mv{grid-template-columns:1fr}}
/* services: why TRORO */
.svc-why__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-block-start:1px solid var(--color-border)}
.svc-why__item{display:grid;gap:10px;align-content:start;padding:clamp(24px,3vw,36px) clamp(18px,2vw,28px) clamp(28px,3vw,40px);border-block-end:1px solid var(--color-border);border-inline-end:1px solid var(--color-border);transition:background-color var(--dur) var(--ease)}
.svc-why__item:nth-child(3n){border-inline-end:0}
.svc-why__n{font-size:clamp(2.4rem,1.6rem + 2.6vw,3.6rem);line-height:1;font-weight:700;font-stretch:var(--stretch-head);color:transparent;-webkit-text-stroke:1.2px var(--black);font-family:"Archivo",var(--font);margin-block-end:8px}
.svc-why__item h3{font-size:1.3rem;line-height:1.2;font-stretch:var(--stretch-head)}
.svc-why__item p{color:var(--color-text-muted);line-height:1.6}
@media (hover:hover){.svc-why__item:hover{background:var(--white)}.svc-why__item:hover .svc-why__n{color:var(--lime);-webkit-text-stroke-color:var(--black)}}
@media (max-width:900px){.svc-why__grid{grid-template-columns:1fr 1fr}.svc-why__item:nth-child(3n){border-inline-end:1px solid var(--color-border)}.svc-why__item:nth-child(2n){border-inline-end:0}}
@media (max-width:560px){.svc-why__grid{grid-template-columns:1fr}.svc-why__item{border-inline-end:0 !important}}
/* services: ticked benefit lists in each row */
.svc-benefits{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;width:100%;max-width:640px}
.svc-benefits li{display:flex;gap:10px;align-items:flex-start;font-size:.9375rem;line-height:1.45;color:var(--color-text)}
.svc-benefits svg{flex:none;width:18px;height:18px;margin-block-start:1px;padding:3px;border-radius:50%;background:var(--lime);color:var(--black)}
@media (max-width:560px){.svc-benefits{grid-template-columns:1fr}}

/* film details sheet on phones: fits the screen (iOS bars included), buttons always visible */
@media (max-width:820px){
  .film-sheet__panel{display:flex;flex-direction:column;max-height:calc(100dvh - 12px);overflow:hidden}
  .film-sheet__media{flex:none;aspect-ratio:auto;height:clamp(170px,30dvh,260px)}
  .film-sheet__body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;gap:12px;padding:20px 20px 0}
  .film-sheet__name{font-size:clamp(1.7rem,1.3rem + 2vw,2.2rem)}
  .film-sheet__line{font-size:1rem}
  .film-sheet__specs{gap:12px 18px;padding-block-start:14px}
  .film-sheet__actions{position:sticky;bottom:0;margin:6px -20px 0;padding:12px 20px calc(14px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--white) 82%,rgba(255,255,255,0));gap:8px}
  .film-sheet__actions .btn{min-height:52px}
}
.film-sheet__kind{justify-self:start;padding:5px 11px;border-radius:var(--r-pill);background:var(--offwhite);color:var(--color-text);font-size:.75rem}
@media (hover:hover) and (min-width:721px){.film-card__cta{color:var(--white)}}