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

  html {
    scroll-behavior: smooth;
    width: 100%;
    overflow-x: hidden;
  }

  body {
    font-family: 'Inter', sans-serif;
    color: #222;
    background: #fff;
    line-height: 1.7;
    width: 100%;
    overflow-x: hidden;
  }
  /* ================= NAVBAR ================= */

  .nav-wrap {
    position: fixed;
    top: 0;
    width: 100%;
    background: #ffffff;
    z-index: 9999;
    border-bottom: 1px solid #ededed;
  }

 /* ================= NAVBAR — ENTERPRISE ================= */
.navbar {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 28px;              /* slightly more breathing space */
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

/* ================= LOGO ================= */
.nav-logo {
  display: flex;
  align-items: center;
}

.nav-logo img {
  height: 58px;                    /* larger, more premium presence */
  width: auto;
  display: block;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Subtle enterprise hover */
.nav-logo img:hover {
  transform: scale(1.05);
  opacity: 0.92;
}

/* ================= NAV LINKS ================= */
.nav-links {
  display: flex;
  align-items: center;
  gap: 2.2rem;                     /* consistent spacing system */
}

/* ================= DOWNLOAD BUTTON ================= */
.btn-download {
  margin-left: 0.5rem;             /* slight separation from links */
  padding: 0.6rem 1.5rem;
  border-radius: 999px;
  background: #0b0b0b;
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: all 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Premium lift on hover */
.btn-download:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.18);
}
  .nav-link {
    position: relative;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    color: #111;
    padding-bottom: 6px;
    transition: color 0.25s ease;
  }

  /* UNDERLINE */
  .nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0%;
    height: 2px;
    background: currentColor;
    transform: translateX(-50%);
    transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* HOVER */
  .nav-link:hover {
    color: #000;
  }

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

  /* ACTIVE PAGE */
  .nav-link.active::after {
    width: 100%;
  }
  .nav-contact::after {
    background: #e10600;
  }
  .nav-contact {
    color: #e10600;
    font-weight: 600;
  }

  /* TOGGLE */
  .nav-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
  }

  /* ================= MOBILE ================= */
  @media (max-width: 900px) {

    .nav-toggle {
      display: block;
      z-index: 10001;
    }

    .nav-links {
      position: absolute;
      top: 72px;
      left: 50%;
      width: 92%;
      background: #ffffff;
      border-radius: 18px;
      padding: 22px;
      box-shadow: 0 24px 60px rgba(0,0,0,0.15);

      display: flex;
      flex-direction: column;
      gap: 18px;

      /* CLOSED STATE */
      opacity: 0;
      visibility: hidden;
      pointer-events: none;

      transform: translateX(-50%) translateY(-10px) scale(0.98);

      transition:
        opacity 0.25s ease,
        transform 0.25s cubic-bezier(0.22,1,0.36,1),
        visibility 0s linear 0.25s;

      z-index: 10000;
    }

    /* OPEN STATE */
    .nav-wrap.open .nav-links {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;

      transform: translateX(-50%) translateY(0) scale(1);

      transition:
        opacity 0.25s ease,
        transform 0.25s cubic-bezier(0.22,1,0.36,1),
        visibility 0s;
    }
    .nav-links.show {
      display: flex;
    }
    .hero h1 {
      font-size: 2.4rem;
    }

    .hero h2 {
      font-size: 1.7rem;
    }
  }
  .approach-section {
    padding: 120px 0;
    background: linear-gradient(
      135deg,
      rgba(15,15,15,0.92),
      rgba(0, 0, 0, 0.92)
    );
    color: #fff;
    text-align: center;
    overflow: hidden;
  }

  .approach-title {
    font-size: 42px;
    margin-bottom: 10px;
  }

  .approach-subtitle {
    color: #9aa4b2;
    margin-bottom: 60px;
  }
.diagram-wrap {
  position: relative;
  width: 900px;
  height: 560px;
  margin: 0 auto;
  max-width: 100%;
}

