/* Kentmanni 20A-23: baas ja sektsioonid. Värvid, fondid ja suurused tulevad tokens.css-ist. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-tap-highlight-color: transparent;
  scrollbar-gutter: stable;
  background: var(--ground);
  color: var(--ink);
}

body {
  margin: 0;
  cursor: default;
  font-family: var(--f-body);
  font-size: var(--t-body);
  font-weight: 300;
  line-height: 1.6;
}

h1,
h2,
h3,
p,
figure,
dl,
dd,
dt,
ul {
  margin: 0;
  padding: 0;
}

img {
  display: block;
}

button:focus,
a:focus,
[role="button"]:focus,
[tabindex="-1"]:focus {
  outline: none;
  box-shadow: none;
}

::selection {
  background: var(--accent);
  color: var(--on-accent);
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--surface);
}

::-webkit-scrollbar-thumb {
  background: var(--soft);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-color: var(--soft) var(--surface);
    scrollbar-width: thin;
  }
}

/* Päis: logo kohal ajutine paleti nupp, paremal menüü */
.bar {
  position: fixed;
  z-index: 20;
  top: var(--bar-top);
  left: var(--edge);
  right: var(--edge);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--bar-h);
  pointer-events: none;
}

.bar > * {
  pointer-events: auto;
}

/* AJUTINE: eemaldada koos assets/palette-switch.js-iga */
.palette-btn {
  min-height: 44px;
  margin-left: -.6em;
  padding: 0 .6em;
  border: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--t-note);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
  cursor: pointer;
}

.menu-btn {
  display: grid;
  margin-left: auto;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}

.menu-btn svg {
  width: 28px;
  height: 10px;
  fill: currentColor;
  shape-rendering: crispEdges;
}

/* X samas kohas: parem serv samal joonel hamburgeriga (28 vs 20 px, nupu keskel) */
.menu-btn .i-x {
  display: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  shape-rendering: geometricPrecision;
  transform: translateX(4px);
}

html.menu-open .menu-btn .i-bars,
html.enq-open .menu-btn .i-bars {
  display: none;
}

html.menu-open .menu-btn .i-x,
html.enq-open .menu-btn .i-x {
  display: block;
}

/* Tumedal fotol hele (assets/site.js, data-bar-dark). Avatud menüü ja päringuaken on heledad. */
html:not(.menu-open):not(.enq-open) .bar.is-on-dark .menu-btn {
  color: var(--ground);
}

/* Ühised rollid */
.section-title {
  font-family: var(--f-display);
  font-size: var(--t-h2);
  font-weight: var(--w-h2);
  line-height: 1.06;
  letter-spacing: -.005em;
  text-wrap: balance;
}

.block-title {
  font-family: var(--f-display);
  font-size: var(--t-h3);
  font-weight: var(--w-h3);
  line-height: 1.2;
}

.lead {
  max-width: 47ch;
  font-size: var(--t-lead);
  font-weight: 300;
  line-height: 1.38;
}

.price {
  font-family: var(--f-display);
  font-size: var(--t-price);
  font-weight: var(--w-price);
  line-height: 1;
  white-space: nowrap;
}

.cta {
  display: inline-block;
  padding: .74em 1.3em .8em;
  border: 0;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--f-display);
  font-size: var(--t-button);
  font-weight: var(--w-button);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  z-index: 0;
  /* Liikuv kiht ümardub poolikul pikslil nupu servast rea võrra välja (125 %), clip lõikab selle nupu serva järgi.
     clip, mitte hidden: alusjoon ei muutu (menüüs on nupp viimase lingiga samal alusjoonel). */
  overflow: clip;
}

/* Hover: teine toon kasvab vasakult üle nupu, lahkudes tõmbub paremale ära */
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cta-hover);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .42s cubic-bezier(.22, 1, .36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .cta:hover::before {
    transform: scaleX(1);
    transform-origin: left center;
  }
}

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

/* Hero: nimi nagu karniis, kaarega foto telje peal, tekst kahel pool */
.hero {
  --hero-bottom: calc(var(--bar-top) + var(--bar-h) + var(--bar-gap));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  min-height: min(100svh, 62rem);
  padding: calc(var(--bar-top) + var(--bar-h) + clamp(.25rem, 1.5vh, 1.25rem)) var(--pad-x) var(--line-gap);
  background: var(--surface);
}

.hero-name {
  display: flex;
  justify-content: space-between;
  gap: .35em;
  font-family: var(--f-display);
  font-size: var(--t-name);
  font-weight: var(--w-name);
  line-height: 1;
  letter-spacing: -.01em;
}

.hero-name span {
  white-space: nowrap;
}

.hero-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  margin-top: clamp(.75rem, 2.5vh, 2rem);
}

.hero-copy {
  grid-column: 1 / 4;
  align-self: end;
  padding-bottom: var(--hero-bottom);
}

.hero-sale {
  max-width: 38ch;
  margin-top: .9rem;
}

.hero-arch {
  position: relative;
  grid-column: 4 / 10;
  overflow: hidden;
  border-radius: 999px 999px 0 0;
  background: var(--ground);
}

.hero-arch img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;   /* iga foto oma horisontaalse asukoha paneb assets/hero.js */
}

/* Laual kasvab kaar kõrgel ekraanil kuni 1 : 1,1, aga mitte üle ruumi, mis 100svh hero-s nime alla jääb.
   Sülearvutis on see ruum väiksem, seal jääb kaar hero kõrguse järgi. Kuni 1000 px on kaarel oma paigutus. */
@media (min-width: 1001px) {
  .hero-row {
    container-type: inline-size;
  }

  .hero-arch {
    --arch-w: calc(50cqi - var(--gutter) / 2);   /* veerud 4–9, sama vahe mis .hero-row column-gap */
    --arch-room: calc(100svh
      - (var(--bar-top) + var(--bar-h) + clamp(.25rem, 1.5vh, 1.25rem))
      - var(--t-name)
      - clamp(.75rem, 2.5vh, 2rem)
      - var(--line-gap));
    min-height: min(var(--arch-room), var(--arch-w) * 1.1);
  }
}

.hero-offer {
  grid-column: 10 / -1;
  align-self: end;
  display: grid;
  gap: 1rem;
  justify-items: start;
  padding-bottom: var(--hero-bottom);
}

/* Faktirida: joon jääb kahe võrdse vahe vahele, numbrid algavad hero veergude joontelt */
.figures {
  padding-inline: var(--pad-x);
  padding-bottom: var(--head-gap);
  background: var(--surface);
}

.fig-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  padding-top: var(--line-gap);
  border-top: 1px solid var(--rule);
}

.fig {
  grid-column: span 3;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: .5rem;
}

.fig dd {
  font-family: var(--f-display);
  font-size: var(--t-figure);
  font-weight: var(--w-figure);
  line-height: 1;
}

.fig dt {
  color: var(--soft);
}

/* Maja lugu: fotod seisavad ühisel joonel, pealkiri madalama foto kohal */
.story {
  padding-inline: var(--pad-x);
  padding-block: var(--sec);
}

.story-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto;
  column-gap: var(--gutter);
  --story-row: clamp(1.25rem, 2vw, 1.75rem);
  row-gap: var(--story-row);
}

.story-grid .section-title {
  grid-column: 1 / 6;
  grid-row: 1;
  align-self: start;
}

.story-block {
  display: grid;
  grid-row: 1 / 3;
  grid-template-rows: subgrid;
}

.story-1 { grid-column: 1 / 6; }
.story-2 { grid-column: 6 / 10; }
.story-3 { grid-column: 10 / -1; }

.story-block figure {
  align-self: end;
}

.story-block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-1 figure {
  aspect-ratio: 16 / 10;
}

.story-2 figure {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 999px 999px 0 0;
  background: var(--surface);
}

.story-3 figure {
  aspect-ratio: 4 / 5;
}

.story-3 img {
  object-position: 30% 50%;
}

.story-text p {
  max-width: 46ch;
  margin-top: .7rem;
}

/* Lai tuba: vasakul pealkiri, lõik ja kamin, paremal kaar kaares ja teine lõik kamina alumisel joonel */
.room {
  padding-inline: var(--pad-x);
  padding-bottom: var(--sec);
  /* Ülemist vahet pole, menüühüpe jätab sama õhu nagu teistele sektsioonidele */
  scroll-margin-top: var(--sec);
}

