/* ================= v2 — photo-led layouts ================= */
/* unified warm grade on all photos */
.hero__arch img,.intro__p img,.panel img,.bk__stack img,.feat img,.row img,.faq-sec__img img,.city img,.phero__img img,.svc-card__img img{filter:sepia(.28) saturate(.85) brightness(.82) contrast(1.05)}

/* hero visual */
.hero__in{grid-template-columns:1.1fr .9fr}
.hero__visual{position:relative;justify-self:center;width:min(420px,100%)}
.hero__arch{margin:0;aspect-ratio:4/5.2;border-radius:999px 999px 24px 24px;overflow:hidden;border:1px solid var(--line2);position:relative;box-shadow:0 40px 90px -30px rgba(0,0,0,.8)}
.hero__arch::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(18,18,16,.75))}
.hero__arch img{width:100%;height:115%;object-fit:cover;object-position:50% 60%;filter:sepia(.12) saturate(1) brightness(1.12) contrast(1.05)!important}
.hero__seal{position:absolute;bottom:-34px;right:-40px;width:150px;height:150px;border-radius:50%;background:rgba(18,18,16,.92);border:1px solid var(--line2);display:grid;place-items:center;backdrop-filter:blur(8px)}
.hero__seal-txt{position:absolute;inset:0;width:100%;height:100%;fill:var(--lit);font:400 11.5px var(--sans);letter-spacing:.5px}
.hero__seal-mono{width:52px}
.hero__chip{position:absolute;display:flex;flex-direction:column;padding:12px 18px;border-radius:14px;background:rgba(18,18,16,.82);border:1px solid var(--line2);backdrop-filter:blur(10px)}
.hero__chip b{font:500 22px/1.2 var(--display);background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__chip span{font-size:12px;color:var(--faint)}
.hero__chip--a{top:16%;left:-60px}
.hero__chip--b{top:48%;right:-50px}
@media (max-width:1100px){.hero__chip--a{left:-10px}.hero__chip--b{right:-10px}.hero__seal{right:-10px}}
@media (max-width:900px){.hero__visual{order:-1;width:min(290px,78%);margin-bottom:30px}.hero__seal{width:110px;height:110px;bottom:-20px}.hero__seal-txt{font-size:13px}.hero__seal-mono{width:38px}.hero__chip{padding:8px 12px}.hero__chip b{font-size:17px}}

/* intro collage */
.intro__in{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(30px,6vw,100px);align-items:center}
.intro__collage{position:relative;aspect-ratio:1/1.05}
.intro__p{position:absolute;margin:0;overflow:hidden;border-radius:var(--r);border:1px solid var(--line2)}
.intro__p img{width:100%;height:120%;object-fit:cover}
.intro__p--1{inset:0 22% 18% 0}
.intro__p--2{inset:42% 0 0 38%;box-shadow:0 30px 60px -20px rgba(0,0,0,.8);border-radius:200px 200px var(--r) var(--r)}
.intro__years{position:absolute;bottom:4%;left:0;display:flex;align-items:center;gap:14px;padding:16px 22px;border-radius:16px;background:var(--metal);color:#1a1410}
.intro__years strong{font:600 48px/1 var(--display)}
.intro__years span{font-size:13px;line-height:1.5;font-weight:500}
.intro__txt .quote__txt{font-size:clamp(22px,2.3vw,34px)}
.intro__txt .link-arrow{margin-top:28px}
.intro__collage--sm{width:clamp(240px,30vw,420px)}
@media (max-width:900px){.intro__in{grid-template-columns:1fr}.intro__collage{max-width:460px;width:100%}}

/* stats band on photo */
.stats-band{position:relative;overflow:hidden;padding-block:clamp(70px,9vw,120px);border-block:1px solid var(--line)}
.stats-band__bg{position:absolute;inset:0}
.stats-band__bg img{width:100%;height:130%;object-fit:cover;filter:sepia(.4) brightness(.32) saturate(.7)}
.stats-band__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,18,16,.85),rgba(18,18,16,.4),rgba(18,18,16,.85))}
.stats-band__in{position:relative;display:grid;grid-template-columns:repeat(4,1fr)}
.stats-band .stat{border:0;border-inline-start:1px solid var(--line2);padding:10px 20px}
.stats-band .stat:first-child{border:0}
.stats-band .stat span{color:var(--dim);font-weight:400;font-size:14px}
.band-quote{position:relative;text-align:center;font:500 clamp(24px,3vw,44px)/1.6 var(--display);max-width:900px;margin-inline:auto}
@media (max-width:800px){.stats-band__in{grid-template-columns:1fr 1fr;row-gap:30px}.stats-band .stat:nth-child(3){border:0}}

