/* ==========================================================================
   Davlakos Villas — davlakosvillas.com
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts
   'Miamo' (Light / Regular / Medium) and 'Miamo Script' are the licensed brand
   faces from the Figma design, self-hosted here. The open faces below are
   metric-matched fallbacks that only load if a Miamo file is ever missing.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Miamo';
  src: url('../assets/fonts/miamo-light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Miamo';
  src: url('../assets/fonts/miamo-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Miamo';
  src: url('../assets/fonts/miamo-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Miamo Script';
  src: url('../assets/fonts/miamo-script.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Body face + metric-matched fallbacks (self-hosted, no third-party requests) */
@font-face {
  font-family: 'Nunito';
  src: url('../assets/fonts/nunito.woff2') format('woff2');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DisplayFallback';
  src: url('../assets/fonts/cormorant-garamond.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  size-adjust: 112%;
}
@font-face {
  font-family: 'ScriptFallback';
  src: url('../assets/fonts/italianno.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  size-adjust: 123%;
}

/* --------------------------------------------------------------------------
   1b. Greek
   None of the brand faces contain a single Greek glyph, so the Greek pages
   need substitutes. These are declared with a unicode-range covering only the
   Greek blocks, which means the browser uses them for Greek letters and keeps
   real Miamo for everything Latin. "Davlakos Villas", "Villa Eve" and "Rea 1"
   therefore stay in the brand font even on a Greek page.

   EB Garamond stands in for Miamo, and its true italic carries the script
   tier (there is no elegant Greek script face in existence to match Miamo
   Script). Source Sans 3 stands in for Nunito in body text.
   Both are SIL Open Font License — see assets/fonts/licenses/.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'GreekDisplay';
  src: url('../assets/fonts/ebgaramond-greek-400.woff2') format('woff2');
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0370-03FF, U+1F00-1FFF, U+0384-038A, U+038C, U+038E-03A1;
}
@font-face {
  font-family: 'GreekDisplay';
  src: url('../assets/fonts/ebgaramond-greek-400-italic.woff2') format('woff2');
  font-weight: 300 500;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0370-03FF, U+1F00-1FFF, U+0384-038A, U+038C, U+038E-03A1;
}
@font-face {
  font-family: 'GreekBody';
  src: url('../assets/fonts/sourcesans3-greek-300.woff2') format('woff2');
  font-weight: 200 349;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0370-03FF, U+1F00-1FFF, U+0384-038A, U+038C, U+038E-03A1;
}
@font-face {
  font-family: 'GreekBody';
  src: url('../assets/fonts/sourcesans3-greek-400.woff2') format('woff2');
  font-weight: 350 449;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0370-03FF, U+1F00-1FFF, U+0384-038A, U+038C, U+038E-03A1;
}
@font-face {
  font-family: 'GreekBody';
  src: url('../assets/fonts/sourcesans3-greek-500.woff2') format('woff2');
  font-weight: 450 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0370-03FF, U+1F00-1FFF, U+0384-038A, U+038C, U+038E-03A1;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  --cream: #eee8e0;
  --ink: #341e12;
  --tan: #ae9d8b;
  --tan-light: #beae99;
  --white: #ffffff;
  --rule: rgba(52, 30, 18, 0.28);
  --rule-light: rgba(255, 255, 255, 0.45);

  /* 'GreekDisplay' / 'GreekBody' only ever match Greek characters (see 1b), so
     Latin keeps the brand faces and Greek falls to the substitutes. */
  --font-display: 'Miamo', 'GreekDisplay', 'DisplayFallback', Georgia, 'Times New Roman', serif;
  --font-script: 'Miamo Script', 'GreekDisplay', 'ScriptFallback', 'Segoe Script', cursive;
  --font-body: 'Nunito', 'GreekBody', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --container: min(1160px, 86vw);
  --wide: min(1680px, 92vw);

  --fs-hero: clamp(2.6rem, 5.6vw, 5.875rem);
  --fs-hero-script: clamp(2.3rem, 4.9vw, 5.0625rem);
  --fs-display: clamp(1.85rem, 2.9vw, 3.125rem);
  --fs-script: clamp(2.2rem, 3.8vw, 4.0625rem);
  --fs-script-lg: clamp(2.9rem, 5.3vw, 5.6875rem);
  --fs-body: clamp(1rem, 1.15vw, 1.4375rem);
  --fs-lead: clamp(1.05rem, 1.25vw, 1.5rem);
  --fs-quote: clamp(1.3rem, 2.1vw, 2.5rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --header-h: clamp(72px, 8vw, 142px);
}

/* --------------------------------------------------------------------------
   3. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.site-header a:focus-visible,
.site-menu a:focus-visible,
.site-menu button:focus-visible,
.hero a:focus-visible,
.site-footer a:focus-visible { outline-color: currentColor; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

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

.skip-link {
  position: absolute; left: 50%; top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  background: var(--ink); color: var(--cream);
  padding: 0.75rem 1.25rem;
  font-size: 0.9rem; letter-spacing: 0.06em;
  transition: transform 0.25s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   4. Typography helpers
   -------------------------------------------------------------------------- */
.display { font-family: var(--font-display); font-weight: 300; line-height: 1.12; }
.script  {
  font-family: var(--font-script);
  font-weight: 400;
  line-height: 1;
  /* Miamo Script's e+m ligature reads as "Krelasti"; Figma renders it unligated. */
  font-variant-ligatures: none;
  font-feature-settings: 'liga' 0, 'dlig' 0;
}
/* Greek has no script face, so the script tier leans on EB Garamond's italic —
   Greek italics are calligraphic by tradition, which carries the same feeling.
   Sized down because a garalde italic runs larger on the body than Miamo
   Script does at the same font-size. */
/* Written as `.script:lang(el)`, not `:lang(el) .script`. The descendant form
   matches anything inside <html lang="el"> and would ignore a lang="en" on an
   inner element — which is exactly how the English studio credit in the footer
   ended up in a Greek italic. This form asks the element's own language. */
.script:lang(el) {
  font-style: italic;
  font-size: 0.74em;
}
.hero__script:lang(el) { font-size: calc(var(--fs-hero-script) * 0.68); }
.title-lockup .script:lang(el) { font-size: calc(var(--fs-script) * 0.72); }
.intro-title .place:lang(el) { font-size: calc(var(--fs-script-lg) * 0.62); }
.lockup-inline .script:lang(el) { font-size: calc(var(--fs-script) * 0.7); transform: none; }
/* The studio credit carries lang="en", so the :lang(el) rules above never
   reach it and "care" keeps real Miamo Script on Greek pages too. */

h1, h2, h3, h4 { margin: 0; font-weight: 300; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-weight: 500;
  font-size: clamp(0.95rem, 1.15vw, 1.375rem);
  letter-spacing: 0.07em;
}

/* Inline lockup: display word followed by a raised script word */
.lockup-inline {
  font-size: var(--fs-display);
  display: flex;
  align-items: baseline;
  gap: 0.24em;
  line-height: 1.1;
}
.lockup-inline .display { font-size: var(--fs-display); }
.lockup-inline .script  { font-size: var(--fs-script); transform: translateY(-0.046em); }

/* Section title lockup: script word sitting above a display word */
.title-lockup { position: relative; display: inline-block; }
.title-lockup .script {
  font-size: var(--fs-script);
  display: block;
  margin-bottom: 0;
  margin-left: 0.46em;
}
.title-lockup .display { font-size: var(--fs-display); display: block; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px clamp(30px, 3.2vw, 60px);
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(0.8rem, 0.94vw, 1.125rem);
  letter-spacing: 0.07em;
  line-height: 1.35;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.btn::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--ease);
  z-index: -1;
}
.btn > span { position: relative; z-index: 1; }
.btn:hover { color: var(--cream); }
.btn:hover::after { transform: scaleX(1); }
.btn--light { border-color: var(--white); color: var(--white); }
.btn--light::after { background: var(--white); }
.btn--light:hover { color: var(--ink); }

.btn-row { display: flex; justify-content: center; }

/* --------------------------------------------------------------------------
   6. Header + burger
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(14px, 2.5vw, 48px) clamp(18px, 5vw, 91px);
  color: var(--cream);
  transition: background-color 0.45s var(--ease), padding 0.45s var(--ease), color 0.45s var(--ease);
}
.site-header--ink { color: var(--ink); }

body.menu-open .site-header {
  z-index: 110;
  background: transparent;
  box-shadow: none;
  color: var(--white);
}

.site-header.is-stuck {
  background: rgba(238, 232, 224, 0.97);
  color: var(--ink);
  padding-top: clamp(10px, 1.2vw, 18px);
  padding-bottom: clamp(10px, 1.2vw, 18px);
  box-shadow: 0 1px 0 rgba(52, 30, 18, 0.08);
}

.site-logo { display: block; width: clamp(168px, 21vw, 400px); color: inherit; }
.site-logo svg { width: 100%; height: auto; }

/* ---- Language switch -----------------------------------------------------
   Sits left of the burger and inherits the header's colour, so it is correct
   on the photo headers (cream), the gallery's ink header, the stuck header
   and the open menu without a single override. */
.site-header__tools {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 30px);
  flex: none;
}

