:root {
  /* ── Picked brand tokens (Brand Colors panel overrides these) ── */
  --brown-dark: #2C1A0E;
  --brown-mid: #5C3D1E;
  --amber: #EF9F27;
  --amber-light: #FAC775;
  --amber-text: #633806;
  --cream-dark: #EDE6D9;   /* page background */
  --cream: #F7F3EC;        /* surface */
  --paper: #FDFAF4;        /* content cards */
  --text: #1C1009;
  --text-muted: #88775A;
  --green: #3B6D11;
  --red: #A32D2D;

  /* ── RGB triplets for translucent tints (kept in sync by the panel) ── */
  --brown-dark-rgb: 44, 26, 14;
  --brown-mid-rgb: 92, 61, 30;
  --amber-rgb: 239, 159, 39;
  --muted-rgb: 136, 119, 90;
  --surface-rgb: 247, 243, 236;
  --paper-rgb: 253, 250, 244;

  /* ── Derived — never picked, always consistent with the brand ── */
  --brown-light: color-mix(in srgb, var(--brown-mid) 60%, var(--amber));
  --amber-pale: color-mix(in srgb, var(--amber) 14%, white);
  --green-light: color-mix(in srgb, var(--green) 13%, white);
  --green-text: color-mix(in srgb, var(--green) 80%, black);
  --text-mid: var(--brown-mid);
  --text-soft: color-mix(in srgb, var(--text) 74%, white);
  --text-softer: color-mix(in srgb, var(--text) 62%, white);
  --warm-gray: color-mix(in srgb, var(--brown-mid) 60%, var(--text-muted));
  --ink-deep: color-mix(in srgb, var(--brown-mid) 76%, black);
  --input-bg: color-mix(in srgb, var(--paper) 62%, var(--cream));
  --border-soft: color-mix(in srgb, var(--brown-mid) 16%, var(--cream));
  --video-well: color-mix(in srgb, var(--brown-dark) 72%, black);
  --grad-hi: color-mix(in srgb, var(--amber) 80%, white);
  --grad-lo: color-mix(in srgb, var(--amber) 86%, black);
  --grad-hover-hi: color-mix(in srgb, var(--amber-light) 76%, white);
  --grad-hover-lo: color-mix(in srgb, var(--amber-light) 80%, var(--amber));
  --border: rgba(var(--brown-mid-rgb), 0.15);
  --border-mid: rgba(var(--brown-mid-rgb), 0.25);
  --white: #FFFFFF;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* ── Generated assets (Brand panel regenerates these from the palette) ── */
  --tex-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.16  0 0 0 0 0.10  0 0 0 0 0.05  0.45 0 0 0 -0.10'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
  --tex-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.2  0 0 0 0 0.13  0 0 0 0 0.06  0.06 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23g%29'/%3E%3C/svg%3E");
  --orn-fence: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='16' viewBox='0 0 150 16'%3E%3Cg stroke='%235C3D1E' stroke-opacity='0.6' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='4' y1='6' x2='146' y2='6'/%3E%3Cline x1='4' y1='11' x2='146' y2='11'/%3E%3Cline x1='12' y1='2' x2='12' y2='14'/%3E%3Cline x1='45' y1='2' x2='45' y2='14'/%3E%3Cline x1='75' y1='2' x2='75' y2='14'/%3E%3Cline x1='105' y1='2' x2='105' y2='14'/%3E%3Cline x1='138' y1='2' x2='138' y2='14'/%3E%3C/g%3E%3C/svg%3E");
  --photo-tint: sepia(0.18) saturate(0.94) contrast(1.02);
}

/* Scoped reset — only inside our app, not the whole WP page */
.vf-roi-app *, .vf-roi-app *::before, .vf-roi-app *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Break out of WP content container to go full-viewport */
.vf-roi-app {
  font-family: var(--vf-font-body, 'Inter'), sans-serif;
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* App top/height are set dynamically by JS to sit below WP menu */

/* Undo scoped reset for Leaflet internals */
.vf-roi-app .leaflet-container,
.vf-roi-app .leaflet-container * {
  margin: unset;
  padding: unset;
  box-sizing: content-box;
}

.vf-roi-app .app-header {
  height: 48px;
  background: #000000;
  display: flex;
  align-items: center;
  padding: 0 1.25rem;
  position: relative;
  z-index: 10000;
  overflow: visible;
}
.vf-roi-app .app-header::before {
  content: '';
  position: absolute; inset: 0;
  background: none;
  pointer-events: none;
}
.vf-roi-app .hdr-eyebrow {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  position: relative;
}
.vf-roi-app .hdr-title {
  font-family: var(--vf-font-heading, 'Playfair Display'), serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--amber-light);
  margin-left: 0.75rem;
  position: relative;
}


/* Address Search */
.vf-roi-app .address-search {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: auto;
  margin-right: 8px;
  flex-shrink: 0;
}
.vf-roi-app .address-search input {
  width: 240px;
  padding: 5px 10px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.9);
  color: var(--brown-dark);
  font-size: 12px;
  font-family: var(--vf-font-body, 'Inter'), sans-serif;
  outline: none;
  transition: background 0.2s, border-color 0.2s;
}
.vf-roi-app .address-search input::placeholder { color: rgba(var(--brown-mid-rgb),0.5); }
.vf-roi-app .address-search input:focus {
  background: #fff;
  border-color: var(--amber-light);
}
.vf-roi-app .address-search button {
  background: none;
  border: none;
  color: var(--amber-light);
  cursor: pointer;
  font-size: 14px;
  padding: 4px 6px;
  margin-left: 2px;
}
.vf-roi-app .search-results {
  display: none;
  position: absolute;
  top: 100%;
  
  right: 0;
  background: var(--cream);
  border: 1px solid var(--border-mid);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  z-index: 100000;
  max-height: 200px;
  overflow-y: auto;
}
.vf-roi-app .search-results.visible { display: block; }
.vf-roi-app .search-result-item {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.vf-roi-app .search-result-item:last-child { border-bottom: none; }
.vf-roi-app .search-result-item:hover { background: var(--cream-light); }
.vf-roi-app .search-no-results {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

.vf-roi-app .app-body {
  display: flex;
  flex: 1;
  position: relative;
  overflow: hidden;
}

.vf-roi-app #vf-map {
  flex: 1;
  min-height: 500px;
  z-index: 1;
  background: color-mix(in srgb, var(--text) 20%, white);
}

/* Layer Panel */
.vf-roi-app .layer-panel {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 290px;
  max-height: calc(100% - 20px);
  background: rgba(var(--surface-rgb),0.96);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-lg);
  z-index: 1000;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  font-size: 12px;
}
.vf-roi-app .layer-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.85rem;
  background: var(--brown-dark);
  color: var(--amber-light);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  font-family: var(--vf-font-heading, 'Playfair Display'), serif;
  font-size: 13px;
  font-weight: 500;
  position: sticky;
  
  z-index: 2;
}
.vf-roi-app .layer-panel-header button {
  background: none; border: none; color: var(--amber-light); cursor: pointer; font-size: 18px; line-height: 1;
}
.vf-roi-app .lp-section { border-bottom: 1px solid var(--border); }
.vf-roi-app .lp-section:last-child { border-bottom: none; }
.vf-roi-app .lp-section-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.55rem 0.85rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-mid);
  background: var(--cream-dark);
  user-select: none;
}
.vf-roi-app .lp-section-head:hover { background: var(--border-soft); }
.vf-roi-app .lp-section-head .arrow { transition: transform 0.2s; font-size: 10px; }
.vf-roi-app .lp-section-head.collapsed .arrow { transform: rotate(-90deg); }
.vf-roi-app .lp-section-body { padding: 0.35rem 0; }
.vf-roi-app .lp-section-head.collapsed + .lp-section-body { display: none; }
.vf-roi-app .lp-layer {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0.3rem 0.85rem;
  cursor: pointer;
  transition: background 0.1s;
}
.vf-roi-app .lp-layer:hover { background: var(--cream-dark); }
.vf-roi-app .lp-layer input[type="checkbox"] { accent-color: var(--brown-light); width: 14px; height: 14px; cursor: pointer; }
.vf-roi-app .lp-swatch {
  width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; border: 1px solid rgba(0,0,0,0.15);
}
.vf-roi-app .lp-layer-name { font-size: 11.5px; color: var(--text) !important; line-height: 1.3; }
.vf-roi-app .layer-panel label { color: var(--text) !important; }
.vf-roi-app .lp-base-layer {
  display: flex; align-items: center; gap: 7px;
  padding: 0.3rem 0.85rem; cursor: pointer;
}
.vf-roi-app .lp-base-layer:hover { background: var(--cream-dark); }
.vf-roi-app .lp-base-layer input[type="radio"] { accent-color: var(--brown-light); cursor: pointer; }

/* Parcel Selection Bar */
.vf-roi-app .parcel-selection-bar { display: none !important;
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background: rgba(var(--brown-dark-rgb),0.95);
  color: var(--amber-light);
  padding: 0.6rem 1rem;
  border-radius: var(--radius-lg);
  font-size: 12px;
  display: none;
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
  max-width: 500px;
  width: max-content;
}
.vf-roi-app .parcel-selection-bar.visible { display: flex; align-items: center; gap: 1rem; }
.vf-roi-app .psb-info { display: flex; flex-direction: column; gap: 2px; }
.vf-roi-app .psb-count { font-weight: 600; font-size: 13px; }
.vf-roi-app .psb-acres { font-size: 12px; color: var(--amber); }
.vf-roi-app .psb-owner { font-size: 11px; color: var(--text-muted); max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vf-roi-app .psb-actions { display: flex; gap: 6px; flex-shrink: 0; }
.vf-roi-app .psb-btn {
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-sm);
  border: none;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--vf-font-body, 'Inter'), sans-serif;
}
.vf-roi-app .psb-btn-use { background: var(--amber); color: var(--amber-text); }
.vf-roi-app .psb-btn-use:hover { background: var(--amber-light); }
.vf-roi-app .psb-btn-clear { background: rgba(255,255,255,0.15); color: var(--amber-light); }
.vf-roi-app .psb-btn-clear:hover { background: rgba(255,255,255,0.25); }

/* Measurement popup */
.vf-roi-app .measurement-info {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background: rgba(var(--brown-dark-rgb),0.92);
  color: var(--amber-light);
  padding: 0.5rem 1.2rem;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  display: none;
  white-space: nowrap;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* Calculator Panel */
.vf-roi-app .calc-panel {
  width: var(--calc-width, 550px);
  min-width: 400px;
  height: 100%;
  background: var(--cream);
  border-left: 1px solid var(--border-mid);
  display: flex;
  flex-direction: column;
  transition: margin-right 0.3s ease;
  z-index: 1000;
  position: relative;
}
.vf-roi-app .calc-inner {
  flex: 1;
  overflow-y: auto;
}
.vf-roi-app .calc-panel.closed {
  margin-right: calc(-1 * var(--calc-width, 550px));
}
.vf-roi-app .calc-toggle {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1001;
  background: var(--brown-dark);
  color: var(--amber-light);
  border: none;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  padding: 12px 6px;
  cursor: pointer;
  font-family: var(--vf-font-body, 'Inter'), sans-serif;
  font-size: 11px;
  font-weight: 600;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 0.08em;
  transition: right 0.3s ease;
  box-shadow: -2px 0 10px rgba(0,0,0,0.15);
}
.vf-roi-app .calc-toggle:hover { background: var(--brown-mid); }
.vf-roi-app .calc-panel.closed ~ .calc-toggle { right: 0; }
.vf-roi-app .calc-panel:not(.closed) ~ .calc-toggle { right: var(--calc-width, 550px); }


/* ── Drag resize handle ── */
.vf-roi-app .calc-resize-handle {
  position: absolute;
  left: -4px;
  top: 0;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  z-index: 1002;
  background: transparent;
  transition: background 0.15s;
}
.vf-roi-app .calc-resize-handle:hover,
.vf-roi-app .calc-resize-handle.dragging {
  background: var(--brown-mid);
  opacity: 0.5;
}
.vf-roi-app .calc-panel.closed .calc-resize-handle { display: none; }
body.vf-resizing { cursor: col-resize !important; user-select: none !important; }
body.vf-resizing * { cursor: col-resize !important; user-select: none !important; }
@media (max-width: 768px) {
  .vf-roi-app .calc-resize-handle { display: none; }
}

/* Calculator Inner Styles */
.vf-roi-app .calc-inner { padding: 1.25rem; flex: 1; overflow-y: auto; }
.vf-roi-app .steps-nav {
  display: flex;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 1.25rem;
  background: var(--white);
}
.vf-roi-app .step-btn {
  flex: 1;
  padding: 0.5rem 0.2rem;
  font-size: 10px;
  text-align: center;
  cursor: pointer;
  background: transparent;
  color: var(--text-muted);
  border: none;
  border-right: 1px solid var(--border);
  font-family: var(--vf-font-body, 'Inter'), sans-serif;
  transition: background 0.15s, color 0.15s;
  line-height: 1.3;
}
.vf-roi-app .step-btn:last-child { border-right: none; }
.vf-roi-app .step-btn .step-num { display: block; font-size: 8px; opacity: 0.65; margin-bottom: 1px; letter-spacing: 0.06em; text-transform: uppercase; }
.vf-roi-app .step-btn.active { background: var(--brown-dark); color: var(--amber-light); font-weight: 600; }
.vf-roi-app .step-btn.done { background: var(--cream-dark); color: var(--text-mid); }
.vf-roi-app .step-btn:not(.active):hover { background: var(--cream-dark); }
.vf-roi-app .section { display: none; }
.vf-roi-app .section.active { display: block; }
.vf-roi-app .section-header { margin-bottom: 1rem; }
.vf-roi-app .section-title {
  font-family: var(--vf-font-heading, 'Playfair Display'), serif;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--brown-dark);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0.2rem;
}
.vf-roi-app .section-title .icon {
  width: 28px; height: 28px;
  background: var(--amber-pale);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.vf-roi-app .section-desc { font-size: 11.5px; color: var(--text-muted); padding-left: 36px; }
.vf-roi-app .card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0.85rem 1rem;
  margin-bottom: 0.85rem;
}
.vf-roi-app .card-title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-muted);
  margin-bottom: 0.7rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
}
.vf-roi-app .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 0.4rem; }
.vf-roi-app .field { display: flex; flex-direction: column; gap: 3px; }
.vf-roi-app .field label { font-size: 11px; font-weight: 500; color: var(--text-mid); letter-spacing: 0.02em; }
.vf-roi-app .field input, .vf-roi-app .field select {
  width: 100%;
  padding: 0.35rem 0.55rem;
  font-size: 13px;
  background: var(--cream);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--vf-font-body, 'Inter'), sans-serif;
  transition: border-color 0.15s;
}
.vf-roi-app .field input:focus, .vf-roi-app .field select:focus { outline: none; border-color: var(--brown-light); background: var(--white); }
.vf-roi-app .field .hint { font-size: 10px; color: var(--text-muted); font-style: italic; }
.vf-roi-app .animal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 0.85rem; }
.vf-roi-app .animal-chip {
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-md);
  padding: 0.5rem 0.3rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-mid);
  background: var(--white);
  user-select: none;
}
.vf-roi-app .animal-chip:hover { background: var(--cream-dark); }
.vf-roi-app .animal-chip.selected { background: var(--amber-pale); border-color: var(--amber); color: var(--amber-text); }
.vf-roi-app .chip-icon { display: block; font-size: 20px; margin-bottom: 2px; }
.vf-roi-app .nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
  padding-top: 0.85rem;
}
.vf-roi-app .progress-text { font-size: 11px; color: var(--text-muted); }
.vf-roi-app .btn-primary {
  padding: 0.5rem 1.2rem;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--amber);
  color: var(--amber-text);
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  font-family: var(--vf-font-body, 'Inter'), sans-serif;
}
.vf-roi-app .btn-primary:hover { background: var(--amber-light); }
.vf-roi-app .btn-secondary {
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text-mid);
  font-weight: 500;
  font-size: 12px;
  cursor: pointer;
  font-family: var(--vf-font-body, 'Inter'), sans-serif;
}
.vf-roi-app .btn-secondary:hover { background: var(--cream-dark); }

/* ROI Summary styles */
.vf-roi-app .roi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 1rem;
}
.vf-roi-app .metric-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.75rem;
  text-align: center;
}
.vf-roi-app .metric-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 4px; }
.vf-roi-app .metric-value { font-size: 1.25rem; font-weight: 600; color: var(--brown-dark); font-family: var(--vf-font-heading, 'Playfair Display'), serif; }
.vf-roi-app .metric-value.positive { color: var(--green); }
.vf-roi-app .breakdown-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.vf-roi-app .breakdown-table th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); padding: 6px 8px; border-bottom: 2px solid var(--border-mid); }
.vf-roi-app .breakdown-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); }
.vf-roi-app .breakdown-table .save-col { color: var(--green); font-weight: 500; }
.vf-roi-app .breakdown-table .total-row td { font-weight: 600; border-top: 2px solid var(--border-mid); background: var(--cream); }
.vf-roi-app .divider { height: 1px; background: var(--border-mid); margin: 1.25rem 0; }

