/**
 * /assets/css/pages/join-us.css
 *
 * Join-page-specific styles only.
 * Shared tokens, typography, sections, buttons and the standardized hero
 * live in core.css/components.css.
 */

.page-join-us {
  --hero-min-height: 82vh;
  --hero-accent-x: 75%;
  --hero-accent-y: 32%;
  --hero-accent-alpha: .24;
}

.join-us-hero-art {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 75% 32%, rgba(189,0,0,.20), transparent 31%),
    radial-gradient(circle at 20% 80%, rgba(189,0,0,.07), transparent 28%),
    linear-gradient(120deg, #070707 0%, #111 52%, #070707 100%);
}

/* =====================================================
       WHO WE ARE
    ====================================================== */

    .who-layout {
      display: grid;

      grid-template-columns:
        minmax(0, 1.08fr)
        minmax(390px, .92fr);

      gap: 75px;

      align-items: start;
    }

    .statement-panel {
      border:
        1px solid
        var(--border);

      background: #0d0d0d;
    }

    .statement-item {
      padding:
        27px
        28px;

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

    .statement-item:last-child {
      border-bottom: 0;
    }

    .statement-label {
      color: var(--red-bright);

      font-size: .55rem;
      font-weight: 800;

      letter-spacing: .13em;

      text-transform: uppercase;
    }

    .statement-title {
      margin-top: 8px;

      color: #fff;

      font-size: .95rem;
      font-weight: 800;
    }

    .statement-copy {
      margin-top: 8px;

      color:
        rgba(255,255,255,.37);

      font-size: .74rem;

      line-height: 1.67;
    }


    /* =====================================================
       BENEFITS
    ====================================================== */

    .benefit-grid {
      display: grid;

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

      gap: 1px;

      margin-top: 50px;

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

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

    .benefit-card {
      min-height: 270px;

      padding: 29px;

      background: #0d0d0d;
    }

    .benefit-icon {
      width: 43px;
      height: 43px;

      display: flex;
      align-items: center;
      justify-content: center;

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

      color: var(--red-bright);

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

    .benefit-title {
      margin-top: 23px;

      color: #fff;

      font-size: .90rem;
      font-weight: 800;
    }

    .benefit-copy {
      margin-top: 9px;

      color:
        rgba(255,255,255,.35);

      font-size: .73rem;

      line-height: 1.66;
    }


    /* =====================================================
       MEMBERSHIP MEANS
    ====================================================== */

    .membership-layout {
      display: grid;

      grid-template-columns:
        minmax(340px, .72fr)
        minmax(0, 1.28fr);

      gap: 70px;

      align-items: start;

      margin-top: 48px;
    }

    .membership-intro {
      position: sticky;
      top: 110px;
    }

    .membership-intro-title {
      color: #fff;

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

      font-weight: 900;

      line-height: 1;

      letter-spacing: -.04em;

      text-transform: uppercase;
    }

    .membership-intro-copy {
      margin-top: 18px;

      color:
        rgba(255,255,255,.40);

      font-size: .80rem;

      line-height: 1.72;
    }

    .membership-list {
      border-top:
        1px solid
        var(--border);

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

    .membership-row {
      display: grid;

      grid-template-columns:
        52px
        minmax(190px, .55fr)
        minmax(0, 1fr);

      gap: 18px;

      align-items: center;

      min-height: 95px;

      padding:
        14px
        6px;

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

    .membership-row:last-child {
      border-bottom: 0;
    }

    .membership-row-icon {
      width: 44px;
      height: 44px;

      display: flex;
      align-items: center;
      justify-content: center;

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

      color: var(--red-bright);

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

    .membership-row-title {
      color: #fff;

      font-size: .76rem;
      font-weight: 800;
    }

    .membership-row-subtitle {
      margin-top: 4px;

      color: var(--red-bright);

      font-size: .55rem;
      font-weight: 800;

      letter-spacing: .08em;

      text-transform: uppercase;
    }

    .membership-row-copy {
      color:
        rgba(255,255,255,.35);

      font-size: .71rem;

      line-height: 1.62;
    }


    /* =====================================================
       COMMUNITY STANDARDS
    ====================================================== */

    .standards-layout {
      display: grid;

      grid-template-columns:
        minmax(0, .72fr)
        minmax(0, 1.28fr);

      gap: 70px;

      align-items: start;

      margin-top: 50px;
    }

    .standards-callout {
      padding-left: 28px;

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

    .standards-callout-label {
      color: var(--red-bright);

      font-size: .56rem;
      font-weight: 800;

      letter-spacing: .14em;

      text-transform: uppercase;
    }

    .standards-callout-title {
      margin-top: 12px;

      color: #fff;

      font-size:
        clamp(
          1.6rem,
          2.7vw,
          2.6rem
        );

      font-weight: 900;

      line-height: 1;

      letter-spacing: -.035em;

      text-transform: uppercase;
    }

    .standards-callout-copy {
      margin-top: 17px;

      color:
        rgba(255,255,255,.39);

      font-size: .77rem;

      line-height: 1.7;
    }

    .standards-list {
      border:
        1px solid
        var(--border);

      background: #0d0d0d;
    }

    .standard-item {
      display: grid;

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

      gap: 16px;

      padding:
        24px
        26px;

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

    .standard-item:last-child {
      border-bottom: 0;
    }

    .standard-icon {
      width: 38px;
      height: 38px;

      display: flex;
      align-items: center;
      justify-content: center;

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

      color: var(--red-bright);

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

    .standard-title {
      color: #fff;

      font-size: .84rem;
      font-weight: 800;
    }

    .standard-copy {
      margin-top: 6px;

      color:
        rgba(255,255,255,.35);

      font-size: .72rem;

      line-height: 1.66;
    }


    /* =====================================================
       JOIN PROCESS
    ====================================================== */

    .process-grid {
      display: grid;

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

      gap: 1px;

      margin-top: 50px;

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

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

    .process-step {
      position: relative;

      min-height: 300px;

      padding:
        29px
        28px;

      background: #0d0d0d;
    }

    .process-number {
      color:
        rgba(255,255,255,.14);

      font-size: 2.5rem;
      font-weight: 900;

      line-height: 1;
    }

    .process-icon {
      margin-top: 25px;

      color: var(--red-bright);

      font-size: 1rem;
    }

    .process-title {
      margin-top: 18px;

      color: #fff;

      font-size: .88rem;
      font-weight: 800;
    }

    .process-copy {
      margin-top: 9px;

      color:
        rgba(255,255,255,.35);

      font-size: .72rem;

      line-height: 1.66;
    }


    /* =====================================================
       ORIENTATION
    ====================================================== */

    .orientation-panel {
      display: grid;

      grid-template-columns:
        minmax(0, 1.1fr)
        minmax(320px, .9fr);

      gap: 60px;

      align-items: center;

      padding:
        50px;

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

      background:
        radial-gradient(
          circle at 85% 35%,
          rgba(189,0,0,.12),
          transparent 35%
        ),
        #0d0d0d;
    }

    .orientation-label {
      color: var(--red-bright);

      font-size: .57rem;
      font-weight: 800;

      letter-spacing: .16em;

      text-transform: uppercase;
    }

    .orientation-title {
      margin-top: 12px;

      color: #fff;

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

      font-weight: 900;

      line-height: .94;

      letter-spacing: -.045em;

      text-transform: uppercase;
    }

    .orientation-copy {
      max-width: 720px;

      margin-top: 19px;

      color:
        rgba(255,255,255,.40);

      font-size: .80rem;

      line-height: 1.72;
    }

    .orientation-actions {
      display: flex;
      flex-direction: column;

      gap: 9px;
    }

    .orientation-actions .site-btn {
      width: 100%;
      min-height: 51px;
    }


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

    .final-cta {
      position: relative;

      overflow: hidden;

      padding:
        100px
        0;

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

      background:
        radial-gradient(
          circle at 78% 50%,
          rgba(189,0,0,.18),
          transparent 32%
        ),
        #090909;
    }

    .final-cta-grid {
      display: grid;

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

      gap: 55px;

      align-items: center;
    }

    .final-cta-title {
      margin: 0;

      color: #fff;

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

      font-weight: 900;

      line-height: .92;

      letter-spacing: -.05em;

      text-transform: uppercase;
    }

    .final-cta-copy {
      max-width: 720px;

      margin-top: 17px;

      color:
        rgba(255,255,255,.40);

      font-size: .80rem;

      line-height: 1.7;
    }

    .final-cta-actions {
      display: flex;
      flex-wrap: wrap;

      gap: 9px;
    }


    /* =====================================================
       RESPONSIVE
    ====================================================== */

    @media (max-width: 1199.98px) {

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

    }


    @media (max-width: 991.98px) {
      .who-layout,
      .membership-layout,
      .standards-layout,
      .orientation-panel {
        grid-template-columns: 1fr;
      }
.membership-intro {
        position: static;
      }

      .final-cta-grid {
        grid-template-columns: 1fr;
      }

    }


    @media (max-width: 767.98px) {

      .benefit-grid,
      .process-grid {
        grid-template-columns: 1fr;
      }

      .membership-row {
        grid-template-columns:
          46px
          minmax(0, 1fr);

        gap: 12px;
      }

      .membership-row-copy {
        grid-column: 2;
      }

      .orientation-panel {
        padding: 30px;
      }

      .final-cta-actions {
        flex-direction: column;
      }

    }