/* ==========================================================================
   Villa Pergia: Salt & Limestone
   Tokens first, then components grouped by section. Every colour, space and
   radius below is a custom property. Do not paste hex values into components.
   Breakpoints are 480 / 768 / 1024 and nothing else.
   ========================================================================== */

:root {
  /* Ground: warm limestone, the colour of the villa walls in sun */
  --sand-50:  #FBF8F3;
  --sand-100: #F3EDE3;
  --sand-200: #E4DACB;
  --sand-300: #D2C4AF;

  /* Type: near black with a faint olive cast */
  --ink-900: #1B211F;
  --ink-700: #39433F;
  --ink-500: #5A6663;
  --ink-300: #8A9591;

  /* Action: deep Aegean. The only accent that carries interaction. */
  --sea-800: #0E5561;
  --sea-600: #12707E;
  --sea-400: #4BA8B5;
  --sea-100: #DFEDEF;

  /* Reserved for peak season and nothing else */
  --clay-600: #A24A2E;
  --clay-100: #F6E7E0;

  --white: #FFFFFF;

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

  --radius-s: 4px;
  --radius-m: 10px;

  --lift: 0 1px 2px rgba(27, 33, 31, .04), 0 12px 32px -16px rgba(27, 33, 31, .18);

  --display: "Cormorant Garamond", "Iowan Old Style", Charter, Palatino, Georgia, serif;
  --body: "Work Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, Helvetica, Arial, sans-serif;

  --container: 1200px;
  --measure: 68ch;

  --ease: 180ms ease-out;
  --header-h: 76px;
}

/* --------------------------------------------------------------------------
   Reset and base
   -------------------------------------------------------------------------- */

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

* { margin: 0; padding: 0; }

/* No font-size override on html. Setting it breaks the browser font-size
   preference for anyone who has changed it. */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
}

body {
  background: var(--sand-50);
  color: var(--ink-900);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Nothing should ever scroll the page sideways. Causes are fixed at source,
     this is the backstop. */
  overflow-x: hidden;
}

body.nav-locked { overflow: hidden; }

img, picture, video, iframe { max-width: 100%; display: block; }

/* Icons are an inline SVG sprite, not a webfont. Font Awesome was roughly
   230KB of script and webfonts to deliver six glyphs. */
.icon-sprite { display: none; }
.icon {
  width: 1em;
  height: 1em;
  flex: none;
  vertical-align: -.125em;
  fill: none;
  stroke: currentColor;
}
img { height: auto; }

ul, ol { list-style: none; }

/* Underlined by default. A link inside a paragraph that differs from the
   surrounding text only by colour fails WCAG 1.4.1, and ours differed by
   1.2:1. Components that are unambiguously interactive opt out below. */
a {
  color: var(--sea-800);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover { text-decoration-thickness: 2px; }

.brand, .nav__link, .btn, .skip-link,
.footer-links a, .footer-social a,
.gallery-item, .area-card { text-decoration: none; }
.brand:hover, .nav__link:hover, .btn:hover, .skip-link:hover,
.footer-links a:hover, .footer-social a:hover { text-decoration: none; }

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

:focus-visible {
  outline: 2px solid var(--sea-600);
  outline-offset: 3px;
  border-radius: var(--radius-s);
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

h1, h2, .display {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.02em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); }

h3 {
  font-family: var(--body);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.35;
  letter-spacing: -.005em;
}

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

.eyebrow {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--sea-600);
}

.lede {
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  color: var(--ink-500);
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.section { padding-block: var(--space-7); }
.section--tint { background: var(--sand-100); }

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  max-width: var(--measure);
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 200;
  background: var(--sea-800);
  color: var(--white);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-s);
  transition: top var(--ease);
}
.skip-link:focus { top: var(--space-4); text-decoration: none; }

/* --------------------------------------------------------------------------
   Header and navigation
   -------------------------------------------------------------------------- */

/* Solid is the default. Transparency is opt-in via .site-header--overlay, and
   only on a page whose header sits over a photograph. Defaulting the other way
   round meant that if anything removed .is-stuck, every page rendered white
   type on a cream ground. */
/* Deliberately no backdrop-filter. It creates a containing block for
   fixed-position descendants, which re-anchors the off-canvas nav panel to the
   header instead of the viewport and makes the closed panel widen the page.
   The ground is opaque anyway, so the blur bought nothing. */
