/* ============================================================
   Cultus Grove — shared stylesheet
   Brand tokens + base + reusable components.
   Page-specific layout lives in each page's own <style> block.
   ============================================================ */

:root {
  /* Greens */
  --green:       #284838;   /* primary deep forest green */
  --green-deep:  #223a2c;   /* footer background */
  --green-mid:   #2f5140;   /* lighter green — cards on green */

  /* Gold */
  --gold:        #E3B063;   /* primary gold accent */
  --gold-hover:  #d3a04f;   /* gold button hover */
  --gold-dark:   #b98a34;   /* gold text on light (eyebrows, prices) */
  --gold-deep:   #96702a;   /* link hover / submit hover on light */

  /* Neutrals */
  --cream:       #F1EBDC;   /* foreground on green */
  --paper:       #FBF9F3;   /* page background */
  --white:       #ffffff;

  /* Text */
  --text:        #284838;
  --text-mid:    #46594b;
  --text-mid-2:  #3c5142;
  --text-muted:  #7a8c80;
  --text-muted-2:#6d7f72;

  /* Hairlines */
  --line-light:  rgba(40,72,56,.1);
  --line-light-2:rgba(40,72,56,.25);
  --line-dark:   rgba(241,235,220,.12);

  /* Type */
  --font-display:'Manrope', system-ui, sans-serif;
  --font-body:   'Manrope', system-ui, sans-serif;

  /* Radii */
  --r-card:  14px;
  --r-panel: 18px;
  --r-pill:  999px;

  /* Shadows */
  --shadow-soft: 0 14px 50px rgba(20,30,24,.18);
  --shadow-card: 0 24px 60px rgba(0,0,0,.25);
  --shadow-pill: 0 6px 24px rgba(28,42,32,.16);

  /* Layout */
  --nav-h: 80px;
  --pad-x: 48px;
  --section-pad: 100px;
  --maxw: 1440px;
}

/* ─── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: var(--text); transition: color .25s; }
a:hover { color: var(--gold-deep); }

/* ─── Typography helpers ────────────────────────────────── */
.eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-dark);
}
.eyebrow--gold { color: var(--gold); }               /* on green */
.eyebrow--wide { letter-spacing: .24em; }

h1, h2, h3, .display { font-family: var(--font-display); letter-spacing: -.02em; }

.h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(38px, 4.6vw, 56px);
  line-height: 1.0;
  letter-spacing: -.02em;
}

/* short gold rule under feature titles */
.gold-rule {
  width: 28px; height: 3px;
  background: var(--gold);
  border-radius: 2px;
}

/* ─── Layout primitives ─────────────────────────────────── */
.section { padding: var(--section-pad) var(--pad-x); }
.container { max-width: var(--maxw); margin: 0 auto; }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.section-head .h2 { margin-top: 14px; }

/* underline "read more" link */
.link-underline {
  font-size: 18px;
  font-weight: 600;
  color: var(--green);
  border-bottom: 1.5px solid var(--gold);
  padding-bottom: 3px;
}
.link-underline:hover { color: var(--gold-deep); }

/* gold inline link (on dark/green surfaces) */
.link-gold { font-size: 18px; font-weight: 600; letter-spacing: .06em; color: var(--gold); border-bottom: 1.5px solid rgba(227,176,99,.5); padding-bottom: 3px; width: max-content; }
.link-gold:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* ─── Buttons ───────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
  border: none;
}
.btn-gold {
  background: var(--gold);
  color: var(--green);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .06em;
  padding: 15px 30px;
}
.btn-gold:hover { background: var(--gold-hover); color: var(--green); }

.btn-green {
  background: var(--green);
  color: #F6F1E7;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 17px 48px;
}
.btn-green:hover { background: var(--gold-deep); color: #F6F1E7; }

.btn-outline {
  background: transparent;
  border: 1.5px solid var(--green);
  color: var(--green);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .04em;
  padding: 12px 26px;
}
.btn-outline:hover { background: var(--green); color: var(--paper); }

/* pill floating on an image (e.g. map) */
.btn-float {
  background: var(--paper);
  color: var(--green);
  font-size: 13px;
  font-weight: 600;
  padding: 12px 24px;
  box-shadow: var(--shadow-pill);
}
.btn-float:hover { color: var(--green); }

/* ─── Placeholder image tiles (swap for real photography) ── */
.ph {
  background: repeating-linear-gradient(45deg,#ece7db 0 12px,#e4dece 12px 24px);
  display: flex; align-items: center; justify-content: center;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(40,72,56,.35);
  text-align: center;
}
.ph--dark {
  background: repeating-linear-gradient(45deg,#4a473c 0 12px,#413e34 12px 24px);
  color: rgba(241,235,220,.4);
}

/* ─── Shared form (underline style, matches home register) ─ */
.cg-form { display: flex; flex-direction: column; gap: 28px; }
.cg-field { display: flex; flex-direction: column; gap: 9px; }
.cg-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.cg-label {
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-muted);
}
.cg-input, .cg-select {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-light-2);
  padding: 11px 0;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--green);
  width: 100%;
  outline: none;
  border-radius: 0;
  transition: border-color .25s;
}
.cg-select { cursor: pointer; }
.cg-input:focus, .cg-select:focus { border-bottom-color: var(--gold); }
.cg-input::placeholder { color: var(--text-muted); opacity: .7; }

.cg-textarea {
  background: transparent;
  border: 1px solid var(--line-light-2);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--green);
  width: 100%;
  outline: none;
  resize: vertical;
  min-height: 92px;
  transition: border-color .25s;
}
.cg-textarea:focus { border-color: var(--gold); }
.cg-textarea::placeholder { color: var(--text-muted); opacity: .7; }

.cg-phone { display: flex; align-items: flex-end; }
.cg-phone-flag {
  display: flex; align-items: center; gap: 6px;
  padding: 11px 12px 11px 0;
  border-bottom: 1px solid var(--line-light-2);
  font-size: 15px; color: var(--text-mid);
  white-space: nowrap; flex-shrink: 0;
}
.cg-phone .cg-input { padding-left: 12px; flex: 1; width: auto; }

.cg-consent { display: flex; align-items: flex-start; gap: 14px; margin-top: 2px; }
.cg-consent input { width: 16px; height: 16px; margin-top: 3px; flex-shrink: 0; accent-color: var(--green); cursor: pointer; }
.cg-consent label { font-size: 11px; line-height: 1.65; color: var(--text-muted); }

.cg-success h3 {
  font-family: var(--font-display);
  font-weight: 700; font-size: 34px; color: var(--green);
  margin-bottom: 12px;
}
.cg-success p { font-size: 15px; color: var(--text-mid); line-height: 1.7; max-width: 400px; }

/* ─── Responsive ────────────────────────────────────────── */
@media (max-width: 900px) {
  :root { --pad-x: 24px; --section-pad: 68px; }
  .section-head { margin-bottom: 28px; }
  .cg-2col { grid-template-columns: 1fr; gap: 22px; }
}