:root {
  --quote-forest-deep: #1c2e18;
  --quote-forest: #2a4d24;
  --quote-forest-mid: #3b6535;
  --quote-gold: #c2b027;
  --quote-gold-light: #dfd05e;
  --quote-cream: #f5edd6;
  --quote-paper: #fffdf8;
  --quote-ink: #243127;
  --quote-muted: #536057;
  --quote-earth: #a35f0e;
  --quote-danger: #8b3c16;
  --quote-line: #d9d0b8;
  --quote-shadow: 0 18px 45px rgb(26 40 23 / 14%);
  --quote-radius: 18px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  color: var(--quote-ink);
  background: #f7f2e5;
  font-family: Inter, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

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

button { cursor: pointer; }

a { color: inherit; }

/* Keep the Netlify spam trap out of the visual and assistive experience. */
.netlify-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.quote-skip-link {
  position: absolute;
  top: 10px;
  left: -999px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: 8px;
  color: #fff;
  background: var(--quote-forest-deep);
}

.quote-skip-link:focus { left: 10px; }

.quote-shell { overflow: hidden; }

.quote-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 74px;
  padding: 10px clamp(18px, 5vw, 70px);
  color: var(--quote-cream);
  background: var(--quote-forest-deep);
}

.quote-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-family: Montserrat, Arial, sans-serif;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.025em;
  text-decoration: none;
}

.quote-brand img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.quote-topbar-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
  font-size: 0.9rem;
}

.quote-topbar-nav a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 6px 9px;
  border-radius: 8px;
  color: var(--quote-cream);
  text-decoration: none;
}

.quote-topbar-nav a:hover,
.quote-topbar-nav a:focus-visible { color: var(--quote-gold-light); }

.quote-hero {
  position: relative;
  isolation: isolate;
  padding: clamp(52px, 10vw, 110px) clamp(18px, 5vw, 70px) clamp(45px, 8vw, 86px);
  color: #fff;
  background:
    linear-gradient(110deg, rgb(24 44 22 / 95%), rgb(32 61 28 / 84%) 52%, rgb(78 74 31 / 63%)),
    url("/s%20mountain%20view/assets/optimized/camp-grounds.webp") center / cover;
}

.quote-hero-inner,
.quote-main,
.quote-footer-inner { width: min(1100px, 100%); margin: 0 auto; }

.quote-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 6px 12px;
  border: 1px solid rgb(223 208 94 / 60%);
  border-radius: 999px;
  color: var(--quote-gold-light);
  font-family: Montserrat, Arial, sans-serif;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.quote-eyebrow::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--quote-gold-light);
  content: "";
}

.quote-hero h1,
.quote-section-heading h2,
.quote-panel h2 {
  margin: 0;
  font-family: Montserrat, Arial, sans-serif;
  line-height: 1.1;
}

.quote-hero h1 {
  max-width: 760px;
  font-size: clamp(2.25rem, 6vw, 4.45rem);
  letter-spacing: -0.045em;
}

.quote-hero-copy {
  max-width: 665px;
  margin: 22px 0 0;
  color: rgb(255 255 255 / 90%);
  font-size: clamp(1rem, 2.2vw, 1.18rem);
}

.quote-hero-note {
  max-width: 670px;
  margin: 20px 0 0;
  color: var(--quote-gold-light);
  font-size: 0.95rem;
  font-weight: 700;
}

.quote-main { padding: clamp(36px, 6vw, 68px) 18px clamp(54px, 8vw, 92px); }

.quote-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  gap: 24px;
  margin-bottom: 28px;
}

.quote-section-heading { align-self: center; }

.quote-section-heading h2 { font-size: clamp(1.65rem, 4vw, 2.55rem); }

.quote-section-heading p { max-width: 650px; margin: 14px 0 0; color: var(--quote-muted); }

.quote-process {
  display: grid;
  gap: 12px;
  padding: 20px;
  border-radius: var(--quote-radius);
  color: #fdf8e8;
  background: var(--quote-forest);
  box-shadow: var(--quote-shadow);
}