.lang-switch {
  position: relative;
  z-index: 120;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(34px, 3vw, 46px);
  padding: 5px 2px 6px;
  color: inherit;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(0.72rem, 0.82vw, 0.9375rem);
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}
/* A hairline that grows from the centre — quieter than a boxed button, and it
   matches the underline language used in the footer nav. */
.lang-switch::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
  transform: scaleX(0.55);
  transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
}
.lang-switch:hover::after,
.lang-switch:focus-visible::after { transform: scaleX(1); opacity: 1; }

body.menu-open .lang-switch { color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  .lang-switch::after { transition: none; }
}

.burger {
  --burger-w: clamp(30px, 2.3vw, 44px);
  position: relative;
  width: var(--burger-w);
  height: calc(var(--burger-w) * 0.688);
  flex: none;
  z-index: 120;
  color: inherit;
}
.burger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.45s var(--ease), opacity 0.2s linear, background-color 0.45s var(--ease), width 0.45s var(--ease);
}
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: calc(50% - 1px); }
.burger span:nth-child(3) { bottom: 0; }

.burger.is-open { color: var(--white); }
.burger.is-open span:nth-child(1) { top: calc(50% - 1px); transform: rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
.burger.is-open span:nth-child(3) { bottom: auto; top: calc(50% - 1px); transform: rotate(-45deg); }

/* --------------------------------------------------------------------------
   7. Slide-in menu
   -------------------------------------------------------------------------- */
.menu-scrim {
  position: fixed; inset: 0;
  background: rgba(52, 30, 18, 0.42);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0s linear 0.5s;
  z-index: 95;
}
.menu-scrim.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }

.site-menu {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: clamp(320px, 30vw, 528px);
  background: var(--tan);
  color: var(--white);
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(96px, 24vh, 272px) clamp(28px, 5.6vw, 107px) clamp(40px, 13vh, 146px);
  transform: translateX(100%);
  transition: transform 0.58s var(--ease);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.site-menu.is-open { transform: translateX(0); }

.site-menu nav { margin-top: 0; }
.site-menu ul { list-style: none; margin: 0; padding: 0; }
.site-menu li { border-bottom: 1px solid var(--rule-light); }
.site-menu li:last-child { border-bottom: 0; }

.site-menu a.menu-link {
  display: block;
  padding: clamp(16px, 2.4vh, 26px) 0;
  font-size: clamp(1.05rem, 1.25vw, 1.4375rem);
  font-weight: 300;
  letter-spacing: 0.07em;
  position: relative;
  opacity: 0;
  transform: translateX(28px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), padding-left 0.35s var(--ease);
}
.site-menu.is-open a.menu-link { opacity: 1; transform: translateX(0); }
.site-menu.is-open li:nth-child(1) a { transition-delay: 0.14s; }
.site-menu.is-open li:nth-child(2) a { transition-delay: 0.20s; }
.site-menu.is-open li:nth-child(3) a { transition-delay: 0.26s; }
.site-menu.is-open li:nth-child(4) a { transition-delay: 0.32s; }
.site-menu.is-open li:nth-child(5) a { transition-delay: 0.38s; }
.site-menu a.menu-link:hover,
.site-menu a.menu-link[aria-current='page'] { padding-left: 14px; font-weight: 400; }

.site-menu .menu-foot {
  margin-top: auto;
  padding-top: clamp(32px, 7vh, 76px);
  display: flex;
  align-items: center;
  gap: 22px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease) 0.44s, transform 0.5s var(--ease) 0.44s;
}
.site-menu.is-open .menu-foot { opacity: 1; transform: translateY(0); }

.social {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  color: currentColor;
}
.social a { display: block; opacity: 0.92; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.social a:hover { opacity: 1; transform: translateY(-2px); }
.social svg { width: 20px; height: 20px; fill: currentColor; }

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 620px;
  height: 100svh;
  max-height: 1080px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
}
.hero--short { height: 78svh; min-height: 520px; max-height: 844px; }

.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transform: scale(1.06);
  animation: heroZoom 2.6s var(--ease) forwards;
}
@keyframes heroZoom { to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .hero__media img { animation: none; transform: none; }
}

.hero__media::before,
.hero__media::after { content: ''; position: absolute; left: 0; right: 0; }
.hero__media::before {
  top: 0; height: 37%;
  background: linear-gradient(to bottom, rgba(52, 30, 18, 0.5), rgba(0, 0, 0, 0));
}
.hero__media::after {
  bottom: 0; height: 46%;
  background: linear-gradient(to bottom, rgba(52, 30, 18, 0), rgba(52, 30, 18, 0.72));
}

.hero__inner {
  position: relative;
  width: var(--wide);
  padding-bottom: clamp(46px, 8vh, 84px);
}
.hero__script { font-size: var(--fs-hero-script); display: block; margin-bottom: -0.056em; }
.hero__title  { font-size: var(--fs-hero); display: block; letter-spacing: 0.01em; }
.hero__meta {
  display: inline-block;
  margin-top: clamp(18px, 2.6vh, 34px);
  font-weight: 500;
  font-size: clamp(0.95rem, 1.15vw, 1.375rem);
  letter-spacing: 0.07em;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}
.hero__meta:hover { border-bottom-color: currentColor; }

.hero--page .hero__inner { padding-bottom: clamp(40px, 7vh, 70px); }

/* --------------------------------------------------------------------------
   9. Sections
   -------------------------------------------------------------------------- */
.section { padding: clamp(56px, 9vw, 168px) 0; }
.section--cream { background: var(--cream); }
.section--white { background: var(--white); }
.section--tight { padding-block: clamp(44px, 6vw, 110px); }

.wrap { width: var(--container); margin-inline: auto; }
.wrap--wide { width: var(--wide); margin-inline: auto; }
.center { text-align: center; }

.lede {
  font-size: var(--fs-body);
  line-height: 1.66;
  max-width: 864px;
  margin-inline: auto;
}
.lede--wide { max-width: 1160px; }
.lede strong { font-weight: 500; }

