/* ===========================================================================
   No1 Princess — Contact page (Figma 442-1322)
   Layered on top of home.css (tokens + shared nav/drawer/form/footer).
   =========================================================================== */

/* Page background behind the cream hero's rounded corners. */
.np-contact-page { background: var(--c-dark); }

/* ---- Nav: dark variant (the hero is light, so flip nav colours) -------- */
.np-contact-page .np-nav__brand-mark { color: var(--c-dark); }
.np-contact-page .np-nav__toggle { border-color: rgba(29, 29, 27, 0.55); }
.np-contact-page .np-nav__toggle span { background: var(--c-dark); }

/* ---- Contact hero (cream, rounded bottom, centred) --------------------- */
.np-contacthero {
  background: var(--c-cream);
  color: var(--c-dark);
  text-align: center;
  padding-top: clamp(120px, 16vh, 178px);   /* clear the absolute nav */
  padding-bottom: clamp(52px, 8vw, 96px);
  padding-inline: var(--gutter);
  border-radius: 0 0 clamp(28px, 4vw, 52px) clamp(28px, 4vw, 52px);
}
.np-contacthero__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(54px, 11vw, 128px); line-height: 1; letter-spacing: -0.04em;
  text-transform: uppercase; margin: 0;
}
.np-contacthero__sub {
  margin: clamp(18px, 3vw, 28px) auto 0;
  max-width: 56ch;
  font-family: var(--font-body); font-weight: 500;
  font-size: clamp(15px, 1.2vw, 20px); line-height: 1.6;
  color: var(--c-dark);
}
.np-contacthero__contacts {
  margin-top: clamp(28px, 4vw, 46px);
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(4px, 1vw, 12px);
}
.np-contacthero__contact {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(26px, 4.6vw, 57px); line-height: 1.15; letter-spacing: -0.03em;
  color: var(--c-dark); text-transform: uppercase; text-decoration: none;
  transition: color .2s ease;
}
.np-contacthero__contact:hover { color: var(--c-red); }