/* DARK BLUE 2026-10-25: dark tokens moved from near-black to blue (see README). */
/* ree-source site styles. Based on the live site.css (Sep 2026) with fixes marked FIX. */
:root {
  --void: #122a48;
  --void-soft: #173253;
  --card: #1b3a60;
  --hairline: #33527a;
  --ink: #fbf6ec;
  --body: #d6deea;
  --mute: #a9b8cc;
  --pulse: #BF5700;
  --pulse-soft: #f2a766;
  --spark: #75fba6;
  --pill: rgba(255, 255, 255, 0.08);
  --max: 1120px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

html, body { background: var(--void); color: var(--ink); }

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}

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

h1, h2, h3 {
  font-family: "IBM Plex Sans", Inter, sans-serif;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.wrap { width: min(var(--max), calc(100% - 48px)); margin: 0 auto; }
.narrow { width: min(720px, calc(100% - 48px)); margin: 0 auto; }

.mono {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--mute);
}

.pulse { color: var(--pulse); }
.spark { color: var(--spark); }

/* Nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(18, 42, 72, 0.86);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--hairline);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
  gap: 16px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.orb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3c5a82, #0e2440 70%);
  border: 1px solid #3d3e42;
  position: relative;
  flex-shrink: 0;
}

/* Logo bot eyes: bright glowing orange, with glances, blinks, and a soft glow pulse.
   Three separate animations on three separate properties (translate, scale,
   box-shadow) so they combine. Pure CSS, no JS. Static when the visitor
   prefers reduced motion (see the media query at the end of this file). */
.orb::before,
.orb::after {
  content: "";
  position: absolute;
  top: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff4e8 0 22%, #e08a3c 48%, #BF5700 100%);
  box-shadow: 0 0 5px 1px rgba(191,87,0, 0.95), 0 0 12px 2px rgba(191,87,0, 0.5);
  translate: 0 0;
  scale: 1 1;
  animation:
    orb-glance 7s ease-in-out infinite,
    orb-blink 5.3s linear infinite,
    orb-glow 2.4s ease-in-out infinite alternate;
}

.orb::before { left: 6.5px; }
.orb::after { right: 6.5px; }

/* Hover the logo and the eyes get excited: faster glances and blinks. */
.logo:hover .orb::before,
.logo:hover .orb::after {
  animation-duration: 2.4s, 1.7s, 0.9s;
}

@keyframes orb-glance {
  0%, 22%   { translate: 0 0; }
  27%, 40%  { translate: -2px 0; }
  45%, 57%  { translate: 0 0; }
  62%, 73%  { translate: 2px -0.5px; }
  78%, 85%  { translate: 0 0; }
  88%       { translate: 0 -1.2px; }
  92%, 100% { translate: 0 0; }
}

@keyframes orb-blink {
  0%, 43%   { scale: 1 1; }
  45%       { scale: 1.15 0.1; }
  47%, 87%  { scale: 1 1; }
  88.5%     { scale: 1.15 0.1; }
  90%       { scale: 1 1; }
  91.5%     { scale: 1.15 0.1; }
  93%, 100% { scale: 1 1; }
}

@keyframes orb-glow {
  from { box-shadow: 0 0 4px 1px rgba(191,87,0, 0.9), 0 0 9px 1px rgba(191,87,0, 0.4); }
  to   { box-shadow: 0 0 7px 2px rgba(255, 140, 50, 1), 0 0 16px 4px rgba(191,87,0, 0.6); }
}

.nav-links { display: flex; align-items: center; gap: 22px; }

.nav-links a {
  text-decoration: none;
  color: var(--body);
  font-size: 0.92rem;
}

