/* CEZZ OF LONDON — lehe stiilid.
   Fondid: Ealing (display) + Axiome SM (tekst). Palett „Purjevalge ja veejoon" — suletud hulk. */

/* ---------- Fondid: ainult kasutatud lõiked, kadudeta woff2 (sama kontuur, hinting ja kerning kui algses otf-is) ---------- */
/* Ealing 300: Breath'i lause, lightboxi pealkiri · 400: kiirfaktide numbrid · 500: nimi, pealkirjad, hinnad, menüü.
   Axiome SM 300: tekst · 400 ja 500: sildid, alapealkirjad, nupud. (Exfont-failid; litsents enne live'i.) */
@font-face { font-family: "Ealing"; src: url("../font/ealing-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Ealing"; src: url("../font/ealing-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Ealing"; src: url("../font/ealing-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Axiome SM"; src: url("../font/axiome-sm-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Axiome SM"; src: url("../font/axiome-sm-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Axiome SM"; src: url("../font/axiome-sm-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* ---------- Tokenid ---------- */
:root {
  /* palett — ainult need toonid + läbipaistvus; scrim, tumendus ja lightbox must + alpha */
  --c-ground: #EDEEEB;
  --c-surface: #DEE0DE;
  --c-ink: #151B28;
  --c-soft: #5A6170;
  --c-accent: #9C2230;
  --rule: color-mix(in srgb, var(--c-ink) 16%, transparent);

  --f-display: "Ealing", sans-serif;
  --f-text: "Axiome SM", sans-serif;

  /* tüpograafia rollid */
  --t-h2: clamp(2rem, 2.9vw + .6rem, 4rem);
  --t-figure: clamp(1.6rem, 1.4vw + 1rem, 2.6rem);
  --t-lead: clamp(1.25rem, .55vw + 1rem, 1.6rem);
  --t-text: clamp(1rem, .2vw + .92rem, 1.125rem);
  --t-faq: clamp(.9375rem, .15vw + .9rem, 1rem);
  --t-label: clamp(.70rem, .15vw + .66rem, .78rem);
  /* menüü: h2 ja lead roll, aga sõltuvad ka ekraani kõrgusest (menüü ei keri madalas aknas).
     Lingid: pikim „Crew and systems" ≈ 7.8em mahub paneeli sisulaiusesse (/ 8); kaheksa lingi virn koos vahedega ≈ 11.5em
     mahub vabasse kõrgusesse (päis, kontakt ja vahed ≈ 15 % kõrgusest + 18.5rem) */
  --menu-w: clamp(21rem, 38vw, 40rem);
  --menu-pl: clamp(1.6rem, 4vw, 4.4rem);
  --t-menu: clamp(1.6rem, min((var(--menu-w) - var(--menu-pl) - var(--edge)) / 8, (85svh - 18.5rem) / 11.5), 4rem);
  --t-menu-name: clamp(1.1rem, min(.55vw + 1rem, 2.9svh), 1.6rem);

  /* ruum */
  --edge: clamp(1rem, 4.5vw, 5rem);
  --content-max: 90rem;
  --frame-max: 120rem;                       /* foto ja päis kuni 1920 px */
  --pad-x: max(var(--edge), calc((100% - var(--content-max)) / 2));
  --col-gap: clamp(1rem, 2vw, 2.5rem);    /* 12 veeru ruudustiku vahe, üks väärtus kõigile sektsioonidele */
  --bar-top: clamp(1rem, 2vw, 1.8rem);
  --bar-h: clamp(40px, 3.4vw, 56px);
  --bar-gap: clamp(2.5rem, 7vh, 5rem);
  --frame-y: calc(var(--bar-top) + var(--bar-h) + var(--bar-gap));
  --head-gap: clamp(1.6rem, 1.6vw + 1.6vh, 3.4rem);
  --sec: clamp(4.5rem, 6vw + 7vh, 24rem);    /* sektsioonide vahe */
  --logo-w: clamp(104px, 8vw, 136px);
}

/* ---------- Alus ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-tap-highlight-color: transparent;
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--c-ground);
  color: var(--c-ink);
  font-family: var(--f-text);
  font-weight: 300;
  font-size: var(--t-text);
  line-height: 1.6;
  cursor: default;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, p, dl, dd, figure { margin: 0; }
main section[id] { scroll-margin-top: calc(var(--sec) / 2); }
main #specification { scroll-margin-top: 0; }
p { text-wrap: pretty; }   /* ühesõnalist viimast rida ei jää */
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; -webkit-appearance: none; appearance: none; }

::selection { background: var(--c-accent); color: var(--c-ground); text-shadow: none; }
::-moz-selection { background: var(--c-accent); color: var(--c-ground); text-shadow: none; }

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

/* kerimisriba: üks ühine reegel kõigile kerivatele kihtidele */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--c-surface); }
::-webkit-scrollbar-thumb { background: var(--c-soft); border: 3px solid var(--c-surface); }
::-webkit-scrollbar-thumb:hover { background: var(--c-accent); }
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-width: thin; scrollbar-color: var(--c-soft) var(--c-surface); }
}

/* ---------- Päis ---------- */
.site-bar {
  position: fixed; z-index: 20; top: var(--bar-top); left: 0; right: 0;
  max-width: var(--frame-max); margin-inline: auto;
  height: var(--bar-h); padding-inline: var(--edge);
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
  color: var(--c-ground);
}
.site-logo { display: block; justify-self: center; cursor: pointer; }
.site-logo img { width: var(--logo-w); height: auto; }
.site-languages { justify-self: start; display: flex; align-items: center; gap: .9rem; font-weight: 500; font-size: var(--t-label); line-height: 1.3; letter-spacing: .1em; }
.site-language { opacity: .6; transition: opacity .3s ease; }
.site-language.is-current { opacity: 1; }
.site-language-rule { width: 1px; height: 1.1rem; background: currentColor; opacity: .4; }
@media (hover: hover) and (pointer: fine) {
  .site-language:hover { opacity: 1; }
}
.nav-toggle {
  justify-self: end; width: 44px; height: 44px; margin-right: -8px; padding: 0; border: 0; background: none;
  display: grid; place-content: center; gap: 8px; cursor: pointer;
}
.nav-toggle span { display: block; width: 28px; height: 2px; background: currentColor; }
/* Faas 4 olekud: logo peitub alla kerides (tagasi ainult ülaservas), hamburgeri toon tausta järgi, kerimislukk */
.site-logo, .site-languages { transition: opacity .35s ease, transform .35s ease; }
html.logo-hidden .site-logo, html.logo-hidden .site-languages { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.nav-toggle { transition: color .42s ease; }
html.bar-light .nav-toggle { color: var(--c-ink); }
html.is-scroll-locked { overflow: hidden; }
[tabindex="-1"]:focus { outline: none; }
@media (prefers-reduced-motion: reduce) {
  .site-logo, .site-languages { transition: opacity .15s linear; }
  .site-language { transition: none; }
  html.logo-hidden .site-logo, html.logo-hidden .site-languages { transform: none; }
}

/* ---------- Kihid: ühine tumendus + menüü ---------- */
/* Tumendus must + alpha + hägu, ühine klass kõigile kihtidele (menüü, päring, FAQ). Avatud menüüs päis kihtide peal,
   logo peidus, hamburger → X tindis. Laial ekraanil X paneeli paremas ülanurgas. */
.overlay-dim { display: none; position: fixed; inset: 0; z-index: 30; background: rgb(0 0 0 / .42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.menu-open .overlay-dim, .enquire-open .overlay-dim, .faq-open .overlay-dim { display: block; }
.menu-open .site-bar { position: fixed; z-index: 40; max-width: none; }
.menu-open .site-logo, .menu-open .site-languages { visibility: hidden; opacity: 0; pointer-events: none; }
.menu-open .nav-toggle { color: var(--c-ink); }
.menu-open .nav-toggle span:first-child { transform: translateY(5px) rotate(45deg); }
.menu-open .nav-toggle span:last-child { transform: translateY(-5px) rotate(-45deg); }
.menu { display: none; position: fixed; z-index: 31; top: 0; right: 0; bottom: 0; width: var(--menu-w); flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding: calc(var(--bar-top) + var(--bar-h) + var(--head-gap)) var(--edge) var(--edge) var(--menu-pl); background: var(--c-ground); color: var(--c-ink); }
.menu-open .menu { display: flex; }
.menu-links { margin: 0 0 var(--head-gap); padding: 0; list-style: none; }
.menu-links li { position: relative; }
.menu-link-source { opacity: 0; }
.menu-line-mask { position: absolute; display: block; overflow: clip; pointer-events: none; }
.menu-line-text { display: block; white-space: pre; }
.menu-links li + li { margin-top: calc(var(--t-menu) * .35); }
.menu-links a { font-family: var(--f-display); font-weight: 500; font-size: var(--t-menu); line-height: 1.12; letter-spacing: -.01em; text-decoration: none; cursor: pointer; }
.menu-links a[aria-current="true"] { color: var(--c-accent); }
@media (hover: hover) and (pointer: fine) {
  .menu-links a { transition: color 450ms cubic-bezier(.165, .84, .44, 1); }
  .menu-links a:hover { color: var(--c-soft); transition-duration: 275ms; }
  .menu-links a[aria-current="true"]:hover { color: var(--c-accent); }
}
@media (prefers-reduced-motion: reduce) {
  .menu-links a, .menu-links a:hover { transition: none; }
}
.menu-contact { display: grid; gap: .9rem; margin-top: auto; padding-top: clamp(1rem, 2.6svh, 1.6rem); border-top: 1px solid var(--rule); }
.menu-contact p + p { margin-top: .15rem; }
:is(.menu-contact a, .closing-contact a, .closing-share) { position: relative; display: inline-block; width: fit-content; text-decoration: none; }
:is(.menu-contact a, .closing-contact a, .closing-share)::after { content: ''; position: absolute; left: 0; right: 0; bottom: .1em; height: 1px; background: var(--c-accent); transform: scaleX(0); transform-origin: center; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  :is(.menu-contact a, .closing-contact a, .closing-share)::after { transition: transform 180ms ease; }
  :is(.menu-contact a, .closing-contact a, .closing-share):hover::after { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  :is(.menu-contact a, .closing-contact a, .closing-share)::after { transition: none; }
}
.menu-name { font-family: var(--f-text); font-weight: 500; font-size: var(--t-menu-name); line-height: 1.3; }
.menu-cta { justify-self: start; }

/* ---------- Päringuaken ---------- */
/* Sama paneel nagu menüü (laius, vahed, X hamburgeri kohal). Väljad ainult alljoonega (inset-vari, et fookuse ja vea
   joon ei muudaks kõrgust). Valikud ja sildid ühes rollis (Medium, suurtähed, --t-label). Tänuteade sissejuhatuse
   kohal ja rollis. Viga = aktsent. */
.enquire { --form-bg: var(--c-ground); --f-gap: clamp(1rem, 2.4svh, 1.6rem); display: none; position: fixed; z-index: 31; top: 0; right: 0; bottom: 0; width: clamp(21rem, 38vw, 40rem); background: var(--form-bg); }
.enquire-open .enquire { display: block; }
.enquire-card { position: relative; display: flex; flex-direction: column; height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: calc(var(--bar-top) + var(--bar-h) + var(--head-gap)) var(--edge) var(--edge) clamp(1.6rem, 4vw, 4.4rem); background: var(--form-bg); color: var(--c-ink); outline: none; }
.enquire-close { position: absolute; top: var(--bar-top); right: calc(var(--edge) - 8px); display: grid; place-items: center; width: 44px; height: 44px; margin-top: calc((var(--bar-h) - 44px) / 2); padding: 0; border: 0; background: none; color: var(--c-ink); cursor: pointer; }
.enquire-close svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.enquire-title { font-family: var(--f-display); font-weight: 500; font-size: var(--t-figure); line-height: 1.1; letter-spacing: -.01em; text-wrap: balance; }
.enquire-intro, .enquire-thanks { margin-top: .7rem; max-width: 46ch; }
.enquire-form { display: grid; gap: var(--f-gap); margin-top: var(--head-gap); }
.field { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; row-gap: .35rem; align-items: start; min-width: 0; margin: 0; padding: 0; border: 0; }
.field > label { grid-column: 1; grid-row: 1; }
.field > input, .field > textarea, .field > .choice { grid-column: 1 / -1; grid-row: 2; }
.field label, .field legend { padding: 0; font-weight: 500; font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; line-height: 1.3; color: var(--c-soft); }
.field input, .field textarea { width: 100%; padding: .5rem 0 .55rem; border: 0; border-radius: 0; background: transparent; font: inherit; font-size: var(--t-text); line-height: 1.5; color: var(--c-ink); box-shadow: inset 0 -1px 0 var(--rule); transition: box-shadow var(--field-color-time, 150ms) ease; }
.field input:focus, .field textarea:focus { outline: none; box-shadow: inset 0 -1px 0 var(--c-ink); }
.field textarea { display: block; resize: none; overflow-y: hidden; }
.field input:-webkit-autofill, .field input:-webkit-autofill:hover, .field textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--c-ink); caret-color: var(--c-ink);
  -webkit-box-shadow: inset 0 0 0 1000px var(--form-bg), inset 0 -1px 0 var(--rule); box-shadow: inset 0 -1px 0 var(--rule), inset 0 0 0 1000px var(--form-bg);
  transition: background-color 9999s ease-in-out 0s, box-shadow var(--field-color-time, 150ms) ease;
}
.field input:-webkit-autofill:focus { box-shadow: inset 0 -1px 0 var(--c-ink), inset 0 0 0 1000px var(--form-bg); }
.field-error { display: none; grid-column: 2; grid-row: 1; justify-self: end; text-align: right; font-size: var(--t-label); line-height: 1.3; color: var(--c-accent); }  /* sildireal: viga ei lisa kõrgust */
.field.is-invalid .field-error { display: block; }
.field.is-invalid input { box-shadow: inset 0 -1px 0 var(--c-accent); }
@media (prefers-reduced-motion: reduce) {
  .enquire { --field-color-time: 0ms; }
}
.choice { display: flex; flex-wrap: wrap; column-gap: 1.8rem; row-gap: .6rem; padding-top: .6rem; }  /* raadionupud, vormi alguses */
.field .choice label { position: relative; cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: var(--t-text); line-height: 1.5; color: var(--c-soft); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span { display: flex; align-items: center; gap: .6rem; transition: color .2s; }
.choice span::before { content: ""; flex: none; box-sizing: border-box; width: 14px; height: 14px; border: 1px solid color-mix(in srgb, var(--c-ink) 45%, transparent); border-radius: 50%; transition: border-color .2s; }
.choice label:hover span { color: var(--c-ink); }
.choice input:checked + span { color: var(--c-accent); }
.choice input:checked + span::before { border-color: var(--c-accent); background: radial-gradient(circle, var(--c-accent) 0 3.5px, transparent 4px); }
.choice input:focus-visible + span { outline: 1px solid var(--c-ink); outline-offset: 3px; }
.field-as { margin-bottom: calc(var(--f-gap) * .4); }  /* vormi esimene küsimus, väike lisavahe enne välju */
.enquire-send { justify-self: start; margin-top: calc(var(--f-gap) * .4); }
.enquire-thanks { display: none; }
.enquire.is-sent .enquire-form, .enquire.is-sent .enquire-intro { display: none; }
.enquire.is-sent .enquire-thanks { display: block; }

/* ---------- FAQ ---------- */
/* Nurganupp tindipinnal: Ask → Questions hoveril, avatult kitsas ruudukujuline X-nupp. Nurgas mõlemast
   servast --bar-top. Paneel purjevalge nupu kohal, piiratud laius ja kõrgus; telefonis täisekraan. Pluss/miinus = .pm. */
.faq-btn { position: fixed; z-index: 33; right: var(--bar-top); bottom: var(--bar-top); display: inline-grid; place-items: center; padding: 1.05em 1.4em; border: 0; background: var(--c-ink); color: var(--c-ground); font-weight: 500; font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; line-height: 1.2; cursor: pointer; }
.faq-btn { transition: opacity .25s ease, visibility 0s linear 0s; }
html:not(.faq-shown) .faq-btn { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility 0s linear .2s; }
.faq-btn > * { grid-area: 1 / 1; }
.faq-btn-label { display: grid; place-items: center; min-height: 20px; }
.faq-btn-short, .faq-btn-full { grid-area: 1 / 1; white-space: nowrap; }
.faq-btn-full { width: 0; overflow: hidden; opacity: 0; }
.faq-btn-x { display: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.faq-open .faq-btn { padding-inline: 1.05em; }
.faq-open .faq-btn-label { display: none; }
.faq-open .faq-btn-x { display: block; }
@media (hover: hover) and (pointer: fine) {
  .faq-btn-full { interpolate-size: allow-keywords; transition: width 160ms ease, opacity 160ms ease; }
  .faq-btn-short { transition: opacity 160ms ease; }
  html:not(.faq-open) .faq-btn:hover .faq-btn-full { width: max-content; opacity: 1; }
  html:not(.faq-open) .faq-btn:hover .faq-btn-short { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-btn, .faq-btn-short, .faq-btn-full { transition: none; }
  html:not(.faq-shown) .faq-btn { transition: none; }
}
.faq { display: none; position: fixed; z-index: 32; right: var(--bar-top); bottom: calc(var(--bar-top) + 3.4rem + .6rem); width: min(28rem, calc(100% - 2 * var(--bar-top))); max-height: min(72svh, 44rem); overflow-y: auto; overscroll-behavior: contain; padding: clamp(1.4rem, 2.4vw, 2.2rem); background: var(--c-ground); color: var(--c-ink); }
.faq-open .faq { display: block; }
.faq-title { font-family: var(--f-display); font-weight: 500; font-size: var(--t-h2); line-height: 1.08; letter-spacing: -.01em; }
.faq-list { margin-top: 1.2rem; }
.faq-item { border-top: 1px solid var(--rule); }
.faq-h { margin: 0; font: inherit; }
.faq-q { display: flex; justify-content: space-between; align-items: baseline; gap: 1.2rem; width: 100%; padding: .9rem 0; border: 0; background: none; text-align: left; font-weight: 500; font-size: var(--t-faq); line-height: 1.4; color: var(--c-ink); cursor: pointer; }
.faq-q .pm { flex: none; transform: translateY(1px); }
.faq-q[aria-expanded="true"] { color: var(--c-accent); }  /* avatud küsimus + ikoon (currentColor) aktsendis */
.faq-q[aria-expanded="true"] .pm .v { opacity: 0; }
.faq-a p { max-width: 46ch; padding: 0 2.2rem 1.1rem 0; font-size: var(--t-faq); color: var(--c-soft); }
.faq-a[hidden] { display: none; }

/* ---------- Lightbox ---------- */
/* Täismust (paleti erand lightboxile; .96 juures paistis lehe pealkiri läbi). Vasak veerg clamp(15rem, 30vw, 30rem):
   X peenjoonega ruudus üleval, pealkiri display --t-h2 + peenjoon + vihje keskel; paremal kerivad fotod loomulikus
   küljesuhtes. Kursor vastab tegevusele: zoom-in / zoom-out. */
.lightbox { --lb-side-width: clamp(15rem, 30vw, 30rem); display: none; position: fixed; inset: 0; z-index: 45; grid-template-columns: var(--lb-side-width) minmax(0, 1fr); background: rgb(0 0 0); color: var(--c-ground); }
.lightbox-open .lightbox { display: grid; }
.lb-close { position: fixed; z-index: 2; top: var(--bar-top); left: var(--edge); display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid color-mix(in srgb, var(--c-ground) 40%, transparent); background: rgb(0 0 0 / .4); color: var(--c-ground); cursor: pointer; }
.lb-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.lb-side { display: flex; flex-direction: column; justify-content: center; padding: 0 var(--edge); }
.lb-title { padding-bottom: 1.2rem; border-bottom: 1px solid color-mix(in srgb, var(--c-ground) 22%, transparent); font-family: var(--f-display); font-weight: 300; font-size: var(--t-h2); line-height: 1.08; letter-spacing: -.01em; }
.lb-hint { max-width: 22ch; margin-top: .8rem; font-size: var(--t-label); line-height: 1.5; color: color-mix(in srgb, var(--c-ground) 70%, transparent); }
.lb-rail { display: grid; gap: .6rem; align-content: start; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; padding: var(--bar-top) var(--bar-top) var(--bar-top) 0; outline: none; }
.lb-rail img { width: 100%; height: auto; aspect-ratio: auto 3 / 2; cursor: zoom-in; }  /* 3 : 2 kuni foto on laetud, siis päris suhe */
.lightbox.is-full { grid-template-columns: 0 minmax(0, 1fr); }
.lightbox.is-full .lb-side { visibility: hidden; }
.lightbox.is-full .lb-rail { gap: .4rem; padding: 0; }
.lightbox.is-full .lb-rail img { cursor: zoom-out; }

/* Väike või madal ekraan (KOHUSTUSLIK): ilma frame-y vaheta, pealkiri X real, tihedamad väljad, all lühike vahe + safe-area */
@media (max-width: 700px), (max-height: 820px) {
  .enquire { --f-gap: clamp(.7rem, 1.8svh, 1.1rem); }
  .enquire-card { padding-top: calc(var(--bar-top) + (var(--bar-h) - var(--t-figure) * 1.1) / 2); padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
  .enquire-title { padding-right: 3rem; }
  .enquire-form { margin-top: clamp(1rem, 2.6svh, 1.8rem); }
}
/* Madal ekraan (≤ 700 px kõrgus): veelgi tihedamad väljad, et vorm ka 320×568 juures ei keriks */
@media (max-height: 700px) {
  .enquire { --f-gap: clamp(.4rem, 1.1svh, .8rem); }
  .field { row-gap: .2rem; }
  .field input, .field textarea { padding: .3rem 0 .35rem; }
  .choice { padding-top: .3rem; }
  .enquire-form { margin-top: .8rem; }
}
/* Telefon: täisekraan 100dvh */
@media (max-width: 700px) {
  .enquire { left: 0; width: auto; }
  .enquire-card { height: 100dvh; padding-inline: var(--edge); }
}

/* ---------- 2.1 Hero ---------- */
.hero { position: relative; display: flex; flex-direction: column; color: var(--c-ink); container-type: inline-size; }

/* Foto: kuni 1920 px keskel. Kõrgus järgib ekraani kõrgust (täidab vaate pärast nime alumist poolt ja inforida),
   piirides 2,9 : 1 … 2 : 1. Ankur veepiiril: allika y 795 (rahulik vesi kere all, 19,86 % pildi kõrgusest alt)
   on alati konteineri alaservas, nii et nime läbiv piir ei liigu; kõrgem konteiner näitab ülevalt rohkem taevast. */
.hero-media {
  --w: min(100cqw, var(--frame-max));        /* hero tegelik laius, ilma kerimisribata */
  --below: calc(.0791 * min(100cqw - 2 * var(--edge), var(--content-max)) + var(--head-gap) + var(--t-figure) * 1.1 + .9rem + var(--t-lead) * 2.8 + var(--frame-y));
  position: relative; z-index: 2;
  width: 100%; max-width: var(--frame-max); margin-inline: auto;
  height: clamp(calc(var(--w) / 2.9), calc(100svh - var(--below)), calc(var(--w) / 2));
  overflow: hidden;
}
.hero-media img { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; transform: translateY(19%); }
@media (min-width: 761px) and (max-height: 1000px) {
  .hero-media { height: clamp(calc(var(--w) / 3.1), calc(100svh - var(--below)), calc(var(--w) / 2)); }
}
/* scrim'id: matt must, täislaiuses — ülal logo ja menüü, all nime valge poole taga */
.hero-media::before,
.hero-media::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.hero-media::before { top: 0; height: 32%; background: linear-gradient(to bottom, rgb(0 0 0 / .3), rgb(0 0 0 / .27) 20%, rgb(0 0 0 / .2) 40%, rgb(0 0 0 / .1) 65%, rgb(0 0 0 / .03) 85%, rgb(0 0 0 / 0)); }
.hero-media::after { bottom: 0; height: 34%; background: linear-gradient(to top, rgb(0 0 0 / .34), rgb(0 0 0 / .31) 20%, rgb(0 0 0 / .23) 40%, rgb(0 0 0 / .12) 65%, rgb(0 0 0 / .03) 85%, rgb(0 0 0 / 0)); }

/* nime koopia foto sees: algab foto alaservast, sama --pad-x ja suurusega kui h1 → kohakuti */
.hero-echo { position: absolute; z-index: 2; left: 0; right: 0; top: 100%; padding-inline: var(--pad-x); color: var(--c-ground); }

.hero-name-box { container-type: inline-size; }
.hero-name {
  font-family: var(--f-display); font-weight: 500;
  font-size: 12.9cqi;                 /* Ealing: „CEZZ OF LONDON" = 7,68 em → täidab sisuveeru (--below kasutab 0,129 × 0,613) */
  line-height: 1; letter-spacing: 0; white-space: nowrap;
  margin-top: -.387em;                /* suurtähtede keskpunkt (Ealing typo-mõõdud: 0,387 em) fotoservale */
}

.hero-inner {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--frame-max); margin-inline: auto;   /* pind sama laiusega kui foto (kuni 1920 px) */
  background: var(--c-surface);
  display: grid;
  grid-template-columns: var(--pad-x) minmax(0, 1fr) 3rem auto var(--pad-x);
  grid-template-rows: auto var(--head-gap) auto auto;
  padding-bottom: var(--frame-y);
}
.hero-inner > .hero-name-box { grid-column: 2 / 5; grid-row: 1; }
.hero-model { grid-column: 2; grid-row: 3; margin-bottom: .9rem; font-family: var(--f-display); font-weight: 500; font-size: var(--t-figure); line-height: 1.1; }
.hero-info { grid-column: 2; grid-row: 4; max-width: 64ch; }
.hero-info p { font-weight: 300; font-size: var(--t-text); line-height: 1.4; }
.hero-offer { grid-column: 4; grid-row: 3 / 5; align-self: end; display: flex; align-items: center; flex-wrap: wrap; gap: 1.6rem 2rem; }
.hero-price { font-family: var(--f-display); font-weight: 500; font-size: var(--t-figure); line-height: 1.1; transform: translateY(.08em); }  /* Ealingi nähtava hinnateksti keskjoon nupu keskjoonele */

/* ---------- 2.2 Kiirfaktid ---------- */
/* 12 veeru ruudustik (Faas 4.5): pikkus hero nime suuruses 1–6, neli ülejäänut registrina 7–12 (sama telg mis History
   paremal tulbal), joondatud suure arvu alaservaga. */
.figures { padding: var(--sec) var(--pad-x); }  /* ülal vahe hero pinna servast */
.figures-inner { container-type: inline-size; }
.figures-list {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap); align-items: end;
}
.figures-item dd { margin: 0; font-family: var(--f-display); font-weight: 500; line-height: 1; white-space: nowrap; }
.figures-item dt { font-weight: 500; font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; line-height: 1.3; color: var(--c-soft); }
.figures-lead { grid-column: 1 / 7; grid-row: 1 / span 4; align-self: end; display: flex; flex-direction: column; gap: 1rem; }
.figures-lead dd { font-weight: 400; font-size: 12.9cqi; margin-bottom: -.13em; }  /* nime suurus; alusjoon registri viimase rea alusjoonel (Ealingi alumine ruum 0,28 em) */
.figures-item:not(.figures-lead) {
  grid-column: 7 / 13; display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem;
  padding-block: .9rem; border-top: 1px solid var(--rule);
}
.figures-item:not(.figures-lead) dd { font-size: var(--t-figure); }

/* ---------- 2.3 History ---------- */
/* 12 veergu, keskjoon nagu kiirfaktidel: pealkiri 1–5, juhtlause lead-rollis (Axiome Light, nagu hero sissejuhatus) 7–12;
   all foto 1–5 ja mõlemad lõigud ühes tulbas 7–12 (rida kuni 60ch). */
.history { padding: 0 var(--pad-x) var(--sec); }
.history-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap); row-gap: calc(var(--head-gap) * 1.4); align-items: start;
}
.history-title { grid-column: 1 / 6; grid-row: 1; font-family: var(--f-display); font-weight: 500; font-size: var(--t-h2); line-height: 1.08; letter-spacing: -.01em; }
.history-lead { grid-column: 7 / 13; grid-row: 1; font-family: var(--f-text); font-weight: 400; font-size: var(--t-lead); line-height: 1.4; }
.history-photo { grid-column: 1 / 6; grid-row: 2; }
.history-photo img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.history-body { grid-column: 7 / 13; grid-row: 2; }
.history-body p { max-width: 60ch; }
.history-body p + p { margin-top: 1.2em; }

/* ---------- 2.4 Breath ---------- */
/* Foto sama raamiga nagu hero ja closing (kuni 1920 px, keskel), kõrgus küljesuhtest 21 : 9 — kasutaja otsus: lühike
   paus, mitte täisekraan. Lause --t-h2 display purjevalges vee kohal vasakul all (1–6); tume vesi → scrim'i pole. */
.breath { padding-bottom: var(--sec); }
.breath-media { position: relative; max-width: var(--frame-max); margin-inline: auto; aspect-ratio: 21 / 9; overflow: hidden; color: var(--c-ground); }
.breath-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.breath-text { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); padding: clamp(2rem, 4vw, 4.5rem) var(--pad-x); }
.breath-line { grid-column: 1 / 7; align-self: end; font-family: var(--f-display); font-weight: 300; font-size: var(--t-h2); line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; }

/* ---------- 2.5 Upper deck ---------- */
/* Fotod 4 : 5 rea otstes (veerud 1–4 ja 9–12), keskel pealkiri ülal (fotode ülajoonel) ja tekst all
   (fotode alajoonel). Pealkiri tasakaalustatud murdega. */
.deck { padding: 0 var(--pad-x) var(--sec); }
.deck-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: var(--col-gap); }  /* fotode lisakõrgus läheb reale 2 */
.deck-photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.deck-fwd { grid-column: 1 / 5; grid-row: 1 / 3; }
.deck-aft { grid-column: 9 / 13; grid-row: 1 / 3; }
.deck-title, .deck-text { grid-column: 5 / 9; padding-inline: clamp(.5rem, 1.5vw, 2rem); }
.deck-title { grid-row: 1; align-self: start; font-family: var(--f-display); font-weight: 500; font-size: var(--t-h2); line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; }
.deck-text { grid-row: 2; align-self: start; margin-top: var(--head-gap); }  /* pealkirja all sama vahega nagu mujal (enne alaservas → kattus) */
.deck-text p { max-width: 46ch; }
.deck-text p + p { margin-top: 1.1em; }

/* ---------- 2.6 A second living room ---------- */
/* Astmes: pealkiri 1–5 ja tekst 1–6 üleval, salong 4 : 3 all 1–7; baari detail 3 : 4 veergudel 9–12
   alates teksti reast (rida 2), nii et fotod kattuvad vertikaalselt astmena. */
.saloon { padding: 0 var(--pad-x) var(--sec); }
.saloon-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--head-gap); align-items: start; }
.saloon-title { grid-column: 1 / 6; grid-row: 1; font-family: var(--f-display); font-weight: 500; font-size: var(--t-h2); line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; }
.saloon-text { grid-column: 1 / 7; grid-row: 2; }
.saloon-text p { max-width: 55ch; }
.saloon-text p + p { margin-top: 1.1em; }
.saloon-wide { grid-column: 1 / 8; grid-row: 3; }
.saloon-detail { grid-column: 9 / 13; grid-row: 2 / 4; }
.saloon-photo img { width: 100%; height: auto; object-fit: cover; }
.saloon-wide img { aspect-ratio: 16 / 10; }
.saloon-detail img { aspect-ratio: 3 / 4; }

