/* =========================================================
   SERVICES PAGE — PREMIUM VISUAL SYSTEM
   ========================================================= */


/* HERO */

.services-hero {
    position: relative;
    min-height: 100svh;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: #050505;
}

.services-hero-media,
.services-hero-overlay {
    position: absolute;
    inset: 0;
}

.services-hero-media img {
    width: 100%;
    height: 100%;

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

    filter:
        brightness(.58)
        contrast(1.08)
        saturate(.92);

    transform: scale(1.015);
}

.services-hero-overlay {
    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(5,5,5,.16) 0%,
            rgba(5,5,5,.10) 48%,
            rgba(5,5,5,.80) 100%
        ),
        linear-gradient(
            90deg,
            rgba(5,5,5,.94) 0%,
            rgba(5,5,5,.72) 36%,
            rgba(5,5,5,.25) 70%,
            rgba(5,5,5,.07) 100%
        );
}

.services-hero-glow {
    position: absolute;
    z-index: 2;

    border-radius: 50%;
    filter: blur(100px);

    pointer-events: none;
}

.services-hero-glow-one {
    width: 460px;
    height: 460px;

    right: -130px;
    top: 18%;

    background: rgba(42,104,255,.12);
}

.services-hero-glow-two {
    width: 340px;
    height: 340px;

    right: 25%;
    bottom: -180px;

    background: rgba(222,35,151,.08);
}

.services-hero-inner {
    position: relative;
    z-index: 4;

    width: 100%;

    padding-top: 110px;

    display: grid;
    grid-template-columns: minmax(0,1fr) 160px;
    gap: 80px;

    align-items: center;
}

.services-hero-copy {
    max-width: 1050px;
}

.services-hero-kicker {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 28px;

    color: #d2ac65;

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

    letter-spacing: .25em;
}

.services-hero-kicker > span {
    width: 42px;
    height: 1px;

    background: currentColor;
}

.services-hero h1 {
    max-width: 1000px;

    margin: 0;

    font-size: clamp(72px, 8vw, 140px);

    font-weight: 400;
    line-height: .86;

    letter-spacing: -.07em;
}

.services-hero h1 em {
    display: block;

    font-family: 'Playfair Display', serif;

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

    font-weight: 400;

    letter-spacing: -.045em;
}

.services-hero-copy > p {
    max-width: 620px;

    margin: 38px 0 0;

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

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

.services-hero-side {
    display: flex;
    flex-direction: column;

    gap: 22px;
}

.services-hero-side > span {
    color: #d2ac65;

    font-size: 9px;

    letter-spacing: .18em;
}

.services-hero-side > div {
    width: 1px;
    height: 100px;

    background:
        linear-gradient(
            to bottom,
            #d2ac65,
            transparent
        );
}

.services-hero-side p {
    margin: 0;

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

    font-size: 9px;
    line-height: 2;

    letter-spacing: .16em;
}

.services-hero-bottom {
    position: absolute;

    z-index: 4;

    left: 0;
    right: 0;
    bottom: 0;

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

.services-hero-bottom-inner {
    min-height: 82px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.services-hero-bottom-inner > span {
    color: rgba(255,255,255,.35);

    font-size: 9px;

    letter-spacing: .18em;
}

.services-hero-bottom-inner > a {
    display: flex;
    align-items: center;

    gap: 18px;

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

    font-size: 9px;

    letter-spacing: .15em;

    text-transform: uppercase;
}

.services-hero-bottom-inner > a > span {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
}


/* COMMON */

.services-index {
    display: block;

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

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

    letter-spacing: .18em;
}

.services-index > span {
    margin-right: 18px;

    color: #d2ac65;
}


/* INTRO */

.services-intro {
    position: relative;

    padding: 155px 0 175px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 88% 18%,
            rgba(38,96,255,.065),
            transparent 27%
        ),
        #070707;
}

.services-watermark {
    position: absolute;

    right: -3%;
    top: -90px;

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

    font-size: clamp(240px,30vw,540px);

    font-weight: 700;
    line-height: 1;

    letter-spacing: -.09em;

    pointer-events: none;
}

.services-intro-grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0,1.2fr)
        minmax(320px,.7fr);

    gap: clamp(70px,10vw,160px);

    align-items: end;
}

