/* =============================================================
   ASPDC — Ahmed Salah Property Development & Contracting
   Shared stylesheet for every page.

   Theme model: DARK is the base palette (this is a dark-first design).
   The light palette is declared twice on purpose —
     1. @media (prefers-color-scheme: light) :root:not([data-theme="dark"])
        so an OS preference wins when the visitor has made no choice, and
     2. :root[data-theme="light"]
        so the on-page toggle wins in either direction.
   Every colour is a token; nothing is declared only inside a media block.

   RTL: layout uses logical properties (inline-start/end, margin-inline …)
   so the Arabic build mirrors without a second stylesheet.
   ============================================================= */

/* ── 1. Tokens ───────────────────────────────────────────── */
:root{
  --void:#000000;
  --panel:#080808;
  --panel-2:#0E0E0E;
  --panel-3:#161616;
  --text:#F5F5F5;
  --text-soft:#A2A2A2;
  --text-faint:#6C6C6C;
  --line:rgba(255,255,255,.11);
  --line-strong:rgba(255,255,255,.22);
  --grid:rgba(255,255,255,.045);
  --cyan:#00ADEF;
  --cyan-bright:#4FD1FF;
  --cyan-deep:#0086C4;
  --cyan-ghost:rgba(0,173,239,.09);
  --amber:#E9B44C;
  --amber-soft:#F4D391;
  --ink:#000000;
  --logo-filter:none;
  --cur-line:rgba(255,255,255,.94); --cur-halo:rgba(0,0,0,.42);
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 26px 64px -30px rgba(0,0,0,.95);
  --hero-veil:.40;
  --nav-h:84px;

  --f-display:"Syne","Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"Manrope","IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --f-ar-display:"Noto Kufi Arabic","IBM Plex Sans Arabic",sans-serif;
  --f-ar-body:"Tajawal","IBM Plex Sans Arabic",sans-serif;

  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --void:#F2F2F2; --panel:#FFFFFF; --panel-2:#FAFAFA; --panel-3:#EAEAEA;
    --text:#080808; --text-soft:#565656; --text-faint:#8A8A8A;
    --line:rgba(0,0,0,.12); --line-strong:rgba(0,0,0,.24); --grid:rgba(0,0,0,.045);
    --cyan:#0080BC; --cyan-bright:#009BE0; --cyan-deep:#005A85; --cyan-ghost:rgba(0,128,188,.08);
    --amber:#8A5E0C; --amber-soft:#A87B22;
    --ink:#FFFFFF;
    --logo-filter:invert(1);
    --cur-line:rgba(12,12,12,.88); --cur-halo:rgba(255,255,255,.72);
    --shadow:0 1px 2px rgba(0,0,0,.05), 0 24px 50px -30px rgba(0,0,0,.28);
    --hero-veil:.28;
  }
}
:root[data-theme="light"]{
    --void:#F2F2F2; --panel:#FFFFFF; --panel-2:#FAFAFA; --panel-3:#EAEAEA;
  --text:#080808; --text-soft:#565656; --text-faint:#8A8A8A;
  --line:rgba(0,0,0,.12); --line-strong:rgba(0,0,0,.24); --grid:rgba(0,0,0,.045);
  --cyan:#0080BC; --cyan-bright:#009BE0; --cyan-deep:#005A85; --cyan-ghost:rgba(0,128,188,.08);
  --amber:#8A5E0C; --amber-soft:#A87B22;
  --ink:#FFFFFF;
  --logo-filter:invert(1);
  --cur-line:rgba(12,12,12,.88); --cur-halo:rgba(255,255,255,.72);
  --shadow:0 1px 2px rgba(0,0,0,.05), 0 24px 50px -30px rgba(0,0,0,.28);
  --hero-veil:.28;
}

