@charset "UTF-8";

/* =========================================================
   BOOTS TREE & FENCE
   CONTACT PAGE
========================================================= */


/* =========================================================
   BOOTS TREE & FENCE
   CONTACT HERO
========================================================= */

:root {
    --btf-contact-hero-bottom-height: 72px;
}


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

   Header + hero = 100svh.
   El padding superior reserva el espacio del header fijo.
========================================================= */

.btf-contact-hero {
    position: relative;
    isolation: isolate;

    width: 100%;
    height: 100vh;
    height: 100svh;
    min-height: 0;
    padding-top: var(--btf-header-height);

    overflow: hidden;

    color: var(--btf-white);
    background-color: var(--btf-forest-950);

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cpath d='M0 83.5H84M83.5 0V84' fill='none' stroke='%23FFFFFF' stroke-opacity='.025'/%3E%3Ccircle cx='0' cy='0' r='1.2' fill='%23C66A32' fill-opacity='.12'/%3E%3C/svg%3E");

    background-repeat: repeat;
    background-size: 84px 84px;
}


/* =========================================================
   RIGHT-SIDE IMAGE

   En escritorio comienza en el 52%, como en el hero del index.
========================================================= */

.btf-contact-hero__visual {
    position: absolute;
    top: var(--btf-header-height);
    right: 0;
    bottom: 0;
    left: 52%;
    z-index: -3;

    overflow: hidden;

    background-color: var(--btf-forest-900);
}

.btf-contact-hero__visual img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    filter:
        saturate(0.82)
        contrast(1.04);

    transform: scale(1.035);

    animation:
        btf-contact-hero-image
        9s
        ease-out
        both;
}

.btf-contact-hero__visual-overlay {
    position: absolute;
    inset: 0;

    background-color: rgba(9, 25, 17, 0.26);

    pointer-events: none;
}


/* =========================================================
   DECORATIVE RINGS
========================================================= */

.btf-contact-hero__rings {
    position: absolute;
    top: calc(var(--btf-header-height) + 10%);
    left: -160px;
    z-index: -1;

    width: 410px;
    height: 410px;

    pointer-events: none;
}

.btf-contact-hero__rings span {
    position: absolute;
    top: 50%;
    left: 50%;

    border-radius: 50%;

    transform: translate(-50%, -50%);
}

.btf-contact-hero__rings span:first-child {
    width: 100%;
    height: 100%;

    border:
        1px solid
        rgba(255, 255, 255, 0.045);
}

