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

   Contact Architecture:
   01 General Inquiry
   02 Legal & Documents
   03 Career & HR

   Direction:
   Clear
   Trusted
   Conversion-focused
   Search-friendly
   ========================================================= */


/* =========================================================
   01. PAGE
   ========================================================= */

.page-contact {
  background:
    var(--bg-main);
}


/* =========================================================
   02. HERO
   ========================================================= */

.contact-hero {
  position:
    relative;

  min-height:
    calc(100svh - var(--navbar-height));

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  padding:
    clamp(90px, 8vw, 140px)
    var(--page-inline)
    clamp(80px, 9vw, 140px);

  overflow:
    hidden;
}


/* =========================================================
   03. HERO BACKGROUND
   ========================================================= */

.contact-hero::before {
  content:
    "";

  position:
    absolute;

  width:
    min(76vw, 1180px);

  aspect-ratio:
    1;

  right:
    -26%;

  top:
    -42%;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(0, 200, 255, 0.15),
      rgba(7, 92, 255, 0.07) 42%,
      transparent 72%
    );

  pointer-events:
    none;
}


.contact-hero::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  background-image:
    linear-gradient(
      rgba(7, 92, 255, 0.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(7, 92, 255, 0.035) 1px,
      transparent 1px
    );

  background-size:
    72px 72px;

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.65),
      transparent 84%
    );

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.65),
      transparent 84%
    );

  pointer-events:
    none;
}


/* =========================================================
   04. HERO TOP
   ========================================================= */

.contact-hero__top {
  position:
    relative;

  z-index:
    3;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    40px;
}


.contact-hero__eyebrow {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    12px;

  color:
    var(--text-muted);

  font-size:
    0.65rem;

  letter-spacing:
    0.09em;

  text-transform:
    uppercase;
}


.contact-hero__eyebrow::before {
  content:
    "";

  width:
    7px;

  height:
    7px;

  border-radius:
    50%;

  background:
    var(--abpe-blue);
}


/* =========================================================
   05. RESPONSE BADGE
   ========================================================= */

.contact-response-badge {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    10px;

  padding:
    9px 14px;

  border:
    1px solid var(--line);

  border-radius:
    999px;

  color:
    var(--text-muted);

  background:
    rgba(255, 255, 255, 0.72);

  font-size:
    0.57rem;

  font-weight:
    600;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);
}


.contact-response-badge::before {
  content:
    "";

  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    var(--abpe-cyan);

  box-shadow:
    0 0 14px
    rgba(0, 200, 255, 0.65);
}


/* =========================================================
   06. HERO MAIN
   ========================================================= */

.contact-hero__main {
  position:
    relative;

  z-index:
    3;

  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(300px, 0.34fr);

  align-items:
    end;

  gap:
    clamp(70px, 11vw, 190px);

  margin:
    clamp(120px, 14vw, 220px)
    0
    clamp(100px, 11vw, 170px);
}


/* =========================================================
   07. HERO TITLE
   ========================================================= */

.contact-hero__title {
  max-width:
    1450px;

  color:
    var(--text-heading);

  font-size:
    clamp(4.3rem, 9.3vw, 10.6rem);

  font-weight:
    400;

  line-height:
    0.81;

  letter-spacing:
    -0.078em;

  text-transform:
    uppercase;
}


.contact-hero__title span {
  display:
    block;
}


.contact-hero__title .indent {
  padding-left:
    clamp(90px, 15vw, 280px);
}


.contact-hero__title .accent {
  color:
    var(--abpe-blue);
}


/* =========================================================
   08. HERO SIDE COPY
   ========================================================= */

.contact-hero__side {
  padding-top:
    22px;

  border-top:
    1px solid var(--line);
}


.contact-hero__side-label {
  display:
    block;

  margin-bottom:
    34px;

  color:
    var(--abpe-blue);

  font-size:
    0.6rem;

  font-weight:
    600;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.contact-hero__side-copy {
  color:
    var(--text-muted);

  font-size:
    0.88rem;

  line-height:
    1.75;
}


/* =========================================================
   09. CONTACT CHANNEL STRIP
   ========================================================= */

.contact-channel-strip {
  position:
    relative;

  z-index:
    3;

  display:
    grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  border-top:
    1px solid var(--line);

  border-left:
    1px solid var(--line);
}


.contact-channel-link {
  position:
    relative;

  min-height:
    150px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  padding:
    22px;

  border-right:
    1px solid var(--line);

  border-bottom:
    1px solid var(--line);

  overflow:
    hidden;

  transition:
    background var(--transition);
}


.contact-channel-link::before {
  content:
    "";

  position:
    absolute;

  left:
    0;

  top:
    0;

  width:
    0;

  height:
    2px;

  background:
    linear-gradient(
      90deg,
      var(--abpe-blue),
      var(--abpe-cyan)
    );

  transition:
    width 450ms var(--ease-out);
}


.contact-channel-link:hover {
  background:
    var(--bg-white);
}


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


.contact-channel-link__index {
  color:
    var(--text-soft);

  font-size:
    0.58rem;
}


.contact-channel-link__bottom {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    20px;
}


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

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

  font-weight:
    400;

  line-height:
    1;

  letter-spacing:
    -0.04em;

  transition:
    color var(--transition),
    transform var(--transition);
}


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

  transition:
    color var(--transition),
    transform var(--transition);
}