.intro-title { margin-bottom: clamp(26px, 3.4vw, 58px); }
.intro-title .display { font-size: var(--fs-display); display: block; }
.intro-title .line-2 {
  display: block;
  margin-top: 0;
  white-space: nowrap;
}
.intro-title .line-2 .of { font-family: var(--font-display); font-size: var(--fs-display); }
.intro-title .line-2 .place { font-family: var(--font-script); font-size: var(--fs-script-lg); margin-left: 0.12em; }

.section .btn-row { margin-top: clamp(30px, 4vw, 62px); }

/* ---- Villa showcase blocks (home) --------------------------------------- */
.showcase { position: relative; }
.showcase + .showcase { margin-top: clamp(40px, 5.5vw, 106px); }

.showcase__media {
  height: clamp(280px, 39vw, 750px);
  overflow: hidden;
}
.showcase__media img { width: 100%; height: 100%; object-fit: cover; }

.showcase__card {
  position: relative;
  width: min(1437px, 78vw);
  margin: clamp(-90px, -7vw, -132px) auto 0;
  background: var(--cream);
  text-align: center;
  padding: clamp(66px, 6.2vw, 118px) clamp(22px, 4vw, 70px) clamp(30px, 3.4vw, 62px);
}

.showcase__badge {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -61%);
  width: clamp(160px, 13vw, 246px);
  height: clamp(108px, 8.6vw, 164px);
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
.showcase__badge img {
  height: clamp(64px, 5.6vw, 108px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.showcase__text {
  max-width: 873px;
  margin: 0 auto clamp(22px, 2.6vw, 40px);
  font-size: var(--fs-body);
  line-height: 1.66;
}

/* ---- Testimonial -------------------------------------------------------- */
.testimonial { text-align: center; }
.testimonial__mark { width: clamp(34px, 2.9vw, 55px); margin: 0 auto clamp(22px, 3vw, 55px); }
.testimonial__mark svg { width: 100%; height: auto; }
.testimonial__quote {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-quote);
  line-height: 1.68;
  max-width: 1221px;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   10. Villa page: title lockup, amenities, accordion
   -------------------------------------------------------------------------- */
.villa-title {
  font-size: var(--fs-display);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.4vw, 26px);
  margin-bottom: clamp(28px, 3.6vw, 60px);
}
.villa-title .display { font-size: var(--fs-display); }
.villa-title img {
  width: auto;
  height: clamp(76px, 8.2vw, 158px);
  object-fit: contain;
  margin-left: -0.45em;
}

.section-head { margin-bottom: clamp(30px, 3.8vw, 64px); }

.amenities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 3.2vw, 56px) clamp(26px, 4.4vw, 90px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.amenity {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 30px);
  font-size: clamp(0.94rem, 1.05vw, 1.25rem);
  font-weight: 300;
  color: #111;
}
.amenity__icon {
  flex: none;
  width: clamp(34px, 3vw, 58px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
}
.amenity__icon svg { width: 100%; height: auto; max-height: clamp(34px, 3.1vw, 60px); }

/* Accordion */
.accordion { border-top: 1px solid var(--rule); }
.accordion__item { border-bottom: 1px solid var(--rule); }
.accordion__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(18px, 1.9vw, 30px) 0;
  text-align: left;
  font-weight: 500;
  font-size: clamp(0.82rem, 0.95vw, 1.125rem);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--ink);
}
.accordion__icon {
  position: relative;
  flex: none;
  width: 20px; height: 20px;
}
.accordion__icon::before,
.accordion__icon::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
}
.accordion__icon::before { width: 20px; height: 1.5px; }
.accordion__icon::after  { width: 1.5px; height: 20px; }
.accordion__btn[aria-expanded='true'] .accordion__icon::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease);
}
.accordion__panel > div { overflow: hidden; }
.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }
.accordion__body {
  padding: 0 0 clamp(20px, 2.2vw, 34px) clamp(0px, 6.6vw, 127px);
  max-width: 923px;
  font-size: var(--fs-body);
  line-height: 1.66;
  opacity: 0;
  transition: opacity 0.35s var(--ease) 0.1s;
}
.accordion__item.is-open .accordion__body { opacity: 1; }

/* ---- 360° virtual tour --------------------------------------------------
   The description band above is also cream, so this one drops its top
   padding and reads as a continuation of it. The tour provider's iframe is
   only inserted once the visitor clicks; until then the villa's own photo
   stands in, which keeps the page fast and makes no third-party request. */
.section--tour { padding-top: 0; padding-bottom: clamp(56px, 8vw, 150px); }

.tour { margin: 0; }

.tour__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--tan-light);
  border: 1px solid var(--rule);
  box-shadow: 0 18px 48px -28px rgba(52, 30, 18, 0.55);
}
@media (min-width: 700px) {
  .tour__frame { aspect-ratio: 16 / 9; }
}

.tour__poster,
.tour__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.tour__poster {
  object-fit: cover;
  filter: saturate(0.92);
  transition: transform 0.9s var(--ease), filter 0.6s var(--ease);
}

