:root{
  --bg: #0b0b0b;
  --txt: #e8e8e8;
  --muted: #a3a3a3;
  --accent: rgb(255, 219, 89);
  --overlay80: rgba(0,0,0,0.80);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--txt); }
body{ font-family:"Epilogue", system-ui, Segoe UI, Roboto, Arial, sans-serif; }
img{ max-width:100%; display:block; }

/* container */
.container{ width:min(1200px, 92vw); margin-inline:auto; }

/* HERO */
.hero{
  position: relative;
  height: 65svh;            /* top ~65% of viewport (mobile-safe) */
  width: 100%;
  overflow: clip;
}

.hero__video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;            /* fills area, may crop (no stretch) */
  object-position: center top;  /* keep more of the top of the frame visible */
  z-index: 0;
  pointer-events: none;         /* ignore taps/clicks so scrolling never triggers video UI/fullscreen */
}

/* Full-bleed overlay — SOLID 80% (no gradient) */
.hero__overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--overlay80); /* <-- solid 80% black */
}

/* Text moved to UPPER-LEFT */
.hero__center{
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;          /* <-- stack "Jaime Aburto" over "Business Lending Authority" */
  align-items: flex-start;         /* top-left anchor */
  justify-content: flex-start;
  padding: clamp(24px, 8vw, 72px); /* <-- ~3x more top/left padding (scales on mobile) */
  text-align: left;
  gap: 0.2rem;                     /* tight, consistent spacing between the two lines */
}

.hero__title{
  margin: 0;                       /* remove extra gap */
  font-weight: 700;
  color: #fff;
  font-size: clamp(28px, 4.5vw, 54px);
  line-height: clamp(36px, 6vw, 72px);
}

.hero__subtitle{
  margin: 0;                       /* keep right under the title */
  font-weight: 500;
  color: var(--accent);
  font-size: clamp(18px, 3vw, 32px);
  line-height: clamp(26px, 4.6vw, 44px);
}

/* BIO */
.bio{ padding:6rem 0; background:#0f0f10; }
.bio-grid{
  display:grid;
  grid-template-columns: minmax(180px, 1fr) 3fr;  /* ~25% / 75% */
  gap: clamp(24px, 4vw, 48px);
}
.bio-left{ display:flex; flex-direction:column; align-items:center; }
.bio-photo{
  width:100%; height:auto; aspect-ratio:1/1; object-fit:cover;
  border-radius:12px; border:1px solid #222;
}

.socials{ display:flex; gap:14px; margin-top:16px; }
.social{
  display:inline-grid; place-items:center;
  width:40px; height:40px; border-radius:999px;
  background:#141414; border:1px solid #242424;
}
.social svg{ width:22px; height:22px; fill:#e6e6e6; }
.social:hover svg{ opacity:.9; transform:translateY(-1px); transition:.2s ease; }

.bio-left-spacer{ height:140px; }

.bio-right h2{
  margin: 0 0 .75rem 0;
  font-weight: 700;
  font-size: clamp(24px, 3vw, 32px);
  color: #E7C369;             /* <-- new color */
}
.bio-right p{ color:#dedede; line-height:1.65; margin:0 0 1.05rem 0; }
.bio-right a{ color:var(--accent); text-underline-offset:2px; }

/* FOOTER */
.site-footer{
  background:#0b0b0b;
  padding:40px 0;
}

/* 3-column grid:
   [ spacer | centered socials+button | right-aligned logo ] */
.footer-inner{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:16px;
}

/* Make socials + button one inline row (no line breaks) */
.footer-left{
  grid-column: 2;
  justify-self: center;
  display: flex;                 /* NEW */
  align-items: center;           /* NEW */
  gap: 14px;                     /* space between icons group and button */
  flex-wrap: nowrap;             /* prevents wrapping */
}

/* Icons row */
.footer-socials{
  display:flex;
  gap:14px;
  justify-content:center;
}

.footer-socials .social{
  width:42px; height:42px;
  display:inline-grid; place-items:center;
  border-radius:999px; background:#141414; border:1px solid #242424;
}
.footer-socials .social svg{ width:22px; height:22px; fill:#e6e6e6; }

/* Contact button (kept inline in the same flex row) */
.btn-contact{
  display:inline-block;
  padding:.7rem 1.1rem;
  border-radius:999px;
  background:rgb(255, 219, 89);
  color:#111; font-weight:700; text-decoration:none;
  /* no margin-left needed since we use gap on .footer-left */
}

/* Keep the logo on the right */
.footer-right{
  grid-column: 3;
  justify-self: end;
}

/* Optional tiny-screen tweak to avoid wrapping on very narrow phones */
@media (max-width: 380px){
  .footer-left { gap: 10px; }
  .footer-socials .social{ width:36px; height:36px; }
  .footer-socials .social svg{ width:20px; height:20px; }
  .btn-contact{ padding:.55rem .9rem; }
}