/* ==========================================================================
   Bulshoekfarm Accommodation - redesign concept
   Style: Nature Distilled + editorial grid
   Palette taken from the farm's own signage (dark board green + gold + cream)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Petrona:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=Karla:wght@300;400;500;600;700&family=Italianno&display=swap');

:root {
  --ink:        #131d0e;
  --forest:     #24361d;
  --moss:       #3d5232;
  --sage:       #7d8f6b;
  --sage-soft:  #b3bfa4;
  --gold:       #d9a93c;
  --gold-deep:  #a97d21;
  --gold-glow:  #f0cd76;
  --clay:       #a9512f;
  --water:      #3b6a7c;
  --cream:      #f7f2e6;
  --paper:      #fdfbf6;
  --sand:       #e9dfc8;
  --line:       rgba(19, 29, 14, .14);
  --line-soft:  rgba(19, 29, 14, .08);

  --display: 'Petrona', Georgia, serif;
  --body:    'Karla', system-ui, -apple-system, sans-serif;
  --script:  'Italianno', cursive;

  --wrap: 1220px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --r-sm: 3px;
  --r:    6px;
  --r-lg: 10px;

  --shadow-s: 0 1px 2px rgba(19,29,14,.06), 0 6px 18px -10px rgba(19,29,14,.25);
  --shadow-m: 0 2px 6px rgba(19,29,14,.07), 0 22px 44px -22px rgba(19,29,14,.4);
  --shadow-l: 0 30px 70px -32px rgba(19,29,14,.55);

  --ease: cubic-bezier(.22,.61,.36,1);
  --slow: 620ms;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
svg { width: 20px; height: 20px; flex: none; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
h1,h2,h3,h4 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
}
p { margin: 0 0 1.1em; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

/* film grain over the whole page - the signature of the style */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 200;
  opacity: .28;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}

/* ---------- layout helpers ---------- */
.wrap { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; }
.wrap-wide { width: min(1520px, 100% - var(--gutter) * 2); margin-inline: auto; }
.section { padding: clamp(4rem, 9vw, 8.5rem) 0; position: relative; }
.section--tight { padding: clamp(3rem, 6vw, 5.5rem) 0; }
.section--dark { background: var(--forest); color: var(--cream); }
.section--cream { background: var(--cream); }
.section--sand  { background: linear-gradient(175deg, var(--cream), var(--sand)); }

