/* =========================================================
   ABPE WORKS — COMPANY PROFILE V3
   E-COMMERCE SERVICE

   Story Direction:
   Discovery
   Product
   Selection
   Order
   ========================================================= */


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

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


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

.ecom-hero {
  position:
    relative;

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

  padding:
    clamp(90px, 8vw, 140px)
    var(--page-inline)
    clamp(70px, 8vw, 120px);

  overflow:
    hidden;
}

.ecom-hero__top {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    50px;
}

.ecom-hero__index {
  display:
    flex;

  align-items:
    center;

  gap:
    14px;
}

.ecom-hero__index strong {
  color:
    var(--abpe-blue);

  font-size:
    0.72rem;

  font-weight:
    600;
}

.ecom-hero__index span {
  color:
    var(--text-muted);

  font-size:
    0.7rem;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}

.ecom-hero__meta {
  max-width:
    420px;

  color:
    var(--text-muted);

  font-size:
    0.82rem;

  line-height:
    1.7;
}


/* =========================================================
   03. HERO MAIN
   ========================================================= */

.ecom-hero__main {
  position:
    relative;

  min-height:
    clamp(720px, 76vw, 1080px);

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

.ecom-hero__title {
  position:
    relative;

  z-index:
    4;

  max-width:
    1450px;

  color:
    var(--text-heading);

  font-size:
    clamp(4.3rem, 9.8vw, 10.8rem);

  font-weight:
    400;

  line-height:
    0.81;

  letter-spacing:
    -0.078em;

  text-transform:
    uppercase;
}

.ecom-hero__title span {
  display:
    block;
}

.ecom-hero__title .indent {
  padding-left:
    clamp(90px, 16vw, 290px);
}


/* =========================================================
   04. HERO PRODUCT VISUAL
   ========================================================= */

.ecom-hero__visual {
  position:
    absolute;

  z-index:
    2;

  right:
    0;

  bottom:
    0;

  width:
    min(58vw, 980px);

  aspect-ratio:
    4 / 5;

  background:
    var(--bg-muted);

  overflow:
    hidden;
}

.ecom-hero__visual img {
  width:
    100%;

  height:
    112%;

  object-fit:
    cover;

  transform:
    translateY(-6%);

  will-change:
    transform;
}


/* =========================================================
   05. HERO PRODUCT TAG
   ========================================================= */

.ecom-hero__tag {
  position:
    absolute;

  z-index:
    5;

  left:
    0;

  bottom:
    8%;

  width:
    min(300px, 24vw);

  padding:
    24px;

  background:
    rgba(255, 255, 255, 0.9);

  border:
    1px solid rgba(219, 228, 238, 0.85);

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);
}

.ecom-hero__tag-label {
  display:
    block;

  margin-bottom:
    48px;

  color:
    var(--abpe-blue);

  font-size:
    0.6rem;

  font-weight:
    600;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}

.ecom-hero__tag-title {
  color:
    var(--text-heading);

  font-size:
    clamp(1.3rem, 2vw, 2.2rem);

  font-weight:
    400;

  line-height:
    1.05;

  letter-spacing:
    -0.04em;
}


/* =========================================================
   06. HERO BOTTOM
   ========================================================= */