.btf-contact-hero__rings span:last-child {
    width: 67%;
    height: 67%;

    border:
        1px solid
        rgba(198, 106, 50, 0.13);
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.btf-contact-hero__layout {
    position: relative;
    z-index: 2;

    display: grid;
    align-items: center;

    height:
        calc(
            100% -
            var(--btf-contact-hero-bottom-height)
        );
}

.btf-contact-hero__content {
    width: 100%;
    max-width: 770px;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.btf-contact-hero__breadcrumb {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-bottom: clamp(18px, 2.5vh, 28px);

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

    font-size: clamp(0.6rem, 1.3vh, 0.68rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.btf-contact-hero__breadcrumb a {
    transition:
        color
        var(--btf-transition-fast);
}

.btf-contact-hero__breadcrumb a:hover,
.btf-contact-hero__breadcrumb a:focus-visible {
    color: var(--btf-white);
}


/* =========================================================
   EYEBROW
========================================================= */

.btf-contact-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-bottom: clamp(13px, 2vh, 21px);

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

    font-size: clamp(0.62rem, 1.35vh, 0.71rem);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.btf-contact-hero__eyebrow > span:first-child {
    display: block;
    flex: 0 0 auto;

    width: 40px;
    height: 2px;

    background-color: var(--btf-copper);
}


/* =========================================================
   TITLE
========================================================= */

.btf-contact-hero h1 {
    max-width: 800px;
    margin-bottom: clamp(17px, 2.7vh, 28px);

    color: var(--btf-white);

    font-family: var(--btf-font-heading);
    font-size:
        clamp(
            3.2rem,
            min(6.2vw, 9vh),
            7rem
        );

    font-weight: 600;
    line-height: 0.84;
    letter-spacing: -0.055em;
}

.btf-contact-hero h1 em {
    display: block;

    color: var(--btf-sand);

    font-weight: 500;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.btf-contact-hero__description {
    max-width: 620px;
    margin-bottom: clamp(21px, 3.3vh, 37px);

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

    font-size:
        clamp(
            0.9rem,
            min(1.15vw, 2.1vh),
            1.06rem
        );

    line-height: 1.75;
}


/* =========================================================
   ACTIONS
========================================================= */

.btf-contact-hero__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.btf-contact-hero__estimate {
    width: auto;
}

.btf-contact-hero__estimate svg {
    width: 19px;
    height: 19px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition:
        transform
        var(--btf-transition-normal);
}

.btf-contact-hero__estimate:hover svg,
.btf-contact-hero__estimate:focus-visible svg {
    transform: translateY(4px);
}


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

.btf-contact-hero__phone {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    color: var(--btf-white);

    transition:
        transform
        var(--btf-transition-normal);
}

.btf-contact-hero__phone:hover,
.btf-contact-hero__phone:focus-visible {
    transform: translateY(-2px);
}

.btf-contact-hero__phone-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;

    width: 48px;
    height: 48px;

    color: var(--btf-copper);
    background-color:
        rgba(255, 255, 255, 0.055);

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

    border-radius: 50%;

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

.btf-contact-hero__phone:hover
.btf-contact-hero__phone-icon {
    color: var(--btf-white);
    background-color: var(--btf-copper);
    border-color: var(--btf-copper);
}

.btf-contact-hero__phone-icon svg {
    width: 21px;
    height: 21px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.btf-contact-hero__phone-copy {
    display: grid;
    gap: 3px;
}

.btf-contact-hero__phone-copy small {
    color: rgba(255, 255, 255, 0.45);

    font-size: 0.61rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.btf-contact-hero__phone-copy strong {
    font-size: 0.93rem;
    line-height: 1.2;
}


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

.btf-contact-hero__trust {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 26px;

    margin-top: clamp(23px, 4vh, 42px);
}

.btf-contact-hero__trust > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;

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

    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.3;
}

.btf-contact-hero__trust svg {
    width: 20px;
    height: 20px;

    fill: none;
    stroke: var(--btf-copper);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   SUMMARY CARD

   Mantiene proporciones similares a la tarjeta lateral
   del hero principal del index.
========================================================= */

.btf-contact-hero__summary {
    position: relative;

    align-self: end;
    justify-self: end;

    width: min(100%, 365px);
    margin-bottom:
        clamp(
            28px,
            5vh,
            58px
        );

    padding: 29px;

    color: var(--btf-text);
    background-color: rgba(243, 244, 236, 0.96);

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

    border-radius: var(--btf-radius-md);

    box-shadow: var(--btf-shadow-dark);
}

.btf-contact-hero__summary::before {
    position: absolute;
    top: 0;
    left: 29px;

    width: 65px;
    height: 3px;

    content: "";

    background-color: var(--btf-copper);
}

.btf-contact-hero__summary-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 20px;
}

.btf-contact-hero__summary-top > span {
    color: var(--btf-text-muted);

    font-size: 0.65rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.btf-contact-hero__summary-top > strong {
    color: var(--btf-copper);

    font-family: var(--btf-font-heading);
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1;
}


/* =========================================================
   SUMMARY SERVICES
========================================================= */

.btf-contact-hero__summary-services {
    display: grid;

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

.btf-contact-hero__summary-services > a {
    display: grid;
    grid-template-columns:
        28px
        minmax(0, 1fr)
        22px;

    align-items: center;
    gap: 12px;

    min-height: 72px;

    color: var(--btf-forest-950);

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

    transition:
        padding-left var(--btf-transition-normal),
        color var(--btf-transition-normal);
}

.btf-contact-hero__summary-services > a:hover,
.btf-contact-hero__summary-services > a:focus-visible {
    padding-left: 7px;

    color: var(--btf-copper-dark);
}

.btf-contact-hero__summary-number {
    color: var(--btf-copper);

    font-size: 0.65rem;
    font-weight: 800;
}

.btf-contact-hero__summary-copy {
    display: grid;
    gap: 4px;

    min-width: 0;
}

.btf-contact-hero__summary-copy strong {
    color: inherit;

    font-family: var(--btf-font-heading);
    font-size: 1.48rem;
    font-weight: 600;
    line-height: 1;
}

.btf-contact-hero__summary-copy small {
    color: var(--btf-text-muted);

    font-size: 0.61rem;
    line-height: 1.3;
}

.btf-contact-hero__summary-services svg {
    width: 21px;
    height: 21px;

    fill: none;
    stroke: var(--btf-copper);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition:
        transform
        var(--btf-transition-normal);
}

.btf-contact-hero__summary-services > a:hover svg,
.btf-contact-hero__summary-services > a:focus-visible svg {
    transform: translateX(4px);
}


/* =========================================================
   SUMMARY FOOTER
========================================================= */

.btf-contact-hero__summary-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-top: 20px;
}

.btf-contact-hero__summary-footer > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: var(--btf-text-muted);

    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
}

.btf-contact-hero__summary-footer > span svg {
    width: 18px;
    height: 18px;

    fill: none;
    stroke: var(--btf-copper);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.btf-contact-hero__summary-footer > a {
    color: var(--btf-forest-950);

    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.045em;
    text-transform: uppercase;

    transition:
        color
        var(--btf-transition-fast);
}

.btf-contact-hero__summary-footer > a:hover,
.btf-contact-hero__summary-footer > a:focus-visible {
    color: var(--btf-copper-dark);
}


/* =========================================================
   BOTTOM BAR
========================================================= */

.btf-contact-hero__bottom {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 4;

    height: var(--btf-contact-hero-bottom-height);

    color: var(--btf-white);
    background-color: rgba(16, 45, 33, 0.94);

    border-top:
        1px solid
        rgba(255, 255, 255, 0.1);

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

.btf-contact-hero__bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

    height: 100%;
}

.btf-contact-hero__bottom-inner > span {
    color: rgba(255, 255, 255, 0.48);

    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.btf-contact-hero__bottom-inner > a {
    display: inline-flex;
    align-items: center;
    gap: 10px;

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

    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.065em;
    text-transform: uppercase;

    transition:
        color
        var(--btf-transition-normal);
}

.btf-contact-hero__bottom-inner > a:hover,
.btf-contact-hero__bottom-inner > a:focus-visible {
    color: var(--btf-white);
}

.btf-contact-hero__bottom-inner svg {
    width: 18px;
    height: 18px;

    fill: none;
    stroke: var(--btf-copper);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition:
        transform
        var(--btf-transition-normal);
}

.btf-contact-hero__bottom-inner > a:hover svg {
    transform: translateY(4px);
}


/* =========================================================
   IMAGE ANIMATION
========================================================= */

@keyframes btf-contact-hero-image {

    from {
        transform: scale(1.065);
    }

    to {
        transform: scale(1.035);
    }

}













































/* =========================================================
   CONTACT MAIN
========================================================= */

.btf-contact-main {
    position: relative;

    padding-block: var(--btf-section-space);

    background-color: var(--btf-background);
}

.btf-contact-main::before {
    position: absolute;
    top: 0;
    left: 7%;

    width: 80px;
    height: 4px;

    content: "";

    background-color: var(--btf-copper);
}

.btf-contact-main__layout {
    display: grid;
    align-items: start;
    gap: 25px;
}


/* =========================================================
   RESPONSE ALERT
========================================================= */

.btf-contact-alert {
    position: relative;

    grid-template-columns:
        44px
        minmax(0, 1fr)
        34px;

    align-items: center;
    gap: 14px;

    margin-bottom: 25px;
    padding: 17px 18px;

    color: var(--btf-forest-950);
    background-color: var(--btf-white);

    border:
        1px solid
        rgba(53, 107, 77, 0.3);

    border-radius: var(--btf-radius-sm);

    box-shadow: var(--btf-shadow-sm);
}

.btf-contact-alert:not([hidden]) {
    display: grid;
}

.btf-contact-alert.is-error {
    border-color:
        rgba(198, 106, 50, 0.4);
}

.btf-contact-alert__icon {
    display: grid;
    place-items: center;

    width: 44px;
    height: 44px;

    color: var(--btf-white);
    background-color: var(--btf-forest-600);

    border-radius: 50%;
}

.btf-contact-alert.is-error
.btf-contact-alert__icon {
    background-color: var(--btf-copper);
}

.btf-contact-alert__icon svg {
    width: 21px;
    height: 21px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.btf-contact-alert strong {
    display: block;

    margin-bottom: 3px;

    font-family: var(--btf-font-heading);
    font-size: 1.35rem;
    font-weight: 600;
}

.btf-contact-alert p {
    margin-bottom: 0;

    color: var(--btf-text-soft);

    font-size: 0.76rem;
    line-height: 1.5;
}

.btf-contact-alert button {
    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

    color: var(--btf-text-muted);
    background-color: transparent;

    border-radius: 50%;
}

.btf-contact-alert button:hover {
    color: var(--btf-white);
    background-color: var(--btf-forest-950);
}

.btf-contact-alert button svg {
    width: 17px;
    height: 17px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}


/* =========================================================
   FORM PANEL
========================================================= */

.btf-contact-form-panel {
    min-width: 0;
    padding: clamp(28px, 4vw, 50px);

    background-color: var(--btf-white);

    border: 1px solid var(--btf-border);
    border-radius: var(--btf-radius-md);

    box-shadow: var(--btf-shadow-md);
}

.btf-contact-form-panel__header {
    max-width: 710px;
    margin-bottom: 38px;
}

.btf-contact-form-panel__eyebrow {
    display: block;

    margin-bottom: 14px;

    color: var(--btf-copper);

    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.btf-contact-form-panel__header h2 {
    margin-bottom: 17px;

    color: var(--btf-forest-950);

    font-size: clamp(2.5rem, 4vw, 4rem);
    font-weight: 600;
    line-height: 0.94;
}

.btf-contact-form-panel__header p {
    max-width: 620px;
    margin-bottom: 0;

    color: var(--btf-text-soft);

    font-size: 0.91rem;
    line-height: 1.75;
}


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

.btf-contact-form {
    position: relative;
}

.btf-contact-form__honeypot {
    position: absolute;
    top: -9999px;
    left: -9999px;

    width: 1px;
    height: 1px;

    overflow: hidden;
}

.btf-contact-form__grid {
    display: grid;
    gap: 22px;
}

.btf-contact-field {
    display: grid;
    gap: 9px;

    min-width: 0;
}

.btf-contact-field label,
.btf-contact-services legend {
    color: var(--btf-forest-950);

    font-size: 0.72rem;
    font-weight: 800;
}

.btf-contact-field label > span,
.btf-contact-services legend > span {
    color: var(--btf-copper);
}

.btf-contact-field__control {
    position: relative;
}

.btf-contact-field__control > span {
    position: absolute;
    top: 50%;
    left: 14px;

    display: grid;
    place-items: center;

    width: 20px;
    height: 20px;

    color: var(--btf-bark-600);

    transform: translateY(-50%);

    pointer-events: none;
}

.btf-contact-field__control svg {
    width: 19px;
    height: 19px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

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

    color: var(--btf-text);
    background-color: var(--btf-background);

    border: 1px solid var(--btf-border);
    border-radius: var(--btf-radius-sm);

    outline: none;

    transition:
        border-color var(--btf-transition-fast),
        box-shadow var(--btf-transition-fast),
        background-color var(--btf-transition-fast);
}

.btf-contact-field input {
    min-height: 55px;
    padding: 13px 15px 13px 46px;
}

.btf-contact-field textarea {
    min-height: 175px;
    padding: 15px;

    resize: vertical;
}

.btf-contact-field input:focus,
.btf-contact-field textarea:focus {
    background-color: var(--btf-white);
    border-color: var(--btf-copper);

    box-shadow:
        0 0 0 4px
        rgba(198, 106, 50, 0.11);
}

.btf-contact-field input:user-invalid,
.btf-contact-field textarea:user-invalid {
    border-color: var(--btf-copper-dark);
}

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

.btf-contact-field__label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.btf-contact-field__label-row > span {
    color: var(--btf-text-muted);

    font-size: 0.63rem;
    font-weight: 700;
}

.btf-contact-field > small {
    color: var(--btf-text-muted);

    font-size: 0.65rem;
}


/* =========================================================
   SERVICE OPTIONS
========================================================= */

.btf-contact-services {
    padding: 0;
    margin: 31px 0 0;

    border: 0;
}

.btf-contact-services legend {
    margin-bottom: 13px;
}

.btf-contact-services__grid {
    display: grid;
    gap: 12px;
}

.btf-contact-service-option {
    position: relative;

    display: block;

    cursor: pointer;
}

.btf-contact-service-option input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;
}

.btf-contact-service-option__content {
    display: grid;
    grid-template-columns:
        43px
        minmax(0, 1fr)
        18px;

    align-items: center;
    gap: 12px;

    min-height: 75px;
    padding: 12px 14px;

    background-color: var(--btf-background);

    border: 1px solid var(--btf-border);
    border-radius: var(--btf-radius-sm);

    transition:
        background-color var(--btf-transition-normal),
        border-color var(--btf-transition-normal),
        box-shadow var(--btf-transition-normal),
        transform var(--btf-transition-normal);
}

.btf-contact-service-option:hover
.btf-contact-service-option__content {
    border-color: var(--btf-border-copper);
    transform: translateY(-2px);
}

.btf-contact-service-option input:focus-visible +
.btf-contact-service-option__content {
    outline:
        3px solid
        var(--btf-copper);

    outline-offset: 3px;
}

.btf-contact-service-option input:checked +
.btf-contact-service-option__content {
    background-color: var(--btf-white);
    border-color: var(--btf-copper);

    box-shadow:
        0 10px 25px
        rgba(16, 45, 33, 0.09);
}

.btf-contact-service-option__icon {
    display: grid;
    place-items: center;

    width: 43px;
    height: 43px;

    color: var(--btf-copper);
    background-color: var(--btf-white);

    border: 1px solid var(--btf-border);
    border-radius: 50%;
}

.btf-contact-service-option input:checked +
.btf-contact-service-option__content
.btf-contact-service-option__icon {
    color: var(--btf-white);
    background-color: var(--btf-copper);
    border-color: var(--btf-copper);
}

.btf-contact-service-option__icon svg {
    width: 21px;
    height: 21px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.btf-contact-service-option__content > span:nth-child(2) {
    display: grid;
    gap: 4px;

    min-width: 0;
}

.btf-contact-service-option__content strong {
    color: var(--btf-forest-950);

    font-family: var(--btf-font-heading);
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1;
}

.btf-contact-service-option__content small {
    color: var(--btf-text-muted);

    font-size: 0.64rem;
    line-height: 1.4;
}

.btf-contact-service-option__content i {
    position: relative;

    display: block;

    width: 18px;
    height: 18px;

    border: 1px solid var(--btf-border);
    border-radius: 50%;
}

.btf-contact-service-option input:checked +
.btf-contact-service-option__content i {
    background-color: var(--btf-copper);
    border-color: var(--btf-copper);
}

.btf-contact-service-option input:checked +
.btf-contact-service-option__content i::after {
    position: absolute;
    top: 4px;
    left: 4px;

    width: 8px;
    height: 5px;

    content: "";

    border-bottom: 2px solid var(--btf-white);
    border-left: 2px solid var(--btf-white);

    transform: rotate(-45deg);
}

.btf-contact-field--message {
    margin-top: 30px;
}


/* =========================================================
   FORM BOTTOM
========================================================= */

.btf-contact-form__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

    margin-top: 27px;
    padding-top: 25px;

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

.btf-contact-form__bottom > p {
    display: flex;
    align-items: center;
    gap: 9px;

    max-width: 390px;
    margin-bottom: 0;

    color: var(--btf-text-muted);

    font-size: 0.63rem;
    line-height: 1.5;
}

.btf-contact-form__bottom > p svg {
    flex: 0 0 auto;

    width: 19px;
    height: 19px;

    fill: none;
    stroke: var(--btf-forest-600);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.btf-contact-form__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    min-height: 54px;
    padding: 14px 20px;

    color: var(--btf-white);
    background-color: var(--btf-copper);

    border: 1px solid var(--btf-copper);
    border-radius: var(--btf-radius-sm);

    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;

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

.btf-contact-form__submit:hover,
.btf-contact-form__submit:focus-visible {
    color: var(--btf-white);
    background-color: var(--btf-forest-950);
    border-color: var(--btf-forest-950);

    transform: translateY(-2px);
}

.btf-contact-form__submit:disabled {
    cursor: wait;
    opacity: 0.72;
    transform: none;
}

.btf-contact-form__submit svg {
    width: 19px;
    height: 19px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition:
        transform
        var(--btf-transition-normal);
}

.btf-contact-form__submit:hover svg {
    transform: translateX(4px);
}


/* =========================================================
   CONTACT SIDEBAR
========================================================= */

.btf-contact-sidebar {
    position: relative;

    min-width: 0;
    padding: clamp(27px, 3.5vw, 42px);

    overflow: hidden;

    color: var(--btf-white);
    background-color: var(--btf-forest-950);

    border-radius: var(--btf-radius-md);

    box-shadow: var(--btf-shadow-lg);
}

.btf-contact-sidebar::before {
    position: absolute;
    top: 0;
    left: clamp(27px, 3.5vw, 42px);

    width: 70px;
    height: 4px;

    content: "";

    background-color: var(--btf-copper);
}

.btf-contact-sidebar::after {
    position: absolute;
    right: -90px;
    bottom: -90px;

    width: 260px;
    height: 260px;

    content: "";

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

    border-radius: 50%;

    pointer-events: none;
}

.btf-contact-sidebar__heading > span {
    display: block;

    margin-bottom: 16px;

    color: var(--btf-copper);

    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.btf-contact-sidebar__heading h2 {
    margin-bottom: 17px;

    color: var(--btf-white);

    font-size: clamp(2.3rem, 3.5vw, 3.45rem);
    font-weight: 600;
    line-height: 0.94;
}

.btf-contact-sidebar__heading p {
    margin-bottom: 0;

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

    font-size: 0.82rem;
    line-height: 1.7;
}

.btf-contact-sidebar__methods {
    display: grid;

    margin-top: 31px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.1);
}

.btf-contact-method {
    display: grid;
    grid-template-columns:
        43px
        minmax(0, 1fr)
        20px;

    align-items: center;
    gap: 12px;

    min-height: 82px;

    color: var(--btf-white);

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

a.btf-contact-method {
    transition:
        padding-left var(--btf-transition-normal),
        background-color var(--btf-transition-normal);
}

a.btf-contact-method:hover,
a.btf-contact-method:focus-visible {
    padding-left: 8px;

    background-color:
        rgba(255, 255, 255, 0.035);
}

.btf-contact-method__icon {
    display: grid;
    place-items: center;

    width: 43px;
    height: 43px;

    color: var(--btf-copper);

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

    border-radius: 50%;
}

.btf-contact-method__icon svg {
    width: 20px;
    height: 20px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.btf-contact-method > span:nth-child(2) {
    display: grid;
    gap: 4px;

    min-width: 0;
}

.btf-contact-method small {
    color: rgba(255, 255, 255, 0.43);

    font-size: 0.59rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.btf-contact-method strong {
    overflow-wrap: anywhere;

    font-size: 0.78rem;
    line-height: 1.45;
}

.btf-contact-method__arrow {
    width: 19px;
    height: 19px;

    fill: none;
    stroke: var(--btf-copper);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   HOURS
========================================================= */

.btf-contact-sidebar__hours {
    margin-top: 31px;
    padding: 22px;

    background-color:
        rgba(255, 255, 255, 0.045);

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

    border-radius: var(--btf-radius-sm);
}

.btf-contact-sidebar__hours-title {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 17px;
}

.btf-contact-sidebar__hours-title > span {
    display: grid;
    place-items: center;

    width: 35px;
    height: 35px;

    color: var(--btf-copper);

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

    border-radius: 50%;
}

.btf-contact-sidebar__hours-title svg {
    width: 18px;
    height: 18px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.btf-contact-sidebar__hours-title h3 {
    margin-bottom: 0;

    color: var(--btf-white);

    font-size: 1.45rem;
    font-weight: 600;
}

.btf-contact-sidebar__hours dl {
    margin: 0;
}

.btf-contact-sidebar__hours dl > div {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 15px;

    padding-block: 10px;

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

.btf-contact-sidebar__hours dl > div:last-child {
    border-bottom: 0;
}

.btf-contact-sidebar__hours dt {
    color: rgba(255, 255, 255, 0.66);

    font-size: 0.67rem;
    font-weight: 700;
}

.btf-contact-sidebar__hours dd {
    margin: 0;

    color: var(--btf-copper);

    font-size: 0.61rem;
    font-weight: 700;
    text-align: right;
}

.btf-contact-sidebar__note {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 43px minmax(0, 1fr);
    align-items: center;
    gap: 13px;

    margin-top: 27px;
}

.btf-contact-sidebar__note > span {
    display: grid;
    place-items: center;

    width: 43px;
    height: 43px;

    color: var(--btf-forest-950);
    background-color: var(--btf-sand);

    border-radius: 50%;

    font-family: var(--btf-font-heading);
    font-size: 0.72rem;
    font-weight: 700;
}

.btf-contact-sidebar__note p {
    margin-bottom: 0;

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

    font-size: 0.68rem;
    line-height: 1.55;
}








































/* =========================================================
   PROCESS
========================================================= */

.btf-contact-process {
    position: relative;

    padding-block: var(--btf-section-space);

    color: var(--btf-white);
    background-color: var(--btf-forest-950);
}

.btf-contact-process__header {
    display: grid;
    align-items: end;

    margin-bottom: clamp(40px, 6vw, 70px);
}

.btf-contact-process__eyebrow {
    display: block;

    margin-bottom: 16px;

    color: var(--btf-copper);

    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.btf-contact-process__header h2 {
    max-width: 750px;
    margin-bottom: 0;

    color: var(--btf-white);

    font-size: var(--btf-heading-md);
    font-weight: 600;
    line-height: 0.96;
}

.btf-contact-process__header h2 em {
    display: block;

    color: var(--btf-sand);

    font-weight: 500;
}

.btf-contact-process__header > p {
    max-width: 520px;
    margin-bottom: 0;

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

    font-size: 0.91rem;
    line-height: 1.75;
}

.btf-contact-process__grid {
    display: grid;
    gap: 1px;

    overflow: hidden;

    background-color:
        rgba(255, 255, 255, 0.1);

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

    border-radius: var(--btf-radius-md);
}

.btf-contact-step {
    position: relative;

    min-width: 0;
    padding: clamp(26px, 3vw, 38px);

    background-color: var(--btf-forest-900);

    transition:
        background-color var(--btf-transition-normal);
}

.btf-contact-step:hover {
    background-color: var(--btf-forest-800);
}

.btf-contact-step__number {
    display: block;

    margin-bottom: 25px;

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

    font-family: var(--btf-font-heading);
    font-size: 1.25rem;
    font-weight: 600;
}

.btf-contact-step__icon {
    display: grid;
    place-items: center;

    width: 50px;
    height: 50px;
    margin-bottom: 27px;

    color: var(--btf-copper);

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

    border-radius: 50%;
}

.btf-contact-step__icon svg {
    width: 23px;
    height: 23px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.btf-contact-step h3 {
    margin-bottom: 13px;

    color: var(--btf-white);

    font-size: clamp(1.7rem, 2.4vw, 2.15rem);
    font-weight: 600;
    line-height: 1;
}

.btf-contact-step p {
    margin-bottom: 0;

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

    font-size: 0.8rem;
    line-height: 1.7;
}




































/* =========================================================
   FAQ
========================================================= */

.btf-contact-faq {
    padding-block: var(--btf-section-space);

    background-color: var(--btf-surface-soft);
}

.btf-contact-faq__layout {
    display: grid;
    align-items: start;
    gap: 60px;
}

.btf-contact-faq__eyebrow {
    display: block;

    margin-bottom: 16px;

    color: var(--btf-copper);

    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.btf-contact-faq__header h2 {
    max-width: 550px;
    margin-bottom: 20px;

    color: var(--btf-forest-950);

    font-size: var(--btf-heading-md);
    font-weight: 600;
    line-height: 0.96;
}

.btf-contact-faq__header p {
    max-width: 510px;
    margin-bottom: 28px;

    color: var(--btf-text-soft);

    font-size: 0.91rem;
    line-height: 1.75;
}

.btf-contact-faq__header > a {
    display: grid;
    gap: 4px;

    width: fit-content;

    color: var(--btf-text-muted);

    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
}

.btf-contact-faq__header > a strong {
    color: var(--btf-copper-dark);

    font-size: 0.77rem;
}

.btf-contact-faq__list {
    display: grid;
    gap: 10px;
}

.btf-contact-faq__item {
    overflow: hidden;

    background-color: var(--btf-white);

    border: 1px solid var(--btf-border);
    border-radius: var(--btf-radius-sm);

    box-shadow: var(--btf-shadow-xs);
}

.btf-contact-faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

    min-height: 73px;
    padding: 18px 21px;

    color: var(--btf-forest-950);

    font-family: var(--btf-font-heading);
    font-size: 1.4rem;
    font-weight: 600;

    cursor: pointer;

    list-style: none;
}

.btf-contact-faq__item summary::-webkit-details-marker {
    display: none;
}

.btf-contact-faq__item summary > span {
    display: grid;
    flex: 0 0 auto;
    place-items: center;

    width: 34px;
    height: 34px;

    color: var(--btf-copper);
    background-color: var(--btf-background);

    border: 1px solid var(--btf-border);
    border-radius: 50%;

    font-family: var(--btf-font-body);
    font-size: 1.2rem;

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

.btf-contact-faq__item[open]
summary > span {
    color: var(--btf-white);
    background-color: var(--btf-copper);

    transform: rotate(45deg);
}

.btf-contact-faq__item > div {
    padding: 0 21px 21px;
}

.btf-contact-faq__item p {
    max-width: 680px;
    margin-bottom: 0;

    color: var(--btf-text-soft);

    font-size: 0.82rem;
    line-height: 1.7;
}


/* =========================================================
   REVEAL ANIMATIONS
========================================================= */

[data-btf-contact-hero].is-enhanced
[data-btf-contact-reveal],
[data-btf-contact-section].is-enhanced
[data-btf-contact-reveal] {
    opacity: 0;
    transform: translateY(35px);
}

[data-btf-contact-hero].is-enhanced
[data-btf-contact-reveal].is-visible,
[data-btf-contact-section].is-enhanced
[data-btf-contact-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);

    transition:
        opacity 780ms var(--btf-ease-standard),
        transform 780ms var(--btf-ease-standard);
}








































/* =========================================================
   1. COMPUTER
   1200px AND UP
========================================================= */

@media (min-width: 1200px) {
     .btf-contact-hero__layout {
        grid-template-columns:
            minmax(0, 1.18fr)
            minmax(330px, 0.82fr);

        gap: clamp(60px, 7vw, 130px);
    }

    .btf-contact-hero__content {
        align-self: center;
    }

    .btf-contact-main__layout {
        grid-template-columns:
            minmax(0, 1.35fr)
            minmax(340px, 0.65fr);
    }

    .btf-contact-sidebar {
        position: sticky;
        top:
            calc(
                var(--btf-header-height) + 24px
            );
    }

    .btf-contact-form__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .btf-contact-services__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .btf-contact-process__header {
        grid-template-columns:
            minmax(0, 1.25fr)
            minmax(350px, 0.75fr);

        gap: 80px;
    }

    .btf-contact-process__grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .btf-contact-faq__layout {
        grid-template-columns:
            minmax(320px, 0.72fr)
            minmax(0, 1.28fr);
    }

}


/* =========================================================
   2. TABLET
   768px TO 1199px
========================================================= */

@media (min-width: 768px) and (max-width: 1199px) {
    :root {
        --btf-contact-hero-bottom-height: 68px;
    }

    .btf-contact-hero__visual {
        top: 0;
        left: 0;
    }

    .btf-contact-hero__visual img {
        object-position: 62% center;
    }

    .btf-contact-hero__visual-overlay {
        background-color: rgba(8, 23, 15, 0.71);
    }

    .btf-contact-hero__layout {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(270px, 0.55fr);

        gap: 38px;
    }

    .btf-contact-hero h1 {
        font-size:
            clamp(
                3.7rem,
                min(7vw, 8vh),
                5.7rem
            );
    }

    .btf-contact-hero__description {
        max-width: 530px;
    }

    .btf-contact-hero__summary {
        width: 100%;
        margin-bottom: 26px;
        padding: 24px;
    }

    .btf-contact-main__layout {
        grid-template-columns:
            minmax(0, 1.2fr)
            minmax(285px, 0.8fr);
    }

    .btf-contact-form-panel {
        padding: 34px;
    }

    .btf-contact-form__grid,
    .btf-contact-services__grid {
        grid-template-columns: 1fr;
    }

    .btf-contact-sidebar {
        padding: 31px 27px;
    }

    .btf-contact-form__bottom {
        display: grid;
        grid-template-columns: 1fr;
    }

    .btf-contact-form__submit {
        width: 100%;
    }

    .btf-contact-process__header {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(300px, 0.8fr);

        gap: 50px;
    }

    .btf-contact-process__grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .btf-contact-faq__layout {
        grid-template-columns:
            minmax(260px, 0.7fr)
            minmax(0, 1.3fr);

        gap: 45px;
    }

}


/* =========================================================
   3. MOBILE
   481px TO 767px
========================================================= */

@media (min-width: 481px) and (max-width: 767px) {

      :root {
        --btf-contact-hero-bottom-height: 64px;
    }

    .btf-contact-hero__visual {
        top: 0;
        left: 0;
    }

    .btf-contact-hero__visual img {
        object-position: 62% center;
    }

    .btf-contact-hero__visual-overlay {
        background-color: rgba(7, 22, 14, 0.74);
    }

    .btf-contact-hero__rings {
        top: 20%;
        left: -250px;

        width: 410px;
        height: 410px;
    }

    .btf-contact-hero__layout {
        display: flex;
        align-items: center;
    }

    .btf-contact-hero__content {
        max-width: 610px;
    }

    .btf-contact-hero__summary {
        display: none;
    }

    .btf-contact-hero h1 {
        font-size:
            clamp(
                3.35rem,
                7.5vh,
                4.8rem
            );

        line-height: 0.86;
    }

    .btf-contact-hero h1 em {
        display: inline;
    }

    .btf-contact-hero__description {
        max-width: 540px;

        font-size: 0.91rem;
        line-height: 1.65;
    }
    .btf-contact-main__layout {
        grid-template-columns: 1fr;
    }

    .btf-contact-form__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .btf-contact-services__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .btf-contact-form__bottom {
        display: grid;
        grid-template-columns: 1fr;
    }

    .btf-contact-form__submit {
        width: 100%;
    }

    .btf-contact-sidebar {
        margin-top: 5px;
    }

    .btf-contact-process__header {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .btf-contact-process__header h2 em {
        display: inline;
    }

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

    .btf-contact-faq__layout {
        grid-template-columns: 1fr;
        gap: 38px;
    }

}


/* =========================================================
   4. SMALL MOBILE
   480px AND BELOW
========================================================= */

@media (max-width: 480px) {
    

     :root {
        --btf-contact-hero-bottom-height: 58px;
    }

    .btf-contact-hero__visual {
        top: 0;
        left: 0;
    }

    .btf-contact-hero__visual img {
        object-position: 65% center;
    }

    .btf-contact-hero__visual-overlay {
        background-color: rgba(7, 22, 14, 0.77);
    }

    .btf-contact-hero__rings {
        display: none;
    }

    .btf-contact-hero__layout {
        display: flex;
        align-items: center;

        padding-top: 3px;
    }

    .btf-contact-hero__content {
        width: 100%;
    }

    .btf-contact-hero__summary {
        display: none;
    }

    .btf-contact-hero__breadcrumb {
        margin-bottom:
            clamp(
                13px,
                2vh,
                18px
            );

        font-size: 0.56rem;
    }

    .btf-contact-hero__eyebrow {
        gap: 8px;

        margin-bottom: 11px;

        font-size:
            clamp(
                0.54rem,
                1.35vh,
                0.62rem
            );

        letter-spacing: 0.1em;
    }

    .btf-contact-hero__eyebrow >
    span:first-child {
        width: 25px;
    }

    .btf-contact-hero h1 {
        margin-bottom:
            clamp(
                13px,
                2.2vh,
                18px
            );

        font-size:
            clamp(
                2.75rem,
                7.2vh,
                4rem
            );

        line-height: 0.87;
    }

    .btf-contact-hero h1 em {
        display: inline;
    }

    .btf-contact-hero__description {
        display: -webkit-box;

        margin-bottom:
            clamp(
                16px,
                2.8vh,
                23px
            );

        overflow: hidden;

        font-size:
            clamp(
                0.78rem,
                1.75vh,
                0.88rem
            );

        line-height: 1.56;

        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .btf-contact-hero__actions {
        display: grid;
        grid-template-columns:
            minmax(0, 1fr)
            auto;

        gap: 10px;
    }

    .btf-contact-hero__estimate {
        width: 100%;
        min-height: 47px;
        padding: 11px 12px;

        font-size: 0.65rem;
    }

    .btf-contact-hero__estimate svg {
        width: 17px;
        height: 17px;
    }

    .btf-contact-hero__phone {
        display: grid;
        place-items: center;
    }

    .btf-contact-hero__phone-icon {
        width: 47px;
        height: 47px;
    }

    .btf-contact-hero__phone-copy {
        display: none;
    }

    .btf-contact-hero__trust {
        gap: 14px;

        margin-top:
            clamp(
                17px,
                2.8vh,
                24px
            );
    }

    .btf-contact-hero__trust > span {
        gap: 5px;

        font-size: 0.61rem;
    }

    .btf-contact-hero__trust svg {
        width: 17px;
        height: 17px;
    }

    .btf-contact-hero__bottom-inner > span {
        font-size: 0.55rem;
        letter-spacing: 0.07em;
    }

    .btf-contact-hero__bottom-inner > a {
        gap: 6px;

        font-size: 0.56rem;
        letter-spacing: 0.025em;
    }

    .btf-contact-hero__bottom-inner svg {
        width: 16px;
        height: 16px;
    }

    .btf-contact-main::before {
        left: 18px;
    }

    .btf-contact-alert {
        grid-template-columns:
            39px
            minmax(0, 1fr)
            30px;

        padding: 14px;
    }

    .btf-contact-alert__icon {
        width: 39px;
        height: 39px;
    }

    .btf-contact-form-panel {
        padding: 26px 20px;
    }

    .btf-contact-form-panel__header {
        margin-bottom: 30px;
    }

    .btf-contact-form-panel__header h2 {
        font-size: 2.55rem;
    }

    .btf-contact-form__grid,
    .btf-contact-services__grid {
        grid-template-columns: 1fr;
    }

    .btf-contact-service-option__content {
        min-height: 70px;
    }

    .btf-contact-form__bottom {
        display: grid;
        grid-template-columns: 1fr;
    }

    .btf-contact-form__submit {
        width: 100%;
    }

    .btf-contact-sidebar {
        padding: 27px 21px;
    }

    .btf-contact-sidebar__hours dl > div {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .btf-contact-sidebar__hours dd {
        text-align: left;
    }

    .btf-contact-process__header {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .btf-contact-process__header h2 {
        line-height: 1;
    }

    .btf-contact-process__header h2 em {
        display: inline;
    }

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

    .btf-contact-step {
        padding: 25px 22px;
    }

    .btf-contact-faq__layout {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .btf-contact-faq__header h2 {
        font-size: 2.65rem;
    }

    .btf-contact-faq__item summary {
        min-height: 67px;
        padding: 16px;

        font-size: 1.25rem;
    }

    .btf-contact-faq__item > div {
        padding: 0 16px 18px;
    }

}