/* ==========================================================================
   Home page. Values measured from the Elementor site (audit/measure-el/home-*.txt).
   Shared blocks (team grid, Direct Money Market, closing cards) are in shared.css.
   ========================================================================== */

@media (max-width: 1024px) {
  .site-main { --gutter: 16px; }
}
.home .site-main h2 { font-size: 45px; line-height: 60px; }
/* The loan cards hang between the hero and the intro; the charcoal page colour shows around them, as on the old site. */
.home .site-main { background: var(--c-charcoal); }

/* ---------- Hero ---------- */
.home-hero { position: relative; display: flex; align-items: center; min-height: calc(86vh - 90px); padding: 130px 0 240px; color: var(--c-white); background: var(--c-charcoal); overflow: hidden; isolation: isolate; }
.home-hero__media, .home-hero__overlay { position: absolute; inset: 0; }
.home-hero__media { z-index: -2; }
.home-hero__media picture { display: contents; }
.home-hero__media img, .home-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
/* Same overlay as the old hero: none on desktop, half on tablet, heavy on phones (where the image replaces the video). */
.home-hero__overlay { z-index: -1; background: var(--c-charcoal); opacity: 0; }
.home-hero__inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.home-hero__text, .home-hero__panel { padding: 0 10px; }
.home-hero__title { margin: 21px 0 35px; font-size: 42px; line-height: 42px; font-weight: 400; color: var(--c-white); }
.home-hero__highlight { color: var(--c-green-on-dark); font-weight: 900; text-transform: uppercase; }
.home .site-main .home-hero__subhead { margin: 0 0 20px; font-size: 32px; line-height: 32px; font-weight: 400; color: var(--c-white); }
.home-hero__panel { text-align: center; padding-bottom: 55px; }
.home-hero__panel-heading { margin: 2px 0 20px; font-size: 28px; line-height: 28px; font-weight: 400; color: var(--c-white); }
.home-hero__toggle {
  position: absolute; right: 24px; bottom: 166px; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .6); border-radius: 50%;
  background: rgba(46, 46, 46, .7); color: var(--c-white); font-size: 15px; transition: background-color .3s;
}
.home-hero__toggle:hover { background: var(--c-charcoal); }
.home-hero__toggle[hidden] { display: none; }

@media (max-width: 1024px) {
  .home-hero { min-height: 57vh; padding-top: 40px; }
  .home-hero__overlay { opacity: .5; }
  .home-hero__title, .home .site-main .home-hero__subhead, .home-hero__panel-heading { font-size: 35px; line-height: 1.2; }
}
@media (max-width: 767px) {
  .home-hero { display: block; min-height: 0; padding: 74px 0 150px; }
  .home-hero__overlay { opacity: .8; }
  .home-hero__video, .home-hero__toggle { display: none; }
  .home-hero__inner { grid-template-columns: 1fr; }
  .home-hero__text, .home-hero__panel { padding: 0; text-align: center; }
  .home-hero__title, .home .site-main .home-hero__subhead { line-height: 1.3; }
  .home .site-main .home-hero__subhead { margin-bottom: 0; }
  .home-hero__panel { margin-top: 35px; padding-bottom: 35px; }
  .home-hero__panel-heading { margin: 0 0 15px; font-size: 22px; line-height: 1.3; }
}