.quote-process strong { font-family: Montserrat, Arial, sans-serif; }

.quote-process ol { display: grid; gap: 7px; margin: 0; padding-left: 22px; }

.quote-warning {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  margin: 0 0 26px;
  padding: 19px 20px;
  border: 1px solid #e1a945;
  border-radius: var(--quote-radius);
  color: #492c13;
  background: #fff4da;
}

.quote-warning svg { width: 25px; height: 25px; flex: 0 0 auto; color: var(--quote-danger); }

.quote-warning h2 { margin: 0 0 5px; font: 800 1.02rem/1.35 Montserrat, Arial, sans-serif; }

.quote-warning p { margin: 0; }

.quote-form-card {
  padding: clamp(22px, 4.8vw, 48px);
  border: 1px solid rgb(102 95 67 / 16%);
  border-radius: 26px;
  background: var(--quote-paper);
  box-shadow: var(--quote-shadow);
}

.quote-form-card > header { max-width: 720px; margin-bottom: 28px; }

.quote-form-card > header h2 { margin: 0; font: 800 clamp(1.45rem, 3vw, 2.05rem)/1.2 Montserrat, Arial, sans-serif; }

.quote-form-card > header p { margin: 10px 0 0; color: var(--quote-muted); }

.quote-form { display: grid; gap: 31px; }

.quote-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }

.quote-fieldset > legend {
  margin-bottom: 15px;
  padding: 0;
  color: var(--quote-forest-deep);
  font: 800 1.05rem/1.35 Montserrat, Arial, sans-serif;
}

.quote-fieldset > .quote-fieldset-hint { margin: -8px 0 15px; color: var(--quote-muted); font-size: 0.93rem; }

.quote-journey-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.quote-journey-choice { position: relative; display: block; min-height: 100%; }

.quote-journey-choice input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
}

.quote-journey-choice span {
  display: block;
  min-height: 168px;
  padding: 18px;
  border: 2px solid var(--quote-line);
  border-radius: 15px;
  color: var(--quote-ink);
  background: #fff;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.quote-journey-choice:hover span { transform: translateY(-2px); }

.quote-journey-choice input:checked + span {
  border-color: var(--quote-forest-mid);
  box-shadow: 0 0 0 4px rgb(74 107 64 / 14%);
}

.quote-journey-choice input:focus-visible + span { outline: 3px solid var(--quote-gold); outline-offset: 3px; }

.quote-journey-title { display: block; margin-bottom: 7px; color: var(--quote-forest-deep); font: 800 1rem/1.3 Montserrat, Arial, sans-serif; }

.quote-journey-copy { display: block; color: var(--quote-muted); font-size: 0.9rem; line-height: 1.5; }

.quote-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }

.quote-field { min-width: 0; }

.quote-field--wide { grid-column: 1 / -1; }

.quote-field label,
.quote-checkbox-list legend { display: block; margin-bottom: 7px; color: var(--quote-ink); font-size: 0.93rem; font-weight: 750; }

.quote-field label .quote-optional { color: var(--quote-muted); font-weight: 500; }

.quote-field input,
.quote-field select,
.quote-field textarea {
  width: 100%;
  min-height: 47px;
  padding: 11px 12px;
  border: 1px solid #bdb49d;
  border-radius: 10px;
  color: var(--quote-ink);
  background: #fff;
  box-shadow: 0 1px 0 rgb(0 0 0 / 3%) inset;
}

.quote-field textarea { min-height: 102px; resize: vertical; }

.quote-field input:focus,
.quote-field select:focus,
.quote-field textarea:focus { border-color: var(--quote-forest-mid); outline: 3px solid rgb(74 107 64 / 18%); outline-offset: 1px; }

.quote-field-hint { margin: 6px 0 0; color: var(--quote-muted); font-size: 0.82rem; line-height: 1.45; }

