/* ===== styles.css ===== */
:root {
  /* Porcelain & Sage — locked brand system */
  --navy: #182a3d;        /* ink slate: headlines, dark panels */
  --navy-2: #22384f;      /* slate lift for gradients */
  --sky-dark: #3d566e;
  --sky: #dce4dc;         /* mist tertiary tint */
  --gold: #e2b04c;
  --cream: #f7f6f1;       /* porcelain page background */
  --text: #212a33;
  --muted: #64707d;
  --border: #e6e5dd;
  --shadow: 0 14px 38px rgba(24, 42, 61, 0.05);
  --accent: #8faf8b;      /* sage: buttons, fills, graphics */
  --accent-ink: #5f7d5c;  /* text-safe sage for small type on light */
  --accent-soft: #a9c4a6;
  --paper: #fdfdfb;
  --grey-card: #eef0ea;
  --font-head: 'Plus Jakarta Sans', Arial, sans-serif;
  --font-body: 'Plus Jakarta Sans', Arial, sans-serif;
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}

img {
  max-width: 100%;
}

.container {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
}

.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  background: rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(12px);
  z-index: 20;
}

.nav-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
}

.brand {
  text-decoration: none;
  color: var(--navy);
  font-weight: 800;
  font-size: 1rem;
}

.nav-cta,
.btn {
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.95rem 1.2rem;
}

.nav-cta {
  color: var(--navy);
}

.btn-primary {
  background: var(--navy);
  color: white;
}

.btn-primary .arrow {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  transition: transform 0.2s ease;
}

.btn-primary:hover .arrow {
  transform: translateX(3px);
}

.btn-secondary {
  color: var(--navy);
  background: var(--cream);
}

.hero {
  --forest: #14243a;
  --forest-2: #22384f;
  --lime: #8faf8b;
  display: flex;
  min-height: 100svh;
  padding: clamp(10px, 1.5vw, 18px);
  background: var(--cream);
}

.hero__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  padding: clamp(1.1rem, 2.4vw, 2.1rem) clamp(1.1rem, 2.6vw, 2.4rem);
  background:
    radial-gradient(58% 42% at 88% 100%, rgba(20, 36, 58, 0.52), transparent 72%),
    linear-gradient(105deg, rgba(20, 36, 58, 0.6) 0%, rgba(20, 36, 58, 0.28) 42%, rgba(20, 36, 58, 0) 72%),
    linear-gradient(180deg, rgba(20, 36, 58, 0.14) 0%, rgba(20, 36, 58, 0) 35%, rgba(20, 36, 58, 0.32) 100%),
    url("/assets/b2e0f12901674aac.jpg") center 30% / cover no-repeat;
  color: #fff;
}

.hero__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--forest-2);
  mix-blend-mode: color;
  opacity: 0.16;
}

.hero__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: overlay;
  opacity: 0.13;
}

.hero__card > * {
  position: relative;
  z-index: 1;
}

.hero__nav {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 3.5vw, 3rem);
}

.hero__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.hero__logo {
  height: 36px;
  width: auto;
  display: block;
}

.hero__logo--ink {
  display: none;
}

.hero__links {
  list-style: none;
  display: flex;
  gap: clamp(1rem, 2.4vw, 1.8rem);
  margin: 0;
  padding: 0;
}

.hero__links a {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.86rem;
  font-weight: 500;
  text-decoration: none;
}

.hero__links a:hover {
  color: #fff;
}

.hero__pill {
  margin-left: auto;
  background: #fff;
  color: var(--forest);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.72rem 1.4rem;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.hero__pill:hover {
  transform: translateY(-1px);
}

.hero__lead {
  margin-top: clamp(2.2rem, 6vh, 4.2rem);
}

.hero__headline {
  max-width: 19ch;
  margin: 0;
  font-weight: 500;
  font-size: clamp(2.25rem, 4.9vw, 3.9rem);
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: #fff;
}

.hero__headline em {
  font-style: italic;
  color: var(--accent-soft);
}

.cta-card h2 em {
  font-style: italic;
  color: var(--accent-soft);
}

.hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: clamp(1.4rem, 3vh, 2rem);
  background: var(--forest);
  color: #fff;
  border-radius: 999px;
  padding: 0.45rem 1.45rem 0.45rem 0.45rem;
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
  box-shadow: 0 10px 30px -12px rgba(10, 20, 36, 0.55);
}

.hero__btn .arr {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--lime);
  transition: transform 0.2s ease;
}

.hero__btn .arr svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--forest);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero__btn:hover .arr {
  transform: translateX(3px);
}

.hero__foot {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  padding-top: clamp(2rem, 5vh, 3.5rem);
}

.hero__tagline {
  max-width: 22rem;
  margin: 0 0 1.5rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
}

.hero__scroll {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
}

.hero__scroll:hover {
  color: #fff;
}

.hero__scroll svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero__partners {
  text-align: left;
}

.hero__partners-cap {
  display: block;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 0.6rem;
}

.hero__partners-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.4rem;
  font-weight: 700;
  font-size: 1.02rem;
  color: #fff;
  white-space: nowrap;
}

.hero__panel {
  background: #fff;
  border-radius: 28px;
  padding: 1.8rem 1.6rem;
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.28);
  min-height: 420px;
}

.hero__panel__head {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 1.6rem;
}

.hero__panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

.hero__panel__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.05rem;
  border-radius: 18px;
  background: #f8f8f8;
  color: var(--navy);
  font-weight: 700;
  letter-spacing: 0.01em;
  font-size: 0.95rem;
}

.hero__panel__item::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(20, 33, 61, 0.14);
}

.hero__panel__item--active {
  border: 1px solid #7be0a6;
  background: rgba(123, 224, 166, 0.12);
}

.hero__panel__item--active::before {
  background: #7be0a6;
}

.hero__sub {
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(1.02rem, 1.4vw, 1.14rem);
  line-height: 1.6;
  margin: 1.2rem 0 0;
  max-width: 34rem;
}

.hero__rev__txt {
  color: rgba(255, 255, 255, 0.9);
}

.hero__rev__txt b {
  color: #fff;
}

.hero__rev__go {
  background: rgba(255, 255, 255, 0.12);
}

.hero__rev:hover .hero__rev__go {
  background: rgba(255, 255, 255, 0.18);
}

.hero__logos {
  margin-top: 1.6rem;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.78);
}

.case-rail {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  padding-bottom: clamp(1.3rem, 2.4vw, 1.9rem);
  margin-bottom: clamp(1.5rem, 2.8vw, 2.2rem);
  border-bottom: 1px solid var(--border);
}

.case-rail__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  box-shadow: 0 12px 26px -16px rgba(18, 30, 58, 0.6);
}

.case-rail__tag .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7be0a6;
}

.case-rail__proof {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.34rem 0.85rem 0.34rem 0.4rem;
  box-shadow: 0 10px 24px -18px rgba(18, 30, 58, 0.4);
}

.case-rail__avs {
  display: flex;
}

.case-rail__avs img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  margin-left: -9px;
  border: 2px solid #fff;
}

.case-rail__avs img:first-child {
  margin-left: 0;
}

.case-rail__rev {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--text);
  white-space: nowrap;
}

.case-rail__rev .stars {
  color: var(--gold);
  font-weight: 700;
}

.case-rail__file {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
  border: 1px solid #d6dee8;
  border-radius: 999px;
  padding: 0.42rem 0.85rem;
  background: rgba(234, 239, 247, 0.55);
}

.hero__wm {
  position: absolute;
  top: clamp(4.5rem, 11vw, 8.5rem);
  right: -2%;
  z-index: 0;
  font-weight: 800;
  font-size: clamp(7rem, 19vw, 16.5rem);
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: rgba(20, 33, 61, 0.06);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  column-gap: clamp(1.3rem, 2.8vw, 2.4rem);
  row-gap: clamp(1rem, 2vw, 1.5rem);
  align-items: start;
  margin-top: clamp(1.2rem, 2.2vw, 1.8rem);
}

.hero__intro {
  position: relative;
  z-index: 1;
  max-width: 40rem;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 1rem;
}

.hero__eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.hero__title {
  font-size: clamp(2.05rem, 4.4vw, 3.45rem);
  line-height: 1.06;
  letter-spacing: -0.026em;
  margin: 0 0 1rem;
  max-width: 13ch;
  color: var(--navy);
}

.hero__sub {
  color: var(--text);
  font-size: clamp(1rem, 1.4vw, 1.14rem);
  line-height: 1.7;
  margin: 0 0 1.7rem;
  max-width: 33rem;
}

.hero__cta {
  margin-top: 1rem;
}

..hero__rev {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.4rem;
  padding: 0.95rem 1.1rem;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(20, 33, 61, 0.08);
  border-radius: 999px;
  box-shadow: 0 22px 40px -24px rgba(18, 30, 58, 0.33);
  text-decoration: none;
  color: var(--text);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hero__rev:hover {
  transform: translateY(-1px);
  box-shadow: 0 24px 48px -26px rgba(18, 30, 58, 0.35);
}

.hero__rev__avs {
  display: flex;
  align-items: center;
}

.hero__rev__avs img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  margin-left: -10px;
  border: 2px solid #fff;
  box-shadow: 0 3px 8px -3px rgba(18, 30, 58, 0.45);
}

.hero__rev__avs img:first-child {
  margin-left: 0;
}

.hero__rev__txt {
  font-size: 0.88rem;
  line-height: 1.3;
}

.hero__rev__txt b {
  color: var(--navy);
}

.hero__rev__go {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: rgba(20, 33, 61, 0.07);
}

.hero__rev__go svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: var(--sky-dark);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero__verify {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  max-width: 24rem;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(20, 33, 61, 0.08);
  border-radius: 24px;
  padding: 1rem 1.15rem;
  box-shadow: 0 26px 66px -42px rgba(20, 33, 61, 0.25);
}

.hero__verify span {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: var(--text);
}

.hero__verify .ic {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  flex: 0 0 auto;
  background: rgba(20, 33, 61, 0.08);
}

.hero__verify .ic svg {
  width: 16px;
  height: 16px;
  stroke: var(--navy);
  stroke-width: 2.2;
  fill: none;
}

.stage {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  min-height: clamp(498px, 44vw, 588px);
}

.stage::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: -6%;
  top: -6%;
  width: 84%;
  height: 118%;
  background: radial-gradient(circle at 44% 42%, rgba(20, 33, 61, 0.16), transparent 72%);
  filter: blur(12px);
  pointer-events: none;
}

.docs {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.6;
}

.doc {
  position: absolute;
  background: #fbf7ee;
  border: 1px solid #e7e0d1;
  border-radius: 5px;
  box-shadow: 0 28px 54px -30px rgba(18, 30, 58, 0.45);
  padding: 13px 15px;
  overflow: hidden;
}

.doc__h {
  display: block;
  font-weight: 700;
  font-size: 0.46rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #b6ae9b;
  margin-bottom: 9px;
}

.doc__row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}

.lab {
  height: 5px;
  border-radius: 3px;
  background: #e5dfcf;
  flex: 0 0 28%;
}

.doc__bar {
  height: 9px;
  border-radius: 2px;
  background: #222a40;
  opacity: 0.9;
}

