/* ==========================================================================
   Layout V4 — "Version 2" homepage layout (Round 20, 2026-08-10)
   Adapted from the structure of https://microvilla-html.wpthemeverse.com —
   floating stat cards straddling the hero, a split image+text About block,
   an icon-card philosophy grid, photo-backed area cards, a no-price property
   showcase, a 3-step process band, and a photo gallery. The existing 3D
   scroll-video hero mechanism (scroll-video-wrap / createScrollVideo in
   main.js) is untouched — this file only adds NEW section styles that sit
   around it. Real-estate-inapplicable reference sections (pricing plans,
   testimonials, blog) are intentionally not built — see the project notes.
   ========================================================================== */

/* ---- Floating stat row, straddles the hero's bottom edge ---- */
.hero-stat-float{
  position: relative;
  z-index: 5;
  margin: -46px 0 0;
}
@media (min-width: 768px){ .hero-stat-float{ margin-top: -64px; } }
.hero-stat-float .wrap{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--clr-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}
@media (min-width: 768px){ .hero-stat-float .wrap{ grid-template-columns: repeat(4, 1fr); } }
.hero-stat-float .stat-float-item{
  background: var(--clr-black-soft);
  padding: 22px 20px 24px;
  text-align: center;
}
.hero-stat-float .stat-float-item .num{
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.6vw, 2.2rem);
  color: var(--clr-green-bright);
  line-height: 1;
}
.hero-stat-float .stat-float-item .label{
  margin-top: 8px;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--clr-mist);
}

/* ---- Split about: paired photos + narrative text ---- */
.split-about{
  display: grid;
  gap: 40px;
  align-items: center;
}
@media (min-width: 900px){ .split-about{ grid-template-columns: 1fr 1fr; gap: 56px; } }
.split-about-media{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.split-about-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
}
.split-about-media .img-a{ aspect-ratio: 3/4; align-self: end; }
.split-about-media .img-b{ aspect-ratio: 3/4; margin-top: 34px; }
.split-about-text .eyebrow{ margin-bottom: 14px; }
.split-about-text h2{ margin-bottom: 16px; }
.split-about-text p + p{ margin-top: 12px; }
.split-about-text .btn-row{ margin-top: 24px; }

/* ---- Area cards ("Areas We're Active In") ----
   Round 34: converted from a static grid to a continuously auto-scrolling,
   seamless-loop marquee (same technique as .ticker/.ticker-track — the
   track's content is duplicated once in the HTML, and a CSS keyframe
   slides the whole track left by exactly -50% so the loop point is
   invisible), and the cards themselves sized up 25% (previous 5-column
   grid width was ~230px on desktop — now a fixed 288px at that
   breakpoint, scaling down at smaller breakpoints; height follows
   automatically from the unchanged 9:16 aspect-ratio). */
.area-card-grid{
  overflow: hidden;
}
.area-card-track{
  display: inline-flex;
  gap: 16px;
  animation: areaCardScroll 40s linear infinite;
}
@keyframes areaCardScroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (min-width: 640px){ .area-card-track{ gap: 18px; } }
@media (min-width: 1024px){ .area-card-track{ gap: 20px; } }
.area-card{
  position: relative;
  flex: 0 0 auto;
  width: 250px;
  aspect-ratio: 9/16;
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 18px;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--clr-line);
}
@media (min-width: 640px){ .area-card{ width: 275px; } }
@media (min-width: 1024px){ .area-card{ width: 288px; } }
.area-card::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,15,20,0) 40%, rgba(11,15,20,0.86) 100%);
  pointer-events: none;
}
.area-card .area-card-label{
  position: relative; z-index: 1;
}
.area-card .area-card-label .name{
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--clr-white);
  display: block;
}
.area-card .area-card-label .tag{
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--clr-green-bright);
  display: block;
  margin-top: 4px;
}

/* ---- 3-step process band ---- */
.process-steps{
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
  counter-reset: step;
}
@media (min-width: 800px){ .process-steps{ grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.process-step{
  position: relative;
  padding: 30px 24px 26px;
  border: 1px solid var(--clr-line);
  border-radius: var(--radius-md);
  background: var(--clr-black-soft);
}
.process-step .step-num{
  font-family: var(--font-display);
  font-size: 2.1rem;
  color: rgba(var(--clr-green-rgb),0.5);
  line-height: 1;
  margin-bottom: 14px;
}
.process-step h3{ margin-bottom: 8px; }
.process-step p{ color: var(--clr-mist); font-size: 0.92rem; }
@media (min-width: 800px){
  .process-step:not(:last-child)::after{
    content: '';
    position: absolute;
    top: 44px; right: -14px;
    width: 20px; height: 1px;
    background: var(--clr-line);
  }
}

/* ---- Photo gallery (masonry-ish via CSS columns) ---- */
.photo-gallery{
  columns: 2;
  column-gap: 14px;
}
@media (min-width: 800px){ .photo-gallery{ columns: 3; } }
.photo-gallery img{
  width: 100%;
  display: block;
  border-radius: var(--radius-md);
  margin-bottom: 14px;
  break-inside: avoid;
}

/* ---- Decision matrix (Round 48: Problem / Impact / Desire / Solution /
   Decision -- a 5-stage persuasive sequence, distinct from .process-steps
   (which explains logistics, not why-to-act). Same connecting-line technique
   as .process-step, sized for 5 columns instead of 3. The final "Decision"
   card is visually distinct (solid accent fill) so it reads as the payoff,
   not just another step. ---- */
.decision-matrix{
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
}
@media (min-width: 700px){ .decision-matrix{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1150px){ .decision-matrix{ grid-template-columns: repeat(5, 1fr); gap: 16px; } }
.dm-step{
  position: relative;
  padding: 26px 22px 24px;
  border: 1px solid var(--clr-line);
  border-radius: var(--radius-md);
  background: var(--clr-black-soft);
}
.dm-step .dm-tag{
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-green-bright);
  margin-bottom: 10px;
}
.dm-step h3{ font-size: 1.05rem; margin-bottom: 8px; }
.dm-step p{ color: var(--clr-mist); font-size: 0.88rem; }
@media (min-width: 1150px){
  .dm-step:not(:last-child)::after{
    content: '';
    position: absolute;
    top: 38px; right: -12px;
    width: 16px; height: 1px;
    background: var(--clr-line);
  }
}
.dm-step.dm-decision{
  background: var(--clr-green);
  border-color: var(--clr-green);
}
.dm-step.dm-decision .dm-tag,
.dm-step.dm-decision h3{ color: var(--clr-ink); }
.dm-step.dm-decision p{ color: rgba(0,0,0,0.65); }
.dm-step.dm-decision .btn{ margin-top: 16px; }