/* Responsive overrides — apply only on small screens, desktop untouched */
@media (max-width: 768px) {
  /* Stack every multi-column grid (except the top header bar) */
  [style*="grid-template-columns"]:not(header) { grid-template-columns: 1fr !important; }
  /* Missions look better as 2 columns */
  #ap-missions { grid-template-columns: 1fr 1fr !important; }

  /* Stack side-by-side image / text rows */
  [data-anim-row],
  [style*="display: flex"][style*="align-items: stretch"],
  [style*="display: flex"][style*="align-items: flex-start"] {
    flex-direction: column !important;
    gap: 22px !important;
  }

  /* Fixed cm / px widths become fluid */
  [style*="width: 13cm"], [style*="width: 10cm"], [style*="width: 5cm"] {
    width: 100% !important; height: auto !important; aspect-ratio: 3 / 2 !important;
  }
  [style*="height: 12cm"], [style*="height: 13cm"] { height: auto !important; aspect-ratio: 4 / 3 !important; }
  [style*="height: 460px"] { height: auto !important; min-height: 200px !important; }
  [style*="height: 660px"], [style*="height: 520px"] { height: 52vh !important; }
  .ap-beige-anim { height: auto !important; }

  /* Horizontal padding on wide sections */
  section, header, footer,
  [style*="padding: 0 2cm"], [style*="padding: 20px 2cm"], [style*="padding: 40px 2cm"],
  [style*="44px 2cm"], [style*="110px 44px"], [style*="100px 44px"], [style*="96px 44px"] {
    padding-left: 20px !important; padding-right: 20px !important;
  }
  [style*="padding: 44px 42px"], [style*="padding: 48px 46px"] { padding: 26px 20px !important; }

  /* Typography scale-down */
  h1 { font-size: 34px !important; line-height: 1.12 !important; }
  h2 { font-size: 26px !important; line-height: 1.18 !important; }
  h3 { font-size: 21px !important; }
  h4 { font-size: 18px !important; }
  [style*="font-size: 80px"], [style*="font-size: 76px"], [style*="font-size: 62px"],
  [style*="font-size: 58px"], [style*="font-size: 56px"], [style*="font-size: 52px"],
  [style*="font-size: 50px"], [style*="font-size: 46px"], [style*="font-size: 44px"] { font-size: 32px !important; }
  [style*="font-size: 40px"], [style*="font-size: 38px"], [style*="font-size: 36px"],
  [style*="font-size: 34px"], [style*="font-size: 30px"] { font-size: 24px !important; }
  [style*="font-size: 27px"], [style*="font-size: 26px"], [style*="font-size: 25px"],
  [style*="font-size: 24px"], [style*="font-size: 22px"], [style*="font-size: 20px"],
  [style*="font-size: 19.5px"], [style*="font-size: 19px"] { font-size: 16.5px !important; }

  /* Hero video: make it taller so the overlaid header and bottom caption don't collide */
  [style*="aspect-ratio: 16 / 9"] { aspect-ratio: auto !important; height: 82vh !important; }

  /* Header */
  header { gap: 8px !important; padding: 18px 16px 14px !important; }
  header img { height: 40px !important; }
  header nav a, header nav button { font-size: 12px !important; letter-spacing: 0.04em !important; }
  header nav button svg { display: none !important; }
  /* Both header dropdowns (language + page menu): pinned, readable white panel — works in LTR & RTL */
  header nav div[style*="position: absolute"] {
    position: fixed !important;
    top: 78px !important; left: 16px !important; right: 16px !important;
    min-width: 0 !important;
    background: #ffffff !important;
    border: 1px solid #ECECEC !important;
    box-shadow: 0 16px 40px -14px rgba(20,20,20,0.3) !important;
    border-radius: 8px !important;
    padding: 8px 0 !important;
    gap: 0 !important;
    z-index: 200 !important;
  }
  header nav div[style*="position: absolute"] a,
  header nav div[style*="position: absolute"] button,
  header nav div[style*="position: absolute"] span {
    color: #141414 !important; text-shadow: none !important; opacity: 1 !important; font-size: 14px !important;
  }
  header nav div[style*="position: absolute"] a { padding: 13px 22px !important; }

  /* Hero caption sits closer to the bottom, smaller surtitle */
  [style*="letter-spacing: 0.24em"] { font-size: 10px !important; }

  /* Tame very wide letter-spacing on small screens */
  [style*="letter-spacing: 0.24em"], [style*="letter-spacing: 0.22em"] { letter-spacing: 0.1em !important; }

  /* Sub-page top bar: smaller logo */
  img[alt="AesthePharma"] { height: 46px !important; }

  /* Sub-page navigation: compact wrapping row instead of a tall list */
  nav[style*="justify-content: center"] { gap: 10px 16px !important; padding: 4px 16px 16px !important; }
  nav[style*="justify-content: center"] a { font-size: 11.5px !important; letter-spacing: 0.05em !important; padding-bottom: 2px !important; }

  /* Footer: tighter */
  footer { padding-top: 46px !important; padding-bottom: 28px !important; }
  footer h4 { margin-bottom: 14px !important; font-size: 14px !important; }
  footer > div { gap: 40px !important; }
}