/* ── 2. Base ─────────────────────────────────────────────── */
*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 12px); -webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--void); color:var(--text);
  font-family:var(--f-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
html[lang="ar"] body{font-family:var(--f-ar-body);}
img,svg{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font:inherit;}
:focus-visible{outline:2px solid var(--cyan); outline-offset:3px;}
::selection{background:var(--cyan); color:#00161F;}

.wrap{max-width:1240px; margin-inline:auto; padding-inline:32px;}
.wrap-narrow{max-width:860px; margin-inline:auto; padding-inline:32px;}
@media (max-width:680px){ .wrap,.wrap-narrow{padding-inline:20px;} }
.skip{position:absolute; inset-inline-start:-9999px; top:0; z-index:200; background:var(--cyan); color:#00161F; padding:12px 20px;}
.skip:focus{inset-inline-start:0;}

/* ── 3. Typography ───────────────────────────────────────── */
h1,h2,h3,h4{margin:0; color:var(--text); text-wrap:balance;}
.f-display{
  font-family:var(--f-display);
  font-weight:800; letter-spacing:-.005em; line-height:1.02; text-transform:uppercase;
  overflow-wrap:break-word;
}
html[lang="ar"] .f-display{font-family:var(--f-ar-display); font-weight:700; letter-spacing:0;}
.h-hero{font-size:clamp(38px,6.2vw,76px);}
.h-xl{font-size:clamp(30px,4.4vw,58px);}
.h-lg{font-size:clamp(30px,4.3vw,54px);}
.h-md{font-size:clamp(22px,2.4vw,32px);}
/* Below ~560px the clamp minimums stop scaling and a wide display face runs
   past the gutter, so the small end is driven by vw instead. */
@media (max-width:560px){
  .wrap,.wrap-narrow{padding-inline:22px;}
  .h-hero{font-size:clamp(26px,8.2vw,44px);}
  .h-xl{font-size:clamp(24px,7.4vw,40px);}
  .h-lg{font-size:clamp(24px,7.2vw,38px);}
  .h-md{font-size:clamp(19px,5.4vw,26px);}
  .hero-h1{max-width:none;}
}
p{margin:0; color:var(--text-soft); line-height:1.68;}
.lede{font-size:clamp(16.5px,1.3vw,19.5px); line-height:1.62;}
.mono{font-family:var(--f-mono); font-variant-numeric:tabular-nums;}
html[lang="ar"] .mono{font-family:"IBM Plex Mono",monospace;}

.sheet-ref{
  font-family:var(--f-mono); font-size:15px; font-weight:600;
  letter-spacing:.20em; text-transform:uppercase; color:var(--cyan);
  display:flex; align-items:center; gap:14px; margin-bottom:22px;
}
html[lang="ar"] .sheet-ref{font-family:var(--f-ar-body); letter-spacing:0; font-size:17px; font-weight:700;}
.sheet-ref::after{
  content:""; height:1px; flex:0 0 64px; background:currentColor; opacity:.55;
  transform:scaleX(1); transform-origin:inline-start; transition:transform .8s var(--ease-out) .15s;
}
html.js .sheet-ref::after{transform:scaleX(0);}
html.js .in .sheet-ref::after,html.js .sheet-ref.in::after{transform:scaleX(1);}
.sheet-ref.amber{color:var(--amber);}

/* ── 4. Buttons ──────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--f-mono); font-size:13px; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase;
  padding:14px 26px; border:1px solid transparent; border-radius:0;
  cursor:pointer; position:relative; overflow:hidden; isolation:isolate;
  transition:color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
html[lang="ar"] .btn{font-family:var(--f-ar-body); letter-spacing:0; font-size:14.5px;}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  transform:scaleY(0); transform-origin:bottom; transition:transform .32s var(--ease);
}
.btn:hover::before{transform:scaleY(1);}
.btn:active{transform:translateY(1px);}
.btn-solid{background:var(--cyan); color:#00161F; font-weight:600;}
.btn-solid::before{background:var(--cyan-bright);}
.btn-line{border-color:var(--line-strong); color:var(--text);}
.btn-line::before{background:var(--cyan-ghost);}
.btn-line:hover{border-color:var(--cyan); color:var(--cyan);}
.btn-amber{background:var(--amber); color:#1C1305; font-weight:600;}
.btn-amber::before{background:var(--amber-soft);}
.btn-onphoto{border-color:rgba(255,255,255,.32); color:#fff;}
.btn-onphoto::before{background:rgba(255,255,255,.13);}
.btn-onphoto:hover{border-color:#fff; color:#fff;}

/* ── 5. Navigation ───────────────────────────────────────── */
.progress{position:fixed; inset-block-start:0; inset-inline-start:0; height:2px; width:0; background:var(--cyan); z-index:95; transition:width .1s linear;}
.nav{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:90;
  /* A blurred backdrop has to copy, blur and re-composite everything behind
     this bar on every frame of every scroll. On a discrete GPU that is free;
     on integrated graphics it is the most expensive thing on the page. Over a
     near-black site a mostly-opaque bar is visually all but identical.
     translateZ keeps .nav a containing block for the fixed drawer below,
     which the backdrop-filter used to provide. */
  background:color-mix(in srgb, var(--void) 92%, transparent);
  transform:translateZ(0);
  border-bottom:1px solid transparent;
  transition:background .35s var(--ease), border-color .35s var(--ease);
}
@supports not (background: color-mix(in srgb, red 50%, blue)){ .nav{background:var(--void);} }
.nav.stuck{background:var(--void); border-bottom-color:var(--line);}
/* .nav is a containing block for its fixed children (see transform above), so
   the mobile drawer is sized with an explicit height, never inset-block-end. */
.nav-in{max-width:1240px; margin-inline:auto; padding-inline:32px; height:var(--nav-h); display:flex; align-items:center; gap:26px; transition:height .35s var(--ease);}
.nav.stuck .nav-in{height:68px;}
@media (max-width:680px){ .nav-in{padding-inline:20px;} }
.nav-logo{display:flex; align-items:center; gap:14px; flex:none;}
.nav-logo img{height:36px; width:auto; filter:var(--logo-filter); transition:height .35s var(--ease);}
.nav.stuck .nav-logo img{height:30px;}
@media (max-width:680px){ .nav-logo img,.nav.stuck .nav-logo img{height:28px;} }
.nav-links{display:flex; align-items:center; gap:24px; margin-inline-start:auto;}
.nav-links > a{position:relative; font-size:14px; color:var(--text-soft); white-space:nowrap; padding-block:6px; transition:color .2s;}
.nav-links > a::after{
  content:""; position:absolute; inset-block-end:0; inset-inline-start:0; height:1.5px; width:100%;
  background:var(--cyan); transform:scaleX(0); transform-origin:inline-end; transition:transform .3s var(--ease);
}
.nav-links > a:hover{color:var(--text);}
.nav-links > a:hover::after{transform:scaleX(1); transform-origin:inline-start;}
.nav-links > a[aria-current="page"]{color:var(--text);}
.nav-links > a[aria-current="page"]::after{transform:scaleX(1);}
.nav-tools{display:flex; align-items:center; gap:9px; flex:none;}
.seg{display:flex; border:1px solid var(--line-strong);}
.seg button{
  font-family:var(--f-mono); font-size:11.5px; font-weight:500; letter-spacing:.06em;
  background:none; border:0; color:var(--text-faint); padding:8px 11px; cursor:pointer; transition:color .2s, background .2s;
}
.seg button[aria-pressed="true"]{background:var(--cyan); color:#00161F; font-weight:600;}
.seg button:hover:not([aria-pressed="true"]){color:var(--text);}
.icon-btn{
  width:38px; height:38px; display:grid; place-items:center; cursor:pointer;
  background:none; border:1px solid var(--line-strong); color:var(--text-soft);
  transition:color .2s, border-color .2s;
}
.icon-btn:hover{color:var(--cyan); border-color:var(--cyan);}
.burger{display:none;}
.nav-cta{display:inline-flex;}
@media (max-width:1300px){ .nav-cta{display:none;} }
@media (max-width:1020px){
  .nav-links{
    position:fixed; inset-block-start:var(--nav-h); inset-inline:0; height:calc(100vh - var(--nav-h));
    background:var(--void); border-top:1px solid var(--line);
    flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0;
    padding:26px 32px; overflow-y:auto; margin:0;
    transform:translateX(100%); transition:transform .38s var(--ease);
  }
  html[dir="rtl"] .nav-links{transform:translateX(-100%);}
  /* Both rules must out-specify html[dir="rtl"] .nav-links (0,2,1), or the
     closed transform wins in Arabic and the drawer opens off-screen. */
  html .nav-links.open, html[dir="rtl"] .nav-links.open{transform:translateX(0);}
  .nav-links > a{padding-block:17px; border-bottom:1px solid var(--line); font-size:17px; color:var(--text);}
  .nav-links > a::after{display:none;}
  .burger{display:grid;}
  .nav-tools{margin-inline-start:auto;}
}

/* ── 6. Hero ─────────────────────────────────────────────── */
.hero{position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center; background:#000; overflow:hidden;}
/* The grayscale/contrast/brightness treatment is baked into site-works.jpg
   rather than applied here. As a CSS filter the browser re-ran it over a
   full-screen image on every composited frame, which on its own dropped the
   home page to 30fps. Same picture, no per-frame cost. */
.hero-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:var(--hero-veil);}
.hero-canvas{position:absolute; inset:0; width:100%; height:100%;}
.hero-veil{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 92% at 50% 44%, transparent 0%, rgba(0,0,0,.62) 58%, rgba(0,0,0,.96) 100%),
    linear-gradient(180deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.26) 26%, rgba(0,0,0,.55) 66%, rgba(0,0,0,1) 100%);
}
.hero-body{position:relative; z-index:3; padding-block:calc(var(--nav-h) + 52px) 52px; text-align:center;
  /* .hero is a column flex container, and Chrome floors a column flex item at
     its min-content width — which with the real display face is wider than a
     phone, so the whole block was clipped. */
  min-width:0;}
.hero > *{min-width:0;}
.hero-body > *{min-width:0;}
.hero-kicker{
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--cyan);
  display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin-bottom:30px;
}
html[lang="ar"] .hero-kicker{font-family:var(--f-ar-body); letter-spacing:0; font-size:13px;}
.hero-kicker i{width:5px; height:5px; background:var(--cyan); transform:rotate(45deg); flex:none;}

.hero-h1{color:#fff; max-width:16ch; margin-inline:auto;}

/* the five disciplines, standing where the oversized wordmark used to */
.hero-disc{
  list-style:none; margin:30px auto 0; padding:0; max-width:960px;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:0;
  border-block:1px solid rgba(255,255,255,.16);
}
.hero-disc li{
  position:relative; padding:13px 22px;
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.17em; text-transform:uppercase;
  color:rgba(255,255,255,.72); white-space:nowrap;
}
html[lang="ar"] .hero-disc li{font-family:var(--f-ar-body); letter-spacing:0; font-size:13.5px;}
.hero-disc li + li::before{
  content:""; position:absolute; inset-inline-start:0; inset-block-start:50%;
  width:4px; height:4px; margin-block-start:-2px; background:var(--cyan); transform:rotate(45deg);
}
@media (max-width:620px){
  .hero-disc{border:0; gap:6px;}
  .hero-disc li{padding:5px 12px; border:1px solid rgba(255,255,255,.18); font-size:10.5px; letter-spacing:.1em;}
  .hero-disc li + li::before{display:none;}
}
.hero-h1 em{font-style:normal; color:var(--cyan);}
.hero-sub{margin:20px auto 0; max-width:58ch; color:rgba(255,255,255,.74); font-size:clamp(15px,1.25vw,17.5px);}
.hero-acts{display:flex; gap:14px; justify-content:center; margin-top:36px; flex-wrap:wrap;}
.hero-strip{position:relative; z-index:3; border-top:1px solid rgba(255,255,255,.14); background:rgba(0,0,0,.55);}
.hero-strip .wrap{display:grid; grid-template-columns:repeat(4,1fr);}
.hstat{padding:22px 8px; border-inline-end:1px solid rgba(255,255,255,.10); text-align:center;}
.hstat:last-child{border-inline-end:0;}
.hstat b{display:block; font-family:var(--f-mono); font-size:clamp(20px,2.4vw,30px); color:#fff; font-weight:500;}
.hstat span{display:block; margin-top:5px; font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:rgba(255,255,255,.52); line-height:1.4;}
html[lang="ar"] .hstat span{letter-spacing:0; font-size:12px;}
@media (max-width:720px){
  .hero-strip .wrap{grid-template-columns:repeat(2,1fr); padding-inline:0;}
  .hstat{border-block-end:1px solid rgba(255,255,255,.10);}
  .hstat:nth-child(2n){border-inline-end:0;}
  .hstat:nth-child(n+3){border-block-end:0;}
}

/* inner-page banner */
.phero{position:relative; padding-block:calc(var(--nav-h) + 74px) 66px; background:var(--panel); overflow:hidden; border-bottom:1px solid var(--line);}
.phero::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 66% 100% at 50% 0%,#000,transparent 75%);
  mask-image:radial-gradient(ellipse 66% 100% at 50% 0%,#000,transparent 75%);
}
.phero .wrap{position:relative; z-index:2;}
.phero p{max-width:60ch; margin-top:18px;}
.crumb{font-family:var(--f-mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); margin-bottom:16px;}
html[lang="ar"] .crumb{font-family:var(--f-ar-body); letter-spacing:0; font-size:13px;}
.crumb a{color:var(--cyan);}

/* ── 7. Sections ─────────────────────────────────────────── */
/* overflow:hidden clips the drifting aurora in .sec-grid::after, which is
   translated and scaled past the section edge and would otherwise widen
   the document by a couple of pixels. */
.sec{position:relative; overflow:hidden; padding-block:clamp(68px,7.5vw,120px);}
.sec-alt{background:var(--panel);}
.sec-grid::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000,transparent 78%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000,transparent 78%);
}
.sec > .wrap{position:relative; z-index:2;}
.sec-head{display:grid; grid-template-columns:1fr auto; gap:44px; align-items:end; margin-bottom:clamp(38px,4.6vw,64px);}
/* Grid and flex items are floored at their min-content width, so one long
   heading word can push the whole track wider than the screen — the same
   defect that clipped the hero. Release the floor everywhere a heading or
   long copy sits inside a track. */
.sec-head > *, .split > *, .tri > *, .ct > *, .zw-top > *, .zw-id > *{min-width:0;}
.sec-head p{max-width:44ch; text-align:end;}
@media (max-width:880px){ .sec-head{grid-template-columns:1fr; gap:18px;} .sec-head p{text-align:start; max-width:60ch;} }

/* ── 8. Components ───────────────────────────────────────── */
.split{display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(34px,5vw,74px); align-items:start;}
@media (max-width:940px){ .split{grid-template-columns:1fr;} }
.prose p + p{margin-top:17px;}
.quote{margin-top:32px; padding-inline-start:22px; border-inline-start:2px solid var(--cyan); font-size:clamp(17px,1.6vw,21px); line-height:1.55; color:var(--text);}

.shot{position:relative; overflow:hidden;}
.shot img{width:100%; height:auto; border:1px solid var(--line); transition:transform 1.1s var(--ease-out);}
.shot .tick{
  position:absolute; inset-block-end:0; inset-inline-start:0; background:var(--cyan); color:#00161F;
  padding:9px 15px; font-family:var(--f-mono); font-size:10.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
}
html[lang="ar"] .shot .tick{font-family:var(--f-ar-body); letter-spacing:0; font-size:12px;}

.tri{display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line);}
.tri > div{padding:30px 28px; border-inline-end:1px solid var(--line);}
.tri > div:last-child{border-inline-end:0;}
.tri .mono{font-size:11.5px; letter-spacing:.12em; color:var(--cyan); text-transform:uppercase;}
.tri h4{margin-top:13px; font-size:18px; font-weight:600;}
.tri p{margin-top:9px; font-size:14.6px;}
@media (max-width:880px){
  .tri{grid-template-columns:1fr;}
  .tri > div{border-inline-end:0; border-block-end:1px solid var(--line);}
  .tri > div:last-child{border-block-end:0;}
}