.contact-channel-link:hover
.contact-channel-link__title {
  color:
    var(--abpe-blue);

  transform:
    translateX(5px);
}


.contact-channel-link:hover
.contact-channel-link__arrow {
  color:
    var(--abpe-blue);

  transform:
    rotate(45deg);
}


/* =========================================================
   10. CONTACT INTRO
   ========================================================= */

.contact-intro {
  padding:
    var(--section-space)
    var(--page-inline);

  background:
    var(--bg-white);
}


.contact-intro__grid {
  display:
    grid;

  grid-template-columns:
    minmax(190px, 0.28fr)
    minmax(0, 1fr);

  gap:
    clamp(70px, 11vw, 190px);
}


.contact-intro__title {
  max-width:
    1120px;

  color:
    var(--text-heading);

  font-size:
    clamp(3.2rem, 6vw, 7rem);

  font-weight:
    400;

  line-height:
    0.9;

  letter-spacing:
    -0.06em;
}


.contact-intro__title strong {
  color:
    var(--abpe-blue);

  font-weight:
    inherit;
}


.contact-intro__copy {
  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    clamp(30px, 6vw, 90px);

  margin-top:
    clamp(60px, 8vw, 110px);
}


.contact-intro__copy p {
  color:
    var(--text-muted);

  font-size:
    0.9rem;

  line-height:
    1.76;
}


/* =========================================================
   11. CONTACT DIRECTORY
   ========================================================= */

.contact-directory {
  padding:
    var(--section-space)
    var(--page-inline);

  background:
    var(--bg-main);
}


.contact-directory__header {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(270px, 0.38fr);

  gap:
    clamp(60px, 10vw, 160px);

  align-items:
    end;

  margin-bottom:
    clamp(80px, 10vw, 150px);
}


.contact-directory__title {
  max-width:
    1000px;

  margin-top:
    28px;

  color:
    var(--text-heading);

  font-size:
    clamp(3rem, 5.8vw, 6.8rem);

  font-weight:
    400;

  line-height:
    0.9;

  letter-spacing:
    -0.06em;
}


.contact-directory__copy {
  max-width:
    430px;

  color:
    var(--text-muted);

  font-size:
    0.86rem;

  line-height:
    1.72;
}


/* =========================================================
   12. DIRECTORY GRID
   ========================================================= */

.contact-directory__grid {
  display:
    grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  border-top:
    1px solid var(--line);

  border-left:
    1px solid var(--line);
}


.contact-directory-card {
  position:
    relative;

  min-height:
    370px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  padding:
    28px;

  border-right:
    1px solid var(--line);

  border-bottom:
    1px solid var(--line);

  transition:
    background var(--transition);
}


.contact-directory-card:hover {
  background:
    var(--bg-white);
}


.contact-directory-card__top {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    20px;
}


.contact-directory-card__index {
  color:
    var(--abpe-blue);

  font-size:
    0.62rem;

  font-weight:
    600;
}


.contact-directory-card__status {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  color:
    var(--text-muted);

  font-size:
    0.55rem;

  letter-spacing:
    0.06em;

  text-transform:
    uppercase;
}


.contact-directory-card__status::before {
  content:
    "";

  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    var(--abpe-cyan);
}


.contact-directory-card__title {
  color:
    var(--text-heading);

  font-size:
    clamp(2rem, 3.6vw, 4.2rem);

  font-weight:
    400;

  line-height:
    0.93;

  letter-spacing:
    -0.055em;
}


.contact-directory-card__copy {
  max-width:
    420px;

  margin-top:
    22px;

  color:
    var(--text-muted);

  font-size:
    0.79rem;

  line-height:
    1.7;
}


.contact-directory-card__email {
  display:
    inline-block;

  margin-top:
    28px;

  color:
    var(--abpe-blue);

  font-size:
    0.7rem;

  font-weight:
    500;

  word-break:
    break-word;
}


