/* =========================================================
  AFOND CONTACT — UNIQUE VARIABLES
========================================================= */

:root {
 --afc-black: #0b0d0e;
 --afc-black-2: #151718;
 --afc-charcoal: #25282a;
 --afc-grey: #777b7e;
 --afc-light: #f3f4f4;
 --afc-border: #dedfe0;
 --afc-white: #ffffff;

 --afc-heading-font: "Montserrat", sans-serif;
 --afc-body-font: "Roboto", sans-serif;
}


/* =========================================================
  BASE
========================================================= */

.afc-contact-page {
 width: 100%;
 overflow: hidden;
 background: var(--afc-white);
 color: var(--afc-black);
 font-family: var(--afc-body-font);
}

.afc-contact-container {
 width: min(1280px, calc(100% - 60px));
 margin: 0 auto;
}


/* =========================================================
  HERO IMAGE + INTRO
========================================================= */

.afc-contact-hero {
 padding: 30px 0 0;
}

.afc-contact-hero-image {
 position: relative;
 height: 600px;
 overflow: hidden;
 background: #ddd;
}

.afc-contact-hero-image img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
 transform: scale(1.08);
}

.afc-contact-hero-image::after {
 content: "";
 position: absolute;
 inset: 0;
 background:
   linear-gradient(
     90deg,
     rgba(0,0,0,.58) 0%,
     rgba(0,0,0,.20) 45%,
     rgba(0,0,0,.05) 100%
   );
}

.afc-contact-hero-content {
 position: absolute;
 z-index: 2;
 left: 8%;
 bottom: 75px;
 max-width: 760px;
 color: #fff;
}

.afc-contact-kicker {
 display: flex;
 align-items: center;
 gap: 14px;
 margin-bottom: 22px;

 font-family: var(--afc-heading-font);
 font-size: 12px;
 font-weight: 700;
 letter-spacing: 3px;
 text-transform: uppercase;
}

.afc-contact-kicker::before {
 content: "";
 width: 42px;
 height: 2px;
 background: #fff;
}

.afc-contact-hero-title {
 margin: 0;
 font-family: var(--afc-heading-font);
 font-size: clamp(48px, 7vw, 94px);
 line-height: .94;
 letter-spacing: -4px;
 font-weight: 800;
 color: #fff;
}

.afc-contact-hero-title span {
 display: block;
 color: rgba(255,255,255,.62);
}

.afc-contact-hero-text {
 max-width: 650px;
 margin: 28px 0 0;

 font-size: 17px;
 line-height: 1.7;
 color: rgba(255,255,255,.86);
}


/* =========================================================
  CONTACT STRIP
========================================================= */

.afc-contact-strip {
 position: relative;
 margin-top: -1px;
 background: var(--afc-black);
 color: #fff;
}

.afc-contact-strip-inner {
 display: grid;
 grid-template-columns: 1fr auto 1fr;
 align-items: center;
 min-height: 145px;
}

.afc-contact-strip-item {
 padding: 30px 45px;
}

.afc-contact-strip-item:first-child {
 border-right: 1px solid rgba(255,255,255,.14);
}

.afc-contact-strip-item:last-child {
 border-left: 1px solid rgba(255,255,255,.14);
}

.afc-contact-strip-label {
 display: block;
 margin-bottom: 9px;

 font-family: var(--afc-heading-font);
 font-size: 11px;
 font-weight: 700;
 letter-spacing: 2px;
 text-transform: uppercase;
 color: rgba(255,255,255,.45);
}

.afc-contact-strip-number {
 font-family: var(--afc-heading-font);
 font-size: 24px;
 font-weight: 700;
 color: #fff;
 text-decoration: none;
}

.afc-contact-strip-number:hover {
 color: #fff;
}

.afc-contact-strip-center {
 width: 62px;
 height: 62px;

 display: flex;
 align-items: center;
 justify-content: center;

 border: 1px solid rgba(255,255,255,.3);
 border-radius: 50%;

 font-family: var(--afc-heading-font);
 font-size: 20px;
 font-weight: 700;
}


/* =========================================================
  FORM SECTION
========================================================= */

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

.afc-contact-form-layout {
 display: grid;
 grid-template-columns: .85fr 1.15fr;
 gap: 100px;
 align-items: start;
}


/* LEFT INTRO */

.afc-contact-form-intro {
 position: sticky;
 top: 100px;
}

.afc-contact-section-number {
 display: block;
 margin-bottom: 20px;

 font-family: var(--afc-heading-font);
 font-size: 12px;
 font-weight: 700;
 letter-spacing: 3px;
 color: var(--afc-grey);
}

