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

   Story Direction:
   Identity
   Clarity
   Credibility
   Business Story
   ========================================================= */


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

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


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

.compro-hero {
  position:
    relative;

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

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

  overflow:
    hidden;
}


/* =========================================================
   03. HERO TOP
   ========================================================= */

.compro-hero__top {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    50px;
}

.compro-hero__index {
  display:
    flex;

  align-items:
    center;

  gap:
    14px;
}

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

  font-size:
    0.72rem;

  font-weight:
    600;
}

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

  font-size:
    0.7rem;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}

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

  color:
    var(--text-muted);

  font-size:
    0.82rem;

  line-height:
    1.7;
}


/* =========================================================
   04. HERO EDITORIAL GRID
   ========================================================= */

.compro-hero__grid {
  display:
    grid;

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

  gap:
    clamp(60px, 8vw, 130px);

  align-items:
    end;

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


/* =========================================================
   05. HERO TITLE
   ========================================================= */

.compro-hero__title {
  max-width:
    1250px;

  color:
    var(--text-heading);

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

  font-weight:
    400;

  line-height:
    0.82;

  letter-spacing:
    -0.075em;

  text-transform:
    uppercase;
}

.compro-hero__title span {
  display:
    block;
}

.compro-hero__title .indent {
  padding-left:
    clamp(80px, 13vw, 230px);
}


/* =========================================================
   06. HERO ASIDE
   ========================================================= */

.compro-hero__aside {
  padding-bottom:
    14px;
}

.compro-hero__aside-line {
  width:
    100%;

  height:
    1px;

  margin-bottom:
    28px;

  background:
    var(--line);
}

.compro-hero__aside-title {
  max-width:
    340px;

  color:
    var(--text-heading);

  font-size:
    clamp(1.5rem, 2.1vw, 2.5rem);

  font-weight:
    400;

  line-height:
    1.05;

  letter-spacing:
    -0.04em;
}

.compro-hero__aside-copy {
  max-width:
    350px;

  margin-top:
    28px;

  color:
    var(--text-muted);

  font-size:
    0.82rem;

  line-height:
    1.7;
}


/* =========================================================
   07. HERO PUBLICATION META
   ========================================================= */

.compro-hero__publication {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    30px;

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

  padding:
    18px 0;

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

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

  color:
    var(--text-muted);

  font-size:
    0.64rem;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


/* =========================================================
   08. FIRST IMPRESSION
   ========================================================= */

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

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

.compro-intro__grid {
  display:
    grid;

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

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

.compro-intro__content {
  max-width:
    1140px;
}

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

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

  font-weight:
    400;

  line-height:
    0.9;

  letter-spacing:
    -0.06em;
}

.compro-intro__copy {
  display:
    grid;

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

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

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

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

  font-size:
    0.92rem;

  line-height:
    1.75;
}


/* =========================================================
   09. BUSINESS STORY INDEX
   ========================================================= */

.compro-story-index {
  padding:
    var(--section-space)
    var(--page-inline);

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

.compro-story-index__header {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    50px;

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

.compro-story-index__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;
}

.compro-story-index__copy {
  max-width:
    390px;

  color:
    var(--text-muted);

  font-size:
    0.86rem;

  line-height:
    1.7;
}


/* =========================================================
   10. STORY INDEX LIST
   ========================================================= */

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

.compro-index-item {
  position:
    relative;

  display:
    grid;

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

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

  align-items:
    start;

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

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

  transition:
    opacity var(--transition);
}

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

  font-size:
    0.64rem;
}

.compro-index-item__title {
  color:
    var(--text-heading);

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

.compro-index-item__description {
  max-width:
    590px;

  color:
    var(--text-muted);

  font-size:
    0.88rem;

  line-height:
    1.7;
}

.compro-index-item.is-muted {
  opacity:
    0.32;
}

.compro-index-item.is-active
.compro-index-item__title {
  color:
    var(--abpe-blue);

  transform:
    translateX(10px);
}


/* =========================================================
   11. CASE STUDY INTRO
   ========================================================= */

.compro-case {
  padding:
    var(--section-space)
    var(--page-inline);

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

.compro-case__header {
  display:
    grid;

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

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

  align-items:
    end;

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

.compro-case__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;
}

.compro-case__meta {
  display:
    grid;

  grid-template-columns:
    auto 1fr;

  gap:
    10px 25px;

  max-width:
    390px;

  padding-top:
    24px;

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

  color:
    var(--text-muted);

  font-size:
    0.72rem;

  line-height:
    1.6;
}

.compro-case__meta dt {
  color:
    var(--text-soft);

  text-transform:
    uppercase;

  letter-spacing:
    0.06em;
}

.compro-case__meta dd {
  color:
    var(--text-heading);
}


/* =========================================================
   12. CASE HERO VISUAL
   ========================================================= */

.compro-case__hero {
  position:
    relative;

  width:
    100%;

  min-height:
    680px;

  height:
    min(82vh, 960px);

  overflow:
    hidden;

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

.compro-case__hero img {
  width:
    100%;

  height:
    112%;

  object-fit:
    cover;

  transform:
    translateY(-6%);

  will-change:
    transform;
}

.compro-case__caption {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    30px;

  padding-top:
    16px;

  color:
    var(--text-muted);

  font-size:
    0.68rem;
}

.compro-case__caption strong {
  color:
    var(--text-heading);

  font-weight:
    500;
}


/* =========================================================
   13. BUSINESS STORY ARCHITECTURE
   ========================================================= */

.compro-architecture {
  padding:
    var(--section-space)
    var(--page-inline);

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

.compro-architecture__grid {
  display:
    grid;

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

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

  align-items:
    start;
}


/* =========================================================
   14. ARCHITECTURE STICKY SIDE
   ========================================================= */

.compro-architecture__side {
  position:
    sticky;

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

.compro-architecture__title {
  max-width:
    430px;

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

.compro-architecture__copy {
  max-width:
    360px;

  margin-top:
    35px;

  color:
    var(--text-muted);

  font-size:
    0.84rem;

  line-height:
    1.7;
}


/* =========================================================
   15. ARCHITECTURE CHAPTER
   ========================================================= */

.compro-architecture__content {
  border-top:
    1px solid var(--line);
}

.compro-architecture__chapter {
  position:
    relative;

  min-height:
    55vh;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

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

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

  opacity:
    0.32;

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

.compro-architecture__chapter.is-active {
  opacity:
    1;
}

.compro-architecture__number {
  display:
    block;

  margin-bottom:
    clamp(38px, 5vw, 70px);

  color:
    var(--text-soft);

  font-size:
    0.64rem;

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

.compro-architecture__chapter.is-active
.compro-architecture__number {
  color:
    var(--abpe-blue);
}

.compro-architecture__chapter-title {
  max-width:
    850px;

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

.compro-architecture__chapter.is-active
.compro-architecture__chapter-title {
  transform:
    translateX(10px);
}

.compro-architecture__description {
  max-width:
    600px;

  margin-top:
    34px;

  color:
    var(--text-muted);

  font-size:
    0.9rem;

  line-height:
    1.75;
}


/* =========================================================
   16. EDITORIAL PROJECT SPREAD
   ========================================================= */

.compro-spread {
  padding:
    var(--section-space)
    var(--page-inline);

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

.compro-spread__header {
  display:
    flex;

  justify-content:
    space-between;

  align-items:
    flex-end;

  gap:
    50px;

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

.compro-spread__title {
  max-width:
    890px;

  margin-top:
    28px;

  color:
    var(--text-heading);

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

  font-weight:
    400;

  line-height:
    0.9;

  letter-spacing:
    -0.06em;
}

.compro-spread__copy {
  max-width:
    390px;

  color:
    var(--text-muted);

  font-size:
    0.84rem;

  line-height:
    1.7;
}


/* =========================================================
   17. SPREAD LAYOUT
   ========================================================= */

.compro-spread__gallery {
  display:
    grid;

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

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

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

.compro-spread__item {
  position:
    relative;
}

.compro-spread__item--one {
  grid-column:
    1 / 8;
}

.compro-spread__item--two {
  grid-column:
    9 / 13;

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

.compro-spread__item--three {
  grid-column:
    3 / 12;
}

.compro-spread__media {
  position:
    relative;

  width:
    100%;

  overflow:
    hidden;

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

.compro-spread__item--one
.compro-spread__media {
  aspect-ratio:
    4 / 5;
}

.compro-spread__item--two
.compro-spread__media {
  aspect-ratio:
    3 / 4;
}

.compro-spread__item--three
.compro-spread__media {
  aspect-ratio:
    16 / 10;
}

.compro-spread__media img {
  width:
    100%;

  height:
    110%;

  object-fit:
    cover;

  transform:
    translateY(-5%);

  will-change:
    transform;
}

.compro-spread__caption {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    20px;

  margin-top:
    14px;

  color:
    var(--text-muted);

  font-size:
    0.66rem;
}

.compro-spread__caption strong {
  color:
    var(--text-heading);

  font-weight:
    500;
}


/* =========================================================
   18. CREDIBILITY STATEMENT
   ========================================================= */

.compro-credibility {
  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;
}

.compro-credibility::before {
  content:
    "";

  position:
    absolute;

  width:
    70vw;

  height:
    70vw;

  left:
    -25%;

  top:
    -30%;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(0, 200, 255, 0.17),
      rgba(7, 92, 255, 0.08) 42%,
      transparent 72%
    );

  pointer-events:
    none;
}

.compro-credibility__content {
  position:
    relative;

  z-index:
    2;

  width:
    min(100%, 1300px);

  text-align:
    center;
}

.compro-credibility__eyebrow {
  color:
    rgba(255, 255, 255, 0.5);
}

.compro-credibility__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;
}

.compro-credibility__copy {
  max-width:
    600px;

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

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

  font-size:
    0.9rem;

  line-height:
    1.75;
}


/* =========================================================
   19. SCOPE
   ========================================================= */

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

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

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

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

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

  color:
    var(--text-muted);

  font-size:
    0.85rem;

  line-height:
    1.7;
}


/* =========================================================
   20. SCOPE DIRECTORY
   ========================================================= */

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

.compro-scope-item {
  display:
    grid;

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

  align-items:
    center;

  gap:
    30px;

  min-height:
    120px;

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

  transition:
    background var(--transition);
}

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

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

  font-size:
    0.62rem;
}

.compro-scope-item__title {
  color:
    var(--text-heading);

  font-size:
    clamp(1.9rem, 3.3vw, 3.8rem);

  font-weight:
    400;

  line-height:
    0.95;

  letter-spacing:
    -0.05em;

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

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

  transform:
    translateX(8px);
}

.compro-scope-item__type {
  color:
    var(--text-muted);

  font-size:
    0.68rem;

  text-align:
    right;

  text-transform:
    uppercase;

  letter-spacing:
    0.06em;
}


/* =========================================================
   21. TIMELINE
   ========================================================= */

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

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

.compro-timeline__grid {
  display:
    grid;

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

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

  align-items:
    end;
}

.compro-timeline__title {
  max-width:
    930px;

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

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

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

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

  margin-top:
    30px;

  color:
    var(--text-muted);

  font-size:
    0.84rem;

  line-height:
    1.7;
}


/* =========================================================
   22. RELATED SERVICE
   ========================================================= */

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

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

.compro-related__header {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    30px;

  padding-bottom:
    24px;

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

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

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

  font-size:
    0.66rem;
}

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

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

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

  transform:
    translateX(14px);
}

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

  background:
    var(--abpe-blue);

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

  transform:
    rotate(45deg);
}


/* =========================================================
   23. CTA
   ========================================================= */

.compro-cta {
  position:
    relative;

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

  background:
    var(--abpe-navy);

  overflow:
    hidden;
}

.compro-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%
    );

  pointer-events:
    none;
}

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

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

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

  font-size:
    0.82rem;

  line-height:
    1.7;
}

.compro-cta__main {
  position:
    relative;

  z-index:
    2;

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    60px;
}

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

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

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

  background:
    var(--abpe-blue);

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

.compro-cta__action svg {
  width:
    34%;

  height:
    34%;
}