.w1 { width: 46%; }
.w2 { width: 62%; }
.w3 { width: 34%; }

.doc--report {
  width: 44%;
  top: -14px;
  right: 3%;
  transform: rotate(4deg);
}

.evidence {
  position: absolute;
  left: 0;
  top: 4%;
  z-index: 3;
  width: 64%;
  background: linear-gradient(165deg, #193258 0%, #0a1630 100%);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 16px;
  padding: 11px;
  box-shadow: 0 56px 108px -44px rgba(10, 21, 48, 0.76), inset 0 0 0 1px rgba(255,255,255,0.04);
}

.hvid {
  position: relative;
  aspect-ratio: 1.34;
  border-radius: 11px;
  overflow: hidden;
  background: linear-gradient(150deg, #14274f, #0a1530);
  box-shadow: 0 18px 40px -22px rgba(0,0,0,0.6);
}

.hvid__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  border: none;
  background: linear-gradient(180deg, rgba(10, 21, 48, 0.06) 0%, rgba(10, 21, 48, 0.5) 100%);
}

.pbtn {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 16px 36px -10px rgba(0,0,0,0.55);
  border: 0;
  cursor: pointer;
}

.pbtn svg {
  width: 26px;
  height: 26px;
  fill: var(--navy);
}

.hvid__id {
  position: absolute;
  left: 11px;
  bottom: 11px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  padding: 0.48rem 0.8rem;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(10, 21, 48, 0.04), rgba(10, 21, 48, 0.7));
  backdrop-filter: blur(3px);
  border-left: 3px solid var(--accent);
}

.hvid__id b {
  font-weight: 700;
  color: #fff;
  font-size: 0.86rem;
  line-height: 1.12;
}

.hvid__id span {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.78);
  margin-top: 1px;
}

.evidence__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.65rem 0.3rem 0.15rem;
}

.evidence__meta .m {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  color: rgba(255,255,255,0.8);
}

.evidence__meta .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7be0a6;
}

.evidence__meta .dur {
  font-size: 0.66rem;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.02em;
}

.qnote {
  position: absolute;
  left: 24%;
  bottom: 9%;
  z-index: 6;
  width: 34%;
  min-width: 188px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 0.95rem 1.1rem 0.9rem;
  box-shadow: 0 28px 52px -20px rgba(16,34,82,.5);
}

.qnote__lab {
  display: block;
  font-weight: 700;
  font-size: 0.52rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.qnote q {
  font-style: italic;
  font-size: 0.96rem;
  color: var(--navy);
  line-height: 1.34;
}

.filesheet {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 4;
  width: 40%;
  min-width: 240px;
  background: #fbf7ee;
  border: 1px solid #e7e0d1;
  border-radius: 8px;
  padding: clamp(1rem,1.3vw,1.25rem) clamp(1rem,1.3vw,1.2rem) clamp(1.05rem,1.4vw,1.3rem);
  box-shadow: 0 36px 66px -28px rgba(16,34,82,.5), 6px 8px 0 -2px #fbf7ee, 6px 8px 0 -1px #e7e0d1, 12px 15px 0 -3px #fbf7ee, 12px 15px 0 -2px #e7e0d1;
}

.filesheet__tab {
  position: absolute;
  top: -18px;
  left: 16px;
  background: linear-gradient(120deg,#1a2f58,#14274f);
  color: #fff;
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 0.42rem 0.8rem;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 -3px 12px -5px rgba(16,34,82,.5);
}

.filesheet__client {
  display:flex;
  align-items:center;
  gap:.55rem;
  margin:.15rem 0 .75rem;
}

.filesheet__client .ph {
  width:32px;
  height:32px;
  border-radius:50%;
  flex:0 0 auto;
  background: linear-gradient(150deg,var(--accent),var(--navy));
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:700;
  font-size:.82rem;
}

.filesheet__client b {
  display:block;
  font-weight:700;
  color:var(--navy);
  font-size:.86rem;
  line-height:1.12;
}

.filesheet__client span {
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  font-size:.68rem;
  color:var(--muted);
}

.filesheet__client span svg {
  width:10px;
  height:10px;
  fill:none;
  stroke:var(--accent);
  stroke-width:3;
}

.dotsep {
  border-top:1px dotted #cfc7b6;
  margin:.15rem 0 .7rem;
}

.frow {
  display:flex;
  align-items:baseline;
  gap:.55rem;
  margin-bottom:.5rem;
}

.frow .dt {
  font-weight:700;
  font-size:.52rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  flex:0 0 32%;
}

.frow .dd {
  font-size:.76rem;
  color:var(--text);
  line-height:1.3;
}

@media (max-width: 920px) {
  .hero__links {
    display: none;
  }

  .hero__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.6rem;
  }
}

/* Stacked hero: text on porcelain, photo as its own card */
@media (max-width: 760px) {
  .hero {
    min-height: auto;
    padding: 12px 14px 0;
  }

  .hero__card {
    background: none;
    color: var(--navy);
    padding: 0.6rem 0.1rem 0;
    border-radius: 0;
    overflow: visible;
  }

  .hero__card::before,
  .hero__card::after {
    display: none;
  }

  .hero__brand {
    color: var(--navy);
  }

  .hero__logo--light {
    display: none;
  }

  .hero__logo--ink {
    display: block;
    height: 32px;
  }

  .hero__pill {
    background: var(--navy);
    color: #fff;
  }

  .hero__lead {
    margin-top: 2.2rem;
  }

  .hero__headline {
    color: var(--navy);
  }

  .hero .hero__subline {
    color: var(--muted);
    font-size: 0.95rem;
    margin: 0.7rem 0 0;
  }

  .hero .hero__soft {
    color: var(--muted);
    text-align: center;
  }

  .hero__scroll {
    color: rgba(255, 255, 255, 0.85);
  }

  .hero__foot {
    display: none;
  }

  .hero__foot-l {
    display: block;
  }

  .hero__tagline {
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.9rem;
    max-width: 21rem;
    margin-bottom: 0.9rem;
  }

  .hero__headline {
    font-size: clamp(2.3rem, 10vw, 2.8rem);
    line-height: 1.07;
    letter-spacing: -0.025em;
  }

  .hero .hero__headline em {
    color: var(--accent-ink);
  }

  .hero__btn {
    width: 100%;
    justify-content: center;
    margin-top: 0.9rem;
  }

  /* The soft-pull line stays on mobile. It sits directly under the button on
     the one viewport paid traffic actually lands on, and it is the line that
     removes the flinch before the tap. */
  .hero .hero__soft {
    display: block;
  }

  .hero .hero__grev {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin: 0.85rem 0 0;
  }

  .hero .hero__grev svg {
    width: 17px;
    height: 17px;
  }

  .hero .hero__grev .stars {
    color: #fbbc05;
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    line-height: 1;
  }

  .hero .hero__grev .t {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--navy);
  }

  .section {
    padding: 3.4rem 0;
  }

  .stat {
    flex-direction: row;
    align-items: baseline;
    gap: 1.1rem;
    padding-left: 0;
    padding-top: 1.1rem;
    border-left: 0;
    border-top: 1px solid var(--border);
  }

  .stat__n {
  white-space: nowrap;
    font-size: 1.9rem;
    min-width: 4.3rem;
  }

  .stat__n::after {
    display: none;
  }

  .stat-band {
    padding: 1.9rem 0 2.1rem;
  }

  .fee-panel {
    border-radius: 22px;
    padding: 1.7rem 1.4rem;
  }

  .cta-card {
    border-radius: 22px;
    padding: 1.6rem 1.3rem 1.8rem;
  }

  .cta-side {
    width: 100%;
    text-align: left;
  }

  .btn-tangerine {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 560px) {
  .hero__headline {
    font-size: clamp(2rem, 8.4vw, 2.4rem);
    line-height: 1.1;
  }

  /* "Reserve una llamada" is 73% longer than "Book a call". The nav links are
     already hidden by here, so it is the pill and the logo sharing the row —
     keep the pill on one line and let it shed size before it pushes. */
  .hero__pill {
    padding: 0.6rem 1.1rem;
    font-size: 0.8rem;
    white-space: nowrap;
    flex: 0 0 auto;
  }

  .hero__brand { min-width: 0; flex: 0 1 auto; }
  .hero__brand img { max-width: 100%; }

@media (max-width: 380px) {
  .hero__pill { font-size: 0.74rem; padding: 0.55rem 0.85rem; }
}

  .hero__tagline {
    margin-bottom: 1.1rem;
  }

  .hero__partners-row {
    gap: 1rem;
    font-size: 0.94rem;
  }
}

.kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

h1,
h2,
h3 {
  line-height: 1.08;
  margin: 0 0 0.8rem;
}

h1 {
  font-size: clamp(2.2rem, 4vw, 3.3rem);
  color: var(--navy);
}

h2,
.section-title {
  font-size: clamp(1.9rem, 3.3vw, 2.9rem);
  color: var(--navy);
  font-weight: 600;
  letter-spacing: -0.028em;
  /* Even out the rag. Without this, "Cards charge interest on your interest.
     A fixed loan counts down." strands the "A" at the end of line two. */
  text-wrap: balance;
}

.section-intro {
  max-width: 44rem;
}

.card h3 {
  font-weight: 600;
}

.hero-subhead,
.section-copy,
.split-copy p,
.how-card p,
.info-card li,
.faq-list p,
.cta-card p {
  color: var(--muted);
}

.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.soft-pull {
  margin-top: 1rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.hero-card,
.card,
.faq-list details,
.cta-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--shadow);
}

.hero-card {
  padding: 1.6rem;
}

.hero-card-top {
  display: inline-block;
  background: var(--gold);
  color: var(--navy);
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 0.8rem;
}

.hero-card ul,
.info-card ul {
  padding-left: 1.1rem;
  margin: 0 0 1.2rem;
}

.trust-bar {
  background: var(--navy);
  padding: 1rem 0;
}

.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
  color: white;
  font-weight: 600;
}

.trust-strip > div {
  padding: 0.8rem 1rem;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  text-align: center;
  font-size: 0.95rem;
}

.section {
  padding: clamp(4.5rem, 8vw, 6rem) 0;
}

.section-light {
  background: var(--cream);
}

.section-alt {
  background: var(--paper);
}

.section-intro {
  margin-bottom: 2rem;
}

.card-grid,
.split-grid {
  display: grid;
  gap: 1rem;
}

