/* ==========================================================================
   Header & Dropdown Navigation
   ========================================================================== */

.pages-menu {
  position: relative;
}

.pages-menu summary {
  padding: 14px 20px;
  font-size: 14px;
  cursor: pointer;
}

.pages-menu summary::after {
  content: '⌄';
  margin-left: 8px;
}

.page-links {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  display: grid;
  min-width: 180px;
  padding: 8px;
  background-color: #090d0b;
  border: 1px solid var(--line, #222);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

.page-links a {
  padding: 10px 14px;
  border-radius: 8px;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.page-links a:hover {
  background-color: #153d2d;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */

.hero {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.15)), url('assets/hero-background.png') center / cover no-repeat;
}

.hero-inner { width: min(var(--shell), calc(100% - 48px)); min-height: 940px; margin: auto; }
.team-badge { position: absolute; top: 334px; left: 0; width: 330px; height: 112px; border-radius: 60px; overflow: hidden; z-index: 2; }
.team-badge img { position: absolute; top: -334px; left: -315px; width: 1919px; height: 1070px; max-width: none; object-fit: none; }
.hero h1 {
  position: absolute;
  top: 279px;
  left: 0;
  font-size: clamp(90px, 10.42vw, 200px);
  line-height: 0.94;
}
.hero h1 span:first-child { padding-left: 380px; }
.hero-copy { position: absolute; top: 524px; right: 0; width: 520px; margin: 0; }
.logo-mark { background: url('assets/hero-reference.png') -315px -40px / 1919px 1070px no-repeat; color: transparent; border-radius: 0; }
.footer-main .social-links a { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; }
.social-links a:first-child { background: var(--green); color: #fff; }
.newsletter-col input { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }

.section-header { margin-bottom: 56px; text-align: center; }
.section-header h2 { margin: 18px 0 0; font-size: clamp(2rem, 3.8vw, 3rem); line-height: 1.25; background: linear-gradient(90deg, #9ddfbd, #fff); background-clip: text; color: transparent; }
.service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.service-grid article { min-width: 0; }
.service-art { width: 100%; aspect-ratio: auto; }
.service-art.art-a, .service-art.art-b { background-size: 305% auto; }
.service-art.left { background-position-x: 24.4%; }
.service-art.right { background-position-x: 75.6%; }
.service-art.art-a { background-position-y: 96%; }
.service-art.art-b { background-position-y: 68.5%; }
.project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.project-grid article { min-width: 0; }
.project-image { width: 100%; height: auto; aspect-ratio: 6 / 5; background-size: 320% auto; }
.gallery { height: auto; aspect-ratio: 1919 / 945; }
.process-images img:nth-child(3) { left: auto; right: 16px; }

/* ==========================================================================
   Sprite / Composite Graphic Slices
   ========================================================================== */

.service-art {
  aspect-ratio: 16 / 9;
  background-repeat: no-repeat;
}

.art-a,
.art-b {
  background-size: 300% auto;
}

.art-a { background-position-y: bottom; }
.art-b { background-position-y: 70%; }

.art-left  { background-position-x: 25%; }
.art-right { background-position-x: 75%; }

.project-image {
  aspect-ratio: 4 / 3;
  background-size: 300% auto;
  background-position-y: 50%;
  background-repeat: no-repeat;
}

.p1 { background-position-x: 0%; }
.p2 { background-position-x: 50%; }
.p3 { background-position-x: 100%; }

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

@media (max-width: 1400px) {
  .team-badge { display: none; }
  .hero h1 { top: 245px; font-size: clamp(90px, 8vw, 112px); line-height: 1.05; }
  .hero h1 span:first-child { padding-left: 0; }
}

@media (max-width: 1000px) {
  .header-actions { display: none; }
  .service-grid, .project-grid { grid-template-columns: 1fr; }
  .hero, .hero-inner { min-height: 760px; }
  .hero h1 { top: 245px; font-size: 90px; }
  .hero h1 span:first-child { padding-left: 0; }
  .team-badge { display: none; }
  .hero-copy { top: 500px; left: 0; right: auto; width: min(500px, 100%); }
  nav.open .page-links {
    position: static;
    box-shadow: none;
  }
}

@media (max-width: 600px) {
  .hero, .hero-inner { min-height: 700px; }
  .hero h1 { top: 180px; font-size: 62px; line-height: 1.05; }
  .hero-copy { top: 360px; }
  .hero {
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.25)), url('assets/hero-background.png');
  }

  .tabs {
    flex-wrap: wrap;
  }
}