/* =========================================================
   ABPE WORKS — COMPANY PROFILE V3
   CONTACT RESPONSIVE
   ========================================================= */


/* =========================================================
   01. LARGE LAPTOP
   <= 1280px
   ========================================================= */

@media (max-width: 1280px) {

  .contact-hero__title {
    font-size:
      clamp(4rem, 8.6vw, 9rem);
  }

  .contact-hero__main {
    gap:
      100px;
  }

  .contact-directory-card {
    min-height:
      340px;
  }

  .contact-form-section {
    gap:
      100px;
  }

  .contact-direct-item {
    grid-template-columns:
      60px
      minmax(160px, 0.27fr)
      minmax(0, 1fr)
      auto;
  }

}


/* =========================================================
   02. TABLET / SMALL LAPTOP
   <= 1024px
   ========================================================= */

@media (max-width: 1024px) {

  /* =======================================================
     HERO
     ======================================================= */

  .contact-hero {
    min-height:
      auto;

    padding-top:
      110px;
  }

  .contact-hero__main {
    grid-template-columns:
      1fr;

    gap:
      60px;

    margin:
      110px 0 100px;
  }

  .contact-hero__title {
    font-size:
      clamp(3.8rem, 10vw, 7.4rem);
  }

  .contact-hero__title .indent {
    padding-left:
      80px;
  }

  .contact-hero__side {
    width:
      min(100%, 560px);

    margin-left:
      auto;
  }


  /* =======================================================
     CHANNEL STRIP
     ======================================================= */

  .contact-channel-strip {
    grid-template-columns:
      1fr;
  }

  .contact-channel-link {
    min-height:
      125px;
  }


  /* =======================================================
     INTRO
     ======================================================= */

  .contact-intro__grid {
    grid-template-columns:
      1fr;

    gap:
      45px;
  }


  /* =======================================================
     DIRECTORY
     ======================================================= */

  .contact-directory__header {
    grid-template-columns:
      1fr;

    gap:
      30px;
  }

  .contact-directory__copy {
    max-width:
      560px;
  }

  .contact-directory__grid {
    grid-template-columns:
      1fr;
  }

  .contact-directory-card {
    min-height:
      300px;
  }


  /* =======================================================
     FORMS
     ======================================================= */

  .contact-form-section {
    grid-template-columns:
      1fr;

    gap:
      60px;
  }

  .contact-form-section__intro {
    position:
      static;
  }

  .contact-form-section__copy {
    max-width:
      560px;
  }


  /* =======================================================
     DIRECT CONTACT
     ======================================================= */

  .contact-direct__header {
    grid-template-columns:
      1fr;

    gap:
      30px;
  }

  .contact-direct__copy {
    max-width:
      560px;
  }

  .contact-direct-item {
    grid-template-columns:
      48px
      minmax(130px, 0.28fr)
      minmax(0, 1fr)
      54px;

    gap:
      22px;
  }


  /* =======================================================
     TRUST
     ======================================================= */

  .contact-trust__grid {
    grid-template-columns:
      1fr;

    gap:
      35px;
  }


  /* =======================================================
     CTA
     ======================================================= */

  .contact-cta__main {
    flex-direction:
      column;

    align-items:
      flex-start;
  }

}


/* =========================================================
   03. TABLET PORTRAIT / MOBILE
   <= 768px
   ========================================================= */