.three-up {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.two-up {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.how-card,
.info-card,
.split-card {
  padding: 1.3rem;
}

.step-no {
  display: inline-block;
  color: var(--navy);
  font-weight: 800;
  margin-bottom: 0.75rem;
}

.split-grid {
  grid-template-columns: 1.15fr 0.85fr;
  align-items: start;
}

.info-card {
  background: #ecf1eb;
  border-color: #d6dfd5;
}

.info-card.alt {
  background: var(--cream);
  border-color: var(--border);
}

.faq-list {
  display: grid;
  gap: 0;
  max-width: 56rem;
}

.faq-list details {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  border-top: 1px solid var(--border);
  padding: 1.5rem 0.2rem;
}

.faq-list details:last-child {
  border-bottom: 1px solid var(--border);
}

.faq-list summary {
  list-style: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  color: var(--navy);
  letter-spacing: -0.01em;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1;
  color: var(--accent-ink);
  transition: transform 0.2s ease;
}

.faq-list details[open] summary::after {
  transform: rotate(45deg);
}

.faq-list details p {
  margin: 0.9rem 0 0.2rem;
  max-width: 60ch;
  line-height: 1.7;
}

.faq-split {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.faq-lede {
  max-width: 26rem;
  margin: 1.1rem 0 1.8rem;
  color: var(--muted);
  line-height: 1.65;
}

.faq-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  padding: 0.85rem 1.5rem;
  border: 1.5px solid var(--navy);
  border-radius: 999px;
  color: var(--navy);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.btn-ghost:hover {
  background: var(--navy);
  color: #fff;
}

.faq-pills {
  gap: 0.85rem;
  max-width: none;
}

.faq-pills details.fp {
  border: 0;
  border-radius: 20px;
  padding: 1.25rem 1.5rem;
  transition: border-radius 0.2s ease;
}

.faq-pills details.fp:last-child {
  border-bottom: 0;
}

.faq-pills details.fp summary {
  font-weight: 600;
  align-items: center;
}

.faq-pills details.fp summary::after {
  display: none;
}

.fp .tgl {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  color: var(--navy);
  box-shadow: 0 4px 12px -6px rgba(24, 42, 61, 0.3);
}

.fp .tgl::before {
  content: "+";
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1;
}

.fp[open] .tgl::before {
  content: "\2212";
}

.fp p {
  max-width: 54ch;
}

.faq-pills .fp--slate {
  background: #d9e1ea;
}

.faq-pills .fp--stone {
  background: #ece9de;
}

.faq-pills .fp--sagemist {
  background: #e6eee4;
}

.faq-pills .fp--sage {
  background: #a9c4a6;
}

.faq-pills .fp--mist {
  background: #dce4dc;
}

.fp--slate summary,
.fp--stone summary,
.fp--sagemist summary,
.fp--sage summary,
.fp--mist summary {
  color: var(--navy);
}

.fp--slate p,
.fp--stone p,
.fp--sagemist p,
.fp--sage p,
.fp--mist p {
  color: #37424e;
}

.faq-pills .fp--ink {
  background: var(--navy);
}

.fp--ink summary {
  color: #fff;
}

.fp--ink p {
  color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 980px) {
  .faq-split {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.faq-list summary {
  cursor: pointer;
  font-weight: 600;
}

.final-cta {
  padding-top: 1rem;
}

.cta-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #f2f1ea;
  border: 1px solid #e8e6db;
  border-radius: 28px;
  padding: clamp(2.2rem, 4.5vw, 3.5rem);
}

.cta-card::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(42% 48% at 24% 30%, rgba(34, 56, 79, 0.22), transparent 68%),
    radial-gradient(40% 52% at 74% 78%, rgba(143, 175, 139, 0.34), transparent 66%),
    radial-gradient(30% 38% at 88% 18%, rgba(143, 175, 139, 0.16), transparent 70%);
  filter: blur(24px);
  animation: aurora-light 18s ease-in-out infinite alternate;
}

.cta-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  mix-blend-mode: overlay;
  opacity: 0.55;
}

@keyframes aurora-light {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(4%, -5%, 0) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .cta-card::before {
    animation: none;
  }
}

.cta-card__content {
  position: relative;
  z-index: 1;
  max-width: 34rem;
}

.cta-card__content .btn-tangerine {
  margin-top: 1.5rem;
}

.cta-figure {
  position: absolute;
  right: clamp(2rem, 6vw, 5.5rem);
  bottom: 0;
  height: 108%;
  width: auto;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 24px 40px rgba(6, 14, 26, 0.4));
}

/* Dark panels: near-monochrome buttons, sage reduced to one accent point */
.fee-panel .btn-tangerine {
  background: #fdfdfb;
  color: var(--navy);
}

.fee-panel .btn-tangerine .arr {
  background: var(--accent);
}

.fee-panel .btn-tangerine .arr svg {
  stroke: var(--navy);
}

.cta-card .btn-tangerine {
  background: var(--navy);
  color: #fff;
}

.cta-card .btn-tangerine .arr {
  background: var(--accent);
}

.cta-card .btn-tangerine .arr svg {
  stroke: var(--navy);
}

.cta-card h2 em {
  color: var(--accent-ink);
}

@media (max-width: 980px) {
  .cta-card {
    display: flex;
    flex-direction: column;
  }

  .cta-card__content {
    max-width: none;
    text-align: center;
  }

  .cta-figure {
    position: relative;
    z-index: 1;
    display: block;
    height: auto;
    width: min(68%, 300px);
    margin: 1.3rem 0 0 auto;
    filter: none;
  }
}

.cta-card h2 {
  color: var(--navy);
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.cta-card p {
  color: var(--muted);
  max-width: 36rem;
}

.cta-card .cta-soft {
  color: var(--muted);
}

.site-footer {
  padding: 2rem 0 3rem;
  border-top: 1px solid var(--border);
  background: var(--cream);
}

.footer-wrap {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.blk-team-spotlight {
  background: linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%);
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  overflow: hidden;
}

.blk-team-spotlight .tsp-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}

.blk-team-spotlight .tsp-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
}

.blk-team-spotlight .tsp-headL {
  max-width: 42rem;
}

.blk-team-spotlight .tsp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 1rem;
}

.blk-team-spotlight .tsp-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.blk-team-spotlight .tsp-title {
  font-weight: 600;
  color: var(--text);
  font-size: clamp(1.85rem, 3.6vw, 2.7rem);
  line-height: 1.07;
  letter-spacing: -0.035em;
  margin: 0;
}

.blk-team-spotlight .tsp-title .em {
  font-style: italic;
  font-weight: 700;
  color: var(--accent-ink);
}

.blk-team-spotlight .tsp-sub {
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0.9rem 0 0;
  max-width: 34rem;
}

.blk-team-spotlight .tsp-navs {
  display: flex;
  gap: 0.6rem;
}

.blk-team-spotlight .tsp-nav {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: #fff;
  color: var(--navy);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.blk-team-spotlight .tsp-nav:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  transform: translateY(-2px);
}

.blk-team-spotlight .tsp-nav svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.blk-team-spotlight .tsp-viewport {
  overflow: hidden;
  padding: 96px 20px;
  margin: -96px -20px;
}

.blk-team-spotlight .tsp-track {
  display: flex;
  gap: 10px;
  transition: transform 0.6s ease;
  will-change: transform;
}

.blk-team-spotlight .tsp-card {
  flex: 0 0 50px;
  position: relative;
  height: clamp(360px, 52vw, 470px);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  background: var(--grey-card);
  box-shadow: 0 16px 38px -24px rgba(20, 26, 36, 0.4);
  transition: flex-basis 0.6s ease, box-shadow 0.6s ease;
}

.blk-team-spotlight .tsp-photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(150deg, #e2e9df, #c8d5c4 55%, #a9bfa5);
  filter: grayscale(1) contrast(0.95) brightness(0.99);
  transition: filter 0.6s ease;
}

/* Absolute inset:0 rather than width/height 100% — a percentage height inside
   a centred grid resolves differently across engines, and on iOS it left the
   sage backing plate showing above the photo. */
.blk-team-spotlight .tsp-photo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.blk-team-spotlight .tsp-card.is-active .tsp-photo {
  filter: none;
}

.blk-team-spotlight .tsp-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(20, 26, 36, 0.07);
  pointer-events: none;
}

.blk-team-spotlight .tsp-card.is-active {
  box-shadow: 0 40px 74px -30px rgba(20, 26, 36, 0.55);
  cursor: default;
  z-index: 2;
}

.blk-team-spotlight .tsp-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.5rem 1.4rem 1.3rem;
  white-space: nowrap;
  overflow: hidden;
  background: linear-gradient(to top, rgba(12, 16, 24, 0.94) 6%, rgba(12, 16, 24, 0.5) 52%, rgba(12, 16, 24, 0) 100%);
  opacity: 0;
  transition: opacity 0.4s ease 0.18s;
}

.blk-team-spotlight .tsp-card.is-active .tsp-meta {
  opacity: 1;
}

.blk-team-spotlight .tsp-role {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 0.35rem;
}

.blk-team-spotlight .tsp-nm {
  display: block;
  font-weight: 700;
  color: #fff;
  font-size: 1.35rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.blk-team-spotlight .tsp-foot {
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}

.blk-team-spotlight .tsp-dots {
  display: flex;
  gap: 7px;
}

.blk-team-spotlight .tsp-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.25s ease;
}

.blk-team-spotlight .tsp-dot.on {
  background: var(--accent);
  width: 22px;
  border-radius: 5px;
}

.stp {
  position: relative;
  padding: 4.25rem 0 5rem;
  background: linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%);
}

.stp__wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}

.stp__head {
  max-width: 42rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* ============================================================
   How it works — sticky brief on the left, a rail of steps on the
   right. Scale does the work: oversized numerals, one sage thread.
   ============================================================ */
.stp {
  position: relative;
  background: var(--paper);
  padding: clamp(4.5rem, 9vw, 7.5rem) 0;
}

.stp__wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}

.stp__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.stp__aside {
  position: sticky;
  top: clamp(4rem, 16vh, 8rem);
}

.stp__title {
  margin: 0;
  max-width: 15ch;
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--navy);
}

.stp__title .em { font-style: italic; }

.stp__sub {
  margin: 1.1rem 0 0;
  max-width: 34ch;
  font-size: 1rem;
  line-height: 1.68;
  color: var(--muted);
}

.stp__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  margin-top: clamp(1.8rem, 3.5vw, 2.6rem);
}

.stp__cta p {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
}

/* --- the rail --- */
.stp__list {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--border);
}

/* fills to the reading line; --p is written on scroll */
.stp__list.is-live::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  width: 1px;
  height: var(--p, 0px);
  background: var(--accent);
}

.stp__row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: clamp(1.1rem, 2.4vw, 2.1rem);
  padding: clamp(1.9rem, 3.6vw, 2.9rem) 0 clamp(1.9rem, 3.6vw, 2.9rem)
           clamp(1.5rem, 3vw, 2.4rem);
}

.stp__row + .stp__row { border-top: 1px solid var(--border); }

/* the node on the rail */
.stp__row::before {
  content: "";
  position: absolute;
  left: -4px;
  top: calc(clamp(1.9rem, 3.6vw, 2.9rem) + 0.85rem);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--border);
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

.stp__list.is-live .stp__row.is-on::before {
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 0 5px rgba(143, 175, 139, 0.16);
}

.stp__n {
  font-size: clamp(2.3rem, 4.2vw, 3.5rem);
  font-weight: 600;
  line-height: 0.82;
  letter-spacing: -0.05em;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
  transition: color 0.5s ease;
}