.caps{display:grid; grid-template-columns:repeat(2,1fr); border:1px solid var(--line); background:var(--line); gap:1px;}
@media (max-width:820px){ .caps{grid-template-columns:1fr;} }
.cap{background:var(--void); padding:clamp(28px,3.4vw,42px); position:relative; overflow:hidden; transition:background .3s;}
.sec-alt .cap{background:var(--panel);}
.cap:hover{background:var(--panel-2);}
.cap::after{content:""; position:absolute; inset-block-start:0; inset-inline-start:0; width:0; height:2px; background:var(--cyan); transition:width .45s var(--ease);}
.cap:hover::after{width:100%;}
.cap-n{font-family:var(--f-mono); font-size:12px; color:var(--cyan); letter-spacing:.1em;}
.cap h3{margin-top:14px; font-size:clamp(20px,2vw,26px); font-weight:600;}
.cap p{margin-top:12px; font-size:15px; max-width:46ch;}

.chips{display:flex; flex-wrap:wrap; gap:7px; margin-top:20px;}
.chip{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; padding:6px 11px; border:1px solid var(--line-strong); color:var(--text-faint);}
html[lang="ar"] .chip{font-family:var(--f-ar-body); letter-spacing:0; font-size:12px;}

.flow{display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--line-strong);}
@media (max-width:1000px){ .flow{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .flow{grid-template-columns:1fr;} }
.step{padding:28px 24px 32px; border-inline-end:1px solid var(--line); position:relative;}
.step:last-child{border-inline-end:0;}
@media (max-width:1000px){ .step{border-block-end:1px solid var(--line);} }
.step::before{content:""; position:absolute; inset-block-start:-5px; inset-inline-start:0; width:9px; height:9px; background:var(--void); border:1.5px solid var(--cyan); transform:rotate(45deg);}
.sec-alt .step::before{background:var(--panel);}
.step .mono{font-size:11.5px; letter-spacing:.12em; color:var(--text-faint);}
.step h4{margin-top:15px; font-size:16.5px; font-weight:600; line-height:1.3;}
.step p{margin-top:9px; font-size:14px;}

/* project grid */
.filters{display:flex; gap:9px; flex-wrap:wrap; margin-bottom:26px;}
.filt{font-family:var(--f-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; padding:9px 16px; border:1px solid var(--line-strong); background:none; color:var(--text-faint); cursor:pointer; transition:color .2s, border-color .2s, background .2s;}
html[lang="ar"] .filt{font-family:var(--f-ar-body); letter-spacing:0; font-size:13.5px;}
.filt:hover{color:var(--text); border-color:var(--text-faint);}
.filt[aria-pressed="true"]{background:var(--cyan); border-color:var(--cyan); color:#00161F; font-weight:600;}
.grid-p{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
@media (max-width:900px){ .grid-p{grid-template-columns:repeat(2,1fr); gap:10px;} }
@media (max-width:520px){ .grid-p{grid-template-columns:1fr;} }
.pc{position:relative; overflow:hidden; border:1px solid var(--line); background:var(--panel-3); aspect-ratio:4/3; margin:0;}
.pc img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out);}
.pc:hover img{transform:scale(1.06);}
.pc-fade{position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.30) 44%,transparent 74%);}
.pc-txt{position:absolute; inset-block-end:0; inset-inline:0; padding:18px; color:#fff;}
.pc-txt .mono{display:block; font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--cyan-bright);}
html[lang="ar"] .pc-txt .mono{font-family:var(--f-ar-body); letter-spacing:0; font-size:12px;}
.pc-txt b{display:block; margin-top:5px; font-size:16px; font-weight:600; line-height:1.25;}
.pc-brk::before,.pc-brk::after{content:""; position:absolute; width:16px; height:16px; border:1.5px solid var(--cyan); opacity:0; transition:opacity .3s, transform .3s; z-index:2;}
.pc-brk::before{inset-block-start:11px; inset-inline-start:11px; border-inline-end:0; border-block-end:0; transform:translate(6px,6px);}
.pc-brk::after{inset-block-end:11px; inset-inline-end:11px; border-inline-start:0; border-block-start:0; transform:translate(-6px,-6px);}
.pc:hover .pc-brk::before,.pc:hover .pc-brk::after{opacity:.95; transform:translate(0,0);}
.pc[hidden]{display:none;}

/* table */
.tbl-scroll{overflow-x:auto; border-top:1px solid var(--line-strong);}

/* note under the project gallery — the photographs are a sample, not a register */
.samples{
  margin-top:clamp(34px,4vw,52px); max-width:70ch;
  padding-inline-start:18px; border-inline-start:2px solid var(--cyan);
  font-size:15px; color:var(--text-soft);
}
table{width:100%; border-collapse:collapse; min-width:520px;}
th{font-family:var(--f-mono); font-size:10.5px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); text-align:start; padding:13px 12px; border-bottom:1px solid var(--line);}
html[lang="ar"] th{font-family:var(--f-ar-body); letter-spacing:0; font-size:12.5px;}
td{padding:13px 12px; border-bottom:1px solid var(--line); font-size:14.6px; color:var(--text);}
td.n{font-family:var(--f-mono); color:var(--cyan); width:60px; font-size:13px;}
td.loc{color:var(--text-soft); text-align:end; white-space:nowrap;}
tbody tr{transition:background .18s;}
tbody tr:hover{background:var(--cyan-ghost);}

/* marquee of specialisms */
.marq{overflow:hidden; border-block:1px solid var(--line); padding-block:16px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marq-track{display:flex; gap:44px; width:max-content; animation:marq 34s linear infinite;}
.marq:hover .marq-track{animation-play-state:paused;}
.marq span{font-family:var(--f-mono); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint); display:flex; align-items:center; gap:44px; white-space:nowrap;}
html[lang="ar"] .marq span{font-family:var(--f-ar-body); letter-spacing:0; font-size:14px;}
.marq span::after{content:""; width:5px; height:5px; background:var(--cyan); transform:rotate(45deg); flex:none;}
@keyframes marq{from{transform:translateX(0);} to{transform:translateX(-50%);}}
html[dir="rtl"] .marq-track{animation-direction:reverse;}

/* team */
.mems{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
@media (max-width:1020px){ .mems{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .mems{grid-template-columns:1fr; gap:14px;} }
.mem{
  border:1px solid var(--line); background:var(--panel); overflow:hidden;
  transition:border-color .3s, transform .3s var(--ease);
}
.sec-alt .mem{background:var(--void);}
.mem:hover{border-color:var(--cyan); transform:translateY(-3px);}
.mem-shot{position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--panel-3);}
.mem-shot img{width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease-out);}
.mem:hover .mem-shot img{transform:scale(1.04);}
/* a hairline in the brand colour ties four different backdrops together */
.mem-shot::after{content:""; position:absolute; inset-block-end:0; inset-inline:0; height:2px; background:var(--cyan); opacity:0; transition:opacity .3s;}
.mem:hover .mem-shot::after{opacity:1;}
.mem-copy{padding:18px 20px 22px;}
.mem-copy h3{font-size:clamp(16px,1.5vw,19px); font-weight:600; letter-spacing:.01em; color:var(--text);}
.mem-copy p{margin-top:6px; font-family:var(--f-mono); font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--cyan); line-height:1.55;}
html[lang="ar"] .mem-copy p{font-family:var(--f-ar-body); letter-spacing:0; font-size:13px; text-transform:none;}
html[lang="ar"] .mem-copy h3{font-family:var(--f-ar-body);}

