/* Site refresh styles: hero background images and the hero call-now card.
   Linked only on pages enabled in data/site-refresh.js so pages outside the
   rollout keep their deployed stylesheet reference. */

/* Hero background images for heroes without a dedicated image treatment.
   Applied through .hero-bg plus a .hero-bg--{key} image rule. */
.hero-bg { background-color: var(--navy); background-image: var(--hero-image); background-position: var(--hero-position, center); background-repeat: no-repeat; background-size: cover; }
.hero-bg::before { opacity: 1; background: linear-gradient(90deg, rgba(2,11,18,.97) 0%, rgba(4,17,28,.9) 33%, rgba(5,20,33,.72) 59%, rgba(4,16,27,.56) 76%, rgba(2,11,18,.76) 100%), linear-gradient(180deg, rgba(2,11,18,.24), rgba(2,11,18,.6)); }
.hero-bg--private-lender { --hero-image: url("/assets/images/heroes/commercial-private-lender-hero.jpg"); --hero-position: 38% 30%; }
.hero-bg--land { --hero-image: url("/assets/images/heroes/land-loans-hero.jpg"); --hero-position: 38% 30%; }
.hero-bg--construction { --hero-image: url("/assets/images/heroes/commercial-construction-sunset.jpg"); --hero-position: 38% 30%; }
.hero-bg--cre, .hero-bg--resources { --hero-image: url("/assets/images/heroes/commercial-real-estate-financing.png"); --hero-position: center 48%; }
.hero-bg--property, .hero-bg--refinance, .hero-bg--programs { --hero-image: url("/assets/images/heroes/commercial-property-loans.png"); --hero-position: center 52%; }
.hero-bg--bridge { --hero-image: url("/assets/images/heroes/commercial-bridge-loans.png"); --hero-position: 62% center; }
.hero-bg--lenders { --hero-image: url("/assets/images/heroes/lenders.png"); --hero-position: center 53%; }
.hero-bg--multifamily { --hero-image: url("/assets/images/portfolio/southwest-apartments.webp"); --hero-position: center 45%; }
.hero-bg--dscr-rental-loans { --hero-image: url("/assets/images/portfolio/southeast-build-to-rent.webp"); --hero-position: center 55%; }
.hero-bg--fix-and-flip-loans { --hero-image: url("/assets/images/portfolio/mountain-west-multifamily.webp"); --hero-position: center 40%; }
.hero-bg--ground-up-construction-loans { --hero-image: url("/assets/images/portfolio/pacific-northwest-construction.webp"); --hero-position: center 45%; }
.hero-bg--commercial-mezzanine-financing { --hero-image: url("/assets/images/portfolio/great-lakes-office.webp"); --hero-position: center 40%; }

/* Hero call-now card, matching the /get-quote/ landing page treatment. */
.hero-phone { display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 290px; max-width: max-content; margin-top: 18px; padding: 14px 16px 14px 18px; background: linear-gradient(135deg, rgba(199,119,46,.18) 0%, rgba(199,119,46,.1) 100%); border: 1px solid rgba(199,119,46,.45); border-left: 4px solid #c7772e; border-radius: 14px; box-shadow: 0 12px 28px rgba(0,0,0,.22); color: #fff; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.hero-phone:hover { transform: translateY(-1px); box-shadow: 0 16px 34px rgba(0,0,0,.28); background: linear-gradient(135deg, rgba(199,119,46,.26) 0%, rgba(199,119,46,.14) 100%); }
.hero-actions + .hero-phone { margin-top: 18px; }
.hero-phone__text { display: flex; flex-direction: column; gap: 4px; }
.hero-phone__eyebrow { color: #d5a24e; font-family: var(--heading); font-size: 10px; font-weight: 800; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; }
.hero-phone__main { color: #fff; font-family: var(--heading); font-size: 18px; font-weight: 800; line-height: 1.12; letter-spacing: -.015em; }
.hero-phone__arrow { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; background: #c7772e; color: #082858; font-size: 20px; font-weight: 900; line-height: 1; box-shadow: 0 8px 18px rgba(199,119,46,.28); transition: transform .18s ease; }
.hero-phone:hover .hero-phone__arrow { transform: translateX(3px); }
@media (max-width: 767px) {
  .hero-bg { background-position: 60% center; }
  .hero-bg::before { background: linear-gradient(90deg, rgba(2,11,18,.96), rgba(4,17,28,.8)), linear-gradient(180deg, rgba(2,11,18,.25), rgba(2,11,18,.65)); }
  .hero-phone { width: 100%; min-width: 0; max-width: 100%; padding: 13px 14px 13px 16px; }
  .hero-phone__main { font-size: 16px; }
  .hero-phone__arrow { width: 32px; height: 32px; font-size: 18px; }
}