.room-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}

.room-left {
  grid-column: 1 / 6;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  /* Kamin rea põhjas: alumine serv teise lõiguga ühel joonel ka siis, kui parem tulp on kõrgem */
  grid-template-rows: auto auto 1fr;
  column-gap: var(--gutter);
  align-content: start;
}

.room-left .section-title,
.room-left .lead {
  grid-column: 1 / -1;
}

.room-left .lead {
  max-width: none;
  margin-top: var(--title-lead);
}

.room-marble {
  grid-column: 1 / 5;
  align-self: end;
  margin-top: var(--head-gap);
  aspect-ratio: 3 / 4;
}

.room-right {
  grid-column: 6 / -1;
  display: grid;
  grid-template-rows: auto 1fr;
}

.room-arch {
  aspect-ratio: 1 / 1.08;
  overflow: hidden;
  border-radius: 999px 999px 0 0;
  background: var(--surface);
}

.room img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.room-arch img {
  object-position: 45% 50%;
}

.room-note {
  align-self: end;
  max-width: 46ch;
  padding-top: var(--line-gap);
}

/* Köök ja kabinet: Z-kuju pinna toonis, foto ja tekst vahetavad rida kaupa pooli */
.kitchen {
  padding-inline: var(--pad-x);
  padding-block: var(--sec);
  background: var(--surface);
}

.kitchen-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}

.kitchen-row + .kitchen-row {
  margin-top: var(--head-gap);
}

.kitchen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kitchen figure {
  align-self: start;
  aspect-ratio: 16 / 10;
}

.kitchen p {
  max-width: 46ch;
  margin-top: .7rem;
}

.kitchen-open figure {
  grid-column: 1 / 8;
}

.kitchen-open .kitchen-copy {
  grid-column: 9 / -1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--head-gap);
}

.kitchen-sep .kitchen-copy {
  grid-column: 1 / 5;
  align-self: end;
}

.kitchen-sep figure {
  grid-column: 6 / -1;
}

/* Magamistuba: trepp vasakul parema tulba kõrguses, all riietusruum ja teine lõik ühel joonel */
.bed {
  padding-inline: var(--pad-x);
  padding-block: var(--sec);
}

.bed-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}

.bed img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bed-stair {
  position: relative;
  grid-column: 1 / 6;
  grid-row: 1 / 3;
  overflow: hidden;
}

.bed-stair img {
  position: absolute;
  inset: 0;
  object-position: 45% 50%;
}

.bed-top {
  grid-column: 6 / -1;
  grid-row: 1;
  padding-bottom: var(--head-gap);
}

.bed-top .lead {
  max-width: 44ch;
  margin-top: var(--title-lead);
}

.bed-room {
  grid-column: 6 / -1;
  grid-row: 2;
  aspect-ratio: 16 / 10;
}

.bed-note {
  grid-column: 1 / 5;
  grid-row: 3;
  align-self: end;
  max-width: 46ch;
}

.bed-closet {
  grid-column: 6 / 10;
  grid-row: 3;
  margin-top: var(--head-gap);
  aspect-ratio: 16 / 10;
}

/* Saun: lõigud oma foto kõrval, kaks rida, kumbki lõpeb ühel joonel */
.sauna {
  padding-inline: var(--pad-x);
  padding-bottom: var(--sec);
}

.sauna-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}

.sauna-row + .sauna-row {
  align-items: end;
  margin-top: var(--head-gap);
}

.sauna img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Kaar nagu peaukse fotol: ainus kaar köögi ja closing'u vahel. */
.sauna-steam {
  grid-column: 1 / 4;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 999px 999px 0 0;
  background: var(--surface);
}

.sauna-top {
  grid-column: 5 / 9;
}

.sauna-top .lead {
  max-width: 44ch;
  margin-top: var(--title-lead);
}

.sauna-bath {
  grid-column: 9 / -1;
  align-self: end;
  aspect-ratio: 16 / 10;
}

.sauna-bath img,
.sauna-sink img {
  object-position: 100% 50%;
}

.sauna-sink {
  grid-column: 1 / 5;
  aspect-ratio: 16 / 10;
}

.sauna-note {
  grid-column: 5 / 9;
  max-width: 46ch;
}

.sauna-guest {
  grid-column: 9 / 11;
}

.sauna-wc {
  position: relative;
  grid-column: 11 / -1;
  align-self: stretch;
}

.sauna-wc img {
  position: absolute;
  inset: 0;
}

/* Korruseplaan: mõlemad korrused korraga, ühes mõõtkavas (kasutaja visand, demo _demo/plans-pair.html variant A).
   Mõõtkava trepi järgi: sama trepp on ülemisel joonisel 136, alumisel 54,5 ühikut, seega ülemise plaani laius
   on 1799 × 54,5 / 136 / 1034 = .6972 alumise laiusest. Joonise toonid tulevad lehe tokenitest, ruuminimed on päris tekst.
   Baas on üks tulp: iga korrus oma lõigu all. */
.plans {
  padding: var(--sec) var(--pad-x);
  background: var(--surface);
}

/* Plaan kuni 67svh, aga mitte alla 36rem: kitsamal mahuvad ruuminimed (Garderoob) seinte vahele ainult nii. */
.plans-grid {
  --plan-w: min(100cqi, max(67svh, 36rem));
  display: flex;
  flex-direction: column;
  container-type: inline-size;
}

.plans-title {
  margin-bottom: var(--head-gap);
}

.plans-floor-2 {
  margin-top: var(--head-gap);
}

.plans-floor p {
  max-width: 46ch;
  margin-top: .7rem;
}

.plan {
  margin-top: var(--line-gap);
}

.plan-1 {
  width: var(--plan-w);
}

.plan-2 {
  width: calc(var(--plan-w) * .6972);
}

.plan-draw {
  position: relative;
}

.plan-1 .plan-draw {
  aspect-ratio: 1034 / 954;
}

.plan-2 .plan-draw {
  aspect-ratio: 1799 / 646;
}

.plan-svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.plan-floor {
  fill: var(--ground);
}

.plan-walls {
  fill: var(--ink);
}

.plan-lines {
  fill: none;
  stroke: var(--ink);
}

.plan-lines path {
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.plan-label {
  position: absolute;
  transform: translate(-50%, -50%);
  color: var(--ink);
  font-size: var(--t-note);
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
}

/* Garderoob on kitsas tuba (11.3 % plaanist): kui nimi seinte vahele ei mahu, poolitub kahele reale nagu „Maj./ruum” kõrval. */
.plan-label[data-room="garderoob"] {
  max-width: 9.5%;
  white-space: normal;
  hyphens: manual;
}

/* Ruumi foto plaanil (assets/plan-photos.js): ruumi põrand on päästik, foto ankurdub nime kõrvale.
   Ainult kõrvuti plaanidega laial ekraanil ja hiirega; klikki pole, kursor jääb nooleks. */
.plan-draw {
  --ph-w: clamp(12rem, 15vw, 15rem);
}

.plan-room {
  fill: transparent;
  pointer-events: none;
  transition: fill .22s cubic-bezier(.22, 1, .36, 1);
}

.plan-label {
  transition: color .22s cubic-bezier(.22, 1, .36, 1);
}

.plan-label.is-on {
  color: var(--accent);
}

.ph-card {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  width: var(--ph-w);
  aspect-ratio: 4 / 3;
  margin: 0;
  background: var(--ground);
  /* Kaks kihti tindist: lähedane kontaktvari + lai pehme vari. */
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--ink) 14%, transparent),
    0 22px 44px -18px color-mix(in srgb, var(--ink) 34%, transparent);
  pointer-events: none;
  opacity: 0;
  translate: 0 6px;
  visibility: hidden;
  transition: opacity .16s cubic-bezier(.4, 0, 1, 1), translate .16s cubic-bezier(.4, 0, 1, 1), visibility 0s linear .16s;
}

.ph-card.is-on {
  opacity: 1;
  translate: 0 0;
  visibility: visible;
  transition: opacity .22s cubic-bezier(.22, 1, .36, 1), translate .22s cubic-bezier(.22, 1, .36, 1), visibility 0s;
}

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

