/* ============================================================
   Stratos Private Vault — shared site shell (all public pages)
   Header + footer + theme (light/dark) + typography.
   ============================================================ */
:root{
  --bg:#f4f0e8; --bg-2:#efe9dd; --fg:#14180f; --muted:rgba(20,24,15,.64);
  --gold:#8f6d33; --gold-2:#7a5c2a; --line:rgba(20,24,15,.12);
  --btn-bg:#14180f; --btn-fg:#f4f0e8; --field:#fdfcf8; --field-bd:rgba(20,24,15,.20);
  --serif:'Fraunces','Hoefler Text',Georgia,serif;
  --sans:'Inter',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --arabic:'Noto Naskh Arabic','Geeza Pro',Tahoma,serif;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
html[data-theme="dark"]{
  --bg:#0e1210; --bg-2:#12160f; --fg:#f4f0e8; --muted:rgba(244,240,232,.62);
  --gold:#b08d4a; --gold-2:#c9a35a; --line:rgba(244,240,232,.12);
  --btn-bg:#f4f0e8; --btn-fg:#12150f; --field:rgba(244,240,232,.04); --field-bd:rgba(244,240,232,.18);
  color-scheme:dark;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg); color:var(--fg); font-family:var(--sans); font-weight:300;
  line-height:1.7; min-height:100vh; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  transition:background .5s var(--ease), color .5s var(--ease);}
html[dir="rtl"] body{font-family:var(--arabic)}
a{color:inherit}
.wrap{max-width:1180px; margin:0 auto; padding:0 40px; position:relative; z-index:1}
@media(max-width:680px){ .wrap{padding:0 22px} }

/* Preloader */
.preloader{position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  background:var(--bg); transition:opacity .8s ease, visibility .8s ease}
.preloader img{width:120px; height:120px; object-fit:contain; opacity:0; animation:preIn 1.5s var(--ease) forwards}
.preloader.done{opacity:0; visibility:hidden}
@keyframes preIn{0%{opacity:0;transform:scale(.92)}40%{opacity:1}100%{opacity:1;transform:scale(1)}}

/* Sticky header */
header.nav{position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:20px 40px; background:var(--bg); border-bottom:1px solid transparent;
  transition:border-color .3s ease, padding .3s ease, background .5s var(--ease)}
header.nav.scrolled{border-bottom-color:var(--line); padding:14px 40px}
@media(max-width:680px){ header.nav, header.nav.scrolled{padding:14px 20px} }
.brand{display:flex; align-items:center; gap:14px; text-decoration:none; color:inherit}
.brand img{width:44px; height:44px; object-fit:contain}
.brand .bt{display:flex; flex-direction:column; line-height:1.15}
.brand .bn{font-family:var(--serif); font-size:1.02rem; letter-spacing:.02em}
.brand .bs{font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); margin-top:3px}
@media(max-width:520px){ .brand .bt{display:none} }
.controls{display:flex; align-items:center; gap:10px}
.contact-link{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--fg);
  text-decoration:none; padding:10px 6px; opacity:.85; transition:opacity .25s,color .25s}
.contact-link:hover{opacity:1; color:var(--gold-2)}
.icon-btn{width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:transparent; color:var(--fg); cursor:pointer; border-radius:2px;
  transition:border-color .25s,color .25s}
.icon-btn:hover{border-color:var(--gold); color:var(--gold-2)}
.icon-btn svg{width:17px; height:17px}
.icon-btn .i-moon{display:none}
html[data-theme="dark"] .icon-btn .i-sun{display:none}
html[data-theme="dark"] .icon-btn .i-moon{display:block}
.langsw{display:inline-flex; border:1px solid var(--line); border-radius:2px; overflow:hidden}
.langsw button{background:transparent; border:0; color:var(--muted); font-family:var(--sans);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; padding:9px 13px; cursor:pointer;
  transition:all .2s; min-width:42px}
.langsw button[lang="ar"]{font-family:var(--arabic); font-size:14px}
.langsw button:hover{color:var(--fg)}
.langsw button.active{background:var(--gold); color:#fff}

/* Shared bits */
.eyebrow{display:inline-flex; align-items:center; gap:16px; margin-bottom:30px;
  font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--gold-2)}
.eyebrow::before,.eyebrow::after{content:""; width:52px; height:1px; background:linear-gradient(90deg,transparent,currentColor)}
.eyebrow::after{background:linear-gradient(90deg,currentColor,transparent)}
.headline{font-family:var(--serif); font-weight:400; letter-spacing:-.01em; line-height:1.1;
  font-size:clamp(2.4rem,6vw,4.9rem); max-width:17ch; margin:0 auto}
.headline em{font-style:italic; color:var(--gold-2)}
.sub{margin:34px auto 0; max-width:62ch; font-size:clamp(1rem,1.2vw,1.15rem); color:var(--muted); line-height:1.85}
.sub em{font-style:italic; color:var(--gold-2); font-weight:400}
.cta{display:inline-flex; align-items:center; gap:12px; background:var(--btn-bg); color:var(--btn-fg);
  text-decoration:none; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:500;
  padding:18px 38px; border-radius:2px; transition:transform .3s var(--ease), box-shadow .3s}
.cta:hover{transform:translateY(-2px); box-shadow:0 16px 40px rgba(0,0,0,.22)}
.cta .arr{transition:transform .3s}
html[dir="rtl"] .cta .arr{transform:scaleX(-1)}
.cta:hover .arr{transform:translateX(4px)}
html[dir="rtl"] .cta:hover .arr{transform:scaleX(-1) translateX(4px)}

