/* ============================================================
   pages.css — shared chrome + layouts for Dk's Ink sub-pages
   (privacy, terms, booking-success, waiver-complete, 404).
   Mirrors the design system in styles.css. No new tokens.
   ============================================================ */

/* ---- Standalone top bar (mirrors the app topbar, simplified) ---- */
.pg-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px clamp(20px, 4vw, 48px);
  background: linear-gradient(to bottom, rgba(13,13,13,0.92) 0%, rgba(13,13,13,0) 100%);
  pointer-events: none;
  transition: transform 460ms cubic-bezier(0.2, 0.8, 0.2, 1), background 320ms var(--ease-out), padding 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
  will-change: transform;
}
/* Magnetic header — solidifies once scrolled, hides on scroll-down and
   springs back on scroll-up (mobile), so navigation is always a flick away. */
.pg-topbar.is-pinned {
  background: var(--ink);
  padding-top: 14px;
  padding-bottom: 14px;
  box-shadow: 0 1px 0 var(--rule);
}
.pg-topbar.is-hidden { transform: translateY(-100%); }
.pg-topbar > * { pointer-events: auto; }
/* Separate, persistent MOBILE section bar — always visible (never hides),
   shows the section you're reading. Hidden entirely on desktop. */
.pg-sectionbar {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 130;                 /* above the magnetic main header */
  height: 52px;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background: var(--ink);
  border-bottom: 1px solid var(--rule);
  transform: translateY(-100%);
  transition: transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (max-width: 880px) {
  .pg-sectionbar { display: flex; }
  /* give content clearance so the bar never covers a section heading */
  .pg-sectionbar.is-on ~ .pg .pg-prose { scroll-margin-top: 60px; }
}
.pg-sectionbar.is-on { transform: translateY(0); }
/* When the persistent section bar takes over on mobile, slide the magnetic
   top bar fully out so the two never stack/overlap at top:0. */
@media (max-width: 880px) {
  body.sectionbar-on .pg-topbar { transform: translateY(-100%); }
}
.pg-sectionbar__home {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.pg-sectionbar__mark {
  font-family: var(--font-display);
  font-weight: 100;
  font-size: 24px;
  line-height: 1;
  color: var(--white);
}
.pg-sectionbar__cur {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  overflow: visible;
}
.pg-sectionbar__cur { position: relative; }
.pg-sectionbar__cur::before {
  content: "";
  position: absolute;
  left: -12px; right: -12px; top: 50%;
  height: 168%;
  transform: translateY(-50%);
  z-index: 0;
  background: rgba(240,240,240,0.18);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  pointer-events: none;
}
.pg-sectionbar__cur .n, .pg-sectionbar__cur .t { position: relative; z-index: 1; }
.pg-sectionbar__cur .n {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--fog);
}
.pg-sectionbar__cur .t {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Clean keyframe swap — text fades + lifts in, restarts on each section. */
.pg-sectionbar__cur.swap { animation: sb-swap 420ms var(--ease-out); }
@keyframes sb-swap {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .pg-sectionbar { transition: none; }
  .pg-sectionbar__cur.swap { animation: none; }
}
.pg-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.pg-logo span {
  font-family: var(--font-display);
  font-weight: 100;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--white);
  transition: opacity 300ms var(--ease-out);
}
.pg-logo:hover span { opacity: 0.7; }
.pg-topbar__right { display: inline-flex; align-items: center; gap: 16px; }
.pg-back {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--fog);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  transition: color 240ms var(--ease-out);
}
.pg-back::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 1px;
  background: var(--white);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 360ms var(--ease-out);
}
.pg-back:hover { color: var(--white); }
.pg-back:hover::after { transform: scaleX(1); }
.pg-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  color: var(--ink);
  padding: 8px 18px;
  border-radius: 100px;
  background: var(--white);
  text-decoration: none;
  --ink-fill: var(--ink);
  transition: color 320ms var(--ease-out);
}
.pg-cta:hover { color: var(--white); }