/* Vendor cards */
.vf-roi-app .vendor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 1rem; }
.vf-roi-app .vendor-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0.85rem;
  position: relative;
  display: flex;
  flex-direction: column;
}
.vf-roi-app .vendor-card.ineligible { opacity: 0.45; }
.vf-roi-app .vendor-card.best-value { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.vf-roi-app .best-badge {
  position: absolute; top: -8px; right: 10px;
  background: var(--green); color: white;
  font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px 8px; border-radius: 4px;
}
.vf-roi-app .vendor-name { font-family: var(--vf-font-heading, 'Playfair Display'), serif; font-size: 1rem; font-weight: 500; margin-bottom: 4px; }
.vf-roi-app .vendor-badge { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 6px; border-radius: 3px; display: inline-block; margin-bottom: 8px; }
.vf-roi-app .badge-cattle { background: var(--amber-pale); color: var(--amber-text); }
.vf-roi-app .badge-all { background: var(--green-light); color: var(--green-text); }
.vf-roi-app .vendor-line { display: flex; justify-content: space-between; font-size: 11px; padding: 3px 0; border-bottom: 1px solid var(--border); }
.vf-roi-app .vendor-line span { color: var(--text-muted); }
.vf-roi-app .vendor-line strong { color: var(--text); }
.vf-roi-app .vendor-totals { margin-top: auto; padding-top: 6px; }
.vf-roi-app .vendor-total-row { display: flex; justify-content: space-between; font-size: 11px; padding: 2px 0; }
.vf-roi-app .tlabel { color: var(--text-muted); }
.vf-roi-app .tval { font-weight: 600; color: var(--brown-dark); }
.vf-roi-app .info-box {
  background: var(--amber-pale);
  border-radius: var(--radius-md);
  padding: 0.65rem 0.85rem;
  font-size: 11px;
  color: var(--amber-text);
  margin-bottom: 1rem;
  line-height: 1.5;
}
.vf-roi-app .calc-footer { text-align: center; padding: 1rem; font-size: 10px; color: var(--text-muted); }

/* popup styles */
.vf-roi-app .popup-props { list-style: none; padding: 0; margin: 0; font-size: 12px; }
.vf-roi-app .popup-props li { padding: 2px 0; }
.vf-roi-app .popup-props .pk { font-weight: 600; color: var(--text-mid); }

/* Draw toolbar — positioned inside the map container, top-aligned with the layer panel */
.vf-roi-app .draw-toolbar {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vf-roi-app .draw-toolbar button {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--cream);
  color: var(--text-mid);
  cursor: pointer;
  font-size: 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  transition: background 0.15s, color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vf-roi-app .draw-toolbar button:hover { background: var(--cream-dark); }
.vf-roi-app .draw-toolbar button.active { background: var(--amber); color: var(--amber-text); }
.vf-roi-app .draw-toolbar button[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  right: 48px;
  background: var(--brown-dark);
  color: var(--amber-light);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
}
.vf-roi-app .draw-first-vertex {
  width: 14px;
  height: 14px;
  background: var(--amber);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(0,0,0,0.4);
  cursor: pointer;
}
.vf-roi-app .draw-vertex {
  width: 10px;
  height: 10px;
  background: #fff;
  border: 2px solid var(--amber);
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(0,0,0,0.3);
}

/* Layer panel collapsed */
.vf-roi-app .layer-panel.lp-collapsed .layer-panel-body { display: none; }
.vf-roi-app .layer-panel.lp-collapsed { width: auto; }

/* Scrollbar styling */
.vf-roi-app .calc-panel::-webkit-scrollbar, .vf-roi-app .layer-panel::-webkit-scrollbar { width: 6px; }
.vf-roi-app .calc-panel::-webkit-scrollbar-track, .vf-roi-app .layer-panel::-webkit-scrollbar-track { background: transparent; }
.vf-roi-app .calc-panel::-webkit-scrollbar-thumb, .vf-roi-app .layer-panel::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 3px; }

/* Loading spinner for layers */
.vf-roi-app .layer-loading {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--border-mid);
  border-top-color: var(--amber);
  border-radius: 50%;
  animation: vf-spin 0.6s linear infinite;
  margin-left: 6px;
}
@keyframes vf-spin { to { transform: rotate(360deg); } }

/* Land Profile Panel */
.vf-roi-app .land-profile-panel {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background: rgba(var(--brown-dark-rgb),0.96);
  color: var(--cream);
  border-radius: var(--radius-lg);
  font-size: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.35);
  max-width: 600px;
  min-width: 320px;
  width: max-content;
  display: none;
  backdrop-filter: blur(8px);
}
.vf-roi-app .land-profile-panel.visible { display: block; }
.vf-roi-app .lpp-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0.5rem 0.85rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.vf-roi-app .lpp-icon { font-size: 14px; }
.vf-roi-app .lpp-title { font-weight: 600; font-size: 12px; color: var(--amber-light); flex: 1; }
.vf-roi-app .lpp-status { font-size: 10px; color: var(--amber); }
.vf-roi-app .lpp-close {
  background: none; border: none; color: rgba(255,255,255,0.5); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px;
}
.vf-roi-app .lpp-close:hover { color: var(--amber-light); }
.vf-roi-app .lpp-body { padding: 0.6rem 0.85rem; max-height: 200px; overflow-y: auto; }
.vf-roi-app .lpp-empty { font-size: 11px; color: rgba(255,255,255,0.5); font-style: italic; }
/* Same empty-state class inside the Conservation report card sits on light
   paper, not the dark map panel — use readable ink there */
.vf-roi-app #conservationReportBody .lpp-empty {
  color: var(--text-muted);
  font-size: 13.5px;
}

.vf-roi-app .lpp-group { margin-bottom: 0.5rem; }
.vf-roi-app .lpp-group:last-child { margin-bottom: 0; }
.vf-roi-app .lpp-group-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--amber);
  margin-bottom: 4px;
}
.vf-roi-app .lpp-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.vf-roi-app .lpp-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.vf-roi-app .lpp-tag-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.vf-roi-app .lpp-tag--wildlife { background: rgba(139,69,19,0.3); color: #FFDAB9; }
.vf-roi-app .lpp-tag--migration { background: rgba(255,69,0,0.25); color: #FFD4BA; }
.vf-roi-app .lpp-tag--habitat { background: rgba(30,144,255,0.25); color: #B8DFFF; }
.vf-roi-app .lpp-tag--allotment { background: rgba(205,133,63,0.3); color: #FFE4C4; }
.vf-roi-app .lpp-tag--stream { background: rgba(65,105,225,0.3); color: #B8D4FF; }
.vf-roi-app .lpp-tag--habitat_type { background: rgba(34,139,34,0.25); color: #C8F0C8; }

.vf-roi-app .lpp-scanning {
  display: inline-block;
  width: 10px; height: 10px;
  border: 2px solid rgba(255,255,255,0.2);
  border-top-color: var(--amber);
  border-radius: 50%;
  animation: vf-spin 0.6s linear infinite;
  margin-left: 4px;
}

/* ROI report land profile */
.vf-roi-app .roi-lp-group { margin-bottom: 0.65rem; }
.vf-roi-app .roi-lp-group:last-child { margin-bottom: 0; }
.vf-roi-app .roi-lp-group-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.vf-roi-app .roi-lp-items { font-size: 12px; color: var(--text); line-height: 1.6; }
.vf-roi-app .roi-lp-dot {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  margin-right: 4px; vertical-align: middle;
}


/* Land Information Section (bottom of calc panel) */
.vf-roi-app .land-info-section {
  border-top: 2px solid var(--brown-dark);
  background: rgba(var(--surface-rgb),0.98);
  flex-shrink: 0;
}
.vf-roi-app .land-info-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 1.25rem;
  font-family: var(--vf-font-heading, 'Playfair Display'), serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--brown-dark);
  cursor: pointer;
  user-select: none;
}
.vf-roi-app .land-info-header:hover {
  background: rgba(0,0,0,0.03);
}
.vf-roi-app .li-arrow {
  margin-left: auto;
  font-size: 10px;
  transition: transform 0.2s;
}
.vf-roi-app .land-info-content-wrap {
  overflow-y: auto;
  transition: max-height 0.3s ease;
  max-height: min(55vh, 640px);
  max-height: min(70svh, 640px);
  touch-action: pan-y;
}
.vf-roi-app .land-info-content-wrap.collapsed {
  max-height: 0;
  overflow: hidden;
}
.vf-roi-app .land-info-content-wrap.collapsed ~ .land-info-header .li-arrow,
.vf-roi-app .land-info-section:has(.collapsed) .li-arrow {
  transform: rotate(-90deg);
}
.vf-roi-app .li-icon { font-size: 14px; }
.vf-roi-app .land-info-body {
  padding: 0 1.25rem 8px;
}
.vf-roi-app .land-info-profile {
  padding: 0 1.25rem 12px;
}
.vf-roi-app .li-summary {
  display: flex;
  gap: 16px;
  padding: 6px 0 8px;
}
.vf-roi-app .li-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.vf-roi-app .li-stat-val {
  font-size: 16px;
  font-weight: 700;
  color: var(--brown-dark);
  font-family: var(--vf-font-heading, 'Playfair Display'), serif;
}
.vf-roi-app .li-stat-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.vf-roi-app .li-details { margin-top: 4px; }
.vf-roi-app .li-toggle {
  font-size: 11px;
  font-weight: 600;
  color: var(--brown-mid);
  cursor: pointer;
  padding: 4px 0;
  list-style: none;
}
.vf-roi-app .li-toggle::before { content: '\25B6 '; font-size: 9px; }
.vf-roi-app details[open] .li-toggle::before { content: '\25BC '; }
.vf-roi-app .li-toggle::-webkit-details-marker { display: none; }
.vf-roi-app .li-parcel-list {
  max-height: 150px;
  overflow-y: auto;
  margin-top: 4px;
}
.vf-roi-app .li-parcel-item {
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
  font-size: 11.5px;
}
.vf-roi-app .li-parcel-item:last-child { border-bottom: none; }
.vf-roi-app .li-parcel-name {
  font-weight: 600;
  color: var(--brown-dark);
}
.vf-roi-app .li-parcel-detail {
  color: var(--text-muted);
  font-size: 10.5px;
}

/* Land profile tags inside calc panel */
.vf-roi-app .lip-category {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brown-mid);
  margin: 8px 0 4px;
}
.vf-roi-app .lip-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.vf-roi-app .lip-tag {
  font-size: 10.5px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--brown-dark);
  color: var(--amber-light);
  white-space: nowrap;
}
.vf-roi-app .lip-status {
  font-size: 10px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

@media print {
  .vf-roi-app .app-header, .vf-roi-app .layer-panel, .vf-roi-app .calc-toggle, .vf-roi-app #vf-map { display: none !important; }
  .vf-roi-app .calc-panel { position: static !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; height: auto !important; overflow: visible !important; }
  .vf-roi-app .calc-panel.closed { margin-right: 0 !important; }
  .vf-roi-app .section { display: block !important; margin-bottom: 1.5rem; break-inside: avoid; }
  .vf-roi-app .steps-nav, .vf-roi-app .nav-row { display: none !important; }
}

/* Force dark text in land info section and layer panel */
.vf-roi-app .land-info-section,
.vf-roi-app .land-info-section * {
  color: var(--text) !important;
}
.vf-roi-app .land-info-header {
  color: var(--brown-dark) !important;
}
.vf-roi-app .li-stat-lbl {
  color: var(--text-muted) !important;
}
.vf-roi-app .li-parcel-detail {
  color: var(--text-muted) !important;
}
.vf-roi-app .li-toggle {
  color: var(--brown-mid) !important;
}

/* Land ownership breakdown in info panel */
.li-ownership-breakdown {
  background: rgba(139,119,90,0.1);
  border-radius: 6px;
  padding: 8px 12px;
  margin-top: 8px;
}
.li-breakdown-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.li-breakdown-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  font-size: 13px;
}
.li-bd-label { color: var(--text); font-weight: 500; }
.li-bd-val { color: var(--text); font-weight: 600; }

/* Disclaimer modal */
.vf-disclaimer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 50000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: vfFadeIn 0.3s ease;
}
.vf-disclaimer-overlay.vf-disclaimer-closing {
  animation: vfFadeOut 0.3s ease forwards;
}
.vf-disclaimer-modal {
  background: #fff;
  border-radius: 8px;
  padding: 24px 28px;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.vf-disclaimer-title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}
.vf-disclaimer-body {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-soft);
  overflow-y: auto;
  flex: 1;
  margin-bottom: 16px;
}
.vf-disclaimer-body p { margin: 0 0 10px; }
.vf-disclaimer-btn {
  display: block;
  width: 100%;
  padding: 10px;
  background: var(--text-muted);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.vf-disclaimer-btn:hover { background: color-mix(in srgb, var(--brown-mid) 60%, var(--text-muted)); }
@keyframes vfFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes vfFadeOut { from { opacity: 1; } to { opacity: 0; } }

/* ═══ SAVE MODAL ═══ */
.vf-save-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.55);
  z-index: 10000;
  align-items: center;
  justify-content: center;
}
.vf-save-overlay.active { display: flex; }
.vf-save-modal {
  background: #fff;
  border-radius: 12px;
  padding: 28px 32px;
  max-width: 440px;
  width: 90%;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  animation: vfModalIn 0.2s ease-out;
}
@keyframes vfModalIn {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.vf-save-close {
  position: absolute;
  top: 12px; right: 16px;
  background: none; border: none;
  font-size: 24px; color: var(--text-muted);
  cursor: pointer; line-height: 1;
}
.vf-save-close:hover { color: var(--ink-deep); }
.vf-save-title {
  font-family: var(--vf-font-heading, 'Playfair Display'), serif;
  font-size: 1.25rem;
  color: var(--ink-deep);
  margin: 0 0 4px 0;
}
.vf-save-desc {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 0 0 18px 0;
}
.vf-save-options {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}
.vf-save-option {
  flex: 1;
  background: var(--input-bg);
  border: 2px solid var(--border-soft);
  border-radius: 10px;
  padding: 16px 14px;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
}
.vf-save-option:hover {
  border-color: var(--brown-light);
  background: var(--cream);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(87,65,35,0.12);
}
.vf-save-opt-icon { font-size: 28px; margin-bottom: 6px; }
.vf-save-opt-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-deep);
  margin-bottom: 4px;
}
.vf-save-opt-desc {
  font-size: 10.5px;
  color: var(--text-muted);
  line-height: 1.35;
}

/* Email form */
.vf-save-email-form {
  background: var(--input-bg);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.vf-save-email-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-deep);
  margin-bottom: 4px;
}
.vf-save-email-input {
  width: 100%;
  padding: 8px 10px;
  border: 1.5px solid color-mix(in srgb, var(--brown-mid) 28%, var(--cream));
  border-radius: 6px;
  font-size: 13px;
  color: var(--brown-dark);
  background: #fff;
  box-sizing: border-box;
  font-family: inherit;
}
.vf-save-email-input:focus {
  outline: none;
  border-color: var(--brown-light);
  box-shadow: 0 0 0 2px rgba(139,109,63,0.15);
}
.vf-save-btn {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px;
  background: var(--ink-deep);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.vf-save-btn:hover { background: color-mix(in srgb, var(--brown-dark) 78%, var(--brown-mid)); }

/* Status messages */
.vf-save-status {
  font-size: 12px;
  padding: 4px 0;
  min-height: 18px;
  text-align: center;
}
.vf-save-status-success { color: var(--green); }
.vf-save-status-error { color: var(--red); }
.vf-save-status-working { color: var(--brown-light); }
.vf-save-profile-note {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 4px;
}

/* ═══ SESSION LOADING OVERLAY ═══ */
.vf-loading-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(245,240,230,0.88);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s;
}
.vf-loading-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}
.vf-loading-spinner {
  width: 40px; height: 40px;
  border: 3.5px solid color-mix(in srgb, var(--brown-mid) 28%, var(--cream));
  border-top-color: var(--ink-deep);
  border-radius: 50%;
  animation: vfSpin 0.8s linear infinite;
}
@keyframes vfSpin { to { transform: rotate(360deg); } }
.vf-loading-text {
  margin-top: 14px;
  font-family: var(--vf-font-heading, 'Playfair Display'), serif;
  font-size: 14px;
  color: var(--ink-deep);
}
.vf-loading-sub {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
}

/* Select dropdown styling */
.vf-roi-app select {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.82rem;
  background: var(--bg-input);
  color: var(--text-main);
  font-family: inherit;
  appearance: auto;
}
.vf-roi-app select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(124,106,79,0.15);
}

/* Range slider styling */
.vf-roi-app input[type="range"] {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--border-soft);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  margin-top: 4px;
}
.vf-roi-app input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.range-val {
  display: inline-block;
  min-width: 32px;
  text-align: center;
  font-weight: 600;
  color: var(--accent);
  font-size: 0.95rem;
  margin-top: 2px;
}

/* Social scales in ROI summary */
.social-scales-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.scale-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.scale-label {
  flex: 0 0 180px;
  font-size: 0.82rem;
  color: var(--text-main);
}
.scale-bar {
  flex: 1;
  height: 10px;
  background: var(--border-soft);
  border-radius: 5px;
  overflow: hidden;
}
.scale-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 5px;
  transition: width 0.3s;
}
.scale-num {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
  min-width: 36px;
  text-align: right;
}

/* Conservation report styles */
.cons-summary {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}
.cons-stat {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  text-align: center;
}
.cons-stat-num {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
}
.cons-stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.cons-section {
  margin-bottom: 1rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.cons-section.cons-highlight {
  border-color: var(--accent);
  background: rgba(124,106,79,0.04);
}
.cons-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0.5rem;
}
.cons-icon { font-size: 1.1rem; }
.cons-section-title {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-main);
  flex: 1;
}
.cons-count {
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--bg-card);
  padding: 2px 8px;
  border-radius: 10px;
}
.cons-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cons-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
}
.cons-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 3px;
}
.cons-item-name {
  font-size: 0.82rem;
  color: var(--text-main);
}
.cons-strategy {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 3px;
  padding-left: 18px;
  line-height: 1.4;
}
.cons-note {
  font-size: 0.82rem;
  color: var(--text-main);
  line-height: 1.5;
  margin: 0;
}
.cons-benefit-group {
  margin-bottom: 0.75rem;
}
.cons-benefit-title {
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 4px;
}
.cons-benefit-list {
  margin: 0;
  padding-left: 1.2rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.cons-benefit-list li {
  margin-bottom: 3px;
}

/* Conservation metrics bar */
.cons-metrics-bar {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.cons-metric {
  flex: 1;
  min-width: 100px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  text-align: center;
}
.cons-metric-num {
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.2;
}
.cons-metric-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  line-height: 1.3;
}
.cons-map-note {
  font-size: 0.78rem;
  color: var(--accent);
  font-style: italic;
  margin: 0 0 1rem;
  padding: 0.4rem 0.6rem;
  background: rgba(124,106,79,0.06);
  border-radius: 6px;
}
.cons-item-detail {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: 1;
  flex-wrap: wrap;
}
.cons-item-stat {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  background: rgba(124,106,79,0.08);
  padding: 1px 6px;
  border-radius: 4px;
}
.cons-strategy-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}
.cons-strategy-header span:first-child {
  font-weight: 600;
  font-size: 0.78rem;
}
.cons-score {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent);
  background: rgba(124,106,79,0.08);
  padding: 1px 6px;
  border-radius: 4px;
}
.cons-strategy p {
  margin: 0;
}
.cons-score-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}
.cons-score-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-main);
  flex: 0 0 auto;
}
.cons-score-track {
  flex: 1;
  height: 10px;
  background: var(--border-soft);
  border-radius: 5px;
  overflow: hidden;
}
.cons-score-fill {
  height: 100%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--amber) 45%, var(--cream)), var(--warm-gray));
  border-radius: 5px;
  transition: width 0.5s ease;
}
.cons-score-num {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent);
  min-width: 40px;
  text-align: right;
}

/* Conservation tooltip on map */
.cons-tooltip {
  font-size: 12px;
  font-weight: 500;
  background: rgba(60,50,40,0.9) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 4px 8px !important;
}

