/* Home page only (loaded by index.html after style.css). The 2026-11-03
   maturity pass: a company page, not a project showcase. Patterns from
   docs/redesign/abatable-vexil-maturity-audit.md, in Vexil's own tokens:
   cream, ink, one orange. style.css is not edited, so about.html is untouched.
   Motion lives in js/home.js; without it every element sits in its final state. */

body.home {
  --sec-pad: clamp(80px, 12vw, 160px);
  --mark: var(--signal-bright);
}

/* ---------- the living survey map (js/topo.js): fixed behind every section ---------- */
.home .topo {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---------- eyebrow: Michroma caps, the orange voice ----------
   Text-safe orange (--signal) so 12px caps pass contrast on cream. */
.home .eyebrow {
  font-family: "Michroma", sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
}

/* ---------- drafting marks: hairline frame + orange "+" at the corners ---------- */
.home .marks { position: relative; }
.home .mark-plus {
  position: absolute;
  z-index: 3;
  width: 15px; height: 15px;
  pointer-events: none;
}
.home .mark-plus::before, .home .mark-plus::after {
  content: "";
  position: absolute;
  background: var(--mark);
}
.home .mark-plus::before { left: 7px; top: 0; width: 1px; height: 15px; }
.home .mark-plus::after { top: 7px; left: 0; height: 1px; width: 15px; }
.home .mark-plus.tl { top: -8px; left: -8px; }
.home .mark-plus.tr { top: -8px; right: -8px; }
.home .mark-plus.bl { bottom: -8px; left: -8px; }
.home .mark-plus.br { bottom: -8px; right: -8px; }

/* ---------- nav: the live site's header, as close as it can be ----------
   Ryan, 2026-11-03: "the header the same as the live website". style.css
   carries the clean build's smaller nav (shared with About); these rules put
   the live values back on the home page only: frosted 70% cream bar, 17px
   links with the grey hover/scrollspy bubble, the 11px-corner orange
   "Get In Touch". No hide-on-scroll, as on live. */
.home .nav {
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
}
@media (min-width: 1081px) {
  .home .nav-links a { font-size: 1.08rem; font-weight: 560; padding: 10px 18px; line-height: 1.6; }
  .home .nav-bubble { display: block; }
  .home .nav-cta {
    font-size: 1.08rem;
    font-weight: 620;
    padding: 10px 22px;
    border-radius: var(--r-cta);
    line-height: 1.6;
  }
}
.home .nav-wordmark { font-weight: 400; line-height: 1.6; }

/* ---------- buttons ---------- */
.home .btn-solid, .home .btn-line {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.18s ease;
}
.home .btn-solid { background: var(--signal-bright); color: var(--cta-ink); }
.home .btn-solid:hover { background: color-mix(in srgb, var(--signal-bright) 86%, #10151b); }
.home .btn-line { border: 1px solid var(--hair-strong); color: var(--ink); }
.home .btn-line:hover { border-color: var(--ink); }
.home .btn-solid:active, .home .btn-line:active { transform: scale(0.97); }

/* ---------- hero ---------- */
.home .home-hero {
  min-height: 0;
  display: block;
  padding-top: calc(var(--nav-h) + clamp(56px, 9vw, 120px));
  padding-bottom: 0;
  margin-bottom: 0;   /* style.css gives .hero a run-up margin on phones */
}
.home-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: end;
}
.home-hero-copy h1 {
  margin-top: 22px;
  font-variation-settings: "wdth" 100;
  font-weight: 600;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 1.02;
  max-width: 13ch;
}
.home-hero-lede {
  font-size: var(--t-lead);
  line-height: 1.35;
  color: var(--muted);
  max-width: 40ch;
}
.home-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.home-hero-media { margin: clamp(48px, 7vw, 88px) 0 0; }
.home-hero-media img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: 50% 40%;
  border-radius: 4px;
}

/* ---------- sections ---------- */
.home-sec { padding-block: var(--sec-pad) 0; }
.home-sec.home-system { padding-bottom: clamp(48px, 6vw, 88px); }
.home-head { max-width: 760px; }
.home-h2 {
  margin-top: 18px;
  font-variation-settings: "wdth" 100;
  font-weight: 600;
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.06;
  max-width: 20ch;
}
.home-lede {
  margin-top: 20px;
  font-size: var(--t-lead);
  line-height: 1.35;
  color: var(--muted);
  max-width: 56ch;
}
.home .home-problem-grid { margin-top: clamp(48px, 6vw, 80px); }
.home .wheel-sec { margin-top: var(--sec-pad); }
.home #contact { border-top: 1px solid var(--hair); }

/* the one word reveal: words start faint and fill to ink with the scroll */
.home-motion .word-reveal .w { color: rgba(16, 21, 27, 0.18); transition: color 0.25s linear; }
.home-motion .word-reveal .w.on { color: var(--ink); }

/* ---------- how it works: four cards that straighten ---------- */
.fan {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: clamp(48px, 6vw, 80px);
}
.fan-card {
  background: #ffffff;
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: clamp(22px, 2.4vw, 30px);
  min-height: 248px;
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.fan-num {
  font-family: "Michroma", sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--signal);
}
.fan-card h3 { margin-top: auto; padding-top: 48px; font-size: var(--t-h3); }
.fan-card p:last-child { margin-top: 10px; color: var(--muted); line-height: 1.45; }

/* ---------- the system: two framed rows ---------- */
.sys-row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  margin-top: clamp(56px, 7vw, 96px);
  padding: clamp(24px, 4vw, 56px);
  border: 1px solid var(--hair);
  background: #ffffff;
}
/* the two rows share one frame: the second sits on the first's bottom rule */
.sys-row + .sys-row { margin-top: -1px; }
.sys-row + .sys-row .mark-plus.tl, .sys-row + .sys-row .mark-plus.tr { display: none; }
.sys-kicker {
  font-family: "Michroma", sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.sys-copy h3 {
  margin-top: 14px;
  font-variation-settings: "wdth" 100;
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.1;
}
.sys-lede { margin-top: 12px; color: var(--muted); line-height: 1.45; max-width: 44ch; }
.caps { list-style: none; margin-top: 28px; border-bottom: 1px solid var(--hair); }
.caps li {
  display: grid;
  gap: 2px;
  padding: 14px 0 14px 22px;
  border-top: 1px solid var(--hair);
  position: relative;
  transition: opacity 0.3s ease;
}
.caps li::before {
  content: "";
  position: absolute;
  left: 0; top: 22px;
  width: 8px; height: 8px;
  background: var(--hair-strong);
  transition: background-color 0.3s ease;
}
.caps b { font-weight: 600; font-size: 1.05rem; }
.caps span { color: var(--muted); font-size: 0.98rem; line-height: 1.4; }
/* active-item highlight: one row at full ink, the rest quiet */
.home-motion .caps li { opacity: 0.4; }
.home-motion .caps li.is-on { opacity: 1; }
.caps li.is-on::before { background: var(--signal-bright); }
.sys-chip {
  display: inline-block;
  margin-top: 22px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--signal);
  border: 1px solid color-mix(in srgb, var(--signal-bright) 45%, transparent);
  border-radius: 999px;
  padding: 5px 12px;
}
.sys-media { margin: 0; }
.sys-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 4px;
}

