/* KoolRooms components - the modules Houzez does not have.
   Every value comes from KoolRooms Tallinn.dc.html.
   ------------------------------------------------------------------ */

/* An author-level `display` beats the UA sheet's [hidden] rule, and the
   components below set display:flex on elements that JS hides with the hidden
   attribute (cards while filtering, wizard stages, the dialogs). These are the
   only !important rules in this file, and they exist to make `hidden` mean
   hidden. Deliberately scoped to KoolRooms components: a blanket [hidden] rule
   would also outrank the inline styles Houzez's own scripts use to reveal
   elements. */
.kr-card[hidden],
.kr-book__stage[hidden],
.kr-empty[hidden],
.kr-photogrid[hidden],
.kr-lightbox[hidden],
.kr-gallery[hidden],
.kr-sticky-cta[hidden],
.kr-more[hidden],
[data-kr-form-error][hidden] { display: none !important; }

/* ---- Shared primitives ---- */

.kr-h2 {
  font-family: var(--kr-font-display);
  font-weight: 700;
  font-size: var(--kr-h2-section);
  letter-spacing: var(--kr-ls-h2);
  line-height: var(--kr-lh-1);
  margin: 0;
  text-wrap: balance;
}

.kr-h3 {
  font-family: var(--kr-font-display);
  font-weight: 700;
  font-size: var(--kr-fs-28);
  letter-spacing: var(--kr-ls-sm);
  margin: 0;
}

.kr-kicker {
  font-weight: 700;
  letter-spacing: var(--kr-ls-kicker);
  text-transform: uppercase;
  font-size: var(--kr-fs-13);
  color: var(--kr-accent-deep);
  margin: 0;
}

.kr-label {
  display: block;
  font-size: var(--kr-fs-12);
  font-weight: 700;
  letter-spacing: var(--kr-ls-caps);
  text-transform: uppercase;
  color: var(--kr-muted);
}

.kr-lead {
  font-size: var(--kr-fs-18);
  line-height: var(--kr-lh-body);
  color: var(--kr-body);
  max-width: 640px;
  margin: var(--kr-sp-7) 0 0;
  text-wrap: pretty;
}

.kr-note {
  font-size: var(--kr-fs-13);
  color: var(--kr-muted);
  margin: var(--kr-sp-5) 0 0;
}

.kr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kr-sp-3);
  border: 0;
  cursor: pointer;
  border-radius: var(--kr-r-control);
  font-family: var(--kr-font);
  font-weight: 700;
  font-size: var(--kr-fs-15);
  padding: 12px 20px;
  text-decoration: none;
  transition: background-color var(--kr-t-fast), color var(--kr-t-fast);
}

.kr-btn--accent { background: var(--kr-accent); color: var(--kr-accent-on); }
.kr-btn--accent:hover,
.kr-btn--accent:focus { background: var(--kr-accent-hover); color: var(--kr-accent-on); }

.kr-btn--dark { background: var(--kr-ink); color: var(--kr-bg); }
.kr-btn--dark:hover,
.kr-btn--dark:focus { background: var(--kr-ink-hover); color: var(--kr-bg); }

.kr-btn--ghost {
  background: transparent;
  color: var(--kr-ink);
  border: var(--kr-bw-mid) solid var(--kr-ink);
}
.kr-btn--ghost:hover,
.kr-btn--ghost:focus { background: var(--kr-ink); color: var(--kr-bg); }

/* Pills: the semester and street filters. */
.kr-chips { display: flex; flex-wrap: wrap; gap: var(--kr-sp-2); }

.kr-pill {
  cursor: pointer;
  padding: 8px 14px;
  border-radius: var(--kr-r-control);
  font-family: var(--kr-font);
  font-size: var(--kr-fs-14);
  font-weight: 600;
  border: var(--kr-bw-mid) solid var(--kr-line-input);
  background: transparent;
  color: var(--kr-ink);
  transition: background-color var(--kr-t-fast), border-color var(--kr-t-fast), color var(--kr-t-fast);
}

.kr-pill.is-active {
  background: var(--kr-ink);
  border-color: var(--kr-ink);
  color: var(--kr-bg);
}

/* Availability chips on cards and semester cards. */
.kr-chip {
  font-size: var(--kr-fs-12);
  font-weight: 700;
  padding: 4px 9px;
  border-radius: var(--kr-r-control);
  list-style: none;
}

.kr-chip--free    { background: var(--kr-free-bg);    color: var(--kr-free-fg); }
.kr-chip--partial { background: var(--kr-partial-bg); color: var(--kr-partial-fg); }
.kr-chip--taken   { background: var(--kr-taken-bg);   color: var(--kr-taken-fg); }

.kr-badge {
  position: absolute;
  font-size: var(--kr-fs-12);
  font-weight: 700;
  padding: 5px 9px;
  border-radius: var(--kr-r-control);
  z-index: 1;
}

.kr-badge--featured { left: 12px; top: 12px;    background: var(--kr-ink); color: var(--kr-bg); }
.kr-badge--avail    { left: 12px; bottom: 12px; background: var(--kr-bg);  color: var(--kr-ink); }
.kr-badge--avail.is-now   { background: var(--kr-free-bg);    color: var(--kr-free-fg); }
.kr-badge--avail.is-later { background: var(--kr-partial-bg); color: var(--kr-partial-fg); }
.kr-badge--avail.is-taken { background: var(--kr-taken-bg);   color: var(--kr-taken-fg); }
.kr-badge--count {
  right: 12px;
  bottom: 12px;
  font-weight: 600;
  background: var(--kr-overlay);
  color: var(--kr-bg);
}

/* ---- Hero ---- */

.kr-hero { max-width: var(--kr-container); margin: 0 auto; padding: var(--kr-sp-19) var(--kr-gutter) var(--kr-sp-7); }

.kr-hero__title {
  font-family: var(--kr-font-display);
  font-weight: 700;
  font-size: var(--kr-h1-home);
  line-height: var(--kr-lh-tight);
  letter-spacing: var(--kr-ls-h1-home);
  margin: var(--kr-sp-8) 0 0;
  text-wrap: balance;
}

.kr-hero__accent { color: var(--kr-accent); }

.kr-hero__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: var(--kr-sp-14);
  align-items: end;
  margin-top: var(--kr-sp-15);
}

.kr-hero__sub {
  font-size: var(--kr-fs-20);
  line-height: var(--kr-lh-lead);
  color: var(--kr-body);
  max-width: 560px;
  margin: 0;
  text-wrap: pretty;
}

.kr-hero__side .kr-label { margin-bottom: var(--kr-sp-4); }

.kr-hero__count {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--kr-sp-3) var(--kr-sp-8);
  margin-top: var(--kr-sp-9);
}

.kr-hero__count-n {
  display: flex;
  align-items: baseline;
  gap: var(--kr-sp-4);
  margin: 0;
  font-family: var(--kr-font-display);
  font-weight: 700;
  font-size: var(--kr-fs-48);
  line-height: var(--kr-lh-1);
  letter-spacing: -.03em;
}

.kr-hero__count-label {
  font-family: var(--kr-font);
  font-weight: 400;
  font-size: var(--kr-fs-16);
  color: var(--kr-body);
  letter-spacing: 0;
}

.kr-hero__media {
  margin-top: var(--kr-sp-17);
  border-radius: var(--kr-r-surface);
  overflow: hidden;
  aspect-ratio: 21 / 9;
  min-height: 260px;
  /* With a ratio set, min-height drives the width: 260px at 21/9 asks for
     607px, which overflowed the page between roughly 500px and 650px wide.
     The cap wins over the ratio, so the box just gets shorter than 21/9 there. */
  max-width: 100%;
  background: var(--kr-line-strong);
  position: relative;
}

.kr-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.kr-hero__pill {
  position: absolute;
  left: var(--kr-sp-9);
  bottom: var(--kr-sp-9);
  display: flex;
  align-items: center;
  gap: var(--kr-sp-5);
  background: var(--kr-glass-2);
  color: var(--kr-ink);
  padding: 10px 14px 10px 16px;
  border-radius: var(--kr-r-control);
  font-size: var(--kr-fs-14);
  font-weight: 600;
  text-decoration: none;
}

.kr-hero__pill:hover { background: var(--kr-bg); color: var(--kr-ink); }
.kr-hero__pill-price { font-family: var(--kr-font-display); font-weight: 700; font-size: var(--kr-fs-16); }
.kr-hero__pill-arrow { color: var(--kr-accent); }

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

