/* =========================================================
   ABPE WORKS — COMPANY PROFILE V3
   LANDING PAGE PRO

   Story Direction:
   Story
   Interaction
   Motion
   Experience
   ========================================================= */


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

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


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

.lp-pro-hero {
  position:
    relative;

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

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

  overflow:
    hidden;
}

.lp-pro-hero__top {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    50px;

  position:
    relative;

  z-index:
    5;
}

.lp-pro-hero__index {
  display:
    flex;

  align-items:
    center;

  gap:
    14px;
}

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

  font-size:
    0.72rem;

  font-weight:
    600;
}

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

  font-size:
    0.7rem;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}

.lp-pro-hero__meta {
  max-width:
    420px;

  color:
    var(--text-muted);

  font-size:
    0.82rem;

  line-height:
    1.7;
}


/* =========================================================
   03. HERO COMPOSITION
   ========================================================= */

.lp-pro-hero__composition {
  position:
    relative;

  min-height:
    clamp(700px, 78vw, 1100px);

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

.lp-pro-hero__title {
  position:
    relative;

  z-index:
    4;

  max-width:
    1480px;

  color:
    var(--text-heading);

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

  font-weight:
    400;

  line-height:
    0.81;

  letter-spacing:
    -0.078em;

  text-transform:
    uppercase;

  pointer-events:
    none;
}

.lp-pro-hero__title span {
  display:
    block;
}

.lp-pro-hero__title .indent {
  padding-left:
    clamp(80px, 16vw, 290px);
}

.lp-pro-hero__title .accent {
  color:
    var(--abpe-blue);
}


/* =========================================================
   04. HERO PROJECT VISUAL
   ========================================================= */

.lp-pro-hero__visual {
  position:
    absolute;

  z-index:
    2;

  right:
    0;

  bottom:
    0;

  width:
    min(62vw, 1040px);

  aspect-ratio:
    16 / 10;

  background:
    var(--bg-muted);

  overflow:
    hidden;
}

.lp-pro-hero__visual img {
  width:
    100%;

  height:
    112%;

  object-fit:
    cover;

  transform:
    translateY(-6%);

  will-change:
    transform;
}

.lp-pro-hero__visual::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  border:
    1px solid rgba(255, 255, 255, 0.18);

  pointer-events:
    none;
}


/* =========================================================
   05. HERO FLOATING INFO
   ========================================================= */

.lp-pro-hero__float {
  position:
    absolute;

  z-index:
    5;

  left:
    2%;

  bottom:
    8%;

  width:
    min(320px, 24vw);

  padding:
    24px;

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

  backdrop-filter:
    blur(18px);

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

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

.lp-pro-hero__float-label {
  display:
    block;

  margin-bottom:
    55px;

  color:
    var(--abpe-blue);

  font-size:
    0.62rem;

  font-weight:
    600;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}

.lp-pro-hero__float-copy {
  color:
    var(--text-heading);

  font-size:
    clamp(1.25rem, 1.8vw, 2rem);

  font-weight:
    400;

  line-height:
    1.08;

  letter-spacing:
    -0.035em;
}


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

.lp-pro-hero__bottom {
  display:
    grid;

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

  align-items:
    end;

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

  margin-top:
    clamp(70px, 8vw, 120px);

  padding-top:
    24px;

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

.lp-pro-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;
}

.lp-pro-hero__copy {
  max-width:
    430px;

  color:
    var(--text-muted);

  font-size:
    0.86rem;

  line-height:
    1.7;
}


/* =========================================================
   07. EXPERIENCE MARQUEE
   ========================================================= */

.lp-pro-marquee {
  position:
    relative;

  padding:
    clamp(50px, 6vw, 90px)
    0;

  background:
    var(--abpe-blue);

  overflow:
    hidden;
}

.lp-pro-marquee__track {
  display:
    flex;

  align-items:
    center;

  width:
    max-content;

  white-space:
    nowrap;

  will-change:
    transform;
}

.lp-pro-marquee__group {
  display:
    flex;

  align-items:
    center;
}

.lp-pro-marquee__word {
  display:
    flex;

  align-items:
    center;

  color:
    #ffffff;

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

  font-weight:
    400;

  line-height:
    0.85;

  letter-spacing:
    -0.06em;

  text-transform:
    uppercase;
}

.lp-pro-marquee__word::after {
  content:
    "↗";

  display:
    inline-flex;

  margin:
    0 clamp(40px, 6vw, 100px);

  color:
    var(--abpe-cyan);

  font-size:
    0.45em;

  font-weight:
    400;
}


/* =========================================================
   08. INTRO
   ========================================================= */

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

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

.lp-pro-intro__grid {
  display:
    grid;

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

  gap:
    clamp(70px, 11vw, 190px);
}

.lp-pro-intro__content {
  max-width:
    1150px;
}

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

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

  font-weight:
    400;

  line-height:
    0.9;

  letter-spacing:
    -0.06em;
}

