.hero{
  position: relative;
  min-height: calc(100vh - var(--nav-h));
  display: grid;
  place-items: center;
  text-align: center;

  background: url("../imgs/PicsofOscar/hero.47aa855d832e.jpg") center / cover no-repeat;
  overflow: hidden;
}

/* The hero photo has Oscar on the right and red drapery on the left.
   Darker on the left (where the title sits) -> lighter on the right (where his face is). */
.heroOverlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,0.70) 0%,
      rgba(0,0,0,0.55) 35%,
      rgba(0,0,0,0.30) 65%,
      rgba(0,0,0,0.50) 100%
    ),
    linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.35));
}

.heroInner{
  position: relative;
  z-index: 2;
  width: min(980px, 92vw);
  padding: clamp(2rem, 6vw, 4.5rem) 1rem 6rem;
  color: rgba(255,255,255,0.92);
}

/* Ribbon badge */
.heroBadge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: hsl(var(--accent));
  border: 3px solid #fff;
  padding: 0.65rem 1.1rem;
  transform: rotate(-2deg);
  box-shadow: var(--shadow-hero);
  margin-bottom: 1.25rem;
}

.heroBadge span{
  font-family: var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  font-size: 1.05rem;
}

/* Big title */
.heroTitle{
  margin: 0;
  line-height: 0.95;
  text-transform: lowercase;
}

.heroTitleTop{
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 7vw, 6.2rem);
  color: hsl(var(--primary));
  text-shadow:
    0 3px 0 rgba(0,0,0,0.75),
    0 18px 45px rgba(0,0,0,0.35);
}

.heroTitleBottom{
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 8vw, 6.8rem);
  color: hsl(var(--accent));
  text-shadow:
    0 3px 0 rgba(0,0,0,0.75),
    0 18px 45px rgba(0,0,0,0.35);
}

.heroTagline{
  margin: 1.25rem 0 0.75rem;
  font-style: italic;
  font-size: clamp(1.1rem, 2.2vw, 1.7rem);
  color: rgba(255,255,255,0.92);
}

.heroBlurb{
  margin: 0.75rem auto 2rem;
  max-width: 70ch;
  font-size: 1.15rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.75);
}

/* Buttons */
.heroActions{
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 1.15rem;
  padding: 1rem 2.25rem;
  border: 3px solid transparent;
  transition: transform 150ms ease, background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.btnPrimary{
  background: hsl(var(--primary));
  color: #000;
  border-color: #000;
}

.btnPrimary:hover{
  transform: translateY(-1px);
  background: hsl(var(--primary) / 0.9);
}

.btnGhost{
  background: rgba(0,0,0,0.35);
  color: #fff;
  border-color: #fff;
}

.btnGhost:hover{
  transform: translateY(-1px);
  background: rgba(0,0,0,0.55);
}

/* Wave separator */
.heroWave{
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 84px;
  z-index: 3;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120'%3E%3Cpath fill='%23F9F7F2' d='M0,64 C240,120 480,10 720,64 C960,118 1200,12 1440,64 L1440,120 L0,120 Z'/%3E%3C/svg%3E")
    center / cover no-repeat;
}

/* ==========================================================================
   WHY SECTION (matches screenshot layout)
   ========================================================================== */

.why{
  background: hsl(var(--background));
  padding: 4.5rem 0;
}

.whyInner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);

  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

.whyLeft{
  position: relative;
  min-height: 420px;
}

.polaroid{
  position: absolute;
  background: #fff;
  border: 3px solid #000;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.polaroidSmall{
  width: 240px;
  height: 150px;
  left: 0;
  top: 40px;
  transform: rotate(-6deg);
  border-left: 10px solid hsl(var(--accent));
}

.polaroidBig{
  width: 300px;
  height: 380px;
  left: 110px;
  top: 110px;
  transform: rotate(2deg);
  border-left: 10px solid hsl(var(--primary));
}

.polaroidImg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

/* Right side */
.whyKicker{
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: hsl(var(--accent));
}

.whyTitle{
  margin: 0;
  font-family: var(--font-display);
  color: #000;
  font-size: clamp(2.6rem, 4.5vw, 3.75rem);
  line-height: 1.02;
}

