/* ============================================================
   BINA — site-v3 · design system
   Palette: Onyx #16181A · Pearl #F4F4F1 · Brass #B08A4A
   Greys: Graphite #3C4043 · Concrete #C9CBC6 · Mist #E3E4E0 · Slate #5A5F63
   Type: Jost (display) · IBM Plex Sans (body) · JetBrains Mono (technical)
   Arabic: Aref Ruqaa (display) · IBM Plex Sans Arabic (body)
   Rule: brass is the apex — one brass moment per surface.
   ============================================================ */

/* ---------- fonts ---------- */
@font-face{font-family:'Jost';src:url('../assets/fonts/Jost-300.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Jost';src:url('../assets/fonts/Jost-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Jost';src:url('../assets/fonts/Jost-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Jost';src:url('../assets/fonts/Jost-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('../assets/fonts/IBMPlexSans-Light.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('../assets/fonts/IBMPlexSans-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('../assets/fonts/IBMPlexSans-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('../assets/fonts/IBMPlexSans-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('../assets/fonts/JetBrainsMono-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('../assets/fonts/JetBrainsMono-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Aref Ruqaa';src:url('../assets/fonts/ArefRuqaa-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('../assets/fonts/IBMPlexSansArabic-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('../assets/fonts/IBMPlexSansArabic-Medium.woff2') format('woff2');font-weight:500;font-display:swap}

/* ---------- tokens ---------- */
:root{
  --onyx:#16181A; --pearl:#F4F4F1; --brass:#B08A4A;
  --graphite:#3C4043; --concrete:#C9CBC6; --mist:#E3E4E0; --slate:#5A5F63;
  --onyx-2:#1C1F22; /* raised dark panel */
  --line-d:rgba(244,244,241,.12); /* hairline on dark */
  --line-l:rgba(22,24,26,.12);    /* hairline on light */
  --grid-d:rgba(244,244,241,.045);
  --grid-l:rgba(22,24,26,.05);
  --display:'Jost',sans-serif;
  --body:'IBM Plex Sans','IBM Plex Sans Arabic',sans-serif;
  --mono:'JetBrains Mono',monospace;
  --ar-display:'Aref Ruqaa',serif;
  --ar-body:'IBM Plex Sans Arabic',sans-serif;
  --pad:clamp(20px,5vw,72px);
  --max:1480px;
  --ease:cubic-bezier(.22,.61,.2,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
  --nav-h:76px;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html:focus-within{scroll-behavior:smooth}
body{
  background:var(--onyx);color:var(--pearl);
  font-family:var(--body);font-weight:300;
  font-size:clamp(16px,1.05vw,17.5px);line-height:1.72;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.page-light{background:var(--pearl);color:var(--graphite)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--brass);color:var(--onyx)}
:focus-visible{outline:1px solid var(--brass);outline-offset:3px}
[dir="rtl"]{font-family:var(--ar-body)}

/* blueprint grid fields */
.field-dark{background-image:linear-gradient(var(--grid-d) 1px,transparent 1px),linear-gradient(90deg,var(--grid-d) 1px,transparent 1px);background-size:72px 72px}
.field-light{background-image:linear-gradient(var(--grid-l) 1px,transparent 1px),linear-gradient(90deg,var(--grid-l) 1px,transparent 1px);background-size:72px 72px}

/* ---------- type voices ---------- */
.eyebrow{
  font-family:var(--mono);font-size:11px;font-weight:400;
  letter-spacing:.34em;text-transform:uppercase;color:var(--slate);
  display:flex;align-items:center;gap:14px;
}
.eyebrow .apx{width:11px;height:auto;flex:none;transform:translateY(-1px)}
.on-dark .eyebrow,.eyebrow.on-dark{color:var(--concrete)}
.display{
  font-family:var(--display);font-weight:300;line-height:1.06;
  letter-spacing:.01em;text-wrap:balance;
}
.d-xxl{font-size:clamp(2.9rem,7.2vw,6.4rem)}
.d-xl{font-size:clamp(2.4rem,5.4vw,4.6rem)}
.d-lg{font-size:clamp(1.9rem,3.8vw,3.2rem)}
.d-md{font-size:clamp(1.45rem,2.5vw,2.1rem);line-height:1.18}
.lead{font-size:clamp(1.05rem,1.35vw,1.25rem);line-height:1.75;font-weight:300}
.muted{color:var(--slate)}
.on-dark .muted{color:var(--concrete);opacity:.85}
.mono-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.3em;text-transform:uppercase}
.ar{font-family:var(--ar-display);direction:rtl}
.ar-body{font-family:var(--ar-body);direction:rtl}
em{font-style:normal;color:var(--brass)}

/* the single brass hairline */
.brass-rule{width:64px;height:1px;background:var(--brass);border:0}

/* ---------- layout ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
section{position:relative}
.sec-pad{padding-top:clamp(90px,12vh,160px);padding-bottom:clamp(90px,12vh,160px)}
.sec-head{max-width:880px;display:grid;gap:26px;margin-bottom:clamp(48px,7vh,84px)}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:900;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad);
  transition:background .5s var(--ease),box-shadow .5s var(--ease),transform .45s var(--ease);
}
.nav.is-solid{background:rgba(22,24,26,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line-d)}
.nav.is-hidden{transform:translateY(-100%)}
.nav-brand{display:flex;align-items:center;height:100%}
.nav-brand img{height:20px;width:auto}
.nav-brand .lg-onyx{display:none}
.page-light .nav:not(.is-solid) .lg-pearl{display:none}
.page-light .nav:not(.is-solid) .lg-onyx{display:block}
.nav.brand-hold .nav-brand{opacity:0;pointer-events:none}
.nav-links{display:flex;gap:clamp(20px,3vw,44px);align-items:center}
.nav-links a{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--concrete);position:relative;padding:8px 0;transition:color .3s;
}
.page-light .nav:not(.is-solid) .nav-links a{color:var(--slate)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:2px;width:0;height:1px;background:currentColor;transition:width .35s var(--ease)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{width:100%}
.nav-links a:hover{color:var(--pearl)}
.page-light .nav:not(.is-solid) .nav-links a:hover{color:var(--onyx)}
.nav-cta{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--pearl);border:1px solid var(--line-d);padding:13px 22px;
  transition:border-color .35s,background .35s,color .35s;white-space:nowrap;
}
.nav-cta:hover{border-color:var(--brass);color:var(--brass)}
.page-light .nav:not(.is-solid) .nav-cta{color:var(--onyx);border-color:var(--line-l)}
.page-light .nav:not(.is-solid) .nav-cta:hover{color:var(--brass);border-color:var(--brass)}
.burger{display:none;flex-direction:column;gap:6px;padding:10px;z-index:1001}
.burger span{display:block;width:26px;height:1px;background:var(--pearl);transition:transform .4s var(--ease),opacity .3s}
.page-light .nav:not(.is-solid) .burger span{background:var(--onyx)}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* mobile menu */
.menu{
  position:fixed;inset:0;z-index:950;background:var(--onyx);
  display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad);
  clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--ease-io);
}
.menu.open{clip-path:inset(0 0 0 0)}
.menu a{
  font-family:var(--display);font-weight:300;font-size:clamp(2rem,8vw,3rem);
  color:var(--pearl);padding:.35em 0;border-bottom:1px solid var(--line-d);
  display:flex;justify-content:space-between;align-items:center;
}
.menu a .mono-label{color:var(--slate)}
.menu .menu-foot{margin-top:40px;color:var(--slate);font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:16px;
  font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  padding:18px 34px;border:1px solid var(--line-d);color:var(--pearl);
  position:relative;overflow:hidden;transition:color .4s var(--ease),border-color .4s;
}
.btn::before{content:"";position:absolute;inset:0;background:var(--pearl);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-io);z-index:0}
.btn:hover::before{transform:scaleX(1)}
.btn:hover{color:var(--onyx)}
.btn>*{position:relative;z-index:1}
.btn .arr{transition:transform .35s var(--ease)}
.btn:hover .arr{transform:translateX(6px)}
.btn-light{border-color:var(--line-l);color:var(--onyx)}
.btn-light::before{background:var(--onyx)}
.btn-light:hover{color:var(--pearl)}
.btn-solid{background:var(--pearl);color:var(--onyx);border-color:var(--pearl)}
.btn-solid::before{background:var(--onyx)}
.btn-solid:hover{color:var(--pearl)}

/* ---------- reveals ---------- */
.rv{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.12s}.rv-d2{transition-delay:.24s}.rv-d3{transition-delay:.36s}.rv-d4{transition-delay:.48s}
.rv-line{transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease-io) .2s;opacity:1}
.rv-line.in{transform:scaleX(1)}
.rv-img{overflow:hidden}
.rv-img img{transform:scale(1.12);transition:transform 1.4s var(--ease)}
.rv-img.in img{transform:scale(1)}
.draw path,.draw line,.draw polyline{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);transition:stroke-dashoffset 1.6s var(--ease-io) .25s}
.draw.in path,.draw.in line,.draw.in polyline{stroke-dashoffset:0}

/* ---------- page transition wipe ---------- */
.wipe{
  position:fixed;inset:0;z-index:2000;background:var(--onyx);
  display:flex;align-items:center;justify-content:center;
  transform:translateY(100%);pointer-events:none;
}
.wipe img{width:34px;opacity:0;transition:opacity .2s .15s}
.wipe.cover{transform:none;transition:transform .42s var(--ease-io);pointer-events:all}
.wipe.cover img{opacity:1}
.wipe.leave{transform:translateY(-100%);transition:transform .5s var(--ease-io) .05s}
.wipe.leave img{opacity:0}

/* scroll progress hairline */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:1500;transform-origin:left;transform:scaleX(0);background:var(--brass);opacity:.9}

/* ============================================================
   HERO (shared pattern)
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(to top,rgba(22,24,26,.96) 0%,rgba(22,24,26,.45) 42%,rgba(22,24,26,.35) 100%)}
.kenburns img{animation:kb 26s var(--ease) both}
@keyframes kb{from{transform:scale(1.14)}to{transform:scale(1)}}
.hero-inner{position:relative;z-index:2;width:100%;padding-bottom:clamp(56px,9vh,120px);display:grid;gap:30px}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;border-top:1px solid var(--line-d);padding-top:22px;margin-top:18px}
.hero-foot .mono-label{color:var(--concrete);opacity:.75}
.scroll-cue{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--concrete)}
.scroll-cue::after{content:"";width:1px;height:42px;background:linear-gradient(var(--concrete),transparent);animation:cue 2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* sub-page hero (shorter) */
.hero-sub{min-height:78svh}

/* standalone scroll cue for the home hero (text resolves on scroll) */
.hero-cue{
  position:absolute;z-index:4;left:50%;bottom:36px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:12px;
  font-family:var(--mono);font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--concrete);
}
.hero-cue::after{content:"";width:1px;height:46px;background:linear-gradient(var(--concrete),transparent);animation:cue 2s var(--ease) infinite}

/* ============================================================
   HOME — intro veil + big logo resolve
   ============================================================ */
.veil{position:fixed;inset:0;z-index:1900;background:var(--onyx);display:flex;align-items:center;justify-content:center;transition:opacity .7s var(--ease),visibility .7s}
.veil.gone{opacity:0;visibility:hidden}
.veil .veil-apex{width:54px;opacity:0;animation:veilApex 1.1s var(--ease) .1s forwards}
@keyframes veilApex{0%{opacity:0;transform:translateY(18px) scale(.92)}100%{opacity:1;transform:none}}
.veil .veil-rule{position:absolute;bottom:38vh;left:50%;width:min(420px,60vw);height:1px;background:var(--line-d);transform:translateX(-50%) scaleX(0);animation:veilRule 1s var(--ease-io) .4s forwards}
@keyframes veilRule{to{transform:translateX(-50%) scaleX(1)}}

.hero-logo{
  position:absolute;z-index:3;left:50%;top:42%;transform:translate(-50%,-50%);
  width:min(66vw,820px);will-change:transform,width,opacity;pointer-events:none;
}
.hero-logo img{width:100%}

/* ============================================================
   HOME — the three-act build film
   ============================================================ */
.film{position:relative}
.film-track{height:520vh}
.film-stage{position:sticky;top:0;height:100svh;overflow:hidden}
.plate{position:absolute;inset:0;opacity:0;will-change:opacity,transform}
.plate img{width:100%;height:100%;object-fit:cover;will-change:transform}
.plate::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(22,24,26,.85),rgba(22,24,26,.18) 45%,rgba(22,24,26,.3))}
.film-rail{
  position:absolute;z-index:5;left:var(--pad);bottom:clamp(48px,8vh,96px);
  max-width:620px;display:grid;gap:18px;
}
.film-acts{position:relative;height:auto;min-height:240px}
.film-act{position:absolute;inset:0;opacity:0;transform:translateY(26px);transition:opacity .6s var(--ease),transform .6s var(--ease);display:grid;gap:14px;align-content:end}
.film-act.on{opacity:1;transform:none}
.film-act .act-no{font-family:var(--mono);font-size:11px;letter-spacing:.34em;color:var(--concrete)}
.film-act h3{font-family:var(--display);font-weight:300;font-size:clamp(2.2rem,5vw,3.8rem);line-height:1.04}
.film-act p{max-width:46ch;color:var(--concrete)}
.film-meter{position:absolute;z-index:5;right:var(--pad);bottom:clamp(48px,8vh,96px);display:flex;flex-direction:column;align-items:center;gap:10px}
.film-meter .bar{width:1px;height:clamp(120px,22vh,220px);background:var(--line-d);position:relative}
.film-meter .bar i{position:absolute;top:0;left:0;width:100%;height:0%;background:var(--pearl)}
.film-meter .mono-label{writing-mode:vertical-rl;color:var(--concrete);opacity:.7}
.film-final{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;text-align:center;opacity:0;transition:opacity .7s var(--ease);pointer-events:none}
.film-final.on{opacity:1}
.film-final .inner{display:grid;gap:22px;justify-items:center;padding:0 var(--pad)}
.film-final .apx-lg{width:44px}
.film-final .sig{font-family:var(--display);font-weight:300;font-size:clamp(1.7rem,3.6vw,2.9rem);line-height:1.2}
.film-final .mono-label{color:var(--concrete)}

