/* ==========================================================================
   Dilham Hall Retreats — prototype stylesheet
   Brand colours are taken VERBATIM from the live site's Elementor global kit.
   Do not substitute these hex values.
   ========================================================================== */

:root {
  /* --- Brand colours (exact, from live site) --- */
  --sage:      #677B73;  /* primary  (--e-global-color-primary) */
  --sage-deep: #4D5C56;  /* dark green, hovers, headings        */
  --forest:    #062E28;  /* darkest green, dark sections/footer */
  --slate:     #8A9B9F;  /* cool grey-blue secondary            */
  --sand:      #D6C2B7;  /* warm accent                         */
  --mist:      #D8DCDB;  /* pale grey-green, light backgrounds  */
  --ink:       #202020;  /* body text                           */
  --border:    #CECECE;  /* dividers / borders                  */
  --white:     #FFFFFF;

  /* --- Neutral canvas (warm near-white, not a brand colour change) --- */
  --paper:     #FBFAF7;
  --paper-2:   #F4F1EB;

  /* --- Typography --- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Nunito Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  /* --- Layout --- */
  --maxw: 1240px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 18px 50px -24px rgba(6, 46, 40, 0.35);
  --shadow-sm: 0 8px 24px -16px rgba(6, 46, 40, 0.4);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font: inherit; cursor: pointer; border: none; background: none; }

/* ----------------------------------------------------------- typography */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--forest);
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 40;
}
.display {
  font-size: clamp(2.6rem, 6.5vw, 5.2rem);
  font-weight: 470;
  line-height: 0.98;
}
h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
h3 { font-size: clamp(1.35rem, 2.4vw, 1.9rem); }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--sage);
  display: inline-block;
}
.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: #41504a; max-width: 56ch; }
.muted { color: #5d6b66; }

/* -------------------------------------------------------------- layout */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(4rem, 9vw, 8rem); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.center { text-align: center; margin-inline: auto; }
.stack > * + * { margin-top: 1.1rem; }

/* -------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.95rem 1.7rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  transition: transform .35s var(--ease), background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
  will-change: transform;
}
.btn svg { width: 1.05em; height: 1.05em; }
.btn--primary { background: var(--forest); color: var(--white); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--sage-deep); transform: translateY(-2px); }
.btn--sand { background: var(--sand); color: var(--forest); }
.btn--sand:hover { background: #e2d3c9; transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--forest); box-shadow: inset 0 0 0 1.5px rgba(6,46,40,.25); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--forest); transform: translateY(-2px); }
/* Frosted glass buttons: reusable .btn--glass, and any header ghost button while over the hero/page-hero */
.btn--glass,
.site-header:not(.is-scrolled) .btn--ghost {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
          backdrop-filter: blur(12px) saturate(150%);
}
.btn--glass:hover,
.site-header:not(.is-scrolled) .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.26);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75);
  transform: translateY(-2px);
}
.btn--light { background: var(--white); color: var(--forest); }
.btn--light:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn--lg { padding: 1.1rem 2rem; font-size: 1rem; }

/* --------------------------------------------------------------- header */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center;
  padding: 1.1rem 0;
  transition: background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand { display: flex; align-items: center; gap: 0.7rem; }

/* Brand logo: white SVG over the dark hero, forest-green SVG when header turns solid */
.brand-logo { display: block; width: clamp(150px, 16vw, 178px); height: auto; }
.brand-logo--dark { display: none; }
.site-header.is-scrolled .brand-logo--light { display: none; }
.site-header.is-scrolled .brand-logo--dark { display: block; }
.footer-brand .brand-logo { width: 210px; margin-bottom: .4rem; }

.nav { display: flex; align-items: center; gap: 2.2rem; }
.nav a {
  color: var(--white); font-weight: 600; font-size: 0.95rem;
  letter-spacing: 0.015em;
  position: relative; padding: 0.15rem 0;
  transition: color .3s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 50%; bottom: -4px; height: 2px; width: 0;
  border-radius: 2px; background: var(--sand);
  transform: translateX(-50%);
  transition: width .4s var(--ease);
}
.nav a:hover::after,
.nav a[aria-current="page"]::after { width: 100%; }
.nav a[aria-current="page"] { font-weight: 700; }
.header-cta { display: flex; align-items: center; gap: 1rem; }

/* Book now CTA: a little more depth in the header */
.header-cta .btn--sand { box-shadow: 0 8px 22px -12px rgba(6,46,40,.5); }
.header-cta .btn--sand:hover { box-shadow: 0 12px 26px -10px rgba(6,46,40,.55); }

/* Brand logo: gentle hover lift */
.brand-logo { transition: transform .4s var(--ease); }
.brand:hover .brand-logo { transform: scale(1.025); }

/* scrolled state: frosted glass */
.site-header.is-scrolled {
  box-shadow: 0 1px 0 rgba(6,46,40,.06), 0 18px 44px -34px rgba(6,46,40,.7);
  padding: 0.65rem 0;
}
/* Frosted glass on a pseudo-element so the header itself is NOT a containing
   block for the fixed mobile menu. (backdrop-filter on the header element traps
   position:fixed children inside the thin bar.) */
