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


/* =========================================================
   01. LARGE LAPTOP
   <= 1280px
   ========================================================= */

@media (max-width: 1280px) {

  .legal-hero__title {
    font-size:
      clamp(4rem, 8.6vw, 9rem);
  }

  .legal-hero__main {
    gap:
      100px;
  }

  .legal-standard {
    min-height:
      400px;
  }

  .legal-cta__title {
    font-size:
      clamp(4rem, 8vw, 8.8rem);
  }

}


/* =========================================================
   02. TABLET / SMALL LAPTOP
   <= 1024px
   ========================================================= */

@media (max-width: 1024px) {

  /* =======================================================
     HERO
     ======================================================= */

  .legal-hero {
    min-height:
      auto;

    padding-top:
      110px;
  }

  .legal-hero__top {
    align-items:
      flex-start;
  }

  .legal-hero__main {
    grid-template-columns:
      1fr;

    gap:
      60px;

    margin:
      110px 0 100px;
  }

  .legal-hero__title {
    font-size:
      clamp(3.8rem, 10vw, 7.4rem);
  }

  .legal-hero__title .indent {
    padding-left:
      80px;
  }

  .legal-hero__side {
    width:
      min(100%, 560px);

    margin-left:
      auto;
  }

  .legal-hero__trust {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  /* =======================================================
     IDENTITY
     ======================================================= */

  .legal-identity__grid {
    grid-template-columns:
      1fr;

    gap:
      60px;
  }

  .legal-identity__side {
    position:
      static;
  }

  .legal-identity__copy {
    max-width:
      560px;
  }


  /* =======================================================
     BUSINESS
     ======================================================= */

  .legal-business__header {
    grid-template-columns:
      1fr;

    gap:
      30px;
  }

  .legal-business__copy {
    max-width:
      560px;
  }


  /* =======================================================
     SECURITY
     ======================================================= */

  .legal-security__header {
    grid-template-columns:
      1fr;

    gap:
      30px;
  }

  .legal-security__copy {
    max-width:
      580px;
  }

  .legal-standard {
    min-height:
      360px;
  }

  .legal-security-principles {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .legal-security-principle:last-child {
    grid-column:
      1 / -1;
  }


  /* =======================================================
     DOCUMENTS
     ======================================================= */

  .legal-documents__header {
    grid-template-columns:
      1fr;

    gap:
      30px;
  }

  .legal-documents__copy {
    max-width:
      560px;
  }


  /* =======================================================
     REQUEST
     ======================================================= */

  .legal-request__grid {
    grid-template-columns:
      1fr;

    gap:
      70px;
  }

  .legal-request__requirements {
    width:
      min(100%, 640px);

    margin-left:
      auto;
  }


  /* =======================================================
     DISCLOSURE
     ======================================================= */

  .legal-disclosure__grid {
    grid-template-columns:
      1fr;

    gap:
      34px;
  }


  /* =======================================================
     CTA
     ======================================================= */

  .legal-cta__main {
    flex-direction:
      column;

    align-items:
      flex-start;
  }

  .legal-cta__actions {
    width:
      min(100%, 360px);
  }

}


/* =========================================================
   03. TABLET PORTRAIT / MOBILE
   <= 768px
   ========================================================= */

@media (max-width: 768px) {

  /* =======================================================
     HERO
     ======================================================= */

  .legal-hero {
    padding:
      90px 20px 80px;
  }

  .legal-hero::before {
    width:
      125vw;

    right:
      -58%;

    top:
      -10%;
  }

  .legal-hero::after {
    background-size:
      48px 48px;
  }

  .legal-hero__top {
    flex-direction:
      column;

    gap:
      24px;
  }

  .legal-hero__main {
    gap:
      48px;

    margin:
      80px 0 70px;
  }

  .legal-hero__title {
    font-size:
      clamp(3.1rem, 14vw, 6rem);

    line-height:
      0.84;
  }

  .legal-hero__title .indent {
    padding-left:
      clamp(28px, 10vw, 70px);
  }

  .legal-hero__side {
    width:
      100%;

    margin-left:
      0;
  }

  .legal-hero__trust {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .legal-trust-item {
    min-height:
      115px;
  }


  /* =======================================================
     IDENTITY
     ======================================================= */

  .legal-identity {
    padding:
      100px 20px;
  }

  .legal-identity__grid {
    gap:
      48px;
  }

  .legal-identity__title {
    font-size:
      clamp(2.8rem, 11vw, 5rem);
  }

  .legal-fact {
    grid-template-columns:
      1fr auto;

    gap:
      12px 24px;

    min-height:
      auto;

    padding:
      26px 0;
  }

  .legal-fact__label {
    grid-column:
      1 / -1;
  }

  .legal-fact__value {
    font-size:
      clamp(1.15rem, 5vw, 1.7rem);
  }


  /* =======================================================
     BUSINESS
     ======================================================= */

  .legal-business {
    padding:
      100px 20px;
  }

  .legal-business__header {
    margin-bottom:
      60px;
  }

  .legal-business__title {
    font-size:
      clamp(2.8rem, 11vw, 5rem);
  }

  .legal-business__grid {
    grid-template-columns:
      1fr;
  }

  .legal-business-card {
    min-height:
      250px;

    padding:
      24px 22px;
  }

  .legal-business-card__body {
    left:
      22px;

    right:
      22px;

    bottom:
      22px;
  }

  .legal-business-card__title {
    font-size:
      clamp(1.7rem, 8vw, 3rem);
  }


  /* =======================================================
     SECURITY
     ======================================================= */

  .legal-security {
    padding:
      100px 20px;
  }

  .legal-security::before {
    background-size:
      48px 48px;
  }

  .legal-security::after {
    width:
      130vw;

    right:
      -58%;

    top:
      -10%;
  }

  .legal-security__header {
    margin-bottom:
      65px;
  }

  .legal-security__title {
    font-size:
      clamp(3rem, 12vw, 5.6rem);
  }

  .legal-standard-grid {
    grid-template-columns:
      1fr;
  }

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

    padding:
      28px 24px;
  }

  .legal-standard__title {
    font-size:
      clamp(2.5rem, 11vw, 5rem);
  }

  .legal-security-principles {
    grid-template-columns:
      1fr;

    margin-top:
      65px;
  }

  .legal-security-principle,
  .legal-security-principle:last-child {
    grid-column:
      1;
  }

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

    padding:
      24px 22px;
  }

  .legal-security-principle__index {
    margin-bottom:
      65px;
  }


  /* =======================================================
     DOCUMENTS
     ======================================================= */

  .legal-documents {
    padding:
      100px 20px;
  }

  .legal-documents__header {
    margin-bottom:
      60px;
  }

  .legal-documents__title {
    font-size:
      clamp(2.8rem, 11vw, 5rem);
  }

  .legal-document-list {
    grid-template-columns:
      1fr;
  }

  .legal-document {
    min-height:
      100px;
  }


  /* =======================================================
     REQUEST
     ======================================================= */

  .legal-request {
    padding:
      100px 20px;
  }

  .legal-request__grid {
    gap:
      55px;
  }

  .legal-request__title {
    font-size:
      clamp(2.8rem, 11vw, 5rem);
  }

  .legal-request__requirements {
    width:
      100%;

    margin-left:
      0;
  }

  .legal-request__actions {
    flex-direction:
      column;

    align-items:
      stretch;
  }

  .legal-request__action {
    width:
      100%;
  }


  /* =======================================================
     DISCLOSURE
     ======================================================= */

  .legal-disclosure {
    padding:
      80px 20px;
  }

  .legal-disclosure__title {
    font-size:
      clamp(2rem, 9vw, 3.5rem);
  }


  /* =======================================================
     CTA
     ======================================================= */

  .legal-cta {
    padding:
      100px 20px;
  }

  .legal-cta::before {
    width:
      130vw;

    height:
      130vw;

    right:
      -52%;

    top:
      5%;
  }

  .legal-cta__top {
    flex-direction:
      column;

    gap:
      24px;

    margin-bottom:
      80px;
  }

  .legal-cta__main {
    gap:
      48px;
  }

  .legal-cta__title {
    font-size:
      clamp(3.5rem, 15vw, 6.5rem);
  }

  .legal-cta__actions {
    width:
      100%;
  }

}


/* =========================================================
   04. SMALL MOBILE
   <= 560px
   ========================================================= */

@media (max-width: 560px) {

  /* =======================================================
     HERO
     ======================================================= */

  .legal-hero {
    padding:
      75px 16px 65px;
  }

  .legal-verified {
    padding:
      8px 12px;

    font-size:
      0.52rem;
  }

  .legal-hero__main {
    margin:
      65px 0;
  }

  .legal-hero__title {
    font-size:
      clamp(2.8rem, 14vw, 4.8rem);
  }

  .legal-hero__title .indent {
    padding-left:
      22px;
  }

  .legal-hero__side-label {
    margin-bottom:
      26px;
  }

  .legal-hero__side-copy {
    font-size:
      0.82rem;
  }

  .legal-hero__trust {
    grid-template-columns:
      1fr;
  }

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

    padding:
      18px;
  }


  /* =======================================================
     IDENTITY
     ======================================================= */

  .legal-identity {
    padding:
      80px 16px;
  }

  .legal-identity__title {
    font-size:
      clamp(2.5rem, 12vw, 4.4rem);
  }

  .legal-identity__copy {
    font-size:
      0.82rem;
  }

  .legal-fact {
    grid-template-columns:
      1fr;

    gap:
      10px;

    padding:
      24px 0;
  }

  .legal-fact__label,
  .legal-fact__value,
  .legal-fact__status {
    grid-column:
      1;
  }

  .legal-fact__value {
    font-size:
      1.15rem;
  }


  /* =======================================================
     BUSINESS
     ======================================================= */

  .legal-business {
    padding:
      80px 16px;
  }

  .legal-business__header {
    margin-bottom:
      48px;
  }

  .legal-business__title {
    font-size:
      clamp(2.5rem, 12vw, 4.4rem);
  }

  .legal-business__copy {
    font-size:
      0.82rem;
  }

  .legal-business-card {
    min-height:
      220px;

    padding:
      20px 18px;
  }

  .legal-business-card__body {
    left:
      18px;

    right:
      18px;

    bottom:
      18px;
  }

  .legal-business-card__title {
    font-size:
      clamp(1.6rem, 8vw, 2.7rem);
  }


  /* =======================================================
     SECURITY
     ======================================================= */

  .legal-security {
    padding:
      80px 16px;
  }

  .legal-security__header {
    margin-bottom:
      48px;
  }

  .legal-security__title {
    font-size:
      clamp(2.8rem, 13vw, 5rem);
  }

  .legal-security__copy {
    font-size:
      0.82rem;
  }

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

    padding:
      24px 20px;
  }

  .legal-standard__top {
    gap:
      16px;
  }

  .legal-standard__title {
    font-size:
      clamp(2.2rem, 11vw, 4.3rem);
  }

  .legal-standard__copy {
    font-size:
      0.78rem;
  }

  .legal-security-principles {
    margin-top:
      48px;
  }

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

    padding:
      20px 18px;
  }

  .legal-security-principle__index {
    margin-bottom:
      52px;
  }

  .legal-security-principle__title {
    font-size:
      clamp(1.6rem, 8vw, 2.7rem);
  }

  .legal-security-principle__copy {
    font-size:
      0.74rem;
  }


  /* =======================================================
     DOCUMENTS
     ======================================================= */

  .legal-documents {
    padding:
      80px 16px;
  }

  .legal-documents__header {
    margin-bottom:
      48px;
  }

  .legal-documents__title {
    font-size:
      clamp(2.5rem, 12vw, 4.4rem);
  }

  .legal-documents__copy {
    font-size:
      0.82rem;
  }

  .legal-document {
    grid-template-columns:
      32px
      minmax(0, 1fr);

    gap:
      16px;

    padding:
      20px 18px;
  }

  .legal-document__status {
    grid-column:
      2;
  }

  .legal-document__title {
    font-size:
      1rem;
  }


  /* =======================================================
     REQUEST
     ======================================================= */

  .legal-request {
    padding:
      80px 16px;
  }

  .legal-request__title {
    font-size:
      clamp(2.5rem, 12vw, 4.4rem);
  }

  .legal-request__copy {
    margin-top:
      28px;

    font-size:
      0.82rem;
  }

  .legal-request-requirement {
    grid-template-columns:
      30px
      minmax(0, 1fr);

    gap:
      14px;
  }

  .legal-request-requirement__text {
    font-size:
      0.76rem;
  }


  /* =======================================================
     DISCLOSURE
     ======================================================= */

  .legal-disclosure {
    padding:
      70px 16px;
  }

  .legal-disclosure__grid {
    gap:
      28px;
  }

  .legal-disclosure__title {
    font-size:
      clamp(1.9rem, 9vw, 3.2rem);
  }

  .legal-disclosure__copy {
    font-size:
      0.8rem;
  }


  /* =======================================================
     CTA
     ======================================================= */

  .legal-cta {
    padding:
      80px 16px;
  }

  .legal-cta__top {
    margin-bottom:
      65px;
  }

  .legal-cta__copy {
    font-size:
      0.78rem;
  }

  .legal-cta__title {
    font-size:
      clamp(3rem, 15vw, 5rem);
  }

  .legal-cta__button {
    min-height:
      52px;
  }

}


/* =========================================================
   05. TOUCH DEVICES
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

  .legal-business-card:hover {
    background:
      transparent;
  }

  .legal-standard:hover {
    background:
      transparent;
  }

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

    background:
      var(--bg-white);

    border-color:
      var(--line);
  }

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

    background:
      var(--abpe-blue);

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

  .legal-cta__button:hover {
    color:
      rgba(255, 255, 255, 0.8);

    background:
      transparent;

    border-color:
      rgba(255, 255, 255, 0.2);
  }

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

    background:
      var(--abpe-cyan);

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

}


/* =========================================================
   06. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .legal-business-card,
  .legal-standard,
  .legal-request__action,
  .legal-cta__button {
    transition:
      none;
  }

}


/* =========================================================
   07. LANDSCAPE MOBILE
   ========================================================= */

@media (
  max-width: 900px
) and (
  max-height: 520px
) and (
  orientation: landscape
) {

  .legal-hero {
    padding-top:
      80px;
  }

  .legal-hero__main {
    margin-top:
      65px;
  }

  .legal-hero__title {
    font-size:
      clamp(3rem, 9vw, 5rem);
  }

  .legal-security {
    min-height:
      650px;
  }

}