/* ============================================================
   HOME — tap to build
   ============================================================ */
.t2b{position:relative;aspect-ratio:3/4;max-height:78vh;width:100%;overflow:hidden;cursor:pointer;background:var(--onyx-2)}
@media(min-width:900px){.t2b{aspect-ratio:4/5}}
.t2b img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .85s var(--ease);will-change:opacity}
.t2b img.on{opacity:1}
.t2b .t2b-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(22,24,26,.78),transparent 55%)}
.t2b .t2b-ui{position:absolute;left:26px;bottom:24px;right:26px;display:flex;justify-content:space-between;align-items:flex-end;gap:14px}
.t2b .t2b-state{font-family:var(--mono);font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--pearl)}
.t2b .t2b-hint{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--concrete)}
.t2b .pulse{width:9px;height:9px;border:1px solid var(--concrete);border-radius:50%;position:relative}
.t2b .pulse::after{content:"";position:absolute;inset:-7px;border:1px solid var(--concrete);border-radius:50%;opacity:0;animation:pulse 2.2s var(--ease) infinite}
@keyframes pulse{0%{transform:scale(.4);opacity:.9}70%{transform:scale(1);opacity:0}100%{opacity:0}}
.t2b .t2b-sig{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;opacity:0;transition:opacity .8s var(--ease) .3s;background:rgba(22,24,26,.35)}
.t2b.done .t2b-sig{opacity:1}
.t2b .t2b-sig img{position:static;opacity:1;width:38px;height:auto}
.t2b .t2b-sig .w{width:min(300px,56%)}

