/* =====================================================
   Hacienda Los Milagros
   -----------------------------------------------------
   Most repeated patterns live in the "Shared primitives"
   block below. Edit there to change the look of every
   section at once. Below that, each section only owns
   its unique layout bits.
   ===================================================== */


/* =====================================================
   1. TOKENS
   ===================================================== */
:root {
  /* Brand palette — only these three colors used anywhere */
  --bg:     #F3F8ED;  /* page cream */
  --bg-2:   #E7F0DB;  /* alternating sage band */
  --ink:    #00534C;  /* primary teal (text + dark sections) */
  --accent: #F49C8C;  /* peach accent */

  /* Aliases for readability */
  --cream: var(--bg);
  --rule:  var(--bg-2);

  --f-display: "Cormorant Garamond", Didot, Georgia, serif;
  --f-sans:    "Inter", ui-sans-serif, system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease: cubic-bezier(.2,.7,.2,1);

  /* Standard caption pill background */
  --cap-bg: rgba(0,83,76,0.55);
}


/* =====================================================
   2. BASE
   ===================================================== */
* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }

/* Branded scrollbar */
html { scrollbar-color: var(--ink) var(--bg-2); scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: var(--ink); border: 2px solid var(--bg-2); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
::-webkit-scrollbar-corner { background: var(--bg-2); }


/* =====================================================
   3. TYPOGRAPHY HELPERS
   ===================================================== */
.display {
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.02;
  font-feature-settings: "liga" 1, "dlig" 1;
}
/* Global emphasis treatment — italic in peach accent everywhere. */
em { font-style: italic; color: var(--accent); }

.display em        { font-style: italic; color: var(--accent); }

.eyebrow {
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
}
.eyebrow-accent { color: var(--accent); }
.accent         { color: var(--accent); }


/* =====================================================
   4. LAYOUT PRIMITIVES
   ===================================================== */
.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 56px;
}

/* Every full-page section uses .section + a background modifier.
   Edit padding / background here to affect every section at once. */
section          { position: relative; }
.section         { padding: 140px 0; }
.section--cream  { background: var(--bg); }
.section--sage   { background: var(--bg-2); }


/* =====================================================
   5. BUTTONS
   ===================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn:hover       { background: var(--ink); color: var(--cream); }
.btn-solid       { background: var(--ink); color: var(--cream); }
.btn-ghost       { border-color: var(--rule); }
.btn-ghost:hover { border-color: var(--ink); background: transparent; color: var(--ink); }

.btn .arrow         { display: inline-block; transition: transform .3s var(--ease); }
.btn:hover .arrow   { transform: translateX(4px); }


/* =====================================================
   6. SHARED PRIMITIVES — used across many sections
   ===================================================== */

/* --- Section header --------------------------------- */
/* Eyebrow + display heading on the left, lede paragraph
   on the right. Used by Estate, Suites, Culinary,
   Day-in-life, Offering, Fleet, Enquire, Gallery. */
.section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 72px;
}
.section-head h2 {
  font-family: var(--f-display);
  font-size: clamp(48px, 5.4vw, 64px);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1;
  margin: 14px 0 0;
}
.section-head h2 em { font-style: italic; color: var(--accent); }
.section-head p {
  font-family: var(--f-display);
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink);
  max-width: 44ch;
  margin: 0;
}
/* Variants only when ratios genuinely need to differ */
.section-head--wide   { grid-template-columns: 1fr 2fr; }
.section-head--narrow { grid-template-columns: 1.3fr 1fr; }


/* --- Media frame ------------------------------------ */
/* Cross-fading image stage. Used by Suites viewer,
   Day-in-life portrait, Culinary portrait, Fleet. */
.frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--bg-2);
  aspect-ratio: 4/5;
}
.frame--4x3 { aspect-ratio: 4/3; }
.frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity .7s var(--ease), transform 1.4s var(--ease);
}
.frame img.active { opacity: 1; transform: scale(1); }


/* --- Caption pill ----------------------------------- */
/* Small dark-tinted label that sits on imagery.
   Default position is bottom-left; modifiers move it. */
.cap {
  position: absolute;
  left: 14px; bottom: 14px;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--cap-bg);
  padding: 6px 10px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.cap--tr { left: auto; right: 14px; top: 14px; bottom: auto; }
.cap--lg {
  font-family: var(--f-display);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: none;
  padding: 8px 14px;
}


/* --- Two-column stage ------------------------------- */
/* Image frame on one side, list on the other.
   Used by Suites, Day-in-life, Culinary, Fleet. */
.stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.stage > *           { min-width: 0; }
.stage--list-wide    { grid-template-columns: 1.4fr 1fr; }
.stage--media-wide   { grid-template-columns: 1.1fr 1fr; }
.stage-media-sticky  { position: sticky; top: 100px; }


/* --- Explorer list row ------------------------------ */
/* Glyph + heading + body + meta; hovering or activating
   indents the row and rotates the glyph.
   Used by Suites, Day-in-life, Culinary pillars, Fleet. */
.list-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 22px;
  align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  transition: padding-left .3s var(--ease), border-color .3s var(--ease);
}
.list-row .glyph {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 16px;
  line-height: 1.4;
  color: var(--accent);
  transition: transform .3s var(--ease), color .3s;
}
.list-row h3,
.list-row h4 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(22px, 2vw, 26px);
  letter-spacing: -0.005em;
  line-height: 1.15;
  margin: 0 0 6px;
  color: var(--ink);
  transition: color .3s;
}
.list-row p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  max-width: 50ch;
}
.list-row .meta {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}
.list-row .tagline {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 14px;
  color: var(--ink);
  margin: 2px 0 6px;
}
.list-row:hover,
.list-row.active {
  padding-left: 12px;
  border-bottom-color: var(--ink);
}
.list-row:hover .glyph,
.list-row.active .glyph { transform: rotate(45deg); }

/* Variant: body collapsed until row is active (Suites pattern) */
.list-row--collapsible p {
  max-height: 0; overflow: hidden;
  opacity: 0; margin-top: 0;
  transition: max-height .5s var(--ease), opacity .4s var(--ease), margin-top .3s;
}
.list-row--collapsible.active p {
  max-height: 140px; opacity: 1; margin-top: 8px;
}


/* =====================================================
   7. NAV
   ===================================================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 56px;
  color: var(--cream);
  transition: background .4s var(--ease), color .4s var(--ease),
              backdrop-filter .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(0, 83, 76, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgba(243,248,237,0.18);
}
.nav .mark {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--f-display);
  font-size: 20px;
  letter-spacing: 0.02em;
}
.nav .links {
  display: flex; gap: 36px;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
}
.nav .links a       { padding: 4px 0; opacity: 0.85; transition: opacity .2s; }
.nav .links a:hover { opacity: 1; }
.nav .cta {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  padding: 10px 18px;
  border: 1px solid currentColor;
}
.nav .cta:hover       { background: currentColor; }
.nav .cta:hover span  { color: var(--bg); mix-blend-mode: difference; }

/* --- Mobile menu (hamburger + drawer) ----------------- */
/* Hidden on desktop, swapped in for the Enquire CTA below the breakpoint */
.menu-btn {
  display: none;
  position: relative;
  z-index: 70;          /* always sits above the open drawer so it stays tappable */
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: inherit;
}
.menu-btn span {
  display: block;
  width: 22px; height: 1.5px;
  background: currentColor;
  transition: transform .3s var(--ease), opacity .25s var(--ease);
  transform-origin: center;
}
.menu-btn.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-btn.open span:nth-child(2) { opacity: 0; }
.menu-btn.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Full-screen drawer with all links + Enquire */
.mobile-menu {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--ink);
  color: var(--cream);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--ease);
  z-index: 60;          /* sits ABOVE the nav so the bar never peeks through */
}
.mobile-menu.open {
  opacity: 1;
  pointer-events: auto;
}
.mobile-menu-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 24px;
  padding: 120px 32px 48px;
  font-family: var(--f-display);
  font-size: clamp(34px, 7vw, 48px);
  line-height: 1;
  letter-spacing: -0.01em;
}
.mobile-menu-inner a {
  color: var(--cream);
  transition: color .2s, transform .35s var(--ease), opacity .35s var(--ease);
  opacity: 0;
  transform: translateY(8px);
}
.mobile-menu.open .mobile-menu-inner a {
  opacity: 1;
  transform: none;
}
/* Cascade the links in */
.mobile-menu.open .mobile-menu-inner a:nth-child(1) { transition-delay: .05s; }
.mobile-menu.open .mobile-menu-inner a:nth-child(2) { transition-delay: .10s; }
.mobile-menu.open .mobile-menu-inner a:nth-child(3) { transition-delay: .15s; }
.mobile-menu.open .mobile-menu-inner a:nth-child(4) { transition-delay: .20s; }
.mobile-menu.open .mobile-menu-inner a:nth-child(5) { transition-delay: .25s; }
.mobile-menu.open .mobile-menu-inner a:nth-child(6) { transition-delay: .30s; }
.mobile-menu.open .mobile-menu-inner a:nth-child(7) { transition-delay: .35s; }
.mobile-menu.open .mobile-menu-inner a:nth-child(8) {
  transition-delay: .40s;
  color: var(--accent);
  font-style: italic;
}
.mobile-menu-inner a:hover { color: var(--accent); }

