/* ============================================================
   SuperSplash USA v2 — "waterpark of animation"
   No waves. Diagonal cuts, stickers, 3D hero, kinetic type.
   ============================================================ */

:root {
  --cream: #FFFEF8;
  --cream-2: #FBF2DC;
  --sun: #FFD447;
  --coral: #FF6A3D;
  --coral-2: #FF8B62;
  --sky: #C8ECFB;
  --sky-2: #7BD5F5;
  --teal: #28B2B8;
  --teal-deep: #16666B;
  --ink: #0E3A3E;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --shadow-pop: 6px 6px 0 var(--ink);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--cream);
  color: var(--ink);
  overflow-x: hidden;
  line-height: 1.55;
}
img { display: block; max-width: 100%; }
a { color: inherit; }

::selection { background: var(--sun); color: var(--ink); }

/* Type helpers ------------------------------------------------ */
.h2 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  line-height: .95;
  letter-spacing: -.03em;
}
.h2 em, .hero__h1 em, .cta__h em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 600;
  color: var(--coral);
}
.giant { font-size: clamp(2.6rem, 7vw, 6rem); }
.h2--light { color: var(--cream); }
.h2--light em { color: var(--sun); }
.eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 800; letter-spacing: .22em;
  padding: 8px 16px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: var(--sun);
  box-shadow: 3px 3px 0 var(--ink);
  margin-bottom: 22px;
  transform: rotate(-2deg);
}
.eyebrow--light { background: var(--teal); color: var(--cream); border-color: var(--cream); box-shadow: 3px 3px 0 rgba(0,0,0,.4); }

/* Buttons ----------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700; font-size: 14px;
  text-decoration: none;
  padding: 11px 20px;
  border-radius: 14px;
  border: 2.5px solid var(--ink);
  background: var(--cream);
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
  position: relative;
  overflow: hidden;
}
.btn:hover { transform: translate(-2px, -2px) rotate(-1deg); box-shadow: 7px 7px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn--coral { background: var(--coral); color: #fff; }
.btn--sun { background: var(--sun); }
.btn--teal { background: var(--teal); color: #fff; }
.btn--ghost { background: transparent; }
.btn--big { padding: 15px 30px; font-size: 16px; border-radius: 16px; }
.btn--huge { padding: 20px 42px; font-size: 20px; border-radius: 20px; }

/* Loader ------------------------------------------------------ */
.loader {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--sky);
  display: flex; align-items: center; justify-content: center;
  transition: transform .7s var(--ease), opacity .5s;
}
.loader.is-done { transform: translateY(-100%); opacity: .4; pointer-events: none; }
.loader__inner { text-align: center; }
.loader__ball { animation: ballBounce .7s cubic-bezier(.35,0,.65,1) infinite alternate; }
@keyframes ballBounce {
  from { transform: translateY(-52px) rotate(-14deg); }
  to   { transform: translateY(8px) rotate(14deg) scaleY(.94); }
}
.loader__shadow {
  width: 74px; height: 12px; margin: 8px auto 0;
  background: rgba(14,58,62,.25); border-radius: 50%;
  animation: shadowPulse .7s cubic-bezier(.35,0,.65,1) infinite alternate;
}
@keyframes shadowPulse { from { transform: scaleX(.55); opacity: .4; } to { transform: scaleX(1.15); opacity: .85; } }
.loader__txt { margin-top: 22px; font-weight: 800; font-size: 12px; letter-spacing: .22em; }

/* Scroll progress --------------------------------------------- */
.progress {
  position: fixed; top: 0; left: 0; height: 5px; width: 0;
  background: linear-gradient(90deg, var(--teal), var(--sun), var(--coral));
  z-index: 950;
}