.quote-panel {
  padding: 22px;
  border: 1px solid #dfd5be;
  border-radius: var(--quote-radius);
  background: #fcf8ec;
}

.quote-panel[hidden] { display: none; }

.quote-panel h2 { margin-bottom: 6px; font-size: 1.18rem; }

.quote-panel > p { margin: 0 0 18px; color: var(--quote-muted); font-size: 0.93rem; }

.quote-checkbox-list { min-width: 0; margin: 0; padding: 0; border: 0; }

.quote-checkbox-options { display: flex; flex-wrap: wrap; gap: 9px; }

.quote-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 7px 11px;
  border: 1px solid #c8bea7;
  border-radius: 10px;
  background: #fff;
  font-size: 0.9rem;
}

.quote-check input { width: 18px; height: 18px; accent-color: var(--quote-forest); }

.quote-consent-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border-radius: 12px;
  background: #edf3e9;
  font-size: 0.94rem;
}

.quote-consent-row input { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--quote-forest); }

.quote-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

.quote-submit {
  min-height: 52px;
  padding: 13px 21px;
  border: 0;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(135deg, var(--quote-earth), #845010);
  box-shadow: 0 7px 18px rgb(118 69 14 / 28%);
  font-family: Montserrat, Arial, sans-serif;
  font-size: 0.94rem;
  font-weight: 800;
}

.quote-submit:hover { filter: brightness(1.08); }

.quote-submit:disabled { cursor: wait; opacity: 0.7; }

.quote-actions p { max-width: 480px; margin: 0; color: var(--quote-muted); font-size: 0.83rem; }

.quote-status {
  min-height: 1.4em;
  margin: -16px 0 0;
  color: var(--quote-forest);
  font-weight: 700;
}

.quote-status[data-state="error"] { color: var(--quote-danger); }

.quote-success {
  padding: clamp(28px, 5vw, 56px);
  border: 1px solid #b8ccb3;
  border-radius: 20px;
  color: #173117;
  background: #eff7ec;
}

.quote-success h2 { margin: 0 0 10px; font: 800 clamp(1.45rem, 3vw, 2rem)/1.2 Montserrat, Arial, sans-serif; }

.quote-success p { max-width: 670px; margin: 0; }

.quote-success a { display: inline-block; margin-top: 18px; color: var(--quote-forest); font-weight: 800; }

.quote-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 17px;
  margin-top: 33px;
}

.quote-note {
  padding: 20px;
  border-radius: 15px;
  background: rgb(255 255 255 / 62%);
}

.quote-note h2 { margin: 0 0 7px; color: var(--quote-forest-deep); font: 800 1rem/1.3 Montserrat, Arial, sans-serif; }

.quote-note p { margin: 0; color: var(--quote-muted); font-size: 0.91rem; }

.quote-footer { color: #e8dec2; background: var(--quote-forest-deep); }

.quote-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 18px; font-size: 0.88rem; }

.quote-footer a { color: var(--quote-gold-light); }

[lang="th"] body { font-family: Tahoma, "Noto Sans Thai", Inter, Arial, sans-serif; }
[lang="th"] .quote-hero h1,
[lang="th"] .quote-section-heading h2,
[lang="th"] .quote-panel h2,
[lang="th"] .quote-form-card > header h2 { letter-spacing: 0; }

@media (max-width: 760px) {
  .quote-topbar { align-items: flex-start; flex-direction: column; }
  .quote-topbar-nav { justify-content: flex-start; }
  .quote-intro,
  .quote-journey-grid,
  .quote-notes { grid-template-columns: 1fr; }
  .quote-journey-choice span { min-height: 0; }
}

@media (max-width: 580px) {
  .quote-grid { grid-template-columns: 1fr; }
  .quote-field--wide { grid-column: auto; }
  .quote-main { padding-inline: 13px; }
  .quote-form-card { padding: 21px 16px; border-radius: 18px; }
  .quote-panel { padding: 17px; }
  .quote-footer-inner { align-items: flex-start; flex-direction: column; }
}