.afc-contact-form-heading {
 margin: 0;

 font-family: var(--afc-heading-font);
 font-size: clamp(40px, 5vw, 65px);
 line-height: 1;
 letter-spacing: -3px;
 font-weight: 800;
}

.afc-contact-form-description {
 max-width: 430px;
 margin-top: 28px;

 font-size: 17px;
 line-height: 1.75;
 color: var(--afc-grey);
}


/* FORM */

.afc-contact-form-box {
 padding: 55px;
 background: var(--afc-light);
}

.afc-contact-form-top {
 display: flex;
 justify-content: space-between;
 align-items: end;
 gap: 30px;
 margin-bottom: 50px;
}

.afc-contact-form-title {
 margin: 0;

 font-family: var(--afc-heading-font);
 font-size: 28px;
 font-weight: 700;
}

.afc-contact-form-arrow {
 font-size: 35px;
 line-height: 1;
}


.afc-contact-field {
 margin-bottom: 35px;
}

.afc-contact-field label {
 display: block;
 margin-bottom: 12px;

 font-family: var(--afc-heading-font);
 font-size: 12px;
 font-weight: 700;
 letter-spacing: 1.5px;
 text-transform: uppercase;
}

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

 padding: 14px 0;

 border: 0;
 border-bottom: 1px solid #c8cacc;
 outline: none;

 background: transparent;

 font-family: var(--afc-body-font);
 font-size: 17px;
 color: var(--afc-black);

 transition: .3s ease;
}

.afc-contact-field textarea {
 min-height: 120px;
 resize: vertical;
}

.afc-contact-field input:focus,
.afc-contact-field textarea:focus {
 border-bottom-color: var(--afc-black);
}


.afc-contact-submit {
 width: 100%;

 display: flex;
 justify-content: space-between;
 align-items: center;

 padding: 20px 24px;

 border: 1px solid var(--afc-black);
 background: var(--afc-black);
 color: #fff;

 font-family: var(--afc-heading-font);
 font-size: 13px;
 font-weight: 700;
 letter-spacing: 1.5px;
 text-transform: uppercase;

 cursor: pointer;
 transition: .35s ease;
}

.afc-contact-submit-arrow {
 font-size: 22px;
 transition: transform .35s ease;
}

.afc-contact-submit:hover {
 background: transparent;
 color: var(--afc-black);
}

.afc-contact-submit:hover .afc-contact-submit-arrow {
 transform: translateX(8px);
}


/* =========================================================
  OFFICE SECTION
========================================================= */

.afc-contact-office {
 padding: 110px 0;
 background: var(--afc-black);
 color: #fff;
}

.afc-contact-office-heading-row {
 display: flex;
 justify-content: space-between;
 align-items: end;
 gap: 50px;
 margin-bottom: 70px;
}

.afc-contact-office-kicker {
 margin-bottom: 18px;

 font-family: var(--afc-heading-font);
 font-size: 12px;
 font-weight: 700;
 letter-spacing: 3px;
 text-transform: uppercase;

 color: rgba(255,255,255,.45);
}

.afc-contact-office-title {
 margin: 0;

 font-family: var(--afc-heading-font);
 font-size: clamp(43px, 6vw, 78px);
 line-height: .95;
 letter-spacing: -4px;
 font-weight: 800;
 color: #fff;
}

.afc-contact-office-side {
 max-width: 350px;

 font-size: 16px;
 line-height: 1.7;
 color: rgba(255,255,255,.55);
}


/* OFFICE GRID */

.afc-contact-office-grid {
 display: grid;
 grid-template-columns: 1.4fr .8fr .8fr;
 border-top: 1px solid rgba(255,255,255,.16);
 border-left: 1px solid rgba(255,255,255,.16);
}

.afc-contact-office-card {
 min-height: 280px;
 padding: 35px;

 border-right: 1px solid rgba(255,255,255,.16);
 border-bottom: 1px solid rgba(255,255,255,.16);

 transition: .4s ease;
}

.afc-contact-office-card:hover {
 background: #17191a;
}

.afc-contact-office-card-large {
 grid-row: span 2;
}

.afc-contact-office-label {
 display: block;
 margin-bottom: 30px;

 font-family: var(--afc-heading-font);
 font-size: 11px;
 font-weight: 700;
 letter-spacing: 2px;
 text-transform: uppercase;

 color: rgba(255,255,255,.38);
}

.afc-contact-office-value {
 font-size: 17px;
 line-height: 1.75;
 color: rgba(255,255,255,.85);
}

.afc-contact-office-value a {
 display: block;
 margin-bottom: 8px;

 color: #fff;
 text-decoration: none;

 transition: .3s ease;
}