@media (max-width: 768px) {

  /* =======================================================
     HERO
     ======================================================= */

  .contact-hero {
    padding:
      90px 20px 80px;
  }

  .contact-hero::before {
    width:
      125vw;

    right:
      -58%;

    top:
      -10%;
  }

  .contact-hero::after {
    background-size:
      48px 48px;
  }

  .contact-hero__top {
    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      24px;
  }

  .contact-hero__main {
    gap:
      48px;

    margin:
      80px 0 70px;
  }

  .contact-hero__title {
    font-size:
      clamp(3.1rem, 14vw, 6rem);

    line-height:
      0.84;
  }

  .contact-hero__title .indent {
    padding-left:
      clamp(28px, 10vw, 70px);
  }

  .contact-hero__side {
    width:
      100%;

    margin-left:
      0;
  }


  /* =======================================================
     CHANNEL STRIP
     ======================================================= */

  .contact-channel-link {
    min-height:
      110px;

    padding:
      20px;
  }

  .contact-channel-link__title {
    font-size:
      clamp(1.35rem, 6vw, 2rem);
  }


  /* =======================================================
     INTRO
     ======================================================= */

  .contact-intro {
    padding:
      100px 20px;
  }

  .contact-intro__title {
    font-size:
      clamp(2.8rem, 11vw, 5rem);
  }

  .contact-intro__copy {
    grid-template-columns:
      1fr;

    gap:
      24px;

    margin-top:
      50px;
  }


  /* =======================================================
     DIRECTORY
     ======================================================= */

  .contact-directory {
    padding:
      100px 20px;
  }

  .contact-directory__header {
    margin-bottom:
      60px;
  }

  .contact-directory__title {
    font-size:
      clamp(2.8rem, 11vw, 5rem);
  }

  .contact-directory-card {
    min-height:
      260px;

    padding:
      24px 22px;
  }

  .contact-directory-card__title {
    font-size:
      clamp(2rem, 9vw, 3.6rem);
  }


  /* =======================================================
     FORMS
     ======================================================= */

  .contact-forms {
    padding:
      100px 20px;
  }

  .contact-form-section {
    gap:
      48px;

    padding:
      100px 0;
  }

  .contact-form-section:first-child {
    padding-top:
      0;
  }

  .contact-form-section:last-child {
    padding-bottom:
      0;
  }

  .contact-form-section__title {
    font-size:
      clamp(2.7rem, 11vw, 5rem);
  }

  .contact-form__grid {
    grid-template-columns:
      1fr;

    row-gap:
      30px;
  }

  .contact-field,
  .contact-field--full {
    grid-column:
      1;
  }

  .contact-form__help,
  .contact-consent,
  .contact-form__footer,
  .contact-form__feedback {
    grid-column:
      1;
  }

  .contact-form__footer {
    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      24px;
  }

  .contact-submit {
    width:
      100%;

    min-width:
      0;
  }


  /* =======================================================
     INPUT
     ======================================================= */

  .contact-field input,
  .contact-field select,
  .contact-field textarea {
    font-size:
      1rem;
  }


  /* =======================================================
     DIRECT CONTACT
     ======================================================= */

  .contact-direct {
    padding:
      100px 20px;
  }

  .contact-direct__header {
    margin-bottom:
      60px;
  }

  .contact-direct__title {
    font-size:
      clamp(2.8rem, 11vw, 5rem);
  }

  .contact-direct-item {
    grid-template-columns:
      34px
      minmax(0, 1fr)
      48px;

    gap:
      16px;

    min-height:
      auto;

    padding:
      28px 0;
  }

  .contact-direct-item__index {
    grid-column:
      1;

    grid-row:
      1 / 3;
  }

  .contact-direct-item__department {
    grid-column:
      2;

    grid-row:
      1;
  }

  .contact-direct-item__email {
    grid-column:
      2;

    grid-row:
      2;

    font-size:
      clamp(1.2rem, 5vw, 2rem);
  }

  .contact-direct-item__arrow {
    grid-column:
      3;

    grid-row:
      1 / 3;

    width:
      48px;

    height:
      48px;
  }


  /* =======================================================
     TRUST
     ======================================================= */

  .contact-trust {
    padding:
      80px 20px;
  }

  .contact-trust__title {
    font-size:
      clamp(2.4rem, 10vw, 4.5rem);
  }


  /* =======================================================
     CTA
     ======================================================= */

  .contact-cta {
    padding:
      100px 20px;
  }

  .contact-cta::before {
    width:
      130vw;

    height:
      130vw;

    right:
      -52%;

    top:
      5%;
  }

  .contact-cta__top {
    flex-direction:
      column;

    gap:
      24px;

    margin-bottom:
      80px;
  }

  .contact-cta__main {
    gap:
      45px;
  }

  .contact-cta__title {
    font-size:
      clamp(3.5rem, 15vw, 6.5rem);
  }

  .contact-cta__action {
    width:
      90px;

    height:
      90px;
  }

}


/* =========================================================
   04. SMALL MOBILE
   <= 560px
   ========================================================= */