/* ---------- the console: a light card over a dark field band ---------- */
.console-band {
  position: relative;
  margin: 0;
  min-height: 460px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--ink);
  display: grid;
  place-items: center;
  padding: clamp(28px, 4vw, 48px) clamp(16px, 3vw, 40px) 56px;
}
.console-bg { position: absolute; inset: 0; }
.console-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.6; filter: saturate(0.7); }
.console-band::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(16, 21, 27, 0.35), rgba(16, 21, 27, 0.7));
}
.console {
  position: relative;
  z-index: 2;
  width: min(100%, 560px);
  background: var(--bg);
  color: var(--ink);
  border-radius: 10px;
  padding: 14px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}
.console-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 4px 12px;
  font-size: 0.82rem;
  font-weight: 600;
}
.console-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal-bright); }
.console-state {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--signal);
  border: 1px solid color-mix(in srgb, var(--signal-bright) 45%, transparent);
  border-radius: 999px;
  padding: 2px 10px;
}
.console-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.console-tile {
  background: #ffffff;
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 12px;
}
.console-map { grid-column: 1 / -1; }
.console-map svg { display: block; width: 100%; height: clamp(120px, 16vw, 168px); margin-top: 6px; color: var(--ink); }
.console-map text { font-size: 9px; font-weight: 600; fill: var(--faint); font-family: inherit; }
.tile-label {
  font-family: "Michroma", sans-serif;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.tile-status, .tile-check { list-style: none; margin-top: 8px; }
.tile-status li {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  padding: 5px 0;
  border-top: 1px solid var(--hair);
}
.tile-status li:first-child { border-top: 0; }
.tile-status span { color: var(--muted); }
.tile-status b { font-weight: 600; }
.tile-status b.is-up { color: var(--signal); }
.tile-check li {
  position: relative;
  font-size: 0.78rem;
  padding: 2px 0 2px 18px;
  color: var(--muted);
}
.tile-check li::before {
  content: "";
  position: absolute;
  left: 2px; top: 6px;
  width: 7px; height: 4px;
  border-left: 1.5px solid var(--signal-bright);
  border-bottom: 1.5px solid var(--signal-bright);
  transform: rotate(-45deg);
}
.tile-go {
  margin-top: 8px;
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cta-ink);
  background: var(--signal-bright);
  border-radius: 4px;
  padding: 2px 8px;
}
.console-cap {
  position: absolute;
  z-index: 2;
  left: 16px; bottom: 14px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(251, 251, 249, 0.75);
}

/* ---------- smaller screens ---------- */
@media (max-width: 1080px) {
  .fan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sys-row { grid-template-columns: 1fr; }
  .sys-row-gcs .console-band { order: -1; }
  .sys-row .sys-media { order: -1; }
}
@media (max-width: 800px) {
  .home-hero-grid { grid-template-columns: 1fr; align-items: start; }
  .home-hero-media img { aspect-ratio: 4 / 3; }
  .home .mark-plus.tl, .home .mark-plus.tr { top: -7px; }
  .console-band { min-height: 0; padding-bottom: 48px; }
  .console-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .fan { grid-template-columns: 1fr; }
  .fan-card { min-height: 0; }
  .fan-card h3 { padding-top: 28px; }
  .sys-row { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-motion .caps li { opacity: 1; }
}

/* ================================================================
   The ground (#ground): the terrain model between the steps and the system.
   Chrome ported from terrain/src/style.css into the site's tokens. The band
   is full bleed; js/ground.js writes --reveal (0..1) from the band's place in
   the viewport: the clip opens from a rounded card to the full band and the
   paper wash lifts off the canvas as it arrives, and the reverse as it leaves.
   The camera descent that goes with it lives in the renderers.
   ================================================================ */
.home .home-ground { padding-bottom: 0; }
.ground-hint-coarse { display: none; }
@media (hover: none) {
  .ground-hint-fine { display: none; }
  .ground-hint-coarse { display: inline; }
}
.home .model {
  --reveal: 1;
  --panel-w: min(400px, 38vw);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  z-index: 1;
  height: clamp(520px, 78vh, 820px);
  margin-top: clamp(40px, 5vw, 64px);
  background: #e6e8ea;
  overflow: hidden;
  clip-path: inset(calc((1 - var(--reveal)) * 9%) calc((1 - var(--reveal)) * 7%) round calc(2px + (1 - var(--reveal)) * 36px));
}
.home .canvas-wrap { position: absolute; inset: 0; }
.home .canvas-wrap::after {
  /* the paper wash: the model surfaces out of the page */
  content: "";
  position: absolute; inset: 0;
  background: var(--bg);
  opacity: calc((1 - var(--reveal)) * 0.85);
  pointer-events: none;
}
.home #groundScene { display: block; width: 100%; height: 100%; }
.home .model-loading {
  position: absolute; z-index: 2; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: "Michroma", sans-serif; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--faint);
  transition: opacity 0.4s ease;
}
.home .model.is-ready .model-loading, .home .model.is-failed .model-loading { opacity: 0; }
.home .app {
  position: relative; display: grid; height: 100%;
  grid-template-columns: minmax(0, 1fr) 0px;
  transition: grid-template-columns 0.7s var(--ease-out);
  will-change: grid-template-columns;
}
.home .app.is-open { grid-template-columns: minmax(0, 1fr) var(--panel-w); }
.home .stage { position: relative; height: 100%; }
.home .ground-note { margin-top: 14px; font-size: 0.8rem; color: var(--faint); }

