/* ==========================================================================
   Property Management — main stylesheet
   Layers, lowest → highest priority:
     reset · base · layout · components · pages · utilities · motion
   All values come from tokens.css. Mobile-first; breakpoints at 48em / 64em / 80em.
   ========================================================================== */

@layer reset, base, layout, components, pages, utilities, motion;

/* ---------------------------------------------------------------- reset -- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  img, picture, svg, video, iframe { display: block; max-width: 100%; }
  img { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  a { color: inherit; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  p, h1, h2, h3, h4, li, dd, figcaption { overflow-wrap: break-word; }
  [hidden] { display: none !important; }
}

/* ----------------------------------------------------------------- base -- */
@layer base {
  html {
    color-scheme: light;
    scroll-padding-top: calc(var(--header-h) + var(--space-s));
    background: var(--color-bg);
  }
  html.lenis, html.lenis body { height: auto; }
  .lenis.lenis-smooth { scroll-behavior: auto !important; }
  .lenis.lenis-stopped { overflow: clip; }

  body {
    min-height: 100vh;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--step-0);
    font-weight: var(--weight-body);
    line-height: var(--leading-body);
    font-feature-settings: "kern", "liga";
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-display);
    text-wrap: balance;
  }
  h1 { font-size: var(--step-5); line-height: var(--leading-tight); }
  h2 { font-size: var(--step-4); line-height: 1.08; }
  h3 { font-size: var(--step-2); }
  h4 { font-size: var(--step-1); }
  em { font-style: italic; }
  p { text-wrap: pretty; }
  strong { font-weight: var(--weight-strong); }

  a { text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
  a:hover { text-decoration-color: currentColor; }

  :focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
    border-radius: 4px;
  }
  ::selection { background: color-mix(in srgb, var(--taupe) 35%, transparent); }

  /* Greek text sits slightly larger in this display face; tighten a hair */
  :lang(el) h1, :lang(el) h2 { letter-spacing: -0.015em; }
}

/* --------------------------------------------------------------- layout -- */
@layer layout {
  .container {
    width: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
  }
  .container--narrow { width: min(100% - 2 * var(--gutter), var(--container-narrow)); }

  .section { padding-block: var(--space-section); }
  .section--tight { padding-block: var(--space-2xl); }
  .section--band { background: var(--color-band); }
  .section--flush-top { padding-top: 0; }

  .stack > * + * { margin-top: var(--flow, var(--space-s)); }

  .split {
    display: grid;
    gap: var(--space-xl) var(--space-2xl);
    align-items: start;
  }
  @media (min-width: 64em) {
    .split { grid-template-columns: repeat(12, 1fr); }
    .split__a { grid-column: 1 / span 6; }
    .split__b { grid-column: 8 / span 5; }
    .split--reverse .split__a { grid-column: 7 / span 6; grid-row: 1; }
    .split--reverse .split__b { grid-column: 1 / span 5; grid-row: 1; }
    .split--wide .split__a { grid-column: 1 / span 7; }
    .split--wide .split__b { grid-column: 9 / span 4; }
  }
}

