/* Bear Park — parents guide modal (pair: site/guide-modal.js, loaded site-wide).
   Every "Download the guide" CTA ([data-guide]) opens an email gate: the
   guide cover beside a one-field form on the forest panel. The email is the
   lead - the CRM wiring tracks fall-off, abandoned forms and touch points
   from here (front-end only until the PDF + CRM land, 10 Jul).
   Slick, on-vocabulary: scrim blur + the card rising on the site curve. */

.gdm-scrim {
  position: fixed; inset: 0; z-index: 130;
  background: rgba(20, 25, 19, .52);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .45s ease, visibility .45s;
}
body.gdm-open .gdm-scrim { opacity: 1; visibility: visible; pointer-events: auto; }

.gdm {
  position: fixed; left: 50%; top: 50%; z-index: 131;
  width: min(880px, 92vw);
  transform: translate(-50%, -46%) scale(.96);
  opacity: 0; visibility: hidden;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1), opacity .45s ease, visibility .6s;
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  background: #20271f; color: #f2eee3;
  border: 1px solid rgba(242, 238, 227, .14); border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 60px 140px -40px rgba(15, 19, 14, .6);
}
body.gdm-open .gdm { transform: translate(-50%, -50%) scale(1); opacity: 1; visibility: visible; }

.gdm-x {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(32, 39, 31, .55); border: 1px solid rgba(242, 238, 227, .3);
  color: #f2eee3; font-size: 15px; line-height: 1; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.gdm-x:hover { background: #f2eee3; color: #20271f; border-color: #f2eee3; }

.gdm-media { position: relative; min-height: 380px; }
.gdm-media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 42%; display: block;
}

.gdm-body {
  padding: clamp(30px, 4.5vw, 52px);
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
}
.gdm-eyebrow {
  font-family: "Neue Haas Grotesk Display Pro", "Helvetica Neue", sans-serif;
  font-size: var(--t-eyebrow); font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(242, 238, 227, .62);
}
.gdm-h {
  margin: 0; max-width: 16ch;
  font-family: "Canela LCG", Georgia, serif; font-weight: 300;
  font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1.06; letter-spacing: -.02em;
  color: #f2eee3;
}
.gdm-p {
  margin: 0; max-width: 40ch;
  font-family: "Neue Haas Grotesk Display Pro", "Helvetica Neue", sans-serif;
  font-weight: 400; font-size: var(--t-body-sm); line-height: 1.55;
  color: rgba(242, 238, 227, .72);
}
.gdm-form { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.gdm-form input {
  width: 100%; box-sizing: border-box;
  background: rgba(242, 238, 227, .06);
  border: 1px solid rgba(242, 238, 227, .26); border-radius: 0;
  color: #f2eee3; font-family: "Neue Haas Grotesk Display Pro", "Helvetica Neue", sans-serif;
  font-size: var(--t-ui-16); padding: 14px 15px; outline: none;
  transition: border-color .2s;
}
.gdm-form input:focus { border-color: #f2eee3; }
.gdm-form input::placeholder { color: rgba(242, 238, 227, .38); }
.gdm-form input:-webkit-autofill,
.gdm-form input:-webkit-autofill:hover,
.gdm-form input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #2a322b inset;
  -webkit-text-fill-color: #f2eee3;
  caret-color: #f2eee3;
  transition: background-color 99999s ease-out 0s;
}
.gdm-submit {
  align-self: flex-start; cursor: pointer;
  background: #c94e1d; border: 1px solid #c94e1d; border-radius: 0; color: #fff;
  font-family: "Neue Haas Grotesk Display Pro", "Helvetica Neue", sans-serif;
  font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  padding: 16px 30px;
  transition: background .2s, border-color .2s;
}
.gdm-submit:hover { background: #b34317; border-color: #b34317; }
.gdm-help {
  margin: 2px 0 0;
  font-family: "Neue Haas Grotesk Display Pro", "Helvetica Neue", sans-serif;
  font-size: var(--t-ui-13); line-height: 1.5; color: rgba(242, 238, 227, .5);
  max-width: 40ch;
}
.gdm-confirm { display: none; flex-direction: column; gap: 12px; }
.gdm.is-done .gdm-form, .gdm.is-done .gdm-help { display: none; }
.gdm.is-done .gdm-confirm { display: flex; }

@media (max-width: 760px) {
  /* phones: a bottom sheet - the cover as a short banner, the form beneath */
  .gdm {
    top: auto; bottom: 0; left: 0; right: 0;
    width: 100%; transform: translateY(6%);
    grid-template-columns: 1fr; border-radius: 14px 14px 0 0;
    max-height: 88dvh; overflow-y: auto;
  }
  body.gdm-open .gdm { transform: translateY(0); }
  .gdm-media { min-height: 0; height: 170px; }
  .gdm-body { padding: 24px 22px 30px; }
  .gdm-submit { align-self: stretch; text-align: center; }
}

/* ---------- paired closing actions (10 Jul: the guide and the tour close a
   page TOGETHER) - the ghost action beside the orange one on forest bands.
   Attribute-boosted so page-scoped anchor styles (.jcta a) never repaint it. */
.gd-actions { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
a.btn-guide[data-guide] {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font-family: "Neue Haas Grotesk Display Pro", "Helvetica Neue", sans-serif;
  font-size: var(--t-label); font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  background: none; color: #f2eee3; padding: 13px 22px;
  border: 1px solid rgba(242, 238, 227, .42); border-radius: 0;
  text-decoration: none; white-space: nowrap;
  transition: background .25s, color .25s, border-color .25s;
}
a.btn-guide[data-guide]:hover { background: #f2eee3; color: #20271f; border-color: #f2eee3; }