.site-header {
  position: sticky;
  top: 0;
  /* Above the nav panel and its scrim, both of which are set in the 900px
     block below. The toggle lives in here, so if the header sinks under the
     scrim the button becomes untappable while the menu is open and there is
     no way to close it. Layer order: header 120 > nav 110 > scrim 105. */
  z-index: 120;
  background: var(--sand-50);
  border-bottom: 1px solid var(--sand-200);
  transition: background-color var(--ease), border-color var(--ease), box-shadow var(--ease);
}

.site-header--overlay:not(.is-stuck) {
  background: transparent;
  border-bottom-color: transparent;
}

.site-header__inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.brand {
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink-900);
  white-space: nowrap;
}
.brand:hover { text-decoration: none; }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--ink-900);
}
.nav-toggle .icon { width: 1.5rem; height: 1.5rem; }

/* Over the hero photograph only */
.site-header--overlay:not(.is-stuck) .brand,
.site-header--overlay:not(.is-stuck) .nav-toggle { color: var(--white); }

/* While the menu is open the header sits above the scrim, so the close icon
   would be white on a dimmed ground. Give the bar its solid treatment. */
body.nav-locked .site-header {
  background: var(--sand-50);
  border-bottom-color: var(--sand-200);
}
body.nav-locked .site-header .brand,
body.nav-locked .site-header .nav-toggle { color: var(--ink-900); }

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.nav__link {
  position: relative;
  color: var(--ink-700);
  font-size: .95rem;
  font-weight: 500;
  padding-block: var(--space-3);
}
.site-header--overlay:not(.is-stuck) .nav__link {
  color: var(--white);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}
.nav__link:hover { text-decoration: none; }

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ease);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav-scrim { display: none; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding-inline: var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background-color var(--ease), border-color var(--ease), color var(--ease);
}
.btn:hover { text-decoration: none; }

.btn--primary { background: var(--sea-600); color: var(--white); }
.btn--primary:hover { background: var(--sea-800); color: var(--white); }

.btn--ghost {
  background: rgba(255, 255, 255, .12);
  color: var(--white);
  border-color: rgba(255, 255, 255, .55);
  backdrop-filter: blur(4px);
}
.btn--ghost:hover { background: rgba(255, 255, 255, .24); color: var(--white); }

.btn--outline { background: transparent; color: var(--ink-900); border-color: var(--sand-300); }
.btn--outline:hover { border-color: var(--sea-600); color: var(--sea-800); }

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

.hero {
  position: relative;
  /* svh, not vh. vh includes mobile browser chrome that later collapses,
     which makes the hero jump on scroll. */
  min-height: min(88svh, 880px);
  margin-top: calc(var(--header-h) * -1);
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(14, 32, 36, .88) 0%,
    rgba(14, 32, 36, .45) 40%,
    rgba(14, 32, 36, .10) 72%,
    rgba(14, 32, 36, .28) 100%
  );
}

.hero__inner {
  padding-block: var(--space-8) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 40rem;
}

.hero .eyebrow { color: #9FD8DC; }
.hero h1 { color: var(--white); }
.hero p { color: rgba(255, 255, 255, .92); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* --------------------------------------------------------------------------
   Feature grid: replaces the old float based .responsive columns
   -------------------------------------------------------------------------- */

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
}

.feature {
  background: var(--white);
  border: 1px solid var(--sand-200);
  border-radius: var(--radius-m);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Lift, never scale. Scaling a grid item overlaps its neighbours. */
  transition: border-color var(--ease), transform var(--ease), box-shadow var(--ease);
}
.feature:hover {
  border-color: var(--sea-400);
  transform: translateY(-2px);
  box-shadow: var(--lift);
}

.feature__media { aspect-ratio: 4 / 3; overflow: hidden; }
/* <picture> sits between the ratio box and the img. It has no height of its
   own, so height:100% on the img has nothing to resolve against and the image
   falls back to its intrinsic ratio. Give the picture the box's height. */
.feature__media picture { display: block; width: 100%; height: 100%; }
.feature__media img { width: 100%; height: 100%; object-fit: cover; }

.feature__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.feature__body p { font-size: .94rem; color: var(--ink-500); }

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */

.prices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
}

