* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
main {
  overflow: clip;
}
.chapter {
  position: relative;
  min-height: 100svh;
  height: auto;
  padding: clamp(28px, 4svh, 44px) 6vw clamp(76px, 9svh, 96px);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2svh, 20px);
}
.chapter > * {
  min-width: 0;
}
.chapter > .index {
  margin: 0;
}
.stage {
  height: clamp(240px, 36svh, 480px);
  min-height: 220px;
  width: 100%;
  position: relative;
}
.hero {
  padding-top: clamp(96px, 12svh, 128px);
}
.hero .stage {
  position: relative;
  inset: auto;
  height: clamp(240px, calc(100svh - 490px), 700px);
  flex: 1 0 auto;
}
.hero-copy {
  position: relative;
  z-index: 2;
  pointer-events: none;
}
.hero-bottom {
  position: relative;
  z-index: 2;
  margin-top: 0;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
}
.hero-bottom p {
  max-width: 360px;
}
.section-top {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  align-items: start;
}
.section-top h2 {
  max-width: 780px;
}
.lead {
  max-width: 440px;
}
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.water > .split,.close > .split {
  flex: 1;
}
.split .stage {
  height: clamp(260px, 50svh, 600px);
}
.close .stage {
  height: clamp(240px, 40svh, 460px);
}
.bridge > .stage {
  flex: 1 0 auto;
}
.connect > .stage {
  height: clamp(180px, 25svh, 340px);
  min-height: 180px;
  flex: 1 0 auto;
}
.service-lines {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
footer {
  padding: 32px 6vw 76px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
}
.small {
  max-width: 560px;
}
.hero .bigword {
  font-size: clamp(70px, 14vw, 210px);
  bottom: 16px;
}
@media (max-width: 900px) {
.chapter {
  padding: 32px 24px 80px;
  gap: 18px;
}
}
@media (max-width: 900px) {
.hero {
  padding-top: 88px;
  gap: 12px;
}
}
@media (max-width: 900px) {
.hero .stage {
  height: clamp(220px, calc(100svh - 584px), 600px);
  min-height: 220px;
}
}
@media (max-width: 900px) {
.hero-bottom {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
}
@media (max-width: 900px) {
.hero-bottom p {
  margin: 0;
  max-width: none;
}
}
@media (max-width: 900px) {
.section-top,.split,.service-lines {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
}
@media (max-width: 900px) {
.lead {
  max-width: none;
  margin-top: 0;
}
}
@media (max-width: 900px) {
.stage,.split .stage,.close .stage {
  height: clamp(220px, 34svh, 400px);
}
}
@media (max-width: 900px) {
.connect > .stage {
  height: clamp(200px, 28svh, 340px);
}
}
@media (max-width: 900px) {
.service-lines article {
  margin-top: 0;
}
}
@media (max-width: 900px) {
.caption {
  gap: 16px;
  flex-wrap: wrap;
}
}
@media (max-width: 900px) {
footer {
  display: block;
}
}
@media (max-width: 900px) {
footer p {
  margin: 16px 0;
}
}
body {
  background: #edaa91;
  color: #392b27;
}
.bridge {
  background: #e9e7dc;
}
.water {
  background: #c9d9df;
}
.connect {
  background: #733e31;
  color: #fff4e8;
}
.close {
  background: #edaa91;
}
footer {
  background: #392b27;
  color: #f7e9df;
}
.eyebrow {
  border-top: 1px solid currentColor;
  padding-top: 12px;
}
body {
  font-family: Plex, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  word-break: keep-all;
}
h1,h2,h3,p {
  margin: 0;
}
h1 {
  font-family: Archivo,Plex,sans-serif;
  font-weight: 800;
  font-size: clamp(64px, 8vw, 116px);
  line-height: .96;
  letter-spacing: -.04em;
  text-align: center;
}
h2 {
  font-size: clamp(32px, 3.4vw, 52px);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -.035em;
}
h3 {
  font-size: 22px;
  line-height: 1.3;
  font-weight: 400;
  margin-bottom: 10px;
}
.eyebrow,.index {
  font-family: Archivo,Plex,sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
}
.muted,.small {
  font-size: 13px;
}
.ko-title {
  font-family: Plex,sans-serif;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.3;
  text-align: center;
  margin-top: 8px;
}
.lead p {
  margin-top: 16px;
}
.service-lines p {
  font-size: 15px;
}
.bigword {
  font-family: Archivo,sans-serif;
  font-size: clamp(80px,18vw,270px);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.06em;
  opacity: .13;
  position: absolute;
  bottom: 35px;
  left: 3vw;
  pointer-events: none;
}
@media (max-width: 900px) {
h1 {
  font-size: clamp(48px, 12.8vw, 92px);
}
}
.chapter canvas {
  display: block;
}
.caption {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  border-bottom: 1px solid currentColor;
  padding-bottom: 16px;
}
.index {
  margin-bottom: 32px;
}
.pin {
  display: inline-block;
  width: 9px;
  height: 9px;
  background: #a63b1e;
  border-radius: 50%;
  margin-right: 10px;
}
.service-lines article {
  border-top: 1px solid #adaea4;
  padding-top: 16px;
}
header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 6vw;
}
.logo {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.03em;
}
nav {
  display: flex;
  gap: 24px;
  align-items: center;
}
a {
  color: inherit;
  text-decoration: none;
}
button,.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 14px 24px;
  border: 1px solid currentColor;
  font: inherit;
  cursor: pointer;
}
input,select,textarea {
  font: inherit;
  width: 100%;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid currentColor;
}
label {
  display: block;
  margin-top: 24px;
}
form button {
  width: 100%;
  margin-top: 28px;
}
details {
  padding: 8px 0;
  border-bottom: 1px solid #b38d7b;
}
summary {
  cursor: pointer;
  list-style: none;
  padding: 8px 0;
}
details p {
  padding: 16px 0;
}
.faq {
  margin-top: 0;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}
.result {
  white-space: pre-wrap;
  margin-top: 24px;
  padding: 24px;
  border: 1px solid currentColor;
  overflow-wrap: anywhere;
}
#motion {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 12;
  padding: 8px 14px;
  font-size: 12px;
}
@media (max-width: 900px) {
nav a:not(.button) {
  display: none;
}
}
@media (max-width: 900px) {
.faq {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
}
.design-controls {
  gap: 16px;
}
.design-controls button {
  width: 100%;
  min-width: 0;
  min-height: 56px;
  padding: 12px 20px;
  gap: 12px;
  background: transparent;
  color: #392b27;
}
.design-controls button[aria-pressed="true"] {
  background: #392b27;
  color: #fff4e8;
}
.design-controls button:hover {
  background: #8f3e28;
  color: #fff;
}
.design-controls .index {
  margin: 0;
  font-size: 11px;
}
.service-entry {
  border-top: 1px solid currentColor;
  padding-top: 14px;
  margin-top: 20px;
}
.service-entry .index {
  display: block;
  margin: 0 0 6px;
}
.service-entry h3 {
  font-size: 22px;
  margin: 0;
}
.service-entry p {
  font-size: 15px;
  margin: 6px 0 0;
}
.service-entry .button {
  margin-top: 12px;
  padding: 8px 20px;
  min-height: 44px;
}
.service-entry button:disabled {
  opacity: .65;
}
.start-action > .button {
  margin-top: 24px;
}
.start-action .small {
  margin-top: 16px;
}
@media (max-width: 900px) {
.design-controls {
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 8px;
}
}
@media (max-width: 900px) {
.design-controls .index {
  display: none;
}
}
@media (max-width: 900px) {
.design-controls button {
  padding: 10px;
  gap: 6px;
  font-size: 15px;
  min-height: 48px;
}
}
button,.button {
  border-radius: 100px;
}
input,select,textarea {
  border-radius: 0;
}
button,.button {
  background: #392b27;
  color: #fff4e8;
}
input,select,textarea {
  background: transparent;
  color: inherit;
}
button.secondary {
  background: transparent;
  color: inherit;
}
button:hover,.button:hover {
  background: #8f3e28;
  color: #fff;
}
button:active,.button:active {
  transform: scale(.97);
}
:focus-visible {
  outline: 3px solid #214fac;
  outline-offset: 5px;
}
button:disabled {
  opacity: .45;
  cursor: not-allowed;
}
input[type=range]:active {
  filter: saturate(2);
}
nav a:hover {
  text-decoration: underline;
}
button,.button {
  transition: background 180ms cubic-bezier(.2,.7,.2,1), transform 220ms cubic-bezier(.2,.8,.2,1);
}
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
*,*::before,*::after {
  scroll-behavior: auto !important;
  transition: none !important;
}
}
summary::after {
  content: "+";
  float: right;
}
details[open] summary::after {
  content: "−";
}
input[type=range] {
  accent-color: #9b3e24;
}
button,.button,nav a,summary,select,input {
  min-height: 44px;
}