/* ============================================================
   ADVANCEDATA NETWORK — stylesheet
   Brand palette: deep navy + tech blue + orange.
   Motion language borrowed from scale.com.

   Section order:
     01  Design tokens
     02  Reset & base
     03  Layout helpers
     04  Buttons
     05  Custom cursor
     06  Preloader
     07  Header & navigation
     08  Language picker
     09  Hero
     10  Reveal primitives
     11  Statement
     12  Stats
     13  Services grid
     14  Horizontal pinned feature
     15  Marquee & award badges
     16  CTA
     17  Footer
     18  Modal
     19  Mobile navigation
     20  Reduced-motion & print
   ============================================================ */


/* ============================================================
   01  DESIGN TOKENS
   ============================================================ */
:root {
  /* Brand palette */
  --navy:        #07182e;   /* deep brand navy          */
  --navy-deep:   #050f1f;
  --navy-footer: #03101f;
  --blue:        #1668e3;   /* primary tech blue        */
  --blue-bright: #2f86ff;
  --blue-soft:   #e8f0fd;
  --orange:      #f7941e;   /* accent orange            */
  --orange-deep: #e87a00;
  --whatsapp:    #25d366;
  --whatsapp-deep: #1ebe5d;

  /* Neutrals */
  --ink:         #0a1b2e;   /* near-black text on light */
  --slate:       #44566b;   /* secondary text           */
  --slate-light: #6b7e93;
  --line:        #e4e9f0;   /* hairlines                */
  --surface:     #ffffff;
  --surface-2:   #f5f8fc;   /* light section background */
  --surface-3:   #eef3fa;

  /* Typography */
  --font-display: "Sora", system-ui, sans-serif;
  --font-body:    "Manrope", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Metrics */
  --maxw:   1280px;
  --gutter: clamp(20px, 5vw, 72px);
  --r:      14px;

  /* Height of the fixed header in its scrolled (compact) state. Anything
     that has to sit clear of it should offset from this, never from a vh
     value — the header is a constant height, so a vh offset slides under
     it on short viewports. */
  --header-h: 74px;

  /* Easing */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io:  cubic-bezier(0.65, 0, 0.35, 1);

  /* Breakpoints are duplicated as comments only — CSS cannot use
     custom properties in media queries. Keep these in sync:
     nav/mobile 880px · services 980/620px · stats 860px
     statement 820px · panels 760px · footer 920px            */
}


/* ============================================================
   02  RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--surface);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

::selection { background: var(--orange); color: #fff; }

/* Keyboard focus stays visible even while the custom cursor is on. */
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
}


/* ============================================================
   03  LAYOUT HELPERS
   ============================================================ */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(72px, 11vw, 150px); position: relative; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--blue); font-weight: 500;
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before {
  content: ""; display: inline-block;
  width: 26px; height: 1px; background: var(--orange);
}
.eyebrow.on-dark { color: var(--blue-bright); }

/* Vertical rhythm spacers used inline in the markup */
.sp-20 { height: 20px; }
.sp-24 { height: 24px; }
.sp-34 { height: 34px; }

#scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 9998;
  height: 3px; width: 0;
  background: linear-gradient(90deg, var(--blue), var(--orange));
}


/* ============================================================
   04  BUTTONS
   ============================================================ */
.btn {
  --bg: var(--orange); --fg: #fff;
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 24px; border-radius: 100px;
  font-weight: 700; font-size: 15px;
  background: var(--bg); color: var(--fg);
  overflow: hidden; isolation: isolate;
  transition: transform .35s var(--ease-out), box-shadow .35s;
  will-change: transform;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--orange-deep);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease-out);
}
.btn:hover::before { transform: scaleX(1); }
.btn:hover { box-shadow: 0 14px 34px -12px rgba(247, 148, 30, .6); }

.btn .arrow { transition: transform .35s var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }

