/* Self-hosted Inter and Manrope (SIL OFL 1.1, see assets/fonts/OFL-*.txt). Variable woff2 subsets, one file per script. */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500 800; font-display: swap; src: url('../../assets/fonts/manrope-greek.woff2') format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500 800; font-display: swap; src: url('../../assets/fonts/manrope-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500 800; font-display: swap; src: url('../../assets/fonts/manrope-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../../assets/fonts/inter-greek.woff2') format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../../assets/fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../../assets/fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --sc-canvas: #f7f5ef;
  --sc-surface: #eeebe2;
  --sc-ink: #242822;
  --sc-ink-soft: #50594e;
  --b-heading-color: #4a453f;
  --sc-accent: #344f3c;
  --sc-accent-ink: #f8faf3;
  --sc-font-display: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --sc-font-text: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --b-header-height: 6.75rem;
  --sheet-gap: clamp(1.75rem, 4vw, 4.1rem);
  --measure: 100rem;
}
.concept-b :is(h1, h2, h3, h4, h5, h6) { color: var(--b-heading-color); }
.b-header {
  --menu-ground: #e9efe4;
  position: sticky; top: 0; z-index: 10;
  background: var(--menu-ground); border-bottom: 1px solid var(--rule);
}
.b-sheet { max-width: var(--measure); margin-inline: auto; padding-inline: var(--sheet-gap); }
.b-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.b-header .logo {
  width: 7.5rem; height: var(--b-header-height); display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.b-header .main-nav { margin-inline: auto; }
.b-header nav a[aria-current="location"] { color: var(--sc-accent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .45em; }
.b-header-tools { display: flex; align-items: center; gap: .9rem; }
.b-language-menu { position: relative; color: var(--sc-accent); }
.b-language-menu summary { display: flex; align-items: center; width: fit-content; min-height: 2.75rem; cursor: pointer; list-style: none; }
.b-language-menu summary::-webkit-details-marker { display: none; }
.b-language-trigger { display: flex; align-items: center; gap: .35rem; padding: .32rem .55rem; border: 1px solid var(--rule); border-radius: 999px; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.b-language-menu img { display: block; width: 18px; height: 12px; object-fit: cover; border-radius: 2px; }
.b-language-chevron { width: .35rem; height: .35rem; margin: -.14rem .12rem 0 .06rem; border: solid currentColor; border-width: 0 1px 1px 0; transform: rotate(45deg); }
.b-language-menu[open] .b-language-chevron { margin-top: .14rem; transform: rotate(225deg); }
.b-language-options { position: absolute; top: 100%; left: 0; z-index: 1; min-width: 9rem; padding: .2rem; background: var(--menu-ground); border: 1px solid var(--rule); box-shadow: 0 .5rem 1.5rem #20252218; }
.b-language-options a { display: flex; align-items: center; gap: .5rem; min-height: 44px; padding-inline: .5rem; font-size: .85rem; text-decoration: none; }
.b-language-options a[aria-current] { font-weight: 700; }
.b-language-check { margin-inline-start: auto; }
.b-header-contact { display: flex; align-items: center; color: var(--sc-accent); }
.b-header-contact a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; }
.b-header-contact a:focus-visible { outline-offset: -2px; }
.b-header-contact svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.b-header-contact img { width: 1.5rem; height: 1.5rem; }
.b-header .mobile-menu > summary { display: grid; place-items: center; width: 2.75rem; color: var(--sc-accent); }
.b-header .mobile-menu > summary::after { content: none; }
.b-header .mobile-menu > summary svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.b-header .mobile-menu:not([open]) .b-menu-close,
.b-header .mobile-menu[open] .b-menu-open { display: none; }
@media (hover: hover) {
  .b-header-contact a:hover { background: var(--rule); }
  .b-language-menu summary:hover .b-language-trigger,
  .b-language-options a:hover { background: var(--rule); }
}
.concept-b main section[id] { scroll-margin-top: var(--b-header-height); }
.b-hero { padding-top: clamp(1.5rem, 1.9vw, 1.75rem); }
.b-title-block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(11.5rem, 24%); align-items: end; gap: 1.4rem 2rem; margin-bottom: 1rem; }
.b-title-block .micro { color: var(--sc-accent); margin-bottom: .7rem; }
.b-title-block h1 {
  font-size: clamp(2.55rem, 4.45vw, 4.8rem);
  line-height: 1.03;
  letter-spacing: -.035em;
  text-wrap: initial;
}
.b-brand-dot {
  display: inline-block;
  inline-size: .16em;
  block-size: .16em;
  margin-inline: .06em;
  overflow: hidden;
  border-radius: 50%;
  background: var(--b-heading-color);
  color: transparent;
  vertical-align: .27em;
}
.b-hero-intro { font-size: .9rem; color: var(--sc-ink-soft); }
.b-drawing .frame { width: 100%; aspect-ratio: 2.18; max-height: clamp(18rem, 55vh, 39rem); }
.b-drawing img { object-position: center 58%; }
/* Hero photo: a thin light line just inside the edge, like a print behind a passe-partout. Static, no motion. */
.b-drawing .frame::after {
  content: ""; position: absolute; inset: clamp(.65rem, 1.3vw, 1.15rem); z-index: 1; pointer-events: none;
  border: 1px solid var(--sc-canvas);
}
.b-drawing figcaption { margin: 0; padding: .45rem 0; font-size: .73rem; }
.b-spec-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-block: 1px solid var(--rule); background: var(--sc-canvas); }
.b-spec-cell { padding: .85rem .85rem; border-left: 1px solid var(--rule); display: flex; align-items: center; gap: .75rem; transition: background .2s ease; }
.b-spec-cell:first-child { border-left: none; }
.b-spec-cell:hover { background: rgba(255, 255, 255, 0.7); }
.b-spec-icon { width: 2.25rem; height: 2.25rem; border-radius: 9999px; background: #fff; border: 1px solid var(--rule); color: var(--sc-accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 6px rgba(0,0,0,0.03); }
.b-spec-icon svg { width: 1.15rem; height: 1.15rem; display: block; }
.b-spec-meta { min-width: 0; overflow-wrap: anywhere; }
.b-spec-meta dt { font-size: .72rem; color: var(--sc-ink-soft); font-weight: 500; line-height: 1.2; margin-bottom: .15rem; }
.b-spec-meta dd { font-family: var(--sc-font-display); font-size: .88rem; font-weight: 700; color: var(--sc-ink); line-height: 1.25; }
.b-overview { padding-block: clamp(2.5rem, 5vw, 4.5rem); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 1.5rem clamp(2rem, 4vw, 4rem); align-items: start; }
.b-overview-lead .micro { color: var(--sc-accent); margin-bottom: .75rem; }
.b-overview h2 { font-size: clamp(1.95rem, 3.2vw, 2.7rem); line-height: 1.12; letter-spacing: -.03em; font-weight: 700; }
.b-overview-sub { display: block; margin-top: .7rem; font-size: clamp(1.05rem, 1.35vw, 1.25rem); font-weight: 500; line-height: 1.45; letter-spacing: -.01em; }
.b-overview-story p { color: var(--sc-ink-soft); font-size: clamp(.95rem, 1.05vw, 1.04rem); line-height: 1.68; }
.b-overview-story p + p { margin-top: 1.15rem; }
.b-location h2 { font-size: clamp(1.8rem, 3.4vw, 3.1rem); }
.b-gallery, .b-amenities { background: #e1ebdc; padding-block: clamp(3rem, 5.5vw, 5rem); }
.b-section-head { display: flex; align-items: end; justify-content: space-between; gap: .6rem 1rem; margin-bottom: 2rem; flex-wrap: wrap; }
.b-section-head p { color: var(--sc-ink-soft); }
/* Typewriter for the Rooms intro (preview.js): hidden letters keep their space, so nothing reflows while it types. */
.tw-char { opacity: 0; }
.tw-char.is-on { opacity: 1; }
.tw-char.is-caret { position: relative; }
.tw-char.is-caret::after {
  content: ""; position: absolute; inset-block: .12em; inset-inline-end: -.14em; width: 2px;
  background: var(--sc-accent); animation: tw-blink 1s steps(1) infinite;
}
@keyframes tw-blink { 50% { opacity: 0; } }
.room-index { display: grid; grid-template-columns: minmax(9.25rem, 22%) minmax(0, 1fr); gap: 1.25rem 2rem; border: 0; padding: 0; min-inline-size: 0; }
.room-views { --room-aspect: 1.71; min-width: 0; }
.room-options { position: relative; display: grid; align-content: start; }
.room-options label { display: flex; justify-content: space-between; align-items: center; gap: .45rem; border-top: 1px solid var(--rule); min-height: 3.25rem; padding: .45rem .5rem; font-size: .84rem; cursor: pointer; }
.room-options label:last-child { border-bottom: 1px solid var(--rule); }
.room-radio:checked + label { background: var(--sc-accent); color: var(--sc-accent-ink); }
.room-radio:focus-visible + label { outline: 2px solid var(--sc-ink); outline-offset: 2px; }
.room-options label:hover { text-decoration: underline; }
.room-panel { display: none; }
.room-index:has(#room-1:checked) .room-panel-1,
.room-index:has(#room-2:checked) .room-panel-2,
.room-index:has(#room-3:checked) .room-panel-3 { display: block; }
.room-index:has(#room-4:checked) .room-panel-4 {
  display: grid;
  grid-template-columns: calc(100% / var(--room-aspect) * 2 / 3) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.25rem, 4vw, 4rem);
}
.room-panel p { color: var(--sc-ink-soft); margin-top: .45rem; }
.b-room-photo .photo-link { aspect-ratio: var(--room-aspect); }
.room-panel-4 .photo-link { aspect-ratio: 2 / 3; }
.room-panel-4 p { max-width: 26ch; }
.b-terrace { padding-block: clamp(2.9rem, 5.4vw, 4.8rem); }
.b-terrace-inner { display: grid; grid-template-columns: .65fr 1.35fr; gap: 1.25rem 2.6rem; align-items: center; }
.b-terrace h2 { margin-bottom: .8rem; }
.b-terrace .photo-link { aspect-ratio: 1.85; }
.b-ledger { display: grid; grid-template-columns: .7fr 1.3fr; gap: 1.5rem 3rem; }
/* Location Hub */
.b-location-hub {
  padding-block: clamp(3rem, 6vw, 5.5rem);
  border-top: 1px solid var(--rule);
}
.b-location-header {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 1.5rem clamp(2rem, 4vw, 4rem);
  align-items: start;
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
}
.b-location-header .micro {
  color: var(--sc-accent);
  margin-bottom: .6rem;
}
.b-location-header h2 {
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  line-height: 1.12;
}
.b-location-address-box p {
  color: var(--sc-ink-soft);
  margin-bottom: 1.1rem;
  line-height: 1.6;
}
.b-location-address-box .action {
  font-size: .84rem;
}

/* Distance Cards Grid */
.b-distance-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--rule);
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
  background: var(--sc-canvas);
}
.b-dist-card {
  padding: clamp(1.2rem, 2vw, 1.7rem);
  display: flex;
  flex-direction: column;
  background: var(--sc-canvas);
  transition: background .2s ease;
}
.b-dist-card:hover {
  background: color-mix(in srgb, var(--sc-accent) 3.5%, #ffffff);
}
.b-dist-card + .b-dist-card {
  border-left: 1px solid var(--rule);
}
.b-dist-head {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
}
.b-dist-icon {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--sc-accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--sc-accent) 18%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sc-accent);
  flex-shrink: 0;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.b-dist-card:hover .b-dist-icon {
  background: color-mix(in srgb, var(--sc-accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--sc-accent) 32%, transparent);
  transform: translateY(-1px);
}
.b-dist-icon svg {
  display: block;
  width: 1.35rem;
  height: 1.35rem;
}
.b-icon-lighthouse {
  color: var(--sc-accent);
}
.b-dist-dest {
  font-size: .84rem;
  font-weight: 700;
  color: var(--b-heading-color);
  letter-spacing: -.01em;
  line-height: 1.25;
}
.b-dist-time {
  font-size: clamp(2.3rem, 3.8vw, 3.2rem);
  font-family: var(--sc-font-display);
  font-weight: 700;
  line-height: 1;
  color: var(--sc-accent);
  margin-bottom: .65rem;
  display: flex;
  align-items: baseline;
  gap: .4rem;
}
.b-dist-unit {
  font-size: .88rem;
  font-weight: 400;
  color: var(--sc-ink-soft);
  font-family: var(--sc-font-text);
}
.b-dist-meta {
  font-size: .84rem;
  color: var(--sc-ink-soft);
  line-height: 1.48;
  margin: 0;
  margin-top: auto;
}

/* The frame stays put and the distance cards slide in to fill it, alternating sides:
   airport from the left, Old Harbour from the right, Souda port from the left, National Road from the right.
   With two columns (≤1050px) it is left column from the left, right column from the right, in reading order.
   scrollcraft adds .sc-in to the grid when it scrolls into view. */
.b-distance-grid[data-sc-in] { opacity: 1; transform: none; overflow: clip; }
.b-distance-grid[data-sc-in] .b-dist-card {
  transition: opacity .7s var(--sc-ease-out) var(--d, 0s), transform .7s var(--sc-ease-out) var(--d, 0s), background .2s ease;
}
.b-distance-grid[data-sc-in]:not(.sc-in) .b-dist-card { opacity: 0; transform: translateX(-3rem); }
.b-distance-grid[data-sc-in]:not(.sc-in) .b-dist-card:nth-child(n+3) { transform: translateX(3rem); }
.b-dist-card:nth-child(4) { --d: .18s; }
.b-dist-card:nth-child(2) { --d: .36s; }
.b-dist-card:nth-child(3) { --d: .54s; }
@media (max-width: 1050px) {
  .b-distance-grid[data-sc-in]:not(.sc-in) .b-dist-card:nth-child(odd) { transform: translateX(-3rem); }
  .b-distance-grid[data-sc-in]:not(.sc-in) .b-dist-card:nth-child(even) { transform: translateX(3rem); }
  .b-dist-card:nth-child(2) { --d: .18s; }
  .b-dist-card:nth-child(3) { --d: .36s; }
  .b-dist-card:nth-child(4) { --d: .54s; }
}
@media (prefers-reduced-motion: reduce) {
  .b-distance-grid[data-sc-in] .b-dist-card { transform: none !important; }
}

/* Neighborhood Essentials Strip */
.b-neighborhood-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 2rem);
  padding: clamp(1.2rem, 2.2vw, 1.8rem);
  background: color-mix(in srgb, var(--sc-accent) 6%, transparent);
  border: 1px solid var(--rule);
}
.b-nh-item {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
}
.b-nh-icon {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--sc-accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--sc-accent) 18%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sc-accent);
  flex-shrink: 0;
}
.b-nh-icon svg {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
}
.b-nh-item strong {
  display: block;
  font-size: .88rem;
  color: var(--b-heading-color);
  margin-bottom: .2rem;
  line-height: 1.25;
}
.b-nh-item p {
  font-size: .8rem;
  color: var(--sc-ink-soft);
  line-height: 1.45;
  margin: 0;
}
/* Once, when the strip scrolls into view (scrollcraft adds .sc-in): all icons pop in together,
   then each title appears one by one with its description. The strip itself stays put. */