/* === Private Land Ownership subsections === */
.vf-roi-app .lp-subsection { margin: 0; }
.vf-roi-app .lp-subsection-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.4rem 0.85rem; cursor: pointer;
  font-size: 0.82rem; font-weight: 600; color: #000;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
}
.vf-roi-app .lp-subsection-head:hover { background: rgba(255,255,255,0.06); }
.vf-roi-app .lp-subsection-head .arrow { font-size: 0.55rem; transition: transform 0.2s; }
.vf-roi-app .lp-subsection-head.collapsed .arrow { transform: rotate(-90deg); }
.vf-roi-app .lp-subsection-head:not(.collapsed) + .lp-subsection-body { display: block; }
.vf-roi-app .lp-subsection-head.collapsed + .lp-subsection-body { display: none; }
.vf-roi-app .lp-subsection-body { padding-left: 0.5rem; }


/* === Phase A: Welcome, readiness quiz, goals === */
.vf-roi-app .vf-welcome-card p { font-size: 12.5px; line-height: 1.65; color: var(--text-muted); margin: 0 0 0.8rem; }
.vf-roi-app .vf-welcome-card p:last-child { margin-bottom: 0; }
.vf-roi-app .vf-quiz-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,0.06); }
.vf-roi-app .vf-quiz-q { font-size: 12.5px; line-height: 1.4; }
.vf-roi-app .vf-quiz-opts { display: flex; gap: 12px; white-space: nowrap; font-size: 12px; }
.vf-roi-app .vf-quiz-opts label { cursor: pointer; }
.vf-roi-app .vf-quiz-score-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 10px; font-size: 13px; }
.vf-roi-app .vf-quiz-msg { font-size: 12px; font-style: italic; text-align: right; }
.vf-roi-app .vf-quiz-msg.quiz-good { color: var(--green); }
.vf-roi-app .vf-quiz-msg.quiz-mid { color: color-mix(in srgb, var(--amber) 72%, black); }
.vf-roi-app .vf-quiz-msg.quiz-low { color: var(--red); }
.vf-roi-app .vf-goal-group { margin-bottom: 0.75rem; }
.vf-roi-app .vf-goal-group-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--brown-dark); margin-bottom: 4px; }
.vf-roi-app .vf-goal-item { display: block; font-size: 12px; line-height: 1.5; padding: 2px 0; cursor: pointer; }
.vf-roi-app .vf-goal-item input { margin-right: 6px; }


/* === Phase B: tab subtotals + outlook === */
.vf-roi-app .tab-subtotal { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; margin-bottom: 0.5rem; background: rgba(var(--muted-rgb),0.1); border: 1px solid rgba(var(--muted-rgb),0.25); border-radius: 8px; }
.vf-roi-app .tab-subtotal .ts-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brown-dark); }
.vf-roi-app .tab-subtotal .ts-vals { display: flex; gap: 18px; font-size: 12px; }
.vf-roi-app .tab-subtotal .ts-save strong { color: var(--green); }
.vf-roi-app .breakdown-table .neg-col { color: var(--red); font-weight: 600; }


/* === Phase C: goals summary + stewardship commits === */
.vf-roi-app .roi-goal-group { margin-bottom: 0.65rem; }
.vf-roi-app .roi-goal-tab { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--brown-dark); margin-bottom: 3px; }
.vf-roi-app .roi-goal-list { margin: 0 0 0 1.1rem; padding: 0; font-size: 12px; line-height: 1.55; }
.vf-roi-app .cons-note.cons-commit { background: rgba(46,125,50,0.07); border-left: 3px solid var(--green); padding: 6px 10px; border-radius: 0 6px 6px 0; }


/* === Fence drawing tool === */
.vf-roi-app .fence-vertex { background: var(--brown-dark); border: 2px solid #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
.vf-roi-app .fence-total { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); background: rgba(74,53,32,0.92); color: #fff; font-size: 11.5px; font-weight: 600; padding: 5px 12px; border-radius: 14px; z-index: 900; pointer-events: none; box-shadow: 0 2px 6px rgba(0,0,0,0.3); }
#drawFenceBtn.active { background: var(--brown-dark); color: #fff; }

.vf-roi-app .fence-first-vertex { background: var(--brown-dark); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px var(--brown-dark), 0 1px 4px rgba(0,0,0,0.5); cursor: pointer; }


/* === Draw toolbar UX: labels, instructions, help === */
.vf-roi-app .draw-toolbar--labeled button {
  width: auto;
  min-width: 40px;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px 0 10px;
  border-radius: 18px;
  font-family: var(--vf-font-body, 'Inter'), sans-serif;
}
.vf-roi-app .draw-toolbar--labeled .dt-icon { font-size: 15px; line-height: 1; }
.vf-roi-app .draw-toolbar--labeled .dt-label { font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.vf-roi-app .draw-toolbar--labeled #drawHelpBtn .dt-icon { font-weight: 800; }

.vf-roi-app .draw-instructions {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1001;
  max-width: 78%;
  background: rgba(28, 16, 9, 0.88);
  color: #fff;
  font-size: 12px;
  line-height: 1.45;
  padding: 8px 16px;
  border-radius: 18px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
  pointer-events: none;
  text-align: center;
}
.vf-roi-app .draw-instructions em { color: var(--amber); font-style: normal; font-weight: 700; }

.vf-roi-app .draw-help-popover {
  position: absolute;
  top: 70px;
  right: 60px;
  z-index: 1002;
  width: 340px;
  max-width: calc(100% - 80px);
  max-height: 70%;
  overflow-y: auto;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.3);
  font-family: var(--vf-font-body, 'Inter'), sans-serif;
}
.vf-roi-app .draw-help-popover .dh-title {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; font-weight: 700; color: var(--text);
  padding: 12px 14px 8px; border-bottom: 1px solid var(--border-soft);
}
.vf-roi-app .draw-help-popover .dh-title button {
  border: none; background: none; font-size: 18px; cursor: pointer; color: var(--text-muted); line-height: 1; padding: 0 2px;
}
.vf-roi-app .draw-help-popover .dh-body { padding: 10px 14px 12px; }
.vf-roi-app .draw-help-popover .dh-body p { font-size: 11.5px; line-height: 1.55; color: var(--text-soft); margin: 0 0 8px; }
.vf-roi-app .draw-help-popover .dh-hint { font-style: italic; color: var(--text-muted); }


/* ═══════════ TEST LAYOUT: tabs on top, map as its own tab ═══════════ */
.vf-roi-app.vf-layout-test {
  display: flex;
  flex-direction: column;
}
.vf-roi-app.vf-layout-test > .steps-nav {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 8px 14px 0;
  background: var(--cream);
  border: none;
  border-bottom: 2px solid var(--brown-dark);
  border-radius: 0;
  margin: 0;
}
.vf-roi-app.vf-layout-test .app-body {
  flex: 1 1 auto;
  min-height: 0;
  display: block;
  position: relative;
}

/* Map tab container */
.vf-roi-app.vf-layout-test .vf-map-tab {
  display: none;
  height: 100%;
  position: relative;
  flex-direction: column;
}
.vf-roi-app.vf-layout-test.vf-map-active .vf-map-tab { display: flex; }
.vf-roi-app.vf-layout-test #vf-map {
  height: auto;
  flex: 1 1 auto;
  min-height: 0;
}

/* Calculator becomes full width; hidden while on the map tab */
.vf-roi-app.vf-layout-test .calc-panel {
  width: 100% !important;
  min-width: 0 !important;
  border-left: none;
  height: 100%;
}
.vf-roi-app.vf-layout-test.vf-map-active .calc-panel { display: none; }
.vf-roi-app.vf-layout-test .calc-toggle { display: none !important; }
.vf-roi-app.vf-layout-test .calc-inner {
  /* Full-width scroll container so the scrollbar sits at the window edge;
     children are centered at the same visual width as before. */
  max-width: none;
  width: 100%;
  zoom: 1.5;
}
.vf-roi-app.vf-layout-test .calc-inner > * {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
/* Wider, themed scrollbar */
.vf-roi-app.vf-layout-test .calc-inner::-webkit-scrollbar { width: 13px; }
.vf-roi-app.vf-layout-test .calc-inner::-webkit-scrollbar-track { background: var(--cream); }
.vf-roi-app.vf-layout-test .calc-inner::-webkit-scrollbar-thumb {
  background: rgba(var(--brown-mid-rgb), 0.45);
  border-radius: 7px;
  border: 2px solid var(--cream);
}
.vf-roi-app.vf-layout-test .calc-inner::-webkit-scrollbar-thumb:hover { background: rgba(var(--brown-mid-rgb), 0.65); }
.vf-roi-app.vf-layout-test .calc-inner .steps-nav { display: none; }

/* Top strip on the map tab: address search + acreage */
.vf-roi-app.vf-layout-test .map-top-strip {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--cream);
  border-bottom: 1px solid var(--border-mid);
  z-index: 1100;
}
.vf-roi-app.vf-layout-test .mts-address { flex: 1 1 260px; min-width: 220px; position: relative; }
.vf-roi-app.vf-layout-test .mts-address .address-search { position: relative; margin: 0; }
.vf-roi-app.vf-layout-test .mts-fields { display: flex; gap: 10px; flex-wrap: wrap; }
.vf-roi-app.vf-layout-test .mts-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  background: var(--cream-dark);
  padding: 6px 10px;
  border-radius: 8px;
}
.vf-roi-app.vf-layout-test .mts-field label {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--brown-dark);
  white-space: nowrap;
  margin: 0;
}
.vf-roi-app.vf-layout-test .mts-field input {
  width: 86px; padding: 5px 7px; font-size: 12px;
  border: 1px solid var(--border-mid); border-radius: 6px; background: #fff;
}

/* Land info panel docked at the bottom of the map tab */
.vf-roi-app.vf-layout-test .vf-map-tab .land-info-section {
  flex: 0 0 auto;
  max-height: 45%;
  overflow-y: auto;
}


/* Test layout: top-nav tabs fill their full area in every state */
.vf-roi-app.vf-layout-test > .steps-nav { align-items: stretch; }
.vf-roi-app.vf-layout-test > .steps-nav .step-btn {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  border: none;
  border-radius: 8px 8px 0 0;
  padding: 0.55rem 0.4rem;
  background-clip: border-box;
  box-shadow: none;
  background-image: none;
}
.vf-roi-app.vf-layout-test > .steps-nav .step-btn.done {
  background: var(--cream-dark) !important;
  color: var(--text-mid) !important;
}
.vf-roi-app.vf-layout-test > .steps-nav .step-btn.active {
  background: var(--brown-dark) !important;
  color: var(--amber-light) !important;
}


/* Map tab Next button (test layout): sits in the strip, matches other tabs */
.vf-roi-app.vf-layout-test .mts-fields #mapNextBtn {
  align-self: center;
  margin-right: 4px;
}

.vf-roi-app.vf-layout-test .map-top-strip #mapBackBtn { align-self: center; flex: 0 0 auto; }

.vf-roi-app.vf-layout-test .mts-address {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--cream-dark);
  padding: 6px 10px;
  border-radius: 8px;
}
.vf-roi-app.vf-layout-test .mts-address > div { flex: 1; }
.vf-roi-app.vf-layout-test .mts-address-label {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--brown-dark);
  white-space: nowrap;
  margin: 0;
}


/* Tab subtotal dock: fixed along the bottom of the calc panel */
.vf-roi-app .tab-subtotal-dock {
  flex: 0 0 auto;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 1.25rem;
  border-top: 2px solid var(--brown-dark);
  background: rgba(var(--surface-rgb),0.98);
}
.vf-roi-app .tab-subtotal-dock .ts-label {
  font-family: var(--vf-font-heading, 'Playfair Display'), serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--brown-dark);
}
.vf-roi-app .tab-subtotal-dock .ts-vals { display: flex; gap: 18px; font-size: 12px; }
.vf-roi-app .tab-subtotal-dock .ts-save strong { color: var(--green); }

/* Welcome tab: no step counter */
.vf-roi-app #sec0 .progress-text { display: none; }

/* Welcome tab: Get Started sits at the right edge */
.vf-roi-app #sec0 .nav-row { justify-content: flex-end; }

.vf-roi-app .roi-goal-list .goal-amt { color: var(--green); font-weight: 600; white-space: nowrap; }

/* Test layout: scale the save-results modal to match the enlarged tabs */
.vf-roi-app.vf-layout-test ~ .vf-save-overlay .vf-save-modal,
.vf-layout-test .vf-save-modal,
body:has(.vf-roi-app.vf-layout-test) .vf-save-modal {
  zoom: 1.5;
  /* zoom multiplies rendered size, so the height cap must shrink by the
     same factor or the modal runs past the viewport/footer (85vh/1.5 ≈ 56vh) */
  max-height: 56vh;
  overflow-y: auto;
}

/* Save modal: profile card saved state */
.vf-roi-app .vf-save-option.vf-saved-state {
  cursor: default;
  border-color: var(--green);
  background: rgba(46,125,50,0.06);
}
.vf-roi-app .vf-save-option.vf-saved-state .vf-save-opt-label { color: var(--green); }
.vf-roi-app .vf-save-option.vf-saved-state:hover { transform: none; box-shadow: none; }

/* Test layout: bigger tab labels, no numbers, same bar height */
.vf-roi-app.vf-layout-test > .steps-nav .step-btn { font-size: 14px; line-height: 1.2; }
.vf-roi-app.vf-layout-test > .steps-nav .step-btn .step-num { display: none; }

.vf-roi-app.vf-layout-test .mts-fields { align-items: center; }

/* Test layout: scale the bottom subtotal dock to match the content */
.vf-roi-app.vf-layout-test .tab-subtotal-dock { zoom: 1.25; }

/* Welcome tab heading */
.vf-roi-app .vf-welcome-heading {
  font-family: var(--vf-font-heading, 'Playfair Display'), serif;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--brown-dark);
  text-align: center;
  line-height: 1.35;
  margin: 0.5rem 0 0.25rem;
}

/* Land info toggle: text label instead of arrow */
.vf-roi-app .li-toggle-label {
  margin-left: auto;
  font-family: var(--vf-font-body, 'Inter'), sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brown-dark);
  opacity: 0.75;
}
.vf-roi-app .land-info-header:hover .li-toggle-label { opacity: 1; }

.vf-roi-app .step-btn .ready-check { color: var(--green); font-weight: 800; }
.vf-roi-app .step-btn.active .ready-check { color: #7fd98a; }

/* Vendor card website button */
.vf-roi-app .vendor-site-btn {
  display: block;
  margin-top: 10px;
  align-self: stretch;
  padding: 8px 12px;
  text-align: center;
  background: var(--amber);
  color: var(--amber-text);
  border-radius: var(--radius-sm, 8px);
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s;
}
.vf-roi-app .vendor-site-btn:hover { background: var(--amber-light); color: var(--amber-text); }
.vf-roi-app .vendor-card.ineligible .vendor-site-btn { opacity: 0.5; }

/* Contained mode: wrap the shortcode in a div with class "vf-contained" and
   give that div the height you want — the app fills it exactly. */
.vf-contained, #vf-contained { position: relative; }
.vf-contained .vf-roi-app, #vf-contained .vf-roi-app { height: 100%; }

/* The map pane must never collapse, whatever the container does */
.vf-roi-app.vf-layout-test #vf-map { min-height: 420px; }
.vf-roi-app.vf-layout-test .vf-map-tab { min-height: 0; }

/* Draw help content inside the save-styled modal */
.vf-save-modal .dh-body p { font-size: 12.5px; line-height: 1.6; color: var(--text-soft); margin: 0 0 10px; }
.vf-save-modal .dh-body .dh-hint { font-style: italic; color: var(--text-muted); margin-bottom: 0; }

/* Clear-all confirmation modal actions */
.vf-save-modal .vf-clear-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.vf-save-modal .vf-clear-confirm {
  padding: 0.5rem 1.2rem;
  border: none;
  border-radius: var(--radius-sm, 6px);
  background: var(--red);
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
}
.vf-save-modal .vf-clear-confirm:hover { background: color-mix(in srgb, var(--red) 82%, black); }


/* ═══ Site helper: horizontal footer links row ═══
   Apply id="footer-links" to the container holding the footer buttons. */
#footer-links {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
  gap: 16px;
}
#footer-links > * {
  width: auto !important;
  flex: 0 0 auto;
}
/* Kill hover grow/shift on footer buttons and keep them inside the bar */
#footer-links a,
#footer-links button,
#footer-links .bde-button__button,
#footer-links .ct-link-button {
  transform: none !important;
  transition: none !important;
  animation: none !important;
  height: auto !important;
  max-height: 100% !important;
  padding: 4px 12px !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  font-size: 14px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap;
}
#footer-links a:hover,
#footer-links a:focus,
#footer-links button:hover,
#footer-links button:focus,
#footer-links .bde-button__button:hover,
#footer-links .ct-link-button:hover {
  transform: none !important;
  scale: none !important;
  font-size: 14px !important;
  padding: 4px 12px !important;
}


/* ═══ Testimonials & Partners cards ═══ */
.vf-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 22px;
  font-family: var(--vf-font-body, 'Inter'), sans-serif;
}
.vf-t-card, .vf-p-card {
  background: #fff;
  border: 1px solid rgba(var(--brown-mid-rgb),0.15);
  border-radius: 14px;
  padding: 24px 26px;
  box-shadow: 0 2px 10px rgba(var(--brown-dark-rgb),0.06);
  display: flex;
  flex-direction: column;
}
.vf-t-stars { color: var(--amber); font-size: 16px; letter-spacing: 2px; margin-bottom: 10px; }
.vf-t-quote {
  font-family: var(--vf-font-heading, 'Playfair Display'), Georgia, serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 16px;
  border: none;
  padding: 0;
  flex: 1;
}
.vf-t-person { display: flex; align-items: center; gap: 12px; }
.vf-t-photo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.vf-t-meta { display: flex; flex-direction: column; }
.vf-t-name { font-weight: 700; color: var(--brown-mid); font-size: 14px; }
.vf-t-sub { font-size: 12.5px; color: var(--text-muted); }
.vf-t-since { font-size: 11px; color: var(--text-muted); font-style: italic; margin-top: 2px; }

.vf-p-card { align-items: flex-start; }
.vf-p-logo { max-height: 56px; max-width: 200px; object-fit: contain; margin-bottom: 12px; }
.vf-p-name { font-family: var(--vf-font-heading, 'Playfair Display'), Georgia, serif; font-size: 18px; color: var(--brown-dark); margin-bottom: 4px; }
.vf-p-cat {
  display: inline-block;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--brown-mid); background: var(--cream-dark);
  padding: 3px 10px; border-radius: 10px; margin-bottom: 10px;
}
.vf-p-desc { font-size: 13.5px; line-height: 1.6; color: var(--text-soft); margin: 0 0 14px; flex: 1; }
.vf-p-link {
  display: inline-block;
  padding: 8px 16px;
  background: var(--amber); color: var(--amber-text);
  border-radius: 6px;
  font-size: 12.5px; font-weight: 600;
  text-decoration: none;
}
.vf-p-link:hover { background: var(--amber-light); color: var(--amber-text); }