/* The whole poster is the button, so the target is never in doubt. */
.tour__play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 1.5vw, 24px);
  width: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  color: var(--white);
  /* Darkest through the middle, where the ring and label sit, so the label
     stays readable over a bright poolside photo as well as a dusk one. */
  background:
    radial-gradient(ellipse 60% 55% at 50% 48%, rgba(52, 30, 18, 0.5), rgba(52, 30, 18, 0) 70%),
    linear-gradient(to bottom, rgba(52, 30, 18, 0.24), rgba(52, 30, 18, 0.4));
  transition: background 0.5s var(--ease);
}
.tour__ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(64px, 6.4vw, 104px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  backdrop-filter: blur(2px);
  transition: transform 0.5s var(--ease), background 0.5s var(--ease),
              border-color 0.5s var(--ease);
}
.tour__ring svg { width: 46%; height: auto; }
.tour__label {
  max-width: 90%;
  font-size: clamp(0.7rem, 0.78vw, 0.9rem);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(52, 30, 18, 0.6);
}

.tour__play:hover .tour__ring,
.tour__play:focus-visible .tour__ring {
  transform: scale(1.07);
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--white);
}
.tour__frame:hover .tour__poster { transform: scale(1.03); filter: saturate(1); }
.tour__play:hover {
  background:
    radial-gradient(ellipse 60% 55% at 50% 48%, rgba(52, 30, 18, 0.42), rgba(52, 30, 18, 0) 70%),
    linear-gradient(to bottom, rgba(52, 30, 18, 0.18), rgba(52, 30, 18, 0.34));
}
.tour__play:focus-visible { outline: 2px solid var(--white); outline-offset: -6px; }

/* Once the iframe is in, the poster and button step aside. */
.tour__frame.is-live .tour__play,
.tour__frame.is-live .tour__poster { opacity: 0; pointer-events: none; }
.tour__frame.is-live .tour__play,
.tour__frame.is-live .tour__poster { transition: opacity 0.5s var(--ease); }
.tour__frame iframe { z-index: 3; opacity: 0; transition: opacity 0.6s var(--ease); }
.tour__frame.is-live iframe { opacity: 1; }

.tour__hint {
  margin: clamp(14px, 1.6vw, 24px) 0 0;
  font-size: clamp(0.82rem, 0.92vw, 1.05rem);
  font-weight: 300;
  line-height: 1.6;
  color: rgba(52, 30, 18, 0.72);
  text-align: center;
}
.tour__frame--static iframe { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .tour__poster,
  .tour__ring,
  .tour__frame iframe { transition: none; }
  .tour__frame:hover .tour__poster { transform: none; }
}

/* --------------------------------------------------------------------------
   11. Slider (villa gallery)
   -------------------------------------------------------------------------- */
.slider { position: relative; }
.slider__viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 1160 / 770;
  overflow: hidden;
  background: var(--cream);
  cursor: zoom-in;
}
.slider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.7s var(--ease);
  pointer-events: none;
}
.slider__slide.is-active { opacity: 1; pointer-events: auto; }
.slider__slide img { width: 100%; height: 100%; object-fit: cover; }

.slider__nav {
  display: flex;
  padding-inline: clamp(0px, 3.8%, 45px);
  align-items: center;
  justify-content: space-between;
  margin-top: clamp(18px, 2.2vw, 36px);
}
.arrow-btn {
  width: clamp(46px, 4.6vw, 72px);
  color: var(--ink);
  transition: transform 0.35s var(--ease), opacity 0.3s var(--ease);
  opacity: 0.85;
}
.arrow-btn svg { width: 100%; height: auto; fill: currentColor; }
.arrow-btn:hover { opacity: 1; }
.arrow-btn--prev svg { transform: rotate(180deg); }
.arrow-btn--prev:hover { transform: translateX(-6px); }
.arrow-btn--next:hover { transform: translateX(6px); }

/* --------------------------------------------------------------------------
   12. Gallery page grid
   -------------------------------------------------------------------------- */
.gallery-page { padding-top: calc(var(--header-h) + clamp(24px, 4vw, 60px)); }
.gallery-grid { display: flex; flex-direction: column; gap: clamp(20px, 3.2vw, 60px); }
.gallery-row { display: grid; gap: clamp(20px, 3.2vw, 60px); }
.gallery-row--1 { grid-template-columns: 1fr; }
.gallery-row--2 { grid-template-columns: repeat(2, 1fr); }
.gallery-row.is-hidden { display: none; }

.gallery-item {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background: var(--cream);
  cursor: zoom-in;
}
.gallery-row--1 .gallery-item { aspect-ratio: 1160 / 800; }
.gallery-row--2 .gallery-item { aspect-ratio: 550 / 700; }
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease), filter 0.6s var(--ease);
}
.gallery-item:hover img { transform: scale(1.045); }