.btn.ghost  { --bg: transparent; --fg: #fff; border: 1.5px solid rgba(255,255,255,.4); }
.btn.ghost::before { background: #fff; }
.btn.ghost:hover   { --fg: var(--navy); }

.btn.blue   { --bg: var(--blue); }
.btn.blue::before { background: var(--navy); }

.btn.whatsapp { --bg: var(--whatsapp); --fg: #fff; }
.btn.whatsapp::before { background: var(--whatsapp-deep); }
.btn.whatsapp svg { vertical-align: middle; margin-right: 2px; }


/* ============================================================
   05  CUSTOM CURSOR
   ============================================================ */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 9999;
  pointer-events: none; border-radius: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}
.cursor-dot  { width: 7px; height: 7px; background: #fff; }
.cursor-ring {
  width: 38px; height: 38px; border: 1.5px solid #fff;
  transition: width .25s var(--ease-out), height .25s var(--ease-out), background .25s;
}
.cursor-ring.is-hover { width: 64px; height: 64px; background: rgba(255,255,255,.12); }

body.cursor-on,
body.cursor-on a,
body.cursor-on button { cursor: none; }

@media (hover: none) {
  body { cursor: auto; }
  .cursor-dot, .cursor-ring { display: none; }
}


/* ============================================================
   06  PRELOADER
   ============================================================ */
#preloader {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--navy-deep); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px;
  transition: opacity .7s var(--ease-out), visibility .7s;
}
#preloader.done { opacity: 0; visibility: hidden; }
.pre-logo-img { height: clamp(48px, 9vw, 72px); width: auto; }
.pre-bar   { width: min(280px, 60vw); height: 2px; background: rgba(255,255,255,.15); overflow: hidden; }
.pre-bar i { display: block; height: 100%; width: 0; background: var(--orange); transition: width .2s linear; }
.pre-num   { font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em; color: rgba(255,255,255,.6); }


/* ============================================================
   07  HEADER & NAVIGATION
   ============================================================ */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 900;
  padding-block: 20px;
  border-bottom: 1px solid transparent;
  transition: background .4s var(--ease-out), padding .4s var(--ease-out),
              box-shadow .4s, border-color .4s;
}
.header.scrolled {
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  padding-block: 12px;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 30px -22px rgba(7,24,46,.4);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.brand { display: flex; align-items: center; }
.brand .brand-img { height: clamp(28px, 4.2vw, 38px); width: auto; }
.brand .on-light { display: none; }
.header.scrolled .brand .on-dark  { display: none; }
.header.scrolled .brand .on-light { display: block; }

.nav { display: flex; align-items: center; gap: 34px; }
.nav a {
  position: relative;
  font-size: 15px; font-weight: 600;
  color: rgba(255,255,255,.82);
  transition: color .3s;
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: -6px;
  height: 2px; width: 0; background: var(--orange);
  transition: width .35s var(--ease-out);
}
.nav a:hover { color: #fff; }
.nav a:hover::after { width: 100%; }
.header.scrolled .nav a { color: var(--slate); }
.header.scrolled .nav a:hover { color: var(--ink); }

.nav-toggle { display: none; }


/* ============================================================
   08  LANGUAGE PICKER  (Google Translate driven)
   ============================================================ */

/* Suppress the stock Google Translate chrome */
.goog-te-banner-frame,
.goog-te-gadget-icon,
#goog-gt-tt,
.goog-te-balloon-frame { display: none !important; }
.goog-te-gadget        { font-size: 0 !important; }
.goog-te-gadget > span { display: none !important; }
.skiptranslate         { display: none !important; }
body { top: 0 !important; }
font { background: transparent !important; box-shadow: none !important; }

.lang-picker { position: relative; display: inline-block; margin-left: auto; }

.lang-current {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px; cursor: pointer;
  background: transparent; color: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.25); border-radius: 100px;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .06em;
  transition: color .3s, border-color .3s;
}
.lang-current:hover { color: #fff; border-color: var(--orange); }
.lang-current img   { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; }
.header.scrolled .lang-current { color: var(--slate); border-color: var(--line); }

.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 200;
  min-width: 180px; padding: 6px; margin: 0; list-style: none;
  background: var(--ink); border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; box-shadow: 0 20px 50px -20px rgba(0,0,0,.6);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.lang-picker.open .lang-menu { opacity: 1; visibility: visible; transform: none; }
.lang-menu li {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 8px; cursor: pointer;
  color: #fff; font-size: 14px; white-space: nowrap;
  transition: background .2s;
}
.lang-menu li:hover { background: rgba(255,255,255,.08); }
.lang-menu li img   { width: 22px; height: 15px; object-fit: cover; border-radius: 2px; }

/* The in-menu list used on small screens */
.lang-picker-mobile { display: none; }
.lang-menu-mobile   { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.lang-menu-mobile button {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 4px; cursor: pointer; text-align: left;
  background: transparent; border: none; font-size: 16px;
  /* Explicit, NOT `inherit`. This list only ever renders inside the dark
     mobile menu; inheriting picks up --ink from <body> and paints near-black
     text on the near-black panel, which is invisible. */
  color: rgba(255, 255, 255, .88);
}
.lang-menu-mobile button:hover { color: #fff; }
.lang-menu-mobile button img { width: 24px; height: 16px; object-fit: cover; border-radius: 2px; }


/* ============================================================
   09  HERO  (pinned, scroll-driven 3D card)
   ============================================================ */
.hero { position: relative; background: var(--navy-deep); color: #fff; }
.hero-track  { height: 380vh; position: relative; }
.hero-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }

#hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }

/* --- card stage --- */
.hero-stage {
  position: absolute; inset: 0; z-index: 1;
  perspective: 1800px; pointer-events: none;
}
.hero-card {
  position: absolute;
  /* defaults so the first paint is correct before JS runs */
  left: -5%; top: -5%; width: 110%; height: 110%;
  opacity: 0;
  transform-style: preserve-3d;
  will-change: transform, left, top, width, height, opacity;
}
.hero-card[data-card="0"] { opacity: 1; }

.hero-card-inner {
  position: absolute; inset: 0;
  overflow: hidden; border-radius: 0;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.45);
}
.hero-card img { width: 100%; height: 100%; object-fit: cover; }
.hero-card-img { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease-in-out; }
.hero-card-img.is-active { opacity: 1; }
.hero-card-tint {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(5,15,31,.35) 0%, rgba(5,15,31,0) 28%,
    rgba(5,15,31,0) 60%, rgba(5,15,31,.6) 100%);
}

/* --- HUD wireframe overlay --- */
.hero-hud {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
  opacity: var(--hud-o, 0);
  transition: opacity .25s linear;
}
.hero-hud .hud-line {
  fill: none; stroke: rgba(255,255,255,.65); stroke-width: 1;
  stroke-linecap: square; vector-effect: non-scaling-stroke;
}
.hero-hud .hud-dash { stroke: rgba(255,255,255,.5); stroke-dasharray: 2 3; }
.hero-hud .hud-label-text {
  fill: rgba(255,255,255,.95); font-family: var(--font-mono);
  font-size: 11px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase;
}

/* --- readability wash, fades as the card shrinks --- */
.hero-dim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  opacity: var(--dim-o, 1);
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(22,104,227,.30), transparent 55%),
    radial-gradient(90% 70% at 0% 100%, rgba(247,148,30,.16), transparent 60%),
    linear-gradient(180deg, rgba(5,15,31,.25) 0%, rgba(5,15,31,.88) 100%);
}

/* --- text overlay --- */
.hero-inner {
  position: absolute; left: 0; right: 0; bottom: 0;
  top: clamp(96px, 13vh, 140px);          /* clears the fixed header, incl. taller translated text */
  z-index: 3;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: 0 clamp(32px, 5vh, 56px);
  opacity: var(--text-o, 1);
}
.hero-inner .wrap { width: 100%; }

.hero h1 {
  font-size: clamp(1.7rem, 4vw, 3.7rem);
  font-weight: 800; max-width: 16ch;
}
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line > span { display: block; transform: translateY(110%); }
.hero .accent { color: var(--orange); }

.hero-sub {
  margin-top: 20px; max-width: 54ch;
  font-size: clamp(.95rem, 1.3vw, 1.15rem);
  color: rgba(255,255,255,.82);
}
.hero-cta { margin-top: 24px; display: flex; gap: 14px; flex-wrap: wrap; }

.hero-meta {
  margin-top: 28px; padding-top: 18px; max-width: 720px;
  display: flex; flex-wrap: nowrap; gap: clamp(16px, 3vw, 44px);
  border-top: 1px solid rgba(255,255,255,.14);
}
.hero-meta div span { display: block; }
.hero-meta .k {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.4rem, 2.4vw, 2rem); color: #fff;
}
.hero-meta .l {
  margin-top: 3px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55);
}