.stp__list.is-live .stp__n { color: #dfe4da; }
.stp__list.is-live .stp__row.is-on .stp__n { color: var(--accent-ink); }

.stp__t {
  margin: 0;
  font-size: clamp(1.2rem, 1.9vw, 1.55rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.028em;
  color: var(--navy);
}

.stp__d {
  margin: 0.7rem 0 0;
  max-width: 34rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--muted);
}

@media (max-width: 900px) {
  /* aside dissolves so the action can sit after the steps */
  .stp__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .stp__aside { display: contents; }

  .stp__title { order: 1; max-width: 18ch; }
  .stp__sub { order: 2; max-width: 44ch; }
  .stp__list { order: 3; margin-top: clamp(2.2rem, 6vw, 3rem); }
  .stp__cta { order: 4; margin-top: clamp(2rem, 5vw, 2.6rem); }

  .stp__row {
    gap: 1rem;
    padding-left: 1.3rem;
    padding-top: 1.6rem;
    padding-bottom: 1.6rem;
  }

  .stp__row::before { top: calc(1.6rem + 0.6rem); }

  .stp__n { font-size: 2rem; }
  .stp__d { font-size: 0.96rem; margin-top: 0.5rem; }
}

@media (max-width: 420px) {
  .stp__n { font-size: 1.7rem; }
  .stp__row { gap: 0.85rem; padding-left: 1.1rem; }
}

@media (max-width: 980px) {
  .hero-shell,
  .split-grid,
  .two-up {
    grid-template-columns: 1fr;
  }

  .three-up {
    grid-template-columns: 1fr;
  }

  .edit-list,
  .rule-grid,
  .rule-grid--3 {
    grid-template-columns: 1fr;
  }

  .uc-grid {
    grid-template-columns: 1fr;
  }

  .uc-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
  }

  .uc-card {
    min-height: 0;
  }

  .uc-card--hl {
    border-top-right-radius: 72px;
  }

  .fee-panel__grid {
    grid-template-columns: 1fr;
  }

  .trust-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .hero-sxm {
    padding-top: 3rem;
  }

  .nav-wrap,
  .footer-wrap,
  .cta-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-actions {
    flex-direction: column;
  }

  .trust-strip {
    grid-template-columns: 1fr;
  }

  .blk-team-spotlight .tsp-nm {
    font-size: 1.18rem;
  }

  .blk-team-spotlight .tsp-meta {
    padding: 1.2rem 1.1rem 1.1rem;
  }
}

.hero__subline {
  max-width: 33rem;
  margin: 1.1rem 0 0;
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
}

.hero__soft {
  margin: 0.85rem 0 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.75);
}

.hero__grev {
  display: none;
}

.shape-card h3 {
  margin-bottom: 1.1rem;
}

.viz {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
  margin-bottom: 1.4rem;
}

.viz__side {
  background: #f4f4ef;
  border-radius: 12px;
  padding: 0.95rem 1rem 0.85rem;
}

.viz__side--loan {
  background: #ecf1ea;
}

.viz__cap {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.75rem;
}

.viz__bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 92px;
}

.viz__bars span {
  flex: 1;
  border-radius: 3px 3px 1px 1px;
  height: var(--h);
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.viz.on .viz__bars span {
  transform: scaleY(1);
}

.viz__bars--card span {
  background: #b9c0c9;
}

.viz.on .viz__bars--card span {
  animation: vizWobble 3.2s ease-in-out infinite alternate;
}

.viz__bars--loan span {
  background: var(--accent);
}

.viz__bars--loan span.last {
  background: var(--accent-ink);
}

.viz__bars span:nth-child(2) { transition-delay: 0.06s; }
.viz__bars span:nth-child(3) { transition-delay: 0.12s; }
.viz__bars span:nth-child(4) { transition-delay: 0.18s; }
.viz__bars span:nth-child(5) { transition-delay: 0.24s; }
.viz__bars span:nth-child(6) { transition-delay: 0.3s; }
.viz__bars span:nth-child(7) { transition-delay: 0.36s; }
.viz__bars span:nth-child(8) { transition-delay: 0.42s; }

@keyframes vizWobble {
  from { transform: scaleY(1); }
  to { transform: scaleY(1.06); }
}

.viz__note {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.72rem;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .viz__bars span {
    transform: scaleY(1);
    transition: none;
  }

  .viz.on .viz__bars--card span {
    animation: none;
  }
}

@media (max-width: 560px) {
  .viz {
    grid-template-columns: 1fr;
  }
}

.shape-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}

.shape-cols h4 {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.7rem;
}

.shape-cols ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.shape-cols li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.92rem;
  color: var(--text);
  line-height: 1.45;
}

.shape-cols li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.stat-band {
  background: var(--paper);
  border-bottom: 1px solid var(--border);
  padding: clamp(2.2rem, 4vw, 3.2rem) 0;
}

.stat-band__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding-left: clamp(1.2rem, 2.5vw, 2rem);
  border-left: 1px solid var(--border);
}

.stat__n {
  white-space: nowrap;
  font-size: clamp(2.2rem, 3.6vw, 3.2rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--navy);
}

.stat__n::after {
  content: "";
  display: block;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  margin-top: 0.7rem;
  background: var(--accent);
}

.stat__l {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 24rem;
}

@media (max-width: 760px) {
  .stat-band__grid {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1.1rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.kicker--light {
  color: rgba(255, 255, 255, 0.55);
}

.edit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(2rem, 5vw, 4rem);
}

.edit-list li {
  display: flex;
  gap: clamp(1.1rem, 2vw, 1.8rem);
  padding: clamp(1.6rem, 2.6vw, 2.2rem) 0;
  border-top: 1px solid var(--border);
}

.edit-list .n {
  flex: 0 0 auto;
  padding-top: 0.3rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--accent-ink);
}

.edit-list h3 {
  font-size: 1.18rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 0.45rem;
  letter-spacing: -0.01em;
}

.edit-list p {
  margin: 0;
  color: var(--muted);
  font-size: 0.97rem;
  line-height: 1.65;
}

.manifesto {
  background: var(--paper);
  text-align: center;
}

.manifesto__wrap {
  max-width: 54rem;
}

.manifesto .kicker {
  justify-content: center;
  margin-bottom: 1.6rem;
}

.mf {
  margin: 0;
  font-size: clamp(1.55rem, 3.2vw, 2.6rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--navy);
}

.mf__soft {
  color: #9aa3ad;
}

.mf em {
  font-style: italic;
  color: var(--accent-ink);
}

.mf .chip {
  display: inline-grid;
  place-items: center;
  width: 1.1em;
  height: 1.1em;
  border-radius: 0.32em;
  vertical-align: -0.18em;
  margin: 0 0.08em;
}

.mf .chip svg {
  width: 0.6em;
  height: 0.6em;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chip--check {
  background: #d9e1ea;
}

.chip--check svg {
  stroke: var(--navy);
}

.chip--bank {
  background: #e6eee4;
}

.chip--bank svg {
  stroke: var(--accent-ink);
}

.fee-panel {
  position: relative;
  overflow: hidden;
  background: linear-gradient(168deg, #1d3049 0%, #16243c 52%, #101b2f 100%);
  border-radius: 28px;
  padding: clamp(2rem, 4.5vw, 3.75rem);
  color: #fff;
}



.fee-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  mix-blend-mode: overlay;
  opacity: 0.16;
}

@keyframes aurora {
  0% { background-position: 0% 100%, 100% 0%; }
  100% { background-position: 40% 60%, 60% 35%; }
}

@media (prefers-reduced-motion: reduce) {
  .fee-panel::before,
  .cta-card::before {
    animation: none;
  }
}

.fee-panel__grid {
  position: relative;
  z-index: 1;
}

.fee-panel__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.fee-panel__copy h2 {
  color: #fff;
  font-size: clamp(1.8rem, 3.2vw, 2.7rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 1.3rem;
}

.fee-panel__copy p {
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.7;
  margin: 0 0 1rem;
  max-width: 34rem;
}

.receipt {
  position: relative;
  max-width: 24rem;
  margin-top: 1.7rem;
  background: #fdfdfb;
  border-radius: 14px;
  padding: 1.5rem 1.4rem 1.2rem;
  color: var(--text);
  transform: rotate(-1.2deg);
  box-shadow: 0 30px 60px -25px rgba(6, 14, 26, 0.55);
}

.receipt__tag {
  position: absolute;
  top: -12px;
  left: 18px;
  background: var(--accent);
  color: var(--navy);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}

.receipt__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px dashed #d8d5c9;
  font-size: 0.92rem;
}

.receipt__row span {
  color: var(--muted);
}

.receipt__row b {
  font-weight: 700;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.receipt__row--zero b {
  color: var(--accent-ink);
}

.receipt__foot {
  display: block;
  margin-top: 0.8rem;
  font-size: 0.72rem;
  color: var(--muted);
}

.fee-panel__side h3 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0.4rem 0 0.4rem;
}

.fee-panel__side ul {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
}

.fee-panel__side li {
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.92);
}

.fee-panel__urgency {
  margin: 0 0 1rem;
  font-weight: 600;
  font-size: 1.02rem;
  color: #fff;
  letter-spacing: -0.01em;
}

.fee-panel__soft {
  margin: 0.75rem 0 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
}

.btn-tangerine {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--accent);
  color: var(--navy);
  border-radius: 999px;
  padding: 0.45rem 1.45rem 0.45rem 0.45rem;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}

.btn-tangerine .arr {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--navy);
  transition: transform 0.2s ease;
}

.btn-tangerine .arr svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn-tangerine:hover .arr {
  transform: translateX(3px);
}

.uc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.uc-head .section-intro {
  margin-bottom: 0;
}

.uc-note {
  max-width: 21rem;
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--muted);
}

.uc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.uc-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(24, 42, 61, 0.05);
  border-radius: 12px;
  padding: 1.1rem 1.5rem 1.5rem;
  min-height: 0;
}

.uc-card--hl .ic {
  background: var(--navy);
}

.uc-card--hl .ic svg {
  stroke: #fff;
}

.uc-photo {
  position: relative;
  border-radius: 12px;
  border-top-right-radius: 64px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  margin-bottom: 1.9rem;
  isolation: isolate;
}

.uc-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
  filter: saturate(0.78) contrast(1.05) brightness(1.01);
}

.uc-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: #22384f;
  mix-blend-mode: color;
  opacity: 0.2;
}

.uc-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  mix-blend-mode: overlay;
  opacity: 0.22;
}

.uc-card .ic {
  z-index: 3;
}

.uc-card .ic {
  position: absolute;
  left: 12px;
  bottom: -14px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 24px -10px rgba(24, 42, 61, 0.35);
}

.uc-card .ic svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--navy);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.uc-tag {
  display: block;
  margin-top: auto;
  margin-bottom: 0.4rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.uc-card h3 {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.008em;
  margin: 0 0 0.5rem;
}

.uc-card p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--muted);
}

.uc-card .go {
  margin-top: 1.7rem;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.uc-card .go svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: var(--navy);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.uc-card .go:hover {
  transform: translateY(-2px);
  background: var(--navy);
  border-color: var(--navy);
}

.uc-card .go:hover svg {
  stroke: #fff;
}

.uc-card--hl {
  background: #e9efe7;
  border-color: transparent;
  border-top-right-radius: 110px;
}

.uc-card--hl .go {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
}

.uc-card--hl .go svg {
  stroke: #fff;
}

.rule-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(2rem, 5vw, 4rem);
}

.rule-grid--3 {
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(1.6rem, 3.5vw, 3rem);
}

