/* Susemies web direction lock 2026-06-25
   Loaded after styles.css to preserve the draft while locking the current visual direction. */

html.susemies-preview-scale {
  --susemies-ui-scale: 0.8;
  --susemies-ui-inv-scale: calc(1 / var(--susemies-ui-scale));
  overflow-x: hidden;
}

html.susemies-preview-scale,
html.susemies-preview-scale body {
  min-height: auto;
  height: auto;
}

html.susemies-preview-scale #susemies-scale-shell {
  width: 100%;
  min-height: auto;
  transform-origin: top left;
  overflow: visible;
}

html.susemies-preview-scale:not(.susemies-nozoom) #susemies-scale-shell {
  transform: none;
  zoom: var(--susemies-ui-scale);
}

html.susemies-preview-scale.susemies-nozoom #susemies-scale-shell {
  transform: scale(var(--susemies-ui-scale));
  transform-origin: top center;
  zoom: 1;
}

html.susemies-preview-scale body {
  overflow-x: hidden;
}

body {
  background:
    linear-gradient(118deg, rgba(15, 26, 46, 0.09) 0 10%, transparent 10% 100%),
    linear-gradient(62deg, transparent 0 58%, rgba(127, 153, 144, 0.26) 58% 78%, transparent 78% 100%),
    linear-gradient(18deg, transparent 0 72%, rgba(215, 180, 74, 0.22) 72% 80%, transparent 80% 100%),
    repeating-linear-gradient(90deg, rgba(15, 26, 46, 0.062) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg, rgba(15, 26, 46, 0.044) 0 1px, transparent 1px 56px),
    #edf2f0;
  background-size:
    150% 150%,
    140% 140%,
    170% 170%,
    56px 56px,
    56px 56px,
    auto;
  animation: susemiesBodyFieldFinal 28s ease-in-out infinite;
}

body::before {
  z-index: 80;
  width: 14px;
  background:
    linear-gradient(180deg, var(--semita), var(--decision) 46%, var(--semita));
}

body::after {
  position: fixed;
  right: -78px;
  bottom: -92px;
  z-index: 0;
  width: 310px;
  height: 310px;
  content: "";
  background:
    url("./assets/susemies-symbol-lightarch-semitagold.svg") center / contain no-repeat;
  opacity: 0.11;
  filter: saturate(0.88);
  transform: rotate(-18deg);
  animation: susemiesGhostMarkFinal 18s ease-in-out infinite;
  pointer-events: none;
}

main,
.section,
.ticker-band {
  position: relative;
  z-index: 1;
}

.site-header {
  z-index: 90;
  border-bottom: 2px solid rgba(15, 26, 46, 0.14);
  background:
    linear-gradient(94deg, rgba(255, 255, 255, 0.86) 0 42%, rgba(232, 239, 242, 0.84) 42% 100%);
}

.site-nav {
  align-items: flex-start;
  gap: 8px;
}

.nav-group {
  position: relative;
}

.nav-root {
  position: relative;
  min-height: 36px;
  border: 2px solid transparent;
  background: transparent;
  transition:
    transform 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.nav-root:hover,
.nav-root.is-active,
.nav-group.is-active > .nav-root {
  border-color: var(--ink);
  background: var(--semita);
  box-shadow: 5px 5px 0 rgba(15, 26, 46, 0.16);
  transform: rotate(-1.2deg);
}

.subnav {
  position: absolute;
  top: calc(100% + 9px);
  left: -8px;
  z-index: 100;
  display: grid;
  min-width: 176px;
  padding: 8px;
  border: 2px solid var(--ink);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 8px 8px 0 rgba(15, 26, 46, 0.18);
  opacity: 0;
  transform: translateY(-6px) rotate(-1.6deg);
  pointer-events: none;
  transition:
    opacity 140ms ease,
    transform 140ms ease;
}

.nav-group:hover .subnav,
.nav-group:focus-within .subnav {
  opacity: 1;
  transform: translateY(0) rotate(-1.6deg);
  pointer-events: auto;
}

.subnav a {
  justify-content: flex-start;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid transparent;
  font-size: 0.78rem;
  text-transform: uppercase;
}

.subnav a:hover,
.subnav a.is-active {
  border-color: var(--ink);
  background: var(--cloud);
}

.hero {
  isolation: isolate;
  min-height: 91svh;
  background:
    url("./assets/susemies-symbol-quiet-field.svg") 88% 18% / 244px auto no-repeat,
    url("./assets/susemies-symbol-semita-core.svg") 11% 84% / 168px auto no-repeat,
    linear-gradient(102deg, rgba(215, 180, 74, 0.35) 0 13%, transparent 13% 100%),
    linear-gradient(74deg, transparent 0 45%, rgba(15, 26, 46, 0.115) 45% 51%, transparent 51% 100%),
    linear-gradient(164deg, transparent 0 59%, rgba(127, 153, 144, 0.38) 59% 78%, transparent 78% 100%),
    linear-gradient(21deg, transparent 0 70%, rgba(215, 180, 74, 0.34) 70% 78%, transparent 78% 100%),
    repeating-linear-gradient(90deg, rgba(15, 26, 46, 0.068) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg, rgba(15, 26, 46, 0.052) 0 1px, transparent 1px 56px),
    #e9f0ef;
  background-size:
    244px auto,
    168px auto,
    150% 150%,
    140% 140%,
    160% 160%,
    180% 180%,
    56px 56px,
    56px 56px,
    auto;
  background-position:
    88% 18%,
    11% 84%,
    0% 0%,
    100% 0%,
    0% 100%,
    100% 100%,
    0 0,
    0 0,
    0 0;
  animation: susemiesHeroFieldFinal 20s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}

.hero::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  background:
    linear-gradient(90deg, transparent 0 9%, rgba(255, 255, 255, 0.52) 9% 29%, transparent 29% 100%),
    linear-gradient(132deg, transparent 0 51%, rgba(15, 26, 46, 0.1) 51% 52.2%, transparent 52.2% 100%),
    linear-gradient(40deg, transparent 0 66%, rgba(255, 255, 255, 0.38) 66% 82%, transparent 82% 100%),
    radial-gradient(circle at calc(58% + var(--mx, 0) * 10%) calc(30% + var(--my, 0) * 8%), rgba(215, 180, 74, 0.2), transparent 30%);
  mix-blend-mode: multiply;
  opacity: 0.84;
  animation: susemiesSignalSweepFinal 13s ease-in-out infinite;
  pointer-events: none;
}

.hero::after {
  inset: 92px 28px 32px 28px;
  z-index: 0;
  border: 2px solid rgba(15, 26, 46, 0.2);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.42), transparent 43%),
    linear-gradient(120deg, transparent 0 55%, rgba(255, 255, 255, 0.34) 55% 70%, transparent 70% 100%),
    repeating-linear-gradient(135deg, rgba(15, 26, 46, 0.055) 0 1px, transparent 1px 18px);
  box-shadow:
    14px 14px 0 rgba(215, 180, 74, 0.22),
    -10px 18px 0 rgba(127, 153, 144, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  transform: rotate(-0.5deg);
}

.chaos-radar {
  right: max(22px, calc((100vw - var(--max)) / 2 - 24px));
  bottom: 92px;
  width: 430px;
  height: 430px;
  border: 2px dashed rgba(15, 26, 46, 0.26);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.38), transparent 62%),
    repeating-linear-gradient(45deg, rgba(15, 26, 46, 0.09) 0 2px, transparent 2px 15px);
  opacity: 0.78;
  animation: susemiesRadarDriftFinal 11s ease-in-out infinite;
}

.hero-copy {
  z-index: 42;
}

.hero h1 {
  max-width: 940px;
  text-wrap: balance;
}

.hero h1 span:first-child {
  background:
    linear-gradient(transparent 58%, rgba(215, 180, 74, 0.8) 58%);
}

.hero-lead {
  z-index: 43;
  max-width: 690px;
  border: 2.5px solid var(--ink);
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.92) 0 76%, rgba(232, 239, 242, 0.92) 76% 100%);
  box-shadow:
    10px 10px 0 rgba(15, 26, 46, 0.15),
    -6px 6px 0 rgba(215, 180, 74, 0.28);
}

.hero-actions {
  z-index: 44;
}

.hero-collage {
  z-index: 20;
}

.paper-note,
.layer-tag,
.micro-window,
.hero-manifesto {
  backdrop-filter: blur(2px);
}

.paper-note,
.layer-tag,
.micro-window {
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease;
}

.paper-note:hover,
.layer-tag:hover,
.micro-window:hover,
.board-item:hover,
.principle-grid article:hover {
  filter: saturate(1.08);
}

.note-a {
  top: 46px;
  right: max(520px, calc((100vw - var(--max)) / 2 + 512px));
}

.note-b {
  right: max(48px, calc((100vw - var(--max)) / 2 + 4px));
  bottom: 324px;
}

.note-c {
  top: 468px;
  right: max(324px, calc((100vw - var(--max)) / 2 + 318px));
}

.note-d {
  top: 72px;
  right: max(34px, calc((100vw - var(--max)) / 2 - 2px));
}

.hero-symbol {
  top: 96px;
  right: max(34px, calc((100vw - var(--max)) / 2 + 12px));
  width: 384px;
  opacity: 0.98;
}

.layer-one {
  top: 190px;
  right: max(468px, calc((100vw - var(--max)) / 2 + 460px));
}

.layer-two {
  top: 286px;
  right: max(506px, calc((100vw - var(--max)) / 2 + 498px));
}

.layer-three {
  top: 392px;
  right: max(446px, calc((100vw - var(--max)) / 2 + 438px));
}

.layer-four {
  top: 500px;
  right: max(232px, calc((100vw - var(--max)) / 2 + 224px));
}

.gold-rule {
  top: 548px;
  width: min(820px, 64vw);
  background:
    linear-gradient(90deg, transparent 0 8%, var(--semita) 8% 72%, transparent 72% 100%);
}

.window-one {
  top: 664px;
  right: max(590px, calc((100vw - var(--max)) / 2 + 582px));
  left: auto;
}

.window-two {
  top: 752px;
  right: max(356px, calc((100vw - var(--max)) / 2 + 348px));
  left: auto;
}

.window-three {
  top: 678px;
  right: max(128px, calc((100vw - var(--max)) / 2 + 118px));
}

.hero-manifesto {
  z-index: 45;
  right: max(40px, calc((100vw - var(--max)) / 2 + 18px));
  bottom: 56px;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0.92) 0 78%, rgba(244, 239, 217, 0.92) 78% 100%);
}

.standard-section,
.manifesto-section {
  background:
    url("./assets/susemies-symbol-lightarch-semitagold.svg") calc(100% - 34px) 48px / 146px auto no-repeat,
    linear-gradient(116deg, rgba(215, 180, 74, 0.2) 0 15%, transparent 15% 100%),
    linear-gradient(64deg, transparent 0 67%, rgba(127, 153, 144, 0.26) 67% 86%, transparent 86% 100%),
    repeating-linear-gradient(90deg, rgba(15, 26, 46, 0.058) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg, rgba(15, 26, 46, 0.042) 0 1px, transparent 1px 56px),
    #f1f5f3;
  animation: susemiesSectionFieldFinal 24s ease-in-out infinite;
}

.ecosystem-section {
  background:
    url("./assets/susemies-symbol-quiet-field.svg") 4% 92% / 178px auto no-repeat,
    linear-gradient(100deg, rgba(15, 26, 46, 0.11) 0 9%, transparent 9% 100%),
    linear-gradient(156deg, transparent 0 48%, rgba(215, 180, 74, 0.25) 48% 57%, transparent 57% 100%),
    linear-gradient(28deg, transparent 0 68%, rgba(127, 153, 144, 0.3) 68% 90%, transparent 90% 100%),
    repeating-linear-gradient(90deg, rgba(15, 26, 46, 0.06) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg, rgba(15, 26, 46, 0.044) 0 1px, transparent 1px 56px),
    #e6eeee;
  animation: susemiesSectionFieldFinal 26s ease-in-out infinite reverse;
}

.identity-section {
  background:
    linear-gradient(112deg, rgba(15, 26, 46, 0.04) 0 18%, transparent 18% 100%),
    linear-gradient(68deg, transparent 0 58%, rgba(215, 180, 74, 0.2) 58% 73%, transparent 73% 100%),
    repeating-linear-gradient(90deg, rgba(15, 26, 46, 0.052) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg, rgba(15, 26, 46, 0.038) 0 1px, transparent 1px 56px),
    #eef3f1;
}

.layer-console,
.operating-loop,
.principle-grid article,
.contact-card {
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.94) 0 74%, rgba(244, 239, 217, 0.8) 74% 100%);
}

.button:hover,
.layer-button:hover,
.contact-card a:hover {
  transform: translate(-4px, -5px) rotate(-1deg);
  box-shadow: 8px 8px 0 rgba(15, 26, 46, 0.2);
}

.page-panel {
  position: relative;
  overflow: hidden;
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid rgba(15, 26, 46, 0.1);
}

.page-panel::after {
  position: absolute;
  right: -0.05em;
  bottom: -0.19em;
  z-index: 0;
  color: rgba(15, 26, 46, 0.032);
  font-size: clamp(6rem, 15vw, 15rem);
  line-height: 0.8;
  font-weight: 950;
  letter-spacing: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.page-panel > * {
  position: relative;
  z-index: 1;
}

.page-panel-a::after {
  content: "ABOUT";
}

.page-panel-b::after {
  content: "FOUNDATION";
}

.page-panel-c::after {
  content: "VISION";
}

.page-panel-d::after {
  content: "BRAND";
}

.page-panel-e::after {
  content: "SOLVE";
}

.page-panel-f::after {
  content: "PRODUCT";
}

.about-section .split-intro {
  transform: rotate(-0.8deg);
}

.about-section .principle-grid article:nth-child(1) {
  transform: rotate(1.2deg);
}

.about-section .principle-grid article:nth-child(2) {
  transform: translateY(22px) rotate(-1.5deg);
}

.about-section .principle-grid article:nth-child(3) {
  transform: translateY(-8px) rotate(1deg);
}

.about-section {
  min-height: clamp(780px, 76vw, 1040px);
  padding-top: clamp(108px, 9vw, 146px);
  padding-bottom: clamp(112px, 9vw, 156px);
}

.about-section .principle-grid {
  align-items: start;
  gap: clamp(26px, 3vw, 46px);
  margin-top: clamp(66px, 6vw, 94px);
}

.about-section .principle-grid article {
  min-height: clamp(304px, 24vw, 372px);
  padding: clamp(34px, 3.2vw, 48px);
  overflow: visible;
}

.about-section .principle-grid article > span:not(.principle-icon),
.about-section .principle-grid article h3,
.about-section .principle-grid article p {
  position: relative;
  z-index: 2;
}

.principle-icon {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  width: clamp(96px, 8.2vw, 136px);
  height: clamp(86px, 7.2vw, 120px);
  margin: 0;
  border: 3px solid var(--ink);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0 42%, transparent 42% 100%),
    var(--ink);
  box-shadow:
    10px 11px 0 rgba(215, 180, 74, 0.58),
    0 18px 28px rgba(15, 26, 46, 0.16);
  pointer-events: none;
  transform: rotate(-8deg);
  animation: susemiesPrincipleIconFloat 6.8s ease-in-out infinite;
}

.principle-icon::before {
  position: absolute;
  inset: 10px -10px -10px 10px;
  z-index: -1;
  content: "";
  border: 2px solid rgba(15, 26, 46, 0.22);
  background: rgba(246, 248, 250, 0.78);
  transform: rotate(4deg);
}

.principle-icon img {
  width: 54%;
  height: auto;
  filter:
    brightness(0) invert(96%) sepia(8%) saturate(176%) hue-rotate(172deg) brightness(102%) contrast(97%)
    drop-shadow(0 8px 10px rgba(15, 26, 46, 0.18));
}

.principle-icon::after {
  position: absolute;
  right: 11px;
  bottom: 10px;
  width: 38%;
  height: 5px;
  content: "";
  background: var(--semita);
  transform: rotate(-5deg);
}

.about-section .principle-grid article:nth-child(1) .principle-icon {
  top: -46px;
  left: clamp(14px, 1.8vw, 28px);
}

.about-section .principle-grid article:nth-child(2) .principle-icon {
  top: -56px;
  right: -28px;
  background:
    linear-gradient(120deg, rgba(246, 248, 250, 0.96) 0 46%, transparent 46% 100%),
    var(--semita);
  box-shadow:
    11px 12px 0 rgba(15, 26, 46, 0.18),
    -10px 12px 0 rgba(127, 153, 144, 0.28);
  transform: rotate(9deg);
  animation-delay: -1.4s;
}

.about-section .principle-grid article:nth-child(2) .principle-icon img,
.about-section .principle-grid article:nth-child(3) .principle-icon img {
  filter:
    brightness(0) saturate(100%) invert(8%) sepia(22%) saturate(1260%) hue-rotate(179deg) brightness(94%) contrast(99%)
    drop-shadow(0 8px 10px rgba(15, 26, 46, 0.16));
}

.about-section .principle-grid article:nth-child(3) .principle-icon {
  right: clamp(18px, 3.4vw, 54px);
  bottom: -46px;
  background:
    linear-gradient(145deg, rgba(246, 248, 250, 0.9) 0 18%, transparent 18% 100%),
    var(--sage);
  box-shadow:
    -10px 12px 0 rgba(215, 180, 74, 0.34),
    10px 10px 0 rgba(127, 153, 144, 0.22);
  transform: rotate(-3deg);
  animation-delay: -2.2s;
}

.about-section .principle-grid article:nth-child(3) .principle-icon::after {
  background: var(--ink);
}

@media (max-width: 1020px) {
  .about-section {
    min-height: auto;
  }

  .about-section .principle-grid {
    margin-top: 58px;
  }

  .about-section .principle-grid article {
    min-height: 260px;
    padding-top: 72px;
  }

  .principle-icon {
    top: -34px;
    right: 20px;
    left: auto;
    bottom: auto;
    width: 82px;
    height: 82px;
  }

  .about-section .principle-grid article:nth-child(1) .principle-icon,
  .about-section .principle-grid article:nth-child(2) .principle-icon,
  .about-section .principle-grid article:nth-child(3) .principle-icon {
    top: -34px;
    right: 20px;
    left: auto;
    bottom: auto;
  }
}

@keyframes susemiesPrincipleIconFloat {
  0%,
  100% {
    translate: 0 0;
  }
  44% {
    translate: 8px -10px;
  }
  72% {
    translate: -5px 4px;
  }
}

.founder-section {
  min-height: 720px;
  background:
    url("./assets/susemies-symbol-semita-core.svg") 94% 78% / 190px auto no-repeat,
    linear-gradient(115deg, rgba(215, 180, 74, 0.24) 0 18%, transparent 18% 100%),
    linear-gradient(68deg, transparent 0 57%, rgba(127, 153, 144, 0.32) 57% 82%, transparent 82% 100%),
    repeating-linear-gradient(90deg, rgba(15, 26, 46, 0.058) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg, rgba(15, 26, 46, 0.042) 0 1px, transparent 1px 56px),
    #edf2ef;
}

.founder-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(320px, 1fr);
  gap: clamp(34px, 5vw, 86px);
  align-items: start;
  max-width: var(--max);
  margin: 0 auto;
}

.founder-title {
  position: relative;
  z-index: 3;
  border: 3px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  padding: clamp(26px, 4vw, 52px);
  box-shadow: 14px 14px 0 rgba(215, 180, 74, 0.7);
  transform: rotate(-2.2deg);
}

.founder-title span {
  display: inline-flex;
  margin-bottom: 22px;
  color: var(--semita);
  font-size: 0.82rem;
  font-weight: 950;
  text-transform: uppercase;
}

.founder-title h2,
.products-head h2 {
  margin: 0;
  font-size: clamp(3rem, 5.5vw, 6.4rem);
  line-height: 0.94;
}

.founder-copy {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 18px;
  margin-top: 52px;
  padding: clamp(24px, 3.6vw, 44px);
  border: 3px solid var(--ink);
  background:
    linear-gradient(122deg, rgba(255, 255, 255, 0.94) 0 76%, rgba(244, 239, 217, 0.88) 76% 100%);
  box-shadow: -12px 14px 0 rgba(15, 26, 46, 0.14);
  transform: rotate(1.1deg);
}

.founder-copy p,
.founder-copy b,
.products-head p,
.product-axis p {
  margin: 0;
  color: var(--graphite);
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.75;
  font-weight: 800;
  word-break: keep-all;
}

.founder-copy b {
  color: var(--ink);
  font-weight: 950;
}

.founder-tape {
  position: absolute;
  z-index: 1;
  padding: 12px 16px;
  border: 2px solid var(--ink);
  background: var(--semita);
  box-shadow: 7px 7px 0 rgba(15, 26, 46, 0.16);
  font-size: 0.92rem;
  font-weight: 950;
  text-transform: uppercase;
  animation: softWanderD 5.8s ease-in-out infinite;
}

.tape-one {
  top: 54px;
  left: 11%;
  transform: rotate(8deg);
}

.tape-two {
  right: auto;
  left: 24%;
  top: 18px;
  background: var(--cloud);
  transform: rotate(-6deg);
}

.tape-three {
  left: 9%;
  bottom: 122px;
  color: var(--paper);
  background: var(--ink);
  transform: rotate(5deg);
}

.tape-four {
  right: auto;
  left: 28%;
  bottom: 64px;
  background: var(--sage);
  transform: rotate(-4deg);
}

.vision-section .manifesto-layout {
  border: 3px solid var(--ink);
  background:
    linear-gradient(110deg, rgba(15, 26, 46, 0.96) 0 68%, rgba(39, 49, 65, 0.96) 68% 100%);
  box-shadow:
    18px 18px 0 rgba(215, 180, 74, 0.6),
    -14px 18px 0 rgba(127, 153, 144, 0.28);
  transform: rotate(-0.7deg);
}

.branding-section {
  grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1fr);
}

.branding-section .identity-visual {
  transform: rotate(-3.5deg);
}

.branding-section .identity-copy {
  transform: rotate(0.8deg);
}

.solutions-section .ecosystem-head {
  align-items: end;
  transform: rotate(-0.45deg);
}

.solutions-section .layer-console {
  margin-top: 56px;
  margin-inline: auto;
  width: min(100%, var(--max));
  max-width: var(--max);
  transform: rotate(0.6deg);
}

.solutions-section .operating-loop {
  transform: rotate(-0.4deg);
}

.products-section {
  min-height: 760px;
  background:
    url("./assets/susemies-symbol-quiet-field.svg") 84% 72% / 210px auto no-repeat,
    linear-gradient(102deg, rgba(215, 180, 74, 0.26) 0 14%, transparent 14% 100%),
    linear-gradient(26deg, transparent 0 60%, rgba(127, 153, 144, 0.3) 60% 86%, transparent 86% 100%),
    repeating-linear-gradient(90deg, rgba(15, 26, 46, 0.058) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg, rgba(15, 26, 46, 0.042) 0 1px, transparent 1px 56px),
    #f1f4f2;
}

.products-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: end;
  max-width: var(--max);
  margin: 0 auto 64px;
}

.products-head h2 {
  max-width: 880px;
  color: var(--ink);
}

.products-head p {
  padding: 22px 24px;
  border: 2px solid var(--ink);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 10px 10px 0 rgba(15, 26, 46, 0.14);
  transform: rotate(1.8deg);
}

