/* =========================================================
   ABPE WORKS — COMPANY PROFILE V3
   SaaS / MVP RESPONSIVE
   ========================================================= */


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

@media (max-width: 1280px) {

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

  .saas-hero__product {
    width:
      min(62vw, 920px);
  }

  .saas-path-step {
    min-height:
      280px;
  }

  .saas-project__media {
    min-height:
      620px;
  }

  .saas-interface__grid {
    row-gap:
      140px;
  }

  .saas-interface__item--two,
  .saas-interface__item--four {
    margin-top:
      130px;
  }

}


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

@media (max-width: 1024px) {

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

  .saas-hero {
    min-height:
      auto;

    padding-top:
      110px;
  }

  .saas-hero__top {
    flex-direction:
      column;

    gap:
      24px;
  }

  .saas-hero__meta {
    max-width:
      580px;
  }

  .saas-hero__main {
    min-height:
      820px;

    margin-top:
      100px;
  }

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

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

  .saas-hero__product {
    width:
      76vw;

    max-width:
      760px;
  }

  .saas-hero__badge {
    width:
      min(300px, 35vw);
  }

  .saas-hero__bottom {
    grid-template-columns:
      1fr;

    gap:
      30px;

    margin-top:
      100px;
  }


  /* =======================================================
     PRODUCT PATH
     ======================================================= */

  .saas-path__header {
    grid-template-columns:
      1fr;

    gap:
      28px;
  }

  .saas-path__copy {
    max-width:
      560px;
  }

  .saas-path__track {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

  .saas-path-step {
    min-height:
      260px;
  }


  /* =======================================================
     MVP PRINCIPLE
     ======================================================= */

  .saas-principle__grid {
    grid-template-columns:
      1fr;

    gap:
      42px;
  }


  /* =======================================================
     PROJECT
     ======================================================= */

  .saas-project__header {
    grid-template-columns:
      1fr;

    gap:
      30px;
  }

  .saas-project__meta {
    max-width:
      560px;
  }

  .saas-project__media {
    min-height:
      560px;

    height:
      72vh;
  }


  /* =======================================================
     PRODUCT LOOP
     ======================================================= */

  .saas-loop__header {
    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      28px;
  }

  .saas-loop__copy {
    max-width:
      560px;
  }

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

  .saas-loop-card {
    min-height:
      280px;
  }

  .saas-loop-card:last-child {
    grid-column:
      1 / -1;
  }


  /* =======================================================
     ARCHITECTURE
     ======================================================= */

  .saas-architecture__grid {
    grid-template-columns:
      1fr;

    gap:
      60px;
  }

  .saas-architecture__side {
    position:
      static;
  }

  .saas-architecture__copy {
    max-width:
      560px;
  }

  .saas-architecture__chapter {
    min-height:
      48vh;
  }


  /* =======================================================
     PRODUCT INTERFACE
     ======================================================= */

  .saas-interface__header {
    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      28px;
  }

  .saas-interface__copy {
    max-width:
      560px;
  }

  .saas-interface__grid {
    row-gap:
      100px;
  }

  .saas-interface__item--one {
    grid-column:
      1 / 9;
  }

  .saas-interface__item--two {
    grid-column:
      8 / 13;

    margin-top:
      90px;
  }

  .saas-interface__item--three {
    grid-column:
      1 / 7;
  }

  .saas-interface__item--four {
    grid-column:
      7 / 13;

    margin-top:
      90px;
  }


  /* =======================================================
     STATEMENT
     ======================================================= */

  .saas-statement {
    min-height:
      78vh;
  }


  /* =======================================================
     SCOPE
     ======================================================= */

  .saas-scope__header {
    grid-template-columns:
      1fr;

    gap:
      28px;
  }

  .saas-scope__copy {
    max-width:
      560px;
  }


  /* =======================================================
     TIMELINE
     ======================================================= */

  .saas-timeline__grid {
    grid-template-columns:
      1fr;

    gap:
      60px;
  }


  /* =======================================================
     RELATED
     ======================================================= */

  .saas-related__link {
    grid-template-columns:
      60px
      minmax(0, 1fr)
      60px;
  }

}


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

@media (max-width: 768px) {

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

  .saas-hero {
    padding:
      90px 20px 80px;
  }

  .saas-hero::before {
    width:
      120vw;

    right:
      -55%;

    top:
      -8%;
  }

  .saas-hero__main {
    min-height:
      720px;

    margin-top:
      80px;
  }

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

    line-height:
      0.84;
  }

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

  .saas-hero__product {
    right:
      -20px;

    width:
      86vw;

    max-width:
      none;

    aspect-ratio:
      4 / 5;
  }

  .saas-hero__product img {
    height:
      106%;

    transform:
      translateY(-3%);
  }

  .saas-hero__badge {
    width:
      245px;

    left:
      0;

    bottom:
      3%;

    padding:
      20px;
  }

  .saas-hero__badge-top {
    margin-bottom:
      36px;
  }

  .saas-hero__badge-title {
    font-size:
      1.3rem;
  }

  .saas-hero__bottom {
    margin-top:
      80px;
  }

  .saas-hero__statement {
    font-size:
      clamp(1.6rem, 7vw, 2.8rem);
  }


  /* =======================================================
     PRODUCT PATH
     ======================================================= */

  .saas-path {
    padding:
      100px 20px;
  }

  .saas-path__header {
    margin-bottom:
      60px;
  }

  .saas-path__title {
    font-size:
      clamp(2.8rem, 11vw, 5rem);
  }

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

  .saas-path-step {
    min-height:
      230px;

    padding:
      24px 22px;
  }

  .saas-path-step__body {
    left:
      22px;

    right:
      22px;

    bottom:
      22px;
  }

  .saas-path-step__title {
    font-size:
      clamp(1.8rem, 8vw, 3rem);
  }


  /* =======================================================
     MVP PRINCIPLE
     ======================================================= */

  .saas-principle {
    padding:
      100px 20px;
  }

  .saas-principle__grid {
    gap:
      36px;
  }

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

  .saas-principle__copy {
    grid-template-columns:
      1fr;

    gap:
      24px;

    margin-top:
      50px;
  }


  /* =======================================================
     PROJECT
     ======================================================= */

  .saas-project {
    padding:
      100px 20px;
  }

  .saas-project__header {
    margin-bottom:
      60px;
  }

  .saas-project__title {
    font-size:
      clamp(2.8rem, 11vw, 5rem);
  }

  .saas-project__media {
    min-height:
      500px;

    height:
      auto;

    aspect-ratio:
      4 / 5;
  }

  .saas-project__media img {
    height:
      106%;

    transform:
      translateY(-3%);
  }

  .saas-project__caption {
    flex-direction:
      column;

    gap:
      6px;
  }


  /* =======================================================
     PRODUCT LOOP
     ======================================================= */

  .saas-loop {
    padding:
      100px 20px;
  }

  .saas-loop__header {
    margin-bottom:
      60px;
  }

  .saas-loop__title {
    font-size:
      clamp(2.8rem, 11vw, 5rem);
  }

  .saas-loop__grid {
    grid-template-columns:
      1fr;
  }

  .saas-loop-card,
  .saas-loop-card:last-child {
    grid-column:
      1;
  }

  .saas-loop-card {
    min-height:
      230px;

    padding:
      24px 22px;
  }

  .saas-loop-card::before {
    left:
      22px;

    top:
      50px;
  }

  .saas-loop-card__body {
    left:
      22px;

    right:
      22px;

    bottom:
      22px;
  }

  .saas-loop-card__title {
    font-size:
      clamp(1.8rem, 8vw, 3rem);
  }


  /* =======================================================
     ARCHITECTURE
     ======================================================= */

  .saas-architecture {
    padding:
      100px 20px;
  }

  .saas-architecture__grid {
    gap:
      45px;
  }

  .saas-architecture__title {
    font-size:
      clamp(2.8rem, 11vw, 5rem);
  }

  .saas-architecture__chapter {
    min-height:
      auto;

    padding:
      75px 0;
  }

  .saas-architecture__number {
    margin-bottom:
      45px;
  }

  .saas-architecture__chapter-title {
    font-size:
      clamp(2.8rem, 11vw, 5rem);
  }


  /* =======================================================
     PRODUCT INTERFACE
     ======================================================= */

  .saas-interface {
    padding:
      100px 20px;
  }

  .saas-interface__header {
    margin-bottom:
      60px;
  }

  .saas-interface__title {
    font-size:
      clamp(2.8rem, 11vw, 5rem);
  }

  .saas-interface__grid {
    grid-template-columns:
      1fr;

    gap:
      0;

    row-gap:
      70px;
  }

  .saas-interface__item--one,
  .saas-interface__item--two,
  .saas-interface__item--three,
  .saas-interface__item--four {
    grid-column:
      1;

    margin-top:
      0;
  }

  .saas-interface__item--one {
    width:
      100%;
  }

  .saas-interface__item--two {
    width:
      78%;

    margin-left:
      auto;
  }

  .saas-interface__item--three {
    width:
      86%;

    margin-right:
      auto;
  }

  .saas-interface__item--four {
    width:
      100%;
  }

  .saas-interface__item--one
  .saas-interface__media,
  .saas-interface__item--four
  .saas-interface__media {
    aspect-ratio:
      4 / 5;
  }

  .saas-interface__media img {
    height:
      106%;

    transform:
      translateY(-3%);
  }


  /* =======================================================
     STATEMENT
     ======================================================= */

  .saas-statement {
    min-height:
      70vh;

    padding:
      100px 20px;
  }

  .saas-statement::before {
    font-size:
      clamp(12rem, 55vw, 28rem);
  }

  .saas-statement__title {
    font-size:
      clamp(3rem, 13vw, 6rem);
  }


  /* =======================================================
     SCOPE
     ======================================================= */

  .saas-scope {
    padding:
      100px 20px;
  }

  .saas-scope__header {
    margin-bottom:
      60px;
  }

  .saas-scope__title {
    font-size:
      clamp(2.8rem, 11vw, 5rem);
  }

  .saas-scope-list {
    grid-template-columns:
      1fr;
  }

  .saas-scope-item {
    min-height:
      220px;

    padding:
      24px 22px;
  }

  .saas-scope-item__title {
    left:
      22px;

    right:
      22px;

    bottom:
      22px;

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


  /* =======================================================
     TIMELINE
     ======================================================= */

  .saas-timeline {
    padding:
      100px 20px;
  }

  .saas-timeline__title {
    font-size:
      clamp(2.8rem, 11vw, 5rem);
  }

  .saas-timeline__duration {
    font-size:
      clamp(4rem, 17vw, 7rem);
  }


  /* =======================================================
     RELATED
     ======================================================= */

  .saas-related {
    padding:
      100px 20px;
  }

  .saas-related__link {
    grid-template-columns:
      34px
      minmax(0, 1fr)
      48px;

    gap:
      14px;

    min-height:
      150px;
  }

  .saas-related__title {
    font-size:
      clamp(2.4rem, 10vw, 4.5rem);
  }

  .saas-related__arrow {
    width:
      48px;

    height:
      48px;
  }


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

  .saas-cta {
    padding:
      100px 20px;
  }

  .saas-cta::before {
    width:
      125vw;

    height:
      125vw;

    right:
      -45%;

    top:
      5%;
  }

  .saas-cta__top {
    flex-direction:
      column;

    gap:
      24px;

    margin-bottom:
      80px;
  }

  .saas-cta__main {
    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      45px;
  }

  .saas-cta__title {
    font-size:
      clamp(3.5rem, 15vw, 6.5rem);
  }

  .saas-cta__action {
    width:
      90px;

    height:
      90px;
  }

}


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

@media (max-width: 560px) {

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

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

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

  .saas-hero__main {
    min-height:
      640px;

    margin-top:
      65px;
  }

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

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

  .saas-hero__product {
    right:
      -16px;

    width:
      90vw;
  }

  .saas-hero__badge {
    width:
      215px;

    padding:
      18px;
  }

  .saas-hero__badge-top {
    margin-bottom:
      30px;
  }

  .saas-hero__badge-label {
    font-size:
      0.54rem;
  }

  .saas-hero__badge-status {
    font-size:
      0.5rem;
  }

  .saas-hero__badge-title {
    font-size:
      1.1rem;
  }

  .saas-hero__bottom {
    margin-top:
      65px;
  }

  .saas-hero__copy {
    font-size:
      0.82rem;
  }


  /* =======================================================
     PRODUCT PATH
     ======================================================= */

  .saas-path {
    padding:
      80px 16px;
  }

  .saas-path__header {
    margin-bottom:
      48px;
  }

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

  .saas-path__copy {
    font-size:
      0.82rem;
  }

  .saas-path__track {
    grid-template-columns:
      1fr;
  }

  .saas-path-step {
    min-height:
      200px;

    padding:
      20px 18px;
  }

  .saas-path-step__body {
    left:
      18px;

    right:
      18px;

    bottom:
      18px;
  }

  .saas-path-step__title {
    font-size:
      clamp(1.6rem, 8vw, 2.6rem);
  }

  .saas-path-step__description {
    font-size:
      0.74rem;
  }


  /* =======================================================
     MVP PRINCIPLE
     ======================================================= */

  .saas-principle {
    padding:
      80px 16px;
  }

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

  .saas-principle__copy {
    margin-top:
      42px;
  }

  .saas-principle__copy p {
    font-size:
      0.84rem;
  }


  /* =======================================================
     PROJECT
     ======================================================= */

  .saas-project {
    padding:
      80px 16px;
  }

  .saas-project__header {
    margin-bottom:
      48px;
  }

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

  .saas-project__meta {
    font-size:
      0.74rem;
  }

  .saas-project__media {
    min-height:
      450px;
  }


  /* =======================================================
     PRODUCT LOOP
     ======================================================= */

  .saas-loop {
    padding:
      80px 16px;
  }

  .saas-loop__header {
    margin-bottom:
      48px;
  }

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

  .saas-loop__copy {
    font-size:
      0.82rem;
  }

  .saas-loop-card {
    min-height:
      210px;

    padding:
      20px 18px;
  }

  .saas-loop-card::before {
    left:
      18px;

    top:
      46px;
  }

  .saas-loop-card__body {
    left:
      18px;

    right:
      18px;

    bottom:
      18px;
  }

  .saas-loop-card__title {
    font-size:
      clamp(1.6rem, 8vw, 2.6rem);
  }

  .saas-loop-card__description {
    font-size:
      0.74rem;
  }


  /* =======================================================
     ARCHITECTURE
     ======================================================= */

  .saas-architecture {
    padding:
      80px 16px;
  }

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

  .saas-architecture__copy {
    font-size:
      0.82rem;
  }

  .saas-architecture__chapter {
    padding:
      65px 0;
  }

  .saas-architecture__number {
    margin-bottom:
      38px;
  }

  .saas-architecture__chapter-title {
    font-size:
      clamp(2.5rem, 12vw, 4.4rem);
  }

  .saas-architecture__description {
    font-size:
      0.84rem;
  }


  /* =======================================================
     PRODUCT INTERFACE
     ======================================================= */

  .saas-interface {
    padding:
      80px 16px;
  }

  .saas-interface__header {
    margin-bottom:
      48px;
  }

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

  .saas-interface__copy {
    font-size:
      0.82rem;
  }

  .saas-interface__grid {
    row-gap:
      55px;
  }

  .saas-interface__item--two {
    width:
      84%;
  }

  .saas-interface__item--three {
    width:
      90%;
  }


  /* =======================================================
     STATEMENT
     ======================================================= */

  .saas-statement {
    min-height:
      65vh;

    padding:
      80px 16px;
  }

  .saas-statement::before {
    font-size:
      clamp(10rem, 60vw, 22rem);
  }

  .saas-statement__title {
    font-size:
      clamp(2.8rem, 13vw, 5rem);
  }

  .saas-statement__copy {
    font-size:
      0.84rem;
  }


  /* =======================================================
     SCOPE
     ======================================================= */

  .saas-scope {
    padding:
      80px 16px;
  }

  .saas-scope__header {
    margin-bottom:
      48px;
  }

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

  .saas-scope__copy {
    font-size:
      0.82rem;
  }

  .saas-scope-item {
    min-height:
      190px;

    padding:
      20px 18px;
  }

  .saas-scope-item__title {
    left:
      18px;

    right:
      18px;

    bottom:
      18px;

    font-size:
      clamp(1.6rem, 8vw, 2.6rem);
  }


  /* =======================================================
     TIMELINE
     ======================================================= */

  .saas-timeline {
    padding:
      80px 16px;
  }

  .saas-timeline__grid {
    gap:
      45px;
  }

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

  .saas-timeline__duration {
    font-size:
      clamp(3.8rem, 18vw, 6rem);
  }

  .saas-timeline__copy {
    font-size:
      0.82rem;
  }


  /* =======================================================
     RELATED
     ======================================================= */

  .saas-related {
    padding:
      80px 16px;
  }

  .saas-related__link {
    grid-template-columns:
      24px
      minmax(0, 1fr)
      42px;

    min-height:
      130px;
  }

  .saas-related__title {
    font-size:
      clamp(2rem, 10vw, 3.5rem);
  }

  .saas-related__arrow {
    width:
      42px;

    height:
      42px;
  }


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

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

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

  .saas-cta__copy {
    font-size:
      0.78rem;
  }

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

  .saas-cta__action {
    width:
      78px;

    height:
      78px;
  }

}


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

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

  .saas-path-step.is-muted {
    opacity:
      1;
  }

  .saas-path-step.is-active,
  .saas-path-step.is-completed {
    background:
      transparent;
  }

  .saas-path-step.is-active
  .saas-path-step__title {
    color:
      #ffffff;

    transform:
      none;
  }

  .saas-path-step.is-active
  .saas-path-step__number,
  .saas-path-step.is-completed
  .saas-path-step__number {
    color:
      rgba(255, 255, 255, 0.45);
  }


  .saas-loop-card.is-muted {
    opacity:
      1;
  }

  .saas-loop-card.is-active {
    background:
      transparent;
  }

  .saas-loop-card.is-active::before {
    background:
      transparent;

    box-shadow:
      none;
  }

  .saas-loop-card.is-active
  .saas-loop-card__title {
    color:
      #ffffff;

    transform:
      none;
  }


  .saas-architecture__chapter {
    opacity:
      1;
  }

  .saas-architecture__chapter.is-active
  .saas-architecture__chapter-title {
    transform:
      none;
  }


  .saas-scope-item:hover {
    background:
      transparent;
  }

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

    transform:
      none;
  }


  .saas-related__link:hover
  .saas-related__title {
    color:
      var(--text-heading);

    transform:
      none;
  }

  .saas-related__link:hover
  .saas-related__arrow {
    color:
      var(--text-heading);

    background:
      transparent;

    border-color:
      var(--line);

    transform:
      none;
  }

}


/* =========================================================
   06. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .saas-path-step,
  .saas-path-step__title,
  .saas-loop-card,
  .saas-loop-card::before,
  .saas-loop-card__title,
  .saas-architecture__chapter,
  .saas-architecture__chapter-title,
  .saas-scope-item,
  .saas-scope-item__title,
  .saas-related__title,
  .saas-related__arrow,
  .saas-cta__action {
    transition:
      none;
  }

}


/* =========================================================
   07. LANDSCAPE MOBILE
   ========================================================= */

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

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

  .saas-hero__main {
    min-height:
      620px;
  }

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

  .saas-project__media {
    min-height:
      520px;
  }

  .saas-statement {
    min-height:
      620px;
  }

}