@font-face { font-family: "Tiempos Headline"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/Tiempos-Headline-Regular.woff2") format("woff2"); }
@font-face { font-family: "TT Norms Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/TT-Norms-Pro-Regular.woff2") format("woff2"); }
@font-face { font-family: "TT Norms Pro"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/TT-Norms-Pro-Medium.woff2") format("woff2"); }

:root {
  --kasa-black: #061332;
  --kasa-warm: #f7f6f2;
  --kasa-light: #fdfcfb;
  --dark-grey-100: #38425b;
  --dark-grey-300: #121f3c;
  --light-grey-300: #cdd0d6;
  --overcast-300: #86c0c0;
  --overcast-200: #aed5d5;
  --interaction-teal: #205a5a;
  --red-200: #f1b099;
  /* The Kasa type ramp: Tiempos Headline for display, TT Norms Pro for everything that does a job. */
  --t-display-xl: 400 56px/70px var(--serif);
  --t-display-l: 400 48px/60px var(--serif);
  --t-display-m: 400 40px/50px var(--serif);
  --t-display-s: 400 32px/40px var(--serif);
  --t-display-xs: 400 24px/30px var(--serif);
  --t-body-l: 400 20px/30px var(--sans);
  --t-body: 400 16px/24px var(--sans);
  --t-body-s: 400 14px/20px var(--sans);
  --t-func: 500 16px/24px var(--sans);
  --t-func-s: 500 14px/20px var(--sans);
  --serif: "Tiempos Headline", Georgia, "Times New Roman", serif;
  --sans: "TT Norms Pro", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --gutter: clamp(24px, 5vw, 80px);
  --out: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { background: var(--kasa-black); scrollbar-color: var(--dark-grey-100) var(--kasa-black); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--kasa-black);
  background: var(--kasa-warm);
  font: 400 16px/24px var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
::selection { color: var(--kasa-black); background: var(--overcast-200); }
img { display: block; max-width: 100%; }
h1, h2, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--kasa-black); outline-offset: 5px; }
.wall :focus-visible, .record :focus-visible, .close :focus-visible, .signin :focus-visible { outline-color: var(--overcast-300); }
.worth :focus-visible { outline-color: var(--interaction-teal); }
/* The cursor is the Kasa K: a navy tile, and a pale one over anything that can be clicked. */
@media (hover: hover) and (pointer: fine) {
  html {
    cursor: url("/home/cursor/k.png") 16 16, auto;
    cursor: -webkit-image-set(url("/home/cursor/k.png") 1x, url("/home/cursor/k@2x.png") 2x) 16 16, auto;
    cursor: image-set(url("/home/cursor/k.png") 1x, url("/home/cursor/k@2x.png") 2x) 16 16, auto;
  }
  a, button, label, input[type="checkbox"] {
    cursor: url("/home/cursor/k-hover.png") 16 16, pointer;
    cursor: -webkit-image-set(url("/home/cursor/k-hover.png") 1x, url("/home/cursor/k-hover@2x.png") 2x) 16 16, pointer;
    cursor: image-set(url("/home/cursor/k-hover.png") 1x, url("/home/cursor/k-hover@2x.png") 2x) 16 16, pointer;
  }
  input[type="email"], input[type="password"] { cursor: text; }
}

.skip {
  position: absolute; left: var(--gutter); top: 12px; z-index: 10;
  padding: 10px 14px; color: var(--kasa-black); background: var(--kasa-light);
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* Top bar: sits on the wall, not on the page. */
.bar {
  position: absolute; inset: 0 0 auto; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(20px, 3.2vh, 32px) var(--gutter);
  color: var(--kasa-light);
}
.bar__mark { display: inline-flex; align-items: baseline; gap: 12px; min-height: 44px; align-items: center; text-decoration: none; }
.bar__mark svg { width: 74px; height: auto; }
.bar__mark span { font-size: 14px; line-height: 20px; color: var(--light-grey-300); padding-left: 12px; border-left: 1px solid rgba(205, 208, 214, .45); }
.out {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: 14px; line-height: 20px; text-decoration: none;
}
.out svg { width: 14px; height: 14px; transition: transform 240ms var(--out); }
.out span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 240ms var(--out); }
.out:hover span, .out:focus-visible span { background-size: 100% 1px; }
.out:hover svg, .out:focus-visible svg { transform: translate(2px, -2px); }
/* The way in sits in the middle of the bar, where the eye lands first. */
.enter {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 22px 0 18px;
  border: 1px solid rgba(253, 252, 251, .42); border-radius: 999px;
  color: var(--kasa-light); background: rgba(6, 19, 50, .38);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  font: var(--t-func); white-space: nowrap;
  transition: color 240ms ease, background-color 240ms ease, border-color 240ms ease;
}
.enter svg { width: 16px; height: 16px; }
.enter:hover, .enter:focus-visible { color: var(--kasa-black); background: var(--kasa-light); border-color: var(--kasa-light); }