.services-intro h2 {
    margin: 35px 0 0;

    max-width: 900px;

    font-size: clamp(58px,6.5vw,104px);

    font-weight: 400;
    line-height: .94;

    letter-spacing: -.065em;
}

.services-intro h2 span {
    display: block;

    color: rgba(255,255,255,.40);
}

.services-intro h2 em {
    display: block;

    font-family: 'Playfair Display', serif;

    color: #d2ac65;

    font-weight: 400;
}

.services-intro-copy p {
    margin: 0 0 22px;

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

    font-size: 15px;
    line-height: 1.85;
}

.services-intro-copy .services-intro-lead {
    color: rgba(255,255,255,.78);

    font-size: 19px;
    line-height: 1.7;
}

.services-intro-line {
    width: 70px;
    height: 1px;

    margin: 34px 0;

    background: #d2ac65;
}

.services-intro-small {
    max-width: 440px;

    font-size: 13px !important;
}


/* FEATURED */

.services-featured {
    padding: 40px 0 170px;

    background: #050505;
}

.services-featured-grid {
    display: grid;

    grid-template-columns:
        minmax(0,1.25fr)
        minmax(350px,.7fr);

    gap: clamp(65px,9vw,140px);

    align-items: center;
}

.services-featured-photo {
    position: relative;

    min-height: 720px;

    overflow: hidden;
}

.services-featured-photo img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        brightness(.72)
        contrast(1.07)
        saturate(.92);

    transition:
        transform .9s ease,
        filter .6s ease;
}

.services-featured-photo:hover img {
    transform: scale(1.045);

    filter:
        brightness(.82)
        saturate(1);
}

.services-featured-photo-overlay {
    position: absolute;
    inset: 0;

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

.services-featured-photo-top,
.services-featured-photo-bottom {
    position: absolute;

    left: 28px;
    right: 28px;

    z-index: 2;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.services-featured-photo-top {
    top: 28px;

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

    font-size: 9px;

    letter-spacing: .17em;
}

.services-featured-photo-top span:first-child {
    color: #d2ac65;
}

.services-featured-photo-bottom {
    bottom: 28px;

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

    font-size: 10px;

    letter-spacing: .14em;
    text-transform: uppercase;
}

.services-featured-arrow {
    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255,255,255,.22);
    border-radius: 50%;

    color: #d2ac65;
}

.services-featured-number {
    display: block;

    margin-bottom: 35px;

    color: #d2ac65;

    font-size: 10px;

    letter-spacing: .18em;
}

.services-featured-copy h2 {
    margin: 0 0 35px;

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

    font-weight: 400;
    line-height: .95;

    letter-spacing: -.06em;
}

.services-featured-copy h2 em {
    display: block;

    font-family: 'Playfair Display', serif;

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

    font-weight: 400;
}

.services-featured-copy p {
    margin: 0 0 22px;

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

    font-size: 15px;
    line-height: 1.85;
}

.services-text-link {
    display: inline-flex;
    align-items: center;

    gap: 20px;

    margin-top: 15px;
    padding-bottom: 7px;

    border-bottom: 1px solid rgba(210,172,101,.45);

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

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

    letter-spacing: .14em;
    text-transform: uppercase;
}

.services-text-link span {
    color: #d2ac65;
}


/* GRID */

.services-grid-section {
    padding: 155px 0 170px;

    background:
        radial-gradient(
            circle at 12% 90%,
            rgba(222,35,151,.045),
            transparent 25%
        ),
        #070707;
}

.services-grid-heading {
    margin-bottom: 75px;
}

.services-grid-heading h2 {
    margin: 32px 0 0;

    font-size: clamp(55px,6vw,96px);

    font-weight: 400;
    line-height: .95;

    letter-spacing: -.06em;
}

.services-grid-heading h2 em {
    font-family: 'Playfair Display', serif;

    color: #d2ac65;

    font-weight: 400;
}

.services-grid {
    display: grid;

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

    gap: 16px;
}

.services-card {
    position: relative;

    min-height: 500px;

    overflow: hidden;

    padding: 28px;

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

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

    background: #0b0b0a;
}

.services-card img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        brightness(.50)
        saturate(.78);

    transition:
        transform .8s ease,
        filter .6s ease;
}