/* ═══ Rancher profile pages ═══ */
.vf-profile {
  font-family: var(--vf-font-body, 'Inter'), sans-serif;
  color: var(--text);
  /* Full-bleed frame; soft conservation green (swapped with the W&C box) */
  background: var(--green-light);
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding: 26px 28px 56px;
}
.vf-profile-cardhead { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
.vf-profile-cardhead .vf-profile-portrait { margin-bottom: 0; }
.vf-profile-cardhead h1 {
  font-family: var(--vf-font-heading, 'Playfair Display'), Georgia, serif;
  font-size: 27px; color: var(--brown-dark); margin: 0; line-height: 1.2;
}
.vf-profile-stage {
  background: var(--cream-dark);
  background-size: cover;
  background-position: center;
  border-radius: 16px;
  padding: 40px 42px;
  position: relative;
  overflow: hidden;
}
.vf-profile-stage.vf-has-bg::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(28,16,9,0.18);
}
.vf-profile-stage > * { position: relative; }
.vf-profile-card {
  background: var(--cream-dark);
  border: 1px solid rgba(var(--brown-mid-rgb),0.3);
  border-radius: 14px;
  padding: 26px 28px;
  box-shadow: 0 10px 30px rgba(var(--brown-dark-rgb),0.25);
}
.vf-profile-below { margin-top: 34px; }
.vf-profile-below .vf-profile-story { max-width: 860px; }
.vf-profile-portrait {
  width: 112px; height: 112px; border-radius: 50%; object-fit: cover;
  border: 4px solid var(--cream); box-shadow: 0 4px 14px rgba(var(--brown-dark-rgb),0.25);
  background: #fff;
}
.vf-profile-title h1 {
  font-family: var(--vf-font-heading, 'Playfair Display'), Georgia, serif;
  font-size: 34px; color: var(--brown-dark); margin: 0; line-height: 1.15;
}
.vf-profile-loc { color: var(--text-muted); font-size: 14px; margin-top: 4px; }
.vf-profile-quote {
  font-family: var(--vf-font-heading, 'Playfair Display'), Georgia, serif;
  font-size: 24px; line-height: 1.5; color: var(--brown-mid);
  border-left: 4px solid var(--amber);
  margin: 26px 0; padding: 6px 0 6px 22px;
}
.vf-profile-cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 44px; align-items: start; margin-top: 8px; }
@media (max-width: 880px) { .vf-profile-cols { grid-template-columns: 1fr; } }
.vf-profile-card .vf-profile-portrait { margin-bottom: 14px; }
.vf-profile-card .vf-profile-loc { margin-bottom: 10px; }
.vf-profile-card .vf-profile-quote { font-size: 19px; margin: 14px 0 18px; padding-left: 16px; }
.vf-profile-card .vf-profile-stats {
  margin-top: 18px; position: static;
  background: var(--cream); border: 1px solid rgba(var(--brown-mid-rgb),0.2);
}
.vf-profile-story { font-size: 16px; line-height: 1.75; }
.vf-profile-cons {
  background: #FFFFFF; border-radius: 12px; padding: 18px 22px; margin-top: 26px;
}
.vf-profile-cons h3 { font-family: var(--vf-font-heading, 'Playfair Display'), Georgia, serif; color: var(--green-text); margin: 0 0 8px; }
.vf-profile-cons p { color: var(--green-text); margin: 0; }
.vf-profile-video { margin-top: 26px; }
.vf-profile-video iframe { width: 100%; aspect-ratio: 16/9; height: auto; border-radius: 12px; }
.vf-profile-stats {
  background: var(--cream); border: 1px solid rgba(var(--brown-mid-rgb),0.15); border-radius: 12px;
  padding: 18px 20px; position: sticky; top: 20px;
}
.vf-profile-stats h3 {
  font-family: var(--vf-font-heading, 'Playfair Display'), Georgia, serif; color: var(--brown-dark);
  margin: 0 0 12px; font-size: 18px;
}
.vf-profile-stat { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(var(--brown-mid-rgb),0.12); font-size: 13.5px; }
.vf-profile-stat:last-child { border-bottom: none; }
.vf-profile-stat span { color: var(--text-muted); }
.vf-profile-stat strong { color: var(--brown-dark); text-align: right; }
/* Playing-card fan for profile photos */
.vf-card-fan {
  position: relative;
  min-height: 400px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 16px 0 0;
}
.vf-card-fan-item {
  position: absolute;
  width: 240px;
  height: 330px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(var(--brown-dark-rgb),0.28);
  border: 5px solid #fff;
  background: var(--cream-dark);
  transition: transform 0.22s ease, box-shadow 0.22s ease, z-index 0s;
  transform-origin: bottom center;
}
.vf-card-fan-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vf-card-fan-item:hover {
  transform: translateY(-26px) rotate(0deg) scale(1.06) !important;
  box-shadow: 0 22px 44px rgba(var(--brown-dark-rgb),0.4);
  z-index: 99 !important;
}
@media (max-width: 880px) {
  .vf-card-fan { min-height: 380px; }
  .vf-card-fan-item { width: 190px; height: 260px; }
}

/* Rancher grid cards */
.vf-r-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid rgba(var(--brown-mid-rgb),0.15); border-radius: 14px;
  overflow: hidden; text-decoration: none; color: inherit;
  box-shadow: 0 2px 10px rgba(var(--brown-dark-rgb),0.06);
  transition: transform 0.15s, box-shadow 0.15s;
}
.vf-r-card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(var(--brown-dark-rgb),0.14); }
.vf-r-thumb { height: 170px; background: var(--cream-dark) center/cover no-repeat; }
.vf-r-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.vf-r-name { font-family: var(--vf-font-heading, 'Playfair Display'), Georgia, serif; font-size: 19px; color: var(--brown-dark); }
.vf-r-loc { font-size: 12.5px; color: var(--text-muted); }
.vf-r-teaser { font-size: 13.5px; color: var(--text-soft); line-height: 1.55; font-style: italic; }
.vf-r-more { color: color-mix(in srgb, var(--amber) 78%, black); font-weight: 600; font-size: 12.5px; margin-top: 6px; }

/* Quote card link back to profile */
.vf-t-link { font-size: 12px; font-weight: 600; color: color-mix(in srgb, var(--amber) 78%, black); text-decoration: none; margin-top: 3px; }
.vf-t-link:hover { text-decoration: underline; }

/* Rancher profile pages: brown page background framing the stage */
body.single-vf_rancher { background: var(--cream) !important; }

/* Fan: active card + carousel controls */
.vf-card-fan-item.vf-active {
  transform: translateY(-22px) rotate(0deg) scale(1.05) !important;
  box-shadow: 0 20px 42px rgba(var(--brown-dark-rgb),0.38);
}
.vf-fan-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 22px;
}
.vf-fan-arrow {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: none;
  background: var(--brown-mid);
  color: var(--amber-light);
  font-size: 16px;
  cursor: pointer;
  transition: background 0.15s;
}
.vf-fan-arrow:hover { background: var(--brown-dark); }
.vf-fan-dots { display: flex; gap: 8px; align-items: center; }
.vf-fan-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(var(--brown-mid-rgb),0.3);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, transform 0.15s;
}
.vf-fan-dot:hover { background: rgba(var(--brown-mid-rgb),0.55); }
.vf-fan-dot.vf-dot-active { background: var(--amber); transform: scale(1.25); }

/* Lightbox */
.vf-lightbox { padding: 40px 24px; overflow: hidden; }
.vf-lb-modal {
  position: relative;
  background: var(--cream);
  border-radius: 16px;
  padding: 22px 22px 14px;
  max-width: min(1100px, 92vw);
  max-height: calc(100vh - 110px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.vf-lb-stagearea {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  flex: 1;
}
.vf-lightbox .vf-lb-img {
  max-width: 100% !important;
  max-height: calc(100vh - 250px) !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  border-radius: 10px;
}
.vf-lightbox .vf-lb-close {
  position: absolute; top: 10px; right: 12px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--brown-mid);
  border: 2px solid #fff;
  color: var(--amber-light);
  font-size: 20px; line-height: 1; cursor: pointer;
  z-index: 2;
  display: flex; align-items: center; justify-content: center;
}
.vf-lightbox .vf-lb-close:hover { background: var(--brown-dark); }
.vf-lb-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding-top: 12px;
}
.vf-lightbox .vf-lb-arrow {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--brown-mid);
  color: var(--amber-light);
  font-size: 17px;
  cursor: pointer;
}
.vf-lightbox .vf-lb-arrow:hover { background: var(--brown-dark); }
.vf-lightbox .vf-lb-count {
  color: var(--brown-mid);
  font-family: var(--vf-font-body, 'Inter'), sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  min-width: 52px;
  text-align: center;
}

.vf-card-fan-item { cursor: pointer; }

/* Lightbox anchors to the profile area, sticking to the visible top */
.vf-lightbox {
  position: absolute !important;
  inset: 0;
  align-items: flex-start;
}
.vf-lightbox .vf-lb-modal {
  position: sticky;
  top: 48px;
  margin: 40px 0;
}

/* ═══ Rancher circles row ═══ */
.vf-circle-wrap {
  font-family: var(--vf-font-body, 'Inter'), sans-serif;
  /* Full-bleed light brown band */
  background: var(--cream-dark);
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding: 52px 24px 56px;
}
.vf-circle-heading {
  font-family: var(--vf-font-heading, 'Playfair Display'), Georgia, serif;
  font-size: 34px;
  font-weight: 500;
  color: var(--brown-dark);
  text-align: center;
  margin: 0 0 38px;
}
.vf-circle-carousel {
  position: relative;
  width: 100%;
}
.vf-circle-viewport {
  overflow: hidden;
  /* 4 items: 4x260 + 3x28 gap */
  width: 1124px;
  max-width: calc(100% - 250px);
  margin: 0 auto;
}
.vf-circle-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 28px;
  transition: transform 0.6s ease;
  will-change: transform;
}
/* Few enough profiles to fit: hide arrows, center the row */
.vf-circle-carousel.vf-circle-static .vf-circle-arrow, .vf-lgal-arrow { display: none; }
.vf-circle-carousel.vf-circle-static .vf-circle-grid { justify-content: center; transform: none !important; }
.vf-circle-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--amber);
  color: var(--amber-text);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0 0 3px;
  box-shadow: 0 4px 12px rgba(var(--brown-dark-rgb),0.25);
  transition: background 0.15s ease, transform 0.15s ease;
}
.vf-circle-arrow:hover, .vf-lgal-arrow:hover { background: var(--amber-light); transform: translateY(-50%) scale(1.07); }
.vf-circle-prev { left: max(12px, calc(50vw - 698px)); }
.vf-circle-next { right: max(12px, calc(50vw - 698px)); }
.vf-circle-carousel.vf-circle-static .vf-circle-clone { display: none; }
.vf-circle-item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 260px;
  text-decoration: none;
}
.vf-circle-pic {
  width: 225px; height: 225px;
  border-radius: 50%;
  background-color: var(--cream-dark);
  background-size: cover;
  background-position: center;
  border: 4px solid #fff;
  box-shadow: 0 6px 18px rgba(var(--brown-dark-rgb),0.22);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.vf-circle-item:hover .vf-circle-pic {
  transform: scale(1.06);
  box-shadow: 0 12px 28px rgba(var(--brown-dark-rgb),0.32);
}
.vf-circle-initial {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--vf-font-heading, 'Playfair Display'), Georgia, serif;
  font-size: 78px; color: var(--brown-mid);
}
.vf-circle-name {
  font-family: var(--vf-font-heading, 'Playfair Display'), Georgia, serif;
  font-size: 25.5px;
  color: var(--brown-dark);
  text-align: center;
  line-height: 1.3;
}
.vf-circle-item:hover .vf-circle-name { color: var(--amber-text); }
.vf-circle-viewall { text-align: center; margin-top: 34px; }

/* Phones: shrink the circles so three profiles fit in the carousel */
@media (max-width: 700px) {
  .vf-circle-grid { gap: 12px; }
  .vf-circle-item {
    width: calc((100vw - 160px) / 3); /* fallback; JS sizes exactly to the viewport */
    gap: 6px;
  }
  .vf-circle-pic {
    width: 100%;
    max-width: 104px;
    height: auto;
    aspect-ratio: 1;
    border-width: 3px;
  }
  .vf-circle-initial { font-size: 30px; }
  .vf-circle-name { font-size: 13px; line-height: 1.25; }
}

/* ═══ Site helper: hero video fill ═══
   Give the HTML5 Video element the ID "hero-video" in the builder. */
#hero-video {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  vertical-align: bottom;
}

/* ═══ Site helper: homepage hero overlays (SAVE text + buttons) ═══
   Takes the overlay containers out of document flow so the hero's height
   is exactly the video's — kills the white strip below it. */
.oxy-container-44-104 { position: relative !important; }

/* container-2: SAVE + rotating words, centered over the video */
.oxy-container-44-100 {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  margin: 0 !important; padding: 0 !important;
  pointer-events: none;
  z-index: 2;
}
.oxy-php-code-44-103 {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 25%;
  pointer-events: none;
}

/* Hero buttons: give the container the ID "hero-buttons" in the builder */
#hero-buttons {
  position: absolute !important;
  bottom: 18% !important; left: 0 !important;
  width: 100% !important;
  margin: 0 !important; padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: center;
  align-items: center;
  gap: 20px;
  z-index: 3;
}
#hero-buttons > * { width: auto !important; flex: 0 0 auto; }

/* Rancher profiles: content area always fills the viewport so the footer
   sits at the bottom even on short profiles (footer = 50px). */
body.single-vf_rancher .vf-profile {
  min-height: calc(100vh - 40px - var(--wp-admin--admin-bar--height, 0px));
  box-sizing: border-box;
}

/* ═══ Rancher list: full-width rows, quote left / portrait right ═══ */
.vf-ranchers-list {
  display: flex;
  flex-direction: column;
  gap: 26px;
  font-family: var(--vf-font-body, 'Inter'), sans-serif;
}
.vf-r-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  width: 100%;
  background: #FFFFFF;
  border: 1px solid rgba(var(--brown-mid-rgb),0.2);
  border-radius: 16px;
  padding: 30px 38px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 3px 12px rgba(var(--brown-dark-rgb),0.08);
  transition: transform 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
.vf-r-row:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(var(--brown-dark-rgb),0.16); }
.vf-r-rowleft { flex: 1 1 auto; min-width: 0; }
.vf-r-rowleft .vf-r-name {
  font-family: var(--vf-font-heading, 'Playfair Display'), Georgia, serif;
  font-size: 24px;
  color: var(--brown-dark);
}
.vf-r-rowleft .vf-r-loc { font-size: 13px; color: var(--text-muted); margin: 3px 0 12px; }
.vf-r-quote {
  font-family: var(--vf-font-heading, 'Playfair Display'), Georgia, serif;
  font-size: 18px;
  line-height: 1.55;
  color: var(--brown-mid);
  border-left: 4px solid var(--amber);
  margin: 0 0 14px;
  padding: 4px 0 4px 16px;
}
.vf-r-rowright { flex: 0 0 auto; }
.vf-r-portrait {
  display: flex; align-items: center; justify-content: center;
  width: 150px; height: 150px;
  border-radius: 50%;
  background-color: var(--cream);
  background-size: cover;
  background-position: center;
  border: 4px solid #fff;
  box-shadow: 0 6px 18px rgba(var(--brown-dark-rgb),0.22);
  font-family: var(--vf-font-heading, 'Playfair Display'), Georgia, serif;
  font-size: 52px; color: var(--brown-mid);
}
@media (max-width: 640px) {
  .vf-r-row { flex-direction: column-reverse; text-align: center; }
  .vf-r-quote { text-align: left; }
}

/* Testimonials page wrapper: title, side padding, footer pinned to bottom */
.vf-ranchers-page {
  padding: 36px 40px 60px;
  min-height: calc(100vh - 40px - var(--wp-admin--admin-bar--height, 0px));
  box-sizing: border-box;
  /* Full-bleed light brown background (swapped with the row color) */
  background: var(--cream-dark);
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.vf-ranchers-title {
  font-family: var(--vf-font-heading, 'Playfair Display'), Georgia, serif;
  font-size: 36px;
  font-weight: 500;
  color: var(--brown-dark);
  margin: 0 0 28px;
}

/* Hero buttons: amber fill, brown text */
#hero-buttons a,
#hero-buttons button,
#hero-buttons .bde-button__button {
  background: var(--amber) !important;
  background-color: var(--amber) !important;
  color: var(--brown-dark) !important;
  border: none !important;
  border-radius: 6px !important;
}
#hero-buttons a:hover,
#hero-buttons button:hover,
#hero-buttons .bde-button__button:hover {
  background: var(--amber-light) !important;
  background-color: var(--amber-light) !important;
  color: var(--brown-dark) !important;
}

/* Site-wide (frontend): no horizontal scroll; themed vertical scrollbar (matches tool) */
html, body { overflow-x: hidden !important; }
body::-webkit-scrollbar { width: 13px; height: 0; }
body::-webkit-scrollbar-track { background: var(--cream); }
body::-webkit-scrollbar-thumb {
  background: rgba(var(--brown-mid-rgb), 0.45);
  border-radius: 7px;
  border: 2px solid var(--cream);
}
body::-webkit-scrollbar-thumb:hover { background: rgba(var(--brown-mid-rgb), 0.65); }
html::-webkit-scrollbar { width: 13px; }
html::-webkit-scrollbar-track { background: var(--cream); }
html::-webkit-scrollbar-thumb {
  background: rgba(var(--brown-mid-rgb), 0.45);
  border-radius: 7px;
  border: 2px solid var(--cream);
}
html::-webkit-scrollbar-thumb:hover { background: rgba(var(--brown-mid-rgb), 0.65); }
/* Firefox */
html { scrollbar-color: rgba(var(--brown-mid-rgb), 0.45) var(--cream); scrollbar-width: auto; }

/* ═══ Learn More section ([vf_learn_more]) ═══ */
.vf-learn-wrap {
  font-family: var(--vf-font-body, 'Inter'), sans-serif;
  /* Full-bleed light brown band, same as the circles section */
  background: var(--cream-dark);
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding: 36px 24px 40px;
}
.vf-learn-inner { max-width: 1280px; margin: 0 auto; }
.vf-learn-heading {
  font-family: var(--vf-font-heading, 'Playfair Display'), Georgia, serif;
  font-size: 34px;
  font-weight: 500;
  color: var(--brown-dark);
  text-align: center;
  margin: 34px 0 22px;
}
.vf-learn-inner .vf-learn-heading:first-child { margin-top: 0; }
.vf-learn-p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--text);
  margin: 0 0 18px;
}
.vf-learn-figure { margin: 26px 0; text-align: center; }
.vf-learn-figure img {
  max-width: 100%;
  border-radius: 14px;
}
.vf-learn-figure figcaption {
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--text-muted);
}
.vf-learn-video {
  position: relative;
  padding-top: 56.25%;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(var(--brown-dark-rgb),0.22);
}
.vf-learn-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Brown stripe under the hero: paints the sub-pixel gap below the video
   and adds a deliberate divider before the next section */