.product-axis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  max-width: var(--max);
  margin: 0 auto;
}

.product-axis article {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 310px;
  padding: 24px;
  border: 3px solid var(--ink);
  background:
    linear-gradient(130deg, rgba(255, 255, 255, 0.96) 0 72%, rgba(244, 239, 217, 0.9) 72% 100%);
  box-shadow: 10px 10px 0 rgba(15, 26, 46, 0.16);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.product-axis article:nth-child(1) {
  transform: translateY(26px) rotate(-1.8deg);
}

.product-axis article:nth-child(2) {
  transform: translateY(-16px) rotate(1.4deg);
}

.product-axis article:nth-child(3) {
  transform: translateY(38px) rotate(2deg);
}

.product-axis article:nth-child(4) {
  transform: translateY(-4px) rotate(-1.2deg);
}

.product-axis article:hover {
  background: var(--semita);
  box-shadow: 14px 14px 0 rgba(15, 26, 46, 0.26);
}

.product-axis span {
  color: var(--semita);
  font-size: 0.82rem;
  font-weight: 950;
  text-transform: uppercase;
}

.product-axis article:hover span {
  color: var(--ink);
}

.product-axis h3 {
  margin: 0;
  font-size: clamp(1.5rem, 2.4vw, 2.4rem);
  line-height: 1.05;
}

.product-axis b {
  align-self: end;
  color: var(--ink);
  font-size: 0.86rem;
  line-height: 1.45;
  font-weight: 950;
  text-transform: uppercase;
}

@keyframes susemiesBodyFieldFinal {
  0%,
  100% {
    background-position:
      0% 0%,
      100% 0%,
      100% 100%,
      0 0,
      0 0,
      0 0;
  }
  50% {
    background-position:
      9% 4%,
      88% 11%,
      92% 82%,
      14px 0,
      0 14px,
      0 0;
  }
}

@keyframes susemiesHeroFieldFinal {
  0%,
  100% {
    background-position:
      88% 18%,
      11% 84%,
      0% 0%,
      100% 0%,
      0% 100%,
      100% 100%,
      0 0,
      0 0,
      0 0;
  }
  48% {
    background-position:
      86% 22%,
      13% 80%,
      13% 8%,
      86% 13%,
      8% 88%,
      94% 78%,
      11px 0,
      0 11px,
      0 0;
  }
}

@keyframes susemiesSignalSweepFinal {
  0%,
  100% {
    opacity: 0.76;
    transform: translateX(0) skewX(0deg);
  }
  52% {
    opacity: 0.94;
    transform: translateX(-18px) skewX(-2deg);
  }
}

@keyframes susemiesRadarDriftFinal {
  0%,
  100% {
    opacity: 0.62;
    transform: translate(calc(var(--mx, 0) * -18px), calc(var(--my, 0) * -14px)) rotate(8deg);
  }
  50% {
    opacity: 0.86;
    transform: translate(calc(var(--mx, 0) * -18px - 22px), calc(var(--my, 0) * -14px + 16px)) rotate(-5deg);
  }
}

@keyframes susemiesGhostMarkFinal {
  0%,
  100% {
    opacity: 0.09;
    transform: rotate(-18deg) translate(0, 0);
  }
  50% {
    opacity: 0.15;
    transform: rotate(-13deg) translate(-18px, -10px);
  }
}

@keyframes susemiesSectionFieldFinal {
  0%,
  100% {
    background-position:
      calc(100% - 34px) 48px,
      0% 0%,
      100% 100%,
      0 0,
      0 0,
      0 0;
  }
  50% {
    background-position:
      calc(100% - 48px) 60px,
      9% 8%,
      86% 84%,
      12px 0,
      0 12px,
      0 0;
  }
}

@media (max-width: 1020px) {
  body::after,
  .chaos-radar {
    opacity: 0.07;
  }

  .hero {
    min-height: 88svh;
  }

  .subnav {
    display: none;
  }

  .founder-layout,
  .products-head,
  .branding-section {
    grid-template-columns: 1fr;
  }

  .product-axis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  body {
    background:
      linear-gradient(110deg, rgba(215, 180, 74, 0.24) 0 18%, transparent 18% 100%),
      linear-gradient(68deg, transparent 0 56%, rgba(127, 153, 144, 0.24) 56% 86%, transparent 86% 100%),
      repeating-linear-gradient(90deg, rgba(15, 26, 46, 0.055) 0 1px, transparent 1px 48px),
      repeating-linear-gradient(0deg, rgba(15, 26, 46, 0.04) 0 1px, transparent 1px 48px),
      #edf3f1;
  }

  body::before {
    width: 8px;
  }

  .site-header {
    gap: 12px;
    min-height: 68px;
    padding: 12px 14px 12px 18px;
  }

  .brand img:first-child {
    width: 30px;
  }

  .brand-type {
    width: 126px;
  }

  .site-nav {
    max-width: 48vw;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .site-nav::-webkit-scrollbar {
    display: none;
  }

  .nav-root {
    min-height: 32px;
    padding: 0 9px;
    font-size: 0.74rem;
    white-space: nowrap;
  }

  .hero {
    min-height: 90svh;
    padding-right: 22px;
    padding-left: 22px;
    background:
      url("./assets/susemies-symbol-lightarch-semitagold.svg") 108% 76% / 160px auto no-repeat,
      linear-gradient(105deg, rgba(215, 180, 74, 0.3) 0 23%, transparent 23% 100%),
      linear-gradient(70deg, transparent 0 54%, rgba(127, 153, 144, 0.28) 54% 86%, transparent 86% 100%),
      repeating-linear-gradient(90deg, rgba(15, 26, 46, 0.058) 0 1px, transparent 1px 48px),
      repeating-linear-gradient(0deg, rgba(15, 26, 46, 0.044) 0 1px, transparent 1px 48px),
      #edf3f1;
  }

  .hero::after {
    inset: 70px 10px 22px 10px;
    box-shadow:
      8px 8px 0 rgba(215, 180, 74, 0.22),
      -6px 12px 0 rgba(127, 153, 144, 0.14);
  }

  .hero-copy {
    max-width: min(calc(100vw - 52px), 354px);
  }

  .hero h1 {
    max-width: calc(100vw - 52px);
    font-size: clamp(2.24rem, 9.4vw, 2.82rem);
    line-height: 1;
  }

  .hero h1 span {
    display: block;
  }

  .hero h1 span:first-child {
    width: max-content;
    max-width: 100%;
  }

  .hero-symbol {
    top: 236px;
    right: -78px;
    width: 232px;
    opacity: 0.14;
  }

  .paper-note,
  .layer-tag,
  .gold-rule {
    opacity: 0.58;
  }

  .note-a,
  .layer-one,
  .layer-two,
  .layer-three,
  .layer-four {
    display: none;
  }

  .hero-lead,
  .hero-manifesto {
    position: relative;
    z-index: 44;
  }

  .hero-lead {
    width: 100%;
    max-width: min(100%, 348px);
    font-size: 0.95rem;
    box-shadow: 7px 7px 0 rgba(15, 26, 46, 0.14);
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
    max-width: 348px;
  }

  .hero-actions .button {
    justify-content: center;
    width: 100%;
  }

  .ecosystem-head .rhythm-copy br:nth-of-type(2) {
    display: none;
  }

  .page-panel {
    padding-right: 22px;
    padding-left: 22px;
  }

  .page-panel::after {
    right: -0.12em;
    bottom: -0.08em;
    font-size: clamp(4.8rem, 22vw, 7rem);
  }

  .about-section .split-intro,
  .founder-title,
  .founder-copy,
  .vision-section .manifesto-layout,
  .branding-section .identity-visual,
  .branding-section .identity-copy,
  .solutions-section .ecosystem-head,
  .solutions-section .layer-console,
  .solutions-section .operating-loop,
  .products-head p,
  .product-axis article {
    transform: rotate(0deg);
  }

  .about-section .principle-grid article,
  .product-axis article:nth-child(1),
  .product-axis article:nth-child(2),
  .product-axis article:nth-child(3),
  .product-axis article:nth-child(4) {
    transform: none;
  }

  .founder-section,
  .products-section {
    min-height: auto;
  }

  .founder-layout,
  .products-head {
    gap: 22px;
  }

.founder-title,
.founder-copy,
.products-head p {
  position: relative;
  z-index: 3;
  box-shadow: 8px 8px 0 rgba(15, 26, 46, 0.15);
}

  .founder-title h2,
  .products-head h2 {
    font-size: clamp(2.4rem, 13vw, 3.6rem);
  }

  .founder-copy {
    margin-top: 0;
  }

  .founder-tape {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    display: inline-flex;
    width: max-content;
    margin: 8px 8px 0 0;
  }

  .product-axis {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .product-axis article {
    min-height: auto;
  }
}

/* Site-wide alignment and readability pass, locked 2026-06-25. */
.site-header {
  overflow: visible;
}

.section {
  scroll-margin-top: 92px;
}

.nav-group {
  padding-bottom: 12px;
  margin-bottom: -12px;
}

.nav-group::after {
  position: absolute;
  left: -10px;
  right: -10px;
  top: 100%;
  height: 14px;
  content: "";
}

.subnav {
  top: calc(100% + 2px);
  left: -10px;
  z-index: 300;
  min-width: 198px;
  padding: 10px;
}

.nav-group:hover .subnav,
.nav-group:focus-within .subnav,
.nav-group.is-open .subnav {
  opacity: 1;
  transform: translateY(0) rotate(-1.6deg);
  pointer-events: auto;
}

.chapter-map {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: 1.35fr 1.1fr 0.75fr;
  gap: 16px;
  max-width: var(--max);
  margin: clamp(26px, 4vw, 44px) auto 0;
  padding: 0 clamp(18px, 3vw, 28px);
}

.chapter-map a {
  display: grid;
  gap: 8px;
  min-height: 96px;
  padding: 18px 20px;
  border: 2px solid var(--ink);
  color: var(--ink);
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.94) 0 72%, rgba(215, 180, 74, 0.24) 72% 100%);
  box-shadow: 7px 7px 0 rgba(15, 26, 46, 0.15);
  text-decoration: none;
  transform: rotate(-0.7deg);
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.chapter-map a:nth-child(2) {
  transform: rotate(0.9deg) translateY(10px);
}

.chapter-map a:nth-child(3) {
  transform: rotate(-1.1deg) translateY(-4px);
}

.chapter-map a:hover {
  background:
    linear-gradient(118deg, rgba(215, 180, 74, 0.88) 0 34%, rgba(255, 255, 255, 0.98) 34% 100%);
  box-shadow: 11px 11px 0 rgba(15, 26, 46, 0.22);
  transform: translate(-3px, -4px) rotate(-1.5deg);
}

.chapter-map span {
  color: var(--decision);
  font-size: 0.78rem;
  font-weight: 950;
  text-transform: uppercase;
}

.chapter-map b {
  max-width: 32ch;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.35;
  word-break: keep-all;
}

.hero-copy,
.hero h1,
.hero-lead,
.hero-actions {
  position: relative;
  z-index: 70;
}

.hero h1,
.split-intro h2,
.ecosystem-head h2,
.identity-copy h2,
.manifesto-layout h2,
.products-head h2 {
  word-break: keep-all;
  overflow-wrap: normal;
}

.hero-collage {
  z-index: 10;
  pointer-events: none;
}

.hero-collage [data-drag] {
  pointer-events: auto;
}

.paper-note,
.layer-tag,
.micro-window {
  z-index: 8;
}

.layer-one {
  top: 294px;
  right: max(214px, calc((100vw - var(--max)) / 2 + 206px));
}

.layer-two {
  top: 386px;
  right: max(276px, calc((100vw - var(--max)) / 2 + 268px));
}

.layer-three {
  top: 478px;
  right: max(172px, calc((100vw - var(--max)) / 2 + 164px));
}

.layer-four {
  top: 558px;
  right: max(340px, calc((100vw - var(--max)) / 2 + 332px));
}

.micro-window {
  z-index: 12;
  width: 208px;
  opacity: 0.86;
}

.window-one {
  top: 692px;
  right: max(490px, calc((100vw - var(--max)) / 2 + 482px));
}

.window-two {
  top: 748px;
  right: max(264px, calc((100vw - var(--max)) / 2 + 258px));
}

.window-three {
  top: 656px;
  right: max(42px, calc((100vw - var(--max)) / 2 + 36px));
}

.about-section .split-intro,
.solutions-section .ecosystem-head,
.products-head {
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.8fr);
  column-gap: clamp(40px, 6vw, 100px);
}

.split-intro h2,
.ecosystem-head h2 {
  max-width: 820px;
}

.split-intro p,
.ecosystem-head p,
.identity-copy p,
.manifesto-layout p,
.products-head p {
  word-break: keep-all;
  overflow-wrap: normal;
}

.vision-section .manifesto-layout,
.vision-section .manifesto-layout h2,
.vision-section .manifesto-layout p {
  color: var(--paper);
}

.vision-section .manifesto-layout .section-kicker {
  color: var(--semita);
}

.vision-section .quote-mark {
  color: rgba(255, 255, 255, 0.2);
}

.branding-section,
.branding-section h2,
.branding-section p,
.branding-section dd {
  color: var(--ink);
}

.branding-section .section-kicker,
.branding-section dt {
  color: var(--decision);
}

.branding-section .identity-copy {
  padding: clamp(22px, 3vw, 42px);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 12px 12px 0 rgba(215, 180, 74, 0.18);
}

.chaos-board {
  min-height: 390px;
  margin-top: 64px;
  padding: 28px;
}

.board-title {
  top: 30px;
  left: 34px;
  max-width: 390px;
}

.item-a {
  top: 116px;
  left: 42%;
}

.item-b {
  right: 6.5%;
  bottom: 76px;
}

.item-c {
  bottom: 86px;
  left: 8%;
}

.item-d {
  top: 62px;
  right: 7%;
}

.solutions-section .operating-loop,
.operating-loop {
  position: relative;
  display: grid;
  grid-template-columns: minmax(230px, 1fr) 230px minmax(230px, 1fr);
  grid-template-areas:
    "one core two"
    "four core three";
  gap: 24px 34px;
  align-items: center;
  max-width: var(--max);
  min-height: auto;
  margin: 56px auto 0;
  padding: clamp(30px, 4vw, 56px);
  border: 2px solid rgba(15, 26, 46, 0.18);
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.88) 0 72%, rgba(244, 239, 217, 0.72) 72% 100%);
  box-shadow: 0 18px 50px rgba(15, 26, 46, 0.08);
}

.operating-loop::before {
  top: 50%;
  left: 50%;
  right: auto;
  width: min(72%, 800px);
  height: 68%;
  border: 12px solid rgba(215, 180, 74, 0.72);
  border-radius: 999px;
  border-bottom-color: rgba(215, 180, 74, 0.2);
  content: "";
  transform: translate(-50%, -50%) rotate(-3deg);
}

.loop-core {
  position: relative;
  top: auto;
  left: auto;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 13px;
  grid-area: core;
  z-index: 3;
  justify-self: center;
  width: 214px;
  height: 214px;
  margin: 0;
  padding: 30px 24px;
  border-radius: 999px;
  box-shadow:
    0 0 0 8px rgba(255, 255, 255, 0.78),
    10px 12px 0 rgba(15, 26, 46, 0.12);
}

.loop-core strong {
  display: block;
  color: var(--semita);
  font-size: 0.78rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.loop-core span {
  display: block;
  max-width: 9ch;
  margin: 0;
  color: var(--paper);
  font-size: clamp(1.22rem, 1.62vw, 1.52rem);
  font-weight: 950;
  line-height: 1.18;
}

.loop-step {
  z-index: 4;
  min-height: 168px;
  border: 2px solid rgba(15, 26, 46, 0.2);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 10px 12px 0 rgba(15, 26, 46, 0.1);
}

.step-one {
  grid-area: one;
  transform: rotate(-1.2deg);
}

.step-two {
  grid-area: two;
  margin-top: 0;
  transform: rotate(1.1deg);
}

.step-three {
  grid-area: three;
  transform: rotate(-0.8deg);
}

.step-four {
  grid-area: four;
  margin-top: 0;
  transform: rotate(1deg);
}

@media (max-width: 1020px) {
  .chapter-map {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 22px;
  }

  .chapter-map a,
  .chapter-map a:nth-child(2),
  .chapter-map a:nth-child(3) {
    min-height: auto;
    transform: none;
  }

  .about-section .split-intro,
  .solutions-section .ecosystem-head,
  .products-head {
    grid-template-columns: 1fr;
  }

  .solutions-section .operating-loop,
  .operating-loop {
    grid-template-columns: 1fr;
    grid-template-areas:
      "core"
      "one"
      "two"
      "three"
      "four";
    gap: 16px;
    padding: 24px;
  }

  .operating-loop::before {
    inset: 22px;
    width: auto;
    height: auto;
    border-width: 8px;
    border-radius: 34px;
    transform: rotate(-2deg);
  }

  .loop-core {
    width: 166px;
    height: 166px;
  }

  .step-one,
  .step-two,
  .step-three,
  .step-four {
    transform: none;
  }
}

@media (max-width: 720px) {
  .chapter-map {
    padding-inline: 22px;
  }

  .micro-window {
    display: none;
  }

  .chaos-board {
    display: grid;
    gap: 12px;
    min-height: auto;
  }

  .board-title,
  .board-item {
    position: relative;
    inset: auto;
    max-width: 100%;
    white-space: normal;
    transform: none;
  }
}

/* Floating navigation + stronger CI2 symbol contrast, 2026-06-25. */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 120;
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  pointer-events: none;
}

.site-header::before {
  position: fixed;
  top: 18px;
  right: clamp(16px, 3vw, 38px);
  width: 282px;
  height: 184px;
  border: 2px solid rgba(15, 26, 46, 0.88);
  content: "";
  background:
    linear-gradient(142deg, rgba(15, 26, 46, 0.86) 0 72%, rgba(215, 180, 74, 0.34) 72% 100%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 14px);
  box-shadow:
    10px 10px 0 rgba(15, 26, 46, 0.16),
    -7px 8px 0 rgba(215, 180, 74, 0.22);
  transform: rotate(2deg);
  pointer-events: none;
}

.menu-toggle {
  display: none;
}

.brand {
  position: fixed;
  top: 24px;
  left: clamp(24px, 5vw, 88px);
  z-index: 125;
  gap: 10px;
  min-height: 56px;
  padding: 10px 16px 10px 12px;
  border: 2px solid var(--ink);
  color: var(--ink);
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0.96) 0 76%, rgba(244, 239, 217, 0.9) 76% 100%);
  box-shadow:
    9px 9px 0 rgba(15, 26, 46, 0.14),
    -5px 5px 0 rgba(215, 180, 74, 0.28);
  transform: rotate(-1.7deg);
  pointer-events: auto;
}

.brand:hover {
  transform: translate(-3px, -4px) rotate(-3deg);
  box-shadow:
    13px 13px 0 rgba(15, 26, 46, 0.18),
    -7px 7px 0 rgba(215, 180, 74, 0.36);
}

.brand img:first-child {
  width: 32px;
}

.brand-type {
  width: 148px;
}

.site-nav {
  position: fixed;
  top: 54px;
  right: clamp(34px, 4vw, 76px);
  z-index: 126;
  display: grid;
  grid-auto-flow: row;
  align-items: start;
  justify-items: end;
  gap: 10px;
  width: max-content;
  max-width: 260px;
  padding: 0;
  transform: rotate(0.8deg);
  pointer-events: auto;
}

.site-nav::before {
  justify-self: end;
  padding: 6px 10px;
  border: 2px solid var(--ink);
  content: "MENU";
  color: var(--ink);
  background: var(--semita);
  box-shadow: 5px 5px 0 rgba(15, 26, 46, 0.22);
  font-size: 0.74rem;
  font-weight: 950;
  line-height: 1;
  transform: rotate(-4deg) translateX(-6px);
}

.nav-group {
  display: grid;
  justify-items: end;
  padding-bottom: 0;
  margin-bottom: 0;
}

.nav-root {
  justify-content: center;
  min-width: 126px;
  min-height: 48px;
  padding: 0 18px;
  border: 2px solid var(--ink);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.22);
  font-size: 0.84rem;
  font-weight: 950;
  text-transform: uppercase;
}

.nav-group:nth-child(1) > .nav-root {
  background: var(--semita);
  transform: rotate(-2.8deg);
}

.nav-group:nth-child(2) > .nav-root {
  color: var(--paper);
  background: rgba(15, 26, 46, 0.96);
  transform: rotate(2deg);
}

.site-nav > .nav-root {
  background: rgba(255, 255, 255, 0.98);
  transform: rotate(-1deg);
}

.nav-root:hover,
.nav-root.is-active,
.nav-group.is-active > .nav-root {
  border-color: var(--ink);
  background: var(--semita);
  box-shadow: 10px 10px 0 rgba(15, 26, 46, 0.22);
  transform: translate(-4px, -4px) rotate(-3.5deg);
}

.nav-group::after {
  left: -28px;
  right: auto;
  top: -10px;
  width: 38px;
  height: calc(100% + 28px);
}

.subnav {
  top: -8px;
  right: calc(100% + 12px);
  left: auto;
  min-width: 182px;
  padding: 10px;
  background:
    linear-gradient(114deg, rgba(255, 255, 255, 0.98) 0 78%, rgba(232, 239, 242, 0.96) 78% 100%);
  box-shadow: 9px 9px 0 rgba(15, 26, 46, 0.18);
  transform: translateX(8px) rotate(-2.4deg);
}

.nav-group:hover .subnav,
.nav-group:focus-within .subnav,
.nav-group.is-open .subnav {
  opacity: 1;
  transform: translateX(0) rotate(-2.4deg);
  pointer-events: auto;
}

.subnav a {
  min-height: 36px;
  border: 1px solid rgba(15, 26, 46, 0.18);
  background: rgba(255, 255, 255, 0.62);
}

.subnav a + a {
  margin-top: 5px;
}

.subnav a:hover,
.subnav a.is-active {
  background: var(--semita);
}

.branding-section .identity-visual {
  display: grid;
  place-items: center;
  min-height: 520px;
  border: 0;
  background: transparent;
  transform: rotate(-3.5deg);
}

.branding-section .identity-visual::before {
  position: absolute;
  inset: 54px 44px 42px 30px;
  border: 3px solid var(--ink);
  content: "";
  background:
    linear-gradient(126deg, rgba(15, 26, 46, 0.98) 0 68%, rgba(39, 49, 65, 0.96) 68% 100%);
  box-shadow:
    18px 18px 0 rgba(215, 180, 74, 0.72),
    -14px 16px 0 rgba(127, 153, 144, 0.24);
  transform: rotate(2.2deg);
}

.branding-section .identity-visual::after {
  position: absolute;
  top: 40px;
  left: 22px;
  z-index: 1;
  padding: 9px 12px;
  border: 2px solid var(--ink);
  content: "SEMITA CORE";
  color: var(--ink);
  background: var(--semita);
  box-shadow: 6px 6px 0 rgba(15, 26, 46, 0.18);
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0;
  transform: rotate(-5deg);
}

.branding-section .identity-visual img {
  position: relative;
  top: auto;
  left: auto;
  z-index: 2;
  width: min(340px, 72%);
  padding: 32px;
  border: 16px solid rgba(255, 255, 255, 0.94);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 12px 12px 0 rgba(15, 26, 46, 0.2);
  transform: rotate(-2deg);
}

