/* Self-hosted fonts - replaces the render-blocking Google Fonts request */
@font-face{font-family:"Manrope";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/manrope-latin-500.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/manrope-latin-600.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Manrope";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/manrope-latin-700.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Manrope";font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/manrope-latin-800.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/dmsans-latin-400.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/dmsans-latin-500.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/dmsans-latin-600.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/dmsans-latin-700.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}


/* ============================================================
   AL HUDHUD DCS — Homepage
   Palette: ink green / brand green / sand / gold / white
   Type: Fraunces (display) + Plus Jakarta Sans (body)
   ============================================================ */
:root{
  --ink:#0A2E22;       /* deep green, headings & dark sections */
  --green:#0F7A48;     /* brand green */
  --green-2:#159A5E;   /* lighter brand green for hover */
  --gold:#E8A33C;      /* brand orange/gold accent */
  --gold-2:#F4C27A;
  --sand:#F4EFE6;      /* warm light section background */
  --white:#FFFFFF;
  --text:#1D3B31;
  --muted:#43574C;
  --line:#DCE3DE;
  --ease:cubic-bezier(.22,.8,.22,1);
  --r-lg:22px;--r-md:14px;--r-sm:9px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:"DM Sans",system-ui,sans-serif;color:var(--text);background:var(--white);overflow-x:hidden;line-height:1.55}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,.h1-alt{font-family:"Manrope",system-ui,sans-serif;font-weight:800;letter-spacing:-.03em;margin:0}
