/* ==========================================================================
   Villa Coco d'Amour — site stylesheet
   Palette and typography direction follow BRAND-ASSETS.md.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */

:root {
  /* Core palette (BRAND-ASSETS.md §4) */
  --leaf: #17443e;
  --ivory: #f7f1e7;
  --coral: #d66c5f;
  --seaglass: #78afa5;
  --sand: #d7c2a1;
  --husk: #6e5a49;

  /* Derived tones — all text pairs verified against WCAG 2.2 AA */
  --leaf-deep: #0e2e2a;
  --leaf-soft: #245b53;
  --coral-ink: #a8402f;      /* coral darkened for text-sized use */
  --husk-ink: #5b4839;       /* body copy on ivory */
  --ivory-warm: #fbf7f0;
  --ivory-dim: #ece2d3;
  --sand-line: #e2d3ba;
  --field-border: #96866f;   /* meets 1.4.11 non-text contrast on white and ivory */
  --on-leaf: #f4efe5;
  --on-leaf-dim: #c7d8d3;

  --focus: var(--coral);

  --emblem-watermark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M256 395C190 346 110 275 92 193C79 134 109 82 161 78C204 74 237 102 256 143C275 102 308 74 351 78C403 82 433 134 420 193C402 275 322 346 256 395Z' fill='none' stroke='%23F7F1E7' stroke-width='16' stroke-linecap='round' stroke-linejoin='round'/><path d='M256 381C256 294 254 219 256 143' fill='none' stroke='%23F7F1E7' stroke-width='12' stroke-linecap='round'/><path d='M249 181C208 153 178 132 153 100M248 224C198 204 157 185 118 159M248 268C193 259 150 244 108 220M263 181C304 153 334 132 359 100M264 224C314 204 355 185 394 159M264 268C319 259 362 244 404 220' fill='none' stroke='%23F7F1E7' stroke-width='11' stroke-linecap='round'/><circle cx='256' cy='311' r='21' fill='%23F7F1E7'/></svg>");

  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino,
    "Book Antiqua", Georgia, "Times New Roman", serif;
  --font-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Fluid type scale */
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
  --step-0: clamp(1rem, 0.96rem + 0.20vw, 1.12rem);
  --step-1: clamp(1.20rem, 1.12rem + 0.40vw, 1.44rem);
  --step-2: clamp(1.45rem, 1.30rem + 0.75vw, 1.95rem);
  --step-3: clamp(1.75rem, 1.48rem + 1.35vw, 2.75rem);
  --step-4: clamp(2.10rem, 1.62rem + 2.40vw, 4.00rem);
  --step-5: clamp(2.50rem, 1.70rem + 4.00vw, 5.25rem);

  /* Spacing */
  --sp-1: 0.5rem;
  --sp-2: 0.875rem;
  --sp-3: 1.25rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: clamp(2.75rem, 2rem + 2.8vw, 4.25rem);
  --sp-7: clamp(3.25rem, 2.4rem + 3.8vw, 5.5rem);

  --measure: 62ch;
  --shell: 1240px;
  --gutter: clamp(1.15rem, 0.6rem + 2.6vw, 3.5rem);
  --radius: 2px;
  --radius-lg: 4px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* approved motion easing */
}

/* --- Reset -------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Clears the fixed header (77px) with room to breathe when jumping to an
     anchor, so a heading never lands flush against the header edge. */
  scroll-padding-top: 7rem;
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--husk-ink);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  /* Guards against any single wide child forcing a horizontal scrollbar */
  overflow-x: hidden;
}

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

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  color: var(--leaf);
  font-weight: 400;
  line-height: 1.12;
  text-wrap: balance;
  margin: 0 0 var(--sp-3);
  /* Long French compounds must never push the layout wider than the viewport */
  overflow-wrap: break-word;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }

p { margin: 0 0 var(--sp-3); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--leaf); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { color: var(--coral-ink); }

ul, ol { margin: 0 0 var(--sp-3); padding-inline-start: 1.2em; }
li { margin-bottom: 0.4em; }

