/* ============================================================
   0. TOKENS
   ============================================================ */
    :root {
      --navy-950: #060f1c;
      --navy-900: #0a1b2e;
      --navy-850: #0d2135;
      --navy-800: #0f2740;
      --navy-700: #173a5c;
      --teal-700: #087160;
      --teal-600: #0b8f72;
      --teal-500: #12ab8a;
      --teal-400: #3ddcb5;
      --teal-300: #7eebcb;
      --teal-glow: rgba(61, 220, 181, .35);
      --white: #ffffff;
      --gray-50: #f6f9f8;
      --gray-100: #eef3f1;
      --gray-150: #e6ede9;
      --gray-200: #dbe5e0;
      --gray-400: #9bafa8;
      --gray-500: #6f8a82;
      --gray-600: #54655f;
      --ink: #0a1b2e;

      --font-display: 'Poppins', 'Plus Jakarta Sans', sans-serif;
      --font-body: 'Poppins', -apple-system, sans-serif;

      --radius-sm: 14px;
      --radius-md: 22px;
      --radius-lg: 34px;
      --radius-pill: 100px;

      --shadow-soft: 0 30px 80px -30px rgba(6, 15, 28, .35);
      --shadow-tight: 0 10px 30px -12px rgba(6, 15, 28, .28);
      --shadow-glow: 0 0 60px -10px var(--teal-glow);

      --ease-out: cubic-bezier(.16, .84, .44, 1);
      --ease-in-out: cubic-bezier(.65, 0, .35, 1);

      --section-pad: 160px;
    }

    @media (max-width:900px) {
      :root {
        --section-pad: 88px;
      }
    }

    /* ============================================================
   1. RESET
   ============================================================ */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: auto;
    }

    html,
    body {
      overflow-x: hidden;
      background: var(--white);
    }

    body {
      font-family: var(--font-body);
      color: var(--ink);
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      cursor: none;
    }

    img {
      max-width: 100%;
      display: block;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    button {
      font-family: inherit;
      cursor: none;
      border: none;
      background: none;
      color: inherit;
    }

    input,
    textarea,
    select {
      font-family: inherit;
      cursor: auto;
    }

    ul {
      list-style: none;
    }

    svg {
      display: block;
    }

    ::selection {
      background: var(--teal-400);
      color: var(--navy-950);
    }

    @media (hover:none) {

      body,
      button {
        cursor: auto;
      }
    }

    .container {
      width: 100%;
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 48px;
    }

    @media (max-width:1280px) {
      .container {
        max-width: 1280px;
      }
    }

    @media (max-width:1024px) {
      .container {
        padding: 0 32px;
      }
    }

    @media (max-width:640px) {
      .container {
        padding: 0 20px;
      }
    }

    h1,
    h2,
    h3,
    h4 {
      font-family: var(--font-display);
      font-weight: 600;
      line-height: 1.08;
      letter-spacing: -.01em;
      color: var(--navy-950);
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--teal-600);
    }

    .eyebrow::before {
      content: '';
      width: 26px;
      height: 1px;
      background: var(--teal-500);
    }

    .italic {
      font-style: italic;
      color: var(--teal-500);
      font-weight: 500;
    }

    /* Reduced motion */
    @media (prefers-reduced-motion:reduce) {
      * {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
      }
    }

    /* ============================================================
   2. CUSTOM CURSOR
   ============================================================ */
    .cursor-dot,
    .cursor-ring {
      position: fixed;
      top: 0;
      left: 0;
      pointer-events: none;
      z-index: 9999;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      will-change: transform;
    }

    .cursor-dot {
      width: 6px;
      height: 6px;
      background: var(--teal-400);
    }

    .cursor-ring {
      width: 38px;
      height: 38px;
      border: 1px solid rgba(61, 220, 181, .55);
      transition: width .25s var(--ease-out), height .25s var(--ease-out), border-color .25s, background .25s;
    }

    .cursor-ring.hovered {
      width: 64px;
      height: 64px;
      background: rgba(61, 220, 181, .08);
      border-color: var(--teal-400);
    }

    @media (hover:none) {

      .cursor-dot,
      .cursor-ring {
        display: none;
      }
    }

    /* ============================================================
   3. LOADER
   ============================================================ */
    #loader {
      position: fixed;
      inset: 0;
      z-index: 10000;
      background: radial-gradient(120% 120% at 50% 0%, var(--navy-850) 0%, var(--navy-950) 65%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 28px;
    }

    .loader-mark {
      position: relative;
      width: 84px;
      height: 84px;
    }

    .loader-mark svg {
      width: 100%;
      height: 100%;
    }

    .loader-mark .ring {
      fill: none;
      stroke: rgba(255, 255, 255, .12);
      stroke-width: 1;
    }

    .loader-mark .arc {
      fill: none;
      stroke: url(#loaderGrad);
      stroke-width: 1.4;
      stroke-linecap: round;
      stroke-dasharray: 220;
      stroke-dashoffset: 220;
    }

    .loader-word {
      font-family: var(--font-display);
      font-style: italic;
      font-size: 15px;
      letter-spacing: .05em;
      color: var(--teal-300);
      font-weight: 500;
    }

    .loader-bar {
      width: 220px;
      height: 1px;
      background: rgba(255, 255, 255, .14);
      position: relative;
      overflow: hidden;
    }

    .loader-bar .fill {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, var(--teal-500), var(--teal-300));
      transition: width .15s linear;
    }

    .loader-count {
      font-size: 12px;
      letter-spacing: .2em;
      color: rgba(255, 255, 255, .45);
      font-variant-numeric: tabular-nums;
    }

    #loader.done {
      opacity: 0;
      visibility: hidden;
      transition: opacity .9s var(--ease-out), visibility 0s .9s;
    }

    /* ============================================================
   4. SCROLL PROGRESS
   ============================================================ */
    #scroll-progress {
      position: fixed;
      top: 0;
      left: 0;
      height: 2px;
      width: 0%;
      z-index: 9998;
      background: linear-gradient(90deg, var(--teal-600), var(--teal-300));
    }

    /* ============================================================
   5. NAVBAR
   ============================================================ */
    #navbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 900;
      padding: 16px 0;
      background: #ffffff;
      border-bottom: 1px solid rgba(10, 27, 46, 0.08);
      box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.06);
      transition: padding .4s var(--ease-out), background .4s var(--ease-out), box-shadow .4s var(--ease-out);
    }

    @media (max-width:900px) {
      #navbar {
        padding: 14px 0;
      }
    }

    #navbar::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;
      background: #ffffff;
      backdrop-filter: blur(20px);
      transition: background .4s var(--ease-out), backdrop-filter .4s var(--ease-out), border-color .4s;
      border-bottom: 1px solid rgba(10, 27, 46, 0.08);
    }

    #navbar.scrolled {
      padding: 12px 0;
      box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.08);
    }

    #navbar.scrolled::before {
      background: rgba(255, 255, 255, 0.98);
      backdrop-filter: blur(20px) saturate(150%);
      border-bottom-color: rgba(10, 27, 46, 0.1);
    }

    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
    }

    .nav-logo {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .logo-img {
      height: 48px;
      width: auto;
      max-width: 240px;
      object-fit: contain;
      display: block;
    }

    .footer-logo-img {
      height: 56px;
      width: auto;
      max-width: 260px;
      object-fit: contain;
      display: block;
      margin-bottom: 16px;
    }

    .nav-center {
      display: flex;
      align-items: center;
      gap: 38px;
    }

    @media (max-width:1100px) {
      .nav-center {
        display: none;
      }
    }

    .nav-link {
      position: relative;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: .01em;
      color: #334155;
      padding: 8px 0;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: color .25s var(--ease-out);
    }

    .nav-link::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 0;
      height: 2px;
      background: var(--teal-600);
      transition: width .35s var(--ease-out);
    }

    .nav-link:hover {
      color: var(--teal-600);
    }

    .nav-link:hover::after {
      width: 100%;
    }

    .nav-link.active {
      color: var(--teal-600);
      font-weight: 600;
    }

    .nav-link.active::after {
      width: 100%;
      height: 2px;
      background: var(--teal-600);
    }

    .nav-link .caret {
      width: 9px;
      height: 9px;
      color: #334155;
      opacity: .85;
      transition: transform .3s;
    }

    .nav-item.has-mega:hover .caret {
      transform: rotate(180deg);
      color: var(--teal-600);
    }

    .nav-right {
      display: flex;
      align-items: center;
      gap: 18px;
    }

    .lang-select {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12.5px;
      font-weight: 600;
      color: #0a1b2e;
      padding: 9px 16px;
      border: 1px solid rgba(10, 27, 46, 0.16);
      background: #ffffff;
      border-radius: var(--radius-pill);
      position: relative;
    }

    .lang-select svg {
      width: 14px;
      height: 14px;
      color: #0a1b2e;
    }

    @media (max-width:1100px) {
      .lang-select .lbl {
        display: none;
      }
    }

    .icon-btn {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(255, 255, 255, .16);
      color: #fff;
    }

    .icon-btn svg {
      width: 15px;
      height: 15px;
    }

    @media (max-width:1100px) {
      .icon-btn.search-btn {
        display: none;
      }
    }

    .btn {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-family: var(--font-body);
      font-weight: 600;
      font-size: 13.5px;
      letter-spacing: .01em;
      padding: 14px 28px;
      border-radius: var(--radius-pill);
      white-space: nowrap;
      overflow: hidden;
      transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
    }

    .btn span {
      position: relative;
      z-index: 2;
    }

    .btn-primary {
      background: linear-gradient(135deg, var(--teal-500), var(--teal-600));
      color: #fff;
      box-shadow: 0 14px 30px -12px rgba(18, 171, 138, .55);
    }

    .btn-primary:hover {
      box-shadow: 0 18px 40px -10px rgba(18, 171, 138, .7);
    }

    .btn-ghost {
      background: rgba(255, 255, 255, .06);
      color: #fff;
      border: 1px solid rgba(255, 255, 255, .22);
      backdrop-filter: blur(6px);
    }

    .btn-ghost:hover {
      background: rgba(255, 255, 255, .14);
    }

    .btn-dark {
      background: var(--navy-950);
      color: #fff;
    }

    .btn-outline-navy {
      border: 1px solid rgba(10, 27, 46, .2);
      color: var(--navy-950);
    }

    .btn-outline-navy:hover {
      background: var(--navy-950);
      color: #fff;
    }

    .btn-sm {
      padding: 11px 20px;
      font-size: 12.5px;
    }

    .btn-block {
      width: 100%;
    }

    .magnetic {
      will-change: transform;
    }

    .nav-cta {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    @media (max-width:640px) {
      .nav-cta .btn-ghost {
        display: none;
      }
    }

    .burger {
      display: none;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 1px solid rgba(10, 27, 46, .16);
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 960;
    }

    @media (max-width:1100px) {
      .burger {
        display: flex;
      }
    }

    .burger span {
      width: 14px;
      height: 1px;
      background: #0a1b2e;
      position: relative;
      transition: background .2s;
    }

    .burger span::before,
    .burger span::after {
      content: '';
      position: absolute;
      width: 14px;
      height: 1px;
      background: #0a1b2e;
      left: 0;
      transition: transform .3s var(--ease-out), top .3s var(--ease-out);
    }

    .burger span::before {
      top: -4px;
    }

    .burger span::after {
      top: 4px;
    }

    .burger.open span {
      background: transparent;
    }

    .burger.open span::before {
      top: 0;
      transform: rotate(45deg);
    }

    .burger.open span::after {
      top: 0;
      transform: rotate(-45deg);
    }

    @media (max-width:1100px) {
      .nav-center {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 26px;
        position: fixed;
        inset: 0;
        padding: 110px 20px 50px;
        overflow-y: auto;
        background: rgba(6, 15, 28, .98);
        backdrop-filter: blur(20px);
        z-index: 940;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-12px);
        transition: opacity .4s var(--ease-out), transform .4s var(--ease-out), visibility 0s .4s;
      }

      .nav-center.mobile-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
      }

      .nav-center .nav-link {
        font-size: 20px;
        font-family: var(--font-display);
        font-style: italic;
        color: #fff;
      }

      .nav-item.has-mega {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      /* Mobile: no dropdowns at all — the parent link opens its page. */
      .nav-center .mega {
        display: none !important;
      }

      .mega-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 0;
        gap: 22px 16px;
        text-align: center;
      }

      .mega-col a {
        font-size: 13px;
        padding: 6px 0;
      }

      .nav-center .caret {
        display: none;
      }
    }

    /* Mega menu */
    .mega {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      padding-top: 86px;
      background: #ffffff;
      backdrop-filter: blur(20px);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-8px);
      transition: opacity .35s var(--ease-out), transform .35s var(--ease-out), visibility 0s .35s;
      z-index: 850;
      border-bottom: 1px solid rgba(10, 27, 46, .08);
      box-shadow: 0 20px 40px -15px rgba(0, 0, 0, .08);
      max-height: 100vh;
      overflow-y: auto;
    }

    .nav-item.has-mega:hover .mega {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
    }

    .mega-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 20px;
      padding: 40px 40px 48px;
      max-width: 1440px;
      margin: 0 auto;
    }

    @media (max-width:1500px) {
      .mega-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 28px 24px;
      }
    }

    .mega-col h4 {
      font-family: var(--font-body);
      font-size: 11.5px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--teal-600);
      font-weight: 700;
      margin-bottom: 18px;
    }

    .mega-col a {
      display: block;
      font-size: 14px;
      color: #334155;
      padding: 9px 0;
      transition: color .25s, transform .25s;
    }

    .mega-col a:hover {
      color: var(--teal-600);
      transform: translateX(4px);
    }

    /* Languages dropdown — denser, grouped by region */
    .mega-languages .mega-grid {
      grid-template-columns: repeat(5, 1fr);
    }

    .mega-languages .mega-col a {
      font-size: 13.5px;
      padding: 7px 0;
    }

    .mega-languages .mega-all {
      font-weight: 600;
      color: var(--teal-600);
    }

    @media (max-width:1500px) {
      .mega-languages .mega-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }


    /* ============================================================
   6. HERO SLIDER
   ============================================================ */
    #hero {
      position: relative;
      min-height: 100svh;
      display: flex;
      align-items: center;
      overflow: hidden;
      isolation: isolate;
      color: var(--ink);
      background:
        linear-gradient(142deg, rgba(234, 241, 245, .72) 0%, rgba(255, 255, 255, 0) 31%),
        linear-gradient(28deg, rgba(231, 247, 247, .66) 0%, rgba(255, 255, 255, 0) 36%),
        linear-gradient(180deg, #ffffff 0%, #f8fbfc 100%);
      /* bottom padding reserves the strip used by .hero-chrome-bar (arrows + scroll cue) */
      padding: 104px 0 124px;
    }

    #hero::before {
      content: '';
      position: absolute;
      top: 78px;
      right: -8vw;
      width: min(760px, 58vw);
      height: calc(100% - 96px);
      background:
        linear-gradient(118deg, rgba(255, 255, 255, 0) 0 36%, rgba(220, 231, 238, .42) 36% 36.7%, rgba(255, 255, 255, 0) 36.7% 100%),
        linear-gradient(42deg, rgba(255, 255, 255, 0) 0 55%, rgba(18, 171, 138, .08) 55% 55.8%, rgba(255, 255, 255, 0) 55.8% 100%);
      clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 84%);
      pointer-events: none;
      z-index: 1;
    }

    #hero::after {
      content: '';
      position: absolute;
      inset: auto 0 0;
      height: 1px;
      background: linear-gradient(90deg, rgba(10, 27, 46, 0), rgba(10, 27, 46, .1), rgba(10, 27, 46, 0));
      pointer-events: none;
      z-index: 15;
    }

    .hero-slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      visibility: hidden;
      transition: opacity 1.1s var(--ease-in-out), visibility 0s 1.1s;
      display: flex;
      align-items: center;
    }

    .hero-slide.active {
      opacity: 1;
      visibility: visible;
      transition: opacity 1.1s var(--ease-in-out);
      z-index: 2;
    }

    .hero-slide .bg {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      opacity: .86;
      transform: scale(1.03);
      transition: transform 7s linear;
    }

    .hero-slide.active .bg {
      transform: scale(1);
    }

    .hero-slide .veil {
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .58));
    }

    .hero-slide .grain {
      display: none;
    }

    .hero-inner {
      position: relative;
      z-index: 5;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, .92fr) minmax(360px, 1.08fr);
      width: 100%;
      align-items: center;
      gap: clamp(28px, 4vw, 58px);
      position: relative;
      z-index: 5;
    }

    .hero-content-col {
      position: relative;
      width: 100%;
      min-height: 404px;
      display: flex;
      align-items: center;
      z-index: 6;
    }

    .hero-text-slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      display: flex;
      flex-direction: column;
      justify-content: center;
      transition: opacity .9s var(--ease-in-out), visibility 0s .9s;
    }

    .hero-text-slide.active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transition: opacity .9s var(--ease-in-out);
    }

    .hero-eyebrow {
      color: var(--teal-600);
      margin-bottom: 11px;
      font-size: 11.5px;
    }

    .hero-eyebrow::before {
      background: linear-gradient(90deg, var(--teal-600), var(--teal-300));
    }

    .hero-title {
      color: var(--navy-950);
      font-size: clamp(36px, 4.35vw, 64px);
      margin: 0 0 14px;
      line-height: 1.05;
      letter-spacing: 0;
      font-weight: 800;
      max-width: 720px;
    }

    .hero-title .line {
      display: block;
    }

    .hero-title .line span {
      display: inline-block;
      transform: translateY(0%);
    }

    .hero-title .line+.line span {
      color: transparent;
      background: linear-gradient(100deg, var(--teal-700) 0%, var(--teal-500) 52%, #1783a1 100%);
      -webkit-background-clip: text;
      background-clip: text;
    }

    .hero-sub {
      font-family: var(--font-display);
      font-style: italic;
      font-weight: 600;
      font-size: clamp(16px, 1.25vw, 21px);
      color: var(--teal-700);
      margin-bottom: 16px;
      line-height: 1.35;
    }

    .hero-desc {
      color: #52616f;
      font-size: clamp(14px, .95vw, 15.2px);
      max-width: 610px;
      margin-bottom: 28px;
      line-height: 1.72;
    }

    .hero-ctas {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 24px;
    }

    .hero-ctas .btn {
      min-height: 50px;
      padding: 0 24px;
      border-radius: 13px;
      font-size: 13.2px;
      letter-spacing: 0;
      box-shadow: none;
      transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), color .35s var(--ease-out), background .35s var(--ease-out), border-color .35s var(--ease-out);
    }

    .hero-ctas .btn-primary {
      color: #fff;
      border: 1px solid rgba(11, 143, 114, .16);
      background: linear-gradient(135deg, #087160 0%, #12ab8a 50%, #1aa6c0 100%);
      box-shadow: 0 18px 34px -16px rgba(8, 113, 96, .65);
    }

    .hero-ctas .btn-primary::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(90deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0));
      opacity: 0;
      transform: translateX(-35%);
      transition: opacity .35s var(--ease-out), transform .45s var(--ease-out);
    }

    .hero-ctas .btn-primary:hover {
      transform: translateY(-3px);
      box-shadow: 0 24px 44px -16px rgba(8, 113, 96, .72);
    }

    .hero-ctas .btn-primary:hover::after {
      opacity: 1;
      transform: translateX(0);
    }

    .hero-ctas .btn-ghost {
      color: var(--navy-950);
      background: rgba(255, 255, 255, .82);
      border: 1px solid rgba(10, 27, 46, .16);
      backdrop-filter: blur(10px);
      box-shadow: 0 16px 36px -28px rgba(10, 27, 46, .42);
    }

    .hero-ctas .btn-ghost:hover {
      color: #fff;
      background: var(--teal-700);
      border-color: var(--teal-700);
      transform: translateY(-3px);
      box-shadow: 0 22px 40px -20px rgba(8, 113, 96, .5);
    }

    .hero-ctas .btn:focus-visible,
    .hero-arrow:focus-visible,
    .hero-dot:focus-visible {
      outline: 3px solid rgba(18, 171, 138, .28);
      outline-offset: 3px;
    }

    .hero-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 16px;
      max-width: 610px;
    }

    .hero-tag {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 22px;
      font-size: 11.8px;
      font-weight: 600;
      letter-spacing: 0;
      color: #506171;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      backdrop-filter: none;
    }

    .hero-tag::before {
      content: '\2713';
      width: 17px;
      height: 17px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      color: #fff;
      font-size: 10px;
      line-height: 1;
      background: linear-gradient(135deg, var(--teal-600), var(--teal-400));
      box-shadow: 0 8px 18px -10px rgba(8, 113, 96, .7);
    }

    .hero-globe-col {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      min-height: 430px;
      pointer-events: none;
    }

    .hero-globe-wrapper {
      position: relative;
      width: 100%;
      max-width: 480px;
      aspect-ratio: 1/1;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: auto;
      perspective: 1100px;
    }

    .hero-globe-wrapper::before {
      content: '';
      position: absolute;
      inset: 4% 0 12%;
      border-radius: 50%;
      background:
        radial-gradient(circle at 42% 30%, rgba(255, 255, 255, .9), rgba(238, 248, 249, .62) 34%, rgba(211, 229, 236, .24) 57%, rgba(255, 255, 255, 0) 74%);
      filter: blur(9px);
      transform: translate3d(0, 8px, 0);
      z-index: 1;
      pointer-events: none;
    }

    .hero-globe-wrapper::after {
      content: '';
      position: absolute;
      left: 50%;
      bottom: 8%;
      width: 55%;
      height: 8.5%;
      border-radius: 50%;
      background: radial-gradient(ellipse at center, rgba(31, 60, 72, .2), rgba(31, 60, 72, .08) 48%, rgba(31, 60, 72, 0) 75%);
      filter: blur(11px);
      transform: translateX(-50%);
      z-index: 2;
      pointer-events: none;
    }

    #globe-canvas {
      position: relative;
      width: 100% !important;
      height: 100% !important;
      max-width: 480px;
      max-height: 480px;
      z-index: 4;
      pointer-events: auto;
      opacity: .98;
      filter: drop-shadow(0 34px 42px rgba(31, 60, 72, .14));
    }

    .globe-sterling-mark {
      display: block;
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 5;
      width: clamp(62px, 18%, 92px);
      height: clamp(103px, 30%, 153px);
      aspect-ratio: 230 / 382;
      transform: translate(-50%, -50%);
      overflow: hidden;
      opacity: .9;
      pointer-events: none;
      filter: drop-shadow(0 12px 18px rgba(8, 113, 96, .16)) drop-shadow(0 0 20px rgba(18, 171, 138, .14));
    }

    .globe-sterling-mark-fill {
      flood-color: var(--teal-600);
    }
    .globe-info-card {
      position: absolute;
      z-index: 7;
      min-width: 160px;
      min-height: 50px;
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 10px 14px;
      border-radius: 14px;
      color: #183242;
      background: rgba(255, 255, 255, .68);
      border: 1px solid rgba(255, 255, 255, .88);
      box-shadow: 0 24px 54px -28px rgba(10, 27, 46, .42);
      backdrop-filter: blur(16px) saturate(155%);
      pointer-events: none;
      will-change: transform;
    }

    .globe-info-card span:last-child {
      font-size: 11.5px;
      font-weight: 700;
      line-height: 1.22;
      white-space: nowrap;
    }

    .globe-card-icon {
      width: 30px;
      height: 30px;
      border-radius: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      color: var(--teal-700);
      background: linear-gradient(145deg, rgba(18, 171, 138, .14), rgba(23, 131, 161, .1));
      border: 1px solid rgba(18, 171, 138, .14);
    }

    .globe-card-icon svg {
      width: 15.5px;
      height: 15.5px;
    }

    .globe-card-accuracy {
      top: 15%;
      left: -1%;
    }

    .globe-card-compliant {
      top: 18%;
      right: -2%;
    }

    .globe-card-languages {
      bottom: 24%;
      left: -7%;
    }

    .globe-card-delivery {
      right: 1%;
      bottom: 15%;
    }

    .hero-chrome {
      position: absolute;
      z-index: 6;
    }

    .hero-chrome-bar {
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      pointer-events: none;
      z-index: 6;
      width: 100%;
    }

    /* Short viewports: drop the chrome bar rather than let it ride over the copy. */
    @media (min-width:641px) and (max-height:700px) {
      .hero-chrome-bar {
        display: none;
      }
    }

    .hero-chrome-bar .hero-arrows,
    .hero-chrome-bar .hero-scroll-cue {
      position: relative;
      left: auto;
      right: auto;
      bottom: auto;
      pointer-events: auto;
    }

    .hero-dots {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: max(48px, calc((100% - 1440px)/2 + 48px));
      display: flex;
      flex-direction: column;
      gap: 16px;
      z-index: 6;
    }

    .hero-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      border: 1px solid rgba(10, 27, 46, .18);
      position: relative;
      cursor: pointer;
      background: rgba(255, 255, 255, .85);
      box-shadow: 0 4px 14px -8px rgba(10, 27, 46, .45);
    }

    .hero-dot::after {
      content: '';
      position: absolute;
      inset: -6px;
      border-radius: 50%;
      border: 1px solid transparent;
    }

    .hero-dot.active {
      background: var(--teal-600);
      border-color: var(--teal-600);
      box-shadow: 0 0 0 5px rgba(18, 171, 138, .14);
    }

    .hero-arrows {
      display: flex;
      gap: 12px;
      z-index: 6;
    }

    .hero-arrow {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      border: 1px solid rgba(10, 27, 46, .12);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--navy-950);
      cursor: pointer;
      background: rgba(255, 255, 255, .76);
      backdrop-filter: blur(12px);
      box-shadow: 0 16px 34px -24px rgba(10, 27, 46, .48);
      transition: background .3s, border-color .3s, color .3s, transform .3s var(--ease-out);
    }

    .hero-arrow:hover {
      color: #fff;
      background: var(--teal-700);
      border-color: var(--teal-700);
      transform: translateY(-2px);
    }

    .hero-arrow svg {
      width: 16px;
      height: 16px;
    }

    .hero-scroll-cue {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      color: rgba(10, 27, 46, .46);
      font-size: 11px;
      letter-spacing: .14em;
      text-transform: uppercase;
      z-index: 6;
    }

    .hero-scroll-cue .stem {
      width: 1px;
      height: 46px;
      background: rgba(10, 27, 46, .16);
      position: relative;
      overflow: hidden;
    }

    .hero-scroll-cue .stem::after {
      content: '';
      position: absolute;
      top: -100%;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--teal-500);
      animation: scrollcue 2.2s ease-in-out infinite;
    }

    @keyframes scrollcue {
      0% {
        top: -100%;
      }

      60% {
        top: 100%;
      }

      100% {
        top: 100%;
      }
    }

    .hero-counter {
      left: 48px;
      top: 120px;
      font-size: 12px;
      letter-spacing: .1em;
      color: rgba(10, 27, 46, .48);
      font-variant-numeric: tabular-nums;
      z-index: 6;
    }

    #particles-canvas {
      position: absolute;
      inset: 0;
      z-index: 3;
      pointer-events: none;
      opacity: .18;
    }

    @media (max-width:1280px) {
      .hero-dots {
        right: max(48px, calc((100% - 1280px)/2 + 48px));
      }
    }

    @media (max-width:1100px) {
      #hero {
        min-height: auto;
        padding: 96px 0 108px;
      }

      #hero::before {
        top: auto;
        right: -22vw;
        bottom: 20px;
        width: 92vw;
        height: 44%;
      }

      .hero-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        padding-top: 12px;
      }

      .hero-content-col {
        min-height: 372px;
      }

      .hero-text-slide {
        position: relative;
        display: none;
      }

      .hero-text-slide.active {
        display: flex;
      }

      .hero-title {
        max-width: 720px;
      }

      .hero-globe-col {
        min-height: 360px;
        order: 2;
      }

      .hero-globe-wrapper,
      #globe-canvas {
        max-width: 420px;
        max-height: 420px;
      }

      .globe-card-accuracy {
        left: 0;
      }

      .globe-card-compliant {
        right: 0;
      }

      .globe-card-languages {
        left: -2%;
      }

      .hero-dots {
        right: 32px;
      }

      .hero-scroll-cue,
      .hero-counter {
        display: none;
      }
    }

    @media (max-width:640px) {
      #hero {
        padding: 96px 0 36px;
      }

      #hero::before {
        right: -34vw;
        width: 118vw;
        height: 40%;
        opacity: .72;
      }

      .hero-grid {
        gap: 24px;
      }

      .hero-content-col {
        min-height: 0;
      }

      .hero-title {
        font-size: clamp(34px, 12vw, 46px);
        line-height: 1.02;
        margin-bottom: 14px;
      }

      .hero-desc {
        max-width: 100%;
        margin-bottom: 24px;
      }

      .hero-ctas {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-bottom: 22px;
      }

      .hero-ctas .btn {
        width: 100%;
        min-height: 50px;
      }

      .hero-tags {
        gap: 9px 12px;
      }

      .hero-tag {
        font-size: 11.5px;
      }

      .hero-tag::before {
        width: 16px;
        height: 16px;
        font-size: 9.5px;
      }

      .hero-globe-col {
        min-height: 360px;
      }

      .hero-globe-wrapper,
      #globe-canvas {
        max-width: min(350px, 100%);
        max-height: 350px;
      }

      .globe-info-card {
        min-width: 0;
        min-height: 42px;
        gap: 7px;
        padding: 8px 10px;
        border-radius: 12px;
      }

      .globe-info-card span:last-child {
        font-size: 10.2px;
        white-space: normal;
      }

      .globe-card-icon {
        width: 26px;
        height: 26px;
        border-radius: 8px;
      }

      .globe-card-icon svg {
        width: 14px;
        height: 14px;
      }

      .globe-card-accuracy {
        top: 3%;
        left: 1%;
      }

      .globe-card-compliant {
        top: 11%;
        right: 0;
      }

      .globe-card-languages {
        bottom: 8%;
        left: 0;
      }

      .globe-card-delivery {
        right: 2%;
        bottom: 0;
      }

      .hero-dots {
        top: auto;
        right: 50%;
        bottom: 16px;
        transform: translateX(50%);
        flex-direction: row;
        gap: 12px;
      }

      .hero-chrome-bar {
        display: none;
      }
    }

    @media (max-width:420px) {
      .globe-info-card {
        max-width: 136px;
      }

      .globe-card-accuracy {
        top: 4%;
      }

      .globe-card-compliant {
        top: 18%;
      }
    }
    /* ============================================================
   7. SECTION SHELL
   ============================================================ */
    .section {
      padding: var(--section-pad) 0;
      position: relative;
    }

    .section-dark {
      background: var(--navy-950);
      color: #fff;
    }

    .section-dark h2,
    .section-dark h3,
    .section-dark h4 {
      color: #fff;
    }

    .section-light {
      background: var(--gray-50);
    }

    .section-white {
      background: #fff;
    }

    .section-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 40px;
      margin-bottom: 64px;
    }

    @media (max-width:800px) {
      .section-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
      }
    }

    .section-head h2 {
      font-size: clamp(30px, 4vw, 50px);
      margin-top: 16px;
      max-width: 640px;
    }

    .section-head p {
      color: var(--gray-600);
      max-width: 380px;
      font-size: 15px;
      line-height: 1.7;
    }

    .section-dark .section-head p {
      color: rgba(255, 255, 255, .6);
    }

    .reveal {
      opacity: 0;
      transform: translateY(36px);
    }

    /* ============================================================
   8. BENTO GRID — WHY CHOOSE US
   ============================================================ */
    .bento {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-auto-rows: 170px;
      gap: 18px;
    }

    @media (max-width:1000px) {
      .bento {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 160px;
      }
    }

    @media (max-width:560px) {
      .bento {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
      }
    }

    .bento-card {
      position: relative;
      border-radius: var(--radius-md);
      padding: 26px;
      background: var(--navy-900);
      color: #fff;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border: 1px solid rgba(255, 255, 255, .06);
      transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
    }

    .bento-card::before {
      content: '';
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity .5s;
      background: radial-gradient(120px 120px at var(--mx, 50%) var(--my, 50%), rgba(61, 220, 181, .28), transparent 70%);
    }

    .bento-card:hover::before {
      opacity: 1;
    }

    .bento-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-glow);
    }

    .bento-card.light {
      background: #fff;
      color: var(--navy-950);
      border-color: var(--gray-150);
      box-shadow: var(--shadow-tight);
    }

    .bento-card .b-icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: rgba(61, 220, 181, .14);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .bento-card.light .b-icon {
      background: var(--gray-100);
    }

    .bento-card .b-icon svg {
      width: 20px;
      height: 20px;
      color: var(--teal-400);
    }

    .bento-card h4 {
      font-family: var(--font-body);
      font-weight: 700;
      font-size: 16px;
      margin-top: 14px;
      color: #ffffff;
    }

    .bento-card.light h4 {
      color: var(--navy-950);
    }

    .bento-card p {
      font-size: 12.5px;
      color: rgba(255, 255, 255, .85);
      margin-top: 6px;
      line-height: 1.6;
    }

    .bento-card.light p {
      color: var(--gray-600);
    }

    .bento-card.wide {
      grid-column: span 2;
    }

    .bento-card.tall {
      grid-row: span 2;
    }

    @media (max-width:560px) {
      .bento-card.wide {
        grid-column: span 1;
      }

      .bento-card.tall {
        grid-row: span 1;
      }
    }

    /* ============================================================
   9. SERVICES — 3D TILT CARDS
   ============================================================ */
    .services-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 22px;
    }

    @media (max-width:1050px) {
      .services-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

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

    .service-card {
      perspective: 1000px;
      scroll-margin-top: 110px;
    }

    .service-card-inner {
      position: relative;
      border-radius: var(--radius-md);
      padding: 1px;
      height: 100%;
      background: linear-gradient(155deg, rgba(18, 171, 138, .5), rgba(10, 27, 46, .06) 40%, rgba(18, 171, 138, .25));
      transition: transform .15s var(--ease-out);
      transform-style: preserve-3d;
    }

    .service-card-body {
      background: #fff;
      border-radius: calc(var(--radius-md) - 1px);
      padding: 32px 26px;
      height: 100%;
      display: flex;
      flex-direction: column;
      gap: 18px;
      min-height: 290px;
      transform: translateZ(20px);
    }

    .service-num {
      font-family: var(--font-display);
      font-style: italic;
      color: var(--gray-200);
      font-size: 34px;
      line-height: 1;
    }

    .service-icon {
      width: 52px;
      height: 52px;
      border-radius: 15px;
      background: linear-gradient(145deg, var(--teal-500), var(--teal-700));
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 14px 28px -12px rgba(18, 171, 138, .55);
    }

    .service-icon svg {
      width: 23px;
      height: 23px;
      color: #fff;
    }

    .service-card h3 {
      font-size: 20px;
    }

    .service-card p {
      color: var(--gray-600);
      font-size: 13.5px;
      line-height: 1.7;
      flex: 1;
    }

    .service-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .service-tags span {
      font-size: 10.5px;
      padding: 5px 10px;
      border-radius: var(--radius-pill);
      background: var(--gray-100);
      color: var(--gray-600);
    }

    .service-link {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 600;
      font-size: 13px;
      color: var(--navy-950);
    }

    .service-link svg {
      width: 14px;
      height: 14px;
      transition: transform .3s;
    }

    .service-card:hover .service-link svg {
      transform: translateX(4px);
    }

    /* ============================================================
   10. HOW IT WORKS — TIMELINE
   ============================================================ */
    .timeline {
      position: relative;
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 22px;
    }

    @media (max-width:900px) {
      .timeline {
        grid-template-columns: 1fr;
        gap: 0;
      }
    }

    .timeline-track {
      position: absolute;
      top: 29px;
      left: 0;
      right: 0;
      height: 1px;
      background: var(--gray-200);
    }

    .timeline-track-fill {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, var(--teal-600), var(--teal-300));
    }

    @media (max-width:900px) {
      .timeline-track {
        top: 0;
        bottom: 0;
        left: 29px;
        right: auto;
        width: 1px;
        height: auto;
      }

      .timeline-track-fill {
        width: 100%;
        height: 0%;
      }
    }

    .tl-step {
      position: relative;
      padding-top: 76px;
    }

    @media (max-width:900px) {
      .tl-step {
        padding: 0 0 44px 76px;
      }

      .tl-step:last-child {
        padding-bottom: 0;
      }
    }

    .tl-dot {
      position: absolute;
      top: 0;
      left: 0;
      width: 58px;
      height: 58px;
      border-radius: 50%;
      background: #fff;
      border: 1px solid var(--gray-200);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-style: italic;
      color: var(--teal-600);
      font-size: 18px;
      transition: background .4s, color .4s, border-color .4s, box-shadow .4s;
    }

    .tl-step.on .tl-dot {
      background: linear-gradient(145deg, var(--teal-500), var(--teal-700));
      color: #fff;
      border-color: transparent;
      box-shadow: 0 10px 26px -8px rgba(18, 171, 138, .6);
    }

    .tl-step h4 {
      font-size: 16.5px;
      margin-bottom: 8px;
    }

    .tl-step p {
      font-size: 13px;
      color: var(--gray-600);
      line-height: 1.65;
    }

    /* ============================================================
   11. TRUST - LIVE UAE COVERAGE VISUALIZATION
   ============================================================ */
    #trust {
      overflow: hidden;
    }

    .network-stage {
      position: relative;
      width: 100%;
      min-height: clamp(600px, 62vw, 750px);
      perspective: 1400px;
    }

    .network-tilt {
      position: relative;
      width: 100%;
      height: clamp(600px, 62vw, 750px);
      min-height: 600px;
      border-radius: var(--radius-lg);
      overflow: hidden;
      background: radial-gradient(130% 110% at 28% 0%, rgba(15, 39, 64, .9), var(--navy-950) 62%);
      transform: none;
      box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .75), inset 0 0 0 1px rgba(255, 255, 255, .03);
    }

    @media (max-width:1024px) {
      .network-stage,
      .network-tilt {
        min-height: 760px;
        height: clamp(760px, 88vw, 800px);
      }
    }

    @media (max-width:820px) and (min-width:701px) {
      .network-stage,
      .network-tilt {
        min-height: 840px;
        height: 840px;
      }
    }

    @media (max-width:700px) {
      .network-stage,
      .network-tilt {
        min-height: 720px;
        height: 720px;
        transform: none;
      }
    }

    @media (max-width:480px) {
      .network-stage,
      .network-tilt {
        min-height: 720px;
        height: 720px;
      }
    }

    .network-tilt::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      background: radial-gradient(120% 90% at 50% 105%, transparent 45%, rgba(6, 15, 28, .6) 100%);
    }

    #networkCanvas {
      position: absolute;
      inset: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      display: block;
      cursor: default;
    }

    #labelsContainer {
      position: absolute;
      inset: 0;
      z-index: 8;
      pointer-events: none;
    }

    .route-label {
      position: absolute;
      z-index: 8;
      transform: translate3d(0, 0, 0);
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 16px 8px 8px;
      border-radius: var(--radius-pill);
      background: rgba(9, 22, 38, .78);
      border: 1px solid rgba(255, 255, 255, .18);
      backdrop-filter: blur(12px);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      white-space: nowrap;
      box-shadow: 0 16px 36px -14px rgba(0, 0, 0, .6);
      transition: left .65s var(--ease-out), top .65s var(--ease-out), filter 0.4s, opacity .35s;
      will-change: transform, opacity;
    }

    .route-label.active {
      opacity: 1;
      visibility: visible;
      z-index: 12;
      animation: routeLabelFloat var(--float-dur, 8s) ease-in-out var(--float-delay, 0s) infinite;
      border-color: rgba(61, 220, 181, .65);
      box-shadow: 0 0 26px -4px rgba(61, 220, 181, .5);
    }

    .route-label.completed {
      opacity: .78;
      visibility: visible;
      z-index: 8;
      animation: routeLabelFloat var(--float-dur, 9s) ease-in-out var(--float-delay, 0s) infinite;
      border-color: rgba(255, 255, 255, .14);
      box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .45);
    }

    @keyframes routeLabelFloat {
      0%, 100% {
        transform: translate3d(0, 0, 0);
      }

      50% {
        transform: translate3d(var(--drift-x, 8px), var(--drift-y, -8px), 0);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .route-label.active,
      .route-label.completed {
        animation: none;
      }
    }

    .route-label .rl-flag {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: rgba(61, 220, 181, .16);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: .04em;
      flex-shrink: 0;
    }

    .route-label strong {
      display: block;
      font-size: 12.5px;
      color: #fff;
      font-family: var(--font-body);
      font-weight: 700;
    }

    .route-label span {
      display: block;
      font-size: 10px;
      color: var(--teal-300);
      letter-spacing: .03em;
      margin-top: 1px;
    }

    .map-tooltip {
      position: absolute;
      z-index: 15;
      transform: translate(-50%, -118%);
      padding: 12px 16px;
      border-radius: 14px;
      background: rgba(9, 22, 38, .88);
      border: 1px solid rgba(255, 255, 255, .16);
      backdrop-filter: blur(12px);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      min-width: 150px;
      transition: opacity .22s, visibility 0s .22s;
    }

    .map-tooltip.show {
      opacity: 1;
      visibility: visible;
      transition: opacity .22s;
    }

    .map-tooltip .tt-title {
      font-size: 12.5px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .map-tooltip .tt-row {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      font-size: 11px;
      color: rgba(255, 255, 255, .55);
      padding: 2px 0;
    }

    .map-tooltip .tt-row b {
      color: var(--teal-300);
      font-weight: 600;
    }

    .network-stats-panel {
      position: absolute;
      top: 16px;
      left: 16px;
      right: 16px;
      z-index: 14;
      width: auto;
      background: rgba(9, 22, 38, .75);
      border: 1px solid rgba(255, 255, 255, .16);
      backdrop-filter: blur(18px);
      border-radius: 5px !important;
      padding: 12px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .6);
      transition: all .3s var(--ease-out);
    }

    .ns-head {
      display: flex;
      align-items: center;
      gap: 10px;
      padding-bottom: 0;
      margin-bottom: 0;
      border-bottom: none;
      padding-right: 18px;
      border-right: 1px solid rgba(255, 255, 255, .12);
      flex-shrink: 0;
    }

    .ns-flag {
      min-width: 34px;
      height: 34px;
      padding: 0 8px;
      border-radius: 50%;
      background: rgba(61, 220, 181, .16);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 10px;
      font-weight: 700;
      line-height: 1;
      letter-spacing: .04em;
    }

    .ns-country {
      color: #fff;
      font-size: 12.5px;
      font-weight: 700;
      font-family: var(--font-body);
      white-space: nowrap;
    }

    .ns-sub {
      font-size: 9.5px;
      color: rgba(255, 255, 255, .45);
      margin-top: 2px;
      letter-spacing: .02em;
      white-space: nowrap;
    }

    .ns-grid {
      display: flex;
      align-items: center;
      justify-content: space-around;
      gap: 20px;
      flex: 1;
      margin: 0 8px;
    }

    .ns-item {
      text-align: center;
      flex: 1;
    }

    .ns-num {
      font-family: var(--font-display);
      font-size: 17px;
      color: var(--teal-300);
      min-height: 21px;
      font-weight: 600;
      line-height: 1.2;
    }

    .ns-label {
      font-size: 9px;
      color: rgba(255, 255, 255, .48);
      margin-top: 2px;
      letter-spacing: .04em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .ns-route {
      margin-top: 0;
      padding-top: 0;
      border-top: none;
      padding-left: 18px;
      border-left: 1px solid rgba(255, 255, 255, .12);
      font-size: 11.5px;
      color: rgba(255, 255, 255, .55);
      letter-spacing: .03em;
      flex-shrink: 0;
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .ns-route span {
      color: var(--teal-300);
      font-weight: 600;
    }

    @media (max-width:960px) {
      .network-stats-panel {
        border-radius: var(--radius-md);
        padding: 12px 16px;
        gap: 12px;
      }

      .ns-grid {
        gap: 12px;
      }

      .ns-num {
        font-size: 15px;
      }
    }

    @media (max-width:768px) {
      .network-stats-panel {
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        margin-top: 16px;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        border-radius: var(--radius-md);
        padding: 16px;
      }

      .ns-head {
        padding-right: 0;
        border-right: none;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
        justify-content: center;
      }

      .ns-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        margin: 0;
        gap: 8px;
      }

      .ns-route {
        padding-left: 0;
        border-left: none;
        padding-top: 10px;
        border-top: 1px solid rgba(255, 255, 255, .1);
        justify-content: center;
      }
    }

    @media (max-width:480px) {
      .ns-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px 8px;
      }
    }

    @media (max-width:960px) {
      .route-label {
        max-width: 220px;
        white-space: normal;
      }
    }

    @media (max-width:700px) {
      .route-label {
        max-width: 170px;
        padding: 7px 10px 7px 7px;
        gap: 8px;
        white-space: normal;
      }

      .route-label.completed {
        opacity: 0;
        visibility: hidden;
      }

      .route-label strong {
        font-size: 11px;
      }

      .route-label span {
        display: none;
      }
    }


    .network-tagline {
      text-align: center;
      margin-top: 58px;
      font-family: var(--font-display);
      font-style: italic;
      font-size: clamp(17px, 2.3vw, 27px);
      color: rgba(255, 255, 255, .85);
    }

    .network-tagline span {
      display: inline-block;
      opacity: 0;
      transform: translateY(14px);
      margin: 0 5px;
    }

    /* ============================================================
   12. CLIENTS MARQUEE
   ============================================================ */
    .marquee-wrap {
      overflow: hidden;
      position: relative;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
      mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    }

    .marquee-track {
      display: flex;
      gap: 72px;
      width: max-content;
      animation: marquee 32s linear infinite;
      align-items: center;
    }

    .marquee-wrap:hover .marquee-track {
      animation-play-state: paused;
    }

    @keyframes marquee {
      from {
        transform: translateX(0);
      }

      to {
        transform: translateX(-50%);
      }
    }

    .client-logo {
      font-family: var(--font-display);
      font-style: italic;
      font-size: 22px;
      color: var(--gray-400);
      white-space: nowrap;
      letter-spacing: .01em;
    }

    .sample-note {
      text-align: center;
      font-size: 11.5px;
      color: var(--gray-500);
      margin-top: 26px;
      letter-spacing: .03em;
    }

    /* ============================================================
   13. AUTHORITY BADGES
   ============================================================ */
    .authority-row {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 16px;
    }

    @media (max-width:1024px) {
      .authority-row {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media (max-width:640px) {
      .authority-row {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    .authority-badge {
      border: 1px solid var(--gray-200);
      border-radius: var(--radius-md);
      padding: 24px 16px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      background: #fff;
      transition: transform .4s var(--ease-out), border-color .4s, box-shadow .4s;
    }

    .authority-badge:hover {
      transform: translateY(-5px);
      border-color: var(--teal-400);
      box-shadow: 0 12px 28px -10px rgba(18,171,138,.16);
    }

    .authority-badge .a-icon {
      width: 88px;
      height: 88px;
      border-radius: 12px;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 6px;
      overflow: hidden;
      transition: transform .3s var(--ease-out);
    }

    .authority-badge:hover .a-icon {
      transform: scale(1.08);
    }

    .authority-badge .a-icon svg {
      width: auto;
      height: 100%;
      max-width: 100%;
      max-height: 100%;
      display: block;
    }

    .authority-badge span {
      font-size: 12.5px;
      font-weight: 600;
      line-height: 1.4;
      color: var(--navy-950);
    }

    .disclaimer {
      font-size: 12px;
      color: var(--gray-500);
      line-height: 1.7;
      max-width: 760px;
      margin: 30px auto 0;
      text-align: center;
    }

    /* ============================================================
   14. TESTIMONIALS
   ============================================================ */
    .testi-wrap {
      position: relative;
      overflow: hidden;
    }

    .testi-track {
      display: flex;
      transition: transform .8s var(--ease-in-out);
    }

    .testi-slide {
      flex: 0 0 100%;
      width: 100%;
      min-width: 100%;
      max-width: 100%;
      display: grid;
      grid-template-columns: .8fr 1.2fr;
      gap: 0;
    }

    @media (max-width:800px) {
      .testi-slide {
        grid-template-columns: 1fr;
      }
    }

    .testi-slide.no-video {
      grid-template-columns: 1fr;
    }

    /* Width lives on the card, not the slide — the slide must stay exactly 100%
       wide or translateX(-n*100%) lands between slides. */
    .testi-slide.no-video .testi-card {
      text-align: center;
      align-items: center;
      width: 100%;
      max-width: 940px;
      margin: 0 auto;
    }

    .testi-slide.no-video .testi-person {
      justify-content: center;
    }

    .testi-video {
      aspect-ratio: 4/5;
      border-radius: var(--radius-lg);
      background: linear-gradient(155deg, var(--navy-800), var(--navy-950));
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    .testi-video .play {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .12);
      border: 1px solid rgba(255, 255, 255, .3);
      backdrop-filter: blur(6px);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .testi-video .play svg {
      width: 18px;
      height: 18px;
      color: #fff;
      margin-left: 3px;
    }

    .testi-video .tag {
      position: absolute;
      bottom: 20px;
      left: 20px;
      font-size: 11px;
      color: rgba(255, 255, 255, .55);
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .testi-card {
      background: rgba(255, 255, 255, .035);
      border: 1px solid rgba(255, 255, 255, .09);
      backdrop-filter: blur(14px);
      border-radius: var(--radius-lg);
      padding: 52px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 22px;
    }

    @media (max-width:800px) {
      .testi-card {
        padding: 34px;
      }
    }

    .testi-quote-mark {
      font-family: var(--font-display);
      font-style: italic;
      font-size: 64px;
      color: var(--teal-500);
      line-height: .6;
    }

    .testi-text {
      font-family: var(--font-display);
      font-size: clamp(19px, 2vw, 25px);
      line-height: 1.55;
      color: #fff;
      font-weight: 500;
    }

    .testi-person {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .testi-avatar {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background: linear-gradient(145deg, var(--teal-400), var(--teal-700));
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-style: italic;
      color: #fff;
      font-size: 16px;
    }

    .testi-name {
      color: #fff;
      font-weight: 600;
      font-size: 14px;
    }

    .testi-role {
      color: rgba(255, 255, 255, .5);
      font-size: 12.5px;
    }

    .testi-stars {
      display: flex;
      gap: 3px;
    }

    .testi-stars svg {
      width: 13px;
      height: 13px;
      color: var(--teal-300);
    }

    .testi-nav {
      display: flex;
      gap: 12px;
      margin-top: 36px;
      justify-content: center;
    }

    .testi-nav button {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 1px solid var(--gray-200);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .testi-nav button svg {
      width: 15px;
      height: 15px;
    }

    .section-dark .testi-nav button {
      border-color: rgba(255, 255, 255, .2);
      color: #fff;
    }

    /* ============================================================
   15. PRICE CALCULATOR CTA
   ============================================================ */
    .calc-band {
      position: relative;
      border-radius: var(--radius-lg);
      overflow: hidden;
      background: linear-gradient(120deg, var(--navy-950) 0%, var(--teal-700) 150%);
      padding: 80px 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
      flex-wrap: wrap;
    }

    @media (max-width:800px) {
      .calc-band {
        padding: 52px 30px;
        flex-direction: column;
        align-items: flex-start;
      }
    }

    .calc-band::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(500px 300px at 85% 20%, rgba(61, 220, 181, .35), transparent 70%);
    }

    .calc-band-content {
      position: relative;
      z-index: 2;
      max-width: 520px;
    }

    .calc-band h3 {
      color: #fff;
      font-size: clamp(26px, 3.2vw, 38px);
      margin-bottom: 14px;
    }

    .calc-band p {
      color: rgba(255, 255, 255, .65);
      font-size: 14.5px;
      line-height: 1.7;
    }

    .calc-inputs {
      position: relative;
      z-index: 2;
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    .pill-select {
      padding: 14px 18px;
      border-radius: var(--radius-pill);
      background: rgba(255, 255, 255, .08);
      border: 1px solid rgba(255, 255, 255, .2);
      color: #fff;
      font-size: 13px;
      backdrop-filter: blur(6px);
      min-width: 150px;
    }

    .pill-select option {
      color: #000;
    }

    /* ============================================================
   16. QUOTE FORM
   ============================================================ */
    .form-shell {
      display: grid;
      grid-template-columns: minmax(280px, .44fr) minmax(0, 1fr);
      gap: 0;
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-soft);
      background: #fff;
    }

    .form-side {
      background: linear-gradient(155deg, var(--navy-950), #061827 58%, #08261f);
      color: #fff;
      padding: 54px 42px;
      position: relative;
      overflow: hidden;
      min-height: 620px;
    }

    .form-side::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(420px 300px at 20% 90%, rgba(61, 220, 181, .22), transparent 70%), radial-gradient(260px 220px at 92% 18%, rgba(61, 220, 181, .12), transparent 72%);
      pointer-events: none;
    }

    .form-side::after {
      content: '';
      position: absolute;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      border: 1px solid rgba(126, 235, 203, .35);
      top: 86px;
      right: 38px;
      box-shadow: 0 0 0 18px rgba(126, 235, 203, .03);
    }

    .form-side-content {
      position: relative;
      z-index: 2;
    }

    .form-side h3 {
      color: #fff;
      font-size: 27px;
      line-height: 1.18;
      margin-top: 14px;
      max-width: 330px;
    }

    .form-side p {
      color: rgba(255, 255, 255, .58);
      font-size: 13.5px;
      margin-top: 14px;
      line-height: 1.75;
      max-width: 360px;
    }

    .form-steps-list {
      margin-top: 42px;
      display: flex;
      flex-direction: column;
      gap: 22px;
    }

    .form-steps-list li {
      display: flex;
      align-items: center;
      gap: 14px;
      font-size: 13px;
      line-height: 1.35;
      color: rgba(255, 255, 255, .48);
      transition: color .25s;
    }

    .form-steps-list .n {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, .22);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11.5px;
      font-weight: 700;
      flex-shrink: 0;
      transition: background .25s, border-color .25s, color .25s;
    }

    .form-steps-list li.active {
      color: #fff;
    }

    .form-steps-list li.active .n {
      background: var(--teal-500);
      border-color: var(--teal-500);
      color: #fff;
      box-shadow: 0 12px 26px rgba(18, 171, 138, .26);
    }

    .form-steps-list li.done {
      color: rgba(255, 255, 255, .72);
    }

    .form-steps-list li.done .n {
      background: rgba(61, 220, 181, .16);
      border-color: rgba(126, 235, 203, .55);
      color: var(--teal-300);
    }

    .form-steps-list li[role="button"] {
      cursor: default;
    }

    .form-steps-list li.active,
    .form-steps-list li.done {
      cursor: pointer;
    }

    .form-steps-list li:focus-visible .n {
      outline: 2px solid rgba(126, 235, 203, .75);
      outline-offset: 3px;
    }

    .form-main {
      background: #fff;
      padding: 52px 48px;
      min-width: 0;
    }

    .quote-form-top {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 28px;
      padding-bottom: 20px;
      border-bottom: 1px solid var(--gray-150);
    }

    .quote-form-title {
      margin: 0;
      font-size: 24px;
      line-height: 1.18;
    }

    .quote-form-note {
      color: var(--gray-500);
      font-size: 12.5px;
      line-height: 1.55;
      max-width: 270px;
      margin: 0;
      text-align: right;
    }

    .f-step {
      display: none;
    }

    .f-step.active {
      display: block;
      animation: quoteStepIn .32s var(--ease-out) both;
    }

    @keyframes quoteStepIn {
      from {
        opacity: 0;
        transform: translateY(8px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .f-label {
      font-size: 11.5px;
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--gray-500);
      margin-bottom: 9px;
      display: block;
    }

    .f-title {
      font-size: 25px;
      line-height: 1.18;
      margin-bottom: 24px;
    }

    .quote-section-block {
      padding: 22px 0 24px;
      border-top: 1px solid var(--gray-150);
    }

    .quote-section-block:first-of-type {
      border-top: 0;
      padding-top: 0;
    }

    .quote-section-heading {
      font-size: 15px;
      margin: 0 0 16px;
      color: var(--navy-950);
    }

    .quote-question {
      display: block;
      font-size: 13px;
      font-weight: 700;
      color: var(--navy-950);
      line-height: 1.45;
      margin: 0 0 10px;
    }

    .quote-help {
      color: var(--gray-500);
      font-size: 12.2px;
      line-height: 1.6;
      margin: -3px 0 12px;
    }

    .choice-group {
      border: 0;
      padding: 0;
      margin: 0 0 16px;
      min-width: 0;
    }

    .choice-group legend {
      padding: 0;
    }

    .field-row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      margin-bottom: 16px;
    }

    .field-row.three {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .field {
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-width: 0;
    }

    .field label,
    .field .field-label {
      font-size: 12px;
      color: var(--gray-600);
      font-weight: 700;
      line-height: 1.35;
    }

    .req {
      color: var(--teal-600);
      font-weight: 800;
    }

    .field select,
    .field input,
    .field textarea {
      width: 100%;
      border: 1px solid var(--gray-200);
      border-radius: 13px;
      padding: 13px 15px;
      font-size: 13.5px;
      color: var(--ink);
      background: #fff;
      transition: border-color .25s, box-shadow .25s, background .25s;
    }

    .field select:focus,
    .field input:focus,
    .field textarea:focus {
      outline: none;
      border-color: var(--teal-500);
      box-shadow: 0 0 0 4px rgba(18, 171, 138, .1);
    }

    .field textarea {
      resize: vertical;
      min-height: 92px;
      line-height: 1.55;
    }

    .field textarea.large {
      min-height: 126px;
    }

    .choice-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 16px;
    }

    .choice-grid.two {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .choice-grid.four {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .choice {
      position: relative;
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 48px;
      border: 1px solid var(--gray-200);
      border-radius: 13px;
      padding: 12px 13px;
      color: var(--navy-950);
      background: #fff;
      font-size: 12.7px;
      font-weight: 650;
      line-height: 1.35;
      cursor: pointer;
      transition: border-color .25s, background .25s, box-shadow .25s, transform .25s;
    }

    .choice:hover {
      border-color: rgba(18, 171, 138, .42);
      background: #fbfffe;
      transform: translateY(-1px);
    }

    .choice input {
      width: 16px;
      height: 16px;
      accent-color: var(--teal-500);
      flex: 0 0 auto;
    }

    .choice:has(input:checked) {
      border-color: var(--teal-500);
      background: rgba(18, 171, 138, .07);
      box-shadow: 0 10px 26px rgba(18, 171, 138, .08);
    }

    .conditional {
      display: none;
      margin: -2px 0 18px;
      padding: 16px;
      border-radius: 15px;
      border: 1px solid rgba(18, 171, 138, .14);
      background: rgba(18, 171, 138, .045);
    }

    .conditional.is-visible {
      display: block;
    }

    .upload-zone {
      border: 1.5px dashed var(--gray-200);
      border-radius: var(--radius-md);
      padding: 36px 20px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      transition: border-color .3s, background .3s, box-shadow .3s;
      cursor: pointer;
      margin-bottom: 10px;
    }

    .upload-zone:hover,
    .upload-zone.dragging {
      border-color: var(--teal-400);
      background: var(--gray-50);
      box-shadow: 0 16px 34px -28px rgba(18, 171, 138, .3);
    }

    .upload-zone svg {
      width: 30px;
      height: 30px;
      color: var(--teal-500);
    }

    .upload-zone .u-title {
      font-weight: 700;
      font-size: 14px;
    }

    .upload-zone .u-sub {
      font-size: 12.5px;
      color: var(--gray-500);
      line-height: 1.5;
    }

    .upload-zone input[type="file"] {
      position: absolute;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
    }

    .file-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin: 8px 0 18px;
    }

    .file-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 12px;
      border-radius: 12px;
      background: var(--gray-50);
      color: var(--navy-950);
      font-size: 12.5px;
      border: 1px solid var(--gray-150);
    }

    .file-item span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .file-item small {
      color: var(--gray-500);
      white-space: nowrap;
    }

    .file-remove {
      color: var(--teal-700);
      font-size: 12px;
      font-weight: 800;
      flex-shrink: 0;
    }

    .form-alert {
      display: none;
      margin-bottom: 22px;
      padding: 13px 15px;
      border-radius: 13px;
      border: 1px solid rgba(18, 171, 138, .22);
      background: rgba(18, 171, 138, .07);
      color: var(--teal-700);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.45;
    }

    .form-alert.error {
      display: block;
      border-color: rgba(198, 60, 60, .24);
      background: rgba(198, 60, 60, .07);
      color: #9f2f2f;
    }

    .form-alert.success {
      display: block;
      border-color: rgba(18, 171, 138, .26);
      background: rgba(18, 171, 138, .08);
      color: var(--teal-700);
    }

    .field-error {
      color: #9f2f2f;
      font-size: 11.5px;
      line-height: 1.45;
      margin-top: -2px;
    }

    .is-invalid,
    .choice-group.is-invalid .choice,
    .upload-zone.is-invalid {
      border-color: #c63c3c !important;
      box-shadow: 0 0 0 4px rgba(198, 60, 60, .08) !important;
    }

    .confirm-stack {
      display: grid;
      gap: 10px;
      margin-top: 6px;
    }

    .form-nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      margin-top: 30px;
      padding-top: 24px;
      border-top: 1px solid var(--gray-150);
    }

    .btn-link {
      font-size: 13px;
      font-weight: 700;
      color: var(--gray-600);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .btn-link:hover {
      color: var(--teal-700);
    }

    .form-nav .btn[disabled] {
      opacity: .48;
      cursor: not-allowed;
      transform: none !important;
      box-shadow: none;
    }

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

      .form-side {
        min-height: auto;
        padding: 38px 34px;
      }

      .form-steps-list {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 12px;
        margin-top: 30px;
      }

      .form-steps-list li {
        align-items: flex-start;
        gap: 9px;
        font-size: 11.5px;
      }

      .form-main {
        padding: 40px 34px;
      }

      .choice-grid.four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 680px) {
      .form-side,
      .form-main {
        padding: 34px 22px;
      }

      .quote-form-top {
        align-items: flex-start;
        flex-direction: column;
      }

      .quote-form-note {
        text-align: left;
      }

      .form-steps-list {
        grid-template-columns: 1fr;
        gap: 13px;
      }

      .field-row,
      .field-row.three,
      .choice-grid,
      .choice-grid.two,
      .choice-grid.four {
        grid-template-columns: 1fr;
      }

      .form-nav {
        flex-direction: column-reverse;
        align-items: stretch;
      }

      .form-nav .btn,
      .form-nav .btn-link {
        width: 100%;
        justify-content: center;
      }
    }

    /* Never upscale a logo past its natural size (no blur) and never force a box
       ratio onto it (no stretch). */
    .authority-badge .a-icon img {
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      object-position: center;
      display: block;
    }

    /* ============================================================
   18. FAQ
   ============================================================ */
    .faq-list {
      max-width: 820px;
      margin: 0 auto;
    }

    .faq-item {
      border-bottom: 1px solid var(--gray-200);
    }

    .faq-q {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 26px 4px;
      text-align: left;
      font-size: 16.5px;
      font-weight: 600;
    }

    .faq-q .plus {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      border: 1px solid var(--gray-200);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-left: 20px;
      transition: transform .4s var(--ease-out), background .3s, border-color .3s;
      position: relative;
    }

    .faq-q .plus::before,
    .faq-q .plus::after {
      content: '';
      position: absolute;
      background: var(--navy-950);
      transition: transform .3s;
    }

    .faq-q .plus::before {
      width: 10px;
      height: 1px;
    }

    .faq-q .plus::after {
      width: 1px;
      height: 10px;
    }

    .faq-item.open .faq-q .plus {
      background: var(--navy-950);
      border-color: var(--navy-950);
      transform: rotate(180deg);
    }

    .faq-item.open .faq-q .plus::before,
    .faq-item.open .faq-q .plus::after {
      background: #fff;
    }

    .faq-item.open .faq-q .plus::after {
      transform: scaleY(0);
    }

    .faq-a {
      max-height: 0;
      overflow: hidden;
      transition: max-height .45s var(--ease-out);
    }

    .faq-a p {
      padding: 0 4px 26px;
      color: var(--gray-600);
      font-size: 14px;
      line-height: 1.75;
      max-width: 640px;
    }

    /* ============================================================
   19. BLOG PREVIEW
   ============================================================ */
    .blog-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

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

    .blog-card {
      border-radius: var(--radius-md);
      overflow: hidden;
      background: #fff;
      border: 1px solid var(--gray-150);
      transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
    }

    .blog-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-tight);
    }

    .blog-img {
      aspect-ratio: 16/10;
      position: relative;
      overflow: hidden;
      background: var(--navy-900);
    }

    .blog-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .6s var(--ease-out);
    }

    .blog-card:hover .blog-img img {
      transform: scale(1.06);
    }

    .blog-img .cat {
      position: absolute;
      top: 16px;
      left: 16px;
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: #fff;
      background: rgba(6, 15, 28, .65);
      backdrop-filter: blur(8px);
      padding: 6px 14px;
      border-radius: var(--radius-pill);
      border: 1px solid rgba(255, 255, 255, .18);
      z-index: 2;
    }

    .blog-body {
      padding: 24px;
    }

    .blog-date {
      font-size: 11.5px;
      color: var(--gray-500);
      letter-spacing: .04em;
      margin-bottom: 10px;
    }

    .blog-body h4 {
      font-size: 17px;
      line-height: 1.4;
      margin-bottom: 10px;
    }

    .blog-read {
      font-size: 12.5px;
      font-weight: 600;
      color: var(--teal-600);
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 14px;
    }

    /* ============================================================
   20. FOOTER
   ============================================================ */
    footer {
      position: relative;
      overflow: hidden;
      color: #fff;
      background:
        radial-gradient(620px 320px at 8% 0%, rgba(18, 131, 161, .24), transparent 62%),
        linear-gradient(135deg, #082a44 0%, #062035 46%, #071b2c 100%);
      padding: 44px 0 0;
    }

    .footer-glow {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(520px 260px at 12% 8%, rgba(61, 220, 181, .13), transparent 70%),
        radial-gradient(460px 240px at 92% 6%, rgba(23, 131, 161, .12), transparent 72%);
      opacity: .92;
    }

    .footer-main {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: minmax(220px, 1.35fr) minmax(150px, .75fr) minmax(190px, .9fr) minmax(260px, 1.15fr);
      gap: clamp(34px, 5vw, 78px);
      align-items: start;
      padding: 0 0 28px;
    }

    .footer-brand {
      max-width: 300px;
    }

    .footer-logo-img {
      height: 66px;
      width: auto;
      max-width: 260px;
      object-fit: contain;
      display: block;
      margin-bottom: 18px;
      filter: brightness(0) invert(1);
      opacity: .96;
    }

    .footer-brand p {
      font-size: 13px;
      color: rgba(255, 255, 255, .78);
      line-height: 1.72;
      max-width: 285px;
      margin: 0;
    }

    .footer-social {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 18px;
      max-width: 300px;
    }

    .footer-social a {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #082a44;
      background: rgba(255, 255, 255, .94);
      border: 1px solid rgba(255, 255, 255, .2);
      transition: transform .25s var(--ease-out), background .25s var(--ease-out), color .25s var(--ease-out), opacity .25s var(--ease-out);
    }

    .footer-social a:hover,
    .footer-social a:focus-visible {
      color: #fff;
      background: var(--teal-500);
      transform: translateY(-2px) scale(1.04);
      opacity: .96;
    }

    .footer-social svg {
      width: 16px;
      height: 16px;
      display: block;
    }

    .footer-col h5 {
      font-size: 14px;
      line-height: 1.2;
      color: #fff;
      margin: 0 0 18px;
      font-weight: 700;
      letter-spacing: 0;
      text-transform: none;
    }

    .footer-col a {
      display: block;
      width: fit-content;
      font-size: 13px;
      line-height: 1.3;
      color: rgba(255, 255, 255, .78);
      padding: 5px 0;
      transition: color .25s var(--ease-out), transform .25s var(--ease-out);
    }

    .footer-col a:hover,
    .footer-col a:focus-visible {
      color: var(--teal-300);
      transform: translateX(2px);
    }

    .footer-contact-list {
      display: grid;
      gap: 13px;
    }

    .footer-contact-item {
      display: grid;
      grid-template-columns: 22px 1fr;
      gap: 11px;
      align-items: start;
      color: rgba(255, 255, 255, .82);
      font-size: 13px;
      line-height: 1.45;
    }

    .footer-contact-icon {
      width: 20px;
      height: 20px;
      color: rgba(255, 255, 255, .92);
      margin-top: 1px;
    }

    .footer-contact-icon svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .footer-contact-item a,
    .footer-contact-item span {
      color: rgba(255, 255, 255, .82);
    }

    .footer-contact-item a:hover,
    .footer-contact-item a:focus-visible {
      color: var(--teal-300);
    }

    .footer-payment-methods {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px;
      margin-top: 21px;
      max-width: 318px;
    }

    .footer-payment-logo {
      display: block;
      flex: 0 0 auto;
      width: auto;
      max-width: 82px;
      object-fit: contain;
    }

    .footer-payment-logo--stripe {
      width: 56px;
      height: 18px;
    }

    .footer-payment-logo--mastercard {
      width: 39px;
      height: 24px;
    }

    .footer-payment-logo--visa {
      width: 50px;
      height: 17px;
    }

    .footer-payment-logo--gpay {
      height: 20px;
    }

    .footer-payment-logo--apple-pay {
      width: 60px;
      height: 22px;
    }

    .footer-divider {
      position: relative;
      z-index: 2;
      height: 1px;
      background: rgba(255, 255, 255, .22);
    }

    .footer-bottom {
      position: relative;
      z-index: 2;
      padding: 17px 0 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 18px;
      font-size: 12px;
      color: rgba(255, 255, 255, .78);
    }

    .footer-bottom a {
      color: rgba(255, 255, 255, .82);
      font-weight: 600;
      transition: color .25s var(--ease-out);
    }

    .footer-bottom a:hover,
    .footer-bottom a:focus-visible {
      color: var(--teal-300);
    }

    @media (min-width:1001px) {
      footer > .container {
        padding-left: 25px;
        padding-right: 25px;
      }
    }

    @media (max-width:1000px) {
      footer > .container {
        padding-left: 20px;
        padding-right: 20px;
      }
    }

    @media (max-width:1024px) {
      .footer-main {
        grid-template-columns: 1.2fr 1fr;
        gap: 34px 48px;
      }
    }

    @media (max-width:640px) {
      footer {
        padding-top: 38px;
      }

      .footer-main {
        grid-template-columns: 1fr;
        gap: 30px;
        padding-bottom: 30px;
      }

      .footer-brand {
        max-width: none;
      }

      .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
      }

      .footer-payment-methods {
        gap: 11px 12px;
      }
    }

    /* ============================================================
   21. CHATBOT
   ============================================================ */
    #chatbot-btn {
      position: fixed;
      bottom: 28px;
      right: 28px;
      z-index: 700;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: linear-gradient(145deg, var(--teal-400), var(--teal-700));
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 16px 34px -10px rgba(18, 171, 138, .6);
      animation: floaty 3.4s ease-in-out infinite;
    }

    #chatbot-btn svg {
      width: 22px;
      height: 22px;
      color: #fff;
    }

    #chatbot-btn .ping {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 2px solid var(--teal-300);
      animation: ping 2.4s ease-out infinite;
    }

    @keyframes ping {
      0% {
        transform: scale(1);
        opacity: .7;
      }

      100% {
        transform: scale(1.5);
        opacity: 0;
      }
    }

    @keyframes floaty {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-8px);
      }
    }

    #chatbot-panel {
      position: fixed;
      bottom: 100px;
      right: 28px;
      z-index: 700;
      width: 320px;
      max-width: calc(100vw - 40px);
      background: #fff;
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-soft);
      overflow: hidden;
      transform: translateY(20px) scale(.96);
      opacity: 0;
      visibility: hidden;
      transform-origin: bottom right;
      transition: transform .4s var(--ease-out), opacity .4s var(--ease-out), visibility 0s .4s;
    }

    #chatbot-panel.open {
      transform: translateY(0) scale(1);
      opacity: 1;
      visibility: visible;
      transition: transform .4s var(--ease-out), opacity .4s var(--ease-out);
    }

    .chat-head {
      background: var(--navy-950);
      color: #fff;
      padding: 18px 20px;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .chat-head .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--teal-400);
      box-shadow: 0 0 0 3px rgba(61, 220, 181, .25);
    }

    .chat-head strong {
      font-size: 13.5px;
      display: block;
    }

    .chat-head span {
      font-size: 11px;
      color: rgba(255, 255, 255, .5);
    }

    .chat-body {
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      max-height: 280px;
      overflow-y: auto;
    }

    .chat-msg {
      background: var(--gray-100);
      padding: 12px 14px;
      border-radius: 14px 14px 14px 4px;
      font-size: 13px;
      max-width: 85%;
      line-height: 1.5;
    }

    .chat-msg.me {
      background: var(--navy-950);
      color: #fff;
      align-self: flex-end;
      border-radius: 14px 14px 4px 14px;
    }

    .chat-input {
      display: flex;
      border-top: 1px solid var(--gray-150);
      padding: 12px;
      gap: 8px;
    }

    .chat-input input {
      flex: 1;
      border: none;
      font-size: 13px;
      outline: none;
    }

    .chat-input button {
      color: var(--teal-600);
      font-weight: 600;
      font-size: 12.5px;
    }

    /* ============================================================
   22. MISC UTILITIES
   ============================================================ */
    .glow-blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      pointer-events: none;
      z-index: 0;
    }

    .center-copy {
      text-align: center;
      max-width: 640px;
      margin: 0 auto 60px;
    }

    .center-copy .eyebrow {
      justify-content: center;
    }

    .center-copy p {
      color: var(--gray-600);
      margin-top: 16px;
      font-size: 15px;
      line-height: 1.7;
    }

    .section-dark .center-copy p {
      color: rgba(255, 255, 255, .6);
    }

    @media (max-width:900px) {

      .section-head,
      .center-copy {
        margin-bottom: 44px;
      }
    }

    /* ============================================================
   23. PAGE HERO (inner pages)
   ============================================================ */
    .page-hero {
      position: relative;
      overflow: hidden;
      color: #fff;
      padding: 172px 0 92px;
      background:
        radial-gradient(620px 320px at 8% 0%, rgba(18, 131, 161, .24), transparent 62%),
        linear-gradient(135deg, #082a44 0%, #062035 46%, #071b2c 100%);
    }

    .page-hero::after {
      content: '';
      position: absolute;
      inset: auto 0 0;
      height: 1px;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .14), rgba(255, 255, 255, 0));
    }

    @media (max-width:900px) {
      .page-hero {
        padding: 132px 0 64px;
      }
    }

    .breadcrumb {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12.5px;
      font-weight: 600;
      color: rgba(255, 255, 255, .48);
      margin-bottom: 24px;
    }

    .breadcrumb a {
      color: rgba(255, 255, 255, .78);
      transition: color .25s;
    }

    .breadcrumb a:hover {
      color: #fff;
    }

    .page-hero .eyebrow {
      color: var(--teal-300);
    }

    .page-hero h1 {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: clamp(34px, 4.6vw, 58px);
      line-height: 1.04;
      max-width: 760px;
      margin: 14px 0 18px;
      color: #fff;
    }

    .page-hero p.lead {
      max-width: 600px;
      color: rgba(255, 255, 255, .68);
      font-size: 15.5px;
      line-height: 1.75;
      margin-bottom: 30px;
    }

    .page-hero-stats {
      display: flex;
      flex-wrap: wrap;
      gap: 28px 44px;
    }

    .page-hero-stat b {
      display: block;
      font-family: var(--font-display);
      font-size: 25px;
      font-weight: 800;
      color: #fff;
    }

    .page-hero-stat span {
      font-size: 11.5px;
      letter-spacing: .04em;
      color: rgba(255, 255, 255, .52);
    }

    /* ============================================================
   24. CATEGORY GRID (services deep-dive)
   ============================================================ */
    .category-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 22px;
    }

    @media (max-width:1050px) {
      .category-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

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

    .category-card {
      background: #fff;
      border: 1px solid var(--gray-150);
      border-radius: var(--radius-md);
      padding: 30px 26px;
      box-shadow: var(--shadow-tight);
      scroll-margin-top: 110px;
    }

    .category-card h4 {
      font-size: 17px;
      margin-bottom: 16px;
    }

    .category-card ul {
      display: flex;
      flex-direction: column;
      gap: 11px;
    }

    .category-card li {
      font-size: 13px;
      color: var(--gray-600);
      padding-left: 18px;
      position: relative;
      line-height: 1.5;
    }

    .category-card li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 7px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--teal-500);
    }

    .category-card p {
      font-size: 13.5px;
      color: var(--gray-600);
      line-height: 1.7;
      margin-top: 4px;
    }

    /* ============================================================
   25. CONTACT CARDS
   ============================================================ */
    .contact-cards {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }

    @media (max-width:900px) {
      .contact-cards {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width:560px) {
      .contact-cards {
        grid-template-columns: 1fr;
      }
    }

    .contact-card {
      background: #fff;
      border: 1px solid var(--gray-150);
      border-radius: var(--radius-md);
      padding: 26px 22px;
      box-shadow: var(--shadow-tight);
    }

    .contact-card .c-icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: var(--gray-100);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 18px;
      color: var(--teal-600);
    }

    .contact-card .c-icon svg {
      width: 19px;
      height: 19px;
    }

    .contact-card h4 {
      font-size: 15px;
      margin-bottom: 8px;
    }

    .contact-card p,
    .contact-card a {
      font-size: 13.5px;
      color: var(--gray-600);
      line-height: 1.65;
    }

    .contact-card a:hover {
      color: var(--teal-600);
    }

    /* ============================================================
   26. BLOG PLACEHOLDER ART (posts without a photo asset)
   ============================================================ */
    .blog-img.placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .blog-img.placeholder svg {
      width: 46px;
      height: 46px;
      color: rgba(255, 255, 255, .82);
    }

    /* ============================================================
   27. NEWSLETTER BAND
   ============================================================ */
    .newsletter-band {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
      flex-wrap: wrap;
      border-radius: var(--radius-lg);
      padding: 40px 46px;
      background: linear-gradient(135deg, var(--navy-950), #082a44 70%);
      color: #fff;
    }

    .newsletter-band h3 {
      color: #fff;
      font-size: 22px;
      max-width: 360px;
    }

    .newsletter-band p {
      color: rgba(255, 255, 255, .6);
      font-size: 13.5px;
      margin-top: 8px;
      max-width: 360px;
    }

    .newsletter-form {
      display: flex;
      gap: 10px;
      flex: 0 0 auto;
    }

    .newsletter-form input {
      width: 260px;
      border: 1px solid rgba(255, 255, 255, .22);
      background: rgba(255, 255, 255, .06);
      border-radius: var(--radius-pill);
      padding: 13px 20px;
      font-size: 13.5px;
      color: #fff;
    }

    .newsletter-form input::placeholder {
      color: rgba(255, 255, 255, .42);
    }

    .newsletter-form input:focus {
      outline: none;
      border-color: var(--teal-400);
    }

    @media (max-width:640px) {
      .newsletter-band {
        padding: 32px 26px;
      }

      .newsletter-form {
        width: 100%;
      }

      .newsletter-form input {
        width: 100%;
      }
    }

    /* ============================================================
   28. CTA BAND (inner pages)
   ============================================================ */
    .cta-band {
      text-align: center;
      border-radius: var(--radius-lg);
      padding: 64px 40px;
      background: linear-gradient(135deg, var(--navy-950), #062a3a 60%, #082a2a);
      color: #fff;
    }

    .cta-band h2 {
      color: #fff;
      max-width: 620px;
      margin: 0 auto 14px;
    }

    .cta-band p {
      color: rgba(255, 255, 255, .62);
      max-width: 520px;
      margin: 0 auto 30px;
      font-size: 14.5px;
      line-height: 1.7;
    }

    .cta-band .hero-ctas {
      justify-content: center;
      margin-bottom: 0;
    }

    /* ============================================================
   29. CERTIFICATION LIST (badge + description rows)
   ============================================================ */
    .cert-list {
      display: flex;
      flex-direction: column;
    }

    .cert-row {
      display: flex;
      align-items: center;
      gap: 20px;
      padding: 22px 4px;
      border-bottom: 1px solid var(--gray-150);
    }

    .cert-row:last-child {
      border-bottom: none;
    }

    .cert-row .a-icon {
      width: 56px;
      height: 56px;
      border-radius: 14px;
      flex: 0 0 auto;
      background: #fff;
      border: 1px solid var(--gray-150);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .cert-row .a-icon img {
      width: 68%;
      height: 68%;
      object-fit: contain;
    }

    .cert-row h4 {
      font-size: 15px;
      margin-bottom: 6px;
    }

    .cert-row p {
      font-size: 13.5px;
      color: var(--gray-600);
      line-height: 1.65;
      margin: 0;
    }

    @media (max-width:640px) {
      .cert-row {
        gap: 14px;
      }

      .cert-row .a-icon {
        width: 46px;
        height: 46px;
      }
    }

    /* ============================================================
   30. TRUST METRICS BAND
   ============================================================ */
    .metric-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }

    @media (max-width:900px) {
      .metric-row {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width:560px) {
      .metric-row {
        grid-template-columns: 1fr;
      }
    }

    .metric-item {
      text-align: center;
      padding: 34px 20px;
      background: #fff;
      border: 1px solid var(--gray-150);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-tight);
    }

    .metric-item b {
      display: block;
      font-family: var(--font-display);
      font-size: 25px;
      font-weight: 800;
      color: var(--navy-950);
    }

    .metric-item span {
      font-size: 11.5px;
      letter-spacing: .04em;
      color: var(--gray-500);
      text-transform: uppercase;
      font-weight: 600;
    }

/* ============================================================
   WordPress additions — only affects pages that are not part of
   the original five-page design (privacy policy, single posts,
   404). Nothing above this line was changed.
   ============================================================ */
.sterling-prose {
  max-width: 780px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-600, #46596b);
}

.sterling-prose h2,
.sterling-prose h3,
.sterling-prose h4 {
  color: var(--navy-900, #0d2135);
  margin: 34px 0 12px;
}

.sterling-prose p {
  margin: 0 0 18px;
}

.sterling-prose ul,
.sterling-prose ol {
  margin: 0 0 18px 20px;
}

.sterling-prose li {
  margin-bottom: 7px;
}

.sterling-prose img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

.sterling-prose a {
  color: var(--teal-700, #0b8f72);
}

.sterling-prose blockquote {
  margin: 24px 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--teal-600, #12ab8a);
  font-style: italic;
}

/* ============================================================
   Service detail pages (/services/<slug>/) and the service
   directory grid. Uses only existing design tokens.
   ============================================================ */

.svc-body {
  max-width: 860px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.8;
  color: var(--gray-600);
}

.svc-body .svc-intro p {
  font-size: 17.5px;
  line-height: 1.8;
  color: var(--navy-800);
  margin: 0 0 20px;
}

.svc-section {
  margin-top: 52px;
}

.svc-section:first-child {
  margin-top: 0;
}

.svc-body h2 {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--navy-950);
  margin: 0 0 18px;
}

.svc-body p {
  margin: 0 0 18px;
}

.svc-body a {
  color: var(--teal-700);
}

.svc-list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 28px;
}

.svc-list li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--navy-800);
}

