/* "Working on a new website" page: loaded after styles.css */
body.coming-soon {
  /* Red fill everywhere, banner image pinned to the bottom-right so the half ninja head shows in the corner */
  background: #aa2418 url("../images/header-background.jpg") right bottom / max(100%, 1200px) auto no-repeat;
  color: #fff;
}
.coming-soon-main {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 48px 0;
}
.coming-soon-main .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.coming-soon-logo {
  height: 64px;
  width: auto;
  margin-bottom: 40px;
}
.coming-soon .section-overline {
  background: #0101db;
  border-color: #0101db;
  color: #fff;
  margin-bottom: 16px;
}
.coming-soon h1 {
  font-family: var(--font-display);
  font-size: clamp(48px, 8vw, 96px);
  font-weight: 400;
  line-height: 1.05;
  margin: 0 0 24px;
  color: #fff;
}
.coming-soon .tagline strong { color: #e5b417; font-weight: 800; }
.coming-soon .countdown {
  grid-template-columns: repeat(4, 1fr);
  max-width: 640px;
  margin-top: 8px;
}
.coming-soon-next {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.coming-soon-next .btn-buy { background: #820301; } /* same dark red as the countdown cards */
.coming-soon-next .btn-buy:hover { background: #5e0201; }
.coming-soon-next-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}
.coming-soon-footer {
  padding: 20px 0;
  font-size: 13px;
  color: rgba(255, 255, 255, .8);
  text-align: center;
}
.coming-soon-footer p { margin: 0 0 12px; }
.coming-soon-footer .footer-social { justify-content: center; margin: 0; }
.coming-soon-footer .footer-social a { color: #fff; }
.coming-soon-footer .footer-social a:hover { color: #e5b417; }

@media (max-width: 768px) {
  .coming-soon-main { padding-bottom: 160px; } /* keep content clear of the ninja head */
  .coming-soon-main .container,
  .coming-soon-next { align-items: center; text-align: center; }
  .coming-soon-logo { height: 48px; }
}
@media (max-width: 480px) {
  .coming-soon .countdown { grid-template-columns: repeat(2, 1fr); }
  .coming-soon .countdown-card { min-width: 0; padding: 14px 12px; }
}