/* The wall: every column is a facade of buildings, drifting. */
.wall { position: relative; height: calc(100svh + 70vh); background: var(--kasa-black); color: var(--kasa-light); --p: 0; }
.wall__pin { position: sticky; top: 0; height: 100svh; min-height: 560px; overflow: hidden; }
.wall__grid {
  position: absolute; inset: -4% -3%;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
  transform: scale(calc(1 + var(--p) * .14));
  opacity: calc(1 - var(--p) * .55);
  will-change: transform;
}
.wall__col { min-width: 0; }
.wall__track { display: flex; flex-direction: column; gap: 12px; will-change: transform; }
.tile { aspect-ratio: 4 / 5; overflow: hidden; background: var(--dark-grey-300); }
.tile img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.86); }
.wall__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(125% 105% at 0% 100%, rgba(6, 19, 50, .97) 0%, rgba(6, 19, 50, .9) 30%, rgba(6, 19, 50, .58) 52%, rgba(6, 19, 50, 0) 78%),
    linear-gradient(to top, rgba(6, 19, 50, .72) 0%, rgba(6, 19, 50, 0) 24%),
    linear-gradient(to bottom, rgba(6, 19, 50, .66) 0%, rgba(6, 19, 50, 0) 20%),
    rgba(6, 19, 50, .1);
}
.wall__copy {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(72px, 13vh, 132px);
  transform: translateY(calc(var(--p) * -72px));
  opacity: calc(1 - var(--p) * 1.5);
}
.wall__title {
  font: 400 clamp(46px, 7.4vw, 96px)/1.04 var(--serif);
  letter-spacing: -.01em;
}
.wall__title .line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.wall__title .line > span { display: block; }
.wall__lede { max-width: 43ch; margin-top: clamp(20px, 3vh, 32px); font: var(--t-body-l); color: #e4e6ea; }
/* The scroll cue: a ring of words turning around an arrow that keeps dropping, inviting the first scroll. */
.wall__cue {
  position: absolute; right: var(--gutter); bottom: clamp(24px, 4.5vh, 44px);
  display: grid; place-items: center; width: clamp(112px, 8.6vw, 136px); aspect-ratio: 1; border-radius: 50%;
  color: var(--kasa-light); text-decoration: none;
  opacity: calc(1 - var(--p) * 3);
}
.wall__cue::before {
  content: ""; position: absolute; inset: 19%; border-radius: 50%;
  border: 1px solid rgba(253, 252, 251, .38); background: rgba(6, 19, 50, .32);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background-color 320ms var(--out), border-color 320ms var(--out), transform 520ms var(--out);
}
/* A soft ring breathes out from the disc. */
.wall__cue::after {
  content: ""; position: absolute; inset: 19%; border-radius: 50%;
  border: 1px solid rgba(253, 252, 251, .5);
  animation: breathe 2.8s var(--out) infinite;
}
.wall__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: turn 16s linear infinite; }
.wall__ring text { fill: currentColor; font: 500 10px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.wall__drop { position: relative; width: 22px; height: 30px; overflow: hidden; }
.wall__drop svg { position: absolute; left: 0; top: 4px; width: 22px; height: 22px; animation: drop 1.9s cubic-bezier(.65, 0, .35, 1) infinite; }
.wall__cue:hover::before, .wall__cue:focus-visible::before { background: var(--kasa-light); border-color: var(--kasa-light); transform: scale(1.06); }
.wall__cue:hover .wall__drop, .wall__cue:focus-visible .wall__drop { color: var(--kasa-black); }
@keyframes turn { to { transform: rotate(360deg); } }
@keyframes drop {
  0% { transform: translateY(-26px); opacity: 0; }
  25% { opacity: 1; }
  60% { transform: translateY(2px); opacity: 1; }
  100% { transform: translateY(26px); opacity: 0; }
}
@keyframes breathe { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.5); opacity: 0; } }

/* Entrance: the facade settles into place, then the claim rises. */
@keyframes settle { from { transform: translateY(var(--from)); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rise { from { transform: translateY(110%); } to { transform: none; } }
@keyframes fade-up { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.js .wall__col { animation: settle 1.6s var(--out) both; animation-delay: calc(var(--i) * 90ms); --from: 9%; }
.js .wall__col:nth-child(even) { --from: -9%; }
.js .wall__title .line > span { animation: rise 1.15s var(--out) both; animation-delay: calc(380ms + var(--i) * 120ms); }
.js .wall__lede, .js .bar, .js .wall__cue { animation: fade-up 1s var(--out) both; animation-delay: 820ms; }
/* The cue lets go of its entrance once it ends, so scrolling can fade it. */
.js .wall__cue { animation-fill-mode: backwards; }

/* What a report is. */
.brief { padding: clamp(96px, 16vh, 176px) var(--gutter) clamp(72px, 11vh, 120px); }
.brief__inner { max-width: 1280px; margin: 0 auto; }
.brief__lede {
  max-width: 24em;
  font: var(--t-display-m); text-wrap: pretty;
}
.js .brief__lede .w { color: rgba(6, 19, 50, .2); transition: color 500ms var(--out); }
.js .brief__lede .w.on { color: var(--kasa-black); }
.brief__notes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 34ch)); gap: 24px clamp(32px, 6vw, 96px);
  margin-top: clamp(56px, 9vh, 96px); color: var(--dark-grey-100);
}
.brief__notes p { padding-top: 16px; border-top: 1px solid var(--light-grey-300); }
/* The size of the portfolio, in four figures. */
.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px clamp(24px, 4vw, 64px); margin-top: clamp(64px, 11vh, 120px); }
.figures strong { display: block; font: 400 56px/1 var(--serif); font-variant-numeric: tabular-nums; }
.figures span { display: block; margin-top: 12px; font: var(--t-body-l); }
.figures + .brief__notes { margin-top: clamp(48px, 7vh, 72px); }

