*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
:root {
  --ink: #07090f;
  --ink2: #0c1018;
  --ink3: #111826;
  --ink4: #13192a;
  --card: #13192a;
  --tx-hi: #e8eaf0;
  --tx-mid: rgba(232, 234, 240, 0.55);
  --tx-lo: rgba(232, 234, 240, 0.32);
  --tx-dim: rgba(232, 234, 240, 0.18);
  --teal: #00c896;
  --teal-a: rgba(0, 200, 150, 0.08);
  --teal-b: rgba(0, 200, 150, 0.2);
  --acc: #e8622a;
  --acc-a: rgba(232, 98, 42, 0.08);
  --acc-b: rgba(232, 98, 42, 0.25);
  --gold: #d4a843;
  --sig: #4a9ee8;
  --sig-a: rgba(74, 158, 232, 0.1);
  --sig-b: rgba(74, 158, 232, 0.25);
  --tag: #3ecf8e;
  --tag-a: rgba(62, 207, 142, 0.1);
  --tag-b: rgba(62, 207, 142, 0.25);
  --bd: rgba(255, 255, 255, 0.07);
  --bd2: rgba(255, 255, 255, 0.12);
  --f-d: "Cormorant Garant", Georgia, serif;
  --f-b: "DM Sans", sans-serif;
  --f-m: "JetBrains Mono", monospace;
  --r: 8px;
  --r2: 12px;
  --r3: 18px;
  --tr: 0.2s ease;
}
html {
  scroll-behavior: smooth;
}
body {
  background: var(--ink);
  color: var(--tx-hi);
  font-family: var(--f-b);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── BRAND MARKS ── */
.inf-sym {
  font-family: var(--f-d);
  font-size: 1.4em;
  font-weight: 700;
  line-height: 1;
  vertical-align: -0.1em;
  display: inline-block;
  margin: 0 -0.05em;
}
.reb8-mark {
  text-transform: none !important;
  letter-spacing: -0.5px !important;
  font-family: var(--f-d) !important;
  font-weight: 800 !important;
}
.logo-8 {
  vertical-align: -0.06em;
  display: inline-block;
}

/* ── ANNOUNCE STRIP ── */
.announce-strip {
  background: linear-gradient(
    90deg,
    rgba(0, 200, 150, 0.13) 0%,
    rgba(212, 168, 67, 0.08) 100%
  );
  border-bottom: 1px solid rgba(0, 200, 150, 0.18);
  padding: 8px 24px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.announce-strip span {
  font-family: var(--f-m);
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--teal);
}
.announce-strip a {
  font-family: var(--f-m);
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 168, 67, 0.3);
  transition: border-color var(--tr);
}
.announce-strip a:hover {
  border-color: var(--gold);
}

/* ── NAV ── */
nav {
  position: sticky;
  top: 0;
  z-index: 200;
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 52px;
  background: rgba(7, 9, 15, 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--bd);
}
.nv-logo {
  font-family: var(--f-d);
  font-size: 22px;
  font-weight: 800;
  color: var(--tx-hi);
  letter-spacing: -0.5px;
  cursor: pointer;
  margin-right: auto;
  text-decoration: none;
}
.nv-logo-inf {
  color: var(--teal);
  font-family: var(--f-d);
  font-size: 1.3em;
  font-weight: 700;
  vertical-align: -0.08em;
  margin: 0 -0.05em;
}
.nv-logo-dot {
  color: var(--acc);
  font-family: var(--f-d);
  font-weight: 800;
  vertical-align: -0.06em;
  display: inline-block;
}
.nv-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin-right: 20px;
}
.nv-links button {
  background: none;
  border: none;
  color: var(--tx-mid);
  font-family: var(--f-b);
  font-size: 14px;
  padding: 8px 16px;
  border-radius: var(--r);
  cursor: pointer;
  transition: color var(--tr);
}
.nv-links button:hover {
  color: var(--tx-hi);
}
.nv-cta {
  background: var(--acc);
  color: #fff;
  border: none;
  padding: 9px 20px;
  border-radius: var(--r);
  font-family: var(--f-m);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all var(--tr);
}
.nv-cta:hover {
  background: #d4561f;
}

/* ── LAYOUT ── */
.w {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 52px;
  position: relative;
  z-index: 1;
}
.sec {
  padding: 120px 0;
  position: relative;
  z-index: 1;
}
.sec-sm {
  padding: 80px 0;
  position: relative;
  z-index: 1;
}
.sec-xs {
  padding: 48px 0;
  position: relative;
  z-index: 1;
}
.divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--bd2) 25%,
    var(--bd2) 75%,
    transparent
  );
}

