/* ============================================================
   GREATFORD — COMPACT PROFESSIONAL INNER PAGES
   Requires home-premium.css
============================================================ */


.gf-page-head {
    border-bottom:
        1px solid
        var(--gf-line);

    background: var(--gf-surface);
}


.gf-page-head-grid {
    min-height: 290px;

    padding:
        54px
        0;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(280px, .55fr);

    gap: 70px;

    align-items: end;
}


.gf-page-head h1 {
    max-width: 720px;

    margin:
        12px
        0
        0;

    color: var(--gf-ink);

    font-size:
        clamp(
            46px,
            6vw,
            72px
        );

    font-weight: 600;

    line-height: .96;
    letter-spacing: -.055em;
}


.gf-page-head h1 span {
    color: var(--gf-gold);
}


.gf-page-head-grid > p {
    margin: 0;

    color: var(--gf-muted);

    font-size: 13px;
    line-height: 1.75;
}


/* =========================================================
   ABOUT
========================================================= */

.gf-page-image-band {
    border-bottom:
        1px solid
        var(--gf-line);
}


.gf-page-image {
    min-height: 390px;

    position: relative;

    display: flex;
    align-items: end;

    background-size: cover;
    background-position: center;
}


.gf-page-image-copy {
    padding-bottom: 28px;

    color: #fff;
}


.gf-page-image-copy span,
.gf-page-image-copy strong {
    display: block;
}


.gf-page-image-copy span {
    color: #d8bd90;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .13em;
}


.gf-page-image-copy strong {
    max-width: 680px;

    margin-top: 8px;

    font-size:
        clamp(
            26px,
            4vw,
            40px
        );

    font-weight: 600;

    letter-spacing: -.035em;
}


.gf-inner-section {
    padding:
        70px
        0;
}


.gf-about-grid {
    display: grid;
    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr);

    gap: 70px;
}


.gf-about-copy h2,
.gf-about-highlight-copy h2 {
    margin:
        10px
        0
        0;

    color: var(--gf-ink);

    font-size:
        clamp(
            32px,
            4.4vw,
            50px
        );

    font-weight: 600;

    line-height: 1;
    letter-spacing: -.045em;
}


.gf-about-text p,
.gf-about-highlight-copy > p {
    margin:
        0
        0
        18px;

    color: var(--gf-muted);

    font-size: 13px;
    line-height: 1.8;
}


