/* Sky Camp at Cherengin Hills: booking and enquiry page.
   Calm and photographic, after the owner's trailer: real footage and photos do the work,
   an elegant serif with its italic for display lines, spaced capitals for labels, and earthy
   neutrals from the photos. The logo's orange is kept for buttons and small labels.
   Display type: Cormorant Garamond. Text: Jost. */

:root {
  --ink: #1c1f1d;
  --ink-2: #4b514c;
  --ink-3: #646a64;
  --forest: #243029;
  --stone: #d6d0c3;
  --sand: #efebe2;
  --paper: #f8f6f1;
  --ember: #f75a3a;        /* the logo's orange */
  --ember-hover: #ff7356;
  --ember-deep: #b4401f;   /* orange text on light backgrounds */
  --ember-soft: #ffb39b;   /* orange text on dark backgrounds */
  --night: #17141f;        /* footer: a near-black with a little of the logo's purple */
  --danger: #a3261c;

  --serif: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --sans: "Jost", "Futura", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --gutter: max(20px, env(safe-area-inset-left), env(safe-area-inset-right));
  --radius: 3px;
  --veil: rgba(14, 16, 14, .55);

  color-scheme: light;
}

/* ---------- Base ---------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--sans);
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }
figure { margin: 0; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }

[hidden] { display: none !important; }

/* One language at a time. html[lang] is set by app.js; BM shows without JavaScript. */
html[lang="ms"] body [lang="en"]:not([data-always]),
html[lang="en"] body [lang="ms"]:not([data-always]) { display: none !important; }

.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter); }
.wrap.narrow { max-width: 820px; }

.skip {
  position: absolute; z-index: 50; left: 12px; top: -80px; padding: 10px 14px;
  background: var(--paper); color: var(--ink); font-weight: 500; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- Type ---------- */

.label {
  margin: 0 0 18px;
  font: 500 .75rem/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase;
  color: var(--ember-deep);
}
.label-light { color: rgba(255, 255, 255, .82); }
.label-ember { color: var(--ember-soft); }

.h2 {
  margin: 0 0 22px;
  font: 600 clamp(2.25rem, 8.4vw, 3.7rem)/1.04 var(--serif); letter-spacing: -.005em;
  text-wrap: balance;
}
.h2-italic { font-style: italic; font-weight: 500; }

.body-lg { max-width: 33em; margin: 0; font-size: 1.0625rem; color: var(--ink-2); }
@media (min-width: 900px) { .body-lg { font-size: 1.125rem; } }

figcaption { margin-top: 12px; font-size: .84rem; line-height: 1.45; color: var(--ink-3); }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px;
  border: 0; border-radius: var(--radius);
  font: 500 .8rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.btn-primary { background: var(--ember); color: var(--ink); }
.btn-primary:hover { background: var(--ember-hover); }
.btn-block { width: 100%; }
.btn[disabled] { cursor: progress; opacity: .8; }
.btn-line { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--stone); }
.btn-line:hover { box-shadow: inset 0 0 0 1px var(--ink); }
/* The WhatsApp bubble on booking buttons */
.btn svg, .top-book svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }

