/* =========================================================
   ABPE WORKS — COMPANY PROFILE V3
   ALL SERVICES PAGE RESPONSIVE
   ========================================================= */


/* =========================================================
   01. LARGE LAPTOP
   <= 1280px
   ========================================================= */

@media (max-width: 1280px) {

  /* HERO */

  .services-hero__title {
    font-size:
      clamp(4rem, 9vw, 9rem);
  }

  .services-hero__ghost {
    font-size:
      clamp(8rem, 20vw, 22rem);
  }


  /* INTRO */

  .services-intro__grid {
    gap:
      100px;
  }


  /* DIRECTORY */

  .services-item {
    grid-template-columns:
      60px
      minmax(0, 0.75fr)
      minmax(230px, 0.5fr)
      50px;

    gap:
      30px;
  }


  /* CATEGORY */

  .service-category {
    min-height:
      380px;
  }


  /* SHOWCASE */

  .services-showcase__media {
    min-height:
      620px;
  }

}


/* =========================================================
   02. TABLET / SMALL LAPTOP
   <= 1024px
   ========================================================= */

@media (max-width: 1024px) {

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

  .services-hero {
    min-height:
      auto;

    padding-top:
      110px;
  }

  .services-hero__top {
    flex-direction:
      column;

    gap:
      26px;
  }

  .services-hero__meta {
    max-width:
      560px;
  }

  .services-hero__main {
    margin-top:
      110px;
  }

  .services-hero__title {
    font-size:
      clamp(3.8rem, 10vw, 7.5rem);
  }

  .services-hero__title .indent {
    padding-left:
      80px;
  }

  .services-hero__ghost {
    right:
      -4vw;

    bottom:
      -4%;

    font-size:
      clamp(7rem, 22vw, 18rem);
  }

  .services-hero__bottom {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      28px;

    margin-top:
      110px;
  }


  /* =======================================================
     INTRO
     ======================================================= */

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

    gap:
      42px;
  }

  .services-intro__content {
    max-width:
      100%;
  }

  .services-intro__title {
    max-width:
      920px;
  }


  /* =======================================================
     DIRECTORY
     ======================================================= */

  .services-directory__header {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      26px;
  }

  .services-directory__copy {
    max-width:
      560px;
  }

  .services-item {
    grid-template-columns:
      50px
      minmax(0, 1fr)
      48px;

    min-height:
      135px;

    gap:
      22px;
  }

  .services-item__description {
    display:
      none;
  }

  .services-item__title {
    font-size:
      clamp(2.4rem, 5.4vw, 4.8rem);
  }

  .services-preview {
    width:
      clamp(220px, 26vw, 320px);
  }


  /* =======================================================
     CATEGORIES
     ======================================================= */

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

    gap:
      28px;
  }

  .services-categories__copy {
    max-width:
      560px;
  }

  .service-category-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .service-category {
    min-height:
      340px;
  }


  /* =======================================================
     PROCESS
     ======================================================= */

  .services-process__header {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      28px;
  }

  .services-process__copy {
    max-width:
      560px;
  }

  .services-process-item {
    grid-template-columns:
      55px
      minmax(180px, 0.55fr)
      minmax(0, 1fr);

    gap:
      36px;
  }


  /* =======================================================
     SHOWCASE
     ======================================================= */

  .services-showcase__media {
    min-height:
      560px;

    height:
      72vh;
  }

  .services-showcase__overlay {
    align-items:
      flex-start;

    flex-direction:
      column;

    justify-content:
      flex-end;

    gap:
      28px;
  }

  .services-showcase__meta {
    max-width:
      520px;
  }


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

  .services-cta__main {
    align-items:
      flex-end;
  }

}


/* =========================================================
   03. TABLET PORTRAIT / MOBILE
   <= 768px
   ========================================================= */

