@font-face{font-family:'DINAr';src:url(../fonts/dinnext-ar-300.woff2) format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'DINAr';src:url(../fonts/dinnext-ar-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'DINAr';src:url(../fonts/dinnext-ar-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'DINAr';src:url(../fonts/dinnext-ar-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'GothamL';src:url(../fonts/gotham-300.woff2) format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'GothamL';src:url(../fonts/gotham-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'GothamL';src:url(../fonts/gotham-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'GothamL';src:url(../fonts/gotham-700.woff2) format('woff2');font-weight:700;font-display:swap}

:root{
  --gold:#C5A065; --silver:#8C96A3;
  --bg:#080E19; --bg2:#0D1826; --bg3:#132235;
  --ink:#EAEFF5; --dim:#94A1B2; --line:rgba(140,150,163,.18); --line2:rgba(140,150,163,.10);
  --card:rgba(19,34,53,.62); --glow:rgba(197,160,101,.18);
  --r:16px; --hd:84px;
}
html[data-theme="light"]{
  --bg:#F6F8FA; --bg2:#FFFFFF; --bg3:#EEF1F5;
  --ink:#0A1220; --dim:#55637A; --line:rgba(10,18,32,.13); --line2:rgba(10,18,32,.07);
  --card:rgba(255,255,255,.82); --glow:rgba(197,160,101,.16);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:'DINAr','GothamL',sans-serif;
  font-size:17px;line-height:1.85;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  transition:background .5s ease,color .5s ease}
html[lang="en"] body{font-family:'GothamL','DINAr',sans-serif;line-height:1.72}
a{color:inherit;text-decoration:none} img{display:block;max-width:100%}
button{font:inherit}
::selection{background:var(--gold);color:#0A1220}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.wrap{max-width:1200px;margin:0 auto;padding-inline:clamp(18px,5vw,56px)}
.lat{font-family:'GothamL',sans-serif}
.num{font-family:'GothamL',sans-serif;direction:ltr;unicode-bidi:isolate;text-align:start;display:inline-block}
html[lang="ar"] body :not(.lat):not(.num){letter-spacing:normal}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{letter-spacing:normal}

/* ============ header ============ */
.hd{position:fixed;inset-block-start:0;inset-inline:0;z-index:70;transition:.45s ease}
.hd.is-stuck{background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(20px);
  box-shadow:0 1px 0 var(--line2)}
.hd .wrap{display:flex;align-items:center;gap:20px;height:var(--hd);transition:height .45s}
.hd.is-stuck .wrap{height:68px}
.brand{display:flex;align-items:center;gap:clamp(10px,1.5vw,18px);flex-shrink:0}
.brand .bm{height:48px;transition:height .45s}
.brand .bw{height:40px;transition:height .45s}
.brand .divider{width:1px;align-self:stretch;margin-block:8px;background:var(--line);flex:0 0 1px}
.hd.is-stuck .brand .bm{height:40px}
.hd.is-stuck .brand .bw{height:33px}
html[data-theme="light"] .logo-d{display:none}
html[data-theme="dark"] .logo-l{display:none}

.nav{display:flex;gap:6px;margin-inline-start:auto;font-size:14.5px}
.nav a{color:var(--dim);padding:9px 15px;border-radius:999px;transition:.3s;white-space:nowrap}
.nav a:hover{color:var(--ink);background:var(--line2)}
.nav a.is-active{color:var(--gold);background:var(--glow)}
.tools{display:flex;gap:8px;flex-shrink:0}
.tool{width:44px;height:44px;border-radius:999px;border:1px solid var(--line);background:transparent;
  color:var(--dim);cursor:pointer;font-size:12.5px;display:grid;place-items:center;transition:.3s}
.tool:hover{border-color:var(--gold);color:var(--gold);background:var(--glow)}
.tool svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
html[data-theme="dark"] .ico-sun{display:none}
html[data-theme="light"] .ico-moon{display:none}
.burger{display:none;width:44px;height:44px;border-radius:999px;border:1px solid var(--line);
  background:transparent;cursor:pointer;place-items:center;gap:5px;flex-direction:column}
.burger span{display:block;width:17px;height:1.5px;background:var(--dim);border-radius:2px;transition:.35s ease}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.2px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.2px) rotate(-45deg)}
.drawer{position:fixed;inset-block-start:var(--hd);inset-inline:0;z-index:65;
  background:color-mix(in srgb,var(--bg) 97%,transparent);backdrop-filter:blur(22px);
  border-block-start:1px solid var(--line2);display:grid;gap:2px;
  padding:14px clamp(18px,5vw,56px) 26px;transform:translateY(-14px);opacity:0;visibility:hidden;transition:.35s ease}
.hd.is-stuck + .drawer{inset-block-start:68px}
.drawer.is-open{transform:none;opacity:1;visibility:visible}
.drawer a{padding:15px 12px;border-radius:12px;color:var(--dim);font-size:17px;transition:.25s}
.drawer a:active,.drawer a:hover{background:var(--line2);color:var(--gold)}
@media(max-width:1000px){.nav{display:none}.burger{display:flex}.tools{margin-inline-start:auto}}
@media(max-width:520px){
  :root{--hd:72px}
  .brand .bm{height:38px}.brand .bw{height:30px}
  .hd.is-stuck .brand .bm{height:34px}.hd.is-stuck .brand .bw{height:27px}
  .tool,.burger{width:40px;height:40px}.tools{gap:6px}
}

/* ============ section photography ============ */
.sec-photo{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.sec-photo picture,.hero-photo picture{display:block;width:100%;height:100%}
.sec-photo img{width:100%;height:100%;object-fit:cover;opacity:.25;
  transition:opacity .5s ease;will-change:transform}
.sec-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--bg) 0%,transparent 22%,transparent 78%,var(--bg) 100%)}
html[data-photos="cine"] .sec-photo img{opacity:.34;transform:scale(1.14)}
html[data-photos="cine"] .sec-photo::before{content:"";position:absolute;inset:0;z-index:2;
  background:radial-gradient(120% 80% at 50% 50%,transparent 38%,rgba(6,10,18,.55) 100%)}
html[data-theme="light"] .sec-photo img{opacity:.13}
html[data-theme="light"][data-photos="cine"] .sec-photo img{opacity:.18}
html[data-theme="light"] .sec-photo::after{
  background:linear-gradient(180deg,var(--bg) 0%,rgba(246,248,250,.62) 24%,rgba(246,248,250,.62) 76%,var(--bg) 100%)}
html[data-theme="light"][data-photos="cine"] .sec-photo::before{
  background:radial-gradient(120% 80% at 50% 50%,transparent 40%,rgba(246,248,250,.6) 100%)}
.sec > .wrap{position:relative;z-index:2}
@media(max-width:880px){
  .sec-photo{inset-block-end:auto;height:min(56vh,440px)}
  .sec-photo img{opacity:.27}
  .sec-photo::after{background:linear-gradient(180deg,var(--bg) 0%,transparent 32%,transparent 60%,var(--bg) 100%)}
  html[data-theme="light"] .sec-photo::after{
    background:linear-gradient(180deg,var(--bg) 0%,rgba(246,248,250,.58) 32%,rgba(246,248,250,.72) 60%,var(--bg) 100%)}
  html[data-theme="light"] .sec-photo img{opacity:.15}
}

/* ============ animated curve field ============ */
.stage{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2}
.stage svg{position:absolute;inset-block-end:-4%;inset-inline-start:50%;transform:translateX(-50%);
  width:min(1500px,150vw);height:auto;opacity:.5}
html[data-theme="light"] .stage svg{opacity:.3}
.stage path{fill:none;stroke:url(#gA);stroke-linecap:round}
.stage g{animation:sway 18s ease-in-out infinite alternate;transform-origin:50% 100%}
.stage g:nth-child(2){animation-duration:23s;animation-delay:-4s}
.stage g:nth-child(3){animation-duration:28s;animation-delay:-9s}
@keyframes sway{from{transform:translate3d(-1.2%,0,0) scaleY(.97)}to{transform:translate3d(1.6%,0,0) scaleY(1.03)}}
.orb{position:absolute;border-radius:50%;pointer-events:none;filter:blur(10px)}
.orb-1{inset-block-start:6%;inset-inline-end:4%;width:44vw;height:44vw;
  background:radial-gradient(circle,var(--glow),transparent 64%);animation:float 20s ease-in-out infinite alternate}
.orb-2{inset-block-end:-14%;inset-inline-start:-8%;width:52vw;height:52vw;
  background:radial-gradient(circle,rgba(140,150,163,.14),transparent 66%);animation:float 26s ease-in-out infinite alternate-reverse}
@keyframes float{to{transform:translate3d(5%,-7%,0) scale(1.15)}}

/* ============ hero ============ */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;text-align:center;
  padding-block:calc(var(--hd) + 60px) 110px;overflow:hidden}
.hero .wrap{position:relative;z-index:3}
.hero-photo{position:absolute;inset:0;z-index:1;overflow:hidden}
.hero-photo img{width:100%;height:100%;object-fit:cover;opacity:.30}
html[data-photos="cine"] .hero-photo img{opacity:.42;animation:kb 26s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.13)}}
html[data-theme="light"] .hero-photo img{opacity:.16}
.hero-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,14,25,.72) 0%,rgba(8,14,25,.5) 40%,rgba(8,14,25,.8) 80%,var(--bg) 100%)}
html[data-theme="light"] .hero-photo::after{
  background:linear-gradient(180deg,rgba(246,248,250,.8) 0%,rgba(246,248,250,.6) 40%,rgba(246,248,250,.85) 80%,var(--bg) 100%)}