.b-neighborhood-strip[data-sc-in] { opacity: 1; transform: none; }
.b-neighborhood-strip[data-sc-in] .b-nh-icon { transition: opacity .4s var(--sc-ease-out), transform .4s var(--sc-ease-out); }
.b-neighborhood-strip[data-sc-in] .b-nh-item strong {
  transition: opacity .4s var(--sc-ease-out) var(--t, .25s), transform .4s var(--sc-ease-out) var(--t, .25s);
}
.b-neighborhood-strip[data-sc-in] .b-nh-item p { transition: opacity .4s ease var(--t, .25s); }
.b-nh-item:nth-child(2) { --t: .35s; }
.b-nh-item:nth-child(3) { --t: .45s; }
.b-nh-item:nth-child(4) { --t: .55s; }
.b-neighborhood-strip[data-sc-in]:not(.sc-in) .b-nh-icon { opacity: 0; transform: scale(.6); }
.b-neighborhood-strip[data-sc-in]:not(.sc-in) .b-nh-item strong { opacity: 0; transform: translateY(.4rem); }
.b-neighborhood-strip[data-sc-in]:not(.sc-in) .b-nh-item p { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .b-neighborhood-strip[data-sc-in] :is(.b-nh-icon, strong) { transform: none !important; }
}
/* Contact & Direct Booking Section */
.b-contact {
  padding-block: clamp(3rem, 5.5vw, 5rem);
  background: var(--sc-canvas);
  border-top: 1px solid var(--rule);
}
/* The inner .section adds its own padding on top of the section's; keep only one gap above and below. */
.b-contact > .section { padding-block: 0; }
.b-contact-header {
  margin-bottom: clamp(1.8rem, 3vw, 2.5rem);
  max-width: 46rem;
}
.b-contact-header .micro {
  color: var(--sc-accent);
  margin-bottom: .6rem;
}
.b-contact-header h2 {
  font-size: clamp(1.9rem, 3.2vw, 2.85rem);
  line-height: 1.12;
  letter-spacing: -.03em;
  margin-bottom: .85rem;
}
.b-contact-intro {
  font-size: clamp(.95rem, 1.1vw, 1.05rem);
  color: var(--sc-ink-soft);
  line-height: 1.6;
  margin: 0;
}