hr {
  border: 0;
  border-top: 1px solid var(--sand-line);
  margin: var(--sp-5) 0;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection { background: var(--seaglass); color: var(--leaf-deep); }

/* The skip link moves focus here; it should not draw a ring around the page. */
#main:focus { outline: none; }

/* --- Utilities ---------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell--narrow { max-width: 880px; }

.measure { max-width: var(--measure); }

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

.skip-link {
  position: absolute;
  left: var(--sp-3);
  top: var(--sp-3);
  z-index: 100;
  transform: translateY(-200%);
  background: var(--leaf);
  color: var(--on-leaf);
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus { transform: translateY(0); color: var(--on-leaf); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--husk);
  margin: 0 0 var(--sp-2);
}

.lead {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--husk-ink);
}

/* Small coral dot echoing the emblem's focal point */
.marker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: var(--sp-3);
}
.marker::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--sand-line);
}
.marker::before {
  content: "";
  flex: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--coral);
}

/* --- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.8rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
    border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--leaf); color: var(--on-leaf); }
.btn--primary:hover { background: var(--leaf-deep); color: var(--on-leaf); }

.btn--ghost {
  background: transparent;
  color: var(--leaf);
  border-color: var(--leaf);
}
.btn--ghost:hover { background: var(--leaf); color: var(--on-leaf); }

.btn--on-dark {
  background: var(--ivory);
  color: var(--leaf-deep);
}
.btn--on-dark:hover { background: #fff; color: var(--leaf-deep); }

.btn--ghost-on-dark {
  background: rgba(14, 46, 42, 0.28);
  color: var(--on-leaf);
  border-color: rgba(244, 239, 229, 0.78);
}
.btn--ghost-on-dark:hover { background: rgba(244, 239, 229, 0.12); color: var(--on-leaf); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

/* --- Header ------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ivory);
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 76px;
}

/* Transparent over a hero, solid once scrolled */
.site-header[data-overlay="true"] {
  position: fixed;
  inset: 0 0 auto;
  background: transparent;
}
.site-header[data-overlay="true"] .brand-name,
.site-header[data-overlay="true"] .brand-place,
.site-header[data-overlay="true"] .nav__link,
.site-header[data-overlay="true"] .lang-switch a,
.site-header[data-overlay="true"] .nav-toggle { color: var(--on-leaf); }
.site-header[data-overlay="true"] .brand-mark { color: var(--on-leaf); }
.site-header[data-overlay="true"] .nav-toggle { border-color: rgba(244, 239, 229, 0.5); }

.site-header.is-stuck,
.site-header[data-overlay="true"].is-stuck {
  position: fixed;
  background: var(--ivory);
  border-bottom-color: var(--sand-line);
}
.site-header.is-stuck .brand-name,
.site-header.is-stuck .brand-mark { color: var(--leaf); }
.site-header.is-stuck .brand-place,
.site-header.is-stuck .nav__link,
.site-header.is-stuck .lang-switch a,
.site-header.is-stuck .nav-toggle { color: var(--husk-ink); }
.site-header.is-stuck .nav-toggle { border-color: var(--sand-line); }

.brand {
  display: flex;
  align-items: center;
  flex: none;
  gap: 0.7rem;
  text-decoration: none;
  color: inherit;
  padding: 0.35rem 0;
}
.brand-mark { width: 40px; height: 40px; flex: none; color: var(--leaf); }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name {
  font-family: var(--font-display);
  font-size: 1.16rem;
  color: var(--leaf);
  letter-spacing: 0.01em;
}
.brand-place {
  white-space: nowrap;
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--husk);
  margin-top: 0.16em;
}