.services-card:hover img {
    transform: scale(1.05);

    filter:
        brightness(.66)
        saturate(.96);
}

.services-card-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.08),
            rgba(0,0,0,.18) 48%,
            rgba(0,0,0,.82) 100%
        );
}

.services-card-top,
.services-card-bottom {
    position: relative;

    z-index: 2;
}

.services-card-top {
    display: flex;
    justify-content: space-between;

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

    font-size: 9px;

    letter-spacing: .17em;
}

.services-card-top span:first-child {
    color: #d2ac65;
}

.services-card-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 25px;
}

.services-card-bottom h3 {
    max-width: 520px;

    margin: 0;

    font-size: clamp(34px,3.2vw,54px);

    font-weight: 400;
    line-height: 1;

    letter-spacing: -.05em;
}

.services-card-bottom p {
    max-width: 420px;

    margin: 15px 0 0;

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

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

.services-card-arrow {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255,255,255,.22);
    border-radius: 50%;

    color: #d2ac65;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}

.services-card:hover .services-card-arrow {
    background: #d2ac65;

    color: #080808;

    transform: rotate(45deg);
}


/* CINEMATIC */

.services-visual-break {
    position: relative;

    min-height: 78vh;

    display: flex;
    align-items: flex-end;

    overflow: hidden;

    background: #050505;
}

.services-visual-break-media,
.services-visual-break-overlay {
    position: absolute;
    inset: 0;
}

.services-visual-break-media img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        brightness(.62)
        contrast(1.08)
        saturate(.92);
}

.services-visual-break-overlay {
    background:
        linear-gradient(
            to top,
            rgba(5,5,5,.84),
            rgba(5,5,5,.10) 65%
        ),
        linear-gradient(
            90deg,
            rgba(5,5,5,.70),
            rgba(5,5,5,.05)
        );
}

.services-visual-break-content {
    position: relative;

    z-index: 2;

    padding-bottom: 85px;
}

.services-visual-break-content > span {
    color: #d2ac65;

    font-size: 10px;

    letter-spacing: .19em;
}

.services-visual-break h2 {
    max-width: 1050px;

    margin: 25px 0 0;

    font-size: clamp(58px,7vw,112px);

    font-weight: 400;
    line-height: .92;

    letter-spacing: -.065em;
}

.services-visual-break h2 em {
    display: block;

    font-family: 'Playfair Display', serif;

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

    font-weight: 400;
}


/* SECONDARY */

.services-secondary {
    position: relative;

    padding: 155px 0 170px;

    overflow: hidden;

    background:
        linear-gradient(
            110deg,
            #080808,
            #0c0b10
        );
}

.services-secondary-glow {
    position: absolute;

    right: -130px;
    top: 10%;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(47,103,255,.10),
            transparent 68%
        );

    filter: blur(30px);
}

.services-secondary-heading {
    position: relative;
    z-index: 2;

    margin-bottom: 75px;
}

.services-secondary-heading h2 {
    max-width: 950px;

    margin: 32px 0 0;

    font-size: clamp(55px,6vw,96px);

    font-weight: 400;
    line-height: .95;

    letter-spacing: -.06em;
}

.services-secondary-heading h2 em {
    display: block;

    font-family: 'Playfair Display', serif;

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

    font-weight: 400;
}

.services-secondary-grid {
    position: relative;
    z-index: 2;

    display: grid;

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

    gap: 14px;
}

