/* =========================================================
   ABPE WORKS
   COMPANY PROFILE V3

   ALL SERVICES PAGE
   ========================================================= */


/* =========================================================
   01. PAGE
   ========================================================= */

.page-services {
  background:
    var(--bg-main);
}


/* =========================================================
   02. HERO
   ========================================================= */

.services-hero {
  position:
    relative;

  min-height:
    calc(100svh - var(--navbar-height));

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  padding:
    clamp(90px, 9vw, 150px)
    var(--page-inline)
    clamp(55px, 7vw, 100px);

  overflow:
    hidden;
}

.services-hero__top {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    50px;
}

.services-hero__meta {
  max-width:
    400px;

  color:
    var(--text-muted);

  font-size:
    0.82rem;

  line-height:
    1.7;
}

.services-hero__main {
  position:
    relative;

  margin-top:
    clamp(90px, 10vw, 170px);
}

.services-hero__title {
  position:
    relative;

  z-index:
    2;

  max-width:
    1500px;

  color:
    var(--text-heading);

  font-size:
    clamp(4.5rem, 10vw, 11rem);

  font-weight:
    400;

  line-height:
    0.82;

  letter-spacing:
    -0.075em;

  text-transform:
    uppercase;
}

.services-hero__title span {
  display:
    block;
}

.services-hero__title .indent {
  padding-left:
    clamp(70px, 15vw, 260px);
}


/* =========================================================
   03. HERO DECORATIVE WORD
   ========================================================= */

.services-hero__ghost {
  position:
    absolute;

  z-index:
    0;

  right:
    -2vw;

  bottom:
    -8%;

  color:
    transparent;

  font-size:
    clamp(9rem, 22vw, 28rem);

  font-weight:
    500;

  line-height:
    0.75;

  letter-spacing:
    -0.08em;

  -webkit-text-stroke:
    1px rgba(7, 20, 38, 0.08);

  text-transform:
    uppercase;

  user-select:
    none;

  pointer-events:
    none;
}


/* =========================================================
   04. HERO BOTTOM
   ========================================================= */

