/* Bishop — site design system. Dark ink + signal gold. RTL-first (Bootstrap RTL/LTR switched per locale). */
:root{
  --gold:#ffcc00; --gold-2:#ffdf5e; --gold-d:#c9a100;
  --ink:#07070b; --ink-2:#0e0f16; --ink-3:#161823; --line:rgba(255,255,255,.09);
  --paper:#f6f5f1; --white:#fff; --text:#1a1b22; --muted:#6b6e7c;
  --radius:1.25rem; --shadow:0 20px 50px -20px rgba(7,7,11,.35);
  --font:'Tajawal','Raleway',system-ui,sans-serif;
}
.lang-en{--font:'Raleway','Tajawal',system-ui,sans-serif}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--text);background:var(--paper);font-size:1.05rem;line-height:1.8;overflow-x:hidden}
h1,h2,h3,h4,h5{font-weight:800;line-height:1.25;letter-spacing:-.01em}
a{color:inherit}
img{max-width:100%}
.hl{color:var(--gold);position:relative}
.muted{color:#a2a5b5}

/* Buttons */
.btn{border-radius:999px;font-weight:700;padding:.65rem 1.5rem;transition:.25s}
.btn-gold{background:var(--gold);color:#111;border:0;box-shadow:0 8px 24px -8px rgba(255,204,0,.6)}
.btn-gold:hover{background:var(--gold-2);color:#000;transform:translateY(-2px)}
.btn-ghost{border:1.5px solid rgba(255,255,255,.35);color:#fff}
.btn-ghost:hover{background:#fff;color:#111}
.btn-dark-o{border:1.5px solid var(--ink);color:var(--ink)}
.btn-dark-o:hover{background:var(--ink);color:#fff}

/* Header */
.nav-wrap{position:fixed;inset:0 0 auto 0;z-index:100;transition:.3s;padding:.5rem 0}
.nav-wrap.scrolled{background:rgba(7,7,11,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding:0}
.navbar-brand img{display:block}
.wordmark{display:inline-flex;align-items:center;gap:.5rem;font-family:'Raleway',sans-serif;font-weight:800;letter-spacing:.22em;font-size:1.25rem;color:#fff}
.wordmark i{width:14px;height:14px;background:var(--gold);border-radius:4px;transform:rotate(45deg);display:inline-block}
.navbar .nav-link{color:#d8d9e2;font-weight:500;padding:.5rem 1rem!important;position:relative}
.navbar .nav-link:hover,.navbar .nav-link.active{color:var(--gold)}
.navbar-toggler{border:1px solid var(--line);color:#fff;font-size:1.6rem;padding:.1rem .5rem}
.navbar-toggler:focus{box-shadow:none}
.lang-switch{color:#fff;text-decoration:none;font-weight:700;padding:.4rem .9rem;border:1px solid var(--line);border-radius:999px;font-size:.9rem}
.lang-switch:hover{border-color:var(--gold);color:var(--gold)}
@media(max-width:991px){.nav-wrap{background:rgba(7,7,11,.95)}.navbar-collapse{padding:1rem 0}}

/* Hero */
.hero{position:relative;background:var(--ink);color:#fff;padding:11rem 0 7rem;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:radial-gradient(60rem 30rem at 85% -10%,rgba(255,204,0,.22),transparent 60%),radial-gradient(40rem 30rem at 0% 100%,rgba(90,80,255,.18),transparent 60%)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse at 50% 30%,#000 20%,transparent 75%)}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-weight:700;font-size:.9rem;color:var(--gold);padding:.35rem 1rem;border:1px solid rgba(255,204,0,.35);border-radius:999px;background:rgba(255,204,0,.06)}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(255,204,0,.25)}
.hero h1{font-size:clamp(2.4rem,5.6vw,4.6rem);font-weight:900;margin:1.5rem 0 1.25rem;max-width:16ch}
.hero p.lead{color:#b9bccb;max-width:46ch;font-size:1.2rem}
.hero-art{position:relative;aspect-ratio:1/1;max-width:520px;margin-inline:auto}
.hero-art .orb{position:absolute;inset:8%;border-radius:50%;background:conic-gradient(from 90deg,var(--gold),#7a5cff,#00d1ff,var(--gold));filter:blur(40px);opacity:.35;animation:spin 18s linear infinite}
.hero-art .card-float{position:absolute;background:rgba(255,255,255,.06);border:1px solid var(--line);backdrop-filter:blur(16px);border-radius:1.1rem;padding:1rem 1.25rem;color:#fff;display:flex;gap:.8rem;align-items:center;box-shadow:var(--shadow);animation:float 6s ease-in-out infinite}
.hero-art .card-float i{font-size:1.5rem;color:var(--gold)}
.hero-art .card-float b{display:block;font-size:1.4rem;line-height:1}
.hero-art .card-float small{color:#a2a5b5}
.hero-art .c1{top:8%;inset-inline-start:0}.hero-art .c2{top:42%;inset-inline-end:0;animation-delay:-2s}.hero-art .c3{bottom:6%;inset-inline-start:12%;animation-delay:-4s}
.hero-art img.main{position:absolute;inset:10%;width:80%;height:80%;object-fit:cover;border-radius:2rem;border:1px solid var(--line)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float{50%{transform:translateY(-14px)}}

/* Marquee */
.marquee{background:var(--ink-2);border-block:1px solid var(--line);padding:1.6rem 0;overflow:hidden;direction:ltr}
.marquee-track{display:flex;gap:4rem;width:max-content;animation:marq 40s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee img{height:44px;width:auto;object-fit:contain;filter:grayscale(1) brightness(1.6);opacity:.6;transition:.3s}
.marquee img:hover{filter:none;opacity:1}
@keyframes marq{to{transform:translateX(-50%)}}

/* Sections */
.section{padding:6.5rem 0}
.section.dark{background:var(--ink);color:#fff}
.section.dark .sec-lead{color:#a2a5b5}
.sec-head{max-width:46rem;margin-bottom:3.5rem}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-kicker{color:var(--gold-d);font-weight:800;font-size:.95rem;letter-spacing:.04em;display:flex;gap:.6rem;align-items:center;margin-bottom:.8rem}
.dark .sec-kicker{color:var(--gold)}
.center .sec-kicker{justify-content:center}
.sec-kicker::before{content:"";width:28px;height:2px;background:currentColor}
.sec-head h2{font-size:clamp(1.9rem,3.6vw,3rem)}
.sec-lead{color:var(--muted);font-size:1.12rem}

/* Stats */
.stats{margin-top:-4rem;position:relative;z-index:5}
.stats-box{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:2rem 1rem}
.stat-i{text-align:center;padding:.5rem}
.stat-i b{display:block;font-size:clamp(2rem,4vw,3rem);font-weight:900;line-height:1.1}
.stat-i b::after{content:"+";color:var(--gold-d)}
.stat-i span{color:var(--muted);font-weight:500}
@media(min-width:768px){.stat-i+.stat-i{border-inline-start:1px solid #ececec}}

/* Services bento */
.svc-card{position:relative;display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid #ececec;border-radius:var(--radius);padding:2rem;text-decoration:none;transition:.35s;overflow:hidden}
.svc-card::after{content:"";position:absolute;inset-inline-end:-40px;top:-40px;width:140px;height:140px;border-radius:50%;background:radial-gradient(var(--gold),transparent 70%);opacity:0;transition:.4s}
.svc-card:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:var(--gold)}
.svc-card:hover::after{opacity:.5}
.svc-ico{width:62px;height:62px;border-radius:1rem;background:var(--ink);color:var(--gold);display:grid;place-items:center;font-size:1.6rem;margin-bottom:1.4rem}
.svc-card h3{font-size:1.3rem}
.svc-card p{color:var(--muted);margin:0 0 1.2rem}
.svc-card .more{margin-top:auto;font-weight:800;display:inline-flex;gap:.5rem;align-items:center}
.svc-card .num{position:absolute;inset-inline-end:1.5rem;top:1.2rem;font-weight:900;font-size:2.6rem;color:#f0efe9;line-height:1}

/* About split */
.split-art{position:relative;border-radius:2rem;background:var(--ink);aspect-ratio:5/4;overflow:hidden;display:grid;place-items:center}
.split-art::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(255,204,0,.35),transparent 55%),radial-gradient(circle at 80% 90%,rgba(122,92,255,.35),transparent 55%)}
.split-art img{position:relative;width:100%;height:100%;object-fit:cover}
.split-art .badge-exp{position:absolute;inset-inline-start:1.5rem;bottom:1.5rem;background:var(--gold);color:#111;border-radius:1.2rem;padding:1rem 1.4rem;font-weight:800;line-height:1.1;z-index:2}
.split-art .badge-exp b{font-size:2.4rem;display:block}
.checks{list-style:none;padding:0;margin:1.5rem 0}
.checks li{display:flex;gap:.7rem;padding:.35rem 0;font-weight:500}
.checks i{color:var(--gold-d);font-size:1.2rem}

/* Project cards */
.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:2.5rem}
.filters a{padding:.45rem 1.1rem;border-radius:999px;border:1px solid #dcdad2;text-decoration:none;font-weight:600;font-size:.95rem;background:#fff}
.filters a.on,.filters a:hover{background:var(--ink);color:var(--gold);border-color:var(--ink)}
.proj{position:relative;display:block;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;background:var(--ink-3);text-decoration:none;color:#fff;isolation:isolate}
.proj img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s}
.proj::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(7,7,11,.92));z-index:1}
.proj:hover img{transform:scale(1.08)}
.proj .meta{position:absolute;inset-inline:0;bottom:0;padding:1.4rem;z-index:2;transform:translateY(8px);transition:.35s}
.proj:hover .meta{transform:none}
.proj .tag{font-size:.78rem;font-weight:700;color:var(--gold);letter-spacing:.04em}
.proj h3{font-size:1.2rem;margin:.2rem 0 0;color:#fff}
.proj .go{position:absolute;top:1rem;inset-inline-end:1rem;z-index:2;width:42px;height:42px;border-radius:50%;background:var(--gold);color:#111;display:grid;place-items:center;opacity:0;transform:scale(.6);transition:.3s}
.proj:hover .go{opacity:1;transform:none}
.proj.noimg{display:grid;place-items:center;font-size:2rem}

/* Why */
.why{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);padding:2.2rem;height:100%;transition:.3s}
.why:hover{border-color:rgba(255,204,0,.5);transform:translateY(-6px)}
.why .n{font-size:3rem;font-weight:900;color:transparent;-webkit-text-stroke:1.5px var(--gold);line-height:1}
.why h3{font-size:1.3rem;margin:1rem 0 .5rem;color:#fff}
.why p{color:#a2a5b5;margin:0}

/* Posts */
.post-card{display:flex;flex-direction:column;height:100%;background:#fff;border-radius:var(--radius);overflow:hidden;border:1px solid #ececec;text-decoration:none;transition:.3s}
.post-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.post-card .thumb{aspect-ratio:16/10;background:linear-gradient(135deg,var(--ink),var(--ink-3));overflow:hidden;display:grid;place-items:center;color:var(--gold);font-size:2.4rem}
.post-card .thumb img{width:100%;height:100%;object-fit:cover;transition:.6s}
.post-card:hover .thumb img{transform:scale(1.06)}
.post-card .body{padding:1.4rem;display:flex;flex-direction:column;flex:1}
.post-card .cat{color:var(--gold-d);font-weight:800;font-size:.82rem}
.post-card h3{font-size:1.15rem;margin:.4rem 0 .6rem}
.post-card p{color:var(--muted);font-size:.97rem}
.post-card time{margin-top:auto;color:#9a9caa;font-size:.88rem}

/* Team */
.member{text-align:center}
.member .ph{aspect-ratio:1;border-radius:var(--radius);overflow:hidden;background:var(--ink-3);margin-bottom:1rem;position:relative}
.member .ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(.4);transition:.5s}
.member:hover .ph img{filter:none;transform:scale(1.05)}
.member .ph .ini{position:absolute;inset:0;display:grid;place-items:center;font-size:3rem;font-weight:900;color:var(--gold)}
.member h3{font-size:1.1rem;margin:0}
.member span{color:var(--muted);font-size:.95rem}

/* CTA + forms */
.cta{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(40rem 24rem at 100% 0,rgba(255,204,0,.2),transparent 60%)}
.cta .container{position:relative}
.form-panel{background:#fff;color:var(--text);border-radius:1.6rem;padding:2rem;box-shadow:var(--shadow)}
.form-tabs .nav-link{border-radius:999px;color:var(--text);font-weight:700;background:#f1f0ea;margin-inline-end:.4rem}
.form-tabs .nav-link.active{background:var(--ink);color:var(--gold)}
.form-control,.form-select{border-radius:.9rem;border:1.5px solid #e5e3da;padding:.8rem 1rem;background-color:#fbfaf7}
.form-control:focus,.form-select:focus{border-color:var(--gold);box-shadow:0 0 0 .2rem rgba(255,204,0,.25);background:#fff}
.form-msg{font-weight:700}.form-msg.ok{color:#0a8a4a}.form-msg.err{color:#c0392b}

/* Page head */
.page-head{background:var(--ink);color:#fff;padding:9.5rem 0 4.5rem;position:relative;overflow:hidden}
.page-head::before{content:"";position:absolute;inset:0;background:radial-gradient(40rem 20rem at 90% 0,rgba(255,204,0,.2),transparent 60%)}
.page-head::after{content:"";position:absolute;inset:0;opacity:.35;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent)}
.page-head .container{position:relative;z-index:1}
.page-head h1{font-size:clamp(2rem,4.5vw,3.5rem);font-weight:900;max-width:22ch}
.page-head .lead{color:#b9bccb;max-width:50ch}
.crumbs{display:flex;gap:.5rem;align-items:center;font-size:.9rem;color:#a2a5b5;margin-bottom:1rem;flex-wrap:wrap}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--gold)}.crumbs i{font-size:.7rem}

/* Article / prose */
.prose{font-size:1.1rem;line-height:2}
.prose h2,.prose h3{margin:2.2rem 0 1rem}
.prose img{height:auto;border-radius:1rem;margin:1.2rem 0}
.prose a{color:var(--gold-d);font-weight:600}
.prose blockquote{border-inline-start:4px solid var(--gold);background:#fff;padding:1rem 1.4rem;border-radius:.8rem}
.prose table{width:100%;margin:1.5rem 0}.prose td,.prose th{border:1px solid #e5e3da;padding:.6rem}
.side-card{background:#fff;border:1px solid #ececec;border-radius:var(--radius);padding:1.6rem}
.side-card.dark{background:var(--ink);color:#fff;border:0}
.cover{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.cover img{width:100%;display:block}
.pagination{--bs-pagination-active-bg:var(--ink);--bs-pagination-active-border-color:var(--ink);--bs-pagination-color:var(--ink);--bs-pagination-active-color:var(--gold);gap:.25rem}
.page-link{border-radius:.7rem!important}

/* Contact / jobs */
.info-card{display:flex;gap:1rem;background:#fff;border:1px solid #ececec;border-radius:var(--radius);padding:1.4rem;height:100%}
.info-card i{width:52px;height:52px;flex:none;border-radius:1rem;background:var(--ink);color:var(--gold);display:grid;place-items:center;font-size:1.4rem}
.info-card h3{font-size:1.05rem;margin:0 0 .2rem}.info-card p{margin:0;color:var(--muted)}
.job{display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;background:#fff;border:1px solid #ececec;border-radius:var(--radius);padding:1.5rem;text-decoration:none;transition:.3s}
.job:hover{border-color:var(--gold);transform:translateX(-4px)}
.lang-en .job:hover{transform:translateX(4px)}
.pill{display:inline-flex;gap:.4rem;align-items:center;background:#f1f0ea;border-radius:999px;padding:.2rem .8rem;font-size:.85rem;font-weight:600;margin-inline-end:.4rem}

/* Footer */
.site-footer{background:var(--ink);color:#d8d9e2;padding:5rem 0 1.5rem;border-top:1px solid var(--line)}
.site-footer h6{color:#fff;font-weight:800;margin-bottom:1.2rem}
.f-links li{margin-bottom:.55rem}.f-links a,.f-contact a{text-decoration:none;color:#a2a5b5}.f-links a:hover,.f-contact a:hover{color:var(--gold)}
.f-contact li{display:flex;gap:.7rem;margin-bottom:.8rem;color:#a2a5b5}.f-contact i{color:var(--gold)}
.socials{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.2rem}
.socials a{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;text-decoration:none;transition:.3s}
.socials a:hover{background:var(--gold);color:#111;border-color:var(--gold)}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;border-top:1px solid var(--line);margin-top:3.5rem;padding-top:1.5rem;color:#8b8e9e;font-size:.92rem}
.foot-bottom a{text-decoration:none;color:var(--gold)}
.wa-fab{position:fixed;inset-inline-start:1.2rem;bottom:1.2rem;z-index:90;width:56px;height:56px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;font-size:1.8rem;box-shadow:0 10px 30px -8px rgba(37,211,102,.7);text-decoration:none;animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.6)}70%{box-shadow:0 0 0 18px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* Reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
@media(max-width:767px){.section{padding:4.5rem 0}.hero{padding:8.5rem 0 5.5rem}.form-panel{padding:1.25rem}}

/* =====================================================================
   v2 — "Checkmate" brand layer: bishop piece, chessboard, motion
   ===================================================================== */
:root{--gold-grad:linear-gradient(110deg,#b98b00 0%,#ffcc00 28%,#fff3b0 50%,#ffcc00 72%,#b98b00 100%)}
body{background:#f3f2ed}
::selection{background:var(--gold);color:#000}
.bishop-mask{background:var(--gold-grad);background-size:250% 100%;animation:shine 6s linear infinite;
  -webkit-mask:var(--bp,url(/brand/bishop.png)) center/contain no-repeat;mask:var(--bp,url(/brand/bishop.png)) center/contain no-repeat}
@keyframes shine{to{background-position:-250% 0}}
.hl{background:var(--gold-grad);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 5s linear infinite;display:inline-block}

/* progress + loader + cursor */
#loader{position:fixed;inset:0;z-index:999;background:var(--ink);display:grid;place-items:center;transition:opacity .6s,visibility .6s;animation:loaderOut .01s 4s forwards}
#loader.done{opacity:0;visibility:hidden}
#loader .piece{width:76px;height:178px;position:relative}
#loader .piece::before,#loader .piece::after{content:"";position:absolute;inset:0;-webkit-mask:url(/brand/bishop.png) center/contain no-repeat;mask:url(/brand/bishop.png) center/contain no-repeat}
#loader .piece::before{background:rgba(255,255,255,.1)}
#loader .piece::after{background:var(--gold-grad);clip-path:inset(100% 0 0 0);animation:fillUp 1.1s cubic-bezier(.6,0,.2,1) forwards}
@keyframes fillUp{to{clip-path:inset(0)}}
@keyframes loaderOut{to{opacity:0;visibility:hidden}}
.cursor-glow{position:fixed;left:0;top:0;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle,rgba(255,204,0,.16),transparent 65%);opacity:0;transition:opacity .4s;mix-blend-mode:screen}
body.has-cursor .cursor-glow{opacity:1}
@media(hover:none){.cursor-glow{display:none}}

/* split text */
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.split .w>span{display:inline-block;transform:translateY(110%) rotate(4deg);opacity:0;transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .9s;transition-delay:calc(var(--i)*70ms)}
.split.in .w>span{transform:none;opacity:1}
.no-js .split .w>span{transform:none;opacity:1}

/* buttons shine */
.btn-gold{position:relative;overflow:hidden}
.btn-gold::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%);transform:translateX(-120%)}
.btn-gold:hover::after{transform:translateX(120%);transition:transform .8s}
[data-magnetic]{transition:transform .25s cubic-bezier(.2,.8,.2,1)}

/* header refinements */
.navbar-brand img{height:42px;width:auto}
.navbar .nav-link::after{content:"";position:absolute;inset-inline:1rem;bottom:.2rem;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:center;transition:.3s}
.navbar .nav-link:hover::after,.navbar .nav-link.active::after{transform:scaleX(1)}

/* ---------------- HERO ---------------- */
.hero{padding:9rem 0 0;min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.hero::before{background:radial-gradient(50rem 28rem at 78% 30%,rgba(255,204,0,.16),transparent 62%),radial-gradient(40rem 30rem at 0% 100%,rgba(122,92,255,.14),transparent 60%)}
.hero::after{display:none}
.hero .container{position:relative;z-index:3}
#dust{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.board-floor{position:absolute;inset-inline:-30%;bottom:-6%;height:48%;z-index:0;transform:perspective(520px) rotateX(64deg);transform-origin:50% 100%;
  background:conic-gradient(rgba(255,255,255,.07) 25%,transparent 0 50%,rgba(255,255,255,.07) 0 75%,transparent 0) 0 0/140px 140px;
  animation:floor 7s linear infinite;-webkit-mask-image:linear-gradient(0deg,#000 10%,transparent 85%);mask-image:linear-gradient(0deg,#000 10%,transparent 85%)}
@keyframes floor{to{background-position:0 140px}}
.hero h1{font-size:clamp(2.6rem,6vw,5.2rem);max-width:15ch;line-height:1.12}
.hero .lead{max-width:44ch}
.hero-stage{position:relative;max-width:560px;margin-inline:auto;aspect-ratio:1108/1140;transform-style:preserve-3d}
.hero-stage .photo{position:absolute;inset:0;background:url(/brand/hero-bishop-1100.webp) center/cover;border-radius:2rem;
  -webkit-mask-image:radial-gradient(ellipse 70% 72% at 50% 52%,#000 45%,transparent 100%);mask-image:radial-gradient(ellipse 70% 72% at 50% 52%,#000 45%,transparent 100%);
  filter:contrast(1.08) saturate(.9)}
.hero-stage .beam{position:absolute;left:50%;top:-6%;width:62%;height:70%;transform:translateX(-50%);background:linear-gradient(180deg,rgba(255,236,170,.55),transparent 85%);
  clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);mix-blend-mode:screen;animation:beam 5s ease-in-out infinite}
@keyframes beam{50%{opacity:.45}}
.hero-stage .gold-b{position:absolute;width:26%;aspect-ratio:513/1201;inset-inline-end:-4%;bottom:6%;animation:float 6s ease-in-out infinite;filter:drop-shadow(0 20px 30px rgba(255,204,0,.35))}
.hero-stage .ring{position:absolute;inset:-4%;border:1px dashed rgba(255,204,0,.28);border-radius:50%;animation:spin 40s linear infinite}
.hero-stage .ring::after{content:"";position:absolute;top:8%;left:50%;width:12px;height:12px;border-radius:3px;background:var(--gold);transform:rotate(45deg);box-shadow:0 0 18px var(--gold)}
.hero-stage .chip{position:absolute;z-index:4;background:rgba(14,15,22,.65);border:1px solid var(--line);backdrop-filter:blur(14px);border-radius:1rem;padding:.7rem 1rem;display:flex;gap:.7rem;align-items:center;color:#fff;box-shadow:var(--shadow);animation:float 6s ease-in-out infinite}
.chip i{color:var(--gold);font-size:1.3rem}.chip b{display:block;line-height:1;font-size:1.2rem}.chip small{color:#a2a5b5}
.chip.c1{top:10%;inset-inline-start:-4%}.chip.c2{top:46%;inset-inline-start:-10%;animation-delay:-2s}.chip.c3{bottom:12%;inset-inline-start:2%;animation-delay:-4s}
.hero-foot{position:relative;z-index:3;margin-top:3rem}
.scroll-cue{display:inline-flex;align-items:center;gap:.7rem;color:#a2a5b5;font-size:.9rem;text-decoration:none}
.scroll-cue i{width:26px;height:42px;border:1.5px solid rgba(255,255,255,.35);border-radius:14px;position:relative}
.scroll-cue i::after{content:"";position:absolute;top:8px;left:50%;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--gold);animation:cue 1.6s infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}
.checker-band{height:28px;background:conic-gradient(var(--gold) 25%,var(--ink) 0 50%,var(--gold) 0 75%,var(--ink) 0) 0 0/56px 56px;position:relative;z-index:3;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);opacity:.9;animation:band 12s linear infinite}
@keyframes band{to{background-position:56px 0}}
.hero-tag{display:flex;gap:2rem;flex-wrap:wrap;color:#8e91a3;font-size:.92rem}
.hero-tag span{display:inline-flex;gap:.5rem;align-items:center}.hero-tag i{color:var(--gold)}

/* ---------------- stats ---------------- */
.stats{margin-top:0;background:var(--ink);padding:3rem 0 5rem}
.stats-box{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid var(--line);box-shadow:none;color:#fff}
.stat-i b{background:var(--gold-grad);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite}
.stat-i b::after{color:inherit;-webkit-text-fill-color:transparent}
.stat-i span{color:#a2a5b5}
@media(min-width:768px){.stat-i+.stat-i{border-inline-start:1px solid var(--line)}}
.marquee{background:var(--ink)}

/* ---------------- services tiles ---------------- */
.svc-card{background:#fff;border:1px solid #e9e7df;isolation:isolate}
.svc-card::before{content:"";position:absolute;inset:-20% -40%;background:var(--gold);transform:translateX(-110%) skewX(-18deg);transition:transform .6s cubic-bezier(.2,.8,.2,1);z-index:-1}
.svc-card:hover::before{transform:translateX(0) skewX(-18deg)}
.svc-card::after{display:none}
.svc-card:hover{border-color:var(--gold);color:#000}
.svc-card:hover p{color:#2b2b2b}
.svc-card .svc-ico{transition:.5s}
.svc-card:hover .svc-ico{background:#000;transform:rotate(-8deg) scale(1.08)}
.svc-card .num{color:#f1efe7;transition:.4s}.svc-card:hover .num{color:rgba(0,0,0,.12)}

/* ---------------- Moves (strategy board) ---------------- */
.moves{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.moves::before{content:"";position:absolute;inset:0;background:radial-gradient(40rem 26rem at 20% 50%,rgba(255,204,0,.12),transparent 60%)}
.moves .container{position:relative}
.mboard{position:relative;width:min(100%,480px);aspect-ratio:1;margin-inline:auto;display:grid;grid-template:repeat(8,1fr)/repeat(8,1fr);border-radius:1.2rem;overflow:hidden;border:2px solid rgba(255,204,0,.45);box-shadow:0 30px 80px -20px rgba(255,204,0,.25);direction:ltr}
.mboard .sq{background:#14151d;transition:background .5s}
.mboard .sq.l{background:#1d1f2b}
.mboard .sq.trail{background:rgba(255,204,0,.28)}
.mboard .sq.hit{background:var(--gold);animation:hit .7s}
@keyframes hit{0%{box-shadow:inset 0 0 0 0 #fff}50%{box-shadow:inset 0 0 40px 10px #fff}}
.mpiece{position:absolute;width:12.5%;height:12.5%;left:calc(var(--x)*12.5%);top:calc(var(--y)*12.5%);transition:left 1s cubic-bezier(.6,0,.2,1),top 1s cubic-bezier(.6,0,.2,1);display:grid;place-items:center;pointer-events:none}
.mpiece i{display:block;width:62%;height:86%;background:var(--gold-grad);background-size:250% 100%;animation:shine 4s linear infinite;-webkit-mask:url(/brand/bishop.png) center/contain no-repeat;mask:url(/brand/bishop.png) center/contain no-repeat;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.mstep{display:flex;gap:1.2rem;padding:1.3rem 1.4rem;border:1px solid var(--line);border-radius:1.1rem;margin-bottom:.9rem;cursor:pointer;transition:.4s;background:rgba(255,255,255,.02)}
.mstep .n{flex:none;width:46px;height:46px;border-radius:12px;border:1.5px solid rgba(255,204,0,.5);display:grid;place-items:center;font-weight:900;color:var(--gold);transition:.4s}
.mstep h3{font-size:1.15rem;margin:0 0 .2rem;color:#fff}.mstep p{margin:0;color:#a2a5b5;font-size:.97rem}
.mstep .sqn{margin-inline-start:auto;font-family:'Raleway',monospace;color:#6f7285;font-weight:700;align-self:center}
.mstep.on{background:rgba(255,204,0,.08);border-color:var(--gold);transform:translateX(0)}
.mstep.on .n{background:var(--gold);color:#000}.mstep.on .sqn{color:var(--gold)}

/* ---------------- about stage ---------------- */
.split-art{background:#000;aspect-ratio:1108/1140;max-width:520px;margin-inline:auto;border-radius:2rem;border:1px solid rgba(255,204,0,.35)}
.split-art::before{display:none}
.split-art .ph{position:absolute;inset:0;background:url(/brand/hero-bishop-1100.webp) center/cover;transition:transform 1.2s}
.split-art:hover .ph{transform:scale(1.06)}
.split-art .badge-exp{animation:float 6s ease-in-out infinite}

/* ---------------- projects: tilt cards ---------------- */
.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out;will-change:transform}
.tilt.leaving{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.proj::before{content:"";position:absolute;inset:0;z-index:2;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.22),transparent 45%);opacity:0;transition:opacity .3s;pointer-events:none}
.proj:hover::before{opacity:1}
.proj{box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}

/* why */
.why{position:relative;overflow:hidden}
.why::after{content:"";position:absolute;inset-inline-end:-30px;bottom:-30px;width:130px;height:130px;background:var(--gold);opacity:.06;-webkit-mask:url(/brand/bishop.png) center/contain no-repeat;mask:url(/brand/bishop.png) center/contain no-repeat;transition:.5s}
.why:hover::after{opacity:.2;transform:translateY(-10px) rotate(-6deg)}

/* page head */
.page-head{padding:10rem 0 5rem}
.page-head::after{display:block;inset:auto 0 0 0;height:24px;opacity:.9;background:conic-gradient(var(--gold) 25%,var(--ink) 0 50%,var(--gold) 0 75%,var(--ink) 0) 0 0/48px 48px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);animation:band 14s linear infinite}
.page-head .wm{position:absolute;inset-inline-end:6%;top:50%;height:130%;aspect-ratio:513/1201;transform:translateY(-50%);opacity:.14;pointer-events:none;z-index:0}
.page-head .wm.b{animation:none}

/* footer */
.site-footer{position:relative;overflow:hidden}
.site-footer .big{font-family:'Raleway',sans-serif;font-weight:900;letter-spacing:.12em;font-size:clamp(4rem,17vw,15rem);line-height:.9;text-align:center;color:transparent;-webkit-text-stroke:1.5px rgba(255,204,0,.22);margin-top:3rem;direction:ltr;user-select:none}
.site-footer .container{position:relative;z-index:2}

/* reveal variants */
.reveal-l{opacity:0;transform:translateX(-40px);transition:.9s cubic-bezier(.2,.8,.2,1)}
.reveal-r{opacity:0;transform:translateX(40px);transition:.9s cubic-bezier(.2,.8,.2,1)}
.reveal-l.in,.reveal-r.in{opacity:1;transform:none}
.reveal{transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.reveal[data-d="1"]{transition-delay:.1s}.reveal[data-d="2"]{transition-delay:.2s}.reveal[data-d="3"]{transition-delay:.3s}
@media(max-width:991px){.hero{padding-top:7.5rem;min-height:auto}.hero-stage{max-width:380px;margin-top:2rem}.chip.c2{display:none}.page-head .wm{opacity:.08}}
@media(prefers-reduced-motion:reduce){#loader,#dust,.cursor-glow{display:none}}

/* v2 fixes */
.marquee-track{gap:1.5rem;align-items:center}
.marquee img{height:68px;width:auto;max-width:190px;padding:12px 20px;background:#fff;border-radius:14px;filter:none;opacity:.92;object-fit:contain}
.marquee img:hover{opacity:1;transform:translateY(-3px)}
.mboard .sq{background:#0f1018}.mboard .sq.l{background:#252839}
.mboard .sq.trail{background:rgba(255,204,0,.22)}
.mboard .sq.hit{background:rgba(255,204,0,.45);box-shadow:inset 0 0 0 2px var(--gold)}
@keyframes hit{0%{box-shadow:inset 0 0 0 0 #fff}50%{box-shadow:inset 0 0 30px 6px rgba(255,255,255,.8)}100%{box-shadow:inset 0 0 0 2px var(--gold)}}
@media(max-width:575px){.navbar-brand img{height:32px}.navbar.container{padding-inline:1rem}}

/* =====================================================================
   v3 — full dark theme, new loader, richer hero, extra sections
   ===================================================================== */
:root{color-scheme:dark;--surface:#0d0e15;--surface-2:#12131c;--bd:rgba(255,255,255,.09);--tx:#e6e7ee;--mut:#9a9db0}
body{background:var(--ink);color:var(--tx)}
h1,h2,h3,h4,h5,h6{color:#fff}
.sec-lead,.text-muted{color:var(--mut)!important}
.sec-kicker{color:var(--gold)}
.section.dark{background:var(--surface)}
.section:not(.dark):not(.cta):not(.moves){background:var(--ink)}
.svc-card,.post-card,.info-card,.job,.side-card,.stats-box,.why,.mstep,.faq .accordion-item{background:var(--surface);border-color:var(--bd);color:var(--tx)}
.svc-card h3,.post-card h3,.info-card h3,.job h3{color:#fff}
.svc-card p,.post-card p,.info-card p{color:var(--mut)}
.svc-card .num{color:rgba(255,255,255,.06)}
.svc-card:hover h3,.svc-card:hover .more,.svc-card:hover .num{color:#000}
.svc-card:hover p{color:#222}
.svc-card .svc-ico{background:#1a1c28;border:1px solid rgba(255,204,0,.3)}
.post-card:hover,.svc-card:hover{box-shadow:0 20px 60px -20px rgba(255,204,0,.25)}
.side-card.dark{background:linear-gradient(160deg,#1b1a10,#0d0e15);border:1px solid rgba(255,204,0,.25)}
.form-panel{background:var(--surface);color:var(--tx);border:1px solid var(--bd)}
.form-tabs .nav-link{background:#171925;color:#cfd1dc}
.form-tabs .nav-link.active{background:var(--gold);color:#000}
.form-control,.form-select{background-color:#12131c;border:1.5px solid #262938;color:#fff}
.form-control::placeholder{color:#6f7285}
.form-control:focus,.form-select:focus{background-color:#161823;color:#fff;border-color:var(--gold)}
.form-select option{background:#12131c;color:#fff}
.filters a{background:var(--surface);border-color:var(--bd);color:#dcdde6}
.pill{background:#1a1c27;color:#dcdde6}
.prose{color:#cfd1dc}.prose a{color:var(--gold)}
.prose blockquote{background:var(--surface);color:#e6e7ee}
.prose td,.prose th{border-color:#262938}
.cover{box-shadow:0 30px 70px -30px rgba(0,0,0,.9);border:1px solid var(--bd)}
.btn-dark-o{border:1.5px solid rgba(255,255,255,.3);color:#fff}
.btn-dark-o:hover{background:var(--gold);border-color:var(--gold);color:#000}
.btn-dark{background:#1a1c27;border-color:#262938}
.checks i{color:var(--gold)}
.member h3{color:#fff}.member span{color:var(--mut)}
.split-art .badge-exp{color:#000}
.stat-i span{color:var(--mut)}
.pagination{--bs-pagination-bg:var(--surface);--bs-pagination-border-color:var(--bd);--bs-pagination-color:#fff;--bs-pagination-hover-bg:#1a1c27;--bs-pagination-active-bg:var(--gold);--bs-pagination-active-color:#000;--bs-pagination-active-border-color:var(--gold);--bs-pagination-disabled-bg:var(--surface)}
.post-card .thumb,.proj{background:#161823}
.job:hover{border-color:var(--gold)}
hr{border-color:var(--bd);opacity:1}
.alert{border-radius:1rem}
section[id]{scroll-margin-top:80px}
/* subtle grid texture on plain sections */
.section:not(.dark):not(.cta):not(.moves){background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1px);background-size:28px 28px}

/* ---------------- new loader ---------------- */
#loader{background:transparent;animation:none;transition:visibility 0s 1.3s}
#loader.done{opacity:1;visibility:hidden}
#loader .half{position:absolute;left:0;right:0;height:50.2%;background:var(--ink);transition:transform 1s cubic-bezier(.77,0,.18,1) .25s;z-index:0}
#loader .half.t{top:0}#loader .half.b{bottom:0}
#loader.done .half.t{transform:translateY(-101%)}#loader.done .half.b{transform:translateY(101%)}
#loader .ld-sq{position:absolute;inset:0;display:grid;grid-template:repeat(6,1fr)/repeat(10,1fr);z-index:1;opacity:.9;pointer-events:none}
#loader .ld-sq i{opacity:0;animation:sqIn .8s calc(var(--d)*1ms) forwards}
#loader .ld-sq i.l{background:rgba(255,255,255,.035)}
@keyframes sqIn{to{opacity:1}}
#loader .core{position:relative;z-index:2;text-align:center;transition:opacity .35s,transform .5s}
#loader.done .core{opacity:0;transform:scale(.9)}
#loader .piece{margin-inline:auto;width:84px;height:196px;filter:drop-shadow(0 0 30px rgba(255,204,0,.35))}
#loader .piece::after{animation:none;clip-path:inset(calc(100% - var(--p,0%)) 0 0 0)}
#loader .ld-name{font-family:'Raleway',sans-serif;font-weight:800;letter-spacing:.5em;color:#fff;margin-top:1.4rem;font-size:1.1rem;padding-inline-start:.5em}
#loader .ld-bar{width:220px;height:3px;background:rgba(255,255,255,.12);margin:1.1rem auto .6rem;border-radius:3px;overflow:hidden}
#loader .ld-bar b{display:block;height:100%;width:var(--p,0%);background:var(--gold-grad);box-shadow:0 0 12px var(--gold)}
#loader .ld-pct{font-family:'Raleway',sans-serif;font-weight:700;color:var(--gold);font-size:.95rem;direction:ltr}
#loader .ld-pct::after{content:"%"}

/* ---------------- hero v3 ---------------- */
.hero{padding-top:8.5rem;padding-bottom:3rem}
.hero h1{font-size:clamp(2.5rem,5.6vw,5rem);max-width:none;line-height:1.15;margin-bottom:1.25rem}
.hero h1 .l1{display:block}
.hero h1 .typed{display:block;min-height:1.3em;white-space:nowrap}
.hero h1 .typed::after{content:"";display:inline-block;width:.06em;height:.9em;background:var(--gold);margin-inline-start:.12em;vertical-align:-.08em;animation:caret .8s steps(1) infinite;-webkit-text-fill-color:initial}
@keyframes caret{50%{opacity:0}}
.hero-stage{max-width:600px}
.hero-stage .photo{-webkit-mask-image:radial-gradient(ellipse 62% 66% at 50% 52%,#000 40%,transparent 100%);mask-image:radial-gradient(ellipse 62% 66% at 50% 52%,#000 40%,transparent 100%)}
.hero-stage .rot{position:absolute;inset:-9%;animation:spin 36s linear infinite;pointer-events:none;z-index:0}
.hero-stage .rot text{font-family:'Raleway',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.32em;fill:rgba(255,204,0,.55)}
.hero-stage .sq-float{position:absolute;width:26px;height:26px;border-radius:5px;border:1px solid rgba(255,204,0,.5);background:rgba(255,204,0,.08);animation:float 7s ease-in-out infinite}
.hero-stage .s1{top:6%;inset-inline-end:10%}.hero-stage .s2{bottom:18%;inset-inline-start:-2%;animation-delay:-3s;width:18px;height:18px}.hero-stage .s3{top:36%;inset-inline-end:-6%;animation-delay:-5s;width:14px;height:14px;background:var(--gold)}
.hero-scan{position:absolute;inset-inline:0;height:140px;top:-140px;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(255,204,0,.07),transparent);animation:scan 7s linear infinite}
@keyframes scan{to{transform:translateY(120vh)}}
.hero-mini{display:flex;gap:2.2rem;flex-wrap:wrap;margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.hero-mini div b{display:block;font-size:1.9rem;line-height:1;color:var(--gold);font-weight:900}
.hero-mini div span{color:var(--mut);font-size:.9rem}
.notation{position:absolute;inset-inline-start:1.5rem;bottom:1.2rem;font-family:'Raleway',monospace;font-size:.8rem;letter-spacing:.15em;color:rgba(255,255,255,.35);z-index:3;direction:ltr;display:none}
@media(min-width:1200px){.notation{display:block}}

/* ---------------- extra sections ---------------- */
.marquee.rev .marquee-track{animation-direction:reverse}
.chipmq{display:inline-flex;align-items:center;gap:.7rem;font-weight:800;font-size:1.35rem;color:rgba(255,255,255,.5);white-space:nowrap;letter-spacing:.02em;transition:.3s;font-family:'Raleway','Tajawal',sans-serif}
.chipmq i{color:var(--gold);font-size:1.5rem}.chipmq:hover{color:#fff}
.marquee.tech{padding:1.4rem 0;direction:ltr}
.marquee.tech .marquee-track{gap:3.2rem}

.team-strip .member{position:relative}
.team-strip .ph{border:1px solid var(--bd);transition:.4s}
.team-strip .member:hover .ph{border-color:var(--gold);box-shadow:0 20px 50px -20px rgba(255,204,0,.4)}
.team-strip .ph .ini{background:radial-gradient(circle at 50% 30%,#1d1e2b,#0d0e15)}

.office{position:relative;background:var(--surface);border:1px solid var(--bd);border-radius:var(--radius);padding:2rem;height:100%;overflow:hidden}
.office::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:34px 34px;opacity:.5;-webkit-mask-image:radial-gradient(circle at 100% 0,#000,transparent 70%);mask-image:radial-gradient(circle at 100% 0,#000,transparent 70%)}
.office>*{position:relative}
.office .pin{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;background:rgba(255,204,0,.12);color:var(--gold);position:relative;font-size:1.3rem;margin-bottom:1rem}
.office .pin::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--gold);animation:ping 2s infinite}
@keyframes ping{0%{transform:scale(1);opacity:.8}100%{transform:scale(2);opacity:0}}
.office h3{font-size:1.3rem}.office p{color:var(--mut);margin:0}

.mate{position:relative;overflow:hidden;text-align:center;background:var(--ink-2);padding:7rem 0}
.mate::before{content:"";position:absolute;inset:0;background:conic-gradient(rgba(255,255,255,.03) 25%,transparent 0 50%,rgba(255,255,255,.03) 0 75%,transparent 0) 0 0/90px 90px;-webkit-mask-image:radial-gradient(ellipse at center,#000,transparent 75%);mask-image:radial-gradient(ellipse at center,#000,transparent 75%)}
.mate .bg-b{position:absolute;height:130%;aspect-ratio:513/1201;inset-inline-start:6%;top:-15%;opacity:.12;transform:rotate(-8deg)}
.mate .bg-b.r{inset-inline-start:auto;inset-inline-end:6%;transform:scaleX(-1) rotate(-8deg)}
.mate h2{font-size:clamp(2.4rem,6vw,5rem);font-weight:900;position:relative}
.mate p{color:var(--mut);max-width:42ch;margin:1rem auto 2rem;position:relative}

.faq .accordion{--bs-accordion-bg:transparent;--bs-accordion-border-color:var(--bd);--bs-accordion-btn-color:#fff;--bs-accordion-active-bg:rgba(255,204,0,.07);--bs-accordion-active-color:var(--gold);--bs-accordion-btn-focus-box-shadow:none;--bs-accordion-color:var(--mut)}
.faq .accordion-item{border-radius:1rem!important;margin-bottom:.8rem;overflow:hidden}
.faq .accordion-button{font-weight:700;font-size:1.08rem;padding:1.2rem 1.4rem;background:var(--surface)}
.faq .accordion-button:not(.collapsed){background:rgba(255,204,0,.07)}
.faq .accordion-body{background:var(--surface)}
@media(max-width:767px){.hero h1 .typed{white-space:normal}.hero-mini{gap:1.4rem}}

/* =====================================================================
   v4 — cinematic centred hero with a 3D chessboard
   ===================================================================== */
.hero2{position:relative;min-height:max(100vh,800px);background:radial-gradient(ellipse 80% 60% at 50% 0%,#1d1809 0%,var(--ink) 65%);overflow:hidden;isolation:isolate;display:flex;flex-direction:column;align-items:center;text-align:center;padding:8.2rem 0 0}
.hero2 #dust{z-index:1}
.h2-spot{position:absolute;top:0;left:50%;width:90%;height:100%;margin-left:-45%;z-index:0;pointer-events:none;transform-origin:50% 0;mix-blend-mode:screen;
  background:conic-gradient(from 180deg at 50% 0,transparent 158deg,rgba(255,226,140,.10) 172deg,rgba(255,226,140,.22) 180deg,rgba(255,226,140,.10) 188deg,transparent 202deg);animation:sway 10s ease-in-out infinite}
@keyframes sway{50%{transform:rotate(4deg)}0%,100%{transform:rotate(-4deg)}}
.h2-giant{position:absolute;left:50%;bottom:4%;height:96%;aspect-ratio:513/1201;margin-left:calc(-96vh*513/1201/2*0.01*100);transform:translateX(-50%);opacity:.13;z-index:0;filter:blur(.5px);animation:giant 9s ease-in-out infinite}
@keyframes giant{50%{opacity:.2}}
.h2-text{position:relative;z-index:3;max-width:960px}
.h2-text .eyebrow{margin-bottom:.4rem}
.hero2 h1{font-size:clamp(2.6rem,7.2vw,6.4rem);font-weight:900;line-height:1.1;margin:1rem 0 1.1rem;letter-spacing:-.02em}
.hero2 h1 .l1{display:block}
.hero2 h1 .typed{display:block;min-height:1.25em;white-space:nowrap;text-shadow:0 0 60px rgba(255,204,0,.25)}
.hero2 h1 .typed::after{content:"";display:inline-block;width:.06em;height:.85em;background:var(--gold);margin-inline-start:.14em;vertical-align:-.06em;animation:caret .8s steps(1) infinite;-webkit-text-fill-color:initial}
.hero2 .lead{color:#b9bccb;max-width:46ch;margin-inline:auto;font-size:1.18rem}

.h2-stage{position:absolute;inset-inline:0;bottom:0;height:47%;perspective:820px;perspective-origin:50% -10%;z-index:2;overflow:hidden;
  -webkit-mask-image:linear-gradient(0deg,#000 35%,transparent 98%);mask-image:linear-gradient(0deg,#000 35%,transparent 98%)}
.h2-board{position:absolute;left:50%;bottom:-14%;width:175%;aspect-ratio:2/1;margin-left:-87.5%;transform:rotateX(62deg);transform-origin:50% 100%;transform-style:preserve-3d;
  display:grid;grid-template:repeat(8,1fr)/repeat(16,1fr);direction:ltr;border:1px solid rgba(255,204,0,.25)}
.h2-board>.sq{background:rgba(255,255,255,.015);border:1px solid rgba(255,204,0,.07);transition:background 1.6s,box-shadow 1.6s}
.h2-board>.sq.l{background:rgba(255,255,255,.06)}
.h2-board>.sq:hover,.h2-board>.sq.lit{background:rgba(255,204,0,.5);box-shadow:inset 0 0 26px rgba(255,214,60,.9);transition-duration:.08s}
.h2-piece{position:absolute;width:6.25%;height:12.5%;left:calc(var(--x)*6.25%);top:calc(var(--y)*12.5%);transform-style:preserve-3d;pointer-events:none;transition:left 1.2s cubic-bezier(.6,0,.2,1),top 1.2s cubic-bezier(.6,0,.2,1)}
.h2-piece>i{position:absolute;left:50%;bottom:42%;height:250%;aspect-ratio:513/1201;transform:translateX(-50%) rotateX(-62deg);transform-origin:50% 100%;
  -webkit-mask:url(/brand/bishop.png) center/contain no-repeat;mask:url(/brand/bishop.png) center/contain no-repeat;background:var(--gold-grad);background-size:250% 100%;animation:shine 4s linear infinite}
.h2-piece>i::after{content:"";position:absolute;inset:0}
.h2-piece.dark>i{background:linear-gradient(90deg,#2d2e3b,#4a4b5e 45%,#1a1b24);animation:none;filter:drop-shadow(0 0 1px rgba(255,255,255,.5))}
.h2-piece.dark.s>i{height:200%}
.h2-piece.run>i{height:300%;filter:drop-shadow(0 0 22px rgba(255,204,0,.65))}
.h2-piece::before{content:"";position:absolute;left:10%;right:10%;bottom:30%;height:30%;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.75),transparent 70%)}
.h2-piece.run::before{background:radial-gradient(ellipse,rgba(255,204,0,.65),transparent 70%)}
.h2-cue{position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);z-index:4}
@media(max-width:991px){.hero2{padding-top:7rem;min-height:max(100vh,720px)}.h2-stage{height:40%}.h2-board{width:260%;margin-left:-130%}.hero2 h1 .typed{white-space:normal}.hero2 .lead{font-size:1.05rem}.h2-giant{opacity:.1}}
@media(max-width:575px){.h2-stage{height:34%}.h2-cue{display:none}}

/* softer page-head divider */
.page-head::after{height:16px;opacity:.4;background:conic-gradient(rgba(255,204,0,.55) 25%,transparent 0 50%,rgba(255,204,0,.55) 0 75%,transparent 0) 0 0/32px 32px}
.stats{padding-top:2.5rem}

/* v4.1 tuning */
.hero2 h1{font-size:clamp(2.3rem,5.4vw,4.7rem)}
.h2-text{max-width:1100px}
.h2-giant{inset-inline:0;margin-inline:auto;left:auto;margin-left:auto;transform:none;opacity:.11}
.h2-stage{height:52%;-webkit-mask-image:linear-gradient(0deg,#000 55%,transparent 99%);mask-image:linear-gradient(0deg,#000 55%,transparent 99%)}
.h2-board{bottom:-6%;transform:rotateX(58deg)}
@media(max-width:991px){.h2-stage{height:42%}}

/* old-site assets */
.svc-ico img{width:38px;height:38px;object-fit:contain}
.svc-card:hover .svc-ico img{filter:none}
.why-ico{position:absolute;inset-inline-end:1.6rem;top:1.6rem;width:54px;height:54px;object-fit:contain;opacity:.9}
.mate-pawns{position:absolute;inset:0;background:url(/brand/pawns.png) center/cover no-repeat;opacity:.45;-webkit-mask-image:radial-gradient(ellipse at 50% 55%,#000 25%,transparent 78%);mask-image:radial-gradient(ellipse at 50% 55%,#000 25%,transparent 78%);transform:scale(1.15);animation:zoomslow 20s ease-in-out infinite alternate}
@keyframes zoomslow{to{transform:scale(1.28)}}
.mate::before{z-index:0}.mate .container{z-index:2}
.cta-wires::before{background:linear-gradient(180deg,var(--ink),rgba(7,7,11,.55) 50%,var(--ink)),url(/brand/wires.jpg) center/cover!important;opacity:.55}
.pay{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;margin-top:3rem;padding:1rem 1.4rem;border:1px solid var(--line);border-radius:1rem;background:rgba(255,255,255,.02);color:var(--mut);font-size:.92rem}
.pay img{height:30px;max-width:100%;filter:grayscale(1) brightness(1.6);opacity:.75;transition:.3s}.pay:hover img{filter:none;opacity:1}
.h2-giant{left:0;right:0;inset-inline:0;margin-inline:auto}
.marquee img.on-dark{background:#242637;border:1px solid rgba(255,255,255,.08)}

/* ===== v4.2 hero tuning: text zone + board zone never overlap ===== */
.hero2{justify-content:flex-start;padding-bottom:0;min-height:100vh}
.h2-text{flex:none}
.h2-giant{height:70%;bottom:auto;top:12%;opacity:.045;filter:blur(1px)}
.hero2::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 60% 40% at 50% 100%,rgba(255,204,0,.14),transparent 70%)}
.h2-stage{position:relative;inset:auto;width:100%;height:clamp(300px,42vh,480px);margin-top:auto;flex:none;z-index:2;perspective:760px;perspective-origin:50% 0%;
  -webkit-mask-image:linear-gradient(0deg,#000 62%,transparent 100%);mask-image:linear-gradient(0deg,#000 62%,transparent 100%)}
.h2-board{width:150%;margin-left:-75%;bottom:-24%;transform:rotateX(60deg);border:1px solid rgba(255,204,0,.35);box-shadow:0 0 80px rgba(255,204,0,.12)}
.h2-board>.sq{border:1px solid rgba(255,204,0,.11);background:rgba(255,255,255,.012)}
.h2-board>.sq.l{background:rgba(255,255,255,.085)}
.h2-board>.sq:hover,.h2-board>.sq.lit{background:rgba(255,204,0,.62);box-shadow:inset 0 0 30px rgba(255,226,100,1),0 0 30px rgba(255,204,0,.5)}
.h2-piece.dark>i{background:linear-gradient(90deg,#3a3b4d,#6a6c85 45%,#232433);filter:drop-shadow(0 0 8px rgba(255,204,0,.28))}
.h2-piece.run>i{height:320%;filter:drop-shadow(0 0 26px rgba(255,204,0,.8))}
.h2-cue{display:none}
@media(max-width:991px){.h2-stage{height:clamp(240px,34vh,360px);margin-top:1.5rem}.h2-board{width:230%;margin-left:-115%;bottom:-18%}.h2-giant{opacity:.04}}

.h2-piece.run>i{height:250%}.h2-piece>i{height:215%}.h2-piece.dark.s>i{height:180%}
.h2-board{bottom:-16%}
#loader .ld-logo{display:block;height:64px;width:auto;margin:1.5rem auto 0;opacity:0;animation:ldLogo .8s .3s forwards}
@keyframes ldLogo{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ===== v4.3 hero fits the viewport height ===== */
.hero2{height:100vh;height:100svh;min-height:600px;padding-top:clamp(5.5rem,10vh,8rem)}
.hero2 h1{font-size:clamp(2.1rem,min(5.4vw,9.2vh),4.7rem);margin:.6rem 0 .6rem}
.hero2 h1 .typed{min-height:1.2em}
.hero2 .lead{font-size:clamp(1rem,2.2vh,1.15rem);max-width:58ch;line-height:1.7;margin-bottom:0}
.h2-text .eyebrow{font-size:clamp(.78rem,1.6vh,.9rem);padding:.25rem .9rem}
.h2-text .btn-lg{padding:clamp(.5rem,1.2vh,.75rem) 1.7rem;font-size:clamp(.95rem,2vh,1.1rem)}
.h2-text .d-flex{margin-top:clamp(.8rem,2.2vh,1.5rem)!important}
.h2-stage{height:auto;flex:1 1 0;min-height:200px;margin-top:0}
@media(max-width:991px){.hero2{height:auto;min-height:100svh}.h2-stage{flex:none;height:clamp(240px,34vh,360px);margin-top:1.5rem}}
/* v4.4 board geometry: more rows visible */
.h2-board{width:125%;margin-left:-62.5%;bottom:-4%;transform:rotateX(54deg)}
.h2-stage{-webkit-mask-image:linear-gradient(0deg,#000 70%,transparent 100%);mask-image:linear-gradient(0deg,#000 70%,transparent 100%)}
@media(max-width:991px){.h2-board{width:210%;margin-left:-105%;bottom:-6%}}



/* ===== v6: hero board is interactive ===== */
.h2-text{pointer-events:none}
.h2-text a,.h2-text .btn,.h2-text .eyebrow{pointer-events:auto}
.h2-board>.sq{cursor:pointer}
.h2-piece{transition:left .85s cubic-bezier(.65,0,.25,1),top .85s cubic-bezier(.65,0,.25,1)}
.h2-piece.run.hop>i{animation:hop3 .85s ease-in-out,shine 4s linear infinite}
@keyframes hop3{50%{transform:translateX(-50%) rotateX(-54deg) translateY(-18%) scale(1.1)}}
.h2-board>.sq.ripple{background:rgba(255,204,0,.45);box-shadow:inset 0 0 26px rgba(255,226,100,.9);transition-duration:.05s}
.h2-hint{position:absolute;left:50%;bottom:1.4rem;transform:translateX(-50%);z-index:4;pointer-events:none;display:inline-flex;gap:.6rem;align-items:center;padding:.45rem 1.1rem;border:1px solid rgba(255,204,0,.4);border-radius:999px;background:rgba(7,7,11,.6);backdrop-filter:blur(8px);color:var(--gold);font-weight:700;font-size:.92rem;white-space:nowrap;animation:hint 2.4s ease-in-out infinite;transition:opacity .6s}
.h2-hint.gone{opacity:0;animation:none}
@keyframes hint{50%{transform:translateX(-50%) translateY(-6px)}}

/* ===== v6.1 text zone centred above the board; dark pieces alive ===== */
.hero2{padding-top:0}
.hero2 .h2-text{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center;align-items:center;padding-top:clamp(4.6rem,9.5vh,6.2rem);padding-bottom:clamp(.6rem,2vh,1.4rem)}
.hero2 .h2-stage{flex:none;height:clamp(280px,38vh,430px)}
.h2-piece.dark>i{transition:opacity .4s}
.h2-piece.dark.dead>i{animation:dead .75s forwards}
@keyframes dead{0%{filter:brightness(2.4) drop-shadow(0 0 24px #ffcc00)}35%{transform:translateX(-50%) rotateX(-54deg) translateY(-14%) scale(1.15)}100%{opacity:0;transform:translateX(-50%) rotateX(-54deg) translateY(-45%) scale(.25);filter:brightness(3)}}
.h2-piece.spawn{transition:none}
.h2-piece.spawn>i{animation:spawnIn .7s both}
@keyframes spawnIn{from{opacity:0;transform:translateX(-50%) rotateX(-54deg) translateY(-60%) scale(.6)}to{opacity:1}}
.h2-board>.sq.cap::after{content:"";position:absolute;inset:0;border:3px solid var(--gold);border-radius:6px;animation:burst .8s forwards;pointer-events:none}
.h2-hint.score{animation:none;border-color:var(--gold)}
.h2-hint b{color:#fff}
.h2-hint.flash{background:var(--gold);color:#000;transform:translateX(-50%) scale(1.12);transition:.2s}

/* ===== v6.2 smaller pieces, clearer text ===== */
.h2-piece>i{height:140%}.h2-piece.run>i{height:165%}.h2-piece.dark.s>i{height:118%}
.h2-giant{opacity:.03}
.hero2 .h2-text{position:relative}
.hero2 .h2-text::before{content:"";position:absolute;inset:8% -2% -4%;z-index:-1;background:radial-gradient(ellipse at center,rgba(7,7,11,.78),rgba(7,7,11,.35) 55%,transparent 75%);pointer-events:none}
.hero2 .h2-text .lead{text-shadow:0 2px 18px #000}
.hero2 h1{text-shadow:0 4px 30px rgba(0,0,0,.6)}
.h2-hint.gone{display:none}

/* ===== v7: calmer layout, service tiles on the board ===== */
.hero2 .h2-text{padding-top:clamp(6.2rem,14vh,8.5rem);padding-bottom:1.2rem}
.hero2 h1{font-size:clamp(2rem,min(4.2vw,7.2vh),4.2rem);margin:.8rem 0 .6rem}
.hero2 .lead{font-size:clamp(.95rem,2vh,1.1rem)}
.hero2 .h2-stage{height:clamp(260px,36vh,410px)}
.hero2 h1 .typed{transition:opacity .35s}
.h2-tile{position:absolute;width:6.25%;height:12.5%;left:calc(var(--x)*6.25%);top:calc(var(--y)*12.5%);transform-style:preserve-3d}
.h2-tile .tile-card{position:absolute;left:50%;bottom:34%;width:118%;transform:translateX(-50%) rotateX(-54deg);transform-origin:50% 100%;display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:.7rem .5rem .6rem;text-align:center;text-decoration:none;color:#fff;
  background:linear-gradient(180deg,rgba(255,204,0,.16),rgba(13,14,21,.88));border:1.5px solid rgba(255,204,0,.65);border-radius:.9rem;box-shadow:0 0 28px rgba(255,204,0,.25),0 18px 30px -12px #000;pointer-events:auto;transition:box-shadow .35s,background .35s,border-color .35s;backdrop-filter:blur(6px)}
.h2-tile .tile-card img{width:2.5vw;min-width:34px;max-width:52px;height:auto;aspect-ratio:1;object-fit:contain}
.h2-tile .tile-card i{font-size:1.9rem;color:var(--gold)}
.h2-tile .tile-card span{font-size:clamp(.66rem,.78vw,.82rem);font-weight:700;line-height:1.3;direction:rtl}
.lang-en .h2-tile .tile-card span{direction:ltr}
.h2-tile .tile-card::after{content:"";position:absolute;left:12%;right:12%;bottom:-14px;height:14px;border-radius:50%;background:radial-gradient(ellipse,rgba(255,204,0,.55),transparent 70%)}
.h2-tile .tile-card:hover,.h2-tile.hit .tile-card{border-color:#fff3b0;background:linear-gradient(180deg,rgba(255,204,0,.5),rgba(40,32,5,.92));box-shadow:0 0 50px rgba(255,204,0,.75),0 18px 30px -12px #000}
.h2-tile.hit .tile-card{animation:tilehit 1.2s}
@keyframes tilehit{30%{transform:translateX(-50%) rotateX(-54deg) translateY(-14%) scale(1.08)}}
@media(max-width:991px){.h2-tile .tile-card{width:150%}.h2-tile .tile-card span{display:none}.h2-tile .tile-card img{width:30px;min-width:0}}

/* ===== v7.1 bigger, brighter tiles; short screens ===== */
.hero2 .h2-stage{height:clamp(240px,37vh,420px);-webkit-mask-image:linear-gradient(0deg,#000 82%,transparent 100%);mask-image:linear-gradient(0deg,#000 82%,transparent 100%)}
.h2-tile .tile-card{width:150%;padding:.9rem .6rem .8rem;gap:.5rem;background:linear-gradient(180deg,rgba(255,204,0,.28),rgba(16,15,8,.92));border-width:2px;box-shadow:0 0 40px rgba(255,204,0,.4),0 18px 30px -12px #000}
.h2-tile .tile-card img{width:3.1vw;min-width:42px;max-width:64px}
.h2-tile .tile-card span{font-size:clamp(.75rem,.95vw,1rem);color:#fff}
@media(max-height:720px){.hero2 .h2-text .eyebrow{display:none}.hero2 h1{font-size:clamp(1.9rem,min(4vw,6.4vh),3.6rem)}}
@media(max-width:991px){.h2-tile .tile-card{width:170%}.h2-tile .tile-card img{width:34px}}

/* ===== v8: no black block behind the text; board is taller and uncropped; dark only under the header ===== */
.hero2 .h2-text::before{display:none}
.hero2::before{content:"";position:absolute;top:0;left:0;right:0;height:170px;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(7,7,11,.95),rgba(7,7,11,.55) 55%,transparent)}
.hero2{background:radial-gradient(ellipse 90% 70% at 50% 100%,#2a2108 0%,#120f06 38%,var(--ink) 78%)}
.hero2 h1{text-shadow:0 2px 22px rgba(0,0,0,.85)}
.hero2 .lead{text-shadow:0 2px 14px rgba(0,0,0,.9);color:#c9ccd9}
@media(min-width:992px){
  .hero2 .h2-stage{position:absolute;left:0;right:0;bottom:0;height:74%;flex:none;margin:0;-webkit-mask-image:linear-gradient(0deg,#000 58%,transparent 100%);mask-image:linear-gradient(0deg,#000 58%,transparent 100%)}
  .hero2 .h2-text{padding-bottom:clamp(250px,40vh,450px);padding-top:clamp(6.4rem,14vh,8.8rem)}
  .h2-board>.sq.l{background:rgba(255,255,255,.1)}
}

/* ===== v8.1 smaller pieces; hint sits under the buttons ===== */
.h2-piece>i{height:105%}.h2-piece.run>i{height:125%}.h2-piece.dark.s>i{height:88%}
.hero2 .h2-hint{position:static;left:auto;bottom:auto;transform:none;margin-top:1rem;animation:none;font-size:.88rem;padding:.35rem 1rem}
@keyframes hintsoft{50%{opacity:.6}}
.hero2 .h2-hint{animation:hintsoft 2.4s ease-in-out infinite}
.hero2 .h2-hint.gone{display:none}

/* ===== v9: proof bar right after the hero; mobile hero ===== */
html,body{overflow-x:clip}
.hero2{overflow:clip}
.hero2::after{content:"";position:absolute;left:0;right:0;bottom:0;height:140px;z-index:3;pointer-events:none;background:linear-gradient(180deg,transparent,var(--ink))}
.proof{position:relative;z-index:6;margin-top:-2.6rem;padding-bottom:0;background:var(--ink)}
.proof .stats-box{padding:.4rem 0;border-radius:1.2rem;background:linear-gradient(180deg,rgba(255,204,0,.07),rgba(13,14,21,.92));border:1px solid rgba(255,204,0,.28);box-shadow:0 20px 60px -25px rgba(255,204,0,.35);backdrop-filter:blur(10px)}
.proof .stat-i{display:flex;align-items:center;justify-content:center;gap:.9rem;padding:1rem .5rem}
.proof .stat-i b{font-size:clamp(1.7rem,3vw,2.5rem);line-height:1}
.proof .stat-i span{font-size:.95rem;line-height:1.3;max-width:7rem;text-align:start}
.proof .marquee.proof-logos{margin-top:1.8rem;border-top:0;padding:1.2rem 0 1.6rem;background:transparent}
.proof+.section{padding-top:4.5rem}
@media(max-width:767px){.proof .stat-i{flex-direction:column;gap:.2rem;padding:.8rem .3rem}.proof .stat-i span{text-align:center;max-width:none}}

@media(max-width:991px){
  .hero2{height:auto;min-height:100svh;padding-bottom:2rem}
  .hero2 .h2-text{padding-top:clamp(5.6rem,12vh,7rem);padding-bottom:1rem;flex:none}
  .hero2 .h2-stage{position:absolute;left:0;right:0;bottom:0;height:56%;margin:0;flex:none;-webkit-mask-image:linear-gradient(0deg,#000 55%,transparent 100%);mask-image:linear-gradient(0deg,#000 55%,transparent 100%)}
  .h2-board{width:230%;margin-left:-115%;bottom:-6%}
  .h2-tile:nth-of-type(1){--x:5!important;--y:6!important}.h2-tile:nth-of-type(2){--x:6!important;--y:7!important}
  .h2-tile:nth-of-type(3){--x:9!important;--y:6!important}.h2-tile:nth-of-type(4){--x:10!important;--y:7!important}
  .h2-tile .tile-card{width:165%;padding:.55rem .3rem}
  .h2-tile .tile-card img{width:30px;min-width:0}.h2-tile .tile-card i{font-size:1.3rem}
  .hero2 h1{font-size:clamp(1.9rem,8.4vw,2.8rem)}
  .hero2 .h2-hint{margin-top:.8rem}
  .hero2 .lead{max-width:34ch;margin-inline:auto}
}

/* ===== v9.1: seamless hero -> proof bar ===== */
.hero2::after{display:none}
.proof{background:transparent;margin-top:-3rem}
.proof::before{content:"";position:absolute;inset:3rem 0 0;background:var(--ink);z-index:-1}
.hero2 .h2-stage{bottom:2.4rem!important;-webkit-mask-image:linear-gradient(0deg,transparent 0,#000 12%,#000 58%,transparent 100%)!important;mask-image:linear-gradient(0deg,transparent 0,#000 12%,#000 58%,transparent 100%)!important}
@media(max-width:991px){.hero2{padding-bottom:3rem}}


/* =====================================================================
   v10 — hero: bishop under the spotlight, services orbiting it
   ===================================================================== */
.hero4{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:6.5rem 0 3.5rem;overflow:clip;isolation:isolate;
  background:radial-gradient(ellipse 70% 70% at 25% 55%,#241c08 0%,#0e0c07 45%,var(--ink) 80%)}
.hero4::before{content:"";position:absolute;top:0;left:0;right:0;height:150px;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(7,7,11,.95),rgba(7,7,11,.5) 55%,transparent)}
.hero4 #dust{z-index:1}
.h4-checker{position:absolute;inset:0;z-index:0;opacity:.5;background:conic-gradient(rgba(255,255,255,.05) 25%,transparent 0 50%,rgba(255,255,255,.05) 0 75%,transparent 0) 0 0/84px 84px;
  -webkit-mask-image:radial-gradient(ellipse 70% 65% at 30% 55%,#000 0,transparent 75%);mask-image:radial-gradient(ellipse 70% 65% at 30% 55%,#000 0,transparent 75%);animation:band 30s linear infinite}
.h4-grid{position:relative;z-index:3;display:grid;grid-template-columns:1.08fr .92fr;gap:2.5rem;align-items:center;width:100%}
.hero4 h1{font-size:clamp(2.2rem,min(5vw,9vh),4.8rem);font-weight:900;line-height:1.12;margin:.9rem 0 .8rem;letter-spacing:-.02em}
.hero4 h1 .l1{display:block}
.hero4 h1 .typed{display:block;min-height:1.2em;white-space:nowrap;text-shadow:0 0 60px rgba(255,204,0,.28)}
.hero4 h1 .typed::after{content:"";display:inline-block;width:.06em;height:.85em;background:var(--gold);margin-inline-start:.14em;vertical-align:-.06em;animation:caret .8s steps(1) infinite;-webkit-text-fill-color:initial}
.hero4 .lead{color:#c3c6d4;font-size:clamp(1rem,2.3vh,1.2rem);max-width:46ch;line-height:1.8}

.h4-visual{display:grid;place-items:center}
.h4-stage{--s:min(100%,560px,64vh);position:relative;width:var(--s);aspect-ratio:1108/1140;touch-action:manipulation}
.h4-glow{position:absolute;inset:-12%;z-index:0;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,28%),rgba(255,214,90,.34),transparent 46%);transition:background .12s}
.h4-photo{position:absolute;inset:0;width:100%;height:100%;z-index:1;border-radius:2rem;filter:contrast(1.08) saturate(.92) brightness(1.05);
  -webkit-mask-image:radial-gradient(ellipse 58% 62% at 50% 52%,#000 38%,transparent 100%);mask-image:radial-gradient(ellipse 58% 62% at 50% 52%,#000 38%,transparent 100%)}
.h4-beam{position:absolute;z-index:2;left:50%;top:-8%;width:58%;height:64%;transform:translateX(-50%);pointer-events:none;mix-blend-mode:screen;background:linear-gradient(180deg,rgba(255,236,170,.5),transparent 88%);clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);animation:beam 5s ease-in-out infinite}
.h4-ring{position:absolute;inset:-3%;z-index:4;border-radius:50%;border:1px dashed rgba(255,204,0,.34);animation:spin 48s linear infinite}
.h4-slot{position:absolute;inset:0;transform:rotate(var(--a))}
.h4-pos{position:absolute;left:50%;top:0;transform:translate(-50%,-50%)}
.h4-in{transform:rotate(calc(-1*var(--a)))}
.h4-chip{display:flex;flex-direction:column;align-items:center;gap:.3rem;width:118px;padding:.6rem .4rem .5rem;text-align:center;text-decoration:none;color:#fff;border:1.5px solid rgba(255,204,0,.65);border-radius:1rem;
  background:linear-gradient(180deg,rgba(255,204,0,.2),rgba(14,13,8,.9));box-shadow:0 0 30px rgba(255,204,0,.28),0 14px 24px -10px #000;backdrop-filter:blur(8px);animation:unspin 48s linear infinite;transition:border-color .3s,box-shadow .3s,background .3s}
.h4-chip img{width:36px;height:36px;object-fit:contain}.h4-chip i{font-size:1.7rem;color:var(--gold)}
.h4-chip span{font-size:.74rem;font-weight:700;line-height:1.3}
.h4-chip:hover{border-color:#fff3b0;background:linear-gradient(180deg,rgba(255,204,0,.5),rgba(40,32,5,.92));box-shadow:0 0 48px rgba(255,204,0,.7),0 14px 24px -10px #000}
@keyframes unspin{to{transform:rotate(-360deg)}}
.h4-stage:hover .h4-ring,.h4-stage:hover .h4-chip{animation-play-state:paused}
.h4-sq{position:absolute;z-index:3;border-radius:5px;border:1px solid rgba(255,204,0,.5);background:rgba(255,204,0,.08);animation:float 7s ease-in-out infinite;pointer-events:none}
.h4-sq.q1{width:26px;height:26px;top:12%;inset-inline-start:6%}.h4-sq.q2{width:16px;height:16px;bottom:18%;inset-inline-end:4%;animation-delay:-3s}.h4-sq.q3{width:12px;height:12px;background:var(--gold);top:46%;inset-inline-start:-2%;animation-delay:-5s}

@media(max-width:991px){
  .hero4{min-height:auto;padding:6rem 0 3rem}
  .h4-grid{grid-template-columns:1fr;gap:2.2rem}
  .h4-text{text-align:center}.h4-text .d-flex{justify-content:center}
  .hero4 h1{font-size:clamp(2rem,9vw,3.2rem)}.hero4 h1 .typed{white-space:normal}
  .hero4 .lead{margin-inline:auto;font-size:1.02rem}
  .h4-stage{--s:min(78vw,420px)}
  .h4-chip{width:56px;height:56px;padding:0;justify-content:center;border-radius:50%}
  .h4-chip span{display:none}.h4-chip img{width:28px;height:28px}.h4-chip i{font-size:1.3rem}
}
@media(prefers-reduced-motion:reduce){.h4-ring,.h4-chip{animation:none}}
.h4-photo{-webkit-mask-image:radial-gradient(ellipse 52% 56% at 50% 54%,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 52% 56% at 50% 54%,#000 30%,transparent 100%)}

/* v10.1: ring + chips are driven by ONE variable (--rot) so they can never get out of sync */
.h4-ring,.h4-chip{animation:none!important;will-change:transform}
@media(prefers-reduced-motion:reduce){.h4-ring,.h4-chip{transform:none}}

/* v10.2: the pointer glow is a self-contained round gradient (no clipped box => no hard edge on hover) */
.h4-glow{inset:auto;left:var(--mx,50%);top:var(--my,26%);width:85%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,214,90,.34),rgba(255,200,60,.14) 55%,transparent);transition:left .15s ease-out,top .15s ease-out}


/* ===== v11: the chess game lives in "Our game plan" ===== */
.mboard .sq{position:relative;cursor:pointer}
.mboard .sq.stepmark::before{content:attr(data-step);position:absolute;left:5px;top:3px;font:800 .62rem 'Raleway',sans-serif;color:rgba(255,204,0,.8)}
.mboard .sq.legal::after{content:"";position:absolute;left:50%;top:50%;width:26%;height:26%;margin:-13% 0 0 -13%;border-radius:50%;background:rgba(255,204,0,.5);animation:mdot 1.8s ease-in-out infinite;pointer-events:none}
@keyframes mdot{50%{transform:scale(1.35);opacity:.6}}
.mboard .sq.legal:hover{background:rgba(255,204,0,.28)}
.mboard .sq.cap::after{content:"";position:absolute;inset:0;border:3px solid var(--gold);border-radius:6px;animation:burst .8s forwards;pointer-events:none}
.mpiece{z-index:3;transition:left .6s cubic-bezier(.65,0,.25,1),top .6s cubic-bezier(.65,0,.25,1)}
.mpiece.hop i{animation:mhop .6s ease-in-out,shine 4s linear infinite}
@keyframes mhop{50%{transform:translateY(-22%) scale(1.12)}}
.mpiece.mdark i{background:linear-gradient(90deg,#3a3b4d,#6a6c85 45%,#232433);animation:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.7)) drop-shadow(0 0 8px rgba(255,204,0,.2))}
.mpiece.mdark{z-index:2}
.mpiece.mdark.dead i{animation:mdead .7s forwards}
@keyframes mdead{0%{filter:brightness(2.4) drop-shadow(0 0 20px #ffcc00)}100%{opacity:0;transform:translateY(-40%) scale(.2)}}
.mpiece.mdark.spawn{transition:none}.mpiece.mdark.spawn i{animation:mspawn .6s both}
@keyframes mspawn{from{opacity:0;transform:translateY(-50%) scale(.6)}to{opacity:1}}
.mwin{position:absolute;inset:0;z-index:6;display:grid;place-items:center;pointer-events:none;background:rgba(7,7,11,.72);backdrop-filter:blur(4px);animation:mwin 2.2s forwards}
.mwin b{font-size:clamp(2.4rem,8vw,4.2rem);font-weight:900;background:var(--gold-grad);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 3s linear infinite}
@keyframes mwin{0%{opacity:0}12%,80%{opacity:1}100%{opacity:0}}
.mhud{width:min(100%,480px);margin:.9rem auto 0;display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap}
.mhint{flex:1 1 220px;padding:.4rem 1rem;border:1px solid var(--bd);border-radius:999px;background:rgba(255,255,255,.03);color:var(--mut);font-size:.88rem;text-align:center;transition:.3s}
.mhint.bad{border-color:#ff6b5b;color:#ff9a8d}.mhint.good{border-color:var(--gold);color:var(--gold)}
.mscore{padding:.4rem 1rem;border:1px solid rgba(255,204,0,.4);border-radius:999px;color:var(--gold);font-weight:700;font-size:.9rem}.mscore b{color:#fff}


/* ===== v11.1: gold services ticker + trusted-by logos right after the hero ===== */
.proof{position:relative;z-index:6;margin-top:-1.2rem;background:transparent;padding-bottom:1rem}
.proof::before{display:none}
.ticker{position:relative;margin:0 -3%;width:106%;transform:rotate(-1.3deg);padding:.85rem 0;overflow:hidden;direction:ltr;
  background:var(--gold-grad);background-size:250% 100%;animation:shine 9s linear infinite;box-shadow:0 14px 60px -12px rgba(255,204,0,.55)}
.ticker .marquee-track{gap:2rem;align-items:center;animation-duration:55s}
.ticker span{font-weight:900;font-size:clamp(1.25rem,2.3vw,2rem);color:#0b0b10;white-space:nowrap;line-height:1.3}
.ticker i{flex:none;width:20px;height:32px;background:#0b0b10;-webkit-mask:url(/brand/bishop.png) center/contain no-repeat;mask:url(/brand/bishop.png) center/contain no-repeat}
.proof-head{text-align:center;margin-top:3rem}
.proof-head span{display:inline-flex;align-items:center;gap:1rem;color:var(--mut);font-weight:700;font-size:.95rem;letter-spacing:.04em}
.proof-head span::before,.proof-head span::after{content:"";width:46px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.proof-head span::after{transform:scaleX(-1)}
.proof .marquee.proof-logos{margin-top:1.2rem;border:0;background:transparent;padding:1rem 0 1.4rem}
.proof+.section{padding-top:4.5rem}

/* footer: payments in full colour on a light tile, no giant outline word */
.site-footer{padding-bottom:1.5rem}
.pay{justify-content:space-between;background:rgba(255,255,255,.04)}
.pay img{height:auto;max-height:38px;width:auto;filter:none!important;opacity:1!important;background:#fff;border-radius:.8rem;padding:.55rem 1rem}

/* clients: white monochrome logos, slow drift */
.proof .marquee.proof-logos .marquee-track{animation-duration:140s;gap:3.5rem;align-items:center}
.proof-logos img,.proof-logos img.on-dark{background:transparent!important;border:0!important;padding:0!important;border-radius:0!important;height:46px;max-width:160px;width:auto;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.55;transition:opacity .3s,transform .3s}
.proof-logos img:hover{opacity:1;transform:scale(1.06)}
/* uniform logo boxes: every logo fits the same frame regardless of aspect ratio */
.proof-logos img,.proof-logos img.on-dark{height:54px;width:150px;max-width:none;object-fit:contain;object-position:center}
.proof .marquee.proof-logos .marquee-track{gap:2.5rem}
@media(max-width:767px){.proof-logos img,.proof-logos img.on-dark{height:44px;width:120px}}

/* ===== game plan v12: board + steps are one story ===== */
.mboard .sq.legal::after,.mboard .sq.cap::after{display:none}
.mboard .sq{cursor:default}.mboard .sq.stepmark{cursor:pointer}
.mboard .sq.stepmark{background:rgba(255,204,0,.12)}
.mboard .sq.stepmark::before{left:50%;top:50%;transform:translate(-50%,-50%);width:58%;aspect-ratio:1;display:grid;place-items:center;border:2px solid rgba(255,204,0,.5);border-radius:50%;font:900 clamp(.7rem,1.6vw,1rem) 'Raleway',sans-serif;color:var(--gold);background:rgba(7,7,11,.6);transition:.4s}
.mboard .sq.reach::before{background:var(--gold);color:#000;border-color:var(--gold);box-shadow:0 0 22px rgba(255,204,0,.7)}
.mboard .sq.hit{animation:hit .8s}
.mboard .sq.trail{background:rgba(255,204,0,.3)}
.mstep{position:relative;overflow:hidden}
.mstep::after{content:"";position:absolute;inset-inline-start:0;bottom:0;height:3px;width:0;background:var(--gold-grad)}
.mstep.on::after{animation:stepfill 3.2s linear forwards}
.mstep:hover.on::after{animation-play-state:paused}
@keyframes stepfill{to{width:100%}}
.mstep.done .n{background:rgba(255,204,0,.18);border-color:var(--gold)}
.mstep.done .n::before{content:"\F26E";font-family:'bootstrap-icons';position:absolute}
.mstep.done .n{font-size:0;position:relative}.mstep.done .n::before{font-size:1.2rem}

/* ===== forms v2: action cards + quote modal ===== */
.act-card{height:100%;display:flex;flex-direction:column;gap:.5rem;padding:2rem;border-radius:1.4rem;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));border:1px solid var(--bd)}
.act-card h3{font-size:1.4rem;margin:.4rem 0 0}.act-card>p{color:var(--mut);margin-bottom:.8rem}
.act-ico{width:54px;height:54px;border-radius:1rem;display:grid;place-items:center;font-size:1.5rem;color:var(--gold);background:rgba(255,204,0,.1);border:1px solid rgba(255,204,0,.35)}
.act-quote{background:linear-gradient(160deg,#241c06,#0e0d09 70%);border-color:rgba(255,204,0,.35)}
.act-card .checks{margin:.4rem 0 1.2rem}
.modal-backdrop.show{opacity:.75}
.qm{background:var(--surface);border:1px solid rgba(255,204,0,.35);border-radius:1.6rem;overflow:hidden;color:var(--tx);box-shadow:0 40px 120px -20px rgba(255,204,0,.25)}
.qm-x{position:absolute;top:1rem;inset-inline-end:1rem;z-index:5;filter:invert(1);opacity:.7}
.qm-side{position:relative;flex-direction:column;justify-content:center;padding:2.2rem 1.8rem;background:linear-gradient(170deg,#2a2108,#0d0c08);border-inline-end:1px solid var(--bd);overflow:hidden}
.qm-side h3{font-size:1.5rem}.qm-side p{color:#b9bccb}
.qm-bishop{position:absolute;inset-inline-end:-18px;bottom:-14px;width:110px;aspect-ratio:513/1201;opacity:.16}
.qm-pts li{display:flex;gap:.6rem;margin:.5rem 0;color:#e6e7ee;font-weight:600}.qm-pts i{color:var(--gold)}
.qm-phone{display:inline-flex;gap:.6rem;align-items:center;margin-top:1rem;color:var(--gold);font-weight:800;text-decoration:none;direction:ltr}
.qm-body{padding:2.2rem}
@media(max-width:575px){.qm-body{padding:1.6rem 1.2rem}.act-card{padding:1.4rem}}

/* ===== site-wide faint chessboard background (always visible, not only during the loader) ===== */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:conic-gradient(rgba(255,255,255,.011) 25%,transparent 0 50%,rgba(255,255,255,.011) 0 75%,transparent 0) 0 0/110px 110px;
  -webkit-mask-image:radial-gradient(ellipse 120% 90% at 50% 40%,#000 25%,rgba(0,0,0,.35) 100%);mask-image:radial-gradient(ellipse 120% 90% at 50% 40%,#000 25%,rgba(0,0,0,.35) 100%)}
main,.site-footer,.proof{position:relative;z-index:1}
.section:not(.dark):not(.cta):not(.moves){background:transparent;background-image:none}
.section.dark{background:rgba(13,14,21,.82)}
.stats,.marquee{background:transparent}
.page-head{background:rgba(7,7,11,.9)}
.site-footer{background:rgba(7,7,11,.88)}
.moves{background:rgba(7,7,11,.82)}

/* the chessboard shows through every section: no solid black panels */
.section.dark,.moves,.team-strip,.faq,.mate,.site-footer,.proof,.cta{background:transparent!important;background-image:none!important}
.page-head{background:transparent}
.page-head::before{opacity:.8}
.cta::before,.moves::before{opacity:.5}
body{background:var(--ink)}

/* ===== custom select ===== */
.cs{position:relative}
.cs-native{position:absolute!important;opacity:0;pointer-events:none;height:0;width:0;padding:0;border:0}
.cs-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:.6rem;text-align:start;padding:.8rem 1rem;border-radius:.9rem;border:1.5px solid #262938;background:#12131c;color:#fff;font:inherit;transition:.25s}
.cs-btn:hover{border-color:rgba(255,204,0,.5)}
.cs.open .cs-btn,.cs-btn:focus-visible{border-color:var(--gold);box-shadow:0 0 0 .2rem rgba(255,204,0,.2);outline:0;background:#161823}
.cs-val.cs-empty{color:#6f7285}
.cs-btn i{color:var(--gold);font-size:.85rem;transition:transform .3s}.cs.open .cs-btn i{transform:rotate(180deg)}
.cs-list{position:absolute;z-index:60;inset-inline:0;top:calc(100% + 8px);margin:0;padding:.4rem;list-style:none;max-height:240px;overflow:auto;border-radius:1rem;
  background:rgba(18,19,28,.98);border:1px solid rgba(255,204,0,.4);box-shadow:0 24px 60px -10px rgba(0,0,0,.85),0 0 40px -10px rgba(255,204,0,.25);backdrop-filter:blur(12px);
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top;transition:.2s}
.cs.open .cs-list{opacity:1;visibility:visible;transform:none}
.cs.flip .cs-list{top:auto;bottom:calc(100% + 8px);transform-origin:bottom}
.cs-list li{padding:.6rem .9rem;border-radius:.65rem;color:#dcdde6;cursor:pointer;font-size:.97rem;display:flex;align-items:center;justify-content:space-between;gap:.6rem;transition:.15s}
.cs-list li:hover{background:rgba(255,204,0,.14);color:#fff}
.cs-list li.on{background:rgba(255,204,0,.2);color:var(--gold);font-weight:700}
.cs-list li.on::after{content:"\F26E";font-family:'bootstrap-icons';font-size:1rem}
.cs-list li.cs-ph{color:#6f7285}
.cs-list::-webkit-scrollbar{width:6px}.cs-list::-webkit-scrollbar-thumb{background:#333646;border-radius:6px}
/* quote modal layout: avoid clipping + tidy spacing */
.qm{overflow:visible}
.qm-side{border-radius:1.6rem 0 0 1.6rem}[dir=rtl] .qm-side{border-radius:0 1.6rem 1.6rem 0}
.qm-body{padding:2.4rem 2.2rem 2rem}
.qm .form-control,.qm .cs-btn{min-height:52px}
.qm textarea.form-control{min-height:120px}


/* ===== checkmate banner v2 ===== */
.mate{padding:8rem 0;text-align:center;position:relative;overflow:hidden;isolation:isolate}
.mate::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 60% 70% at 50% 50%,rgba(255,204,0,.14),transparent 70%)}
.mate-pawns{opacity:.5}
.mate-in{position:relative;z-index:2;max-width:860px}
.mate h2{font-size:clamp(2.2rem,5.2vw,4.2rem);line-height:1.2;margin:1.2rem 0 1rem}
.mate p{font-size:1.2rem;color:#c3c6d4;margin:0 auto 2rem;max-width:44ch}
.mate-btns{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
.mate-pts{list-style:none;display:flex;flex-wrap:wrap;gap:.8rem 2rem;justify-content:center;margin:2.2rem 0 0;padding:1.4rem 0 0;border-top:1px solid var(--line);color:#aeb1c2;font-weight:600}
.mate-pts i{color:var(--gold);margin-inline-end:.45rem}
.mate-diag{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.mate-diag i{position:absolute;top:-20%;width:2px;height:160%;background:linear-gradient(180deg,transparent,rgba(255,204,0,.55),transparent);transform:rotate(38deg);animation:diag 7s linear infinite}
.mate-diag i:nth-child(1){left:12%}.mate-diag i:nth-child(2){left:50%;animation-delay:-3s}.mate-diag i:nth-child(3){left:86%;animation-delay:-5s}
@keyframes diag{from{transform:translateY(-30%) rotate(38deg);opacity:0}30%,70%{opacity:1}to{transform:translateY(30%) rotate(38deg);opacity:0}}
.mate h2 .hl,.page-head h1 .hl{display:inline;-webkit-box-decoration-break:clone;box-decoration-break:clone;white-space:nowrap}
.mate h2{padding-inline:.5rem}

/* highlighted words inside split headings: paint the gradient on each word (background-clip on inline parents hides children) */
.split .hl{background:none!important;animation:none!important;-webkit-background-clip:border-box!important;color:inherit!important;-webkit-text-fill-color:initial}
.split .hl .w>span{background:var(--gold-grad);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 5s linear infinite}
.why-sec{background:transparent!important;padding-top:0;color:#fff}
.why{background:rgba(13,14,21,.55);backdrop-filter:blur(4px)}

/* ===== checkmate banner v3: one glass card, readable copy ===== */
.mate{padding:6rem 0}
.mate::before{display:none}
.mate-pawns{display:none}
.mate-in{position:relative;max-width:980px;margin-inline:auto;padding:4rem 2.5rem;border-radius:2rem;overflow:hidden;isolation:isolate;
  background:linear-gradient(160deg,rgba(40,31,6,.85),rgba(10,10,14,.92) 65%);border:1px solid rgba(255,204,0,.4);box-shadow:0 40px 120px -40px rgba(255,204,0,.4)}
.mate-in::before{content:"";position:absolute;inset:0;z-index:-1;background:url(/brand/pawns.png) center/cover no-repeat;opacity:.16;mix-blend-mode:screen}
.mate-in::after{content:"";position:absolute;z-index:-1;width:520px;height:520px;inset-inline-end:-160px;top:-260px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,204,0,.28),transparent)}
.mate h2{font-size:clamp(1.9rem,4.4vw,3.4rem);text-wrap:balance;margin:1rem auto .9rem;max-width:18ch}
.mate p{text-wrap:balance;max-width:52ch;font-size:1.12rem}
.mate-pts{border-top:1px solid rgba(255,255,255,.1)}
@media(max-width:575px){.mate-in{padding:2.6rem 1.2rem;border-radius:1.4rem}.mate{padding:3.5rem 0}}


/* ===== checkmate banner v4: bold gold band ===== */
.btn-ink{background:#0b0b10;color:var(--gold);border:0;box-shadow:0 14px 30px -12px rgba(0,0,0,.7)}
.btn-ink:hover{background:#000;color:#fff;transform:translateY(-2px)}
.btn-ink-o{border:2px solid #0b0b10;color:#0b0b10;background:transparent}
.btn-ink-o:hover{background:#0b0b10;color:var(--gold)}
.bishop-ink{background:#0b0b10;-webkit-mask:url(/brand/bishop.png) center/contain no-repeat;mask:url(/brand/bishop.png) center/contain no-repeat}
.mate2{position:relative;overflow:hidden;isolation:isolate;color:#0b0b10;padding:7rem 0;margin:3rem 0;
  background:linear-gradient(115deg,#d9a800 0%,#ffcc00 35%,#ffe27a 55%,#ffcc00 75%,#c99a00 100%);background-size:200% 100%;animation:shine 14s linear infinite;
  clip-path:polygon(0 4.5rem,100% 0,100% calc(100% - 4.5rem),0 100%)}
.m2-checker{position:absolute;inset:0;z-index:-1;opacity:.14;background:conic-gradient(#000 25%,transparent 0 50%,#000 0 75%,transparent 0) 0 0/90px 90px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 70%);mask-image:linear-gradient(90deg,transparent,#000 70%)}
.m2-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:2rem;align-items:center}
.m2-eyebrow{display:inline-flex;gap:.6rem;align-items:center;font-weight:800;font-size:.9rem;padding:.3rem 1rem;border:2px solid #0b0b10;border-radius:999px}
.m2-eyebrow i{width:8px;height:8px;border-radius:50%;background:#0b0b10}
.mate2 h2{color:#0b0b10;font-size:clamp(2rem,4.6vw,3.8rem);font-weight:900;line-height:1.2;margin:1.2rem 0 1rem;text-wrap:balance;max-width:17ch}
.mate2 p{color:rgba(11,11,16,.82);font-size:1.15rem;font-weight:500;max-width:46ch;text-wrap:balance}
.m2-btns{display:flex;flex-wrap:wrap;gap:1rem;margin:1.8rem 0 0}
.m2-pts{list-style:none;padding:0;margin:2rem 0 0;display:flex;flex-wrap:wrap;gap:.6rem}
.m2-pts li{display:inline-flex;gap:.5rem;align-items:center;padding:.4rem 1rem;border-radius:999px;background:rgba(11,11,16,.1);font-weight:700;font-size:.92rem}
.m2-art{position:relative;height:420px}
.m2-b{position:absolute;bottom:-1.5rem;aspect-ratio:513/1201}
.m2-b.b1{height:100%;inset-inline-start:22%;animation:float 7s ease-in-out infinite}
.m2-b.b2{height:62%;inset-inline-start:-4%;opacity:.28;animation:float 7s ease-in-out infinite -3s}
.m2-sq{position:absolute;width:64px;height:64px;border:3px solid #0b0b10;border-radius:10px;inset-inline-end:2%;top:6%;transform:rotate(14deg);animation:float 6s ease-in-out infinite -2s}
@media(max-width:991px){.mate2{padding:6rem 0 5rem;clip-path:polygon(0 2.5rem,100% 0,100% calc(100% - 2.5rem),0 100%)}.m2-grid{grid-template-columns:1fr}.m2-art{display:none}.mate2 h2{max-width:none}}


/* ===== checkmate banner v5: calm dark, gold accents only ===== */
.mate2{color:#fff;clip-path:none;margin:0;padding:6rem 0;background:linear-gradient(180deg,transparent,rgba(255,204,0,.07) 50%,transparent);animation:none;border-block:1px solid rgba(255,204,0,.25)}
.m2-checker{opacity:.5;background:conic-gradient(rgba(255,204,0,.06) 25%,transparent 0 50%,rgba(255,204,0,.06) 0 75%,transparent 0) 0 0/90px 90px;-webkit-mask-image:radial-gradient(ellipse at 20% 50%,#000,transparent 70%);mask-image:radial-gradient(ellipse at 20% 50%,#000,transparent 70%)}
.m2-eyebrow{border:1px solid rgba(255,204,0,.4);color:var(--gold);background:rgba(255,204,0,.06)}
.m2-eyebrow i{background:var(--gold)}
.mate2 h2{color:#fff;font-size:clamp(1.9rem,4vw,3.2rem)}
.mate2 p{color:#c3c6d4;font-weight:400}
.m2-pts li{background:rgba(255,255,255,.05);border:1px solid var(--bd);color:#cfd1dc;font-weight:600}.m2-pts li i{color:var(--gold)}
.m2-art{height:360px}
.m2-b.b1{height:100%;inset-inline-start:30%;bottom:0;filter:drop-shadow(0 0 40px rgba(255,204,0,.35))}
.m2-ring{position:absolute;inset-inline-start:12%;top:6%;width:84%;aspect-ratio:1;border-radius:50%;border:1px dashed rgba(255,204,0,.35);animation:spin 50s linear infinite}
.m2-ring::after{content:"";position:absolute;top:12%;left:50%;width:12px;height:12px;border-radius:3px;background:var(--gold);transform:rotate(45deg);box-shadow:0 0 18px var(--gold)}


/* ===== checkmate banner v6: centred copy over a photo background ===== */
.mate2{padding:8rem 0;text-align:center;border-block:0;overflow:hidden}
.m2-bg{position:absolute;inset:0;z-index:-2;background:url(/brand/pawns.png) center/cover no-repeat;transform:scale(1.12);animation:zoomslow 22s ease-in-out infinite alternate;filter:saturate(.9) contrast(1.05)}
.mate2::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--ink) 0%,rgba(7,7,11,.62) 28%,rgba(7,7,11,.62) 72%,var(--ink) 100%),radial-gradient(ellipse 55% 60% at 50% 50%,rgba(7,7,11,.55),transparent 80%)}
.m2-grid{display:block;max-width:880px}
.m2-text{display:flex;flex-direction:column;align-items:center}
.mate2 h2{max-width:20ch;font-size:clamp(2rem,4.6vw,3.8rem);text-shadow:0 4px 30px rgba(0,0,0,.7)}
.mate2 p{margin-inline:auto;text-shadow:0 2px 16px rgba(0,0,0,.8);color:#d3d6e2;max-width:48ch}
.m2-btns,.m2-pts{justify-content:center}
.m2-pts li{background:rgba(7,7,11,.6);backdrop-filter:blur(6px)}

/* ===== home CTA: quote strip + consultation card, no cramped columns ===== */
.cta-stack .act-quote{flex-direction:row;align-items:center;flex-wrap:wrap;gap:1.2rem;padding:1.4rem 1.6rem}
.cta-stack .act-quote h3{margin:0;font-size:1.25rem}
.cta-stack .act-quote>p,.cta-stack .act-quote .checks{display:none}
.cta-stack .act-quote .btn{margin:0 auto 0 0!important;white-space:nowrap}
[dir=ltr] .cta-stack .act-quote .btn{margin:0 0 0 auto!important}
.cta-stack .act-consult{padding:2rem;background:linear-gradient(180deg,rgba(255,204,0,.06),rgba(13,14,21,.82))}
.cta-stack .act-consult .act-ico{margin-bottom:.2rem}
.cta-stack .act-consult>p{margin-bottom:1rem}
.cta .container{overflow:visible}
@media(max-width:575px){.cta-stack .act-quote{flex-direction:column;align-items:flex-start}.cta-stack .act-quote .btn{margin:0!important;width:100%}}

/* side-by-side cards: consultation card gets its own look */
.cta .container>.row{--bs-gutter-x:2.5rem}
.act-consult{background:linear-gradient(180deg,rgba(255,204,0,.08),rgba(13,14,21,.85));border-color:rgba(255,204,0,.28)}
.act-consult .act-ico{background:var(--gold);color:#000;border-color:var(--gold)}
.act-consult h3{display:flex;align-items:center;gap:.6rem}
.act-consult h3::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(255,204,0,.4),transparent)}
.act-consult form .form-control,.act-consult form .cs-btn{background:rgba(7,7,11,.6)}
.act-consult .btn{margin-top:.3rem}
.cta-stack .act-quote{display:flex}

/* ===== mobile (same direction as desktop: dark, airy, readable) ===== */
@media(max-width:767px){
  .cta .col-lg-4{text-align:center}
  .cta .sec-kicker{justify-content:center}
  .cta .col-lg-4 .cta-phone,.cta .col-lg-4>a{margin-inline:auto}
  .act-card{padding:1.5rem 1.25rem}
  .act-card h3{font-size:1.25rem}
  .cta .container>.row{--bs-gutter-y:1.5rem}
  .qm-body{padding:1.5rem 1.15rem}
  .cs-list{max-height:200px}
  .mate2{padding:5rem 0}
  .mate2 h2{font-size:clamp(1.8rem,7.6vw,2.5rem)}
  .m2-btns .btn{width:100%}
  .m2-btns{flex-direction:column;gap:.8rem}
  .mstep{padding:1rem}.mstep p{font-size:.92rem}
  .mboard{width:min(100%,360px)}
  .why{padding:1.6rem}
  .wa-fab{width:52px;height:52px;font-size:1.65rem;bottom:.9rem}
}


/* ===================== projects v2 ===================== */
.pcard{position:relative;display:block;height:100%;min-height:280px;aspect-ratio:4/3;border-radius:1.4rem;overflow:hidden;background:#141622;border:1px solid var(--bd);text-decoration:none;color:#fff;isolation:isolate;transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .4s,box-shadow .4s}
.pc-media{position:absolute;inset:0;z-index:-2}
.pc-media img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.8,.2,1),filter .6s;filter:saturate(.95)}
.pcard::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,7,11,.1) 30%,rgba(7,7,11,.92));transition:.5s}
.pcard:hover{transform:translateY(-8px);border-color:rgba(255,204,0,.6);box-shadow:0 30px 70px -25px rgba(255,204,0,.35)}
.pcard:hover .pc-media img{transform:scale(1.08)}
.pcard:hover::after{background:linear-gradient(180deg,rgba(7,7,11,.25) 10%,rgba(7,7,11,.95))}
.pc-tag{position:absolute;top:1rem;inset-inline-start:1rem;padding:.3rem .85rem;border-radius:999px;background:rgba(7,7,11,.7);backdrop-filter:blur(8px);border:1px solid rgba(255,204,0,.35);color:var(--gold);font-size:.78rem;font-weight:700;max-width:75%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-go{position:absolute;top:1rem;inset-inline-end:1rem;width:42px;height:42px;border-radius:50%;background:var(--gold);color:#000;display:grid;place-items:center;font-size:1.1rem;transform:scale(.6) rotate(-45deg);opacity:0;transition:.4s}
.pcard:hover .pc-go{opacity:1;transform:none}
.pc-meta{position:absolute;inset-inline:0;bottom:0;padding:1.3rem 1.4rem;display:flex;flex-direction:column;gap:.15rem}
.pc-meta b{font-size:1.2rem;line-height:1.3;font-weight:800}
.pc-meta small{color:#b9bccb}
.pc-meta em{font-style:normal;color:var(--gold);font-weight:700;font-size:.88rem;max-height:0;opacity:0;overflow:hidden;transition:.4s}
.pcard:hover .pc-meta em{max-height:2rem;opacity:1;margin-top:.3rem}
.pcard-big .pc-meta b{font-size:clamp(1.5rem,2.4vw,2.2rem)}
.pcard-big .pc-meta{padding:2rem}
.pcard.noimg{display:grid;place-items:center}

.pgrid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(250px,auto);gap:1.4rem}
.pgrid>*{min-height:0}.pgrid .pcard{aspect-ratio:auto}
.pgrid .pg-big{grid-column:span 2;grid-row:span 2}
.pgrid-uniform{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
@media(max-width:1199px){.pgrid{grid-template-columns:repeat(2,1fr)}.pgrid-uniform{grid-template-columns:repeat(2,1fr)}}
@media(max-width:767px){.pgrid{grid-template-columns:1fr;grid-auto-rows:auto}.pgrid .pg-big{grid-column:auto;grid-row:auto}.pgrid .pcard{aspect-ratio:4/3}.pgrid-uniform{grid-template-columns:1fr}.pc-go{opacity:1;transform:none;width:36px;height:36px}.pc-meta em{max-height:2rem;opacity:1}}

.pfilters{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:2.5rem}
.pfilters a{display:inline-flex;gap:.5rem;align-items:center;padding:.5rem 1.15rem;border-radius:999px;border:1px solid var(--bd);background:rgba(13,14,21,.7);color:#dcdde6;text-decoration:none;font-weight:600;transition:.3s}
.pfilters a b{font-size:.75rem;padding:.05rem .5rem;border-radius:999px;background:rgba(255,255,255,.08);font-weight:700}
.pfilters a:hover{border-color:rgba(255,204,0,.5)}
.pfilters a.on{background:var(--gold);border-color:var(--gold);color:#000}.pfilters a.on b{background:rgba(0,0,0,.15)}
.proj-cta{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;padding:2.4rem 2.6rem;border-radius:1.6rem;border:1px solid rgba(255,204,0,.35);background:linear-gradient(120deg,rgba(255,204,0,.12),rgba(13,14,21,.85))}
.proj-cta h3{margin:0 0 .3rem}.proj-cta p{margin:0;color:var(--mut)}

.browser{border-radius:1.2rem;overflow:hidden;border:1px solid var(--bd);background:#0f1018;box-shadow:0 40px 90px -35px rgba(0,0,0,.9),0 0 60px -30px rgba(255,204,0,.3)}
.browser .bar{display:flex;align-items:center;gap:.45rem;padding:.7rem 1rem;background:#171925;border-bottom:1px solid var(--bd);direction:ltr}
.browser .bar i{width:11px;height:11px;border-radius:50%;background:#3a3d52}.browser .bar i:first-child{background:#ff5f57}.browser .bar i:nth-child(2){background:#febc2e}.browser .bar i:nth-child(3){background:#28c840}
.browser .bar span{margin-inline-start:.8rem;flex:1;padding:.2rem .9rem;border-radius:999px;background:#0b0c12;color:#8e91a3;font-size:.8rem;text-align:center}
.browser img{display:block;width:100%}
.pd div{padding:.7rem 0;border-bottom:1px solid var(--bd)}.pd dt{color:var(--mut);font-size:.85rem;font-weight:600}.pd dd{margin:0;font-weight:700}
.pnav{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:3rem}
.pn{display:flex;flex-direction:column;gap:.3rem;padding:1.3rem 1.5rem;border-radius:1.2rem;border:1px solid var(--bd);background:rgba(13,14,21,.7);text-decoration:none;color:#fff;transition:.3s}
.pn small{color:var(--gold);font-weight:700}.pn.next{text-align:end}.pn:hover{border-color:rgba(255,204,0,.6);transform:translateY(-3px)}
@media(max-width:575px){.pnav{grid-template-columns:1fr}.proj-cta{padding:1.6rem}}

.pshot{border-radius:1.4rem;overflow:hidden;border:1px solid var(--bd);box-shadow:0 40px 90px -35px rgba(0,0,0,.9),0 0 70px -30px rgba(255,204,0,.35);background:#141622}
.pshot img{display:block;width:100%}


/* ===================== inner pages v2 ===================== */
.page-head{padding:9.5rem 0 4.5rem;position:relative;overflow:hidden;background:transparent}
.page-head::before,.page-head::after{display:none}
.ph-glow{position:absolute;inset:0;background:radial-gradient(ellipse 60% 120% at 85% 0,rgba(255,204,0,.16),transparent 65%),linear-gradient(180deg,rgba(7,7,11,.7),transparent)}
.page-head .wm{display:none}
.page-head h1{font-size:clamp(2rem,4.2vw,3.4rem);max-width:24ch}
.crumbs{display:inline-flex;padding:.35rem 1rem;border:1px solid var(--bd);border-radius:999px;background:rgba(13,14,21,.6);backdrop-filter:blur(6px)}
.ph-line{display:block;width:90px;height:4px;border-radius:4px;margin-top:1.4rem;background:var(--gold-grad);background-size:250% 100%;animation:shine 6s linear infinite}

/* prose: calmer headings, readable measure */
.prose{font-size:1.06rem;line-height:2;color:#cfd1dc}
.prose h2{font-size:1.5rem;margin:2.4rem 0 .9rem;padding-inline-start:1rem;border-inline-start:3px solid var(--gold)}
.prose h3,.prose h4{font-size:1.18rem;margin:1.8rem 0 .6rem;color:#fff}
.prose ul,.prose ol{padding-inline-start:1.4rem}.prose li{margin:.3rem 0}
.prose strong{color:#fff}

/* about */
.about-stats{display:flex;gap:1.5rem;flex-wrap:wrap;margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.about-stats b{display:block;font-size:2.4rem;font-weight:900;line-height:1;background:var(--gold-grad);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.about-stats b::after{content:"+";color:inherit;-webkit-text-fill-color:transparent}.about-stats span{color:var(--mut);font-size:.92rem}
.vcard{position:relative;height:100%;padding:2rem;border-radius:1.4rem;background:rgba(13,14,21,.72);border:1px solid var(--bd);overflow:hidden;transition:.4s}
.vcard:hover{border-color:rgba(255,204,0,.55);transform:translateY(-6px);box-shadow:0 26px 60px -28px rgba(255,204,0,.4)}
.vc-ico{width:56px;height:56px;border-radius:1rem;display:grid;place-items:center;font-size:1.5rem;color:var(--gold);background:rgba(255,204,0,.1);border:1px solid rgba(255,204,0,.3);margin-bottom:1.2rem}
.vcard h3{font-size:1.25rem;margin-bottom:.5rem}.vcard p{color:var(--mut);margin:0}
.vc-n{position:absolute;inset-inline-end:1.4rem;top:1rem;font-size:3rem;font-weight:900;color:rgba(255,255,255,.05);line-height:1}

/* team */
.member .ph{position:relative;border:1px solid var(--bd);transition:.4s}
.member .ph .ini{background:radial-gradient(circle at 50% 25%,#2a2108,#0d0e15 70%);font-size:4rem}
.member .mem-b{position:absolute;inset-inline-end:8%;bottom:0;height:60%;aspect-ratio:513/1201;opacity:.1}
.member:hover .ph{border-color:var(--gold);box-shadow:0 24px 60px -24px rgba(255,204,0,.45);transform:translateY(-6px)}
.mem-in{position:absolute;inset-inline-end:.8rem;bottom:.8rem;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:#000;opacity:0;transition:.3s;text-decoration:none}
.member:hover .mem-in{opacity:1}
.member h3{margin-top:.2rem}

/* services: process steps */
.pstep{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:1.8rem 1rem;border-radius:1.4rem;border:1px solid var(--bd);background:rgba(13,14,21,.7);text-align:center;transition:.4s}
.pstep i{font-size:1.8rem;color:var(--gold)}.pstep b{font-size:.85rem;color:var(--mut);letter-spacing:.1em}.pstep span{font-weight:800;font-size:1.1rem}
.pstep:hover{border-color:rgba(255,204,0,.5);transform:translateY(-5px)}

/* blog featured */
.post-feature{display:grid;grid-template-columns:1.15fr 1fr;border-radius:1.6rem;overflow:hidden;border:1px solid var(--bd);background:rgba(13,14,21,.78);text-decoration:none;color:#fff;margin-bottom:2rem;transition:.4s}
.post-feature:hover{border-color:rgba(255,204,0,.55);box-shadow:0 30px 70px -30px rgba(255,204,0,.35)}
.pf-img{min-height:300px;background:#141622;overflow:hidden}.pf-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s}.post-feature:hover .pf-img img{transform:scale(1.05)}
.pf-body{display:flex;flex-direction:column;justify-content:center;gap:.7rem;padding:2.2rem}
.pf-body .cat{color:var(--gold);font-weight:800;font-size:.85rem}.pf-body b{font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.35}
.pf-body .ex{color:var(--mut)}.pf-body em{font-style:normal;color:var(--gold);font-weight:700}
@media(max-width:767px){.post-feature{grid-template-columns:1fr}.pf-img{min-height:220px}.pf-body{padding:1.5rem}.page-head{padding:8rem 0 3rem}}

/* page header v3: compact, with an icon medallion on the empty side */
.page-head{padding:8rem 0 3rem}
.ph-grid{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center}
.ph-art{position:relative;width:210px;height:210px;place-items:center}
.ph-art>i{font-size:3.4rem;color:var(--gold);z-index:2;filter:drop-shadow(0 0 24px rgba(255,204,0,.5))}
.ph-ring{position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(255,204,0,.4);animation:spin 40s linear infinite}
.ph-ring.r2{inset:26px;border-style:solid;border-color:rgba(255,204,0,.18);animation-direction:reverse;animation-duration:55s}
.ph-ring::after{content:"";position:absolute;top:-5px;left:50%;width:10px;height:10px;border-radius:3px;background:var(--gold);transform:rotate(45deg);box-shadow:0 0 14px var(--gold)}
.ph-art::before{content:"";position:absolute;inset:30px;border-radius:50%;background:radial-gradient(circle,rgba(255,204,0,.22),transparent 70%)}
.ph-sq{position:absolute;width:16px;height:16px;border-radius:4px;border:1px solid rgba(255,204,0,.6);animation:float 6s ease-in-out infinite}
.ph-sq.s1{top:6%;inset-inline-end:2%}.ph-sq.s2{bottom:10%;inset-inline-start:0;animation-delay:-3s;background:rgba(255,204,0,.5)}
.ph-line{margin-top:1.1rem}
@media(max-width:991px){.ph-grid{grid-template-columns:1fr}.page-head{padding:7rem 0 2.2rem}}


/* ===== contact + careers v2 ===== */
.ctile{display:flex;flex-direction:column;gap:.35rem;height:100%;padding:1.6rem;border-radius:1.4rem;background:rgba(13,14,21,.72);border:1px solid var(--bd);text-decoration:none;color:#fff;transition:.4s}
a.ctile:hover{border-color:rgba(255,204,0,.55);transform:translateY(-6px);box-shadow:0 26px 60px -28px rgba(255,204,0,.4)}
.ct-ico{width:50px;height:50px;border-radius:1rem;display:grid;place-items:center;font-size:1.3rem;color:var(--gold);background:rgba(255,204,0,.1);border:1px solid rgba(255,204,0,.3);margin-bottom:.6rem}
.ctile small{color:var(--mut);font-weight:600}.ctile b{font-size:1.05rem;line-height:1.5;word-break:break-word}
.ctile.wa .ct-ico{color:#25d366;background:rgba(37,211,102,.1);border-color:rgba(37,211,102,.4)}
.cform{padding:2.2rem}
.cwork{display:flex;gap:1rem;align-items:center;padding:1.1rem 1.4rem;border-radius:1.2rem;border:1px dashed rgba(255,204,0,.35);background:rgba(255,204,0,.04)}
.cwork i{font-size:1.6rem;color:var(--gold)}.cwork b{display:block}.cwork span{color:var(--mut);font-size:.92rem}
.perk{height:100%;padding:1.4rem;border-radius:1.3rem;background:rgba(13,14,21,.72);border:1px solid var(--bd);display:flex;flex-direction:column;gap:.35rem;transition:.4s}
.perk:hover{border-color:rgba(255,204,0,.5);transform:translateY(-5px)}
.perk i{font-size:1.7rem;color:var(--gold)}.perk b{font-size:1.05rem}.perk span{color:var(--mut);font-size:.9rem}
.job2{display:flex;align-items:center;gap:1.2rem;padding:1.3rem 1.5rem;border-radius:1.3rem;background:rgba(13,14,21,.72);border:1px solid var(--bd);text-decoration:none;color:#fff;transition:.4s}
.job2:hover{border-color:rgba(255,204,0,.6);transform:translateX(-6px);box-shadow:0 20px 50px -26px rgba(255,204,0,.4)}
.lang-en .job2:hover{transform:translateX(6px)}
.j-ico{flex:none;width:52px;height:52px;border-radius:1rem;display:grid;place-items:center;font-size:1.4rem;color:var(--gold);background:rgba(255,204,0,.1);border:1px solid rgba(255,204,0,.3)}
.j-main{flex:1;display:flex;flex-direction:column;gap:.3rem}.j-main b{font-size:1.15rem}
.j-main em{font-style:normal;color:var(--mut);font-size:.88rem;margin-inline-end:1rem}.j-main em i{color:var(--gold)}
.j-go{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.06);transition:.3s}
.job2:hover .j-go{background:var(--gold);color:#000}
@media(max-width:575px){.cform{padding:1.4rem}}


/* ===================== team: the board ===================== */
.king{display:grid;grid-template-columns:340px 1fr;gap:2.5rem;align-items:center;padding:2rem;border-radius:2rem;border:1px solid rgba(255,204,0,.35);background:linear-gradient(120deg,rgba(255,204,0,.1),rgba(13,14,21,.8));margin-bottom:3rem;overflow:hidden;position:relative}
.king-photo{position:relative;aspect-ratio:1;border-radius:1.4rem;overflow:hidden;background:radial-gradient(circle at 50% 25%,#2a2108,#0d0e15 70%);border:1px solid rgba(255,204,0,.4);display:grid;place-items:center}
.king-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.king-photo .ini{font-size:6rem;font-weight:900;color:var(--gold)}
.king-b{position:absolute;inset-inline-end:8%;bottom:0;height:62%;aspect-ratio:513/1201;opacity:.12}
.king-tag{display:inline-flex;gap:.5rem;align-items:center;color:var(--gold);font-weight:800;font-size:.9rem;padding:.3rem .9rem;border:1px solid rgba(255,204,0,.4);border-radius:999px}
.king-info h2{font-size:clamp(1.8rem,3.4vw,2.8rem);margin:1rem 0 .2rem}.king-info b{color:var(--gold);font-size:1.15rem}
.king-info p{color:var(--mut);max-width:48ch;margin:1rem 0 1.2rem}
.tfilters{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1.6rem}
.tfilters button{display:inline-flex;gap:.5rem;align-items:center;padding:.5rem 1.15rem;border-radius:999px;border:1px solid var(--bd);background:rgba(13,14,21,.7);color:#dcdde6;font:inherit;font-weight:600;transition:.3s}
.tfilters button b{font-size:.75rem;padding:.05rem .5rem;border-radius:999px;background:rgba(255,255,255,.08)}
.tfilters button:hover{border-color:rgba(255,204,0,.5)}
.tfilters button.on{background:var(--gold);border-color:var(--gold);color:#000}.tfilters button.on b{background:rgba(0,0,0,.15)}
.tboard{display:grid;grid-template-columns:repeat(4,1fr);border-radius:1.4rem;overflow:hidden;border:2px solid rgba(255,204,0,.45);box-shadow:0 40px 90px -40px rgba(255,204,0,.35),0 0 0 8px rgba(255,255,255,.03);direction:ltr}
.tsq{position:relative;aspect-ratio:1;overflow:hidden;background:#10111a;direction:rtl;cursor:default;transition:background .4s,opacity .35s,transform .35s;isolation:isolate}
.lang-en .tsq{direction:ltr}
.tsq.dk{background:#242739}
.tsq.hide{display:none}
.tsq-bg{position:absolute;inset:0;z-index:-1;display:grid;place-items:center}
.tsq-bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(.55) contrast(1.05);transition:.6s}
.tsq-bg .ini{font-size:4.2rem;font-weight:900;color:rgba(255,204,0,.9)}
.tsq-b{position:absolute;inset-inline-end:10%;bottom:0;height:55%;aspect-ratio:513/1201;opacity:.09}
.tsq::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 45%,rgba(7,7,11,.92));transition:.4s}
.tsq-meta{position:absolute;inset-inline:0;bottom:0;padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.1rem}
.tsq-meta em{font-style:normal;font-size:.72rem;font-weight:800;letter-spacing:.04em;color:var(--gold);opacity:0;transform:translateY(8px);transition:.4s}
.tsq-meta b{font-size:1.05rem;line-height:1.3}.tsq-meta small{color:#b9bccb;font-size:.85rem}
.tsq:hover,.tsq:focus-visible{outline:0;box-shadow:inset 0 0 0 3px var(--gold),inset 0 0 50px rgba(255,204,0,.25);z-index:2}
.tsq:hover .tsq-bg img{filter:none;transform:scale(1.07)}.tsq:hover .tsq-meta em{opacity:1;transform:none}
.tsq-in{position:absolute;top:.8rem;inset-inline-end:.8rem;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:#000;opacity:0;transition:.3s;text-decoration:none}
.tsq:hover .tsq-in{opacity:1}
@media(max-width:991px){.tboard{grid-template-columns:repeat(2,1fr)}.king{grid-template-columns:1fr;padding:1.4rem}.king-photo{max-width:300px;margin-inline:auto}.tsq-meta em{opacity:1;transform:none}.tsq-in{opacity:1}.tsq-bg .ini{font-size:3rem}.tsq-meta b{font-size:.95rem}}
.proof .marquee.proof-logos .marquee-track{animation-duration:65s}


/* ===== team carousel (home) ===== */
.car-btn{width:46px;height:46px;border-radius:50%;border:1px solid var(--bd);background:rgba(13,14,21,.8);color:#fff;display:grid;place-items:center;transition:.3s}
.car-btn:hover{background:var(--gold);color:#000;border-color:var(--gold)}
.tcar{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:0 max(1rem,calc((100vw - 1320px)/2 + .75rem));scroll-padding-inline:max(1rem,calc((100vw - 1320px)/2 + .75rem))}
.tcar::-webkit-scrollbar{display:none}
.tcar-track{display:flex;gap:1.2rem;width:max-content}
.tcard{position:relative;flex:none;width:clamp(220px,22vw,290px);aspect-ratio:3/4;border-radius:1.5rem;overflow:hidden;scroll-snap-align:start;border:1px solid var(--bd);background:#10111a;isolation:isolate;transition:.4s}
.tc-bg{position:absolute;inset:0;z-index:-1;display:grid;place-items:center;background:radial-gradient(circle at 50% 25%,#2a2108,#0d0e15 70%)}
.tc-bg img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .8s}
.tc-bg .ini{font-size:4.5rem;font-weight:900;color:var(--gold)}
.tc-b{position:absolute;inset-inline-end:8%;bottom:0;height:55%;aspect-ratio:513/1201;opacity:.1}
.tcard::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 50%,rgba(7,7,11,.95))}
.tc-meta{position:absolute;inset-inline:0;bottom:0;padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.1rem}
.tc-meta b{font-size:1.1rem;line-height:1.3}.tc-meta small{color:var(--gold);font-weight:600;font-size:.85rem}
.tcard:hover{border-color:var(--gold);transform:translateY(-6px);box-shadow:0 26px 60px -26px rgba(255,204,0,.45)}
.tcard:hover .tc-bg img{transform:scale(1.06)}

/* carousel: room for the hover lift (overflow-x clips y), drag cursor */
.tcar{padding-block:22px;margin-block:-22px;cursor:grab;user-select:none;-webkit-user-select:none}
.tcar.drag{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.tcar.drag .tcard{pointer-events:none}
.tcar img{-webkit-user-drag:none;user-drag:none;pointer-events:none}

/* "Join us" square fills the last empty cell */
.tsq-join{display:grid;place-items:center;text-decoration:none;color:#fff;text-align:center;background:linear-gradient(135deg,rgba(255,204,0,.16),rgba(13,14,21,.9))!important;box-shadow:inset 0 0 0 2px rgba(255,204,0,.45)}
.tsq-join::after{display:none}
.tj-in{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem}
.tj-in i{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:1.8rem;color:#000;background:var(--gold);box-shadow:0 0 40px rgba(255,204,0,.5);transition:.4s}
.tj-in b{font-size:1.3rem;font-weight:900}.tj-in small{color:#c3c6d4;max-width:16ch}
.tsq-join:hover{box-shadow:inset 0 0 0 3px var(--gold),inset 0 0 60px rgba(255,204,0,.3)}
.tsq-join:hover .tj-in i{transform:rotate(90deg) scale(1.1)}
@media(min-width:992px){.tsq-join{grid-column:span 3;aspect-ratio:auto}.tsq-join .tj-in{flex-direction:row;gap:1.4rem;text-align:start}.tsq-join .tj-in small{max-width:none}}


/* ===================== blog + article v2 ===================== */
.pc-foot{margin-top:auto;display:flex;justify-content:space-between;gap:.6rem;color:#9a9caa;font-size:.85rem}
.pc-foot i{color:var(--gold)}
.post-card time{margin-top:0}
.blog-cta{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:.6rem;padding:2rem;border-radius:1.4rem;border:1px solid rgba(255,204,0,.4);background:linear-gradient(150deg,rgba(255,204,0,.14),rgba(13,14,21,.85))}
.blog-cta>i{font-size:2.2rem;color:var(--gold)}.blog-cta h3{font-size:1.3rem;margin:0}.blog-cta p{color:var(--mut);margin:0 0 .6rem}

.post-head{position:relative;overflow:hidden;padding:8.2rem 0 2.2rem}
.post-head h1{font-size:clamp(1.8rem,3.6vw,3rem);max-width:26ch;line-height:1.3;margin:1rem 0 1.2rem}
.post-meta{display:flex;flex-wrap:wrap;gap:.6rem}
.post-meta span{display:inline-flex;gap:.5rem;align-items:center;padding:.3rem .9rem;border-radius:999px;border:1px solid var(--bd);background:rgba(13,14,21,.6);color:#c3c6d4;font-size:.88rem;font-weight:600}
.post-meta i{color:var(--gold)}
.post-cover{border-radius:1.6rem;overflow:hidden;border:1px solid var(--bd);box-shadow:0 40px 90px -40px rgba(0,0,0,.9),0 0 80px -40px rgba(255,204,0,.35)}
.post-cover img{display:block;width:100%;max-height:520px;object-fit:cover}
.post-lead{font-size:1.25rem;line-height:1.9;color:#e6e7ee;font-weight:500;padding-inline-start:1.2rem;border-inline-start:3px solid var(--gold);margin-bottom:2rem}
.prose{max-width:none}
.prose table{display:block;overflow-x:auto}
.prose img{max-width:100%}
.prose h2{scroll-margin-top:100px}.prose h3{scroll-margin-top:100px}
.post-share{display:flex;align-items:center;gap:.6rem;margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--bd)}
.post-share b{margin-inline-end:.4rem}
.post-share a,.post-share button{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--bd);background:rgba(13,14,21,.7);color:#fff;font-size:1.1rem;text-decoration:none;transition:.3s}
.post-share a:hover,.post-share button:hover{background:var(--gold);color:#000;border-color:var(--gold)}
.toc{padding:1.5rem;border-radius:1.4rem;border:1px solid var(--bd);background:rgba(13,14,21,.72)}
.toc h5{font-size:1rem;margin-bottom:1rem;display:flex;gap:.5rem;align-items:center}.toc h5 i{color:var(--gold)}
.toc ul{list-style:none;margin:0;padding:0;max-height:46vh;overflow:auto}
.toc a{display:block;padding:.45rem .8rem;border-inline-start:2px solid var(--bd);color:#b9bccb;text-decoration:none;font-size:.92rem;line-height:1.5;transition:.25s}
.toc a:hover,.toc a.on{color:var(--gold);border-color:var(--gold);background:rgba(255,204,0,.06)}
.toc li.l3 a{padding-inline-start:1.6rem;font-size:.86rem}
@media(max-width:991px){.post-head{padding:7rem 0 1.6rem}.toc{display:none}}


/* ===================== job page + application ===================== */
.apply-panel{padding:1.8rem;border-radius:1.6rem;border:1px solid rgba(255,204,0,.3);background:linear-gradient(180deg,rgba(255,204,0,.07),rgba(13,14,21,.88))}
.ap-head{display:flex;gap:1rem;align-items:center;margin-bottom:1.3rem}.ap-head h4{margin:0;font-size:1.25rem}.ap-head small{color:var(--mut)}
.flabel{display:block;font-size:.85rem;font-weight:700;color:#c3c6d4;margin-bottom:.35rem}
.dz{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:1.2rem;border:2px dashed rgba(255,204,0,.4);border-radius:1rem;background:rgba(7,7,11,.5);cursor:pointer;text-align:center;transition:.3s}
.dz:hover,.dz.drag{border-color:var(--gold);background:rgba(255,204,0,.08)}
.dz>i{font-size:1.8rem;color:var(--gold)}.dz-t{font-weight:700}.dz-n{color:var(--gold);word-break:break-all}.dz.has .dz-t{color:#9fe3b4}
.ap-note{color:var(--mut)}.ap-note i{color:var(--gold)}
.steps{margin-top:2.5rem;padding:1.8rem;border-radius:1.4rem;border:1px solid var(--bd);background:rgba(13,14,21,.72)}
.steps h3{font-size:1.2rem;margin-bottom:1.2rem}
.hstep{display:flex;gap:1rem;align-items:flex-start;position:relative;padding-bottom:1.1rem}
.hstep:last-child{padding-bottom:0}
.hstep span{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:900;color:#000;background:var(--gold);position:relative;z-index:1}
.hstep:not(:last-child)::before{content:"";position:absolute;inset-inline-start:17px;top:36px;bottom:0;width:2px;background:linear-gradient(var(--gold),rgba(255,204,0,.1))}
.hstep b{display:block}.hstep small{color:var(--mut)}
.form-msg.ok{display:block;padding:.7rem 1rem;border-radius:.9rem;background:rgba(40,200,100,.12);border:1px solid rgba(40,200,100,.4);color:#9fe3b4}


/* ===================== services v2 ===================== */
.svc-row{display:grid;grid-template-columns:1fr 1.05fr;gap:3rem;align-items:center;margin-bottom:4rem;padding:1.2rem;border-radius:2rem;border:1px solid var(--bd);background:rgba(13,14,21,.6)}
.svc-row.alt{direction:rtl}.svc-row.alt>*{direction:ltr}
.lang-ar .svc-row.alt{direction:ltr}.lang-ar .svc-row.alt>*{direction:rtl}
.sr-media{position:relative;display:block;aspect-ratio:16/11;border-radius:1.5rem;overflow:hidden;background:radial-gradient(circle at 30% 20%,#2a2108,#0d0e15)}
.sr-media img{width:100%;height:100%;object-fit:cover;transition:transform 1s}
.svc-row:hover .sr-media img{transform:scale(1.06)}
.sr-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(7,7,11,.75))}
.sr-num{position:absolute;z-index:2;bottom:.4rem;inset-inline-start:1.2rem;font-size:4.5rem;font-weight:900;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(255,204,0,.8)}
.sr-body{padding:1rem 1.2rem}
.sr-ico{display:inline-grid;place-items:center;width:62px;height:62px;border-radius:1.1rem;background:rgba(255,204,0,.1);border:1px solid rgba(255,204,0,.35);margin-bottom:1rem}
.sr-ico img{width:34px;height:34px;object-fit:contain}.sr-ico i{font-size:1.6rem;color:var(--gold)}
.sr-body h2{font-size:clamp(1.5rem,2.6vw,2.2rem);margin-bottom:.7rem}.sr-body h2 a{color:#fff;text-decoration:none}.sr-body h2 a:hover{color:var(--gold)}
.sr-body p{color:#b9bccb;font-size:1.05rem}
@media(max-width:991px){.svc-row,.svc-row.alt,.lang-ar .svc-row.alt{grid-template-columns:1fr;direction:inherit;gap:1.2rem;margin-bottom:2rem}.svc-row.alt>*,.lang-ar .svc-row.alt>*{direction:inherit}.sr-num{font-size:3.2rem}.sr-body{padding:.4rem .6rem .8rem}}

.sv-head{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center}
.sv-head .lead{color:#c3c6d4;max-width:56ch}
.sv-ico{place-items:center;width:200px;height:200px;border-radius:50%;border:1px dashed rgba(255,204,0,.4);background:radial-gradient(circle,rgba(255,204,0,.16),transparent 70%);animation:float 7s ease-in-out infinite}
.sv-ico img{width:92px;height:92px;object-fit:contain;filter:drop-shadow(0 0 24px rgba(255,204,0,.4))}.sv-ico i{font-size:4rem;color:var(--gold)}
@media(max-width:991px){.sv-head{grid-template-columns:1fr}}


/* ===== performance pass (mobile) ===== */
img.h4-photo{object-fit:cover;max-width:none}
@media(max-width:991px){
  /* GPU-heavy effects off on phones */
  *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .cursor-glow,#dust{display:none!important}
  .h4-chip{animation:none}
}
/* safety net only: if the script never runs, the loader still goes away (the script normally drives the curtain) */
#loader{animation:ldAuto .5s 4s forwards}
@keyframes ldAuto{to{opacity:0;visibility:hidden}}

/* ---- SPA page transition ---- */
#top{transition:opacity .16s ease}
html.pj-out #top{opacity:.2}
#top.pj-in{animation:pjIn .38s cubic-bezier(.22,.8,.3,1) backwards}
@keyframes pjIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#top,#top.pj-in{transition:none;animation:none}}

/* ---- Behance-style appreciation ---- */
.appr{display:flex;flex-direction:column;gap:.6rem}
.like-btn{display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;padding:.75rem 1rem;border-radius:999px;background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.18);color:#fff;font-weight:700;cursor:pointer;transition:background .25s,border-color .25s,transform .2s}
.like-btn i{font-size:1.15rem;transition:color .2s}
.like-btn b{margin-inline-start:.1rem;padding:.05rem .6rem;border-radius:999px;background:rgba(255,255,255,.1);font-size:.85rem;font-variant-numeric:tabular-nums}
.like-btn:hover{border-color:#ff4d6d;background:rgba(255,77,109,.1)}
.like-btn:hover i{color:#ff4d6d}
.like-btn.on{background:rgba(255,77,109,.14);border-color:#ff4d6d}.like-btn.on i{color:#ff4d6d}
.like-btn.pop i{animation:likePop .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes likePop{0%{transform:scale(1)}35%{transform:scale(1.7)}100%{transform:scale(1)}}
.be-btn{display:flex;align-items:center;justify-content:center;gap:.55rem;padding:.75rem 1rem;border-radius:999px;background:#0057ff;color:#fff;font-weight:700;text-decoration:none;transition:.25s}
.be-btn:hover{background:#2a73ff;color:#fff;transform:translateY(-2px)}.be-btn i{font-size:1.25rem}
.pc-like{position:absolute;z-index:3;inset-block-start:.8rem;inset-inline-start:.8rem;display:inline-flex;gap:.35rem;align-items:center;padding:.2rem .65rem;border-radius:999px;background:rgba(7,7,11,.7);backdrop-filter:blur(6px);color:#fff;font-size:.78rem;font-weight:700}
.pc-like i{color:#ff4d6d}
[dir=rtl] .split-ltr{direction:ltr;text-align:right;unicode-bidi:isolate}

/* ---- quote modal: close button + phone ---- */
.qm-x{width:36px;height:36px;padding:0;border-radius:50%;background:#14141c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3E%3Cpath d='M2.1 2.1a1 1 0 0 1 1.4 0L8 6.6l4.5-4.5a1 1 0 1 1 1.4 1.4L9.4 8l4.5 4.5a1 1 0 0 1-1.4 1.4L8 9.4l-4.5 4.5a1 1 0 0 1-1.4-1.4L6.6 8 2.1 3.5a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E") center/12px no-repeat;border:1.5px solid rgba(255,204,0,.55);filter:none!important;opacity:1;top:-14px;inset-inline-end:-14px;box-shadow:0 8px 20px -6px rgba(0,0,0,.7);transition:.25s}
.qm-x:hover{background-color:#ffcc00;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23111'%3E%3Cpath d='M2.1 2.1a1 1 0 0 1 1.4 0L8 6.6l4.5-4.5a1 1 0 1 1 1.4 1.4L9.4 8l4.5 4.5a1 1 0 0 1-1.4 1.4L8 9.4l-4.5 4.5a1 1 0 0 1-1.4-1.4L6.6 8 2.1 3.5a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E");border-color:#ffcc00;transform:rotate(90deg)}
.qm-x:focus{box-shadow:0 0 0 .2rem rgba(255,204,0,.35)}
.qm-phone{position:relative;z-index:2;display:flex;width:fit-content;gap:.6rem;align-items:center;margin-top:1.6rem;padding:.65rem 1.1rem;border-radius:999px;border:1px solid rgba(255,204,0,.45);background:rgba(255,204,0,.08);font-size:1.02rem;transition:.25s}
.qm-phone:hover{background:var(--gold);color:#111}
@media(max-width:991px){.qm-x{top:.7rem;inset-inline-end:.7rem}.qm-body{padding-top:3.4rem}}

/* ---- docked contact buttons (WhatsApp + call), right edge ---- */
.wa-fab{display:none!important}
.dock{position:fixed;right:0;bottom:16%;z-index:90;display:flex;flex-direction:column;gap:.55rem;padding:.55rem .5rem .55rem .6rem;background:rgba(10,10,15,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,204,0,.28);border-right:0;border-radius:1.4rem 0 0 1.4rem;box-shadow:0 18px 40px -14px rgba(0,0,0,.8);direction:ltr}
.dock a{position:relative;display:flex;align-items:center;justify-content:center;gap:.6rem;height:52px;min-width:52px;border-radius:999px;color:#fff;text-decoration:none;font-weight:800;font-size:.9rem;overflow:hidden;transition:background .25s,transform .25s,padding .3s}
.dock a i{font-size:1.5rem;line-height:1;flex:none}
.dock a span{max-width:0;opacity:0;white-space:nowrap;transition:max-width .35s ease,opacity .25s}
.dock a:hover{padding:0 1.1rem;transform:translateX(-2px)}
.dock a:hover span{max-width:110px;opacity:1}
.dock .dk-wa{background:#25d366;box-shadow:0 8px 20px -8px rgba(37,211,102,.9)}
.dock .dk-wa:hover{background:#1ebe5a}
.dock .dk-tel{background:#ffcc00;color:#111;box-shadow:0 8px 20px -8px rgba(255,204,0,.9)}
.dock .dk-tel:hover{background:#ffd633}
.dock .dk-wa i{animation:dkRing 3.2s ease-in-out infinite}
@keyframes dkRing{0%,86%,100%{transform:none}90%{transform:rotate(-14deg)}94%{transform:rotate(12deg)}97%{transform:rotate(-6deg)}}
@media(max-width:767px){.dock{bottom:12%;padding:.4rem .35rem .4rem .45rem;gap:.4rem;border-radius:1.1rem 0 0 1.1rem}.dock a{height:46px;min-width:46px}.dock a i{font-size:1.3rem}.dock a:hover{padding:0}.dock a:hover span{max-width:0;opacity:0}}
@media(prefers-reduced-motion:reduce){.dock .dk-wa i{animation:none}}

/* hero entrance runs in CSS only: it must not wait for JavaScript (keeps LCP early) */
.hero4 .reveal{opacity:1;transform:none;transition:none;animation:h4In .9s cubic-bezier(.2,.8,.2,1) both}
.hero4 .reveal[data-d="1"]{animation-delay:.1s}.hero4 .reveal[data-d="2"]{animation-delay:.2s}
.hero4 .h4-visual.reveal{animation-duration:.6s}
@keyframes h4In{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.hero4 .h4-visual.reveal{animation:h4Up .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes h4Up{from{transform:translateY(18px)}to{transform:none}}

/* article images: show the whole picture (they are 16:9 with text near the edges) */
.post-card .thumb{aspect-ratio:16/9;background:#0b0c10}
.post-card .thumb img{object-fit:contain}
.post-cover{background:#0b0c10}
.post-cover img{max-height:none;height:auto;object-fit:contain;aspect-ratio:16/9}
.post-card .thumb img{width:100%;height:100%}

/* ---- contact page v2 ---- */
.ctiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;margin-bottom:2.5rem}
.ctiles .ctile{flex-direction:row;align-items:center;gap:1rem;padding:1.1rem 1.3rem;height:auto;border-radius:1.2rem}
.ctiles .ct-ico{flex:none;margin:0}
.ctiles .ct-t{display:flex;flex-direction:column;min-width:0;gap:.1rem}
.ctiles .ct-t small{font-size:.8rem}.ctiles .ct-t b{font-size:1rem}
.act-consult h3::after{display:none}
.cform{display:flex;flex-direction:column}
.cform form{flex:1;display:flex}
.cform form>.row{flex:1;width:100%;margin:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto 1fr auto;gap:1rem}
.cform form>.row>*{width:auto;max-width:none;margin:0;padding:0}
.cform form>.row>.col-12{grid-column:1/-1}
.cform textarea.form-control{height:100%;min-height:170px;resize:vertical}
.cform .act-ico{margin-bottom:.3rem}
@media(max-width:767px){.cform form>.row{grid-template-columns:1fr}.cform form>.row>.col-md-6{grid-column:1/-1}.ctiles{grid-template-columns:1fr}}
}

/* contact dock: panel kept, icons centred */
.dock{right:0;bottom:16%;padding:.55rem;gap:.55rem;align-items:stretch}
.dock a{gap:0;width:52px;min-width:52px;height:52px;padding:0;justify-content:center}
.dock a i{display:block;width:1em;height:1em;line-height:1;text-align:center}
.dock a i::before{display:block;line-height:1}
.dock a span{margin:0}
.dock a:hover{width:auto;min-width:52px;padding:0 1.1rem;gap:.6rem;transform:none}
@media(max-width:767px){.dock{padding:.4rem;gap:.4rem}.dock a{width:46px;min-width:46px;height:46px}.dock a:hover{width:46px;padding:0;gap:0}}
/* dock: floating rounded square, equal padding all round so the icons sit centred */
.dock{right:12px;border:1px solid rgba(255,204,0,.35);border-radius:1.4rem;padding:.6rem;align-items:center}
.dock a{border:0}
.dock a i{font-size:1.45rem;margin:0}
.dock .dk-tel i{transform:translateX(0)}
@media(max-width:767px){.dock{right:10px;padding:.45rem;border-radius:1.2rem}}

/* draggable logo marquees */
.marquee.draggable{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.marquee.draggable.dragging{cursor:grabbing}
.marquee.draggable img{pointer-events:none;-webkit-user-drag:none}
.marquee.draggable .marquee-track{will-change:transform}

/* dock: no label on hover — only the icon moves; panel sits lower */
.dock{bottom:7%}
.dock a:hover,.dock a:hover span{width:52px;min-width:52px;padding:0;gap:0}
@media(max-width:767px){.dock{bottom:6%}.dock a:hover{width:46px;min-width:46px}}
.dock a:hover i{animation:dkHover .6s ease both}
.dock .dk-wa:hover i{animation-name:dkWiggle}
@keyframes dkHover{0%{transform:scale(1) rotate(0)}30%{transform:scale(1.25) rotate(-12deg)}60%{transform:scale(1.15) rotate(10deg)}100%{transform:scale(1.1) rotate(0)}}
@keyframes dkWiggle{0%{transform:scale(1) rotate(0)}25%{transform:scale(1.2) rotate(-14deg)}50%{transform:scale(1.2) rotate(12deg)}75%{transform:scale(1.15) rotate(-6deg)}100%{transform:scale(1.1) rotate(0)}}
.dock a:hover{filter:brightness(1.06)}

.site-pager .pager-info{color:#8b8fa3}.site-pager .page-link{min-width:2.6rem;text-align:center;display:inline-flex;justify-content:center}