@media (max-width: 768px) {

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

  .services-hero {
    padding:
      90px 20px 75px;
  }

  .services-hero__main {
    margin-top:
      80px;
  }

  .services-hero__title {
    font-size:
      clamp(3.2rem, 14vw, 6rem);

    line-height:
      0.84;
  }

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

  .services-hero__ghost {
    right:
      -8vw;

    bottom:
      2%;

    font-size:
      clamp(6rem, 30vw, 13rem);
  }

  .services-hero__bottom {
    margin-top:
      85px;
  }

  .services-hero__bottom-copy {
    max-width:
      520px;
  }

  .services-hero__count strong {
    font-size:
      clamp(2rem, 10vw, 3.6rem);
  }


  /* =======================================================
     INTRO
     ======================================================= */

  .services-intro {
    padding:
      100px 20px;
  }

  .services-intro__grid {
    gap:
      36px;
  }

  .services-intro__title {
    font-size:
      clamp(2.8rem, 12vw, 5.2rem);
  }

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

    gap:
      24px;

    margin-top:
      50px;
  }


  /* =======================================================
     DIRECTORY
     ======================================================= */

  .services-directory {
    padding:
      100px 20px;
  }

  .services-directory__header {
    margin-bottom:
      60px;
  }

  .services-directory__title {
    font-size:
      clamp(2.8rem, 11.5vw, 5rem);
  }

  .services-item {
    grid-template-columns:
      34px
      minmax(0, 1fr)
      40px;

    min-height:
      110px;

    gap:
      12px;
  }

  .services-item__number {
    font-size:
      0.56rem;
  }

  .services-item__title {
    font-size:
      clamp(1.9rem, 8.5vw, 3.2rem);

    line-height:
      0.9;
  }

  .services-item:hover
  .services-item__title {
    transform:
      none;
  }

  .services-item__arrow {
    width:
      40px;

    height:
      40px;
  }

  .services-item__soon {
    padding:
      4px 6px;

    font-size:
      0.48rem;
  }

  .services-preview {
    display:
      none;
  }


  /* =======================================================
     CATEGORIES
     ======================================================= */

  .services-categories {
    padding:
      100px 20px;
  }

  .services-categories__header {
    margin-bottom:
      60px;
  }

  .services-categories__title {
    font-size:
      clamp(2.8rem, 11.5vw, 5rem);
  }

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

  .service-category {
    min-height:
      300px;

    padding:
      26px 22px;
  }

  .service-category__body {
    left:
      22px;

    right:
      22px;

    bottom:
      24px;
  }

  .service-category__title {
    font-size:
      clamp(2rem, 9vw, 3.4rem);
  }


  /* =======================================================
     PROCESS
     ======================================================= */

  .services-process {
    padding:
      100px 20px;
  }

  .services-process__header {
    margin-bottom:
      60px;
  }

  .services-process__title {
    font-size:
      clamp(2.8rem, 11.5vw, 5rem);
  }

  .services-process-item {
    grid-template-columns:
      34px
      minmax(0, 1fr);

    gap:
      10px 18px;

    padding:
      34px 0;
  }

  .services-process-item__number {
    grid-column:
      1;

    grid-row:
      1 / span 2;
  }

  .services-process-item__title {
    grid-column:
      2;

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

  .services-process-item__description {
    grid-column:
      2;

    margin-top:
      10px;
  }


  /* =======================================================
     SHOWCASE
     ======================================================= */

  .services-showcase {
    padding:
      100px 20px;
  }

  .services-showcase__media {
    min-height:
      520px;

    height:
      auto;

    aspect-ratio:
      4 / 5;
  }

  .services-showcase__media img,
  .services-showcase__media video {
    height:
      106%;

    transform:
      translateY(-3%);
  }

  .services-showcase__overlay {
    padding:
      28px 24px;
  }

  .services-showcase__title {
    font-size:
      clamp(2.7rem, 11vw, 4.8rem);
  }


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

  .services-cta {
    padding:
      95px 20px;
  }

  .services-cta::before {
    top:
      5%;

    right:
      -40%;

    width:
      120vw;

    height:
      120vw;
  }

  .services-cta__top {
    flex-direction:
      column;

    gap:
      26px;

    margin-bottom:
      80px;
  }

  .services-cta__main {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      45px;
  }

  .services-cta__title {
    max-width:
      100%;

    font-size:
      clamp(3.5rem, 15vw, 6.5rem);
  }

  .services-cta__action {
    width:
      90px;

    height:
      90px;
  }

}


/* =========================================================
   04. SMALL MOBILE
   <= 560px
   ========================================================= */