/* The record: what the platform delivers, then what a takeover does to the reviews. */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.record { padding: clamp(96px, 16vh, 176px) var(--gutter); background: var(--kasa-black); color: var(--kasa-light); }
.record__inner { max-width: 1280px; margin: 0 auto; }
.record__title { max-width: 13em; font: var(--t-display-m); text-wrap: balance; }
.record__text { max-width: 50ch; margin-top: 24px; font: var(--t-body-l); color: var(--light-grey-300); text-wrap: pretty; }
/* One figure carries the claim; the table beside it is the proof, channel by channel. */
.lead {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px clamp(40px, 7vw, 112px); align-items: end;
  margin-top: clamp(64px, 11vh, 120px);
}
.lead__figure { display: block; font: 400 96px/.9 var(--serif); white-space: nowrap; }
.lead__text { display: block; max-width: 30ch; margin-top: 24px; font: var(--t-body-l); text-wrap: pretty; }
.scores { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.scores caption { padding-bottom: 16px; text-align: left; font-size: 16px; line-height: 24px; color: var(--light-grey-300); }
.scores th, .scores td { padding: 14px 0; text-align: right; font-weight: 400; border-bottom: 1px solid rgba(205, 208, 214, .22); }
.scores thead th { padding-top: 0; font: var(--t-func-s); color: var(--light-grey-300); }
.scores tbody th { text-align: left; }
.scores th:first-child { text-align: left; }
.scores td { font: var(--t-display-xs); }
.scores td:nth-child(2) { color: var(--overcast-200); }
.scores td:last-child { color: var(--light-grey-300); }
.scores small { font: 400 14px/1 var(--sans); letter-spacing: 0; color: var(--light-grey-300); }
.scores th + td, .scores th + th { padding-left: 24px; }
.scores td + td, .scores th + th + th { padding-left: 24px; }

/* The rest of the record: each figure set at heading size and read as a sentence. */
.facts {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: clamp(36px, 5vh, 52px) clamp(32px, 4.5vw, 64px);
  margin-top: clamp(80px, 13vh, 144px); padding: clamp(48px, 6vw, 80px); border-radius: 16px; background: var(--dark-grey-300);
}
/* Each row shares the panel's two columns, so every figure and every sentence starts on the same line. */
.facts li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; }
.facts strong { font: 400 40px/1 var(--serif); white-space: nowrap; font-variant-numeric: tabular-nums; }
.facts span { max-width: 52ch; font: var(--t-body-l); text-wrap: pretty; }

.shift {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 0 clamp(40px, 7vw, 112px);
  margin-top: clamp(96px, 16vh, 176px);
}
.shift__head { grid-row: span 2; }
.shift__title { margin: 0; font: var(--t-display-s); text-wrap: balance; }
.shift__text { max-width: 36ch; margin-top: 16px; color: var(--light-grey-300); text-wrap: pretty; }
.shift__key { display: flex; gap: 24px; margin-top: 24px; font-size: 14px; line-height: 20px; color: var(--light-grey-300); }
.shift__key span { display: inline-flex; align-items: center; gap: 10px; }
.shift__key .shift__dot { position: static; transform: none; opacity: 1; }
.shift__list { display: grid; gap: clamp(28px, 4.5vh, 44px); margin: 0; padding: 8px 0 0; list-style: none; }
.shift__row { display: grid; grid-template-columns: 132px minmax(0, 1fr) 56px; align-items: center; gap: 24px; }
.shift__label { font-size: 14px; line-height: 20px; color: var(--light-grey-300); }
.shift__gain { font: var(--t-display-xs); text-align: right; font-variant-numeric: tabular-nums; }
/* One scale from 3.5 to 5: a hollow dot for before, a filled one for after, joined by the gain. */
.shift__scale { position: relative; height: 48px; background: linear-gradient(rgba(205, 208, 214, .18), rgba(205, 208, 214, .18)) 0 34px / 100% 1px no-repeat; }
.shift__line {
  position: absolute; top: 33px; left: calc(var(--from) * 100%); width: calc((var(--to) - var(--from)) * 100%); height: 2px;
  background: linear-gradient(to right, rgba(205, 208, 214, .45), var(--overcast-300)); transform-origin: left;
}
.shift__dot { position: absolute; top: 34px; display: block; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); }
.shift__dot--from { left: calc(var(--from) * 100%); border: 2px solid var(--light-grey-300); background: var(--kasa-black); }
.shift__dot--to { left: calc(var(--to) * 100%); width: 16px; height: 16px; border: 2px solid var(--kasa-black); background: var(--overcast-300); }
.shift__dot--to::before { bottom: 16px; }
.shift__key .shift__dot--to { width: 12px; height: 12px; border: 0; }
.shift__dot::before { content: attr(data-v); position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); font: 400 14px/1 var(--sans); font-variant-numeric: tabular-nums; }
.shift__dot--from::before { color: var(--light-grey-300); }
.shift__dot--to::before { color: var(--kasa-light); font-weight: 500; }
.shift__axis { position: relative; grid-column: 2; height: 20px; margin: 18px 80px 0 156px; font: var(--t-body-s); color: var(--light-grey-300); }
.shift__axis span { position: absolute; left: calc(var(--at) * 100%); transform: translateX(-50%); }
/* The gain draws itself in once the chart comes into view. */
.js .shift__line { transform: scaleX(0); transition: transform 1.2s var(--out) calc(240ms + var(--n) * 140ms); }
.js .shift__dot--to { opacity: 0; transition: opacity 500ms var(--out) calc(900ms + var(--n) * 140ms); }
.js .shift.in .shift__line { transform: none; }
.js .shift.in .shift__dot--to { opacity: 1; }

