/* =========================================================
   ABPE WORKS — COMPANY PROFILE V3
   LEGAL / TRUST CENTER

   Direction:
   Corporate Trust Center
   Legal Confidence
   Information Security
   Procurement Ready
   Verification Ready
   ========================================================= */


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

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


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

.legal-hero {
  position:
    relative;

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

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

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

  overflow:
    hidden;
}


/* =========================================================
   03. HERO BACKGROUND
   ========================================================= */

.legal-hero::before {
  content:
    "";

  position:
    absolute;

  width:
    min(72vw, 1150px);

  aspect-ratio:
    1;

  right:
    -24%;

  top:
    -42%;

  border-radius:
    50%;

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

  pointer-events:
    none;
}


.legal-hero::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  background-image:
    linear-gradient(
      rgba(7, 92, 255, 0.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(7, 92, 255, 0.035) 1px,
      transparent 1px
    );

  background-size:
    72px 72px;

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.65),
      transparent 84%
    );

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.65),
      transparent 84%
    );

  pointer-events:
    none;
}


/* =========================================================
   04. HERO TOP
   ========================================================= */

.legal-hero__top {
  position:
    relative;

  z-index:
    3;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    40px;
}


.legal-hero__eyebrow {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    12px;

  color:
    var(--text-muted);

  font-size:
    0.65rem;

  letter-spacing:
    0.09em;

  text-transform:
    uppercase;
}