/* ── TYPOGRAPHY ── */
.ey {
  font-family: var(--f-m);
  font-size: 10px;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ey::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--teal);
  opacity: 0.5;
  flex-shrink: 0;
}
.ey-c {
  justify-content: center;
}
.ey-c::before {
  display: none;
}
h1.d {
  font-family: var(--f-d);
  font-size: clamp(40px, 4.8vw, 72px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -2.5px;
  margin-bottom: 26px;
}
h2.d {
  font-family: var(--f-d);
  font-size: clamp(28px, 3.5vw, 54px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -1.5px;
  margin-bottom: 20px;
}
h3.d {
  font-family: var(--f-d);
  font-size: clamp(20px, 2.2vw, 34px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin-bottom: 12px;
}
em {
  font-style: italic;
  color: var(--teal);
}
.lead {
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--tx-mid);
  line-height: 1.8;
}
.body-sm {
  font-size: 14px;
  color: var(--tx-mid);
  line-height: 1.7;
}

/* ── BUTTONS ── */
.bp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--acc);
  color: #fff;
  border: none;
  padding: 14px 28px;
  border-radius: var(--r);
  font-family: var(--f-m);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all var(--tr);
}
.bp:hover {
  background: #d4561f;
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(232, 98, 42, 0.35);
}
.bg-dk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--tx-mid);
  border: 1px solid var(--bd2);
  padding: 13px 27px;
  border-radius: var(--r);
  font-family: var(--f-m);
  font-size: 13px;
  cursor: pointer;
  transition: all var(--tr);
}
.bg-dk:hover {
  border-color: var(--teal);
  color: var(--teal);
}

/* ── HERO ── */
.hero {
  min-height: calc(100vh - 84px);
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.hero-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.022) 1px,
      transparent 1px
    );
  background-size: 72px 72px;
  pointer-events: none;
}
.hero-glow {
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 1200px;
  height: 700px;
  background: radial-gradient(
    ellipse at 50% 30%,
    rgba(0, 200, 150, 0.07) 0%,
    rgba(0, 200, 150, 0.03) 35%,
    transparent 70%
  );
  pointer-events: none;
}
.hero-inner {
  display: grid;
  grid-template-columns: 44fr 56fr;
  gap: 72px;
  align-items: center;
  width: 100%;
  padding: 80px 0;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px;
  border-radius: 100px;
  font-family: var(--f-m);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  margin-bottom: 24px;
}
.pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pill-acc {
  background: var(--acc-a);
  border: 1px solid var(--acc-b);
  color: var(--acc);
}
.pill-acc .pill-dot {
  background: var(--acc);
}
.hero-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.hstats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  overflow: hidden;
}
.hs {
  padding: 18px 20px;
  border-right: 1px solid var(--bd);
}
.hs:last-child {
  border-right: none;
}
.hs-n {
  font-family: var(--f-d);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--tx-hi);
  margin-bottom: 3px;
}
.hs-n span {
  color: var(--teal);
}
.hs-l {
  font-family: var(--f-m);
  font-size: 10px;
  color: var(--tx-mid);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  line-height: 1.4;
}

/* ── WHAT WE BUILD ── */
.build-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 36px;
}
.build-card {
  background: var(--ink3);
  border: 1px solid var(--bd);
  border-radius: var(--r2);
  padding: 26px;
  position: relative;
}
.build-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: var(--r2) var(--r2) 0 0;
}
.bc-sig::before {
  background: var(--sig);
}
.bc-tag::before {
  background: var(--tag);
}
.bc-label {
  font-family: var(--f-m);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.bc-label.sig {
  color: var(--sig);
}
.bc-label.tag {
  color: var(--tag);
}
.bc-h {
  font-family: var(--f-d);
  font-size: 20px;
  font-weight: 700;
  color: var(--tx-hi);
  margin-bottom: 9px;
}
.bc-d {
  font-size: 14px;
  color: var(--tx-mid);
  line-height: 1.65;
  margin-bottom: 16px;
}

/* ── PROBLEM SECTION ── */
.prob-eyebrow-bar {
  font-family: var(--f-m);
  font-size: 10px;
  color: var(--tx-lo);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.prob-eyebrow-bar span {
  width: 20px;
  height: 1px;
  background: var(--tx-lo);
  opacity: 0.5;
  flex-shrink: 0;
}
.pain-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--bd);
  border: 1px solid var(--bd);
  border-radius: var(--r2);
  overflow: hidden;
  margin-bottom: 40px;
}
.pain-cell {
  background: var(--ink2);
  padding: 28px 24px;
}
.pc-n {
  font-family: var(--f-m);
  font-size: 9px;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 10px;
}
.pc-ico {
  font-size: 20px;
  margin-bottom: 12px;
}
.pc-t {
  font-family: var(--f-d);
  font-size: 16px;
  font-weight: 700;
  color: var(--tx-hi);
  line-height: 1.25;
  margin-bottom: 10px;
}
.pc-d {
  font-size: 13px;
  color: var(--tx-mid);
  line-height: 1.65;
}

/* ── BEFORE/AFTER ── */
.ba-wrap {
  border: 1px solid var(--bd);
  border-radius: var(--r2);
  overflow: hidden;
}
.ba-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--bd);
}
.ba-label {
  padding: 12px 20px;
  font-family: var(--f-m);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--ink3);
}
.ba-label-a {
  color: rgba(232, 98, 42, 0.7);
}
.ba-label-b {
  color: var(--teal);
}
.ba-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--bd);
}
.ba-cell {
  padding: 14px 20px;
  font-size: 14px;
  color: var(--tx-mid);
  background: var(--ink2);
  line-height: 1.5;
}
.ba-bad {
  color: rgba(232, 234, 240, 0.45);
}
.ba-good {
  color: rgba(232, 234, 240, 0.75);
}