/* =========================================================
   13. FORMS AREA
   ========================================================= */

.contact-forms {
  padding:
    var(--section-space)
    var(--page-inline);

  background:
    var(--bg-white);
}


/* =========================================================
   14. SHARED FORM SECTION
   ========================================================= */

.contact-form-section {
  display:
    grid;

  grid-template-columns:
    minmax(280px, 0.34fr)
    minmax(0, 1fr);

  gap:
    clamp(70px, 11vw, 190px);

  padding:
    clamp(100px, 12vw, 180px)
    0;

  border-top:
    1px solid var(--line);
}


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

  border-top:
    0;
}


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


/* =========================================================
   15. FORM INTRO / STICKY
   ========================================================= */

.contact-form-section__intro {
  position:
    sticky;

  top:
    calc(var(--navbar-height) + 40px);

  align-self:
    start;
}


.contact-form-section__index {
  display:
    block;

  margin-bottom:
    26px;

  color:
    var(--abpe-blue);

  font-size:
    0.62rem;

  font-weight:
    600;

  letter-spacing:
    0.07em;

  text-transform:
    uppercase;
}


.contact-form-section__title {
  max-width:
    500px;

  color:
    var(--text-heading);

  font-size:
    clamp(2.7rem, 4.8vw, 5.6rem);

  font-weight:
    400;

  line-height:
    0.92;

  letter-spacing:
    -0.055em;
}


.contact-form-section__copy {
  max-width:
    410px;

  margin-top:
    30px;

  color:
    var(--text-muted);

  font-size:
    0.84rem;

  line-height:
    1.72;
}


.contact-form-section__email {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    9px;

  margin-top:
    34px;

  color:
    var(--text-heading);

  font-size:
    0.7rem;

  font-weight:
    500;

  word-break:
    break-word;
}


.contact-form-section__email::before {
  content:
    "";

  width:
    6px;

  height:
    6px;

  flex:
    0 0 auto;

  border-radius:
    50%;

  background:
    var(--abpe-cyan);
}


/* =========================================================
   16. FORM PANEL
   ========================================================= */

.contact-form {
  width:
    100%;
}


.contact-form__grid {
  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  column-gap:
    clamp(24px, 3vw, 46px);

  row-gap:
    34px;
}


/* =========================================================
   17. FORM FIELD
   ========================================================= */

.contact-field {
  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  gap:
    11px;
}


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


.contact-field label {
  color:
    var(--text-muted);

  font-size:
    0.6rem;

  font-weight:
    600;

  letter-spacing:
    0.07em;

  text-transform:
    uppercase;
}


.contact-field label span {
  color:
    var(--abpe-blue);
}


/* =========================================================
   18. INPUTS
   ========================================================= */

.contact-field input,
.contact-field select,
.contact-field textarea {
  width:
    100%;

  min-height:
    58px;

  padding:
    0 0 14px;

  border:
    0;

  border-bottom:
    1px solid var(--line);

  border-radius:
    0;

  outline:
    none;

  color:
    var(--text-heading);

  background:
    transparent;

  font:
    inherit;

  font-size:
    clamp(1rem, 1.45vw, 1.35rem);

  line-height:
    1.4;

  transition:
    border-color var(--transition);
}


.contact-field select {
  cursor:
    pointer;
}


.contact-field textarea {
  min-height:
    180px;

  padding-top:
    12px;

  resize:
    vertical;
}


.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color:
    var(--text-soft);
}


.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  border-bottom-color:
    var(--abpe-blue);
}


/* =========================================================
   19. ERROR STATES
   ========================================================= */

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


.contact-field__error {
  display:
    none;

  color:
    #b62929;

  font-size:
    0.62rem;

  line-height:
    1.5;
}


.contact-field.is-error
.contact-field__error {
  display:
    block;
}


/* =========================================================
   20. FORM HELP
   ========================================================= */

.contact-form__help {
  grid-column:
    1 / -1;

  display:
    flex;

  align-items:
    flex-start;

  gap:
    12px;

  padding:
    18px 0 0;

  color:
    var(--text-muted);

  font-size:
    0.67rem;

  line-height:
    1.65;
}


.contact-form__help::before {
  content:
    "";

  width:
    6px;

  height:
    6px;

  flex:
    0 0 auto;

  margin-top:
    6px;

  border-radius:
    50%;

  background:
    var(--abpe-cyan);
}


/* =========================================================
   21. CHECKBOX
   ========================================================= */

.contact-consent {
  grid-column:
    1 / -1;

  display:
    flex;

  align-items:
    flex-start;

  gap:
    12px;

  cursor:
    pointer;
}