/* ---------- 2.7 Owner's suite ---------- */
/* Pealkiri 1–5 üleval (eraldab salongi ja sviidi 16 : 10 fotod); all sviit veergudel 1–7, paremal (9–12)
   kaks lõiku foto ülaservast ja parda luugi foto. */
.suite { padding: 0 var(--pad-x) var(--sec); }
.suite-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 1.4rem; align-items: start; }
.suite-title { grid-column: 1 / 6; grid-row: 1; font-family: var(--f-display); font-weight: 500; font-size: var(--t-h2); line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; }
.suite-room { grid-column: 1 / 8; grid-row: 2 / 5; margin-top: calc(var(--head-gap) - 1.4rem); }
.suite-balcony { grid-column: 9 / 13; grid-row: 2; margin-top: calc(var(--head-gap) - 1.4rem); }  /* ülaserv = foto ülaserv */
.suite-interior { grid-column: 9 / 13; grid-row: 3; }
.suite-stern { grid-column: 9 / 13; grid-row: 4; margin-top: calc(var(--head-gap) - 1.4rem); }
.suite-grid p { max-width: 46ch; }
.suite-photo img { width: 100%; height: auto; object-fit: cover; }
.suite-room img { aspect-ratio: 16 / 10; }
.suite-stern img { aspect-ratio: 16 / 10; }

