/*!
 * naqshat.css — Naqashat Media Production · v2.1 cinematic luxury (2026-11)
 * Dark by default (legacy #1b1b1b) + light mode · zero-build · no dependencies
 * Motion: native CSS scroll-driven animations (Chrome/Edge/Safari 26+);
 *         IntersectionObserver fallback in naqshat.js for other browsers.
 */

/* ===== Fonts: IBM Plex Sans Arabic + IBM Plex Sans (self-hosted, OFL) ===== */
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex/plex-arabic-400.woff2") format("woff2");unicode-range:U+0600-06FF,U+200C-200F}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex/plex-arabic-500.woff2") format("woff2");unicode-range:U+0600-06FF,U+200C-200F}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/ibm-plex/plex-arabic-700.woff2") format("woff2");unicode-range:U+0600-06FF,U+200C-200F}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex/plex-latin-400.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex/plex-latin-500.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/ibm-plex/plex-latin-700.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ===== Tokens ===== */
:root{
  --bg:#1b1b1b;--bg-rgb:27,27,27;--bg-2:#212121;--bg-3:#171718;
  --fg:#EEECE7;--fg-2:#A9A79F;--fg-3:#6F6D67;
  --line:rgba(238,236,231,.12);--line-2:rgba(238,236,231,.24);
  --amber:#F5AD2A;--amber-2:#FFC457;--accent:#F5AD2A;--red:#E5484D;--wa:#25D366;
  --grain:.055;--glow:.1;--spot:.075;--hero-bg:#1b1b1b;
  --header-h:68px;--container:1320px;--gutter:clamp(18px,4.2vw,48px);
  --ease:cubic-bezier(.22,1,.36,1);
  --font:"IBM Plex Sans Arabic","IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;
  --font-num:"IBM Plex Sans","IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  color-scheme:dark;
}
html[lang^="en"]{--font:"IBM Plex Sans","IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
html[data-theme="light"]{
  --bg:#F3F1EC;--bg-rgb:243,241,236;--bg-2:#FFFFFF;--bg-3:#EAE7E0;
  --fg:#161614;--fg-2:#57554F;--fg-3:#8C8981;
  --line:rgba(22,22,20,.12);--line-2:rgba(22,22,20,.24);
  --accent:#B06F04;--red:#C9353A;
  --grain:.03;--glow:.16;--spot:.12;--hero-bg:#121211;
  color-scheme:light;
}

/* ===== Base ===== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg);scroll-behavior:smooth;scrollbar-gutter:stable;scroll-padding-top:calc(var(--header-h) + 8px)}
html.is-locked,html.is-locked body{overflow:hidden}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;transition:background-color .6s var(--ease),color .6s var(--ease)}
html[lang^="en"] body{line-height:1.6}
img,svg,video,iframe{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer}
h1,h2,h3,p,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
::selection{background:var(--amber);color:#141413}
:focus-visible{outline:2px solid var(--amber);outline-offset:4px;border-radius:6px}
[hidden]{display:none!important}
.container{width:min(100% - 2*var(--gutter),var(--container));margin-inline:auto}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;top:10px;inset-inline-start:10px;z-index:120;padding:10px 18px;border-radius:10px;background:var(--amber);color:#141413;font-weight:600;transform:translateY(-220%);transition:transform .3s var(--ease)}
.skip:focus{transform:none}
.ltr{direction:ltr;unicode-bidi:isolate}
.i{width:20px;height:20px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.i-fill{fill:currentColor;stroke:none}
html[dir="rtl"] .flip{transform:scaleX(-1)}
main,.foot{position:relative;z-index:1}
main{overflow-x:hidden;overflow-x:clip}

/* ===== Ambient layers: slow aurora light, pointer spotlight, edge blur, film grain ===== */
.fx{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.fx-light::before,.fx-light::after{content:"";position:absolute;width:80vmax;height:80vmax;border-radius:50%;will-change:transform}
.fx-light::before{top:-42vmax;left:-30vmax;background:radial-gradient(closest-side,rgba(245,173,42,var(--glow)),transparent);animation:drift-a 36s ease-in-out infinite alternate}
.fx-light::after{bottom:-46vmax;right:-32vmax;background:radial-gradient(closest-side,rgba(236,226,206,calc(var(--glow)*.4)),transparent);animation:drift-b 44s ease-in-out infinite alternate}
@keyframes drift-a{to{transform:translate3d(24vmax,26vmax,0) scale(1.12)}}
@keyframes drift-b{to{transform:translate3d(-26vmax,-18vmax,0) scale(.9)}}
.fx-spot{position:absolute;left:0;top:0;width:64vmax;height:64vmax;margin:-32vmax 0 0 -32vmax;border-radius:50%;background:radial-gradient(closest-side,rgba(245,173,42,var(--spot)),transparent 72%);transform:translate3d(50vw,30vh,0);opacity:0;transition:opacity 1.4s ease;will-change:transform}
html.has-pointer .fx-spot{opacity:1}
.edge{position:fixed;left:0;right:0;z-index:40;pointer-events:none;-webkit-backdrop-filter:blur(var(--edge-blur,6px));backdrop-filter:blur(var(--edge-blur,6px));transition:opacity .4s}
.edge-top{top:0;height:min(22vh,210px);-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent);mask-image:linear-gradient(180deg,#000 30%,transparent)}
.edge-bottom{bottom:0;height:min(16vh,150px);-webkit-mask-image:linear-gradient(0deg,#000 18%,transparent);mask-image:linear-gradient(0deg,#000 18%,transparent)}
html:has(input:focus,textarea:focus) .edge,html.is-locked .edge{opacity:0}
.has-chips .edge-top{display:none}
.grain{position:fixed;inset:-25%;z-index:45;pointer-events:none;opacity:var(--grain);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' 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 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:220px;animation:grain 1.1s steps(5) infinite}
html[data-theme="light"] .grain{filter:invert(1)}
@keyframes grain{0%,100%{transform:translate3d(0,0,0)}20%{transform:translate3d(-4%,3%,0)}40%{transform:translate3d(3%,-5%,0)}60%{transform:translate3d(-2%,4%,0)}80%{transform:translate3d(5%,1%,0)}}

/* Reading progress hairline */
.progress{position:fixed;top:0;left:0;right:0;z-index:66;height:2px;background:var(--amber);transform:scaleX(0);transform-origin:right;pointer-events:none}
html[dir="ltr"] .progress{transform-origin:left}
@keyframes progress{to{transform:scaleX(1)}}

/* Pointer ring (desktop only, created by JS) */
.cursor{position:fixed;left:0;top:0;z-index:110;width:0;height:0;pointer-events:none;opacity:0;mix-blend-mode:difference;transition:opacity .35s}
.cursor.is-on{opacity:1}
.cursor span{position:absolute;left:-44px;top:-44px;display:grid;place-items:center;width:88px;height:88px;border:2.4px solid #fff;border-radius:50%;font-size:12.5px;font-weight:600;letter-spacing:.04em;line-height:1;color:transparent;opacity:.7;transform:scale(.36);transition:transform .55s var(--ease),background-color .35s,border-color .35s,color .25s,opacity .35s}
.cursor.is-link span{transform:scale(.58);opacity:1}
.cursor.is-play,.cursor.is-view{mix-blend-mode:normal}
.cursor.is-play span,.cursor.is-view span{transform:none;background:rgba(245,173,42,.94);border-color:transparent;color:#141413;opacity:1}
html.is-locked .cursor{opacity:0}

/* ===== Scroll reveal: enter (zoom / zoom-out / slide right→left / mask), exit at the top, reverse when scrolling back ===== */
.sr,.sri{--sr-x:0px;--sr-y:46px;--sr-s:1}
.sr-zoom{--sr-y:22px;--sr-s:.88}
.sr-zoomout{--sr-y:10px;--sr-s:1.14}
.sr-slide{--sr-x:90px;--sr-y:0px}
html[dir="ltr"] .sr-slide{--sr-x:-90px}
.sr-mask{--sr-y:24px;--r:16px}
@keyframes sr-in{from{opacity:0;transform:translate3d(var(--sr-x),var(--sr-y),0) scale(var(--sr-s))}to{opacity:1;transform:none}}
@keyframes sr-out{from{opacity:1;transform:none}to{opacity:0;transform:translate3d(0,-34px,0) scale(.96)}}
@keyframes mask-in{from{clip-path:inset(42% 0 0 0 round var(--r));opacity:.25}to{clip-path:inset(0 0 0 0 round var(--r));opacity:1}}
@keyframes img-in{from{scale:1.24}to{scale:1}}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .sr{animation:sr-in linear both,sr-out linear forwards;animation-timeline:view(block 76px 0px);animation-range:entry 0% entry 90%,exit 0% exit 100%}
    .sri{animation:sr-in linear both;animation-timeline:view(block 76px 0px);animation-range:entry 0% entry 90%}
    .sr-mask{view-timeline:--tile block;view-timeline-inset:76px 0px;animation:mask-in linear both,sr-out linear forwards;animation-timeline:--tile,--tile;animation-range:entry 0% cover 42%,exit 0% exit 100%}
    .sr-mask img{animation:img-in linear both;animation-timeline:--tile;animation-range:entry 0% cover 62%}
  }
}
html.no-sda .sr,html.no-sda .sri{opacity:0;transform:translate3d(var(--sr-x),var(--sr-y),0) scale(var(--sr-s));transition:opacity .9s var(--ease),transform 1.1s var(--ease),clip-path 1.2s var(--ease);transition-delay:calc(var(--i,0)*70ms)}
html.no-sda .sr-mask{clip-path:inset(30% 0 0 0 round var(--r))}
html.no-sda .sr.is-in,html.no-sda .sri.is-in{opacity:1;transform:none}
html.no-sda .sr-mask.is-in{clip-path:inset(0 0 0 0 round var(--r))}
html.no-sda .sr.is-up{opacity:0;transform:translate3d(0,-34px,0) scale(.96);transition-delay:0s}

/* ===== Buttons ===== */
.btn{--h:54px;position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:var(--h);padding:0 28px;border-radius:999px;border:1px solid transparent;background:none;font-size:15.5px;font-weight:600;line-height:1;white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:transform .45s var(--ease),background-color .25s,color .25s,border-color .25s}
.btn:active{transform:scale(.97)}
.btn .i{width:20px;height:20px}
.btn-amber{background:var(--amber);color:#141413}
.btn-amber::after,.btn-wa::after{content:"";position:absolute;top:0;bottom:0;left:0;z-index:-1;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:translate3d(-130%,0,0) skewX(-18deg);transition:transform .9s var(--ease)}
.btn-amber:hover::after,.btn-wa:hover::after{transform:translate3d(330%,0,0) skewX(-18deg)}
.btn-amber:hover{background:var(--amber-2);transform:translateY(-2px)}
.btn-ghost{border-color:rgba(255,255,255,.4);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
.btn-line{border-color:var(--line-2);color:var(--fg)}
.btn-line:hover{border-color:var(--fg)}
.btn-wa{background:var(--wa);color:#fff}
.btn-wa:hover{background:#1fbd5a;transform:translateY(-2px)}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}

/* ===== Header (transparent on the hero, glass after, hides while scrolling down) ===== */
.hdr{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--header-h);color:var(--fg);transition:transform .55s var(--ease),color .4s}
.hdr::before{content:"";position:absolute;inset:0;background:rgba(var(--bg-rgb),.72);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);border-bottom:1px solid var(--line);opacity:0;transition:opacity .4s}
.hdr.is-scrolled::before{opacity:1}
.hdr.on-hero{color:#fff}
.hdr.on-hero::before{opacity:0}
.hdr.is-hidden{transform:translate3d(0,-100%,0)}
.hdr-in{position:relative;height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:inline-flex;align-items:center;gap:11px}
.brand-logo{width:34px;height:34px;object-fit:contain;flex-shrink:0;transition:background-color .4s,padding .4s}
html[data-theme="light"] .hdr:not(.on-hero) .brand-logo,html[data-theme="light"] .foot .brand-logo{padding:5px;border-radius:9px;background:#1b1b1b}
.brand-name{font-size:19px;font-weight:700}
.hdr-act{display:flex;align-items:center;gap:4px}
.nav{display:flex;align-items:center;gap:clamp(20px,2.6vw,44px);font-size:15.5px;font-weight:500}
.nav a{position:relative;padding:8px 0;opacity:.8;transition:opacity .25s}
.nav a::after{content:"";position:absolute;inset-inline:0;bottom:1px;height:1.5px;background:var(--amber);transform:scaleX(0);transition:transform .55s var(--ease)}
.nav a:hover,.nav a.is-active{opacity:1}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1)}
.lang{display:grid;place-items:center;min-width:46px;height:46px;padding:0 8px;border-radius:999px;font-family:var(--font-num);font-size:14px;font-weight:700;letter-spacing:.08em;transition:background-color .2s}
.lang:hover,.burger:hover{background:rgba(128,128,128,.16)}
.burger{position:relative;width:48px;height:48px;padding:0;border:0;border-radius:999px;background:transparent;color:inherit;transition:background-color .2s}
.burger span{position:absolute;right:13px;height:2px;border-radius:2px;background:currentColor;transition:transform .55s var(--ease),top .55s var(--ease),width .55s var(--ease)}
.burger span:first-child{top:19px;width:22px}
.burger span:last-child{top:27px;width:14px}
html[dir="ltr"] .burger span{right:auto;left:13px}
.burger[aria-expanded="true"] span{top:23px;width:22px}
.burger[aria-expanded="true"] span:first-child{transform:rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:rotate(-45deg)}

/* ===== Side menu (all devices) + iOS-style theme switch ===== */
.menu{position:fixed;inset:0;z-index:80;visibility:hidden;pointer-events:none;transition:visibility 0s linear .8s}
.menu.is-open{visibility:visible;pointer-events:auto;transition-delay:0s}
.menu-bg{position:absolute;inset:0;background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;transition:opacity .55s ease}
.menu.is-open .menu-bg{opacity:1}
.menu-panel{--off:100%;position:absolute;top:0;bottom:0;inset-inline-end:0;display:flex;flex-direction:column;width:min(92vw,460px);padding:14px clamp(22px,4vw,40px) calc(26px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;background:var(--bg-3);color:var(--fg);box-shadow:0 0 90px rgba(0,0,0,.35);transform:translate3d(var(--off),0,0);transition:transform .8s var(--ease)}
html[dir="rtl"] .menu-panel{--off:-100%}
.menu.is-open .menu-panel{transform:none}
.menu-top{display:flex;align-items:center;justify-content:space-between;min-height:56px}
.menu-x{display:grid;place-items:center;width:46px;height:46px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--fg);transition:background-color .2s,transform .4s var(--ease)}
.menu-x:hover{background:rgba(128,128,128,.16);transform:rotate(90deg)}
.menu-links{margin-top:clamp(18px,6vh,60px)}
.menu-links a{display:block;padding:6px 0;font-size:clamp(30px,6.6vw,42px);font-weight:500;line-height:1.3;opacity:0;transform:translate3d(0,26px,0);transition:opacity .5s ease,transform .85s var(--ease),color .2s}
.menu.is-open .menu-links a{opacity:1;transform:none;transition-delay:calc(var(--i)*55ms + 180ms),calc(var(--i)*55ms + 180ms),0s}
.menu-links li{--i:0}
.menu-links a:hover,.menu-links a.is-active{color:var(--accent)}
.menu-foot{display:grid;gap:14px;margin-top:auto;padding-top:32px;opacity:0;transition:opacity .6s ease}
.menu.is-open .menu-foot{opacity:1;transition-delay:.5s}
.menu-row{display:inline-flex;align-items:center;gap:12px;width:fit-content;color:var(--fg-2);transition:color .2s}
.menu-row:hover{color:var(--fg)}
.sw{position:relative;display:inline-flex;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sw input{position:absolute;width:1px;height:1px;opacity:0}
.sw-track{position:relative;width:64px;height:34px;border-radius:999px;background:#323230;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:background-color .45s var(--ease)}
.sw-knob{position:absolute;top:3px;inset-inline-start:3px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;color:#1b1b1b;box-shadow:0 2px 8px rgba(0,0,0,.35);transition:transform .55s var(--ease)}
.sw-knob .i{position:absolute;width:16px;height:16px;transition:opacity .35s,transform .55s var(--ease)}
.sw-knob .sun{opacity:0;transform:rotate(-90deg) scale(.5)}
.sw input:checked+.sw-track{background:var(--amber)}
.sw input:checked+.sw-track .sw-knob{transform:translateX(30px)}
html[dir="rtl"] .sw input:checked+.sw-track .sw-knob{transform:translateX(-30px)}
.sw input:checked+.sw-track .moon{opacity:0;transform:rotate(90deg) scale(.5)}
.sw input:checked+.sw-track .sun{opacity:1;transform:none}
.sw input:focus-visible+.sw-track{outline:2px solid var(--amber);outline-offset:3px}

/* ===== Hero: full-screen film that settles into a framed card while scrolling ===== */
.hero{--hf-t:10vh;--hf-x:3.4vw;--hf-b:5vh;position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:100vh;min-height:100svh;overflow:hidden;background:var(--hero-bg);color:#fff}
.hero-media{position:absolute;inset:0;z-index:-1;overflow:hidden;background:#0c0c0b}
.hero-poster,.hero-mp4{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-poster{transform:scale(1.04);animation:kb 26s ease-in-out infinite alternate}
@keyframes kb{to{transform:scale(1.15) translate3d(1.5%,-1%,0)}}
.hero-mp4{opacity:0;transition:opacity 1.4s ease}
.hero.is-playing .hero-mp4{opacity:1}
.hero-slides{position:absolute;inset:0}
.hero-slide{position:absolute;inset:0;opacity:0}
.hero-slide:first-child{opacity:1}
.hero-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04);animation:kb 26s ease-in-out infinite alternate}
.hero-slides.n2{--sl:sl2 14s}
.hero-slides.n3{--sl:sl3 21s}
.hero-slides.n4{--sl:sl4 28s}
.hero-slides.is-ready .hero-slide{animation:var(--sl) linear infinite;animation-delay:calc(var(--i)*7s - 1.4s)}
@keyframes sl2{0%{opacity:0}10%{opacity:1}50%{opacity:1}60%{opacity:0}100%{opacity:0}}
@keyframes sl3{0%{opacity:0}6.7%{opacity:1}33.3%{opacity:1}40%{opacity:0}100%{opacity:0}}
@keyframes sl4{0%{opacity:0}5%{opacity:1}25%{opacity:1}30%{opacity:0}100%{opacity:0}}
.hero-shade{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 40%,transparent 45%,rgba(0,0,0,.5)),linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.05) 28%,rgba(0,0,0,.12) 52%,rgba(0,0,0,.86) 100%)}
.hero-shade::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.5),transparent 65%);opacity:0;transition:opacity 1.4s ease}
html[dir="rtl"] .hero-shade::after{background:linear-gradient(270deg,rgba(0,0,0,.5),transparent 65%)}
.hero.is-playing .hero-shade::after{opacity:1}
.hero-content{position:relative;padding-block:calc(var(--header-h) + 40px) clamp(110px,17vh,170px)}
.hero-title{max-width:15ch;font-size:clamp(2.6rem,1.1rem + 5.8vw,6.2rem);font-weight:700;line-height:1.2;text-wrap:balance}
html[lang^="en"] .hero-title{line-height:1.02;letter-spacing:-.035em}
.hero-title .w{display:inline-block;overflow:hidden;vertical-align:top;padding-block:.08em .14em;margin-block:-.08em -.14em}
.hero-title .w>span{display:inline-block;transform:translate3d(0,108%,0);animation:rise 1.15s var(--ease) forwards;animation-delay:calc(var(--i)*90ms + 200ms)}
.hero-title .a{color:var(--amber)}
@keyframes rise{to{transform:none}}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,4.5vh,44px);opacity:0;animation:fade-up 1s var(--ease) .95s forwards}
@keyframes fade-up{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:none}}
.scroll-cue{position:absolute;left:50%;bottom:0;width:1px;height:clamp(56px,10vh,96px);margin-left:-.5px;background:rgba(255,255,255,.2);opacity:0;animation:fade-up 1s var(--ease) 1.4s forwards}
.scroll-cue::before{content:"";position:absolute;inset:-12px -16px 0}
.scroll-cue span{position:absolute;left:0;top:0;width:1px;height:38%;background:linear-gradient(180deg,transparent,#fff);animation:cue-line 2.3s var(--ease) infinite}
@keyframes cue-line{from{transform:translate3d(0,-100%,0)}to{transform:translate3d(0,270%,0)}}
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion:no-preference){
    .hero-content{animation:hero-out linear both;animation-timeline:scroll(root);animation-range:0 65vh}
    .hero-media{animation:media-frame linear both;animation-timeline:scroll(root);animation-range:0 90vh}
    .progress{animation:progress linear both;animation-timeline:scroll(root)}
  }
}
@keyframes hero-out{to{opacity:0;transform:translate3d(0,-90px,0) scale(.97)}}
@keyframes media-frame{to{clip-path:inset(var(--hf-t) var(--hf-x) var(--hf-b) round 28px)}}

/* ===== Sections ===== */
.sec{padding-block:clamp(72px,11vw,150px)}
.sec-title{margin-bottom:clamp(28px,4.5vw,60px);font-size:clamp(2.5rem,1.2rem + 4.6vw,5.4rem);font-weight:500;line-height:1.14}
html[lang^="en"] .sec-title{letter-spacing:-.045em;line-height:1}
.sec-title.sm{font-size:clamp(1.7rem,1rem + 2.2vw,2.8rem)}

/* Works (video) */
.works-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
.vid{position:relative;isolation:isolate;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;border-radius:16px;overflow:hidden;background:#0d0d0c;color:#fff;cursor:pointer;text-align:start}
.works-grid>.vid{grid-column:span 4}
.works-grid>.vid.is-half{grid-column:span 6}
.works-grid>.vid.is-q{grid-column:span 3}
.works-grid>.vid-main{grid-column:1/-1;aspect-ratio:21/9}
.works-grid>.vid-main.is-half{grid-column:span 6;aspect-ratio:16/9}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 28px;margin-bottom:clamp(28px,4.5vw,60px)}
.sec-head .sec-title{margin:0}
.sec-more{display:inline-flex;align-items:center;gap:8px;padding-bottom:.6em;font-size:15.5px;font-weight:500;color:var(--fg-2);transition:color .2s}
.sec-more:hover{color:var(--fg)}
.sec-more .i{width:17px;height:17px;transition:translate .5s var(--ease)}
.sec-more:hover .i{translate:-4px 0}
html[dir="ltr"] .sec-more:hover .i{translate:4px 0}
.vid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04);filter:saturate(.9);transition:transform 1.4s var(--ease),filter .6s}
.vid:hover img,.vid:focus-visible img{transform:scale(1.1);filter:none}
.vid::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.62))}
.play{position:absolute;z-index:2;top:50%;left:50%;display:grid;place-items:center;width:70px;height:70px;margin:-35px 0 0 -35px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:transform .55s var(--ease),background-color .3s,color .3s,border-color .3s}
.play .i{width:24px;height:24px;transform:translateX(2px)}
.play.sm{width:54px;height:54px;margin:-27px 0 0 -27px}
.play.sm .i{width:19px;height:19px}
.vid-main .play{width:94px;height:94px;margin:-47px 0 0 -47px}
.vid:hover .play,.vid:focus-visible .play{background:var(--amber);border-color:transparent;color:#141413;transform:scale(1.1)}
.reel-ring{position:absolute;z-index:1;top:50%;left:50%;width:178px;height:178px;margin:-89px 0 0 -89px;direction:ltr;overflow:visible;fill:rgba(255,255,255,.8);font-family:var(--font-num);font-size:11.5px;font-weight:500;letter-spacing:.3em;pointer-events:none;animation:spin 24s linear infinite;transition:opacity .4s}
.vid-main:hover .reel-ring{opacity:.35}
.vid-n{position:absolute;z-index:1;bottom:12px;inset-inline-start:14px;font-family:var(--font-num);font-size:12px;font-weight:600;letter-spacing:.12em;color:rgba(255,255,255,.82)}
.vtile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0d0d0c;transform:scale(1.02);transition:transform 1.4s var(--ease)}
.vtile:hover video{transform:scale(1.07)}
.vid-embed{cursor:auto}
.vid-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Stats line */
.stats{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding-block:clamp(40px,6vw,84px);border-block:1px solid var(--line)}
.stat{display:flex;align-items:baseline;gap:14px}
.stat b{font-family:var(--font-num);font-size:clamp(3.4rem,1.6rem + 6.4vw,8.4rem);font-weight:400;line-height:.9;letter-spacing:-.06em}
.stat b i{font-style:normal;font-weight:400;color:var(--accent)}
.stat>span{font-size:clamp(1.05rem,.85rem + .8vw,1.6rem);color:var(--fg-2)}