/* Parts of a section rise in one after another as it comes into view. */
.rises [data-rise] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--out), transform 900ms var(--out); transition-delay: calc(var(--d, 0) * 80ms); }
.rises [data-rise].in { opacity: 1; transform: none; }

/* The estimator: one slider, read off in the largest type on the section. */
.worth {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px clamp(40px, 7vw, 112px); align-items: end;
  margin-top: clamp(96px, 16vh, 176px); padding: clamp(40px, 6vw, 72px); border-radius: 16px; background: var(--kasa-light); color: var(--kasa-black);
}
.worth__title { margin: 0; font: var(--t-display-s); text-wrap: balance; }
.worth__text { max-width: 40ch; margin-top: 16px; text-wrap: pretty; }
.worth__label { display: block; margin-top: clamp(32px, 5vh, 48px); font-weight: 500; }
.worth__control { display: flex; align-items: center; gap: 20px; margin-top: 12px; }
.worth__score { min-width: 2.2em; font: 400 32px/1 var(--serif); font-variant-numeric: tabular-nums; }
.worth input[type="range"] { flex: 1; min-width: 0; height: 44px; margin: 0; background: none; -webkit-appearance: none; appearance: none; }
.worth input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--light-grey-300); }
.worth input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--light-grey-300); }
.worth input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin-top: -11px; border: 0; border-radius: 50%;
  background: var(--interaction-teal); transition: transform 240ms var(--out);
}
.worth input[type="range"]::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--interaction-teal); }
.worth input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }
.worth input[type="range"]:focus-visible { outline: 2px solid var(--interaction-teal); outline-offset: 4px; }
.worth__figure { font: 400 96px/.9 var(--serif); white-space: nowrap; font-variant-numeric: tabular-nums; }
.worth__result { margin-top: 20px; font: var(--t-body-l); }
.worth__note { margin-top: 12px; color: var(--dark-grey-100); }

/* Before and after: apartment buildings side by side, hotels as rows, a portfolio as a table. */
.cases { padding: clamp(120px, 18vh, 200px) var(--gutter) clamp(120px, 18vh, 200px); background: var(--kasa-light); }
.cases__inner { max-width: 1280px; margin: 0 auto; }
.cases__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px clamp(40px, 7vw, 112px); align-items: end; }
.cases__title { font: var(--t-display-m); text-wrap: balance; }
.cases__text { max-width: 44ch; font: var(--t-body-l); text-wrap: pretty; }
.cases__group { margin-top: clamp(96px, 15vh, 160px); }
.cases__label { margin: 0; font: var(--t-display-s); }
.cases__note { max-width: 56ch; margin-top: 14px; font: var(--t-body); text-wrap: pretty; }

.apts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px clamp(32px, 5vw, 80px); margin-top: clamp(40px, 6vh, 64px); }
.apt img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; background: var(--light-grey-300); }
.apt__figure { margin-top: clamp(28px, 4vh, 40px); font: 400 56px/1 var(--serif); font-variant-numeric: tabular-nums; }
.apt__claim { max-width: 32ch; margin-top: 14px; font: var(--t-body-l); text-wrap: pretty; }
.apt__name { margin: clamp(28px, 4vh, 40px) 0 0; font: var(--t-display-xs); }
.apt__facts { display: grid; gap: 10px; margin: 16px 0 0; }
.apt__facts div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 16px; }
.apt__facts dt { color: var(--dark-grey-100); }
.apt__facts dd { margin: 0; }

.hotels { display: grid; gap: clamp(40px, 6vh, 64px); margin-top: clamp(40px, 6vh, 64px); }
.hotel { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.hotel img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; background: var(--light-grey-300); }
.hotel__name { margin: 0; font: var(--t-display-s); text-wrap: balance; }
.hotel__meta { max-width: 52ch; margin-top: 12px; color: var(--dark-grey-100); text-wrap: pretty; }
.hotel__nums { display: flex; flex-wrap: wrap; gap: 20px clamp(40px, 6vw, 96px); margin-top: clamp(24px, 4vh, 40px); }
.hotel__nums span { max-width: 15em; }
.hotel__nums strong { display: block; margin-bottom: 8px; font: 400 56px/1 var(--serif); font-variant-numeric: tabular-nums; }