#hero {
  background: var(--brown-mid) !important;
  border-bottom: 6px solid var(--brown-mid) !important;
  /* Paint over the sub-pixel gap between this section and the next */
  box-shadow: 0 3px 0 var(--brown-mid) !important;
  position: relative;
  z-index: 1;
}

/* ═══ Learn More gallery (same loop behavior as rancher circles) ═══ */
.vf-lgal-carousel { position: relative; }
.vf-lgal-viewport { overflow: hidden; border-radius: 14px; }
.vf-lgal-track {
  display: flex;
  gap: 16px;
  transition: transform 0.6s ease;
  will-change: transform;
}
.vf-lgal-item { flex: 0 0 auto; height: 280px; cursor: pointer; }
.vf-lgal-item img {
  height: 100%;
  width: auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(var(--brown-dark-rgb),0.2);
}
.vf-lgal-carousel.vf-lgal-static .vf-lgal-track { justify-content: center; transform: none !important; }
.vf-lgal-carousel.vf-lgal-static .vf-lgal-clone { display: none; }
@media (max-width: 700px) { .vf-lgal-item { height: 190px; } }
/* Gallery lightbox: same modal as rancher profiles, but appended to <body>
   so it can center on the viewport (fixed positioning works there) */
.vf-glb {
  position: fixed !important;
  inset: 0;
  align-items: center;
}
.vf-glb .vf-lb-modal {
  position: relative;
  top: auto;
  margin: 0;
}

/* ═══ Partner logos ([vf_partner_logos]) ═══ */
.vf-plogo-wrap {
  font-family: var(--vf-font-body, 'Inter'), sans-serif;
  /* Full-bleed light brown band, same as Learn More / circles */
  background: var(--cream-dark);
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding: 56px 24px 64px;
}
.vf-plogo-heading {
  font-family: var(--vf-font-heading, 'Playfair Display'), Georgia, serif;
  font-size: 34px;
  font-weight: 500;
  color: var(--brown-dark);
  text-align: center;
  margin: 0 0 40px;
}
.vf-plogo-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
}
.vf-plogo-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  text-decoration: none;
  transition: transform 0.18s ease;
}
a.vf-plogo-cell:hover { transform: scale(1.05); }
.vf-plogo-img {
  max-width: 100%;
  max-height: 330px;
  object-fit: contain;
  display: block;
}
@media (max-width: 640px) {
  .vf-plogo-grid { grid-template-columns: 1fr; gap: 28px; }
  .vf-plogo-img { max-height: 225px; }
}

/* Learn More button block */
.vf-learn-btnrow { text-align: center; margin: 26px 0; }
.vf-learn-btn {
  display: inline-block;
  padding: 12px 28px;
  background: var(--amber);
  color: var(--amber-text);
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(var(--brown-dark-rgb),0.18);
  transition: background 0.15s ease, transform 0.15s ease;
}
.vf-learn-btn:hover {
  background: var(--amber-light);
  color: var(--amber-text);
  transform: translateY(-1px);
}

/* ═══ Home hero ([vf_hero]) ═══ */
.vf-hero-wrap {
  font-family: var(--vf-font-body, 'Inter'), sans-serif;
  background: var(--cream-dark);
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding: 25px;
}
.vf-hero-box {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  line-height: 0;
}
.vf-hero-video {
  width: 100%;
  height: auto;
  display: block;
  /* Reserve the video's space before it loads so the page doesn't
     collapse and re-expand (the "breaking" flash on reload) */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--video-well);
  /* Never taller than the viewport minus the band's padding,
     so the video plays fully on screen with background visible below */
  max-height: calc(100vh - 50px - var(--wp-admin--admin-bar--height, 0px));
}
.vf-hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 25%;
  pointer-events: none;
  z-index: 2;
}
.vf-hero-rotate {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  font-weight: 800;
  font-size: clamp(2.2rem, 4.7vw, 5rem);
  line-height: 1.2;
}
.vf-hero-rotate .vf-hr-static {
  color: var(--brown-dark);
  /* Outline via shadows, not text-stroke: stroke ignores opacity animation
     in Chrome and leaves ghost outlines of the hidden words */
  text-shadow: -1px -1px 0 var(--cream-dark), 1px -1px 0 var(--cream-dark),
               -1px 1px 0 var(--cream-dark), 1px 1px 0 var(--cream-dark);
  position: relative;
}
.vf-hero-rotate .vf-hr-first { display: inline-block; }
.vf-hero-rotate .vf-hr-last {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
.vf-hero-rotate .vf-hr-spinner {
  display: inline-block;
  height: 1.2em;
  overflow: hidden;
  position: relative;
}
.vf-hero-rotate .vf-hr-track {
  display: flex;
  flex-direction: column;
}
.vf-hero-rotate .vf-hr-track span {
  display: block;
  height: 1.2em;
  line-height: 1.2em;
  color: var(--amber);
  text-shadow: -1px -1px 0 var(--cream-dark), 1px -1px 0 var(--cream-dark),
               -1px 1px 0 var(--cream-dark), 1px 1px 0 var(--cream-dark);
  white-space: nowrap;
}
.vf-hero-buttons {
  position: absolute;
  bottom: 18%;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 20px;
  z-index: 3;
  line-height: 1.4;
}
.vf-hero-btn { pointer-events: auto; }

/* Learn More / Resources: downloadable file block */
.vf-learn-file {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #fff;
  border: 1px solid rgba(var(--brown-mid-rgb),0.18);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(var(--brown-dark-rgb),0.1);
  padding: 18px 22px;
  margin: 45px auto;
  max-width: 760px;
}
.vf-lfile-icon { color: var(--brown-mid); flex: 0 0 auto; display: flex; }
.vf-lfile-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.vf-lfile-name { font-weight: 600; font-size: 17px; color: var(--brown-dark); }
.vf-lfile-desc { font-size: 13.5px; color: var(--text-muted); }
.vf-lfile-btn { flex: 0 0 auto; }
@media (max-width: 560px) {
  .vf-learn-file { flex-wrap: wrap; }
  .vf-lfile-btn { width: 100%; text-align: center; }
}

/* Link list block: full-width button bars */
.vf-learn-links {
  margin: 45px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.vf-learn-linkbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 15px 24px;
  background: var(--amber);
  color: var(--amber-text);
  border-radius: 8px;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(var(--brown-dark-rgb),0.18);
  transition: background 0.15s ease, transform 0.15s ease;
}
.vf-learn-linkbtn:hover {
  background: var(--amber-light);
  color: var(--amber-text);
  transform: translateY(-1px);
}
.vf-llink-arrow { font-size: 14px; }

/* Social media icons block */
.vf-learn-social {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  margin: 45px 0;
}
.vf-social-btn {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--brown-mid);
  color: var(--amber-light);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(var(--brown-dark-rgb),0.2);
  transition: background 0.15s ease, transform 0.15s ease;
}
.vf-social-btn:hover {
  background: var(--amber);
  color: #fff;
  transform: scale(1.08);
}

/* Resources page headline */
.vf-learn-pagetitle {
  font-family: var(--vf-font-heading, 'Playfair Display'), Georgia, serif;
  font-size: 40px;
  font-weight: 500;
  color: var(--brown-dark);
  text-align: center;
  margin: 0 0 34px;
}

/* Resources page: fill the viewport so the footer pins to the bottom */
.vf-resources-wrap {
  min-height: calc(100vh - 40px - var(--wp-admin--admin-bar--height, 0px));
  box-sizing: border-box;
}

/* ═══ Resources accordions ═══ */
.vf-res-acc {
  background: #fff;
  border: 1px solid rgba(var(--brown-mid-rgb),0.18);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(var(--brown-dark-rgb),0.1);
  margin: 0 0 18px;
  overflow: hidden;
}
.vf-res-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 20px 26px;
}
.vf-res-title {
  font-family: var(--vf-font-heading, 'Playfair Display'), Georgia, serif;
  font-size: 24px;
  font-weight: 500;
  color: var(--brown-dark);
}
.vf-res-caret {
  font-size: 26px;
  line-height: 1;
  color: var(--brown-mid);
  transition: transform 0.2s ease;
}
.vf-res-acc.vf-open .vf-res-caret { transform: rotate(90deg); }
.vf-res-body { display: none; padding: 0 26px 24px; }
.vf-res-acc.vf-open .vf-res-body { display: block; }
.vf-res-body .vf-learn-links { margin: 6px 0 0; }
.vf-res-body .vf-learn-file { margin: 14px 0 0; max-width: none; }
.vf-res-vendor {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--cream);
  border: 1px solid rgba(var(--brown-mid-rgb),0.15);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 14px 0 0;
}
.vf-res-vendor .vf-lfile-info { flex: 1; }
@media (max-width: 700px) {
  .vf-res-vendor {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px 16px;
  }
  .vf-res-vendor .vf-lfile-btn {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
}
.vf-res-partner-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 14px;
}
.vf-res-partner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: var(--cream);
  border: 1px solid rgba(var(--brown-mid-rgb),0.15);
  border-radius: 12px;
  padding: 22px 16px;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.vf-res-partner:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(var(--brown-dark-rgb),0.15); }
.vf-res-partner-logo { max-height: 90px; max-width: 100%; object-fit: contain; }
.vf-res-partner-name { font-weight: 600; font-size: 15px; color: var(--brown-dark); text-align: center; }
@media (max-width: 700px) { .vf-res-partner-grid { grid-template-columns: 1fr; } }

/* ═══ Partners page ([vf_partners_page]) ═══ */
.vf-pp-list { display: flex; flex-direction: column; gap: 26px; }
.vf-pp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  background: #fff;
  border: 1px solid rgba(var(--brown-mid-rgb),0.18);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(var(--brown-dark-rgb),0.1);
  padding: 30px 36px;
}
.vf-pp-left { flex: 1; min-width: 0; }
.vf-pp-name {
  font-family: var(--vf-font-heading, 'Playfair Display'), Georgia, serif;
  font-size: 26px;
  font-weight: 500;
  color: var(--brown-dark);
  margin: 0 0 6px;
}
.vf-pp-desc {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  margin: 10px 0 16px;
}
.vf-pp-btn { font-size: 14.5px; padding: 10px 22px; }
.vf-pp-right { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.vf-pp-logo { max-width: 240px; max-height: 160px; object-fit: contain; display: block; }
@media (max-width: 640px) {
  .vf-pp-row { flex-direction: column-reverse; text-align: center; }
  .vf-pp-desc { text-align: left; }
}

/* Legal page: document-style headings */
.vf-legal-wrap .vf-legal-heading {
  font-size: 26px;
  text-align: left;
  margin: 40px 0 16px;
}

/* ═══ Contact page ([vf_contact]) ═══ */
.vf-contact-card {
  background: #fff;
  border: 1px solid rgba(var(--brown-mid-rgb),0.18);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(var(--brown-dark-rgb),0.1);
  padding: 34px 40px;
  max-width: 760px;
  margin: 0 auto;
}
.vf-contact-form { position: relative; display: flex; flex-direction: column; }
.vf-contact-label {
  font-weight: 600;
  font-size: 15px;
  color: var(--brown-dark);
  margin: 18px 0 6px;
}
.vf-contact-form .vf-contact-label:first-of-type { margin-top: 0; }
.vf-contact-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid rgba(var(--brown-mid-rgb),0.35);
  border-radius: 8px;
  font-size: 16px;
  font-family: inherit;
  color: var(--text);
  background: var(--cream);
}
.vf-contact-input:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(var(--amber-rgb),0.25);
}
.vf-contact-check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 0;
  font-size: 15.5px;
  color: var(--brown-dark);
  cursor: pointer;
}
.vf-contact-check input { width: 18px; height: 18px; accent-color: var(--amber); }
.vf-contact-btnrow { margin-top: 26px; text-align: center; }
.vf-contact-btn { border: none; cursor: pointer; font-family: inherit; }
.vf-contact-success {
  background: var(--green-light);
  border: 1px solid var(--green);
  color: var(--green-text);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 22px;
  font-weight: 600;
}

/* ═══ Account page ([vf_account]) — themed UsersWP ═══ */
.vf-account-card {
  background: #fff;
  border: 1px solid rgba(var(--brown-mid-rgb),0.18);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(var(--brown-dark-rgb),0.1);
  padding: 34px 40px;
  max-width: 760px;
  margin: 0 auto;
}
.vf-account-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(var(--brown-mid-rgb),0.15);
}
.vf-account-hello { font-size: 17px; color: var(--brown-dark); }
.vf-account-logout { font-size: 14px; padding: 9px 20px; }
.vf-account-register {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(var(--brown-mid-rgb),0.15);
  color: var(--brown-dark);
  font-size: 15.5px;
}

/* Theme UsersWP form elements inside the card */
.vf-account-card input[type=text],
.vf-account-card input[type=email],
.vf-account-card input[type=password],
.vf-account-card input[type=url],
.vf-account-card input[type=tel],
.vf-account-card input[type=number],
.vf-account-card select,
.vf-account-card textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px !important;
  border: 1px solid rgba(var(--brown-mid-rgb),0.35) !important;
  border-radius: 8px !important;
  font-size: 16px;
  color: var(--text) !important;
  background: var(--cream) !important;
  height: auto !important;
}
.vf-account-card input:focus,
.vf-account-card select:focus,
.vf-account-card textarea:focus {
  outline: none !important;
  border-color: var(--amber) !important;
  box-shadow: 0 0 0 3px rgba(var(--amber-rgb),0.25) !important;
}
.vf-account-card label {
  font-weight: 600;
  font-size: 15px;
  color: var(--brown-dark);
}
.vf-account-card button[type=submit],
.vf-account-card input[type=submit],
.vf-account-card .btn-primary,
.vf-account-card .uwp_button {
  background: var(--amber) !important;
  border: none !important;
  color: var(--amber-text) !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  padding: 12px 28px !important;
  font-size: 16px !important;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(var(--brown-dark-rgb),0.18);
  transition: background 0.15s ease;
}
.vf-account-card button[type=submit]:hover,
.vf-account-card input[type=submit]:hover,
.vf-account-card .btn-primary:hover,
.vf-account-card .uwp_button:hover {
  background: var(--amber-light) !important;
  color: var(--amber-text) !important;
}
.vf-account-card a { color: var(--amber-text); }
.vf-account-card a:hover { color: var(--brown-dark); }

/* Account page: saved results section */
.vf-account-results {
  background: var(--cream);
  border: 1px solid rgba(var(--brown-mid-rgb),0.15);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 26px;
}
.vf-account-subhead {
  font-family: var(--vf-font-heading, 'Playfair Display'), Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--brown-dark);
  margin: 0 0 8px;
}
.vf-account-saveddate { margin: 0 0 14px; color: var(--text-muted); font-size: 14.5px; }
.vf-account-resbtns { display: flex; gap: 14px; flex-wrap: wrap; }
.vf-account-resbtns .vf-learn-btn { font-size: 14.5px; padding: 10px 22px; }
.vf-account-reshint { margin: 14px 0 0; font-size: 13.5px; color: var(--text-muted); }

/* ═══ Site helper: left-side footer button ═══
   Give the button (or its container) the ID "footer-main" in the builder. */
#footer-main,
#footer-main a,
#footer-main button,
#footer-main .bde-button__button,
#footer-main .ct-link-button {
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  padding: 4px 12px !important;
  margin: 0 !important;
  text-decoration: none !important;
  transform: none !important;
  transition: color 0.15s ease !important;
  animation: none !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap;
  box-shadow: none !important;
}
/* Fill and center vertically, stay left */
#footer-main {
  height: 100% !important;
  align-self: flex-start !important;
  margin: auto 0 !important;
  justify-content: flex-start !important;
}
/* Match the right-side footer link size */
#footer-links a,
#footer-links button,
#footer-links .bde-button__button {
  font-size: 15px !important;
}
#footer-main:hover,
#footer-main a:hover,
#footer-main button:hover,
#footer-main .bde-button__button:hover,
#footer-main .ct-link-button:hover {
  color: var(--amber) !important;
  background: transparent !important;
  transform: none !important;
}

/* ═══ Dirt texture on the brown bands (procedural SVG noise) ═══
   Tuning knobs, all inside the data URI below:
   - baseFrequency 0.55  → grain size (higher = finer dust, lower = coarser dirt)
   - numOctaves 3        → texture complexity
   - last matrix row: alpha = 0.45*noise - 0.10 → the -0.10 offset hides faint noise,
     leaving sparser distinct specks. More negative = sparser; raise 0.45 = darker specks.
   White content cards are untouched for readability. */
.vf-learn-wrap,
.vf-circle-wrap,
.vf-plogo-wrap,
.vf-ranchers-page,
.vf-hero-wrap,
.vf-profile {
  background-image: var(--tex-noise);
}

/* Profile info blocks: 2 per row */
.vf-profile-blocks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 26px;
}
.vf-profile-blocks .vf-profile-cons { margin-top: 0; }
@media (max-width: 640px) { .vf-profile-blocks { grid-template-columns: 1fr; } }

/* Card fan + lightbox: video support */
.vf-card-fan-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.vf-fan-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.65);
  pointer-events: none;
}
.vf-lightbox .vf-lb-video {
  max-width: 100%;
  border-radius: 10px;
  background: #000;
}