/* Clients marquee */
.stats-sec+.clients{padding-top:clamp(44px,6vw,84px)}
.clients .sec-title{margin-bottom:clamp(20px,3vw,40px)}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;align-items:center;gap:clamp(40px,6.5vw,96px);width:max-content;animation:marquee 56s linear infinite}
html[dir="rtl"] .marquee-track{animation-name:marquee-rtl}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translate3d(-50%,0,0)}}
@keyframes marquee-rtl{to{transform:translate3d(50%,0,0)}}
.logo{position:relative;flex:0 0 auto;width:clamp(130px,13vw,184px);aspect-ratio:4/3;overflow:hidden}
.logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:scale(1.18);clip-path:inset(5.5% 5% round 8px);filter:url(#naq-logo-on-dark);opacity:.72;transition:opacity .3s}
html[data-theme="light"] .logo img{filter:url(#naq-logo-on-light);opacity:.74}
.logo:hover img{opacity:1}

/* Who we film: statement that lights up word by word + three panels */
.segments{padding-top:clamp(56px,8vw,120px)}
.stmt{max-width:21ch;margin-bottom:clamp(34px,5vw,72px);font-size:clamp(2rem,1rem + 3.5vw,4.4rem);font-weight:500;line-height:1.32;text-wrap:balance}
html[lang^="en"] .stmt{max-width:23ch;letter-spacing:-.035em;line-height:1.1}
.stmt .a{color:var(--accent)}
@keyframes stw-in{from{opacity:.14}to{opacity:1}}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .stmt{view-timeline:--stmt block}
    .stw{animation:stw-in linear both;animation-timeline:--stmt;animation-range:cover calc(12% + var(--i)*2.6%) cover calc(24% + var(--i)*2.6%)}
  }
}
html.no-sda .stw{opacity:.14;transition:opacity .6s ease;transition-delay:calc(var(--i)*70ms)}
html.no-sda .stmt.is-in .stw{opacity:1}
.seg-row{display:flex;gap:clamp(10px,1.2vw,16px);height:clamp(440px,64vh,660px)}
.seg{--r:18px;position:relative;isolation:isolate;flex:1 1 0;min-width:0;border-radius:18px;overflow:hidden;background:#0d0d0c;color:#fff;transition:flex-grow 1s var(--ease)}
.seg:hover,.seg:focus-visible{flex-grow:1.85}
.seg-img{position:absolute;inset:0;overflow:hidden}
.seg-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease),filter .8s ease}
.seg:hover .seg-img img{transform:scale(1.05)}
.seg-row:hover .seg:not(:hover) .seg-img img{filter:brightness(.5) saturate(.75)}
.seg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08) 30%,rgba(0,0,0,.78));pointer-events:none}
.seg-body{position:absolute;z-index:1;inset-inline:clamp(18px,2.2vw,32px);bottom:clamp(20px,2.6vw,34px);display:grid;gap:12px}
.seg-name{font-size:clamp(1.3rem,.85rem + 1.3vw,2.2rem);font-weight:700;line-height:1.25}
.seg-cta{display:inline-flex;align-items:center;gap:10px;width:fit-content;font-size:14.5px;font-weight:500;color:rgba(255,255,255,.85);opacity:0;transform:translate3d(0,10px,0);transition:opacity .5s ease,transform .8s var(--ease)}
.seg-cta::before{content:"";width:28px;height:1px;background:var(--amber)}
.seg-cta .i{width:17px;height:17px}
.seg:hover .seg-cta,.seg:focus-visible .seg-cta{opacity:1;transform:none}
@media (hover:none){.seg-cta{opacity:1;transform:none}}