.branding-section .identity-line {
  z-index: 3;
  right: 34px;
  bottom: 66px;
  width: 220px;
  height: 12px;
  background: var(--semita);
  transform: rotate(-8deg);
}

@media (max-width: 1020px) {
  .site-header::before {
    top: 14px;
    right: 12px;
    width: 182px;
    height: 166px;
    opacity: 0.92;
  }

  .site-nav {
    top: 44px;
    right: 28px;
    gap: 7px;
  }

  .brand {
    top: 18px;
    left: 18px;
  }

  .nav-root {
    min-width: 112px;
    min-height: 42px;
    padding: 0 11px;
  }
}

@media (max-width: 720px) {
  .site-header {
    position: fixed;
    display: block;
    min-height: 0;
    padding: 0;
    background: transparent;
  }

  .brand {
    top: 12px;
    left: 14px;
    min-height: 46px;
    padding: 8px 11px 8px 9px;
  }

  .brand img:first-child {
    width: 28px;
  }

  .brand-type {
    width: 118px;
  }

  .menu-toggle {
    position: fixed;
    top: 16px;
    right: 14px;
    z-index: 130;
    display: inline-grid;
    grid-template-columns: auto 22px;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 12px;
    border: 2px solid var(--ink);
    color: var(--ink);
    background: var(--semita);
    box-shadow: 7px 7px 0 rgba(15, 26, 46, 0.18);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 950;
    text-transform: uppercase;
    transform: rotate(2deg);
    pointer-events: auto;
  }

  .menu-toggle-icon {
    display: grid;
    gap: 4px;
  }

  .menu-toggle-icon span {
    display: block;
    width: 22px;
    height: 3px;
    background: var(--ink);
    transition:
      transform 160ms ease,
      opacity 160ms ease;
  }

  .site-header.is-menu-open .menu-toggle {
    color: var(--paper);
    background: var(--ink);
    transform: rotate(-2deg);
  }

  .site-header.is-menu-open .menu-toggle-icon span {
    background: var(--paper);
  }

  .site-header.is-menu-open .menu-toggle-icon span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .site-header.is-menu-open .menu-toggle-icon span:nth-child(2) {
    opacity: 0;
  }

  .site-header.is-menu-open .menu-toggle-icon span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .site-header::before {
    top: 66px;
    right: 12px;
    display: block;
    width: min(310px, calc(100vw - 28px));
    height: 286px;
    opacity: 0;
    transform: translateY(-12px) rotate(1.6deg);
    transition:
      opacity 160ms ease,
      transform 160ms ease;
  }

  .site-header.is-menu-open::before {
    opacity: 0.96;
    transform: translateY(0) rotate(1.6deg);
  }

  .site-nav {
    top: 88px;
    right: 28px;
    z-index: 129;
    display: grid;
    gap: 10px;
    opacity: 0;
    transform: translateY(-12px) rotate(-1deg);
    pointer-events: none;
    transition:
      opacity 160ms ease,
      transform 160ms ease;
  }

  .site-header.is-menu-open .site-nav {
    opacity: 1;
    transform: translateY(0) rotate(-1deg);
    pointer-events: auto;
  }

  .site-nav::before {
    justify-self: start;
    color: var(--paper);
    background: transparent;
    border-color: rgba(255, 255, 255, 0.48);
    box-shadow: none;
  }

  .nav-group {
    justify-items: stretch;
    width: min(260px, calc(100vw - 74px));
  }

  .nav-root,
  .nav-group:nth-child(1) > .nav-root,
  .nav-group:nth-child(2) > .nav-root,
  .site-nav > .nav-root {
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
    min-height: 46px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.98);
    transform: rotate(0deg);
  }

  .nav-group:nth-child(1) > .nav-root {
    background: var(--semita);
  }

  .subnav {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    display: none;
    min-width: 0;
    width: 100%;
    margin-top: 8px;
    transform: rotate(0deg);
  }

  .nav-group:hover .subnav,
  .nav-group:focus-within .subnav,
  .nav-group.is-active .subnav,
  .nav-group.is-open .subnav {
    display: grid;
    opacity: 1;
    transform: rotate(0deg);
    pointer-events: auto;
  }

  .branding-section .identity-visual {
    min-height: 360px;
  }

  .branding-section .identity-visual::before {
    inset: 44px 18px 34px 18px;
  }

  .branding-section .identity-visual img {
    width: min(260px, 78%);
    padding: 22px;
    border-width: 12px;
  }
}

/* 260625 hero legibility pass: title first, collage second. */
.hero-copy {
  isolation: isolate;
}

.hero-copy::before,
.hero-copy::after,
.hero h1::before,
.hero h1::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
}

.hero-copy::before {
  top: clamp(78px, 8vw, 118px);
  left: clamp(-16px, -1vw, -8px);
  width: min(760px, 76vw);
  height: clamp(30px, 4.8vw, 64px);
  background: rgba(215, 180, 74, 0.72);
  box-shadow:
    28px 42px 0 rgba(215, 180, 74, 0.36),
    -10px 88px 0 rgba(215, 180, 74, 0.2);
  transform: rotate(-1.1deg);
}

.hero-copy::after {
  top: clamp(184px, 18vw, 264px);
  left: clamp(20px, 4vw, 62px);
  width: min(650px, 62vw);
  height: clamp(16px, 2.1vw, 28px);
  background: rgba(215, 180, 74, 0.82);
  box-shadow:
    -52px -112px 0 rgba(215, 180, 74, 0.3),
    118px 58px 0 rgba(215, 180, 74, 0.2);
  transform: rotate(1.3deg);
}

.hero h1 {
  position: relative;
  isolation: isolate;
}

.hero h1::before {
  top: 0.52em;
  left: -0.05em;
  width: min(7.2em, 72vw);
  height: 0.2em;
  background: rgba(215, 180, 74, 0.82);
  transform: rotate(-0.7deg);
}

.hero h1::after {
  top: 1.47em;
  left: -0.02em;
  width: min(6.1em, 64vw);
  height: 0.28em;
  background: rgba(215, 180, 74, 0.58);
  transform: rotate(0.8deg);
}

.hero h1 span {
  position: relative;
  z-index: 1;
}

.hero h1 span:first-child,
.hero h1 span:last-child {
  background:
    linear-gradient(transparent 57%, rgba(215, 180, 74, 0.82) 57% 78%, transparent 78% 100%);
}

.hero .micro-window {
  z-index: 6;
  width: clamp(176px, 14vw, 210px);
  opacity: 0.82;
}

.window-one {
  top: clamp(414px, 47vh, 466px);
  right: max(116px, calc((100vw - var(--max)) / 2 + 96px));
  transform: rotate(-4.2deg) scale(0.94);
}

.window-two {
  top: clamp(532px, 59vh, 592px);
  right: max(34px, calc((100vw - var(--max)) / 2 + 24px));
  transform: rotate(-2.1deg) scale(0.94);
}

.window-three {
  top: clamp(304px, 35vh, 360px);
  right: max(18px, calc((100vw - var(--max)) / 2 + 8px));
  transform: rotate(2.8deg) scale(0.94);
}

.window-one:hover,
.window-two:hover,
.window-three:hover {
  transform: translate(-4px, -5px) rotate(-2deg) scale(0.96);
}

@media (max-width: 1280px) {
  .hero .micro-window {
    width: 176px;
    opacity: 0.78;
  }

  .window-one {
    top: 432px;
    right: 104px;
  }

  .window-two {
    top: 548px;
    right: 38px;
  }

  .window-three {
    top: 326px;
    right: 20px;
  }
}

@media (max-width: 1020px) {
  .hero .micro-window {
    display: none;
  }

  .hero-copy::before {
    width: min(620px, 86vw);
  }

  .hero-copy::after {
    width: min(520px, 78vw);
  }
}

@media (max-width: 720px) {
  .hero-copy::before {
    top: 84px;
    left: -8px;
    width: min(330px, 84vw);
    height: 34px;
    box-shadow:
      18px 42px 0 rgba(215, 180, 74, 0.3),
      -6px 84px 0 rgba(215, 180, 74, 0.18);
  }

  .hero-copy::after {
    top: 194px;
    left: 18px;
    width: min(280px, 72vw);
    height: 16px;
  }

  .hero h1::before {
    top: 0.6em;
    width: min(6.2em, 86vw);
    height: 0.18em;
  }

  .hero h1::after {
    top: 1.64em;
    width: min(5.4em, 80vw);
    height: 0.22em;
  }
}

/* 260625 hero playground control. */
.hero-actions {
  display: block;
  width: max-content;
  max-width: none;
  margin-top: 22px;
  transform: rotate(-4deg);
}

.chaos-toggle {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-height: 58px;
  padding: 0 30px;
  border: 3px solid var(--ink);
  border-radius: 0;
  color: var(--ink);
  background:
    linear-gradient(100deg, var(--semita) 0 72%, rgba(255, 255, 255, 0.82) 72% 100%);
  box-shadow:
    8px 8px 0 var(--ink),
    -5px -5px 0 rgba(255, 255, 255, 0.72);
  font: inherit;
  font-size: 1rem;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  cursor: pointer;
  transform: rotate(1.6deg);
  transition:
    transform 150ms ease,
    box-shadow 150ms ease,
    color 150ms ease,
    background 150ms ease;
}

.chaos-toggle::before {
  position: absolute;
  top: -16px;
  left: 14px;
  content: "TRY OUT";
  padding: 4px 8px;
  border: 2px solid var(--ink);
  color: var(--paper);
  background: var(--ink);
  font-size: 0.62rem;
  font-weight: 950;
  line-height: 1;
  transform: rotate(-5deg);
}

.chaos-toggle::after {
  position: absolute;
  right: 10px;
  bottom: 8px;
  width: 34px;
  height: 5px;
  content: "";
  background: var(--paper);
  box-shadow: -42px -30px 0 rgba(15, 26, 46, 0.16);
}

.chaos-toggle:hover {
  color: var(--paper);
  background:
    linear-gradient(100deg, var(--ink) 0 68%, var(--semita) 68% 100%);
  box-shadow:
    12px 12px 0 rgba(15, 26, 46, 0.28),
    -4px -4px 0 rgba(215, 180, 74, 0.48);
  transform: translate(-4px, -5px) rotate(-2.6deg);
}

.is-chaos .chaos-toggle {
  color: var(--semita);
  background:
    linear-gradient(100deg, var(--ink) 0 76%, var(--paper) 76% 100%);
  box-shadow:
    13px 13px 0 rgba(215, 180, 74, 0.86),
    -6px -6px 0 rgba(15, 26, 46, 0.18);
  transform: translate(-2px, -4px) rotate(4deg) scale(1.04);
}

.is-chaos .chaos-toggle::before {
  content: "CHAOS ON";
  color: var(--ink);
  background: var(--paper);
}

.is-chaos .hero-collage [data-drag] {
  filter: saturate(1.28) contrast(1.04);
  animation-timing-function: steps(2, end);
}

.is-chaos .hero-collage .note-a,
.is-chaos .hero-collage .layer-one,
.is-chaos .hero-collage .window-three {
  animation: susemiesChaosThrowA 0.62s steps(2, end) infinite;
}

.is-chaos .hero-collage .note-b,
.is-chaos .hero-collage .layer-two,
.is-chaos .hero-collage .window-one {
  animation: susemiesChaosThrowB 0.74s steps(2, end) infinite;
}

.is-chaos .hero-collage .note-c,
.is-chaos .hero-collage .layer-three,
.is-chaos .hero-collage .window-two {
  animation: susemiesChaosThrowC 0.68s steps(2, end) infinite;
}

.is-chaos .hero-collage .note-d,
.is-chaos .hero-collage .layer-four,
.is-chaos .hero-collage .gold-rule {
  animation: susemiesChaosThrowD 0.56s steps(2, end) infinite;
}

.is-chaos .hero-symbol {
  animation: susemiesChaosSymbol 0.72s steps(2, end) infinite;
}

.is-settling .hero-collage [data-drag],
.is-settling .hero-symbol {
  animation: susemiesSnapClean 0.72s cubic-bezier(0.18, 1.35, 0.36, 1) 1 both !important;
  filter: none;
}

@keyframes susemiesChaosThrowA {
  0%,
  100% {
    translate: 0 0;
  }
  22% {
    translate: 46px -34px;
  }
  47% {
    translate: -38px 28px;
  }
  72% {
    translate: 26px 42px;
  }
}

@keyframes susemiesChaosThrowB {
  0%,
  100% {
    translate: 0 0;
  }
  18% {
    translate: -52px 24px;
  }
  44% {
    translate: 36px 38px;
  }
  74% {
    translate: -26px -46px;
  }
}

@keyframes susemiesChaosThrowC {
  0%,
  100% {
    translate: 0 0;
  }
  20% {
    translate: 34px 48px;
  }
  50% {
    translate: -46px -26px;
  }
  78% {
    translate: 48px -18px;
  }
}

@keyframes susemiesChaosThrowD {
  0%,
  100% {
    translate: 0 0;
  }
  16% {
    translate: -32px -40px;
  }
  42% {
    translate: 54px 22px;
  }
  70% {
    translate: -44px 36px;
  }
}

@keyframes susemiesChaosSymbol {
  0%,
  100% {
    translate: 0 0;
  }
  25% {
    translate: 34px -24px;
  }
  50% {
    translate: -28px 36px;
  }
  75% {
    translate: 42px 18px;
  }
}

@keyframes susemiesSnapClean {
  0% {
    translate: 38px -26px;
  }
  42% {
    translate: -10px 8px;
  }
  70% {
    translate: 4px -3px;
  }
  100% {
    translate: 0 0;
  }
}

@media (max-width: 720px) {
  .hero-actions {
    width: 100%;
    max-width: 348px;
    margin-top: 20px;
    transform: rotate(-1deg);
  }

  .chaos-toggle {
    width: 100%;
    min-height: 56px;
    padding: 0 24px;
  }
}

/* 260625 nav + playful trigger refinement. */
.site-nav::before {
  display: none;
}

@media (min-width: 721px) {
  .site-header::before {
    display: none;
  }

  .hero {
    background-position:
      72% 16%,
      11% 84%,
      0% 0%,
      100% 0%,
      0% 100%,
      100% 100%,
      0 0,
      0 0,
      0 0;
  }

  .site-nav {
    top: 72px;
    right: clamp(20px, 2.4vw, 42px);
    gap: 12px;
    max-width: 174px;
    transform: rotate(0.4deg);
  }

  .nav-root {
    min-width: 154px;
    min-height: 58px;
    padding: 0 18px;
    font-size: 0.9rem;
  }

  .subnav {
    right: calc(100% + 12px);
  }

  .hero-symbol {
    top: 118px;
    right: max(168px, calc((100vw - var(--max)) / 2 + 146px));
    width: 360px;
  }
}

.hero-actions {
  width: max-content;
  margin-top: 22px;
  transform: rotate(-7deg);
}

.chaos-toggle {
  width: 66px;
  min-width: 66px;
  height: 66px;
  min-height: 66px;
  padding: 0;
  border: 3px solid var(--ink);
  color: var(--ink);
  background:
    linear-gradient(120deg, var(--semita) 0 62%, rgba(255, 255, 255, 0.92) 62% 100%);
  box-shadow:
    8px 8px 0 var(--ink),
    -4px -4px 0 rgba(255, 255, 255, 0.74);
  font-size: 2.6rem;
  line-height: 1;
  transform: rotate(6deg);
}

.chaos-toggle span {
  display: block;
  transform: translateY(-2px) rotate(-5deg);
}

.chaos-toggle::before {
  top: -9px;
  left: -10px;
  width: 24px;
  height: 18px;
  padding: 0;
  border: 2px solid var(--ink);
  content: "";
  background: var(--paper);
  transform: rotate(-12deg);
}

.chaos-toggle::after {
  right: 9px;
  bottom: 8px;
  width: 20px;
  height: 5px;
  background: var(--ink);
  box-shadow:
    -30px -30px 0 rgba(15, 26, 46, 0.16),
    8px -42px 0 rgba(215, 180, 74, 0.34);
}

.chaos-toggle:hover,
.chaos-toggle.is-tapped {
  color: var(--semita);
  background:
    linear-gradient(120deg, var(--ink) 0 70%, var(--paper) 70% 100%);
  box-shadow:
    12px 12px 0 rgba(215, 180, 74, 0.88),
    -5px -5px 0 rgba(15, 26, 46, 0.16);
  transform: translate(-4px, -6px) rotate(-10deg) scale(1.08);
}

.is-play-burst .hero-collage [data-drag] {
  filter: saturate(1.32) contrast(1.04);
  animation-timing-function: steps(2, end);
}

.is-play-burst .hero-collage .note-a,
.is-play-burst .hero-collage .layer-one,
.is-play-burst .hero-collage .window-three {
  animation: susemiesChaosThrowA 0.72s steps(2, end) 1 both;
}

.is-play-burst .hero-collage .note-b,
.is-play-burst .hero-collage .layer-two,
.is-play-burst .hero-collage .window-one {
  animation: susemiesChaosThrowB 0.76s steps(2, end) 1 both;
}

.is-play-burst .hero-collage .note-c,
.is-play-burst .hero-collage .layer-three,
.is-play-burst .hero-collage .window-two {
  animation: susemiesChaosThrowC 0.7s steps(2, end) 1 both;
}

.is-play-burst .hero-collage .note-d,
.is-play-burst .hero-collage .layer-four,
.is-play-burst .hero-collage .gold-rule {
  animation: susemiesChaosThrowD 0.66s steps(2, end) 1 both;
}

.is-play-burst .hero-symbol {
  animation: susemiesChaosSymbol 0.76s steps(2, end) 1 both;
}

.is-settling .hero-collage [data-drag],
.is-settling .hero-symbol {
  animation: susemiesSnapCleanSlow 1.58s cubic-bezier(0.12, 0.92, 0.22, 1) 1 both !important;
  filter: none;
}

@keyframes susemiesSnapCleanSlow {
  0% {
    translate: 46px -30px;
  }
  34% {
    translate: -14px 10px;
  }
  62% {
    translate: 7px -5px;
  }
  100% {
    translate: 0 0;
  }
}

@media (max-width: 720px) {
  .chaos-toggle {
    width: 62px;
    min-width: 62px;
    height: 62px;
    min-height: 62px;
    font-size: 2.35rem;
  }
}

/* 260625 solutions layer: copy rhythm + implied circulation mark. */
.solutions-section .layer-console {
  grid-template-columns: 280px minmax(0, 1fr);
  align-items: stretch;
}

.layer-detail {
  display: grid;
  align-content: center;
}

.layer-detail h3 {
  max-width: 680px;
  font-size: clamp(1.72rem, 2.5vw, 2.42rem);
  line-height: 1.18;
  word-break: keep-all;
}

.layer-detail p:last-child {
  max-width: 700px;
  color: rgba(246, 248, 250, 0.82);
  font-size: clamp(0.98rem, 1.12vw, 1.08rem);
  line-height: 1.78;
  word-break: keep-all;
}

.products-head h2 {
  max-width: 760px;
}

@media (min-width: 721px) {
  .products-head h2 {
    font-size: clamp(3.2rem, 4.4vw, 5rem);
    line-height: 0.98;
  }
}

.products-head p {
  max-width: 560px;
  line-height: 1.72;
}

.product-axis article {
  gap: 16px;
}

.product-axis p {
  line-height: 1.72;
}

.product-axis b {
  line-height: 1.42;
}

