/* ---- Hero: full-bleed still image, never a flat dark/black band ---- */
.hero-video {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(30rem, 88vh, 44rem);
  overflow: hidden;
  background: var(--purple-900);
}
.hero-video__media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 25%;
}
.hero-video__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(18,13,23,0.92) 0%, rgba(18,13,23,0.72) 42%, rgba(18,13,23,0.35) 78%),
    linear-gradient(0deg, rgba(18,13,23,0.55) 0%, transparent 30%);
}
.hero-video > .container { width: 100%; }
.hero-video__content {
  position: relative;
  z-index: 1;
  max-width: 40rem;
  text-align: left;
  padding-block: clamp(3rem, 2.5rem + 2vw, 4rem);
}
@media (max-width: 700px) {
  .hero-video__content { text-align: center; margin-inline: auto; }
  .hero-video__content .hero-kicker,
  .hero-video__content .btn-row,
  .hero-video__content .hero-trust { justify-content: center; }
  .hero-video__content .lede { margin-inline: auto; }
}
.hero-video__content .eyebrow { color: var(--teal-300); }
.hero-video__content .eyebrow::before { display: none; }
.hero-video h1 { color: var(--white); font-size: clamp(1.9rem, 1.5rem + 2vw, 2.85rem); }
.hero-video .lede { color: var(--purple-100); max-width: 42ch; }

.hero-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 1rem; min-width: 0; }
.hero-kicker .eyebrow { min-width: 0; }
.hero-kicker .icon-tile {
  margin-bottom: 0; width: 2.15rem; height: 2.15rem; flex: none;
  background: rgba(255,255,255,0.14); color: var(--white);
}

.hero-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.85rem; margin-top: 1.5rem; min-width: 0; }
.hero-trust p { min-width: 0; }
.hero-trust__stack { display: flex; }
.hero-trust__stack img {
  width: 2.15rem; height: 2.15rem; border-radius: 50%;
  object-fit: cover; border: 2px solid rgba(255,255,255,0.7);
  margin-left: -0.6rem;
}
.hero-trust__stack img:first-child { margin-left: 0; }
.hero-trust p { font-size: 0.82rem; color: var(--purple-100); font-weight: 600; }
.hero-trust p span { color: var(--teal-300); }

.btn--hero {
  padding: 1rem 1.75rem;
  font-size: 0.92rem;
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}
.hero-video .btn--outline { border-color: rgba(255,255,255,0.55); color: var(--white); }
.hero-video .btn--outline:hover { background: rgba(255,255,255,0.12); border-color: var(--white); }

/* ---- Who we are ---- */
.whoweare-head { max-width: 42rem; }
.whoweare-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
  align-items: stretch;
}
@media (max-width: 960px) { .whoweare-grid { grid-template-columns: 1fr; } }
.whoweare-panel {
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 21rem;
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
@media (max-width: 960px) { .whoweare-panel { min-height: 0; } }
.whoweare-panel:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.whoweare-panel--dark { background: var(--purple-900); border-color: var(--purple-900); color: var(--white); }
.whoweare-panel--dark .tag { color: var(--teal-300); border-left-color: var(--teal-300); }
.whoweare-panel--dark p { color: var(--purple-150); }
.whoweare-panel--dark .icon-tile { background: rgba(255,255,255,0.12); color: var(--teal-300); }
.whoweare-stat {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.5rem, 3rem + 3vw, 5.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--purple-600);
  margin-bottom: 0.5rem;
}
.whoweare-panel .tag { margin-bottom: 0.9rem; }
.whoweare-panel p { color: var(--ink-700); font-size: 0.95rem; }
.whoweare-panel .icon-tile { margin-bottom: 1rem; }
.whoweare-panel.whoweare-panel--dark p { color: var(--purple-150); }
.whoweare-panel .btn--ghost { margin-top: 1.1rem; }
.whoweare-panel.whoweare-panel--dark .btn--ghost { color: var(--teal-300); }
.whoweare-panel.whoweare-panel--dark .btn--ghost:hover { color: var(--teal-100); }