/* Contact Cards Grid */
.b-contact-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-bottom: clamp(1.5rem, 2.8vw, 2.2rem);
}
.b-contact-card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.2rem, 2.2vw, 1.8rem);
  border: 1px solid var(--rule);
  background: var(--sc-surface);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.b-contact-card:hover {
  border-color: color-mix(in srgb, var(--sc-accent) 45%, var(--rule));
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
}

.b-contact-card-head {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: 1rem;
}
.b-contact-icon {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--sc-accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--sc-accent) 20%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sc-accent);
  flex-shrink: 0;
}
.b-contact-icon svg,
.b-contact-icon img {
  display: block;
  width: 1.35rem;
  height: 1.35rem;
}
.b-contact-label {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sc-accent);
}
.b-contact-card-head strong {
  display: block;
  font-size: 1.05rem;
  color: var(--b-heading-color);
  letter-spacing: -.01em;
}
.b-contact-card-desc {
  font-size: .86rem;
  color: var(--sc-ink-soft);
  line-height: 1.5;
  margin: 0;
  /* Same as the card's own padding, so a single button can sit exactly halfway between the text and the card edge. */
  margin-bottom: clamp(1.2rem, 2.2vw, 1.8rem);
}

/* Action Buttons inside cards: one full-width button per row, so WhatsApp and Viber are equal
   and every card's buttons look the same as the two phone numbers. */
