/* ================================================================
   Career + Contact responsive resilience — 2026-07-31
   Keep the approved 430px and 1440px compositions intact. The rules
   below only make these two page-specific layouts adapt safely across
   real phone widths, safe areas, and iOS form-focus behavior.
   ================================================================ */

@media (max-width: 767px) {
  body.career-page,
  body.contact-page {
    min-width: 0;
  }

  body.career-page .career-stack,
  body.contact-page .contact-stack {
    width: 100%;
    min-width: 0;
    overflow-x: clip;
  }

  body.career-page .site-header {
    top: calc(23px + env(safe-area-inset-top, 0px));
    width: calc(100% - 20px);
    max-width: 410px;
  }

  body.contact-page .site-header {
    top: calc(24px + env(safe-area-inset-top, 0px));
    width: calc(100% - 20px);
    max-width: 410px;
  }

  body.career-page .menu-primary,
  body.career-page .menu-footer,
  body.contact-page .menu-primary,
  body.contact-page .menu-footer {
    width: min(340px, calc(100% - 24px));
  }

  body.career-page .career-hero-copy > p,
  body.career-page .career-positions-heading p,
  body.career-page .career-cta p {
    height: auto;
  }

  body.career-page .career-hero-copy > p {
    min-height: 58px;
  }

  body.career-page .career-positions-heading p {
    min-height: 35px;
  }

  body.career-page .career-cta p {
    min-height: 27px;
  }

  body[data-page="career"] .footer-identity {
    width: calc(100% - 48px);
    max-width: none;
    justify-content: center;
    gap: clamp(16px, 8vw, 32px);
  }

  body[data-page="career"] .footer-logo {
    flex: 0 1 134px;
    width: 134px;
    transform: none;
  }

  body.contact-page .contact-form label {
    min-width: 0;
    overflow: hidden;
    border-radius: 8px;
  }

  body.contact-page .contact-form input,
  body.contact-page .contact-form textarea {
    min-width: 0;
    -webkit-appearance: none;
    appearance: none;
  }
}

/* Safari zooms the page when a focused control computes below 16px.
   Scale the control surface back to the authored 12px appearance while
   keeping a 16px computed font size for iOS focus. */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 767px) {
    body.contact-page .contact-form input,
    body.contact-page .contact-form textarea {
      width: 133.3334%;
      height: 133.3334%;
      font-size: 16px;
      transform: scale(.75);
      transform-origin: top left;
    }
  }
}

/* Match the responsive method already approved on the About page. Below the
   authored 430px mobile frame, scale the complete page artboard instead of
   shrinking individual elements while keeping their 430px section heights.
   This removes the artificial gap seen before "Our Values" on iPhone 5 and
   preserves the approved relative spacing at every narrow phone width. */
@media (max-width: 430px) {
  body.career-page .career-stack,
  body.contact-page .contact-stack {
    width: 430px;
    min-width: 430px;
    zoom: calc(100vw / 430px);
  }

  body.career-page .site-header,
  body.contact-page .site-header {
    width: 410px;
    max-width: none;
    height: 58px;
    zoom: calc(100vw / 430px);
  }

  body.career-page .career-hero,
  body.career-page .career-hero-inner,
  body.career-page .career-hero-copy,
  body.career-page .career-hero h1,
  body.career-page .career-values,
  body.career-page .career-values-grid,
  body.career-page .career-value-card,
  body.career-page .career-positions,
  body.career-page .career-positions-heading,
  body.career-page .career-role-card {
    min-height: 0;
  }

  body.career-page .career-hero-visual {
    flex-basis: 380px;
    width: 380px;
    max-width: calc(100% - 50px);
    height: 380px;
    aspect-ratio: auto;
  }

  body.career-page .career-hero-copy {
    width: 380px;
    max-width: calc(100% - 50px);
  }

  body.career-page .career-hero h1 {
    width: 338px;
    font-size: 48px;
    line-height: 52px;
  }

  body.career-page .career-values > h2,
  body.career-page .career-positions h2 {
    font-size: 36px;
  }

  body.career-page .career-values-grid {
    width: 376px;
    max-width: calc(100% - 54px);
  }

  body.career-page .career-positions {
    width: 380px;
    max-width: calc(100% - 50px);
  }

  body.contact-page .contact-conversation-copy {
    width: 352px;
    max-width: calc(100% - 78px);
  }

  body.contact-page .contact-channel-list {
    gap: 51px;
  }
}