/* Nav --------------------------------------------------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  padding: 14px 24px;
  transition: background .3s, box-shadow .3s, padding .3s;
}
.nav.is-stuck { background: var(--cream); box-shadow: 0 3px 0 var(--ink); padding: 8px 24px; }
.nav__inner { max-width: 1440px; margin: 0 auto; display: flex; align-items: center; gap: 28px; }
.nav__brand img { height: 74px; width: auto; transition: height .3s; filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); }
.nav.is-stuck .nav__brand img { height: 52px; }
.nav__links { display: flex; gap: 26px; margin-left: 8px; }
.nav__links a {
  font-weight: 700; font-size: 15px; text-decoration: none;
  position: relative;
}
.nav__links a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -4px; height: 3px;
  background: var(--coral); border-radius: 2px; transition: right .25s var(--ease);
}
.nav__links a:hover::after { right: 0; }
.nav__ctas { margin-left: auto; display: flex; gap: 10px; }
.nav__burger {
  display: none;
  width: 46px; height: 46px; margin-left: auto;
  background: var(--cream); border: 2.5px solid var(--ink); border-radius: 12px;
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav__burger span { width: 20px; height: 2.5px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
@media (max-width: 960px) {
  .nav__links, .nav__ctas { display: none; }
  .nav__burger { display: flex; }
}

/* Mobile menu ------------------------------------------------- */
.mmenu {
  position: fixed; inset: 0; z-index: 890;
  background: rgba(14,58,62,.5);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.mmenu.is-open { opacity: 1; pointer-events: auto; }
.mmenu__panel {
  position: absolute; top: 0; right: 0; height: 100dvh;
  width: min(86vw, 360px);
  background: var(--cream);
  border-left: 3px solid var(--ink);
  padding: 100px 30px 30px;
  display: flex; flex-direction: column; gap: 20px;
  transform: translateX(100%);
  transition: transform .38s var(--ease);
  overflow-y: auto;
}
.mmenu.is-open .mmenu__panel { transform: translateX(0); }
.mmenu__links { display: flex; flex-direction: column; }
.mmenu__links a {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700; font-size: 24px; text-decoration: none;
  padding: 13px 4px; border-bottom: 2px dashed rgba(14,58,62,.2);
}
.mmenu__ctas { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.mmenu__deco { margin: auto auto 0; opacity: .9; animation: spinSlow 14s linear infinite; }
body.menu-lock { overflow: hidden; }

/* Reveal system (CSS-only, IO adds .is-in) -------------------- */
[data-in] { opacity: 0; }
[data-in].is-in { opacity: 1; }
[data-in="rise"] { transform: translateY(40px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-in="rise"].is-in { transform: translateY(0); }
[data-in="fade"] { transform: translateY(16px); transition: opacity .8s var(--ease) .12s, transform .8s var(--ease) .12s; }
[data-in="fade"].is-in { transform: translateY(0); }
[data-in="pop"] { transform: scale(.6) rotate(-6deg); transition: opacity .5s var(--ease), transform .5s cubic-bezier(.34,1.56,.64,1); }
[data-in="pop"].is-in { transform: scale(1) rotate(-2deg); }

/* Ambient keyframes ------------------------------------------- */
@keyframes floatY { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-16px) rotate(3deg); } }
@keyframes floatY2 { 0%,100% { transform: translateY(-8px) rotate(4deg); } 50% { transform: translateY(10px) rotate(-2deg); } }
@keyframes spinSlow { to { transform: rotate(360deg); } }
@keyframes wiggle { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
.float-y { animation: floatY 5.5s ease-in-out infinite; }
.float-y2 { animation: floatY2 6.5s ease-in-out infinite; }
.spin-slow { animation: spinSlow 26s linear infinite; }
.wiggle { animation: wiggle 3s ease-in-out infinite; transform-origin: 50% 0; }

/* HERO -------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--sky) 0%, var(--sky-2) 60%, var(--teal) 130%);
  overflow: hidden;
  padding-top: 110px;
}
.hero__scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__grain {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.5px);
  background-size: 26px 26px;
}
.hero__wrap {
  position: relative; z-index: 2;
  max-width: 1440px; margin: 0 auto; width: 100%;
  padding: 30px 32px 80px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 40px;
  align-items: center;
  flex: 1;
}
.hero__loc {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--cream); border: 2.5px solid var(--ink); border-radius: 999px;
  padding: 8px 18px; font-weight: 700; font-size: 13px;
  box-shadow: 3px 3px 0 var(--ink);
  margin-bottom: 26px;
}
.hero__h1 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: clamp(3.4rem, 8.6vw, 8.6rem);
  line-height: .92;
  letter-spacing: -.04em;
  margin-bottom: 28px;
}
.hero__h1-row { display: block; }
.hero__h1-row--stroke {
  color: transparent;
  -webkit-text-stroke: 3px var(--ink);
  text-stroke: 3px var(--ink);
}
.hero__sub { font-size: clamp(1rem, 1.5vw, 1.25rem); max-width: 520px; font-weight: 500; margin-bottom: 30px; }
.hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }
.hero__badges { display: flex; gap: 10px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--cream); border: 2px solid var(--ink); border-radius: 999px;
  padding: 7px 14px; font-size: 12.5px; font-weight: 700;
}
.chip--plain { background: transparent; }
.chip__dot { width: 9px; height: 9px; border-radius: 50%; background: #2ecc71; animation: pulseDot 1.6s infinite; }
@keyframes pulseDot { 0%,100% { box-shadow: 0 0 0 0 rgba(46,204,113,.5); } 50% { box-shadow: 0 0 0 6px rgba(46,204,113,0); } }

/* Hero cards */
.hero__cards { position: relative; min-height: 480px; }
.hcard {
  position: absolute;
  border: 3px solid var(--ink); border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-pop);
  background: var(--cream);
  transition: transform .3s var(--ease);
  will-change: transform;
}
.hcard img { width: 100%; height: 100%; object-fit: cover; }
.hcard__tag {
  position: absolute; left: 12px; bottom: 12px;
  background: var(--cream); border: 2px solid var(--ink); border-radius: 999px;
  padding: 5px 13px; font-size: 12px; font-weight: 800;
}
.hcard--a { width: 62%; height: 300px; top: 0; left: 4%; transform: rotate(-4deg); z-index: 2; }
.hcard--b { width: 48%; height: 250px; top: 42%; right: 0; transform: rotate(3.5deg); z-index: 3; }
.hcard--c { width: 44%; height: 210px; bottom: 0; left: 0; transform: rotate(-2deg); z-index: 1; }
.sticker { position: absolute; z-index: 4; filter: drop-shadow(3px 4px 0 rgba(14,58,62,.35)); }
.sticker--sun { top: -30px; right: 2%; }
.sticker--pop { bottom: 12%; right: 26%; }
.sticker--shades { top: 38%; left: -4%; transform: rotate(-10deg); }
.hero__foot {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 0 0 26px; font-weight: 800; font-size: 11px; letter-spacing: .25em;
  animation: floatY2 3s ease-in-out infinite;
}
@media (max-width: 960px) {
  .hero__wrap { grid-template-columns: 1fr; padding-bottom: 40px; }
  .hero__cards { min-height: 380px; margin-top: 10px; }
  .sticker--shades { left: auto; right: -6px; top: 20%; }
}

/* TICKER ------------------------------------------------------ */
.ticker {
  background: var(--ink);
  color: var(--cream);
  transform: rotate(-1.6deg) scale(1.02);
  margin: -18px 0 0;
  border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
  overflow: hidden;
  position: relative; z-index: 5;
}
.ticker__track {
  display: inline-flex; align-items: center; gap: 34px;
  white-space: nowrap;
  padding: 15px 0;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700; font-size: 17px; letter-spacing: .06em;
  will-change: transform;
}
.ticker__track b { color: var(--sun); }

/* RIDES rail -------------------------------------------------- */
.rides { padding: 120px 0 40px; }
.rides__head { max-width: 1440px; margin: 0 auto; padding: 0 32px 26px; }
.rides__hint { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-weight: 700; font-size: 14px; color: var(--teal-deep); }
.rail { position: relative; }
.rail__track {
  display: flex; gap: 26px;
  padding: 20px 32px 50px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rail__track::-webkit-scrollbar { display: none; }
.ride {
  position: relative;
  flex: 0 0 min(78vw, 460px);
  scroll-snap-align: center;
  border: 3px solid var(--ink);
  border-radius: 26px;
  overflow: hidden;
  background: var(--ink);
  box-shadow: var(--shadow-pop);
  transform: rotate(var(--tilt, 0deg));
  transition: transform .3s var(--ease);
}
.ride:nth-child(odd) { --tilt: -1.2deg; }
.ride:nth-child(even) { --tilt: 1.2deg; }
.ride:hover { transform: rotate(0deg) translateY(-8px); }
.ride img { width: 100%; height: 420px; object-fit: cover; opacity: .92; transition: transform .5s var(--ease); }
.ride:hover img { transform: scale(1.06); }
.ride::before {
  content: attr(data-num);
  position: absolute; top: 14px; right: 18px; z-index: 2;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800; font-size: 44px;
  color: transparent; -webkit-text-stroke: 2px var(--cream);
  opacity: .9;
}
.ride__meta {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 46px 22px 20px;
  background: linear-gradient(180deg, transparent, rgba(14,58,62,.92) 55%);
  color: var(--cream);
}
.ride__kind { font-size: 11px; font-weight: 800; letter-spacing: .2em; color: var(--sun); }
.ride__meta h3 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 26px; margin: 4px 0 6px; }
.ride__meta p { font-size: 14px; opacity: .9; }

/* STATS ------------------------------------------------------- */
.stats {
  background: var(--sun);
  border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
  transform: rotate(1.2deg) scale(1.02);
  position: relative; z-index: 4;
}
.stats__row {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 40px 32px;
  gap: 20px;
  transform: rotate(-1.2deg);
}
.stat { text-align: center; }
.stat__n {
  display: block;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800; font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1;
}
.stat__l { font-size: 11px; font-weight: 800; letter-spacing: .2em; }
@media (max-width: 720px) { .stats__row { grid-template-columns: repeat(2, 1fr); gap: 28px; } }

/* FEATURE ----------------------------------------------------- */
.feat {
  position: relative;
  margin-top: 90px;
  min-height: 92vh;
  display: flex; align-items: center;
  overflow: hidden;
  clip-path: polygon(0 4vw, 100% 0, 100% calc(100% - 4vw), 0 100%);
  background: var(--ink);
}
.feat__media { position: absolute; inset: -12% 0; }
.feat__media img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.feat__panel {
  position: relative; z-index: 2;
  max-width: 1440px; margin: 0 auto; width: 100%;
  padding: 140px 32px;
  color: var(--cream);
}
.feat__panel p { max-width: 460px; margin: 22px 0 30px; font-size: 17px; }
.sticker--bolt { top: 14%; right: 8%; }

/* TICKETS ----------------------------------------------------- */
.tix { padding: 130px 32px 110px; background: var(--cream-2); }
.tix__head { max-width: 1200px; margin: 0 auto 50px; text-align: center; }
.tix__row {
  max-width: 1000px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 44px;
}
.ticket {
  position: relative;
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 26px;
  padding: 42px 36px 110px;
  box-shadow: 8px 8px 0 var(--ink);
  transform: rotate(-1.4deg);
  transition: transform .3s var(--ease);
}
.ticket--season { transform: rotate(1.4deg); background: #fff; }
.ticket:hover { transform: rotate(0) translateY(-8px); }
.ticket__flag {
  position: absolute; top: -16px; right: 24px;
  background: var(--coral); color: #fff;
  border: 2.5px solid var(--ink); border-radius: 999px;
  font-size: 12px; font-weight: 800; letter-spacing: .12em;
  padding: 7px 16px;
  box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(3deg);
}
.ticket__rip {
  position: absolute; left: -3px; right: -3px; bottom: 74px; height: 0;
  border-top: 3px dashed var(--ink);
}
.ticket__rip::before, .ticket__rip::after {
  content: ''; position: absolute; top: -14px; width: 26px; height: 26px;
  background: var(--cream-2); border: 3px solid var(--ink); border-radius: 50%;
}
.ticket__rip::before { left: -16px; clip-path: inset(0 0 0 50%); border-left-color: transparent; }
.ticket__rip::after { right: -16px; clip-path: inset(0 50% 0 0); border-right-color: transparent; }
.ticket__kind { font-size: 13px; font-weight: 800; letter-spacing: .24em; color: var(--teal-deep); }
.ticket__price {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800; font-size: 92px; line-height: 1;
  margin: 10px 0 20px;
}
.ticket__price sup { font-size: 36px; vertical-align: super; }
.ticket__cents { font-size: 30px; }
.ticket__list { list-style: none; margin-bottom: 30px; }
.ticket__list li { padding: 8px 0 8px 32px; position: relative; font-weight: 600; font-size: 15px; }
.ticket__list li::before {
  content: ''; position: absolute; left: 0; top: 10px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--teal);
  border: 2.5px solid var(--ink);
}
.ticket__stub {
  position: absolute; left: 0; right: 0; bottom: 26px;
  text-align: center;
  font-size: 11px; font-weight: 800; letter-spacing: .18em;
  color: rgba(14,58,62,.5);
  white-space: nowrap; overflow: hidden;
}
.tix__note { text-align: center; margin-top: 34px; font-size: 13px; opacity: .6; }
@media (max-width: 860px) { .tix__row { grid-template-columns: 1fr; max-width: 460px; } }

/* PLAN -------------------------------------------------------- */
.plan { padding: 120px 32px; max-width: 1440px; margin: 0 auto; }
.plan__head { margin-bottom: 46px; }
.plan__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.pcard {
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 22px;
  padding: 30px 26px;
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.pcard:hover { transform: translate(-3px,-3px) rotate(-1deg); box-shadow: 9px 9px 0 var(--ink); }
.pcard svg { margin-bottom: 16px; }
.pcard h3 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 21px; margin-bottom: 8px; }
.pcard p { font-size: 14.5px; }
@media (max-width: 1024px) { .plan__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .plan__grid { grid-template-columns: 1fr; } }

/* PARTY ------------------------------------------------------- */
.party {
  background: var(--teal);
  clip-path: polygon(0 0, 100% 3.5vw, 100% 100%, 0 calc(100% - 3.5vw));
  padding: 130px 32px 150px;
  color: var(--cream);
}
.party__inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1.2fr .8fr; gap: 50px; align-items: center;
}
.party__copy p { max-width: 480px; margin: 20px 0 30px; font-size: 17px; }
.party__btns { display: flex; gap: 14px; flex-wrap: wrap; }
.party__art { position: relative; min-height: 300px; }
.party__balloon { position: absolute; top: 0; left: 20%; }
.party__balloon--2 { left: 55%; top: 24%; }
.party__flag { position: absolute; bottom: 0; left: 12%; }
@media (max-width: 860px) { .party__inner { grid-template-columns: 1fr; } .party__art { min-height: 220px; } }

