/**
 * Layout + rhythm from the Antigravity / brm.us reference (modern CSS demo).
 * Uses --theme-* (bridged to --c-* in theme.css). Loaded after landing.css.
 */

:root {
  overscroll-behavior-y: contain;
}

/* ── Main column grid (reference body grid, applied to .site-main) ─ */
.site-main {
  grid-template-columns:
    [fullbleed-start]
    3rem
    [main-start]
    minmax(0, 1fr)
    [main-end]
    3rem
    [fullbleed-end];
}

/* ── Sections: reference min-height + centered band ─ */
.section {
  min-height: min(100dvh, 960px);
  align-content: safe center;
}

.section.section--contact,
.marquee-wrap {
  min-height: unset;
}

.section.center {
  place-content: safe center;
  justify-items: center;
}

#welcome .welcome-headline {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4.5vw, 2.5rem);
  font-weight: 350;
  letter-spacing: -0.02em;
  line-height: 1.05;
  max-width: min(100%, 38rem);
  color: var(--theme-surface-on-surface);
  text-wrap: balance;
}

#welcome .welcome-subline {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.35;
  max-width: min(100%, 40rem);
  color: var(--theme-surface-on-surface-variant);
  text-wrap: balance;
}

@media (min-width: 930px) {
  #welcome .welcome-headline {
    max-width: min(100%, 42rem);
  }

  #welcome .welcome-subline {
    max-width: min(100%, 44rem);
  }
}

#welcome .cta .ag-cta {
  font-size: clamp(0.68rem, 1.65vw, 0.9rem);
  padding: 0.58em 1.1em;
}

/* ── Product: subgrid + full-bleed icons (reference) ─ */
#product.section {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: fullbleed-start / fullbleed-end;
  gap: clamp(1.25rem, 3vw, 2rem);
}

#product > *:not(.icons):not(#partners):not(#features):not(#approach) {
  grid-column: main-start / main-end;
}

#product > .icons,
#product > #partners.section--partners,
#product > #approach.section--approach {
  grid-column: fullbleed-start / fullbleed-end;
  width: 100%;
}

#product .section-lead,
#developers .section-lead {
  font-size: clamp(1.75rem, 4.5vw, 2.5rem);
  font-weight: 350;
  line-height: 1.05;
  margin: 0.5rem 0;
}

#product .section-lead--manifest,
#developers .section-lead--manifest {
  text-align: center;
  text-wrap: balance;
  margin-inline: auto;
  max-width: min(100%, 38rem);
  width: 100%;
}

#product .section-lead--manifest {
  margin-top: clamp(1.25rem, 3.5vw, 2.75rem);
}

#developers .section-lead--manifest {
  margin-top: clamp(0.75rem, 2vw, 1.5rem);
}

@media (min-width: 930px) {
  #product .section-lead--manifest,
  #developers .section-lead--manifest {
    max-width: min(100%, 42rem);
  }
}

#product .icons {
  height: max(21em, 34vb);
  padding-inline: 0;
  overflow-x: clip;
  border-block-color: var(--theme-outline-variant);
}

#product .icons .icon {
  flex: 0 0 clamp(4rem, 10vw, 6rem);
  background: color-mix(in srgb, #b7bfd9 9%, transparent);
  border-color: var(--theme-outline-variant);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

#product .icons .icon span.material-symbols-outlined {
  font-size: 2em !important;
}

/* ── Features: GSAP slider (stacked slides + title) — no chrome, page background ─ */
#product > #features.features-gsap {
  width: 100%;
  grid-column: fullbleed-start / fullbleed-end;
  overflow: visible;
  /* Sit lower under “How we work” */
  margin-top: clamp(4.5rem, 11vw, 8rem);
  /* Pull #founder up — sits near end of capabilities */
  margin-bottom: clamp(-7.5rem, -17vw, -3.25rem);
}

#features .slider {
  width: 100%;
  min-height: 70vh;
  min-height: 70dvh;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  cursor: auto;
  margin-block: 1rem 0;
  background: transparent;
}

#features .slider__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 4vw, 2rem) 32px 40px;
  min-height: 0;
  position: relative;
  overflow: visible;
  order: 1;
}

#features .slider__left {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  position: relative;
  z-index: 4;
  gap: clamp(0.35rem, 1.2vw, 0.85rem);
  justify-content: flex-start;
  overflow: visible;
  padding-inline-start: clamp(2rem, 6.5vw, 4.5rem);
  box-sizing: border-box;
}