.services-secondary-card {
    position: relative;

    min-height: 430px;

    padding: 28px;

    overflow: hidden;

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

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

    background:
        radial-gradient(
            circle at 78% 20%,
            rgba(210,172,101,.08),
            transparent 30%
        ),
        #0a0a0a;

    transition:
        transform .35s ease,
        border-color .35s ease;
}

.services-secondary-card:hover {
    transform: translateY(-7px);

    border-color: rgba(210,172,101,.32);
}

.services-secondary-card-number {
    position: relative;
    z-index: 2;

    color: #d2ac65;

    font-size: 10px;

    letter-spacing: .17em;
}

.services-secondary-gobo {
    position: absolute;

    left: 50%;
    top: 50%;

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

    width: 210px;
    height: 210px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(210,172,101,.15);
    border-radius: 50%;

    color: rgba(210,172,101,.22);

    font-family: 'Playfair Display', serif;

    font-size: 70px;
}

.services-secondary-light {
    color: #080808;

    background:
        linear-gradient(
            135deg,
            #f1eee7,
            #cfcac0
        );
}

.services-secondary-light .services-secondary-card-number {
    color: #705526;
}

.services-secondary-floor {
    position: absolute;

    left: 10%;
    right: 10%;
    top: 28%;
    bottom: 24%;

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

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.90),
            rgba(210,210,210,.78)
        );

    box-shadow:
        0 35px 60px
        rgba(0,0,0,.15);

    transform:
        perspective(700px)
        rotateX(60deg);
}

.services-secondary-orbit {
    position: absolute;

    left: 50%;
    top: 47%;

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

    width: 190px;
    height: 190px;

    border-radius: 50%;

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

    background:
        radial-gradient(
            circle at 32% 28%,
            rgba(255,255,255,.38),
            rgba(255,255,255,.07) 28%,
            rgba(210,172,101,.07) 55%,
            transparent 70%
        );

    box-shadow:
        0 0 80px
        rgba(255,255,255,.04);
}

.services-secondary-card-bottom {
    position: relative;
    z-index: 2;

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

    gap: 20px;
}

.services-secondary-card-bottom h3 {
    margin: 0;

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

    font-weight: 400;

    letter-spacing: -.045em;
}

.services-secondary-card-bottom > span {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    border: 1px solid currentColor;
    border-radius: 50%;

    opacity: .65;
}


/* PHILOSOPHY */

.services-philosophy {
    padding: 155px 0;

    background: #d2ac65;

    color: #080808;
}

.services-philosophy .services-index {
    color: rgba(0,0,0,.50);
}

.services-philosophy .services-index > span {
    color: #080808;
}

.services-philosophy-grid {
    margin-top: 55px;

    display: grid;

    grid-template-columns:
        minmax(0,1.15fr)
        minmax(300px,.65fr);

    gap: clamp(70px,10vw,150px);
}

.services-philosophy h2 {
    margin: 0;

    font-size: clamp(55px,6vw,96px);

    font-weight: 400;
    line-height: .95;

    letter-spacing: -.06em;
}

.services-philosophy h2 em {
    display: block;

    font-family: 'Playfair Display', serif;

    font-weight: 400;
}

.services-philosophy h3 {
    margin: 0 0 25px;

    font-family: 'Playfair Display', serif;

    font-size: clamp(28px,3vw,42px);

    font-weight: 400;
}

.services-philosophy p {
    margin: 0 0 22px;

    color: rgba(0,0,0,.65);

    font-size: 15px;
    line-height: 1.85;
}

.services-dark-link {
    display: inline-flex;
    align-items: center;

    gap: 20px;

    margin-top: 20px;
    padding-bottom: 7px;

    border-bottom:
        1px solid
        rgba(0,0,0,.35);

    color: #080808;

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

    letter-spacing: .14em;

    text-transform: uppercase;
}


/* CTA */

