/* Homepage — overrides loaded after site.css (2026-10-08). Two things live here:
   1. the "How it works" steps light up red instead of green (the brand accent — never a button, fine for a highlight);
   2. the Instagram reels section, restyled. */

/* ---------- steps: red highlight ---------- */
.stp__badge .bdots .d.on{ background:var(--red); }
.vstep.is-active .vstep__n{ color:var(--red); }
.vstep.is-active .vstep__ic{ background:color-mix(in srgb,var(--red) 12%, transparent); color:var(--red-hover); }

/* ---------- Instagram reels: Loaded after site.css and overrides its .social/.ig rules.
   Desktop (hover): a full-bleed marquee that drifts left, fades at both edges, pauses on hover.
   Touch: the native snap-scroll strip, unchanged. Tiles, previews and the lightbox are rendered by the script in index.html. */
.social{ background:#fff; padding:clamp(3.75rem,7.5vw,6.25rem) 0 clamp(3rem,6vw,5rem); overflow:hidden; }
.social__row{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.25rem 2rem; margin-bottom:clamp(1.75rem,3.5vw,2.5rem); }
.social__head{ max-width:40rem; }
.social__head .eyebrow::before{ content:none; }
.social__head .h2{ font-size:clamp(1.85rem,3.6vw,2.7rem); }
.social__head .sub{ margin-top:.6rem; }
.social__acct{ display:inline-flex; align-items:center; gap:.75rem; padding:.4rem 1rem .4rem .4rem; border:1px solid var(--border); border-radius:999px; background:#fff; text-decoration:none; color:var(--navy); transition:border-color .2s var(--ease), transform .2s var(--ease); }
.social__acct:hover{ border-color:var(--navy); transform:translateY(-1px); }
.social__acct img{ width:40px; height:40px; border-radius:50%; display:block; background:#fff; }
.social__acct b{ display:block; font-family:var(--font-head); font-weight:600; font-size:.9rem; line-height:1.15; }
.social__acct span{ display:block; font-size:.76rem; color:var(--ink-soft); }
.social__acct .ic{ width:18px; height:18px; stroke-width:2; margin-left:.25rem; color:var(--navy); }
.ig__strip{ overflow:hidden; margin:0; }
.ig__track{ display:flex; gap:14px; padding:1rem max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))) 3rem; }
.ig__tile{ flex:0 0 clamp(180px,15vw,220px); aspect-ratio:9/16; border-radius:18px; overflow:hidden; background:var(--grey-card); border:0; padding:0; cursor:pointer; position:relative; box-shadow:0 22px 44px -28px rgba(16,34,82,.45); transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.ig__tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(10,21,48,.45) 100%); pointer-events:none; }
.ig__tile:hover{ transform:translateY(-6px); box-shadow:0 34px 60px -30px rgba(16,34,82,.55); }
.ig__tile video{ width:100%; height:100%; object-fit:cover; display:block; }
.ig__reel{ left:12px; bottom:12px; z-index:1; background:rgba(255,255,255,.92); color:var(--navy); height:28px; padding:0 .65rem 0 .45rem; }
.ig__reel svg{ fill:var(--navy); }
@media (hover:hover) and (min-width:761px){
  .ig__strip{ -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
  .ig__track.is-marquee{ width:max-content; overflow:visible; scroll-snap-type:none; animation:igdrift 55s linear infinite; }
  .ig__strip:hover .ig__track.is-marquee, .ig__strip:focus-within .ig__track.is-marquee{ animation-play-state:paused; }
  @keyframes igdrift{ from{ transform:translateX(0); } to{ transform:translateX(var(--ig-loop, -50%)); } }
}
@media (max-width:760px){ .ig__tile{ flex-basis:46vw; } .social__acct span{ display:none; } }
@media (prefers-reduced-motion:reduce){ .ig__track.is-marquee{ animation:none; } }

/* ---------- services: snap carousel on phones so six cards don't stack into a wall ---------- */
@media (max-width:760px){
  .svc__grid{ display:flex; gap:.9rem; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--gutter); margin:0 calc(-1 * var(--gutter)) -1rem; padding:1rem var(--gutter) 3rem; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .svc__card--navy{ box-shadow:0 16px 30px -18px rgba(16,34,82,.3); }
  .svc__grid::-webkit-scrollbar{ display:none; }
  .svc__card{ flex:0 0 min(78%, 320px); scroll-snap-align:start; }
  .svc__dots{ display:flex; justify-content:center; gap:7px; margin-top:.25rem; }
  .svc__dot{ width:7px; height:7px; border-radius:50%; background:var(--border); border:0; padding:0; transition:all .25s var(--ease); }
  .svc__dot.on{ background:var(--navy); width:22px; border-radius:5px; }
}
@media (min-width:761px){ .svc__dots{ display:none; } }

/* ---------- hero on phones: the copy column is a flex item and the ticker's 36rem max-width was forcing it to 576px,
   clipping the headline, buttons and proof row on the right. Let it shrink to the viewport. ---------- */
.hero__copy{ min-width:0; width:100%; }
.tk{ max-width:100%; }
@media (max-width:560px){
  .hero__wrap{ padding-top:clamp(2.75rem,10vw,4rem); padding-bottom:clamp(2.5rem,8vw,3.5rem); min-height:0; }
  .hero h1{ font-size:clamp(2.1rem,10.5vw,2.6rem); }
  .hero .lede{ font-size:1rem; }
  .hero__proof{ gap:.4rem .8rem; }
  .hero__proof > span{ flex:1 0 100%; }
}

/* ======================================================================
   Premium pass (2026-10-08): rhythm, type, motion, and the template tells
   ====================================================================== */
::selection{ background:var(--navy); color:#fff; }
.section{ padding:clamp(4.5rem,9vw,7.5rem) 0; }
.h2{ letter-spacing:-.035em; }
.head{ margin-bottom:clamp(2.5rem,5vw,3.75rem); }
.btn{ will-change:transform; }
.btn:active{ transform:translateY(0) scale(.985); }
/* photos breathe on hover */
.stp__media-card img, .office__photo img, .fnd__vid .vcard__poster{ transition:transform .9s var(--ease); }
.stp__media-card:hover img, .office__photo:hover img{ transform:scale(1.035); }

/* "Credit problems we work on": the icon-in-a-box tile grid becomes a flowing row of pills */
.prob__cards{ display:flex; flex-wrap:wrap; gap:.65rem; max-width:56rem; }
.prob .pc{ display:inline-flex; flex-direction:row; align-items:center; gap:.6rem; padding:.7rem 1.15rem .7rem .9rem; background:#fff; border:1px solid var(--border); border-radius:999px; box-shadow:none; transition:border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); }
.prob .pc:hover{ border-color:var(--navy); transform:translateY(-2px); box-shadow:0 14px 28px -20px rgba(16,34,82,.4); }
.prob .pc .pc__ic{ width:auto; height:auto; background:transparent; border:0; border-radius:0; margin:0; padding:0; box-shadow:none; display:grid; place-items:center; }
.prob .pc .ph{ width:19px; height:19px; color:var(--navy); }
.prob .pc b{ font-family:var(--font-head); font-weight:600; font-size:.95rem; color:var(--navy); }
@media (max-width:560px){ .prob .pc{ padding:.6rem .95rem .6rem .75rem; } .prob .pc b{ font-size:.88rem; } }

/* founders: the giant faded quote mark was a template tell */
.fnd__mark{ display:none; }
.fnd__link{ display:inline-flex; align-items:center; gap:.5rem; margin-top:1.4rem; padding:.4rem 0; color:var(--navy); font-weight:600; text-decoration:underline; text-underline-offset:5px; }
.fnd__link:hover{ color:var(--sky-dark); }
.fnd__link:focus-visible{ outline:2px solid var(--sky); outline-offset:5px; }

/* stats: quieter glass */
.stcard{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); }
.stcard__label{ letter-spacing:.06em; font-size:.74rem; }

/* scroll reveal (tagged by the script in index.html; off under reduced motion) */
.rv{ opacity:0; transform:translateY(18px); transition:opacity .75s var(--ease), transform .75s var(--ease); }
.rv.rv-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .rv{ opacity:1; transform:none; transition:none; } }

/* the disputes section's decorative glow poked 7px past the viewport on phones */
.clean{ overflow:hidden; }

/* ======================================================================
   Final touches: the page reacts to the visitor
   ====================================================================== */
/* hero headline rises word by word (script splits it) */
.hero h1 .w{ display:inline-block; opacity:0; transform:translateY(.55em) rotate(1.5deg); animation:wordup .8s var(--ease) forwards; transform-origin:left bottom; }
@keyframes wordup{ to{ opacity:1; transform:none; } }
/* hero video drifts slowly as you scroll (script sets the transform) */
.hero__bg{ will-change:transform; transform-origin:center top; }
/* a soft light follows the cursor across cards */
.spot{ position:relative; isolation:isolate; }
.spot::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .4s var(--ease); background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb,var(--sky) 18%, transparent), transparent 62%); }
.spot:hover::before{ opacity:1; }
/* primary buttons lean toward the cursor (script) */
.btn--p, .btn--w, .top-cta{ transition:transform .25s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease); }
/* FAQ answers fade up */
details[open] > :not(summary){ animation:fadeup .4s var(--ease); }
@keyframes fadeup{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
/* live local time in the office block */
.office__now{ display:inline-flex; align-items:center; gap:.55rem; margin:.9rem 0 0; font-size:.86rem; color:var(--ink-soft); }
.office__now b{ color:var(--navy); font-weight:600; }
.office__now .dot{ width:7px; height:7px; border-radius:50%; background:var(--navy); box-shadow:0 0 0 0 color-mix(in srgb,var(--navy) 35%, transparent); animation:nowpulse 2.6s ease-out infinite; }
@keyframes nowpulse{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--navy) 35%, transparent); } 70%{ box-shadow:0 0 0 9px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } }
@media (prefers-reduced-motion:reduce){ .hero h1 .w{ opacity:1; transform:none; animation:none; } .topbar.is-hidden{ transform:none; } .office__now .dot{ animation:none; } details[open] > :not(summary){ animation:none; } }

