/* Responsive finishing details; original logo colors are never filtered. */
:root { --header-h: 90px; }
html { scroll-padding-top: calc(var(--header-h) + 20px); }
[hidden] { display: none !important; }
/* The Royal Freedom lockup is navy and gold on transparency (3.6:1), so it needs a light plate to read on the black header and footer. */
.site-header .logo img { height: 44px; width: auto; }
.site-header .logo img, .logo--full img { background: #fff; border-radius: 10px; padding: 7px 12px; }
.logo--full img { width: 240px; height: auto; }
.scene--cool .scene-shade { background: linear-gradient(90deg,rgba(14,24,42,.95),rgba(14,24,42,.82) 42%,rgba(14,24,42,.15) 68%,transparent); }
.scene--warm .scene-shade { background: linear-gradient(90deg,rgba(251,241,223,.98),rgba(251,241,223,.94) 40%,rgba(251,241,223,.1) 68%,transparent); }
.scene-img img { object-position: 75% center; }
.scene--cool .c1 { top: 12%; }
.scene--warm .c1 { top: 12%; }
.c2 { right: 20%; bottom: 12%; }
.c3 { right: 3%; bottom: 26%; }
.chapter { font: 500 .72rem/1.5 var(--sans); text-transform: uppercase; letter-spacing: .18em; opacity: .8; }
.scene--cool .chapter { color:#c9d3e1; }
.scene--warm .chapter { color:#4a3b26; }
.scene-copy h1, .scene-copy h2 { text-wrap: balance; }
.program-jump { display:flex; gap:8px; flex-wrap:wrap; margin-top:28px; }
.program-jump a { border:1px solid #d7c8b0; border-radius:50px; padding:9px 15px; text-decoration:none; font-size:.82rem; background:#fff9; }
.program-jump a:hover { background:#fff; border-color:var(--gold-deep); }
.program-jump a:first-child { background:var(--navy); color:white; border-color:var(--navy); }
.step-indicator { display:flex; gap:14px; align-items:center; color:var(--muted); font-size:.78rem; margin-bottom:24px; }
.step-indicator span { display:flex; align-items:center; gap:8px; }
.step-indicator b { border:1px solid #b8a484; border-radius:50%; display:grid; place-items:center; width:25px; height:25px; }
.step-indicator .active { color:var(--gold-deep); font-weight:600; }
.step-indicator .active b { background:var(--navy); color:white; border-color:var(--navy); }
.step-indicator i { width:38px; height:1px; background:#c9b997; }
.prep { position:fixed; z-index:55; top:calc(var(--header-h) + 12px); left:50%; transform:translateX(-50%); background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); border-radius:50px; width:max-content; max-width:calc(100% - 24px); }
.js-motion .prep { display:flex; gap:12px; padding:12px 20px; }
.prep .lead { font-size:.85rem; }
.prep-ring { width:22px; height:22px; border-width:2px; margin:0; flex:none; }
.booking-ready .prep { display:none; }
.embed-card iframe { min-height:650px; }
.embed-caution { font-size:.88rem; color:var(--muted); margin-bottom:22px; padding:16px 20px; border-left:3px solid var(--gold); background:#fff; }
.frame-continue { text-align:center; margin-bottom:24px; }
.review-guide { max-width:620px; margin:32px auto 0; display:flex; gap:20px; padding-top:24px; border-top:1px solid var(--line); }
.review-guide p { font-size:.9rem; color:var(--muted); }
@media (max-width:860px) {
  :root { --header-h:80px; }
  .site-header .logo img { height:36px; padding:6px 10px; }
  .site-header { height:auto; min-height:var(--header-h); }
  .site-header .wrap { flex-wrap:wrap; }
  .menu-toggle { display:none; }
  .nav { position:static; display:flex; width:100%; padding:8px 0 24px; box-shadow:none; }
  .nav-ready .site-header { height:var(--header-h); }
  .nav-ready .site-header .wrap { flex-wrap:nowrap; }
  .nav-ready .menu-toggle { display:inline-flex; }
  .nav-ready .nav { position:fixed; display:none; padding:20px 16px 28px; max-height:calc(100dvh - var(--header-h)); overflow:auto; }
  .nav-ready .nav.open { display:flex; }
  .step-indicator { font-size:.72rem; gap:9px; }
  .step-indicator i { width:20px; }
  .embed-card { padding:4px; border-radius:14px; }
  .embed-card iframe { min-height:760px; }
  .scene-img img { object-position:80% center; }
  .scene-img { height:64vw; }
  .program-jump { gap:7px; }
  .program-jump a { font-size:.75rem; padding:8px 11px; }
}
@media (prefers-reduced-motion:reduce) {
  .prep, .js-motion .prep { display:none; }
  [data-tilt] { transform:none !important; }
}

/* Program cards are links to their detail page; data-tilt still owns the hover transform. */
a.issue { display: block; text-decoration: none; color: inherit; }
.issue-more { display: inline-block; margin-top: 14px; font: 600 .82rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-deep); }
a.issue:hover .issue-more { text-decoration: underline; }
.review-loc { font-size: .85rem; color: var(--muted); margin-top: 2px; }

/* Client dispute-result screenshots: contain, never crop, so nothing in the evidence is hidden. */
.proofs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; margin-top: 40px; align-items: start; }
.proof { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.proof a { display: block; line-height: 0; }
.proof img { width: 100%; height: auto; max-height: 440px; object-fit: contain; background: #f7f8fa; }
.proof figcaption { padding: 14px 18px; border-top: 1px solid var(--line); font-size: .88rem; color: var(--muted); display: grid; gap: 3px; }
.proof figcaption strong { color: var(--navy); font-weight: 600; }

/* Scroll-driven credit gauge, top center under the sticky header on every screen size.
   pointer-events:none so it never blocks a tap; aria-hidden because it is decoration, not content. */
.scorebug { --sb-color: #c63b22; position: fixed; top: calc(var(--header-h) + 12px); left: 50%; z-index: 40; width: 112px;
  padding: 10px 10px 9px; border-radius: 18px; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line); box-shadow: var(--shadow-lg); text-align: center; pointer-events: none;
  opacity: 0; transform: translate(-50%, -12px) scale(.94); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.9,.3,1.2), box-shadow .4s ease; }
.scorebug.is-on { opacity: 1; transform: translate(-50%, 0); }
.scorebug svg { display: block; width: 100%; height: auto; overflow: visible; }
.sb-track, .sb-fill { fill: none; stroke-width: 10; stroke-linecap: round; }
.sb-track { stroke: #e7e9ee; }
.sb-fill { stroke: url(#scorebug-grad); }
.sb-dot { fill: #fff; stroke: var(--sb-color); stroke-width: 3.5; transition: stroke .4s ease; }
.sb-num { display: block; margin-top: -20px; font: 700 1.45rem/1 var(--sans); color: var(--sb-color); font-variant-numeric: tabular-nums; transition: color .4s ease; }
.sb-band { display: block; margin-top: 4px; font: 700 .62rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--sb-color); transition: color .4s ease; }
.sb-cap { display: block; margin-top: 3px; font: 500 .52rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.scorebug.bump .sb-num { animation: sb-bump .45s ease; }
@keyframes sb-bump { 40% { transform: scale(1.18); } }
.scorebug.is-max { box-shadow: 0 0 0 3px rgba(31,156,76,.25), 0 18px 40px -16px rgba(31,156,76,.6); }
/* Phones: sits in the empty middle of the black header bar, so it never covers page text. */
@media (max-width: 860px) {
  .scorebug { top: 7px; z-index: 60; width: 70px; padding: 5px 6px 5px; border-radius: 12px; }
  .sb-track, .sb-fill { stroke-width: 12; }
  .sb-num { margin-top: -13px; font-size: .98rem; }
  .sb-band { margin-top: 2px; font-size: .46rem; letter-spacing: .06em; }
  .sb-cap { margin-top: 2px; font-size: .4rem; letter-spacing: .04em; }
}
@media (prefers-reduced-motion: reduce) { .scorebug { transition: none; } }

/* Home: life with bad credit vs good credit, under one split illustration */
.life-art { margin: 40px 0 0; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-lg); }
.life-art img { width: 100%; height: auto; }
.life-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 22px; }
.life-col { border-radius: var(--radius); padding: 28px 30px; box-shadow: var(--shadow); }
.life-col--bad { background: linear-gradient(160deg, #eef2f7, #e2e8f0); border: 1px solid #d5dde8; }
.life-col--bad .side-label { color: #44546d; }
.life-col--good { background: linear-gradient(160deg, #fffaf0, #fbefd7); border: 1px solid #efdcb5; }
.life-col--good .side-label { color: var(--gold-deep); }
.life-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 14px; }
.life-list li { position: relative; padding-left: 32px; line-height: 1.45; font-size: .98rem; }
.life-list b { display: block; font-weight: 600; color: var(--navy); }
.life-list li::before { position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 .72rem/1 var(--sans); }
.life-col--bad .life-list li::before { content: "\2715"; background: #d9e0ea; color: #4f5f78; }
.life-col--good .life-list li::before { content: "\2713"; background: #f4dfb0; color: var(--gold-deep); }

/* Programs: equal rows, small picture + short description; the whole row links to the program page */
.prog-rows { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.prog-row { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: center; padding: 18px; border-radius: 22px; background: #fff; border: 1px solid var(--line);
  box-shadow: var(--shadow); text-decoration: none; color: inherit; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.prog-row:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: #e3cf9f; }
.prog-row img { width: 220px; height: auto; aspect-ratio: 480 / 362; object-fit: cover; border-radius: 14px; background: #f6efe2; }
.prog-row h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin-bottom: 6px; }
.prog-row p { color: var(--muted); margin: 0 0 12px; max-width: 70ch; }
.prog-more { font: 600 .82rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-deep); }
.prog-row:hover .prog-more { text-decoration: underline; }
@media (max-width: 860px) {
  .life-grid { grid-template-columns: 1fr; }
  .life-col { padding: 22px 20px; }
  .life-art { border-radius: 16px; margin-top: 28px; }
  .prog-row { grid-template-columns: 110px 1fr; gap: 16px; padding: 14px; align-items: start; }
  .prog-row img { width: 110px; border-radius: 10px; }
  .prog-row h2 { font-size: 1.35rem; }
  .prog-row p { font-size: .93rem; }
}
@media (max-width: 420px) {
  .prog-row { grid-template-columns: 84px 1fr; gap: 14px; }
  .prog-row img { width: 84px; }
  .prog-row h2 { font-size: 1.25rem; }
}

/* Homepage guarantee block: the one claim on the page that must not be skimmed past. */
.guarantee { margin: 48px auto 0; max-width: 760px; text-align: center; padding: 34px 28px;
  border: 1px solid #efdcb5; border-radius: var(--radius); background: linear-gradient(160deg, #fffaf0, #fbefd7); box-shadow: var(--shadow); }
.guarantee h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: 10px; }
.guarantee p { margin: 0; color: var(--muted); max-width: 54ch; margin-inline: auto; }

/* Homepage hero: the bills sit behind the copy, so the scrim has to carry text contrast on its own. */
.scene--cool .scene-img img { object-position: 60% center; }
.scene--cool .scene-shade { background: linear-gradient(90deg, rgba(10,14,22,.95) 0%, rgba(10,14,22,.86) 46%, rgba(10,14,22,.45) 74%, rgba(10,14,22,.25) 100%); }
@media (max-width: 860px) {
  .scene--cool .scene-shade { background: linear-gradient(180deg, rgba(10,14,22,.92) 0%, rgba(10,14,22,.86) 55%, rgba(10,14,22,.78) 100%); }
  .scene-copy { padding: 76px 0 64px; }
}
/* Five steps instead of the four the Programs page uses. Every variant is inside a media query:
   .steps--five .steps-list outranks the plain .steps-list mobile rule, so an unscoped version
   would keep five columns on a phone and blow the layout out to ~980px. */
@media (min-width: 1041px) { .steps--five .steps-list { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 861px) and (max-width: 1040px) {
  .steps--five .steps-list { grid-template-columns: repeat(3, 1fr); row-gap: 34px; }
  .steps--five .steps-line, .steps--five.steps::before { display: none; }
}
@media (max-width: 860px) { .steps--five .steps-list { grid-template-columns: 1fr; } }

/* styles.css:174 stacks .scene on phones (image above copy, scrim off) for the old journey layout.
   The homepage hero is meant to overlay at every width, so keep it absolute here. */
@media (max-width: 899px) {
  .scene--cool { display: block; }
  .scene--cool .scene-img { position: absolute; inset: 0; height: auto; min-height: 0; order: 0; }
  .scene--cool .scene-shade { display: block; }
  .scene--cool .scene-copy { padding: 84px 0 72px; }
}