/* =========================================================
   ATHAY DESIGN — HOW IT WORKS
   ========================================================= */


/* =========================================================
   1. SHARED PAGE WIDTH
   ========================================================= */

.process-page-wrap {
  width: 100%;
  max-width: var(--site-width);
  margin: 0 auto;
  padding: var(--section-space) var(--page-padding);
  box-sizing: border-box;
}


/* =========================================================
   2. HERO
   ========================================================= */

.process-hero {
  position: relative;
  overflow: hidden;
  background: var(--page);
}

.process-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 12% 8%,
      rgba(var(--cobalt-rgb), 0.10),
      transparent 35%
    ),
    radial-gradient(
      circle at 88% 88%,
      rgba(233, 238, 255, 0.95),
      transparent 38%
    );
}

.process-hero > * {
  position: relative;
  z-index: 1;
}

.process-hero .process-page-wrap {
  padding-top: clamp(4rem, 7vw, 6.25rem);
  padding-bottom: clamp(4rem, 7vw, 6.25rem);
}

.process-hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;

  max-width: 940px;
  margin: 0 auto;

  text-align: center;
}

.process-hero-content > .eyebrow {
  margin-bottom: 1rem;
}

.process-hero-content h1 {
  max-width: 900px;
  margin: 0 auto 1.4rem;

  color: var(--ink);

  font-size: clamp(2.5rem, 4.25vw, 3.85rem);
}

.process-hero-intro {
  max-width: 740px;
  margin: 0 auto;

  color: var(--text);

  font-size: clamp(1.05rem, 1.7vw, 1.2rem);
  line-height: 1.65;

  text-align: center;
}

.process-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;

  gap: 12px;
  margin-top: 2rem;
}


/* =========================================================
   3. FOUR STEP OVERVIEW
   ========================================================= */

.process-overview {
  overflow: hidden;
  background: var(--ink);
}

.process-overview .process-page-wrap {
  padding-top: clamp(4rem, 7vw, 5.5rem);
  padding-bottom: clamp(4rem, 7vw, 5.5rem);
}

.process-overview-heading {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.process-overview-heading .eyebrow {
  color: var(--dark-accent);
}

.process-overview-heading h2 {
  margin: 0 0 1rem;
  color: var(--white);
}

.process-overview-heading > p:not(.eyebrow) {
  max-width: 650px;
  margin: 0 auto;

  color: var(--dark-text-secondary);
}


/* =========================================================
   4. PROCESS FLOW
   ========================================================= */

.process-flow {
  display: grid;

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

  align-items: stretch;

  gap: 12px;

  width: 100%;
  margin-top: 3.5rem;
}


/* ---------------------------------------------------------
   Process cards
   --------------------------------------------------------- */

.process-flow-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  min-width: 0;
  min-height: 220px;

  padding: 28px;

  border: 1px solid rgba(var(--cobalt-rgb), 0.28);
  border-radius: var(--radius-large);

  background:
    linear-gradient(
      145deg,
      rgba(var(--cobalt-rgb), 0.20) 0%,
      rgba(var(--cobalt-rgb), 0.08) 50%,
      var(--dark-surface) 100%
    );

  box-shadow:
    inset 0 1px 0 var(--dark-border-soft),
    0 18px 40px rgba(3, 2, 16, 0.12);
}


/* ---------------------------------------------------------
   Process icons
   --------------------------------------------------------- */

.process-flow-icon {
  display: flex;
  align-items: center;
  justify-content: flex-start;

  width: 48px;
  height: 48px;

  min-width: 48px;
  min-height: 48px;

  margin: 0 0 20px;

  flex: 0 0 48px;
}

.process-flow-icon img {
  display: block;

  width: 48px;
  height: 48px;

  object-fit: contain;

  /*
    Converts the SVG icon to the dark-surface
    accent colour: #AFC0FF.
  */
  filter:
    brightness(0)
    saturate(100%)
    invert(79%)
    sepia(16%)
    saturate(1069%)
    hue-rotate(193deg)
    brightness(101%)
    contrast(101%);
}


/* ---------------------------------------------------------
   Process copy
   --------------------------------------------------------- */

.process-flow-copy strong {
  display: block;

  margin: 0 0 0.55rem;

  color: var(--white);

  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;

  letter-spacing: -0.025em;
}

