/* ============================================================================
   Contact responsive refinement — 2026-07-31

   Scope: Contact only. The approved 430px and 1440px Figma compositions remain
   the visual anchors. Intermediate sizes use a real responsive layout instead
   of shrinking the complete 430px/1440px artboards, so text, form controls,
   focus rings, and touch targets remain usable on small phones and tablets.
   ========================================================================== */

body.contact-page {
  min-width: 320px;
}

/* Figma 32:795 / 67:1276 use one opaque vertical gradient on the complete
   Contact frame. Keep it owned by Contact so shared/approved pages cannot
   change its color stops, sizing, or repeat behavior. The vertical columns
   visible while the frame is selected in Figma are its layout grid, not part
   of the exported design. */
body.contact-page .contact-stack {
  background-color: #000;
  background-image: linear-gradient(
    180deg,
    #000 0%,
    #6e0101 50%,
    #000 100%
  );
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* The 430px layout is already fluid internally. Keep its authored geometry at
   430px, but stop scaling the whole page below that width. */
@media (max-width: 430px) {
  body.contact-page .contact-stack {
    width: 100%;
    min-width: 0;
    zoom: 1;
  }

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

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

/* Match the approved Career footer rhythm on mobile. The footer content and
   typography stay unchanged; only the identity row uses the same balanced
   width, centering, and spacing as the already-approved page. */
@media (max-width: 767px) {
  body.contact-page .footer-identity {
    width: calc(100% - 48px);
    max-width: none;
    justify-content: center;
    gap: clamp(16px, 8vw, 32px);
  }

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

/* Give the smallest supported phones enough footer text width after removing
   artboard scaling. This keeps all copy above the legal divider. */
@media (max-width: 360px) {
  body.contact-page .footer-identity {
    width: calc(100% - 48px);
    max-width: none;
    justify-content: center;
    gap: 32px;
  }

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

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

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

  body.contact-page .footer-copy,
  body.contact-page .legal {
    width: calc(100% - 48px);
    max-width: none;
  }

  body.contact-page .footer-copy {
    height: auto;
  }

  body.contact-page .footer-rule,
  body.contact-page .site-footer::before {
    width: calc(100% - 48px);
    max-width: none;
  }
}

/* The 70px contact-channel assets dominate the 320px layout. Keep the
   existing composition and touch-friendly controls, but reduce only these
   three visible icons at the narrowest supported width. */
@media (max-width: 340px) {
  body.contact-page .contact-channel-list a {
    width: 70px;
    height: 70px;
  }

  body.contact-page .contact-channel-list img {
    width: 56px;
    height: 56px;
  }

  body.contact-page .contact-channel-list picture {
    display: grid;
    place-items: center;
  }
}

/* Smooth the transition immediately above the 430px Figma frame. */
@media (min-width: 431px) and (max-width: 767px) {
  body.contact-page .site-header {
    width: min(720px, calc(100% - 20px));
  }

  body.contact-page .contact-hero h1 {
    font-size: clamp(40px, 8vw, 60px);
  }

  body.contact-page .contact-hero p,
  body.contact-page .contact-conversation p {
    font-size: clamp(12px, 1.8vw, 14px);
  }

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

  body.contact-page .contact-form input,
  body.contact-page .contact-form textarea {
    font-size: clamp(12px, 1.8vw, 14px);
  }

  body.contact-page .contact-form > button {
    font-size: clamp(10px, 1.8vw, 14px);
  }

  body.contact-page .contact-conversation h2 {
    font-size: clamp(24px, 3.6vw, 28px);
  }
}

/* Tablet and compact desktop. Preserve the desktop visual language while
   allowing every section to reflow at its own readable size. */
@media (min-width: 768px) and (max-width: 1439px) {
  body.contact-page .contact-stack {
    width: 100%;
    min-width: 0;
    min-height: 0;
    zoom: 1;
  }

  body.contact-page .site-header {
    top: clamp(24px, 2.432vw, 35px);
    width: min(1388px, calc(100% - 40px));
    max-width: none;
    height: clamp(72px, 8.125vw, 117px);
    zoom: 1;
  }

  body.contact-page .header-logo {
    left: clamp(24px, 5.417vw, 78px);
    width: clamp(52px, 7.431vw, 107px);
    height: clamp(52px, 7.431vw, 107px);
  }

  body.contact-page .menu-toggle {
    right: clamp(32px, 8.403vw, 121px);
    width: clamp(48px, 4.931vw, 71px);
    height: clamp(40px, 3.611vw, 52px);
  }

  body.contact-page .contact-main {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(200px, 27.8vw, 400px) 24px clamp(100px, 10vw, 144px);
  }

  body.contact-page .contact-hero {
    position: static;
    width: 100%;
    height: auto;
    display: grid;
    place-items: center;
  }

  body.contact-page .contact-hero > div {
    width: min(100%, 1277px);
    min-height: 0;
  }

  body.contact-page .contact-hero h1 {
    font-size: clamp(72px, 10vw, 140px);
  }

  body.contact-page .contact-hero p {
    width: min(747px, calc(100% - 64px));
    min-height: 0;
    font-size: clamp(14px, 1.111vw, 16px);
  }

  body.contact-page .contact-form {
    position: static;
    width: min(1320px, calc(100% - clamp(48px, 8.333vw, 120px)));
    max-width: none;
    height: auto;
    margin: clamp(96px, 13.83vw, 199px) 0 0;
    padding: clamp(40px, 4.722vw, 68px) clamp(32px, 7.014vw, 101px) clamp(32px, 2.5vw, 36px);
    transform: none;
    border-radius: clamp(24px, 3.333vw, 48px);
  }

  body.contact-page .contact-form-grid {
    width: 100%;
    grid-template-rows: clamp(44px, 3.194vw, 46px) clamp(44px, 3.194vw, 46px) clamp(160px, 15.208vw, 219px);
    gap: clamp(18px, 2.014vw, 29px) clamp(16px, 1.667vw, 24px);
  }

  body.contact-page .contact-form input,
  body.contact-page .contact-form textarea {
    font-size: clamp(16px, 1.667vw, 24px);
  }

  body.contact-page .contact-form > button {
    width: min(586px, 60%);
    height: clamp(50px, 4.861vw, 70px);
    margin-top: clamp(24px, 2.708vw, 39px);
    font-size: clamp(16px, 1.667vw, 24px);
  }

  body.contact-page .contact-conversation {
    position: static;
    width: min(1227px, calc(100% - clamp(64px, 14.792vw, 213px)));
    margin-top: clamp(80px, 8.264vw, 119px);
    gap: clamp(48px, 8.958vw, 129px);
    transform: none;
  }

  body.contact-page .contact-conversation-copy {
    width: min(549px, 52%);
    flex: 1 1 auto;
  }

  body.contact-page .contact-conversation h2,
  body.contact-page .contact-conversation p {
    width: 100%;
    height: auto;
  }

  body.contact-page .contact-conversation h2 {
    font-size: clamp(30px, 2.778vw, 40px);
  }

  body.contact-page .contact-channel-list {
    flex: 0 0 auto;
    gap: clamp(24px, 3.542vw, 51px);
  }

  body.contact-page .contact-channel-list a,
  body.contact-page .contact-channel-list img {
    width: clamp(64px, 5.556vw, 80px);
    height: clamp(65px, 5.625vw, 81px);
  }

  body.contact-page .contact-stack > .site-footer {
    flex: 0 0 522px;
    width: 100%;
    height: 522px;
    margin: 0;
  }

  body.contact-page .footer-rule {
    width: min(1280px, 90vw);
  }
}

/* The conversation block stacks on portrait tablets so the copy and contact
   channels never compete for width. */
@media (min-width: 768px) and (max-width: 899px) {
  body.contact-page .contact-conversation {
    flex-direction: column-reverse;
    gap: 32px;
  }

  body.contact-page .contact-conversation-copy {
    width: min(549px, 100%);
    align-items: center;
    gap: 16px;
    text-align: center;
  }

  body.contact-page .contact-channel-list {
    gap: clamp(36px, 6vw, 51px);
  }

  body.contact-page .contact-channel-list a,
  body.contact-page .contact-channel-list img {
    width: 70px;
    height: 70px;
  }
}

/* Reuse the approved site's fluid footer proportions on tablets. */
@media (min-width: 768px) and (max-width: 1023px) {
  body.contact-page .site-footer {
    gap: 34px;
  }

  body.contact-page .footer-links {
    width: calc(100% - 68px);
    gap: 16px 20px;
    font-size: 14px;
  }

  body.contact-page .footer-main {
    width: calc(100% - 80px);
    gap: clamp(42px, 7vw, 72px);
  }

  body.contact-page .footer-copy {
    flex: 0 1 auto;
    width: calc(100% - 230px);
  }

  body.contact-page .footer-copy p {
    width: 100%;
  }

  body.contact-page .footer-identity {
    flex: 0 0 180px;
    width: 180px;
  }

  body.contact-page .footer-logo {
    width: 176px;
    height: 78px;
  }

  body.contact-page .socials {
    gap: 24px;
  }

  body.contact-page .legal {
    width: calc(100% - 80px);
  }
}

@media (min-width: 1024px) and (max-width: 1439px) {
  body.contact-page .site-footer {
    gap: 40px;
  }

  body.contact-page .footer-links {
    width: 970px;
    gap: 16px 63px;
    font-size: 20px;
  }

  body.contact-page .footer-main {
    width: 970px;
    gap: 196px;
  }

  body.contact-page .footer-copy {
    flex: 0 1 auto;
    width: 535px;
  }

  body.contact-page .footer-copy p {
    width: 484px;
  }

  body.contact-page .footer-identity {
    flex: 0 1 auto;
    width: 229px;
  }

  body.contact-page .footer-logo {
    width: 216px;
    height: 96px;
    aspect-ratio: auto;
  }

  body.contact-page .socials {
    gap: 32px;
  }

  body.contact-page .legal {
    width: 960px;
  }
}