/* BADR Atelier V36.24 — Premium Visual & Interaction System */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&family=Tajawal:wght@400;500;600;700;800&display=swap');
:root{--badr-font-en:'Montserrat',Arial,sans-serif;--badr-font-ar:'Tajawal',Tahoma,Arial,sans-serif;--badr-premium-gold:#d7b35b;--badr-premium-dark:#07110e}
html{scroll-behavior:smooth}
body{font-family:var(--badr-font-en)!important;text-rendering:optimizeLegibility}
body.is-ar{font-family:var(--badr-font-ar)!important}
body :is(button,input,select,textarea){font-family:inherit}
body :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.display,.section-label,.eyebrow,.button,.nav-link,.brand-tagline){font-family:var(--badr-font-en)!important}
body.is-ar :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.display,.section-label,.eyebrow,.button,.nav-link,.brand-tagline){font-family:var(--badr-font-ar)!important}

/* Header: one strategic statement beside the BADR logo */
.site-header .brand-block{align-items:center!important}
.site-header .brand-tagline-single{display:flex!important;align-items:center!important;min-height:38px;padding-left:14px;margin-left:14px;border-left:1px solid rgba(202,162,79,.28)}
.site-header .brand-tagline-single b{font-size:.68rem!important;line-height:1.45!important;letter-spacing:.055em!important;max-width:185px;color:#74684e!important;font-weight:700!important}
.is-ar .site-header .brand-tagline-single{padding-left:0;padding-right:14px;margin-left:0;margin-right:14px;border-left:0;border-right:1px solid rgba(202,162,79,.28)}
.is-ar .site-header .brand-tagline-single b{font-size:.78rem!important;letter-spacing:0!important;line-height:1.5!important}

/* Curated BADR project atmosphere on all general pages */
body.badr-cinematic-v3623 main{position:relative;isolation:isolate}
body.badr-cinematic-v3623 main::before{content:'';position:fixed;inset:0;z-index:-6;background-image:linear-gradient(180deg,rgba(246,242,233,.90),rgba(246,242,233,.96)),var(--badr-cinematic-bg);background-size:cover;background-position:var(--badr-cinematic-pos,center);filter:saturate(.94) contrast(1.035);transform:scale(1.01);pointer-events:none}
body.badr-cinematic-v3623 main>section{position:relative}
body.badr-cinematic-v3623 main>section:not(.section-dark):not(.cta):not(.iv17-hero):not(.career-final){background-color:rgba(247,244,237,.90);backdrop-filter:blur(1.5px)}
body.badr-cinematic-v3623 main>section:nth-of-type(2n):not(.section-dark):not(.cta):not(.iv17-hero):not(.career-final){background-color:rgba(255,253,248,.93)}
body.badr-cinematic-v3623 .badr-v3623-hero{min-height:min(82vh,850px)!important;background:#07110e!important}
body.badr-cinematic-v3623 .badr-v3623-hero::before{filter:saturate(1.05) contrast(1.05) brightness(.92)!important;animation:badrHeroBreath 18s ease-in-out infinite alternate}
body.badr-cinematic-v3623 .badr-v3623-hero::after{background:linear-gradient(90deg,rgba(4,9,8,.90) 0%,rgba(4,9,8,.72) 38%,rgba(4,9,8,.28) 72%,rgba(4,9,8,.48) 100%),linear-gradient(180deg,rgba(0,0,0,.08),rgba(4,9,8,.62))!important}
@keyframes badrHeroBreath{from{transform:scale(1.015)}to{transform:scale(1.07)}}

/* Better hero image treatment for native image-led hero sections */
:is(.iv17-hero-bg,.case12-hero img,.rehab-hero img,.project-hero img,.diplomatic-hero-bg){image-rendering:auto;filter:saturate(1.05) contrast(1.035)}
.iv17-hero-bg{object-position:center 48%!important}

/* Premium content hierarchy inspired by contemporary Saudi real-estate sites */
main :is(.h1,h1){letter-spacing:-.038em;font-weight:650}
main :is(.h2,h2){letter-spacing:-.028em;font-weight:650}
body.is-ar main :is(.h1,h1,.h2,h2){letter-spacing:0;font-weight:700}
main p{line-height:1.78}
.section-label,.eyebrow{letter-spacing:.14em;font-weight:700}
body.is-ar .section-label,body.is-ar .eyebrow{letter-spacing:0}

/* Interactive layer: refined, not gimmicky */
.badr-interactive{position:relative;overflow:hidden;transition:transform .38s cubic-bezier(.2,.72,.2,1),box-shadow .38s ease,border-color .38s ease,background-color .38s ease!important;will-change:transform}
.badr-interactive::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(215,179,91,.14),transparent 46%);opacity:0;transition:opacity .32s ease;z-index:1}
.badr-interactive:hover{transform:translateY(-6px);box-shadow:0 28px 70px rgba(23,18,9,.13)!important;border-color:rgba(202,162,79,.42)!important}
.badr-interactive:hover::after{opacity:1}
.badr-interactive>*{position:relative;z-index:2}
:is(.project-card,.portfolio-card,.service-card,.career-path-card,.career-value-grid article,.iv17-service-card,.team-card,.contact-item,.stat,.proof-card) img{transition:transform .9s cubic-bezier(.2,.72,.2,1),filter .5s ease!important}
:is(.project-card,.portfolio-card,.service-card,.career-path-card,.team-card):hover img{transform:scale(1.045);filter:saturate(1.08) contrast(1.03)}