.price-card {
  background: var(--white);
  border: 1px solid var(--sand-200);
  border-radius: var(--radius-m);
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: border-color var(--ease), transform var(--ease), box-shadow var(--ease);
}
.price-card:hover {
  border-color: var(--sea-400);
  transform: translateY(-2px);
  box-shadow: var(--lift);
}
.price-card--peak { background: var(--sea-100); border-color: var(--sea-400); }

.price-card__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.price-card__top h3 {
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: -.01em;
}

.tag {
  font-size: .66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .11em;
  background: var(--clay-100);
  color: var(--clay-600);
  padding: var(--space-1) var(--space-2);
  border-radius: 3px;
  white-space: nowrap;
}

.price-card__amount { display: flex; align-items: baseline; gap: var(--space-1); }
.price-card__amount b {
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.price-card__amount span { font-size: .875rem; color: var(--ink-500); }

.price-card ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: .94rem;
  color: var(--ink-700);
}
.price-card li { display: flex; gap: var(--space-2); align-items: flex-start; }
.price-card li .icon { color: var(--sea-600); margin-top: .3em; }

.price-card .btn { margin-top: auto; }

/* --------------------------------------------------------------------------
   Map
   -------------------------------------------------------------------------- */

/* The iframe used to carry width="600", which forced the whole page to scroll
   sideways on any phone. */
.map-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  /* Without a cap this is over 700px tall on a wide screen, which is more map
     than anyone needs and pushes the footer a long way down. */
  max-height: 480px;
  border-radius: var(--radius-m);
  overflow: hidden;
  border: 1px solid var(--sand-200);
}
.map-frame iframe { width: 100%; height: 100%; border: 0; }

/* Click to load. The Google Maps embed pulls roughly 1.6MB of JavaScript and
   sets its own cookies, neither of which should happen on every page load. */
.map-facade {
  width: 100%;
  height: 100%;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  background:
    linear-gradient(rgba(14, 85, 97, .55), rgba(14, 85, 97, .55)),
    repeating-linear-gradient(45deg, var(--sand-100) 0 14px, var(--sand-200) 14px 28px);
  color: var(--white);
  transition: background-color var(--ease);
}
.map-facade__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; padding: var(--space-5); }
.map-facade .icon { width: 2rem; height: 2rem; }
.map-facade__label { font-weight: 600; font-size: 1.05rem; }
.map-facade__note { font-size: .85rem; opacity: .85; }
.map-facade:hover .map-facade__label { text-decoration: underline; text-underline-offset: 3px; }

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

.site-footer {
  background: var(--sea-800);
  color: var(--sand-100);
  padding-block: var(--space-8) var(--space-6);
  margin-top: var(--space-9);
}

.site-footer a { color: var(--sand-100); }
.site-footer h2 {
  color: var(--white);
  font-family: var(--body);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -.005em;
  margin-bottom: var(--space-3);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.footer-links { display: flex; flex-direction: column; gap: var(--space-2); }

.footer-social { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.footer-social .icon { width: 1.15rem; height: 1.15rem; }
.footer-social a {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--radius-s);
  transition: background-color var(--ease), border-color var(--ease);
}
.footer-social a:hover { background: rgba(255, 255, 255, .12); border-color: var(--white); }

.footer-bottom {
  padding-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  justify-content: space-between;
  font-size: .86rem;
  color: rgba(255, 255, 255, .72);
}

/* --------------------------------------------------------------------------
   Area page: tap accessible cards
   -------------------------------------------------------------------------- */

/* Previously these flipped on :hover only, so on a touch device the back of
   the card, which held all the text, was unreachable. Now a button. */
.area-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
}

.area-card {
  position: relative;
  /* 4:3 rather than square. Most of these are 4:3 landscape originals, so a
     square crop threw away a third of the frame, usually the sea. */
  aspect-ratio: 4 / 3;
  border: 0;
  padding: 0;
  background: none;
  border-radius: var(--radius-m);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  color: var(--white);
}

.area-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* These are coastal shots with a low horizon. Centring the crop lands on
     empty sky, so bias it downwards. */
  object-position: center 60%;
  transition: transform 400ms ease-out;
}
.area-card:hover img { transform: scale(1.05); }