/* ── PILOT ── */
.pilot-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.pilot-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--teal-a);
  border: 1px solid var(--teal-b);
  border-radius: 100px;
  padding: 6px 16px;
  margin-bottom: 22px;
}
.pilot-tag span {
  font-family: var(--f-m);
  font-size: 10px;
  color: var(--teal);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pilot-outcomes {
  list-style: none;
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pilot-outcomes li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  color: var(--tx-mid);
  line-height: 1.65;
}
.pdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  margin-top: 8px;
  flex-shrink: 0;
}

/* ── WIIFM ── */
.wiifm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.wc {
  background: var(--ink2);
  border: 1px solid var(--bd);
  border-radius: var(--r2);
  padding: 30px;
}
.wc:first-child {
  border-color: var(--teal-b);
  background: rgba(0, 200, 150, 0.03);
}
.wc-n {
  font-family: var(--f-m);
  font-size: 9px;
  color: var(--teal);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.wc-h {
  font-family: var(--f-d);
  font-size: 20px;
  font-weight: 700;
  color: var(--tx-hi);
  margin-bottom: 9px;
  line-height: 1.2;
}
.wc-d {
  font-size: 14px;
  color: var(--tx-mid);
  line-height: 1.7;
}

/* ── FOUNDER ── */
.founder-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.stat-box {
  background: var(--ink3);
  border: 1px solid var(--bd);
  border-radius: var(--r2);
  padding: 26px;
}
.stat-box:first-child {
  border-color: var(--teal-b);
}
.s-num {
  font-family: var(--f-d);
  font-size: 46px;
  font-weight: 700;
  color: var(--tx-hi);
  line-height: 1;
  margin-bottom: 5px;
}
.s-unit {
  color: var(--teal);
}
.s-label {
  font-family: var(--f-m);
  font-size: 9px;
  color: var(--tx-lo);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 7px;
}
.s-desc {
  font-size: 13px;
  color: var(--tx-lo);
  line-height: 1.55;
}
.founder-bio {
  padding: 26px;
  background: var(--ink3);
  border: 1px solid var(--bd);
  border-radius: var(--r2);
  margin-top: 22px;
}
.founder-name {
  font-family: var(--f-d);
  font-size: 24px;
  font-weight: 700;
  color: var(--tx-hi);
  margin-bottom: 4px;
}
.founder-role {
  font-family: var(--f-m);
  font-size: 9.5px;
  color: var(--teal);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 13px;
}

/* ── OUTCOMES ── */
.oc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.oc {
  background: var(--ink2);
  border: 1px solid var(--bd);
  border-radius: var(--r2);
  padding: 30px;
}
.oc:first-child {
  border-color: var(--teal-b);
  background: rgba(0, 200, 150, 0.03);
}
.oc-n {
  font-family: var(--f-m);
  font-size: 9px;
  color: var(--teal);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.oc-h {
  font-family: var(--f-d);
  font-size: 20px;
  font-weight: 700;
  color: var(--tx-hi);
  margin-bottom: 9px;
  line-height: 1.2;
}
.oc-d {
  font-size: 14px;
  color: var(--tx-mid);
  line-height: 1.7;
}

/* ── CTA ── */
.cta-sec {
  text-align: center;
  padding: 140px 0;
  position: relative;
  z-index: 1;
}
.cta-sec::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 600px;
  background: radial-gradient(
    ellipse,
    rgba(0, 200, 150, 0.07) 0%,
    transparent 70%
  );
  pointer-events: none;
}
.cta-h {
  font-family: var(--f-d);
  font-size: clamp(30px, 4vw, 58px);
  font-weight: 700;
  letter-spacing: -2px;
  margin-bottom: 18px;
  line-height: 1.1;
}
.cta-sub {
  font-size: 17px;
  color: var(--tx-mid);
  margin-bottom: 44px;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.75;
}
.cta-em {
  font-family: var(--f-m);
  font-size: 12px;
  color: var(--tx-lo);
  margin-top: 18px;
  display: block;
}
.cta-em a {
  color: var(--teal);
  text-decoration: none;
}
.cta-em a:hover {
  text-decoration: underline;
}

/* ── FOOTER (V5) ── */
footer {
  border-top: 1px solid var(--bd);
  padding: 60px 0 0;
  position: relative;
  z-index: 1;
}
.ft-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.ft-brand .ft-logo {
  font-family: var(--f-d);
  font-size: 19px;
  font-weight: 800;
  color: var(--tx-hi);
  text-decoration: none;
  letter-spacing: -0.2px;
  display: inline-block;
  margin-bottom: 10px;
  cursor: pointer;
}
.ft-brand .ft-logo span {
  color: var(--acc);
}
.ft-logo-inf {
  color: var(--teal);
  font-family: var(--f-d);
  font-size: 1.3em;
  font-weight: 700;
  line-height: 1;
  vertical-align: -0.08em;
  margin: 0 -0.05em;
  letter-spacing: 0;
}
.ft-brand .ft-logo .ft-logo-inf {
  color: var(--teal);
  font-size: 1.3em;
  line-height: 1;
  vertical-align: -0.06em;
}
.ft-brand .ft-logo .ft-logo-dot {
  color: var(--acc);
  font-family: var(--f-d);
  font-weight: 800;
  vertical-align: -0.06em;
  display: inline-block;
}
.ft-brand p {
  font-size: 14.5px;
  color: var(--tx-mid);
  line-height: 1.55;
  max-width: 230px;
  margin-bottom: 20px;
}
.ft-col-h {
  font-family: var(--f-m);
  font-size: 12px;
  color: var(--tx-mid);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}
.ft-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ft-links button,
.ft-links a {
  font-size: 13px;
  color: var(--tx-mid);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: 0;
  transition: color 0.2s;
}
.ft-links button:hover,
.ft-links a:hover {
  color: var(--tx-hi);
}
.ft-bottom {
  padding: 24px 0;
  border-top: 1px solid var(--bd);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.ft-copy {
  font-family: var(--f-m);
  font-size: 12px;
  color: var(--tx-lo);
}
.ft-socials {
  display: flex;
  gap: 18px;
}
.ft-socials a {
  font-family: var(--f-m);
  font-size: 12px;
  color: var(--tx-lo);
  text-decoration: none;
  transition: color 0.2s;
}
.ft-socials a:hover {
  color: var(--tx-mid);
}
@media (max-width: 960px) {
  .ft-grid {
    grid-template-columns: 1fr 1fr;
  }
  footer {
    padding: 40px 0 0;
  }
}
@media (max-width: 600px) {
  .ft-grid {
    grid-template-columns: 1fr;
  }
}

/* ── DEPTH PAGES ── */
.page {
  display: none;
}
.page.on {
  display: block;
}
#pg-home {
  display: block;
}
.depth-hero {
  padding: 100px 0 72px;
  border-bottom: 1px solid var(--bd);
}
.back-btn {
  background: none;
  border: none;
  color: var(--tx-lo);
  font-family: var(--f-m);
  font-size: 12px;
  cursor: pointer;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  transition: color var(--tr);
}
.back-btn:hover {
  color: var(--teal);
}
.depth-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.engine-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 44px;
}
.eng {
  background: var(--ink3);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  padding: 22px;
}
.eng-n {
  font-family: var(--f-m);
  font-size: 9px;
  color: var(--sig);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 9px;
}
.eng-h {
  font-family: var(--f-d);
  font-size: 17px;
  font-weight: 700;
  color: var(--tx-hi);
  margin-bottom: 7px;
}
.eng-d {
  font-size: 13px;
  color: var(--tx-mid);
  line-height: 1.65;
}
.cap-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 44px;
}
.cap {
  background: var(--ink3);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  padding: 22px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.cap-ico {
  font-size: 20px;
  flex-shrink: 0;
}
.cap-h {
  font-family: var(--f-d);
  font-size: 16px;
  font-weight: 700;
  color: var(--tx-hi);
  margin-bottom: 6px;
}
.cap-d {
  font-size: 13px;
  color: var(--tx-mid);
  line-height: 1.65;
}

/* ── ABOUT ── */
.about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.about-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 44px 0;
}
.as {
  background: var(--ink3);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  padding: 20px;
  text-align: center;
}
.as-n {
  font-family: var(--f-d);
  font-size: 36px;
  font-weight: 700;
  color: var(--tx-hi);
  margin-bottom: 4px;
}
.as-n span {
  color: var(--teal);
}
.as-l {
  font-family: var(--f-m);
  font-size: 8.5px;
  color: var(--tx-lo);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 36px;
}
.tl-item {
  display: flex;
  gap: 18px;
  padding-bottom: 28px;
  position: relative;
}
.tl-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 30px;
  bottom: 0;
  width: 1px;
  background: var(--bd2);
}
.tl-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ink4);
  border: 1px solid var(--teal-b);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.tl-dot span {
  font-family: var(--f-m);
  font-size: 8.5px;
  color: var(--teal);
}
.tl-h {
  font-family: var(--f-d);
  font-size: 17px;
  font-weight: 700;
  color: var(--tx-hi);
  margin-bottom: 5px;
}
.tl-d {
  font-size: 14px;
  color: var(--tx-mid);
  line-height: 1.65;
}
.mission-box {
  background: var(--ink3);
  border: 1px solid var(--teal-b);
  border-radius: var(--r2);
  padding: 28px;
  margin-top: 28px;
  position: relative;
}
.mission-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--teal);
  border-radius: var(--r2) var(--r2) 0 0;
}
.mission-label {
  font-family: var(--f-m);
  font-size: 9px;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 12px;
}
.mission-text {
  font-family: var(--f-d);
  font-size: 21px;
  font-weight: 700;
  color: var(--tx-hi);
  line-height: 1.4;
  font-style: italic;
}

