/* Shared iPhone/mobile stability fixes */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  width: 100%;
  min-width: 0;
}

.nav-links > a:not(.nav-cta)[aria-current="page"],
.nav-links > .nav-dropdown > a[aria-current="page"],
.nav-links > .nav-dropdown.current-section > a {
  color: var(--purple);
}

.mob-nav a[aria-current="page"] {
  color: var(--purple);
  background: #f9f6ff;
  box-shadow: inset 4px 0 0 var(--purple);
}

@media (max-width: 768px) {
  nav,
  .nav-inner,
  .mob-nav,
  section,
  footer {
    max-width: 100%;
  }

  .nav-inner,
  .banner-content,
  .journey-inner,
  .company-inner,
  .products-inner,
  .contact-inner,
  .apply-banner-inner,
  .footer-grid {
    min-width: 0;
  }

  .mob-nav {
    max-height: calc(100vh - 70px);
    max-height: calc(100dvh - 70px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .hamburger {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    align-items: center;
    justify-content: center;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .hamburger span {
    pointer-events: none;
    transform-origin: center;
    will-change: transform, opacity;
  }

  .hamburger:focus-visible {
    outline: 3px solid var(--purple);
    outline-offset: 2px;
    border-radius: 4px;
  }

  body.mobile-menu-open {
    overflow: hidden;
  }

  .hero {
    height: 72vh !important;
    min-height: 520px !important;
    max-height: 680px;
    padding-bottom: 0 !important;
  }

  @supports (height: 100svh) {
    .hero { height: 72svh !important; }
  }

  .hero-content {
    padding: 0 20px 40px !important;
  }

  .hero-h1 {
    font-size: clamp(30px, 8.2vw, 38px) !important;
    line-height: 1.08 !important;
  }

  .hero-sub {
    line-height: 1.55;
  }

  .page-banner {
    height: clamp(240px, 36vh, 320px) !important;
    min-height: 240px !important;
    padding-bottom: 32px !important;
  }

  @supports (height: 100svh) {
    .page-banner { height: clamp(240px, 36svh, 320px) !important; }
  }

  .intro h2,
  .journey-left h2,
  .careers-intro h2,
  .csr-intro h2,
  .contact-info h2,
  .values-header h2,
  .pillars-header h2,
  .life-header h2,
  .subs-header h2 {
    font-size: clamp(30px, 8vw, 36px) !important;
    line-height: 1.15 !important;
  }

  /* About page selectors previously did not match the actual markup. */
  .vision-mission {
    padding: 52px 0 !important;
  }

  .vm-inner {
    grid-template-columns: 1fr !important;
    padding: 0 20px !important;
  }

  .vm-block {
    padding: 36px 24px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }

  .vm-block:last-child {
    border-bottom: 0;
  }

  .val-card {
    padding: 28px 20px !important;
  }

  /* The desktop centering rule left the last product card at half width. */
  .prod-card:last-child:nth-child(odd) {
    grid-column: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .prod-info,
  .sub-card,
  .contact-form-wrap,
  .apply-form {
    min-width: 0;
  }

  input,
  select,
  textarea {
    font-size: 16px !important;
    max-width: 100%;
  }

  .footer-col a,
  .footer-bottom p,
  .brand-products,
  .meta-val {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 430px) {
  .values-grid {
    grid-template-columns: 1fr !important;
  }

  .brand-item {
    align-items: flex-start !important;
    gap: 8px;
    padding: 16px 18px !important;
  }

  .brand-products {
    text-align: right;
    max-width: 55%;
  }

  .meta-grid {
    grid-template-columns: 1fr !important;
  }
}