/* ============================================================
   MA Golden Visa Services — design tokens
   ============================================================ */
   :root{
    --navy-950:#060b16;
    --navy-900:#0a1428;
    --navy-800:#0f1d38;
    --navy-700:#16305a;
    --navy-600:#1c3d6e;
  
    --gold-500:#c9a227;
    --gold-400:#d9b64a;
    --gold-300:#e8cd7a;
    --bronze-700:#785c1c;
  
    --cream-50:#f6f2e8;
    --cream-100:#efe8d8;
    --cream-200:#e6dcc4;
  
    --ink-900:#141d31;
    --ink-700:#3a4557;
    --muted:#586487;
    --muted-light:#b9c2d6;
  
    --white:#ffffff;
  
    --font-serif:'Playfair Display', 'Georgia', serif;
    --font-sans:'Inter', -apple-system, sans-serif;
    --font-mono:'JetBrains Mono', 'SFMono-Regular', monospace;
  
    --ease:cubic-bezier(.16,.84,.32,1);
    --container:1240px;
  }
  
  *,*::before,*::after{box-sizing:border-box;}
  /* Native CSS smooth scrolling is intentionally NOT used here: it animates
     scroll position asynchronously over several frames, which fights with
     GSAP ScrollTrigger's pin/scrub math on #process (the browser and GSAP
     both try to own scroll position at once). In-page anchor links are
     smooth-scrolled manually via GSAP in main.js instead — see
     smoothScrollTo(). */
  html{scroll-behavior:auto;}
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  }
  body{
    margin:0;
    font-family:var(--font-sans);
    color:var(--ink-900);
    background:var(--cream-50);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{max-width:100%; display:block;}
  a{color:inherit; text-decoration:none;}
  ul,ol{list-style:none; margin:0; padding:0;}
  button{font:inherit; cursor:pointer; background:none; border:none; color:inherit;}
  input,select,textarea{font:inherit; color:inherit;}
  h1,h2,h3,h4,p{margin:0;}
  
  .container{max-width:var(--container); margin:0 auto; padding:0 32px;}
  @media (max-width:720px){.container{padding:0 20px;}}
  
  em{font-style:italic; color:var(--bronze-700); font-family:inherit; font-weight:inherit;}
  .hero-title em,.section-title.light em,.section-lede em,.brand-text em{color:var(--gold-400);}
  
  /* subtle film-grain texture, purely decorative */
  .grain{
    position:fixed; inset:0; pointer-events:none; z-index:2; opacity:.035; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  
  /* ============================================================
     Cursor
     ============================================================ */
  .cursor-dot,.cursor-ring{position:fixed; top:0; left:0; pointer-events:none; z-index:9999; border-radius:50%; transform:translate(-50%,-50%); will-change:transform;}
  .cursor-dot{width:6px; height:6px; background:var(--gold-500);}
  .cursor-ring{width:34px; height:34px; border:1px solid rgba(201,162,39,.55); transition:width .2s var(--ease), height .2s var(--ease), opacity .2s;}
  .cursor-ring.is-hover{width:56px; height:56px; background:rgba(201,162,39,.08);}
  @media (hover:none), (pointer:coarse){
    .cursor-dot,.cursor-ring{display:none;}
  }
  
  /* ============================================================
     Preloader
     ============================================================ */
  .preloader{
    position:fixed; inset:0; z-index:10000; background:var(--navy-950);
    display:flex; align-items:center; justify-content:center;
    transition:opacity .6s var(--ease), visibility .6s var(--ease);
  }
  .preloader.is-done{opacity:0; visibility:hidden;}
  .preloader-mark{position:relative; width:88px; height:88px; display:flex; align-items:center; justify-content:center;}
  .preloader-mark span{font-family:var(--font-serif); font-size:26px; color:var(--gold-400); letter-spacing:2px;}
  .preloader-ring{position:absolute; inset:0; width:100%; height:100%; fill:none; stroke:var(--gold-500); stroke-width:1.4; stroke-linecap:round; stroke-dasharray:180 100; animation:spin 1.4s linear infinite;}
  @keyframes spin{to{transform:rotate(360deg);}}
  
  /* scroll progress bar */
  .progress-bar{position:fixed; top:0; left:0; height:2px; width:0%; background:linear-gradient(90deg,var(--gold-500),var(--gold-300)); z-index:9998; transition:width .1s linear;}
  
  /* ============================================================
     Nav
     ============================================================ */
  .nav{
    position:fixed; top:0; left:0; right:0; z-index:1000;
    background:rgba(6,11,22,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(255,255,255,.06);
    transition:background .3s var(--ease), padding .3s var(--ease);
  }
  .nav-inner{
    max-width:var(--container); margin:0 auto; padding:18px 32px;
    display:flex; align-items:center; justify-content:space-between; gap:24px;
  }
  .nav.is-scrolled .nav-inner{padding:12px 32px;}
  .brand{display:flex; align-items:center; gap:12px;}
  .brand img{width:38px; height:38px; border-radius:50%; object-fit:cover;}
  .brand-text{font-family:var(--font-serif); font-size:16px; color:var(--white); letter-spacing:.3px; line-height:1;}
  .brand-text em{display:block; font-style:normal; font-family:var(--font-mono); font-size:9px; color:var(--gold-400); letter-spacing:2.5px; text-transform:uppercase; margin-top:3px;}
  
  .nav-links{display:flex; gap:34px;}
  .nav-links a{
    position:relative; font-family:var(--font-mono); font-size:11px; letter-spacing:1.4px; text-transform:uppercase;
    color:var(--muted-light); padding:6px 0;
  }
  .nav-links a span{position:relative;}
  .nav-links a span::after{
    content:''; position:absolute; left:0; bottom:-6px; width:100%; height:1px; background:var(--gold-500);
    transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease);
  }
  .nav-links a:hover span::after,.nav-links a.is-active span::after{transform:scaleX(1); transform-origin:left;}
  .nav-links a:hover,.nav-links a.is-active{color:var(--white);}
  
  .nav-toggle{display:none; flex-direction:column; gap:5px; width:24px;}
  .nav-toggle span{display:block; height:1px; width:100%; background:var(--white); transition:transform .3s var(--ease), opacity .3s var(--ease);}
  .nav-mobile{
    display:none; flex-direction:column; gap:2px; padding:8px 32px 24px; background:var(--navy-950);
  }
  .nav-mobile a{
    padding:14px 0; border-bottom:1px solid rgba(255,255,255,.08); font-family:var(--font-mono); font-size:12px;
    letter-spacing:1.2px; text-transform:uppercase; color:var(--muted-light);
  }
  .nav-mobile a.btn{margin-top:14px; text-align:center; border-bottom:none;}
  
  .nav.is-open .nav-mobile{display:flex;}
  .nav.is-open .nav-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg);}
  .nav.is-open .nav-toggle span:nth-child(2){opacity:0;}
  .nav.is-open .nav-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
  
  @media (max-width:900px){
    .nav-links,.nav-cta{display:none;}
    .nav-toggle{display:flex;}
  }
  .whatsapp-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0,0,0,.3);
    z-index: 999;
    transition: transform .2s ease;
  }
  .whatsapp-float:hover { background: var(--gold-400); }
  
  /* ============================================================
     Buttons
     ============================================================ */
  .btn{
    position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
    padding:16px 30px; font-family:var(--font-mono); font-size:12px; letter-spacing:1.6px; text-transform:uppercase;
    border-radius:2px; transition:transform .2s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
    white-space:nowrap;
  }
  .btn .arrow{width:14px; height:9px; position:relative; display:inline-block;}
  .btn .arrow::before,.btn .arrow::after{content:''; position:absolute; background:currentColor;}
  .btn .arrow::before{top:4px; left:0; width:14px; height:1px;}
  .btn .arrow::after{top:0; right:0; width:8px; height:8px; border-top:1px solid currentColor; border-right:1px solid currentColor; background:none; transform:rotate(45deg); top:1.5px;}
  .btn:hover .arrow{transform:translateX(3px);}
  
  .btn-gold{background:var(--gold-500); color:var(--navy-950); box-shadow:0 8px 24px -8px rgba(201,162,39,.55);}
  .btn-gold:hover{background:var(--gold-400); box-shadow:0 12px 30px -8px rgba(201,162,39,.7);}
  .btn-navy{background:var(--navy-900); color:var(--white);}
  .btn-navy:hover{background:var(--navy-800);}
  .btn-ghost{border:1px solid rgba(255,255,255,.25); color:var(--white);}
  .btn-ghost:hover{border-color:var(--gold-400); color:var(--gold-300);}
  .btn-sm{padding:11px 20px;}
  .btn-block{width:100%;}
  
  /* ============================================================
     Type / section shells
     ============================================================ */
  .eyebrow{
    display:flex; align-items:center; gap:12px; font-family:var(--font-mono); font-size:11px; letter-spacing:2.2px;
    text-transform:uppercase; color:var(--bronze-700); margin-bottom:22px;
  }
  .eyebrow-light{color:var(--gold-400);}
  .eyebrow .rule{width:28px; height:1px; background:var(--gold-500);}
  .eyebrow-mini{font-family:var(--font-mono); font-size:10px; letter-spacing:1.6px; text-transform:uppercase; color:var(--bronze-700);}
  .hero-badge .eyebrow-mini{color:var(--gold-400);}
  
  .section-title{
    font-family:var(--font-serif); font-weight:500; font-size:clamp(2.2rem,4.6vw,3.6rem); line-height:1.05;
    color:var(--ink-900); letter-spacing:-.01em;
  }
  .section-title.light{color:var(--white);}
  .section-title em{font-style:italic; font-weight:400;}
  
  .section-lede{
    max-width:680px; margin-top:22px; font-size:17px; line-height:1.7; color:var(--muted-light);
  }
  .section-navy .section-lede{color:var(--muted-light);}
  
  .section{padding:120px 0;}
  @media (max-width:720px){.section{padding:80px 0;}}
  .section-cream{background:var(--cream-50);}
  .section-white{background:var(--white);}
  .section-navy{background:var(--navy-950); position:relative; overflow:hidden;}
  .section-navy::before{
    content:''; position:absolute; inset:0; background:
      radial-gradient(circle at 85% 15%, rgba(201,162,39,.09), transparent 45%),
      radial-gradient(circle at 10% 90%, rgba(28,61,110,.35), transparent 50%);
    pointer-events:none;
  }
  .section-navy .container{position:relative; z-index:1;}
  
  .muted{color:var(--muted);}
  
  .split-head{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:end; margin-bottom:64px;}
  .split-head-copy{font-size:16px; line-height:1.75; color:var(--muted);}
  @media (max-width:860px){.split-head{grid-template-columns:1fr; gap:24px;}}
  
  /* ============================================================
     Hero
     ============================================================ */
  .hero{
    position:relative; min-height:100vh; display:flex; flex-direction:column; justify-content:center;
    background:var(--navy-950); overflow:hidden; padding:140px 0 40px;
  }
  .hero-bg{position:absolute; inset:0; z-index:0;}
  .hero-photo{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:70% center;
    transform:scale(1.04); transform-origin:center;
  }
  /* horizontal scrim: opaque navy behind the headline column, fading out over the skyline on the right */
  .hero-scrim{
    position:absolute; inset:0; z-index:1;
    background:
      radial-gradient(46% 55% at 80% 60%, rgba(201,162,39,.08), transparent 70%),
      linear-gradient(90deg, var(--navy-950) 0%, rgba(8,16,32,.9) 24%, rgba(8,16,32,.6) 42%, rgba(8,16,32,.28) 58%, rgba(8,16,32,.08) 74%, transparent 90%);
  }
  /* vertical vignette: settles the nav band up top and the seam into the next section */
  .hero-scrim-vertical{
    position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(6,11,22,.5) 0%, transparent 18%, transparent 74%, rgba(6,11,22,.8) 100%);
  }
  .hero-glow{
    position:absolute; top:-10%; right:-10%; width:70%; height:80%; border-radius:50%;
    background:radial-gradient(circle, rgba(28,61,110,.55), transparent 65%); filter:blur(10px);
  }
  .orbit-field{position:absolute; inset:-18%; z-index:0; pointer-events:none;}
  
  /* static, purely decorative concentric rings — no orbiting content on these */
  .orbit-ring-static{position:absolute; inset:0; margin:auto; border-radius:50%; border:1px solid rgba(201,162,39,.14);}
  .orbit-ring-static.mid{width:78%; height:78%;}
  .orbit-ring-static.outer{width:100%; height:100%; border-color:rgba(127,168,224,.12);}
  
  /* rotating tracks — the ring border IS the orbit path; children ride along with it */
  .orbit-track{position:absolute; inset:0; margin:auto; border-radius:50%; border:1px solid rgba(201,162,39,.22);}
  .track-a{width:64%; height:64%; animation:spin-cw 70s linear infinite;}
  .track-b{width:90%; height:90%; border-color:rgba(127,168,224,.2); animation:spin-ccw 95s linear infinite;}
  
  @keyframes spin-cw{from{rotate:0deg;} to{rotate:360deg;}}
  @keyframes spin-ccw{from{rotate:0deg;} to{rotate:-360deg;}}
  
  /* each point sits at a fixed spot on its track's circumference; the track's
     rotate animation carries it around. the marker inside counter-rotates
     (opposite direction, same duration) so the dot+label never tips over. */
  .orbit-point{position:absolute; width:0; height:0;}
  .orbit-marker{
    position:absolute; left:0; top:0; translate:-50% -50%;
    display:flex; align-items:center; gap:7px; white-space:nowrap;
  }
  .track-a .orbit-marker{animation:spin-ccw 70s linear infinite;}
  .track-b .orbit-marker{animation:spin-cw 95s linear infinite;}
  
  .orbit-dot{width:6px; height:6px; border-radius:50%; flex:none; background:var(--gold-400); box-shadow:0 0 10px 2px rgba(217,182,74,.55);}
  .orbit-dot.blue{background:#7fa8e0; box-shadow:0 0 10px 2px rgba(127,168,224,.5);}
  .orbit-label{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.5px; color:var(--muted-light);}
  
  @media (prefers-reduced-motion: reduce){
    .orbit-track,.track-a .orbit-marker,.track-b .orbit-marker{animation:none;}
  }
  @media (max-width:768px){
    .orbit-label{font-size:9px;}
  }
  @media (max-width:480px){
    .orbit-ring-static{display:none;}
    .orbit-label{display:none;}
  }
  
  .hero-inner{
    position:relative; z-index:1; max-width:var(--container); margin:0 auto; padding:0 32px; width:100%;
    display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center;
  }
  .hero-copy{max-width:640px;}
  .hero-title{
    font-family:var(--font-serif); font-weight:500; font-size:clamp(2.8rem,6vw,5rem); line-height:1.04;
    color:var(--white); letter-spacing:-.01em; margin-bottom:26px;
  }
  .hero-title em{font-style:italic; color:var(--gold-400); font-weight:400;}
  .hero-title .word{display:inline-block; overflow:hidden; vertical-align:top;}
  .hero-title .word > span{display:inline-block; will-change:transform;}
  
  .hero-sub{font-size:17px; line-height:1.75; color:var(--muted-light); max-width:520px; margin-bottom:36px;}
  .hero-actions{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:56px;}
  
  .hero-stats{display:flex; gap:44px; padding-top:28px; border-top:1px solid rgba(255,255,255,.1);}
  .stat{display:flex; flex-direction:column; gap:6px;}
  .stat-num{font-family:var(--font-serif); font-size:28px; color:var(--gold-400);}
  .stat-label{font-family:var(--font-mono); font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--muted-light);}
  
  .hero-visual{position:relative; display:flex; align-items:center; justify-content:center;}
  .hero-emblem-wrap{position:relative; width:min(58vw, 345px); max-width:345px; aspect-ratio:1/1;}
  .hero-emblem{
    position:absolute; inset:0; margin:auto; z-index:1;
    width:45%; height:45%; border-radius:50%; object-fit:contain;
    filter:drop-shadow(0 0 40px rgba(201,162,39,.18));
  }
  .hero-badge{
    position:absolute; top:8%; right:-4%; background:rgba(10,20,40,.85); backdrop-filter:blur(8px);
    border:1px solid rgba(201,162,39,.3); border-radius:2px; padding:14px 18px; max-width:220px;
    display:flex; flex-direction:column; gap:6px;
  }
  .hero-badge span:last-child{font-size:12px; color:var(--muted-light); line-height:1.4;}
  
  @media (max-width:980px){
    .hero-inner{grid-template-columns:1fr; text-align:left;}
    /* orbit/emblem is a desktop right-column device; on a single-column mobile
       layout it has no "right side" to occupy and just pushes the headline down */
    .hero-visual{display:none;}
    .hero-photo{object-position:44% center; transform:scale(1);}
    .hero-scrim{
      background:
        radial-gradient(65% 45% at 50% 78%, rgba(201,162,39,.07), transparent 70%),
        linear-gradient(180deg, var(--navy-950) 0%, rgba(8,16,32,.94) 38%, rgba(8,16,32,.6) 58%, rgba(8,16,32,.32) 75%, rgba(8,16,32,.55) 100%);
    }
  }
  @media (max-width:480px){
    .hero-photo{object-position:40% center;}
  }
  
  .scroll-cue{
    position:relative; z-index:1; margin:56px auto 0; display:flex; flex-direction:column; align-items:center; gap:10px;
    font-family:var(--font-mono); font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--muted-light);
  }
  .scroll-cue i{width:1px; height:34px; background:linear-gradient(var(--gold-500), transparent); position:relative; overflow:hidden;}
  .scroll-cue i::after{content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--gold-400); animation:cue 1.8s var(--ease) infinite;}
  @keyframes cue{0%{top:-100%;} 60%{top:100%;} 100%{top:100%;}}
  
  /* ============================================================
     About / Why MA
     ============================================================ */
  .why-row{
    display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--cream-200);
    border:1px solid var(--cream-200); margin-bottom:64px;
  }
  .why-card{background:var(--cream-50); padding:34px 26px; transition:background .3s var(--ease), transform .3s var(--ease);}
  .why-card:hover{background:var(--white); transform:translateY(-4px);}
  .why-index{font-family:var(--font-mono); font-size:11px; color:var(--bronze-700); letter-spacing:1px;}
  .why-card h3{font-family:var(--font-serif); font-size:19px; margin:16px 0 10px; color:var(--ink-900);}
  .why-card p{font-size:14px; line-height:1.6; color:var(--muted);}
  @media (max-width:980px){.why-row{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.why-row{grid-template-columns:1fr;}}
  
  .mvc-strip{display:grid; grid-template-columns:repeat(3,1fr); gap:40px; padding-top:48px; border-top:1px solid var(--cream-200);}
  .mvc-item h4{font-family:var(--font-mono); font-size:11px; letter-spacing:1.6px; text-transform:uppercase; color:var(--bronze-700); margin-bottom:14px;}
  .mvc-item p{font-size:15px; line-height:1.7; color:var(--ink-700);}
  @media (max-width:780px){.mvc-strip{grid-template-columns:1fr; gap:28px;}}
  
  /* ============================================================
     Eligibility — editorial swipe deck
     ============================================================ */
  .elig-grid{
    display:grid; grid-template-columns:.82fr 1.5fr; gap:0; margin-top:56px;
    border-top:1px solid rgba(255,255,255,.12);
  }
  .elig-list{display:flex; flex-direction:column; padding-right:56px;}
  .elig-tab{
    position:relative; display:flex; align-items:center; gap:18px; width:100%; min-height:86px;
    padding:24px 20px 24px 0; text-align:left; border-bottom:1px solid rgba(255,255,255,.12);
    color:var(--muted-light); transition:color .45s var(--ease), padding .45s var(--ease);
  }
  .elig-tab::before{
    content:''; position:absolute; left:-1px; top:18px; bottom:18px; width:2px; background:var(--gold-400);
    transform:scaleY(0); transform-origin:center; transition:transform .55s var(--ease);
  }
  .elig-tab span:last-child{font-family:var(--font-serif); font-size:19px; line-height:1.25;}
  .elig-num{font-family:var(--font-mono); font-size:11px; color:var(--gold-500); letter-spacing:.6px;}
  .elig-tab:hover{color:var(--white); padding-left:12px;}
  .elig-tab.is-active{color:var(--gold-400); padding-left:12px;}
  .elig-tab.is-active::before{transform:scaleY(1);}
  
  .elig-panel{position:relative; min-height:450px; padding-left:0;}
  .elig-stage{
    position:relative; min-height:450px; overflow:visible; perspective:1200px; touch-action:pan-y;
    overscroll-behavior:contain;
  }
  .elig-stage-glow{
    position:absolute; width:65%; height:65%; right:8%; top:15%; border-radius:50%;
    background:radial-gradient(circle, rgba(201,162,39,.13), rgba(15,29,56,0) 68%);
    filter:blur(10px); pointer-events:none; z-index:0;
  }
  .elig-cards{position:relative; width:100%; min-height:450px;}
  .elig-panel-item{
    position:absolute; inset:0; z-index:1; overflow:hidden; padding:42px 48px 38px 48px;
    display:flex; flex-direction:column; justify-content:space-between; gap:18px;
    border:1px solid rgba(201,162,39,.25); border-radius:1px;
    background:
      radial-gradient(circle at 85% 20%, rgba(201,162,39,.08), transparent 30%),
      linear-gradient(135deg,var(--navy-800) 0%,var(--navy-900) 62%,#07101f 100%);
    box-shadow:0 26px 80px rgba(0,0,0,.24), inset 0 0 0 1px rgba(255,255,255,.025);
    will-change:transform,opacity; transform-origin:50% 80%;
    user-select:none; -webkit-user-select:none; cursor:grab;
    transition:box-shadow .55s var(--ease), border-color .55s var(--ease);
  }
  .elig-panel-item:active{cursor:grabbing;}
  .elig-panel-item.is-active{box-shadow:0 32px 96px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.04); border-color:rgba(201,162,39,.32);}
  .elig-panel-item::before{
    content:''; position:absolute; inset:12px; border:1px solid rgba(255,255,255,.035); pointer-events:none;
  }
  .elig-panel-item::after{
    content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
    background:linear-gradient(90deg,transparent,rgba(201,162,39,.6),transparent); opacity:.5;
  }
  .elig-panel-item > *{position:relative; z-index:2;}
  .elig-card-number{font-family:var(--font-mono); font-size:11px; letter-spacing:1.5px; color:var(--gold-400);}
  .elig-card-number i{font-style:normal; color:rgba(185,194,214,.7);}
  .elig-tag{font-family:var(--font-mono); font-size:10px; letter-spacing:1.8px; text-transform:uppercase; color:var(--gold-400);}
  .elig-card-copy{max-width:560px; margin:auto 0;}
  .elig-panel-item h3{font-family:var(--font-serif); font-size:clamp(2rem,3.2vw,3.05rem); line-height:1.05; color:var(--white); font-weight:500; max-width:620px; letter-spacing:-.02em;}
  .elig-panel-item p{font-size:15px; line-height:1.75; color:var(--muted-light); max-width:520px; margin-top:22px;}
  .elig-foot{font-family:var(--font-mono); font-size:9px; letter-spacing:1.45px; text-transform:uppercase; color:var(--muted-light); padding-top:13px; border-top:1px solid rgba(255,255,255,.12); max-width:520px;}
  .elig-card-orbit{
    position:absolute; width:330px; height:330px; right:-80px; top:28px; border:1px solid rgba(201,162,39,.18);
    border-radius:50%; transform:rotate(-18deg); opacity:.65; pointer-events:none; z-index:1;
  }
  .elig-card-orbit::before,.elig-card-orbit::after{content:''; position:absolute; inset:28px; border:1px solid rgba(201,162,39,.10); border-radius:50%;}
  .elig-card-orbit::after{inset:90px; border-color:rgba(201,162,39,.13);}
  .elig-arrow{
    position:absolute; z-index:20; bottom:26px; width:48px; height:48px; border:1px solid rgba(255,255,255,.18);
    border-radius:50%; display:grid; place-items:center; color:var(--muted-light); background:rgba(6,11,22,.55);
    backdrop-filter:blur(8px); transition:transform .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), background .35s var(--ease);
  }
  .elig-arrow:hover{transform:translateY(-3px); color:var(--gold-400); border-color:rgba(201,162,39,.6); background:rgba(15,29,56,.82);}
  .elig-arrow span{font-size:19px; line-height:1;}
  .elig-prev{right:86px;}.elig-next{right:28px; border-color:rgba(201,162,39,.55); color:var(--gold-400);}
  .elig-mobile-meta{position:absolute; left:0; right:0; bottom:-58px; display:flex; align-items:center; justify-content:space-between; gap:20px; z-index:30;}
  .elig-swipe-label{font-family:var(--font-mono); font-size:9px; letter-spacing:1.7px; text-transform:uppercase; color:rgba(185,194,214,.72);}
  .elig-dots{display:flex; align-items:center; gap:8px;}
  .elig-dot{width:7px; height:7px; padding:0; border-radius:50%; background:rgba(185,194,214,.3); transition:transform .4s var(--ease), background .4s var(--ease);}
  .elig-dot.is-active{background:var(--gold-400); transform:scale(1.35);}
  .elig-swipe-count{font-family:var(--font-mono); font-size:10px; color:rgba(185,194,214,.65); letter-spacing:1px;}
  .elig-swipe-count strong{color:var(--gold-400); font-weight:500;}
  
  @media (max-width:980px){
    .elig-grid{grid-template-columns:1fr;}
    .elig-list{display:none;}
    .elig-panel{min-height:500px; margin-top:30px;}
    .elig-stage,.elig-cards{min-height:500px;}
    .elig-arrow{display:none;}
    .elig-mobile-meta{bottom:-38px;}
  }
  @media (max-width:640px){
    .elig-grid{margin-top:40px;}
    .elig-panel{min-height:470px; margin-top:18px;}
    .elig-stage,.elig-cards{min-height:470px;}
    .elig-panel-item{padding:28px 24px 28px; border-radius:2px;}
    .elig-panel-item h3{font-size:clamp(1.85rem,9vw,2.55rem); max-width:92%;}
    .elig-panel-item p{font-size:13.5px; line-height:1.7; margin-top:18px; max-width:92%;}
    .elig-card-orbit{width:240px; height:240px; right:-100px; top:30px;}
    .elig-foot{font-size:8px; letter-spacing:1.2px; max-width:92%;}
    .elig-mobile-meta{bottom:-46px; gap:12px;}
    .elig-swipe-label{display:none;}
    .elig-dots{margin-right:auto;}
  }
  @media (max-width:390px){
    .elig-panel,.elig-stage,.elig-cards{min-height:440px;}
    .elig-panel-item{padding:24px 20px;}
    .elig-panel-item h3{font-size:1.8rem;}
    .elig-panel-item p{font-size:13px;}
  }
  
  /* ============================================================
     Process
     ============================================================ */
  /* pinned during scroll on desktop — must always fully cover the viewport so
     the section behind it can never peek through the bottom edge on tall screens.
     Below 780px the section is never pinned (see main.js), so it should just
     size to its natural content instead of reserving a full viewport height. */
  .process{min-height:100vh; display:flex; flex-direction:column; justify-content:center;}
  @media (max-width:779px){
    .process{min-height:0; display:block;}
  }
  .process-pin{margin-top:60px;}
  .process-track{position:relative; display:flex; justify-content:space-between; align-items:center; margin-bottom:64px; padding:0 6px;}
  .process-track::before{
    content:''; position:absolute; top:50%; left:0; right:0; height:1px; background:var(--cream-200); transform:translateY(-50%); z-index:0;
  }
  .process-track-fill{position:absolute; top:50%; left:0; height:1px; width:0%; background:var(--gold-500); transform:translateY(-50%); z-index:1; transition:width .1s linear;}
  .process-node{
    position:relative; z-index:2; width:48px; height:48px; border-radius:50%; background:var(--cream-50); border:1px solid var(--cream-200);
    display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:12px; color:var(--muted);
    transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
  }
  .process-node.is-active{background:var(--gold-500); border-color:var(--gold-500); color:var(--navy-950); transform:scale(1.12);}
  .process-node.is-done{background:var(--navy-900); border-color:var(--navy-900); color:var(--gold-400);}
  @media (max-width:640px){.process-node{width:36px; height:36px; font-size:10px;}}
  
  /* ============================================================
     REPLACE the existing block:
  
     .process-panels{position:relative; min-height:200px; border-top:1px solid var(--cream-200); padding-top:44px;}
     .process-panel{position:absolute; inset:0; padding-top:44px; opacity:0; visibility:hidden; transform:translateY(14px); transition:opacity .4s var(--ease), transform .4s var(--ease);}
     .process-panel.is-active{opacity:1; visibility:visible; transform:translateY(0); position:relative;}
  
     WITH the block below.
     ============================================================ */
  
     .process-panels{
      position:relative; min-height:380px; border-top:1px solid var(--cream-200);
      padding-top:44px; perspective:1200px;
    }
    
    /* Fallback (no GSAP / reduced-motion): plain discrete swap, same as before */
    .process-panel{
      position:absolute; inset:0; padding-top:44px; opacity:0; visibility:hidden;
      transform:translateY(14px); transition:opacity .4s var(--ease), transform .4s var(--ease);
    }
    .process-panel.is-active{opacity:1; visibility:visible; transform:translateY(0); position:relative;}
    
    /* Enhanced (GSAP driving continuous scroll interpolation): all cards stay
       absolutely positioned and stacked; JS sets scale/y/opacity/rotate per frame. */
    .process-panels.is-stacked{min-height:420px;}
    .process-panels.is-stacked .process-panel{
      position:absolute; inset:auto; top:44px; left:50%; translate:-50% 0;
      width:min(620px, 92%); padding:40px 44px; margin:0;
      background:var(--white); border:1px solid var(--cream-200); border-radius:4px;
      box-shadow:0 30px 60px -30px rgba(20,29,49,.18);
      transform-origin:center top; will-change:transform, opacity;
      transition:box-shadow .3s var(--ease), border-color .3s var(--ease);
      visibility:visible; /* opacity controlled by GSAP inline style instead */
    }
    .process-panels.is-stacked .process-panel.is-active{
      position:absolute; /* override fallback rule that makes it position:relative */
      border-color:rgba(201,162,39,.35);
      box-shadow:0 34px 70px -25px rgba(201,162,39,.28);
    }
    
    @media (max-width:640px){
      .process-panels.is-stacked .process-panel{padding:30px 26px; width:94%;}
    }
    /* Mobile never gets .is-stacked (see main.js) — the fallback panel here is
       laid out in normal flow, so this floor only needs to cover the tallest
       panel's own content instead of the taller desktop deck's min-height. */
    @media (max-width:779px){
      .process-panels{min-height:280px;}
    }
  .process-of{font-family:var(--font-mono); font-size:11px; letter-spacing:1.6px; color:var(--bronze-700); text-transform:uppercase;}
  .process-panel h3{font-family:var(--font-serif); font-size:clamp(1.6rem,3vw,2.3rem); margin:14px 0 16px; color:var(--ink-900);}
  .process-panel p{font-size:16px; line-height:1.75; color:var(--muted); max-width:640px;}
  
  .process-cta{
    margin-top:80px; padding-top:44px; border-top:1px solid var(--cream-200);
    display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  }
  .process-cta p{font-family:var(--font-serif); font-size:22px; color:var(--ink-900);}
  
  /* ============================================================
     Services accordion
     ============================================================ */
  .accordion{border-top:1px solid var(--cream-200);}
  .acc-item{border-bottom:1px solid var(--cream-200);}
  .acc-head{
    width:100%; display:flex; align-items:center; gap:22px; padding:28px 4px; text-align:left;
    font-family:var(--font-serif); font-size:clamp(1.1rem,2vw,1.5rem); color:var(--ink-900);
  }
  .acc-icon{
    flex:none; width:30px; height:30px; border-radius:50%; border:1px solid var(--cream-200); display:flex; align-items:center; justify-content:center;
    font-family:var(--font-sans); font-size:16px; color:var(--bronze-700); transition:transform .35s var(--ease), background .3s var(--ease), color .3s var(--ease);
  }
  .acc-item.is-active .acc-icon{transform:rotate(135deg); background:var(--gold-500); color:var(--navy-950); border-color:var(--gold-500);}
  .acc-item.is-active .acc-head{color:var(--bronze-700);}
  .acc-body{height:0; overflow:hidden;}
  .acc-body-in{padding:0 4px 30px 52px;}
  .acc-body-in p{font-size:15.5px; line-height:1.75; color:var(--muted); max-width:640px;}
  
  /* ============================================================
     Why UAE
     ============================================================ */
  .uae-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.08); margin-top:56px;}
  .uae-card{background:var(--navy-950); padding:38px 30px; transition:background .35s var(--ease);}
  .uae-card:hover{background:var(--navy-900);}
  .uae-ico{display:block; width:42px; height:42px; margin-bottom:22px; border:1px solid var(--gold-500); border-radius:50%; position:relative;}
  .uae-ico::before{content:''; position:absolute; inset:11px; border:1px solid var(--gold-500); border-radius:50%; opacity:.5;}
  .uae-card h3{font-family:var(--font-serif); font-size:19px; color:var(--white); margin-bottom:12px;}
  .uae-card p{font-size:14.5px; line-height:1.7; color:var(--muted-light);}
  @media (max-width:900px){.uae-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.uae-grid{grid-template-columns:1fr;}}
  
  /* ============================================================
     Contact
     ============================================================ */
  .contact-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:60px;}
  .contact-copy p{font-size:16px; line-height:1.75; color:var(--muted); margin:22px 0 34px; max-width:420px;}
  .contact-details{display:flex; flex-direction:column; gap:12px; padding-top:24px; border-top:1px solid var(--cream-200); font-family:var(--font-mono); font-size:13px;}
  .contact-details a:hover{color:var(--bronze-700);}
  
  .contact-form{background:var(--white); border:1px solid var(--cream-200); padding:44px; position:relative;}
  .form-top{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:30px; gap:12px; flex-wrap:wrap;}
  .form-top h3{font-family:var(--font-serif); font-size:22px; color:var(--ink-900);}
  .hp-field{position:absolute; left:-9999px; width:1px; height:1px; opacity:0;}
  
  .form-row{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
  .field{margin-bottom:24px;}
  .field label{display:block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); margin-bottom:10px;}
  .field input,.field select,.field textarea{
    width:100%; border:none; border-bottom:1px solid var(--cream-200); background:transparent; padding:8px 2px 12px;
    font-size:15px; color:var(--ink-900); transition:border-color .3s var(--ease);
  }
  .field textarea{resize:vertical; font-family:var(--font-sans);}
  .field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--bronze-700);}
  .field.has-error input,.field.has-error select{border-color:#c0392b;}
  .field-err{display:none; font-size:12px; color:#c0392b; margin-top:6px;}
  .field.has-error .field-err{display:block;}
  
  .form-note{font-size:12.5px; color:var(--muted); line-height:1.6; margin-bottom:24px;}
  
  .btn-spinner{width:14px; height:14px; border:2px solid rgba(6,11,22,.25); border-top-color:var(--navy-950); border-radius:50%; display:none; animation:spin .7s linear infinite;}
  #submitBtn.is-loading .btn-label,#submitBtn.is-loading .arrow{display:none;}
  #submitBtn.is-loading .btn-spinner{display:inline-block;}
  
  .form-status{margin-top:16px; font-size:14px; font-family:var(--font-mono); display:none;}
  .form-status.is-success{display:block; color:#1c7a3f;}
  .form-status.is-error{display:block; color:#c0392b;}
  
  @media (max-width:900px){.contact-grid{grid-template-columns:1fr;}}
  @media (max-width:560px){.form-row{grid-template-columns:1fr;} .contact-form{padding:28px 22px;}}
  
  /* ============================================================
     Footer
     ============================================================ */
  .footer{background:var(--navy-950); padding:64px 0 28px; color:var(--muted-light);}
  .footer-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:44px; flex-wrap:wrap; gap:20px;}
  .footer img{width:52px; height:52px; border-radius:50%;}
  .footer-links{display:flex; gap:30px; flex-wrap:wrap;}
  .footer-links a{font-family:var(--font-mono); font-size:11px; letter-spacing:1.2px; text-transform:uppercase; transition:color .3s;}
  .footer-links a:hover{color:var(--gold-400);}
  .footer-tag{font-family:var(--font-serif); font-size:17px; color:var(--white); max-width:520px; margin-bottom:26px;}
  .footer-disclaimer{font-size:12px; line-height:1.7; color:var(--muted); max-width:900px; padding-top:22px; border-top:1px solid rgba(255,255,255,.08);}
  .footer-bottom{display:flex; justify-content:space-between; margin-top:36px; padding-top:22px; border-top:1px solid rgba(255,255,255,.08); font-family:var(--font-mono); font-size:10.5px; letter-spacing:1px; text-transform:uppercase; flex-wrap:wrap; gap:10px;}
  
  /* ============================================================
     Reveal-on-scroll base state (JS adds .is-visible)
     ============================================================ */
  .reveal-up{opacity:0; transform:translateY(18px);}
  .reveal-up.is-visible{opacity:1; transform:translateY(0); transition:opacity .6s var(--ease), transform .6s var(--ease);}
  
  /* ============================================================
     A11y / interaction polish (visual output unchanged)
     ============================================================ */
  
  /* Skip link — visually hidden until focused */
  .skip-link{
    position:absolute; top:-100px; left:16px; z-index:10001;
    padding:10px 16px; background:var(--navy-950); color:var(--white);
    font-family:var(--font-mono); font-size:12px; letter-spacing:1.2px; text-transform:uppercase;
    border:1px solid var(--gold-500); border-radius:2px;
  }
  .skip-link:focus{top:16px;}
  
  /* Replace removed outline on form fields with a visible focus ring */
  .field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
    outline:2px solid var(--gold-500); outline-offset:2px; border-color:var(--bronze-700);
  }
  
  /* Universal :focus-visible ring on every interactive element */
  a:focus-visible,button:focus-visible,.process-node:focus-visible,.elig-tab:focus-visible,.acc-head:focus-visible,.whatsapp-float:focus-visible,.nav-toggle:focus-visible{
    outline:2px solid var(--gold-500); outline-offset:3px; border-radius:2px;
  }
  
  /* Hide main from tab order when focused via skip-link (it has tabindex=-1) */
  main:focus{outline:none;}
  
  /* Safe-area insets for notched phones */
  .nav{top:env(safe-area-inset-top, 0); padding-top:env(safe-area-inset-top, 0);}
  .whatsapp-float{
    bottom:calc(24px + env(safe-area-inset-bottom, 0));
    right:calc(24px + env(safe-area-inset-right, 0));
  }
  
  /* Disable 300ms double-tap zoom on touch devices */
  a,button,.btn,.nav-links a,.elig-tab,.acc-head,.process-node,.whatsapp-float,.nav-toggle{
    touch-action:manipulation;
  }
  
  /* Intentional tap highlight (gold tint matches the brand) */
  a,button{-webkit-tap-highlight-color:rgba(201,162,39,.18);}
  
  /* Native select: explicit colors so Windows dark mode doesn't invert, but keep
     the native dropdown arrow (don't override appearance) so visuals match prior. */
  .field select{background-color:var(--white); color:var(--ink-900);}
  
  /* Accent class — same visual treatment as old <em> in section titles */
  .accent{font-style:italic; color:var(--bronze-700); font-family:inherit; font-weight:inherit;}
  .hero-title .accent,.section-title.light .accent,.section-lede .accent,.brand-text .accent{color:var(--gold-400);}
  .section-title .accent{font-style:italic; font-weight:400;}
  .hero-title .accent{font-style:italic; font-weight:400;}
  
  /* Respect [hidden] even on elements styled display:flex (tab panels) */
  [hidden]{display:none !important;}

  /* ============================================================
     Trusted-by-authorities logo marquee
     ------------------------------------------------------------
     Self-contained addition — every selector is namespaced under
     .gov-trust / .gov-marquee so it can't collide with any other
     component's rules.
     ============================================================ */
  .gov-trust{
    position:relative;
    background:var(--navy-950);
    padding:clamp(48px, 7vw, 76px) 0 clamp(52px, 7vw, 80px);
    overflow:hidden;
  }
  .gov-trust::before{
    content:'';
    position:absolute;
    top:0; left:50%;
    width:min(640px, 70%);
    height:1px;
    transform:translateX(-50%);
    background:linear-gradient(90deg, transparent, rgba(201,162,39,.4), transparent);
  }
  .gov-trust-inner{max-width:var(--container); margin:0 auto; padding:0 24px;}

  .gov-trust-heading{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    margin:0 0 clamp(30px, 5vw, 48px);
    font-family:var(--font-serif);
    font-style:italic;
    font-weight:500;
    font-size:clamp(1.05rem, 2vw, 1.4rem);
    color:var(--gold-400);
    text-align:center;
  }
  .gov-trust-line{
    flex:1 1 auto;
    max-width:180px;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(201,162,39,.5));
  }
  .gov-trust-heading .gov-trust-line:last-of-type{
    background:linear-gradient(90deg, rgba(201,162,39,.5), transparent);
  }
  .gov-trust-dot{
    width:5px; height:5px; flex-shrink:0;
    border-radius:50%;
    background:var(--gold-400);
    box-shadow:0 0 10px 2px rgba(201,162,39,.45);
  }

  .gov-marquee{
    --logo-marquee-speed:34s;
    position:relative;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  }
  .gov-marquee-track{
    display:flex;
    align-items:center;
    width:max-content;
    gap:clamp(30px, 6vw, 96px);
    animation:gov-marquee-scroll var(--logo-marquee-speed) linear infinite;
  }
  .gov-marquee:hover .gov-marquee-track{animation-play-state:paused;}

  .gov-marquee-item{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    height:clamp(36px, 4.7vw, 55px);
  }
  .gov-marquee-item img{
    height:100%;
    width:auto;
    max-width:190px;
    object-fit:contain;
    filter:brightness(0) invert(1);
    opacity:.56;
    transition:opacity .5s var(--ease);
  }
  .gov-marquee:hover .gov-marquee-item img{opacity:.85;}

  /* Scale up compact emblem logos to match wide logos visually */
  .gov-marquee-item:nth-child(2) img,
  .gov-marquee-item:nth-child(3) img,
  .gov-marquee-item:nth-child(10) img,
  .gov-marquee-item:nth-child(11) img {
    transform: scale(1.3);
  }

  @keyframes gov-marquee-scroll{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
  }

  /* Reduced motion: static, non-duplicated, wrapped layout — JS renders
     only one logo set in this mode (see main.js). */
  @media (prefers-reduced-motion: reduce){
    .gov-marquee{-webkit-mask-image:none; mask-image:none;}
    .gov-marquee-track{
      animation:none;
      width:100%;
      flex-wrap:wrap;
      justify-content:center;
      row-gap:24px;
    }
  }

  @media (max-width:600px){
    .gov-trust-line{max-width:64px;}
    .gov-trust-heading{gap:12px;}
  }