/* ============================================
   CPM Teens' Camp Out — Design tokens
   ============================================ */
:root {
  --teal: #002E2C;
  --teal-soft: #0A4A45;
  --orange: #ED822A;
  --orange-deep: #D96F1A;
  --blush: #EDBFB7;
  --charcoal: #222222;
  --cream: #FDF6F1;
  --white: #FFFFFF;
  --line: #E7DDD5;

  --font: 'Poppins', sans-serif;

  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 20px 40px -20px rgba(0, 46, 44, 0.35);
  --container: 1120px;
  --hero-photo: none;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--charcoal);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3, h4 {
  font-family: var(--font);
  color: var(--teal);
  margin: 0 0 12px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

p { margin: 0 0 16px; color: #4B4B4B; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-deep);
  margin-bottom: 14px;
}

.eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(237, 130, 42, 0.18);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font);
  font-weight: 600;
  font-size: 15px;
  padding: 15px 30px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.btn-primary {
  background: var(--orange);
  color: var(--white);
  box-shadow: 0 12px 24px -10px rgba(237, 130, 42, 0.65);
}
.btn-primary:hover { background: var(--orange-deep); transform: translateY(-2px); }

.btn-ghost {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
}
.btn-ghost:hover { border-color: var(--white); }

.btn-dark {
  background: var(--teal);
  color: var(--white);
}
.btn-dark:hover { background: var(--teal-soft); transform: translateY(-2px); }

.btn-block { width: 100%; }

/* ============ Header ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(253, 246, 241, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 17px;
  color: var(--teal);
}
.logo-img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--white);
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.logo small {
  display: block;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--orange-deep);
  text-transform: uppercase;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
  font-weight: 500;
  font-size: 14.5px;
  color: var(--charcoal);
}
.nav-links a:hover { color: var(--orange-deep); }
.header-cta { display: flex; align-items: center; gap: 18px; }
.header-cta .btn { padding: 12px 24px; font-size: 14px; }

/* ============ Hero ============ */
.hero {
  position: relative;
  background-image:
    linear-gradient(120deg, rgba(0,46,44,0.94) 0%, rgba(0,46,44,0.88) 45%, rgba(0,27,26,0.95) 100%),
    var(--hero-photo);
  background-size: cover;
  background-position: center 30%;
  color: var(--white);
  overflow: hidden;
  padding: 100px 0 130px;
}
.hero::before {
  content: "";
  position: absolute;
  right: -160px;
  top: -160px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(237, 130, 42, 0.55) 0%, rgba(237, 130, 42, 0) 70%);
}
.hero::after {
  content: "";
  position: absolute;
  left: -120px;
  bottom: -180px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(237, 191, 183, 0.28) 0%, rgba(237, 191, 183, 0) 70%);
}
.hero .wrap { position: relative; z-index: 2; }
.hero-inner { max-width: 860px; }
.hero .eyebrow { color: var(--blush); }
.hero .eyebrow::before { background: var(--orange); box-shadow: 0 0 0 4px rgba(237, 130, 42, 0.3); }
.hero h1 {
  color: var(--white);
  font-size: clamp(38px, 6vw, 64px);
  font-weight: 800;
  margin-bottom: 18px;
  text-wrap: balance;
}
.hero h1 span { color: var(--orange); }
.hero-sub {
  color: rgba(255, 255, 255, 0.78);
  font-size: 18px;
  max-width: 560px;
  margin-bottom: 34px;
}
.hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 46px; }
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.hero-meta .item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 12px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
}
.hero-meta .item svg { width: 18px; height: 18px; color: var(--orange); flex-shrink: 0; }

/* Stat strip */
.stat-strip {
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.stat-strip .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  padding: 26px 24px;
}
.stat {
  flex: 1;
  min-width: 150px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.stat .num { font-size: 22px; font-weight: 700; color: var(--teal); white-space: nowrap; }
.stat .label { font-size: 12.5px; color: #7A7A7A; text-transform: uppercase; letter-spacing: 0.06em; }
.stat + .stat { border-left: 1px solid var(--line); padding-left: 24px; }

/* ============ Sections ============ */
.section { padding: 96px 0; }
.section-head { max-width: 620px; margin-bottom: 52px; }
.section-tight .section-head { margin-bottom: 36px; }
.section-alt { background: var(--white); }

.about-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
}
.about-card {
  background: var(--teal);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 38px;
  position: relative;
  overflow: hidden;
}
.about-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 0%, rgba(237, 130, 42, 0.35), transparent 60%);
}
.about-card h3 { color: var(--white); position: relative; }
.about-card p { color: rgba(255, 255, 255, 0.75); position: relative; }
.about-card .theme-tag {
  position: relative;
  display: inline-block;
  background: var(--orange);
  color: var(--white);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 999px;
  margin-bottom: 18px;
}

