:root {
  --story-paper: #d9dad4;
  --story-paper-soft: #e7e6df;
  --story-ink: #101413;
  --story-muted: rgba(16, 25, 23, .56);
  --story-dark: #070a0a;
  --story-light: #eef2f0;
  --story-serif-muted: rgba(45, 65, 60, .45);
  --story-gutter: clamp(24px, 6.8vw, 112px);
  --story-max: 1460px;
}

.home-story-page {
  background: var(--story-dark);
  color: var(--story-ink);
}

.home-story-page main {
  position: relative;
  overflow: clip;
}

.story-section,
.story-close {
  position: relative;
  isolation: isolate;
}

.story-section {
  min-height: 108svh;
  overflow: hidden;
}

.story-canvas,
.story-wash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.story-canvas {
  z-index: -3;
  display: block;
}

.story-wash {
  z-index: -2;
  pointer-events: none;
}

.story-inner,
.story-close-inner {
  width: min(100%, var(--story-max));
  margin: 0 auto;
  padding-inline: var(--story-gutter);
}

.story-inner {
  display: grid;
  min-height: 108svh;
  align-content: center;
  padding-top: clamp(116px, 15vh, 174px);
  padding-bottom: clamp(88px, 11vh, 128px);
}

.story-eyebrow {
  margin: 0 0 clamp(28px, 4.5vh, 48px);
  color: rgba(24, 47, 42, .48);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  line-height: 1.3;
  text-transform: uppercase;
}

.story-heading {
  position: relative;
  max-width: 1220px;
}

.story-heading--narrow {
  max-width: 1080px;
}

.story-heading h2,
.story-heading .story-serif,
.story-close h2 {
  margin: 0;
  text-wrap: balance;
}

.story-heading h2,
.story-close h2 {
  font-size: clamp(48px, 6.15vw, 94px);
  font-weight: 430;
  letter-spacing: -.074em;
  line-height: .91;
}

.story-heading .story-serif,
.story-close h2 em {
  display: block;
  color: var(--story-serif-muted);
  font-family: var(--brand-serif);
  font-size: clamp(50px, 6.25vw, 96px);
  font-style: normal;
  font-weight: 400;
  letter-spacing: -.052em;
  line-height: .86;
}

.story-summary {
  max-width: 620px;
  margin: clamp(46px, 7vh, 76px) 0 0;
  color: var(--story-muted);
  font-size: clamp(14px, 1vw, 17px);
  font-weight: 350;
  letter-spacing: -.025em;
  line-height: 1.68;
  text-wrap: pretty;
}

.story-summary--right {
  justify-self: end;
}

.story-next,
.story-product-link,
.story-contact {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  color: inherit;
  transition: padding .45s var(--ease-out), color .25s ease;
}

.story-next:hover,
.story-next:focus-visible,
.story-product-link:hover,
.story-product-link:focus-visible,
.story-contact:hover,
.story-contact:focus-visible {
  padding-right: 10px;
  outline: none;
}

.story-next {
  width: min(100%, 275px);
  margin-top: clamp(52px, 8vh, 88px);
  padding: 15px 0;
  border-top: 1px solid rgba(16, 31, 28, .2);
  border-bottom: 1px solid rgba(16, 31, 28, .2);
  font-size: 14px;
}

.story-product-link {
  width: min(100%, 315px);
  margin-top: clamp(54px, 8vh, 88px);
  padding: 17px 0;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  font-size: 14px;
}

/* 01 — a calm definition, emerging directly from the dark hero. */
.story-thesis {
  background: #d9dad4;
  color: #11201d;
}

.story-thesis::before {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  height: clamp(110px, 17vh, 210px);
  background: linear-gradient(180deg, #040405 0%, rgba(4, 4, 5, .78) 18%, rgba(20, 24, 23, .18) 66%, transparent 100%);
  content: "";
  pointer-events: none;
}

.story-thesis .story-wash {
  background:
    linear-gradient(90deg, rgba(235, 234, 226, .8), rgba(225, 224, 215, .16) 56%, rgba(93, 111, 106, .12)),
    linear-gradient(180deg, transparent 32%, rgba(235, 234, 226, .18) 74%, rgba(123, 133, 127, .12));
}

.story-thesis-inner {
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .48fr);
  grid-template-rows: auto auto auto;
  gap: 0 clamp(54px, 9vw, 145px);
}