.legal-hero__eyebrow::before {
  content:
    "";

  width:
    7px;

  height:
    7px;

  border-radius:
    50%;

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


/* =========================================================
   05. VERIFICATION BADGE
   ========================================================= */

.legal-verified {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    10px;

  padding:
    9px 14px;

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

  border-radius:
    999px;

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

  color:
    var(--text-muted);

  font-size:
    0.57rem;

  font-weight:
    600;

  letter-spacing:
    0.09em;

  text-transform:
    uppercase;

  backdrop-filter:
    blur(14px);

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


.legal-verified::before {
  content:
    "";

  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    var(--abpe-cyan);

  box-shadow:
    0 0 14px
    rgba(0, 200, 255, 0.7);
}


/* =========================================================
   06. HERO MAIN
   ========================================================= */

.legal-hero__main {
  position:
    relative;

  z-index:
    3;

  display:
    grid;

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

  align-items:
    end;

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

  margin:
    clamp(120px, 14vw, 220px)
    0
    clamp(100px, 11vw, 170px);
}


/* =========================================================
   07. HERO TITLE
   ========================================================= */

.legal-hero__title {
  max-width:
    1450px;

  color:
    var(--text-heading);

  font-size:
    clamp(4.3rem, 9.3vw, 10.6rem);

  font-weight:
    400;

  line-height:
    0.81;

  letter-spacing:
    -0.078em;

  text-transform:
    uppercase;
}


.legal-hero__title span {
  display:
    block;
}


.legal-hero__title .indent {
  padding-left:
    clamp(90px, 15vw, 280px);
}


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


/* =========================================================
   08. HERO COPY
   ========================================================= */

.legal-hero__side {
  padding-top:
    22px;

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


.legal-hero__side-label {
  display:
    block;

  margin-bottom:
    34px;

  color:
    var(--abpe-blue);

  font-size:
    0.6rem;

  font-weight:
    600;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.legal-hero__side-copy {
  color:
    var(--text-muted);

  font-size:
    0.88rem;

  line-height:
    1.75;
}


/* =========================================================
   09. HERO TRUST STRIP
   ========================================================= */

.legal-hero__trust {
  position:
    relative;

  z-index:
    3;

  display:
    grid;

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

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

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


.legal-trust-item {
  min-height:
    128px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  padding:
    20px;

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

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


.legal-trust-item__label {
  color:
    var(--text-soft);

  font-size:
    0.56rem;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.legal-trust-item__value {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  color:
    var(--text-heading);

  font-size:
    0.78rem;

  font-weight:
    500;
}


.legal-trust-item__value::before {
  content:
    "";

  width:
    6px;

  height:
    6px;

  flex:
    0 0 auto;

  border-radius:
    50%;

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


/* =========================================================
   10. COMPANY IDENTITY
   ========================================================= */

.legal-identity {
  padding:
    var(--section-space)
    var(--page-inline);

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


.legal-identity__grid {
  display:
    grid;

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

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

  align-items:
    start;
}


/* =========================================================
   11. IDENTITY INTRO
   ========================================================= */

.legal-identity__side {
  position:
    sticky;

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


.legal-identity__title {
  max-width:
    470px;

  margin-top:
    28px;

  color:
    var(--text-heading);

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

  font-weight:
    400;

  line-height:
    0.92;

  letter-spacing:
    -0.055em;
}


.legal-identity__copy {
  max-width:
    390px;

  margin-top:
    34px;

  color:
    var(--text-muted);

  font-size:
    0.85rem;

  line-height:
    1.75;
}


/* =========================================================
   12. COMPANY FACTS
   ========================================================= */

.legal-facts {
  border-top:
    1px solid var(--line);
}


.legal-fact {
  display:
    grid;

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

  align-items:
    center;

  gap:
    30px;

  min-height:
    105px;

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


.legal-fact__label {
  color:
    var(--text-muted);

  font-size:
    0.62rem;

  letter-spacing:
    0.06em;

  text-transform:
    uppercase;
}


.legal-fact__value {
  color:
    var(--text-heading);

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

  font-weight:
    400;

  letter-spacing:
    -0.025em;
}


.legal-fact__status {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

  color:
    var(--text-muted);

  font-size:
    0.6rem;

  white-space:
    nowrap;
}


.legal-fact__status::before {
  content:
    "";

  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

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


/* =========================================================
   13. BUSINESS CLASSIFICATION
   ========================================================= */

.legal-business {
  padding:
    var(--section-space)
    var(--page-inline);

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


.legal-business__header {
  display:
    grid;

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

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

  align-items:
    end;

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


.legal-business__title {
  max-width:
    970px;

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


.legal-business__copy {
  max-width:
    410px;

  color:
    var(--text-muted);

  font-size:
    0.85rem;

  line-height:
    1.72;
}


/* =========================================================
   14. BUSINESS GRID
   ========================================================= */

.legal-business__grid {
  display:
    grid;

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

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

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


.legal-business-card {
  position:
    relative;

  min-height:
    290px;

  padding:
    28px;

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

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

  overflow:
    hidden;

  transition:
    background var(--transition);
}


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


.legal-business-card__code {
  color:
    var(--abpe-blue);

  font-size:
    0.63rem;

  font-weight:
    600;

  letter-spacing:
    0.08em;
}


.legal-business-card__body {
  position:
    absolute;

  left:
    28px;

  right:
    28px;

  bottom:
    28px;
}


.legal-business-card__title {
  max-width:
    620px;

  color:
    var(--text-heading);

  font-size:
    clamp(1.55rem, 2.7vw, 3.2rem);

  font-weight:
    400;

  line-height:
    0.98;

  letter-spacing:
    -0.045em;
}


.legal-business-card__status {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

  margin-top:
    20px;

  color:
    var(--text-muted);

  font-size:
    0.6rem;

  text-transform:
    uppercase;

  letter-spacing:
    0.06em;
}


.legal-business-card__status::before {
  content:
    "";

  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

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


/* =========================================================
   15. INFORMATION SECURITY
   ========================================================= */

.legal-security {
  position:
    relative;

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

  background:
    var(--abpe-navy);

  overflow:
    hidden;
}


.legal-security::before {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  background-image:
    linear-gradient(
      rgba(0, 200, 255, 0.05) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(0, 200, 255, 0.05) 1px,
      transparent 1px
    );

  background-size:
    72px 72px;

  pointer-events:
    none;
}


.legal-security::after {
  content:
    "";

  position:
    absolute;

  width:
    min(75vw, 1100px);

  aspect-ratio:
    1;

  right:
    -30%;

  top:
    -45%;

  border-radius:
    50%;

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

  pointer-events:
    none;
}


/* =========================================================
   16. SECURITY HEADER
   ========================================================= */

.legal-security__header {
  position:
    relative;

  z-index:
    2;

  display:
    grid;

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

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

  align-items:
    end;

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


.legal-security__title {
  max-width:
    1050px;

  margin-top:
    28px;

  color:
    #ffffff;

  font-size:
    clamp(3.2rem, 6.3vw, 7.4rem);

  font-weight:
    400;

  line-height:
    0.88;

  letter-spacing:
    -0.065em;
}


.legal-security__copy {
  max-width:
    430px;

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

  font-size:
    0.86rem;

  line-height:
    1.75;
}


/* =========================================================
   17. ISO STANDARD CARDS
   ========================================================= */

.legal-standard-grid {
  position:
    relative;

  z-index:
    2;

  display:
    grid;

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

  border-top:
    1px solid
    rgba(255, 255, 255, 0.15);

  border-left:
    1px solid
    rgba(255, 255, 255, 0.15);
}


.legal-standard {
  min-height:
    430px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

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

  border-right:
    1px solid
    rgba(255, 255, 255, 0.15);

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

  transition:
    background var(--transition);
}


.legal-standard:hover {
  background:
    rgba(7, 92, 255, 0.1);
}


.legal-standard__top {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    30px;
}


.legal-standard__number {
  color:
    var(--abpe-cyan);

  font-size:
    0.64rem;

  font-weight:
    600;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.legal-standard__status {
  padding:
    7px 10px;

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

  border-radius:
    999px;

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

  font-size:
    0.52rem;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.legal-standard__title {
  color:
    #ffffff;

  font-size:
    clamp(2.4rem, 4.5vw, 5.3rem);

  font-weight:
    400;

  line-height:
    0.9;

  letter-spacing:
    -0.06em;
}


.legal-standard__copy {
  max-width:
    620px;

  margin-top:
    28px;

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

  font-size:
    0.82rem;

  line-height:
    1.72;
}


/* =========================================================
   18. SECURITY PRINCIPLES
   ========================================================= */

.legal-security-principles {
  position:
    relative;

  z-index:
    2;

  display:
    grid;

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

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

  border-top:
    1px solid
    rgba(255, 255, 255, 0.15);

  border-left:
    1px solid
    rgba(255, 255, 255, 0.15);
}


.legal-security-principle {
  min-height:
    260px;

  padding:
    28px;

  border-right:
    1px solid
    rgba(255, 255, 255, 0.15);

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


.legal-security-principle__index {
  display:
    block;

  margin-bottom:
    clamp(60px, 7vw, 110px);

  color:
    var(--abpe-cyan);

  font-size:
    0.6rem;
}


.legal-security-principle__title {
  color:
    #ffffff;

  font-size:
    clamp(1.7rem, 2.8vw, 3.3rem);

  font-weight:
    400;

  line-height:
    0.94;

  letter-spacing:
    -0.05em;
}


.legal-security-principle__copy {
  max-width:
    380px;

  margin-top:
    18px;

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

  font-size:
    0.76rem;

  line-height:
    1.68;
}


/* =========================================================
   19. BUSINESS DOCUMENTS
   ========================================================= */

.legal-documents {
  padding:
    var(--section-space)
    var(--page-inline);

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


.legal-documents__header {
  display:
    grid;

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

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

  align-items:
    end;

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


.legal-documents__title {
  max-width:
    1000px;

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


.legal-documents__copy {
  max-width:
    420px;

  color:
    var(--text-muted);

  font-size:
    0.85rem;

  line-height:
    1.72;
}


/* =========================================================
   20. DOCUMENT LIST
   ========================================================= */

.legal-document-list {
  display:
    grid;

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

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

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


.legal-document {
  display:
    grid;

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

  align-items:
    center;

  gap:
    20px;

  min-height:
    110px;

  padding:
    24px;

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

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


.legal-document__number {
  color:
    var(--text-soft);

  font-size:
    0.6rem;
}


.legal-document__title {
  color:
    var(--text-heading);

  font-size:
    clamp(1rem, 1.5vw, 1.45rem);

  font-weight:
    400;
}


.legal-document__status {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  color:
    var(--text-muted);

  font-size:
    0.56rem;

  white-space:
    nowrap;
}


.legal-document__status::before {
  content:
    "";

  width:
    5px;

  height:
    5px;

  border-radius:
    50%;

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


/* =========================================================
   21. DOCUMENT REQUEST
   ========================================================= */

.legal-request {
  padding:
    var(--section-space)
    var(--page-inline);

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


.legal-request__grid {
  display:
    grid;

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

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

  align-items:
    start;
}


.legal-request__title {
  max-width:
    1000px;

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


.legal-request__copy {
  max-width:
    650px;

  margin-top:
    36px;

  color:
    var(--text-muted);

  font-size:
    0.88rem;

  line-height:
    1.75;
}


/* =========================================================
   22. REQUEST REQUIREMENTS
   ========================================================= */

.legal-request__requirements {
  border-top:
    1px solid var(--line);
}


.legal-request-requirement {
  display:
    grid;

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

  gap:
    18px;

  padding:
    21px 0;

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


.legal-request-requirement__number {
  color:
    var(--abpe-blue);

  font-size:
    0.6rem;
}


.legal-request-requirement__text {
  color:
    var(--text-body);

  font-size:
    0.8rem;

  line-height:
    1.6;
}


/* =========================================================
   23. REQUEST ACTIONS
   ========================================================= */

.legal-request__actions {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    12px;

  margin-top:
    46px;
}


.legal-request__action {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    12px;

  min-height:
    50px;

  padding:
    0 20px;

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

  color:
    var(--text-heading);

  background:
    var(--bg-white);

  font-size:
    0.68rem;

  font-weight:
    500;

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


.legal-request__action--primary {
  color:
    #ffffff;

  background:
    var(--abpe-blue);

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


.legal-request__action:hover {
  color:
    #ffffff;

  background:
    var(--abpe-navy);

  border-color:
    var(--abpe-navy);
}


/* =========================================================
   24. DATA DISCLOSURE NOTICE
   ========================================================= */

.legal-disclosure {
  padding:
    clamp(70px, 8vw, 120px)
    var(--page-inline);

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


.legal-disclosure__grid {
  display:
    grid;

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

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

  align-items:
    start;
}


.legal-disclosure__title {
  color:
    var(--text-heading);

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

  font-weight:
    400;

  line-height:
    0.95;

  letter-spacing:
    -0.05em;
}


.legal-disclosure__copy {
  max-width:
    850px;

  color:
    var(--text-muted);

  font-size:
    0.86rem;

  line-height:
    1.78;
}


/* =========================================================
   25. TRUST CTA
   ========================================================= */

.legal-cta {
  position:
    relative;

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

  background:
    var(--abpe-navy);

  overflow:
    hidden;
}


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

  position:
    absolute;

  width:
    78vw;

  height:
    78vw;

  right:
    -28%;

  top:
    -48%;

  border-radius:
    50%;

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

  pointer-events:
    none;
}


.legal-cta__top {
  position:
    relative;

  z-index:
    2;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    60px;

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


.legal-cta__copy {
  max-width:
    470px;

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

  font-size:
    0.84rem;

  line-height:
    1.75;
}


/* =========================================================
   26. CTA MAIN
   ========================================================= */

.legal-cta__main {
  position:
    relative;

  z-index:
    2;

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    60px;
}


.legal-cta__title {
  max-width:
    1400px;

  color:
    #ffffff;

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

  font-weight:
    400;

  line-height:
    0.81;

  letter-spacing:
    -0.078em;

  text-transform:
    uppercase;
}


.legal-cta__actions {
  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;

  min-width:
    210px;
}


.legal-cta__button {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  min-height:
    54px;

  padding:
    0 18px;

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

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

  font-size:
    0.68rem;

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


.legal-cta__button--primary {
  color:
    var(--abpe-navy);

  background:
    var(--abpe-cyan);

  border-color:
    var(--abpe-cyan);
}


.legal-cta__button:hover {
  color:
    #ffffff;

  background:
    var(--abpe-blue);

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


/* =========================================================
   27. ACCESSIBILITY
   ========================================================= */

.legal-request__action:focus-visible,
.legal-cta__button:focus-visible {
  outline:
    2px solid var(--abpe-cyan);

  outline-offset:
    5px;
}