/* ---------- 2.8 Cabins ---------- */
/* Kaks tulpa: vasakul pealkiri, sissejuhatus, kajut 3 : 2 (1–7) ja selle plokk; paremal (9–12) vannituba
   kajuti reas sama kõrgusega (venitub reale), plokid samal real. Vaba ruum jääb pealkirja kõrvale. */
.cabins { padding: 0 var(--pad-x) var(--sec); }
.cabins-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
.cabins-title { grid-column: 1 / 7; grid-row: 1; font-family: var(--f-display); font-weight: 500; font-size: var(--t-h2); line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; }
.cabins-lead { grid-column: 1 / 8; grid-row: 2; margin-top: var(--head-gap); }
.cabins-room { grid-column: 1 / 8; grid-row: 3; margin-top: var(--head-gap); }
.cabins-wash { position: relative; grid-column: 9 / 13; grid-row: 3; align-self: stretch; margin-top: var(--head-gap); }
.cabins-twin { grid-column: 1 / 6; grid-row: 4; margin-top: var(--head-gap); }
.cabins-baths { grid-column: 9 / 13; grid-row: 4; margin-top: var(--head-gap); }
.cabins-sub { margin-bottom: .6rem; font-family: var(--f-text); font-weight: 500; font-size: var(--t-lead); line-height: 1.3; }  /* h3 roll nagu spec'is ja closing'us */
.cabins-grid p { max-width: 60ch; }
.cabins-photo img { width: 100%; height: auto; object-fit: cover; }
.cabins-room img { aspect-ratio: 16 / 10; }
.cabins-wash img { position: absolute; inset: 0; height: 100%; object-position: 4% 50%; }  /* kõrgus ainult kajuti reast (püstfoto ei kasvata rida); WC-niš kaadris */