/* ============================================================
   before / after slider
   ============================================================ */
.ba{position:relative;aspect-ratio:16/10;overflow:hidden;user-select:none;touch-action:none;background:var(--onyx-2)}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba .ba-top{clip-path:inset(0 calc(100% - var(--x,50%)) 0 0)}
.ba .ba-handle{
  position:absolute;top:0;bottom:0;left:var(--x,50%);width:1px;background:var(--brass);
  transform:translateX(-.5px);pointer-events:none;
}
.ba .ba-knob{
  position:absolute;top:50%;left:var(--x,50%);transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;background:var(--onyx);border:1px solid var(--brass);
  display:flex;align-items:center;justify-content:center;pointer-events:none;
}
.ba .ba-knob img{position:static;width:16px;height:auto}
.ba .ba-tag{position:absolute;bottom:18px;font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--pearl);background:rgba(22,24,26,.55);padding:8px 14px;pointer-events:none}
.ba .tag-l{left:18px}.ba .tag-r{right:18px}

/* ============================================================
   sector rail (home) + sector blocks (services)
   ============================================================ */
.rail{display:flex;gap:clamp(14px,2vw,26px);overflow-x:auto;scroll-snap-type:x mandatory;padding:6px var(--pad) 26px;cursor:grab;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail.dragging{cursor:grabbing;scroll-snap-type:none}
.rail-card{flex:0 0 min(340px,72vw);scroll-snap-align:start;position:relative;display:block}
.rail-card .ph{aspect-ratio:4/5;overflow:hidden;background:var(--onyx-2)}
.rail-card .ph img{width:100%;height:100%;object-fit:cover;transform:scale(1.01);transition:transform .9s var(--ease);filter:saturate(.92)}
.rail-card:hover .ph img{transform:scale(1.07)}
.rail-card .meta{display:flex;justify-content:space-between;align-items:baseline;padding-top:14px;border-top:1px solid var(--line-d);margin-top:14px}
.rail-card h3{font-family:var(--display);font-weight:300;font-size:1.25rem}
.rail-card .idx{font-family:var(--mono);font-size:10px;letter-spacing:.25em;color:var(--slate)}

/* ============================================================
   stats
   ============================================================ */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));border-top:1px solid var(--line-d);border-left:1px solid var(--line-d)}