#features .slider__title {
  font-family: var(--font-display, system-ui, sans-serif);
  font-size: clamp(1.35rem, 4.2vw, 2.85rem);
  font-weight: 600;
  color: var(--theme-surface-on-surface, var(--c-text));
  line-height: 1.12;
  letter-spacing: -0.02em;
  overflow: hidden;
  position: relative;
  margin-top: 0;
  margin-bottom: 0;
  flex: 0 0 auto;
  padding-block: clamp(0.35rem, 1vw, 0.55rem);
  max-width: min(26ch, 100%);
  /* Reserve ~3 lines so shorter titles don’t pull the description up */
  min-height: clamp(5.4rem, 14.5vw, 9.25rem);
  box-sizing: border-box;
}

#features .slider__title > div {
  display: block;
  width: 100%;
  max-width: 100%;
}

#features .slider__title .slider__title-word {
  display: inline-block;
  white-space: nowrap;
  hyphens: none;
}

#features .slider__footer {
  flex-shrink: 0;
  margin-top: clamp(0.75rem, 2.2vw, 1.25rem);
}

#features .slider__description {
  font-size: clamp(0.78rem, 1.35vw, 0.92rem);
  letter-spacing: 0.03em;
  color: var(--theme-surface-on-surface-variant, var(--c-muted));
  line-height: 1.55;
  text-wrap: pretty;
  max-width: min(46ch, 100%);
  opacity: 1;
  margin: 0;
}

#features .slider__meta {
  font-size: 10px;
  letter-spacing: 1.2px;
  color: var(--theme-surface-on-surface-variant, var(--c-muted));
  line-height: 1.6;
  text-transform: uppercase;
}

#features .slider__meta--banner {
  flex: 0 0 auto;
  width: 100%;
  max-width: min(48rem, 100%);
  margin: clamp(-4.75rem, -12vw, -2.25rem) auto clamp(0.35rem, 0.9vw, 0.65rem);
  padding: 0 clamp(1.25rem, 4vw, 2rem);
  text-align: center;
  text-wrap: balance;
  box-sizing: border-box;
  order: 0;
  transform: translateY(clamp(-1.5rem, -4vw, -0.65rem));
}

#features .slider__cursor {
  display: none !important;
}

#features .slider__right {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: visible;
}

#features .slider__images {
  width: 100%;
  height: 100%;
  position: relative;
  min-height: 220px;
  padding-top: clamp(10%, 14vmin, 22%);
  box-sizing: border-box;
  overflow: visible;
}

#features .slider__slide {
  position: absolute;
  top: 56%;
  left: 50%;
  width: 55%;
  aspect-ratio: 1.4;
  overflow: hidden;
  will-change: transform, filter, opacity;
  border-radius: 1.25em;
  box-shadow: 0 20px 48px color-mix(in srgb, var(--c-text) 12%, transparent);
}

#features .slider__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.96);
}

@media screen and (min-width: 768px) {
  #features .slider__body {
    padding: clamp(1.5rem, 4vw, 2.25rem) 56px 56px;
  }

  #features .slider__meta--banner {
    padding-inline: 56px;
  }

  #features .slider__footer {
    margin-top: clamp(1rem, 2.5vw, 1.5rem);
  }

  #features .slider__slide {
    width: 60%;
  }

}

@media screen and (min-width: 1024px) {
  #features .slider {
    min-height: 72vh;
    min-height: 72dvh;
  }

  #features .slider__body {
    flex-direction: row;
  }

  #features .slider__left {
    width: 55%;
    flex-shrink: 0;
    z-index: auto;
    justify-content: flex-start;
    gap: clamp(0.5rem, 1.5vw, 1rem);
    padding-inline-start: clamp(3rem, 7.5vw, 6.5rem);
  }

  #features .slider__right {
    position: static;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    opacity: 1;
    pointer-events: auto;
    overflow: visible;
  }

  #features .slider__slide {
    width: 68%;
  }
}

@media (prefers-reduced-motion: reduce) {
  #features .slider__slide,
  #features .slider__title span {
    will-change: auto;
  }
}

/* ── Developers (reference) ─ */
#developers.section--developers {
  width: 100%;
  border-top: 1px solid var(--theme-outline-variant);
  margin-top: 2em;
  padding-top: 2em;
  display: grid;
  grid-template-columns: subgrid;
  grid-column: fullbleed-start / fullbleed-end;
}

#developers > *:not(.carousel) {
  grid-column: main-start / main-end;
}