/* ---------- 2.9 Crew and systems ---------- */
/* Sild 16 : 10 veergudel 6–12 sisukonteineri piires (faasi lõpu ülevaatus: servani foto + hero laiusega galerii +
   closing oleks olnud kolm laia pildiala järjest); vasakul (1–4) pealkiri üleval, põhilõik foto alaserva poole;
   kohatäidete lõik foto all (6–9). */
.systems { padding-bottom: var(--sec); }
.systems-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; padding-inline: var(--pad-x); }
.systems-title { grid-column: 1 / 5; grid-row: 1; font-family: var(--f-display); font-weight: 500; font-size: var(--t-h2); line-height: 1.08; letter-spacing: -.01em; }
.systems-title { text-wrap: balance; }  /* pealkiri jookseb vabalt, sundreavahetust koma järel pole */
.systems-photo { grid-column: 6 / 13; grid-row: 1 / 3; align-self: stretch; }  /* kasvab vajadusel teksti kõrguseks: alaservad kohakuti igal laiusel */
.systems-main { grid-column: 1 / 5; grid-row: 2; align-self: end; margin-top: var(--head-gap); }
.systems-grid p { max-width: 46ch; }
.systems-photo img { width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 80%; }  /* vähemalt 16 : 10, laeriba välja */
/* tahvel: kitsas tekstitulp foto kõrval ei toimi — pealkiri kogu laiuses, foto all, lõigud kahes tulbas */
@media (min-width: 761px) and (max-width: 1024px) {
  .systems-title { grid-column: 1 / 13; }
  .systems-photo { grid-column: 1 / 13; grid-row: 2; align-self: start; margin-top: var(--head-gap); }
  .systems-photo img { height: auto; }
  .systems-main { grid-column: 1 / 7; grid-row: 3; align-self: start; margin-top: 1.6rem; }
}