.page-light .stats,.light-scope .stats{border-color:var(--line-l)}
.stat{padding:clamp(26px,3.5vw,48px);border-right:1px solid var(--line-d);border-bottom:1px solid var(--line-d)}
.light-scope .stat{border-color:var(--line-l)}
.stat .num{font-family:var(--display);font-weight:300;font-size:clamp(2.6rem,4.6vw,4.2rem);line-height:1}
.stat .num sup{font-size:.45em;vertical-align:.6em}
.stat .lab{font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--slate);margin-top:14px}

/* ============================================================
   generic two-col feature
   ============================================================ */
.feature{display:grid;gap:clamp(36px,5vw,80px);align-items:center}
@media(min-width:980px){.feature{grid-template-columns:1fr 1fr}.feature.flip>.f-media{order:2}}
.f-media{position:relative;overflow:hidden}
.f-media img{width:100%;height:auto;object-fit:cover}
.f-copy{display:grid;gap:24px;max-width:560px}
.f-copy .list{display:grid;gap:0;border-top:1px solid var(--line-d)}
.page-light .f-copy .list{border-color:var(--line-l)}
.f-copy .list li{display:flex;gap:18px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line-d)}
.page-light .f-copy .list li{border-color:var(--line-l)}
.f-copy .list .no{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--slate);flex:none}