/* ── MODAL ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal-overlay.open {
  display: flex;
}
.modal-box {
  background: var(--ink2);
  border: 1px solid var(--bd2);
  border-radius: var(--r3);
  padding: 44px;
  max-width: 480px;
  width: 100%;
  position: relative;
}
.modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: none;
  border: none;
  color: var(--tx-lo);
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
}
.modal-close:hover {
  color: var(--tx-hi);
}
.modal-h {
  font-family: var(--f-d);
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 8px;
}
.modal-sub {
  font-size: 14px;
  color: var(--tx-mid);
  margin-bottom: 24px;
  line-height: 1.6;
}
.ff {
  margin-bottom: 13px;
}
.ff label {
  display: block;
  font-family: var(--f-m);
  font-size: 9.5px;
  color: var(--tx-lo);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}
.ff input,
.ff select,
.ff textarea {
  width: 100%;
  background: var(--ink4);
  border: 1px solid var(--bd2);
  border-radius: var(--r);
  padding: 11px 14px;
  font-family: var(--f-b);
  font-size: 14px;
  color: var(--tx-hi);
  outline: none;
  transition: border-color var(--tr);
}
.ff input:focus,
.ff select:focus,
.ff textarea:focus {
  border-color: var(--teal);
}
.ff textarea {
  min-height: 74px;
  resize: vertical;
}
.ff select option {
  background: var(--ink4);
  color: var(--tx-hi);
}
.modal-note {
  font-family: var(--f-m);
  font-size: 10px;
  color: var(--tx-dim);
  margin-top: 10px;
  text-align: center;
}

@media (max-width: 960px) {
  .hero-inner,
  .founder-split,
  .about-split,
  .depth-split,
  .pilot-split {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .wiifm-grid,
  .oc-grid,
  .engine-grid,
  .build-grid,
  .pain-grid {
    grid-template-columns: 1fr;
  }
  .cap-grid {
    grid-template-columns: 1fr;
  }
  .stat-grid,
  .about-stats {
    grid-template-columns: 1fr 1fr;
  }
  .hstats {
    grid-template-columns: 1fr;
  }
  .w {
    padding: 0 24px;
  }
  nav,
  footer {
    padding-left: 24px;
    padding-right: 24px;
  }
  footer {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
}

/* ──────────────────────────────────────────────────────────
   RESPONSIVE — Comprehensive breakpoints
   - 1600px+ : large desktop / monitors (cap content width)
   - 1280px  : laptop
   - 1024px  : landscape tablet / small laptop
   -  768px  : portrait tablet
   -  600px  : large phone
   -  480px  : small phone
────────────────────────────────────────────────────────── */

