/* Apartmani Martinis: the shell. The lintel (masthead and its slim plate), the menu button, the menu, the cookie notice.
   Owner orders 28.09.2026: no rule or border under the header in any state; the collapsed nav opens with a crafted
   hamburger, not a word; the open menu is composed, not a list. The header is set apart from the page by colour, air
   and composition. Light only. */

:root { --hd: 78px; --plate: 60px; --shade: 0 22px 44px -26px rgba(60, 40, 20, .5), 0 3px 10px -6px rgba(60, 40, 20, .22); }

/* ---------- the enquiry door: a flat panel painted shutter green ---------- */
.door { display: inline-flex; align-items: center; justify-content: center; flex: none; min-height: 48px; padding: 0 28px; border-radius: 2px; background: var(--green); color: #F6F1E7; text-decoration: none; font: 800 19px/1 var(--fd); letter-spacing: -.005em; transition: background-color .3s, transform .45s var(--ease); }
.door:hover { background: #24493C; }
.door:active { transform: translateY(1px); }
.door[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--terra); }

/* ---------- the languages, set as type; the one in use is painted in, like a house number ---------- */
.langs { display: flex; align-items: center; gap: 2px; }
.lg-b { display: inline-grid; place-items: center; min-width: 34px; height: 30px; padding: 0 7px; border-radius: 2px; font: 700 12px/1 var(--ft); letter-spacing: .1em; color: var(--ink2); text-decoration: none; transition: background-color .25s, color .25s; }
.lg-b:hover { color: var(--ink); background: rgba(34, 28, 22, .07); }
.lg-b[aria-current="true"] { background: var(--ink); color: var(--lime); }

/* ---------- the menu button: two ink lines of unequal length, rounded ends, a cross when open ---------- */
.hb { position: relative; display: none; place-items: center; flex: none; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--lime); color: var(--ink); cursor: pointer; transition: background-color .3s, color .3s, transform .45s var(--ease); }
.hb:hover { background: #fffaf0; }
.hb:active { transform: scale(.94); }
.lt .hb { background: var(--plaster); }
.lt .hb:hover { background: #e4d9c5; }
.hb[aria-expanded="true"], .hb[aria-expanded="true"]:hover, .lt .hb[aria-expanded="true"], .lt .hb[aria-expanded="true"]:hover { background: var(--ink); color: var(--lime); }
.hb-i { position: relative; display: block; width: 24px; height: 12px; }
.hb-i i { position: absolute; right: 0; height: 2px; border-radius: 2px; background: currentColor; transform-origin: 50% 50%;
  transition: top .45s var(--ease), width .45s var(--ease), transform .55s var(--ease); }
.hb-i i:first-child { top: 0; width: 24px; }
.hb-i i:last-child { top: 10px; width: 14px; }
@media (hover: hover) { .hb:hover .hb-i i:last-child { width: 24px; } }
.hb[aria-expanded="true"] .hb-i i { top: 5px; width: 24px; }
.hb[aria-expanded="true"] .hb-i i:first-child { transform: rotate(45deg); }
.hb[aria-expanded="true"] .hb-i i:last-child { transform: rotate(-45deg); }

/* ---------- the masthead: a plaster panel set into the page like a lintel stone; no band, no edge, no rule ---------- */
.mh { position: relative; z-index: 5; padding: 12px clamp(10px, 1.2vw, 18px) 0; }
.mh-in {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(290px, 27vw, 420px); column-gap: clamp(28px, 4vw, 80px);
  grid-template-areas: "strip strip" "name all" "name apts" "sec door";
  padding: clamp(14px, 1.4vw, 20px) calc(var(--g) - clamp(10px, 1.2vw, 18px)) clamp(26px, 2.8vw, 44px);
  border-radius: 26px; background-color: var(--plaster); background-image: var(--tex), var(--tex2);
}
.mh-strip { grid-area: strip; display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; }
.mh-place { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; font: 600 12px/1.2 var(--ft); font-stretch: 75%; letter-spacing: .18em; text-transform: uppercase; color: var(--ink2); }
.mh-co { color: var(--ink3); letter-spacing: .14em; }
.mh-tools { display: flex; align-items: center; gap: 10px; }
.mh-name { grid-area: name; align-self: end; display: block; width: fit-content; margin: clamp(10px, 1.2vw, 18px) 0 0 -.045em; font: 900 clamp(90px, 11.8vw, 230px)/.8 var(--fd); letter-spacing: -.045em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.mh-name span { display: block; padding-top: .045em; }
/* the three names by the door: a plate of three lines, no rules, set on the name's baseline */
.mh-all { grid-area: all; align-self: end; display: inline-flex; align-items: center; gap: 10px; width: fit-content; padding: 6px 0; margin-bottom: 8px; font: 700 11.5px/1.2 var(--ft); font-stretch: 75%; letter-spacing: .17em; text-transform: uppercase; color: var(--ink2); text-decoration: none; }
.mh-all svg { width: 14px; height: 14px; transition: transform .45s var(--ease); }
.mh-all:hover, .mh-all:focus-visible, .mh-all.on { color: var(--ink); }
.mh-all:hover svg { transform: translateX(4px); }
.mh-all.on span { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.mh-apts { grid-area: apts; align-self: end; min-width: 0; }
.mh-list { display: grid; gap: clamp(2px, .4vw, 6px); }
.ap-i { display: flex; align-items: baseline; gap: 14px; width: fit-content; color: var(--ink); text-decoration: none; }
.mh-list .ap-i { padding: 3px 0; }
.ap-n { flex: none; min-width: 20px; font: 600 11.5px/1 var(--ft); font-stretch: 75%; letter-spacing: .16em; color: var(--terra); }
.ap-t { font: 800 clamp(20px, 1.95vw, 32px)/1.08 var(--fd); letter-spacing: -.018em; white-space: nowrap; transition: transform .5s var(--ease), opacity .35s; }
.ap-a { font-weight: 700; color: var(--green); }
@media (hover: hover) { .ap-i:hover .ap-t { transform: translateX(8px); } }
.ap-i:focus-visible .ap-t { transform: translateX(8px); }
.mh-sec { grid-area: sec; align-self: center; display: flex; flex-wrap: wrap; gap: 4px clamp(18px, 2.2vw, 38px); margin-top: clamp(16px, 1.6vw, 24px); }
.mh-sec a { padding: 10px 0; font: 700 12.5px/1.2 var(--ft); font-stretch: 75%; letter-spacing: .17em; text-transform: uppercase; color: var(--ink); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 5px) / 0 1.5px no-repeat; transition: background-size .45s var(--ease), opacity .3s; }
.mh-sec a:hover, .mh-sec a:focus-visible, .mh-sec a.on { background-size: 100% 1.5px; }
.mh-door { grid-area: door; align-self: center; justify-self: start; margin-top: clamp(16px, 1.6vw, 24px); }
/* the page you are on: its name in ink, the others step back */
.has-on .ap-i:not(.on) .ap-t { opacity: .4; }
.mh-sec.has-on a:not(.on) { opacity: .45; }
.mh-sec.has-on a:hover { opacity: 1; }
/* inner pages: the same lintel, the name at a smaller cut */
.mh--page .mh-name { font-size: clamp(66px, 7.6vw, 140px); }
.mh--page .mh-in { padding-bottom: clamp(22px, 2.4vw, 36px); }

/* ---------- the slim lintel: a plate floating over the page ---------- */
.lt {
  position: fixed; z-index: 100; top: 10px; left: max(10px, calc(var(--g) - 20px)); right: max(10px, calc(var(--g) - 20px)); height: var(--plate);
  padding: 0 8px 0 22px; border-radius: 18px;
  background-color: rgba(246, 241, 231, .96); background-image: var(--tex); box-shadow: var(--shade);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transform: translate3d(0, calc(-100% - 24px), 0); visibility: hidden; transition: transform .6s var(--ease), visibility 0s .6s;
}
.lt-on .lt { transform: none; visibility: visible; transition: transform .6s var(--ease), visibility 0s; }
.lt-row { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 26px); height: 100%; }
.lt-name { flex: none; font: 900 27px/1 var(--fd); letter-spacing: -.04em; color: var(--ink); text-decoration: none; }
.lt-here { flex: none; display: flex; align-items: center; gap: 12px; margin: 0 auto 0 0; font: 700 12px/1.2 var(--ft); font-stretch: 75%; letter-spacing: .17em; text-transform: uppercase; color: var(--ink2); white-space: nowrap; }
.lt-here::before { content: ''; width: 16px; height: 1.5px; background: currentColor; flex: none; }
.lt-apts { display: flex; gap: clamp(14px, 1.8vw, 30px); margin-right: auto; }
.lt-here + .lt-apts { margin-left: 0; }
.lt-apts .ap-i { padding: 10px 0; }
.lt-apts .ap-t { font-size: 17px; }
.lt .door-s { min-height: 40px; padding: 0 18px; font-size: 16px; }
.lt .hb { display: grid; margin-right: 0; }
/* on an apartment page the three names already say where you are */
.lt-row--apt .lt-here { display: none; }

/* ---------- the menu: the lintel, opened ---------- */
.menu {
  position: fixed; inset: 0; z-index: 99; overflow-y: auto; overscroll-behavior: contain;
  background-color: var(--lime); background-image: var(--tex), var(--tex2);
  padding: calc(10px + var(--plate) + clamp(34px, 6vh, 70px)) var(--g) calc(48px + env(safe-area-inset-bottom));
}
.menu[hidden] { display: none; }
.mn { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr); gap: 44px clamp(44px, 6vw, 120px); align-items: start; }
.mn-l, .mn-k { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px; font: 700 12px/1.2 var(--ft); font-stretch: 75%; letter-spacing: .17em; text-transform: uppercase; color: var(--ink2); text-decoration: none; }
.mn-l::before, .mn-k::before { content: ''; width: 22px; height: 1.6px; background: currentColor; flex: none; }
.mn-l svg { width: 14px; height: 14px; transition: transform .45s var(--ease); }
.mn-l:hover { color: var(--ink); }
.mn-l:hover svg { transform: translateX(4px); }
/* three doors side by side */
.mn-apts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 28px); }
.ma { display: flex; flex-direction: column; color: var(--ink); text-decoration: none; }
.ma-img { display: block; aspect-ratio: 3 / 4.3; border-radius: 999px 999px 3px 3px; overflow: hidden; background: #cbbfa8; }
.ma-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.2s var(--ease); }
.ma:hover .ma-img img, .ma:focus-visible .ma-img img { transform: scale(1.08); }
.ma-n { margin-top: 16px; font: 600 11.5px/1 var(--ft); font-stretch: 75%; letter-spacing: .16em; color: var(--terra); }
.ma-t { margin-top: 8px; font: 900 clamp(30px, 3vw, 50px)/.92 var(--fd); letter-spacing: -.03em; transition: opacity .35s; }
.ma-a { display: block; margin: 0 0 .12em .04em; font-size: .4em; font-weight: 800; letter-spacing: -.01em; color: var(--green); }
.ma-b { display: block; }
.ma-s { margin-top: 10px; font: 600 11.5px/1.35 var(--ft); font-stretch: 75%; letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); }
.has-on .ma:not(.on) .ma-t { opacity: .4; }
/* the rooms of the house */
.mn-sec { display: grid; gap: 2px; }
.mn-sec a { display: flex; align-items: baseline; gap: 16px; width: fit-content; padding: 5px 0; color: var(--ink); text-decoration: none; }
.mn-n { flex: none; min-width: 22px; font: 600 11.5px/1 var(--ft); font-stretch: 75%; letter-spacing: .14em; color: var(--ink3); }
.mn-t { font: 800 clamp(26px, 2.4vw, 40px)/1.08 var(--fd); letter-spacing: -.02em; transition: transform .5s var(--ease), color .3s; }
@media (hover: hover) { .mn-sec a:hover .mn-t { transform: translateX(8px); } }
.mn-sec a:focus-visible .mn-t { transform: translateX(8px); }
.mn-sec a.on .mn-n { color: var(--terra); }
.mn-sec a.on .mn-t { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
.mn-sec.has-on a:not(.on) .mn-t { color: var(--ink2); }
.mn-foot { display: grid; gap: 20px; margin-top: clamp(30px, 4vh, 48px); }
.door-l { width: 100%; max-width: 440px; min-height: 64px; font-size: 26px; }
.mn-langs { display: flex; flex-wrap: wrap; gap: 8px; }
.mn-langs a { display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 14px; border-radius: 2px; color: var(--ink); text-decoration: none; font: 500 15px/1 var(--ft); background: rgba(34, 28, 22, .05); transition: background-color .25s, color .25s; }
.mn-langs b { font: 700 12px/1 var(--ft); letter-spacing: .1em; }
.mn-langs a:hover { background: rgba(34, 28, 22, .1); }
.mn-langs a[aria-current="true"] { background: var(--ink); color: var(--lime); }
.mn-mail a { font: 600 16px/1.4 var(--ft); color: var(--ink); text-decoration-color: rgba(34, 28, 22, .3); text-underline-offset: 4px; word-break: break-word; }

/* ---------- cookie notice: a small card, never a bar ---------- */
.ck {
  position: fixed; z-index: 95; right: 20px; bottom: 20px; width: min(372px, calc(100vw - 40px));
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "h h" "t t" ". ok"; gap: 6px 16px;
  padding: 18px 20px 18px 22px; border-radius: 18px; background-color: var(--lime); background-image: var(--tex); box-shadow: var(--shade);
  transition: opacity .45s var(--ease), transform .6s var(--ease);
}
.ck[hidden] { display: none; }
.ck.ck-out { opacity: 0; transform: translateY(16px); }
.ck-h { grid-area: h; display: flex; align-items: center; gap: 10px; font: 700 11.5px/1.2 var(--ft); font-stretch: 75%; letter-spacing: .17em; text-transform: uppercase; color: var(--green); }
.ck-h::before { content: ''; width: 18px; height: 1.5px; background: currentColor; }
.ck-t { grid-area: t; font: 500 14.5px/1.5 var(--ft); color: var(--ink2); text-wrap: pretty; }
.ck-t a { color: var(--ink); font-weight: 600; text-decoration-color: rgba(34, 28, 22, .35); text-underline-offset: 3px; }
.ck-ok { grid-area: ok; justify-self: end; margin-top: 6px; min-height: 44px; padding: 0 22px; border: 0; border-radius: 2px; background: var(--green); color: #F6F1E7; cursor: pointer; font: 800 16px/1 var(--fd); transition: background-color .3s; }
.ck-ok:hover { background: #24493C; }
html.ck-on body { padding-bottom: var(--ckh, 0px); }
.ck.ck-away { opacity: 0; transform: translateY(calc(100% + 24px)); pointer-events: none; }
.ck-s { display: none; grid-area: t; font: 500 13.5px/1.4 var(--ft); color: var(--ink2); }
.ck-s a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
/* while the card is open, the pinned photo stage keeps its counter and caption above it */
html.ck-on .live .seq-panel { bottom: calc(26px + var(--ckh, 0px)); }

/* =================== the shell at every width =================== */
@media (min-width: 1000px) and (max-width: 1139px) {
  .lt-apts .ap-t { font-size: 15.5px; }
  .lt-row { gap: 12px; }
}
@media (max-width: 999px) {
  :root { --hd: 72px; }
  .mh-in { grid-template-columns: minmax(0, 1fr) minmax(230px, 34%); grid-template-areas: "strip strip" "name all" "name apts" "door door"; }
  .mh-sec { display: none; }
  .mh .hb { display: grid; }
  .mh-door { justify-self: end; }
  .lt-apts, .lt .door-s { display: none; }
  .lt-here { margin-right: auto; }
  .lt-row--apt .lt-here { display: flex; }
  .mn { grid-template-columns: minmax(0, 1fr); gap: 40px; max-width: 720px; }
}
@media (max-width: 699px) {
  :root { --hd: 66px; --plate: 54px; }
  .mh { padding: 8px 8px 0; }
  .mh-in { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "strip strip" "name name" "apts apts" "all door"; column-gap: 12px; padding: 10px calc(var(--g) - 8px) 20px; border-radius: 20px; }
  .mh-place { font-size: 11px; letter-spacing: .16em; }
  .mh-co { display: none; }
  .mh-tools { gap: 4px; }
  .lg-b { min-width: 30px; height: 30px; padding: 0 6px; }
  .mh-name { margin-top: 12px; font-size: calc((100vw - 2 * var(--g)) / 3.43); }
  .mh--page .mh-name { font-size: calc((100vw - 2 * var(--g)) / 4.6); }
  .mh-apts { margin-top: 16px; }
  .mh-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .mh-list .ap-i { display: block; width: auto; padding: 0; }
  .mh-list .ap-n { display: block; margin-bottom: 6px; }
  .mh-list .ap-t { display: block; font-size: clamp(17px, 5.4vw, 22px); white-space: normal; line-height: 1.02; }
  .mh-list .ap-a { display: block; margin-bottom: 3px; font-size: .66em; }
  .mh-list .ap-b { display: block; }
  .mh-all { align-self: center; margin: 18px 0 0; }
  .mh-door { align-self: center; margin-top: 18px; min-height: 44px; padding: 0 22px; font-size: 17px; }
  .lt { top: 8px; left: 8px; right: 8px; padding: 0 4px 0 16px; border-radius: 16px; }
  .lt-name { font-size: 24px; }
  .lt-row { gap: 10px; }
  .lt-here { font-size: 11px; gap: 9px; }
  .lt-here::before { width: 12px; }
  .menu { padding-top: calc(8px + var(--plate) + 26px); }
  .mn { gap: 34px; }
  .mn-l, .mn-k { margin-bottom: 14px; }
  .mn-apts { gap: 12px; }
  .ma-n { margin-top: 12px; }
  .ma-t { font-size: clamp(22px, 7vw, 30px); }
  .ma-s { display: none; }
  .mn-sec { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 18px; }
  .mn-sec a { gap: 10px; }
  .mn-n { min-width: 16px; }
  .mn-t { font-size: clamp(20px, 5.8vw, 24px); }
  .door-l { max-width: none; min-height: 58px; font-size: 22px; }
  .mn-langs a { flex: 1 1 0; justify-content: center; padding: 12px 8px; }
  .ck { left: 10px; right: 10px; bottom: 10px; width: auto; padding: 10px 10px 10px 16px; border-radius: 14px; gap: 0 12px; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t ok"; align-items: center; }
  .ck-h, .ck-t { display: none; }
  .ck-s { display: block; }
  .ck-ok { margin-top: 0; min-height: 44px; padding: 0 16px; font-size: 15px; }
  html.ck-on .live .seq-panel { bottom: calc(10px + var(--ckh, 0px)); }
  html.ck-on .live .seq-frame { bottom: calc(138px + var(--ckh, 0px)); }
}
@media (max-width: 400px) {
  .mh-place { font-size: 10px; letter-spacing: .1em; white-space: nowrap; }
  .mh-tools .lg-b { min-width: 28px; padding: 0 5px; }
  .mh-all { gap: 6px; font-size: 10.5px; letter-spacing: .12em; white-space: nowrap; }
  .mh-all svg { width: 12px; height: 12px; }
  .mh-door { padding: 0 16px; }
  .lt-here { display: none !important; }
  .lt-name { margin-right: auto; }
  .mn-sec { grid-template-columns: minmax(0, 1fr); }
  .mn-sec a { padding: 4px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lt, .lt-on .lt, .hb-i i, .ck { transition: none; }
}

/* ---------- focus: every control shows where the keyboard is ---------- */
.hb:focus-visible { outline-offset: 2px; border-radius: 50%; }
.lg-b:focus-visible, .mn-langs a:focus-visible, .ck-ok:focus-visible, .door:focus-visible { outline-offset: 3px; border-radius: 3px; }
.mh-name:focus-visible, .lt-name:focus-visible { outline-offset: 6px; border-radius: 6px; }
.ma:focus-visible { outline: none; }
.ma:focus-visible .ma-img { outline: 2.5px solid var(--terra); outline-offset: 4px; }

/* =================== the dock: call, the way to the door, the cookie settings ===================
   Filip, 30.09.2026: floating buttons on every page. Two plates of the lintel's material: on the right the way to
   the door and the call (a flat shutter-green block, like Upit), on the left the cookie settings. They lift above the
   cookie card while it is open, step aside for the enquiry's send button, and leave the footer's last line free.
   The panels open from the plate that called them (a sheet from the bottom on phones) over a light veil, never a
   dark one. */
:root { --dkb: 0px; }
html.ck-on { --dkb: calc(var(--ckh, 0px) - 28px); }
.dk-bar {
  position: fixed; z-index: 90; bottom: 20px;
  /* its own, deeper shadow and a hairline edge (Filip 30.09: it got lost over light photographs) */
  background-color: rgba(246, 241, 231, .97); background-image: var(--tex);
  box-shadow: 0 0 0 1px rgba(34, 28, 22, .1), 0 22px 48px -14px rgba(40, 26, 12, .55), 0 8px 18px -6px rgba(40, 26, 12, .32), 0 2px 5px rgba(40, 26, 12, .14);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transform: translate3d(0, calc(-1 * (var(--dkb) + var(--dkl, 0px))), 0); transition: transform .6s var(--ease), opacity .4s var(--ease), visibility 0s;
}
.dk-bar { right: 20px; display: flex; align-items: center; gap: 6px; height: var(--plate); padding: 0 8px; border-radius: 999px; }
.dk-i { width: 20px; height: 20px; flex: none; }
.dk-b { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 20px; border-radius: 999px; color: var(--ink); text-decoration: none; font: 800 17px/1 var(--fd); letter-spacing: -.005em; white-space: nowrap; transition: background-color .3s, color .3s, transform .45s var(--ease); }
.dk-way .dk-i { color: #FFF8EF; }
/* Kako doći: the terracotta of the home page's „Odaberite ključ" (.btn-solid); Nazovite: the green one */
.dk-way { background: var(--terra); color: #FFF8EF; box-shadow: 0 10px 22px -12px rgba(160, 64, 32, .7); }
.dk-way:hover { background: #B14E2E; }
.dk-call { background: var(--green); color: #F6F1E7; box-shadow: 0 6px 14px -8px rgba(28, 58, 46, .75); }
.dk-call:hover { background: #24493C; }
.dk-b:active, .dk-ck:active { transform: translateY(1px); }
.dk-way[aria-expanded="true"] { background: var(--ink); color: var(--lime); box-shadow: none; }
.dk-way[aria-expanded="true"] .dk-i { color: var(--lime); }
.dk-call[aria-expanded="true"] { background: var(--ink); }
/* the cookie settings: a round plaster button at the plate's start, as the menu button ends the lintel */
.dk-ck { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: #EAE0CC; box-shadow: inset 0 0 0 1px rgba(34, 28, 22, .12); color: var(--ink); text-decoration: none; transition: background-color .3s, color .3s, transform .45s var(--ease); }
.dk-ck .dk-i { width: 21px; height: 21px; }
.dk-ck:hover { background: #E2D6BF; }
.dk-ck[aria-expanded="true"] { background: var(--ink); color: var(--lime); box-shadow: none; }
/* stepping aside: over the enquiry's send button, and while the photo viewer or the menu has the screen */
.dk.dk-away .dk-bar, .dk.dk-tuck .dk-bar { opacity: 0; visibility: hidden; transform: translate3d(0, calc(100% + 30px), 0); transition: transform .6s var(--ease), opacity .3s, visibility 0s .6s; }
/* the footer's last line (the way back up) stays clear of the plates */
.ft { padding-bottom: calc(clamp(34px, 4vw, 56px) + var(--plate) + 26px + env(safe-area-inset-bottom)); }

/* ---------- the panels ---------- */
.dk-scrim { position: fixed; inset: 0; z-index: 96; background: rgba(246, 241, 231, .58); opacity: 0; transition: opacity .35s var(--ease); }
.dk-scrim.on { opacity: 1; }
.dk-scrim[hidden], .dkp[hidden] { display: none; }
.dkp {
  position: fixed; z-index: 97; right: 20px; bottom: calc(20px + var(--dkb) + var(--plate) + 12px);
  width: min(420px, calc(100vw - 40px)); max-height: calc(100vh - var(--dkb) - var(--plate) - 112px); max-height: calc(100svh - var(--dkb) - var(--plate) - 112px);
  overflow-y: auto; overscroll-behavior: contain; padding: 0 26px 26px; border-radius: 22px;
  background-color: var(--lime); background-image: var(--tex), var(--tex2);
  box-shadow: 0 44px 80px -40px rgba(60, 40, 20, .55), 0 8px 22px -10px rgba(60, 40, 20, .28);
  opacity: 0; transform: translate3d(0, 14px, 0) scale(.97); transform-origin: 100% 100%;
  transition: opacity .3s var(--ease), transform .55s var(--ease);
}
.dkp.on { opacity: 1; transform: none; }
.dkp:focus { outline: none; }
.dkp-call { width: min(372px, calc(100vw - 40px)); }
.dkp-ck { width: min(440px, calc(100vw - 40px)); }
.dkp-top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; margin: 0 -26px; padding: 16px 26px 10px; background-color: var(--lime); background-image: var(--tex); }
.dkp-l { display: flex; align-items: center; gap: 10px; margin-right: auto; font: 700 11.5px/1.2 var(--ft); font-stretch: 75%; letter-spacing: .17em; text-transform: uppercase; color: var(--green); }
.dkp-l::before { content: ''; width: 18px; height: 1.5px; background: currentColor; }
.dkp-back[hidden] { display: none; }
.dkp-x, .dkp-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 2px; border: 0; background: none; cursor: pointer; color: var(--ink); font: 700 12px/1.2 var(--ft); font-stretch: 75%; letter-spacing: .17em; text-transform: uppercase; }
.dkp-x svg, .dkp-back svg { width: 18px; height: 18px; transition: transform .45s var(--ease); }
.dkp-x:hover svg { transform: rotate(90deg); }
.dkp-back { margin-right: auto; }
.dkp-back svg { transform: rotate(180deg); }
.dkp-back:hover svg { transform: rotate(180deg) translateX(4px); }
.dkp-back:not([hidden]) + .dkp-x { margin-left: auto; }
.dkp.film .dkp-l { display: none; }
.dkp-h { margin: 6px 0 20px; font: 850 30px/1.02 var(--fd); letter-spacing: -.022em; text-wrap: balance; }
.dkp-p { font: 500 14.5px/1.55 var(--ft); color: var(--ink2); text-wrap: pretty; }

/* the way: three apartments, one choice */
.dw-pick { margin: 0; padding: 0; border: 0; min-width: 0; }
.dw-q { padding: 0; margin-bottom: 8px; font: 700 11.5px/1.2 var(--ft); font-stretch: 75%; letter-spacing: .17em; text-transform: uppercase; color: var(--ink2); }
.dw-a { position: relative; display: grid; grid-template-columns: 22px 24px minmax(0, 1fr); grid-template-areas: "r n name" "r n st"; column-gap: 12px; align-items: center; margin: 0 -12px; padding: 10px 12px; border-radius: 12px; cursor: pointer; transition: background-color .3s; }
.dw-a:hover { background: rgba(34, 28, 22, .05); }
.dw-a.on { background-color: var(--plaster); }
.dw-a input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.dw-r { grid-area: r; width: 20px; height: 20px; border-radius: 50%; background: var(--lime); box-shadow: inset 0 0 0 1.6px var(--ink3); transition: box-shadow .35s var(--ease); }
.dw-a.on .dw-r { box-shadow: inset 0 0 0 6px var(--green); }
.dw-n { grid-area: n; align-self: start; padding-top: 5px; font: 600 11.5px/1 var(--ft); font-stretch: 75%; letter-spacing: .16em; color: var(--terra); }
.dw-name { grid-area: name; font: 800 21px/1.08 var(--fd); letter-spacing: -.015em; color: var(--ink); }
.dw-a1 { font-weight: 700; color: var(--green); }
.dw-st { grid-area: st; margin-top: 3px; font: 500 13.5px/1.3 var(--ft); color: var(--ink2); }
.dw-a:has(input:focus-visible) { outline: 2.5px solid var(--terra); outline-offset: 2px; }
.dw-go { margin-top: 14px; padding: 18px 20px 14px; border-radius: 16px; background-color: var(--plaster); background-image: var(--tex); }
.dw-go.in { animation: dw-in .55s var(--ease) both; }
@keyframes dw-in { from { opacity: 0; transform: translateY(10px); } }
.dw-who { font: 700 11.5px/1.2 var(--ft); font-stretch: 75%; letter-spacing: .17em; text-transform: uppercase; color: var(--green); }
.dw-adr { margin-top: 8px; }
.dw-street { display: block; font: 850 27px/1.02 var(--fd); letter-spacing: -.02em; color: var(--ink); }
.dw-town { display: block; margin-top: 5px; font: 500 15px/1.35 var(--ft); color: var(--ink2); }
.dw-maps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.dw-m { display: inline-flex; align-items: center; justify-content: center; gap: 9px; flex: 1 1 auto; min-height: 46px; padding: 0 16px; border-radius: 12px; text-decoration: none; font: 800 16.5px/1 var(--fd); white-space: nowrap; transition: background-color .3s, color .3s; }
.dw-m svg { width: 15px; height: 15px; flex: none; transition: transform .45s var(--ease); }
.dw-m:hover svg { transform: translate(2px, -2px); }
.dw-mg { background: var(--green); color: #F6F1E7; }
.dw-mg:hover { background: #24493C; }
.dw-ma { box-shadow: inset 0 0 0 1.6px var(--ink); color: var(--ink); }
.dw-ma:hover { background: var(--ink); color: var(--lime); }
.dw-note { margin-top: 10px; font: 500 12.5px/1.45 var(--ft); color: var(--ink3); text-wrap: pretty; }
.dw-copy { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin-top: 4px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--ink); font: 600 14px/1.2 var(--ft); text-decoration: underline; text-decoration-color: rgba(34, 28, 22, .35); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.dw-copy svg { width: 17px; height: 17px; flex: none; color: var(--ink2); }
.dw-copy:hover { text-decoration-color: currentColor; }
.dw-copy.done { color: var(--green); text-decoration: none; }
/* the film, as a poster you can press */
.dw-fb { display: grid; grid-template-columns: 94px minmax(0, 1fr); gap: 16px; align-items: center; width: 100%; margin-top: 22px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; color: var(--ink); }
.dw-th { position: relative; display: block; aspect-ratio: 478 / 850; overflow: hidden; border-radius: 6px; background: #cdbfa6; }
.dw-th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.dw-play { position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; overflow: visible; filter: drop-shadow(0 4px 12px rgba(34, 28, 22, .3)); }
.dw-play circle { fill: rgba(255, 248, 239, .94); stroke: var(--ink); stroke-width: 1.8; transition: fill .35s, stroke .35s; }
.dw-play path { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linejoin: round; transition: stroke .35s; }
.dw-dur { position: absolute; left: 6px; top: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(255, 248, 239, .92); font: 700 11px/1.5 var(--ft); font-variant-numeric: tabular-nums; color: var(--ink); }
.dw-ft { display: grid; gap: 6px; }
.dw-fl { font: 700 11.5px/1.2 var(--ft); font-stretch: 75%; letter-spacing: .17em; text-transform: uppercase; color: var(--ink2); }
.dw-fh { font: 800 20px/1.1 var(--fd); letter-spacing: -.015em; text-wrap: balance; }
.dw-fp { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font: 700 14.5px/1.2 var(--ft); color: var(--green); }
.dw-fp svg { width: 17px; height: 17px; transition: transform .45s var(--ease); }
.dw-fb:hover .dw-th img { transform: scale(1.05); }
.dw-fb:hover .dw-play circle { fill: var(--terra); stroke: var(--terra); }
.dw-fb:hover .dw-play path { stroke: #FFF8EF; }
.dw-fb:hover .dw-fp svg { transform: translateX(5px); }
.dw-fb:focus-visible { outline: 2.5px solid var(--terra); outline-offset: 4px; border-radius: 8px; }
.dw-foot { display: grid; gap: 14px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule); }
.dw-foot .more { font-size: 19px; gap: 12px; }
.dw-foot .more svg { width: 18px; height: 18px; }
.dw-help { font: 500 14.5px/1.45 var(--ft); color: var(--ink2); }
.dw-help a { color: var(--ink); font-weight: 700; white-space: nowrap; text-decoration-color: rgba(34, 28, 22, .35); text-underline-offset: 3px; }
.dkp.film .dkp-body { display: none; }
.dkp-film { display: grid; justify-items: center; gap: 12px; padding-top: 4px; }
.dkp-film[hidden] { display: none; }
.dw-v { display: block; width: auto; max-width: 100%; height: min(calc(100vh - var(--dkb) - var(--plate) - 250px), 620px); height: min(calc(100svh - var(--dkb) - var(--plate) - 250px), 620px); aspect-ratio: 478 / 850; object-fit: contain; border-radius: 8px; background: #26302C; }
.dw-vcap { font: 700 11.5px/1.2 var(--ft); font-stretch: 75%; letter-spacing: .17em; text-transform: uppercase; color: var(--ink2); }

/* the call */
.dc-who { font: 700 11.5px/1.2 var(--ft); font-stretch: 75%; letter-spacing: .17em; text-transform: uppercase; color: var(--ink2); }
.dc-num { margin-top: 8px; font: 900 36px/1 var(--fd); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dc-num a { color: var(--ink); text-decoration: none; }
.dc-num a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.dc-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 18px; }
.dc-go { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 12px; background: var(--green); color: #F6F1E7; text-decoration: none; font: 800 18px/1 var(--fd); transition: background-color .3s; }
.dc-go svg { width: 19px; height: 19px; }
.dc-go:hover { background: #24493C; }
.dc-acts .dw-copy { margin-top: 0; }
.dc-mail { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule); font: 500 14px/1.5 var(--ft); color: var(--ink2); }
.dc-mail a { color: var(--ink); font-weight: 600; word-break: break-word; text-decoration-color: rgba(34, 28, 22, .35); text-underline-offset: 3px; }

/* the cookie settings */
.dck { margin-top: 16px; }
.dck li { padding: 13px 0; border-top: 1px solid var(--rule); }
.dck li:last-child { border-bottom: 1px solid var(--rule); }
.dck-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.dck-n { font: 800 18px/1.15 var(--fd); letter-spacing: -.01em; }
.dck-s { display: inline-flex; align-items: center; gap: 9px; flex: none; font: 700 11px/1.2 var(--ft); font-stretch: 75%; letter-spacing: .15em; text-transform: uppercase; color: var(--ink2); text-align: right; }
.dck-on { color: var(--green); }
.dck-no { color: var(--ink3); }
.dck-sw { position: relative; width: 30px; height: 18px; border-radius: 999px; background: var(--green); opacity: .85; }
.dck-sw::after { content: ''; position: absolute; right: 3px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--lime); }
.dck-d { margin-top: 6px; font: 500 13.5px/1.5 var(--ft); color: var(--ink2); text-wrap: pretty; }
.dck-st { margin-top: 14px; font: 500 13.5px/1.4 var(--ft); color: var(--ink2); }
.dck-v { font-weight: 700; color: var(--ink); }
.dck-v.off { color: var(--ink3); }
.dck-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.dck-ok, .dck-del { min-height: 46px; padding: 0 22px; border: 0; border-radius: 12px; cursor: pointer; font: 800 16px/1 var(--fd); transition: background-color .3s, color .3s; }
.dck-ok { background: var(--green); color: #F6F1E7; }
.dck-ok:hover { background: #24493C; }
.dck-del { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.6px var(--ink); }
.dck-del:hover:not(:disabled) { background: var(--ink); color: var(--lime); }
.dck-del:disabled { opacity: .45; cursor: default; }
.dck-msg { margin-top: 10px; font: 600 13.5px/1.4 var(--ft); color: var(--green); }
.dck-msg:empty { display: none; }
.dck-more { margin-top: 16px; }
.dck-more .more { font-size: 18px; gap: 12px; }
.dck-more .more svg { width: 18px; height: 18px; }

/* focus */
.dk-b:focus-visible { outline-offset: 3px; border-radius: 999px; }
.dw-m:focus-visible, .dc-go:focus-visible, .dck-ok:focus-visible, .dck-del:focus-visible { outline-offset: 3px; border-radius: 12px; }
.dk-ck:focus-visible { outline-offset: 2px; border-radius: 50%; }
.dkp-x:focus-visible, .dkp-back:focus-visible, .dw-copy:focus-visible { outline-offset: 2px; border-radius: 3px; }

/* ---------- the dock on phones: the same plates, a sheet for the panels ---------- */
@media (max-width: 699px) {
  html.ck-on { --dkb: calc(var(--ckh, 0px) - 12px); }
  .dk-bar { right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); gap: 5px; padding: 0 6px; border-radius: 999px; }
  .dk-b { min-height: 42px; padding: 0 16px; gap: 9px; font-size: 16px; }
  .dk-ck { width: 42px; height: 42px; }
  .dkp, .dkp-call, .dkp-ck {
    left: 8px; right: 8px; width: auto; bottom: calc(8px + env(safe-area-inset-bottom));
    max-height: calc(100vh - var(--plate) - 30px); max-height: calc(100svh - var(--plate) - 30px - env(safe-area-inset-bottom));
    padding: 0 18px calc(20px + env(safe-area-inset-bottom) * 0); border-radius: 20px; transform: translate3d(0, 44px, 0); transform-origin: 50% 100%;
  }
  .dkp.on { transform: none; }
  .dkp-top { margin: 0 -18px; padding: 12px 18px 8px; }
  .dkp-h { font-size: 26px; margin-bottom: 16px; }
  .dw-name { font-size: 20px; }
  .dw-go { padding: 16px 16px 12px; }
  .dw-street { font-size: 25px; }
  .dc-num { font-size: clamp(28px, 8.6vw, 34px); }
  .dw-v { height: min(calc(100svh - var(--plate) - 190px), 620px); }
}
@media (max-width: 359px) {
  .dk-b { padding: 0 13px; }
  .dk-call { width: 42px; padding: 0; justify-content: center; }
  .dk-call .dk-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dw-m { flex-basis: 100%; }
}
/* the plates arrive a moment after the page, rising from the bottom edge (translate, so the lift above the cookie card,
   which is a transform, is never touched) */
@keyframes dk-rise { from { opacity: 0; translate: 0 22px; } }
.js .dk-bar { animation: dk-rise .9s var(--ease) .7s backwards; }
@media (prefers-reduced-motion: reduce) {
  .dk-bar, .dk-ck, .dkp, .dk-scrim, .dw-r, .dw-th img { transition: none; }
  .js .dk-bar { animation: none; }
  .dkp { transform: none; }
  .dw-go.in { animation: none; }
}
@media print { .dk, .dk-scrim, .dkp { display: none !important; } }

/* the dock: a car goes to Parking Rogači for Zrinsko Frankopanska 27, then Eta's walk (30.09.2026) */
.dw-drv { margin-top: 14px; font: 600 11.5px/1.3 var(--ft); font-stretch: 75%; letter-spacing: .15em; text-transform: uppercase; color: var(--ink2); }
.dw-drv + .dw-maps { margin-top: 8px; }
.dw-walk { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(47, 91, 76, .08); font: 500 14.5px/1.5 var(--ft); color: var(--ink); }
.dw-mapl { margin-top: 10px; }