html { scroll-behavior: smooth; }
    body { font-family: 'DM Sans', sans-serif; }
    .font-heading { font-family: 'Barlow Condensed', sans-serif; }
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: #010000; }
    ::-webkit-scrollbar-thumb { background: #274A6A; border-radius: 3px; }
    .nav-link { position: relative; transition: color 0.2s ease; }
    .nav-link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: #81B752; transition: width 0.2s ease; }
    .nav-link:hover::after { width: 100%; }
    .nav-link:hover { color: #81B752; }
    /* Mobile menu */
    #mobile-menu {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transition: max-height 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.3s ease;
    }
    .mobile-menu-link {
      display: block;
      padding: 0.75rem 0;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 600;
      font-size: 0.85rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(239,240,241,0.7);
      border-bottom: 1px solid rgba(83,166,220,0.1);
      transition: color 0.15s ease;
    }
    .mobile-menu-link:hover { color: #81B752; }
    .mobile-menu-link:last-child { border-bottom: none; }
    .mobile-menu-sub {
      display: block;
      padding: 0.5rem 0 0.5rem 1.25rem;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 600;
      font-size: 0.75rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(239,240,241,0.5);
      transition: color 0.15s ease;
    }
    .mobile-menu-sub:hover { color: #53A6DC; }
    /* Nav dropdown */
    .nav-dropdown { position: relative; }
    .nav-dropdown-menu {
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%) translateY(8px);
      min-width: 220px;
      padding: 0.5rem 0;
      border-radius: 0.75rem;
      background: rgba(39,74,106,0.85);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(83,166,220,0.2);
      box-shadow: 0 12px 40px rgba(0,0,0,0.4);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
      transform: translateX(-50%) translateY(16px);
      z-index: 60;
    }
    .nav-dropdown:hover .nav-dropdown-menu {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(8px);
    }
    .nav-dropdown-menu a {
      display: block;
      padding: 0.5rem 1.25rem;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 600;
      font-size: 0.75rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(239,240,241,0.6);
      transition: color 0.15s ease, background 0.15s ease;
    }
    .nav-dropdown-menu a:hover {
      color: #81B752;
      background: rgba(129,183,82,0.1);
    }
    .bullets { list-style: none; padding: 0; }
    .bullets li { padding-left: 1.4rem; position: relative; margin-bottom: 0.7rem; }
    .bullets li::before { content: ''; position: absolute; left: 0; top: 0.5rem; width: 0.45rem; height: 0.45rem; background: #81B752; border-radius: 50%; }

    /* ── Scroll reveal animation (bottom-to-top text clip) ── */
    .scroll-reveal {
      clip-path: inset(100% 0 0 0);
      opacity: 0;
      transition: clip-path 0.6s cubic-bezier(0.16,1,0.3,1), opacity 0.6s ease;
    }
    .scroll-reveal.revealed {
      clip-path: inset(0 0 0 0);
      opacity: 1;
    }
    .scroll-reveal-delay-1 { transition-delay: 0.1s; }
    .scroll-reveal-delay-2 { transition-delay: 0.2s; }

    /* ── Scroll fade-up animation for content blocks ── */
    .scroll-fade {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
    }
    .scroll-fade.revealed {
      opacity: 1;
      transform: translateY(0);
    }
    .scroll-fade-delay-1 { transition-delay: 0.15s; }
    .scroll-fade-delay-2 { transition-delay: 0.3s; }
    .scroll-fade-delay-3 { transition-delay: 0.45s; }

    /* ── Blueprint glow illustration styles ── */
    .blueprint-container {
      position: relative;
      padding: 2rem;
      border-radius: 1rem;
      background: rgba(255,255,255,0.04);
      backdrop-filter: blur(12px) saturate(1.2);
      -webkit-backdrop-filter: blur(12px) saturate(1.2);
      border: 1px solid rgba(255,255,255,0.1);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        inset 0 -1px 0 rgba(0,0,0,0.1),
        0 8px 32px rgba(0,0,0,0.2);
      overflow: hidden;
    }
    .blueprint-container::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        linear-gradient(rgba(83,166,220,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(83,166,220,0.05) 1px, transparent 1px);
      background-size: 24px 24px;
      pointer-events: none;
    }
    .blueprint-container::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(83,166,220,0.06) 0%, transparent 40%, rgba(83,166,220,0.04) 100%);
      pointer-events: none;
    }
    .blueprint-glow {
      filter: drop-shadow(0 0 12px rgba(83,166,220,0.4)) drop-shadow(0 0 40px rgba(83,166,220,0.15));
    }
    .blueprint-glow-green {
      filter: drop-shadow(0 0 12px rgba(129,183,82,0.4)) drop-shadow(0 0 40px rgba(129,183,82,0.15));
    }
    .blueprint-label {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 600;
      font-size: 0.8rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      fill: rgba(129,183,82,0.7);
    }
    @keyframes blueprintPulse {
      0%, 100% { opacity: 0.5; }
      50% { opacity: 1; }
    }
    .blueprint-pulse {
      animation: blueprintPulse 2.5s ease-in-out infinite;
    }
    @keyframes blueprintSpin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    .blueprint-spin {
      animation: blueprintSpin 4s linear infinite;
      transform-origin: center;
    }
    @keyframes pipeBurstAdvance {
      0%   { transform: translateX(0px); }
      85%  { transform: translateX(180px); }
      90%  { transform: translateX(180px); opacity: 1; }
      95%  { opacity: 0; }
      100% { transform: translateX(0px); opacity: 0; }
    }
    .pipe-burst-advance {
      animation: pipeBurstAdvance 8s ease-in-out infinite;
    }
    @keyframes pipeFragmentBurst {
      0%   { opacity: 0; transform: translate(0,0) scale(1); }
      15%  { opacity: 0; }
      20%  { opacity: 0.6; transform: translate(0,0) scale(1); }
      70%  { opacity: 0.4; }
      85%  { opacity: 0.6; transform: translate(var(--fx), var(--fy)) scale(0.6); }
      95%  { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(0.3); }
      100% { opacity: 0; transform: translate(0,0) scale(1); }
    }
    .pipe-fragment {
      animation: pipeFragmentBurst 8s ease-in-out infinite;
    }
    @keyframes pipeExpandTop {
      0%   { transform: translateY(0); }
      85%  { transform: translateY(-4px); }
      95%  { transform: translateY(-4px); }
      100% { transform: translateY(0); }
    }
    @keyframes pipeExpandBottom {
      0%   { transform: translateY(0); }
      85%  { transform: translateY(4px); }
      95%  { transform: translateY(4px); }
      100% { transform: translateY(0); }
    }
    .pipe-expand-top {
      animation: pipeExpandTop 8s ease-in-out infinite;
    }
    .pipe-expand-bottom {
      animation: pipeExpandBottom 8s ease-in-out infinite;
    }

    /* ── Pipeline flow animation ── */
    @keyframes pipelinePulse {
      0%   { left: -8%; opacity: 0; }
      5%   { opacity: 1; }
      95%  { opacity: 1; }
      100% { left: 100%; opacity: 0; }
    }
    .pipeline-pulse {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 8%;
      height: 6px;
      border-radius: 3px;
      background: linear-gradient(90deg, transparent, #53A6DC, #81B752, transparent);
      filter: blur(1px) drop-shadow(0 0 6px rgba(83,166,220,0.6));
      animation: pipelinePulse 4s ease-in-out infinite;
    }
    .pipeline-pulse:nth-child(2) { animation-delay: 2s; }
    @keyframes junctionGlow {
      0%, 20%  { box-shadow: 0 0 0px rgba(83,166,220,0); }
      25%, 45% { box-shadow: 0 0 18px rgba(83,166,220,0.5), 0 0 6px rgba(83,166,220,0.3); }
      50%, 70% { box-shadow: 0 0 18px rgba(129,183,82,0.5), 0 0 6px rgba(129,183,82,0.3); }
      75%, 95% { box-shadow: 0 0 18px rgba(83,166,220,0.5), 0 0 6px rgba(83,166,220,0.3); }
      100%     { box-shadow: 0 0 0px rgba(83,166,220,0); }
    }

    /* ── About card grid overlay ── */
    .about-card-grid {
      position: relative;
    }
    .about-card-grid::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(83,166,220,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(83,166,220,0.06) 1px, transparent 1px);
      background-size: 20px 20px;
      border-radius: 1rem;
      pointer-events: none;
    }

    /* ── Process feature cards hover ── */
    .process-feature-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    }

    /* ── Testimonial scrolling columns ── */
    @keyframes scrollUp {
      0%   { transform: translateY(0); }
      100% { transform: translateY(-50%); }
    }
    .testimonial-scroll-col:hover {
      animation-play-state: paused;
    }

    /* ── About card white grid overlay ── */
    .about-card-grid-white {
      position: relative;
    }
    .about-card-grid-white::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
      background-size: 20px 20px;
      border-radius: 1rem;
      pointer-events: none;
    }

    /* ── Section divider line ── */
    .section-divider {
      border-top: 1px solid rgba(83,166,220,0.15);
    }
    /* ── Section transitions (gradient fade at top) ── */
    .fade-from-black::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 200px;
      background: linear-gradient(to bottom, #010000 0%, rgba(10,18,32,0.5) 50%, transparent 100%);
      pointer-events: none;
      z-index: 1;
    }
    .fade-from-navy::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 200px;
      background: linear-gradient(to bottom, #0A1220 0%, rgba(1,0,0,0.5) 50%, transparent 100%);
      pointer-events: none;
      z-index: 1;
    }

    /* ── Grid background (ported from bg-grid) — applied site-wide ── */
    .hero-grid {
      background-image:
        linear-gradient(rgba(83,166,220,0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(83,166,220,0.12) 1px, transparent 1px);
      background-size: 48px 48px;
    }
    /* Grid overlay that works on both dark and light sections */
    .site-grid-dark {
      background-image:
        linear-gradient(rgba(83,166,220,0.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(83,166,220,0.10) 1px, transparent 1px);
      background-size: 48px 48px;
    }
    .site-grid-light {
      background-image:
        linear-gradient(rgba(39,74,106,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(39,74,106,0.07) 1px, transparent 1px);
      background-size: 48px 48px;
    }
    @keyframes beamSweep {
      0%   { offset-distance: 0%;   opacity: 0; }
      10%  { opacity: 1; }
      90%  { opacity: 1; }
      100% { offset-distance: 100%; opacity: 0; }
    }

    /* ── Hero animations (Framer Motion port) ── */
    @keyframes heroSlideDown {
      from { transform: translateY(-100%); opacity: 0; }
      to   { transform: translateY(0);     opacity: 1; }
    }
    @keyframes heroFadeUp {
      from { transform: translateY(24px); opacity: 0; }
      to   { transform: translateY(0);    opacity: 1; }
    }
    .anim-slide-down {
      animation: heroSlideDown 0.8s cubic-bezier(0.16,1,0.3,1) forwards;
    }
    .anim-fade-up {
      opacity: 0;
      animation: heroFadeUp 0.7s cubic-bezier(0.16,1,0.3,1) forwards;
    }
    /* Glass button — matches bg-white/10 backdrop-blur border-white/20 */
    .glass-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      background: rgba(129,183,82,0.35);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-top: 1px solid rgba(129,183,82,0.5);
      border-left: 1px solid rgba(129,183,82,0.4);
      border-bottom: 1px solid rgba(129,183,82,0.2);
      border-right: 1px solid rgba(129,183,82,0.2);
      color: #fff;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 1.1rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 1rem 2rem;
      border-radius: 0.5rem;
      transition: background 0.2s ease, transform 0.15s ease;
      text-decoration: none;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 4px 20px rgba(129,183,82,0.25);
    }
    .glass-btn:hover  { background: rgba(129,183,82,0.5); }
    .glass-btn:active { transform: scale(0.97); }
    .glass-btn:focus-visible { outline: 2px solid rgba(129,183,82,0.6); outline-offset: 2px; }

    /* ── Van drive-in animation ── */
    @keyframes vanDriveIn {
      from { transform: translateX(120%) translateY(-50%); }
      to   { transform: translateX(0%) translateY(-50%); }
    }
    .anim-van-drive {
      animation: vanDriveIn 1.4s cubic-bezier(0.16,1,0.3,1) 0.3s both;
    }

    /* Slow pulse animation for the tagline */
    @keyframes slowPulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.45; }
    }
    .slow-pulse {
      animation: slowPulse 5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    /* ── Service grid centering (all sizes) ── */
    .blueprint-container .grid a {
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /* ── Footer fade-in on mobile ── */
    @media (max-width: 1023px) {
      footer {
        position: relative;
      }
      footer::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 120px;
        background: linear-gradient(to bottom, transparent 0%, #010000 100%);
        pointer-events: none;
        z-index: 1;
        margin-top: -120px;
      }
    }

    /* ── Mobile-specific overrides ── */
    @media (max-width: 1023px) {
      /* Disable scroll-reveal clip animation on mobile — just use fade */
      .scroll-reveal {
        clip-path: none !important;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.5s ease, transform 0.5s ease;
      }
      .scroll-reveal.revealed {
        clip-path: none !important;
        opacity: 1;
        transform: translateY(0);
      }
      /* Nav more translucent on mobile */
      #main-nav {
        background: rgba(39,74,106,0.35) !important;
        border-color: rgba(83,166,220,0.15) !important;
      }
      /* Glass buttons — smaller on mobile */
      .glass-btn {
        font-size: 0.9rem;
        padding: 0.75rem 1.5rem;
      }
      /* Section padding tighter on mobile */
      section { padding-left: 0; padding-right: 0; }
      /* Service grid cards compact on mobile */
      .blueprint-container .grid a { padding: 1rem; text-align: center; display: flex; flex-direction: column; align-items: center; }
      .blueprint-container .grid a svg:first-of-type { width: 36px; height: 36px; }
      .blueprint-container .grid a h3 { font-size: 0.85rem; margin-top: 0.75rem; }
      .blueprint-container .grid a p { font-size: 0.75rem; margin-top: 0.25rem; }
      .blueprint-container .grid a span { font-size: 0.6rem; margin-top: 0.5rem; }
      /* Process steps compact on mobile */
      .process-step-item { padding: 0.6rem 0.75rem !important; }
      .process-step-circle { width: 2.25rem !important; height: 2.25rem !important; }
      /* Bullets tighter */
      .bullets li { margin-bottom: 0.5rem; }
    }
    @media (max-width: 639px) {
      .glass-btn {
        font-size: 0.8rem;
        padding: 0.7rem 1.25rem;
        width: 100%;
        justify-content: center;
      }
    }