@media (min-width: 1101px) and (hover: hover) and (pointer: fine) {
  .plan-room {
    pointer-events: fill;
  }

  .plan-room.is-on {
    fill: color-mix(in srgb, var(--ink) 7%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ph-card,
  .ph-card.is-on {
    translate: none;
  }
}

.plan-n,
.plan-key {
  display: none;
}

.plans-download {
  position: relative;
  align-self: flex-start;
  width: fit-content;
  margin-top: var(--line-gap);
  color: var(--ink);
  font-size: var(--t-body);
  text-decoration: none;
  cursor: pointer;
}

/* Lai: pealkiri ja korruste lõigud vasakul, ülemine plaan all vasakul, alumine paremal; plaanide alumine serv ühel joonel.
   Alumine plaan on kuus veergu (kuni 67svh, vähemalt 36rem), ülemine samas mõõtkavas.
   Alla 1101 px ei mahu kaks plaani samas mõõtkavas loetavalt kõrvuti: seal jääb baasi üks tulp. */
@media (min-width: 1101px) {
  .plans-grid {
    --plan-w: min(calc(50cqi - var(--gutter) / 2), max(67svh, 36rem));
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto auto 1fr auto auto;
    column-gap: var(--gutter);
  }

  .plans-title {
    grid-column: 1 / 7;
    grid-row: 1;
  }

  .plans-floor-1 {
    grid-column: 1 / 6;
    grid-row: 2;
  }

  .plans-floor-2 {
    grid-column: 1 / 6;
    grid-row: 3;
    margin-top: var(--line-gap);
  }

  .plan-1 {
    grid-column: 7 / -1;
    grid-row: 1 / 6;
    align-self: end;
    justify-self: end;
    margin-top: 0;
  }

  .plan-2 {
    grid-column: 1 / 7;
    grid-row: 5;
  }

  .plans-download {
    grid-column: 1 / 7;
    grid-row: 6;
  }
}

/* Kitsam laud: kuuest veerust jääks alumine plaan ruuminimede jaoks väikeseks, seega seitse. */
@media (min-width: 1101px) and (max-width: 1365px) {
  .plans-grid {
    --plan-w: min(calc((100cqi - 11 * var(--gutter)) * 7 / 12 + 6 * var(--gutter)), max(67svh, 36rem));
  }

  .plans-title,
  .plan-2,
  .plans-download {
    grid-column: 1 / 6;
  }

  .plan-1 {
    grid-column: 6 / -1;
  }
}

/* Kitsal ei mahu nimed tubadesse: number joonisel, nimi all loetelus. */
@media (max-width: 700px) {
  .plan-1 .plan-n {
    display: inline;
    font-weight: 500;
  }

  .plan-1 .plan-t {
    display: none;
  }

  .plan-key {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .35rem var(--gutter);
    margin: var(--line-gap) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--t-note);
  }

  .plan-key .plan-n {
    display: inline-block;
    min-width: 1.6em;
  }
}

/* Hingetõmbepaus: täisekraani foto, lause all vasakul */
.pause {
  --pause-frame: calc(var(--bar-top) + var(--bar-h) + var(--bar-gap));
  --scrim-reach: 16svh;
  position: relative;
  height: 100svh;
  overflow: clip;
}

.pause-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 10%;
}

/* Püstkaader puudub: kitsas kärbe katuseakna, rõdude ja sillutise peal */
@media (orientation: portrait) {
  .pause-photo {
    object-position: 74% 50%;
  }
}

.pause-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  isolation: isolate;
  padding: 0 var(--pad-x) var(--pause-frame);
  color: var(--ground);
}

/* Tumendus: matt must, sisule ankurdatud, täislaiuses, koosinuskõveraga */
.pause-text::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  top: calc(var(--scrim-reach) * -1);
  background: linear-gradient(to top,
    rgba(0, 0, 0, .58) 0,
    rgba(0, 0, 0, .58) calc(100% - var(--scrim-reach)),
    rgba(0, 0, 0, .558) calc(100% - var(--scrim-reach) * .875),
    rgba(0, 0, 0, .495) calc(100% - var(--scrim-reach) * .75),
    rgba(0, 0, 0, .401) calc(100% - var(--scrim-reach) * .625),
    rgba(0, 0, 0, .29) calc(100% - var(--scrim-reach) * .5),
    rgba(0, 0, 0, .179) calc(100% - var(--scrim-reach) * .375),
    rgba(0, 0, 0, .085) calc(100% - var(--scrim-reach) * .25),
    rgba(0, 0, 0, .022) calc(100% - var(--scrim-reach) * .125),
    rgba(0, 0, 0, 0) 100%);
}

.pause-line {
  grid-column: 1 / 9;
}

.pause-line span {
  display: block;
  text-wrap: balance;
}

/* Maja ja tehnika: tekst kolmes veerus, madal lai kaader selle all */
.tech {
  padding: var(--sec) var(--pad-x);
}

.tech-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}

.tech-photo {
  grid-column: 1 / -1;
  overflow: hidden;
  aspect-ratio: 3 / 1;
  margin-top: var(--head-gap);
}

.tech-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
}

.tech-grid .section-title {
  grid-column: 1 / 5;
}

.tech-grid .lead {
  grid-column: 5 / 9;
}

.tech-body {
  grid-column: 9 / -1;
  max-width: 46ch;
}

/* Asukoht: tekst vasakul, kaart paremal ilma raamita. Tänavad OSM-ist, värvid tokenitest, sildid päris tekst. */
.walk {
  padding: 0 var(--pad-x) var(--sec);
  scroll-margin-top: var(--sec);
}

.walk-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  /* Kaks sõltumatut tulpa: vasakul pealkiri → loend, paremal sissejuhatus → kaart (kasutaja visand 2026-11-08).
     Keskmine 1fr rida võtab sissejuhatuse ja loendi üleulatuse, nii et esimene rida jääb pealkirja kõrguseks. */
  grid-template-rows: auto 1fr auto;
  column-gap: var(--gutter);
}

.walk-head {
  display: contents;
}

.walk-head .section-title {
  grid-column: 1 / 6;
  grid-row: 1;
}

.walk-head .lead {
  grid-column: 6 / -1;
  grid-row: 1 / 3;
}

.walk-list {
  grid-column: 1 / 6;
  grid-row: 2 / 4;
  margin-top: var(--head-gap);
}

.walk-row {
  padding-block: var(--gap);
  border-top: 1px solid var(--rule);
}

.walk-row h3 {
  margin-bottom: .5rem;
}

.walk-row p {
  max-width: 46ch;
}

/* Viimase lõigu all sektsiooni vahe, mitte rea vahe */
.walk-row:last-child {
  padding-bottom: 0;
}

/* Kaardi all, endise OSM-i viite kohal (kasutaja 2026-11-07) */
.walk-streetview {
  margin-top: .75rem;
}

.walk-streetview a {
  position: relative;
  display: inline-block;
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
}

/* Allajoon kastina, et see tõmbuks hoveril paremale ära (Kalamaja järgi). top 1.4em = endine underline-offset .3em reakõrgusel 1.6. */
.plans-download::after,
.walk-streetview a::after,
.menu-contact a::after,
.closing-contact a::after,
.faq-card a[href^="tel:"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 1.4em;
  height: 1px;
  background: var(--accent);
  transform-origin: right center;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .plans-download::after,
  .walk-streetview a::after,
  .menu-contact a::after,
  .closing-contact a::after,
  .faq-card a[href^="tel:"]::after {
    transition: none;
  }
}

.walk-map {
  grid-column: 6 / -1;
  grid-row: 3;
  margin: var(--head-gap) 0 0;
}

.map-stage {
  --map-line: color-mix(in srgb, var(--ink) 28%, transparent);
  position: relative;
  aspect-ratio: 800 / 760;
}

.map-north {
  position: absolute;
  right: 3.5%;
  top: 0;
  width: 1em;
  margin-right: -.5em;
  color: var(--soft);
  font-size: var(--t-note);
  line-height: 1;
  text-align: center;
}

.map-stage svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.map-area {
  fill: var(--surface);
}