.kr-usp {
  max-width: var(--kr-container);
  margin: 0 auto;
  padding: var(--kr-sp-14) var(--kr-gutter) var(--kr-sp-3);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.kr-usp__item {
  padding: var(--kr-sp-10) var(--kr-sp-9);
  border-top: var(--kr-bw-mid) solid var(--kr-ink);
  border-bottom: var(--kr-bw-mid) solid var(--kr-ink);
}

.kr-usp__item:first-child { padding-left: 0; }
.kr-usp__item:last-child  { padding-right: 0; }

.kr-usp__n {
  font-family: var(--kr-font-display);
  font-weight: 700;
  font-size: var(--kr-fs-44);
  letter-spacing: -.03em;
  line-height: var(--kr-lh-1);
  margin: 0;
}

.kr-usp__t { margin: var(--kr-sp-3) 0 0; font-size: var(--kr-fs-15); color: var(--kr-body); }

/* ---- Rooms: filters and grid ---- */

.kr-rooms { max-width: var(--kr-container); margin: 0 auto; padding: var(--kr-sp-20) var(--kr-gutter) var(--kr-sp-10); }

.kr-rooms__head { display: flex; align-items: baseline; gap: var(--kr-sp-7); flex-wrap: wrap; }
.kr-rooms__count { font-size: var(--kr-fs-18); color: var(--kr-muted); margin: 0; }
body.kr .kr-rooms__count-label { font-size: var(--kr-fs-14); }

/* A booked room stays on the grid, reading as inventory rather than as an
   offer: the photo steps back, the card itself stays fully legible. */
/* A booked room stays on the grid, because the grid is the inventory - but it
   has to read as unavailable at a glance, not on inspection. The photo goes
   grey and steps back, the text drops to the "taken" ink, and the card sits on
   the taken ground so it reads as a different class of thing from its
   neighbours. Two things stay at full strength: the availability badge, which
   is the reason the card looks that way, and the per-semester chips, which are
   the actionable part - they show which semesters the room *is* free. */
body.kr .kr-card.is-booked {
  background: var(--kr-taken-bg);
  border-color: var(--kr-line-input);
}

body.kr .kr-card.is-booked .kr-card__media {
  background: var(--kr-taken-bg);
}

body.kr .kr-card.is-booked .kr-card__media img {
  opacity: .4;
  filter: grayscale(1);
}

body.kr .kr-card.is-booked .kr-card__title,
body.kr .kr-card.is-booked .kr-card__apartment,
body.kr .kr-card.is-booked .kr-card__meta,
body.kr .kr-card.is-booked .kr-card__price,
body.kr .kr-card.is-booked .kr-card__per {
  color: var(--kr-taken-fg);
}

/* .kr-badge--avail.is-taken is drawn on the taken ground, which is now the
   card's own background - so on a booked card the badge would vanish into it.
   Give it the strongest treatment on the card instead: it is the one label
   that has to be unmissable. */
body.kr .kr-card.is-booked .kr-badge--avail.is-taken {
  background: var(--kr-ink);
  color: var(--kr-bg);
}

/* Same collision for the per-semester "taken" chip; an inset edge keeps it a
   distinct object without adding another colour. */
body.kr .kr-card.is-booked .kr-chip--taken {
  background: transparent;
  box-shadow: inset 0 0 0 var(--kr-bw) var(--kr-line-input);
}

/* A "Featured" flag on something nobody can rent is just noise. */
body.kr .kr-card.is-booked .kr-badge--featured,
body.kr .kr-card.is-booked .kr-badge--count {
  display: none;
}

/* The hover lift stays - the card is still a link to the room - but it should
   not brighten back up on the way past. */
body.kr .kr-card.is-booked:hover .kr-card__media img {
  opacity: .4;
  filter: grayscale(1);
}

@media (prefers-contrast: more) {
  body.kr .kr-card.is-booked .kr-card__media img { opacity: .6; }
}

.kr-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kr-sp-5) var(--kr-sp-10);
  align-items: flex-end;
  margin-top: var(--kr-sp-11);
  padding: var(--kr-sp-8) var(--kr-sp-9);
  background: var(--kr-surface);
  border: var(--kr-bw) solid var(--kr-line);
  border-radius: var(--kr-r-surface);
}

.kr-filters__group { display: flex; flex-direction: column; gap: var(--kr-sp-3); }
/* Availability and the selects share one full-width row inside the filter
   bar: chips left, selects right. `space-between` does the pushing, so there
   is no breakpoint to guess - when the row is too narrow for both they simply
   wrap and both land on the same left rail, which is what an `auto` margin
   got wrong before (it stranded the selects at the right with a hole beside
   them). */
.kr-filters__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--kr-sp-5) var(--kr-sp-10);
  flex: 1 1 100%;
}

/* No `margin-left: auto` here. The three blocks add up to ~1240px inside a
   1200px container, so the selects wrapped to a second row at every width and
   the auto margin then stranded them at the far right with a hole to their
   left. Flowing from the start keeps one left rail at every width. */
.kr-filters__selects { display: flex; gap: var(--kr-sp-5); flex-wrap: wrap; }
.kr-filters__selects .kr-label { display: flex; flex-direction: column; gap: var(--kr-sp-3); }

.kr-filters select,
.kr-book select,
.kr-book input,
.kr-book textarea {
  font-family: var(--kr-font);
  font-size: var(--kr-fs-14);
  font-weight: 600;
  padding: 9px 12px;
  border-radius: var(--kr-r-control);
  border: var(--kr-bw-mid) solid var(--kr-line-input);
  background: var(--kr-bg);
  color: var(--kr-ink);
  text-transform: none;
  letter-spacing: 0;
}

.kr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--kr-sp-9);
  margin-top: var(--kr-sp-10);
}

.kr-card {
  background: var(--kr-surface);
  border: var(--kr-bw) solid var(--kr-line);
  border-radius: var(--kr-r-surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--kr-t-fast), box-shadow var(--kr-t-fast);
}

.kr-card:hover { transform: translateY(-3px); box-shadow: var(--kr-shadow-card-hover); }

@media (prefers-reduced-motion: reduce) {
  .kr-card { transition: none; }
  .kr-card:hover { transform: none; }
}

body.kr .kr-card__link { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: var(--kr-ink); }
.kr-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--kr-line-strong); }
.kr-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.kr-card__body {
  padding: var(--kr-sp-7) var(--kr-sp-8) var(--kr-sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--kr-sp-4);
  flex: 1;
}

.kr-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--kr-sp-5); flex-wrap: wrap; }

.kr-card__title {
  font-family: var(--kr-font-display);
  font-weight: 700;
  font-size: var(--kr-fs-21);
  letter-spacing: var(--kr-ls-sm);
  margin: 0;
}

.kr-card__apartment { color: var(--kr-muted); font-weight: 500; }

.kr-card__price {
  font-family: var(--kr-font-display);
  font-weight: 700;
  font-size: var(--kr-fs-21);
  margin: 0;
  white-space: nowrap;
}

.kr-card__per { font-family: var(--kr-font); font-size: var(--kr-fs-13); color: var(--kr-muted); font-weight: 500; }
.kr-card__meta { color: var(--kr-muted); font-size: var(--kr-fs-14); margin: 0; }

.kr-card__semesters {
  display: flex;
  gap: var(--kr-sp-2);
  flex-wrap: wrap;
  margin: auto 0 0;
  padding: var(--kr-sp-2) 0 0;
  list-style: none;
}

.kr-empty {
  margin-top: var(--kr-sp-10);
  padding: var(--kr-sp-14) var(--kr-gutter);
  border: var(--kr-bw-mid) dashed var(--kr-line-input);
  border-radius: var(--kr-r-surface);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--kr-sp-6);
  color: var(--kr-body);
  font-size: var(--kr-fs-18);
}

.kr-legend {
  display: flex;
  gap: var(--kr-sp-7);
  flex-wrap: wrap;
  margin: var(--kr-sp-8) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--kr-fs-13);
  color: var(--kr-muted);
}

.kr-legend li { display: inline-flex; align-items: center; gap: var(--kr-sp-2); }
.kr-legend__dot { width: 10px; height: 10px; border-radius: var(--kr-r-dot); }
.kr-legend__dot--free    { background: var(--kr-free-bg);    border: 1px solid var(--kr-free-fg); }
.kr-legend__dot--partial { background: var(--kr-partial-bg); border: 1px solid var(--kr-partial-fg); }
.kr-legend__dot--taken   { background: var(--kr-taken-bg);   border: 1px solid var(--kr-muted-2); }

/* ---- Map ---- */