@media (max-width: 1020px) {
  .solutions-section .layer-console {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* 260625 hero rhythm cleanup: no floating symbol, tighter title and lead box. */
.hero h1 {
  max-width: min(1060px, calc(100vw - 132px));
  font-size: clamp(4.2rem, 7.35vw, 7.8rem);
  line-height: 0.9;
  text-wrap: unset;
}

.hero h1 span {
  display: block;
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
}

.hero h1 span:last-child {
  margin-left: clamp(28px, 3.2vw, 54px);
}

.hero-lead {
  width: max-content;
  max-width: min(560px, calc(100vw - 180px));
  padding-right: 28px;
}

.hero-symbol {
  display: none !important;
}

body::after {
  display: none;
}

@media (max-width: 900px) {
  .hero h1 {
    max-width: calc(100vw - 84px);
    font-size: clamp(3.8rem, 8.6vw, 5.6rem);
  }

  .hero h1 span:last-child {
    margin-left: clamp(18px, 3vw, 32px);
  }

  .hero-lead {
    max-width: min(520px, calc(100vw - 96px));
  }
}

@media (max-width: 720px) {
  .hero h1 {
    max-width: calc(100vw - 44px);
    font-size: clamp(3.1rem, 12vw, 4.2rem);
    line-height: 0.96;
  }

  .hero h1 span {
    white-space: normal;
  }

  .hero h1 span:last-child {
    margin-left: 0;
  }

  .hero-lead {
    width: auto;
    max-width: 100%;
    padding-right: 20px;
  }
}

.hero {
  background:
    linear-gradient(102deg, rgba(215, 180, 74, 0.35) 0 13%, transparent 13% 100%),
    linear-gradient(74deg, transparent 0 45%, rgba(15, 26, 46, 0.115) 45% 51%, transparent 51% 100%),
    linear-gradient(164deg, transparent 0 59%, rgba(127, 153, 144, 0.38) 59% 78%, transparent 78% 100%),
    linear-gradient(21deg, transparent 0 70%, rgba(215, 180, 74, 0.34) 70% 78%, transparent 78% 100%),
    repeating-linear-gradient(90deg, rgba(15, 26, 46, 0.068) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg, rgba(15, 26, 46, 0.052) 0 1px, transparent 1px 56px),
    #e9f0ef;
  background-size:
    150% 150%,
    140% 140%,
    160% 160%,
    180% 180%,
    56px 56px,
    56px 56px,
    auto;
  background-position:
    0% 0%,
    100% 0%,
    0% 100%,
    100% 100%,
    0 0,
    0 0,
    0 0;
}

/* 260625 keyword field: replace the hard ticker bar with drifting background type. */
.ticker-band {
  position: fixed;
  inset: 0;
  z-index: 0;
  height: 100svh;
  min-height: 0;
  overflow: hidden;
  border: 0;
  color: var(--ink);
  background: transparent;
  pointer-events: none;
  mix-blend-mode: normal;
}

.ticker-track {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  animation: none;
}

.ticker-track span {
  position: absolute;
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  color: rgba(15, 26, 46, 0.105);
  background: transparent !important;
  font-weight: 950;
  line-height: 0.9;
  white-space: nowrap;
  text-transform: uppercase;
  filter: blur(0.1px);
  animation: keywordDriftA 18s ease-in-out infinite;
}

.ticker-track span:nth-child(n) {
  color: rgba(15, 26, 46, 0.105);
  background: transparent !important;
}

.ticker-track span:nth-child(1) {
  top: 13%;
  left: -10%;
  font-size: clamp(4rem, 13vw, 13rem);
  transform: rotate(-8deg);
}

.ticker-track span:nth-child(2) {
  top: 34%;
  right: -8%;
  color: rgba(215, 180, 74, 0.17);
  font-size: clamp(3rem, 10vw, 11rem);
  transform: rotate(6deg);
  animation-name: keywordDriftB;
}

.ticker-track span:nth-child(3) {
  top: 61%;
  left: 4%;
  color: rgba(127, 153, 144, 0.18);
  font-size: clamp(2.2rem, 7vw, 8rem);
  transform: rotate(11deg);
  animation-name: keywordDriftC;
}

.ticker-track span:nth-child(4) {
  top: 78%;
  right: 8%;
  font-size: clamp(1.7rem, 5vw, 5.8rem);
  transform: rotate(-5deg);
  animation-name: keywordDriftB;
}

.ticker-track span:nth-child(5) {
  top: 5%;
  right: 12%;
  color: rgba(15, 26, 46, 0.075);
  font-size: clamp(1.8rem, 6vw, 6.8rem);
  transform: rotate(3deg);
}

.ticker-track span:nth-child(6) {
  top: 47%;
  left: 22%;
  color: rgba(215, 180, 74, 0.16);
  font-size: clamp(2.8rem, 8vw, 9rem);
  transform: rotate(-14deg);
  animation-name: keywordDriftC;
}

.ticker-track span:nth-child(7) {
  top: 23%;
  left: 52%;
  font-size: clamp(1.55rem, 4vw, 4.7rem);
  transform: rotate(15deg);
  animation-name: keywordDriftB;
}

.ticker-track span:nth-child(8) {
  top: 88%;
  left: -6%;
  color: rgba(15, 26, 46, 0.08);
  font-size: clamp(2rem, 6vw, 7rem);
  transform: rotate(-2deg);
}

.ticker-track span:nth-child(9) {
  top: 41%;
  left: -8%;
  color: rgba(15, 26, 46, 0.085);
  font-size: clamp(1.7rem, 4.8vw, 5.8rem);
  transform: rotate(7deg);
  animation-name: keywordDriftB;
}

.ticker-track span:nth-child(10) {
  top: 69%;
  right: -12%;
  color: rgba(127, 153, 144, 0.16);
  font-size: clamp(2.1rem, 6.6vw, 7.4rem);
  transform: rotate(-11deg);
  animation-name: keywordDriftC;
}

.ticker-track span:nth-child(11) {
  top: 10%;
  left: 28%;
  color: rgba(215, 180, 74, 0.12);
  font-size: clamp(1.35rem, 3.4vw, 4rem);
  transform: rotate(-4deg);
}

.ticker-track span:nth-child(12) {
  top: 53%;
  right: 24%;
  color: rgba(15, 26, 46, 0.072);
  font-size: clamp(1.25rem, 3vw, 3.5rem);
  transform: rotate(9deg);
  animation-name: keywordDriftB;
}

.ticker-track span:nth-child(13) {
  top: 30%;
  left: 10%;
  color: rgba(215, 180, 74, 0.115);
  font-size: clamp(1.6rem, 4.4vw, 5rem);
  transform: rotate(-16deg);
  animation-name: keywordDriftC;
}

.ticker-track span:nth-child(14) {
  top: 72%;
  left: 38%;
  color: rgba(15, 26, 46, 0.07);
  font-size: clamp(1.2rem, 3.3vw, 3.8rem);
  transform: rotate(4deg);
}

.ticker-track span:nth-child(15) {
  top: 2%;
  left: -4%;
  color: rgba(127, 153, 144, 0.13);
  font-size: clamp(1.25rem, 3.5vw, 4.2rem);
  transform: rotate(12deg);
  animation-name: keywordDriftB;
}

.ticker-track span:nth-child(16) {
  top: 84%;
  right: 32%;
  color: rgba(215, 180, 74, 0.13);
  font-size: clamp(1rem, 2.6vw, 3rem);
  transform: rotate(-8deg);
  animation-name: keywordDriftC;
}

.ticker-track span:nth-child(n + 17) {
  color: rgba(15, 26, 46, 0.055);
  font-size: clamp(1rem, 2.4vw, 2.8rem);
}

.ticker-track span:nth-child(17) {
  top: 58%;
  left: 62%;
  transform: rotate(13deg);
}

.ticker-track span:nth-child(18) {
  top: 18%;
  right: 38%;
  transform: rotate(-9deg);
}

.ticker-track span:nth-child(19) {
  top: 46%;
  right: -2%;
  transform: rotate(5deg);
}

.ticker-track span:nth-child(20) {
  top: 90%;
  left: 18%;
  transform: rotate(-13deg);
}

.ticker-track span:nth-child(21) {
  top: 27%;
  right: 4%;
  transform: rotate(-4deg);
}

.ticker-track span:nth-child(22) {
  top: 66%;
  left: 16%;
  transform: rotate(8deg);
}

.ticker-track span:nth-child(23) {
  top: 37%;
  left: 46%;
  transform: rotate(-10deg);
}

.ticker-track span:nth-child(24) {
  top: 76%;
  right: 4%;
  transform: rotate(10deg);
}

.ticker-track span:nth-child(25) {
  top: 8%;
  left: 64%;
  color: rgba(215, 180, 74, 0.08);
  transform: rotate(18deg);
}

.ticker-track span:nth-child(26) {
  top: 48%;
  left: 34%;
  color: rgba(127, 153, 144, 0.105);
  transform: rotate(-6deg);
}

.ticker-track span:nth-child(27) {
  top: 82%;
  left: 52%;
  color: rgba(15, 26, 46, 0.06);
  transform: rotate(5deg);
}

.ticker-track span:nth-child(28) {
  top: 6%;
  right: -7%;
  color: rgba(15, 26, 46, 0.07);
  transform: rotate(-12deg);
}

.ticker-track span:nth-child(29) {
  top: 56%;
  left: -3%;
  color: rgba(215, 180, 74, 0.095);
  transform: rotate(14deg);
}

.ticker-track span:nth-child(30) {
  top: 24%;
  left: 70%;
  color: rgba(127, 153, 144, 0.095);
  transform: rotate(-18deg);
}

.ticker-track span:nth-child(31) {
  top: 93%;
  left: 70%;
  color: rgba(15, 26, 46, 0.05);
  transform: rotate(8deg);
}

.ticker-track span:nth-child(32) {
  top: 39%;
  left: 74%;
  color: rgba(215, 180, 74, 0.085);
  transform: rotate(11deg);
}

@keyframes keywordDriftA {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 34px -18px;
  }
}

@keyframes keywordDriftB {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: -42px 22px;
  }
}

@keyframes keywordDriftC {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 20px 36px;
  }
}

@media (max-width: 720px) {
  .ticker-band {
    opacity: 0.72;
  }

  .ticker-track span:nth-child(n + 13) {
    display: none;
  }
}

/* 260625 section boundary cleanup: keep chapters legible without hard navy cuts. */
.hero,
.section {
  border-bottom: 0;
}

.page-panel {
  border-top: 0;
  border-bottom: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    inset 0 -1px 0 rgba(15, 26, 46, 0.055);
}

.page-panel::before {
  position: absolute;
  top: 0;
  left: clamp(22px, 5.6vw, 92px);
  right: clamp(22px, 6.4vw, 108px);
  z-index: 0;
  height: clamp(40px, 5vw, 72px);
  content: "";
  background:
    linear-gradient(90deg, transparent 0 5%, rgba(215, 180, 74, 0.28) 5% 24%, transparent 24% 37%, rgba(255, 255, 255, 0.46) 37% 57%, rgba(127, 153, 144, 0.16) 57% 78%, transparent 78% 100%),
    linear-gradient(180deg, rgba(15, 26, 46, 0.1) 0 1px, rgba(255, 255, 255, 0.3) 1px, transparent 100%);
  box-shadow: 0 18px 30px rgba(15, 26, 46, 0.045);
  mix-blend-mode: multiply;
  opacity: 0.86;
  pointer-events: none;
  transform: rotate(var(--boundary-tilt, -0.55deg));
  transform-origin: 50% 0;
}

.page-panel-a::before {
  left: clamp(26px, 7vw, 128px);
  right: clamp(34px, 10vw, 180px);
  height: clamp(32px, 4vw, 56px);
  opacity: 0.58;
  --boundary-tilt: 0.35deg;
}

.page-panel-b::before {
  left: clamp(28px, 10vw, 170px);
  right: clamp(18px, 4vw, 86px);
  --boundary-tilt: 0.72deg;
}

.page-panel-c::before {
  left: clamp(16px, 4vw, 70px);
  right: clamp(42px, 12vw, 210px);
  --boundary-tilt: -0.9deg;
}

.page-panel-d::before {
  left: clamp(52px, 14vw, 240px);
  right: clamp(24px, 6vw, 110px);
  --boundary-tilt: 0.52deg;
}

.page-panel-e::before {
  left: clamp(24px, 6vw, 120px);
  right: clamp(20px, 5vw, 94px);
  background:
    linear-gradient(90deg, transparent 0 9%, rgba(127, 153, 144, 0.2) 9% 32%, transparent 32% 46%, rgba(215, 180, 74, 0.26) 46% 71%, transparent 71% 100%),
    linear-gradient(180deg, rgba(15, 26, 46, 0.09) 0 1px, rgba(255, 255, 255, 0.24) 1px, transparent 100%);
  --boundary-tilt: -0.38deg;
}

.page-panel-f::before {
  left: clamp(18px, 4vw, 76px);
  right: clamp(54px, 13vw, 230px);
  --boundary-tilt: 0.82deg;
}

.contact-section {
  border-top: 0;
  box-shadow:
    inset 0 18px 0 rgba(215, 180, 74, 0.16),
    inset 0 19px 0 rgba(255, 255, 255, 0.08);
}

@media (max-width: 720px) {
  .page-panel::before {
    left: 18px;
    right: 18px;
    height: 42px;
    opacity: 0.68;
  }
}

/* 260625 emphasis language: slogan-grade boxes carry color by default. */
.hero-lead,
.hero-manifesto,
.products-head p,
.layer-detail,
.loop-core {
  border: 3px solid var(--ink);
}

.hero-lead,
.products-head p {
  color: var(--ink);
  background:
    linear-gradient(106deg, rgba(215, 180, 74, 0.96) 0 72%, rgba(244, 239, 217, 0.82) 72% 100%);
  box-shadow:
    10px 10px 0 rgba(15, 26, 46, 0.2),
    -8px 8px 0 rgba(255, 255, 255, 0.54);
}

.hero-manifesto,
.layer-detail {
  color: var(--paper);
  background:
    linear-gradient(118deg, rgba(15, 26, 46, 0.98) 0 70%, rgba(39, 49, 65, 0.96) 70% 100%);
  box-shadow:
    12px 12px 0 rgba(215, 180, 74, 0.58),
    -7px 9px 0 rgba(127, 153, 144, 0.22);
}

.hero-manifesto p,
.hero-manifesto b,
.layer-detail p,
.layer-detail h3 {
  color: inherit;
}

.hero-manifesto .section-kicker,
.layer-detail .detail-label {
  color: var(--semita);
}

.products-head p {
  align-self: center;
  max-width: 560px;
  margin-left: auto;
  font-size: clamp(1.05rem, 1.45vw, 1.24rem);
}

.product-axis article {
  position: relative;
  overflow: hidden;
}

.product-axis article::after {
  position: absolute;
  right: 18px;
  bottom: 14px;
  width: 64px;
  height: 7px;
  content: "";
  background: currentColor;
  opacity: 0.18;
  transform: rotate(-4deg);
}

.product-axis article:nth-child(1) {
  background:
    linear-gradient(122deg, rgba(255, 255, 255, 0.98) 0 68%, rgba(244, 239, 217, 0.9) 68% 100%);
  box-shadow: 11px 11px 0 rgba(15, 26, 46, 0.18);
}

.product-axis article:nth-child(2) {
  color: var(--ink);
  background:
    linear-gradient(132deg, rgba(215, 180, 74, 0.98) 0 75%, rgba(191, 152, 56, 0.62) 75% 100%);
  box-shadow:
    13px 13px 0 rgba(15, 26, 46, 0.22),
    -7px 7px 0 rgba(255, 255, 255, 0.44);
}

.product-axis article:nth-child(3) {
  color: var(--ink);
  background:
    linear-gradient(130deg, rgba(232, 239, 242, 0.96) 0 72%, rgba(255, 255, 255, 0.88) 72% 100%);
  box-shadow:
    12px 12px 0 rgba(15, 26, 46, 0.16),
    -7px 7px 0 rgba(127, 153, 144, 0.2);
}

.product-axis article:nth-child(4) {
  color: var(--paper);
  background:
    linear-gradient(126deg, rgba(15, 26, 46, 0.98) 0 70%, rgba(39, 49, 65, 0.96) 70% 100%);
  box-shadow:
    13px 13px 0 rgba(215, 180, 74, 0.5),
    -7px 7px 0 rgba(127, 153, 144, 0.24);
}

.product-axis article:nth-child(4) span,
.product-axis article:nth-child(4) b {
  color: var(--semita);
}

.product-axis article:nth-child(4) p {
  color: rgba(255, 255, 255, 0.88);
}

.product-axis article:nth-child(2) span,
.product-axis article:nth-child(3) span {
  color: var(--ink);
}

.product-axis article:hover {
  filter: saturate(1.08) contrast(1.02);
}

/* 260625 living canvas: remove the framed board and turn the five fragments into type objects. */
.chaos-board {
  position: relative;
  isolation: isolate;
  min-height: clamp(440px, 44vw, 660px);
  max-width: var(--max);
  margin: clamp(62px, 7vw, 104px) auto 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background:
    radial-gradient(circle at 48% 48%, rgba(255, 255, 255, 0.72), transparent 36%),
    linear-gradient(98deg, transparent 0 16%, rgba(215, 180, 74, 0.13) 16% 30%, transparent 30% 100%),
    linear-gradient(26deg, transparent 0 68%, rgba(127, 153, 144, 0.18) 68% 86%, transparent 86% 100%);
  transform: none;
}

.chaos-board:hover {
  transform: none;
}

.chaos-board::before {
  position: absolute;
  inset: 6% 6% 4%;
  z-index: -1;
  content: "";
  background:
    linear-gradient(100deg, rgba(215, 180, 74, 0.2) 0 18%, transparent 18% 100%),
    linear-gradient(168deg, transparent 0 48%, rgba(15, 26, 46, 0.08) 48% 49.2%, transparent 49.2% 100%),
    linear-gradient(24deg, transparent 0 66%, rgba(127, 153, 144, 0.16) 66% 82%, transparent 82% 100%),
    repeating-linear-gradient(90deg, rgba(15, 26, 46, 0.042) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(0deg, rgba(15, 26, 46, 0.03) 0 1px, transparent 1px 44px);
  opacity: 0.84;
  transform: rotate(-1.2deg);
}

.chaos-board::after {
  position: absolute;
  left: 56%;
  top: 52%;
  z-index: -1;
  content: "LIVING CANVAS";
  color: rgba(15, 26, 46, 0.055);
  font-size: clamp(5.5rem, 14vw, 15rem);
  font-weight: 950;
  line-height: 0.8;
  text-align: center;
  transform: translate(-50%, -50%) rotate(-11deg);
  white-space: nowrap;
}

.board-title,
.board-item {
  position: absolute;
  inset: auto;
  width: max-content;
  max-width: min(72vw, 620px);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  line-height: 0.95;
  word-break: keep-all;
  overflow-wrap: normal;
  text-shadow: 5px 5px 0 rgba(15, 26, 46, 0.08);
  transform-origin: 50% 50%;
}

.board-title {
  top: 50%;
  left: 50%;
  z-index: 6;
  color: var(--ink);
  font-family: Impact, Haettenschweiler, "Arial Black", "Apple SD Gothic Neo", sans-serif;
  transform: translate(-50%, -50%) rotate(-5deg);
  animation: typeObjectFloatA 7.4s ease-in-out infinite;
}

.board-title span {
  display: block;
  margin: 0 0 12px 6px;
  color: var(--semita);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(0.85rem, 1.15vw, 1.12rem);
  font-weight: 950;
  text-transform: uppercase;
}

.board-title b {
  display: block;
  max-width: 10ch;
  margin: 0;
  font-size: clamp(3.6rem, 7.8vw, 9.8rem);
  line-height: 0.86;
  font-weight: 950;
  text-shadow:
    12px 12px 0 rgba(15, 26, 46, 0.12),
    -8px 8px 0 rgba(215, 180, 74, 0.26),
    -9px 9px 0 rgba(255, 255, 255, 0.72);
}

.board-item {
  max-width: none;
  font-weight: 950;
  white-space: nowrap;
  pointer-events: auto;
}

.item-a {
  top: 15%;
  left: 25%;
  z-index: 4;
  color: rgba(215, 180, 74, 0.98);
  font-family: "Apple Chancery", "Brush Script MT", "AppleMyungjo", Georgia, serif;
  font-size: clamp(2.35rem, 4.7vw, 6.2rem);
  font-style: italic;
  text-shadow:
    5px 5px 0 rgba(255, 255, 255, 0.92),
    12px 12px 0 rgba(15, 26, 46, 0.08);
  transform: translate(-50%, -50%) rotate(8deg);
  animation: typeObjectFloatB 6.7s ease-in-out infinite;
}

.item-b {
  top: 62%;
  left: 74%;
  z-index: 7;
  color: rgba(83, 112, 105, 0.98);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(0.95rem, 1.55vw, 2rem);
  letter-spacing: 0.02em;
  text-shadow:
    5px 5px 0 rgba(215, 180, 74, 0.24),
    -3px 3px 0 rgba(255, 255, 255, 0.75);
  transform: translate(-50%, -50%) rotate(-8deg);
  animation: typeObjectFloatC 7s ease-in-out infinite;
}

.item-c {
  top: 79%;
  left: 37%;
  z-index: 5;
  color: var(--ink);
  font-family: Impact, Haettenschweiler, "Arial Black", "Apple SD Gothic Neo", sans-serif;
  font-size: clamp(2.6rem, 5.1vw, 6.8rem);
  text-shadow:
    10px 10px 0 rgba(127, 153, 144, 0.36),
    -4px 4px 0 rgba(255, 255, 255, 0.78);
  transform: translate(-50%, -50%) rotate(-3deg);
  animation: typeObjectFloatD 6.4s ease-in-out infinite;
}

.item-d {
  top: 29%;
  left: 73%;
  z-index: 3;
  color: rgba(15, 26, 46, 0.92);
  font-family: "Courier New", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(1rem, 2.15vw, 2.9rem);
  line-height: 1.04;
  text-shadow:
    7px 7px 0 rgba(127, 153, 144, 0.42),
    -3px 4px 0 rgba(215, 180, 74, 0.18);
  transform: translate(-50%, -50%) rotate(5deg);
  animation: typeObjectFloatA 7.8s ease-in-out infinite reverse;
}

@keyframes typeObjectFloatA {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 8px -13px;
  }
}

@keyframes typeObjectFloatB {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: -12px 10px;
  }
}

@keyframes typeObjectFloatC {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 14px 8px;
  }
}

@keyframes typeObjectFloatD {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: -8px -10px;
  }
}

@media (max-width: 900px) {
  .product-axis article:nth-child(1),
  .product-axis article:nth-child(2),
  .product-axis article:nth-child(3),
  .product-axis article:nth-child(4) {
    transform: rotate(var(--mobile-card-tilt, 0deg));
  }

  .product-axis article:nth-child(1) {
    --mobile-card-tilt: -1deg;
  }

  .product-axis article:nth-child(2) {
    --mobile-card-tilt: 1deg;
  }

  .product-axis article:nth-child(3) {
    --mobile-card-tilt: -0.6deg;
  }

  .product-axis article:nth-child(4) {
    --mobile-card-tilt: 0.8deg;
  }
}

@media (max-width: 720px) {
  .products-head p {
    max-width: 100%;
    margin-left: 0;
  }

  .chaos-board {
    display: block;
    min-height: 520px;
    margin-top: 56px;
  }

  .chaos-board::after {
    left: 55%;
    top: 49%;
    font-size: clamp(4.2rem, 23vw, 8rem);
    white-space: normal;
  }

  .board-title,
  .board-item {
    max-width: 86vw;
  }

  .board-title {
    top: 48%;
    left: 50%;
  }

  .board-title b {
    max-width: 8ch;
    font-size: clamp(3rem, 17vw, 5.8rem);
  }

  .item-a {
    top: 14%;
    left: 51%;
    font-size: clamp(1.9rem, 11vw, 3.8rem);
  }

  .item-b {
    top: 63%;
    left: 61%;
    font-size: clamp(1.05rem, 5.8vw, 1.9rem);
  }

  .item-c {
    top: 79%;
    left: 51%;
    max-width: 88vw;
    font-size: clamp(1.95rem, 9.5vw, 3.3rem);
    line-height: 0.98;
    white-space: normal;
  }

  .item-d {
    top: 49%;
    left: 62%;
    font-size: clamp(1.05rem, 5.8vw, 1.9rem);
  }
}

/* 260625 vision manifesto: make the statement read as a heroic declaration. */
.vision-section {
  display: grid;
  align-items: center;
  min-height: 780px;
}

.vision-section .manifesto-layout {
  isolation: isolate;
  width: min(100%, var(--max));
  max-width: var(--max);
  min-height: 520px;
  padding: 78px 74px 70px;
  overflow: hidden;
  background:
    linear-gradient(104deg, rgba(15, 26, 46, 0.99) 0 58%, rgba(39, 49, 65, 0.98) 58% 74%, rgba(15, 26, 46, 0.99) 74% 100%);
  box-shadow:
    22px 22px 0 rgba(215, 180, 74, 0.72),
    -18px 22px 0 rgba(127, 153, 144, 0.28),
    0 30px 70px rgba(15, 26, 46, 0.16);
  transform: rotate(-1.2deg);
}

.vision-section .manifesto-layout::before {
  position: absolute;
  top: 46px;
  right: -34px;
  z-index: -1;
  width: 46%;
  height: 92%;
  content: "";
  background:
    linear-gradient(76deg, transparent 0 34%, rgba(255, 255, 255, 0.09) 34% 66%, transparent 66% 100%),
    linear-gradient(0deg, rgba(215, 180, 74, 0.22), rgba(215, 180, 74, 0.03));
  transform: rotate(7deg);
}

.vision-section .manifesto-layout::after {
  position: absolute;
  right: -0.08em;
  bottom: -0.18em;
  z-index: -1;
  content: "NEXT";
  color: rgba(255, 255, 255, 0.055);
  font-size: 13rem;
  line-height: 0.8;
  font-weight: 950;
  letter-spacing: 0;
}

.vision-section .quote-mark {
  top: -54px;
  left: 38px;
  color: rgba(215, 180, 74, 0.28);
  font-size: 14rem;
}

.vision-section .manifesto-layout .section-kicker {
  display: inline-flex;
  margin-bottom: 28px;
  padding: 8px 12px;
  color: var(--ink);
  background: var(--semita);
  box-shadow: 6px 6px 0 rgba(255, 255, 255, 0.14);
  transform: rotate(-1deg);
}

.vision-section .manifesto-layout h2 {
  max-width: 1060px;
  margin: 0;
  color: var(--paper);
  font-size: 4.35rem;
  line-height: 0.94;
  font-weight: 950;
  text-shadow:
    9px 9px 0 rgba(0, 0, 0, 0.18),
    -5px 5px 0 rgba(215, 180, 74, 0.14);
}

.vision-statement span {
  display: block;
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
}

.vision-statement span:nth-child(2) {
  font-size: 0.92em;
}

.vision-statement span:nth-child(3) {
  font-size: 1.04em;
}

.vision-section .manifesto-layout p:not(.quote-mark) {
  max-width: 780px;
  margin-top: 34px;
  padding-left: 18px;
  border-left: 8px solid var(--semita);
  color: rgba(255, 255, 255, 0.86);
  font-size: 1.18rem;
  line-height: 1.75;
}