/* ---------- Gallery ---------- */
/* Pealkiri sisuteljel; pildiala kuni --frame-max, keskel, külgedel vähemalt --edge. Mosaiik (Faas 4.5): neli kaadrit,
   suur | kaks väikest virnas | suur, veerud 5 : 3 : 5, ala 8 : 3. All nooled ja edenemisjoon
   (aktsendilõik = 1 / lehtede arv, asukoht --i). */
.gallery { padding-bottom: var(--sec); }
.gallery-title { padding-inline: var(--pad-x); font-family: var(--f-display); font-weight: 500; font-size: var(--t-h2); line-height: 1.08; letter-spacing: -.01em; }
.gallery-mosaic {
  --gg: clamp(.5rem, .8vw, 1rem);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 5fr);
  grid-template-rows: repeat(2, minmax(0, 1fr)); gap: var(--gg);
  width: calc(100% - 2 * var(--edge)); max-width: var(--frame-max); margin: var(--head-gap) auto 0; aspect-ratio: 8 / 3;
}
.gallery-tile { position: relative; min-width: 0; min-height: 0; padding: 0; border: 0; background: var(--c-surface); overflow: hidden; cursor: pointer; }
.gallery-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }  /* foto ei mõjuta rea kõrgust */
.gallery-page-mask, .gallery-page-inner { position: absolute; inset: 0; pointer-events: none; }
.gallery-page-mask { z-index: 1; overflow: clip; will-change: transform; }
.gallery-page-inner { will-change: transform; }
@media (hover: hover) and (pointer: fine) {
  .gallery-tile { cursor: zoom-in; }
  .gallery-tile img { transform: translateZ(0) scale(1); will-change: transform; backface-visibility: hidden; transition: transform 500ms cubic-bezier(.22, 1, .36, 1); }
  .gallery-tile:hover img { transform: translateZ(0) scale(1.045); transition-duration: 650ms; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-tile:hover img { transform: none; }
  .gallery-tile img { transform: none; will-change: auto; backface-visibility: visible; transition: none; }
}
.gallery-tile:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
.gallery-tile:nth-child(2) { grid-column: 2; grid-row: 1; }
.gallery-tile:nth-child(3) { grid-column: 2; grid-row: 2; }
.gallery-tile:nth-child(4) { grid-column: 3; grid-row: 1 / 3; }
.gallery-bar { display: flex; align-items: center; justify-content: center; gap: 1.4rem; margin-top: 1.6rem; padding-inline: var(--pad-x); }
.gallery-arrow { display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0; border: 0; background: none; color: var(--c-ink); cursor: pointer; }
.gallery-arrow svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }  /* kasutaja SVG: sabata nool */
@media (hover: hover) and (pointer: fine) {
  .gallery-arrow { transition: color 300ms ease; }
  .gallery-arrow:hover { color: var(--c-accent); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .gallery-arrow svg { transition: transform 250ms cubic-bezier(.25, 1, .5, 1); }
  .gallery-prev:hover svg { transform: translateX(-4px); }
  .gallery-next:hover svg { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-arrow { transition: none; }
}
.gallery-progress { position: relative; width: min(22rem, 40%); height: 1px; background: var(--rule); }
.gallery-fill { position: absolute; top: -.5px; left: 0; width: calc(100% / var(--n)); height: 2px; background: var(--c-accent); transform: translateX(calc(var(--i) * 100%)); }

/* ---------- Specification ---------- */
/* Pealkiri vasakul (1–5); üks pearaamatu-tulp sisuteljel (6–12): silt 6–8, väärtus 9–12, ühel alusjoonel. Rühmanimed
   tekstikirjas (Axiome Light, --t-lead), et need ei võistleks display-kirjas h2-ga. Hind display-suuruses, käibemaksu
   kohatäide selle all. Pluss/miinus crispEdges, täisarvulised seadmepikslid (125 % eraldi). */
.specs { max-width: var(--frame-max); margin-inline: auto; padding: var(--sec) max(var(--edge), calc((min(100%, var(--frame-max)) - var(--content-max)) / 2)); background: var(--c-surface); }
/* pind nagu hero pakkumise osal (kuni 1920 px); sisevahe riba enda laiusest, et sisu jääks lehe teljele (--pad-x arvutaks lehe laiusest) */
.specs-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
.specs-title { grid-column: 1 / 6; grid-row: 1 / 3; font-family: var(--f-display); font-weight: 500; font-size: var(--t-h2); line-height: 1.08; letter-spacing: -.01em; }
.specs-group, .specs-more { grid-column: 6 / 13; display: grid; grid-template-columns: subgrid; align-items: start; }
.specs-more[hidden] { display: none; }
.specs-offer { grid-row: 1; }
.specs-more .specs-group { grid-column: 1 / -1; margin-top: var(--head-gap); }
.specs-name { grid-column: 1 / -1; margin-bottom: .8rem; font-family: var(--f-text); font-weight: 500; font-size: var(--t-lead); line-height: 1.3; }
.specs-list, .specs-row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
.specs-list { margin: 0; }
.specs-row { align-items: baseline; padding-block: .8rem .9rem; border-top: 1px solid var(--rule); }
@media (hover: hover) and (pointer: fine) {
  .specs-row, .figures-item:not(.figures-lead), .faq-item { transition: border-top-color 120ms ease; }
  .specs-row:hover, .figures-item:not(.figures-lead):hover, .faq-item:has(> .faq-h > .faq-q:hover) { border-top-color: var(--c-ink); }
}
@media (prefers-reduced-motion: reduce) {
  .specs-row, .figures-item:not(.figures-lead), .faq-item { transition: none; }
}
.specs-label { grid-column: 1 / 4; font-weight: 500; font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; line-height: 1.3; color: var(--c-soft); }
.specs-value { grid-column: 4 / -1; }
.specs-price { display: block; margin-bottom: .25rem; font-family: var(--f-display); font-weight: 500; font-size: var(--t-figure); line-height: 1.1; }
.specs-vat { font-size: var(--t-label); }
.specs-cross { display: inline-block; width: .7em; height: .7em; vertical-align: -.02em; fill: currentColor; }  /* U+2720 joonistuks Windowsis kiiluna */
.specs-toggle { position: relative; grid-column: 6 / 13; justify-self: start; display: inline-block; margin-top: var(--head-gap); padding: .75rem 0; border: 0; border-bottom: 1px solid transparent; background: none; font-weight: 500; font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; line-height: 1.3; color: var(--c-ink); cursor: pointer; }
.specs-toggle::after { content: ''; position: absolute; left: 0; right: 0; bottom: .4rem; height: 1px; background: currentColor; transform: scaleX(1); transform-origin: left; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .specs-toggle::after { transition: transform 180ms ease; }
  .specs-toggle:hover::after { transform: scaleX(0); transform-origin: right; }
}
@media (prefers-reduced-motion: reduce) {
  .specs-toggle::after { transition: none; }
}
.specs-toggle[hidden] { display: none; }
.pm { width: 14px; height: 14px; fill: currentColor; shape-rendering: crispEdges; }
.pm .h { x: 0; y: 6px; width: 14px; height: 2px; }
.pm .v { x: 6px; y: 0; width: 2px; height: 14px; }
@media (min-resolution: 1.2dppx) and (max-resolution: 1.3dppx) {
  .pm { width: 16px; height: 16px; } .pm .h { y: 7.2px; width: 16px; height: 1.6px; } .pm .v { x: 7.2px; width: 1.6px; height: 16px; }
}

/* ---------- Acquiring (closing) ---------- */
/* Foto kuni 1920 px (nagu hero), kõrgus min(laius / 1,6, 100svh); alaserv sumbub tindisinisesse (paletitoon + alpha).
   Pealkiri ja hind foto tumedas alaosas (sama grid-ala, align end); all tindipinnal kontakt + Enquire (1–4),
   Viewing (6–8) ja Process (10–12) sisuteljel; footer © + disclaimer + Share. Alumine vahe = pool --frame-y väärtusest. */
.closing { display: grid; max-width: var(--frame-max); margin-inline: auto; background: var(--c-ink); color: var(--c-ground); }
.closing-media { position: relative; grid-area: 1 / 1; width: 100%; aspect-ratio: 1586 / 992; max-height: 100svh; overflow: hidden; }
.closing-photo { width: 100%; height: 100%; object-fit: cover; }
.closing-media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--c-ink) 0%, transparent) 50%, color-mix(in srgb, var(--c-ink) 25%, transparent) 66%, color-mix(in srgb, var(--c-ink) 65%, transparent) 84%, var(--c-ink)); }
.closing-top, .closing-bottom { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; padding-inline: var(--pad-x); }
.closing-top { position: relative; z-index: 1; grid-area: 1 / 1; align-self: end; padding-bottom: var(--head-gap); }  /* foto (positsioneeritud) peale */
.closing-title { grid-column: 1 / 8; align-self: end; font-family: var(--f-display); font-weight: 500; font-size: var(--t-h2); line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; }
.closing-price { grid-column: 9 / 13; justify-self: end; align-self: end; text-align: right; }
.closing-label { font-weight: 500; font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; line-height: 1.3; }
.closing-figure { margin-top: .35rem; font-family: var(--f-display); font-weight: 500; font-size: var(--t-figure); line-height: 1.1; }
.closing-bottom { grid-row: 2; padding-top: 1rem; padding-bottom: calc(var(--frame-y) / 2); }
.closing-viewing { grid-column: 1 / 4; grid-row: 1; }
.closing-process { grid-column: 5 / 8; grid-row: 1; }
.closing-contact { grid-column: 10 / 13; grid-row: 1; justify-self: end; text-align: right; }  /* hinna all samal paremal teljel */
.closing-sub, .closing-name { margin-bottom: .6rem; font-family: var(--f-text); font-weight: 500; font-size: var(--t-lead); line-height: 1.3; }
.closing-block p { max-width: 46ch; }
.closing-contact a { color: inherit; text-decoration: none; }
.closing-cta { margin-top: 1.4rem; }
.closing-foot { position: relative; grid-column: 1 / 13; display: flex; justify-content: space-between; align-items: flex-start; gap: var(--col-gap); margin-top: var(--head-gap); padding-top: 1.6rem; border-top: 1px solid transparent; font-size: var(--t-label); line-height: 1.5; }
.closing-foot::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: color-mix(in srgb, var(--c-ground) 22%, transparent); transform-origin: left center; }  /* joon eraldi kihina, motion joonistab selle */
.closing-disclaimer { max-width: 80ch; margin-top: .4rem; font-size: clamp(.7rem, .1vw + .66rem, .72rem); color: color-mix(in srgb, var(--c-ground) 72%, transparent); }
.closing-share { flex: none; padding: 0; border: 0; background: none; font-weight: 400; font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; line-height: 1.3; color: inherit; cursor: pointer; }
.closing .closing-share::after { bottom: -.3em; background: var(--c-ground); }

