/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: var(--btn-h); padding: 14px 26px;
  background: var(--c-yellow); color: var(--c-black);
  font-family: var(--font-body); font-weight: 700; font-size: var(--fs-btn);
  letter-spacing: var(--ls-btn); line-height: 18px; text-transform: uppercase; white-space: nowrap; max-width: 100%;
  border: 0; border-radius: 0;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover { background: var(--c-white); }              /* [ASSUMED] Figma has no hover state */
.on-light .btn:hover { background: var(--c-black); color: var(--c-yellow); }
.btn--block { width: 100%; }
.btn--sm { font-size: var(--fs-btn-sm); letter-spacing: var(--ls-btn-sm); }
.btn--nav { min-height: 44.7px; padding: 13.35px 18px; font-weight: 400; font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); }

/* ---------- Filter pill ---------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  height: 33.3px; padding-inline: 1.5rem;
  border: 1px solid var(--c-grey-500); border-radius: var(--radius-pill);
  font-weight: 700; font-size: var(--fs-pill); letter-spacing: var(--ls-pill); text-transform: uppercase; line-height: 1;
  color: var(--c-grey-500);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.pill:hover { color: var(--c-white); border-color: var(--c-white); }
.pill.is-active, .pill[aria-pressed="true"] { background: var(--c-yellow); border-color: var(--c-yellow); color: var(--c-black); }

/* ---------- Dark card ---------- */
.card-dark { background: var(--c-card); color: var(--c-white); }

/* ---------- Chamfered (45deg cut) shape with 1px yellow line ---------- */
.chamfer {
  --chamfer-border: 1px;
  --chamfer-fill: var(--c-card);
  --chamfer-line: var(--c-yellow);
  --c: var(--chamfer);
  --ci: calc(var(--chamfer) - 0.586 * var(--chamfer-border));
  position: relative; isolation: isolate; background: var(--chamfer-line);
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}
.chamfer::before {
  content: ""; position: absolute; inset: var(--chamfer-border); z-index: -1; background: var(--chamfer-fill);
  clip-path: polygon(var(--ci) 0, calc(100% - var(--ci)) 0, 100% var(--ci), 100% calc(100% - var(--ci)), calc(100% - var(--ci)) 100%, var(--ci) 100%, 0 calc(100% - var(--ci)), 0 var(--ci));
}
.chamfer--sm { --chamfer: var(--chamfer-sm); }
/* Partner nodes: Figma fill is white @6% over the map. Use supplied Subtract.svg as background in Phase 5 for exact parity. */
.chamfer--node { --chamfer-fill: #0f0f0f; }

/* Number badge (01/02/03): 46 x 47 chamfered, black fill, yellow numeral */
.badge { display: inline-grid; place-items: center; width: 46px; height: 47px; }

/* ---------- Form ---------- */
.form { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field__label { font-family: var(--font-form); font-size: var(--fs-label); line-height: 15px; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-label); }
.field__control {
  width: 100%; min-height: var(--field-h); padding: 0 14px;
  background: transparent; color: var(--c-white);
  font-family: var(--font-body); font-size: 1rem;     /* 16px avoids iOS zoom */
  border: 1px solid var(--c-line-dark); border-radius: 0;
  transition: border-color var(--dur) var(--ease);
}
textarea.field__control { min-height: var(--field-h-area); padding-block: 12px; resize: vertical; }
.field__control:hover { border-color: rgba(255, 255, 255, 0.5); }
.field__control:focus { outline: none; border-color: var(--c-yellow); }          /* [ASSUMED] */
.field__control[aria-invalid="true"] { border-color: var(--c-orange); }
.field__error { font-size: .8125rem; color: var(--c-orange); }

/* ---------- Video modal ---------- */
.video-modal { width: min(1100px, 92vw); padding: 0; border: 0; background: #000; color: #fff; overflow: visible; }
.video-modal::backdrop { background: rgba(0, 0, 0, 0.85); }
.video-modal video { width: 100%; height: auto; max-height: 82vh; background: #000; }
.video-modal__close { position: absolute; top: -2.75rem; right: 0; width: 2.5rem; height: 2.5rem; font-size: 2rem; line-height: 1; color: var(--c-white); }
.video-modal__close:hover { color: var(--c-yellow); }

/* ---------- Scroll reveal (class added by JS only) ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow) var(--ease) var(--reveal-delay, 0ms), transform var(--dur-slow) var(--ease) var(--reveal-delay, 0ms); }
.reveal.is-in { opacity: 1; transform: none; }
.partner.reveal, .xcard.reveal { transform: none; }
@media print { .reveal { opacity: 1; transform: none; } }