@media (max-width: 560px) {
  .brand-place { display: none; }
  .brand-name { font-size: 1rem; }
  .brand-mark { width: 34px; height: 34px; }
  .brand { gap: 0.55rem; }
  .nav-toggle { padding: 0.5rem 0.7rem; letter-spacing: 0.06em; }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  background: transparent;
  border: 1px solid var(--sand-line);
  border-radius: var(--radius);
  color: var(--husk-ink);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.nav-toggle__bars { position: relative; width: 18px; height: 12px; flex: none; }
.nav-toggle__bars::before,
.nav-toggle__bars::after,
.nav-toggle__bars span {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.28s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars span { top: 5.25px; }
.nav-toggle__bars::after { bottom: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(5.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-5.25px) rotate(-45deg); }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.8vw, 1.9rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__list li { flex: none; margin-bottom: 0; }

.nav__link {
  display: inline-block;
  white-space: nowrap;
  padding: 0.4rem 0;
  color: var(--husk-ink);
  text-decoration: none;
  font-size: 0.95rem;
  position: relative;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s var(--ease);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { font-weight: 600; }

.nav__cta { margin-inline-start: 0.4rem; white-space: nowrap; flex: none; }
.site-header[data-overlay="true"]:not(.is-stuck) .nav__cta.btn--primary {
  background: var(--ivory);
  color: var(--leaf-deep);
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
.lang-switch a { color: var(--husk-ink); text-decoration: none; padding: 0.4rem 0.2rem; }
.lang-switch a:hover { text-decoration: underline; }
.lang-switch [aria-current="true"] { color: var(--coral-ink); }
.site-header[data-overlay="true"]:not(.is-stuck) .lang-switch [aria-current="true"] { color: var(--sand); }
.lang-switch__sep { color: var(--sand); }

@media (max-width: 1099px) {
  .nav {
    position: fixed;
    inset: 0;
    display: block;
    background: var(--leaf);
    color: var(--on-leaf);
    padding: 6rem var(--gutter) var(--sp-5);
    overflow-y: auto;
    opacity: 0;
    transform: translateY(-10px);
    /* The closed panel is removed from the tab order with `inert` from script,
       which is deterministic — a transitioned `visibility` is not. */
    pointer-events: none;
    transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
  }
  .nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list li { margin: 0; border-bottom: 1px solid rgba(244, 239, 229, 0.16); }
  .nav__link,
  .site-header[data-overlay="true"] .nav__link,
  .site-header.is-stuck .nav__link {
    display: block;
    padding: 1rem 0;
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--on-leaf);
  }
  .nav__link::after { display: none; }
  .nav__link[aria-current="page"] { color: var(--sand); }
  .nav__cta { margin: var(--sp-4) 0 var(--sp-4); width: 100%; }
  .site-header[data-overlay="true"]:not(.is-stuck) .nav__cta.btn--primary,
  .nav .btn--primary { background: var(--ivory); color: var(--leaf-deep); }
  .nav .lang-switch,
  .site-header[data-overlay="true"] .nav .lang-switch a,
  .site-header.is-stuck .nav .lang-switch a { color: var(--on-leaf); }
  .nav .lang-switch { justify-content: flex-start; }
  .nav .lang-switch [aria-current="true"] { color: var(--sand); }
  /* Toggle must sit above the panel */
  .nav-toggle { position: relative; z-index: 60; }
  .site-header.nav-open .nav-toggle,
  .site-header[data-overlay="true"].nav-open .nav-toggle {
    color: var(--on-leaf);
    border-color: rgba(244, 239, 229, 0.5);
  }
  body.nav-open { overflow: hidden; }
}

@media (min-width: 1100px) {
  .nav-toggle { display: none; }
  .nav { opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
}

/* --- Hero --------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(92svh, 820px);
  padding: 9rem 0 var(--sp-6);
  background: var(--leaf-deep);
  color: var(--on-leaf);
  isolation: isolate;
  overflow: hidden;
}
.hero--compact { min-height: min(58svh, 520px); padding-top: 8.5rem; }

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
/* <picture> is inline by default, which would collapse the img's height:100%. */
.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Layered field used until a real photograph is supplied */
.hero__media--pending {
  background:
    radial-gradient(115% 85% at 78% 12%, rgba(120, 175, 165, 0.5), transparent 62%),
    radial-gradient(85% 70% at 12% 88%, rgba(214, 108, 95, 0.26), transparent 60%),
    linear-gradient(168deg, #1c5049 0%, var(--leaf) 42%, var(--leaf-deep) 100%);
}
.hero__media--pending::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--emblem-watermark);
  background-repeat: no-repeat;
  background-position: 92% 18%;
  background-size: min(46vw, 420px);
  opacity: 0.09;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Held high across the whole text band, then released so the roofline and
     sky still read. Measured against the hero photograph, not guessed:
     see the contrast note in README.md. */
  background: linear-gradient(
    to top,
    rgba(14, 46, 42, 0.95) 0%,
    rgba(14, 46, 42, 0.90) 62%,
    rgba(14, 46, 42, 0.46) 88%,
    rgba(14, 46, 42, 0.46) 100%
  );
}

.hero__inner { position: relative; width: 100%; }
.hero h1 { color: var(--on-leaf); font-size: var(--step-5); margin-bottom: var(--sp-3); }
.hero .eyebrow { color: var(--sand); }
.hero .lead { color: var(--on-leaf-dim); max-width: 46ch; }
.hero__content { max-width: 40rem; }

/* The hero sits on Coconut Leaf, so the primary button inverts to stay visible. */
.hero .btn--primary { background: var(--ivory); color: var(--leaf-deep); }
.hero .btn--primary:hover { background: #fff; color: var(--leaf-deep); }

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sp-4);
  list-style: none;
  margin: var(--sp-5) 0 0;
  padding: var(--sp-3) 0 0;
  border-top: 1px solid rgba(244, 239, 229, 0.24);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-leaf-dim);
}
.hero__facts li { margin: 0.25rem 0; }

/* --- Sections ----------------------------------------------------------- */

.section { padding: var(--sp-7) 0; }
.section--tight { padding: var(--sp-6) 0; }
.section--leaf {
  background: var(--leaf);
  color: var(--on-leaf);
}
.section--leaf h2,
.section--leaf h3 { color: var(--on-leaf); }
.section--leaf .eyebrow { color: var(--sand); }
.section--leaf .lead { color: var(--on-leaf-dim); }
/* Buttons carry their own colours — a blanket link colour here silently
   overrode .btn--on-dark and rendered ivory text on an ivory button. */
.section--leaf a:not(.btn) { color: var(--on-leaf); }
.section--leaf .marker::after { background: rgba(244, 239, 229, 0.28); }
.section--warm { background: var(--ivory-dim); }

.section__head { max-width: 46rem; margin-bottom: var(--sp-4); }

/* Editorial two-column split */
.split {
  display: grid;
  gap: var(--sp-5);
  align-items: center;
}
@media (min-width: 860px) {
  .split { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); }
  .split--wide-text { grid-template-columns: 1.15fr 0.85fr; }
  .split--reverse .split__media { order: -1; }
  .split__media--offset { margin-block: calc(-1 * var(--sp-4)); }
}

