/* VIP Auto Customs · Financing (finance.html). Page rules on top of css/home.css, which is linked first.
   A short decision page: a ~70vh hero (the render car under a heavy wash), one text-media row (tile parallax from
   js/home.js), the two lenders on the page's one light band, the calm close.
   Red once per screen: the italic word in the hero (--red) and the close's mono label (--red-text, #EE2C35, the same red
   lifted a touch so 10px type holds 4.5:1 on the ground; #E3202A measures 4.4:1). The row kicker and the band's label
   stay grey. On the warm white: labels at 62% ink (5.4:1), body at 74% ink. */

:root{--red-text:#EE2C35;--paper:#F4F3EF;--ink:#0B0B0B;--red-ink:#CC1B25;--row-media:min(520px,37vw)}

.f-mono{font:500 13px/1.4 var(--sans);letter-spacing:.02em;text-transform:none;color:var(--label)}
.f-kicker{font:500 13px/1.5 var(--sans);letter-spacing:.02em;text-transform:none;color:var(--red-text)}
.f-kicker--red{color:var(--red-text)}

/* ---------------------------------------------------------------- (1) hero */
.f-hero{position:relative;height:calc(var(--screen) * .7);min-height:560px;max-height:900px;overflow:hidden;background:var(--ground)}
.f-hero__media{position:absolute;inset:0}
.f-hero__media img{width:100%;height:100%;object-fit:cover;object-position:62% 58%;filter:saturate(.55)}
/* the heavy wash: the car stays a presence on the right, the left third is near-ground for the type */
.f-hero__wash{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(5,5,5,.94) 0%,rgba(5,5,5,.84) 38%,rgba(5,5,5,.6) 70%,rgba(5,5,5,.66) 100%),
    linear-gradient(180deg,rgba(5,5,5,.7) 0%,rgba(5,5,5,0) 22%,rgba(5,5,5,0) 70%,var(--ground) 100%)}
.f-hero__head{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(40px,8vh,88px);z-index:2;max-width:760px}
.f-hero__title{margin-top:20px;font:300 clamp(56px,min(6vw,11vh),112px)/1 var(--serif);font-variation-settings:'opsz' 72;letter-spacing:-.025em;color:var(--text);margin-left:-.03em}
.f-hero__title em{font-style:italic;color:var(--red)}
.f-hero__line{margin-top:24px;max-width:46ch;font:300 17px/1.55 var(--sans);color:rgba(242,241,237,.82)}
.f-hero__btn{margin-top:clamp(28px,4vh,40px)}

/* ---------------------------------------------------------------- (2) the text-media row: kicker and title at the top,
   the body pinned to the bottom; a 4:5 photo with the tile parallax. About 700px tall at 1440+. */
.f-row{display:grid;grid-template-columns:minmax(0,1fr) var(--row-media);gap:clamp(48px,8vw,160px);align-items:stretch;
  max-width:1440px;margin:0 auto;padding:clamp(64px,8vh,96px) var(--gutter) clamp(72px,9vh,108px)}
.f-row__text{display:flex;flex-direction:column;justify-content:space-between;gap:40px;min-width:0;max-width:520px}
.f-row__title{margin-top:22px;font:300 clamp(42px,3.35vw,52px)/1.04 var(--serif);font-variation-settings:'opsz' 72;letter-spacing:-.02em;color:var(--text)}
.f-row__body{max-width:44ch}
.f-row__body p{font:300 15px/1.7 var(--sans);color:rgba(242,241,237,.8)}
.f-row__body p+p{margin-top:14px}
.f-row__btn{margin-top:32px}
.f-row .e-tile__media{background:var(--panel);aspect-ratio:4/5;width:100%;margin:0}

/* ---------------------------------------------------------------- (3) the lenders: the page's one light band */
.f-lenders{--label:rgba(11,11,11,.62);--box:rgba(11,11,11,.42);--hair:rgba(11,11,11,.16);--text:var(--ink);
  padding:clamp(96px,13.5vh,152px) var(--gutter) clamp(88px,12.5vh,136px);background:var(--paper);color:var(--ink)}
.f-lenders ::selection{background:var(--ink);color:var(--paper)}
.f-lenders :focus-visible{outline-color:var(--ink)}
.f-lenders__inner{max-width:1240px;margin:0 auto}
.f-lenders__label{font:500 13px/1 var(--sans);letter-spacing:.02em;text-transform:none;color:var(--red-ink);text-align:center;margin-bottom:clamp(36px,5.4vh,58px)}
.f-lenders__cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,32px)}
.f-lender{display:flex;flex-direction:column;align-items:flex-start;min-height:clamp(276px,31vh,348px);padding:clamp(28px,3.1vw,50px);border:1px solid var(--hair)}
.f-lender__name{font:300 clamp(40px,3.7vw,58px)/1.02 var(--serif);font-variation-settings:'opsz' 72;letter-spacing:-.02em;color:var(--ink)}
.f-lender__line{margin:18px 0 36px;max-width:34ch;font:300 16px/1.6 var(--sans);color:rgba(11,11,11,.74)}
.f-lender__btn{margin-top:auto;color:var(--ink)}
.f-lender__btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.f-lenders__note{margin-top:clamp(32px,4.5vh,50px);text-align:center;font:400 13px/1.6 var(--sans);letter-spacing:.02em;text-transform:none;color:var(--label)}

/* ---------------------------------------------------------------- (4) the calm close, on the ground */

/* ---------------------------------------------------------------- tablet and phone */
@media (max-width:1023px) and (min-width:768px){
  :root{--row-media:44vw}
  .f-row{gap:48px}
}
@media (max-width:767px){
  .f-hero{height:calc(var(--screen) * .78);min-height:560px}
  .f-hero__media img{object-position:70% 60%}
  .f-hero__wash{background:linear-gradient(180deg,rgba(5,5,5,.72) 0%,rgba(5,5,5,.6) 30%,rgba(5,5,5,.84) 62%,var(--ground) 100%)}
  .f-hero__head{left:20px;right:20px;bottom:40px}
  .f-hero__title{font-size:clamp(52px,15vw,64px)}
  .f-hero__line{font-size:16px}
  .f-row{grid-template-columns:1fr;gap:36px;padding:72px 20px 88px}
  .f-row__media{order:-1}
  .f-row__text{gap:32px;max-width:none}
  .f-row__title{font-size:44px}
  .f-lenders{padding:88px 20px 96px}
  .f-lenders__label{text-align:left;margin-bottom:32px}
  .f-lenders__cards{grid-template-columns:1fr;gap:16px}
  .f-lender{min-height:0;padding:32px 24px}
  .f-lender__name{font-size:44px}
  .f-lender__line{margin:14px 0 28px}
  .f-lender__btn{margin-top:0;width:100%}
  .f-lenders__note{text-align:left;margin-top:32px}
}