/* ========================================================
   Villa Thalassa — styles.css
   ======================================================== */

:root {
  /* The background lightens further down the page: these are the three tones,
     from the upper bands to the closing one. */
  --bg:        #D9D0C4;   /* upper bands — warm greige */
  --bg-2:      #DED7CC;   /* villa rentals — one shade lighter */
  --bg-4:      #F3EDE6;   /* enquiry — cream */
  --surface:   #EDEAE3;   /* lighter cream (forms / cards) */
  --field:     #F3F1EB;
  --cream:     #EDE2D5;   /* light pill on greige (sampled) */
  --soft:      #DACFC0;   /* pill on an already light background (sec. 5, form) */
  --ink:       #3E3A32;
  --ink-soft:  #6E685C;
  --heading:   #8C8478;   /* tone-on-tone display headings (taupe) */
  --muted:     #8D8478;   /* labels / eyebrows */
  --line:      rgba(62, 58, 50, 0.18);
  --white:     #FFFFFF;

  /* Font families
     --font-display : condensed display, headings and wordmarks
     --font-serif   : high-contrast serif, body copy and pill labels
     --font-ui      : spaced small caps, menu and form labels */
  --font-display: "Oswald", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif:   "Playfair Display", "Times New Roman", serif;
  --font-ui:      "Oswald", system-ui, -apple-system, "Segoe UI", sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;

  --max-w: 1360px;

  /* Header and hero share these: the header overlays the top of the hero, and
     the hero reserves the band it takes up. --nav-h is the pill height
     (26px of text plus 13px of padding top and bottom). */
  --hero-pad-x: clamp(24px, 6.4vw, 97px);
  --hero-pad-y: clamp(28px, 6vh, 72px);
  --nav-h: 52px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.05; }

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

/* ---------- Shared primitives ---------- */
.btn-pill {
  display: inline-flex;
  align-items: center;
  border: 0;
  border-radius: 999px;
  padding: 13px 32px;
  font-family: var(--font-serif);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink);
  background: #D8D0C2;   /* solid beige behind the photograph */
  transition: background .25s ease, color .25s ease;
}
.btn-pill:hover { background: var(--ink); color: #EDEAE3; }
/* Keyboard focus only: styled so it never shows the browser's blue box on click */
.btn-pill:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.btn-pill--light { background: var(--cream); }   /* on greige (sec. 3) */
.btn-pill--soft  { background: var(--soft); }    /* on a light background (sec. 5, form) */
.btn-pill--cream { background: #F1E6D7; }        /* Open Maps in the footer */

/* ============ HEADER ============
   Laid over the top of the hero rather than stacked above it, so the hero can
   fill the screen exactly and the strapline at its bottom left is in view on
   landing. */
.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 5;
  padding: var(--hero-pad-y) var(--hero-pad-x) 0;
  color: var(--white);
}

/* ============ HERO ============ */
.hero {
  position: relative;
  /* Exactly the height of the screen. svh rather than vh: on a phone it is
     measured with the browser toolbars showing, so nothing is pushed out of
     sight while they are on screen. */
  min-height: 100vh;
  min-height: 100svh;
  /* The top padding clears the header laid over it. */
  padding: calc(var(--hero-pad-y) + var(--nav-h)) var(--hero-pad-x) clamp(28px, 6vh, 64px);
  color: var(--white);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #9db4c0 url("images/hero.jpg") center 50%/cover no-repeat;
  /* Query container for the wordmark: 100cqi is the column between the side
     paddings, so the title can be sized to span it exactly. */
  container-type: inline-size;
}
/* Background video (desktop) — falls back to the poster image on mobile */
.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
  z-index: 0;
}
/* Slight darkening top and bottom to keep the white text legible */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.28) 0%,
    rgba(0,0,0,0.10) 16%,
    rgba(0,0,0,0) 38%,
    rgba(0,0,0,0) 66%,
    rgba(0,0,0,0.28) 100%);
}
/* Above the scrim. Named rather than `.hero > *`, which would also override the
   scrim's own positioning. */
.hero__wordmark,
.hero__tagline { position: relative; z-index: 2; }

