html { background: var(--bg-deep); }

body {
  min-width: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 78% 5%, rgba(94, 140, 122, 0.08), transparent 36rem),
    var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: var(--line-body);
}

main { isolation: isolate; }
section { position: relative; scroll-margin-top: var(--header-height); }

.section-shell {
  width: min(100%, calc(var(--content-width) + var(--page-gutter) * 2));
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.site-header {
  position: fixed;
  z-index: 50;
  inset: 0 0 auto;
  height: var(--header-height);
  border-bottom: 1px solid transparent;
  transition: background-color var(--duration-fast) var(--ease-calm), border-color var(--duration-fast) var(--ease-calm), backdrop-filter var(--duration-fast) var(--ease-calm);
}

.site-header.is-scrolled,
.site-header:has(.nav-panel.is-open) {
  border-color: var(--line);
  background: rgba(6, 19, 19, 0.8);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
  backdrop-filter: blur(22px) saturate(125%);
}

.nav-shell {
  display: flex;
  width: min(100%, calc(var(--content-width) + var(--page-gutter) * 2));
  height: 100%;
  margin-inline: auto;
  padding-inline: var(--page-gutter);
  align-items: center;
  justify-content: space-between;
}

.nav-panel {
  position: fixed;
  inset: var(--header-height) 0 auto;
  display: grid;
  gap: var(--space-5);
  padding: var(--space-5) var(--page-gutter) var(--space-6);
  border-bottom: 1px solid var(--line);
  background: rgba(6, 19, 19, 0.97);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.75rem);
  transition: opacity var(--duration-fast) var(--ease-calm), transform var(--duration-fast) var(--ease-calm), visibility var(--duration-fast);
}

.nav-panel.is-open { opacity: 1; visibility: visible; transform: none; }
.nav-links { display: grid; gap: var(--space-2); }

.hero {
  --inward-center-x: 81%;
  --inward-center-y: 29.5%;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  align-items: center;
  isolation: isolate;
  background: #071313;
}

.hero-content {
  position: relative;
  z-index: 5;
  display: grid;
  width: 100%;
  min-height: 100svh;
  padding-top: calc(var(--header-height) + var(--space-5) + 3svh);
  padding-bottom: clamp(6rem, 12vh, 9rem);
  justify-items: center;
  align-content: center;
  text-align: center;
}

.hero-content h1 { margin-block: var(--space-4) var(--space-4); }
.hero-content .display-heading--hero { max-width: min(15em, 94vw); font-size: clamp(3.25rem, 6.5vw, 6.125rem); font-weight: 430; }
.hero-content .content-paragraph { max-width: min(56rem, 78vw); }
.hero-content .content-paragraph + .content-paragraph { margin-top: var(--space-3); }
.hero-content .button { margin-top: var(--space-5); }

.hero-inward__space,
.hero-inward__back,
.hero-inward__haze,
.hero-inward__lightbeam,
.hero-inward__breath,
.hero-inward__particles,
.hero-inward__consciousness,
.hero-inward__foreground { position: absolute; inset: 0; pointer-events: none; }

.hero-inward__space { z-index: 0; overflow: hidden; }
.hero-inward__back { z-index: 0; }
.hero-inward__haze { z-index: 1; }
.hero-inward__lightbeam { z-index: 1; }
.hero-inward__breath { z-index: 1; }
.hero-inward__particles { z-index: 2; }
.hero-inward__object {
  position: absolute;
  z-index: 3;
  top: var(--inward-center-y);
  left: var(--inward-center-x);
  width: clamp(16rem, 23.5vw, 28rem);
  aspect-ratio: 461 / 367;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.hero-inward__consciousness { z-index: 3; }
.hero-inward__foreground { z-index: 4; }

.product-section,
.practice-section,
.philosophy-intro,
.download-section,
.company-section { padding-block: var(--section-space-normal); }

.product-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, var(--bg), #081819 68%, var(--bg-deep));
}

.product-layout { position: relative; z-index: 2; display: grid; gap: var(--space-7); }
.editorial-heading { max-width: none; }
.editorial-heading h2 { margin-block: var(--space-3) var(--space-5); }
.editorial-heading .content-paragraph,
.editorial-heading .content-emphasis:not(.eyebrow),
.editorial-heading blockquote { max-width: var(--reading-width); }
.editorial-heading .content-paragraph + .content-paragraph { margin-top: var(--space-3); }

