/* ================================================================
   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.
   ================================================================ */

.career-title-mobile-break {
  display: none;
}

/* Career role accordion -------------------------------------------------------
   Matches the approved closed/open Figma variants while allowing the section
   and Safari scale shell to grow with the revealed job description. */
body.career-page .career-role-toggle,
body.career-page .career-role-apply {
  width: 130px;
  height: 24px;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 7px 0 8px;
  border: 0;
  border-radius: 4px;
  color: #fff;
  background: rgba(129, 133, 142, .3);
  cursor: pointer;
  font: 700 10px/1 Manrope, Inter, Arial, sans-serif;
  text-decoration: none;
}

body.career-page .career-role-toggle img {
  width: 15px;
  height: 15px;
  object-fit: contain;
  transform: rotate(0deg);
  transform-origin: 50% 50%;
  transition: transform .36s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}

body.career-page .career-role-toggle[aria-expanded="true"] img {
  transform: rotate(180deg);
}

body.career-page .career-role-toggle:hover,
body.career-page .career-role-toggle:focus-visible,
body.career-page .career-role-apply:hover,
body.career-page .career-role-apply:focus-visible {
  outline: 1px solid rgba(230, 218, 120, .8);
  outline-offset: 2px;
  background: rgba(230, 218, 120, .14);
}

body.career-page .career-role-details[hidden] { display: none; }

body.career-page .career-role-card.is-expanded {
  height: auto;
  min-height: 573px;
  justify-content: flex-start;
  padding: 24px 40px;
}

body.career-page .career-role-card.is-expanded > .career-role-toggle { display: none; }

body.career-page .career-role-details {
  width: 100%;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  color: #bbbdc2;
}

body.career-page .career-role-details.is-opening {
  animation: career-role-details-in .34s cubic-bezier(.22, 1, .36, 1) both;
}

body.career-page .career-role-details.is-closing {
  animation: career-role-details-out .24s ease both;
  pointer-events: none;
}

@keyframes career-role-details-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes career-role-details-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-6px); }
}

body.career-page .career-role-details > p {
  width: min(760px, 100%);
  margin: 0;
  font: 400 12px/1.45 Manrope, Inter, Arial, sans-serif;
}

body.career-page .career-role-details section { width: 100%; }

body.career-page .career-role-details h4 {
  margin: 0 0 4px;
  color: #bbbdc2;
  font: 500 12px/1.25 Manrope, Inter, Arial, sans-serif;
}

body.career-page .career-role-details ul {
  margin: 0;
  padding-left: 18px;
  font: 400 10px/1.45 Manrope, Inter, Arial, sans-serif;
}

body.career-page .career-role-actions {
  width: 600px;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: auto;
}

body.career-page .career-role-apply { width: 130px; }

@media (prefers-reduced-motion: reduce) {
  body.career-page .career-role-toggle img { transition: none; }
  body.career-page .career-role-details.is-opening,
  body.career-page .career-role-details.is-closing { animation: none; }
}

body.career-page .career-positions.has-open-role {
  flex-basis: auto;
  height: auto;
  min-height: 1055px;
}

@media (min-width: 768px) {
  body.career-page .career-role-card.is-expanded {
    height: 584px;
    min-height: 584px;
    justify-content: center;
    gap: 16px;
    padding: 8px 40px;
  }

  body.career-page .career-role-card.is-expanded > p {
    width: 332px;
    height: 32px;
  }

  body.career-page .career-role-details {
    flex: 0 0 auto;
    gap: 16px;
  }

  body.career-page .career-role-details > p {
    width: 483px;
    height: 32px;
    font-size: 12px;
    line-height: normal;
  }

  body.career-page .career-role-details section {
    width: 553px;
    max-width: 100%;
  }

  body.career-page .career-role-details section:first-of-type { height: 191px; }
  body.career-page .career-role-details section:nth-of-type(2) { height: 131px; }

  body.career-page .career-role-details h4 {
    margin: 0 0 6px;
    color: #fff;
    font-size: 15px;
    line-height: 1.003;
  }

  body.career-page .career-role-details ul {
    margin: 0;
    padding-left: 22.5px;
    font-size: 15px;
    line-height: 1.25;
  }

  body.career-page .career-role-actions {
    width: 570px;
    justify-content: flex-start;
    gap: 310px;
    margin-top: 0;
  }
}

@media (max-width: 767px) {
  body.career-page .career-role-toggle,
  body.career-page .career-role-apply {
    width: 70px;
    height: 15px;
    gap: 3px;
    padding: 0 4px;
    font-size: 8px;
  }

  body.career-page .career-role-toggle img { width: 10px; height: 10px; }

  body.career-page .career-role-card.is-expanded {
    height: auto;
    min-height: 328px;
    gap: 8px;
    padding: 8px 24px;
  }

  body.career-page .career-role-details { gap: 8px; }

  body.career-page .career-role-details > p {
    width: 321px;
    max-width: 100%;
    font-size: 10px;
    line-height: 1.003;
  }

  body.career-page .career-role-details h4 {
    margin-bottom: 2px;
    font-size: 10px;
    line-height: 1.003;
  }

  body.career-page .career-role-details ul {
    padding-left: 13px;
    font-size: 9px;
    line-height: 1.37;
  }

  body.career-page .career-role-actions { width: 332px; gap: 12px; }
  body.career-page .career-role-apply { width: 88px; }

  body.career-page .career-positions.has-open-role {
    flex-basis: auto;
    height: auto;
    min-height: 434px;
  }
}

@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-title-mobile-break {
    display: inline;
  }

  body.career-page .career-hero-copy,
  body.career-page .career-hero h1 {
    height: auto;
  }

  body.career-page .career-hero-copy {
    min-height: 221px;
  }

  body.career-page .career-hero h1 {
    min-height: 104px;
  }

  body.career-page .career-hero h1 span {
    white-space: nowrap;
  }

  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);
    height: auto;
    min-height: 221px;
  }

  body.career-page .career-hero h1 {
    width: 380px;
    height: auto;
    min-height: 104px;
    font-size: 48px;
    line-height: 52px;
  }

  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-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, calc(100% + 16px));
    max-width: none;
  }

  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;
  }
}