h1{font-size:clamp(27px,4.6vw,54px);font-weight:700;line-height:1.44;letter-spacing:-.5px;max-width:none}
html[lang="en"] h1{font-size:clamp(25px,3.8vw,45px);line-height:1.24;letter-spacing:-1.2px}
.hero-sub{margin:26px auto 0;max-width:58ch;color:var(--dim);font-weight:300;font-size:clamp(15px,1.7vw,18.5px)}
.cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:40px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:15.5px;font-weight:500;
  min-height:52px;padding:15px 38px;border-radius:999px;cursor:pointer;border:1px solid transparent;transition:.35s ease}
.btn-fill{background:var(--gold);color:#0A1220}
.btn-fill:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(197,160,101,.3)}
.mouse{position:absolute;inset-block-end:30px;inset-inline:0;display:grid;justify-items:center;gap:10px;
  font-size:11px;color:var(--dim);z-index:3}
.mouse i{display:block;width:22px;height:34px;border:1px solid var(--line);border-radius:12px;position:relative}
.mouse i::after{content:"";position:absolute;inset-inline:0;margin:auto;inset-block-start:7px;width:3px;height:6px;
  border-radius:2px;background:var(--gold);animation:wheel 1.9s ease-in-out infinite}
@keyframes wheel{50%{transform:translateY(11px);opacity:.2}}
@media(max-width:760px){.mouse{display:none}.hero{min-height:auto;padding-block:calc(var(--hd) + 54px) 72px}}

