/* =========================================================
   SPIRE DIMENSIONS
   SERVICES PAGE CSS
   FIXED VERSION
========================================================= */


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

:root {

    --services-black: #111111;
    --services-dark: #181818;
    --services-white: #ffffff;
    --services-cream: #f5f3ef;
    --services-soft: #e9e6df;
    --services-grey: #777777;
    --services-light-grey: #b4b1ab;
    --services-gold: #b79b67;

    --services-serif: "Playfair Display", serif;
    --services-sans: "DM Sans", sans-serif;

    --services-transition:
        all 0.45s cubic-bezier(.2,.7,.2,1);

}


/* =========================================================
   SERVICES PAGE BASE
========================================================= */

body {

    font-family: var(--services-sans);

    background: var(--services-cream);

}


/* =========================================================
   SCROLL PROGRESS
========================================================= */

.scroll-progress {

    position: fixed;

    top: 0;
    left: 0;

    width: 0;
    height: 3px;

    background: var(--services-gold);

    z-index: 100000;

}


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

.services-hero {

    min-height: 900px;

    height: 100vh;

    max-height: 1000px;

    position: relative;

    display: flex;

    align-items: center;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.86),
            rgba(0,0,0,.48),
            rgba(0,0,0,.15)
        ),
        url("https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?auto=format&fit=crop&w=1800&q=80")
        center/cover;

    color: var(--services-white);

    overflow: hidden;

}


.services-hero::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.3),
            transparent 50%,
            rgba(0,0,0,.35)
        );

    pointer-events: none;

}


.hero-bg-shape {

    position: absolute;

    width: 700px;
    height: 700px;

    border-radius: 50%;

    right: -250px;

    top: 15%;

    border:
        1px solid
        rgba(255,255,255,.14);

}


.hero-bg-shape::after {

    content: "";

    position: absolute;

    inset: 70px;

    border-radius: 50%;

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

}


.services-hero-content {

    position: relative;

    z-index: 2;

    padding-top: 100px;

}


.services-hero-label {

    display: flex;

    align-items: center;

    gap: 13px;

    font-size: 11px;

    letter-spacing: 3px;

    margin-bottom: 30px;

}


.services-hero-label span {

    width: 35px;

    height: 1px;

    background: var(--services-gold);

}


.services-hero h1 {

    font-family: var(--services-serif);

    font-size:
        clamp(55px, 7vw, 105px);

    line-height: .98;

    font-weight: 400;

    max-width: 1000px;

}


.services-hero h1 em {

    color: #d0c0a0;

    font-style: italic;

}


.services-hero-description {

    max-width: 510px;

    font-size: 15px;

    line-height: 1.8;

    color: rgba(255,255,255,.72);

    margin-top: 38px;

}


.hero-actions {

    display: flex;

    align-items: center;

    gap: 35px;

    margin-top: 42px;

}


.btn {

    display: inline-flex;

    align-items: center;

    gap: 25px;

    padding: 17px 24px;

    text-transform: uppercase;

    font-size: 10px;

    letter-spacing: 2px;

    transition: var(--services-transition);

}


.btn-dark {

    background: var(--services-white);

    color: var(--services-black);

}


.btn-dark:hover {

    background: var(--services-gold);

    color: var(--services-white);

}


.btn span {

    font-size: 17px;

}


.text-link {

    font-size: 11px;

    letter-spacing: 1px;

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

    padding-bottom: 7px;

}


.hero-side-text {

    position: absolute;

    right: 30px;

    bottom: 60px;

    writing-mode: vertical-rl;

    font-size: 8px;

    letter-spacing: 4px;

    opacity: .55;

    z-index: 2;

}


.hero-number {

    position: absolute;

    bottom: 50px;

    left: 40px;

    font-family: var(--services-serif);

    font-size: 12px;

    color: var(--services-gold);

    z-index: 2;

}


/* =========================================================
   INTRO
========================================================= */

.services-intro {

    padding: 150px 0;

    background: var(--services-cream);

}


.services-intro-grid {

    display: grid;

    grid-template-columns: 1fr 2fr;

    gap: 100px;

}


.services-section-label {

    font-size: 10px;

    letter-spacing: 3px;

    color: var(--services-grey);

}


.services-section-label span {

    color: var(--services-gold);

    margin-right: 14px;

}


.services-intro-content {

    max-width: 900px;

}