.lp-pro-intro__copy {
  display:
    grid;

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

  gap:
    clamp(30px, 6vw, 90px);

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

.lp-pro-intro__copy p {
  color:
    var(--text-muted);

  font-size:
    0.92rem;

  line-height:
    1.75;
}


/* =========================================================
   09. PROJECT STORY
   ========================================================= */

.lp-pro-story {
  padding:
    var(--section-space)
    var(--page-inline);

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

.lp-pro-story__header {
  display:
    grid;

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

  align-items:
    end;

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

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

.lp-pro-story__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;
}

.lp-pro-story__copy {
  max-width:
    410px;

  color:
    var(--text-muted);

  font-size:
    0.86rem;

  line-height:
    1.7;
}


/* =========================================================
   10. ASYMMETRIC PROJECT GALLERY
   ========================================================= */

.lp-pro-gallery {
  display:
    grid;

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

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

  row-gap:
    clamp(100px, 13vw, 220px);
}

.lp-pro-gallery__item {
  position:
    relative;
}

.lp-pro-gallery__item--one {
  grid-column:
    1 / 13;
}

.lp-pro-gallery__item--two {
  grid-column:
    2 / 8;
}

.lp-pro-gallery__item--three {
  grid-column:
    8 / 13;

  margin-top:
    clamp(120px, 14vw, 230px);
}

.lp-pro-gallery__item--four {
  grid-column:
    4 / 12;
}

.lp-pro-gallery__media {
  position:
    relative;

  width:
    100%;

  background:
    var(--bg-muted);

  overflow:
    hidden;
}

.lp-pro-gallery__item--one
.lp-pro-gallery__media {
  aspect-ratio:
    16 / 9;
}

.lp-pro-gallery__item--two
.lp-pro-gallery__media {
  aspect-ratio:
    4 / 5;
}

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

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

.lp-pro-gallery__media img {
  width:
    100%;

  height:
    110%;

  object-fit:
    cover;

  transform:
    translateY(-5%);

  will-change:
    transform;
}

.lp-pro-gallery__caption {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    30px;

  margin-top:
    14px;

  color:
    var(--text-muted);

  font-size:
    0.68rem;

  line-height:
    1.5;
}

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

  font-weight:
    500;
}


/* =========================================================
   11. EXPERIENCE PRINCIPLES
   ========================================================= */

.lp-pro-experience {
  padding:
    var(--section-space)
    var(--page-inline);

  background:
    var(--abpe-navy);
}

.lp-pro-experience__header {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    50px;

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

.lp-pro-experience__title {
  max-width:
    980px;

  margin-top:
    28px;

  color:
    #ffffff;

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

  font-weight:
    400;

  line-height:
    0.9;

  letter-spacing:
    -0.06em;
}

.lp-pro-experience__copy {
  max-width:
    390px;

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

  font-size:
    0.86rem;

  line-height:
    1.7;
}


/* =========================================================
   12. EXPERIENCE LIST
   ========================================================= */

.lp-pro-experience-list {
  border-top:
    1px solid rgba(255, 255, 255, 0.18);
}

.lp-pro-experience-item {
  position:
    relative;

  display:
    grid;

  grid-template-columns:
    70px
    minmax(220px, 0.62fr)
    minmax(0, 1fr);

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

  align-items:
    start;

  padding:
    clamp(42px, 5vw, 75px)
    0;

  border-bottom:
    1px solid rgba(255, 255, 255, 0.18);

  overflow:
    hidden;

  transition:
    opacity var(--transition);
}

.lp-pro-experience-item__number {
  color:
    rgba(255, 255, 255, 0.35);

  font-size:
    0.64rem;
}

.lp-pro-experience-item__title {
  color:
    #ffffff;

  font-size:
    clamp(2.2rem, 4vw, 4.8rem);

  font-weight:
    400;

  line-height:
    0.92;

  letter-spacing:
    -0.055em;

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

.lp-pro-experience-item__description {
  max-width:
    580px;

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

  font-size:
    0.88rem;

  line-height:
    1.7;
}

.lp-pro-experience-item.is-muted {
  opacity:
    0.28;
}

.lp-pro-experience-item.is-active
.lp-pro-experience-item__title {
  color:
    var(--abpe-cyan);

  transform:
    translateX(12px);
}


/* =========================================================
   13. STORYTELLING SECTION
   ========================================================= */

.lp-pro-narrative {
  position:
    relative;

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

  background:
    var(--bg-white);

  overflow:
    hidden;
}

.lp-pro-narrative__grid {
  display:
    grid;

  grid-template-columns:
    minmax(300px, 0.42fr)
    minmax(0, 1fr);

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

  align-items:
    start;
}

.lp-pro-narrative__side {
  position:
    sticky;

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

.lp-pro-narrative__side-copy {
  max-width:
    340px;

  margin-top:
    30px;

  color:
    var(--text-muted);

  font-size:
    0.84rem;

  line-height:
    1.7;
}

.lp-pro-narrative__content {
  display:
    flex;

  flex-direction:
    column;
}

.lp-pro-narrative__chapter {
  position:
    relative;

  min-height:
    58vh;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

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

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

.lp-pro-narrative__chapter:first-child {
  border-top:
    1px solid var(--line);
}

.lp-pro-narrative__number {
  display:
    block;

  margin-bottom:
    clamp(40px, 6vw, 80px);

  color:
    var(--abpe-blue);

  font-size:
    0.65rem;
}

.lp-pro-narrative__title {
  max-width:
    850px;

  color:
    var(--text-heading);

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

  font-weight:
    400;

  line-height:
    0.9;

  letter-spacing:
    -0.06em;
}

.lp-pro-narrative__description {
  max-width:
    600px;

  margin-top:
    35px;

  color:
    var(--text-muted);

  font-size:
    0.9rem;

  line-height:
    1.75;
}


/* =========================================================
   14. MOTION STATEMENT
   ========================================================= */

.lp-pro-motion {
  position:
    relative;

  min-height:
    90vh;

  display:
    flex;

  align-items:
    center;

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

  background:
    var(--bg-soft);

  overflow:
    hidden;
}

.lp-pro-motion__word {
  position:
    absolute;

  top:
    50%;

  left:
    50%;

  color:
    transparent;

  font-size:
    clamp(10rem, 28vw, 34rem);

  font-weight:
    500;

  line-height:
    0.7;

  letter-spacing:
    -0.08em;

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

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

  user-select:
    none;

  pointer-events:
    none;

  white-space:
    nowrap;
}

.lp-pro-motion__content {
  position:
    relative;

  z-index:
    2;

  width:
    min(100%, 1200px);

  margin:
    0 auto;

  text-align:
    center;
}

.lp-pro-motion__title {
  color:
    var(--text-heading);

  font-size:
    clamp(3.4rem, 7vw, 8rem);

  font-weight:
    400;

  line-height:
    0.88;

  letter-spacing:
    -0.065em;
}

.lp-pro-motion__copy {
  max-width:
    560px;

  margin:
    clamp(40px, 6vw, 70px)
    auto
    0;

  color:
    var(--text-muted);

  font-size:
    0.9rem;

  line-height:
    1.7;
}


/* =========================================================
   15. SCOPE
   ========================================================= */

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

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

.lp-pro-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);
}

.lp-pro-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;
}

.lp-pro-scope__copy {
  max-width:
    400px;

  color:
    var(--text-muted);

  font-size:
    0.85rem;

  line-height:
    1.7;
}


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

.lp-pro-scope-list {
  display:
    grid;

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

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

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

.lp-pro-scope-item {
  position:
    relative;

  min-height:
    250px;

  padding:
    30px;

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

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

  overflow:
    hidden;

  transition:
    background var(--transition);
}

.lp-pro-scope-item:hover {
  background:
    var(--bg-main);
}

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

  font-size:
    0.62rem;
}

.lp-pro-scope-item__title {
  position:
    absolute;

  left:
    30px;

  right:
    30px;

  bottom:
    30px;

  max-width:
    520px;

  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);
}

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

  transform:
    translateX(8px);
}


