:root{
    --ink:#0a0906;
    --ink-2:#100e09;
    --surface:#161309;
    --surface-2:#1d1a10;
    --hairline:#332c1a;
    --gold:#cda355;
    --gold-bright:#eecf8a;
    --gold-deep:#8a6b2c;
    --ivory:#f4eee0;
    --muted:#b3a992;
    --muted-2:#7d745e;
    --shadow: 0 20px 60px rgba(0,0,0,0.45);
    --ease: cubic-bezier(.22,.61,.36,1);
  }

  *{ margin:0; padding:0; box-sizing:border-box; }

  html{ scroll-behavior:smooth; }

  body{
    background:var(--ink);
    color:var(--ivory);
    font-family:'Inter', sans-serif;
    font-weight:400;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  .arabic{ font-family:'Cairo', sans-serif; direction:rtl; unicode-bidi:isolate; }

  h1,h2,h3,.serif{ font-family:'Playfair Display', serif; }

  a{ color:inherit; text-decoration:none; }
  img{ max-width:100%; display:block; }
  ul{ list-style:none; }

  .container{
    max-width:1180px;
    margin:0 auto;
    padding:0 32px;
  }

  .eyebrow{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    color:var(--gold);
    font-size:12.5px;
    letter-spacing:0.32em;
    text-transform:uppercase;
    font-weight:600;
    margin-bottom:18px;
  }
  .eyebrow::before, .eyebrow::after{
    content:"";
    height:1px;
    width:36px;
    background:linear-gradient(90deg, transparent, var(--gold-deep));
  }
  .eyebrow::after{ background:linear-gradient(90deg, var(--gold-deep), transparent); }

  .section-head{ text-align:center; max-width:720px; margin:0 auto 56px; }
  .section-head h2{
    font-size:clamp(28px, 4vw, 42px);
    font-weight:600;
    color:var(--ivory);
    line-height:1.25;
  }
  .section-head p{
    margin-top:14px;
    color:var(--muted);
    font-size:16.5px;
  }

  /* ---------- Reveal on scroll ---------- */
  .reveal{
    opacity:0;
    transform:translateY(26px);
    transition:opacity .8s var(--ease), transform .8s var(--ease);
  }
  .reveal.in{ opacity:1; transform:translateY(0); }
  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
  }

  /* ---------- Header ---------- */
  header{
    position:fixed;
    top:0; left:0; right:0;
    z-index:100;
    padding:20px 0;
    transition:background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease);
    border-bottom:1px solid transparent;
  }
  header.scrolled{
    background:rgba(10,9,6,0.92);
    backdrop-filter:blur(10px);
    padding:12px 0;
    border-bottom:1px solid var(--hairline);
  }
  header .container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
  }
  .brand{ display:flex; align-items:center; gap:14px; }
  .brand img{ height:46px; width:auto; transition:height .4s var(--ease); }
  header.scrolled .brand img{ height:38px; }
  .brand-text{ display:flex; flex-direction:column; line-height:1.25; }
  .brand-text .en{
    font-family:'Playfair Display', serif;
    font-size:14.5px;
    letter-spacing:0.09em;
    color:var(--gold-bright);
    font-weight:600;
    white-space:nowrap;
  }
  .brand-text .en small{
    display:block;
    font-family:'Inter', sans-serif;
    font-size:8.5px;
    letter-spacing:0.18em;
    color:var(--muted-2);
    font-weight:500;
    margin-top:2px;
  }
  .brand-text .ar{
    font-family:'Cairo', sans-serif;
    font-size:11.5px;
    color:var(--muted);
    margin-top:2px;
    direction:rtl;
  }
  .header-cta{
    display:flex;
    align-items:center;
    gap:22px;
  }
  .header-phone{
    display:flex;
    flex-direction:column;
    text-align:right;
    font-size:13px;
    color:var(--muted);
  }
  .header-phone strong{ color:var(--gold-bright); font-size:14px; letter-spacing:0.02em; }
  .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:12px 24px;
    border-radius:2px;
    font-size:13px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    font-weight:600;
    cursor:pointer;
    border:1px solid var(--gold);
    transition:transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
    white-space:nowrap;
  }
  .btn-solid{
    background:linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
    color:#151006;
    border-color:transparent;
  }
  .btn-solid:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(205,163,85,0.28); }
  .btn-ghost{ color:var(--gold-bright); background:transparent; }
  .btn-ghost:hover{ background:rgba(205,163,85,0.1); transform:translateY(-2px); }

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    overflow:hidden;
    padding-top:110px;
  }
  .hero-bg{
    position:absolute; inset:0;
    background-image:url('images/hero-bg.jpg');
    background-size:cover;
    background-position:60% center;
    transform:scale(1.08);
    animation:heroZoom 22s ease-out forwards;
  }
  @keyframes heroZoom{ to{ transform:scale(1); } }
  .hero-scrim{
    position:absolute; inset:0;
    background:
      linear-gradient(100deg, rgba(10,9,6,0.97) 8%, rgba(10,9,6,0.72) 40%, rgba(10,9,6,0.25) 68%, rgba(10,9,6,0.55) 100%),
      linear-gradient(to top, rgba(10,9,6,0.9), rgba(10,9,6,0) 34%);
  }
  .hero-content{
    position:relative;
    z-index:2;
    max-width:640px;
    padding:60px 0 90px;
  }
  .hero-content .tag{
    font-size:14px;
    letter-spacing:0.28em;
    text-transform:uppercase;
    color:var(--gold-bright);
    font-weight:600;
    margin-bottom:22px;
    display:block;
  }
  .hero-content h1{
    font-weight:600;
    line-height:1.12;
    color:var(--ivory);
  }
  .hero-content h1 .lead{
    display:block;
    font-size:clamp(34px, 5vw, 56px);
    white-space:nowrap;
  }
  .hero-content h1 .highlight{
    display:block;
    font-size:clamp(38px, 5.6vw, 60px);
    font-style:normal;
    color:transparent;
    background:linear-gradient(120deg, var(--gold-bright), var(--gold));
    -webkit-background-clip:text;
    background-clip:text;
    margin-top:6px;
  }
  .hero-content p{
    margin-top:24px;
    font-size:17px;
    color:var(--muted);
    max-width:520px;
    line-height:1.75;
  }
  .hero-actions{
    margin-top:38px;
    display:flex;
    gap:16px;
    flex-wrap:wrap;
  }
  /* ---------- Services ---------- */
  .services{ padding:130px 0 110px; position:relative; }
  .service-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1px;
    background:var(--hairline);
    border:1px solid var(--hairline);
  }
  .service-card{
    background:var(--surface);
    padding:44px 32px 40px;
    transition:background .4s var(--ease), transform .4s var(--ease);
    position:relative;
  }
  .service-card:hover{ background:var(--surface-2); }
  .service-card .icon{
    width:46px; height:46px;
    margin-bottom:26px;
    color:var(--gold);
  }
  .service-card .icon svg{ width:100%; height:100%; }
  .service-card h3{
    font-size:19px;
    font-weight:600;
    color:var(--ivory);
    margin-bottom:10px;
    font-family:'Playfair Display', serif;
  }
  .service-card p{
    font-size:14.5px;
    color:var(--muted);
    line-height:1.65;
  }
  .service-card .num{
    position:absolute;
    top:38px; right:32px;
    font-family:'Playfair Display', serif;
    font-style:italic;
    font-size:13px;
    color:var(--muted-2);
  }

  /* ---------- Lead consultant strip ---------- */
  .consultant{
    padding:90px 0;
    background:var(--surface);
    border-top:1px solid var(--hairline);
    border-bottom:1px solid var(--hairline);
  }
  .consultant-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:44px;
  }
  .consultant-item{ text-align:center; padding:0 10px; }
  .consultant-item .icon{
    width:38px; height:38px;
    margin:0 auto 20px;
    color:var(--gold);
  }
  .consultant-item .icon svg{ width:100%; height:100%; }
  .consultant-item strong{
    display:block;
    font-family:'Playfair Display', serif;
    font-size:16.5px;
    color:var(--ivory);
    font-weight:600;
    margin-bottom:6px;
  }
  .consultant-item span{
    font-size:13.5px;
    color:var(--muted);
    line-height:1.55;
  }

  /* ---------- Why choose us ---------- */
  .why{ padding:130px 0; }
  .why-grid{ display:block; }
  .why-copy{ max-width:880px; margin:0 auto; text-align:center; }
  .why-copy .eyebrow{ justify-content:center; }
  .why-copy h2{
    font-size:clamp(30px,3.8vw,44px);
    font-weight:600;
    line-height:1.2;
    margin-bottom:48px;
  }
  .why-list{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:40px 28px;
  }
  .why-item{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; }
  .why-item .icon{
    width:38px; height:38px;
    flex:0 0 auto;
    color:var(--gold);
  }
  .why-item .icon svg{ width:100%; height:100%; }
  .why-item h4{
    font-family:'Playfair Display', serif;
    font-size:16px;
    color:var(--ivory);
    font-weight:600;
    margin-bottom:5px;
  }
  .why-item p{ font-size:13.8px; color:var(--muted); line-height:1.6; }

  /* ---------- Signature quote ---------- */
  .quote-section{
    position:relative;
    padding:150px 0;
    background:var(--ink-2);
    border-top:1px solid var(--hairline);
    border-bottom:1px solid var(--hairline);
    text-align:center;
    overflow:hidden;
  }
  .quote-section::before{
    content:"“";
    position:absolute;
    top:-40px; left:50%;
    transform:translateX(-50%);
    font-family:'Playfair Display', serif;
    font-size:340px;
    color:var(--gold);
    opacity:0.06;
    line-height:1;
    pointer-events:none;
  }
  .quote-mark{
    color:var(--gold);
    font-size:46px;
    font-family:'Playfair Display', serif;
    margin-bottom:18px;
    display:block;
  }
  .quote-section blockquote{
    font-family:'Playfair Display', serif;
    font-style:italic;
    font-weight:500;
    font-size:clamp(26px, 3.6vw, 44px);
    line-height:1.4;
    max-width:820px;
    margin:0 auto;
    color:var(--ivory);
  }
  .quote-section blockquote em{
    color:var(--gold-bright);
    font-style:italic;
  }
  .quote-section cite{
    display:block;
    margin-top:30px;
    font-style:normal;
    font-size:13px;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--muted-2);
  }

  /* ---------- Contact ---------- */
  .contact{ padding:130px 0 110px; }
  .contact-grid{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:70px;
    background:var(--surface);
    border:1px solid var(--hairline);
    padding:64px;
  }
  .contact-copy h2{
    font-size:clamp(28px,3.6vw,40px);
    font-weight:600;
    line-height:1.22;
    margin-bottom:18px;
  }
  .contact-copy p{ color:var(--muted); font-size:16px; max-width:440px; line-height:1.7; }
  .contact-actions{ margin-top:34px; display:flex; gap:16px; flex-wrap:wrap; }

  .contact-info{
    border-left:1px solid var(--hairline);
    padding-left:60px;
    display:flex;
    flex-direction:column;
    gap:30px;
    justify-content:center;
  }
  .contact-row{ display:flex; gap:18px; align-items:flex-start; }
  .contact-row .icon{ width:26px; height:26px; color:var(--gold); flex:0 0 auto; margin-top:3px; }
  .contact-row .icon svg{ width:100%; height:100%; }
  .contact-row h5{
    font-size:11.5px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--muted-2);
    font-weight:600;
    margin-bottom:6px;
  }
  .contact-row a, .contact-row span.val{
    font-family:'Playfair Display', serif;
    font-size:18px;
    color:var(--ivory);
    font-weight:600;
    transition:color .3s var(--ease);
  }
  .contact-row a:hover{ color:var(--gold-bright); }

  /* ---------- Footer ---------- */
  footer{
    position:relative;
    padding:70px 0 34px;
    background:
      linear-gradient(180deg, rgba(10,9,6,0.55), var(--ink) 55%),
      url('images/section-bg.jpg');
    background-size:cover;
    background-position:center bottom;
    border-top:1px solid var(--hairline);
  }
  .footer-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    flex-wrap:wrap;
    gap:40px;
    padding-bottom:44px;
    border-bottom:1px solid var(--hairline);
  }
  .footer-brand{ display:flex; align-items:center; gap:16px; }
  .footer-brand img{ height:52px; }
  .footer-brand-text .en{
    font-family:'Playfair Display', serif;
    font-size:16px;
    letter-spacing:0.08em;
    color:var(--gold-bright);
    font-weight:600;
  }
  .footer-brand-text .ar{
    font-family:'Cairo', sans-serif;
    font-size:13px;
    color:var(--muted);
    margin-top:4px;
    direction:rtl;
  }
  .footer-note{
    max-width:340px;
    color:var(--muted);
    font-size:14px;
    line-height:1.7;
  }
  .footer-links{ display:flex; gap:60px; flex-wrap:wrap; }
  .footer-col h6{
    font-size:11.5px;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--muted-2);
    font-weight:600;
    margin-bottom:16px;
  }
  .footer-col a, .footer-col span{
    display:block;
    font-size:14.5px;
    color:var(--muted);
    margin-bottom:10px;
    transition:color .3s var(--ease);
  }
  .footer-col a:hover{ color:var(--gold-bright); }
  .footer-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    padding-top:28px;
    font-size:12.5px;
    color:var(--muted-2);
    letter-spacing:0.02em;
  }

  /* ---------- Social icons ---------- */
  .social-row{
    display:flex;
    align-items:center;
    gap:14px;
    margin-top:36px;
  }
  .social-row a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:42px; height:42px;
    border-radius:50%;
    background:linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
    color:#151006;
    transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  }
  .social-row a svg{ width:19px; height:19px; }
  .social-row a:hover{ transform:translateY(-3px); box-shadow:0 12px 24px rgba(205,163,85,0.3); }
  .footer-social{ display:flex; gap:12px; margin-top:22px; }
  .footer-social a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px; height:38px;
    border-radius:50%;
    border:1px solid var(--hairline);
    color:var(--gold-bright);
    transition:background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
  }
  .footer-social a svg{ width:17px; height:17px; }
  .footer-social a:hover{ background:rgba(205,163,85,0.12); border-color:var(--gold); transform:translateY(-3px); }

  /* ---------- Floating action buttons ---------- */
  .float-actions{
    position:fixed;
    bottom:26px; right:26px;
    z-index:90;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
  }
  .float-btn{
    display:flex; align-items:center; justify-content:center;
    border-radius:50%;
    box-shadow:0 14px 30px rgba(0,0,0,0.5);
    transition:transform .35s var(--ease), box-shadow .35s var(--ease);
    position:relative;
  }
  .float-btn:hover{ transform:scale(1.08); }
  .float-btn.primary,
  .float-btn.secondary{
    width:58px; height:58px;
    background:linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
  }
  .float-btn.primary svg,
  .float-btn.secondary svg{ width:27px; height:27px; color:#151006; }
  .float-btn.secondary:hover,
  .float-btn.primary:hover{ box-shadow:0 16px 34px rgba(0,0,0,0.55); }

  .float-label{
    position:absolute;
    right:calc(100% + 12px);
    top:50%;
    transform:translateY(-50%) translateX(6px);
    background:var(--surface-2);
    border:1px solid var(--hairline);
    color:var(--ivory);
    font-size:12.5px;
    font-weight:500;
    letter-spacing:0.02em;
    padding:7px 12px;
    border-radius:4px;
    white-space:nowrap;
    opacity:0;
    pointer-events:none;
    transition:opacity .3s var(--ease), transform .3s var(--ease);
  }
  .float-btn:hover .float-label{ opacity:1; transform:translateY(-50%) translateX(0); }

  /* ---------- Responsive ---------- */
  @media (max-width: 980px){
    .service-grid{ grid-template-columns:repeat(2,1fr); }
    .consultant-grid{ grid-template-columns:repeat(2,1fr); gap:36px 20px; }
    .why-list{ grid-template-columns:repeat(2,1fr); }
    .contact-grid{ grid-template-columns:1fr; padding:44px 32px; gap:44px; }
    .contact-info{ border-left:none; padding-left:0; border-top:1px solid var(--hairline); padding-top:34px; }
    .header-phone{ display:none; }
  }
  @media (max-width: 640px){
    .container{ padding:0 20px; }
    .service-grid{ grid-template-columns:1fr; }
    .consultant-grid{ grid-template-columns:1fr 1fr; }
    .why-list{ grid-template-columns:1fr; }
    .hero{ padding-top:100px; }
    .hero-content{ padding-bottom:70px; }
    .footer-top{ flex-direction:column; }
    .footer-links{ gap:34px; }
    .contact-grid{ padding:32px 22px; }
    .brand-text .en{ font-size:12px; }
    .brand-text .ar{ font-size:10px; }
    .float-actions{ bottom:18px; right:18px; gap:12px; }
    .float-btn.primary,
    .float-btn.secondary{ width:48px; height:48px; }
    .float-btn.primary svg,
    .float-btn.secondary svg{ width:22px; height:22px; }
    .float-label{ display:none; }
  }
  @media (max-width: 400px){
    .float-actions{ bottom:14px; right:14px; gap:10px; }
    .float-btn.primary,
    .float-btn.secondary{ width:44px; height:44px; }
  }