/* Program grid */
.program-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.program-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 22px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.program-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: transparent;
}
.program-card .icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--blush);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.program-card .icon svg { width: 22px; height: 22px; color: var(--orange-deep); }
.program-card h4 { font-size: 15.5px; margin-bottom: 6px; }
.program-card p { font-size: 13.5px; margin: 0; color: #7A7A7A; }

/* Included list */
.included-wrap {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 50px;
  align-items: center;
}
.included-list { display: grid; gap: 14px; }
.included-item {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--cream);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.included-item .icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.included-item .icon svg { width: 18px; height: 18px; color: var(--orange); }
.included-item strong { display: block; font-size: 15px; color: var(--teal); }
.included-item span { font-size: 13px; color: #7A7A7A; }

/* Steps */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.step-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 20px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.step-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: transparent;
}
.step-card .step-number {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--orange-deep);
  margin-bottom: 14px;
}
.step-card .icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.step-card .icon svg { width: 19px; height: 19px; color: var(--orange); }
.step-card h4 { font-size: 15px; margin-bottom: 5px; }
.step-card p { font-size: 13px; margin: 0; color: #7A7A7A; }

.fee-card {
  background: var(--white);
  border: 1.5px solid var(--orange);
  border-radius: var(--radius-lg);
  padding: 40px;
  text-align: center;
  box-shadow: var(--shadow);
}
.fee-card .fee {
  font-size: 46px;
  font-weight: 800;
  color: var(--orange-deep);
  margin: 6px 0 4px;
}
.fee-card .fee small { font-size: 16px; font-weight: 600; color: var(--charcoal); }
.fee-card p.note { font-size: 13.5px; color: #8A8A8A; margin-bottom: 26px; }

/* CTA band */
.cta-band {
  background: linear-gradient(120deg, var(--orange) 0%, var(--orange-deep) 100%);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 56px 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.cta-band h2 { color: var(--white); margin-bottom: 6px; }
.cta-band p { color: rgba(255, 255, 255, 0.85); margin: 0; }
.cta-band .btn-dark { background: var(--teal); }
.cta-band .btn-dark:hover { background: var(--teal-soft); }

/* Photo band */
.photo-band {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 360px;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center 25%;
}
.photo-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,46,44,0.92) 0%, rgba(0,46,44,0.15) 55%, rgba(0,46,44,0.05) 100%);
}
.photo-band .photo-caption {
  position: relative;
  padding: 36px 40px;
  color: var(--white);
  max-width: 560px;
}
.photo-band .photo-caption .eyebrow { color: var(--blush); }
.photo-band .photo-caption .eyebrow::before { background: var(--orange); box-shadow: 0 0 0 4px rgba(237, 130, 42, 0.3); }
.photo-band .photo-caption h3 { color: var(--white); margin-bottom: 6px; font-size: 22px; }
.photo-band .photo-caption p { color: rgba(255, 255, 255, 0.78); margin: 0; font-size: 14.5px; }