/* ---- Page shell ---- */
.pg {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.pg__container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}

/* ---- Editorial hero (privacy / terms) ---- */
.pg-hero {
  padding: clamp(140px, 18vh, 220px) 0 clamp(48px, 8vh, 96px);
  border-bottom: 1px solid var(--rule);
}
.pg-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fog);
  display: block;
  margin: 0 0 34px;
}
.pg-hero__title {
  font-family: var(--font-display);
  font-weight: 100;
  font-size: clamp(56px, 11vw, 150px);
  line-height: 1.0;
  letter-spacing: -0.01em;
  color: var(--white);
  margin: 0;
  padding-top: 0.12em;
  text-transform: capitalize;
}
.pg-hero__sub {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(18px, 2.2vw, 26px);
  line-height: 1.35;
  color: var(--snow);
  max-width: 60ch;
  margin: 28px 0 0;
}
.pg-hero__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fog);
  margin: 28px 0 0;
}

/* ---- Legal prose ---- */
.pg-prose {
  padding: clamp(56px, 9vh, 110px) 0 clamp(80px, 12vh, 140px);
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
@media (max-width: 880px) { .pg-prose { grid-template-columns: 1fr; gap: 40px; } }

/* Sticky section index on the left */
.pg-toc {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (max-width: 880px) { .pg-toc { position: static; } }
.pg-toc__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fog);
  margin-bottom: 8px;
}
.pg-toc a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  color: var(--fog);
  text-decoration: none;
  padding: 4px 0 4px 0;
  transition: color 280ms var(--ease-out), padding-left 320ms var(--ease-out);
  position: relative;
  width: fit-content;
}
/* Animated underline that wipes in on hover + active section. */
.pg-toc a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 1px;
  width: 100%; height: 1px;
  background: var(--white);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 380ms var(--ease-out);
}
.pg-toc a:hover { color: var(--white); padding-left: 8px; }
.pg-toc a:hover::after { transform: scaleX(1); }
.pg-toc a.is-active { color: var(--white); padding-left: 8px; }
.pg-toc a.is-active::after { transform: scaleX(1); }

.pg-prose__body { max-width: 68ch; }
.pg-section { margin: 0 0 clamp(40px, 6vh, 64px); scroll-margin-top: 110px; }
.pg-section:last-child { margin-bottom: 0; }
.pg-section__n {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--fog);
  display: block;
  margin: 0 0 12px;
}
.pg-section h2 {
  font-family: var(--font-display);
  font-weight: 100;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.04;
  letter-spacing: -0.005em;
  color: var(--white);
  text-transform: capitalize;
  margin: 0 0 18px;
}
.pg-section h3 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: var(--white);
  margin: 26px 0 10px;
}
.pg-section p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.75;
  color: var(--fog);
  margin: 0 0 16px;
}
.pg-section p a, .pg-prose__body a:not(.pg-toc a) {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness 160ms;
}
.pg-section p a:hover { text-decoration-thickness: 2px; }
.pg-section em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  color: var(--snow);
}
.pg-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}
.pg-list li {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.7;
  color: var(--fog);
  padding: 0 0 10px 26px;
  position: relative;
}
.pg-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 11px;
  width: 10px; height: 1px;
  background: var(--steel);
}
.pg-list li strong { color: var(--white); font-weight: 600; }