.process-flow-copy span {
  display: block;

  margin: 0;

  color: var(--dark-text-secondary);

  font-size: 0.88rem;
  line-height: 1.55;
}


/* ---------------------------------------------------------
   Process arrows
   --------------------------------------------------------- */

.process-flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;

  align-self: center;

  width: 34px;
  height: 34px;

  border: 1px solid rgba(var(--cobalt-rgb), 0.48);
  border-radius: 50%;

  background: rgba(var(--cobalt-rgb), 0.16);

  color: var(--dark-text);

  font-size: 1rem;
  line-height: 1;
}


/* =========================================================
   5. STICKY PROCESS NAVIGATION
   ========================================================= */

.process-contents {
  position: sticky;
  top: var(--header-height);

  z-index: 1100;

  width: 100%;

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

  border-top: 1px solid rgba(11, 11, 50, 0.05);
  border-bottom: 1px solid var(--border);

  box-shadow:
    0 6px 20px rgba(11, 11, 50, 0.035);

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

.process-contents-wrap {
  display: flex;
  align-items: center;
  justify-content: center;

  width:
    min(
      var(--site-width),
      calc(100% - (var(--page-padding) * 2))
    );

  margin: 0 auto;
}

.process-contents-links {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 2.25rem;

  width: 100%;

  overflow-x: auto;
  overflow-y: hidden;

  scrollbar-width: none;
}

.process-contents-links::-webkit-scrollbar {
  display: none;
}

.process-contents-link {
  position: relative;

  flex: 0 0 auto;

  padding: 1.15rem 0;

  color: var(--text-muted);

  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.4;

  white-space: nowrap;

  transition: color 180ms ease;
}

.process-contents-link::after {
  content: "";

  position: absolute;

  right: 0;
  bottom: 0;
  left: 0;

  height: 2px;

  background: var(--cobalt);

  transform: scaleX(0);
  transform-origin: center;

  transition: transform 220ms ease;
}

.process-contents-link:hover,
.process-contents-link.active {
  color: var(--cobalt);
}

.process-contents-link.active::after {
  transform: scaleX(1);
}


/* =========================================================
   6. SCROLL TARGETS
   ========================================================= */

.process-scroll-section {
  scroll-margin-top:
    calc(
      var(--header-height) +
      68px +
      24px
    );
}


/* =========================================================
   7. INTRO
   ========================================================= */

.process-intro {
  overflow: hidden;
  background: var(--white);
}

.process-intro-grid {
  display: grid;

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

  gap: clamp(3rem, 7vw, 6rem);

  align-items: start;
}

.process-intro-grid > div {
  min-width: 0;
}

.process-intro-grid h2 {
  max-width: 540px;
  margin: 0 0 1rem;
}

.process-intro-copy p {
  margin: 0 0 1.25rem;
}

.process-intro-copy p:last-child {
  margin-bottom: 0;
}

.process-lead {
  color: var(--ink);

  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.55;

  letter-spacing: -0.02em;
}


/* =========================================================
   8. DETAIL SECTIONS
   ========================================================= */

.process-detail {
  overflow: hidden;

  background: var(--white);

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

.process-detail-soft {
  background: var(--page);
}

.process-detail-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(0, 1.1fr);

  gap: clamp(3rem, 8vw, 7rem);

  align-items: start;
}

.process-detail-heading,
.process-detail-copy {
  min-width: 0;
}

.process-number {
  display: block;

  margin-bottom: 2rem;

  color: var(--cobalt);

  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5vw, 4.5rem);
  font-weight: 800;
  line-height: 0.9;

  letter-spacing: -0.06em;

  opacity: 0.18;
}

.process-detail-heading h2 {
  max-width: 500px;
  margin: 0;
}

.process-detail-copy p {
  max-width: 650px;
  margin: 0 0 1.25rem;
}

.process-detail-copy p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   9. WHAT I NEED
   ========================================================= */

.process-needs {
  overflow: hidden;
  background: var(--pale-blue);
}


/* =========================================================
   10. CTA
   ========================================================= */

.process-cta {
  position: relative;
  overflow: hidden;

  background: var(--ink);
}

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

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 15% 10%,
      rgba(var(--cobalt-rgb), 0.25),
      transparent 35%
    ),
    radial-gradient(
      circle at 90% 90%,
      rgba(175, 192, 255, 0.10),
      transparent 40%
    );
}