/* expanding service panels */
.panels{display:flex;gap:14px;height:min(560px,70vh)}
.panel{position:relative;flex:1;min-width:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);transition:flex 1s var(--ease),border-color .5s;isolation:isolate}
.panel.is-open{flex:3.4;border-color:var(--line2)}
.panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transform:scale(1.12);transition:transform 1.4s var(--ease),filter .8s}
.panel.is-open img{transform:scale(1)}
.panel::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(14,13,12,.95) 8%,rgba(14,13,12,.35) 60%,rgba(14,13,12,.55))}
.panel__n{position:absolute;top:22px;right:22px;font:500 15px var(--display);color:var(--lit)}
.panel__body{position:absolute;inset:auto 0 0 0;padding:clamp(20px,2.6vw,36px)}
.panel h3{font:500 clamp(19px,1.8vw,28px)/1.4 var(--display);white-space:nowrap}
.panel:not(.is-open) .panel__body{inset:70px 0 0 0;display:flex;justify-content:center}
.panel:not(.is-open) h3{writing-mode:vertical-rl;font-size:19px}
.panel p,.panel .link-arrow{display:none}
.panel.is-open p,.panel.is-open .link-arrow{display:flex;animation:pin .8s var(--ease) .3s both}
.panel.is-open p{display:block;color:var(--dim);margin-block:10px 16px;max-width:420px;white-space:normal}
@keyframes pin{from{opacity:0;transform:translateY(20px)}}
@media (max-width:900px){.panels{flex-direction:column;height:auto}.panel{height:96px;flex:none!important}.panel.is-open{height:360px}.panel:not(.is-open) .panel__body{inset:auto 0 0 0;display:block}.panel:not(.is-open) h3{writing-mode:horizontal-tb}}

/* bankruptcy sticky swap */
.bk{background:var(--bg2);border-block:1px solid var(--line)}
.bk__in{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,6vw,90px);align-items:start}
.bk__media{position:sticky;top:calc(var(--header) + 30px)}
.bk__stack{position:relative;aspect-ratio:4/4.6;border-radius:var(--r);overflow:hidden;border:1px solid var(--line2)}
.bk__stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(100% 0 0 0);transition:clip-path 1.1s var(--ease),transform 1.6s var(--ease);transform:scale(1.15)}
.bk__stack img.is-on{clip-path:inset(0);transform:scale(1);z-index:1}
.bk__lic{display:flex;gap:12px;margin-top:16px}
.bk__lic span{flex:1;display:flex;flex-direction:column;padding:14px 20px;border:1px solid var(--line2);border-radius:14px;font:500 24px/1.2 var(--display);color:var(--glow)}
.bk__lic small{font:400 12px var(--sans);color:var(--faint)}
.bk__items{margin-block:36px 34px;border-top:1px solid var(--line)}
.bk__items li{display:flex;gap:22px;padding:26px 0;border-bottom:1px solid var(--line);opacity:.35;transition:opacity .5s}
.bk__items li.is-on{opacity:1}
.bk__items b{font:500 34px/1 var(--display);background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent;flex:none;width:56px}
.bk__items h3{font:500 22px/1.4 var(--display);margin-bottom:6px}
.bk__items p{color:var(--dim)}
@media (max-width:900px){.bk__in{grid-template-columns:1fr}.bk__media{position:relative;top:0}.bk__stack{aspect-ratio:16/10}.bk__items li{opacity:1}}

/* process on photo */
.process2{position:relative;overflow:hidden;padding-block:clamp(80px,10vw,140px)}
.process2__bg{position:absolute;inset:0}
.process2__bg img{width:100%;height:130%;object-fit:cover;filter:sepia(.4) brightness(.25) saturate(.6)}
.process2__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--bg),transparent 30%,transparent 70%,var(--bg))}
.process2__in{position:relative}
.process2__steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pstep{padding:30px 26px;border-radius:var(--r);background:rgba(18,18,16,.55);border:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:border-color .4s}
.pstep:nth-child(even){margin-top:40px}
.pstep:hover{border-color:var(--line2)}
.pstep span{display:block;font:500 56px/1 var(--display);background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:22px}
.pstep h3{font:500 21px/1.4 var(--display);margin-bottom:8px}
.pstep p{color:var(--dim);font-size:15px}
@media (max-width:900px){.process2__steps{grid-template-columns:1fr 1fr}.pstep:nth-child(even){margin-top:0}}
@media (max-width:520px){.process2__steps{grid-template-columns:1fr}}

