/* ============================================================
   Honest Mortgage — Advisors portal identity
   "Confident & insider." Deep navy, editorial, aspirational.
   Signature interactions: the "Now / Here" ledger toggle and
   the Four E's as a live, recomposing system.
   Loaded on careers.html on top of site.css.
   ============================================================ */

/* ============================================================
   THE LEDGER — "Where you are now" vs "Here", a flip toggle
   ============================================================ */
.ledger { background: var(--navy); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); position: relative; }
.ledger::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 84% 10%, rgba(126,181,227,0.14), transparent 50%); }
.ledger__head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(28px,3.4vw,40px) clamp(28px,3.4vw,44px) 0; flex-wrap: wrap; }
.ledger__title { color: #fff; font-weight: 800; font-size: clamp(22px,2.6vw,30px); letter-spacing: -0.02em; margin: 0; }
.ledger__toggle { display: inline-flex; background: rgba(245,239,230,0.08); border-radius: var(--radius-pill); padding: 5px; gap: 4px; }
.ledger__toggle button { font-family: var(--font-sans); font-size: 14px; font-weight: 700; color: var(--fg-on-dark-2); background: none; border: 0; border-radius: var(--radius-pill); padding: 10px 22px; cursor: pointer; transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.ledger__toggle button.on { background: var(--terracotta); color: #fff; }
.ledger__toggle button.on.is-now { background: rgba(245,239,230,0.16); color: #fff; }

.ledger__rows { position: relative; padding: clamp(20px,2.6vw,30px) clamp(28px,3.4vw,44px) clamp(28px,3.4vw,44px); }
.lrow2 { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; padding: 20px 0; border-bottom: 1px dotted rgba(245,239,230,0.18); }
.lrow2:last-child { border-bottom: 0; }
.lrow2__label { color: var(--fg-on-dark-2); font-size: 15px; font-weight: 500; }
.lrow2__value { display: flex; align-items: center; gap: 12px; justify-content: flex-end; text-align: right; }
.lrow2__value .v { font-weight: 800; font-size: clamp(17px,2vw,21px); letter-spacing: -0.01em; color: #fff; transition: color var(--dur) var(--ease), transform var(--dur) var(--ease); font-variant-numeric: tabular-nums; }
.lrow2__value .ic { width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; flex-shrink: 0; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.lrow2__value .ic svg { width: 16px; height: 16px; }
/* state: now (muted) vs here (terracotta/sky lift) */
.ledger[data-state="now"] .lrow2__value .v { color: #b9b0a2; }
.ledger[data-state="now"] .lrow2__value .ic { background: rgba(245,239,230,0.1); color: #b9b0a2; }
.ledger[data-state="here"] .lrow2__value .v { color: #fff; }
.ledger[data-state="here"] .lrow2__value .ic { background: var(--sky); color: var(--navy); }
.lrow2__value.flip .v { transform: translateY(-2px); }
.ledger__foot { position: relative; padding: 0 clamp(28px,3.4vw,44px) clamp(28px,3.4vw,44px); }

/* ============================================================
   FOUR E's — live recomposing system
   ============================================================ */
.es-system { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px,4vw,56px); align-items: stretch; }
.es-rail { display: flex; flex-direction: column; gap: 12px; }
.es-pick { text-align: left; background: var(--surface); border: 1.5px solid var(--rule); border-radius: var(--radius-card); padding: 20px 24px; cursor: pointer; font-family: var(--font-sans); display: flex; align-items: center; gap: 16px; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease); }
.es-pick:hover { transform: translateX(4px); }
.es-pick__n { font-weight: 900; font-size: 20px; color: var(--muted); letter-spacing: 0.04em; transition: color var(--dur) var(--ease); width: 36px; flex-shrink: 0; }
.es-pick__t { font-weight: 700; font-size: 19px; color: var(--navy); letter-spacing: -0.01em; }
.es-pick.on { background: var(--navy); border-color: var(--navy); }
.es-pick.on .es-pick__t { color: #fff; }
.es-pick.on .es-pick__n { color: var(--sky); }

.es-stage { background: var(--navy); border-radius: var(--radius-card); padding: clamp(32px,4vw,48px); color: var(--cream); position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; min-height: 340px; }
.es-stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 18% 84%, rgba(126,181,227,0.18), transparent 48%); }
.es-stage > * { position: relative; }
.es-stage__letter { font-weight: 900; font-size: clamp(72px,10vw,128px); line-height: 0.8; letter-spacing: -0.04em; color: var(--sky); opacity: 0.28; position: absolute; top: clamp(20px,3vw,32px); right: clamp(24px,3.6vw,40px); }
.es-stage__kicker { font-size: 12px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sky); margin: 0 0 14px; }
.es-stage h3 { font-weight: 800; font-size: clamp(28px,3.4vw,40px); letter-spacing: -0.025em; color: #fff; margin: 0 0 16px; }
.es-stage p { font-size: 17px; line-height: 1.6; color: var(--fg-on-dark-2); margin: 0 0 22px; max-width: 46ch; }
.es-stage blockquote { margin: 0; padding-left: 20px; border-left: 3px solid var(--terracotta); font-size: 16px; line-height: 1.5; color: var(--cream); font-weight: 500; }
.es-fade { animation: esfade 0.45s var(--ease); }
@keyframes esfade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .es-fade { animation: none; } }

/* ============================================================
   REST TIMELINE — quiet horizontal showpiece
   ============================================================ */
.rest { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; position: relative; margin-top: 12px; }
.rest::before { content: ""; position: absolute; top: 27px; left: 8%; right: 8%; height: 2px; background: linear-gradient(to right, var(--sky), var(--terracotta)); opacity: 0.5; }
.rnode { text-align: center; padding: 0 18px; position: relative; }
.rnode__dot { width: 54px; height: 54px; border-radius: 999px; background: #fff; border: 2px solid var(--sand-deep); display: grid; place-items: center; color: var(--navy); margin: 0 auto 20px; position: relative; z-index: 2; box-shadow: var(--shadow-soft); }
.rnode__dot svg { width: 24px; height: 24px; }
.rnode h4 { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: var(--navy); }
.rnode p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--fg3); max-width: 26ch; margin-inline: auto; }

@media (max-width: 900px) {
  .es-system { grid-template-columns: 1fr; }
  .es-rail { flex-direction: row; flex-wrap: wrap; }
  .es-pick { flex: 1; min-width: 140px; }
  .lrow2__label { font-size: 14px; }
  .rest { grid-template-columns: 1fr; gap: 32px; }
  .rest::before { display: none; }
}
/* Phones: side-by-side number + word left ~40px for the word, so "Excellent"
   and "Encouraging" ran out of their tiles and pushed the page sideways.
   Stack the number over the word in a 2×2 grid instead. */
@media (max-width: 640px) {
  .es-rail { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .es-pick { min-width: 0; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px; }
  .es-pick:hover { transform: none; }
  .es-pick__n { width: auto; font-size: 16px; }
  .es-pick__t { font-size: clamp(15px, 4.4vw, 17px); }
  /* the `auto` value column took the width and squeezed the label to one
     word per line; give the label the larger share instead */
  .lrow2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 14px; }
}