.product-stage {
  position: relative;
  display: grid;
  min-height: 22rem;
  place-items: center;
  isolation: isolate;
}
.product-wavefront-visual {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  width: min(66rem, 112%);
  aspect-ratio: 1440 / 1080;
  margin-inline: -10%;
  transform: translateY(var(--parallax, 0));
}

.practice-section { padding-block: var(--section-space-normal); background: linear-gradient(180deg, var(--bg-deep), var(--bg)); }
.practice-list {
  display: grid;
  margin-top: clamp(3.25rem, 5.6vw, 4.8rem);
  gap: clamp(3.4rem, 5.2vw, 5rem) clamp(2.5rem, 4.5vw, 4.5rem);
}
.practice-item {
  display: grid;
  min-width: 0;
  grid-template-columns: clamp(2rem, 3vw, 2.75rem) minmax(0, 1fr);
  column-gap: clamp(0.75rem, 1.4vw, 1.25rem);
  row-gap: var(--space-2);
  align-content: start;
}
.practice-item .practice-index { grid-row: 1 / span 3; padding-top: 0.38rem; }
.practice-item h3 { grid-column: 2; margin-bottom: var(--space-1); font-size: var(--type-feature); }
.practice-item .content-paragraph { grid-column: 2; max-width: 34rem; }
.practice-item .practice-item__lead { color: rgba(244, 240, 232, 0.9); font-size: var(--type-body); line-height: var(--line-body); }
.practice-item .practice-item__detail { margin-top: var(--space-1); color: rgba(244, 240, 232, 0.64); font-size: var(--type-body); }
.practice-section .section-coda {
  width: 100%;
  max-width: none;
  margin-top: clamp(3rem, 5.2vw, 4.25rem);
  text-align: center;
}
.practice-section .section-coda .content-emphasis {
  color: rgba(244, 240, 232, 0.76);
  font-size: var(--type-body);
  font-weight: 450;
  letter-spacing: 0.06em;
  line-height: var(--line-body);
}
.section-coda { margin-top: clamp(5rem, 9vw, 8rem); max-width: var(--reading-width); }

.experience-section { padding-top: 0; background: var(--bg-deep); }
.chapter-intro {
  position: relative;
  z-index: 3;
  display: grid;
  min-height: 80svh;
  padding-top: clamp(8.5rem, 18svh, 12rem);
  padding-bottom: clamp(5rem, 10svh, 7rem);
  overflow: clip;
  align-content: start;
  isolation: isolate;
}
.chapter-intro::before,
.chapter-intro::after {
  position: absolute;
  z-index: 0;
  content: "";
  pointer-events: none;
}
.chapter-intro > * { position: relative; z-index: 1; width: min(100%, 46rem); }
.chapter-intro > .content-emphasis:first-child {
  margin: 0;
  color: var(--gold);
  font-size: var(--type-caption);
  font-weight: 580;
  letter-spacing: 0.18em;
  line-height: 1.4;
}
.chapter-intro h2 {
  max-width: var(--display-wide-width);
  margin: clamp(1.1rem, 2vw, 1.5rem) 0 clamp(2rem, 3.4vw, 3rem);
  font-size: var(--type-section);
  line-height: var(--display-section-line-height);
}
.chapter-intro .content-paragraph {
  max-width: 46rem;
  color: var(--text-soft);
  font-size: var(--type-body);
  line-height: var(--line-body);
}
.chapter-intro .content-paragraph + .content-paragraph { margin-top: clamp(0.75rem, 1.25vw, 1.1rem); }
.chapter-intro--experience::before,
.chapter-intro--philosophy::before {
  top: 50%;
  right: clamp(-8rem, -7vw, -3rem);
  width: min(80vw, 40rem);
  aspect-ratio: 1;
  border: 1px solid var(--line-gold);
  border-radius: 50%;
  background: radial-gradient(circle, transparent 0 31.75%, var(--line-gold) 32%, transparent 32.25%);
  opacity: 0.16;
  translate: 0 -50%;
  transform-origin: center;
}
.chapter-intro--experience::after,
.chapter-intro--philosophy::after { content: none; }
.experience-story { display: grid; }
.experience-visual {
  position: sticky;
  z-index: 1;
  top: 0;
  display: grid;
  min-height: 100svh;
  overflow: hidden;
  place-items: center;
  background: radial-gradient(circle at center, rgba(22, 62, 68, 0.52), transparent 47%), var(--bg-deep);
}
.experience-core { position: relative; z-index: 2; width: min(100%, 62rem); aspect-ratio: 1440 / 1080; }
@media (max-width: 71.99rem) {
  .experience-core {
    align-self: center;
    width: min(160%, 56rem, 60svh);
    margin-top: 0;
  }
}
.experience-scenes { position: relative; z-index: 2; margin-top: -100svh; }
.experience-scene {
  --experience-scene-inline: var(--page-gutter);
  position: relative;
  display: flex;
  width: min(100%, 38rem);
  min-height: 100svh;
  margin-inline: auto;
  padding: 33svh var(--experience-scene-inline) 14svh;
  flex-direction: column;
  justify-content: center;
  opacity: 1;
}
.experience-scene::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--experience-scene-inline);
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(214, 189, 132, 0.11) 18%, rgba(94, 140, 122, 0.13) 82%, transparent);
  content: "";
  pointer-events: none;
}
.experience-scene-copy {
  position: relative;
  margin-left: clamp(1.5rem, 2.4vw, 2rem);
  opacity: 0.2;
  transform: translate3d(0, 0.65rem, 0);
  transition: opacity var(--duration-slow) var(--ease-calm), transform var(--duration-slow) var(--ease-calm);
}
.experience-scene-copy::before {
  position: absolute;
  top: 0.28rem;
  left: clamp(-2.05rem, -2.4vw, -1.55rem);
  width: 0.42rem;
  height: 0.42rem;
  border: 1px solid rgba(214, 189, 132, 0.34);
  border-radius: 50%;
  background: var(--bg-deep);
  content: "";
  transition: background-color var(--duration-base) var(--ease-calm), box-shadow var(--duration-base) var(--ease-calm), transform var(--duration-base) var(--ease-calm);
}
.experience-scene.is-active .experience-scene-copy { opacity: 1; transform: none; }
.experience-scene.is-active .experience-scene-copy::before {
  background: var(--gold);
  box-shadow: 0 0 0 0.32rem rgba(214, 189, 132, 0.07);
  transform: scale(1.08);
}
.experience-scene h3 { margin-block: var(--space-3) var(--space-5); }
.experience-scene .content-paragraph + .content-paragraph,
.experience-scene .content-emphasis { margin-top: var(--space-3); }