/* ZWSOFT product cards */
.zw-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
@media (max-width:820px){ .zw-grid{grid-template-columns:1fr;} }
.zw{
  border:1px solid var(--line); background:var(--panel); padding:clamp(24px,2.8vw,34px);
  position:relative; overflow:hidden; transition:border-color .3s, background .3s, transform .3s var(--ease);
}
.sec-alt .zw{background:var(--void);}
.zw:hover{border-color:var(--cyan); transform:translateY(-3px);}
.zw::after{content:""; position:absolute; inset-block-start:0; inset-inline-start:0; width:0; height:2px; background:var(--cyan); transition:width .45s var(--ease);}
.zw:hover::after{width:100%;}
.zw-top{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:14px;}
.zw-top h3{font-size:clamp(18px,1.9vw,24px); font-weight:600; letter-spacing:.02em; color:var(--text); line-height:1.15;}
html[lang="ar"] .zw-top h3{font-family:var(--f-ar-body);}
.zw-badge{
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--cyan); border:1px solid var(--cyan); padding:4px 9px; white-space:nowrap;
}
html[lang="ar"] .zw-badge{font-family:var(--f-ar-body); letter-spacing:0; font-size:11px;}
.zw p{font-size:14.8px; max-width:52ch;}

/* group card */
.grp{border:1px solid var(--line); display:grid; grid-template-columns:auto 1fr auto; gap:clamp(24px,3.4vw,44px); align-items:center; padding:clamp(26px,3.4vw,42px); transition:border-color .3s, background .3s;}
.grp:hover{border-color:var(--cyan); background:var(--cyan-ghost);}
@media (max-width:900px){ .grp{grid-template-columns:1fr;} }
.grp-mark{background:#0A0A0A; border:1px solid var(--line); padding:24px 30px; display:grid; place-items:center;}
.grp-mark img{height:52px; width:auto;}
.grp h3{font-size:clamp(19px,2vw,24px); font-weight:600; display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.grp h3 .ext{font-size:14px; color:var(--cyan);}
.grp p{margin-top:11px; max-width:58ch; font-size:15px;}
.grp-nums{display:flex; gap:32px;}
.grp-nums b{display:block; font-family:var(--f-mono); font-size:25px; color:var(--cyan); font-weight:500;}
.grp-nums span{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint);}
html[lang="ar"] .grp-nums span{letter-spacing:0; font-size:12.5px;}

/* contact */
.ct{display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,4.5vw,64px);}
@media (max-width:900px){ .ct{grid-template-columns:1fr;} }
.ct-rows{margin-top:32px; border:1px solid var(--line);}
.ct-row{display:flex; gap:17px; padding:20px 22px; border-bottom:1px solid var(--line);}
.ct-row:last-child{border-bottom:0;}
.ct-row svg{flex:none; margin-top:3px; color:var(--cyan);}
.ct-row b{display:block; font-family:var(--f-mono); font-size:10px; font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:var(--text-faint); margin-bottom:6px;}
html[lang="ar"] .ct-row b{font-family:var(--f-ar-body); letter-spacing:0; font-size:12px;}
.ct-row a,.ct-row span{color:var(--text); font-size:15.4px; line-height:1.55;}
.ct-row a:hover{color:var(--cyan);}
.ct-card{border:1px solid var(--line); background:var(--panel-2); padding:clamp(28px,3.4vw,42px); display:flex; flex-direction:column;}
.sec-alt .ct-card{background:var(--void);}
.ct-card p{margin-top:13px;}
.brief{list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:11px;}
.brief li{position:relative; padding-inline-start:20px; font-size:14.6px; color:var(--text-soft); line-height:1.55;}
.brief li::before{content:""; position:absolute; inset-block-start:.62em; inset-inline-start:0; width:6px; height:6px; border:1.4px solid var(--cyan); transform:rotate(45deg);}
.ct-acts{display:flex; flex-direction:column; gap:11px; margin-top:auto; padding-top:26px;}

/* ── 9. Islamic Lighting Division ────────────────────────── */
.lite{position:relative; background:#0A0805; color:#F5EEE0; overflow:hidden;}
.lite::after{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(700px 500px at 78% 4%,rgba(233,180,76,.22),transparent 66%);}
.lite > *{position:relative; z-index:2;}
.lite h2,.lite h3,.lite h4{color:#FBF4E6;}
.lite p{color:rgba(245,238,224,.74);}
.lite .lede{color:rgba(245,238,224,.90);}
.lite .chip{border-color:rgba(233,180,76,.32); color:rgba(245,238,224,.78);}
/* Two costs were removed here. The drift used to animate background-position,
   which repaints every frame; it is now a transform on a child, which the
   compositor handles alone. And the soft edge used to be a mask-image, which
   is expensive to composite over a tall section — it held this page at 30fps
   even with the animation stopped. Since .lite is always the same solid
   colour, painting that colour back over the pattern in a radial gradient
   gives an identical fade for a fraction of the cost. */
.lite-screen{position:absolute; inset:0; z-index:1; overflow:hidden;}
.lite-screen::before{
  content:""; position:absolute; inset:-340px; opacity:.16;
  background-image:url("../img/lighting/mashrabiya.svg");
  background-size:340px 340px; background-repeat:repeat;
  will-change:transform;
  animation:screendrift 90s linear infinite;
}
.lite-screen::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 85% 80% at 50% 34%,
    rgba(10,8,5,0) 0%, rgba(10,8,5,.55) 52%, rgba(10,8,5,1) 78%);
}
@keyframes screendrift{from{transform:translate3d(0,0,0);} to{transform:translate3d(340px,340px,0);}}
.lite-head{max-width:64ch; margin-inline:auto; text-align:center;}
/* the division's own gold lockup, standing in for a typeset heading — it is
   cut out on transparency, so it sits on the section's ground with no plate */
.lite-mark{margin:24px 0 26px; line-height:0;}
.lite-mark img{width:auto; height:clamp(190px,23vw,300px); max-width:100%; object-fit:contain; margin-inline:auto;}
@media (max-width:560px){ .lite-mark img{height:min(180px,44vw);} }
.lite-head .hero-acts{justify-content:center;}
.lite .filters{margin-top:34px;}
.lite-head .sheet-ref::after{display:none;}