/* ============ sections ============ */
.sec{position:relative;padding-block:clamp(66px,9vw,130px);overflow:hidden}
.kick{display:inline-block;font-size:11.5px;letter-spacing:.2em;color:var(--gold);
  padding:7px 16px;border:1px solid var(--line);border-radius:999px;margin-bottom:24px}
h2{font-size:clamp(23px,3.4vw,40px);font-weight:700;line-height:1.42;letter-spacing:-.4px}
.lead{font-size:clamp(16.5px,1.9vw,21px);font-weight:300;line-height:1.8;color:var(--dim);margin-top:20px;max-width:74ch}
.center{text-align:center}.center .lead{margin-inline:auto}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:28px;margin-top:48px}
.cols p{color:var(--dim);font-size:15.5px}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,70px);align-items:center}
.about-grid p{color:var(--dim);margin-bottom:16px}
.stmt{font-size:clamp(19px,2.5vw,29px);font-weight:300;line-height:1.7}
@media(max-width:880px){.about-grid{grid-template-columns:1fr}}

.quote{max-width:900px;margin:0 auto;text-align:center}
.quote .mark{height:58px;margin:0 auto 26px;opacity:.6}
.quote p{font-size:clamp(19px,2.6vw,31px);font-weight:300;line-height:1.68}

