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

.services-hero{
  padding:320px 8% 260px;
  background:#151518;
  position:relative;
}

.services-hero-inner{
  max-width:820px;
  margin:0;
}

.hero-eyebrow{
  font-family:'Inter', sans-serif;
  font-size:11px;
  letter-spacing:3px;
  text-transform:uppercase;
  opacity:.4;
  margin-bottom:22px;
}

.services-hero h1{
  font-family:'Playfair Display', serif;
  font-style:italic;
  font-weight:500;
  font-size:96px;
  line-height:1.1;
  margin-bottom:38px;
}

.services-hero p{
  font-family:'Inter', sans-serif;
  font-size:18px;
  opacity:.6;
  line-height:1.8;
}


/* ======================================================
   SERVICES HERO — IPHONE
====================================================== */

@media(max-width:600px){

  .services-hero{

    min-height:100svh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:110px 7% 90px;

    text-align:center;

  }

  .services-hero-inner{

    max-width:100%;

    margin:0 auto;

  }

  .hero-eyebrow{

    font-size:12px;

    letter-spacing:3px;

    margin-bottom:24px;

  }

  .services-hero h1{

    font-size:50px;

    line-height:1.02;

    margin-bottom:30px;

  }

  .services-hero p{

    font-size:17px;

    line-height:1.75;

    max-width:360px;

    margin:0 auto;

  }

}

/* ======================================================
   SERVICES HERO — IPAD PORTRAIT
====================================================== */

@media (min-width:601px) and (max-width:1024px){

  .services-hero{

    min-height:84svh;

    display:flex;

    align-items:center;

    padding:140px 7% 120px;

  }

  .services-hero-inner{

    max-width:760px;

    margin:0;

  }

  .services-hero h1{

    font-size:82px;

    line-height:1.05;

    margin-bottom:28px;

  }

  .services-hero p{

    font-size:20px;

    line-height:1.75;

    max-width:650px;

  }

}

/* ======================================================
   SERVICES HERO — IPAD LANDSCAPE
====================================================== */

@media (min-width:1025px) and (max-width:1400px){

  .services-hero{

    min-height:86svh;

    display:flex;

    align-items:center;

    padding:350px 7%;

  }

  .services-hero-inner{

    max-width:800px;

  }

  .services-hero h1{

    font-size:90px;

    line-height:1.05;

    margin-bottom:30px;

  }

  .services-hero p{

    font-size:20px;

    line-height:1.75;

    max-width:680px;

  }

}

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

.services-wrapper{
  padding:160px 8% 200px;
  background:#151518;

  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:60px;
}


/* ======================================================
   SERVICE CARDS
====================================================== */

.service-highlight{

  width:100%;

  padding:80px;

  border-radius:28px;

  background:linear-gradient(
    160deg,
    rgba(255,255,255,0.04),
    rgba(255,255,255,0.01)
  );

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

  backdrop-filter:blur(12px);

  display:flex;

  flex-direction:column;

  justify-content:space-between;

  transition:all .45s cubic-bezier(.22,.61,.36,1);

  position:relative;

}

.service-highlight:hover{

  transform:translateY(-12px);

  border-color:rgba(255,255,255,.2);

  box-shadow:0 35px 70px rgba(0,0,0,.5);

}


.service-highlight::before{

  content:"";

  position:absolute;

  inset:0;

  border-radius:28px;

  padding:1px;

  background:linear-gradient(
    120deg,
    rgba(255,255,255,.25),
    rgba(255,255,255,0),
    rgba(255,255,255,.2)
  );

  pointer-events:none;

  opacity:.25;

}


/* ======================================================
   SERVICE CARD CONTENT
====================================================== */

.service-left{

  margin-bottom:35px;

}

.service-number{

  font-family:'Inter', sans-serif;

  font-size:11px;

  letter-spacing:4px;

  opacity:.25;

  margin-bottom:28px;

}

.service-left h3{

  font-family:'Playfair Display', serif;

  font-style:italic;

  font-weight:500;

  font-size:36px;

  line-height:1.2;

  margin-bottom:26px;

  letter-spacing:-0.5px;

}

.service-left p{

  font-family:'Inter', sans-serif;

  font-size:16px;

  opacity:.65;

  line-height:1.9;

}


.service-right h5{

  font-family:'Inter', sans-serif;

  font-size:11px;

  letter-spacing:3px;

  opacity:.45;

  margin-bottom:26px;

}

.service-right ul{

  list-style:none;

  margin-bottom:35px;

}