/* Footer */
.site-footer {
  background: var(--teal);
  color: rgba(255, 255, 255, 0.7);
  padding: 64px 0 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-brand { color: var(--white); font-weight: 700; font-size: 17px; display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.footer-brand .logo-img { width: 32px; height: 32px; }
.footer-grid h5 { color: var(--white); font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 16px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 14px; }
.footer-bottom {
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
}

/* ============ Registration form ============ */
.form-hero {
  position: relative;
  background-image:
    linear-gradient(120deg, rgba(0,46,44,0.93) 0%, rgba(0,46,44,0.82) 50%, rgba(0,27,26,0.94) 100%),
    var(--hero-photo);
  background-size: cover;
  background-position: center 30%;
  color: var(--white);
  padding: 64px 0 56px;
  text-align: center;
}
.form-hero .eyebrow { justify-content: center; color: var(--blush); }
.form-hero .eyebrow::before { background: var(--orange); box-shadow: 0 0 0 4px rgba(237, 130, 42, 0.3); }
.form-hero h1 {
  color: var(--white);
  font-size: clamp(30px, 4.5vw, 44px);
  font-weight: 800;
  margin-bottom: 12px;
}
.form-hero p {
  color: rgba(255, 255, 255, 0.78);
  max-width: 520px;
  margin: 0 auto;
  font-size: 15.5px;
}

.form-page {
  background: var(--cream);
  padding: 48px 0 100px;
}
.form-head { max-width: 640px; margin: 0 auto 40px; text-align: center; }
.form-card {
  max-width: 760px;
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.form-card-top {
  background: var(--teal);
  color: var(--white);
  padding: 30px 44px;
}
.form-card-top .theme-tag {
  display: inline-block;
  background: var(--orange);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.form-card-top h2 { color: var(--white); margin-bottom: 4px; font-size: 22px; }
.form-card-top p { color: rgba(255, 255, 255, 0.7); margin: 0; font-size: 13.5px; }

.form-body { padding: 40px 44px 44px; }
.form-section { margin-bottom: 34px; }
.form-section:last-of-type { margin-bottom: 0; }
.form-section h3 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--orange-deep);
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.field-row.two { grid-template-columns: 1fr 1fr; }
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 7px;
}
.field label .req { color: var(--orange-deep); }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font);
  font-size: 14.5px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: var(--cream);
  color: var(--charcoal);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.field textarea { resize: vertical; min-height: 90px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--orange);
  background: var(--white);
}
.field-hint { font-size: 12px; color: #9A9A9A; margin-top: 5px; }

.choice-group { display: flex; gap: 10px; flex-wrap: wrap; }
.choice-pill {
  position: relative;
}
.choice-pill input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice-pill span {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--charcoal);
  background: var(--cream);
  transition: all 0.15s ease;
}
.choice-pill input:checked + span {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--white);
}
.choice-pill input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 2px; }

.conditional-field { display: none; margin-top: 12px; }
.conditional-field.is-visible { display: block; }

.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--cream);
  border-radius: 10px;
  padding: 16px 18px;
  border: 1.5px solid var(--line);
}
.checkbox-field input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--orange); flex-shrink: 0; }
.checkbox-field p { font-size: 13px; margin: 0; color: #5A5A5A; }

.form-submit { margin-top: 30px; }
.form-error {
  display: none;
  background: #FBE7E1;
  color: #A13A17;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13.5px;
  margin-bottom: 18px;
}
.form-error.is-visible { display: block; }

/* ============ Confirmation page ============ */
.confirm-page {
  padding: 70px 0 100px;
  background: var(--cream);
}
.confirm-shell { max-width: 560px; margin: 0 auto; }
.confirm-lead { text-align: center; margin-bottom: 30px; }
.confirm-lead .icon-badge {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}
.confirm-lead .icon-badge svg { width: 30px; height: 30px; color: var(--white); }

#capture-area {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 0;
  overflow: hidden;
  color: var(--charcoal);
  position: relative;
  box-shadow: var(--shadow);
}
#capture-area .card-top {
  padding: 30px 34px 24px;
  border-bottom: 1px dashed var(--line);
  position: relative;
}
#capture-area .card-top .row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#capture-area .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; color: var(--teal); }
#capture-area .brand .logo-img { width: 26px; height: 26px; border-color: var(--line); }
#capture-area .status-pill {
  background: rgba(0, 46, 44, 0.06);
  border: 1px solid rgba(0, 46, 44, 0.14);
  color: var(--teal);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
}
#capture-area h2 {
  position: relative;
  color: var(--teal);
  font-size: 24px;
  margin: 18px 0 2px;
}
#capture-area .sub { position: relative; color: #7A7A7A; font-size: 13px; margin: 0; }

.confirm-grid {
  padding: 26px 34px 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 16px;
}
.confirm-grid .cell span.label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #9A9A9A;
  margin-bottom: 5px;
}
.confirm-grid .cell span.value {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--teal);
}