.nav-links a:hover { color: var(--ink); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  border-radius: 999px;
  padding: 11px 18px;
  font-size: 0.9rem;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn-fill {
  background: var(--ink);
  color: var(--void);
}

.btn-fill:hover { background: #ffffff; }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: rgba(255,255,255,0.16);
}

.btn-ghost:hover { border-color: rgba(255,255,255,0.4); }

.btn-pulse {
  background: var(--pulse);
  color: #ffffff;
}

.btn-pulse:hover { background: #a34a00; }

/* Hero */
.hero {
  padding: 88px 0 72px;
  position: relative;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -80px 20% auto;
  height: 280px;
  background: radial-gradient(circle, rgba(191,87,0,0.16), transparent 70%);
  pointer-events: none;
}

.hero h1 {
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  max-width: 16ch;
  margin-top: 16px;
}

.hero h1 em {
  font-style: italic;
  color: var(--pulse-soft);
  font-family: Fraunces, Georgia, serif;
  font-weight: 400;
}

.lede {
  max-width: 46ch;
  color: var(--body);
  font-size: 1.12rem;
  margin-top: 24px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  margin-top: 72px;
}

.metric {
  background: var(--void-soft);
  padding: 22px 24px;
}

.metric b {
  display: block;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
}

.metric span { color: var(--mute); font-size: 0.88rem; }

/* Bot callout */
.callout {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 22px 24px;
}

.callout .face {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4a6a94, #10284a 68%);
  border: 1px solid #3d3e42;
  position: relative;
}

.callout .face::before,
.callout .face::after {
  content: "";
  position: absolute;
  top: 22px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--spark);
  box-shadow: 0 0 10px var(--spark);
}

.callout .face::before { left: 15px; }
.callout .face::after { right: 15px; }

.callout .who { color: var(--spark); margin-bottom: 6px; }
.callout p { color: var(--body); font-size: 1.02rem; }
.callout cite {
  display: block;
  margin-top: 10px;
  color: var(--mute);
  font-style: normal;
  font-size: 0.85rem;
}

/* Sections */
section { padding: 84px 0; }
.band { border-top: 1px solid var(--hairline); }

h2 { font-size: clamp(1.8rem, 4vw, 2.7rem); max-width: 18ch; }
h3 { font-size: 1.2rem; }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

.muted { color: var(--body); }
.muted + .muted { margin-top: 16px; }

.list {
  list-style: none;
  margin-top: 8px;
}

.list li {
  border-top: 1px solid var(--hairline);
  padding: 14px 0;
  color: var(--body);
}

.list li strong {
  display: block;
  color: var(--ink);
  font-weight: 600;
}

.grid-3, .grid-2 {
  display: grid;
  gap: 16px;
}

.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: 1fr 1fr; }

.card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 22px;
}

.card .tag {
  color: var(--pulse-soft);
  margin-bottom: 10px;
}

.card p { color: var(--body); margin-top: 10px; font-size: 0.98rem; }

.lead-card {
  grid-column: 1 / -1;
  background: linear-gradient(180deg, #2a2a3a, #173253);
  border-color: rgba(191,87,0, 0.28);
}

.quote-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.note {
  margin-top: 28px;
  color: var(--mute);
  font-size: 0.92rem;
  max-width: 70ch;
}

/* Connect */
.connect-box {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 36px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: 36px;
}

.photo {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--pulse);
}

.form-embed { min-height: 220px; }

.contact-form { display: grid; gap: 14px; max-width: 480px; }
.form-row { display: grid; gap: 6px; }
.form-row.two { grid-template-columns: 1fr 1fr; gap: 12px; }
label { font-size: 0.82rem; color: var(--mute); }
input, textarea {
  width: 100%;
  background: var(--void);
  border: 1px solid var(--hairline);
  color: var(--ink);
  border-radius: 10px;
  padding: 12px 13px;
  font: inherit;
}
input:focus, textarea:focus { outline: 1px solid var(--pulse); }
textarea { min-height: 110px; resize: vertical; }
.hp { position: absolute; left: -9999px; }
.status { min-height: 1.2em; font-size: 0.92rem; color: var(--mute); }
.status.ok { color: var(--spark); }
.status.err { color: #ff8a7a; }

footer {
  border-top: 1px solid var(--hairline);
  padding: 40px 0 56px;
  color: var(--mute);
  font-size: 0.88rem;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--hairline);
}

.footer-col a {
  display: block;
  text-decoration: none;
  color: var(--body);
  margin-bottom: 8px;
}

.footer-col a:hover { color: var(--ink); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.legal {
  margin-top: 18px;
  max-width: 72ch;
  font-size: 0.8rem;
  color: var(--mute);
}

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--pulse);
  outline-offset: 3px;
}


/* ===== FIX: nav "Let's connect" pill. Dark text on the white pill.
   .nav-links a (color: var(--body)) used to override .btn-fill. ===== */
.nav-links a.btn-fill,
.nav-links a.btn-fill:hover,
.nav-links a.btn-fill:focus-visible {
  color: var(--void);
  background: #ffffff;
  font-weight: 600;
}

/* Accessibility helpers */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  background: #ffffff;
  color: var(--void);
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus { top: 12px; }

.anchor-alias { position: relative; top: -80px; display: block; height: 0; }

.lede strong { color: var(--ink); font-weight: 600; }

.page-title {
  font-size: clamp(1.8rem, 4vw, 2.7rem);
  max-width: 18ch;
  margin: 12px 0 22px;
}

/* ===== Hero video ===== */
.hero-video {
  margin: 40px 0 0;
  border: 1px solid var(--hairline);
  border-radius: 18px;
  overflow: hidden;
  background: var(--void);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  aspect-ratio: 16 / 9;
}

.hero-video video {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--void);
}

/* The hero sits right on top of the form now, so tighten the gap. */
.hero { padding-bottom: 32px; }

/* ===== FIX: form section directly under the video ===== */
.form-section { padding-top: 24px; }