/* Photo galleries mosaic */
.gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(150px,17vw,260px);grid-auto-flow:dense;gap:clamp(10px,1.4vw,18px)}
.g{position:relative;isolation:isolate;display:block;border-radius:16px;overflow:hidden;background:var(--bg-2)}
.g:nth-child(8n+1){grid-column:span 2;grid-row:span 2}
.g:nth-child(8n+4),.g:nth-child(8n+6){grid-column:span 2}
.g:nth-child(8n+7){grid-row:span 2}
.g:nth-child(8n+8){grid-column:span 3}
.g-img{position:absolute;inset:0;overflow:hidden}
.g-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.g:hover .g-img img{transform:scale(1.07)}
.g::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(0,0,0,.7));pointer-events:none}
.g-name{position:absolute;z-index:1;inset-inline:18px;bottom:16px;font-size:clamp(16px,.9rem + .55vw,23px);font-weight:700;line-height:1.3;color:#fff}
.g-name::after{content:"";display:block;width:26px;height:2px;margin-top:9px;background:var(--amber);transition:width .55s var(--ease)}
.g:hover .g-name::after{width:60px}

/* Services: editorial index */
.svc-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,6vw,96px)}
.svc-list li:nth-child(-n+2) .svc{border-top:1px solid var(--line)}
.svc{position:relative;display:flex;align-items:baseline;gap:clamp(16px,2vw,28px);padding-block:clamp(22px,2.6vw,34px);border-bottom:1px solid var(--line);color:var(--fg)}
.svc::after{content:"";position:absolute;inset-inline:0;bottom:-1px;height:1px;background:var(--amber);transform:scaleX(0);transform-origin:right;transition:transform .9s var(--ease)}
html[dir="ltr"] .svc::after{transform-origin:left}
.svc:hover::after,.svc:focus-visible::after{transform:scaleX(1)}
.svc-n{min-width:2.4em;font-family:var(--font-num);font-size:13px;font-weight:500;letter-spacing:.14em;color:var(--accent)}
.svc-name{flex:1;font-size:clamp(1.35rem,.85rem + 1.6vw,2.5rem);font-weight:500;line-height:1.3;transition:translate .7s var(--ease)}
html[lang^="en"] .svc-name{letter-spacing:-.025em}
.svc-arrow{width:26px;height:26px;align-self:center;opacity:.3;transition:opacity .4s,translate .7s var(--ease),color .3s}
.svc:hover .svc-name{translate:-10px 0}
.svc:hover .svc-arrow{opacity:1;translate:-6px 0;color:var(--accent)}
html[dir="ltr"] .svc:hover .svc-name{translate:10px 0}
html[dir="ltr"] .svc:hover .svc-arrow{translate:6px 0}

/* Contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(40px,7vw,110px);align-items:start}
.contact-side .btn{margin-top:4px}
.contact-lines{display:grid;gap:12px;margin-top:30px;font-size:clamp(16px,.9rem + .4vw,19px)}
.contact-lines a{display:inline-flex;align-items:center;gap:12px;color:var(--fg-2);transition:color .2s}
.contact-lines a:hover{color:var(--fg)}
.cform{display:grid;gap:clamp(20px,2.6vw,30px)}
.f input,.f textarea{width:100%;padding:14px 2px;border:0;border-bottom:1.5px solid var(--line-2);border-radius:0;background:transparent;font-size:clamp(17px,.95rem + .45vw,21px);color:var(--fg);-webkit-appearance:none;appearance:none;transition:border-color .3s}
.f textarea{min-height:100px;resize:vertical;line-height:1.7}
.f input::placeholder,.f textarea::placeholder{color:var(--fg-3);opacity:1}
.f input:focus,.f textarea:focus{outline:0;border-bottom-color:var(--amber)}
.f.has-error input,.f.has-error textarea{border-bottom-color:var(--red)}
.f-err{margin-top:7px;font-size:13.5px;color:var(--red)}
.f-err:empty,.f-alert:empty{display:none}
.f-type{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.f-lbl{margin-inline-end:6px;color:var(--fg-3)}
.pill{position:relative;cursor:pointer}
.pill input{position:absolute;width:1px;height:1px;opacity:0}
.pill span{display:inline-flex;align-items:center;height:44px;padding:0 22px;border-radius:999px;border:1px solid var(--line-2);font-weight:600;transition:background-color .25s,color .25s,border-color .25s}
.pill:hover span{border-color:var(--fg-2)}
.pill input:checked+span{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.pill input:focus-visible+span{outline:2px solid var(--amber);outline-offset:3px}
.f-alert{font-weight:500;color:var(--red)}
.cform .btn{justify-self:start;min-width:190px}
.spin{display:none;width:18px;height:18px;border-radius:50%;border:2px solid rgba(20,20,19,.25);border-top-color:#141413;animation:spin .7s linear infinite}
.is-loading .spin{display:inline-block}
.is-loading [type="submit"] .i{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
.ltr-in{direction:ltr}
html[dir="rtl"] .ltr-in{text-align:right}
.hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.map{border-radius:16px;overflow:hidden;aspect-ratio:21/8;background:var(--bg-2)}
.map iframe{width:100%;height:100%;border:0;filter:grayscale(.3)}
html[data-theme="dark"] .map iframe{filter:invert(.9) hue-rotate(180deg) grayscale(.4)}
.map-sec{padding-top:0}

/* Inner pages */
.page-top{padding-block:calc(var(--header-h) + clamp(56px,11vw,150px)) clamp(20px,4vw,48px)}
.page-title{font-size:clamp(2.8rem,1.3rem + 5.6vw,7rem);font-weight:500;line-height:1.1;text-wrap:balance}
html[lang^="en"] .page-title{letter-spacing:-.045em;line-height:1}
.page-lead{max-width:30ch;margin-top:clamp(18px,3vw,30px);font-size:clamp(1.15rem,.95rem + .8vw,1.7rem);line-height:1.7;color:var(--fg-2)}
.page-top+.sec{padding-top:clamp(16px,3vw,40px)}
.cat-videos{padding-bottom:0}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(10px,1.4vw,18px)}
.masonry{columns:3 300px;column-gap:clamp(10px,1.4vw,18px)}
.m-item{--r:14px;display:block;margin-bottom:clamp(10px,1.4vw,18px);break-inside:avoid;border-radius:14px;overflow:hidden;background:var(--bg-2);cursor:zoom-in}
.m-item img{width:100%;transition:transform 1.2s var(--ease)}
.m-item:hover img{transform:scale(1.04)}
.status{display:grid;min-height:92vh;align-items:center;padding-block:calc(var(--header-h) + 40px) 80px}
.status-in{display:flex;flex-direction:column;align-items:center;text-align:center}
.status-in .page-lead{margin-inline:auto}
.status-ico{width:86px;height:86px;margin-bottom:26px;color:var(--accent);fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.nf-code{font-family:var(--font-num);font-size:clamp(6rem,3rem + 12vw,13rem);font-weight:400;line-height:.9;letter-spacing:-.06em;color:var(--accent)}
.status-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:34px}

