/* =========================================================
   WANDERTINE SERVICES — PREMIUM PAGE
   Uses the same shared header/footer system as Index + About.
   ========================================================= */

.services-page main{
    padding-top:126px;
}

.services-page{
    --svc-navy:#081c3a;
    --svc-blue:#1F3B93;
    --svc-gold:#f39a1e;
    --svc-light:#F8FAFC;
    --svc-muted:#68748a;
    --svc-border:rgba(8,28,58,.10);
}

/* HERO */
.services-hero{
    position:relative;
    min-height:680px;
    overflow:hidden;
    background:var(--svc-navy);
    display:flex;
    align-items:center;
}

.services-hero-video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.services-hero-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg,rgba(4,18,39,.92) 0%,rgba(4,18,39,.78) 42%,rgba(4,18,39,.30) 100%),
        linear-gradient(0deg,rgba(4,18,39,.5),transparent 50%);
}

.services-hero-inner{
    position:relative;
    z-index:2;
    width:min(1320px,calc(100% - 48px));
    min-height:680px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.services-hero-copy{
    max-width:720px;
    padding:70px 0;
}

.service-eyebrow{
    color:var(--svc-gold);
    font-size:.78rem;
    font-weight:800;
    letter-spacing:.22em;
}

.services-hero h1{
    color:#fff;
    font-family:"Playfair Display",serif;
    font-size:clamp(3.5rem,6vw,6.2rem);
    line-height:.95;
    letter-spacing:-.045em;
    margin:18px 0 25px;
}

.services-hero h1 span{
    color:var(--svc-gold);
}

.services-hero-copy p{
    color:rgba(255,255,255,.84);
    max-width:610px;
    font-size:1.08rem;
    line-height:1.75;
    margin-bottom:30px;
}

.service-hero-actions{
    display:flex;
    gap:13px;
    flex-wrap:wrap;
}

.service-btn,
.service-outline-btn,
.dark-service-btn{
    min-height:54px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 27px;
    border-radius:999px;
    text-decoration:none;
    font-weight:800;
    transition:.3s ease;
}

.service-btn{
    background:var(--svc-gold);
    color:#fff;
    box-shadow:0 16px 30px rgba(243,154,30,.25);
}

.service-outline-btn{
    color:#fff;
    border:1px solid rgba(255,255,255,.48);
    background:rgba(255,255,255,.05);
}

.service-btn:hover,
.service-outline-btn:hover,
.dark-service-btn:hover{
    transform:translateY(-3px);
}

.hero-service-note{
    align-self:flex-end;
    margin-bottom:70px;
    color:#fff;
    padding:18px 22px;
    border:1px solid rgba(255,255,255,.22);
    background:rgba(8,28,58,.46);
    backdrop-filter:blur(12px);
    border-radius:18px;
}

.hero-service-note strong{
    display:block;
    font-size:.92rem;
}

.hero-service-note span{
    display:block;
    color:rgba(255,255,255,.65);
    font-size:.72rem;
    margin-top:5px;
}

/* INTRO */
.services-intro{
    padding:100px 0;
    background:#fff;
}

.services-intro-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:start;
}

.services-intro h2,
.section-heading h2,
.corporate-copy h2{
    color:var(--svc-navy);
    font-family:"Playfair Display",serif;
    font-size:clamp(2.6rem,4.5vw,4.5rem);
    line-height:1.02;
    letter-spacing:-.035em;
    margin:13px 0 0;
}

.services-intro p{
    color:var(--svc-muted);
    line-height:1.8;
    margin:0 0 15px;
}

/* CARDS */
.service-list-section{
    padding:105px 0;
    background:var(--svc-light);
}

.section-heading{
    margin-bottom:48px;
}

.section-heading p{
    color:var(--svc-muted);
    line-height:1.7;
    max-width:650px;
    margin-top:15px;
}

.service-card-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:22px;
}

.service-card{
    background:#fff;
    border-radius:25px;
    overflow:hidden;
    border:1px solid var(--svc-border);
    box-shadow:0 14px 40px rgba(8,28,58,.06);
    transition:.35s ease;
}