/* Buttons / icons */
.button{position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease!important}
.button::after{content:'';position:absolute;top:-80%;bottom:-80%;left:-45%;width:28%;transform:rotate(16deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);transition:left .55s ease;pointer-events:none}
.button:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(21,17,8,.13)}
.button:hover::after{left:125%}
:is(.social-icon,.floating-wa-icon,.service-icon,.icon,.contact-icon){transition:transform .34s cubic-bezier(.2,.72,.2,1),filter .34s ease}
:is(a,button,.badr-interactive):hover :is(.social-icon,.floating-wa-icon,.service-icon,.icon,.contact-icon){transform:translateY(-2px) rotate(-4deg) scale(1.08);filter:drop-shadow(0 6px 12px rgba(202,162,79,.24))}

/* Scroll reveal refinement */
.badr-section-premium{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .75s cubic-bezier(.2,.72,.2,1)}
.badr-section-premium.badr-in{opacity:1;transform:none}

/* Logo on cinematic intro stays crisp */
.bci-brand img{image-rendering:auto!important}

/* Accessibility */
:focus-visible{outline:2px solid #c89f48!important;outline-offset:4px!important}
@media(max-width:900px){.site-header .brand-tagline-single{display:none!important}body.badr-cinematic-v3623 main::before{background-attachment:scroll}.badr-interactive:hover{transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.badr-section-premium{opacity:1;transform:none}}


/* ===============================================================
   BADR V36.26 — Image-free interaction refinements
   =============================================================== */
body.badr-cinematic-v3623 main::before{background-image:none!important;background:radial-gradient(circle at 92% 12%,rgba(215,179,91,.055),transparent 25%),linear-gradient(180deg,#f7f3ea,#f2ecdf)!important;filter:none!important;transform:none!important}
body.badr-cinematic-v3623 main>section:not(.section-dark):not(.cta):not(.iv17-hero):not(.career-final){background-color:rgba(247,244,237,.94)}
body.badr-cinematic-v3623 main>section:nth-of-type(2n):not(.section-dark):not(.cta):not(.iv17-hero):not(.career-final){background-color:rgba(255,253,248,.96)}

/* Scroll progress */
#badrScrollProgress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:2147482000;pointer-events:none;background:rgba(215,179,91,.10)}
#badrScrollProgress>i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#9f7a2d,#f0d98c,#c99f48);box-shadow:0 0 18px rgba(215,179,91,.5);will-change:transform}

/* Ambient cursor light; desktop only */
#badrAmbientCursor{position:fixed;left:0;top:0;width:240px;height:240px;margin:-120px 0 0 -120px;border-radius:50%;pointer-events:none;z-index:2;background:radial-gradient(circle,rgba(215,179,91,.075),rgba(215,179,91,.028) 34%,transparent 70%);opacity:0;transform:translate3d(var(--cx,-300px),var(--cy,-300px),0);transition:opacity .25s ease;mix-blend-mode:multiply}
html.badr-pointer-live #badrAmbientCursor{opacity:1}

/* More fluid cards and icon language */
.badr-interactive{transform-style:preserve-3d;perspective:900px}
.badr-interactive .badr-depth{transform:translateZ(18px)}
.badr-interactive::before{content:"";position:absolute;left:18px;right:18px;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(215,179,91,.65),transparent);transform:scaleX(0);transform-origin:center;transition:transform .42s ease;z-index:3}
.badr-interactive:hover::before{transform:scaleX(1)}
:is(.social-icon,.floating-wa-icon,.service-icon,.icon,.contact-icon,svg){transform-origin:center;will-change:transform}

/* Navigation and links become more tactile */
.site-header a,.site-footer a,main a:not(.button){text-underline-offset:4px;transition:color .25s ease,opacity .25s ease,transform .25s ease}
.site-header .nav-link{position:relative}
.site-header .nav-link::after{content:"";position:absolute;left:12%;right:12%;bottom:-5px;height:1px;background:#c99f48;transform:scaleX(0);transition:transform .28s ease;transform-origin:center}
.site-header .nav-link:hover::after,.site-header .nav-link[aria-current="page"]::after{transform:scaleX(1)}

/* Section-edge micro motion */
main>section{--section-shift:0px}
main>section.badr-in .section-label,main>section.badr-in .eyebrow{animation:badrLabelReveal .7s ease both}
@keyframes badrLabelReveal{from{opacity:.25;letter-spacing:.22em}to{opacity:1}}

/* Elegant page divider generated without images */
.badr-flow-divider{height:72px;position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(247,244,237,.98),rgba(247,244,237,.82))}
.badr-flow-divider::before{content:"";position:absolute;left:7%;right:7%;top:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(184,138,47,.32),transparent)}
.badr-flow-divider::after{content:"BADR • ARCHITECTURE • DEVELOPMENT • BIM";position:absolute;white-space:nowrap;left:50%;top:50%;transform:translate(-50%,-50%);padding:0 20px;background:#f7f4ed;color:#9a7b3d;font:600 8px/1 'Montserrat',Arial,sans-serif;letter-spacing:.28em}
body.is-ar .badr-flow-divider::after{content:"BADR • DEVELOPMENT • ARCHITECTURE • BIM"}

@media(max-width:900px){#badrAmbientCursor{display:none}.badr-flow-divider{height:50px}.badr-flow-divider::after{font-size:7px;letter-spacing:.14em}}
@media(prefers-reduced-motion:reduce){#badrAmbientCursor{display:none}.badr-interactive{transform:none!important}}