@layer layout {
  /* ---------- Containers & sections ---------- */
  .container {
    width: 100%;
    max-width: calc(var(--container) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .container--narrow {
    max-width: calc(56rem + var(--gutter) * 2);
  }

  .section {
    position: relative;
    padding-block: var(--section-space);
  }

  .section--tight {
    padding-block: calc(var(--section-space) * 0.7);
  }

  .section--flush-top {
    padding-top: 0;
  }

  .section-head {
    display: grid;
    gap: var(--space-4);
    margin-bottom: clamp(2.5rem, 1.8rem + 2.5vw, 4rem);
    max-width: 44rem;
  }

  .section-head--center {
    margin-inline: auto;
    text-align: center;
    justify-items: center;
  }

  .section-head--split {
    max-width: none;
    align-items: end;
  }

  .stack {
    display: grid;
    gap: var(--space-4);
  }

  /* ---------- Header ---------- */
  .header-sentinel {
    position: absolute;
    top: 2rem;
    left: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
  }

  html.menu-open {
    overflow: hidden;
  }

  .site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    height: var(--header-h);
    pointer-events: none;
    view-transition-name: site-header;
  }

  .site-header__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    height: 100%;
  }

  .site-header__inner > * {
    pointer-events: auto;
  }

  .site-nav {
    display: none;
  }

  /* ---------- Mobile menu ---------- */
  /* The menu element is the backdrop; the panel is the sheet that slides down under the header. */
  .mobile-menu {
    position: fixed;
    inset: 0;
    z-index: var(--z-menu);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .mobile-menu__panel {
    display: grid;
    gap: var(--space-6);
    padding: calc(var(--header-h) + var(--space-4)) var(--gutter) var(--space-7);
  }

  .site-header.is-menu-open {
    z-index: calc(var(--z-menu) + 1);
  }

  /* ---------- Home hero ---------- */
  .hero {
    position: relative;
    padding-inline: var(--panel-inset);
  }

  .hero__panel {
    position: relative;
    isolation: isolate;
    overflow: clip;
    border-radius: var(--radius-xl);
  }

  .hero--home .hero__panel {
    padding-block: clamp(3rem, 1.5rem + 6vw, 6.5rem) clamp(7rem, 5rem + 6vw, 10rem);
    min-height: min(56rem, calc(100svh - var(--header-h) - var(--panel-inset)));
    display: grid;
    align-items: center;
  }

  .hero__backdrop {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
  }

  .hero__inner {
    display: grid;
    gap: clamp(2.5rem, 1rem + 5vw, 4rem);
    align-items: center;
  }

  .hero__content {
    display: grid;
    justify-items: start;
    gap: var(--space-5);
    max-width: 38rem;
  }

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

  .hero__visual {
    position: relative;
    width: 100%;
  }

  /* ---------- Inner page hero ---------- */
  .page-hero .hero__panel {
    padding-block: clamp(3rem, 2rem + 5vw, 6rem);
  }

  .page-hero__inner {
    display: grid;
    gap: clamp(2rem, 1rem + 4vw, 3.5rem);
    align-items: center;
  }

  .page-hero__content {
    display: grid;
    justify-items: start;
    gap: var(--space-5);
    max-width: 36rem;
  }

  .page-hero__visual {
    position: relative;
    width: min(100%, 30rem);
    justify-self: center;
  }

  /* ---------- Capability strip ---------- */
  .capabilities-section {
    position: relative;
    z-index: var(--z-raised);
    margin-top: calc(clamp(4rem, 3rem + 4vw, 6rem) * -1);
  }

  .capabilities {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  /* ---------- Grids ---------- */
  .service-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .why__inner {
    display: grid;
    gap: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  }

  .why__grid {
    display: grid;
    gap: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
    align-items: center;
  }

  .feature-list {
    display: grid;
    gap: var(--space-4);
  }

  .mv-grid {
    display: grid;
    gap: var(--space-4);
  }

  .values {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: var(--space-3);
  }

  /* ---------- Story (about) ---------- */
  .story {
    display: grid;
    gap: var(--space-8);
  }

  .story__visual {
    display: none;
  }

  .story__chapters {
    display: grid;
    gap: var(--space-5);
  }

  /* ---------- CTA band ---------- */
  .cta-band {
    padding-block: 0 var(--section-space);
  }

  .cta-band__panel {
    position: relative;
    isolation: isolate;
    overflow: clip;
    display: grid;
    gap: var(--space-6);
    align-items: center;
    border-radius: var(--radius-xl);
    padding: clamp(2rem, 1.2rem + 3.5vw, 4rem);
  }

  .cta-band__content {
    display: grid;
    justify-items: start;
    gap: var(--space-4);
    max-width: 34rem;
  }

  /* ---------- Contact ---------- */
  .contact-layout {
    display: grid;
    gap: var(--space-6);
    align-items: start;
  }

  .form-grid {
    display: grid;
    gap: var(--space-4);
  }

  .contact-aside {
    display: grid;
    gap: var(--space-4);
  }

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

  /* ---------- Legal pages ---------- */
  .legal-layout {
    display: grid;
    gap: var(--space-8);
    align-items: start;
  }

  /* ---------- Footer ---------- */
  .site-footer {
    padding-block: var(--space-10) var(--space-6);
  }

  .footer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8) var(--space-6);
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-9);
    padding-top: var(--space-5);
  }
}