/* ── HAMBURGER (hidden on desktop) ── */
.nv-toggle {
  display: none;
  background: none;
  border: 1px solid var(--bd2);
  border-radius: var(--r);
  width: 40px;
  height: 36px;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  position: relative;
}
.nv-toggle span,
.nv-toggle span::before,
.nv-toggle span::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 18px;
  height: 1.5px;
  background: var(--tx-hi);
  transform: translateX(-50%);
  transition: transform var(--tr), top var(--tr), opacity var(--tr);
}
.nv-toggle span {
  top: 50%;
  transform: translate(-50%, -50%);
}
.nv-toggle span::before {
  top: -6px;
}
.nv-toggle span::after {
  top: 6px;
}
.nv-toggle.open span {
  background: transparent;
}
.nv-toggle.open span::before {
  top: 0;
  transform: translateX(-50%) rotate(45deg);
}
.nv-toggle.open span::after {
  top: 0;
  transform: translateX(-50%) rotate(-45deg);
}

/* ── BIG SCREENS (≥1600px) ── */
@media (min-width: 1600px) {
  .w {
    max-width: 1320px;
  }
  body {
    font-size: 17px;
  }
}

/* ── LAPTOP (≤1280px) ── */
@media (max-width: 1280px) {
  .w {
    padding: 0 40px;
  }
  nav {
    padding: 0 40px;
  }
  .sec {
    padding: 100px 0;
  }
  .sec-sm {
    padding: 64px 0;
  }
}