.cases__group--split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px clamp(40px, 7vw, 112px); align-items: start; }
.moved { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.moved caption { padding-bottom: 16px; text-align: left; color: var(--dark-grey-100); }
.moved th, .moved td { padding: 16px 0; font-weight: 400; text-align: right; border-bottom: 1px solid var(--light-grey-300); }
.moved thead th { padding-top: 0; font: var(--t-func-s); color: var(--dark-grey-100); }
.moved th:first-child, .moved tbody th { text-align: left; }
.moved th + th, .moved th + td, .moved td + td { padding-left: 24px; }
.moved td { font: var(--t-display-xs); }
.moved td:first-child, .moved td:nth-child(2) { color: var(--dark-grey-100); }
.moved td:last-child { color: var(--interaction-teal); }
.cases__aside { grid-column: 2; max-width: 60ch; text-wrap: pretty; }

/* The owners' words: one field of colour, one quotation set large, the rest beneath it. */
.voices { padding: clamp(96px, 15vh, 168px) var(--gutter); margin-bottom: clamp(96px, 14vh, 160px); background: var(--overcast-200); }
.voices__inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px clamp(40px, 7vw, 112px); }
.voices__title { font: var(--t-display-m); text-wrap: balance; }
.voice { margin: 0; }
.voice blockquote { margin: 0; }
.voice p { font: var(--t-body); text-wrap: pretty; }
.voice--lead p { font: var(--t-display-s); }
.voice figcaption { margin-top: 16px; font-size: 14px; line-height: 20px; color: var(--dark-grey-300); }
.voice--lead figcaption { margin-top: 24px; font-size: 16px; line-height: 24px; }
.voice__name { display: block; font-weight: 500; color: var(--kasa-black); }
.voices__list { grid-column: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px clamp(32px, 5vw, 72px); }

/* Postcards from the buildings: a rack that slides past as the page moves. */
.rack { padding: 0 var(--gutter) clamp(72px, 12vh, 128px); overflow: hidden; }
.rack__inner { max-width: 1280px; margin: 0 auto; }
.rack__title { font: var(--t-display-m); text-wrap: balance; }
.rack__track {
  display: flex; align-items: flex-start; gap: clamp(20px, 2.6vw, 40px); width: max-content;
  padding: clamp(40px, 7vh, 72px) 0 40px; will-change: transform;
}
.card {
  flex: none; width: clamp(220px, 21vw, 300px); padding: 10px 10px 0; background: var(--kasa-light);
  box-shadow: 0 1px 0 rgba(6, 19, 50, .06), 0 22px 44px -24px rgba(6, 19, 50, .42);
  transform: translateY(var(--drop, 0)) rotate(var(--lean, 0deg));
  transition: transform 620ms var(--out), box-shadow 620ms var(--out);
}
.card:nth-child(4n + 1) { --lean: -2.4deg; --drop: 10px; }
.card:nth-child(4n + 2) { --lean: 1.6deg; --drop: -6px; }
.card:nth-child(4n + 3) { --lean: -.9deg; --drop: 18px; }
.card:nth-child(4n + 4) { --lean: 2.6deg; --drop: 2px; }
.card img { width: 100%; height: auto; aspect-ratio: 5 / 6; object-fit: cover; background: var(--light-grey-300); filter: saturate(.9); }
.card__back { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 76px; padding: 10px 2px 12px; }
.card__back p { position: relative; z-index: 1; min-width: 0; }
.card__name { display: block; font: var(--t-display-xs); }
.card__city { display: block; margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--dark-grey-100); }
.card__rank { display: block; margin-top: 6px; font: var(--t-func-s); color: var(--interaction-teal); }
.card__stamp {
  flex: none; display: grid; place-items: center; width: 38px; height: 46px;
  color: var(--kasa-black); background: var(--overcast-200); border: 3px dotted var(--kasa-light);
}
.card__stamp svg { width: 12px; height: auto; }
.card__mark { position: absolute; right: 20px; top: -4px; width: 104px; height: auto; color: rgba(6, 19, 50, .34); stroke-width: 1; transform: rotate(-9deg); pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-10px) rotate(0deg); box-shadow: 0 1px 0 rgba(6, 19, 50, .06), 0 34px 56px -26px rgba(6, 19, 50, .5); }
}