/* ---- Nav ---- */
.nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  /* Containing block for the drop-down menu below. */
  position: relative;
}
.nav__toggle {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 6px 2px;
  order: 1;
}
.nav__toggle span {
  /* Whole pixels: a fractional height lands each bar on a different sub-pixel
     boundary, so on a 1x screen they render at visibly different weights. */
  height: 2px;
  background: var(--white);
  transition: width .3s ease, transform .3s ease, opacity .3s ease;
}
.nav__toggle:focus-visible { outline: 2px solid var(--white); outline-offset: 6px; }
.nav__toggle span:nth-child(1) { width: 15px; }
.nav__toggle span:nth-child(2) { width: 22px; }
.nav__toggle span:nth-child(3) { width: 30px; }
.nav__enquire {
  order: 2;
  font-size: 16px;
  font-weight: 400;
}

/* Pop-out menu (overlay) */
.nav__menu {
  order: 3;
  display: none;
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  min-width: 240px;
  flex-direction: column;
  gap: var(--space-2);
  /* Frosted panel: a light veil over the blurred hero, not a solid block.
     The tint stays low so the photograph reads through it. */
  background: rgba(30, 28, 24, 0.30);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: var(--space-5) var(--space-5);
}
/* Without backdrop-filter there is nothing to blur, so the veil alone would
   leave the labels unreadable: fall back to an opaque panel. */
@supports not (backdrop-filter: blur(1px)) {
  .nav__menu { background: rgba(30, 28, 24, 0.86); }
}
.nav__menu.is-open { display: flex; }
.nav__menu a {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
  padding: var(--space-2) 0;
  transition: color .2s ease;
}
.nav__menu a:hover { color: var(--white); }

/* Active toggle → X */
.nav__toggle[aria-expanded="true"] span:nth-child(1) { width: 28px; transform: translateY(8px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { width: 28px; transform: translateY(-8px) rotate(-45deg); }

/* ---- Hero content ---- */
.hero__wordmark {
  margin-top: clamp(var(--space-5), 6vh, var(--space-8));
  font-family: var(--font-display);
  font-weight: 700;
  /* Spans the column edge to edge at any width: the wordmark is 6.736x its own
     font size in this face, so 100/6.736 = 14.85cqi fills it exactly.
     Retune this figure if the display family ever changes. */
  font-size: 14.85cqi;
  line-height: 0.95;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;   /* always on one line */
  text-align: center;
}
.hero__tagline {
  margin: auto 0 -8px clamp(-16px, -1vw, -10px);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.4vw, 45px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--white);
}
.hero__tagline strong { font-weight: 600; }

/* ============ AN UNFORGETTABLE AEGEAN ESCAPE ============ */
.escape {
  padding: clamp(56px, 11vh, 140px) clamp(24px, 6.4vw, 97px);
  background: var(--bg);
  overflow: hidden;
}
.escape__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  container-type: inline-size;   /* the sentence is sized against the column, not the window */
}
.escape__title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--heading);
  line-height: 0.98;
  letter-spacing: 0;
}
.escape__title-l1,
.escape__title-l2 {
  display: block;
  /* 140px on a 1440 viewport, scaling down below it */
  font-size: clamp(1.9rem, 9.72vw, 140px);
  white-space: nowrap;
}
.escape__title-l2 { padding-left: 0; }
.escape__title-l2 em {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  padding-right: 0.14em;
}
.escape__lead {
  position: relative;
  z-index: 2;            /* the tail of the sentence sits ON TOP of the villa photo */
  margin: clamp(16px, 2.5vh, 28px) 0 0;
  max-width: 34ch;
  font-family: var(--font-serif);
  /* cqi = 1% of the block width: the line always stays about 52% of the
     content, so the final "e." always lands on the photo */
  font-size: clamp(1rem, 1.85cqi, 28px);
  font-weight: 400;
  color: #333333;
}
.escape__fig { margin: 0; }
.escape__fig img { width: 100%; display: block; }
.escape__fig--detail { margin-top: clamp(32px, 6vh, 72px); }

/* ============ CURATED SPACES FOR ELEVATED LIFESTYLES ============
   Measured off the Figma mockup (1440 frame): 97 side padding, content block
   indented to 280, Oswald title, and a gallery that bleeds off to the right
   with the third photo cropped. */
.spaces {
  padding: clamp(42px, 5.1vw, 74px) clamp(24px, 6.4vw, 97px) clamp(48px, 5.3vw, 76px);
  background: var(--bg);
  overflow: hidden;   /* clips the gallery bleeding off to the right */
}
.spaces__inner { max-width: var(--max-w); margin: 0 auto; }

/* The heading sits ON TOP: the first photo slides behind it */
.spaces__head { position: relative; z-index: 2; }