/* ============ fields ============ */
.fields{display:grid;grid-template-columns:310px 1fr;gap:clamp(20px,3.5vw,58px);margin-top:52px;align-items:start}
.tabs{display:grid;gap:4px}
.fitem{border-radius:12px;overflow:hidden}
.tab{display:flex;align-items:center;gap:14px;text-align:start;font-size:16.5px;width:100%;
  background:transparent;border:0;color:var(--dim);cursor:pointer;padding:15px 18px;min-height:56px;
  border-radius:12px;transition:.35s ease;position:relative}
.tab .n{font-family:'GothamL',sans-serif;font-size:12px;letter-spacing:.1em;opacity:.6;flex-shrink:0}
.tab .tname{flex:1}
.tab .chev{display:none;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;transition:transform .4s ease;flex-shrink:0}
.tab:hover{color:var(--ink);background:var(--line2)}
.tab.is-on{color:var(--ink);background:var(--card);font-weight:500}
.tab.is-on .n{color:var(--gold);opacity:1}
.tab.is-on::before{content:"";position:absolute;inset-block:15px;inset-inline-start:0;width:3px;
  border-radius:2px;background:var(--gold)}
.acc{display:none}
.panel{background:var(--card);border:1px solid var(--line2);border-radius:var(--r);
  padding:clamp(26px,3.6vw,48px);min-height:290px;position:relative;overflow:hidden;backdrop-filter:blur(10px)}
.panel::after{content:"";position:absolute;inset-block-start:0;inset-inline-end:0;width:220px;height:220px;
  background:radial-gradient(circle at 100% 0,var(--glow),transparent 68%);pointer-events:none}
.panel .big{font-family:'GothamL',sans-serif;font-size:50px;font-weight:300;color:var(--gold);line-height:1;margin-bottom:18px}
.panel h3{font-size:clamp(20px,2.3vw,26px);font-weight:700;margin-bottom:14px}
.panel p{color:var(--dim);font-size:16px;max-width:66ch}
.panel .fade{animation:pop .5s cubic-bezier(.2,.75,.2,1) both}
@keyframes pop{from{opacity:0;transform:translateY(14px)}}
@media(max-width:880px){
  .fields{grid-template-columns:1fr;gap:0;margin-top:34px}
  .panel{display:none}
  .tabs{gap:0;border:1px solid var(--line2);border-radius:var(--r);overflow:hidden;background:var(--card);backdrop-filter:blur(10px)}
  .fitem{border-radius:0}
  .fitem+.fitem{border-block-start:1px solid var(--line2)}
  .tab{border-radius:0;padding:18px;font-size:17px}
  .tab .chev{display:block}
  .tab.is-on{background:transparent}
  .tab.is-on::before{inset-block:18px}
  .fitem.open .tab{color:var(--ink);font-weight:500}
  .fitem.open .tab .n{color:var(--gold);opacity:1}
  .fitem.open .chev{transform:rotate(180deg);color:var(--gold)}
  .acc{display:block;max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.2,.75,.2,1)}
  .fitem.open .acc{max-height:620px}
  .acc-in{padding:0 18px 22px;color:var(--dim);font-size:15.5px;line-height:1.8}
}

/* ============ attributes ============ */
.attrs{display:grid;grid-template-columns:repeat(auto-fit,minmax(265px,1fr));gap:18px;margin-top:48px}
.attr{background:var(--card);border:1px solid var(--line2);border-radius:var(--r);padding:clamp(24px,3.2vw,38px);
  transition:.45s cubic-bezier(.2,.75,.2,1);backdrop-filter:blur(10px)}