.map-minor,
.map-major,
.map-leader,
.map-homeline {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.map-minor {
  stroke: var(--map-line);
  stroke-width: 1;
}

.map-major {
  stroke: var(--map-line);
  stroke-width: 2;
}

.map-leader {
  stroke: var(--soft);
  stroke-width: 1;
}

.map-homeline {
  stroke: var(--accent);
  stroke-width: 1.5;
}

.map-dot {
  fill: var(--ink);
  r: 4.5px;
}

.map-home {
  fill: var(--accent);
  stroke: var(--ground);
  stroke-width: 3;
  r: 11px;
}

.map-places {
  margin: 0;
  padding: 0;
  list-style: none;
}

.map-place {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  padding: .1em .45em;
  transform: translate(var(--ax, 0), var(--ay, -50%));
  background: var(--ground);
  color: var(--ink);
  font-size: var(--t-body);
  line-height: 1.25;
  white-space: nowrap;
}

.map-place span {
  display: block;
  color: var(--soft);
  font-size: var(--t-note);
}

.map-place.is-home {
  padding: .45em .8em;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--f-display);
  font-size: var(--t-h3);
  font-weight: var(--w-h3);
}

/* Jalutustee kaardil (assets/walk-route.js): lõigu või koha kohal ilmub jalgsi teekond kodust, kaart ja teised kohad astuvad tagasi.
   Ainult hiirega, klikki pole. Demo _demo/walk-route.html, valitud B. */
.map-route {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity .2s cubic-bezier(.4, 0, 1, 1);
}

.map-route.is-on {
  opacity: 1;
  transition: opacity .3s cubic-bezier(.22, 1, .36, 1);
}

.map-hit {
  fill: transparent;
  pointer-events: none;
}

.map-area,
.map-minor,
.map-major,
.map-dot,
.map-leader[data-place],
.map-place[data-place] {
  transition: opacity .3s cubic-bezier(.22, 1, .36, 1);
}

.walk-row h3 {
  transition: color .22s cubic-bezier(.22, 1, .36, 1);
}

.walk-row.is-on h3 {
  color: var(--accent);
}

.is-routing .map-dot:not(.is-on),
.is-routing .map-leader[data-place]:not(.is-on),
.is-routing .map-place[data-place]:not(.is-on) {
  opacity: .25;
}

.is-routing :is(.map-area, .map-minor, .map-major) {
  opacity: .4;
}

@media (hover: hover) and (pointer: fine) {
  .map-hit {
    pointer-events: fill;
  }
}

/* Galerii: üks foto laval, all pisipildirida. Foto mahub koos pealkirja ja reaga ekraanile ega kärbita, püstfoto jääb terveks. */
.gallery {
  padding: var(--sec) var(--pad-x);
  background: var(--surface);
}

.gallery-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap);
  margin-bottom: var(--head-gap);
}

.gallery-tabs {
  display: flex;
  gap: 1.5em;
  font-size: var(--t-button);
}

.gallery-tabs button {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--soft);
  font: inherit;
  cursor: pointer;
}

.gallery-tabs button[aria-selected="true"] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
}

.gallery-stage {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1586 / 992;
  max-height: max(20rem, calc(100svh - 16rem));
  background: var(--ground);
  /* Rõhtne libistus vahetab fotot (assets/gallery.js), leht kerib edasi püsti */
  touch-action: pan-y pinch-zoom;
}

.gallery-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gallery-photo.is-landscape {
  object-fit: cover;
}

/* Klõpsiala kogu foto peal, avab täisvaate. Nooled jäävad selle kohale. */
.gallery-open {
  position: absolute;
  z-index: 1;
  inset: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.gallery-arrow {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}

.gallery-arrow svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.gallery-stage .gallery-arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  translate: 0 -50%;
  background: var(--ground);
}

.gallery-prev {
  left: clamp(.6rem, 1.5vw, 1.2rem);
}

.gallery-next {
  right: clamp(.6rem, 1.5vw, 1.2rem);
}

.gallery-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--gutter);
  align-items: center;
  margin-top: .7rem;
}

.gallery-thumbs {
  display: flex;
  gap: .55rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.gallery-thumbs::-webkit-scrollbar {
  display: none;
}

.gallery-thumb {
  flex: none;
  overflow: hidden;
  width: clamp(74px, 9vw, 116px);
  aspect-ratio: 3 / 2;
  padding: 0;
  border: 0;
  background: var(--ground);
  opacity: .45;
  cursor: pointer;
  transition: opacity .18s cubic-bezier(.25, 1, .5, 1);
}

.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-thumb.is-active {
  opacity: 1;
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}

@media (hover: hover) and (pointer: fine) {
  /* Foto suureneb laval aeglaselt (Kalamaja järgi), lava lõikab. Püsiv will-change: lõpus ei teki ümberrasterdamise hüpet. */
  .gallery-photo {
    will-change: scale;
    transition: scale 1.1s cubic-bezier(.22, 1, .36, 1);
  }

  .gallery-stage:hover .gallery-photo {
    scale: 1.025;
  }

  .gallery-thumb:not(.is-active):hover {
    opacity: .75;
  }
}

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

  .gallery-stage:hover .gallery-photo {
    scale: none;
  }
}

.gallery-count {
  color: var(--soft);
  font-size: var(--t-note);
  white-space: nowrap;
}

/* Andmed: rühm, võti ja väärtus lehe veergude joontel 1, 4, 7. Suurem on ainult hind. */
.specs {
  padding: var(--sec) var(--pad-x);
}

.specs .section-title {
  margin-bottom: var(--head-gap);
}

.specs-group,
.specs-foot {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}

.specs-group {
  align-items: baseline;
  border-top: 1px solid var(--rule);
}

.specs-more .specs-group {
  margin-top: var(--head-gap);
}

.specs-group .block-title {
  grid-column: 1 / 4;
}

.specs-group dl {
  grid-column: 4 / -1;
}

.specs-row {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: baseline;
  padding-block: .85rem;
  border-top: 1px solid var(--rule);
}

.specs-row:first-child {
  border-top: 0;
}

.specs-row.is-price {
  border-top-color: var(--ink);
}

.specs-label {
  grid-column: 1 / 4;
  color: var(--soft);
}

.specs-value {
  grid-column: 4 / -1;
}

.specs-foot {
  margin-top: var(--line-gap);
}

/* Kaks silti samas lahtris: nupu laius ei muutu, täidetud pind jääb päringule */
.specs-toggle {
  display: inline-grid;
  grid-column: 4 / -1;
  justify-self: start;
  padding: .74em 1.3em .8em;
  border: 1px solid var(--ink);
  background: none;
  color: var(--ink);
  font-family: var(--f-display);
  font-size: var(--t-button);
  font-weight: var(--w-button);
  line-height: 1;
  cursor: pointer;
}

.specs-toggle[hidden] {
  display: none;
}

.specs-toggle span {
  grid-area: 1 / 1;
  white-space: nowrap;
}

.specs-toggle[aria-expanded="false"] .when-open,
.specs-toggle[aria-expanded="true"] .when-closed {
  visibility: hidden;
}

/* Korteri vaatamine: kaar samal teljel mis heros. Vasakus tulbas tekst kaare ülaservas,
   kontakt ja nupp kaare alumise serva joonel, parem pool jääb tühjaks. */
.closing {
  padding: var(--sec) var(--pad-x) var(--line-gap);
  background: var(--surface);
}

.closing-title span {
  white-space: nowrap;
}

.closing-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  min-height: clamp(26rem, 62svh, 44rem);
  margin-top: var(--head-gap);
}

.closing-side {
  grid-column: 1 / 4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--line-gap);
}

.closing-copy p + p {
  margin-top: .9rem;
}

/* Kontakt → nupp sama vahe kui menüüs (--line-gap) */
.closing-offer {
  display: grid;
  justify-items: start;
  gap: var(--line-gap);
}

.closing-contact {
  display: grid;
  justify-items: start;
  gap: .2rem;
  font-style: normal;
}

.closing-contact .block-title {
  margin-bottom: .4rem;
}

.closing-contact a {
  position: relative;
  color: inherit;
  text-decoration: none;
}

.closing-arch {
  position: relative;
  grid-column: 4 / 10;
  overflow: hidden;
  border-radius: 999px 999px 0 0;
  background: var(--ground);
}

.closing-arch img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 49% 70%;
}

/* Laual sama küljesuhe mis hero kaarel: lagi on kaare laius × 1.1, mitte 44rem (see hoidis suurel ekraanil 1 : 1) */
@media (min-width: 1001px) {
  .closing-row {
    container-type: inline-size;
  }

  .closing-arch {
    min-height: clamp(26rem, 62svh, (50cqi - var(--gutter) / 2) * 1.1);
  }
}