.gf-values-section {
    border-top:
        1px solid
        var(--gf-line);

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

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


.gf-values-list {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}


.gf-values-list article {
    min-height: 190px;

    padding:
        30px
        30px
        30px
        0;

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

    display: grid;
    grid-template-columns:
        36px
        minmax(0, 1fr);

    gap: 16px;

    align-content: center;
}


.gf-values-list article + article {
    padding-left: 30px;
}


.gf-values-list article:last-child {
    border-right: 0;
}


.gf-value-index {
    color: var(--gf-gold);

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size: 10px;
    font-weight: 600;
}


.gf-values-list h3 {
    margin: 0;

    color: var(--gf-ink);

    font-size: 15px;
    font-weight: 600;
}


.gf-values-list p {
    margin:
        7px
        0
        0;

    color: var(--gf-muted);

    font-size: 11px;
    line-height: 1.65;
}


.gf-about-highlight-grid {
    display: grid;
    grid-template-columns:
        minmax(360px, .9fr)
        minmax(0, 1.1fr);

    gap: 60px;

    align-items: center;
}


.gf-about-highlight-image {
    min-height: 380px;

    overflow: hidden;

    background: #ddd;
}


.gf-about-highlight-image img {
    width: 100%;
    height: 100%;
    min-height: 380px;

    display: block;

    object-fit: cover;
}


.gf-mini-list {
    margin-top: 24px;

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


.gf-mini-list > div {
    min-height: 66px;

    padding:
        13px
        0;

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

    display: grid;
    grid-template-columns:
        170px
        minmax(0, 1fr);

    gap: 20px;

    align-items: center;
}


.gf-mini-list strong {
    color: var(--gf-ink);

    font-size: 11px;
    font-weight: 600;
}


.gf-mini-list span {
    color: var(--gf-muted);

    font-size: 10px;
    line-height: 1.55;
}


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

.gf-services-page-section {
    padding:
        40px
        0
        72px;
}


.gf-services-directory {
    border-top:
        1px solid
        var(--gf-line);

    background: var(--gf-surface);
}


.gf-service-directory-row {
    min-height: 150px;

    padding:
        18px
        0;

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

    display: grid;
    grid-template-columns:
        150px
        42px
        minmax(0, 1fr);

    gap: 28px;

    align-items: center;
}


.gf-service-directory-image {
    width: 150px;
    height: 108px;

    overflow: hidden;

    background: #ddd;
}


.gf-service-directory-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.gf-service-directory-number {
    color: var(--gf-gold);

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size: 10px;
    font-weight: 600;
}


.gf-service-directory-title {
    display: flex;
    align-items: center;

    gap: 10px;
}


.gf-service-directory-title i {
    width: 24px;

    color: var(--gf-gold);

    font-size: 12px;
}


.gf-service-directory-title h2 {
    margin: 0;

    color: var(--gf-ink);

    font-size: 18px;
    font-weight: 600;
}


.gf-service-directory-copy p {
    max-width: 720px;

    margin:
        7px
        0
        0;

    color: var(--gf-muted);

    font-size: 11px;
    line-height: 1.65;
}


.gf-service-process {
    padding:
        66px
        0;

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

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


.gf-process-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

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

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


.gf-process-grid > div {
    min-height: 120px;

    padding:
        22px;

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

    display: flex;
    flex-direction: column;
    justify-content: center;
}


.gf-process-grid > div:first-child {
    padding-left: 0;
}


.gf-process-grid > div:last-child {
    border-right: 0;
}


.gf-process-grid span {
    color: var(--gf-gold);

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size: 10px;
}


.gf-process-grid strong {
    margin-top: 9px;

    color: var(--gf-ink);

    font-size: 12px;
    font-weight: 600;
}


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

.gf-contact-page-section {
    padding:
        52px
        0
        72px;
}


.gf-contact-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(300px, .75fr);

    gap: 0;

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

    background: var(--gf-surface);
}


.gf-contact-form-wrap {
    padding: 34px;

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


.gf-contact-head h2 {
    margin:
        8px
        0
        26px;

    color: var(--gf-ink);

    font-size:
        clamp(
            30px,
            4vw,
            44px
        );

    font-weight: 600;

    letter-spacing: -.04em;
}


.gf-contact-form {
    display: grid;

    gap: 17px;
}


.gf-contact-split {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}


.gf-contact-field label {
    display: block;

    margin-bottom: 6px;

    color: var(--gf-muted);

    font-size: 10px;
    font-weight: 600;
}


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

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

    border-radius: 6px;

    outline: 0;

    background: #fff;
    color: var(--gf-ink);

    font-family:
        "IBM Plex Sans",
        sans-serif;

    font-size: 12px;
}


.gf-contact-field input {
    height: 44px;

    padding:
        0
        12px;
}


.gf-contact-field textarea {
    padding:
        12px;

    resize: vertical;
}


.gf-contact-field input:focus,
.gf-contact-field textarea:focus {
    border-color: var(--gf-gold);

    box-shadow:
        inset 0 0 0 1px
        var(--gf-gold);
}


.gf-contact-submit {
    width: fit-content;
    min-height: 42px;

    padding:
        0
        15px;

    border:
        1px solid
        var(--gf-ink);

    border-radius: 6px;

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

    gap: 9px;

    background: var(--gf-ink);
    color: #fff;

    font-size: 11px;
    font-weight: 600;

    cursor: pointer;
}


.gf-contact-details {
    padding:
        10px
        28px;
}


.gf-contact-details > div {
    min-height: 104px;

    padding:
        18px
        0;

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

    display: flex;
    flex-direction: column;
    justify-content: center;
}


.gf-contact-details > div:last-child {
    border-bottom: 0;
}


.gf-contact-details span {
    color: var(--gf-muted);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .12em;
}


.gf-contact-details strong,
.gf-contact-details a {
    margin-top: 7px;

    color: var(--gf-ink);

    font-size: 12px;
    font-weight: 600;

    line-height: 1.6;
}


.gf-contact-track-link {
    display: inline-flex;

    gap: 8px;

    color: var(--gf-gold) !important;
}


.gf-contact-alert {
    margin-bottom: 18px;
    padding:
        11px
        12px;

    display: flex;
    align-items: flex-start;

    gap: 8px;

    font-size: 10px;
    line-height: 1.5;
}


.gf-contact-alert.success {
    border:
        1px solid
        #b9ddc8;

    background: #eef9f2;
    color: #27613f;
}


.gf-contact-alert.error {
    border:
        1px solid
        #ebc0ba;

    background: #fff2f0;
    color: #91382f;
}


.gf-map-section {
    padding-bottom:
        72px;
}


.gf-map-head {
    margin-bottom: 18px;

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

    gap: 30px;
}


.gf-map-head h2 {
    margin:
        7px
        0
        0;

    color: var(--gf-ink);

    font-size:
        clamp(
            28px,
            3.8vw,
            40px
        );

    font-weight: 600;

    letter-spacing: -.04em;
}


.gf-map-address {
    max-width: 440px;

    color: var(--gf-muted);

    font-size: 11px;
    line-height: 1.6;

    text-align: right;
}


.gf-map-frame {
    border:
        1px solid
        var(--gf-line);

    overflow: hidden;

    background: #ddd;
}


.gf-map-frame iframe {
    width: 100%;
    height: 430px;

    display: block;

    border: 0;
}


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

@media (max-width: 900px) {

    .gf-page-head-grid,
    .gf-about-grid,
    .gf-about-highlight-grid,
    .gf-contact-grid {
        grid-template-columns: 1fr;
    }


    .gf-page-head-grid {
        gap: 22px;
    }


    .gf-values-list {
        grid-template-columns: 1fr;
    }


    .gf-values-list article,
    .gf-values-list article + article {
        min-height: 0;

        padding:
            22px
            0;

        border-right: 0;
        border-bottom:
            1px solid
            var(--gf-line-dark);
    }


    .gf-values-list article:last-child {
        border-bottom: 0;
    }


    .gf-contact-form-wrap {
        border-right: 0;
        border-bottom:
            1px solid
            var(--gf-line);
    }


    .gf-process-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .gf-process-grid > div:nth-child(2) {
        border-right: 0;
    }


    .gf-process-grid > div:nth-child(1),
    .gf-process-grid > div:nth-child(2) {
        border-bottom:
            1px solid
            var(--gf-line-dark);
    }

}


@media (max-width: 700px) {

    .gf-page-head-grid {
        min-height: 0;

        padding:
            42px
            0;
    }


    .gf-page-head h1 {
        font-size:
            clamp(
                40px,
                12vw,
                56px
            );
    }


    .gf-page-image {
        min-height: 310px;
    }


    .gf-inner-section {
        padding:
            54px
            0;
    }


    .gf-about-highlight-image,
    .gf-about-highlight-image img {
        min-height: 310px;
    }


    .gf-mini-list > div {
        grid-template-columns: 1fr;

        gap: 5px;
    }


    .gf-service-directory-row {
        grid-template-columns:
            88px
            30px
            minmax(0, 1fr);

        gap: 14px;
    }


    .gf-service-directory-image {
        width: 88px;
        height: 68px;
    }


    .gf-contact-split {
        grid-template-columns: 1fr;
    }


    .gf-contact-form-wrap {
        padding: 24px;
    }


    .gf-map-head {
        align-items: flex-start;
        flex-direction: column;
    }


    .gf-map-address {
        text-align: left;
    }


    .gf-map-frame iframe {
        height: 340px;
    }

}


@media (max-width: 460px) {

    .gf-service-directory-row {
        grid-template-columns:
            78px
            minmax(0, 1fr);
    }


    .gf-service-directory-number {
        display: none;
    }


    .gf-service-directory-image {
        width: 78px;
        height: 62px;
    }


    .gf-process-grid {
        grid-template-columns: 1fr;
    }


    .gf-process-grid > div,
    .gf-process-grid > div:first-child {
        min-height: 90px;

        padding:
            18px
            0;

        border-right: 0;
        border-bottom:
            1px solid
            var(--gf-line-dark);
    }


    .gf-process-grid > div:last-child {
        border-bottom: 0;
    }

}