/* --- Photographs and pending slots -------------------------------------- */

.photo {
  margin: 0;
  position: relative;
}
/* Photographs keep their natural proportions — nothing is cropped or stretched
   except the hero, which sets object-fit inline because it must cover. */
.photo img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  background: var(--ivory-dim);
}
.photo picture { display: block; }
.photo figcaption {
  margin-top: 0.7rem;
  font-size: var(--step--1);
  line-height: 1.45;
  color: var(--husk);
}
.section--leaf .photo figcaption { color: var(--on-leaf-dim); }

/* Honest placeholder: never dressed up as a real photograph */
.photo--pending .photo__frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  width: 100%;
  aspect-ratio: var(--ratio, 4 / 3);
  padding: var(--sp-3);
  text-align: center;
  border: 1px dashed var(--sand);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(150deg, rgba(120, 175, 165, 0.14), rgba(215, 194, 161, 0.16));
  color: var(--husk);
}
.photo--pending .photo__emblem { width: 44px; height: 44px; opacity: 0.6; }
.photo__label {
  font-family: var(--font-display);
  font-size: var(--step-0);
  color: var(--leaf);
  line-height: 1.3;
  max-width: 22ch;
}
.photo__note {
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--husk);
}
.section--leaf .photo--pending .photo__frame {
  border-color: rgba(244, 239, 229, 0.4);
  background: rgba(244, 239, 229, 0.07);
  color: var(--on-leaf-dim);
}
.section--leaf .photo__label { color: var(--on-leaf); }
.section--leaf .photo__note { color: var(--on-leaf-dim); }

/* --- The house plan ----------------------------------------------------- */

.plan {
  display: grid;
  gap: var(--sp-4);
}
@media (min-width: 780px) {
  .plan { grid-template-columns: minmax(260px, 0.85fr) 1fr; gap: var(--sp-5); align-items: center; }
}
.plan__figure {
  margin: 0;
  padding: var(--sp-4);
  background: var(--ivory-warm);
  border: 1px solid var(--sand-line);
  border-radius: var(--radius-lg);
}
.section--leaf .plan__figure {
  background: rgba(244, 239, 229, 0.06);
  border-color: rgba(244, 239, 229, 0.22);
}

.levels { display: grid; gap: var(--sp-3); list-style: none; margin: 0; padding: 0; }
.level {
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--sand-line);
}
.section--leaf .level { border-top-color: rgba(244, 239, 229, 0.24); }
.level:first-child { border-top: 0; padding-top: 0; }
.level__name {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral-ink);
  margin: 0 0 0.4rem;
}
.section--leaf .level__name { color: var(--sand); }
.level h3 { margin-bottom: 0.35rem; }
.level p { margin: 0; }


