/* =========================================================
   POLAR BEAR — HERO
   ========================================================= */

.pb-hero {
  position: relative;
  background: linear-gradient(90deg, #DEC3A9 0%, #F0DFCE 22%, #F6ECE2 42%, #F8EFE6 100%);
  overflow: hidden;
}

.pb-hero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.pb-hero__photo img {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 62%;
  object-fit: cover;
}
.pb-hero__photo::before {
  /* soft fade so the photo blends into the cream background, matching the
     original photo's natural depth-of-field falloff rather than a hard edge */
  content: "";
  position: absolute;
  inset: 0;
  right: 30%;
  background: linear-gradient(90deg, #F8EFE6 0%, rgba(248,239,230,0.85) 40%, rgba(248,239,230,0) 100%);
  z-index: 1;
}

.pb-hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--pb-container);
  margin-inline: auto;
  padding: var(--pb-space-7) var(--pb-space-5);
  min-height: 545px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pb-hero__text { max-width: 560px; }

.pb-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--pb-fs-tiny);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pb-terracotta-dark);
  margin-bottom: var(--pb-space-3);
}

.pb-hero h1 {
  font-size: clamp(1.9rem, 1.5rem + 1.7vw, 2.7rem);
  line-height: 1.2;
  font-weight: 600;
}
.pb-hero h1 em {
  font-style: italic;
  color: var(--pb-terracotta);
  font-weight: 500;
}

.pb-hero__desc {
  margin-top: var(--pb-space-4);
  color: var(--pb-body);
  font-size: 1rem;
  max-width: 34ch;
}

.pb-hero__cta {
  margin-top: var(--pb-space-5);
}

.pb-hero__dots {
  display: flex;
  gap: 8px;
  margin-top: var(--pb-space-6);
}
.pb-hero__dots span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(23,19,15,0.18);
  transition: all var(--pb-speed-med) var(--pb-ease);
}
.pb-hero__dots span.is-active {
  background: var(--pb-ink);
  width: 22px;
  border-radius: 5px;
}

.pb-hero__review {
  position: absolute;
  z-index: 3;
  right: var(--pb-space-5);
  bottom: var(--pb-space-5);
  background: #fff;
  border-radius: var(--pb-radius-md);
  padding: 10px 16px;
  box-shadow: var(--pb-shadow-md);
  text-align: center;
  animation: pbFloat 5s ease-in-out infinite;
}
.pb-hero__review strong {
  display: block;
  font-family: var(--pb-font-display);
  font-size: 1.1rem;
  color: var(--pb-ink);
}
.pb-hero__review span {
  font-size: 0.62rem;
  color: var(--pb-star);
  font-weight: 700;
  letter-spacing: 0.03em;
}
@keyframes pbFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.pb-hero__scroll-cue {
  position: absolute;
  left: 50%;
  bottom: -22px;
  transform: translateX(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--pb-shadow-md);
  color: var(--pb-ink);
  animation: pbBounce 2.4s ease-in-out infinite;
  z-index: 3;
}
@keyframes pbBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}

/* Cute floating decorative sparkles/hearts — pure CSS, absolute-positioned,
   opacity+transform only (never triggers layout), tiny paint cost. Purely
   decorative flourish for the "cute and alive" feel without any JS/asset cost. */
.pb-float-deco {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  color: var(--pb-terracotta);
  opacity: 0.55;
  animation: pbDrift 6s ease-in-out infinite;
}
.pb-float-deco--1 { top: 14%; left: 8%; font-size: 1.1rem; animation-duration: 5.5s; }
.pb-float-deco--2 { top: 62%; left: 3%; font-size: 0.8rem; animation-duration: 7s; animation-delay: 1.2s; color: var(--pb-star); }
.pb-float-deco--3 { top: 30%; left: 42%; font-size: 0.7rem; animation-duration: 6.5s; animation-delay: 0.6s; }
@keyframes pbDrift {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(8deg); }
}
@media (prefers-reduced-motion: reduce) {
  .pb-float-deco { animation: none; }
}
@media (max-width: 900px) {
  .pb-float-deco { display: none; }
}

@media (max-width: 900px) {
  .pb-hero__inner { min-height: 0; padding-block: var(--pb-space-7) var(--pb-space-8); }
  .pb-hero__text { max-width: 100%; }
  .pb-hero h1 { max-width: 100%; font-size: var(--pb-fs-display-lg); }
  .pb-hero__photo img { width: 100%; opacity: 0.9; }
  .pb-hero__photo::before { right: 0; background: linear-gradient(180deg, #F8EFE6 30%, rgba(248,239,230,0.55) 60%, rgba(248,239,230,0.15) 100%); }
  .pb-hero__review { right: 12px; bottom: 12px; padding: 8px 12px; }
}

/* Trust strip */
.pb-trust {
  background: var(--pb-surface);
  border-bottom: 1px solid var(--pb-border);
}
.pb-trust__inner {
  max-width: var(--pb-container);
  margin-inline: auto;
  padding: var(--pb-space-5);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--pb-space-4);
}
.pb-trust__item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pb-trust__item svg { flex-shrink: 0; color: var(--pb-terracotta); }
.pb-trust__item strong {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--pb-ink);
}
.pb-trust__item span {
  font-size: 0.72rem;
  color: var(--pb-muted);
}
@media (max-width: 780px) {
  .pb-trust__inner { grid-template-columns: repeat(2, 1fr); gap: var(--pb-space-4) var(--pb-space-3); }
  .pb-trust__item strong { font-size: 0.74rem; }
}