.eyebrow {
  font-family: var(--body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  display: flex; align-items: center; gap: .75rem;
  margin: 0 0 1.1rem;
}
.eyebrow::before { content: ''; width: 34px; height: 1px; background: var(--gold-deep); opacity: .8; }
.section--dark .eyebrow, .band .eyebrow, .pagehero .eyebrow { color: var(--gold); }
.section--dark .eyebrow::before, .band .eyebrow::before { background: var(--gold); }

.h-xl { font-size: clamp(2.35rem, 6vw, 4.5rem); }
.h-lg { font-size: clamp(2rem, 4.4vw, 3.35rem); }
.h-md { font-size: clamp(1.55rem, 2.6vw, 2.15rem); }
.lede { font-size: clamp(1.1rem, 1.55vw, 1.3rem); line-height: 1.6; color: #3a4433; max-width: 62ch; }
.section--dark .lede, .band .lede, .pagehero .lede { color: #d8dfcd; }
.muted { color: #5c6752; }
.section--dark .muted, .band .muted { color: #b8c3aa; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 1.7rem;
  min-height: 48px;
  border: 1px solid transparent;
  border-radius: var(--r);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--gold { background: var(--gold); color: var(--ink); box-shadow: var(--shadow-s); }
.btn--gold:hover { background: var(--gold-glow); box-shadow: var(--shadow-m); }
.btn--forest { background: var(--forest); color: var(--cream); }
.btn--forest:hover { background: var(--moss); }
.btn--ghost { border-color: rgba(247,242,230,.45); color: var(--cream); }
.btn--ghost:hover { background: rgba(247,242,230,.14); border-color: var(--cream); }
.btn--ghost-dark { border-color: var(--line); color: var(--ink); background: transparent; }
.btn--ghost-dark:hover { background: rgba(19,29,14,.06); border-color: rgba(19,29,14,.35); }
.btn--sm { padding: .6rem 1.1rem; min-height: 40px; font-size: .85rem; }

.textlink {
  display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
  font-weight: 600; font-size: .92rem; text-decoration: none;
  color: var(--gold-deep);
  border-bottom: 1px solid rgba(169,125,33,.35);
  padding-bottom: 2px;
  transition: gap .22s var(--ease), border-color .22s var(--ease);
}
.textlink svg { width: 16px; height: 16px; }
.textlink:hover { gap: .85rem; border-color: var(--gold-deep); }
.section--dark .textlink { color: var(--gold); border-color: rgba(217,169,60,.4); }

/* ---------- concept preview strip ---------- */
.concept-strip {
  background: repeating-linear-gradient(135deg, #1d2a16 0 14px, #223018 14px 28px);
  color: var(--sand);
  font-size: .74rem;
  letter-spacing: .05em;
  text-align: center;
  padding: .55rem 1rem;
  position: relative; z-index: 60;
}
.concept-strip b { color: var(--gold); font-weight: 600; }

/* ---------- header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(253,251,246,.9);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow .3s var(--ease), background-color .3s var(--ease);
}
.site-head.is-stuck { box-shadow: 0 10px 30px -20px rgba(19,29,14,.6); background: rgba(253,251,246,.97); }
.head-inner { display: flex; align-items: center; gap: 1.5rem; min-height: 74px; }

.brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; margin-right: auto; }
.brand-mark {
  width: 42px; height: 42px; flex: none;
  border-radius: 3px;
  background: var(--forest);
  display: grid; place-items: center;
  border: 1px solid var(--gold-deep);
  position: relative;
}
.brand-mark span { font-family: var(--display); color: var(--gold); font-size: 1.32rem; font-weight: 700; line-height: 1; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-family: var(--display); font-size: 1.32rem; font-weight: 600; letter-spacing: -.02em; }
.brand-sub { font-family: var(--script); font-size: 1.15rem; color: var(--gold-deep); margin-top: -1px; }

.nav { display: flex; align-items: center; gap: .35rem; }
.nav a {
  text-decoration: none; font-size: .93rem; font-weight: 500;
  padding: .55rem .8rem; border-radius: var(--r-sm);
  color: #364029;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.nav a:hover { background: rgba(19,29,14,.06); color: var(--ink); }
.nav a.is-active { color: var(--gold-deep); font-weight: 600; }
.head-cta { display: flex; align-items: center; gap: .6rem; }
.head-phone {
  display: inline-flex; align-items: center; gap: .45rem;
  text-decoration: none; font-weight: 600; font-size: .93rem; white-space: nowrap;
}
.head-phone svg { width: 16px; height: 16px; color: var(--gold-deep); }

.nav-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: var(--r-sm); padding: .55rem .7rem; }
.nav-toggle svg { width: 20px; height: 20px; display: block; }

@media (max-width: 1040px) {
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(330px, 84vw);
    background: var(--forest); flex-direction: column; align-items: stretch;
    padding: 5.5rem 1.4rem 2rem; gap: .2rem;
    transform: translateX(102%); visibility: hidden;
    transition: transform .38s var(--ease), visibility 0s .38s;
    box-shadow: var(--shadow-l); overflow-y: auto; max-width: 100%;
  }
  .nav.is-open { transform: none; visibility: visible; transition: transform .38s var(--ease), visibility 0s; }
  .nav a { color: var(--cream); padding: .85rem .7rem; border-bottom: 1px solid rgba(247,242,230,.1); }
  .nav a:hover { background: rgba(247,242,230,.1); color: #fff; }
  .nav a.is-active { color: var(--gold); }
  .nav-toggle { display: block; order: 3; z-index: 60; position: relative; }
  .head-phone { display: none; }
  .head-cta .btn { padding: .7rem 1rem; font-size: .87rem; min-height: 42px; }
}
@media (max-width: 480px) {
  .head-cta .btn span.long { display: none; }
  .brand-name { font-size: 1.15rem; }
}

/* ---------- hero ---------- */
.hero { position: relative; min-height: min(94vh, 900px); display: flex; align-items: flex-end; overflow: hidden; background: var(--forest); }
.hero--short { min-height: min(64vh, 620px); }
.hero-media { position: absolute; inset: 0; }
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 1.6s var(--ease);
  will-change: opacity;
}
.hero-slide.is-active { opacity: 1; }
.hero-slide img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06);
  animation: kenburns 17s var(--ease) forwards;
}
.hero-slide.is-active img { animation: kenburns 17s var(--ease) forwards; }
@keyframes kenburns {
  from { transform: scale(1.02) translate3d(0,0,0); }
  to   { transform: scale(1.13) translate3d(-1.4%, -1.2%, 0); }
}
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(11,18,8,.93) 0%, rgba(11,18,8,.55) 34%, rgba(11,18,8,.12) 62%, rgba(11,18,8,.42) 100%),
    radial-gradient(120% 80% at 20% 100%, rgba(11,18,8,.55), transparent 60%);
}
.hero-body { position: relative; padding-bottom: clamp(3rem, 7vw, 6rem); padding-top: 7rem; color: var(--cream); }
.hero-kicker svg { width: 15px; height: 15px; }
.hero-kicker {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold);
  background: rgba(11,18,8,.4);
  border: 1px solid rgba(217,169,60,.4);
  padding: .45rem .85rem; border-radius: 100px;
  margin-bottom: 1.4rem;
  backdrop-filter: blur(3px);
}
.hero h1 { color: #fff; margin-bottom: .35rem; max-width: 16ch; text-shadow: 0 4px 30px rgba(0,0,0,.4); }
.hero h1 em { font-style: normal; display: block; font-family: var(--script); color: var(--gold); font-size: 1.15em; line-height: .9; margin-top: .1em; }
.hero-lede { max-width: 46ch; color: #e7ecdd; font-size: clamp(1.02rem, 1.5vw, 1.22rem); margin-bottom: 2rem; text-shadow: 0 2px 16px rgba(0,0,0,.5); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero-dots { display: flex; gap: .5rem; margin-top: 2.6rem; }
.hero-dots button {
  width: 34px; height: 3px; border: 0; padding: 0; background: rgba(247,242,230,.32);
  border-radius: 3px; transition: background-color .3s var(--ease);
}
.hero-dots button.is-active { background: var(--gold); }

.hero-facts {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(247,242,230,.18);
  margin-top: clamp(2rem, 4vw, 3.2rem);
}
.hero-facts div { padding: 1.1rem 1rem 0 0; }
.hero-facts dt { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(233,223,200,.7); margin-bottom: .2rem; }
.hero-facts dd { margin: 0; font-family: var(--display); font-size: clamp(1rem, 1.5vw, 1.28rem); color: var(--cream); font-weight: 500; }
@media (max-width: 720px) { .hero-facts { grid-template-columns: repeat(2, 1fr); gap: .2rem 0; } }

.scroll-cue {
  position: absolute; right: var(--gutter); bottom: clamp(3rem, 7vw, 6rem);
  writing-mode: vertical-rl; font-size: .68rem; letter-spacing: .24em;
  text-transform: uppercase; color: rgba(247,242,230,.6);
  display: flex; align-items: center; gap: .8rem;
}
.scroll-cue::after { content: ''; width: 1px; height: 54px; background: linear-gradient(rgba(247,242,230,.6), transparent); animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0%,100% { opacity: .3; transform: scaleY(.6); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }
@media (max-width: 900px) { .scroll-cue { display: none; } }

/* page hero (inner pages) */
.pagehero { position: relative; overflow: hidden; background: var(--forest); }
.pagehero img.pagehero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pagehero .hero-scrim {
  background:
    linear-gradient(to top, rgba(11,18,8,.94) 0%, rgba(11,18,8,.72) 45%, rgba(11,18,8,.5) 100%),
    linear-gradient(90deg, rgba(11,18,8,.8) 0%, rgba(11,18,8,.35) 55%, rgba(11,18,8,.15) 100%);
}
.pagehero-body { position: relative; color: var(--cream); padding: clamp(5rem, 11vw, 8.5rem) 0 clamp(2.6rem, 5vw, 4rem); }
.pagehero h1 { color: #fff; max-width: 18ch; text-shadow: 0 4px 30px rgba(0,0,0,.35); }
.crumbs { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(233,223,200,.75); margin-bottom: 1.2rem; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--gold); }

/* ---------- ripple divider ---------- */
.ripple { display: block; width: 100%; height: 46px; color: inherit; }
.ripple path { animation: drift 16s linear infinite; }
.ripple path:nth-child(2) { animation-duration: 24s; animation-direction: reverse; opacity: .5; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-1440px); } }

/* ---------- intro / editorial ---------- */
.editorial { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 900px) { .editorial { grid-template-columns: 1fr; } }
.editorial-body p:first-of-type::first-letter {
  font-family: var(--display); font-size: 3.6em; line-height: .78; float: left;
  padding: .06em .12em 0 0; color: var(--moss); font-weight: 600;
}
.pullquote {
  position: relative;
  padding: 1.4rem 0 .3rem;
  margin: 2.2rem 0;
  font-family: var(--display); font-size: clamp(1.2rem, 2vw, 1.6rem);
  line-height: 1.35; color: var(--moss); font-style: italic;
}
.pullquote::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 62px; height: 1px; background: var(--gold-deep);
}
.stat-rail { display: grid; gap: 1.5rem; border-left: 1px solid var(--line); padding-left: clamp(1.4rem, 3vw, 2.6rem); }
.stat-rail .stat-n { font-family: var(--display); font-size: clamp(2.1rem, 4vw, 3rem); line-height: 1; color: var(--moss); font-weight: 600; }
.stat-rail .stat-l { font-size: .82rem; letter-spacing: .06em; color: #5c6752; text-transform: uppercase; }

/* ---------- stay cards ---------- */
.stays { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
.stay { grid-column: span 2; }
.stay:nth-child(1), .stay:nth-child(2) { grid-column: span 3; }
@media (max-width: 980px) { .stay, .stay:nth-child(1), .stay:nth-child(2) { grid-column: span 3; } }
@media (max-width: 640px) { .stay, .stay:nth-child(1), .stay:nth-child(2) { grid-column: span 6; } }

.stay-card {
  display: flex; flex-direction: column; height: 100%;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden; text-decoration: none;
  box-shadow: var(--shadow-s);
  transition: box-shadow .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.stay-card:hover { box-shadow: var(--shadow-m); border-color: rgba(19,29,14,.2); }
.stay-figure { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sand); }
.stay:nth-child(1) .stay-figure, .stay:nth-child(2) .stay-figure { aspect-ratio: 16 / 9; }
.stay-figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease), filter .5s var(--ease); }
.stay-card:hover .stay-figure img { transform: scale(1.055); }
.stay-badge {
  position: absolute; left: 0; bottom: 0;
  background: var(--forest); color: var(--gold);
  font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: .5rem .9rem; border-radius: 0 var(--r) 0 0;
}
.stay-inner { padding: 1.5rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.stay-inner h3 { font-size: clamp(1.35rem, 2.1vw, 1.75rem); margin-bottom: .35rem; }
.stay-meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .84rem; color: #5c6752; margin-bottom: .9rem; }
.stay-meta span { display: inline-flex; align-items: center; gap: .35rem; }
.stay-meta svg { width: 15px; height: 15px; color: var(--sage); }
.stay-desc { font-size: .96rem; color: #4b5642; margin-bottom: 1.1rem; }
.stay-foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); }
.price-from { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #6c7761; display: block; }
.price-val { font-family: var(--display); font-size: 1.5rem; font-weight: 600; color: var(--ink); line-height: 1.1; }
.price-val small { font-family: var(--body); font-size: .78rem; font-weight: 500; color: #6c7761; }

/* ---------- feature chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.chip {
  font-size: .74rem; font-weight: 600; letter-spacing: .04em;
  padding: .3rem .65rem; border-radius: 100px;
  background: rgba(125,143,107,.16); color: #3f4c33;
  border: 1px solid rgba(125,143,107,.25);
}
.section--dark .chip { background: rgba(247,242,230,.1); color: var(--sand); border-color: rgba(247,242,230,.18); }

/* ---------- experience band ---------- */
.band { position: relative; overflow: hidden; background: var(--ink); color: var(--cream); }
.band-bg { position: absolute; inset: -12% 0 -12% 0; }
.band-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .5; will-change: transform; }
.band::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(11,18,8,.95) 0%, rgba(11,18,8,.86) 42%, rgba(11,18,8,.6) 100%);
}
.band-inner { position: relative; z-index: 2; padding: clamp(4.5rem, 10vw, 8rem) 0; }

.acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(247,242,230,.16); border: 1px solid rgba(247,242,230,.16); border-radius: var(--r-lg); overflow: hidden; margin-top: 2.6rem; }
@media (max-width: 900px) { .acts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .acts { grid-template-columns: 1fr; } }
.act { background: rgba(15,23,11,.72); padding: 1.6rem 1.4rem; transition: background-color .3s var(--ease); }
.act:hover { background: rgba(36,54,29,.9); }
.act svg { width: 26px; height: 26px; color: var(--gold); margin-bottom: .9rem; }
.act h4 { font-size: 1.12rem; margin-bottom: .3rem; color: #fff; }
.act p { font-size: .9rem; color: #c2cdb2; margin: 0; }

/* ---------- scene scroller ---------- */
.scroller {
  display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 1.4rem;
  padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2));
  padding-right: var(--gutter);
}
.scroller::-webkit-scrollbar { height: 6px; }
.scroller::-webkit-scrollbar-thumb { background: rgba(19,29,14,.22); border-radius: 4px; }
.scroller figure { flex: 0 0 clamp(220px, 26vw, 330px); margin: 0; scroll-snap-align: start; }
.scroller img { aspect-ratio: 4/5; object-fit: cover; width: 100%; border-radius: var(--r); box-shadow: var(--shadow-s); background: var(--sand); }
.scroller figcaption { font-size: .82rem; color: #5c6752; margin-top: .6rem; letter-spacing: .02em; }
.section--dark .scroller figcaption { color: #b8c3aa; }

/* ---------- meat market ---------- */
.meat { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (max-width: 900px) { .meat { grid-template-columns: 1fr; } }
.meat-figures { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.meat-figures img { border-radius: var(--r); object-fit: cover; width: 100%; height: 100%; box-shadow: var(--shadow-m); }
.meat-figures figure { margin: 0; }
.meat-figures figure:first-child { grid-column: span 2; aspect-ratio: 16/9; }
.meat-figures figure:not(:first-child) { aspect-ratio: 4/5; }

/* ---------- honesty cards ---------- */
.honest { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.4rem; }
.honest-card {
  background: var(--paper); border: 1px solid var(--line-soft);
  border-radius: var(--r); padding: 1.6rem 1.5rem;
  box-shadow: var(--shadow-s);
}
.honest-num {
  font-family: var(--display); font-size: .85rem; font-weight: 700;
  letter-spacing: .18em; color: var(--gold-deep); display: block; margin-bottom: .7rem;
}
.honest-card h4 { font-size: 1.15rem; margin-bottom: .4rem; }
.honest-card p { font-size: .94rem; color: #4b5642; margin: 0; }

/* ---------- rates tables ---------- */
.rate-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.rate-card {
  border: 1px solid var(--line); border-radius: var(--r); padding: 1.4rem 1.35rem;
  background: var(--paper); position: relative; overflow: hidden;
}
.rate-card--peak { background: linear-gradient(170deg, #fffdf7, var(--cream)); border-color: rgba(217,169,60,.5); }
.rate-tag { font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: .2rem; }
.rate-when { font-family: var(--display); font-size: 1.18rem; margin-bottom: .1rem; }
.rate-sub { font-size: .82rem; color: #6c7761; margin-bottom: 1rem; }
.rate-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.rate-lines li { display: flex; justify-content: space-between; gap: 1rem; font-size: .93rem; border-bottom: 1px dashed var(--line-soft); padding-bottom: .5rem; }
.rate-lines li:last-child { border-bottom: 0; padding-bottom: 0; }
.rate-lines b { font-family: var(--display); font-weight: 600; font-size: 1.05rem; white-space: nowrap; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); }
table.rates { width: 100%; border-collapse: collapse; min-width: 680px; font-size: .93rem; }
table.rates th, table.rates td { padding: .95rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line-soft); }
table.rates thead th { background: var(--forest); color: var(--cream); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
table.rates tbody tr:hover { background: rgba(125,143,107,.07); }
table.rates td b { font-family: var(--display); font-size: 1.02rem; }
table.rates .unit-cell { font-family: var(--display); font-size: 1.08rem; font-weight: 600; }
table.rates tbody tr:last-child td { border-bottom: 0; }

/* ---------- checklist ---------- */
.checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .4rem 2rem; list-style: none; padding: 0; margin: 0; }
.checks li { display: flex; gap: .6rem; padding: .45rem 0; font-size: .95rem; border-bottom: 1px solid var(--line-soft); }
.checks svg { width: 17px; height: 17px; color: var(--sage); flex: none; margin-top: .25rem; }

.rules { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.rules li { display: flex; gap: .7rem; font-size: .95rem; align-items: flex-start; }
.rules svg { width: 17px; height: 17px; flex: none; margin-top: .28rem; color: var(--clay); }

/* ---------- gallery ---------- */
.gal-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.2rem; }
.gal-filters button {
  border: 1px solid var(--line); background: transparent; color: #3f4c33;
  padding: .55rem 1.05rem; border-radius: 100px; font-size: .87rem; font-weight: 600;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.gal-filters button:hover { background: rgba(19,29,14,.05); }
.gal-filters button.is-active { background: var(--forest); color: var(--cream); border-color: var(--forest); }

.masonry { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; grid-auto-rows: 12px; }
@media (max-width: 900px) { .masonry { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .masonry { grid-template-columns: 1fr; } }
.masonry figure { margin: 0; position: relative; cursor: zoom-in; border-radius: var(--r); overflow: hidden; background: var(--sand); box-shadow: var(--shadow-s); }
.masonry img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), filter .4s var(--ease); }
.masonry figure:hover img { transform: scale(1.04); }
.masonry figcaption {
  position: absolute; inset: auto 0 0 0; padding: 2.2rem .9rem .8rem;
  background: linear-gradient(transparent, rgba(11,18,8,.85));
  color: var(--cream); font-size: .82rem; opacity: 0; transition: opacity .3s var(--ease);
}
.masonry figure:hover figcaption { opacity: 1; }

.grid-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .8rem; }
.grid-gal figure { margin: 0; aspect-ratio: 4/3; border-radius: var(--r); overflow: hidden; cursor: zoom-in; background: var(--sand); }
.grid-gal img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.grid-gal figure:hover img { transform: scale(1.06); }

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(9,14,6,.95);
  display: none; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 100%; max-height: 82vh; object-fit: contain; border-radius: var(--r); box-shadow: var(--shadow-l); }
.lb-cap { position: absolute; bottom: clamp(1rem, 3vw, 2rem); left: 0; right: 0; text-align: center; color: var(--sand); font-size: .88rem; }
.lb-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(247,242,230,.1); border: 1px solid rgba(247,242,230,.25); color: var(--cream);
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  transition: background-color .2s var(--ease);
}
.lb-btn:hover { background: rgba(247,242,230,.22); }
.lb-btn svg { width: 22px; height: 22px; }
.lb-prev { left: clamp(.6rem, 2vw, 2rem); }
.lb-next { right: clamp(.6rem, 2vw, 2rem); }
.lb-close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); transform: none; }

/* ---------- booking form ---------- */
.booking { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 900px) { .booking { grid-template-columns: 1fr; } }
.form-card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(1.5rem, 3vw, 2.4rem);
  box-shadow: var(--shadow-m);
}
.section--dark .form-card { background: #fdfbf6; color: var(--ink); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #4b5642; margin-bottom: .4rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: .8rem .9rem; font: inherit; font-size: .97rem;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold-deep); box-shadow: 0 0 0 3px rgba(217,169,60,.22);
}
.field textarea { min-height: 110px; resize: vertical; }
.field-hint { font-size: .78rem; color: #6c7761; margin-top: .35rem; }
.field.is-error input, .field.is-error select { border-color: var(--clay); box-shadow: 0 0 0 3px rgba(169,81,47,.15); }
.err-msg { display: none; color: var(--clay); font-size: .8rem; margin-top: .35rem; font-weight: 600; }
.field.is-error .err-msg { display: block; }
.form-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .4rem; }
.form-note { font-size: .82rem; color: #6c7761; margin-top: 1rem; }

/* The one or two rules guests keep asking about anyway. Sits above the fields,
   in the clay accent rather than the sage muted tone, because the whole point
   is that it is the line they do not skim past. */
.form-rules {
  display: flex; align-items: flex-start; gap: .55rem;
  background: rgba(169,81,47,.08); border-left: 3px solid var(--clay);
  border-radius: 0 var(--r) var(--r) 0;
  padding: .7rem .9rem; margin-bottom: 1.5rem;
  font-size: .88rem; color: #5f3222; font-weight: 600;
}
.form-rules svg { flex: none; width: 1.05rem; height: 1.05rem; margin-top: .08rem; }
.form-success {
  display: none; background: rgba(125,143,107,.14); border: 1px solid rgba(125,143,107,.4);
  border-radius: var(--r); padding: 1.2rem 1.3rem; margin-top: 1.2rem;
}
.form-success.is-visible { display: block; }
.form-success h4 { font-size: 1.1rem; margin-bottom: .3rem; }
.form-success pre {
  white-space: pre-wrap; font-family: var(--body); font-size: .86rem; background: #fff;
  border: 1px solid var(--line-soft); border-radius: var(--r-sm); padding: .9rem; margin: .8rem 0 0; color: #3a4433;
  max-height: 220px; overflow: auto;
}

.contact-cards { display: grid; gap: 1rem; }
.contact-card {
  display: flex; gap: 1rem; align-items: flex-start;
  border: 1px solid var(--line-soft); border-radius: var(--r); padding: 1.2rem 1.3rem;
  background: var(--paper); text-decoration: none;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.contact-card:hover { border-color: rgba(19,29,14,.24); box-shadow: var(--shadow-s); }
.contact-card svg { width: 22px; height: 22px; color: var(--gold-deep); flex: none; margin-top: .2rem; }
.contact-card b { display: block; font-family: var(--display); font-size: 1.05rem; }
.contact-card span { font-size: .9rem; color: #5c6752; }

/* ---------- footer ---------- */
.site-foot { background: var(--ink); color: #c2cdb2; padding: clamp(3.5rem, 7vw, 5.5rem) 0 2rem; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: clamp(1.6rem, 4vw, 3rem); }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; } }
.site-foot h5 { font-family: var(--body); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin: 0 0 1rem; }
.site-foot a { text-decoration: none; }
.site-foot a:hover { color: var(--gold); }
.foot-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .93rem; }
.foot-brand .brand-name { color: var(--cream); }
.foot-brand p { font-size: .93rem; margin-top: 1rem; max-width: 34ch; }
.foot-bottom {
  margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid rgba(247,242,230,.12);
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between;
  font-size: .8rem; color: #8d9a7c;
}

/* ---------- mobile sticky bar ---------- */
.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  display: none; gap: 1px; background: rgba(247,242,230,.2);
  box-shadow: 0 -10px 30px -18px rgba(19,29,14,.7);
}
.mobile-bar a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .95rem .5rem; background: var(--forest); color: var(--cream);
  text-decoration: none; font-size: .9rem; font-weight: 600; min-height: 52px;
}
.mobile-bar a.is-gold { background: var(--gold); color: var(--ink); }
.mobile-bar svg { width: 17px; height: 17px; }
@media (max-width: 780px) {
  .mobile-bar { display: flex; }
  body { padding-bottom: 52px; }
}

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
.reveal[data-d="4"] { transition-delay: .32s; }
.reveal[data-d="5"] { transition-delay: .4s; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .hero-slide img { animation: none; transform: none; }
}

/* ---------- small utilities ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.stack-sm > * + * { margin-top: .8rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.center { text-align: center; }
.center .eyebrow { justify-content: center; }
.center .lede { margin-inline: auto; }
.max-60 { max-width: 60ch; }
.divider { height: 1px; background: var(--line); border: 0; margin: clamp(2.5rem, 5vw, 4rem) 0; }

/* ---------------------------------------------------------------- honeypot
   Spam trap on the enquiry form. Positioned off-screen rather than
   display:none, because some bots specifically skip hidden inputs and some
   browsers skip them for autofill. Never remove: it is the only spam defence
   on a public form that emails straight to Lare. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ================================================================= assistant
   The website assistant. Built from the farm tokens above, deliberately not the
   default rounded-purple chat widget: it should read as part of the signage,
   not as a bolted-on third party thing.
   Mobile bar is 52px tall and z-index 55, so the panel and the button clear it
   and the panel sits BELOW it in stacking order rules while still being usable. */

.chat-fab {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 60;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .8rem 1.15rem; border: 1px solid var(--gold-deep); cursor: pointer;
  background: var(--forest); color: var(--cream);
  font-family: var(--body); font-size: .92rem; font-weight: 600; letter-spacing: .01em;
  box-shadow: 0 14px 34px -16px rgba(19, 29, 14, .85);
  transition: background .22s ease, transform .22s ease, opacity .18s ease;
}
.chat-fab:hover { background: var(--moss); }
.chat-fab svg { width: 19px; height: 19px; color: var(--gold); }
.chat-fab.is-hidden { opacity: 0; pointer-events: none; transform: translateY(6px); }

.chat-panel {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 61;
  width: min(380px, calc(100vw - 2.2rem)); max-height: min(560px, calc(100vh - 2.2rem));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper); border: 1px solid var(--sand);
  box-shadow: 0 26px 60px -22px rgba(19, 29, 14, .6);
  opacity: 0; transform: translateY(10px);
  transition: opacity .22s ease, transform .22s ease;
}
.chat-panel.is-open { opacity: 1; transform: none; }
/* An author `display` beats the [hidden] attribute's UA rule, so without this
   the closed panel stays in the layout at opacity 0 and swallows the clicks
   meant for the button underneath it. */