@media (max-width: 1020px) {
  .vision-section {
    min-height: 680px;
  }

  .vision-section .manifesto-layout {
    min-height: 460px;
    padding: 58px 42px;
  }

  .vision-section .manifesto-layout h2 {
    font-size: 3.2rem;
  }
}

@media (max-width: 720px) {
  .vision-section {
    min-height: 640px;
  }

  .vision-section .manifesto-layout {
    min-height: 430px;
    padding: 46px 26px 42px;
    transform: rotate(-0.5deg);
  }

  .vision-section .manifesto-layout h2 {
    font-size: 2.18rem;
    line-height: 1;
  }

  .vision-statement span {
    width: auto;
    white-space: normal;
  }

  .vision-section .manifesto-layout p:not(.quote-mark) {
    margin-top: 24px;
    font-size: 1rem;
  }

  .vision-section .quote-mark {
    left: 18px;
    font-size: 9rem;
  }
}

/* 260625 section scaffolding from Productize reference: large slabs, translated to Susemies colors. */
main {
  background:
    linear-gradient(180deg, rgba(15, 26, 46, 0.04) 0 1px, transparent 1px 100%),
    linear-gradient(90deg, rgba(15, 26, 46, 0.04) 0 1px, transparent 1px 100%);
  background-size: 56px 56px;
}

.chapter-map,
.page-panel {
  isolation: isolate;
}

.chapter-map {
  background:
    linear-gradient(102deg, rgba(15, 26, 46, 0.84) 0 25%, transparent 25% 100%),
    linear-gradient(12deg, transparent 0 59%, rgba(215, 180, 74, 0.3) 59% 74%, transparent 74% 100%),
    linear-gradient(146deg, transparent 0 68%, rgba(127, 153, 144, 0.24) 68% 88%, transparent 88% 100%),
    repeating-linear-gradient(90deg, rgba(15, 26, 46, 0.046) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg, rgba(15, 26, 46, 0.034) 0 1px, transparent 1px 56px),
    #e6eeee;
}

.page-panel {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(15, 26, 46, 0.07),
    0 -34px 0 rgba(255, 255, 255, 0.12);
}

.page-panel::before {
  top: clamp(26px, 5vw, 76px);
  left: max(-70px, -6vw);
  right: auto;
  width: min(78vw, 1060px);
  height: clamp(180px, 27vw, 350px);
  background:
    linear-gradient(104deg, rgba(215, 180, 74, 0.28) 0 22%, rgba(255, 255, 255, 0.42) 22% 58%, rgba(127, 153, 144, 0.18) 58% 100%);
  clip-path: polygon(0 0, 100% 0, 91% 100%, 0 84%);
  box-shadow:
    20px 20px 0 rgba(15, 26, 46, 0.055),
    -18px 24px 0 rgba(215, 180, 74, 0.12);
  mix-blend-mode: multiply;
  opacity: 0.72;
  transform: rotate(var(--boundary-tilt, -1deg));
}

.page-panel-a {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), transparent 54%),
    linear-gradient(128deg, rgba(215, 180, 74, 0.18) 0 18%, transparent 18% 100%),
    linear-gradient(22deg, transparent 0 64%, rgba(127, 153, 144, 0.24) 64% 88%, transparent 88% 100%),
    repeating-linear-gradient(90deg, rgba(15, 26, 46, 0.05) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg, rgba(15, 26, 46, 0.038) 0 1px, transparent 1px 56px),
    #edf3f1;
}

.page-panel-a::before {
  left: max(-90px, -8vw);
  width: min(68vw, 920px);
  background:
    linear-gradient(98deg, rgba(215, 180, 74, 0.34) 0 32%, rgba(255, 255, 255, 0.46) 32% 72%, transparent 72% 100%);
  opacity: 0.78;
  --boundary-tilt: 1.3deg;
}

.page-panel-b {
  background:
    linear-gradient(96deg, rgba(15, 26, 46, 0.86) 0 30%, transparent 30% 100%),
    linear-gradient(168deg, transparent 0 56%, rgba(127, 153, 144, 0.22) 56% 78%, transparent 78% 100%),
    repeating-linear-gradient(90deg, rgba(15, 26, 46, 0.045) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg, rgba(15, 26, 46, 0.034) 0 1px, transparent 1px 56px),
    #edf2f0;
}

.page-panel-b::before {
  left: auto;
  right: max(-90px, -7vw);
  width: min(72vw, 980px);
  background:
    linear-gradient(112deg, rgba(15, 26, 46, 0.18) 0 38%, rgba(215, 180, 74, 0.22) 38% 52%, rgba(255, 255, 255, 0.24) 52% 100%);
  clip-path: polygon(9% 0, 100% 8%, 100% 100%, 0 82%);
  --boundary-tilt: -1.2deg;
}

.page-panel-c {
  background:
    linear-gradient(180deg, rgba(15, 26, 46, 0.08), transparent 50%),
    linear-gradient(112deg, rgba(215, 180, 74, 0.2) 0 16%, transparent 16% 100%),
    repeating-linear-gradient(90deg, rgba(15, 26, 46, 0.052) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg, rgba(15, 26, 46, 0.038) 0 1px, transparent 1px 56px),
    #e7eeee;
}

.page-panel-c::before {
  left: 18%;
  width: min(74vw, 1040px);
  background:
    linear-gradient(98deg, rgba(215, 180, 74, 0.28) 0 18%, rgba(15, 26, 46, 0.14) 18% 52%, rgba(127, 153, 144, 0.2) 52% 100%);
  clip-path: polygon(0 12%, 100% 0, 94% 100%, 8% 82%);
  --boundary-tilt: 0.5deg;
}

.page-panel-d {
  background:
    linear-gradient(102deg, rgba(15, 26, 46, 0.12) 0 24%, transparent 24% 100%),
    linear-gradient(18deg, transparent 0 48%, rgba(215, 180, 74, 0.22) 48% 62%, transparent 62% 100%),
    repeating-linear-gradient(90deg, rgba(15, 26, 46, 0.046) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg, rgba(15, 26, 46, 0.034) 0 1px, transparent 1px 56px),
    #f0f4f2;
}

.page-panel-d::before {
  left: auto;
  right: max(-100px, -8vw);
  width: min(64vw, 860px);
  background:
    linear-gradient(120deg, rgba(127, 153, 144, 0.32) 0 44%, rgba(255, 255, 255, 0.38) 44% 70%, rgba(215, 180, 74, 0.2) 70% 100%);
  clip-path: polygon(12% 0, 100% 0, 88% 92%, 0 100%);
  --boundary-tilt: 1.1deg;
}

.page-panel-e {
  background:
    linear-gradient(172deg, transparent 0 44%, rgba(15, 26, 46, 0.88) 44% 66%, transparent 66% 100%),
    linear-gradient(26deg, transparent 0 63%, rgba(127, 153, 144, 0.3) 63% 90%, transparent 90% 100%),
    repeating-linear-gradient(90deg, rgba(15, 26, 46, 0.052) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg, rgba(15, 26, 46, 0.038) 0 1px, transparent 1px 56px),
    #e8efee;
}

.page-panel-e::before {
  left: max(-110px, -9vw);
  width: min(82vw, 1100px);
  height: clamp(220px, 30vw, 390px);
  background:
    linear-gradient(100deg, rgba(15, 26, 46, 0.24) 0 22%, rgba(215, 180, 74, 0.24) 22% 42%, rgba(255, 255, 255, 0.22) 42% 100%);
  clip-path: polygon(0 0, 100% 12%, 88% 100%, 0 72%);
  --boundary-tilt: -0.8deg;
}

.page-panel-f {
  background:
    linear-gradient(103deg, rgba(215, 180, 74, 0.3) 0 17%, transparent 17% 100%),
    linear-gradient(24deg, transparent 0 55%, rgba(127, 153, 144, 0.28) 55% 82%, transparent 82% 100%),
    repeating-linear-gradient(90deg, rgba(15, 26, 46, 0.052) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg, rgba(15, 26, 46, 0.038) 0 1px, transparent 1px 56px),
    #f0f3f1;
}

.page-panel-f::before {
  left: 8%;
  width: min(82vw, 1080px);
  background:
    linear-gradient(96deg, rgba(215, 180, 74, 0.36) 0 28%, rgba(15, 26, 46, 0.12) 28% 44%, rgba(255, 255, 255, 0.28) 44% 100%);
  --boundary-tilt: 0.6deg;
}

@media (max-width: 720px) {
  .chapter-map {
    background:
      linear-gradient(100deg, rgba(15, 26, 46, 0.82) 0 36%, transparent 36% 100%),
      linear-gradient(18deg, transparent 0 60%, rgba(215, 180, 74, 0.24) 60% 78%, transparent 78% 100%),
      repeating-linear-gradient(90deg, rgba(15, 26, 46, 0.045) 0 1px, transparent 1px 44px),
      repeating-linear-gradient(0deg, rgba(15, 26, 46, 0.034) 0 1px, transparent 1px 44px),
      #e8efee;
  }

  .page-panel::before {
    top: 18px;
    left: -44px;
    right: auto;
    width: calc(100vw + 88px);
    height: 178px;
    opacity: 0.5;
    transform: rotate(var(--boundary-tilt, -1deg));
  }

  .page-panel-b::before,
  .page-panel-d::before {
    left: -44px;
    right: auto;
  }
}

/* 260625 Ramotion reference pass: tighter type rhythm, round trigger, live mockup motion. */
.hero h1,
.founder-title h2,
.vision-section .manifesto-layout h2,
.branding-section .identity-copy h2,
.ecosystem-head h2,
.products-head h2 {
  font-weight: 950;
  letter-spacing: 0;
  text-wrap: balance;
}

.hero h1 {
  line-height: 0.88;
}

.branding-section .identity-copy h2,
.ecosystem-head h2,
.products-head h2 {
  line-height: 0.92;
}

.rhythm-copy,
.founder-copy p,
.founder-copy b,
.layer-detail p,
.loop-step p,
.product-axis p,
.products-head p {
  letter-spacing: 0;
  line-height: 1.62;
}

.section-kicker,
.detail-label,
.product-axis span,
.layer-button,
.loop-step span {
  letter-spacing: 0;
}

.chaos-toggle {
  width: 74px;
  min-width: 74px;
  height: 74px;
  min-height: 74px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.9) 0 18%, transparent 19%),
    linear-gradient(140deg, var(--semita) 0 68%, var(--paper) 68% 100%);
  box-shadow:
    9px 9px 0 var(--ink),
    -5px -5px 0 rgba(255, 255, 255, 0.8),
    0 0 0 7px rgba(215, 180, 74, 0.16);
}

.chaos-toggle span {
  transform: translateY(-2px) rotate(-7deg);
}

.chaos-toggle::before {
  top: -9px;
  left: -6px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--paper);
}

.chaos-toggle::after {
  right: 12px;
  bottom: 12px;
  width: 18px;
  height: 6px;
  border-radius: 999px;
  background: var(--ink);
  box-shadow:
    -34px -35px 0 rgba(15, 26, 46, 0.16),
    6px -44px 0 rgba(215, 180, 74, 0.32);
}

.chaos-toggle:hover,
.chaos-toggle.is-tapped {
  color: var(--semita);
  background:
    radial-gradient(circle at 68% 30%, rgba(215, 180, 74, 0.75) 0 16%, transparent 17%),
    linear-gradient(140deg, var(--ink) 0 72%, var(--paper) 72% 100%);
  transform: translate(-4px, -7px) rotate(-11deg) scale(1.08);
}

.branding-section,
.products-section {
  position: relative;
}

.brand-device-mockup {
  position: absolute;
  left: clamp(32px, 4.6vw, 84px);
  bottom: clamp(34px, 4vw, 72px);
  z-index: 4;
  width: clamp(280px, 29vw, 430px);
  max-width: 36%;
  pointer-events: none;
}

.device-stage {
  position: relative;
  isolation: isolate;
  animation: susemiesMockFloatPhone 7.2s cubic-bezier(0.45, 0, 0.25, 1) infinite;
  transform-origin: 52% 58%;
}

.device-stage > img {
  position: relative;
  z-index: 3;
  display: block;
  width: 100%;
  filter:
    drop-shadow(22px 25px 26px rgba(15, 26, 46, 0.2))
    saturate(0.98)
    contrast(1.03);
}

.device-brand-layer {
  position: absolute;
  top: 9.2%;
  left: 10.4%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 60.8%;
  height: 80.8%;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 26%, rgba(15, 26, 46, 0.18) 0 12%, transparent 13%),
    linear-gradient(126deg, #7f9990 0 24%, #d7b44a 24% 47%, #e8eff2 47% 68%, #b8c7c2 68% 100%),
    repeating-linear-gradient(90deg, rgba(15, 26, 46, 0.06) 0 1px, transparent 1px 22px);
  background-size: 140% 140%, 170% 170%, 36px 36px;
  background-position: 0% 0%, 100% 50%, 0 0;
  clip-path: polygon(13% 0.6%, 90% 2.6%, 99% 8.4%, 84% 99%, 1.4% 91%, 0.6% 12.8%);
  opacity: 1;
  transform: none;
  animation: susemiesScreenFieldDrift 8.2s ease-in-out infinite;
}

.device-brand-layer::before,
.device-brand-layer::after {
  position: absolute;
  content: "";
  border-radius: 999px;
  pointer-events: none;
}

.device-brand-layer::before {
  width: 72%;
  height: 14%;
  background:
    linear-gradient(90deg, rgba(15, 26, 46, 0.9) 0 22%, rgba(215, 180, 74, 0.95) 22% 62%, rgba(255, 255, 255, 0.66) 62% 100%);
  transform: translateX(-116%) rotate(-15deg);
  animation: susemiesBrandSweep 5.2s cubic-bezier(0.18, 0.9, 0.22, 1) infinite;
}

.device-brand-layer::after {
  right: 21%;
  bottom: 14%;
  width: 18px;
  height: 18px;
  background: var(--sage);
  animation: susemiesBrandDotPop 5.2s cubic-bezier(0.18, 0.9, 0.22, 1) infinite;
}

.device-symbol {
  position: relative;
  z-index: 2;
  width: min(28%, 74px);
  opacity: 0;
  filter: drop-shadow(0 10px 18px rgba(15, 26, 46, 0.18));
  animation: susemiesBrandSymbolPop 5.2s cubic-bezier(0.18, 0.9, 0.22, 1) infinite;
  transform-origin: 42% 55%;
}

.device-logotype {
  position: absolute;
  left: 50%;
  bottom: 9%;
  z-index: 3;
  width: 56%;
  opacity: 0;
  filter: drop-shadow(0 8px 12px rgba(15, 26, 46, 0.18));
  animation: susemiesPhoneTypeSlide 5.2s cubic-bezier(0.18, 0.9, 0.22, 1) infinite;
}

.brand-billboard-mockup {
  position: relative;
  z-index: 5;
  isolation: isolate;
  width: 100vw;
  height: clamp(300px, 38vw, 560px);
  margin: clamp(72px, 8vw, 118px) calc(50% - 50vw) 0;
  overflow: hidden;
  background: var(--ink);
}

.brand-billboard-mockup::before {
  position: absolute;
  inset: 0;
  z-index: 2;
  content: "";
  background:
    linear-gradient(90deg, rgba(15, 26, 46, 0.55) 0 19%, transparent 38% 72%, rgba(215, 180, 74, 0.22) 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 44px);
  mix-blend-mode: normal;
  pointer-events: none;
}

.billboard-stage {
  position: absolute;
  inset: -5% -3%;
  width: 106%;
  height: 112%;
  animation: susemiesMockFloatBillboard 8.4s cubic-bezier(0.45, 0, 0.25, 1) infinite;
  transform-origin: 58% 56%;
}

.billboard-stage > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 43%;
  filter: saturate(0.9) contrast(1.02) brightness(0.92);
}

.billboard-brand-layer {
  position: absolute;
  top: 25.4%;
  left: 18.7%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 64.7%;
  height: 39.8%;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 56%, rgba(15, 26, 46, 0.18) 0 12%, transparent 13%),
    linear-gradient(112deg, #d7b44a 0 26%, #7f9990 26% 51%, #e8eff2 51% 66%, #0f1a2e 66% 100%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 26px);
  background-size: 150% 150%, 180% 180%, 42px 42px;
  background-position: 100% 0%, 0% 50%, 0 0;
  clip-path: polygon(0.6% 1.4%, 99.2% 4.5%, 99.1% 96.4%, 1.2% 91.6%);
  transform: perspective(1200px) rotateX(1.4deg) rotateY(-7deg) rotateZ(4.2deg);
  transform-origin: 50% 50%;
  animation: susemiesBillboardFieldDrift 9.8s ease-in-out infinite;
}

.billboard-brand-layer::before {
  position: absolute;
  right: 7%;
  bottom: 14%;
  left: auto;
  width: 42%;
  height: 18%;
  content: "";
  background:
    linear-gradient(90deg, #0f1a2e 0 34%, #d7b44a 34% 64%, #f6f8fa 64% 100%);
  transform: translateX(-120%) rotate(-6deg);
  animation: susemiesBrandSweep 6.4s cubic-bezier(0.18, 0.9, 0.22, 1) infinite;
}

.billboard-symbol {
  position: absolute;
  left: 8.2%;
  top: 24%;
  width: clamp(44px, 6.8vw, 92px);
  opacity: 0;
  animation: susemiesBrandSymbolPop 6.4s cubic-bezier(0.18, 0.9, 0.22, 1) infinite;
}

.billboard-logotype {
  position: relative;
  z-index: 2;
  width: min(46%, 380px);
  padding: clamp(8px, 1vw, 13px) clamp(14px, 1.7vw, 22px);
  background: rgba(246, 248, 250, 0.92);
  filter: drop-shadow(10px 12px 0 rgba(15, 26, 46, 0.16));
  opacity: 0;
  animation: susemiesBrandTypeSlide 6.4s cubic-bezier(0.18, 0.9, 0.22, 1) infinite;
}

.billboard-brand-layer span {
  position: absolute;
  right: 7%;
  bottom: 10%;
  z-index: 3;
  padding: 8px 14px;
  border: 2px solid var(--ink);
  color: var(--paper);
  background: var(--ink);
  font-size: clamp(0.82rem, 1.2vw, 1.08rem);
  font-weight: 950;
  line-height: 1;
  opacity: 0;
  transform: translateX(32px) rotate(4deg);
  animation: susemiesBrandTagPop 6.4s cubic-bezier(0.18, 0.9, 0.22, 1) infinite;
}

@keyframes susemiesMockFloatPhone {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-5deg);
  }
  34% {
    transform: translate3d(10px, -14px, 0) rotate(-2deg);
  }
  68% {
    transform: translate3d(-8px, 8px, 0) rotate(-7deg);
  }
}

@keyframes susemiesMockFloatBillboard {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0.4deg);
  }
  42% {
    transform: translate3d(-10px, -12px, 0) rotate(-0.8deg);
  }
  76% {
    transform: translate3d(12px, 7px, 0) rotate(1.1deg);
  }
}

@keyframes susemiesScreenFieldDrift {
  0%,
  100% {
    background-position:
      0% 0%,
      100% 50%,
      0 0;
  }
  42% {
    background-position:
      78% 22%,
      18% 68%,
      14px 9px;
  }
  72% {
    background-position:
      28% 84%,
      72% 18%,
      -10px 16px;
  }
}

@keyframes susemiesBillboardFieldDrift {
  0%,
  100% {
    background-position:
      100% 0%,
      0% 50%,
      0 0;
  }
  38% {
    background-position:
      34% 62%,
      88% 22%,
      18px 0;
  }
  76% {
    background-position:
      78% 84%,
      26% 82%,
      -14px 12px;
  }
}

@keyframes susemiesBrandSweep {
  0%,
  14% {
    transform: translateX(-120%) rotate(-8deg);
  }
  26%,
  48% {
    transform: translateX(0%) rotate(-8deg);
  }
  62%,
  100% {
    transform: translateX(128%) rotate(-8deg);
  }
}

@keyframes susemiesBrandSymbolPop {
  0%,
  10% {
    opacity: 0;
    transform: translate3d(-22px, 24px, 0) scale(0.72) rotate(-14deg);
  }
  20%,
  62% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
  74%,
  100% {
    opacity: 0;
    transform: translate3d(28px, -18px, 0) scale(1.08) rotate(12deg);
  }
}

@keyframes susemiesPhoneTypeSlide {
  0%,
  18% {
    opacity: 0;
    transform: translate3d(-50%, 18px, 0) skewX(-8deg) scale(0.92);
  }
  30%,
  66% {
    opacity: 1;
    transform: translate3d(-50%, 0, 0) skewX(0deg) scale(1);
  }
  80%,
  100% {
    opacity: 0;
    transform: translate3d(calc(-50% + 48px), -10px, 0) skewX(6deg) scale(0.98);
  }
}

@keyframes susemiesBrandTypeSlide {
  0%,
  18% {
    opacity: 0;
    transform: translate3d(-56px, 16px, 0) skewX(-8deg);
  }
  30%,
  66% {
    opacity: 1;
    transform: translate3d(0, 0, 0) skewX(0deg);
  }
  80%,
  100% {
    opacity: 0;
    transform: translate3d(62px, -10px, 0) skewX(6deg);
  }
}

@keyframes susemiesBrandTagPop {
  0%,
  24% {
    opacity: 0;
    transform: translateX(32px) rotate(4deg);
  }
  34%,
  66% {
    opacity: 1;
    transform: translateX(0) rotate(-3deg);
  }
  82%,
  100% {
    opacity: 0;
    transform: translateX(-38px) rotate(-8deg);
  }
}

@keyframes susemiesBrandDotPop {
  0%,
  24%,
  64%,
  100% {
    opacity: 0;
    transform: scale(0.4);
  }
  35%,
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 1020px) {
  .brand-device-mockup {
    position: absolute;
    left: clamp(16px, 5vw, 36px);
    bottom: 22px;
    width: min(330px, 48vw);
    max-width: 48vw;
    margin: 0;
    grid-column: 1 / -1;
    opacity: 0.92;
  }

  .brand-billboard-mockup {
    height: clamp(260px, 46vw, 420px);
    margin-top: 56px;
  }
}

@media (max-width: 720px) {
  .hero-actions {
    width: max-content;
    max-width: none;
  }

  .chaos-toggle {
    width: 66px;
    min-width: 66px;
    height: 66px;
    min-height: 66px;
  }

  .brand-device-mockup {
    position: relative;
    left: auto;
    bottom: auto;
    width: min(260px, 72vw);
    max-width: 100%;
    margin: 18px auto 0;
    opacity: 0.96;
  }

  .brand-billboard-mockup {
    height: 280px;
  }

  .billboard-brand-layer span {
    display: none;
  }
}

/* Move the live phone mockup into the Living Canvas experience block. */
.chaos-board .brand-device-mockup {
  left: auto;
  right: clamp(96px, 10.8vw, 180px);
  bottom: clamp(-4px, 1.4vw, 22px);
  z-index: 4;
  width: clamp(210px, 23vw, 350px);
  max-width: 38%;
  opacity: 0.96;
}

.chaos-board .device-stage {
  animation:
    susemiesMockFloatPhone 7.2s cubic-bezier(0.45, 0, 0.25, 1) infinite,
    susemiesCanvasPhoneDrift 11s ease-in-out infinite;
}

.chaos-board .device-stage > img {
  filter:
    drop-shadow(24px 28px 28px rgba(15, 26, 46, 0.22))
    saturate(0.98)
    contrast(1.03);
}