/* ---------- Loan cards (flip cards) ---------- */
.home-cards { position: relative; z-index: 2; margin-top: -142px; padding: 10px 0; }
.home-cards__grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; }
.flip-card { position: relative; overflow: hidden; border-radius: 8px; aspect-ratio: 460 / 264; background: var(--c-charcoal); color: var(--c-white); cursor: pointer; }
.flip-card__front { position: absolute; inset: 0; }
.flip-card__front picture { display: contents; }
.flip-card__front img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.flip-card__label { position: absolute; left: 20px; bottom: 20px; right: 40px; z-index: 1; }
.flip-card__title { margin: 8px 0 10px; font-size: 28px; line-height: 33.6px; font-weight: 700; color: var(--c-white); }
.flip-card__subheading { margin: 8px 0 20px; font-family: var(--f-head); font-size: 18px; line-height: 21.6px; font-weight: 500; }
/* The dot in the corner grows to fill the card, as the old plugin did. */
.flip-card__dot { position: absolute; right: 10px; bottom: 10px; z-index: 2; width: 20px; height: 20px; border-radius: 50%; background: var(--c-charcoal); transition: transform 1.2s ease, border-radius 1.2s ease; }
.flip-card__back {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; text-align: center;
  font-size: 16px; line-height: 24px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .6s ease;
}
.flip-card__text { margin: 0 0 24px; }
.flip-card__button { display: inline-block; padding: 10px 17px; background: var(--c-green-hover); color: var(--c-white); font-family: var(--f-head); font-size: 18px; line-height: 27px; font-weight: 400; text-decoration: none; }
.flip-card__button:hover, .flip-card__button:focus-visible { background: var(--c-white); color: var(--c-black); }
.flip-card:focus-within .flip-card__dot, .flip-card.is-open .flip-card__dot { transform: scale(60); border-radius: 0; }
.flip-card:focus-within .flip-card__back, .flip-card.is-open .flip-card__back { opacity: 1; pointer-events: auto; }
@media (hover: hover) {
  .flip-card:hover .flip-card__dot { transform: scale(60); border-radius: 0; }
  .flip-card:hover .flip-card__back { opacity: 1; pointer-events: auto; }
}
@media (max-width: 1024px) {
  .home-cards__grid { grid-template-columns: minmax(0, 1fr); }
  .flip-card { aspect-ratio: 370 / 214; }
}
@media (max-width: 767px) {
  .home-cards .container { padding-inline: 10px; }
  .flip-card__back { font-size: 14px; line-height: 20px; padding: 12px; }
  .flip-card__text { margin-bottom: 12px; }
}

/* ---------- Intro ---------- */
.home-intro { position: relative; z-index: 1; margin-top: -64px; padding: 150px 0 100px; background: var(--c-white) var(--texture, none) 0 0 repeat; }
.home .site-main .home-intro__heading { margin: 0 0 20px; text-align: center; color: var(--c-green); }
.home-intro__text { font-size: 21px; line-height: 37px; font-weight: 500; color: var(--c-black); }
.home-intro__text p:last-child { margin-bottom: 14px; }
/* Links in the intro were set in the heading font, bold, not underlined. */
.home-intro__text a { font-family: var(--f-head); font-size: 18px; font-weight: 700; color: var(--c-charcoal); text-decoration: none; }
.home-intro__text a:hover, .home-intro__text a:focus-visible { color: var(--c-green); text-decoration: underline; }
@media (max-width: 767px) {
  .home-intro { margin-top: 0; padding: 50px 0; }
}

/* ---------- Proven Success split ---------- */
.home-proven { padding: 0; }
.home-proven__inner { display: grid; grid-template-columns: 70% 30%; align-items: center; }
.home-proven__text { padding-right: 24px; }
.home .site-main .home-proven__heading { margin: 0 0 20px; }
.home-proven__body { font-size: 18px; line-height: 34px; }
.home-proven__media img { width: 100%; }
@media (max-width: 1024px) {
  .home-proven { padding: 35px 0 50px; }
}
@media (max-width: 767px) {
  .home-proven { padding: 50px 0; }
  .home-proven__inner { grid-template-columns: 1fr; }
  .home-proven__text { padding-right: 0; }
  .home-proven__body { margin-bottom: 35px; }
}

/* ---------- Meet the Team ---------- */
.home-team { padding: 75px 0; background: var(--c-white) var(--texture, none) center / cover no-repeat; }
.home-team__inner { display: flex; flex-direction: column; gap: 24px; }
.home .site-main .home-team__heading { margin: 0; text-align: center; color: var(--c-charcoal); }
.home-team__points { columns: 2; column-gap: 20px; margin: 0; padding: 0; list-style-position: outside; font-size: 18px; line-height: 27px; color: var(--c-charcoal); }
.home-team__points li { break-inside: avoid; margin: 0 0 14px 40px; }
.home-team__action { display: flex; justify-content: center; padding: 10px; }
@media (max-width: 1024px) {
  .home-team { padding: 50px 0; }
}
@media (max-width: 767px) {
  .home-team__points { columns: 1; }
}

/* ---------- Recent Closings ---------- */
.home-closings { padding: 85px 0; }
.home-closings__shape { position: absolute; top: 0; left: 0; width: calc(100% + 1.3px); height: 155px; fill: var(--c-white); pointer-events: none; }
.home-closings__inner { position: relative; }
.home .site-main .home-closings__heading { margin: 0 0 20px; text-align: center; color: var(--c-green); }
@media (max-width: 1024px) {
  .home-closings { padding: 50px 0; }
  .home .site-main .home-closings__heading { margin-bottom: 45px; }
}