/* ═══════════════════════════════════════════════
   RESPONSIVE — AIGENSYS
   Tablet ≤ 1024px | Mobile ≤ 768px | Small ≤ 480px
   ═══════════════════════════════════════════════ */


/* ── TOUCH DEVICES: hide custom cursor ── */
@media (pointer: coarse) {
  #cur-dot, #cur-ring { display: none !important; }
  body, * { cursor: auto !important; }
}


/* ═══════════════════════════════════════════════
   HAMBURGER BUTTON (always in DOM, shown mobile)
   ═══════════════════════════════════════════════ */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 16px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 1200;
  position: relative;
}

.nav-hamburger span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: #ffffff;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}

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


/* ═══════════════════════════════════════════════
   MOBILE MENU OVERLAY
   ═══════════════════════════════════════════════ */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: #0a0a0a;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.mobile-menu.open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.mm-link {
  font-family: 'Barlow', sans-serif;
  font-size: 36px;
  font-weight: 900;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color 0.2s;
}

.mm-link:hover, .mm-link:active { color: #fff; }

.mm-cta {
  font-family: 'Courier Prime', monospace;
  font-size: 13px;
  font-weight: 400;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.35);
  padding: 14px 32px;
  border-radius: 4px;
  margin-top: 8px;
  transition: border-color 0.2s;
}

.mm-cta:hover, .mm-cta:active { border-color: #fff; }


/* ═══════════════════════════════════════════════
   TABLET — ≤ 1024px
   ═══════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* Nav */
  #nav { padding: 20px 32px; }
  .nav-links { gap: 20px; }
  .pill-links { gap: 20px; }

  /* Hero */
  .hero-left  { left: 32px; }
  .hero-right { right: 32px; }
  .hero-bottom { padding: 0 32px; }

  /* Shrink */
  #shrink-section { padding: 80px 32px 100px; }

  /* About */
  .about-right { padding: 0 32px; }

  /* Split blocks */
  .sp1-left, .sp3-left { padding: 100px 32px 60px; }
  .sp2-right { padding: 100px 32px 60px; }
  .sp1-cards, .sp2-cards, .sp3-cards { padding-top: 400px; padding-left: 24px; padding-right: 24px; }

  /* Why */
  .why-title-col { padding: 80px 32px; }
  .why-item-strip { padding: 40px 32px 16px; }
  .why-item-content { padding: 20px 32px 60px 140px; }

  /* Stats */
  #stats { padding: 60px 32px; }

  /* Process */
  #process { padding: 100px 32px; }

  /* Testimonials */
  #testimonials { padding: 80px 32px; }

  /* CTA */
  .cta-card { padding: 28px 32px 24px; }

  /* Values cards */
  .vc-card { width: min(540px, 90vw); }
}