.kr-map-section { max-width: var(--kr-container); margin: 0 auto; padding: var(--kr-sp-20) var(--kr-gutter) var(--kr-sp-10); }

.kr-map {
  position: relative;
  aspect-ratio: 1.6;
  margin-top: var(--kr-sp-12);
  border-radius: var(--kr-r-surface);
  background: var(--kr-surface);
  border: var(--kr-bw) solid var(--kr-line);
  overflow: hidden;
  background-image: radial-gradient(var(--kr-line-strong) 1px, transparent 1px);
  background-size: 22px 22px;
}

.kr-map__controls { display: flex; gap: var(--kr-sp-2); margin-top: var(--kr-sp-10); }

.kr-map__pin {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 7px;
  transform: translate(-7px, -50%);
  transition: left var(--kr-t-base), top var(--kr-t-base);
}

/* Each pin carries both zoom levels as custom properties; switching view is a
   class change, so nothing is recalculated in JavaScript. */
.kr-map.is-near .kr-map__pin { left: var(--x-near); top: var(--y-near); }
.kr-map.is-wide .kr-map__pin { left: var(--x-wide); top: var(--y-wide); }

/* TalTech only exists on the zoomed-out view. */
.kr-map.is-near .kr-map__pin--wide-only { display: none; }

@media (prefers-reduced-motion: reduce) {
  .kr-map__pin { transition: none; }
}

.kr-map__dot {
  width: 14px;
  height: 14px;
  border-radius: var(--kr-r-dot);
  flex: none;
  background: var(--kr-accent);
  box-shadow: 0 0 0 3px var(--kr-surface), 0 0 0 4.5px var(--kr-accent);
}

.kr-map__pin-label { display: flex; flex-direction: column; line-height: 1.15; }
.kr-map__pin-name { font-size: var(--kr-fs-13); font-weight: 700; color: var(--kr-ink); white-space: nowrap; }
.kr-map__pin-sub  { font-size: var(--kr-fs-11); color: var(--kr-muted); white-space: nowrap; }

.kr-map__legend {
  position: absolute;
  right: var(--kr-sp-7);
  bottom: var(--kr-sp-6);
  display: flex;
  gap: var(--kr-sp-5);
  font-size: var(--kr-fs-12);
  color: var(--kr-body);
  background: var(--kr-surface);
  padding: 6px 10px;
  border-radius: var(--kr-r-control);
  border: var(--kr-bw) solid var(--kr-line);
}

.kr-map__legend > span { display: inline-flex; align-items: center; gap: 5px; }
.kr-map__key { width: 9px; height: 9px; border-radius: var(--kr-r-dot); }
.kr-map__key--flat { background: var(--kr-accent); }
.kr-map__key--uni  { background: var(--kr-green); }

.kr-table-wrap {
  margin-top: var(--kr-sp-10);
  background: var(--kr-surface);
  border: var(--kr-bw) solid var(--kr-line);
  border-radius: var(--kr-r-surface);
  padding: var(--kr-sp-3) var(--kr-sp-9) var(--kr-sp-5);
  overflow-x: auto;
}

.kr-table { width: 100%; border-collapse: collapse; font-size: var(--kr-fs-14); }

.kr-table th {
  text-align: right;
  padding: var(--kr-sp-6) var(--kr-sp-3) var(--kr-sp-4);
  font-size: var(--kr-fs-12);
  font-weight: 700;
  letter-spacing: var(--kr-ls-caps);
  text-transform: uppercase;
  color: var(--kr-muted);
  border-bottom: var(--kr-bw-mid) solid var(--kr-ink);
  vertical-align: bottom;
}

.kr-table thead th:first-child { text-align: left; padding-left: 0; }

.kr-table tbody th {
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--kr-fs-14);
  color: var(--kr-ink);
  padding: var(--kr-sp-5) var(--kr-sp-3) var(--kr-sp-5) 0;
  border-bottom: var(--kr-bw) solid var(--kr-line);
}

.kr-table__sub { color: var(--kr-muted); font-weight: 500; }

.kr-table td {
  padding: var(--kr-sp-5) var(--kr-sp-3);
  border-bottom: var(--kr-bw) solid var(--kr-line);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---- How renting works ---- */

.kr-steps { background: var(--kr-green); color: var(--kr-bg); margin-top: var(--kr-sp-20); }

.kr-steps__inner {
  max-width: var(--kr-container);
  margin: 0 auto;
  padding: var(--kr-sp-20) var(--kr-gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--kr-sp-14);
  align-items: start;
}

.kr-steps__lead {
  font-size: var(--kr-fs-17);
  line-height: var(--kr-lh-body);
  color: var(--kr-green-soft);
  margin: var(--kr-sp-8) 0 var(--kr-sp-10);
  max-width: 420px;
  text-wrap: pretty;
}

.kr-steps__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--kr-sp-1); }

.kr-steps__item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--kr-sp-7);
  padding: var(--kr-sp-8) 0;
  border-top: 1px solid rgba(244, 244, 240, .18);
}

.kr-steps__item:last-child { border-bottom: 1px solid rgba(244, 244, 240, .18); }

.kr-steps__n {
  font-family: var(--kr-font-display);
  font-weight: 700;
  font-size: var(--kr-fs-36);
  line-height: var(--kr-lh-1);
  color: var(--kr-accent);
}

.kr-steps__title { font-weight: 700; font-size: var(--kr-fs-18); margin: 0; }
.kr-steps__text  { color: var(--kr-green-soft); margin: var(--kr-sp-1) 0 0; line-height: var(--kr-lh-lead); }

/* ---- Reviews ---- */

.kr-reviews { max-width: var(--kr-container); margin: 0 auto; padding: var(--kr-sp-20) var(--kr-gutter) var(--kr-sp-21); }

.kr-reviews__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--kr-sp-9);
  margin-top: var(--kr-sp-11);
}

.kr-review {
  margin: 0;
  background: var(--kr-surface);
  border: var(--kr-bw) solid var(--kr-line);
  border-radius: var(--kr-r-surface);
  padding: var(--kr-sp-10);
  display: flex;
  flex-direction: column;
  gap: var(--kr-sp-8);
}

.kr-review blockquote {
  margin: 0;
  font-family: var(--kr-font-display);
  font-size: var(--kr-fs-20);
  line-height: var(--kr-lh-quote);
  letter-spacing: -.01em;
  text-wrap: pretty;
}

.kr-review figcaption { font-size: var(--kr-fs-14); color: var(--kr-muted); margin-top: auto; }
.kr-review__name { font-weight: 700; color: var(--kr-ink); }

/* ---- Included in the rent ---- */

.kr-included__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--kr-sp-4);
  margin: var(--kr-sp-7) 0 0;
  padding: 0;
  list-style: none;
}

.kr-included__item {
  display: flex;
  gap: var(--kr-sp-4);
  align-items: flex-start;
  padding: var(--kr-sp-6);
  background: var(--kr-surface);
  border: var(--kr-bw) solid var(--kr-line);
  border-radius: var(--kr-r-control);
}

.kr-included__tick  { color: var(--kr-free-fg); font-weight: 700; }
.kr-included__title { display: block; font-weight: 700; }
.kr-included__text  { display: block; font-size: var(--kr-fs-14); color: var(--kr-muted); }

/* ---- Distances ---- */

.kr-distances__list { margin: var(--kr-sp-7) 0 0; padding: 0; list-style: none; border-top: var(--kr-bw-mid) solid var(--kr-ink); }

.kr-distances__row {
  display: flex;
  justify-content: space-between;
  gap: var(--kr-sp-7);
  padding: var(--kr-sp-5) 0;
  border-bottom: var(--kr-bw) solid var(--kr-line);
}

.kr-distances__name  { font-weight: 600; }
.kr-distances__value { color: var(--kr-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kr-distances__mode  { color: var(--kr-muted-3); }

/* ---- FAQ ---- */

.kr-faq { display: flex; flex-direction: column; gap: var(--kr-sp-13); }

.kr-faq__group-title {
  font-family: var(--kr-font);
  font-size: var(--kr-fs-13);
  font-weight: 700;
  letter-spacing: var(--kr-ls-kicker);
  text-transform: uppercase;
  color: var(--kr-accent-deep);
  margin: 0 0 var(--kr-sp-3);
}

.kr-faq__list { display: flex; flex-direction: column; border-top: var(--kr-bw-mid) solid var(--kr-ink); }
.kr-faq__item { border-bottom: var(--kr-bw) solid var(--kr-line-strong); }
.kr-faq__q { margin: 0; }

.kr-faq__trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--kr-sp-7);
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  padding: var(--kr-sp-8) 0;
  font-family: var(--kr-font-display);
  font-weight: 700;
  font-size: var(--kr-fs-20);
  letter-spacing: var(--kr-ls-xs);
  color: var(--kr-ink);
}