.scroll-hint {
  position: absolute; left: 50%; bottom: 22px; z-index: 4;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.5);
  opacity: var(--hint-o, 1); transition: opacity .4s;
}
.scroll-hint i {
  width: 1px; height: 40px;
  background: linear-gradient(rgba(255,255,255,.6), transparent);
  animation: scrolldown 1.8s var(--ease-io) infinite;
}
@keyframes scrolldown {
  0%   { transform: scaleY(0); transform-origin: top; }
  40%  { transform: scaleY(1); transform-origin: top; }
  60%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* Four stats need two rows once the viewport is narrow */
@media (max-width: 640px) {
  .hero-meta { flex-wrap: wrap; row-gap: 18px; }
  .hero-meta > div { flex: 0 0 calc(50% - 22px); }
}

/* Small screens: no 3D, the card becomes a full-bleed background.
   NOTE: `top` above must be neutralised here — the element is
   statically positioned at this size and would otherwise be nudged
   down by a second header's worth of space. */
@media (max-width: 879px) {
  .hero-track  { height: auto; }
  .hero-sticky {
    position: relative; height: 100svh;
    display: flex; flex-direction: column; justify-content: center;
    padding-top: clamp(84px, 12vh, 120px);          /* clear the fixed header */
    padding-bottom: clamp(48px, 9vh, 90px);         /* clear the scroll hint  */
  }
  .hero-stage  { perspective: none; }
  .hero-card   { opacity: 0; }
  .hero-card[data-card="0"] {
    opacity: 1; position: absolute; inset: 0;
    transform: none !important;
  }
  .hero-card[data-card="0"] .hero-card-inner { border-radius: 0 !important; box-shadow: none; }
  .hero-card[data-card="0"] .hero-card-tint {
    background: linear-gradient(180deg, rgba(5,15,31,.55) 0%, rgba(5,15,31,.88) 100%);
  }
  .hero-card[data-card="0"] .hero-hud { display: none; }
  .hero-dim { opacity: .35; }
  .hero-inner {
    position: relative;
    inset: auto; top: auto;
    padding-block: 0;
  }
}


/* ============================================================
   10  REVEAL PRIMITIVES  (driven by IntersectionObserver)
   ============================================================ */
[data-reveal] {
  opacity: 0; transform: translateY(34px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
[data-reveal].in { opacity: 1; transform: none; }

[data-reveal="clip"]    { clip-path: inset(0 0 100% 0); transform: none;
                          transition: clip-path 1s var(--ease-out), opacity .9s; }
[data-reveal="clip"].in { clip-path: inset(0 0 0 0); }
[data-reveal="left"]    { transform: translateX(-40px); }
[data-reveal="left"].in { transform: none; }

[data-stagger] > * {
  opacity: 0; transform: translateY(30px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
[data-stagger].in > * { opacity: 1; transform: none; }

/* --- Mobile safety net ---------------------------------------------
   Reveal animations start every element at opacity:0 and rely on JS to
   add .in. If the observer never fires, the page renders blank. That
   happened on Chrome mobile when boot was tied to window.load behind
   17 MB of images.

   The root cause is fixed (main.js boots on DOMContentLoaded, with a
   3s force-boot fallback), but the cost of that failure is a blank
   page, so small screens skip the animation entirely and render the
   content outright. Desktop keeps the motion.

   Safe to delete once the mobile rendering has been stable for a
   while — it only removes an animation, never content.              */
@media (max-width: 880px) {
  [data-reveal],
  [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}


/* ============================================================
   11  STATEMENT
   ============================================================ */
.statement { background: var(--surface); }
.statement .grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 80px); align-items: start;
}
.statement .big {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.6rem, 3.6vw, 3.1rem);
  line-height: 1.18; letter-spacing: -.02em; max-width: 22ch;
}
.statement .big b { color: var(--blue); font-weight: 700; }
.statement .side p   { color: var(--slate); font-size: 1.05rem; max-width: 42ch; }
.statement .side .btn { margin-top: 22px; }

@media (max-width: 820px) { .statement .grid { grid-template-columns: 1fr; } }


/* ============================================================
   12  STATS
   ============================================================ */
.stats { background: var(--surface-2); border-block: 1px solid var(--line); }
.stats .row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat .num {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  letter-spacing: -.03em; line-height: 1; color: var(--ink);
}
.stat .num .sfx { color: var(--orange); }
.stat .cap { margin-top: 12px; color: var(--slate); font-size: .98rem; max-width: 24ch; }

@media (max-width: 860px) { .stats .row { grid-template-columns: 1fr 1fr; gap: 40px 24px; } }


/* ============================================================
   13  SERVICES GRID
   ============================================================ */
.services { background: var(--surface); }
.services .head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 30px; margin-bottom: 56px; flex-wrap: wrap;
}
.services h2 { font-size: clamp(2rem, 4.6vw, 3.6rem); max-width: 18ch; }

.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.svc {
  position: relative; overflow: hidden;
  padding: 30px 28px 34px;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r);
  transition: transform .5s var(--ease-out), box-shadow .5s, border-color .5s;
}
.svc::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--orange));
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease-out);
}
.svc:hover { transform: translateY(-8px); box-shadow: 0 30px 60px -34px rgba(7,24,46,.35); border-color: transparent; }
.svc:hover::before { transform: scaleX(1); }

