/* Fonts: self-hosted (no requests to Google), one display family and one text family, both with Arabic. */
@font-face{font-family:"Amiri";font-weight:400;font-display:swap;src:url(fonts/amiri-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Amiri";font-weight:400;font-display:swap;src:url(fonts/amiri-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Amiri";font-weight:400;font-display:swap;src:url(fonts/amiri-arabic-400-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Amiri";font-weight:700;font-display:swap;src:url(fonts/amiri-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Amiri";font-weight:700;font-display:swap;src:url(fonts/amiri-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Amiri";font-weight:700;font-display:swap;src:url(fonts/amiri-arabic-700-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}

@font-face{font-family:"Plex";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plex";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Plex";font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex";font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}

:root{
  --ink:#0E1822;        /* night ink: blue-black, the colour of the sky above the citadel */
  --ink-2:#14232F;
  --dusk:#1E3340;
  --line:#2B4352;
  --stone:#D8C7A5;      /* citadel limestone */
  --lamp:#F2A94E;       /* the lantern flame */
  --olive:#7C8450;      /* Aleppo soap */
  --paper:#F4EBDC;
  --muted:#B7B5AA;
  --display:"Amiri","Times New Roman",serif;
  --text:"Plex",system-ui,-apple-system,"Segoe UI",sans-serif;
  --flame:.35;
  --gutter:clamp(20px,6vw,96px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--text);font-size:1.0625rem;line-height:1.6}
img{display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--paper);outline-offset:3px;border-radius:4px}

/* ---------- the scene: day turns to night as you scroll ---------- */
.scene{height:300vh;height:300svh;position:relative}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--ink)}
.photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none}
.photo.day{object-position:62% 40%}
.photo.night{object-position:50% 45%;opacity:0;transform:translateY(17vh);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%);mask-image:linear-gradient(180deg,transparent 0,#000 22%)}
.veil{position:absolute;inset:0;background:#0A1420;opacity:0}
.sunset{position:absolute;inset:0;opacity:0;background:
  radial-gradient(120% 75% at 62% 100%,rgba(242,169,78,.95),rgba(206,98,66,.5) 42%,rgba(206,98,66,0) 72%)}
.scrim{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(180deg,rgba(14,24,34,.62) 0%,rgba(14,24,34,.28) 38%,rgba(14,24,34,0) 62%),
  linear-gradient(90deg,rgba(14,24,34,.45) 0%,rgba(14,24,34,0) 60%)}
[dir=rtl] .scrim{background:
  linear-gradient(180deg,rgba(14,24,34,.62) 0%,rgba(14,24,34,.28) 38%,rgba(14,24,34,0) 62%),
  linear-gradient(270deg,rgba(14,24,34,.45) 0%,rgba(14,24,34,0) 60%)}
.to-ink{position:absolute;inset:auto 0 0 0;height:22%;background:linear-gradient(180deg,rgba(14,24,34,0),var(--ink));pointer-events:none}

.top{position:absolute;inset:0 0 auto 0;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:clamp(16px,3vh,28px) var(--gutter);z-index:3}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.mark{height:46px;width:auto;overflow:visible}
.mark .glow{opacity:var(--flame);transform-origin:100px 118px;animation:breathe 4.5s ease-in-out infinite}
.mark .flame{opacity:calc(.45 + var(--flame)*.55);transform-origin:100px 132px;animation:flicker 2.6s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(.92)}50%{transform:scale(1.06)}}
@keyframes flicker{0%,100%{transform:scale(1,1) rotate(0)}30%{transform:scale(.94,1.06) rotate(-2deg)}60%{transform:scale(1.04,.97) rotate(1.5deg)}}
.brand-name{font-family:var(--display);font-weight:700;font-size:1.9rem;letter-spacing:.02em;line-height:1}

.langs{display:flex;flex-wrap:wrap;gap:2px}
.langs button{font:inherit;font-size:.875rem;font-weight:600;color:var(--paper);background:none;border:0;padding:8px 10px;min-height:40px;cursor:pointer;opacity:.78;border-radius:6px;text-shadow:0 1px 12px rgba(10,20,30,.6)}
.langs button:hover{opacity:1}
.langs button[aria-pressed=true]{opacity:1;box-shadow:inset 0 -2px 0 var(--lamp)}

.hero-copy{position:absolute;z-index:2;inset-inline-start:var(--gutter);inset-inline-end:var(--gutter);top:clamp(110px,25vh,280px);max-width:44rem;text-shadow:0 2px 36px rgba(8,16,26,.5)}
.hero-copy::before{content:"";position:absolute;z-index:-1;inset:-14% -12% -20% -14%;background:radial-gradient(closest-side,rgba(10,20,30,.5),rgba(10,20,30,0));pointer-events:none}
h1{font-family:var(--display);font-weight:700;margin:0;font-size:clamp(3.2rem,10.5vw,8.6rem);line-height:.92;letter-spacing:-.012em;text-wrap:balance}
.lede{font-size:clamp(1.1rem,2.2vw,1.5rem);margin:clamp(14px,2.4vh,26px) 0 clamp(22px,4vh,40px);max-width:26rem;line-height:1.45}
.actions{display:flex;flex-wrap:wrap;gap:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:.7em 1.7em;border-radius:6px;font:inherit;font-weight:600;font-size:1rem;text-decoration:none;cursor:pointer;border:1.5px solid transparent;text-shadow:none;transition:background-color .2s,border-color .2s,color .2s}
.btn-primary{background:var(--lamp);color:#1A1208}
.btn-primary:hover{background:#F7BD74}
.btn-ghost{border-color:rgba(244,235,220,.75);color:var(--paper);background:rgba(14,24,34,.28)}
.btn-ghost:hover{background:rgba(244,235,220,.14);border-color:var(--paper)}

.sky-track{position:absolute;z-index:2;inset-inline-end:clamp(16px,3vw,44px);top:50%;height:26vh;width:1px;transform:translateY(-50%);background:linear-gradient(180deg,rgba(244,235,220,0),rgba(244,235,220,.55),rgba(244,235,220,0))}
.sky-dot{position:absolute;inset-inline-start:-5px;top:0;width:11px;height:11px;border-radius:50%;background:#FFE29A;box-shadow:0 0 14px 3px rgba(255,226,154,.55)}

/* ---------- sections under the scene ---------- */
.wrap{width:min(1180px,100% - 2*var(--gutter));margin-inline:auto}
.two{display:grid;grid-template-columns:minmax(0,26rem) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.two.flip{align-items:start}
h2{font-family:var(--display);font-weight:400;font-size:clamp(2.2rem,5vw,3.8rem);line-height:1.05;margin:0 0 .5em}
:lang(ar) h2,:lang(ar) h1{line-height:1.3}
.side p{color:var(--muted);margin:0;max-width:30rem}

.map-section{padding-block:clamp(56px,12vh,140px) clamp(40px,8vh,100px);background:var(--ink)}
.map{margin:0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-composite:intersect}
.map-head{display:grid;grid-template-columns:minmax(0,26rem) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(8px,3vh,32px)}
.map-head .places{margin:0;justify-content:flex-end}
.map svg{width:100%;height:auto;display:block}
#land path{fill:var(--ink-2);stroke:var(--line);stroke-width:.6;stroke-linejoin:round}
#land path.family{fill:#2A3A2F;stroke:var(--olive);stroke-width:1}
.places{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px;font-family:var(--display);font-size:1.4rem}
.places li{display:flex;align-items:center;gap:10px}
.a-ring{fill:rgba(242,169,78,.12);stroke:var(--lamp);stroke-width:1.2}
.a-star{fill:var(--lamp);stroke:#FFE2A8;stroke-width:.8;stroke-linejoin:round}
.a-label{font-family:var(--display);font-size:21px;font-weight:700;fill:var(--paper);paint-order:stroke;stroke:var(--ink);stroke-width:4px;stroke-linejoin:round}
.places li.origin::before{width:15px;height:15px;border-radius:0;background:var(--lamp);box-shadow:none;clip-path:polygon(50% 0,61% 20%,85% 15%,80% 39%,100% 50%,80% 61%,85% 85%,61% 80%,50% 100%,39% 80%,15% 85%,20% 61%,0 50%,20% 39%,15% 15%,39% 20%)}
.places li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--lamp);box-shadow:0 0 10px 2px rgba(242,169,78,.5)}

.contact-section{padding-block:clamp(40px,8vh,100px) clamp(64px,12vh,140px);background:var(--ink)}
form{display:grid;gap:22px;max-width:36rem}
.kind{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.kind legend{padding:0;margin-bottom:10px;color:var(--muted);font-size:.9375rem}
.kind label{position:relative}
.kind input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.kind span{display:inline-block;padding:.55em 1.1em;border:1.5px solid var(--line);border-radius:6px;font-weight:600;font-size:.9375rem;transition:border-color .2s,background-color .2s}
.kind input:checked+span{border-color:var(--lamp);background:rgba(242,169,78,.12)}
.kind input:focus-visible+span{outline:2px solid var(--paper);outline-offset:3px}
.field{display:grid;gap:8px;font-size:.9375rem;color:var(--muted)}
.field input,.field textarea{font:inherit;font-size:1.0625rem;color:var(--paper);background:var(--ink-2);border:1.5px solid var(--line);border-radius:6px;padding:.8em 1em;width:100%;min-height:50px}
.field textarea{resize:vertical;min-height:140px}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--lamp)}
.field [aria-invalid=true]{border-color:#E08A7A}
.hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;opacity:0}
.send-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.status{margin:0;font-size:.9375rem;color:var(--paper)}
.status.ok{color:#B9D49A}
.status.err{color:#F0A898}
.fine{margin:0;font-size:.875rem;color:var(--muted)}
button.btn[disabled]{opacity:.6;cursor:progress}

.foot{border-top:1px solid var(--line);padding-block:26px;color:var(--muted);font-size:.875rem;background:var(--ink)}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 28px}
.foot-brand{font-family:var(--display);font-size:1.25rem;color:var(--paper)}
.foot .langs button{color:var(--muted);text-shadow:none}
.credit a{color:inherit}
.credit .reg{font-size:.7em;margin-inline-start:1px}

@media (max-width:820px){
  .two,.map-head{grid-template-columns:1fr}
  .map-head .places{justify-content:flex-start}
  .brand-name{font-size:1.6rem}
  .mark{height:40px}
  .photo.day{object-position:70% 40%}
  .sky-track{display:none}
  .top{align-items:flex-start}
  .langs{justify-content:flex-end;max-width:13.5rem}
  .hero-copy{top:clamp(120px,22vh,200px)}
  .scrim{background:linear-gradient(180deg,rgba(14,24,34,.7) 0%,rgba(14,24,34,.45) 45%,rgba(14,24,34,.1) 70%,rgba(14,24,34,0) 100%)}
}
@media (prefers-reduced-motion:reduce){
  .mark .glow,.mark .flame{animation:none}
  .btn{transition:none}
}