.chat-panel[hidden] { display: none; }

.chat-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .95rem 1.1rem; background: var(--forest); color: var(--cream);
}
.chat-head b { font-family: var(--display); font-size: 1.06rem; display: block; }
.chat-head span { font-size: .8rem; color: var(--sage); }
.chat-close {
  background: none; border: 0; color: var(--cream); cursor: pointer; padding: .2rem;
  display: flex; opacity: .8;
}
.chat-close:hover { opacity: 1; }

.chat-log {
  flex: 1; overflow-y: auto; padding: 1.1rem;
  display: flex; flex-direction: column; gap: .7rem;
  background: var(--cream);
}
.chat-msg {
  max-width: 86%; padding: .7rem .9rem; font-size: .93rem; line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.chat-msg--bot { align-self: flex-start; background: var(--paper); border: 1px solid var(--sand); color: var(--ink); }
.chat-msg--me  { align-self: flex-end;   background: var(--forest); color: var(--cream); }

.chat-suggest { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .2rem; }
.chat-suggest button {
  background: transparent; border: 1px solid var(--sand); color: var(--moss);
  padding: .42rem .7rem; font-family: var(--body); font-size: .82rem; cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}
.chat-suggest button:hover { border-color: var(--gold-deep); color: var(--ink); }

.chat-typing { display: flex; gap: .3rem; align-items: center; }
.chat-typing span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--sage);
  animation: chatDot 1.1s infinite ease-in-out;
}
.chat-typing span:nth-child(2) { animation-delay: .16s; }
.chat-typing span:nth-child(3) { animation-delay: .32s; }
@keyframes chatDot { 0%, 60%, 100% { opacity: .3 } 30% { opacity: 1 } }