/* ═══════════════════════════════════════════════
   MOBILE — ≤ 768px
   ═══════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── NAV ── */
  #nav {
    padding: 18px 20px;
  }

  .nav-links    { display: none; }
  .nav-right    { display: none; }
  .nav-hamburger { display: flex; }

  /* Hide pill nav on mobile */
  #nav-pill { display: none !important; }

  .pill-links { display: none; }

  /* Mobile menu shown as flex when .open */
  .mobile-menu { display: flex; }


  /* ── HERO ── */
  #hero { overflow: hidden; }

  /* Upper-left block stays pinned top-left */
  .hero-left {
    left: 20px;
    right: auto;
    top: 18%;
    transform: none;
  }

  /* Lower-right block stays pinned lower-right */
  .hero-right {
    right: 20px;
    left: auto;
    top: 50%;
    bottom: auto;
    transform: none;
    text-align: right;
    align-items: flex-end;
  }

  .hero-sub {
    font-size: 9px;
    max-width: 180px;
    margin-top: 10px;
    text-align: right;
  }

  /* Scale headline words down for narrow viewports */
  .hw { font-size: clamp(34px, 9vw, 54px); }

  /* Bottom bar — show all elements */
  .hero-bottom-line { left: 20px; right: 20px; bottom: 86px; }

  .hero-bottom-text {
    display: block;
    left: 20px;
    right: 72px; /* don't overlap cube */
    bottom: 20px;
    text-align: left;
    font-size: 9px;
    letter-spacing: 0.1em;
    line-height: 1.7;
  }

  .hero-cta-bl {
    left: auto;
    right: 20px;
    bottom: 100px;
  }

  .hero-cube { width: 44px; height: 44px; right: 20px; bottom: 20px; }
  .hero-center-text { display: none; }


  /* ── ABOUT ── */
  #about { height: auto !important; }

  .about-sticky {
    position: sticky !important;
    top: 0 !important;
    transform: none !important;
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 24px !important;
    overflow: hidden !important;
  }

  .about-left {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 0 !important;
    margin-bottom: 40px !important;
    text-align: center !important;
  }

  .about-story-label { margin: 0 0 4px 0 !important; }
  .about-word        { font-size: clamp(38px, 10vw, 54px) !important; }

  .about-right {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    padding: 0 !important;
    display: block !important;
  }

  .about-right-inner { max-width: 100%; }
  .ab-s { font-size: clamp(13px, 3.8vw, 17px) !important; }


  /* ── SHRINK SECTION ── */
  #shrink-section { padding: 60px 20px 80px; }
  #shrink-media-wrap { height: 260px; }
  #shrink-title { margin-bottom: 32px; }
  .shrink-below { grid-template-columns: 1fr; gap: 40px; margin-top: 40px; }


  /* ── SERVICES LIST ── */
  #services-list { padding: 0 20px; }

  .sl-headline { font-size: clamp(26px, 8vw, 44px); }
  .sl-sub { margin-bottom: 340px; font-size: 14px; }

  /* Accordion: collapsed by default, expanded when .is-open */
  .fi-sub--rich {
    max-height: 0 !important;
    opacity: 0 !important;
    padding: 0 !important;
    transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.25s ease !important;
  }

  .focus-item.is-open .fi-sub--rich {
    max-height: 220px !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    padding: 8px 0 14px !important;
  }

  /* Mid-tone: readable on cream and dark backgrounds */
  .fi-btn.dark { color: #888888 !important; }
  .fi-btn.dark .br-corner { border-color: #888888 !important; }

  .fi-frame span[data-i] { font-size: clamp(20px, 6vw, 36px); }

  .fi-sub-btns {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .fi-btn { padding: 12px 24px; font-size: 11px; }

  .fi-corner { display: none; }


  /* ── PILLARS ── */
  #pillars {
    flex-direction: column;
    height: auto;
    min-height: 0;
  }

  .pillar { flex: none; width: 100%; min-height: 260px; }
  .pillar-canvas { height: 40%; }


  /* ── STATS ── */
  #stats { padding: 60px 20px; }
  .stats-grid { grid-template-columns: 1fr 1fr 1fr; }
  .stat-item { padding: 24px 8px; }
  .stat-num { font-size: clamp(32px, 8vw, 52px); }


  /* ── PROBLEM → SOLUTION ── */
  #problem-solution { padding: 60px 20px; }

  .ps-item .ps-frame .ps-problem {
    font-size: clamp(18px, 5vw, 32px);
  }

  .ps-sub {
    max-height: 0 !important;
    opacity: 0 !important;
    padding: 0 !important;
    transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.25s ease !important;
  }

  .ps-item.is-open .ps-sub {
    max-height: 200px !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    padding: 8px 0 4px !important;
  }

  .ps-item.is-open .ps-frame .ps-problem { color: #D8D4CC !important; }

  .ps-solution { font-size: 14px; }


  /* ── SPLIT SERVICE BLOCKS (sp1 / sp2 / sp3) ── */
  .split-block-1,
  .split-block-2,
  .split-block-3 {
    grid-template-columns: 1fr;
  }

  /* Unstick sticky panels — JS guard handles the rest */
  .sp1-left,
  .sp2-right,
  .sp3-left {
    position: static !important;
    height: auto;
    padding: 60px 20px 32px;
  }

  /* Block 2: title comes after cards in HTML, move it above on mobile */
  .sp2-right { order: -1; }

  .sp1-left-headline,
  .sp2-right .sp1-left-headline {
    font-size: clamp(36px, 10vw, 56px);
  }

  .sp1-cards,
  .sp2-cards,
  .sp3-cards {
    padding: 0 20px 40px;
  }

  .sp1-card { min-height: auto; }
  .sp1-card-headline { font-size: 22px; }


  /* ── VALUES SCROLL (static on mobile — JS guard) ── */
  #values-scroll {
    height: auto !important;
  }

  .vs-sticky {
    position: static !important;
    height: auto;
    padding: 60px 20px;
  }

  #vs-rect {
    position: static !important;
    transform: none !important;
    top: auto;
    left: auto;
    width: 100% !important;
    height: 220px !important;
    border-radius: 12px !important;
    margin: 0 auto 32px;
  }

  #vs-text { display: none; }

  .vc-card {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    width: 100%;
    margin: 0 0 20px;
    border-radius: 12px;
  }

  .vc-card-inner { grid-template-columns: 1fr; }
  .vc-card-right { min-height: 120px; }


  /* ── WHY SECTION (JS guard disables sticky stacking) ── */
  #why { padding: 0 0 60px; }

  .why-layout { grid-template-columns: 1fr; }

  .why-title-col {
    height: auto;
    padding: 60px 20px 32px;
  }

  .why-section-heading { font-size: clamp(28px, 8vw, 44px); }

  .why-items-col { padding-top: 0; }
  .why-item-strip { padding: 32px 20px 12px; }
  .why-item-content { padding: 16px 20px 48px 20px; }
  .why-item-headline { font-size: clamp(22px, 6vw, 36px); }
  .why-item-body { font-size: 14px; }


  /* ── PROCESS ── */
  #process { padding: 60px 20px; }
  .process-label { margin-bottom: 48px; }
  .process-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .process-step { padding-right: 0; }
  .process-num { font-size: 56px; margin-bottom: 12px; }
  .process-step-title { font-size: 15px; }
  .process-bottom-cta { margin-top: 40px; }


  /* ── TESTIMONIALS ── */
  #testimonials { padding: 60px 20px; }
  .test-grid { grid-template-columns: 1fr; }
  .test-intro-quote { font-size: 16px; padding: 0; }


  /* ── CTA SECTION ── */
  #cta {
    flex-direction: column;
    padding-top: 0;
    min-height: auto;
    align-items: stretch;
  }

  .cta-left-panel {
    width: 100%;
    height: 280px;
    flex: none;
  }

  .cta-card {
    width: 100%;
    height: auto;
    min-height: 0;
    border-radius: 24px 24px 0 0;
    padding: 28px 20px 24px;
  }

  .cta-top { flex-direction: column-reverse; gap: 16px; }
  .cta-top-right { margin: 0; }
  .cta-logomark { width: 80px; height: 80px; }
  .cta-top-left { padding-right: 0; }

  .cta-form-row { flex-direction: column; gap: 16px; }

  .cta-nav a { font-size: 20px; }
  .cta-city  { font-size: 16px; }

  .cta-bottom {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
  }

  .cta-bottom-left { flex: 1; }

  .cta-bottom-right {
    flex: 1;
    align-items: flex-end;
    text-align: right;
  }

  .cta-legal-links {
    align-items: flex-end;
  }


  /* ── SPLIT SERVICES (split-block, general) ── */
  .split-block,
  .split-block.reversed {
    grid-template-columns: 1fr;
  }

  .split-text { padding: 48px 20px; }
  .split-media { min-height: 280px; }
  .split-media-text { padding: 28px 20px; }


  /* ── ETHOS ── */
  .ethos-content {
    grid-template-columns: 1fr;
    padding: 60px 20px;
    gap: 32px;
    align-content: center;
  }

  .ethos-value-cards { grid-template-columns: 1fr 1fr; gap: 12px; }

  /* ── FOOTER ── */
  #footer {
    flex-direction: column;
    gap: 16px;
    text-align: center;
    padding: 24px 20px;
  }

  .footer-center { order: 2; }
  .footer-logo   { order: 1; }
  .footer-links  { order: 3; flex-wrap: wrap; justify-content: center; gap: 16px; }

  /* ── SITE FOOTER ── */
  #site-footer { height: 180px; }

  /* ── BRAND FOOTER ── */
  .brand-footer { height: 180px; }
}


/* ═══════════════════════════════════════════════
   SMALL PHONES — ≤ 480px
   ═══════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* Hero */
  .hero-left  { top: 16%; }
  .hero-right { top: 52%; }
  .hw { font-size: clamp(28px, 8.5vw, 44px); }
  .hero-bottom-text { font-size: 8px; right: 60px; }

  /* Services list */
  .sl-headline { font-size: clamp(22px, 7.5vw, 36px); }
  .fi-frame span[data-i] { font-size: clamp(18px, 7vw, 30px); }

  /* Stats */
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-item:last-child { grid-column: span 2; border-right: none; }

  /* Process */
  .process-grid { grid-template-columns: 1fr; }

  /* Ethos value cards */
  .ethos-value-cards { grid-template-columns: 1fr; }

  /* Why */
  .mm-link { font-size: 28px; }

  /* CTA */
  .cta-nav a { font-size: 16px; }
  .cta-footer-row { flex-direction: column; gap: 6px; align-items: flex-start; }

  /* Pill nav */
  #nav-pill { top: 12px; padding: 8px 14px; }
}