:root{
    --ink:#0F262D;
    --ink-2:rgba(15,38,45,.66);
    --ink-3:rgba(15,38,45,.42);
    --paper:#FAF7F1;
    --paper-2:#F1EBE0;
    --petrol:#0C2A33;
    --petrol-2:#123B47;
    --amber:#BF853A;
    --amber-lt:#D9A45C;
    --line:rgba(15,38,45,.14);
    --line-lt:rgba(250,247,241,.18);
    --pad:clamp(20px,5vw,72px);
    --serif:'Newsreader',Georgia,serif;
    --sans:'Public Sans',system-ui,sans-serif;
    --ar-display:'Noto Kufi Arabic',system-ui,sans-serif;
    --ar-body:'IBM Plex Sans Arabic',system-ui,sans-serif;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;background:var(--paper);color:var(--ink);
    font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.65;
    -webkit-font-smoothing:antialiased;overflow-x:hidden;
  }
  body.ar{font-family:var(--ar-body);font-size:17px;line-height:1.85}
  body.ar h1,body.ar h2,body.ar h3,body.ar h4,body.ar .stat-n,body.ar .brand-name{font-family:var(--ar-display);font-weight:400}
  img,svg{display:block;max-width:100%}
  a{color:inherit}

  h2,h3{font-family:var(--serif);font-weight:300;letter-spacing:-.012em;margin:0}
  h2{font-size:clamp(1.7rem,3.1vw,2.6rem);line-height:1.16}
  h3{font-size:clamp(1.05rem,1.5vw,1.32rem);line-height:1.3}
  body.ar h2{font-size:clamp(1.5rem,2.8vw,2.25rem);line-height:1.4}
  body.ar h3{font-size:clamp(1rem,1.4vw,1.2rem)}
  p{margin:0 0 1em}
  .eyebrow{
    font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.22em;
    text-transform:uppercase;color:var(--amber);display:flex;align-items:center;gap:12px;margin-bottom:16px;
  }
  body.ar .eyebrow{font-family:var(--ar-body);letter-spacing:0;font-size:12.5px;text-transform:none}
  .eyebrow::before{content:"";width:32px;height:1px;background:currentColor;opacity:.6;flex:none}
  .lead{font-size:clamp(15px,1.3vw,17.5px);color:var(--ink-2);max-width:60ch}
  body.ar .lead{font-size:clamp(15px,1.3vw,17px)}

  .wrap{max-width:1300px;margin:0 auto;padding-inline:var(--pad)}
  section{padding-block:clamp(58px,8vw,112px)}
  .dark{background:var(--petrol);color:#EDE6DA}
  .dark .lead{color:rgba(237,230,218,.68)}
  .dark .eyebrow{color:var(--amber-lt)}
  .tint{background:var(--paper-2)}

  .btn{
    display:inline-block;font-family:var(--sans);font-size:13.5px;font-weight:500;
    padding:15px 28px;border-radius:2px;text-decoration:none;cursor:pointer;
    border:1px solid transparent;transition:.25s;
  }
  body.ar .btn{font-family:var(--ar-body)}
  .btn.solid{background:var(--amber);color:var(--ink)}
  .btn.solid:hover{background:var(--amber-lt)}
  .btn.ghost{border-color:var(--line);color:inherit}
  .btn.ghost:hover{border-color:var(--amber);color:var(--amber)}
  a:focus-visible,button:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

  /* ---------- header ---------- */
  header{
    position:fixed;inset-inline:0;top:0;z-index:40;
    display:flex;align-items:center;justify-content:space-between;gap:22px;
    padding:16px var(--pad);transition:background .4s,box-shadow .4s,padding .4s;
  }
  header.solid{background:rgba(250,247,241,.97);box-shadow:0 1px 0 var(--line);padding-block:11px}
  .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#FAF7F1;transition:color .4s}
  header.solid .brand{color:var(--ink)}
  .brand .mark{position:relative;flex:none;height:40px;line-height:0}
  .brand .mark img{height:40px;width:auto;display:block;transition:opacity .45s}
  .brand .mark .m-col{position:absolute;top:0;inset-inline-start:0;opacity:0}
  header.solid .mark .m-rev{opacity:0}
  header.solid .mark .m-col{opacity:1}
  .brand-txt{display:flex;flex-direction:column;line-height:1.2}
  .brand-name{font-family:var(--serif);font-size:15px}
  .brand-sub{font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.72;font-weight:400}
  body.ar .brand-sub{letter-spacing:0;font-size:11.5px;text-transform:none;font-family:var(--ar-body)}
  nav.links{display:flex;gap:24px;align-items:center}
  nav.links a{
    color:rgba(250,247,241,.86);text-decoration:none;font-size:13.5px;
    padding-bottom:3px;border-bottom:1px solid transparent;transition:.25s;
  }
  header.solid nav.links a{color:var(--ink-2)}
  nav.links a:hover{border-bottom-color:var(--amber);color:#fff}
  header.solid nav.links a:hover{color:var(--ink)}
  .head-act{display:flex;align-items:center;gap:10px}
  .lang{
    font-family:var(--sans);font-size:12px;letter-spacing:.06em;padding:8px 15px;border-radius:999px;
    border:1px solid rgba(250,247,241,.34);background:none;color:#FAF7F1;cursor:pointer;transition:.25s;
  }
  header.solid .lang{border-color:var(--line);color:var(--ink)}
  .lang:hover{border-color:var(--amber);color:var(--amber)}
  .burger{display:none;background:none;border:0;cursor:pointer;padding:8px;color:inherit}
  .burger span{display:block;width:22px;height:1.5px;background:currentColor;margin:5px 0}

  #drawer{
    position:fixed;inset:0;z-index:50;background:var(--petrol);color:#EDE6DA;
    display:none;flex-direction:column;justify-content:center;gap:4px;padding:var(--pad);
  }
  #drawer.on{display:flex}
  #drawer a{font-family:var(--serif);font-size:clamp(1.5rem,6.4vw,2.2rem);text-decoration:none;padding:12px 0;border-bottom:1px solid var(--line-lt)}
  body.ar #drawer a{font-family:var(--ar-display)}
  #drawer .x{position:absolute;top:20px;inset-inline-end:var(--pad);background:none;border:0;color:inherit;font-size:32px;cursor:pointer;line-height:1}

  /* ---------- hero: the name, nothing else ---------- */
  #hero{position:relative;height:100vh;height:100svh;min-height:540px;overflow:hidden;background:#0E2136}
  #hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
  #hero .veil{
    position:absolute;inset:0;pointer-events:none;
    background:
      linear-gradient(to top, rgba(8,20,26,.88) 0%, rgba(8,20,26,.40) 32%, rgba(8,20,26,0) 64%),
      linear-gradient(to bottom, rgba(8,20,26,.58) 0%, rgba(8,20,26,0) 22%);
  }
  #hero .inner{
    position:absolute;inset-inline-start:var(--pad);inset-inline-end:var(--pad);
    bottom:clamp(80px,12vh,132px);color:#FAF7F1;
    display:flex;flex-direction:column;gap:18px;
  }
  .name-ar{
    font-family:var(--ar-display);font-weight:400;
    font-size:clamp(1.85rem,5.4vw,4.1rem);line-height:1.35;letter-spacing:-.005em;
    margin:0;color:#FAF7F1;
  }
  .name-en{
    font-family:var(--serif);font-weight:300;
    font-size:clamp(1.05rem,2.3vw,1.95rem);line-height:1.25;letter-spacing:.06em;
    color:rgba(250,247,241,.86);margin:0;
  }
  .name-rule{width:74px;height:1px;background:var(--amber-lt);opacity:.9}
  body:not(.ar) .name-ar{order:3}
  body:not(.ar) .name-rule{order:2}
  body:not(.ar) .name-en{order:1}
  .cue{opacity:0;transform:translateY(18px);transition:opacity 1s cubic-bezier(.2,.7,.25,1),transform 1s cubic-bezier(.2,.7,.25,1)}
  .cue.in{opacity:1;transform:none}
  .scroll-hint{
    position:absolute;inset-inline-end:var(--pad);bottom:clamp(80px,12vh,132px);
    display:flex;align-items:center;
  }
  .scroll-hint i{width:1px;height:44px;background:linear-gradient(to bottom,transparent,var(--amber-lt));animation:drop 2.2s ease-in-out infinite}
  @keyframes drop{0%,100%{opacity:.22;transform:scaleY(.55)}50%{opacity:1;transform:scaleY(1)}}
  @media (max-width:760px){.scroll-hint{display:none}}

  .rv{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.25,1)}
  .rv.in{opacity:1;transform:none}

  /* ---------- pillars under the hero ---------- */
  .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-block:1px solid var(--line)}
  .pcell{background:var(--paper);padding:clamp(28px,3.6vw,50px) clamp(18px,2.4vw,36px)}
  .prule{display:block;width:26px;height:1px;background:var(--amber);margin-bottom:20px}
  .pcell h3{margin-bottom:11px}
  .pcell p{color:var(--ink-2);font-size:14.5px;margin:0}
  body.ar .pcell p{font-size:15.5px}
  .pcell .yr{font-family:var(--serif);font-size:1.15em;color:var(--ink);letter-spacing:.01em}
  @media (max-width:860px){.pillars{grid-template-columns:1fr}}

  /* ---------- grids ---------- */
  .head{margin-bottom:clamp(30px,4.5vw,58px);max-width:66ch}
  .head .lead{margin:12px 0 0}
  .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
  .dark .grid-3{background:var(--line-lt)}
  .cell{background:var(--paper);padding:clamp(24px,2.8vw,38px)}
  .tint .cell{background:var(--paper-2)}
  .dark .cell{background:var(--petrol)}
  .cell h3{margin-bottom:10px}
  .cell p{color:var(--ink-2);font-size:14.5px;margin:0}
  body.ar .cell p{font-size:15px}
  .cell .ic{width:26px;height:26px;margin-bottom:18px;color:var(--amber)}
  @media (max-width:980px){.grid-3{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:640px){.grid-3{grid-template-columns:1fr}}

  /* ---------- steps ---------- */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,38px)}
  .step{border-top:1px solid var(--line-lt);padding-top:20px}
  .step .n{font-family:var(--serif);font-size:13px;color:var(--amber-lt);letter-spacing:.1em;margin-bottom:12px}
  .step h3{font-size:1.1rem;margin-bottom:8px}
  .step p{font-size:14px;color:rgba(237,230,218,.66);margin:0}
  body.ar .step p{font-size:15px}
  @media (max-width:860px){.steps{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:520px){.steps{grid-template-columns:1fr}}

  /* ---------- split / panels ---------- */
  .split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,76px);align-items:start}
  @media (max-width:900px){.split{grid-template-columns:1fr}}
  .panel{border:1px solid var(--line);border-radius:3px;padding:clamp(22px,2.8vw,36px);background:var(--paper)}
  .dark .panel{border-color:var(--line-lt);background:var(--petrol-2)}
  .kv{display:flex;justify-content:space-between;gap:18px;padding:13px 0;border-bottom:1px solid var(--line);font-size:14.5px}
  body.ar .kv{font-size:15px}
  .dark .kv{border-color:var(--line-lt)}
  .kv:last-child{border-bottom:0}
  .kv b{font-weight:500;text-align:end}
  .chips{display:flex;flex-wrap:wrap;gap:10px}
  .chip{border:1px solid var(--line);border-radius:999px;padding:9px 18px;font-size:13.5px;color:var(--ink-2)}
  body.ar .chip{font-size:14.5px}

  /* ---------- skyline separator ---------- */
  .skyline{background:var(--paper);overflow:hidden;line-height:0}
  .skyline svg{display:block;width:100%;height:auto}
  @media (max-width:760px){
    .skyline{height:116px}
    .skyline svg{width:auto;height:116px;max-width:none;margin-inline-start:-16%}
  }

  /* ---------- tenant info ---------- */
  .acts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-lt)}
  .act{background:var(--petrol-2);padding:clamp(22px,2.8vw,34px)}
  .act h3{margin-bottom:8px}
  .act p{font-size:14px;color:rgba(237,230,218,.66);margin:0}
  body.ar .act p{font-size:15px}
  @media (max-width:820px){.acts{grid-template-columns:1fr}}

  /* ---------- contact ---------- */
  .form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .form .full{grid-column:1/-1}
  label{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:7px}
  body.ar label{letter-spacing:0;font-size:13px;text-transform:none}
  input,select,textarea{
    width:100%;font-family:inherit;font-size:15px;font-weight:300;color:var(--ink);
    background:var(--paper);border:1px solid var(--line);border-radius:2px;padding:13px 14px;transition:.2s;
  }
  input:focus,select:focus,textarea:focus{outline:0;border-color:var(--amber)}
  textarea{min-height:110px;resize:vertical}
  @media (max-width:640px){.form{grid-template-columns:1fr}}

  /* ---------- footer ---------- */
  footer{background:#081F26;color:rgba(237,230,218,.72);padding-block:clamp(46px,6vw,72px) 0}
  .foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(26px,4vw,54px)}
  footer h4{font-family:var(--serif);font-weight:400;font-size:15px;color:#EDE6DA;margin:0 0 14px}
  footer a{display:block;text-decoration:none;font-size:14px;padding:5px 0;color:rgba(237,230,218,.72);transition:.2s}
  footer a:hover{color:var(--amber-lt)}
  .foot-mark{height:58px;width:auto;margin-bottom:18px}
  .foot-name{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}
  .foot-name .a{font-family:var(--ar-display);font-size:17px;color:#EDE6DA}
  .foot-name .e{font-family:var(--serif);font-size:15px;color:#EDE6DA;letter-spacing:.03em}
  .foot-bar .powered{
    display:flex;align-items:center;gap:11px;text-decoration:none;padding:0;
    color:rgba(237,230,218,.60);font-size:12px;letter-spacing:.05em;transition:color .25s;
  }
  .foot-bar .powered:hover{color:var(--amber-lt)}
  .foot-bar .powered img{height:24px;width:auto}
  .foot-bar .powered span{white-space:nowrap}
  .foot-bar{
    margin-top:clamp(34px,5vw,60px);border-top:1px solid rgba(237,230,218,.13);
    padding-block:22px 28px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;
  }
  @media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
  @media (max-width:560px){.foot-grid{grid-template-columns:1fr}}


  @media (max-width:960px){ nav.links{display:none} .burger{display:block} }
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .rv,.cue{opacity:1;transform:none;transition:none}
    .scroll-hint i{animation:none}
  }
  #err{display:none;position:fixed;top:0;inset-inline:0;z-index:99;padding:10px 16px;background:#7A1F1F;color:#FFEDED;font:12px/1.5 ui-monospace,monospace}