/* Joon ei istu kaare vastas: kohal ja all sama vahe, nagu faktirea joonel */
.closing-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  column-gap: var(--gutter);
  row-gap: .6rem;
  margin-top: var(--line-gap);
  padding-top: var(--line-gap);
  border-top: 1px solid var(--rule);
  font-size: var(--t-note);
  line-height: 1.5;
}

.closing-share {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
  white-space: nowrap;
  cursor: pointer;
}

.closing-note {
  grid-column: 1 / -1;
  max-width: 80ch;
  color: var(--soft);
}

/* Külgveerud jääksid kitsaks: kaar keskele, tekst selle alla */
@media (max-width: 1000px) {
  .closing-row {
    min-height: 0;
    row-gap: 2rem;
  }

  .closing-arch {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
    width: min(100%, 76svh, 44rem);
    aspect-ratio: 1 / 1;
  }

  .closing-side {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: end;
  }

  .closing-copy {
    grid-column: 1 / 8;
  }

  .closing-offer {
    grid-column: 8 / -1;
  }

  .hero {
    display: block;
    min-height: 0;
    padding-bottom: clamp(2.5rem, 6vw, 4rem);
  }

  .hero-arch {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
    width: min(100%, 76svh, 44rem);
    aspect-ratio: 1 / 1;
  }

  .hero-copy {
    grid-column: 1 / 8;
    grid-row: 2;
    align-self: start;
    padding: 2rem 0 0;
  }

  .hero-offer {
    grid-column: 9 / -1;
    grid-row: 2;
    align-self: end;
    padding: 2rem 0 0;
  }

  .tech-grid .section-title {
    grid-column: 1 / -1;
    margin-bottom: var(--title-lead);
  }

  .tech-grid .lead {
    grid-column: 1 / 7;
  }

  .tech-body {
    grid-column: 7 / -1;
  }
}

/* Maja lugu: kolm veergu jääks kitsaks, tänavavaade üle laiuse, kaks fotot selle all */
@media (max-width: 900px) {
  /* Saun: WC-teksti tulp jääks kitsaks, kõik ühte tulpa */
  .sauna-row {
    display: flex;
    flex-direction: column;
  }

  .sauna-row + .sauna-row {
    align-items: stretch;
    margin-top: 1.25rem;
  }

  .sauna-top {
    order: -1;
    margin-bottom: 1.5rem;
  }

  .sauna-steam {
    width: 78%;
  }

  .sauna-bath {
    align-self: stretch;
    margin-top: 1.25rem;
  }

  .sauna-note {
    margin-top: 1rem;
  }

  .sauna-wc {
    order: 3;
    align-self: flex-start;
    width: 48%;
    margin-top: 2rem;
    aspect-ratio: 4 / 5;
  }

  .sauna-guest {
    order: 4;
    margin-top: 1rem;
  }

  .story-grid {
    grid-template-rows: none;
  }

  /* Reavahe tuleb ruudustikust, kokku pealkiri → foto = --head-gap */
  .story-grid .section-title {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-bottom: calc(var(--head-gap) - var(--story-row));
  }

  .story-1 {
    grid-column: 1 / -1;
    grid-row: 2 / 4;
  }

  .story-2 {
    grid-column: 1 / 8;
    grid-row: 4 / 6;
    margin-top: 2.5rem;
  }

  .story-3 {
    grid-column: 8 / -1;
    grid-row: 4 / 6;
    margin-top: 2.5rem;
  }

  .walk-grid {
    grid-template-rows: none;
  }

  .walk-head,
  .walk-map,
  .walk-list {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .walk-head {
    display: block;
    margin-bottom: var(--head-gap);
  }

  .walk-head .lead {
    margin-top: var(--title-lead);
  }

  .walk-map {
    margin-top: 0;
  }

  /* Kaart → loend sama vahega kui pealkiri → kaart */
  .walk-list {
    margin-top: var(--head-gap);
  }

  .walk-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    column-gap: var(--gutter);
  }

  .walk-row h3 {
    margin-bottom: 0;
  }

  /* Andmed: rühm oma real, võti ja väärtus kõrvuti. Hinna tulp annab vajadusel järele, hind ei lähe üle serva. */
  .specs-group,
  .specs-foot {
    display: block;
  }

  .specs-group {
    border-top: 0;
  }

  .specs-group .block-title {
    margin-bottom: .8rem;
  }

  .specs-row {
    grid-template-columns: max(8.5rem, 40%) minmax(0, 1fr);
  }

  .specs-row:first-child {
    border-top: 1px solid var(--rule);
  }

  .specs-row.is-price {
    grid-template-columns: minmax(4rem, max(8.5rem, 40%)) max-content;
  }

  .specs-label,
  .specs-value {
    grid-column: auto;
  }
}

/* Köök: tekstiveerg vajab kitsamal ekraanil rohkem laiust */
@media (max-width: 1200px) {
  .kitchen-open .kitchen-copy {
    grid-column: 8 / -1;
  }

  .kitchen-sep .kitchen-copy {
    grid-column: 1 / 6;
  }
}

/* Lai tuba: kaks tulpa jääks kitsaks, järjekord pealkiri, lõik, kaar, kamin, teine lõik */
@media (max-width: 760px) {
  .pause-line {
    grid-column: 1 / -1;
  }

  .tech-grid {
    display: flex;
    flex-direction: column;
  }

  .tech-photo {
    aspect-ratio: 1 / 1;
    margin-top: 2rem;
  }

  .tech-photo img {
    object-position: 58% 50%;
  }

  .tech-body {
    margin-top: 1rem;
  }

  .walk-row {
    display: block;
  }

  .walk-row h3 {
    margin-bottom: .5rem;
  }

  .map-place {
    font-size: var(--t-note);
  }

  .map-place.is-home {
    font-size: var(--t-body);
  }

  .map-dot {
    r: 8px;
  }

  .map-home {
    r: 17px;
    stroke-width: 4;
  }

  /* Madalal fotol jääks täismõõdus nupp raskeks, klõpsiala jääb samaks */
  .gallery-stage .gallery-arrow {
    width: 34px;
    height: 34px;
  }

  .gallery-stage .gallery-arrow::after {
    content: '';
    position: absolute;
    inset: -6px;
  }

  .gallery-stage .gallery-arrow svg {
    width: 16px;
    height: 16px;
  }

  .bed-grid {
    display: flex;
    flex-direction: column;
  }

  .bed-top {
    order: 1;
    padding-bottom: 1.5rem;
  }

  .bed-stair {
    order: 2;
    aspect-ratio: 3 / 4;
  }

  .bed-room {
    order: 3;
    margin-top: 1.5rem;
  }

  .bed-closet {
    order: 4;
    width: 78%;
    margin-top: 2.5rem;
  }

  .bed-note {
    order: 5;
    margin-top: 1rem;
  }

  .kitchen-row {
    display: flex;
    flex-direction: column;
  }

  .kitchen-row + .kitchen-row {
    margin-top: 2.5rem;
  }

  .kitchen-open .kitchen-copy {
    display: contents;
  }

  .kitchen-open .section-title {
    order: 1;
    margin-bottom: var(--head-gap);
  }

  .kitchen-open figure {
    order: 2;
    width: 100%;
  }

  .kitchen-open .kitchen-copy > div {
    order: 3;
    margin-top: 1rem;
  }

  .kitchen-sep figure {
    order: -1;
    width: 100%;
  }

  .kitchen-sep .kitchen-copy {
    margin-top: 1rem;
  }

  .room-grid {
    display: flex;
    flex-direction: column;
  }

  .room-left,
  .room-right {
    display: contents;
  }

  .room-left .section-title { order: 1; }
  .room-left .lead { order: 2; }
  .room-arch { order: 3; margin-top: 2rem; }

  .room-marble {
    order: 4;
    width: 78%;
    margin-top: 2.5rem;
  }

  .room-note {
    order: 5;
    padding-top: 1rem;
  }
}