/* ── LANDSCAPE TABLET / SMALL LAPTOP (≤1024px) ── */
@media (max-width: 1024px) {
  .w {
    padding: 0 32px;
  }
  nav {
    padding: 0 32px;
    height: 56px;
  }
  .nv-links {
    gap: 0;
  }
  .nv-links button {
    padding: 8px 12px;
    font-size: 13px;
  }
  .sec {
    padding: 80px 0;
  }
  .sec-sm {
    padding: 56px 0;
  }
  .sec-xs {
    padding: 40px 0;
  }
  .depth-hero {
    padding: 72px 0 56px;
  }
  /* Hero stays 2-col on landscape tablet, just tighter gap */
  .hero-inner {
    grid-template-columns: 44fr 56fr;
    gap: 36px;
    align-items: center;
  }
  .build-grid,
  .stat-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .pilot-split,
  .founder-split,
  .about-split,
  .depth-split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .pain-grid {
    grid-template-columns: 1fr 1fr;
  }
  .wiifm-grid,
  .oc-grid,
  .engine-grid {
    grid-template-columns: 1fr 1fr;
  }
  .cap-grid {
    grid-template-columns: 1fr 1fr;
  }
  .ft-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .announce-strip {
    padding: 8px 16px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .hstats {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── LANDSCAPE TABLET (1024-1279px) — Refined desktop ── */
@media (min-width: 1025px) and (max-width: 1279px) {
  .w {
    padding: 0 36px;
  }
  nav {
    padding: 0 36px;
  }
  .hero-inner {
    gap: 48px;
  }
  h1.d {
    font-size: clamp(38px, 4.4vw, 60px);
  }
}

/* ── TABLET / PORTRAIT TABLET (≤960px) — Stack hero, refine content widths ── */
@media (max-width: 960px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hero-inner > div:first-child {
    max-width: 640px;
  }
  .hero .lead,
  .hero p.lead {
    max-width: 580px !important;
  }
  .hero-btns {
    max-width: 480px;
  }
  .hstats {
    grid-template-columns: repeat(4, 1fr);
    max-width: 640px;
  }
  /* Section content max-width for readability on tablet */
  .sec h1.d,
  .sec h2.d,
  .sec h3.d {
    max-width: 720px;
  }
  .sec .lead,
  .sec p.lead {
    max-width: 640px;
  }
  /* Two-column 1fr 1fr layouts collapse to 1 col on tablet */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  .build-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .ft-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── PORTRAIT TABLET (≤768px) — Hamburger nav appears ── */
@media (max-width: 768px) {
  .w {
    padding: 0 32px;
  }
  nav {
    padding: 0 28px;
    height: 60px;
  }
  .nv-toggle {
    display: block !important;
  }
  nav > .nv-cta {
    display: none !important;
  }
  .nv-links {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 16px 24px 24px;
    margin: 0;
    background: rgba(7, 9, 15, 0.98);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--bd);
    transform: translateY(-150%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.2s ease, visibility 0s linear 0.3s;
    z-index: 199;
    max-height: calc(100vh - 56px);
    overflow-y: auto;
  }
  .nv-links.open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.3s ease, opacity 0.2s ease, visibility 0s linear 0s;
  }
  .nv-links li {
    width: 100%;
    list-style: none;
  }
  .nv-links button {
    width: 100%;
    text-align: left;
    padding: 14px 12px;
    font-size: 15px;
    border-bottom: 1px solid var(--bd);
    border-radius: 0;
    background: transparent;
    color: var(--tx-mid);
  }
  .nv-links .nv-mobile-pilot button {
    margin-top: 14px;
    background: var(--acc);
    color: #fff;
    text-align: center;
    border: none;
    border-radius: var(--r);
    padding: 14px;
    font-family: var(--f-m);
    font-size: 13px;
    letter-spacing: 0.04em;
  }
  .nv-mobile-pilot {
    border: none !important;
  }

  .sec {
    padding: 72px 0;
  }
  .sec-sm {
    padding: 56px 0;
  }
  .sec-xs {
    padding: 40px 0;
  }
  .depth-hero {
    padding: 64px 0 48px;
  }

  .pain-grid,
  .wiifm-grid,
  .oc-grid,
  .engine-grid,
  .cap-grid,
  .ft-grid,
  .about-stats {
    grid-template-columns: 1fr;
  }
  .stat-grid {
    grid-template-columns: 1fr 1fr;
  }
  .hstats {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Tables/rows that visually break on small screens */
  .ba-row,
  .ba-header {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .ba-cell {
    padding: 10px 12px;
  }

  footer {
    flex-direction: column;
    gap: 24px;
    text-align: center;
    padding: 32px 24px 24px;
  }
  .ft-brand {
    text-align: center;
  }
  .ft-brand p {
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
  .ft-brand .ft-logo {
    margin-left: auto;
    margin-right: auto;
  }
  .ft-col-h,
  .ft-links {
    text-align: center;
  }
  .ft-links button {
    margin-left: auto;
    margin-right: auto;
  }

  .announce-strip {
    font-size: 10px;
    padding: 8px 12px;
  }
  .announce-strip span,
  .announce-strip a {
    font-size: 10px;
  }

  /* Any inline grid-template-columns collapses to 1 column on mobile */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* Force-hide the desktop CTA in the nav (mobile uses .nv-cta-mobile) */
  nav > .nv-cta {
    display: none !important;
  }
  /* Force the hero stats to a single column (class default is 4) */
  .hstats {
    grid-template-columns: 1fr !important;
  }
  .hs {
    border-right: none !important;
    border-bottom: 1px solid var(--bd);
  }
  .hs:last-child {
    border-bottom: none;
  }
}

/* ── LARGE PHONE (≤600px) ── */
@media (max-width: 600px) {
  .w {
    padding: 0 24px;
  }
  nav {
    padding: 0 22px;
  }
  .sec {
    padding: 48px 0;
  }
  .sec-sm {
    padding: 36px 0;
  }
  body {
    font-size: 15px;
  }
  h1.d {
    letter-spacing: -1.5px;
  }
  h2.d {
    letter-spacing: -1px;
  }
  .stat-grid,
  .ft-grid {
    grid-template-columns: 1fr;
  }
  .hero-btns {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-btns > * {
    width: 100%;
    text-align: center;
  }
  .pill {
    font-size: 10px;
  }
  .modal-card,
  .modal-content {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    padding: 24px 18px;
  }
}

/* ── SMALL PHONE (≤480px) ── */
@media (max-width: 480px) {
  .w {
    padding: 0 20px;
  }
  nav {
    padding: 0 18px;
    height: 56px;
  }
  .nv-links {
    top: 52px;
  }
  .nv-logo {
    font-size: 19px;
  }
  body {
    font-size: 14.5px;
    line-height: 1.55;
  }
  .sec {
    padding: 40px 0;
  }
  .announce-strip {
    padding: 6px 10px;
  }
  .pain-cell,
  .wc,
  .oc,
  .eng,
  .cap,
  .build-card {
    padding: 18px;
  }
}

/* ── LANDSCAPE PHONE / SHORT VIEWPORT ── */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .hero {
    min-height: auto;
    padding: 40px 0;
  }
  .depth-hero {
    padding: 40px 0 32px;
  }
  .nv-links {
    max-height: calc(100vh - 56px);
    overflow-y: auto;
  }
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ── Active nav state + mobile CTA visibility ── */
.nv-links button.active {
  color: var(--tx-hi);
  background: rgba(255, 255, 255, 0.04);
}
/* Mobile-only "Start a Pilot" item: hidden on desktop, shown when menu is open on mobile */
.nv-mobile-pilot {
  display: none;
}
@media (max-width: 768px) {
  .nv-mobile-pilot {
    display: block;
  }
}

/* Global horizontal-overflow guard — nothing should ever cause a horizontal scrollbar */
html,
body {
  max-width: 100vw;
  overflow-x: hidden;
}
img,
svg,
video,
iframe {
  max-width: 100%;
  height: auto;
}

/* ──────────────────────────────────────────────────────────
   DESIGN POLISH — Mobile-first refinements
────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Hero — tighten and refocus */
  .hero {
    padding-top: 56px;
    padding-bottom: 64px;
    min-height: auto;
  }
  .hero-grid-bg,
  .hero-glow {
    opacity: 0.5;
  }
  .hero .w {
    padding-top: 8px;
  }
  h1.d {
    font-size: clamp(28px, 7.2vw, 42px);
    line-height: 1.1;
    letter-spacing: -0.5px;
    margin-bottom: 24px;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: manual;
  }
  h1.d em,
  h2.d em,
  h3.d em {
    display: inline;
    word-spacing: 0;
  }
  h2.d {
    font-size: clamp(26px, 7vw, 38px);
    line-height: 1.12;
    letter-spacing: -0.5px;
    margin-bottom: 18px;
  }
  .lead {
    font-size: 15px !important;
    line-height: 1.65 !important;
    max-width: 100% !important;
    margin-bottom: 36px !important;
  }
  .pill {
    margin-bottom: 28px;
  }

  /* Hero CTAs — stack and full-width with proper hierarchy */
  .hero-btns {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 36px;
  }
  .hero-btns > button,
  .hero-btns > a {
    width: 100%;
    text-align: center;
    justify-content: center;
    padding: 14px 18px;
    font-size: 14px;
  }

  /* Hero stats — clean stacked card, label baseline aligned */
  .hstats {
    border-radius: var(--r2);
  }
  .hs {
    padding: 18px 22px;
    display: flex;
    align-items: baseline;
    gap: 14px;
  }
  .hs-n {
    flex-shrink: 0;
    font-size: 30px;
  }
  .hs-l {
    margin-top: 0;
    font-size: 11px;
    line-height: 1.4;
  }

  /* Section titles centered margin */
  .ey {
    margin-bottom: 14px;
    font-size: 9px;
  }
  .ey::before {
    width: 18px;
  }

  /* Section internal spacing */
  .build-card,
  .pain-cell,
  .wc,
  .oc,
  .eng,
  .cap {
    padding: 22px;
  }
  .build-card .bg-dk {
    width: 100%;
    text-align: center;
    margin-top: 12px;
  }

  /* Modals fit the screen */
  .modal,
  .modal.open {
    padding: 16px;
  }

  /* Reduce ridiculous inline gaps on collapsed grids */
  [style*="gap: 80px"],
  [style*="gap:80px"],
  [style*="gap: 60px"],
  [style*="gap:60px"] {
    gap: 32px !important;
  }

  /* Announce strip — keep visible but compact */
  .announce-strip {
    flex-wrap: wrap;
    text-align: center;
    line-height: 1.4;
  }
}

/* Small phone — tighten further */
@media (max-width: 480px) {
  .hero {
    padding-top: 24px;
  }
  h1.d {
    font-size: clamp(30px, 9vw, 40px);
    letter-spacing: -1px;
  }
  .pill {
    font-size: 9px;
    padding: 6px 12px;
  }
  .hs {
    padding: 16px 18px;
  }
  .hs-n {
    font-size: 26px;
  }
  /* Announce strip gets very tight */
  .announce-strip {
    font-size: 9.5px;
    padding: 6px 10px;
  }
  .announce-strip span,
  .announce-strip a {
    font-size: 9.5px;
    letter-spacing: 0.5px;
  }
}

/* ──────────────────────────────────────────────────────────
   PROCESS FLOW (5-step diagram) — keep readable at all widths
────────────────────────────────────────────────────────── */
.process-flow {
  width: 100%;
}
.process-flow svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}
@media (max-width: 1100px) {
  .process-flow {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px;
    padding: 8px 16px 20px;
    scrollbar-width: thin;
    scrollbar-color: var(--bd2) transparent;
  }
  .process-flow svg {
    width: 1100px;
    min-width: 1100px;
    max-width: none;
    height: auto;
  }
  .process-flow::-webkit-scrollbar {
    height: 6px;
  }
  .process-flow::-webkit-scrollbar-track {
    background: transparent;
  }
  .process-flow::-webkit-scrollbar-thumb {
    background: var(--bd2);
    border-radius: 3px;
  }
  /* Edge fade hint that there's more content */
  .process-flow {
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 16px,
      #000 calc(100% - 16px),
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 16px,
      #000 calc(100% - 16px),
      transparent 100%
    );
  }
}

/* ──────────────────────────────────────────────────────────
   SECTION SPACING — Single canonical scale, overrides everything
   Applied LAST so it wins against earlier definitions and
   defeats inline padding on sections/divs.
────────────────────────────────────────────────────────── */

/* Default (desktop ≥1280px) */
.sec,
section.sec,
section[style*="padding: 100px 0"],
section[style*="padding:100px 0"] {
  padding-top: 120px !important;
  padding-bottom: 120px !important;
}
.sec-sm,
section.sec-sm,
.cta-sec[style*="padding: 80px 0"],
.cta-sec[style*="padding:80px 0"] {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}
.sec-xs,
section.sec-xs {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}
.depth-hero,
section[style*="padding: 100px 0 72px"] {
  padding: 100px 0 64px !important;
}

@media (max-width: 1280px) {
  .sec,
  section.sec,
  section[style*="padding: 100px 0"],
  section[style*="padding:100px 0"] {
    padding-top: 96px !important;
    padding-bottom: 96px !important;
  }
  .sec-sm,
  section.sec-sm,
  .cta-sec[style*="padding: 80px 0"],
  .cta-sec[style*="padding:80px 0"] {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  .sec-xs,
  section.sec-xs {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  .depth-hero,
  section[style*="padding: 100px 0 72px"] {
    padding: 88px 0 56px !important;
  }
}

@media (max-width: 1024px) {
  .sec,
  section.sec,
  section[style*="padding: 100px 0"],
  section[style*="padding:100px 0"] {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
  .sec-sm,
  section.sec-sm,
  .cta-sec[style*="padding: 80px 0"],
  .cta-sec[style*="padding:80px 0"] {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  .sec-xs,
  section.sec-xs {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
  .depth-hero,
  section[style*="padding: 100px 0 72px"] {
    padding: 76px 0 48px !important;
  }
}

@media (max-width: 768px) {
  .sec,
  section.sec,
  section[style*="padding: 100px 0"],
  section[style*="padding:100px 0"] {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  .sec-sm,
  section.sec-sm,
  .cta-sec[style*="padding: 80px 0"],
  .cta-sec[style*="padding:80px 0"] {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .sec-xs,
  section.sec-xs {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
  .depth-hero,
  section[style*="padding: 100px 0 72px"] {
    padding: 56px 0 36px !important;
  }
}

@media (max-width: 480px) {
  .sec,
  section.sec,
  section[style*="padding: 100px 0"],
  section[style*="padding:100px 0"] {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }
  .sec-sm,
  section.sec-sm,
  .cta-sec[style*="padding: 80px 0"],
  .cta-sec[style*="padding:80px 0"] {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  .sec-xs,
  section.sec-xs {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  .depth-hero,
  section[style*="padding: 100px 0 72px"] {
    padding: 44px 0 28px !important;
  }
}

/* Override the deep CTA divs that have inline padding 120px 0 */
div[style*="padding: 120px 0"] {
  padding-top: 96px !important;
  padding-bottom: 96px !important;
}
@media (max-width: 1024px) {
  div[style*="padding: 120px 0"] {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }
}
@media (max-width: 768px) {
  div[style*="padding: 120px 0"] {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
}

/* ──────────────────────────────────────────────────────────
   ACCESSIBILITY — Stronger text contrast (AA / 4.5:1)
   --tx-mid was rgba(232,234,240,.55) — bumping for contrast
────────────────────────────────────────────────────────── */
:root {
  --tx-mid: rgba(232, 234, 240, 0.78);
  --tx-lo: rgba(232, 234, 240, 0.55);
}
.ba-label {
  color: rgba(232, 234, 240, 0.82) !important;
}
.ba-cell {
  color: rgba(232, 234, 240, 0.82);
}
.prob-eyebrow-bar {
  color: rgba(232, 234, 240, 0.82);
}
/* Orange .bp button: ensure white text passes contrast on --acc */
.bp,
.nv-cta {
  color: #fff;
  font-weight: 600;
}
/* Hover/focus visibility for keyboard users */
.nv-links button:focus-visible,
.bp:focus-visible,
.bg-dk:focus-visible,
.nv-cta:focus-visible,
.nv-toggle:focus-visible,
a:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* Pass WCAG AA on orange buttons (white-on-orange #e8622a is 3.3:1 — fails 4.5).
   Use dark text on orange instead — gives ~7:1 contrast. */
.bp,
.nv-cta,
.nv-mobile-pilot button,
.bp:hover,
.nv-cta:hover {
  color: var(--ink) !important;
  font-weight: 700 !important;
}
/* Underline mailto/external links in text blocks (don't rely on color alone) */
a[href^="mailto:"],
.cta-em a,
p a,
.lead a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Fix any remaining inline-styled muted text below contrast */
.pilot-split p[style*="color"] {
  color: rgba(232, 234, 240, 0.82) !important;
}