/* Homepage intro — below hero, glass hubs */
.oc-home-intro-row {
  background: #f7f5f2;
}

.oc-home-intro {
  --oc-ink: #1a1a1a;
  --oc-muted: #5c5c5c;
  --oc-accent: #8a6a3c;

  max-width: 68rem;
  margin: 0 auto;
  padding: 0.25rem 0 0.5rem;
  text-align: center;
}

.oc-home-intro__eyebrow {
  margin: 0 0 0.85rem;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oc-accent);
}

.oc-home-intro__title {
  margin: 0 0 1rem;
  font-size: clamp(1.65rem, 3.2vw, 2.55rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--oc-ink);
}

.oc-home-intro__lead {
  margin: 0 auto 1.65rem;
  max-width: 38rem;
  font-size: clamp(1rem, 1.35vw, 1.125rem);
  line-height: 1.65;
  color: var(--oc-muted);
}

.oc-home-intro__lead a {
  color: var(--oc-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: 600;
}

.oc-home-intro__lead a:hover,
.oc-home-intro__lead a:focus {
  color: var(--oc-accent);
}

/* Glass hub grid — homepage density */
.oc-home-intro .oc-home-hubs {
  margin: 0;
  text-align: left;
}

@media (min-width: 900px) {
  .oc-home-intro .oc-home-hubs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  .oc-home-intro .oc-shop-hub {
    min-height: 110px;
    padding: 16px 18px;
  }
}

@media (max-width: 690px) {
  .oc-home-intro {
    padding: 0 0.15rem;
    text-align: left;
  }

  .oc-home-intro__lead {
    margin-left: 0;
    margin-right: 0;
  }
}