/* ======================================================================
   Next-level pass (2026-10-08)
   ====================================================================== */

/* Disputes: one scroll-driven sequence, with a compact sticky stage on mobile. */
.clean__grid{ grid-template-areas:"intro panel" "steps panel" "details panel"; row-gap:0; }
.clean__intro{ grid-area:intro; }
.clean__walkthrough, .clean__sticky{ display:contents; }
.clean__steps{ grid-area:steps; }
.clean__panel{ grid-area:panel; }
.clean__details{ grid-area:details; }
.clean__stage{ display:flex; align-items:center; gap:.85rem; margin:1.6rem 0 0; padding-top:1.2rem; border-top:1px solid var(--border); font-family:var(--font-head); font-weight:600; color:var(--navy); font-size:1.02rem; line-height:1.3; }
.clean__stage-n{ font-family:var(--font-emph); font-style:italic; font-weight:600; color:var(--red); font-size:1.5rem; min-width:2ch; line-height:1; }
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
  .clean.is-scrubbing{ overflow:visible; padding:0; min-height:240vh; }
  .clean.is-scrubbing .clean__grid{ position:sticky; top:0; min-height:100vh; align-content:center; padding-top:5rem; padding-bottom:5rem; }
  .clean__glow{ inset:-8% -4% -4% -4%; }
  .row.cleared{ opacity:.55; }
}