.services-intro-content h2 {

    font-family: var(--services-serif);

    font-size:
        clamp(45px, 5vw, 78px);

    font-weight: 400;

    line-height: 1.05;

}


.services-intro-content h2 span {

    font-style: italic;

    color: var(--services-gold);

}


.services-intro-content p {

    max-width: 620px;

    margin-top: 30px;

    color: var(--services-grey);

    line-height: 1.9;

    font-size: 15px;

}


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

.services-section {

    padding: 120px 0 160px;

    background: var(--services-white);

    position: relative;

    z-index: 1;

}


.services-heading {

    max-width: 800px;

    margin-bottom: 70px;

}


.services-heading h2 {

    font-family: var(--services-serif);

    font-weight: 400;

    font-size:
        clamp(50px, 6vw, 90px);

    line-height: 1;

    margin-top: 25px;

    color: var(--services-black);

}


.services-heading h2 em {

    color: var(--services-gold);

    font-style: italic;

}


.services-heading p {

    color: var(--services-grey);

    line-height: 1.8;

    max-width: 530px;

    margin-top: 25px;

}


/* =========================================================
   SERVICE FILTER
========================================================= */

.service-filter {

    display: flex;

    gap: 10px;

    border-bottom:
        1px solid
        var(--services-soft);

    padding-bottom: 25px;

    margin-bottom: 60px;

    flex-wrap: wrap;

}


.filter-btn {

    border:
        1px solid
        var(--services-soft);

    background: transparent;

    padding: 11px 20px;

    font-size: 10px;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    cursor: pointer;

    transition: var(--services-transition);

    color: var(--services-black);

    font-family: var(--services-sans);

}


.filter-btn:hover,
.filter-btn.active {

    background: var(--services-black);

    color: var(--services-white);

    border-color: var(--services-black);

}


/* =========================================================
   SERVICE GRID
========================================================= */

.services-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 30px;

}


.service-card {

    position: relative;

    background: var(--services-cream);

    overflow: hidden;

    color: var(--services-black);

    transition:
        opacity .4s ease,
        transform .4s ease;

}


.service-card.large {

    grid-row: span 1;

}


.service-card.wide {

    grid-column: span 2;

}


.services-grid .service-card:nth-child(5) {

    grid-column: span 2;

}


.service-card.hidden {

    display: none;

}


.service-card.show-card {

    animation:
        cardShow .5s
        cubic-bezier(.2,.7,.2,1);

}


@keyframes cardShow {

    from {

        opacity: 0;

        transform: translateY(15px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/* =========================================================
   SERVICE IMAGES
========================================================= */

.service-image {

    height: 430px;

    position: relative;

    overflow: hidden;

    background-size: cover;

    background-position: center;

    transition: var(--services-transition);

}


.service-card.large .service-image {

    height: 560px;

}


.service-card.wide .service-image {

    height: 500px;

}


.architecture-image {

    background-image:
        url("https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1600&q=80");

}


.interior-image {

    background-image:
        url("https://images.unsplash.com/photo-1600607688969-a5bfcd646154?auto=format&fit=crop&w=1400&q=80");

}


.construction-image {

    background-image:
        url("https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&w=1400&q=80");

}


.approval-image {

    background-image:
        url("https://images.unsplash.com/photo-1541888946425-d81bb19240f5?auto=format&fit=crop&w=1400&q=80");

}


.management-image {

    background-image:
        url("https://images.unsplash.com/photo-1487958449943-2429e8be8625?auto=format&fit=crop&w=1800&q=80");

}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.image-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.05),
            rgba(0,0,0,.5)
        );

    pointer-events: none;

}


.service-card:hover .service-image {

    transform: scale(1.035);

}


.service-index {

    position: absolute;

    top: 25px;

    left: 25px;

    color: var(--services-white);

    font-family: var(--services-serif);

    font-size: 14px;

    z-index: 2;

}


/* =========================================================
   SERVICE INFO
   FIXED TITLE VISIBILITY
========================================================= */

.service-info {

    padding: 35px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(0, .8fr);

    gap: 35px;

    position: relative;

    min-height: 205px;

    color: var(--services-black);

    overflow: visible;

    isolation: isolate;

}


/* Prevent grid text from being squeezed */

.service-info > div {

    min-width: 0;

    position: relative;

    z-index: 3;

}