.afc-contact-office-value a:hover {
 opacity: .6;
}


/* =========================================================
  MAP
========================================================= */

.afc-contact-map-section {
 padding: 0;
 background: var(--afc-black);
}

.afc-contact-map {
 position: relative;
 height: 560px;
 overflow: hidden;
}

.afc-contact-map iframe {
 width: 100%;
 height: 100%;
 border: 0;

 filter: grayscale(100%) contrast(1.05);
}

.afc-contact-map-card {
 position: absolute;
 left: 6%;
 bottom: 45px;

 width: min(430px, calc(100% - 40px));
 padding: 30px;

 background: #fff;
 color: var(--afc-black);
}

.afc-contact-map-label {
 display: block;
 margin-bottom: 15px;

 font-family: var(--afc-heading-font);
 font-size: 11px;
 font-weight: 700;
 letter-spacing: 2px;
 text-transform: uppercase;

 color: var(--afc-grey);
}

.afc-contact-map-address {
 margin: 0;

 font-size: 15px;
 line-height: 1.7;
}


/* =========================================================
  RESPONSIVE
========================================================= */

@media (max-width: 991px) {

 .afc-contact-container {
   width: min(100% - 40px, 1280px);
 }

 .afc-contact-hero-image {
   height: 540px;
 }

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

 .afc-contact-strip-center {
   display: none;
 }

 .afc-contact-strip-item:last-child {
   border-left: 0;
 }

 .afc-contact-form-layout {
   grid-template-columns: 1fr;
   gap: 60px;
 }

 .afc-contact-form-intro {
   position: static;
 }

 .afc-contact-form-description {
   max-width: 650px;
 }

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

 .afc-contact-office-card-large {
   grid-row: auto;
   grid-column: span 2;
 }

}


@media (max-width: 767px) {

 .afc-contact-container {
   width: min(100% - 28px, 1280px);
 }

 .afc-contact-hero {
   padding-top: 14px;
 }

 .afc-contact-hero-image {
   height: 620px;
 }

 .afc-contact-hero-content {
   left: 25px;
   right: 25px;
   bottom: 45px;
 }

 .afc-contact-hero-title {
   font-size: clamp(45px, 13vw, 65px);
   letter-spacing: -2.5px;
 }

 .afc-contact-hero-text {
   font-size: 15px;
 }

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

 .afc-contact-strip-item {
   padding: 28px 25px;
 }

 .afc-contact-strip-item:first-child {
   border-right: 0;
   border-bottom: 1px solid rgba(255,255,255,.14);
 }

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

 .afc-contact-form-heading {
   font-size: 45px;
   letter-spacing: -2px;
 }

 .afc-contact-form-box {
   padding: 30px 22px;
 }

 .afc-contact-form-top {
   margin-bottom: 35px;
 }

 .afc-contact-office {
   padding: 75px 0;
 }

 .afc-contact-office-heading-row {
   display: block;
   margin-bottom: 45px;
 }

 .afc-contact-office-title {
   font-size: 48px;
   letter-spacing: -2px;
 }

 .afc-contact-office-side {
   margin-top: 25px;
 }

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

 .afc-contact-office-card-large {
   grid-column: auto;
 }

 .afc-contact-office-card {
   min-height: auto;
   padding: 28px 24px;
 }

 .afc-contact-map {
   height: 500px;
 }

 .afc-contact-map-card {
   left: 14px;
   bottom: 14px;
   width: calc(100% - 28px);
 }

}


@media (max-width: 480px) {

 .afc-contact-hero-image {
   height: 590px;
 }

 .afc-contact-hero-title {
   font-size: 43px;
 }

 .afc-contact-number {
   font-size: 21px;
 }

 .afc-contact-map {
   height: 470px;
 }

}

    /* =========================================================
   AFOND CONTACT — INTERACTION FIXES
   Put this CSS AFTER all other contact CSS
========================================================= */


/* =========================================================
   FORM BUTTON
========================================================= */

.afc-contact-page .afc-contact-submit {
    position: relative !important;
    display: flex !important;
    width: 100% !important;

    align-items: center !important;
    justify-content: space-between !important;

    padding: 20px 24px !important;

    border: 1px solid #0b0d0e !important;
    border-radius: 0 !important;

    background: #0b0d0e !important;
    color: #ffffff !important;

    font-family: "Montserrat", sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;

    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;

    cursor: pointer !important;

    transition:
        background-color .35s ease,
        color .35s ease,
        border-color .35s ease,
        transform .35s ease !important;

    appearance: none !important;
    -webkit-appearance: none !important;
}