.chat-form { display: flex; gap: .5rem; padding: .8rem; border-top: 1px solid var(--sand); background: var(--paper); }
.chat-form input {
  flex: 1; padding: .7rem .8rem; border: 1px solid var(--sand); background: #fff;
  font-family: var(--body); font-size: .93rem; color: var(--ink);
}
.chat-form input:focus { outline: 2px solid var(--gold); outline-offset: -1px; }
.chat-form button {
  background: var(--gold); border: 0; color: var(--ink); cursor: pointer;
  padding: 0 .95rem; display: flex; align-items: center;
}
.chat-form button:hover { background: var(--gold-deep); }
.chat-form svg { width: 18px; height: 18px; }

.chat-foot {
  margin: 0; padding: .6rem .9rem .8rem; background: var(--paper);
  font-size: .76rem; color: var(--moss); line-height: 1.5;
}
.chat-foot a { color: var(--moss); }

/* Clear the mobile action bar. Its min-height is 52px but it measures 55px in
   practice once padding and the icon line box are counted, so the offset is
   taken from the measured value with room to spare. Measured, not assumed. */
@media (max-width: 860px) {
  .chat-fab { bottom: calc(55px + .9rem); right: .8rem; padding: .7rem 1rem; }
  .chat-panel {
    right: .5rem; left: .5rem; width: auto;
    bottom: calc(55px + .7rem); max-height: calc(100vh - 55px - 2rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-fab, .chat-panel { transition: none; }
  .chat-typing span { animation: none; opacity: .6; }
}