/*
  CONTACT PAGE MODULE
  ===================
  Existing Contact rules remain in legacy.css during migration.
  Add future Contact-only rules here, scoped with body.contact-page.
*/

body.contact-page {
  --page-accent: var(--color-r3-red);
}


/* =========================================================
   POLICY MODAL — SHARED HOME / CONTACT
   Only the legal text scrolls. PDF cards and acknowledgement
   button stay fixed inside the dialog, in that order.
========================================================= */
.policy-modal__dialog {
  box-sizing: border-box;
  height: min(84dvh, 760px);
  max-height: calc(100dvh - 48px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  overflow: hidden;
}

.policy-modal__scroll {
  min-height: 0;
  max-height: none;
  padding-right: 18px;
  overflow-y: auto;
}

.policy-modal__pdfs {
  margin-top: 17px;
  flex: 0 0 auto;
}

.policy-modal__accept {
  align-self: start;
  margin-top: 18px;
}

@media (max-width: 1100px) {
  .policy-modal {
    padding: 14px;
  }

  .policy-modal__dialog {
    height: calc(100dvh - 28px);
    max-height: calc(100dvh - 28px);
    padding: 28px 24px;
  }

  .policy-modal__dialog h2 {
    margin-bottom: 16px;
    font-size: clamp(20px, 6vw, 28px);
  }

  .policy-modal__pdfs {
    margin-top: 13px;
  }

  .policy-modal__accept {
    width: 100%;
    min-width: 0;
    margin-top: 14px;
  }
}


/* =========================================================
   V100 — CONTACT TAB RHYTHM / LOCATION TAB RULE
========================================================= */
body.contact-page .office-switcher__item {
  position: relative;
  padding-bottom: 15px;
  transition: color .28s var(--ease-standard), transform .28s var(--ease-standard);
}

body.contact-page .office-switcher__item::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: currentColor;
  opacity: .82;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .34s var(--ease-standard);
}

body.contact-page .office-switcher__item:hover,
body.contact-page .office-switcher__item:focus-visible {
  transform: translateY(-2px);
}

body.contact-page .office-switcher__item:hover::after,
body.contact-page .office-switcher__item:focus-visible::after,
body.contact-page .office-switcher__item.is-active::after {
  transform: scaleX(1);
}

body.contact-page .contact-tab-stage {
  transition: opacity .24s var(--ease-standard), transform .42s var(--ease-standard);
}

body.contact-page .contact-tab-stage.is-transitioning {
  opacity: .34;
  transform: translate3d(18px, 0, 0);
}

/* CAREER uses the same tab switch, but keeps its original long horizontal flow. */
body.contact-page[data-contact-mode="career"] .contact-entry {
  display: flex !important;
  width: max-content !important;
  min-width: 100vw;
  flex: 0 0 auto !important;
  overflow: visible;
}

body.contact-page[data-contact-mode="career"] .contact-tab-stage {
  width: max-content !important;
  flex: 0 0 auto !important;
  overflow: visible;
}

body.contact-page[data-contact-mode="career"] .contact-view--career.career-flow {
  position: relative;
  inset: auto;
  width: max-content !important;
  min-width: 0;
  max-width: none !important;
  height: 100vh;
  padding: 0 var(--contact-page-pad) 0 0 !important;
  display: flex !important;
  align-items: center;
  gap: var(--career-gap);
  overflow: visible;
  background: transparent !important;
  background-image: none !important;
}

body.contact-page .contact-view--career.career-flow::before {
  content: none;
}

body.contact-page .contact-view--career .career-flow__copy,
body.contact-page .contact-view--career .career-flow__image,
body.contact-page .contact-view--career .career-flow__form {
  flex-shrink: 0;
}

body.contact-page .career-flow.is-tab-entering {
  animation: contactCareerTabEnter .56s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes contactCareerTabEnter {
  from { opacity: 0; transform: translate3d(26px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (max-width: 1100px) {
  body.contact-page .office-switcher__item {
    padding-bottom: 12px;
  }
}


/* V101 — all Contact view swaps share the same contained tab handoff. */
body.contact-page .contact-view.is-tab-entering {
  animation: contactViewTabEnter .56s cubic-bezier(.22, .61, .36, 1) both;
}

body.contact-page .career-flow.is-tab-entering > :not(.contact-subnav) {
  animation: contactCareerTabEnter .56s cubic-bezier(.22, .61, .36, 1) both;
}

body.contact-page .office-map-caption a {
  color: inherit;
  text-decoration: none;
  transition: color .24s var(--ease-standard);
}

body.contact-page .office-map-caption a:hover,
body.contact-page .office-map-caption a:focus-visible {
  color: var(--contact-red);
  outline: none;
}

@keyframes contactViewTabEnter {
  from { opacity: 0; transform: translate3d(26px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}


/* =========================================================
   V103_2 — SHARED POLICY MODAL REFERENCE
   Contact > Enquiry is the single visual source. Home uses the exact same
   DOM and this exact CSS; only legal copy scrolls.
========================================================= */
.policy-modal__dialog {
  width: min(100%, 720px) !important;
  height: min(84vh, 760px) !important;
  max-height: calc(100vh - 48px) !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.policy-modal__scroll {
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  padding-right: 18px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.policy-modal__pdfs {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 10px !important;
  margin: 18px 0 0 !important;
}

.policy-modal__pdf {
  min-height: 112px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  text-align: center !important;
}

.policy-modal__pdf-icon {
  width: 30px !important;
  height: 36px !important;
  flex: 0 0 auto !important;
}

.policy-modal__pdf-label {
  font-size: 9px !important;
  line-height: 1.42 !important;
}

.policy-modal__accept {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 48px !important;
  align-self: stretch !important;
  margin: 18px 0 0 !important;
}

/* Keep the Location address anchor alive across all three office tabs. */
body.contact-page .office-map-caption,
body.contact-page .office-map-caption a {
  display: block;
}

@media (max-width: 1100px) {
  .policy-modal {
    padding: 14px !important;
  }

  .policy-modal__dialog {
    height: min(88svh, 720px) !important;
    max-height: min(88svh, 720px) !important;
    padding: 24px !important;
  }

  .policy-modal__pdfs {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-top: 14px !important;
  }

  .policy-modal__pdf {
    min-height: 72px !important;
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    align-items: center !important;
    justify-content: initial !important;
    text-align: left !important;
  }

  .policy-modal__accept {
    margin-top: 14px !important;
  }
}