.room-block {
  margin: 10px 34px 30px;
  background: var(--orange);
  border-radius: var(--radius);
  padding: 20px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.room-block .label { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.85); margin-bottom: 4px; }
.room-block .value { font-size: 26px; font-weight: 800; color: var(--white); letter-spacing: 0.02em; }
.room-block svg { width: 30px; height: 30px; color: rgba(255, 255, 255, 0.85); }

.confirm-actions { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

.confirm-note {
  margin-top: 26px;
  background: var(--blush);
  border-radius: var(--radius);
  padding: 16px 20px;
  font-size: 13px;
  color: #6B3327;
  text-align: center;
}
.confirm-note strong { color: #52251C; }

/* ============ Fluent Forms compatibility ============ */
/* Reskins Fluent Forms' default markup so an embedded form matches the
   rest of the site. Class names below match Fluent Forms' standard
   output; if a future Fluent Forms update renames these, check the
   plugin's rendered HTML in the browser inspector and adjust selectors
   here accordingly. */
.form-body .fluentform,
.form-body .frm-fluent-form { font-family: var(--font); }

.form-body .ff-el-group { margin-bottom: 18px; }

.form-body .ff-el-input--label label,
.form-body .fluentform label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 7px;
}

.form-body .ff-el-form-control,
.form-body select.ff-el-form-control,
.form-body textarea.ff-el-form-control,
.form-body input.ff-el-form-control {
  width: 100%;
  font-family: var(--font);
  font-size: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: var(--cream);
  color: var(--charcoal);
  box-shadow: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.form-body .ff-el-form-control:focus {
  outline: none;
  border-color: var(--orange);
  background: var(--white);
  box-shadow: none;
}

/* Radio groups (age range, gender, body size, yes/no questions) —
   turned into the same rounded "pill" buttons as the rest of the
   site. The native radio circle is kept but visually hidden and
   stretched to cover the whole pill, so it's still fully accessible
   and keyboard-operable — only the look changes.

   Fluent Forms markup varies by version — sometimes the <label> sits
   next to the <input> as a sibling, sometimes the <input> is nested
   INSIDE the <label>. Both patterns are covered below using the input
   itself (type="radio") rather than relying on a specific class name,
   so this keeps working even if Fluent Forms renames its classes. */

.form-body [class*="form-check-group"],
.form-body .ff-el-form-check-group {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.form-body [class*="form-check-group"] > div,
.form-body .ff-el-form-check {
  position: relative;
  display: inline-flex;
  margin: 0 !important;
  padding: 0 !important;
}

/* Pattern A: <input type="radio"> followed by a sibling <label> */
.form-body input[type="radio"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.form-body input[type="radio"] + label {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--cream);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--charcoal);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.form-body input[type="radio"]:checked + label {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--white);
}

/* Pattern B: <label><input type="radio"> Text</label> — input nested
   inside the label instead of beside it. */
.form-body label:has(> input[type="radio"]) {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--cream);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--charcoal);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  margin: 0;
}
.form-body label:has(> input[type="radio"]) input[type="radio"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.form-body label:has(> input[type="radio"]:checked) {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--white);
}

.form-body input[type="radio"]:focus-visible + label,
.form-body label:has(> input[type="radio"]:focus-visible) {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

/* Single checkboxes (GDPR consent, etc.) stay as a normal checkbox +
   text, styled to match .checkbox-field on the rest of the site,
   rather than becoming a pill. Same sibling/nested coverage as above. */
.form-body input[type="checkbox"] {
  position: static;
  opacity: 1;
  width: 17px;
  height: 17px;
  margin: 3px 10px 0 0;
  accent-color: var(--orange);
  flex-shrink: 0;
}
.form-body input[type="checkbox"] + label,
.form-body label:has(> input[type="checkbox"]) {
  font-size: 13px;
  color: #5A5A5A;
  line-height: 1.5;
  background: none;
  border: none;
  padding: 0;
  display: inline;
}
.form-body [class*="form-check"]:has(> input[type="checkbox"]),
.form-body [class*="form-check"]:has(label > input[type="checkbox"]) {
  align-items: flex-start;
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px !important;
  width: 100%;
}

.form-body .ff-btn,
.form-body .ff-btn-submit,
.form-body button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-family: var(--font);
  font-weight: 600;
  font-size: 15px;
  padding: 15px 30px;
  border-radius: 999px;
  border: none;
  background: var(--orange);
  color: var(--white);
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}
.form-body .ff-btn:hover,
.form-body .ff-btn-submit:hover,
.form-body button[type="submit"]:hover {
  background: var(--orange-deep);
  transform: translateY(-2px);
}

