:root {
  --paper: #fbf9fd;
  --paper-2: #f3edf8;
  --pale: #f6f1fa;
  --lav: #a487c6;
  --lav-2: #e7dbf1;
  --lav-3: #d7cae5;
  --ink: #2f2437;
  --muted: #6f6277;
  --line: rgba(86, 61, 106, 0.14);
  --deep: #312839;
  --deep-2: #221a29;
  --serif: "Cormorant Garamond", "Noto Serif TC", serif;
  --serif-alt: "Marcellus", "Noto Serif TC", serif;
  --sans: "Noto Sans TC", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 10% 12%, rgba(220, 205, 238, 0.52), transparent 26%),
    radial-gradient(circle at 90% 10%, rgba(201, 183, 222, 0.32), transparent 22%),
    linear-gradient(180deg, #fdfcff, var(--paper));
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a, button { -webkit-tap-highlight-color: transparent; }
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 80; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
.cursor-glow {
  position: fixed; width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(179, 149, 210, .18), transparent 68%);
  transform: translate(-50%, -50%); pointer-events: none; z-index: -1;
}

.opening {
  position: fixed; inset: 0; z-index: 200; background: linear-gradient(160deg, #221b29, #34293d);
  color: #f6effc; display: flex; align-items: center; justify-content: center; gap: 20px;
  letter-spacing: .34em; font: 500 12px var(--sans);
  transition: opacity .95s ease, visibility .95s ease;
  animation: openingFallback .9s 2.4s forwards;
}

.opening span {
  width: 0; height: 1px; background: rgba(255,255,255,.8); animation: openLine .95s .08s forwards;
}
.opening img {
  width: 58px; height: 58px; object-fit: contain; opacity: 0; transform: translateY(14px) scale(.9);
  animation: openPendant 1s .2s cubic-bezier(.16, 1, .3, 1) forwards;
}
.opening b { opacity: 0; animation: openName .85s .38s forwards; }
.opening.done { opacity: 0; visibility: hidden; }

.topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 88px; padding: 0 4vw;
  display: flex; align-items: center; justify-content: space-between; z-index: 100;
  transition: height .45s ease, background .45s ease, border-color .45s ease, box-shadow .45s ease;
  border-bottom: 1px solid transparent;
}
.topbar.scrolled {
  height: 72px; background: rgba(251, 249, 253, 0.82); backdrop-filter: blur(22px);
  border-color: var(--line); box-shadow: 0 18px 50px rgba(53, 37, 65, .06);
}
.brand {
  display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none;
  transform: translateY(14px); opacity: 0;
  transition: opacity .9s .45s ease, transform 1s .45s cubic-bezier(.16,1,.3,1);
}
body.is-loaded .brand { opacity: 1; transform: none; }
.brand:hover { transform: translateY(-1px); }
.brand-pendant {
  width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 8px 20px rgba(102, 79, 123, .14));
  transition: transform .45s ease, filter .45s ease;
}
.brand:hover .brand-pendant {
  transform: rotate(-4deg) translateY(-2px) scale(1.04);
  filter: drop-shadow(0 14px 28px rgba(102, 79, 123, .18));
}
.brand-copy { display: grid; gap: 2px; }
.brand-logo { width: 230px; max-width: 34vw; object-fit: contain; }
.brand-text { display: none; font: 500 22px/1 var(--serif); letter-spacing: .04em; }
.brand small { font-size: 10px; color: var(--muted); letter-spacing: .12em; }
.topbar nav {
  display: flex; gap: 30px; align-items: center; transform: translateY(14px); opacity: 0;
  transition: opacity .9s .6s ease, transform 1s .6s cubic-bezier(.16,1,.3,1);
}
body.is-loaded .topbar nav { opacity: 1; transform: none; }
.topbar nav a {
  position: relative; color: inherit; text-decoration: none; font-size: 12px; letter-spacing: .16em;
  transition: color .35s ease, transform .35s ease;
}
.topbar nav a::after {
  content: ""; position: absolute; left: 0; bottom: -8px; width: 0; height: 1px;
  background: linear-gradient(90deg, #8f73aa, #c7afdc); transition: width .38s ease;
}
.topbar nav a:hover { color: #785d92; transform: translateY(-1px); }
.topbar nav a:hover::after { width: 100%; }
.nav-actions {
  display: flex; align-items: center; gap: 10px; transform: translateY(14px); opacity: 0;
  transition: opacity .9s .75s ease, transform 1s .75s cubic-bezier(.16,1,.3,1);
}
body.is-loaded .nav-actions { opacity: 1; transform: none; }
.lang, .menu { border: 0; background: none; color: inherit; cursor: pointer; }
.lang {
  font: 500 11px var(--sans); letter-spacing: .12em; border: 1px solid var(--line);
  border-radius: 999px; padding: 10px 14px; transition: .35s ease;
}
.lang:hover { background: rgba(164, 135, 198, .08); border-color: rgba(127, 98, 151, .32); transform: translateY(-1px); }
.menu { display: none; width: 40px; height: 40px; }
.menu i { display: block; width: 18px; height: 1px; background: currentColor; margin: 5px auto; transition: .35s ease; }
.topbar.open .menu i:first-child { transform: translateY(6px) rotate(45deg); }
.topbar.open .menu i:last-child { transform: translateY(-6px) rotate(-45deg); }

main section { position: relative; }
.section-shell { overflow: clip; }
.stage {
  min-height: 100vh; padding: 120px 6vw 60px; display: grid; align-content: center;
  grid-template-columns: 1fr 1fr; isolation: isolate; overflow: clip;
}
.stage-word {
  position: absolute; left: -1vw; top: 42%; font: 500 clamp(84px, 15vw, 240px)/.72 var(--serif-alt);
  letter-spacing: -.08em; color: rgba(117, 89, 143, .05); white-space: nowrap; z-index: -4;
  animation: wordDrift 18s linear infinite alternate;
}
.stage-glow {
  position: absolute; border-radius: 50%; filter: blur(6px); z-index: -4; opacity: .85;
  animation: breathe 7s ease-in-out infinite;
}
.stage-glow-a {
  width: 38vw; height: 38vw; left: 24vw; top: 16vh;
  background: radial-gradient(circle, rgba(226, 209, 239, .9), rgba(226, 209, 239, .12) 62%, transparent 74%);
}
.stage-glow-b {
  width: 20vw; height: 20vw; right: 8vw; top: 18vh; animation-delay: -2s;
  background: radial-gradient(circle, rgba(241, 235, 247, .95), rgba(196, 173, 221, .12) 56%, transparent 76%);
}
.stage-lines { position: absolute; inset: 0; z-index: -3; }
.stage-lines i {
  position: absolute; background: linear-gradient(90deg, transparent, rgba(133, 104, 157, .20), transparent);
  height: 1px; width: 66vw;
}
.stage-lines i:nth-child(1) { left: -11vw; top: 19%; transform: rotate(-15deg); }
.stage-lines i:nth-child(2) { right: -12vw; bottom: 25%; transform: rotate(-12deg); }
.stage-lines i:nth-child(3) { left: 28vw; bottom: 7%; transform: rotate(28deg); }
.stage-kicker {
  position: absolute; left: 6vw; top: 26%; font-size: 10px; letter-spacing: .34em; color: var(--muted);
  writing-mode: vertical-rl;
}
.stage-pendant {
  position: absolute; left: 50%; top: 14vh; transform: translateX(-50%);
  width: 130px; z-index: 2;
}
.stage-pendant img {
  width: 100%; object-fit: contain; filter: drop-shadow(0 18px 40px rgba(91, 67, 112, .16));
  animation: pendantFloat 8s ease-in-out infinite;
}
.stage-pendant-ring {
  position: absolute; inset: -14px; border-radius: 50%; border: 1px solid rgba(164, 135, 198, .28);
  animation: pulseRing 6s ease-in-out infinite;
}
.stage-title {
  grid-column: 1 / -1; max-width: 1120px; margin: 0 auto; text-align: center; position: relative; z-index: 4;
  font: 400 clamp(60px, 8.6vw, 138px)/.82 var(--serif); letter-spacing: -.052em;
}
.stage-title .title-line { display: block; }
.stage-title .accent { padding-left: 12vw; color: #8b6ba7; font-style: italic; }
.stage-title em { font-style: inherit; display: inline-block; }
.stage-title .letter {
  display: inline-block; opacity: 0; transform: translateY(90px) rotate(7deg) scale(.95);
  filter: blur(10px); transition:
    opacity .9s cubic-bezier(.2,.7,.2,1),
    transform 1.08s cubic-bezier(.16,1,.3,1),
    filter .9s ease;
}
body.is-loaded .stage-title .letter { opacity: 1; transform: none; filter: none; }
.stage-intro {
  position: absolute; left: 8vw; bottom: 9vh; width: min(360px, 30vw); z-index: 5;
  font-size: 13px; line-height: 2.02; color: var(--muted);
}
.hero-actions {
  position: absolute; right: 8vw; bottom: 8vh; display: flex; align-items: center; gap: 16px; z-index: 6;
}
.circle-cta {
  width: 118px; height: 118px; border: 1px solid rgba(93, 68, 112, .35); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; gap: 12px; text-decoration: none;
  color: inherit; font-size: 11px; line-height: 1.6; position: relative; overflow: hidden;
  transition: transform .5s ease, color .35s ease, border-color .35s ease, box-shadow .45s ease;
}
.circle-cta::before {
  content: ""; position: absolute; inset: 8px; border-radius: 50%; background: linear-gradient(135deg, #efe7f6, #ddcfeb);
  z-index: -1; transform: scale(0); transition: transform .45s cubic-bezier(.2,.9,.2,1);
}
.circle-cta:hover {
  color: #3a2c45; border-color: rgba(111, 81, 135, .38); transform: rotate(-8deg) translateY(-3px);
  box-shadow: 0 16px 40px rgba(80, 54, 99, .13);
}
.circle-cta:hover::before { transform: scale(1); }
.circle-cta i { font: 24px var(--serif); }
.ghost-link {
  color: inherit; text-decoration: none; padding: 12px 16px; border-radius: 999px; border: 1px solid rgba(95, 70, 115, .16);
  background: rgba(255,255,255,.45); backdrop-filter: blur(8px); letter-spacing: .14em; font-size: 11px;
  transition: .35s ease;
}
.ghost-link:hover { background: rgba(255,255,255,.74); transform: translateY(-2px); color: #755c8f; }
.photo {
  position: absolute; margin: 0; z-index: 2; overflow: hidden; border-radius: 16px;
  box-shadow: 0 22px 55px rgba(63, 43, 77, .14);
  transition: transform .55s ease, box-shadow .55s ease;
}
.photo:hover { transform: translateY(-6px) rotate(0deg) !important; box-shadow: 0 30px 70px rgba(63, 43, 77, .18); }
.photo img {
  width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.12);
  transition: transform 1.8s cubic-bezier(.16,1,.3,1), filter .5s ease;
}
body.is-loaded .photo img { transform: scale(1); }
.photo:hover img { transform: scale(1.05); filter: saturate(1.03); }
.photo figcaption {
  position: absolute; left: 10px; bottom: 10px; background: rgba(251,249,252,.90); padding: 7px 9px;
  font-size: 8px; letter-spacing: .2em; color: var(--ink); border-radius: 999px;
}
.p1 { width: 14vw; height: 20vw; min-width: 150px; min-height: 218px; left: 12vw; top: 16vh; transform: rotate(-5deg); }
.p2 { width: 18vw; height: 12vw; min-width: 205px; min-height: 135px; right: 8vw; top: 19vh; transform: rotate(5deg); }
.p3 { width: 12vw; height: 17vw; min-width: 136px; min-height: 194px; right: 24vw; bottom: 8vh; transform: rotate(-4deg); }
.p4 { width: 13vw; height: 13vw; min-width: 150px; min-height: 150px; left: 19vw; bottom: 10vh; transform: rotate(4deg); }
.load-anim {
  opacity: 0; transform: translateY(24px) scale(.98);
  transition: opacity .95s var(--d) ease, transform .95s var(--d) cubic-bezier(.16,1,.3,1);
}
body.is-loaded .load-anim { opacity: 1; transform: none; }
.load-photo {
  opacity: 0; clip-path: inset(0 0 100% 0 round 16px);
  transition: opacity .2s var(--d), clip-path 1.22s var(--d) cubic-bezier(.16,1,.3,1);
}
body.is-loaded .load-photo { opacity: 1; clip-path: inset(0 round 16px); }
.scroll-cue {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; font-size: 9px; letter-spacing: .2em;
}
.scroll-cue i { width: 40px; height: 1px; background: var(--ink); position: relative; overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; inset: 0; background: var(--paper); animation: scan 1.8s infinite; }

.manifesto {
  padding: 150px 5vw 160px; background: linear-gradient(160deg, #2b2232, #33283b); color: #f5eff8;
}
.marquee {
  position: absolute; top: 30px; left: 0; white-space: nowrap; font: italic 76px/1 var(--serif);
  color: rgba(255,255,255,.04); animation: marquee 25s linear infinite;
}
.manifesto-inner { max-width: 920px; margin: auto; text-align: center; }
.tiny { font-size: 9px; letter-spacing: .32em; color: #9a8aaa; text-transform: uppercase; }
.manifesto blockquote { margin: 36px 0 28px; font: italic 400 clamp(40px, 5.7vw, 82px)/1.05 var(--serif); }
.manifesto-inner > p:last-child { max-width: 620px; margin: auto; color: #d0c4d7; font-size: 13px; line-height: 2; }

.story {
  display: grid; grid-template-columns: 42% 58%; min-height: 920px; background: linear-gradient(180deg, #fefcff, #fbf8fd);
}
.story-portrait {
  position: sticky; top: 0; height: 100vh; overflow: hidden; background: #ece2f1; border-right: 1px solid rgba(93, 68, 112, .06);
}
.story-portrait img {
  width: 100%; height: 100%; object-fit: cover; filter: saturate(.84); transition: transform 1.2s ease, filter .5s ease;
}
.story-portrait:hover img, .story-portrait.is-visible img { transform: scale(1.04); filter: saturate(.95); }
.story-portrait::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(42,31,49,.28));
}
.story-portrait small {
  position: absolute; left: 35px; bottom: 35px; z-index: 2; color: white; font-size: 9px; letter-spacing: .28em;
}
.portrait-ring {
  position: absolute; width: 52%; aspect-ratio: 1; border-radius: 50%; right: -15%; top: 18%; z-index: 2;
  border: 1px solid rgba(255,255,255,.76); animation: breathe 5s ease-in-out infinite;
}
.story-content { padding: 135px 8vw 110px 7vw; }
.story-heading, .week-head, .gallery-head { display: grid; grid-template-columns: 70px 1fr; gap: 24px; }
.story-heading > span, .week-head > span, .gallery-head > span, .path-head > span {
  font: italic 28px var(--serif); color: var(--lav);
}
h2 {
  margin: 18px 0 0; font: 400 clamp(44px, 5vw, 74px)/1.04 var(--serif); letter-spacing: -.035em;
}
h2 i { color: #9072a8; font-weight: 400; }
.story-copy {
  margin: 68px 0 75px 95px; max-width: 640px; display: grid; grid-template-columns: 1fr 1fr; gap: 34px;
}
.story-copy p { margin: 0; font-size: 13px; line-height: 2; color: var(--muted); }
.milestones {
  display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.milestones article {
  min-height: 150px; padding: 25px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: space-between; background: rgba(255,255,255,.45);
  transition: background .35s ease, transform .35s ease, color .35s ease, box-shadow .35s ease;
}
.milestones article:hover {
  background: rgba(244, 237, 250, .92); transform: translateY(-4px); box-shadow: 0 18px 35px rgba(91, 69, 109, .08);
}
.milestones b { font: 400 36px var(--serif); }
.milestones span { font-size: 11px; color: var(--muted); }

.pathways {
  padding: 155px 6vw 170px; background: var(--pale);
}
.path-head { max-width: 860px; margin: 0 auto 100px; display: grid; grid-template-columns: 60px auto; }
.orbit {
  position: absolute; width: 74vw; height: 74vw; left: 50%; top: 50%; transform: translate(-50%, -50%);
  border: 1px solid rgba(145,111,170,.12); border-radius: 50%; animation: orbitFloat 12s ease-in-out infinite;
}
.orbit i { position: absolute; border: inherit; border-radius: inherit; }
.orbit i:nth-child(1) { inset: 12%; }
.orbit i:nth-child(2) { inset: 25%; }
.orbit i:nth-child(3) { inset: 38%; }
.path-list {
  position: relative; max-width: 1080px; margin: auto; display: grid; grid-template-columns: repeat(2,1fr); gap: 40px 15vw;
}
.path-card {
  min-height: 255px; padding: 32px 36px; position: relative; color: var(--ink);
  background: rgba(255,255,255,.66); backdrop-filter: blur(12px); border: 1px solid rgba(98,73,115,.12);
  box-shadow: 0 24px 55px rgba(70,48,84,.06); border-radius: 20px;
  transition: transform .45s ease, box-shadow .45s ease, background .45s ease, color .35s ease;
}
.path-card:nth-child(even) { transform: translateY(80px); }
.path-card.featured { background: linear-gradient(160deg, #31273a, #403148); color: #f7f2fa; }
.path-card > span {
  position: absolute; right: 20px; top: 14px; font: italic 48px var(--serif); color: rgba(146,115,169,.18);
}
.path-card h3 { margin: 30px 0 18px; font: 400 31px var(--serif); letter-spacing: -.02em; }
.path-card p { margin: 0; font-size: 13px; line-height: 1.92; color: inherit; opacity: .88; }
.path-card small { position: absolute; left: 36px; bottom: 28px; font-size: 9px; letter-spacing: .24em; opacity: .74; }
.path-card:hover {
  transform: translateY(-10px) !important; background: rgba(255,255,255,.90); box-shadow: 0 30px 70px rgba(70,48,84,.12);
  color: var(--ink);
}
.path-card.featured:hover { background: linear-gradient(160deg, #3b3044, #4a3956); color: #fff; }
.path-card:hover p, .path-card:hover h3, .path-card:hover small, .path-card:hover span { color: inherit; opacity: 1; }

.interlude {
  min-height: 820px; display: grid; place-items: center; background: linear-gradient(180deg, #fcfafd, #f3ecf7);
}
.interlude-img {
  position: absolute; inset: 70px 18vw 70px 12vw; overflow: hidden; border-radius: 28px; box-shadow: 0 30px 70px rgba(72,52,87,.14);
}
.interlude-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s ease; }
.interlude-img:hover img { transform: scale(1.03); }
.interlude-copy {
  position: relative; z-index: 2; max-width: 720px; margin-left: 18vw; padding: 34px 42px;
  background: rgba(251,249,253,.62); backdrop-filter: blur(14px); border-radius: 26px; border: 1px solid rgba(99, 74, 116, .09);
}
.interlude-copy h2 { margin-top: 14px; }
.interlude-note {
  position: absolute; right: 9vw; bottom: 84px; width: 290px; padding: 22px 24px 20px;
  background: rgba(255,255,255,.72); backdrop-filter: blur(12px); border-radius: 18px; box-shadow: 0 16px 34px rgba(75,53,92,.09);
}
.interlude-note span { display: block; font: 400 38px var(--serif); color: #8d71a4; }
.interlude-note p { margin: 0; font-size: 12px; line-height: 1.85; color: var(--muted); }

.week {
  padding: 150px 7vw 130px; background: linear-gradient(180deg, #fff, #fcf8fd);
}
.week-head { margin: 0 0 72px; max-width: 860px; }
.week-head > div > p:last-child { margin-top: 24px; max-width: 620px; font-size: 13px; line-height: 1.9; color: var(--muted); }
.days { display: grid; gap: 16px; }
.day {
  display: grid; grid-template-columns: 72px 120px 1fr 120px; align-items: center; gap: 18px;
  min-height: 130px; padding: 18px 30px; border-top: 1px solid var(--line); background: rgba(255,255,255,.58);
  border-radius: 18px; box-shadow: 0 10px 24px rgba(69,48,83,.03);
  transition: transform .4s ease, box-shadow .4s ease, background .4s ease, color .35s ease;
}
.day:hover {
  transform: translateX(10px); box-shadow: 0 22px 44px rgba(69,48,83,.08); background: rgba(251,249,252,.96);
}
.day:hover h3, .day:hover p, .day:hover strong, .day:hover b, .day:hover time { color: inherit; opacity: 1; }
.day b { font: italic 28px var(--serif); color: #9a7bb0; }
.day time { font-size: 11px; letter-spacing: .16em; color: var(--muted); }
.day h3 { margin: 0; font: 400 25px var(--serif); }
.day p { font-size: 9px; letter-spacing: .15em; color: var(--muted); }
.day strong { font: 400 19px var(--serif); text-align: right; color: var(--ink); }
.day.private { background: linear-gradient(160deg, #31273a, #403148); color: #f7f2fa; }
.day.private p, .day.private time { color: #d6cadc; }
.estimate { margin-top: 24px; text-align: right; font-size: 10px; color: var(--muted); }

.fees {
  padding: 160px 7vw 170px; background: linear-gradient(135deg, #ece3f1, #faf7fc); display: grid;
  grid-template-columns: 1fr 1.15fr; gap: 6vw; align-items: center;
}
.fees-title h2 { font-size: clamp(46px, 5.2vw, 76px); }
.fee-wheel { position: relative; min-height: 570px; }
.fee {
  position: absolute; width: 205px; height: 205px; border-radius: 50%; border: 1px solid rgba(78,55,95,.19);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(251,249,252,.62); backdrop-filter: blur(12px); box-shadow: 0 20px 40px rgba(85,63,101,.08);
  transition: transform .45s ease, background .4s ease, color .4s ease, box-shadow .45s ease;
}
.fee:hover {
  transform: scale(1.06) !important; background: linear-gradient(160deg, #332b3b, #4b3a56); color: white;
  box-shadow: 0 26px 50px rgba(63,45,77,.14);
}
.fee small { font-size: 8px; letter-spacing: .24em; }
.fee b { margin: 5px 0; font: 400 46px var(--serif); }
.fee span { font-size: 9px; }
.fee.center { left: 28%; top: 31%; width: 245px; height: 245px; background: rgba(255,255,255,.92); z-index: 3; }
.fee.f90 { left: 2%; top: 5%; }
.fee.f120 { right: 3%; top: 2%; }
.fee.group { right: 0; bottom: 0; width: 230px; height: 230px; }
.fee-note { grid-column: 1 / 2; max-width: 540px; font-size: 11px; color: var(--muted); line-height: 1.8; }

.gallery { padding: 150px 0 130px; background: linear-gradient(180deg, #fbf8fd, #ffffff); }
.gallery-head { margin: 0 7vw 70px; max-width: 780px; }
.filmstrip { display: grid; grid-template-columns: repeat(12,1fr); grid-auto-rows: 120px; gap: 12px; padding: 0 2vw; }
.film { margin: 0; position: relative; overflow: hidden; border-radius: 18px; grid-column: span 4; grid-row: span 3; box-shadow: 0 18px 35px rgba(63,44,77,.06); }
.film.tall { grid-column: span 3; grid-row: span 5; }
.film.wide { grid-column: span 5; grid-row: span 3; }
.film:nth-child(4) { grid-column: span 4; grid-row: span 4; }
.film img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.78); transition: transform 1s cubic-bezier(.16,1,.3,1), filter .5s ease; }
.film:hover img { transform: scale(1.07); filter: saturate(1.03); }
.film figcaption {
  position: absolute; left: 10px; bottom: 10px; background: rgba(251,249,252,.92); padding: 6px 8px; font-size: 8px; letter-spacing: .2em;
  border-radius: 999px; color: var(--ink); transition: transform .35s ease, background .35s ease, color .35s ease;
}
.film:hover figcaption { transform: translateY(-2px); background: rgba(255,255,255,.98); color: var(--ink); }

.join {
  min-height: 100vh; padding: 150px 7vw 120px; background: linear-gradient(160deg, #2b2232, #34293d); color: #f7f1fa;
  display: grid; grid-template-columns: .85fr 1.15fr; gap: 10vw; align-items: center; overflow: clip;
}
.join-bg {
  position: absolute; left: -3vw; bottom: 5vh; font: 400 32vw/.6 var(--serif); color: rgba(255,255,255,.028);
}
.join-copy h2 { font-size: clamp(44px, 5.7vw, 82px); }
.join-copy h2 i { color: #dac7e8; }
.join-copy > p:not(.tiny) { max-width: 500px; color: #cbbfd0; font-size: 12px; line-height: 1.9; margin: 28px 0; }
.join-copy > a {
  color: white; text-decoration: none; font: italic 21px var(--serif); border-bottom: 1px solid #8c759b; padding-bottom: 5px;
  transition: .35s ease;
}
.join-copy > a:hover { color: #e6d8f3; border-color: #d4c0e4; }
.form-shell {
  position: relative; background: rgba(251,249,252,.97); color: var(--ink); padding: 35px 38px;
  box-shadow: 0 32px 70px rgba(0,0,0,.18); border-radius: 24px;
}
.form-tabs { display: flex; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.tab {
  border: 0; background: none; padding: 0 0 13px; margin-right: 28px; cursor: pointer;
  font: 400 17px var(--serif); color: #8f8298; position: relative; transition: color .35s ease;
}
.tab:hover { color: #6b547f; }
.tab.active { color: var(--ink); }
.tab.active::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background: var(--ink);
}
.form { display: none; }
.form.active { display: block; animation: formIn .45s ease; }
.form label { display: block; margin-bottom: 18px; }
.form label > span { display: block; margin-bottom: 7px; font-size: 9px; letter-spacing: .12em; color: var(--muted); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form input, .form select, .form textarea {
  width: 100%; border: 0; border-bottom: 1px solid #cfc5d4; background: transparent; padding: 9px 2px;
  font: 400 13px var(--sans); color: var(--ink); outline: 0; border-radius: 0; transition: border-color .3s ease, background .3s ease;
}
.form input:hover, .form select:hover, .form textarea:hover,
.form input:focus, .form select:focus, .form textarea:focus {
  border-color: #8f72a6; background: rgba(243, 236, 248, .35);
}
.submit {
  width: 100%; border: 0; background: linear-gradient(160deg, #332a3b, #413149); color: #fff; padding: 16px 20px;
  display: flex; justify-content: space-between; align-items: center; font: 400 12px var(--sans); cursor: pointer;
  border-radius: 16px; transition: transform .35s ease, background .35s ease, padding-left .35s ease, box-shadow .35s ease;
}
.submit:hover {
  background: linear-gradient(160deg, #8e71a7, #a183bd); padding-left: 28px; transform: translateY(-2px);
  box-shadow: 0 18px 30px rgba(81, 56, 99, .16);
}
.submit i { font: 22px var(--serif); }
.form-note { display: block; margin-top: 15px; color: #8a7f90; font-size: 9px; line-height: 1.7; }
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 30px); background: #251e2b; color: white;
  padding: 12px 18px; font-size: 11px; opacity: 0; pointer-events: none; z-index: 300; transition: .35s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.site-footer {
  padding: 26px 5vw 36px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px;
  border-top: 1px solid var(--line); background: #fcfbfd;
}
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand img { width: 38px; height: 38px; object-fit: contain; opacity: .82; }
.footer-brand b { display: block; font: 500 18px var(--serif); letter-spacing: .12em; }
.footer-brand span, .footer-links, .footer-center span { font-size: 9px; color: var(--muted); letter-spacing: .12em; }
.footer-links { justify-self: end; display: flex; gap: 24px; align-items: center; }
.site-footer a { color: inherit; text-decoration: none; transition: color .35s ease, transform .35s ease; }
.site-footer a:hover { color: #7a5f95; transform: translateY(-1px); }
.footer-center { text-align: center; justify-self: center; }
.footer-center span { opacity: .74; }

html.js .motion {
  will-change: transform, opacity, filter, clip-path;
  transition: opacity .86s cubic-bezier(.2,.7,.2,1), transform 1.05s cubic-bezier(.16,1,.3,1), filter .9s ease, clip-path 1.05s cubic-bezier(.16,1,.3,1);
}
html.js .motion:not(.is-visible)[data-exit="below"] { opacity: 0; transform: translateY(60px); filter: blur(5px); }
html.js .motion:not(.is-visible)[data-exit="above"] { opacity: 0; transform: translateY(-50px); filter: blur(4px); }
html.js .motion[data-motion="fade"]:not(.is-visible) { opacity: 0; }
html.js .motion[data-motion="rise"]:not(.is-visible) { opacity: 0; transform: translateY(76px); }
html.js .motion[data-motion="slide-left"]:not(.is-visible) { opacity: 0; transform: translateX(92px); }
html.js .motion[data-motion="slide-right"]:not(.is-visible) { opacity: 0; transform: translateX(-92px); }
html.js .motion[data-motion="zoom-soft"]:not(.is-visible) { opacity: 0; transform: scale(.88); filter: blur(7px); }
html.js .motion[data-motion="blur-rise"]:not(.is-visible) { opacity: 0; transform: translateY(50px); filter: blur(16px); }
html.js .motion[data-motion="clip-left"]:not(.is-visible) { opacity: 1; clip-path: inset(0 100% 0 0); }
html.js .motion[data-motion="clip-up"]:not(.is-visible) { opacity: 1; clip-path: inset(100% 0 0 0); }
html.js .motion[data-motion="curtain"]:not(.is-visible) { opacity: 1; clip-path: inset(0 0 100% 0); transform: scale(1.06); }
html.js .motion[data-motion="flip-in"]:not(.is-visible) { opacity: 0; transform: perspective(800px) rotateX(35deg) translateY(30px); transform-origin: top; }
html.js .motion[data-motion="rotate-in"]:not(.is-visible) { opacity: 0; transform: rotate(-5deg) translateY(45px); transform-origin: left; }
html.js .motion[data-motion="scale-pop"]:not(.is-visible) { opacity: 0; transform: scale(.78) rotate(2deg); }
html.js .motion[data-motion="swing-left"]:not(.is-visible) { opacity: 0; transform: translateX(-66px) rotate(-4deg); }
html.js .motion[data-motion="swing-right"]:not(.is-visible) { opacity: 0; transform: translateX(66px) rotate(4deg); }
html.js .motion.is-visible { opacity: 1; transform: none; filter: none; clip-path: inset(0 round 0); }
html.js .path-card:nth-child(even).is-visible { transform: translateY(80px); }

.parallax { will-change: transform; }

@keyframes openingFallback { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@keyframes openLine { to { width: 76px; } }
@keyframes openName { to { opacity: 1; letter-spacing: .56em; } }
@keyframes openPendant { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes pulseRing { 0%,100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.08); opacity: .45; } }
@keyframes wordDrift { from { transform: translateX(-3vw); } to { transform: translateX(3vw); } }
@keyframes pendantFloat { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(-2deg); } }
@keyframes scan { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes orbitFloat { 0%,100% { transform: translate(-50%, -50%) rotate(0deg); } 50% { transform: translate(-50%, -50%) rotate(4deg); } }
@keyframes formIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }



@media (max-width: 1024px) {
  .brand-logo { width: 210px; }
  .stage-pendant { width: 114px; }
  .p4 { left: 16vw; }
}

@media (max-width: 900px) {
  .topbar { height: 70px; padding: 0 22px; }
  .topbar nav {
    position: fixed; inset: 70px 0 auto; max-height: 0; overflow: hidden; gap: 0; display: grid;
    background: rgba(251, 249, 253, 0.97); backdrop-filter: blur(20px); border-bottom: 1px solid var(--line);
    transition: max-height .4s ease, padding .4s ease;
  }
  .topbar.open nav { max-height: 360px; padding: 10px 0; }
  .topbar nav a { padding: 15px 24px; border-top: 1px solid var(--line); }
  .menu { display: block; }
  .stage { padding: 95px 22px 90px; min-height: 980px; }
  .stage-kicker { top: 100px; left: 18px; }
  .stage-title { font-size: clamp(48px, 13vw, 80px); top: -8px; }
  .stage-title .accent { padding-left: 0; }
  .stage-pendant { top: 140px; width: 96px; }
  .p1 { left: 3vw; top: 22vh; width: 34vw; height: 48vw; min-width: 0; min-height: 0; }
  .p2 { right: 4vw; top: 22vh; width: 39vw; height: 27vw; min-width: 0; min-height: 0; }
  .p3 { right: 8vw; bottom: 20vh; width: 30vw; height: 42vw; min-width: 0; min-height: 0; }
  .p4 { left: 8vw; bottom: 20vh; width: 28vw; height: 28vw; min-width: 0; min-height: 0; }
  .stage-intro { left: 22px; bottom: 100px; width: 56vw; }
  .hero-actions { right: 22px; bottom: 66px; flex-direction: column; align-items: flex-end; }
  .circle-cta { width: 96px; height: 96px; }
  .scroll-cue { display: none; }
  .story { display: block; }
  .story-portrait { position: relative; height: 74vh; }
  .story-content { padding: 90px 24px; }
  .story-copy { margin: 55px 0; grid-template-columns: 1fr; }
  .pathways { padding: 100px 22px 130px; }
  .path-list { grid-template-columns: 1fr; gap: 18px; }
  html.js .path-card:nth-child(even).is-visible { transform: none; }
  .path-card:nth-child(even) { transform: none; }
  .interlude { min-height: 700px; }
  .interlude-img { inset: 30px; }
  .interlude-copy { margin: 0 24px; padding: 28px 24px; }
  .interlude-note { right: 40px; left: 40px; width: auto; bottom: 42px; }
  .week { padding: 100px 22px; }
  .week-head { margin-bottom: 60px; }
  .day { grid-template-columns: 64px 90px 1fr 90px; min-height: 120px; }
  .day p { display: none; }
  .day strong { font-size: 15px; }
  .fees { grid-template-columns: 1fr; padding: 100px 22px; }
  .fee-wheel { min-height: 520px; }
  .fee-note { grid-column: auto; }
  .gallery { padding: 100px 0; }
  .filmstrip { display: flex; overflow: auto; scroll-snap-type: x mandatory; padding: 0 22px; }
  .film, .film.tall, .film.wide, .film:nth-child(4) {
    flex: 0 0 74vw; height: 60vh; scroll-snap-align: center;
  }
  .join { grid-template-columns: 1fr; padding: 100px 22px; gap: 60px; }
  .form-shell { padding: 28px 22px; }
  .site-footer { grid-template-columns: 1fr; text-align: center; }
  .footer-brand, .footer-links, .footer-center { justify-self: center; }
}

@media (max-width: 560px) {
  .brand-pendant { width: 44px; height: 44px; }
  .brand-logo { display: none; }
  .brand-text { display: block; }
  .brand small { max-width: 150px; }
  .stage { min-height: 890px; }
  .stage-word { top: 46%; font-size: 20vw; }
  .stage-glow-a { width: 90vw; height: 90vw; left: 5vw; top: 28vh; }
  .stage-glow-b { width: 48vw; height: 48vw; top: 19vh; }
  .stage-pendant { top: 140px; width: 84px; }
  .stage-title { font-size: 13vw; }
  .stage-intro { width: 63vw; font-size: 11px; }
  .circle-cta { width: 80px; height: 80px; font-size: 9px; }
  .ghost-link { padding: 10px 13px; font-size: 10px; }
  .manifesto { padding: 100px 22px; }
  .manifesto blockquote { font-size: 42px; }
  .story-heading, .week-head, .gallery-head { grid-template-columns: 42px 1fr; gap: 12px; }
  .story-content { padding: 80px 20px; }
  .milestones { grid-template-columns: 1fr; }
  .path-head { grid-template-columns: 42px auto; }
  .interlude-copy h2 { font-size: 48px; }
  .day { grid-template-columns: 52px 76px 1fr; }
  .day strong { grid-column: 3; text-align: left; margin-top: -30px; margin-bottom: 14px; color: #8f72a6; }
  .fees { padding-bottom: 80px; }
  .fee-wheel { min-height: 450px; }
  .fee { width: 150px; height: 150px; }
  .fee.center { width: 180px; height: 180px; left: 20%; top: 32%; }
  .fee.f90 { left: 0; }
  .fee.f120 { right: 0; }
  .fee.group { width: 170px; height: 170px; }
  .fee b { font-size: 36px; }
  .form-row { grid-template-columns: 1fr; }
  .footer-brand span { display: block; max-width: 170px; }
}


/* === MOTION REPAIR LAYER — intentionally isolated from layout === */
/* Hero starts only after body.is-loaded, which is applied after the opening overlay is gone. */
body:not(.is-loaded) .stage-title .letter { opacity:0; transform:translateY(72px) rotate(5deg) scale(.96); filter:blur(8px); }
body.is-loaded .stage-title .letter { opacity:1; transform:none; filter:none; }
body:not(.is-loaded) .load-anim { opacity:0; transform:translateY(30px) scale(.985); filter:blur(4px); }
body.is-loaded .load-anim { opacity:1; transform:none; filter:none; }
body:not(.is-loaded) .load-photo { opacity:0; clip-path:inset(0 0 100% 0 round 16px); filter:blur(3px); }
body.is-loaded .load-photo { opacity:1; clip-path:inset(0 round 16px); filter:none; }

/* Scroll motion begins from a visible, meaningful offset. */
html.js .motion.motion-armed {
  transition-property: opacity, transform, filter, clip-path, box-shadow;
  transition-duration: .82s, 1.02s, .78s, 1.02s, .42s;
  transition-timing-function: cubic-bezier(.2,.72,.2,1), cubic-bezier(.16,1,.3,1), ease, cubic-bezier(.16,1,.3,1), ease;
  transition-delay: var(--motion-delay, 0ms);
  will-change: opacity, transform, filter, clip-path;
}
html.js .motion.motion-armed:not(.is-visible) { opacity:0; filter:blur(7px); }
html.js .motion.motion-armed.exit-down:not(.is-visible) { transform:translateY(72px) scale(.975); }
html.js .motion.motion-armed.exit-up:not(.is-visible) { transform:translateY(-58px) scale(.985); }
html.js .motion.motion-armed[data-motion="rise"]:not(.is-visible) { transform:translateY(84px); }
html.js .motion.motion-armed[data-motion="slide-left"]:not(.is-visible) { transform:translateX(105px); }
html.js .motion.motion-armed[data-motion="slide-right"]:not(.is-visible) { transform:translateX(-105px); }
html.js .motion.motion-armed[data-motion="zoom-soft"]:not(.is-visible) { transform:scale(.86); filter:blur(10px); }
html.js .motion.motion-armed[data-motion="blur-rise"]:not(.is-visible) { transform:translateY(62px) scale(.98); filter:blur(18px); }
html.js .motion.motion-armed[data-motion="clip-left"]:not(.is-visible) { opacity:1; filter:none; clip-path:inset(0 100% 0 0); }
html.js .motion.motion-armed[data-motion="clip-up"]:not(.is-visible) { opacity:1; filter:none; clip-path:inset(100% 0 0 0); }
html.js .motion.motion-armed[data-motion="curtain"]:not(.is-visible) { opacity:1; filter:none; clip-path:inset(0 0 100% 0); transform:scale(1.055); }
html.js .motion.motion-armed[data-motion="flip-in"]:not(.is-visible) { transform:perspective(900px) rotateX(38deg) translateY(38px); transform-origin:top; }
html.js .motion.motion-armed[data-motion="rotate-in"]:not(.is-visible) { transform:rotate(-6deg) translateY(48px); transform-origin:left center; }
html.js .motion.motion-armed[data-motion="scale-pop"]:not(.is-visible) { transform:scale(.76) rotate(2deg); }
html.js .motion.motion-armed[data-motion="swing-left"]:not(.is-visible) { transform:translateX(-76px) rotate(-5deg); }
html.js .motion.motion-armed[data-motion="swing-right"]:not(.is-visible) { transform:translateX(76px) rotate(5deg); }
html.js .motion.motion-armed.is-visible { opacity:1; transform:none; filter:none; clip-path:inset(0); }
/* Preserve the original staggered vertical layout of even pathway cards. */
html.js .path-card:nth-child(even).motion-armed.is-visible { transform:translateY(80px); }

/* More noticeable hover motion without changing geometry. */
.path-card, .milestones article, .day, .fee, .film, .form-shell, .interlude-note { transition:transform .42s cubic-bezier(.16,1,.3,1), box-shadow .42s ease, background .35s ease, color .35s ease; }
.path-card:hover { transform:translateY(-10px) scale(1.012) !important; box-shadow:0 32px 70px rgba(70,48,84,.14); }
.milestones article:hover { transform:translateY(-7px); box-shadow:0 24px 45px rgba(76,54,91,.11); }
.day:hover { transform:translateX(12px) translateY(-2px); box-shadow:0 24px 50px rgba(69,48,83,.11); }
.fee:hover { box-shadow:0 30px 58px rgba(63,45,77,.17); }
.film:hover { transform:translateY(-7px); box-shadow:0 28px 54px rgba(63,44,77,.14); }
.form-shell:hover { transform:translateY(-4px); box-shadow:0 40px 80px rgba(0,0,0,.20); }
.interlude-note:hover { transform:translateY(-5px); box-shadow:0 24px 46px rgba(75,53,92,.13); }

/* Ambient movement is continuous, subtle, and does not affect layout. */
.stage:before { animation:breathe 6s ease-in-out infinite; }
.stage-pendant img { animation:pendantFloat 7s ease-in-out infinite; }
.orbit { animation:orbitFloat 13s ease-in-out infinite; }
.marquee { animation:marquee 26s linear infinite; }

@media (max-width:900px) {
  html.js .path-card:nth-child(even).motion-armed.is-visible { transform:none; }
}


/* ===== RELIABLE MOTION SYSTEM v3 =====
   Explicitly enabled for this site because motion is part of the requested art direction. */

/* Header logo: wordmark only. */
.brand { gap: 0; }
.brand-copy { align-items: start; }

/* Hero load: deliberately obvious and starts only after intro clears. */
body:not(.is-loaded) .stage-title .letter {
  opacity: 0 !important;
  transform: translate3d(0, 92px, 0) rotate(7deg) scale(.94) !important;
  filter: blur(12px) !important;
}
body.is-loaded .stage-title .letter {
  opacity: 1 !important;
  transform: translate3d(0,0,0) rotate(0) scale(1) !important;
  filter: blur(0) !important;
  transition: opacity .9s cubic-bezier(.2,.75,.2,1), transform 1.15s cubic-bezier(.16,1,.3,1), filter .95s ease !important;
}
body:not(.is-loaded) .load-anim {
  opacity: 0 !important;
  transform: translate3d(0,48px,0) scale(.97) !important;
  filter: blur(8px) !important;
}
body.is-loaded .load-anim {
  opacity: 1 !important;
  transform: translate3d(0,0,0) scale(1) !important;
  filter: blur(0) !important;
  transition: opacity .95s var(--d,0s) ease, transform 1.05s var(--d,0s) cubic-bezier(.16,1,.3,1), filter .85s var(--d,0s) ease !important;
}
body:not(.is-loaded) .load-photo {
  opacity: 0 !important;
  clip-path: inset(0 0 100% 0 round 16px) !important;
  filter: blur(8px) !important;
}
body.is-loaded .load-photo {
  opacity: 1 !important;
  clip-path: inset(0 round 16px) !important;
  filter: blur(0) !important;
  transition: opacity .35s var(--d,0s) ease, clip-path 1.2s var(--d,0s) cubic-bezier(.16,1,.3,1), filter .9s var(--d,0s) ease !important;
}

/* Scroll items always start from a real motion state. */
html.js .motion.motion-armed {
  opacity: 0;
  transform: translate3d(0,82px,0) scale(.97);
  filter: blur(10px);
  transition: opacity .78s cubic-bezier(.2,.72,.2,1), transform 1.05s cubic-bezier(.16,1,.3,1), filter .86s ease, clip-path 1.05s cubic-bezier(.16,1,.3,1), box-shadow .42s ease !important;
  transition-delay: var(--motion-delay,0ms) !important;
  will-change: transform, opacity, filter, clip-path;
}
html.js .motion.motion-armed.exit-up { opacity:0; transform:translate3d(0,-72px,0) scale(.975); filter:blur(9px); }
html.js .motion.motion-armed.exit-down { opacity:0; transform:translate3d(0,82px,0) scale(.97); filter:blur(9px); }
html.js .motion.motion-armed[data-motion="rise"]:not(.is-visible) { transform:translate3d(0,96px,0); }
html.js .motion.motion-armed[data-motion="slide-left"]:not(.is-visible) { transform:translate3d(120px,0,0); }
html.js .motion.motion-armed[data-motion="slide-right"]:not(.is-visible) { transform:translate3d(-120px,0,0); }
html.js .motion.motion-armed[data-motion="zoom-soft"]:not(.is-visible) { transform:scale(.82); filter:blur(14px); }
html.js .motion.motion-armed[data-motion="blur-rise"]:not(.is-visible) { transform:translate3d(0,72px,0) scale(.97); filter:blur(20px); }
html.js .motion.motion-armed[data-motion="clip-left"]:not(.is-visible) { opacity:1; filter:none; clip-path:inset(0 100% 0 0); transform:none; }
html.js .motion.motion-armed[data-motion="clip-up"]:not(.is-visible) { opacity:1; filter:none; clip-path:inset(100% 0 0 0); transform:none; }
html.js .motion.motion-armed[data-motion="curtain"]:not(.is-visible) { opacity:1; filter:none; clip-path:inset(0 0 100% 0); transform:scale(1.07); }
html.js .motion.motion-armed[data-motion="flip-in"]:not(.is-visible) { transform:perspective(900px) rotateX(42deg) translateY(40px); transform-origin:top; }
html.js .motion.motion-armed[data-motion="rotate-in"]:not(.is-visible) { transform:rotate(-7deg) translateY(54px); transform-origin:left center; }
html.js .motion.motion-armed[data-motion="scale-pop"]:not(.is-visible) { transform:scale(.72) rotate(3deg); }
html.js .motion.motion-armed[data-motion="swing-left"]:not(.is-visible) { transform:translate3d(-88px,0,0) rotate(-6deg); }
html.js .motion.motion-armed[data-motion="swing-right"]:not(.is-visible) { transform:translate3d(88px,0,0) rotate(6deg); }
html.js .motion.motion-armed.is-visible {
  opacity:1 !important; transform:none !important; filter:none !important; clip-path:inset(0) !important;
}
html.js .path-card:nth-child(even).motion-armed.is-visible { transform:translateY(80px) !important; }

/* More dimensional hover responses. */
.path-card,.milestones article,.day,.fee,.film,.form-shell,.interlude-note,.photo {
  transition: transform .48s cubic-bezier(.16,1,.3,1), box-shadow .48s ease, background .4s ease, color .35s ease, filter .4s ease !important;
}
.path-card:hover { transform:translateY(-13px) scale(1.016) !important; box-shadow:0 38px 80px rgba(69,47,84,.17) !important; }
.milestones article:hover { transform:translateY(-9px) scale(1.012); box-shadow:0 28px 55px rgba(76,54,91,.14); }
.day:hover { transform:translateX(14px) translateY(-3px); box-shadow:0 28px 58px rgba(69,48,83,.14); }
.fee:hover { transform:scale(1.075) !important; box-shadow:0 34px 66px rgba(63,45,77,.20) !important; }
.film:hover { transform:translateY(-10px) scale(1.008); box-shadow:0 34px 68px rgba(63,44,77,.18); }
.form-shell:hover { transform:translateY(-5px); box-shadow:0 46px 88px rgba(0,0,0,.22); }
.interlude-note:hover { transform:translateY(-7px); box-shadow:0 30px 56px rgba(75,53,92,.16); }
.photo:hover { box-shadow:0 36px 78px rgba(63,43,77,.22) !important; }

/* Ambient art motion, independent of scroll JS. */
.stage-glow-a { animation:artFloatA 7s ease-in-out infinite !important; }
.stage-glow-b { animation:artFloatB 8.5s ease-in-out infinite !important; }
.stage-pendant img { animation:pendantFloat 6.5s ease-in-out infinite !important; }
.portrait-ring { animation:ringDance 6s ease-in-out infinite !important; }
.orbit { animation:orbitDance 14s ease-in-out infinite !important; }
.marquee { animation:marquee 24s linear infinite !important; }
@keyframes artFloatA { 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(22px,-18px,0) scale(1.06)} }
@keyframes artFloatB { 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(-18px,20px,0) scale(.94)} }
@keyframes ringDance { 0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.72} 50%{transform:translate3d(-14px,12px,0) scale(1.08);opacity:1} }
@keyframes orbitDance { 0%,100%{transform:translate(-50%,-50%) rotate(0deg) scale(1)} 50%{transform:translate(-50%,-50%) rotate(5deg) scale(1.02)} }

@media(max-width:900px){
  html.js .path-card:nth-child(even).motion-armed.is-visible { transform:none !important; }
}


/* ===== LOCATION / MAP SECTION ===== */
.location {
  padding: 150px 6vw 165px;
  background:
    radial-gradient(circle at 86% 18%, rgba(207,189,226,.40), transparent 24%),
    radial-gradient(circle at 12% 86%, rgba(225,213,237,.44), transparent 28%),
    linear-gradient(180deg,#fdfbfe 0%,#f2ebf7 100%);
  isolation:isolate;
}
.location-head {
  max-width: 860px;
  margin: 0 auto 72px;
  display:grid;
  grid-template-columns:70px 1fr;
  gap:24px;
  position:relative;
  z-index:3;
}
.location-head>span { font:italic 28px var(--serif); color:var(--lav); }
.location-orb {
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  z-index:-1;
  filter:blur(3px);
  opacity:.8;
}
.location-orb.orb-one {
  width:320px;height:320px;right:-80px;top:90px;
  border:1px solid rgba(148,116,174,.16);
  box-shadow:0 0 0 42px rgba(192,170,213,.07),0 0 0 92px rgba(192,170,213,.04);
  animation:mapOrb 8s ease-in-out infinite;
}
.location-orb.orb-two {
  width:180px;height:180px;left:3vw;bottom:120px;
  background:radial-gradient(circle,rgba(185,159,207,.18),transparent 70%);
  animation:mapOrb 10s -2s ease-in-out infinite reverse;
}
.map-stage {
  position:relative;
  width:min(1180px,100%);
  min-height:660px;
  margin:auto;
  perspective:1200px;
}
.map-shadow {
  position:absolute;
  left:6%;right:6%;bottom:-30px;height:80px;
  background:radial-gradient(ellipse,rgba(56,39,69,.22),transparent 70%);
  filter:blur(22px);
  z-index:-1;
}
.map-frame {
  position:absolute;
  inset:0 7% 0 3%;
  overflow:hidden;
  border-radius:34px;
  border:1px solid rgba(89,65,106,.11);
  background:#e8e0ee;
  box-shadow:
    0 52px 110px rgba(61,43,75,.18),
    0 18px 38px rgba(61,43,75,.10),
    inset 0 0 0 1px rgba(255,255,255,.58);
  transform:rotate(-1deg);
  transition:transform .75s cubic-bezier(.16,1,.3,1),box-shadow .75s ease;
}
.map-stage:hover .map-frame {
  transform:rotate(0deg) translateY(-4px);
  box-shadow:0 62px 126px rgba(61,43,75,.20),0 22px 44px rgba(61,43,75,.12),inset 0 0 0 1px rgba(255,255,255,.65);
}
.map-frame iframe {
  width:100%;height:100%;min-height:660px;border:0;display:block;
  filter:saturate(.68) contrast(.94) brightness(1.035) sepia(.025);
  transition:filter .65s ease,transform 1.2s cubic-bezier(.16,1,.3,1);
}
.map-stage:hover .map-frame iframe { filter:saturate(.82) contrast(.97) brightness(1.02); transform:scale(1.01); }
.map-vignette {
  position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 90px rgba(62,44,76,.13),inset 0 0 0 1px rgba(255,255,255,.35);
  background:linear-gradient(120deg,rgba(247,242,250,.14),transparent 35%,transparent 72%,rgba(224,211,235,.20));
}
.map-address-card {
  position:absolute;
  top:72px;right:0;
  width:min(380px,34vw);
  padding:30px 32px 28px;
  border-radius:26px;
  background:rgba(255,253,255,.82);
  backdrop-filter:blur(20px);
  border:1px solid rgba(105,77,125,.13);
  box-shadow:0 30px 72px rgba(63,44,77,.18),0 8px 18px rgba(63,44,77,.07);
  z-index:5;
  transition:transform .52s cubic-bezier(.16,1,.3,1),box-shadow .52s ease,background .4s ease;
}
.map-address-card:hover {
  transform:translateY(-8px) rotate(.3deg)!important;
  background:rgba(255,254,255,.94);
  box-shadow:0 42px 88px rgba(63,44,77,.22),0 12px 24px rgba(63,44,77,.09);
}
.map-pin-mark {
  width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(145deg,#eee4f5,#d7c4e8);
  box-shadow:0 12px 28px rgba(103,77,123,.18),inset 0 1px 0 rgba(255,255,255,.85);
  margin-bottom:20px;
  animation:pinFloat 4.8s ease-in-out infinite;
}
.map-pin-mark span {
  width:12px;height:12px;border-radius:50%;
  background:#795b92;
  box-shadow:0 0 0 7px rgba(121,91,146,.11);
}
.map-address-card h3 { margin:10px 0 13px; font:400 31px/1.08 var(--serif); }
.map-address-card address { font-style:normal;font-size:13px;line-height:1.9;color:var(--muted);margin-bottom:22px; }
.map-address-card>a {
  display:inline-flex;align-items:center;min-height:42px;
  color:var(--ink);text-decoration:none;
  font-size:11px;letter-spacing:.08em;
  border-bottom:1px solid rgba(102,77,120,.32);
  transition:color .35s ease,border-color .35s ease,transform .35s ease;
}
.map-address-card>a:hover { color:#76558f;border-color:#76558f;transform:translateX(4px); }
.french-note {
  position:absolute;
  left:7%;bottom:45px;
  width:min(440px,40vw);
  padding:24px 28px 22px;
  border-radius:22px;
  color:#f7f2fa;
  background:linear-gradient(150deg,rgba(47,37,55,.93),rgba(63,47,72,.92));
  box-shadow:0 28px 64px rgba(48,34,58,.23);
  backdrop-filter:blur(16px);
  z-index:5;
  transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s ease;
}
.french-note:hover { transform:translateY(-7px)!important;box-shadow:0 38px 78px rgba(48,34,58,.27); }
.french-rule { display:block;width:52px;height:1px;background:#cdb7dd;margin-bottom:17px; }
.french-note blockquote { margin:0 0 10px;font:italic 400 31px/1.08 var(--serif);letter-spacing:-.01em; }
.french-note blockquote i { color:#d9c5e7;font-weight:400; }
.french-note small { font-size:10px;letter-spacing:.12em;color:#cfc1d6; }
.join-address { margin:28px 0 0!important; display:grid; gap:7px; }
.join-address>span { font-size:9px;letter-spacing:.22em;color:#a997b4; }
.join-address>a { color:#d9cce1!important;text-decoration:none!important;border:0!important;padding:0!important;font:300 11px/1.7 var(--sans)!important; }
.join-address>a:hover { color:white!important; }
@keyframes mapOrb { 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(-16px,18px,0) scale(1.05)} }
@keyframes pinFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
@media(max-width:900px){
  .location{padding:100px 22px 120px}.location-head{grid-template-columns:48px 1fr;margin-bottom:54px}.map-stage{min-height:720px}.map-frame{inset:0 0 110px 0;transform:none}.map-frame iframe{min-height:610px}.map-address-card{top:34px;right:22px;width:min(350px,70vw)}.french-note{left:22px;bottom:0;width:min(390px,72vw)}
}
@media(max-width:560px){
  .location{padding-left:18px;padding-right:18px}.map-stage{min-height:760px}.map-frame{inset:0 0 160px 0;border-radius:24px}.map-frame iframe{min-height:560px}.map-address-card{top:28px;right:14px;left:14px;width:auto;padding:24px 24px 22px}.map-address-card h3{font-size:27px}.french-note{left:14px;right:14px;bottom:0;width:auto;padding:20px 22px}.french-note blockquote{font-size:27px}.location-orb.orb-one{width:210px;height:210px}}


/* ===== PRIVATE COACHING HOVER + SPARKLE FIX ===== */
/* The center circle had a later white background declaration that overrode
   the generic dark hover state. Keep the hover surface and all text explicit. */
.fee,
.fee small,
.fee b,
.fee span {
  color: inherit;
}
.fee:hover,
.fee.center:hover,
.fee.f90:hover,
.fee.f120:hover,
.fee.group:hover {
  background: linear-gradient(155deg,#34293d 0%,#4a3656 100%) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.22) !important;
}
.fee:hover small,
.fee:hover b,
.fee:hover span,
.fee.center:hover small,
.fee.center:hover b,
.fee.center:hover span {
  color:#fff !important;
  opacity:1 !important;
  visibility:visible !important;
  text-shadow:0 1px 12px rgba(255,255,255,.08);
}
.fee {
  overflow:visible;
  isolation:isolate;
}
.fee::after {
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:50%;
  border:1px solid transparent;
  pointer-events:none;
  transition:border-color .38s ease, transform .45s cubic-bezier(.16,1,.3,1), opacity .4s ease;
  opacity:0;
  z-index:-1;
}
.fee:hover::after {
  border-color:rgba(185,153,214,.34);
  transform:scale(1.055);
  opacity:1;
}
.fee-spark {
  --angle:0deg;
  --distance:72px;
  --delay:0ms;
  position:absolute;
  left:50%;
  top:50%;
  width:5px;
  height:5px;
  border-radius:50%;
  pointer-events:none;
  z-index:12;
  opacity:0;
  background:radial-gradient(circle at 35% 35%,#fff 0 20%,#e9d8f8 35%,#b98fd8 68%,rgba(185,143,216,0) 72%);
  box-shadow:0 0 8px rgba(210,177,235,.8),0 0 15px rgba(172,126,207,.38);
  animation:feeSparkBurst 820ms cubic-bezier(.18,.7,.2,1) var(--delay) forwards;
}
.fee-spark.spark-large { width:7px;height:7px; }
.fee-spark.spark-tiny { width:3px;height:3px; }
@keyframes feeSparkBurst {
  0% {
    opacity:0;
    transform:translate(-50%,-50%) rotate(var(--angle)) translateX(2px) scale(.2);
  }
  12% { opacity:1; }
  45% { opacity:.95; }
  100% {
    opacity:0;
    transform:translate(-50%,-50%) rotate(var(--angle)) translateX(var(--distance)) scale(.08);
  }
}

/* ===== MAP SHADOW CLIPPING FIX ===== */
/* The generic section-shell uses overflow:clip. The map intentionally has
   floating cards and external shadows, so this section needs visible overflow. */
.location.section-shell {
  overflow:visible !important;
}
.location {
  z-index:2;
}
.map-stage {
  overflow:visible !important;
  padding-bottom:34px;
}
.map-shadow {
  bottom:-54px;
  height:112px;
  opacity:.82;
}
.map-frame {
  /* give the shadow a little more spatial separation without changing layout */
  box-shadow:
    0 58px 122px rgba(61,43,75,.18),
    0 22px 46px rgba(61,43,75,.11),
    inset 0 0 0 1px rgba(255,255,255,.58);
}
.map-address-card,
.french-note {
  overflow:visible;
}


/* ===== COLOR SPARKLES + FULL MAP SHADOW FIX ===== */
/* Map elements need their shadows to extend beyond their own boxes. The
   generic motion system uses clip-path even in its visible state, which clips
   external shadows. These components animate with opacity/transform only. */
.map-stage.motion,
.map-address-card.motion,
.french-note.motion,
.map-stage.motion.motion-armed,
.map-address-card.motion.motion-armed,
.french-note.motion.motion-armed,
.map-stage.motion.is-visible,
.map-address-card.motion.is-visible,
.french-note.motion.is-visible,
.map-stage.motion.motion-armed.is-visible,
.map-address-card.motion.motion-armed.is-visible,
.french-note.motion.motion-armed.is-visible {
  clip-path: none !important;
  overflow: visible !important;
}
.location,
.location.section-shell,
.map-stage {
  overflow: visible !important;
}
.location {
  padding-bottom: 205px;
}
.map-stage {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}
.map-frame {
  box-shadow:
    0 68px 138px rgba(61,43,75,.21),
    0 26px 58px rgba(61,43,75,.13),
    0 8px 18px rgba(61,43,75,.06),
    inset 0 0 0 1px rgba(255,255,255,.58) !important;
}
.map-shadow {
  left: 3%;
  right: 3%;
  bottom: -78px;
  height: 150px;
  filter: blur(30px);
  opacity: .9;
}
.map-address-card {
  right: -22px;
  box-shadow:
    0 44px 96px rgba(63,44,77,.22),
    0 14px 30px rgba(63,44,77,.10) !important;
}
.french-note {
  box-shadow: 0 38px 84px rgba(48,34,58,.27) !important;
}

/* Slightly larger, multicolor sparkle burst. Individual colors are supplied
   from JavaScript through --spark-color / --spark-glow. */
.fee-spark {
  width: 7px;
  height: 7px;
  background: radial-gradient(circle at 34% 32%, #fff 0 16%, var(--spark-color,#d9a6ff) 34%, var(--spark-color,#d9a6ff) 62%, transparent 72%) !important;
  box-shadow:
    0 0 10px var(--spark-glow,rgba(217,166,255,.85)),
    0 0 20px var(--spark-glow,rgba(217,166,255,.45)) !important;
  animation-duration: 940ms !important;
}
.fee-spark.spark-large { width: 11px !important; height: 11px !important; }
.fee-spark.spark-tiny { width: 5px !important; height: 5px !important; }

@media(max-width:900px){
  .location{padding-bottom:155px}
  .map-stage{width:100%}
  .map-address-card{right:22px}
}
@media(max-width:560px){
  .location{padding-bottom:135px}
  .map-address-card{right:14px}
}


/* ===== FINAL OVERFLOW / DEPTH FIX: FEES + LOCATION ===== */
/* Private coaching deliberately projects outside its layout boxes. */
.fees.section-shell,
.fees,
.fee-wheel,
.fee-wheel.motion,
.fee-wheel.motion.motion-armed,
.fee-wheel.motion.is-visible,
.fee-wheel.motion.motion-armed.is-visible {
  overflow: visible !important;
  clip-path: none !important;
}
.fees { position: relative; z-index: 3; }
.fee-wheel { z-index: 4; }
.fee {
  overflow: visible !important;
  transform-origin: center center;
}
.fee:hover,
.fee:focus-visible {
  z-index: 60 !important;
  box-shadow:
    0 42px 92px rgba(61,43,75,.24),
    0 18px 36px rgba(61,43,75,.14),
    0 0 0 12px rgba(184,153,211,.055) !important;
}
.fee::after { z-index: -1; }
.fee-spark { z-index: 80 !important; }

/* Give the map composition a true shadow-safe gutter. The body intentionally
   prevents horizontal page scrolling, so shadows must stay within viewport. */
.location.section-shell,
.location,
.map-stage,
.map-stage.motion,
.map-stage.motion.motion-armed,
.map-stage.motion.is-visible,
.map-stage.motion.motion-armed.is-visible {
  overflow: visible !important;
  clip-path: none !important;
}
.location {
  padding-left: max(7vw, 72px) !important;
  padding-right: max(7vw, 72px) !important;
  padding-bottom: 230px !important;
  z-index: 4;
}
.map-stage {
  width: min(1080px, calc(100% - 72px)) !important;
  margin: 0 auto !important;
  padding: 0 18px 72px !important;
  box-sizing: border-box;
}
.map-frame {
  inset: 0 6% 72px 2% !important;
  box-shadow:
    0 74px 150px rgba(61,43,75,.22),
    0 34px 68px rgba(61,43,75,.15),
    0 12px 28px rgba(61,43,75,.08),
    inset 0 0 0 1px rgba(255,255,255,.58) !important;
}
.map-shadow {
  left: 1% !important;
  right: 1% !important;
  bottom: -18px !important;
  height: 160px !important;
  filter: blur(34px) !important;
  opacity: .86 !important;
}
.map-address-card {
  right: 28px !important;
  top: 68px !important;
  box-shadow:
    0 46px 96px rgba(63,44,77,.23),
    0 18px 36px rgba(63,44,77,.11),
    0 0 0 1px rgba(255,255,255,.28) !important;
}
.french-note {
  left: 6% !important;
  bottom: 82px !important;
  box-shadow:
    0 42px 92px rgba(48,34,58,.29),
    0 16px 34px rgba(48,34,58,.15) !important;
}

/* Spark particles are intentionally larger and travel well beyond the circle. */
.fee-spark {
  width: 9px !important;
  height: 9px !important;
  animation-duration: 1120ms !important;
  filter: saturate(1.15);
}
.fee-spark.spark-large { width: 15px !important; height: 15px !important; }
.fee-spark.spark-tiny { width: 6px !important; height: 6px !important; }
@keyframes feeSparkBurstWide {
  0% {
    opacity: 0;
    transform: translate(-50%,-50%) rotate(var(--angle)) translateX(12px) scale(.25);
  }
  10% { opacity: 1; }
  40% { opacity: 1; }
  72% { opacity: .72; }
  100% {
    opacity: 0;
    transform: translate(-50%,-50%) rotate(var(--angle)) translateX(var(--distance)) scale(.12);
  }
}
.fee-spark { animation-name: feeSparkBurstWide !important; }

@media(max-width:900px){
  .location{padding-left:32px!important;padding-right:32px!important;padding-bottom:180px!important}
  .map-stage{width:100%!important;padding-left:10px!important;padding-right:10px!important}
  .map-frame{inset:0 0 120px 0!important}
  .map-address-card{right:24px!important;left:auto!important}
  .french-note{left:24px!important;bottom:25px!important}
}
@media(max-width:560px){
  .location{padding-left:18px!important;padding-right:18px!important;padding-bottom:155px!important}
  .map-stage{padding:0 0 40px!important}
  .map-frame{inset:0 0 170px 0!important}
  .map-address-card{left:18px!important;right:18px!important;top:28px!important}
  .french-note{left:18px!important;right:18px!important;bottom:0!important}
}

/* ===== SHADOW-SAFE VISUAL CANVASES =====
   Keep large shadows/sparkles inside each section instead of relying on overflow
   beyond a sibling/viewport boundary. */

/* Private coaching: enlarge the visual stage and pull all circles inward. */
.fees {
  overflow: visible !important;
  padding-top: 170px !important;
  padding-bottom: 220px !important;
}
.fee-wheel,
.fee-wheel.motion,
.fee-wheel.motion.motion-armed,
.fee-wheel.motion.is-visible,
.fee-wheel.motion.motion-armed.is-visible {
  position: relative !important;
  min-height: 690px !important;
  overflow: visible !important;
  clip-path: none !important;
  padding: 72px 82px 92px 68px !important;
  box-sizing: border-box !important;
}
/* Reposition relative to the enlarged safe stage. */
.fee.f90   { left: 8% !important;  top: 10% !important; }
.fee.f120  { right: 11% !important; top: 7% !important; }
.fee.center{ left: 31% !important; top: 31% !important; }
.fee.group { right: 9% !important; bottom: 12% !important; }

/* Dedicated soft floor under the whole wheel; it never reaches the stage edge. */
.fee-wheel::after {
  content:"";
  position:absolute;
  left:10%; right:8%; bottom:42px;
  height:90px;
  border-radius:50%;
  background:radial-gradient(ellipse, rgba(70,49,84,.14), rgba(115,84,137,.055) 42%, transparent 72%);
  filter:blur(24px);
  pointer-events:none;
  z-index:0;
}
.fee { z-index: 2; }
.fee:hover,.fee:focus-visible { z-index: 90 !important; }
.fee-spark { z-index: 120 !important; }

/* Map: create a taller internal canvas and keep every shadow fully inside it. */
.location {
  overflow: visible !important;
  padding-bottom: 185px !important;
}
.map-stage,
.map-stage.motion,
.map-stage.motion.motion-armed,
.map-stage.motion.is-visible,
.map-stage.motion.motion-armed.is-visible {
  width: min(1160px, calc(100% - 40px)) !important;
  min-height: 820px !important;
  margin: 0 auto !important;
  padding: 24px 78px 190px 52px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  clip-path: none !important;
}
.map-frame {
  /* Leave a real internal floor below the map for its shadow. */
  inset: 24px 92px 175px 52px !important;
  box-shadow:
    0 48px 82px rgba(61,43,75,.18),
    0 20px 36px rgba(61,43,75,.10),
    inset 0 0 0 1px rgba(255,255,255,.58) !important;
}
.map-shadow {
  /* Entire blurred ellipse sits inside map-stage. */
  left: 10% !important;
  right: 12% !important;
  bottom: 74px !important;
  height: 118px !important;
  background: radial-gradient(ellipse, rgba(58,40,71,.24), rgba(91,65,108,.10) 40%, transparent 72%) !important;
  filter: blur(28px) !important;
  opacity: .92 !important;
  z-index: 0 !important;
}
.map-frame { z-index: 1; }
.map-address-card {
  /* Pull inward far enough for the 90px shadow to remain in the stage. */
  right: 88px !important;
  top: 82px !important;
  z-index: 6 !important;
  box-shadow:
    0 34px 64px rgba(63,44,77,.20),
    0 13px 25px rgba(63,44,77,.10),
    0 0 0 1px rgba(255,255,255,.26) !important;
}
.map-address-card:hover {
  box-shadow:
    0 42px 76px rgba(63,44,77,.23),
    0 16px 30px rgba(63,44,77,.11),
    0 0 0 1px rgba(255,255,255,.30) !important;
}
.french-note {
  left: 9% !important;
  bottom: 138px !important;
  z-index: 6 !important;
  box-shadow:
    0 30px 58px rgba(48,34,58,.27),
    0 12px 24px rgba(48,34,58,.14) !important;
}

/* Stronger sparkle travel, still safe because circles now have generous margins. */
.fee-spark {
  animation-duration: 1260ms !important;
}
.fee-spark.spark-large { width:17px !important; height:17px !important; }
@keyframes feeSparkBurstCanvas {
  0%   { opacity:0; transform:translate(-50%,-50%) rotate(var(--angle)) translateX(10px) scale(.18); }
  9%   { opacity:1; }
  38%  { opacity:1; }
  72%  { opacity:.82; }
  100% { opacity:0; transform:translate(-50%,-50%) rotate(var(--angle)) translateX(var(--distance)) scale(.08); }
}
.fee-spark { animation-name: feeSparkBurstCanvas !important; }

@media(max-width:900px){
  .fees{padding-bottom:150px!important}
  .fee-wheel{min-height:610px!important;padding:52px 34px 70px!important}
  .fee.f90{left:3%!important;top:8%!important}
  .fee.f120{right:3%!important;top:5%!important}
  .fee.center{left:28%!important;top:31%!important}
  .fee.group{right:4%!important;bottom:10%!important}

  .location{padding-bottom:135px!important}
  .map-stage{width:100%!important;min-height:760px!important;padding:18px 36px 165px!important}
  .map-frame{inset:18px 40px 160px 28px!important}
  .map-shadow{bottom:62px!important;left:8%!important;right:8%!important;height:105px!important}
  .map-address-card{right:48px!important;top:54px!important}
  .french-note{left:7%!important;bottom:118px!important}
}
@media(max-width:560px){
  .fees{padding-bottom:110px!important}
  .fee-wheel{min-height:520px!important;padding:34px 8px 54px!important}
  .fee.f90{left:0!important;top:5%!important}
  .fee.f120{right:0!important;top:2%!important}
  .fee.center{left:18%!important;top:31%!important}
  .fee.group{right:1%!important;bottom:5%!important}

  .location{padding-bottom:100px!important}
  .map-stage{min-height:790px!important;padding:12px 12px 185px!important}
  .map-frame{inset:12px 12px 190px!important}
  .map-shadow{bottom:85px!important;left:7%!important;right:7%!important;height:90px!important;filter:blur(22px)!important}
  .map-address-card{left:32px!important;right:32px!important;top:34px!important}
  .french-note{left:30px!important;right:30px!important;bottom:125px!important;width:auto!important}
}
\n\n/* ===== STRUCTURAL NO-CLIP FIX =====\n   These two visual canvases must project shadows/sparks, so they deliberately\n   do not use the generic section-shell/motion clip-path system. */\n.fees, .fee-wheel, .location, .map-stage, .map-address-card, .french-note {\n  overflow: visible !important;\n  clip-path: none !important;\n  mask-image: none !important;\n  -webkit-mask-image: none !important;\n}\n.fees {\n  position:relative !important;\n  z-index:20 !important;\n  padding-bottom:260px !important;\n}\n.gallery { position:relative; z-index:1; }\n.fee-wheel {\n  min-height:760px !important;\n  padding:72px 120px 120px 72px !important;\n  isolation:visible !important;\n}\n/* Pull circles inward enough for 1.5–2x-radius sparkle travel and hover shadow. */\n.fee.f90    { left:6% !important; top:9% !important; }\n.fee.f120   { right:18% !important; top:6% !important; }\n.fee.center { left:27% !important; top:31% !important; }\n.fee.group  { right:19% !important; bottom:19% !important; }\n.fee:hover,.fee:focus-visible {\n  z-index:999 !important;\n  box-shadow:0 48px 110px rgba(61,43,75,.25),0 20px 44px rgba(61,43,75,.15),0 0 0 14px rgba(184,153,211,.06) !important;\n}\n.fee-spark{z-index:1200!important;pointer-events:none!important}\n\n/* Map receives a real internal shadow floor; nothing needs to overflow into the next section. */\n.location {\n  position:relative !important;\n  z-index:18 !important;\n  padding-bottom:240px !important;\n}\n.join { position:relative; z-index:1; }\n.map-stage {\n  width:min(1140px, calc(100% - 96px)) !important;\n  min-height:900px !important;\n  margin:0 auto !important;\n  padding:30px 100px 235px 60px !important;\n  perspective:none !important;\n}\n.map-frame {\n  inset:30px 108px 225px 60px !important;\n  z-index:2 !important;\n  box-shadow:0 64px 118px rgba(61,43,75,.20),0 30px 58px rgba(61,43,75,.13),0 12px 26px rgba(61,43,75,.07),inset 0 0 0 1px rgba(255,255,255,.58) !important;\n}\n.map-shadow {\n  left:10% !important; right:14% !important; bottom:92px !important; height:126px !important;\n  filter:blur(28px) !important; opacity:.88 !important; z-index:1 !important;\n}\n.map-address-card {\n  right:118px !important; top:86px !important; z-index:8 !important;\n  box-shadow:0 42px 86px rgba(63,44,77,.21),0 17px 34px rgba(63,44,77,.10),0 0 0 1px rgba(255,255,255,.26) !important;\n}\n.french-note { left:11% !important; bottom:172px !important; z-index:8 !important; }\n\n/* Animation with no clip-path. Replays in both scroll directions. */\n.open-motion {\n  --open-x:0px; --open-y:54px; --open-scale:.94; --open-blur:7px;\n  opacity:0;\n  transform:translate3d(var(--open-x),var(--open-y),0) scale(var(--open-scale));\n  filter:blur(var(--open-blur));\n  transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform 1.05s cubic-bezier(.16,1,.3,1), filter .85s ease !important;\n}\n.open-motion[data-open-fx="slide-left"] { --open-x:74px; --open-y:0px; --open-scale:1; --open-blur:3px; }\n.open-motion[data-open-fx="blur-rise"] { --open-x:0px; --open-y:46px; --open-scale:.98; --open-blur:14px; }\n.open-motion.open-visible { opacity:1; transform:none; filter:none; }\n.open-motion.open-above:not(.open-visible){ --open-y:-44px; }\n\n@media(max-width:900px){\n  .fees{padding-bottom:180px!important}\n  .fee-wheel{min-height:650px!important;padding:50px 50px 90px!important}\n  .fee.f90{left:4%!important}.fee.f120{right:10%!important}.fee.center{left:26%!important}.fee.group{right:10%!important;bottom:14%!important}\n  .location{padding-bottom:160px!important}\n  .map-stage{width:100%!important;min-height:800px!important;padding:22px 50px 190px 34px!important}\n  .map-frame{inset:22px 54px 185px 34px!important}\n  .map-shadow{bottom:72px!important;left:8%!important;right:10%!important}\n  .map-address-card{right:64px!important;top:56px!important}\n  .french-note{left:8%!important;bottom:140px!important}\n}\n@media(max-width:560px){\n  .fees{padding-bottom:135px!important}\n  .fee-wheel{min-height:560px!important;padding:30px 10px 70px!important}\n  .fee.f90{left:0!important}.fee.f120{right:2%!important}.fee.center{left:17%!important}.fee.group{right:3%!important;bottom:8%!important}\n  .location{padding-bottom:120px!important}\n  .map-stage{min-height:805px!important;padding:14px 16px 190px!important}\n  .map-frame{inset:14px 16px 190px!important}\n  .map-shadow{bottom:88px!important;left:7%!important;right:7%!important}\n  .map-address-card{left:32px!important;right:32px!important;top:34px!important}\n  .french-note{left:30px!important;right:30px!important;bottom:126px!important;width:auto!important}\n}\n

/* ===== HERO POLISH FIX =====
   1) Reposition pendant/ring so it no longer collides awkwardly with the title.
   2) Improve readability of the lower-left intro copy over imagery. */
.stage-pendant {
  left: 54.6% !important;
  top: 9.4vh !important;
  width: 98px !important;
  z-index: 5 !important;
  pointer-events: none;
}
.stage-pendant-ring {
  inset: -15px !important;
  border-color: rgba(161, 132, 195, .24) !important;
}
.stage-pendant img {
  opacity: .92;
  filter: drop-shadow(0 16px 34px rgba(92, 67, 112, .14)) !important;
}
.stage-intro {
  left: max(4vw, 34px) !important;
  bottom: 6.6vh !important;
  width: min(430px, 34vw) !important;
  z-index: 8 !important;
  padding: 18px 22px 18px 22px !important;
  border-radius: 22px !important;
  color: #4d4058 !important;
  background: linear-gradient(135deg, rgba(255,255,255,.76), rgba(255,255,255,.50)) !important;
  border: 1px solid rgba(103, 78, 125, .10) !important;
  box-shadow: 0 18px 42px rgba(73,53,90,.10) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.stage-intro::before {
  content: "";
  display: block;
  width: 54px;
  height: 1px;
  margin-bottom: 14px;
  background: linear-gradient(90deg, rgba(110, 84, 133, .46), rgba(110, 84, 133, 0));
}
.p4 {
  left: 21vw !important;
  bottom: 9.8vh !important;
}

@media (max-width: 1200px) {
  .stage-pendant { left: 55.2% !important; top: 10.2vh !important; width: 92px !important; }
  .stage-intro { width: min(400px, 38vw) !important; }
  .p4 { left: 18.5vw !important; }
}

@media (max-width: 900px) {
  .stage-pendant { left: 50% !important; top: 122px !important; width: 84px !important; }
  .stage-intro {
    left: 18px !important;
    bottom: 90px !important;
    width: min(72vw, 360px) !important;
    padding: 15px 16px 15px 16px !important;
    font-size: 12px !important;
    line-height: 1.88 !important;
  }
  .stage-intro::before { width: 42px; margin-bottom: 12px; }
  .p4 { left: 10vw !important; bottom: 25vh !important; }
}

@media (max-width: 560px) {
  .stage-pendant { top: 116px !important; width: 72px !important; }
  .stage-intro {
    left: 16px !important;
    bottom: 92px !important;
    width: 71vw !important;
    padding: 12px 14px 12px 14px !important;
    font-size: 10.5px !important;
    line-height: 1.8 !important;
  }
  .stage-intro::before { width: 34px; margin-bottom: 10px; }
  .p4 { left: 12vw !important; bottom: 27vh !important; width: 29vw !important; height: 29vw !important; }
}


/* ===== HERO REPOSITION FIX v3 =====
   User requested: pendant/ring higher, and intro text moved around the image without a background panel. */
.stage-pendant {
  left: 50.4% !important;
  top: 6.2vh !important;
  width: 86px !important;
  z-index: 3 !important;
  transform: translateX(-50%) !important;
}
.stage-pendant-ring {
  inset: -18px !important;
  border: 1px solid rgba(167, 139, 198, .25) !important;
}
.stage-pendant img {
  opacity: .95 !important;
  filter: drop-shadow(0 14px 28px rgba(91, 67, 112, .13)) !important;
}

.stage-intro {
  left: 5.7vw !important;
  bottom: 13.6vh !important;
  width: min(350px, 26vw) !important;
  z-index: 8 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #51455d !important;
  line-height: 2.04 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.52), 0 0 18px rgba(255,255,255,.22) !important;
}
.stage-intro::before {
  display: none !important;
  content: none !important;
}
.p4 {
  left: 18.8vw !important;
  bottom: 4.8vh !important;
  width: 12.3vw !important;
  height: 12.3vw !important;
  min-width: 144px !important;
  min-height: 144px !important;
}

@media (max-width: 1200px) {
  .stage-pendant { top: 6.6vh !important; width: 82px !important; }
  .stage-intro { left: 4.8vw !important; bottom: 13vh !important; width: min(315px, 28vw) !important; }
  .p4 { left: 17.2vw !important; bottom: 4.2vh !important; width: 12.8vw !important; height: 12.8vw !important; }
}

@media (max-width: 900px) {
  .stage-pendant {
    left: 50% !important;
    top: 98px !important;
    width: 74px !important;
  }
  .stage-pendant-ring { inset: -15px !important; }
  .stage-intro {
    left: 20px !important;
    bottom: 84px !important;
    width: min(66vw, 340px) !important;
    font-size: 12px !important;
    line-height: 1.9 !important;
  }
  .p4 {
    left: 18vw !important;
    bottom: 27vh !important;
    width: 26vw !important;
    height: 26vw !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }
}

@media (max-width: 560px) {
  .stage-pendant {
    top: 94px !important;
    width: 68px !important;
  }
  .stage-pendant-ring { inset: -13px !important; }
  .stage-intro {
    left: 16px !important;
    bottom: 76px !important;
    width: 67vw !important;
    font-size: 10.5px !important;
    line-height: 1.82 !important;
  }
  .p4 {
    left: 19vw !important;
    bottom: 29vh !important;
    width: 27vw !important;
    height: 27vw !important;
  }
}


/* ===== HERO LAYOUT TUNE v4 =====
   Compare with original: keep the airy composition by using negative space.
   Move lower-left intro copy to the RIGHT of the lower-left photo instead of overlapping it.
   Lift the pendant/ring higher so it sits in the upper visual field instead of crowding the title. */
.stage-pendant {
  left: 55% !important;
  top: 3.2vh !important;
  width: 76px !important;
  transform: translateX(-50%) !important;
  z-index: 4 !important;
}
.stage-pendant-ring {
  inset: -24px !important;
  border: 1px solid rgba(167, 139, 198, .20) !important;
}
.stage-pendant img {
  opacity: .90 !important;
  filter: drop-shadow(0 12px 24px rgba(91, 67, 112, .10)) !important;
}

.p4 {
  left: 10.8vw !important;
  bottom: 5.6vh !important;
  width: 13.2vw !important;
  height: 13.2vw !important;
  min-width: 156px !important;
  min-height: 156px !important;
  z-index: 4 !important;
}

.stage-intro {
  left: 26.2vw !important;
  bottom: 10.8vh !important;
  width: min(390px, 24vw) !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #544862 !important;
  z-index: 6 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.42) !important;
}
.stage-intro::before {
  display: none !important;
  content: none !important;
}

@media (max-width: 1280px) {
  .stage-pendant { left: 55% !important; top: 3.8vh !important; width: 72px !important; }
  .p4 { left: 9.8vw !important; bottom: 4.8vh !important; width: 13.8vw !important; height: 13.8vw !important; }
  .stage-intro { left: 25.2vw !important; bottom: 10.3vh !important; width: min(360px, 25vw) !important; }
}

@media (max-width: 900px) {
  .stage-pendant {
    left: 52% !important;
    top: 82px !important;
    width: 66px !important;
  }
  .stage-pendant-ring { inset: -16px !important; }
  .p4 {
    left: 9vw !important;
    bottom: 10vh !important;
    width: 24vw !important;
    height: 24vw !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }
  .stage-intro {
    left: 36vw !important;
    bottom: 14.6vh !important;
    width: min(40vw, 290px) !important;
    font-size: 12px !important;
    line-height: 1.95 !important;
  }
}

@media (max-width: 560px) {
  .stage-pendant {
    top: 78px !important;
    width: 60px !important;
    left: 52% !important;
  }
  .stage-pendant-ring { inset: -12px !important; }
  .p4 {
    left: 8vw !important;
    bottom: 12vh !important;
    width: 25vw !important;
    height: 25vw !important;
  }
  .stage-intro {
    left: 35vw !important;
    bottom: 16.2vh !important;
    width: 42vw !important;
    font-size: 10.5px !important;
    line-height: 1.82 !important;
  }
}


/* ===== PENDANT CIRCLE GEOMETRY FIX v5 =====
   Make the pendant wrapper an explicit square and center the ring independently
   so the ring cannot collapse into an oval during load/viewport changes. */
.stage-pendant {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
}
.stage-pendant img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  position: relative !important;
  z-index: 2 !important;
}
.stage-pendant-ring {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: calc(100% + 42px) !important;
  height: calc(100% + 42px) !important;
  aspect-ratio: 1 / 1 !important;
  inset: auto !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

@media (max-width:900px){
  .stage-pendant-ring {
    width: calc(100% + 32px) !important;
    height: calc(100% + 32px) !important;
  }
}
@media (max-width:560px){
  .stage-pendant-ring {
    width: calc(100% + 26px) !important;
    height: calc(100% + 26px) !important;
  }
}


/* ===== PENDANT VERTICAL TUNE v6 =====
   Lower the now-correct circular pendant group without changing hero geometry. */
.stage-pendant {
  top: 7.2vh !important;
}
@media (max-width: 1280px) {
  .stage-pendant { top: 7.8vh !important; }
}
@media (max-width: 900px) {
  .stage-pendant { top: 104px !important; }
}
@media (max-width: 560px) {
  .stage-pendant { top: 100px !important; }
}


/* ===== LEFT PAGE PROGRESS / SECTION NAV ===== */
.page-dots {
  position: fixed;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 116;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 12px 9px;
  border-radius: 999px;
  background: rgba(251,249,253,.34);
  border: 1px solid rgba(91,68,110,.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px rgba(58,42,69,.04);
  opacity: 0;
  transition: opacity .8s 1.05s ease, background .35s ease, box-shadow .35s ease;
}
body.is-loaded .page-dots { opacity: 1; }
.page-dots:hover {
  background: rgba(251,249,253,.70);
  box-shadow: 0 16px 36px rgba(58,42,69,.07);
}
.page-dots button {
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--ink);
}
.page-dots button i {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(81,61,96,.28);
  box-shadow: 0 0 0 0 rgba(157,126,184,0);
  transition: width .38s cubic-bezier(.16,1,.3,1), height .38s cubic-bezier(.16,1,.3,1), background .35s ease, box-shadow .35s ease, transform .35s ease;
}
.page-dots button:hover i {
  width: 8px;
  height: 8px;
  background: rgba(133,101,158,.68);
  transform: scale(1.05);
}
.page-dots button.active i {
  width: 6px;
  height: 20px;
  background: linear-gradient(180deg,#8e70aa,#b89dce);
  box-shadow: 0 0 0 5px rgba(159,126,188,.09), 0 5px 16px rgba(96,70,116,.14);
}
.page-dots button::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 11px);
  top: 50%;
  transform: translate(7px,-50%);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  padding: 6px 9px;
  border-radius: 999px;
  color: #51435c;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(87,65,102,.08);
  box-shadow: 0 8px 22px rgba(64,46,77,.08);
  font: 400 10px/1 var(--sans);
  letter-spacing: .08em;
  transition: opacity .28s ease, transform .32s cubic-bezier(.16,1,.3,1);
}
.page-dots button:hover::after,
.page-dots button:focus-visible::after {
  opacity: 1;
  transform: translate(0,-50%);
}
.page-dots button:focus-visible {
  outline: 1px solid rgba(126,93,151,.45);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .page-dots { left: 7px; gap: 4px; padding: 8px 5px; background: rgba(251,249,253,.42); }
  .page-dots button { width: 20px; height: 20px; }
  .page-dots button i { width: 4px; height: 4px; }
  .page-dots button.active i { width: 5px; height: 15px; }
  .page-dots button::after { display: none; }
}
@media (max-width: 560px) {
  .page-dots { left: 3px; padding: 6px 3px; gap: 2px; border-color: transparent; box-shadow: none; }
  .page-dots button { width: 17px; height: 17px; }
  .page-dots button.active i { height: 12px; }
}


/* ===== HERO PENDANT + QUIET PAGE DOTS v8 ===== */
/* Put pendant in the open upper-middle field, clearly below nav and above title. */
.stage-pendant {
  top: 15.8vh !important;
  left: 55% !important;
  width: 76px !important;
}
@media (max-width:1280px){
  .stage-pendant { top: 15.2vh !important; width:72px !important; }
}
@media (max-width:900px){
  .stage-pendant { top: 132px !important; width:64px !important; left:52% !important; }
}
@media (max-width:560px){
  .stage-pendant { top: 126px !important; width:58px !important; left:52% !important; }
}

/* Much quieter section navigator: nearly invisible until needed. */
.page-dots {
  left: 12px !important;
  gap: 3px !important;
  padding: 5px 3px !important;
  background: rgba(251,249,253,.10) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  opacity: 0 !important;
  transition: opacity .7s 1.05s ease, background .3s ease !important;
}
body.is-loaded .page-dots { opacity: .48 !important; }
.page-dots:hover,
.page-dots:focus-within {
  opacity: .92 !important;
  background: rgba(251,249,253,.42) !important;
  box-shadow: none !important;
}
.page-dots button {
  width: 16px !important;
  height: 16px !important;
}
.page-dots button i {
  width: 3px !important;
  height: 3px !important;
  background: rgba(74,55,89,.24) !important;
  box-shadow: none !important;
}
.page-dots button:hover i {
  width: 5px !important;
  height: 5px !important;
  background: rgba(124,94,147,.58) !important;
  transform: none !important;
}
.page-dots button.active i {
  width: 3px !important;
  height: 12px !important;
  background: linear-gradient(180deg,rgba(126,94,151,.76),rgba(171,142,195,.72)) !important;
  box-shadow: none !important;
}
.page-dots button::after {
  left: calc(100% + 7px) !important;
  padding: 5px 7px !important;
  font-size: 9px !important;
  box-shadow: 0 6px 16px rgba(64,46,77,.06) !important;
}
@media (max-width:900px){
  .page-dots { left:4px !important; gap:2px !important; padding:4px 2px !important; opacity:0 !important; }
  body.is-loaded .page-dots { opacity:.34 !important; }
  .page-dots button { width:14px !important; height:14px !important; }
  .page-dots button i { width:2.5px !important; height:2.5px !important; }
  .page-dots button.active i { width:2.5px !important; height:9px !important; }
}
@media (max-width:560px){
  .page-dots { left:1px !important; gap:1px !important; padding:3px 1px !important; }
  body.is-loaded .page-dots { opacity:.27 !important; }
  .page-dots button { width:12px !important; height:12px !important; }
  .page-dots button.active i { height:8px !important; }
}


/* ===== PENDANT SCALE TUNE v9 ===== */
/* Increase hero pendant 50% while keeping the current placement. */
.stage-pendant {
  width: 114px !important;
}
@media (max-width:1280px){
  .stage-pendant { width: 108px !important; }
}
@media (max-width:900px){
  .stage-pendant { width: 96px !important; }
}
@media (max-width:560px){
  .stage-pendant { width: 87px !important; }
}


/* ===== PROGRESS DOTS SCALE TUNE v10 ===== */
/* Keep the slim style, but make dots and labels a little bigger and easier to read. */
.page-dots button {
  width: 19px !important;
  height: 19px !important;
}
.page-dots button i {
  width: 4px !important;
  height: 4px !important;
}
.page-dots button:hover i {
  width: 6px !important;
  height: 6px !important;
}
.page-dots button.active i {
  width: 4px !important;
  height: 14px !important;
}
.page-dots button::after {
  left: calc(100% + 8px) !important;
  padding: 6px 8px !important;
  font-size: 10px !important;
  letter-spacing: .09em !important;
}
@media (max-width:900px){
  .page-dots button { width: 16px !important; height: 16px !important; }
  .page-dots button i { width: 3px !important; height: 3px !important; }
  .page-dots button.active i { width: 3px !important; height: 11px !important; }
}
@media (max-width:560px){
  .page-dots button { width: 14px !important; height: 14px !important; }
  .page-dots button i { width: 3px !important; height: 3px !important; }
  .page-dots button.active i { height: 9px !important; }
}


/* ===== PROGRESS NAV TUNE v11 ===== */
/* Make the progress navigator less transparent and auto-show the current section label. */
.page-dots {
  background: rgba(251,249,253,.28) !important;
  border-color: rgba(91,68,110,.08) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
body.is-loaded .page-dots {
  opacity: .72 !important;
}
.page-dots:hover,
.page-dots:focus-within {
  opacity: .96 !important;
  background: rgba(251,249,253,.56) !important;
}
.page-dots button.active::after {
  opacity: 1 !important;
  transform: translate(0,-50%) !important;
}
.page-dots button.active i {
  box-shadow: 0 0 0 5px rgba(159,126,188,.11), 0 6px 18px rgba(96,70,116,.16) !important;
}
@media (max-width:900px){
  body.is-loaded .page-dots { opacity: .58 !important; }
  .page-dots:hover,
  .page-dots:focus-within { opacity: .9 !important; }
}
@media (max-width:560px){
  body.is-loaded .page-dots { opacity: .48 !important; }
  .page-dots button.active::after { display: none !important; }
}