.kr-faq__trigger:hover { color: var(--kr-accent); }
.kr-faq__icon { color: var(--kr-accent); font-size: var(--kr-fs-26); line-height: 1; flex: none; }

.kr-faq__a p {
  margin: 0 0 var(--kr-sp-9);
  font-size: var(--kr-fs-17);
  line-height: var(--kr-lh-copy);
  color: var(--kr-body);
  max-width: 720px;
  text-wrap: pretty;
}

/* ---- Request wizard ---- */

.kr-book { max-width: var(--kr-container-narrow); margin: 0 auto; }

.kr-book__steps { list-style: none; margin: var(--kr-sp-11) 0 0; padding: 0; display: flex; gap: var(--kr-sp-2); flex-wrap: wrap; }

.kr-book__step {
  display: flex;
  align-items: center;
  gap: var(--kr-sp-3);
  padding: 8px 14px 8px 8px;
  border-radius: var(--kr-r-control);
  font-size: var(--kr-fs-14);
  font-weight: 700;
  background: var(--kr-hover-bg);
  color: var(--kr-muted-2);
}

.kr-book__step.is-active { background: var(--kr-ink); color: var(--kr-bg); }
.kr-book__step.is-done   { background: var(--kr-free-bg); color: var(--kr-free-fg); }

.kr-book__step-n {
  width: 24px;
  height: 24px;
  border-radius: var(--kr-r-dot);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--kr-fs-12);
  background: var(--kr-line-input);
  color: var(--kr-ink);
}

.kr-book__step.is-active .kr-book__step-n { background: var(--kr-accent); color: var(--kr-accent-on); }
.kr-book__step.is-done .kr-book__step-n   { background: var(--kr-free-fg); color: var(--kr-bg); }

.kr-book__panel {
  margin-top: var(--kr-sp-10);
  background: var(--kr-surface);
  border: var(--kr-bw) solid var(--kr-line);
  border-radius: var(--kr-r-surface);
  padding: var(--kr-sp-11);
}

.kr-book__stage { display: flex; flex-direction: column; gap: var(--kr-sp-11); }
.kr-book__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--kr-sp-7); }
.kr-book__dates  { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--kr-sp-7); }
.kr-book__intro  { font-size: var(--kr-fs-15); color: var(--kr-body); line-height: var(--kr-lh-body); margin: 0; }

.kr-field { display: flex; flex-direction: column; gap: var(--kr-sp-3); font-weight: 700; font-size: var(--kr-fs-15); }
.kr-field__label { font-weight: 700; }
.kr-field__error { font-size: var(--kr-fs-13); font-weight: 500; color: var(--kr-error); min-height: 1em; }

.kr-book input,
.kr-book select,
.kr-book textarea { font-size: var(--kr-fs-15); padding: 12px 14px; border-radius: var(--kr-r-control); font-weight: 500; width: 100%; }
.kr-book textarea { resize: vertical; }
.kr-book .has-error { border-color: var(--kr-error); }

.kr-book__semester-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--kr-sp-4); }
.kr-book__semesters { border: 0; margin: 0; padding: 0; }

.kr-semester-option {
  cursor: pointer;
  padding: var(--kr-sp-6) var(--kr-sp-7);
  border-radius: var(--kr-r-surface);
  border: var(--kr-bw-mid) solid var(--kr-line-input);
  display: block;
}

.kr-semester-option:has(input:checked) { background: var(--kr-ink); border-color: var(--kr-ink); color: var(--kr-bg); }
.kr-semester-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.kr-semester-option__label { display: block; font-weight: 700; font-size: var(--kr-fs-16); }
.kr-semester-option__dates { display: block; font-size: var(--kr-fs-13); opacity: .8; margin-top: 2px; }

.kr-book__nav { display: flex; justify-content: space-between; gap: var(--kr-sp-5); flex-wrap: wrap; }
.kr-book__nav--end   { justify-content: flex-end; }
.kr-book__nav--start { justify-content: flex-start; }

.kr-book__review { display: grid; gap: var(--kr-sp-2); font-size: var(--kr-fs-15); }
.kr-book__review-row { display: flex; justify-content: space-between; gap: var(--kr-sp-5); }
.kr-book__review-row span { color: var(--kr-body); }

.kr-book__next ol { margin: var(--kr-sp-4) 0 0; padding: 0 0 0 var(--kr-sp-9); display: grid; gap: var(--kr-sp-2); color: var(--kr-body); line-height: var(--kr-lh-body); }

.kr-check { display: flex; gap: var(--kr-sp-5); align-items: flex-start; cursor: pointer; font-size: var(--kr-fs-15); line-height: var(--kr-lh-lead); font-weight: 400; }
.kr-check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--kr-accent); flex: none; }

.kr-book__done { align-items: flex-start; }

.kr-book__tick {
  width: 56px;
  height: 56px;
  border-radius: var(--kr-r-dot);
  background: var(--kr-free-bg);
  color: var(--kr-free-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--kr-fs-26);
  font-weight: 700;
}

.kr-book__sent-title {
  font-family: var(--kr-font-display);
  font-weight: 700;
  font-size: clamp(32px, 5vw, 52px);
  letter-spacing: var(--kr-ls-h2);
  line-height: var(--kr-lh-1);
  margin: 0;
}

.kr-book__sent-text { font-size: var(--kr-fs-18); line-height: var(--kr-lh-body); color: var(--kr-body); margin: 0; max-width: 560px; text-wrap: pretty; }

/* Honeypot: off-screen, never announced. */
.kr-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Cost calculator ---- */

.kr-calc {
  position: sticky;
  top: var(--kr-sticky-top);
  background: var(--kr-surface);
  border: var(--kr-bw) solid var(--kr-line);
  border-radius: var(--kr-r-surface);
  overflow: hidden;
}

.kr-calc__head {
  background: var(--kr-green);
  color: var(--kr-bg);
  padding: var(--kr-sp-8) var(--kr-sp-10);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--kr-sp-5);
}

.kr-calc__title { font-family: var(--kr-font-display); font-weight: 700; font-size: var(--kr-fs-20); letter-spacing: var(--kr-ls-sm); }
.kr-calc__price { font-size: var(--kr-fs-13); color: var(--kr-green-soft); }
.kr-calc__body  { padding: var(--kr-sp-9) var(--kr-sp-10); display: flex; flex-direction: column; gap: var(--kr-sp-8); }
.kr-calc__options { display: flex; flex-direction: column; gap: var(--kr-sp-2); }

.kr-calc__option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--kr-sp-5);
  cursor: pointer;
  padding: 11px 14px;
  border-radius: var(--kr-r-control);
  font-size: var(--kr-fs-15);
  font-weight: 600;
  text-align: left;
  border: var(--kr-bw-mid) solid var(--kr-line-input);
  background: transparent;
  color: var(--kr-ink);
}

.kr-calc__option.is-active { background: var(--kr-ink); border-color: var(--kr-ink); color: var(--kr-bg); }
.kr-calc__option-months { font-size: var(--kr-fs-13); font-weight: 500; opacity: .8; }

.kr-calc__rows { display: grid; gap: var(--kr-sp-4); font-size: var(--kr-fs-15); }
.kr-calc__row { display: flex; justify-content: space-between; gap: var(--kr-sp-5); }
.kr-calc__row span { color: var(--kr-body); }
.kr-calc__row strong { font-variant-numeric: tabular-nums; }

.kr-calc__total {
  padding-top: var(--kr-sp-5);
  border-top: var(--kr-bw-mid) solid var(--kr-ink);
}

.kr-calc__total strong { font-family: var(--kr-font-display); font-size: var(--kr-fs-22); letter-spacing: var(--kr-ls-sm); }

.kr-calc__refund {
  padding: var(--kr-sp-4) var(--kr-sp-5);
  border-radius: var(--kr-r-control);
  background: var(--kr-free-bg);
  color: var(--kr-free-fg);
}

.kr-calc__refund span { color: inherit; }

/* ---- Semester availability cards ---- */

.kr-semesters__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: var(--kr-sp-4);
  margin: var(--kr-sp-7) 0 0;
  padding: 0;
  list-style: none;
}

