/* Franklin Direct — social proof
   ---------------------------------------------------------------------------
   Styles for /reviews/, /closings/, and the three-review strip that appears
   above the CTA on every calculator page.

   Every colour, shadow, and radius here comes from brand.css. Nothing new is
   introduced, so the proof pages read as the same site as the calculators.
   ------------------------------------------------------------------------ */

/* ---------- officer gating ----------------------------------------------
   Hidden by default and revealed by officers.js only for the officer named in
   data-officer-only. Failing closed matters: if the script never runs, a
   visitor sees nothing rather than one officer's reviews under another's name.
   ---------------------------------------------------------------------- */
[data-officer-only] { display: none !important; }

/* ---------- shared section furniture ---------------------------------- */
.proof-head { max-width: 62ch; margin: 0 0 26px; }
.proof-head h2 {
  font-family: 'Manrope', sans-serif; font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(1.5rem, 3.4vw, 2.05rem); line-height: 1.16; color: var(--ink);
  margin: 8px 0 10px;
}
.proof-head h2 em { font-style: normal; color: var(--franklin); }
.proof-head p { margin: 0; color: var(--muted); font-size: .97rem; }

/* ---------- review card ------------------------------------------------ */
.rev-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.rev {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--white); border: 1px solid var(--line); border-radius: 16px;
  padding: 20px 20px 18px; box-shadow: var(--shadow-sm);
}
.rev-stars { color: var(--gold); font-size: .92rem; letter-spacing: .12em; line-height: 1; }
.rev-q {
  margin: 0; color: var(--ink); font-size: .945rem; line-height: 1.62; flex: 1 1 auto;
}
.rev-q b { color: var(--franklin-deep); font-weight: 600; }
.rev-by {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  padding-top: 12px; border-top: 1px solid var(--line);
}
.rev-by b {
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: .9rem; color: var(--ink);
}
.rev-by span {
  font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--franklin); background: var(--tint); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px 9px;
}

/* ---------- Google rating band ----------------------------------------- */
.grating {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: var(--tint-2); border: 1px solid var(--line); border-radius: 18px;
  padding: 20px 22px; margin: 0 0 30px;
}
.grating-score {
  display: flex; align-items: baseline; gap: 7px;
  font-family: 'Manrope', sans-serif; font-weight: 800; letter-spacing: -.02em;
  font-size: 2.2rem; line-height: 1; color: var(--ink);
}
.grating-score i { font-style: normal; color: var(--gold); font-size: 1.5rem; }
.grating-txt { flex: 1 1 220px; min-width: 0; }
.grating-txt b {
  display: block; font-family: 'Manrope', sans-serif; font-size: .95rem; color: var(--ink);
}
.grating-txt span { display: block; margin-top: 3px; font-size: .82rem; color: var(--muted); }
.grating-links { display: flex; gap: 9px; flex-wrap: wrap; }
.gbtn {
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: .84rem;
  padding: 9px 15px; border-radius: 10px;
  color: var(--franklin-deep); background: var(--white);
  border: 1px solid var(--line); transition: border-color .18s, transform .18s;
}
.gbtn:hover { border-color: var(--franklin); transform: translateY(-1px); }
.gbtn svg { width: 15px; height: 15px; }