.spaces__eyebrow {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 2.7vw, 39px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--heading);
}
.spaces__title {
  /* Nudged down on its own: an offset instead of a margin, so the gallery and
     the text below keep their positions. */
  position: relative;
  top: 12px;
  margin: clamp(2px, 0.35vw, 5px) 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.8rem, 9.24vw, 133px);
  line-height: 0.932;
  letter-spacing: -0.005em;   /* Oswald runs slightly wide: this restores the gap to photo 2 */
  text-transform: uppercase;
  color: var(--heading);
}
.spaces__title span { display: block; }

/* Content block: indented relative to the heading (280 − 97 = 183 at 1440).
   Negative margin: in the mockup the photos rise up beside "LIFESTYLES". */
.spaces__body { margin-top: clamp(-23px, -1.6vw, 0px); }

/* ---- Gallery ---- */
.spaces__gallery { position: relative; z-index: 1; }   /* below the heading */
.spaces__track {
  display: flex;
  align-items: flex-end;
  gap: clamp(6px, 1.04vw, 15px);
}
.spaces__slide { flex: 0 0 clamp(180px, 27.8vw, 403px); }
.spaces__slide img {
  width: 100%;
  aspect-ratio: 396 / 530;
  object-fit: cover;
}

.spaces__arrow {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: clamp(56px, 7.85vw, 113px);
  padding: 8px 0;
  color: var(--white);
  opacity: 0.95;
  transition: transform .3s ease, opacity .2s ease;
}
.spaces__arrow svg { width: 100%; height: auto; display: block; overflow: visible; }
.spaces__arrow:hover { opacity: 1; transform: translate(6px, -50%); }
.spaces__arrow:focus-visible { outline: 2px solid var(--white); outline-offset: 6px; }

/* ---- Descriptive copy ---- */
.spaces__lead {
  margin: clamp(36px, 5.5vw, 79px) 0 0;
  max-width: 757px;
  font-family: var(--font-serif);
  font-size: clamp(0.95rem, 1.53vw, 22px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink);
}

/* ---- Feature list ---- */
.spaces__specs {
  margin: clamp(32px, 4.7vw, 68px) 0 0;
  max-width: 640px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(12px, 1.1vw, 16px) var(--space-4);
  font-family: var(--font-ui);
  font-size: clamp(0.75rem, 1.11vw, 16px);
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
}

.spaces__cta { margin-top: clamp(32px, 3.7vw, 53px); }

/* ============ SURROUNDINGS ============
   Measured off the mockup (1440 frame): serif heading on the left and copy on
   the right, both top-aligned, then a band of 3 photos running the full width
   of the page. */
.around {
  padding: clamp(44px, 5.6vw, 80px) clamp(24px, 6.4vw, 97px) clamp(56px, 7vw, 100px);
  background: var(--bg);
  overflow: hidden;
}
.around__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  container-type: inline-size;
}
.around__head { display: grid; }

.around__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4.66cqi, 58px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--heading);
}
.around__lead {
  margin: clamp(16px, 2vw, 26px) 0 0;
  font-family: var(--font-serif);
  /* Playfair runs wide: a smaller size with looser leading keeps the block at
     six lines with the same rhythm */
  font-size: clamp(0.9rem, 1.29cqi, 18px);
  font-weight: 400;
  line-height: 1.9;
  color: var(--ink);
}

/* ---- Full-bleed accordion, no side margins ----
   At rest the photos keep their natural proportions (772×880 for the two
   portraits, 1400×880 for the landscape) and together they fill the page
   exactly. Heights are fixed and equal: hovering changes only the width, so
   the row always stays full and aligned. */
.around__gallery {
  margin: clamp(28px, 3.9vw, 56px) calc(-1 * clamp(24px, 6.4vw, 97px)) 0;
}
.around__strip {
  display: flex;
  gap: clamp(6px, 1.11vw, 16px);
}
.around__item {
  min-width: 0;
  flex: 772 1 0;
  /* long deceleration: the photo eases right down at the end, with no bounce */
  transition: flex-grow .85s cubic-bezier(0.16, 1, 0.3, 1);
}
.around__item--wide { flex-grow: 1400; }   /* at rest the middle one is the open one */