.svc h3 { font-size: 1.22rem; margin-bottom: 10px; }
.svc p  { color: var(--slate); font-size: .96rem; }

.svc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.svc-tags span {
  padding: 4px 10px; border: 1px solid var(--line); border-radius: 100px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--slate-light);
}

.svc .more {
  margin-top: 18px; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--blue);
}
.svc .more span { transition: transform .35s var(--ease-out); }
.svc:hover .more span { transform: translateX(5px); }

@media (max-width: 980px) { .svc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .svc-grid { grid-template-columns: 1fr; } }


/* ============================================================
   14  HORIZONTAL PINNED FEATURE
   ============================================================ */
.hscroll { background: var(--surface-2); }
.hscroll-track  { height: 320vh; position: relative; }
/* Column layout rather than an absolutely positioned heading: the eyebrow
   takes its own row below the header, and the rail centres in whatever is
   left. Previously the heading was absolute at `top: clamp(40px, 9vh, 90px)`
   — a vh offset against a fixed-height header, so it slid behind the header
   on any viewport under ~900px tall. */
.hscroll-sticky {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: flex; flex-direction: column;
  padding-top: calc(var(--header-h) + 26px);
  padding-bottom: clamp(16px, 3vh, 40px);
}
.hscroll-head { flex: 0 0 auto; padding-left: var(--gutter); z-index: 3; }
.hscroll-rail {
  flex: 1 1 auto;
  display: flex; align-items: center; gap: 28px;
  padding-inline: var(--gutter); will-change: transform;
}