.svc-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal-500);
  box-shadow: 0 0 0 4px rgba(18, 171, 138, .14);
}

/* ---- Related services -------------------------------------- */

.svc-related {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 44px;
}

.svc-related-card {
  display: block;
  background: #fff;
  border: 1px solid var(--gray-150);
  border-radius: var(--radius-md);
  padding: 26px 24px;
  box-shadow: var(--shadow-tight);
  color: var(--navy-950);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .3s;
}

.svc-related-card:hover {
  transform: translateY(-4px);
  border-color: var(--teal-400);
  box-shadow: var(--shadow-soft);
}

.svc-related-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16.5px;
  line-height: 1.35;
  margin-bottom: 8px;
}

.svc-related-label {
  display: block;
  font-size: 13.5px;
  color: var(--gray-600);
  margin-bottom: 16px;
}

.svc-related-card svg {
  width: 18px;
  height: 18px;
  color: var(--teal-600);
}

/* ---- Service directory grid (Services page) ---------------- */

.svc-index {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 44px;
}

.svc-index-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--gray-150);
  border-radius: var(--radius-md);
  padding: 28px 26px;
  box-shadow: var(--shadow-tight);
  color: var(--navy-950);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .3s;
}

.svc-index-card:hover {
  transform: translateY(-4px);
  border-color: var(--teal-400);
  box-shadow: var(--shadow-soft);
}

