/* agentpage.css V006 | 2026-10-16 PT | phones under 377px wide no longer slide side to side: the 306px minimum height carried through the 16/13 shape forced the hero to 377px wide, so it now stays at screen width (Jorge: "the page scrolls left to right a little bit"). V005 | 2026-10-14 11:00 AM PT | the band hugs the card: 24px above and below on a laptop (was 44px), Jorge: "lower the padding on the top and the bottom to where we're roughly just a little bit above and below the card". V004 | 2026-10-14 10:40 AM PT | the loan officer band below the video; laptop text left, card right; the photo no longer cuts off the top of his head. V003 | 2026-10-14 10:22 AM PT | his loan officer card under the video, Text and Apply (Jorge: "Instead of text and email, I want to say text and apply"). V002 | 2026-10-14 9:35 AM PT | the white logo instead of his name, like the home page; 20% taller on a laptop, 30% taller on a phone. Jorge: "remove my name and just leave it exactly like the homepage, the logo there ... on the mobile version ... like 30% taller. And on the desktop version, a good 20% taller." V001 | 2026-10-14 9:23 AM PT | Jorge's own agent page: the home page video with the Buy / Rent / Sell search in the middle, in place of the
   still banner photo. Jorge 2026-10-14: "what I asked for was the hero video to play there with the search bar right in the middle, just like on the homepage.
   Maybe just not taking up the whole screen so you can still see half my details and half that hero video playing ... on a mobile device, as long as you keep
   the video landscape, you'll still be able to see my details on the visible screen before having to scroll down." So: about half the laptop screen, a
   landscape video on the phone, and his details close under it. */
.vhero--agent{height:clamp(456px,62vh,720px);min-height:0}
.vhero--agent::after{background:linear-gradient(180deg,rgba(6,12,20,.38),rgba(6,12,20,.24) 55%,rgba(6,12,20,.34))}
.vhero--agent .vhero__center{transform:none;height:100%;padding:0 20px;gap:26px}
.vhero--agent .vhero__logo{width:510px;max-width:80vw}
.agent-top{padding-top:56px}
@media (max-width:760px){
  .vhero--agent{height:auto;aspect-ratio:16/13;min-height:306px;width:100%}
  .vhero--agent .v-desk{display:none}.vhero--agent .v-phone{display:block}
  .vhero--agent::after{background:rgba(6,12,20,.32)}
  .vhero--agent .vhero__center{gap:12px;padding:0 14px}
  .vhero--agent .vhero__logo{width:62vw;max-width:270px}
  .vhero--agent .hsearch__tabs{padding-left:8px}
  .vhero--agent .hsearch__tabs>*{padding:8px 16px;font-size:14px}
  .vhero--agent .hsearch__bar{padding:4px 4px 4px 14px;border-radius:12px}
  .vhero--agent .hsearch__bar input{padding:9px 0;font-size:16px}
  .vhero--agent .hsearch__bar>button{width:40px;height:40px;border-radius:10px}
  .agent-top{padding-top:24px}
  .agent-top .agent{gap:22px}
  .agent-top .agent__photo{max-width:none}
  .agent-top .agent__photo img{aspect-ratio:4/3;object-position:center 22%}
}

/* V004 2026-10-14 the loan officer band right under the video (not over it). Laptop: the explanation on the left, the officer card on the right stacked like
   the phone. Phone: the officer card only. Jorge: "I don't like the card to be cutting into the hero video ... It probably can afford to have more text and
   explanation on the left. And this signature portion with the two buttons can be stacked like it is on the mobile, but on the right." */
.loband{background:#f4f4f4;padding:24px 24px}
.loband__in{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:56px;align-items:center}
.loband__eye{font:600 11px/1.4 var(--sans);letter-spacing:2.5px;text-transform:uppercase;color:#6b6b6b;margin:0 0 10px}
.loband__h{margin:0 0 14px;font-size:clamp(24px,2.4vw,32px)}
.loband__text p{margin:0 0 10px;font:300 16px/1.7 var(--sans);color:#333;max-width:560px}
.lofloat__card{background:#fff;border-radius:18px;box-shadow:0 8px 26px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.06);padding:20px 22px 22px}
.lofloat__eye{font:600 11px/1.4 var(--sans);letter-spacing:2.4px;text-transform:uppercase;color:#6b6b6b;margin:0 0 12px}
.lofloat__row{display:flex;align-items:center;gap:16px}
.lofloat__pic{flex:none;width:68px;height:68px;border-radius:50%;overflow:hidden;background:#2a2a2a}
.lofloat__pic img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.55);transform-origin:50% 3%}
.lofloat__who{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.lofloat__who b{font:600 17px/1.3 Inter,system-ui,sans-serif;color:#111;letter-spacing:0}
.lofloat__who span{font:400 13.5px/1.45 Inter,system-ui,sans-serif;color:#666;letter-spacing:0}
.lofloat__acts{display:flex;gap:10px;margin-top:16px}
.lofloat__btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:0;height:50px;padding:0 18px;border-radius:999px;border:1.5px solid #111;color:#111;background:#fff;
  font:600 15px/1 Inter,system-ui,sans-serif;letter-spacing:0;text-decoration:none;transition:background .2s,color .2s}
.lofloat__btn:hover{background:#f3f3f3}
.lofloat__btn--go{background:#111;color:#fff}
.lofloat__btn--go:hover{background:#333}
.loband + .agent-top{padding-top:56px}
@media (max-width:900px){.loband__in{grid-template-columns:minmax(0,1fr) 360px;gap:32px}}
@media (max-width:760px){
  .loband{padding:14px 14px 4px;background:#fff}
  .loband__in{display:block}
  .loband__text{display:none}
  .lofloat__card{padding:16px;border-radius:16px;box-shadow:0 6px 22px rgba(0,0,0,.10),0 1px 3px rgba(0,0,0,.06)}
  .lofloat__eye{margin-bottom:10px}
  .lofloat__pic{width:58px;height:58px}
  .lofloat__who b{font-size:16.5px}
  .lofloat__acts{margin-top:14px}
  .loband + .agent-top{padding-top:22px}
}