@media (max-width: 71.99rem) {
  .experience-scene {
    padding-top: 55svh;
    justify-content: flex-start;
  }
  .sound-copy {
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  }
  .experience-visual::after {
    position: absolute;
    z-index: 2;
    inset: 0;
    background: radial-gradient(
      ellipse 78% 62% at 14% 90%,
      rgba(3, 20, 19, 0.64) 0%,
      rgba(3, 20, 19, 0.28) 38%,
      rgba(3, 20, 19, 0.08) 68%,
      rgba(3, 20, 19, 0) 100%
    );
    content: "";
    pointer-events: none;
  }
}

.philosophy-section { background: linear-gradient(180deg, var(--bg), #0c2527 52%, var(--bg-deep)); }
.philosophy-chapter { padding-block: var(--section-space-cinematic); border-top: 1px solid var(--line); }
.philosophy-chapter:nth-child(even) { background: rgba(6, 19, 19, 0.24); }
.philosophy-chapter-inner { display: grid; gap: var(--space-6); }
.chapter-copy { width: 100%; max-width: 58rem; }
.chapter-copy h2 {
  margin-bottom: var(--philosophy-gap-chapter-title);
  color: var(--gold);
  font-size: var(--philosophy-chapter-size);
}
.chapter-copy h3 { margin-bottom: var(--philosophy-gap-title-body); font-size: var(--philosophy-title-size); }
.chapter-copy .content-paragraph { font-size: var(--philosophy-body-size); line-height: var(--line-body); }
.chapter-copy .content-paragraph + .content-paragraph { margin-top: var(--space-3); }
.philosophy-coda-scene {
  position: relative;
  height: 260svh;
  overflow: clip;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(circle at 50% 48%, rgba(94, 140, 122, 0.16), transparent 34rem),
    var(--bg-deep);
}
.philosophy-coda-sticky {
  position: sticky;
  z-index: 2;
  top: 0;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  place-items: center;
}
.philosophy-coda-composition {
  display: grid;
  min-height: 100svh;
  align-items: center;
  justify-items: center;
}
.philosophy-coda-stage {
  grid-area: 1 / 1;
  width: min(100%, 66rem);
  opacity: 0;
  filter: blur(12px);
  pointer-events: none;
  transform: translateY(2rem);
  transition:
    opacity var(--duration-base) var(--ease-calm),
    filter var(--duration-base) var(--ease-calm),
    transform var(--duration-base) var(--ease-calm);
}
.philosophy-coda-scene[data-phase="1"] .philosophy-coda-principles,
.philosophy-coda-scene[data-phase="2"] .philosophy-coda-transition,
.philosophy-coda-scene[data-phase="3"] .philosophy-coda-freedom {
  opacity: 1;
  filter: none;
  transform: none;
}
.philosophy-coda-track {
  position: absolute;
  z-index: 1;
  inset: 0 0 auto;
  display: grid;
  height: 160svh;
  grid-template-rows: 50svh 50svh 60svh;
  pointer-events: none;
}
.philosophy-coda-track > span { display: block; }

.download-section { overflow: hidden; background: radial-gradient(circle at 20% 50%, rgba(94, 140, 122, 0.18), transparent 34rem), var(--bg); }
.download-layout { position: relative; z-index: 2; display: grid; gap: var(--space-7); }
.download-copy { max-width: none; }
.download-copy .content-paragraph { max-width: var(--reading-width); }
.download-copy h2 { margin-block: var(--space-3) var(--space-1); }
.download-copy .content-paragraph { margin-top: var(--space-4); }
.download-copy .content-paragraph:first-of-type { line-height: 1.48; }
.download-copy .content-paragraph:first-of-type + .content-paragraph { margin-top: var(--space-6); }
.download-copy .content-paragraph:last-of-type { margin-top: var(--space-5); }
.download-actions { display: grid; gap: var(--space-4); }
.download-card { display: grid; min-height: 11rem; padding: clamp(2.15rem, 3vw, 2.5rem); border: 1px solid rgba(244, 240, 232, 0.05); border-radius: var(--radius-lg); background: rgba(244, 240, 232, 0.022); align-content: space-between; gap: clamp(2.65rem, 3.5vw, 3.5rem); backdrop-filter: blur(10px); }
.download-card h3 { font-size: calc(var(--type-feature) - 0.1rem); font-weight: 430; }
.download-card .button { height: 44px; min-height: 44px; padding: 0 1.2rem; border-color: rgba(214, 189, 132, 0.14); background: rgba(244, 240, 232, 0.045); font-weight: 520; }
.download-card .button-disabled { border-color: rgba(244, 240, 232, 0.045); background: rgba(244, 240, 232, 0.018); color: rgba(244, 240, 232, 0.44); }

.company-section {
  padding-top: var(--section-space-normal);
  padding-bottom: clamp(5.5rem, 8vw, 8rem);
  background: var(--bg-deep);
}
.company-layout { display: grid; gap: clamp(3rem, 6vw, 6rem); align-items: center; }
.company-copy { width: 100%; max-width: 52rem; }
.company-copy > .eyebrow { margin-bottom: var(--space-3); }
.company-copy h2 { margin: 0; }
.company-copy h2:first-of-type { color: rgba(244, 240, 232, 0.62); font-weight: 420; }
.company-copy h2:not(:first-of-type) { margin-top: clamp(1.6rem, 2.4vw, 2.15rem); font-size: clamp(2.875rem, 4vw, 3.6rem); line-height: 1.08; }
.company-copy .content-paragraph { max-width: 43rem; margin-top: 1.15rem; font-size: var(--type-body); line-height: var(--line-body); }
.company-copy h2 + .content-paragraph { margin-top: clamp(1.5rem, 2.4vw, 2rem); }
.company-copy .content-paragraph + .content-paragraph { margin-top: 0.7rem; }
.company-copy .company-copy__closing {
  max-width: 42rem;
  color: rgba(244, 240, 232, 0.88);
  font-size: clamp(1.25rem, 1.55vw, 1.5rem);
  line-height: 1.58;
}
.company-copy .content-paragraph + .company-copy__closing { margin-top: clamp(1.5rem, 2.4vw, 2.25rem); }

.site-footer { padding-block: var(--space-7) var(--space-6); border-top: 1px solid var(--line); background: #061111; }
.footer-layout { display: grid; column-gap: var(--space-6); row-gap: var(--space-5); }
.footer-group { display: grid; align-content: start; gap: var(--space-2); }
.footer-legal,
.footer-company__links { display: grid; }

@media (max-width: 55.99rem) {
  .practice-list { row-gap: 3rem; }
}

@media (max-width: 47.99rem) {
  .company-layout { gap: 2.25rem; }
}

@media (min-width: 56rem) {
  .practice-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: clamp(3rem, 4.7vw, 4.5rem);
  }
  .practice-item:nth-child(even) {
    position: relative;
    top: clamp(0.625rem, 1vw, 1rem);
    left: clamp(-2.5rem, -3vw, -1.5rem);
  }
  .practice-section .section-coda { margin-top: clamp(5.5rem, 6.2vw, 6.75rem); }
}

@media (min-width: 70rem) {
  .download-card .button {
    width: clamp(9.5rem, 11vw, 10.5rem);
    padding-inline: 1.5rem;
    justify-self: center;
    white-space: nowrap;
  }
}

@media (min-width: 48rem) {
  .philosophy-chapter-inner { grid-template-columns: 1.12fr 4.88fr; }
  .chapter-copy { grid-column: 2; }
  .download-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: end; }
  .download-actions { width: 90%; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 3.8vw, 3.75rem); justify-self: end; }
  .company-layout { grid-template-columns: 0.78fr 1.22fr; }
  .company-copy { position: relative; top: clamp(1.25rem, 2vw, 1.875rem); }
  .footer-layout { grid-template-columns: 1.25fr 1fr 1.15fr; }
}