.hpanel {
  flex: 0 0 min(78vw, 880px);
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center;
  padding: clamp(28px, 4vw, 52px);
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
}
.hpanel .n  { font-family: var(--font-mono); font-size: 13px; letter-spacing: .15em; color: var(--orange); }
.hpanel h3  { font-size: clamp(1.6rem, 3vw, 2.4rem); margin: 14px 0 16px; }
.hpanel p   { color: var(--slate); }
.hpanel .pic {
  aspect-ratio: 4 / 3; overflow: hidden; border-radius: 14px;
  background: var(--surface-3); display: grid; place-items: center;
}
.hpanel .pic img { width: 70%; height: 70%; object-fit: contain; transition: transform .8s var(--ease-out); }
.hpanel:hover .pic img { transform: scale(1.06); }

@media (max-width: 760px) {
  .hpanel { grid-template-columns: 1fr; }
  .hpanel .pic { order: -1; }
}


/* ============================================================
   15  MARQUEE & AWARD BADGES
   ============================================================ */
.marquee-sec { background: var(--navy); color: #fff; padding-block: clamp(48px, 7vw, 84px); }
.marquee-sec .lab {
  margin-bottom: 38px; text-align: center;
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.55);
}

.marquee {
  display: flex; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-row { display: flex; gap: 64px; padding-right: 64px; animation: marq 32s linear infinite; }
.marquee:hover .marquee-row { animation-play-state: paused; }
@keyframes marq { to { transform: translateX(-100%); } }

.marquee-row .chip {
  display: flex; align-items: center; justify-content: center;
  height: 80px; min-width: 160px; padding: 0 26px;
  background: #fff; border-radius: 12px;
  box-shadow: 0 10px 30px -16px rgba(0,0,0,.5);
  transition: transform .4s var(--ease-out), box-shadow .4s;
}
.marquee-row .chip img { max-height: 46px; max-width: 160px; width: auto; height: auto; object-fit: contain; }
.marquee-row .chip:hover {
  transform: translateY(-5px) scale(1.04);
  box-shadow: 0 18px 40px -14px rgba(0,0,0,.55);
}

.badges {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;
  gap: 22px; margin-top: 40px;
}
.badge-pill {
  display: flex; align-items: center; justify-content: center;
  width: 180px; height: 108px; padding: 18px 24px;
  background: #fff; border-radius: 14px;
  box-shadow: 0 10px 30px -16px rgba(0,0,0,.5);
  transition: transform .4s var(--ease-out), box-shadow .4s;
}
.badge-pill img { max-height: 72px; max-width: 136px; width: auto; height: auto; object-fit: contain; }

/* A very wide mark (Suruhanjaya Tenaga is 4.58:1) hits the width cap long
   before the height cap and ends up a sliver. Give those a wider pill in
   the wrapping layout; the desktop grid already gives every pill enough. */
.badge-pill.is-wide     { width: 272px; }
.badge-pill.is-wide img { max-width: 228px; }
.badge-pill:hover {
  transform: translateY(-5px) scale(1.04);
  box-shadow: 0 18px 40px -14px rgba(0,0,0,.55);
}

/* Eight badges, laid out 4 x 2 from laptop width up.
   `.wrap` caps at 1280px, so this container is ~1136px on every screen from
   1440 up — a wider monitor buys no extra room. Eight across would give each
   pill 130px, and the Suruhanjaya Tenaga mark is 4.58:1, so it would render
   about 102x22px with "Energy Commission" illegible. Four columns give each
   pill ~274px and every logo room to read.
   For one row of eight instead, change 4 to 8 below. */
@media (min-width: 1200px) {
  .badges {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    align-items: stretch;
  }
  .badge-pill { width: auto; height: 124px; padding: 16px 22px; }
  .badge-pill img { max-height: 86px; max-width: 100%; }

  /* `.badge-pill.is-wide` outranks the rule above on specificity, so it
     would keep its fixed 272px and break the grid. Hand it back. */
  .badge-pill.is-wide     { width: auto; }
  .badge-pill.is-wide img { max-width: 100%; }
}


/* ============================================================
   16  CTA
   ============================================================ */
.cta {
  position: relative; overflow: hidden; text-align: center;
  background: var(--navy-deep); color: #fff;
}
.cta::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(80% 120% at 50% 120%, rgba(22,104,227,.4), transparent 60%),
    radial-gradient(50% 80% at 50% -20%, rgba(247,148,30,.22), transparent 60%);
}
.cta-inner { position: relative; z-index: 1; }
.cta h2 { font-size: clamp(2.2rem, 6vw, 5rem); max-width: 18ch; margin-inline: auto; }
.cta p  { margin: 22px auto 36px; max-width: 46ch; font-size: 1.1rem; color: rgba(255,255,255,.78); }