/* Footer */
.foot{overflow:hidden;padding-block:clamp(60px,8vw,100px) calc(30px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.foot-mark{position:absolute;z-index:-1;inset-inline:0;bottom:-.2em;font-size:clamp(6rem,24vw,22rem);font-weight:700;line-height:1;text-align:center;color:var(--fg);opacity:.035;white-space:nowrap;pointer-events:none;user-select:none}
html[lang^="en"] .foot-mark{font-size:clamp(4rem,19vw,20rem)}
.foot-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.foot .brand-name{font-size:17px}
.social{display:flex;flex-wrap:wrap;gap:4px}
.social a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--fg-2);transition:color .2s,background-color .2s}
.social a:hover{color:var(--fg);background:rgba(128,128,128,.16)}
.social .i{width:19px;height:19px}
.foot-nav{display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:30px;font-size:16px;font-weight:500}
.foot-nav a{opacity:.85;transition:opacity .2s,color .2s}
.foot-nav a:hover{opacity:1;color:var(--accent)}
.foot-mid{display:flex;flex-wrap:wrap;gap:8px 30px;margin-top:22px;font-size:15px;color:var(--fg-2)}
.foot-mid a{transition:color .2s}
.foot-mid a:hover{color:var(--fg)}
.foot-legal{margin-top:clamp(84px,13vw,170px);font-size:12.5px;line-height:2;color:var(--fg-3)}
.foot-legal strong{font-weight:600;color:var(--fg-2)}

