@layer components {


  .hero { --section-y: var(--section-lg); }

  .hero__grid { row-gap: var(--space-7); align-items: center; }

  .hero__content { grid-column: 1 / -1; }

  .hero__title {
    font-family: var(--font-display);

    font-size: var(--fs-display-2);
    line-height: var(--lh-tight);
    letter-spacing: var(--track-tight);
    color: var(--text-primary);
    max-width: var(--measure-display);
    margin-block-start: var(--space-5);
  }

  .hero__lead {
    font-size: var(--fs-body-lg);
    line-height: var(--lh-relaxed);
    color: var(--text-secondary);
    max-width: var(--measure-narrow);
    margin-block-start: var(--space-5);
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-5);
    margin-block-start: var(--space-7);
  }

  .hero__visual { grid-column: 1 / -1; }


  .span-construct { display: grid; gap: var(--space-6); }

  .span-construct__row { display: grid; gap: var(--space-3); }

  .span-construct__label {
    font-family: var(--font-mono);
    font-size: var(--fs-overline);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .span-construct__span {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .span-construct__line {
    height: var(--border-hair);
    background-color: var(--signal-500);
    opacity: var(--opacity-muted);
    transform-origin: left;
    animation: span-draw var(--dur-5) var(--ease-entrance) both;
  }

  .span-construct__node {
    width: var(--space-2);
    height: var(--space-2);
    background-color: var(--signal-500);
    flex-shrink: 0;
    animation: node-in var(--dur-3) var(--ease-entrance) both;
  }

  .span-construct__row:nth-child(1) .span-construct__line { width: 100%; }
  .span-construct__row:nth-child(2) .span-construct__line { width: 68%; }
  .span-construct__row:nth-child(3) .span-construct__line { width: 88%; }

  .span-construct__row:nth-child(2) .span-construct__line,
  .span-construct__row:nth-child(2) .span-construct__node { animation-delay: 120ms; }
  .span-construct__row:nth-child(3) .span-construct__line,
  .span-construct__row:nth-child(3) .span-construct__node { animation-delay: 240ms; }

  @keyframes span-draw {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }

  @keyframes node-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }


  .divisions__intro { max-width: var(--measure-base); }
  .divisions__intro p { margin-block-start: var(--space-4); }

  .divisions__rail {
    display: grid;
    gap: var(--space-7);
    margin-block-start: var(--space-9);
  }


  .divisions__line { display: none; }

  .division {
    position: relative;
    padding-inline-start: var(--space-5);
    border-inline-start: var(--border-hair) solid var(--line-hairline);
  }

  .division__index {
    font-family: var(--font-mono);
    font-size: var(--fs-overline);
    letter-spacing: var(--track-wide);
    color: var(--signal-500);
  }

  .division__title { margin-block-start: var(--space-3); }

  .division__text {
    margin-block-start: var(--space-3);
    color: var(--text-secondary);
    font-size: var(--fs-body);
    max-width: var(--measure-narrow);
  }

  .division__link { margin-block-start: var(--space-4); }


  .division--2 { --i: 1; }
  .division--3 { --i: 2; }


  .studio__label { grid-column: 1 / -1; }

  .studio__body { grid-column: 1 / -1; }

  .studio__statement {
    font-family: var(--font-display);
    font-size: var(--fs-display-2);
    line-height: var(--lh-tight);
    letter-spacing: var(--track-tight);
    color: var(--text-primary);
    max-width: var(--measure-display);
  }

  .studio__text {
    margin-block-start: var(--space-5);
    max-width: var(--measure-base);
  }

  .studio__compare { margin-block-start: var(--space-8); }


  .work__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    margin-block-end: var(--space-8);
  }

  .work__head-text { max-width: var(--measure-base); }
  .work__head h2 { margin-block-start: var(--space-4); }

  .work__mosaic { --row-gap: var(--space-8); align-items: start; }

  .work__item { grid-column: 1 / -1; }
  .work__item .frame { aspect-ratio: var(--ratio-photo); }

  .work__item--b { --i: 1; }
  .work__item--c { --i: 2; }
  .work__item--d { --i: 3; }
  .work__item--e { --i: 4; }


  .systems__media { grid-column: 1 / -1; }
  .systems__media .frame { aspect-ratio: var(--ratio-classic); }

  .systems__content { grid-column: 1 / -1; }
  .systems__content h2 { margin-block-start: var(--space-4); }
  .systems__lead {
    margin-block-start: var(--space-4);
    max-width: var(--measure-narrow);
  }
  .systems__specs { margin-block-start: var(--space-6); }
  .systems__link { margin-block-start: var(--space-6); }


  .signs { padding-block: 0; }

  .signs__band {
    position: relative;
    aspect-ratio: var(--ratio-portrait);
    display: grid;
    align-items: end;
    overflow: hidden;
    border-block: var(--border-hair) solid var(--line-hairline);
    background-color: var(--surface-card);
    background-image:
      repeating-linear-gradient(
        45deg,
        var(--line-faint) 0 1px,
        transparent 1px 14px
      );
  }

  .signs__band::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--gradient-veil-bottom);
    pointer-events: none;
  }

  .signs__overlay {
    position: relative;
    z-index: var(--z-raised);
    padding-block: var(--section-sm);
  }

  .signs__statement {
    max-width: var(--measure-display);
    color: var(--text-primary);
  }

  .signs__text {
    margin-block-start: var(--space-4);
    max-width: var(--measure-narrow);
  }

  .signs__link { margin-block-start: var(--space-5); }

  .signs__slot {
    position: absolute;
    inset-block-start: var(--space-5);
    inset-inline-start: 0;
    inline-size: 100%;
  }


  .web__content { grid-column: 1 / -1; }
  .web__content h2 { margin-block-start: var(--space-4); }
  .web__lead { margin-block-start: var(--space-4); max-width: var(--measure-narrow); }

  .web__points {
    display: grid;
    gap: var(--space-3);
    margin-block-start: var(--space-6);
  }

  .web__point {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    font-size: var(--fs-body);
    color: var(--text-secondary);
  }

  .web__point::before {
    content: "";
    width: var(--space-3);
    height: var(--border-hair);
    background-color: var(--signal-500);
    flex-shrink: 0;
    transform: translateY(-0.3em);
  }

  .web__link { margin-block-start: var(--space-6); }

  .web__media { grid-column: 1 / -1; }

  .web__frames { display: grid; gap: var(--space-4); }
  .web__frame--desktop .frame { aspect-ratio: var(--ratio-wide); }
  .web__frame--mobile .frame { aspect-ratio: var(--ratio-portrait); }


  .why__intro { max-width: var(--measure-base); }
  .why__intro h2 { margin-block-start: var(--space-4); }

  .why__list {
    display: grid;
    gap: var(--space-7);
    margin-block-start: var(--space-8);
  }

  .why__item { max-width: var(--measure-base); }

  .why__index {
    font-family: var(--font-mono);
    font-size: var(--fs-overline);
    letter-spacing: var(--track-wide);
    color: var(--signal-500);
  }

  .why__title { margin-block-start: var(--space-3); }
  .why__text { margin-block-start: var(--space-3); max-width: var(--measure-narrow); }


  .regional__intro { max-width: var(--measure-base); }
  .regional__intro p { margin-block-start: var(--space-4); }
  .regional__rail { margin-block-start: var(--space-8); }


  .proof-section { --section-y: var(--section-sm); }


  .cta { --section-y: var(--section-lg); text-align: center; }

  .cta__inner { display: grid; justify-items: center; }


  .cta__terminus {
    display: grid;
    justify-items: center;
    gap: 0;
    margin-block-end: var(--space-6);
  }

  .cta__terminus-line {
    width: var(--border-hair);
    height: var(--space-8);
    background-color: var(--line-default);
  }

  .cta__terminus-node {
    width: var(--space-3);
    height: var(--space-3);
    background-color: var(--signal-500);
  }

  .cta__statement {
    font-family: var(--font-display);
    font-size: var(--fs-display-2);
    line-height: var(--lh-tight);
    letter-spacing: var(--track-tight);
    color: var(--text-primary);
    max-width: var(--measure-display);
  }

  .cta__text {
    margin-block-start: var(--space-5);
    max-width: var(--measure-narrow);
  }

  .cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-5);
    margin-block-start: var(--space-7);
  }

  .cta__phone { font-size: var(--fs-body); }



  @media (min-width: 768px) {
    .hero__visual { max-width: 34rem; }


    .web__frames { position: relative; isolation: isolate; }
    .web__frame--mobile {
      position: absolute;
      inset-block-end: calc(var(--space-5) * -1);
      inset-inline-start: var(--space-5);
      width: 26%;
      z-index: 2;
    }
    .web__media { padding-block-end: var(--space-6); }


    .work__item--a { grid-column: 1 / -1; }
    .work__item--a .frame { aspect-ratio: var(--ratio-cinema); }
    .work__item--b,
    .work__item--c,
    .work__item--d,
    .work__item--e { grid-column: span 4; }

    .signs__band { aspect-ratio: var(--ratio-photo); }

    .why__list { gap: var(--space-8); }
    .why__item--2 { margin-inline-start: var(--space-7); }
    .why__item--3 { margin-inline-start: var(--space-10); }
    .why__item--4 { margin-inline-start: var(--space-11); }
  }

  @media (min-width: 1024px) {

    .hero__grid { row-gap: var(--space-8); }
    .hero__content { grid-column: 1 / span 8; }
    .hero__visual { grid-column: 10 / span 3; max-width: none; }
    .hero__inner { min-height: var(--hero-min-h); display: grid; align-content: center; }


    .divisions__rail {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-template-rows: auto auto;
      column-gap: var(--grid-gap);
      row-gap: 0;
      margin-block-start: var(--space-10);
    }

    .divisions__line {
      display: block;
      grid-column: 1 / -1;
      grid-row: 1;
      align-self: end;
      height: var(--border-hair);
      background-color: var(--line-default);
      transform-origin: left;
    }

    .division {
      border-inline-start: 0;
      padding-inline-start: 0;
      padding-inline-end: var(--space-6);
    }

    .division--1 { grid-column: 1; grid-row: 1; padding-block-end: var(--space-7); }
    .division--2 { grid-column: 2; grid-row: 2; padding-block-start: var(--space-7); }
    .division--3 { grid-column: 3; grid-row: 1; padding-block-end: var(--space-7); }


    .division::after {
      content: "";
      position: absolute;
      inset-inline-start: 0;
      width: var(--border-hair);
      height: var(--space-7);
      background-color: var(--line-default);
      transition: background-color var(--dur-3) var(--ease-standard);
    }

    .division--1::after,
    .division--3::after { inset-block-end: 0; }
    .division--2::after { inset-block-start: 0; }

    .division:hover::after { background-color: var(--signal-500); }


    .studio__label {
      grid-column: 1 / span 3;
      position: sticky;
      inset-block-start: var(--space-10);
    }
    .studio__body { grid-column: 5 / span 7; }


    .work__item--a { grid-column: 1 / span 7; }
    .work__item--b { grid-column: 8 / span 5; }
    .work__item--b .frame { aspect-ratio: var(--ratio-wide); }
    .work__item--c { grid-column: 1 / span 4; }
    .work__item--c .frame { aspect-ratio: var(--ratio-square); }
    .work__item--d { grid-column: 5 / span 5; }
    .work__item--d .frame { aspect-ratio: var(--ratio-photo); }
    .work__item--e .frame { aspect-ratio: var(--ratio-portrait); }
    .work__item--e {
      grid-column: 10 / span 3;
      margin-inline-end: calc(var(--gutter) * -1);
    }


    .systems__grid { align-items: center; }
    .systems__media {
      grid-column: 1 / span 6;
      margin-inline-start: calc(var(--gutter) * -1);
    }
    .systems__content { grid-column: 8 / span 5; }


    .signs__band { aspect-ratio: var(--ratio-cinema); }
    .signs__overlay { padding-block: var(--section-md); }


    .web__grid { align-items: center; }
    .web__content { grid-column: 1 / span 5; }
    .web__media { grid-column: 7 / span 6; }

    .web__frames {
      position: relative;
      isolation: isolate;
      display: block;
    }

    .web__frame--desktop { width: 100%; }

    .web__frame--mobile {
      position: absolute;
      inset-block-end: calc(var(--space-7) * -1);
      inset-inline-start: calc(var(--space-6) * -1);
      width: 32%;
      z-index: 2;
    }

    .web__frame--mobile .frame { box-shadow: var(--shadow-lg); }

    .web__media { padding-block-end: var(--space-7); }


    .why__item--2 { margin-inline-start: var(--space-8); }
    .why__item--3 { margin-inline-start: var(--space-10); }
    .why__item--4 { margin-inline-start: var(--space-12); }
  }

  @media (min-width: 1440px) {
    .divisions__rail { margin-block-start: var(--space-11); }
    .hero__content { grid-column: 1 / span 7; }
    .hero__visual { grid-column: 9 / span 4; }
  }


  .js .divisions__line { transform: scaleX(0); transition: transform var(--dur-5) var(--ease-entrance); }
  .js .divisions__line.is-in { transform: scaleX(1); }

  @media (prefers-reduced-motion: reduce) {
    .js .divisions__line { transform: scaleX(1); }
    .span-construct__line { animation: none; }
    .span-construct__node { animation: none; }
  }
}