/* --------------------------------------------------------------------------
   13. Lightbox
   -------------------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(24, 14, 8, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0s linear 0.4s;
}
.lightbox.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }

.lightbox__stage {
  position: relative;
  width: min(92vw, 1500px);
  height: min(84svh, 1000px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45);
}
.lightbox__img.is-ready { opacity: 1; transform: scale(1); }

.lightbox__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(44px, 4vw, 62px);
  height: clamp(44px, 4vw, 62px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.lightbox__btn:hover { background: rgba(255, 255, 255, 0.22); }
.lightbox__btn svg { width: 42%; height: auto; fill: currentColor; }
.lightbox__btn--prev { left: clamp(-6px, -1vw, 0px); }
.lightbox__btn--prev svg { transform: rotate(180deg); }
.lightbox__btn--prev:hover { transform: translateY(-50%) translateX(-4px); }
.lightbox__btn--next { right: clamp(-6px, -1vw, 0px); }
.lightbox__btn--next:hover { transform: translateY(-50%) translateX(4px); }

.lightbox__close {
  position: absolute;
  top: clamp(14px, 2.4vw, 40px);
  right: clamp(14px, 2.4vw, 44px);
  width: 44px; height: 44px;
  color: #fff;
}
.lightbox__close::before,
.lightbox__close::after {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 26px; height: 1.5px;
  background: currentColor;
  transform-origin: center;
}
.lightbox__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.lightbox__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.lightbox__close:hover { opacity: 0.7; }

.lightbox__counter {
  position: absolute;
  bottom: clamp(12px, 2.2vw, 34px);
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.85rem;
  letter-spacing: 0.16em;
}

/* --------------------------------------------------------------------------
   14. Contact
   -------------------------------------------------------------------------- */
.contact-page { background: var(--white); }

.contact-hero {
  position: relative;
  min-height: 560px;
  height: 100svh;
  max-height: 1080px;
  overflow: hidden;
}
.contact-hero__media { position: absolute; inset: 0; }
.contact-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.contact-hero__media::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 37%;
  background: linear-gradient(to bottom, rgba(52, 30, 18, 0.5), rgba(0, 0, 0, 0));
}

.contact-layout {
  position: relative;
  width: var(--wide);
  margin-inline: auto;
}
.contact-card {
  position: relative;
  z-index: 3;
  margin-top: clamp(-460px, -34vw, -640px);
  width: min(551px, 100%);
  background: var(--white);
  padding: clamp(30px, 3.6vw, 52px) clamp(26px, 3.4vw, 50px) clamp(34px, 4vw, 58px);
}
.contact-card .title-lockup { margin-bottom: clamp(22px, 2.6vw, 40px); }

.contact-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(20px, 3vw, 60px);
  padding: clamp(40px, 5vw, 90px) 0 clamp(48px, 6vw, 110px);
  font-size: clamp(0.95rem, 1vw, 1.125rem);
  line-height: 1.85;
  max-width: 900px;
  margin-inline: auto;
}
.contact-meta a { border-bottom: 1px solid transparent; transition: border-color 0.3s var(--ease); }
.contact-meta a:hover { border-bottom-color: currentColor; }