/* ============================================================
   17  FOOTER
   ============================================================ */
.footer {
  background: var(--navy-footer); color: rgba(255,255,255,.7);
  padding-top: clamp(60px, 8vw, 100px);
}
.footer-top {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px;
  padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer h4 {
  margin-bottom: 20px; color: #fff;
  font-family: var(--font-mono); font-weight: 500; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase;
}
.footer .fbrand-img { height: 40px; width: auto; margin-bottom: 18px; }
.footer .blurb { max-width: 34ch; font-size: .96rem; }
.footer ul li  { margin-bottom: 12px; font-size: .96rem; }
.footer a:hover { color: var(--orange); }

.offices {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 28px; padding-block: 44px; border-bottom: 1px solid rgba(255,255,255,.1);
}
.office .city {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px; color: #fff; font-weight: 700;
}
.office .city i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue-bright); }
.office address { font-style: normal; font-size: .9rem; line-height: 1.7; color: rgba(255,255,255,.6); }
.office .tel { display: inline-block; margin-top: 8px; color: #fff; font-weight: 600; }

.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; padding-block: 30px; flex-wrap: wrap; font-size: .88rem;
}

/* Desktop: Singapore HQ on its own top row, the three MY offices below,
   each block centred. `justify-items` must stay inside this query — recent
   Chrome honours it in block layout too, which shrink-wraps and centres the
   offices once the grid collapses on small screens. */
