.hero {
    min-height: 650px;
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    align-items: center;
    gap: 80px;
    padding-top: 70px;
    padding-bottom: 90px;
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 24px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: var(--type-label);
    font-weight: 600;
}

.eyebrow span {
    width: 25px;
    height: 2px;
    background: var(--green);
}

h1 {
    margin: 0;
}

h1 em,
h2 em {
    color: #639c32;
    font-style: normal;
}

h2 {
    margin: 0;
}

.hero-text {
    max-width: 450px;
    margin: 29px 0 31px;
    color: var(--muted);
    font-size: var(--type-lead);
    line-height: 1.6;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 27px;
}

.button {
    display: inline-flex;
    align-items: center;
    gap: 17px;
    padding: 16px 21px;
    font-size: .875rem;
    font-weight: 600;
    transition: transform 280ms ease, background-color 280ms ease, box-shadow 280ms ease;
}

.button-primary {
    background: var(--nav-button);
    color: var(--nav-button-text);
    box-shadow: 0 5px 14px rgba(21, 23, 20, .12);
}

.button-primary > span {
    transition: transform 280ms ease;
}

.button-primary:focus-visible,
.text-link:focus-visible {
    outline: 3px solid var(--nav-green);
    outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
    .button-primary:hover {
        background: var(--nav-button-hover);
        box-shadow: 0 8px 18px rgba(21, 23, 20, .16);
        transform: translateY(-2px);
    }

    .button-primary:hover > span {
        transform: translateX(4px);
    }

    .text-link:hover {
        color: var(--nav-green-hover);
    }
}

.button-outline {
    border: 1px solid var(--ink);
}

.text-link,
.card-link,
.map-link {
    font-size: .875rem;
    font-weight: 600;
}

.trust-line {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 56px;
    color: var(--muted);
    font-size: var(--type-small);
}

.trust-icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--panel);
    color: #639c32;
}

.hero-visual {
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: 500px;
    justify-self: end;
}

.hero-image-frame {
    position: relative;
    overflow: hidden;
    padding: 0 0 28px 28px;
    box-shadow: 0 14px 30px rgba(21, 23, 20, .12);
    transition: box-shadow 700ms ease;
}

.hero-image-frame:before {
    content: "";
    position: absolute;
    top: 28px;
    left: 0;
    right: 28px;
    bottom: 0;
    border: 1px solid var(--green);
    transition: border-color 700ms ease;
}

.image-placeholder {
    background: var(--panel);
}

.hero-image-placeholder {
    position: relative;
    height: 500px;
}

.office-photo {
    --office-image-position: 50% center;
    border: 1px solid rgba(66, 49, 32, .22);
    object-fit: cover;
    object-position: var(--office-image-position);
    transition: transform 700ms ease;
}

.image-note {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 17px;
    padding: 16px 22px;
    background: var(--contact-bg);
    color: var(--contact-text);
    font-size: var(--type-label);
    line-height: 1.3;
}

.image-note span {
    color: var(--contact-accent);
    font-size: var(--type-label);
}

@media (hover: hover) and (pointer: fine) {
    .hero-visual:hover .office-photo {
        transform: scale(1.04);
    }

    .hero-visual:hover .hero-image-frame {
        box-shadow: 0 18px 38px rgba(49, 91, 120, .2);
    }

    .hero-visual:hover .hero-image-frame:before {
        border-color: #729db8;
    }
}

@media (prefers-reduced-motion: reduce) {
    .office-photo {
        transition: none;
    }
}

.hero-stamp {
    position: absolute;
    right: -21px;
    top: 42px;
    width: 77px;
    height: 77px;
    display: grid;
    place-content: center;
    text-align: center;
    border: 1px solid var(--ink);
    border-radius: 50%;
    background: var(--paper);
    font-size: var(--type-label);
    line-height: 1.2;
    letter-spacing: .12em;
}

.hero-stamp strong {
    font-size: 1.125rem;
    letter-spacing: 0;
}