.contact-consent input {
  width:
    17px;

  height:
    17px;

  flex:
    0 0 auto;

  margin-top:
    2px;

  accent-color:
    var(--abpe-blue);
}


.contact-consent span {
  max-width:
    720px;

  color:
    var(--text-muted);

  font-size:
    0.68rem;

  line-height:
    1.65;
}


/* =========================================================
   22. FORM ACTION
   ========================================================= */

.contact-form__footer {
  grid-column:
    1 / -1;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    30px;

  margin-top:
    20px;

  padding-top:
    30px;

  border-top:
    1px solid var(--line);
}


.contact-form__recipient {
  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;
}


.contact-form__recipient span {
  color:
    var(--text-soft);

  font-size:
    0.55rem;

  letter-spacing:
    0.07em;

  text-transform:
    uppercase;
}


.contact-form__recipient strong {
  color:
    var(--text-heading);

  font-size:
    0.7rem;

  font-weight:
    500;
}


/* =========================================================
   23. SUBMIT BUTTON
   ========================================================= */

.contact-submit {
  position:
    relative;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    18px;

  min-width:
    190px;

  min-height:
    54px;

  padding:
    0 22px;

  border:
    0;

  color:
    #ffffff;

  background:
    var(--abpe-blue);

  font:
    inherit;

  font-size:
    0.67rem;

  font-weight:
    600;

  letter-spacing:
    0.03em;

  cursor:
    pointer;

  transition:
    background var(--transition),
    transform var(--transition);
}


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

  transform:
    translateY(-2px);
}


.contact-submit:disabled {
  cursor:
    wait;

  opacity:
    0.58;

  transform:
    none;
}


/* =========================================================
   24. FORM FEEDBACK
   ========================================================= */

.contact-form__feedback {
  display:
    none;

  grid-column:
    1 / -1;

  padding:
    18px 20px;

  border:
    1px solid var(--line);

  color:
    var(--text-body);

  background:
    var(--bg-main);

  font-size:
    0.72rem;

  line-height:
    1.6;
}


.contact-form__feedback.is-visible {
  display:
    block;
}


.contact-form__feedback.is-success {
  border-color:
    rgba(0, 200, 255, 0.35);
}


.contact-form__feedback.is-error {
  border-color:
    rgba(211, 60, 60, 0.35);
}


/* =========================================================
   25. FORM VARIANT — GENERAL
   ========================================================= */

.contact-form-section--general
.contact-form-section__index {
  color:
    var(--abpe-blue);
}


/* =========================================================
   26. FORM VARIANT — LEGAL
   ========================================================= */

.contact-form-section--legal {
  position:
    relative;
}


.contact-form-section--legal
.contact-form-section__index {
  color:
    var(--abpe-blue);
}


/* =========================================================
   27. FORM VARIANT — HR
   ========================================================= */

.contact-form-section--hr
.contact-form-section__index {
  color:
    var(--abpe-blue);
}


/* =========================================================
   28. DIRECT CONTACT SECTION
   ========================================================= */

.contact-direct {
  padding:
    var(--section-space)
    var(--page-inline);

  background:
    var(--abpe-navy);

  overflow:
    hidden;
}


.contact-direct__header {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(280px, 0.38fr);

  gap:
    clamp(60px, 10vw, 160px);

  align-items:
    end;

  margin-bottom:
    clamp(80px, 10vw, 150px);
}


.contact-direct__title {
  max-width:
    1050px;

  margin-top:
    28px;

  color:
    #ffffff;

  font-size:
    clamp(3rem, 5.9vw, 6.9rem);

  font-weight:
    400;

  line-height:
    0.9;

  letter-spacing:
    -0.06em;
}


.contact-direct__copy {
  max-width:
    430px;

  color:
    rgba(255, 255, 255, 0.55);

  font-size:
    0.86rem;

  line-height:
    1.72;
}


/* =========================================================
   29. DIRECT EMAIL LIST
   ========================================================= */

.contact-direct__list {
  border-top:
    1px solid
    rgba(255, 255, 255, 0.15);
}


.contact-direct-item {
  display:
    grid;

  grid-template-columns:
    70px
    minmax(180px, 0.3fr)
    minmax(0, 1fr)
    auto;

  align-items:
    center;

  gap:
    30px;

  min-height:
    120px;

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.15);
}


.contact-direct-item__index {
  color:
    rgba(255, 255, 255, 0.35);

  font-size:
    0.62rem;
}