.service-right li{

  font-family:'Inter', sans-serif;

  font-size:15px;

  margin-bottom:16px;

  padding-left:26px;

  position:relative;

  opacity:.85;

}

.service-right li::before{

  content:"";

  position:absolute;

  left:0;

  top:8px;

  width:6px;

  height:6px;

  border-radius:50%;

  background:#f5c044;

}


/* ======================================================
   BUTTON
====================================================== */

.service-btn{

  display:inline-flex;

  align-items:center;

  gap:6px;

  padding:14px 28px;

  border-radius:50px;

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

  font-family:'Inter', sans-serif;

  font-size:13px;

  letter-spacing:1px;

  text-decoration:none;

  color:#fff;

  transition:.3s ease;

}

.service-btn:hover{

  background:#fff;

  color:#000;

  transform:translateY(-4px);

}


/* ======================================================
   IPAD — SERVICE CARDS
====================================================== */

@media(min-width:601px) and (max-width:1024px){

  .services-wrapper{

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

    gap:35px;

    padding:110px 8% 140px;

  }

  .service-highlight{

    padding:45px 40px;

  }

  .service-left{

    margin-bottom:24px;

  }

  .service-number{

    margin-bottom:20px;

  }

  .service-left h3{

    font-size:32px;

    line-height:1.15;

    margin-bottom:20px;

  }

  .service-left p{

    font-size:15px;

    line-height:1.7;

  }

  .service-right h5{

    margin-bottom:20px;

  }

  .service-right ul{

    margin-bottom:25px;

  }

  .service-right li{

    font-size:14px;

    margin-bottom:11px;

  }

}


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

@media(max-width:600px){

  .services-wrapper{

    grid-template-columns:1fr;

    gap:30px;

    padding:90px 7% 120px;

  }

  .service-highlight{

    padding:50px 36px;

    border-radius:26px;

  }

  .service-left{

    margin-bottom:30px;

  }

  .service-number{

    font-size:10px;

    letter-spacing:3px;

    margin-bottom:24px;

  }

  .service-left h3{

    font-size:32px;

    line-height:1.15;

    margin-bottom:22px;

  }

  .service-left p{

    font-size:15px;

    line-height:1.75;

  }

  .service-right h5{

    font-size:10px;

    letter-spacing:2.5px;

    margin-bottom:22px;

  }

  .service-right ul{

    margin-bottom:30px;

  }

  .service-right li{

    font-size:14px;

    margin-bottom:14px;

    padding-left:24px;

  }

  .service-btn{

    padding:13px 26px;

    font-size:12px;

  }

}

/* ======================================================
   FINAL CTA
====================================================== */

.final-cta{
    position:relative;
    overflow:hidden;
    background: #151518;
    padding:240px 8%;

    text-align:center;
}

.cta-glow{
    position:absolute;

    left:50%;
    top:50%;

    width:700px;
    height:700px;

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

    background:radial-gradient(
        circle,
        rgba(255,255,255,.08),
        transparent 70%
    );

    pointer-events:none;
}

.final-cta-content{
    position:relative;
    z-index:2;

    max-width:900px;
    margin:auto;
}

.cta-label{
    display:inline-block;

    margin-bottom:24px;

    font-size:12px;
    letter-spacing:3px;

    text-transform:uppercase;

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

.final-cta h2{

    font-family:'Playfair Display', serif;

    font-size:92px;

    line-height:.95;

    letter-spacing:-2px;

    margin-bottom:30px;
}

.cta-text{

    max-width:650px;

    margin:0 auto 55px;

    font-size:18px;

    line-height:1.9;

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

.cta-buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;
}

.final-cta-btn{

    display:inline-flex;

    justify-content:center;
    align-items:center;

    height:62px;

    padding:0 34px;

    border-radius:999px;

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

    background:transparent;

    color:#fff;

    text-decoration:none;

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

.final-cta-btn:hover{

    background:#fff;

    color:#000;

    border-color:#fff;

    transform:translateY(-3px);
}

.final-cta-btn.secondary{

    background:#fff;

    color:#000;

    border:1px solid #fff;
}

.final-cta-btn.secondary:hover{

    background:transparent;

    color:#fff;

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

    transform:translateY(-3px);
}

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

@media (max-width:768px){

    .final-cta{

        padding:160px 8%;

    }

    .final-cta h2{

        font-size:58px;

    }

    .cta-text{

        font-size:16px;

        line-height:1.8;

    }

    .cta-buttons{

        flex-direction:column;

        width:100%;

    }

    .final-cta-btn{

        width:100%;

        max-width:320px;

    }

}