/* ══════════════════════════════════════════════════════════════
   AKESO — Responsive System
   Breakpoints: 640, 768, 1024, 1280, 1440+
   Strategy: Desktop preserved, tablet+mobile adapted
   ══════════════════════════════════════════════════════════════ */

/* ── GLOBAL OVERFLOW GUARD ───────────────────────────────────── */
html, body { overflow-x: hidden; max-width: 100%; }
* { box-sizing: border-box; min-width: 0; }
img { max-width: 100%; height: auto; }

/* ── HAMBURGER MENU BUTTON ───────────────────────────────────── */
.nav-hamburger {
  display: none;
  margin: 0;
  padding: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: background 200ms;
  z-index: 200;
  flex-shrink: 0;
}
.nav-hamburger:hover { background: rgba(255,255,255,0.06); }
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: white;
  border-radius: 2px;
  transition: transform 300ms ease, opacity 200ms ease, width 200ms ease;
  transform-origin: center;
}
.nav.solid .nav-hamburger span { background: var(--ink); }
.nav-hamburger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; width: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ── MOBILE NAV OVERLAY ──────────────────────────────────────── */
.nav-mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(0,0,0,0.94);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  display: flex;
  flex-direction: column;
  padding: 100px var(--pad-x) clamp(40px,8vw,64px);
  transform: translateX(100%);
  transition: transform 350ms cubic-bezier(0.22,1,0.36,1);
  overflow-y: auto;
}
.nav-mobile-overlay.open { transform: translateX(0); }

.nav-mobile-links {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
}
.nav-mobile-links a {
  font-size: clamp(28px, 6vw, 44px);
  font-weight: 400;
  letter-spacing: -0.025em;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: color 200ms, padding-left 200ms;
}
.nav-mobile-links a:first-child { border-top: 1px solid rgba(255,255,255,0.08); }
.nav-mobile-links a:hover,
.nav-mobile-links a.active { color: white; padding-left: 8px; }
.nav-mobile-links a.active { color: var(--accent); }
.nav-mobile-links a .arrow {
  font-size: 18px;
  color: rgba(255,255,255,0.25);
  transition: transform 200ms, color 200ms;
}
.nav-mobile-links a:hover .arrow { transform: translateX(4px); color: var(--accent); }

.nav-mobile-bottom {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 32px;
}
.nav-mobile-bottom .btn { justify-content: center; height: 52px; font-size: 15px; }
.nav-mobile-bottom .lang-toggle {
  align-self: flex-start;
  height: 36px;
  border-color: rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.6);
}
.nav-mobile-bottom .lang-toggle .seg.on { color: white; }

/* ── NAV RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  /* Keep CTA visible on tablet */
  .nav-right { gap: 10px; }
}
@media (max-width: 640px) {
  /* Hide CTA text on small phones, show hamburger only */
  .nav-cta .btn-text { display: none; }
  /* Actually hide the entire CTA on very small screens */
  .nav-cta { display: none; }
  .nav { padding: 14px var(--pad-x); }
}

