:root {
  --dark: #0D0C22;
  --bar: #15142B;
  --pink: #EA4C89;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: "Open Sans", system-ui, sans-serif;
  color: var(--dark);
  background: #F7F9FD;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--dark); }
a:hover { color: var(--pink); }
img { display: block; }

/* Announcement bar */
.bar {
  background: var(--bar);
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  padding: 19px 24px;
  text-align: center;
}
.bar a { color: #fff; font-weight: 700; text-decoration: none; }
.bar a:hover { color: #fff; }

/* Header */
.site { position: relative; }
.nav-wrap { position: absolute; top: 0; left: 0; right: 0; z-index: 20; padding: 26px 24px 0; }
.nav { max-width: 1140px; margin: 0 auto; display: flex; align-items: center; gap: 44px; }
.logo { display: block; width: 65px; height: 65px; flex: 0 0 auto; }
.logo img { width: 100%; height: 100%; }
.nav-links { display: flex; align-items: center; gap: 40px; font-size: 16px; font-weight: 600; }
.nav-links a { text-decoration: none; }

.has-menu { position: relative; padding-bottom: 30px; margin-bottom: -30px; }
.menu {
  position: absolute; top: 28px; left: -32px; width: 300px;
  background: #fff; border-radius: 10px;
  box-shadow: 0 12px 34px rgba(13, 12, 34, 0.16);
  padding: 26px 28px;
  display: flex; flex-direction: column; gap: 26px;
}
.menu a { display: flex; align-items: center; gap: 14px; text-decoration: none; }
[hidden] { display: none !important; }

/* Page backgrounds */
@keyframes gosshDrift {
  0%   { background-position: 0% 0%, 100% 0%, 50% 100%, 0% 100%; }
  100% { background-position: 18% 26%, 74% 34%, 22% 62%, 30% 70%; }
}
.page {
  background-repeat: no-repeat;
  background-size: 150% 150%, 140% 140%, 160% 160%, 150% 150%;
  animation: gosshDrift 30s ease-in-out infinite alternate;
}
.page-home {
  background-color: #F7F9FD;
  background-image:
    radial-gradient(58% 46% at 30% 46%, rgba(255,178,228,0.75) 0%, rgba(255,178,228,0) 100%),
    radial-gradient(52% 44% at 63% 40%, rgba(178,188,255,0.70) 0%, rgba(178,188,255,0) 100%),
    radial-gradient(46% 38% at 78% 70%, rgba(206,214,255,0.55) 0%, rgba(206,214,255,0) 100%);
  padding: 0 24px;
}
.page-about {
  background-color: #FDF0F4;
  background-image:
    radial-gradient(40% 26% at 24% 16%, rgba(255,214,168,0.80) 0%, rgba(255,214,168,0) 100%),
    radial-gradient(34% 24% at 62% 22%, rgba(255,150,190,0.65) 0%, rgba(255,150,190,0) 100%),
    radial-gradient(46% 30% at 30% 62%, rgba(255,225,200,0.55) 0%, rgba(255,225,200,0) 100%),
    radial-gradient(40% 26% at 82% 84%, rgba(255,175,205,0.50) 0%, rgba(255,175,205,0) 100%);
  padding: 0 24px 120px;
  animation-duration: 34s;
}
.page-agency {
  background-color: #E4FAF6;
  background-image:
    radial-gradient(44% 40% at 66% 44%, rgba(110,240,215,0.75) 0%, rgba(110,240,215,0) 100%),
    radial-gradient(40% 34% at 40% 78%, rgba(150,225,255,0.60) 0%, rgba(150,225,255,0) 100%),
    radial-gradient(34% 30% at 88% 16%, rgba(225,255,250,0.90) 0%, rgba(225,255,250,0) 100%);
  padding: 0 24px 160px;
  animation-duration: 28s;
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }

/* Layout */
.wrap { max-width: 1140px; margin: 0 auto; }
.hero { min-height: 1240px; display: flex; flex-direction: column; justify-content: center; }

h1 { font-size: 72px; line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 44px; }
.page-home h1 { font-size: 76px; margin: 0 0 26px; }
.page-about h1 { font-size: 70px; margin: 0 0 40px; }
h2 { font-size: 27px; font-weight: 700; margin: 0 0 40px; }
h3 { font-size: 24px; font-weight: 700; margin: 0 0 30px; }
p { font-size: 18px; line-height: 1.6; margin: 0; }

.copy { max-width: 730px; display: flex; flex-direction: column; gap: 22px; }
.lede { max-width: 730px; margin: 0 0 32px; }

.arrow-link {
  font-size: 18px; font-weight: 700; text-decoration: none;
  display: inline-flex; align-items: center; gap: 14px; align-self: flex-start;
}
.btn {
  display: inline-block; margin-top: 38px;
  background: var(--bar); color: #fff;
  font-size: 16px; font-weight: 600;
  padding: 16px 26px; border-radius: 4px; text-decoration: none;
}
.btn:hover { background: #313043; color: #fff; }
.pill {
  display: inline-block; margin: 40px 0 34px;
  background: rgba(140, 240, 205, 0.55);
  font-size: 14px; padding: 8px 18px; border-radius: 999px;
}

/* About page */
.about-top { padding-top: 250px; }
.agency-top { padding-top: 290px; }
.spacer { height: 160px; }
.card { background: rgba(255,255,255,0.55); border-radius: 4px; padding: 52px 50px 60px; }
.card-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-top: 20px; }
.card-soft { background: rgba(255,255,255,0.45); border-radius: 4px; padding: 44px 46px; }
.card-person { background: rgba(255,255,255,0.45); border-radius: 4px; padding: 44px 40px; text-align: center; }
.card-person img { width: 100%; max-width: 270px; aspect-ratio: 1; object-fit: cover; border-radius: 6px; margin: 0 auto 32px; }
.person-name { font-size: 16px; font-weight: 700; margin-bottom: 26px; }

.find-list { display: flex; flex-direction: column; gap: 24px; font-size: 18px; line-height: 1.55; }
.find-list > div { display: flex; gap: 14px; }
.find-list svg { flex: 0 0 auto; margin-top: 4px; }
.find-list a { font-weight: 700; }

@media (max-width: 900px) {
  .card-grid { grid-template-columns: 1fr; }
  h1, .page-home h1, .page-about h1 { font-size: 44px; }
  .hero { min-height: 700px; }
  .about-top, .agency-top { padding-top: 190px; }
}