/* =========================================================
   17. TIMELINE / EXPECTATION
   ========================================================= */

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

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

.lp-pro-timeline__grid {
  display:
    grid;

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

  align-items:
    end;

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

.lp-pro-timeline__title {
  max-width:
    950px;

  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;
}

.lp-pro-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;
}

.lp-pro-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;
}

.lp-pro-timeline__copy {
  max-width:
    400px;

  margin-top:
    30px;

  color:
    var(--text-muted);

  font-size:
    0.84rem;

  line-height:
    1.7;
}


/* =========================================================
   18. RELATED SERVICE
   ========================================================= */

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

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

.lp-pro-related__header {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    30px;

  padding-bottom:
    24px;

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

.lp-pro-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);
}

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

  font-size:
    0.66rem;
}

.lp-pro-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);
}

.lp-pro-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);
}

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

  transform:
    translateX(14px);
}

.lp-pro-related__link:hover
.lp-pro-related__arrow {
  color:
    #ffffff;

  background:
    var(--abpe-blue);

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

  transform:
    rotate(45deg);
}


/* =========================================================
   19. CTA
   ========================================================= */

.lp-pro-cta {
  position:
    relative;

  min-height:
    92vh;

  display:
    flex;

  align-items:
    center;

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

  background:
    var(--abpe-navy);

  overflow:
    hidden;
}

.lp-pro-cta::before {
  content:
    "";

  position:
    absolute;

  width:
    75vw;

  height:
    75vw;

  right:
    -20%;

  top:
    -35%;

  border-radius:
    50%;

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

  pointer-events:
    none;
}

.lp-pro-cta__content {
  position:
    relative;

  z-index:
    2;

  width:
    100%;
}

.lp-pro-cta__top {
  display:
    flex;

  justify-content:
    space-between;

  align-items:
    flex-start;

  gap:
    50px;

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

.lp-pro-cta__copy {
  max-width:
    390px;

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

  font-size:
    0.82rem;

  line-height:
    1.7;
}

.lp-pro-cta__main {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    60px;
}

.lp-pro-cta__title {
  max-width:
    1350px;

  color:
    #ffffff;

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

  font-weight:
    400;

  line-height:
    0.81;

  letter-spacing:
    -0.078em;

  text-transform:
    uppercase;
}

.lp-pro-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);
}

.lp-pro-cta__action:hover {
  color:
    #ffffff;

  background:
    var(--abpe-blue);

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

.lp-pro-cta__action svg {
  width:
    34%;

  height:
    34%;
}