/* fixture catalogue */
.lamps{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media (max-width:940px){ .lamps{grid-template-columns:repeat(2,1fr); gap:12px;} }
@media (max-width:560px){ .lamps{grid-template-columns:1fr;} }
.lamp{
  position:relative; border:1px solid rgba(233,180,76,.24); background:rgba(255,255,255,.03);
  overflow:hidden; display:flex; flex-direction:column;
  transition:border-color .35s, transform .4s var(--ease), box-shadow .4s var(--ease);
}
.lamp:hover{border-color:rgba(233,180,76,.62); transform:translateY(-5px); box-shadow:0 26px 60px -30px rgba(0,0,0,.9);}
.lamp[hidden]{display:none;}
.lamp-shot{position:relative; aspect-ratio:3/4; overflow:hidden; background:#120E07;}
.lamp-shot img{width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease-out);}
.lamp:hover .lamp-shot img{transform:scale(1.06);}
.lamp-shot::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg,rgba(10,8,5,.90) 0%,rgba(10,8,5,.10) 42%,transparent 70%);
}
.lamp-code{
  position:absolute; inset-block-start:12px; inset-inline-start:12px; z-index:2;
  background:rgba(10,8,5,.82); border:1px solid rgba(233,180,76,.5); color:var(--amber-soft);
  font-size:11px; letter-spacing:.1em; padding:5px 10px;
}
.lamp-body{position:relative; z-index:2; padding:18px 20px 20px; margin-top:-46px;}
.lamp-body h3{font-size:17px; font-weight:600; line-height:1.25;}
.lamp-specs{margin:16px 0 0; padding:0; display:grid; gap:0;}
.spec{display:flex; justify-content:space-between; gap:14px; padding-block:8px; border-bottom:1px solid rgba(233,180,76,.16);}
.spec:last-child{border-bottom:0;}
.spec dt{
  margin:0; font-family:var(--f-mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase;
  color:rgba(233,180,76,.78); flex:none; padding-top:2px;
}
html[lang="ar"] .spec dt{font-family:var(--f-ar-body); letter-spacing:0; font-size:12px;}
.spec dd{margin:0; font-size:13.6px; color:rgba(245,238,224,.9); text-align:end; line-height:1.4;}
.lamp-cta{
  display:inline-flex; align-items:center; gap:7px; margin-top:16px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--amber-soft); border-bottom:1px solid rgba(233,180,76,.4); padding-bottom:3px;
  transition:color .25s, border-color .25s;
}
html[lang="ar"] .lamp-cta{font-family:var(--f-ar-body); letter-spacing:0; font-size:13px;}
.lamp-cta::after{content:"\2197";}
.lamp-cta:hover{color:#FBF4E6; border-color:#FBF4E6;}
.lite .filt{border-color:rgba(233,180,76,.3); color:rgba(245,238,224,.7);}
.lite .filt:hover{color:#FBF4E6; border-color:rgba(233,180,76,.6);}
.lite .filt[aria-pressed="true"]{background:var(--amber); border-color:var(--amber); color:#1C1305;}

.ig-note{margin-top:30px; max-width:78ch; margin-inline:auto; border:1px solid rgba(233,180,76,.28); background:rgba(255,255,255,.03); padding:22px 24px; display:flex; gap:16px; align-items:flex-start;}
.ig-note svg{flex:none; color:var(--amber-soft); margin-top:2px;}
.ig-note p{font-size:14.4px;}
.ig-note a{color:var(--amber-soft); text-decoration:underline; text-underline-offset:3px;}

/* ── 10. Footer ──────────────────────────────────────────── */
footer{background:var(--panel); border-top:1px solid var(--line); padding-block:46px;}
.f-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:32px; border-bottom:1px solid var(--line);}
@media (max-width:860px){ .f-grid{grid-template-columns:1fr 1fr; gap:30px;} }
@media (max-width:520px){ .f-grid{grid-template-columns:1fr;} }
/* width:auto is required — without it max-width:100% squeezes the width to the
   grid column while height stays fixed, which stretches the wordmark. */
.f-brand img{height:32px; width:auto; max-width:none; filter:var(--logo-filter);}
.f-brand p{margin-top:16px; font-size:14.2px; max-width:34ch;}
.f-col h5{margin:0 0 14px; font-family:var(--f-mono); font-size:10.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint);}
html[lang="ar"] .f-col h5{font-family:var(--f-ar-body); letter-spacing:0; font-size:12.5px;}
.f-col a,.f-col span{display:block; font-size:14px; color:var(--text-soft); margin-bottom:9px; transition:color .2s;}
.f-col a:hover{color:var(--cyan);}
.f-bot{margin-top:22px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-family:var(--f-mono); font-size:11.5px; color:var(--text-faint);}
html[lang="ar"] .f-bot{font-family:"IBM Plex Sans Arabic",sans-serif; font-size:13px;}

/* ── 11. Motion ──────────────────────────────────────────── */
/* page enters */
html.js body{opacity:0; transition:opacity .45s var(--ease);
  /* safety net: if main.js never runs, the page still fades itself in */
  animation:page-in .45s var(--ease) 1.2s forwards;}
html.js body.loaded{opacity:1; animation:none;}
@keyframes page-in{to{opacity:1;}}

/* orchestrated hero sequence — each child declares its own --d */
html.js .seq > *{opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);}
html.js .loaded .seq > *{opacity:1; transform:none; transition-delay:var(--d,0s);}

/* scroll reveals */
html.js .rv{opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);}
html.js .rv.in{opacity:1; transform:none;}
html.js .rv-stagger > *{opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);}
html.js .rv-stagger.in > *{opacity:1; transform:none;}
html.js .rv-stagger.in > *:nth-child(1){transition-delay:.00s;}
html.js .rv-stagger.in > *:nth-child(2){transition-delay:.08s;}
html.js .rv-stagger.in > *:nth-child(3){transition-delay:.16s;}
html.js .rv-stagger.in > *:nth-child(4){transition-delay:.24s;}
html.js .rv-stagger.in > *:nth-child(5){transition-delay:.32s;}
html.js .rv-stagger.in > *:nth-child(6){transition-delay:.40s;}
html.js .rv-stagger.in > *:nth-child(7){transition-delay:.48s;}
html.js .rv-stagger.in > *:nth-child(8){transition-delay:.56s;}
html.js .rv-stagger.in > *:nth-child(9){transition-delay:.64s;}

/* image clip reveal */
html.js .rv-clip img{clip-path:inset(0 0 100% 0); transition:clip-path 1.05s var(--ease-out);}
html.js .rv-clip.in img{clip-path:inset(0 0 0 0);}

/* ── reduced-quality mode ─────────────────────────────────────
   Added by main.js when it measures that this machine cannot actually hold
   60fps — typically integrated graphics, which have to share memory bandwidth
   with the CPU and cannot composite this many full-screen translucent layers.
   Nothing structural changes: the layout, the type and every photograph stay
   exactly as they are. What goes is decoration that costs fill-rate — the
   film grain, the cursor spotlight, the drifting grid and aurora washes, and
   the animated site plan. On a machine that can afford them, nothing changes. */
html.perf-lite .grain,
html.perf-lite .spot,
html.perf-lite .lite-screen{display:none !important;}
html.perf-lite .sec-grid::before,
html.perf-lite .sec-grid::after,
html.perf-lite .phero::before,
html.perf-lite .lite::after{display:none !important;}
/* one flat wash instead of two stacked full-screen gradients */
html.perf-lite .hero-veil{
  background:linear-gradient(180deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.45) 34%, rgba(0,0,0,.88) 100%);
}
html.perf-lite .hero-canvas{opacity:.55;}
html.perf-lite .pc, html.perf-lite .lamp{transform-style:flat;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
  body,.seq > *,.rv,.rv-stagger > *{opacity:1 !important; transform:none !important;}
  .rv-clip img{clip-path:none !important;}
  .marq-track{animation:none;}
}

/* =============================================================
   12. Motion & atmosphere layer
   Everything below is decorative. All of it is disabled by the
   prefers-reduced-motion block at the end of this section.
   ============================================================= */

/* ── page transition wipe ─────────────────────────────────── */
/* The sheet is a ::before so it can scale without squashing the mark, which
   sits unscaled on top and turns the wipe into a real loading state: it stays
   on screen for as long as the next page actually takes to arrive. */
.wipe{
  /* Kept out of the compositor until a navigation actually starts — otherwise
     this is a full-viewport layer sitting idle on every page. main.js adds
     .armed on the click that begins a transition. */
  display:none;
}
.wipe.armed{
  position:fixed; inset:0; z-index:120; pointer-events:none;
  display:grid; place-items:center;
}
.wipe::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg,#050505 0%,#06293B 52%,#000 100%);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .3s var(--ease);
}
.wipe.out::before{transform:scaleY(1);}

.wipe-mark{
  position:relative; z-index:1; width:132px; height:132px;
  display:grid; place-items:center;
  opacity:0; transform:scale(.84);
  transition:opacity .24s var(--ease) .13s, transform .4s var(--ease-out) .13s;
}
.wipe.out .wipe-mark{opacity:1; transform:scale(1);}
.wipe-mark img{width:92px; height:auto; max-width:none;}
.wipe-ring{position:absolute; inset:0; width:100%; height:100%; animation:wipespin 1.05s linear infinite;}
.wipe-ring circle{fill:none; stroke-width:2.2;}
.wipe-ring .wr-track{stroke:rgba(255,255,255,.13);}
/* white, not cyan — a cyan arc disappears into the brand sweep behind it */
.wipe-ring .wr-arc{stroke:#fff; stroke-linecap:round; stroke-dasharray:74 210;}
@keyframes wipespin{to{transform:rotate(360deg);}}

/* ── hero cursor spotlight ────────────────────────────────── */
.spot{
  /* physical top/left for the same reason as .cur — this is placed from a
     pointer offset, not from text flow */
  position:absolute; top:0; left:0; z-index:2; pointer-events:none;
  width:640px; height:640px; margin:-320px 0 0 -320px;
  background:radial-gradient(circle, rgba(255,255,255,.11) 0%, rgba(255,255,255,.04) 38%, transparent 68%);
  opacity:0; transition:opacity .5s var(--ease);
  will-change:transform;
}
.hero:hover .spot{opacity:1;}
@media (hover:none){ .spot{display:none;} }

/* ── ambient aurora on dark sections ──────────────────────── */
.sec-grid::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(58% 44% at 14% 6%, rgba(255,255,255,.035), transparent 62%),
    radial-gradient(48% 40% at 88% 92%, rgba(255,255,255,.028), transparent 60%);
  opacity:.85;
  animation:drift 26s ease-in-out infinite alternate;
}
@keyframes drift{
  from{transform:translate3d(0,0,0) scale(1);}
  to{transform:translate3d(2.5%,-2%,0) scale(1.06);}
}

/* ── heading mask reveal ──────────────────────────────────── */
html.js .rv-mask{clip-path:inset(0 0 108% 0); transition:clip-path 1.05s var(--ease-out);}
html.js .rv-mask.in{clip-path:inset(0 0 -12% 0);}