.contact-direct-item__department {
  color:
    rgba(255, 255, 255, 0.55);

  font-size:
    0.62rem;

  letter-spacing:
    0.06em;

  text-transform:
    uppercase;
}


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

  font-size:
    clamp(1.4rem, 2.8vw, 3.2rem);

  font-weight:
    400;

  line-height:
    1;

  letter-spacing:
    -0.04em;

  word-break:
    break-word;

  transition:
    color var(--transition),
    transform var(--transition);
}


.contact-direct-item__arrow {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    54px;

  height:
    54px;

  border:
    1px solid
    rgba(255, 255, 255, 0.18);

  border-radius:
    50%;

  color:
    rgba(255, 255, 255, 0.7);

  transition:
    color var(--transition),
    background var(--transition),
    border-color var(--transition),
    transform var(--transition);
}


.contact-direct-item:hover
.contact-direct-item__email {
  color:
    var(--abpe-cyan);

  transform:
    translateX(7px);
}


.contact-direct-item:hover
.contact-direct-item__arrow {
  color:
    var(--abpe-navy);

  background:
    var(--abpe-cyan);

  border-color:
    var(--abpe-cyan);

  transform:
    rotate(45deg);
}


/* =========================================================
   30. CONTACT TRUST
   ========================================================= */

.contact-trust {
  padding:
    clamp(80px, 9vw, 140px)
    var(--page-inline);

  background:
    var(--bg-soft);
}


.contact-trust__grid {
  display:
    grid;

  grid-template-columns:
    minmax(180px, 0.26fr)
    minmax(0, 1fr);

  gap:
    clamp(60px, 10vw, 160px);
}


.contact-trust__title {
  max-width:
    1000px;

  color:
    var(--text-heading);

  font-size:
    clamp(2.5rem, 4.8vw, 5.6rem);

  font-weight:
    400;

  line-height:
    0.92;

  letter-spacing:
    -0.055em;
}


.contact-trust__copy {
  max-width:
    750px;

  margin-top:
    32px;

  color:
    var(--text-muted);

  font-size:
    0.86rem;

  line-height:
    1.76;
}


/* =========================================================
   31. FINAL CTA
   ========================================================= */

.contact-cta {
  position:
    relative;

  padding:
    clamp(110px, 13vw, 210px)
    var(--page-inline);

  background:
    var(--abpe-blue);

  overflow:
    hidden;
}


.contact-cta::before {
  content:
    "";

  position:
    absolute;

  width:
    80vw;

  height:
    80vw;

  right:
    -30%;

  top:
    -50%;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(0, 200, 255, 0.42),
      rgba(255, 255, 255, 0.08) 38%,
      transparent 70%
    );

  pointer-events:
    none;
}


.contact-cta__top {
  position:
    relative;

  z-index:
    2;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    50px;

  margin-bottom:
    clamp(90px, 11vw, 170px);
}


.contact-cta__copy {
  max-width:
    450px;

  color:
    rgba(255, 255, 255, 0.72);

  font-size:
    0.84rem;

  line-height:
    1.75;
}


.contact-cta__main {
  position:
    relative;

  z-index:
    2;

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    60px;
}


.contact-cta__title {
  max-width:
    1400px;

  color:
    #ffffff;

  font-size:
    clamp(4rem, 8.8vw, 10rem);

  font-weight:
    400;

  line-height:
    0.81;

  letter-spacing:
    -0.078em;

  text-transform:
    uppercase;
}


.contact-cta__action {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    clamp(95px, 10vw, 155px);

  height:
    clamp(95px, 10vw, 155px);

  flex:
    0 0 auto;

  border-radius:
    50%;

  color:
    var(--abpe-navy);

  background:
    var(--abpe-cyan);

  transition:
    color var(--transition),
    background var(--transition),
    transform var(--transition);
}


.contact-cta__action:hover {
  color:
    #ffffff;

  background:
    var(--abpe-navy);

  transform:
    rotate(45deg)
    scale(1.04);
}


.contact-cta__action svg {
  width:
    34%;

  height:
    34%;
}


/* =========================================================
   32. HONEYPOT
   ========================================================= */

.contact-honeypot {
  position:
    absolute !important;

  width:
    1px !important;

  height:
    1px !important;

  overflow:
    hidden !important;

  clip:
    rect(0 0 0 0) !important;

  white-space:
    nowrap !important;

  clip-path:
    inset(50%) !important;
}


/* =========================================================
   33. ACCESSIBILITY
   ========================================================= */

.contact-submit:focus-visible,
.contact-channel-link:focus-visible,
.contact-direct-item:focus-visible,
.contact-cta__action:focus-visible {
  outline:
    2px solid var(--abpe-cyan);

  outline-offset:
    5px;
}