.story-thesis .story-eyebrow,
.story-thesis .story-heading {
  grid-column: 1 / -1;
}

.story-thesis .story-summary {
  grid-column: 2;
}

.story-thesis .story-next {
  grid-column: 1;
  grid-row: 3;
  align-self: end;
}

/* 02 — disconnected state. */
.story-fragments {
  background: #070a0a;
  color: #edf1ef;
}

.story-fragments .story-wash {
  background:
    radial-gradient(ellipse 48% 68% at 86% 18%, rgba(70, 92, 86, .12), transparent 73%),
    linear-gradient(90deg, rgba(5, 8, 8, .9), rgba(5, 8, 8, .22) 56%, rgba(5, 8, 8, .76));
}

.story-fragments .story-eyebrow {
  color: rgba(205, 221, 216, .4);
}

.story-fragments .story-heading .story-serif {
  max-width: 1120px;
  color: rgba(186, 204, 198, .46);
}

.story-copy-pair {
  display: grid;
  width: min(100%, 860px);
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 8vw, 128px);
  justify-self: end;
  margin-top: clamp(62px, 9vh, 102px);
}

.story-copy-pair p {
  margin: 0;
  color: rgba(213, 225, 221, .55);
  font-size: clamp(14px, 1vw, 17px);
  font-weight: 350;
  letter-spacing: -.025em;
  line-height: 1.68;
}