/* ============================================================
   values (light)
   ============================================================ */
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));border-left:1px solid var(--line-l);border-top:1px solid var(--line-l)}
.value{padding:clamp(30px,3.6vw,54px);border-right:1px solid var(--line-l);border-bottom:1px solid var(--line-l);display:grid;gap:16px;align-content:start;position:relative;background:transparent;transition:background .5s var(--ease)}
.value:hover{background:rgba(22,24,26,.025)}
.value .v-no{font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--slate)}
.value h3{font-family:var(--display);font-weight:400;font-size:1.55rem}
.value .v-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--slate)}
.value p{color:var(--graphite);font-size:.98rem}
.value .v-dim{margin-top:8px;height:30px}
.value .v-dim svg{width:100%;height:100%;overflow:visible}
.value .v-dim line,.value .v-dim path{stroke:var(--concrete);stroke-width:1}
.value .v-dim text{font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;fill:var(--slate)}

/* ============================================================
   method timeline
   ============================================================ */
.steps{position:relative;display:grid;gap:0;border-top:1px solid var(--line-d)}
.page-light .steps{border-color:var(--line-l)}
.step{display:grid;grid-template-columns:84px 1fr;gap:clamp(18px,3vw,44px);padding:clamp(26px,3.4vw,42px) 0;border-bottom:1px solid var(--line-d);align-items:start}
.page-light .step{border-color:var(--line-l)}
@media(min-width:880px){.step{grid-template-columns:110px minmax(0,380px) 1fr}}
.step .s-no{font-family:var(--display);font-weight:300;font-size:clamp(1.8rem,3vw,2.6rem);color:var(--slate);line-height:1}
.step h3{font-family:var(--display);font-weight:400;font-size:clamp(1.25rem,1.9vw,1.6rem);line-height:1.25}
.step p{color:var(--concrete);max-width:54ch}
.page-light .step p{color:var(--graphite)}
.step .s-tag{font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--slate);margin-top:8px}