/* ═══ Footer ([vf_footer]) ═══ */
.vf-footer {
  font-family: var(--vf-font-body, 'Inter'), sans-serif;
  background: var(--brown-dark);
  width: 100vw;
  max-width: 100vw;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  transform: none;
  z-index: 8990;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 24px;
  box-sizing: border-box;
}
.vf-footer-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
.vf-footer-btn {
  display: inline-flex;
  align-items: center;
  padding: 5px 16px;
  background: transparent;
  color: var(--cream-dark);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.vf-footer-btn:hover {
  background: transparent;
  color: var(--amber);
}
@media (max-width: 640px) {
  /* One row on phones: all links visible, text scales to fit */
  .vf-footer {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 5px 6px;
    gap: 2px;
    min-height: 30px;
  }
  /* Flatten the nav wrapper so Home and the other links share the row */
  .vf-footer-nav { display: contents; }
  .vf-footer-btn {
    font-size: clamp(8.5px, 2.5vw, 11px);
    padding: 4px 2px;
    letter-spacing: 0;
    white-space: nowrap;
    flex: 0 1 auto;
    min-width: 0;
    justify-content: center;
  }
}

/* Tool page: textured light brown behind/around the app so it blends
   with the rest of the site (applies to any page containing the tool) */
body:has(.vf-roi-app) {
  background-color: var(--cream-dark) !important;
  background-image: var(--tex-noise);
}

/* Tool tabs: same dirt texture as the rest of the site.
   The map tab is untouched — its viewport is the map itself. */
.vf-roi-app .calc-panel {
  background-image: var(--tex-noise);
}

/* ═══ News & Articles ([vf_news], [vf_news_page]) ═══ */
.vf-news-wrap {
  font-family: var(--vf-font-body, 'Inter'), sans-serif;
  background: var(--cream-dark);
  background-image: var(--tex-noise);
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding: 52px 24px 56px;
}
.vf-news-inner { max-width: 1280px; margin: 0 auto; }
.vf-news-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.vf-news-row {
  display: flex;
  gap: 28px;
  background: #fff;
  border: 1px solid rgba(var(--brown-mid-rgb),0.18);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(var(--brown-dark-rgb),0.1);
  padding: 22px 26px;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.vf-news-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(var(--brown-dark-rgb),0.18);
}
.vf-news-pic {
  flex: 0 0 220px;
  height: 140px;
  border-radius: 10px;
  background-color: var(--cream-dark);
  background-size: cover;
  background-position: center;
}
.vf-news-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vf-news-title {
  font-family: var(--vf-font-heading, 'Playfair Display'), Georgia, serif;
  font-size: 23px;
  font-weight: 500;
  color: var(--brown-dark);
  line-height: 1.25;
}
.vf-news-date {
  font-size: 13px;
  color: var(--text-muted);
  margin: 5px 0 8px;
}
.vf-news-summary {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text);
}
.vf-news-read {
  margin-top: auto;
  padding-top: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--amber-text);
}
.vf-news-row:hover .vf-news-read { color: var(--amber); }
@media (max-width: 640px) {
  .vf-news-row { flex-direction: column; gap: 12px; padding: 16px 18px; }
  .vf-news-pic { flex: 0 0 auto; width: 100%; height: 170px; }
  /* Phones show just the image + title: hide the summary and trimmings */
  .vf-news-summary,
  .vf-news-date,
  .vf-news-read { display: none; }
  .vf-news-title { font-size: 19px; }
}

/* ═══ Rotating quotes ([vf_quotes]) ═══ */
.vf-quotes-wrap {
  font-family: var(--vf-font-body, 'Inter'), sans-serif;
  background: var(--cream-dark);
  background-image: var(--tex-noise);
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding: 56px 24px 40px;
  text-align: center;
}
.vf-quotes-rotator {
  display: grid;
  max-width: 900px;
  margin: 0 auto;
}
.vf-quote-item {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}
.vf-quote-item.vf-quote-active { opacity: 1; pointer-events: auto; }
.vf-quote-text {
  font-family: var(--vf-font-heading, 'Playfair Display'), Georgia, serif;
  font-size: 28px;
  line-height: 1.5;
  color: var(--brown-dark);
  margin: 0 0 14px;
}
.vf-quote-who {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--amber-text);
  margin: 0;
}
.vf-quote-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
}
.vf-quote-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(var(--brown-mid-rgb),0.3);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.vf-quote-dot:hover { background: rgba(var(--brown-mid-rgb),0.55); }
.vf-quote-dot.vf-dot-on { background: var(--amber); transform: scale(1.25); }

/* ═══ Events ([vf_events] + single event pages) ═══ */
.vf-events-wrap {
  font-family: var(--vf-font-body, 'Inter'), sans-serif;
  background: var(--cream-dark);
  background-image: var(--tex-noise);
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding: 52px 24px 56px;
}
.vf-events-inner { max-width: 1280px; margin: 0 auto; }
.vf-events-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px;
}
.vf-event-card {
  width: calc((100% - 52px) / 3);
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(var(--brown-mid-rgb),0.18);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(var(--brown-dark-rgb),0.1);
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.vf-event-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(var(--brown-dark-rgb),0.2);
}
.vf-event-cover {
  height: 300px;
  background-color: var(--cream);
  background-size: cover;
  background-position: top center;
  display: block;
}
.vf-event-nocover {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60px;
}
.vf-event-body { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; }
.vf-event-title {
  font-family: var(--vf-font-heading, 'Playfair Display'), Georgia, serif;
  font-size: 21px;
  font-weight: 500;
  color: var(--brown-dark);
  line-height: 1.3;
}
.vf-event-meta { font-size: 13.5px; color: var(--text-muted); }
.vf-event-past { opacity: 0.65; }
.vf-event-pastlabel {
  font-size: 12px;
  font-weight: 600;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
@media (max-width: 900px) { .vf-event-card { width: calc((100% - 26px) / 2); } }
@media (max-width: 700px) {
  /* Horizontal card on phones: image panel fills half the card */
  .vf-event-card {
    width: 100%;
    flex-direction: row;
    align-items: stretch;
  }
  .vf-event-cover {
    flex: 0 0 50%;
    height: auto;
    min-height: 160px;
    background-position: center;
  }
  .vf-event-nocover { font-size: 36px; }
  .vf-event-body {
    flex: 1;
    justify-content: center;
    padding: 14px 16px;
  }
}

/* Single event page */
.vf-event-pagemeta {
  text-align: center;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--amber-text);
  margin: -18px 0 26px;
}
.vf-event-desc {
  font-size: 17px;
  line-height: 1.75;
  color: var(--text);
  max-width: 860px;
  margin: 0 auto 30px;
}
.vf-event-flier {
  background: #fff;
  border: 1px solid rgba(var(--brown-mid-rgb),0.18);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(var(--brown-dark-rgb),0.12);
  overflow: hidden;
  max-width: 900px;
  margin: 0 auto;
}
.vf-event-flier iframe {
  display: block;
  width: 100%;
  height: 82vh;
  border: 0;
}
.vf-event-actions {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.vf-event-rsvp {
  border: none;
  cursor: not-allowed;
  font-family: inherit;
  opacity: 0.55;
}

/* Event RSVP card */
.vf-rsvp-card {
  background: #fff;
  border: 1px solid rgba(var(--brown-mid-rgb),0.18);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(var(--brown-dark-rgb),0.1);
  padding: 30px 36px;
  max-width: 640px;
  margin: 34px auto 0;
}
.vf-rsvp-head {
  font-family: var(--vf-font-heading, 'Playfair Display'), Georgia, serif;
  font-size: 26px;
  font-weight: 500;
  color: var(--brown-dark);
  text-align: center;
  margin: 0 0 18px;
}
.vf-rsvp-note { text-align: center; color: var(--text-muted); margin: 0; }
.vf-rsvp-guests { max-width: 140px; }

.vf-contact-error {
  background: color-mix(in srgb, var(--red) 10%, white);
  border: 1px solid var(--red);
  color: var(--red);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 22px;
  font-weight: 600;
}
.vf-rsvp-remaining { font-weight: 600; color: var(--green) !important; margin-bottom: 16px !important; }

/* Image fliers: full display, no scrollbars */
.vf-event-flier-img img {
  display: block;
  width: 100%;
  height: auto;
}

/* Event pages: larger title (40px -> 60px) */
.vf-event-page .vf-learn-pagetitle { font-size: 60px; }

/* ═══ Scenario chooser + account table ═══ */
.vf-scn-modal { max-width: 520px; }
.vf-scn-modal h3 {
  font-family: var(--vf-font-heading, 'Playfair Display'), Georgia, serif;
  font-size: 24px;
  color: var(--brown-dark);
  margin: 0 0 6px;
}
.vf-scn-sub { color: var(--text-muted); font-size: 14px; margin: 0 0 16px; }
.vf-scn-continue {
  width: 100%;
  padding: 12px;
  background: var(--amber);
  color: var(--amber-text);
  border: none;
  border-radius: 8px;
  font-size: 15.5px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 14px;
}
.vf-scn-continue:hover { background: var(--amber-light); }
.vf-scn-list { display: flex; flex-direction: column; gap: 8px; max-height: 300px; overflow-y: auto; }
.vf-scn-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--cream);
  border: 1px solid rgba(var(--brown-mid-rgb),0.18);
  border-radius: 8px;
  padding: 10px 14px;
}
.vf-scn-info { display: flex; flex-direction: column; min-width: 0; }
.vf-scn-name { font-weight: 600; color: var(--brown-dark); font-size: 14.5px; }
.vf-scn-meta { font-size: 12.5px; color: var(--text-muted); }
.vf-scn-load {
  flex: 0 0 auto;
  padding: 7px 16px;
  background: var(--brown-mid);
  color: var(--amber-light);
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.vf-scn-load:hover { background: var(--brown-dark); }
.vf-scn-fresh {
  margin-top: 14px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 13.5px;
  text-decoration: underline;
  cursor: pointer;
}
.vf-scn-fresh:hover { color: var(--brown-dark); }

/* Account: scenarios table */
.vf-scn-tablewrap { overflow-x: auto; }
.vf-scn-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.vf-scn-table th {
  text-align: left;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: 8px 12px;
  border-bottom: 2px solid rgba(var(--brown-mid-rgb),0.2);
}
.vf-scn-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(var(--brown-mid-rgb),0.12);
  color: var(--text);
  white-space: nowrap;
}
.vf-scn-cell-name { font-weight: 600; color: var(--brown-dark); }
.vf-scn-table a { color: var(--amber-text); font-weight: 600; text-decoration: none; }
.vf-scn-table a:hover { color: var(--brown-dark); }
.vf-scn-table a.vf-scn-del { color: var(--red); }

/* Conservation report: lead sentence, overlap note, score breakdown */
.vf-roi-app .cons-lead {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 12px;
}
.vf-roi-app .cons-overlap-note {
  font-size: 11.5px;
  color: var(--text-muted);
  font-style: italic;
  margin: 8px 0 0;
}
.vf-roi-app .cons-score-detail {
  margin-top: 12px;
  background: var(--cream);
  border: 1px solid rgba(var(--brown-mid-rgb),0.18);
  border-radius: 8px;
  padding: 10px 14px;
}
.vf-roi-app .cons-score-detail summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 12.5px;
  color: var(--amber-text);
}
.vf-roi-app .cons-score-detail summary:hover { color: var(--brown-dark); }
.vf-roi-app .cons-score-explain {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-soft);
  margin: 10px 0;
}
.vf-roi-app .cons-score-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-bottom: 10px;
}
.vf-roi-app .cons-score-table th {
  text-align: left;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: 4px 8px;
  border-bottom: 1px solid rgba(var(--brown-mid-rgb),0.25);
}
.vf-roi-app .cons-score-table td {
  padding: 5px 8px;
  border-bottom: 1px solid rgba(var(--brown-mid-rgb),0.1);
}
.vf-roi-app .cons-score-math {
  font-size: 11.5px;
  color: var(--text-softer);
  margin: 0;
  line-height: 1.6;
}

/* Save-results modal: wider, options in a roomy 2x2 grid */
#vfSaveOverlay .vf-save-modal { max-width: 760px; }
#vfSaveOverlay .vf-save-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
#vfSaveOverlay .vf-save-option { padding: 18px 16px; }
@media (max-width: 640px) {
  #vfSaveOverlay .vf-save-options { grid-template-columns: 1fr; }
}

/* Scenario name modal */
.vf-scnname-modal { max-width: 460px; }
.vf-scnname-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid rgba(var(--brown-mid-rgb),0.35);
  border-radius: 8px;
  font-size: 16px;
  font-family: inherit;
  color: var(--text);
  background: var(--cream);
  margin-bottom: 16px;
}
.vf-scnname-input:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(var(--amber-rgb),0.25);
}
.vf-scnname-btns { display: flex; justify-content: flex-end; gap: 12px; }
.vf-scnname-cancel {
  padding: 10px 20px;
  background: none;
  border: 1px solid rgba(var(--brown-mid-rgb),0.4);
  border-radius: 6px;
  color: var(--brown-mid);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.vf-scnname-cancel:hover { background: var(--cream); }
.vf-scnname-save {
  padding: 10px 24px;
  background: var(--amber);
  border: none;
  border-radius: 6px;
  color: var(--amber-text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.vf-scnname-save:hover { background: var(--amber-light); }
.vf-scnname-save:disabled { opacity: 0.6; cursor: default; }
.vf-scnname-err {
  background: color-mix(in srgb, var(--red) 10%, white);
  border: 1px solid var(--red);
  color: var(--red);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 13.5px;
  font-weight: 600;
}

/* Scenario chip: always-available door to the chooser */
.vf-roi-app .calc-panel { position: relative; }
.vf-scn-chip {
  position: absolute;
  top: 8px;
  right: 18px;
  z-index: 60;
  padding: 5px 13px;
  background: var(--brown-mid);
  color: var(--amber-light);
  border: none;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(var(--brown-dark-rgb),0.25);
  transition: background 0.15s ease;
}
.vf-scn-chip:hover { background: var(--brown-dark); }
.vf-scn-empty {
  font-size: 13.5px;
  color: var(--text-muted);
  margin: 4px 0;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════
   POLISHED PILOT — depth, type, fence ornament, topo layer, reveals
   ═══════════════════════════════════════════════════════════════ */

/* ── Layered, brown-tinted shadows on content cards ── */
.vf-news-row, .vf-r-row, .vf-pp-row, .vf-res-acc, .vf-contact-card,
.vf-rsvp-card, .vf-account-card, .vf-learn-file, .vf-event-card,
.vf-event-flier, .vf-res-vendor, .vf-res-partner,
.vf-profile-cons, .vf-profile-stats, .vf-profile-card {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.75),
    0 1px 2px rgba(var(--brown-dark-rgb),0.12),
    0 10px 28px rgba(var(--brown-dark-rgb),0.13) !important;
}
.vf-news-row:hover, .vf-r-row:hover, .vf-event-card:hover, a.vf-res-partner:hover {
  box-shadow:
    inset 0 2px 0 var(--amber),
    0 2px 4px rgba(var(--brown-dark-rgb),0.14),
    0 18px 40px rgba(var(--brown-dark-rgb),0.2) !important;
}

/* ── Fluid display type + fence-line ornament on band headings ── */
.vf-circle-heading, .vf-plogo-heading, .vf-learn-heading, .vf-learn-pagetitle,
.vf-ranchers-title {
  font-size: clamp(30px, 3.4vw, 44px);
  text-wrap: balance;
  letter-spacing: -0.01em;
}
.vf-ranchers-title::before {
  content: '';
  display: block;
  width: 150px;
  height: 16px;
  margin: 0 0 14px;
}
.vf-circle-heading::before, .vf-plogo-heading::before, .vf-learn-pagetitle::before,
.vf-ranchers-title::before {
  content: '';
  display: block;
  width: 150px;
  height: 16px;
  margin: 0 auto 14px;
  background: var(--orn-fence) no-repeat center / contain;
}

/* ── Faint topographic contours layered over the dirt texture ── */
.vf-circle-wrap, .vf-news-wrap, .vf-quotes-wrap, .vf-plogo-wrap,
.vf-learn-wrap, .vf-hero-wrap, .vf-events-wrap,
.vf-ranchers-page, .vf-profile {
  background-image:
    repeating-radial-gradient(circle at 18% 28%, transparent 0 54px, rgba(var(--brown-mid-rgb),0.045) 54px 55.5px),
    repeating-radial-gradient(circle at 82% 78%, transparent 0 68px, rgba(var(--brown-mid-rgb),0.038) 68px 69.5px),
    var(--tex-noise);
}

/* ── Buttons: pressable depth ── */
.vf-learn-btn, .vf-p-link, .vf-scn-continue, .vf-contact-btn {
  background-image: linear-gradient(180deg, var(--grad-hi) 0%, var(--amber) 55%, var(--grad-lo) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    0 4px 12px rgba(var(--brown-dark-rgb),0.22);
}
.vf-learn-btn:hover, .vf-p-link:hover, .vf-scn-continue:hover, .vf-contact-btn:hover {
  background-image: linear-gradient(180deg, var(--grad-hover-hi) 0%, var(--amber-light) 60%, var(--grad-hover-lo) 100%);
}
.vf-learn-btn:active, .vf-p-link:active, .vf-contact-btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 2px 6px rgba(var(--brown-dark-rgb),0.2);
}

/* ── Card hover micro-interactions ── */
.vf-news-pic { transition: transform 0.35s ease; }
.vf-news-row:hover .vf-news-pic { transform: scale(1.035); }
.vf-event-cover { transition: transform 0.35s ease; }
.vf-event-card:hover .vf-event-cover { transform: scale(1.03); }

/* ── Scroll reveals (JS adds .vf-reveal, then .vf-in when visible) ── */
.vf-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.vf-reveal.vf-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .vf-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .vf-news-pic, .vf-event-cover { transition: none; }
}

/* ═══ Card refresh: warm textured white, amber spine, photo-bleed edges ═══ */

/* Warm paper instead of clinical white, with a whisper of grain */
.vf-news-row, .vf-r-row, .vf-pp-row, .vf-res-acc, .vf-contact-card,
.vf-rsvp-card, .vf-account-card, .vf-learn-file, .vf-event-card,
.vf-profile-cons {
  background-color: var(--paper) !important;
  background-image: var(--tex-grain);
}

/* ── Photo-bleed: ranchers list — portrait fills the right end ── */
.vf-r-row {
  padding: 0;
  overflow: hidden;
  gap: 0;
}
.vf-r-rowleft { padding: 28px 34px; flex: 1; min-width: 0; }
.vf-r-rowright { flex: 0 0 280px; align-self: stretch; }
.vf-r-portrait {
  width: 100%;
  height: 100%;
  min-height: 230px;
  border-radius: 0;
  border: none;
  box-shadow: none;
}
@media (max-width: 640px) {
  .vf-r-rowright { flex: 0 0 auto; width: 100%; }
  .vf-r-portrait { min-height: 190px; }
  .vf-r-rowleft { padding: 22px 24px; }
}

/* ── Photo-bleed: news rows — cover fills the left end ── */
.vf-news-row {
  padding: 0;
  overflow: hidden;
  gap: 0;
}
.vf-news-pic {
  flex: 0 0 260px;
  height: auto;
  align-self: stretch;
  min-height: 175px;
  border-radius: 0;
}
.vf-news-body { padding: 22px 28px; }
@media (max-width: 640px) {
  .vf-news-pic { flex: 0 0 auto; width: 100%; height: 175px; }
  .vf-news-body { padding: 18px 22px; }
}

/* ── Partners page: logo sits in a flush cream panel on the right ── */
.vf-pp-row {
  padding: 0;
  overflow: hidden;
  gap: 0;
}
.vf-pp-left { padding: 32px 38px; }
.vf-pp-right {
  align-self: stretch;
  flex: 0 0 300px;
  background: var(--cream-dark);
  border-left: 1px solid rgba(var(--brown-mid-rgb),0.12);
  padding: 26px;
}
@media (max-width: 640px) {
  .vf-pp-right { flex: 0 0 auto; width: 100%; box-sizing: border-box; }
  .vf-pp-left { padding: 24px 26px; }
}

/* ═══ Tool restyle: same visual language as the site ═══ */

/* Input/content cards: warm paper, grain, layered shadow, amber spine */
.vf-roi-app .card {
  background-color: var(--paper);
  background-image: var(--tex-grain);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.75),
    0 1px 2px rgba(var(--brown-dark-rgb),0.08),
    0 6px 16px rgba(var(--brown-dark-rgb),0.08);
}
.vf-roi-app .metric-card {
  background-color: var(--paper);
  background-image: var(--tex-grain);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.75),
    0 1px 2px rgba(var(--brown-dark-rgb),0.08),
    0 6px 16px rgba(var(--brown-dark-rgb),0.1);
}