.plan__svg {
  width: 100%;
  max-width: 300px;
  height: auto;
  margin-inline: auto;
  display: block;
}
.plan__figure figcaption { margin-top: var(--sp-2); }
.gallery-item > picture,
.gallery-item > img { display: block; width: 100%; }
.gallery-item:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* --- Feature / detail lists --------------------------------------------- */

.stack-list { list-style: none; margin: 0; padding: 0; }
.stack-list li {
  position: relative;
  padding: var(--sp-3) 0 var(--sp-3) 1.9rem;
  margin: 0;
  border-bottom: 1px solid var(--sand-line);
}
.stack-list li::before {
  content: "";
  position: absolute;
  left: 0; top: calc(var(--sp-3) + 0.62em);
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--seaglass);
}
.stack-list li:first-child { padding-top: 0; }
.stack-list li:first-child::before { top: 0.62em; }
.stack-list li:last-child { border-bottom: 0; }
.section--leaf .stack-list li { border-bottom-color: rgba(244, 239, 229, 0.22); }
.stack-list strong { color: var(--leaf); font-weight: 600; }
.section--leaf .stack-list strong { color: var(--on-leaf); }

/* --- Numbered steps ------------------------------------------------------ */

.steps-list {
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
}
@media (min-width: 820px) {
  .steps-list { grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 3.5rem); }
}
.steps-list li {
  counter-increment: step;
  margin: 0;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--sand-line);
}
.steps-list li::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  margin-bottom: var(--sp-2);
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1;
  color: var(--leaf);
  border: 1px solid var(--sand);
  border-radius: 50%;
}
.steps-list strong {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-1);
  line-height: 1.2;
  color: var(--leaf);
}
.steps-list p { margin: 0; }
.section--leaf .steps-list li { border-top-color: rgba(244, 239, 229, 0.24); }
.section--leaf .steps-list li::before,
.section--leaf .steps-list strong { color: var(--on-leaf); }

/* --- Feature composition and closing band -------------------------------- */

.feature { display: grid; gap: var(--sp-4); }
@media (min-width: 900px) {
  .feature {
    grid-template-columns: 1.3fr 1fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
  }
  .feature__body { display: grid; gap: var(--sp-3); align-content: center; }
}
.feature__lead h2 { margin-bottom: 0; }
.feature__copy p:last-of-type { margin-bottom: 0; }

.cta-band { display: grid; gap: var(--sp-3); }
@media (min-width: 820px) {
  .cta-band {
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
  }
}
.cta-band h2 { margin-bottom: 0; }
.cta-band .btn-row { margin-top: var(--sp-3); }

/* --- Gallery ------------------------------------------------------------ */

/* Columns rather than a rigid grid, so portrait and landscape frames sit
   together without either being cropped. */
.gallery-grid {
  columns: 1;
  column-gap: var(--sp-3);
}
@media (min-width: 560px) { .gallery-grid { columns: 2; } }
@media (min-width: 1000px) { .gallery-grid { columns: 3; } }
.gallery-grid .photo {
  break-inside: avoid;
  margin: 0 0 var(--sp-3);
}
.gallery-grid .photo--pending .photo__frame { aspect-ratio: var(--ratio, 4 / 3); }
.gallery-item { position: relative; padding: 0; border: 0; background: none; width: 100%; cursor: zoom-in; }

/* Feature strip on the home page */
.strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--sp-3);
  align-items: start;
}

/* --- Lightbox ----------------------------------------------------------- */