/* ---- Ecosystem flow ---- */
.flow-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
@media (max-width: 960px) { .flow-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .flow-grid { grid-template-columns: 1fr; } }
.flow-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 9.5rem;
  justify-content: center;
}
.flow-card .tag { margin-bottom: 0.85rem; }
.flow-card h4 { font-size: 0.98rem; margin-bottom: 0.3rem; }
.flow-card p {
  font-size: 0.82rem;
  color: var(--color-ink-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.flow-note {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1rem 1.25rem;
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  color: var(--color-ink-muted);
}
.flow-note .icon { color: var(--color-accent); }

/* ---- Directory teaser: large angled hero image + overlapping card row ---- */
.mart-hero__media {
  position: relative;
  aspect-ratio: 21 / 8;
  border-radius: 28px;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100.000% 73.000%, 99.961% 73.776%, 99.847% 74.500%, 99.665% 75.121%, 99.429% 75.598%, 99.153% 75.898%, 98.857% 76.000%, 41.143% 76.000%, 40.847% 76.102%, 40.571% 76.402%, 40.335% 76.879%, 40.153% 77.500%, 40.039% 78.224%, 40.000% 79.000%, 39.800% 97.000%, 39.761% 97.776%, 39.647% 98.500%, 39.465% 99.121%, 39.229% 99.598%, 38.953% 99.898%, 38.657% 100.000%, 0 100%);
  border-radius: 28px;
}
@media (max-width: 700px) {
  .mart-hero__media {
    aspect-ratio: 4 / 5;
    clip-path: none;
  }
}
.mart-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform var(--duration-slow) var(--ease-out); }
.mart-hero__media:hover img { transform: scale(1.04); }
.mart-hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(27,20,32,0.9) 0%, rgba(27,20,32,0.35) 45%, rgba(27,20,32,0.05) 70%);
}
.mart-hero__overlay {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.75rem);
  max-width: 32%;
}
.mart-hero__overlay .btn { position: relative; z-index: 3; pointer-events: auto; }
.mart-hero__overlay .eyebrow { color: var(--teal-300); }
.mart-hero__overlay .eyebrow::before { background: var(--teal-300); }
.mart-hero__overlay h2 { color: var(--white); font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem); margin-bottom: 1.1rem; }
@media (max-width: 700px) {
  .mart-hero__overlay { max-width: 100%; }
}

.mart-hero__foot {
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: 1.5rem;
  margin-top: clamp(-4.8rem, -7.5vw, -3rem);
  position: relative;
  z-index: 2;
  align-items: end;
  pointer-events: none;
}
.mart-hero__foot .lede,
.mart-hero__foot .mart-card { pointer-events: auto; }
@media (max-width: 900px) {
  .mart-hero__foot { grid-template-columns: 1fr; margin-top: 1.25rem; }
}
.mart-hero__foot .lede { padding-top: 0.5rem; }
.mart-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}
@media (max-width: 640px) { .mart-cards { grid-template-columns: 1fr; } }
.mart-card {
  background: var(--purple-900);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 1.3rem 1.4rem 1.5rem;
  min-height: 7.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  transition: transform var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out);
}
.mart-card:hover { transform: translateY(-5px); background: var(--purple-800); }
.mart-card .icon-tile { background: var(--white); color: var(--purple-700); border-radius: 50%; margin-bottom: 1.4rem; width: 2.75rem; height: 2.75rem; }
.mart-card .icon-tile .icon { width: 1.35rem; height: 1.35rem; }
.mart-card__arrow {
  position: absolute; top: 1.4rem; right: 1.4rem;
  width: 1.9rem; height: 1.9rem;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  transition: background-color var(--duration-base) var(--ease-out);
}
.mart-card__arrow .icon { width: 0.85rem; height: 0.85rem; }
.mart-card:hover .mart-card__arrow { background: var(--teal-600); }
.mart-card h4 { font-size: 1.02rem; margin-bottom: 0.4rem; color: var(--white); }
.mart-card p { font-size: 0.84rem; color: var(--purple-150); line-height: 1.5; }