.whyUnderline{
  width: 220px;
  height: 6px;
  background: hsl(var(--primary) / 0.55);
  margin: 0.9rem 0 1.25rem;
}

.whyCopy{
  margin: 0 0 1.5rem;
  max-width: 62ch;
  color: hsl(var(--muted-foreground));
  line-height: 1.75;
  font-size: 1.05rem;
}

/* Feature cards */
.featureStack{
  display: grid;
  gap: 1rem;
  max-width: 560px;
}

.featureCard{
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 0.85rem;
  align-items: center;

  background: #fff;
  border: 2px solid rgba(0,0,0,0.18);
  border-radius: 8px;
  padding: 1rem 1.15rem;
  box-shadow: 0 10px 22px rgba(0,0,0,0.10);
}

.featureCard.is-highlight{
  border-color: hsl(var(--primary));
}

.featureIcon{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: hsl(var(--primary));
  border: 2px solid #000;
  color: #000;
  display: grid;
  place-items: center;
  font-weight: 900;
}

.featureBody h3{
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: 0.06em;
  text-transform: none;
  color: #000;
  font-size: 1.2rem;
}

.featureBody p{
  margin: 0.25rem 0 0;
  color: hsl(var(--muted-foreground));
  line-height: 1.5;
  font-size: 0.98rem;
}

/* ==========================================================================
   CTA BAND
   ========================================================================== */

.ctaBand{
  background: hsl(var(--background));
  padding: 4rem var(--gutter) 5.5rem;
}

.ctaInner{
  max-width: 760px;
  margin: 0 auto;
  padding: 3rem 2rem 3.25rem;
  text-align: center;

  background: #fff;
  border: 4px solid #000;
  box-shadow: var(--shadow-block);
  position: relative;
}

/* small yellow tab on the corner — accent without overwhelming */
.ctaInner::before{
  content: "★";
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: hsl(var(--primary));
  border: 4px solid #000;
  font-family: var(--font-display);
  color: #000;
  font-size: 1rem;
}

.ctaTitle{
  margin: 0.25rem 0 0.85rem;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.2vw, 3.2rem);
  color: #000;
  line-height: 1.05;
}

.ctaCopy{
  margin: 0 auto 1.75rem;
  max-width: 56ch;
  color: hsl(var(--muted-foreground));
  line-height: 1.65;
  font-size: 1.05rem;
}

.ctaButton{
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;

  background: hsl(var(--accent));
  color: #fff;
  border: 3px solid #000;
  padding: 0.95rem 2rem;

  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 1rem;
  box-shadow: 5px 5px 0 #000;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.ctaButton:hover{
  transform: translateY(-3px);
  box-shadow: 5px 8px 0 #000;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 980px){
  .whyInner{
    grid-template-columns: 1fr;
  }

  .whyLeft{
    min-height: 360px;
    margin-bottom: 1.5rem;
  }

  .polaroidBig{ left: 90px; }
}

@media (max-width: 560px){
  .polaroidSmall{ width: 210px; height: 140px; }
  .polaroidBig{ width: 260px; height: 340px; left: 70px; }

  .btn{ width: min(340px, 92vw); }
}

/* =========================
   Mobile "Why" Section Fix
   ========================= */
@media (max-width: 720px){
  .whyInner{
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  /* Put text first, images after */
  .whyRight{
    order: 1;
  }

  .whyLeft{
    order: 2;

    /* KEY FIXES:
       - remove the reserved “absolute positioning space” so images don't “jump” down
       - lay out polaroids like normal blocks */
    min-height: auto;
    margin: 0;

    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 0;
  }

  /* Stop any aggressive positioning/overlap */
  .polaroid{
    position: relative;
    left: auto;
    top: auto;
    transform: none;
  }

  /* Make them a sane size on small screens */
  .polaroidSmall,
  .polaroidBig{
    width: min(170px, 44vw);
    height: auto;
  }

  .polaroidSmall{ aspect-ratio: 8 / 5; }
  .polaroidBig{ width: min(210px, 52vw); aspect-ratio: 4 / 5; }

  /* Ensure they never cover headings */
  .whyTitle{
    margin-top: 0;
  }
}