/* blog featured + rows */
.blog2__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:28px}
.feat{position:relative;display:block;border-radius:var(--r);overflow:hidden;min-height:480px;border:1px solid var(--line)}
.feat figure{position:absolute;inset:0;margin:0}
.feat img,.row img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .6s}
.feat::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,13,12,.95) 10%,transparent 70%)}
.feat__body{position:absolute;inset:auto 0 0 0;z-index:1;padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:10px}
.feat h3{font:500 clamp(22px,2.2vw,32px)/1.5 var(--display)}
.feat p{color:var(--dim)}
.feat:hover img,.row:hover img{transform:scale(1.07);filter:sepia(.1) brightness(.95)}
.blog2__list{display:flex;flex-direction:column;gap:16px}
.row{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:center;padding:12px;border-radius:var(--r);border:1px solid var(--line);background:var(--bg2);transition:border-color .4s,background .4s,transform .5s var(--ease)}
.row:hover{border-color:var(--line2);background:var(--bg3)}
.row figure{margin:0;aspect-ratio:4/3;border-radius:12px;overflow:hidden}
.row h3{font:500 17px/1.6 var(--display);margin-top:4px}
body[data-page="blog"] .blog2__grid{gap:clamp(20px,3vw,36px)}
body[data-page="blog"] .feat,body[data-page="blog"] .row{border-color:var(--line2);box-shadow:0 22px 55px -38px rgba(0,0,0,.9)}
body[data-page="blog"] .feat img,body[data-page="blog"] .row img{filter:sepia(.12) saturate(.95) brightness(.98) contrast(1.04)}
body[data-page="blog"] .feat::after{background:linear-gradient(0deg,rgba(10,9,8,.98) 4%,rgba(10,9,8,.72) 42%,rgba(10,9,8,.08) 82%)}
body[data-page="blog"] .feat h3,body[data-page="blog"] .row h3{color:var(--ivory);text-shadow:0 2px 16px rgba(0,0,0,.45)}
body[data-page="blog"] .feat p{color:rgba(241,234,228,.84)}
body[data-page="blog"] .post__cat{display:inline-flex;width:max-content;padding:5px 11px;border:1px solid var(--line2);border-radius:999px;background:rgba(217,165,125,.1);color:var(--glow)}
body[data-page="blog"] .post__more{color:var(--lit);font-weight:500}
body[data-page="blog"] .row{background:linear-gradient(145deg,var(--bg3),var(--bg2))}
body[data-page="blog"] .row:hover{border-color:var(--lit);background:linear-gradient(145deg,#28231f,var(--bg3));transform:translateX(-4px)}
@media (max-width:900px){.blog2__grid{grid-template-columns:1fr}.feat{min-height:360px}}
@media (max-width:480px){.row{grid-template-columns:100px 1fr}}

/* faq image */
.faq-sec__img{margin:28px 0 0;aspect-ratio:4/3;border-radius:200px 200px var(--r) var(--r);overflow:hidden;border:1px solid var(--line2)}
.faq-sec__img img{width:100%;height:120%;object-fit:cover}
.faq-sec .sec__head{position:sticky;top:calc(var(--header) + 20px)}
@media (max-width:900px){.faq-sec .sec__head{position:static}.faq-sec__img{display:none}}

/* offices / cities */
.cities{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,28px);padding:clamp(18px,3vw,46px);background:radial-gradient(circle at 50% 0,rgba(217,165,125,.12),transparent 38%),var(--bg2);border-block:1px solid var(--line);overflow:hidden}
.cities::before{content:"فروعنا";position:absolute;top:50%;left:50%;z-index:2;transform:translate(-50%,-50%) rotate(-90deg);padding:8px 20px;border:1px solid var(--line2);border-radius:999px;background:rgba(18,18,16,.9);color:var(--lit);font:500 12px/1 var(--sans);letter-spacing:.14em;pointer-events:none;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.city{position:relative;height:clamp(430px,44vw,620px);overflow:hidden;isolation:isolate;border:1px solid var(--line2);border-radius:clamp(20px,2vw,32px);box-shadow:0 30px 70px -38px rgba(0,0,0,.95);transition:transform .7s var(--ease),border-color .5s,box-shadow .7s var(--ease)}
.city img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;transform:scale(1.07);transition:transform 1.4s var(--ease),filter .8s}
.city::after{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(14,13,12,.08) 20%,rgba(14,13,12,.42) 56%,rgba(14,13,12,.96) 100%);transition:background .6s}
.city::before{content:"↗";position:absolute;top:24px;left:24px;width:48px;height:48px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.32);border-radius:50%;background:rgba(18,18,16,.38);backdrop-filter:blur(10px);color:var(--glow);font:300 23px/1 var(--sans);transition:transform .55s var(--ease),background .4s,color .4s}
.city:hover{transform:translateY(-8px);border-color:var(--lit);box-shadow:0 42px 80px -34px rgba(217,165,125,.3)}
.city:hover img{transform:scale(1);filter:sepia(.08) saturate(.95) brightness(.95) contrast(1.04)}
.city:hover::before{transform:rotate(45deg);background:var(--lit);color:#1a1410}
.city__body{position:absolute;inset:auto clamp(18px,2.4vw,34px) clamp(18px,2.4vw,34px);padding:clamp(22px,3vw,38px);border:1px solid rgba(255,255,255,.14);border-radius:20px;background:linear-gradient(135deg,rgba(18,18,16,.82),rgba(30,28,25,.58));backdrop-filter:blur(14px);box-shadow:inset 0 1px rgba(255,255,255,.08);transition:transform .65s var(--ease),border-color .5s}
.city:hover .city__body{transform:translateY(-4px);border-color:var(--line2)}
.city__body span{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--line2);border-radius:999px;background:rgba(217,165,125,.08);color:var(--lit);font-size:12px}
.city__body span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lit);box-shadow:0 0 0 4px rgba(217,165,125,.12)}
.city h3{margin-top:10px;font:500 clamp(46px,5.2vw,78px)/1.05 var(--display);background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent}
.city p{display:flex;align-items:center;gap:8px;color:var(--dim)}
.city p::before{content:"";width:8px;height:8px;border:2px solid var(--lit);border-radius:50% 50% 50% 0;transform:rotate(-45deg)}
.city b{display:inline-block;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-weight:500;color:var(--glow);font-size:17px;letter-spacing:.04em}
@media (max-width:700px){.cities{grid-template-columns:1fr;padding:14px}.cities::before{display:none}.city{height:min(125vw,520px)}.city::before{top:18px;left:18px;width:44px;height:44px}.city__body{inset:auto 14px 14px;padding:22px}.city h3{font-size:48px}}