.service-card:hover{
    transform:translateY(-7px);
    box-shadow:0 24px 55px rgba(8,28,58,.12);
}

.service-card-large{
    grid-column:span 1;
}

.service-card-image{
    height:275px;
    position:relative;
    overflow:hidden;
}

.service-card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .7s ease;
}

.service-card:hover .service-card-image img{
    transform:scale(1.06);
}

.service-card-image span{
    position:absolute;
    top:18px;
    right:18px;
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#fff;
    background:rgba(8,28,58,.76);
    backdrop-filter:blur(8px);
    font-weight:800;
}

.service-card-body{
    padding:27px 29px 30px;
}

.service-icon{
    color:var(--svc-gold);
    font-size:1.6rem;
    margin-bottom:10px;
}

.service-card h3{
    color:var(--svc-navy);
    font-family:"Playfair Display",serif;
    font-size:1.7rem;
    margin:0 0 10px;
}

.service-card p{
    color:var(--svc-muted);
    line-height:1.65;
    margin:0 0 19px;
}

.service-card a{
    color:var(--svc-navy);
    text-decoration:none;
    font-size:.88rem;
    font-weight:800;
}

.service-card a b{
    color:var(--svc-gold);
    margin-left:5px;
}

/* IMAGE BANNER */
.experience-banner{
    position:relative;
    min-height:530px;
    display:flex;
    align-items:center;
    overflow:hidden;
    color:#fff;
}

.experience-banner-image,
.experience-banner-overlay{
    position:absolute;
    inset:0;
}

.experience-banner-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.experience-banner-overlay{
    background:linear-gradient(90deg,rgba(8,28,58,.94),rgba(8,28,58,.62),rgba(8,28,58,.25));
}

.experience-banner-content{
    position:relative;
    z-index:2;
    max-width:760px;
}

.experience-banner h2{
    font-family:"Playfair Display",serif;
    font-size:clamp(3rem,5vw,5.4rem);
    line-height:.98;
    margin:15px 0;
}

.experience-banner p{
    max-width:630px;
    color:rgba(255,255,255,.76);
    line-height:1.75;
    margin-bottom:28px;
}

/* CORPORATE */
.corporate-service-section{
    padding:110px 0;
    background:#fff;
}

.corporate-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:90px;
    align-items:center;
}

.corporate-image{
    position:relative;
}

.corporate-image img{
    width:100%;
    height:560px;
    object-fit:cover;
    border-radius:28px;
    display:block;
    box-shadow:0 25px 60px rgba(8,28,58,.14);
}

.corporate-badge{
    position:absolute;
    left:25px;
    bottom:25px;
    padding:17px 20px;
    background:#fff;
    border-radius:17px;
    box-shadow:0 18px 40px rgba(8,28,58,.16);
}

.corporate-badge strong{
    display:block;
    color:var(--svc-navy);
}

.corporate-badge span{
    display:block;
    color:var(--svc-muted);
    font-size:.78rem;
    margin-top:4px;
}

.corporate-copy > p{
    color:var(--svc-muted);
    line-height:1.8;
}

.corporate-points{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin:28px 0;
}

.corporate-points div{
    padding:17px;
    background:var(--svc-light);
    border-radius:15px;
    border:1px solid var(--svc-border);
}

.corporate-points span{
    color:var(--svc-gold);
    font-weight:800;
    margin-right:8px;
}

.corporate-points strong{
    color:var(--svc-navy);
    font-size:.86rem;
}

.dark-service-btn{
    background:var(--svc-navy);
    color:#fff;
}

/* DIVISIONS */
.divisions-services{
    padding:105px 0;
    background:var(--svc-navy);
    color:#fff;
}

.divisions-services .section-heading{
    text-align:center;
}

.divisions-services .section-heading h2{
    color:#fff;
}

.division-service-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border-top:1px solid rgba(255,255,255,.15);
}

.division-service-grid article{
    padding:34px 25px;
    min-height:245px;
    border-right:1px solid rgba(255,255,255,.15);
}