.rule-item {
  border-top: 1px solid var(--border);
  padding: clamp(1.5rem, 2.4vw, 2rem) 0;
}

.rule-item h3 {
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}

.rule-item p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.65;
}

.cta-side {
  flex: 0 0 auto;
  text-align: center;
}

.cta-soft {
  margin: 0.7rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.footer-disc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem 3rem;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.6;
}

.footer-logo {
  grid-column: 1 / -1;
  height: 34px;
  width: auto;
  justify-self: start;
  margin-bottom: 0.4rem;
}

.footer-col h4 {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 0.5rem;
}

.footer-col p {
  margin: 0;
}

@media (max-width: 760px) {
  .footer-disc {
    grid-template-columns: 1fr;
    gap: 1.3rem;
  }
}

.footer-links {
  margin-top: 0.6rem;
}

.footer-links a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}

@media (max-width: 560px) {
  .shape-cols {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blk-team-spotlight .tsp-track,
  .blk-team-spotlight .tsp-card,
  .blk-team-spotlight .tsp-photo,
  .blk-team-spotlight .tsp-meta {
    transition: none;
  }
}

/* ===== Services: full-bleed image cards ===== */
.uc-card,
.uc-card--hl {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 3 / 3.9;
  min-height: 0;
  padding: 1.5rem 1.4rem;
  border: 0;
  border-radius: 18px;
  background: var(--navy-2);
  color: #fff;
}

.uc-card--hl {
  border-top-right-radius: 110px;
}

.uc-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.8) contrast(1.05);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.uc-card:hover .uc-bg {
  transform: scale(1.05);
}

.uc-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(13, 23, 38, 0.92) 0%, rgba(13, 23, 38, 0.48) 38%, rgba(16, 28, 46, 0.16) 66%, rgba(16, 28, 46, 0.08) 100%);
}

.uc-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 150px 150px;
  mix-blend-mode: overlay;
  opacity: 0.26;
}

.uc-num {
  position: relative;
  z-index: 2;
  margin-bottom: auto;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.8);
}

.uc-body {
  position: relative;
  z-index: 2;
  padding-right: 3rem;
}

.uc-body h3 {
  color: #fff;
  font-size: 1.22rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  margin: 0 0 0.4rem;
}

.uc-body p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0;
  max-width: 32ch;
}

.uc-card .go,
.uc-card--hl .go {
  position: absolute;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 2;
  margin: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  display: grid;
  place-items: center;
}

.uc-card .go svg,
.uc-card--hl .go svg {
  stroke: #fff;
}

.uc-card .go:hover,
.uc-card--hl .go:hover {
  background: var(--accent);
  border-color: var(--accent);
}

.uc-card .go:hover svg {
  stroke: var(--navy);
}

.uc-card--hl .go {
  background: var(--accent);
  border-color: var(--accent);
}

.uc-card--hl .go svg {
  stroke: var(--navy);
}

@media (prefers-reduced-motion: reduce) {
  .uc-bg {
    transition: none;
  }
}


/* Mobile hero stage: notched photo card, ticker pill */
.hero__stage {
  display: none;
}

@media (max-width: 760px) {
  .hero__stage {
    position: relative;
    display: block;
    margin-top: 0.7rem;
    aspect-ratio: 1 / 0.9;
  }

  .hero__stage-ph {
    position: absolute;
    inset: 0;
  }

  .hero__stage-ph img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    -webkit-mask-image: radial-gradient(circle at calc(100% - 31px) calc(100% - 31px), transparent 36px, #000 37px);
    mask-image: radial-gradient(circle at calc(100% - 31px) calc(100% - 31px), transparent 36px, #000 37px);
  }

  /* The go button sits bottom-right (46px + 8px), so the ticker has to stop
     clear of it rather than run under it. It used to be nowrap with no right
     bound, which was survivable in English and is not in Spanish — the longest
     string here went from 27 characters to 47, and it hung off the image. */
  .hero__ticker {
    position: absolute;
    left: calc(1.5% + 16px);
    right: calc(1.5% + 62px);
    bottom: 16px;
    z-index: 2;
    display: flex;
    font-size: clamp(0.82rem, 3.4vw, 1.08rem);
    line-height: 1.25;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.01em;
    white-space: normal;
    text-wrap: balance;
    text-shadow: 0 1px 3px rgba(10, 14, 20, 0.55), 0 4px 16px rgba(10, 14, 20, 0.45);
  }

  .hero__ticker-in {
    display: inline-grid;
  }

  .hero__ticker-in > span {
    grid-area: 1 / 1;
    opacity: 0;
    animation: pillTick 9s linear infinite;
  }

  .hero__ticker-in > span:first-child { animation-name: pillTickFirst; }
  .hero__ticker-in > span:nth-child(2) { animation-delay: 4.5s; }

  .hero__stage-go {
    position: absolute;
    right: 8px;
    bottom: 8px;
    top: auto;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--navy);
  }

  .hero__stage-go svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}

/* ===== Steps journey map ===== */
@media (max-width: 980px) {
  .uc-grid,
  .rule-grid,
  .rule-grid--3,
  .edit-list,
  .fee-panel__grid,
  .faq-split {
    grid-template-columns: 1fr;
  }

  .uc-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

/* Sticky card deck: each use-case card slides up over the last */
@media (max-width: 760px) {
  .uc-grid {
    display: block;
  }

  .uc-card {
    position: sticky;
    margin-bottom: 1.1rem;
    border: 1px solid var(--border);
    box-shadow: 0 -14px 30px -18px rgba(24, 42, 61, 0.28);
  }

  .uc-card:nth-child(1) { top: 84px; }
  .uc-card:nth-child(2) { top: 102px; }
  .uc-card:nth-child(3) { top: 120px; }

  .uc-card--hl {
    border-color: transparent;
    border-top-right-radius: 84px;
  }

  .receipt {
    max-width: none;
    transform: rotate(0deg);
  }
}


@keyframes pillTick {
  0% { opacity: 0; transform: translateY(0.4em); }
  6% { opacity: 1; transform: translateY(0); }
  44% { opacity: 1; transform: translateY(0); }
  50% { opacity: 0; transform: translateY(-0.4em); }
  100% { opacity: 0; }
}

@keyframes pillTickFirst {
  0% { opacity: 1; transform: translateY(0); }
  44% { opacity: 1; transform: translateY(0); }
  50% { opacity: 0; transform: translateY(-0.4em); }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__ticker-in > span {
    animation: none;
  }

  .hero__ticker-in > span:first-child {
    opacity: 1;
  }
}

/* ===== Scroll reveal ===== */
.rv {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.rv-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
}

/* ===== Comparison matrix ===== */
.cmp {
  position: relative;
  z-index: 0;
  margin-top: 0.5rem;
}

.cmp__head,
.cmp__row {
  display: grid;
  grid-template-columns: 1.05fr 1.2fr 1fr 1fr;
  gap: 1.2rem;
  align-items: center;
  padding: 1.15rem 1.4rem;
}

.cmp__row { border-top: 1px solid var(--border); }

.cmp__head {
  padding-top: 0.75rem;
  padding-bottom: 0.85rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.cmp__row:last-child { border-bottom: 1px solid var(--border); }

.cmp__row span { font-size: 0.95rem; color: var(--muted); }

.cmp__l {
  font-weight: 600;
  color: var(--navy) !important;
}

/* highlighted column */
.cmp__us { position: relative; color: var(--navy) !important; }

.cmp__us b {
  font-weight: 600;
  color: var(--navy);
}

.cmp__head .cmp__us {
  color: var(--accent-ink) !important;
  font-weight: 700;
}

.cmp__us::before {
  content: "";
  position: absolute;
  inset: -1.15rem -1rem;
  z-index: -1;
  background: #e9efe7;
}

.cmp__head .cmp__us::before {
  inset: -0.75rem -1rem -0.85rem;
  border-radius: 14px 14px 0 0;
}

.cmp__row:last-child .cmp__us::before { border-radius: 0 0 14px 14px; }

.cmp__row .cmp__us b::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 0.5rem;
  vertical-align: -2px;
  border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23182a3d' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l5 5L20 7'/%3E%3C/svg%3E") center / 9px no-repeat;
}

.cmp__no { color: #a8aca3 !important; }

/* per-cell source labels: desktop uses the header instead */
.cmp__row i { display: none; }

.cmp__foot {
  margin: 1.4rem 0 0;
  font-size: 0.88rem;
  color: var(--muted);
  max-width: 46rem;
}

@media (max-width: 900px) {
  .cmp { display: grid; gap: 0.8rem; }
  .cmp__head { display: none; }

  .cmp__row {
    display: block;
    padding: 1.15rem 1.2rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #fff;
  }

  .cmp__row:last-child { border-bottom: 1px solid var(--border); }

  .cmp__l {
    display: block;
    margin-bottom: 0.8rem;
    font-size: 0.68rem !important;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted) !important;
  }

  .cmp__row span:not(.cmp__l) {
    display: block;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    font-size: 0.92rem;
    line-height: 1.35;
  }

  .cmp__row span:not(.cmp__l) + span:not(.cmp__l) { margin-top: 0.3rem; }

  .cmp__row i {
    display: block;
    font-style: normal;
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #a8aca3;
    margin-bottom: 0.2rem;
  }

  .cmp__us { background: #e9efe7; }
  .cmp__us::before { display: none; }
  .cmp__us i { color: var(--accent-ink); }
  .cmp__us b { display: block; font-weight: 700; }
}

/* ============================================================
   RESTORED BLOCK — chart balance, wayfinding, statement artifact
   ============================================================ */

/* ---------- Chart section balance ---------- */
#process { position: relative; z-index: 2; }

#process .split-grid {
  grid-template-columns: 0.88fr 1.12fr;
  align-items: center;
}

#process .split-copy { max-width: 30rem; }

@media (max-width: 980px) { #process .split-grid { grid-template-columns: 1fr; } }

/* ---------- Compass rose ---------- */
.rose {
  position: absolute;
  right: -108px;
  bottom: -140px;
  width: 430px;
  height: 430px;
  z-index: 0;
  color: #fff;
  opacity: 0.085;
  pointer-events: none;
  animation: roseTurn 150s linear infinite;
}

.rose .rose-n { color: var(--accent); }
.rose text { font-family: var(--font-body); }

@keyframes roseTurn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rose { animation: none; } }

.manifesto__wrap { position: relative; }

.rose--mf {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(560px, 88vw);
  height: min(560px, 88vw);
  transform: translate(-50%, -50%);
  right: auto;
  bottom: auto;
  color: var(--navy);
  opacity: 0.055;
  animation: roseTurnC 150s linear infinite;
}

.rose--mf .rose-n { color: var(--accent-ink); }

@keyframes roseTurnC {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) { .rose--mf { animation: none; } }

.manifesto .mf,
.manifesto .mf__mark,
.manifesto .mf__sig { position: relative; z-index: 1; }


/* ---------- Statement artifact ---------- */
.stmt-stack { position: relative; }

.stmt {
  position: relative;
  margin: 0;
  background: #fdfdfb;
  border-radius: 4px;
  padding: 1.9rem 1.9rem 1.6rem;
  transform: rotate(-1.1deg);
  box-shadow: 0 30px 60px -34px rgba(24, 42, 61, 0.42), 0 1px 0 rgba(24, 42, 61, 0.05);
}

.stmt__tag {
  position: absolute;
  top: -11px;
  left: 22px;
  background: var(--navy);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.32rem 0.7rem;
  border-radius: 3px;
}

.stmt__hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.9rem;
  margin-bottom: 0.4rem;
  border-bottom: 1.5px solid var(--navy);
  font-weight: 700;
  color: var(--navy);
  font-size: 0.95rem;
}