/* Saun tahvlil: fotod paarikaupa, muidu läheks sektsioon liiga kõrgeks */
@media (min-width: 601px) and (max-width: 1000px) {
  .sauna-row {
    display: grid;
  }

  .sauna-row + .sauna-row {
    align-items: end;
    margin-top: var(--head-gap);
  }

  .sauna-top {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-bottom: var(--line-gap);
  }

  .sauna-steam {
    grid-column: 1 / 6;
    grid-row: 2;
    width: auto;
  }

  .sauna-bath {
    grid-column: 6 / -1;
    grid-row: 2;
    align-self: end;
    margin-top: 0;
  }

  .sauna-sink {
    grid-column: 1 / 7;
    grid-row: 1;
  }

  .sauna-note {
    grid-column: 7 / -1;
    grid-row: 1;
    margin-top: 0;
  }

  .sauna-wc {
    grid-column: 1 / 4;
    grid-row: 2;
    align-self: start;
    width: auto;
    margin-top: var(--head-gap);
    aspect-ratio: 4 / 5;
  }

  .sauna-guest {
    grid-column: 4 / -1;
    grid-row: 2;
    margin-top: 0;
  }
}

/* Telefon: kõik ühes tulbas */
@media (max-width: 600px) {
  .closing-copy,
  .closing-offer {
    grid-column: 1 / -1;
  }

  .story-grid {
    --story-row: 0px;
    display: block;
  }

  .story-block {
    display: block;
    margin-top: 2.5rem;
  }

  .story-1 {
    margin-top: 0;
  }

  .story-text {
    margin-top: 1rem;
  }

  /* Peauks täislaiuses nagu rõduukse kaar, trepikoda 16 : 10 nagu maja algus */
  .story-3 figure {
    aspect-ratio: 16 / 10;
  }

  .hero {
    --t-name: clamp(3rem, 19vw, 8rem);
  }

  .hero-name {
    flex-direction: column;
    gap: 0;
  }

  .hero-name span:last-child {
    align-self: flex-end;
  }

  .hero-row {
    display: flex;
    flex-direction: column;
  }

  .hero-arch {
    order: -1;
    width: 100%;
    aspect-ratio: 4 / 5;
  }

  .hero-offer {
    align-self: flex-start;
    padding-top: 1.75rem;
  }

  .fig {
    grid-column: span 6;
  }

  .fig-row {
    row-gap: 1.5rem;
  }

  /* Kamin, riietusruum ja saun täislaiuses, nende all ja „Eraldi” tekst vasakus servas */
  .room-marble,
  .bed-closet,
  .sauna-steam {
    align-self: stretch;
    width: 100%;
  }

  .room-note,
  .kitchen-sep .kitchen-copy,
  .bed-note {
    align-self: stretch;
  }

  /* Külalise WC ja esiku sein 16 : 10 (WC jääb endise laiusega) */
  .sauna-wc,
  .tech-photo {
    aspect-ratio: 16 / 10;
  }
}

/* Menüü: täisekraan, sisu üks tulp keskel. */
html.menu-open,
html.enq-open,
html.faq-open,
html.lightbox-open {
  overflow: hidden;
}

html.menu-open .bar,
html.enq-open .bar {
  z-index: 40;
}

html.menu-open .palette-btn,
html.enq-open .palette-btn {
  visibility: hidden;
}

.menu {
  position: fixed;
  z-index: 30;
  inset: 0;
  padding: 0 var(--edge);
  overflow-y: auto;
  background: var(--ground);
}

@supports not selector(::-webkit-scrollbar) {
  .menu {
    scrollbar-width: thin;
  }
}

/* Üks tulp ekraani keskel mõlemas suunas: lingid, joon, kontakt, nupp (kasutaja 2026-11-07). Tulba laius tuleb pikimast reast. */
.menu-frame {
  display: grid;
  grid-template-columns: max-content;
  justify-content: center;
  align-content: center;
  min-height: 100svh;
  padding-block: calc(var(--bar-top) + var(--bar-h));
}

.menu-links {
  list-style: none;
  font-family: var(--f-display);
  font-size: var(--t-menu);
  font-weight: var(--w-menu);
  line-height: 1.16;
}

.menu-links a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* Palett C-s on aktsent sama mis tint, seega kannab olekut ka joon. */
.menu-links a[aria-current] {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .12em;
}

/* Joon linkide all: kohal, all ja nupu ees sama vahe */
.menu-foot {
  display: grid;
  justify-items: start;
  gap: var(--line-gap);
  margin-top: var(--line-gap);
  padding-top: var(--line-gap);
  border-top: 1px solid var(--rule);
}

.menu-contact {
  display: grid;
  justify-items: start;
  font-style: normal;
}

.menu-name {
  font-family: var(--f-display);
  font-size: var(--t-menu-name);
  font-weight: var(--w-menu-name);
  line-height: 1.3;
}

/* Nimi, telefon ja e-post sama vahedega kui jaluses (.closing-contact); päringuakna kontakt jääb puutumata */
.menu-foot .menu-contact {
  gap: .2rem;
}

.menu-foot .menu-name {
  margin-bottom: .4rem;
}

.menu-contact a {
  position: relative;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* Ühine tumendus kogu lehe peal, ka päise. Sama klass läheb KKK-le. */
.overlay-dim {
  position: fixed;
  z-index: 30;
  inset: 0;
  background: color-mix(in srgb, var(--ink) 45%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Päringuaken: täiskõrgusega paneel paremal, telefonis täisekraan. */
.enq {
  --enq-cell: clamp(2.75rem, 6svh, 4.25rem);
  --enq-gap: clamp(1rem, 3.2svh, 2.25rem);
  --enq-day: clamp(2.25rem, 5svh, 3.5rem);
  --enq-sum: clamp(.75rem, 2svh, 1.5rem);
  position: fixed;
  z-index: 31;
  inset: 0 0 0 auto;
  display: flex;
  flex-direction: column;
  width: min(100%, clamp(30rem, 42vw, 44rem));
  padding: 0 var(--edge) 0 clamp(1.5rem, 3.4vw, 3.5rem);
  overflow-y: auto;
  outline: none;
  background: var(--ground);
  color: var(--ink);
}

.enq[hidden] {
  display: none;
}

@supports not selector(::-webkit-scrollbar) {
  .enq,
  .enq-field textarea {
    scrollbar-width: thin;
  }
}

/* Kõik sammud ühes lahtris: paneeli sisu kõrgus, pealkiri ja nupp ei hüppa sammude vahel. */
.enq-flow {
  display: grid;
  flex: 1 0 auto;
  min-width: 0;
}

.enq-step {
  display: flex;
  grid-area: 1 / 1;
  flex-direction: column;
  min-width: 0;
}

.enq-step:not(.is-on) {
  visibility: hidden;
}

/* Pealkiri X-i real: suurtähtede ülaserv = X-i ülaserv (.13em on rea ülaosa tühi riba). */
.enq-title {
  margin-top: calc(var(--bar-top) + (var(--bar-h) - 20px) / 2 - .13em);
  padding-right: 3rem;
}

/* Pealkirja all: valik lausena teisel sammul, tänu kolmandal */
.enq-sub {
  margin-top: .4rem;
  max-width: none;
}

.enq-form {
  display: grid;
  gap: var(--enq-gap);
  margin-top: auto;
  padding-top: var(--gap);
}

/* Küsimus ja vajadusel päevade kerimine samal real */
.enq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  min-height: 1.75rem;
  margin-bottom: .4rem;
}

.enq-range {
  display: flex;
  align-items: center;
  font-size: var(--t-note);
}

.enq-range-text {
  padding: 0 .25rem;
  white-space: nowrap;
}

.enq-arrow {
  display: grid;
  place-items: center;
  width: 32px;
  height: 44px;
  margin-block: -8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}

.enq-arrow:last-child {
  margin-right: -12px;
}

.enq-arrow[disabled] {
  opacity: .3;
  cursor: default;
}

.enq-arrow svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

/* Üks valikute keel: peenjoontega read, valitud lahter tindiga */
.enq-grid {
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--rule);
  background: var(--rule);
}

.enq-opt {
  position: relative;
  display: block;
  background: var(--ground);
}

.enq-opt input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.enq-opt span {
  display: grid;
  place-content: center;
  min-height: var(--enq-cell);
  padding: .25rem .15rem;
  text-align: center;
  line-height: 1.22;
}

.enq-opt small {
  font-size: var(--t-note);
}

.enq-times .enq-opt span {
  min-height: calc(var(--enq-cell) + .5rem);
}

/* Nädalapäev ühe korra veeru kohal, lahtris ainult kuupäev */
.enq-wd {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: .3rem;
  padding-inline: 1px;
  font-size: var(--t-note);
  line-height: 1.3;
  text-align: center;
  color: var(--soft);
}

.enq-days .enq-opt span {
  min-height: var(--enq-day);
}

.enq-opt input[disabled] {
  cursor: default;
}

.enq-opt input[disabled] + span {
  color: color-mix(in srgb, var(--ink) 30%, transparent);
}

.enq-opt input:checked + span {
  background: var(--ink);
  color: var(--ground);
}

.enq-note {
  display: grid;
  margin-top: .5rem;
  font-size: var(--t-note);
  line-height: 1.4;
  color: var(--soft);
}

.enq-note p {
  grid-area: 1 / 1;
  visibility: hidden;
}

.enq-step.is-on .enq-note p.is-on {
  visibility: visible;
}

/* Jalus: tagasi vasakul, tegevus paremal */
.enq-foot {
  margin-top: var(--enq-gap);
  padding-bottom: calc(var(--bar-top) + env(safe-area-inset-bottom));
}

.enq-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
}