/* WhatsApp: one tap */
.wa-fab{position:fixed;z-index:70;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--wa);color:#fff;box-shadow:0 12px 30px -10px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.18);transition:transform .45s var(--ease),opacity .3s}
.wa-fab .i{width:28px;height:28px}
.wa-fab:hover{transform:scale(1.07)}
.wa-fab.is-away{opacity:0;transform:scale(.6);pointer-events:none}
html.is-locked .wa-fab{opacity:0;pointer-events:none}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:clamp(12px,4vw,56px);background:rgba(8,8,7,.95);visibility:hidden;opacity:0;transition:opacity .35s,visibility 0s linear .35s}
.lightbox.is-open{visibility:visible;opacity:1;transition-delay:0s}
.lb-stage{display:grid;place-items:center;width:min(100%,1240px);transform:scale(.95);transition:transform .6s var(--ease)}
.lightbox.is-open .lb-stage{transform:none}
.lb-stage iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:16px;background:#000;box-shadow:0 40px 120px rgba(0,0,0,.6)}
.lb-stage img{max-width:100%;max-height:86vh;width:auto;border-radius:12px;object-fit:contain}
.lb-stage video{width:100%;max-height:86vh;border-radius:16px;background:#000;box-shadow:0 40px 120px rgba(0,0,0,.6)}
.lb-btn{position:absolute;z-index:2;display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:rgba(255,255,255,.08);color:#fff;transition:background-color .2s}
.lb-btn:hover{background:rgba(255,255,255,.18)}
.lb-close{top:max(14px,env(safe-area-inset-top));inset-inline-end:14px}
.lb-prev,.lb-next{top:50%;margin-top:-24px;display:none}
.lb-prev{inset-inline-start:14px}
.lb-next{inset-inline-end:14px}
.lightbox.has-nav .lb-prev,.lightbox.has-nav .lb-next{display:grid}
.lb-prev .i{transform:scaleX(-1)}
html[dir="rtl"] .lb-prev .i{transform:none}
html[dir="rtl"] .lb-next .i{transform:scaleX(-1)}

/* Media page: sticky category chips + a section per category */
.chips-wrap{position:sticky;top:var(--header-h);z-index:30;padding-block:10px;background:rgba(var(--bg-rgb),.84);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);border-block:1px solid var(--line);transition:top .55s var(--ease)}
html.hdr-off .chips-wrap{top:0}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:999px;border:1px solid var(--line-2);font-size:14.5px;font-weight:500;color:var(--fg-2);white-space:nowrap;transition:color .25s,border-color .25s,background-color .25s}
.chip:hover{color:var(--fg);border-color:var(--fg-2)}
.chip.is-active{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.mcat-head .mcat-n{font-size:clamp(15px,.8rem + .4vw,19px);font-weight:500}
.vsec .works-grid{margin-top:2px}
.mcat{padding-top:clamp(44px,6vw,90px);scroll-margin-top:calc(var(--header-h) + 64px)}
.mcat-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 20px;margin-bottom:clamp(16px,2.2vw,28px)}
.mcat-title{font-size:clamp(1.8rem,1rem + 2.4vw,3.2rem);font-weight:500;line-height:1.2}
html[lang^="en"] .mcat-title{letter-spacing:-.035em}
.mcat-all{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:500;color:var(--fg-2);transition:color .2s}
.mcat-all:hover{color:var(--fg)}
.mcat-all .i{width:17px;height:17px;transition:translate .5s var(--ease)}
.mcat-all:hover .i{translate:-4px 0}
html[dir="ltr"] .mcat-all:hover .i{translate:4px 0}
.mcat-n{font-family:var(--font-num);color:var(--accent)}
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(140px,15vw,250px);gap:clamp(8px,1.1vw,14px)}
.bento.is-flip{grid-auto-flow:dense}
.bento .is-big{grid-column:span 2;grid-row:span 2}
.bento.is-flip .is-big{grid-column:3/span 2}
.bento .is-wide{grid-column:span 2}
.bento .is-solo{grid-column:1/-1;grid-row:span 2}
.m-tile{--r:14px;position:relative;display:block;border-radius:14px;overflow:hidden;background:var(--bg-2);cursor:zoom-in}
.m-tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease)}
.m-tile:hover img{transform:scale(1.05)}
/* Photo gallery: blocks of two rows, each a different composition (feature, tall, wide), always full */
.pg{display:grid;gap:clamp(8px,1.1vw,14px)}
.pg-block{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(8px,1.1vw,14px);aspect-ratio:2.7}
.pg-block>.m-tile{grid-column:var(--c)/span var(--cs);grid-row:var(--r)/span var(--rs);min-width:0;min-height:0}
.pg-block>.m-tile img{position:absolute;inset:0}
.about-photos{padding-top:clamp(20px,3vw,44px)}