/* Only where a real pointer exists: touch devices keep the rest layout */
@media (hover: hover) and (pointer: fine) {
  .around__strip:hover .around__item { flex-grow: 772; }
  .around__strip:hover .around__item:hover { flex-grow: 1400; }

  /* Unhovered photos step back a shade and their caption dims, so the eye
     goes to the open one on its own. */
  .around__strip:hover .around__item img { filter: saturate(0.82) brightness(0.94); }
  .around__strip:hover .around__item:hover img { filter: none; }
  .around__strip:hover .around__item figcaption { opacity: 0.45; }
  .around__strip:hover .around__item:hover figcaption { opacity: 1; }
}

/* A finger produces no hover, so on a touch screen the same accordion is driven
   by a tap: the script marks the strip and the chosen photo, and these rules
   mirror the pointer ones above. Tapping the open photo clears both classes and
   the strip returns to its rest layout. */
.around__strip.is-tapped .around__item { flex-grow: 772; }
.around__strip.is-tapped .around__item.is-open { flex-grow: 1400; }
.around__strip.is-tapped .around__item img { filter: saturate(0.82) brightness(0.94); }
.around__strip.is-tapped .around__item.is-open img { filter: none; }
.around__strip.is-tapped .around__item figcaption { opacity: 0.45; }
.around__strip.is-tapped .around__item.is-open figcaption { opacity: 1; }

.around__item figure { margin: 0; }
.around__item img {
  width: 100%;
  height: clamp(220px, 29.2vw, 560px);
  object-fit: cover;
  transition: filter .8s ease;
}
.around__item figcaption { transition: opacity .5s ease; }
/* The first photo runs to the very edge of the screen, so its caption would sit
   flush against it. Nudge that one caption in; the others stay flush with their
   own photo, as in the mockup. */
.around__item:first-child figcaption { padding-left: clamp(12px, 1.25vw, 18px); }
.around__item figcaption {
  margin-top: clamp(12px, 1.74vw, 25px);
  font-family: var(--font-ui);
  font-size: clamp(0.75rem, 1.11vw, 16px);
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
}

/* ============ HOST YOUR CELEBRATIONS / VILLA RENTALS ============
   A collage: photos and text overlap at precise positions. From 1024px up the
   positions are percentages inside a fixed-ratio frame (the mockup's
   1440×1512), so it scales without distorting. Below 1024px it stacks. */
.rentals {
  padding: clamp(48px, 6vw, 86px) clamp(24px, 6.4vw, 97px);
  /* Starts on the tone of the band above and fades into its own over the first
     part of the section: two flat colours meeting would draw a visible seam
     right across the page. */
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 42%);
}
.rentals__inner { max-width: var(--max-w); margin: 0 auto; }
.rentals__fig { margin: 0 0 clamp(20px, 3vw, 32px); }
.rentals__fig img { width: 100%; }
.rentals__eyebrow {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 2.7vw, 39px);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  color: var(--heading);
}
.rentals__title {
  margin: clamp(4px, 0.7vw, 10px) 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 9.24vw, 133px);
  line-height: 1;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--heading);
}
.rentals__lead {
  margin: clamp(20px, 2.6vw, 38px) 0 0;
  font-family: var(--font-serif);
  font-size: clamp(0.9rem, 1.12vw, 17px);
  font-weight: 400;
  line-height: 1.89;
  color: var(--ink);
}
.rentals__cta { margin-top: clamp(24px, 2.9vw, 42px); }

/* ============ YOUR VILLA AWAITS / ENQUIRE WITH US ============ */
.contact {
  position: relative;
  padding: 0 clamp(24px, 6.4vw, 97px);
  background: var(--bg-4);
  overflow: hidden;
}
/* Background photo at the top, fading into the section colour below */
.contact__media {
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  pointer-events: none;
}
/* The photo is shown whole, uncropped: 1440 / 1.68 = 857px */
.contact__media img {
  width: 100%;
  aspect-ratio: 3024 / 1800;
  height: auto;
  object-fit: cover;
}
.contact__fade {
  position: absolute;
  inset: auto 0 0;
  height: 34%;
  background: linear-gradient(180deg, rgba(243, 237, 230, 0) 0%, var(--bg-4) 88%);
}
.contact__inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(300px, 49.2vw, 708px) 0 clamp(56px, 11.8vw, 170px);
  container-type: inline-size;
}
.contact__eyebrow {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 3.13cqi, 39px);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  color: var(--heading);
}
.contact__title {
  margin: clamp(4px, 0.7vw, 10px) 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 10.67cqi, 133px);
  line-height: 0.93;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--heading);
}
.contact__title span { display: block; }