.ecom-hero__bottom {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(280px, 0.35fr);

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

  align-items:
    end;

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

  padding-top:
    24px;

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

.ecom-hero__statement {
  max-width:
    850px;

  color:
    var(--text-heading);

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

  font-weight:
    400;

  line-height:
    1.02;

  letter-spacing:
    -0.045em;
}

.ecom-hero__copy {
  max-width:
    430px;

  color:
    var(--text-muted);

  font-size:
    0.86rem;

  line-height:
    1.7;
}


/* =========================================================
   07. SHOPPING JOURNEY
   ========================================================= */

.ecom-journey {
  padding:
    var(--section-space)
    var(--page-inline);

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

.ecom-journey__header {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    50px;

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

.ecom-journey__title {
  max-width:
    920px;

  margin-top:
    28px;

  color:
    var(--text-heading);

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

  font-weight:
    400;

  line-height:
    0.9;

  letter-spacing:
    -0.06em;
}

.ecom-journey__copy {
  max-width:
    390px;

  color:
    var(--text-muted);

  font-size:
    0.86rem;

  line-height:
    1.7;
}


/* =========================================================
   08. JOURNEY STEPS
   ========================================================= */

.ecom-journey__track {
  display:
    grid;

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

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

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

.ecom-journey-step {
  position:
    relative;

  min-height:
    330px;

  padding:
    30px;

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

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

  transition:
    background var(--transition),
    opacity var(--transition);
}

.ecom-journey-step__number {
  color:
    var(--abpe-blue);

  font-size:
    0.62rem;

  font-weight:
    600;
}

.ecom-journey-step__body {
  position:
    absolute;

  left:
    30px;

  right:
    30px;

  bottom:
    30px;
}

.ecom-journey-step__title {
  margin-bottom:
    18px;

  color:
    var(--text-heading);

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

  font-weight:
    400;

  line-height:
    0.94;

  letter-spacing:
    -0.05em;

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

.ecom-journey-step__description {
  color:
    var(--text-muted);

  font-size:
    0.8rem;

  line-height:
    1.65;
}

.ecom-journey-step.is-active {
  background:
    var(--bg-main);
}

.ecom-journey-step.is-active
.ecom-journey-step__title {
  color:
    var(--abpe-blue);

  transform:
    translateX(8px);
}

.ecom-journey-step.is-muted {
  opacity:
    0.34;
}


/* =========================================================
   09. MAIN PROJECT REVEAL
   ========================================================= */

.ecom-project {
  padding:
    var(--section-space)
    var(--page-inline);

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

.ecom-project__header {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(280px, 0.38fr);

  align-items:
    end;

  gap:
    clamp(60px, 10vw, 160px);

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

.ecom-project__title {
  max-width:
    950px;

  margin-top:
    28px;

  color:
    var(--text-heading);

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

  font-weight:
    400;

  line-height:
    0.9;

  letter-spacing:
    -0.06em;
}

.ecom-project__meta {
  max-width:
    390px;

  color:
    var(--text-muted);

  font-size:
    0.78rem;

  line-height:
    1.7;
}


/* =========================================================
   10. PROJECT HERO VISUAL
   ========================================================= */

.ecom-project__media {
  position:
    relative;

  width:
    100%;

  min-height:
    680px;

  height:
    min(84vh, 980px);

  background:
    var(--bg-muted);

  overflow:
    hidden;
}

.ecom-project__media img {
  width:
    100%;

  height:
    112%;

  object-fit:
    cover;

  transform:
    translateY(-6%);

  will-change:
    transform;
}

.ecom-project__caption {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    30px;

  padding-top:
    16px;

  color:
    var(--text-muted);

  font-size:
    0.68rem;
}

.ecom-project__caption strong {
  color:
    var(--text-heading);

  font-weight:
    500;
}


/* =========================================================
   11. PRODUCT EXPERIENCE
   ========================================================= */

.ecom-product {
  padding:
    var(--section-space)
    var(--page-inline);

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

.ecom-product__grid {
  display:
    grid;

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

  gap:
    clamp(70px, 11vw, 180px);

  align-items:
    start;
}

.ecom-product__side {
  position:
    sticky;

  top:
    calc(var(--navbar-height) + 40px);
}

.ecom-product__title {
  max-width:
    450px;

  margin-top:
    30px;

  color:
    var(--text-heading);

  font-size:
    clamp(2.8rem, 4.8vw, 5.6rem);

  font-weight:
    400;

  line-height:
    0.92;

  letter-spacing:
    -0.055em;
}

.ecom-product__copy {
  max-width:
    370px;

  margin-top:
    35px;

  color:
    var(--text-muted);

  font-size:
    0.84rem;

  line-height:
    1.7;
}


/* =========================================================
   12. PRODUCT CHAPTERS
   ========================================================= */

.ecom-product__content {
  border-top:
    1px solid var(--line);
}

.ecom-product__chapter {
  min-height:
    54vh;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  padding:
    clamp(70px, 8vw, 120px)
    0;

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

  opacity:
    0.3;

  transition:
    opacity 600ms var(--ease-out);
}

.ecom-product__chapter.is-active {
  opacity:
    1;
}

.ecom-product__number {
  margin-bottom:
    clamp(38px, 5vw, 70px);

  color:
    var(--text-soft);

  font-size:
    0.64rem;

  transition:
    color 600ms var(--ease-out);
}

.ecom-product__chapter.is-active
.ecom-product__number {
  color:
    var(--abpe-blue);
}

.ecom-product__chapter-title {
  max-width:
    860px;

  color:
    var(--text-heading);

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

  font-weight:
    400;

  line-height:
    0.9;

  letter-spacing:
    -0.06em;

  transition:
    transform 600ms var(--ease-out);
}

.ecom-product__chapter.is-active
.ecom-product__chapter-title {
  transform:
    translateX(10px);
}

.ecom-product__description {
  max-width:
    600px;

  margin-top:
    34px;

  color:
    var(--text-muted);

  font-size:
    0.9rem;

  line-height:
    1.75;
}


/* =========================================================
   13. EDITORIAL PRODUCT GALLERY
   ========================================================= */

.ecom-gallery {
  padding:
    var(--section-space)
    var(--page-inline);

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

.ecom-gallery__header {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    50px;

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

.ecom-gallery__title {
  max-width:
    900px;

  margin-top:
    28px;

  color:
    var(--text-heading);

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

  font-weight:
    400;

  line-height:
    0.9;

  letter-spacing:
    -0.06em;
}

.ecom-gallery__copy {
  max-width:
    390px;

  color:
    var(--text-muted);

  font-size:
    0.84rem;

  line-height:
    1.7;
}


/* =========================================================
   14. GALLERY GRID
   ========================================================= */

.ecom-gallery__grid {
  display:
    grid;

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

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

  row-gap:
    clamp(100px, 12vw, 190px);
}

.ecom-gallery__item--one {
  grid-column:
    1 / 8;
}

.ecom-gallery__item--two {
  grid-column:
    9 / 13;

  margin-top:
    clamp(100px, 12vw, 190px);
}

.ecom-gallery__item--three {
  grid-column:
    2 / 7;
}

.ecom-gallery__item--four {
  grid-column:
    7 / 13;

  margin-top:
    clamp(100px, 12vw, 180px);
}

.ecom-gallery__media {
  position:
    relative;

  width:
    100%;

  background:
    var(--bg-muted);

  overflow:
    hidden;
}

.ecom-gallery__item--one
.ecom-gallery__media {
  aspect-ratio:
    4 / 5;
}

.ecom-gallery__item--two
.ecom-gallery__media {
  aspect-ratio:
    3 / 4;
}

.ecom-gallery__item--three
.ecom-gallery__media {
  aspect-ratio:
    4 / 5;
}

.ecom-gallery__item--four
.ecom-gallery__media {
  aspect-ratio:
    16 / 10;
}

.ecom-gallery__media img {
  width:
    100%;

  height:
    110%;

  object-fit:
    cover;

  transform:
    translateY(-5%);

  will-change:
    transform;
}

.ecom-gallery__caption {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    20px;

  margin-top:
    14px;

  color:
    var(--text-muted);

  font-size:
    0.66rem;
}

.ecom-gallery__caption strong {
  color:
    var(--text-heading);

  font-weight:
    500;
}


/* =========================================================
   15. FRICTION STATEMENT
   ========================================================= */

.ecom-friction {
  position:
    relative;

  min-height:
    90vh;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    var(--section-space)
    var(--page-inline);

  background:
    var(--abpe-navy);

  overflow:
    hidden;
}

.ecom-friction::before {
  content:
    "";

  position:
    absolute;

  right:
    -20%;

  top:
    -30%;

  width:
    70vw;

  height:
    70vw;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(0, 200, 255, 0.18),
      rgba(7, 92, 255, 0.08) 40%,
      transparent 70%
    );
}

.ecom-friction__content {
  position:
    relative;

  z-index:
    2;

  width:
    min(100%, 1300px);

  text-align:
    center;
}

.ecom-friction__title {
  margin-top:
    clamp(45px, 6vw, 80px);

  color:
    #ffffff;

  font-size:
    clamp(3.5rem, 7.5vw, 8.7rem);

  font-weight:
    400;

  line-height:
    0.86;

  letter-spacing:
    -0.07em;
}

.ecom-friction__copy {
  max-width:
    600px;

  margin:
    clamp(45px, 6vw, 75px)
    auto
    0;

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

  font-size:
    0.9rem;

  line-height:
    1.75;
}


/* =========================================================
   16. SCOPE
   ========================================================= */

.ecom-scope {
  padding:
    var(--section-space)
    var(--page-inline);

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

.ecom-scope__header {
  display:
    grid;

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

  align-items:
    end;

  gap:
    clamp(60px, 10vw, 160px);

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

.ecom-scope__title {
  max-width:
    950px;

  margin-top:
    28px;

  color:
    var(--text-heading);

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

  font-weight:
    400;

  line-height:
    0.9;

  letter-spacing:
    -0.06em;
}

.ecom-scope__copy {
  max-width:
    400px;

  color:
    var(--text-muted);

  font-size:
    0.85rem;

  line-height:
    1.7;
}


/* =========================================================
   17. SCOPE LIST
   ========================================================= */

.ecom-scope-list {
  display:
    grid;

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

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

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

.ecom-scope-item {
  position:
    relative;

  min-height:
    240px;

  padding:
    30px;

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

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

  transition:
    background var(--transition);
}

.ecom-scope-item:hover {
  background:
    var(--bg-white);
}

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

  font-size:
    0.62rem;
}

.ecom-scope-item__title {
  position:
    absolute;

  left:
    30px;

  right:
    30px;

  bottom:
    30px;

  color:
    var(--text-heading);

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

  font-weight:
    400;

  line-height:
    0.94;

  letter-spacing:
    -0.05em;

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

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

  transform:
    translateX(8px);
}


/* =========================================================
   18. TIMELINE
   ========================================================= */

.ecom-timeline {
  padding:
    var(--section-space)
    var(--page-inline);

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

.ecom-timeline__grid {
  display:
    grid;

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

  gap:
    clamp(70px, 10vw, 170px);

  align-items:
    end;
}

.ecom-timeline__title {
  max-width:
    940px;

  margin-top:
    28px;

  color:
    var(--text-heading);

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

  font-weight:
    400;

  line-height:
    0.9;

  letter-spacing:
    -0.06em;
}

.ecom-timeline__duration {
  display:
    block;

  color:
    var(--abpe-blue);

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

  font-weight:
    400;

  line-height:
    0.82;

  letter-spacing:
    -0.075em;
}

.ecom-timeline__label {
  display:
    block;

  margin-top:
    20px;

  color:
    var(--text-heading);

  font-size:
    0.72rem;

  font-weight:
    600;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}

.ecom-timeline__copy {
  max-width:
    400px;

  margin-top:
    30px;

  color:
    var(--text-muted);

  font-size:
    0.84rem;

  line-height:
    1.7;
}


/* =========================================================
   19. RELATED
   ========================================================= */

.ecom-related {
  padding:
    var(--section-space)
    var(--page-inline);

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

.ecom-related__header {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    30px;

  padding-bottom:
    24px;

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

.ecom-related__link {
  display:
    grid;

  grid-template-columns:
    80px
    minmax(0, 1fr)
    auto;

  align-items:
    center;

  gap:
    30px;

  min-height:
    clamp(180px, 16vw, 260px);

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

.ecom-related__index {
  color:
    var(--text-soft);

  font-size:
    0.66rem;
}

.ecom-related__title {
  color:
    var(--text-heading);

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

  font-weight:
    400;

  line-height:
    0.88;

  letter-spacing:
    -0.06em;

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

.ecom-related__arrow {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    72px;

  height:
    72px;

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

  border-radius:
    50%;

  color:
    var(--text-heading);

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

.ecom-related__link:hover
.ecom-related__title {
  color:
    var(--abpe-blue);

  transform:
    translateX(14px);
}

.ecom-related__link:hover
.ecom-related__arrow {
  color:
    #ffffff;

  background:
    var(--abpe-blue);

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

  transform:
    rotate(45deg);
}


/* =========================================================
   20. CTA
   ========================================================= */

.ecom-cta {
  position:
    relative;

  padding:
    clamp(110px, 13vw, 210px)
    var(--page-inline);

  background:
    var(--abpe-navy);

  overflow:
    hidden;
}

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

  position:
    absolute;

  right:
    -18%;

  top:
    -45%;

  width:
    70vw;

  height:
    70vw;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(0, 200, 255, 0.2),
      rgba(7, 92, 255, 0.1) 40%,
      transparent 70%
    );
}

.ecom-cta__top {
  position:
    relative;

  z-index:
    2;

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    flex-start;

  gap:
    50px;

  margin-bottom:
    clamp(90px, 11vw, 170px);
}

.ecom-cta__copy {
  max-width:
    390px;

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

  font-size:
    0.82rem;

  line-height:
    1.7;
}

.ecom-cta__main {
  position:
    relative;

  z-index:
    2;

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    60px;
}

.ecom-cta__title {
  max-width:
    1350px;

  color:
    #ffffff;

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

  font-weight:
    400;

  line-height:
    0.81;

  letter-spacing:
    -0.078em;

  text-transform:
    uppercase;
}

.ecom-cta__action {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    clamp(95px, 10vw, 155px);

  height:
    clamp(95px, 10vw, 155px);

  flex:
    0 0 auto;

  border-radius:
    50%;

  color:
    var(--abpe-navy);

  background:
    #ffffff;

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

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

  background:
    var(--abpe-blue);

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

.ecom-cta__action svg {
  width:
    34%;

  height:
    34%;
}