/* ---- Status pages (booking-success / waiver-complete) ---- */
.pg-status {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(120px, 18vh, 200px) 24px clamp(64px, 10vh, 120px);
}
.pg-status__stamp {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--fog);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 28px;
}
.pg-status__stamp::before,
.pg-status__stamp::after {
  content: "";
  width: 28px; height: 1px;
  background: var(--steel);
}
.pg-status__title {
  font-family: var(--font-display);
  font-weight: 100;
  font-size: clamp(48px, 9vw, 132px);
  line-height: 0.92;
  letter-spacing: -0.01em;
  color: var(--white);
  text-transform: capitalize;
  margin: 0;
  max-width: 16ch;
}
.pg-status__lead {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(18px, 2.4vw, 26px);
  line-height: 1.4;
  color: var(--snow);
  max-width: 30ch;
  margin: 28px 0 0;
}
.pg-status__steps {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  max-width: 820px;
  width: 100%;
  background: var(--rule);
  border: 1px solid var(--rule);
}
@media (max-width: 680px) { .pg-status__steps { grid-template-columns: 1fr; } }
.pg-status__steps li {
  background: var(--bg);
  padding: 26px 22px;
  text-align: left;
}
.pg-status__steps .n {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--fog);
  display: block;
  margin: 0 0 12px;
}
.pg-status__steps h4 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--white);
  margin: 0 0 8px;
}
.pg-status__steps p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.65;
  color: var(--fog);
  margin: 0;
}
.pg-status__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 48px 0 0;
}
.pg-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 26px;
  border: 1px solid var(--white);
  background: transparent;
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  --ink-fill: var(--white);
  transition: color 200ms var(--ease-out);
}
.pg-btn:hover { color: var(--ink); }
.pg-btn__label { position: relative; z-index: 2; }
.pg-btn--filled {
  background: var(--white);
  color: var(--ink);
  --ink-fill: var(--ink);
}
.pg-btn--filled:hover { color: var(--white); }
.pg-btn__arrow {
  width: 22px; height: 1px;
  background: currentColor;
  position: relative;
}
.pg-btn__arrow::after {
  content: "";
  position: absolute;
  right: 0; top: -3px;
  width: 7px; height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

/* ---- Footer legal links (shared, used in app footer too) ---- */
.footer__legal {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  align-items: center;
}
.footer__legal a {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fog);
  text-decoration: none;
  transition: color 200ms var(--ease-out);
}
.footer__legal a:hover { color: var(--white); }

/* ---- Static footer for sub-pages (mirrors app footer) ---- */
.pg-footer {
  border-top: 1px solid var(--rule);
  padding: clamp(48px, 8vh, 88px) 0 40px;
  margin-top: auto;
}
.pg-footer__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
}
.pg-footer__brand {
  font-family: var(--font-display);
  font-weight: 100;
  font-size: clamp(40px, 7vw, 88px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--white);
}
.pg-footer__meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
  text-align: right;
}
.pg-footer__meta a, .pg-footer__meta span {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  color: var(--snow);
  text-decoration: none;
}
.pg-footer__meta a:hover { color: var(--white); }
/* Instagram pill is also a .pg-footer__meta a — restore its own ink-fill color
   logic with higher specificity so the icon flips dark on the white fill. */
.pg-footer__meta a.footer__ig { color: var(--white); }
.pg-footer__meta a.footer__ig:hover,
.pg-footer__meta a.footer__ig:focus-visible,
.pg-footer__meta a.footer__ig:active { color: var(--ink); }
.pg-footer__base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.pg-footer__copy {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fog);
}