@media (min-width: 881px) {
  .offices { justify-items: center; }
  .offices .office { text-align: center; max-width: 320px; }
  .offices .office:first-child { grid-column: 1 / -1; }
  .offices .office .city { justify-content: center; }
}

@media (max-width: 920px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 880px) {
  .offices { display: block; }
  .offices .office { margin-bottom: 28px; }
}


/* ============================================================
   18  MODAL
   ============================================================ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 950;
  display: grid; place-items: center; padding: 24px;
  background: rgba(5,15,31,.66);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease-out), visibility .35s;
}
.modal-overlay.open { opacity: 1; visibility: visible; }

.modal {
  position: relative;
  width: min(760px, 100%); max-height: 86vh; overflow-y: auto;
  padding: clamp(22px, 4vw, 44px);
  background: var(--surface); border-radius: 18px;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.5);
  transform: translateY(26px);
  transition: transform .45s var(--ease-out);
}
.modal-overlay.open .modal { transform: none; }

.modal-close {
  position: sticky; top: 0; z-index: 2; margin-left: auto; cursor: pointer;
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--surface-2); color: var(--ink);
  font-size: 24px; line-height: 1;
  transition: background .3s, transform .3s var(--ease-out);
}
.modal-close:hover { background: var(--orange); color: #fff; transform: rotate(90deg); }

.modal-kicker {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--blue);
}
.modal h3 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 12px 0 18px; line-height: 1.15; }
.modal h4 { font-size: 1.08rem; margin: 22px 0 8px; }
.modal p  { margin: 12px 0; color: var(--slate); font-size: .98rem; }
.modal ul { margin: 12px 0 12px 20px; color: var(--slate); font-size: .98rem; }
.modal ul li { margin-bottom: 8px; list-style: disc; }

/* Square source art: fill the width, white backing, never letterboxed grey */
.modal-hero {
  width: 100%; height: auto; max-height: 420px;
  object-fit: contain; background: #fff;
  border-radius: 12px; margin: 6px 0 14px;
}
.modal-hero.contain   { padding: 28px; }
.modal-hero.ekko-logo { height: 220px; padding: 40px; }