#developers .intro:not(.section-lead--manifest),
#developers .developers-intro:not(.section-lead--manifest) {
  color: var(--theme-surface-on-surface-variant);
  font-size: 1.1em;
  line-height: 1.2;
  font-weight: 320;
  padding: 0.5rem 0;
  max-width: none;
}

@media (min-width: 930px) {
  #developers .intro:not(.section-lead--manifest),
  #developers .developers-intro:not(.section-lead--manifest) {
    width: calc(30vw - 1.5rem);
    max-width: 36ch;
    margin-left: auto;
  }
}

#developers .carousel {
  grid-column: fullbleed-start / fullbleed-end;
  padding-inline: 3rem;
  width: 100%;
  gap: 2rem;
  scroll-padding-inline: 3rem;
  scrollbar-width: none;
}

#developers .carousel::-webkit-scrollbar {
  display: none;
}

#developers .carousel .developer {
  flex: 0 0 100%;
  overflow: clip;
}

@media (min-width: 930px) {
  #developers .carousel .developer {
    flex: 0 0 60vi;
    max-width: 720px;
  }

  #developers .carousel {
    padding-inline: 3rem calc(40vi - 3rem);
  }
}

#developers .carousel .developer figure {
  border-radius: 2em;
}

#developers .carousel .developer figcaption {
  font-size: clamp(1.25rem, 3vw, 2em);
}

#developers .carousel .developer h3 {
  font-weight: 350;
  font-size: 1.25em;
  line-height: 1.1;
}

#developers .carousel .developer p {
  max-width: 42ch;
  text-wrap: pretty;
  letter-spacing: 0.05rem;
  font-weight: 300;
}

@media (min-width: 930px) {
  #developers .carousel .developer p {
    width: 40%;
  }
}

/* ── Approach & founder (replaces carousel developers block in layout) ─ */
#approach.section--approach,
#founder.section--founder {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: fullbleed-start / fullbleed-end;
}

#approach.section--approach {
  min-height: auto;
  align-content: start;
   /* Sit closer to partners; extra air before “What we build” */
  margin-top: clamp(-4.25rem, -10vw, -2rem);
  margin-bottom: clamp(2.5rem, 7vw, 5.25rem);
  padding-block: 0 clamp(1.25rem, 3.5vw, 2.25rem);
}

#approach > *,
#founder > * {
  grid-column: main-start / main-end;
}

#developers .carousel .developer a::after {
  font-family: "Material Symbols Outlined", sans-serif;
  content: "arrow_forward";
  font-size: 1.1rem;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* ── Partners: intro + sr-only in main; 3D logo ring full-bleed ─ */
#partners.section--partners > *:not(.product-carousel-3d) {
  grid-column: main-start / main-end;
}

#partners.section--partners .product-carousel-3d {
  grid-column: fullbleed-start / fullbleed-end;
  width: 100%;
  justify-self: stretch;
}

/* ── Contact / Calendly (reference card) ─ */
#contact.section {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: fullbleed-start / fullbleed-end;
  min-height: min-content;
  padding-block: clamp(3.5rem, 9vw, 6.5rem) clamp(1.5rem, 4vw, 2.75rem);
}

#contact > * {
  grid-column: main-start / main-end;
}

#contact .card.dark {
  border-radius: 2em;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  max-height: none;
  display: grid;
  padding: clamp(1.35rem, 3.5vw, 2rem);
  gap: clamp(0.6rem, 1.5vw, 0.95rem);
  align-content: start;
  justify-items: center;
  text-align: center;
  background: color-mix(in srgb, var(--c-surface) 52%, transparent);
  color: var(--c-text);
  border: 1px solid color-mix(in srgb, var(--c-text) 11%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--c-text) 6%, transparent),
    0 10px 36px color-mix(in srgb, var(--c-text) 5%, transparent);
}

#contact .contact-card__body {
  font-family: var(--font-mono);
  font-size: clamp(0.95rem, 1.9vw, 1.1rem);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0.04em;
  text-wrap: pretty;
  margin: 0;
  max-width: 42ch;
  color: var(--c-muted);
}

#contact .contact-card__actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-size: 1em;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 0.35rem;
}

@media (min-width: 931px) {
  #contact .contact-card__actions {
    justify-content: center;
  }
}

#contact .card.dark .btn.contact-card__cta {
  background: color-mix(in srgb, var(--c-text) 9%, transparent);
  color: var(--c-text);
  border: 1px solid color-mix(in srgb, var(--c-text) 22%, transparent);
}

/* .typewriter: full effect needs scroll-triggered CSS; keep text visible */
.typewriter {
  color: inherit;
}