.proj-hero {
    padding: 160px 40px 80px; border-bottom: 1px solid var(--line);
  }
  .proj-hero-photo {
    background-image: url('../images/heroes/projects-hero.jpg');
    background-position: center 35%;
  }
  .proj-hero-inner {
    max-width: 1280px; margin: 0 auto;
    display: grid; grid-template-columns: 1.3fr 1fr; gap: 80px; align-items: end;
  }
  .proj-eyebrow {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--meta); margin-bottom: 24px;
    display: flex; align-items: center; gap: 12px;
  }
  .proj-eyebrow::before { content: ''; width: 40px; height: 1px; background: var(--accent); }
  .proj-hero h1 {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(56px, 8vw, 124px); line-height: 0.92; letter-spacing: -0.035em;
  }
  .proj-hero h1 em { font-style: italic; color: var(--accent); }
  .proj-hero-right p {
    font-family: var(--serif); font-size: clamp(18px, 1.6vw, 22px);
    line-height: 1.45; color: var(--fg); max-width: 480px;
  }
  .proj-stat {
    margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line-brand);
    display: flex; gap: 48px;
  }
  .proj-stat-num {
    font-family: var(--serif); font-size: 48px; line-height: 1; letter-spacing: -0.03em;
  }
  .proj-stat-num sup { font-size: 0.5em; color: var(--accent); vertical-align: super; }
  .proj-stat-label {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--meta); margin-top: 8px;
  }

  .projects-main { padding: 80px 0 120px; }
  .projects-header {
    display: grid; grid-template-columns: 1fr auto; align-items: end;
    margin-bottom: 48px; gap: 40px;
  }
  .projects-header p { color: var(--fg-muted); max-width: 560px; }
  .filter-tabs {
    display: flex; flex-wrap: wrap; gap: 4px;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  }
  .filter-tabs button {
    background: transparent; border: 1px solid var(--line-strong);
    padding: 10px 16px; cursor: pointer; color: var(--fg);
    font-family: inherit; font-size: inherit;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
  }
  .filter-tabs button:hover,
  .filter-tabs button.active {
    background: var(--ets-blue); border-color: var(--ets-blue); color: var(--bone);
  }
  .filter-tabs button:active { transform: scale(0.98); }
  .projects-grid.is-filtering { pointer-events: none; }

  .projects-grid {
    display: grid; grid-template-columns: repeat(6, 1fr);
    gap: 16px; grid-auto-rows: 160px;
    transition: height 0.45s cubic-bezier(0.2, 0.6, 0.2, 1);
  }
  .project {
    position: relative; overflow: hidden; cursor: pointer;
    background: var(--bg-elevated); border: 1px solid var(--line);
    transition:
      opacity 0.4s cubic-bezier(0.2, 0.6, 0.2, 1),
      transform 0.5s cubic-bezier(0.2, 0.6, 0.2, 1);
    will-change: transform, opacity;
  }
  .project.is-hidden { display: none; }
  .project.is-exiting {
    opacity: 0;
    transform: scale(0.96);
    pointer-events: none;
  }
  .project.is-entering {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
  .project.is-flip {
    transition: transform 0.5s cubic-bezier(0.2, 0.6, 0.2, 1);
  }
  @media (prefers-reduced-motion: reduce) {
    .project,
    .filter-tabs button,
    .projects-grid {
      transition: none !important;
    }
  }
  .project-bg {
    position: absolute; inset: 0;
    transition: transform 0.8s cubic-bezier(0.2,0.6,0.2,1);
  }
  .project:hover .project-bg { transform: scale(1.08); }
  .project-photo {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; display: block;
  }
  .project-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(5,6,8,0.92) 0%, rgba(5,6,8,0.5) 45%, rgba(5,6,8,0.15) 100%);
    padding: 20px; display: flex; flex-direction: column; justify-content: space-between;
    color: var(--bone);
  }
  .project-tag {
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
    align-self: flex-start; background: rgba(0,86,171,0.4); backdrop-filter: blur(6px);
    padding: 5px 10px; border: 1px solid rgba(74,143,209,0.4);
  }
  .project-name {
    font-family: var(--serif); font-size: 20px; font-weight: 400;
    line-height: 1.1; letter-spacing: -0.01em;
  }
  .project-meta {
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--meta); margin-top: 4px;
  }
  .p-hero { grid-column: span 4; grid-row: span 2; }
  .p-wide { grid-column: span 3; grid-row: span 2; }
  .p-tall { grid-column: span 2; grid-row: span 2; }
  .p-std { grid-column: span 2; grid-row: span 1; }

  .bg-bridge { background: linear-gradient(135deg, #0a2540 0%, #041326 100%); }
  .bg-tunnel { background: linear-gradient(135deg, #0a1a2e 0%, #03101c 100%); }
  .bg-water  { background: linear-gradient(160deg, #083346 0%, #041722 100%); }
  .bg-road   { background: linear-gradient(135deg, #0a2540 0%, #03121f 100%); }
  .bg-port   { background: linear-gradient(135deg, #062840 0%, #021320 100%); }
  .bg-campus { background: linear-gradient(135deg, #0a1f38 0%, #030f1c 100%); }
  .bg-warehouse { background: linear-gradient(135deg, #0d1f30 0%, #051018 100%); }
  .bg-military { background: linear-gradient(135deg, #0a1a28 0%, #030c14 100%); }
  .project-art { position: absolute; inset: 0; opacity: 0.35; }

  /* Modal */
  .modal {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    padding: 40px 20px; opacity: 0; visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
  }
  .modal.is-open { opacity: 1; visibility: visible; }
  .modal-backdrop {
    position: absolute; inset: 0; background: rgba(5,6,8,0.85);
    backdrop-filter: blur(8px);
  }
  .modal-panel {
    position: relative; z-index: 1; width: 100%; max-width: 640px;
    max-height: 85vh; overflow-y: auto;
    background: var(--bg-section); border: 1px solid var(--line-brand);
    padding: 40px;
  }
  .modal-close {
    position: absolute; top: 16px; right: 16px;
    width: 40px; height: 40px; border: 1px solid var(--line-strong);
    background: transparent; color: var(--fg); cursor: pointer;
    font-size: 20px; line-height: 1;
  }
  .modal-close:hover { border-color: var(--accent); color: var(--accent); }
  .modal-tag {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--meta); margin-bottom: 16px;
  }
  .modal-title {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(28px, 4vw, 40px); line-height: 1.05;
    letter-spacing: -0.02em; margin-bottom: 12px;
  }
  .modal-meta {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--accent); margin-bottom: 24px;
  }
  .modal-photo {
    width: 100%; aspect-ratio: 16 / 9;
    object-fit: cover; display: block;
    margin-bottom: 24px;
    border: 1px solid var(--line-mid);
  }
  .modal-desc {
    font-size: 15px; line-height: 1.65; color: var(--fg-muted); margin-bottom: 28px;
  }
  .modal-services-label {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--meta); margin-bottom: 14px;
  }
  .modal-services {
    list-style: none; border-top: 1px solid var(--line-mid);
  }
  .modal-services li {
    padding: 12px 0; border-bottom: 1px dashed var(--line);
    font-size: 14px; color: var(--fg-muted);
    display: flex; gap: 10px;
  }
  .modal-services li::before { content: '→'; color: var(--accent); font-family: var(--mono); }

  footer {
    background: var(--black); color: var(--bone);
    padding: 60px 40px 30px; border-top: 1px solid var(--line);
  }
  .footer-grid {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 60px;
    padding-bottom: 40px; border-bottom: 1px solid var(--line);
    max-width: 1280px; margin: 0 auto;
  }
  .footer-brand .logo { margin-bottom: 20px; color: var(--bone); }
  .footer-brand p { font-size: 13px; color: var(--bone-soft); line-height: 1.65; max-width: 360px; }
  .footer-col h4 {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--meta); margin-bottom: 20px;
  }
  .footer-col ul { list-style: none; }
  .footer-col a { font-size: 13px; color: var(--bone); text-decoration: none; }
  .footer-col a:hover { color: var(--accent); }
  .footer-bottom {
    padding-top: 30px; display: flex; justify-content: space-between;
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--concrete);
    max-width: 1280px; margin: 0 auto;
  }

  @media (max-width: 1100px) {
    .proj-hero-inner { grid-template-columns: 1fr; gap: 40px; }
    .projects-grid { grid-template-columns: repeat(4, 1fr); }
    .p-hero, .p-wide { grid-column: span 4; grid-row: span 2; }
    .p-tall, .p-std { grid-column: span 2; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 640px) {
    .nav { padding: 16px 20px; }
    .nav-links { display: none; }
    .proj-hero { padding: 120px 20px 60px; }
    .container { padding: 0 20px; }
    .projects-main { padding: 60px 0 80px; }
    .projects-header { grid-template-columns: 1fr; }
    .projects-grid { grid-template-columns: 1fr; }
    .p-hero, .p-wide, .p-tall, .p-std { grid-column: span 1; grid-row: span 1; min-height: 220px; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; gap: 10px; }
    .modal-panel { padding: 32px 24px; }
  }