.kr-semester-card { border-radius: var(--kr-r-surface); padding: var(--kr-sp-7); }
.kr-semester-card--free    { background: var(--kr-free-bg);    color: var(--kr-free-fg); }
.kr-semester-card--partial { background: var(--kr-partial-bg); color: var(--kr-partial-fg); }
.kr-semester-card--taken   { background: var(--kr-taken-bg);   color: var(--kr-taken-fg); }
.kr-semester-card__label { font-weight: 700; font-size: var(--kr-fs-16); }
.kr-semester-card__dates { font-size: var(--kr-fs-13); opacity: .85; margin-top: 2px; }
.kr-semester-card__text  { font-family: var(--kr-font-display); font-weight: 700; font-size: var(--kr-fs-20); margin-top: var(--kr-sp-6); }

/* ---- Flatmates ---- */

.kr-mates__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--kr-sp-4);
  margin: var(--kr-sp-7) 0 0;
  padding: 0;
  list-style: none;
}

.kr-mate {
  display: flex;
  gap: var(--kr-sp-5);
  align-items: center;
  padding: var(--kr-sp-6);
  background: var(--kr-surface);
  border: var(--kr-bw) solid var(--kr-line);
  border-radius: var(--kr-r-control);
}

.kr-mate__initial {
  width: 42px;
  height: 42px;
  border-radius: var(--kr-r-dot);
  background: var(--kr-green);
  color: var(--kr-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--kr-font-display);
  font-weight: 700;
  font-size: var(--kr-fs-18);
  flex: none;
}

.kr-mate__name { font-weight: 700; }
.kr-mate__meta { font-size: var(--kr-fs-14); color: var(--kr-muted); }

.kr-tag {
  font-size: var(--kr-fs-12);
  font-weight: 700;
  letter-spacing: var(--kr-ls-caps);
  text-transform: uppercase;
  color: var(--kr-muted-2);
  border: 1px solid var(--kr-line-input);
  border-radius: var(--kr-r-control);
  padding: 3px 9px;
}

/* ---- Clamped description ---- */

.kr-longform { position: relative; overflow: hidden; }
.kr-longform.is-clamped { max-height: 13.5em; }
/* Only clamped copy is clickable; is-clickable is set by JS when there is
   actually more text to reveal. */
body.kr .kr-longform.is-clickable.is-clamped { cursor: pointer; }

.kr-longform.is-clamped::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 96px;
  background: linear-gradient(rgba(244, 244, 240, 0), var(--kr-bg));
}

.kr-more {
  margin-top: var(--kr-sp-4);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--kr-font);
  font-weight: 700;
  font-size: var(--kr-fs-15);
  color: var(--kr-accent-deep);
}

.kr-more:hover { color: var(--kr-accent); }

/* ---- Gallery dialogs ---- */

.kr-noscroll { overflow: hidden; }

.kr-photogrid {
  position: fixed;
  inset: 0;
  z-index: var(--kr-z-dialog);
  background: var(--kr-bg);
  overflow-y: auto;
}

.kr-photogrid__bar {
  position: sticky;
  top: 0;
  background: var(--kr-glass-2);
  backdrop-filter: blur(10px);
  border-bottom: var(--kr-bw) solid var(--kr-line-strong);
  padding: var(--kr-sp-6) var(--kr-gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--kr-sp-5);
}

.kr-photogrid__title { font-family: var(--kr-font-display); font-weight: 700; font-size: var(--kr-fs-22); letter-spacing: var(--kr-ls-sm); }

.kr-photogrid__grid {
  max-width: var(--kr-container);
  margin: 0 auto;
  padding: var(--kr-sp-9) var(--kr-gutter) var(--kr-sp-19);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: var(--kr-sp-5);
}

.kr-photogrid__item { aspect-ratio: 4 / 3; border-radius: var(--kr-r-surface); overflow: hidden; background: var(--kr-line-strong); padding: 0; cursor: zoom-in; border: 0; }
.kr-photogrid__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

.kr-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--kr-z-lightbox);
  background: var(--kr-scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--kr-gutter);
}

.kr-lightbox img { max-width: min(92vw, 1400px); max-height: 84vh; border-radius: var(--kr-r-control); object-fit: contain; }

.kr-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: var(--kr-r-control);
  border: 0;
  cursor: pointer;
  background: var(--kr-bg);
  color: var(--kr-ink);
  font-size: var(--kr-fs-22);
  font-weight: 700;
}

.kr-lightbox__nav--prev { left: var(--kr-sp-9); }
.kr-lightbox__nav--next { right: var(--kr-sp-9); }

.kr-lightbox__close {
  position: absolute;
  right: var(--kr-sp-9);
  top: var(--kr-sp-9);
  border: 0;
  cursor: pointer;
  background: transparent;
  color: var(--kr-bg);
  font-size: var(--kr-fs-15);
  font-weight: 700;
  padding: var(--kr-sp-3) var(--kr-sp-5);
}

.kr-lightbox__caption { position: absolute; left: 0; right: 0; bottom: var(--kr-sp-9); text-align: center; color: var(--kr-bg); font-size: var(--kr-fs-14); }

/* ---- Contact ---- */

.kr-contact {
  max-width: var(--kr-container);
  margin: 0 auto;
  padding: var(--kr-sp-18) var(--kr-gutter) var(--kr-sp-21);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--kr-sp-16);
  align-items: start;
}

.kr-contact__links { display: flex; flex-direction: column; gap: var(--kr-sp-5); }

.kr-contact__card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--kr-sp-7);
  text-decoration: none;
  color: var(--kr-ink);
  background: var(--kr-surface);
  border: var(--kr-bw) solid var(--kr-line);
  border-radius: var(--kr-r-surface);
  padding: var(--kr-sp-9) var(--kr-sp-10);
}

.kr-contact__card:hover { border-color: var(--kr-ink); color: var(--kr-ink); }

.kr-contact__value {
  display: block;
  font-family: var(--kr-font-display);
  font-weight: 700;
  font-size: var(--kr-fs-24);
  letter-spacing: var(--kr-ls-sm);
  margin-top: var(--kr-sp-1);
}

.kr-contact__value--email { font-size: clamp(18px, 2.4vw, 24px); overflow-wrap: anywhere; }
.kr-contact__arrow { color: var(--kr-accent); font-size: var(--kr-fs-24); }
.kr-contact__about { font-size: var(--kr-fs-16); line-height: var(--kr-lh-copy); color: var(--kr-body); margin: var(--kr-sp-7) 0 0; text-wrap: pretty; }

/* ---- Footer ---- */

.kr-footer { background: var(--kr-footer-bg); color: var(--kr-footer-fg); }

.kr-footer__grid {
  max-width: var(--kr-container);
  margin: 0 auto;
  padding: var(--kr-sp-18) var(--kr-gutter) var(--kr-sp-12);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--kr-sp-12);
}

.kr-footer__logo  { height: 56px; width: auto; display: block; }
.kr-footer__about { color: var(--kr-footer-muted); line-height: var(--kr-lh-body); margin: var(--kr-sp-7) 0 0; max-width: 320px; text-wrap: pretty; }
.kr-footer__col   { display: flex; flex-direction: column; gap: var(--kr-sp-3); }

.kr-footer__label {
  font-size: var(--kr-fs-12);
  font-weight: 700;
  letter-spacing: var(--kr-ls-kicker);
  text-transform: uppercase;
  color: var(--kr-muted-3);
  margin: 0;
}

body.kr .kr-footer__col a,
body.kr .kr-footer__menu a { color: var(--kr-footer-fg); text-decoration: none; font-weight: 600; overflow-wrap: anywhere; }
body.kr .kr-footer__col a:hover,
body.kr .kr-footer__menu a:hover { color: var(--kr-accent); }

.kr-footer__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--kr-sp-3); }

.kr-footer__legal {
  max-width: var(--kr-container);
  margin: 0 auto;
  padding: 0 var(--kr-gutter) var(--kr-sp-11);
  font-size: var(--kr-fs-13);
  color: var(--kr-muted-3);
  display: flex;
  justify-content: space-between;
  gap: var(--kr-sp-5);
  flex-wrap: wrap;
}

/* ---- Sticky mobile CTA ---- */

.kr-sticky-cta { display: none; }