/* ---------- Nupp „Veejoon" (kasutaja idee, Faas 4.5) ---------- */
/* Aktsendipind, all 2 px tindijoon (kere veejoon); hoveril tõuseb tint sujuvalt üle nupu. Tumedal pinnal (closing)
   joon tindisinine, tõus purjevalge ja silt hoveril tindiks. Mõõdud em-ides, hover ei muuda pinda. Joon 125 % juures 1,6 px
   (= 2 seadmepikslit). Padding'u asümmeetria = optiline keskjoondus (tähevahe jätab viimase tähe järele .1em). */
.btn-primary {
  --cta-line: var(--c-ink); --cta-hover: var(--c-ground); --cta-h: 2px;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-block; padding: calc(1.45em + 1px) 1.9em calc(1.45em - 1px) 2em; border: 0;  /* +1 px: silt keskel koos veejoonega */
  background: var(--c-accent); color: var(--c-ground);
  font-family: var(--f-text); font-weight: 500; font-size: var(--t-label);
  letter-spacing: .1em; text-transform: uppercase; line-height: 1.2; white-space: nowrap;
  cursor: pointer; transition: color .45s cubic-bezier(.22, 1, .36, 1);
}
.btn-primary::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--cta-fill, var(--cta-line)); clip-path: inset(calc(100% - var(--cta-h)) 0 0 0); transition: clip-path .45s cubic-bezier(.22, 1, .36, 1); }
.closing .btn-primary { --cta-fill: var(--c-ground); --cta-hover: var(--c-ink); background: linear-gradient(to top, var(--cta-line) var(--cta-h), var(--c-accent) var(--cta-h)); }
.closing .btn-primary::before { clip-path: inset(100% 0 0 0); }
@media (min-resolution: 1.2dppx) and (max-resolution: 1.3dppx) { .btn-primary { --cta-h: 1.6px; } }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { color: var(--cta-hover); }
  .btn-primary:hover::before { clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) { .btn-primary, .btn-primary::before { transition: none; } }