/* 🔁 FLIP ONLY THE DIAGRAM (LINES + ARCS) */
.diagram-wrap svg {
  transform-origin: top;
}
  /* ================= HERO — ENTERPRISE (CENTERED) ================= */
  .hero {
    min-height: auto;
    padding: 120px 24px 80px;
    background: #ffffff;
    color: #0b0b0b;
    display: flex;
    align-items: center;
  }

  .hero-content {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 2rem;
  }

  /* HERO GRID — NOW CENTERED SINGLE COLUMN */
  .hero-grid {
    display: flex;
    justify-content: center;
    text-align: center;
  }

  /* TEXT BLOCK — CENTERED */
  .hero-text {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;

    /* STRONGER LEFT → CENTER ANIMATION */
    opacity: 0;
    transform: translateX(-180px);   /* WAS -80px */
    animation: heroSlideInLeft 1.2s cubic-bezier(0.22,1,0.36,1) forwards;
  }
  /* Headings — Executive Consulting Stack */
  .hero h1 {
    font-size: clamp(44px, 6vw, 72px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
  }

  .hero h2 {
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-top: 4px;
    margin-bottom: 12px;
    color: #111;
  }

  /* Subtext — Editorial */
  .hero p {
    margin: 16px auto 28px;
    font-size: 16px;
    line-height: 1.7;
    max-width: 560px;
    color: #6b6b6b;
  }

  /* CTA — CENTERED */
  .cta {
    margin-top: 28px;
    display: flex;
    justify-content: center;
    gap: 12px;
  }

  /* ================= LEFT → CENTER ANIMATION ================= */
  @keyframes heroSlideInLeft {
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  /* ================= RESPONSIVE ================= */
  @media (max-width: 900px) {
    .hero h1 {
      font-size: 40px;
    }

    .hero h2 {
      font-size: 26px;
    }
  }
  /* ================= HERO CTA — ENTERPRISE ================= */

  /* Base button */
  .btn-primary,
  .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    border-radius: 999px;
    margin-right: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.2px;
    transition: all 0.25s cubic-bezier(0.22,1,0.36,1);
  }

  /* PRIMARY — CONSULTING BLACK */
  .btn-primary {
    background: #000000;
    color: #ffffff;
    border: none;
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
  }

  .btn-primary:hover {
    background: #111111;
    transform: translateY(-2px);
  }

  /* SECONDARY — ENTERPRISE OUTLINE */
  .btn-secondary {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    color: #000000;
    box-shadow: none;
  }

  .btn-secondary:hover {
    background: #f5f5f5;
    transform: translateY(-2px);
  }
  /* ================= HERO ENTRANCE ANIMATIONS ================= */

  /* Base hidden state */
  .hero-animate-left,
  .hero-animate-right {
    opacity: 0;
    will-change: transform, opacity;
  }

  /* LEFT — Text */
  .hero-animate-left {
    animation: heroFromLeft 0.9s cubic-bezier(0.22,1,0.36,1) forwards;
  }

  /* RIGHT — Image */
  .hero-animate-right {
    animation: heroFromRight 0.9s cubic-bezier(0.22,1,0.36,1) forwards;
    animation-delay: 0.1s;   /* slight stagger */
  }
/* =====================================================
   FINAL MOBILE HARD RESET — APPROACH DIAGRAM
   (Overrides all desktop absolute logic)
===================================================== */
@media (max-width: 768px) {

  /* Kill diagram visuals */
  .diagram-wrap svg,
  .arc,
  .connector,
  .center-box {
    display: none !important;
  }

  /* Diagram becomes normal flow */
  .diagram-wrap {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  /* Disable any flip / rotation logic */
  .diagram-flip {
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* HARD RESET nodes */
  .node {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;

    width: 100% !important;
    max-width: 360px;
    margin: 0 auto 28px !important;
    text-align: center !important;
  }

  /* Kill angled text */
  .node-inner {
    transform: none !important;
    text-align: center !important;
  }

  /* Typography balance */
  .node h4 {
    font-size: 1.15rem !important;
    margin-bottom: 6px;
  }

  .node p {
    font-size: 0.95rem !important;
    line-height: 1.6;
    max-width: 320px;
    margin: 0 auto;
  }

  /* Spacing for section header */
  .approach-title {
    font-size: 30px;
  }

  .approach-subtitle {
    padding: 0 16px;
    margin-bottom: 36px;
  }
}
  /* KEYFRAMES */
  @keyframes heroFromLeft {
    from {
      opacity: 0;
      transform: translateX(-60px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  @keyframes heroFromRight {
    from {
      opacity: 0;
      transform: translateX(60px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  .hero-animate-left {
    animation-delay: 0.05s;
  }

  .hero-animate-right {
    animation-delay: 0.15s;
  }
  /* ================= WHO WE ARE — ENTERPRISE ================= */

  .who-we-are {
  padding: 7rem 1.5rem;         
  background: #ffffff;        
}

.who-container {
  max-width: 1200px;
  margin: auto;
  text-align: center;
}
  /* Heading — Executive (no gradient) */
  .who-container h3 {
    font-size: 2.6rem;
    font-weight: 800;
    display: inline-block;
    position: relative;
    color:  #000000;              /* SOLID EXECUTIVE BLACK */
    margin-bottom: 1.5rem;
  }

  /* Subtle underline — enterprise */
  .who-container h3::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -12px;
    width: 56px;
    height: 3px;
    background: #6b6b6b;        /* CLEAN BLACK RULE */
    border-radius: 2px;
    transform: translateX(-50%);
    opacity: 0.2;
  }

/* ================= TEXT HIERARCHY ================= */

.who-lead {
  font-size: 1.05rem;
  line-height: 1.75;
  max-width: 620px;
  margin: auto;
  color: #6b6b6b;
}

.who-container p {
  max-width: 620px;
  margin: 0.8rem auto;
  font-size: 0.95rem;
  color: #555555;
  line-height: 1.7;
}

/* ================= STRONG ENTERPRISE PILL ================= */

.who-strong {
  display: inline-block;
  background: linear-gradient(135deg, rgba(15,15,15,0.92), rgba(40,40,40,0.92));
  color: #fff;
  padding: 0.55rem 1.35rem;
  font-size: 0.95rem;
  border-radius: 999px;
  font-weight: 600;
}
/* ================= GRID SYSTEM ================= */

.stats-grid {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.6rem;
}

.feature-grid {
  margin-top: 4.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
}

/* ================= ENTERPRISE CARD BASE ================= */

.stat-card,
.feature-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 2.4rem;
  position: relative;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 12px 30px rgba(0,0,0,0.06);
}

/* Executive dark wash hover overlay */
.stat-card::before,
.feature-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(12,12,12,0.95),
    rgba(32,32,32,0.95)
  );
  opacity: 0;
  transition: 0.35s ease;
  z-index: 0;
}

/* Show overlay on hover */
.stat-card:hover::before,
.feature-card:hover::before {
  opacity: 1;
}

/* Lift + premium elevation */
.stat-card:hover,
.feature-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 28px 70px rgba(0,0,0,0.18);
  color: #ffffff;
}

/* Keep content above overlay */
.stat-card *,
.feature-card * {
  position: relative;
  z-index: 1;
}

/* ================= STAT TYPOGRAPHY ================= */

.stat-number {
  font-size: 2.4rem;
  font-weight: 800;
  color: #0b0b0b;
  transition: 0.3s;
}

.stat-card:hover .stat-number {
  color: #ffffff;
}

.stat-label {
  margin-top: 0.4rem;
  font-weight: 500;
  font-size: 0.9rem;
  color: #444444;
}

.stat-card:hover .stat-label {
  color: rgba(255,255,255,0.85);
}

/* ================= FEATURE CARD TEXT ================= */

.feature-card h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0b0b0b;
  margin-bottom: 0.6rem;
}

.feature-card p {
  font-size: 0.92rem;
  color: #555555;
  line-height: 1.6;
}

.feature-card:hover h4,
.feature-card:hover p {
  color: rgba(255,255,255,0.9);
}
/* ================= PROBLEM SECTION — ENTERPRISE FINAL ================= */

.problem-section {
  padding: 6rem 1.5rem 6.5rem;
  background: #ffffff;
}

/* ===== GRID ===== */
.problem-container {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 3rem;
  align-items: center;
}

/* ===== EYEBROW ===== */
.problem-container h3 {
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

/* ===== MAIN HEADING ===== */
.problem-container h1 {
  font-size: clamp(42px, 5.3vw, 58px);
  font-weight: 800;
  line-height: 1.05;
  margin: 0.7rem 0 1.1rem;
  color: #0b0b0b;
  letter-spacing: -0.02em;
}

/* ===== SUB HEADING ===== */
.problem-container h2 {
  font-size: clamp(26px, 3.3vw, 36px);
  font-weight: 700;
  line-height: 1.12;
  margin-bottom: 0.9rem;
  color: #111111;
}

/* ===== TEXT ===== */
.problem-lead {
  max-width: 520px;
  font-size: 1rem;
  color: #6b6b6b;
  line-height: 1.72;
}

.problem-text {
  max-width: 520px;
  font-size: 0.93rem;
  color: #555555;
  line-height: 1.68;
  margin-top: 10px;
}

/* ===== SOFT ENTRANCE ===== */
.problem-container > * {
  opacity: 0;
  transform: translateY(22px);
  animation: fadeUpSoft 0.55s cubic-bezier(0.22,1,0.36,1) forwards;
}

.problem-container > *:nth-child(2) { animation-delay: 0.07s; }
.problem-container > *:nth-child(3) { animation-delay: 0.14s; }

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

/* ================= PROBLEM DIAGNOSTIC GRID ================= */

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

/* ===== BASE CARD — ALWAYS WHITE ===== */
.why-card {
  background: #ffffff !important;          /* hard guarantee */
  padding: 2.1rem;
  border-radius: 20px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.055);

  transition:
    transform 0.25s cubic-bezier(0.22,1,0.36,1),
    box-shadow 0.25s cubic-bezier(0.22,1,0.36,1),
    background 0.25s ease,
    color 0.2s ease;
}

/* ===== HOVER — DARK EXECUTIVE ===== */
.why-card:hover {
  background: linear-gradient(
    135deg,
    rgba(22,22,22,0.96),
    rgba(48,48,48,0.96)
  ) !important;

  transform: translateY(-7px);
  box-shadow: 0 22px 55px rgba(0,0,0,0.16);
  color: #ffffff;
}

.why-card:hover h3,
.why-card:hover p {
  color: #ffffff;
}

/* ===== TYPOGRAPHY ===== */
.why-card h3 {
  font-size: 1.14rem;
  font-weight: 700;
  margin-bottom: 0.45rem;
  color: #111111;
  transition: color 0.2s ease;
}

.why-card p {
  font-size: 0.94rem;
  color: #4b5563;     
  line-height: 1.63;
  transition: color 0.2s ease;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .why-grid {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {

  .problem-container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .problem-container h1 {
    font-size: 38px;
  }

  .problem-lead,
  .problem-text {
    max-width: 100%;
  }
} 
  /* ================= WHO WORK ================= */
  .who-work-grid {
    margin-top: 3rem;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
    gap: 1.5rem;
  }

  .who-work-card {
    padding: 2rem;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
  }

  .who-number {
    font-size: 2rem;
    font-weight: 800;
    color: #7bc6cc;
  }


  /* ================= ANIMATION ================= */
  .reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: 0.6s ease;
  }

  .reveal.active {
    opacity: 1;
    transform: translateY(0);
  }

  .from-left {
    transform: translateX(-50px);
  }

  .from-right {
    transform: translateX(50px);
  }

  .from-left.active,
  .from-right.active {
    transform: translateX(0);
  }
  /* ================= CENTER (BOTTOM TIP — MORE SPACE) ================= */
  .center-box {
    position: absolute;
    top: 460px;              /* MORE SPACE BELOW */
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
    height: 260px;
    background: #fff;
    color: #000;
    border-radius: 50%;
    box-shadow: 0 30px 80px rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    overflow: hidden;
  }
  /* Center text fade */
  .center-box h3 {
    opacity: 0;
    transition: opacity .5s ease .4s;
    line-height: 1.1;
    letter-spacing: 1px;
  }
  .center-box.show h3 {
    opacity: 1;
  }

  /* ================= NODES ================= */
  .node {
    position: absolute;
    width: 170px;
    text-align: center;
    z-index: 6;
    transform: none !important;
  }
/* ================= NODE POSITIONS — FINAL ================= */

/* LEFT ARM */
.n1 { top: 40px;  left: 90px; }
.n2 { top: 180px; left: 170px; }
.n3 {
  top: 360px;   /* was ~330 */
  left: 230px;  /* slight inward balance */
}
/* RIGHT ARM */
.n6 { top: 40px;  right: 90px; }
.n5 { top: 180px; right: 170px; }
.n4 {
  top: 360px;   /* was ~330 */
  right: 230px;
}
  .icon-outer {
    position: relative;
    width: 90px;
    height: 90px;
    margin: 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 30px rgba(0,0,0,0.4);
  }

  .icon-inner {
    width: 64px;
    height: 64px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
  }

  .node h4,
  .node p {
    position: relative;
    z-index: 10;               /* FIXED: always above center */
  }

  .node h4 {
    margin: 12px 0 6px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
  }

  .node p {
    font-size: 12px;
    color: #cbd5e1;
    line-height: 1.5;
  }

/* ================= TEXT ANGLE — FOLLOW /\ (FIXED) ================= */

/* Never rotate the positioned node */
.node {
  transform: none !important;
}

/* LEFT ARM — tilt inward */
.n1 .node-inner,
.n2 .node-inner,
.n3 .node-inner {
  transform: rotate(-6deg);
  transform-origin: right center;
  text-align: right;
}

/* RIGHT ARM — tilt inward */
.n4 .node-inner,
.n5 .node-inner,
.n6 .node-inner {
  transform: rotate(6deg);
  transform-origin: left center;
  text-align: left;
}

/* Text polish */
.node-inner {
  max-width: 240px;
}

.node-inner h4 {
  margin-bottom: 6px;
  letter-spacing: 0.2px;
}

.node-inner p {
  line-height: 1.55;
}

/* ================= MOBILE RESET ================= */
@media (max-width: 900px) {
  .node-inner {
    transform: rotate(0deg) !important;
    text-align: center;
  }
}
  /* ================= SVG ================= */
  svg {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
  }

  .arc {
    fill: none;
    stroke: rgba(255,255,255,0.15);
    stroke-width: 2;
  }

  .connector {
    fill: none;
    stroke: rgba(255,255,255,0.28);
    stroke-width: 2;
  }

  /* ================= STEP BADGE ================= */
  .step-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #fff;
    color: #000;
    font-size: 11px;
    font-weight: 700;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    z-index: 2;
  }

  /* ================= COLORS ================= */
  .green  { background:#8bc34a; }
  .teal   { background:#2ec4b6; }
  .cyan   { background:#4cc9f0; }
  .blue   { background:#5fa8ff; }
  .steel  { background:#6c8cd5; }
  .purple { background:#8b5cf6; }

  /* ================= REVEAL ================= */
  .reveal {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: all 0.7s cubic-bezier(.22,.61,.36,1);
  }

  .reveal.show {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  /* ================= STAGGER ================= */
  .delay-1{transition-delay:.1s}
  .delay-2{transition-delay:.25s}
  .delay-3{transition-delay:.4s}
  .delay-4{transition-delay:.55s}
  .delay-5{transition-delay:.7s}
  .delay-6{transition-delay:.85s}
  .delay-7{transition-delay:1s}
  .delay-8{transition-delay:1.15s}

/* ================= WHY HAPPEN — SPLIT ENTERPRISE ================= */

.why-section {
  padding: 6rem 1.5rem 7rem;
  background: #f1f1f1;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.why-container {
  max-width: 1200px;
  margin: auto;
}

/* ===== SPLIT LAYOUT ===== */
.why-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}

/* ===== LEFT TEXT ===== */
.why-text h2 {
  font-size: clamp(3.6rem, 4.5vw, 4.5rem);
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
  color: black;
}
/* ===== LIST INSIDE SECOND CARD ===== */
.why-list {
  list-style: none;
  padding: 0;
  margin-top: 0.6rem;
}

.why-list li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.55rem;
  font-size: 0.95rem;
  color: #4b5563;     
  line-height: 1.6;
}

.why-list li::before {
  content: "✕";
  position: absolute;
  left: 0;
  color: #f87171;
  font-size: 0.95rem;
}
.why-quote {
  display: inline-block;
  background: #2f2f2f;
  color: #ffffff;

  padding: 12px 22px;     
  border-radius: 999px;    

  font-size: 20px;      
  font-weight: 600;
  line-height: 1.5;
  text-align: center;

  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);

  max-width: 520px;          /* prevents too wide look */
}

/* ===== RIGHT STACKED CARDS ===== */
.why-cards {
  display: grid;
  gap: 1.6rem;
}

.why-card {
  background: linear-gradient(
    135deg,
    rgba(18,18,18,0.9),
    rgba(36,36,36,0.9)
  );
  padding: 2.2rem;
  border-radius: 16px;

  opacity: 0;
  transform: translateY(40px);
  animation: fadeUp 0.8s ease forwards;

  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* stagger */
.why-card:nth-child(2) {
  animation-delay: 0.2s;
}

/* hover lift */
.why-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 60px rgba(0,0,0,0.25);
}
.why-list li:hover {
  color: #fbf5f5;
  transform: translateX(4px);
  transition: color 0.2s ease, transform 0.2s ease;
}

/* typography */
.why-card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.6rem;
  font-weight: 600;
}
/* ===== ANIMATION ===== */
@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .why-layout {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .why-quote {
    margin: auto;
  }
}
/* ================= WHY NORTHMARK — ENTERPRISE ================= */

.northmark-section {
  padding: 5rem 1rem;
  background: #f8fafc;
  color: #0f172a;
}

.northmark-container {
  max-width: 1200px;
  margin: auto;
}

/* ===== LAYOUT GRID ===== */
.northmark-layout {
  display: grid;
  grid-template-columns: 1.1fr 1.4fr;
  grid-template-rows: auto auto;
  gap: 3rem 3.5rem;
  align-items: start;
}

/* ===== LEFT TEXT ===== */
.northmark-header.left {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  text-align: left;

  margin-top: 8.2rem;
}
.northmark-header.left h2 {
  font-size: clamp(3rem, 3.6vw, 3.4rem);
  margin-bottom: 1.2rem;
  letter-spacing: -0.025em;
  line-height: 1.12;
}
.northmark-top-cards {
  margin-top: 0.4rem;   /* subtle optical alignment with title */
}
.northmark-tag {
  display: inline-block;
  background: linear-gradient(135deg, rgba(15,15,15,0.92), rgba(40,40,40,0.92));
  color: #fff;
  padding: 0.55rem 1.35rem;
  font-size: 0.95rem;
  border-radius: 999px;
  font-weight: 600;
}

/* ===== TOP RIGHT (2 CARDS) ===== */
.northmark-top-cards {
  grid-column: 2 / 3;
  grid-row: 1 / 2;

  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

/* ===== BOTTOM ROW (3 CARDS) ===== */
.northmark-bottom-cards {
  grid-column: 1 / -1;
  grid-row: 2 / 3;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/* ===== CARD ===== */
.northmark-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  position: relative;
  overflow: hidden;

  opacity: 0;
  transform: translateY(40px);
  animation: fadeUp 0.8s ease forwards;

  transition:
    background 0.35s ease,
    color 0.35s ease,
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

/* STAGGER */
.northmark-card:nth-child(1) { animation-delay: 0.2s; }
.northmark-card:nth-child(2) { animation-delay: 0.35s; }
.northmark-card:nth-child(3) { animation-delay: 0.5s; }
.northmark-card:nth-child(4) { animation-delay: 0.65s; }
.northmark-card:nth-child(5) { animation-delay: 0.8s; }

/* TEXT */
.northmark-card h3 {
  font-size: 1.35rem;
  margin-bottom: 0.6rem;
  color: #0f172a;
}

.northmark-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #475569;
}

/* HOVER */
.northmark-card:hover {
  background: linear-gradient(135deg, rgba(15,15,15,0.92), rgba(40,40,40,0.92));
  color: #ffffff;
  transform: translateY(-10px);
  box-shadow: 0 30px 70px rgba(0,0,0,0.15);
}

.northmark-card:hover h3,
.northmark-card:hover p {
  color: #ffffff;
}

/* ANIMATION */
@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .northmark-layout {
    grid-template-columns: 1fr;
  }

  .northmark-header.left {
    text-align: center;
  }

  .northmark-top-cards,
  .northmark-bottom-cards {
    grid-column: 1 / -1;
  }

  .northmark-bottom-cards {
    grid-template-columns: 1fr;
  }
}
/* ================= WHO WE WORK WITH — ENTERPRISE (FIXED) ================= */

.who-we-work {
  padding: 4.5rem 1rem 5.5rem;   /* balanced top & bottom rhythm */
  background: #f8fafc;
}

.who-container {
  max-width: 1200px;
  margin: auto;
}

/* ===== MAIN GRID ===== */
.who-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  grid-template-rows: auto auto;
  gap: 2.5rem 3rem;              /* tighter, executive spacing */
  align-items: center;           /* KEY: vertical alignment with cards */
}

/* ===== LEFT TEXT ===== */
.who-text h2 {
  font-size: clamp(2.4rem, 3vw, 2.8rem);
  margin-bottom: 1.2rem;         /* FIXED: removed huge 8rem gap */
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #0f172a;
}

.who-text .lead {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #475569;
  margin-bottom: 0.6rem;
  max-width: 520px;
}

.who-text .supporting-text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #64748b;
  max-width: 520px;
}

/* ===== TOP RIGHT CARDS ===== */
.who-top-cards {
  display: grid;
  gap: 1.4rem;
}

/* ===== BOTTOM CARDS ===== */
.who-bottom-cards {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
  margin-top: -0.4rem;          /* pulls cards closer to main grid */
}

/* ===== CARD STYLE ===== */
.who-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 2.1rem;
  box-shadow: 0 12px 35px rgba(0,0,0,0.08);

  opacity: 0;
  transform: translateY(40px);
  animation: fadeUp 0.7s ease forwards;

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    background 0.35s ease,
    color 0.35s ease;
}

/* stagger animation */
.who-top-cards .who-card:nth-child(2) { animation-delay: 0.12s; }
.who-bottom-cards .who-card:nth-child(1) { animation-delay: 0.22s; }
.who-bottom-cards .who-card:nth-child(2) { animation-delay: 0.32s; }

/* hover interaction */
.who-card:hover {
  background: linear-gradient(135deg, rgba(15,15,15,0.92), rgba(40,40,40,0.92));
  color: #ffffff;
  transform: translateY(-10px);
  box-shadow: 0 28px 70px rgba(0,0,0,0.16);
}

.who-card:hover h3,
.who-card:hover p {
  color: #ffffff;
}

/* number badge */
.who-card .number {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #94a3b8;
  display: block;
  margin-bottom: 0.35rem;
}

/* typography */
.who-card h3 {
  font-size: 1.18rem;
  margin-bottom: 0.35rem;
  color: #0f172a;
}

.who-card p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #475569;
}

/* ===== ANIMATION ===== */
@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .who-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .who-text {
    text-align: center;
  }

  .who-bottom-cards {
    grid-template-columns: 1fr;
    margin-top: 0.2rem;
  }
}
  /* ==============================
    PREMIUM NORTHMARK FOOTER — CLEAN & PRO
  ============================== */

  .site-footer {
    position: relative;
    background:
      radial-gradient(1200px 400px at 10% -10%, rgba(255,255,255,0.04), transparent 40%),
      radial-gradient(900px 300px at 90% 110%, rgba(255,255,255,0.03), transparent 40%),
      #0b0b0b;
    color: #ffffff;
    padding: 64px 6vw 28px;
    border-top: 1px solid rgba(255,255,255,0.06);
    overflow: hidden;
  }

  /* subtle top glow line */
  .site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 60%;
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  }

  /* MAIN GRID — 5 COLUMN LAYOUT */
  .footer-main {
    display: grid;
    grid-template-columns: 1.2fr 1.5fr 1.3fr 1fr auto;
    align-items: flex-start;
    gap: 48px;
    max-width: 1400px;
    margin: 0 auto;
  }

  /* LOGO */
  .footer-left {
    display: flex;
    align-items: center;
  }

  .footer-brand img {
    height: 160px;
    max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 12px 30px rgba(255,255,255,0.12));
  }

  /* COMPANY INFO */
  .footer-company {
    font-size: 13px;
    line-height: 1.6;
    color: #d7d7d7;
    max-width: 340px;
  }

  .footer-company strong {
    display: block;
    color: #ffffff;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 700;
  }

  /* CONTACT LINKS */
  .footer-contact a {
    display: block;
    color: #bcbcbc;
    text-decoration: none;
    margin-top: 4px;
    transition: color 0.2s ease;
  }

  .footer-contact a:hover {
    color: #ffffff;
  }

  /* SLOGANS */
  .footer-slogans {
    max-width: 360px;
  }

  .footer-slogans div {
    font-size: 14px;
    color: #d7d7d7;
    line-height: 1.5;
    font-weight: 500;
    letter-spacing: 0.2px;
  }

  /* NAV LINKS */
  .footer-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .footer-links h4 {
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #ffffff;
  }

  .footer-links a {
    text-decoration: none;
    color: #bcbcbc;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.2px;
    transition: all 0.2s ease;
  }

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

  /* SOCIAL */
  .footer-social {
    display: flex;
    gap: 12px;
    align-self: flex-start;
  }

  .footer-social a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background:
      radial-gradient(circle at 30% 30%, rgba(255,255,255,0.12), transparent 60%),
      linear-gradient(180deg, #161616, #0f0f0f);
    border: 1px solid rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 13px;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.08),
      0 8px 18px rgba(0,0,0,0.5);
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .footer-social a:hover {
    background: #ffffff;
    color: #0b0b0b;
    border-color: #ffffff;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 14px 30px rgba(0,0,0,0.7);
  }

  /* BOTTOM BAR */
  .footer-bottom {
    margin-top: 40px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.08);
    text-align: center;
    font-size: 12px;
    color: #9a9a9a;
    letter-spacing: 0.3px;
  }

  /* ==============================
    RESPONSIVE
  ============================== */

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

    .footer-social {
      justify-content: flex-start;
    }
  }

  @media (max-width: 600px) {
    .footer-main {
      grid-template-columns: 1fr;
      gap: 36px;
      text-align: center;
    }

    .footer-left {
      justify-content: center;
    }

    .footer-social {
      justify-content: center;
    }

    .footer-brand img {
      height: 90px;
    }
  }
  /* ================= SERVICES INTRO — TIGHT ENTERPRISE ================= */
  .services-intro {
    padding: 90px 1.5rem 36px;     /* REDUCED TOP + BOTTOM */
    background: #ffffff;
    color: #0b0b0b;
  }

  .services-intro-container {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
  }

  .services-intro h1 {
    font-size: clamp(36px, 5vw, 52px);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 4px;           
  }

  .services-intro h2 {
    font-size: clamp(26px, 4vw, 40px);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 12px;          /* TIGHTER */
    color: #111111;
  }

  .services-intro p {
    max-width: 720px;
    margin: 0 auto;
    font-size: 1rem;              /* SLIGHTLY TIGHTER */
    line-height: 1.65;            /* TIGHTER */
    color: #6b6b6b;
  }
  /* ================= INDUSTRIES — NORTHMARK PREMIUM ================= */

  .industries-section {
    padding: 10px 10px;  /* increased bottom padding */
  }

  .industries-container {
    max-width: 1400px;
    margin: 0 auto;
  }

  .industries-title {
    font-size: clamp(40px, 6vw, 72px);
    font-weight: 800;
    text-align: center;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
  }
  .industries-subtitle {
    text-align: center;
    font-size: 18px;
    color: var(--muted);
    margin-bottom: 80px;
    line-height: 1.6;
  }

  /* GRID */
  .industries-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
  }

  /* PREMIUM CARD */
  .industry-card {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    background: #000;
    box-shadow: 
      0 20px 60px rgba(0,0,0,0.12),
      inset 0 1px 0 rgba(255,255,255,0.04);
    transition: 
      transform 0.45s cubic-bezier(0.22,1,0.36,1),
      box-shadow 0.45s cubic-bezier(0.22,1,0.36,1);
    cursor: pointer;
  }

  /* LOCK CARD HEIGHT (PREMIUM GRID CONSISTENCY) */
  .industry-card img {
    width: 100%;
    height: 300px;            /* consistent height */
    object-fit: cover;
    opacity: 0.92;
    transition: 
      transform 0.7s ease,
      opacity 0.4s ease;
  }

  /* STRONGER GRADIENT FOR TEXT LEGIBILITY */
  .industry-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      rgba(0,0,0,0.75),
      rgba(0,0,0,0.25) 40%,
      transparent 70%
    );
    z-index: 1;
  }

  /* LABEL */
  .industry-label {
    position: absolute;
    left: 24px;
    bottom: 22px;
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    z-index: 2;
    letter-spacing: 0.3px;
    text-shadow: 0 6px 18px rgba(0,0,0,0.6);
  }

  /* HOVER — LUXURY DEPTH */
  .industry-card:hover {
    transform: translateY(-10px);
    box-shadow: 
      0 40px 100px rgba(0,0,0,0.28),
      inset 0 1px 0 rgba(255,255,255,0.06);
  }

  .industry-card:hover img {
    transform: scale(1.1);
    opacity: 1;
  }

  /* SCROLL REVEAL — SYNCED WITH SYSTEM */
  /* SAFE REVEAL SYSTEM */

  /* Default: visible */
  .reveal {
    opacity: 1;
    transform: none;
  }

  /* When JS is active */
  .js .reveal {
    opacity: 0;
    transform: translateY(36px);
    transition: 
      opacity 0.8s cubic-bezier(0.22,1,0.36,1),
      transform 0.8s cubic-bezier(0.22,1,0.36,1);
  }

  .js .reveal.active {
    opacity: 1;
    transform: translateY(0);
  }

  /* STAGGER DELAYS */
  .delay-1 { transition-delay: 0.1s; }
  .delay-2 { transition-delay: 0.2s; }
  .delay-3 { transition-delay: 0.3s; }
  .delay-4 { transition-delay: 0.4s; }
  .delay-5 { transition-delay: 0.5s; }
  .delay-6 { transition-delay: 0.6s; }

  /* RESPONSIVE */
  /* ================= ABOUT — NORTHMARK PREMIUM ================= */
  /* =========================
    ABOUT — GLOBAL OFFSET
  ========================= */

  main {
    padding-top: 60px; /* Fix for fixed navbar overlap */
  }

  /* =========================
    ABOUT HERO
  ========================= */

  .about-hero {
    padding: 100px 6vw 70px;   /* tightened */
    background: #ffffff;
  }

  .about-hero-container {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
  }

  .about-hero h1 {
    font-size: clamp(40px, 6vw, 68px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0;
  }

  /* =========================
    ABOUT BODY
  ========================= */

  .about-body {
    padding: 30px 6vw 90px;  /* tightened */
    background: #ffffff;
  }

  .about-body-container {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
  }

  .about-body p {
    font-size: 18px;
    line-height: 1.8;
    color: var(--muted);
    margin: 0;
  }

  /* =========================
    ABOUT VALUES
  ========================= */

  .about-values {
    padding: 10px 6vw;   /* tightened */
    background: #fafafa;
  }

  .about-values-container {
    max-width: 1200px;
    margin: 0 auto;
  }

  .about-values h2 {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 800;
    text-align: center;
    margin-bottom: 56px;
    letter-spacing: -0.02em;
  }

  /* GRID */

  .about-values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
  }

  /* VALUE CARDS — PREMIUM */

  .about-value-card {
    background: #ffffff;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 16px 44px rgba(0,0,0,0.06);
    transition: 
      transform 0.45s cubic-bezier(0.22,1,0.36,1),
      box-shadow 0.45s cubic-bezier(0.22,1,0.36,1);
  }

  .about-value-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    transition: transform 0.7s ease;
  }

  .about-value-card div {
    padding: 22px 22px 26px;
    font-size: 17px;
    font-weight: 800;
    color: #111;
    line-height: 1.4;
    letter-spacing: -0.01em;
  }

  /* HOVER */

  .about-value-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 28px 70px rgba(0,0,0,0.14);
  }

  .about-value-card:hover img {
    transform: scale(1.08);
  }

  /* ===============================
    PREMIUM ANIMATED ABOUT CLOSING
  ================================ */

  .premium-closing {
    position: relative;
    padding: 10px 20px 120px;   /* tightened */
    background: radial-gradient(
      1200px 400px at 50% -10%,
      rgba(0,0,0,0.04),
      transparent 40%
    );
    overflow: hidden;
  }

  .about-closing-container {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
  }

  /* CINEMATIC GLOW */

  .closing-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 520px;
    height: 260px;
    transform: translate(-50%, -50%);
    background: radial-gradient(
      circle,
      rgba(0,0,0,0.08),
      transparent 65%
    );
    filter: blur(60px);
    opacity: 0;
    transition: opacity 1.2s ease;
    pointer-events: none;
  }

  /* MAIN TEXT */

  .closing-text {
    position: relative;
    font-size: clamp(20px, 3vw, 28px);
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: -0.01em;
    color: #111;
    opacity: 0;
    transform: translateY(40px);
    transition:
      opacity 0.9s cubic-bezier(0.22,1,0.36,1),
      transform 0.9s cubic-bezier(0.22,1,0.36,1);
  }

  /* HIGHLIGHT */

  .closing-highlight {
    display: inline-block;
    font-weight: 800;
    background: linear-gradient(90deg, #000, #444, #000);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmerText 4s linear infinite;
  }

  /* ACTIVE STATE */

  .js .premium-closing .reveal.active .closing-text {
    opacity: 1;
    transform: translateY(0);
  }

  .js .premium-closing .reveal.active .closing-glow {
    opacity: 1;
  }

  /* FLOAT EFFECT */

  .js .premium-closing .reveal.active .about-closing-container {
    animation: subtleFloat 8s ease-in-out infinite;
  }

  /* ANIMATIONS */

  @keyframes shimmerText {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
  }

  @keyframes subtleFloat {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-6px); }
    100% { transform: translateY(0); }
  }

  /* =========================
    RESPONSIVE
  ========================= */

  /* ===============================
    CONTACT — NORTHMARK PREMIUM
  ================================ */

  .contact-hero {
    padding: 60px 6vw 60px;
    background: #ffffff;
  }

  .contact-hero-container {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
  }

  .contact-hero h1 {
    font-size: clamp(42px, 6vw, 68px);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 10px;
  }

  .contact-hero p {
    font-size: 18px;
    color: var(--muted);
    line-height: 1.6;
  }

  /* FORM SECTION */
  .contact-section {
    padding: 60px 6vw 140px;
    background: #fafafa;
  }

  .contact-container {
    max-width: 900px;
    margin: 0 auto;
  }

  /* FORM CARD */
  .contact-form {
    background: #ffffff;
    border-radius: 26px;
    padding: 48px 46px;
    box-shadow:
      0 20px 60px rgba(0,0,0,0.08),
      inset 0 1px 0 rgba(255,255,255,0.6);
  }

  /* GRID */
  .form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }

  /* GROUP */
  .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .form-group.full {
    margin-top: 22px;
  }

  /* LABEL */
  .form-group label {
    font-size: 13px;
    font-weight: 700;
    color: #111;
    letter-spacing: 0.02em;
  }

  /* INPUTS */
  .form-group input,
  .form-group textarea {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 16px;
    font-size: 14px;
    font-family: inherit;
    background: #fafafa;
    transition:
      border-color 0.2s ease,
      box-shadow 0.2s ease,
      background 0.2s ease;
  }

  .form-group input::placeholder,
  .form-group textarea::placeholder {
    color: #999;
  }

  /* FOCUS — PREMIUM */
  .form-group input:focus,
  .form-group textarea:focus {
    outline: none;
    background: #ffffff;
    border-color: #000;
    box-shadow: 0 0 0 4px rgba(0,0,0,0.05);
  }

  /* ACTIONS */
  .form-actions {
    margin-top: 36px;
    text-align: center;
  }

  .form-actions .btn-primary {
    padding: 14px 42px;
    font-size: 14px;
    letter-spacing: 0.04em;
  }

  /* ===============================
    FOOTER COMPANY + CONTACT INFO
  ================================ */

  .footer-company {
    font-size: 14px;
    color: #cfcfcf;
    line-height: 1.6;
    font-weight: 500;
  }

  .footer-company strong {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 6px;
    letter-spacing: 0.02em;
  }

  .footer-contact {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
  }

  .footer-contact a {
    font-size: 14px;
    color: #bcbcbc;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
  }

  .footer-contact a:hover {
    color: #ffffff;
    transform: translateX(4px);
  }
  @media (max-width: 900px) {
    .hero {
      padding: 120px 20px 50px;
    }

    .top-slideshow {
      width: 220px;
      height: 48px;
    }

    .slide-text {
      font-size: 14px;
    }
  }

  @media (max-width: 600px) {
    .hero h1 {
      font-size: 34px;
    }

    .hero h2 {
      font-size: 26px;
    }

    .hero p {
      font-size: 15px;
    }

    .cta a {
      width: 100%;
      text-align: center;
    }
  }
  @media (max-width: 1024px) {
    .stats-grid,
    .feature-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 600px) {
    .stats-grid,
    .feature-grid {
      grid-template-columns: 1fr;
    }

    .who-we-are {
      padding: 80px 20px;
    }
  }
  @media (max-width: 600px) {
    .problem-card {
      min-width: 260px;
      max-width: 260px;
      padding: 24px 20px;
    }

    .problem-section {
      padding: 90px 20px;
    }
  }
  @media (max-width: 1024px) {
    .why-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

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

    .why-section {
      padding: 90px 20px;
    }

    .why-quote {
      font-size: 17px;
    }
  }
  @media (max-width: 1100px) {
    .approach-grid {
      grid-template-columns: repeat(2, 1fr);
    }

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

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

  @media (max-width: 600px) {
    .approach-grid,
    .system-flow {
      grid-template-columns: 1fr;
    }

    .approach-section {
      padding: 90px 20px;
    }
  }
  @media (max-width: 1100px) {
    .northmark-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

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

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

    .northmark-section {
      padding: 7rem 1rem 6.5rem;
    }
  }
  @media (max-width: 600px) {
    .who-work-card {
      min-width: 240px;
      max-width: 240px;
      padding: 32px 22px;
    }
  }
  @media (max-width: 1024px) {
    .industries-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

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

    .industry-card img {
      height: 220px;
    }

    .industries-section {
      padding: 100px 20px;
    }
  }
  @media (max-width: 900px) {
    .about-values-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 600px) {
    .about-values-grid {
      grid-template-columns: 1fr;
    }

    .about-hero {
      padding: 110px 20px 60px;
    }

    .about-body {
      padding: 20px 20px 60px;
    }

    .premium-closing {
      padding: 100px 20px 90px;
    }
  }
  @media (max-width: 700px) {
    .form-grid {
      grid-template-columns: 1fr;
    }

    .contact-form {
      padding: 32px 20px;
    }

    .contact-section {
      padding: 50px 20px 100px;
    }
  }
  @media (max-width: 900px) {
    .footer-main {
      grid-template-columns: 1fr;
      gap: 50px;
    }

    .footer-panel {
      flex-direction: column;
      gap: 32px;
    }
  }

  @media (max-width: 600px) {
    .site-footer {
      padding: 70px 20px 28px;
    }

    .footer-brand img {
      height: 80px;
    }

    .footer-slogans div {
      font-size: 14px;
    }
  }
  .footer-panel {
    display: grid;
    grid-template-columns: 1.2fr 1fr auto;
    gap: 40px;
  }

  .footer-company {
    max-width: 320px;
  }

  .footer-social {
    align-self: flex-start;
  }
  /* =========================================
    DESKTOP VIEW ON MOBILE — COMPACT HERO FIX
    (Fixes huge white space)
  ========================================= */

  /* Targets phones even in desktop mode */
  @media screen and (max-width: 900px) {

    /* HERO COMPACT */
    .hero {
      min-height: auto !important;
      padding: 110px 16px 40px !important;
    }

    .hero h1 {
      font-size: clamp(32px, 7vw, 46px) !important;
    }

    .hero h2 {
      font-size: clamp(24px, 6vw, 34px) !important;
    }

    .hero p {
      margin: 16px auto 24px !important;
      font-size: 14px !important;
    }

    /* TOP SLIDESHOW */
    .top-slideshow {
      height: 42px !important;
      width: 200px !important;
      margin-bottom: 20px !important;
    }

    .slide-text {
      font-size: 13px !important;
      letter-spacing: 0.14em !important;
    }

    /* CTA BUTTONS */
    .cta {
      gap: 10px !important;
    }

    .btn-primary,
    .btn-secondary {
      padding: 12px 22px !important;
      font-size: 13px !important;
    }

    /* NAVBAR OFFSET FIX */
    main,
    .hero {
      margin-top: 20px !important;
    }
  }
  /* ==============================
    CONTACT INTRO POP — PREMIUM
  ============================== */

  .contact-intro-pop {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at 50% 30%, rgba(238, 235, 235, 0.06), rgba(0,0,0,0.85));
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: introFadeOut 0.8s ease forwards;
    animation-delay: 2.2s;   /* visible time */
  }

  .contact-intro-card {
    background: linear-gradient(180deg, #d8d3d3, #eae3e3);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 18px;
    padding: 48px 64px;
    text-align: center;
    box-shadow: 0 40px 120px rgba(0,0,0,0.7);
    animation: introPopIn 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .contact-intro-card h1 {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 10px;
  }

  .contact-intro-card p {
    font-size: 16px;
    color: #000000;
    letter-spacing: 0.3px;
  }

  /* Animations */
  @keyframes introPopIn {
    from {
      opacity: 0;
      transform: scale(0.9) translateY(20px);
    }
    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }

  @keyframes introFadeOut {
    to {
      opacity: 0;
      visibility: hidden;
    }
  }
  /* =====================================================
    SERVICES HUBS — CINEMATIC ENTRY + TRUE ORBIT (FINAL)
  ===================================================== */

  /* ============== CONTAINER ============== */
  .services-hubs {
    padding: 10px 5vw 30px;
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
    justify-items: center;
  }
/* ===== SERVICES HUB PREMIUM MOTION ===== */

.operations-card {
  position: relative;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  margin: 40px auto;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08);

  /* scroll entrance state */
  opacity: 0;
  transform: scale(0.9);
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.operations-card.visible {
  opacity: 1;
  transform: scale(1);
}

/* subtle hover depth */
.operations-card.visible:hover {
  transform: scale(1.02);
}

/* center label */
.operations-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 600;
  color: #0f172a;
}

/* ===== SERVICE BUTTONS ===== */

.operations-btn {
  position: absolute;
  padding: 10px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  text-align: center;
  line-height: 1.2;

  /* entrance animation */
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);

  /* floating motion */
  animation: float 5s ease-in-out infinite;
}