.svc-index-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: -.01em;
  margin-bottom: 10px;
}

.svc-index-desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--gray-600);
  margin-bottom: 20px;
  flex: 1;
}

.svc-index-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--teal-700);
}

.svc-index-go svg {
  width: 17px;
  height: 17px;
  transition: transform .35s var(--ease-out);
}

.svc-index-card:hover .svc-index-go svg {
  transform: translateX(4px);
}

@media (max-width: 1000px) {
  .svc-related,
  .svc-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  .svc-body h2 {
    font-size: 22px;
  }

  .svc-related,
  .svc-index {
    grid-template-columns: 1fr;
  }
}

/* ---- Service editor meta boxes ------------------------------ */

.sterling-metabox .sterling-field {
  margin-bottom: 18px;
}

.sterling-metabox .sterling-repeater {
  margin-top: 4px;
}

/* ============================================================
   Languages index + language detail pages
   ============================================================ */

.lang-group {
  margin-top: 64px;
}

.lang-group:first-of-type {
  margin-top: 0;
}

.lang-group-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 16px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--gray-150);
}

.lang-group-head h2 {
  font-family: var(--font-display);
  font-size: 27px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--navy-950);
  margin: 0;
}

.lang-group-count {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--teal-700);
  background: var(--teal-50, rgba(18, 171, 138, .1));
  border-radius: 100px;
  padding: 3px 11px;
}