.chaos-board .brand-device-mockup::before {
  content: none;
}

.branding-section .brand-device-mockup {
  display: none;
}

@keyframes susemiesCanvasPhoneDrift {
  0%,
  100% {
    filter: hue-rotate(0deg);
  }
  45% {
    filter: hue-rotate(-3deg);
  }
}

@media (max-width: 1020px) {
  .chaos-board .brand-device-mockup {
    left: auto;
    right: 2%;
    bottom: 0;
    width: min(300px, 42vw);
    max-width: 42vw;
  }
}

@media (max-width: 720px) {
  .chaos-board {
    min-height: 820px;
  }

  .chaos-board .board-title {
    top: 32%;
  }

  .chaos-board .brand-device-mockup {
    position: absolute;
    right: 50%;
    bottom: 38px;
    width: min(210px, 62vw);
    max-width: 62vw;
    margin: 0;
    transform: translateX(50%);
  }
}

/* Strict device masks: animation is clipped to the real screen body, not approximated by polygons. */
.device-brand-layer {
  inset: 0;
  width: auto;
  height: auto;
  clip-path: none;
  background: #0f1a2e;
  -webkit-mask-image: url("./assets/susemies-phone-screen-mask-v4-260625.png");
  mask-image: url("./assets/susemies-phone-screen-mask-v4-260625.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center;
  mask-position: center;
  animation: none;
}

.device-screen-plane {
  position: absolute;
  inset: -12% -14%;
  overflow: hidden;
  background:
    linear-gradient(68deg, transparent 0 25%, rgba(246, 248, 250, 0.13) 31%, rgba(246, 248, 250, 0.03) 40%, transparent 48%),
    radial-gradient(circle at 49% 55%, rgba(246, 248, 250, 0.13) 0 22%, transparent 23%),
    linear-gradient(140deg, #0f1a2e 0 26%, #1f2b3d 26% 54%, #0f1a2e 54% 100%),
    repeating-linear-gradient(90deg, rgba(246, 248, 250, 0.055) 0 1px, transparent 1px 26px);
  background-size: 126% 126%, 150% 150%, 182% 182%, 36px 36px;
  background-position: 42% 50%, 0% 0%, 100% 50%, 0 0;
  transform: perspective(720px) rotateX(2.4deg) rotateY(-25deg) rotateZ(7deg) skewY(-4.4deg) scale(1.2);
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  animation: susemiesScreenFieldDrift 8.2s ease-in-out infinite;
}

.device-brand-layer::before {
  content: none;
}

.device-brand-layer::after {
  content: none;
}

.device-screen-plane::after {
  position: absolute;
  inset: 0;
  z-index: 5;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(122deg, transparent 0 24%, rgba(255, 255, 255, 0.12) 32%, rgba(255, 255, 255, 0.025) 43%, transparent 54%),
    repeating-linear-gradient(90deg, rgba(246, 248, 250, 0.048) 0 1px, rgba(9, 15, 27, 0.06) 1px 2px, transparent 2px 15px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 5px);
  mix-blend-mode: screen;
  opacity: 0.38;
}

.device-symbol {
  position: absolute;
  left: 48.8%;
  top: 43.4%;
  width: min(32%, 118px);
  opacity: 0;
  filter:
    drop-shadow(5px 7px 0 rgba(9, 15, 27, 0.18))
    drop-shadow(0 0 12px rgba(246, 248, 250, 0.12));
  animation: susemiesPhoneSymbolPulse 5.6s cubic-bezier(0.18, 0.9, 0.22, 1) infinite;
  transform-origin: center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.device-logotype {
  left: 48.9%;
  top: 55.1%;
  bottom: auto;
  width: 42%;
  opacity: 0;
  filter:
    drop-shadow(5px 7px 0 rgba(9, 15, 27, 0.18))
    drop-shadow(0 0 11px rgba(215, 180, 74, 0.12));
  animation: susemiesPhoneTypePulse 5.6s cubic-bezier(0.18, 0.9, 0.22, 1) infinite;
  animation-delay: 0.08s;
  transform-origin: center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.billboard-brand-layer {
  inset: 0;
  width: auto;
  height: auto;
  clip-path: none;
  transform: none;
  background:
    radial-gradient(circle at 18% 48%, rgba(15, 26, 46, 0.28) 0 11%, transparent 12%),
    linear-gradient(112deg, #d7b44a 0 28%, #7f9990 28% 53%, #0f1a2e 53% 72%, #b9c9c4 72% 100%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 26px);
  background-size: 145% 145%, 180% 180%, 42px 42px;
  background-position: 100% 0%, 0% 50%, 0 0;
  -webkit-mask-image: url("./assets/susemies-billboard-screen-mask-260625.png");
  mask-image: url("./assets/susemies-billboard-screen-mask-260625.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: 50% 43%;
  mask-position: 50% 43%;
}

.billboard-brand-layer::before {
  right: 12%;
  bottom: 28%;
  width: 30%;
  height: 12%;
  opacity: 0.28;
  background: linear-gradient(90deg, #0f1a2e 0 34%, #d7b44a 34% 68%, #7f9990 68% 100%);
}

.billboard-symbol {
  left: 31%;
  top: 45%;
  width: clamp(46px, 5.8vw, 86px);
  z-index: 2;
  opacity: 1;
  animation: susemiesBillboardSymbolPop 6.4s cubic-bezier(0.18, 0.9, 0.22, 1) infinite;
}

.billboard-logotype {
  position: absolute;
  left: 52%;
  top: 47%;
  width: min(34%, 360px);
  padding: 0;
  background: transparent;
  opacity: 1;
  filter:
    drop-shadow(7px 8px 0 rgba(215, 180, 74, 0.54))
    drop-shadow(0 0 10px rgba(232, 239, 242, 0.34));
  animation: susemiesBillboardTypePop 6.4s cubic-bezier(0.18, 0.9, 0.22, 1) infinite;
}

.billboard-brand-layer span {
  right: 18%;
  bottom: 36%;
  border-color: #0f1a2e;
  color: #f6f8fa;
  background: #0f1a2e;
}

@keyframes susemiesPhoneSymbolPop {
  0%,
  12% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.72) rotate(-12deg);
  }
  24%,
  66% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
  78%,
  100% {
    opacity: 0;
    transform: translate(calc(-50% + 34px), calc(-50% - 14px)) scale(1.06) rotate(10deg);
  }
}

@keyframes susemiesPhoneSymbolHold {
  0%,
  12% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.97) rotate(-2deg);
  }
  24%,
  78% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
  90%,
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.98) rotate(2deg);
  }
}

@keyframes susemiesPhoneTypePop {
  0%,
  18% {
    opacity: 0;
    transform: translate(-50%, 18px) scale(0.92) skewX(-8deg);
  }
  30%,
  68% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1) skewX(0deg);
  }
  82%,
  100% {
    opacity: 0;
    transform: translate(calc(-50% + 34px), -10px) scale(0.98) skewX(6deg);
  }
}

@keyframes susemiesPhoneTypeHold {
  0%,
  18% {
    opacity: 1;
    transform: translate(-50%, calc(-50% + 4px)) scale(0.98);
  }
  30%,
  80% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  92%,
  100% {
    opacity: 1;
    transform: translate(-50%, calc(-50% - 3px)) scale(0.99);
  }
}

@keyframes susemiesBillboardSymbolPop {
  0%,
  12% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.96) rotate(-3deg);
  }
  24%,
  68% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
  82%,
  100% {
    opacity: 1;
    transform: translate(calc(-50% + 8px), calc(-50% - 3px)) scale(0.98) rotate(2deg);
  }
}

@keyframes susemiesBillboardTypePop {
  0%,
  18% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.98) skewX(-2deg);
  }
  30%,
  70% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) skewX(0deg);
  }
  84%,
  100% {
    opacity: 1;
    transform: translate(calc(-50% + 8px), calc(-50% - 3px)) scale(0.99) skewX(1deg);
  }
}

/* Mockup cutout compositing: white screens are transparent in the bitmap, brand motion lives behind. */
.device-stage,
.billboard-stage {
  isolation: isolate;
}

.device-stage > img {
  z-index: 5;
}

.device-brand-layer {
  z-index: 1;
}

.billboard-stage > img {
  position: relative;
  z-index: 5;
}

.billboard-brand-layer {
  inset: 0;
  z-index: 1;
  display: block;
  width: auto;
  height: auto;
  clip-path: none;
  transform: none;
  transform-origin: 50% 50%;
  -webkit-mask-image: none;
  mask-image: none;
  background: #0f1a2e;
  overflow: hidden;
  animation: none;
  box-shadow:
    inset 0 0 0 1px rgba(246, 248, 250, 0.08),
    inset 0 -18px 0 rgba(9, 15, 27, 0.28);
}

.billboard-screen-plane {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    linear-gradient(70deg, transparent 0 24%, rgba(246, 248, 250, 0.1) 30%, rgba(246, 248, 250, 0.03) 37%, transparent 46%),
    linear-gradient(168deg, rgba(255, 255, 255, 0.08) 0 8%, transparent 18% 78%, rgba(15, 26, 46, 0.18) 100%),
    radial-gradient(circle at 34% 46%, rgba(232, 239, 242, 0.18) 0 10.5%, transparent 11.5%),
    linear-gradient(104deg, #0f1a2e 0 20%, #d7b44a 20% 28%, #0f1a2e 28% 73%, #7f9990 73% 100%),
    repeating-linear-gradient(90deg, rgba(246, 248, 250, 0.12) 0 1px, transparent 1px 28px);
  background-size: 125% 125%, 100% 100%, 150% 150%, 190% 190%, 42px 42px;
  background-position: 42% 50%, 0 0, 100% 0%, 0% 50%, 0 0;
  transform: none;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  animation: susemiesBillboardFieldDrift 9.8s ease-in-out infinite;
}

.billboard-brand-layer::before {
  content: none;
}

.billboard-screen-plane::before {
  position: absolute;
  content: "";
  right: 16.8%;
  bottom: 29.2%;
  z-index: 1;
  width: 27%;
  height: 8.8%;
  opacity: 0.46;
  transform: perspective(900px) rotateX(1deg) rotateY(-13deg) rotateZ(4.7deg) skewX(-6deg);
  animation: none;
  background: linear-gradient(90deg, #0f1a2e 0 34%, #d7b44a 34% 68%, #7f9990 68% 100%);
}

.billboard-screen-plane::after {
  position: absolute;
  inset: 0;
  z-index: 5;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(106deg, transparent 0 34%, rgba(255, 255, 255, 0.11) 39%, rgba(255, 255, 255, 0.02) 47%, transparent 58%),
    repeating-linear-gradient(90deg, rgba(246, 248, 250, 0.055) 0 1px, rgba(9, 15, 27, 0.06) 1px 2px, transparent 2px 18px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 5px);
  mix-blend-mode: screen;
  opacity: 0.46;
}

.billboard-symbol {
  left: 32%;
  top: 45.8%;
  z-index: 2;
  width: clamp(120px, 12.6vw, 210px);
  opacity: 0;
  filter:
    drop-shadow(5px 6px 0 rgba(9, 15, 27, 0.18))
    drop-shadow(0 0 10px rgba(246, 248, 250, 0.12));
  transform-origin: center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  animation: susemiesBillboardSymbolOnPlane 5.8s cubic-bezier(0.18, 0.9, 0.22, 1) infinite;
}

.billboard-logotype {
  left: 56.2%;
  top: 45.5%;
  z-index: 2;
  width: min(39%, 510px);
  opacity: 0;
  transform-origin: center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  filter:
    drop-shadow(5px 5px 0 rgba(15, 26, 46, 0.24))
    drop-shadow(0 0 8px rgba(232, 239, 242, 0.22));
  animation: susemiesBillboardTypeOnPlane 5.8s cubic-bezier(0.18, 0.9, 0.22, 1) infinite;
  animation-delay: 0.08s;
}

.billboard-brand-layer span {
  display: none;
}

/* Billboard scene: make the mockup feel like a full-height asymmetric brand moment. */
.brand-billboard-mockup {
  height: clamp(520px, 58vw, 760px);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: clamp(86px, 9vw, 136px);
  overflow: hidden;
  clip-path: polygon(0 7%, 100% 0, 100% 91%, 0 100%);
  background:
    linear-gradient(112deg, rgba(15, 26, 46, 0.98) 0 22%, rgba(31, 43, 61, 0.78) 22% 100%);
}

.brand-billboard-mockup::before {
  z-index: 0;
  background:
    linear-gradient(98deg, rgba(15, 26, 46, 0.28) 0 20%, transparent 42% 76%, rgba(215, 180, 74, 0.16) 100%),
    repeating-linear-gradient(90deg, rgba(246, 248, 250, 0.08) 0 1px, transparent 1px 44px);
}

.brand-billboard-mockup::after {
  position: absolute;
  left: -6vw;
  right: -4vw;
  bottom: 2%;
  z-index: 1;
  height: clamp(26px, 4vw, 58px);
  content: "";
  background: rgba(15, 26, 46, 0.82);
  transform: rotate(-2.4deg);
  pointer-events: none;
}

.billboard-stage {
  inset: -13% -7% -8%;
  z-index: 2;
  width: 114%;
  height: 126%;
}

.billboard-stage > img {
  object-fit: cover;
  object-position: 50% 48%;
}

@media (max-width: 1020px) {
  .brand-billboard-mockup {
    height: clamp(420px, 70vw, 620px);
    clip-path: polygon(0 5%, 100% 0, 100% 94%, 0 100%);
  }
}

@media (max-width: 720px) {
  .brand-billboard-mockup {
    height: 430px;
  }

  .billboard-stage {
    inset: -7% -8% -5%;
    width: 116%;
    height: 112%;
  }
}

@keyframes susemiesBillboardSymbolOnPlane {
  0%,
  7% {
    opacity: 0;
    transform: translate(calc(-50% - 44px), calc(-50% + 16px)) rotate(-8deg) scale(0.62);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-1deg) scale(1.04);
  }
  22%,
  68% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
  }
  82% {
    opacity: 1;
    transform: translate(calc(-50% + 18px), calc(-50% - 6px)) rotate(4deg) scale(1.08);
  }
  93%,
  100% {
    opacity: 0;
    transform: translate(calc(-50% + 54px), calc(-50% - 18px)) rotate(9deg) scale(0.86);
  }
}

@keyframes susemiesBillboardTypeOnPlane {
  0%,
  8% {
    opacity: 0;
    transform: translate(calc(-50% + 54px), calc(-50% + 10px)) rotate(-3deg) scale(0.9);
  }
  16% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0.4deg) scale(1.04);
  }
  22%,
  70% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
  }
  84% {
    opacity: 1;
    transform: translate(calc(-50% - 16px), calc(-50% - 5px)) rotate(-2deg) scale(1.02);
  }
  94%,
  100% {
    opacity: 0;
    transform: translate(calc(-50% - 64px), calc(-50% - 18px)) rotate(-5deg) scale(0.92);
  }
}

@keyframes susemiesPhoneSymbolHold {
  0%,
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-0.3deg) scale(0.98);
  }
  48% {
    opacity: 1;
    transform: translate(calc(-50% + 5px), calc(-50% - 2px)) rotate(0.3deg) scale(1);
  }
}

@keyframes susemiesPhoneTypeHold {
  0%,
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-0.2deg) scale(0.98);
  }
  48% {
    opacity: 1;
    transform: translate(calc(-50% + 5px), calc(-50% - 2px)) rotate(0.2deg) scale(1);
  }
}

@keyframes susemiesPhoneSymbolPulse {
  0%,
  8% {
    opacity: 0;
    transform: translate(calc(-50% - 30px), calc(-50% + 14px)) rotate(-5deg) skewY(-4deg) scale(0.76);
  }
  16% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(2deg) skewY(-4deg) scale(1.1);
  }
  24% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(2deg) skewY(-4deg) scale(0.96);
  }
  33% {
    opacity: 1;
    transform: translate(calc(-50% + 1px), calc(-50% - 1px)) rotate(2.4deg) skewY(-4deg) scale(1.08);
  }
  43%,
  66% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(2deg) skewY(-4deg) scale(1);
  }
  82% {
    opacity: 1;
    transform: translate(calc(-50% + 22px), calc(-50% - 10px)) rotate(7deg) skewY(-4deg) scale(1.08);
  }
  94%,
  100% {
    opacity: 0;
    transform: translate(calc(-50% + 46px), calc(-50% - 22px)) rotate(10deg) skewY(-4deg) scale(0.82);
  }
}

@keyframes susemiesPhoneTypePulse {
  0%,
  9% {
    opacity: 0;
    transform: translate(calc(-50% + 30px), calc(-50% + 12px)) rotate(0deg) skewY(-3.2deg) scale(0.86);
  }
  17% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(2.2deg) skewY(-3.2deg) scale(1.075);
  }
  25% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(2.2deg) skewY(-3.2deg) scale(0.97);
  }
  34% {
    opacity: 1;
    transform: translate(calc(-50% + 1px), calc(-50% - 1px)) rotate(2.4deg) skewY(-3.2deg) scale(1.055);
  }
  44%,
  68% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(2.2deg) skewY(-3.2deg) scale(1);
  }
  84% {
    opacity: 1;
    transform: translate(calc(-50% - 18px), calc(-50% - 9px)) rotate(-1deg) skewY(-3.2deg) scale(1.02);
  }
  95%,
  100% {
    opacity: 0;
    transform: translate(calc(-50% - 48px), calc(-50% - 18px)) rotate(-4deg) skewY(-3.2deg) scale(0.86);
  }
}

/* Operating loop: square, confident infographic composition. */
.solutions-section .operating-loop,
.operating-loop {
  grid-template-columns: minmax(210px, 1fr) minmax(210px, 240px) minmax(210px, 1fr);
  grid-template-rows: minmax(150px, 1fr) minmax(210px, 240px) minmax(150px, 1fr);
  grid-template-areas:
    ". one ."
    "four core two"
    ". three .";
  gap: clamp(18px, 2.2vw, 30px);
  align-items: center;
  justify-items: center;
  width: min(92vw, 920px);
  max-width: 920px;
  min-height: clamp(650px, 70vw, 800px);
  margin: 64px auto 0;
  padding: clamp(42px, 5vw, 66px);
  overflow: hidden;
  border: 2px solid rgba(15, 26, 46, 0.34);
  background:
    linear-gradient(116deg, rgba(215, 180, 74, 0.1) 0 17%, transparent 17% 100%),
    linear-gradient(64deg, transparent 0 61%, rgba(127, 153, 144, 0.14) 61% 76%, transparent 76% 100%),
    repeating-linear-gradient(90deg, rgba(15, 26, 46, 0.05) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(0deg, rgba(15, 26, 46, 0.04) 0 1px, transparent 1px 42px),
    #f8fbf9;
  box-shadow:
    12px 14px 0 rgba(15, 26, 46, 0.08),
    18px 22px 0 rgba(215, 180, 74, 0.12),
    0 24px 54px rgba(15, 26, 46, 0.12);
}

.operating-loop::before {
  top: 50%;
  left: 50%;
  z-index: 1;
  width: min(76%, 620px);
  height: min(76%, 620px);
  border: clamp(4px, 0.65vw, 7px) solid rgba(15, 26, 46, 0.62);
  border-top-color: rgba(215, 180, 74, 0.78);
  border-right-color: rgba(15, 26, 46, 0.4);
  border-bottom-color: rgba(127, 153, 144, 0.56);
  border-radius: 50%;
  box-shadow:
    0 0 0 16px rgba(246, 248, 250, 0.68),
    inset 0 0 0 1px rgba(15, 26, 46, 0.08);
  transform: translate(-50%, -50%) rotate(-8deg);
}

.operating-loop::after {
  position: absolute;
  inset: clamp(34px, 4vw, 56px);
  z-index: 0;
  content: "";
  background:
    linear-gradient(90deg, transparent 0 calc(50% - 1px), rgba(15, 26, 46, 0.08) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px) 100%),
    linear-gradient(0deg, transparent 0 calc(50% - 1px), rgba(15, 26, 46, 0.08) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px) 100%),
    radial-gradient(circle at 50% 50%, rgba(15, 26, 46, 0.035) 0 21%, transparent 21.4%);
  pointer-events: none;
}

.loop-core {
  z-index: 3;
  width: clamp(194px, 20vw, 232px);
  height: clamp(194px, 20vw, 232px);
  border: 2px solid rgba(15, 26, 46, 0.76);
  background:
    radial-gradient(circle at 50% 45%, rgba(215, 180, 74, 0.13) 0 31%, transparent 32%),
    #ffffff;
  box-shadow:
    0 0 0 9px rgba(15, 26, 46, 0.08),
    0 0 0 15px rgba(246, 248, 250, 0.9),
    10px 12px 0 rgba(15, 26, 46, 0.1);
}

.loop-core strong {
  color: rgba(15, 26, 46, 0.58);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
}

.loop-core span {
  max-width: 12ch;
  color: var(--ink);
  font-size: clamp(1.28rem, 1.78vw, 1.58rem);
  line-height: 1.14;
}

.loop-step {
  z-index: 4;
  width: min(100%, 286px);
  min-height: 144px;
  padding: 24px 24px 22px;
  border: 2px solid rgba(15, 26, 46, 0.58);
  background:
    linear-gradient(135deg, rgba(127, 153, 144, 0.08) 0 42%, transparent 42% 100%),
    rgba(255, 255, 255, 0.95);
  box-shadow:
    7px 8px 0 rgba(15, 26, 46, 0.08),
    0 14px 28px rgba(15, 26, 46, 0.08);
}

.loop-step h3 {
  margin-top: 14px;
  font-size: clamp(1.02rem, 1.32vw, 1.18rem);
  line-height: 1.18;
}

.loop-step p {
  margin-top: 12px;
  font-size: clamp(0.84rem, 0.96vw, 0.94rem);
  line-height: 1.55;
}

.loop-step span {
  color: rgba(15, 26, 46, 0.58);
  font-weight: 950;
}

.step-one {
  align-self: start;
  transform: rotate(-0.45deg) translateY(-2px);
}

.step-two {
  justify-self: end;
  transform: rotate(0.5deg) translateX(2px);
}

.step-three {
  align-self: end;
  transform: rotate(-0.4deg) translateY(2px);
}

.step-four {
  justify-self: start;
  transform: rotate(0.45deg) translateX(-2px);
}

@media (max-width: 1020px) {
  .solutions-section .operating-loop,
  .operating-loop {
    width: min(92vw, 760px);
    min-height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "core"
      "one"
      "two"
      "three"
      "four";
  }

  .operating-loop::before {
    inset: 28px;
    width: auto;
    height: auto;
    border-radius: 36px;
    transform: rotate(-2deg);
  }

  .step-one,
  .step-two,
  .step-three,
  .step-four {
    justify-self: stretch;
    align-self: auto;
    width: 100%;
    transform: none;
  }
}