/* ---- Scrolling blog strip ---- */
.blog-scroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(17rem, 21rem);
  gap: 1.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  padding-top: 0.25rem;
  margin: 0 calc(var(--container-pad) * -1);
  padding-inline: var(--container-pad);
}
.blog-scroll { scrollbar-width: none; }
.blog-scroll::-webkit-scrollbar { display: none; }
.blog-card { scroll-snap-align: start; padding: 1.1rem 1.1rem 1.5rem; }
.blog-card__media { aspect-ratio: 16/10; margin-bottom: 1.25rem; border-radius: var(--radius-sm); }
.blog-card__media img { border-radius: var(--radius-sm); }
.blog-card h4 { font-size: 0.95rem; margin-bottom: 0.5rem; }
.blog-card p { font-size: 0.82rem; color: var(--color-ink-muted); }
.blog-card .tag { margin-bottom: 0.7rem; }

/* ---- Scrolling featured businesses strip ---- */
.featured-scroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 17rem);
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  padding-top: 0.25rem;
  margin: 0 calc(var(--container-pad) * -1);
  padding-inline: var(--container-pad);
  scrollbar-width: none;
}
.featured-scroll::-webkit-scrollbar { display: none; }
.featured-card {
  scroll-snap-align: start;
  display: block;
  padding: 1.5rem;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}
.featured-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-primary); }
.featured-card__logo {
  width: 3.5rem; height: 3.5rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-alt);
  display: grid; place-items: center;
  color: var(--purple-600);
  margin-bottom: 0.9rem;
}
.featured-card__logo img { width: 100%; height: 100%; object-fit: cover; }
.featured-card h4 { font-size: 1.02rem; }
.featured-card__name { display: flex; align-items: center; gap: 0.3rem; }
.featured-card__verified { width: 0.95rem; height: 0.95rem; color: var(--teal-600); flex: none; }
.featured-card p { font-size: 0.85rem; color: var(--color-ink-muted); line-height: 1.5; }

/* ---- Recent project: Skilling Hub ---- */
.project-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1.6rem + 2vw, 3.5rem);
  align-items: center;
}
@media (max-width: 900px) {
  .project-panel { grid-template-columns: 1fr; }
}
.project-panel__body { display: flex; flex-direction: column; justify-content: center; }

.project-collage picture { display: block; width: 100%; height: 100%; border-radius: var(--radius-md); overflow: hidden; }
.project-collage img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md); }
.project-collage__render {
  position: relative;
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.project-collage__render:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* Stacked cascade: second photo overlaps the first, inset and framed,
   so the pair reads as one deliberate collage instead of two boxes
   with dead space beneath them. */
.project-collage--stacked { position: relative; padding-bottom: 2rem; }
.project-collage--stacked .project-collage__render:first-child { aspect-ratio: 16 / 9; }
.project-collage--stacked .project-collage__render:last-child {
  aspect-ratio: 16 / 9;
  width: 65%;
  margin-left: auto;
  margin-top: -2.25rem;
  position: relative;
  z-index: 2;
  box-shadow: var(--shadow-lg);
}
.project-collage--stacked .project-collage__render:last-child picture {
  border: 5px solid var(--color-bg);
  box-sizing: border-box;
}
@media (max-width: 560px) {
  .project-collage--stacked { padding-bottom: 2rem; }
  .project-collage--stacked .project-collage__render:last-child { width: 70%; margin-top: -2rem; }
}
.project-callout { border-left: 2px solid var(--color-border); padding-left: 1.25rem; }
.project-callout .tag { margin-bottom: 0.6rem; }
.project-callout p { font-size: 0.95rem; color: var(--ink-700); margin-bottom: 1rem; }
.project-panel__desc { font-size: 0.92rem; }