/* A ruler along the bottom edge marks how far down the page the reader is. */
.ruler {
  position: fixed; left: 50%; bottom: 14px; z-index: 4; width: 260px; height: 40px; margin-left: -130px; overflow: hidden;
  color: #fff; mix-blend-mode: difference; pointer-events: none; opacity: 0; transition: opacity 500ms var(--out);
  -webkit-mask: linear-gradient(to right, transparent, #000 28%, #000 72%, transparent); mask: linear-gradient(to right, transparent, #000 28%, #000 72%, transparent);
}
.ruler.on { opacity: 1; }
.ruler__track { position: absolute; left: 50%; top: 0; height: 100%; will-change: transform; }
.ruler__track i { position: absolute; bottom: 0; width: 1px; height: 7px; background: currentColor; opacity: .5; }
.ruler__track i.major { height: 14px; opacity: 1; }
.ruler__track span { position: absolute; bottom: 20px; transform: translateX(-50%); font-size: 12px; line-height: 16px; white-space: nowrap; }
.ruler__needle { position: absolute; left: 50%; bottom: 0; width: 1px; height: 20px; background: currentColor; }
@media (hover: none), (pointer: coarse), (max-width: 760px) { .ruler { display: none; } }
@media print { .ruler { display: none; } }

/* The cities, passing. */
.cities { overflow: hidden; padding: clamp(8px, 2vh, 24px) 0 clamp(40px, 7vh, 72px); }
.cities__track { display: flex; width: max-content; will-change: transform; }
.cities__set { display: flex; align-items: center; flex: none; }
.cities__set span { font: 400 clamp(52px, 8.4vw, 96px)/1.2 var(--serif); letter-spacing: -.01em; white-space: nowrap; padding: 0 .28em; }
.cities__set svg { flex: none; width: clamp(18px, 2vw, 28px); height: auto; color: var(--overcast-300); }

/* The buildings. */
.index { padding: clamp(40px, 7vh, 72px) var(--gutter) clamp(96px, 16vh, 176px); }
.index__inner { max-width: 1280px; margin: 0 auto; }
.index__title { font: var(--t-display-m); margin-bottom: clamp(32px, 5vh, 56px); text-wrap: balance; }
.index__list { border-bottom: 1px solid var(--light-grey-300); }
.row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 8px 32px;
  padding: clamp(14px, 2.1vw, 26px) 0; border-top: 1px solid var(--light-grey-300);
  transition: opacity 320ms var(--out);
}
.row__name { font: var(--t-display-m); transition: transform 520ms var(--out); }
.row__city { font-size: 14px; line-height: 20px; color: var(--dark-grey-100); white-space: nowrap; transition: transform 520ms var(--out); }
.row__thumb { display: none; }

.peek {
  position: fixed; left: 0; top: 0; z-index: 5; pointer-events: none;
  width: clamp(220px, 21vw, 320px); aspect-ratio: 4 / 5;
  margin: calc(clamp(220px, 21vw, 320px) * -.62) 0 0 0;
  overflow: hidden; border-radius: 16px; background: var(--dark-grey-300);
  clip-path: inset(100% 0 0 0 round 16px);
  transition: clip-path 620ms var(--out);
}
.peek.open { clip-path: inset(0 round 16px); }
.peek img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.12); transition: opacity 360ms linear, transform 900ms var(--out); }
.peek img.on { opacity: 1; transform: none; }

@media (hover: hover) and (pointer: fine) {
  .index__list:hover .row { opacity: .28; }
  .index__list:hover .row:hover { opacity: 1; }
  .row:hover .row__name { transform: translateX(clamp(12px, 1.6vw, 28px)); }
  .row:hover .row__city { transform: translateX(-8px); }
}
@media (hover: none), (pointer: coarse) {
  .row { grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 2px 18px; }
  .row__thumb { display: block; grid-row: 1 / span 2; width: 64px; height: 80px; object-fit: cover; border-radius: 8px; background: var(--light-grey-300); }
  .row__name { align-self: end; }
  .row__city { grid-column: 2; align-self: start; white-space: normal; }
  .peek { display: none; }
}

/* The principles, one column each. */
.values { padding: clamp(120px, 18vh, 200px) var(--gutter); background: var(--kasa-light); }
.values__inner {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 40px clamp(40px, 7vw, 112px); align-items: start;
}
.values__title { font: var(--t-display-m); text-wrap: balance; }
.values__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(48px, 8vh, 88px) clamp(32px, 5vw, 72px); }
.values__team { max-width: 30ch; margin-top: 20px; font: var(--t-body); color: var(--dark-grey-100); text-wrap: pretty; }
.value__name { margin: 0; font: var(--t-display-s); text-wrap: balance; }
.value p { max-width: 32ch; margin-top: 16px; font: var(--t-body); text-wrap: pretty; }

/* The way in. */
.close { background: var(--kasa-black); color: var(--kasa-light); padding: clamp(96px, 16vh, 176px) var(--gutter) 0; }
.close__inner {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 8vw, 128px); align-items: end;
}
.arch { aspect-ratio: 4 / 5; max-width: 460px; overflow: hidden; border-radius: 48% 48% 0 0; background: var(--dark-grey-300); }
.arch img { width: 100%; height: 112%; object-fit: cover; transform: translateY(calc(var(--drift, 0) * -10.5%)); will-change: transform; }
.js .arch { clip-path: inset(100% 0 0 0); transition: clip-path 1.5s var(--out); }
.js .arch.in { clip-path: inset(0); }
.close__title { font: var(--t-display-l); max-width: 13em; text-wrap: balance; }
.close__text { max-width: 40ch; margin-top: 24px; font: var(--t-body-l); color: var(--light-grey-300); }
.close__go {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 24px;
  min-width: min(100%, 300px); min-height: 56px; margin-top: clamp(32px, 6vh, 56px); padding: 0 20px;
  border: 0; border-radius: 8px; color: var(--kasa-black); background: var(--kasa-light);
  font: var(--t-func);
  transition: background-color 240ms ease;
}
.close__go svg { width: 20px; height: 20px; transition: transform 320ms var(--out); }
.close__go:hover, .close__go:focus-visible { background: var(--overcast-200); }
.close__new { max-width: 46ch; margin-top: clamp(28px, 4vh, 40px); color: var(--light-grey-300); text-wrap: pretty; }
.close__new a { color: var(--kasa-light); text-underline-offset: 4px; text-decoration-thickness: 1px; transition: color 240ms ease; }
.close__new a:hover, .close__new a:focus-visible { color: var(--overcast-200); }
.close__go:hover svg, .close__go:focus-visible svg { transform: translate(3px, -3px); }