@media (max-width: 840px) {
  .kr-sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--kr-z-sticky);
    display: flex;
    gap: var(--kr-sp-3);
    /* The WhatsApp widget is fixed at right:15px / bottom:15px with a ~72px
       button and a z-index above everything, so it lands on top of this bar's
       right-hand button. Reserve its footprint instead of moving the widget,
       which is owned by the plugin. Flip the padding side if the widget moves. */
    padding:
      var(--kr-sp-4)
      var(--kr-chat-widget-space, 112px)
      calc(var(--kr-sp-4) + env(safe-area-inset-bottom))
      var(--kr-sp-5);
    background: var(--kr-glass);
    backdrop-filter: blur(12px);
    border-top: var(--kr-bw) solid var(--kr-line-strong);
  }

  .kr-sticky-cta__btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 14px;
    border-radius: var(--kr-r-control);
    border: var(--kr-bw-mid) solid var(--kr-ink);
    color: var(--kr-ink);
    background: transparent;
    font-weight: 700;
    font-size: var(--kr-fs-14);
    text-decoration: none;
  }

  .kr-sticky-cta__btn--accent {
    background: var(--kr-accent);
    border-color: var(--kr-accent);
    color: var(--kr-accent-on);
  }

  /* The page needs room for the bar. */
  body.kr { padding-bottom: 72px; }
}

/* ---- Responsive ---- */

@media (max-width: 840px) {
  .kr-contact { grid-template-columns: 1fr; gap: var(--kr-sp-11); }
  .kr-usp__item { padding-left: 0; padding-right: 0; border-bottom: 0; }
  .kr-usp__item:last-child { border-bottom: var(--kr-bw-mid) solid var(--kr-ink); }
  .kr-calc { position: static; }
  .kr-map__pin-sub { display: none; }
  .kr-book__panel { padding: var(--kr-sp-9); }
  .kr-lightbox__nav--prev { left: var(--kr-sp-3); }
  .kr-lightbox__nav--next { right: var(--kr-sp-3); }
}

@media (max-width: 480px) {
  .kr-hero { padding-top: var(--kr-sp-14); }
  .kr-map__pin-label { display: none; }
}

/* Below ~660px a 21/9 crop is shorter than the 260px floor, so the hero would
   be a letterbox slot with a stretched crop. Use the portrait-friendly ratio
   for the whole of that range, not just under 480px. */
@media (max-width: 660px) {
  .kr-hero__media { aspect-ratio: 4 / 3; }
}

/* ---- Single room: the sections appended to the Houzez content ---- */

.kr-room-sections { display: flex; flex-direction: column; gap: var(--kr-sp-15); margin-top: var(--kr-sp-15); }
.kr-block__head { display: flex; align-items: baseline; gap: var(--kr-sp-5); flex-wrap: wrap; }

.kr-facts { margin: var(--kr-sp-7) 0 0; padding: 0; list-style: none; display: grid; gap: var(--kr-sp-3); }
.kr-facts__item { display: flex; gap: var(--kr-sp-4); font-size: var(--kr-fs-16); color: var(--kr-body); }
.kr-facts__dash { color: var(--kr-accent); font-weight: 700; }

.kr-calc__foot { text-align: center; margin-top: 0; }

/* The calculator is a sidebar on wide screens and a normal block below 1100px. */
@media (min-width: 1100px) {
  .kr-room-sections { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--kr-sp-16); align-items: start; }
  .kr-room-sections > .kr-block { grid-column: 1; }
  .kr-room-sections > .kr-calc  { grid-column: 2; grid-row: 1 / span 6; }
}

/* ---- Gallery (opt-in [koolrooms_gallery]) ---- */

.kr-gallery__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--kr-r-surface);
  overflow: hidden;
  background: var(--kr-line-strong);
}

.kr-gallery__main { width: 100%; height: 100%; object-fit: cover; display: block; }

/* A transparent hit area over the image opens the lightbox. */
.kr-gallery__zoom { position: absolute; inset: 0; border: 0; background: transparent; cursor: zoom-in; }

.kr-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: var(--kr-r-control);
  border: 0;
  cursor: pointer;
  background: var(--kr-glass);
  color: var(--kr-ink);
  font-size: var(--kr-fs-22);
  font-weight: 700;
  z-index: 1;
}

.kr-gallery__nav:hover { background: var(--kr-bg); }
.kr-gallery__nav--prev { left: var(--kr-sp-6); }
.kr-gallery__nav--next { right: var(--kr-sp-6); }

.kr-gallery__bar {
  position: absolute;
  left: var(--kr-sp-6);
  right: var(--kr-sp-6);
  bottom: var(--kr-sp-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--kr-sp-3);
  flex-wrap: wrap;
  z-index: 1;
}

.kr-gallery__pos {
  background: var(--kr-overlay-2);
  color: var(--kr-bg);
  font-size: var(--kr-fs-13);
  font-weight: 600;
  padding: 7px 11px;
  border-radius: var(--kr-r-control);
}

.kr-gallery__actions { display: flex; gap: var(--kr-sp-3); }

.kr-gallery__action {
  display: inline-flex;
  align-items: center;
  gap: var(--kr-sp-3);
  border: 0;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--kr-font);
  font-weight: 700;
  font-size: var(--kr-fs-13);
  color: var(--kr-ink);
  background: var(--kr-glass-2);
  border-radius: var(--kr-r-control);
  padding: 8px 14px;
}

.kr-gallery__action:hover { background: var(--kr-bg); color: var(--kr-ink); }

.kr-gallery__thumbs { display: flex; gap: var(--kr-sp-3); overflow-x: auto; padding: var(--kr-sp-4) 0 var(--kr-sp-2); scrollbar-width: thin; }

.kr-gallery__thumb {
  flex: none;
  width: 112px;
  aspect-ratio: 4 / 3;
  border-radius: var(--kr-r-control);
  overflow: hidden;
  background: var(--kr-line-strong);
  padding: 0;
  cursor: pointer;
  border: var(--kr-bw-thick) solid transparent;
}

.kr-gallery__thumb.is-active { border-color: var(--kr-accent); }
.kr-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Map: university pins and the walking rings from the design. */
.kr-map__pin--uni .kr-map__dot {
  background: var(--kr-green);
  box-shadow: 0 0 0 3px var(--kr-surface), 0 0 0 4.5px var(--kr-green);
}

.kr-map__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border: var(--kr-bw-mid) dashed var(--kr-ring);
  border-radius: var(--kr-r-dot);
  transform: translate(-50%, -50%);
  aspect-ratio: 1;
  pointer-events: none;
}

.kr-map__ring-label {
  position: absolute;
  left: 50%;
  /* Sit on top of its own ring: half the ring's width, corrected for the box
     being 1.6x wider than it is tall. */
  top: calc(50% - (var(--ring) / 2) * 1.6);
  font-size: var(--kr-fs-11);
  font-weight: 700;
  color: var(--kr-green);
  background: var(--kr-surface);
  padding: 2px 6px;
  border-radius: var(--kr-r-control);
  transform: translate(-50%, -50%);
  white-space: nowrap;
  pointer-events: none;
}

.kr-map.is-near .kr-map__ring--wide,
.kr-map.is-near .kr-map__ring-label--wide,
.kr-map.is-wide .kr-map__ring--near,
.kr-map.is-wide .kr-map__ring-label--near { display: none; }

/* Map label placement. The EBS cluster is dense, so each pin declares which
   way its label hangs off the dot. */
.kr-map__pin--r { flex-direction: row;         transform: translate(-7px, -50%); }
.kr-map__pin--l { flex-direction: row-reverse; transform: translate(calc(-100% + 7px), -50%); }
.kr-map__pin--b { flex-direction: column;      transform: translate(-50%, -7px); }

.kr-map__pin--l .kr-map__pin-label { text-align: right; }
.kr-map__pin--b .kr-map__pin-label { text-align: center; }

/* ---- Header ---- */

.kr-header {
  position: sticky;
  top: 0;
  z-index: var(--kr-z-header);
  background: var(--kr-glass);
  backdrop-filter: blur(12px);
  border-bottom: var(--kr-bw) solid var(--kr-line-strong);
}

.kr-header__inner {
  max-width: var(--kr-container);
  margin: 0 auto;
  padding: 0 var(--kr-gutter);
  height: var(--kr-header-h);
  display: flex;
  align-items: center;
  gap: var(--kr-sp-9);
}

.kr-header__logo { display: flex; align-items: center; flex: none; }
/* The logo is an SVG (816 x 177, so 4.62:1). Heights below are chosen so its
   width matches what the old 3.66:1 raster occupied - at 46px the new ratio was
   44px wider and pushed the header past a 375px viewport. */
.kr-header__logo img { height: 62px; width: auto; display: block; }

.kr-header__nav { margin-left: var(--kr-sp-3); }
.kr-nav { display: flex; gap: var(--kr-sp-1); list-style: none; margin: 0; padding: 0; }

body.kr .kr-nav a {
  display: block;
  padding: var(--kr-sp-3) var(--kr-sp-5);
  border-radius: var(--kr-r-control);
  font-size: var(--kr-fs-15);
  font-weight: 600;
  color: var(--kr-ink);
  text-decoration: none;
}