.service-info .service-type {

    display: block;

    font-size: 8px;

    letter-spacing: 2.5px;

    color: var(--services-gold) !important;

    margin-bottom: 15px;

    font-family: var(--services-sans);

    opacity: 1 !important;

    visibility: visible !important;

}


/* =========================================================
   IMPORTANT FIX
   ARCHITECTURE / INTERIOR / CONSTRUCTION / BDA BMC TITLES
========================================================= */

.services-section
.services-grid
.service-card
.service-info h3 {

    display: block !important;

    font-family:
        "Playfair Display",
        var(--services-serif),
        serif !important;

    font-size: 32px !important;

    line-height: 1.15 !important;

    font-weight: 400 !important;

    color: #111111 !important;

    -webkit-text-fill-color: #111111 !important;

    opacity: 1 !important;

    visibility: visible !important;

    position: relative !important;

    z-index: 10 !important;

    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

    height: auto !important;

    min-height: 0 !important;

    max-height: none !important;

    margin: 0 !important;

    padding: 0 !important;

    white-space: normal !important;

    word-break: normal !important;

    overflow-wrap: normal !important;

    overflow: visible !important;

    text-transform: none !important;

    text-decoration: none !important;

    transform: none;

    clip: auto !important;

}


/* Make forced HTML line breaks behave normally */

.service-info h3 br {

    display: block !important;

    content: "";

}


/* Architecture title */

#architecture .service-info h3 {

    color: #111111 !important;

    -webkit-text-fill-color: #111111 !important;

}


/* Interior title */

#interior-design .service-info h3 {

    color: #111111 !important;

    -webkit-text-fill-color: #111111 !important;

}


/* Construction title */

#construction .service-info h3 {

    color: #111111 !important;

    -webkit-text-fill-color: #111111 !important;

}


/* BDA & BMC title */

#plan-approval .service-info h3 {

    color: #111111 !important;

    -webkit-text-fill-color: #111111 !important;

}


/* Project Management title */

#project-management .service-info h3 {

    color: #111111 !important;

    -webkit-text-fill-color: #111111 !important;

}


.service-info p {

    color: var(--services-grey) !important;

    font-size: 13px;

    line-height: 1.8;

    position: relative;

    z-index: 3;

    margin: 0;

    min-width: 0;

}


/* =========================================================
   SERVICE LINK
========================================================= */

.service-link {

    position: absolute;

    right: 35px;

    bottom: 35px;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 1px;

    display: flex;

    gap: 15px;

    align-items: center;

    color: var(--services-black) !important;

    text-decoration: none;

    z-index: 10;

}


.service-link span {

    width: 28px;

    height: 28px;

    border:
        1px solid #ccc;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: var(--services-transition);

}


.service-link:hover span {

    background: var(--services-black);

    color: var(--services-white);

    border-color: var(--services-black);

}


/* =========================================================
   BDA BMC CARD
========================================================= */

.bda-bmc-service-card {

    cursor: pointer;

}


.bda-bmc-service-card:focus {

    outline:
        2px solid
        var(--services-gold);

    outline-offset: 4px;

}


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

.process-section {

    padding: 150px 0;

    background: var(--services-black);

    color: var(--services-white);

}


.process-top {

    display: grid;

    grid-template-columns:
        1fr 2fr;

    margin-bottom: 80px;

}


.process-top h2 {

    font-family: var(--services-serif);

    font-size:
        clamp(50px, 6vw, 90px);

    font-weight: 400;

    line-height: 1;

}


.process-top h2 em {

    color: var(--services-gold);

    font-style: italic;

}


.process-list {

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

}


.process-item {

    display: grid;

    grid-template-columns:
        100px 1fr 50px;

    align-items: center;

    gap: 40px;

    padding: 45px 0;

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

    transition: var(--services-transition);

}


.process-item:hover {

    padding-left: 20px;

}


.process-number {

    color: var(--services-gold);

    font-family: var(--services-serif);

}


.process-item h3 {

    font-family: var(--services-serif);

    font-size: 30px;

    font-weight: 400;

    margin-bottom: 10px;

    color: var(--services-white);

}


.process-item p {

    color: #999;

    font-size: 13px;

    max-width: 480px;

    line-height: 1.7;

}


.process-arrow {

    font-size: 25px;

    color: var(--services-gold);

}


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

.stats-section {

    padding: 110px 0;

    background: var(--services-cream);

}


.services-stats-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    border-top:
        1px solid
        #d8d5cf;

    border-bottom:
        1px solid
        #d8d5cf;

}


