@import url("./pages-base.css?v=20260720a");

@layer pages {
  .footer-social li:has(> a[href*="instagram.com"]),
  .footer-social li:has(> a[href*="facebook.com"]),
  .footer-social li:has(> a[href="mailto:pfxamd@gmail.com"]) {
    display: none;
  }

  .section:has(> .shell > .index-title + .process-grid) {
    --process-bg: #0d0d0f;
    --process-panel: #141416;
    --process-rule: #38383e;
    --process-muted: #9b9891;
    position: relative;
    overflow: hidden;
    padding-block: clamp(4.75rem, 7vw, 7.5rem);
    border-block: 1px solid var(--process-rule);
    background: var(--process-bg);
    color: var(--paper);
    isolation: isolate;
  }

  .section:has(> .shell > .index-title + .process-grid)::before {
    content: "";
    position: absolute;
    z-index: -2;
    inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px);
    background-size: 4rem 4rem;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 88%);
  }

  .section:has(> .shell > .index-title + .process-grid)::after {
    content: "04";
    position: absolute;
    z-index: -1;
    right: -.055em;
    top: -.12em;
    color: transparent;
    font: 900 clamp(18rem, 31vw, 32rem)/.8 var(--display);
    font-stretch: 66%;
    letter-spacing: -.12em;
    -webkit-text-stroke: 1px rgba(242,239,231,.08);
    pointer-events: none;
  }

  .section:has(> .shell > .index-title + .process-grid) > .shell {
    position: relative;
    z-index: 1;
  }

  .section:has(> .shell > .index-title + .process-grid) .index-title {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(2rem, 6vw, 7rem);
    align-items: end;
    padding-bottom: clamp(1.6rem, 2.5vw, 2.5rem);
    border-bottom: 1px solid var(--process-rule);
  }

  .section:has(> .shell > .index-title + .process-grid) .index-title > div {
    display: grid;
    gap: .9rem;
  }

  .section:has(> .shell > .index-title + .process-grid) .index-title .eyebrow {
    color: var(--red);
  }

  .section:has(> .shell > .index-title + .process-grid) .index-title h2 {
    max-width: none;
    font-size: clamp(4.6rem, 8.8vw, 9.4rem);
    line-height: .72;
    letter-spacing: -.075em;
  }

  .section:has(> .shell > .index-title + .process-grid) .index-title .index {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    align-self: start;
    padding: .72rem .9rem;
    border: 1px solid var(--process-rule);
    color: var(--paper);
    font-size: .68rem;
    line-height: 1;
  }

  .section:has(> .shell > .index-title + .process-grid) .index-title .index::before {
    content: "";
    width: .52rem;
    height: .52rem;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 0 .28rem rgba(225,38,49,.12);
  }

  .section:has(> .shell > .index-title + .process-grid) .process-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: clamp(2.25rem, 4vw, 4rem);
    border: 1px solid var(--process-rule);
    background: #09090b;
    counter-reset: process-step;
  }

  .section:has(> .shell > .index-title + .process-grid) .process-grid::before {
    content: "";
    position: absolute;
    z-index: 5;
    top: 5.35rem;
    right: 2rem;
    left: 2rem;
    height: 1px;
    background: linear-gradient(90deg, var(--red), #f3c83f 34%, #3157ff 68%, #00a9b8);
    opacity: .78;
    pointer-events: none;
  }

  .section:has(> .shell > .index-title + .process-grid) .process-card {
    --step-accent: var(--red);
    position: relative;
    min-height: clamp(25rem, 31vw, 31rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 3rem;
    overflow: hidden;
    padding: 1.55rem;
    border: 0;
    border-right: 1px solid var(--process-rule);
    background:
      linear-gradient(var(--step-accent), var(--step-accent)) 0 0 / 100% .28rem no-repeat,
      var(--process-panel);
    color: var(--paper);
    isolation: isolate;
    counter-increment: process-step;
    transition: transform 360ms var(--ease), background-color 260ms var(--ease), box-shadow 360ms var(--ease);
  }

  .section:has(> .shell > .index-title + .process-grid) .process-card:nth-child(2) { --step-accent: #f3c83f; }
  .section:has(> .shell > .index-title + .process-grid) .process-card:nth-child(3) { --step-accent: #3157ff; }
  .section:has(> .shell > .index-title + .process-grid) .process-card:nth-child(4) { --step-accent: #00a9b8; }
  .section:has(> .shell > .index-title + .process-grid) .process-card:last-child { border-right: 0; }

  .section:has(> .shell > .index-title + .process-grid) .process-card::before {
    content: counter(process-step, decimal-leading-zero);
    position: absolute;
    z-index: -1;
    right: -.06em;
    bottom: -.18em;
    color: transparent;
    font: 900 clamp(10rem, 15vw, 15rem)/.75 var(--display);
    font-stretch: 66%;
    letter-spacing: -.1em;
    -webkit-text-stroke: 1px color-mix(in srgb, var(--step-accent) 35%, transparent);
    opacity: .62;
    transition: color 320ms var(--ease), opacity 320ms var(--ease), transform 420ms var(--ease);
  }

  .section:has(> .shell > .index-title + .process-grid) .process-card::after {
    content: "";
    position: absolute;
    z-index: 6;
    top: 4.95rem;
    left: 1.55rem;
    width: .82rem;
    height: .82rem;
    border: .19rem solid var(--process-panel);
    border-radius: 50%;
    background: var(--step-accent);
    box-shadow: 0 0 0 1px var(--step-accent);
    transition: transform 300ms var(--ease), box-shadow 300ms var(--ease);
  }

  .section:has(> .shell > .index-title + .process-grid) .process-card .number {
    position: relative;
    z-index: 7;
    color: var(--step-accent);
    font-size: .67rem;
    font-weight: 780;
    letter-spacing: .15em;
  }

  .section:has(> .shell > .index-title + .process-grid) .process-card > div {
    position: relative;
    z-index: 3;
    padding-top: 4rem;
  }

  .section:has(> .shell > .index-title + .process-grid) .process-card h3 {
    max-width: none;
    color: var(--paper);
    font-size: clamp(2.6rem, 3.8vw, 4.2rem);
    line-height: .78;
    letter-spacing: -.065em;
  }

  .section:has(> .shell > .index-title + .process-grid) .process-card p {
    max-width: 24ch;
    margin-top: 1rem;
    color: var(--process-muted);
    font-size: clamp(.88rem, 1vw, 1.02rem);
    line-height: 1.55;
  }

  @media (hover: hover) and (pointer: fine) {
    .section:has(> .shell > .index-title + .process-grid) .process-card:hover {
      z-index: 8;
      background-color: #19191d;
      box-shadow: 0 1rem 0 -.45rem var(--step-accent), 0 1.4rem 2.8rem rgba(0,0,0,.32);
      transform: translateY(-.7rem);
    }

    .section:has(> .shell > .index-title + .process-grid) .process-card:hover::before {
      color: color-mix(in srgb, var(--step-accent) 11%, transparent);
      opacity: 1;
      transform: translate(-.04em, -.04em);
    }

    .section:has(> .shell > .index-title + .process-grid) .process-card:hover::after {
      transform: scale(1.2);
      box-shadow: 0 0 0 1px var(--step-accent), 0 0 1.15rem color-mix(in srgb, var(--step-accent) 62%, transparent);
    }
  }

  @media (max-width: 68rem) {
    .section:has(> .shell > .index-title + .process-grid) .process-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .section:has(> .shell > .index-title + .process-grid) .process-grid::before {
      display: none;
    }

    .section:has(> .shell > .index-title + .process-grid) .process-card {
      min-height: 23rem;
      border-bottom: 1px solid var(--process-rule);
    }

    .section:has(> .shell > .index-title + .process-grid) .process-card:nth-child(2) { border-right: 0; }
    .section:has(> .shell > .index-title + .process-grid) .process-card:nth-child(n+3) { border-bottom: 0; }

    .section:has(> .shell > .index-title + .process-grid) .process-card::after {
      top: 4.35rem;
    }

    .section:has(> .shell > .index-title + .process-grid) .process-card > div {
      padding-top: 2.75rem;
    }
  }

  @media (max-width: 38rem) {
    .section:has(> .shell > .index-title + .process-grid) {
      padding-block: 3.75rem;
    }

    .section:has(> .shell > .index-title + .process-grid)::after {
      top: .1em;
      font-size: 14rem;
    }

    .section:has(> .shell > .index-title + .process-grid) .index-title {
      grid-template-columns: 1fr;
      gap: 1.4rem;
      align-items: start;
    }

    .section:has(> .shell > .index-title + .process-grid) .index-title h2 {
      max-width: 8ch;
      font-size: clamp(4rem, 18vw, 6rem);
    }

    .section:has(> .shell > .index-title + .process-grid) .index-title .index {
      justify-self: start;
    }

    .section:has(> .shell > .index-title + .process-grid) .process-grid {
      grid-template-columns: 1fr;
      margin-top: 2rem;
    }

    .section:has(> .shell > .index-title + .process-grid) .process-grid::before {
      display: block;
      top: 2rem;
      bottom: 2rem;
      left: 2.15rem;
      width: 1px;
      height: auto;
      background: linear-gradient(var(--red), #f3c83f 34%, #3157ff 68%, #00a9b8);
    }

    .section:has(> .shell > .index-title + .process-grid) .process-card,
    .section:has(> .shell > .index-title + .process-grid) .process-card:nth-child(2),
    .section:has(> .shell > .index-title + .process-grid) .process-card:nth-child(n+3) {
      min-height: 17rem;
      padding: 1.35rem 1.25rem 1.35rem 4.6rem;
      border-right: 0;
      border-bottom: 1px solid var(--process-rule);
    }

    .section:has(> .shell > .index-title + .process-grid) .process-card:last-child {
      border-bottom: 0;
    }

    .section:has(> .shell > .index-title + .process-grid) .process-card::after {
      top: 1.55rem;
      left: 1.72rem;
    }

    .section:has(> .shell > .index-title + .process-grid) .process-card::before {
      font-size: 10rem;
    }

    .section:has(> .shell > .index-title + .process-grid) .process-card > div {
      padding-top: 1rem;
    }

    .section:has(> .shell > .index-title + .process-grid) .process-card h3 {
      font-size: clamp(2.8rem, 14vw, 4rem);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .section:has(> .shell > .index-title + .process-grid) .process-card,
    .section:has(> .shell > .index-title + .process-grid) .process-card::before,
    .section:has(> .shell > .index-title + .process-grid) .process-card::after {
      transition: none;
    }
  }
}