.form-body .error,
.form-body .text-danger,
.form-body .ff-el-form-control.is-invalid {
  border-color: #D64545;
}

/* ============ Responsive ============ */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .about-grid, .included-wrap { grid-template-columns: 1fr; }
  .program-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  .field-row, .field-row.two { grid-template-columns: 1fr; }
  .cta-band { flex-direction: column; text-align: center; }
  .confirm-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  .wrap { padding: 0 18px; }
  .site-header .wrap { height: 68px; }
  .logo { font-size: 14px; gap: 8px; }
  .logo-img { width: 34px; height: 34px; }
  .logo span small { font-size: 9.5px; }
  .header-cta .btn { padding: 10px 16px; font-size: 13px; }

  .hero { padding: 56px 0 64px; }
  .form-hero { padding: 44px 0 36px; }
  .form-hero h1 { font-size: 26px; }
  .hero-inner { max-width: 100%; }
  .hero h1 { font-size: 34px; margin-bottom: 14px; }
  .hero-sub { font-size: 15.5px; margin-bottom: 26px; }
  .hero-actions { gap: 12px; margin-bottom: 32px; }
  .hero-actions .btn { flex: 1 1 auto; justify-content: center; }
  .hero-meta { gap: 10px; }
  .hero-meta .item { padding: 10px 14px; font-size: 13px; width: 100%; }

  .stat-strip .wrap { flex-direction: column; gap: 14px; padding: 20px 18px; }
  .stat { min-width: 0; }
  .stat .num { font-size: 19px; }

  .section { padding: 56px 0; }
  .section-head { margin-bottom: 32px; }
  h2 { font-size: 26px; }

  .about-card, .fee-card { padding: 28px 22px; }
  .fee-card .fee { font-size: 38px; }

  .cta-band { padding: 36px 26px; border-radius: var(--radius); }
  .cta-band h2 { font-size: 22px; }

  .photo-band { min-height: 300px; border-radius: var(--radius); }
  .photo-band .photo-caption { padding: 24px 22px; }
  .photo-band .photo-caption h3 { font-size: 19px; }

  .footer-grid { gap: 30px; }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }

  .form-card-top { padding: 24px 22px; }
  .form-card-top h2 { font-size: 19px; }
  .form-body { padding: 28px 22px 32px; }
  .form-section h3 { font-size: 12.5px; }
  .choice-group { gap: 8px; }
  .choice-pill span { padding: 9px 14px; font-size: 13px; }

  .confirm-shell { max-width: 100%; }
  #capture-area .card-top { padding: 24px 22px 20px; }
  #capture-area h2 { font-size: 20px; }
  .confirm-grid { grid-template-columns: 1fr 1fr; padding: 22px 22px 6px; gap: 16px 12px; }
  .confirm-grid .cell span.value { font-size: 14.5px; }
  .room-block { margin: 8px 22px 26px; padding: 16px 18px; }
  .room-block .value { font-size: 20px; }
  .room-block svg { width: 24px; height: 24px; }
  .confirm-actions .btn { flex: 1 1 auto; justify-content: center; }

  .field input[type="text"],
  .field input[type="email"],
  .field input[type="tel"],
  .field select,
  .field textarea {
    font-size: 16px;
  }
}

@media (max-width: 560px) {
  .program-grid { grid-template-columns: 1fr; }
  .form-card-top, .form-body { padding-left: 22px; padding-right: 22px; }
  .stat + .stat { border-left: none; padding-left: 0; }
}

@media (max-width: 380px) {
  .logo span small { display: none; }
  .hero h1 { font-size: 29px; }
  .hero-meta .item { font-size: 12.5px; padding: 9px 12px; }
  .confirm-grid { grid-template-columns: 1fr; }
  .fee-card .fee { font-size: 32px; }
  .steps-grid { grid-template-columns: 1fr; }
}