/* ---------- closings ---------------------------------------------------- */
.deal-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
}
.deal {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--white); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s;
}
.deal:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.deal-ph { position: relative; aspect-ratio: 16 / 10; background: var(--tint); }
.deal-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.deal-ph::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,50,85,0) 38%, rgba(11,50,85,.82) 100%);
}
.deal-badge {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'Manrope', sans-serif; font-weight: 800; font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--white);
  background: rgba(21,107,182,.94); border-radius: 999px; padding: 5px 11px 5px 8px;
}
.deal-badge svg { width: 12px; height: 12px; }
.deal-scrim {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 14px 16px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
}
.deal-loc {
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: .88rem;
  color: var(--white); text-shadow: 0 1px 6px rgba(0,0,0,.4);
}
.deal-val {
  text-align: right; font-family: 'Manrope', sans-serif; font-weight: 800;
  font-size: 1.12rem; letter-spacing: -.01em; color: var(--white); line-height: 1.1;
  text-shadow: 0 1px 6px rgba(0,0,0,.4);
}
.deal-val small {
  display: block; font-weight: 600; font-size: .68rem; letter-spacing: .02em;
  opacity: .88; margin-top: 2px;
}
.deal-body { padding: 15px 17px 17px; display: flex; flex-direction: column; gap: 9px; flex: 1 1 auto; }
.deal-eyebrow {
  font-family: 'Manrope', sans-serif; font-weight: 800; font-size: .69rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--franklin);
}
.deal-story { margin: 0; color: var(--ink); font-size: .93rem; line-height: 1.58; flex: 1 1 auto; }
.deal-story b { font-weight: 600; color: var(--franklin-deep); }
.deal-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 3px; }
.deal-chips span {
  font-size: .71rem; font-weight: 600; letter-spacing: .03em; color: var(--muted);
  background: var(--tint-2); border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 9px;
}

/* ---------- the sitewide three-review strip ---------------------------- */
.proof-strip { padding: 46px 0 6px; }
.proof-strip .proof-head { margin-bottom: 20px; }
.proof-strip .rev-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.proof-strip .rev { padding: 18px 18px 16px; }
.proof-strip .rev-q { font-size: .9rem; line-height: 1.58; }
.proof-more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  text-decoration: none; font-family: 'Manrope', sans-serif; font-weight: 700;
  font-size: .88rem; color: var(--franklin-deep);
  border-bottom: 2px solid var(--tint); padding-bottom: 2px;
  transition: border-color .18s, gap .18s;
}
.proof-more:hover { border-color: var(--franklin); gap: 12px; }
.proof-more svg { width: 15px; height: 15px; }

/* ---------- hero for the two standalone pages -------------------------- */
.proof-hero { padding: 40px 0 4px; }
.proof-hero .lede { margin-top: 12px; }
.proof-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* ---------- closing CTA band ------------------------------------------- */
.proof-cta {
  margin: 40px 0 8px; padding: 30px 28px; border-radius: 20px;
  background: linear-gradient(135deg, var(--navy), var(--navy-2));
  box-shadow: var(--shadow); color: var(--white);
}
.proof-cta h2 {
  font-family: 'Manrope', sans-serif; font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(1.35rem, 3vw, 1.8rem); margin: 6px 0 8px; color: var(--white);
}
.proof-cta p { margin: 0 0 20px; color: #B9D2E8; font-size: .95rem; max-width: 56ch; }
.proof-cta .eyebrow { color: var(--sky-2); }
.proof-cta .eyebrow::before { background: var(--sky-2); }
.proof-cta .proof-actions { margin-top: 0; }

/* Ghost button used inside the dark band and on the proof heroes. */
.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: .9rem;
  padding: 12px 20px; border-radius: 11px;
  color: var(--white); background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.26); transition: background .18s, transform .18s;
}
.btn-ghost:hover { background: rgba(255,255,255,.17); transform: translateY(-2px); }
.btn-ghost svg { width: 16px; height: 16px; }
.proof-hero .btn-ghost {
  color: var(--franklin-deep); background: var(--white);
  border-color: var(--line); box-shadow: var(--shadow-sm);
}
.proof-hero .btn-ghost:hover { background: var(--tint-2); border-color: var(--franklin); }

.proof-note {
  margin: 22px 0 0; font-size: .8rem; line-height: 1.6; color: var(--muted-2);
  max-width: 74ch;
}

@media (max-width: 560px) {
  .grating { padding: 17px 18px; gap: 14px; }
  .grating-links { width: 100%; }
  .gbtn { flex: 1 1 auto; justify-content: center; }
  .proof-cta { padding: 24px 20px; border-radius: 16px; }
  .proof-actions .cta, .proof-actions .btn-ghost { width: 100%; justify-content: center; }
}