@layer layout {

   

  .wrap {
    display: grid;
    grid-template-columns:
      [full-start] minmax(var(--gutter), 1fr)
      [main-start] min(var(--maxw), 100% - (var(--gutter) * 2))
      [main-end]   minmax(var(--gutter), 1fr)
      [full-end];
  }

  .wrap > * { grid-column: main; }

   
  .wrap > .bleed { grid-column: full; }

   
  .wrap > .bleed-end { grid-column: main-start / full-end; }
  .wrap > .bleed-start { grid-column: full-start / main-end; }

   

  .section       { padding-block: var(--sec); }
  .section-tight { padding-block: var(--sec-tight); }
  .section-loose { padding-block: var(--sec-loose); }

   
  .band + .band { padding-block-start: 0; }

   

  .stack > * + * { margin-block-start: var(--stack); }
  .stack-tight > * + * { margin-block-start: var(--stack-tight); }

  .section-head {
    max-width: var(--maxw-text);
    margin-block-end: var(--stack);
  }

   

  .grid {
    display: grid;
    gap: var(--stack);
    grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 17rem), 100%), 1fr));
  }

  .grid-2 { --grid-min: 26rem; }
  .grid-3 { --grid-min: 19rem; }
  .grid-4 { --grid-min: 15rem; }

   

  .offset-grid {
    display: grid;
    gap: var(--stack) calc(var(--gutter) * 1.5);
    align-items: center;
    grid-template-columns: 1fr;
  }

   
  .offset-grid { --offset-ratio: 5fr 7fr; --offset-ratio-flipped: 7fr 5fr; }

  @media (min-width: 56rem) {
    .offset-grid { grid-template-columns: var(--offset-ratio); }

     
    .offset-grid.is-flipped { grid-template-columns: var(--offset-ratio-flipped); }
    .offset-grid.is-flipped > .offset-text  { order: 2; }
    .offset-grid.is-flipped > .offset-media { order: 1; }

     
    .offset-grid:not(:has(> .offset-media)) {
      grid-template-columns: minmax(0, 1fr);
      max-inline-size: 78ch;
    }

     
    .offset-grid.is-flipped:not(:has(> .offset-media)) > .offset-text {
      order: 0;
    }
  }

   

  .hero-split {
    display: grid;
    gap: var(--stack) calc(var(--gutter) * 1.5);
    align-items: center;
    grid-template-columns: 1fr;
  }

  @media (min-width: 56rem) {
    .hero-split { grid-template-columns: 6fr 5fr; }
  }

   

  .cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--stack-tight) var(--stack);
    align-items: center;
  }

  .cluster-between { justify-content: space-between; }

   

  .scroll-x {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

   

   
  .ground-surface {
    background-color: var(--c-surface);
    background-image: var(--wash-surface);
    background-repeat: no-repeat;
    position: relative;
  }

  .ground-surface::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
     
    inset-inline-start: max(var(--gutter), (100% - var(--maxw)) / 2);
    inline-size: clamp(3rem, 9vw, 6rem);
    block-size: var(--eyebrow-rule-h);
    background: var(--c-green);
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    pointer-events: none;
  }

   
  .ground-surface + .ground-surface::before { display: none; }

  .ground-blue    { background: var(--c-blue-weak); }
  .ground-green   { background: var(--c-green-weak); }

   

  @media (min-width: 64rem) {
    .rail-shell {
      display: grid;
      grid-template-columns: minmax(0, 1fr) var(--rail-w, 13rem);
      column-gap: calc(var(--gutter) * 1.5);
      row-gap: 0;
      align-items: start;
    }

    .rail-shell > * { grid-column: 1; }

    .rail-shell > .section-rail {
      grid-column: 2;
      grid-row: 1 / span 200;
      align-self: start;
    }
  }

   

  body { display: flex; flex-direction: column; }
  main { flex: 1 0 auto; }

   
  @media (max-width: 47.99rem) {
    body:has(.sticky-mobile-cta) .site-footer { padding-block-end: 5.5rem; }
  }

}