/* FAQ --------------------------------------------------------- */
.faq { max-width: 780px; margin: 0 auto; padding: 120px 32px; }
.faq .h2 { margin-bottom: 34px; }
.faq details {
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: var(--cream);
  margin-bottom: 14px;
  box-shadow: 4px 4px 0 var(--ink);
  overflow: hidden;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 24px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700; font-size: 18px;
  display: flex; justify-content: space-between; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary i {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2.5px solid var(--ink);
  position: relative; flex: 0 0 26px;
  transition: transform .3s var(--ease), background .3s;
}
.faq summary i::before, .faq summary i::after {
  content: ''; position: absolute; background: var(--ink);
  top: 50%; left: 50%; transform: translate(-50%,-50%);
}
.faq summary i::before { width: 12px; height: 2.5px; }
.faq summary i::after { width: 2.5px; height: 12px; transition: opacity .2s; }
.faq details[open] summary i { transform: rotate(180deg); background: var(--sun); }
.faq details[open] summary i::after { opacity: 0; }
.faq details p { padding: 0 24px 22px; font-size: 15.5px; }

/* CTA --------------------------------------------------------- */
.cta {
  position: relative;
  background: var(--coral);
  clip-path: polygon(0 3vw, 100% 0, 100% 100%, 0 100%);
  text-align: center;
  padding: 150px 32px 130px;
  color: var(--cream);
  overflow: hidden;
}
.cta__h {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: clamp(2.8rem, 7.5vw, 6.4rem);
  line-height: .95; letter-spacing: -.03em;
  margin-bottom: 40px;
}
.cta__h em { color: var(--sun); }
.cta__btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 28px; }
.cta .btn--ghost { color: var(--cream); border-color: var(--cream); box-shadow: 4px 4px 0 rgba(0,0,0,.35); }
.cta__hiring { font-size: 14px; opacity: .85; max-width: 480px; margin: 0 auto; }
.cta__confetti { position: absolute; inset: 0; pointer-events: none; }
.cta__confetti span {
  position: absolute; top: -20px;
  width: 12px; height: 12px;
  border-radius: 3px;
  animation: confettiFall linear infinite;
}
@keyframes confettiFall {
  from { transform: translateY(-40px) rotate(0); }
  to   { transform: translateY(110vh) rotate(720deg); }
}

/* FOOTER ------------------------------------------------------ */
.foot { background: var(--ink); color: rgba(255,254,248,.8); }
.foot__grid {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 34px;
  padding: 70px 32px 40px;
}
.foot__brand img { height: 92px; width: auto; margin-bottom: 16px; }
.foot__brand p, .foot__brand a { font-size: 14.5px; line-height: 1.8; color: inherit; }
.foot__col { display: flex; flex-direction: column; gap: 9px; }
.foot__col span { font-weight: 800; font-size: 12px; letter-spacing: .2em; color: var(--sun); margin-bottom: 6px; }
.foot__col a { text-decoration: none; font-size: 14.5px; }
.foot__col a:hover { color: var(--sun); }
.foot__base { border-top: 1px solid rgba(255,254,248,.15); padding: 20px 32px; text-align: center; font-size: 12.5px; opacity: .6; }
@media (max-width: 860px) { .foot__grid { grid-template-columns: 1fr 1fr; } }

/* Splash droplets on click ------------------------------------ */
.splash-drop {
  position: fixed; z-index: 999; pointer-events: none;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--sky-2);
  border: 2px solid var(--ink);
  animation: dropFly .6s var(--ease) forwards;
}
@keyframes dropFly {
  from { transform: translate(0,0) scale(1); opacity: 1; }
  to   { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; }
}