/* ============================================================
   MAKAI — SECTIONS CSS v23
   Built directly from Figma JSON measurements.
   All pixel values are exact Figma source.
   ============================================================ */

/* ── SECTION 1: HERO ─────────────────────────────────────────
   Figma: 1920 × 1050px total
   Structure:
     .hero                   — full section, no bg (bg split by children)
     .hero__main             — top zone: navy #0C3157, ~760px tall
     .hero__city-bg          — city image at ~6% opacity, covers main zone
     .hero__grid             — 2 cols: text left, photo right
     .hero__pills-zone       — bottom zone: cream #F2E9D8, ~290px tall
     .hero__pills            — 4 navy cards, 240×138px each
   ──────────────────────────────────────────────────────────── */

.hero {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Top zone: navy bg with city image ── */
.hero__main {
  position: relative;
  background: #0C3157;
  padding: 80px 0 0; /* Remove bottom padding — photo fills to bottom edge */
  overflow: hidden;  /* Clip photo so it doesn't bleed into cream zone */
}

.hero__city-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero__city-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.06;
  display: block;
}

.hero__main .container {
  position: relative;
  z-index: 1;
  padding-bottom: 60px; /* text area bottom breathing room */
}

/* Two-column: text left ~55%, photo right ~45% */
.hero__grid {
  display: grid;
  grid-template-columns: 55% 45%;
  gap: 2rem;
  align-items: flex-end; /* photo sits flush at bottom */
}

/* LEFT: text content */
.hero__content {
  padding-bottom: 20px;
}

/* Eyebrow: solid amber pill — Figma shows bg=amber, radius=9999 */
.hero__eyebrow {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: #ED8A19;
  border-radius: 9999px;
  padding: 7px 18px;
  margin-bottom: 1.5rem;
}

/* H1: Poppins 700, 72px in Figma — scale to 60px for container */
.hero__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.1;
  color: #FFFFFF;
  margin-bottom: 1.25rem;
  letter-spacing: -0.01em;
}
.hero__title--amber {
  color: #ED8A19;
}

/* Subtitle: Poppins 400, 18px */
.hero__subtitle {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  max-width: 500px;
  margin-bottom: 2.5rem;
}