body.kr .kr-nav a:hover { background: var(--kr-hover-bg); color: var(--kr-ink); }
body.kr .kr-nav .current-menu-item > a { color: var(--kr-accent); }

.kr-header__side { margin-left: auto; display: flex; align-items: center; gap: var(--kr-sp-5); flex: none; }

/* French labels ("Foire aux questions") are much longer than the English ones,
   so the nav has to be allowed to shrink rather than push the CTA off-screen. */
.kr-header__nav { min-width: 0; flex: 0 1 auto; }
.kr-nav { flex-wrap: nowrap; }
.kr-nav > li { flex: none; }

/* French labels leave only ~20px of slack at the 1200px container, so the nav
   starts tightening well before the design's 840px breakpoint. */
@media (max-width: 1320px) {
  body.kr .kr-nav a { padding: var(--kr-sp-3) var(--kr-sp-4); font-size: var(--kr-fs-14); }
  .kr-header__inner { gap: var(--kr-sp-5); }
  .kr-header__side { gap: var(--kr-sp-4); }
}

@media (max-width: 1180px) {
  body.kr .kr-nav a { padding: var(--kr-sp-2) var(--kr-sp-3); }
  .kr-header__logo img { height: 42px; }
  .kr-header__cta { padding: 10px 14px; font-size: var(--kr-fs-14); }
}

@media (max-width: 1080px) {
  /* Below this the longer labels and the CTA cannot both fit: fall back to the
     mobile menu rather than letting the header overflow. */
  .kr-header__nav,
  .kr-header__cta { display: none; }
  .kr-header__toggle { display: inline-flex; }
}

.kr-lang { display: flex; border: var(--kr-bw-mid) solid var(--kr-ink); border-radius: var(--kr-r-control); padding: 3px; gap: 2px; }

body.kr .kr-lang__item {
  /* Nested flush inside .kr-lang, which has 3px of padding, so the inner
     radius is the outer one minus that padding - otherwise the two curves
     run at different rates and the gap between them looks uneven. */
  border-radius: calc(var(--kr-r-control) - 3px);
  padding: 5px 10px;
  font-size: var(--kr-fs-12);
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  color: var(--kr-ink);
}

body.kr .kr-lang__item.is-active { background: var(--kr-ink); color: var(--kr-bg); }

.kr-header__cta { font-size: var(--kr-fs-15); padding: 11px 18px; }

.kr-header__toggle {
  display: none;
  align-items: center;
  border: var(--kr-bw-mid) solid var(--kr-ink);
  background: transparent;
  cursor: pointer;
  font-family: var(--kr-font);
  font-weight: 700;
  font-size: var(--kr-fs-14);
  padding: 9px 14px;
  border-radius: var(--kr-r-control);
  color: var(--kr-ink);
}

.kr-header__mobile {
  border-top: var(--kr-bw) solid var(--kr-line-strong);
  background: var(--kr-bg);
  padding: var(--kr-sp-5) var(--kr-gutter) var(--kr-sp-9);
  flex-direction: column;
  gap: var(--kr-sp-1);
}

.kr-header__mobile:not([hidden]) { display: flex; }

.kr-nav--mobile { flex-direction: column; }

body.kr .kr-nav--mobile a {
  padding: var(--kr-sp-5) var(--kr-sp-3);
  font-family: var(--kr-font-display);
  font-size: var(--kr-fs-24);
  font-weight: 700;
  letter-spacing: var(--kr-ls-sm);
}

@media (max-width: 840px) {
  .kr-header__nav,
  .kr-header__cta { display: none; }
  .kr-header__toggle { display: inline-flex; }
  .kr-header__logo img { height: 36px; }
  .kr-header__inner { gap: var(--kr-sp-5); }
}

/* ---- FAQ screen ---- */

.kr-faq-screen {
  /* The page container, not the narrow one, so the headline and the accordion
     line up with the header logo and with every other page. The answers keep
     their own 720px measure (.kr-faq__a p), which is what the narrow shell was
     really protecting. */
  max-width: var(--kr-container);
  margin: 0 auto;
  padding: var(--kr-sp-18) var(--kr-gutter) var(--kr-sp-21);
}

.kr-faq-screen__title {
  font-family: var(--kr-font-display);
  font-weight: 700;
  font-size: var(--kr-h1-page);
  letter-spacing: var(--kr-ls-h1);
  line-height: var(--kr-lh-h1);
  margin: 0;
  text-wrap: balance;
}

.kr-faq-screen__intro {
  font-size: var(--kr-fs-18);
  line-height: var(--kr-lh-body);
  color: var(--kr-body);
  max-width: 680px;
  margin: var(--kr-sp-9) 0 0;
  text-wrap: pretty;
}

.kr-faq-screen .kr-faq { margin-top: var(--kr-sp-14); }

.kr-faq-cta {
  margin-top: var(--kr-sp-16);
  padding: var(--kr-sp-11);
  border-radius: var(--kr-r-surface);
  background: var(--kr-green);
  color: var(--kr-footer-fg);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--kr-sp-7);
}

.kr-faq-cta__title {
  font-family: var(--kr-font-display);
  font-weight: 700;
  font-size: var(--kr-fs-26);
  letter-spacing: var(--kr-ls-sm);
  margin: 0;
}

.kr-faq-cta__text { color: var(--kr-green-soft); margin: var(--kr-sp-1) 0 0; }


/* ---- Single room header (replaces the Houzez v2 banner) ---- */

.kr-room-header { margin-bottom: var(--kr-sp-10); }
.kr-room-header__badges { display: flex; gap: var(--kr-sp-3); flex-wrap: wrap; margin-bottom: var(--kr-sp-6); }

/* The card badges are absolutely positioned; in the header they sit in flow. */
.kr-badge--static { position: static; }
.kr-badge--featured-static { background: var(--kr-ink); color: var(--kr-bg); }

.kr-room-header__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--kr-sp-7);
}

.kr-room-header__title {
  font-family: var(--kr-font-display);
  font-weight: 700;
  font-size: var(--kr-h1-room);
  letter-spacing: var(--kr-ls-h1);
  line-height: var(--kr-lh-1);
  margin: 0;
}

.kr-room-header__meta { margin: var(--kr-sp-5) 0 0; font-size: var(--kr-fs-16); color: var(--kr-body); }

.kr-room-header__price {
  font-family: var(--kr-font-display);
  font-weight: 700;
  font-size: var(--kr-fs-44);
  letter-spacing: -.03em;
  line-height: var(--kr-lh-1);
  margin: 0;
  white-space: nowrap;
}

.kr-room-header__per { font-family: var(--kr-font); font-size: var(--kr-fs-16); color: var(--kr-muted); font-weight: 500; }

.kr-room-top {
  max-width: var(--kr-container);
  margin: 0 auto;
  padding: var(--kr-sp-10) var(--kr-gutter) var(--kr-sp-3);
}

/* TalTech sits outside the walking view, so the design shows it as a note in
   the corner; clicking it switches to the zoomed-out view where the pin is. */
.kr-map__note {
  position: absolute;
  left: var(--kr-sp-7);
  bottom: var(--kr-sp-6);
  border: var(--kr-bw) solid var(--kr-line);
  background: var(--kr-surface);
  color: var(--kr-body);
  font-family: var(--kr-font);
  font-size: var(--kr-fs-12);
  font-weight: 600;
  padding: 6px 10px;
  border-radius: var(--kr-r-control);
  cursor: pointer;
}

.kr-map__note:hover { border-color: var(--kr-ink); color: var(--kr-ink); }
.kr-map.is-wide .kr-map__note { display: none; }

/* ---- Simple contact form (Contact screen) ---- */

.kr-contact-form {
  background: var(--kr-surface);
  border: var(--kr-bw) solid var(--kr-line);
  border-radius: var(--kr-r-surface);
  padding: var(--kr-sp-11);
  display: flex;
  flex-direction: column;
  gap: var(--kr-sp-7);
}

.kr-contact-form__title {
  font-family: var(--kr-font-display);
  font-weight: 700;
  font-size: var(--kr-fs-24);
  letter-spacing: var(--kr-ls-sm);
  margin: 0;
}

.kr-contact-form input,
.kr-contact-form textarea {
  font-family: var(--kr-font);
  font-size: var(--kr-fs-15);
  font-weight: 500;
  padding: 12px 14px;
  border-radius: var(--kr-r-control);
  border: var(--kr-bw-mid) solid var(--kr-line-input);
  background: var(--kr-bg);
  color: var(--kr-ink);
  width: 100%;
}