/* 260625 final hero/menu render pass */
@media (min-width: 721px) {
  .site-header::before {
    display: none;
  }

  .site-nav {
    top: clamp(28px, 3vw, 46px);
    right: clamp(30px, 4.6vw, 78px);
    width: auto;
    max-width: none;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 0;
    transform: rotate(-0.7deg);
    z-index: 80;
  }

  .site-nav::before {
    display: none;
  }

  .nav-group,
  .site-nav > .nav-root {
    position: relative;
    margin-left: clamp(-20px, -1.4vw, -12px);
  }

  .nav-group::after {
    top: 100%;
    left: -12px;
    right: -12px;
    width: auto;
    height: 24px;
  }

  .nav-root {
    min-width: clamp(148px, 13.2vw, 204px);
    height: clamp(58px, 5.1vw, 74px);
    min-height: clamp(58px, 5.1vw, 74px);
    padding: 0 clamp(22px, 2.2vw, 34px);
    font-size: clamp(0.9rem, 0.92vw, 1.08rem);
    box-shadow:
      9px 10px 0 rgba(15, 26, 46, 0.2),
      0 12px 22px rgba(15, 26, 46, 0.12);
  }

  .nav-group:nth-child(1) > .nav-root {
    transform: rotate(-3.8deg) translateY(6px);
  }

  .nav-group:nth-child(2) > .nav-root {
    transform: rotate(2.1deg) translate(-8px, -4px);
  }

  .site-nav > .nav-root {
    transform: rotate(-1.2deg) translate(-16px, 8px);
  }

  .subnav {
    top: calc(100% + 10px);
    right: auto;
    left: 6px;
    min-width: clamp(190px, 16vw, 232px);
    transform: translateY(-4px) rotate(-2deg);
  }

  .nav-group:hover .subnav,
  .nav-group:focus-within .subnav,
  .nav-group.is-open .subnav {
    transform: translateY(0) rotate(-2deg);
  }

  .nav-group:nth-child(2) .subnav {
    left: -18px;
    transform: translateY(-4px) rotate(1.7deg);
  }

  .nav-group:nth-child(2):hover .subnav,
  .nav-group:nth-child(2):focus-within .subnav,
  .nav-group:nth-child(2).is-open .subnav {
    transform: translateY(0) rotate(1.7deg);
  }
}

.hero-copy {
  z-index: 14;
}

.hero h1 {
  line-height: 0.98;
}

.hero h1 span + span {
  margin-top: clamp(8px, 1vw, 16px);
}

.hero-runner-symbol {
  position: absolute;
  top: clamp(300px, 32vh, 420px);
  left: 0;
  width: clamp(360px, 42vw, 680px);
  height: auto;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: multiply;
  filter: drop-shadow(10px 12px 0 rgba(15, 26, 46, 0.13));
  animation: susemiesHeroRunner 8.8s cubic-bezier(0.5, 0, 0.15, 1) infinite;
}

@keyframes susemiesHeroRunner {
  0% {
    opacity: 0;
    transform: translate(-56vw, 8px) rotate(-28deg) scale(0.78);
  }
  8% {
    opacity: 0.3;
    transform: translate(46vw, -10px) rotate(6deg) scale(1.04);
  }
  11% {
    opacity: 0.32;
    transform: translate(42.6vw, 0) rotate(-5deg) scale(1);
  }
  17% {
    opacity: 0.29;
    transform: translate(43.8vw, 5px) rotate(1deg) scale(1.01);
  }
  48% {
    opacity: 0.28;
    transform: translate(44.2vw, -10px) rotate(3deg) scale(1.03);
  }
  58% {
    opacity: 0.31;
    transform: translate(43.4vw, 6px) rotate(-2deg) scale(1);
  }
  68% {
    opacity: 0.24;
    transform: translate(120vw, -52px) rotate(24deg) scale(0.84);
  }
  100% {
    opacity: 0;
    transform: translate(140vw, -62px) rotate(32deg) scale(0.72);
  }
}

@media (min-width: 921px) {
  .hero-collage {
    z-index: 10;
    pointer-events: none;
  }

  .hero-collage [data-drag] {
    pointer-events: auto;
    translate: 0 0;
    animation: susemiesRadialFloat var(--float-dur, 6.2s) ease-in-out var(--float-delay, 0s) infinite;
  }

  .hero-collage .note-a {
    top: clamp(170px, 17.5vh, 230px);
    right: clamp(260px, 23vw, 360px);
    transform: rotate(-5.5deg);
    --float-x: -8px;
    --float-y: -13px;
    --float-dur: 5.8s;
  }

  .hero-collage .note-b {
    top: clamp(845px, 83vh, 955px);
    right: clamp(122px, 11vw, 215px);
    transform: rotate(4.5deg);
    --float-x: 10px;
    --float-y: -8px;
    --float-delay: -1.3s;
  }

  .hero-collage .note-c {
    top: clamp(470px, 47vh, 550px);
    right: clamp(210px, 18vw, 300px);
    transform: rotate(-9deg);
    --float-x: -12px;
    --float-y: 10px;
    --float-delay: -0.8s;
  }

  .hero-collage .note-d {
    top: clamp(165px, 16.8vh, 225px);
    right: clamp(150px, 14vw, 240px);
    transform: rotate(6.5deg);
    --float-x: 12px;
    --float-y: 12px;
    --float-delay: -2s;
  }

  .hero-collage .layer-one {
    top: clamp(330px, 34vh, 420px);
    right: clamp(250px, 22vw, 340px);
    transform: rotate(4deg);
    --float-x: 8px;
    --float-y: -10px;
    --float-delay: -0.4s;
  }

  .hero-collage .layer-two {
    top: clamp(405px, 41.5vh, 490px);
    right: clamp(300px, 26vw, 405px);
    transform: rotate(-6deg);
    --float-x: -10px;
    --float-y: 8px;
    --float-delay: -1.7s;
  }

  .hero-collage .layer-three {
    top: clamp(540px, 54vh, 620px);
    right: clamp(230px, 20vw, 330px);
    transform: rotate(-7.5deg);
    --float-x: 12px;
    --float-y: -8px;
    --float-delay: -0.9s;
  }

  .hero-collage .layer-four {
    top: clamp(610px, 61vh, 700px);
    right: clamp(385px, 33vw, 510px);
    transform: rotate(1.5deg);
    --float-x: -9px;
    --float-y: -12px;
    --float-delay: -2.2s;
  }

  .hero-collage .window-one {
    top: clamp(505px, 51vh, 590px);
    right: clamp(170px, 15vw, 255px);
    transform: rotate(1.5deg);
    --float-x: 8px;
    --float-y: 10px;
    --float-delay: -1.4s;
  }

  .hero-collage .window-two {
    top: clamp(690px, 68vh, 790px);
    right: clamp(78px, 7vw, 155px);
    transform: rotate(-2deg);
    --float-x: 10px;
    --float-y: -11px;
    --float-delay: -0.2s;
  }

  .hero-collage .window-three {
    top: clamp(395px, 40vh, 480px);
    right: clamp(72px, 6.5vw, 145px);
    transform: rotate(2.5deg);
    --float-x: -7px;
    --float-y: 12px;
    --float-delay: -2.6s;
  }

  .hero-collage .gold-rule {
    top: clamp(500px, 50vh, 590px);
    right: clamp(100px, 9vw, 190px);
    width: clamp(220px, 19vw, 330px);
    height: 11px;
    transform: rotate(-8deg);
    opacity: 0.92;
    animation: susemiesGoldDrift 6.6s ease-in-out infinite;
  }
}

@keyframes susemiesRadialFloat {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: var(--float-x, 8px) var(--float-y, -10px);
  }
}

@keyframes susemiesGoldDrift {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 14px -8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-runner-symbol,
  .hero-collage [data-drag],
  .hero-collage .gold-rule {
    animation: none !important;
  }

  .hero-runner-symbol {
    opacity: 0.18;
    transform: translate(53vw, 0) rotate(0deg) scale(1);
  }
}

/* 260625 People placeholder section */
.people-section {
  min-height: clamp(620px, 78vh, 860px);
  display: flex;
  align-items: center;
  background:
    linear-gradient(98deg, rgba(15, 26, 46, 0.9) 0 28%, transparent 28% 100%),
    linear-gradient(158deg, transparent 0 48%, rgba(215, 180, 74, 0.24) 48% 61%, transparent 61% 100%),
    linear-gradient(24deg, transparent 0 66%, rgba(127, 153, 144, 0.28) 66% 88%, transparent 88% 100%),
    repeating-linear-gradient(90deg, rgba(15, 26, 46, 0.05) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg, rgba(15, 26, 46, 0.036) 0 1px, transparent 1px 56px),
    #edf3f1;
}

.people-section::after {
  content: "PEOPLE";
}

.page-panel-people::before {
  left: auto;
  right: max(-90px, -7vw);
  width: min(72vw, 980px);
  height: clamp(210px, 29vw, 380px);
  background:
    linear-gradient(112deg, rgba(215, 180, 74, 0.26) 0 26%, rgba(255, 255, 255, 0.34) 26% 58%, rgba(127, 153, 144, 0.2) 58% 100%);
  clip-path: polygon(8% 0, 100% 10%, 92% 100%, 0 84%);
  --boundary-tilt: -1.2deg;
}

.people-layout {
  width: min(var(--max), calc(100vw - 72px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(240px, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(28px, 5vw, 84px);
  align-items: center;
}

.people-title {
  color: var(--paper);
  transform: rotate(-1.4deg);
}

.people-title .section-kicker {
  color: var(--semita);
}

.people-title h2 {
  margin-top: 18px;
  font-size: clamp(4.6rem, 9vw, 9.4rem);
  line-height: 0.84;
  font-weight: 950;
  letter-spacing: 0;
}

.people-title p {
  display: inline-block;
  margin-top: 24px;
  padding: 14px 22px;
  border: 2px solid var(--ink);
  background: var(--semita);
  color: var(--ink);
  font-weight: 950;
  box-shadow: 8px 8px 0 rgba(15, 26, 46, 0.28);
}

.people-placeholder-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 28px);
  align-items: end;
}

.people-placeholder-grid article {
  min-height: clamp(230px, 24vw, 330px);
  padding: clamp(22px, 2.4vw, 34px);
  border: 2px solid var(--ink);
  background:
    linear-gradient(132deg, rgba(255, 255, 255, 0.95) 0 72%, rgba(244, 239, 217, 0.82) 72% 100%);
  box-shadow:
    10px 12px 0 rgba(15, 26, 46, 0.13),
    -10px -10px 0 rgba(215, 180, 74, 0.1);
}

.people-placeholder-grid article:nth-child(1) {
  transform: rotate(1.2deg) translateY(-18px);
}

.people-placeholder-grid article:nth-child(2) {
  min-height: clamp(280px, 28vw, 380px);
  background:
    linear-gradient(132deg, rgba(215, 180, 74, 0.9) 0 72%, rgba(255, 255, 255, 0.86) 72% 100%);
  transform: rotate(-1.5deg) translateY(18px);
}

.people-placeholder-grid article:nth-child(3) {
  transform: rotate(1.8deg) translateY(-4px);
}

.people-placeholder-grid span {
  color: var(--semita-deep);
  font-weight: 950;
}

.people-placeholder-grid h3 {
  margin-top: 28px;
  font-size: clamp(1.6rem, 2.2vw, 2.4rem);
  line-height: 1;
  font-weight: 950;
}

.people-placeholder-grid p {
  margin-top: 16px;
  font-weight: 850;
  color: rgba(15, 26, 46, 0.72);
}

@media (max-width: 900px) {
  .people-section {
    min-height: auto;
  }

  .people-layout {
    width: min(100% - 44px, 720px);
    grid-template-columns: 1fr;
    padding-block: 72px;
  }

  .people-title {
    color: var(--ink);
  }

  .people-placeholder-grid {
    grid-template-columns: 1fr;
  }

  .people-placeholder-grid article,
  .people-placeholder-grid article:nth-child(1),
  .people-placeholder-grid article:nth-child(2),
  .people-placeholder-grid article:nth-child(3) {
    min-height: 190px;
    transform: none;
  }
}

/* 260625 final typography hierarchy: heavy titles, quieter card body copy. */
.about-section .principle-grid article > span:not(.principle-icon),
.product-axis span,
.loop-step span,
.people-placeholder-grid span,
.company-info span {
  font-weight: 850;
  letter-spacing: 0;
}

.about-section .principle-grid article h3,
.product-axis h3,
.loop-step h3,
.people-placeholder-grid h3,
.layer-detail h3 {
  font-weight: 950;
  letter-spacing: 0;
}

.about-section .principle-grid article p,
.founder-copy p,
.layer-detail p,
.layer-detail p:last-child,
.loop-step p,
.people-placeholder-grid p,
.product-axis article p,
.product-axis article:nth-child(4) p {
  font-weight: 500;
  letter-spacing: 0;
  word-break: keep-all;
}

.about-section .principle-grid article p {
  font-size: clamp(0.86rem, 0.95vw, 0.98rem);
  line-height: 1.68;
}

.founder-copy {
  gap: 20px;
}

.founder-copy p {
  font-size: clamp(0.98rem, 1.16vw, 1.08rem);
  line-height: 1.84;
}

.founder-copy b {
  color: var(--ink);
  font-size: clamp(1rem, 1.18vw, 1.1rem);
  line-height: 1.78;
  font-weight: 660;
  letter-spacing: 0;
  word-break: keep-all;
}

.products-head p {
  font-weight: 620;
  line-height: 1.68;
}

.product-axis article {
  gap: 14px;
}

.product-axis article p {
  font-size: clamp(0.88rem, 0.98vw, 1rem);
  line-height: 1.7;
}

.product-axis b {
  font-size: clamp(0.72rem, 0.78vw, 0.82rem);
  line-height: 1.46;
  font-weight: 700;
  letter-spacing: 0;
}

.loop-step p {
  font-size: clamp(0.82rem, 0.92vw, 0.94rem);
  line-height: 1.64;
}

.layer-detail p,
.layer-detail p:last-child {
  font-weight: 520;
  line-height: 1.78;
}

.people-placeholder-grid p {
  font-size: clamp(0.9rem, 0.98vw, 1rem);
  line-height: 1.62;
}

.contact-section {
  align-items: center;
}

.contact-lockup p {
  max-width: 440px;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(1.04rem, 1.28vw, 1.24rem);
  line-height: 1.58;
  font-weight: 500;
  letter-spacing: 0;
}

.company-info div {
  grid-template-columns: clamp(152px, 14vw, 210px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(18px, 2.4vw, 34px);
  padding: 22px 0;
}

.company-info span {
  color: var(--semita);
  font-size: clamp(1rem, 1.08vw, 1.16rem);
  line-height: 1.25;
  font-weight: 900;
  text-transform: none;
}

.company-info b {
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(0.96rem, 1.02vw, 1.08rem);
  line-height: 1.48;
  font-weight: 540;
  letter-spacing: 0;
  word-break: keep-all;
}

@media (max-width: 720px) {
  .company-info div {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .contact-lockup p {
    font-size: 1rem;
  }
}

/* 260625 operating loop core wordmark */
.loop-core {
  gap: 0;
  overflow: hidden;
  padding: clamp(18px, 2vw, 26px);
}

.loop-core .loop-core-main,
.loop-core .loop-core-bridge,
.loop-core .loop-core-accent {
  display: block;
  max-width: none;
  margin: 0;
  color: var(--ink);
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
}

.loop-core .loop-core-main {
  font-family: Impact, Haettenschweiler, "Arial Black", "Apple SD Gothic Neo", sans-serif;
  font-size: clamp(1.72rem, 2.58vw, 2.62rem);
  line-height: 0.82;
  font-weight: 950;
  transform: rotate(-5.5deg) translateY(4px);
  text-shadow:
    5px 5px 0 rgba(215, 180, 74, 0.32),
    -3px 4px 0 rgba(127, 153, 144, 0.18);
}

.loop-core .loop-core-bridge {
  width: fit-content;
  justify-self: center;
  margin-top: clamp(2px, 0.45vw, 7px);
  padding: 3px 9px 4px;
  border: 2px solid rgba(15, 26, 46, 0.82);
  background: #fff;
  box-shadow: 4px 4px 0 rgba(15, 26, 46, 0.1);
  color: var(--ink);
  font-size: clamp(0.92rem, 1.24vw, 1.22rem);
  line-height: 0.9;
  font-weight: 950;
  transform: rotate(3.5deg) translateX(-2px);
}

.loop-core .loop-core-accent {
  width: fit-content;
  min-width: clamp(126px, 11.6vw, 154px);
  justify-self: center;
  margin-top: clamp(2px, 0.5vw, 8px);
  padding: 8px 16px 10px;
  border: 2px solid var(--ink);
  background: var(--semita);
  box-shadow:
    6px 7px 0 rgba(15, 26, 46, 0.14),
    -4px 4px 0 rgba(255, 255, 255, 0.62);
  font-family: Impact, Haettenschweiler, "Arial Black", "Apple SD Gothic Neo", sans-serif;
  font-size: clamp(1.64rem, 2.34vw, 2.34rem);
  line-height: 0.84;
  font-weight: 950;
  transform: rotate(2.8deg) translateX(5px) translateY(-1px);
}

@media (max-width: 720px) {
  .loop-core-main {
    font-size: clamp(1.35rem, 6.6vw, 1.8rem);
  }

  .loop-core-bridge {
    font-size: clamp(0.78rem, 4vw, 1rem);
  }

  .loop-core-accent {
    min-width: 98px;
    font-size: clamp(1.24rem, 5.8vw, 1.58rem);
  }
}

/* 260625 vision statement spacing */
.vision-section .manifesto-layout {
  min-height: clamp(590px, 54vw, 680px);
  padding-top: clamp(82px, 7vw, 104px);
  padding-bottom: clamp(80px, 6.5vw, 102px);
}

.vision-section .manifesto-layout h2 {
  line-height: 1.03;
}

.vision-statement span {
  line-height: 1;
}

.vision-statement span + span {
  margin-top: clamp(18px, 1.8vw, 32px);
}

.vision-section .manifesto-layout p:not(.quote-mark) {
  margin-top: clamp(44px, 4vw, 62px);
}

@media (max-width: 1020px) {
  .vision-section .manifesto-layout {
    min-height: 540px;
  }

  .vision-statement span + span {
    margin-top: clamp(10px, 1.8vw, 18px);
  }
}

@media (max-width: 720px) {
  .vision-section .manifesto-layout {
    min-height: 520px;
  }

  .vision-section .manifesto-layout h2 {
    line-height: 1.03;
  }

  .vision-statement span + span {
    margin-top: 12px;
  }
}

/* 260626 founder title lockup: keep the intended three-line phrase intact. */
@media (min-width: 901px) {
  .founder-layout {
    grid-template-columns: minmax(520px, 0.95fr) minmax(390px, 1fr);
  }

  .founder-title {
    width: min(100%, 590px);
    padding-inline: clamp(34px, 4.2vw, 60px);
  }

  .founder-title h2 {
    font-size: clamp(3.7rem, 4.85vw, 5.45rem);
    line-height: 0.92;
    text-wrap: unset;
    white-space: nowrap;
  }
}

/* 260626 menu taxonomy: About / Foundation / Solutions / Contact */
@media (min-width: 721px) {
  .site-nav {
    right: clamp(20px, 3vw, 54px);
    gap: 0;
  }

  .nav-group,
  .site-nav > .nav-root {
    margin-left: clamp(-18px, -1.15vw, -9px);
  }

  .nav-root {
    min-width: clamp(116px, 10vw, 164px);
    height: clamp(56px, 4.7vw, 70px);
    min-height: clamp(56px, 4.7vw, 70px);
    padding-inline: clamp(18px, 1.65vw, 28px);
    font-size: clamp(0.86rem, 0.88vw, 1.02rem);
  }

  .nav-group:nth-child(1) > .nav-root {
    transform: rotate(-3.8deg) translateY(6px);
  }

  .nav-group:nth-child(2) > .nav-root {
    background: rgba(15, 26, 46, 0.98);
    color: #fff;
    transform: rotate(1.8deg) translate(-8px, -4px);
  }

  .nav-group:nth-child(3) > .nav-root {
    transform: rotate(-1.5deg) translate(-15px, 6px);
  }

  .site-nav > .nav-root {
    transform: rotate(1.2deg) translate(-24px, -1px);
  }

  .nav-group:nth-child(2).is-active > .nav-root,
  .nav-group:nth-child(2):hover > .nav-root,
  .nav-group:nth-child(2):focus-within > .nav-root {
    color: var(--ink);
    background: var(--semita);
  }

  .nav-group:nth-child(3).is-active > .nav-root {
    color: var(--paper);
    background: var(--ink);
  }

  .nav-group:nth-child(2) .subnav {
    left: -10px;
    transform: translateY(-4px) rotate(1.3deg);
  }

  .nav-group:nth-child(2):hover .subnav,
  .nav-group:nth-child(2):focus-within .subnav,
  .nav-group:nth-child(2).is-open .subnav {
    transform: translateY(0) rotate(1.3deg);
  }

  .nav-group:nth-child(3) .subnav {
    left: -24px;
    transform: translateY(-4px) rotate(-1.5deg);
  }

  .nav-group:nth-child(3):hover .subnav,
  .nav-group:nth-child(3):focus-within .subnav,
  .nav-group:nth-child(3).is-open .subnav {
    transform: translateY(0) rotate(-1.5deg);
  }
}

.chapter-map {
  grid-template-columns: 1.25fr 0.9fr 1fr 0.72fr;
}

.chapter-map a:nth-child(4) {
  transform: rotate(0.8deg) translateY(8px);
}

@media (max-width: 1020px) {
  .chapter-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chapter-map a:nth-child(4) {
    transform: rotate(0.5deg);
  }
}

@media (max-width: 720px) {
  .site-header.is-menu-open::before {
    opacity: 0.98;
    background: rgba(15, 26, 46, 0.94);
    border-color: rgba(215, 180, 74, 0.55);
    box-shadow:
      10px 12px 0 rgba(15, 26, 46, 0.18),
      -6px 7px 0 rgba(215, 180, 74, 0.22);
  }

  .menu-toggle {
    z-index: 190;
  }

  .site-nav {
    z-index: 185;
    width: min(282px, calc(100vw - 56px));
    padding: 14px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    background:
      linear-gradient(120deg, rgba(215, 180, 74, 0.18) 0 34%, transparent 34% 100%),
      rgba(15, 26, 46, 0.96);
    box-shadow:
      12px 13px 0 rgba(15, 26, 46, 0.2),
      -7px 7px 0 rgba(215, 180, 74, 0.24);
  }

  .site-header.is-menu-open .site-nav {
    transform: translateY(0) rotate(-1.8deg);
  }

  .nav-group {
    width: 100%;
  }

  .nav-group:nth-child(3) > .nav-root {
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
    min-height: 46px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.98);
    transform: rotate(0deg);
  }

  .nav-root,
  .nav-group:nth-child(1) > .nav-root,
  .nav-group:nth-child(2) > .nav-root,
  .nav-group:nth-child(3) > .nav-root,
  .site-nav > .nav-root {
    min-height: 52px;
    border-width: 2px;
    font-size: 0.9rem;
    box-shadow: 5px 6px 0 rgba(0, 0, 0, 0.18);
  }

  .nav-group:nth-child(2) > .nav-root,
  .nav-group:nth-child(3).is-active > .nav-root {
    color: #fff;
    background: var(--ink);
  }

  .subnav {
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.98);
  }

  .subnav a {
    min-height: 40px;
    font-size: 0.76rem;
  }

  .chapter-map {
    grid-template-columns: 1fr;
  }

  .chapter-map a:nth-child(4) {
    transform: none;
  }
}

/* 260626 split brand cards: symbol + typographic lockup. */
.brand {
  top: clamp(18px, 2vw, 30px);
  left: clamp(24px, 4.7vw, 82px);
  display: grid;
  grid-template-columns: auto auto;
  align-items: start;
  gap: 0;
  width: clamp(260px, 21.5vw, 330px);
  min-height: clamp(78px, 6.4vw, 100px);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: rotate(-1.4deg);
}

.brand:hover {
  transform: translate(-3px, -4px) rotate(-2.7deg);
  box-shadow: none;
}

.brand-card {
  position: relative;
  display: grid;
  place-items: center;
  border: 2px solid var(--ink);
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.98) 0 74%, rgba(244, 239, 217, 0.9) 74% 100%);
  box-shadow:
    8px 9px 0 rgba(15, 26, 46, 0.14),
    -5px 5px 0 rgba(215, 180, 74, 0.28);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.brand-card::after {
  position: absolute;
  right: 10px;
  bottom: 8px;
  width: clamp(28px, 2.5vw, 42px);
  height: 4px;
  content: "";
  background: var(--semita);
  transform: rotate(-3deg);
}