/* ---------- Kitsas ekraan ---------- */
@media (max-width: 760px) {
  /* Sisu loomuliku kõrgusega; ülejäänud ekraaniruum fotole, vähemalt 16 : 10. */
  .hero { display: grid; min-height: 100svh; grid-template-rows: minmax(calc(100cqw / 1.6), 1fr) auto; }
  .hero-media { height: 100%; aspect-ratio: auto; }
  .hero-media img { top: 0; height: 100%; object-fit: cover; object-position: 50% 70%; transform: none; }
  .hero-inner { grid-template-columns: var(--pad-x) minmax(0, 1fr) var(--pad-x); grid-template-rows: auto var(--head-gap) auto auto auto; }
  .hero-inner > .hero-name-box { grid-column: 2; }
  .hero-offer { grid-column: 2; grid-row: 5; justify-self: start; margin-top: 1.6rem; }
  .figures-list { grid-template-columns: minmax(0, 1fr); }
  .figures-lead { grid-column: 1; grid-row: auto; margin-bottom: 1.6rem; }
  .figures-lead dd { font-size: 20cqi; }
  .figures-item:not(.figures-lead) { grid-column: 1; }
  .history-grid { grid-template-columns: minmax(0, 1fr); row-gap: 1.4rem; }
  .history-grid > * { grid-column: 1; grid-row: auto; }
  .history-photo { margin-block: .6rem; }
  /* täislaiuses ja ekraanikõrgune püstkaader, lause üleval; kerge scrim lause taga */
  .breath-media { max-width: none; height: 100svh; aspect-ratio: auto; }
  .breath-media::before { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: 45%; pointer-events: none; background: linear-gradient(to bottom, rgb(0 0 0 / .3), rgb(0 0 0 / .15) 50%, rgb(0 0 0 / 0)); }
  .breath-text { z-index: 2; grid-template-columns: minmax(0, 1fr); padding: var(--sec) var(--edge); }
  .breath-line { grid-column: 1; align-self: start; }
  /* pealkiri ja tekst, siis kaks fotot kõrvuti */
  .deck-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.4rem; }
  .deck-title { grid-column: 1 / -1; grid-row: 1; padding: 0; }
  .deck-text { grid-column: 1 / -1; grid-row: 2; padding: 0; margin-top: calc(var(--head-gap) - 1.4rem); }
  .deck-fwd { grid-column: 1; grid-row: 3; margin-top: .6rem; }
  .deck-aft { grid-column: 2; grid-row: 3; margin-top: .6rem; }
  .deck-photo img { aspect-ratio: 3 / 4; }
  /* pealkiri, tekst, salong, detail kitsamalt paremale */
  .saloon-grid { grid-template-columns: minmax(0, 1fr); row-gap: 1.4rem; }
  .saloon-grid > * { grid-column: 1; grid-row: auto; }
  .saloon-detail { width: 62%; justify-self: end; }
  .saloon-text { margin-top: calc(var(--head-gap) - 1.4rem); }
  /* pealkiri, sviit, lõigud, ahter ülevalt platvormi lause järel */
  .suite-grid { grid-template-columns: minmax(0, 1fr); }
  .suite-grid > * { grid-column: 1; grid-row: auto; margin-top: 0; }
  .suite-room { margin-top: calc(var(--head-gap) - 1.4rem); margin-bottom: .6rem; }
  /* pealkiri, sissejuhatus, kajut, plokk, vannituba kitsamalt paremale, plokk */
  .cabins-grid { grid-template-columns: minmax(0, 1fr); }
  .cabins-grid > * { grid-column: 1; grid-row: auto; }
  .cabins-room { margin-top: 2rem; }
  .cabins-twin, .cabins-baths { margin-top: 1.4rem; }
  .cabins-wash { width: 62%; justify-self: end; align-self: start; margin-top: 2rem; }
  .cabins-wash img { position: static; height: auto; aspect-ratio: 4 / 5; }
  /* pealkiri, sild sisulaiuses 4 : 3, põhilõik, kohatäidete lõik */
  .systems-grid { grid-template-columns: minmax(0, 1fr); }
  .systems-grid > * { grid-column: 1; grid-row: auto; }
  .systems-photo { margin: var(--head-gap) 0 0; }
  .systems-photo img { height: auto; aspect-ratio: 16 / 10; object-position: 50% 70%; }
  .systems-main { margin-top: 1.6rem; }
  /* kaks veergu: suur vasakul kahe rea kõrgune, väikesed paremal, neljas täislaiuses all */
  .gallery-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); aspect-ratio: auto; height: 60svh; }
  .gallery-tile:nth-child(4) { grid-column: 1 / 3; grid-row: 3; }
  /* pealkiri, siis rühmad üks tulp, silt väärtuse kohal */
  .specs-grid, .specs-group, .specs-more, .specs-list, .specs-row { display: block; }
  .specs-offer { margin-top: var(--head-gap); }
  .specs-value { margin-top: .3rem; }
  /* pealkiri ja hind foto all (portreefotot pole, 16 : 10 kaadril kataks pealkiri jahi), siis Viewing, Process,
     kontakt, footer — üks tulp */
  .closing-top, .closing-bottom { grid-template-columns: minmax(0, 1fr); row-gap: 1.6rem; }
  .closing-top { grid-area: auto; grid-row: 2; padding-top: 1rem; padding-bottom: 0; }
  .closing-bottom { grid-row: 3; padding-top: var(--head-gap); }
  .closing-top > *, .closing-bottom > * { grid-column: 1; grid-row: auto; justify-self: start; text-align: left; }
  .closing-foot { flex-direction: column; }
  .closing-share { align-self: center; }
  .menu { width: 100%; padding-left: var(--edge); }  /* lingid samal joonel lehe sisuga */
  /* lingid: laius (pikim „Crew and systems" ≈ 7.8em) ja vaba kõrgus (100svh − päis, kontakt, vahed ≈ 18.6rem;
     kaheksa lingi virn ≈ 11.5em) — väike telefon mahub ilma kerimiseta, kõrge telefon saab suurema kirja */
  .menu { --t-menu: clamp(1.3rem, min(10.5vw, (100svh - 18.8rem) / 11.5), 2.6rem); }
  .faq { inset: 0; width: auto; height: 100dvh; max-height: none; padding: calc(var(--bar-top) + var(--bar-h) + var(--head-gap)) var(--edge) calc(6rem + env(safe-area-inset-bottom)); }
  .lightbox, .lightbox.is-full { grid-template-columns: minmax(0, 1fr); }
  .lb-side { display: none; }
  .lb-rail { padding: calc(var(--bar-top) + 44px + .8rem) 0 var(--bar-top); }
  .lb-rail img { cursor: default; }
}
@media (max-width: 600px) {
  /* nimi kahel real; fotoserv läbib esimest rida */
  .hero-name { font-size: 24.9cqi; white-space: normal; }  /* pikim rida „LONDON" 3,87 em → ~96 % veerust */
  .hero-name span { display: block; }
}