/* =====================================================
       CSS CUSTOM PROPERTIES — Edit brand colors here
       ===================================================== */
    :root {
      /* Brand Colors */
      --steel-blue:       #1E3A5F;
      --steel-blue-dark:  #152B47;
      --steel-blue-light: #2A4F7F;
      --graphite:         #374151;
      --orange:           #F97316;
      --orange-dark:      #D9610A;
      --white:            #F9FAFB;
      --concrete:         #D1D5DB;
      --concrete-light:   #F0F4F8;

      /* Typography */
      --font-heading: 'Montserrat', sans-serif;
      --font-body:    'Inter', sans-serif;

      /* Layout */
      --container: 1200px;
      --radius:    3px;

      /* Transitions */
      --ease: all 0.3s ease;

      /* Shadows */
      --shadow-sm: 0 2px 12px rgba(0,0,0,0.08);
      --shadow-md: 0 8px 28px rgba(0,0,0,0.14);
      --shadow-lg: 0 16px 48px rgba(0,0,0,0.22);
    }

    /* =====================================================
       RESET & BASE STYLES
       ===================================================== */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    html { scroll-behavior: smooth; font-size: 16px; }

    body {
      font-family: var(--font-body);
      background: var(--white);
      color: var(--graphite);
      line-height: 1.6;
      overflow-x: hidden;
    }

    img  { max-width: 100%; display: block; }
    a    { text-decoration: none; color: inherit; }
    ul   { list-style: none; }

    /* =====================================================
       UTILITY — Shared layout helpers
       ===================================================== */

    /* .container centers content and sets max width */
    .container {
      max-width: var(--container);
      margin: 0 auto;
      padding: 0 28px;
    }

    /* .section-label — small orange eyebrow text above headings */
    .section-label {
      font-family: var(--font-heading);
      font-weight: 600;
      font-size: 0.72rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--orange);
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
    }

    .section-label::before {
      content: '';
      width: 32px;
      height: 2px;
      background: var(--orange);
      flex-shrink: 0;
      display: var(--label-line, block);
    }

    /* .section-title — main heading style shared across all sections */
    .section-title {
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: clamp(2rem, 4vw, 2.9rem);
      color: var(--steel-blue);
      line-height: 1.12;
      letter-spacing: -0.02em;
      margin-bottom: 18px;
    }

    .section-title .accent { color: var(--orange); }

    .section-desc {
      font-size: 1rem;
      color: var(--graphite);
      line-height: 1.78;
      max-width: 560px;
    }

    /* Button system */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 14px 32px;
      font-family: var(--font-heading);
      font-weight: 600;
      font-size: 0.82rem;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      border: 2px solid transparent;
      border-radius: var(--radius);
      cursor: pointer;
      transition: var(--ease);
    }

    .btn-primary {
      background: var(--orange);
      color: #fff;
      border-color: var(--orange);
    }
    .btn-primary:hover {
      background: var(--orange-dark);
      border-color: var(--orange-dark);
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(249,115,22,0.38);
    }

    .btn-ghost {
      background: transparent;
      color: #fff;
      border-color: rgba(255,255,255,0.45);
    }
    .btn-ghost:hover {
      border-color: #fff;
      background: rgba(255,255,255,0.08);
    }

    .btn-outline {
      background: transparent;
      color: var(--steel-blue);
      border-color: var(--steel-blue);
    }
    .btn-outline:hover {
      background: var(--steel-blue);
      color: #fff;
    }

    .btn-sm {
      padding: 10px 22px;
      font-size: 0.75rem;
    }

    /* Arrow icon inside buttons */
    .btn-arrow {
      font-size: 1rem;
      transition: transform 0.2s ease;
    }
    .btn:hover .btn-arrow { transform: translateX(4px); }

    /* =====================================================
       NAVBAR
       HOW IT WORKS: Fixed navigation that transitions from
       transparent to solid steel-blue on scroll. JS adds
       .scrolled class. On mobile, hamburger toggles .open.
       ===================================================== */
    .navbar {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 900;
      padding: 22px 0;
      transition: var(--ease);
    }

    .navbar.scrolled {
      background: var(--steel-blue-dark);
      padding: 14px 0;
      box-shadow: 0 2px 20px rgba(0,0,0,0.3);
    }

    .navbar-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    /* Logo mark */
    .nav-logo {
      display: flex;
      flex-direction: column;
      line-height: 1;
    }

    .nav-logo-main {
      font-family: var(--font-heading);
      font-weight: 900;
      font-size: 1.35rem;
      color: #fff;
      letter-spacing: -0.03em;
    }

    .nav-logo-main span { color: var(--orange); }

    .nav-logo-sub {
      font-family: var(--font-heading);
      font-size: 0.5rem;
      font-weight: 600;
      letter-spacing: 0.18em;
      color: rgba(255,255,255,0.5);
      text-transform: uppercase;
      margin-top: 2px;
    }

    /* Nav links */
    .nav-links {
      display: flex;
      align-items: center;
      gap: 36px;
    }

    .nav-links a {
      font-family: var(--font-heading);
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.75);
      transition: var(--ease);
    }

    .nav-links a:hover { color: var(--orange); }

    .nav-cta {
      background: var(--orange);
      color: #fff !important;
      padding: 10px 22px;
      border-radius: var(--radius);
    }

    .nav-cta:hover {
      background: var(--orange-dark) !important;
    }

    /* Hamburger button (mobile only) */
    .nav-hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 4px;
      z-index: 910;
    }

    .nav-hamburger span {
      display: block;
      width: 24px;
      height: 2px;
      background: #fff;
      border-radius: 2px;
      transition: var(--ease);
    }

    .nav-hamburger.is-open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
    .nav-hamburger.is-open span:nth-child(2) { opacity: 0; }
    .nav-hamburger.is-open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

    /* =====================================================
       HERO SECTION
       HOW IT WORKS: Full-viewport dark blue section with an
       animated CSS background that mimics a video feed.
       Replace the .hero-bg::before block with a real <video>
       or YouTube iframe — instructions are in the HTML below.
       ===================================================== */
    .hero {
      position: relative;
      min-height: 100vh;
      display: flex;
      align-items: center;
      overflow: hidden;
    }