.form-card {
  border-color: rgba(191,87,0, 0.35);
  grid-template-columns: 240px 1fr;
}

.form-main h2 { margin-top: 10px; max-width: 22ch; }

.form-lead {
  color: var(--ink);
  font-size: 1.05rem;
  margin-top: 16px;
  max-width: 60ch;
}

.form-contact {
  margin-top: 18px;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.7;
}

.form-contact a,
.footer-contact a,
.band-email {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--pulse);
  text-underline-offset: 3px;
}

/* Everything pasted into .form-slot inherits light, high-contrast text.
   These rules style plain HTML forms and most script embeds that render
   into the page. Iframe embeds (for example HubSpot's "hs-form-frame")
   cannot be styled from here: set their colors in the form builder, or
   add the class "form-slot--light" to the div below for a white panel. */
.form-slot {
  margin-top: 24px;
  min-height: 220px;
  background: var(--void-soft);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 24px;
  color: var(--ink);
}

.form-slot,
.form-slot p,
.form-slot span,
.form-slot legend,
.form-slot label,
.form-slot h1, .form-slot h2, .form-slot h3, .form-slot h4 {
  color: var(--ink);
}

.form-slot label,
.form-slot legend {
  display: block;
  font-size: 0.92rem;
  font-weight: 500;
  margin-bottom: 6px;
}

.form-slot a { color: var(--pulse-soft); }

.form-slot input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.form-slot select,
.form-slot textarea {
  width: 100%;
  background: #0e2240;
  color: var(--ink);
  border: 1px solid #4a4b50;
  border-radius: 10px;
  padding: 12px 13px;
  font: inherit;
  margin-bottom: 14px;
}

.form-slot input::placeholder,
.form-slot textarea::placeholder { color: var(--mute); opacity: 1; }

.form-slot select option { background: var(--card); color: var(--ink); }

.form-slot input:focus,
.form-slot select:focus,
.form-slot textarea:focus {
  outline: 2px solid var(--pulse);
  outline-offset: 1px;
  border-color: var(--pulse);
}

.form-slot input[type="checkbox"],
.form-slot input[type="radio"] { accent-color: var(--pulse); }

.form-slot button,
.form-slot input[type="submit"],
.form-slot input[type="button"] {
  background: var(--pulse);
  color: var(--void);
  border: 0;
  border-radius: 999px;
  padding: 12px 22px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.form-slot button:hover,
.form-slot input[type="submit"]:hover { background: var(--pulse-soft); }

.form-slot iframe { width: 100%; border: 0; }

/* Optional white panel for iframe embeds that only ship dark text. */
.form-slot.form-slot--light {
  background: #ffffff;
  color: var(--void);
  border-color: #ffffff;
}
.form-slot.form-slot--light,
.form-slot.form-slot--light p,
.form-slot.form-slot--light span,
.form-slot.form-slot--light label,
.form-slot.form-slot--light legend,
.form-slot.form-slot--light h1, .form-slot.form-slot--light h2,
.form-slot.form-slot--light h3, .form-slot.form-slot--light h4 { color: var(--void); }

/* Placeholder box. Delete the .form-placeholder div after pasting the form. */
.form-placeholder {
  border: 2px dashed var(--pulse);
  border-radius: 12px;
  padding: 28px 24px;
  text-align: center;
  display: grid;
  gap: 8px;
  place-content: center;
  min-height: 172px;
}
.form-placeholder .mono { color: var(--pulse); }
.form-placeholder p { color: var(--ink); }
.form-placeholder-file { font-size: 0.85rem; color: var(--body) !important; }
.form-placeholder code {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.82rem;
  background: var(--card);
  padding: 2px 6px;
  border-radius: 6px;
}

.status { margin-top: 12px; }

.metrics-section { padding: 24px 0 24px; }
.metrics-section .metrics { margin-top: 0; }

/* ===== FIX: bot job cards (no faces, no quote marks, clearly not testimonials) ===== */
.job-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 28px;
}

.job-card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--pulse);
  border-radius: 14px;
  padding: 20px 22px;
}

.job-card:first-child { grid-column: 1 / -1; }
.job-card .who { color: var(--pulse-soft); margin-bottom: 8px; }
.job-card p { color: var(--body); font-size: 1rem; }

/* Real client quotes (see the commented block in index.php) */
.client-quote {
  margin-top: 16px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 22px;
}
.client-quote blockquote p { color: var(--ink); font-size: 1.05rem; }
.client-quote figcaption { margin-top: 10px; color: var(--mute); font-size: 0.88rem; }

.band-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 22px;
}

.footer-contact { margin-top: 10px; color: var(--body); }
.footer-contact span { margin: 0 6px; color: var(--mute); }
.footer-bottom a { color: var(--body); }


