.hero {
  position: relative;
  padding: 140px 0 128px;
  text-align: center;
  /* Photo: Unsplash (free licence) -- swap for one of the client's own cakes. */
  background:
    linear-gradient(180deg, rgba(31, 12, 14, 0.6) 0%, rgba(31, 12, 14, 0.74) 100%),
    url("https://images.unsplash.com/photo-1568827999250-3f6afff96e66?w=1920&q=80&auto=format&fit=crop") center 40% / cover no-repeat,
    #2a1416;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(31, 12, 14, 0.35), transparent 70%);
  pointer-events: none;
}
.hero__inner { position: relative; max-width: 640px; margin: 0 auto; }
.hero__ornament {
  width: 64px;
  height: 1px;
  margin: 0 auto 28px;
  position: relative;
  background: linear-gradient(90deg, transparent, #7cc7f2, transparent);
}
.hero__ornament::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: #7cc7f2;
}
.hero h1 { font-size: 2.7rem; line-height: 1.22; margin-bottom: 20px; color: #fff; font-weight: 400; text-shadow: 0 2px 18px rgba(31, 12, 14, 0.45); }
.hero__lede { color: rgba(255, 255, 255, 0.9); margin-bottom: 34px; font-size: 1.05rem; text-shadow: 0 1px 10px rgba(31, 12, 14, 0.5); }
.hero__cta { box-shadow: 0 12px 32px -10px rgba(194, 24, 95, 0.6); }

@media (max-width: 640px) {
  .hero { padding: 96px 0 84px; background-position: center, 60% 40%, center; }
  .hero h1 { font-size: 2rem; }
  .hero h1 br { display: none; }
}

.trust-strip { background: var(--color-surface-alt); padding: 36px 0; }
.trust-strip__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.trust-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 0 12px;
}
.trust-item:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 34px;
  background: var(--color-line);
}
.trust-item svg { width: 30px; height: 30px; color: var(--color-brand); }
.trust-item span {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

@media (max-width: 640px) {
  .trust-strip__grid { grid-template-columns: repeat(2, 1fr); row-gap: 26px; }
  .trust-item:not(:first-child)::before { display: none; }
}