h2{font-size:clamp(32px,3.8vw,48px);line-height:1.08}
h3{font-size:22px;line-height:1.2}
p{margin:0}
.wrap{width:min(1240px,92%);margin-inline:auto}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 22px;border-radius:999px;font-weight:600;font-size:14.5px;border:1.5px solid transparent;cursor:pointer;transition:transform .35s var(--ease),background .3s,box-shadow .3s,color .3s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:18px;height:18px;transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-gold{background:var(--gold);color:#1B1300;box-shadow:0 14px 34px rgba(232,163,60,.28)}
.btn-gold:hover{background:var(--gold-2)}
.btn-green{background:var(--green);color:#fff;box-shadow:0 14px 34px rgba(15,122,72,.25)}
.btn-green:hover{background:var(--green-2)}
.btn-ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.35);backdrop-filter:blur(10px)}
.btn-ghost:hover{background:rgba(255,255,255,.16)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-line:hover{background:var(--ink);color:#fff}

/* ---------- Top bar & Nav ---------- */
.topbar{background:var(--ink);color:#A9C4B8;font-size:12.5px;height:38px}
.topbar .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px}
.topbar b{color:#fff;font-weight:600}
.topbar .right{display:flex;gap:24px}
.topbar a:hover{color:#fff}
.nav{position:absolute;top:54px;left:0;right:0;z-index:60;transition:top .4s}
.pill{display:flex;align-items:center;justify-content:space-between;gap:24px;height:68px;padding:0 8px 0 10px;border-radius:999px;background:rgba(10,46,34,.55);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(18px);box-shadow:0 12px 40px rgba(0,0,0,.25);transition:background .4s,border-color .4s,box-shadow .4s}
.brand{display:flex;align-items:center;gap:12px;color:#fff;font-family:"Manrope",sans-serif;font-weight:800;font-size:21px;letter-spacing:-.03em;transition:color .4s}
.brand .logo{width:54px;height:54px;border-radius:50%;flex:none;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.25))}
footer .brand .logo{width:56px;height:56px}
.brand small{display:block;font-family:"DM Sans",sans-serif;font-size:9.5px;font-weight:600;color:#C8D9D0;letter-spacing:.14em;margin-top:2px}
.links{display:flex;align-items:center;gap:32px}
.links>a,.has-menu>a{font-weight:600;font-size:14.5px;color:#fff;position:relative;padding:8px 0}
.links>a:after,.has-menu>a:after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.links>a:hover:after,.has-menu>a:hover:after{transform:scaleX(1)}
.nav .nav-cta{height:52px;padding:0 24px;font-size:14px;box-shadow:none}
.nav.sticky{position:fixed;top:14px}
.nav.sticky .pill{background:rgba(255,255,255,.94);border-color:rgba(10,46,34,.08);box-shadow:0 10px 30px rgba(10,46,34,.12)}
.nav.sticky .brand,.nav.sticky .links>a,.nav.sticky .has-menu>a{color:var(--ink)}
.nav.sticky .brand small{color:var(--muted)}
.nav.sticky .burger span{background:var(--ink)}
.has-menu{position:relative}
.mega{position:absolute;top:calc(100% + 18px);left:0;transform:translate(0,10px);width:640px;padding:18px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 30px 80px rgba(10,46,34,.18);display:grid;grid-template-columns:1fr 1fr;gap:6px;opacity:0;visibility:hidden;transition:.3s var(--ease);color:var(--text)}
.has-menu:hover .mega,.has-menu:focus-within .mega{opacity:1;visibility:visible;transform:translate(0,0)}
.mega a{display:flex;gap:14px;padding:13px;border-radius:12px;transition:background .25s}
.mega a:hover{background:#F0F6F2}
.mega .ic{width:38px;height:38px;border-radius:10px;background:#E9F3ED;color:var(--green);display:grid;place-items:center;flex:none}
.mega .ic svg{width:20px;height:20px}
.mega b{display:block;font-size:14px;color:var(--ink)}
.mega span{font-size:12.5px;color:var(--muted)}
.burger{display:none;width:52px;height:52px;border-radius:50%;border:0;background:transparent;cursor:pointer;flex-direction:column;justify-content:center;gap:6px;align-items:center}
.burger span{width:24px;height:2px;background:#fff;transition:.3s}
.drawer{position:fixed;inset:0;z-index:80;background:var(--ink);color:#fff;padding:100px 8% 40px;display:flex;flex-direction:column;gap:22px;transform:translateX(100%);transition:transform .5s var(--ease)}
.drawer.open{transform:none}
.drawer a{font-family:"Manrope",sans-serif;font-size:30px}
.drawer .close{position:absolute;top:22px;right:6%;background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;width:46px;height:46px;border-radius:50%;font-size:20px;cursor:pointer}

/* ---------- HERO ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:760px;max-height:960px;background:var(--ink);color:#fff;overflow:hidden}
.scene{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1.1s ease,visibility 0s 1.1s}
.scene.on{opacity:1;visibility:visible;transition:opacity 1.1s ease}

/* Scene 1 — Split: Dubai | Destination, with the flight */
.split{position:absolute;inset:0}
.pane{position:absolute;top:0;bottom:0;overflow:hidden}
.pane .ph{position:absolute;inset:-4%;background-size:cover;background-position:center;transform:scale(1);transition:opacity 1s ease}
.pane-uae{left:0;width:56%;clip-path:polygon(0 0,100% 0,84% 100%,0 100%)}
.pane-dest{right:0;width:52%;clip-path:polygon(17% 0,100% 0,100% 100%,0 100%)}
.pane-dest .ph{opacity:0}
.pane-dest .ph.on{opacity:1}
.scene.on .pane .ph{animation:kb 22s linear infinite alternate}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.09)}}
.split .seam{position:absolute;top:-10%;bottom:-10%;left:0;right:0;pointer-events:none;background:linear-gradient(100deg,transparent 47.5%,rgba(232,163,60,.6) 48.3%,rgba(232,163,60,.6) 48.5%,transparent 49.3%)}
.split .tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,30,22,.6),rgba(6,30,22,.3) 35%,rgba(6,30,22,.96) 100%),linear-gradient(90deg,rgba(6,30,22,.8) 0%,rgba(6,30,22,.55) 40%,rgba(6,30,22,.15) 70%)}
.scene1 .pane .ph{filter:brightness(.72) saturate(.9)}
.scene1 .copy h1,.scene1 .copy .h1-alt,.scene1 .hero-sub{text-shadow:0 2px 24px rgba(0,0,0,.55)}
.flight{position:absolute;inset:0;pointer-events:none}
.flight svg{width:100%;height:100%}
.route{fill:none;stroke:rgba(255,255,255,.55);stroke-width:2;stroke-dasharray:6 9;stroke-linecap:round}
.route-draw{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;pathLength:1}
.city{fill:var(--gold);}
.city-ring{fill:none;stroke:var(--gold);stroke-width:1.5;opacity:.7}
.plane{filter:drop-shadow(0 10px 14px rgba(0,0,0,.5))}
.scene1.on .route-draw{animation:draw 6.2s var(--ease) infinite}
.scene1.on .city-ring{animation:ring 2.2s ease-out infinite}
@keyframes draw{0%{stroke-dashoffset:1}80%{stroke-dashoffset:0}92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes ring{0%{transform:scale(.6);opacity:.9;transform-box:fill-box;transform-origin:center}100%{transform:scale(2.2);opacity:0;transform-box:fill-box;transform-origin:center}}
.hero .copy{position:absolute;left:0;right:0;bottom:150px;z-index:5}
.hero .copy .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:end}
.hero-kicker{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:#fff;background:rgba(10,46,34,.55);border:1px solid rgba(255,255,255,.22);padding:9px 14px 9px 10px;border-radius:999px;backdrop-filter:blur(12px)}
.hero-kicker .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(232,163,60,.25)}
h1,.h1-alt{font-size:clamp(44px,5.8vw,78px);line-height:1;letter-spacing:-.035em;margin:20px 0 16px;max-width:12ch}
h1 em,.h1-alt em{font-style:normal;color:var(--gold-2)}
.hero-sub{font-size:17.5px;line-height:1.65;color:#EEF4F0;max-width:52ch;font-weight:500}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.dest-word{display:inline-block;position:relative;white-space:nowrap}
.dest-word span{position:absolute;left:0;top:0;opacity:0;transform:translateY(60%);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.dest-word span.on{position:relative;opacity:1;transform:none}
.dest-chip{position:absolute;right:6%;top:23%;z-index:5;background:rgba(10,46,34,.62);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.22);border-radius:16px;padding:14px 18px;display:flex;align-items:center;gap:14px;opacity:0;transform:translateY(14px);transition:.7s var(--ease)}
.dest-chip.on{opacity:1;transform:none}
.dest-chip .flag{font-size:28px;line-height:1}
.dest-chip b{display:block;font-size:15px;font-weight:700}
.dest-chip span{font-size:12.5px;color:#C9D9D1}
.dest-tags{display:flex;gap:8px;flex-wrap:wrap;justify-self:end;align-self:end;max-width:460px;justify-content:flex-end}
.dest-tags span{font-size:12.5px;font-weight:600;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);backdrop-filter:blur(10px);padding:8px 13px;border-radius:999px;color:#EAF2ED}
.dest-tags span.hot{background:var(--gold);color:#1B1300;border-color:var(--gold)}

/* Scene 2 — Portugal residency with rotating cards */
.scene3 .bg{position:absolute;inset:-4%;background-position:center;background-size:cover}
.scene3.on .bg{animation:kb 26s linear infinite alternate}
.scene2 .bg{position:absolute;inset:-4%;background-position:center;background-size:cover}
.scene2.on .bg{animation:kb 26s linear infinite alternate}
.scene2 .tint,.scene3 .tint{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,30,22,.94) 0%,rgba(6,30,22,.78) 45%,rgba(6,30,22,.35) 100%),linear-gradient(0deg,rgba(6,30,22,.9),transparent 45%)}
.scene2 .copy .wrap,.scene3 .copy .wrap{grid-template-columns:1fr 1fr;align-items:center}
.stack{position:relative;height:380px;justify-self:end;width:min(100%,470px)}
.card{position:absolute;inset:0;background:#fff;color:var(--ink);border-radius:var(--r-lg);padding:32px 34px;display:flex;flex-direction:column;box-shadow:0 40px 90px rgba(0,0,0,.4);transition:transform .9s var(--ease),opacity .9s var(--ease);opacity:0;transform:translateY(70px) scale(.9)}
.card.on{opacity:1;transform:none;z-index:3}
.card.next{opacity:.85;transform:translate(22px,-22px) scale(.95);z-index:2}
.card.next2{opacity:.6;transform:translate(44px,-44px) scale(.9);z-index:1}
.card.out{opacity:0;transform:translate(-40px,60px) scale(.9);z-index:0}
.card>*{transition:opacity .5s}.card.next>*,.card.next2>*,.card.out>*{opacity:0}
.card .head{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.card .ico{width:52px;height:52px;border-radius:14px;background:var(--ink);color:var(--gold);display:grid;place-items:center;flex:none}
.card .ico svg{width:26px;height:26px}
.card h3{font-size:27px}
.card .n{margin-left:auto;font-size:13px;color:var(--muted);font-weight:600}
.card .d{font-size:14.5px;color:var(--muted);margin:-8px 0 18px;line-height:1.55}
.card ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15.5px;font-weight:500}
.card li{display:flex;align-items:center;gap:12px}
.card li:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);flex:none}
.card .foot{margin-top:auto;padding-top:18px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:13.5px;color:var(--muted)}
.card .foot a{color:var(--green);font-weight:700}
.scene2 h1,.scene2 .h1-alt{max-width:15ch}.scene3 h1,.scene3 .h1-alt{max-width:17ch}

/* Hero control rail */
.rail{position:absolute;left:0;right:0;bottom:0;z-index:6;background:linear-gradient(0deg,rgba(6,30,22,.85),transparent);padding:26px 0 56px}
.rail .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px}
.tabs{display:flex;gap:10px}
.tab{background:transparent;border:0;cursor:pointer;padding:10px 0;width:56px}
.tab b{display:block;font-size:13.5px;color:#fff;font-weight:600;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.tab b i{font-style:normal;font-size:11px;color:#8FA99C;font-weight:600;opacity:0;transition:.3s}
.tab.on b i{opacity:1}
.tab .bar{display:block;height:4px;background:rgba(255,255,255,.25);border-radius:4px;overflow:hidden}
.tab .bar i{display:block;height:100%;width:0;background:var(--gold);transition:none}
.tab.on .bar i{transition:width linear}
.tab.done .bar i{width:100%;background:rgba(255,255,255,.55)}
.scroll-hint{display:flex;align-items:center;gap:12px;font-size:12.5px;color:#B9CDC3;font-weight:600}
.scroll-hint span{width:28px;height:44px;border:1.5px solid rgba(255,255,255,.4);border-radius:14px;position:relative}
.scroll-hint span:after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--gold);animation:wheel 1.8s ease-in-out infinite}
@keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(16px);opacity:0}100%{opacity:0}}