.area-card__body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-1);
  padding: var(--space-4);
  background: linear-gradient(to top, rgba(14, 32, 36, .9) 0%, rgba(14, 32, 36, .35) 55%, transparent 100%);
}

.area-card__title {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.15;
}

.area-card__text {
  font-size: .9rem;
  color: rgba(255, 255, 255, .9);
  max-width: none;
  /* Collapsed by default, expanded on hover or when tapped open */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.area-card:hover .area-card__text,
.area-card[aria-expanded="true"] .area-card__text { -webkit-line-clamp: 6; }

/* --------------------------------------------------------------------------
   Amenities
   -------------------------------------------------------------------------- */

.amenity-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}

.amenity-group {
  background: var(--white);
  border: 1px solid var(--sand-200);
  border-radius: var(--radius-m);
  padding: var(--space-5);
}
.amenity-group h3 { margin-bottom: var(--space-3); }

.amenity-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.amenity {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--sand-50);
  border: 1px solid var(--sand-200);
  border-radius: 999px;
  padding: 6px var(--space-3);
  font-size: .875rem;
  color: var(--ink-700);
}
.amenity .icon { color: var(--sea-600); width: .85em; height: .85em; }

.rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-4); }
.rule {
  background: var(--white);
  border: 1px solid var(--sand-200);
  border-left: 3px solid var(--sea-600);
  border-radius: var(--radius-m);
  padding: var(--space-4) var(--space-5);
}
.rule h3 { margin-bottom: var(--space-1); }
.rule p { font-size: .94rem; color: var(--ink-500); }

/* --------------------------------------------------------------------------
   Gallery and lightbox
   -------------------------------------------------------------------------- */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-3);
}

.gallery-item {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--sand-200);
  border-radius: var(--radius-m);
  overflow: hidden;
  padding: 0;
  background: var(--sand-100);
  cursor: zoom-in;
  display: block;
  width: 100%;
}
.gallery-item picture { display: block; width: 100%; height: 100%; }
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease-out;
}
.gallery-item:hover img { transform: scale(1.06); }

.lightbox {
  border: 0;
  padding: 0;
  max-width: 100vw;
  max-height: 100vh;
  width: 100%;
  height: 100%;
  background: transparent;
  overflow: hidden;
}
.lightbox::backdrop { background: rgba(12, 16, 15, .94); }

.lightbox__figure {
  height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
}

.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  margin-inline: auto;
  object-fit: contain;
  border-radius: var(--radius-s);
}

.lightbox__caption {
  color: var(--sand-100);
  text-align: center;
  font-size: .9rem;
  padding-bottom: var(--space-5);
}

.lightbox__btn {
  position: absolute;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .55);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color var(--ease);
}
.lightbox__btn .icon { width: 1.25rem; height: 1.25rem; }
.lightbox__btn:hover { background: rgba(0, 0, 0, .8); }

/* Kept visible on mobile. Previously display:none below 768px, which left no
   way at all to move between images on a phone. */
.lightbox__prev { left: var(--space-3); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: var(--space-3); top: 50%; transform: translateY(-50%); }
.lightbox__close { top: var(--space-3); right: var(--space-3); }

/* --------------------------------------------------------------------------
   Contact form
   -------------------------------------------------------------------------- */

.form-card {
  background: var(--white);
  border: 1px solid var(--sand-200);
  border-radius: var(--radius-m);
  padding: var(--space-6);
  max-width: 34rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  /* Grid and flex items default to min-width:auto, so they refuse to shrink
     below their min-content width. input[type=date] has a wide one. */
  min-width: 0;
}
.field label { font-weight: 600; font-size: .9rem; }
.field .optional { font-weight: 400; color: var(--ink-500); }

/* Two fields side by side, stacking before they can overflow */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }

.contact-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
  align-items: start;
}

.contact-aside h2 { font-size: 1.6rem; margin-bottom: var(--space-4); }
.contact-aside .footer-links { gap: var(--space-3); margin-bottom: var(--space-6); }
.contact-line { display: flex; gap: var(--space-3); align-items: baseline; }
.contact-line .icon { color: var(--sea-600); margin-top: .25em; }
.contact-notes { display: flex; flex-direction: column; gap: var(--space-3); color: var(--ink-500); font-size: .95rem; }
.form-note { margin-top: var(--space-4); font-size: .85rem; color: var(--ink-500); }
.muted { color: var(--ink-500); }
.btn--block { width: 100%; }
.stack-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-5); }
.social-spaced { margin-top: var(--space-4); }
.amenity-note { margin-top: var(--space-3); font-size: .9rem; color: var(--ink-500); }