/* ----------------------------------------------------------- components -- */
@layer components {

  /* Skip link ------------------------------------------------------------ */
  .skip-link {
    position: fixed; top: var(--space-2xs); left: var(--space-2xs);
    z-index: calc(var(--z-veil) + 1);
    padding: 0.75rem 1.1rem; border-radius: var(--radius-pill);
    background: var(--ink); color: var(--salt); font-weight: var(--weight-strong);
    transform: translateY(-160%);
    transition: transform var(--dur-quick) var(--ease-out);
  }
  .skip-link:focus { transform: none; }

  .sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
  .icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
  .icon--fill { fill: currentColor; stroke: none; }

  .visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }

  /* Type helpers ----------------------------------------------------------- */
  .eyebrow {
    display: inline-flex; align-items: center;
    font-family: var(--font-body); font-size: var(--step--2); font-weight: 500;
    letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-muted);
  }
  .eyebrow--light { color: rgb(255 255 255 / 0.88); }
  .display-xl { font-size: var(--step-6); line-height: 1; letter-spacing: -0.025em; }
  .display-l { font-size: var(--step-5); line-height: var(--leading-tight); }
  .display-m { font-size: var(--step-4); line-height: 1.08; }
  .display-s { font-size: var(--step-3); line-height: 1.12; }
  .display-xl em, .display-l em, .display-m em, .display-s em, h1 em, h2 em { font-style: italic; font-weight: 300; }
  .lead { font-size: var(--step-1); line-height: 1.6; color: var(--color-text); max-width: 46ch; }
  .muted { color: var(--color-muted); }
  .prose { max-width: var(--container-prose); }
  .prose p + p { margin-top: 1.1em; }
  .prose a { color: var(--color-accent); }
  .split-lines .line { overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }

  /* Buttons ----------------------------------------------------------------- */
  .btn {
    --btn-bg: transparent; --btn-fg: var(--color-text); --btn-bd: var(--color-line-strong);
    position: relative; isolation: isolate; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
    min-height: 3rem; padding: 0.8rem 1.6rem;
    border: 1px solid var(--btn-bd); border-radius: var(--radius-pill);
    background: var(--btn-bg); color: var(--btn-fg);
    font-size: var(--step--1); font-weight: 500; letter-spacing: 0.04em; line-height: 1.2;
    text-decoration: none; white-space: nowrap;
    transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
  }
  .btn::after { /* soft fill that rises from the bottom on hover */
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
    background: var(--btn-hover, var(--mocha)); transform: translateY(101%);
    transition: transform var(--dur-base) var(--ease-out);
  }
  .btn:hover::after, .btn:focus-visible::after { transform: none; }
  .btn:hover, .btn:focus-visible { color: var(--btn-hover-fg, var(--white)); border-color: var(--btn-hover, var(--mocha)); }
  .btn .icon { width: 1.1em; height: 1.1em; transition: transform var(--dur-base) var(--ease-out); }
  .btn:hover .icon--arrow { transform: translateX(3px); }

  .btn--primary { --btn-bg: var(--mocha); --btn-fg: var(--white); --btn-bd: var(--mocha); --btn-hover: var(--mocha-deep); }
  .btn--light { --btn-bg: var(--shell); --btn-fg: var(--ink); --btn-bd: var(--shell); --btn-hover: var(--ink); }
  .btn--ghost-light { --btn-fg: var(--white); --btn-bd: rgb(255 255 255 / 0.6); --btn-hover: var(--white); --btn-hover-fg: var(--ink); }
  .btn--sea { --btn-bg: var(--sea); --btn-fg: var(--white); --btn-bd: var(--sea); --btn-hover: #2f555c; }
  .btn--small { min-height: 2.75rem; padding: 0.55rem 1.15rem; }
  .btn--block { width: 100%; }

  .text-link {
    display: inline-flex; align-items: center; gap: 0.5em;
    font-size: var(--step--1); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--color-accent); text-decoration: none;
    background: linear-gradient(currentColor 0 0) left bottom / 0 1px no-repeat;
    padding-bottom: 0.2em;
    transition: background-size var(--dur-base) var(--ease-out);
  }
  .text-link:hover, .text-link:focus-visible { background-size: 100% 1px; }
  .text-link .icon { width: 1em; height: 1em; transition: transform var(--dur-base) var(--ease-out); }
  .text-link:hover .icon { transform: translateX(4px); }

  .icon-btn {
    display: inline-grid; place-items: center;
    width: 2.75rem; height: 2.75rem; border-radius: 50%;
    color: var(--color-text);
    transition: background-color var(--dur-quick) var(--ease-out), color var(--dur-base) var(--ease-out);
  }
  .icon-btn:hover { background: color-mix(in srgb, var(--mocha) 10%, transparent); }
  .icon-btn .icon { width: 1.3rem; height: 1.3rem; }

  /* Header ------------------------------------------------------------------ */
  .site-header {
    position: fixed; inset: 0 0 auto; z-index: var(--z-header);
    height: var(--header-h);
    color: var(--color-text);
    transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
  }
  .site-header::before { /* frosted plate, appears once the page scrolls */
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: rgb(248 246 242 / 0.82);
    backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
    border-bottom: 1px solid var(--color-line);
    opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
  }
  .site-header.is-scrolled::before { opacity: 1; }
  .site-header.is-hidden { transform: translateY(-100%); }
  :root:has(#main[data-header="overlay"]) .site-header:not(.is-scrolled) { color: var(--white); }
  :root:has(#main[data-header="overlay"]) .site-header:not(.is-scrolled) .btn--primary { --btn-bg: rgb(255 255 255 / 0.14); --btn-bd: rgb(255 255 255 / 0.55); --btn-hover: var(--white); --btn-hover-fg: var(--ink); }
  :root:has(#main[data-header="overlay"]) .site-header:not(.is-scrolled) .icon-btn { color: inherit; }
  :root:has(#main[data-header="overlay"]) .site-header:not(.is-scrolled) .icon-btn:hover { background: rgb(255 255 255 / 0.14); }

  .site-header__inner { height: 100%; display: flex; align-items: center; gap: var(--space-m); }

  .brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; margin-right: auto; min-width: 0; }
  .brand__mark { width: 2.1rem; height: 2.5rem; flex: none; }
  .brand__text { display: grid; line-height: 1.1; }
  .brand__name { font-family: var(--font-display); font-size: clamp(1rem, 0.92rem + 0.4vw, 1.3rem); letter-spacing: 0.01em; white-space: nowrap; }
  @media (max-width: 29.99em) {
    .site-header .brand__place { display: none; }
    .site-header .brand__mark { width: 1.8rem; height: 2.2rem; }
    /* Stacks as "Property / Management" when the header tools leave too little room. */
    .site-header .brand__name { white-space: normal; line-height: 1.05; }
    .site-header__inner { gap: 0.5rem; }
    .sound-toggle { padding-inline: 0; }
    .sound-toggle .bars { display: none; }
  }
  .brand__place { font-size: 0.64rem; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.78; margin-top: 0.2rem; }

  .primary-nav { display: none; }
  .primary-nav__list { display: flex; gap: clamp(1.25rem, 2.2vw, 2.6rem); list-style: none; padding: 0; }
  .primary-nav__link {
    position: relative; display: inline-block; padding-block: 0.5rem;
    font-size: var(--step--1); letter-spacing: 0.04em; text-decoration: none;
  }
  .primary-nav__link::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0.2rem; height: 1px; background: currentColor;
    transform: scaleX(0); transform-origin: right; transition: transform var(--dur-base) var(--ease-out);
  }
  .primary-nav__link:hover::after, .primary-nav__link[aria-current]::after { transform: scaleX(1); transform-origin: left; }

  .header-tools { display: flex; align-items: center; gap: 0.25rem; }
  .lang-switch a {
    display: inline-grid; place-items: center; min-width: 2.75rem; height: 2.75rem; border-radius: var(--radius-pill);
    font-size: var(--step--1); font-weight: 500; letter-spacing: 0.08em; text-decoration: none;
  }
  .lang-switch a:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
  .header-call { display: none; margin-left: 0.5rem; }

  @media (min-width: 64em) {
    .primary-nav { display: block; }
    .menu-toggle { display: none; }
    .header-call { display: inline-flex; }
  }
  /* Short label until the header has room for the long one (Greek is widest). */
  .header-call__long { display: none; }
  @media (min-width: 80em) {
    .header-call__long { display: inline; }
    .header-call__short { display: none; }
  }

  /* Sound toggle: four little bars that breathe while audio plays */
  .sound-toggle { width: auto; min-width: 2.75rem; padding-inline: 0.7rem; border-radius: var(--radius-pill); gap: 0.35rem; display: inline-flex; align-items: center; justify-content: center; }
  .sound-toggle .icon { width: 1.25rem; height: 1.25rem; }
  .sound-toggle__off, .sound-toggle.is-muted .sound-toggle__on, .sound-toggle.is-muted .bars { display: none; }
  .sound-toggle.is-muted .sound-toggle__off { display: block; }
  /* Bars only where the header has room; phones show just the speaker icon. */
  @media (min-width: 30em) { .sound-toggle .bars { display: flex; align-items: flex-end; gap: 2px; height: 14px; } }
  .sound-toggle .bars i { display: block; width: 2px; height: 30%; border-radius: 2px; background: currentColor; transition: height var(--dur-base) var(--ease-out); }
  .sound-toggle.is-playing .bars i { animation: bars 1.6s var(--ease-in-out) infinite alternate; }
  .sound-toggle.is-playing .bars i:nth-child(2) { animation-delay: -0.4s; }
  .sound-toggle.is-playing .bars i:nth-child(3) { animation-delay: -0.9s; }
  .sound-toggle.is-playing .bars i:nth-child(4) { animation-delay: -1.3s; }
  .sound-toggle.is-muted .bars i { height: 2px; }
  @keyframes bars { from { height: 25%; } to { height: 100%; } }

  /* Sound panel ------------------------------------------------------------- */
  .sound-panel {
    position: fixed; z-index: var(--z-dialog);
    top: calc(var(--header-h) + 0.5rem); right: max(var(--gutter), env(safe-area-inset-right));
    width: min(22rem, calc(100vw - 2 * var(--gutter)));
    padding: var(--space-m);
    background: var(--color-surface); color: var(--color-text);
    border: 1px solid var(--color-line); border-radius: var(--radius-m);
    box-shadow: var(--shadow-lift);
    transform-origin: top right;
  }
  .sound-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: var(--space-s); }
  .sound-panel__title { font-family: var(--font-display); font-size: var(--step-1); }
  .sound-panel__row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.4rem 1rem; padding-block: var(--space-xs); border-top: 1px solid var(--color-line); }
  .sound-panel__row label { font-size: var(--step--1); font-weight: 500; }
  .sound-panel__row .hint { grid-column: 1 / -1; font-size: var(--step--2); color: var(--color-muted); margin-top: -0.2rem; }
  .sound-panel__row input[type="range"] { grid-column: 1 / -1; }
  .sound-panel__foot { display: flex; justify-content: space-between; gap: 1rem; margin-top: var(--space-s); font-size: var(--step--2); color: var(--color-muted); }

  .switch { position: relative; display: inline-flex; width: 2.9rem; height: 1.7rem; flex: none; }
  .switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
  .switch span { position: absolute; inset: 0; border-radius: var(--radius-pill); background: var(--sand); transition: background-color var(--dur-quick) var(--ease-out); pointer-events: none; }
  .switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: calc(1.7rem - 6px); aspect-ratio: 1; border-radius: 50%; background: var(--white); box-shadow: 0 1px 3px rgb(0 0 0 / 0.2); transition: transform var(--dur-quick) var(--ease-out); }
  .switch input:checked + span { background: var(--mocha); }
  .switch input:checked + span::after { transform: translateX(1.2rem); }
  .switch input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; }
  .switch input:disabled { cursor: not-allowed; }
  .switch input:disabled + span { opacity: 0.4; }
  .sound-panel__row:has(input[data-sound-switch]:disabled) :is(label, .hint) { opacity: 0.55; }

  input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 1.75rem; background: transparent; cursor: pointer; }
  input[type="range"]::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: linear-gradient(var(--mocha) 0 0) 0 / var(--fill, 50%) 100% no-repeat, var(--sand); }
  input[type="range"]::-moz-range-track { height: 2px; border-radius: 2px; background: var(--sand); }
  input[type="range"]::-moz-range-progress { height: 2px; background: var(--mocha); }
  input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 1.1rem; height: 1.1rem; margin-top: calc(-0.55rem + 1px); border-radius: 50%; background: var(--shell); border: 1px solid var(--mocha); box-shadow: var(--shadow-soft); }
  input[type="range"]::-moz-range-thumb { width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--shell); border: 1px solid var(--mocha); }
  input[type="range"]:disabled { opacity: 0.4; cursor: not-allowed; }

  /* Dialogs (sound consent, lightbox) -------------------------------------- */
  dialog { padding: 0; border: 0; background: transparent; color: inherit; max-width: none; max-height: none; }
  dialog::backdrop { background: rgb(26 22 20 / 0.32); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

  /* Sound notice: one line and two buttons, under the speaker icon — where the
     sound settings open later. Non-modal (dialog.show()), so no backdrop and
     the page stays usable. Display only when [open]: an author `display`
     would otherwise override the browser's hiding of a closed dialog. */
  .consent {
    position: fixed; z-index: var(--z-dialog); inset: auto;
    top: calc(var(--header-h) + 0.5rem); right: max(var(--gutter), env(safe-area-inset-right));
    width: max-content; max-width: calc(100vw - 2 * var(--gutter)); margin: 0;
    padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-m);
    background: var(--color-surface); border-radius: var(--radius-l); box-shadow: var(--shadow-lift);
  }
  .consent[open] {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3xs) var(--space-s);
    animation: consent-in var(--dur-slow) var(--ease-out) both;
  }
  .consent__title { font-family: var(--font-display); font-weight: 300; font-size: var(--step-1); line-height: 1.2; }
  .consent__actions { display: flex; gap: 0.35rem; }
  .consent__off { --btn-bd: transparent; color: var(--color-muted); }
  @keyframes consent-in { from { opacity: 0; transform: translateY(-0.5rem); } }

  /* Mobile menu ------------------------------------------------------------- */
  .mobile-menu {
    position: fixed; inset: 0; z-index: var(--z-menu);
    margin: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; border: 0;
    grid-template-rows: auto 1fr auto; color: var(--color-text);
    padding: 0 var(--gutter) max(var(--space-l), env(safe-area-inset-bottom));
    background: var(--salt); overflow-y: auto;
  }
  .mobile-menu[open] { display: grid; }
  .mobile-menu::backdrop { background: transparent; backdrop-filter: none; }
  .mobile-menu__top { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; }
  .mobile-menu__nav { align-self: center; }
  .mobile-menu__list { list-style: none; padding: 0; }
  .mobile-menu__list a { display: block; padding-block: 0.35rem; font-family: var(--font-display); font-size: var(--step-4); line-height: 1.15; text-decoration: none; }
  .mobile-menu__list a[aria-current] { font-style: italic; }
  .mobile-menu__stays { list-style: none; padding: 0 0 var(--space-s) 0.2rem; display: grid; gap: 0.3rem; }
  .mobile-menu__stays a { font-family: var(--font-body); font-size: var(--step-0); color: var(--color-muted); }
  .mobile-menu__foot { display: grid; gap: var(--space-s); padding-top: var(--space-m); border-top: 1px solid var(--color-line); }

  /* Media: rounded image with blurred placeholder -------------------------- */
  .media {
    position: relative; overflow: hidden; border-radius: var(--radius-m);
    background: var(--sand) center / cover no-repeat;
    isolation: isolate;
  }
  .media img { width: 100%; height: 100%; object-fit: cover; }
  .media__img { opacity: 0; transition: opacity 1s var(--ease-soft); }
  .media__img.is-loaded, .no-js .media__img { opacity: 1; }
  .media--parallax img { transform-origin: center; will-change: transform; }
  .media--4x5 { aspect-ratio: 4 / 5; }
  .media--3x4 { aspect-ratio: 3 / 4; }
  .media--3x2 { aspect-ratio: 3 / 2; }
  .media--16x10 { aspect-ratio: 16 / 10; }
  .media--1x1 { aspect-ratio: 1; }
  .media--tall { aspect-ratio: 2 / 3; }
  figcaption.caption { margin-top: 0.75rem; font-size: var(--step--2); letter-spacing: 0.04em; color: var(--color-muted); }

  /* Hero ------------------------------------------------------------------- */
  .hero { padding: calc(var(--header-h) * 0) 0 0; }
  .hero__frame {
    position: relative; overflow: hidden; isolation: isolate;
    min-height: max(34rem, 100svh);
    display: grid; align-items: end;
    color: var(--white); background: var(--ink);
  }
  @media (min-width: 48em) {
    .hero--inset { padding: var(--space-2xs) var(--space-2xs) 0; }
    .hero--inset .hero__frame { border-radius: var(--radius-l); min-height: calc(100svh - var(--space-2xs)); }
  }
  .hero__slides, .hero__slide, .hero__slide img { position: absolute; inset: 0; width: 100%; height: 100%; }
  .hero__slide img { object-fit: cover; }
  .hero__slide { opacity: 0; transition: opacity 2.2s var(--ease-soft); }
  .hero__slide.is-active { opacity: 1; }
  .hero__scrim {
    position: absolute; inset: 0; z-index: 1;
    background:
      linear-gradient(180deg, rgb(20 16 14 / 0.4) 0%, rgb(20 16 14 / 0) 26%),
      linear-gradient(90deg, rgb(20 16 14 / 0.46) 0%, rgb(20 16 14 / 0.18) 48%, rgb(20 16 14 / 0) 72%),
      linear-gradient(0deg, rgb(20 16 14 / 0.66) 0%, rgb(20 16 14 / 0.22) 45%, rgb(20 16 14 / 0) 72%);
  }
  .hero__content { position: relative; z-index: 2; padding-block: calc(var(--header-h) + var(--space-xl)) calc(var(--space-2xl) + 1.5rem); }
  .hero__title { max-width: 13.5em; margin-top: var(--space-s); }
  .hero__lead { max-width: 44ch; margin-top: var(--space-m); font-size: var(--step-0); line-height: 1.6; color: rgb(255 255 255 / 0.9); }
  @media (min-width: 48em) { .hero__lead { font-size: var(--step-1); line-height: 1.55; } }
  .hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: var(--space-l); }
  .hero__card {
    position: relative; z-index: 2; display: none;
  }
  @media (min-width: 64em) {
    .hero--home .hero__frame { grid-template-columns: 1fr auto; }
    .hero__card {
      display: block; align-self: end; margin: 0 var(--gutter) var(--space-2xl) 0; width: 20rem;
      padding: var(--space-m); border-radius: var(--radius-m);
      background: rgb(252 251 249 / 0.14); border: 1px solid rgb(255 255 255 / 0.28);
      backdrop-filter: blur(18px) saturate(1.1); -webkit-backdrop-filter: blur(18px) saturate(1.1);
    }
  }
  .hero__card h2 { font-size: var(--step-2); }
  .hero__card p { font-size: var(--step--1); color: rgb(255 255 255 / 0.86); margin-top: 0.4rem; }
  .hero__card .contact-actions { margin-top: var(--space-s); }
  .hero__dots { position: absolute; z-index: 2; left: max(var(--gutter), calc((100% - var(--container)) / 2)); bottom: var(--space-s); display: none; align-items: center; gap: 0.35rem; }
  .hero__dots [data-slides-pause] { width: 2.75rem; min-height: 2.75rem; padding: 0; margin-left: 0.5rem; }
  .hero__dots [data-slides-pause] [data-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* Shows what a press will do: pause while playing, play while paused. */
  .hero__dots [data-slides-pause] .icon--play,
  .hero__dots [data-slides-pause][data-paused] .icon--pause { display: none; }
  .hero__dots [data-slides-pause][data-paused] .icon--play { display: block; }
  .hero__dots button { width: 2.25rem; height: 1.5rem; display: grid; place-items: center; }
  /* Track + fill share one grid cell; ui.js tweens --progress 0 → 1 over the slide. */
  .hero__dots [data-slide-to]::before,
  .hero__dots [data-slide-to]::after { content: ""; grid-area: 1 / 1; width: 100%; height: 2px; }
  .hero__dots [data-slide-to]::before { background: rgb(255 255 255 / 0.35); transition: background-color var(--dur-base); }
  .hero__dots [data-slide-to][aria-current="true"]::before { background: rgb(255 255 255 / 0.55); }
  .hero__dots [data-slide-to]::after { background: var(--white); transform: scaleX(var(--progress, 0)); transform-origin: left; }
  .hero__dots [data-slide-to]:hover::before { background: rgb(255 255 255 / 0.7); }
  @media (min-width: 48em) { .hero__dots { display: flex; } }
  .hero__scroll { position: absolute; z-index: 2; right: var(--gutter); bottom: var(--space-m); display: none; align-items: center; gap: 0.6rem; font-size: var(--step--2); letter-spacing: var(--tracking-caps); text-transform: uppercase; text-decoration: none; color: rgb(255 255 255 / 0.85); }
  .hero__scroll::after { content: ""; width: 1px; height: 2.5rem; background: currentColor; transform-origin: top; animation: scrollcue 2.4s var(--ease-in-out) infinite; }
  @keyframes scrollcue { 0% { transform: scaleY(0); } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
  @media (min-width: 64em) { .hero--page .hero__scroll { display: inline-flex; } }

  /* Page hero (stays, OKKIO, guides) */
  .hero--page .hero__frame { min-height: max(30rem, 88svh); }
  .hero--page .hero__title { max-width: 14em; }
  .hero__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: var(--space-m); font-size: var(--step--1); color: rgb(255 255 255 / 0.9); }
  .hero__meta span { display: inline-flex; align-items: center; gap: 0.45rem; }

  /* Breadcrumbs */
  .breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; padding: 0; font-size: var(--step--2); letter-spacing: 0.06em; }
  .breadcrumbs li + li::before { content: "/"; margin-right: 0.35rem; opacity: 0.6; }
  .breadcrumbs a { text-decoration: none; opacity: 0.85; }
  .breadcrumbs a:hover { opacity: 1; text-decoration: underline; }

  /* Intro / statement ------------------------------------------------------ */
  .statement { font-family: var(--font-display); font-weight: 300; font-size: var(--step-4); line-height: 1.12; letter-spacing: -0.02em; max-width: 20ch; }
  .statement em { color: var(--mocha); }
  .statement--s { font-size: var(--step-3); line-height: 1.18; max-width: 26ch; }
  .tally { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--space-l); margin-top: var(--space-l); padding-top: var(--space-m); border-top: 1px solid var(--color-line); }
  .tally dt { font-size: var(--step--2); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-muted); }
  .tally dd { font-family: var(--font-display); font-size: var(--step-4); line-height: 1; order: -1; }
  .tally div { display: flex; flex-direction: column; gap: 0.4rem; }

  /* Collage (staggered images, after Hilltop) ------------------------------ */
  .collage { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-s); align-items: start; }
  .collage > :nth-child(2) { margin-top: var(--space-2xl); }
  .collage > :nth-child(3) { grid-column: 1 / -1; width: 62%; margin: calc(var(--space-xl) * -1) 0 0 auto; }

  /* Filters ---------------------------------------------------------------- */
  .filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--space-l); }
  .filter {
    min-height: 2.75rem; padding: 0.5rem 1.1rem; border-radius: var(--radius-pill);
    border: 1px solid var(--color-line-strong); font-size: var(--step--1); letter-spacing: 0.02em;
    transition: background-color var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out), border-color var(--dur-quick);
  }
  .filter:hover { border-color: var(--mocha); }
  .filter[aria-pressed="true"] { background: var(--ink); color: var(--salt); border-color: var(--ink); }
  .filter__count { margin-left: 0.35rem; opacity: 0.6; font-size: 0.85em; }

  /* Stay cards ------------------------------------------------------------- */
  .stay-grid { display: grid; gap: var(--space-2xl) var(--space-l); margin-top: var(--space-2xl); list-style: none; padding: 0; }
  @media (min-width: 48em) {
    .stay-grid { grid-template-columns: repeat(2, 1fr); }
    .stay-grid > li:nth-child(even) { margin-top: var(--space-3xl); }
  }
  @media (min-width: 80em) { .stay-grid { gap: var(--space-2xl) var(--space-2xl); } }
  .stay-grid > li[hidden] { display: none; }

  .stay-card { position: relative; display: grid; gap: var(--space-s); }
  .stay-card .media { aspect-ratio: 4 / 5; }
  .stay-card .media img { transition: transform 1.6s var(--ease-out); }
  .stay-card:hover .media img, .stay-card:focus-within .media img { transform: scale(1.045); }
  .stay-card__badge {
    position: absolute; z-index: 1; top: var(--space-s); left: var(--space-s);
    padding: 0.35rem 0.8rem; border-radius: var(--radius-pill);
    background: var(--color-glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase;
  }
  .stay-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
  .stay-card__title { font-size: var(--step-3); }
  .stay-card__title a { text-decoration: none; }
  .stay-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 2; } /* whole card clickable */
  .stay-card__place { font-size: var(--step--2); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-muted); white-space: nowrap; }
  .stay-card__text { color: var(--color-muted); max-width: 44ch; }
  .stay-card__facts { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; list-style: none; padding: 0; font-size: var(--step--1); }
  .stay-card__facts li { display: inline-flex; align-items: center; gap: 0.45rem; }
  .stay-card__facts .icon { color: var(--taupe); }
  .stay-card__more { margin-top: 0.25rem; }

  /* Feature band (full-bleed image with text, after Pathos) ---------------- */
  .feature { position: relative; isolation: isolate; overflow: hidden; color: var(--white); background: var(--ink); }
  .feature__media, .feature__media .media, .feature__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
  .feature__media .media { border-radius: 0; }
  .feature__media img { object-fit: cover; }
  .feature__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(20 16 14 / 0.62), rgb(20 16 14 / 0.12) 70%); }
  .feature__content { position: relative; padding-block: var(--space-3xl); min-height: max(36rem, 92svh); display: grid; align-content: end; }
  .feature__content > .stack { max-width: 40rem; }
  .feature__content > .villa-pair { max-width: 56rem; }
  .feature p { color: rgb(255 255 255 / 0.88); }

  .villa-pair { display: grid; gap: var(--space-m); margin-top: var(--space-xl); }
  @media (min-width: 48em) { .villa-pair { grid-template-columns: 1fr 1fr; } }
  .villa-tile {
    position: relative; display: grid; gap: 0.4rem; padding: var(--space-m);
    border-radius: var(--radius-m); text-decoration: none;
    background: rgb(252 251 249 / 0.12); border: 1px solid rgb(255 255 255 / 0.26);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    transition: background-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  }
  .villa-tile:hover { background: rgb(252 251 249 / 0.22); transform: translateY(-3px); }
  .villa-tile h3 { font-size: var(--step-3); }
  .villa-tile p { font-size: var(--step--1); }
  .villa-tile .text-link { color: var(--white); margin-top: 0.35rem; }

  /* OKKIO band -------------------------------------------------------------- */
  .okkio { --okkio-bg: color-mix(in srgb, var(--sea-mist) 55%, var(--salt)); background: var(--okkio-bg); overflow: hidden; }
  .okkio .eyebrow, .okkio .statement em { color: var(--sea); }
  .okkio__logo { width: 4.5rem; height: 4.5rem; color: var(--sea); }
  .okkio__grid { display: grid; gap: var(--space-xl); align-items: center; }
  @media (min-width: 64em) { .okkio__grid { grid-template-columns: 5fr 6fr; gap: var(--space-2xl); } }
  .okkio__photos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-s); }
  .okkio__photos > :first-child { grid-row: span 2; }
  .okkio__photos > :nth-child(2) { margin-top: var(--space-xl); }
  .okkio__hours { display: grid; gap: 0.2rem; margin-top: var(--space-m); padding: var(--space-s) 0; border-block: 1px solid color-mix(in srgb, var(--sea) 25%, transparent); font-size: var(--step--1); }
  .social-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .social-links a {
    display: inline-flex; align-items: center; gap: 0.55rem; min-height: 2.75rem; padding: 0.4rem 1rem 0.4rem 0.8rem;
    border-radius: var(--radius-pill); border: 1px solid color-mix(in srgb, var(--sea) 35%, transparent);
    font-size: var(--step--1); text-decoration: none; color: var(--sea);
    transition: background-color var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out);
  }
  .social-links a:hover { background: var(--sea); color: var(--white); }
  .social-links .icon { width: 1.1rem; height: 1.1rem; }

  /* Map ----------------------------------------------------------------------- */
  .map { position: relative; margin-top: var(--space-xl); }
  .map__canvas { position: relative; border-radius: var(--radius-l); overflow: hidden; background: var(--sea-mist); }
  .map__svg { width: 100%; height: auto; }
  .map__land { fill: var(--salt); }
  .map__coast { fill: none; stroke: var(--taupe); stroke-width: 0.9; vector-effect: non-scaling-stroke; }
  .map__label { font-family: var(--font-display); font-style: italic; font-size: 15px; fill: var(--ink-soft); letter-spacing: 0.02em; }
  .map__label--sea { fill: var(--sea); opacity: 0.8; font-size: 13px; letter-spacing: 0.3em; font-style: normal; font-family: var(--font-body); text-transform: uppercase; }
  .map__airport { fill: var(--ink-soft); font-family: var(--font-body); font-size: 11px; letter-spacing: 0.08em; }
  .map__pins { position: absolute; inset: 0; list-style: none; padding: 0; }
  .map__pin { position: absolute; translate: calc(-50% + var(--dx, 0) * 1.9rem) -100%; }
  .map__pin:hover, .map__pin.is-active, .map__pin:focus-within { z-index: 2; }
  .map__tip .muted-light { opacity: 0.7; font-size: 0.92em; }
  .map__pin a, .map__pin button {
    display: grid; place-items: center; width: 2.75rem; height: 2.75rem; text-decoration: none; color: var(--mocha);
  }
  .map__pin svg { width: 1.6rem; height: 2rem; filter: drop-shadow(0 3px 5px rgb(42 38 35 / 0.25)); transition: transform var(--dur-base) var(--ease-out); transform-origin: 50% 100%; }
  .map__pin--bar a { color: var(--sea); }
  .map__pin a:hover svg, .map__pin a:focus-visible svg, .map__pin.is-active svg { transform: scale(1.2) translateY(-2px); }
  .map__tip {
    position: absolute; left: 50%; bottom: calc(100% + 0.25rem); translate: -50% 0;
    width: max-content; max-width: 14rem; padding: 0.45rem 0.8rem; border-radius: var(--radius-s);
    background: var(--ink); color: var(--salt); font-size: var(--step--2); line-height: 1.35; text-align: center;
    opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity var(--dur-quick), transform var(--dur-quick) var(--ease-out);
  }
  .map__pin a:hover .map__tip, .map__pin a:focus-visible .map__tip, .map__pin.is-active .map__tip { opacity: 1; transform: none; }
  .map__legend { display: grid; gap: 0; margin-top: var(--space-l); list-style: none; padding: 0; border-top: 1px solid var(--color-line); }
  @media (min-width: 48em) { .map__legend { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-xl); } }
  @media (min-width: 80em) { .map__legend { grid-template-columns: repeat(3, 1fr); } }
  .map__legend li { border-bottom: 1px solid var(--color-line); }
  .map__legend a { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "dot name" ". area"; align-items: center; column-gap: 0.9rem; row-gap: 0.15rem; padding: 0.9rem 0; text-decoration: none; }
  .map__legend-dot { grid-area: dot; }
  .map__legend-name { grid-area: name; }
  .map__legend-area { grid-area: area; }
  .map__legend a:hover .map__legend-name { text-decoration: underline; text-underline-offset: 0.2em; }
  .map__legend-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--mocha); }
  .map__legend-dot--bar { background: var(--sea); }
  .map__legend-dot--villa { background: transparent; border: 1px solid var(--mocha); }
  .map__legend-name { font-family: var(--font-display); font-size: var(--step-1); }
  .map__legend-area { font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); }
  .map__note { margin-top: var(--space-s); font-size: var(--step--2); color: var(--color-muted); }

  /* Pillars (thin divided columns with line icons, after Pathos) ------------- */
  .pillars { display: grid; gap: 0; margin-top: var(--space-2xl); list-style: none; padding: 0; }
  @media (min-width: 48em) { .pillars { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 80em) { .pillars { grid-template-columns: repeat(4, 1fr); } }
  .pillar { display: grid; align-content: start; gap: var(--space-s); padding: var(--space-l) var(--space-m) var(--space-l) var(--space-m); border-left: 1px solid var(--color-line-strong); }
  .pillar .icon { width: 2.6rem; height: 2.6rem; stroke-width: 1; color: var(--taupe); }
  .pillar h3 { font-size: var(--step-2); }
  .pillar p { font-size: var(--step--1); color: var(--color-muted); }

  /* Contact band ------------------------------------------------------------ */
  .contact-band { background: var(--color-band-deep); }
  .contact-band__grid { display: grid; gap: var(--space-xl); align-items: end; }
  @media (min-width: 64em) { .contact-band__grid { grid-template-columns: 7fr 5fr; } }
  .phone-display { display: inline-block; font-family: var(--font-display); font-weight: 300; font-size: var(--step-5); line-height: 1; letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; }
  .phone-display:hover { color: var(--mocha); }
  .contact-person { display: flex; align-items: center; gap: var(--space-s); }
  .contact-person__initials { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--mocha); color: var(--white); font-family: var(--font-display); font-size: var(--step-1); }
  .contact-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
  .contact-actions .btn .icon { width: 1.15rem; height: 1.15rem; }
  .btn--whatsapp:hover { --btn-hover: #1f7a4d; }
  .btn--viber:hover { --btn-hover: #5b4a9e; }

  /* Facts (definition list) ------------------------------------------------- */
  .facts { display: grid; list-style: none; padding: 0; border-top: 1px solid var(--color-line); }
  .facts div { display: grid; grid-template-columns: minmax(8rem, 40%) 1fr; gap: 1rem; padding: 0.95rem 0; border-bottom: 1px solid var(--color-line); }
  .facts dt { font-size: var(--step--2); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-muted); padding-top: 0.2rem; }
  .facts dd { font-size: var(--step-0); }

  /* Amenities -------------------------------------------------------------- */
  .amenities { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 0.2rem var(--space-l); list-style: none; padding: 0; margin-top: var(--space-l); }
  .amenities li { display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 0; border-bottom: 1px solid var(--color-line); font-size: var(--step--1); }
  .amenities .icon { color: var(--taupe); width: 1.4rem; height: 1.4rem; }

  /* Gallery ------------------------------------------------------------------ */
  /* Two columns on small screens (every third photo full width); on desktop a
     repeating 5-photo rhythm on a 12-column grid: 7 + 5, then 4 + 4 + 4. */
  .gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-s); margin-top: var(--space-xl); list-style: none; padding: 0; }
  .gallery li:nth-child(3n + 1) { grid-column: 1 / -1; }
  .gallery li .media { aspect-ratio: 4 / 3; }
  .gallery li:nth-child(3n + 1) .media { aspect-ratio: 16 / 10; }
  @media (min-width: 64em) {
    .gallery { grid-template-columns: repeat(12, 1fr); gap: var(--space-m); }
    .gallery li, .gallery li:nth-child(3n + 1) { grid-column: span 4; }
    .gallery li:nth-child(5n + 1) { grid-column: span 7; }
    .gallery li:nth-child(5n + 2) { grid-column: span 5; }
    .gallery li:nth-child(3n + 1) .media { aspect-ratio: 4 / 3; }
    .gallery li:nth-child(5n + 1) .media { aspect-ratio: 16 / 10; }
    .gallery li:nth-child(5n + 2) .media { aspect-ratio: 1.13; }
  }
  .gallery__btn { position: relative; display: block; width: 100%; border-radius: var(--radius-m); overflow: hidden; cursor: zoom-in; }
  .gallery__btn .media { border-radius: inherit; }
  .gallery__btn img { transition: transform 1.4s var(--ease-out); }
  .gallery__btn:hover img { transform: scale(1.04); }
  .gallery__btn::after {
    content: ""; position: absolute; right: 0.9rem; bottom: 0.9rem; width: 2.5rem; height: 2.5rem; border-radius: 50%;
    background: var(--color-glass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a2623' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 1.1rem no-repeat;
    opacity: 0; transform: scale(0.8); transition: opacity var(--dur-quick), transform var(--dur-base) var(--ease-out);
  }
  .gallery__btn:hover::after, .gallery__btn:focus-visible::after { opacity: 1; transform: none; }

  /* Lightbox --------------------------------------------------------------- */
  .lightbox { margin: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; }
  .lightbox::backdrop { background: rgb(18 15 13 / 0.94); backdrop-filter: none; }
  .lightbox__inner { position: relative; width: 100%; height: 100%; display: grid; grid-template-rows: auto 1fr auto; color: var(--salt); }
  .lightbox__bar { display: flex; justify-content: space-between; align-items: center; padding: var(--space-s) var(--gutter); font-size: var(--step--1); letter-spacing: 0.08em; }
  .lightbox__stage { position: relative; display: grid; place-items: center; padding: 0 var(--gutter); min-height: 0; touch-action: pan-y; }
  .lightbox__stage img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; border-radius: var(--radius-s); }
  .lightbox__caption { padding: var(--space-s) var(--gutter) var(--space-m); text-align: center; font-size: var(--step--1); color: rgb(248 246 242 / 0.8); min-height: 3.5rem; }
  .lightbox .icon-btn { color: var(--salt); }
  .lightbox .icon-btn:hover { background: rgb(255 255 255 / 0.1); }
  .lightbox__nav { position: absolute; top: 50%; translate: 0 -50%; z-index: 2; width: 3.25rem; height: 3.25rem; background: rgb(255 255 255 / 0.08); }
  .lightbox__nav--prev { left: var(--space-s); }
  .lightbox__nav--next { right: var(--space-s); }

  /* Location / map facade --------------------------------------------------- */
  .location-map { position: relative; border-radius: var(--radius-l); overflow: hidden; background: var(--sea-mist); aspect-ratio: 1000 / 624; }
  .location-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  .location-map__facade { position: absolute; inset: 0; display: grid; place-items: center; }
  .location-map__facade svg.map__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
  .location-map__pin { position: absolute; translate: -50% -100%; color: var(--mocha); }
  .location-map__pin svg { width: 2.2rem; height: 2.8rem; filter: drop-shadow(0 4px 8px rgb(42 38 35 / 0.3)); }
  .location-map__pin::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 26px; height: 26px; translate: -50% 50%; border-radius: 50%; border: 1px solid currentColor; animation: ping 2.6s var(--ease-out) infinite; }
  @keyframes ping { from { transform: scale(0.4); opacity: 0.9; } to { transform: scale(2.4); opacity: 0; } }
  .location-map__cta { position: absolute; left: 50%; bottom: var(--space-m); translate: -50% 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; width: max-content; max-width: calc(100% - 2rem); }
  .location-map__note { margin-top: var(--space-xs); font-size: var(--step--2); color: var(--color-muted); }
  .distances { list-style: none; padding: 0; margin-top: var(--space-m); }
  .distances li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--color-line); font-size: var(--step--1); }
  .distances li span:last-child { color: var(--color-muted); white-space: nowrap; }

  /* FAQ ---------------------------------------------------------------------- */
  .faq { margin-top: var(--space-xl); border-top: 1px solid var(--color-line-strong); }
  .faq details { border-bottom: 1px solid var(--color-line-strong); }
  .faq summary {
    display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
    padding: var(--space-s) 0; cursor: pointer; list-style: none;
    font-family: var(--font-display); font-size: var(--step-1); line-height: 1.35;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: ""; flex: none; width: 1rem; height: 1rem; background: linear-gradient(currentColor 0 0) center / 100% 1px no-repeat, linear-gradient(currentColor 0 0) center / 1px 100% no-repeat; transition: transform var(--dur-base) var(--ease-out); }
  .faq details[open] summary::after { transform: rotate(45deg); }
  .faq__answer { padding: 0 0 var(--space-m); max-width: 68ch; color: var(--color-muted); }

  /* More stays rail ------------------------------------------------------------ */
  .rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 22rem); gap: var(--space-m); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: var(--space-s); margin-top: var(--space-xl); list-style: none; padding-left: 0; scrollbar-width: thin; }
  .rail > li { scroll-snap-align: start; }
  @media (min-width: 64em) { .rail { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; } }
  .rail .stay-card .media { aspect-ratio: 3 / 2; }
  .rail .stay-card__title { font-size: var(--step-2); }

  /* Guide (Chalkidiki page) --------------------------------------------------- */
  .area-list { display: grid; gap: var(--space-2xl); margin-top: var(--space-2xl); }
  .area { display: grid; gap: var(--space-l); align-items: center; }
  @media (min-width: 64em) { .area { grid-template-columns: 6fr 5fr; gap: var(--space-2xl); } .area:nth-child(even) .area__media { order: 2; } }
  .area h3 { font-size: var(--step-4); }
  .area__stays { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--space-s); }
  .chip { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.5rem; padding: 0.35rem 0.95rem; border-radius: var(--radius-pill); border: 1px solid var(--color-line-strong); font-size: var(--step--1); text-decoration: none; transition: background-color var(--dur-quick), color var(--dur-quick); }
  .chip:hover { background: var(--mocha); color: var(--white); border-color: var(--mocha); }

  .timeline-note { font-size: var(--step--2); color: var(--color-muted); }


  /* OKKIO page ----------------------------------------------------------------- */
  .okkio-day { margin-top: var(--space-xl); gap: var(--space-xl) var(--space-l); }
  @media (min-width: 64em) { .okkio-day { grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 80em) { .okkio-day { grid-template-columns: repeat(3, 1fr); } }
  .okkio-day > li { border-left: 0; padding: 0; }
  .okkio-day h3 { font-size: var(--step-3); }
  .menu-cols { display: grid; gap: var(--space-xl) var(--space-l); margin-top: var(--space-xl); }
  @media (min-width: 48em) { .menu-cols { grid-template-columns: repeat(3, 1fr); } }
  .menu-cols h3 { font-size: var(--step-2); padding-bottom: var(--space-2xs); margin-bottom: var(--space-s); border-bottom: 1px solid var(--color-line-strong); }
  .menu-cols ul { list-style: none; padding: 0; display: grid; gap: 0.6rem; color: var(--color-muted); }
  .stay-teaser { display: grid; gap: 0.5rem; padding: var(--space-m); border-radius: var(--radius-m); background: var(--color-surface); border: 1px solid var(--color-line); }
  .places li { align-items: center; padding-block: 1rem; }
  .places li > span:first-child { white-space: normal; color: var(--color-text); }

  /* Footer ------------------------------------------------------------------ */
  /* Bottom padding clears the fixed contact dock, so the credit is never hidden under it. */
  .site-footer { background: var(--ink); color: rgb(248 246 242 / 0.86); padding-block: var(--space-3xl) calc(var(--space-l) + 3.25rem); }
  .site-footer a { text-decoration: none; }
  .site-footer a:hover { text-decoration: underline; }
  .site-footer__top { display: grid; gap: var(--space-2xl); }
  @media (min-width: 64em) { .site-footer__top { grid-template-columns: 5fr 7fr; } }
  .site-footer__claim { font-family: var(--font-display); font-weight: 300; font-size: var(--step-4); line-height: 1.1; color: var(--salt); max-width: 14ch; }
  .site-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: var(--space-l); }
  .site-footer h2 { font-family: var(--font-body); font-size: var(--step--2); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: rgb(248 246 242 / 0.6); margin-bottom: var(--space-s); }
  .site-footer ul { list-style: none; padding: 0; display: grid; gap: 0.55rem; font-size: var(--step--1); }
  .site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: var(--space-2xl); padding-top: var(--space-m); border-top: 1px solid rgb(248 246 242 / 0.16); font-size: var(--step--2); color: rgb(248 246 242 / 0.62); }
  .site-footer__credit a { color: var(--salt); text-decoration: underline; text-decoration-color: rgb(248 246 242 / 0.35); text-underline-offset: 0.22em; }
  .site-footer__credit a:hover { text-decoration-color: currentColor; }
  .site-footer .brand { color: var(--salt); margin: 0 0 var(--space-m); }
  .site-footer .btn--light:hover { --btn-hover: var(--taupe); }

  /* Floating contact dock ------------------------------------------------------ */
  .contact-dock { position: fixed; z-index: var(--z-dock); right: max(var(--space-s), env(safe-area-inset-right)); bottom: max(var(--space-s), env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; }
  .contact-dock__toggle {
    display: inline-flex; align-items: center; gap: 0.55rem; min-height: 3.25rem; padding: 0.5rem 1.2rem 0.5rem 0.95rem;
    border-radius: var(--radius-pill); background: var(--ink); color: var(--salt); box-shadow: var(--shadow-lift);
    font-size: var(--step--1); font-weight: 500; letter-spacing: 0.03em;
    transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-quick);
  }
  .contact-dock__toggle:hover { background: var(--mocha-deep); transform: translateY(-2px); }
  @media (max-width: 47.99em) {
    .contact-dock__toggle { width: 3.25rem; padding: 0; justify-content: center; }
    .contact-dock__toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  }
  .contact-dock__toggle .icon { width: 1.2rem; height: 1.2rem; }
  .contact-dock__menu { display: grid; gap: 0.4rem; list-style: none; padding: 0; }
  .contact-dock__menu a {
    display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.6rem; min-height: 2.9rem; padding: 0.4rem 1.1rem;
    border-radius: var(--radius-pill); background: var(--shell); color: var(--ink); box-shadow: var(--shadow-soft);
    font-size: var(--step--1); text-decoration: none; border: 1px solid var(--color-line);
  }
  .contact-dock__menu a:hover { background: var(--mocha); color: var(--white); }
  .is-menu-open .contact-dock { visibility: hidden; }

  /* Page transition veil --------------------------------------------------- */
  .transition-main { transition: opacity var(--dur-page) var(--ease-soft), transform var(--dur-page) var(--ease-out); }
  html.is-animating .transition-main { opacity: 0; transform: translateY(14px); }
  html.is-leaving .transition-main { transform: translateY(-10px); }
}