@media (max-width: 560px) {

  /* =======================================================
     HERO
     ======================================================= */

  .contact-hero {
    padding:
      75px 16px 65px;
  }

  .contact-response-badge {
    padding:
      8px 12px;

    font-size:
      0.52rem;
  }

  .contact-hero__main {
    margin:
      65px 0;
  }

  .contact-hero__title {
    font-size:
      clamp(2.8rem, 14vw, 4.8rem);
  }

  .contact-hero__title .indent {
    padding-left:
      22px;
  }

  .contact-hero__side-label {
    margin-bottom:
      26px;
  }

  .contact-hero__side-copy {
    font-size:
      0.82rem;
  }


  /* =======================================================
     CHANNELS
     ======================================================= */

  .contact-channel-link {
    min-height:
      100px;

    padding:
      18px;
  }

  .contact-channel-link__index {
    font-size:
      0.54rem;
  }

  .contact-channel-link__title {
    font-size:
      1.25rem;
  }


  /* =======================================================
     INTRO
     ======================================================= */

  .contact-intro {
    padding:
      80px 16px;
  }

  .contact-intro__title {
    font-size:
      clamp(2.5rem, 12vw, 4.4rem);
  }

  .contact-intro__copy {
    margin-top:
      42px;
  }

  .contact-intro__copy p {
    font-size:
      0.84rem;
  }


  /* =======================================================
     DIRECTORY
     ======================================================= */

  .contact-directory {
    padding:
      80px 16px;
  }

  .contact-directory__header {
    margin-bottom:
      48px;
  }

  .contact-directory__title {
    font-size:
      clamp(2.5rem, 12vw, 4.4rem);
  }

  .contact-directory__copy {
    font-size:
      0.82rem;
  }

  .contact-directory-card {
    min-height:
      240px;

    padding:
      20px 18px;
  }

  .contact-directory-card__title {
    font-size:
      clamp(1.8rem, 9vw, 3rem);
  }

  .contact-directory-card__copy {
    font-size:
      0.76rem;
  }

  .contact-directory-card__email {
    font-size:
      0.66rem;
  }


  /* =======================================================
     FORMS
     ======================================================= */

  .contact-forms {
    padding:
      80px 16px;
  }

  .contact-form-section {
    padding:
      80px 0;
  }

  .contact-form-section__index {
    margin-bottom:
      22px;
  }

  .contact-form-section__title {
    font-size:
      clamp(2.5rem, 12vw, 4.4rem);
  }

  .contact-form-section__copy {
    margin-top:
      26px;

    font-size:
      0.82rem;
  }

  .contact-form-section__email {
    margin-top:
      28px;

    font-size:
      0.66rem;
  }

  .contact-form__grid {
    row-gap:
      26px;
  }

  .contact-field {
    gap:
      9px;
  }

  .contact-field label {
    font-size:
      0.56rem;
  }

  .contact-field input,
  .contact-field select {
    min-height:
      54px;
  }

  .contact-field textarea {
    min-height:
      160px;
  }

  .contact-form__help {
    font-size:
      0.63rem;
  }

  .contact-consent span {
    font-size:
      0.64rem;
  }

  .contact-form__recipient strong {
    font-size:
      0.66rem;

    word-break:
      break-word;
  }

  .contact-submit {
    min-height:
      52px;
  }


  /* =======================================================
     DIRECT CONTACT
     ======================================================= */

  .contact-direct {
    padding:
      80px 16px;
  }

  .contact-direct__header {
    margin-bottom:
      48px;
  }

  .contact-direct__title {
    font-size:
      clamp(2.5rem, 12vw, 4.4rem);
  }

  .contact-direct__copy {
    font-size:
      0.82rem;
  }

  .contact-direct-item {
    grid-template-columns:
      26px
      minmax(0, 1fr)
      42px;

    gap:
      12px;

    padding:
      24px 0;
  }

  .contact-direct-item__department {
    font-size:
      0.56rem;
  }

  .contact-direct-item__email {
    font-size:
      clamp(1rem, 5vw, 1.45rem);
  }

  .contact-direct-item__arrow {
    width:
      42px;

    height:
      42px;
  }


  /* =======================================================
     TRUST
     ======================================================= */

  .contact-trust {
    padding:
      70px 16px;
  }

  .contact-trust__grid {
    gap:
      28px;
  }

  .contact-trust__title {
    font-size:
      clamp(2.2rem, 10vw, 4rem);
  }

  .contact-trust__copy {
    font-size:
      0.82rem;
  }


  /* =======================================================
     CTA
     ======================================================= */

  .contact-cta {
    padding:
      80px 16px;
  }

  .contact-cta__top {
    margin-bottom:
      65px;
  }

  .contact-cta__copy {
    font-size:
      0.78rem;
  }

  .contact-cta__title {
    font-size:
      clamp(3rem, 15vw, 5rem);
  }

  .contact-cta__action {
    width:
      78px;

    height:
      78px;
  }

}