/* ── HERO BACKGROUND ────────────────────────────────── */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
 
  /* OPTION A: local file — preferred for page speed */
  background-image: url('mn-building.jpg');
 
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
 
  /* Gentle zoom-in on load — cinematic, no extra JS needed */
  animation: heroZoom 18s ease-out forwards;
}
 
@keyframes heroZoom {
  0%   { transform: scale(1.06); }
  100% { transform: scale(1.0);  }
}

/* Disable the old animated grid — no longer needed */
.hero-bg::before {
  display: none;
}
 
/* Also remove the beam animation element if still present */
.hero-beam {
  display: none;
}

    @keyframes gridScroll {
      0%   { background-position: 0 0; }
      100% { background-position: 64px 64px; }
    }

    /* Sweeping light beam animation */
    .hero-beam {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        110deg,
        transparent 20%,
        rgba(249,115,22,0.06) 50%,
        transparent 80%
      );
      animation: beamSweep 10s ease-in-out infinite;
    }

    @keyframes beamSweep {
      0%, 100% { transform: translateX(-120%) skewX(-12deg); }
      50%       { transform: translateX(220%)  skewX(-12deg); }
    }

/* ── HERO OVERLAY ────────────────────────────────────── */
/*
  Your exact overlay value: rgba(26, 31, 46, 0.65)
  The ::after adds a subtle bottom fade so the stats bar
  stays readable without increasing the overall opacity.
*/
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(26, 31, 46, 0.65);
}
 