.b-chat-actions,
.b-contact-phone-links {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: .5rem;
  margin-block: auto;
}
/* Three cards in a row: they share the rows of the grid, so titles, texts and the two-button blocks line up.
   The form card has one button; the auto margins centre it between its text and the bottom of the card. */
@media (min-width: 1051px) {
  .b-contact-card { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
}
.b-contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 44px;
  padding: .65rem 1rem;
  font-size: .84rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 3px;
  transition: transform .16s var(--sc-ease-out), background-color .2s ease, color .2s ease, border-color .2s ease, filter .2s ease;
  flex: 1 1 auto;
}
/* Tap and hover feedback: the button sinks a little when pressed and lifts under a mouse. */
@media (hover: hover) {
  .b-contact-btn:hover { transform: translateY(-2px); }
}
.b-contact-btn:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) {
  .b-contact-btn { transform: none !important; }
}
.b-btn-whatsapp {
  background: #367b56;
  color: #ffffff;
  border: 1px solid #2c6046;
}
.b-btn-whatsapp:hover {
  background: #2c6046;
  color: #ffffff;
}
.b-btn-viber {
  background: #7360f2;
  color: #ffffff;
  border: 1px solid #6250e0;
}
.b-btn-viber:hover {
  background: #6250e0;
  color: #ffffff;
}
.b-btn-primary {
  background: var(--sc-accent);
  color: var(--sc-accent-ink);
  border: 1px solid var(--sc-accent);
}
.b-btn-primary:hover {
  color: var(--sc-accent-ink);
  filter: brightness(.89);
}
.b-btn-outline {
  background: var(--sc-canvas);
  color: var(--sc-accent);
  border: 1px solid var(--rule);
}
.b-btn-outline:hover {
  background: var(--sc-accent);
  color: var(--sc-accent-ink);
  border-color: var(--sc-accent);
}