/* When the menu is open, ensure the nav bar is solid dark green
   (overrides .nav.scrolled's translucent backdrop) */
.nav.menu-open {
  background: var(--ink);
  color: var(--cream);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: rgba(243,248,237,0.18);
}


/* =====================================================
   8. HERO
   ===================================================== */
.hero {
  position: relative;
  height: 100vh;
  min-height: 720px;
  overflow: hidden;
  background: var(--ink);
  color: var(--cream);
}
.hero-media {
  position: absolute; inset: 0;
  background: var(--ink) url("img/hero-cover.jpg") center/cover no-repeat;
  overflow: hidden;
}
.hero-video {
  position: absolute;
  top: 50%; left: 50%;
  width: 177.78vh; height: 100vh;
  min-width: 100vw; min-height: 56.25vw;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 700ms ease;
}
.hero-video[data-ready="true"] { opacity: 1; }
.hero-cover {
  position: absolute; inset: 0;
  background: var(--ink) url("img/hero-cover.jpg") center/cover no-repeat;
  opacity: 1;
  transition: opacity 1200ms ease;
  pointer-events: none;
}
.hero-cover[data-ready="true"] { opacity: 0; }
.hero-scrim {
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,83,76,0.30) 0%, rgba(0,83,76,0.15) 40%, rgba(0,83,76,0.55) 100%);
}
.hero-inner {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 120px 56px 56px;
}
.hero-caption { align-self: end; }
.hero-title {
  font-size: 100px;
  line-height: 0.95;
  letter-spacing: -0.015em;
  color: var(--cream);
  max-width: 14ch;
  margin: 0;
}
.hero-title em { font-style: italic; color: var(--accent); }
.hero-topline {
  position: absolute;
  top: 120px; left: 56px; right: 56px;
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(243,248,237,0.75);
}


/* =====================================================
   9. INTRO  — "A love letter to México"
   ===================================================== */
.intro-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 80px;
  align-items: end;
}
.intro-lede {
  font-family: var(--f-display);
  font-size: clamp(34px, 3.4vw, 54px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 18px 0 0;
}
.intro-lede em { font-style: italic; color: var(--accent); }
.intro-monogram {
  margin: 48px 0 0;
  display: flex;
  justify-content: center;
}
.intro-monogram img {
  width: clamp(112px, 15.4vw, 196px);
  height: auto;
  display: block;
}
.intro-map     { margin: 40px 0 0; }
.intro-map img {
  width: 100%; height: auto;
  /* Soft 4% feather on all edges, fading into the section bg */
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0%, #000 4%, #000 96%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 4%, #000 96%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right,  transparent 0%, #000 4%, #000 96%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 4%, #000 96%, transparent 100%);
          mask-composite: intersect;
}
.intro-body {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  max-width: 62ch;
}
.intro-body p          { margin: 0; }
.intro-body p + p      { margin-top: 1.2em; }


/* =====================================================
   10. ESTATE  — masonry, no-crop
   ===================================================== */
.estate-grid {
  column-count: 2;
  column-gap: 20px;
}
.estate-tile {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 20px;
  overflow: hidden;
  background: var(--bg-2);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}
.estate-tile img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;       /* box already matches natural ratio, no real cropping */
  transition: transform 1.2s var(--ease);
}
.estate-tile:hover img { transform: scale(1.04); }

.estate-more {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}
.estate-more-btn {
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 12px;
  padding: 16px 32px;
}
.estate-more-btn .arrow {
  margin-left: 6px;
  transition: transform .3s var(--ease);
}
.estate-more-btn:hover .arrow { transform: translateY(2px); }


/* =====================================================
   11. OFFERING  — 3-up card grid
   ===================================================== */
.offering-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 48px;
  row-gap: 56px;
  border-top: 1px solid rgba(0,83,76,0.15);
  padding-top: 56px;
}
.offer-item { display: flex; flex-direction: column; gap: 12px; }
.offer-item .num {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 22px;
  color: var(--accent);
}
.offer-item h4 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.005em;
  margin: 0;
}
.offer-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
}
/* Offering h2 emphasis is peach, not ink */
.offering .section-head h2 em { color: var(--accent); }


/* =====================================================
   12. CULINARY  — bottom strip is unique
   ===================================================== */