.hero-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 40%,
    rgba(26, 31, 46, 0.45) 100%
  );
  pointer-events: none;
}

    /* Content sits on top of overlay */
    .hero-content {
      position: relative;
      z-index: 2;
      padding: 140px 0 100px;
      width: 100%;
    }

    .hero-eyebrow {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 30px;
    }

    .hero-eyebrow-bar {
      width: 48px;
      height: 2px;
      background: var(--orange);
    }

    .hero-eyebrow-text {
      font-family: var(--font-heading);
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--orange);
    }

    .hero-title {
      font-family: var(--font-heading);
      font-weight: 900;
      font-size: clamp(2.6rem, 6.5vw, 5rem);
      color: #fff;
      line-height: 1.06;
      letter-spacing: -0.03em;
      margin-bottom: 28px;
      max-width: 760px;
      text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
    }

    .hero-title .accent { color: var(--orange); }

    .hero-subtitle {
      font-size: 1.05rem;
      color: rgba(255,255,255,0.68);
      line-height: 1.72;
      max-width: 500px;
      margin-bottom: 46px;
    }

    .hero-actions {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      margin-bottom: 80px;
    }

    /* Hero stats row */
    .hero-stats {
      display: flex;
      gap: 0;
      border-top: 1px solid rgba(255,255,255,0.1);
      padding-top: 40px;
    }

    .hero-stat {
      padding-right: 44px;
      margin-right: 44px;
      border-right: 1px solid rgba(255,255,255,0.1);
    }

    .hero-stat:last-child {
      border-right: none;
      margin-right: 0;
    }

    .hero-stat-num {
      font-family: var(--font-heading);
      font-weight: 800;
      font-size: 2.6rem;
      color: var(--orange);
      line-height: 1;
      letter-spacing: -0.03em;
    }

    .hero-stat-label {
      font-size: 0.72rem;
      font-weight: 500;
      color: rgba(255,255,255,0.45);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-top: 4px;
    }



    /* Scroll hint */
    .hero-scroll {
      position: absolute;
      bottom: 48px;
      right: 52px;
      z-index: 3;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    .hero-scroll-line {
      width: 1px;
      height: 56px;
      background: linear-gradient(to bottom, rgba(255,255,255,0.45), transparent);
      animation: scrollBlink 2.2s ease-in-out infinite;
    }

    @keyframes scrollBlink {
      0%, 100% { opacity: 0.3; }
      50%       { opacity: 1;   }
    }

    .hero-scroll-label {
      font-family: var(--font-heading);
      font-size: 0.6rem;
      letter-spacing: 0.22em;
      color: rgba(255,255,255,0.3);
      text-transform: uppercase;
      writing-mode: vertical-rl;
    }

    /* =====================================================
       ABOUT SECTION
       HOW IT WORKS: CSS Grid with two columns. Left column
       holds an image mosaic (placeholders — replace with
       real <img> tags). Right column has copy + features.
       The orange badge is absolutely positioned over the grid.
       ===================================================== */
    .about {
      padding: 120px 0;
      background: var(--white);
    }

    .about-grid {
      display: grid;
      grid-template-columns: 5fr 7fr;
      gap: 72px;
      align-items: center;
    }

    /* Left: image column (styles moved below with the photo block) */

    .about-img {
      border-radius: var(--radius);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .about-img:first-child {
      grid-row: 1 / 3;    /* Tall left image */
      min-height: 420px;
    }

    .about-img-inner {
      width: 100%;
      height: 100%;
      min-height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 4.5rem;
      /* Replace this background with an <img src="..."> tag */
    }

    .about-img:first-child .about-img-inner { min-height: 420px; }

    /* Accent badge overlaid on images */
    .about-badge {
      position: absolute;
      bottom: -22px;
      left: -22px;
      background: var(--orange);
      color: #fff;
      padding: 22px 26px;
      border-radius: var(--radius);
      z-index: 10;
      box-shadow: var(--shadow-md);
    }

    .about-badge-num {
      font-family: var(--font-heading);
      font-weight: 900;
      font-size: 2.4rem;
      line-height: 1;
    }

    .about-badge-txt {
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      opacity: 0.88;
      margin-top: 2px;
    }

    /* Right: copy */
    .about-copy { padding: 10px 0; }

    .about-features {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin: 36px 0 40px;
    }

    .about-feat {
      padding: 18px 20px;
      border-left: 3px solid var(--orange);
      background: var(--concrete-light);
    }

    .about-feat-title {
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: 0.82rem;
      color: var(--steel-blue);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: 6px;
    }

    .about-feat-desc {
      font-size: 0.82rem;
      line-height: 1.6;
      color: var(--graphite);
    }

/* About — single professional photo */
.about-images {
  position: relative;
  padding: 20px 20px 20px 0; /* room for the decorative frame */
}

/* Decorative orange corner frame behind the photo */
.about-images::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20px;
  right: 0;
  top: 20px;
  border-radius: 6px;
  z-index: 0;
  opacity: 0.55;
}

.about-photo-wrap {
  width: 100%;
  max-height: 540px;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.about-photo {
  width: 100%;
  height: 100%;
  max-height: 540px;
  object-fit: cover;
  object-position: top;
  display: block;
  border-radius: 4px;
}

    /* =====================================================
       PROJECTS SECTION
       HOW IT WORKS: Dark grid of 6 project cards. Each card
       has a colored placeholder background (add real images).
       Clicking a card triggers the modal system via JS using
       the data-modal attribute. The modal overlay + panels
       are defined at the bottom of the body.
       ===================================================== */
    .projects {
      padding: 120px 0;
      background: #0b1e32;
      position: relative;
    }

    .projects::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
      background-size: 44px 44px;
      pointer-events: none;
    }

    .projects-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 56px;
      position: relative;
      z-index: 1;
    }

    .projects-header .section-title { color: #fff; margin-bottom: 0; }

    /* 3-column grid of cards; collapses on smaller screens */
    .projects-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      position: relative;
      z-index: 1;
    }

    .project-card {
      position: relative;
      overflow: hidden;
      cursor: pointer;
      aspect-ratio: 4 / 3;
    }

    /* Colored bg layer — replace with real background-image URL */
    .project-card-bg {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 5rem;
      transition: transform 0.65s ease;
    }

    .project-card:hover .project-card-bg { transform: scale(1.09); }

    /* Unique palette per card */
    .project-card:nth-child(1) .project-card-bg { background: linear-gradient(140deg, #1E3A5F, #0c1e35); }
    .project-card:nth-child(2) .project-card-bg { background: linear-gradient(140deg, #2A4F7F, #1E3A5F); }
    .project-card:nth-child(3) .project-card-bg { background: linear-gradient(140deg, #374151, #1f2937); }
    .project-card:nth-child(4) .project-card-bg { background: linear-gradient(140deg, #1a3a5c, #0e2030); }
    .project-card:nth-child(5) .project-card-bg { background: linear-gradient(140deg, #243b55, #141e30); }
    .project-card:nth-child(6) .project-card-bg { background: linear-gradient(140deg, #2d4a6e, #192d47); }

    /* Dark gradient overlay so text is always readable */
    .project-card-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to top,
        rgba(8,20,40,0.96) 0%,
        rgba(8,20,40,0.35) 55%,
        transparent 100%
      );
      transition: opacity 0.4s ease;
    }

    .project-card:hover .project-card-overlay { opacity: 0.82; }

    /* Orange "View" circle that appears on hover */
    .project-view-btn {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.7);
      opacity: 0;
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: var(--orange);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.4rem;
      color: #fff;
      transition: all 0.3s ease;
      z-index: 5;
    }

    .project-card:hover .project-view-btn {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }

    .project-card-info {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 28px 26px;
      z-index: 4;
    }

    .project-cat {
      font-family: var(--font-heading);
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--orange);
      margin-bottom: 8px;
    }

    .project-name {
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: 1rem;
      color: #fff;
      line-height: 1.3;
      margin-bottom: 10px;
    }

    .project-loc {
      font-size: 0.76rem;
      color: rgba(255,255,255,0.48);
    }

    /* Orange left border that grows on hover */
    .project-card::after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      background: var(--orange);
      transform: scaleY(0);
      transform-origin: bottom;
      transition: transform 0.35s ease;
      z-index: 6;
    }

    .project-card:hover::after { transform: scaleY(1); }

    /* =====================================================
       MODAL SYSTEM
       HOW IT WORKS: .modal-overlay wraps .modal-panel.
       Each overlay is hidden by default (opacity:0, no pointer
       events). JS toggles the .is-open class which fades it in.
       The .modal-panel slides up on open. Clicking the
       overlay background or the × button closes the modal.
       Pressing Escape also closes it.
       ===================================================== */
    .modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 9000;
      background: rgba(5,15,30,0.88);
      backdrop-filter: blur(8px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    .modal-overlay.is-open {
      opacity: 1;
      pointer-events: all;
    }

    .modal-panel {
      background: var(--white);
      max-width: 860px;
      width: 100%;
      max-height: 90vh;
      overflow-y: auto;
      border-radius: 2px;
      transform: translateY(30px);
      transition: transform 0.35s ease;
      position: relative;
    }

    .modal-overlay.is-open .modal-panel { transform: translateY(0); }

    .modal-hero-img {
      height: 280px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 6.5rem;
      position: relative;
      flex-shrink: 0;
    }

    .modal-close-btn {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(0,0,0,0.45);
      border: none;
      color: #fff;
      font-size: 1.1rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: var(--ease);
      z-index: 10;
    }

    .modal-close-btn:hover { background: var(--orange); }

    .modal-body { padding: 40px 44px; }

    .modal-badge {
      display: inline-block;
      background: var(--orange);
      color: #fff;
      font-family: var(--font-heading);
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      padding: 6px 14px;
      border-radius: 2px;
      margin-bottom: 16px;
    }

    .modal-title {
      font-family: var(--font-heading);
      font-weight: 800;
      font-size: 1.85rem;
      color: var(--steel-blue);
      line-height: 1.2;
      margin-bottom: 8px;
    }

    .modal-location {
      font-size: 0.88rem;
      color: var(--graphite);
      opacity: 0.65;
      margin-bottom: 26px;
    }

    .modal-desc {
      font-size: 0.94rem;
      line-height: 1.78;
      color: var(--graphite);
      padding-left: 20px;
      border-left: 3px solid var(--concrete);
      margin-bottom: 32px;
    }

    .modal-specs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-bottom: 32px;
    }

    .modal-spec {
      background: var(--concrete-light);
      padding: 16px 20px;
      border-radius: 2px;
    }

    .modal-spec-label {
      font-family: var(--font-heading);
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--orange);
      margin-bottom: 4px;
    }

    .modal-spec-value {
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: 1rem;
      color: var(--steel-blue);
    }

    .modal-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .modal-tag {
      background: var(--steel-blue);
      color: rgba(255,255,255,0.82);
      font-family: var(--font-heading);
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.05em;
      padding: 6px 14px;
      border-radius: 2px;
    }

    /* =====================================================
       SERVICES SECTION
       HOW IT WORKS: Centered header + 3-column card grid
       separated by 2px gaps (background color shows through).
       Each card animates an orange bar from the bottom edge
       using CSS ::before on hover, and lifts with a shadow.
       ===================================================== */
    .services {
      padding: 120px 0;
      background: var(--concrete-light);
    }

    .services-header {
      text-align: center;
      max-width: 580px;
      margin: 0 auto 64px;
      --label-line: none;
    }

    .services-header .section-label {
      justify-content: center;
    }

    .services-header .section-desc { margin: 0 auto; }

    /* Single row of 6 portrait cards */
    .services-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 25px;
    }

    /* Portrait card */
    .service-card {
      position: relative;
      background: #fff;
      padding: 40px 28px 44px;
      border: 1px solid var(--concrete);
      border-right: none;
      display: flex;
      flex-direction: column;
      gap: 16px;
      transition: var(--ease);
      overflow: hidden;
      cursor: default;
    }

    .service-card:last-child {
      border-right: 1px solid var(--concrete);
    }

    /* Orange bottom bar — hidden by default, reveals on hover */
    .service-card::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: var(--orange);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.35s ease;
    }

    .service-card:hover {
      box-shadow: var(--shadow-md);
      transform: translateY(-4px);
      z-index: 2;
      border-color: transparent;
    }

    .service-card:hover::after {
      transform: scaleX(1);
    }

    /* Icon */
    .service-card-icon {
      font-size: 2.2rem;
      line-height: 1;
    }

    .service-title {
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: 0.82rem;
      color: var(--steel-blue);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      line-height: 1.4;
    }

    .service-desc {
      font-size: 0.8rem;
      line-height: 1.72;
      color: var(--graphite);
    }

    /* =====================================================
       TESTIMONIALS SECTION
       HOW IT WORKS: CSS-sliding testimonial carousel.
       Cards sit inside a flex container (.testimonials-track)
       that moves via translateX. Prev/Next buttons and dots
       are controlled by JS. On resize, the slider resets
       and recomputes card widths. 3 visible on desktop,
       2 on tablet, 1 on mobile.
       ===================================================== */
    .testimonials {
      padding: 120px 0;
      background: var(--concrete-light);
    }

    .testimonials-header {
      text-align: center;
      margin-bottom: 60px;
      --label-line: none;
    }

    .testimonials-header .section-label { justify-content: center; }

    .testimonials-wrap { overflow: hidden; }

    .testimonials-track {
      display: flex;
      gap: 24px;
      transition: transform 0.5s ease;
    }

    .tcard {
      background: #fff;
      padding: 44px 40px;
      border-radius: var(--radius);
      box-shadow: var(--shadow-sm);
      min-width: 100%;
      max-width: 100%;
      flex-shrink: 0;
      position: relative;
    }

    .tcard-quote {
      font-family: Georgia, serif;
      font-size: 5rem;
      line-height: 1;
      color: var(--orange);
      opacity: 0.22;
      margin-bottom: 10px;
    }

    .tcard-stars {
      color: var(--orange);
      font-size: 0.88rem;
      letter-spacing: 3px;
      margin-bottom: 18px;
    }

.tcard-text {
  font-size: 0.92rem;
  line-height: 1.82;
  color: var(--graphite);
  font-style: italic;
  margin-bottom: 28px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-wrap: break-word;
}

    .tcard-author {
      display: flex;
      align-items: center;
      gap: 14px;
      padding-top: 22px;
      border-top: 1px solid var(--concrete);
    }

    .tcard-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: var(--steel-blue);
      color: #fff;
      font-family: var(--font-heading);
      font-weight: 800;
      font-size: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .tcard-name {
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: 0.88rem;
      color: var(--steel-blue);
    }

    .tcard-role {
      font-size: 0.75rem;
      color: var(--graphite);
      opacity: 0.6;
      margin-top: 2px;
    }

    /* Slider controls */
    .slider-controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      margin-top: 44px;
    }

    .slider-btn {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 2px solid var(--steel-blue);
      background: transparent;
      color: var(--steel-blue);
      font-size: 1rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: var(--ease);
    }

    .slider-btn:hover {
      background: var(--steel-blue);
      color: #fff;
    }

    .slider-dots {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .slider-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--concrete);
      cursor: pointer;
      border: none;
      transition: var(--ease);
    }

    .slider-dot.active {
      background: var(--orange);
      width: 24px;
      border-radius: 4px;
    }

    /* =====================================================
       CTA SECTION
       HOW IT WORKS: Two-column layout. Left has the headline,
       right has the action buttons + quick contact info.
       Dark steel blue background with an orange radial glow
       accent and subtle grid overlay for depth.
       ===================================================== */
    .cta {
      padding: 120px 0;
      background: var(--steel-blue);
      position: relative;
      overflow: hidden;
    }

    /* Background grid */
    .cta::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
      background-size: 52px 52px;
      pointer-events: none;
    }

    /* Radial orange glow accent */
    .cta-glow {
      position: absolute;
      top: -140px;
      right: -140px;
      width: 560px;
      height: 560px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(249,115,22,0.18) 0%, transparent 68%);
      pointer-events: none;
    }

    .cta-inner {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 64px;
      align-items: center;
    }

    .cta-title {
      font-family: var(--font-heading);
      font-weight: 900;
      font-size: clamp(2rem, 4.5vw, 3.4rem);
      color: #fff;
      line-height: 1.08;
      letter-spacing: -0.03em;
      margin-bottom: 18px;
    }

    .cta-title .accent { color: var(--orange); }

    .cta-subtitle {
      font-size: 1rem;
      color: rgba(255,255,255,0.6);
      line-height: 1.72;
      max-width: 460px;
    }

    .cta-right {
      display: flex;
      flex-direction: column;
      gap: 14px;
      min-width: 270px;
    }

    .cta-contact {
      margin-top: 10px;
      padding-top: 22px;
      border-top: 1px solid rgba(255,255,255,0.1);
    }

    .cta-contact-row {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 0.82rem;
      color: rgba(255,255,255,0.55);
      margin-bottom: 10px;
    }

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

    .cta-contact-icon { color: var(--orange); }

    /* =====================================================
       FOOTER
       HOW IT WORKS: Dark footer with a 4-column grid
       (brand, services, company, contact). Collapses to
       2-column on tablet and 1-column on mobile.
       ===================================================== */
    .footer {
      background: #07111e;
      padding: 72px 0 32px;
      color: rgba(255,255,255,0.55);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 52px;
      margin-bottom: 52px;
    }

    .footer-brand-logo {
      font-family: var(--font-heading);
      font-weight: 900;
      font-size: 1.5rem;
      color: #fff;
      letter-spacing: -0.03em;
      margin-bottom: 14px;
    }

    .footer-brand-logo span { color: var(--orange); }

    .footer-brand-desc {
      font-size: 0.84rem;
      line-height: 1.72;
      margin-bottom: 24px;
    }

    .footer-socials {
      display: flex;
      gap: 10px;
    }

    .footer-social {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.18);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.82rem;
      color: rgba(255,255,255,0.5);
      transition: var(--ease);
    }

    .footer-social:hover {
      border-color: var(--orange);
      color: var(--orange);
    }

    .footer-col-title {
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: 0.72rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: #fff;
      margin-bottom: 20px;
    }

    .footer-links {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .footer-links a {
      font-size: 0.84rem;
      color: rgba(255,255,255,0.5);
      transition: var(--ease);
    }

    .footer-links a:hover { color: var(--orange); }

    .footer-bottom {
      padding-top: 28px;
      border-top: 1px solid rgba(255,255,255,0.07);
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 0.76rem;
      color: rgba(255,255,255,0.35);
    }

    .footer-bottom-links {
      display: flex;
      gap: 22px;
    }

    .footer-bottom-links a {
      color: rgba(255,255,255,0.35);
      transition: var(--ease);
    }

    .footer-bottom-links a:hover { color: rgba(255,255,255,0.7); }

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

    /* Tablet */
    @media (max-width: 1024px) {
      .projects-grid { grid-template-columns: repeat(2, 1fr); }
      .footer-grid   { grid-template-columns: 1fr 1fr; gap: 36px; }
      /* Services: 3 cards per row on tablet */
      .services-grid { grid-template-columns: repeat(3, 1fr); }
      .service-card { border-right: 1px solid var(--concrete); }
      .service-card:nth-child(3n) { border-right: none; }
      .service-card:last-child { border-right: none; }
    }

    /* Mobile */
    @media (max-width: 768px) {
      /* Nav: hide links, show hamburger */
      .nav-links {
        display: none;
        position: fixed;
        inset: 0;
        background: var(--steel-blue-dark);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 28px;
        z-index: 905;
      }

      .nav-links.is-open { display: flex; }

      .nav-links a { font-size: 1.1rem; }

      .nav-hamburger { display: flex; }

      /* Hero */
      .hero-stats {
        flex-direction: column;
        gap: 20px;
      }

      .hero-stat {
        border-right: none;
        padding-right: 0;
        margin-right: 0;
        padding-bottom: 20px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
      }

      .hero-stat:last-child { border-bottom: none; padding-bottom: 0; }

      .hero-scroll { display: none; }

      /* About */
      .about-grid {
        grid-template-columns: 1fr;
        gap: 60px;
      }

      .about-images { order: -1; }

      .about-features { grid-template-columns: 1fr; }

      /* Projects */
      .projects-grid  { grid-template-columns: 1fr; }
      .projects-header { flex-direction: column; align-items: flex-start; gap: 20px; }

      /* Services — collapse to 2-column on mobile */
      .services-grid { grid-template-columns: repeat(2, 1fr); }
      .service-card { border-right: 1px solid var(--concrete); }
      .service-card:nth-child(even) { border-right: none; }
      .service-card:last-child { border-right: none; }

      /* Testimonials */
      .tcard { min-width: 100%; }

      /* CTA */
      .cta-inner {
        grid-template-columns: 1fr;
        gap: 40px;
      }

      .cta-right { min-width: unset; }

      /* Footer */
      .footer-grid { grid-template-columns: 1fr; gap: 28px; }

      .footer-bottom {
        flex-direction: column;
        gap: 14px;
        text-align: center;
      }

      .footer-bottom-links { flex-wrap: wrap; justify-content: center; }
    }

    @media (max-width: 520px) {
      .hero-actions  { flex-direction: column; }
      .hero-title    { font-size: 2.4rem; }
      .modal-body    { padding: 24px 20px; }
      .modal-specs   { grid-template-columns: 1fr; }
    }