/* GradPath premium scroll/interaction layer — shared across all pages.
   Additive only: nothing here overrides existing page styles. Safe to include anywhere. */

/* 1) Scroll progress bar (top of page) */
.gp-progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:9999;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,#0d4f4a 0%,#0a3b38 40%,#a9c6a6 100%);
  box-shadow:0 0 10px rgba(13,79,74,.35);pointer-events:none;will-change:transform;}

/* 2) Magnetic buttons — smoothing handled in JS; CSS just eases the return */
.gp-magnetic{will-change:transform;}
@media (hover:hover) and (pointer:fine){
  .gp-magnetic{transition:transform .35s cubic-bezier(.16,1,.3,1);}
}

/* 3) Marquee strip (endless horizontal scroll) */
.gp-marquee{--gp-mq-dur:34s;overflow:hidden;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.gp-marquee-track{display:flex;width:max-content;gap:0;
  animation:gpMarquee var(--gp-mq-dur) linear infinite;}
.gp-marquee:hover .gp-marquee-track{animation-play-state:paused;}
.gp-marquee-group{display:flex;flex-shrink:0;align-items:center;}
.gp-marquee-group>*{padding:0 clamp(20px,3.4vw,52px);font-weight:700;
  letter-spacing:.02em;white-space:nowrap;display:inline-flex;align-items:center;gap:10px;}
.gp-marquee-dot{width:6px;height:6px;border-radius:50%;background:#a9c6a6;flex:0 0 auto;opacity:.7;}
@keyframes gpMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* 4) Generic reveal via data-reveal (does NOT touch existing .reveal class) */
[data-reveal]{opacity:0;transform:translateY(38px);
  transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1);}
[data-reveal="left"]{transform:translateX(-46px)}
[data-reveal="right"]{transform:translateX(46px)}
[data-reveal="zoom"]{transform:scale(.92)}
[data-reveal].gp-in{opacity:1;transform:none;}
[data-reveal-stagger]>*{opacity:0;transform:translateY(30px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);}
[data-reveal-stagger].gp-in>*{opacity:1;transform:none;}

/* 5) Custom cursor (desktop pointers only) — lerp ring + instant dot */
.gp-cursor{position:fixed;top:0;left:0;width:32px;height:32px;border-radius:50%;
  border:1.5px solid rgba(13,79,74,.5);pointer-events:none;z-index:9998;
  transform:translate(-50%,-50%);opacity:0;will-change:transform;
  transition:width .32s cubic-bezier(.16,1,.3,1),height .32s cubic-bezier(.16,1,.3,1),
             background .32s ease,border-color .32s ease,opacity .3s ease;}
.gp-cursor.on{opacity:1;}
.gp-cursor.hot{width:56px;height:56px;background:rgba(169,198,166,.16);border-color:rgba(13,79,74,.85);}
.gp-cursor.press{width:24px;height:24px;background:rgba(13,79,74,.14);}
.gp-cursor-dot{position:fixed;top:0;left:0;width:6px;height:6px;border-radius:50%;
  background:#0d4f4a;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);opacity:0;
  transition:opacity .3s ease;}
.gp-cursor-dot.on{opacity:1;}
.gp-cursor-dot.hot{opacity:0;}
@media (hover:none),(pointer:coarse){.gp-cursor,.gp-cursor-dot{display:none!important;}}

/* 6) Page transitions: removed on purpose. Pressing back from a country page on a phone left a green
   layer over the whole screen: nothing scrolled, nothing was visible, and back
   had to be pressed twice. That is what a stuck view transition looks like. The
   snapshot is a static image painted over the document, which is exactly why it
   does not scroll, and ::view-transition-new(root) animated from opacity 0 with
   fill mode both, so an animation that never completed left the incoming page
   invisible underneath it.

   Chrome on Android takes this native path and never touches the gp-leaving
   fallback, which is why hardening that first did nothing. Headless would not
   reproduce it either, since it depends on real compositing and the back
   forward cache on a device.

   Navigation is plain now. A crossfade between pages is not worth a back button
   that does not work. */

/* 7) Kinetic hero headline — word-by-word rise, applied by JS splitting.
   .gp-split defuses the page's block-level heroIn so words own the entrance. */
