/* ==========================================================================
   HOMEPAGE
   Ported verbatim from the scoped <style> block of src/pages/index.astro.

   Enqueued ONLY on this page. That is load-bearing, not an optimisation:
   several class names here (.project, .explain, .benefit, .step, .cta,
   .prose, .faq-aside) are reused across pages with conflicting rules, and
   Astro's per-file scoping is what kept them apart. Keeping each page's
   rules in a file that loads on that page alone reproduces that isolation.
   Do not merge these into one stylesheet.
   ========================================================================== */

  /* ==========================================================================
     RUN 1 — graphite: hero and problems as one continuous field
     ========================================================================== */
  .run--graphite {
    background: var(--graphite-900);
    color: var(--stone-100);
    /* Deep foot so the explain panel can be lifted into it. */
    padding-bottom: clamp(7rem, 5rem + 9vw, 12rem);
  }

  .hero {
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: end;
    min-height: clamp(29rem, 72vh, 40rem);
    overflow: hidden;
  }

  .hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
  }

  .hero__media .hero__slot {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }

  .hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--hero-scrim);
  }

  .hero__inner {
    padding-block: var(--space-3xl);
  }

  .hero__content {
    max-width: 46rem;
  }

  .hero h1 {
    color: #fff;
  }

  @media (min-width: 48rem) {
    .hero h1 {
      max-width: 18ch;
    }
  }

  .hero__lede {
    margin-top: var(--space-m);
    font-size: var(--step-1);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
    max-width: 54ch;
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    margin-top: var(--space-l);
  }

  .hero__area {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: var(--space-m);
    font-size: var(--step--1);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.86);
  }

  .hero__area svg {
    color: var(--pin-on-dark);
    flex: none;
  }

  @media (max-width: 30rem) {
    .hero__actions .btn {
      width: 100%;
    }
  }

  /* --- Problems: staggered, not gridded --- */
  .problems-sec {
    padding-top: var(--space-2xl);
  }

  .problems-head {
    max-width: 44ch;
    margin-bottom: var(--space-xl);
  }

  .problems-head h2 {
    color: #fff;
  }

  .problems-head .lede {
    margin-top: var(--space-s);
    color: var(--stone-200);
  }

  .problems {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-xl);
  }

  @media (min-width: 52rem) {
    .problems {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: clamp(2rem, 5vw, 5rem);
      row-gap: 0;
    }

    /* The right column runs a beat behind the left, so the four items read as
       a diagonal drift rather than a 2×2 block. */
    .problem:nth-child(even) {
      margin-top: 5.5rem;
    }

    .problem:nth-child(3) {
      margin-top: -1.5rem;
    }

    .problem:nth-child(4) {
      margin-top: 4rem;
    }
  }

  .problem {
    padding-top: var(--space-m);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    max-width: 42ch;
  }

  .problem__icon {
    display: block;
    color: var(--brand-300);
    margin-bottom: var(--space-s);
  }

  .problem h3 {
    color: #fff;
    font-size: var(--step-2);
  }

  .problem p {
    margin-top: 0.625rem;
    color: var(--stone-200);
    font-size: var(--step--1);
    line-height: 1.65;
  }

  /* ==========================================================================
     THE OVERLAP — raised panel interlocking graphite and light
     ========================================================================== */
  .explain-sec {
    padding-bottom: var(--space-3xl);
  }

  .explain {
    /* Pulled into the graphite foot, but always stopping ~2rem short of it so
       the last problem card keeps clear air above the panel on narrow screens. */
    margin-top: clamp(-9rem, -3rem - 6vw, -2.5rem);
    padding: clamp(1.5rem, 1rem + 3vw, 3.5rem);
    background: var(--stone-000);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-l);
    display: grid;
    gap: var(--space-xl);
    align-items: center;
  }

  @media (min-width: 64rem) {
    .explain {
      grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
      gap: clamp(2rem, 4vw, 4rem);
    }
  }

  .explain__text .lede {
    margin-top: var(--space-s);
  }

  .explain__text .prose {
    margin-top: var(--space-m);
    color: var(--graphite-700);
  }

  /* ==========================================================================
     BENEFITS — alternating indent
     ========================================================================== */
  .benefits-sec {
    padding-bottom: var(--space-3xl);
  }

  .benefits-head {
    max-width: 42ch;
    margin-bottom: var(--space-xl);
  }

  .benefits-head .lede {
    margin-top: var(--space-s);
  }

  .benefits {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-l) clamp(2rem, 5vw, 5rem);
  }

  @media (min-width: 46rem) {
    .benefits {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Every second pair steps in, so the column edge is never a straight line. */
    .benefit:nth-child(4n + 3),
    .benefit:nth-child(4n + 4) {
      margin-left: clamp(1rem, 4vw, 3.5rem);
    }
  }

  .benefit {
    display: flex;
    gap: var(--space-s);
  }

  .benefit__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-s);
    background: var(--brand-100);
    color: var(--brand-700);
  }

  .benefit h3 {
    font-size: var(--step-1);
    line-height: 1.3;
  }

  .benefit p {
    margin-top: 0.375rem;
    color: var(--graphite-600);
    font-size: var(--step--1);
    line-height: 1.6;
    max-width: 42ch;
  }

  /* ==========================================================================
     SERVICES — one wide feature, the rest falling in beside it
     ========================================================================== */
  .services-sec {
    padding-bottom: var(--space-3xl);
  }

  .services-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-s) var(--space-m);
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-s);
    border-bottom: 1px solid var(--rule);
  }

  .services-head__link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--step--1);
    font-weight: 700;
    color: var(--brand-700);
    text-decoration: none;
  }

  .services-head__link:hover {
    color: var(--graphite-900);
  }

  .services {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-m);
  }

  @media (min-width: 44rem) {
    .services {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 68rem) {
    .services {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .service--feature {
      grid-column: span 2;
    }

    /* Six entries with a double-width feature leaves a lone card stranded on
       the last row; widening the last one closes the shape. */
    .service:last-child {
      grid-column: span 2;
    }
  }

  .service__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--space-m);
    background: var(--stone-000);
    border: 1px solid var(--rule);
    border-radius: var(--radius-m);
    text-decoration: none;
    color: inherit;
    transition:
      border-color 0.18s var(--ease-out),
      box-shadow 0.18s var(--ease-out),
      transform 0.18s var(--ease-out);
  }

  .service--feature .service__link {
    padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
    background: var(--graphite-900);
    border-color: var(--graphite-900);
    color: var(--stone-100);
  }

  .service__link:hover {
    border-color: var(--brand-500);
    box-shadow: var(--shadow-m);
    transform: translateY(-2px);
  }

  .service__icon {
    color: var(--brand-700);
    margin-bottom: var(--space-s);
  }

  .service--feature .service__icon {
    color: var(--brand-300);
  }

  .service h3 {
    font-size: var(--step-1);
  }

  .service--feature h3 {
    color: #fff;
    font-size: var(--step-3);
    max-width: 14ch;
  }

  .service p {
    margin-top: 0.5rem;
    color: var(--graphite-600);
    font-size: var(--step--1);
    line-height: 1.6;
    flex: 1;
  }

  .service--feature p {
    color: var(--stone-200);
    font-size: var(--step-0);
    max-width: 46ch;
  }

  .service__more {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: var(--space-m);
    font-size: var(--step--1);
    font-weight: 700;
    color: var(--brand-700);
  }

  .service--feature .service__more {
    color: var(--brand-300);
  }

  .service__link:hover .service__more {
    color: var(--graphite-900);
  }

  .service--feature .service__link:hover .service__more {
    color: #fff;
  }

  /* ==========================================================================
     REASONS — red field, content off-centre
     ========================================================================== */
  .reasons-sec {
    background: var(--brand-600);
    color: var(--brand-100);
    padding-block: var(--space-3xl);
  }

  .reasons-grid {
    display: grid;
    gap: var(--space-xl);
  }

  @media (min-width: 62rem) {
    .reasons-grid {
      grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
      gap: clamp(2rem, 5vw, 5rem);
      align-items: start;
    }

    .reasons-head {
      position: sticky;
      top: calc(var(--header-h) + var(--space-l));
    }
  }

  .reasons-head h2 {
    color: #fff;
  }

  .reasons-head .lede {
    margin-top: var(--space-s);
    color: var(--brand-100);
  }

  .reasons {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-l);
  }

  @media (min-width: 40rem) {
    .reasons {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-l) var(--space-xl);
    }
  }

  .reason {
    display: flex;
    gap: var(--space-s);
    padding-top: var(--space-s);
    border-top: 1px solid rgba(255, 255, 255, 0.28);
  }

  .reason__icon {
    flex: none;
    color: #fff;
    margin-top: 0.125rem;
  }

  .reason h3 {
    font-size: var(--step-1);
    line-height: 1.3;
    color: #fff;
  }

  .reason p {
    margin-top: 0.375rem;
    color: var(--brand-100);
    font-size: var(--step--1);
    line-height: 1.6;
  }

  /* ==========================================================================
     PROJECTS — imagery breaks the column
     ========================================================================== */
  .projects-sec {
    padding-block: var(--space-3xl);
  }

  /* Carries the gap the removed gallery note used to hold open. */
  .projects-head {
    max-width: 42ch;
    margin-bottom: var(--space-xl);
  }

  .projects-head .lede {
    margin-top: var(--space-s);
  }

  .projects {
    list-style: none;
    margin-block: 0;
    padding: 0 var(--gutter);
    display: grid;
    gap: var(--space-l) var(--space-m);
  }

  @media (min-width: 46rem) {
    .projects {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .project__meta {
    margin-top: var(--space-m);
  }

  .project h3 {
    font-size: var(--step-1);
  }

  .project dl {
    margin: var(--space-s) 0 0;
    display: grid;
    gap: 0.5rem;
  }

  .project dt {
    font-size: var(--step--4);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--graphite-500);
  }

  .project dd {
    margin: 0.125rem 0 0;
    font-size: var(--step--1);
    color: var(--graphite-700);
    line-height: 1.5;
  }

  .projects-foot {
    margin-top: var(--space-xl);
    text-align: center;
  }

  /* ==========================================================================
     FAQ — heading pinned left, questions running right
     ========================================================================== */
  .faq-sec {
    background: var(--stone-100);
    padding-block: var(--space-3xl);
    /* Room for the CTA panel lifted out of the next section. */
    padding-bottom: clamp(7rem, 5rem + 8vw, 11rem);
  }

  .faq-grid {
    display: grid;
    gap: var(--space-l);
  }

  @media (min-width: 62rem) {
    .faq-grid {
      grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr);
      gap: clamp(2rem, 5vw, 5rem);
      align-items: start;
    }

    .faq-aside {
      position: sticky;
      top: calc(var(--header-h) + var(--space-l));
    }
  }

  .faq-aside__link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: var(--space-m);
    font-size: var(--step--1);
    font-weight: 700;
    color: var(--brand-700);
    text-decoration: none;
  }

  .faq-aside__link:hover {
    color: var(--graphite-900);
  }

  /* ==========================================================================
     CLOSE — red panel lifted into the FAQ field
     ========================================================================== */
  .cta-sec {
    padding-bottom: var(--space-3xl);
  }

  .cta {
    margin-top: clamp(-8rem, -5rem - 5vw, -4.5rem);
    padding: clamp(1.75rem, 1.25rem + 3vw, 3.5rem);
    background: var(--brand-600);
    color: var(--brand-100);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-l);
    display: grid;
    gap: var(--space-xl);
    align-items: center;
  }

  @media (min-width: 60rem) {
    .cta {
      grid-template-columns: 1.5fr 1fr;
      gap: var(--space-2xl);
    }
  }

  .cta h2 {
    color: #fff;
    max-width: 20ch;
  }

  .cta .lede {
    margin-top: var(--space-s);
    color: var(--brand-100);
    max-width: 54ch;
  }

  .cta__actions {
    display: grid;
    gap: var(--space-s);
    align-content: start;
  }

  @media (min-width: 30rem) and (max-width: 59.999rem) {
    .cta__actions {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }