/* HIGH RISE
 *
 * A tower at night. The reference this came from is daytime, blue sky, clouds,
 * corporate; this deliberately is not. Occupied floors are lit windows, so the
 * building's state is the product's state and you read both from a thumbnail.
 *
 * Two window colours, not one. A tower where every light is identical reads as
 * a chart; mixing a warm light in makes it read as a building somebody lives in.
 */

:root {
  --sky: #06080e;
  --sky-2: #0a0e18;
  --tower: #0e131c;
  --tower-2: #11172250;
  --line: #1c2432;
  --line-2: #2a3444;

  --text: #eef1f5;
  --muted: #838d9c;
  --muted-2: #5a6472;

  --lit: #c2f400;
  --lit-warm: #ffcf5c;
  --lit-dim: #6f8c10;

  --display: "Bricolage Grotesque", "Archivo", sans-serif;
  --ui: "IBM Plex Sans", -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --w: 1080px;
  --pad: clamp(18px, 4vw, 36px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--sky);
  color: var(--text);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* A fixed starfield, painted once with box-shadow rather than 200 elements. */
.stars {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(1px 1px at 12% 14%, rgba(255,255,255,.45) 50%, transparent 50%),
    radial-gradient(1px 1px at 78% 8%, rgba(255,255,255,.35) 50%, transparent 50%),
    radial-gradient(1px 1px at 33% 27%, rgba(255,255,255,.30) 50%, transparent 50%),
    radial-gradient(1px 1px at 62% 34%, rgba(255,255,255,.40) 50%, transparent 50%),
    radial-gradient(1px 1px at 88% 46%, rgba(255,255,255,.25) 50%, transparent 50%),
    radial-gradient(1px 1px at 21% 55%, rgba(255,255,255,.28) 50%, transparent 50%),
    radial-gradient(1px 1px at 51% 6%, rgba(255,255,255,.33) 50%, transparent 50%);
}

body > *:not(.stars) { position: relative; z-index: 1; }

.wrap { max-width: var(--w); margin: 0 auto; padding: 0 var(--pad); }

a { color: inherit; }

::selection { background: var(--lit); color: #000; }

:focus-visible { outline: 2px solid var(--lit); outline-offset: 3px; }

/* ---------------------------------------------------------------- bar */

.bar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(6, 8, 14, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.bar-in { display: flex; align-items: center; gap: 20px; min-height: 62px; }

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
  margin-right: auto;
}

/* Four little windows as the mark. */
.lgm { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; flex: none; }
.lgm i { width: 6px; height: 6px; background: var(--lit); display: block; }
.lgm i:nth-child(2) { background: var(--lit-warm); }
.lgm i:nth-child(3) { background: var(--lit-dim); }

.nav { display: flex; align-items: center; gap: 22px; }

.nav a { font-size: 13.5px; color: var(--muted); text-decoration: none; transition: color .15s; }

.nav a:hover { color: var(--text); }

.nav a.ext {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
  border: 1px solid var(--line-2);
  padding: 6px 10px;
}

.nav a.ext:hover { color: var(--lit); border-color: var(--lit); }

.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 1px solid var(--line-2);
  padding: 10px 9px;
  cursor: pointer;
}

.burger span { display: block; width: 17px; height: 1px; background: var(--lit); }

/* --------------------------------------------------------------- btns */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  padding: 12px 20px;
  border: 1px solid var(--line-2);
  color: var(--text);
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}

.btn:hover { border-color: var(--lit); color: var(--lit); }

.btn-solid { background: var(--lit); border-color: var(--lit); color: #000; }

.btn-solid:hover { background: transparent; color: var(--lit); }

/* --------------------------------------------------------------- hero */

.hero { padding: clamp(52px, 8vw, 96px) var(--pad) clamp(30px, 4vw, 44px); }

.eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0 0 24px;
}

h1 {
  font-family: var(--display);
  font-size: clamp(32px, 5.8vw, 62px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.035em;
  margin: 0;
  text-wrap: balance;
}

.sub { color: var(--muted); font-size: clamp(15px, 1.8vw, 17.5px); max-width: 58ch; margin: 20px 0 0; }

.cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }

/* -------------------------------------------------------------- strip */

.strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line-2);
}

.st { background: var(--tower); padding: 18px var(--pad) 20px; }

.st-l {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0 0 11px;
}

.st-v {
  font-family: var(--mono);
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 500;
  color: var(--lit);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin: 0;
}

.st-v.small { font-size: clamp(13px, 1.7vw, 16px); color: var(--muted); }

/* -------------------------------------------------------------- shell */

.sec { padding: clamp(46px, 7vw, 80px) 0 0; }

.sec.wrap { padding-left: var(--pad); padding-right: var(--pad); }