/* ── HERO RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-dark { min-height: 90vh; align-items: center; }
  .hero-content { max-width: 100%; padding: clamp(80px,12vw,120px) var(--pad-x) clamp(40px,6vw,64px); }
  #hero-reticle { width: clamp(160px,35vw,280px); height: clamp(160px,35vw,280px); right: 5%; opacity: 0.4; }
  .hero-dark h1 { font-size: clamp(36px,6vw,60px); }
  .hero-corner-tl { top: 72px; }
}
@media (max-width: 768px) {
  .hero-dark { min-height: 85vh; }
  .hero-content { padding: clamp(80px,16vw,110px) var(--pad-x) clamp(32px,5vw,48px); gap: 20px; }
  .hero-dark h1 { font-size: clamp(32px,7.5vw,52px); line-height: 1.05; }
  .hero-dark .hero-support { font-size: 15px; max-width: 100%; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-dark .hero-bottom { grid-template-columns: 1fr 1fr; gap: 12px; }
  #hero-reticle { right: -10%; opacity: 0.22; width: 200px; height: 200px; }
  .hero-corner-br { display: none; }
}
@media (max-width: 480px) {
  .hero-dark { min-height: 100svh; }
  .hero-dark h1 { font-size: clamp(28px,9vw,44px); }
  .hero-dark .hero-bottom { grid-template-columns: 1fr; }
  #hero-reticle { display: none; }
  .hero-bg-img { opacity: 0.28; }
}

/* ── SECTION HEADERS ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .section-head { grid-template-columns: 1fr; gap: 18px; }
  .h2 { font-size: clamp(24px,4vw,42px); }
}
@media (max-width: 640px) {
  .section-head { padding-bottom: clamp(28px,5vw,48px); }
  .h2 { font-size: clamp(22px,5.5vw,36px); }
}

/* ── PLATFORM CARDS ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .cards-3 { grid-template-columns: 1fr 1fr; }
  .cards-3 > *:last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .cards-3 { grid-template-columns: 1fr; }
  .cards-3 > *:last-child { grid-column: auto; }
  .card { padding: clamp(20px,4vw,28px); }
  .card-glyph { aspect-ratio: 3/2; }
  .card-body p { font-size: 14px; }
  .card-list li { font-size: 12px; }
}

/* ── IMAGE STRIP ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .img-strip { grid-template-columns: 1fr 1fr !important; height: clamp(140px,28vw,220px); }
  .img-strip-item:last-child { display: none; }
}
@media (max-width: 480px) {
  .img-strip { grid-template-columns: 1fr !important; height: clamp(180px,50vw,260px); }
  .img-strip-item:not(:first-child) { display: none; }
}

/* ── PARALLAX / PHILOSOPHY SECTION ──────────────────────────── */
@media (max-width: 1024px) {
  .parallax-content { grid-template-columns: 1fr; gap: clamp(32px,5vw,56px); }
  .parallax-section { padding: clamp(64px,9vw,100px) var(--pad-x); }
}
@media (max-width: 640px) {
  .parallax-section { padding: clamp(48px,8vw,72px) var(--pad-x); }
  .parallax-section h2 { font-size: clamp(24px,7vw,40px); }
  .parallax-bg { opacity: 0.15; }
  .process-step { grid-template-columns: 24px 1fr auto; gap: 10px; }
}

/* ── RESEARCH GRID ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .research-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .research-grid { grid-template-columns: 1fr; }
  .research-cell { min-height: auto; padding: clamp(18px,4vw,26px); }
}

/* ── MANUFACTURING SECTION ───────────────────────────────────── */
@media (max-width: 768px) {
  .mfg-image { aspect-ratio: 16/7 !important; }
  /* 2-up image grid below main image */
  .mfg-2up { grid-template-columns: 1fr !important; height: auto !important; }
  .mfg-2up > div:last-child { display: none; }
}
@media (max-width: 640px) {
  .metrics { grid-template-columns: 1fr 1fr; }
  .metric .v { font-size: clamp(28px,7vw,44px); }
}
@media (max-width: 380px) {
  .metrics { grid-template-columns: 1fr; }
}

/* ── FUTURE SECTION ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .future .grid { grid-template-columns: 1fr; gap: clamp(28px,4vw,48px); }
  .future h2 { font-size: clamp(28px,5.5vw,52px); }
  .future-parallax-bg { width: 60%; opacity: 0.07; }
}
@media (max-width: 640px) {
  .future { padding: clamp(60px,10vw,96px) var(--pad-x); }
  .future h2 { font-size: clamp(26px,7vw,44px); }
  .future .head { flex-direction: column; gap: 8px; margin-bottom: clamp(32px,6vw,56px); }
  .future .head .right { font-size: 9px; }
  .future-parallax-bg { display: none; }
  .future-list .item { grid-template-columns: 24px 1fr auto; gap: 10px; font-size: 10px; }
}

/* ── NTNB SECTION ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .ntnb-inner { grid-template-columns: 1fr; gap: clamp(36px,5vw,56px); }
  .ntnb-caps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .ntnb-section { padding: clamp(56px,9vw,80px) var(--pad-x); }
  .ntnb-section h2 { font-size: clamp(26px,7vw,42px); }
  .ntnb-caps { grid-template-columns: 1fr; }
  .ntnb-ctas { flex-direction: column; }
  .ntnb-ctas .btn,
  .ntnb-ctas .btn-wghost { justify-content: center; }
}

/* ── FINAL CTA ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .final-cta { padding: clamp(72px,11vw,110px) var(--pad-x); }
  .final-cta h2 { font-size: clamp(28px,7vw,52px); }
  .final-cta .actions { flex-direction: column; width: 100%; }
  .final-cta .actions .btn { width: 100%; justify-content: center; }
}

/* ── FOOTER ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .foot-top { grid-template-columns: 1fr 1fr; gap: clamp(32px,4vw,48px); }
  .foot-mark { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .foot-top { grid-template-columns: 1fr; }
  .foot-mark { grid-column: auto; }
  .foot-bottom { flex-direction: column; gap: 12px; align-items: flex-start; }
  .foot-bottom .right { flex-direction: column; gap: 8px; }
  .foot-legal { max-width: 100%; }
  .foot-legal span { font-size: 9px; }
}

/* ── INNER PAGE HERO (technology, research etc) ──────────────── */
@media (max-width: 768px) {
  .page-hero { padding-top: clamp(80px,12vw,100px); padding-bottom: clamp(36px,6vw,56px); }
  .page-hero h1 { font-size: clamp(28px,7.5vw,54px); }
  .page-hero p { font-size: 15px; }
}