.b-form-page { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 6vw, 6rem); padding-block: clamp(2.5rem, 7vw, 6rem); }
.b-form-intro h1 { margin: .7rem 0 1rem; font-size: clamp(2.4rem, 5vw, 4.5rem); letter-spacing: -.04em; }
.b-form-intro p, .b-form-note { color: var(--sc-ink-soft); }
.b-form-intro address { margin-top: 1.5rem; }
.b-form-intro .text-link { display: flex; color: var(--sc-accent); overflow-wrap: anywhere; }
.b-contact-form { min-width: 0; padding: clamp(1rem, 3vw, 2rem); border: 1px solid var(--rule); background: var(--menu-ground, #e9efe4); }
.b-contact-form fieldset { display: grid; gap: .55rem; min-width: 0; padding: 0; border: 0; }
.b-contact-form label { font-weight: 650; }
.b-contact-form :is(input, textarea) { width: 100%; min-height: 44px; margin-bottom: .55rem; padding: .65rem; border: 1px solid var(--rule); background: var(--sc-canvas); color: var(--sc-ink); font: inherit; }
.b-contact-form textarea { resize: vertical; }
.b-contact-form button { border: 0; cursor: pointer; }
.b-contact-form button:disabled { opacity: .6; cursor: default; }
.b-form-note { font-size: .85rem; margin-bottom: .5rem; }
.b-form-status:not(:empty) { margin-top: .9rem; font-weight: 650; }
@media (max-width: 700px) { .b-form-page { grid-template-columns: minmax(0, 1fr); } }

/* Booking platforms */
.b-contact-footer-row {
  padding-top: .5rem;
}
.b-platforms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem 1.25rem;
}
.b-platforms .micro {
  font-size: .8rem;
}
.b-platforms ul {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.b-platforms a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  gap: .4rem;
  padding-inline: clamp(.4rem, 2vw, .6rem);
  border: 1px solid var(--rule);
  color: var(--sc-accent);
  font-size: .85rem;
  text-decoration: none;
}
.b-platforms a:hover {
  border-color: var(--sc-accent);
}
.b-platforms img {
  width: auto;
  height: clamp(1.875rem, 8.8vw, 2.4rem);
}
.b-platforms .b-booking-logo {
  height: clamp(1.4rem, 6.5vw, 1.8rem);
}

.b-footer { background: #e9efe4; padding-block: 1rem; }
.b-footer-inner { display: flex; align-items: center; gap: .85rem; }
.b-footer .logo { width: clamp(3.5rem, 6vw, 4.25rem); }
.b-footer address { font-size: .88rem; font-weight: 600; }
.b-footer-ama { margin-top: .25rem; font-size: .8rem; color: var(--sc-ink-soft); }
.b-footer-ama strong { color: var(--sc-ink); white-space: nowrap; }
@media (max-width: 1050px) {
  .b-header .main-nav { display: none; }
  .b-header .mobile-tools { display: flex; }
  .b-distance-grid { grid-template-columns: repeat(2, 1fr); }
  .b-dist-card:nth-child(2) { border-right: 0; }
  .b-dist-card:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .b-dist-card:nth-child(3) { border-left: 0; }
  .b-neighborhood-strip { grid-template-columns: repeat(2, 1fr); }
  .b-spec-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .b-spec-cell:nth-child(3n+1) { border-left: none; }
  .b-spec-cell:nth-child(n+4) { border-top: 1px solid var(--rule); }
}
@media (max-width: 820px) {
  :root { --sheet-gap: 1.25rem; --b-header-height: 5rem; }
  .b-header .logo { width: 5.4rem; }
  .b-language-menu summary { justify-content: center; width: 3rem; min-height: 3rem; }
  .b-language-trigger { padding: 0; border: 0; border-radius: 0; }
  .b-language-trigger img { width: 1.375rem; height: .9375rem; }
  .b-language-label, .b-language-chevron { display: none; }
  .b-header-contact { gap: .375rem; }
  .b-header-contact a { width: 3rem; height: 3rem; }
  .b-header-contact svg { width: 1.25rem; height: 1.25rem; }
  .b-header-contact img { width: 1.75rem; height: 1.75rem; }
}
@media (max-width: 560px) {
  :root { --b-header-height: clamp(5rem, 23vw, 6rem); }
  .b-header-inner { padding-inline: .25rem; gap: .25rem; }
  .b-header .logo { width: clamp(4rem, 25vw - .875rem, var(--b-header-height)); }
  .b-header-tools {
    --tools-gap: .25rem;
    --tool-width: calc((100% - 5 * var(--tools-gap)) / 6);
    display: grid;
    grid-template-columns: var(--tool-width) minmax(0, 1fr) var(--tool-width);
    gap: var(--tools-gap);
    flex: 1;
    min-width: 0;
    max-width: calc(18rem + 5 * var(--tools-gap));
  }
  .b-header-contact { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tools-gap); }
  .b-header-contact a, .b-language-menu summary, .b-header .mobile-menu { width: 100%; }
  .b-header .mobile-menu > summary { width: 100%; min-height: 3rem; }
}
@media (max-width: 360px) {
  .b-header-tools { --tools-gap: .1875rem; }
}
@media (max-width: 700px) {
  .b-hero { padding-top: 1.65rem; }
  .b-title-block { grid-template-columns: 1fr; margin-bottom: 1.2rem; gap: .7rem; }
  .b-title-block h1 { font-size: clamp(1.95rem, 8.5vw, 3.5rem); }
  .b-title-block .micro { margin-bottom: .5rem; }
  .b-drawing { margin-inline: calc(-1 * var(--sheet-gap)); }
  .b-drawing .frame { aspect-ratio: 1.48; }
  .b-drawing img { object-position: 38% 57%; }
  .b-drawing figcaption { padding-inline: var(--sheet-gap); }
  .b-spec-strip { margin-inline: calc(-1 * var(--sheet-gap)); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b-spec-cell { padding: .65rem .75rem; gap: .55rem; border-top: none; }
  .b-spec-cell:nth-child(odd) { border-left: none; }
  .b-spec-cell:nth-child(even) { border-left: 1px solid var(--rule); }
  .b-spec-cell:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .b-spec-icon { width: 1.95rem; height: 1.95rem; }
  .b-spec-icon svg { width: 1rem; height: 1rem; }
  .b-spec-meta dt { font-size: .68rem; }
  .b-spec-meta dd { font-size: .82rem; }
  .b-overview, .b-terrace-inner, .b-ledger, .b-location-header, .room-index { grid-template-columns: 1fr; }
  .b-distance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-inline: calc(-1 * var(--sheet-gap));
    border-inline: 0;
  }
  .b-dist-card {
    padding: .85rem .75rem;
    border-left: 1px solid var(--rule);
    border-top: none;
  }
  .b-dist-card:nth-child(2n+1) { border-left: none; }
  .b-dist-card:nth-child(n+3) { border-top: 1px solid var(--rule); }
  /* Phones: the icon sits above the destination so the title gets the full card width,
     and every line stays at a comfortable reading size (about 13–14px). */
  .b-dist-head { flex-direction: column; align-items: flex-start; gap: .45rem; margin-bottom: .5rem; }
  .b-dist-icon { width: 2rem; height: 2rem; }
  .b-dist-icon svg { width: 1.15rem; height: 1.15rem; }
  .b-dist-dest { font-size: .88rem; line-height: 1.25; }
  .b-dist-time { font-size: 1.85rem; margin-bottom: .3rem; gap: .25rem; }
  .b-dist-unit { font-size: .8rem; }
  .b-dist-meta { font-size: .82rem; line-height: 1.4; }
  .b-neighborhood-strip {
    grid-template-columns: minmax(0, 1fr);
    margin-inline: calc(-1 * var(--sheet-gap));
    border-inline: 0;
    gap: .9rem;
    padding: 1.1rem var(--sheet-gap);
  }
  .b-nh-item { gap: .7rem; }
  .b-nh-icon { width: 2rem; height: 2rem; }
  .b-nh-icon svg { width: 1.05rem; height: 1.05rem; }
  .b-nh-item strong { font-size: .9rem; line-height: 1.25; }
  .b-nh-item p { font-size: .84rem; line-height: 1.4; }
  .b-section-head { margin-bottom: 1.15rem; }
  .room-options { grid-template-columns: 1fr 1fr; }
  .room-options label { border: 1px solid var(--rule); padding-inline: .55rem; min-height: 3rem; }
  .room-options label:nth-of-type(even) { border-left: 0; }
  .room-options label:nth-of-type(n+3) { border-top: 0; }
  .room-views { --room-aspect: 1.27; }
  .room-panel p { min-block-size: 2lh; }
  /* Phones: the two upright bathroom photos sit side by side, the description below them. */
  .room-index:has(#room-4:checked) .room-panel-4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; align-items: start; }
  .room-panel-4 .b-room-detail { display: contents; }
  .room-panel-4 .b-room-thumb { width: auto; }
  .room-panel-4 .b-room-thumb figcaption { margin-top: .6rem; font-size: .78rem; line-height: 1.62; }
  .room-panel-4 p { max-width: none; grid-column: 1 / -1; }
  .b-contact-cards { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: no-preference) {
  /* Choosing a room: the panel fades up and its main photo settles from a slight zoom. */
  .room-panel { animation: room-entry .32s var(--sc-ease-out); }
  .room-panel .b-room-photo img { animation: room-settle .6s var(--sc-ease-out); }
  @keyframes room-entry { from { opacity: .45; } to { opacity: 1; } }
  @keyframes room-settle { from { transform: scale(1.035); } }
}
@media (min-width: 701px) and (max-width: 1050px) {
  .b-contact-cards { grid-template-columns: 1fr; }
}

/* Second photos: rooms and terrace */
.b-room-detail { display: flex; align-items: flex-start; gap: 1rem; margin-top: .75rem; }
.b-room-detail p { margin-top: 0; }
.b-room-thumb { flex: 0 0 clamp(6.5rem, 22%, 12rem); }
.b-room-thumb .photo-link { aspect-ratio: 3 / 2; }
.room-panel-4 .b-room-detail { flex-direction: column; }
.room-panel-4 .b-room-thumb { flex-basis: auto; width: clamp(5.5rem, 34%, 8rem); }
.room-panel-4 .b-room-thumb .photo-link { aspect-ratio: 2 / 3; }
.b-room-thumb figcaption, .b-terrace-more figcaption { margin-top: .35rem; font-size: .72rem; line-height: 1.3; }
.b-terrace-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: .75rem; }
.b-terrace-more .photo-link { aspect-ratio: 3 / 2; }
:is(.b-room-thumb, .b-terrace-more) .photo-zoom { inset-block-end: .35rem; inset-inline-end: .35rem; min-block-size: 1.75rem; padding: .3rem; }

/* Arriving by car */
.b-arrival { margin-bottom: clamp(2rem, 3.5vw, 3rem); }
.b-arrival-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .35rem 1rem; margin-bottom: 1rem; }
.b-arrival-head h3 { font-size: clamp(1.2rem, 1.7vw, 1.45rem); letter-spacing: -.015em; }
.b-arrival-head p { color: var(--sc-ink-soft); font-size: .9rem; }
.b-arrival-steps { counter-reset: arrival; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.75rem, 1.6vw, 1.25rem); margin: 0; padding: 0; list-style: none; }
.b-arrival-steps li { counter-increment: arrival; min-width: 0; }
.b-arrival-photo .photo-link { aspect-ratio: 4 / 3; }
.b-arrival-photo figcaption { display: flex; align-items: baseline; gap: .55rem; margin-top: .6rem; color: var(--sc-ink); font-size: .84rem; line-height: 1.4; }
.b-arrival-photo figcaption::before {
  content: counter(arrival); flex: none; display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem;
  border-radius: 50%; background: var(--sc-accent); color: var(--sc-accent-ink); font-size: .72rem; font-weight: 700;
}

