/* =========================================================
   ABPE WORKS — COMPANY PROFILE V3
   ABOUT PAGE
   ========================================================= */


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

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


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

.about-hero {
  position:
    relative;

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

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

  overflow:
    hidden;
}

.about-hero__top {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    40px;

  margin-bottom:
    clamp(70px, 9vw, 150px);
}

.about-hero__meta {
  max-width:
    360px;

  color:
    var(--text-muted);

  font-size:
    0.8rem;

  line-height:
    1.65;
}

.about-hero__title {
  position:
    relative;

  z-index:
    2;

  max-width:
    1500px;

  color:
    var(--text-heading);

  font-size:
    clamp(4.5rem, 10vw, 11.5rem);

  font-weight:
    400;

  line-height:
    0.82;

  letter-spacing:
    -0.075em;

  text-transform:
    uppercase;
}

.about-hero__title span {
  display:
    block;
}

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


/* =========================================================
   03. HERO VISUAL
   ========================================================= */

.about-hero__visual {
  position:
    relative;

  width:
    min(100%, 1260px);

  margin:
    clamp(-40px, -3vw, -10px)
    0
    0
    auto;

  aspect-ratio:
    16 / 9;

  background:
    var(--bg-muted);

  overflow:
    hidden;
}

.about-hero__visual img,
.about-hero__visual video {
  width:
    100%;

  height:
    110%;

  object-fit:
    cover;

  transform:
    translateY(-5%);

  will-change:
    transform;
}

.about-hero__caption {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    30px;

  width:
    min(100%, 1260px);

  margin:
    14px 0 0 auto;

  color:
    var(--text-muted);

  font-size:
    0.7rem;
}


/* =========================================================
   04. INTRO
   ========================================================= */

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

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

.about-intro__grid {
  display:
    grid;

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

  gap:
    clamp(60px, 10vw, 180px);
}

.about-intro__label {
  align-self:
    start;
}

.about-intro__content {
  max-width:
    1120px;
}

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

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

  font-weight:
    400;

  line-height:
    0.92;

  letter-spacing:
    -0.06em;
}

.about-intro__copy {
  display:
    grid;

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

  gap:
    clamp(30px, 5vw, 80px);

  margin-top:
    clamp(55px, 7vw, 100px);
}

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

  font-size:
    clamp(0.92rem, 1.1vw, 1rem);

  line-height:
    1.75;
}


/* =========================================================
   05. ABPE MEANING
   ========================================================= */

.about-meaning {
  position:
    relative;

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

  background:
    var(--bg-main);

  overflow:
    hidden;
}

.about-meaning__header {
  display:
    flex;

  justify-content:
    space-between;

  align-items:
    flex-start;

  gap:
    50px;

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

.about-meaning__headline {
  max-width:
    850px;

  font-size:
    clamp(3rem, 5.5vw, 6.3rem);

  font-weight:
    400;

  line-height:
    0.92;

  letter-spacing:
    -0.055em;
}

.about-meaning__copy {
  max-width:
    390px;

  color:
    var(--text-muted);

  font-size:
    0.86rem;

  line-height:
    1.7;
}


/* =========================================================
   06. MEANING LIST
   ========================================================= */

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

.meaning-item {
  display:
    grid;

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

  align-items:
    start;

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

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

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

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

  font-size:
    0.66rem;

  letter-spacing:
    0.08em;
}

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

  font-size:
    clamp(2.5rem, 4.8vw, 6rem);

  font-weight:
    400;

  line-height:
    0.9;

  letter-spacing:
    -0.06em;
}

.meaning-item__description {
  max-width:
    570px;

  color:
    var(--text-muted);

  font-size:
    0.92rem;

  line-height:
    1.7;
}


/* =========================================================
   07. LARGE STORY VISUAL
   ========================================================= */