.home .reset {
  position: absolute; z-index: 3; left: var(--pad); bottom: 20px;
  padding: 9px 16px; font-size: 13px; font-weight: 600; font-family: inherit; color: var(--ink);
  background: #fff; border: 1px solid var(--hair); border-radius: 999px; cursor: pointer;
  transition: border-color 0.15s ease;
}
.home .reset:hover { border-color: var(--ink); }
.home .reset[hidden] { display: none; }

/* markers: an ink disc on a stem, with a label. They pop in, staggered, once the band has landed. */
.home .markers { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.home .marker {
  position: absolute; left: 0; top: 0;
  display: flex; flex-direction: column; align-items: center;
  background: none; border: 0; padding: 0; cursor: pointer; pointer-events: auto; font-family: inherit;
  transform: translate(-50%, -100%);
  opacity: 0;
  transition: opacity 0.45s ease;
}
.home .model.is-in .marker { opacity: 1; }
.home .model.is-in .marker.is-hidden { opacity: 0.3; }
.home .model.is-in .marker:nth-child(2) { transition-delay: 0.1s; }
.home .model.is-in .marker:nth-child(3) { transition-delay: 0.2s; }
.home .marker[hidden] { display: none; }
.home .marker-dot {
  position: relative; width: 40px; height: 40px; border-radius: 50%;
  background: #2b3036; border: 1px solid #2b3036; box-shadow: 0 6px 18px -8px rgba(16, 21, 27, 0.5);
  transform: scale(0.4);
  transition: transform 0.5s var(--ease-out), background-color 0.2s ease, border-color 0.2s ease;
}
.home .model.is-in .marker-dot { transform: scale(1); }
.home .model.is-in .marker:nth-child(2) .marker-dot { transition-delay: 0.1s; }
.home .model.is-in .marker:nth-child(3) .marker-dot { transition-delay: 0.2s; }
.home .model.is-in .marker:hover .marker-dot { transform: scale(1.08); transition-delay: 0s; }
.home .marker-dot::before, .home .marker-dot::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: #fff;
  transform: translate(-50%, -50%);
}
.home .marker-dot::before { width: 14px; height: 1.5px; }
.home .marker-dot::after { width: 1.5px; height: 14px; transition: transform 0.25s var(--ease-out); }
.home .marker-stem { width: 1px; height: 64px; background: #2b3036; opacity: 0.8; transform-origin: 50% 0; transform: scaleY(0); transition: transform 0.6s var(--ease-out) 0.15s; }
.home .model.is-in .marker-stem { transform: scaleY(1); }
.home .marker-label {
  position: absolute; left: calc(50% + 30px); top: 11px;
  display: inline-flex; align-items: baseline; gap: 8px;
  font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--ink);
  transition: opacity 0.2s ease;
}
.home .marker-label b { font-weight: 600; color: var(--faint); font-variant-numeric: tabular-nums; }
/* near the right edge the label sits on the left of the dot */
.home .marker.label-left .marker-label { left: auto; right: calc(50% + 30px); flex-direction: row-reverse; }
.home .marker.is-active .marker-dot { background: var(--signal-bright); border-color: var(--signal-bright); }
.home .marker.is-active .marker-dot::after { transform: translate(-50%, -50%) scaleY(0); }
.home .marker.is-active .marker-label { opacity: 0; }
.home .marker:focus-visible { outline: none; }
.home .marker:focus-visible .marker-dot { outline: 2px solid var(--ink); outline-offset: 3px; }

/* the small card beside the active marker */
.home .pin {
  position: absolute; z-index: 4; left: 0; top: 0;
  width: 264px; padding: 16px 18px;
  background: #fff; border: 1px solid var(--hair); border-radius: 18px;
  box-shadow: 0 16px 40px -18px rgba(16, 21, 27, 0.3);
}
.home .pin[hidden] { display: none; }
.home .pin-kicker { display: flex; gap: 10px; font-size: 12px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: 0.08em; }
.home .pin-title { margin-top: 8px; font-size: 17px; font-weight: 600; line-height: 1.2; }
.home .pin-body { margin-top: 8px; font-size: 14px; color: var(--muted); line-height: 1.45; }
.home .pin-status { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--hair); display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.home .pin-status > span:first-child { width: 7px; height: 7px; background: var(--signal-bright); }
.home .pin-status b { font-weight: 600; color: var(--ink); }

