/* ===== AI page additions — layered on the shared portfolio styles ===== */

/* Longer statement: scale the headline so it holds the same footprint as the Mobile hero */
.hero__headline--ai {
  font-size: clamp(30px, 2.65vw, 40px);
  letter-spacing: -0.9px;
  line-height: 1.12;
  max-width: 560px;
}

/* 3D stage: canvas fills the same square stage the Mobile video uses */
.hero__stage--ai { background: transparent; overflow: visible; }
.ai-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero__stage--ai .hero__stage-label { left: 50%; transform: translateX(-50%); top: .25rem; bottom: auto; white-space: nowrap; }
.hero__stage--ai .hero__stage-label b { font-weight: 700; color: #0066ff; }

/* Rail items are buttons that select a model in the 3D scene */
.apps-rail__list button.rail-item { appearance: none; -webkit-appearance: none; }
.apps-rail__list .rail-item[data-model].is-active {
  background: linear-gradient(135deg, #1c5cff 0%, #0066ff 55%, #5b8cff 100%);
  box-shadow: 0 8px 18px rgba(28,92,255,.28);
}

/* Five-item nav: keep one line at tablet widths */
@media (max-width: 1280px) { .nav { gap: 1.05rem; font-size: 16px; } }
@media (max-width: 1060px) { .nav { gap: .8rem; font-size: 14px; } }

.services--alt { background: linear-gradient(180deg, #f4f6fb 0%, #eef1f7 100%); }

@media (max-width: 980px) {
  .hero__headline--ai { font-size: clamp(30px, 6vw, 40px); max-width: 640px; }
}
@media (max-width: 480px) {
  .hero__headline--ai { font-size: 28px; letter-spacing: -.6px; }
  .hero__stage--ai .hero__stage-label { font-size: 10px; letter-spacing: .1em; }
}

/* Keep the caption inside the stage column on tablet widths */
@media (max-width: 1280px) and (min-width: 981px) {
  .hero--ai .hero__stage-caption { font-size: 12px !important; white-space: nowrap; }
}

/* Mobile menu: clear, high-contrast close (X) button in the upper right */
body.menu-open .hamburger {
  position: relative; z-index: 60;
  width: 44px; height: 44px;
  background: #0d0b26; border-color: #0d0b26; color: #fff;
  box-shadow: 0 6px 16px rgba(13,11,38,.22);
}
body.menu-open .hamburger span { width: 20px; height: 2.5px; }
body.menu-open .hamburger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
body.menu-open .hamburger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.hamburger:focus-visible { outline: 2px solid #1c5cff; outline-offset: 3px; }