/* 7 · the three bureaus, as plain wordmarks with the non-affiliation line */
.bureaus{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem 1.6rem; margin-top:1.4rem; }
.bureaus span{ font-family:var(--font-head); font-weight:700; font-size:1.05rem; letter-spacing:-.01em; color:var(--ink-soft); }
.bureaus small{ flex:1 0 100%; font-size:.74rem; color:var(--ink-soft); }

/* 3 · stats as an editorial number row instead of glass cards */
.stcard__media{ display:none; }
.stcard, .stcard:hover, .stcard--navy{ background:none; border:0; border-radius:0; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; }
.stcard--navy::after, .stx.in .stcard--navy::after{ display:none; animation:none; }
.stx__grid{ gap:0; border-top:1px solid rgba(255,255,255,.14); border-bottom:1px solid rgba(255,255,255,.14); }
.stcard{ padding:clamp(1.6rem,3vw,2.4rem) clamp(1rem,2.5vw,2rem); border-left:1px solid rgba(255,255,255,.14); }
.stcard:first-child{ border-left:0; padding-left:0; }
.stcard__num{ font-size:clamp(2.6rem,4.8vw,4rem); letter-spacing:-.045em; line-height:.95; }
.stcard__num .suf{ font-family:var(--font-emph); font-style:italic; font-weight:500; color:var(--red); margin-left:.05em; }
.stcard__label{ margin-top:.7rem; font-size:.72rem; letter-spacing:.14em; color:rgba(255,255,255,.62); }
@media (max-width:760px){ .stx__grid{ grid-template-columns:1fr 1fr; } .stcard:nth-child(3){ border-left:0; padding-left:0; } .stcard:nth-child(n+3){ border-top:1px solid rgba(255,255,255,.14); } }

