/* ==========================================================================
   NAUTILUS — Domains · Section 1: Opening
   Dark, centred; a faint star field drawn in CSS (no image). Prefix do-.
   ========================================================================== */
.do-open{
  --do-hfont: var(--heading-font, 'Exo 2', sans-serif);
  --do-hw: var(--font-weight-heading, 600);
  --do-ease: cubic-bezier(.16, 1, .3, 1);
  position: relative; overflow: hidden; color: #fff; text-align: center;
  padding: clamp(150px, 13vw, 200px) 0 90px;             /* first on the page: clears the fixed header */
  background-color: #0B0C10;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 68%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 44% 14%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 63% 78%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 76% 30%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 88% 62%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 84%, rgba(255,255,255,.3) 50%, transparent 51%),
    radial-gradient(1px 1px at 94% 12%, rgba(255,255,255,.45) 50%, transparent 51%),
    radial-gradient(70% 60% at 50% 120%, rgba(161,26,61,.22), transparent 70%);
}
.do-in{ position: relative; }
.do-eyebrow{ display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px;
  font-family: var(--do-hfont); font-weight: var(--do-hw); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: #FF9DB6; }
.do-eyebrow::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 5px rgba(255,157,182,.15); }
.do-open h1{ margin: 0 auto 22px; max-width: 900px; font-family: var(--do-hfont); font-weight: var(--do-hw); text-transform: uppercase;
  font-size: clamp(36px, 5vw, 70px); line-height: 1.02; letter-spacing: -.01em; color: #fff; }
.do-open p{ margin: 0 auto; max-width: 720px; font-size: 18px; line-height: 1.65; color: rgba(255,255,255,.72); }
.do-in > *{ opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform .9s var(--do-ease); }
.do-open.is-in .do-in > *{ opacity: 1; transform: none; }
.do-open.is-in h1{ transition-delay: .1s; } .do-open.is-in p{ transition-delay: .22s; }
@media (max-width: 575px){ .do-open{ padding-top: 130px; } .do-open p{ font-size: 16.5px; } }
@media (prefers-reduced-motion: reduce){ .do-in > *{ opacity: 1; transform: none; transition: none; } }