/* --------------------------------------------------------------------------
   1. FONTS
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-variable.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ------------------------------------------------------------------------
     2. BRAND COLOURS
     ------------------------------------------------------------------------ */
  --navy: #00213f;
  --navy-deep: #00172c;
  --navy-2: #06305a;
  --navy-3: #031f3a;
  --teal: #00d2b2;
  --teal-light: #4cebd6;
  --teal-dark: #00bfa8;
  --teal-ink: #00a88e;
  --paper: #f2f6f7;
  --white: #ffffff;
  --black: #000000;
  --ink: #00172c;

  /* ------------------------------------------------------------------------
     3. NEUTRALS & STATUS
     ------------------------------------------------------------------------ */
  --muted: #4f6275;
  --muted-on-dark: #a9bbcb;
  --line: #d6e1e6;
  --placeholder: #9cb0be;
  --danger: #d64545;
  --danger-soft: #ff8a8a;
  --danger-ink: #c23b3b;

  /* ------------------------------------------------------------------------
     4. TRANSPARENT COLOURS (alpha steps)
     ------------------------------------------------------------------------ */
  /* white on dark */
  --white-04: rgba(255, 255, 255, 0.04);
  --white-05: rgba(255, 255, 255, 0.05);
  --white-06: rgba(255, 255, 255, 0.06);
  --white-08: rgba(255, 255, 255, 0.08);
  --white-09: rgba(255, 255, 255, 0.09);
  --white-10: rgba(255, 255, 255, 0.1);
  --white-12: rgba(255, 255, 255, 0.12);
  --white-14: rgba(255, 255, 255, 0.14);
  --white-18: rgba(255, 255, 255, 0.18);
  --white-20: rgba(255, 255, 255, 0.2);
  --navy-line: rgba(255, 255, 255, 0.12);

  /* teal glows */
  --teal-wash: rgba(0, 210, 178, 0.12);
  --teal-a06: rgba(0, 210, 178, 0.06);
  --teal-a07: rgba(0, 210, 178, 0.07);
  --teal-a10: rgba(0, 210, 178, 0.1);
  --teal-a20: rgba(0, 210, 178, 0.2);
  --teal-a30: rgba(0, 210, 178, 0.3);
  --teal-a35: rgba(0, 210, 178, 0.35);
  --teal-a40: rgba(0, 210, 178, 0.4);
  --teal-a45: rgba(0, 210, 178, 0.45);
  --teal-a60: rgba(0, 210, 178, 0.6);
  --teal-clear: rgba(0, 210, 178, 0);

  /* navy glass */
  --navy-glass: rgba(0, 23, 44, 0.88);
  --navy-glass-60: rgba(0, 23, 44, 0.6);
  --navy-glass-55: rgba(0, 23, 44, 0.55);
  --navy-glass-90: rgba(0, 23, 44, 0.9);

  /* danger tints */
  --danger-clear: rgba(214, 69, 69, 0);
  --danger-a70: rgba(214, 69, 69, 0.7);

  /* ------------------------------------------------------------------------
     5. GRADIENTS
     ------------------------------------------------------------------------ */
  --grad-teal: linear-gradient(
    110deg,
    var(--teal-light) 0%,
    var(--teal) 50%,
    var(--teal-dark) 100%
  );
  --grad-teal-line: linear-gradient(
    90deg,
    transparent,
    var(--teal),
    var(--teal-light),
    transparent
  );
  --grad-teal-sweep: linear-gradient(90deg, var(--teal), var(--teal-light));
  --grad-leak: linear-gradient(90deg, var(--danger), var(--danger-soft));
  --grad-hero-img: linear-gradient(
    180deg,
    rgba(0, 33, 63, 0) 50%,
    rgba(0, 33, 63, 0.55)
  );
  --grad-member: linear-gradient(0deg, var(--navy-glass-90), transparent);
  --grad-sv-card:
    radial-gradient(120% 80% at 100% 0%, var(--teal-a10), transparent 55%),
    linear-gradient(180deg, var(--navy-2) 0%, var(--navy-3) 100%);
  --grad-sv-img-tint: linear-gradient(135deg, var(--teal-a10), transparent 40%);
  --grad-cta-fill: linear-gradient(
    90deg,
    var(--teal) 0 50%,
    var(--white-18) 50%
  );

  /* image fade masks */
  --mask-fade-x: linear-gradient(
    90deg,
    transparent,
    #000 10%,
    #000 90%,
    transparent
  );
  --mask-fade-x-wide: linear-gradient(
    90deg,
    transparent,
    #000 12%,
    #000 88%,
    transparent
  );
  --mask-fade-y: linear-gradient(
    180deg,
    transparent 0,
    #000 14%,
    #000 86%,
    transparent 100%
  );
  --mask-fade-in-right: linear-gradient(90deg, transparent, #000);
  --mask-grid-hero: radial-gradient(
    ellipse at 70% 40%,
    #000 20%,
    transparent 75%
  );
  --mask-sv-fx: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.3) 45%,
    #000 68%
  );
  --mask-sv-img: linear-gradient(
    180deg,
    #000 0%,
    #000 50%,
    rgba(0, 0, 0, 0.55) 72%,
    rgba(0, 0, 0, 0.12) 90%,
    transparent 100%
  );

  /* background patterns */
  --grid-line: linear-gradient(var(--white-04) 1px, transparent 1px);
  --grid-line-x: linear-gradient(90deg, var(--white-04) 1px, transparent 1px);
  --grid-size: 80px 80px;

  /* ------------------------------------------------------------------------
     6. SHADOWS & RINGS
     ------------------------------------------------------------------------ */
  --sh-header: 0 10px 30px rgba(0, 0, 0, 0.25);
  --sh-dropdown: 0 30px 60px rgba(0, 23, 44, 0.25);
  --sh-popup: 0 30px 60px rgba(0, 23, 44, 0.3);
  --sh-float: 0 4px 20px rgba(0, 0, 0, 0.3);
  --sh-float-hover: 0 8px 28px var(--teal-a35);
  --sh-social-hover: 0 8px 20px var(--teal-a35);
  --sh-card-lift: 0 30px 60px rgba(0, 33, 63, 0.12);
  --sh-brand-hover: 0 12px 28px rgba(0, 33, 63, 0.12);
  --sh-chip: 0 20px 40px rgba(0, 0, 0, 0.2);
  --sh-sv-hover: 0 10px 24px rgba(0, 0, 0, 0.22);
  --sh-sv-icon: 0 14px 28px rgba(0, 0, 0, 0.4);
  --sh-sv-icon-hover: 0 10px 20px rgba(0, 0, 0, 0.3);
  --ring-pulse-start: 0 0 0 0 var(--teal-a60);
  --ring-pulse-end: 0 0 0 9px var(--teal-clear);
  --ring-pulse-sm-start: 0 0 0 0 rgba(0, 210, 178, 0.4);
  --ring-pulse-sm-end: 0 0 0 8px var(--teal-clear);
  --ring-pulse-zero: 0 0 0 0 var(--teal-clear);
  --ring-node: 0 0 0 10px var(--teal-wash);
  --ring-focus: 0 0 0 4px var(--teal-wash);
  --ring-chip: 0 0 0 5px var(--teal-wash);
  --ring-vs-paper: 0 0 0 10px var(--paper);
  --ring-vs-white: 0 0 0 8px var(--white);
  --ring-vs-white-md: 0 0 0 6px var(--white);
  --ring-vs-white-sm: 0 0 0 5px var(--white);

  /* ------------------------------------------------------------------------
     7. RADII
     ------------------------------------------------------------------------ */
  --radius: 18px;
  --radius-md: 14px;
  --radius-sm: 12px;
  --radius-xs: 10px;
  --radius-tab: 8px;
  --radius-pill: 999px;
  --radius-round: 50%;

  /* ------------------------------------------------------------------------
     8. LAYOUT & SPACING
     ------------------------------------------------------------------------ */
  --wrap: 1280px;
  --hdr: 84px;
  --gutter: clamp(16px, 4vw, 40px);
  --sp-section: clamp(56px, 7vw, 104px);
  --sp-section-lg: clamp(72px, 10vw, 140px);
  --sp-section-md: clamp(56px, 7vw, 90px);
  --sp-section-sm: clamp(44px, 5.4vw, 72px);
  --sp-section-why: clamp(56px, 6.4vw, 96px);
  --sp-brands: clamp(40px, 5vw, 64px);
  --sp-sec-mobile: 44px;
  --sp-sec-mobile-sm: 36px;
  --sp-head: clamp(32px, 4vw, 56px);
  --sp-head-sm: clamp(24px, 3vw, 40px);
  --gap-head: clamp(20px, 3.4vw, 56px);
  --gap-split: clamp(32px, 6vw, 96px);
  --gap-split-md: clamp(28px, 5.4vw, 84px);
  --gap-split-sm: clamp(28px, 4.4vw, 72px);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ------------------------------------------------------------------------
     9. TYPOGRAPHY
     ------------------------------------------------------------------------ */
  --f-display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --f-body: "Manrope", "Segoe UI", Helvetica, Arial, sans-serif;

  --fs-body: 16px;
  --lh-body: 1.65;
  --fs-hero: clamp(40px, 6.4vw, 100px);
  --fs-hero-home: clamp(36px, 6vw, 92px);
  --fs-hero-mobile: clamp(32px, 10vw, 44px);
  --fs-h1: clamp(36px, 5.2vw, 76px);
  --fs-h1-section: clamp(32px, 4.6vw, 66px);
  --fs-h1-mobile: clamp(28px, 8.4vw, 36px);
  --fs-h2: clamp(28px, 3.4vw, 48px);
  --fs-h2-testi: clamp(28px, 3.4vw, 48px);
  --fs-h3: clamp(20px, 1.7vw, 24px);
  --fs-lead: clamp(17px, 1.35vw, 20px);
  --fs-lead-section: clamp(16px, 1.25vw, 18px);
  --fs-small: 14px;
  --fs-xs: 13px;
  --fs-xxs: 12px;
  --ls-tight: -0.02em;
  --ls-hero: -0.03em;
  --ls-eyebrow: 0.16em;
  --lh-tight: 1.02;
  --lh-hero: 0.92;
  --stretch-wide: 112%;
  --stretch-mid: 110%;
  --stretch-soft: 108%;

  /* ------------------------------------------------------------------------
     10. MOTION
     ------------------------------------------------------------------------ */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 0.2s;
  --t-quick: 0.3s;
  --t-base: 0.4s;
  --t-mid: 0.5s;
  --t-slow: 0.6s;
  --t-slide: 0.8s;
  --t-slower: 0.9s;
  --t-slowest: 1.2s;

  /* ------------------------------------------------------------------------
     11. STACKING (z-index)
     ------------------------------------------------------------------------ */
  --z-under: -1;
  --z-base: 1;
  --z-content: 2;
  --z-raised: 3;
  --z-top: 4;
  --z-widget: 80;
  --z-widget-pop: 81;
  --z-header: 90;
  --z-mobile-nav: 150;
  --z-preloader: 200;
  --z-cursor: 300;

  /* ------------------------------------------------------------------------
     12. ASSETS & ICONS
     ------------------------------------------------------------------------ */
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300213F' stroke-width='3'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E");
  --icon-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 273 327' fill='%2300D2B2'%3E%3Cpath d='M140 3 L3 85 L3 168 L125 242 L125 198 L40 146 L40 107 L138 45 L207 86 L243 66Z'/%3E%3Cpath d='M64 120 L97 140 L134 121 L193 157 L263 157 L134 79Z'/%3E%3Cpath d='M269 180 L162 180 L162 216 L229 216 L230 227 L139 281 L38 221 L3 242 L138 323 L269 247Z'/%3E%3C/svg%3E");
  --icon-mark-outline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 273 327' fill='none' stroke='%2300D2B2' stroke-width='1.2'%3E%3Cpath d='M140 3 L3 85 L3 168 L125 242 L125 198 L40 146 L40 107 L138 45 L207 86 L243 66Z'/%3E%3Cpath d='M64 120 L97 140 L134 121 L193 157 L263 157 L134 79Z'/%3E%3Cpath d='M269 180 L162 180 L162 216 L229 216 L230 227 L139 281 L38 221 L3 242 L138 323 L269 247Z'/%3E%3C/svg%3E");
  /* ------------------------------------------------------------------------
     13. VIDEO STORIES
     ------------------------------------------------------------------------ */
  --vs-w: clamp(232px, 21vw, 296px);
  --vs-radius: 22px;
  --vs-pad-top: 44px;
  --vs-pad-bottom: 92px;
  --vs-nav-pull: 44px;
  --vs-head-gap: clamp(8px, 2vw, 24px);
  --vs-glow-w: min(900px, 90vw);
  --vs-glow-h: 520px;
  --vs-dur: 0.85s;
  --vs-dur-fade: 0.6s;
  --vs-autoplay: 6500;
  --vs-reach: 2;
  --vs-x1: 1.02;
  --vs-x2: 1.8;
  --vs-s0: 1;
  --vs-s1: 0.86;
  --vs-s2: 0.74;
  --vs-o0: 1;
  --vs-o1: 0.6;
  --vs-o2: 0.28;
  --vs-enter-y: 48px;
  --vs-enter-scale: 0.82;
  --vs-stagger: 90;
  --vs-btn: 72px;
  --vs-btn-mobile: 60px;
  --vs-arrow: 52px;
  --vs-arrow-mobile: 46px;
  --sh-vs: 0 22px 40px -22px rgba(0, 33, 63, 0.4);
  --sh-vs-active:
    0 36px 56px -26px rgba(0, 33, 63, 0.5), 0 0 0 1px var(--teal-a30);
  --sh-vs-play: 0 12px 32px rgba(0, 0, 0, 0.4);
  --grad-vs-media: linear-gradient(160deg, var(--navy-2), var(--navy-deep));
  --grad-vs-poster: linear-gradient(
    180deg,
    rgba(0, 23, 44, 0.35) 0%,
    transparent 26%,
    transparent 40%,
    rgba(0, 23, 44, 0.96) 100%
  );
  --grad-vs-glow: radial-gradient(
    closest-side,
    var(--teal-a10),
    transparent 70%
  );
  --mask-vs: linear-gradient(
    90deg,
    transparent 0,
    #000 9%,
    #000 91%,
    transparent 100%
  );

  /* ------------------------------------------------------------------------
     14. EXTRAS
     ------------------------------------------------------------------------ */
    --lk-gx: clamp(28px, 4vw, 56px);
    --lk-gy: clamp(28px, 3.4vw, 44px);
    --lk-pad: clamp(22px, 2.4vw, 30px);
    --lk-h: 224px;
    --lk-radius: var(--radius);
    --lk-x: 34px;
    --lk-run: 2.4s;
    --grad-lk-card:
      radial-gradient(120% 90% at 100% 0%, var(--teal-a10), transparent 55%),
      linear-gradient(165deg, var(--navy-2) 0%, var(--navy-3) 100%);
    --sh-lk-hover:
      0 18px 40px -18px rgba(0, 33, 63, 0.55), 0 0 0 1px var(--teal-a20);

    --navy-rgb: 0, 33, 63;
    --teal-rgb: 0, 210, 178;
    --danger-rgb: 214, 69, 69;

    --fs-10: 10px;
    --fs-11: 11px;
    --fs-12: 12px;
    --fs-13: 13px;
    --fs-14: 14px;
    --fs-15: 15px;
    --fs-16: 16px;
    --fs-17: 17px;
    --fs-18: 18px;
    --fs-19: 19px;
    --fs-20: 20px;
    --fs-21: 21px;
    --fs-22: 22px;
    --fs-23: 23px;
    --fs-24: 24px;
    --fs-25: 25px;
    --fs-26: 26px;
    --fs-27: 27px;
    --fs-28: 28px;
    --fs-29: 29px;
    --fs-30: 30px;
    --fs-40: 40px;
    --fs-64: 64px;
    --fs-9p5: 9.5px;
    --fs-10p5: 10.5px;
    --fs-10p6: 10.6px;
    --fs-11p5: 11.5px;
    --fs-12p5: 12.5px;
    --fs-13p5: 13.5px;
    --fs-14p5: 14.5px;
    --fs-15p5: 15.5px;

    --fw-500: 500;
    --fw-600: 600;
    --fw-700: 700;
    --fw-800: 800;

    --ls-0p01: 0.01em;
    --ls-0p02: 0.02em;
    --ls-0p04: 0.04em;
    --ls-0p06: 0.06em;
    --ls-0p1: 0.1em;
    --ls-0p12: 0.12em;
    --ls-0p14: 0.14em;
    --ls-0p18: 0.18em;
    --ls-0p2: 0.2em;
    --ls-0p24: 0.24em;
    --ls-n0p01: -0.01em;
    --ls-n0p04: -0.04em;

    --r-2: 2px;
    --r-3: 3px;
    --r-4: 4px;
    --r-5: 5px;
    --r-6: 6px;
    --r-7: 7px;
    --r-8: 8px;
    --r-9: 9px;
    --r-10: 10px;
    --r-11: 11px;
    --r-12: 12px;
    --r-13: 13px;
    --r-14: 14px;
    --r-15: 15px;
    --r-16: 16px;
    --r-17: 17px;
    --r-18: 18px;
    --r-19: 19px;
    --r-20: 20px;
    --r-21: 21px;
    --r-22: 22px;

    --gap-2: 2px;
    --gap-3: 3px;
    --gap-4: 4px;
    --gap-5: 5px;
    --gap-6: 6px;
    --gap-7: 7px;
    --gap-8: 8px;
    --gap-9: 9px;
    --gap-10: 10px;
    --gap-11: 11px;
    --gap-12: 12px;
    --gap-13: 13px;
    --gap-14: 14px;
    --gap-15: 15px;
    --gap-16: 16px;
    --gap-17: 17px;
    --gap-18: 18px;
    --gap-19: 19px;
    --gap-20: 20px;
    --gap-21: 21px;
    --gap-22: 22px;
    --gap-23: 23px;
    --gap-24: 24px;
    --gap-25: 25px;
    --gap-26: 26px;
    --gap-27: 27px;
    --gap-28: 28px;

    --blur-8: 8px;
    --blur-10: 10px;
    --blur-14: 14px;

    --cbx-w: min(400px, calc(100vw - 32px));
    --cbx-h: min(640px, calc(100vh - 140px));
    --cbx-left: 28px;
    --cbx-bottom: calc(96px + var(--safe-bottom));
    --cbx-radius: var(--radius);
    --cbx-bg: var(--white);
    --cbx-body-bg: var(--paper);
    --cbx-head-bg: linear-gradient(135deg, var(--navy), var(--navy-2));
    --cbx-user-bg: var(--navy);
    --cbx-link-bg: var(--teal-wash);
    --cbx-link-line: var(--teal-a40);
    --sh-chat: var(--sh-popup);
  }
/* ------------------------------------------------------------------------
   15. RESPONSIVE OVERRIDES
   ------------------------------------------------------------------------ */
@media (max-width: 960px) {
  :root {
    --vs-x1: 1;
    --vs-x2: 1.75;
    --lk-gx: 32px;
    --lk-gy: 32px;
    --lk-h: 200px;
  }
}
@media (max-width: 600px) {
  :root {
    --vs-w: min(66vw, 280px);
    --vs-x1: 0.92;
    --vs-reach: 1;
    --vs-pad-top: 36px;
    --vs-pad-bottom: 84px;
    --lk-gy: 30px;
    --lk-h: auto;
    --lk-x: 30px;
    --cbx-w: 100%;
    --cbx-left: 0px;
    --cbx-radius: 0px;
  }
}