.home {
  --mow-a: var(--page-ground);
  --mow-b: #112818;
  --mow-h: 128px;
  --chalk-line: color-mix(in oklab, var(--cream), transparent 87%);
  --panel-r: clamp(18px, 2vw, 30px);
  --fg: clamp(12px, 2.8vw, 48px);
  --gap: clamp(28px, 4.4vw, 72px);

  --r: clamp(96px, 11vw, 160px);
}

html { background: var(--mow-a); scrollbar-color: var(--pale) var(--mow-a); }

body.home {
  background-color: var(--mow-a);

  background-image: none;
  color: var(--cream);
}

.home .hs,
.home .hs--pale,
.home .hs--deep,
.home .sec--deep { background: transparent; }

.home .hs { padding-block: calc(var(--gap) / 2); }
.home .hs.hero { padding-top: 0; }
.home .hatch { display: none; }
.home .hs__in { position: relative; z-index: 1; border-inline: 0; }

.home .hero__in {
  background: transparent;
  box-shadow: none;
  clip-path: none;
}

.home .how > .hs__in:not(.hatch),
.home .what > .hs__in:not(.hatch),
.home .cost > .hs__in:not(.hatch) {
  background: var(--cream);
  border-radius: var(--panel-r);
  overflow: clip;
  --ink: var(--deep);
  --ink-2: var(--moss);
  --rule: var(--rule-light);
  --focus: var(--deep);
}
.home .what > .hs__in:not(.hatch) { background: var(--pale); }

.home .tac > .hs__in { --rule: color-mix(in oklab, var(--cream), transparent 80%); }

.home .shead {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 40px;
  padding: clamp(36px, 4.6vw, 68px) var(--pad) clamp(26px, 2.8vw, 40px);
  text-align: left;
}
.home .shead__title { max-width: 19em; }
.home .shead .tlink { flex: none; }
.home .tac .shead { padding-top: calc(var(--r) + clamp(24px, 3vw, 44px) - var(--gap) / 2); }

.home .what { position: relative; }
.home .what::before,
.home .what::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.home .what::after {
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--chalk-line);
}
.home .what::before {
  left: 50%;
  bottom: 0;
  width: calc(2 * var(--r));
  height: calc(2 * var(--r));
  border: 2px solid var(--chalk-line);
  border-radius: 50%;
  transform: translate(-50%, 50%);
  background: radial-gradient(circle, var(--chalk-line) 0 5px, transparent 5.5px);
}

.home .tac { position: relative; z-index: 0; }

.home .closing { padding-block: calc(var(--gap) / 2) 0; }
.home .closing .sec__in { border-inline: 0; }

.home .foot {
  position: relative;
  background: transparent;
  border-top: 0;
}
.home .foot::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--fg);
  right: var(--fg);
  height: 2px;
  background: var(--chalk-line);
}
.home .foot__in { border-inline: 0; padding-block: 26px; }

@media (max-width: 899.98px) {
  .home .shead { flex-direction: column; align-items: flex-start; }
  .home { --r: min(30vw, 120px); }
}

@media (max-width: 600px) {
  .home { --mow-h: 96px; --panel-r: 16px; }
}