/* Signing in: one card in the middle of the screen, ruled like the report's own gate. */
.signin {
  width: min(100% - 32px, 500px); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: clamp(28px, 5vw, 48px);
  overflow: auto; overscroll-behavior: contain;
  border: 0; border-radius: 16px; color: var(--kasa-light); background: var(--kasa-black); color-scheme: dark;
  box-shadow: 0 0 0 1px rgba(205, 208, 214, .16), 0 48px 120px -40px rgba(0, 0, 0, .7);
  opacity: 0; transform: translateY(18px) scale(.98);
  transition: opacity 300ms var(--out), transform 560ms var(--out), overlay 560ms allow-discrete, display 560ms allow-discrete;
}
.signin[open] { opacity: 1; transform: none; }
.signin::backdrop {
  background: rgba(6, 19, 50, 0);
  -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0);
  transition: background-color 400ms var(--out), backdrop-filter 400ms var(--out), overlay 560ms allow-discrete, display 560ms allow-discrete;
}
.signin[open]::backdrop { background: rgba(6, 19, 50, .6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
@starting-style {
  .signin[open] { opacity: 0; transform: translateY(18px) scale(.98); }
  .signin[open]::backdrop { background: rgba(6, 19, 50, 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); }
}
.signin__close {
  position: absolute; top: 12px; right: 12px;
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; color: var(--light-grey-300); background: none;
  transition: color 240ms ease, background-color 240ms ease;
}
.signin__close svg { width: 18px; height: 18px; }
.signin__close:hover, .signin__close:focus-visible { color: var(--kasa-light); background: rgba(205, 208, 214, .12); }
.signin__title { padding-right: 36px; font: var(--t-display-s); text-wrap: balance; }
.signin__text { margin-top: 14px; color: var(--light-grey-300); line-height: 1.5; text-wrap: pretty; }
.signin__form { display: grid; margin-top: clamp(24px, 4vh, 36px); }
.signin__form > label { font-size: 14px; line-height: 20px; color: var(--light-grey-300); }
.signin__form input[type="email"], .signin__form input[type="password"] {
  width: 100%; height: 52px; margin-bottom: 22px; padding: 0;
  border: 0; border-bottom: 1px solid rgba(205, 208, 214, .45); border-radius: 0; outline: none;
  color: var(--kasa-light); background: none; caret-color: var(--overcast-300);
  font: 400 20px/1 var(--sans);
  transition: border-color 240ms ease, box-shadow 240ms ease;
}
.signin__form input[type="email"]:focus, .signin__form input[type="password"]:focus { border-color: var(--overcast-300); box-shadow: 0 1px 0 var(--overcast-300); }
.signin__form input[aria-invalid="true"], .signin__form input[aria-invalid="true"]:focus { border-color: var(--red-200); box-shadow: 0 1px 0 var(--red-200); }
.signin__form input:-webkit-autofill, .signin__form input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--kasa-light); caret-color: var(--overcast-300);
  -webkit-box-shadow: 0 0 0 1000px var(--kasa-black) inset; box-shadow: 0 0 0 1000px var(--kasa-black) inset;
}
.signin__agree { display: flex; align-items: flex-start; gap: 12px; margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--light-grey-300); }
.signin__agree input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--overcast-300); }
.signin__agree input:focus-visible { outline: 2px solid var(--overcast-300); outline-offset: 3px; }
.signin__agree input[aria-invalid="true"] { outline: 2px solid var(--red-200); outline-offset: 3px; }
.signin__agree a { text-underline-offset: 3px; }
.signin__error { min-height: 20px; margin-top: 14px; font-size: 14px; line-height: 20px; color: var(--red-200); }
.signin__go {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 56px; margin-top: 12px; padding: 0 20px;
  border: 0; border-radius: 8px; color: var(--kasa-black); background: var(--kasa-light);
  font: var(--t-func);
  transition: background-color 240ms ease;
}
.signin__go svg { width: 20px; height: 20px; transition: transform 320ms var(--out); }
.signin__go:hover, .signin__go:focus-visible { background: var(--overcast-200); }
.signin__go:hover svg, .signin__go:focus-visible svg { transform: translate(3px, -3px); }
.signin__go[disabled] { cursor: progress; }
.signin__form.is-checking .signin__go svg { animation: nudge 640ms var(--out) infinite alternate; }
.signin__form .is-wrong { animation: wrong 460ms var(--out); }
.signin__note { margin-top: 18px; font-size: 14px; line-height: 20px; color: var(--light-grey-300); }
@keyframes nudge { to { transform: translate(4px, -4px); } }
@keyframes wrong { 0%, 100% { transform: none; } 18% { transform: translateX(-9px); } 42% { transform: translateX(7px); } 66% { transform: translateX(-4px); } 84% { transform: translateX(2px); } }