/* programme bar */
.prog{display:grid;gap:10px}
.prog-row{display:grid;grid-template-columns:minmax(120px,220px) 1fr;gap:18px;align-items:center}
.prog-row .p-lab{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--concrete)}
.prog-row .p-track{position:relative;height:26px;background:rgba(244,244,241,.04)}
.prog-row .p-bar{position:absolute;top:8px;bottom:8px;background:var(--concrete);opacity:.55;transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease-io)}
.prog-row .p-bar.crit{background:var(--brass);opacity:1}
.prog.in .p-bar{transform:scaleX(1)}
.prog-weeks{display:grid;grid-template-columns:minmax(120px,220px) 1fr;gap:18px}
.prog-weeks .w-row{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--slate);border-top:1px solid var(--line-d);padding-top:8px}

/* ============================================================
   sectors — services page
   ============================================================ */
.sector{display:grid;gap:clamp(30px,4vw,70px);padding:clamp(60px,8vh,110px) 0;border-top:1px solid var(--line-d);align-items:center}
@media(min-width:980px){.sector{grid-template-columns:1fr 1fr}.sector.flip .sec-media{order:2}}
.sec-media{overflow:hidden;position:relative}
.sec-media img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:saturate(.94)}
.sec-media .sec-idx{position:absolute;top:18px;left:18px;font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--pearl);background:rgba(22,24,26,.55);padding:8px 13px}
.sec-copy{display:grid;gap:18px;max-width:560px}
.sec-copy h3{font-family:var(--display);font-weight:300;font-size:clamp(1.7rem,3vw,2.5rem)}
.sec-copy .sec-line{color:var(--concrete)}
.sec-copy .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.chips span{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--concrete);border:1px solid var(--line-d);padding:8px 12px}
.page-light .chips span{color:var(--slate);border-color:var(--line-l)}

/* discipline ledger (services scope) */
.ledger{border-top:1px solid var(--line-d)}
.ledger-row{
  display:grid;grid-template-columns:64px 1fr;gap:18px;align-items:baseline;
  padding:clamp(20px,2.6vw,30px) 0;border-bottom:1px solid var(--line-d);
  transition:padding-left .4s var(--ease);position:relative;
}
@media(min-width:880px){.ledger-row{grid-template-columns:90px minmax(0,420px) 1fr}}
.ledger-row:hover{padding-left:10px}
.ledger-row .l-no{font-family:var(--mono);font-size:10.5px;letter-spacing:.25em;color:var(--slate)}
.ledger-row h3{font-family:var(--display);font-weight:300;font-size:clamp(1.35rem,2.4vw,2rem)}
.ledger-row p{color:var(--concrete);font-size:.97rem;max-width:58ch}

/* ============================================================
   standards page bits
   ============================================================ */