.process-cta .process-page-wrap {
  position: relative;

  z-index: 1;

  padding-top: clamp(4rem, 7vw, 6rem);
  padding-bottom: clamp(4rem, 7vw, 6rem);
}

.process-cta-content {
  max-width: 820px;
  margin: 0 auto;

  text-align: center;
}

.process-cta-content .eyebrow {
  color: var(--dark-accent);
}

.process-cta-content h2 {
  color: var(--white);
}

.process-cta-content > p:not(.eyebrow) {
  max-width: 650px;
  margin: 0 auto;

  color: var(--dark-text-secondary);
}


/* =========================================================
   11. TABLET
   ========================================================= */

@media (max-width: 1024px) {

  .process-contents-link {
    font-size: 0.8rem;
  }

  .process-flow {
    grid-template-columns:
      minmax(0, 1fr)
      auto
      minmax(0, 1fr);

    gap: 12px;
  }

  .process-flow-card {
    min-height: 210px;
  }

  .process-flow-card:nth-of-type(3) {
    grid-column: 1;
  }

}


/* =========================================================
   12. MOBILE
   ========================================================= */

@media (max-width: 767px) {


  /* -------------------------------------------------------
     Hero
     ------------------------------------------------------- */

  .process-hero .process-page-wrap {
    padding-top: 3.75rem;
    padding-bottom: 3.75rem;
  }

  .process-hero-content {
    align-items: flex-start;
    text-align: left;
  }

  .process-hero-content > .eyebrow {
    text-align: left;
  }

  .process-hero-content h1 {
    max-width: 100%;

    margin-left: 0;

    font-size:
      clamp(2.25rem, 10vw, 2.9rem);

    text-align: left;
  }

  .process-hero-intro {
    max-width: 100%;

    margin: 0;

    text-align: left;
  }

  .process-hero-actions {
    justify-content: flex-start;

    margin-top: 1.5rem;
  }


  /* -------------------------------------------------------
     Process overview
     ------------------------------------------------------- */

  .process-overview-heading {
    margin: 0;

    text-align: left;
  }

  .process-overview-heading > p:not(.eyebrow) {
    margin-left: 0;
  }

  .process-flow {
    display: flex;
    flex-direction: column;

    gap: 0;

    margin-top: 2.75rem;
  }

  .process-flow-card {
    align-items: center;

    min-height: 0;

    padding: 28px 24px;

    text-align: center;
  }

  .process-flow-icon {
    width: 48px;
    height: 48px;

    min-width: 48px;
    min-height: 48px;

    margin: 0 auto 18px;

    flex-basis: 48px;
  }

  .process-flow-icon img {
    width: 48px;
    height: 48px;
  }

  .process-flow-arrow {
    width: 34px;
    height: 34px;

    margin: 8px auto;

    transform: rotate(90deg);
  }


  /* -------------------------------------------------------
     Sticky process navigation
     ------------------------------------------------------- */

  .process-contents-wrap {
    width: 100%;
  }

  .process-contents-links {
    justify-content: flex-start;

    gap: 1.4rem;

    padding:
      0
      var(--page-padding);
  }

  .process-contents-link {
    padding: 1rem 0;
  }

  .process-scroll-section {
    scroll-margin-top:
      calc(
        var(--header-height) +
        60px +
        18px
      );
  }


  /* -------------------------------------------------------
     Intro
     ------------------------------------------------------- */

  .process-intro-grid {
    grid-template-columns: 1fr;

    gap: 2.25rem;
  }


  /* -------------------------------------------------------
     Details
     ------------------------------------------------------- */

  .process-detail-grid {
    grid-template-columns: 1fr;

    gap: 2rem;
  }

  .process-number {
    margin-bottom: 1.5rem;

    font-size: 3rem;
  }


  /* -------------------------------------------------------
     CTA
     ------------------------------------------------------- */

  .process-cta .process-page-wrap {
    padding-top: 3.75rem;
    padding-bottom: 3.75rem;
  }

  .process-cta-content {
    text-align: left;
  }

  .process-cta-content > p:not(.eyebrow) {
    margin-left: 0;
  }

  .process-cta-content .process-hero-actions {
    justify-content: flex-start;
  }

}


/* =========================================================
   13. REDUCED MOTION
   ========================================================= */

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

  .process-contents-link,
  .process-contents-link::after {
    transition: none;
  }

}