/* Tab section headings: fluid-ish bump + balance (no fence ornament —
   too repetitive at this density) */
.vf-roi-app .section-title {
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Primary buttons: same pressable gradient as the site */
.vf-roi-app .btn-primary {
  background-image: linear-gradient(180deg, var(--grad-hi) 0%, var(--amber) 55%, var(--grad-lo) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    0 3px 10px rgba(var(--brown-dark-rgb),0.2);
}
.vf-roi-app .btn-primary:hover {
  background-image: linear-gradient(180deg, var(--grad-hover-hi) 0%, var(--amber-light) 60%, var(--grad-hover-lo) 100%);
}
.vf-roi-app .btn-primary:active {
  transform: translateY(1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 1px 4px rgba(var(--brown-dark-rgb),0.18);
}

/* Tab strip (test layout): active tab gets the gradient + lift */
.vf-roi-app.vf-layout-test .step-btn {
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.vf-roi-app.vf-layout-test .step-btn.active {
  background-image: linear-gradient(180deg, var(--grad-hi) 0%, var(--amber) 60%, var(--grad-lo) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 -2px 8px rgba(var(--brown-dark-rgb),0.15);
}

/* Subtotal dock + per-tab subtotal strip: frosted warm glass */
.vf-roi-app .tab-subtotal-dock {
  background: rgba(var(--paper-rgb),0.82) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(var(--brown-mid-rgb),0.25) !important;
  box-shadow: 0 -6px 18px rgba(var(--brown-dark-rgb),0.12);
}
.vf-roi-app .tab-subtotal {
  background: rgba(var(--paper-rgb),0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Save modal + scenario chooser: warm paper too */
.vf-save-modal {
  background-color: var(--paper) !important;
  background-image: var(--tex-grain);
}

/* ═══ Per-tile shadow variants (no rotation) + debossed inputs ═══
   Four shadow directions cycled by position — subtle light-source
   variety without tilting any cards. */

.vf-roi-app .card:nth-child(4n+1), .vf-roi-app .metric-card:nth-child(4n+1) {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.75),
    3px 4px 3px rgba(var(--brown-dark-rgb),0.07),
    6px 12px 20px rgba(var(--brown-dark-rgb),0.09);
}
.vf-roi-app .card:nth-child(4n+2), .vf-roi-app .metric-card:nth-child(4n+2) {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.75),
    -3px 4px 3px rgba(var(--brown-dark-rgb),0.07),
    -6px 12px 20px rgba(var(--brown-dark-rgb),0.09);
}
.vf-roi-app .card:nth-child(4n+3), .vf-roi-app .metric-card:nth-child(4n+3) {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.75),
    0 5px 6px rgba(var(--brown-dark-rgb),0.06),
    0 14px 26px rgba(var(--brown-dark-rgb),0.1);
}
.vf-roi-app .card:nth-child(4n), .vf-roi-app .metric-card:nth-child(4n) {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.75),
    2px 3px 2px rgba(var(--brown-dark-rgb),0.09),
    4px 8px 14px rgba(var(--brown-dark-rgb),0.08);
}

/* Debossed inputs: pressed into the paper */
.vf-roi-app .field input[type=number],
.vf-roi-app .field input[type=text],
.vf-roi-app .field select,
.vf-roi-app .field textarea {
  box-shadow: inset 0 1px 3px rgba(var(--brown-dark-rgb),0.13), inset 0 0 0 1px rgba(var(--brown-mid-rgb),0.06);
  background-color: var(--input-bg);
}
.vf-roi-app .field input:focus,
.vf-roi-app .field select:focus,
.vf-roi-app .field textarea:focus {
  box-shadow: inset 0 1px 3px rgba(var(--brown-dark-rgb),0.1), 0 0 0 3px rgba(var(--amber-rgb),0.28);
}

/* ═══ Photography package + selection + page transitions ═══ */

/* Warm duotone unification: every listing photo leans toward the palette */
.vf-r-portrait, .vf-news-pic, .vf-event-cover, .vf-circle-pic,
.vf-profile-portrait, .vf-lgal-item img {
  filter: var(--photo-tint);
}

/* Brand text selection */
::selection {
  background: rgba(var(--amber-rgb), 0.45);
  color: var(--brown-dark);
}

/* Soft cross-fade between page navigations (modern browsers; ignored elsewhere) */
@view-transition {
  navigation: auto;
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ═══ Hero rotating words: blur-morph stack + gradient fill + underline ═══ */
.vf-hero-rotate .vf-hr-spinner {
  overflow: visible; /* morph doesn't slide; let the underline breathe */
}
.vf-hero-rotate .vf-hr-track {
  display: grid; /* words stack in place; spinner width = longest word */
}
.vf-hero-rotate .vf-hr-track span {
  grid-area: 1 / 1;
  position: relative;
  opacity: 0;
  /* Amber gradient inside the letters */
  background-image: linear-gradient(180deg, var(--amber-light) 0%, var(--amber) 62%, var(--grad-lo) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: none; /* outline shadows would show through the transparent fill */
}
@media (prefers-reduced-motion: reduce) {
  .vf-hero-rotate .vf-hr-track span { animation: none !important; opacity: 0; }
  .vf-hero-rotate .vf-hr-track span:first-child { opacity: 1; }
  .vf-hero-rotate .vf-hr-first, .vf-hero-rotate .vf-hr-last { animation: none !important; }
}

/* Hero phrase: static dark scrim behind the text for legibility over video */
.vf-hero-rotate { position: relative; }
.vf-hero-rotate::before {
  content: '';
  position: absolute;
  inset: -0.45em -0.7em;
  background: radial-gradient(ellipse at center, rgba(var(--brown-dark-rgb),0.42) 0%, rgba(var(--brown-dark-rgb),0.18) 55%, transparent 75%);
  filter: blur(6px);
  z-index: -1;
  pointer-events: none;
}

/* Tool: hide the emoji icons next to tab section titles and in the
   conservation report section headers */
.vf-roi-app .section-header .icon,
.vf-roi-app .cons-icon {
  display: none;
}

/* Welcome nav: anchors and buttons sharing .btn-primary render identically */
.vf-roi-app a.btn-primary,
.vf-roi-app button.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  box-sizing: border-box;
  font-size: 14px;
}

/* ═══ Partnership Journal timeline ═══ */
.vf-journal { margin-top: 44px; }
.vf-journal-title {
  font-family: var(--vf-font-heading, 'Playfair Display'), Georgia, serif;
  font-size: 30px;
  font-weight: 500;
  color: var(--brown-dark);
  margin: 0 0 4px;
}
.vf-journal-summary {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0 0 26px;
}
.vf-journal-line {
  position: relative;
  padding-left: 34px;
}
.vf-journal-line::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: rgba(var(--brown-mid-rgb),0.35);
  border-radius: 2px;
}
.vf-journal-entry { position: relative; margin-bottom: 36px; }
.vf-journal-entry:last-child { margin-bottom: 0; }
/* Fence-post marker on the line */
.vf-journal-entry::before {
  content: '';
  position: absolute;
  left: -27px;
  top: 3px;
  width: 9px;
  height: 22px;
  background: var(--brown-mid);
  border-radius: 3px;
  box-shadow: 0 0 0 3px var(--cream-dark);
}
.vf-journal-date {
  font-family: var(--vf-font-heading, 'Playfair Display'), Georgia, serif;
  font-size: 21px;
  font-weight: 500;
  color: var(--brown-dark);
  margin: 0 0 8px;
}
.vf-journal-text p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text);
  margin: 0 0 12px;
}
.vf-journal-pics {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.vf-journal-picwrap {
  width: 176px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vf-journal-cap {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-muted);
}
.vf-journal-pic {
  width: 100%;
  height: 124px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  background-color: var(--cream-dark);
  border: 2px solid #fff;
  box-shadow: 0 4px 12px rgba(var(--brown-dark-rgb),0.18);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  filter: var(--photo-tint);
}
.vf-journal-pic:hover {
  transform: scale(1.04);
  box-shadow: 0 10px 22px rgba(var(--brown-dark-rgb),0.28);
}
@media (max-width: 560px) {
  .vf-journal-picwrap { width: calc(50% - 5px); }
  .vf-journal-pic { height: 110px; }
}

/* ═══ Rancher profile v2: editorial feature layout ═══ */
.vf-profile.vf-profile-v2 {
  background-color: var(--cream-dark) !important;
  padding: 26px 28px 64px;
}

/* Hero */
.vf-p2-hero {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(var(--brown-dark-rgb),0.25);
}
.vf-p2-heroimg {
  height: clamp(360px, 58vh, 620px);
  background-size: cover;
  background-position: center;
}
.vf-p2-heroscrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(var(--brown-dark-rgb),0.74) 100%);
}
.vf-p2-heroinfo {
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 28px;
  display: flex;
  align-items: center;
  gap: 22px;
}
.vf-p2-hero:not(.vf-p2-has-img) {
  background: var(--brown-dark);
}
.vf-p2-hero:not(.vf-p2-has-img) .vf-p2-heroinfo {
  position: static;
  padding: 44px 34px;
}
.vf-p2-portrait {
  flex: 0 0 auto;
  width: 98px;
  height: 98px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 3px solid var(--paper);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.vf-p2-name {
  font-family: var(--vf-font-heading, 'Playfair Display'), Georgia, serif;
  font-size: clamp(38px, 5.5vw, 68px);
  font-weight: 500;
  line-height: 1.05;
  color: var(--paper);
  margin: 0;
  text-shadow: 0 2px 16px rgba(0,0,0,0.5);
  text-wrap: balance;
}
.vf-p2-loc {
  color: var(--amber-light);
  font-size: 16.5px;
  font-weight: 600;
  margin: 6px 0 0;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}

/* Stat bar */
.vf-p2-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  max-width: 1100px;
  margin: 20px auto 0;
}
.vf-p2-stat {
  flex: 1 1 150px;
  text-align: center;
  background-color: var(--paper);
  border: 1px solid rgba(var(--brown-mid-rgb),0.18);
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.75),
    0 1px 2px rgba(var(--brown-dark-rgb),0.1),
    0 8px 20px rgba(var(--brown-dark-rgb),0.1);
}
.vf-p2-statnum {
  display: block;
  font-family: var(--vf-font-heading, 'Playfair Display'), Georgia, serif;
  font-size: 24px;
  color: var(--brown-dark);
}
.vf-p2-statlabel {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* Quote moment */
.vf-p2-quote {
  max-width: 900px;
  margin: 50px auto;
  text-align: center;
  font-family: var(--vf-font-heading, 'Playfair Display'), Georgia, serif;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.45;
  color: var(--brown-dark);
  text-wrap: balance;
}
.vf-p2-quote::before {
  content: '';
  display: block;
  width: 56px;
  height: 4px;
  border-radius: 999px;
  background: var(--amber);
  margin: 0 auto 20px;
}

/* Story with drop cap */
.vf-p2-story {
  max-width: 780px;
  margin: 0 auto 46px;
  font-size: 17px;
  line-height: 1.8;
  color: var(--text);
}
.vf-p2-story > p:first-of-type::first-letter {
  font-family: var(--vf-font-heading, 'Playfair Display'), Georgia, serif;
  font-size: 3.3em;
  float: left;
  line-height: 0.82;
  padding: 4px 10px 0 0;
  color: var(--brown-mid);
}

/* Info blocks as titled prose sections */
.vf-p2-blocks {
  max-width: 1100px;
  margin: 54px auto 48px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px 48px;
}
.vf-p2-block { padding-top: 6px; }
/* A lone block spans the full width instead of hugging the left column */
.vf-p2-block:only-child { grid-column: 1 / -1; }
.vf-p2-block h3 {
  font-family: var(--vf-font-heading, 'Playfair Display'), Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--brown-dark);
  margin: 0 0 8px;
}
.vf-p2-block p { font-size: 15.5px; line-height: 1.7; color: var(--text); margin: 0; }
@media (max-width: 700px) { .vf-p2-blocks { grid-template-columns: 1fr; } }

/* Journal + gallery containment in v2 */
.vf-profile-v2 .vf-journal { max-width: 1100px; margin: 0 auto 48px; }
.vf-p2-video { max-width: 900px; margin: 0 auto 48px; }
.vf-p2-video iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: 14px; }

/* Masonry gallery */
.vf-p2-gallery { max-width: 1200px; margin: 0 auto; }
.vf-p2-masonry { columns: 3 280px; column-gap: 14px; }
.vf-mas-item {
  break-inside: avoid;
  margin-bottom: 14px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 4px 14px rgba(var(--brown-dark-rgb),0.16);
}
.vf-mas-item img, .vf-mas-item video {
  width: 100%;
  display: block;
  filter: var(--photo-tint);
  transition: transform 0.3s ease;
}
.vf-mas-item:hover img, .vf-mas-item:hover video { transform: scale(1.03); }

/* Journal video thumbnails */
.vf-journal-pic.vf-journal-vid { position: relative; overflow: hidden; }
.vf-journal-pic.vf-journal-vid video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════
   MOBILE PASS — site stragglers + the tool at <= 820px
   ═══════════════════════════════════════════════════════ */

/* ── Site stragglers ── */
@media (max-width: 700px) {
  /* Circles carousel: reclaim width, arrows hug the edges at half size */
  .vf-circle-viewport { max-width: calc(100% - 60px); }
  .vf-circle-arrow {
    width: 23px;
    height: 23px;
    font-size: 13px;
    border-width: 1px;
    padding: 0 0 2px;
  }
  .vf-circle-prev { left: 3px; }
  .vf-circle-next { right: 3px; }
  /* Hero buttons wrap instead of overflowing */
  .vf-hero-buttons { flex-wrap: wrap; padding: 0 12px; }
  /* Quote band scales down */
  .vf-quote-text { font-size: clamp(19px, 5.4vw, 28px); }
  /* Profile hero: portrait and name stack */
  .vf-p2-heroinfo { flex-direction: column; align-items: flex-start; gap: 12px; left: 20px; right: 20px; bottom: 18px; }
  .vf-p2-portrait { width: 72px; height: 72px; }
  /* Cards breathe less */
  .vf-contact-card, .vf-rsvp-card, .vf-account-card { padding: 22px 20px; }
  .vf-pp-left { padding: 22px 22px; }
}

/* ── The tool ── */
@media (max-width: 820px) {
  /* Zoomed test layout returns to 1:1 */
  .vf-roi-app.vf-layout-test .calc-inner { zoom: 1; }
  .vf-roi-app.vf-layout-test .calc-inner > * { max-width: 100%; }
  .vf-roi-app.vf-layout-test .tab-subtotal-dock { zoom: 1; }
  .vf-roi-app.vf-layout-test ~ .vf-save-overlay .vf-save-modal,
  .vf-layout-test .vf-save-modal,
  body:has(.vf-roi-app.vf-layout-test) .vf-save-modal {
    zoom: 1;
    max-height: 88vh;
  }

  /* Tab strip: one swipeable row — about three pills visible at a time,
     swipe sideways for the rest; the active pill auto-centers */
  .vf-roi-app .steps-nav,
  .vf-roi-app.vf-layout-test > .steps-nav {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
    touch-action: pan-x;
  }
  .vf-roi-app .steps-nav::-webkit-scrollbar { display: none; }
  .vf-roi-app .steps-nav .step-btn,
  .vf-roi-app.vf-layout-test > .steps-nav .step-btn {
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto !important;
    white-space: nowrap;
    padding: 10px 16px;
    min-height: 44px;
  }

  /* Inputs: one column, 16px text so iOS doesn't zoom the page */
  .vf-roi-app .field-grid { grid-template-columns: 1fr !important; }

  /* ROI metric tiles: two per row so they fit the screen */
  .vf-roi-app .roi-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Vendor cards: full-width stacked for readability */
  .vf-roi-app .vendor-grid { grid-template-columns: 1fr !important; }

  /* Welcome tab buttons: stack full-width instead of wrapping unevenly */
  .vf-roi-app #sec0 .nav-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .vf-roi-app #sec0 .nav-row > span {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 10px !important;
    margin-right: 0 !important;
  }
  .vf-roi-app #sec0 .nav-row .btn-primary {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .vf-roi-app #sec0 .nav-row .progress-text { text-align: center; }
  .vf-roi-app input, .vf-roi-app select, .vf-roi-app textarea { font-size: 16px !important; }
  .vf-roi-app .btn-primary, .vf-roi-app .btn-secondary { min-height: 44px; }

  /* Map tab: layer panel hides behind a Layers button */
  .vf-roi-app .layer-panel {
    width: min(290px, 80vw);
    transition: transform 0.25s ease;
  }
  .vf-roi-app .layer-panel:not(.vf-lp-open) { transform: translateX(calc(-100% - 16px)); }
  .vf-roi-app .vf-layers-toggle { display: flex !important; }

  /* Draw toolbar: compact icon buttons */
  .vf-roi-app .draw-toolbar .dt-label { display: none; }
  .vf-roi-app .draw-toolbar button { padding: 8px; min-width: 40px; min-height: 40px; justify-content: center; }

  /* Map strip stacks; docks compress */
  .vf-roi-app.vf-layout-test .map-top-strip { gap: 8px; }
  .vf-roi-app.vf-layout-test .mts-field { flex: 1 1 140px; }
  .vf-roi-app .tab-subtotal-dock { flex-wrap: wrap; gap: 6px; padding: 8px 12px; }
  .vf-roi-app .tab-subtotal-dock .ts-vals { flex-wrap: wrap; gap: 10px; }

  /* Welcome nav row wraps cleanly */
  .vf-roi-app .nav-row { flex-wrap: wrap; gap: 10px; }
}

/* Layers toggle button (hidden on desktop) */
.vf-roi-app .vf-layers-toggle {
  display: none;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1001;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  background: rgba(var(--surface-rgb),0.96);
  color: var(--brown-dark);
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 2px 10px rgba(var(--brown-dark-rgb),0.25);
  cursor: pointer;
}
@media (max-width: 820px) {
  /* When the panel is open it sits above the toggle */
  .vf-roi-app .layer-panel { z-index: 1002; }
}

