/* ================================================================
   COMPONENTS — Reusable UI pieces
================================================================ */

@layer components {

  /* ── Utilities ──────────────────────────────────────────────── */
  .wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 40px;

    @media (max-width: 900px)  { padding: 0 28px; }
    @media (max-width: 640px)  { padding: 0 20px; }
  }

  .sec {
    padding: var(--space-2xl) 0;
    position: relative;

    @media (max-width: 640px) { padding: 80px 0; }
  }

  .sec-alt {
    background: var(--bg-alt);
  }

  /* ── Pill Badge ────────────────────────────────────────────── */
  .pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold);
    border: 1px solid var(--line-g);
    border-radius: 100px;
    padding: 6px 16px;

    &::before {
      content: '';
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--gold);
      flex-shrink: 0;
      animation: blink 2.3s ease infinite;
    }
  }

  @keyframes blink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .25; transform: scale(.5); }
  }

  /* ── Rule / Divider ──────────────────────────────────────── */
  .rule {
    width: 36px;
    height: 1px;
    background: var(--gold-mid);
    margin: 18px 0;
  }

  /* ── Section Headings ────────────────────────────────────── */
  .h2 {
    font-family: var(--serif);
    font-size: clamp(34px, 3.8vw, 52px);
    font-weight: 300;
    line-height: 1.08;
    letter-spacing: -.012em;
    color: var(--t-head);
    margin: var(--space-s) 0 14px;

    & em {
      font-style: italic;
      color: var(--gold);
    }
  }

  .body-t {
    font-size: 15px;
    color: var(--t-body);
    line-height: 1.9;
  }

  /* ── Scroll Reveal ─────────────────────────────────────────── */
  .rev {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .85s var(--ease), transform .85s var(--ease);

    &.on {
      opacity: 1;
      transform: none;
    }
  }

  .d1 { transition-delay: .08s; }
  .d2 { transition-delay: .16s; }
  .d3 { transition-delay: .24s; }
  .d4 { transition-delay: .32s; }
  .d5 { transition-delay: .40s; }

  /* ── Buttons ─────────────────────────────────────────────── */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--gold);
    color: #FAF5ED;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    border: none;
    padding: 14px 28px;
    border-radius: 100px;
    min-height: 44px; /* WCAG 2.2 target size */
    transition: background .24s, transform .24s var(--spring), box-shadow .24s;
    cursor: none;

    &:hover {
      background: var(--gold-mid);
      transform: translateY(-3px);
      box-shadow: 0 14px 38px rgba(138, 102, 32, .26);
    }
  }

  .btn-ghost {
    background: transparent;
    color: var(--t-muted);
    border: none;
    border-bottom: 1px solid rgba(28, 18, 4, .16);
    border-radius: 0;
    padding: 2px 0;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
    min-height: 44px;

    &:hover {
      color: var(--t-head);
      border-color: rgba(28, 18, 4, .45);
      transform: none;
      box-shadow: none;
      background: transparent;
    }
  }

  /* ── Section Deep Links ─────────────────────────────────── */
  .sec-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 44px;
    flex-wrap: wrap;
  }

  .sec-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .03em;
    color: var(--t-body);
    padding: 11px 22px;
    border: 1px solid var(--line);
    border-radius: 100px;
    min-height: 44px;
    transition: color .2s, border-color .25s, background .25s, transform .25s var(--spring);

    & svg {
      width: 12px;
      height: 12px;
      stroke: currentColor;
      stroke-width: 1.8;
      fill: none;
      transition: transform .25s var(--spring);
    }

    &:hover {
      color: var(--gold);
      border-color: var(--line-g);
      background: var(--card);
      transform: translateY(-2px);

      & svg { transform: translateX(3px); }
    }
  }

  /* ── Credential Cards ────────────────────────────────────── */
  .cred {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 22px 26px;
    position: relative;
    overflow: hidden;
    transition: transform .3s var(--ease), box-shadow .3s;

    &:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 48px rgba(28, 18, 4, .09);
    }

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--gold-lt), transparent);
      opacity: .55;
    }
  }

  .cred-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .cred-n {
    font-family: var(--serif);
    font-size: 44px;
    font-weight: 300;
    color: var(--t-head);
    line-height: 1;
    margin-bottom: 4px;

    & sup {
      font-size: 22px;
      color: var(--gold);
      vertical-align: super;
    }
  }

  .cred-label {
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--t-muted);
    line-height: 1.4;
  }

  /* GEO card variant */
  .cred--geo {
    & .cred-n {
      font-size: 32px;
      letter-spacing: -.01em;

      & sup { font-size: 14px; }
    }

    & .cred-label {
      margin-top: 6px;
      font-size: 12px;
      letter-spacing: .03em;
      text-transform: none;
      line-height: 1.6;
    }
  }

  /* MWBE credential card */
  .cred-mwbe {
    background: linear-gradient(135deg, rgba(138, 102, 32, .08) 0%, var(--card) 60%);
    border-color: var(--line-g);
    display: flex;
    align-items: center;
    gap: var(--space-s);
  }

  .mwbe-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .mwbe-body {
    & p:first-child {
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 3px;
    }

    & p:last-child {
      font-size: 12.5px;
      color: var(--t-body);
      line-height: 1.55;
    }
  }

  /* ── Big Numbers ─────────────────────────────────────────── */
  .big-n {
    font-family: var(--serif);
    font-size: clamp(60px, 7vw, 92px);
    font-weight: 300;
    color: var(--t-head);
    line-height: .9;
    letter-spacing: -.03em;
    margin-bottom: 6px;

    & em {
      font-style: italic;
      color: var(--gold);
    }
  }

  /* ── Stat List ───────────────────────────────────────────── */
  .stat-list {
    display: flex;
    flex-direction: column;
  }

  .stat-item {
    padding: var(--space-s) 0;
    border-bottom: 1px solid var(--line);

    &:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }
  }

  .stat-n {
    font-family: var(--serif);
    font-size: 34px;
    font-weight: 300;
    color: var(--t-head);
    line-height: 1;

    & sup {
      font-size: 17px;
      color: var(--gold);
      vertical-align: super;
    }
  }

  .stat-label {
    font-size: 11px;
    color: var(--t-muted);
    letter-spacing: .04em;
    margin-top: 2px;
  }

  /* ── MWBE Certification Badge ────────────────────────────── */
  .mwbe-cert {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 18px;
    padding: 9px 16px;
    background: var(--bg-alt);
    border: 1px solid var(--line-g);
    border-radius: 100px;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gold);
  }

  /* ── Audit Badge (Contact Section) ───────────────────────── */
  .audit-badge {
    margin-top: 18px;
    padding: 16px 20px;
    background: var(--bg);
    border: 1px solid var(--line-g);
    border-radius: var(--r);
    display: flex;
    align-items: center;
    gap: 13px;

    & p:first-child {
      font-size: 13px;
      color: var(--t-head);
      font-weight: 400;
    }

    & p:last-child {
      font-size: 11px;
      color: var(--t-muted);
    }
  }

  .audit-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(138, 102, 32, .10);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

}