.services-stat {

    padding: 55px 30px;

    text-align: center;

    border-right:
        1px solid
        #d8d5cf;

}


.services-stat:last-child {

    border-right: 0;

}


.services-stat strong {

    display: block;

    font-family: var(--services-serif);

    font-size: 60px;

    font-weight: 400;

    color: var(--services-black);

}


.services-stat span {

    display: block;

    margin-top: 12px;

    color: var(--services-grey);

    font-size: 9px;

    letter-spacing: 2px;

}


/* =========================================================
   CONSULTATION / CTA
========================================================= */

.consultation-section {

    position: relative;

    background: var(--services-dark);

    color: var(--services-white);

    padding: 170px 0;

    overflow: hidden;

}


.cta-circle {

    position: absolute;

    width: 650px;

    height: 650px;

    border:
        1px solid
        rgba(183,155,103,.18);

    border-radius: 50%;

    right: -250px;

    top: 50%;

    transform: translateY(-50%);

}


.cta-circle::after {

    content: "";

    position: absolute;

    inset: 70px;

    border:
        1px solid
        rgba(183,155,103,.12);

    border-radius: 50%;

}


.services-cta-content {

    position: relative;

    z-index: 2;

    max-width: 950px;

}


.cta-label {

    color: var(--services-gold);

    font-size: 9px;

    letter-spacing: 3px;

}


.services-cta-content h2 {

    font-family: var(--services-serif);

    font-size:
        clamp(55px, 7vw, 100px);

    font-weight: 400;

    line-height: .95;

    margin-top: 25px;

}


.services-cta-content h2 em {

    color: var(--services-gold);

    font-style: italic;

}


.services-cta-content p {

    color: #999;

    max-width: 530px;

    line-height: 1.8;

    margin: 35px 0;

}


.cta-button {

    display: inline-flex;

    align-items: center;

    gap: 40px;

    border:
        1px solid
        rgba(255,255,255,.3);

    padding: 20px 25px;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 2px;

    transition: var(--services-transition);

}


.cta-button span {

    font-size: 20px;

    color: var(--services-gold);

}


.cta-button:hover {

    background: var(--services-white);

    color: var(--services-black);

}


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

.reveal {

    opacity: 0;

    transform: translateY(40px);

    transition:
        opacity .9s ease,
        transform .9s
        cubic-bezier(.2,.7,.2,1);

}