.division-service-grid article:last-child{
    border-right:0;
}

.division-service-grid span{
    color:var(--svc-gold);
    font-weight:800;
}

.division-service-grid h3{
    font-family:"Playfair Display",serif;
    font-size:1.4rem;
    margin:25px 0 10px;
}

.division-service-grid p{
    color:rgba(255,255,255,.65);
    line-height:1.6;
    font-size:.9rem;
}

/* PROCESS */
.service-process{
    padding:105px 0;
    background:#F8FAFC;
}

.section-heading.centered{
    text-align:center;
    max-width:780px;
    margin-left:auto;
    margin-right:auto;
}

.section-heading.centered p{
    margin-left:auto;
    margin-right:auto;
}

.process-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
}

.process-grid article{
    position:relative;
    padding:28px;
    min-height:260px;
    background:#fff;
    border:1px solid var(--svc-border);
    border-radius:21px;
}

.process-grid article > span{
    color:var(--svc-gold);
    font-size:.78rem;
    font-weight:800;
}

.process-grid article > div{
    font-size:1.8rem;
    color:var(--svc-gold);
    margin:22px 0 12px;
}

.process-grid h3{
    color:var(--svc-navy);
    margin:0 0 8px;
}

.process-grid p{
    color:var(--svc-muted);
    line-height:1.55;
    margin:0;
}

/* CTA */
.services-cta{
    padding:105px 0;
    text-align:center;
    background:linear-gradient(135deg,#f39a1e,#ffb33d);
    color:#fff;
}

.services-cta > .container{
    max-width:850px;
}

.services-cta > span{
    text-transform:uppercase;
    font-weight:800;
    letter-spacing:.14em;
    font-size:.75rem;
}

.services-cta h2{
    font-family:"Playfair Display",serif;
    font-size:clamp(3rem,5vw,5rem);
    line-height:1;
    margin:15px 0;
}

.services-cta p{
    max-width:650px;
    margin:0 auto 28px;
    line-height:1.7;
}

.cta-dark-btn,
.cta-light-btn{
    display:inline-flex;
    min-height:53px;
    align-items:center;
    justify-content:center;
    padding:0 26px;
    border-radius:999px;
    text-decoration:none;
    font-weight:800;
    margin:4px;
}

.cta-dark-btn{
    background:var(--svc-navy);
    color:#fff;
}

.cta-light-btn{
    color:var(--svc-navy);
    border:1px solid rgba(8,28,58,.28);
}

/* MOBILE */
@media(max-width:1100px){
    .services-hero-inner{
        min-height:650px;
    }

    .hero-service-note{
        display:none;
    }

    .division-service-grid{
        grid-template-columns:1fr 1fr;
    }

    .division-service-grid article:nth-child(2){
        border-right:0;
    }

    .division-service-grid article{
        border-bottom:1px solid rgba(255,255,255,.15);
    }
}

@media(max-width:991px){
    .services-page main{
        padding-top:82px;
    }

    .services-hero,
    .services-hero-inner{
        min-height:620px;
    }

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

    .services-intro-grid,
    .corporate-grid{
        grid-template-columns:1fr;
        gap:45px;
    }

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

@media(max-width:700px){
    .services-hero h1{
        font-size:3.3rem;
    }

    .services-hero-copy p{
        font-size:.96rem;
    }

    .service-list-section,
    .corporate-service-section,
    .services-intro,
    .service-process,
    .divisions-services{
        padding:80px 0;
    }

    .service-card-grid{
        grid-template-columns:1fr;
    }

    .service-card-large{
        grid-column:auto;
    }

    .service-card-image{
        height:235px;
    }

    .corporate-image img{
        height:390px;
    }

    .corporate-points,
    .process-grid,
    .division-service-grid{
        grid-template-columns:1fr;
    }

    .division-service-grid article{
        border-right:0;
    }

    .experience-banner{
        min-height:500px;
    }

    .experience-banner h2{
        font-size:3.1rem;
    }

    .services-cta{
        padding:80px 0;
    }
}