.btn-text {
  display: inline-flex; gap: 8px; padding: 6px 0 5px;
  border-bottom: 1px solid currentColor;
  font: 500 .8rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  color: var(--ink);
}
.btn-text-light { color: #fff; }

.btn-busy { display: none; align-items: center; gap: 10px; }
.is-busy .btn-label { display: none; }
.is-busy .btn-busy { display: inline-flex; }
.spinner { width: 16px; height: 16px; border: 2px solid rgba(28, 31, 29, .25); border-top-color: var(--ink); border-radius: 50%; animation: spin .8s linear infinite; }

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

.top { position: absolute; z-index: 10; top: 0; left: 0; right: 0; padding-top: env(safe-area-inset-top); color: #fff; }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 80px; }
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; color: #fff; text-decoration: none; }
.brand-logo { flex: none; width: 44px; height: auto; }
.wordmark { display: flex; flex-direction: column; line-height: 1; }
.wordmark b { font: 600 1.5rem/1 var(--serif); }
.wordmark small { margin-top: 5px; font: 500 .62rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.top-nav { display: flex; align-items: center; gap: 22px; }
.top-book {
  display: none; align-items: center; gap: 8px; padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, .6); border-radius: var(--radius);
  font: 500 .72rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: #fff;
}
.top-book:hover { background: rgba(255, 255, 255, .12); }
.top-book svg { width: 15px; height: 15px; }
@media (min-width: 760px) { .top-book { display: inline-flex; } }
.lang { display: inline-flex; gap: 4px; }
.lang button {
  min-width: 38px; min-height: 40px; padding: 0 6px;
  border: 0; background: none; color: rgba(255, 255, 255, .6);
  font: 500 .78rem/1 var(--sans); letter-spacing: .16em; cursor: pointer;
}
.lang button[aria-pressed="true"] { color: #fff; text-decoration: underline; text-underline-offset: 6px; }

/* ---------- 1. Hero ---------- */

.hero {
  position: relative; display: flex; align-items: flex-end;
  min-height: 100vh; min-height: 100svh; overflow: hidden;
  background: var(--forest); color: #fff;
}
.hero-media, .hero-media picture, .hero-still, .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.hero-video { opacity: 0; transition: opacity 1.2s ease; }
.hero-video.is-playing { opacity: 1; }
/* A soft veil, darker where the words sit */
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14, 16, 14, .5) 0%, rgba(14, 16, 14, .12) 26%, rgba(14, 16, 14, .2) 48%, rgba(14, 16, 14, .78) 80%, rgba(14, 16, 14, .9) 100%);
}
.hero-in { position: relative; z-index: 1; padding-top: 150px; padding-bottom: calc(44px + env(safe-area-inset-bottom)); }
.hero h1 {
  margin: 0;
  font: 600 clamp(3rem, 13vw, 6rem)/.98 var(--serif); letter-spacing: -.01em;
  text-wrap: balance;
}
.hero-italic { margin: 14px 0 0; font: italic 500 clamp(1.6rem, 6.4vw, 2.5rem)/1.15 var(--serif); color: #f6eedf; }
.hero-lede { max-width: 30em; margin: 20px 0 0; font-size: 1.04rem; color: rgba(255, 255, 255, .86); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin: 28px 0 0; }
.hero-status {
  display: flex; align-items: center; gap: 12px; margin: 30px 0 0;
  font: 500 .74rem/1.3 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: rgba(255, 255, 255, .8);
}
.hero-status::before { content: ""; flex: none; width: 34px; height: 1px; background: rgba(255, 255, 255, .6); }
@media (min-width: 900px) {
  .hero { min-height: 94vh; }
  .hero-in { padding-bottom: 76px; }
  .hero-lede { font-size: 1.125rem; }
}

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

.section { padding: 88px 0; }
@media (min-width: 900px) { .section { padding: 132px 0; } }

/* 2. Story */
.story { background: var(--paper); }
.story-grid { display: grid; gap: 44px; }
.story-napkin { max-width: 420px; }
.story-napkin img { width: 100%; height: auto; }
@media (min-width: 900px) {
  .story-grid { grid-template-columns: 5fr 6fr; grid-template-areas: "text compare" "napkin compare"; column-gap: 88px; row-gap: 48px; align-items: start; }
  .story-text { grid-area: text; }
  .story-napkin { grid-area: napkin; max-width: 300px; }
  .compare { grid-area: compare; }
}

/* Then and now: drag the line, or use the arrow keys */
.compare-frame {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--stone); cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.compare-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.compare-now { clip-path: inset(0 0 0 var(--pos, 50%)); }
.compare-line { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 14px rgba(0, 0, 0, .35); pointer-events: none; }
.compare-line::after {
  content: "‹ ›"; position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  display: grid; place-items: center; border: 1px solid #fff; background: rgba(20, 22, 20, .45);
  font: 400 1.2rem/1 var(--sans); letter-spacing: .1em; color: #fff;
}
.compare-tag {
  position: absolute; top: 14px; padding: 7px 10px; background: rgba(20, 22, 20, .55);
  font: 500 .7rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: #fff; pointer-events: none;
}
.compare-tag-then { left: 14px; }
.compare-tag-now { right: 14px; }
.compare-range { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; opacity: 0; }
.compare-frame:has(.compare-range:focus-visible) { outline: 2px solid var(--ember); outline-offset: 4px; }

/* 3. Stay */
.stay { background: var(--sand); }
.stay-grid { display: grid; gap: 40px; }
.stay-main img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 60%; }
.strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: 64%; gap: 14px;
  margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 6px; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none;
}
.strip::-webkit-scrollbar { display: none; }
.strip li { scroll-snap-align: start; }
.strip img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 900px) {
  .stay-grid { grid-template-columns: 5fr 7fr; grid-template-areas: "text main" "strip strip"; column-gap: 72px; row-gap: 40px; align-items: center; }
  .stay-text { grid-area: text; }
  .stay-main { grid-area: main; }
  .stay-main img { aspect-ratio: 4 / 3; object-position: 50% 58%; }
  .strip { grid-area: strip; grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 0; padding: 0; overflow: visible; }
}

