/* ═══════════════════════════════════════════════════════════════
   Headmill Capital — home.css
   Homepage layouts only: hero, lenders, services, stats, about,
   reviews. Shared components live in base.css.
   ═══════════════════════════════════════════════════════════════ */

/* ── HERO ─────────────────────────────────────────────────────
   Full-bleed rather than a card in a box: the statement is the
   page, and the nav's material floats over it. Depth comes from
   two soft radial fields, not hard-edged decorative circles.    */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--forest);
  margin-top: -4.25rem;          /* content passes under the chrome */
  padding: 11rem 0 7rem;
}

.hero-field {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(70% 90% at 88% -10%, rgba(240, 233, 194, 0.22), transparent 62%),
    radial-gradient(90% 100% at 12% 115%, rgba(61, 90, 38, 0.95), transparent 66%),
    radial-gradient(55% 70% at 65% 40%, rgba(90, 127, 59, 0.55), transparent 70%);
}

.hero-content { position: relative; max-width: 74rem; }

.hero h1 {
  margin-top: 2rem;
  max-width: 18ch;
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  color: #fff;
  text-wrap: balance;
}

.hero h1 .accent { color: var(--cream); }

.hero-sub {
  margin-top: 1.75rem;
  max-width: 34rem;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--tr-lead);
  color: rgba(255, 255, 255, 0.86);
}

.hero-actions {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
}

.hero-points {
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(240, 233, 194, 0.16);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -0.004em;
  color: rgba(240, 233, 194, 0.85);
}

.hero-points li { display: flex; align-items: center; gap: 0.625rem; }
.hero-points li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cream);
  flex-shrink: 0;
}

/* ── LENDERS ──────────────────────────────────────────────────
   Draggable strip. Track position is owned by lenders.js so it
   can be grabbed, thrown and caught — no CSS transition here.   */
.lenders { padding: 4.5rem 0 1rem; }

.lenders-label {
  text-align: center;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-50);
}

.lenders-row {
  margin-top: 2.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.lenders-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-60);
  cursor: pointer;
  box-shadow: var(--sh-1);
  transition: background 0.2s var(--ease-out),
              color 0.2s var(--ease-out),
              transform 0.2s var(--ease-out);
}

.lenders-btn:hover { background: var(--forest); color: #fff; border-color: var(--forest); }
.lenders-btn:active { transform: scale(0.92); transition-duration: 0.1s; }

.lenders-marquee {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;         /* horizontal drags are ours, vertical scroll isn't */
  -webkit-tap-highlight-color: transparent;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.lenders-marquee.dragging { cursor: grabbing; }

.lenders-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.lenders-set {
  display: flex;
  align-items: center;
  gap: 3.5rem;
  padding-right: 3.5rem;
}

.lender-item {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}

.lender-item img {
  display: block;
  width: auto;
  opacity: 0.85;
  pointer-events: none;        /* never let the browser's native image drag win */
}

/* ── SERVICES ─────────────────────────────────────────────────
   Media-first cards. Hover lifts; press settles back down, so
   the card acknowledges the touch before the page navigates.    */
.services-grid {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

.service-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--r);
  background: #fff;
  border: 1px solid var(--line-lt);
  padding: 0 1.75rem 1.75rem;
  overflow: hidden;
  box-shadow: var(--sh-1);
  transition: box-shadow 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}

.service-card:hover { box-shadow: var(--sh-2); transform: translateY(-6px); }
.service-card:active { transform: translateY(-2px); transition-duration: 0.12s; }

.service-media {
  margin: 0 -1.75rem;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--cream-lt);
}

.service-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out);
}

.service-card:hover .service-media img { transform: scale(1.045); }

.service-icon {
  position: relative;
  margin-top: -1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--cream-lt);
  color: var(--forest);
  box-shadow: 0 0 0 5px #fff;
}

.service-card h3 {
  margin-top: 1.5rem;
  font-size: var(--fs-h3);
  font-weight: 800;
  letter-spacing: var(--tr-h3);
  line-height: var(--lh-h3);
}

.service-card p {
  margin-top: 0.875rem;
  flex: 1;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--ink-70);
}

.service-link {
  margin-top: 1.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: -0.008em;
  color: var(--forest);
  transition: color 0.2s var(--ease-out);
}

/* The arrow leans toward where the link is taking you. */
.service-link span {
  display: inline-block;
  transition: transform 0.3s var(--ease-out);
}
.service-card:hover .service-link { color: var(--pine); }
.service-card:hover .service-link span { transform: translateX(4px); }

