/* ==========================================================================
   Polygram – layout
   Header + navigation, page heads (home hero, sub page title), "Try Polygram"
   call-to-action band, footer.
   ========================================================================== */

/* ---- Header ------------------------------------------------------------
   Fixed and transparent at the top of the page; after 100px of scrolling
   main.js adds .is-stuck: white background, shadow, no vertical padding.  */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  padding: 30px 70px;
  background: transparent;
  transition: all .4s ease-out;
}
.site-header.is-stuck {
  padding-top: 0;
  padding-bottom: 0;
  background: #fff;
  box-shadow: 0 13px 35px -12px rgba(35, 35, 35, .1);
}
.navbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
}
.logo {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.logo img { display: block; width: 150px; }

.main-nav ul { display: flex; list-style: none; font-family: var(--font-alt); }
.main-nav a {
  position: relative;
  display: block;
  margin: 0 30px;
  padding: 30px 0;
  font-size: 18px;
  line-height: 36px;
  color: var(--ink);
}
/* menu hover: a black line grows from the centre under the label */
.main-nav a::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 20px;
  width: 99%;
  height: 2px;
  background: var(--ink);
  transform: scaleX(0);
  transition: transform .3s ease;
}
.main-nav a:hover::before, .main-nav a:focus-visible::before { transform: scaleX(1); }

/* hamburger (mobile only) */
.nav-toggle {
  display: none;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: #2a2a2a;
  box-shadow: 0 15px 20px 0 rgba(0, 0, 0, .05);
}
.nav-toggle span:not(.visually-hidden) {
  display: block;
  width: 26px;
  height: 2px;
  margin: 6px auto;
  background: #fff;
}

/* ---- Main ---------------------------------------------------------------- */
main { display: block; padding-top: 150px; }