/* 4 · grain and depth on the dark sections (script drops a .grain span into each) */
.grain{ position:absolute; inset:0; pointer-events:none; z-index:1; opacity:.075; mix-blend-mode:soft-light; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:220px 220px; }
.hero .grain{ z-index:0; }
.fnd{ isolation:isolate; }
.fnd .grain{ opacity:.045; }
.fnd__grid{ position:relative; z-index:1; }
.fnd__still{ margin:0; overflow:hidden; border-radius:var(--r-xl); box-shadow:var(--shadow-lg); }
.fnd__still img{ display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; }

/* 6 · team: on desktop the carousel becomes a hover reveal (script skips the carousel there) */
@media (hover:hover) and (min-width:901px){
  .team__navs, .team__foot{ display:none; }
  .team__viewport{ overflow:visible; -webkit-mask-image:none; mask-image:none; }
  .team__track{ transform:none !important; gap:10px; }
  .team__card{ flex:1 1 0 !important; min-width:0; height:clamp(400px,36vw,500px); transition:flex .65s var(--ease), min-width .65s var(--ease), box-shadow .65s var(--ease); cursor:default; }
  .team__card:hover{ flex:2.6 1 0 !important; min-width:220px; box-shadow:0 30px 58px -28px rgba(16,34,82,.4); }
  .team__card img{ transition:filter .6s var(--ease), transform .9s var(--ease); }
  .team__card:hover img{ filter:none; transform:scale(1.03); }
  .team__card:hover .team__meta{ opacity:1; }
}

/* 8 · footer as a closing statement: signature, giant wordmark bleeding off the bottom */

/* ---------- disputes: make the scroll-driven sequence legible (stepper rail, progress bar, scroll cue) ---------- */
.clean__steps{ list-style:none; margin:1.7rem 0 0; padding:1.4rem 0 0; border-top:1px solid var(--border); display:grid; gap:1rem; position:relative; }
.clean__steps li{ position:relative; z-index:1; display:grid; grid-template-columns:30px 1fr; gap:.9rem; align-items:start; }
.clean__steps li i{ font-style:normal; width:30px; height:30px; border-radius:50%; border:1.5px solid var(--border); display:grid; place-items:center; font-family:var(--font-head); font-weight:700; font-size:.8rem; color:var(--ink-soft); background:var(--paper); transition:all .35s var(--ease); }
.clean__steps li b{ display:block; font-family:var(--font-head); font-weight:600; font-size:1.02rem; color:var(--ink-soft); line-height:30px; transition:color .35s var(--ease); }
.clean__steps li span{ display:block; font-size:.9rem; line-height:1.5; color:var(--ink-soft); margin-top:.05rem; max-width:34rem; transition:color .35s var(--ease); }
.clean__steps li.is-on b{ color:var(--navy); }
.clean__steps li.is-on span{ color:var(--ink); }
.clean__steps li.is-on i{ border-color:var(--red); color:var(--red); background:#fff; }
.clean__steps li.is-done b{ color:var(--navy); }
.clean__steps li.is-done i{ background:var(--navy); border-color:var(--navy); color:#fff; }
.clean__steps::before, .clean__steps::after{ content:""; position:absolute; left:14px; top:calc(1.4rem + 15px); bottom:15px; width:2px; z-index:0; background:var(--border); border-radius:2px; }
.clean__steps::after{ background:var(--red); transform:scaleY(var(--p,0)); transform-origin:top; transition:transform .15s linear; }
.clean__stage{ display:none; }
.rep__bar{ position:absolute; left:0; right:0; top:0; height:3px; background:var(--red); transform:scaleX(var(--p,0)); transform-origin:left; transition:transform .15s linear; z-index:3; }
.clean__cue{ display:none; }
@media (prefers-reduced-motion:no-preference){
  .clean__cue{ display:inline-flex; align-items:center; gap:.5rem; margin:1rem auto 0; justify-content:center; width:100%; font-family:var(--font-head); font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); transition:opacity .4s var(--ease); }
  .clean__cue .ic{ width:16px; height:16px; stroke-width:2; animation:cuebob 1.6s ease-in-out infinite; }
  .clean.is-going .clean__cue{ opacity:0; }
  @keyframes cuebob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(5px); } }
  .rep{ transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
  .clean.is-going .rep{ transform:translateY(-6px); box-shadow:0 60px 110px -40px rgba(16,34,82,.55); }
}

