/*
  OPTIONAL — NOT PART OF THE CLAUDE DESIGN.
  The design is desktop-only (fluid vw/vh sizing, no breakpoints). Desktop (>1024px) is untouched.
  Delete the <link> to this file in the Blade partial to reproduce the design with no additions.
*/

@media (max-width: 1024px) {
  .op { padding: 12vh 6vw; }
  .op .op-intro { grid-template-columns: minmax(0, 1fr); gap: 8vh; }
  .op .op-intro__title { font-size: min(9vw, 64px); }
  .op .op-intro__lede { font-size: 17px; }
  .op .op-intro__note { font-size: 16px; }
  .op .op-intro__media { height: 80vw; max-height: 680px; }

  .op .op-plat { grid-template-columns: minmax(0, 1fr); gap: 8vh; margin-top: 12vh; }
  .op .op-plat__title { font-size: min(9vw, 64px); }
  .op .op-plat__lede { font-size: 16px; }
  .op .op-group__title { font-size: 17px; }
  .op .op-orbit { width: min(88vw, 620px); }
  .op .op-core__name { font-size: min(4vw, 26px); }
  .op .op-form { font-size: min(2.2vw, 14px); }
}

@media (max-width: 640px) {
  .op .op-group { padding: 12px 14px; gap: 12px; }
  .op .op-group.is-active { transform: translateX(4px); }
  .op .op-group__icon { width: 38px; height: 38px; font-size: 19px; }
  .op .op-orbit { width: 92vw; }
  .op .op-form { gap: 6px; padding: 4px 10px 4px 4px; font-size: 10px; }
  .op .op-form__icon { width: 22px; height: 22px; font-size: 13px; }
  .op .op-core__label { font-size: 8.5px; letter-spacing: 2px; }
  .op .op-core__name { font-size: 15px; }
}