.h2 {
  font-family: var(--display);
  font-size: clamp(22px, 3.2vw, 34px);
  font-weight: 700;
  letter-spacing: -0.028em;
  margin: 0 0 10px;
}

.lede { color: var(--muted); margin: 0; max-width: 52ch; font-size: 15px; }

/* --------------------------------------------------------- tower head */

.tower-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 22px 40px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.finder { flex: 0 1 340px; }

.finder label {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 9px;
}

.finder-row { display: flex; gap: 8px; }

.finder input {
  flex: 1;
  min-width: 0;
  background: var(--tower);
  border: 1px solid var(--line-2);
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  padding: 11px 13px;
}

.finder input::placeholder { color: var(--muted-2); }

.finder button {
  flex: none;
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--text);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  padding: 11px 17px;
  cursor: pointer;
}

.finder button:hover { border-color: var(--lit); color: var(--lit); }

.fnote { font-family: var(--mono); font-size: 10.5px; color: var(--muted-2); margin: 9px 0 0; line-height: 1.5; }

.fnote.hit { color: var(--lit); }

/* -------------------------------------------------------------- scene */

/* A city at night, built out of CSS 3D. The tower is three stacked cuboids
   rather than one, because real towers step in as they rise and a single
   shoebox reads as a diagram. Each block carries four walls and a roof, so the
   setbacks show as ledges where the block above is narrower. */

.stage-wrap {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 22px;
  max-width: var(--w);
  margin: 0 auto;
  padding: 0 var(--pad);
  align-items: stretch;
}

.stage {
  position: relative;
  min-height: 620px;
  border: 1px solid var(--line-2);
  background:
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(194, 244, 0, 0.10), transparent 70%),
    linear-gradient(#070a11 0%, #0a0f18 55%, #0d1420 100%);
  overflow: hidden;
  perspective: 1600px;
  perspective-origin: 50% 46%;
  cursor: grab;
  touch-action: pan-y;
}

.stage.dragging { cursor: grabbing; }

/* Distant city. Flat, behind everything, drifting a little as the view turns
   so it reads as far away rather than painted on. */
.skyline {
  position: absolute;
  left: 50%;
  bottom: 96px;
  width: 1500px;
  height: 260px;
  margin-left: -750px;
  pointer-events: none;
  will-change: transform;
}

.skyline span {
  position: absolute;
  bottom: 0;
  background: #0a0e16;
  border: 1px solid #101724;
  border-bottom: none;
}

/* Distant windows are small rectangles, not dots. A radial gradient at this
   size reads as polka dots and instantly gives away that it is a texture. */
