* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

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

  body {
    background-color: #f5f0e8;
    color: #111;
    font-family: 'DM Sans', sans-serif;
    line-height: 1.6;
    position: relative;
    min-height: 100vh;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

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

  /* ── SITE-WIDE AMBIENT LAYER (ZERO-COST HARDWARE ACCELERATED GRADIENTS) ── */
  .ambient-backdrop {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    transform: translateZ(0);
    contain: strict;
  }

  .ambient-blob {
    position: absolute;
    border-radius: 50%;
    transform: translateZ(0);
    backface-visibility: hidden;
    pointer-events: none;
  }

  /* Blob 1: Pale Gold / Champagne (Top-Left) - Pure CSS gradient glow (No runtime blur overhead!) */
  .ambient-blob-1 {
    width: 700px;
    height: 700px;
    top: -200px;
    left: -180px;
    background: radial-gradient(circle at center, rgba(232, 98, 44, 0.07) 0%, rgba(201, 130, 76, 0.035) 45%, transparent 70%);
  }

  /* Blob 2: Warm Peach / Soft Blush (Middle-Right) */
  .ambient-blob-2 {
    width: 800px;
    height: 800px;
    top: 32%;
    right: -240px;
    background: radial-gradient(circle at center, rgba(255, 215, 0, 0.05) 0%, rgba(232, 98, 44, 0.025) 45%, transparent 70%);
  }

  /* Blob 3: Light Neutral Warm-Gray / Sand (Bottom-Left) */
  .ambient-blob-3 {
    width: 750px;
    height: 750px;
    bottom: -180px;
    left: 4%;
    background: radial-gradient(circle at center, rgba(169, 113, 66, 0.06) 0%, rgba(230, 220, 205, 0.03) 45%, transparent 70%);
  }

  /* ── NAV ── */
  @keyframes navFadeIn {
    0% {
      opacity: 0;
      transform: translateY(-8px);
    }

    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  body>nav:not(.footer-nav) {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    background: rgba(18, 18, 18, 0.95);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    padding: 0.8rem 2rem;
    /* Stable padding - zero layout shift on scroll */
    transform: translateZ(0);
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  }

  /* Scrolled state: Clean opacity & warm bottom border accent without layout shift */
  body>nav:not(.footer-nav).scrolled {
    background: rgba(14, 14, 14, 0.98);
    border-bottom: 1px solid rgba(232, 98, 44, 0.25);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  }

  .nav-inner {
    max-width: 1360px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
  }

  /* ── LOGO LOCKUP ── */
  .nav-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 1;
    user-select: none;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .nav-logo:hover {
    transform: scale(1.02);
  }

  .nav-logo-img {
    height: 42px;
    max-height: 42px;
    width: auto;
    display: block;
    object-fit: contain;
    border-radius: 6px;
    background: #ffffff;
    padding: 3px 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }

  .nav-logo:hover .nav-logo-img {
    box-shadow: 0 4px 15px rgba(232, 98, 44, 0.35);
  }

  .footer-brand-logo {
    display: inline-block;
    margin-bottom: 0.85rem;
    text-decoration: none;
  }

  .footer-logo-img {
    height: 40px;
    max-height: 40px;
    width: auto;
    display: block;
    object-fit: contain;
    border-radius: 4px;
  }

  .nav-logo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
  }

  .nav-logo-text-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .nav-logo-text {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.25rem, 2vw, 1.42rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    line-height: 1;
    color: #ffffff;
  }

  .nav-logo-sub {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: #a97142;
    line-height: 1;
  }

  /* ── NAV LINKS ── */
  .nav-links {
    display: flex;
    gap: 2.4rem;
    align-items: center;
  }

  .nav-links a {
    position: relative;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.84rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    padding: 0.4rem 0;
    transition: color 0.25s ease;
  }

  /* Animated underline on hover (sliding left to right) */
  .nav-links a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: #E8622C;
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(232, 98, 44, 0.6);
    transition: width 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
  }

  .nav-links a:hover {
    color: #E8622C;
  }

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

  /* Active / current page link */
  .nav-links a.active,
  .nav-links a[aria-current="page"] {
    color: #ffffff;
  }

  .nav-links a.active::after,
  .nav-links a[aria-current="page"]::after {
    width: 100%;
    background: #E8622C;
  }

  /* ── CTA PILL BUTTON "LET'S TALK" ── */
  .nav-cta {
    background: #E8622C;
    color: #ffffff;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.65rem 1.65rem;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(232, 98, 44, 0.25);
    transition: background 0.25s ease-out,
      transform 0.25s ease-out,
      box-shadow 0.25s ease-out;
    will-change: transform, box-shadow;
  }

  .nav-cta:hover {
    background: #d4531f;
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(232, 98, 44, 0.45), 0 4px 14px rgba(212, 83, 31, 0.35);
  }

  .nav-cta:active {
    transform: translateY(0);
    box-shadow: 0 0 10px rgba(232, 98, 44, 0.3);
  }

  /* ── MOBILE NAV TOGGLE (HAMBURGER) ── */
  .nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
  }

  .nav-toggle span {
    display: block;
    width: 100%;
    height: 2.5px;
    background: #ffffff;
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  nav.nav-open .nav-toggle span:nth-child(1) {
    transform: translateY(8.5px) rotate(45deg);
    background: #E8622C;
  }

  nav.nav-open .nav-toggle span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }

  nav.nav-open .nav-toggle span:nth-child(3) {
    transform: translateY(-8.5px) rotate(-45deg);
    background: #E8622C;
  }

  @media (max-width: 860px) {
    .nav-toggle {
      display: flex;
    }

    .nav-links {
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      background: rgba(18, 18, 18, 0.98);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(232, 98, 44, 0.25);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.65);
      flex-direction: column;
      align-items: flex-start;
      padding: 2rem 2rem 2.5rem;
      gap: 1.25rem;
      opacity: 0;
      pointer-events: none;
      transform: translateY(-12px);
      transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    nav.nav-open .nav-links {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

    .nav-links a {
      font-size: 1.05rem;
      width: 100%;
      padding: 0.5rem 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .nav-links a:hover,
    .nav-links a.active {
      color: #E8622C;
    }

    .nav-links .nav-cta {
      width: 100%;
      text-align: center;
      margin-top: 0.75rem;
      padding: 0.85rem 1.5rem;
    }
  }

  @media (max-width: 480px) {
    body>nav:not(.footer-nav) {
      padding: 0.75rem 1.25rem;
    }

    .nav-logo-icon {
      width: 36px;
      height: 36px;
    }

    .nav-logo-text {
      font-size: 1.18rem;
    }

    .nav-logo-sub {
      font-size: 0.52rem;
    }
  }

  /* ── IMAGE PLACEHOLDER SYSTEM ── */
  .img-placeholder {
    background: #f0f0f0;
    border: 2px dashed #bbb;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
  }

  .img-placeholder::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(45deg, transparent, transparent 10px,
        rgba(0, 0, 0, 0.03) 10px, rgba(0, 0, 0, 0.03) 20px);
  }

  .img-placeholder-icon {
    font-size: 2rem;
    opacity: 0.3;
    position: relative;
    z-index: 1;
  }

  .img-placeholder-name {
    font-family: 'Poppins', sans-serif;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #111;
    opacity: 0.7;
    position: relative;
    z-index: 1;
  }

  .img-placeholder-hint {
    font-size: 0.72rem;
    color: #666;
    line-height: 1.4;
    max-width: 200px;
    position: relative;
    z-index: 1;
  }

  .img-placeholder-size {
    font-size: 0.65rem;
    color: #999;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    position: relative;
    z-index: 1;
  }

  /* Yellow background placeholder (for dark sections) */
  .img-placeholder.dark {
    background: rgba(255, 215, 0, 0.1);
    border-color: rgba(255, 215, 0, 0.4);
  }

  .img-placeholder.dark .img-placeholder-name {
    color: #E8622C;
    opacity: 1;
  }

  .img-placeholder.dark .img-placeholder-hint {
    color: rgba(255, 255, 255, 0.5);
  }

  .img-placeholder.dark .img-placeholder-size {
    color: rgba(255, 215, 0, 0.5);
  }

  /* ── CLEAN CORPORATE-PREMIUM LIGHT HERO (Geometric Texture & Bronze/Orange Accents) ── */
  .hero {
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 55%, #f5f5f5 100%);
    position: relative;
    padding: clamp(5rem, 9.5vh, 7.5rem) 2rem clamp(5rem, 9.5vh, 7.5rem);
    border-bottom: 1px solid rgba(169, 113, 66, 0.25);
    overflow: hidden;
    color: #111111;
  }

  /* 3D Geometric Line-Art Pattern Layer (Faint Monochrome Gray + Subtle Bronze Highlights) */
  .hero-geometric-layer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 62%;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 0) 100%);
  }

  .hero-geometric-svg {
    width: 100%;
    height: 100%;
    max-width: 860px;
    opacity: 0.9;
  }

  /* ── HERO INNER & TWO COLUMNS ── */
  .hero-inner {
    max-width: 1360px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 3rem;
    align-items: center;
  }

  /* Left Column Staggered Animation & Styling */
  .hero-eyebrow {
    font-size: clamp(0.72rem, 3.2vw, 0.82rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #E8622C;
    margin-bottom: 1.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    line-height: 1.35;
    animation: heroFadeUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
  }

  .hero-eyebrow-dot {
    width: 7px;
    height: 7px;
    min-width: 7px;
    border-radius: 50%;
    background-color: #E8622C;
    display: inline-block;
    flex-shrink: 0;
  }

  .hero h1 {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(2.8rem, 5.8vw, 5rem);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -0.035em;
    color: #111111;
    margin-bottom: 1.5rem;
    animation: heroFadeUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.22s both;
  }

  .hero-sub {
    font-size: 1.1rem;
    line-height: 1.75;
    color: #4a4a4a;
    margin-bottom: 2.25rem;
    max-width: 520px;
    font-weight: 400;
    animation: heroFadeUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.36s both;
  }

  .hero-btns {
    display: flex;
    gap: 1.15rem;
    flex-wrap: wrap;
    margin-bottom: 0;
    animation: heroFadeUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
  }

  /* Primary Button: Solid Navy Blue */
  .btn-primary {
    background: #1e3a5f;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 0.88rem;
    padding: 0.95rem 2.2rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.25s ease-out;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    box-shadow: 0 4px 14px rgba(30, 58, 95, 0.22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .btn-primary:hover {
    transform: translateY(-2px);
    background: #254977;
    color: #ffffff;
    box-shadow: 0 8px 22px rgba(30, 58, 95, 0.32);
  }

  /* Outline Button: White BG, Thin Black Border -> Orange Hover */
  .btn-outline {
    background: #ffffff;
    color: #111111;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 0.88rem;
    padding: 0.95rem 2.2rem;
    border: 1.5px solid #111111;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.25s ease-out;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  }

  .btn-outline:hover {
    border-color: #E8622C;
    color: #E8622C;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(232, 98, 44, 0.16);
    transform: translateY(-2px);
  }

  /* Founder photo row */
  .hero-founders {
    display: flex;
    align-items: center;
    gap: 1rem;
    animation: heroFadeUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.62s both;
  }

  .hero-founder-photos {
    display: flex;
  }

  .hero-founder-photo {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid #a97142;
    box-shadow: 0 2px 8px rgba(169, 113, 66, 0.2);
    overflow: hidden;
    margin-left: -10px;
    background: #f5f5f5;
  }

  .hero-founder-photo:first-child {
    margin-left: 0;
  }

  .hero-founder-photo .img-placeholder {
    width: 100%;
    height: 100%;
    border: none;
    padding: 0;
    background: #f0ebe4;
    border-radius: 50%;
  }

  .hero-founder-photo .img-placeholder-icon {
    font-size: 1rem;
    color: #a97142;
    opacity: 0.85;
  }

  .hero-founder-text {
    font-size: 0.88rem;
    font-weight: 600;
    color: #4a4a4a;
    letter-spacing: 0.02em;
  }

  /* ── HERO STATS STRIP (With Animated Count-Up Numbers) ── */
  .hero-stats-strip {
    display: flex;
    align-items: center;
    gap: 1.8rem;
    margin-top: 2.2rem;
    padding-top: 1.8rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }

  .hero-stat-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
  }

  .hero-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(232, 98, 44, 0.09);
    color: #E8622C;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    border: 1px solid rgba(232, 98, 44, 0.22);
    box-shadow: 0 4px 14px rgba(232, 98, 44, 0.12);
  }

  .hero-stat-icon svg {
    width: 24px;
    height: 24px;
    stroke: #E8622C;
  }

  .hero-stat-num {
    font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
    font-size: clamp(2.1rem, 3vw, 2.4rem);
    font-weight: 600;
    line-height: 1.05;
    color: #E8622C;
    margin-bottom: 0.3rem;
    letter-spacing: -0.01em;
  }

  .hero-stat-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.84rem;
    font-weight: 500;
    color: #555555;
    line-height: 1.35;
  }

  .hero-stat-divider {
    width: 1px;
    height: 75px;
    background: rgba(0, 0, 0, 0.12);
    align-self: center;
    flex-shrink: 0;
  }

  /* ── RIGHT COLUMN: FULL-BLEED RIVULET-STYLE PARTICLE STAGE (NO BOXES) ── */
  .hero-right {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 520px;
    z-index: 2;
  }

  .hero-particle-stage {
    width: 100%;
    height: 520px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: crosshair;
  }

  #heroParticleCanvas {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: auto;
  }

  .hero-stat-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }

  .stat-box {
    background: #ffffff;
    border: 1.5px solid rgba(169, 113, 66, 0.6);
    padding: 1.6rem 1.4rem;
    border-radius: 9px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  }

  .stat-box:hover {
    transform: translateY(-2px);
    border-color: #a97142;
    box-shadow: 0 12px 30px rgba(169, 113, 66, 0.14);
  }

  .stat-badge-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3.5px;
    background: linear-gradient(90deg, #a97142 0%, #E8622C 100%);
  }

  .stat-box .num {
    font-family: 'Poppins', sans-serif;
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 0.45rem;
    color: #1e3a5f;
  }

  .stat-box .label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #4a4a4a;
    line-height: 1.4;
  }

  @keyframes heroFadeUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }

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

  /* ── RESPONSIVE & REDUCED MOTION ── */
  @media (max-width: 960px) {
    .hero {
      padding: 3rem 1.5rem 2.5rem;
    }

    .hero-inner {
      grid-template-columns: 1fr;
      gap: 2rem;
    }

    .hero-right {
      width: 100%;
      max-width: 100%;
      min-height: 340px;
      height: 340px;
      overflow: hidden;
    }

    .hero-particle-stage {
      width: 100%;
      max-width: 100%;
      height: 340px;
      overflow: hidden;
    }

    .hero-geometric-layer {
      width: 100%;
      opacity: 0.2;
    }
  }

  @media (max-width: 540px) {
    .hero {
      padding: 2.5rem 1.25rem 2rem;
    }

    .hero-inner {
      gap: 1.5rem;
    }

    .hero-eyebrow {
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      margin-bottom: 0.5rem;
      padding: 4px 10px;
      background: rgba(232, 98, 44, 0.08);
      border: 1px solid rgba(232, 98, 44, 0.22);
      border-radius: 20px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .hero h1 {
      font-size: clamp(2.2rem, 8.5vw, 2.75rem);
      line-height: 1.08;
      margin-bottom: 0.65rem;
      letter-spacing: -0.035em;
    }

    .hero-sub {
      font-size: 0.92rem;
      line-height: 1.5;
      margin-bottom: 1.15rem;
      color: #4a4a4a;
    }

    .hero-btns {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 0.5rem;
      width: 100%;
    }

    .btn-primary,
    .btn-outline {
      height: 46px;
      flex: 1;
      padding: 0 0.85rem;
      font-size: 0.82rem;
      font-weight: 800;
      letter-spacing: 0.04em;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      white-space: nowrap;
    }

    .btn-primary {
      background: #E8622C;
      border: 1.5px solid #E8622C;
      color: #ffffff;
      box-shadow: 0 4px 14px rgba(232, 98, 44, 0.28);
    }

    .btn-outline {
      background: #ffffff;
      border: 1.5px solid rgba(17, 17, 17, 0.35);
      color: #111111;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    .hero-stats-strip {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 0.75rem;
      margin-top: 1.6rem;
      padding-top: 1.4rem;
    }

    .hero-stat-icon {
      width: 38px;
      height: 38px;
      margin-bottom: 0.5rem;
    }

    .hero-stat-icon svg {
      width: 19px;
      height: 19px;
    }

    .hero-stat-num {
      font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
      font-size: 1.6rem;
      font-weight: 600;
    }

    .hero-stat-label {
      font-size: 0.72rem;
      font-weight: 500;
      color: #555555;
      line-height: 1.25;
    }

    .hero-stat-divider {
      display: none;
    }

    .hero-right {
      min-height: 280px;
      height: 280px;
      width: 100%;
      max-width: 100%;
      overflow: hidden;
    }

    .hero-particle-stage {
      height: 280px;
      width: 100%;
      max-width: 100%;
    }
  }

  @media (prefers-reduced-motion: reduce) {

    .hero-eyebrow,
    .hero h1,
    .hero-sub,
    .hero-btns,
    .hero-founders,
    .hero-path-primary,
    .hero-path-secondary,
    .hero-path-ambient,
    .hero-path-accent {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
      stroke-dashoffset: 0 !important;
    }
  }

  /* ── TRUST STRIP (Refined Corporate-Premium Brands Bar) ── */
  .trust-strip {
    background: #faf7f2;
    color: #111111;
    padding: 2.25rem 2rem;
    border-top: 1px solid rgba(169, 113, 66, 0.16);
    border-bottom: 1px solid rgba(169, 113, 66, 0.22);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    position: relative;
    z-index: 5;
  }

  .trust-strip-inner {
    max-width: 1360px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.85rem;
  }

  .trust-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #E8622C;
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    opacity: 1;
    transform: none;
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  }

  .trust-label-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #E8622C;
    display: inline-block;
    box-shadow: 0 0 8px rgba(232, 98, 44, 0.5);
    animation: pulseDot 2.2s ease-in-out infinite;
  }

  @keyframes pulseDot {

    0%,
    100% {
      transform: scale(1);
      opacity: 0.85;
      box-shadow: 0 0 6px rgba(232, 98, 44, 0.4);
    }

    50% {
      transform: scale(1.35);
      opacity: 1;
      box-shadow: 0 0 12px rgba(232, 98, 44, 0.8);
    }
  }

  .trust-logos {
    display: flex;
    gap: 1.15rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
  }

  .trust-logo-box {
    padding: 0.6rem 1.45rem;
    background: #ffffff;
    border: 1.5px solid rgba(169, 113, 66, 0.6);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #1e3a5f;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    transition: all 0.25s ease-out;
    cursor: pointer;
    opacity: 1;
    transform: none;
    will-change: transform, opacity, box-shadow;
  }

  .trust-logo-box:hover {
    border-color: #a97142;
    background: rgba(169, 113, 66, 0.08);
    color: #142842;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(169, 113, 66, 0.18);
  }

  .trust-dot {
    width: 6px;
    height: 6px;
    background: rgba(169, 113, 66, 0.5);
    border-radius: 50%;
    flex-shrink: 0;
    opacity: 0.5;
    transform: none;
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  }

  /* Staggered Scroll-Reveal */
  .trust-strip.in-view .trust-label {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.05s;
  }

  .trust-strip.in-view .trust-logo-box {
    opacity: 1;
    transform: translateY(0);
  }

  .trust-strip.in-view .trust-dot {
    opacity: 0.5;
    transform: translateY(0);
  }

  .trust-strip.in-view .trust-logo-box:nth-of-type(1) {
    transition-delay: 0.15s;
  }

  .trust-strip.in-view .trust-dot:nth-of-type(1) {
    transition-delay: 0.22s;
  }

  .trust-strip.in-view .trust-logo-box:nth-of-type(2) {
    transition-delay: 0.28s;
  }

  .trust-strip.in-view .trust-dot:nth-of-type(2) {
    transition-delay: 0.35s;
  }

  .trust-strip.in-view .trust-logo-box:nth-of-type(3) {
    transition-delay: 0.42s;
  }

  @media (max-width: 900px) {
    .trust-strip {
      padding: 1.6rem 1rem;
    }

    .trust-strip-inner {
      flex-direction: column;
      text-align: center;
      gap: 0.9rem;
    }

    .trust-dot {
      display: none !important;
    }

    .trust-logos {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.65rem;
      width: 100%;
    }

    .trust-logo-box {
      flex: 1 1 auto;
      max-width: 160px;
      font-size: 0.76rem;
      padding: 0.55rem 0.85rem;
    }
  }

  /* ── PORTFOLIO ("OUR WORK" - Clean Corporate-Premium Case Studies) ── */
  .portfolio {
    padding: clamp(5rem, 8.5vh, 7rem) 2rem;
    background: #ffffff;
    border-bottom: 1px solid rgba(169, 113, 66, 0.2);
    position: relative;
    z-index: 2;
  }

  .portfolio .section-inner {
    max-width: 1360px;
    margin: 0 auto;
  }

  .portfolio .section-eyebrow {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #E8622C;
    margin-bottom: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    opacity: 1;
    transform: none;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }

  .portfolio .section-heading {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(2rem, 4.2vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: #111111;
    margin-bottom: 3rem;
    opacity: 1;
    transform: none;
    transition: opacity 0.6s ease-out 0.1s, transform 0.6s ease-out 0.1s;
  }

  /* ── UNIFIED TAG / BADGE STYLE (Used across all cards) ── */
  .work-card-tag,
  .work-card-tag.built {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: rgba(232, 98, 44, 0.12);
    color: #E8622C;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    display: inline-block;
    margin-bottom: 1.15rem;
    border: 1px solid rgba(232, 98, 44, 0.28);
  }

  /* ══════════════════════════════════════════════════════════════
     MODERN SYMMETRICAL PORTFOLIO GRID SYSTEM
     ══════════════════════════════════════════════════════════════ */
  .portfolio-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
  }

  .portfolio-card {
    background: #ffffff;
    border: 2px solid #111111;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }

  .portfolio-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.09);
  }

  /* Top Mockup Window */
  .card-mockup-window {
    height: 240px;
    background: linear-gradient(135deg, #111a24 0%, #1e3650 100%);
    position: relative;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #ffffff;
    border-bottom: 2px solid #111111;
  }

  .card-mockup-window.theme-amber {
    background: linear-gradient(135deg, #24140b 0%, #4a2815 100%);
  }

  .card-mockup-window.theme-emerald {
    background: linear-gradient(135deg, #0e1e17 0%, #173f2f 100%);
  }

  .card-mockup-window.theme-indigo {
    background: linear-gradient(135deg, #161226 0%, #2f224f 100%);
  }

  .card-mockup-window.theme-crimson {
    background: linear-gradient(135deg, #260e14 0%, #4d1c28 100%);
  }

  .card-mockup-window.theme-slate {
    background: linear-gradient(135deg, #182026 0%, #2c3842 100%);
  }

  /* Browser Header Simulation */
  .window-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .window-dots {
    display: flex;
    gap: 6px;
  }

  .window-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
  }

  .window-tag {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: rgba(255, 255, 255, 0.15);
    padding: 0.25rem 0.65rem;
    border-radius: 4px;
  }

  /* Center Floating UI Badge */
  .window-center-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: auto 0;
  }

  .visual-icon {
    font-size: 2.2rem;
    margin-bottom: 0.35rem;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
  }

  .visual-app-name {
    font-family: 'Poppins', sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.01em;
  }

  .visual-app-sub {
    font-size: 0.78rem;
    opacity: 0.75;
    font-weight: 500;
  }

  /* Bottom Impact Highlight Ribbon */
  .window-bottom-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .impact-badge {
    background: #E8622C;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.3rem 0.75rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .industry-pill {
    font-size: 0.72rem;
    opacity: 0.8;
    font-weight: 600;
  }

  /* Card Body Content */
  .card-content-body {
    padding: 2rem 2.25rem 2.25rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
  }

  .card-title-row {
    margin-bottom: 0.75rem;
  }

  .card-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    color: #111111;
    letter-spacing: -0.02em;
    line-height: 1.25;
  }

  .card-description {
    font-size: 0.92rem;
    line-height: 1.7;
    color: #555555;
    margin-bottom: 1.5rem;
  }

  /* 3 Key Metrics Row */
  .card-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    padding: 1rem 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    margin-bottom: 1.5rem;
  }

  .metric-box .metric-num {
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem;
    font-weight: 800;
    color: #111111;
    line-height: 1.1;
  }

  .metric-box .metric-lbl {
    font-size: 0.68rem;
    font-weight: 700;
    color: #777777;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.25rem;
  }

  /* Tech Stack & Footer CTA */
  .card-footer-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .card-tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .tech-tag {
    background: #f4eee5;
    color: #444444;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.25rem 0.65rem;
    border-radius: 4px;
  }

  .card-action-btn {
    font-family: 'Poppins', sans-serif;
    font-size: 0.82rem;
    font-weight: 800;
    color: #111111;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: color 0.2s ease, transform 0.2s ease;
  }

  .card-action-btn:hover {
    color: #E8622C;
    transform: translateX(4px);
  }

  .portfolio-explore-cta {
    display: flex;
    justify-content: center;
    margin-top: 2.5rem;
  }

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

    .card-content-body {
      padding: 1.75rem 1.5rem;
    }

    .card-metrics-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 0.5rem;
    }
  }

  /* ── 3-COLUMN CTA GRID (Corporate-Premium Navy / Orange / Bronze) ── */
  .cta-section {
    padding: clamp(4.5rem, 8vh, 6.5rem) 2rem;
    background: transparent;
    border-bottom: 1px solid rgba(169, 113, 66, 0.2);
    position: relative;
    z-index: 2;
  }

  .cta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    border: none;
  }

  .cta-card {
    padding: 3rem 2.25rem 2.75rem;
    border-radius: 14px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    opacity: 1;
    transform: none;
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 0.35s ease;
    will-change: transform, opacity, box-shadow;
  }

  /* Card In-View Scroll Reveal */
  .cta-card.in-view {
    opacity: 1;
    transform: translateY(0);
  }

  .cta-card:nth-child(1) {
    transition-delay: 0.1s;
  }

  .cta-card:nth-child(2) {
    transition-delay: 0.25s;
  }

  .cta-card:nth-child(3) {
    transition-delay: 0.4s;
  }

  /* Card Hover Lift */
  .cta-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.16), 0 4px 14px rgba(0, 0, 0, 0.08);
  }

  /* Subtle Ambient Corner Glow & Linear Texture */
  .cta-card::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
  }

  .cta-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(45deg,
        transparent,
        transparent 14px,
        rgba(255, 255, 255, 0.018) 14px,
        rgba(255, 255, 255, 0.018) 28px);
    pointer-events: none;
  }

  /* Card 1: Navy Blue Gradient */
  .cta-card.red {
    background: linear-gradient(135deg, #1e3a5f 0%, #132742 100%);
    color: #ffffff;
    border-color: rgba(30, 58, 95, 0.3);
  }

  /* Card 2: Burnt Orange Gradient */
  .cta-card.blue {
    background: linear-gradient(135deg, #E8622C 0%, #ba4617 100%);
    color: #ffffff;
    border-color: rgba(232, 98, 44, 0.35);
  }

  /* Card 3: Bronze/Copper Gradient */
  .cta-card.yellow {
    background: linear-gradient(135deg, #a97142 0%, #7e4f27 100%);
    color: #ffffff;
    border-color: rgba(169, 113, 66, 0.35);
  }

  .cta-card h3 {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.22rem, 2vw, 1.38rem);
    font-weight: 800;
    line-height: 1.35;
    margin-bottom: 1.15rem;
    letter-spacing: -0.015em;
    color: #ffffff;
    position: relative;
    z-index: 1;
  }

  .cta-card p {
    font-size: 0.94rem;
    line-height: 1.7;
    margin-bottom: 2.25rem;
    color: rgba(255, 255, 255, 0.88);
    font-weight: 400;
    flex-grow: 1;
    position: relative;
    z-index: 1;
  }

  /* Refined Solid White Button with Matching Colored Text */
  .cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    padding: 0.85rem 1.8rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    transition: transform 0.25s ease-out, box-shadow 0.25s ease-out, background-color 0.25s ease-out;
    position: relative;
    z-index: 1;
    align-self: flex-start;
  }

  .cta-card.red .cta-btn {
    color: #1e3a5f;
  }

  .cta-card.blue .cta-btn {
    color: #E8622C;
  }

  .cta-card.yellow .cta-btn {
    color: #a97142;
  }

  .cta-btn:hover {
    transform: translateY(-2px);
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
  }

  .cta-card.red .cta-btn:hover {
    background: #ffffff;
    color: #11253e;
  }

  .cta-card.blue .cta-btn:hover {
    background: #ffffff;
    color: #c94c1a;
  }

  .cta-card.yellow .cta-btn:hover {
    background: #ffffff;
    color: #8c582c;
  }

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

  /* ── WHAT WE DO (Sticky Left Column + 1-Column Scrolling Services List) ── */
  .services {
    padding: clamp(5rem, 8.5vh, 7rem) 2rem;
    background: #ffffff;
    border-bottom: 2px solid #111111;
    position: relative;
    z-index: 2;
  }

  .services-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(3rem, 5vw, 5rem);
    align-items: start;
    position: relative;
  }

  /* Sticky Left Column */
  .services-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 90px;
    align-self: start;
  }

  .services-sticky .section-eyebrow {
    color: #E8622C;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 0.85rem;
  }

  .services-sticky .section-heading {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(2rem, 3.8vw, 3rem);
    font-weight: 900;
    line-height: 1.12;
    color: #111111;
    margin-bottom: 1.25rem;
    letter-spacing: -0.025em;
  }

  .services-desc {
    font-size: 1rem;
    line-height: 1.75;
    color: #444444;
    margin-bottom: 1.5rem;
    max-width: 440px;
  }

  .services-sticky .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: #111111;
    color: #ffffff;
    padding: 0.95rem 2rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: 2px solid #111111;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.25s ease-out;
  }

  .services-sticky .btn-primary:hover {
    background: #E8622C;
    border-color: #E8622C;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(232, 98, 44, 0.25);
  }

  /* 1-Column Scrolling Services List */
  .services-list {
    display: flex;
    flex-direction: column;
  }

  .service-row {
    border-top: 2px solid #111111;
    padding: 1.85rem 0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1.5rem;
    align-items: start;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    padding: 1.85rem 1.25rem;
    margin: 0 -1.25rem;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    position: relative;
    border-radius: 6px;
  }

  .service-row:last-child {
    border-bottom: 2px solid #111111;
  }

  /* Clean, rich hover effect (No layout shifts) */
  .service-row:hover {
    background: #f4eee5;
  }

  .service-row .service-num {
    font-family: 'Poppins', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #111111;
    opacity: 0.4;
    padding-top: 0.2rem;
    transition: opacity 0.2s ease, color 0.2s ease;
  }

  .service-row:hover .service-num {
    opacity: 1;
    color: #E8622C;
  }

  .service-name {
    font-family: 'Poppins', sans-serif;
    font-size: 1.22rem;
    font-weight: 800;
    color: #111111;
    letter-spacing: -0.015em;
    line-height: 1.25;
    transition: color 0.2s ease;
  }

  .service-row:hover .service-name {
    color: #1e3a5f;
  }

  .service-desc-text {
    font-size: 0.88rem;
    line-height: 1.65;
    color: #555555;
    margin-top: 0.4rem;
  }

  .service-row .service-arrow {
    font-size: 1.15rem;
    color: #111111;
    opacity: 0.35;
    padding-top: 0.15rem;
    transition: transform 0.25s ease, opacity 0.25s ease, color 0.25s ease;
  }

  .service-row:hover .service-arrow {
    opacity: 1;
    color: #E8622C;
    transform: translateX(6px);
  }

  @media (max-width: 960px) {
    .services-layout {
      grid-template-columns: 1fr;
      gap: 3rem;
    }

    .services-sticky {
      position: static;
    }
  }

  @media (max-width: 960px) {
    .services-layout {
      grid-template-columns: 1fr;
      gap: 3rem;
    }

    .services-sticky {
      position: static;
    }
  }

  /* ── PROCESS ("HOW WE WORK" - Staggered Glassmorphic Cards) ── */
  .process {
    padding: clamp(6rem, 10vh, 8.5rem) 2rem;
    background: linear-gradient(135deg, #faf6ee 0%, #f4e8cf 50%, #ebd7b0 100%);
    border-bottom: 1px solid rgba(169, 113, 66, 0.25);
    position: relative;
    overflow: hidden;
    z-index: 2;
  }

  /* Glowing Circuit Pattern Overlay - Always Behind (z-index: 0) */
  .process-circuit-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
  }

  .process-circuit-bg canvas {
    width: 100%;
    height: 100%;
    display: block;
  }

  /* ── FLOWING CIRCUIT TRACK ANIMATIONS ── */
  @keyframes circuitTrackFlow1 {
    from {
      stroke-dashoffset: 48;
    }

    to {
      stroke-dashoffset: 0;
    }
  }

  @keyframes circuitTrackFlow2 {
    from {
      stroke-dashoffset: 0;
    }

    to {
      stroke-dashoffset: 56;
    }
  }

  .circuit-track-flow-1 {
    stroke-dasharray: 8 6;
    animation: circuitTrackFlow1 3s linear infinite;
  }

  .circuit-track-flow-2 {
    stroke-dasharray: 10 7;
    animation: circuitTrackFlow2 4s linear infinite;
  }

  .circuit-track-flow-3 {
    stroke-dasharray: 6 5;
    animation: circuitTrackFlow1 2.5s linear infinite;
  }

  /* Glowing Node Pulse */
  @keyframes nodeEnergyPulse {

    0%,
    100% {
      transform: scale(1);
      opacity: 0.75;
      filter: drop-shadow(0 0 3px rgba(232, 98, 44, 0.4));
    }

    50% {
      transform: scale(1.5);
      opacity: 1;
      filter: drop-shadow(0 0 10px rgba(232, 98, 44, 0.95));
    }
  }

  .circuit-node {
    transform-box: fill-box;
    transform-origin: center;
    animation: nodeEnergyPulse 2.5s ease-in-out infinite;
  }

  .node-1 {
    animation-delay: 0.1s;
  }

  .node-2 {
    animation-delay: 0.8s;
  }

  .node-3 {
    animation-delay: 1.5s;
  }

  .node-4 {
    animation-delay: 0.5s;
  }

  .node-5 {
    animation-delay: 2.0s;
  }

  .node-6 {
    animation-delay: 1.2s;
  }

  .node-7 {
    animation-delay: 0.3s;
  }

  /* Expanding Radar Ripple Waves */
  @keyframes radarWaveExpand {
    0% {
      r: 4px;
      opacity: 0.85;
      stroke: #E8622C;
      stroke-width: 2px;
      fill: rgba(232, 98, 44, 0.2);
    }

    100% {
      r: 22px;
      opacity: 0;
      stroke: #a97142;
      stroke-width: 0.5px;
      fill: transparent;
    }
  }

  .radar-ripple {
    animation: radarWaveExpand 2.8s cubic-bezier(0.2, 0.8, 0.4, 1) infinite;
    pointer-events: none;
  }

  .process .section-inner {
    position: relative;
    z-index: 2;
  }

  .process .section-eyebrow {
    color: #E8622C;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 0.85rem;
  }

  .process .section-heading {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(2.2rem, 4.5vw, 3.2rem);
    font-weight: 800;
    line-height: 1.15;
    color: #111111;
    letter-spacing: -0.025em;
  }

  /* Staggered Grid Container (z-index: 3) */
  .process-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.25rem;
    margin-top: 4.5rem;
    position: relative;
    z-index: 3;
    align-items: start;
  }

  /* High-Performance Floating Cards with Clean Foil-Edge Borders & Top Accent */
  .process-card {
    background: #ffffff;
    border: 1.5px solid rgba(169, 113, 66, 0.25);
    border-radius: 16px;
    padding: 2.75rem 2.25rem 2.5rem;
    box-shadow: 0 12px 32px rgba(169, 113, 66, 0.08),
      0 2px 8px rgba(0, 0, 0, 0.02);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 0.3s ease,
      border-color 0.3s ease;
    opacity: 1;
    position: relative;
    z-index: 4;
    overflow: hidden;
  }

  /* Thin Gradient Top Accent Bar */
  .process-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3.5px;
    background: linear-gradient(90deg, #E8622C 0%, #a97142 50%, rgba(232, 98, 44, 0.7) 100%);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    opacity: 0.85;
    transition: opacity 0.3s ease;
  }

  /* Staggered Vertical Offsets Active By Default */
  .process-card.step-01 {
    transform: translateY(28px);
  }

  .process-card.step-02 {
    transform: translateY(-24px);
  }

  .process-card.step-03 {
    transform: translateY(42px);
  }

  /* Hover Lift, Border Intensification & Shadow Deepening */
  .process-card:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 252, 248, 0.9) 100%) padding-box,
      linear-gradient(135deg, #E8622C 0%, #a97142 60%, rgba(232, 98, 44, 0.8) 100%) border-box;
  }

  .process-card:hover::before {
    opacity: 1;
    height: 4.5px;
  }

  .process-card.step-01:hover {
    transform: translateY(18px);
    box-shadow: 0 28px 55px rgba(169, 113, 66, 0.22),
      0 6px 18px rgba(0, 0, 0, 0.05),
      inset 0 1px 0 rgba(255, 255, 255, 1),
      inset 0 0 0 1px rgba(232, 98, 44, 0.2);
  }

  .process-card.step-02:hover {
    transform: translateY(-34px);
    box-shadow: 0 28px 55px rgba(169, 113, 66, 0.22),
      0 6px 18px rgba(0, 0, 0, 0.05),
      inset 0 1px 0 rgba(255, 255, 255, 1),
      inset 0 0 0 1px rgba(232, 98, 44, 0.2);
  }

  .process-card.step-03:hover {
    transform: translateY(32px);
    box-shadow: 0 28px 55px rgba(169, 113, 66, 0.22),
      0 6px 18px rgba(0, 0, 0, 0.05),
      inset 0 1px 0 rgba(255, 255, 255, 1),
      inset 0 0 0 1px rgba(232, 98, 44, 0.2);
  }

  .process-card:hover .step-icon-wrap svg {
    transform: scale(1.08) rotate(3deg);
  }

  /* Card Header & Elements */
  .process-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.5rem;
  }

  .step-num {
    font-family: 'Poppins', sans-serif;
    font-size: 2.75rem;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(135deg, #E8622C 0%, #a97142 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.04em;
  }

  .step-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .step-icon-wrap svg {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .step-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    color: #1e3a5f;
    margin-bottom: 0.85rem;
    letter-spacing: -0.015em;
  }

  .step-text {
    font-size: 0.92rem;
    line-height: 1.75;
    color: #4a4a4a;
    font-weight: 400;
  }

  /* Responsive Stacking */
  @media (max-width: 960px) {
    .process {
      padding: clamp(4rem, 7vh, 5.5rem) 1.25rem;
    }

    .process-steps {
      grid-template-columns: 1fr;
      gap: 1.75rem;
      margin-top: 2.5rem;
    }

    .process-card.step-01,
    .process-card.step-02,
    .process-card.step-03 {
      transform: none !important;
      margin: 0 !important;
    }

    .process-card.step-01:hover,
    .process-card.step-02:hover,
    .process-card.step-03:hover {
      transform: translateY(-4px) !important;
    }

    .process-card {
      padding: 2rem 1.5rem;
    }
  }

  /* ── WHY MARQOD (Elevated Cards with Metallic Bottom Accent Slabs) ── */
  .why {
    padding: clamp(5.5rem, 9vh, 7.5rem) 2rem;
    background: #ffffff;
    border-bottom: 1px solid rgba(169, 113, 66, 0.2);
    position: relative;
    z-index: 2;
  }

  .why .section-eyebrow {
    color: #E8622C;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 0.85rem;
  }

  .why .section-heading {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(2.2rem, 4.5vw, 3.2rem);
    font-weight: 800;
    line-height: 1.15;
    color: #111111;
    letter-spacing: -0.025em;
    margin-bottom: 3.5rem;
  }

  .why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    align-items: stretch;
  }

  /* Individual Elevated Soft-Shadowed Cards */
  .why-card {
    background: linear-gradient(180deg, #ffffff 0%, #faf7f2 100%);
    border: 1.5px solid rgba(169, 113, 66, 0.25);
    border-radius: 18px;
    padding: 2.5rem 2.2rem 2.8rem;
    box-shadow: 0 16px 36px rgba(169, 113, 66, 0.11), 0 2px 8px rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 0.35s ease,
      border-color 0.35s ease;
  }

  /* Subtle alternating organic card tilt */
  .why-card:nth-child(1) {
    transform: rotate(-0.8deg);
  }

  .why-card:nth-child(2) {
    transform: rotate(0.8deg);
  }

  .why-card:nth-child(3) {
    transform: rotate(-0.5deg);
  }

  /* Hover Lift & Straightening */
  .why-card:hover {
    transform: translateY(-8px) rotate(0deg);
    box-shadow: 0 26px 52px rgba(169, 113, 66, 0.2), 0 4px 14px rgba(0, 0, 0, 0.05);
    border-color: #a97142;
  }

  .why-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.5rem;
  }

  .why-count {
    font-family: 'Poppins', sans-serif;
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1;
    color: #E8622C;
    letter-spacing: -0.03em;
  }

  .why-icon-wrap {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .why-icon-wrap svg {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .why-card:hover .why-icon-wrap svg {
    transform: scale(1.12) rotate(4deg);
  }

  .why-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
    color: #1e3a5f;
    margin-bottom: 0.85rem;
    letter-spacing: -0.015em;
    line-height: 1.3;
  }

  .why-text {
    font-size: 0.92rem;
    line-height: 1.75;
    color: #555555;
    margin-bottom: 1rem;
  }

  /* Signature Metallic Gradient Bottom Accent Bar */
  .why-metallic-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 6px;
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
    transition: height 0.3s ease, filter 0.3s ease;
  }

  /* Card 1: Gold-Bronze Metallic Gradient */
  .bar-gold {
    background: linear-gradient(90deg, #a97142 0%, #ecd09e 25%, #E8622C 55%, #f1d7a8 80%, #8c5a2b 100%);
  }

  /* Card 2: Warm Deep Copper Gradient */
  .bar-copper {
    background: linear-gradient(90deg, #8b4a26 0%, #e28552 25%, #a25228 55%, #f4aa80 80%, #6a3416 100%);
  }

  /* Card 3: Cool Silver-Navy Titanium Gradient */
  .bar-silver {
    background: linear-gradient(90deg, #475569 0%, #cbd5e1 25%, #64748b 55%, #f1f5f9 80%, #1e3a5f 100%);
  }

  .why-card:hover .why-metallic-bar {
    height: 8.5px;
    filter: brightness(1.15);
  }

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

    .why-card:nth-child(1),
    .why-card:nth-child(2),
    .why-card:nth-child(3) {
      transform: none !important;
    }

    .why-card:hover {
      transform: translateY(-6px) !important;
    }
  }

  /* ── CONTACT SECTION & PREMIUM FORM ── */
  .contact {
    padding: clamp(5rem, 8vh, 7rem) 2rem;
    background: #faf7f2;
    border-bottom: 1px solid #eae5dc;
    position: relative;
    z-index: 2;
  }

  .contact-layout {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: clamp(3rem, 5vw, 5rem);
    align-items: start;
    margin-top: 2rem;
  }

  .contact-info h2 {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    line-height: 1.15;
    color: #111111;
    letter-spacing: -0.025em;
    margin-bottom: 1.25rem;
  }

  .contact-info p {
    font-size: 0.98rem;
    line-height: 1.75;
    color: #555555;
    max-width: 440px;
    margin-bottom: 2rem;
  }

  .contact-detail-card {
    background: #ffffff;
    border: 1px solid rgba(169, 113, 66, 0.2);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 16px rgba(169, 113, 66, 0.06);
    max-width: 440px;
  }

  .contact-detail {
    display: flex;
    gap: 1rem;
    align-items: baseline;
    margin-bottom: 0.6rem;
    font-size: 0.92rem;
  }

  .contact-detail:last-child {
    margin-bottom: 0;
  }

  .contact-detail strong {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #E8622C;
    min-width: 75px;
  }

  .contact-detail span {
    color: #222222;
  }

  .contact-detail span a {
    color: #111111;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
  }

  .contact-detail span a:hover {
    color: #E8622C;
    text-decoration: underline;
  }

  .contact-reach {
    margin-top: 1.75rem;
    max-width: 440px;
  }

  .reach-label {
    font-family: 'Poppins', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #666666;
    margin-bottom: 0.85rem !important;
  }

  .reach-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .reach-badge,
  .reach-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.15rem;
    background: #ffffff;
    border: 1px solid rgba(169, 113, 66, 0.25);
    border-radius: 50px;
    font-size: 0.84rem;
    font-weight: 600;
    color: #333333;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.22s ease-out;
  }

  .reach-badge:hover,
  .reach-link:hover {
    border-color: #E8622C;
    color: #E8622C;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(232, 98, 44, 0.16);
  }

  /* Form Card & Inputs */
  .contact-form-card,
  .contact-layout form {
    background: #ffffff;
    border: 1.5px solid rgba(169, 113, 66, 0.25);
    border-radius: 16px;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    box-shadow: 0 16px 36px rgba(169, 113, 66, 0.08), 0 2px 8px rgba(0, 0, 0, 0.02);
  }

  .form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }

  .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
  }

  .form-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: #333333;
    letter-spacing: 0.02em;
  }

  .form input,
  .form select,
  .form textarea,
  .form-input,
  .form-select,
  .form-textarea {
    width: 100%;
    padding: 0.85rem 1.15rem;
    background: #ffffff;
    border: 1.5px solid rgba(169, 113, 66, 0.25);
    border-radius: 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.95rem;
    color: #111111;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-sizing: border-box;
  }

  .form input::placeholder,
  .form textarea::placeholder,
  .form-input::placeholder,
  .form-textarea::placeholder {
    color: #888888;
    font-weight: 400;
    font-family: 'DM Sans', sans-serif;
  }

  .form input:focus,
  .form select:focus,
  .form textarea:focus,
  .form-input:focus,
  .form-select:focus,
  .form-textarea:focus {
    border-color: #E8622C;
    background: #fffdfa;
    box-shadow: 0 0 0 3.5px rgba(232, 98, 44, 0.15);
  }

  /* Custom Select Arrow Styling */
  .select-wrapper {
    position: relative;
    width: 100%;
  }

  .select-wrapper::after {
    content: '';
    position: absolute;
    right: 1.15rem;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 2px solid #555555;
    border-bottom: 2px solid #555555;
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
    transition: border-color 0.2s;
  }

  .select-wrapper:focus-within::after {
    border-color: #E8622C;
  }

  .form select,
  .form-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    padding-right: 2.5rem;
  }

  .form textarea,
  .form-textarea {
    resize: vertical;
    min-height: 110px;
    line-height: 1.6;
    font-family: 'DM Sans', sans-serif;
  }

  .form-submit {
    background: #E8622C;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    padding: 1rem 2rem;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: 0 8px 20px rgba(232, 98, 44, 0.25);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    margin-top: 0.25rem;
  }

  .form-submit:hover {
    background: #d4521f;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(232, 98, 44, 0.35);
  }

  .form-submit:active {
    transform: translateY(0);
  }

  .form-submit:disabled {
    opacity: 0.75;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
  }

  /* ── FORM STATUS NOTIFICATIONS & SPINNER ── */
  .form-status {
    padding: 0.9rem 1.25rem;
    border-radius: 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.92rem;
    line-height: 1.55;
    font-weight: 600;
    margin-bottom: 1.15rem;
    display: none;
    transition: all 0.3s ease;
  }

  .form-status.success {
    display: block;
    background: #f0fdf4;
    color: #15803d;
    border: 1.5px solid #86efac;
  }

  .form-status.error {
    display: block;
    background: #fef2f2;
    color: #b91c1c;
    border: 1.5px solid #fecaca;
  }

  .btn-loading {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }

  .spinner {
    animation: spin 0.8s linear infinite;
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  @media (max-width: 900px) {
    .contact {
      padding: clamp(3.5rem, 6vh, 4.5rem) 1.25rem;
    }

    .contact-layout {
      grid-template-columns: 1fr;
      gap: 2.25rem;
      margin-top: 1.25rem;
    }

    .contact-info {
      max-width: 100%;
    }

    .contact-info h2 {
      font-size: clamp(1.85rem, 5vw, 2.3rem);
    }

    .contact-info p {
      max-width: 100%;
      margin-bottom: 1.5rem;
    }

    .contact-detail-card {
      max-width: 100%;
      padding: 1.15rem 1.25rem;
      margin-bottom: 1.5rem;
    }

    .contact-reach {
      max-width: 100%;
      margin-top: 1.25rem;
    }

    .contact-form-card,
    .contact-layout form {
      padding: clamp(1.35rem, 3.5vw, 2rem) clamp(1rem, 3vw, 1.5rem);
      border-radius: 14px;
      width: 100%;
      box-sizing: border-box;
    }

    .form-row {
      grid-template-columns: 1fr;
      gap: 1.15rem;
    }

    .form {
      gap: 1.15rem;
    }

    .form-submit {
      width: 100%;
      padding: 0.95rem 1.5rem;
    }
  }

  /* ── FOOTER (Clean White Editorial Layout matching user reference) ── */
  .site-footer {
    background: #ffffff;
    color: #111111;
    padding: clamp(4.5rem, 8vh, 6rem) 2rem 0;
    border-top: 1px solid #eae5dc;
    position: relative;
    z-index: 2;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .site-footer.fade-ready {
    opacity: 0;
    transform: translateY(20px);
  }

  .site-footer.in-view {
    opacity: 1;
    transform: translateY(0);
  }

  .site-footer .footer-inner {
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1.2fr 1.2fr 1.2fr;
    gap: clamp(2rem, 3.5vw, 4rem);
    align-items: start;
  }

  /* Brand Column */
  .footer-brand-col {
    display: flex;
    flex-direction: column;
    padding-right: 1.5rem;
  }

  .footer-brand-name {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.2rem);
    font-weight: 900;
    color: #111111;
    letter-spacing: -0.03em;
    text-decoration: none;
    line-height: 1;
    margin-bottom: 0.75rem;
    display: inline-block;
  }

  .site-footer .footer-tagline {
    font-size: 0.95rem;
    font-weight: 400;
    color: #555555;
    line-height: 1.5;
    max-width: 320px;
  }

  /* Navigation Columns */
  .footer-col {
    display: flex;
    flex-direction: column;
  }

  .footer-col-header {
    font-family: 'Poppins', sans-serif;
    font-size: 0.84rem;
    font-weight: 800;
    color: #111111;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 1.35rem;
  }

  .footer-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    position: static !important;
    width: auto !important;
    animation: none !important;
  }

  .footer-nav a {
    font-size: 0.92rem;
    font-weight: 400;
    color: #4a4a4a;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
    display: inline-block;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }

  .footer-nav a:hover {
    color: #E8622C;
    transform: translateX(3px);
  }

  /* Bottom Copyright & Socials Bar */
  .footer-bottom-bar {
    max-width: 1320px;
    margin: clamp(3.5rem, 6vh, 5rem) auto 0;
    padding: 1.6rem 0 2rem;
    border-top: 1px solid #eae5dc;
  }

  .footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.25rem;
  }

  .footer-copyright {
    font-size: 0.86rem;
    color: #666666;
    font-weight: 400;
  }

  .footer-social-icons {
    display: flex;
    align-items: center;
    gap: 1.25rem;
  }

  .footer-social-link {
    color: #333333;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, transform 0.2s ease;
    text-decoration: none;
  }

  .footer-social-link:hover {
    color: #E8622C;
    transform: translateY(-2px);
  }

  @media (max-width: 960px) {
    .site-footer .footer-inner {
      grid-template-columns: 1fr 1fr;
      gap: 2.5rem;
    }
  }

  @media (max-width: 600px) {
    .site-footer .footer-inner {
      grid-template-columns: 1fr;
      gap: 2.25rem;
    }
  }

  /* ══════════════════════════════════════
     INNER & SERVICE PAGES DESIGN SYSTEM
     ══════════════════════════════════════ */

  .nav-links a.active {
    color: #ffffff;
  }

  /* ── SHARED INNER-PAGE HERO ── */
  .page-hero {
    background: linear-gradient(135deg, #faf7f2 0%, #f4ede2 100%);
    padding: clamp(4.5rem, 8vh, 6.5rem) 2rem;
    border-bottom: 1px solid rgba(169, 113, 66, 0.22);
    position: relative;
    overflow: hidden;
  }

  .page-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 650px;
    height: 650px;
    background: radial-gradient(circle, rgba(232, 98, 44, 0.07) 0%, rgba(169, 113, 66, 0.04) 45%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
  }

  .page-hero-inner {
    max-width: 1360px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 3.5rem;
    align-items: center;
    position: relative;
    z-index: 2;
  }

  .crumb {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #E8622C;
    margin-bottom: 1.15rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }

  .crumb a {
    color: #1e3a5f;
    text-decoration: none;
    transition: color 0.2s ease;
  }

  .crumb a:hover {
    color: #E8622C;
  }

  .page-hero h1 {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(2.3rem, 5.2vw, 3.8rem);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: #111111;
    margin-bottom: 1.25rem;
  }

  .page-hero-sub {
    font-size: 1.08rem;
    line-height: 1.75;
    max-width: 560px;
    font-weight: 500;
    color: #4a4a4a;
    margin-bottom: 2.25rem;
  }

  /* ── REFINED STAT BOXES ── */
  .hero-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    background: transparent;
    border: none;
  }

  .hero-fact {
    padding: 1.65rem 1.35rem;
    background: #ffffff;
    border: 1.5px solid rgba(169, 113, 66, 0.28);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    border-right: 1.5px solid rgba(169, 113, 66, 0.28);
  }

  .hero-fact:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(169, 113, 66, 0.12);
    border-color: #a97142;
  }

  .hero-fact .num {
    font-family: 'Poppins', sans-serif;
    font-size: 2.1rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 0.45rem;
    color: #E8622C;
  }

  .hero-fact .label {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #555555;
    line-height: 1.45;
  }

  /* ── GENERIC SECTIONS ── */
  .section {
    padding: clamp(4.5rem, 8vh, 6.5rem) 2rem;
    border-bottom: 1px solid rgba(169, 113, 66, 0.18);
    background: #ffffff;
  }

  .section-inner {
    max-width: 1360px;
    margin: 0 auto;
  }

  .section-eyebrow {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #E8622C;
    margin-bottom: 0.75rem;
    display: block;
  }

  .section-heading {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(2rem, 3.8vw, 2.75rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #111111;
    margin-bottom: 1.25rem;
  }

  .section.grey {
    background: #faf7f2;
  }

  .section.yellow {
    background: #faf7f2;
  }

  .section.dark {
    background: #0a1128;
    color: #ffffff;
  }

  .section.dark .section-heading {
    color: #ffffff;
  }

  .section.dark .section-eyebrow {
    color: #E8622C;
  }

  .section-lead {
    font-size: 1.05rem;
    line-height: 1.8;
    max-width: 680px;
    margin-top: 0;
    margin-bottom: 3rem;
    color: #4a4a4a;
  }

  .section.dark .section-lead {
    color: rgba(255, 255, 255, 0.75);
  }

  /* ── ELEVATED BOX GRIDS (No hard black borders) ── */
  .box-grid {
    display: grid;
    gap: 1.5rem;
    border: none;
  }

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

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

  .box-grid.c4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .box {
    padding: 2.25rem 2rem;
    background: #ffffff;
    border: 1.5px solid rgba(169, 113, 66, 0.22);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
    transition: all 0.25s ease;
  }

  a.box {
    text-decoration: none;
    color: inherit;
    display: block;
  }

  a.box:hover,
  .box:hover {
    background: #ffffff;
    border-color: #a97142;
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(169, 113, 66, 0.12);
  }

  .box h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
    letter-spacing: -0.01em;
    color: #1e3a5f;
  }

  .box p {
    font-size: 0.92rem;
    line-height: 1.75;
    color: #4a4a4a;
  }

  .box .tagnum {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #E8622C;
    margin-bottom: 1.15rem;
  }

  .section.dark .box {
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  }

  .section.dark .box:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: #E8622C;
  }

  .section.dark .box h3 {
    color: #ffffff;
  }

  .section.dark .box p {
    color: rgba(255, 255, 255, 0.75);
  }

  .section.dark .box .tagnum {
    color: #E8622C;
  }

  /* ── CHECKLIST ── */
  .checklist {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 2rem;
  }

  .checklist li {
    font-size: 0.95rem;
    line-height: 1.65;
    padding-left: 1.85rem;
    position: relative;
    color: #333333;
  }

  .checklist li::before {
    content: '✓';
    position: absolute;
    left: 0;
    font-weight: 900;
    color: #E8622C;
  }

  .section.dark .checklist li {
    color: rgba(255, 255, 255, 0.85);
  }

  .section.dark .checklist li::before {
    color: #E8622C;
  }

  /* ── SPLIT LAYOUT & PANELS ── */
  .split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
  }

  .panel {
    border: 1.5px solid rgba(169, 113, 66, 0.3);
    padding: 2.5rem;
    background: #faf7f2;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  }

  .panel h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: #1e3a5f;
  }

  .panel.dark {
    background: #0a1128;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.15);
  }

  .panel.dark h3 {
    color: #ffffff;
  }

  .panel.dark p {
    color: rgba(255, 255, 255, 0.85);
  }

  .panel.dark .checklist li {
    color: rgba(255, 255, 255, 0.9);
  }

  .panel.dark .checklist li::before {
    color: #E8622C;
  }

  /* ── PRICING CARDS ── */
  .price-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1.5px solid rgba(169, 113, 66, 0.25);
    border-radius: 14px;
    padding: 2.5rem 2rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
  }

  .price-card .amount {
    font-family: 'Poppins', sans-serif;
    font-size: 2.2rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    margin-bottom: 0.25rem;
    color: #1e3a5f;
  }

  .price-card .amount small {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #6b6b6b;
    display: block;
    margin-top: 0.4rem;
  }

  .price-card ul {
    list-style: none;
    margin: 1.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .price-card ul li {
    font-size: 0.88rem;
    line-height: 1.55;
    padding-left: 1.35rem;
    position: relative;
    color: #4a4a4a;
  }

  .price-card ul li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: #E8622C;
    font-weight: 700;
  }

  .price-card.featured {
    background: #faf7f2;
    border-color: #E8622C;
    box-shadow: 0 12px 32px rgba(232, 98, 44, 0.12);
  }

  /* ── TIMELINE ── */
  .timeline {
    border-top: 1px solid rgba(169, 113, 66, 0.22);
  }

  .tl-row {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 2rem;
    padding: 1.85rem 0;
    border-bottom: 1px solid rgba(169, 113, 66, 0.22);
  }

  .tl-when {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #E8622C;
    padding-top: 0.2rem;
  }

  .tl-body h4 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 0.45rem;
    color: #1e3a5f;
  }

  .tl-body p {
    font-size: 0.92rem;
    line-height: 1.7;
    color: #4a4a4a;
  }

  /* ── FAQ ── */
  .faq {
    border-top: 1px solid rgba(169, 113, 66, 0.22);
    max-width: 900px;
  }

  .faq details {
    border-bottom: 1px solid rgba(169, 113, 66, 0.22);
    padding: 1.45rem 0;
  }

  .faq summary {
    font-family: 'Poppins', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    color: #1e3a5f;
    transition: color 0.2s ease;
  }

  .faq summary:hover {
    color: #E8622C;
  }

  .faq summary::-webkit-details-marker {
    display: none;
  }

  .faq summary::after {
    content: '+';
    font-weight: 800;
    color: #E8622C;
    font-size: 1.25rem;
    line-height: 1;
  }

  .faq details[open] summary::after {
    content: '–';
  }

  .faq p {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #4a4a4a;
    margin-top: 0.85rem;
    max-width: 720px;
  }

  /* ── CTA BAND ── */
  .cta-band {
    background: #0a1128;
    color: #ffffff;
    padding: 4.5rem 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .cta-band-inner {
    max-width: 1360px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
    flex-wrap: wrap;
  }

  .cta-band h2 {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.8rem, 3.8vw, 2.5rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    max-width: 620px;
    color: #ffffff;
  }

  .cta-band p {
    font-size: 0.98rem;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 0.85rem;
    max-width: 560px;
  }

  .btn-yellow,
  .btn-primary {
    background: #E8622C;
    color: #ffffff;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 0.92rem;
    padding: 0.95rem 2.15rem;
    border-radius: 8px;
    border: 1.5px solid #E8622C;
    cursor: pointer;
    transition: all 0.25s ease;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: inline-block;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(232, 98, 44, 0.25);
  }

  .btn-yellow:hover,
  .btn-primary:hover {
    background: #d05320;
    border-color: #d05320;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(232, 98, 44, 0.4);
    color: #ffffff;
  }

  /* ── RELATED SERVICES ── */
  .rel-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
  }

  .rel-card {
    background: #ffffff;
    border: 1.5px solid rgba(169, 113, 66, 0.22);
    border-radius: 12px;
    padding: 1.6rem 1.4rem;
    transition: all 0.25s ease;
    display: block;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
  }

  .rel-card:hover {
    background: #faf7f2;
    border-color: #a97142;
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(169, 113, 66, 0.12);
  }

  .rel-card .t {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 0.45rem;
    color: #1e3a5f;
  }

  .rel-card .d {
    font-size: 0.84rem;
    color: #555555;
    line-height: 1.55;
  }

  @media (max-width: 900px) {

    .page-hero-inner,
    .split {
      grid-template-columns: 1fr;
      gap: 2.5rem;
    }

    .box-grid.c2,
    .box-grid.c3,
    .box-grid.c4 {
      grid-template-columns: 1fr;
    }

    .checklist {
      grid-template-columns: 1fr;
    }

    .hero-facts {
      grid-template-columns: 1fr;
    }

    .tl-row {
      grid-template-columns: 1fr;
      gap: 0.5rem;
    }

    .rel-grid {
      grid-template-columns: 1fr;
    }
  }

  /* Service hub cards + grid edge cleanup */
  .box-grid {
    border-bottom: none;
  }

  a.service-row {
    color: inherit;
  }

  /* ══════════════════════════════════════════════════════════════
     UNIFIED DIRECTIONAL SCROLL REVEAL ANIMATION SYSTEM (60FPS HARDWARE ACCELERATED)
     ══════════════════════════════════════════════════════════════ */
  [data-animate] {
    opacity: 0;
    transition-property: opacity, transform;
    transition-duration: 0.6s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
  }

  [data-animate="up"] {
    transform: translate3d(0, 28px, 0);
  }

  [data-animate="down"] {
    transform: translate3d(0, -28px, 0);
  }

  [data-animate="left"] {
    transform: translate3d(-32px, 0, 0);
  }

  [data-animate="right"] {
    transform: translate3d(32px, 0, 0);
  }

  [data-animate="scale"] {
    transform: scale(0.95);
  }

  [data-animate="left-scale"] {
    transform: translate3d(-28px, 0, 0) scale(0.96);
  }

  [data-animate="right-scale"] {
    transform: translate3d(28px, 0, 0) scale(0.96);
  }

  /* Settled / In-View State: Frees up GPU layer memory immediately! */
  [data-animate].is-visible {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
    will-change: auto !important;
  }

  /* Off-screen Content Rendering Optimization */
  .process,
  .why,
  .team,
  .portfolio-grid,
  .box-grid,
  .checklist {
    content-visibility: auto;
    contain-intrinsic-size: 600px;
  }

  /* Mobile Responsive Animation Adjustments: Snappy, lightweight transforms */
  @media (max-width: 768px) {
    [data-animate] {
      transition-duration: 0.5s;
    }

    [data-animate="left"] {
      transform: translate3d(-22px, 0, 0);
    }

    [data-animate="right"] {
      transform: translate3d(22px, 0, 0);
    }

    [data-animate="left-scale"] {
      transform: translate3d(-20px, 0, 0) scale(0.96);
    }

    [data-animate="right-scale"] {
      transform: translate3d(20px, 0, 0) scale(0.96);
    }

    [data-animate="up"] {
      transform: translate3d(0, 22px, 0);
    }

    [data-animate="down"] {
      transform: translate3d(0, -22px, 0);
    }

    [data-animate="scale"] {
      transform: scale(0.96);
    }
  }

  /* Accessibility: Respect Reduced Motion */
  @media (prefers-reduced-motion: reduce) {
    [data-animate] {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
      will-change: auto !important;
    }
  }