/* Opening a report: the arch grows into a doorway that fills the screen. */
.door { position: fixed; z-index: 20; margin: 0; overflow: hidden; border-radius: 48% 48% 0 0; background: var(--dark-grey-300); pointer-events: none; will-change: transform; }
.door img { width: 100%; height: 112%; max-width: none; object-fit: cover; }
.wash { position: fixed; inset: 0; z-index: 21; background: var(--kasa-black); opacity: 0; pointer-events: none; }
.close__inner > div, .foot { transition: opacity 360ms var(--out); }
.opening .close__inner > div, .opening .foot { opacity: 0; }
.foot {
  max-width: 1280px; margin: clamp(72px, 12vh, 128px) auto 0; padding: 24px 0 max(28px, env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  border-top: 1px solid rgba(205, 208, 214, .25);
  font-size: 14px; line-height: 20px; color: var(--light-grey-300);
}
.foot > svg { width: 58px; height: auto; color: var(--kasa-light); }

@media (max-width: 760px) {
  .wall { height: calc(100svh + 45vh); }
  .wall__grid { grid-template-columns: repeat(3, 1fr); gap: 8px; inset: -3% -6%; }
  .wall__track { gap: 8px; }
  .wall__col:nth-child(n + 4) { display: none; }
  .tile { aspect-ratio: 3 / 5; }
  .wall__shade {
    background:
      linear-gradient(to top, rgba(6, 19, 50, .97) 0%, rgba(6, 19, 50, .86) 34%, rgba(6, 19, 50, .1) 74%),
      linear-gradient(to bottom, rgba(6, 19, 50, .62) 0%, rgba(6, 19, 50, 0) 20%),
      rgba(6, 19, 50, .2);
  }
  /* Narrow screens let the headline wrap where it balances, and fade it in whole. */
  .wall__title { font-size: clamp(36px, 10.4vw, 46px); text-wrap: balance; }
  .wall__title .line, .wall__title .line > span { display: inline; overflow: visible; padding: 0; margin: 0; }
  .js .wall__title .line > span { animation: none; }
  .js .wall__title { animation: fade-up 1s var(--out) both; animation-delay: 380ms; }
  .wall__copy { bottom: 116px; }
  .wall__cue { right: 50%; bottom: 14px; width: 96px; margin-right: -48px; }
  .wall__ring text { font-size: 11px; }
  .bar__mark span { display: none; }
  /* A narrow bar keeps the short name; the rest stays for screen readers. */
  .enter__more { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .close__go { width: 100%; }
  .brief__notes { grid-template-columns: 1fr; }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lead, .worth { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding: 40px var(--gutter); border-radius: 0; }
  .facts li { grid-template-columns: 1fr; gap: 8px; align-items: start; }
  .worth { margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding: 40px var(--gutter); border-radius: 0; }
  .brief__lede { font: var(--t-display-xs); }
  .record__title, .cases__title, .voices__title, .rack__title, .index__title, .values__title, .close__title { font: var(--t-display-s); }
  .shift__title, .worth__title, .cases__label, .hotel__name, .value__name, .voice--lead p, .row__name { font: var(--t-display-xs); }
  .figures strong, .apt__figure { font-size: 40px; }
  .facts strong { font-size: 32px; }
  .wall__lede, .record__text, .cases__text, .lead__text, .close__text, .apt__claim, .worth__result, .facts span, .figures span { font: var(--t-body); }
  .worth__figure { font-size: 56px; }
  .values__inner { grid-template-columns: 1fr; }
  .cases__head, .apts, .cases__group--split { grid-template-columns: 1fr; }
  .voices__inner, .voices__list { grid-template-columns: 1fr; }
  .voices__list { grid-column: auto; }
  .cases__aside { grid-column: auto; }
  .apt__facts div { grid-template-columns: 1fr; gap: 0; }
  .hotel { grid-template-columns: 1fr; gap: 24px; }
  .hotel img { aspect-ratio: 4 / 3; }
  .hotel__nums { gap: 16px 32px; }
  .hotel__nums span { max-width: 9.5em; }
  .hotel__nums strong { font-size: 40px; }
  .shift { grid-template-columns: 1fr; }
  .shift__head { grid-row: auto; margin-bottom: 32px; }
  .shift__row { grid-template-columns: minmax(0, 1fr) auto; gap: 0 16px; }
  .shift__scale { grid-column: 1 / -1; grid-row: 2; }
  .shift__axis { grid-column: 1; margin: 8px 0 0; }
  .values__list { grid-template-columns: 1fr; }
  /* On a phone the rack is swiped by hand. */
  .rack { padding-left: 0; padding-right: 0; }
  .rack__title { padding: 0 var(--gutter); }
  .rack__track { width: auto; overflow-x: auto; padding-left: var(--gutter); padding-right: var(--gutter); scroll-snap-type: x proximity; scrollbar-width: none; }
  .rack__track::-webkit-scrollbar { display: none; }
  .card { width: 62vw; scroll-snap-align: center; }
  .close__inner { grid-template-columns: 1fr; align-items: start; }
  .arch { max-width: 78%; border-radius: 46% 46% 0 0; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .wall { height: auto; }
  .wall__grid, .wall__copy, .wall__cue { transform: none; opacity: 1; }
  .js .brief__lede .w { color: inherit; }
  .js .arch { clip-path: none; }
  .js .shift__line { transform: none; }
  .js .shift__dot--to { opacity: 1; }
  .rises [data-rise] { opacity: 1; transform: none; }
  .rack__track { transform: none !important; }
}