/* Contact page: direct lines + location */
.cinfo-sec{padding-top:clamp(12px,2.4vw,32px)}
.cinfo{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:clamp(28px,4vw,48px);border-block:1px solid var(--line)}
.cinfo li+li{border-inline-start:1px solid var(--line)}
.cinfo a{display:grid;gap:8px;height:100%;padding:clamp(20px,2.4vw,30px) clamp(14px,1.8vw,26px);transition:background-color .3s}
.cinfo a:hover{background:rgba(128,128,128,.07)}
.cinfo-l{font-size:13.5px;color:var(--fg-3)}
.cinfo-v{font-size:clamp(16px,.85rem + .45vw,20px);font-weight:500;line-height:1.45;color:var(--fg)}
.cinfo-v.ltr{justify-self:start}
.cinfo-sec .map{--r:16px;aspect-ratio:21/9}
.map-open{display:inline-flex;align-items:center;gap:10px;margin-top:18px;font-weight:500;color:var(--fg-2);transition:color .2s}
.map-open:hover{color:var(--fg)}
.contact-form-only{padding-top:clamp(40px,6vw,90px)}

/* Closing call to action */
.cta-in{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;padding-top:clamp(40px,6vw,80px);border-top:1px solid var(--line)}
.cta .sec-title{margin:0}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px}