@media (max-width: 560px) {

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

  .services-hero {
    padding:
      75px 16px 65px;
  }

  .services-hero__top {
    gap:
      20px;
  }

  .services-hero__meta {
    font-size:
      0.78rem;
  }

  .services-hero__main {
    margin-top:
      65px;
  }

  .services-hero__title {
    font-size:
      clamp(2.9rem, 14vw, 4.8rem);
  }

  .services-hero__title .indent {
    padding-left:
      22px;
  }

  .services-hero__ghost {
    right:
      -12vw;

    font-size:
      clamp(5rem, 32vw, 10rem);
  }

  .services-hero__bottom {
    margin-top:
      70px;
  }

  .services-hero__bottom-copy {
    font-size:
      0.82rem;
  }


  /* =======================================================
     INTRO
     ======================================================= */

  .services-intro {
    padding:
      80px 16px;
  }

  .services-intro__title {
    font-size:
      clamp(2.5rem, 12vw, 4.4rem);
  }

  .services-intro__bottom {
    margin-top:
      42px;
  }

  .services-intro__bottom p {
    font-size:
      0.84rem;
  }


  /* =======================================================
     DIRECTORY
     ======================================================= */

  .services-directory {
    padding:
      80px 16px;
  }

  .services-directory__header {
    margin-bottom:
      48px;
  }

  .services-directory__title {
    font-size:
      clamp(2.5rem, 12vw, 4.4rem);
  }

  .services-directory__copy {
    font-size:
      0.82rem;
  }

  .services-item {
    grid-template-columns:
      26px
      minmax(0, 1fr)
      34px;

    min-height:
      92px;

    gap:
      8px;
  }

  .services-item__number {
    font-size:
      0.5rem;
  }

  .services-item__title {
    font-size:
      clamp(1.55rem, 8vw, 2.5rem);
  }

  .services-item__arrow {
    width:
      34px;

    height:
      34px;
  }

  .services-item__soon {
    display:
      block;

    width:
      fit-content;

    margin-top:
      7px;
  }


  /* =======================================================
     CATEGORIES
     ======================================================= */

  .services-categories {
    padding:
      80px 16px;
  }

  .services-categories__header {
    margin-bottom:
      48px;
  }

  .services-categories__title {
    font-size:
      clamp(2.5rem, 12vw, 4.4rem);
  }

  .services-categories__copy {
    font-size:
      0.82rem;
  }

  .service-category {
    min-height:
      270px;

    padding:
      22px 18px;
  }

  .service-category__body {
    left:
      18px;

    right:
      18px;

    bottom:
      20px;
  }

  .service-category__title {
    margin-bottom:
      18px;

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

  .service-category__description {
    font-size:
      0.8rem;
  }


  /* =======================================================
     PROCESS
     ======================================================= */

  .services-process {
    padding:
      80px 16px;
  }

  .services-process__header {
    margin-bottom:
      48px;
  }

  .services-process__title {
    font-size:
      clamp(2.5rem, 12vw, 4.4rem);
  }

  .services-process__copy {
    font-size:
      0.82rem;
  }

  .services-process-item {
    grid-template-columns:
      26px
      minmax(0, 1fr);

    gap:
      8px 14px;

    padding:
      30px 0;
  }

  .services-process-item__number {
    font-size:
      0.54rem;
  }

  .services-process-item__title {
    font-size:
      clamp(1.7rem, 8vw, 2.7rem);
  }

  .services-process-item__description {
    font-size:
      0.82rem;
  }


  /* =======================================================
     SHOWCASE
     ======================================================= */

  .services-showcase {
    padding:
      80px 16px;
  }

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

  .services-showcase__overlay {
    padding:
      24px 18px;
  }

  .services-showcase__title {
    font-size:
      clamp(2.4rem, 11vw, 4rem);
  }

  .services-showcase__meta {
    font-size:
      0.7rem;
  }


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

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

  .services-cta__top {
    margin-bottom:
      65px;
  }

  .services-cta__copy {
    font-size:
      0.76rem;
  }

  .services-cta__title {
    font-size:
      clamp(3rem, 15vw, 5rem);
  }

  .services-cta__action {
    width:
      78px;

    height:
      78px;
  }

}


/* =========================================================
   05. TOUCH DEVICES
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

  .services-preview {
    display:
      none !important;
  }

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

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

    transform:
      none;
  }

  .service-category:hover {
    background:
      transparent;
  }

  .service-category:hover
  .service-category__title {
    color:
      var(--text-heading);

    transform:
      none;
  }

  .service-category:hover
  .service-category__index {
    color:
      var(--text-soft);
  }

}


/* =========================================================
   06. LANDSCAPE MOBILE
   ========================================================= */

@media (
  max-width: 900px
) and (
  max-height: 520px
) and (
  orientation: landscape
) {

  .services-hero {
    padding-top:
      80px;
  }

  .services-hero__title {
    font-size:
      clamp(3rem, 9vw, 5rem);
  }

  .services-showcase__media {
    min-height:
      520px;
  }

}