.stmt__apr { font-weight: 500; font-size: 0.7rem; letter-spacing: 0.04em; color: var(--muted); }

.stmt__row {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.72rem 0;
  border-bottom: 1px dotted #d9d5c8;
  font-size: 0.94rem;
  color: var(--muted);
}

.stmt__row b { font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; }
.stmt__row b.neg { color: var(--accent-ink); }
.stmt__row--hit { color: var(--navy); font-weight: 600; }
.stmt__row--hit b { font-size: 1.06rem; }

.stmt__row--tot {
  border-bottom: 0;
  border-top: 1.5px solid var(--navy);
  margin-top: 0.35rem;
  padding-top: 0.85rem;
  color: var(--navy);
  font-weight: 700;
}

.stmt__row--tot b { font-size: 1.1rem; }

.stmt__amt { position: relative; display: inline-block; }

.stmt__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 108px;
  height: 48px;
  transform: translate(-50%, -50%);
  overflow: visible;
  pointer-events: none;
}

.stmt__ring path {
  fill: none;
  stroke: var(--accent-ink);
  vector-effect: non-scaling-stroke;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  opacity: 0.85;
}

.rv-in .stmt__ring path { animation: inkRing 1.1s cubic-bezier(0.55, 0, 0.35, 1) 0.35s forwards; }

@keyframes inkRing { to { stroke-dashoffset: 0; } }

.stmt__note {
  position: relative;
  margin: 1.5rem 0 0 3.4rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--navy);
  font-weight: 600;
}

.stmt__note em { font-style: italic; font-weight: 500; color: var(--accent-ink); }

.stmt__arrow {
  position: absolute;
  left: -3.5rem;
  top: -0.9rem;
  width: 58px;
  height: 42px;
  overflow: visible;
}

.stmt__arrow path {
  fill: none;
  stroke: var(--accent-ink);
  vector-effect: non-scaling-stroke;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  opacity: 0.8;
}

.rv-in .stmt__arrow path { animation: inkRing 0.7s ease 1.25s forwards; }



@media (prefers-reduced-motion: reduce) {
  .stmt__ring path, .stmt__arrow path { stroke-dashoffset: 0; animation: none; }
  .payoff__line { stroke-dashoffset: 0; transition: none; }
}

@media (max-width: 640px) {
  .stmt { padding: 1.5rem 1.3rem 1.3rem; transform: none; }
  .stmt__note { margin-left: 3rem; font-size: 0.9rem; }
  .payoff { transform: none; margin-top: 1.6rem; }
}

html, body { overflow-x: clip; }

/* Manifesto: the two halves each own a line */
.mf__soft,
.mf__rest { display: block; }



/* ---------- Fee panel: cleaner information layout ---------- */
.fee-panel__grid {
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.fee-lede {
  max-width: 32rem;
  margin: 0 0 1.9rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.65;
}

.fee-list {
  list-style: none;
  margin: 0 0 2.1rem;
  padding: 0;
  display: grid;
  gap: 0.72rem;
}

.fee-list li {
  position: relative;
  padding-left: 1.9rem;
  font-size: 0.96rem;
  line-height: 1.45;
  color: rgba(255,255,255,0.9);
}

.fee-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(143, 175, 139, 0.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238faf8b' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l5 5L20 7'/%3E%3C/svg%3E") center / 10px no-repeat;
}

.fee-act { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }

.fee-panel .fee-panel__soft {
  margin: 0;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.5);
}

.fee-panel__side { display: flex; justify-content: center; }

.fee-panel .receipt {
  max-width: none;
  width: 100%;
  margin-top: 0;
  transform: rotate(-1.4deg);
  padding: 1.7rem 1.6rem 1.4rem;
}

.fee-panel .receipt__row { padding: 0.72rem 0; font-size: 0.96rem; }
.fee-panel .receipt__row b { font-size: 1.02rem; }

@media (max-width: 980px) {
  .fee-panel__grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .fee-panel .receipt { transform: none; }
  .fee-panel__side { justify-content: flex-start; }
}

/* ============================================================
   Fee band — full-bleed editorial ledger (no card, no chrome)
   ============================================================ */
.fee-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #16243c;
  color: #fff;
  padding: clamp(4.5rem, 9vw, 7.5rem) 0;
}

.fee-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  mix-blend-mode: overlay;
  opacity: 0.14;
}

.fee-band .rose {
  right: -140px;
  bottom: -180px;
  width: 520px;
  height: 520px;
  opacity: 0.06;
}

.fee-band__in { position: relative; z-index: 1; }

.fee-band__head {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: end;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.fee-band__head h2 {
  margin: 0;
  max-width: none;
  color: #fff;
  font-size: clamp(2.1rem, 4.4vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 500;
}

.fee-band__head p {
  margin: 0;
  color: rgba(255,255,255,0.62);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 30rem;
}

.fee-band__head p b { color: #fff; font-weight: 600; }

/* the ledger */
.ledger { border-top: 1px solid rgba(255,255,255,0.16); }

/* amount control — the first row of the ledger */
.ledger__ctl {
  padding: clamp(1.2rem, 2.4vw, 1.7rem) 0 clamp(1.3rem, 2.6vw, 1.8rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ledger__ctl label {
  display: block;
  margin-bottom: 1.15rem;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.58);
}

.ledger__ctl label b {
  color: #fff;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

#amt {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  /* Fitts: 44px of grabbable strip over a 4px painted track. At 22px this was
     under the touch minimum, and without touch-action a slightly-off-axis drag
     was claimed by the page scroller — the thumb never moved, so the number
     never changed. That is the "slider doesn't work" report. */
  height: 44px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}

#amt:focus { outline: none; }

/* --p is the fill percentage, written by the script on every input event. */
#amt::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--accent) 0 var(--p, 21%),
    rgba(255, 255, 255, 0.16) var(--p, 21%) 100%
  );
}

#amt::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -10px; /* (track 4px - thumb 24px) / 2 */
  border: 0;
  border-radius: 50%;
  background: #fdfdfb;
  box-shadow: 0 0 0 4px rgba(143, 175, 139, 0.22), 0 4px 12px rgba(6, 14, 24, 0.45);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

#amt:hover::-webkit-slider-thumb { transform: scale(1.08); }

#amt:active::-webkit-slider-thumb {
  transform: scale(1.14);
  box-shadow: 0 0 0 7px rgba(143, 175, 139, 0.26), 0 4px 14px rgba(6, 14, 24, 0.5);
}

#amt:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(143, 175, 139, 0.85), 0 4px 12px rgba(6, 14, 24, 0.45);
}

#amt::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

#amt::-moz-range-progress {
  height: 4px;
  border-radius: 999px;
  background: var(--accent);
}

#amt::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: #fdfdfb;
  box-shadow: 0 0 0 4px rgba(143, 175, 139, 0.22), 0 4px 12px rgba(6, 14, 24, 0.45);
}

#amt:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px rgba(143, 175, 139, 0.85);
}

.ledger__scale {
  display: flex;
  justify-content: space-between;
  margin-top: 0.75rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
}

.ledger__scale i {
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  #amt::-webkit-slider-thumb { transition: none; }
}

.ledger__r {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1rem, 2vw, 1.5rem) 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.ledger__r span {
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.58);
}

.ledger__r span i {
  font-style: normal;
  margin-left: 0.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent);
}