.enq-actions .cta {
  margin-left: auto;
}

.enq-back {
  margin-block: -.5em;
  padding: .5em 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
  cursor: pointer;
}

/* Väljad algavad kohe pealkirja all, sõnumiväli võtab kogu ülejäänud ruumi ja kerib enda sees. */
[data-step="2"] .enq-form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  margin-top: 0;
}

.enq-fields {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: clamp(.6rem, 2svh, 1.25rem);
}

.enq-field-msg {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.enq-field label {
  display: block;
  font-size: var(--t-note);
  color: var(--soft);
}

.enq-field input,
.enq-field textarea {
  display: block;
  width: 100%;
  padding: .3em 0 .4em;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  outline: none;
  background: none;
  color: var(--ink);
  font: inherit;
  line-height: 1.45;
  resize: none;
  cursor: text;
}

.enq-field textarea {
  padding-right: .5rem;
}

.enq-field-msg textarea {
  flex: 1 1 auto;
  min-height: 3.6em;
  overflow-y: auto;
}

.enq-field input:focus,
.enq-field textarea:focus {
  border-bottom-color: var(--ink);
}

.enq-field input:-webkit-autofill,
.enq-field input:-webkit-autofill:hover,
.enq-field input:-webkit-autofill:focus,
.enq-field textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  -webkit-box-shadow: inset 0 0 0 1000px var(--ground);
  box-shadow: inset 0 0 0 1000px var(--ground);
  transition: background-color 9999s ease-in-out 0s;
}

.enq-error {
  display: none;
  margin-top: .3em;
  font-size: var(--t-note);
  line-height: 1.3;
  color: var(--accent);
}

.enq-field.has-error input {
  border-bottom-color: var(--accent);
}

.enq-field.has-error .enq-error {
  display: block;
}

/* Kokkuvõte: kompaktne plokk kahe peenjoone vahel, read ilma oma joonteta.
   Väiksemal ekraanil seisab uks paneeli alumisel serval, kontakt selle kõrval. */
.enq-summary {
  display: grid;
  row-gap: clamp(.2rem, .8svh, .5rem);
  margin-top: var(--enq-sum);
  padding-block: var(--enq-sum);
  border-block: 1px solid var(--rule);
}

.enq-summary > div {
  display: grid;
  grid-template-columns: minmax(6rem, 28%) minmax(0, 1fr);
  column-gap: var(--gutter);
}

.enq-summary dt {
  color: var(--soft);
}

.enq-summary dd {
  overflow-wrap: anywhere;
}

.enq-door {
  display: grid;
  flex: 1 1 0;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--gutter);
  align-items: end;
  min-height: 10rem;
  margin-top: var(--enq-gap);
  container-type: size;
}

.enq-arch {
  width: min(100%, 80cqh);
  height: 100cqh;
  overflow: hidden;
  border-radius: 999px 999px 0 0;
}

.enq-arch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
  transform: scale(1.124);
  transform-origin: 50% 100%;
}

.enq-door .menu-contact {
  padding-bottom: calc(var(--bar-top) + env(safe-area-inset-bottom));
}

.enq-visual {
  display: none;
}

@media (max-width: 700px) {
  .enq {
    width: 100%;
    padding-inline: var(--edge);
  }
}

@media (min-width: 701px) {
  .enq-door {
    min-height: clamp(10rem, 20svh, 18rem);
  }
}

/* Madal sülearvuti: kaar ei mahu, valikud võtavad vaba ruumi endale. */
@media (min-width: 701px) and (min-height: 720px) and (max-height: 859px) {
  .enq {
    --enq-cell: 7.5svh;
    --enq-gap: 2.25rem;
    --enq-day: 6.5svh;
  }
}

/* Vaba ruumi täidab kaar: madalal poolkuu, kõrgemal täislaiuses uks. Pealkiri seisab kohe oma küsimuste kohal. */
@media (min-width: 701px) and (min-height: 860px), (max-width: 700px) and (min-height: 640px) {
  .enq-visual {
    display: block;
    flex: 1 1 0;
    min-height: 0;
    margin-top: var(--bar-top);
    container-type: size;
  }

  .enq-window {
    position: relative;
    width: min(100%, 200cqh);
    height: 100%;
    overflow: hidden;
    border-radius: 999px 999px 0 0;
  }

  .enq-window img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
    object-fit: cover;
  }

  .enq-window img.is-on {
    visibility: visible;
  }

  .enq-window img[data-visual="3"] {
    object-position: 50% 100%;
    transform: scale(1.124);
    transform-origin: 50% 100%;
  }

  .enq-flow {
    flex: 0 0 auto;
  }

  .enq-title {
    margin-top: var(--enq-gap);
    padding-right: 0;
  }

  /* Kokkuvõte: uks on kaares ja saab kogu vaba ruumi, kontakt samade veergudega all. */
  .enq.is-done .enq-step:not(.is-on) {
    display: none;
  }

  .enq-door {
    display: block;
    flex: 0 0 auto;
    min-height: 0;
    margin-top: 0;
    container-type: normal;
  }

  .enq-door .enq-arch {
    display: none;
  }

  .enq-door .menu-contact {
    grid-template-columns: minmax(6rem, 28%) minmax(0, 1fr);
    column-gap: var(--gutter);
    padding-top: var(--enq-sum);
  }

  .enq-door .menu-name {
    grid-row: span 2;
    white-space: nowrap;
  }

  .enq-door .menu-contact a {
    grid-column: 2;
    justify-self: start;
  }
}

/* KKK: ümmargune nupp ekraani nurgas ja selle kohal paneel. Nähtavust arvutab assets/faq.js. */
:root {
  --faq-size: clamp(3.25rem, 3.6vw, 3.75rem);
  --faq-gap: .75rem;
  --faq-pad: clamp(1.125rem, 1.6vw, 1.75rem);
  --faq-low: calc(var(--bar-top) + env(safe-area-inset-bottom));
}

/* Nupp ei joondu sisukonteineriga: mõlemast servast sama vahe */
.faq-btn {
  position: fixed;
  z-index: 15;
  right: var(--bar-top);
  bottom: var(--faq-low);
  display: grid;
  place-items: center;
  width: var(--faq-size);
  height: var(--faq-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--ground);
  cursor: pointer;
}

.faq-btn.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

html.faq-open .faq-btn {
  z-index: 32;
}