.attr:hover{transform:translateY(-6px);border-color:rgba(197,160,101,.5);box-shadow:0 20px 50px rgba(0,0,0,.22)}
.attr .dot{width:44px;height:44px;border-radius:12px;background:var(--glow);display:grid;place-items:center;margin-bottom:20px}
.attr .dot svg{width:20px;height:20px;fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.attr h3{font-size:20px;font-weight:700;margin-bottom:11px}
.attr p{color:var(--dim);font-size:15px}

/* ============ contact ============ */
.contact-card{background:var(--card);border:1px solid var(--line2);border-radius:24px;
  padding:clamp(22px,4.6vw,60px);position:relative;overflow:hidden;backdrop-filter:blur(12px)}
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,60px);align-items:start;position:relative;z-index:2}
.info{display:grid;gap:20px}
.irow{display:flex;gap:14px;align-items:flex-start}
.ico{width:40px;height:40px;border-radius:11px;background:var(--glow);display:grid;place-items:center;flex-shrink:0}
.ico svg{width:18px;height:18px;fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ico svg.solid{fill:var(--gold);stroke:none}
.irow .k{font-size:12.5px;color:var(--gold);margin-bottom:2px}
.irow .v{font-size:16.5px;line-height:1.5}
.wa{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:13px 26px;border-radius:999px;
  background:var(--glow);border:1px solid rgba(197,160,101,.35);color:var(--gold);font-size:15px;
  transition:.35s;justify-self:start;margin-top:4px}
.wa:hover{background:var(--gold);color:#0A1220}
.wa svg{width:18px;height:18px;fill:currentColor}
form{display:grid;gap:15px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:15px}
label{display:block;font-size:12.5px;color:var(--dim);margin-bottom:7px}
input,select,textarea{width:100%;font-family:inherit;font-size:16px;color:var(--ink);background:var(--bg2);
  border:1px solid var(--line2);border-radius:12px;padding:14px 15px;min-height:52px;transition:.3s}
select{cursor:pointer;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
html[dir="rtl"] select{background-position:20px calc(50% + 2px),14px calc(50% + 2px)}
select option{background:var(--bg2);color:var(--ink)}
textarea{resize:vertical;min-height:120px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px var(--glow)}
input::placeholder,textarea::placeholder{color:var(--dim);opacity:.5}
.note{font-size:14.5px;color:var(--gold);opacity:0;transition:.4s;min-height:20px}
.note.is-on{opacity:1}
.skyline{position:absolute;inset-block-end:0;inset-inline:0;width:100%;height:150px;opacity:.13;pointer-events:none}
.skyline path,.skyline line{fill:none;stroke:var(--gold);stroke-width:1.2}
@media(max-width:880px){.contact-grid{grid-template-columns:1fr}.f2{grid-template-columns:1fr}
  .wa{width:100%;justify-self:stretch}.skyline{height:100px;opacity:.09}}

/* ============ footer ============ */
footer{background:var(--bg2);padding-block:clamp(40px,6vw,68px) 26px;margin-top:clamp(60px,8vw,110px)}
.ft-brand{display:flex;align-items:center;gap:clamp(11px,1.4vw,16px);margin-bottom:16px}
.ft-brand .bm{height:60px}
.ft-brand .bw{height:48px}
.ft-brand .divider{width:1px;align-self:stretch;margin-block:6px;background:var(--line);flex:0 0 1px}
.ft-grid{display:grid;grid-template-columns:1.7fr 1fr 1.3fr;gap:38px}
.ft-tag{color:var(--gold);font-size:15px}
.ft h4{font-size:12.5px;color:var(--dim);margin-bottom:16px;font-weight:500}
.ft ul{list-style:none;display:grid;gap:12px;font-size:15px;color:var(--dim)}
.ft a:hover{color:var(--gold)}
.ft .li{display:flex;gap:11px;align-items:center}
.ft .ico{width:34px;height:34px;border-radius:9px}
.ft .ico svg{width:16px;height:16px}
.ft .lbl{font-size:12px;color:var(--dim);opacity:.8;display:block;line-height:1.4}
.badge{width:auto!important;min-width:46px;height:38px!important;background:#fff!important;
  border-radius:9px;padding:5px 8px;display:grid;place-items:center}
.badge img{height:26px;width:auto;max-width:74px;object-fit:contain}
.ft-btm{margin-top:40px;padding-top:20px;border-top:1px solid var(--line2);display:flex;
  justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--dim)}
@media(max-width:820px){.ft-grid{grid-template-columns:1fr;gap:30px}}
@media(max-width:400px){.ft-brand .bm{height:50px}.ft-brand .bw{height:40px}}

[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.2,.75,.2,1),transform .9s cubic-bezier(.2,.75,.2,1)}
[data-reveal].is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}[data-reveal]{opacity:1;transform:none}}


/* honeypot — hidden from humans, tempting to bots */
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;
  opacity:0!important;pointer-events:none!important}
.note.is-err{color:#E08B82}