/* Hero kicker line under the H1 */
.hero-kicker {
  margin-top: 18px;
  max-width: 40ch;
  color: var(--ink);
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

/* =====================================================================
   HUBSPOT FORM STYLES (dark card, high contrast)
   Legacy HubSpot forms (hbspt.forms.create, classes .hs-form, .hs-input,
   .hs-button...) render straight into the page, so these rules apply.
   They work best with "Set as raw HTML form" turned on in HubSpot, which
   removes HubSpot's own CSS. !important is used on colors so HubSpot's
   default styles cannot put dark text back on the dark card.
   ===================================================================== */
.form-slot .hs-form,
.form-slot .hs-form fieldset {
  max-width: none !important;
  width: 100%;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  color: #ffffff !important;
}

.form-slot .hs-form fieldset { border: 0; padding: 0; margin: 0; }
.form-slot .hs-form fieldset.form-columns-2 .hs-form-field { width: 50%; float: left; padding-right: 12px; }
.form-slot .hs-form fieldset.form-columns-2 .hs-form-field:last-child { padding-right: 0; }
.form-slot .hs-form fieldset.form-columns-2 .input { margin-right: 0 !important; }
.form-slot .hs-form fieldset::after { content: ""; display: table; clear: both; }

.form-slot .hs-form .hs-form-field { margin-bottom: 18px; }

.form-slot .hs-form .hs-form-field > label,
.form-slot .hs-form .hs-form-field label:not(.hs-form-booleancheckbox-display):not(.hs-form-checkbox-display):not(.hs-form-radio-display):not(.hs-error-msg) {
  display: block;
  color: #ffffff !important;
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 7px;
  line-height: 1.35;
}

.form-slot .hs-form .hs-form-required { color: var(--pulse) !important; margin-left: 3px; }

.form-slot .hs-form .hs-field-desc {
  color: var(--body) !important;
  font-size: 0.85rem;
  margin: -2px 0 8px;
}

.form-slot .hs-form .hs-input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.form-slot .hs-form select.hs-input,
.form-slot .hs-form textarea.hs-input {
  width: 100% !important;
  max-width: 100%;
  background: #0e2240 !important;
  color: #ffffff !important;
  border: 1px solid #5a5b60 !important;
  border-radius: 10px !important;
  padding: 12px 13px !important;
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
  min-height: 46px;
  box-shadow: none !important;
  box-sizing: border-box;
}

.form-slot .hs-form textarea.hs-input { min-height: 120px; resize: vertical; }

.form-slot .hs-form .hs-input::placeholder { color: #9a9da3 !important; opacity: 1; }
.form-slot .hs-form select.hs-input option { background: #0e2240; color: #ffffff; }

.form-slot .hs-form .hs-input:focus {
  outline: 2px solid var(--pulse) !important;
  outline-offset: 1px;
  border-color: var(--pulse) !important;
}

.form-slot .hs-form .hs-input.invalid.error,
.form-slot .hs-form .hs-input.error { border-color: #ff8a7a !important; }

.form-slot .hs-form .inputs-list { list-style: none; margin: 4px 0 0; padding: 0; }
.form-slot .hs-form .inputs-list li { margin: 0 0 8px; }
.form-slot .hs-form .inputs-list label,
.form-slot .hs-form .hs-form-booleancheckbox-display,
.form-slot .hs-form .hs-form-checkbox-display,
.form-slot .hs-form .hs-form-radio-display {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  color: #ffffff !important;
  font-weight: 400;
  font-size: 0.95rem;
  cursor: pointer;
}
.form-slot .hs-form .inputs-list span { color: #ffffff !important; }
.form-slot .hs-form input[type="checkbox"],
.form-slot .hs-form input[type="radio"] {
  width: 18px !important;
  height: 18px;
  margin: 2px 0 0 !important;
  flex-shrink: 0;
  accent-color: var(--pulse);
}

.form-slot .hs-form .hs-error-msgs {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}
.form-slot .hs-form .hs-error-msgs label,
.form-slot .hs-form .hs-error-msgs label.hs-error-msg,
.form-slot .hs-form .hs-error-msgs .hs-main-font-element {
  color: #ff9d8f !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
}

.form-slot .hs-form .hs-richtext,
.form-slot .hs-form .hs-richtext p,
.form-slot .hs-form .hs-richtext h1,
.form-slot .hs-form .hs-richtext h2,
.form-slot .hs-form .hs-richtext h3,
.form-slot .hs-form .hs-richtext span {
  color: #ffffff !important;
  font-family: inherit;
}
.form-slot .hs-form .hs-richtext { margin-bottom: 16px; line-height: 1.55; }
.form-slot .hs-form .hs-richtext a { color: var(--pulse-soft) !important; }

.form-slot .hs-form .legal-consent-container,
.form-slot .hs-form .legal-consent-container p,
.form-slot .hs-form .legal-consent-container span,
.form-slot .hs-form .legal-consent-container label {
  color: var(--body) !important;
  font-size: 0.85rem !important;
  line-height: 1.5;
}
.form-slot .hs-form .legal-consent-container a { color: var(--pulse-soft) !important; }
.form-slot .hs-form .legal-consent-container .hs-form-booleancheckbox-display > span { margin-left: 0 !important; }

.form-slot .hs-form .hs_submit,
.form-slot .hs-form .actions { margin-top: 10px; padding: 0; }

.form-slot .hs-form .hs-button,
.form-slot .hs-form input[type="submit"].hs-button {
  appearance: none;
  -webkit-appearance: none;
  background: var(--pulse) !important;
  background-image: none !important;
  color: var(--void) !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 13px 26px !important;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  cursor: pointer;
  width: auto;
}
.form-slot .hs-form .hs-button:hover,
.form-slot .hs-form .hs-button:focus { background: var(--pulse-soft) !important; color: var(--void) !important; }
.form-slot .hs-form .hs-button:focus-visible { outline: 2px solid #ffffff !important; outline-offset: 3px; }

.form-slot .submitted-message,
.form-slot .submitted-message p {
  color: #ffffff !important;
  font-size: 1.05rem;
}

/* Updated (new) HubSpot form editor. Its default embed is an iframe
   (div.hs-form-frame), which page CSS cannot reach: style that version in
   HubSpot's Form styles panel. The "Developer code (Advanced)" embed
   (Marketing Hub or Content Hub Professional or Enterprise) renders in the
   page and reads these CSS variables. */
:root {
  --hsf-global__font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  --hsf-global__font-size: 16px;
  --hsf-global__color: #ffffff;
  --hsf-global-error__color: #ff9d8f;
  --hsf-background__background-color: transparent;
  --hsf-background__padding: 0;
  --hsf-background__border-width: 0;
  --hsf-heading__color: #ffffff;
  --hsf-heading__font-family: "IBM Plex Sans", Inter, sans-serif;
  --hsf-richtext__color: #ffffff;
  --hsf-field-label__color: #ffffff;
  --hsf-field-label-requiredindicator__color: #BF5700;
  --hsf-field-description__color: #c6c7cb;
  --hsf-field-footer__color: #c6c7cb;
  --hsf-field-input__color: #ffffff;
  --hsf-field-input__background-color: #0e2240;
  --hsf-field-input__placeholder-color: #9a9da3;
  --hsf-field-input__border-color: #5a5b60;
  --hsf-field-input__border-width: 1px;
  --hsf-field-input__border-style: solid;
  --hsf-field-input__border-radius: 10px;
  --hsf-field-input__padding: 12px 13px;
  --hsf-field-textarea__color: #ffffff;
  --hsf-field-textarea__background-color: #0e2240;
  --hsf-field-textarea__placeholder-color: #9a9da3;
  --hsf-field-textarea__border-color: #5a5b60;
  --hsf-field-textarea__border-width: 1px;
  --hsf-field-textarea__border-style: solid;
  --hsf-field-textarea__border-radius: 10px;
  --hsf-field-textarea__padding: 12px 13px;
  --hsf-field-checkbox__color: #BF5700;
  --hsf-field-checkbox__background-color: #0e2240;
  --hsf-field-checkbox__border-color: #8a8d93;
  --hsf-field-radio__color: #BF5700;
  --hsf-field-radio__background-color: #0e2240;
  --hsf-field-radio__border-color: #8a8d93;
  --hsf-button__font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  --hsf-button__font-size: 16px;
  --hsf-button__color: #ffffff;
  --hsf-button__background-color: #BF5700;
  --hsf-button__background-image: none;
  --hsf-button__border-radius: 999px;
  --hsf-button__padding: 13px 26px;
  --hsf-button__box-shadow: none;
  --hsf-erroralert__color: #ff9d8f;
  --hsf-infoalert__color: #ffffff;
  --hsf-progressbar-text__color: #ffffff;
}

@media (max-width: 900px) {
  .nav-links a:not(.btn) { display: none; }
  .split, .grid-3, .grid-2, .quote-row, .connect-box, .form-card, .job-row, .form-row.two, .metrics {
    grid-template-columns: 1fr;
  }
  .job-card:first-child { grid-column: auto; }
  .form-main { order: -1; }
  .lead-card { grid-column: auto; }
}

@media (max-width: 560px) {
  .wrap, .narrow, .nav-inner { width: min(var(--max), calc(100% - 32px)); }
  .hero { padding: 64px 0 48px; }
  section { padding: 64px 0; }
  .connect-box { padding: 24px; }
  .form-slot { padding: 16px; }
  .hero-video { margin-top: 28px; border-radius: 12px; }
  .form-slot .hs-form fieldset.form-columns-2 .hs-form-field { width: 100%; float: none; padding-right: 0; }
}

/* Motion off for visitors who ask for it: eyes stay still (glow stays on). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .orb::before,
  .orb::after,
  .logo:hover .orb::before,
  .logo:hover .orb::after {
    animation: none;
    translate: 0 0;
    scale: 1 1;
  }
}

/* =====================================================================
   COMPACT FORM SECTION (HubSpot embed, Sep 29 2026 update)
   A narrow, centered column under the video: small headline, short
   lead-in, and the HubSpot form in a compact card.
   ===================================================================== */
.form-section { padding: 8px 0 56px; }

.form-compact {
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
}

.form-compact .form-title {
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  max-width: 26ch;
  margin: 10px auto 0;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.form-compact .form-lead {
  color: var(--body);
  font-size: 0.95rem;
  margin: 10px auto 0;
  max-width: 44ch;
}

/* Card that holds the HubSpot iframe. HubSpot adds its own 40px inner
   padding, so the card itself has none. */
.form-slot.form-slot--hubspot {
  margin: 22px auto 0;
  max-width: 480px;
  min-height: 360px;
  padding: 0;
  text-align: left;
  border-radius: 14px;
  overflow: hidden;
  background: transparent;
  border: 1px solid var(--hairline);
}

.form-slot.form-slot--hubspot.form-slot--light {
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 1px rgba(191,87,0, 0.18), 0 18px 48px rgba(0, 0, 0, 0.45);
}

.form-slot--hubspot .hs-form-frame { width: 100%; }
.form-slot--hubspot .hs-form-frame iframe { display: block; width: 100%; border: 0; }

.form-compact .status { text-align: center; }

.form-by {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
  text-align: left;
}
.form-by .reese-swap { flex-shrink: 0; }
.form-by p { color: var(--mute); font-size: 0.85rem; line-height: 1.5; }
.form-by strong { color: var(--ink); font-weight: 600; }
.form-by a { color: var(--body); text-decoration: underline; text-decoration-color: rgba(191,87,0, 0.6); text-underline-offset: 3px; }

@media (max-width: 560px) {
  .form-section { padding: 0 0 48px; }
  .form-slot.form-slot--hubspot { margin-top: 18px; border-radius: 12px; }
  .form-by { align-items: flex-start; }
}


/* =====================================================================
   REESE / BOT AVATAR (includes/reese-avatar.php)
   8s loop: 3.5s real photo, 0.5s glitch, 3.5s Grok Bot Reese, 0.5s glitch.
   The glitch copies the v2 video's cuts: horizontal slice shifts, a red and
   blue split, scanlines, a brightness bump, and an orange flash ring.
   Hover shows the bot and makes it wave. Reduced motion: photo only.
   ===================================================================== */
.reese-swap {
  --rs-size: 104px;
  --rs-cycle: 8s;
  --rs-delay: 0s;
  position: relative;
  display: inline-block;
  width: var(--rs-size);
  height: var(--rs-size);
  flex-shrink: 0;
  vertical-align: middle;
}

.rs-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--void);
  border: 2px solid var(--pulse);
  isolation: isolate;
}

.rs-small .rs-face { border-width: 1.5px; }

.rs-photo,
.rs-photo img,
.rs-bot,
.rs-slice,
.rs-glitch {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.rs-photo img { object-fit: cover; border-radius: 0; border: 0; }

.rs-photo { animation: rs-photo var(--rs-cycle) linear var(--rs-delay) infinite; }
.rs-bot   { opacity: 0; animation: rs-bot var(--rs-cycle) linear var(--rs-delay) infinite; }

.rs-slice {
  opacity: 0;
  background: url("/assets/img/reese-harris-300.webp") center / cover no-repeat;
  mix-blend-mode: screen;
  z-index: 2;
}
.rs-slice-a { animation: rs-slice-a var(--rs-cycle) steps(1, end) var(--rs-delay) infinite; }
.rs-slice-b { animation: rs-slice-b var(--rs-cycle) steps(1, end) var(--rs-delay) infinite; filter: sepia(1) saturate(6) hue-rotate(-18deg); }

.rs-glitch {
  opacity: 0;
  z-index: 3;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.10) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, transparent 30%, rgba(191,87,0, 0.35) 30% 36%, transparent 36% 62%, rgba(191,87,0, 0.25) 62% 65%, transparent 65%);
  mix-blend-mode: screen;
  animation: rs-glitch var(--rs-cycle) linear var(--rs-delay) infinite;
}

.rs-ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--pulse);
  box-shadow: 0 0 14px 3px rgba(191,87,0, 0.75), inset 0 0 10px rgba(191,87,0, 0.6);
  opacity: 0;
  pointer-events: none;
  animation: rs-ring var(--rs-cycle) ease-out var(--rs-delay) infinite;
}

.rs-hi {
  position: absolute;
  top: -4px;
  right: -14px;
  z-index: 4;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--void);
  background: var(--pulse);
  padding: 5px 8px 5px;
  border-radius: 999px 999px 999px 3px;
  box-shadow: 0 0 12px rgba(191,87,0, 0.55);
  opacity: 0;
  transform-origin: 0% 100%;
  pointer-events: none;
  animation: rs-hi var(--rs-cycle) ease-out var(--rs-delay) infinite;
}

.rs-small .rs-hi { font-size: 0.6rem; padding: 4px 6px; top: -6px; right: -12px; }

/* SVG parts */
.rs-bot .rs-eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: rs-glance 4.6s ease-in-out infinite, rs-blink 3.7s linear infinite;
}
.rs-bot .rs-antenna { animation: rs-antenna 1.6s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
.rs-bot .rs-scan { animation: rs-scan 2.8s linear infinite; }
.rs-bot .rs-arm {
  transform-origin: 91px 121px;
  animation: rs-wave var(--rs-cycle) ease-in-out var(--rs-delay) infinite;
}

/* Timeline, in % of 8s (1% = 80ms). Photo 0 to 43.75, glitch to 50,
   bot 50 to 93.75, glitch back to 100. */
@keyframes rs-photo {
  0%, 44%   { opacity: 1; transform: none; filter: none; }
  45%       { opacity: 1; transform: translateX(3px); filter: drop-shadow(3px 0 rgba(255, 60, 40, 0.85)) drop-shadow(-3px 0 rgba(70, 130, 255, 0.75)) brightness(1.25); }
  46%       { opacity: 0.35; transform: translateX(-4px); filter: drop-shadow(-4px 0 rgba(255, 60, 40, 0.85)) drop-shadow(4px 0 rgba(70, 130, 255, 0.75)) brightness(1.4); }
  47%       { opacity: 0.85; transform: translateX(2px); filter: drop-shadow(2px 0 rgba(255, 60, 40, 0.85)) drop-shadow(-2px 0 rgba(70, 130, 255, 0.75)); }
  48%       { opacity: 0.15; transform: translateX(-2px); }
  49%, 94%  { opacity: 0; transform: none; filter: none; }
  95%       { opacity: 0.5; transform: translateX(-3px); filter: drop-shadow(-3px 0 rgba(255, 60, 40, 0.85)) drop-shadow(3px 0 rgba(70, 130, 255, 0.75)) brightness(1.35); }
  96%       { opacity: 0.2; transform: translateX(4px); }
  97.5%     { opacity: 0.9; transform: translateX(-1px); filter: drop-shadow(2px 0 rgba(255, 60, 40, 0.8)) drop-shadow(-2px 0 rgba(70, 130, 255, 0.7)); }
  99%, 100% { opacity: 1; transform: none; filter: none; }
}

@keyframes rs-bot {
  0%, 46%   { opacity: 0; transform: none; }
  47%       { opacity: 0.55; transform: translateX(-3px); }
  48%       { opacity: 0.25; transform: translateX(3px); }
  49%       { opacity: 1; transform: translateX(-1px); }
  50%, 94%  { opacity: 1; transform: none; }
  95%       { opacity: 0.6; transform: translateX(3px); }
  96%       { opacity: 0.9; transform: translateX(-3px); }
  97.5%     { opacity: 0.2; transform: translateX(2px); }
  99%, 100% { opacity: 0; transform: none; }
}

@keyframes rs-slice-a {
  0%, 44.5% { opacity: 0; }
  45%   { opacity: 0.9; clip-path: inset(18% 0 64% 0); transform: translateX(-9%); }
  46%   { opacity: 0.9; clip-path: inset(58% 0 26% 0); transform: translateX(11%); }
  47%   { opacity: 0.8; clip-path: inset(34% 0 52% 0); transform: translateX(-6%); }
  48.5% { opacity: 0.7; clip-path: inset(70% 0 12% 0); transform: translateX(8%); }
  49.5%, 94.5% { opacity: 0; }
  95%   { opacity: 0.8; clip-path: inset(62% 0 20% 0); transform: translateX(10%); }
  96%   { opacity: 0.9; clip-path: inset(24% 0 60% 0); transform: translateX(-12%); }
  97.5% { opacity: 0.8; clip-path: inset(44% 0 40% 0); transform: translateX(6%); }
  98.5%, 100% { opacity: 0; }
}

@keyframes rs-slice-b {
  0%, 45%   { opacity: 0; }
  45.5% { opacity: 0.75; clip-path: inset(40% 0 44% 0); transform: translateX(13%); }
  46.5% { opacity: 0.75; clip-path: inset(8% 0 80% 0); transform: translateX(-10%); }
  48%   { opacity: 0.6; clip-path: inset(52% 0 36% 0); transform: translateX(7%); }
  49%, 95.5% { opacity: 0; }
  96%   { opacity: 0.7; clip-path: inset(12% 0 74% 0); transform: translateX(-9%); }
  97%   { opacity: 0.7; clip-path: inset(66% 0 18% 0); transform: translateX(12%); }
  98%, 100% { opacity: 0; }
}

@keyframes rs-glitch {
  0%, 44%   { opacity: 0; transform: none; }
  45%       { opacity: 1; transform: translateY(-4%); }
  46.5%     { opacity: 0.8; transform: translateY(6%); }
  48%       { opacity: 1; transform: translateY(-2%); }
  50%, 94%  { opacity: 0; transform: none; }
  95%       { opacity: 1; transform: translateY(5%); }
  96.5%     { opacity: 0.8; transform: translateY(-5%); }
  98%       { opacity: 0.9; transform: translateY(2%); }
  99.5%, 100% { opacity: 0; transform: none; }
}

@keyframes rs-ring {
  0%      { opacity: 0.55; transform: scale(1.18); }
  3%      { opacity: 0; transform: scale(1.4); }
  48%     { opacity: 0; transform: scale(0.8); }
  49%     { opacity: 1; transform: scale(0.96); }
  53%     { opacity: 0; transform: scale(1.4); }
  98.5%   { opacity: 0; transform: scale(0.8); }
  99.4%   { opacity: 1; transform: scale(0.96); }
  100%    { opacity: 0.55; transform: scale(1.18); }
}

@keyframes rs-hi {
  0%, 54%   { opacity: 0; transform: scale(0.4) translateY(6px); }
  56%       { opacity: 1; transform: scale(1.12) translateY(0); }
  57.5%     { opacity: 1; transform: scale(1); }
  74%       { opacity: 1; transform: scale(1); }
  76%, 100% { opacity: 0; transform: scale(0.6) translateY(4px); }
}

@keyframes rs-wave {
  0%, 54%   { transform: rotate(38deg); }
  57%       { transform: rotate(-6deg); }
  60%       { transform: rotate(14deg); }
  63%       { transform: rotate(-6deg); }
  66%       { transform: rotate(14deg); }
  69%       { transform: rotate(-4deg); }
  73%, 100% { transform: rotate(38deg); }
}

@keyframes rs-glance {
  0%, 18%   { translate: 0 0; }
  24%, 38%  { translate: -3.2px 0; }
  44%, 54%  { translate: 0 0; }
  60%, 72%  { translate: 3.2px -0.6px; }
  78%, 86%  { translate: 0 0; }
  90%       { translate: 0 -1.6px; }
  95%, 100% { translate: 0 0; }
}

@keyframes rs-blink {
  0%, 40%   { scale: 1 1; }
  42.5%     { scale: 1.12 0.1; }
  45%, 84%  { scale: 1 1; }
  86%       { scale: 1.12 0.1; }
  88%       { scale: 1 1; }
  90%       { scale: 1.12 0.1; }
  92%, 100% { scale: 1 1; }
}

@keyframes rs-antenna {
  from { opacity: 0.75; scale: 0.9; }
  to   { opacity: 1; scale: 1.12; }
}

@keyframes rs-scan {
  from { transform: translateY(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  to   { transform: translateY(78px); opacity: 0; }
}

/* Hover: show the bot and let it wave. */
.reese-swap:hover .rs-photo,
.reese-swap:hover .rs-slice,
.reese-swap:hover .rs-glitch,
.reese-swap:hover .rs-ring { animation: none; opacity: 0; }
.reese-swap:hover .rs-bot { animation: none; opacity: 1; }
.reese-swap:hover .rs-hi { animation: none; opacity: 1; transform: none; }
.reese-swap:hover .rs-bot .rs-arm { animation: rs-wave-hover 1.1s ease-in-out infinite; }

@keyframes rs-wave-hover {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(16deg); }
}

/* "Who builds this" heading row */
.who-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 14px;
}

/* Reduced motion: the real photo only, no bot, no motion. */
@media (prefers-reduced-motion: reduce) {
  .rs-photo,
  .reese-swap:hover .rs-photo { animation: none; opacity: 1; transform: none; filter: none; }
  .rs-bot,
  .rs-slice,
  .rs-glitch,
  .rs-ring,
  .rs-hi,
  .reese-swap:hover .rs-bot,
  .reese-swap:hover .rs-hi { display: none; animation: none; }
}

/* "Who builds this" bio (Sep 30 2026 update): lead line and credential chips */
.who-bio .who-lead {
  color: var(--ink);
  font-weight: 500;
  font-size: 1.08rem;
  line-height: 1.5;
}

.who-cred-label {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
}

.who-creds {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.who-creds li {
  border: 1px solid var(--hairline);
  background: var(--card);
  color: var(--ink);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.9rem;
  line-height: 1.3;
}

/* Hero headline and subhead (Sep 30 2026 update): even line breaks, no one-word last line */
.hero h1 { text-wrap: balance; }
.hero-kicker { text-wrap: pretty; }