/* bureaus: the real marks, in grey, same cap height */
.bureaus{ align-items:center; gap:.6rem 2rem; }
.bureaus img{ height:22px; width:auto; display:block; filter:grayscale(1); opacity:.55; transition:filter .3s var(--ease), opacity .3s var(--ease); }
.bureaus img:hover{ filter:none; opacity:1; }
.bureaus img.bureau-experian{ height:30px; }

/* ---------- logos: the funnels' white mark in the footer, big; the navy one in the header ---------- */
@media (max-width:900px){
  .is-reading-disputes .sticky-cta{ visibility:hidden; pointer-events:none; }
  .clean__grid{ display:block; }
  .clean__intro{ margin-bottom:1.8rem; }
  .clean__details{ margin-top:1.8rem; }
  .clean__panel{ margin-inline:auto; }
  .clean__glow{ inset:0; }
  .clean.is-scrubbing{ overflow:visible; }
  .clean.is-scrubbing .clean__walkthrough{ display:block; height:calc(var(--clean-height, 620px) + 170vh); height:calc(var(--clean-height, 620px) + 170svh); }
  .clean.is-scrubbing .clean__sticky{ display:grid; position:sticky; top:var(--clean-top, 76px); gap:.75rem; max-width:440px; margin-inline:auto; padding:1rem 0 5rem; }
  .clean.is-scrubbing .clean__steps{ grid-area:auto; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem; margin:0; padding:0 0 4.6rem; border:0; }
  .clean.is-scrubbing .clean__steps li{ display:flex; flex-direction:column; align-items:center; gap:.25rem; position:static; text-align:center; }
  .clean.is-scrubbing .clean__steps li b{ font-size:.9rem; line-height:1.4; }
  .clean.is-scrubbing .clean__steps li span{ display:none; position:absolute; top:4rem; left:0; right:0; margin:0 auto; font-size:.88rem; line-height:1.45; max-width:36ch; }
  .clean.is-scrubbing .clean__steps li.is-on span{ display:block; }
  .clean.is-scrubbing .clean__steps::before, .clean.is-scrubbing .clean__steps::after{ top:14px; bottom:auto; left:16.66%; right:16.66%; width:auto; height:2px; }
  .clean.is-scrubbing .clean__steps::after{ transform:scaleX(var(--p,0)); transform-origin:left; }
  .clean.is-scrubbing .clean__panel{ grid-area:auto; order:0; }
  .clean .rep__head{ gap:.5rem; padding:12px; }
  .clean .rep__logo{ display:none; }
  .clean .rep__count{ gap:5px; padding:6px 8px; font-size:.68rem; }
  .clean .rep__tit small{ font-size:.62rem; }
  .clean .rep__body{ min-height:0; padding:6px 8px; }
  .clean .row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 8px; padding:9px 8px; }
  .clean .row__ic{ display:none; }
  .clean .row__info{ grid-column:1; grid-row:1 / 3; }
  .clean .row__info b{ font-size:.82rem; white-space:normal; line-height:1.25; }
  .clean .row__info span{ font-size:.68rem; }
  .clean .row__amt{ grid-column:2; grid-row:1; justify-self:end; font-size:.75rem; }
  .clean .badge{ grid-column:2; grid-row:2; padding:3px 7px; font-size:.64rem; justify-self:end; }
  .clean .rep__foot{ padding:10px 12px; }
  .clean__cue{ margin-top:.75rem; font-size:.68rem; }
  .clean__fine{ font-size:.7rem; margin-top:.65rem; }
}
@media (max-width:900px) and (max-height:700px){
  .clean.is-scrubbing .clean__sticky{ gap:.4rem; padding:.5rem 0 3.5rem; }
  .clean.is-scrubbing .clean__steps{ padding-bottom:3.8rem; }
  .clean.is-scrubbing .clean__steps li span{ top:3.65rem; font-size:.8rem; }
  .clean .row{ padding:8px; min-height:42px; }
  .clean .row__info{ grid-row:1; }
  .clean .row__info span, .clean .row__amt{ display:none; }
  .clean .badge{ grid-row:1; }
  .clean .rep__head, .clean .rep__foot{ padding:8px 12px; }
  .clean__fine{ font-size:.66rem; }
}
@media (prefers-reduced-motion:reduce){
  .clean .row, .clean .badge, .clean__steps li i, .clean__steps li b, .clean__steps li span{ transition:none; }
  .clean__steps li b, .clean__steps li span{ color:var(--navy); }
  .clean__steps::before, .clean__steps::after{ display:none; }
  .clean .row__strike{ transform:translateY(-50%) scaleX(1); }
}