/* ---- Form ---- */
.contact__form {
  margin-top: clamp(28px, 3.5vw, 50px);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.7vw, 10px);
}
.contact__row { display: grid; gap: clamp(8px, 1.8vw, 26px); }
.field { position: relative; display: block; }
.field input,
.field select {
  width: 100%;
  height: clamp(48px, 3.96vw, 57px);
  padding: 0 clamp(16px, 1.25vw, 18px);
  border: 0;
  border-radius: 0;
  background: var(--field);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(0.8rem, 1.04vw, 15px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  appearance: none;
}
.field input::placeholder { color: var(--ink-soft); opacity: 1; }
.field select:invalid { color: var(--ink-soft); }
.field input:focus-visible,
.field select:focus-visible { outline: 2px solid var(--heading); outline-offset: -2px; }
.field__chevron {
  position: absolute;
  right: clamp(16px, 1.6vw, 23px);
  top: 50%;
  width: clamp(14px, 1.25vw, 18px);
  transform: translateY(-50%);
  color: var(--ink);
  pointer-events: none;
}
.contact__submit {
  align-self: flex-end;
  margin-top: clamp(12px, 1.5vw, 22px);
  font-size: 16px;
  font-weight: 400;
}
.contact__success {
  margin: var(--space-3) 0 0;
  align-self: flex-end;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--ink);
}

/* ============ FOOTER ============ */
/* One grey for the whole footer: the children inherit it, social icons included
   (their SVGs are drawn with currentColor). */
.footer {
  position: relative;
  z-index: 1;
  padding-bottom: clamp(40px, 5vw, 72px);
  color: #666666;
}
.footer__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  gap: clamp(20px, 2.4vw, 34px);
  align-items: start;
}
.footer__brand {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.94vw, 28px);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
/* Left to itself a grid item stretches across its whole column: the pill is
   only ever as wide as its label. */
.footer__maps { justify-self: start; }
.footer__social { display: flex; gap: clamp(14px, 1.53vw, 22px); }
.footer__social a { display: block; transition: opacity .2s ease; }
.footer__social a:hover { opacity: 0.6; }
.footer__social svg { width: clamp(18px, 1.53vw, 22px); height: auto; display: block; }
.footer__address {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(0.85rem, 1.11vw, 16px);
  font-style: normal;
  line-height: 1.55;
}
.footer__phone {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(0.85rem, 1.11vw, 16px);
  line-height: 1.55;
}
.footer__phone span { display: block; }
.footer__phone a { text-decoration: underline; text-underline-offset: 3px; }