/* Button hover */

.afc-contact-page .afc-contact-submit:hover {
    background: #ffffff !important;
    color: #0b0d0e !important;
    border-color: #0b0d0e !important;

    transform: translateY(-3px) !important;
}


/* Button active */

.afc-contact-page .afc-contact-submit:active {
    transform: translateY(0) !important;
}


/* Button arrow */

.afc-contact-page
.afc-contact-submit
.afc-contact-submit-arrow {

    display: inline-block !important;

    font-size: 22px !important;
    line-height: 1 !important;

    transition:
        transform .35s ease !important;
}


/* Arrow hover */

.afc-contact-page
.afc-contact-submit:hover
.afc-contact-submit-arrow {

    transform: translateX(9px) !important;
}


/* =========================================================
   OFFICE CARD HOVER
========================================================= */

.afc-contact-page .afc-contact-office-card {

    position: relative;

    overflow: hidden;

    cursor: default;

    transition:
        background-color .45s ease,
        transform .45s ease !important;
}


.afc-contact-page .afc-contact-office-card::before {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 3px;

    background: #ffffff;

    transform: scaleX(0);
    transform-origin: left;

    transition: transform .45s ease;

}


.afc-contact-page .afc-contact-office-card:hover {

    background: #191b1c !important;

    transform: translateY(-4px) !important;
}


.afc-contact-page
.afc-contact-office-card:hover::before {

    transform: scaleX(1);

}


/* =========================================================
   OFFICE LINKS
========================================================= */

.afc-contact-page
.afc-contact-office-value
a {

    position: relative;

    display: inline-block;

    color: #ffffff !important;

    text-decoration: none !important;

    transition:
        opacity .3s ease,
        transform .3s ease !important;
}


.afc-contact-page
.afc-contact-office-value
a:hover {

    opacity: .65 !important;

    transform: translateX(5px) !important;

}


/* =========================================================
   PHONE HOVER
========================================================= */

.afc-contact-page
.afc-contact-strip-number {

    position: relative;

    transition:
        opacity .3s ease,
        transform .3s ease !important;

}


.afc-contact-page
.afc-contact-strip-number:hover {

    opacity: .65 !important;

    transform: translateX(5px) !important;

}


/* =========================================================
   CONTACT STRIP ARROW
========================================================= */

.afc-contact-page
.afc-contact-strip-center {

    transition:
        background-color .35s ease,
        color .35s ease,
        transform .35s ease !important;

    cursor: pointer !important;

}


.afc-contact-page
.afc-contact-strip-center:hover {

    background: #ffffff !important;

    color: #0b0d0e !important;

    transform: rotate(45deg) !important;

}


/* =========================================================
   FORM INPUT HOVER
========================================================= */

.afc-contact-page
.afc-contact-field input,
.afc-contact-page
.afc-contact-field textarea {

    transition:
        border-color .3s ease,
        padding-left .3s ease !important;

}


.afc-contact-page
.afc-contact-field input:hover,
.afc-contact-page
.afc-contact-field textarea:hover {

    border-bottom-color: #777b7e !important;

}


.afc-contact-page
.afc-contact-field input:focus,
.afc-contact-page
.afc-contact-field textarea:focus {

    border-bottom-color: #0b0d0e !important;

    padding-left: 8px !important;

}


/* =========================================================
   MAP CARD
========================================================= */

.afc-contact-page
.afc-contact-map-card {

    transition:
        transform .4s ease,
        box-shadow .4s ease !important;

}


.afc-contact-page
.afc-contact-map:hover
.afc-contact-map-card {

    transform: translateY(-8px) !important;

    box-shadow:
        0 20px 50px rgba(0,0,0,.18) !important;

}


/* =========================================================
   HERO IMAGE HOVER
========================================================= */

.afc-contact-page
.afc-contact-hero-image {

    cursor: default;

}


.afc-contact-page
.afc-contact-hero-image img {

    transition:
        transform 1.2s cubic-bezier(.2,.65,.3,1) !important;

}


.afc-contact-page
.afc-contact-hero-image:hover img {

    transform: scale(1.04) !important;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .afc-contact-page
    .afc-contact-submit:hover {

        transform: none !important;

    }

    .afc-contact-page
    .afc-contact-office-card:hover {

        transform: none !important;

    }

}

/* =============================================== */
.afc-contact-page .afc-contact-map iframe {
    width: 100%;
    height: 100%;
    border: 0;

    filter: grayscale(100%) contrast(1.05);

    transition: filter 0.8s ease;
}

.afc-contact-page .afc-contact-map:hover iframe {
    filter: grayscale(0%) contrast(1);
}