/* ===== Responsive ===== */
@media (max-width:1000px){
  .works-grid>.vid.is-q{grid-column:span 6}
}
@media (max-width:900px){
  .nav{display:none}
  .cinfo{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cinfo li:nth-child(3){border-inline-start:0}
  .cinfo li:nth-child(n+3){border-top:1px solid var(--line)}
  .cinfo-sec .map{aspect-ratio:4/3}
  .contact-grid{grid-template-columns:1fr}
  .map{aspect-ratio:4/3}
  .seg-row{height:clamp(380px,56vh,520px)}
}
@media (max-width:760px){
  :root{--header-h:62px;--edge-blur:4px}
  .hero{--hf-t:7vh;--hf-x:3vw;--hf-b:3vh}
  .works-grid,.seg-row{display:flex;gap:10px;margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
  .works-grid::-webkit-scrollbar,.seg-row::-webkit-scrollbar{display:none}
  .vid{flex:0 0 80%;scroll-snap-align:center}
  .works-grid>.vid-main,.works-grid>.vid-main.is-half{flex-basis:90%;aspect-ratio:16/9}
  .works-grid.vgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-inline:0;padding-inline:0;overflow:visible}
  .works-grid.vgrid>.vid,.works-grid.vgrid>.vid.is-half,.works-grid.vgrid>.vid.is-q,.works-grid.vgrid>.vid-main,.works-grid.vgrid>.vid-main.is-half{grid-column:1/-1;aspect-ratio:16/9}
  .pg-block{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:8px;aspect-ratio:.675}
  .pg-block.m2{grid-template-rows:repeat(2,minmax(0,1fr));aspect-ratio:1.35}
  .pg-block>.m-tile{grid-column:var(--mc)/span var(--mcs);grid-row:var(--mr)/span var(--mrs)}
  .pg{gap:8px}
  .vid-main .play{width:74px;height:74px;margin:-37px 0 0 -37px}
  .reel-ring{width:138px;height:138px;margin:-69px 0 0 -69px;font-size:10.5px}
  .seg-row{height:auto}
  .seg,.seg:hover,.seg:focus-visible{flex:0 0 78%;height:min(118vw,520px);scroll-snap-align:center}
  .gal{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(150px,46vw,250px)}
  .g:nth-child(n){grid-column:auto;grid-row:auto}
  .g:first-child,.g:last-child:nth-child(even){grid-column:span 2}
  .svc-list{grid-template-columns:1fr}
  .svc-list li:nth-child(2) .svc{border-top:0}
  .stats{gap:12px;padding-block:34px}
  .stat{flex-direction:column;align-items:flex-start;gap:6px}
  .stat b{font-size:clamp(2.4rem,11.5vw,3.5rem)}
  .stat>span{font-size:14px}
  .masonry{columns:2;column-gap:8px}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(120px,38vw,220px);gap:8px}
  .bento.is-flip .is-big{grid-column:span 2}
  .m-tile{--r:10px;border-radius:10px}
  .cinfo{grid-template-columns:1fr}
  .cinfo li+li{border-inline-start:0;border-top:1px solid var(--line)}
  .m-item{--r:10px;margin-bottom:8px;border-radius:10px}
  .f-type .f-lbl{flex-basis:100%;margin-bottom:2px}
  .foot-mark{font-size:34vw;bottom:-.1em}
  .hero-actions .btn{flex:1 1 auto}
  .edge-top{height:16vh}
  .edge-bottom{height:12vh}
}
@media (max-width:420px){
  .brand-name{font-size:17px}
}
@media (hover:none),(pointer:coarse){.fx-spot,.cursor{display:none}}

/* ===== Reduced motion / transparency ===== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .hero-title .w>span{transform:none}
  .hero-actions,.scroll-cue{opacity:1}
  .grain,.fx-spot,.cursor{display:none}
  .hero-slides.is-ready .hero-slide{animation:none}
}
@media (prefers-reduced-transparency:reduce){.edge{display:none}}

/* ===== Studio (v3): film titles + the preview bar shown only inside /studio/preview ===== */
.vid-title{position:absolute;z-index:1;inset-inline:16px;bottom:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:clamp(13px,.8rem + .2vw,15px);font-weight:500;line-height:1.45;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.vid-main .vid-title{font-size:clamp(15px,.85rem + .5vw,19px);inset-inline:24px;bottom:20px}
.studio-bar{position:fixed;z-index:90;bottom:18px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;max-width:calc(100vw - 110px);padding:9px 16px;border-radius:999px;background:rgba(18,18,17,.9);border:1px solid rgba(245,173,42,.45);color:#f3f1ec;font-size:13px;line-height:1.4;white-space:nowrap;box-shadow:0 12px 30px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.studio-bar span:nth-child(2){overflow:hidden;text-overflow:ellipsis}
.studio-bar-dot{flex:none;width:8px;height:8px;border-radius:50%;background:#F5AD2A;box-shadow:0 0 0 4px rgba(245,173,42,.18)}
.studio-bar a{flex:none;color:#F5AD2A;font-weight:600}