.field input, .field textarea {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--sand-300);
  border-radius: var(--radius-s);
  background: var(--sand-50);
  /* 16px minimum, or iOS zooms the page when the field takes focus */
  font-size: 1rem;
  transition: border-color var(--ease);
}
.field input:focus, .field textarea:focus { border-color: var(--sea-600); }
.field textarea { resize: vertical; min-height: 8rem; }

/* Spam honeypot. Hidden from people, visible to bots that fill everything. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------------------------
   Consent banner
   -------------------------------------------------------------------------- */

.consent {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 150;
  max-width: 46rem;
  margin-inline: auto;
  background: var(--white);
  border: 1px solid var(--sand-200);
  border-radius: var(--radius-m);
  box-shadow: var(--lift);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
}

.consent__text {
  flex: 1 1 20rem;
  font-size: .9rem;
  color: var(--ink-700);
  max-width: none;
}

.consent__actions { display: flex; gap: var(--space-2); flex: 0 0 auto; }
.consent__actions .btn { min-height: 44px; padding-inline: var(--space-4); }

/* --------------------------------------------------------------------------
   Long form policy text
   -------------------------------------------------------------------------- */

.prose-block { max-width: var(--measure); display: flex; flex-direction: column; gap: var(--space-3); }
.prose-block h2 { font-size: 1.5rem; margin-top: var(--space-5); }
.prose-block p { color: var(--ink-700); }
.policy-list { display: flex; flex-direction: column; gap: var(--space-2); color: var(--ink-700); }
.policy-list li { padding-left: var(--space-4); position: relative; }
.policy-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .7em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sea-600);
}

/* --------------------------------------------------------------------------
   Breakpoints: 1024, 900, 768, 480. Nothing else.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .section { padding-block: var(--space-7); }
}

@media (max-width: 900px) {
  /* Hamburger appears here, not at 667px. Between 668 and 900 the horizontal
     nav used to overflow, which put iPad portrait right in the dead zone. */
  .nav-toggle { display: inline-flex; }

  .nav {
    position: fixed;
    /* Starts below the header bar rather than underlapping it, so the toggle
       is never covered and the menu can always be closed. Relying on z-index
       alone did not work: the panel is a sibling of the header and still
       intercepted pointer events over the button. */
    inset: var(--header-h) 0 0 auto;
    width: min(20rem, 82vw);
    background: var(--sand-50);
    border-left: 1px solid var(--sand-200);
    padding: var(--space-5);
    transform: translateX(100%);
    transition: transform 240ms ease-out;
    z-index: 110;
    overflow-y: auto;
  }
  .nav.menu-open { transform: translateX(0); }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }

  /* The panel is cream even on the overlay page, so its links must be dark.
     Listed twice so this beats .site-header--overlay:not(.is-stuck) .nav__link. */
  .nav__link,
  .site-header--overlay:not(.is-stuck) .nav__link {
    color: var(--ink-900);
    text-shadow: none;
    font-size: 1.05rem;
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--sand-200);
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .nav__link::after { display: none; }

  .nav__cta { margin-top: var(--space-5); }
  .nav__cta .btn { width: 100%; }

  .nav-scrim {
    display: block;
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: rgba(14, 32, 36, .5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms ease-out;
    z-index: 105;
  }
  .nav-scrim.menu-open { opacity: 1; pointer-events: auto; }
}

@media (max-width: 768px) {
  .section { padding-block: var(--space-6); }
  .site-footer { margin-top: var(--space-7); padding-block: var(--space-7) var(--space-5); }
  .hero__inner { padding-block: var(--space-7); }
  .hero__actions .btn { flex: 1 1 100%; }
}

@media (max-width: 480px) {
  .container { padding-inline: var(--space-4); }
  .form-card { padding: var(--space-5); }
  .price-card { padding: var(--space-5) var(--space-4); }
  /* Two date inputs will not fit side by side at this width */
  .field-row { grid-template-columns: 1fr; gap: 0; }
}

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */

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