@charset "utf-8";
/* The Night Nanny Service — stylesheet */

@font-face {
  font-family: 'ParisNN';
  src: url('../assets/fonts/PARISNN.woff') format('woff'), url('../assets/fonts/PARISNN.ttf') format('truetype');
  font-weight: normal; font-style: normal; font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #fdf9f5;
  color: #3d4f56;
  font-family: 'DM Sans', system-ui, sans-serif;
}
img { max-width: 100%; }
a { color: #1f6d91; }
a:hover { color: #0b2b36; }

/* ---------- animations ---------- */
@keyframes nnFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes nnGlow { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.09); } }
@keyframes nnTwinkle { 0%, 100% { opacity: 0.22; } 50% { opacity: 1; } }
@keyframes nnFadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.75s ease, transform 0.75s ease; }
[data-reveal].is-visible { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- top bar ---------- */
.topbar { background: #0b2b36; color: #cfe6f6; }
.topbar-in {
  max-width: 1180px; margin: 0 auto; padding: 9px 22px;
  display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: space-between;
  font-size: 13.5px; letter-spacing: 0.02em;
}
.topbar-in a { color: #fff; text-decoration: none; font-weight: 500; }

/* ---------- header / nav ---------- */
.site-head {
  position: sticky; top: 0; z-index: 30;
  background: rgba(253, 249, 245, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #ece2d7;
}
.site-head-in {
  max-width: 1180px; margin: 0 auto; padding: 14px 22px;
  display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between;
}
.wordmark {
  font-family: 'ParisNN', 'Segoe Script', cursive;
  font-size: 30px; line-height: 1; color: #0b2b36; text-decoration: none; white-space: nowrap;
}
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.nav-link {
  font: 500 15px 'DM Sans', system-ui, sans-serif;
  color: #3d4f56; background: transparent; border: 0;
  padding: 10px 13px; border-radius: 999px; text-decoration: none; cursor: pointer;
}
.nav-link:hover { background: #f0e7dc; color: #0b2b36; }
.nav-link-active { background: #f0e7dc; color: #0b2b36; }
.nav-group { position: relative; }
.nav-menu {
  display: none; position: absolute; top: calc(100% + 8px); right: 0; width: 290px;
  background: #fff; border: 1px solid #ece2d7; border-radius: 14px;
  box-shadow: 0 18px 40px rgba(11, 43, 54, 0.12); padding: 8px; z-index: 40;
}
.nav-menu.is-open { display: grid; gap: 2px; }
.nav-menu a { font-size: 15px; color: #17323b; text-decoration: none; padding: 11px 14px; border-radius: 10px; }
.nav-menu a:hover { background: #f4f8fc; }
.btn-primary {
  font: 500 15px 'DM Sans', system-ui, sans-serif;
  color: #fff; background: #0b2b36; padding: 11px 20px; border-radius: 999px;
  text-decoration: none; margin-left: 6px;
}
.btn-primary:hover { background: #1f6d91; color: #fff; }

/* ---------- quote carousel ---------- */
.dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(11, 43, 54, 0.25); cursor: pointer; display: block; }
.dot-on { background: #0b2b36; }

/* ---------- contact form ---------- */
.form-msg { font-size: 15px; margin: 0; }
.form-msg-error { color: #b8360f; font-weight: 500; }
.form-msg-ok { color: #1f6d91; }

.btn-send {
  font: 500 16px 'DM Sans', system-ui, sans-serif;
  color: #fff; background: #0b2b36; border: 0;
  padding: 14px 30px; border-radius: 999px; cursor: pointer;
}
.btn-send:hover { background: #1f6d91; }

/* ---------- footer ---------- */
.site-foot { background: #0b2b36; }
.page-home .site-foot { margin-top: 0; }
body:not(.page-home) .site-foot { margin-top: 70px; }
.site-foot-in {
  max-width: 1180px; margin: 0 auto; padding: 54px 22px 26px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 36px;
}
.site-foot-in > div { display: grid; gap: 9px; align-content: start; }
.site-foot-in a { font-size: 15.5px; color: #e8f3fa; text-decoration: none; }
.site-foot-in a:hover { color: #fff; }
.foot-mark { font-family: 'ParisNN', 'Segoe Script', cursive; font-size: 30px; line-height: 1.1; color: #fff; margin: 0 0 7px; }
.foot-note { font-size: 15.5px; line-height: 26px; color: #cfe6f6; margin: 0; }
.foot-h { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: #7fb3cc; margin: 0 0 5px; }
.foot-tel { font-size: 18px; font-weight: 500; margin: 0; }
.foot-tel a { color: #fff; font-size: 18px; }
.foot-mail { margin: 0; }
.foot-mail a { word-break: break-word; }
.site-foot-legal { max-width: 1180px; margin: 0 auto; padding: 18px 22px 30px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.site-foot-legal p { font-size: 13px; color: #9dc3d6; margin: 0; }
.site-foot-legal a { color: #9dc3d6; text-decoration: none; }

/* ---------- hover / focus states used in the page markup ---------- */
.st1h:hover { background: #cfe6f6; color: #0b2b36; transform: translateY(-2px); }
.st2h:hover { background: rgba(255,255,255,0.12); color: #ffffff; transform: translateY(-2px); }
.st3h:hover { transform: translateY(-6px); box-shadow: 0 18px 38px rgba(11,43,54,0.12); }
.st4h:hover { color: #0b2b36; }
.st5h:hover { background: #ffffff; }
.st6h:hover { background: #cfe6f6; }
.st7h:hover { background: rgba(255,255,255,0.1); color: #ffffff; }
.st8h:hover { background: #1f6d91; }
.st9f:focus { outline: none; border-color: #1f6d91; }