@charset "UTF-8";

/* =========================================================
   BOOTS TREE & FENCE
   GLOBAL DESIGN SYSTEM
========================================================= */

:root {

    /* =========================
       BRAND COLORS
    ========================= */

    --btf-forest-950: #102D21;
    --btf-forest-900: #163826;
    --btf-forest-800: #1D432F;
    --btf-forest-700: #28563D;
    --btf-forest-600: #356B4D;

    --btf-bark-900: #4A351F;
    --btf-bark-800: #5E4528;
    --btf-bark-600: #7A5934;

    --btf-copper: #C66A32;
    --btf-copper-dark: #9C4B22;

    --btf-gold: #D2A84A;

    --btf-ivory: #F3F4EC;
    --btf-cream: #ECE8DE;
    --btf-sand: #D8D0BE;

    --btf-white: #FFFFFF;
    --btf-charcoal: #171C19;
    --btf-graphite: #29302C;

    /* =========================
       TEXT COLORS
    ========================= */

    --btf-text: #1D2520;
    --btf-text-soft: #4E5952;
    --btf-text-muted: #69736D;
    --btf-text-light: #F4F5EF;

    /* =========================
       SURFACES
    ========================= */

    --btf-background: var(--btf-ivory);
    --btf-surface: var(--btf-white);
    --btf-surface-soft: var(--btf-cream);
    --btf-surface-dark: var(--btf-forest-950);

    /* =========================
       BORDERS
    ========================= */

    --btf-border: rgba(16, 45, 33, 0.14);
    --btf-border-light: rgba(255, 255, 255, 0.16);
    --btf-border-copper: rgba(198, 106, 50, 0.34);

    /* =========================
       TYPOGRAPHY
    ========================= */

    --btf-font-heading:
        "Cormorant Garamond",
        Georgia,
        serif;

    --btf-font-body:
        "Manrope",
        Arial,
        sans-serif;

    /* =========================
       FONT SIZES
    ========================= */

    --btf-text-xs: 0.75rem;
    --btf-text-sm: 0.875rem;
    --btf-text-md: 1rem;
    --btf-text-lg: 1.125rem;
    --btf-text-xl: 1.25rem;

    --btf-heading-sm: clamp(1.75rem, 3vw, 2.5rem);
    --btf-heading-md: clamp(2.3rem, 5vw, 4.3rem);
    --btf-heading-lg: clamp(3.4rem, 7vw, 6.8rem);

    /* =========================
       RADII
    ========================= */

    --btf-radius-xs: 4px;
    --btf-radius-sm: 7px;
    --btf-radius-md: 12px;
    --btf-radius-lg: 18px;

    /* =========================
       SHADOWS
    ========================= */

    --btf-shadow-xs:
        0 4px 16px rgba(16, 45, 33, 0.06);

    --btf-shadow-sm:
        0 12px 32px rgba(16, 45, 33, 0.09);

    --btf-shadow-md:
        0 20px 50px rgba(16, 45, 33, 0.12);

    --btf-shadow-lg:
        0 30px 80px rgba(10, 25, 18, 0.18);

    --btf-shadow-dark:
        0 28px 75px rgba(0, 0, 0, 0.28);

    /* =========================
       TRANSITIONS
    ========================= */

    --btf-ease-standard:
        cubic-bezier(0.22, 1, 0.36, 1);

    --btf-ease-smooth:
        cubic-bezier(0.65, 0, 0.35, 1);

    --btf-transition-fast:
        180ms var(--btf-ease-standard);

    --btf-transition-normal:
        340ms var(--btf-ease-standard);

    --btf-transition-slow:
        620ms var(--btf-ease-standard);

    /* =========================
       GLOBAL LAYOUT
    ========================= */

    --btf-container-width: 1320px;
    --btf-page-padding: 24px;
    --btf-section-space: 80px;
    --btf-header-height: 82px;

    color-scheme: light;
}


/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    font-size: 100%;
    scroll-behavior: smooth;
    scroll-padding-top:
        calc(var(--btf-header-height) + 24px);
    scrollbar-gutter: stable;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    min-height: 100vh;
    margin: 0;

    font-family: var(--btf-font-body);
    font-size: var(--btf-text-md);
    font-weight: 400;
    line-height: 1.7;

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

    /*
       Textura SVG sin degradados.
       Produce una cuadrícula orgánica muy tenue.
    */
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpath d='M0 71.5H72M71.5 0V72' fill='none' stroke='%23102D21' stroke-opacity='.035'/%3E%3Ccircle cx='0' cy='0' r='1.2' fill='%23C66A32' fill-opacity='.07'/%3E%3C/svg%3E");

    background-repeat: repeat;
    background-position: center top;
    background-size: 72px 72px;

    overflow-x: hidden;

    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@supports (overflow: clip) {

    body {
        overflow-x: clip;
    }

}

main {
    display: block;
}

body > main {
    animation:
        btf-page-enter
        520ms
        var(--btf-ease-standard)
        both;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

button,
input,
textarea,
select {
    margin: 0;
    font: inherit;
}

button,
select {
    cursor: pointer;
}

button {
    border: 0;
}

textarea {
    resize: vertical;
}

a {
    color: inherit;
    text-decoration: none;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
figure,
blockquote {
    margin-top: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--btf-font-heading);
    color: var(--btf-forest-950);
    text-wrap: balance;
}

h1,
h2 {
    letter-spacing: -0.035em;
}

h3,
h4 {
    letter-spacing: -0.02em;
}

p {
    text-wrap: pretty;
}

ul,
ol {
    margin-top: 0;
}

[hidden] {
    display: none !important;
}

[id] {
    scroll-margin-top:
        calc(var(--btf-header-height) + 24px);
}


/* =========================================================
   TEXT SELECTION
========================================================= */

::selection {
    color: var(--btf-white);
    background-color: var(--btf-forest-700);
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

:focus-visible {
    outline:
        3px solid
        var(--btf-copper);

    outline-offset: 4px;
}

.btf-skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 100001;

    padding: 12px 18px;

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

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

    font-size: var(--btf-text-sm);
    font-weight: 700;

    transform: translateY(-160%);
    transition:
        transform
        var(--btf-transition-normal);
}

.btf-skip-link:focus {
    transform: translateY(0);
}


/* =========================================================
   GLOBAL CONTAINERS
========================================================= */

.btf-container {
    width:
        min(
            calc(100% - (var(--btf-page-padding) * 2)),
            var(--btf-container-width)
        );

    margin-inline: auto;
}

.btf-section {
    position: relative;
    padding-block: var(--btf-section-space);
}

.btf-section--light {
    background-color: var(--btf-surface);
}

.btf-section--cream {
    background-color: var(--btf-surface-soft);
}

.btf-section--dark {
    color: var(--btf-text-light);
    background-color: var(--btf-surface-dark);
}


/* =========================================================
   GLOBAL TYPOGRAPHIC COMPONENTS
========================================================= */

.btf-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 18px;

    color: var(--btf-copper);
    font-size: var(--btf-text-xs);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.btf-eyebrow::before {
    width: 30px;
    height: 1px;

    content: "";

    background-color: currentColor;
}

.btf-heading {
    max-width: 900px;
    margin-bottom: 22px;

    font-family: var(--btf-font-heading);
    font-size: var(--btf-heading-md);
    font-weight: 600;
    line-height: 0.98;

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

.btf-section--dark .btf-heading {
    color: var(--btf-white);
}

.btf-copy {
    max-width: 680px;
    margin-bottom: 0;

    color: var(--btf-text-soft);
    font-size: var(--btf-text-lg);
    line-height: 1.8;
}

.btf-section--dark .btf-copy {
    color: rgba(255, 255, 255, 0.72);
}


/* =========================================================
   GLOBAL BUTTONS
========================================================= */

.btf-button {
    position: relative;
    isolation: isolate;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 52px;
    padding: 14px 25px;

    overflow: hidden;

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

    font-size: var(--btf-text-sm);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.015em;
    text-align: center;

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

.btf-button::before {
    position: absolute;
    inset: 0;
    z-index: -1;

    content: "";

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

    transform: scaleX(0);
    transform-origin: right center;

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

.btf-button:hover::before,
.btf-button:focus-visible::before {
    transform: scaleX(1);
    transform-origin: left center;
}

.btf-button:hover {
    transform: translateY(-2px);
}

.btf-button:active {
    transform: translateY(0);
}

.btf-button--primary {
    color: var(--btf-white);
    background-color: var(--btf-copper);
    box-shadow:
        0 12px 28px
        rgba(156, 75, 34, 0.22);
}

.btf-button--primary:hover {
    box-shadow:
        0 16px 35px
        rgba(16, 45, 33, 0.22);
}

.btf-button--secondary {
    color: var(--btf-forest-950);
    background-color: transparent;
    border-color: var(--btf-border);
}

.btf-button--secondary::before {
    background-color: var(--btf-forest-950);
}

.btf-button--secondary:hover {
    color: var(--btf-white);
    border-color: var(--btf-forest-950);
}

.btf-button--light {
    color: var(--btf-white);
    background-color: transparent;
    border-color: var(--btf-border-light);
}

.btf-button--light::before {
    background-color: var(--btf-copper);
}

.btf-button--light:hover {
    border-color: var(--btf-copper);
}


/* =========================================================
   GLOBAL CARDS
========================================================= */

.btf-card {
    background-color: var(--btf-surface);
    border: 1px solid var(--btf-border);
    border-radius: var(--btf-radius-md);

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

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

.btf-card:hover {
    border-color: var(--btf-border-copper);
    box-shadow: var(--btf-shadow-md);
    transform: translateY(-5px);
}


/* =========================================================
   GLOBAL FORM CONTROLS
========================================================= */

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

.btf-field label {
    color: var(--btf-forest-950);
    font-size: var(--btf-text-sm);
    font-weight: 800;
}

.btf-field input,
.btf-field textarea,
.btf-field select {
    width: 100%;
    min-height: 52px;
    padding: 13px 15px;

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

    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);
}

.btf-field textarea {
    min-height: 150px;
}

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

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

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


/* =========================================================
   PAGE TRANSITION
========================================================= */

.btf-page-transition {
    position: fixed;
    inset: 0;
    z-index: 100000;

    display: grid;
    place-items: center;

    visibility: hidden;
    pointer-events: none;

    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='88' height='88' viewBox='0 0 88 88'%3E%3Cpath d='M0 87.5H88M87.5 0V88' fill='none' stroke='%23FFFFFF' stroke-opacity='.045'/%3E%3Ccircle cx='0' cy='0' r='1.4' fill='%23C66A32' fill-opacity='.22'/%3E%3C/svg%3E");

    background-repeat: repeat;
    background-size: 88px 88px;

    transform: translateY(100%);

    transition:
        transform 560ms var(--btf-ease-smooth),
        visibility 0s linear 560ms;

    will-change: transform;
}

html.btf-page-is-leaving .btf-page-transition {
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0);

    transition-delay: 0s;
}

.btf-page-transition.btf-transition-reset {
    transition: none !important;
}

.btf-page-transition__content {
    display: grid;
    justify-items: center;
    gap: 8px;

    padding: 28px;
    text-align: center;
}

.btf-page-transition__eyebrow {
    color: var(--btf-copper);
    font-size: var(--btf-text-xs);
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.btf-page-transition__name {
    font-family: var(--btf-font-heading);
    font-size: clamp(2.1rem, 6vw, 4.7rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.035em;
}

.btf-page-transition__line {
    width: 72px;
    height: 2px;
    margin-top: 12px;

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

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

html.btf-page-is-leaving
.btf-page-transition__line {
    animation:
        btf-transition-line
        520ms
        var(--btf-ease-standard)
        forwards;
}


/* =========================================================
   INTERNAL SECTION TRANSITION
========================================================= */

.btf-section-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;

    width: 100%;
    height: 3px;

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

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

    pointer-events: none;
}

html.btf-section-is-moving
.btf-section-progress {
    animation:
        btf-section-progress
        820ms
        var(--btf-ease-standard)
        both;
}


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

@keyframes btf-page-enter {

    from {
        opacity: 0.01;
    }

    to {
        opacity: 1;
    }

}

@keyframes btf-transition-line {

    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }

}

@keyframes btf-section-progress {

    0% {
        opacity: 0;
        transform: scaleX(0);
    }

    12% {
        opacity: 1;
    }

    74% {
        opacity: 1;
        transform: scaleX(0.82);
    }

    100% {
        opacity: 0;
        transform: scaleX(1);
    }

}





































/* =========================================================
   BOOTS TREE & FENCE
   HEADER
========================================================= */

:root {
    --btf-header-z-index: 10000;
    --btf-header-background: rgba(16, 45, 33, 0.92);
    --btf-header-background-scrolled: rgba(16, 45, 33, 0.98);
    --btf-header-border: rgba(255, 255, 255, 0.11);
}


/* =========================================================
   ACCESSIBILITY UTILITY
========================================================= */

.btf-visually-hidden {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;

    white-space: nowrap !important;
    border: 0 !important;
}


/* =========================================================
   HEADER STRUCTURE
========================================================= */

.btf-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: var(--btf-header-z-index);

    width: 100%;

    pointer-events: none;
}

.btf-header__bar {
    position: relative;
    z-index: 3;

    width: 100%;
    height: var(--btf-header-height);

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

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

    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.025);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    pointer-events: auto;

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

.btf-header.is-scrolled .btf-header__bar {
    background-color:
        var(--btf-header-background-scrolled);

    border-bottom-color:
        rgba(255, 255, 255, 0.08);

    box-shadow:
        0 14px 38px rgba(0, 0, 0, 0.16);
}

.btf-header__bar::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;

    width: 0;
    height: 1px;

    margin-inline: auto;

    content: "";

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

    transition:
        width
        600ms
        var(--btf-ease-standard);
}

.btf-header.is-scrolled
.btf-header__bar::after {
    width: 100%;
}

.btf-header__inner {
    position: relative;

    display: grid;
    align-items: center;

    height: 100%;
}


/* =========================================================
   LOGO
========================================================= */

.btf-header__brand {
    position: relative;
    z-index: 2;

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

    border-radius: 50%;

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

.btf-header__brand:hover {
    transform: translateY(-2px);
}

.btf-header__brand:focus-visible {
    outline-offset: 5px;
}

.btf-header__brand img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    border-radius: 50%;

    box-shadow:
        0 7px 20px rgba(0, 0, 0, 0.18);

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

.btf-header__brand:hover img {
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.24);
}


/* =========================================================
   DESKTOP NAVIGATION
========================================================= */

.btf-header__desktop-nav {
    min-width: 0;
}

.btf-header__nav-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 2.1vw, 38px);

    padding: 0;
    margin: 0;

    list-style: none;
}