.hero h1.gp-split{animation:none!important;opacity:1!important;}
.gp-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em;}
.gp-wi{display:inline-block;transform:translateY(112%);opacity:0;filter:blur(6px);
  animation:gpWord .85s cubic-bezier(.16,1,.3,1) both;will-change:transform,filter;}
@keyframes gpWord{to{transform:none;opacity:1;filter:none;}}

/* 8) Lenis smooth scroll (init'd by enhance.js, desktop only) */
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto!important;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
.lenis.lenis-stopped{overflow:hidden;}


/* 9) gp-touch-targets: phone touch targets: thumbs need ~44px. Visual size is unchanged, the tap
   area just grows to meet the guideline. */
@media (max-width:820px){
  .nav-toggle{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
  .topnav .links a.cta{min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
  .site-footer .sf-social a{width:44px;height:44px;}
}

@media (prefers-reduced-motion:reduce){
  .gp-progress{display:none;}
  .gp-marquee-track{animation:none;}
  .gp-cursor,.gp-cursor-dot{display:none!important;}
  [data-reveal],[data-reveal-stagger]>*{opacity:1!important;transform:none!important;transition:none!important;}
  .gp-wi{animation:none;transform:none;opacity:1;filter:none;}
}

/* --- qc: tap targets --- */
/* The off-canvas menu is a 300px column of inline links, so a short label like
   "UAE" was only 26px wide to tap. Rows are already 44px tall. */
@media (max-width: 900px) {
  .topnav .links a { width: 100%; }
  .topnav .links a.cta { width: auto; }
}
/* A tel: link measured 101x19. Give it a real target without moving the bar. */
a.phone { display: inline-flex; align-items: center; min-height: 44px; }
/* The globe picker's Open button does nothing until a country is chosen, so it
   should not look ready. */
#cta[aria-disabled="true"] { opacity: .42; pointer-events: none; }

/* --- qc: footer tap targets --- */
/* .sf-top is a grid of vertical lists, so the links only spanned their own text:
   "UAE" was 26px wide at 44px tall. Full width makes the whole row tappable.
   Under 520px the footer centres its text, so the flex box has to centre too. */
@media (max-width: 900px) {
  .site-footer .sf-top li > a { width: 100%; }
}
@media (max-width: 520px) {
  .site-footer .sf-top li > a { justify-content: center; }
}

/* --- qc: logo hit area --- */
/* The landing logo link measured 105x30. Growing the box would push the header
   taller, so the hit area is extended with a pseudo-element instead: same look,
   44px of reachable height. */
a.brand { position: relative; }
a.brand::after {
  content: ""; position: absolute; left: 0; right: 0;
  top: 50%; transform: translateY(-50%); height: 44px;
}

/* --- qc: white-on-red small text --- */
/* --red is #e24539, which gives white text only 4.10:1. An earlier pass already
   moved the buttons to the brand red #d13a2f (4.82:1) but left this badge behind:
   12px at 800 weight needs 4.5:1, not 3:1. Same brand red, now it passes. */
.form-head .free { background: #d13a2f; }

/* --- qc: mobile hero above the fold --- */
/* The homepage opens with two stacked full-height panels inside .hero:
   .hero-dest is height:100vh of video carrying only the country strip, and
   .hero-solid is the min-height:100vh panel that holds the eyebrow, headline,
   AI field and stats. On a phone that means the entire first screen has no
   message and no call to action on it.

   Shortening the video panel and letting the pitch panel size to its content
   pulls the headline into the first screen, keeps the cinematic open, and leaves
   desktop exactly as designed. */
@media (max-width: 600px) {
  .hero-dest { height: 50vh; }
  .hero-solid { min-height: auto; padding-top: 26px; padding-bottom: 60px; }
}

/* --- qc: phone card + menu spacing --- */
/* .hcard floors at min-height 260px while its content is about 140px on a phone,
   and .hcard h3 uses margin:auto to push the title to the bottom. Together that
   is roughly 120px of dead space between the number and the title. Desktop keeps
   the tall card; the phone sizes to content. */
@media (max-width: 600px) {
  .hshow .hcard { min-height: 0; }
  .hshow .hcard h3 { margin: 16px 0 8px; }
}
/* The nav drawer is a full-height column with justify-content:center, so a short
   link list floats in the middle with a large void above the first item. */
@media (max-width: 900px) {
  .topnav .links { justify-content: flex-start; padding-top: 96px; }
}