.site-header.is-scrolled::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(251, 250, 247, 0.82);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
          backdrop-filter: blur(16px) saturate(140%);
}
.site-header.is-scrolled .brand__mark { color: var(--forest); }
.site-header.is-scrolled .nav a { color: var(--sage-deep); }
.site-header.is-scrolled .nav a:hover,
.site-header.is-scrolled .nav a[aria-current="page"] { color: var(--forest); }
.site-header.is-scrolled .nav a::after { background: var(--sage); }

.nav-toggle { display: none; }
.nav__close { display: none; }

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: center;   /* vertically centred */
  color: var(--white);
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    /* top scrim keeps the header readable from the start, before any scroll */
    linear-gradient(180deg, rgba(6,46,40,.55) 0%, rgba(6,46,40,0) 16%),
    /* left-to-right scrim keeps the left-hand text readable, pod stays clear on the right */
    linear-gradient(90deg, rgba(6,46,40,.94) 0%, rgba(6,46,40,.84) 26%, rgba(6,46,40,.55) 44%, rgba(6,46,40,.2) 64%, rgba(6,46,40,0) 80%),
    linear-gradient(0deg, rgba(6,46,40,.5) 0%, rgba(6,46,40,0) 42%);
}
/* full-width container so the text block sits to the left, aligned with the logo */
.hero__inner { padding-block: clamp(3rem, 7vw, 6rem); max-width: var(--maxw); }
.hero .display { margin-top: 1.7rem; text-shadow: 0 2px 26px rgba(6,46,40,.4); }
.hero .lead { max-width: 46ch; text-shadow: 0 1px 14px rgba(6,46,40,.5); }

/* award badge */
.award-pill {
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--sand); color: var(--forest);
  font-weight: 800; font-size: .82rem; letter-spacing: .02em;
  padding: .5rem 1rem .5rem .8rem; border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.award-pill svg { width: 1.15rem; height: 1.15rem; }
.hero .display { color: var(--white); text-wrap: balance; }
.hero .lead { color: rgba(255,255,255,.9); margin-top: 1.4rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.2rem; }
.hero__scroll {
  position: absolute; right: var(--gutter); bottom: 2.2rem; z-index: 1;
  display: flex; align-items: center; gap: .6rem;
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700;
  color: rgba(255,255,255,.8);
}
.hero__trust {
  display: flex; flex-wrap: wrap; gap: 1.4rem 2rem; margin-top: 2.4rem;
  align-items: center;
  font-size: .82rem; letter-spacing: .04em; color: rgba(255,255,255,.85);
}
.hero__trust span { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; }
.hero__trust svg { width: 1.1rem; height: 1.1rem; color: var(--sand); }

@media (max-width: 760px){
  .hero { align-items: flex-end; }
  .hero__inner { padding-top: 6rem; padding-bottom: clamp(2.5rem,8vw,4rem); }
  .hero__media img { object-position: 64% center; }
  .hero::after {
    background:
      linear-gradient(180deg, rgba(6,46,40,.72) 0%, rgba(6,46,40,.18) 13%, rgba(6,46,40,0) 24%),
      linear-gradient(0deg, rgba(6,46,40,.92) 0%, rgba(6,46,40,.4) 45%, rgba(6,46,40,.1) 75%);
  }
}

/* ---------------------------------------------------- "choose" section */
.choose__head { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: end; margin-bottom: 3.2rem; }
@media (max-width: 820px){ .choose__head { grid-template-columns: 1fr; gap: 1rem; } }

.retreats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.retreat {
  position: relative; display: flex; flex-direction: column;
  background: var(--white); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow); border: 1px solid rgba(6,46,40,.06);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.retreat:hover { transform: translateY(-6px); box-shadow: 0 28px 60px -28px rgba(6,46,40,.5); }