.brand-symbol-card {
  z-index: 2;
  width: clamp(78px, 6.3vw, 100px);
  height: clamp(74px, 6vw, 96px);
  transform: rotate(-6deg) translate(0, 9px);
  background:
    linear-gradient(138deg, rgba(215, 180, 74, 0.2) 0 28%, transparent 28% 100%),
    #fff;
}

.brand-wordmark-card {
  z-index: 1;
  width: clamp(196px, 16.4vw, 250px);
  height: clamp(58px, 4.75vw, 72px);
  margin-top: clamp(8px, 0.82vw, 13px);
  margin-left: clamp(-18px, -1.35vw, -12px);
  transform: rotate(1.4deg);
}

.brand:hover .brand-symbol-card {
  box-shadow:
    11px 12px 0 rgba(15, 26, 46, 0.17),
    -7px 7px 0 rgba(215, 180, 74, 0.34);
  transform: rotate(-9deg) translate(-2px, 6px);
}

.brand:hover .brand-wordmark-card {
  box-shadow:
    11px 12px 0 rgba(15, 26, 46, 0.17),
    -7px 7px 0 rgba(215, 180, 74, 0.34);
  transform: rotate(2.7deg) translate(2px, -2px);
}

.brand .brand-symbol,
.brand img:first-child.brand-symbol {
  width: clamp(48px, 4.15vw, 66px);
  height: auto;
}

.brand .brand-wordmark-card > .brand-type {
  width: clamp(148px, 12.9vw, 198px);
  height: auto;
}

@media (max-width: 1020px) {
  .brand {
    top: 16px;
    left: 18px;
    width: clamp(230px, 29vw, 286px);
  }

  .brand-symbol-card {
    width: clamp(66px, 7.5vw, 82px);
    height: clamp(62px, 7.2vw, 78px);
  }

  .brand-wordmark-card {
    width: clamp(174px, 20vw, 218px);
    height: clamp(52px, 5.8vw, 64px);
  }

  .brand .brand-symbol,
  .brand img:first-child.brand-symbol {
    width: clamp(42px, 4.8vw, 54px);
  }

  .brand .brand-wordmark-card > .brand-type {
    width: clamp(132px, 15.2vw, 166px);
  }
}

@media (max-width: 720px) {
  .brand {
    top: 16px;
    left: 14px;
    width: min(58vw, 244px);
    min-height: 72px;
    transform: rotate(-1.2deg);
  }

  .brand-symbol-card {
    width: clamp(54px, 14vw, 62px);
    height: clamp(52px, 13.6vw, 60px);
    transform: rotate(-6deg) translate(0, 7px);
  }

  .brand-wordmark-card {
    width: clamp(150px, 41vw, 176px);
    height: clamp(46px, 12vw, 52px);
    margin-top: 7px;
    margin-left: -10px;
  }

  .brand .brand-symbol,
  .brand img:first-child.brand-symbol {
    width: clamp(34px, 9vw, 40px);
  }

  .brand .brand-wordmark-card > .brand-type {
    width: clamp(114px, 31vw, 134px);
  }
}

/* 260626 Foundation chapter continuity pass. */
.founder-section,
.people-section {
  background:
    linear-gradient(97deg, rgba(15, 26, 46, 0.9) 0 29.6%, transparent 29.8% 100%),
    linear-gradient(166deg, transparent 0 18%, rgba(127, 153, 144, 0.18) 18% 47%, transparent 47% 100%),
    linear-gradient(24deg, transparent 0 47%, rgba(215, 180, 74, 0.19) 47% 61%, transparent 61% 100%),
    linear-gradient(154deg, transparent 0 66%, rgba(127, 153, 144, 0.2) 66% 92%, transparent 92% 100%),
    repeating-linear-gradient(90deg, rgba(15, 26, 46, 0.048) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg, rgba(15, 26, 46, 0.036) 0 1px, transparent 1px 56px),
    #edf3f1;
  background-attachment: scroll;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(15, 26, 46, 0.05);
}

.founder-section {
  z-index: 2;
  padding-bottom: clamp(96px, 11vw, 156px);
}

.people-section {
  z-index: 2;
  margin-top: -2px;
  padding-top: clamp(84px, 10vw, 148px);
  background-position:
    0 -2px,
    0 -220px,
    0 -220px,
    0 -220px,
    0 -2px,
    0 -2px,
    0 0;
}

.founder-section::before,
.page-panel-people::before {
  top: clamp(58px, 6.2vw, 94px);
  right: max(-120px, -8vw);
  left: auto;
  width: min(74vw, 1040px);
  height: clamp(250px, 33vw, 430px);
  background:
    linear-gradient(112deg, rgba(127, 153, 144, 0.24) 0 36%, rgba(255, 255, 255, 0.3) 36% 58%, rgba(215, 180, 74, 0.2) 58% 100%);
  clip-path: polygon(8% 0, 100% 7%, 91% 100%, 0 84%);
  opacity: 0.72;
  --boundary-tilt: -1deg;
}

.page-panel-people::before {
  top: clamp(74px, 8vw, 120px);
  right: max(-140px, -10vw);
  width: min(82vw, 1120px);
  height: clamp(270px, 35vw, 470px);
  background:
    linear-gradient(113deg, rgba(215, 180, 74, 0.2) 0 24%, rgba(127, 153, 144, 0.23) 24% 56%, rgba(255, 255, 255, 0.28) 56% 100%);
  clip-path: polygon(10% 0, 100% 11%, 93% 100%, 0 78%);
}

.founder-section .section-kicker,
.people-title .section-kicker {
  color: var(--semita);
}

.people-title {
  color: var(--paper);
}

@media (min-width: 901px) {
  .founder-layout,
  .people-layout {
    position: relative;
    z-index: 2;
  }

  .people-title {
    width: min(100%, 420px);
  }

  .people-title h2 {
    max-width: 4.4ch;
    word-break: normal;
    overflow-wrap: normal;
  }
}

@media (max-width: 900px) {
  .founder-section,
  .people-section {
    background:
      linear-gradient(100deg, rgba(15, 26, 46, 0.86) 0 24%, transparent 24.2% 100%),
      linear-gradient(164deg, transparent 0 18%, rgba(127, 153, 144, 0.18) 18% 47%, transparent 47% 100%),
      linear-gradient(24deg, transparent 0 47%, rgba(215, 180, 74, 0.2) 47% 61%, transparent 61% 100%),
      repeating-linear-gradient(90deg, rgba(15, 26, 46, 0.048) 0 1px, transparent 1px 44px),
      repeating-linear-gradient(0deg, rgba(15, 26, 46, 0.036) 0 1px, transparent 1px 44px),
      #edf3f1;
  }

  .people-title {
    color: var(--ink);
  }
}

/* 260626 section seam softener: keep structure, remove hard page cuts. */
.page-panel {
  border-top: 1px solid rgba(15, 26, 46, 0.11);
  border-bottom: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(15, 26, 46, 0.035);
}

.page-panel + .page-panel {
  margin-top: -1px;
}

.founder-section + .people-section {
  border-top-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(15, 26, 46, 0.035);
}

/* 260626 Foundation background unification: remove the split navy slabs. */
.founder-section,
.people-section {
  background:
    linear-gradient(166deg, transparent 0 16%, rgba(127, 153, 144, 0.2) 16% 48%, transparent 48% 100%),
    linear-gradient(24deg, transparent 0 45%, rgba(215, 180, 74, 0.18) 45% 60%, transparent 60% 100%),
    linear-gradient(154deg, transparent 0 66%, rgba(127, 153, 144, 0.17) 66% 92%, transparent 92% 100%),
    repeating-linear-gradient(90deg, rgba(15, 26, 46, 0.048) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg, rgba(15, 26, 46, 0.036) 0 1px, transparent 1px 56px),
    #edf3f1;
}

.people-section {
  background-position:
    0 -180px,
    0 -180px,
    0 -180px,
    0 -1px,
    0 -1px,
    0 0;
}

.founder-section::before,
.page-panel-people::before {
  left: max(-110px, -8vw);
  right: auto;
  width: min(82vw, 1120px);
  background:
    linear-gradient(104deg, rgba(215, 180, 74, 0.22) 0 24%, rgba(255, 255, 255, 0.34) 24% 58%, rgba(127, 153, 144, 0.18) 58% 100%);
  clip-path: polygon(0 0, 100% 7%, 90% 100%, 0 82%);
  opacity: 0.62;
}

.page-panel-people::before {
  top: clamp(48px, 6vw, 92px);
  left: max(-140px, -10vw);
  width: min(90vw, 1220px);
  background:
    linear-gradient(108deg, rgba(127, 153, 144, 0.2) 0 32%, rgba(215, 180, 74, 0.18) 32% 48%, rgba(255, 255, 255, 0.3) 48% 100%);
}

.people-title {
  color: var(--ink);
}

.people-title h2 {
  max-width: none;
  font-size: clamp(4.2rem, 7.2vw, 8.2rem);
  white-space: nowrap;
}

.people-title p {
  margin-top: 18px;
}

.founder-section + .people-section {
  border-top-color: transparent;
  box-shadow: none;
}

.page-panel {
  border-top-color: rgba(15, 26, 46, 0.065);
}

/* 260626 site-wide background motion: carry the hero's living field into every chapter. */
.page-panel {
  animation: susemiesPanelFieldDrift 28s ease-in-out infinite;
}

.founder-section {
  animation: susemiesPanelFieldDrift 30s ease-in-out infinite;
}

.people-section {
  animation: susemiesPeopleFieldDrift 30s ease-in-out infinite;
}

.page-panel::before {
  will-change: translate, opacity;
  animation: susemiesPanelShapeFloat 17s ease-in-out infinite;
}

.page-panel::after {
  will-change: translate, opacity;
  animation: susemiesPanelWordFloat 22s ease-in-out infinite;
}

.page-panel:nth-of-type(2n)::before {
  animation-delay: -5s;
}

.page-panel:nth-of-type(3n)::before {
  animation-delay: -9s;
}

.page-panel:nth-of-type(2n)::after {
  animation-delay: -7s;
}

.page-panel:nth-of-type(3n)::after {
  animation-delay: -13s;
}

.page-panel-people::after {
  animation-delay: -10s;
}

.contact-section {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(110deg, rgba(215, 180, 74, 0.16) 0 17%, transparent 17% 100%),
    linear-gradient(24deg, transparent 0 58%, rgba(127, 153, 144, 0.16) 58% 86%, transparent 86% 100%),
    repeating-linear-gradient(90deg, rgba(246, 248, 250, 0.055) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg, rgba(246, 248, 250, 0.034) 0 1px, transparent 1px 56px),
    #0f1a2e;
  animation: susemiesContactFieldDrift 26s ease-in-out infinite;
}

.contact-section::before {
  position: absolute;
  top: clamp(26px, 6vw, 96px);
  left: max(-90px, -8vw);
  z-index: 0;
  width: min(78vw, 1060px);
  height: clamp(210px, 30vw, 420px);
  content: "";
  background:
    linear-gradient(104deg, rgba(215, 180, 74, 0.2) 0 24%, rgba(255, 255, 255, 0.08) 24% 56%, rgba(127, 153, 144, 0.16) 56% 100%);
  clip-path: polygon(0 0, 100% 8%, 91% 100%, 0 80%);
  opacity: 0.54;
  pointer-events: none;
  mix-blend-mode: screen;
  animation: susemiesPanelShapeFloat 18s ease-in-out -4s infinite;
}

.contact-section::after {
  position: absolute;
  right: -0.04em;
  bottom: -0.16em;
  z-index: 0;
  content: "CONTACT";
  color: rgba(255, 255, 255, 0.045);
  font-size: clamp(6rem, 15vw, 15rem);
  line-height: 0.8;
  font-weight: 950;
  letter-spacing: 0;
  pointer-events: none;
  animation: susemiesPanelWordFloat 23s ease-in-out -8s infinite;
}

.contact-section > * {
  position: relative;
  z-index: 1;
}

@keyframes susemiesPanelFieldDrift {
  0%,
  100% {
    background-position:
      0 0,
      0 0,
      0 0,
      0 0,
      0 0,
      0 0;
  }
  45% {
    background-position:
      34px -22px,
      -42px 28px,
      24px 34px,
      7px 0,
      0 7px,
      0 0;
  }
  72% {
    background-position:
      -18px 18px,
      28px -16px,
      -32px 10px,
      -5px 0,
      0 -5px,
      0 0;
  }
}

@keyframes susemiesPeopleFieldDrift {
  0%,
  100% {
    background-position:
      0 -180px,
      0 -180px,
      0 -180px,
      0 -1px,
      0 -1px,
      0 0;
  }
  45% {
    background-position:
      34px -202px,
      -42px -152px,
      24px -146px,
      7px -1px,
      0 6px,
      0 0;
  }
  72% {
    background-position:
      -18px -162px,
      28px -196px,
      -32px -170px,
      -5px -1px,
      0 -6px,
      0 0;
  }
}

@keyframes susemiesContactFieldDrift {
  0%,
  100% {
    background-position:
      0 0,
      0 0,
      0 0,
      0 0,
      0 0;
  }
  50% {
    background-position:
      36px -24px,
      -32px 28px,
      8px 0,
      0 8px,
      0 0;
  }
}

@keyframes susemiesPanelShapeFloat {
  0%,
  100% {
    opacity: 0.62;
    translate: 0 0;
  }
  48% {
    opacity: 0.82;
    translate: 30px -18px;
  }
  72% {
    opacity: 0.7;
    translate: -18px 12px;
  }
}

@keyframes susemiesPanelWordFloat {
  0%,
  100% {
    opacity: 1;
    translate: 0 0;
  }
  45% {
    opacity: 0.72;
    translate: -42px -26px;
  }
  76% {
    opacity: 0.9;
    translate: 24px -8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-panel,
  .founder-section,
  .people-section,
  .contact-section,
  .page-panel::before,
  .page-panel::after,
  .contact-section::before,
  .contact-section::after {
    animation: none !important;
  }
}

/* 260626 site-wide depth typography and moving grid. */
.section-depth-field {
  position: absolute !important;
  inset: 0;
  z-index: 0 !important;
  overflow: hidden;
  pointer-events: none;
  contain: paint;
}

.section-depth-field::before {
  position: absolute;
  inset: -14%;
  content: "";
  background:
    linear-gradient(112deg, transparent 0 27%, rgba(255, 255, 255, 0.26) 27% 38%, transparent 38% 100%),
    linear-gradient(68deg, transparent 0 62%, rgba(127, 153, 144, 0.12) 62% 76%, transparent 76% 100%);
  background-position:
    0 0,
    0 0;
  opacity: 0.46;
  mix-blend-mode: multiply;
  transform: rotate(-0.35deg);
  animation: susemiesSectionVeilTravel 18s ease-in-out infinite;
}

.section-depth-field span {
  position: absolute;
  display: block;
  color: rgba(15, 26, 46, 0.075);
  font-weight: 950;
  line-height: 0.82;
  letter-spacing: 0;
  white-space: nowrap;
  text-transform: uppercase;
  mix-blend-mode: multiply;
  text-shadow:
    1px 1px 0 rgba(255, 255, 255, 0.22),
    10px 12px 0 rgba(15, 26, 46, 0.035);
  will-change: translate, scale, opacity;
  animation: susemiesDepthTypeA 15.5s ease-in-out infinite;
}

.section-depth-field span:nth-child(1) {
  top: 6%;
  left: -8%;
  color: rgba(15, 26, 46, 0.062);
  font-size: clamp(4.8rem, 14.5vw, 15rem);
  transform: rotate(-7deg);
}

.section-depth-field span:nth-child(2) {
  top: 30%;
  right: -10%;
  color: rgba(215, 180, 74, 0.125);
  font-size: clamp(3.4rem, 10.5vw, 11.8rem);
  transform: rotate(8deg);
  animation-name: susemiesDepthTypeB;
  animation-delay: -5s;
}

.section-depth-field span:nth-child(3) {
  top: 58%;
  left: 10%;
  color: rgba(127, 153, 144, 0.14);
  font-size: clamp(2.6rem, 7.6vw, 8.8rem);
  transform: rotate(-13deg);
  animation-name: susemiesDepthTypeC;
  animation-delay: -8s;
}

.section-depth-field span:nth-child(4) {
  top: 18%;
  left: 54%;
  color: rgba(15, 26, 46, 0.062);
  font-size: clamp(1.8rem, 5.2vw, 6rem);
  transform: rotate(13deg);
  animation-name: susemiesDepthTypeB;
  animation-delay: -2s;
}

.section-depth-field span:nth-child(5) {
  right: -6%;
  bottom: 5%;
  color: rgba(215, 180, 74, 0.105);
  font-size: clamp(2rem, 6vw, 7rem);
  transform: rotate(-5deg);
  animation-name: susemiesDepthTypeA;
  animation-delay: -11s;
}

.page-panel-b .section-depth-field span:nth-child(1),
.page-panel-people .section-depth-field span:nth-child(1) {
  left: -6%;
  color: rgba(15, 26, 46, 0.052);
}

.page-panel-c .section-depth-field span:nth-child(2),
.page-panel-f .section-depth-field span:nth-child(2) {
  color: rgba(127, 153, 144, 0.14);
}

.page-panel-d .section-depth-field span:nth-child(3),
.page-panel-e .section-depth-field span:nth-child(3) {
  color: rgba(215, 180, 74, 0.13);
}

.contact-section .section-depth-field::before {
  background:
    linear-gradient(112deg, transparent 0 27%, rgba(255, 255, 255, 0.09) 27% 38%, transparent 38% 100%),
    linear-gradient(68deg, transparent 0 62%, rgba(127, 153, 144, 0.1) 62% 76%, transparent 76% 100%);
  opacity: 0.5;
  mix-blend-mode: screen;
}

.contact-section .section-depth-field span {
  color: rgba(255, 255, 255, 0.06);
  mix-blend-mode: screen;
  text-shadow:
    1px 1px 0 rgba(215, 180, 74, 0.08),
    10px 12px 0 rgba(0, 0, 0, 0.12);
}

.contact-section .section-depth-field span:nth-child(2),
.contact-section .section-depth-field span:nth-child(5) {
  color: rgba(215, 180, 74, 0.11);
}

@keyframes susemiesSectionGridTravel {
  0% {
    background-position:
      0 0,
      0 0;
  }
  100% {
    background-position:
      56px 0,
      0 56px;
  }
}

@keyframes susemiesSectionVeilTravel {
  0%,
  100% {
    background-position:
      0 0,
      0 0;
    translate: 0 0;
  }
  48% {
    background-position:
      58px -28px,
      -42px 34px;
    translate: 20px -14px;
  }
  74% {
    background-position:
      -22px 18px,
      30px -20px;
    translate: -14px 10px;
  }
}

@keyframes susemiesDepthTypeA {
  0%,
  100% {
    opacity: 0.72;
    translate: 0 0;
    scale: 1;
  }
  50% {
    opacity: 0.98;
    translate: 58px -34px;
    scale: 1.055;
  }
}

@keyframes susemiesDepthTypeB {
  0%,
  100% {
    opacity: 0.58;
    translate: 0 0;
    scale: 1;
  }
  50% {
    opacity: 0.94;
    translate: -66px 38px;
    scale: 1.075;
  }
}

@keyframes susemiesDepthTypeC {
  0%,
  100% {
    opacity: 0.64;
    translate: 0 0;
    scale: 1;
  }
  50% {
    opacity: 0.92;
    translate: 34px 56px;
    scale: 0.965;
  }
}

@media (max-width: 720px) {
  .section-depth-field span:nth-child(n + 4) {
    display: none;
  }

  .section-depth-field span:nth-child(1) {
    font-size: clamp(4.6rem, 28vw, 9rem);
  }

  .section-depth-field span:nth-child(2) {
    font-size: clamp(3.2rem, 20vw, 6.4rem);
  }

  .section-depth-field::before {
    animation-duration: 20s;
  }
}

/* 260626 grid cleanup: use each section's original grid, with a little more motion. */
.page-panel {
  animation-name: susemiesPanelFieldDrift5;
  animation-duration: 23s;
}

.page-panel-a,
.founder-section {
  animation-name: susemiesPanelFieldDrift6;
  animation-duration: 24s;
}

.people-section {
  animation-name: susemiesPeopleFieldDrift6;
  animation-duration: 24s;
}

.contact-section {
  animation-name: susemiesContactFieldDrift5;
  animation-duration: 22s;
}

.page-panel::before {
  animation-duration: 14.5s;
}

.page-panel::after {
  animation-duration: 18s;
}

.section-depth-field span:nth-child(1) {
  animation-duration: 15.5s;
}

.section-depth-field span:nth-child(2) {
  animation-duration: 14.5s;
}

.section-depth-field span:nth-child(3) {
  animation-duration: 17s;
}

.section-depth-field span:nth-child(4),
.section-depth-field span:nth-child(5) {
  animation-duration: 16s;
}

@keyframes susemiesPanelFieldDrift5 {
  0%,
  100% {
    background-position:
      0 0,
      0 0,
      0 0,
      0 0,
      0 0;
  }
  44% {
    background-position:
      42px -28px,
      -52px 34px,
      20px 0,
      0 20px,
      0 0;
  }
  74% {
    background-position:
      -22px 20px,
      34px -18px,
      -14px 0,
      0 -14px,
      0 0;
  }
}

@keyframes susemiesPanelFieldDrift6 {
  0%,
  100% {
    background-position:
      0 0,
      0 0,
      0 0,
      0 0,
      0 0,
      0 0;
  }
  44% {
    background-position:
      42px -28px,
      -52px 34px,
      28px 22px,
      20px 0,
      0 20px,
      0 0;
  }
  74% {
    background-position:
      -22px 20px,
      34px -18px,
      -30px 12px,
      -14px 0,
      0 -14px,
      0 0;
  }
}

@keyframes susemiesPeopleFieldDrift6 {
  0%,
  100% {
    background-position:
      0 -180px,
      0 -180px,
      0 -180px,
      0 -1px,
      0 -1px,
      0 0;
  }
  44% {
    background-position:
      42px -208px,
      -52px -146px,
      28px -158px,
      20px -1px,
      0 19px,
      0 0;
  }
  74% {
    background-position:
      -22px -160px,
      34px -198px,
      -30px -168px,
      -14px -1px,
      0 -15px,
      0 0;
  }
}

@keyframes susemiesContactFieldDrift5 {
  0%,
  100% {
    background-position:
      0 0,
      0 0,
      0 0,
      0 0,
      0 0;
  }
  48% {
    background-position:
      42px -28px,
      -38px 34px,
      20px 0,
      0 20px,
      0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-depth-field,
  .section-depth-field::before,
  .section-depth-field span {
    animation: none !important;
  }
}