/* Intermediate mobile widths expand page-specific content instead of
   leaving a narrow 380/400px strip in the middle of a larger phone. */
@media (min-width: 431px) and (max-width: 767px) {
  body.career-page .site-header,
  body.contact-page .site-header {
    width: calc(100% - 30px);
    max-width: 720px;
  }

  body.career-page .career-hero {
    flex-basis: auto;
    height: auto;
    min-height: 769px;
  }

  body.career-page .career-hero-inner {
    height: auto;
    min-height: 625px;
  }

  body.career-page .career-hero-copy {
    width: min(480px, calc(100% - 64px));
    max-width: none;
  }

  body.career-page .career-hero h1 {
    width: min(420px, 100%);
  }

  body.career-page .career-hero-copy > p {
    width: min(430px, 100%);
    max-width: none;
  }

  body.career-page .career-hero-visual {
    flex-basis: auto;
    width: min(500px, calc(100% - 64px));
    max-width: none;
    height: auto;
    aspect-ratio: 1;
  }

  body.career-page .career-values {
    flex-basis: auto;
    height: auto;
    min-height: 965px;
  }

  body.career-page .career-values-grid,
  body.career-page .career-positions {
    width: min(520px, calc(100% - 64px));
    max-width: none;
  }

  body.career-page .career-values-grid {
    height: auto;
    min-height: 814px;
  }

  body.career-page .career-value-card {
    flex-basis: auto;
    height: auto;
    min-height: 150px;
  }

  body.career-page .career-positions {
    height: auto;
    min-height: 191px;
  }

  body.contact-page .contact-hero > div {
    width: 100%;
  }

  body.contact-page .contact-hero p {
    width: min(430px, calc(100% - 64px));
    max-width: none;
  }

  body.contact-page .contact-form {
    width: min(560px, calc(100% - 40px));
    max-width: none;
  }

  body.contact-page .contact-conversation-copy {
    width: min(430px, calc(100% - 64px));
    max-width: none;
  }
}

/* Reuse the approved Home/About footer response instead of the fixed
   430px footer coordinates that collide on narrow phones. */
@media (max-width: 413px) {
  body.career-page .footer-links,
  body.contact-page .footer-links {
    top: 44px;
    left: 24px;
    width: calc(100% - 48px);
    max-width: none;
    height: 143px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    gap: 16px 8px;
    align-content: space-between;
    font-size: 13px;
    transform: none;
  }

  body.career-page .footer-links a,
  body.contact-page .footer-links a {
    position: static;
    justify-self: center;
    text-align: center;
  }
}

@media (min-width: 361px) and (max-width: 429px) {
  body.career-page .footer-identity,
  body.contact-page .footer-identity {
    width: calc(100% - 48px);
    max-width: none;
    justify-content: center;
    gap: 32px;
  }

  body.career-page .footer-logo,
  body.contact-page .footer-logo {
    flex: 0 0 134px;
    width: 134px;
    transform: none;
  }
}

@media (max-width: 360px) {
  body.career-page .footer-identity,
  body.contact-page .footer-identity {
    width: calc(100% - 48px);
    max-width: none;
    justify-content: center;
    gap: 32px;
  }

  body.career-page .footer-logo,
  body.contact-page .footer-logo {
    flex: 0 0 120px;
    width: 120px;
    transform: none;
  }

  body.career-page .socials,
  body.contact-page .socials {
    gap: 16px;
  }

  body.career-page .socials img,
  body.contact-page .socials img {
    width: 26px;
    height: 26px;
  }
}

@media (max-width: 340px) {
  body[data-page="career"] .career-cta > div {
    width: 100%;
    max-width: 100%;
    padding-inline: 16px;
  }

  body[data-page="career"] .career-cta h2 {
    width: 100%;
  }

  body[data-page="career"] .career-cta p {
    width: 100%;
    max-width: 260px;
    height: auto;
    min-height: 27px;
  }

  body[data-page="career"] .footer-links {
    left: 24px;
    width: calc(100% - 48px);
    max-width: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    gap: 16px 8px;
    align-content: space-between;
    font-size: 12px;
    transform: none;
  }

  body[data-page="career"] .footer-links a {
    position: static;
    justify-self: center;
    text-align: center;
  }

  body.career-page .footer-links,
  body.contact-page .footer-links {
    font-size: 12px;
  }
}