/* ---------- Marquee ---------- */
.ticker{background:var(--gold);color:var(--ink);overflow:hidden;padding:16px 0;position:relative;z-index:6}
.ticker .track{display:flex;gap:56px;width:max-content;animation:tick 40s linear infinite;font-weight:600;font-size:14px;letter-spacing:.01em}
.ticker .track span{display:flex;align-items:center;gap:12px;white-space:nowrap}
.ticker .track span:after{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink);margin-left:44px;opacity:.6}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- Sections ---------- */
section{padding:110px 0}
.head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:56px}
.head p{font-size:17px;color:var(--muted);max-width:44ch;line-height:1.6}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;font-weight:700;color:var(--green);margin-bottom:16px}
.kicker:before{content:"";width:26px;height:2px;background:var(--gold);border-radius:2px}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* Two directions */
.two{padding-top:110px;background:var(--sand)}
.dir-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.dir{position:relative;min-height:520px;border-radius:28px;overflow:hidden;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:38px;isolation:isolate}
.dir .bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 1.4s var(--ease);z-index:-2}
.dir:hover .bg{transform:scale(1.06)}
.dir:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(6,30,22,.96) 0%,rgba(6,30,22,.55) 45%,rgba(6,30,22,.1) 100%)}
.dir h3{font-size:38px;margin:14px 0 10px}
.dir p{color:#D3E1DA;max-width:46ch;font-size:16px}
.dir .tag{display:inline-flex;align-self:flex-start;background:var(--gold);color:#1B1300;font-size:12.5px;font-weight:700;padding:7px 12px;border-radius:999px}
.dir .list{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 26px}
.dir .list span{font-size:13px;font-weight:600;border:1px solid rgba(255,255,255,.3);padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.08)}
.dir .btn{align-self:flex-start}

/* Destinations */
.dest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.dcard{position:relative;height:300px;border-radius:var(--r-lg);overflow:hidden;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:26px;isolation:isolate}
.dcard .bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:-2;transition:transform 1.2s var(--ease)}
.dcard:hover .bg{transform:scale(1.07)}
.dcard:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(6,30,22,.95),rgba(6,30,22,.2) 60%,transparent)}
.dcard .flag{font-size:30px;position:absolute;top:22px;left:22px;background:rgba(255,255,255,.14);backdrop-filter:blur(10px);width:52px;height:52px;border-radius:14px;display:grid;place-items:center;line-height:1}
.dcard h3{font-size:26px}
.dcard p{font-size:14px;color:#C9D9D1;margin-top:6px}
.dcard .go{position:absolute;top:22px;right:22px;width:42px;height:42px;border-radius:50%;background:var(--gold);color:#1B1300;display:grid;place-items:center;transform:translate(6px,-6px);opacity:0;transition:.4s var(--ease)}
.dcard:hover .go{transform:none;opacity:1}
.dcard .go svg{width:18px;height:18px}

/* (legacy bento styles) */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.svc{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;display:flex;flex-direction:column;gap:14px;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .3s}
.svc:hover{transform:translateY(-6px);box-shadow:0 26px 60px rgba(10,46,34,.12);border-color:#C6D6CC}
.svc .ico{width:52px;height:52px;border-radius:14px;background:#E9F3ED;color:var(--green);display:grid;place-items:center}
.svc .ico svg{width:26px;height:26px}
.svc p{color:var(--muted);font-size:15px;line-height:1.6}
.svc ul{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:7px;font-size:14px;font-weight:500}
.svc li{padding-left:18px;position:relative}
.svc li:before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.svc.feature{grid-column:span 2;grid-row:span 2;background:var(--ink);color:#fff;border-color:var(--ink);padding:40px;position:relative;overflow:hidden;justify-content:flex-end;min-height:520px}
.svc.feature .bgimg{position:absolute;inset:0;background-position:center;background-size:cover;opacity:.55;transition:transform 1.4s var(--ease)}
.svc.feature:hover .bgimg{transform:scale(1.05)}
.svc.feature:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,30,22,.98) 20%,rgba(6,30,22,.3))}
.svc.feature>*{position:relative;z-index:1}
.svc.feature h3{font-size:36px}
.svc.feature p{color:#D3E1DA;max-width:48ch}
.svc.feature .ico{background:var(--gold);color:var(--ink)}
.svc.feature ul{grid-template-columns:1fr 1fr;color:#EAF2ED}

/* Pathway finder */
.finder{background:var(--ink);color:#fff}
.finder .head p{color:#B9CDC3}
.finder-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:start}
.q{margin-bottom:34px}
.q label{display:block;font-size:14px;font-weight:600;color:#B9CDC3;margin-bottom:12px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.22);color:#fff;padding:12px 18px;border-radius:999px;font-weight:600;font-size:14px;cursor:pointer;transition:.3s var(--ease)}
.chip:hover{border-color:rgba(255,255,255,.6);transform:translateY(-2px)}
.chip.on{background:var(--gold);color:#1B1300;border-color:var(--gold)}
.summary{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);padding:30px;position:sticky;top:110px}
.summary h3{font-size:26px;margin-bottom:8px}
.summary .lines{display:grid;gap:12px;margin:22px 0 26px}
.summary .lines div{display:flex;justify-content:space-between;gap:16px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.1);font-size:14.5px}
.summary .lines span{color:#8FA99C}
.summary .lines b{font-weight:600;text-align:right}

/* Process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:s}
.step{position:relative;padding:34px 28px 30px;border-radius:var(--r-lg);background:var(--sand);counter-increment:s;overflow:hidden}
.step:before{content:"0" counter(s);font-family:"Manrope",sans-serif;font-size:74px;font-weight:500;line-height:1;color:rgba(15,122,72,.14);position:absolute;right:18px;top:12px}
.step h3{font-size:21px;margin:60px 0 10px}
.step p{font-size:14.5px;color:var(--muted);line-height:1.6}
.step .ico{width:50px;height:50px;border-radius:14px;background:#fff;color:var(--green);display:grid;place-items:center;position:absolute;top:28px;left:28px;box-shadow:0 8px 20px rgba(10,46,34,.08)}
.step .ico svg{width:24px;height:24px}

/* Why */
.why{background:var(--sand)}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.why-photo{position:relative;border-radius:28px;overflow:hidden;min-height:560px;background-position:center;background-size:cover}
.why-photo .float{position:absolute;left:24px;bottom:24px;right:24px;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-radius:18px;padding:22px 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.why-photo .float b{font-family:"Manrope",sans-serif;font-size:30px;display:block;color:var(--ink);line-height:1}
.why-photo .float span{font-size:12.5px;color:var(--muted);font-weight:600}
.why-list{display:grid;gap:22px;margin-top:34px}
.why-list>div{display:flex;gap:16px}
.why-list .tick{width:34px;height:34px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;flex:none;margin-top:2px}
.why-list .tick svg{width:16px;height:16px}
.why-list b{display:block;font-size:17px;color:var(--ink)}
.why-list p{font-size:14.5px;color:var(--muted)}

/* Testimonials */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;display:flex;flex-direction:column;gap:18px}
.tcard .stars{color:var(--gold);letter-spacing:2px;font-size:15px}
.tcard q{font-family:"Manrope",sans-serif;font-weight:600;font-size:19px;line-height:1.45;color:var(--ink);quotes:"“" "”"}
.tcard .who{display:flex;align-items:center;gap:12px;margin-top:auto;font-size:13.5px;color:var(--muted)}
.tcard .who i{width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--gold);display:grid;place-items:center;font-style:normal;font-weight:700}
.tcard .who b{display:block;color:var(--ink);font-size:14.5px}
.note{margin-top:22px;font-size:13px;color:var(--muted)}

/* FAQ */
.faq{background:var(--sand)}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:start}
.acc{border-top:1px solid #CFD9D3}
.acc details{border-bottom:1px solid #CFD9D3}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-family:"Manrope",sans-serif;font-size:22px;color:var(--ink)}
.acc summary::-webkit-details-marker{display:none}
.acc summary span{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;flex:none;transition:.35s var(--ease);font-size:20px;line-height:1}
.acc details[open] summary span{background:var(--ink);color:#fff;transform:rotate(45deg)}
.acc .a{padding:0 0 22px;color:var(--muted);font-size:15.5px;line-height:1.65;max-width:62ch}

/* Contact */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px}
.info{display:grid;gap:14px;margin-top:30px}
.info>a,.info>div{display:flex;gap:16px;align-items:flex-start;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-md);transition:.3s}
.info>a:hover{border-color:var(--green);background:#F5FAF7}
.info .ico{width:42px;height:42px;border-radius:12px;background:#E9F3ED;color:var(--green);display:grid;place-items:center;flex:none}
.info .ico svg{width:20px;height:20px}
.info b{display:block;font-size:15px;color:var(--ink)}
.info span{font-size:13.5px;color:var(--muted)}
.form{background:var(--ink);color:#fff;border-radius:28px;padding:40px}
.form h3{font-size:28px;margin-bottom:6px}
.form p{color:#B9CDC3;font-size:14.5px;margin-bottom:26px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:grid;gap:8px}
.field.full{grid-column:1/-1}
.field label{font-size:12.5px;font-weight:600;color:#B9CDC3}
.field input,.field select,.field textarea{background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.18);border-radius:12px;padding:14px 16px;color:#fff;transition:.3s;width:100%}
.field select option{color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);background:rgba(255,255,255,.1)}
.field textarea{min-height:120px;resize:vertical}
.form .btn{width:100%;justify-content:center;margin-top:8px}
.form .fine{font-size:12px;color:#8FA99C;margin:14px 0 0;text-align:center}

/* CTA band */
.band{padding:0}
.band .wrap{background:linear-gradient(120deg,var(--green),#0C5C38);color:#fff;border-radius:32px;padding:64px;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;position:relative;overflow:hidden}
.band .wrap:before{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(232,163,60,.45),transparent 65%)}
.band h2{font-size:clamp(32px,3.6vw,48px)}
.band p{color:#D3E1DA;margin-top:12px;font-size:16px;max-width:48ch}
.band .acts{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}

/* Footer */
footer{background:var(--ink);color:#B9CDC3;padding:80px 0 30px;margin-top:110px}
.fgrid4{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:50px;border-bottom:1px solid rgba(255,255,255,.1)}
footer .brand{margin-bottom:16px}
footer h4,footer .fcol-title{color:#fff;font-size:14px;margin:0 0 16px;font-weight:700}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:14px}
footer ul a:hover{color:#fff}
.legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:26px;font-size:12.5px}
.wa{position:fixed;right:22px;bottom:22px;z-index:70;width:58px;height:58px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 14px 34px rgba(37,211,102,.4);transition:transform .35s var(--ease)}
.wa:hover{transform:scale(1.08)}
.wa svg{width:30px;height:30px;fill:#fff}


/* Pathway */
.pathway{padding:70px 0 0;background:var(--sand);position:relative;z-index:5}
.pw{background:rgba(255,255,255,.72);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid #fff;color:var(--ink);border-radius:28px;display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;padding:44px 48px;box-shadow:0 30px 70px rgba(10,46,34,.12),inset 0 1px 0 #fff;position:relative;overflow:hidden}
.pw:before{content:"";position:absolute;right:-140px;top:-160px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(232,163,60,.28),transparent 65%)}
.pw:after{content:"";position:absolute;left:-120px;bottom:-180px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(15,122,72,.18),transparent 65%)}
.pw>*{position:relative}

.pw h2{font-size:clamp(28px,3vw,40px)}
.pw-side p{color:var(--muted);margin-top:14px;font-size:16px;max-width:40ch}
.pw-points{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:9px;font-size:14.5px;color:var(--ink);font-weight:600}
.pw-points li{display:flex;gap:10px;align-items:center}
.pw-points li:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none}
.pw-form{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;align-content:start}
.pw-form .pw-submit .btn{width:100%;justify-content:center;height:50px;padding:0}
.pw-form .form-msg{grid-column:1/-1}
.form-msg{font-size:14px;color:#B4501C;min-height:1em;margin-top:6px}
.form .form-msg{color:var(--gold-2)}
.form-msg.ok{color:var(--green)}.form .form-msg.ok{color:#8FE0B4}

.pw .field label{color:var(--ink)}
.pw .field input,.pw .field select{background:#fff;border:1.5px solid #D5DED8;color:var(--ink);height:50px}
.pw .field input::placeholder{color:#8A9A91}
.pw .field input:focus,.pw .field select:focus{border-color:var(--green);background:#fff;box-shadow:0 0 0 4px rgba(15,122,72,.12)}
.pw .field select option{color:var(--ink)}

/* Service boxes */
.uae{background:var(--sand)}
.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.sbox{background:#fff;border-radius:var(--r-lg);overflow:hidden;border:1px solid rgba(15,122,72,.14);display:flex;flex-direction:column;box-shadow:0 18px 44px rgba(10,46,34,.10),0 0 0 6px rgba(15,122,72,.04);transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s}
.sbox:hover{transform:translateY(-8px);border-color:rgba(232,163,60,.7);box-shadow:0 32px 70px rgba(10,46,34,.18),0 0 0 6px rgba(232,163,60,.14),0 0 40px rgba(232,163,60,.25)}
.sbox .pic{height:200px;background-size:cover;background-position:center;position:relative}
.sbox .pic:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,30,22,.55),transparent 60%)}
.sbox .pic .ico{position:absolute;left:20px;bottom:-24px;width:52px;height:52px;border-radius:14px;background:var(--ink);color:var(--gold);display:grid;place-items:center;z-index:2;box-shadow:0 10px 24px rgba(0,0,0,.25)}
.sbox .pic .ico svg{width:26px;height:26px}
.sbox .body{padding:38px 24px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.sbox h3{font-size:22px;letter-spacing:-.02em}
.sbox p{font-size:15px;color:var(--muted);line-height:1.6}
.sbox .acts{display:flex;gap:10px;margin-top:auto;padding-top:14px}
.sbox .acts .btn{padding:11px 16px;font-size:13.5px;flex:1;justify-content:center}
.btn-wa{background:#25D366;color:#fff}
.btn-wa:hover{background:#1FBF5B}
.btn-wa svg{width:18px;height:18px;fill:#fff;stroke:none}
.btn-wa:hover svg{transform:none}

.auth{margin-top:44px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;justify-content:center}
.auth span{font-size:13.5px;color:var(--muted);font-weight:600;margin-right:6px}
.auth b{font-family:"Manrope",sans-serif;font-weight:800;letter-spacing:.06em;font-size:13px;color:var(--ink);background:#fff;border:1px solid var(--line);padding:9px 16px;border-radius:999px}
.trust{margin-top:26px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.trust div{padding:22px 24px;border-radius:var(--r-md);background:var(--sand);display:flex;flex-direction:column;gap:4px}
.trust b{font-family:"Manrope",sans-serif;font-weight:800;font-size:20px;color:var(--ink);letter-spacing:-.02em}
.trust span{font-size:14px;color:var(--muted);font-weight:500}

/* Consultation */
.consult{background:#fff}
.consult-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:start}


/* Service sections (split layout) */
.svcsec{background:#fff}
.svcsec.alt{background:var(--sand)}
.split2{display:grid;grid-template-columns:.78fr 1.22fr;gap:56px;align-items:start}
.intro{position:sticky;top:120px}
.intro p{color:var(--muted);font-size:16.5px;line-height:1.65;margin-top:16px;max-width:38ch}
.checks{list-style:none;padding:0;margin:26px 0 30px;display:grid;gap:12px;font-size:15px;font-weight:600;color:var(--ink)}
.checks li{display:flex;gap:12px;align-items:flex-start}
.checks li:before{content:"";flex:none;width:22px;height:22px;border-radius:50%;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/13px no-repeat;margin-top:1px}
.intro .auth{justify-content:flex-start;margin-top:30px;gap:8px}
.intro .auth span{width:100%;margin:0 0 2px}
.intro .auth b{padding:7px 12px;font-size:12px}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.sbox .pic{height:160px}
.sbox .pic .flag{position:absolute;left:18px;bottom:-22px;width:48px;height:48px;border-radius:14px;background:#fff;display:grid;place-items:center;font-size:26px;line-height:1;z-index:2;box-shadow:0 10px 24px rgba(0,0,0,.2)}
.sbox .pic .ico{left:18px;bottom:-22px;width:48px;height:48px}
.sbox .body{padding:34px 22px 22px;gap:8px}
.sbox h3{font-size:20px}
.sbox p{font-size:14.5px}
.sbox .acts .btn{padding:10px 14px;font-size:13px}
.sbox .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.sbox .tags span{font-size:12px;font-weight:600;color:var(--green);background:#E9F3ED;padding:4px 9px;border-radius:999px}

/* Consultation — graceful split card */
.consult{background:#fff;padding-top:0}
.book{display:grid;grid-template-columns:.9fr 1.1fr;border-radius:32px;overflow:hidden;box-shadow:0 40px 100px rgba(10,46,34,.18)}
.book-side{background:linear-gradient(160deg,#0F7A48 0%,#0A2E22 100%);color:#fff;padding:52px 48px;position:relative;overflow:hidden;display:flex;flex-direction:column}
.book-side:before{content:"";position:absolute;right:-160px;top:-160px;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,rgba(232,163,60,.5),transparent 65%)}
.book-side>*{position:relative}
.book-side .kicker{color:var(--gold-2)}
.book-side h2{font-size:clamp(30px,3vw,40px)}
.book-side p{color:#D3E1DA;font-size:16px;line-height:1.65;margin-top:14px;max-width:40ch}
.how{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:18px;counter-reset:h}
.how li{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start;counter-increment:h}
.how li:before{content:counter(h);width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);display:grid;place-items:center;font-family:"Manrope",sans-serif;font-weight:800;font-size:14px;color:var(--gold-2)}
.how b{display:block;font-size:15.5px}
.how span{font-size:13.5px;color:#B9CDC3}
.book-contact{margin-top:auto;padding-top:34px;display:grid;gap:6px;font-size:14.5px;color:#EAF2ED}
.book-contact a{font-weight:700;color:#fff}
.book-contact span{color:#B9CDC3;font-size:13.5px}
.book-form{background:#fff;padding:44px 48px;display:flex;flex-direction:column;justify-content:center}
.seg{display:grid;grid-template-columns:1fr 1fr;background:var(--sand);padding:5px;border-radius:999px;margin-bottom:26px}
.seg button{border:0;background:transparent;border-radius:999px;padding:13px 16px;font-weight:700;font-size:14.5px;color:var(--muted);cursor:pointer;transition:.3s}
.seg button.on{background:var(--ink);color:#fff;box-shadow:0 8px 20px rgba(10,46,34,.2)}
.book-form .field label{color:var(--ink)}
.book-form .field input,.book-form .field select,.book-form .field textarea{background:#F7F9F8;border:1.5px solid #DCE3DE;color:var(--ink)}
.book-form .field input::placeholder,.book-form .field textarea::placeholder{color:#8A9A91}
.book-form .field input:focus,.book-form .field select:focus,.book-form .field textarea:focus{border-color:var(--green);background:#fff;box-shadow:0 0 0 4px rgba(15,122,72,.12)}
.book-form .btn{width:100%;justify-content:center;margin-top:16px;height:54px}
.book-form .fine{font-size:12.5px;color:var(--muted);margin-top:12px;text-align:center}
.book-form .form-msg{color:#B4501C}.book-form .form-msg.ok{color:var(--green)}

.support-head{display:flex;align-items:baseline;gap:12px;margin:30px 0 14px}
.support-head b{font-family:"Manrope",sans-serif;font-weight:800;font-size:20px;color:var(--ink);letter-spacing:-.02em}
.support-head span{font-size:14px;color:var(--muted)}
.mini{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mcard{background:#fff;border:1px solid rgba(15,122,72,.14);border-radius:var(--r-md);padding:18px 18px 18px 16px;display:flex;gap:14px;align-items:flex-start;box-shadow:0 10px 26px rgba(10,46,34,.07);transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s}
.mcard:hover{transform:translateY(-4px);border-color:rgba(232,163,60,.7);box-shadow:0 20px 40px rgba(10,46,34,.12)}
.mcard .ico{width:42px;height:42px;border-radius:12px;background:var(--ink);color:var(--gold);display:grid;place-items:center;flex:none}
.mcard .ico svg{width:20px;height:20px}
.mcard b{display:block;font-size:15px;color:var(--ink);margin-bottom:3px}
.mcard span{font-size:13.5px;color:var(--muted);line-height:1.5}
.rbox{background:#fff;border:1px solid rgba(15,122,72,.14);border-radius:var(--r-lg);padding:22px 22px 20px;display:flex;flex-direction:column;gap:10px;box-shadow:0 14px 34px rgba(10,46,34,.08);transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s}
.rbox:hover{transform:translateY(-6px);border-color:rgba(232,163,60,.7);box-shadow:0 26px 56px rgba(10,46,34,.14),0 0 30px rgba(232,163,60,.18)}
.rbox .rhead{display:flex;align-items:center;gap:12px}
.rbox .flag{width:44px;height:44px;border-radius:12px;background:var(--sand);display:grid;place-items:center;font-size:24px;line-height:1;flex:none}
.rbox h3{font-size:18px;letter-spacing:-.02em;line-height:1.25}
.rbox p{font-size:14px;color:var(--muted);line-height:1.55}
.rbox .tags{display:flex;flex-wrap:wrap;gap:6px}
.rbox .tags span{font-size:12px;font-weight:600;color:var(--green);background:#E9F3ED;padding:4px 9px;border-radius:999px}
.rbox .acts{display:flex;gap:10px;margin-top:auto;padding-top:10px}
.rbox .acts .btn{padding:10px 14px;font-size:13px;flex:1;justify-content:center}
.pillars{background:#fff}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pcard{background:var(--sand);border-radius:var(--r-lg);padding:32px 30px;display:flex;flex-direction:column;gap:14px;border:1px solid transparent;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .3s}
.pcard:hover{transform:translateY(-6px);border-color:rgba(232,163,60,.6);box-shadow:0 26px 60px rgba(10,46,34,.12)}
.pcard .ico{width:52px;height:52px;border-radius:14px;background:var(--ink);color:var(--gold);display:grid;place-items:center}
.pcard .ico svg{width:26px;height:26px}
.pcard h3{font-size:21px}
.pcard p{font-size:15px;color:var(--muted);line-height:1.6}
.pcard .btn{align-self:flex-start;margin-top:auto}

.about{background:var(--sand)}
.about-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:60px;align-items:center}
.about-logo{display:grid;place-items:center;padding:40px;background:#fff;border-radius:28px;box-shadow:0 30px 70px rgba(10,46,34,.10)}
.about-logo img{width:min(100%,300px);filter:drop-shadow(0 20px 40px rgba(232,120,30,.3))}
.about p{color:var(--muted);font-size:16.5px;line-height:1.65;margin-top:16px;max-width:60ch}
.about-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:28px 0}
.about-facts div{background:#fff;border-radius:var(--r-md);padding:18px 20px;display:flex;flex-direction:column;gap:3px}
.about-facts b{font-family:"Manrope",sans-serif;font-weight:800;font-size:20px;color:var(--ink);letter-spacing:-.02em}
.about-facts span{font-size:13.5px;color:var(--muted);font-weight:500}
.about-acts{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .links,.nav .nav-cta{display:none}.burger{display:flex}
  .hero .copy .wrap,.scene2 .copy .wrap,.scene3 .copy .wrap{grid-template-columns:1fr}
  .dest-tags{display:none}
  .stack{display:none}
  .pane-uae{width:100%;clip-path:none}
  .pane-dest{width:100%;clip-path:polygon(0 52%,100% 42%,100% 100%,0 100%)}
  .split .seam{background:linear-gradient(174deg,transparent 46%,rgba(232,163,60,.85) 47%,rgba(232,163,60,.85) 47.6%,transparent 48.6%)}
  .dest-chip{top:118px;right:4%;left:auto;bottom:auto;padding:10px 14px;gap:10px}
  .dest-chip .flag{font-size:22px}.dest-chip b{font-size:13.5px}.dest-chip span{font-size:11.5px}
  .dir-grid,.dest-grid,.bento,.steps,.tgrid,.finder-grid,.why-grid,.faq-grid,.contact-grid,.consult-grid,.pw,.head{grid-template-columns:1fr}
  .split2,.book,.pgrid,.about-grid{grid-template-columns:1fr}
  .intro{position:static}
  .cards{grid-template-columns:1fr 1fr}
  .pw{padding:34px}
  .pw-form{grid-template-columns:1fr 1fr}
  .dest-grid,.bento{grid-template-columns:1fr 1fr}
  .svc.feature{grid-column:1/-1;grid-row:auto;min-height:440px}
  .steps{grid-template-columns:1fr 1fr}
  .fgrid4{grid-template-columns:1fr 1fr}
  .band .wrap{grid-template-columns:1fr;padding:44px}
  .band .acts{justify-content:flex-start}
  .summary{position:static}
}
@media (max-width:640px){
  .topbar .right,.topbar .hours{display:none}
  .topbar{font-size:12px}
  .hero{min-height:640px;max-height:820px}
  .hero-kicker{display:none}
  .hero-sub{font-size:15.5px}
  h1,.h1-alt{font-size:clamp(40px,11vw,52px)}
  .dest-chip{top:auto;bottom:calc(100% - 118px - 46px);transform:none}
  .split .tint{background:linear-gradient(180deg,rgba(6,30,22,.7),rgba(6,30,22,.35) 30%,rgba(6,30,22,.55) 55%,rgba(6,30,22,.97) 100%)}
  .stack{display:none}
  .hero .copy{bottom:140px}
  .rail{padding-bottom:40px}
  h1,.h1-alt{max-width:none}
  .dest-grid,.bento,.steps,.fgrid,.fgrid4,.cards,.mini,.about-facts{grid-template-columns:1fr}
  .about-logo{padding:24px}
  .book-side,.book-form{padding:30px 24px}
  .book{border-radius:22px}
  .pw{padding:26px;border-radius:22px}
  .nav{top:50px}
  .brand{font-size:18px}.brand small{font-size:8.5px;letter-spacing:.08em}.pill{height:62px}.brand .logo{width:46px;height:46px}
  .pw-form .pw-submit label{display:none}
  section{padding:80px 0}
  .dir{min-height:440px;padding:26px}
  .dir h3{font-size:30px}
  .form{padding:26px}
  .scroll-hint{display:none}
  .why-photo .float{grid-template-columns:1fr}
  .svc.feature ul{grid-template-columns:1fr}
  .dcard{height:230px}
  .why-photo{min-height:420px}
  .band .wrap{padding:34px;border-radius:22px}
  .mega{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .reveal{opacity:1;transform:none}
}

/* secondary WhatsApp action in the consultation block - inherits .btn-wa colours from line 388 */
.book-form .btn-wa{margin-top:10px;width:100%;justify-content:center}


/* --- WordPress admin bar offset (logged-in users only) ---------------------
   The admin bar is position:fixed and WordPress adds html{margin-top:32px}
   (46px at <=782px). That margin moves the static .topbar down but does not
   move .nav (position:absolute, containing block unaffected) nor .nav.sticky
   (position:fixed). Measured overlap: -16px above 782px, -34px below it.
   These rules add exactly the admin bar height back, restoring the original
   12px / 16px gap. Logged-out visitors match the original byte for byte. */
body.admin-bar .nav{top:86px}                                        /* 54 + 32 */
body.admin-bar .nav.sticky{top:46px}                                 /* 14 + 32 */
@media screen and (max-width:782px){
  body.admin-bar .nav{top:100px}                                     /* 54 + 46 */
  body.admin-bar .nav.sticky{top:60px}                               /* 14 + 46 */
}
@media (max-width:640px){
  body.admin-bar .nav{top:96px}                                      /* 50 + 46 */
}

/* The hero is exactly one small-viewport tall (height:100svh). The admin bar
   adds html{margin-top:32px} (46px at <=782px) on top of that, so for a
   logged-in viewer the hero's bottom band - headline row, scene tabs, scroll
   hint - is pushed below the fold. Measured on a Pixel 7 profile: scene tabs
   at 840..864 against an 839px viewport. Subtracting the bar's height restores
   the original's first screen. Logged-out visitors are unaffected. */
body.admin-bar .hero{height:calc(100vh - 32px);height:calc(100svh - 32px)}
@media screen and (max-width:782px){
  body.admin-bar .hero{height:calc(100vh - 46px);height:calc(100svh - 46px)}
}

/* ===== Hero card stack below 1100px =======================================
   The original hides .stack under @media (max-width:1100px), which takes the
   six residency cards and the six UAE cards off the site entirely on phones -
   they appear nowhere else, the grid below the hero is visit visas and UAE
   services. This is a REDUCED treatment of the same stack in the same place in
   the scene: one card at a time, floating over the photograph directly above
   the headline, driven by the same showCard() rotation and the same CARD_MS
   timing. Nothing here can apply above 1100px. */
@media (max-width:1100px){
  /* All six cards share one grid cell, so the cell is as tall as the tallest
     card - no fixed height has to be guessed as it is on desktop. */
  .scene2 .stack,.scene3 .stack{display:grid;height:auto;width:auto;max-width:min(100%,520px);justify-self:stretch;order:-1}
  .scene2 .stack>.card,.scene3 .stack>.card{position:relative;inset:auto;grid-area:1/1}
  /* One card at a time: the desktop peek offsets (+22/-22, +44/-44) would push
     the stack off the side of a phone. */
  .scene2 .stack>.card.next,.scene3 .stack>.card.next,
  .scene2 .stack>.card.next2,.scene3 .stack>.card.next2{opacity:0;transform:translateY(10px) scale(.98)}

  .scene2 .copy .wrap,.scene3 .copy .wrap{gap:18px;align-items:end}

  .scene2 .stack .card,.scene3 .stack .card{padding:18px;border-radius:18px;box-shadow:0 18px 44px rgba(0,0,0,.38)}
  .scene2 .stack .card .head,.scene3 .stack .card .head{gap:11px;margin-bottom:12px}
  .scene2 .stack .card .ico,.scene3 .stack .card .ico{width:38px;height:38px;border-radius:11px}
  .scene2 .stack .card .ico svg,.scene3 .stack .card .ico svg{width:19px;height:19px}
  .scene2 .stack .card h3,.scene3 .stack .card h3{font-size:20px;line-height:1.15}
  .scene2 .stack .card .n,.scene3 .stack .card .n{font-size:11.5px}
  .scene2 .stack .card .d,.scene3 .stack .card .d{font-size:13px;margin:-4px 0 12px;line-height:1.5}
  .scene2 .stack .card ul,.scene3 .stack .card ul{gap:7px;font-size:13.5px}
  .scene2 .stack .card li,.scene3 .stack .card li{gap:9px;line-height:1.35}
  .scene2 .stack .card li:before,.scene3 .stack .card li:before{width:6px;height:6px}
  .scene2 .stack .card .foot,.scene3 .stack .card .foot{padding-top:11px;font-size:11.5px}
}

/* Phone tier: the headline and subtext on scenes 2 and 3 come down in scale to
   buy the card its vertical space. Wording is unchanged. */
@media (max-width:640px){
  /* Floor: headline never below 32px, subtext never below 14px. The space for
     the card is bought from the card, never from the message. */
  .scene2 .h1-alt,.scene3 .h1-alt{font-size:clamp(32px,9vw,38px);line-height:1.08;margin:0 0 10px;max-width:none}
  .scene2 .hero-sub,.scene3 .hero-sub{font-size:15px;line-height:1.5}
  .scene2 .copy .wrap,.scene3 .copy .wrap{gap:13px}
  .scene2 .stack .card,.scene3 .stack .card{padding:14px 15px;border-radius:16px}
  .scene2 .stack .card h3,.scene3 .stack .card h3{font-size:17.5px}
  .scene2 .stack .card .head,.scene3 .stack .card .head{gap:9px;margin-bottom:9px}
  .scene2 .stack .card .ico,.scene3 .stack .card .ico{width:32px;height:32px;border-radius:10px}
  .scene2 .stack .card .ico svg,.scene3 .stack .card .ico svg{width:16px;height:16px}
  .scene2 .stack .card .d,.scene3 .stack .card .d{font-size:12.5px;margin:-2px 0 9px;line-height:1.45}
  .scene2 .stack .card ul,.scene3 .stack .card ul{gap:5px;font-size:12.8px}
  .scene2 .stack .card li,.scene3 .stack .card li{line-height:1.28}
  .scene2 .stack .card .foot,.scene3 .stack .card .foot{padding-top:8px;font-size:11px}
}

/* Very short viewports only (iPhone SE class, 568px tall; a 659px iPhone 15 Pro keeps all four). All four bullets plus the
   headline block do not fit above the fold there, so the fourth is dropped and
   the first three are kept. Tall phones (Pixel 7 at 839px) keep all four.
   Measured on the SE with three: card 128..385, headline 398..459, subtext
   468..538, against a 568px viewport. */
@media (max-width:1100px) and (max-height:620px){
  .scene2 .stack .card li:nth-child(n+4),.scene3 .stack .card li:nth-child(n+4){display:none}
  .scene2 .hero-sub,.scene3 .hero-sub{font-size:14px;line-height:1.45}
  .scene2 .stack .card,.scene3 .stack .card{padding:13px 14px}
  .scene2 .stack .card .d,.scene3 .stack .card .d{font-size:12px;margin:-2px 0 8px;line-height:1.4}
  .scene2 .stack .card ul,.scene3 .stack .card ul{gap:4px;font-size:12.5px}
  .scene2 .stack .card .foot,.scene3 .stack .card .foot{padding-top:7px}
}

/* The floating WhatsApp button is fixed at bottom:22px and is 58px tall, so on a
   phone it sits exactly where the hero's bottom-anchored subtext ends. Reserving
   that strip inside the hero would cost ~70px of vertical budget, which is the
   budget the headline and subtext minimums need - measured, the card drops to
   ~120px and stops holding its content. So the button steps aside while the hero
   is on screen and returns the moment it scrolls away; WhatsApp is still one tap
   away in the hero via the nav CTA. Desktop is untouched. */
.wa{transition:transform .35s var(--ease),opacity .3s var(--ease)}
@media (max-width:1100px){
  body.in-hero .wa{opacity:0;pointer-events:none;transform:scale(.85) translateY(12px)}
}

/* Inline SVG flags. Windows ships no country-flag emoji, so the emoji versions
   rendered as two-letter boxes there. The badge boxes below are unchanged -
   only the glyph inside them. 3:2 ratio, matched to the emoji they replace. */
.flagsvg{display:block;border-radius:2px;box-shadow:0 0 0 .5px rgba(0,0,0,.16)}
.sbox .pic .flag .flagsvg{width:30px;height:20px}
.dest-chip .flag .flagsvg{width:30px;height:20px}
.dcard .flag .flagsvg{width:32px;height:21px}
.rbox .flag .flagsvg{width:27px;height:18px}
.card .foot .flagsvg{display:inline-block;width:17px;height:11.5px;vertical-align:-1px;margin-right:5px}
.card .foot span{display:inline-flex;align-items:center;flex-wrap:wrap;gap:0}
@media (max-width:640px){
  .dest-chip .flag .flagsvg{width:24px;height:16px}
  .card .foot .flagsvg{width:15px;height:10px}
}

/* Fallback template (pages, the blog index, search). The nav is absolutely
   positioned over the hero on the front page; other templates have no hero, so
   the content needs that space back. */
.fallback-main{padding:170px 0 90px;min-height:52vh}
.fallback-main h1{font-size:clamp(34px,4vw,52px);margin-bottom:18px}
.fallback-main .entry{font-size:16.5px;line-height:1.7;color:var(--muted);max-width:70ch}
.fallback-main article + article{margin-top:44px;padding-top:44px;border-top:1px solid var(--line)}

/* Reviews: the Google rating line and the "read them all" link. The card
   styling (.tgrid/.tcard) is the original's and is untouched. */
.grating{display:flex;align-items:center;gap:10px;margin:14px 0 0;font-size:15.5px;color:var(--muted);font-weight:500}
.grating .gstars{color:var(--gold);letter-spacing:2px;font-size:16px}
.grating b{font-family:"Manrope",sans-serif;font-weight:800;font-size:21px;color:var(--ink);letter-spacing:-.02em}
.glink{display:inline-block;margin-top:10px;color:var(--green);font-weight:700;border-bottom:1px solid rgba(15,107,63,.3)}
.glink:hover{border-bottom-color:var(--green)}
#reviews .tcard q{font-size:17.5px}
@media (max-width:640px){
  .grating{font-size:14.5px}
  .grating b{font-size:19px}
  #reviews .tcard q{font-size:16.5px}
}
/* ================================================================
   Reviews section - rebuilt visual treatment.
   Vocabulary borrowed from this build only:
   - glass surface + blur + inset highlight ....... .pw / .pathway
   - dark gradient band + gold radial glow ........ .band .wrap
   - glass-on-dark card ........................... .pill / .dest-chip
   - card hover lift .............................. .svc:hover
   - oversized decorative glyph ................... .step:before
   - radius / colour tokens ....................... :root
   Data, text, names, dates and schema are untouched.
   ================================================================ */

.revs { position: relative; overflow: hidden; }
.revs .wrap { position: relative; z-index: 1; }

/* ---------- header: intro left, credential right ---------- */
.rv-head {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 40px;
  align-items: end;
  margin-bottom: 52px;
}
.rv-note {
  font-size: 17px;
  color: var(--muted);
  max-width: 44ch;
  line-height: 1.6;
  margin-top: 16px;
}

.rv-score { justify-self: end; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.rv-plate {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 30px;
  border-radius: 20px;
}
.rv-num {
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  font-size: 58px;
  line-height: .86;
  letter-spacing: -.035em;
  color: var(--ink);
}
.rv-meta { display: block; }
.rv-stars { display: block; color: var(--gold); font-size: 20px; letter-spacing: 3px; line-height: 1; }
.rv-count { display: block; margin-top: 8px; font-size: 14.5px; color: var(--muted); font-weight: 500; }
.rv-count b { font-weight: 800; color: var(--ink); }
.rv-score .glink { margin-top: 0; }

/* ---------- cards ---------- */
.rv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}
.rv-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 30px 26px;
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), background .4s;
}
.rv-card:before {
  content: "\201D";
  position: absolute;
  right: 16px;
  top: -14px;
  font-family: "Manrope", sans-serif;
  font-size: 128px;
  font-weight: 800;
  line-height: 1;
  color: rgba(232, 163, 60, .16);
  pointer-events: none;
}
.rv-card .stars { color: var(--gold); letter-spacing: 2px; font-size: 15px; line-height: 1; }

.rv-quote { position: relative; }
.rv-quote q {
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.52;
  color: var(--ink);
  quotes: "\201C" "\201D";
}
/* only the long review is capped, and it fades rather than cutting */
.rv-card.is-long .rv-quote {
  max-height: 13.7em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 3em), transparent 100%);
  mask-image: linear-gradient(180deg, #000 calc(100% - 3em), transparent 100%);
}

.rv-who {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.rv-who i {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-style: normal; font-weight: 800; font-size: 17px;
  flex: none;
}
.rv-who b { display: block; font-family: "Manrope", sans-serif; font-size: 15px; color: var(--ink); }
.rv-who span { font-size: 13px; color: var(--muted); }

/* ---------- band + surfaces: warm sand, glass cards ---------- */
.rv-sand { background: var(--sand); }
.rv-sand:before {
  content: ""; position: absolute; right: -190px; top: -190px;
  width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,163,60,.26), transparent 65%);
  pointer-events: none;
}
.rv-sand:after {
  content: ""; position: absolute; left: -220px; bottom: -240px;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(15,122,72,.16), transparent 65%);
  pointer-events: none;
}
.rv-sand .rv-plate,
.rv-sand .rv-card {
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border: 1px solid #fff;
  box-shadow: 0 24px 56px rgba(10,46,34,.10), inset 0 1px 0 #fff;
}
.rv-sand .rv-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 34px 74px rgba(10,46,34,.16), inset 0 1px 0 #fff;
}
.rv-sand .rv-who { border-top-color: rgba(10,46,34,.10); }
.rv-sand .rv-who i { background: var(--ink); color: var(--gold); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .rv-head { grid-template-columns: 1fr; align-items: start; gap: 28px; margin-bottom: 36px; }
  .rv-score { justify-self: start; }
  .rv-grid { grid-template-columns: 1fr; }
  .rv-card.is-long .rv-quote { max-height: none; -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 640px) {
  .rv-plate { padding: 18px 22px; gap: 16px; }
  .rv-num { font-size: 46px; }
  .rv-stars { font-size: 17px; letter-spacing: 2px; }
  .rv-count { font-size: 13.5px; }
  .rv-note { font-size: 15.5px; }
  .rv-card { padding: 26px 24px 22px; }
  .rv-quote q { font-size: 16.5px; }
  .rv-card:before { font-size: 104px; right: 12px; }
}