/* ── rule that draws itself ───────────────────────────────── */
.rule{height:1px; background:var(--line-strong);}
html.js .rule{transform:scaleX(0); transform-origin:inline-start;
      transition:transform 1.1s var(--ease-out);}
html.js .rule.in{transform:scaleX(1);}

/* ── 3D tilt on cards ─────────────────────────────────────── */
.grid-p,.lamps{perspective:1400px;}
/* No will-change here: it is set on 16+ cards at once, and each one becomes
   a permanent compositor layer. The browser promotes them while the tilt
   transform is actually running, which is when it matters. */
.pc,.lamp{transform-style:preserve-3d;}
.pc::before{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0;
  background:linear-gradient(120deg, transparent 38%, rgba(255,255,255,.16) 50%, transparent 62%);
  transition:opacity .4s;
}
.pc:hover::before{opacity:1;}

/* ── stat tiles ───────────────────────────────────────────── */
.hstat{position:relative; transition:background .4s;}
.hstat::after{
  content:""; position:absolute; inset-block-end:0; inset-inline:0; height:2px;
  background:var(--cyan); transform:scaleX(0); transition:transform .5s var(--ease);
}
.hstat:hover{background:rgba(0,173,239,.06);}
.hstat:hover::after{transform:scaleX(1);}
.hstat b{transition:text-shadow .4s;}
.hstat:hover b{text-shadow:0 0 22px rgba(0,173,239,.75);}

/* ── progress bar glow ────────────────────────────────────── */
.progress{box-shadow:0 0 14px var(--cyan), 0 0 4px var(--cyan);}

/* ── nav link + logo micro-interaction ────────────────────── */
.nav-logo img{transition:height .35s var(--ease), filter .35s var(--ease), transform .35s var(--ease);}
.nav-logo:hover img{transform:translateY(-1px); filter:var(--logo-filter) drop-shadow(0 0 12px rgba(0,173,239,.55));}

/* ── capability + product card sheen ──────────────────────── */
.cap,.zw,.val,.step{position:relative;}
.cap::before,.zw::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(420px 220px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.05), transparent 70%);
  transition:opacity .45s;
}
.cap:hover::before,.zw:hover::before{opacity:1;}

/* ── lighting section: light bloom ────────────────────────── */
.lamp .lamp-shot::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(circle at 50% 34%, rgba(233,180,76,.30), transparent 58%);
  opacity:0; transition:opacity .55s;
}
.lamp:hover .lamp-shot::before{opacity:1;}

/* ── section entry for the flow steps ─────────────────────── */
.step::after{
  content:""; position:absolute; inset-block-start:-1px; inset-inline-start:0; width:0; height:2px;
  background:var(--cyan); transition:width .6s var(--ease);
}
.step:hover::after{width:100%;}

@media (prefers-reduced-motion: reduce){
  .wipe,.spot{display:none !important;}
  .sec-grid::after{animation:none;}
  .rv-mask{clip-path:none !important;}
  .rule{transform:none !important;}
  .pc,.lamp{transform:none !important;}
}

/* =============================================================
   13. Custom cursor + grain
   Both are added by main.js and are pointer/motion gated, so a
   touch device or a reduced-motion visitor never sees them and
   the native cursor is never hidden without a replacement.
   ============================================================= */
/* ── cursor ───────────────────────────────────────────────────
   Handed to the browser as a real cursor image rather than drawn in JS. A
   JS cursor is composited by the page, so it is always a frame or more behind
   the hardware pointer — that is the lag you feel. This one is drawn by the
   OS at the pointer position and cannot lag. It also costs nothing: no rAF
   loop, no pointermove listener, no element to keep in sync.

   White fill with a dark outline, the way every OS arrow is built, so a single
   image reads on the black theme, the light theme and photography alike. The
   1x/2x pair keeps it sharp on retina; the plain url() line before each
   image-set() is the fallback for browsers without it. */