/* ── PLATFORM BLOCKS (technology page) ──────────────────────── */
@media (max-width: 1024px) {
  .platform-block { grid-template-columns: 1fr; gap: clamp(24px,3vw,40px); }
  .platform-block.reverse { direction: ltr; }
  .platform-h { font-size: clamp(22px,4vw,36px); }
}

/* ── DISCIPLINE MODULES (research page) ─────────────────────── */
@media (max-width: 1024px) {
  .discipline { grid-template-columns: 1fr; gap: clamp(20px,3vw,36px); }
  .disc-meta { position: static; }
  .disc-areas { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .disc-areas { grid-template-columns: 1fr; }
}

/* ── ABOUT PAGE ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .origin { grid-template-columns: 1fr; }
  .leadership-grid { grid-template-columns: 1fr; }
  .team-block { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .leader-card { grid-template-columns: 110px 1fr; gap: 14px; }
  .pillars { grid-template-columns: 1fr; }
  .values-list .value-row { grid-template-columns: 24px 1fr; }
  .values-list .value-row .v-desc { display: none; }
}

/* ── CONTACT PAGE ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .contact-layout { grid-template-columns: 1fr; gap: clamp(36px,5vw,56px); }
  .contact-details { position: static; }
  .partnership-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .partnership-grid { grid-template-columns: 1fr; }
}

/* ── METARX PAGE ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .mrx-hero-content { grid-template-columns: 1fr; }
  .mrx-hero-right { display: none; }
  .mrx-tech-grid { grid-template-columns: 1fr 1fr; }
  .mrx-module { grid-template-columns: 1fr; }
  .mrx-module.reverse { direction: ltr; }
  .mrx-collab-grid { grid-template-columns: 1fr 1fr; }
  .mrx-collab-ctas { grid-template-columns: 1fr; }
  .section-head-dark { grid-template-columns: 1fr; gap: 18px; }
  .mrx-phil-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .mrx-hero h1 { font-size: clamp(28px,8vw,48px); }
  .mrx-hero .mrx-hero-support { font-size: 14px; }
  .mrx-hero-actions { flex-direction: column; }
  .mrx-hero-actions .btn,
  .mrx-hero-actions .btn-hero-ghost { justify-content: center; }
  .mrx-tech-grid { grid-template-columns: 1fr; }
  .mrx-collab-grid { grid-template-columns: 1fr; }
  .mrx-module-lists { grid-template-columns: 1fr; }
  .mrx-module-cta { flex-direction: column; }
  .mrx-module-cta .btn { justify-content: center; }
  .mrx-final-cta .actions { flex-direction: column; width: 100%; }
  .mrx-final-cta .actions .btn,
  .mrx-final-cta .actions .btn-hero-ghost { justify-content: center; }
}

/* ── GENERAL SHELL PADDING ───────────────────────────────────── */
@media (max-width: 640px) {
  :root {
    --pad-x: clamp(18px, 5vw, 28px);
    --pad-y: clamp(40px, 8vw, 64px);
  }
}

/* ── SECTION PADDING ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .section { padding-top: var(--pad-y); padding-bottom: var(--pad-y); }
}

/* ── BUTTONS — TOUCH TARGETS ─────────────────────────────────── */
@media (max-width: 768px) {
  .btn { height: 48px; min-width: 48px; }
  .btn-wghost { height: 48px; }
  .nav-cta { height: 36px; font-size: 12px; padding: 0 12px; }
}

/* ── REDUCED MOTION ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nav-mobile-overlay { transition: none; }
  .nav-hamburger span { transition: none; }
}

/* ── CURSOR: HIDE ON TOUCH ───────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  #cursor-dot, #cursor-ring { display: none !important; }
  *, a, button { cursor: auto !important; }
}

/* ── LANDSCAPE MOBILE ────────────────────────────────────────── */
@media (max-width: 768px) and (orientation: landscape) {
  .hero-dark { min-height: 100svh; }
  .hero-content { padding-top: 80px; padding-bottom: 24px; }
  .nav-mobile-overlay { padding-top: 80px; }
  .nav-mobile-links a { font-size: clamp(20px,4vw,32px); padding: 12px 0; }
}

/* ── SAFE AREA (notch/home bar) ──────────────────────────────── */
@supports (padding: max(0px)) {
  @media (max-width: 768px) {
  .nav {
    padding-left: max(var(--pad-x), env(safe-area-inset-left));
    padding-right: max(var(--pad-x), env(safe-area-inset-right));
  }
  }
  footer.foot {
    padding-bottom: max(32px, env(safe-area-inset-bottom));
  }
}

/* ── PREVENT PARALLAX ON MOBILE (performance) ───────────────── */
@media (max-width: 768px) {
  .parallax-bg,
  .future-parallax-bg,
  .ntnb-bg {
    position: absolute !important;
    transform: none !important;
    will-change: auto !important;
  }
}

/* ── SYS GRID RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 768px) {
  .sys-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .sys-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   INNER PAGE LAYOUT FIXES — high specificity overrides
   Targets inline <style> defined grids in technology, research,
   about, contact pages
   ══════════════════════════════════════════════════════════════ */

/* ── TECHNOLOGY PAGE ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Platform blocks: visual above, content below */
  .platform-block,
  .platform-block.reverse {
    grid-template-columns: 1fr !important;
    direction: ltr !important;
    gap: clamp(24px, 4vw, 40px) !important;
  }
  .platform-block.reverse > * { direction: ltr !important; }
  .platform-visual { aspect-ratio: 16/9 !important; }

  /* Philosophy dark section grid */
  .philosophy .grid {
    grid-template-columns: 1fr !important;
    gap: clamp(32px, 5vw, 48px) !important;
  }

  /* System overview: 3→2 cols */
  .sys-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 640px) {
  .sys-grid { grid-template-columns: 1fr !important; }
  .sys-cell { min-height: auto !important; }
  .platform-visual { aspect-ratio: 4/3 !important; }
  .spec-row { grid-template-columns: 1fr !important; gap: 4px !important; }
  .spec-row .k { padding-top: 0 !important; }
}