.kr-contact-form textarea { resize: vertical; }
.kr-contact-form .has-error { border-color: var(--kr-error); }
.kr-contact-form [data-kr-submit] { align-self: flex-start; }

.kr-contact-form__done { display: flex; flex-direction: column; gap: var(--kr-sp-5); }
.kr-contact-form__done[hidden] { display: none; }

.kr-contact-form__sent {
  font-family: var(--kr-font-display);
  font-weight: 700;
  font-size: var(--kr-fs-28);
  letter-spacing: var(--kr-ls-sm);
  margin: 0;
}

/* ---- Video tour inside the gallery ---- */

.kr-gallery__video {
  position: absolute;
  inset: 0;
  background: var(--kr-ink);
}

.kr-gallery__video[hidden] { display: none; }
.kr-gallery__video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* While the video plays the stage belongs to the player, not to the photos.
   .kr-gallery__zoom is a transparent button covering the whole stage, so left
   in place it eats every click aimed at YouTube's progress bar; the prev/next
   arrows are photo controls; and .kr-gallery__bar sits exactly on the control
   strip along the bottom. Take the first two out of the way and lift the bar
   to the top, so its two buttons stay reachable. */
body.kr .kr-gallery.is-playing .kr-gallery__zoom,
body.kr .kr-gallery.is-playing .kr-gallery__nav { display: none; }

body.kr .kr-gallery.is-playing .kr-gallery__bar {
  bottom: auto;
  top: var(--kr-sp-6);
}

.kr-gallery__action.is-active { background: var(--kr-accent); color: var(--kr-accent-on); }

/* The video's own thumbnail, marked with a play badge. */
.kr-gallery__thumb--video { position: relative; }

.kr-gallery__thumb-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kr-overlay);
  color: var(--kr-bg);
  font-size: var(--kr-fs-18);
}

.kr-gallery__thumb--video:hover .kr-gallery__thumb-play { background: rgba(22, 21, 15, .55); }

/* Page title for templates that print none of their own (blog archive,
   contact and request pages). */
body.kr .kr-archive-head {
  max-width: var(--kr-container);
  margin: 0 auto;
  padding: var(--kr-sp-10) var(--kr-gutter) 0;
}
/* .kr-contact is a two-column grid, so its heading has to span both columns -
   left as a plain grid item it took the first cell and pushed the contact links
   and the form out of their places. */
body.kr .kr-contact__title {
  grid-column: 1 / -1;
  margin: 0;
}

body.kr .kr-book__title { margin: 0 0 var(--kr-sp-8); }

/* Legal row: copyright, location, then the policy links as one group so the
   row's space-between still reads as three columns rather than four loose bits. */
body.kr .kr-footer__legal-links { display: flex; gap: var(--kr-sp-5); flex-wrap: wrap; }
body.kr .kr-footer__legal-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
body.kr .kr-footer__legal-link:hover { color: var(--kr-bg); }

/* Long-form pages (privacy, cookies): the design's container, no sidebar, and a
   measure that stays readable instead of running the full 1200px. Their content
   starts at <h3>, so those are sized as the section headings they act as. */
body.kr .kr-textpage {
  max-width: var(--kr-container);
  margin: 0 auto;
  padding: var(--kr-sp-14) var(--kr-gutter) var(--kr-sp-18);
}

body.kr .kr-textpage__title { margin: 0 0 var(--kr-sp-9); }

body.kr .kr-textpage__body {
  max-width: 72ch;
  color: var(--kr-body);
  font-size: var(--kr-fs-16);
  line-height: var(--kr-lh-body);
}

body.kr .kr-textpage__body h3 {
  font-family: var(--kr-font-display);
  font-size: var(--kr-fs-22);
  font-weight: 600;
  color: var(--kr-ink);
  margin: var(--kr-sp-11) 0 var(--kr-sp-4);
  letter-spacing: -.01em;
}

body.kr .kr-textpage__body p,
body.kr .kr-textpage__body ul,
body.kr .kr-textpage__body ol { margin: 0 0 var(--kr-sp-6); }
body.kr .kr-textpage__body li { margin-bottom: var(--kr-sp-2); }
body.kr .kr-textpage__body a { color: var(--kr-accent-deep); }
body.kr .kr-textpage__body strong { color: var(--kr-ink); }

/* ---- Validation states -------------------------------------------------- *
 * A wrong field has to be findable at a glance on a long form, so a border
 * colour alone is not enough: an invalid field also takes a tinted ground and
 * a ring, which survives skimming and does not lean on hue alone.
 * ------------------------------------------------------------------------- */

body.kr .kr-book .has-error,
body.kr .kr-contact-form .has-error {
  background-color: var(--kr-error-tint);
  box-shadow: 0 0 0 3px rgba(185, 62, 40, .14);
}

body.kr .kr-book .has-error:focus,
body.kr .kr-contact-form .has-error:focus {
  border-color: var(--kr-error);
  box-shadow: 0 0 0 3px rgba(185, 62, 40, .30);
}

/* The form-level message inherited .kr-note's muted grey, which read as a hint
   rather than a failure. */
body.kr [data-kr-form-error]:not([hidden]) {
  display: block;
  background: var(--kr-error-tint);
  color: var(--kr-error);
  font-weight: 600;
  border-radius: var(--kr-r-control);
  border-left: 3px solid var(--kr-error);
  padding: var(--kr-sp-4) var(--kr-sp-5);
}

/* ---- Select (our own listbox) ------------------------------------------- *
 * Replaces the native popup, which the OS draws itself - on Android a
 * full-width white sheet with square corners and a blue radio per row. The
 * real <select> is still in the DOM behind this, clipped rather than
 * display:none so it still posts and can still be focused.
 * ------------------------------------------------------------------------- */

.kr-select { position: relative; display: flex; }

.kr-select__native {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

.kr-select__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kr-sp-4);
  width: 100%;
  cursor: pointer;
  text-align: left;
  font-family: var(--kr-font);
  font-size: var(--kr-fs-14);
  font-weight: 600;
  padding: 9px 12px;
  border-radius: var(--kr-r-control);
  border: var(--kr-bw-mid) solid var(--kr-line-input);
  background: var(--kr-bg);
  color: var(--kr-ink);
  /* .kr-label is the uppercase kicker and both of these inherit through it,
     which is why the old <select> reset them too. */
  text-transform: none;
  letter-spacing: 0;
}

.kr-select__trigger:hover { border-color: var(--kr-ink); }

.kr-select__caret {
  flex: none;
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .15s ease;
}

.kr-select__trigger[aria-expanded="true"] .kr-select__caret {
  transform: translateY(1px) rotate(225deg);
}

.kr-select__list {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: min(320px, calc(100vw - 32px));
  margin: 0;
  padding: var(--kr-sp-2);
  list-style: none;
  background: var(--kr-surface);
  border: var(--kr-bw) solid var(--kr-line);
  border-radius: var(--kr-r-control);
  box-shadow: 0 12px 32px rgba(22, 21, 15, .14);
  overflow-y: auto;
  overscroll-behavior: contain;
  text-transform: none;
  letter-spacing: 0;
}

.kr-select__list[hidden] { display: none; }
.kr-select__list.is-above { top: auto; bottom: calc(100% + 6px); }
.kr-select__list.is-right { left: auto; right: 0; }

.kr-select__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kr-sp-4);
  padding: 10px 12px;
  border-radius: calc(var(--kr-r-control) - 4px);
  font-size: var(--kr-fs-14);
  font-weight: 600;
  color: var(--kr-body);
  cursor: pointer;
}

.kr-select__option.is-active { background: var(--kr-bg); color: var(--kr-ink); }
.kr-select__option.is-selected { color: var(--kr-accent-deep); }
.kr-select__option[aria-disabled="true"] { opacity: .5; cursor: default; }

/* A tick on the selected row, so it does not rely on colour alone. */
.kr-select__option.is-selected::after {
  content: '';
  flex: none;
  width: 11px; height: 6px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(-45deg);
}

/* Thumbs need more than a mouse does. */
@media (pointer: coarse) {
  .kr-select__option { padding: 13px 12px; }
}

/* The wizard's fields run larger than the filter bar's. */
.kr-book .kr-select__trigger {
  font-size: var(--kr-fs-15);
  padding: 12px 14px;
}

.kr-book .kr-select__list,
.kr-book .kr-select__option { font-size: var(--kr-fs-15); }

@media (prefers-reduced-motion: reduce) {
  .kr-select__caret { transition: none; }
}