/* Lightbox navigation within a photo group */
.lightbox-nav { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: .15rem 0 .1rem; }
.lightbox-nav[hidden] { display: none; }
.lightbox-nav button { width: 44px; height: 44px; border: 1px solid var(--rule); background: var(--sc-canvas); color: var(--sc-ink); font-size: 1.15rem; cursor: pointer; }
.lightbox-nav button:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 2px; }
.lightbox-count { min-width: 4ch; color: var(--sc-ink-soft); font-size: .8rem; text-align: center; }
.lightbox:has(.lightbox-nav:not([hidden])) img { max-height: calc(80dvh - 3rem); }
/* Availability button in the photo viewer, top left, across from the close button. */
.lightbox-cta { position: absolute; z-index: 1; top: .65rem; left: .65rem; box-shadow: 0 4px 14px rgb(0 0 0 / .25); }
.lightbox .lightbox-cta img { width: 18px; height: 18px; }
/* On a phone the photo is small, so the button gets its own row above it, beside the close button. */
@media (max-width: 700px) { .lightbox-cta { position: static; margin-bottom: .55rem; box-shadow: none; } }
/* Photo viewer: the old photo is hidden at once and the new one fades in when loaded (preview.js). */
.lightbox figure img { transition: opacity .25s ease; }
.lightbox figure img.is-loading { opacity: 0; transition: none; }
@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] { animation: b-lightbox-in .24s var(--sc-ease-out); }
  .lightbox[open]::backdrop { animation: b-fade-in .24s ease-out; }
}
@keyframes b-lightbox-in { from { opacity: 0; transform: scale(.97); } }
@keyframes b-fade-in { from { opacity: 0; } }

/* Page photos fade in once loaded, and grow gently under a mouse to invite a click. */
.photo-link img { transition: opacity .5s ease, transform .6s var(--sc-ease-out); }
.photo-link img.is-loading { opacity: 0; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .photo-link:hover img { transform: scale(1.04); }
}
@media (hover: hover) { .lightbox-nav button:hover { background: var(--rule); } }

@media (max-width: 700px) {
  .b-room-thumb { flex-basis: clamp(6.5rem, 34%, 9rem); }
  .room-panel-4 .b-room-detail { flex-direction: row; }
  .room-panel-4 .b-room-thumb { width: auto; flex-basis: clamp(4.5rem, 22%, 6rem); }
  .b-arrival-steps { grid-template-columns: 1fr; gap: .9rem; }
  .b-arrival-photo { display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); align-items: center; gap: .85rem; }
  .b-arrival-photo figcaption { margin-top: 0; }
}