/* 4. The setting */
.setting {
  position: relative; display: flex; align-items: flex-end;
  min-height: 82vh; min-height: 82svh; overflow: hidden;
  background: var(--forest); color: #fff;
}
.setting picture, .setting-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.setting::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 16, 14, 0) 28%, rgba(14, 16, 14, .5) 58%, rgba(14, 16, 14, .86) 100%); }
.setting-in { position: relative; z-index: 1; padding-top: 140px; padding-bottom: 76px; }
.setting .h2 { max-width: 13em; color: #fff; }
.setting-body { max-width: 30em; margin: 0; color: rgba(255, 255, 255, .86); }

/* 5. Camp, Play and Groups: words only, until there are real photos */
.offer { background: var(--paper); }
.offer-list { display: grid; margin-top: 44px; border-top: 1px solid var(--stone); }
.offer-item { padding: 28px 0 30px; border-bottom: 1px solid var(--stone); }
.offer-item h3 { margin: 0 0 6px; font: 600 2.1rem/1.1 var(--serif); }
.offer-item p { max-width: 30em; margin: 0; color: var(--ink-2); }
@media (min-width: 900px) {
  .offer-list { grid-template-columns: repeat(3, 1fr); column-gap: 56px; border-top: 0; }
  .offer-item { padding: 26px 0 0; border-top: 1px solid var(--ink); border-bottom: 0; }
}

/* 6. The last 20% */
.last20 { background: var(--forest); color: #fff; }
.last20-grid { display: grid; gap: 44px; align-items: center; }
.last20-img img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.last20 .h2 { color: #fff; }
.last20 .body-lg { color: rgba(255, 255, 255, .82); }
.build { max-width: 440px; margin: 34px 0 0; }
.build-head {
  display: flex; align-items: baseline; justify-content: space-between;
  font: 500 .74rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: rgba(255, 255, 255, .75);
}
.build-head b { font: 600 1.7rem/1 var(--serif); letter-spacing: 0; color: #fff; }
.build-bar { position: relative; height: 2px; margin-top: 14px; background: rgba(255, 255, 255, .22); }
.build-bar i { position: absolute; top: 0; bottom: 0; left: 0; width: var(--p, 80%); background: var(--ember); }
.build-note { margin: 12px 0 0; font-size: .9rem; color: rgba(255, 255, 255, .7); }
.countdown { margin: 38px 0 20px; font: italic 500 clamp(1.9rem, 7vw, 2.7rem)/1.1 var(--serif); color: #fff; }
@media (min-width: 900px) { .last20-grid { grid-template-columns: 5fr 6fr; gap: 88px; } }

/* 7. Book */
/* The photo is a screen-high panel that stays put while the form scrolls past, so it's never stretched
   to the section's full height. overflow: clip (not hidden) keeps position: sticky working. */
.book-section { position: relative; overflow: hidden; overflow: clip; background: var(--forest); color: #fff; }
.book-section picture { position: sticky; top: 0; display: block; height: 100vh; margin-bottom: -100vh; }
.book-bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 100%; }
.book-section::after { content: ""; position: absolute; inset: 0; background: var(--veil); }
.book-grid { position: relative; z-index: 1; display: grid; gap: 44px; padding-block: 88px; }
.book-intro .h2 { color: #fff; }
.book-lede { max-width: 28em; margin: 0; color: rgba(255, 255, 255, .86); }
.steps { display: grid; gap: 0; margin: 30px 0 0; padding: 0; list-style: none; }
.steps li { display: grid; grid-template-columns: 44px 1fr; gap: 8px; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .9); }
.step-n { font: 600 1.15rem/1.5 var(--serif); color: var(--ember-soft); }
/* Wide screens: the form on the left, the photo beside it on the right, with no veil */
@media (min-width: 960px) {
  .book-section { display: grid; grid-template-columns: 7fr 5fr; container-type: inline-size; }
  .book-section::after { display: none; }
  .book-section picture { grid-column: 2; grid-row: 1; margin-bottom: 0; }
  .book-grid {
    grid-column: 1; grid-row: 1; max-width: none; margin: 0; gap: 64px;
    padding: 132px clamp(48px, 5vw, 96px) 132px max(var(--gutter), calc(50vw - 590px + var(--gutter)));
    padding-left: max(var(--gutter), calc(50cqw - 590px + var(--gutter))); /* lines up with .wrap; cqw leaves out the scrollbar */
  }
  .book-grid .card { max-width: 580px; }
}

/* The booking card */
.card {
  padding: 30px 22px 26px; border-radius: var(--radius);
  background: var(--paper); color: var(--ink);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .6);
}
@media (min-width: 480px) { .card { padding: 38px 36px 32px; } }
.card :focus-visible { outline-color: var(--ink); }
.card a:not(.btn) { color: var(--ink); text-underline-offset: .2em; }
.card-label { margin: 0 0 10px; font: 500 .72rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ember-deep); }
.card-title { margin: 0 0 22px; font: 600 clamp(1.9rem, 7.4vw, 2.4rem)/1.05 var(--serif); text-wrap: balance; }
.card-title:focus { outline: none; }

.card-lead { margin: -8px 0 20px; color: var(--ink-2); }
.wa-main .demo-note { margin-top: 12px; }
.alt-lead { margin: 26px 0 10px; font-size: .92rem; color: var(--ink-2); }
.channels { display: grid; gap: 10px; }
.channels-lead { margin: 22px 0 0; font-weight: 500; }
.dm-row { display: grid; gap: 10px; }
@media (min-width: 520px) { .dm-row { grid-template-columns: 1fr 1fr; } }
.dm-row .btn { padding: 0 16px; }
/* The enquiry form: the optional third route, folded away */
.form-more { margin-top: 28px; border-top: 1px solid var(--stone); }
.form-more > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0 0;
  list-style: none; cursor: pointer;
  font: 500 .76rem/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2);
}
.form-more > summary::-webkit-details-marker { display: none; }
.form-more > summary::after { content: "+"; flex: none; width: 20px; text-align: center; font: 300 1.5rem/1 var(--sans); color: var(--ink-3); transition: transform .25s ease; }
.form-more[open] > summary::after { transform: rotate(45deg); }
.form-intro { margin: 12px 0 22px; font-size: .92rem; color: var(--ink-2); }

/* Form */
.field { min-width: 0; margin: 0 0 18px; padding: 0; border: 0; }
.field > label, .field > legend { display: block; margin: 0 0 7px; padding: 0; font-size: .92rem; font-weight: 500; color: var(--ink); }
.opt { font-size: .82rem; font-weight: 400; color: var(--ink-3); }

.card input[type="text"], .card input[type="tel"], .card input[type="email"], .card input[type="date"], .card input[type="number"], .card textarea {
  display: block; width: 100%; min-height: 50px; padding: 12px 14px;
  border: 1px solid var(--stone); border-radius: var(--radius);
  background: #fff; color: var(--ink);
  font: 400 1rem/1.35 var(--sans);
  appearance: none; -webkit-appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.card textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.card input::placeholder, .card textarea::placeholder { color: #8c918b; opacity: 1; }
.card input:hover, .card textarea:hover { border-color: #b5ae9f; }
.card input:focus, .card textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(247, 90, 58, .16); }
.is-invalid input[type="text"], .is-invalid input[type="tel"], .is-invalid input[type="email"],
.is-invalid input[type="date"], .is-invalid input[type="number"] { border-color: var(--danger); }

.hint { margin: 6px 0 0; font-size: .84rem; color: var(--ink-3); }
.err { margin: 6px 0 0; font-size: .86rem; font-weight: 500; color: var(--danger); }
.suggest { margin: 6px 0 0; font-size: .88rem; color: var(--ink-2); }
.suggest button { padding: 2px 4px; border: 0; background: none; color: var(--ink); font: 500 .88rem var(--sans); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }

.dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.date { display: block; min-width: 0; }
.date-label { display: block; margin: 0 0 5px; font-size: .8rem; color: var(--ink-3); }
.card input[type="date"] { min-width: 0; padding-right: 8px; }
.card input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.dates.is-off { opacity: .4; }
.dates.is-off input { cursor: not-allowed; }

.stepper { display: grid; grid-template-columns: 50px minmax(0, 1fr) 50px; gap: 8px; }
.stepper button {
  min-height: 50px; border: 1px solid var(--stone); border-radius: var(--radius);
  background: #fff; color: var(--ink); font: 400 1.4rem/1 var(--sans); cursor: pointer;
}
.stepper button:hover { border-color: var(--ink); }
.card .stepper input { text-align: center; font-weight: 500; -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Who's coming: plain text choices */
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg label { position: relative; display: block; cursor: pointer; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg label > span {
  display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 8px;
  border: 1px solid var(--stone); border-radius: var(--radius); background: #fff;
  font-size: .92rem; text-align: center; transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.seg label:hover > span { border-color: var(--ink); }
.seg input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.seg input:focus-visible + span { outline: 2px solid var(--ember); outline-offset: 2px; }
@media (min-width: 520px) { .seg { grid-template-columns: repeat(4, 1fr); } }

.field > label.check { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; margin: 0; font-size: .88rem; font-weight: 400; line-height: 1.55; color: var(--ink-2); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ink); cursor: pointer; }
.check-sm { display: inline-grid; grid-template-columns: 20px auto; gap: 10px; align-items: center; font-size: .9rem; cursor: pointer; }
.check-sm input { margin: 0; }
.notice-link { margin: 8px 0 0 34px; font-size: .86rem; }
.consent .err { margin-left: 34px; }

.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { margin: 12px 0 0; padding: 10px 12px; border-left: 2px solid var(--danger); background: #f6e4e0; color: #7d1f16; font-size: .9rem; }
.fine { margin: 14px 0 0; text-align: center; font-size: .82rem; color: var(--ink-3); }

/* After sending */
.done-lead { margin: -8px 0 0; color: var(--ink-2); }
.summary { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 18px; margin: 20px 0 0; padding: 16px 0; border-top: 1px solid var(--stone); border-bottom: 1px solid var(--stone); }
.summary dt { font-size: .84rem; color: var(--ink-3); }
.summary dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.demo-note { margin: 18px 0 0; padding: 10px 12px; border: 1px dashed var(--ember-deep); color: var(--ember-deep); font-size: .84rem; }
.again { margin: 14px 0 0; text-align: center; }
.linkish { padding: 10px; border: 0; background: none; color: var(--ink); font: 500 .8rem var(--sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: underline; text-underline-offset: .3em; cursor: pointer; }

/* 8. Questions */
.faq { background: var(--paper); }
.faq-list { margin-top: 40px; border-top: 1px solid var(--stone); }
.faq details { border-bottom: 1px solid var(--stone); }
.faq summary, .privacy summary { list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker, .privacy summary::-webkit-details-marker { display: none; }
.faq summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 22px 0; font: 600 1.4rem/1.25 var(--serif); }
.faq summary::after, .privacy summary::after {
  content: "+"; flex: none; width: 20px; text-align: center;
  font: 300 1.6rem/1 var(--sans); color: var(--ink-3); transition: transform .25s ease;
}
.faq details[open] summary::after, .privacy details[open] summary::after { transform: rotate(45deg); }
.faq details > p { max-width: 40em; margin: 0 0 24px; color: var(--ink-2); }

/* Privacy notice */
.privacy { padding-top: 0; scroll-margin-top: 16px; }
.privacy details { border-top: 1px solid var(--stone); border-bottom: 1px solid var(--stone); }
.privacy summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 20px 0; font: 500 .78rem/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.privacy summary small { font-size: .72rem; letter-spacing: .12em; color: var(--ink-3); }
.privacy summary::after { margin-left: auto; }
.notice-cols { display: grid; gap: 28px; padding: 0 0 30px; }
@media (min-width: 860px) { .notice-cols { grid-template-columns: 1fr 1fr; gap: 44px; } }
html[lang="en"] .notice-cols > [lang="en"] { order: -1; }
.notice h3 { margin: 0 0 10px; font: 500 .72rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ember-deep); }
.notice p, .notice li { font-size: .9rem; color: var(--ink-2); }
.notice p { margin: 0 0 10px; }
.notice ul { margin: 0; padding-left: 1.1em; }
.notice li { margin: 0 0 8px; }
.notice b { font-weight: 500; color: var(--ink); }

/* A setting in config.js that still needs filling in */
.todo { padding: 0 3px; border-bottom: 1px dashed var(--ember-deep); background: #f6e7df; color: var(--ember-deep) !important; font-size: .9em; text-decoration: none; }

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

.foot { padding: 72px 0 calc(112px + env(safe-area-inset-bottom)); background: var(--night); color: rgba(255, 255, 255, .72); }
.foot-in { display: grid; gap: 36px; }
.foot-brand img { width: 64px; height: auto; margin-bottom: 16px; }
.foot-name { margin: 0; font: 600 2.1rem/1.05 var(--serif); color: #fff; }
.foot-name span { display: block; margin-top: 8px; font: 500 .7rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.foot-tag { margin: 20px 0 0; font: italic 500 1.55rem/1.2 var(--serif); color: var(--ember-soft); }
.foot-line { margin: 10px 0 0; font: 500 .7rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.foot-addr { margin: 14px 0 0; font-size: .92rem; }
.social { display: flex; flex-wrap: wrap; gap: 14px 26px; margin: 0; padding: 0; list-style: none; }
.social a { padding-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, .35); color: #fff; font: 500 .76rem/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; }
.social a:hover { border-color: var(--ember-soft); }
.foot-small { margin: 0; font-size: .82rem; }
.foot-small a { color: rgba(255, 255, 255, .8); }
@media (min-width: 900px) {
  .foot { padding-bottom: 60px; }
  .foot-in { grid-template-columns: 1fr auto; align-items: end; }
  .foot-small { grid-column: 1 / -1; }
}

/* ---------- Sticky booking bar (phones) ---------- */

.sticky-cta {
  position: fixed; z-index: 30; left: 0; right: 0; bottom: 0;
  display: flex; gap: 10px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: rgba(28, 31, 29, .94);
  transform: translateY(110%); visibility: hidden;
  transition: transform .3s ease, visibility 0s linear .3s;
}
.sticky-cta.show { transform: none; visibility: visible; transition: transform .3s ease; }
.sticky-cta .btn-primary { flex: 1; }
@media (min-width: 960px) { .sticky-cta { display: none; } }

/* ---------- Motion: gentle, and none for reduced motion ---------- */

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

.anim .hero-in > * { animation: rise 1.1s cubic-bezier(.2, .7, .2, 1) both; }
.anim .hero-in > :nth-child(2) { animation-delay: .08s; }
.anim .hero-in > :nth-child(3) { animation-delay: .16s; }
.anim .hero-in > :nth-child(4) { animation-delay: .24s; }
.anim .hero-in > :nth-child(5) { animation-delay: .32s; }
.anim .hero-in > :nth-child(6) { animation-delay: .4s; }

/* app.js adds .reveal-on once it can fade sections in as they scroll into view */
.reveal-on .reveal { opacity: 0; transform: translateY(18px); transition: opacity 1s ease, transform 1s cubic-bezier(.2, .7, .2, 1); }
.reveal-on .reveal.in { opacity: 1; transform: none; }

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

/* Cormorant's default figures are old-style, which makes "15 A-frame" look uneven. Lining figures,
   placed last because the font shorthand used above resets font-variant-numeric. */
html body :is(h1, h2, h3, .h2, .countdown, .step-n, .build-head b, .card-title, .foot-name, .hero-italic, .faq summary) { font-variant-numeric: lining-nums; }