/* Kortiva – responsive layer.
   The desktop layout is designed at 1440px. Between 1024px and 1440px the page is scaled to fit
   (see js/site.js). Below 1024px the rules here reflow every section into a single column. */

.menu-toggle { display: none; }

@media (max-width: 1439px) {
  html, body { min-width: 0 !important; }
}

@media (max-width: 1023px) {
  html, body { min-width: 0 !important; }
  #page-root { width: 100% !important; zoom: 1 !important; animation: none !important; overflow-x: hidden; }
  #page-root section { height: auto !important; min-height: 0 !important; }
  #page-root h2 { font-size: 30px !important; line-height: 1.1 !important; }
  #page-root h3 { font-size: 19px !important; }
  #page-root p { max-width: none !important; }
  #page-root svg[viewBox] { max-width: 100%; height: auto; }

  /* ---- header: logo, language, menu button; links open below */
  #site-header { height: auto !important; padding: 12px 20px !important; flex-wrap: wrap !important; gap: 12px !important;
    background: #F5F7F5 !important; border-bottom-color: #CFDAD3 !important; color: #0E2A21 !important; animation: none !important; }
  #site-header a.mark { animation: none !important; transform: none !important; color: #0E2A21 !important; }
  #site-header a.mark > span, #site-header a.mark svg { animation: none !important; transform: none !important; }
  #site-header a.mark svg.mark-full { opacity: 0 !important; }
  #site-header .v-hole { animation: none !important; }
  #site-header .v-stroke, #site-header .v-fill { animation: none !important; }
  #site-header .lang summary { animation: none !important; background: #FFFFFF !important; border-color: #CFDAD3 !important; color: #0E2A21 !important; }
  #site-header > div { gap: 10px !important; }
  #site-header > div > a.btn { display: none !important; }
  #site-header nav[aria-label] { display: none !important; animation: none !important; opacity: 1 !important; order: 3; width: 100%;
    flex-direction: column !important; align-items: stretch !important; gap: 0 !important; padding: 6px 0 2px !important; border-top: 1px solid #CFDAD3; }
  body.menu-open #site-header nav[aria-label] { display: flex !important; }
  #site-header nav[aria-label] a { padding: 12px 4px; border-bottom: 1px solid #E6EFE9; font-size: 17px; }
  #site-header nav[aria-label] a:last-child { border-bottom: 0; }
  .menu-toggle { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid #CFDAD3; border-radius: 4px;
    background: #FFFFFF; font: inherit; font-size: 14px; font-weight: 500; color: #0E2A21; cursor: pointer; }
  .menu-toggle::before { content: ""; width: 14px; height: 10px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; box-shadow: 0 4px 0 -1px currentColor inset; box-sizing: border-box; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat; }

  /* ---- hero: no pinned intro on small screens */
  #top { height: auto !important; }
  #top > div { position: relative !important; top: auto !important; height: auto !important; padding: 40px 20px 36px !important; overflow: visible !important; gap: 24px !important; }
  #top > div > img + div { background: rgba(245, 247, 245, 0.93) !important; }
  #intro-curtain, #intro-hint { display: none !important; }
  #intro-title { animation: none !important; transform: none !important; color: #0E2A21 !important; font-size: 40px !important; line-height: 1.05 !important; }
  #intro-title span { animation: none !important; transform: none !important; width: auto !important; }
  #hero-body { animation: none !important; opacity: 1 !important; transform: none !important; flex-direction: column !important; align-items: stretch !important; gap: 28px !important; padding-bottom: 0 !important; }
  #hero-body > div { width: 100% !important; padding-bottom: 0 !important; align-items: flex-start !important; }
  #hero-body p { font-size: 17px !important; }
  #hero-body svg { width: 100% !important; height: auto !important; }
  #hero-body > div:first-child > div { flex-wrap: wrap; gap: 16px !important; }

  /* ---- reveals: rise instead of sliding sideways */
  .reveal-left, .reveal-right { animation-name: kv-rise !important; }

  /* ---- about */
  #about { padding: 48px 20px !important; display: flex !important; flex-direction: column !important; gap: 28px !important; }
  #about > div { max-width: none !important; }
  #about > img { width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; border-radius: 4px; }

  /* ---- services: vertical list instead of the pinned horizontal track */
  #services { height: auto !important; }
  #services > div { position: relative !important; top: auto !important; height: auto !important; padding: 48px 20px !important; overflow: visible !important; gap: 24px !important; }
  #services > div > div:first-child { display: flex !important; flex-direction: column !important; gap: 12px !important; padding-right: 0 !important; }
  #services > div > div:nth-child(2) { display: none !important; }
  #services-track { animation: none !important; transform: none !important; flex-direction: column !important; width: auto !important; gap: 40px !important; will-change: auto !important; }
  #services-track article { width: 100% !important; gap: 16px !important; }
  #services-track article svg { width: 100% !important; height: auto !important; }
  #services-track article > div { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* ---- sectors */
  #sectors { padding: 48px 20px !important; display: flex !important; flex-direction: column !important; gap: 24px !important; }
  #sectors > img { width: 100% !important; height: 240px !important; border-radius: 4px; }
  #sectors li { grid-template-columns: 28px minmax(0, 1fr) !important; gap: 4px 14px !important; align-items: start !important; }
  #sectors li > svg { grid-row: 1 / span 2; margin-top: 2px; }
  #sectors li > span:last-child { grid-column: 2; }

  /* ---- bioreactors */
  #bioreactors { padding: 48px 20px !important; gap: 32px !important; justify-content: flex-start !important; }
  #bioreactors > div:first-child { grid-template-columns: 1fr !important; gap: 24px !important; }
  #bioreactors li { grid-template-columns: 1fr !important; gap: 4px !important; }
  #bioreactors .reveal-up > div { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; row-gap: 12px !important; }

  /* ---- production + partners */
  #production { padding: 48px 20px 0 !important; gap: 24px !important; }
  #production > div:first-child { grid-template-columns: 1fr !important; gap: 12px !important; }
  #production > div:nth-child(2) { grid-template-columns: 1fr !important; height: auto !important; gap: 24px !important; }
  #production > div:nth-child(2) > img { height: 240px !important; }
  #production > div:nth-child(2) > div { gap: 20px !important; }
  #partners-strip { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; padding: 24px 0 32px !important; margin-top: 8px !important; }
  #partners-strip > span { width: auto !important; }
  #partners-list { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }

  /* ---- team */
  #team { padding: 48px 20px !important; gap: 24px !important; }
  #team > div:first-child { grid-template-columns: 1fr !important; gap: 12px !important; }
  #team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px 16px !important; }

  /* ---- contact + footer */
  #contact > div:first-child { grid-template-columns: 1fr !important; padding: 48px 20px 32px !important; gap: 32px !important; }
  #contact form > div:first-child { grid-template-columns: 1fr !important; }
  #contact form > div:nth-last-child(2) { flex-wrap: wrap; }
  #contact dl { padding-top: 0 !important; }
  #contact footer { padding: 24px 20px !important; }
  #contact footer > div { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
  #contact footer nav { flex-wrap: wrap !important; gap: 10px 16px !important; }

  /* language menu keeps inside the screen */
  #site-header .lang ul { right: 0 !important; left: auto !important; }
  [dir="rtl"] #site-header .lang ul { right: auto !important; left: 0 !important; }
}

@media (max-width: 480px) {
  #intro-title { font-size: 34px !important; }
  #page-root h2 { font-size: 27px !important; }
  #team-grid { grid-template-columns: 1fr 1fr !important; }
  #bioreactors .reveal-up > div { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #bioreactors .reveal-up > div > div { font-size: 16px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-left, .reveal-right, .reveal-up { animation: none !important; }
}

@supports not (animation-timeline: view()) {
  /* Browsers without scroll-driven animations (Firefox, Safari before 26, older iPads) and
     visitors who prefer reduced motion get the finished layout with the four stages in a grid. */
  #top { height: auto !important; }
  #top > div { position: relative !important; top: auto !important; height: auto !important; min-height: 0 !important; }
  #intro-curtain, #intro-hint { display: none !important; }
  #intro-title, #intro-title span, #hero-body, #site-header, #site-header a.mark, #site-header a.mark > span, #site-header a.mark svg, #site-header .v-stroke, #site-header .v-fill, #site-header .v-hole,
  #site-header .lang summary, #site-header nav, #site-header a.btn, #page-root, #services-track, #services-progress,
  .reveal-left, .reveal-right, .reveal-up { animation: none !important; }
  #services { height: auto !important; }
  #services > div { position: relative !important; top: auto !important; height: auto !important; overflow: visible !important; padding-right: 80px !important; }
  #services > div > div:first-child { padding-right: 0 !important; }
  #services > div > div:nth-child(2) { display: none !important; }
  #services-track { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 48px 40px !important; width: auto !important; transform: none !important; will-change: auto !important; }
  #services-track article { width: auto !important; }
  #services-track article svg { width: 100% !important; height: auto !important; }
  #services-track article > div { grid-template-columns: 1fr !important; gap: 12px !important; }
}

@media (prefers-reduced-motion: reduce) {
  /* Browsers without scroll-driven animations (Firefox, Safari before 26, older iPads) and
     visitors who prefer reduced motion get the finished layout with the four stages in a grid. */
  #top { height: auto !important; }
  #top > div { position: relative !important; top: auto !important; height: auto !important; min-height: 0 !important; }
  #intro-curtain, #intro-hint { display: none !important; }
  #intro-title, #intro-title span, #hero-body, #site-header, #site-header a.mark, #site-header a.mark > span, #site-header a.mark svg, #site-header .v-stroke, #site-header .v-fill, #site-header .v-hole,
  #site-header .lang summary, #site-header nav, #site-header a.btn, #page-root, #services-track, #services-progress,
  .reveal-left, .reveal-right, .reveal-up { animation: none !important; }
  #services { height: auto !important; }
  #services > div { position: relative !important; top: auto !important; height: auto !important; overflow: visible !important; padding-right: 80px !important; }
  #services > div > div:first-child { padding-right: 0 !important; }
  #services > div > div:nth-child(2) { display: none !important; }
  #services-track { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 48px 40px !important; width: auto !important; transform: none !important; will-change: auto !important; }
  #services-track article { width: auto !important; }
  #services-track article svg { width: 100% !important; height: auto !important; }
  #services-track article > div { grid-template-columns: 1fr !important; gap: 12px !important; }
}

@media (max-width: 1023px) {
  #services > div { padding: 48px 20px !important; }
  #services-track { display: flex !important; flex-direction: column !important; gap: 40px !important; }
}