.culinary-strip {
  margin-top: 72px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.strip-item   { display: flex; flex-direction: column; gap: 12px; }
.strip-eyebrow {
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
}
.strip-line {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 19px;
  line-height: 1.4;
  color: var(--ink);
}


/* =====================================================
   13. PRESS  — head-left, list-right
   ===================================================== */
.press-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: start;
}
.press h2 {
  font-family: var(--f-display);
  font-size: clamp(36px, 3.4vw, 64px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0;
}
.press h2 em { font-style: italic; color: var(--accent); }
.press-lede {
  font-family: var(--f-display);
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink);
  max-width: 36ch;
  margin: 28px 0 0;
}
.press-list { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.press-item { padding: 32px 0; border-bottom: 1px solid var(--rule); }
.press-item .pub {
  display: flex; justify-content: space-between;
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 14px;
}
.press-item blockquote {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(22px, 1.8vw, 28px);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0;
}
.press-item blockquote::before { content: "“"; color: var(--accent); margin-right: 4px; }
.press-item blockquote::after  { content: "”"; color: var(--accent); margin-left: 2px; }
.press-item blockquote a {
  color: inherit;
  text-decoration: none;
}


/* =====================================================
   14. GALLERY  — mosaic
   ===================================================== */
.gallery-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 40px;
  margin-bottom: 40px;
}
.gallery-head h2 {
  font-family: var(--f-display);
  font-size: clamp(48px, 4vw, 64px);
  font-weight: 400;
  line-height: 1;
  margin: 14px 0 0;
}
.gallery-head h2 em { font-style: italic; color: var(--accent); }
.gallery-strip {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 14px;
  aspect-ratio: 3/2;
}
.gallery-strip .g          { position: relative; overflow: hidden; background: var(--bg-2); }
.gallery-strip .g img      { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.gallery-strip .g:hover img{ transform: scale(1.05); }
.gallery-strip .g:nth-child(1) { grid-column: 1 / span 4;  grid-row: 1 / span 2; }
.gallery-strip .g:nth-child(2) { grid-column: 5 / span 4;  grid-row: 1; }
.gallery-strip .g:nth-child(3) { grid-column: 9 / span 4;  grid-row: 1 / span 2; }
.gallery-strip .g:nth-child(4) { grid-column: 5 / span 4;  grid-row: 2; }
.gallery-strip .g:nth-child(5) { grid-column: 1 / span 4;  grid-row: 3 / span 2; }
.gallery-strip .g:nth-child(6) { grid-column: 5 / span 4;  grid-row: 3 / span 2; }
.gallery-strip .g:nth-child(7) { grid-column: 9 / span 4;  grid-row: 3; }
.gallery-strip .g:nth-child(8) { grid-column: 9 / span 4;  grid-row: 4; }


/* =====================================================
   15. FLEET — uses shared primitives with no overrides
   ===================================================== */
.fleet.section--sage { background: #f3f8ed; }


/* =====================================================
   15b. EXPERIENCES — Fleet-style explorer, titles only
   ===================================================== */
/* Long descriptions need more vertical room than the
   default collapsible primitive provides. */
.experiences .list-row--collapsible.active p { max-height: 260px; }
/* Tighten the row rhythm since there are twelve of them. */
.experiences .list-row { padding: 16px 0; }


/* =====================================================
   16. ENQUIRE  — multi-step form
   ===================================================== */
.enquire.section--cream { background: #e7f0db; }
.enquire-form {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 80px;
  padding-top: 56px;
  border-top: 1px solid var(--rule);
}
.enquire-steps {
  display: flex; flex-direction: column; gap: 20px;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
}
.enquire-step {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  color: rgba(0,83,76,0.4);
  cursor: pointer;
  transition: color .3s;
}
.enquire-step .s-n {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0;
}
.enquire-step.active,
.enquire-step.done            { color: var(--ink); }
.enquire-step.done .s-n::after { content: " ✓"; color: var(--accent); }

.enquire-panel {
  display: grid;
  gap: 32px;
  max-width: 640px;
}
.enquire-panel .q  { display: flex; flex-direction: column; gap: 18px; }
.enquire-panel h3  {
  font-family: var(--f-display);
  font-size: clamp(28px, 2.6vw, 40px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
}
.enquire-panel h3 em { font-style: italic; color: var(--accent); }
.enquire-panel .help {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
  max-width: 52ch;
}

/* Form fields */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 0 10px;
  border-bottom: 1px solid var(--rule);
}
.field label {
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ink);
}
.field input,
.field textarea,
.field select {
  background: transparent; border: 0;
  color: var(--ink);
  font-family: var(--f-display);
  font-size: 20px;
  padding: 4px 0;
  outline: none;
}
.field select.placeholder           { color: rgba(0,83,76,0.4); }
.field input::placeholder,
.field textarea::placeholder        { color: rgba(0,83,76,0.4); font-style: italic; }
.field textarea                     { resize: vertical; min-height: 72px; font-size: 17px; line-height: 1.5; }
.field:focus-within                 { border-bottom-color: var(--accent); }

/* Chip selector */
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  padding: 10px 16px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  cursor: pointer;
  transition: all .25s;
}
.chip:hover  { border-color: var(--ink); }
.chip.on     { border-color: var(--accent); background: var(--accent); color: var(--bg); }

.enquire-actions { display: flex; gap: 16px; margin-top: 12px; }
.enquire-error {
  margin: 14px 0 0;
  font-family: var(--f-sans);
  font-size: 14px;
  color: var(--accent);
  max-width: 60ch;
  line-height: 1.5;
}
.btn:disabled,
.btn-solid:disabled { opacity: 0.55; cursor: not-allowed; }

/* "Thank you" state */
.enquire-complete {
  display: flex; flex-direction: column; gap: 20px;
  padding-top: 56px;
  border-top: 1px solid var(--rule);
  font-family: var(--f-display);
}
.enquire-complete h3   { font-size: clamp(36px, 3.8vw, 56px); margin: 0; font-weight: 400; line-height: 1.05; color: var(--ink); }
.enquire-complete h3 em{ font-style: italic; color: var(--accent); }
.enquire-complete p    { margin: 0; font-family: var(--f-sans); font-size: 15px; max-width: 50ch; line-height: 1.6; color: var(--ink); }
.enquire-complete .sign{ margin-top: 24px; font-style: italic; color: var(--accent); font-size: 20px; }

/* Offering h2 + Enquire h2 both use peach emphasis */
.enquire .section-head h2 em { color: var(--accent); }


/* =====================================================
   17. FOOTER
   ===================================================== */
.footer {
  background: var(--ink);
  color: var(--cream);
  padding: 100px 0 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 80px;
}
.footer-grid h6 {
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  font-weight: 500;
  color: rgba(243,248,237,0.6);
  margin: 0 0 18px;
}
.footer-grid ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
  font-family: var(--f-display);
  font-size: 18px;
}
.footer-grid ul a,
.footer-grid ul li        { color: var(--cream); transition: color .2s; }
.footer-grid ul a:hover   { color: var(--accent); font-style: italic; }
.footer-brand {
  font-family: var(--f-display);
  font-size: clamp(48px, 5vw, 64px);
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--cream);
}
.footer-brand em      { font-style: italic; color: var(--accent); }
.footer-brand .sub    {
  display: block;
  margin-top: 16px;
  font-family: var(--f-sans);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(243,248,237,0.6);
}
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px;
  border-top: 1px solid rgba(243,248,237,0.15);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(243,248,237,0.55);
}