.services-cta {
    position: relative;

    min-height: 78vh;

    display: flex;
    align-items: flex-end;

    overflow: hidden;

    background: #050505;
}

.services-cta-media,
.services-cta-overlay {
    position: absolute;
    inset: 0;
}

.services-cta-media img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        brightness(.50)
        contrast(1.09)
        saturate(.90);
}

.services-cta-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(5,5,5,.90),
            rgba(5,5,5,.20)
        ),
        linear-gradient(
            to top,
            rgba(5,5,5,.81),
            rgba(5,5,5,.05)
        );
}

.services-cta-glow {
    position: absolute;

    z-index: 2;

    right: 5%;
    top: 15%;

    width: 450px;
    height: 450px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(222,35,151,.11),
            transparent 67%
        );

    filter: blur(30px);
}

.services-cta-content {
    position: relative;

    z-index: 3;

    padding-bottom: 85px;
}

.services-cta-content > span {
    color: #d2ac65;

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

    letter-spacing: .22em;
}

.services-cta h2 {
    max-width: 1000px;

    margin: 24px 0 0;

    font-size: clamp(58px,7vw,110px);

    font-weight: 400;
    line-height: .92;

    letter-spacing: -.065em;
}

.services-cta h2 em {
    display: block;

    font-family: 'Playfair Display', serif;

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

    font-weight: 400;
}

.services-cta p {
    max-width: 560px;

    margin: 30px 0 38px;

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

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


/* RESPONSIVE */

@media (max-width:1050px) {

    .services-hero-inner {
        grid-template-columns: 1fr;
    }

    .services-hero-side {
        display: none;
    }

    .services-intro-grid,
    .services-featured-grid,
    .services-philosophy-grid {
        grid-template-columns: 1fr;
    }

    .services-intro-copy,
    .services-featured-copy,
    .services-philosophy-grid > div:last-child {
        max-width: 680px;

        margin-left: auto;
    }

    .services-secondary-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width:760px) {

    .services-hero {
        min-height: 800px;
    }

    .services-hero-inner {
        padding-top: 100px;
    }

    .services-hero-media img {
        object-position: 60% center;
    }

    .services-hero-overlay {
        background:
            linear-gradient(
                to bottom,
                rgba(5,5,5,.28),
                rgba(5,5,5,.43) 55%,
                #050505 100%
            ),
            linear-gradient(
                90deg,
                rgba(5,5,5,.86),
                rgba(5,5,5,.30)
            );
    }

    .services-hero h1 {
        font-size: clamp(60px,17vw,90px);
    }

    .services-hero-copy > p {
        font-size: 15px;
    }

    .services-hero-bottom-inner > span {
        display: none;
    }

    .services-hero-bottom-inner {
        justify-content: flex-end;
    }

    .services-intro {
        padding: 105px 0 120px;
    }

    .services-intro h2 {
        font-size: clamp(50px,14vw,74px);
    }

    .services-featured {
        padding-bottom: 110px;
    }

    .services-featured-photo {
        min-height: 520px;
    }

    .services-grid-section {
        padding: 105px 0 120px;
    }

    .services-grid-heading h2 {
        font-size: clamp(50px,14vw,72px);
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    .services-card {
        min-height: 470px;
    }

    .services-visual-break {
        min-height: 650px;
    }

    .services-visual-break-content {
        padding-bottom: 60px;
    }

    .services-visual-break h2 {
        font-size: clamp(50px,14vw,78px);
    }

    .services-secondary {
        padding: 105px 0 120px;
    }

    .services-secondary-heading h2 {
        font-size: clamp(50px,14vw,72px);
    }

    .services-secondary-card {
        min-height: 360px;
    }

    .services-philosophy {
        padding: 105px 0;
    }

    .services-philosophy h2 {
        font-size: clamp(50px,14vw,72px);
    }

    .services-cta {
        min-height: 650px;
    }

    .services-cta-content {
        padding-bottom: 60px;
    }

    .services-cta h2 {
        font-size: clamp(50px,14vw,76px);
    }

}