.lightbox {
  border: 0;
  padding: 0;
  width: min(96vw, 1100px);
  max-width: 96vw;
  max-height: 94svh;
  background: transparent;
  color: var(--on-leaf);
  overflow: visible;
}
.lightbox::backdrop { background: rgba(14, 46, 42, 0.94); }
.lightbox__inner { position: relative; }
.lightbox img { width: 100%; max-height: 82svh; object-fit: contain; border-radius: var(--radius-lg); }
.lightbox__caption { margin-top: 0.8rem; font-size: var(--step--1); color: var(--on-leaf-dim); text-align: center; }
.lightbox__close,
.lightbox__nav {
  position: absolute;
  min-width: 48px; min-height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(14, 46, 42, 0.72);
  color: var(--on-leaf);
  border: 1px solid rgba(244, 239, 229, 0.4);
  border-radius: 50%;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox__close { top: -0.6rem; right: -0.6rem; }
.lightbox__nav--prev { left: 0.5rem; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 0.5rem; top: 50%; transform: translateY(-50%); }
.lightbox__close:hover,
.lightbox__nav:hover { background: var(--coral); border-color: var(--coral); }

/* --- Locator ------------------------------------------------------------ */

.locator {
  display: grid;
  gap: 0;
  border: 1px solid var(--sand-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ivory-warm);
}
@media (min-width: 720px) { .locator { grid-template-columns: repeat(3, 1fr); } }
.locator__step {
  padding: var(--sp-4);
  border-top: 1px solid var(--sand-line);
}
.locator__step:first-child { border-top: 0; }
@media (min-width: 720px) {
  .locator__step { border-top: 0; border-left: 1px solid var(--sand-line); }
  .locator__step:first-child { border-left: 0; }
}
.locator__step--here { background: var(--leaf); color: var(--on-leaf); }
.locator__step--here .locator__name { color: var(--on-leaf); }
.locator__step--here .locator__kind { color: var(--sand); }
.locator__kind {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--husk);
  margin: 0 0 0.4rem;
}
.locator__name { font-family: var(--font-display); font-size: var(--step-2); color: var(--leaf); margin: 0 0 0.3rem; }
.locator__step p:last-child { font-size: var(--step--1); margin: 0; }

/* --- Booking channels --------------------------------------------------- */

.channels {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.channel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--ivory-warm);
  border: 1px solid var(--sand-line);
  border-radius: var(--radius-lg);
}
.channel--primary { background: var(--leaf); border-color: var(--leaf); color: var(--on-leaf); }
.channel--primary h3 { color: var(--on-leaf); }
.channel--primary .channel__meta { color: var(--on-leaf-dim); }
.channel h3 { margin: 0; }
.channel p { margin: 0; }
.channel__meta { font-size: var(--step--1); color: var(--husk); }
.channel .btn { margin-top: auto; align-self: flex-start; }
.channel__link {
  font-family: var(--font-display);
  /* Sized so a full email address fits a three-column card without breaking. */
  font-size: var(--step-0);
  line-height: 1.35;
  color: var(--leaf);
  text-decoration: none;
  /* `word-break: break-word` split "gmail.com" mid-word. Only break when a
     single token genuinely cannot fit. */
  word-break: normal;
  overflow-wrap: break-word;
}
.channel__link--lg { font-size: var(--step-1); }
.channel__link:hover { text-decoration: underline; }

.external-note {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--step--1);
  color: var(--husk);
}
/* Global `svg { display:block }` would push these onto their own line. */
.external-icon {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  flex: none;
  vertical-align: -0.05em;
  margin-inline-start: 0.15em;
  opacity: 0.75;
}
.btn .external-icon { margin-inline-start: 0; opacity: 1; }

/* --- WhatsApp disclosure, policy pages and address ----------------------- */

.whatsapp-note {
  margin-top: var(--sp-2);
  font-size: var(--step--1);
  color: var(--husk);
  max-width: 46ch;
}
.section--leaf .whatsapp-note { color: var(--on-leaf-dim); }
.whatsapp-note a { color: inherit; }

.policy-links {
  list-style: none;
  margin: var(--sp-3) 0 0;
  padding: var(--sp-3) 0 0;
  border-top: 1px solid var(--sand-line);
}
.section--leaf .policy-links { border-top-color: rgba(244, 239, 229, 0.24); }
.policy-links li { margin-bottom: 0.4rem; }

.policy-updated {
  margin-top: var(--sp-3);
  font-size: var(--step--1);
  color: var(--husk);
}
.section--leaf .policy-updated { color: var(--on-leaf-dim); }

.address-block {
  margin-top: var(--sp-3);
  font-style: normal;
  line-height: 1.7;
  color: var(--leaf);
  font-family: var(--font-display);
  font-size: var(--step-1);
}
.section--leaf .address-block { color: var(--on-leaf); }

.footer-address {
  font-style: normal;
  line-height: 1.6;
  color: var(--on-leaf-dim);
  margin-top: 0.35rem;
}

/* --- Notice / disclosure ------------------------------------------------ */