.reveal.visible {

    opacity: 1;

    transform: translateY(0);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {


    .services-intro-grid,
    .process-top {

        grid-template-columns: 1fr;

        gap: 40px;

    }


    .services-grid {

        grid-template-columns: 1fr;

    }


    .service-card.wide {

        grid-column: auto;

    }


    .services-grid .service-card:nth-child(5) {

        grid-column: auto;

    }


    .service-info {

        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(0, .85fr);

        gap: 25px;

    }


    .services-section
    .services-grid
    .service-card
    .service-info h3 {

        font-size: 30px !important;

    }


    .services-stats-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .services-stat:nth-child(2) {

        border-right: 0;

    }


    .services-stat:nth-child(-n+2) {

        border-bottom:
            1px solid
            #d8d5cf;

    }

}


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

@media (max-width: 650px) {


    .services-hero {

        min-height: 750px;

        height: 90vh;

        background-position:
            65% center;

    }


    .services-hero-content {

        padding-top: 80px;

    }


    .services-hero h1 {

        font-size:
            clamp(45px, 14vw, 68px);

    }


    .services-hero-description {

        font-size: 13px;

    }


    .hero-actions {

        flex-direction: column;

        align-items: flex-start;

        gap: 20px;

    }


    .hero-side-text {

        display: none;

    }


    .hero-number {

        left: 18px;

        bottom: 25px;

    }


    .services-intro {

        padding: 90px 0;

    }


    .services-intro-content h2 {

        font-size:
            clamp(40px, 12vw, 58px);

    }


    .services-section {

        padding: 90px 0;

    }


    .services-heading h2 {

        font-size: 52px;

    }


    .service-filter {

        overflow-x: auto;

        flex-wrap: nowrap;

        padding-bottom: 18px;

        -webkit-overflow-scrolling: touch;

    }


    .filter-btn {

        white-space: nowrap;

        flex: 0 0 auto;

    }


    .service-image,
    .service-card.large .service-image,
    .service-card.wide .service-image {

        height: 360px;

    }


    /*
       IMPORTANT MOBILE FIX
       Remove two-column text layout
    */

    .service-info {

        display: block;

        padding: 28px;

        min-height: 245px;

        overflow: visible;

    }


    .service-info > div {

        width: 100%;

        max-width: 100%;

    }


    .services-section
    .services-grid
    .service-card
    .service-info h3 {

        display: block !important;

        font-size: 29px !important;

        line-height: 1.18 !important;

        width: 100% !important;

        max-width: 100% !important;

        color: #111111 !important;

        -webkit-text-fill-color: #111111 !important;

        opacity: 1 !important;

        visibility: visible !important;

        overflow: visible !important;

        white-space: normal !important;

    }


    .service-info p {

        margin-top: 20px;

        margin-bottom: 55px;

        font-size: 13px;

        line-height: 1.75;

    }


    .service-link {

        right: 28px;

        bottom: 28px;

    }


    .process-section {

        padding: 90px 0;

    }


    .process-top h2 {

        font-size: 55px;

    }


    .process-item {

        grid-template-columns:
            45px 1fr 30px;

        gap: 15px;

        padding: 35px 0;

    }


    .process-item h3 {

        font-size: 25px;

    }


    .stats-section {

        padding: 70px 0;

    }


    .services-stats-grid {

        grid-template-columns: 1fr;

    }


    .services-stat {

        padding: 40px 10px;

        border-right: none;

        border-bottom:
            1px solid
            #d8d5cf;

    }


    .services-stat:last-child {

        border-bottom: 0;

    }


    .services-stat strong {

        font-size: 43px;

    }


    .services-stat span {

        font-size: 7px;

        letter-spacing: 1px;

    }


    .consultation-section {

        padding: 110px 0;

    }


    .services-cta-content h2 {

        font-size: 57px;

    }

}


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

@media (max-width: 420px) {


    .services-hero h1 {

        font-size: 43px;

    }


    .services-heading h2 {

        font-size: 44px;

    }


    .service-image,
    .service-card.large .service-image,
    .service-card.wide .service-image {

        height: 300px;

    }


    .service-info {

        padding:
            25px
            22px;

        min-height: 235px;

    }


    .services-section
    .services-grid
    .service-card
    .service-info h3 {

        font-size: 27px !important;

        line-height: 1.2 !important;

    }


    .service-link {

        right: 22px;

        bottom: 24px;

    }


    .process-top h2 {

        font-size: 46px;

    }


    .services-cta-content h2 {

        font-size: 47px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {


    html {

        scroll-behavior: auto;

    }


    .reveal {

        opacity: 1;

        transform: none;

    }


    * {

        transition: none !important;

        animation: none !important;

    }

}


/* =========================================================
   FINAL PROTECTION AGAINST style.css / shared-layout.css
   KEEP THIS SECTION AT THE VERY BOTTOM
========================================================= */

body .services-section
.services-grid
.service-card
.service-info h3 {

    color: #111111 !important;

    -webkit-text-fill-color: #111111 !important;

    opacity: 1 !important;

    visibility: visible !important;

    display: block !important;

}


body .services-section
.services-grid
.service-card
.service-info {

    color: #111111 !important;

}


body #architecture h3,
body #interior-design h3,
body #construction h3,
body #plan-approval h3,
body #project-management h3 {

    color: #111111 !important;

    -webkit-text-fill-color: #111111 !important;

    opacity: 1 !important;

    visibility: visible !important;

}


/* END OF SERVICES PAGE CSS */

/* Architecture & Planning card opens its dedicated service page */
.service-card[data-service-link="architecture-planning.html"] {
    cursor: pointer;
}

.service-card[data-service-link="architecture-planning.html"]:focus-visible {
    outline: 2px solid #b49355;
    outline-offset: 5px;
}


/* Additional service imagery */
.landscaping-image{background-image:url("https://images.unsplash.com/photo-1585320806297-9794b3e4eeae?auto=format&fit=crop&w=1400&q=80");}
.exterior-image{background-image:url("https://images.unsplash.com/photo-1600566753086-00f18fb6b3ea?auto=format&fit=crop&w=1400&q=80");}
.engineering-image{background-image:url("https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=1400&q=80");}
.valuation-image{background-image:url("https://images.unsplash.com/photo-1560518883-ce09059eeffa?auto=format&fit=crop&w=1400&q=80");}