/* ==========================================================================
   MONEYFROMDEBT.COM v7 (2026-09-29): "much more client forward, professional, take the best from
   each competitor". Split video hero with a short intake form (Mizrahi Kroub video hero +
   Lemberg hero form), one-tap problem tiles (Kleinman), phone always in the header
   (Consumer Attorneys), dark inner-page headers. Loaded last.
   ========================================================================== */

/* ---- split hero ------------------------------------------------------------------ */
.xhero{display:grid;grid-template-columns:minmax(0,.46fr) minmax(0,.54fr);min-height:min(86vh,820px);background:#07211A;color:#DCEBE3}
.xh-copy{position:relative;display:flex;align-items:center;padding:clamp(40px,5vw,80px) clamp(20px,4vw,64px) clamp(40px,5vw,72px) max(20px,calc((100vw - 1240px)/2 + 20px));
  background:radial-gradient(700px 420px at 0 0,rgba(181,138,50,.16),transparent 60%),linear-gradient(160deg,#0C2E24 0,#07211A 100%)}
.xh-in{max-width:560px}
.xhero .eyebrow{background:rgba(255,255,255,.08);color:#D8EADF}
.xhero .eyebrow::before{background:var(--m-brass)}
body.mfd .xhero h1{color:#fff;font-size:clamp(2.4rem,4.4vw,4rem);line-height:1.02;letter-spacing:-.04em;margin:.35em 0 .35em}
body.mfd .xhero h1 em{font-style:normal;color:#E0B35A;display:block}
.xhero .lede{color:#C4D9CE;font-size:clamp(1.02rem,1.25vw,1.14rem);max-width:34em}
.xh-form{margin-top:24px;background:#fff;border-radius:18px;padding:18px;box-shadow:0 30px 60px rgba(0,0,0,.35);color:var(--m-ink)}
.xh-form-t{display:block;font:800 1.02rem/1.25 var(--font-display);letter-spacing:-.01em;margin-bottom:12px;color:var(--m-ink)}
.xh-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.xh-grid select{grid-column:1/-1}
.xh-grid select,.xh-grid input{min-height:52px;border:1.5px solid #D8E0DB;border-radius:10px;padding:10px 14px;font:inherit;font-size:.98rem;color:var(--m-ink);background:#F8FAF9;min-width:0}
.xh-grid select:focus,.xh-grid input:focus{outline:none;border-color:var(--m-green);box-shadow:0 0 0 4px rgba(15,92,69,.14);background:#fff}
.xh-grid .btn{grid-column:1/-1;min-height:56px;justify-content:center;font-size:1.04rem}
.xh-form small{display:block;margin-top:10px;color:var(--m-muted);font-size:.78rem}
.xh-call{margin-top:18px;color:#B6CDC1;font-size:.95rem}
.xh-call a{color:#fff;font-weight:800}
.xh-call a[href^="tel"]{font:800 1.25rem/1 var(--font-display);letter-spacing:-.02em;color:#E0B35A}
.xh-call span{margin:0 8px;opacity:.5}
.xh-media{position:relative;overflow:hidden;background:#0C2E24}
.xh-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.xh-media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#07211A 0,rgba(7,33,26,0) 14%),linear-gradient(0deg,rgba(7,33,26,.75) 0,rgba(7,33,26,0) 30%)}
.xh-names{position:absolute;left:0;right:0;bottom:22px;z-index:2;display:flex;justify-content:space-around;padding:0 6%}
.xh-names span{display:grid;text-align:center;color:#CFE0D7;font-size:.74rem;letter-spacing:.08em}
.xh-names b{font:800 1rem/1.2 var(--font-display);letter-spacing:-.01em;color:#fff}
@media(max-width:1000px){
  .xhero{grid-template-columns:1fr;min-height:0}
  .xh-media{order:-1;aspect-ratio:16/10}
  .xh-media::before{background:linear-gradient(0deg,rgba(7,33,26,.85) 0,rgba(7,33,26,0) 40%)}
  .xh-copy{padding:28px 20px 40px}
  .xh-in{max-width:none}
}
@media(max-width:480px){.xh-grid{grid-template-columns:1fr}.xh-names{bottom:10px}.xh-names span{font-size:.62rem}.xh-names b{font-size:.84rem}}

/* ---- problem tiles --------------------------------------------------------------- */
.probs-sec{background:#fff;border-bottom:1px solid var(--m-line)}
.probs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px}
.probs a{position:relative;display:grid;gap:4px;padding:20px 52px 20px 20px;border:1.5px solid var(--m-line);border-radius:14px;background:#fff;color:var(--m-ink);text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.probs a:hover,.probs a:focus-visible{border-color:var(--m-green);box-shadow:0 14px 30px rgba(16,35,28,.1);transform:translateY(-2px)}
.probs b{font:800 1.08rem/1.25 var(--font-display);letter-spacing:-.015em}
.probs span{color:var(--m-muted);font-size:.9rem}
.probs i{position:absolute;right:18px;top:50%;transform:translateY(-50%);font-style:normal;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--m-mint);color:var(--m-green);font-weight:800;transition:background .15s,color .15s}
.probs a:hover i{background:var(--m-green);color:#fff}
.probs a.probs-chk{background:var(--m-deep);border-color:var(--m-deep)}
.probs a.probs-chk b{color:#fff}.probs a.probs-chk span{color:#B6CDC1}
.probs a.probs-chk i{background:var(--m-brass);color:var(--m-deep)}
@media(max-width:900px){.probs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.probs{grid-template-columns:1fr}}

/* ---- header: phone always shown on desktop ------------------------------------------ */
@media(min-width:1400px){body.mfd .nav-cta .cta-long{display:inline}body.mfd .nav-cta .cta-short{display:none}}
body.mfd .nav-cta .btn-gold{font-weight:800;letter-spacing:-.01em}

/* ---- dark inner-page headers (whole site) ---------------------------------------- */
.mhead{background:radial-gradient(700px 380px at 92% 0,rgba(181,138,50,.16),transparent 65%),linear-gradient(160deg,#0C2E24,#07211A);border-bottom:0;color:#DCEBE3}
body.mfd .mhead h1{color:#fff}
.mhead .lede{color:#C4D9CE}
.mhead .crumb,.mhead .crumb a{color:#9FC2B1}
.mhead-meta{color:#9FC2B1}
.mhead-meta b{color:#fff}
body.mfd .mhead .eyebrow{background:rgba(255,255,255,.08);color:#D8EADF}
body.mfd .mhead .eyebrow::before{background:var(--m-brass)}
.mhead .tracks-label{color:#9FC2B1}
.mhead .track-badge{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:#fff}
.mhead-fig::before{background:linear-gradient(135deg,rgba(181,138,50,.55),rgba(46,154,114,.35))}
body.mfd .phero{background:linear-gradient(160deg,#0C2E24,#07211A);color:#DCEBE3}
body.mfd .phero h1{color:#fff}
body.mfd .phero .lede,body.mfd .phero p{color:#C4D9CE}
body.mfd .phero .crumb,body.mfd .phero .crumb a{color:#9FC2B1}

/* v7 fixes: no section padding on the hero; whole group visible, centered on a blurred backdrop */
body.mfd section.xhero{padding:0}
.xh-media{display:flex;flex-direction:column;justify-content:center}
.xh-bg{position:absolute;inset:-40px;background:url("../photos/cr-v-team-steps-end.jpg") center/cover no-repeat;filter:blur(28px) brightness(.5) saturate(.9);transform:scale(1.1)}
.xh-vid{position:relative;inset:auto;display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;z-index:1;
  box-shadow:0 30px 80px rgba(0,0,0,.45);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%);mask-image:linear-gradient(90deg,transparent 0,#000 7%)}
.xh-media::before{z-index:2;background:linear-gradient(90deg,#07211A 0,rgba(7,33,26,0) 9%)}
.xh-names{position:relative;z-index:3;inset:auto;bottom:auto;margin-top:18px}
body.mfd .xh-call a{color:#fff}
body.mfd .xh-call a[href^="tel"]{color:#E0B35A}
@media(max-width:1000px){
  .xh-media{aspect-ratio:auto;display:block}
  .xh-bg{display:none}
  .xh-vid{-webkit-mask-image:none;mask-image:none;box-shadow:none}
  .xh-names{margin:0;padding:12px 6% 4px;background:#07211A}
}
/* v7.2: clean framed video, no blur */
.xh-bg{display:none}
.xh-media{padding:clamp(28px,4vw,64px) max(20px,calc((100vw - 1240px)/2 + 20px)) clamp(28px,4vw,64px) clamp(20px,3vw,48px);
  background:radial-gradient(600px 400px at 70% 30%,rgba(46,154,114,.18),transparent 65%),linear-gradient(200deg,#0F3D2E,#07211A)}
.xh-media::before{display:none}
.xh-vid{aspect-ratio:4/3;object-position:50% 35%;border-radius:18px;-webkit-mask-image:none;mask-image:none;
  box-shadow:0 0 0 1px rgba(224,179,90,.45),0 40px 90px rgba(0,0,0,.5)}
.xh-names{margin-top:20px;justify-content:space-between;padding:0 4%}
@media(max-width:1000px){.xh-media{padding:0}.xh-vid{aspect-ratio:16/10;border-radius:0;box-shadow:none}}

/* v7.3 (Sep 29): seamless hero video, no box. The clip sits at the bottom right and melts into the green
   on its left and top edges; one continuous background across the whole hero. */
.xhero{position:relative;display:block;overflow:hidden;
  background:radial-gradient(900px 520px at 8% 0,rgba(181,138,50,.14),transparent 60%),linear-gradient(160deg,#0C2E24 0,#07211A 100%)}
.xh-copy{position:relative;z-index:3;background:none;min-height:min(84vh,800px);width:46%;min-width:520px}
.xh-media{position:absolute;top:0;right:0;bottom:0;width:62%;padding:0;background:none;display:block;z-index:1}
.xh-media::before{display:none}
.xh-vid{position:absolute;right:0;bottom:0;left:auto;top:auto;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:50% 40%;
  border-radius:0;box-shadow:none;transform:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 30%),linear-gradient(to bottom,transparent 0,#000 32%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 30%),linear-gradient(to bottom,transparent 0,#000 32%);mask-composite:intersect}
.xh-media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;z-index:2;pointer-events:none;background:linear-gradient(0deg,rgba(7,33,26,.85),transparent)}
.xh-names{position:absolute;z-index:3;left:18%;right:4%;bottom:22px;margin:0;padding:0;display:flex;justify-content:space-around}
.xh-names span{text-shadow:0 2px 12px rgba(0,0,0,.6)}
@media(min-width:1700px){.xh-media{width:58%}}
@media(max-width:1000px){
  .xh-copy{width:auto;min-width:0;min-height:0}
  .xh-media{position:relative;width:100%;height:auto;aspect-ratio:16/10}
  .xh-vid{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;
    -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);mask-image:linear-gradient(to bottom,#000 55%,transparent 100%)}
  .xh-media::after{display:none}
  .xh-names{left:4%;right:4%;bottom:6%;background:none}
}
html{scroll-behavior:auto}
/* v7.4: bigger seamless clip, group centred, fills most of the hero height */
@media(min-width:1001px){
  .xh-vid{width:132%;right:auto;left:-16%;
    -webkit-mask-image:linear-gradient(to right,transparent 12%,#000 34%,#000 100%),linear-gradient(to bottom,transparent 0,#000 26%);
    mask-image:linear-gradient(to right,transparent 12%,#000 34%,#000 100%),linear-gradient(to bottom,transparent 0,#000 26%)}
  .xh-names{left:20%;right:2%}
}
@media(max-width:1000px){.xhero{display:flex;flex-direction:column}.xh-media{order:-1}}
body.mfd .art-main .stats .stat .n.big{font-size:clamp(1.8rem,2.4vw,2.5rem);line-height:1.05}body.mfd .art-main .stats{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}

/* ==== launch QC (Oct 2): hard rules. No text on people photos; never crop the top of a head. ==== */
/* hero: the clip ends above the hero floor, names sit BELOW it on plain green */
@media(min-width:1001px){
  .xh-vid{bottom:64px;
    -webkit-mask-image:linear-gradient(to right,transparent 12%,#000 34%,#000 100%),linear-gradient(to bottom,transparent 0,#000 26%,#000 90%,transparent 100%);
    mask-image:linear-gradient(to right,transparent 12%,#000 34%,#000 100%),linear-gradient(to bottom,transparent 0,#000 26%,#000 90%,transparent 100%)}
  .xh-media::after{display:none}
  .xh-names{bottom:16px}
}
@media(max-width:1000px){
  .xh-media{aspect-ratio:auto;padding-bottom:58px}
  .xh-vid{position:relative;inset:auto;height:auto;aspect-ratio:16/9;-webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent 100%);mask-image:linear-gradient(to bottom,#000 80%,transparent 100%)}
  .xh-names{bottom:8px}
}
.xh-names span{text-shadow:none}
/* attorney tiles: photo on top, caption panel below (no text on the portrait) */
.lw-grid{min-height:0;grid-template-rows:auto}
.lw-tile{display:flex;flex-direction:column;background:#0A2A20}
.lw-tile img{position:relative;inset:auto;height:auto;aspect-ratio:4/5;object-position:50% 0%}
.lw-tile::after{display:none}
.lw-cap{position:static;padding:14px 16px 16px;background:#0A2A20}
.lw-tile.lw-big{grid-row:1/3}
.lw-tile.lw-big img{flex:1;min-height:0;aspect-ratio:auto}
@media(max-width:960px){.lw-tile,.lw-tile.lw-big{aspect-ratio:auto}.lw-tile.lw-big img{aspect-ratio:4/5}}
/* in-court band: clip on the right half only, text over plain green on the left */
.courtband::before{display:none}
.cb-vid{left:auto;right:0;width:58%;opacity:1;object-position:18% 0%;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 28%);mask-image:linear-gradient(to right,transparent 0,#000 28%)}
.courtband{background:linear-gradient(160deg,#0C2E24,#07211A)}
.cb-in>*{max-width:560px}
@media(max-width:760px){.cb-vid{position:relative;width:100%;height:auto;aspect-ratio:16/9;-webkit-mask-image:linear-gradient(to bottom,#000 75%,transparent);mask-image:linear-gradient(to bottom,#000 75%,transparent);margin-top:-40px;display:block}
  .courtband{padding-top:0}.courtband .cb-in{padding-top:18px}}
/* frames match the 3:2 photos; anything that still crops anchors to the top */
.vp-card img,body.mfd .postcard .p-media,body.mfd .bloglead .bl-media img{aspect-ratio:3/2}
body.mfd .postcard .p-media img,body.mfd .bl-media img,.mhead-fig img,.msplit img,.vp-card img,.lawyer img{object-position:50% 0%}
/* launch QC 2: nothing overlaps a photo's box */
@media(min-width:1001px){
  .xh-media{width:52%}
  .xh-in{max-width:520px}
  .xh-vid{left:0;right:auto;width:122%;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 18%),linear-gradient(to bottom,transparent 0,#000 26%,#000 90%,transparent 100%);
    mask-image:linear-gradient(to right,transparent 0,#000 18%),linear-gradient(to bottom,transparent 0,#000 26%,#000 90%,transparent 100%)}
  .xh-names{left:4%;right:18%}
}
@media(min-width:761px){.cb-vid{width:46%}.cb-in>*{max-width:520px}}
body.mfd .postcard .p-chip,body.mfd .bloglead .bl-cat{position:static;display:inline-block;margin:12px 0 8px 16px;transform:none}
body.mfd .postcard .p-media{display:flex;flex-direction:column;aspect-ratio:auto}
body.mfd .postcard .p-media .shot{aspect-ratio:3/2;width:100%;height:auto;object-fit:cover;object-position:50% 0%}
body.mfd .art-main .split{grid-template-columns:1fr}
body.mfd .art-main .split figure img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:50% 0%}
body.mfd .postcard figure.p-media{aspect-ratio:auto!important;height:auto}
body.mfd main img{object-position:50% 0%}
@media(min-width:1001px){.xh-vid{width:112%;left:-4%}.xh-names{left:10%;right:8%}}
/* Oct 5: no names under the hero video; the clip runs to the bottom edge and fades out */
.xh-names{display:none}
@media(min-width:1001px){.xh-vid{bottom:0}}
@media(max-width:1000px){.xh-media{padding-bottom:0}}