/* HOME hero + invite */
.hero{min-height:calc(100vh - 84px); display:flex; align-items:center; justify-content:center; text-align:center; padding:90px 0 110px; position:relative}
.hero::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(circle at 50% 42%, rgba(176,141,74,.08), transparent 46%)}
.hero-p{margin:32px auto 0; max-width:66ch; font-size:clamp(1rem,1.12vw,1.1rem); color:var(--muted); line-height:1.95}
.invite{background:#0e1210; color:#f4f0e8; padding:140px 0; text-align:center; position:relative}
.invite::before{content:""; position:absolute; top:0; left:0; right:0; height:120px; background:linear-gradient(180deg, rgba(255,255,255,.045), transparent)}
.invite .eyebrow{color:#c9a35a}
.invite .headline{color:#f4f0e8; max-width:20ch}
.invite .headline em{color:#c9a35a}
.invite .sub{color:rgba(244,240,232,.62)}
.invite .sub em{color:#c9a35a}
.invite .cta{margin-top:46px; background:#f4f0e8; color:#12150f}

/* Content pages (contact / legal) */
.page{padding:70px 0 100px; min-height:60vh}
.page .kicker{font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold-2); margin-bottom:16px}
.page h1{font-family:var(--serif); font-weight:400; font-size:clamp(2.1rem,4.5vw,3.3rem); line-height:1.12; letter-spacing:-.01em; margin-bottom:18px}
.page .lede{max-width:64ch; font-size:clamp(1rem,1.15vw,1.12rem); color:var(--muted); line-height:1.85; margin-bottom:10px}
.page h2{font-family:var(--serif); font-weight:400; font-size:1.35rem; margin:38px 0 12px}
.page p{max-width:74ch; color:var(--muted); line-height:1.85; margin-bottom:14px}
.page a{color:var(--gold-2); text-decoration:underline; text-underline-offset:2px}
.page ul{max-width:74ch; color:var(--muted); line-height:1.8; margin:0 0 14px; padding-inline-start:22px}
.page li{margin-bottom:7px}
.divider{height:1px; background:var(--line); margin:44px 0}

/* Form */
.form{max-width:640px; margin-top:8px}
.form-row{display:flex; gap:18px; flex-wrap:wrap}
.form-row .field{flex:1; min-width:220px}
.field{margin-bottom:20px}
.field label{display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:8px}
.field input,.field select,.field textarea{width:100%; background:var(--field); border:1px solid var(--field-bd);
  color:var(--fg); font-family:inherit; font-size:.95rem; padding:12px 14px; border-radius:2px; transition:border-color .25s}
.field textarea{min-height:120px; resize:vertical; line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--gold)}
.check{display:flex; gap:11px; align-items:flex-start; margin-bottom:14px; font-size:13px; color:var(--muted); line-height:1.6}
.check input{margin-top:3px; accent-color:var(--gold); width:16px; height:16px; flex-shrink:0}
.form-msg{font-size:13px; color:var(--gold-2); margin-top:10px; min-height:1.2em}
.note{background:color-mix(in srgb, var(--gold) 8%, transparent); border-inline-start:2px solid var(--gold);
  padding:16px 18px; font-size:13px; color:var(--muted); line-height:1.7; margin-top:36px; border-radius:2px}

/* Footer */
footer{border-top:1px solid var(--line); padding:64px 0 40px; background:var(--bg)}
.foot-top{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; align-items:flex-start}
.foot-brand{display:flex; flex-direction:column; gap:12px; max-width:380px}
.foot-brand .fb-mark{display:flex; align-items:center; gap:12px}
.foot-brand img{width:38px; height:38px; object-fit:contain}
.foot-brand .fb-name{font-family:var(--serif); font-size:1.05rem}
.foot-brand address{font-style:normal; font-size:12.5px; color:var(--muted); line-height:1.7}
.foot-links{display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center}
.foot-links a{color:var(--fg); opacity:.82; text-decoration:none; font-size:12.5px; letter-spacing:.04em; transition:opacity .25s,color .25s}
.foot-links a:hover{opacity:1; color:var(--gold-2)}
.foot-note{margin-top:38px; padding-top:26px; border-top:1px solid var(--line)}
.foot-note p{font-size:11.5px; line-height:1.75; color:var(--muted); max-width:100%}
.foot-copy{margin-top:22px; font-size:11px; letter-spacing:.05em; color:var(--muted)}
@media(max-width:680px){ .foot-top{flex-direction:column; gap:28px} }

.reveal{opacity:0; transform:translateY(14px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.reveal.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} .reveal{opacity:1;transform:none} }

/* Small-phone header: prevent overflow of controls */
@media(max-width:430px){
  header.nav{gap:10px}
  .controls{gap:6px}
  .contact-link{padding:8px 2px; letter-spacing:.12em}
  .icon-btn{width:36px; height:36px}
  .langsw button{min-width:32px; padding:8px 8px; letter-spacing:.06em}
}

/* 404 page */
.notfound{min-height:calc(100vh - 84px); display:flex; align-items:center; justify-content:center; text-align:center; padding:120px 0}
.notfound .code{font-family:var(--serif); font-size:clamp(4rem,14vw,8rem); line-height:1; color:var(--gold-2); margin-bottom:10px}
.notfound h1{font-family:var(--serif); font-weight:400; font-size:clamp(1.4rem,3.5vw,2rem); margin-bottom:14px}
.notfound p{max-width:46ch; margin:0 auto 32px; color:var(--muted); line-height:1.8}