/* inner page hero with photo */
.phero{min-height:clamp(420px,46vw,560px);display:flex;align-items:center}
.phero__mono{display:none}
.phero__img{position:absolute;margin:0;top:0;bottom:0;left:0;width:50%;overflow:hidden;-webkit-mask-image:linear-gradient(270deg,transparent 0%,#000 50%);mask-image:linear-gradient(270deg,transparent 0%,#000 50%)}
.phero__img img{width:100%;height:100%;object-fit:cover}
.phero__badge{position:absolute;bottom:40px;left:var(--g);width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:rgba(18,18,16,.8);border:1px solid var(--line2);backdrop-filter:blur(8px)}
.phero__badge svg{width:46px}
.phero__in{max-width:calc(var(--max) + var(--g)*2);margin-inline:auto}
.phero__in>*{max-width:720px}
@media (max-width:900px){.phero__img{width:100%;opacity:.3;-webkit-mask-image:linear-gradient(0deg,transparent,#000);mask-image:linear-gradient(0deg,transparent,#000)}.phero__badge{display:none}}

/* services page cards with photo */
.svc-card{padding:0;min-height:0}
.svc-card__img{margin:0;aspect-ratio:16/10;overflow:hidden}
.svc-card__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .6s}
.svc-card:hover .svc-card__img img{transform:scale(1.08);filter:sepia(.1) brightness(.95)}
.svc-card>b,.svc-card>h3,.svc-card>p,.svc-card>.link-arrow{margin-inline:28px}
.svc-card>b{margin-top:22px}
.svc-card>.link-arrow{margin-bottom:26px}

/* book: flat stacking (no preserve-3d) so the cover always sits on top */
.book{transform-style:flat}
.book__cover{transform:none;z-index:2}
.book__pages{transform:translateX(-12px);z-index:1}
@media (max-width:900px){.hero__in{grid-template-columns:1fr}.hero__visual{justify-self:center}}

/* ---- performance / no-flash ---- */
html.js:not(.ready) body>*:not(.loader){visibility:hidden}
.pstep{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(18,18,16,.82)}
.hero__chip,.hero__seal,.founder__badge,.phero__badge{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(18,18,16,.92)}
[data-parallax],.stats-band__bg img,.process2__bg img,.hero__arch img{will-change:transform}
.ticker__track{will-change:transform}
.grain{display:none}

/* ---- social icons ---- */
.social{display:flex;gap:8px}
.social a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line2);color:var(--lit);transition:background .4s,color .4s,transform .5s var(--ease)}
.social svg{width:18px;height:18px}
.social a:hover{background:var(--metal);color:#1a1410;transform:translateY(-3px) rotate(-6deg)}
.topbar__end{display:flex;align-items:center;gap:18px}
.topbar .social{gap:4px}
.topbar .social a{width:28px;height:28px;border:0}
.topbar .social svg{width:15px;height:15px}
.ftr__social{display:flex;align-items:center;gap:14px;margin-top:18px}
.ftr__social>span{font-size:13px;color:var(--faint)}
.ftr__social a{width:40px;height:40px}
.wa-float{display:none}

/* ---- floating dock (whatsapp + call), stacked & floating ---- */
.dock{position:fixed;right:22px;bottom:24px;z-index:80;display:flex;flex-direction:column;gap:12px}
.dock__btn{position:relative;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;box-shadow:0 14px 30px -10px rgba(0,0,0,.7);animation:dock-pulse 2.8s ease-in-out infinite;transition:transform .4s var(--ease)}
.dock__btn svg{width:26px;height:26px;animation:dock-icon-pulse 2.2s ease-in-out infinite;transform-origin:center}
.dock__btn--wa{background:#25d366;color:#fff}
.dock__btn--call{background:var(--metal);color:#1a1410;animation-delay:-1.7s}
.dock__btn--call svg{animation-delay:-1.1s}
.dock__btn::before{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid currentColor;opacity:0;animation:dock-ring 2.8s ease-out infinite}
.dock__btn--wa::before{border-color:#25d366}
.dock__btn--call::before{border-color:var(--lit);animation-delay:-1.3s}
.dock__btn:hover{animation-play-state:paused;transform:scale(1.1)}
.dock__tip{position:absolute;right:calc(100% + 12px);white-space:nowrap;padding:7px 14px;border-radius:10px;background:rgba(18,18,16,.95);border:1px solid var(--line2);color:var(--ivory);font-size:13px;opacity:0;transform:translateX(8px);pointer-events:none;transition:.35s var(--ease)}
.dock__btn:hover .dock__tip{opacity:1;transform:none}
@keyframes dock-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes dock-ring{0%,35%{transform:scale(1);opacity:.32}75%,100%{transform:scale(1.25);opacity:0}}
@keyframes dock-icon-pulse{0%,100%{transform:scale(1)}45%{transform:scale(1.14)}60%{transform:scale(1.04)}}

/* ---- back-to-top with scroll-progress border ---- */
.ptop{position:fixed;left:22px;bottom:24px;z-index:80;width:56px;height:56px;border-radius:50%;background:rgba(18,18,16,.92);display:grid;place-items:center;color:var(--lit);opacity:0;transform:translateY(20px) scale(.8);pointer-events:none;transition:opacity .45s,transform .6s var(--ease),background .4s,color .4s}
.ptop.is-on{opacity:1;transform:none;pointer-events:auto}
.ptop__ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ptop__ring circle{fill:none;stroke:var(--line2);stroke-width:2}
.ptop__ring .ptop__bar{stroke:var(--lit);stroke-linecap:round;transition:stroke-dashoffset .12s linear}
.ptop__ic{width:20px;height:20px;transition:transform .4s var(--ease)}
.ptop:hover{background:var(--lit);color:#1a1410}
.ptop:hover .ptop__ic{transform:translateY(-3px)}
.ftr .totop{display:none}
@media (max-width:640px){.dock{right:14px;bottom:16px}.ptop{left:14px;bottom:16px}.dock__btn,.ptop{width:50px;height:50px}.dock__tip{display:none}}

@media (max-width:640px){.topbar .social{display:none}.topbar__info a{white-space:nowrap}}