/* CTA buttons row */
.hero__actions {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

/* "Get Started" — navy filled, Figma: bg #0C3157, border 2px #0C3157, radius 4px */
.btn-hero--solid {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1.75rem;
  height: 56px;
  background: #1A2A3A;
  color: #FFFFFF;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 4px;
  border: 2px solid #1A2A3A;
  text-decoration: none;
  transition: all 0.2s;
  white-space: nowrap;
}
.btn-hero--solid:hover {
  background: #ED8A19;
  border-color: #ED8A19;
}

/* "Who We Are" — white outline only, no fill, Figma: border 2px white, radius 4px */
.btn-hero--outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1.75rem;
  height: 56px;
  background: transparent;
  color: #FFFFFF;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 4px;
  border: 2px solid #FFFFFF;
  text-decoration: none;
  transition: all 0.2s;
  white-space: nowrap;
}
.btn-hero--outline:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* RIGHT: hero photo — 426×645 in Figma, portrait */
.hero__photo-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding-right: 20px;
}
.hero__photo {
  width: 100%;
  max-width: 400px;
  height: 580px;
  object-fit: cover;
  object-position: center 10%;
  border-radius: 12px 12px 0 0;
  display: block;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* ── Bottom zone: cream bg with feature pills ── */
.hero__pills-zone {
  background: #F2E9D8;
  padding: 40px 0;
  position: relative;
  z-index: 1;
}

/* 4 pills in a row — each 240×138 in Figma */
.hero__pills {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

/* Each pill card — navy bg, Figma: bg #0C3157, blur overlay */
.hero__pill {
  background: #0C3157;
  border-radius: 8px;
  padding: 1.25rem 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  min-height: 138px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* Icon square — 44×44 amber, Figma: bg #ED8A19 */
.hero__pill-icon {
  width: 44px;
  height: 44px;
  background: #ED8A19;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hero__pill-icon img {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
  display: block;
}

.hero__pill-body {
  flex: 1;
  min-width: 0;
}
.hero__pill-body strong {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.3;
  margin-bottom: 0.4rem;
}
.hero__pill-body span {
  font-family: 'Poppins', sans-serif;
  font-size: 0.8125rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.5;
}

/* ── SECTION 2: INTRO TEXT ───────────────────────────────────
   White bg. Centered text block, max 760px.
   Poppins 400, 16px/18px, color #1A2A3A
   ──────────────────────────────────────────────────────────── */
.intro-text {
  background: #FFFFFF;
  padding: 80px 0;
}
.intro-text__inner {
  max-width: 760px;
  margin: 0 auto;
}
.intro-text__inner p {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.85;
  color: #1A2A3A;
  margin-bottom: 1.25rem;
}
.intro-text__inner p:last-child { margin-bottom: 0; }

/* ── SECTION 3: BUYER ADVOCACY ───────────────────────────────
   Figma: section 1192x592, white bg
   LEFT: overlay-shadow frame 564x520, bg=white, radius=20
         — this is the IMAGE container with white border effect
   RIGHT: text content ~564px wide
   Gap between: ~64px (1192 - 564 - 564)
   Fonts: eyebrow Poppins 600 12px amber, h2 Poppins 700 36px
          body Poppins 400 18px #6B7280
          subhead Poppins 600 14px #6B7280
          list items Poppins 400 16px #1A2A3A
          button Poppins 600 14px white, bg #0C3157, r=4, 248x56
   ──────────────────────────────────────────────────────────── */
.advocacy {
  background: #FFFFFF;
  padding: 80px 0;
}
.advocacy__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

/* Image container */
.advocacy__image {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.advocacy__img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  object-position: center top;
  border-radius: 16px;
  display: block;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}

/* Content */
.advocacy__eyebrow {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 0.75rem;        /* Figma: 12px */
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ED8A19;
  margin-bottom: 0.75rem;
}

/* Figma: Poppins 700, 36px, color #0C3157 */
.advocacy__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 2.25rem;        /* Figma: 36px */
  line-height: 1.2;
  color: #0C3157;
  margin-bottom: 0.875rem;
}

/* Amber underline — Figma: RECTANGLE 60×3, bg #ED8A19 */
.advocacy__underline {
  width: 60px;
  height: 3px;
  background: #ED8A19;
  border-radius: 0;
  margin-bottom: 1.5rem;
}

/* Figma: Poppins 400, 18px, color #6B7280 */
.advocacy__body {
  font-family: 'Poppins', sans-serif;
  font-size: 1.125rem;       /* Figma: 18px */
  line-height: 1.75;
  color: #6B7280;
  margin-bottom: 1.25rem;
}

/* Figma: Poppins 600, 14px, color #6B7280 */
.advocacy__subhead {
  font-family: 'Poppins', sans-serif;
  font-size: 0.875rem;       /* Figma: 14px */
  font-weight: 600;
  color: #6B7280;
  margin-bottom: 1rem;
}

.advocacy__list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

/* Figma: background 24×24, bg #0C3157, r=12 (circle), svg 16×16 inside */
.advocacy__list-item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;           /* Figma: 16px */
  font-weight: 400;
  line-height: 1.5;
  color: #1A2A3A;
}

.advocacy__check {
  width: 24px;
  height: 24px;
  background: #0C3157;
  border-radius: 50%;        /* Figma: r=12 on 24px = circle */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #FFFFFF;
}

/* Figma: link 248×56, bg #0C3157, r=4, Poppins 600 14px white */
.advocacy__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: 248px;
  height: 56px;
  justify-content: center;
  background: #0C3157;
  color: #FFFFFF;
  font-family: 'Poppins', sans-serif;
  font-size: 0.875rem;       /* Figma: 14px */
  font-weight: 600;
  border-radius: 4px;
  border: 2px solid #0C3157;
  text-decoration: none;
  transition: all 0.2s;
}

/* ── RESPONSIVE ──────────────────────────────────────────────*/