.notice {
  padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--seaglass);
  background: rgba(120, 175, 165, 0.12);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--step-0);
}
.notice--draft { border-left-color: var(--coral); background: rgba(214, 108, 95, 0.10); }
.notice h2, .notice h3 { margin-top: 0; }
.section--leaf .notice { background: rgba(244, 239, 229, 0.08); border-left-color: var(--sand); }

/* --- Footer ------------------------------------------------------------- */

.site-footer {
  background: var(--leaf-deep);
  color: var(--on-leaf-dim);
  padding: var(--sp-6) 0 var(--sp-4);
  font-size: 0.95rem;
}
.site-footer h2, .site-footer h3 { color: var(--on-leaf); }
.site-footer a:not(.btn) { color: var(--on-leaf); text-decoration-color: rgba(244, 239, 229, 0.45); }
.site-footer a:not(.btn):hover { color: var(--sand); }

.footer-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid rgba(244, 239, 229, 0.18);
}
.footer-logo { width: min(240px, 80%); height: auto; margin-bottom: var(--sp-3); }
.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li { margin-bottom: 0.55rem; }
.footer-title {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sand);
  margin: 0 0 var(--sp-3);
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--sp-4);
  font-size: 0.85rem;
  color: var(--on-leaf-dim);
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: var(--sp-3); list-style: none; margin: 0; padding: 0; }
.footer-bottom li { margin: 0; }

/* --- Motion --------------------------------------------------------------
   Everything is visible by default. The `anim` class is added by a small
   inline script in the head, and only when motion is allowed and
   IntersectionObserver exists — so nothing here can hide content on a browser
   that cannot bring it back. A failsafe in that script removes the class if
   the main script never boots.
   Only opacity, transform and a simple inset clip-path are animated.
   ------------------------------------------------------------------------ */

@keyframes villa-mask-reveal {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes villa-settle {
  from { transform: scale(1.06); }
  to { transform: scale(1); }
}
@keyframes villa-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes villa-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* Hero arrival ------------------------------------------------------------ */

.anim .hero__media {
  animation: villa-mask-reveal 820ms var(--ease-out) both;
  will-change: clip-path;
}
.anim .hero__media img {
  animation: villa-settle 1500ms var(--ease-out) both;
  will-change: transform;
}
.anim .hero__scrim {
  animation: villa-fade 620ms var(--ease-out) 640ms both;
}
.anim .hero__content > *,
.anim .hero__facts {
  animation: villa-rise 660ms var(--ease-out) both;
}
.anim .hero__content > .eyebrow { animation-delay: 780ms; }
.anim .hero__content > h1 { animation-delay: 900ms; }
.anim .hero__content > .lead { animation-delay: 1020ms; }
.anim .hero__content > .btn-row { animation-delay: 1140ms; }
.anim .hero__facts { animation-delay: 1260ms; }

/* Once the arrival has played, drop the hints so nothing stays promoted. */
.anim .hero.is-settled .hero__media,
.anim .hero.is-settled .hero__media img { will-change: auto; }

/* Section reveals --------------------------------------------------------- */

.anim .reveal {
  opacity: 0;
  transform: translateY(16px);
}
.anim .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 680ms var(--ease-out), transform 680ms var(--ease-out);
}

/* Photography ------------------------------------------------------------- */

.gallery-item {
  overflow: hidden;
  border-radius: var(--radius-lg);
  display: block;
}
.gallery-item img { transition: transform 520ms var(--ease-out); }
@media (hover: hover) {
  .gallery-item:hover img { transform: scale(1.02); }
}
.gallery-item:focus-visible img { transform: scale(1.02); }

/* Lightbox crossfade ------------------------------------------------------ */

.lightbox__image { transition: opacity 200ms linear; }
.lightbox__image.is-swapping { opacity: 0; }
body.lightbox-open { overflow: hidden; }

@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;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .gallery-item img { transition: none; }
  .gallery-item:hover img,
  .gallery-item:focus-visible img { transform: none; }
  .btn:hover { transform: none; }
}

/* --- Print -------------------------------------------------------------- */

/* Belt and braces: if scripting degrades, nothing stays invisible. */
.js-degraded .reveal,
html:not(.anim) .reveal { opacity: 1 !important; transform: none !important; }

@media print {
  .reveal { opacity: 1 !important; transform: none !important; }
  .site-header, .nav, .btn-row, .lightbox { display: none !important; }
  body { background: #fff; color: #000; }
  .section--leaf, .site-footer { background: #fff !important; color: #000 !important; }
}