.services-hero__bottom {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    40px;

  margin-top:
    clamp(80px, 10vw, 160px);

  padding-top:
    24px;

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

.services-hero__bottom-copy {
  max-width:
    580px;

  color:
    var(--text-muted);

  font-size:
    0.88rem;

  line-height:
    1.7;
}

.services-hero__count {
  display:
    flex;

  align-items:
    baseline;

  gap:
    10px;

  color:
    var(--text-heading);
}

.services-hero__count strong {
  font-size:
    clamp(2rem, 4vw, 4.5rem);

  font-weight:
    400;

  line-height:
    1;

  letter-spacing:
    -0.05em;
}

.services-hero__count span {
  color:
    var(--text-muted);

  font-size:
    0.7rem;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


/* =========================================================
   05. SERVICES INTRO
   ========================================================= */

.services-intro {
  padding:
    var(--section-space)
    var(--page-inline);

  background:
    var(--bg-white);
}

.services-intro__grid {
  display:
    grid;

  grid-template-columns:
    minmax(190px, 0.3fr)
    minmax(0, 1fr);

  gap:
    clamp(60px, 10vw, 180px);
}

.services-intro__content {
  max-width:
    1160px;
}

.services-intro__title {
  color:
    var(--text-heading);

  font-size:
    clamp(3.1rem, 6vw, 7rem);

  font-weight:
    400;

  line-height:
    0.9;

  letter-spacing:
    -0.06em;
}

.services-intro__bottom {
  display:
    grid;

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

  gap:
    clamp(30px, 5vw, 80px);

  margin-top:
    clamp(60px, 8vw, 110px);
}

.services-intro__bottom p {
  color:
    var(--text-muted);

  font-size:
    0.92rem;

  line-height:
    1.75;
}


/* =========================================================
   06. MAIN SERVICE DIRECTORY
   ========================================================= */

.services-directory {
  padding:
    var(--section-space)
    var(--page-inline);

  background:
    var(--bg-main);
}

.services-directory__header {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    50px;

  margin-bottom:
    clamp(65px, 8vw, 120px);
}

.services-directory__title {
  max-width:
    900px;

  margin-top:
    26px;

  color:
    var(--text-heading);

  font-size:
    clamp(3rem, 5.6vw, 6.5rem);

  font-weight:
    400;

  line-height:
    0.9;

  letter-spacing:
    -0.06em;
}

.services-directory__copy {
  max-width:
    380px;

  color:
    var(--text-muted);

  font-size:
    0.84rem;

  line-height:
    1.7;
}


/* =========================================================
   07. SERVICE DIRECTORY LIST
   ========================================================= */

.services-list {
  border-top:
    1px solid var(--line);
}

.services-item {
  position:
    relative;

  display:
    grid;

  grid-template-columns:
    75px
    minmax(0, 0.72fr)
    minmax(250px, 0.55fr)
    54px;

  align-items:
    center;

  gap:
    clamp(20px, 3vw, 50px);

  min-height:
    clamp(145px, 12vw, 190px);

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

  overflow:
    hidden;

  isolation:
    isolate;
}

.services-item::before {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  z-index:
    -1;

  background:
    var(--bg-white);

  transform:
    scaleY(0);

  transform-origin:
    bottom;

  transition:
    transform var(--transition);
}

.services-item:hover::before {
  transform:
    scaleY(1);

  transform-origin:
    top;
}

.services-item__number {
  color:
    var(--text-soft);

  font-size:
    0.66rem;

  letter-spacing:
    0.08em;
}

.services-item__main {
  min-width:
    0;
}

.services-item__title {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    10px;

  color:
    var(--text-heading);

  font-size:
    clamp(2.3rem, 4.6vw, 5.7rem);

  font-weight:
    400;

  line-height:
    0.88;

  letter-spacing:
    -0.06em;

  transition:
    color var(--transition),
    transform var(--transition);
}

.services-item:hover
.services-item__title {
  color:
    var(--abpe-blue);

  transform:
    translateX(14px);
}

.services-item__description {
  max-width:
    470px;

  color:
    var(--text-muted);

  font-size:
    0.82rem;

  line-height:
    1.65;
}

.services-item__arrow {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    50px;

  height:
    50px;

  margin-left:
    auto;

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

  border-radius:
    50%;

  color:
    var(--text-heading);

  transform:
    rotate(-45deg);

  transition:
    color var(--transition),
    background var(--transition),
    border-color var(--transition),
    transform var(--transition);
}

.services-item:hover
.services-item__arrow {
  color:
    #ffffff;

  background:
    var(--abpe-blue);

  border-color:
    var(--abpe-blue);

  transform:
    rotate(0deg);
}


/* =========================================================
   08. SOON BADGE
   ========================================================= */

.services-item__soon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    6px 9px;

  border-radius:
    var(--radius-pill);

  color:
    var(--abpe-blue);

  background:
    rgba(7, 92, 255, 0.08);

  font-size:
    0.55rem;

  font-weight:
    700;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


/* =========================================================
   09. SERVICES HOVER PREVIEW
   ========================================================= */

.services-preview {
  position:
    fixed;

  z-index:
    45;

  top:
    0;

  left:
    0;

  width:
    clamp(240px, 22vw, 390px);

  aspect-ratio:
    4 / 3;

  background:
    var(--bg-muted);

  box-shadow:
    0 30px 90px
    rgba(7, 20, 38, 0.14);

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  overflow:
    hidden;

  transform:
    translate3d(-50%, -50%, 0)
    scale(0.94);

  transition:
    opacity 200ms ease,
    visibility 200ms ease,
    transform 320ms var(--ease-out);
}

.services-preview.is-visible {
  opacity:
    1;

  visibility:
    visible;

  transform:
    translate3d(-50%, -50%, 0)
    scale(1);
}

.services-preview img {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
}


/* =========================================================
   10. SERVICE CATEGORIES
   ========================================================= */

.services-categories {
  padding:
    var(--section-space)
    var(--page-inline);

  background:
    var(--bg-white);
}

.services-categories__header {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(250px, 0.4fr);

  gap:
    clamp(60px, 9vw, 150px);

  align-items:
    end;

  margin-bottom:
    clamp(80px, 9vw, 140px);
}

.services-categories__title {
  max-width:
    920px;

  color:
    var(--text-heading);

  font-size:
    clamp(3rem, 5.7vw, 6.7rem);

  font-weight:
    400;

  line-height:
    0.9;

  letter-spacing:
    -0.06em;
}

.services-categories__copy {
  max-width:
    390px;

  color:
    var(--text-muted);

  font-size:
    0.86rem;

  line-height:
    1.7;
}


/* =========================================================
   11. CATEGORY GRID
   ========================================================= */

.service-category-grid {
  display:
    grid;

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

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

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

.service-category {
  position:
    relative;

  min-height:
    420px;

  padding:
    clamp(28px, 3vw, 46px);

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

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

  overflow:
    hidden;

  transition:
    background var(--transition);
}

.service-category:hover {
  background:
    var(--bg-main);
}

.service-category__index {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    15px;

  color:
    var(--text-soft);

  font-size:
    0.64rem;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}

.service-category__body {
  position:
    absolute;

  left:
    clamp(28px, 3vw, 46px);

  right:
    clamp(28px, 3vw, 46px);

  bottom:
    clamp(30px, 3vw, 46px);
}

.service-category__title {
  max-width:
    400px;

  margin-bottom:
    26px;

  color:
    var(--text-heading);

  font-size:
    clamp(2rem, 3.4vw, 4rem);

  font-weight:
    400;

  line-height:
    0.94;

  letter-spacing:
    -0.05em;
}

.service-category__description {
  max-width:
    360px;

  color:
    var(--text-muted);

  font-size:
    0.82rem;

  line-height:
    1.65;
}


/* =========================================================
   12. PROCESS
   ========================================================= */

.services-process {
  padding:
    var(--section-space)
    var(--page-inline);

  background:
    var(--bg-soft);
}

.services-process__header {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    50px;

  margin-bottom:
    clamp(80px, 10vw, 150px);
}

.services-process__title {
  max-width:
    930px;

  margin-top:
    28px;

  color:
    var(--text-heading);

  font-size:
    clamp(3rem, 5.8vw, 6.8rem);

  font-weight:
    400;

  line-height:
    0.9;

  letter-spacing:
    -0.06em;
}

.services-process__copy {
  max-width:
    390px;

  color:
    var(--text-muted);

  font-size:
    0.86rem;

  line-height:
    1.7;
}


/* =========================================================
   13. PROCESS ROW
   ========================================================= */

.services-process-list {
  border-top:
    1px solid var(--line);
}

.services-process-item {
  display:
    grid;

  grid-template-columns:
    70px
    minmax(180px, 0.55fr)
    minmax(0, 1fr);

  gap:
    clamp(25px, 6vw, 100px);

  align-items:
    start;

  padding:
    clamp(38px, 5vw, 68px)
    0;

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

.services-process-item__number {
  color:
    var(--text-soft);

  font-size:
    0.65rem;
}

.services-process-item__title {
  color:
    var(--text-heading);

  font-size:
    clamp(1.8rem, 3vw, 3.8rem);

  font-weight:
    400;

  line-height:
    0.95;

  letter-spacing:
    -0.05em;
}

.services-process-item__description {
  max-width:
    570px;

  color:
    var(--text-muted);

  font-size:
    0.88rem;

  line-height:
    1.7;
}


/* =========================================================
   14. FEATURED SERVICE VISUAL
   ========================================================= */

.services-showcase {
  padding:
    var(--section-space)
    var(--page-inline);

  background:
    var(--bg-white);
}

.services-showcase__media {
  position:
    relative;

  width:
    100%;

  min-height:
    700px;

  height:
    min(82vh, 930px);

  overflow:
    hidden;

  background:
    var(--bg-muted);
}

.services-showcase__media img,
.services-showcase__media video {
  width:
    100%;

  height:
    112%;

  object-fit:
    cover;

  transform:
    translateY(-6%);

  will-change:
    transform;
}

.services-showcase__overlay {
  position:
    absolute;

  inset:
    0;

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    60px;

  padding:
    clamp(30px, 5vw, 80px);

  background:
    linear-gradient(
      180deg,
      transparent 30%,
      rgba(6, 23, 47, 0.76) 100%
    );
}

.services-showcase__title {
  max-width:
    980px;

  color:
    #ffffff;

  font-size:
    clamp(3rem, 5.8vw, 7rem);

  font-weight:
    400;

  line-height:
    0.9;

  letter-spacing:
    -0.06em;
}

.services-showcase__meta {
  max-width:
    310px;

  color:
    rgba(255, 255, 255, 0.7);

  font-size:
    0.76rem;

  line-height:
    1.7;
}


/* =========================================================
   15. SERVICE CTA
   ========================================================= */

.services-cta {
  position:
    relative;

  padding:
    clamp(100px, 12vw, 190px)
    var(--page-inline);

  background:
    var(--abpe-navy);

  overflow:
    hidden;
}

.services-cta::before {
  content:
    "";

  position:
    absolute;

  top:
    -45%;

  right:
    -15%;

  width:
    65vw;

  height:
    65vw;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(0, 200, 255, 0.20) 0%,
      rgba(7, 92, 255, 0.10) 38%,
      transparent 70%
    );

  pointer-events:
    none;
}

.services-cta__top {
  position:
    relative;

  z-index:
    2;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    50px;

  margin-bottom:
    clamp(90px, 12vw, 190px);
}

.services-cta__label {
  color:
    rgba(255, 255, 255, 0.5);
}

.services-cta__copy {
  max-width:
    380px;

  color:
    rgba(255, 255, 255, 0.64);

  font-size:
    0.82rem;

  line-height:
    1.7;
}

.services-cta__main {
  position:
    relative;

  z-index:
    2;

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    clamp(40px, 7vw, 100px);
}

.services-cta__title {
  max-width:
    1270px;

  color:
    #ffffff;

  font-size:
    clamp(4rem, 9vw, 10.5rem);

  font-weight:
    400;

  line-height:
    0.82;

  letter-spacing:
    -0.075em;

  text-transform:
    uppercase;
}

.services-cta__action {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    clamp(90px, 10vw, 150px);

  height:
    clamp(90px, 10vw, 150px);

  flex:
    0 0 auto;

  border-radius:
    50%;

  color:
    var(--abpe-navy);

  background:
    #ffffff;

  transition:
    color var(--transition),
    background var(--transition),
    transform var(--transition);
}

.services-cta__action:hover {
  color:
    #ffffff;

  background:
    var(--abpe-blue);

  transform:
    rotate(45deg)
    scale(1.04);
}

.services-cta__action svg {
  width:
    34%;

  height:
    34%;
}


/* =========================================================
   16. INTERACTION STATES
   ========================================================= */

.service-category__title,
.service-category__index {
  transition:
    color var(--transition),
    transform var(--transition);
}

.service-category:hover
.service-category__title {
  color:
    var(--abpe-blue);

  transform:
    translateX(8px);
}

.service-category:hover
.service-category__index {
  color:
    var(--abpe-blue);
}


/* =========================================================
   17. SOON SERVICE STATE
   ========================================================= */

.services-item.is-coming-soon {
  cursor:
    default;
}

.services-item.is-coming-soon
.services-item__description {
  opacity:
    0.7;
}

.services-item.is-coming-soon::after {
  content:
    "";

  position:
    absolute;

  right:
    0;

  top:
    0;

  width:
    2px;

  height:
    100%;

  background:
    linear-gradient(
      180deg,
      var(--abpe-blue),
      var(--abpe-cyan)
    );

  opacity:
    0;

  transition:
    opacity var(--transition);
}

.services-item.is-coming-soon:hover::after {
  opacity:
    1;
}