.btf-header__nav-link {
    position: relative;

    display: inline-flex;
    align-items: center;

    min-height: 46px;

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

    font-size: 0.79rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.055em;
    text-transform: uppercase;

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

.btf-header__nav-link::after {
    position: absolute;
    right: 0;
    bottom: 7px;
    left: 0;

    width: 100%;
    height: 2px;

    content: "";

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

    transform: scaleX(0);
    transform-origin: right center;

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

.btf-header__nav-link:hover,
.btf-header__nav-link:focus-visible,
.btf-header__nav-link[aria-current="page"],
.btf-header__nav-link[aria-current="location"] {
    color: var(--btf-white);
}

.btf-header__nav-link:hover::after,
.btf-header__nav-link:focus-visible::after,
.btf-header__nav-link[aria-current="page"]::after,
.btf-header__nav-link[aria-current="location"]::after {
    transform: scaleX(1);
    transform-origin: left center;
}


/* =========================================================
   FREE ESTIMATE BUTTON
========================================================= */

.btf-header__estimate {
    position: relative;
    isolation: isolate;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-height: 50px;
    padding: 11px 18px;

    overflow: hidden;

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

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

    box-shadow:
        0 12px 26px rgba(0, 0, 0, 0.18);

    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.025em;
    text-align: center;

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

.btf-header__estimate::before {
    position: absolute;
    inset: 0;
    z-index: -1;

    content: "";

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

    transform: scaleX(0);
    transform-origin: right center;

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

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

    box-shadow:
        0 15px 34px rgba(0, 0, 0, 0.24);

    transform: translateY(-2px);
}

.btf-header__estimate:hover::before,
.btf-header__estimate:focus-visible::before {
    transform: scaleX(1);
    transform-origin: left center;
}

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

    width: 19px;
    height: 19px;
}

.btf-header__estimate-icon svg {
    width: 100%;
    height: 100%;
}


/* =========================================================
   HAMBURGER BUTTON
========================================================= */

.btf-header__menu-button {
    position: relative;
    z-index: 4;

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

    width: 48px;
    height: 48px;
    padding: 0;

    color: var(--btf-white);
    background-color: rgba(255, 255, 255, 0.065);

    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: var(--btf-radius-sm);

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

.btf-header__menu-button:hover,
.btf-header__menu-button:focus-visible {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}

.btf-header__menu-button:active {
    transform: scale(0.96);
}

.btf-header__menu-icon {
    position: relative;

    display: block;

    width: 22px;
    height: 16px;
}

.btf-header__menu-icon span {
    position: absolute;
    left: 0;

    display: block;

    width: 100%;
    height: 2px;

    background-color: currentColor;
    border-radius: 2px;

    transform-origin: center;

    transition:
        top var(--btf-transition-normal),
        width var(--btf-transition-normal),
        transform var(--btf-transition-normal),
        opacity var(--btf-transition-fast);
}

.btf-header__menu-icon span:nth-child(1) {
    top: 0;
}

.btf-header__menu-icon span:nth-child(2) {
    top: 7px;
    width: 72%;
}

.btf-header__menu-icon span:nth-child(3) {
    top: 14px;
}

.btf-header.is-menu-open
.btf-header__menu-icon span:nth-child(1) {
    top: 7px;
    transform: rotate(45deg);
}

.btf-header.is-menu-open
.btf-header__menu-icon span:nth-child(2) {
    width: 0;
    opacity: 0;
}

.btf-header.is-menu-open
.btf-header__menu-icon span:nth-child(3) {
    top: 7px;
    transform: rotate(-45deg);
}


/* =========================================================
   MOBILE NAVIGATION OVERLAY
========================================================= */

.btf-mobile-nav {
    position: fixed;
    top: var(--btf-header-height);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;

    display: flex;
    align-items: stretch;
    justify-content: flex-start;

    visibility: hidden;
    opacity: 0;

    pointer-events: none;

    transition:
        opacity var(--btf-transition-normal),
        visibility 0s linear 360ms;
}

.btf-header.is-menu-open
.btf-mobile-nav {
    visibility: visible;
    opacity: 1;

    pointer-events: auto;

    transition-delay: 0s;
}

.btf-mobile-nav__backdrop {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    padding: 0;

    background-color: rgba(12, 20, 15, 0.68);
    border: 0;

    opacity: 0;

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

.btf-header.is-menu-open
.btf-mobile-nav__backdrop {
    opacity: 1;
}

.btf-mobile-nav__panel {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;

    width: min(100%, 540px);
    height: 100%;
    padding:
        clamp(28px, 5vh, 52px)
        var(--btf-page-padding)
        28px;

    overflow-x: hidden;
    overflow-y: auto;

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

    border-right: 1px solid rgba(255, 255, 255, 0.09);

    box-shadow:
        24px 0 60px rgba(0, 0, 0, 0.24);

    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    transform: translateX(-102%);

    transition:
        transform
        520ms
        var(--btf-ease-standard);
}

.btf-mobile-nav__panel::before {
    position: absolute;
    top: 0;
    left: var(--btf-page-padding);

    width: 64px;
    height: 3px;

    content: "";

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

.btf-header.is-menu-open
.btf-mobile-nav__panel {
    transform: translateX(0);
}


/* =========================================================
   MOBILE MENU CONTENT
========================================================= */

.btf-mobile-nav__heading {
    padding-bottom: 24px;

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

.btf-mobile-nav__eyebrow {
    display: block;

    margin-bottom: 8px;

    color: var(--btf-copper);

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

.btf-mobile-nav__heading h2 {
    margin-bottom: 0;

    color: var(--btf-white);

    font-size: clamp(2rem, 7vw, 3rem);
    font-weight: 600;
    line-height: 1;
}

.btf-mobile-nav__navigation {
    margin-top: 20px;
}

.btf-mobile-nav__list {
    padding: 0;
    margin: 0;

    list-style: none;
}

.btf-mobile-nav__list li {
    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.09);
}

.btf-mobile-nav__link {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 14px;

    min-height: 65px;

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

    font-family: var(--btf-font-heading);
    font-size: clamp(1.55rem, 5vw, 2rem);
    font-weight: 600;
    line-height: 1;

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

.btf-mobile-nav__link:hover,
.btf-mobile-nav__link:focus-visible,
.btf-mobile-nav__link[aria-current="page"],
.btf-mobile-nav__link[aria-current="location"] {
    padding-left: 8px;

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

.btf-mobile-nav__number {
    color: var(--btf-copper);

    font-family: var(--btf-font-body);
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.btf-mobile-nav__link svg {
    width: 22px;
    height: 22px;

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

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

.btf-mobile-nav__link:hover svg,
.btf-mobile-nav__link:focus-visible svg {
    transform: translateX(4px);
}


/* =========================================================
   MOBILE MENU FOOTER
========================================================= */

.btf-mobile-nav__footer {
    display: grid;
    gap: 16px;

    margin-top: auto;
    padding-top: 28px;
}

.btf-mobile-nav__footer p {
    max-width: 380px;
    margin-bottom: 0;

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

    font-size: 0.84rem;
    line-height: 1.65;
}

.btf-mobile-nav__phone {
    display: grid;
    gap: 3px;

    width: fit-content;

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

.btf-mobile-nav__phone span {
    color: var(--btf-copper);

    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.btf-mobile-nav__phone strong {
    font-size: 1.08rem;
    letter-spacing: 0.015em;
}

.btf-mobile-nav__estimate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    min-height: 56px;
    padding: 14px 18px;

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

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

    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.015em;

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

.btf-mobile-nav__estimate:hover,
.btf-mobile-nav__estimate:focus-visible {
    color: var(--btf-forest-950);
    background-color: var(--btf-white);
    border-color: var(--btf-white);
}

.btf-mobile-nav__estimate svg {
    width: 21px;
    height: 21px;

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


/* =========================================================
   SCROLL LOCK

   No se utiliza position: fixed en body.
   Por eso abrir el menú no mueve la página a scroll 0.
========================================================= */

html.btf-nav-lock,
body.btf-nav-lock {
    overflow: hidden;
}

body.btf-nav-lock {
    overscroll-behavior: none;
}


/* =========================================================
   HEADER ENTRY
========================================================= */

.btf-header__inner {
    animation:
        btf-header-enter
        700ms
        var(--btf-ease-standard)
        both;
}

@keyframes btf-header-enter {

    from {
        opacity: 0;
        transform: translateY(-16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}






































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

:root {
    --btf-hero-footer-height: 88px;
    --btf-hero-slide-duration: 6500ms;
}


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

   El header es fixed y está fuera del main.
   El padding superior reserva su espacio dentro de los 100svh.
========================================================= */

.btf-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);
}

.btf-hero::before {
    position: absolute;
    top: calc(var(--btf-header-height) + 8%);
    left: -170px;
    z-index: -1;

    width: 430px;
    height: 430px;

    content: "";

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

    border-radius: 50%;

    pointer-events: none;
}

.btf-hero::after {
    position: absolute;
    top: calc(var(--btf-header-height) + 15%);
    left: -108px;
    z-index: -1;

    width: 300px;
    height: 300px;

    content: "";

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

    border-radius: 50%;

    pointer-events: none;
}


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

.btf-hero__visual {
    position: absolute;
    inset: 0;
    z-index: -3;

    overflow: hidden;

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

.btf-hero__slide {
    position: absolute;
    inset: 0;

    margin: 0;

    visibility: hidden;
    opacity: 0;

    transform: scale(1.045);

    transition:
        opacity 900ms var(--btf-ease-standard),
        visibility 0s linear 900ms,
        transform 6500ms linear;

    pointer-events: none;
}

.btf-hero__slide.is-active {
    visibility: visible;
    opacity: 1;

    transform: scale(1);

    transition-delay: 0s;
}

.btf-hero__slide img {
    width: 100%;
    height: 100%;

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

    filter:
        saturate(0.82)
        contrast(1.04);
}

.btf-hero__image-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;

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

    pointer-events: none;
}


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

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

    display: grid;
    align-items: center;

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

.btf-hero__content {
    position: relative;

    width: 100%;
    max-width: 760px;
}

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

    margin-bottom: clamp(13px, 2.1vh, 24px);

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

    font-size: clamp(0.64rem, 1.4vh, 0.76rem);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.btf-hero__eyebrow-line {
    display: block;
    flex: 0 0 auto;

    width: 42px;
    height: 2px;

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

.btf-hero__title {
    display: grid;
    gap: 0;

    margin-bottom: clamp(16px, 2.6vh, 29px);

    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.82;
    letter-spacing: -0.055em;
}

.btf-hero__title-line {
    display: block;
}

.btf-hero__title-line--accent {
    color: var(--btf-sand);
}

.btf-hero__description {
    max-width: 630px;
    margin-bottom: clamp(20px, 3.3vh, 38px);

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

    font-size:
        clamp(
            0.95rem,
            min(1.25vw, 2.2vh),
            1.12rem
        );

    line-height: 1.75;
}


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

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

.btf-hero__primary-button svg {
    width: 20px;
    height: 20px;

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

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

.btf-hero__primary-button:hover svg,
.btf-hero__primary-button:focus-visible svg {
    transform: translate(3px, -3px);
}

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

    color: var(--btf-white);

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

.btf-hero__call:hover {
    transform: translateY(-2px);
}

.btf-hero__call-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.065);

    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-hero__call:hover
.btf-hero__call-icon {
    color: var(--btf-white);
    background-color: var(--btf-copper);
    border-color: var(--btf-copper);
}

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

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

.btf-hero__call-content {
    display: grid;
    gap: 2px;
}

.btf-hero__call-content small {
    color: rgba(255, 255, 255, 0.53);

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

.btf-hero__call-content strong {
    font-size: 0.96rem;
    line-height: 1.2;
}


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

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

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

.btf-hero__trust-item {
    display: inline-flex;
    align-items: center;
    gap: 9px;

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

    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.025em;
}

.btf-hero__trust-icon {
    display: grid;
    place-items: center;

    width: 22px;
    height: 22px;

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

.btf-hero__trust-icon svg {
    width: 100%;
    height: 100%;

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


/* =========================================================
   FEATURED SERVICE CARD
========================================================= */

.btf-hero__feature {
    position: relative;

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

    width: min(100%, 365px);
    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);

    transition:
        transform var(--btf-transition-slow),
        box-shadow var(--btf-transition-normal);
}

.btf-hero__feature:hover {
    transform: translateY(-5px);
    box-shadow:
        0 34px 85px
        rgba(0, 0, 0, 0.34);
}

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

    width: 62px;
    height: 3px;

    content: "";

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

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

    margin-bottom: 25px;
}

.btf-hero__feature-label {
    color: var(--btf-text-muted);

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

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

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

.btf-hero__feature-content {
    transition:
        opacity 180ms ease,
        transform 180ms ease;
}

.btf-hero__feature.is-updating
.btf-hero__feature-content {
    opacity: 0;
    transform: translateY(7px);
}

.btf-hero__feature-content h2 {
    margin-bottom: 13px;

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

    font-size: clamp(2rem, 2.8vw, 2.65rem);
    font-weight: 600;
    line-height: 0.98;
}

.btf-hero__feature-content p {
    margin-bottom: 25px;

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

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

.btf-hero__feature-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding-top: 17px;

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

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

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.btf-hero__feature-link svg {
    width: 22px;
    height: 22px;

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

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

.btf-hero__feature-link:hover svg,
.btf-hero__feature-link:focus-visible svg {
    transform: translateX(5px);
}


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

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

    height: var(--btf-hero-footer-height);

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

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

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

.btf-hero__footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    height: 100%;
}


/* =========================================================
   SERVICE SWITCHER
========================================================= */

.btf-hero__switcher {
    display: flex;
    align-items: stretch;

    height: 100%;
}

.btf-hero__switcher-button {
    position: relative;

    display: flex;
    align-items: center;
    gap: 12px;

    min-width: 182px;
    height: 100%;
    padding: 0 25px;

    overflow: hidden;

    color: rgba(255, 255, 255, 0.46);
    background-color: transparent;

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

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

.btf-hero__switcher-button:first-child {
    border-left:
        1px solid
        rgba(255, 255, 255, 0.1);
}

.btf-hero__switcher-button:hover,
.btf-hero__switcher-button:focus-visible,
.btf-hero__switcher-button.is-active {
    color: var(--btf-white);
    background-color: rgba(255, 255, 255, 0.045);
}

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

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

.btf-hero__switcher-text {
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.btf-hero__switcher-progress {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    height: 3px;

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

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

.btf-hero__switcher-button.is-active.is-progressing
.btf-hero__switcher-progress {
    animation:
        btf-hero-progress
        var(--btf-hero-slide-duration)
        linear
        forwards;
}


/* =========================================================
   SCROLL LINK
========================================================= */

.btf-hero__scroll-link {
    display: inline-flex;
    align-items: center;
    gap: 13px;

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

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

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

.btf-hero__scroll-link:hover,
.btf-hero__scroll-link:focus-visible {
    color: var(--btf-white);
}

.btf-hero__scroll-icon {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    color: var(--btf-copper);

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

    border-radius: 50%;

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

.btf-hero__scroll-link:hover
.btf-hero__scroll-icon {
    color: var(--btf-white);
    background-color: var(--btf-copper);
    border-color: var(--btf-copper);

    transform: translateY(3px);
}

.btf-hero__scroll-icon svg {
    width: 18px;
    height: 18px;

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


/* =========================================================
   HERO ENTRANCE ANIMATIONS

   El contenido permanece visible si JavaScript no carga.
========================================================= */

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

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

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

.btf-hero.is-enhanced.is-ready
[data-btf-hero-reveal]:nth-child(1) {
    transition-delay: 80ms;
}

.btf-hero.is-enhanced.is-ready
[data-btf-hero-reveal]:nth-child(2) {
    transition-delay: 150ms;
}

.btf-hero.is-enhanced.is-ready
[data-btf-hero-reveal]:nth-child(3) {
    transition-delay: 220ms;
}

.btf-hero.is-enhanced.is-ready
[data-btf-hero-reveal]:nth-child(4) {
    transition-delay: 290ms;
}

.btf-hero.is-enhanced.is-ready
[data-btf-hero-reveal]:nth-child(5) {
    transition-delay: 360ms;
}


/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes btf-hero-progress {

    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }

}





































/* =========================================================
   BOOTS TREE & FENCE
   MAIN SERVICES
========================================================= */

.btf-services {
    position: relative;
    isolation: isolate;

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

    overflow: hidden;

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

.btf-services::before {
    position: absolute;
    top: 0;
    right: clamp(18px, 6vw, 110px);
    z-index: -1;

    width: 1px;
    height: 150px;

    content: "";

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

.btf-services::after {
    position: absolute;
    top: 150px;
    right: calc(clamp(18px, 6vw, 110px) - 4px);
    z-index: -1;

    width: 9px;
    height: 9px;

    content: "";

    background-color: var(--btf-copper);
    border-radius: 50%;
}


/* =========================================================
   SECTION HEADER
========================================================= */

.btf-services__header {
    display: grid;
    align-items: end;

    margin-bottom: clamp(44px, 6vw, 78px);
}

.btf-services__heading-group {
    min-width: 0;
}

.btf-services__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 13px;

    margin-bottom: 20px;

    color: var(--btf-copper);

    font-size: var(--btf-text-xs);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.btf-services__eyebrow > span {
    display: inline-grid;
    place-items: center;

    width: 31px;
    height: 31px;

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

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

    font-size: 0.62rem;
    letter-spacing: 0;
}

.btf-services__title {
    max-width: 820px;
    margin-bottom: 0;

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

    font-family: var(--btf-font-heading);
    font-size: var(--btf-heading-md);
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.btf-services__title em {
    display: block;

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

    font-weight: 500;
}

.btf-services__introduction {
    display: grid;
    gap: 24px;

    min-width: 0;
}

.btf-services__introduction p {
    max-width: 540px;
    margin-bottom: 0;

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

    font-size: 1rem;
    line-height: 1.8;
}

.btf-services__gallery-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    width: fit-content;

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

    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.07em;
    text-transform: uppercase;

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

.btf-services__gallery-link 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-services__gallery-link:hover,
.btf-services__gallery-link:focus-visible {
    color: var(--btf-copper-dark);
}

.btf-services__gallery-link:hover svg,
.btf-services__gallery-link:focus-visible svg {
    transform: translateX(5px);
}


/* =========================================================
   SERVICES GRID
========================================================= */

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


/* =========================================================
   CLICKABLE SERVICE CARD
========================================================= */

.btf-service-card {
    --btf-service-rotate-x: 0deg;
    --btf-service-rotate-y: 0deg;
    --btf-service-image-x: 0px;
    --btf-service-image-y: 0px;

    position: relative;
    isolation: isolate;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    min-width: 0;
    min-height: 560px;

    padding: clamp(24px, 3.2vw, 42px);

    overflow: hidden;

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

    border:
        1px solid
        rgba(16, 45, 33, 0.13);

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

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

    transform:
        perspective(1100px)
        rotateX(var(--btf-service-rotate-x))
        rotateY(var(--btf-service-rotate-y));

    transform-style: preserve-3d;

    transition:
        border-color var(--btf-transition-normal),
        box-shadow var(--btf-transition-normal),
        transform 180ms ease-out;

    will-change: transform;
}

.btf-service-card::before {
    position: absolute;
    top: 0;
    left: clamp(24px, 3.2vw, 42px);
    z-index: 5;

    width: 72px;
    height: 4px;

    content: "";

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

    transform: scaleX(0.48);
    transform-origin: left center;

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

.btf-service-card:hover,
.btf-service-card:focus-visible {
    border-color: var(--btf-border-copper);

    box-shadow:
        0 28px 70px
        rgba(16, 45, 33, 0.22);
}

.btf-service-card:hover::before,
.btf-service-card:focus-visible::before {
    transform: scaleX(1);
}

.btf-service-card:focus-visible {
    outline:
        3px solid
        var(--btf-copper);

    outline-offset: 5px;
}


/* =========================================================
   CARD IMAGE
========================================================= */

.btf-service-card__media {
    position: absolute;
    inset: 0;
    z-index: -3;

    margin: 0;

    overflow: hidden;
}

.btf-service-card__media img {
    width: calc(100% + 24px);
    max-width: none;
    height: calc(100% + 24px);

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

    filter:
        saturate(0.8)
        contrast(1.04);

    transform:
        translate(
            calc(-12px + var(--btf-service-image-x)),
            calc(-12px + var(--btf-service-image-y))
        )
        scale(1.04);

    transition:
        filter var(--btf-transition-slow),
        transform 700ms var(--btf-ease-standard);

    will-change: transform;
}

.btf-service-card:hover
.btf-service-card__media img,
.btf-service-card:focus-visible
.btf-service-card__media img {
    filter:
        saturate(0.98)
        contrast(1.06);

    transform:
        translate(
            calc(-12px + var(--btf-service-image-x)),
            calc(-12px + var(--btf-service-image-y))
        )
        scale(1);
}

.btf-service-card__overlay {
    position: absolute;
    inset: 0;
    z-index: -2;

    background-color: rgba(10, 28, 19, 0.62);

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

    pointer-events: none;
}

.btf-service-card:hover
.btf-service-card__overlay,
.btf-service-card:focus-visible
.btf-service-card__overlay {
    background-color: rgba(10, 28, 19, 0.71);
}


/* =========================================================
   CARD TOP
========================================================= */

.btf-service-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    transform: translateZ(28px);
}

.btf-service-card__number {
    color: var(--btf-white);

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

.btf-service-card__category {
    padding: 9px 12px;

    color: rgba(255, 255, 255, 0.76);
    background-color: rgba(16, 45, 33, 0.76);

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

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

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


/* =========================================================
   CARD CONTENT
========================================================= */

.btf-service-card__content {
    display: grid;
    gap: 30px;

    transform: translateZ(35px);
}

.btf-service-card__text {
    max-width: 570px;
}

.btf-service-card__text h3 {
    margin-bottom: 15px;

    color: var(--btf-white);

    font-family: var(--btf-font-heading);
    font-size: clamp(2.75rem, 5vw, 5rem);
    font-weight: 600;
    line-height: 0.9;
    letter-spacing: -0.045em;
}

.btf-service-card__text p {
    max-width: 510px;
    margin-bottom: 0;

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

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

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

    padding-top: 22px;

    color: var(--btf-white);

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

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

.btf-service-card__arrow {
    display: grid;
    flex: 0 0 auto;
    place-items: center;

    width: 48px;
    height: 48px;

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

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

    border-radius: 50%;

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

.btf-service-card__arrow svg {
    width: 20px;
    height: 20px;

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

.btf-service-card:hover
.btf-service-card__arrow,
.btf-service-card:focus-visible
.btf-service-card__arrow {
    color: var(--btf-forest-950);
    background-color: var(--btf-white);
    border-color: var(--btf-white);

    transform:
        translate(3px, -3px)
        rotate(3deg);
}


/* =========================================================
   SECTION FOOTER
========================================================= */

.btf-services__footer {
    display: grid;
    align-items: center;
    gap: 24px;

    margin-top: clamp(30px, 5vw, 54px);
    padding: clamp(24px, 3.4vw, 38px);

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

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

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

.btf-services__footer-mark {
    display: grid;
    place-items: center;

    width: 58px;
    height: 58px;

    color: var(--btf-forest-800);
    background-color: var(--btf-surface-soft);

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

.btf-services__footer-mark svg {
    width: 40px;
    height: 40px;

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

.btf-services__footer-copy {
    display: grid;
    gap: 4px;
}

.btf-services__footer-copy span {
    color: var(--btf-copper-dark);

    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.btf-services__footer-copy strong {
    max-width: 610px;

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

    font-family: var(--btf-font-heading);
    font-size: clamp(1.5rem, 2.4vw, 2.15rem);
    font-weight: 600;
    line-height: 1.08;
}

.btf-services__footer
.btf-button svg {
    width: 20px;
    height: 20px;

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

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

.btf-services__footer
.btf-button:hover svg {
    transform: translateX(4px);
}


/* =========================================================
   REVEAL ANIMATION

   Los elementos permanecen visibles cuando JS no carga.
========================================================= */

.btf-services.is-enhanced
[data-btf-services-reveal] {
    opacity: 0;
    transform: translateY(38px);
}

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

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

.btf-services.is-enhanced
.btf-service-card:nth-child(2).is-visible {
    transition-delay: 120ms;
}


































/* =========================================================
   BOOTS TREE & FENCE
   WHY CHOOSE US
========================================================= */

.btf-why {
    position: relative;
    isolation: isolate;

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

    overflow: hidden;

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

.btf-why::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;

    width: 100%;
    height: 1px;

    content: "";

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

.btf-why::after {
    position: absolute;
    right: -140px;
    bottom: -140px;
    z-index: -1;

    width: 380px;
    height: 380px;

    content: "";

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

    border-radius: 50%;

    pointer-events: none;
}


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

.btf-why__layout {
    display: grid;
    align-items: center;
    gap: clamp(55px, 7vw, 120px);
}


/* =========================================================
   VISUAL COMPOSITION
========================================================= */

.btf-why__visual {
    position: relative;

    width: 100%;
    max-width: 650px;
    min-height: 690px;
}

.btf-why__image {
    position: absolute;

    margin: 0;

    overflow: hidden;

    background-color: var(--btf-forest-800);
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: var(--btf-radius-md);

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

.btf-why__image img {
    width: calc(100% + 20px);
    max-width: none;
    height: calc(100% + 20px);

    object-fit: cover;

    filter:
        saturate(0.82)
        contrast(1.04);

    transform:
        translate(
            calc(-10px + var(--btf-why-image-x, 0px)),
            calc(-10px + var(--btf-why-image-y, 0px))
        )
        scale(1.035);

    transition:
        filter var(--btf-transition-slow),
        transform 700ms var(--btf-ease-standard);

    will-change: transform;
}

.btf-why__image:hover img {
    filter:
        saturate(0.98)
        contrast(1.05);

    transform:
        translate(
            calc(-10px + var(--btf-why-image-x, 0px)),
            calc(-10px + var(--btf-why-image-y, 0px))
        )
        scale(1);
}

.btf-why__image--main {
    top: 0;
    left: 0;

    width: 77%;
    height: 580px;
}

.btf-why__image--main img {
    object-position: center;
}

.btf-why__image--secondary {
    right: 0;
    bottom: 0;
    z-index: 2;

    width: 52%;
    height: 305px;

    border:
        10px solid
        var(--btf-forest-950);
}

.btf-why__image--secondary img {
    object-position: center;
}

.btf-why__visual-label {
    position: absolute;
    bottom: 43px;
    left: 0;
    z-index: 3;

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

    width: min(68%, 360px);
    padding: 19px 21px;

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

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

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

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

.btf-why__visual-label-number {
    display: grid;
    place-items: center;

    width: 43px;
    height: 43px;

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

    border-radius: 50%;

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

.btf-why__visual-mark {
    position: absolute;
    top: 40px;
    right: 4%;
    z-index: 3;

    display: grid;
    place-items: center;

    width: 100px;
    height: 100px;

    color: rgba(255, 255, 255, 0.34);
    background-color: rgba(16, 45, 33, 0.82);

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

    border-radius: 50%;

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

.btf-why__visual-mark svg {
    width: 76px;
    height: 76px;

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


/* =========================================================
   HEADER CONTENT
========================================================= */

.btf-why__header {
    max-width: 760px;
}

.btf-why__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 13px;

    margin-bottom: 21px;

    color: var(--btf-copper);

    font-size: var(--btf-text-xs);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.btf-why__eyebrow > span {
    display: inline-grid;
    place-items: center;

    width: 31px;
    height: 31px;

    color: var(--btf-white);

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

    border-radius: 50%;

    font-size: 0.62rem;
    letter-spacing: 0;
}

.btf-why__title {
    max-width: 750px;
    margin-bottom: 25px;

    color: var(--btf-white);

    font-family: var(--btf-font-heading);
    font-size: var(--btf-heading-md);
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.btf-why__title em {
    display: block;

    color: var(--btf-sand);

    font-weight: 500;
}

.btf-why__description {
    max-width: 670px;
    margin-bottom: 0;

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

    font-size: 1rem;
    line-height: 1.82;
}


/* =========================================================
   REASONS GRID
========================================================= */

.btf-why__reasons {
    display: grid;
    gap: 1px;

    margin-top: clamp(38px, 5vw, 58px);

    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);
}


/* =========================================================
   REASON CARD
========================================================= */

.btf-why-card {
    position: relative;

    min-width: 0;
    padding: clamp(25px, 3vw, 34px);

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

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

.btf-why-card::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    height: 3px;

    content: "";

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

    transform: scaleX(0);
    transform-origin: right center;

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

.btf-why-card:hover {
    z-index: 2;

    background-color: var(--btf-forest-800);
    transform: translateY(-3px);
}

.btf-why-card:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
}

.btf-why-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 26px;
}

.btf-why-card__number {
    color: rgba(255, 255, 255, 0.35);

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

.btf-why-card__icon {
    display: grid;
    place-items: center;

    width: 45px;
    height: 45px;

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

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

    border-radius: 50%;

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

.btf-why-card:hover
.btf-why-card__icon {
    color: var(--btf-white);
    background-color: var(--btf-copper);
    border-color: var(--btf-copper);

    transform: rotate(5deg);
}

.btf-why-card__icon svg {
    width: 22px;
    height: 22px;

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

.btf-why-card h3 {
    margin-bottom: 12px;

    color: var(--btf-white);

    font-family: var(--btf-font-heading);
    font-size: clamp(1.65rem, 2.4vw, 2.15rem);
    font-weight: 600;
    line-height: 1;
}

.btf-why-card p {
    margin-bottom: 0;

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

    font-size: 0.84rem;
    line-height: 1.72;
}


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

.btf-why__contact {
    display: grid;
    align-items: center;
    gap: 25px;

    margin-top: 25px;
    padding: clamp(24px, 3.2vw, 35px);

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

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

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

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

.btf-why__contact-copy span {
    color: var(--btf-copper-dark);

    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.btf-why__contact-copy strong {
    color: var(--btf-forest-950);

    font-family: var(--btf-font-heading);
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    font-weight: 600;
    line-height: 1.05;
}

.btf-why__contact-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 18px;
}

.btf-why__phone {
    display: inline-flex;
    align-items: center;
    gap: 10px;

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

    font-size: 0.8rem;
    font-weight: 800;

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

.btf-why__phone:hover,
.btf-why__phone:focus-visible {
    color: var(--btf-copper-dark);
    transform: translateY(-2px);
}

.btf-why__phone-icon {
    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;

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

    border-radius: 50%;
}

.btf-why__phone-icon svg {
    width: 18px;
    height: 18px;

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

.btf-why__contact
.btf-button {
    width: auto;
}

.btf-why__contact
.btf-button 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-why__contact
.btf-button:hover svg,
.btf-why__contact
.btf-button:focus-visible svg {
    transform: translate(3px, -3px);
}


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

   Todo permanece visible cuando JS no carga.
========================================================= */

.btf-why.is-enhanced
[data-btf-why-reveal] {
    opacity: 0;
    transform: translateY(38px);
}

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

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

.btf-why.is-enhanced
.btf-why-card:nth-child(2).is-visible {
    transition-delay: 80ms;
}

.btf-why.is-enhanced
.btf-why-card:nth-child(3).is-visible {
    transition-delay: 160ms;
}

.btf-why.is-enhanced
.btf-why-card:nth-child(4).is-visible {
    transition-delay: 240ms;
}



































/* =========================================================
   BOOTS TREE & FENCE
   REVIEWS / TRUST
========================================================= */

.btf-reviews {
    --btf-reviews-shift-x: 0px;
    --btf-reviews-shift-y: 0px;

    position: relative;
    isolation: isolate;

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

    overflow: hidden;

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

.btf-reviews::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: -1;

    height: 1px;

    content: "";

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

.btf-reviews::after {
    position: absolute;
    top: 0;
    left: 7%;
    z-index: -1;

    width: 82px;
    height: 4px;

    content: "";

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


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

.btf-reviews__rings {
    position: absolute;
    top: 8%;
    right: -125px;
    z-index: -1;

    width: 350px;
    height: 350px;

    pointer-events: none;

    transform:
        translate(
            var(--btf-reviews-shift-x),
            var(--btf-reviews-shift-y)
        );

    transition:
        transform
        800ms
        var(--btf-ease-standard);
}

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

    border:
        1px solid
        rgba(16, 45, 33, 0.075);

    border-radius: 50%;

    transform:
        translate(-50%, -50%)
        scale(0.85);

    opacity: 0;

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

.btf-reviews__rings span:nth-child(1) {
    width: 100%;
    height: 100%;
}

.btf-reviews__rings span:nth-child(2) {
    width: 76%;
    height: 76%;

    border-color:
        rgba(198, 106, 50, 0.11);
}

.btf-reviews__rings span:nth-child(3) {
    width: 52%;
    height: 52%;
}

.btf-reviews__rings span:nth-child(4) {
    width: 27%;
    height: 27%;

    background-color:
        rgba(198, 106, 50, 0.04);
}

.btf-reviews.is-in-view
.btf-reviews__rings span {
    opacity: 1;

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

.btf-reviews.is-in-view
.btf-reviews__rings span:nth-child(2) {
    transition-delay: 90ms;
}

.btf-reviews.is-in-view
.btf-reviews__rings span:nth-child(3) {
    transition-delay: 180ms;
}

.btf-reviews.is-in-view
.btf-reviews__rings span:nth-child(4) {
    transition-delay: 270ms;
}


/* =========================================================
   DECORATIVE FENCE
========================================================= */

.btf-reviews__fence {
    position: absolute;
    bottom: 0;
    left: -22px;
    z-index: -1;

    display: flex;
    align-items: flex-end;
    gap: 8px;

    height: 230px;

    opacity: 0.08;

    pointer-events: none;
}

.btf-reviews__fence::after {
    position: absolute;
    bottom: 47px;
    left: 0;

    width: 100%;
    height: 12px;

    content: "";

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

.btf-reviews__fence span {
    position: relative;

    width: 35px;
    height: 175px;

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

    transform: translateY(30px);

    transition:
        transform
        850ms
        var(--btf-ease-standard);
}

.btf-reviews__fence span::before {
    position: absolute;
    top: -17px;
    left: 0;

    width: 0;
    height: 0;

    content: "";

    border-right: 17.5px solid transparent;
    border-bottom: 18px solid var(--btf-bark-800);
    border-left: 17.5px solid transparent;
}

.btf-reviews__fence span:nth-child(even) {
    height: 205px;
}

.btf-reviews.is-in-view
.btf-reviews__fence span {
    transform: translateY(0);
}

.btf-reviews.is-in-view
.btf-reviews__fence span:nth-child(2) {
    transition-delay: 70ms;
}

.btf-reviews.is-in-view
.btf-reviews__fence span:nth-child(3) {
    transition-delay: 140ms;
}

.btf-reviews.is-in-view
.btf-reviews__fence span:nth-child(4) {
    transition-delay: 210ms;
}

.btf-reviews.is-in-view
.btf-reviews__fence span:nth-child(5) {
    transition-delay: 280ms;
}

.btf-reviews.is-in-view
.btf-reviews__fence span:nth-child(6) {
    transition-delay: 350ms;
}


/* =========================================================
   SECTION HEADER
========================================================= */

.btf-reviews__header {
    display: grid;
    align-items: end;

    margin-bottom: clamp(45px, 6vw, 76px);
}

.btf-reviews__heading-group {
    min-width: 0;
}

.btf-reviews__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 13px;

    margin-bottom: 20px;

    color: var(--btf-copper);

    font-size: var(--btf-text-xs);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.btf-reviews__eyebrow > span {
    display: inline-grid;
    place-items: center;

    width: 31px;
    height: 31px;

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

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

    font-size: 0.62rem;
    letter-spacing: 0;
}

.btf-reviews__title {
    max-width: 820px;
    margin-bottom: 0;

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

    font-family: var(--btf-font-heading);
    font-size: var(--btf-heading-md);
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.btf-reviews__title em {
    display: block;

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

    font-weight: 500;
}

.btf-reviews__introduction {
    display: grid;
    gap: 25px;
}

.btf-reviews__introduction p {
    max-width: 540px;
    margin-bottom: 0;

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

    font-size: 1rem;
    line-height: 1.82;
}

.btf-reviews__header-line {
    position: relative;

    width: 100%;
    height: 1px;

    overflow: hidden;

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

.btf-reviews__header-line span {
    display: block;

    width: 80px;
    height: 100%;

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


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

.btf-reviews__layout {
    display: grid;
    align-items: stretch;
    gap: 24px;
}


/* =========================================================
   ELFSIGHT WIDGET SHELL
========================================================= */

.btf-reviews__widget-shell {
    position: relative;

    min-width: 0;

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

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

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

/*
   Important:
   The Elfsight container is not hidden or transformed.
   This helps the widget calculate its width correctly.
*/

.btf-reviews__widget-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    min-height: 93px;
    padding: 20px 25px;

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

.btf-reviews__widget-heading {
    display: flex;
    align-items: center;
    gap: 14px;

    min-width: 0;
}

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

    width: 49px;
    height: 49px;

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

    border-radius: 50%;
}

.btf-reviews__quote-icon svg {
    width: 26px;
    height: 26px;

    fill: currentColor;
}

.btf-reviews__widget-heading div {
    display: grid;
    gap: 4px;

    min-width: 0;
}

.btf-reviews__widget-heading div > span {
    color: var(--btf-copper-dark);

    font-size: 0.64rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.btf-reviews__widget-heading strong {
    color: var(--btf-forest-950);

    font-family: var(--btf-font-heading);
    font-size: clamp(1.35rem, 2vw, 1.85rem);
    font-weight: 600;
    line-height: 1;
}

.btf-reviews__widget-source {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    flex: 0 0 auto;

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

    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.035em;
}

.btf-reviews__status-dot {
    position: relative;

    width: 8px;
    height: 8px;

    background-color: var(--btf-copper);
    border-radius: 50%;
}

.btf-reviews__status-dot::after {
    position: absolute;
    inset: -4px;

    content: "";

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

    border-radius: 50%;
}

.btf-reviews__widget-shell.is-widget-ready
.btf-reviews__status-dot {
    background-color: var(--btf-forest-600);
}

.btf-reviews__elfsight {
    width: 100%;
    min-width: 0;
    min-height: 370px;
    padding: 25px;

    overflow: visible;
}

.btf-reviews__elfsight > div {
    width: 100%;
    min-width: 0;
}

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

    min-height: 67px;
    padding: 16px 25px;

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

.btf-reviews__widget-footer > span {
    color: var(--btf-text-muted);

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

.btf-reviews__widget-footer a {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    flex: 0 0 auto;

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

    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.055em;
    text-transform: uppercase;

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

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

.btf-reviews__widget-footer svg {
    width: 19px;
    height: 19px;

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

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

.btf-reviews__widget-footer a:hover svg,
.btf-reviews__widget-footer a:focus-visible svg {
    transform: translateX(4px);
}


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

.btf-reviews__trust-panel {
    position: relative;

    min-width: 0;
    padding: clamp(28px, 3.4vw, 43px);

    overflow: hidden;

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

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

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

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

.btf-reviews__trust-panel::before {
    position: absolute;
    top: 0;
    left: clamp(28px, 3.4vw, 43px);

    width: 70px;
    height: 4px;

    content: "";

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

.btf-reviews__trust-panel::after {
    position: absolute;
    right: -80px;
    bottom: -80px;

    width: 230px;
    height: 230px;

    content: "";

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

    border-radius: 50%;

    pointer-events: none;
}

.btf-reviews__trust-mark {
    position: absolute;
    top: 27px;
    right: 28px;

    width: 82px;
    height: 82px;

    color: rgba(255, 255, 255, 0.12);
}

.btf-reviews__trust-mark svg {
    width: 100%;
    height: 100%;

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

.btf-reviews__trust-eyebrow {
    display: block;

    margin-bottom: 20px;

    color: var(--btf-copper);

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

.btf-reviews__trust-panel > h3 {
    max-width: 420px;
    margin-bottom: 20px;

    color: var(--btf-white);

    font-family: var(--btf-font-heading);
    font-size: clamp(2.4rem, 4vw, 3.7rem);
    font-weight: 600;
    line-height: 0.93;
    letter-spacing: -0.04em;
}

.btf-reviews__trust-description {
    max-width: 480px;
    margin-bottom: 0;

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

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


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

.btf-reviews__trust-list {
    display: grid;

    margin-top: 36px;

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

.btf-reviews__trust-item {
    display: grid;
    grid-template-columns:
        27px
        43px
        minmax(0, 1fr);

    align-items: start;
    gap: 13px;

    padding-block: 22px;

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

.btf-reviews__trust-number {
    padding-top: 13px;

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

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

.btf-reviews__trust-icon {
    display: grid;
    place-items: center;

    width: 43px;
    height: 43px;

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

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

    border-radius: 50%;

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

.btf-reviews__trust-item:hover
.btf-reviews__trust-icon {
    color: var(--btf-white);
    background-color: var(--btf-copper);
    border-color: var(--btf-copper);

    transform: rotate(5deg);
}

.btf-reviews__trust-icon svg {
    width: 20px;
    height: 20px;

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

.btf-reviews__trust-item h4 {
    margin: 3px 0 7px;

    color: var(--btf-white);

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

.btf-reviews__trust-item p {
    margin-bottom: 0;

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

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


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

.btf-reviews__trust-actions {
    display: grid;
    gap: 14px;

    margin-top: 28px;
}

.btf-reviews__phone {
    display: flex;
    align-items: center;
    gap: 12px;

    min-width: 0;

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

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

    width: 45px;
    height: 45px;

    color: var(--btf-copper);

    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-reviews__phone:hover
.btf-reviews__phone-icon {
    color: var(--btf-white);
    background-color: var(--btf-copper);
    border-color: var(--btf-copper);
}

.btf-reviews__phone-icon svg {
    width: 20px;
    height: 20px;

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

.btf-reviews__phone > span:last-child {
    display: grid;
    gap: 3px;
}

.btf-reviews__phone small {
    color: rgba(255, 255, 255, 0.48);

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

.btf-reviews__phone strong {
    font-size: 0.9rem;
    line-height: 1.2;
}

.btf-reviews__estimate-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    min-height: 53px;
    padding: 13px 17px;

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

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

    font-size: 0.73rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.035em;
    text-transform: uppercase;

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

.btf-reviews__estimate-button:hover,
.btf-reviews__estimate-button:focus-visible {
    color: var(--btf-forest-950);
    background-color: var(--btf-white);
    border-color: var(--btf-white);
}

.btf-reviews__estimate-button svg {
    width: 20px;
    height: 20px;

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

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

.btf-reviews__estimate-button:hover svg,
.btf-reviews__estimate-button:focus-visible svg {
    transform: translate(3px, -3px);
}


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

.btf-reviews__trust-rail {
    display: grid;
    align-items: center;
    gap: 24px;

    margin-top: 24px;
    padding: 22px 25px;

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

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

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

.btf-reviews__rail-label {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btf-reviews__rail-label > span {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

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

    border-radius: 50%;

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

.btf-reviews__rail-label strong {
    color: var(--btf-forest-950);

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

.btf-reviews__rail-items {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 16px;

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

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

.btf-reviews__rail-items i {
    display: block;

    width: 5px;
    height: 5px;

    background-color: var(--btf-copper);
    border-radius: 50%;
}


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

   The Elfsight widget itself is intentionally not hidden.
========================================================= */

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

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

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

.btf-reviews.is-enhanced
.btf-reviews__trust-panel.is-visible {
    transition-delay: 100ms;
}

.btf-reviews.is-enhanced
.btf-reviews__trust-rail.is-visible {
    transition-delay: 170ms;
}

































/* =========================================================
   BOOTS TREE & FENCE
   SERVICE AREAS
========================================================= */

.btf-areas {
    position: relative;
    isolation: isolate;

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

    overflow: hidden;

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

.btf-areas::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: -1;

    height: 1px;

    content: "";

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

.btf-areas::after {
    position: absolute;
    top: 0;
    right: 7%;
    z-index: -1;

    width: 84px;
    height: 4px;

    content: "";

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


/* =========================================================
   DECORATIVE TOPOGRAPHY
========================================================= */

.btf-areas__topography {
    position: absolute;
    top: 7%;
    left: -145px;
    z-index: -1;

    width: 390px;
    height: 390px;

    pointer-events: none;
}

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

    border:
        1px solid
        rgba(16, 45, 33, 0.07);

    border-radius:
        46% 54% 58% 42% /
        52% 42% 58% 48%;

    transform:
        translate(-50%, -50%)
        rotate(var(--btf-topography-rotation, 0deg));
}

.btf-areas__topography span:nth-child(1) {
    width: 100%;
    height: 88%;

    --btf-topography-rotation: 8deg;
}

.btf-areas__topography span:nth-child(2) {
    width: 76%;
    height: 68%;

    border-color:
        rgba(198, 106, 50, 0.11);

    --btf-topography-rotation: -9deg;
}

.btf-areas__topography span:nth-child(3) {
    width: 51%;
    height: 48%;

    --btf-topography-rotation: 14deg;
}

.btf-areas__topography span:nth-child(4) {
    width: 25%;
    height: 23%;

    background-color:
        rgba(198, 106, 50, 0.035);

    --btf-topography-rotation: -5deg;
}


/* =========================================================
   DECORATIVE COORDINATES
========================================================= */

.btf-areas__coordinates {
    position: absolute;
    right: 25px;
    bottom: 9%;
    z-index: -1;

    display: flex;
    align-items: center;
    gap: 10px;

    color: rgba(16, 45, 33, 0.15);

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

    writing-mode: vertical-rl;

    pointer-events: none;
}

.btf-areas__coordinates i {
    display: block;

    width: 1px;
    height: 34px;

    background-color:
        rgba(198, 106, 50, 0.28);
}


/* =========================================================
   SECTION HEADER
========================================================= */

.btf-areas__header {
    display: grid;
    align-items: end;

    margin-bottom: clamp(45px, 6vw, 76px);
}

.btf-areas__heading-group {
    min-width: 0;
}

.btf-areas__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 13px;

    margin-bottom: 20px;

    color: var(--btf-copper);

    font-size: var(--btf-text-xs);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.btf-areas__eyebrow > span {
    display: inline-grid;
    place-items: center;

    width: 31px;
    height: 31px;

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

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

    font-size: 0.62rem;
    letter-spacing: 0;
}

.btf-areas__title {
    max-width: 820px;
    margin-bottom: 0;

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

    font-family: var(--btf-font-heading);
    font-size: var(--btf-heading-md);
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.btf-areas__title em {
    display: block;

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

    font-weight: 500;
}

.btf-areas__introduction {
    display: grid;
    gap: 24px;
}

.btf-areas__introduction p {
    max-width: 550px;
    margin-bottom: 0;

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

    font-size: 1rem;
    line-height: 1.82;
}

.btf-areas__contact-link {
    display: inline-flex;
    align-items: center;
    gap: 11px;

    width: fit-content;

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

    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;

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

.btf-areas__contact-link:hover,
.btf-areas__contact-link:focus-visible {
    color: var(--btf-copper-dark);
}

.btf-areas__contact-link svg {
    width: 20px;
    height: 20px;

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

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

.btf-areas__contact-link:hover svg,
.btf-areas__contact-link:focus-visible svg {
    transform: translateX(5px);
}


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

.btf-areas__layout {
    display: grid;
    align-items: stretch;
    gap: 24px;
}


/* =========================================================
   LOCATION PANEL
========================================================= */

.btf-areas__panel {
    position: relative;

    display: flex;
    flex-direction: column;

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

    overflow: hidden;

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

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

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

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

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

    width: 70px;
    height: 4px;

    content: "";

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

.btf-areas__panel::after {
    position: absolute;
    right: -85px;
    bottom: -85px;

    width: 240px;
    height: 240px;

    content: "";

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

    border-radius: 50%;

    pointer-events: none;
}

.btf-areas__panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;

    padding-bottom: 25px;

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

.btf-areas__panel-eyebrow {
    display: block;

    margin-bottom: 8px;

    color: var(--btf-copper);

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

.btf-areas__panel-heading h3 {
    margin-bottom: 0;

    color: var(--btf-white);

    font-family: var(--btf-font-heading);
    font-size: clamp(2rem, 3vw, 2.75rem);
    font-weight: 600;
    line-height: 0.98;
}

.btf-areas__city-count {
    flex: 0 0 auto;

    padding: 8px 10px;

    color: rgba(255, 255, 255, 0.69);
    background-color: rgba(255, 255, 255, 0.055);

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

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

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


/* =========================================================
   CITY LIST
========================================================= */

.btf-areas__city-list {
    display: grid;

    margin-top: 24px;
}

.btf-areas__city {
    position: relative;

    display: grid;
    grid-template-columns:
        28px
        43px
        minmax(0, 1fr)
        23px;

    align-items: center;
    gap: 12px;

    width: 100%;
    min-height: 74px;
    padding: 12px 10px;

    color: rgba(255, 255, 255, 0.7);
    background-color: transparent;

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

    border-radius: 0;

    text-align: left;

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

.btf-areas__city:last-child {
    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.1);
}

.btf-areas__city:hover,
.btf-areas__city:focus-visible,
.btf-areas__city.is-active {
    padding-left: 17px;

    color: var(--btf-white);
    background-color: rgba(255, 255, 255, 0.045);
}

.btf-areas__city::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;

    height: 2px;

    content: "";

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

    transform: scaleX(0);
    transform-origin: right center;

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

.btf-areas__city.is-active::after {
    transform: scaleX(1);
    transform-origin: left center;
}

.btf-areas__city-index {
    color: rgba(255, 255, 255, 0.31);

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

.btf-areas__city-pin {
    display: grid;
    place-items: center;

    width: 43px;
    height: 43px;

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

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

    border-radius: 50%;

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

.btf-areas__city.is-active
.btf-areas__city-pin {
    color: var(--btf-white);
    background-color: var(--btf-copper);
    border-color: var(--btf-copper);
}

.btf-areas__city-pin svg {
    width: 20px;
    height: 20px;

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

.btf-areas__city-copy {
    display: grid;
    gap: 3px;

    min-width: 0;
}

.btf-areas__city-copy strong {
    overflow: hidden;

    color: inherit;

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

    text-overflow: ellipsis;
    white-space: nowrap;
}

.btf-areas__city-copy small {
    color: rgba(255, 255, 255, 0.42);

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

.btf-areas__city-arrow {
    display: grid;
    place-items: center;

    width: 23px;
    height: 23px;

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

.btf-areas__city-arrow svg {
    width: 100%;
    height: 100%;

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

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

.btf-areas__city:hover
.btf-areas__city-arrow svg,
.btf-areas__city:focus-visible
.btf-areas__city-arrow svg {
    transform: translateX(4px);
}


/* =========================================================
   AVAILABILITY
========================================================= */

.btf-areas__availability {
    display: grid;
    grid-template-columns: 43px minmax(0, 1fr);
    align-items: start;
    gap: 13px;

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

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

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

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

.btf-areas__availability-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-areas__availability-icon svg {
    width: 21px;
    height: 21px;

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

.btf-areas__availability div {
    display: grid;
    gap: 5px;
}

.btf-areas__availability div > span {
    color: var(--btf-white);

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

.btf-areas__availability p {
    margin-bottom: 0;

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

    font-size: 0.74rem;
    line-height: 1.6;
}


/* =========================================================
   PANEL FOOTER
========================================================= */

.btf-areas__panel-footer {
    display: grid;
    gap: 15px;

    margin-top: auto;
    padding-top: 28px;
}

.btf-areas__phone {
    display: flex;
    align-items: center;
    gap: 12px;

    width: fit-content;

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

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

    width: 44px;
    height: 44px;

    color: var(--btf-copper);

    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-areas__phone:hover
.btf-areas__phone-icon {
    color: var(--btf-white);
    background-color: var(--btf-copper);
    border-color: var(--btf-copper);
}

.btf-areas__phone-icon svg {
    width: 20px;
    height: 20px;

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

.btf-areas__phone > span:last-child {
    display: grid;
    gap: 3px;
}

.btf-areas__phone small {
    color: rgba(255, 255, 255, 0.46);

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

.btf-areas__phone strong {
    font-size: 0.91rem;
    line-height: 1.2;
}

.btf-areas__estimate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    min-height: 52px;
    padding: 13px 17px;

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

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

    font-size: 0.71rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.045em;
    text-transform: uppercase;

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

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

.btf-areas__estimate svg {
    width: 20px;
    height: 20px;

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

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

.btf-areas__estimate:hover svg,
.btf-areas__estimate:focus-visible svg {
    transform: translate(3px, -3px);
}


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

.btf-areas__map-shell {
    position: relative;

    min-width: 0;
    min-height: 650px;

    overflow: hidden;

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

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

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

.btf-areas__map-top {
    position: absolute;
    top: 18px;
    right: 18px;
    left: 18px;
    z-index: 550;

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

    min-height: 57px;
    padding: 10px 12px 10px 16px;

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

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

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

    pointer-events: none;
}

.btf-areas__map-status {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    min-width: 0;

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

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

.btf-areas__map-status > span:last-child {
    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.btf-areas__map-status-dot {
    position: relative;

    flex: 0 0 auto;

    width: 8px;
    height: 8px;

    background-color: var(--btf-copper);
    border-radius: 50%;
}

.btf-areas__map-status-dot::after {
    position: absolute;
    inset: -4px;

    content: "";

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

    border-radius: 50%;
}

.btf-areas__reset {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    min-height: 36px;
    padding: 8px 10px;

    color: var(--btf-forest-950);
    background-color: var(--btf-surface-soft);

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

    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.035em;
    text-transform: uppercase;

    pointer-events: auto;

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

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

.btf-areas__reset svg {
    width: 16px;
    height: 16px;

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


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

.btf-areas__map {
    width: 100%;
    height: 100%;
    min-height: 650px;

    background-color: #D8DED8;
}

.btf-areas .leaflet-container {
    z-index: 1;

    font-family: var(--btf-font-body);

    background-color: #D8DED8;

    outline: none;
}

.btf-areas .leaflet-tile-pane {
    filter:
        saturate(0.72)
        contrast(1.02)
        brightness(0.98);
}

.btf-areas .leaflet-control-zoom {
    margin-top: 93px;
    margin-right: 18px;

    overflow: hidden;

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

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

.btf-areas .leaflet-control-zoom a {
    display: grid;
    place-items: center;

    width: 39px;
    height: 39px;

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

    border-bottom-color: var(--btf-border);

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

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

.btf-areas .leaflet-control-zoom a:hover {
    color: var(--btf-white);
    background-color: var(--btf-forest-950);
}

.btf-areas .leaflet-control-attribution {
    padding: 4px 7px;

    color: var(--btf-text-muted);
    background-color: rgba(255, 255, 255, 0.88);

    font-size: 0.57rem;
}

.btf-areas .leaflet-control-attribution a {
    color: var(--btf-forest-800);
}


/* =========================================================
   CUSTOM LEAFLET MARKER
========================================================= */

.btf-map-icon {
    background: transparent;
    border: 0;
}

.btf-map-pin {
    position: relative;

    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;

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

    border:
        4px solid
        var(--btf-white);

    border-radius:
        50% 50% 50% 12%;

    box-shadow:
        0 12px 28px
        rgba(16, 45, 33, 0.34);

    transform: rotate(-45deg);
}

.btf-map-pin::before {
    width: 12px;
    height: 12px;

    content: "";

    background-color: var(--btf-white);
    border-radius: 50%;

    transform: rotate(45deg);
}

.btf-map-pin::after {
    position: absolute;
    inset: -11px;

    content: "";

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

    border-radius: 50%;

    animation:
        btf-map-marker-pulse
        2.6s
        ease-out
        infinite;
}


/* =========================================================
   LEAFLET POPUP
========================================================= */

.btf-areas .leaflet-popup-content-wrapper {
    padding: 0;

    overflow: hidden;

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

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

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

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

.btf-areas .leaflet-popup-content {
    width: 225px !important;
    margin: 0;
}

.btf-areas .leaflet-popup-tip {
    background-color: var(--btf-white);
}

.btf-map-popup {
    display: grid;
}

.btf-map-popup__top {
    padding: 16px 18px;

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

.btf-map-popup__eyebrow {
    display: block;

    margin-bottom: 5px;

    color: var(--btf-copper);

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

.btf-map-popup__top strong {
    display: block;

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

.btf-map-popup__body {
    display: grid;
    gap: 12px;

    padding: 15px 18px 17px;
}

.btf-map-popup__body p {
    margin-bottom: 0;

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

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

.btf-map-popup__body a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

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

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


/* =========================================================
   MOBILE INTERACTION GATE
========================================================= */

.btf-areas__map-gate {
    position: absolute;
    inset: 0;
    z-index: 600;

    display: none;
    place-items: center;

    padding: 25px;

    background-color: rgba(16, 45, 33, 0.72);
}

.btf-areas__map-shell.is-map-locked
.btf-areas__map-gate {
    display: grid;
}

.btf-areas__map-gate-content {
    display: grid;
    justify-items: center;
    gap: 9px;

    width: min(100%, 310px);
    padding: 25px;

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

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

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

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

    text-align: center;
}

.btf-areas__map-gate-icon {
    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;
    margin-bottom: 4px;

    color: var(--btf-copper);

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

    border-radius: 50%;
}

.btf-areas__map-gate-icon svg {
    width: 23px;
    height: 23px;

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

.btf-areas__map-gate-content strong {
    font-family: var(--btf-font-heading);
    font-size: 1.65rem;
    font-weight: 600;
    line-height: 1;
}

.btf-areas__map-gate-content > span:not(
    .btf-areas__map-gate-icon
) {
    color: rgba(255, 255, 255, 0.58);

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

.btf-areas__map-gate-content button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-height: 44px;
    margin-top: 8px;
    padding: 10px 15px;

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

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

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

.btf-areas__map-gate-content button svg {
    width: 18px;
    height: 18px;

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


/* =========================================================
   DONE BUTTON
========================================================= */

.btf-areas__map-done {
    position: absolute;
    right: 17px;
    bottom: 37px;
    z-index: 610;

    display: none;
    align-items: center;
    gap: 7px;

    min-height: 40px;
    padding: 9px 13px;

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

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

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

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

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

.btf-areas__map-shell.is-map-active
.btf-areas__map-done {
    display: inline-flex;
}

.btf-areas__map-done svg {
    width: 17px;
    height: 17px;

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


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

.btf-areas__legend {
    position: absolute;
    bottom: 18px;
    left: 18px;
    z-index: 500;

    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 10px 12px;

    color: var(--btf-text-soft);
    background-color: rgba(255, 255, 255, 0.94);

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

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

    font-size: 0.61rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.btf-areas__legend-marker {
    position: relative;

    width: 10px;
    height: 10px;

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

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

    border-radius: 50%;

    box-shadow:
        0 0 0 1px
        var(--btf-copper);
}


/* =========================================================
   BOTTOM STRIP
========================================================= */

.btf-areas__bottom {
    display: grid;
    align-items: center;
    gap: 24px;

    margin-top: 24px;
    padding: clamp(24px, 3.3vw, 37px);

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

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

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

.btf-areas__bottom-mark {
    display: grid;
    place-items: center;

    width: 59px;
    height: 59px;

    color: var(--btf-forest-800);
    background-color: var(--btf-surface-soft);

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

.btf-areas__bottom-mark svg {
    width: 42px;
    height: 42px;

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

.btf-areas__bottom-copy {
    display: grid;
    gap: 4px;
}

.btf-areas__bottom-copy span {
    color: var(--btf-copper-dark);

    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.btf-areas__bottom-copy strong {
    max-width: 680px;

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

    font-family: var(--btf-font-heading);
    font-size: clamp(1.5rem, 2.5vw, 2.15rem);
    font-weight: 600;
    line-height: 1.08;
}

.btf-areas__bottom
.btf-button 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-areas__bottom
.btf-button:hover svg,
.btf-areas__bottom
.btf-button:focus-visible svg {
    transform: translate(3px, -3px);
}


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

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

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

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

.btf-areas.is-enhanced
.btf-areas__map-shell.is-visible {
    transition-delay: 100ms;
}

.btf-areas.is-enhanced
.btf-areas__bottom.is-visible {
    transition-delay: 170ms;
}


/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes btf-map-marker-pulse {

    0% {
        opacity: 0.8;
        transform: scale(0.72);
    }

    70%,
    100% {
        opacity: 0;
        transform: scale(1.38);
    }

}


















.btf-map-error {
    display: grid;
    place-items: center;

    width: 100%;
    height: 100%;
    min-height: inherit;
    padding: 30px;

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

    font-size: 0.88rem;
    line-height: 1.7;
    text-align: center;
}






























/* =========================================================
   BOOTS TREE & FENCE
   FOOTER
========================================================= */

.btf-footer {
    position: relative;
    isolation: isolate;

    overflow: hidden;

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

    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='.028'/%3E%3Ccircle cx='0' cy='0' r='1.2' fill='%23C66A32' fill-opacity='.13'/%3E%3C/svg%3E");

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

.btf-footer::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: -1;

    height: 1px;

    content: "";

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


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

.btf-footer__rings {
    position: absolute;
    top: 11%;
    right: -155px;
    z-index: -1;

    width: 380px;
    height: 380px;

    pointer-events: none;
}

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

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

    border-radius: 50%;

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

.btf-footer__rings span:nth-child(1) {
    width: 100%;
    height: 100%;
}

.btf-footer__rings span:nth-child(2) {
    width: 70%;
    height: 70%;

    border-color:
        rgba(198, 106, 50, 0.11);
}

.btf-footer__rings span:nth-child(3) {
    width: 39%;
    height: 39%;
}


/* =========================================================
   DECORATIVE FENCE
========================================================= */

.btf-footer__fence-lines {
    position: absolute;
    bottom: 80px;
    left: -20px;
    z-index: -1;

    display: flex;
    align-items: flex-end;
    gap: 7px;

    height: 160px;

    opacity: 0.035;

    pointer-events: none;
}

.btf-footer__fence-lines::after {
    position: absolute;
    bottom: 33px;
    left: 0;

    width: 100%;
    height: 10px;

    content: "";

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

.btf-footer__fence-lines span {
    position: relative;

    display: block;

    width: 30px;
    height: 125px;

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

.btf-footer__fence-lines span:nth-child(even) {
    height: 145px;
}

.btf-footer__fence-lines span::before {
    position: absolute;
    top: -15px;
    left: 0;

    width: 0;
    height: 0;

    content: "";

    border-right: 15px solid transparent;
    border-bottom: 16px solid var(--btf-white);
    border-left: 15px solid transparent;
}


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

.btf-footer__cta {
    position: relative;

    display: grid;
    align-items: center;
    gap: 30px;

    margin-top: var(--btf-section-space);
    padding:
        clamp(30px, 4vw, 52px);

    overflow: hidden;

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

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

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

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

.btf-footer__cta::before {
    position: absolute;
    top: 0;
    left: clamp(30px, 4vw, 52px);

    width: 75px;
    height: 4px;

    content: "";

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

.btf-footer__cta::after {
    position: absolute;
    right: -95px;
    bottom: -95px;

    width: 270px;
    height: 270px;

    content: "";

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

    border-radius: 50%;

    pointer-events: none;
}

.btf-footer__cta-copy {
    position: relative;
    z-index: 2;

    min-width: 0;
}

.btf-footer__cta-eyebrow {
    display: block;

    margin-bottom: 14px;

    color: var(--btf-copper);

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

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

    color: var(--btf-white);

    font-family: var(--btf-font-heading);
    font-size: clamp(2.5rem, 5vw, 4.7rem);
    font-weight: 600;
    line-height: 0.92;
    letter-spacing: -0.045em;
}

.btf-footer__cta h2 em {
    display: block;

    color: var(--btf-sand);

    font-weight: 500;
}

.btf-footer__cta-actions {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 17px;
}


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

.btf-footer__call-button {
    display: flex;
    align-items: center;
    gap: 12px;

    color: var(--btf-white);

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

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

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

    width: 48px;
    height: 48px;

    color: var(--btf-copper);

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

    border-radius: 50%;

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

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

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

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

.btf-footer__call-button > span:last-child {
    display: grid;
    gap: 3px;
}

.btf-footer__call-button small {
    color: rgba(255, 255, 255, 0.48);

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

.btf-footer__call-button strong {
    font-size: 0.93rem;
    line-height: 1.2;
}


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

.btf-footer__estimate-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

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

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

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

    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.045em;
    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-footer__estimate-button:hover,
.btf-footer__estimate-button:focus-visible {
    color: var(--btf-forest-950);
    background-color: var(--btf-white);
    border-color: var(--btf-white);

    transform: translateY(-2px);
}

.btf-footer__estimate-button svg {
    width: 20px;
    height: 20px;

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

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

.btf-footer__estimate-button:hover svg,
.btf-footer__estimate-button:focus-visible svg {
    transform: translate(3px, -3px);
}


/* =========================================================
   MAIN FOOTER
========================================================= */

.btf-footer__main {
    padding-block:
        clamp(65px, 8vw, 105px);
}

.btf-footer__grid {
    display: grid;
    align-items: start;
    gap: clamp(40px, 5vw, 75px);
}


/* =========================================================
   BRAND COLUMN
========================================================= */

.btf-footer__brand-column {
    min-width: 0;
}

.btf-footer__brand {
    display: block;

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

    border-radius: 50%;

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

.btf-footer__brand:hover {
    transform: translateY(-3px);
    filter: brightness(1.05);
}

.btf-footer__brand img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    border-radius: 50%;

    box-shadow:
        0 14px 34px
        rgba(0, 0, 0, 0.25);
}

.btf-footer__brand-description {
    max-width: 385px;
    margin-bottom: 28px;

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

    font-size: 0.87rem;
    line-height: 1.78;
}


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

.btf-footer__contact {
    display: grid;
    gap: 13px;

    margin: 0;

    font-style: normal;
}

.btf-footer__contact a,
.btf-footer__contact > span {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 10px;

    width: fit-content;
    max-width: 100%;

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

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

    overflow-wrap: anywhere;

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

.btf-footer__contact a:hover,
.btf-footer__contact a:focus-visible {
    color: var(--btf-white);
    transform: translateX(3px);
}

.btf-footer__contact a > span,
.btf-footer__contact > span > span {
    display: grid;
    place-items: center;

    width: 28px;
    height: 28px;

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

.btf-footer__contact svg {
    width: 19px;
    height: 19px;

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


/* =========================================================
   FOOTER COLUMNS
========================================================= */

.btf-footer__column {
    min-width: 0;
}

.btf-footer__column h3 {
    position: relative;

    margin-bottom: 28px;
    padding-bottom: 15px;

    color: var(--btf-white);

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

.btf-footer__column h3::before {
    position: absolute;
    bottom: 0;
    left: 0;

    width: 39px;
    height: 2px;

    content: "";

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

.btf-footer__column h3::after {
    position: absolute;
    bottom: 0;
    left: 45px;

    width: 14px;
    height: 2px;

    content: "";

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


/* =========================================================
   QUICK LINKS
========================================================= */

.btf-footer__links {
    display: grid;
    gap: 4px;

    padding: 0;
    margin: 0;

    list-style: none;
}

.btf-footer__links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    min-height: 39px;

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

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

    font-size: 0.76rem;
    font-weight: 600;

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

.btf-footer__links a:hover,
.btf-footer__links a:focus-visible {
    padding-left: 7px;

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

.btf-footer__links svg {
    width: 18px;
    height: 18px;

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

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

.btf-footer__links a:hover svg,
.btf-footer__links a:focus-visible svg {
    transform: translateX(4px);
}


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

.btf-footer__hours-note {
    margin-bottom: 20px;

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

    font-size: 0.72rem;
    line-height: 1.65;
}

.btf-footer__hours {
    display: grid;
    gap: 0;

    margin: 0;
}

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

    gap: 14px;

    padding-block: 13px;

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

.btf-footer__hours dt {
    color: rgba(255, 255, 255, 0.72);

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

.btf-footer__hours dd {
    margin: 0;

    color: var(--btf-copper);

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

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

    width: fit-content;
    margin-top: 22px;

    color: var(--btf-white);

    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.btf-footer__hours-contact 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-footer__hours-contact:hover svg,
.btf-footer__hours-contact:focus-visible svg {
    transform: translate(3px, -3px);
}


/* =========================================================
   SOCIAL MEDIA
========================================================= */

.btf-footer__social-description {
    margin-bottom: 21px;

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

    font-size: 0.72rem;
    line-height: 1.65;
}

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

.btf-footer__social-link {
    display: grid;
    grid-template-columns:
        42px
        minmax(0, 1fr)
        20px;

    align-items: center;
    gap: 12px;

    width: 100%;
    min-height: 67px;
    padding: 11px 13px;

    color: var(--btf-white);
    background-color:
        rgba(255, 255, 255, 0.045);

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

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

    text-align: left;

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

.btf-footer__social-link:hover,
.btf-footer__social-link:focus-visible {
    background-color:
        rgba(255, 255, 255, 0.075);

    border-color:
        rgba(198, 106, 50, 0.38);

    transform: translateY(-2px);
}

.btf-footer__social-link.is-pending {
    cursor: help;
}

.btf-footer__social-icon {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

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

    border-radius: 50%;
}

.btf-footer__social-icon svg {
    width: 20px;
    height: 20px;

    fill: currentColor;
}

.btf-footer__social-copy {
    display: grid;
    gap: 3px;

    min-width: 0;
}

.btf-footer__social-copy strong {
    color: var(--btf-white);

    font-size: 0.77rem;
    line-height: 1.2;
}

.btf-footer__social-copy small {
    color: rgba(255, 255, 255, 0.43);

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

.btf-footer__social-arrow {
    display: grid;
    place-items: center;

    width: 20px;
    height: 20px;

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

.btf-footer__social-arrow svg {
    width: 100%;
    height: 100%;

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

.btf-footer__social-status {
    max-height: 0;
    margin: 0;

    overflow: hidden;

    color: var(--btf-copper);

    font-size: 0.62rem;
    line-height: 1.5;

    opacity: 0;

    transition:
        max-height var(--btf-transition-normal),
        margin-top var(--btf-transition-normal),
        opacity var(--btf-transition-normal);
}

.btf-footer__social-status.is-visible {
    max-height: 50px;
    margin-top: 11px;

    opacity: 1;
}


/* =========================================================
   FOOTER BOTTOM
========================================================= */

.btf-footer__bottom {
    position: relative;

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

    background-color: rgba(0, 0, 0, 0.13);
}

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

    min-height: 82px;
    padding-block: 17px;
}

.btf-footer__copyright {
    margin-bottom: 0;

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

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

.btf-footer__bottom-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 21px;
}

.btf-footer__powered {
    display: inline-flex;
    align-items: center;
    gap: 5px;

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

    font-size: 0.63rem;
    line-height: 1.4;

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

.btf-footer__powered strong {
    color: rgba(255, 255, 255, 0.75);

    font-weight: 700;

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

.btf-footer__powered:hover,
.btf-footer__powered:focus-visible,
.btf-footer__powered:hover strong,
.btf-footer__powered:focus-visible strong {
    color: var(--btf-copper);
}

.btf-footer__powered svg {
    width: 15px;
    height: 15px;
    margin-left: 3px;

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

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

.btf-footer__powered:hover svg,
.btf-footer__powered:focus-visible svg {
    transform: translate(2px, -2px);
}


/* =========================================================
   BACK TO TOP
========================================================= */

.btf-footer__back-top {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    min-height: 39px;
    padding: 8px 11px;

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

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

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

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

    opacity: 0.55;

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

.btf-footer__back-top.is-active {
    opacity: 1;
}

.btf-footer__back-top:hover,
.btf-footer__back-top:focus-visible {
    color: var(--btf-white);
    background-color: var(--btf-copper);
    border-color: var(--btf-copper);

    transform: translateY(-2px);
}

.btf-footer__back-top svg {
    width: 17px;
    height: 17px;

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






































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

@media (min-width: 1200px) {
      .btf-footer__cta {
        grid-template-columns:
            minmax(0, 1fr)
            auto;
    }

    .btf-footer__grid {
        grid-template-columns:
            minmax(280px, 1.25fr)
            minmax(170px, 0.7fr)
            minmax(210px, 0.85fr)
            minmax(210px, 0.8fr);
    }
      .btf-areas__header {
        grid-template-columns:
            minmax(0, 1.3fr)
            minmax(360px, 0.7fr);

        gap: clamp(70px, 8vw, 140px);
    }

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

    .btf-areas__bottom {
        grid-template-columns:
            auto
            minmax(0, 1fr)
            auto;
    }
     .btf-reviews__header {
        grid-template-columns:
            minmax(0, 1.3fr)
            minmax(360px, 0.7fr);

        gap: clamp(70px, 8vw, 140px);
    }

    .btf-reviews__layout {
        grid-template-columns:
            minmax(0, 1.35fr)
            minmax(350px, 0.65fr);
    }

    .btf-reviews__trust-actions {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(150px, auto);

        align-items: center;
    }

    .btf-reviews__trust-rail {
        grid-template-columns:
            auto
            minmax(0, 1fr);
    }

      .btf-why__layout {
        grid-template-columns:
            minmax(430px, 0.82fr)
            minmax(0, 1.18fr);
    }

    .btf-why__visual {
        align-self: center;
    }

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

    .btf-why__contact {
        grid-template-columns:
            minmax(0, 1fr)
            auto;
    }
     .btf-services__header {
        grid-template-columns:
            minmax(0, 1.35fr)
            minmax(360px, 0.65fr);

        gap: clamp(70px, 8vw, 140px);
    }

    .btf-services__grid {
        grid-template-columns:
            minmax(0, 1.08fr)
            minmax(0, 0.92fr);

        align-items: stretch;
    }

    .btf-service-card--tree {
        min-height: 620px;
    }

    .btf-service-card--fence {
        min-height: 570px;
        margin-top: 50px;
    }

    .btf-services__footer {
        grid-template-columns:
            auto
            minmax(0, 1fr)
            auto;
    }
      .btf-hero__visual {
        top: var(--btf-header-height);
        left: 52%;
    }

    .btf-hero__image-overlay {
        background-color: rgba(9, 25, 17, 0.25);
    }

    .btf-hero__layout {
        grid-template-columns:
            minmax(0, 1.18fr)
            minmax(330px, 0.82fr);

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

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

    .btf-hero__feature {
        margin-bottom:
            clamp(
                25px,
                4vh,
                58px
            );
    }
      .btf-header__inner {
        grid-template-columns:
            auto
            minmax(0, 1fr)
            auto;

        gap: clamp(32px, 4vw, 68px);
    }

    .btf-header__brand {
        grid-column: 1;

        width: 76px;
        height: 76px;
    }

    .btf-header__desktop-nav {
        display: block;
        grid-column: 2;
    }

    .btf-header__estimate {
        grid-column: 3;

        min-width: 150px;
    }

    .btf-header__menu-button,
    .btf-mobile-nav {
        display: none !important;
    }

    :root {
        --btf-container-width: 1320px;
        --btf-page-padding: 6vw;
        --btf-section-space: 120px;
        --btf-header-height: 92px;
    }

    .btf-button {
        min-height: 54px;
        padding-inline: 28px;
    }

}


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

@media (min-width: 768px) and (max-width: 1199px) {
       .btf-footer__cta {
        grid-template-columns:
            minmax(0, 1fr)
            auto;
    }

    .btf-footer__cta-actions {
        display: grid;

        justify-items: stretch;
    }

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

    .btf-footer__brand-column {
        padding-right: 35px;
    }
     .btf-areas__header {
        grid-template-columns:
            minmax(0, 1.1fr)
            minmax(280px, 0.9fr);

        gap: 48px;
    }

    .btf-areas__layout {
        grid-template-columns:
            minmax(280px, 0.7fr)
            minmax(0, 1.3fr);
    }

    .btf-areas__panel {
        padding: 28px;
    }

    .btf-areas__map-shell,
    .btf-areas__map {
        min-height: 620px;
    }

    .btf-areas__bottom {
        grid-template-columns:
            auto
            minmax(0, 1fr)
            auto;
    }

    .btf-areas__coordinates {
        display: none;
    }
       .btf-reviews__header {
        grid-template-columns:
            minmax(0, 1.1fr)
            minmax(280px, 0.9fr);

        gap: 48px;
    }

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

    .btf-reviews__widget-top {
        padding-inline: 23px;
    }

    .btf-reviews__elfsight {
        min-height: 350px;
        padding: 23px;
    }

    .btf-reviews__trust-panel {
        display: grid;
        grid-template-columns:
            minmax(0, 0.8fr)
            minmax(0, 1.2fr);

        column-gap: 50px;
    }

    .btf-reviews__trust-panel >
    .btf-reviews__trust-eyebrow,
    .btf-reviews__trust-panel > h3,
    .btf-reviews__trust-panel >
    .btf-reviews__trust-description {
        grid-column: 1;
    }

    .btf-reviews__trust-list {
        grid-column: 2;
        grid-row: 1 / span 4;

        margin-top: 0;
    }

    .btf-reviews__trust-actions {
        grid-column: 1;

        align-self: end;
    }

    .btf-reviews__trust-mark {
        display: none;
    }

    .btf-reviews__trust-rail {
        grid-template-columns:
            auto
            minmax(0, 1fr);
    }
     .btf-why__layout {
        grid-template-columns:
            minmax(300px, 0.8fr)
            minmax(0, 1.2fr);

        gap: 48px;
    }

    .btf-why__visual {
        min-height: 590px;
    }

    .btf-why__image--main {
        width: 82%;
        height: 490px;
    }

    .btf-why__image--secondary {
        width: 58%;
        height: 250px;
    }

    .btf-why__visual-label {
        bottom: 32px;

        width: 78%;
        padding: 16px;

        font-size: 0.69rem;
    }

    .btf-why__visual-mark {
        top: 28px;

        width: 84px;
        height: 84px;
    }

    .btf-why__visual-mark svg {
        width: 64px;
        height: 64px;
    }

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

    .btf-why-card {
        padding: 25px;
    }

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

    .btf-why__contact-actions {
        justify-content: flex-start;
    }

    .btf-services__header {
        grid-template-columns:
            minmax(0, 1.1fr)
            minmax(280px, 0.9fr);

        gap: 50px;
    }

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

        gap: 20px;
    }

    .btf-service-card {
        min-height: 540px;
        padding: 28px;
    }

    .btf-service-card__text h3 {
        font-size: clamp(3rem, 5.2vw, 4.2rem);
    }

    .btf-service-card__text p {
        font-size: 0.87rem;
    }

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

        padding: 28px;
    }

      :root {
        --btf-hero-footer-height: 82px;
    }

    .btf-hero__image-overlay {
        background-color: rgba(9, 25, 17, 0.7);
    }

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

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

        gap: 38px;
    }

    .btf-hero__title {
        font-size:
            clamp(
                3.6rem,
                min(7vw, 8vh),
                5.7rem
            );
    }

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

    .btf-hero__feature {
        width: 100%;
        padding: 24px;
        margin-bottom: 28px;
    }

    .btf-hero__feature-content h2 {
        font-size: 2rem;
    }

    .btf-hero__feature-content p {
        font-size: 0.8rem;
    }

    .btf-hero__switcher-button {
        min-width: 165px;
        padding-inline: 20px;
    }
        .btf-header__inner {
        grid-template-columns:
            minmax(128px, 1fr)
            auto
            minmax(128px, 1fr);

        gap: 18px;
    }

    .btf-header__menu-button {
        display: inline-flex;
        grid-column: 1;
        justify-self: start;
    }

    .btf-header__brand {
        grid-column: 2;

        width: 72px;
        height: 72px;
    }

    .btf-header__desktop-nav {
        display: none;
    }

    .btf-header__estimate {
        grid-column: 3;
        justify-self: end;

        min-width: 142px;
    }

    .btf-mobile-nav__panel {
        width: min(74vw, 520px);
    }

    :root {
        --btf-container-width: 100%;
        --btf-page-padding: 40px;
        --btf-section-space: 92px;
        --btf-header-height: 84px;
    }

    .btf-copy {
        font-size: 1.05rem;
    }

}


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

@media (min-width: 481px) and (max-width: 767px) {
      .btf-footer__cta {
        grid-template-columns: 1fr;
    }

    .btf-footer__cta h2 em {
        display: inline;
    }

    .btf-footer__cta-actions {
        justify-content: flex-start;
    }

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

        gap: 48px 34px;
    }

    .btf-footer__brand-column {
        grid-column: 1 / -1;

        display: grid;
        grid-template-columns:
            110px
            minmax(0, 1fr);

        column-gap: 28px;
    }

    .btf-footer__brand {
        grid-row: 1 / span 2;

        width: 105px;
        height: 105px;
        margin-bottom: 0;
    }

    .btf-footer__brand-description {
        margin-bottom: 18px;
    }

    .btf-footer__contact {
        grid-column: 2;
    }

    .btf-footer__bottom-inner {
        align-items: flex-start;
    }
       .btf-areas__header {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .btf-areas__title em {
        display: inline;
    }

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

    .btf-areas__panel {
        padding: 29px;
    }

    .btf-areas__map-shell,
    .btf-areas__map {
        min-height: 510px;
    }

    .btf-areas__map-top {
        top: 14px;
        right: 14px;
        left: 14px;
    }

    .btf-areas .leaflet-control-zoom {
        margin-top: 88px;
        margin-right: 14px;
    }

    .btf-areas__bottom {
        grid-template-columns:
            auto
            minmax(0, 1fr);
    }

    .btf-areas__bottom
    .btf-button {
        grid-column: 1 / -1;

        width: 100%;
    }

    .btf-areas__coordinates {
        display: none;
    }
     .btf-reviews__header {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .btf-reviews__title em {
        display: inline;
    }

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

    .btf-reviews__widget-top {
        padding: 18px 20px;
    }

    .btf-reviews__widget-source {
        max-width: 120px;

        text-align: right;
    }

    .btf-reviews__elfsight {
        min-height: 340px;
        padding: 20px;
    }

    .btf-reviews__widget-footer {
        padding-inline: 20px;
    }

    .btf-reviews__trust-panel {
        padding: 31px;
    }

    .btf-reviews__trust-actions {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(150px, auto);

        align-items: center;
    }

    .btf-reviews__trust-rail {
        grid-template-columns: 1fr;
    }

    .btf-reviews__rail-items {
        justify-content: flex-start;
    }

    .btf-reviews__rings {
        right: -190px;
    }

      .btf-why__layout {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .btf-why__visual {
        max-width: 590px;
        min-height: 590px;

        margin-inline: auto;
    }

    .btf-why__image--main {
        width: 78%;
        height: 500px;
    }

    .btf-why__image--secondary {
        width: 52%;
        height: 245px;
    }

    .btf-why__visual-label {
        bottom: 30px;

        width: min(70%, 350px);
    }

    .btf-why__visual-mark {
        top: 30px;

        width: 88px;
        height: 88px;
    }

    .btf-why__title em {
        display: inline;
    }

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

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

    .btf-why__contact-actions {
        justify-content: flex-start;
    }
    .btf-services__header {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .btf-services__title em {
        display: inline;
    }

    .btf-services__introduction {
        gap: 18px;
    }

    .btf-services__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .btf-service-card {
        min-height: 500px;
        padding: 27px;
    }

    .btf-service-card__text {
        max-width: 520px;
    }

    .btf-service-card__text h3 {
        font-size: clamp(3rem, 10vw, 4.25rem);
    }

    .btf-services__footer {
        grid-template-columns:
            auto
            minmax(0, 1fr);
    }

    .btf-services__footer
    .btf-button {
        grid-column: 1 / -1;
        width: 100%;
    }

     :root {
        --btf-hero-footer-height: 74px;
    }

    .btf-hero::before {
        top: 20%;
        left: -250px;

        width: 410px;
        height: 410px;
    }

    .btf-hero::after {
        display: none;
    }

    .btf-hero__image-overlay {
        background-color: rgba(8, 23, 15, 0.73);
    }

    .btf-hero__slide img {
        object-position: 60% center;
    }

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

        padding-top: 10px;
    }

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

    .btf-hero__eyebrow {
        margin-bottom: 14px;

        font-size: 0.66rem;
    }

    .btf-hero__title {
        margin-bottom: 18px;

        font-size:
            clamp(
                3.15rem,
                7.2vh,
                4.75rem
            );

        line-height: 0.86;
    }

    .btf-hero__description {
        max-width: 540px;
        margin-bottom: 23px;

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

    .btf-hero__actions {
        gap: 16px;
    }

    .btf-hero__trust {
        gap: 20px;

        margin-top: 23px;
    }

    .btf-hero__feature {
        display: none;
    }

    .btf-hero__switcher-button {
        min-width: 154px;
        padding-inline: 16px;
    }

    .btf-hero__scroll-link span:first-child {
        display: none;
    }
      .btf-header__inner {
        grid-template-columns:
            minmax(112px, 1fr)
            auto
            minmax(112px, 1fr);

        gap: 12px;
    }

    .btf-header__menu-button {
        display: inline-flex;
        grid-column: 1;
        justify-self: start;

        width: 46px;
        height: 46px;
    }

    .btf-header__brand {
        grid-column: 2;

        width: 66px;
        height: 66px;
    }

    .btf-header__desktop-nav {
        display: none;
    }

    .btf-header__estimate {
        grid-column: 3;
        justify-self: end;

        min-width: 116px;
        min-height: 46px;
        padding: 10px 13px;

        font-size: 0.7rem;
    }

    .btf-header__estimate-icon {
        width: 17px;
        height: 17px;
    }

    .btf-mobile-nav__panel {
        width: min(88vw, 500px);
    }

    :root {
        --btf-container-width: 100%;
        --btf-page-padding: 24px;
        --btf-section-space: 72px;
        --btf-header-height: 76px;
    }

    .btf-heading {
        line-height: 1.02;
    }

    .btf-copy {
        font-size: 1rem;
        line-height: 1.75;
    }

    .btf-button {
        min-height: 52px;
    }

}


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

@media (max-width: 480px) {
     .btf-footer__rings {
        top: 10%;
        right: -230px;

        width: 340px;
        height: 340px;
    }

    .btf-footer__fence-lines {
        display: none;
    }

    .btf-footer__cta {
        grid-template-columns: 1fr;

        margin-top: 60px;
        padding: 27px 21px;
    }

    .btf-footer__cta::before {
        left: 21px;
    }

    .btf-footer__cta h2 {
        font-size: 2.55rem;
        line-height: 0.95;
    }

    .btf-footer__cta h2 em {
        display: inline;
    }

    .btf-footer__cta-actions {
        display: grid;
        grid-template-columns: 1fr;

        justify-content: stretch;
    }

    .btf-footer__call-button {
        width: fit-content;
    }

    .btf-footer__estimate-button {
        width: 100%;
    }

    .btf-footer__main {
        padding-block: 62px;
    }

    .btf-footer__grid {
        grid-template-columns: 1fr;
        gap: 46px;
    }

    .btf-footer__brand {
        width: 105px;
        height: 105px;
        margin-bottom: 22px;
    }

    .btf-footer__brand-description {
        font-size: 0.82rem;
    }

    .btf-footer__column h3 {
        margin-bottom: 23px;
    }

    .btf-footer__hours > div {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .btf-footer__hours dd {
        text-align: left;
    }

    .btf-footer__bottom-inner {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;

        padding-block: 22px;
    }

    .btf-footer__bottom-actions {
        justify-content: space-between;
        gap: 15px;
    }

    .btf-footer__powered {
        max-width: 210px;

        flex-wrap: wrap;
    }

    .btf-footer__back-top span {
        display: none;
    }

    .btf-footer__back-top {
        width: 39px;
        padding: 0;

        justify-content: center;
    }
     .btf-areas::after {
        right: 18px;
    }

    .btf-areas__topography {
        top: 3%;
        left: -230px;

        width: 360px;
        height: 360px;
    }

    .btf-areas__coordinates {
        display: none;
    }

    .btf-areas__header {
        grid-template-columns: 1fr;
        gap: 23px;

        margin-bottom: 35px;
    }

    .btf-areas__eyebrow {
        margin-bottom: 15px;

        font-size: 0.67rem;
    }

    .btf-areas__eyebrow > span {
        width: 28px;
        height: 28px;
    }

    .btf-areas__title {
        line-height: 1;
    }

    .btf-areas__title em {
        display: inline;
    }

    .btf-areas__introduction {
        gap: 18px;
    }

    .btf-areas__introduction p {
        font-size: 0.91rem;
        line-height: 1.7;
    }

    .btf-areas__contact-link {
        font-size: 0.65rem;
    }

    .btf-areas__layout {
        grid-template-columns: 1fr;
        gap: 17px;
    }

    .btf-areas__panel {
        padding: 24px 21px;
    }

    .btf-areas__panel-heading {
        gap: 15px;
        padding-bottom: 20px;
    }

    .btf-areas__panel-heading h3 {
        font-size: 2rem;
    }

    .btf-areas__city-count {
        padding: 7px 8px;

        font-size: 0.55rem;
    }

    .btf-areas__city {
        grid-template-columns:
            22px
            39px
            minmax(0, 1fr)
            19px;

        gap: 9px;

        min-height: 67px;
        padding-inline: 5px;
    }

    .btf-areas__city:hover,
    .btf-areas__city:focus-visible,
    .btf-areas__city.is-active {
        padding-left: 10px;
    }

    .btf-areas__city-pin {
        width: 39px;
        height: 39px;
    }

    .btf-areas__city-copy strong {
        font-size: 1.25rem;
    }

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

        padding: 15px;
    }

    .btf-areas__availability-icon {
        width: 39px;
        height: 39px;
    }

    .btf-areas__availability div > span {
        font-size: 1.1rem;
    }

    .btf-areas__panel-footer {
        padding-top: 23px;
    }

    .btf-areas__map-shell,
    .btf-areas__map {
        min-height: 445px;
    }

    .btf-areas__map-top {
        top: 11px;
        right: 11px;
        left: 11px;

        min-height: 50px;
        padding: 8px 9px 8px 12px;
    }

    .btf-areas__map-status {
        font-size: 0.59rem;
    }

    .btf-areas__reset {
        min-height: 34px;
        padding-inline: 9px;
    }

    .btf-areas__reset span {
        display: none;
    }

    .btf-areas .leaflet-control-zoom {
        margin-top: 76px;
        margin-right: 11px;
    }

    .btf-areas .leaflet-control-zoom a {
        width: 36px;
        height: 36px;
    }

    .btf-areas__legend {
        bottom: 12px;
        left: 11px;

        padding: 8px 9px;

        font-size: 0.55rem;
    }

    .btf-areas__map-done {
        right: 11px;
        bottom: 45px;
    }

    .btf-areas__map-gate-content {
        padding: 22px 18px;
    }

    .btf-areas__bottom {
        grid-template-columns: 1fr;

        margin-top: 17px;
        padding: 21px;
    }

    .btf-areas__bottom-mark {
        width: 52px;
        height: 52px;
    }

    .btf-areas__bottom-copy strong {
        font-size: 1.52rem;
    }

    .btf-areas__bottom
    .btf-button {
        width: 100%;
    }
     .btf-reviews::after {
        left: 18px;
    }

    .btf-reviews__rings {
        top: 4%;
        right: -215px;

        width: 320px;
        height: 320px;
    }

    .btf-reviews__fence {
        display: none;
    }

    .btf-reviews__header {
        grid-template-columns: 1fr;
        gap: 23px;

        margin-bottom: 35px;
    }

    .btf-reviews__eyebrow {
        margin-bottom: 15px;

        font-size: 0.67rem;
    }

    .btf-reviews__eyebrow > span {
        width: 28px;
        height: 28px;
    }

    .btf-reviews__title {
        line-height: 1;
    }

    .btf-reviews__title em {
        display: inline;
    }

    .btf-reviews__introduction {
        gap: 18px;
    }

    .btf-reviews__introduction p {
        font-size: 0.91rem;
        line-height: 1.7;
    }

    .btf-reviews__layout {
        grid-template-columns: 1fr;
        gap: 17px;
    }

    .btf-reviews__widget-top {
        align-items: flex-start;

        min-height: 0;
        padding: 17px;
    }

    .btf-reviews__quote-icon {
        width: 42px;
        height: 42px;
    }

    .btf-reviews__quote-icon svg {
        width: 22px;
        height: 22px;
    }

    .btf-reviews__widget-heading strong {
        font-size: 1.23rem;
    }

    .btf-reviews__widget-source {
        display: none;
    }

    .btf-reviews__elfsight {
        min-height: 320px;
        padding: 14px;
    }

    .btf-reviews__widget-footer {
        display: grid;
        grid-template-columns: 1fr;
        gap: 11px;

        padding: 15px 17px;
    }

    .btf-reviews__widget-footer > span {
        font-size: 0.64rem;
    }

    .btf-reviews__trust-panel {
        padding: 25px 22px;
    }

    .btf-reviews__trust-mark {
        top: 21px;
        right: 17px;

        width: 62px;
        height: 62px;
    }

    .btf-reviews__trust-eyebrow {
        margin-bottom: 16px;

        font-size: 0.63rem;
    }

    .btf-reviews__trust-panel > h3 {
        max-width: 285px;

        margin-bottom: 17px;

        font-size: 2.45rem;
    }

    .btf-reviews__trust-description {
        font-size: 0.82rem;
        line-height: 1.67;
    }

    .btf-reviews__trust-list {
        margin-top: 27px;
    }

    .btf-reviews__trust-item {
        grid-template-columns:
            23px
            39px
            minmax(0, 1fr);

        gap: 10px;

        padding-block: 19px;
    }

    .btf-reviews__trust-icon {
        width: 39px;
        height: 39px;
    }

    .btf-reviews__trust-item h4 {
        font-size: 1.35rem;
    }

    .btf-reviews__trust-item p {
        font-size: 0.74rem;
    }

    .btf-reviews__trust-actions {
        grid-template-columns: 1fr;
    }

    .btf-reviews__estimate-button {
        width: 100%;
    }

    .btf-reviews__trust-rail {
        grid-template-columns: 1fr;

        margin-top: 17px;
        padding: 19px;
    }

    .btf-reviews__rail-label strong {
        font-size: 1.2rem;
    }

    .btf-reviews__rail-items {
        justify-content: flex-start;
        gap: 11px;

        font-size: 0.58rem;
        line-height: 1.4;
    }
     .btf-why::after {
        display: none;
    }

    .btf-why__layout {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .btf-why__visual {
        min-height: 475px;
    }

    .btf-why__image--main {
        width: 84%;
        height: 400px;
    }

    .btf-why__image--secondary {
        width: 55%;
        height: 195px;

        border-width: 7px;
    }

    .btf-why__visual-label {
        bottom: 18px;

        width: 75%;
        padding: 13px 14px;
        gap: 10px;

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

    .btf-why__visual-label-number {
        width: 36px;
        height: 36px;

        font-size: 1.05rem;
    }

    .btf-why__visual-mark {
        top: 22px;
        right: 1%;

        width: 70px;
        height: 70px;
    }

    .btf-why__visual-mark svg {
        width: 53px;
        height: 53px;
    }

    .btf-why__eyebrow {
        margin-bottom: 16px;

        font-size: 0.67rem;
    }

    .btf-why__eyebrow > span {
        width: 28px;
        height: 28px;
    }

    .btf-why__title {
        margin-bottom: 19px;
        line-height: 1;
    }

    .btf-why__title em {
        display: inline;
    }

    .btf-why__description {
        font-size: 0.91rem;
        line-height: 1.72;
    }

    .btf-why__reasons {
        grid-template-columns: 1fr;

        margin-top: 32px;
    }

    .btf-why-card {
        padding: 23px;
    }

    .btf-why-card__top {
        margin-bottom: 19px;
    }

    .btf-why-card h3 {
        font-size: 1.7rem;
    }

    .btf-why-card p {
        font-size: 0.81rem;
    }

    .btf-why__contact {
        grid-template-columns: 1fr;

        margin-top: 18px;
        padding: 21px;
    }

    .btf-why__contact-actions {
        display: grid;
        grid-template-columns: 1fr;

        justify-content: stretch;
        gap: 14px;
    }

    .btf-why__phone {
        width: fit-content;
    }

    .btf-why__contact
    .btf-button {
        width: 100%;
    }
      .btf-services::before,
    .btf-services::after {
        display: none;
    }

    .btf-services__header {
        grid-template-columns: 1fr;
        gap: 24px;

        margin-bottom: 36px;
    }

    .btf-services__eyebrow {
        margin-bottom: 15px;

        font-size: 0.67rem;
    }

    .btf-services__eyebrow > span {
        width: 28px;
        height: 28px;
    }

    .btf-services__title {
        line-height: 1;
    }

    .btf-services__title em {
        display: inline;
    }

    .btf-services__introduction {
        gap: 17px;
    }

    .btf-services__introduction p {
        font-size: 0.91rem;
        line-height: 1.7;
    }

    .btf-services__gallery-link {
        font-size: 0.68rem;
    }

    .btf-services__grid {
        grid-template-columns: 1fr;
        gap: 17px;
    }

    .btf-service-card {
        min-height: 455px;
        padding: 22px;
    }

    .btf-service-card::before {
        left: 22px;
    }

    .btf-service-card__number {
        font-size: 1.7rem;
    }

    .btf-service-card__category {
        padding: 8px 9px;

        font-size: 0.57rem;
        letter-spacing: 0.07em;
    }

    .btf-service-card__content {
        gap: 22px;
    }

    .btf-service-card__text h3 {
        margin-bottom: 12px;

        font-size: clamp(2.75rem, 13vw, 3.8rem);
    }

    .btf-service-card__text p {
        display: -webkit-box;

        overflow: hidden;

        font-size: 0.82rem;
        line-height: 1.65;

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

    .btf-service-card__action {
        padding-top: 17px;

        font-size: 0.63rem;
    }

    .btf-service-card__arrow {
        width: 43px;
        height: 43px;
    }

    .btf-services__footer {
        grid-template-columns: 1fr;

        margin-top: 25px;
        padding: 22px;
    }

    .btf-services__footer-mark {
        width: 52px;
        height: 52px;
    }

    .btf-services__footer-copy strong {
        font-size: 1.55rem;
    }

    .btf-services__footer
    .btf-button {
        width: 100%;
    }
     :root {
        --btf-hero-footer-height: 65px;
    }

    .btf-hero::before,
    .btf-hero::after {
        display: none;
    }

    .btf-hero__image-overlay {
        background-color: rgba(7, 22, 14, 0.76);
    }

    .btf-hero__slide img {
        object-position: 64% center;
    }

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

        padding-top: 5px;
    }

    .btf-hero__content {
        width: 100%;
    }

    .btf-hero__eyebrow {
        gap: 9px;

        margin-bottom: 11px;

        font-size:
            clamp(
                0.56rem,
                1.45vh,
                0.65rem
            );

        letter-spacing: 0.11em;
    }

    .btf-hero__eyebrow-line {
        width: 25px;
    }

    .btf-hero__title {
        margin-bottom:
            clamp(
                12px,
                2.1vh,
                18px
            );

        font-size:
            clamp(
                2.7rem,
                7.1vh,
                4rem
            );

        line-height: 0.86;
    }

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

        max-width: 100%;
        margin-bottom:
            clamp(
                16px,
                2.8vh,
                23px
            );

        overflow: hidden;

        font-size:
            clamp(
                0.78rem,
                1.8vh,
                0.9rem
            );

        line-height: 1.56;

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

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

        gap: 10px;
    }

    .btf-hero__primary-button {
        width: 100%;
        min-height: 47px;
        padding: 11px 13px;

        font-size: 0.68rem;
    }

    .btf-hero__primary-button svg {
        width: 17px;
        height: 17px;
    }

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

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

    .btf-hero__call-content {
        display: none;
    }

    .btf-hero__trust {
        gap: 15px;

        margin-top:
            clamp(
                17px,
                2.9vh,
                25px
            );
    }

    .btf-hero__trust-item {
        gap: 6px;

        font-size: 0.64rem;
    }

    .btf-hero__trust-icon {
        width: 18px;
        height: 18px;
    }

    .btf-hero__feature {
        display: none;
    }

    .btf-hero__footer-inner {
        gap: 7px;
    }

    .btf-hero__switcher {
        flex: 1;
        min-width: 0;
    }

    .btf-hero__switcher-button {
        flex: 1;

        min-width: 0;
        padding-inline: 9px;
        gap: 6px;
    }

    .btf-hero__switcher-number {
        font-size: 0.58rem;
    }

    .btf-hero__switcher-text {
        font-size: 0.58rem;
        letter-spacing: 0.015em;
    }

    .btf-hero__scroll-link {
        flex: 0 0 auto;
    }

    .btf-hero__scroll-link > span:first-child {
        display: none;
    }

    .btf-hero__scroll-icon {
        width: 34px;
        height: 34px;
    }
       .btf-header__inner {
        grid-template-columns:
            minmax(91px, 1fr)
            auto
            minmax(91px, 1fr);

        gap: 6px;
    }

    .btf-header__menu-button {
        display: inline-flex;
        grid-column: 1;
        justify-self: start;

        width: 43px;
        height: 43px;
    }

    .btf-header__menu-icon {
        width: 20px;
    }

    .btf-header__brand {
        grid-column: 2;

        width: 62px;
        height: 62px;
    }

    .btf-header__desktop-nav {
        display: none;
    }

    .btf-header__estimate {
        grid-column: 3;
        justify-self: end;

        min-width: 91px;
        min-height: 43px;
        padding: 8px 9px;

        font-size: 0.62rem;
        letter-spacing: 0;
    }

    .btf-header__estimate-icon {
        display: none;
    }

    .btf-mobile-nav__panel {
        width: 100%;
        padding-bottom:
            max(22px, env(safe-area-inset-bottom));

        border-right: 0;
    }

    .btf-mobile-nav__heading {
        padding-bottom: 18px;
    }

    .btf-mobile-nav__navigation {
        margin-top: 12px;
    }

    .btf-mobile-nav__link {
        min-height: 57px;

        font-size: 1.5rem;
    }

    .btf-mobile-nav__footer {
        gap: 13px;
        padding-top: 22px;
    }

    .btf-mobile-nav__footer p {
        display: none;
    }

    :root {
        --btf-container-width: 100%;
        --btf-page-padding: 18px;
        --btf-section-space: 60px;
        --btf-header-height: 72px;
    }

    body {
        font-size: 0.95rem;
    }

    .btf-eyebrow {
        font-size: 0.68rem;
        letter-spacing: 0.14em;
    }

    .btf-heading {
        margin-bottom: 18px;
        line-height: 1.03;
    }

    .btf-copy {
        font-size: 0.96rem;
        line-height: 1.72;
    }

    .btf-button {
        width: 100%;
        min-height: 52px;
        padding-inline: 18px;
    }

    .btf-page-transition__content {
        padding-inline: 18px;
    }

}


/* =========================================================
   ACCESSIBILITY: REDUCED MOTION

   Esta consulta no es un breakpoint responsive.
   Solo respeta la configuración de accesibilidad.
========================================================= */

@media (prefers-reduced-motion: reduce) {
     .btf-map-pin::after {
        animation: none;
    }

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }

    .btf-page-transition,
    .btf-section-progress {
        display: none !important;
    }

}