/* =========================================================
   05. VERY SMALL MOBILE
   <= 390px
   ========================================================= */

@media (max-width: 390px) {

  .contact-hero__title {
    font-size:
      2.65rem;
  }

  .contact-hero__title .indent {
    padding-left:
      14px;
  }

  .contact-directory-card__top {
    flex-direction:
      column;

    gap:
      8px;
  }

  .contact-form-section__title {
    font-size:
      2.4rem;
  }

  .contact-direct-item {
    grid-template-columns:
      22px
      minmax(0, 1fr);
  }

  .contact-direct-item__index {
    grid-column:
      1;

    grid-row:
      1 / 3;
  }

  .contact-direct-item__department {
    grid-column:
      2;

    grid-row:
      1;
  }

  .contact-direct-item__email {
    grid-column:
      2;

    grid-row:
      2;
  }

  .contact-direct-item__arrow {
    display:
      none;
  }

}


/* =========================================================
   06. TOUCH DEVICES
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

  .contact-channel-link:hover {
    background:
      transparent;
  }

  .contact-channel-link:hover::before {
    width:
      0;
  }

  .contact-channel-link:hover
  .contact-channel-link__title {
    color:
      var(--text-heading);

    transform:
      none;
  }

  .contact-channel-link:hover
  .contact-channel-link__arrow {
    color:
      var(--text-muted);

    transform:
      none;
  }

  .contact-directory-card:hover {
    background:
      transparent;
  }

  .contact-submit:hover {
    background:
      var(--abpe-blue);

    transform:
      none;
  }

  .contact-direct-item:hover
  .contact-direct-item__email {
    color:
      #ffffff;

    transform:
      none;
  }

  .contact-direct-item:hover
  .contact-direct-item__arrow {
    color:
      rgba(255, 255, 255, 0.7);

    background:
      transparent;

    border-color:
      rgba(255, 255, 255, 0.18);

    transform:
      none;
  }

  .contact-cta__action:hover {
    color:
      var(--abpe-navy);

    background:
      var(--abpe-cyan);

    transform:
      none;
  }

}


/* =========================================================
   07. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .contact-channel-link,
  .contact-channel-link::before,
  .contact-channel-link__title,
  .contact-channel-link__arrow,
  .contact-directory-card,
  .contact-field input,
  .contact-field select,
  .contact-field textarea,
  .contact-submit,
  .contact-direct-item__email,
  .contact-direct-item__arrow,
  .contact-cta__action {
    transition:
      none;
  }

}


/* =========================================================
   08. LANDSCAPE MOBILE
   ========================================================= */

@media (
  max-width: 900px
) and (
  max-height: 520px
) and (
  orientation: landscape
) {

  .contact-hero {
    padding-top:
      80px;
  }

  .contact-hero__main {
    margin-top:
      65px;
  }

  .contact-hero__title {
    font-size:
      clamp(3rem, 9vw, 5rem);
  }

}


/* =========================================================
   09. FORM AUTOFILL
   ========================================================= */

.contact-field input:-webkit-autofill,
.contact-field input:-webkit-autofill:hover,
.contact-field input:-webkit-autofill:focus,
.contact-field textarea:-webkit-autofill,
.contact-field select:-webkit-autofill {
  -webkit-text-fill-color:
    var(--text-heading);

  -webkit-box-shadow:
    0 0 0 1000px
    var(--bg-white)
    inset;

  transition:
    background-color 9999s ease-in-out 0s;
}


/* =========================================================
   10. FORM INVALID FALLBACK
   ========================================================= */

.contact-field input:user-invalid,
.contact-field select:user-invalid,
.contact-field textarea:user-invalid {
  border-bottom-color:
    #d33c3c;
}


/* =========================================================
   11. PRINT
   Contact page is still readable if printed.
   Forms are hidden because they are not useful on paper.
   ========================================================= */

@media print {

  .contact-form {
    display:
      none;
  }

  .contact-submit,
  .contact-cta__action {
    display:
      none;
  }

  .contact-direct {
    color:
      #000000;

    background:
      #ffffff;
  }

  .contact-direct__title,
  .contact-direct-item__email {
    color:
      #000000;
  }

  .contact-direct__copy,
  .contact-direct-item__department {
    color:
      #444444;
  }

}