/* ---- Home hero ("Business in numbers") with orbiting dots ---------------- */
.hero { padding: 46px 0 58px; }
.hero__inner {
  position: relative;
  z-index: 5;
  padding: 75px 0 24px;
  text-align: center;
}
.hero__title {
  max-width: 833px;
  margin: 0 auto;
  font-family: var(--font-alt);
  font-size: 80px;
  font-weight: 500;
  line-height: 1.1;
}
.hero__subtitle {
  max-width: 833px;
  margin: 0 auto;
  padding: 15px 25px 0;
  font-family: var(--font-alt);
  font-size: 24px;
  line-height: 1.75;
}
/* each .orbit is an invisible circle that rotates; its ::before is the dot */
.orbit { position: absolute; z-index: -1; border-radius: 50%; }
.orbit::before { content: ""; position: absolute; border-radius: 50%; }
.orbit--1 { width: 120px; height: 120px; left: 4%; top: 15%; animation: rotate-cw 12s linear infinite; }
.orbit--1::before { width: 6px; height: 6px; background: #fac3ff; top: 0; left: 50%; }
.orbit--2 { width: 160px; height: 160px; left: 15%; top: 30%; animation: rotate-cw 17s linear infinite; }
.orbit--2::before { width: 10px; height: 10px; background: #8fe9e0; top: 50%; right: 100%; }
.orbit--3 { width: 120px; height: 120px; left: 4%; bottom: 33%; animation: rotate-ccw 12s linear infinite; }
.orbit--3::before { width: 6px; height: 6px; background: #ffd5ad; bottom: 0; left: 50%; }
.orbit--4 { width: 120px; height: 120px; right: 5%; top: 13%; animation: rotate-cw 12s linear infinite; }
.orbit--4::before { width: 6px; height: 6px; background: #8fe9e1; top: 0; left: 50%; }
.orbit--5 { width: 160px; height: 160px; right: 7%; top: 30%; animation: rotate-cw 17s linear infinite; }
.orbit--5::before { width: 10px; height: 10px; background: #ffd5ad; top: 50%; right: 100%; }
.orbit--6 { width: 120px; height: 120px; right: 4%; bottom: 33%; animation: rotate-ccw 12s linear infinite; }
.orbit--6::before { width: 6px; height: 6px; background: #fac3ff; bottom: 0; left: 50%; }

/* ---- Sub page head (Explore, Insight, Contact) --------------------------- */
.page-head { padding: 10px 25px; text-align: center; }
.page-title {
  padding: 24px;
  font-size: 80px;
  font-weight: 900;
  line-height: 1;
  color: var(--ink);
}
.page-head .lead { margin-bottom: 0; }

/* ---- "Try Polygram" band ------------------------------------------------- */
.cta-band {
  position: relative;
  margin: 24px 0;
  background: var(--tint-mint);
  text-align: center;
}
.cta-band__inner { position: relative; z-index: 2; padding: 84px 25px 80px; }
.cta-band h2 { padding: 24px; font-size: 52px; line-height: 1; }
.cta-band p {
  margin-bottom: 58px;
  font-size: 32px;
  font-weight: 200;
  line-height: 1.7;
  color: var(--ink);
}
.cta-band__btn { display: inline-block; }
.cta-band__deco { position: absolute; z-index: 1; width: 220px; }
.cta-band__deco--left { top: 0; left: 0; }
.cta-band__deco--right { bottom: 0; right: 0; }

/* ---- Footer -------------------------------------------------------------
   Soft gradient blob (footer-shape.svg) behind the bottom of the page and
   three pulsing dots.                                                      */
.site-footer {
  position: relative;
  padding-top: 130px;
  overflow-x: clip; /* the 1800px blob must not widen the page (it may still reach upwards) */
}
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
  width: 1800px;
  height: 1223px;
  background: url("../img/decor/footer-shape.svg") no-repeat left bottom / 1800px 1223px;
  pointer-events: none;
}
.dot { position: absolute; z-index: -1; border-radius: 50%; }
.dot--1 { width: 25px; height: 25px; background: #ff6cc4; top: 4%; left: 26%; animation: pulse-small 4s linear infinite; }
.dot--2 { width: 14px; height: 14px; background: #ffbe50; top: 48%; left: 10%; animation: pulse-small 4s linear infinite; }
.dot--3 { width: 7px; height: 7px; background: #04e8f4; bottom: 18%; left: 20%; animation: pulse-big 4s linear infinite; }
.footer-bottom { padding: 26px 0 30px; }
.copyright {
  margin: 0;
  padding-bottom: 25.5px;
  font-size: 15px;
  line-height: 30.6px;
  color: #6a6a6a;
}
/* fades in from the left when the footer scrolls into view (main.js) */
.reveal-left { opacity: 0; transform: translateX(-100px); transition: opacity 1.2s ease .1s, transform 1.2s ease .1s; }
.reveal-left.is-visible { opacity: 1; transform: none; }

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 1450px) {
  .site-header { padding: 30px 40px; }
  .site-header.is-stuck { padding-top: 0; padding-bottom: 0; }
}
@media (max-width: 1199px) {
  .site-header { padding: 30px 25px; }
  .navbar { justify-content: flex-start; }
  .logo { position: static; transform: none; margin-right: 30px; }
  .main-nav a { margin: 0 10px; }
  .hero__title { max-width: 775px; }
}
@media (max-width: 991px) {
  .hero__title { font-size: 50px; line-height: 1.2; }
  .hero__subtitle { font-size: 20px; padding: 15px 0 0; }
  .hero__inner { padding-top: 45px; }
  .site-header, .site-header.is-stuck { padding: 30px 15px; }
  .site-header.is-stuck { padding: 20px 15px; }
  .navbar { justify-content: flex-start; min-height: 42px; }
  .logo { position: static; transform: none; }
  .nav-toggle { display: block; }
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: -15px;
    right: -15px;
    max-height: 70vh;
    margin-top: 30px;
    overflow-y: auto;
    background: #fff;
    box-shadow: 0 40px 50px 0 rgba(137, 139, 142, .15);
  }
  .site-header.is-stuck .main-nav { margin-top: 20px; }
  .site-header.nav-open .main-nav { display: block; }
  .main-nav ul { display: block; }
  .main-nav a { margin: 0; padding: 15px; border-top: 1px solid #f3f3f3; }
  .main-nav a::before { display: none; }
  .copyright { text-align: center; }
}
@media (max-width: 767px) {
  main { padding-top: 120px; }
  .hero { padding-top: 24px; }
  .hero__inner { padding: 45px 15px 24px; }
  .page-head { padding: 0 10px; }
  .page-title { padding: 12px; font-size: 54px; }
  .cta-band__inner { padding: 64px 10px; }
  .cta-band h2 { font-size: 36px; }
  .cta-band p { font-size: 24px; }
  .cta-band__deco { display: none; }
  .site-footer { padding-top: 70px; }
}