.about-story {
  position:
    relative;

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

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

.about-story__media {
  position:
    relative;

  width:
    100%;

  height:
    min(82vh, 900px);

  min-height:
    620px;

  overflow:
    hidden;

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

.about-story__media img,
.about-story__media video {
  width:
    100%;

  height:
    112%;

  object-fit:
    cover;

  transform:
    translateY(-6%);

  will-change:
    transform;
}

.about-story__overlay {
  position:
    absolute;

  inset:
    0;

  display:
    flex;

  align-items:
    flex-end;

  padding:
    clamp(30px, 5vw, 80px);

  background:
    linear-gradient(
      180deg,
      transparent 35%,
      rgba(6, 23, 47, 0.72) 100%
    );
}

.about-story__statement {
  max-width:
    950px;

  color:
    #ffffff;

  font-size:
    clamp(2.8rem, 5vw, 6rem);

  font-weight:
    400;

  line-height:
    0.93;

  letter-spacing:
    -0.055em;
}


/* =========================================================
   08. PRINCIPLES
   ========================================================= */

.about-principles {
  padding:
    var(--section-space)
    var(--page-inline);

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

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

.about-principles__title {
  max-width:
    900px;

  color:
    var(--text-heading);

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

  font-weight:
    400;

  line-height:
    0.9;

  letter-spacing:
    -0.06em;
}

.about-principles__copy {
  max-width:
    380px;

  color:
    var(--text-muted);

  font-size:
    0.88rem;

  line-height:
    1.7;
}


/* =========================================================
   09. PRINCIPLE GRID
   ========================================================= */

.principle-grid {
  display:
    grid;

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

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

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

.principle-card {
  position:
    relative;

  min-height:
    420px;

  padding:
    clamp(26px, 3vw, 46px);

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

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

  overflow:
    hidden;

  transition:
    background var(--transition);
}

.principle-card:hover {
  background:
    var(--bg-white);
}

.principle-card__number {
  color:
    var(--text-soft);

  font-size:
    0.66rem;

  letter-spacing:
    0.08em;
}

.principle-card__body {
  position:
    absolute;

  left:
    clamp(26px, 3vw, 46px);

  right:
    clamp(26px, 3vw, 46px);

  bottom:
    clamp(28px, 3vw, 46px);
}

.principle-card__title {
  margin-bottom:
    24px;

  color:
    var(--text-heading);

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

  font-weight:
    400;

  line-height:
    0.95;

  letter-spacing:
    -0.05em;
}

.principle-card__description {
  max-width:
    360px;

  color:
    var(--text-muted);

  font-size:
    0.85rem;

  line-height:
    1.65;
}


/* =========================================================
   10. WORKSHOP / COLLABORATION
   ========================================================= */

.about-workshop {
  padding:
    var(--section-space)
    var(--page-inline);

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

.about-workshop__grid {
  display:
    grid;

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

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

  align-items:
    stretch;
}

.about-workshop__media {
  position:
    relative;

  min-height:
    720px;

  overflow:
    hidden;

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

.about-workshop__media img {
  width:
    100%;

  height:
    112%;

  object-fit:
    cover;

  transform:
    translateY(-6%);

  will-change:
    transform;
}

.about-workshop__content {
  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  padding-block:
    12px;
}

.about-workshop__title {
  max-width:
    850px;

  color:
    var(--text-heading);

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

  font-weight:
    400;

  line-height:
    0.9;

  letter-spacing:
    -0.06em;
}

.about-workshop__bottom {
  display:
    flex;

  justify-content:
    space-between;

  align-items:
    flex-end;

  gap:
    50px;
}

.about-workshop__copy {
  max-width:
    540px;

  color:
    var(--text-muted);

  font-size:
    0.9rem;

  line-height:
    1.7;
}


/* =========================================================
   11. CAPABILITIES
   ========================================================= */

.about-capabilities {
  padding:
    var(--section-space)
    var(--page-inline);

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

.about-capabilities__header {
  margin-bottom:
    clamp(70px, 9vw, 130px);
}

.about-capabilities__title {
  max-width:
    1050px;

  margin-top:
    28px;

  color:
    var(--text-heading);

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

  font-weight:
    400;

  line-height:
    0.9;

  letter-spacing:
    -0.06em;
}

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

.capability-item {
  display:
    grid;

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

  gap:
    25px;

  align-items:
    center;

  min-height:
    120px;

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

  transition:
    background var(--transition);
}

.capability-item:hover {
  background:
    var(--bg-main);
}

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

  font-size:
    0.65rem;
}

.capability-item__name {
  color:
    var(--text-heading);

  font-size:
    clamp(2rem, 3.5vw, 4rem);

  font-weight:
    400;

  line-height:
    0.95;

  letter-spacing:
    -0.05em;
}

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

  font-size:
    0.72rem;

  text-align:
    right;
}


/* =========================================================
   12. CLOSING STATEMENT
   ========================================================= */

.about-closing {
  position:
    relative;

  min-height:
    95vh;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

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

  background:
    var(--abpe-navy);

  overflow:
    hidden;
}

.about-closing::before {
  content:
    "";

  position:
    absolute;

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

  pointer-events:
    none;
}

.about-closing__content {
  position:
    relative;

  z-index:
    2;

  width:
    min(100%, 1450px);

  text-align:
    center;
}

.about-closing__eyebrow {
  margin-bottom:
    clamp(35px, 5vw, 70px);

  color:
    rgba(255, 255, 255, 0.55);
}

.about-closing__title {
  color:
    #ffffff;

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

  font-weight:
    400;

  line-height:
    0.83;

  letter-spacing:
    -0.075em;

  text-transform:
    uppercase;
}

.about-closing__action {
  display:
    inline-flex;

  margin-top:
    clamp(50px, 7vw, 90px);
}