/* ── STATS ──────────────────────────────────────────────────── */
.stats-panel {
  border-radius: var(--r-lg);
  background: var(--cream-lt);
  padding: 3rem 1.5rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}

.stat-num {
  font-size: clamp(3rem, 5vw, 3.75rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--forest);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat-num span { color: var(--moss); }

.stat-label {
  margin-top: 0.75rem;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-60);
}

.stat-desc {
  margin-top: 1rem;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--ink-70);
}

/* ── ABOUT ──────────────────────────────────────────────────── */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 4.5rem;
  align-items: center;
}

.about-photo {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-3);
}

.about-photo img {
  width: 100%;
  height: 100%;
  max-height: 36rem;
  object-fit: cover;
}

.about-body h2 {
  margin-top: 1.5rem;
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: var(--tr-h2);
  line-height: var(--lh-h2);
  text-wrap: balance;
}

.about-accent { color: var(--forest); }

.about-body p {
  margin-top: 1.25rem;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-70);
}

.about-points {
  margin-top: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-70);
}

.about-points li { display: flex; align-items: baseline; gap: 0.75rem; }
.about-points li::before {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--forest);
}

.about-body .btn { margin-top: 2.25rem; }

/* ── REVIEWS ────────────────────────────────────────────────── */
.reviews-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.reviews-rating { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-60); }
.reviews-rating .stars { color: var(--forest); letter-spacing: 0.1em; }

.reviews-grid {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

.review-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--r);
  background: #fff;
  border: 1px solid var(--line-lt);
  padding: 2rem;
  box-shadow: var(--sh-1);
  transition: box-shadow 0.35s var(--ease-out);
}

.review-card:hover { box-shadow: var(--sh-2); }

.review-stars {
  color: var(--forest);
  font-size: var(--fs-sm);
  letter-spacing: 0.2em;
}

.review-text {
  margin-top: 1.125rem;
  flex: 1;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  letter-spacing: -0.004em;
  color: rgba(31, 42, 26, 0.82);
}

.review-footer {
  margin-top: 1.75rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.review-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--cream-lt);
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--forest);
  flex-shrink: 0;
}

.review-name { font-size: var(--fs-sm); font-weight: 700; }
.review-src { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-50); }

/* ── RESPONSIVE (home) ──────────────────────────────────────── */
@media (max-width: 900px) {
  .services-grid,
  .reviews-grid { grid-template-columns: 1fr; }

  .about-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-photo img { max-height: 24rem; }

  .hero { padding: 9rem 0 5rem; }
}

@media (max-width: 640px) {
  .stats-grid { grid-template-columns: 1fr; gap: 2.5rem; }

  .hero { padding: 8rem 0 4rem; }
  .hero-actions .btn { width: 100%; }
  .hero-points { margin-top: 2.25rem; gap: 0.625rem 1.5rem; }

  .lenders-btn { display: none; }   /* on touch, dragging is the affordance */
}

@media (min-width: 641px) {
  .stats-panel { padding: 4rem 3rem; }
}

/* Design 2's translucent circles, kept inside the full-width hero only.
   Mobile keeps the original viewport framing; desktop uses the same 71rem
   content column at every viewport width. */
.hero-circles { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-circle { pointer-events: none; position: absolute; border-radius: 50%; z-index: -1; }
.hero-circle.c1 { right: -6rem; top: -6rem; width: 20rem; height: 20rem; background: rgba(90, 127, 59, 0.5); }
.hero-circle.c2 { right: -2rem; top: 8rem; width: 10rem; height: 10rem; background: rgba(240, 233, 194, 0.2); }
.hero-circle.c3 { bottom: -8rem; left: -4rem; width: 16rem; height: 16rem; background: rgba(61, 90, 38, 0.6); }
@media (min-width: 901px) {
  /* A solid forest field gives the reference circle colours their intended contrast. */
  .hero-field { background: none; }
  .hero-circles {
    top: 4.25rem;
    right: auto;
    left: 50%;
    width: min(calc(100% - 3rem), 71rem);
    transform: translateX(-50%);
  }
}
.hero-actions { align-items: center; }
.hero-action-note { color: rgba(255, 255, 255, .86); font-size: var(--fs-sm); }
.service-heading-link { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.service-heading-link .service-arrow { flex-shrink: 0; transition: transform .3s var(--ease-out); }
.service-card:hover .service-arrow { transform: translateX(4px); }
.about-photo figcaption { padding: 1.25rem; background: var(--cream-lt); color: var(--ink-70); font-size: var(--fs-sm); line-height: var(--lh-body); }
@media (prefers-reduced-motion: reduce) { .service-heading-link .service-arrow { transition: none; } }