/* ── RESEARCH PAGE ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Discipline blocks: meta above, content below */
  .discipline {
    grid-template-columns: 1fr !important;
    gap: clamp(20px, 3vw, 36px) !important;
  }
  .disc-meta { position: static !important; }

  /* Discipline areas: 2→2 cols on tablet, 1 on mobile */
  .disc-areas { grid-template-columns: 1fr 1fr !important; }
  .disc-visual { aspect-ratio: 16/7 !important; }
}
@media (max-width: 640px) {
  .disc-areas { grid-template-columns: 1fr !important; }
}

/* ── ABOUT PAGE ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Origin: image above text */
  .origin {
    grid-template-columns: 1fr !important;
    gap: clamp(28px, 4vw, 48px) !important;
  }
  /* Leadership: single column */
  .leadership-grid {
    grid-template-columns: 1fr !important;
    gap: clamp(28px, 4vw, 44px) !important;
  }
  /* Team block: image above text */
  .team-block {
    grid-template-columns: 1fr !important;
    gap: clamp(24px, 3vw, 40px) !important;
  }
  /* Pillars: 2→2 cols on tablet */
  .pillars { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 640px) {
  .pillars { grid-template-columns: 1fr !important; }
  .leader-card {
    grid-template-columns: 100px 1fr !important;
    gap: 14px !important;
  }
  /* Values row: hide description on small screens */
  .value-row {
    grid-template-columns: 28px 1fr !important;
    gap: 12px !important;
  }
  .value-row .v-desc { display: none !important; }
}

/* ── CONTACT PAGE ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Contact layout: channels above, details below */
  .contact-layout {
    grid-template-columns: 1fr !important;
    gap: clamp(36px, 5vw, 56px) !important;
  }
  .contact-details { position: static !important; }

  /* Partnership grid: 3→2 */
  .partnership-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 640px) {
  .partnership-grid { grid-template-columns: 1fr !important; }
  .partnership-cell { min-height: auto !important; }
  /* Social links stacked */
  .social-links { gap: 12px !important; }
}

/* ── PAGE HERO INNER PAGES ────────────────────────────────────── */
@media (max-width: 768px) {
  /* Inline-styled page heroes have large font sizes — override */
  .page-hero h1 {
    font-size: clamp(28px, 7.5vw, 52px) !important;
    margin-bottom: 18px !important;
  }
  .page-hero p { font-size: 15px !important; }
  .page-hero { padding-top: clamp(80px, 12vw, 100px) !important; }
}