/* ============================================================
   19  MOBILE NAVIGATION
   ============================================================ */
@media (max-width: 880px) {
  .nav, .header .btn { display: none; }

  .nav-toggle { display: inline-flex; flex-direction: column; gap: 5px; padding: 10px; cursor: pointer; }
  .nav-toggle i { width: 24px; height: 2px; background: #fff; transition: .3s; }
  .header.scrolled .nav-toggle i { background: var(--ink); }

  .mobile-menu {
    position: fixed; inset: 0; z-index: 880;
    display: flex; flex-direction: column; gap: 8px;
    /* NOT `justify-content: center`. With 3 links, a button and 9 languages
       the panel overflows on any screen under ~730px tall, and centred
       overflow spills past BOTH ends — the top items end up at a negative
       offset that no amount of scrolling can reach. Anchored to the top,
       everything stays reachable. */
    justify-content: flex-start;
    padding: clamp(92px, 15vh, 130px) var(--gutter) calc(var(--gutter) + 24px);
    background: var(--navy-deep);
    color: #fff;                      /* so descendants don't inherit --ink */
    transform: translateY(-100%);
    transition: transform .55s var(--ease-out);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .mobile-menu.open { transform: none; }
  /* Flex items shrink by default. Once the panel overflows, that squeezes
     every child — the consultation button collapsed to 12px tall with its
     label spilling out. Nothing in here should shrink; the panel scrolls. */
  .mobile-menu > * { flex: 0 0 auto; }
  .mobile-menu a {
    color: #fff; font-family: var(--font-display); font-weight: 700;
    font-size: clamp(1.5rem, 6vw, 2rem); padding-block: 6px;
  }
  /* `.mobile-menu a` above also matches this anchor, so the 2rem nav size
     lands inside a pill padded for 15px text and the label overflows the
     button. Reset it. */
  .mobile-menu .btn {
    margin-top: 20px; align-self: flex-start; display: inline-flex;
    font-size: 15px; line-height: 1.2;
  }

  /* swap the header dropdown for the in-menu list */
  .lang-picker:not(.lang-picker-mobile) { display: none; }
  .lang-picker-mobile {
    display: block;
    /* `.lang-picker` carries `margin-left: auto` to sit far right in the
       header. Inside the mobile menu's flex column that auto margin shoves
       the whole language list against the right edge. */
    margin-left: 0;
    width: 100%;
    margin-top: 10px;
    border-top: 1px solid rgba(255,255,255,.12);
    padding-top: 10px;
  }
}

@media (min-width: 881px) { .mobile-menu { display: none; } }


/* ============================================================
   20  REDUCED MOTION & PRINT
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .scroll-hint i, .marquee-row { animation: none !important; }
}

@media print {
  #preloader, .header, .mobile-menu, .cursor-dot, .cursor-ring,
  #scroll-progress, .scroll-hint, #hero-canvas, .modal-overlay { display: none !important; }
  .hero-track, .hscroll-track { height: auto !important; }
  .hero-sticky, .hscroll-sticky { position: static !important; height: auto !important; }
  body { color: #000; background: #fff; }
}