/* Mobile refinements for the On Media Group GitHub Pages site. */

@media (max-width: 880px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  @supports (overflow: clip) {
    html,
    body {
      overflow-x: clip;
    }
  }

  main {
    overflow-x: hidden;
    overflow-y: visible;
  }

  @supports (overflow: clip) {
    main {
      overflow-x: clip;
    }
  }

  .site-header {
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
  }

  .hero {
    width: 100%;
    gap: 18px;
    padding-top: calc(102px + env(safe-area-inset-top));
    padding-right: max(20px, env(safe-area-inset-right));
    padding-bottom: 46px;
    padding-left: max(20px, env(safe-area-inset-left));
  }

  .hero-copy,
  .hero-visual {
    min-width: 0;
    max-width: 100%;
  }

  .hero h1 {
    max-width: 100%;
    margin: 24px 0 20px;
    font-size: clamp(48px, 12.7vw, 68px);
    line-height: 0.96;
    letter-spacing: -0.055em;
  }

  .hero p {
    max-width: 100%;
    font-size: 16px;
    line-height: 1.6;
  }

  .hero-actions {
    width: 100%;
  }

  .hero-actions .button {
    min-width: 0;
  }

  .hero-proof {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    margin-top: 38px;
    overflow: visible;
  }

  .hero-proof div {
    min-width: 0;
    padding: 15px 10px;
  }

  .hero-proof div + div {
    padding-left: 12px;
  }

  .hero-proof strong {
    font-size: 14px;
  }

  .hero-proof span {
    font-size: 8px;
    line-height: 1.35;
    letter-spacing: 0.05em;
    overflow-wrap: anywhere;
  }

  .hero-visual {
    width: 100%;
    min-height: min(112vw, 510px);
    margin-top: 4px;
    overflow: visible;
  }

  .stage-card {
    inset: 20px 2px 16px;
    border-radius: 30px;
    transform: none;
  }

  .stage-topline {
    padding: 20px;
  }

  .cylinder-wrap {
    top: 21%;
    width: 56%;
    max-width: 235px;
    height: 55%;
  }

  .floating-card {
    max-width: 47%;
    line-height: 1.25;
    white-space: normal;
  }

  .floating-card.card-a {
    top: 19%;
    left: 5px;
  }

  .floating-card.card-b {
    right: 5px;
    bottom: 14%;
  }

  .scroll-cue {
    display: none;
  }

  .trust-strip {
    min-height: auto;
    justify-content: center;
    gap: 10px 15px;
    padding: 18px 20px;
    overflow: visible;
    white-space: normal;
    text-align: center;
  }

  .service-tabs button span {
    display: inline;
  }

  .button,
  .menu-button,
  .service-tabs button,
  .faq-list summary {
    touch-action: manipulation;
  }
}

@media (max-width: 560px) {
  .site-header {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  .hero {
    gap: 8px;
    padding-top: calc(94px + env(safe-area-inset-top));
    padding-right: max(16px, env(safe-area-inset-right));
    padding-bottom: 38px;
    padding-left: max(16px, env(safe-area-inset-left));
  }

  .eyebrow {
    gap: 8px;
    font-size: 9px;
    letter-spacing: 0.12em;
  }

  .eyebrow span {
    width: 22px;
  }

  .hero h1 {
    margin: 21px 0 17px;
    font-size: clamp(43px, 13.2vw, 58px);
    line-height: 0.97;
    letter-spacing: -0.05em;
  }

  .hero p {
    font-size: 15px;
    line-height: 1.55;
  }

  .hero-actions {
    gap: 10px;
    margin-top: 24px;
  }

  .hero-actions .button {
    width: 100%;
    min-height: 50px;
  }

  .hero-proof {
    margin-top: 32px;
  }

  .hero-proof div {
    padding: 13px 5px;
  }

  .hero-proof div + div {
    padding-left: 8px;
  }

  .hero-proof strong {
    font-size: 13px;
  }

  .hero-proof span {
    margin-top: 3px;
    font-size: 7px;
    line-height: 1.3;
    letter-spacing: 0.035em;
  }

  .hero-visual {
    width: 100%;
    height: 103vw;
    min-height: 370px;
    max-height: 440px;
  }

  .stage-card {
    inset: 12px 0 8px;
    border-radius: 24px;
  }

  .stage-card::before {
    background-size: 30px 30px;
  }

  .stage-topline {
    padding: 17px 16px;
    font-size: 7px;
  }

  .cylinder-wrap {
    top: 21%;
    width: 59%;
    height: 55%;
  }

  .cylinder-screen span {
    font-size: clamp(40px, 13vw, 54px);
  }

  .floating-card {
    max-width: 46%;
    gap: 6px;
    padding: 8px 9px;
    border-radius: 9px;
    font-size: 8px;
  }

  .floating-card svg {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
  }

  .floating-card.card-a {
    top: 18%;
    left: 3px;
  }

  .floating-card.card-b {
    right: 3px;
    bottom: 13%;
  }

  .pixel-field {
    right: 0;
    width: 34%;
  }

  .trust-strip {
    gap: 9px 12px;
    padding: 17px 16px;
    font-size: 8px;
    line-height: 1.4;
  }

  .services-section,
  .projects-section,
  .process-section,
  .faq-section,
  .contact-section {
    padding-right: max(16px, env(safe-area-inset-right));
    padding-left: max(16px, env(safe-area-inset-left));
  }

  .section-heading h2,
  .about-copy h2,
  .faq-intro h2,
  .contact-copy h2 {
    font-size: clamp(35px, 10.2vw, 40px);
    line-height: 1.02;
  }

  .service-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-tabs button {
    gap: 7px;
    min-height: 58px;
    padding: 10px 8px;
  }

  .service-tabs button span {
    font-size: 10px;
  }

  .service-panel,
  .project-card,
  .about-block,
  .quote-form {
    border-radius: 20px;
  }

  .form-grid input,
  .form-grid select,
  .form-grid textarea {
    font-size: 16px;
  }

  footer {
    padding-right: max(16px, env(safe-area-inset-right));
    padding-left: max(16px, env(safe-area-inset-left));
  }
}

@media (max-width: 360px) {
  .hero h1 {
    font-size: 42px;
  }

  .hero-visual {
    min-height: 350px;
  }

  .floating-card {
    max-width: 48%;
    font-size: 7px;
  }

  .footer-links {
    grid-template-columns: 1fr;
  }
}