.ledger__r b {
  white-space: nowrap;
  font-weight: 500;
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.ledger__r--zero b { color: var(--accent); }

.ledger__fn {
  margin: 1.1rem 0 0;
  font-size: 0.76rem;
  color: rgba(255,255,255,0.42);
}

/* terms, as a hairline row — no icons */
.fee-band__terms {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid rgba(255,255,255,0.16);
}

.fee-band__terms span {
  padding: 1.3rem 1.7rem 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: rgba(255,255,255,0.82);
  border-right: 1px solid rgba(255,255,255,0.1);
}

/* the outer edges align to the panel, the inner ones breathe off the rule */
.fee-band__terms span:first-child { padding-left: 0; }
.fee-band__terms span:last-child { padding-right: 0; border-right: 0; }

/* The 01-04 counter is gone. The page had four separate numbered sequences on
   it - bento, services, these terms, and the steps - and only the steps are an
   actual sequence. The rest were structure-cosplay. A sage rule does the
   marking here instead, without pretending to be an order. */
.fee-band__terms span::before {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  margin-bottom: 0.9rem;
  border-radius: 2px;
  background: var(--accent);
}

.fee-band__act {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.fee-band__act p {
  margin: 0;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.48);
}

.fee-band .btn-tangerine { background: #fdfdfb; color: var(--navy); }
.fee-band .btn-tangerine .arr { background: var(--accent); }
.fee-band .btn-tangerine .arr svg { stroke: var(--navy); }

@media (max-width: 900px) {
  .fee-band__head { grid-template-columns: 1fr; gap: 1.4rem; align-items: start; }
  .fee-band__terms { grid-template-columns: 1fr 1fr; }
  .fee-band__terms span {
    padding: 1.2rem 1.3rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .fee-band__terms span:nth-child(2n+1) { padding-left: 0; }
  .fee-band__terms span:nth-child(2n) { padding-right: 0; border-right: 0; }
  .fee-band__terms span:nth-last-child(-n+2) { border-bottom: 0; }
  .fee-band .rose { right: -180px; bottom: -220px; }
}

@media (max-width: 560px) {
  .ledger__r { gap: 1rem; }
  .ledger__r b {
  white-space: nowrap; font-size: 1.75rem; }
}


.states__list li {
  cursor: default;
  transition: color 0.25s ease;
}

.states__list li.is-hi { color: var(--accent-ink); }

.states__list li span { transition: transform 0.25s ease, background 0.25s ease; }

.states__list li.is-hi span {
  background: var(--accent-ink);
  color: #fff;
  transform: scale(1.12);
}



/* ============================================================
   CTA button — compact, no inner circle
   ============================================================ */
.btn-tangerine,
.hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.95rem 1.55rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  border: 0;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.btn-tangerine .ico,
.hero__btn .ico {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-tangerine:hover .ico,
.hero__btn:hover .ico { transform: translateX(4px); }

/* light contexts */
.btn-tangerine { background: var(--navy); color: #fff; }
.btn-tangerine:hover { background: #0f1b2e; }

/* dark contexts */
.fee-band .btn-tangerine { background: #fdfdfb; color: var(--navy); }
.fee-band .btn-tangerine:hover { background: #fff; }

/* hero */
.hero__btn { background: var(--forest); color: #fff; box-shadow: 0 10px 30px -12px rgba(10, 20, 36, 0.55); }
.hero__btn:hover { background: #0f1b2e; }

@media (max-width: 760px) {
  .hero__btn { width: 100%; justify-content: center; }
  .fee-band .btn-tangerine { width: 100%; justify-content: center; }
}

/* ============================================================
   COLOUR DISCIPLINE
   Solid deep sage = interactive, and nothing else.
   Light sage tint = data / highlighted value.
   Everything decorative reverts to ink or neutral.
   ============================================================ */

/* --- 1. Actions own the sage --- */
.btn-tangerine { background: var(--accent-ink); color: #fff; }
.btn-tangerine:hover { background: #526c4f; }

.hero__btn { background: var(--accent-ink); color: #fff; box-shadow: 0 10px 30px -12px rgba(30, 52, 28, 0.6); }
.hero__btn:hover { background: #526c4f; }

/* on the dark band, the lighter sage keeps contrast while staying the action colour */
.fee-band .btn-tangerine { background: var(--accent); color: #10203a; }
.fee-band .btn-tangerine:hover { background: #a3c39d; }

.hero__pill { background: var(--accent-ink); color: #fff; }

/* small round arrow buttons are interactive too */
.uc-card .go,
.uc-card--hl .go { background: var(--accent-ink); border-color: var(--accent-ink); }
.uc-card .go svg,
.uc-card--hl .go svg { stroke: #fff; }
.uc-card .go:hover,
.uc-card--hl .go:hover { background: #fff; border-color: #fff; }
.uc-card .go:hover svg { stroke: var(--accent-ink); }

.hero__stage-go { background: var(--accent-ink); }

/* --- 2. Decoration gives the colour back --- */
.hero__headline em { color: rgba(255, 255, 255, 0.72); }
.stp__title .em,
.blk-team-spotlight .tsp-title .em { color: var(--navy); }
.mf em { color: var(--navy); }

.faq-pills .fp--sage { background: #dfe4dc; }

.rose .rose-n,


.mf__mark { background: var(--border); }

/* --- 3. Data keeps a lighter tint, never the solid action colour --- */
.ledger__r--zero b { color: var(--accent); }

/* ---------- Hero: one action, one colour ---------- */
/* nav becomes secondary — navigation, not the offer */
.hero__pill {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(4px);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.hero__pill:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.7);
  transform: none;
}

/* the hero sits on a dark surface, so it follows the dark-surface rule:
   lighter sage + ink text reads brighter than deep sage on a photo */
.hero__btn {
  background: var(--accent);
  color: #16243c;
  box-shadow: 0 12px 32px -14px rgba(0, 0, 0, 0.6);
}

.hero__btn:hover { background: #a3c39d; }

/* mobile hero is on porcelain, not photo — deep sage is correct there */
@media (max-width: 760px) {
  .hero__pill {
    background: var(--accent-ink);
    color: #fff;
    border-color: transparent;
    backdrop-filter: none;
  }

  .hero__btn { background: var(--accent-ink); color: #fff; }
  .hero__btn:hover { background: #526c4f; }
}

@media (max-width: 760px) {
  /* nav is navigation, not the offer */
  .hero__pill {
    background: transparent;
    color: var(--navy);
    border: 1px solid rgba(24, 42, 61, 0.28);
  }

  .hero__pill:hover { background: rgba(24, 42, 61, 0.06); }

  /* decoration doesn't get the action colour */
  .hero .hero__headline em { color: var(--navy); }

  /* the single action */
  .hero__btn { background: var(--accent-ink); color: #fff; }
}

/* Hero photo corner button: a detail on the image, not a second offer.
   The labelled button below it is the action. */
.hero__stage-go {
  background: var(--navy);
}

.hero__stage-go svg { stroke: #fff; }

.hero__stage-go:hover { background: var(--accent-ink); }

/* ============================================================
   Refined rule:
   FILLED sage  = interactive (buttons, arrows)
   sage TYPE    = emphasis inside a headline — never mistaken for a button
   ============================================================ */
.hero__headline em { color: #a9c4a6; }
.stp__title .em,
.blk-team-spotlight .tsp-title .em { color: var(--accent-ink); }
.mf em { color: var(--accent-ink); }

@media (max-width: 760px) {
  .hero .hero__headline em { color: var(--accent-ink); }
}

/* FAQ: one action, with reassurance under it */
.faq-actions {
  display: block;
  margin-top: 1.9rem;
}

.faq-soft {
  margin: 0.85rem 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}

/* ==========================================================================
   Client stories — coverflow testimonial slider  (.vo)
   Cards all occupy the same grid cell (grid-area 1/1), so the stage height
   is set by the tallest card and no transform can affect layout.
   Position is expressed with translateX in % — percentages resolve against
   the element's own untransformed width, so scale() never compounds it.
   ========================================================================== */
.vo {
  position: relative;
  background: var(--cream);
  padding: clamp(4.5rem, 8vw, 6rem) 0 clamp(3rem, 5vw, 4rem);
}

.vo__head {
  text-align: center;
}

.vo__head .section-title {
  max-width: 22ch;
  margin-inline: auto;
}

.vo__sub {
  max-width: 44ch;
  margin: 0.9rem auto 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}

/* Stage clips the receding cards at the viewport edge — and keeps the page
   from ever scrolling sideways because of them. */
.vo__stage {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-top: clamp(2.2rem, 4vw, 3.2rem);
  padding: 14px 0 34px;
  touch-action: pan-y;
}

.vo__track {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: center;
  perspective: 1500px;
  perspective-origin: 50% 42%;
}

.vo__card {
  grid-area: 1 / 1;
  width: min(560px, 84vw);
  min-height: 250px;
  display: flex;
  flex-direction: column;
  padding: clamp(1.3rem, 3vw, 1.85rem);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 22px;
  text-align: left;
  cursor: pointer;
  backface-visibility: hidden;
  transform-origin: 50% 50%;
  transition:
    transform 0.62s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.42s ease,
    filter 0.42s ease,
    box-shadow 0.42s ease,
    background-color 0.42s ease,
    border-color 0.42s ease;
  will-change: transform, opacity;
}

/* Off-centre cards recede into a mist panel — no border, no shadow, so the
   only object that reads as "in front" is the one being spoken. */
.vo__card:not(.is-active) {
  background: var(--grey-card);
  border-color: transparent;
}

.vo__card.is-active {
  cursor: default;
  border-color: #dee2d7;
  box-shadow: 0 32px 64px -30px rgba(24, 42, 61, 0.3), 0 2px 0 rgba(24, 42, 61, 0.02);
}

/* --- card head --- */
.vo__top {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  padding-bottom: 1.05rem;
  border-bottom: 1px solid var(--border);
}

.vo__ava {
  position: relative;
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  background: var(--accent);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
}

.vo__ava img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vo__nm {
  color: var(--navy);
  font-size: 1.14rem;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.25;
}

.vo__mt {
  margin-top: 0.18rem;
  color: var(--muted);
  font-size: 0.855rem;
  line-height: 1.5;
}

.vo__stars {
  color: var(--accent-ink);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.vo__stars .dim {
  color: #c6ccc3;
}

/* --- the review itself --- */
.vo__body {
  margin-top: 1.15rem;
  color: var(--text);
  font-size: 1.01rem;
  line-height: 1.66;
}

/* --- thumbnail rail (the nav) --- */
.vo__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  padding: 0 1rem;
  margin-top: 0.25rem;
}

.vo__thumb {
  position: relative;
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 15px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  opacity: 0.5;
  filter: grayscale(1);
  transition: opacity 0.28s ease, filter 0.28s ease, transform 0.28s ease, box-shadow 0.28s ease;
}

.vo__thumb img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vo__thumb:hover {
  opacity: 0.8;
}

.vo__thumb.on {
  opacity: 1;
  filter: none;
  transform: translateY(-2px);
  box-shadow: 0 0 0 3px var(--cream), 0 0 0 5px var(--accent);
}

.vo__thumb:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 4px;
}

.vo__disc {
  width: min(52rem, calc(100% - 2rem));
  margin: clamp(1.9rem, 4vw, 2.6rem) auto 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.55;
}

@media (max-width: 760px) {
  .vo__card {
    width: min(560px, 86vw);
    min-height: 240px;
    border-radius: 20px;
  }

  .vo__ava {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    font-size: 0.94rem;
  }

  .vo__nm {
    font-size: 1.06rem;
  }

  .vo__body {
    font-size: 0.96rem;
  }

  .vo__thumb {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    font-size: 0.78rem;
  }
}

@media (max-width: 400px) {
  .vo__nav {
    gap: 0.45rem;
  }

  .vo__thumb {
    width: 42px;
    height: 42px;
    font-size: 0.74rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vo__card {
    transition: none;
  }
}

/* ==========================================================================
   DESIGN PASS — August 2026
   Fixes from the design review, kept in one block so they are easy to audit
   or revert. Each rule states the problem it solves.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Service cards — the numeral had no floor
   `.uc-num` is white at 0.8 over a gradient that is only 8% ink at the top of
   the card. On the home-improvement photo (a pale green wall) the "02"
   vanished completely. A short scrim behind the numeral fixes it without
   darkening the whole image.
   -------------------------------------------------------------------------- */
.uc-card::before {
  background:
    linear-gradient(to bottom, rgba(13, 23, 38, 0.42) 0%, rgba(13, 23, 38, 0.12) 16%, rgba(13, 23, 38, 0) 30%),
    linear-gradient(to top, rgba(13, 23, 38, 0.92) 0%, rgba(13, 23, 38, 0.48) 38%, rgba(16, 28, 46, 0.16) 66%, rgba(16, 28, 46, 0.08) 100%);
}

.uc-num {
  color: #fff;
  text-shadow: 0 1px 10px rgba(9, 16, 28, 0.55);
}

/* --------------------------------------------------------------------------
   2. Client stories — the shoulder cards were readable
   Off-centre cards sit behind the live one at 0.34 opacity with 2px of blur.
   At 390px that is two blocks of testimonial copy overlapping, which is the
   messiest moment on the page. Fading the *contents* leaves the paper shape
   doing its depth job while the text stops competing — and it costs nothing
   on the GPU, unlike raising the blur radius.
   -------------------------------------------------------------------------- */
.vo__card:not(.is-active) .vo__top,
.vo__card:not(.is-active) .vo__body {
  opacity: 0.3;
  transition: opacity 0.42s ease;
}

.vo__card.is-active .vo__top,
.vo__card.is-active .vo__body {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   3. A dark section in the back half
   From the steps rail to the footer, roughly 40% of the page, every section
   was cream or near-white. The navy fee band lands in the first half, so the
   page lost its spine exactly where attention thins out.
   The services block takes the ink treatment: its cards are photographs with
   their own dark overlays, so they gain separation on navy rather than lose
   it, and it sits at about two-thirds down — the right place for a break.
   -------------------------------------------------------------------------- */
.section-ink {
  position: relative;
  background: linear-gradient(168deg, var(--navy-2) 0%, var(--navy) 55%, #101b2f 100%);
}

.section-ink .section-title,
.section-ink h2 {
  color: #fff;
}

/* Scoped to the section's own intro copy. A bare `.section-ink p` has the same
   specificity as `.uc-body p` and, sitting later in the file, would quietly
   dim the copy inside the cards from 0.85 to 0.72. */
.section-ink .section-intro p {
  color: rgba(255, 255, 255, 0.72);
}

/* The mobile deck gives each card a light hairline so it separates from the
   cream page. On ink that border reads as a glow, so it flips to a dim one. */
@media (max-width: 760px) {
  .section-ink .uc-card {
    border-color: rgba(255, 255, 255, 0.1);
  }

  .section-ink .uc-card--hl {
    border-color: transparent;
  }
}

/* --------------------------------------------------------------------------
   4. Sticky call bar
   The page runs 9,500px on desktop and 11,500px on mobile, with CTAs at fixed
   points. The bar carries the offer's two load-bearing facts with it: $0
   upfront, soft pull only. It is hidden while the hero, the fee band, or the
   footer is on screen — see the observer in index.html — so it never doubles
   up with a CTA the reader can already see.
   -------------------------------------------------------------------------- */
.callbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  transform: translateY(100%);
  /* visibility, not [hidden]: it keeps the bar out of the accessibility tree
     and out of tab order while it is down, but it is delayed by the length of
     the slide so the exit animation still gets to run. */
  visibility: hidden;
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.34s;
  background: rgba(247, 246, 241, 0.93);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-top: 1px solid var(--border);
  box-shadow: 0 -18px 40px -30px rgba(24, 42, 61, 0.5);
}

.callbar.is-up {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}

.callbar__in {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0.7rem clamp(1.25rem, 4vw, 3rem);
  padding-bottom: max(0.7rem, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.callbar__note {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--muted);
}

.callbar__note b {
  font-weight: 700;
  color: var(--navy);
}

.callbar__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.72rem 1.35rem;
  border-radius: 999px;
  background: var(--accent-ink);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.callbar__btn:hover {
  background: #526f4f;
  transform: translateY(-1px);
}

.callbar__btn .ico {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* On a phone the button takes the width and the note sits under it, where it
   reads as the reassurance for the tap rather than a competing sentence. */
@media (max-width: 560px) {
  .callbar__in {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 0.5rem;
    padding-top: 0.6rem;
  }

  .callbar__btn {
    justify-content: center;
    padding: 0.85rem 1.35rem;
  }

  .callbar__note {
    text-align: center;
    font-size: 0.76rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .callbar {
    transition: none;
  }
}

/* ==========================================================================
   5. TWELVE MONTHS OF INTEREST — the ink spread
   Two revisions got here. The first stacked each $412 payment into interest
   and principal across twelve columns: every column the same height, and the
   only moving part shrinking month over month, so it read "nothing happens"
   and "this is getting better" — both the opposite of the point. The second
   plotted the running total, which climbs, but it sat on porcelain directly
   under the statement card's own sparkline: a graph under a graph.

   This one drops the sparkline upstairs and goes full-bleed ink. The rising
   line leaves the top-left of the frame empty, so the number lives there at
   display scale. The number is the graphic. The line is the evidence.
   ========================================================================== */
.pj {
  position: relative;
  overflow: hidden;
  /* extra headroom: the statement card from the section above hangs into
     the top-right of this panel */
  padding: clamp(4.5rem, 9vw, 9rem) 0 clamp(4rem, 7vw, 6rem);
  background: linear-gradient(168deg, var(--navy-2) 0%, var(--navy) 58%, #101b2f 100%);
  color: #fff;
}

.pj__lead {
  max-width: 40rem;
}

.pj__h {
  margin: 0;
  font-size: clamp(1.9rem, 3.3vw, 2.9rem);
  font-weight: 600;
  letter-spacing: -0.028em;
  color: #fff;
  text-wrap: balance;
}

.pj__lead p {
  margin: 0.9rem 0 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 1.02rem;
  line-height: 1.6;
}

.pj__fig {
  position: relative;
  margin: clamp(2.6rem, 5vw, 4rem) 0 0;
}

/* the display number, sitting in the void under the climb */
.pj__hero {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  max-width: 15ch;
  pointer-events: none;
}

.pj__hero b {
  display: block;
  /* A number has no sensible break point, so never let it find one. */
  white-space: nowrap;
  font-size: clamp(3.6rem, 11vw, 9rem);
  font-weight: 600;
  line-height: 0.86;
  letter-spacing: -0.045em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.pj__hero span {
  display: block;
  margin-top: 0.7rem;
  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
  color: rgba(255, 255, 255, 0.6);
}

.pj__plot {
  position: relative;
}

.pj__canvas {
  position: relative;
  height: clamp(230px, 30vw, 380px);
}

.pj__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.pj__area { fill: url(#pjFade); }

.pj__line {
  fill: none;
  stroke: var(--sky);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.pj__dot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: var(--sky);
  box-shadow: 0 0 0 3px var(--navy);
}

/* --- hover layer: crosshair + tooltip, no JS --- */
.pj__hits { position: absolute; inset: 0; }

/* Buttons, not spans. Hover alone meant the twelve figures on this chart were
   unreachable on a phone — no hover, no crosshair, no tooltip — and
   unreachable by keyboard, since a span takes no focus. Tapping focuses the
   button, which shows the tooltip; tapping elsewhere blurs it and hides it.
   No JS involved. */
.pj__hit {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--x);
  width: 9.09%;
  margin-left: -4.545%;
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.pj__hit:focus { outline: none; }

.pj__hit--last { margin-left: -9.09%; }

.pj__hit::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.28);
  opacity: 0;
  transition: opacity 0.12s ease;
}

.pj__hit::after {
  content: "";
  position: absolute;
  left: 50%;
  top: var(--y);
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--sky);
  box-shadow: 0 0 0 3px var(--navy);
  opacity: 0;
  transition: opacity 0.12s ease;
}

.pj__hit--last::before,
.pj__hit--last::after { left: 100%; }

.pj__hit:hover::before,
.pj__hit:hover::after,
.pj__hit:focus-visible::before,
.pj__hit:focus-visible::after,
.pj__hit:active::before,
.pj__hit:active::after { opacity: 1; }

.pj__tip {
  position: absolute;
  left: 50%;
  top: var(--y);
  transform: translate(-50%, -150%);
  padding: 0.45rem 0.7rem;
  border-radius: 8px;
  background: #fff;
  color: var(--navy);
  font-size: 0.72rem;
  font-style: normal;
  line-height: 1.3;
  white-space: nowrap;
  min-width: max-content;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

.pj__tip b {
  display: block;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pj__hit--last .pj__tip { left: 100%; transform: translate(-90%, -150%); }
.pj__hit:first-child .pj__tip { transform: translate(-24%, -150%); }
.pj__hit:hover .pj__tip,
.pj__hit:focus-visible .pj__tip,
.pj__hit:active .pj__tip { opacity: 1; }

/* On a touch screen the chart gives no sign it can be tapped, so say so. */
@media (hover: none) {
  .pj__plot::after {
    content: "Toque un punto para ver el detalle";
    display: block;
    margin-top: 0.5rem;
    font-size: 0.72rem;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
  }
}

/* endpoints of the x scale, not twelve tick marks */
.pj__months {
  position: relative;
  height: 1.4rem;
  margin-top: 0.7rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 0.6rem;
}

.pj__months span {
  position: absolute;
  white-space: nowrap;
  top: 0.6rem;
  left: var(--x);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

.pj__months span:last-child { left: auto; right: 0; }

/* the ledger row — same hairline language as the fee band's terms */
.pj__tally {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(2.6rem, 5vw, 3.8rem);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.pj__t {
  padding: 1.4rem 1.8rem 0 0;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.pj__t:last-child { border-right: 0; }
.pj__t:not(:first-child) { padding-left: 1.8rem; }

.pj__t span {
  display: block;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.5rem;
}

.pj__t b {
  white-space: nowrap;
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.pj__end {
  margin: clamp(2rem, 4vw, 2.8rem) 0 0;
  max-width: 46rem;
  font-size: clamp(1.05rem, 1.6vw, 1.24rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
}

.pj__end em {
  font-style: italic;
  color: var(--accent-soft);
}

.pj__note {
  margin: 1.6rem 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.38);
}

.pj__data {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 860px) {
  .pj__hero {
    position: static;
    margin-bottom: 1.6rem;
    max-width: none;
  }

  /* 11vw falls under the 3.6rem floor on a phone, so the number was locked at
     57.6px regardless of how narrow the screen got. Let it actually scale. */
  .pj__hero b { font-size: clamp(2.6rem, 14vw, 5rem); }
  .pj__hero span { max-width: 24ch; }

  .pj__canvas { height: 210px; }
  .pj__tally { grid-template-columns: 1fr; }

  .pj__t {
    padding: 1.1rem 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .pj__t:not(:first-child) { padding-left: 0; }
  .pj__t:last-child { border-bottom: 0; }
  .pj__t b { font-size: 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pj__hit::before,
  .pj__hit::after,
  .pj__tip { transition: none; }
}

/* --------------------------------------------------------------------------
   The statement, treated as an object
   With the sparkline gone the card is the only artifact in its section, so it
   gets to be one: bigger, tilted a little further, and overlapped by the
   headline instead of politely sharing a column with it.
   -------------------------------------------------------------------------- */
@media (min-width: 981px) {
  .stmt-spread {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  .stmt-spread .split-copy {
    position: relative;
    z-index: 2;
    max-width: 26rem;
  }

  /* Two rejected attempts before this one. Overlapping the copy put the
     card's shadow across live text. Bleeding it off the right edge clipped
     the dollar amounts, and the amounts are the entire artifact.
     What it does instead: hangs past the bottom of its own section and into
     the ink panel below. Nothing gets covered, nothing gets cut, and the
     card stops being an illustration in a column and becomes an object
     sitting on the page. */
  .stmt-spread {
    grid-template-columns: 0.92fr 1.08fr;
    column-gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }

  /* -13rem, not -7: the section's own 6rem bottom padding eats the first
     part of the pull, so anything under about -8rem never clears the edge. */
  .stmt-spread .stmt-stack {
    margin-bottom: -13rem;
  }

  .stmt-spread .split-copy {
    padding-top: 2.5rem;
  }

  .stmt-spread .stmt {
    transform: rotate(-1.6deg);
    padding: 2.4rem 2.4rem 2rem;
    box-shadow: 0 54px 90px -46px rgba(24, 42, 61, 0.55), 0 1px 0 rgba(24, 42, 61, 0.05);
  }

  .stmt-spread .split-copy .section-title {
    font-size: clamp(2.1rem, 3.7vw, 3.2rem);
  }
}

/* ==========================================================================
   6. ONE PHOTO GRADE
   The page ran three treatments: a warm full-colour hero, full-colour service
   cards under an ink scrim, and grayscale team portraits. Three treatments
   read as three brands. The rule now: situational photography (hero, service
   cards) shares one grade — pulled back off full saturation and warmed
   slightly toward the porcelain — and portraits stay grayscale as a separate,
   deliberate convention.
   ========================================================================== */
.hero__stage-ph img,
.uc-bg {
  filter: saturate(0.78) contrast(1.04) brightness(1.01) sepia(0.06);
}

/* The hero already sits under a heavy gradient; a touch less pull-back keeps
   the subject from going flat behind it. */
.hero__stage-ph img {
  filter: saturate(0.85) contrast(1.03) sepia(0.05);
}

.uc-card:hover .uc-bg {
  filter: saturate(0.9) contrast(1.04) brightness(1.02) sepia(0.04);
}