/* GH STUDIO - services page styles */

.nav-links a:hover,
.nav-links a.current{

    color:#fff;

}
/* =====================================================
   PAGE HERO
===================================================== */

.page-hero{

    position:relative;

    min-height:52vh;

    display:flex;

    align-items:flex-end;

    overflow:hidden;

    padding-bottom:90px;

}
.page-hero-image{

    position:absolute;

    inset:0;

    background-image:
        linear-gradient(
            180deg,
            rgba(0,0,0,.35),
            rgba(5,5,5,.75) 60%,
            #050505 100%
        ),
        url(
        'https://images.unsplash.com/photo-1585747860715-2ba37e788b70?auto=format&fit=crop&w=2000&q=90'
        );

    background-size:cover;

    background-position:center;

    filter:grayscale(100%);

    transform:scale(1.02);

}
.page-hero h1{

    margin-top:20px;

    font-family:
        "Playfair Display",
        serif;

    font-weight:500;

    font-size:
        clamp(
            48px,
            8vw,
            96px
        );

    line-height:.9;

    letter-spacing:-4px;

}
.page-hero p{

    max-width:480px;

    margin-top:25px;

    color:#999;

    font-size:14px;

    line-height:1.8;

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

.services-section{

    padding:110px 0 150px;

}
.services-section-head{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    gap:20px;

    margin-bottom:60px;

    padding-bottom:35px;

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

}
.services-section-head h2{

    font-family:"Playfair Display",serif;

    font-weight:500;

    font-size:clamp(34px,4vw,50px);

    letter-spacing:-1.5px;

}
.services-section-head p{

    max-width:360px;

    color:#888;

    font-size:13px;

    line-height:1.8;

}
.services-grid{

    display:grid;

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

    gap:34px;

}
@property --gh-angle{
    syntax:'<angle>';
    inherits:false;
    initial-value:0deg;
}
.service-card{

    position:relative;

    z-index:0;

    border-radius:2px;

    padding:2px;

    background:conic-gradient(
        from var(--gh-angle),
        rgba(255,255,255,.06),
        rgba(255,255,255,.75),
        rgba(255,255,255,.06) 35%,
        rgba(255,255,255,.06) 65%,
        rgba(255,255,255,.55),
        rgba(255,255,255,.06)
    );

    animation:gh-rotate-border 5.5s linear infinite;

    cursor:pointer;

    transition:transform .35s ease;

}
.service-card:hover{

    transform:translateY(-6px);

}
@keyframes gh-rotate-border{
    to{ --gh-angle:360deg; }
}
.service-card-inner{

    position:relative;

    height:100%;

    background:var(--black2);

    padding:42px 34px 34px;

    display:flex;

    flex-direction:column;

}
.service-card-number{

    font-family:"Playfair Display",serif;

    font-size:13px;

    color:#555;

    letter-spacing:2px;

}
.service-card-name{

    margin-top:22px;

    font-family:"Playfair Display",serif;

    font-weight:600;

    font-size:26px;

    letter-spacing:-.5px;

    line-height:1.15;

}
.service-card-desc{

    margin-top:14px;

    color:#888;

    font-size:13px;

    line-height:1.8;

    flex-grow:1;

    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;

}
.service-card-foot{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:14px;

    margin-top:28px;

    padding-top:22px;

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

}
.service-card-price{

    font-size:16px;

    font-weight:800;

    letter-spacing:.2px;

}
.service-card-duration{

    display:block;

    margin-top:4px;

    color:#666;

    font-size:10px;

    letter-spacing:1.5px;

    text-transform:uppercase;

}
.service-card-more{

    font-size:10px;

    font-weight:700;

    letter-spacing:1.5px;

    text-transform:uppercase;

    color:#ccc;

    padding-bottom:3px;

    border-bottom:1px solid #555;

    transition:.3s;

    white-space:nowrap;

}
.service-card:hover .service-card-more{

    color:#fff;

    border-color:#fff;

}
.services-empty{

    padding:60px 0;

    color:#666;

    font-size:13px;

    text-align:center;

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

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

    display:none;

}
@media(max-width:960px){

    .services-grid{
        grid-template-columns:repeat(2,1fr);
        gap:24px;
    }

}
@media(max-width:620px){

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

    .services-section-head{
        flex-direction:column;
        align-items:flex-start;
    }

}
/* =====================================================
   SERVICE DETAIL MODAL
===================================================== */

.gh-service-modal{

    position:fixed;

    inset:0;

    z-index:1100;

    background:rgba(3,3,3,.92);

    backdrop-filter:blur(6px);

    display:none;

    place-items:center;

    padding:24px;

}
.gh-service-modal.open{

    display:grid;

}
.gh-service-box{

    position:relative;

    width:min(560px,100%);

    max-height:88vh;

    overflow:auto;

    background:var(--black2);

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

    padding:50px 42px 42px;

}
.gh-service-close{

    position:absolute;

    top:20px;

    right:20px;

    width:34px;

    height:34px;

    display:grid;

    place-items:center;

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

    background:transparent;

    color:#fff;

    font-size:13px;

    cursor:pointer;

    transition:.3s;

}
.gh-service-close:hover{

    border-color:#fff;

}
.gh-service-eyebrow{

    color:#666;

    font-size:10px;

    letter-spacing:3px;

    text-transform:uppercase;

}
.gh-service-title{

    margin-top:16px;

    font-family:"Playfair Display",serif;

    font-weight:600;

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

    line-height:1.1;

    letter-spacing:-1px;

}
.gh-service-meta{

    display:flex;

    gap:26px;

    margin-top:22px;

    padding:18px 0;

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

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

}
.gh-service-meta div span{

    display:block;

    color:#666;

    font-size:9px;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:6px;

}
.gh-service-meta div b{

    font-size:18px;

    font-weight:700;

}
.gh-service-desc{

    margin-top:26px;

    color:#aaa;

    font-size:14px;

    line-height:1.9;

    white-space:pre-line;

}
.gh-service-cta{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:32px;

    padding:16px 26px;

    background:#fff;

    color:#000;

    font-size:11px;

    font-weight:800;

    letter-spacing:1.5px;

    text-transform:uppercase;

    transition:.3s;

}
.gh-service-cta:hover{

    background:#ddd;

}
@media(max-width:850px){

    .footer-grid{
        grid-template-columns:1fr;
        gap:40px;
    }

    .footer-bottom{
        flex-direction:column;
        gap:8px;
    }

    .page-hero{
        min-height:44vh;
        padding-bottom:60px;
    }

    .page-hero-content{
        padding-top:70px;
    }

}