.operations-btn.visible {
  opacity: 1;
  transform: translateY(0);
}

/* hover lift */
.operations-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.15);
}

/* positions */
.operations-btn.top { top: -14px; left: 50%; transform: translateX(-50%); }
.operations-btn.bottom { bottom: -14px; left: 50%; transform: translateX(-50%); }
.operations-btn.left { left: -18px; top: 50%; transform: translateY(-50%); }
.operations-btn.right { right: -18px; top: 50%; transform: translateY(-50%); }

/* floating keyframe */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

  /* ============== HUB EFFECTS ============== */
  @keyframes hubPop {
    0%   { transform: scale(0.6); opacity: 0; }
    60%  { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); }
  }

  @keyframes hubPulse {
    0%,100% {
      transform: scale(1);
      box-shadow:
        0 18px 40px rgba(0,0,0,0.45),
        0 0 0 6px rgba(255,255,255,0.03);
    }
    50% {
      transform: scale(1.035);
      box-shadow:
        0 24px 60px rgba(0,0,0,0.55),
        0 0 0 10px rgba(255,255,255,0.04);
    }
  }

  /* ============== RESPONSIVE ============== */
  @media (max-width: 1200px) {
    .services-hubs {
      grid-template-columns: 1fr;
      gap: 70px;
      padding: 40px 4vw 30px;
      margin-top: 70px;
    }

    .services-hubs.hubs-enter .operations-card {
      transform: scale(1);
    }
  }
  .footer-social {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.social-icons {
  display: flex;
  gap: 14px;
}

.footer-map iframe {
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}