/* ============ REVEAL ON LOAD / SCROLL ============ */
@media (prefers-reduced-motion: no-preference) {
  .anim .nav__toggle,
  .anim .nav__enquire,
  .anim .hero__wordmark,
  .anim .hero__tagline {
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
  }
  /* Sections: elements rise from below on scroll */
  .anim .escape__title,
  .anim .escape__lead,
  .anim .escape__fig,
  .anim .spaces__eyebrow,
  .anim .spaces__title,
  .anim .spaces__gallery,
  .anim .spaces__lead,
  .anim .spaces__specs,
  .anim .spaces__cta,
  .anim .around__title,
  .anim .around__lead,
  .anim .around__item,
  .anim .rentals__fig,
  .anim .rentals__head,
  .anim .rentals__lead,
  .anim .rentals__cta,
  .anim .contact__head,
  .anim .contact__form,
  .anim .footer__inner > * {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity 1s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
  }

  /* Surroundings: the reveal must not wipe out the accordion transition, so
     the width is put back into the list here. */
  .anim .around__item {
    transition: opacity 1s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 1s cubic-bezier(0.22, 0.61, 0.36, 1),
                flex-grow .85s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .anim .is-visible {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Hero: elements enter from the left */
  .anim .nav__toggle,
  .anim .nav__enquire  { transform: translateX(-40px); }
  .anim .hero__wordmark { transform: translateX(-64px); }
  .anim .hero__tagline  { transform: translateX(-48px); }
}

/* ============================
   BREAKPOINTS
   ============================ */

/* Tablet ≥ 768px — Aegean Escape in two columns */
@media (min-width: 768px) {
  .escape__inner {
    display: grid;
    /* minmax(0,…) stops the nowrap heading from inflating the left column and
       squashing the villa. The villa reaches under the tail of the sentence,
       as in the mockup. */
    grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
    column-gap: clamp(30px, 5vw, 70px);
    align-items: start;
  }
  .escape__col {
    display: flex;
    flex-direction: column;
    padding-top: clamp(40px, 7vh, 90px);   /* the villa on the right starts higher up */
  }
  .escape__title { position: relative; z-index: 2; }   /* the heading spills over the image */
  .escape__lead { max-width: none; white-space: nowrap; }   /* a single line */
  .escape__fig--villa {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    z-index: 1;
  }
  .escape__fig--detail {
    width: min(84%, 380px);
    margin-top: clamp(40px, 7vh, 90px);
  }
}

/* Desktop ≥ 1024px */
@media (min-width: 992px) {
  .nav { gap: var(--space-5); }

  /* Surroundings: heading left, copy right, both top-aligned */
  .around__head {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
    align-items: start;
  }
  .around__lead { margin-top: 0; }

  /* Spaces: indented content and features in two columns read vertically
     (col. 1 = pools, col. 2 = amenities) */
  .spaces__body { margin-left: clamp(0px, 12.7vw, 183px); }
  .spaces__specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
  }
}

/* Desktop ≥ 1024px — the villa rentals collage and the two-column enquiry layout */
@media (min-width: 992px) {

  /* ---- Villa Rentals: positions as % of the composition ---- */
  .rentals { padding-left: 0; padding-right: 0; padding-top: 0; padding-bottom: 0; }
  .rentals__inner {
    position: relative;
    max-width: 1600px;
    aspect-ratio: 1440 / 1512;
    container-type: inline-size;   /* type sizes follow the collage, not the window */
  }
  .rentals__inner > * { position: absolute; margin: 0; }
  .rentals__fig--main   { left: 6.11%;  top: 25.00%; width: 43.54%; }
  .rentals__fig--top    { left: 68.47%; top:  2.98%; width: 25.49%; }
  .rentals__fig--bottom { left: 52.22%; top: 56.22%; width: 41.74%; }
  .rentals__head        { left: 35.76%; top: 34.85%; }
  .rentals__lead        { left: 6.39%;  top: 78.20%; width: 38.33%; }
  .rentals__cta         { left: 6.39%;  top: 91.00%; }
  /* the heading sits over the large photo */
  .rentals__head, .rentals__lead, .rentals__cta { z-index: 2; }
  .rentals__title   { font-size: 9.24cqi; }
  .rentals__eyebrow { font-size: 2.70cqi; }
  /* Playfair runs wide: a smaller size with looser leading holds the block to
     five lines */
  .rentals__lead    { font-size: 1.06cqi; line-height: 2; }

  /* ---- Enquire With Us: copy on the left, form on the right ---- */
  .contact__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 47.9%);
    align-items: start;
    column-gap: clamp(30px, 4vw, 58px);
  }
  .contact__form { margin-top: clamp(20px, 2.2vw, 32px); }
  .contact__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  /* ---- Footer on a single row ---- */
  .footer__inner {
    grid-template-columns: auto auto 1fr auto auto;
    align-items: center;
    gap: clamp(24px, 3vw, 44px);
  }
  .footer__address { justify-self: end; text-align: left; }
  .footer__maps { justify-self: center; }
  .footer__phone { justify-self: end; text-align: right; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============ PHONE REFINEMENTS ============
   Touch areas and minimum type sizes. The hit area is grown with a pseudo
   element so nothing moves; only the sizes that fell below 13px are raised. */
@media (max-width: 767.98px) {
  .footer__social a,
  .footer__phone a,
  .footer__logo { position: relative; }
  .footer__social a::after,
  .footer__phone a::after,
  .footer__logo::after {
    content: "";
    position: absolute;
    inset: -11px;
  }
  .nav__toggle { padding: 12px 8px; box-sizing: content-box; }

  /* Header pill: small, and pushed over to the right-hand margin, away from the
     menu button. */
  .nav__enquire {
    position: relative;
    margin-left: auto;
    padding: 9px 16px;
    font-size: 12px;
    letter-spacing: 0.2em;
  }
  /* The pill is now shorter than a finger target, so the hit area is grown with
     a pseudo element instead of padding, which would make it look bigger. */
  .nav__enquire::after {
    content: "";
    position: absolute;
    inset: -5px -4px;
  }

  .spec-list li,
  .features li,
  .spaces__specs li { font-size: 13.5px; }
}