@media (max-width: 59.99rem) {
  .hero {
    --inward-center-x: 68.5%;
    --inward-center-y: 47.25%;
  }

  .hero-content {
    padding-top: calc(var(--header-height) + clamp(1.5rem, 5vh, 3rem) + 2svh);
    padding-bottom: max(5.5rem, calc(env(safe-area-inset-bottom) + 4.5rem));
  }

  .hero-content h1 { margin-block: var(--space-3); }
  .hero-content .display-heading--hero { max-width: var(--display-hero-width); }
  .hero-content .content-paragraph { max-width: 39rem; }
  .hero-content .button { margin-top: var(--space-4); }
  .hero-inward__object { width: clamp(13rem, 56vw, 22.5rem); }
}

@media (max-width: 30rem) {
  .hero {
    --inward-center-x: 68.5%;
    --inward-center-y: 49.25%;
  }
  .hero-content .content-paragraph { font-size: 0.875rem; line-height: 1.62; }
  .hero-content .content-paragraph + .content-paragraph { max-width: 34rem; font-size: 0.8125rem; opacity: 0.72; }
}

@media (max-height: 43rem) and (max-width: 59.99rem) {
  .hero { --inward-center-y: 48.25%; }
  .hero-content { padding-top: calc(var(--header-height) + 1.25rem); }
  .hero-content .content-paragraph + .content-paragraph { display: none; }
  .hero-inward__object { width: clamp(12rem, 48vw, 16.5rem); }
}