.gates{display:grid;gap:1px;background:var(--line-d);border:1px solid var(--line-d)}
@media(min-width:880px){.gates{grid-template-columns:repeat(3,1fr)}}
.gate{background:var(--onyx);padding:clamp(28px,3.4vw,48px);display:grid;gap:16px;align-content:start}
.gate .g-no{font-family:var(--display);font-weight:300;font-size:3rem;color:var(--slate);line-height:1}
.gate h3{font-family:var(--display);font-weight:400;font-size:1.35rem}
.gate .g-tag{font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--concrete)}
.gate p{color:var(--concrete);font-size:.96rem}

.phases{display:grid;gap:clamp(20px,3vw,30px)}
@media(min-width:880px){.phases{grid-template-columns:repeat(4,1fr)}}
.phase{border:1px solid var(--line-d);padding:clamp(22px,2.6vw,34px);display:grid;gap:14px;align-content:start}
.phase .ph-key{font-family:var(--display);font-weight:300;font-size:2rem;color:var(--slate)}
.phase h3{font-family:var(--mono);font-size:10.5px;letter-spacing:.3em;text-transform:uppercase}
.phase ol{display:grid;gap:8px;counter-reset:st}
.phase ol li{display:flex;gap:12px;font-size:.93rem;color:var(--concrete);align-items:baseline}
.phase ol li .n{font-family:var(--mono);font-size:9px;color:var(--slate);flex:none}

.ppe{display:flex;flex-wrap:wrap;gap:10px}
.ppe span{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--line-d);color:var(--concrete);padding:10px 16px}

/* ============================================================
   forms
   ============================================================ */
.form{display:grid;gap:26px}
.f-grid{display:grid;gap:26px}
@media(min-width:760px){.f-grid{grid-template-columns:1fr 1fr}}
.f-field{display:grid;gap:10px}
.f-field label{font-family:var(--mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--slate)}
.f-field input,.f-field textarea,.f-field select{
  font-family:var(--body);font-weight:300;font-size:1rem;color:inherit;
  background:transparent;border:0;border-bottom:1px solid var(--line-l);
  padding:12px 2px;border-radius:0;transition:border-color .35s;
}
.on-dark .f-field input,.on-dark .f-field textarea{border-color:var(--line-d)}
.f-field input:focus,.f-field textarea:focus{outline:none;border-color:var(--brass)}
.f-field textarea{min-height:120px;resize:vertical}
.form-note{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--slate);text-transform:uppercase}
.form-status{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;min-height:1.4em}
.form-status.ok{color:var(--brass)}
.form-status.err{color:#a3543e}

/* ---- start-a-project wizard ---- */
.wiz{position:relative}
.wiz-steps{position:relative}
.wiz-step{display:none;animation:wizIn .6s var(--ease) both}
.wiz-step.on{display:grid;gap:30px}
@keyframes wizIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.wiz-q{font-family:var(--display);font-weight:300;font-size:clamp(1.7rem,3.4vw,2.8rem);line-height:1.15;max-width:20ch}
.wiz-opts{display:grid;gap:14px}
@media(min-width:760px){.wiz-opts{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}}
.wiz-opt{
  border:1px solid var(--line-d);padding:22px 24px;text-align:left;display:grid;gap:8px;
  transition:border-color .3s,background .3s;position:relative;
}
.wiz-opt:hover{border-color:var(--concrete)}
.wiz-opt.sel{border-color:var(--brass)}
.wiz-opt .o-no{font-family:var(--mono);font-size:9.5px;letter-spacing:.25em;color:var(--slate);text-transform:uppercase}
.wiz-opt .o-lab{font-family:var(--display);font-weight:400;font-size:1.15rem}
.wiz-opt .o-sub{font-size:.88rem;color:var(--concrete)}
.wiz-nav{display:flex;justify-content:space-between;align-items:center;margin-top:34px;gap:18px}
.wiz-back{font-family:var(--mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--slate);transition:color .3s}
.wiz-back:hover{color:var(--pearl)}
.wiz-meter{display:flex;align-items:center;gap:14px;margin-bottom:46px}
.wiz-meter .m-track{flex:1;height:1px;background:var(--line-d);position:relative}
.wiz-meter .m-track i{position:absolute;inset:0 auto 0 0;width:0%;background:var(--brass);transition:width .6s var(--ease-io)}
.wiz-meter .mono-label{color:var(--slate)}
.wiz-review{display:grid;gap:0;border-top:1px solid var(--line-d)}
.wiz-review .r-row{display:flex;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid var(--line-d);font-size:.95rem}
.wiz-review .r-row .k{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--slate);padding-top:4px}