/* the side panel */
.home .panel {
  position: relative; z-index: 6;
  height: 100%; overflow: hidden; background: #fff; border-left: 1px solid var(--hair);
  opacity: 0; transition: opacity 0.4s ease 0.15s;
}
.home .app.is-open .panel { opacity: 1; overflow-y: auto; }
.home .panel-inner { width: var(--panel-w); min-width: 300px; padding: 26px 28px 36px; }
.home .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.home .panel-label { font-size: 12px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: 0.08em; }
.home .panel-sep { margin: 0 2px; }
.home .panel-close { width: 30px; height: 30px; padding: 0; font-size: 18px; line-height: 1; font-family: inherit; color: var(--ink); background: #fff; border: 1px solid var(--hair); border-radius: 50%; cursor: pointer; }
.home .panel-close:hover { border-color: var(--ink); }
.home .panel-title { margin-top: 20px; font-size: 26px; font-weight: 600; line-height: 1.1; }
.home .panel-body { margin-top: 12px; color: var(--muted); font-size: 15px; }
.home .panel-sub { margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--hair); font-size: 12px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: 0.08em; }
.home .chain { display: block; width: 100%; height: auto; margin-top: 8px; }
.home .chain-blocked { fill: none; stroke: var(--hair-strong); stroke-width: 1.2; stroke-dasharray: 3 5; }
.home .chain-link { fill: none; stroke: var(--signal-bright); stroke-width: 1.6; stroke-dasharray: 4 3; }
.home .chain-node rect { fill: var(--hair-strong); }
.home .chain-node text { font-size: 11px; font-weight: 600; fill: var(--faint); text-anchor: middle; font-family: inherit; }
.home .chain-node.is-on rect { fill: var(--signal-bright); }
.home .chain-node.is-on text { fill: var(--ink); }
.home .chain-note { font-size: 9.5px; fill: var(--faint); text-anchor: middle; font-family: inherit; }
.home .panel-list { list-style: none; margin-top: 8px; }
.home .panel-list li { position: relative; padding: 9px 0 9px 18px; border-bottom: 1px solid var(--hair); font-size: 14px; }
.home .panel-list li::before { content: ""; position: absolute; left: 0; top: 15px; width: 7px; height: 7px; background: var(--signal-bright); }
.home .panel-facts { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.home .panel-facts div { padding: 12px 14px; border: 1px solid var(--hair); border-radius: 12px; }
.home .panel-facts dt { font-size: 11px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: 0.08em; }
.home .panel-facts dd { margin: 5px 0 0; font-size: 14px; font-weight: 600; line-height: 1.3; }

@media (max-width: 800px) {
  .home .model { height: clamp(460px, 70vh, 640px); }
  .home .app, .home .app.is-open { grid-template-columns: minmax(0, 1fr) 0px; }
  .home .marker-label { font-size: 12px; left: calc(50% + 26px); }
  .home .pin, .home .pin:not([hidden]) { display: none; }
  .home .panel {
    position: absolute; left: 0; right: 0; bottom: 0; height: auto; max-height: 62%;
    border-left: 0; border-top: 1px solid var(--hair); border-radius: 18px 18px 0 0;
    transform: translateY(100%); transition: transform 0.5s var(--ease-out), opacity 0.3s ease; z-index: 5;
  }
  .home .app.is-open .panel { transform: none; }
  .home .panel-inner { width: auto; min-width: 0; padding: 18px 20px 28px; }
  .home .panel-title { font-size: 22px; }
  .home .reset { left: 16px; bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .home .model { clip-path: none; }
  .home .canvas-wrap::after { display: none; }
  .home .app, .home .panel, .home .marker, .home .marker-dot, .home .marker-dot::after, .home .marker-label, .home .marker-stem, .home .model-loading { transition: none; }
  .home .marker { opacity: 1; }
  .home .marker-dot { transform: scale(1); }
  .home .marker-stem { transform: scaleY(1); }
}