.lang-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.lang-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--gray-150);
  border-radius: var(--radius-md);
  padding: 15px 18px;
  box-shadow: var(--shadow-tight);
  color: var(--navy-950);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .3s;
}

.lang-card:hover {
  transform: translateY(-3px);
  border-color: var(--teal-400);
  box-shadow: var(--shadow-soft);
}

.lang-flag-wrap {
  flex: 0 0 auto;
  display: block;
  width: 40px;
  height: 30px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(15, 32, 45, .1);
}

.lang-flag {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lang-flag-blank {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--gray-100, #eef1f3);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--gray-600);
}

.lang-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: -.01em;
}

/* Flag in the language page header */

.lang-hero-flag {
  width: 64px;
  height: 48px;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 22px;
  box-shadow: 0 0 0 1px rgba(15, 32, 45, .12), var(--shadow-tight);
}

@media (max-width: 1000px) {
  .lang-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .lang-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lang-group-head h2 {
    font-size: 22px;
  }

  .lang-group {
    margin-top: 44px;
  }
}

@media (max-width: 420px) {
  .lang-card {
    padding: 13px 14px;
    gap: 11px;
  }

  .lang-flag-wrap {
    width: 32px;
    height: 24px;
  }

  .lang-name {
    font-size: 14px;
  }
}

/* ============================================================
   THEME ADDITIONS v1.1 — contact cards without phone, chat link
   ============================================================ */

.contact-cards.contact-cards--3 {
  grid-template-columns: repeat(3, 1fr);
}

.contact-cards.contact-cards--2 {
  grid-template-columns: repeat(2, 1fr);
}

.contact-cards.contact-cards--1 {
  grid-template-columns: 1fr;
}

@media (max-width:900px) {
  .contact-cards.contact-cards--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width:560px) {
  .contact-cards.contact-cards--3,
  .contact-cards.contact-cards--2 {
    grid-template-columns: 1fr;
  }
}

.chat-msg .chat-link {
  display: inline-block;
  margin-top: 6px;
  color: var(--teal-600);
  font-weight: 600;
  text-decoration: none;
}

.chat-msg .chat-link:hover {
  text-decoration: underline;
}

#chatbot-form {
  margin: 0;
}

#chatbot-form button[disabled] {
  opacity: .5;
}