/* Form */
.field { position: relative; margin-bottom: clamp(18px, 2vw, 30px); }
.field label {
  display: block;
  font-size: clamp(0.9rem, 1vw, 1.25rem);
  font-weight: 300;
  color: var(--ink);
  margin-bottom: 6px;
  text-transform: capitalize;
}
.field .req { color: var(--tan); }
.field input,
.field textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: transparent;
  padding: 6px 0 10px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  color: var(--ink);
  border-radius: 0;
  transition: border-color 0.3s var(--ease);
}
.field textarea { resize: vertical; min-height: 110px; line-height: 1.6; }
.field input:focus,
.field textarea:focus { outline: none; border-bottom-color: var(--ink); }
.field.has-error input,
.field.has-error textarea { border-bottom-color: #b4432c; }

.field__error {
  display: block;
  min-height: 1.1em;
  margin-top: 5px;
  font-size: 0.78rem;
  color: #b4432c;
  letter-spacing: 0.01em;
}
.field__count {
  position: absolute;
  right: 0; top: 0;
  font-size: 0.72rem;
  color: rgba(52, 30, 18, 0.5);
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: clamp(14px, 1.6vw, 22px) 0 clamp(18px, 2vw, 28px);
}
.consent input {
  flex: none;
  appearance: none;
  -webkit-appearance: none;
  width: 16px; height: 16px;
  margin-top: 2px;
  border: 1px solid #8b8e91;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.consent input:checked { background: var(--tan); border-color: var(--tan); }
.consent input:checked::after {
  content: '';
  position: absolute;
  left: 4px; top: 0px;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.consent label {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--tan);
  cursor: pointer;
}
.consent.has-error label { color: #b4432c; }

.form-status {
  margin-top: 16px;
  font-size: 0.9rem;
  line-height: 1.5;
  min-height: 1.2em;
}
.form-status.is-ok { color: #2f6b46; }

/* ---- reCAPTCHA ----------------------------------------------------------
   The floating badge is hidden because it sits in the bottom-right corner,
   exactly where the back-to-top button already lives. Google allows this on
   condition that the notice below appears beside the form, which it does. */
.grecaptcha-badge { visibility: hidden !important; }

.form-legal {
  margin: clamp(14px, 1.6vw, 22px) 0 0;
  font-size: clamp(0.68rem, 0.74vw, 0.8rem);
  font-weight: 300;
  line-height: 1.55;
  color: rgba(52, 30, 18, 0.6);
}
.form-legal a {
  color: inherit;
  border-bottom: 1px solid rgba(52, 30, 18, 0.3);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.form-legal a:hover { color: var(--ink); border-bottom-color: currentColor; }

/* The invisible widget renders nothing inline, but reserve no space for it. */
.g-recaptcha { display: none; }
.form-status.is-error { color: #b4432c; }

.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* --------------------------------------------------------------------------
   14b. Back-to-top button
   -------------------------------------------------------------------------- */
/* ---- EU / ΕΣΠΑ co-funding badge ------------------------------------------
   A funding condition: the emblem must stay visible, so it is fixed to the
   viewport. Kept deliberately quiet — a plain white card, a hairline border
   and a soft shadow, no colour of its own — so it reads as a credential
   rather than as part of the site's design. It rides above the footer on the
   same --to-top-lift the back-to-top button uses. */
.espa {
  position: fixed;
  /* Bottom-left, not centre: the hero's title and address are centred, and a
     centred badge lands straight on top of them on a short screen. The left
     corner is empty at every scroll position, and leaves the back-to-top
     button its own corner on the right. */
  left: clamp(14px, 2.2vw, 40px);
  bottom: calc(clamp(14px, 1.8vw, 28px) + var(--to-top-lift, 0px));
  z-index: 75;
  display: block;
  padding: clamp(6px, 0.7vw, 10px) clamp(10px, 1.1vw, 16px);
  background: var(--white);
  border: 1px solid rgba(52, 30, 18, 0.12);
  border-radius: 3px;
  box-shadow: 0 4px 18px -6px rgba(52, 30, 18, 0.28);
  line-height: 0;
  transition: box-shadow 0.35s var(--ease), border-color 0.35s var(--ease),
              opacity 0.3s var(--ease), visibility 0s linear 0s;
}
.espa img {
  height: clamp(26px, 2.6vw, 40px);
  width: auto;
  max-width: 100%;
}
.espa:hover,
.espa:focus-visible {
  box-shadow: 0 7px 26px -6px rgba(52, 30, 18, 0.36);
  border-color: rgba(52, 30, 18, 0.24);
}
.espa:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* The menu and the photo viewer cover the whole screen, so the badge is not
   hiding anything while they are open — and it would sit on top of them. */
body.menu-open .espa,
body.is-locked .espa {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease), visibility 0s linear 0.25s;
}

@media (max-width: 600px) {
  .espa { padding: 5px 9px; }
  .espa img { height: 24px; }
}

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

.to-top {
  position: fixed;
  right: clamp(16px, 2.2vw, 40px);
  /* --to-top-lift is set by site.js so the button rides above the footer */
  bottom: calc(clamp(16px, 2.2vw, 40px) + var(--to-top-lift, 0px));
  z-index: 80;
  width: clamp(46px, 3.6vw, 56px);
  height: clamp(46px, 3.6vw, 56px);
  border-radius: 50%;
  background: var(--tan);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 22px rgba(52, 30, 18, 0.24);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease),
              visibility 0s linear 0.4s, background-color 0.35s var(--ease);
}
.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
.to-top:hover { background: var(--ink); }
.to-top:hover svg { transform: rotate(-90deg) translateX(3px); }
.to-top svg {
  width: 52%;
  height: auto;
  fill: currentColor;
  transform: rotate(-90deg);
  transition: transform 0.35s var(--ease);
}

/* Stay out of the way of the slide-in menu and the photo viewer */
body.menu-open .to-top,
body.is-locked .to-top {
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition-delay: 0s, 0s, 0.35s, 0s;
}

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--tan);
  color: var(--white);
  padding: clamp(38px, 3.7vw, 47px) 0 clamp(26px, 2.6vw, 33px);
}
.site-footer__inner { width: var(--wide); margin-inline: auto; }

.site-footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 4vw, 60px);
  flex-wrap: wrap;
}
.site-footer .site-logo { width: clamp(190px, 16vw, 300px); }
.site-footer__addr {
  font-weight: 500;
  font-size: clamp(0.9rem, 1vw, 1.1875rem);
  letter-spacing: 0.07em;
  text-align: right;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}
.site-footer__addr:hover { border-bottom-color: currentColor; }

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: clamp(18px, 2.4vw, 44px);
  margin: clamp(28px, 4.4vw, 78px) 0 clamp(14px, 1.6vw, 22px);
  font-size: clamp(0.8rem, 0.86vw, 0.9375rem);
  font-weight: 300;
  letter-spacing: 0.07em;
}
.site-footer__nav a { border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color 0.3s var(--ease); }
.site-footer__nav a:hover,
.site-footer__nav a[aria-current='page'] { border-bottom-color: currentColor; }

.site-footer__rule { height: 1px; background: var(--rule-light); border: 0; margin: 0; }

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: clamp(14px, 1.6vw, 22px);
}
.site-footer__copy { margin: 0; font-size: 0.75rem; letter-spacing: 0.05em; }

/* Studio credit — the script word echoes the lockups used across the site. */
.site-footer__credit {
  display: flex;
  align-items: baseline;
  gap: 0.44em;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}
