/* ===========================================================================
   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 colour variant (dark/"ink") is handled centrally by header.php/header.css. */

/* ---- 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;
  --global-palette-highlight-alt: var(--c-dark); /* same when focused/pressed (see home.css `a`) */
  transition: color .2s ease;
}
.np-contacthero__contact:hover { color: var(--c-red); }

/* ---- Mobile ------------------------------------------------------------- */
@media (max-width: 560px) {
  .np-contacthero { padding-top: clamp(92px, 15vh, 130px); }
  .np-contacthero__title { font-size: clamp(38px, 13vw, 68px); }
  /* the email is a long single line — shrink it and let it wrap so it never
     forces the page wider than the screen. */
  .np-contacthero__contact { font-size: clamp(16px, 5.2vw, 26px); overflow-wrap: anywhere; min-width: 0; max-width: 100%; }
  .np-contacthero__contacts { width: 100%; }
  .np-contacthero__sub { font-size: 15px; }
}