/* ---- Scroll / load reveal (vanilla, mirrors .reveal motion) ---- */
.r {
  opacity: 0;
  transform: translateY(34px);
  filter: blur(5px);
  transition:
    opacity 1s var(--ease-out),
    transform 1.15s cubic-bezier(0.16, 0.84, 0.24, 1),
    filter 0.9s var(--ease-out);
}
.r.in { opacity: 1; transform: none; filter: blur(0); }
.r.d1 { transition-delay: 90ms; }
.r.d2 { transition-delay: 180ms; }
.r.d3 { transition-delay: 270ms; }
@media (prefers-reduced-motion: reduce) {
  .r { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ---- Mobile chrome refinements ---- */
@media (max-width: 600px) {
  .pg-topbar { padding: 14px 18px; gap: 12px; }
  .pg-logo span { font-size: 26px; }
  .pg-back { font-size: 11px; }
  .pg-cta { padding: 7px 14px; font-size: 11px; }
  .pg-hero { padding: 120px 0 40px; }
  .pg-prose { padding: 44px 0 72px; }
  .pg-footer__row { gap: 24px; }
  .pg-footer__meta { align-items: flex-start; text-align: left; }
  .pg-footer__base { flex-direction: column; align-items: flex-start; gap: 14px; }
  .pg-status { padding: 120px 20px 64px; }
  .pg-status__actions { flex-direction: column; width: 100%; max-width: 320px; }
  .pg-btn { justify-content: center; width: 100%; }
}

/* --- Section-bar ink blobs: 5 distinct organic shapes (variation) --- */
.m-sectionbar__cur.s0::before,.pg-sectionbar__cur.s0::before{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 90'><g fill='%23000'><ellipse cx='120' cy='45' rx='96' ry='28'/><ellipse cx='108.6' cy='58.6' rx='45.7' ry='13.3'/><ellipse cx='77.9' cy='38.3' rx='74.8' ry='21.8'/><ellipse cx='147.6' cy='56.5' rx='43.7' ry='12.7'/><ellipse cx='103.9' cy='31.8' rx='64.7' ry='18.9'/><path d='M126.3 22.1Q137.5 -21.8 137.4 -43.5L123.1 -44.7Q117.4 -23.4 126.3 22.1Z'/><circle cx='130.3' cy='-44.1' r='7.2'/><path d='M169.9 27.2Q191.2 -0.0 211.6 -20.1L195.9 -33.0Q169.2 -18.0 169.9 27.2Z'/><circle cx='203.8' cy='-26.5' r='10.1'/><path d='M184.3 58.2Q186.7 87.5 210.8 96.3L217.5 86.9Q196.0 74.3 184.3 58.2Z'/><circle cx='214.2' cy='91.6' r='5.8'/><path d='M124.3 67.9Q116.5 116.5 121.1 139.7L133.7 139.0Q134.1 115.5 124.3 67.9Z'/><circle cx='127.4' cy='139.3' r='6.3'/><path d='M52.4 56.7Q38.9 71.7 13.3 83.7L18.8 92.9Q46.5 84.6 52.4 56.7Z'/><circle cx='16.1' cy='88.3' r='5.3'/><path d='M64.3 28.8Q65.5 -4.2 45.3 -14.9L36.3 -5.9Q52.9 8.4 64.3 28.8Z'/><circle cx='40.8' cy='-10.4' r='6.4'/><circle cx='219.0' cy='69.6' r='1.8'/></g></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 90'><g fill='%23000'><ellipse cx='120' cy='45' rx='96' ry='28'/><ellipse cx='108.6' cy='58.6' rx='45.7' ry='13.3'/><ellipse cx='77.9' cy='38.3' rx='74.8' ry='21.8'/><ellipse cx='147.6' cy='56.5' rx='43.7' ry='12.7'/><ellipse cx='103.9' cy='31.8' rx='64.7' ry='18.9'/><path d='M126.3 22.1Q137.5 -21.8 137.4 -43.5L123.1 -44.7Q117.4 -23.4 126.3 22.1Z'/><circle cx='130.3' cy='-44.1' r='7.2'/><path d='M169.9 27.2Q191.2 -0.0 211.6 -20.1L195.9 -33.0Q169.2 -18.0 169.9 27.2Z'/><circle cx='203.8' cy='-26.5' r='10.1'/><path d='M184.3 58.2Q186.7 87.5 210.8 96.3L217.5 86.9Q196.0 74.3 184.3 58.2Z'/><circle cx='214.2' cy='91.6' r='5.8'/><path d='M124.3 67.9Q116.5 116.5 121.1 139.7L133.7 139.0Q134.1 115.5 124.3 67.9Z'/><circle cx='127.4' cy='139.3' r='6.3'/><path d='M52.4 56.7Q38.9 71.7 13.3 83.7L18.8 92.9Q46.5 84.6 52.4 56.7Z'/><circle cx='16.1' cy='88.3' r='5.3'/><path d='M64.3 28.8Q65.5 -4.2 45.3 -14.9L36.3 -5.9Q52.9 8.4 64.3 28.8Z'/><circle cx='40.8' cy='-10.4' r='6.4'/><circle cx='219.0' cy='69.6' r='1.8'/></g></svg>");}
.m-sectionbar__cur.s1::before,.pg-sectionbar__cur.s1::before{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 90'><g fill='%23000'><ellipse cx='120' cy='45' rx='96' ry='28'/><ellipse cx='82.4' cy='36.3' rx='70.9' ry='20.7'/><ellipse cx='155.9' cy='54.3' rx='55.7' ry='16.3'/><ellipse cx='151.4' cy='55.6' rx='69.1' ry='20.1'/><ellipse cx='74.5' cy='49.5' rx='68.5' ry='20.0'/><path d='M84.0 65.4Q67.6 104.5 51.9 126.8L63.6 132.7Q83.9 112.9 84.0 65.4Z'/><circle cx='57.7' cy='129.7' r='6.5'/><path d='M43.5 39.6Q36.7 23.6 9.2 21.3L6.8 31.1Q33.4 37.4 43.5 39.6Z'/><circle cx='8.0' cy='26.2' r='5.1'/><path d='M76.3 25.9Q76.8 -10.2 59.9 -24.5L52.3 -19.4Q66.2 -3.1 76.3 25.9Z'/><circle cx='56.1' cy='-21.9' r='4.6'/><path d='M113.7 22.1Q117.7 -26.8 113.0 -50.3L105.1 -49.7Q106.7 -26.0 113.7 22.1Z'/><circle cx='109.0' cy='-50.0' r='3.9'/><path d='M159.9 25.2Q175.2 -6.4 188.9 -25.5L176.0 -33.1Q157.1 -17.0 159.9 25.2Z'/><circle cx='182.4' cy='-29.3' r='7.5'/><path d='M187.9 33.4Q200.3 21.5 223.1 9.8L216.3 -1.8Q190.7 5.3 187.9 33.4Z'/><circle cx='219.7' cy='4.0' r='6.7'/><path d='M192.6 53.9Q197.7 80.3 226.6 84.8L232.9 69.7Q206.6 59.2 192.6 53.9Z'/><circle cx='229.7' cy='77.3' r='8.2'/><circle cx='23.5' cy='9.5' r='2.6'/></g></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 90'><g fill='%23000'><ellipse cx='120' cy='45' rx='96' ry='28'/><ellipse cx='82.4' cy='36.3' rx='70.9' ry='20.7'/><ellipse cx='155.9' cy='54.3' rx='55.7' ry='16.3'/><ellipse cx='151.4' cy='55.6' rx='69.1' ry='20.1'/><ellipse cx='74.5' cy='49.5' rx='68.5' ry='20.0'/><path d='M84.0 65.4Q67.6 104.5 51.9 126.8L63.6 132.7Q83.9 112.9 84.0 65.4Z'/><circle cx='57.7' cy='129.7' r='6.5'/><path d='M43.5 39.6Q36.7 23.6 9.2 21.3L6.8 31.1Q33.4 37.4 43.5 39.6Z'/><circle cx='8.0' cy='26.2' r='5.1'/><path d='M76.3 25.9Q76.8 -10.2 59.9 -24.5L52.3 -19.4Q66.2 -3.1 76.3 25.9Z'/><circle cx='56.1' cy='-21.9' r='4.6'/><path d='M113.7 22.1Q117.7 -26.8 113.0 -50.3L105.1 -49.7Q106.7 -26.0 113.7 22.1Z'/><circle cx='109.0' cy='-50.0' r='3.9'/><path d='M159.9 25.2Q175.2 -6.4 188.9 -25.5L176.0 -33.1Q157.1 -17.0 159.9 25.2Z'/><circle cx='182.4' cy='-29.3' r='7.5'/><path d='M187.9 33.4Q200.3 21.5 223.1 9.8L216.3 -1.8Q190.7 5.3 187.9 33.4Z'/><circle cx='219.7' cy='4.0' r='6.7'/><path d='M192.6 53.9Q197.7 80.3 226.6 84.8L232.9 69.7Q206.6 59.2 192.6 53.9Z'/><circle cx='229.7' cy='77.3' r='8.2'/><circle cx='23.5' cy='9.5' r='2.6'/></g></svg>");}
.m-sectionbar__cur.s2::before,.pg-sectionbar__cur.s2::before{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 90'><g fill='%23000'><ellipse cx='120' cy='45' rx='96' ry='28'/><ellipse cx='116.0' cy='31.0' rx='50.0' ry='14.6'/><ellipse cx='150.8' cy='55.7' rx='64.4' ry='18.8'/><ellipse cx='73.1' cy='47.9' rx='63.5' ry='18.5'/><ellipse cx='123.3' cy='59.0' rx='60.5' ry='17.6'/><path d='M91.9 23.5Q97.3 -24.8 80.8 -44.9L64.6 -38.7Q74.8 -16.2 91.9 23.5Z'/><circle cx='72.7' cy='-41.8' r='8.6'/><path d='M185.4 32.2Q197.4 15.1 220.9 2.8L215.6 -5.1Q190.0 4.0 185.4 32.2Z'/><circle cx='218.3' cy='-1.2' r='4.8'/><path d='M171.6 62.3Q171.3 105.2 197.2 119.2L211.4 106.8Q191.2 87.9 171.6 62.3Z'/><circle cx='204.3' cy='113.0' r='9.4'/><path d='M88.3 66.0Q69.9 106.5 56.8 130.0L72.3 136.8Q91.6 116.0 88.3 66.0Z'/><circle cx='64.5' cy='133.4' r='8.4'/><path d='M43.9 50.9Q30.7 56.0 0.2 62.9L2.3 71.0Q33.7 67.4 43.9 50.9Z'/><circle cx='1.2' cy='66.9' r='4.2'/><circle cx='17.3' cy='78.3' r='1.7'/></g></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 90'><g fill='%23000'><ellipse cx='120' cy='45' rx='96' ry='28'/><ellipse cx='116.0' cy='31.0' rx='50.0' ry='14.6'/><ellipse cx='150.8' cy='55.7' rx='64.4' ry='18.8'/><ellipse cx='73.1' cy='47.9' rx='63.5' ry='18.5'/><ellipse cx='123.3' cy='59.0' rx='60.5' ry='17.6'/><path d='M91.9 23.5Q97.3 -24.8 80.8 -44.9L64.6 -38.7Q74.8 -16.2 91.9 23.5Z'/><circle cx='72.7' cy='-41.8' r='8.6'/><path d='M185.4 32.2Q197.4 15.1 220.9 2.8L215.6 -5.1Q190.0 4.0 185.4 32.2Z'/><circle cx='218.3' cy='-1.2' r='4.8'/><path d='M171.6 62.3Q171.3 105.2 197.2 119.2L211.4 106.8Q191.2 87.9 171.6 62.3Z'/><circle cx='204.3' cy='113.0' r='9.4'/><path d='M88.3 66.0Q69.9 106.5 56.8 130.0L72.3 136.8Q91.6 116.0 88.3 66.0Z'/><circle cx='64.5' cy='133.4' r='8.4'/><path d='M43.9 50.9Q30.7 56.0 0.2 62.9L2.3 71.0Q33.7 67.4 43.9 50.9Z'/><circle cx='1.2' cy='66.9' r='4.2'/><circle cx='17.3' cy='78.3' r='1.7'/></g></svg>");}
.m-sectionbar__cur.s3::before,.pg-sectionbar__cur.s3::before{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 90'><g fill='%23000'><ellipse cx='120' cy='45' rx='96' ry='28'/><ellipse cx='145.1' cy='33.1' rx='66.2' ry='19.3'/><ellipse cx='81.7' cy='53.4' rx='55.7' ry='16.2'/><ellipse cx='86.8' cy='55.1' rx='49.4' ry='14.4'/><ellipse cx='72.4' cy='43.3' rx='55.3' ry='16.1'/><path d='M85.7 65.7Q75.4 101.9 62.8 121.0L69.9 124.4Q85.4 106.7 85.7 65.7Z'/><circle cx='66.3' cy='122.7' r='3.9'/><path d='M55.2 58.0Q44.5 75.1 22.6 87.0L27.7 94.4Q51.6 85.4 55.2 58.0Z'/><circle cx='25.2' cy='90.7' r='4.5'/><path d='M52.3 33.3Q39.4 2.8 3.9 -8.0L-0.6 -0.4Q33.0 13.4 52.3 33.3Z'/><circle cx='1.6' cy='-4.2' r='4.4'/><path d='M96.3 23.1Q105.8 -18.8 93.7 -35.5L76.2 -30.0Q81.3 -11.0 96.3 23.1Z'/><circle cx='84.9' cy='-32.8' r='9.2'/><path d='M154.6 24.4Q169.7 -1.7 176.6 -18.5L158.4 -27.4Q144.2 -14.2 154.6 24.4Z'/><circle cx='167.5' cy='-22.9' r='10.1'/><path d='M198.1 42.2Q213.4 43.9 247.8 39.1L246.5 28.7Q211.5 29.3 198.1 42.2Z'/><circle cx='247.1' cy='33.9' r='5.3'/><path d='M176.5 61.0Q180.0 102.0 209.1 115.4L220.8 103.3Q196.4 85.1 176.5 61.0Z'/><circle cx='214.9' cy='109.4' r='8.4'/><path d='M121.3 68.0Q108.0 109.8 112.3 129.5L131.6 129.2Q134.9 109.4 121.3 68.0Z'/><circle cx='121.9' cy='129.3' r='9.6'/><circle cx='20.4' cy='68.9' r='1.7'/></g></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 90'><g fill='%23000'><ellipse cx='120' cy='45' rx='96' ry='28'/><ellipse cx='145.1' cy='33.1' rx='66.2' ry='19.3'/><ellipse cx='81.7' cy='53.4' rx='55.7' ry='16.2'/><ellipse cx='86.8' cy='55.1' rx='49.4' ry='14.4'/><ellipse cx='72.4' cy='43.3' rx='55.3' ry='16.1'/><path d='M85.7 65.7Q75.4 101.9 62.8 121.0L69.9 124.4Q85.4 106.7 85.7 65.7Z'/><circle cx='66.3' cy='122.7' r='3.9'/><path d='M55.2 58.0Q44.5 75.1 22.6 87.0L27.7 94.4Q51.6 85.4 55.2 58.0Z'/><circle cx='25.2' cy='90.7' r='4.5'/><path d='M52.3 33.3Q39.4 2.8 3.9 -8.0L-0.6 -0.4Q33.0 13.4 52.3 33.3Z'/><circle cx='1.6' cy='-4.2' r='4.4'/><path d='M96.3 23.1Q105.8 -18.8 93.7 -35.5L76.2 -30.0Q81.3 -11.0 96.3 23.1Z'/><circle cx='84.9' cy='-32.8' r='9.2'/><path d='M154.6 24.4Q169.7 -1.7 176.6 -18.5L158.4 -27.4Q144.2 -14.2 154.6 24.4Z'/><circle cx='167.5' cy='-22.9' r='10.1'/><path d='M198.1 42.2Q213.4 43.9 247.8 39.1L246.5 28.7Q211.5 29.3 198.1 42.2Z'/><circle cx='247.1' cy='33.9' r='5.3'/><path d='M176.5 61.0Q180.0 102.0 209.1 115.4L220.8 103.3Q196.4 85.1 176.5 61.0Z'/><circle cx='214.9' cy='109.4' r='8.4'/><path d='M121.3 68.0Q108.0 109.8 112.3 129.5L131.6 129.2Q134.9 109.4 121.3 68.0Z'/><circle cx='121.9' cy='129.3' r='9.6'/><circle cx='20.4' cy='68.9' r='1.7'/></g></svg>");}
.m-sectionbar__cur.s4::before,.pg-sectionbar__cur.s4::before{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 90'><g fill='%23000'><ellipse cx='120' cy='45' rx='96' ry='28'/><ellipse cx='166.5' cy='48.4' rx='75.4' ry='22.0'/><ellipse cx='129.0' cy='31.2' rx='53.3' ry='15.6'/><ellipse cx='112.4' cy='58.8' rx='43.3' ry='12.6'/><ellipse cx='109.1' cy='58.6' rx='62.7' ry='18.3'/><path d='M141.5 67.1Q135.4 110.7 146.8 129.5L160.1 125.7Q154.1 105.4 141.5 67.1Z'/><circle cx='153.5' cy='127.6' r='6.9'/><path d='M81.8 65.1Q66.7 104.5 49.2 126.3L58.1 131.2Q79.2 111.4 81.8 65.1Z'/><circle cx='53.7' cy='128.8' r='5.1'/><path d='M43.5 39.5Q34.9 22.5 5.0 19.9L2.4 30.2Q31.4 36.9 43.5 39.5Z'/><circle cx='3.7' cy='25.0' r='5.3'/><path d='M70.6 27.1Q74.1 -7.5 56.4 -19.0L45.8 -10.4Q59.3 4.5 70.6 27.1Z'/><circle cx='51.1' cy='-14.7' r='6.8'/><path d='M160.5 25.3Q175.3 -3.8 187.8 -21.9L174.1 -30.2Q156.1 -15.3 160.5 25.3Z'/><circle cx='181.0' cy='-26.1' r='8.0'/><path d='M189.1 56.0Q194.2 84.7 222.7 91.7L229.4 79.4Q203.6 67.4 189.1 56.0Z'/><circle cx='226.0' cy='85.6' r='7.0'/><circle cx='12.5' cy='15.2' r='2.7'/></g></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 90'><g fill='%23000'><ellipse cx='120' cy='45' rx='96' ry='28'/><ellipse cx='166.5' cy='48.4' rx='75.4' ry='22.0'/><ellipse cx='129.0' cy='31.2' rx='53.3' ry='15.6'/><ellipse cx='112.4' cy='58.8' rx='43.3' ry='12.6'/><ellipse cx='109.1' cy='58.6' rx='62.7' ry='18.3'/><path d='M141.5 67.1Q135.4 110.7 146.8 129.5L160.1 125.7Q154.1 105.4 141.5 67.1Z'/><circle cx='153.5' cy='127.6' r='6.9'/><path d='M81.8 65.1Q66.7 104.5 49.2 126.3L58.1 131.2Q79.2 111.4 81.8 65.1Z'/><circle cx='53.7' cy='128.8' r='5.1'/><path d='M43.5 39.5Q34.9 22.5 5.0 19.9L2.4 30.2Q31.4 36.9 43.5 39.5Z'/><circle cx='3.7' cy='25.0' r='5.3'/><path d='M70.6 27.1Q74.1 -7.5 56.4 -19.0L45.8 -10.4Q59.3 4.5 70.6 27.1Z'/><circle cx='51.1' cy='-14.7' r='6.8'/><path d='M160.5 25.3Q175.3 -3.8 187.8 -21.9L174.1 -30.2Q156.1 -15.3 160.5 25.3Z'/><circle cx='181.0' cy='-26.1' r='8.0'/><path d='M189.1 56.0Q194.2 84.7 222.7 91.7L229.4 79.4Q203.6 67.4 189.1 56.0Z'/><circle cx='226.0' cy='85.6' r='7.0'/><circle cx='12.5' cy='15.2' r='2.7'/></g></svg>");}