/* ============================================================
   coming soon band / cta band
   ============================================================ */
.band{position:relative;overflow:hidden;padding:clamp(90px,14vh,170px) 0;text-align:center}
.band .band-inner{display:grid;gap:24px;justify-items:center;position:relative;z-index:2}
.band .ar-wm{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;opacity:.5}
.band-dark{background:var(--onyx-2)}

/* ============================================================
   footer
   ============================================================ */
.footer{background:var(--onyx);color:var(--pearl);position:relative;overflow:hidden;border-top:1px solid var(--line-d)}
.footer .ft-close{padding:clamp(80px,12vh,150px) 0 clamp(50px,7vh,80px);display:grid;gap:26px}
.footer .ft-close .l-en{font-family:var(--display);font-weight:300;font-size:clamp(2rem,4.6vw,3.8rem);line-height:1.1;max-width:18ch}
.footer .ft-close .l-ar{font-family:var(--ar-display);font-size:clamp(1.5rem,3.4vw,2.6rem);color:var(--concrete);direction:rtl;text-align:left}
.footer .ft-grid{display:grid;gap:40px;padding:clamp(40px,6vh,60px) 0;border-top:1px solid var(--line-d)}
@media(min-width:880px){.footer .ft-grid{grid-template-columns:2fr 1fr 1fr 1fr}}
.footer h4{font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--slate);margin-bottom:18px}
.footer .ft-grid a,.footer .ft-grid p{color:var(--concrete);font-size:.95rem;line-height:2.1;display:block;transition:color .3s}
.footer .ft-grid a:hover{color:var(--pearl)}
.footer .ft-brand img{height:22px;margin-bottom:22px}
.footer .ft-brand .sig{font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--slate);line-height:2}
.footer .ft-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;padding:26px 0 34px;border-top:1px solid var(--line-d);font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--slate)}
.footer .ft-wm{position:absolute;right:-4%;bottom:-6%;width:min(420px,52vw);opacity:.5;pointer-events:none;z-index:0}
.footer>.wrap{position:relative;z-index:1}

/* ============================================================
   misc / responsive / a11y
   ============================================================ */
/* dark band inside a light page — restore dark hairlines */
.page-light .stat{border-color:var(--line-l)}
.dk .f-copy .list,.dk .f-copy .list li{border-color:var(--line-d)}
.page-light .dk .stats,.page-light .dk .stat{border-color:var(--line-d)}
.dk .steps,.dk .step{border-color:var(--line-d)}
.dk .chips span{color:var(--concrete);border-color:var(--line-d)}
.dk .step p{color:var(--concrete)}

.skip{position:absolute;left:-9999px;top:0;z-index:3000;background:var(--pearl);color:var(--onyx);padding:12px 20px;font-family:var(--mono);font-size:11px;letter-spacing:.2em}
.skip:focus{left:0}
.divider{height:1px;background:var(--line-d);border:0}
.page-light .divider{background:var(--line-l)}

@media(max-width:880px){
  .nav-links,.nav .nav-cta{display:none}
  .burger{display:flex}
  .film-rail{right:var(--pad);max-width:none}
  .film-meter{display:none}
  .hero-foot{flex-direction:column;align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .rv,.rv-img img,.rv-line{opacity:1!important;transform:none!important}
  .draw path,.draw line,.draw polyline{stroke-dashoffset:0!important}
  .kenburns img{animation:none}
  .veil{display:none}
  .hero-logo{display:none}
  .nav .nav-brand{opacity:1!important}
  .film-track{height:auto!important}
  .film-stage{position:relative;height:auto}
  .plate{position:relative;opacity:1;height:60vh}
  .film-act{position:relative;opacity:1;transform:none;margin-bottom:30px}
  .film-final{position:relative;opacity:1;pointer-events:auto;background:var(--onyx);padding:60px 0}
  .wipe{display:none}
  .prog .p-bar{transform:none!important}
}