/* ============================================================
       DESIGN TOKENS
    ============================================================ */
    :root {
      --bg-primary: #050B18;
      --bg-secondary: #0D1526;
      --bg-tertiary: #0A1220;
      --bg-light: #F7F9FC;
      --bg-card-dark: #0A1220;
      --text-dark: #0A1324;
      --text-light: #FFFFFF;
      --text-muted: #B8C2D1;
      --text-muted-2: #7A8BA0;
      /* Gold is now a co-equal primary accent */
      --gold: #D4B068;
      --gold-2: #E5C079;
      --gold-soft: rgba(212,176,104,0.15);
      --accent: #58ACFD;
      --accent-2: #7DBEFE;
      --accent-gold: #D4B068;
      --accent-soft: rgba(88,172,253,0.12);
      --border-dark: rgba(255,255,255,0.07);
      --border-light: rgba(7,17,31,0.1);
      --border-gold: rgba(212,176,104,0.22);
      --navy: #0A1324;
      --slate: #1B2636;
      --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
      --ease-spring: cubic-bezier(.22,.68,0,1.2);
    }

    /* ============================================================
       RESET & BASE
    ============================================================ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; font-size: 16px; }
    body {
      font-family: 'Inter', sans-serif;
      background: var(--bg-primary);
      color: var(--text-light);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
      line-height: 1.5;
    }
    img { max-width: 100%; display: block; }
    a { text-decoration: none; color: inherit; }
    button { font-family: inherit; cursor: pointer; border: none; background: none; }
    ::selection { background: var(--accent); color: var(--bg-primary); }

    /* ============================================================
       TYPOGRAPHY
    ============================================================ */
    .display {
      font-family: 'Fraunces', serif;
      font-weight: 400;
      letter-spacing: -0.02em;
      line-height: 1.05;
    }
    .display em {
      font-style: italic;
      font-weight: 300;
      color: var(--accent);
    }
    .label {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--accent);
      display: inline-flex;
      align-items: center;
      gap: 12px;
    }
    .label::before {
      content: "";
      width: 28px;
      height: 1px;
      background: var(--accent);
      opacity: 0.6;
    }
    .label-muted {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--text-muted-2);
      display: inline-flex;
      align-items: center;
      gap: 12px;
    }
    .label-muted::before {
      content: "";
      width: 28px;
      height: 1px;
      background: var(--text-muted-2);
      opacity: 0.5;
    }

    /* ============================================================
       LAYOUT
    ============================================================ */
    .container {
      max-width: 1240px;
      margin: 0 auto;
      padding: 0 48px;
    }
    @media (max-width: 768px) {
      .container { padding: 0 24px; }
    }

    /* ============================================================
       SCROLL REVEAL
    ============================================================ */
    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
    }
    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }
    .reveal-delay-1 { transition-delay: 0.08s; }
    .reveal-delay-2 { transition-delay: 0.16s; }
    .reveal-delay-3 { transition-delay: 0.24s; }
    .reveal-delay-4 { transition-delay: 0.32s; }
    .reveal-delay-5 { transition-delay: 0.40s; }

    /* ============================================================
       NAVIGATION
    ============================================================ */
    nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      padding: 24px 0;
      transition: all 0.4s var(--ease-out);
      background: transparent;
    }
    nav.scrolled {
      background: rgba(5, 11, 24, 0.85);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      padding: 16px 0;
      border-bottom: 1px solid var(--border-dark);
    }
    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .nav-logo {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .nav-logo img {
      height: 44px;
      width: auto;
      transition: opacity 0.3s;
      display: block;
    }
    nav.scrolled .nav-logo img { height: 38px; transition: height 0.3s; }
    @media (max-width: 880px) {
      .nav-logo img { height: 38px; }
      nav.scrolled .nav-logo img { height: 34px; }
    }
    .nav-logo:hover img { opacity: 0.85; }

    .nav-links {
      display: flex;
      gap: 38px;
      list-style: none;
      align-items: center;
    }
    .nav-links a {
      font-size: 13px;
      font-weight: 500;
      color: var(--text-muted);
      letter-spacing: 0.02em;
      transition: color 0.3s;
      position: relative;
    }
    .nav-links a::after {
      content: "";
      position: absolute;
      bottom: -6px; left: 0;
      width: 0; height: 1px;
      background: var(--accent);
      transition: width 0.3s var(--ease-out);
    }
    .nav-links a:hover {
      color: var(--text-light);
    }
    .nav-links a:hover::after { width: 100%; }

    .nav-cta {
      padding: 10px 22px;
      background: var(--accent);
      color: var(--bg-primary);
      font-size: 13px;
      font-weight: 600;
      border-radius: 100px;
      transition: all 0.3s;
      letter-spacing: 0.01em;
    }
    .nav-cta:hover {
      background: var(--accent-2);
      transform: translateY(-1px);
      box-shadow: 0 8px 24px rgba(88,172,253,0.3);
    }
    .nav-cta::after { display: none !important; }

    /* Capabilities dropdown */
    .nav-dropdown { position: relative; }
    .nav-caret {
      margin-left: 6px;
      opacity: 0.7;
      transition: transform 0.25s var(--ease-out);
    }
    .nav-dropdown:hover .nav-caret { transform: rotate(180deg); }
    .nav-dropdown::before {
      content: "";
      position: absolute;
      top: 100%; left: -24px; right: -24px;
      height: 22px;
    }
    .nav-dropdown-menu {
      position: absolute;
      top: 100%; left: 50%;
      transform: translateX(-50%) translateY(8px);
      margin-top: 16px;
      padding: 10px 0;
      min-width: 256px;
      background: rgba(10, 19, 36, 0.97);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border: 1px solid var(--border-dark);
      border-radius: 14px;
      box-shadow: 0 24px 60px rgba(0,0,0,0.45);
      list-style: none;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out), visibility 0.25s;
    }
    .nav-dropdown:hover .nav-dropdown-menu,
    .nav-dropdown:focus-within .nav-dropdown-menu {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
    }
    .nav-dropdown-menu li a {
      display: block;
      padding: 11px 22px;
      font-size: 13px;
      color: var(--text-muted);
      white-space: nowrap;
      transition: color 0.25s, background 0.25s;
    }
    .nav-dropdown-menu li a::after { display: none !important; }
    .nav-dropdown-menu li a:hover {
      color: var(--gold-2);
      background: rgba(212,176,104,0.06);
    }
    @media (max-width: 880px) {
      .nav-dropdown::before { display: none; }
      .nav-caret { display: none; }
      .nav-dropdown-menu {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        min-width: 0;
        margin-top: 14px;
        padding: 0 0 0 16px;
        background: transparent;
        border: none;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        display: flex;
        flex-direction: column;
        gap: 14px;
      }
      .nav-dropdown-menu li a { padding: 0; font-size: 12.5px; }
      .nav-dropdown:hover .nav-dropdown-menu,
      .nav-dropdown:focus-within .nav-dropdown-menu { transform: none; }
    }

    .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: 8px;
    }
    .hamburger span {
      width: 22px; height: 1.5px;
      background: var(--text-light);
      transition: all 0.3s;
    }

    @media (max-width: 880px) {
      .nav-links {
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: var(--bg-secondary);
        flex-direction: column;
        padding: 32px 24px;
        gap: 22px;
        transform: translateY(-10px);
        opacity: 0;
        pointer-events: none;
        transition: all 0.3s var(--ease-out);
        border-bottom: 1px solid var(--border-dark);
      }
      nav.open .nav-links {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
      }
      .hamburger { display: flex; }
      nav.open .hamburger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
      nav.open .hamburger span:nth-child(2) { opacity: 0; }
      nav.open .hamburger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
    }

    /* ============================================================
       BUTTONS
    ============================================================ */
    .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 17px 32px;
      background: var(--accent);
      color: var(--bg-primary);
      font-size: 14px;
      font-weight: 600;
      border-radius: 100px;
      transition: all 0.35s var(--ease-out);
      letter-spacing: 0.01em;
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }
    .btn-primary::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(120deg, var(--accent-2), #A9D4FE, var(--accent-2));
      background-size: 200% 200%;
      opacity: 0;
      transition: opacity 0.4s;
      z-index: -1;
    }
    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 36px rgba(88,172,253,0.4);
    }
    .btn-primary:hover::before { opacity: 1; animation: shimmer 2.4s linear infinite; }
    @keyframes shimmer {
      0% { background-position: 0% 50%; }
      100% { background-position: 200% 50%; }
    }
    .btn-primary svg { transition: transform 0.35s var(--ease-out); }
    .btn-primary:hover svg { transform: translateX(4px); }

    .btn-secondary {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 17px 28px;
      background: transparent;
      color: var(--text-light);
      font-size: 14px;
      font-weight: 500;
      border-radius: 100px;
      border: 1px solid rgba(255,255,255,0.18);
      transition: all 0.35s var(--ease-out);
      letter-spacing: 0.01em;
    }
    .btn-secondary:hover {
      border-color: var(--accent);
      color: var(--accent);
      transform: translateY(-2px);
    }

    /* ============================================================
       HERO
    ============================================================ */
    #hero {
      min-height: 100vh;
      position: relative;
      padding: 160px 0 100px;
      display: flex;
      align-items: center;
      overflow: hidden;
      isolation: isolate;
      background: var(--bg-primary);
    }
    /* Cinematic background image with multi-layer gradient overlay */
    .hero-bg-image {
      position: absolute;
      inset: 0;
      background-image: url('/assets/hero-bg.jpg');
      background-size: 130% auto;
      background-position: center bottom;
      background-repeat: no-repeat;
      z-index: 0;
      will-change: transform;
    }
    @media (max-width: 768px) {
      .hero-bg-image { background-size: 240% auto; }
    }
    .hero-bg-vignette {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(5,11,24,0.95) 0%, rgba(5,11,24,0.78) 30%, rgba(5,11,24,0.55) 60%, rgba(5,11,24,0.85) 100%),
        linear-gradient(90deg, rgba(5,11,24,0.5) 0%, transparent 25%, transparent 75%, rgba(5,11,24,0.5) 100%);
      z-index: 1;
    }
    .hero-bg-grain {
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.83 0 0 0 0 0.69 0 0 0 0 0.41 0 0 0 0.7 0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='0.18'/></svg>");
      opacity: 0.4;
      mix-blend-mode: overlay;
      z-index: 2;
      pointer-events: none;
    }
    /* Decorative gold edge elements */
    .hero-corner {
      position: absolute;
      width: 80px;
      height: 80px;
      border-color: var(--gold);
      opacity: 0.5;
      z-index: 3;
      pointer-events: none;
    }
    .hero-corner.tl { top: 110px; left: 48px; border-top: 1px solid; border-left: 1px solid; }
    .hero-corner.tr { top: 110px; right: 48px; border-top: 1px solid; border-right: 1px solid; }
    .hero-corner.bl { bottom: 48px; left: 48px; border-bottom: 1px solid; border-left: 1px solid; }
    .hero-corner.br { bottom: 48px; right: 48px; border-bottom: 1px solid; border-right: 1px solid; }
    @media (max-width: 768px) {
      .hero-corner { width: 40px; height: 40px; }
      .hero-corner.tl, .hero-corner.tr { top: 90px; }
      .hero-corner.tl, .hero-corner.bl { left: 16px; }
      .hero-corner.tr, .hero-corner.br { right: 16px; }
    }

    .hero-content {
      position: relative;
      z-index: 5;
      width: 100%;
      max-width: 900px;
      margin: 0 auto;
      text-align: center;
    }

    .hero-eyebrow {
      margin-bottom: 36px;
      display: inline-flex;
      align-items: center;
      gap: 14px;
      padding: 9px 20px 9px 14px;
      background: rgba(212, 176, 104, 0.06);
      border: 1px solid var(--border-gold);
      border-radius: 100px;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .hero-eyebrow-dot {
      width: 7px; height: 7px;
      background: var(--gold);
      border-radius: 50%;
      box-shadow: 0 0 0 3px rgba(212,176,104,0.18), 0 0 14px rgba(212,176,104,0.5);
      animation: pulse-gold 2.4s ease-in-out infinite;
    }
    @keyframes pulse-gold {
      0%, 100% { box-shadow: 0 0 0 3px rgba(212,176,104,0.18), 0 0 14px rgba(212,176,104,0.5); }
      50% { box-shadow: 0 0 0 7px rgba(212,176,104,0.06), 0 0 22px rgba(212,176,104,0.7); }
    }
    .hero-eyebrow-text {
      font-size: 10.5px;
      font-weight: 600;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--gold-2);
    }

    .hero-headline {
      font-family: 'Fraunces', serif;
      font-weight: 300;
      font-size: clamp(48px, 7.5vw, 104px);
      letter-spacing: -0.03em;
      line-height: 0.98;
      margin-bottom: 36px;
      color: var(--text-light);
      text-shadow: 0 4px 30px rgba(5,11,24,0.6);
    }
    .hero-headline em {
      font-style: italic;
      font-weight: 300;
      background: linear-gradient(135deg, var(--gold-2) 0%, var(--gold) 50%, #B89556 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      position: relative;
      display: inline-block;
    }
    .hero-headline em::after {
      content: "";
      position: absolute;
      left: 5%; right: 5%; bottom: -8px;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
      opacity: 0.6;
    }
    .hero-description {
      font-size: clamp(16px, 1.4vw, 19px);
      color: rgba(232, 238, 246, 0.85);
      max-width: 640px;
      margin: 0 auto 52px;
      line-height: 1.7;
      font-weight: 300;
      letter-spacing: 0.005em;
    }
    .hero-actions {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      justify-content: center;
      margin-bottom: 92px;
    }
    @media (max-width: 980px) {
      .hero-actions { margin-bottom: 64px; }
    }

    .hero-pillars {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      padding: 32px 0 0;
      border-top: 1px solid rgba(255,255,255,0.08);
      max-width: 760px;
      margin: 0 auto;
    }
    @media (max-width: 640px) {
      .hero-pillars { grid-template-columns: repeat(2, 1fr); gap: 24px 18px; }
    }
    .hero-pillar {
      position: relative;
    }
    .hero-pillar-title {
      font-family: 'Fraunces', serif;
      font-size: clamp(20px, 1.7vw, 24px);
      font-weight: 400;
      margin-bottom: 8px;
      letter-spacing: -0.01em;
      color: var(--gold-2);
      font-style: italic;
    }
    .hero-pillar-sub {
      font-size: 11.5px;
      color: var(--text-muted);
      letter-spacing: 0.04em;
      line-height: 1.5;
      font-weight: 400;
    }

    /* Scroll indicator at bottom of hero */
    .hero-scroll {
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      z-index: 4;
      color: var(--text-muted-2);
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      opacity: 0.7;
      animation: scroll-fade 3s ease-in-out infinite;
    }
    @keyframes scroll-fade {
      0%, 100% { opacity: 0.4; transform: translateX(-50%) translateY(0); }
      50% { opacity: 1; transform: translateX(-50%) translateY(-3px); }
    }
    .hero-scroll-line {
      width: 1px;
      height: 36px;
      background: linear-gradient(180deg, var(--gold), transparent);
    }
    @media (max-width: 880px) { .hero-scroll { display: none; } }

    /* Gold-themed buttons for the hero */
    .btn-gold {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 18px 34px;
      background: linear-gradient(135deg, var(--gold-2) 0%, var(--gold) 100%);
      color: #0A1324;
      font-size: 14px;
      font-weight: 600;
      border-radius: 100px;
      transition: all 0.4s var(--ease-out);
      letter-spacing: 0.02em;
      text-transform: uppercase;
      position: relative;
      overflow: hidden;
      isolation: isolate;
      box-shadow: 0 12px 40px rgba(212,176,104,0.25), inset 0 1px 0 rgba(255,255,255,0.3);
    }
    .btn-gold::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, #EAC988 0%, var(--gold-2) 100%);
      opacity: 0;
      transition: opacity 0.4s;
      z-index: -1;
    }
    .btn-gold:hover {
      transform: translateY(-3px);
      box-shadow: 0 18px 50px rgba(212,176,104,0.4), inset 0 1px 0 rgba(255,255,255,0.4);
    }
    .btn-gold:hover::before { opacity: 1; }
    .btn-gold svg { transition: transform 0.35s var(--ease-out); }
    .btn-gold:hover svg { transform: translateX(4px); }

    .btn-ghost {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 18px 30px;
      background: rgba(10, 19, 36, 0.35);
      color: var(--text-light);
      font-size: 14px;
      font-weight: 500;
      border-radius: 100px;
      border: 1px solid rgba(255,255,255,0.18);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      transition: all 0.35s var(--ease-out);
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }
    .btn-ghost:hover {
      border-color: var(--gold);
      color: var(--gold-2);
      background: rgba(212,176,104,0.06);
    }

    /* ============================================================
       SECTION HEADERS
    ============================================================ */
    .section-header {
      max-width: 720px;
      margin: 0 auto 72px;
      text-align: center;
    }
    .section-header.left {
      margin-left: 0;
      text-align: left;
    }
    .section-headline {
      font-family: 'Fraunces', serif;
      font-weight: 400;
      font-size: clamp(34px, 4.2vw, 54px);
      letter-spacing: -0.022em;
      line-height: 1.08;
      margin: 18px 0 22px;
    }
    .section-headline em {
      font-style: italic;
      font-weight: 300;
      color: var(--accent);
    }
    .section-sub {
      font-size: 17px;
      color: var(--text-muted);
      line-height: 1.7;
      max-width: 620px;
      margin: 0 auto;
    }
    .section-header.left .section-sub { margin: 0; }

    /* Section on light bg */
    .section-headline-dark {
      font-family: 'Fraunces', serif;
      font-weight: 400;
      font-size: clamp(34px, 4.2vw, 54px);
      letter-spacing: -0.022em;
      line-height: 1.08;
      color: var(--text-dark);
      margin: 18px 0 22px;
    }
    .section-headline-dark em {
      font-style: italic;
      font-weight: 300;
      color: var(--accent);
    }
    .section-sub-dark {
      font-size: 17px;
      color: #4A5868;
      line-height: 1.7;
      max-width: 620px;
      margin: 0 auto;
    }

    /* ============================================================
       ABOUT
    ============================================================ */
    #about {
      padding: 140px 0;
      background: var(--bg-primary);
      position: relative;
      overflow: hidden;
    }
    #about::before {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--border-dark), transparent);
    }
    .about-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 88px;
      margin-top: 28px;
    }
    @media (max-width: 980px) {
      .about-grid { grid-template-columns: 1fr; gap: 56px; }
    }
    .about-headline {
      font-family: 'Fraunces', serif;
      font-weight: 400;
      font-size: clamp(34px, 4vw, 52px);
      letter-spacing: -0.022em;
      line-height: 1.08;
      margin-bottom: 32px;
    }
    .about-headline em {
      font-style: italic;
      font-weight: 300;
      color: var(--accent);
    }
    .about-body p {
      font-size: 16px;
      color: var(--text-muted);
      line-height: 1.75;
      margin-bottom: 20px;
    }
    .about-right {
      padding-top: 8px;
    }
    .about-metrics {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 28px 36px;
      margin-bottom: 40px;
    }
    .about-metric {
      padding: 28px 24px;
      background: var(--bg-card-dark);
      border: 1px solid var(--border-dark);
      border-radius: 16px;
      transition: all 0.4s var(--ease-out);
    }
    .about-metric:hover {
      border-color: rgba(88,172,253,0.3);
      transform: translateY(-3px);
    }
    .about-metric-num {
      font-family: 'Fraunces', serif;
      font-size: 44px;
      font-weight: 400;
      letter-spacing: -0.02em;
      line-height: 1;
      margin-bottom: 10px;
      color: var(--text-light);
    }
    .about-metric-num span { color: var(--accent); font-size: 22px; }
    .about-metric-label {
      font-size: 12px;
      color: var(--text-muted-2);
      letter-spacing: 0.02em;
      line-height: 1.5;
    }
    .about-metric-wide { grid-column: 1 / -1; }
    .about-tagline {
      padding: 28px;
      background: linear-gradient(135deg, rgba(88,172,253,0.06), rgba(88,172,253,0.02));
      border-left: 2px solid var(--accent);
      border-radius: 8px;
    }
    .about-tagline p {
      font-family: 'Fraunces', serif;
      font-style: italic;
      font-size: 17px;
      color: var(--text-light);
      line-height: 1.55;
    }
    .about-tagline strong {
      font-style: normal;
      font-family: 'Inter', sans-serif;
      font-weight: 600;
      color: var(--accent);
    }

    /* ============================================================
       SERVICES
    ============================================================ */
    #services {
      padding: 140px 0;
      background: linear-gradient(180deg, var(--bg-primary), #060F22);
      position: relative;
    }
    .services-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
    }
    @media (max-width: 980px) {
      .services-grid { grid-template-columns: 1fr; gap: 22px; }
    }
    .service-card {
      position: relative;
      scroll-margin-top: 110px;
      padding: 44px 36px;
      background: var(--bg-card-dark);
      border: 1px solid var(--border-dark);
      border-radius: 22px;
      transition: all 0.5s var(--ease-out);
      overflow: hidden;
    }
    .service-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at top right, rgba(88,172,253,0.08), transparent 60%);
      opacity: 0;
      transition: opacity 0.5s;
    }
    .service-card:hover {
      transform: translateY(-6px);
      border-color: rgba(88,172,253,0.25);
    }
    .service-card:hover::before { opacity: 1; }
    .service-icon {
      width: 48px;
      height: 48px;
      margin-bottom: 24px;
      position: relative;
      z-index: 1;
    }
    .service-title {
      font-family: 'Fraunces', serif;
      font-size: 24px;
      font-weight: 500;
      letter-spacing: -0.01em;
      line-height: 1.2;
      margin-bottom: 16px;
      position: relative;
      z-index: 1;
    }
    .service-body {
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.7;
      margin-bottom: 24px;
      position: relative;
      z-index: 1;
    }
    .service-list {
      list-style: none;
      position: relative;
      z-index: 1;
    }
    .service-list li {
      font-size: 13px;
      color: var(--text-muted-2);
      padding: 9px 0;
      padding-left: 20px;
      position: relative;
      border-top: 1px solid var(--border-dark);
    }
    .service-list li:first-child { border-top: none; }
    .service-list li::before {
      content: "";
      position: absolute;
      left: 0; top: 50%;
      width: 6px; height: 1px;
      background: var(--accent);
      transform: translateY(-50%);
    }

    /* ============================================================
       EXPANSION
    ============================================================ */
    #expansion {
      padding: 140px 0;
      background: var(--bg-primary);
    }
    .expansion-grid {
      display: grid;
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
      gap: 80px;
      align-items: start;
    }
    @media (max-width: 980px) {
      .expansion-grid { grid-template-columns: 1fr; gap: 56px; }
    }
    .expansion-platforms {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 36px;
    }
    .platform-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      background: var(--bg-card-dark);
      border: 1px solid var(--border-dark);
      border-radius: 100px;
      font-size: 13px;
      font-weight: 500;
      color: var(--text-muted);
      transition: all 0.3s;
    }
    .platform-badge:hover {
      border-color: rgba(88,172,253,0.3);
      color: var(--text-light);
    }
    .platform-logo {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
    }
    .expansion-feature-list {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .expansion-feature {
      display: flex;
      gap: 22px;
      padding: 26px 0;
      border-top: 1px solid var(--border-dark);
      transition: all 0.3s;
    }
    .expansion-feature:hover { border-color: rgba(88,172,253,0.2); }
    .expansion-feature:last-child { border-bottom: 1px solid var(--border-dark); }
    .expansion-feature-icon {
      flex-shrink: 0;
      width: 42px; height: 42px;
      border-radius: 10px;
      background: rgba(88,172,253,0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--accent);
    }
    .expansion-feature-icon svg { width: 20px; height: 20px; }
    .expansion-feature-content h4 {
      font-family: 'Fraunces', serif;
      font-size: 18px;
      font-weight: 500;
      letter-spacing: -0.01em;
      margin-bottom: 8px;
    }
    .expansion-feature-content p {
      font-size: 13.5px;
      color: var(--text-muted);
      line-height: 1.65;
    }

    /* ============================================================
       INTELLIGENCE - SURVANTIS SHOWCASE
    ============================================================ */
    #intelligence {
      padding: 160px 0;
      background: var(--bg-light);
      color: var(--text-dark);
      position: relative;
      overflow: hidden;
    }
    #intelligence::before {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(7,17,31,0.08), transparent);
    }
    #intelligence::after {
      content: "";
      position: absolute;
      top: 0; right: 0;
      width: 600px; height: 600px;
      background: radial-gradient(circle, rgba(88,172,253,0.06), transparent 60%);
      pointer-events: none;
    }
    .intel-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 16px 8px 8px;
      background: rgba(88,172,253,0.08);
      border: 1px solid rgba(88,172,253,0.2);
      border-radius: 100px;
      font-size: 11.5px;
      font-weight: 500;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 24px;
    }
    .intel-eyebrow-dot {
      width: 8px; height: 8px;
      background: var(--accent);
      border-radius: 50%;
      box-shadow: 0 0 0 4px rgba(88,172,253,0.15);
      animation: pulse-dot 2s ease-in-out infinite;
    }
    @keyframes pulse-dot {
      0%, 100% { box-shadow: 0 0 0 4px rgba(88,172,253,0.15); }
      50% { box-shadow: 0 0 0 8px rgba(88,172,253,0.05); }
    }
    .intel-hero {
      text-align: center;
      max-width: 820px;
      margin: 0 auto 80px;
    }
    .intel-hero .section-headline-dark {
      margin-bottom: 24px;
    }
    .intel-hero-sub {
      font-size: 18px;
      color: #4A5868;
      line-height: 1.7;
    }

    .intel-mockup {
      position: relative;
      max-width: 1100px;
      margin: 0 auto 100px;
      border-radius: 24px;
      overflow: hidden;
      box-shadow:
        0 50px 100px -20px rgba(7,17,31,0.18),
        0 30px 60px -30px rgba(7,17,31,0.15);
    }
    .intel-mockup img {
      width: 100%;
      display: block;
    }
    .intel-mockup-frame {
      position: absolute;
      inset: 0;
      pointer-events: none;
      border: 1px solid rgba(7,17,31,0.08);
      border-radius: 24px;
    }

    .intel-features {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      margin-bottom: 100px;
      position: relative;
      z-index: 1;
    }
    @media (max-width: 980px) {
      .intel-features { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 560px) {
      .intel-features { grid-template-columns: 1fr; }
    }
    .intel-feature {
      padding: 36px 28px;
      background: #FFFFFF;
      border: 1px solid rgba(7,17,31,0.06);
      border-radius: 18px;
      transition: all 0.5s var(--ease-out);
    }
    .intel-feature:hover {
      transform: translateY(-4px);
      border-color: rgba(88,172,253,0.25);
      box-shadow: 0 20px 40px -20px rgba(7,17,31,0.1);
    }
    .intel-feature-icon {
      width: 44px; height: 44px;
      border-radius: 12px;
      background: rgba(88,172,253,0.1);
      color: var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 22px;
    }
    .intel-feature-icon svg { width: 22px; height: 22px; }
    .intel-feature h4 {
      font-family: 'Fraunces', serif;
      font-size: 19px;
      font-weight: 500;
      letter-spacing: -0.01em;
      color: var(--text-dark);
      margin-bottom: 10px;
      line-height: 1.25;
    }
    .intel-feature p {
      font-size: 13.5px;
      color: #5A6878;
      line-height: 1.65;
    }

    /* Survantis trust strip */
    .intel-strip {
      max-width: 1100px;
      margin: 0 auto 80px;
      padding: 36px 48px;
      background: var(--bg-primary);
      border-radius: 22px;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 36px;
      overflow: hidden;
      position: relative;
    }
    .intel-strip::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 80% 50%, rgba(88,172,253,0.15), transparent 50%);
      pointer-events: none;
    }
    @media (max-width: 880px) {
      .intel-strip { grid-template-columns: 1fr; text-align: center; padding: 32px; gap: 20px; }
    }
    .intel-strip-badge {
      display: flex;
      align-items: center;
      gap: 14px;
      position: relative;
      z-index: 1;
    }
    .intel-strip-logo {
      width: 56px; height: 56px;
      border-radius: 14px;
      background: linear-gradient(135deg, rgba(88,172,253,0.18), rgba(88,172,253,0.05));
      border: 1px solid rgba(88,172,253,0.25);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .intel-strip-logo svg { width: 28px; height: 28px; color: var(--accent); }
    .intel-strip-label {
      font-size: 10.5px;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--text-muted-2);
      margin-bottom: 4px;
    }
    .intel-strip-name {
      font-family: 'Fraunces', serif;
      font-size: 22px;
      font-weight: 500;
      color: var(--text-light);
      letter-spacing: -0.01em;
    }
    .intel-strip-name em {
      font-style: italic;
      color: var(--accent);
      font-weight: 300;
    }
    .intel-strip-text {
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.6;
      max-width: 460px;
      position: relative;
      z-index: 1;
    }
    @media (max-width: 880px) {
      .intel-strip-text { max-width: 100%; margin: 0 auto; }
      .intel-strip-badge { justify-content: center; }
    }
    .intel-strip-cta {
      position: relative;
      z-index: 1;
    }

    /* Process flow */
    .intel-process-wrap {
      max-width: 1100px;
      margin: 0 auto;
    }
    .intel-process-header {
      text-align: center;
      margin-bottom: 56px;
    }
    .intel-process-title {
      font-family: 'Fraunces', serif;
      font-size: 28px;
      font-weight: 400;
      color: var(--text-dark);
      letter-spacing: -0.01em;
      margin-bottom: 12px;
    }
    .intel-process-title em { font-style: italic; color: var(--accent); font-weight: 300; }
    .intel-process-sub {
      font-size: 15px;
      color: #5A6878;
    }
    .intel-process {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      position: relative;
    }
    @media (max-width: 880px) {
      .intel-process { grid-template-columns: repeat(2, 1fr); }
    }
    .intel-process::before {
      content: "";
      position: absolute;
      top: 36px;
      left: 12%;
      right: 12%;
      height: 1px;
      background: repeating-linear-gradient(90deg, rgba(88,172,253,0.3) 0, rgba(88,172,253,0.3) 4px, transparent 4px, transparent 12px);
      z-index: 0;
    }
    @media (max-width: 880px) { .intel-process::before { display: none; } }
    .intel-step {
      text-align: center;
      position: relative;
      z-index: 1;
    }
    .intel-step-circle {
      width: 72px; height: 72px;
      margin: 0 auto 22px;
      border-radius: 50%;
      background: #FFFFFF;
      border: 1px solid rgba(88,172,253,0.25);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      transition: all 0.4s var(--ease-out);
    }
    .intel-step-circle::after {
      content: "";
      position: absolute;
      inset: -6px;
      border: 1px solid rgba(88,172,253,0.15);
      border-radius: 50%;
      opacity: 0;
      transition: opacity 0.3s;
    }
    .intel-step:hover .intel-step-circle {
      transform: translateY(-3px);
      border-color: var(--accent);
    }
    .intel-step:hover .intel-step-circle::after { opacity: 1; }
    .intel-step-num {
      font-family: 'Fraunces', serif;
      font-style: italic;
      font-size: 22px;
      color: var(--accent);
      font-weight: 400;
    }
    .intel-step-title {
      font-family: 'Fraunces', serif;
      font-size: 16px;
      font-weight: 500;
      color: var(--text-dark);
      margin-bottom: 8px;
      letter-spacing: -0.005em;
    }
    .intel-step-body {
      font-size: 13px;
      color: #5A6878;
      line-height: 1.55;
      padding: 0 8px;
    }

    /* Light-bg CTA buttons */
    .btn-primary-light {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 16px 28px;
      background: var(--bg-primary);
      color: var(--text-light);
      font-size: 14px;
      font-weight: 600;
      border-radius: 100px;
      transition: all 0.35s var(--ease-out);
      letter-spacing: 0.01em;
    }
    .btn-primary-light:hover {
      background: var(--accent);
      transform: translateY(-2px);
      box-shadow: 0 12px 32px rgba(88,172,253,0.35);
    }
    .btn-primary-light svg { transition: transform 0.35s var(--ease-out); }
    .btn-primary-light:hover svg { transform: translateX(4px); }

    .btn-link-light {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 16px 24px;
      background: transparent;
      color: var(--text-dark);
      font-size: 14px;
      font-weight: 600;
      border: 1px solid rgba(7,17,31,0.18);
      border-radius: 100px;
      transition: all 0.35s var(--ease-out);
    }
    .btn-link-light:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    /* ============================================================
       PRESENCE (LOCATIONS)
    ============================================================ */
    #presence {
      padding: 160px 0;
      background: var(--bg-primary);
      position: relative;
      overflow: hidden;
    }
    #presence::before {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--border-dark), transparent);
    }
    .presence-map {
      max-width: 1240px;
      margin: 0 auto 64px;
      border-radius: 24px;
      overflow: hidden;
      position: relative;
      transform: translateZ(0);
    }
    .presence-map img {
      width: 100%;
      display: block;
      transition: transform 1.2s var(--ease-out);
    }
    .presence-map::before {
      content: "";
      position: absolute;
      inset: 0;
      box-shadow: inset 0 0 80px rgba(5,11,24,0.4);
      pointer-events: none;
      z-index: 1;
      border-radius: 24px;
    }
    .presence-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    @media (max-width: 980px) {
      .presence-grid { grid-template-columns: 1fr; }
    }
    .presence-card {
      position: relative;
      padding: 36px 32px 32px;
      background: var(--bg-card-dark);
      border: 1px solid var(--border-dark);
      border-radius: 20px;
      overflow: hidden;
      transition: all 0.5s var(--ease-out);
    }
    .presence-card::before {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
      opacity: 0.5;
      transition: opacity 0.4s;
    }
    .presence-card:hover {
      transform: translateY(-6px);
      border-color: rgba(201,167,95,0.3);
    }
    .presence-card:hover::before { opacity: 1; }
    .presence-card-head {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 28px;
    }
    .presence-flag {
      width: 52px; height: 52px;
      border-radius: 12px;
      background: linear-gradient(135deg, rgba(212,176,104,0.18), rgba(212,176,104,0.04));
      border: 1px solid rgba(212,176,104,0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .presence-flag svg { width: 30px; height: 30px; color: var(--gold); }
    .presence-code {
      font-family: 'Fraunces', serif;
      font-weight: 500;
      font-size: 17px;
      letter-spacing: 0.05em;
      color: var(--gold-2);
      font-feature-settings: "tnum";
    }
    .presence-country {
      font-family: 'Fraunces', serif;
      font-size: 20px;
      font-weight: 500;
      letter-spacing: -0.01em;
      line-height: 1.1;
      margin-bottom: 4px;
    }
    .presence-city {
      font-size: 11.5px;
      color: var(--accent-gold);
      letter-spacing: 0.18em;
      text-transform: uppercase;
      font-weight: 500;
    }
    .presence-divider {
      height: 1px;
      background: var(--border-dark);
      margin-bottom: 22px;
    }
    .presence-address {
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.7;
      margin-bottom: 22px;
    }
    .presence-phone {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 14px;
      font-weight: 500;
      color: var(--text-light);
      padding: 14px 18px;
      background: rgba(255,255,255,0.025);
      border: 1px solid var(--border-dark);
      border-radius: 10px;
      transition: all 0.3s;
    }
    .presence-phone:hover {
      border-color: rgba(201,167,95,0.3);
      background: rgba(201,167,95,0.04);
    }
    .presence-phone svg {
      color: var(--accent-gold);
      width: 16px; height: 16px;
      flex-shrink: 0;
    }

    /* ============================================================
       LEADERSHIP
    ============================================================ */
    #leadership {
      padding: 160px 0;
      background: var(--bg-light);
      color: var(--text-dark);
      position: relative;
      overflow: hidden;
    }
    .leadership-inner {
      display: grid;
      grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
      gap: 80px;
      align-items: start;
      margin-top: 56px;
    }
    @media (max-width: 980px) {
      .leadership-inner { grid-template-columns: 1fr; gap: 56px; }
    }

    .leader-card {
      background: #FFFFFF;
      border: 1px solid rgba(7,17,31,0.06);
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 20px 50px -20px rgba(7,17,31,0.12);
      position: relative;
      transition: all 0.6s var(--ease-out);
    }
    .leader-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 30px 70px -20px rgba(7,17,31,0.18);
    }
    .leader-photo-wrap {
      position: relative;
      aspect-ratio: 4 / 5;
      overflow: hidden;
      background: var(--bg-primary);
    }
    .leader-photo {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.8s var(--ease-out);
    }
    .leader-card:hover .leader-photo { transform: scale(1.03); }
    .leader-photo-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 40%, rgba(7,17,31,0.55) 100%);
      pointer-events: none;
    }
    .leader-photo-tag {
      position: absolute;
      bottom: 20px;
      left: 20px;
      right: 20px;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 14px;
      z-index: 2;
    }
    .leader-photo-name {
      color: var(--text-light);
    }
    .leader-photo-name strong {
      font-family: 'Fraunces', serif;
      font-size: 24px;
      font-weight: 500;
      letter-spacing: -0.01em;
      display: block;
      line-height: 1.1;
      margin-bottom: 4px;
    }
    .leader-photo-name span {
      font-size: 12px;
      color: rgba(255,255,255,0.75);
      letter-spacing: 0.02em;
    }
    .leader-linkedin {
      width: 42px; height: 42px;
      background: rgba(255,255,255,0.12);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-light);
      transition: all 0.4s var(--ease-out);
      flex-shrink: 0;
      position: relative;
    }
    .leader-linkedin::before {
      content: "";
      position: absolute;
      inset: -4px;
      border: 1px solid rgba(88,172,253,0.4);
      border-radius: 50%;
      opacity: 0;
      transition: all 0.4s;
    }
    .leader-linkedin:hover {
      background: var(--accent);
      border-color: var(--accent);
      transform: scale(1.08);
      box-shadow: 0 8px 24px rgba(88,172,253,0.4);
    }
    .leader-linkedin:hover::before {
      opacity: 1;
      inset: -8px;
    }
    .leader-linkedin svg { width: 18px; height: 18px; }

    .leader-card-bottom {
      padding: 32px 28px;
    }
    .leader-cred-label {
      font-size: 10.5px;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--text-muted-2);
      margin-bottom: 18px;
    }
    .leader-cred {
      padding: 11px 0;
      font-size: 13.5px;
      color: #4A5868;
      border-top: 1px solid rgba(7,17,31,0.07);
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .leader-cred:first-of-type { border-top: none; }
    .leader-cred::before {
      content: "";
      width: 4px; height: 4px;
      background: var(--accent);
      border-radius: 50%;
      flex-shrink: 0;
    }

    .leadership-right { padding-top: 6px; }
    .leadership-bio-label {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 22px;
      display: inline-flex;
      align-items: center;
      gap: 12px;
    }
    .leadership-bio-label::before {
      content: "";
      width: 28px;
      height: 1px;
      background: var(--accent);
      opacity: 0.6;
    }
    .leadership-bio p {
      font-size: 16px;
      color: #4A5868;
      line-height: 1.75;
      margin-bottom: 22px;
    }
    .leadership-values {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
      margin-top: 40px;
      padding-top: 36px;
      border-top: 1px solid rgba(7,17,31,0.08);
    }
    .leadership-value-title {
      font-family: 'Fraunces', serif;
      font-size: 22px;
      font-weight: 500;
      letter-spacing: -0.01em;
      color: var(--text-dark);
      margin-bottom: 6px;
    }
    .leadership-value-sub {
      font-size: 13px;
      color: #5A6878;
    }

    /* ============================================================
       CONTACT
    ============================================================ */
    #contact {
      padding: 160px 0 100px;
      background: var(--bg-primary);
      position: relative;
      overflow: hidden;
    }
    #contact::before {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--border-dark), transparent);
    }
    .contact-inner {
      display: grid;
      grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
      gap: 80px;
      align-items: start;
    }
    @media (max-width: 980px) {
      .contact-inner { grid-template-columns: 1fr; gap: 56px; }
    }
    .contact-headline {
      font-family: 'Fraunces', serif;
      font-weight: 400;
      font-size: clamp(34px, 4vw, 52px);
      letter-spacing: -0.022em;
      line-height: 1.08;
      margin: 18px 0 22px;
    }
    .contact-headline em {
      font-style: italic;
      font-weight: 300;
      color: var(--accent);
    }
    .contact-sub {
      font-size: 16.5px;
      color: var(--text-muted);
      line-height: 1.7;
      margin-bottom: 42px;
    }
    .contact-details {
      display: flex;
      flex-direction: column;
      gap: 22px;
    }
    .contact-detail {
      display: flex;
      gap: 18px;
      align-items: flex-start;
    }
    .contact-detail-icon {
      flex-shrink: 0;
      width: 44px; height: 44px;
      border-radius: 12px;
      background: rgba(88,172,253,0.08);
      border: 1px solid rgba(88,172,253,0.15);
      color: var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .contact-detail-icon svg { width: 18px; height: 18px; }
    .contact-detail-label {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--text-muted-2);
      margin-bottom: 4px;
    }
    .contact-detail-val {
      font-size: 15.5px;
      color: var(--text-light);
      font-weight: 500;
    }
    .contact-detail-val a { transition: color 0.3s; }
    .contact-detail-val a:hover { color: var(--accent); }

    .contact-form {
      padding: 44px 40px;
      background: var(--bg-card-dark);
      border: 1px solid var(--border-dark);
      border-radius: 22px;
      position: relative;
    }
    @media (max-width: 640px) {
      .contact-form { padding: 36px 28px; }
    }
    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-bottom: 18px;
    }
    @media (max-width: 560px) {
      .form-row { grid-template-columns: 1fr; }
    }
    .form-group { margin-bottom: 18px; }
    .form-label {
      display: block;
      font-size: 11.5px;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-muted-2);
      margin-bottom: 10px;
    }
    .form-input, .form-select, .form-textarea {
      width: 100%;
      padding: 14px 16px;
      background: rgba(255,255,255,0.02);
      border: 1px solid var(--border-dark);
      border-radius: 10px;
      font-family: inherit;
      font-size: 14.5px;
      color: var(--text-light);
      transition: all 0.3s;
    }
    .form-input::placeholder, .form-textarea::placeholder { color: var(--text-muted-2); opacity: 0.6; }
    .form-input:focus, .form-select:focus, .form-textarea:focus {
      outline: none;
      border-color: var(--accent);
      background: rgba(88,172,253,0.03);
    }
    .form-textarea {
      min-height: 120px;
      resize: vertical;
      font-family: inherit;
    }
    .form-select {
      appearance: none;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1l4 4 4-4' stroke='%237A8BA0' stroke-width='1.5' stroke-linecap='round'/></svg>");
      background-repeat: no-repeat;
      background-position: right 16px center;
      padding-right: 36px;
      cursor: pointer;
    }
    /* Style the dropdown options for browsers that respect this (Chrome, Edge, Safari, modern Firefox) */
    .form-select option {
      background-color: #0A1324;
      color: #FFFFFF;
      padding: 10px 12px;
    }
    .form-select option:checked,
    .form-select option:hover {
      background-color: #1B2636;
      color: var(--gold-2);
    }
    .form-select option[disabled] {
      color: var(--text-muted-2);
    }
    .form-submit {
      width: 100%;
      padding: 17px;
      background: var(--accent);
      color: var(--bg-primary);
      font-size: 14px;
      font-weight: 600;
      border-radius: 12px;
      transition: all 0.3s;
      letter-spacing: 0.01em;
      margin-top: 8px;
    }
    .form-submit:hover {
      background: var(--accent-2);
      transform: translateY(-2px);
      box-shadow: 0 12px 32px rgba(88,172,253,0.35);
    }
    .form-submit:disabled {
      opacity: 0.6;
      cursor: default;
      transform: none;
      box-shadow: none;
    }
    .form-note {
      text-align: center;
      font-size: 12px;
      color: var(--text-muted-2);
      margin-top: 18px;
    }
    .form-success {
      display: none;
      text-align: center;
      padding: 32px 0;
    }
    .form-success.show { display: block; }
    .form-success-icon {
      width: 56px; height: 56px;
      margin: 0 auto 18px;
      border-radius: 50%;
      background: rgba(88,172,253,0.1);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .form-success h3 {
      font-family: 'Fraunces', serif;
      font-size: 22px;
      font-weight: 500;
      margin-bottom: 8px;
    }
    .form-success p {
      font-size: 14px;
      color: var(--text-muted);
    }

    /* ============================================================
       FOOTER
    ============================================================ */
    footer {
      background: #030814;
      border-top: 1px solid var(--border-dark);
      padding: 80px 0 32px;
      position: relative;
    }
    .footer-top {
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
      gap: 56px;
      padding-bottom: 56px;
      border-bottom: 1px solid var(--border-dark);
      margin-bottom: 32px;
    }
    @media (max-width: 880px) {
      .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
    }
    @media (max-width: 560px) {
      .footer-top { grid-template-columns: 1fr; gap: 36px; }
    }
    .footer-brand img {
      height: 52px;
      width: auto;
      margin-bottom: 22px;
      display: block;
    }
    .footer-tag {
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.7;
      margin-bottom: 24px;
      max-width: 320px;
    }
    .footer-socials {
      display: flex;
      gap: 10px;
    }
    .footer-social {
      width: 40px; height: 40px;
      border-radius: 10px;
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--border-dark);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-muted);
      transition: all 0.3s;
    }
    .footer-social:hover {
      background: var(--accent);
      color: var(--bg-primary);
      border-color: var(--accent);
      transform: translateY(-2px);
    }
    .footer-social svg { width: 16px; height: 16px; }

    .footer-col-title {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--text-light);
      margin-bottom: 20px;
    }
    .footer-links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .footer-links a {
      font-size: 14px;
      color: var(--text-muted);
      transition: color 0.3s;
    }
    .footer-links a:hover { color: var(--accent); }

    .footer-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 24px;
      flex-wrap: wrap;
      padding-top: 12px;
    }
    .footer-copy {
      font-size: 12.5px;
      color: var(--text-muted-2);
    }
    .footer-legal {
      display: flex;
      gap: 28px;
      list-style: none;
    }
    .footer-legal a {
      font-size: 12.5px;
      color: var(--text-muted-2);
      transition: color 0.3s;
    }
    .footer-legal a:hover { color: var(--accent); }

    /* ============================================================
       UTILITIES & FINAL TOUCHES
    ============================================================ */
    /* Custom scrollbar - subtle */
    ::-webkit-scrollbar { width: 8px; }
    ::-webkit-scrollbar-track { background: var(--bg-primary); }
    ::-webkit-scrollbar-thumb { background: var(--slate); border-radius: 4px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--accent); }

    /* ============================================================
       MERIDIAN  ·  signature layer
       A cross-border consultancy deserves the visual language of
       navigation: meridian arcs, coordinate rails, hairline gold.
       Every animation below is transform/opacity only, and every
       one of them stops when the visitor asks for reduced motion.
    ============================================================ */

    /* ---- 1. Scroll meridian: a gold thread that tracks progress ---- */
    .meridian-progress {
      position: fixed;
      top: 0; left: 0;
      height: 2px;
      width: 100%;
      z-index: 2000;
      pointer-events: none;
      background: transparent;
    }
    .meridian-progress span {
      display: block;
      height: 100%;
      width: 100%;
      transform: scaleX(0);
      transform-origin: 0 50%;
      background: linear-gradient(90deg,
        rgba(212,176,104,0) 0%,
        var(--gold) 18%,
        var(--gold-2) 55%,
        var(--gold) 82%,
        rgba(212,176,104,0) 100%);
      box-shadow: 0 0 14px rgba(212,176,104,0.55);
      will-change: transform;
    }

    /* ---- 2. Coordinate rail: where am I in the document ---- */
    .coord-rail {
      position: fixed;
      /* The site's generic `nav` rule sets left/right to 0, which would
         stretch this rail across the whole viewport. Pin it explicitly. */
      left: auto;
      width: auto;
      right: 26px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 900;
      display: none;
      flex-direction: column;
      gap: 16px;
      padding: 18px 10px;
    }
    @media (min-width: 1180px) { .coord-rail { display: flex; } }

    .coord-rail::before {
      content: '';
      position: absolute;
      left: 50%;
      top: 0; bottom: 0;
      width: 1px;
      transform: translateX(-50%);
      background: linear-gradient(180deg,
        transparent,
        rgba(212,176,104,0.28) 12%,
        rgba(212,176,104,0.28) 88%,
        transparent);
    }

    .coord-dot {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 22px; height: 22px;
      border: 0;
      background: transparent;
      cursor: pointer;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }
    .coord-dot i {
      display: block;
      width: 6px; height: 6px;
      border-radius: 50%;
      background: rgba(255,255,255,0.26);
      transition: transform .45s var(--ease-spring), background-color .35s var(--ease-out);
    }
    .coord-dot:hover i { background: rgba(212,176,104,0.75); transform: scale(1.35); }
    .coord-dot[aria-current="true"] i {
      background: var(--gold);
      transform: scale(1.6);
      box-shadow: 0 0 0 4px rgba(212,176,104,0.16);
    }
    /* Ring that marks the active coordinate */
    .coord-dot[aria-current="true"]::after {
      content: '';
      position: absolute;
      inset: 0;
      border: 1px solid rgba(212,176,104,0.4);
      border-radius: 50%;
      animation: coordPulse 2.8s var(--ease-out) infinite;
    }
    @keyframes coordPulse {
      0%   { transform: scale(0.6); opacity: 0; }
      35%  { opacity: 1; }
      100% { transform: scale(1.25); opacity: 0; }
    }

    .coord-label {
      position: absolute;
      right: calc(100% + 14px);
      top: 50%;
      transform: translateY(-50%) translateX(6px);
      white-space: nowrap;
      font-size: 0.62rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      font-weight: 600;
      color: var(--gold);
      background: rgba(5,11,24,0.92);
      border: 1px solid var(--border-gold);
      border-radius: 999px;
      padding: 5px 12px;
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s var(--ease-out), transform .35s var(--ease-spring);
      backdrop-filter: blur(8px);
    }
    .coord-dot:hover .coord-label,
    .coord-dot:focus-visible .coord-label {
      opacity: 1;
      transform: translateY(-50%) translateX(0);
    }

    /* ---- 3. Hero meridian arcs: flight paths, drawn on entry ---- */
    .hero-meridians {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      overflow: hidden;
    }
    .hero-meridians svg {
      position: absolute;
      top: 50%; left: 50%;
      width: 160%;
      max-width: 1700px;
      transform: translate(-50%, -50%);
      opacity: 0.55;
    }
    .hero-meridians path {
      fill: none;
      stroke: url(#meridianGold);
      stroke-width: 1;
      stroke-dasharray: var(--len, 1400);
      stroke-dashoffset: var(--len, 1400);
      animation: drawMeridian 2.6s var(--ease-out) forwards;
    }
    .hero-meridians path:nth-child(2) { animation-delay: .28s; }
    .hero-meridians path:nth-child(3) { animation-delay: .52s; }
    .hero-meridians path:nth-child(4) { animation-delay: .74s; }
    @keyframes drawMeridian { to { stroke-dashoffset: 0; } }

    /* Slow-travelling node along the middle arc */
    .meridian-node {
      fill: var(--gold-2);
      filter: drop-shadow(0 0 6px rgba(212,176,104,0.9));
      offset-path: path('M 60 420 C 380 150, 1120 150, 1440 420');
      offset-distance: 0%;
      animation: travel 14s linear infinite;
    }
    @keyframes travel { to { offset-distance: 100%; } }

    /* ---- 4. Headline flourish: a rule that draws itself ---- */
    .hero-headline em { position: relative; }
    .hero-headline em::after {
      content: '';
      position: absolute;
      left: 0; right: 0;
      bottom: -0.14em;
      height: 2px;
      background: linear-gradient(90deg, var(--gold), rgba(212,176,104,0));
      transform: scaleX(0);
      transform-origin: 0 50%;
      animation: flourish 1.1s var(--ease-out) 1.05s forwards;
    }
    @keyframes flourish { to { transform: scaleX(1); } }

    /* ---- 5. Sheen: a slow diagonal light pass across cards ---- */
    .service-card,
    .intel-feature,
    .presence-card,
    .expansion-feature {
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }
    .service-card::after,
    .intel-feature::after,
    .presence-card::after,
    .expansion-feature::after {
      content: '';
      position: absolute;
      top: -60%;
      left: -75%;
      width: 45%;
      height: 220%;
      z-index: 1;
      pointer-events: none;
      background: linear-gradient(100deg,
        rgba(255,255,255,0) 0%,
        rgba(212,176,104,0.09) 45%,
        rgba(255,255,255,0.05) 55%,
        rgba(255,255,255,0) 100%);
      transform: translateX(0) skewX(-14deg);
      transition: transform 1.05s var(--ease-out);
    }
    .service-card:hover::after,
    .intel-feature:hover::after,
    .presence-card:hover::after,
    .expansion-feature:hover::after {
      transform: translateX(340%) skewX(-14deg);
    }

    /* Corner tick: a small cartographic mark that appears on hover */
    .service-card::before,
    .presence-card::before {
      content: '';
      position: absolute;
      top: 14px; right: 14px;
      width: 13px; height: 13px;
      z-index: 2;
      border-top: 1px solid var(--gold);
      border-right: 1px solid var(--gold);
      opacity: 0;
      transform: translate(-5px, 5px);
      transition: opacity .4s var(--ease-out), transform .5s var(--ease-spring);
    }
    .service-card:hover::before,
    .presence-card:hover::before {
      opacity: 0.85;
      transform: translate(0, 0);
    }

    /* ---- 6. Section headers: a gold coordinate tick ---- */
    .section-label,
    .section-eyebrow {
      position: relative;
    }
    .section-label::before,
    .section-eyebrow::before {
      content: '';
      position: absolute;
      left: -18px;
      top: 50%;
      width: 10px;
      height: 1px;
      background: var(--gold);
      transform: translateY(-50%) scaleX(0);
      transform-origin: 100% 50%;
      transition: transform .7s var(--ease-out);
    }
    .reveal.visible .section-label::before,
    .reveal.visible .section-eyebrow::before,
    .section-label.in::before,
    .section-eyebrow.in::before { transform: translateY(-50%) scaleX(1); }

    /* ---- 7. Magnetic primary actions ---- */
    .btn-gold, .btn-primary, .nav-cta, .form-submit {
      will-change: transform;
      transition: transform .35s var(--ease-spring),
                  background-color .3s var(--ease-out),
                  box-shadow .35s var(--ease-out),
                  color .3s var(--ease-out);
    }

    /* ---- 8. Ambient aurora, very slow, behind dark sections ---- */
    .aurora {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
    }
    .aurora::before,
    .aurora::after {
      content: '';
      position: absolute;
      width: 46vw; height: 46vw;
      max-width: 620px; max-height: 620px;
      border-radius: 50%;
      filter: blur(90px);
      opacity: 0.5;
    }
    .aurora::before {
      top: -14%; left: -8%;
      background: radial-gradient(circle, rgba(212,176,104,0.16), transparent 68%);
      animation: drift1 26s ease-in-out infinite alternate;
    }
    .aurora::after {
      bottom: -18%; right: -10%;
      background: radial-gradient(circle, rgba(88,172,253,0.13), transparent 68%);
      animation: drift2 32s ease-in-out infinite alternate;
    }
    @keyframes drift1 {
      to { transform: translate3d(9%, 7%, 0) scale(1.12); }
    }
    @keyframes drift2 {
      to { transform: translate3d(-8%, -6%, 0) scale(1.08); }
    }

    /* ---- 9. Reduced motion: honour it completely ---- */
    @media (prefers-reduced-motion: reduce) {
      .hero-meridians path {
        animation: none;
        stroke-dashoffset: 0;
      }
      .meridian-node { animation: none; }
      .hero-headline em::after { animation: none; transform: scaleX(1); }
      .coord-dot[aria-current="true"]::after { animation: none; }
      .aurora::before, .aurora::after { animation: none; }
      .service-card::after, .intel-feature::after,
      .presence-card::after, .expansion-feature::after { transition: none; }
      .meridian-progress span { transition: none; }
    }