@media (max-width: 600px) {
  .estate-grid { column-count: 1; }
}

/* =====================================================
   18. RESPONSIVE
   ===================================================== */
@media (max-width: 960px) {
  .container        { padding: 0 24px; }
  .nav              { padding: 16px 24px; }
  .nav .links       { display: none; }
  .nav .cta         { display: none; }   /* hidden — hamburger takes its place */
  .menu-btn         { display: flex; }

  .hero-inner       { padding: 100px 24px 40px; }
  .hero-topline     { left: 24px; right: 24px; top: 84px; }
  .hero-title       { font-size: clamp(56px, 12vw, 100px); }

  /* Collapse every multi-col layout to 1col */
  .section          { padding: 80px 0; }
  .section-head,
  .section-head--wide,
  .section-head--narrow,
  .intro-grid,
  .stage, .stage--list-wide, .stage--media-wide,
  .enquire-form,
  .press-grid       { grid-template-columns: 1fr !important; gap: 32px; }
  .section-head,
  .section-head--wide,
  .section-head--narrow { margin-bottom: 40px; }

  .offering-grid    { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-grid      { grid-template-columns: 1fr 1fr; gap: 32px; }

  .stage-media-sticky { position: static; max-width: 480px; }

  .estate-grid      { column-count: 1; }

  .gallery-strip    { grid-template-columns: 1fr 1fr; grid-template-rows: auto; aspect-ratio: auto; }
  .gallery-strip .g { grid-column: span 1 !important; grid-row: auto !important; aspect-ratio: 4/5; }

  .culinary-strip   { grid-template-columns: 1fr !important; gap: 24px; margin-top: 48px; }
  .field-row        { grid-template-columns: 1fr; }
}