.faq-btn svg {
  grid-area: 1 / 1;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* Küsimärk tekstikirjas: kõrgus ja joon X-iga sarnased, mõõdetud tindikast on ringi keskel (nihet ei vaja) */
.faq-mark {
  grid-area: 1 / 1;
  font-family: var(--f-body);
  font-size: var(--t-h3);
  font-weight: 300;
  line-height: 1;
}

.faq-btn .i-x,
html.faq-open .faq-mark {
  display: none;
}

html.faq-open .faq-btn .i-x {
  display: block;
}

@media (hover: hover) and (pointer: fine) {
  .faq-btn { transition: background-color .3s ease; }
  .faq-btn:hover { background: var(--faq-hover); }
}

/* Paneel seisab nupu kohal, parem serv nupuga samal joonel */
.faq-panel {
  position: fixed;
  z-index: 31;
  right: var(--bar-top);
  bottom: calc(var(--faq-low) + var(--faq-size) + var(--faq-gap));
  display: flex;
  flex-direction: column;
  width: min(100% - 2 * var(--bar-top), clamp(22rem, 28vw, 30rem));
  max-height: calc(100svh - var(--bar-top) - var(--faq-low) - var(--faq-size) - var(--faq-gap));
  outline: none;
  background: var(--ground);
  color: var(--ink);
}

.faq-panel[hidden] {
  display: none;
}

.faq-head {
  flex: none;
  padding: var(--faq-pad) var(--faq-pad) clamp(.75rem, 1.2vw, 1.25rem);
  text-wrap: balance;
}

.faq-body {
  flex: 1 1 auto;
  min-height: 0;
  padding-inline: var(--faq-pad);
  overflow-y: auto;
}

@supports not selector(::-webkit-scrollbar) {
  .faq-body {
    scrollbar-width: thin;
  }
}

.faq-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.faq-item {
  border-top: 1px solid var(--rule);
}

.faq-q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap);
  width: 100%;
  padding: .8em 0 .85em;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}

.faq-q[aria-expanded="true"] {
  color: var(--accent);
}

/* Pluss ja miinus: täisarvulised seadmepikslid, miinus = püstlatt kaob */
.faq-pm {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: calc((1.35em - 14px) / 2);
  fill: currentColor;
  shape-rendering: crispEdges;
}

.faq-pm .h { x: 0; y: 6px; width: 14px; height: 2px; }
.faq-pm .v { x: 6px; y: 0; width: 2px; height: 14px; }

@media (min-resolution: 1.2dppx) and (max-resolution: 1.3dppx) {
  .faq-pm { width: 16px; height: 16px; margin-top: calc((1.35em - 16px) / 2); }
  .faq-pm .h { y: 7.2px; width: 16px; height: 1.6px; }
  .faq-pm .v { x: 7.2px; width: 1.6px; height: 16px; }
}

.faq-q[aria-expanded="true"] .v {
  opacity: 0;
}

.faq-a {
  max-width: 38ch;
  padding-bottom: 1em;
  color: var(--soft);
  line-height: 1.45;
}

/* Kaart: all pinnaribana paneeli servast servani, nii et järgmine samm on alati nupu lähedal */
.faq-card {
  display: grid;
  gap: clamp(.75rem, 1.1vw, 1.125rem);
  flex: none;
  padding: var(--faq-pad);
  background: var(--surface);
  line-height: 1.45;
}

.faq-card .cta {
  display: block;
  width: 100%;
  text-align: center;
}

.faq-card a {
  color: inherit;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
}

.faq-card a[href^="tel:"] {
  position: relative;
  text-decoration: none;
}

/* Madal ekraan: kinnitatud kaart ei jätaks küsimustele ruumi, kerib kogu paneel ja kaart jääb küsimuste järele */
@media (max-height: 620px) {
  .faq-panel {
    overflow-y: auto;
  }

  .faq-body {
    flex: none;
    overflow: visible;
  }
}

/* Kerimisriba koht jääb kerimisluku ajal alles ja selle värvib juure taust. Tumeda kihi kõrval peab see olema kihi toonis. */
html.faq-open {
  background: color-mix(in srgb, var(--ink) 45%, var(--ground));
}

html.lightbox-open {
  background: var(--ink);
}

/* Lightbox: foto täisvaates kogu lehe peal, ka päise. X menüünupu kohal, nooled külgedel, püstisel telefonil foto all. */
.lightbox {
  --lb-arrow-x: clamp(.6rem, 2vw, 1.6rem);
  position: fixed;
  z-index: 45;
  inset: 0;
  /* Külgvaru hoiab foto noolte ja X-i kõrval, mitte nende all */
  padding: clamp(2.6rem, 6vh, 4.5rem) max(var(--lb-arrow-x) + 48px + .5rem, var(--edge) + 36px);
  outline: none;
  background: var(--ink);
  color: var(--ground);
  touch-action: pan-y pinch-zoom;
}

.lightbox-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  width: 100%;
  height: 100%;
}

/* Foto ei kasva üle oma loomuliku suuruse */
.lightbox-img {
  grid-area: 1 / 1;
  min-width: 0;
  min-height: 0;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.lightbox-incoming {
  pointer-events: none;
}

.lightbox-close {
  position: absolute;
  z-index: 2;
  top: calc(var(--bar-top) + (var(--bar-h) - 44px) / 2);
  right: calc(var(--edge) - 8px);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.lightbox-close svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transform: translateX(4px);
}

.lightbox-nav {
  position: absolute;
  z-index: 2;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--ground) 28%, transparent);
  background: color-mix(in srgb, var(--ink) 40%, transparent);
  color: inherit;
  cursor: pointer;
}

.lightbox-nav svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.lightbox-prev {
  left: var(--lb-arrow-x);
}

.lightbox-next {
  right: var(--lb-arrow-x);
}

@media (max-width: 720px) and (orientation: portrait) {
  .lightbox {
    padding: calc(var(--bar-top) + 44px + .5rem) var(--edge) calc(var(--bar-top) + env(safe-area-inset-bottom) + 44px + .5rem);
  }

  .lightbox-nav {
    top: auto;
    bottom: calc(var(--bar-top) + env(safe-area-inset-bottom));
    translate: none;
    width: 44px;
    height: 44px;
    border: 0;
    background: none;
  }

  .lightbox-prev {
    left: calc(var(--edge) - 12px);
  }

  .lightbox-next {
    right: calc(var(--edge) - 12px);
  }
}

/* Hoverid Kalamaja järgi (kasutaja 2026-11-08). Juhtnupud ja tekstilingid lähevad hover-tooni (--hover: B aktsent, C soft),
   aktsendivärvi link tindiks, galerii nooled täituvad aktsendiga, lightboxi noole raam aktsendiks. Ainult hiirega.
   Faili lõpus, et võita samaväärsed puhkeoleku reeglid. CTA, KKK nupp, pisipildid, galerii foto, plaan ja kaart on oma plokkides. */
@media (hover: hover) and (pointer: fine) {
  .menu-btn,
  .menu-links a,
  .menu-contact a,
  .closing-contact a,
  .faq-card a[href^="tel:"],
  .closing-share,
  .plans-download,
  .walk-streetview a,
  .gallery-tabs button,
  .faq-q,
  .enq-arrow,
  .enq-opt span,
  .specs-toggle,
  .lightbox-close {
    transition: color .28s ease, border-color .28s ease;
  }

  .menu-btn:hover,
  .menu-links a:hover,
  .menu-contact a:hover,
  .closing-contact a:hover,
  .faq-card a[href^="tel:"]:hover,
  .closing-share:hover,
  .plans-download:hover,
  .gallery-tabs button[aria-selected="false"]:hover,
  .faq-q[aria-expanded="false"]:hover,
  .enq-arrow:not([disabled]):hover,
  .enq-opt input:not(:checked):not([disabled]):hover + span,
  .lightbox-close:hover {
    color: var(--hover);
  }

  .walk-streetview a:hover {
    color: var(--cta-hover);
  }

  .plans-download:hover::after,
  .walk-streetview a:hover::after,
  .menu-contact a:hover::after,
  .closing-contact a:hover::after,
  .faq-card a[href^="tel:"]:hover::after {
    transform: scaleX(0);
  }

  .specs-toggle:hover {
    border-color: var(--hover);
    color: var(--hover);
  }

  .gallery-stage .gallery-arrow {
    transition: background-color .28s ease, color .28s ease;
  }

  .gallery-stage .gallery-arrow:hover {
    background: var(--accent);
    color: var(--on-accent);
  }

  .lightbox-nav {
    transition: border-color .25s ease, background-color .25s ease, color .25s ease;
  }

  .lightbox-nav:hover {
    border-color: var(--hover);
    background: color-mix(in srgb, var(--ink) 70%, transparent);
  }
}

/* Kitsas püstine lightbox: nool ilma raamita, hover ainult värviga */
@media (hover: hover) and (pointer: fine) and (max-width: 720px) and (orientation: portrait) {
  .lightbox-nav:hover {
    background: none;
    color: var(--hover);
  }
}