/* ═══ Collaborators page: 4-per-row card grid ═══ */
.vf-cp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.vf-cp-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  background-color: var(--paper);
  border: 1px solid rgba(var(--brown-mid-rgb),0.18);
  border-radius: 14px;
  padding: 26px 20px 22px;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.75),
    0 1px 2px rgba(var(--brown-dark-rgb),0.1),
    0 8px 20px rgba(var(--brown-dark-rgb),0.1);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.vf-cp-card:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 2px 0 var(--amber),
    0 2px 4px rgba(var(--brown-dark-rgb),0.14),
    0 16px 34px rgba(var(--brown-dark-rgb),0.2);
}
.vf-cp-logo {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vf-cp-logo img { max-height: 90px; max-width: 100%; object-fit: contain; }
.vf-cp-name {
  font-family: var(--vf-font-heading, 'Playfair Display'), Georgia, serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--brown-dark);
  line-height: 1.3;
  text-wrap: balance;
}
.vf-cp-desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
}
.vf-cp-visit {
  margin-top: auto;
  padding-top: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--amber-text);
}
a.vf-cp-card:hover .vf-cp-visit { color: var(--amber); }
@media (max-width: 760px)  { .vf-cp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .vf-cp-grid { grid-template-columns: 1fr; } }

/* Profile: project collaborators chips */
.vf-p2-collabs { max-width: 1100px; margin: 0 auto 48px; }
.vf-p2-collabs-title {
  font-family: var(--vf-font-heading, 'Playfair Display'), Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--brown-dark);
  margin: 0 0 14px;
}
.vf-p2-collablist { display: flex; flex-wrap: wrap; gap: 10px; }
.vf-collab-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--paper);
  border: 1px solid rgba(var(--brown-mid-rgb),0.22);
  border-radius: 999px;
  padding: 7px 16px 7px 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--amber-text);
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(var(--brown-dark-rgb),0.1);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.vf-collab-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(var(--brown-dark-rgb),0.18);
  color: var(--brown-dark);
}
.vf-collab-chip img {
  height: 24px;
  width: 24px;
  object-fit: contain;
  border-radius: 4px;
}

/* Gallery captions: under masonry items and in the lightbox */
.vf-mas-caption {
  display: block;
  padding: 9px 13px 11px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
  background-color: var(--paper);
}
.vf-lightbox .vf-lb-caption {
  text-align: center;
  font-size: 14px;
  line-height: 1.55;
  color: var(--brown-mid);
  padding: 10px 16px 0;
  max-width: 760px;
  margin: 0 auto;
}

/* Profile stat bar: website tile */
a.vf-p2-stat-link {
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.vf-p2-stat-link .vf-p2-statnum {
  font-size: 19px;
  color: var(--amber-text);
  word-break: break-all;
}
a.vf-p2-stat-link:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 2px 0 var(--amber),
    0 2px 4px rgba(var(--brown-dark-rgb),0.14),
    0 14px 30px rgba(var(--brown-dark-rgb),0.2);
}

/* ═══ Tool access gate ═══ */
.vf-gate-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 40px); /* viewport minus the footer bar */
  min-height: calc(100svh - 40px); /* small-viewport units: stable when the mobile URL bar/keyboard moves */
  padding: 40px 20px;
  font-family: var(--vf-font-body, 'Inter'), sans-serif;
  /* Full-bleed band so the card centers on the screen, not on whatever
     container the shortcode landed in */
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
  background-color: var(--cream-dark);
}
.vf-gate-card {
  background-color: var(--paper);
  border: 1px solid rgba(var(--brown-mid-rgb),0.18);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.75),
    0 1px 2px rgba(var(--brown-dark-rgb),0.12),
    0 12px 30px rgba(var(--brown-dark-rgb),0.15);
  padding: 40px 44px;
  max-width: 460px;
  width: 100%;
  text-align: center;
}
.vf-gate-title {
  font-family: var(--vf-font-heading, 'Playfair Display'), Georgia, serif;
  font-size: 30px;
  font-weight: 500;
  color: var(--brown-dark);
  margin: 0 0 10px;
}
.vf-gate-title::before {
  content: '';
  display: block;
  width: 150px;
  height: 16px;
  margin: 0 auto 14px;
  background: var(--orn-fence) no-repeat center / contain;
}
.vf-gate-msg {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text);
  margin: 0 0 20px;
}
.vf-gate-form { display: flex; flex-direction: column; gap: 14px; }
.vf-gate-form .vf-contact-input { text-align: center; letter-spacing: 0.06em; font-weight: 600; }

/* ═══ Site header ([vf_header]) ═══ */
.vf-siteheader {
  font-family: var(--vf-font-body, 'Inter'), sans-serif;
  background: var(--brown-dark);
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 24px;
  box-sizing: border-box;
  box-shadow: 0 2px 12px rgba(var(--brown-dark-rgb),0.35);
}
.vf-siteheader-sticky {
  position: fixed;
  top: var(--wp-admin--admin-bar--height, 0px);
  left: 0;
  right: 0;
  transform: none;
  margin: 0;
  z-index: 9000;
}
/* On phones the WP toolbar (admins only) is absolute and scrolls away —
   don't leave the header stranded below where it was */
@media (max-width: 599px) {
  .vf-siteheader-sticky { top: 0; }
}
.vf-sh-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.vf-sh-btn {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  background: transparent;
  color: var(--cream-dark);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease;
}
@media (hover: hover) {
  .vf-sh-btn:hover {
    color: var(--amber);
    background: rgba(var(--amber-rgb),0.08);
  }
}
.vf-sh-home {
  font-family: var(--vf-font-heading, 'Playfair Display'), Georgia, serif;
  font-size: 15.5px;
  letter-spacing: 0.02em;
}
@media (max-width: 700px) {
  .vf-siteheader { flex-direction: row; flex-wrap: nowrap; padding: 2px 10px; gap: 8px; min-height: 32px; overflow-x: auto; scrollbar-width: none; }
  .vf-siteheader::-webkit-scrollbar { display: none; }
  .vf-siteheader .vf-footer-btn, .vf-siteheader a { font-size: 13px; padding: 4px 8px; }
  .vf-sh-nav { justify-content: center; flex-wrap: nowrap; gap: 6px; }
}

/* ═══ Map how-to guide modal ═══ */
.vf-guide-modal { max-width: 560px; }
.vf-guide-modal .dh-body p { font-size: 13.5px; line-height: 1.65; color: var(--text); margin: 0 0 12px; }
.vf-guide-modal .dh-hint { font-style: italic; color: var(--text-muted); }
.vf-guide-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.vf-guide-dots { display: flex; gap: 8px; }
.vf-guide-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(var(--brown-mid-rgb), 0.3);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.vf-guide-dot:hover { background: rgba(var(--brown-mid-rgb), 0.55); }
.vf-guide-dot.vf-gdot-on { background: var(--amber); transform: scale(1.25); }

/* Circles: logo display mode (contain, on paper) */
.vf-circle-pic.vf-circle-logo {
  background-size: 78%;
  background-repeat: no-repeat;
  background-color: var(--paper);
  filter: none;
}

/* B1: events cards may grow when the row isn't full, matching band width
   (desktop/tablet only — phones use the full-width horizontal card) */
.vf-event-card { flex-grow: 1; }
@media (min-width: 701px) {
  .vf-event-card { max-width: calc((100% - 26px) / 2); }
}

/* ── Goal chips & nudges ── */
.vf-goal-flag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px 2px;
  border-radius: 999px;
  background: var(--amber);
  color: var(--amber-text);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  vertical-align: middle;
  line-height: 1.4;
}
label .vf-goal-flag { margin-left: 6px; }
.vf-goal-nudge {
  margin: 0.45rem 0 0.6rem;
  padding: 6px 10px;
  border: 1px dashed var(--amber);
  border-radius: 8px;
  background: color-mix(in srgb, var(--amber) 8%, var(--paper));
  color: var(--amber-text);
  font-size: 11.5px;
}
.vf-goal-note {
  margin: 2px 0 8px 26px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ── Predation loss rows ── */
.vf-pred-row {
  display: grid;
  grid-template-columns: 1.1fr 1.1fr 0.6fr 0.9fr 1fr auto;
  gap: 8px;
  align-items: end;
  margin-bottom: 8px;
}
.vf-pred-row .row-comp {
  font-size: 11px;
  color: var(--text-muted);
  padding-bottom: 9px;
  white-space: nowrap;
}
.vf-pred-remove {
  background: none;
  border: none;
  color: var(--red);
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  padding: 6px 6px 9px;
}
.vf-pred-remove:hover { opacity: 0.7; }
@media (max-width: 820px) {
  .vf-pred-row { grid-template-columns: 1fr 1fr; }
  .vf-pred-row .row-comp { white-space: normal; }
}

/* ── Branded hero panel ── */
.vf-hero-brandbox {
  background: var(--paper);
  border-radius: 12px;
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 4vw, 2.5rem);
  box-shadow: 0 2px 14px rgba(var(--brown-dark-rgb), 0.08);
}
.vf-hb-logo {
  display: block;
  margin: 0 auto clamp(1.2rem, 3vw, 2rem);
  max-width: min(540px, 82%);
  height: auto;
}
.vf-hb-tagline {
  margin: 0 0 clamp(0.9rem, 2.2vw, 1.4rem);
  font-family: var(--vf-font-body, 'Inter'), sans-serif;
  font-weight: 600;
  font-size: clamp(1.28rem, 2.55vw, 1.8rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
}
.vf-hb-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vw, 18px);
  margin: 0 0 clamp(1.2rem, 3vw, 1.8rem);
  font-family: var(--vf-font-body, 'Inter'), sans-serif;
  font-weight: 700;
  font-size: clamp(1.05rem, 1.9vw, 1.43rem);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--green);
}
.vf-hb-rule {
  flex: 0 0 clamp(36px, 8vw, 90px);
  height: 2px;
  background: color-mix(in srgb, var(--text-muted) 60%, transparent);
}
.vf-hero-branded .vf-hero-buttons {
  position: static;
  margin-top: 0.4rem;
  flex-wrap: wrap;
}

/* ── Branded hero over video ── */
.vf-hero-brandmode { line-height: 1.4; }
.vf-hero-brand-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(1rem, 4vw, 2.5rem);
  padding-top: clamp(1.5rem, 9vh, 5.5rem);
  text-align: center;
}
.vf-hero-brandmode .vf-hb-logo {
  margin-bottom: 0;
  max-width: min(440px, 62%);
  filter: drop-shadow(0 2px 12px rgba(20, 12, 5, 0.6));
}
.vf-hero-brandmode .vf-hb-tagline {
  color: var(--cream);
  text-shadow: 0 1px 3px rgba(20, 12, 5, 0.55), 0 2px 12px rgba(20, 12, 5, 0.5);
}
.vf-hero-brandmode .vf-hb-bottom {
  color: var(--amber-light);
  text-shadow: 0 1px 3px rgba(20, 12, 5, 0.55), 0 2px 12px rgba(20, 12, 5, 0.5);
}
.vf-hero-brandmode .vf-hb-rule {
  background: color-mix(in srgb, var(--cream) 75%, transparent);
  box-shadow: 0 2px 8px rgba(20, 12, 5, 0.45);
}
.vf-hero-brandmode .vf-hero-buttons {
  position: static;
  margin-top: auto;
  margin-bottom: clamp(0.8rem, 7vh, 4rem);
  flex-wrap: wrap;
}
@media (max-width: 700px) {
  .vf-hero-brandmode .vf-hb-logo { max-width: 74%; }
}

/* ── Hero wordmark: one line on desktop, stacked on mobile ── */
.vf-hb-wordmark {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 0.35em;
  line-height: 1.05;
  font-family: var(--vf-font-heading, 'Playfair Display'), serif;
  text-align: center;
  margin-bottom: clamp(1rem, 2.8vw, 1.8rem);
}
.vf-hb-wm-word {
  font-size: clamp(3.9rem, 10.5vw, 7.8rem);
  font-weight: 700;
  color: var(--brown-dark);
}
.vf-hb-wm-amp {
  font-size: clamp(2.1rem, 5.1vw, 3.9rem);
  font-style: italic;
  color: var(--amber-text);
}
@media (max-width: 700px) {
  .vf-hb-wordmark {
    flex-direction: column;
    align-items: center;
    gap: 0;
    line-height: 1.02;
    margin-bottom: 0.8rem;
  }
  .vf-hb-wm-word { font-size: clamp(2.1rem, 10.5vw, 2.9rem); }
  .vf-hb-wm-amp { font-size: clamp(1rem, 5vw, 1.4rem); margin: 0.08em 0; }
  .vf-hb-tagline { font-size: clamp(0.9rem, 3.8vw, 1.1rem); letter-spacing: 0.09em; margin-bottom: 0.8rem; }
  .vf-hb-bottom { font-size: clamp(0.72rem, 3.2vw, 0.95rem); letter-spacing: 0.11em; margin-bottom: 1rem; }
  .vf-hb-rule { flex: 0 0 26px; }

  /* The 16:9 video is too short for the lockup on a phone: give the hero
     real height and let the footage cover it, with just a slim border of
     page background around it */
  .vf-hero-wrap { padding: 8px; }
  .vf-hero-brandmode {
    min-height: min(86svh, 700px);
  }
  .vf-hero-brandmode .vf-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: auto;
  }
  .vf-hero-brand-overlay {
    padding-top: clamp(1.2rem, 6vh, 2.5rem);
  }
  .vf-hero-brandmode .vf-hero-buttons {
    margin-bottom: clamp(0.8rem, 4vh, 1.6rem);
    gap: 10px;
  }
}
.vf-hero-brandmode .vf-hb-wm-word {
  color: var(--cream);
  text-shadow: 0 1px 3px rgba(20, 12, 5, 0.55), 0 2px 12px rgba(20, 12, 5, 0.5);
}
.vf-hero-brandmode .vf-hb-wm-amp {
  color: var(--amber-light);
  text-shadow: 0 1px 3px rgba(20, 12, 5, 0.55), 0 2px 12px rgba(20, 12, 5, 0.5);
}

/* Gate page: the cream band fills the whole viewport above the footer and
   the page never scrolls, so builder wrappers below it can't show through.
   The scroll lock is desktop-only: on phones the keyboard shrinks the
   viewport and a locked page would trap the Unlock button off-screen. */
body:has(.vf-gate-wrap) { background-color: var(--cream-dark) !important; }
@media (min-width: 701px) {
  body:has(.vf-gate-wrap) { overflow: hidden; }
}

/* ── Profile social links tile ── */
.vf-p2-socialtile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.vf-p2-socialicons { display: flex; gap: 10px; }
.vf-p2-socialbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--brown-mid);
  border: 1px solid rgba(var(--brown-mid-rgb), 0.22);
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.vf-p2-socialbtn svg { width: 18px; height: 18px; }
.vf-p2-socialbtn:hover {
  background: var(--amber);
  color: var(--amber-text);
  transform: translateY(-2px);
}

/* Collaborator chips on event pages */
.vf-event-collabs { margin-top: 26px; }

/* ── Map tab: collapsible land-values strip on mobile ── */
.vf-mts-toggle { display: none; }
@media (max-width: 820px) {
  .vf-mts-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 8px 10px 6px;
    padding: 9px 16px;
    background: var(--paper);
    border: 1px solid rgba(var(--brown-mid-rgb), 0.28);
    border-radius: 10px;
    font-family: var(--vf-font-body, 'Inter'), sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--brown-dark);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(var(--brown-dark-rgb), 0.1);
  }
  .vf-mts-caret { display: inline-block; transition: transform 0.15s ease; }
  .vf-mts-toggle.open .vf-mts-caret { transform: rotate(180deg); }
  .vf-roi-app .map-top-strip { display: none !important; }
  .vf-roi-app .map-top-strip.vf-mts-open { display: block !important; }
}

/* Layers panel must scroll by touch even though Leaflet sets touch-action:none */
.vf-roi-app .layer-panel,
.vf-roi-app .layer-panel * {
  touch-action: pan-y !important;
}
.vf-roi-app .layer-panel {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Welcome-tab Resources link: centered like its button siblings */
.vf-roi-app #welcomeResourcesBtn.vf-btn-visible {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Ready-tab label + checkmark are one flex child, so the column-direction
   mobile pills can never stack the check under the word */
.vf-roi-app .step-btn .step-label { display: inline; white-space: nowrap; }

/* Header account button pinned right */
.vf-siteheader .vf-sh-account { margin-left: auto; }
.vf-siteheader .vf-sh-nav ~ .vf-sh-account { margin-left: 0; }

/* Vendor card values stay right-aligned even when they wrap (prorated lines) */
.vf-roi-app .vendor-line strong {
  text-align: right;
  margin-left: auto;
  flex-shrink: 0;
  max-width: 60%;
}

/* Account page scenarios table: fits the phone screen — drop the secondary
   columns (Head, 5-yr net, Breakeven) and keep Name / Saved / Savings / actions */
@media (max-width: 700px) {
  .vf-scn-table th:nth-child(3), .vf-scn-table td:nth-child(3),
  .vf-scn-table th:nth-child(5), .vf-scn-table td:nth-child(5),
  .vf-scn-table th:nth-child(6), .vf-scn-table td:nth-child(6) { display: none; }
  .vf-scn-table { font-size: 12.5px; width: 100%; table-layout: fixed; }
  .vf-scn-table th, .vf-scn-table td {
    padding: 8px 4px;
    white-space: normal;
  }
  /* Cells may break long values, but headers wrap at whole words only */
  .vf-scn-table td { word-break: break-word; overflow-wrap: anywhere; }
  .vf-scn-table th {
    word-break: normal;
    overflow-wrap: normal;
    font-size: 10px;
    letter-spacing: 0.02em;
  }
  .vf-scn-table th:nth-child(1), .vf-scn-table td:nth-child(1) { width: 24%; }
  .vf-scn-table th:nth-child(2), .vf-scn-table td:nth-child(2) { width: 24%; }
  .vf-scn-table th:nth-child(4), .vf-scn-table td:nth-child(4) { width: 28%; }
  .vf-scn-table th:nth-child(7), .vf-scn-table td:nth-child(7) { width: 24%; }
  .vf-scn-cell-actions { text-align: right; }
  .vf-scn-cell-actions a { display: inline-block; padding: 2px 0; }
  .vf-scn-tablewrap { overflow-x: visible; }
}

/* ── Learn More: image + text two-column block ── */
.vf-learn-imgtext {
  display: grid;
  grid-template-columns: minmax(180px, 2fr) 3fr;
  gap: clamp(18px, 4vw, 44px);
  align-items: center;
  margin: 26px 0;
}
.vf-lit-media { margin: 0; text-align: center; }
.vf-lit-media img { max-width: 100%; height: auto; border-radius: 14px; }
.vf-lit-media figcaption {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.vf-lit-body .vf-learn-p:last-child { margin-bottom: 0; }
@media (max-width: 700px) {
  .vf-learn-imgtext { grid-template-columns: 1fr; gap: 14px; }
  .vf-lit-media img { max-width: min(320px, 80%); }
}

/* Tool height is set by JS (host fit / adjustHeight), which measures the
   real space between whatever sits above the app and the fixed footer.
   No CSS viewport floor here: a hardcoded min-height overflows under the
   footer whenever something (e.g. the WP admin bar) sits above the app. */