.story-bridge {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 12px;
  align-items: center;
  margin-top: clamp(74px, 11vh, 126px);
  padding-top: 22px;
  border-top: 1px solid rgba(215, 228, 224, .13);
  color: rgba(215, 228, 224, .46);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.story-bridge strong {
  color: rgba(237, 243, 240, .82);
  font-weight: 500;
}

.story-bridge i {
  height: 1px;
  margin-left: 20px;
  background: linear-gradient(90deg, rgba(219, 232, 228, .35), transparent);
}

/* 03 — shared operational model. */
.story-intelligence {
  background: #d4d5d3;
  color: #111719;
}

.story-intelligence .story-wash {
  background:
    radial-gradient(ellipse 54% 62% at 84% 58%, rgba(56, 47, 126, .1), transparent 72%),
    linear-gradient(105deg, rgba(238, 237, 233, .85), rgba(218, 217, 226, .24) 56%, rgba(21, 27, 58, .1));
}

.story-intelligence .story-serif {
  color: rgba(43, 46, 87, .43);
}

.story-lexicon {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-top: clamp(72px, 11vh, 124px);
  border-top: 1px solid rgba(22, 27, 46, .16);
  border-bottom: 1px solid rgba(22, 27, 46, .16);
}

.story-lexicon span {
  display: flex;
  min-height: 90px;
  align-items: flex-end;
  padding: 18px 12px 18px 0;
  border-right: 1px solid rgba(22, 27, 46, .11);
  color: rgba(25, 28, 49, .56);
  font-size: 11px;
  letter-spacing: -.01em;
}

.story-lexicon span:last-child {
  border-right: 0;
  padding-left: 12px;
}

.story-intelligence .story-product-link {
  border-color: rgba(19, 23, 40, .22);
}

/* 04 — physical expression. */
.story-factory {
  background: #11110f;
  color: #f4eee8;
}

.story-factory .story-wash {
  background:
    radial-gradient(ellipse 38% 90% at 87% 52%, rgba(173, 78, 31, .16), transparent 72%),
    linear-gradient(90deg, rgba(7, 9, 9, .9), rgba(9, 10, 10, .38) 54%, rgba(27, 16, 11, .72));
}

.story-product-lockup {
  display: inline-flex;
  align-items: center;
  gap: 17px;
  margin-bottom: clamp(46px, 7vh, 76px);
  color: rgba(244, 237, 229, .72);
}

.story-product-lockup span {
  font-family: var(--brand-serif);
  font-size: clamp(27px, 2.3vw, 36px);
}

.story-product-lockup i {
  width: 1px;
  height: 30px;
  background: rgba(244, 237, 229, .25);
}

.story-product-lockup strong {
  font-size: clamp(14px, 1.05vw, 17px);
  font-weight: 350;
  letter-spacing: -.03em;
}

.story-factory .story-heading .story-serif {
  color: rgba(211, 168, 132, .62);
}

.story-factory .story-summary {
  color: rgba(235, 222, 211, .6);
}

.story-factory-proof {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
  gap: 18px;
  align-items: center;
  margin-top: clamp(68px, 10vh, 112px);
  padding: 18px 0;
  border-top: 1px solid rgba(241, 223, 207, .14);
  border-bottom: 1px solid rgba(241, 223, 207, .14);
  color: rgba(237, 222, 210, .46);
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.story-factory-proof i {
  height: 1px;
  background: linear-gradient(90deg, rgba(224, 184, 151, .16), rgba(224, 142, 76, .65));
}

.story-factory-proof strong {
  color: #e8b083;
  font-weight: 500;
}

.story-factory .story-product-link {
  border-color: rgba(241, 223, 207, .22);
}

/* 05 — bounded action and evidence. */
.story-security {
  background: #081011;
  color: #edf4f3;
}

.story-security .story-wash {
  background:
    radial-gradient(ellipse 46% 72% at 76% 44%, rgba(97, 146, 141, .13), transparent 72%),
    linear-gradient(90deg, rgba(5, 10, 11, .88), rgba(7, 15, 16, .28) 58%, rgba(4, 9, 10, .72));
}

.story-security .story-eyebrow {
  color: rgba(187, 218, 213, .42);
}

.story-security .story-serif {
  color: rgba(171, 205, 199, .54);
}

.story-security .story-summary {
  color: rgba(210, 228, 224, .56);
}

.story-proof-line {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(74px, 11vh, 124px);
  padding-top: 30px;
  border-top: 1px solid rgba(200, 226, 221, .18);
}

.story-proof-line span {
  position: relative;
  z-index: 1;
  color: rgba(214, 232, 228, .56);
  font-size: 11px;
  letter-spacing: .04em;
}

.story-proof-line span i {
  position: absolute;
  top: -35px;
  left: 0;
  width: 9px;
  height: 9px;
  border: 1px solid rgba(191, 225, 218, .56);
  border-radius: 50%;
  background: #081011;
}

.story-proof-line span:last-of-type {
  color: rgba(230, 243, 240, .9);
  text-align: right;
}

.story-proof-line span:last-of-type i {
  right: 0;
  left: auto;
  background: #b7d9d2;
  box-shadow: 0 0 18px rgba(183, 217, 210, .6);
}

.story-security .story-product-link {
  border-color: rgba(200, 226, 221, .22);
}

/* Final — intentionally still and direct. */
.story-close {
  display: grid;
  min-height: 88svh;
  align-items: center;
  background: #e6e4dd;
  color: #151816;
}

.story-close-inner {
  padding-top: clamp(110px, 15vh, 164px);
  padding-bottom: clamp(96px, 13vh, 148px);
}

.story-close h2 {
  max-width: 1120px;
}

.story-close h2 em {
  color: rgba(41, 50, 46, .42);
}

.story-close-inner > p:not(.story-eyebrow) {
  max-width: 570px;
  margin: clamp(48px, 7vh, 72px) 0 0 auto;
  color: rgba(31, 39, 35, .58);
  font-size: clamp(14px, 1vw, 17px);
  line-height: 1.68;
}

.story-contact {
  width: min(100%, 330px);
  margin-top: clamp(64px, 9vh, 96px);
  padding: 20px 0;
  border-top: 1px solid rgba(24, 30, 27, .2);
  border-bottom: 1px solid rgba(24, 30, 27, .2);
  font-size: 15px;
}

/* Header stays legible as the story crosses light and dark materials. */
.home-story-page .site-header.is-light {
  color: #101413;
  text-shadow: none;
}

.home-story-page .site-header.is-light .nav {
  border-bottom-color: rgba(16, 20, 19, .08);
  background: rgba(235, 235, 229, .6);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset;
  -webkit-backdrop-filter: blur(22px) saturate(115%);
  backdrop-filter: blur(22px) saturate(115%);
}

.home-story-page .site-header.is-light .nav-link,
.home-story-page .site-header.is-light .brand {
  color: rgba(16, 20, 19, .76);
  text-shadow: none;
}

.home-story-page .site-header.is-light .nav-link::before {
  background: rgba(16, 20, 19, .68);
}

.home-story-page .site-header.is-light .nav .pill-link {
  border-color: rgba(16, 20, 19, .13);
  background: rgba(248, 248, 245, .28);
  color: #101413;
}

.home-story-page .site-header.is-light .nav .pill-icon {
  background: #101413;
  color: #fff;
}

.home-story-page .site-header.is-light .menu-toggle {
  background: rgba(16, 20, 19, .08);
  color: #101413;
}

/* Motion is restrained and only enabled after the document is ready. */
.story-motion-ready [data-story-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1s ease, transform 1.05s var(--ease-out);
}

.story-motion-ready [data-story-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 900px) {
  .story-section,
  .story-inner {
    min-height: 100svh;
  }

  .story-inner {
    display: block;
    padding-top: 132px;
    padding-bottom: 96px;
  }

  .story-thesis-inner {
    display: block;
  }

  .story-summary--right {
    justify-self: auto;
  }

  .story-copy-pair {
    width: 100%;
    margin-left: 0;
  }

  .story-lexicon {
    grid-template-columns: repeat(4, 1fr);
  }

  .story-lexicon span {
    min-height: 78px;
    border-bottom: 1px solid rgba(22, 27, 46, .11);
  }

  .story-factory-proof {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .story-factory-proof i {
    width: 1px;
    height: 18px;
    margin-left: 3px;
    background: linear-gradient(180deg, rgba(224, 184, 151, .16), rgba(224, 142, 76, .65));
  }
}

@media (max-width: 560px) {
  .story-heading,
  .story-summary,
  .story-copy-pair,
  .story-product-lockup,
  .story-close h2,
  .story-close-inner > p:not(.story-eyebrow) {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .story-inner,
  .story-close-inner {
    padding-right: 22px;
    padding-left: 22px;
  }

  .story-heading h2,
  .story-close h2 {
    font-size: clamp(39px, 11.25vw, 47px);
    letter-spacing: -.067em;
    line-height: .93;
    overflow-wrap: normal;
    text-wrap: wrap;
  }

  .story-heading .story-serif,
  .story-close h2 em {
    margin-top: 4px;
    font-size: clamp(40px, 11.5vw, 48px);
    line-height: .9;
    overflow-wrap: normal;
    text-wrap: wrap;
  }

  .story-summary,
  .story-copy-pair p,
  .story-close-inner > p:not(.story-eyebrow) {
    font-size: 14px;
    overflow-wrap: break-word;
  }

  .story-copy-pair {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .story-bridge {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .story-bridge i {
    width: 100%;
    margin: 12px 0 0;
  }

  .story-lexicon {
    grid-template-columns: repeat(2, 1fr);
  }

  .story-lexicon span:nth-child(2n) {
    padding-left: 12px;
    border-right: 0;
  }

  .story-product-lockup {
    margin-bottom: 44px;
  }

  .story-proof-line {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 0;
    border-top: 0;
    border-left: 1px solid rgba(200, 226, 221, .18);
  }

  .story-proof-line span {
    min-height: 58px;
    padding: 4px 0 0 25px;
  }

  .story-proof-line span i,
  .story-proof-line span:last-of-type i {
    top: 5px;
    right: auto;
    left: -5px;
  }

  .story-proof-line span:last-of-type {
    text-align: left;
  }

  .story-close {
    min-height: 78svh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-motion-ready [data-story-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .story-canvas {
    opacity: .88;
  }
}