:root{
    --bg:#0a0908; --bg-2:#14110d; --bg-3:#100d0a;
    --line:rgba(201,168,90,.18); --line-2:rgba(201,168,90,.30);
    --gold-1:#f4d782; --gold-2:#c9a85a; --gold-3:#8b6914;
    --ink:#e8e0d0; --mute:#807668;
    /* SF Pro — Apple system stack (real SF Pro on Apple devices, graceful fallback elsewhere) */
    --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
    --serif:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
    --serif-i:var(--serif);
  }
  *,*::before,*::after{box-sizing:border-box}
  html,body{margin:0;padding:0}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
  body{
    background:var(--bg); color:var(--ink);
    font-family:var(--sans); font-weight:300;
    -webkit-font-smoothing:antialiased; overflow-x:hidden; position:relative;
  }
  body::before{
    content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(ellipse 80% 60% at 50% 0%,rgba(201,168,90,.07),transparent 60%),
      radial-gradient(ellipse 50% 40% at 50% 100%,rgba(201,168,90,.04),transparent 70%);
  }
  body::after{
    content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
    opacity:.5; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.8 0 0 0 0 0.7 0 0 0 0 0.4 0 0 0 0.04 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  }
  a{color:inherit;text-decoration:none}
  /* height:auto is required alongside the width/height attributes: without it the
     attribute height wins while CSS caps the width, and the image is stretched. */
  img{display:block;max-width:100%;height:auto}
  section{position:relative;z-index:1}
  .wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,56px)}

  /* ── headings ── */
  .eyebrow{
    font-family:var(--serif-i); font-weight:300; color:var(--gold-1);
    font-size:clamp(15px,1.8vw,20px); letter-spacing:.04em; margin:0 0 14px;
  }
  .eyebrow::before{
    content:""; display:inline-block; width:34px; height:1px; vertical-align:middle;
    margin-right:14px; background:linear-gradient(90deg,transparent,var(--gold-2));
  }
  h2.title{
    font-family:var(--serif); font-weight:250; margin:0;
    font-size:clamp(28px,4.4vw,46px); letter-spacing:-.02em; line-height:1.15; color:#fff;
  }
  .lead{
    font-family:var(--serif); font-weight:300; color:var(--ink); line-height:1.8;
    font-size:clamp(15px,1.5vw,18px); letter-spacing:0; max-width:640px;
  }

  /* ── NAV ── */
  header.nav{
    position:fixed; top:0; left:0; right:0; z-index:50;
    display:flex; align-items:center; justify-content:space-between;
    padding:14px clamp(20px,5vw,56px);
    transition:padding .35s;
    border-bottom:1px solid transparent;
  }
  header.nav::before{
    content:""; position:absolute; inset:0; z-index:-1;
    transition:background .35s,border-color .35s;
    border-bottom:1px solid transparent;
  }
  header.nav.scrolled{ padding:19px clamp(20px,5vw,56px); }
  header.nav.scrolled::before{
    background:rgba(10,9,8,.82); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
  }
  .nav .brand{display:flex;align-items:center;gap:14px}
  .nav .brand img{height:36px;width:auto;filter:drop-shadow(0 2px 12px rgba(201,168,90,.25))}
  .nav .brand small{font-family:var(--serif);font-weight:400;letter-spacing:.28em;font-size:11px;color:var(--gold-2);text-transform:uppercase;white-space:nowrap}
  /* Tagline gives way to the nav on narrower desktops — logo alone still carries
     the brand. Threshold measured: brand + 8 nav items + language switch need
     ~1475px, so hide it below 1500px or the nowrap text overflows the links. */
  @media (max-width:1500px){ .nav .brand small{display:none} }
  .nav-links{display:flex;align-items:center;gap:clamp(16px,1.9vw,30px)}
  .nav-links a{
    font-size:13px; letter-spacing:.12em; color:var(--mute); text-transform:uppercase;
    position:relative; transition:color .25s; padding:4px 0; white-space:nowrap;
  }
  .nav-links a::after{
    content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0;
    background:linear-gradient(90deg,var(--gold-1),var(--gold-2)); transition:width .3s;
  }
  .nav-links a:hover{color:var(--ink)} .nav-links a:hover::after{width:100%}
  .nav-links a i{
    font-size:12px;margin-right:7px;color:var(--gold-2);opacity:.72;
    transition:opacity .25s,color .25s,transform .25s;
  }
  .nav-links a:hover i{opacity:1;color:var(--gold-1);transform:translateY(-1px)}
  .nav-links .nav-logo{display:none}   /* only used by the full-screen mobile menu */
  @media (max-width:1150px){ .nav-links a i{display:none} }
  .nav-toggle{display:none;background:none;border:0;color:var(--ink);font-size:20px;cursor:pointer}

  /* ── HERO ── */
  .hero{
    min-height:100vh; min-height:100dvh;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding:120px 20px 60px; gap:clamp(22px,4vw,34px);
    isolation:isolate; overflow:hidden;
  }
  /* background photo — grayscale, 20% */
  .hero::before{
    content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
    background-image:url("/assets/industrial-plant-oman-hero-mobile.jpg");
    background-position:50% 50%; background-size:cover; background-repeat:no-repeat;
    filter:grayscale(1) contrast(1.06);
    opacity:.20;
  }
  /* scrim — keeps logo/text legible and fades into the next section */
  .hero::after{
    content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:
      radial-gradient(ellipse 70% 55% at 50% 45%,rgba(10,9,8,.55),transparent 70%),
      linear-gradient(180deg,rgba(10,9,8,.85) 0%,transparent 22%,transparent 60%,var(--bg) 100%);
  }
  @media (min-width:768px){
    .hero::before{background-image:url("/assets/industrial-plant-oman-hero.jpg")}
  }
  /* Short laptop windows (e.g. 1440×740): the stacked hero content grew taller than
     the viewport, pushing the sector strip below the fold and cropping the photo to
     a tight middle band. Tighten the vertical rhythm so the hero fits the fold and
     the background keeps its intended framing. */
  @media (min-width:768px) and (max-height:860px){
    .hero{padding:96px 20px 44px;gap:clamp(14px,2.2vh,26px)}
    .hero .logo{width:min(420px,46vw)}
    .hero .sectors a{padding:clamp(12px,1.8vh,20px) 10px}
  }
  @media (min-width:768px) and (max-height:700px){
    .hero{padding:84px 20px 36px;gap:clamp(10px,1.6vh,18px)}
    .hero .logo{width:min(330px,36vw)}
  }
  .hero .logo{width:min(540px,80vw);opacity:0;animation:fadeUp 1.1s cubic-bezier(.2,.7,.2,1) .1s forwards}
  .hero .logo img{filter:drop-shadow(0 6px 40px rgba(201,168,90,.25))}
  .hero .sub{
    font-family:var(--serif-i); font-weight:200; color:var(--gold-1);
    font-size:clamp(19px,3vw,30px); letter-spacing:.06em; display:inline-flex; align-items:center; gap:18px;
    opacity:0; animation:fadeUp 1.1s cubic-bezier(.2,.7,.2,1) .4s forwards;
  }
  .hero .sub::before,.hero .sub::after{content:"";height:1px;width:clamp(28px,6vw,56px);background:linear-gradient(90deg,transparent,var(--gold-2),transparent)}
  .hero .tag{
    max-width:660px; font-family:var(--serif); font-weight:300; font-size:clamp(15px,1.6vw,18px); line-height:1.75; color:var(--ink);
    opacity:0; animation:fadeUp 1.1s cubic-bezier(.2,.7,.2,1) .6s forwards;
  }
  .hero .sectors{
    width:100%; max-width:920px; margin-top:8px;
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    display:grid; grid-template-columns:repeat(4,1fr);
    opacity:0; animation:fadeUp 1.1s cubic-bezier(.2,.7,.2,1) .8s forwards;
  }
  .hero .sectors a{padding:clamp(18px,2.6vw,26px) 10px;text-align:center;border-right:1px solid var(--line);position:relative;transition:background .4s}
  .hero .sectors a:last-child{border-right:0}
  .hero .sectors a::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-2),transparent);transform:scaleX(0);transition:transform .5s}
  .hero .sectors a:hover::before{transform:scaleX(1)} .hero .sectors a:hover{background:rgba(201,168,90,.04)}
  .hero .sectors .n{font-family:var(--serif-i);font-weight:400;font-size:11px;color:var(--gold-3);letter-spacing:.3em;display:block;margin-bottom:7px}
  .hero .sectors .nm{font-family:var(--serif);font-weight:300;font-size:clamp(13px,1.5vw,16px);color:var(--ink);letter-spacing:.1em;text-transform:uppercase}
  .scroll-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);color:var(--gold-2);font-size:18px;opacity:0;animation:fadeUp 1s 1.2s forwards,bob 2s 1.8s infinite}

  /* ── reveal ── */
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}
  .reveal[data-d="1"]{transition-delay:.08s}
  .reveal[data-d="2"]{transition-delay:.16s}
  .reveal[data-d="3"]{transition-delay:.24s}

  /* ── CATEGORY full sections ── */
  .cat{
    min-height:100vh; min-height:100dvh; display:flex; align-items:center;
    padding:clamp(80px,11vh,130px) 0; border-top:1px solid var(--line);
  }
  .cat .grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(40px,6vw,90px);align-items:center;width:100%}
  .cat:nth-child(even) .grid{direction:rtl} .cat:nth-child(even) .grid>*{direction:ltr}
  /* meta row — plain icon + small number, sits above the headline */
  .cat .cat-meta{display:flex;align-items:center;gap:13px;margin-bottom:14px}
  .cat .cat-meta i{
    color:var(--gold-1);font-size:26px;line-height:1;
    filter:drop-shadow(0 0 22px rgba(201,168,90,.45));
  }
  .cat .cat-meta .num{
    font-size:12px;font-weight:400;letter-spacing:.34em;color:var(--gold-3);
    text-transform:uppercase;padding-left:13px;position:relative;
  }
  .cat .cat-meta .num::before{
    content:"";position:absolute;left:0;top:50%;width:1px;height:13px;
    transform:translateY(-50%);background:var(--line-2);
  }
  .cat h2{
    font-family:var(--serif);font-weight:300;color:#fff;
    font-size:clamp(40px,6.4vw,72px);margin:0 0 10px;letter-spacing:-.035em;line-height:1.02;
    text-shadow:0 2px 40px rgba(0,0,0,.5);
  }
  .cat .kicker{font-family:var(--serif-i);font-weight:300;color:var(--gold-1);font-size:clamp(15px,1.7vw,20px);margin:0 0 22px;letter-spacing:.01em}
  .cat p.desc{font-family:var(--serif);font-weight:300;line-height:1.85;color:var(--ink);font-size:clamp(15px,1.5vw,18px);max-width:560px;margin:0 0 30px}
  .cat ul.points{list-style:none;margin:0 0 34px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 26px}
  .cat ul.points li{font-size:13.5px;letter-spacing:.02em;color:var(--ink);position:relative;padding-left:22px;line-height:1.5}
  .cat ul.points li::before{content:"\f054";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;left:0;top:1px;color:var(--gold-2);font-size:9px}
  .btn{
    display:inline-flex;align-items:center;gap:12px;
    font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--bg);
    background:linear-gradient(180deg,var(--gold-1),var(--gold-2));
    padding:14px 28px;border-radius:999px;font-weight:500;
    transition:transform .3s,box-shadow .3s;box-shadow:0 6px 26px rgba(201,168,90,.2);
  }
  .btn:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(201,168,90,.34)}
  .btn i{transition:transform .3s} .btn:hover i{transform:translateX(4px)}
  .btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2);box-shadow:none}
  .btn-ghost:hover{border-color:var(--gold-2);color:var(--gold-1);box-shadow:0 8px 26px rgba(201,168,90,.12)}

  /* visual panel for category */
  .cat .visual{
    aspect-ratio:1/1.05;border:1px solid var(--line);border-radius:6px;position:relative;overflow:hidden;
    background:linear-gradient(155deg,var(--bg-2),var(--bg-3));display:grid;place-items:center;
  }
  .cat .visual::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 20%,rgba(201,168,90,.12),transparent 60%)}
  .cat .visual .big{font-size:clamp(120px,20vw,220px);color:rgba(201,168,90,.10);transition:transform .6s,color .6s}
  .cat .visual:hover .big{transform:scale(1.06) rotate(-3deg);color:rgba(201,168,90,.18)}
  .cat .visual .stamp{position:absolute;bottom:22px;left:24px;font-family:var(--serif-i);font-weight:300;color:var(--gold-2);font-size:14px;letter-spacing:.05em}
  .cat .visual .corner{position:absolute;top:18px;right:22px;font-family:var(--serif);font-weight:400;letter-spacing:.3em;font-size:11px;color:var(--mute);text-transform:uppercase}

  /* ── ABOUT ── */
  #about{padding:clamp(90px,13vh,150px) 0;border-top:1px solid var(--line);background:linear-gradient(180deg,transparent,rgba(20,17,13,.5),transparent)}
  .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);align-items:start}
  .about-facts{display:grid;gap:0;border-top:1px solid var(--line)}
  .about-facts .row{padding:22px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:baseline}
  .about-facts .row .k{font-family:var(--serif);font-weight:400;color:var(--gold-1);font-size:13px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
  .about-facts .row .v{font-size:14.5px;line-height:1.7;color:var(--ink)}
  .vm{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:38px}
  .vm .card{border:1px solid var(--line);border-radius:6px;padding:26px;background:linear-gradient(160deg,rgba(20,17,13,.6),transparent);transition:border-color .35s,transform .35s}
  .vm .card:hover{border-color:var(--line-2);transform:translateY(-3px)}
  .vm .card i{color:var(--gold-1);font-size:22px;margin-bottom:14px}
  .vm .card h3{font-family:var(--serif);font-weight:300;color:#fff;margin:0 0 12px;font-size:19px;letter-spacing:-.01em}
  .vm .card ul{margin:0;padding-left:18px;display:grid;gap:8px}
  .vm .card li{font-size:13px;line-height:1.55;color:var(--ink)}

  /* ── SERVICES ── */
  #services{padding:clamp(90px,13vh,150px) 0;border-top:1px solid var(--line)}
  .svc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:clamp(40px,6vw,66px)}
  .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .svc{
    border:1px solid var(--line);border-radius:8px;padding:34px 30px;
    background:linear-gradient(165deg,rgba(20,17,13,.55),transparent);
    position:relative;overflow:hidden;transition:transform .4s,border-color .4s,box-shadow .4s;
  }
  .svc::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% -10%,rgba(201,168,90,.12),transparent 55%);opacity:0;transition:opacity .45s}
  .svc:hover{transform:translateY(-6px);border-color:var(--line-2);box-shadow:0 20px 50px rgba(0,0,0,.4)}
  .svc:hover::before{opacity:1}
  .svc .ic{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);color:var(--gold-1);font-size:23px;margin-bottom:22px;transition:transform .4s,background .4s}
  .svc:hover .ic{transform:scale(1.08) rotate(6deg);background:radial-gradient(circle at 30% 25%,rgba(201,168,90,.18),transparent 70%)}
  .svc h3{font-family:var(--serif);font-weight:300;color:#fff;margin:0 0 12px;font-size:21px;letter-spacing:-.012em}
  .svc p{font-size:13.5px;line-height:1.7;color:var(--mute);margin:0}
  .svc:hover p{color:var(--ink)}

  /* ── values strip ── */
  #values{padding:clamp(70px,10vh,120px) 0;border-top:1px solid var(--line);background:linear-gradient(180deg,transparent,rgba(20,17,13,.4),transparent)}
  .val-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
  .val{background:var(--bg);padding:34px 30px;transition:background .4s}
  .val:hover{background:var(--bg-2)}
  .val i{color:var(--gold-1);font-size:22px;margin-bottom:16px;display:block}
  .val h3{font-family:var(--serif);font-weight:300;color:#fff;font-size:18px;margin:0 0 10px;letter-spacing:-.01em}
  .val p{font-size:13px;line-height:1.6;color:var(--mute);margin:0}

  /* ── FAQ ── */
  #faq{padding:clamp(90px,13vh,150px) 0;border-top:1px solid var(--line)}
  .faq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,6vw,70px);align-items:start}
  .faq-list{border-top:1px solid var(--line)}
  .faq-item{border-bottom:1px solid var(--line)}
  .faq-q{
    width:100%;background:none;border:0;cursor:pointer;text-align:left;color:var(--ink);
    font-family:var(--serif);font-weight:300;font-size:clamp(16px,1.9vw,21px);letter-spacing:-.01em;
    padding:24px 44px 24px 0;position:relative;display:flex;transition:color .3s;
  }
  .faq-q:hover{color:var(--gold-1)}
  .faq-q .ico{position:absolute;right:0;top:50%;transform:translateY(-50%);color:var(--gold-2);font-size:14px;transition:transform .35s}
  .faq-item.open .faq-q .ico{transform:translateY(-50%) rotate(45deg)}
  .faq-item.open .faq-q{color:var(--gold-1)}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.4,0,.2,1)}
  .faq-a .inner{padding:0 0 26px;color:var(--mute);font-size:14.5px;line-height:1.8;max-width:600px}

  /* ── CONTACT ── */
  #contact{padding:clamp(90px,13vh,150px) 0 0;border-top:1px solid var(--line)}
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);align-items:start}
  .contact-info{display:grid;gap:18px;margin-top:30px}
  .ci{display:flex;gap:18px;align-items:flex-start;padding:20px 22px;border:1px solid var(--line);border-radius:8px;transition:border-color .35s,transform .35s;background:linear-gradient(160deg,rgba(20,17,13,.5),transparent)}
  .ci:hover{border-color:var(--line-2);transform:translateX(4px)}
  .ci i{color:var(--gold-1);font-size:18px;width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;flex:0 0 auto;margin-top:2px}
  .ci .lbl{font-family:var(--serif);font-weight:400;color:var(--gold-1);font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:5px}
  .ci .txt{font-size:14.5px;line-height:1.6;color:var(--ink)}
  .ci .txt a{transition:color .25s} .ci .txt a:hover{color:var(--gold-1)}
  form.cform{display:grid;gap:16px;margin-top:30px}
  form.cform .field{display:grid;gap:7px}
  form.cform label{font-family:var(--serif);font-weight:400;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
  form.cform input,form.cform textarea{
    background:rgba(20,17,13,.6);border:1px solid var(--line);border-radius:6px;
    padding:13px 16px;color:var(--ink);font-family:var(--sans);font-size:14px;font-weight:300;
    transition:border-color .3s,box-shadow .3s;
  }
  form.cform input:focus,form.cform textarea:focus{outline:none;border-color:var(--gold-2);box-shadow:0 0 0 3px rgba(201,168,90,.1)}
  form.cform textarea{resize:vertical;min-height:120px}
  form.cform .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .note{font-size:12px;color:var(--mute);margin-top:4px}

  /* ── FOOTER ── */
  footer{margin-top:clamp(70px,10vh,120px);border-top:1px solid var(--line);padding:46px 0 40px}
  .foot-grid{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
  .foot-grid .brand{display:flex;align-items:center;gap:14px}
  .foot-grid .brand img{height:34px}
  .foot-grid .brand small{font-family:var(--serif);font-weight:400;letter-spacing:.26em;font-size:11px;color:var(--gold-2);text-transform:uppercase}
  .foot-grid .loc{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;letter-spacing:.12em;color:var(--mute)}
  .foot-grid .loc::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold-2);box-shadow:0 0 12px rgba(201,168,90,.6)}
  .copy{text-align:center;margin-top:34px;font-size:11.5px;letter-spacing:.14em;color:var(--mute)}

  @keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  @keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(7px)}}

  /* ── RESPONSIVE ── */
  @media (max-width:900px){
    /* Full-screen overlay menu */
    .nav-links{
      position:fixed;inset:0;width:100%;height:100%;height:100dvh;
      background:rgba(10,9,8,.985);backdrop-filter:blur(20px);
      /* auto margins on the first/last child centre the block when it fits but
         collapse when it doesn't — `justify-content:center` would clip the top
         of an overflowing list and make it unreachable by scrolling. */
      flex-direction:column;align-items:center;justify-content:flex-start;
      gap:clamp(16px,2.6vh,26px);padding:96px 24px 44px;border-left:0;
      overflow-y:auto;overscroll-behavior:contain;
      opacity:0;visibility:hidden;transform:translateY(-10px);
      transition:opacity .32s ease,transform .32s ease,visibility 0s .32s;
    }
    .nav-links.open{
      opacity:1;visibility:visible;transform:none;
      transition:opacity .32s ease,transform .32s ease,visibility 0s 0s;
    }
    /* Logo sits centred above the links */
    .nav-links .nav-logo{
      display:block;width:min(190px,52vw);
      margin:auto auto clamp(14px,3vh,30px);
      opacity:0;transform:translateY(-8px);transition:opacity .4s .12s ease,transform .4s .12s ease;
    }
    .nav-links a:last-of-type{margin-bottom:auto}
    .nav-links.open .nav-logo{opacity:1;transform:none}
    .nav-links .nav-logo img{width:100%;height:auto;filter:drop-shadow(0 4px 26px rgba(201,168,90,.3))}
    /* Fixed item width keeps every icon on the same vertical line while the
       whole block stays centred in the viewport. */
    .nav-links a{
      font-size:17px;display:flex;align-items:center;gap:16px;
      width:min(300px,78vw);padding:6px 0;
    }
    .nav-links a i{
      display:grid;place-items:center;flex:0 0 auto;
      width:24px;font-size:18px;margin-right:0;opacity:1;
      color:var(--gold-1);
      filter:drop-shadow(0 0 14px rgba(201,168,90,.35));
    }
    .nav-links a:active{color:var(--ink)}
    .nav-links a:active i{color:var(--gold-2);transform:none}
    .nav-links a::after{display:none}
    /* Stop the page scrolling behind the open overlay */
    body.menu-open{overflow:hidden}
    /* Landscape phones — must come after the rules above to win on equal specificity */
    @media (max-height:520px){
      .nav-links{padding:60px 24px 26px;gap:8px}
      .nav-links .nav-logo{width:min(120px,28vw);margin-bottom:10px}
      .nav-links a{font-size:14.5px;padding:2px 0}
      .nav-links a i{font-size:15px;width:20px}
    }
    .nav-actions{z-index:60}
    .lang-switch{padding:5px 11px;font-size:11px}
    .nav-toggle{display:block;z-index:60}
    .cat .grid,.about-grid,.faq-grid,.contact-grid,.svc-head{grid-template-columns:1fr}
    .cat:nth-child(even) .grid{direction:ltr}
    .cat .visual{max-width:420px;margin:0 auto}
    .svc-grid,.val-grid{grid-template-columns:1fr 1fr}
    .vm{grid-template-columns:1fr}
    form.cform .row2{grid-template-columns:1fr}
    .cat ul.points{grid-template-columns:1fr}
  }
  @media (max-width:560px){
    .hero .sectors{grid-template-columns:1fr 1fr}
    .hero .sectors a:nth-child(2){border-right:0}
    .hero .sectors a:nth-child(1),.hero .sectors a:nth-child(2){border-bottom:1px solid var(--line)}
    .svc-grid,.val-grid{grid-template-columns:1fr}
    .about-facts .row{grid-template-columns:1fr;gap:6px}
    .foot-grid{justify-content:center;text-align:center}
  }

  /* ══════════════  LANGUAGE SWITCH  ══════════════ */
  .lang-switch{
    display:inline-flex;align-items:center;gap:7px;font-size:12px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--gold-2);border:1px solid var(--line-2);
    border-radius:999px;padding:6px 14px;transition:color .25s,border-color .25s,background .25s;white-space:nowrap;
  }
  .lang-switch:hover{color:var(--gold-1);border-color:var(--gold-2);background:rgba(201,168,90,.07)}
  .lang-switch i{font-size:11px;opacity:.8;margin:0}
  .nav-actions{display:flex;align-items:center;gap:14px}
  .skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--gold-1);color:var(--bg);padding:12px 20px;border-radius:0 0 6px 0;font-size:13px}
  .skip-link:focus{left:0}
  :focus-visible{outline:2px solid var(--gold-1);outline-offset:3px}

  /* ══════════════  PRODUCT PAGES  ══════════════ */
  .page-product header.nav{
    position:sticky;top:0;padding:12px clamp(20px,5vw,56px);
    background:rgba(10,9,8,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
  }
  .page-product header.nav::before{display:none}
  .page-product .nav .brand img{height:34px}
  .page-product .nav .brand small{display:inline}
  /* Mobile: the tagline + full "back to overview" label do not fit beside the
     language switch and used to overlap. Drop the tagline and reduce the back
     link to its arrow (the label stays available as an aria-label). */
  @media (max-width:820px){
    .page-product .nav .brand small{display:none}
    .page-product .back .back-label{display:none}
    .page-product .back{font-size:17px;padding:4px}
    .page-product header.nav{gap:12px}
    .page-product .nav-actions{gap:10px}
  }
  .back{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);transition:color .25s}
  .back:hover{color:var(--gold-1)}
  .back i{transition:transform .3s}.back:hover i{transform:translateX(-3px)}

  .phero{padding:clamp(60px,9vw,110px) 0 clamp(40px,5vw,60px);border-bottom:1px solid var(--line)}
  .crumb{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:30px}
  .crumb a{transition:color .25s} .crumb a:hover{color:var(--gold-1)} .crumb span{color:var(--gold-2)}
  .phead{display:flex;gap:clamp(24px,4vw,44px);align-items:center;flex-wrap:wrap}
  .phead .badge{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);color:var(--gold-1);font-size:38px;flex:0 0 auto;background:radial-gradient(circle at 30% 25%,rgba(201,168,90,.14),transparent 70%);box-shadow:0 0 50px rgba(201,168,90,.1)}
  .phead .meta{flex:1;min-width:260px}
  .phead .num{font-family:var(--serif-i);font-weight:400;color:var(--gold-3);letter-spacing:.3em;font-size:13px;display:block;margin-bottom:8px}
  .phead h1{font-family:var(--serif);font-weight:250;color:#fff;font-size:clamp(32px,5.4vw,54px);margin:0 0 6px;letter-spacing:-.022em;line-height:1.08}
  .phead .kicker{font-family:var(--serif-i);font-weight:300;color:var(--gold-1);font-size:clamp(16px,2vw,21px);margin:0 0 18px}
  .phead .intro{font-family:var(--serif);font-weight:300;line-height:1.8;color:var(--ink);font-size:clamp(15px,1.5vw,18px);max-width:680px;margin:0}

  .groups{padding:clamp(50px,7vw,80px) 0}
  .group{margin-bottom:clamp(40px,5vw,60px)}
  .group:last-child{margin-bottom:0}
  .ghead{display:flex;align-items:center;gap:16px;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid var(--line)}
  .ghead .gi{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);color:var(--gold-1);font-size:19px;flex:0 0 auto}
  .ghead h2{font-family:var(--serif);font-weight:300;color:#fff;font-size:clamp(20px,2.6vw,27px);margin:0;letter-spacing:-.012em}
  .items{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .item{display:flex;gap:16px;align-items:flex-start;padding:20px 22px;border:1px solid var(--line);border-radius:8px;background:linear-gradient(160deg,rgba(20,17,13,.5),transparent);transition:transform .35s,border-color .35s,box-shadow .35s}
  .item:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:0 16px 40px rgba(0,0,0,.4)}
  .item i{color:var(--gold-2);font-size:13px;margin-top:5px;flex:0 0 auto}
  .item span{font-size:14.5px;line-height:1.6;color:var(--ink)}

  .cta{margin:clamp(20px,4vw,40px) 0 clamp(60px,8vw,90px);border:1px solid var(--line);border-radius:10px;padding:clamp(34px,5vw,54px);text-align:center;background:linear-gradient(165deg,rgba(20,17,13,.6),transparent);position:relative;overflow:hidden}
  .cta::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% -20%,rgba(201,168,90,.12),transparent 60%)}
  .cta h2{font-family:var(--serif);font-weight:250;color:#fff;font-size:clamp(24px,3.4vw,34px);margin:0 0 12px;letter-spacing:-.02em;position:relative}
  .cta p{color:var(--mute);font-size:15px;line-height:1.7;max-width:520px;margin:0 auto 28px;position:relative}
  .cta-actions{position:relative;display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap}
  .cta-actions .btn i{font-size:16px}
  .cta-actions .btn:hover i{transform:none}
  .btn-wa{background:linear-gradient(180deg,#3ddc72,#1faf52);color:#04220f;box-shadow:0 6px 26px rgba(37,211,102,.22)}
  .btn-wa:hover{box-shadow:0 12px 34px rgba(37,211,102,.36)}
  .cta .btn-ghost{background:none;color:var(--gold-1);border:1px solid var(--line-2);box-shadow:none}
  .cta .btn-ghost:hover{background:rgba(201,168,90,.07);border-color:var(--gold-2);box-shadow:0 10px 30px rgba(201,168,90,.14)}
  .cta p.cta-note{position:relative;margin:18px auto 0;font-size:12.5px;letter-spacing:.04em;color:var(--mute)}

  .others{padding:0 0 clamp(60px,8vw,90px)}
  .others h2{font-family:var(--serif-i);font-weight:300;color:var(--gold-1);font-size:18px;margin:0 0 24px}
  .ocards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .ocard{display:flex;flex-direction:column;gap:14px;padding:26px;border:1px solid var(--line);border-radius:8px;background:linear-gradient(160deg,rgba(20,17,13,.45),transparent);transition:transform .35s,border-color .35s}
  .ocard:hover{transform:translateY(-4px);border-color:var(--line-2)}
  .ocard i{color:var(--gold-1);font-size:24px}
  .ocard .nm{font-family:var(--serif);font-weight:300;color:#fff;font-size:19px;letter-spacing:-.01em}
  .ocard .go{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);display:inline-flex;align-items:center;gap:8px;transition:color .25s}
  .ocard:hover .go{color:var(--gold-1)}
  .page-product footer{margin-top:0;border-top:1px solid var(--line);padding:36px 0;text-align:center;font-size:11.5px;letter-spacing:.14em;color:var(--mute)}
  .page-product footer a{color:var(--gold-2);transition:color .25s}
  .page-product footer a:hover{color:var(--gold-1)}

  /* 404 */
  .e404{min-height:70vh;display:flex;align-items:center;padding:140px 0 90px;text-align:center}
  .e404 .wrap{max-width:720px}
  .e404 h1{font-family:var(--serif);font-weight:250;color:#fff;font-size:clamp(34px,5vw,54px);margin:0 0 14px;letter-spacing:-.02em}
  .e404 p{color:var(--mute);font-size:15px;line-height:1.8;margin:0 auto 30px;max-width:520px}
  .e404 .links{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

  @media (max-width:820px){.items,.ocards{grid-template-columns:1fr}}

  /* ══════════════  RTL (Arabic)  ══════════════ */
  [dir="rtl"] .eyebrow::before{margin-right:0;margin-left:14px;background:linear-gradient(270deg,transparent,var(--gold-2))}
  [dir="rtl"] .nav-links a::after{left:auto;right:0}
  [dir="rtl"] .nav-links a i{margin-right:0;margin-left:7px}
  [dir="rtl"] .cat ul.points li{padding-left:0;padding-right:22px}
  [dir="rtl"] .cat ul.points li::before{left:auto;right:0;content:"\f053"}
  [dir="rtl"] .cat .cat-meta .num{padding-left:0;padding-right:13px}
  [dir="rtl"] .cat .cat-meta .num::before{left:auto;right:0}
  [dir="rtl"] .cat .visual .stamp{left:auto;right:24px}
  [dir="rtl"] .cat .visual .corner{right:auto;left:22px}
  [dir="rtl"] .cat:nth-child(even) .grid{direction:ltr}
  [dir="rtl"] .cat:nth-child(even) .grid>*{direction:rtl}
  [dir="rtl"] .vm .card ul{padding-left:0;padding-right:18px}
  [dir="rtl"] .faq-q{text-align:right;padding:24px 0 24px 44px}
  [dir="rtl"] .faq-q .ico{right:auto;left:0}
  [dir="rtl"] .ci:hover{transform:translateX(-4px)}
  [dir="rtl"] .btn:hover i{transform:translateX(-4px)}
  [dir="rtl"] .back i{transform:scaleX(-1)}
  [dir="rtl"] .back:hover i{transform:scaleX(-1) translateX(-3px)}
  [dir="rtl"] .ocard .go i,[dir="rtl"] .btn i.fa-arrow-right{transform:scaleX(-1)}
  [dir="rtl"] .ocard:hover .go i{transform:scaleX(-1) translateX(4px)}
  [dir="rtl"] .skip-link{left:auto;right:-9999px;border-radius:0 0 0 6px}
  [dir="rtl"] .skip-link:focus{right:0}
  [dir="rtl"] .hero .sectors a{border-right:0;border-left:1px solid var(--line)}
  [dir="rtl"] .hero .sectors a:last-child{border-left:0}
  @media (max-width:900px){
    /* The mobile menu is a full-screen overlay in both directions — only the
       icon/label order flips, which `dir` handles on its own. */
    [dir="rtl"] .cat:nth-child(even) .grid>*{direction:rtl}
  }
  @media (max-width:560px){
    [dir="rtl"] .hero .sectors a:nth-child(2){border-left:0}
  }

  /* ── Arabic typography — Noto Sans Arabic ──
     Arabic glyphs carry more internal detail than Latin at the same nominal
     size, so the small UI labels are stepped up a little and the tight display
     tracking is removed (negative tracking breaks Arabic letter joining). */
  [lang="ar"]{
    --sans:"Noto Sans Arabic",-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,Arial,sans-serif;
    --serif:"Noto Sans Arabic",-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,Arial,sans-serif;
  }
  [lang="ar"] body{font-weight:400}

  /* Display / headings */
  [dir="rtl"] .hero .sub{font-size:clamp(20px,2.9vw,30px);font-weight:500;line-height:1.5}
  [dir="rtl"] .hero .tag{font-size:clamp(15px,1.5vw,17.5px);font-weight:400}
  [dir="rtl"] .cat h2{font-size:clamp(34px,5.2vw,58px);font-weight:500}
  [dir="rtl"] h2.title{font-size:clamp(25px,3.7vw,40px);font-weight:500}
  [dir="rtl"] .phead h1{font-size:clamp(28px,4.4vw,46px);font-weight:500}
  [dir="rtl"] .cta h2{font-size:clamp(22px,3vw,31px);font-weight:500}
  [dir="rtl"] .ghead h2,[dir="rtl"] .svc h3,[dir="rtl"] .vm .card h3,
  [dir="rtl"] .val h3,[dir="rtl"] .ocard .nm{font-weight:500}
  [dir="rtl"] .ghead h2{font-size:clamp(19px,2.4vw,25px)}
  [dir="rtl"] .e404 h1{font-weight:500}

  /* Body copy */
  /* Weight 300 renders thin in Arabic — body copy sits at 400. */
  [dir="rtl"] .lead,[dir="rtl"] .cat p.desc,[dir="rtl"] .phead .intro,
  [dir="rtl"] .hero .sectors .nm,[dir="rtl"] form.cform input,
  [dir="rtl"] form.cform textarea,[dir="rtl"] .eyebrow{font-weight:400}
  [dir="rtl"] .faq-q{font-weight:500}
  [dir="rtl"] .lead,[dir="rtl"] .cat p.desc,[dir="rtl"] .phead .intro{font-size:clamp(15px,1.5vw,17.5px)}
  [dir="rtl"] .cat .kicker,[dir="rtl"] .phead .kicker{font-weight:400}
  [dir="rtl"] .cat ul.points li{font-size:15px}
  [dir="rtl"] .item span{font-size:15px}
  [dir="rtl"] .svc p,[dir="rtl"] .val p,[dir="rtl"] .vm .card li{font-size:14.5px}
  [dir="rtl"] .faq-a .inner{font-size:15px}
  [dir="rtl"] .ci .txt,[dir="rtl"] .about-facts .row .v{font-size:15px}
  [dir="rtl"] .cta p{font-size:15.5px}

  /* Small labels — 11–12.5px Latin caps become hard to read in Arabic */
  [dir="rtl"] .nav-links a{font-size:14px}
  [dir="rtl"] .nav .brand small,[dir="rtl"] .foot-grid .brand small{font-size:12.5px}
  [dir="rtl"] .ci .lbl,[dir="rtl"] .about-facts .row .k,
  [dir="rtl"] form.cform label,[dir="rtl"] .ocard .go,
  [dir="rtl"] .crumb,[dir="rtl"] .back,[dir="rtl"] .lang-switch{font-size:13px}
  [dir="rtl"] .btn{font-size:13.5px}
  [dir="rtl"] .hero .sectors .nm{font-size:clamp(14px,1.5vw,16px)}
  [dir="rtl"] .cat .visual .corner,[dir="rtl"] .cat .visual .stamp{font-size:13px}
  [dir="rtl"] .copy,[dir="rtl"] .foot-grid .loc,[dir="rtl"] .foot-links,
  [dir="rtl"] .cta p.cta-note,[dir="rtl"] .note{font-size:13px}
  [dir="rtl"] .page-product footer{font-size:13px}
  [dir="rtl"] form.cform input,[dir="rtl"] form.cform textarea{font-size:15px;font-family:var(--sans)}

  [lang="ar"] body,[dir="rtl"] body{letter-spacing:0}
  [dir="rtl"] .cat h2,[dir="rtl"] h2.title,[dir="rtl"] .phead h1,[dir="rtl"] .e404 h1,
  [dir="rtl"] .cta h2,[dir="rtl"] .ghead h2,[dir="rtl"] .svc h3,[dir="rtl"] .vm .card h3,
  [dir="rtl"] .val h3,[dir="rtl"] .ocard .nm,[dir="rtl"] .faq-q{letter-spacing:0;line-height:1.35}
  [dir="rtl"] .cat h2,[dir="rtl"] .phead h1{line-height:1.25}
  [dir="rtl"] .nav-links a,[dir="rtl"] .btn,[dir="rtl"] .ci .lbl,[dir="rtl"] .crumb,
  [dir="rtl"] .back,[dir="rtl"] .ocard .go,[dir="rtl"] .hero .sectors .nm,
  [dir="rtl"] .copy,[dir="rtl"] .foot-grid .loc,[dir="rtl"] .lang-switch,
  [dir="rtl"] form.cform label,[dir="rtl"] .about-facts .row .k{letter-spacing:.02em}
  [dir="rtl"] .cat .cat-meta .num,[dir="rtl"] .phead .num,[dir="rtl"] .hero .sectors .n{letter-spacing:.16em}
  [dir="rtl"] p,[dir="rtl"] .lead,[dir="rtl"] .item span,[dir="rtl"] .faq-a .inner{line-height:1.9}

  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
    .reveal{opacity:1;transform:none}
  }

  /* footer category links — internal linking from every page */
  .foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 14px;margin-top:26px;font-size:12px;letter-spacing:.1em;color:var(--mute)}
  .foot-links a{color:var(--mute);transition:color .25s}
  .foot-links a:hover{color:var(--gold-1)}

  /* contact form — honeypot + status message */
  .cform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  [dir="rtl"] .cform .hp{left:auto;right:-9999px}
  .form-msg{margin:0;font-size:13.5px;line-height:1.6}
  .form-msg:empty{display:none}
  .form-msg.is-ok{color:var(--gold-1);border:1px solid var(--line-2);border-radius:6px;padding:13px 16px;background:rgba(201,168,90,.07)}
  .form-msg.is-error{color:#f0b4a0;border:1px solid rgba(220,120,90,.35);border-radius:6px;padding:13px 16px;background:rgba(220,120,90,.07)}
  .cform button[disabled]{opacity:.7;cursor:progress}