.skyline span::after {
  content: "";
  position: absolute;
  inset: 7px 5px 0;
  background-image: linear-gradient(90deg, rgba(200,236,140,1) 0 2px, transparent 2px 9px);
  background-size: 9px 11px;
  -webkit-mask-image: linear-gradient(0deg, transparent, #000 60%);
  mask-image: linear-gradient(0deg, transparent, #000 60%);
  mix-blend-mode: screen;
  opacity: .07;
}

.skyline span { opacity: .6; }

.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  box-shadow: inset 0 0 130px 40px rgba(4, 6, 10, 0.85);
}

/* Street plane. */
.ground {
  position: absolute;
  left: 50%;
  bottom: 84px;
  width: 900px;
  height: 900px;
  margin-left: -450px;
  transform: rotateX(79deg);
  transform-origin: 50% 100%;
  background:
    linear-gradient(to right, rgba(140,170,210,.05) 1px, transparent 1px) 0 0 / 50px 50px,
    linear-gradient(to bottom, rgba(140,170,210,.05) 1px, transparent 1px) 0 0 / 50px 50px;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at 50% 100%, #000 10%, transparent 62%);
  mask-image: radial-gradient(ellipse at 50% 100%, #000 10%, transparent 62%);
}

/* Ground haze, so the tower stands in air rather than being pasted on. */
.haze {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 210px;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(to top, #080c14 6%, rgba(10, 15, 24, .72) 45%, transparent 100%);
}

.rig {
  position: absolute;
  left: 50%;
  bottom: 84px;
  transform-style: preserve-3d;
  will-change: transform;
  z-index: 1;
}

.tower3d {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 10px;
  transform-style: preserve-3d;
  transform-origin: 50% 100%;
}

/* One section of the tower: podium, shaft or crown. */
.block {
  position: absolute;
  left: 0;
  width: var(--bw);
  margin-left: calc(var(--bw) / -2);
  transform-style: preserve-3d;
}

.block .face {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--bw);
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #1b2431;
}

/* Faces are shaded like faces, not filled like swatches. The front catches the
   most light, the sides less, the back least, and every one darkens toward the
   street so the tower has weight at the bottom. */
.block .face.front {
  transform: translateZ(calc(var(--bd) / 2));
  background: linear-gradient(#141b28, #0d131d 70%, #090e16);
}

.block .face.back {
  transform: rotateY(180deg) translateZ(calc(var(--bd) / 2));
  background: linear-gradient(#0b111a, #070b12);
}

.block .face.side {
  width: var(--bd);
  left: calc((var(--bw) - var(--bd)) / 2);
  background: linear-gradient(#0e141f, #080d15 72%, #060a11);
}

.block .face.side.right { transform: rotateY(90deg) translateZ(calc(var(--bw) / 2)); }
.block .face.side.left  { transform: rotateY(-90deg) translateZ(calc(var(--bw) / 2)); }

.block .roof {
  position: absolute;
  left: 0;
  top: calc(var(--bd) / -2);
  width: var(--bw);
  height: var(--bd);
  transform: rotateX(90deg);
  background: #101725;
  border: 1px solid #1b2431;
}

.block .roof::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid #1a2331;
  background: repeating-linear-gradient(90deg, #0d131e 0 6px, #101725 6px 12px);
  opacity: .6;
}

.mast {
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 3px;
  height: 62px;
  margin-left: -1.5px;
  background: linear-gradient(to top, #2a3444, #1b2431);
}

.beacon {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 7px;
  height: 7px;
  background: var(--lit-warm);
  border-radius: 50%;
  box-shadow: 0 0 14px 4px rgba(255, 207, 92, 0.65);
  animation: beacon 3.4s ease-in-out infinite;
}

@keyframes beacon { 0%, 100% { opacity: 1; } 55% { opacity: .1; } }

/* One storey on one wall. */
.lvl {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, .035);
  min-height: 0;
}

.lvl:last-child { border-bottom: none; }

/* Windows are recessed, so a dark one reads as glass rather than as a gap. */
.lvl i {
  width: 9px;
  height: 44%;
  max-height: 13px;
  display: block;
  background: #0a0f18;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -1px 0 rgba(0,0,0,.5);
  transition: background .45s, box-shadow .45s;
}

.lvl i.on {
  background: var(--lit);
  box-shadow: 0 0 9px rgba(194, 244, 0, .55), inset 0 -1px 0 rgba(0,0,0,.25);
}

.lvl i.warm {
  background: var(--lit-warm);
  box-shadow: 0 0 9px rgba(255, 207, 92, .5), inset 0 -1px 0 rgba(0,0,0,.25);
}

.lvl.hot { background: rgba(194, 244, 0, .13); }

.sign3 {
  flex: none;
  font-family: var(--display);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: .2em;
  text-align: center;
  color: var(--lit);
  padding: 6px 0 7px;
  border-bottom: 1px solid #1b2431;
  background: #0a0f17;
  text-shadow: 0 0 10px rgba(194, 244, 0, .6);
}

/* The lobby glows, because the way in should be the brightest thing at street
   level. */
.entrance {
  flex: none;
  height: 26px;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(255, 207, 92, .5), transparent 62%),
    #0b111a;
  border-top: 1px solid #1b2431;
}

/* -------------------------------------------------------- stage chrome */

.controls {
  position: absolute;
  right: 12px;
  top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 5;
}

.controls button {
  width: 44px;
  height: 30px;
  background: rgba(10, 14, 21, .8);
  border: 1px solid var(--line-2);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: color .15s, border-color .15s;
}

.controls button[data-act="reset"] { font-size: 8.5px; letter-spacing: .04em; }

.controls button:hover { color: var(--lit); border-color: var(--lit); }

.hint {
  position: absolute;
  left: 12px;
  bottom: 10px;
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
  pointer-events: none;
  transition: opacity .3s;
  z-index: 5;
}

.hint.gone { opacity: 0; }

/* -------------------------------------------------------------- roster */

.roster {
  border: 1px solid var(--line-2);
  background: var(--tower);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.roster-bar {
  display: flex;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.roster-bar span:last-child { color: var(--lit); }

.roster-list { overflow-y: auto; max-height: 500px; flex: 1; }

.rrow {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: center;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  transition: background .12s;
}

.rrow:last-child { border-bottom: none; }

.rrow:hover, .rrow.hot { background: #131a26; }

.rrow.you { background: #17210c; box-shadow: inset 3px 0 0 var(--lit); }

.rrow .rn {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}

.rrow.pent .rn { color: var(--lit-warm); }

.rrow .rw {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rrow.vacant .rw { color: var(--muted-2); font-style: italic; }

.scene-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
}

.scene-note {
  font-size: 12.5px;
  color: var(--muted-2);
  margin: 0;
  max-width: 68ch;
  text-align: center;
}

.scene-note.preview { color: var(--lit-warm); }

.prev-btn {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  padding: 10px 18px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}

.prev-btn:hover { border-color: var(--lit); color: var(--lit); }

@media (max-width: 900px) {
  .stage-wrap { grid-template-columns: 1fr; }
  .stage { min-height: 440px; }
  .roster-list { max-height: 290px; }
}

/* -------------------------------------------------------------- steps */

.steps {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line-2);
}

.steps li { background: var(--tower); padding: 22px var(--pad) 24px; }

.steps .n {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--lit);
  margin-bottom: 12px;
}

.s-t { margin: 0 0 8px; font-weight: 600; font-size: 15.5px; }

.steps p:last-child { margin: 0; color: var(--muted); font-size: 14.5px; }

/* -------------------------------------------------------------- split */

.tablewrap { overflow-x: auto; border: 1px solid var(--line-2); margin-top: 24px; }

table { width: 100%; border-collapse: collapse; min-width: 520px; }

th {
  text-align: left;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding: 13px var(--pad);
  background: #0b0f16;
  border-bottom: 1px solid var(--line-2);
}

th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }

td { padding: 14px var(--pad); border-bottom: 1px solid var(--line); font-size: 14.5px; }

td.num { font-family: var(--mono); }

td.num.hi { color: var(--lit); }

tr.tot td { border-bottom: none; background: #0b0f16; font-weight: 600; }

.note { color: var(--muted); font-size: 14px; margin: 16px 0 0; max-width: 66ch; }

/* ------------------------------------------------------------- truths */

.truths { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--line-2); }

.truths li { padding: 15px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 15px; }

.truths b { color: var(--text); font-weight: 600; }

/* ----------------------------------------------------------- contract */

.cabar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  border: 1px solid var(--line-2);
  background: var(--tower);
  padding: 20px var(--pad);
}

.cabar > div:first-child { flex: 1 1 320px; min-width: 0; }

.cabar-r { display: flex; gap: 10px; flex: none; }

.ca-l {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0 0 8px;
}

.ca-v { margin: 0; font-family: var(--mono); font-size: 13px; color: var(--muted); word-break: break-all; }

.ca-v.set { color: var(--lit); font-size: 14.5px; }

.cabar button {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  padding: 12px 20px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.cabar button:hover:not(:disabled) { border-color: var(--lit); color: var(--lit); }

.cabar button:disabled { opacity: .32; cursor: not-allowed; }

/* ------------------------------------------------------------- footer */

.foot { margin-top: clamp(56px, 8vw, 92px); border-top: 1px solid var(--line); padding: 32px 0 46px; }

.foot-top {
  display: flex;
  justify-content: space-between;
  gap: 20px 40px;
  flex-wrap: wrap;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.f-name { margin: 0; font-family: var(--display); font-weight: 700; font-size: 16px; }

.f-sub {
  margin: 5px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.foot-nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }

.foot-nav a {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted-2);
  text-decoration: none;
}

.foot-nav a:hover { color: var(--lit); }

.disclose { padding: 20px 0 0; }

.disclose p { font-size: 12.5px; line-height: 1.7; color: var(--muted-2); max-width: 86ch; margin: 0 0 10px; }

.f-end {
  display: flex;
  justify-content: space-between;
  gap: 10px 20px;
  flex-wrap: wrap;
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* --------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .strip { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .tower-head { align-items: stretch; }
  .finder { flex: 1 1 100%; }
}

@media (max-width: 720px) {
  .burger { display: flex; }
  .bar-in { flex-wrap: wrap; }
  .nav {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-top: 1px solid var(--line);
    padding-bottom: 6px;
  }
  .nav.open { display: flex; }
  .nav a { padding: 13px 0; border-bottom: 1px solid var(--line); }
  .nav a.ext { border: none; padding: 13px 0; }
  .nav a:last-child { border-bottom: none; }
}

@media (max-width: 560px) {
  .strip { grid-template-columns: 1fr; }
  .cta .btn { width: 100%; }
  .cabar-r { width: 100%; }
  .cabar-r > * { flex: 1; }
  .floor { grid-template-columns: 34px 1fr auto; gap: 8px; padding: 0 10px; }
  .f-win i { width: 5px; height: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .beacon { animation: none; }
  * { transition: none !important; }
}

/* The hero carries its own contract bar. Somebody who arrives to buy should
   not have to scroll past the whole explanation to find the address. */
.hero-ca { margin-top: 30px; max-width: 720px; }

.hero-ca .ca-v { font-size: 13.5px; }

.hero-ca .ca-v.set { font-size: 15px; }