@media (min-width: 64rem) {
  .product-layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; }
  .product-wavefront-visual { width: min(68rem, 116%); max-width: none; margin-inline: -8%; }
}

@media (min-width: 70rem) {
  .nav-panel { position: static; display: flex; padding: 0; border: 0; align-items: center; gap: var(--space-5); background: transparent; opacity: 1; visibility: visible; transform: none; }
  .nav-links { display: flex; align-items: center; gap: clamp(0.85rem, 1.35vw, 1.5rem); }
}

@media (min-width: 72rem) {
  .experience-scenes { width: 50%; margin-left: 50%; }
  .experience-visual { width: 58%; }
  .experience-scene { --experience-scene-inline: clamp(3rem, 6vw, 7rem); }
}

@media (min-width: 120rem) {
  .experience-story {
    width: min(100%, var(--experience-ultrawide-stage-max));
    margin-inline: auto;
    padding-inline: var(--experience-ultrawide-stage-gutter);
  }

  .experience-visual {
    width: var(--experience-ultrawide-visual-max);
    max-width: 100%;
  }

  .experience-core {
    width: min(100%, 62rem, calc(var(--experience-ultrawide-asset-max-height) * 1.333333));
  }

  .experience-scenes {
    width: var(--experience-ultrawide-copy-max);
    max-width: 100%;
    margin-left: calc(var(--experience-ultrawide-visual-max) + var(--experience-ultrawide-gap));
  }

  .experience-scene {
    --experience-scene-inline: 0px;
    width: 100%;
    max-width: var(--experience-ultrawide-copy-max);
  }
}