.retreat__media { position: relative; aspect-ratio: 4 / 3.2; overflow: hidden; }
.retreat__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.retreat:hover .retreat__media img { transform: scale(1.06); }
.retreat__tag {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;   /* stay above the image as it zooms on hover */
  background: rgba(251,250,247,.92); color: var(--forest);
  font-weight: 800; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .45rem .8rem; border-radius: 999px; backdrop-filter: blur(4px);
}
.retreat__body { padding: 1.6rem 1.6rem 1.8rem; display: flex; flex-direction: column; flex: 1; }
.retreat__name { font-size: 1.6rem; margin-bottom: .15rem; }
.retreat__sub { color: var(--sage); font-weight: 700; font-size: .9rem; margin-bottom: .9rem; }
.retreat__desc { color: #51605a; font-size: .98rem; margin-bottom: 1.3rem; }
.retreat__cta { margin-top: auto; }

/* fact badges */
.facts { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.3rem; }
.fact {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .82rem; font-weight: 700; color: var(--sage-deep);
  background: var(--mist); padding: .4rem .7rem; border-radius: 999px;
}
.fact svg { width: 1.05rem; height: 1.05rem; }
.fact--yes { background: #e4ece6; color: var(--sage-deep); }
.fact--no  { background: #f0e7e3; color: #9a7a68; }
.fact--no svg { opacity: .8; }

@media (max-width: 940px){ .retreats { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; } }

/* ----------------------------------------------------- comparison band */
.compare { background: var(--forest); color: var(--white); }
.compare h2 { color: var(--white); }
.compare .eyebrow { color: var(--sand); }
.compare .eyebrow::before { background: var(--sand); }
.table-wrap { overflow-x: auto; margin-top: 2.5rem; -webkit-overflow-scrolling: touch; }
.cmp {
  width: 100%; border-collapse: collapse; min-width: 640px;
  font-size: .98rem;
}
.cmp th, .cmp td { padding: 1.05rem 1.1rem; text-align: left; border-bottom: 1px solid rgba(255,255,255,.14); }
.cmp thead th { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; color: var(--white); }
.cmp thead th small { display:block; font-family: var(--font-body); font-weight: 700; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sand); margin-top: .3rem; }
.cmp tbody th { font-weight: 700; color: rgba(255,255,255,.78); font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; }
.cmp td { color: rgba(255,255,255,.95); font-weight: 600; }
.cmp .y { color: #b9e6c9; }
.cmp .n { color: var(--sand); }
.cmp tbody tr:hover td, .cmp tbody tr:hover th { background: rgba(255,255,255,.04); }

/* ------------------------------------------------------- feature bands */
.feature { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.feature--rev .feature__media { order: -1; }
.feature__media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 5/4; }
.feature__media img { width:100%; height:100%; object-fit: cover; }
@media (max-width: 860px){ .feature, .feature--rev .feature__media { grid-template-columns: 1fr; order: 0; } }

.pricecard {
  margin-top: 1.8rem; background: var(--white); border-radius: var(--radius);
  border: 1px solid var(--border); padding: 1.4rem 1.5rem; box-shadow: var(--shadow-sm);
}
.pricecard h4 { font-family: var(--font-body); font-weight: 800; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sage); margin-bottom: .8rem; }
.pricerow { display:flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px dashed var(--border); font-weight: 600; }
.pricerow:last-child { border-bottom: 0; }
.pricerow b { font-family: var(--font-display); font-weight: 500; color: var(--forest); }

/* ----------------------------------------------------------- to-do grid */
.todo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; margin-top: 3rem; }
.todo {
  position: relative; border-radius: var(--radius); overflow: hidden; min-height: 240px;
  display: flex; align-items: flex-end; color: var(--white); isolation: isolate;
  box-shadow: var(--shadow-sm);
}
.todo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index:-2; transition: transform 1s var(--ease); }
.todo::after { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(0deg, rgba(6,46,40,.85), rgba(6,46,40,.05) 70%); }
.todo:hover img { transform: scale(1.07); }
.todo__label { padding: 1.2rem; }
.todo__label b { font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; display:block; }
.todo__label span { font-size: .82rem; opacity: .85; }
.todo--wide { grid-column: span 2; }
.todo--feature { min-height: 320px; box-shadow: 0 0 0 3px var(--sand), var(--shadow); }
.todo--feature .todo__label b { font-size: 1.65rem; }
.todo__flag {
  position: absolute; top: 1rem; left: 1rem; z-index: 1;
  background: var(--sand); color: var(--forest);
  font-weight: 800; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .4rem .8rem; border-radius: 999px;
}
@media (max-width: 860px){ .todo-grid { grid-template-columns: 1fr 1fr; } .todo--wide { grid-column: span 2; } }
@media (max-width: 520px){ .todo-grid { grid-template-columns: 1fr; } .todo--wide { grid-column: span 1; } }

/* ===================== interior page hero ===================== */
.page-hero { position: relative; padding-top: clamp(7.5rem, 13vw, 11rem); padding-bottom: clamp(3rem,7vw,5.5rem); color: var(--white); isolation: isolate; }
.page-hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.page-hero::after { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(0deg, rgba(6,46,40,.92) 0%, rgba(6,46,40,.5) 60%, rgba(6,46,40,.35) 100%); }
.page-hero h1 { color:var(--white); max-width: 18ch; }
.page-hero .lead { color: rgba(255,255,255,.9); margin-top:1rem; }
.crumbs { font-size:.82rem; letter-spacing:.06em; color: rgba(255,255,255,.8); margin-bottom:1rem; font-weight:600; }
.crumbs a:hover { color: var(--sand); }