.site-footer__credit .script {
  font-size: 1.78em;
  letter-spacing: 0;
  text-transform: none;
  transform: translateY(0.085em);
  color: var(--white);
}
.site-footer__credit a {
  position: relative;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--white);
}
.site-footer__credit a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.45s var(--ease);
}
.site-footer__credit a:hover::after,
.site-footer__credit a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}
@media (prefers-reduced-motion: reduce) {
  .site-footer__credit a::after { transition: none; }
}

/* --------------------------------------------------------------------------
   15b. 404 page
   -------------------------------------------------------------------------- */
.hero--error { height: 100svh; min-height: 620px; max-height: none; align-items: center; }
.hero--error .hero__media::after {
  height: 100%;
  background:
    linear-gradient(to bottom, rgba(52, 30, 18, 0.62), rgba(52, 30, 18, 0.42) 40%, rgba(52, 30, 18, 0.72)),
    rgba(52, 30, 18, 0.2);
}
.hero--error .hero__inner { padding-block: clamp(90px, 12vh, 160px) clamp(40px, 6vh, 80px); }

.error { text-align: center; }

.error__code {
  font-size: clamp(5.5rem, 17vw, 15rem);
  line-height: 0.86;
  letter-spacing: 0.02em;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 8px 40px rgba(52, 30, 18, 0.35);
}
.error__script {
  display: block;
  font-size: clamp(2rem, 4.6vw, 4.5rem);
  margin-top: -0.16em;
}
.error__text {
  max-width: 46ch;
  margin: clamp(18px, 2.6vh, 34px) auto 0;
  font-size: clamp(0.98rem, 1.1vw, 1.3125rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 12px rgba(52, 30, 18, 0.5);
}
.error__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(10px, 1.2vw, 18px);
  margin-top: clamp(26px, 4vh, 48px);
}
.error__actions .btn { padding-inline: clamp(22px, 2.4vw, 40px); }
.error__addr {
  display: inline-block;
  margin-top: clamp(24px, 4vh, 46px);
  font-size: 0.85rem;
  letter-spacing: 0.09em;
  color: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid transparent;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.error__addr:hover { color: #fff; border-bottom-color: currentColor; }

@media (max-width: 560px) {
  .error__actions { flex-direction: column; align-items: stretch; }
  .error__text { max-width: 30ch; }
}

/* --------------------------------------------------------------------------
   16. Maintenance page
   -------------------------------------------------------------------------- */
.maintenance {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(40px, 8vw, 100px) 24px;
  position: relative;
  color: var(--white);
  overflow: hidden;
}
.maintenance__media { position: absolute; inset: 0; z-index: -2; }
.maintenance__media img { width: 100%; height: 100%; object-fit: cover; }
.maintenance__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(52, 30, 18, 0.72), rgba(52, 30, 18, 0.82));
}
.maintenance__inner { position: relative; max-width: 760px; }
.maintenance .site-logo { width: clamp(200px, 24vw, 340px); margin: 0 auto clamp(28px, 4vw, 56px); }
.maintenance h1 { font-family: var(--font-display); font-size: var(--fs-display); margin-bottom: 0.5em; }
.maintenance p { font-size: var(--fs-body); line-height: 1.7; }
.maintenance__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-top: clamp(26px, 3.6vw, 48px);
}
.maintenance__addr { display: block; margin-top: clamp(22px, 3vw, 40px); font-size: 0.95rem; letter-spacing: 0.06em; opacity: 0.85; }
.maintenance__credit { justify-content: center; margin-top: clamp(26px, 3.4vw, 44px); }

/* --------------------------------------------------------------------------
   17. Reveal animation
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal--d1 { transition-delay: 0.1s; }
.reveal--d2 { transition-delay: 0.2s; }
.reveal--d3 { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* --------------------------------------------------------------------------
   18. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .amenities { grid-template-columns: 1fr; }
  .accordion__body { padding-left: 0; }
  .contact-card { margin-top: clamp(-320px, -46vw, -420px); }
  .contact-hero { height: 78svh; min-height: 460px; }
  .site-footer__top { flex-direction: column; align-items: flex-start; gap: 22px; }
  .site-footer__addr { text-align: left; }
  .site-footer__nav { justify-content: flex-start; }
}

@media (max-width: 680px) {
  :root { --container: 88vw; --wide: 88vw; }
  .site-menu { width: 84vw; padding-top: clamp(96px, 18vh, 180px); }
  .hero { height: 92svh; }
  .showcase__card { width: 92vw; margin-top: -56px; }
  .lockup-inline { gap: 0.22em; }
  .showcase__badge { transform: translate(-50%, -55%); }
  .gallery-row--2 { grid-template-columns: 1fr; }
  .gallery-row--2 .gallery-item { aspect-ratio: 4 / 5; }
  .villa-title { flex-direction: column; gap: 4px; }
  .villa-title img { margin-left: 0; }
  .site-footer__bottom { flex-direction: column-reverse; align-items: flex-start; gap: 16px; }
  .slider__nav { gap: 16px; }
  .intro-title .line-2 { white-space: normal; }
}

@media (max-width: 420px) {
  .btn { padding-inline: 26px; }
}