@media (hover:hover) and (pointer:fine){
  body{
    cursor:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAaCAYAAACzdqxAAAADBUlEQVR42q2VS2xMURjH/+ecW416pdPHzFBtpJ1UxiNovB8ViUiQiEgTgsRGJCQIFiKYWAhhZ9EQ1SCetRNKxMJCPNqwaDcVj4UFrU6nQzLmcc+5f4veiYuOjppvdRcnv/ud3/nO/wBuCSEghAAAiUJVWXngnLDGXgcwTkoJAFZBwDNmzem81HqZ/kDVKwBhpVRh4HWhcDtJ3dXVzbkNC+IANrlw+V9qQvXhR9HoAEmmB+Nxbt6yjQBOeryrUYO/fv1GkpqkQ1KfOn2W0iq+C6BCqVF694KNMdTakKTd/uAhq2umvQOwwONdjArsOA5J0rZtkrTfvnvPFY2rUgB2KiVBUuTtfTgwSWqtSdIkkynu3rOXAJoBWHmPZC4wSRpj6Hq3z1+4yAkTfU8B1OQ1kn8Dk6TjONnu7WfPX7A+PPMTgDUuXOX0PhI4W653/flzL9et3+AAOCQEMDSRw8DzBZN0zJAbm2Tm2PETtMaMvQZgYjZyRgQ7jkPvTzKZzC/fsViMGdvm+Qst9JX5PwUCdRUuWOSUTxJCCAIQxhgopXjj5m1x6vSZPr+/Mp5MpjKDsVg/Sfp8PquouFgkE/0aAH/p2tuxbQ+NWCKRYOL79+xU6N6+PgYmV7/Id4b/WGRZyvRHo3LZ8kbd0tJKKSXS6bTyV1aagwf2LwSw1rIshMPhMZFIREYiEelVkCuEUj09b9gwf+F7AIsb5i/qTqXSDklDUn/50s8pU6c9EUKgqalp5GCqrZveTlK/7Ohkbaj+NYCqoiILAPbdvNVGknYqlSZJc/jIUQJY6QbT3+GzZs/ruHX7DqdU1TwCMF4phba2NgVg3KIlKz5mbNvRWhutte7t7TO1oemPAWQ15C5/sKq5uGTSdQDKzQE5lAkCgDx87347SWbcWOXW7TuolNqYd2a4oZ49BOEmWfnqNWsHotEor1y9xiVLGz9MKi1vLg0Gq4e9FL8z8fN0vaUAoLQs0BqqnxEHsMtzy/6rBAARDAZLAASklPBsXxTkJXc1FQ7o6fyfXusfwT1mvDZfEJ0AAAAASUVORK5CYII=") 2 2, default;
    cursor:-webkit-image-set(url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAaCAYAAACzdqxAAAADBUlEQVR42q2VS2xMURjH/+ecW416pdPHzFBtpJ1UxiNovB8ViUiQiEgTgsRGJCQIFiKYWAhhZ9EQ1SCetRNKxMJCPNqwaDcVj4UFrU6nQzLmcc+5f4veiYuOjppvdRcnv/ud3/nO/wBuCSEghAAAiUJVWXngnLDGXgcwTkoJAFZBwDNmzem81HqZ/kDVKwBhpVRh4HWhcDtJ3dXVzbkNC+IANrlw+V9qQvXhR9HoAEmmB+Nxbt6yjQBOeryrUYO/fv1GkpqkQ1KfOn2W0iq+C6BCqVF694KNMdTakKTd/uAhq2umvQOwwONdjArsOA5J0rZtkrTfvnvPFY2rUgB2KiVBUuTtfTgwSWqtSdIkkynu3rOXAJoBWHmPZC4wSRpj6Hq3z1+4yAkTfU8B1OQ1kn8Dk6TjONnu7WfPX7A+PPMTgDUuXOX0PhI4W653/flzL9et3+AAOCQEMDSRw8DzBZN0zJAbm2Tm2PETtMaMvQZgYjZyRgQ7jkPvTzKZzC/fsViMGdvm+Qst9JX5PwUCdRUuWOSUTxJCCAIQxhgopXjj5m1x6vSZPr+/Mp5MpjKDsVg/Sfp8PquouFgkE/0aAH/p2tuxbQ+NWCKRYOL79+xU6N6+PgYmV7/Id4b/WGRZyvRHo3LZ8kbd0tJKKSXS6bTyV1aagwf2LwSw1rIshMPhMZFIREYiEelVkCuEUj09b9gwf+F7AIsb5i/qTqXSDklDUn/50s8pU6c9EUKgqalp5GCqrZveTlK/7Ohkbaj+NYCqoiILAPbdvNVGknYqlSZJc/jIUQJY6QbT3+GzZs/ruHX7DqdU1TwCMF4phba2NgVg3KIlKz5mbNvRWhutte7t7TO1oemPAWQ15C5/sKq5uGTSdQDKzQE5lAkCgDx87347SWbcWOXW7TuolNqYd2a4oZ49BOEmWfnqNWsHotEor1y9xiVLGz9MKi1vLg0Gq4e9FL8z8fN0vaUAoLQs0BqqnxEHsMtzy/6rBAARDAZLAASklPBsXxTkJXc1FQ7o6fyfXusfwT1mvDZfEJ0AAAAASUVORK5CYII=") 1x, url("data:image/png;base64,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") 2x) 2 2, default;
    cursor:image-set(url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAaCAYAAACzdqxAAAADBUlEQVR42q2VS2xMURjH/+ecW416pdPHzFBtpJ1UxiNovB8ViUiQiEgTgsRGJCQIFiKYWAhhZ9EQ1SCetRNKxMJCPNqwaDcVj4UFrU6nQzLmcc+5f4veiYuOjppvdRcnv/ud3/nO/wBuCSEghAAAiUJVWXngnLDGXgcwTkoJAFZBwDNmzem81HqZ/kDVKwBhpVRh4HWhcDtJ3dXVzbkNC+IANrlw+V9qQvXhR9HoAEmmB+Nxbt6yjQBOeryrUYO/fv1GkpqkQ1KfOn2W0iq+C6BCqVF694KNMdTakKTd/uAhq2umvQOwwONdjArsOA5J0rZtkrTfvnvPFY2rUgB2KiVBUuTtfTgwSWqtSdIkkynu3rOXAJoBWHmPZC4wSRpj6Hq3z1+4yAkTfU8B1OQ1kn8Dk6TjONnu7WfPX7A+PPMTgDUuXOX0PhI4W653/flzL9et3+AAOCQEMDSRw8DzBZN0zJAbm2Tm2PETtMaMvQZgYjZyRgQ7jkPvTzKZzC/fsViMGdvm+Qst9JX5PwUCdRUuWOSUTxJCCAIQxhgopXjj5m1x6vSZPr+/Mp5MpjKDsVg/Sfp8PquouFgkE/0aAH/p2tuxbQ+NWCKRYOL79+xU6N6+PgYmV7/Id4b/WGRZyvRHo3LZ8kbd0tJKKSXS6bTyV1aagwf2LwSw1rIshMPhMZFIREYiEelVkCuEUj09b9gwf+F7AIsb5i/qTqXSDklDUn/50s8pU6c9EUKgqalp5GCqrZveTlK/7Ohkbaj+NYCqoiILAPbdvNVGknYqlSZJc/jIUQJY6QbT3+GzZs/ruHX7DqdU1TwCMF4phba2NgVg3KIlKz5mbNvRWhutte7t7TO1oemPAWQ15C5/sKq5uGTSdQDKzQE5lAkCgDx87347SWbcWOXW7TuolNqYd2a4oZ49BOEmWfnqNWsHotEor1y9xiVLGz9MKi1vLg0Gq4e9FL8z8fN0vaUAoLQs0BqqnxEHsMtzy/6rBAARDAZLAASklPBsXxTkJXc1FQ7o6fyfXusfwT1mvDZfEJ0AAAAASUVORK5CYII=") 1x, url("data:image/png;base64,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") 2x) 2 2, default;
  }
  a, button, summary, [role="button"], .filt, .lfilt, .pc, .lamp, .grp, label{
    cursor:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAaCAYAAACzdqxAAAADbUlEQVR42q2VbWhbVRjHf+ec26Zp89LcNG2ydeug09rilFGZbg4ZKAymU0Sq6D6JiBQHA51jTm2dzC/6QRRXRZhTsTK3KWtZJx1DhwgD30EQQTZEEKZrt7RNmjS59zx+SBb31jadfeB+O/f3/O///s/zQKUUKAWgWayKxpNvxYLBwRZoQGkAZ1HA4fZbvgtue1cam5f+4EIX2iwOPLr8pmMMZTxn7/cS6ehOu/AQWl+05bqsKb2klKPT/xjvxu7C1MtHo4UNjxyOW/sqKItSFjDXBwYwNZCZNFJXL5kdg/7043t2xQK1w0mRBFr7C7Xm8s/UDnhFxfSEyT36gpd9/uDmfGrFKdfaNWjjleFq4WAApUtPeswprL3fm9p9tL14611fN1n/SZT2EKkqkrMfMA5MjDn+kpU20zcUyG3ufc8VO4BSBqXtfNbM3dk4kMtoUVqyWwe86a1v9zZGGk82im1Da28u+PxR0gasr5gcd/IPPO1lXzpyp6zoOpWwdmPZd3Mt36vLqFKlBhfOOcWb1/tTr4yk8nfc+0Xc+tsBH5Ar4dWHXylwaoVMWll3iTfVN+TlHtv1eiwY/NiFyJXw2cEi5bPl8oogopSp0So74ejxv2pyPTvJP/HaFt9t+S2UTCb+m2azmS8WtFNS4BegISaB0X0qMPTm3zbWnFYzMwWVPX8Oi0jYdagJKJOb8C5VfTXY+hAMWZW5oAEkUA/ejC2uvtvUfbrnj2d/+nXdbrBzmHaNoPtFCEV9PTGmw333ebVffSI0RGF60til7X5hU+/te2ET2kBXVy39/Zr+fl1WefWNjLZ1HtcfnhG+lLzzzs8S7ug+3Qxrw51rflGHxiyfp32Gs57+4LREUm0nQUFPz/yDKbqs4xjDWa/mjW8k0nrDjy60YhxczbbA9v3CqBQ5cFYYFb/+4eckDhvKC2FueHjl6m/rdnwk0ZbW4wkIoQ30HDQt0BBete5P9Vnacvi8z5FJT+//3Y8s6zgBXLRhDsXNrQOxUHQQMGUlGnBQirijd9a+eEg4IQVGCh4jBQnfs0VcYx6sfo2Vlqmq5FFEpaApdNvGcX3grASe2SfhVevPxGJNA7FYavmluZ0VCZW/e9kYAmiMJ9+PtnWm4/BU+Zb971KASqVS9QlIVmb1AgZ+lT0WFVihLmhb/wtrZjDP9OHZoQAAAABJRU5ErkJggg==") 2 2, pointer;
    cursor:-webkit-image-set(url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAaCAYAAACzdqxAAAADbUlEQVR42q2VbWhbVRjHf+ec26Zp89LcNG2ydeug09rilFGZbg4ZKAymU0Sq6D6JiBQHA51jTm2dzC/6QRRXRZhTsTK3KWtZJx1DhwgD30EQQTZEEKZrt7RNmjS59zx+SBb31jadfeB+O/f3/O///s/zQKUUKAWgWayKxpNvxYLBwRZoQGkAZ1HA4fZbvgtue1cam5f+4EIX2iwOPLr8pmMMZTxn7/cS6ehOu/AQWl+05bqsKb2klKPT/xjvxu7C1MtHo4UNjxyOW/sqKItSFjDXBwYwNZCZNFJXL5kdg/7043t2xQK1w0mRBFr7C7Xm8s/UDnhFxfSEyT36gpd9/uDmfGrFKdfaNWjjleFq4WAApUtPeswprL3fm9p9tL14611fN1n/SZT2EKkqkrMfMA5MjDn+kpU20zcUyG3ufc8VO4BSBqXtfNbM3dk4kMtoUVqyWwe86a1v9zZGGk82im1Da28u+PxR0gasr5gcd/IPPO1lXzpyp6zoOpWwdmPZd3Mt36vLqFKlBhfOOcWb1/tTr4yk8nfc+0Xc+tsBH5Ar4dWHXylwaoVMWll3iTfVN+TlHtv1eiwY/NiFyJXw2cEi5bPl8oogopSp0So74ejxv2pyPTvJP/HaFt9t+S2UTCb+m2azmS8WtFNS4BegISaB0X0qMPTm3zbWnFYzMwWVPX8Oi0jYdagJKJOb8C5VfTXY+hAMWZW5oAEkUA/ejC2uvtvUfbrnj2d/+nXdbrBzmHaNoPtFCEV9PTGmw333ebVffSI0RGF60til7X5hU+/te2ET2kBXVy39/Zr+fl1WefWNjLZ1HtcfnhG+lLzzzs8S7ug+3Qxrw51rflGHxiyfp32Gs57+4LREUm0nQUFPz/yDKbqs4xjDWa/mjW8k0nrDjy60YhxczbbA9v3CqBQ5cFYYFb/+4eckDhvKC2FueHjl6m/rdnwk0ZbW4wkIoQ30HDQt0BBete5P9Vnacvi8z5FJT+//3Y8s6zgBXLRhDsXNrQOxUHQQMGUlGnBQirijd9a+eEg4IQVGCh4jBQnfs0VcYx6sfo2Vlqmq5FFEpaApdNvGcX3grASe2SfhVevPxGJNA7FYavmluZ0VCZW/e9kYAmiMJ9+PtnWm4/BU+Zb971KASqVS9QlIVmb1AgZ+lT0WFVihLmhb/wtrZjDP9OHZoQAAAABJRU5ErkJggg==") 1x, url("data:image/png;base64,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") 2x) 2 2, pointer;
    cursor:image-set(url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAaCAYAAACzdqxAAAADbUlEQVR42q2VbWhbVRjHf+ec26Zp89LcNG2ydeug09rilFGZbg4ZKAymU0Sq6D6JiBQHA51jTm2dzC/6QRRXRZhTsTK3KWtZJx1DhwgD30EQQTZEEKZrt7RNmjS59zx+SBb31jadfeB+O/f3/O///s/zQKUUKAWgWayKxpNvxYLBwRZoQGkAZ1HA4fZbvgtue1cam5f+4EIX2iwOPLr8pmMMZTxn7/cS6ehOu/AQWl+05bqsKb2klKPT/xjvxu7C1MtHo4UNjxyOW/sqKItSFjDXBwYwNZCZNFJXL5kdg/7043t2xQK1w0mRBFr7C7Xm8s/UDnhFxfSEyT36gpd9/uDmfGrFKdfaNWjjleFq4WAApUtPeswprL3fm9p9tL14611fN1n/SZT2EKkqkrMfMA5MjDn+kpU20zcUyG3ufc8VO4BSBqXtfNbM3dk4kMtoUVqyWwe86a1v9zZGGk82im1Da28u+PxR0gasr5gcd/IPPO1lXzpyp6zoOpWwdmPZd3Mt36vLqFKlBhfOOcWb1/tTr4yk8nfc+0Xc+tsBH5Ar4dWHXylwaoVMWll3iTfVN+TlHtv1eiwY/NiFyJXw2cEi5bPl8oogopSp0So74ejxv2pyPTvJP/HaFt9t+S2UTCb+m2azmS8WtFNS4BegISaB0X0qMPTm3zbWnFYzMwWVPX8Oi0jYdagJKJOb8C5VfTXY+hAMWZW5oAEkUA/ejC2uvtvUfbrnj2d/+nXdbrBzmHaNoPtFCEV9PTGmw333ebVffSI0RGF60til7X5hU+/te2ET2kBXVy39/Zr+fl1WefWNjLZ1HtcfnhG+lLzzzs8S7ug+3Qxrw51rflGHxiyfp32Gs57+4LREUm0nQUFPz/yDKbqs4xjDWa/mjW8k0nrDjy60YhxczbbA9v3CqBQ5cFYYFb/+4eckDhvKC2FueHjl6m/rdnwk0ZbW4wkIoQ30HDQt0BBete5P9Vnacvi8z5FJT+//3Y8s6zgBXLRhDsXNrQOxUHQQMGUlGnBQirijd9a+eEg4IQVGCh4jBQnfs0VcYx6sfo2Vlqmq5FFEpaApdNvGcX3grASe2SfhVevPxGJNA7FYavmluZ0VCZW/e9kYAmiMJ9+PtnWm4/BU+Zb971KASqVS9QlIVmb1AgZ+lT0WFVihLmhb/wtrZjDP9OHZoQAAAABJRU5ErkJggg==") 1x, url("data:image/png;base64,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") 2x) 2 2, pointer;
  }
  /* text and disabled controls keep the meaning the browser gives them */
  input, textarea, select{cursor:auto;}
  [disabled], .is-disabled{cursor:not-allowed;}
}

/* film grain — sits above everything, costs one repeated tile */
.grain{
  /* inset:-50% made this four times the viewport area, and it repaints on
     every animation step. Kept just large enough to cover the drift, promoted
     to its own compositor layer, and the steps() rate halved — the texture is
     identical, the repaint cost is a fraction. */
  position:fixed; inset:-6%; z-index:105; pointer-events:none; opacity:.05;
  will-change:transform; contain:strict;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  /* static: the drift animation repainted a translucent full-screen layer
     several times a second, which cost more than the effect was worth */
  animation:none;
}
@keyframes grainshift{
  0%{transform:translate3d(0,0,0);} 25%{transform:translate3d(-2%,1.5%,0);}
  50%{transform:translate3d(1.5%,-2%,0);} 75%{transform:translate3d(-1.5%,-1.5%,0);}
  100%{transform:translate3d(0,0,0);}
}
:root[data-theme="light"] .grain,
:root:not([data-theme="dark"]) .grain{opacity:.03;}

/* photography reads harder against pure black */
/* A 2–3% saturation nudge is imperceptible, but as a CSS filter it forces
   every project and fixture image onto its own filtered compositor layer. The
   hover lift below is a transform, which costs nothing. */

@media (prefers-reduced-motion: reduce){
  .grain{animation:none; opacity:.03;}
}
@media (hover:none),(pointer:coarse){
  .grain{display:none !important;}
}

/* ── Instagram feed section ───────────────────────────────── */
.ig-sec{border-top:1px solid rgba(233,180,76,.16);}
.ig-feed{margin-top:clamp(30px,3.6vw,46px);}
/* whatever a feed widget injects should sit on the section, not fight it */
.ig-feed iframe{width:100%; border:0; display:block;}
.ig-cta{
  border:1px solid rgba(233,180,76,.28); background:rgba(255,255,255,.03);
  padding:clamp(34px,4.4vw,56px) clamp(24px,3vw,40px); text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.ig-cta svg{width:38px; height:38px; color:var(--amber-soft);}
.ig-cta b{font-family:var(--f-mono); font-size:clamp(17px,1.9vw,23px); color:#FBF4E6; letter-spacing:.04em;}
.ig-cta p{max-width:46ch; font-size:15px;}
.ig-cta .btn{margin-top:6px;}

/* ── About: stacked media column that fills the text height ─── */
.shot-art{margin:0;}
.shot-art img{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; border:1px solid var(--line);}
@media (max-width:940px){ .shot-art img{aspect-ratio:16/10;} }

/* ── Capability cards: photograph band ──────────────────────── */
.cap{padding:0; display:flex; flex-direction:column;}
.cap-shot{position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--panel-3);}
.cap-shot img{width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease-out);}
.cap:hover .cap-shot img{transform:scale(1.04);}
.cap-shot::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg,var(--panel) 0%,transparent 55%); pointer-events:none;}
.sec-alt .cap-shot::after{background:linear-gradient(0deg,var(--void) 0%,transparent 55%);}
.cap > :not(.cap-shot){padding-inline:clamp(24px,3vw,38px);}
.cap > .cap-n{padding-top:0; margin-top:-6px; position:relative; z-index:2;}
.cap > .chips{padding-bottom:clamp(26px,3vw,36px);}

/* ── Software: logo slots ───────────────────────────────────── */
.zw-logo,.zw-partner-mark{display:inline-flex; align-items:center;}
/* product icons are ZWSOFT's own full-colour artwork — no invert filter, or
   the brand colours would flip in light mode */
.zw-id{display:inline-flex; align-items:center; gap:13px; min-width:0;}
.zw-logo{flex:0 0 auto; width:42px; height:42px;}
.zw-logo img{width:100%; height:100%; object-fit:contain; border-radius:19%; filter:none;}
.zw-partner-mark b{display:none;}
/* if a logo file isn't present the script drops the whole slot, so a missing
   asset never leaves an empty box — the product name beside it still reads */
.zw-partner-mark.is-text b{display:inline; font-family:var(--f-display); font-size:26px; font-weight:800; letter-spacing:.04em; color:var(--text);}
.zw-partner{
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  border:1px solid var(--line); padding:22px 26px; margin-bottom:22px; background:var(--panel-2);
}
.sec-alt .zw-partner{background:var(--void);}
/* the ZWSOFT wordmark ships dark-on-transparent, so the dark theme gets the
   white-glyph copy and the light theme the mark exactly as issued */
.zw-partner-mark img{max-height:30px; width:auto; filter:none;}
.zw-partner-mark .lg-light{display:none;}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .zw-partner-mark .lg-dark{display:none;}
  :root:not([data-theme="dark"]) .zw-partner-mark .lg-light{display:inline;}
}
:root[data-theme="light"] .zw-partner-mark .lg-dark{display:none;}
:root[data-theme="light"] .zw-partner-mark .lg-light{display:inline;}
:root[data-theme="dark"] .zw-partner-mark .lg-dark{display:inline;}
:root[data-theme="dark"] .zw-partner-mark .lg-light{display:none;}
.zw-partner-txt{display:flex; flex-direction:column; gap:2px; padding-inline-start:22px; border-inline-start:1px solid var(--line-strong);}
/* the ZWSOFT-issued reseller seal — full colour on both themes, sitting at the
   far end of the partner strip (which mirrors on its own in Arabic) */
.zw-seal{height:96px; width:auto; margin-inline-start:auto; flex:none;}
@media (max-width:720px){
  .zw-partner{gap:16px;}
  .zw-seal{height:76px; margin-inline-start:0;}
}
.zw-partner-txt b{font-family:var(--f-mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan);}
.zw-partner-txt span{font-size:13.5px; color:var(--text-faint);}
html[lang="ar"] .zw-partner-txt b{font-family:var(--f-ar-body); letter-spacing:0; font-size:15px;}