/* ---------------------------------------------------------------- pages -- */
@layer pages {
  .page-404 { min-height: 80svh; display: grid; place-items: center; text-align: center; padding-top: var(--header-h); }
  .page-404 .display-xl { color: var(--taupe); }
  .legal { padding-top: calc(var(--header-h) + var(--space-2xl)); }
  .legal h1 { font-size: var(--step-5); margin-bottom: var(--space-l); }
  .legal h2 { font-size: var(--step-2); margin-top: var(--space-xl); margin-bottom: var(--space-2xs); }
  .page-intro { padding-top: calc(var(--header-h) + var(--space-2xl)); }
}

/* ------------------------------------------------------------ utilities -- */
@layer utilities {
  .mt-s { margin-top: var(--space-s); }
  .mt-m { margin-top: var(--space-m); }
  .mt-l { margin-top: var(--space-l); }
  .mt-xl { margin-top: var(--space-xl); }
  .center { text-align: center; margin-inline: auto; }
  .nowrap { white-space: nowrap; }
}

/* --------------------------------------------------------------- motion -- */
@layer motion {
  /* Reveal targets start hidden only when JS is running and motion is allowed.
     boot.js adds .js and removes it again if the app never signals it is ready. */
  @media (prefers-reduced-motion: no-preference) {
    .js [data-reveal], .js [data-reveal-group] > * { opacity: 0; }
    .js [data-split] { opacity: 0; }
    .js [data-reveal-media] { clip-path: inset(18% 8% 0 8% round var(--radius-m)); }
    .js [data-map] .map__coast { stroke-dasharray: var(--len, 4000); stroke-dashoffset: var(--len, 4000); }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
    .hero__slide { transition: none; }
  }
}