/*
 * Mobile homepage compatibility and containment.
 *
 * The original generated styles use Media Queries Level 4 range syntax
 * (@media (width <= ...)). Some Android Chrome/WebView combinations do not
 * apply those rules. The equivalent max-width rules below deliberately mirror
 * the intended responsive layout using broadly supported syntax.
 */
@media (max-width: 900px) {
  :root {
    --shell: calc(100% - 40px);
  }

  .site-header {
    grid-template-columns: 1fr 1fr;
  }

  .site-header nav {
    display: none;
  }

  .hero {
    min-height: auto;
    padding-block: 60px 35px;
  }

  .hero h1 {
    margin-block: 80px 55px;
    font-size: clamp(4rem, 14vw, 7rem);
  }

  .hero-lower,
  .editorial-grid,
  .split-heading,
  .contact-grid,
  .faq-grid {
    grid-template-columns: 1fr;
  }

  .hero-action {
    justify-self: start;
    margin-top: 35px;
  }

  .proof-strip {
    grid-template-columns: 1fr;
  }

  .proof-strip article {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 28px 20px;
  }

  .proof-note {
    text-align: left;
  }

  .editorial-section,
  .light-section,
  .story-section,
  .quotes-section,
  .sectors-section,
  .contact-section,
  .faq-section {
    padding-block: 100px;
  }

  .statement {
    margin-left: 0;
  }

  .do-grid,
  .quote-grid {
    grid-template-columns: 1fr;
  }

  .quote-card {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    min-height: 390px;
  }

  .story-timeline::before {
    display: none;
  }

  .story-card,
  .story-card.reverse {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .story-card.reverse .story-visual {
    order: 0;
  }

  /* The final timeline card must not carry the desktop inter-card spacing. */
  .story-card:last-child {
    margin-bottom: 0;
  }

  .story-section {
    padding-bottom: 24px;
  }

  .story-visual {
    max-width: 420px;
  }

  .contact-grid > div:first-child {
    position: static;
  }

  .inquiry-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  :root {
    --shell: calc(100% - 30px);
  }

  .site-header {
    height: 70px;
  }

  .hero {
    min-height: calc(100svh - 70px);
    padding-top: 42px;
  }

  .hero h1 {
    margin-block: 14vh 10vh;
    font-size: clamp(2.75rem, 14.25vw, 4rem);
    line-height: 0.9;
  }

  .hero h1 span {
    font-size: 0.8em;
  }

  .hero-copy {
    font-size: 1.05rem;
  }

  .hero-action {
    width: 100%;
    display: block;
  }

  .hero-action .button {
    width: 100%;
  }

  .hero-action small {
    margin-top: 15px;
    display: block;
  }

  .section-index {
    margin-bottom: 45px;
  }

  h2 {
    font-size: 3.15rem;
  }

  .do-grid article {
    min-height: auto;
    padding: 26px;
  }

  .story-visual {
    width: 100%;
  }

  .quote-card {
    padding-inline: 8px;
  }

  .contact-form {
    padding: 22px;
    box-shadow: 8px 8px #0b0c0b26;
  }

  .field-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .footer-main {
    padding-block: 70px;
    display: block;
  }

  .footer-main > a {
    width: 125px;
    height: 125px;
    margin-top: 50px;
  }

  .footer-bottom,
  .admin-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
  }

  .admin-stats {
    justify-content: flex-start;
  }

  body::before {
    display: none;
  }

  /* The CTA now lives inside the mobile menu panel; keep its label visible. */
  .mobile-menu-panel .nav-cta {
    gap: 0.75rem;
    font-size: 0.7rem;
  }
}

/* Intrinsic-size safeguards for every responsive grid and flex child. */
@media (max-width: 900px) {
  .section-shell,
  .section-shell > *,
  .hero-lower > *,
  .editorial-grid > *,
  .split-heading > *,
  .do-grid > *,
  .story-card > *,
  .quote-grid > *,
  .contact-grid > *,
  .faq-grid > *,
  .field-row > *,
  .conditions article > *,
  .proof-strip article > *,
  .footer-main > *,
  .footer-bottom > * {
    min-width: 0;
  }

  .hero,
  .hero h1,
  .hero-copy,
  .hero-positioning,
  .statement,
  .statement p,
  .story-title,
  .contact-form,
  .faq-list,
  .footer-main p {
    max-width: 100%;
  }

  .contact-form input,
  .contact-form select,
  .contact-form textarea,
  .contact-form button {
    min-width: 0;
    max-width: 100%;
  }

  .form-top {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .proof-strip article {
    align-items: flex-start;
  }

  .proof-strip span,
  .proof-note,
  .contact-form label > span,
  .contact-process aside,
  .faq-list summary span,
  .footer-bottom {
    hyphens: auto;
    overflow-wrap: anywhere;
    word-break: normal;
  }
}

@media (max-width: 600px) {
  h2,
  h3,
  .statement p,
  .long-copy .pull-line,
  .quote-card p,
  .footer-main p {
    hyphens: auto;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .contact-form .numbered-field {
    min-width: 0;
    padding-left: 32px;
  }

  .mobile-menu-panel {
    max-width: 100vw;
  }
}