/* prose + content helpers */
.prose p { margin-bottom: 1.1rem; max-width: 68ch; }
.prose h3 { margin: 2rem 0 .8rem; }
.prose h2 { margin: 2.6rem 0 1rem; font-size: 1.5rem; }
.prose h2:first-of-type { margin-top: .5rem; }
.prose ul { list-style: disc; padding-left: 1.4rem; margin: 0 0 1.2rem; max-width: 68ch; }
.prose ul li { margin-bottom: .5rem; }
.prose ul ul { list-style: circle; margin: .5rem 0; }
.prose a { color: var(--sage-deep); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--forest); }
.legal-meta { color: var(--slate); font-weight: 600; font-size: .92rem; }
.split { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4.5rem); align-items:center; }
.split--narrow { grid-template-columns: 1.2fr .8fr; }
@media (max-width: 820px){ .split, .split--narrow { grid-template-columns:1fr; } }
.media-frame { border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow); }
.media-frame img { width:100%; height:100%; object-fit:cover; }

/* full canoe price table */
.ptable { width:100%; border-collapse: collapse; background:var(--white); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-sm); }
.ptable th, .ptable td { padding: .95rem 1.1rem; text-align:left; border-bottom:1px solid var(--border); }
.ptable thead th { background: var(--forest); color:#fff; font-family:var(--font-body); font-weight:800; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; }
.ptable tbody th { font-weight:700; color:var(--forest); }
.ptable td { font-weight:600; color:#3f4e48; }
.ptable tbody tr:last-child td, .ptable tbody tr:last-child th { border-bottom:none; }
.ptable .price { font-family: var(--font-display); font-weight:500; color:var(--forest); }

/* product cards (canoe) */
.products { display:grid; grid-template-columns: repeat(4,1fr); gap:1.1rem; margin-top:2.5rem; }
@media (max-width: 900px){ .products { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .products { grid-template-columns: 1fr; } }
.product { background:var(--white); border:1px solid var(--border); border-radius: var(--radius-lg); padding: 1.6rem 1.4rem; text-align:center; box-shadow: var(--shadow-sm); }
.product svg { width: 2.4rem; height: 2.4rem; color: var(--sage); margin-bottom: .8rem; }
.product h3 { font-size: 1.25rem; }
.product p { color:#51605a; font-size:.92rem; margin-top:.4rem; }

/* steps */
.steps { display:grid; grid-template-columns: repeat(3,1fr); gap:1.4rem; margin-top:2.5rem; counter-reset: step; }
@media (max-width: 760px){ .steps { grid-template-columns:1fr; } }
.step { background:var(--white); border-radius:var(--radius-lg); padding:1.8rem 1.6rem; box-shadow:var(--shadow-sm); border:1px solid rgba(6,46,40,.06); }
.step::before { counter-increment: step; content: counter(step); display:grid; place-items:center; width:2.6rem; height:2.6rem; border-radius:999px; background:var(--sand); color:var(--forest); font-family:var(--font-display); font-weight:600; font-size:1.2rem; margin-bottom:1rem; }
.step h3 { font-size:1.2rem; }
.step p { color:#51605a; margin-top:.4rem; }

/* event/offer cards */
.cards-3 { display:grid; grid-template-columns: repeat(3,1fr); gap:1.4rem; margin-top:2.5rem; }
@media (max-width: 860px){ .cards-3 { grid-template-columns:1fr; max-width:30rem; margin-inline:auto; } }
.ecard { background:var(--white); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; }
.ecard img { aspect-ratio: 3/2; object-fit:cover; width:100%; }
.ecard__body { padding:1.5rem; display:flex; flex-direction:column; flex:1; }
.ecard__body h3 { font-size:1.4rem; }
.ecard__body p { color:#51605a; margin:.5rem 0 1.2rem; font-size:.96rem; }

/* contact + form */
.field { display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.1rem; }
.field label { font-weight:700; font-size:.88rem; color:var(--forest); }
.field input, .field select, .field textarea {
  font:inherit; padding:.85rem 1rem; border:1.5px solid var(--border); border-radius:var(--radius);
  background:var(--white); color:var(--ink); transition: border-color .2s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color: var(--sage); }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width: 560px){ .field-row { grid-template-columns:1fr; } }
.contact-grid { display:grid; grid-template-columns: 1fr 1.2fr; gap: clamp(2rem,5vw,4rem); }
@media (max-width: 820px){ .contact-grid { grid-template-columns:1fr; } }
.contact-card { background:var(--paper-2); border-radius:var(--radius-lg); padding:1.6rem; margin-bottom:1rem; }
.contact-card b { display:block; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--sage); margin-bottom:.4rem; }
.contact-card a, .contact-card span { font-size:1.05rem; font-weight:600; color:var(--forest); }

/* FAQ */
.faq { max-width: 60rem; margin-top:2.5rem; }
.faq details { border-bottom:1px solid var(--border); padding:1.1rem 0; }
.faq summary { font-family:var(--font-display); font-weight:500; font-size:1.2rem; color:var(--forest); cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:1rem; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-family:var(--font-body); color:var(--sage); font-size:1.4rem; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin-top:.8rem; color:#4a5852; max-width:none; }

/* attraction list (things to do) */
.cat { margin-top:3rem; }
.cat h2 { display:flex; align-items:center; gap:.8rem; }
.cat h2 svg { width:1.6rem; height:1.6rem; color:var(--sage); }
.places { display:grid; grid-template-columns: repeat(3,1fr); gap:1rem; margin-top:1.4rem; }
@media (max-width: 820px){ .places { grid-template-columns:1fr 1fr; } }
@media (max-width: 520px){ .places { grid-template-columns:1fr; } }
.place { background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem 1.2rem; }
.place b { color:var(--forest); display:block; }
.place span { font-size:.86rem; color:#6b7873; }
.place em { font-style:normal; font-weight:700; color:var(--sage); font-size:.8rem; }

/* award strip */
.award-strip { background: var(--sand); }
.award-strip .container { display:flex; align-items:center; justify-content:center; gap:1.2rem; padding-block:1.4rem; text-align:center; flex-wrap:wrap; color:var(--forest); }
.award-strip svg { width:2rem; height:2rem; }
.award-strip b { font-family:var(--font-display); font-weight:500; font-size:1.3rem; }

/* ===================== Stay: category chooser + pod cards ===================== */
.cat-cards { display:grid; grid-template-columns: repeat(3,1fr); gap:1.4rem; margin-top:2.6rem; }
.cat-card {
  position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  min-height: 340px; border-radius: var(--radius-lg); overflow:hidden; isolation:isolate;
  color:#fff; box-shadow: var(--shadow); text-align:left;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.cat-card:hover { transform: translateY(-6px); box-shadow: 0 28px 60px -28px rgba(6,46,40,.5); }
.cat-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition: transform 1.1s var(--ease); }
.cat-card:hover img { transform: scale(1.06); }
.cat-card::after { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(0deg, rgba(6,46,40,.9) 6%, rgba(6,46,40,.15) 60%, rgba(6,46,40,.35) 100%); }
.cat-card__in { padding: 1.5rem; }
.cat-card__tag { display:inline-block; background:rgba(251,250,247,.92); color:var(--forest); font-weight:800; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; padding:.35rem .7rem; border-radius:999px; margin-bottom:.7rem; }
.cat-card h3 { color:#fff; font-size:1.8rem; }
.cat-card p { color:rgba(255,255,255,.9); font-size:.95rem; margin:.3rem 0 1rem; }
.cat-card .mini-facts { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.1rem; font-size:.8rem; }
.cat-card .mini-facts span { background:rgba(255,255,255,.16); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); padding:.3rem .6rem; border-radius:999px; font-weight:700; }
@media (max-width:900px){ .cat-cards { grid-template-columns:1fr; max-width:30rem; margin-inline:auto; } }

.pod-cards { display:grid; grid-template-columns: repeat(3,1fr); gap:1.4rem; margin-top:2rem; }
@media (max-width:900px){ .pod-cards { grid-template-columns:1fr; max-width:30rem; margin-inline:auto; } }

/* ===================== Gallery + lightbox ===================== */
.gallery { display:grid; grid-template-columns: repeat(4,1fr); grid-auto-rows: 1fr; gap:.7rem; margin-top:2rem; }
.gallery button { all:unset; cursor:pointer; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; position:relative; display:block; box-sizing:border-box; }
.gallery button:focus-visible { outline:3px solid var(--sage); outline-offset:2px; }
.gallery img { width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); display:block; }
.gallery button:hover img { transform: scale(1.07); }
.gallery .g-main { grid-column: span 2; grid-row: span 2; }
.gallery .g-more::after { content: attr(data-more); position:absolute; inset:0; background:rgba(6,46,40,.62); color:#fff; display:grid; place-items:center; font-family:var(--font-display); font-size:1.25rem; font-weight:500; }
@media (max-width:680px){ .gallery { grid-template-columns: repeat(2,1fr); } .gallery .g-main { grid-column: span 2; grid-row:auto; } }

.lightbox { position:fixed; inset:0; z-index:300; background:rgba(6,46,40,.94); display:none; align-items:center; justify-content:center; padding:2rem; }
.lightbox.is-open { display:flex; }
.lightbox figure { margin:0; max-width:92vw; max-height:88vh; text-align:center; }
.lightbox img { max-width:92vw; max-height:78vh; border-radius:10px; box-shadow:0 30px 90px rgba(0,0,0,.55); }
.lightbox figcaption { color:rgba(255,255,255,.85); margin-top:.9rem; font-size:.9rem; letter-spacing:.02em; }
.lb-btn { position:absolute; background:rgba(255,255,255,.15); color:#fff; width:50px; height:50px; border-radius:999px; display:grid; place-items:center; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:background .2s var(--ease); }
.lb-btn:hover { background:rgba(255,255,255,.32); }
.lb-btn svg { width:1.5rem; height:1.5rem; }
.lb-close { top:1.3rem; right:1.3rem; }
.lb-prev { left:1.3rem; top:50%; transform:translateY(-50%); }
.lb-next { right:1.3rem; top:50%; transform:translateY(-50%); }

/* ===================== Pod page layout + check-dates panel ===================== */
.pod-layout { display:grid; grid-template-columns: 1fr 350px; gap: clamp(2rem,4vw,3.5rem); align-items:start; margin-top:2.6rem; }
@media (max-width:900px){ .pod-layout { grid-template-columns:1fr; } }
.checkpanel { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.6rem; box-shadow:var(--shadow); position:sticky; top:88px; }
.checkpanel h3 { font-size:1.5rem; }
.checkpanel label { display:block; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; font-weight:800; color:var(--sage); margin:.95rem 0 .3rem; }
.checkpanel input, .checkpanel select { width:100%; font:inherit; font-weight:600; color:var(--forest); padding:.7rem .8rem; border:1.5px solid var(--border); border-radius:var(--radius); background:var(--white); }
.checkpanel input:focus, .checkpanel select:focus { outline:none; border-color:var(--sage); }
.checkpanel .btn { width:100%; justify-content:center; margin-top:1.1rem; }
.checkpanel .pricenote { font-size:.84rem; color:#6b7873; margin-top:.9rem; text-align:center; }
.checkpanel .booking-note { margin-top:1rem; background:var(--mist); color:var(--forest); border:none; }

/* ----------------------------------------------------------- story band */
.story { background: var(--paper-2); }
.story__grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); align-items:center; }
@media (max-width:860px){ .story__grid { grid-template-columns: 1fr; } }
.stats { display:flex; gap: 2.2rem; flex-wrap: wrap; margin-top: 2rem; }
.stat b { font-family: var(--font-display); font-weight: 500; font-size: 2.4rem; color: var(--sage); display:block; line-height: 1; }
.stat span { font-size: .85rem; color: #5d6b66; font-weight: 600; }

/* ---------------------------------------------------------- events band */
.events { position: relative; color: var(--white); isolation:isolate; border-radius: 0; overflow: hidden; }
.events img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.events::after { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(90deg, rgba(6,46,40,.9) 0%, rgba(6,46,40,.55) 60%, rgba(6,46,40,.3) 100%); }
.events h2 { color: var(--white); }
.events .eyebrow { color: var(--sand); }
.events .eyebrow::before { background: var(--sand); }
.events__inner { max-width: 36rem; padding-block: clamp(4rem,9vw,7rem); }

/* --------------------------------------------------------------- footer */
.site-footer { background: var(--forest); color: rgba(255,255,255,.8); padding-top: clamp(3.5rem,7vw,5.5rem); }
.footer-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem; padding-bottom: 3rem; }
.site-footer h4 { color: var(--white); font-family: var(--font-body); font-weight:800; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom: 1.1rem; }
.site-footer a:hover { color: var(--sand); }
.footer-links li { margin-bottom: .55rem; }
.footer-brand .brand__mark { color: var(--white); font-size: 1.5rem; }
.footer-contact li { margin-bottom: .7rem; font-size: .95rem; }
.footer-contact b { color: var(--white); display:block; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; }
.social { display:flex; gap:.7rem; margin-top:1.2rem; }
.social a { width:40px; height:40px; border-radius:999px; display:grid; place-items:center; background: rgba(255,255,255,.08); transition: background .3s var(--ease); }
.social a:hover { background: var(--sand); color: var(--forest); }
.social svg { width: 1.1rem; height:1.1rem; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 1.5rem 0; display:flex; flex-wrap:wrap; gap: 1rem; justify-content: space-between; font-size:.85rem; }
@media (max-width: 860px){ .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .footer-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------- reveal anim */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal][data-delay="1"]{ transition-delay:.08s; }
[data-reveal][data-delay="2"]{ transition-delay:.16s; }
[data-reveal][data-delay="3"]{ transition-delay:.24s; }
@media (prefers-reduced-motion: reduce){ [data-reveal]{ opacity:1; transform:none; } html{ scroll-behavior:auto; } }

/* ===================== STAY PAGE: sub-hero + search ===================== */
.subhero { position: relative; padding-top: clamp(7rem, 12vw, 10rem); padding-bottom: clamp(3rem,6vw,5rem); color: var(--white); isolation:isolate; }
.subhero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.subhero::after { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(0deg, rgba(6,46,40,.9), rgba(6,46,40,.35)); }
.subhero h1 { color:var(--white); }
.subhero .lead { color: rgba(255,255,255,.9); }

/* search-first booking bar (Airbnb-style: dates + guests + dog) */
.booking-bar {
  margin-top: 2rem; background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: .7rem; display: grid;
  grid-template-columns: repeat(3, 1fr) auto; gap: .4rem; align-items: stretch;
}
.bf { display:flex; flex-direction:column; gap:.25rem; padding: .8rem 1.1rem; border-radius: var(--radius); transition: background .25s var(--ease); }
.bf + .bf { border-left: 1px solid var(--border); }
.bf:hover { background: var(--paper); }
.bf label { font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; font-weight:800; color:var(--sage); }
.bf input, .bf select { border:none; background:transparent; font:inherit; font-weight:700; color:var(--forest); padding:0; outline:none; }
.booking-bar .btn { border-radius: var(--radius); justify-content:center; }
.booking-note { margin-top:1rem; background: rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); color:#fff; padding:.9rem 1.1rem; border-radius: var(--radius); font-size:.92rem; }
@media (max-width: 760px){ .booking-bar { grid-template-columns: 1fr; } .bf + .bf { border-left:none; border-top:1px solid var(--border); } }

/* --------------------------------------------------- canoe booking (custom front-end, Checkfront behind it) */
.cbook { background:var(--white); color:var(--forest); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:clamp(1.4rem,3vw,2.2rem); margin-top:2.6rem; max-width:760px; }
.cbook__head h3 { font-size:1.7rem; }
.cbook__head p { color:#51605a; margin-top:.4rem; max-width:52ch; }
.cbook__grid { display:grid; grid-template-columns:1fr 1.4fr; gap:1.2rem; margin-top:1.6rem; }
@media (max-width:620px){ .cbook__grid { grid-template-columns:1fr; } }
.cbook__field label, .cbook__flabel { display:block; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; font-weight:800; color:var(--sage); margin-bottom:.4rem; }
.cbook__field input[type="date"] { width:100%; font:inherit; font-weight:700; color:var(--forest); padding:.7rem .8rem; border:1.5px solid var(--border); border-radius:var(--radius); background:var(--white); }
.cbook__field input[type="date"]:focus { outline:none; border-color:var(--sage); }
.cbook__sessions { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.cbook__session { display:flex; flex-direction:column; gap:.15rem; text-align:left; padding:.65rem .85rem; border:1.5px solid var(--border); border-radius:var(--radius); background:var(--white); color:var(--forest); cursor:pointer; transition:border-color .2s var(--ease), background .2s var(--ease); }
.cbook__session b { font-weight:800; font-size:.95rem; }
.cbook__session span { font-size:.82rem; color:#6b7873; }
.cbook__session:hover { border-color:var(--sage); }
.cbook__session.is-active { background:var(--forest); border-color:var(--forest); color:#fff; }
.cbook__session.is-active span { color:rgba(255,255,255,.75); }
.cbook__session:focus-visible { outline:2px solid var(--sage); outline-offset:2px; }
.cbook__vlabel { font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; font-weight:800; color:var(--sage); margin:1.6rem 0 .6rem; }
.cbook__vessels { list-style:none; padding:0; display:flex; flex-direction:column; }
.cbook__vessel { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 0; border-top:1px solid var(--border); }
.cbook__vessel:last-child { border-bottom:1px solid var(--border); }
.cbook__vinfo b { display:block; font-weight:700; }
.cbook__vinfo span { font-family:var(--font-display); font-weight:500; color:var(--sage-deep); }
.cbook__vinfo em { font-style:normal; font-family:var(--font-body); font-weight:600; font-size:.78rem; color:#6b7873; }
.cbook__stepper { display:inline-flex; align-items:center; gap:.85rem; }
.cbook__step { width:2.1rem; height:2.1rem; border-radius:999px; border:1.5px solid var(--border); background:var(--white); color:var(--forest); font-size:1.2rem; line-height:1; cursor:pointer; display:grid; place-items:center; transition:border-color .2s var(--ease), background .2s var(--ease); }
.cbook__step:hover:not(:disabled) { border-color:var(--sage); background:var(--paper); }
.cbook__step:disabled { opacity:.35; cursor:not-allowed; }
.cbook__step:focus-visible { outline:2px solid var(--sage); outline-offset:2px; }
.cbook__stepper [data-cb-qty] { min-width:1.4ch; text-align:center; font-weight:800; font-variant-numeric:tabular-nums; }
.cbook__foot { display:flex; align-items:center; justify-content:space-between; gap:1.2rem; margin-top:1.6rem; flex-wrap:wrap; }
.cbook__total { display:flex; align-items:baseline; gap:.6rem; }
.cbook__total span { font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; font-weight:800; color:var(--sage); }
.cbook__total b { font-family:var(--font-display); font-weight:500; font-size:1.9rem; color:var(--forest); }
.cbook__foot .btn:disabled { opacity:.45; cursor:not-allowed; transform:none; }
.cbook__note { margin-top:1.1rem; background:var(--mist); color:var(--forest); padding:.9rem 1.1rem; border-radius:var(--radius); font-size:.92rem; }
.cbook__legal { color:rgba(255,255,255,.7); margin-top:1.3rem; font-size:.9rem; max-width:64ch; }
.cbook__legal a { color:var(--sand); font-weight:700; }
@media (max-width:480px){ .cbook__foot { flex-direction:column; align-items:stretch; } .cbook__foot .btn { width:100%; justify-content:center; } }

/* ===================== STAY PAGE: retreat detail ===================== */
.detail { scroll-margin-top: 90px; }
.detail__head { display:grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; align-items:end; margin-bottom: 2.4rem; }
@media (max-width: 760px){ .detail__head { grid-template-columns:1fr; } }
.detail__gallery { display:grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: .8rem; aspect-ratio: 16/10; }
.detail__gallery img { width:100%; height:100%; object-fit:cover; border-radius: var(--radius); }
.detail__gallery img:first-child { grid-row: span 2; }
@media (max-width: 560px){ .detail__gallery { grid-template-columns:1fr; grid-template-rows:none; aspect-ratio:auto; } .detail__gallery img:first-child{ grid-row:auto; } .detail__gallery img:nth-child(n+3){ display:none; } }

.amen { display:grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap:.7rem 1.4rem; margin-top: 1.6rem; }
.amen li { display:flex; align-items:center; gap:.6rem; font-weight:600; color:#3f4e48; }
.amen svg { width:1.15rem; height:1.15rem; color:var(--sage); flex:none; }

.callout { display:inline-flex; align-items:center; gap:.6rem; background:var(--sand); color:var(--forest); font-weight:800; padding:.55rem 1rem; border-radius:999px; font-size:.9rem; }

/* pod layout cards (Tonnage) */
.layouts { display:grid; grid-template-columns: repeat(3,1fr); gap:1.2rem; margin-top:2rem; }
@media (max-width: 860px){ .layouts { grid-template-columns:1fr; max-width:30rem; } }
.layout {
  background:var(--white); border:1px solid var(--border); border-radius: var(--radius-lg);
  overflow:hidden; box-shadow: var(--shadow-sm); display:flex; flex-direction:column;
}
.layout__top { padding:1.4rem 1.4rem 1rem; background:var(--paper-2); border-bottom:1px solid var(--border); }
.layout__n { font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:800; color:var(--sage); }
.layout__sleeps { font-family:var(--font-display); font-weight:500; font-size:1.7rem; color:var(--forest); line-height:1.1; margin-top:.2rem; }
.layout__beds { font-size:.92rem; color:#51605a; margin-top:.3rem; }
.layout__body { padding:1.2rem 1.4rem 1.5rem; }
.layout__pods { display:flex; flex-wrap:wrap; gap:.4rem; }
.pod-chip { font-size:.8rem; font-weight:700; color:var(--sage-deep); background:var(--mist); padding:.32rem .7rem; border-radius:999px; }
.layout__best { font-size:.9rem; color:#51605a; margin-top:1rem; }

/* --------------------------------------------------------- mobile nav */
@media (max-width: 900px){
  .nav, .header-cta .btn { display: none; }
  .nav-toggle { display: inline-flex; align-items:center; gap:.5rem; color: var(--white); font-weight:700; text-shadow: 0 1px 10px rgba(6,46,40,.6); }
  .site-header:not(.is-scrolled) .brand-logo--light { filter: drop-shadow(0 1px 7px rgba(6,46,40,.45)); }
  .site-header.is-scrolled .nav-toggle { color: var(--forest); }
  /* Fullscreen animated mobile menu */
  .nav.is-open {
    display: flex; flex-direction: column; gap: 1.6rem;
    position: fixed; inset: 0; z-index: 200;
    align-items: center; justify-content: center;
    padding: 2rem; font-size: clamp(1.7rem, 7vw, 2.3rem);
    background:
      radial-gradient(125% 75% at 50% 0%, rgba(103,123,115,.5), transparent 58%),
      rgba(6,46,40,.94);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
            backdrop-filter: blur(14px) saturate(120%);
    animation: navOverlayIn .4s var(--ease) both;
  }
  .nav.is-open a,
  .site-header.is-scrolled .nav.is-open a {
    color: var(--white); font-family: var(--font-display); font-weight: 500;
    opacity: 0; transform: translateY(16px);
    animation: navLinkIn .55s var(--ease) forwards;
  }
  .nav.is-open a::after { display: none; }
  .nav.is-open a:nth-child(2){ animation-delay:.07s }
  .nav.is-open a:nth-child(3){ animation-delay:.13s }
  .nav.is-open a:nth-child(4){ animation-delay:.19s }
  .nav.is-open a:nth-child(5){ animation-delay:.25s }
  .nav.is-open a:nth-child(6){ animation-delay:.31s }
  .nav.is-open a:nth-child(7){ animation-delay:.37s }
  .nav.is-open .nav__close {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 1.1rem; right: var(--gutter);
    width: 2.8rem; height: 2.8rem; border-radius: 999px;
    color: var(--white); font-size: 1.7rem; line-height: 1;
    background: rgba(255,255,255,.12);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
    animation: navOverlayIn .5s var(--ease) both;
    transition: background .25s var(--ease), transform .3s var(--ease);
  }
  .nav.is-open .nav__close:hover { background: rgba(255,255,255,.24); transform: rotate(90deg); }
}

/* Lock background scroll while the mobile menu is open */
body.nav-open { overflow: hidden; }

@keyframes navOverlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes navLinkIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .nav.is-open, .nav.is-open a, .nav.is-open .nav__close { animation: none; opacity: 1; transform: none; }
}