/* Cheltenham Dance Centre — "Pick & Mix" (candy-sticker playful)
   Baloo 2 chunky rounded display · Nunito Sans body
   yellow ground, blob shapes, tilted sticker pills, colour-block rounded panels */

@font-face {
  font-family: 'Baloo 2';
  src: url('../fonts/Baloo2-variable.woff2') format('woff2-variations');
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito Sans';
  src: url('../fonts/NunitoSans-variable.woff2') format('woff2-variations');
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  --yellow: #ffd63d;
  --yellow-soft: #ffe27a;
  --magenta: #f0389c;
  --purple: #8b5cf6;
  --teal: #2fc6bd;
  --red: #e6392f;
  --ink: #221f26;
  --cream: #fff7e6;
  --white: #ffffff;
  --display: 'Baloo 2', 'Arial Rounded MT Bold', sans-serif;
  --body: 'Nunito Sans', -apple-system, 'Helvetica Neue', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--body);
  background: var(--yellow);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.page { overflow-x: clip; }

/* ---------- type ---------- */
.d1, .d2, .d3 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.01em;
}
.d1 { font-size: clamp(42px, 6vw, 84px); }
.d2 { font-size: clamp(30px, 3.6vw, 52px); }
.d3 { font-size: clamp(22px, 2.2vw, 30px); }
.tilt-l { transform: rotate(-1.5deg); }
.tilt-r { transform: rotate(1.2deg); }
.deck { font-size: 16px; font-weight: 600; max-width: 56ch; }
.small { font-size: 13.5px; font-weight: 600; opacity: 0.8; }
.lead { font-size: 17px; font-weight: 600; line-height: 1.6; }

/* ---------- sticker pills & buttons ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  padding: 9px 22px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space: nowrap;
}
.pill:hover { transform: translate(-1px, -2px) rotate(-1deg); box-shadow: 5px 6px 0 var(--ink); }
.pill:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.pill--magenta { background: var(--magenta); color: var(--white); }
.pill--teal { background: var(--teal); }
.pill--purple { background: var(--purple); color: var(--white); }
.pill--ink { background: var(--ink); color: var(--white); }

.stick {
  display: inline-block;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  padding: 5px 16px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(-2deg);
}
.stick--magenta { background: var(--magenta); color: var(--white); transform: rotate(1.6deg); }
.stick--teal { background: var(--teal); transform: rotate(-1.2deg); }
.stick--purple { background: var(--purple); color: var(--white); transform: rotate(2deg); }
.stick--yellow { background: var(--yellow); color: var(--ink); transform: rotate(1deg); }

/* ---------- header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--yellow);
  border-bottom: 2.5px solid var(--ink);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 20px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand__dot {
  width: 42px; height: 42px;
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  background: var(--magenta);
  color: var(--white);
  display: grid; place-items: center;
  font-family: var(--display);
  font-size: 15px; font-weight: 800;
  box-shadow: 2.5px 2.5px 0 var(--ink);
  transform: rotate(-3deg);
}
.brand__name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 19px;
  line-height: 1;
}
.brand__name small {
  display: block;
  font-family: var(--body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 3px;
  opacity: 0.75;
}
.nav { display: flex; align-items: center; margin-left: auto; }
.nav__list { display: flex; list-style: none; gap: 2px; align-items: center; }
.nav__item { position: relative; }
.nav__link {
  display: inline-block;
  text-decoration: none;
  font-family: var(--display);
  font-size: 15.5px;
  font-weight: 700;
  padding: 16px 13px;
  border-radius: 999px;
}
.nav__link:hover { color: var(--magenta); }
.chev { font-size: 10px; opacity: .6; }
.nav__dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--white);
  border: 2.5px solid var(--ink);
  border-radius: 18px;
  box-shadow: 5px 6px 0 var(--ink);
  list-style: none;
  min-width: 250px;
  max-height: 66vh;
  overflow: auto;
  z-index: 70;
  padding: 8px;
}
.nav__item--has-dropdown:hover .nav__dropdown,
.nav__item--has-dropdown.active .nav__dropdown { display: block; }
.nav__dropdown a {
  display: block;
  padding: 8px 14px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  border-radius: 999px;
}
.nav__dropdown a:hover { background: var(--yellow); }
.mast-cta { display: flex; align-items: center; gap: 10px; margin-left: 8px; }
.nav__item--drawer-only { display: none; }
.nav__toggle { display: none; flex-direction: column; gap: 5px; background: var(--white); border: 2.5px solid var(--ink); border-radius: 12px; padding: 11px 12px; cursor: pointer; box-shadow: 2.5px 2.5px 0 var(--ink); }
.nav__toggle span { width: 20px; height: 3px; border-radius: 3px; background: var(--ink); transition: transform .2s ease, opacity .2s ease; }
.nav__toggle.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav__toggle.active span:nth-child(2) { opacity: 0; }
.nav__toggle.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- ribbon marquee (diagonal ticker) ---------- */
.ribbonwrap { overflow: hidden; padding: 26px 0; }
.ribbon {
  background: var(--ink);
  color: var(--yellow);
  transform: rotate(-1.6deg) scale(1.02);
  overflow: hidden;
  white-space: nowrap;
  padding: 10px 0;
  border-block: 2.5px solid var(--ink);
}
.ribbon__inner {
  display: inline-block;
  animation: tick 30s linear infinite;
  font-family: var(--display);
  font-weight: 800;
  font-size: 17px;
}
.ribbon__inner span { margin: 0 20px; }
.ribbon__inner em { font-style: normal; color: var(--magenta); margin: 0 4px; }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- sections & panels ---------- */
.sec { padding: 76px 24px; position: relative; }
.wrap { max-width: 1160px; margin: 0 auto; }
.sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 36px; flex-wrap: wrap; }

.panel {
  border: 2.5px solid var(--ink);
  border-radius: 28px;
  box-shadow: 6px 7px 0 var(--ink);
  padding: 44px 40px;
  background: var(--cream);
}
.panel--magenta { background: var(--magenta); color: var(--white); }
.panel--purple { background: var(--purple); color: var(--white); }
.panel--teal { background: var(--teal); }
.panel--ink { background: var(--ink); color: var(--cream); }
.panel--white { background: var(--white); }

/* blob decorations */
.blob { position: absolute; border-radius: 48% 52% 55% 45% / 55% 45% 55% 45%; opacity: .55; z-index: 0; pointer-events: none; }
.sec > .wrap { position: relative; z-index: 1; }

/* ---------- section dividers: a light dashed thread between sections ---------- */
main > section + section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1160px, calc(100% - 48px));
  border-top: 2px dashed rgba(34, 31, 38, 0.15);
}

/* ---------- statement ---------- */
.statement { text-align: center; padding: 84px 24px; position: relative; }
.statement .d2 { max-width: 22ch; margin: 14px auto 0; }
.statement .deck { margin: 18px auto 26px; }

/* ---------- story cards (theme/class grids) ---------- */
.storygrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 26px; }
.storygrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.story {
  text-decoration: none;
  display: block;
  background: var(--white);
  border: 2.5px solid var(--ink);
  border-radius: 22px;
  box-shadow: 5px 6px 0 var(--ink);
  overflow: visible;
  transition: transform .18s ease, box-shadow .18s ease;
  position: relative;
}
.story:nth-child(3n+1) { transform: rotate(-0.8deg); }
.story:nth-child(3n+2) { transform: rotate(0.6deg); }
.story:nth-child(3n) { transform: rotate(-0.3deg); }
.story:hover { transform: rotate(0deg) translateY(-5px); box-shadow: 7px 10px 0 var(--ink); }
.story__ph { display: block; border-radius: 19px 19px 0 0; overflow: hidden; border-bottom: 2.5px solid var(--ink); }
.story__ph img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.story .stick { position: absolute; top: -14px; left: 14px; z-index: 2; }
.story__body { display: block; padding: 16px 18px 20px; }
.story__title { font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1.05; }
.story:hover .story__title { color: var(--magenta); }
.story__deck { margin-top: 5px; font-size: 13.5px; font-weight: 600; opacity: 0.8; }

/* ---------- tilted step cards ---------- */
.stepcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; align-items: start; }
.stepcard {
  border: 2.5px solid var(--ink);
  border-radius: 20px;
  box-shadow: 5px 6px 0 var(--ink);
  padding: 24px 20px;
  min-height: 210px;
}
.stepcard:nth-child(1) { background: var(--teal); transform: rotate(-2deg); }
.stepcard:nth-child(2) { background: var(--magenta); color: var(--white); transform: rotate(1.4deg); }
.stepcard:nth-child(3) { background: var(--purple); color: var(--white); transform: rotate(-1.2deg); }
.stepcard:nth-child(4) { background: var(--white); transform: rotate(1.8deg); }
.stepcard .stick { margin-bottom: 12px; box-shadow: 2.5px 2.5px 0 var(--ink); }
.stepcard h3 { font-family: var(--display); font-weight: 800; font-size: 20px; line-height: 1.1; }
.stepcard p { margin-top: 8px; font-size: 13.5px; font-weight: 600; }

/* ---------- price rows (candy counter) ---------- */
.rows { display: grid; gap: 14px; }
.rows > div {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 16px 22px;
  background: var(--white);
  color: var(--ink);
  border: 2.5px solid var(--ink);
  border-radius: 18px;
  box-shadow: 4px 5px 0 var(--ink);
}
.rows > div:nth-child(odd) { transform: rotate(-0.5deg); }
.rows > div:nth-child(even) { transform: rotate(0.5deg); }
.rows .t { font-weight: 800; font-size: 16px; font-family: var(--display); }
.rows .t small { display: block; font-family: var(--body); font-weight: 600; font-size: 13px; opacity: 0.75; margin-top: 2px; }
.rows b.price { font-family: var(--display); font-size: 28px; font-weight: 800; }

/* ---------- scatter sticker band ---------- */
.scatter { display: flex; flex-wrap: wrap; gap: 16px 18px; justify-content: center; align-items: center; padding: 10px 0; }
.scatter .stick { font-size: 17px; padding: 8px 22px; }

/* ---------- pull quotes ---------- */
.pulls { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px; }
.pull {
  background: var(--white);
  border: 2.5px solid var(--ink);
  border-radius: 22px;
  box-shadow: 5px 6px 0 var(--ink);
  padding: 26px 24px 20px;
  position: relative;
}
.pull:nth-child(odd) { transform: rotate(-0.8deg); }
.pull:nth-child(even) { transform: rotate(0.8deg); }
.pull .stick { position: absolute; top: -15px; right: 18px; }
.pull blockquote { font-size: 15.5px; font-weight: 600; line-height: 1.6; }
.pull figcaption { margin-top: 12px; font-family: var(--display); font-weight: 700; font-size: 13px; opacity: 0.8; }

/* ---------- FAQ pills ---------- */
.faqs { display: grid; gap: 12px; }
.faqs details {
  background: var(--white);
  border: 2.5px solid var(--ink);
  border-radius: 22px;
  box-shadow: 4px 5px 0 var(--ink);
  padding: 0 22px;
}
.faqs summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16.5px;
}
.faqs summary::-webkit-details-marker { display: none; }
.faqs .plus {
  font-family: var(--display); font-weight: 800; font-size: 20px;
  width: 32px; height: 32px; flex: 0 0 32px;
  display: grid; place-items: center;
  background: var(--yellow); border: 2.5px solid var(--ink); border-radius: 999px;
  transition: transform .18s ease;
}
.faqs details[open] .plus { transform: rotate(45deg); background: var(--magenta); color: var(--white); }
.faqs .bodyx { padding: 0 0 18px; max-width: 68ch; font-size: 14.5px; font-weight: 600; }

/* ---------- form card ---------- */
.form-card {
  background: var(--white);
  border: 2.5px solid var(--ink);
  border-radius: 26px;
  box-shadow: 6px 7px 0 var(--ink);
  padding: 30px 28px;
  position: relative;
  transform: rotate(0.6deg);
}
.form-card .sticker { position: absolute; top: -16px; right: 20px; z-index: 2; }
.form-intro { font-size: 14.5px; font-weight: 700; margin: 10px 0 18px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.form-grid label { display: flex; flex-direction: column; gap: 5px; font-family: var(--display); font-size: 13px; font-weight: 700; }
.form-grid label.full { grid-column: 1 / -1; }
.form-grid input, .form-grid select, .form-grid textarea {
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  background: var(--cream);
  font-family: var(--body);
  font-size: 14.5px;
  font-weight: 600;
  padding: 10px 13px;
  color: var(--ink);
}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus {
  outline: 3px solid var(--magenta);
  outline-offset: 1px;
}
.req { color: var(--magenta); font-style: normal; }
.form-actions { display: flex; align-items: center; gap: 16px; margin-top: 20px; flex-wrap: wrap; }
.form-note { font-size: 12.5px; font-weight: 700; opacity: 0.75; }

/* ---------- giant tilted line ---------- */
.giant { overflow: hidden; padding: 64px 0 30px 24px; }
.giant p {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(70px, 13vw, 200px);
  line-height: 0.95;
  white-space: nowrap;
  transform: rotate(-1.6deg);
}
.giant p span { color: var(--magenta); }

/* ---------- footer ---------- */
.footer { padding: 0 18px 18px; }
.footer__panel {
  background: var(--ink);
  color: var(--cream);
  border-radius: 30px;
  border: 2.5px solid var(--ink);
  padding: 52px 40px 30px;
  max-width: 1280px;
  margin: 0 auto;
}
.footer__cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px; }
.footer__cols .stick { margin-bottom: 14px; box-shadow: none; }
.footer__blurb { font-size: 13.5px; font-weight: 600; opacity: 0.85; max-width: 34ch; }
.footer__reach { margin-top: 14px; font-size: 15px; font-weight: 800; }
.footer__reach a { text-decoration: none; border-bottom: 3px solid var(--magenta); }
.footer__cols a.fl { display: block; text-decoration: none; font-size: 14px; padding: 4px 0; font-weight: 700; }
.footer__cols a.fl:hover { color: var(--yellow); }
.footer__social { display: flex; gap: 8px; margin-top: 16px; }
.footer__social a {
  width: 36px; height: 36px;
  border: 2.5px solid var(--cream);
  border-radius: 999px;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 800;
  text-decoration: none;
}
.footer__social a:hover { background: var(--magenta); border-color: var(--magenta); }
.footer__bar {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 36px; padding-top: 18px;
  border-top: 2px dashed rgba(255,247,230,0.35);
  font-size: 12px; font-weight: 700; opacity: 0.85;
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .nav {
    position: fixed;
    top: 66px; right: 0; bottom: 0; left: auto;
    width: 90%;
    background: var(--yellow);
    border-left: 2.5px solid var(--ink);
    box-shadow: -16px 0 40px rgba(0,0,0,0.25);
    display: none;
    overflow: auto;
    padding: 10px 0;
  }
  .nav.active { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link { padding: 14px 22px; border-bottom: 2px dashed rgba(34,31,38,0.2); border-radius: 0; display: flex; justify-content: space-between; }
  .nav__dropdown { position: static; border: 0; border-radius: 0; box-shadow: none; background: var(--yellow-soft); display: none; max-height: none; }
  .nav__item--has-dropdown.active .nav__dropdown { display: block; }
  .nav__toggle { display: flex; }
  .nav__item--drawer-only { display: block; }
  .btn--contact-desktop { display: none; }
  .storygrid, .storygrid--2, .pulls { grid-template-columns: 1fr; }
  .stepcards { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .sec { padding: 56px 18px; }
  .statement { padding: 66px 18px; }
  .panel { padding: 30px 22px; }
}
@media (max-width: 560px) {
  .stepcards { grid-template-columns: 1fr; }
}

/* ---------- price cards under the hen-page hero ---------- */
.pricebar { padding: 22px 24px 34px; position: relative; z-index: 1; }
main > section.pricebar::before { display: none; }
.pricebar__grid { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: 1.15fr 1fr; gap: 26px; align-items: stretch; }
.pricecard { border: 2.5px solid var(--ink); border-radius: 26px; box-shadow: 6px 7px 0 var(--ink); padding: 26px 30px 24px; background: var(--white); color: var(--ink); position: relative; }
.pricecard--pick { background: var(--magenta); color: var(--white); transform: rotate(-0.7deg); }
.pricecard--alt { transform: rotate(0.6deg); }
.pricecard .stick { position: absolute; top: -16px; right: 22px; color: var(--ink); }
.pricecard__len { font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: 0.01em; }
.pricecard__fig { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-top: 4px; }
.pricecard__fig b { font-family: var(--display); font-weight: 800; font-size: clamp(54px, 6.4vw, 84px); line-height: 1; }
.pricecard__fig span { font-family: var(--display); font-weight: 700; font-size: clamp(18px, 1.9vw, 24px); line-height: 1.15; }
.pricecard__note { margin-top: 8px; font-size: 15px; line-height: 1.5; opacity: 0.95; }
.pricebar__foot { max-width: 1160px; margin: 18px auto 0; font-size: 14.5px; font-weight: 700; }
@media (max-width: 900px) {
  .pricebar { padding: 0 18px 28px; }
  .pricebar__grid { grid-template-columns: 1fr; gap: 24px; }
  .pricecard { padding: 24px 22px 20px; }
}

/* ---------- grid children may shrink: long <select> options must never widen a column on phones ---------- */
.pricesplit > *, .areasplit > *, .hero__grid > *, .wedstrip > *, .storygrid > *, .form-grid > *, .pricebar__grid > * { min-width: 0; }
.form-grid input, .form-grid select, .form-grid textarea { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
.form-grid select { text-overflow: ellipsis; }

/* ---------- footer on phones: contact block full width, link columns share the row ---------- */
.footer__cols > * { min-width: 0; }
.footer__reach a { overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .footer__cols > div:first-child { grid-column: 1 / -1; }
}

/* ---------- row cards on phones: let long labels and email addresses wrap instead of widening the card ---------- */
.rows > div > * { min-width: 0; }
.rows .t, .rows .t small, .rows a { overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .rows > div { grid-template-columns: auto 1fr; }
  .rows > div > .price { grid-column: 1 / -1; justify-self: start; font-size: 15px; }
}

/* ---------- phones: proper breathing room at both edges ----------
   Cards carry a 2.5px border plus a hard shadow that sticks out ~6px to the right, and tilted cards poke
   their corners out further, so the right side looked flush with the screen. Wider gutters (a touch more on
   the right to balance the shadow) and no tilt on the big blocks. Small stickers keep their tilt. */
@media (max-width: 700px) {
  .page .header { padding-left: 24px; padding-right: 24px; }
  .page .hero { padding-left: 24px; padding-right: 30px; }
  .page .sec, .page .statement { padding-left: 24px; padding-right: 30px; }
  .page .pricebar { padding-left: 24px; padding-right: 30px; }
  .page .crumbs { padding-left: 24px !important; padding-right: 24px !important; }
  .page .footer { padding-left: 20px; padding-right: 20px; }
  .page .footer__panel { padding: 40px 26px 26px; }
  .page .panel, .page .pricecard, .page .form-card, .page .story, .page .stepcard, .page .pull,
  .page .rows > div, .page .photocard, .page .hero__photo, .page .wedstrip .story__ph { transform: none !important; }
  .page .story:hover { transform: none !important; }
  .page .hero__photo { animation-name: popIn; }
  .page .panel, .page .pricecard, .page .form-card, .page .story, .page .hero__photo, .page .photocard { box-shadow: 4px 5px 0 var(--ink); }
  .page .stepcards { grid-template-columns: 1fr; }
  .page h1.tilt-l, .page .tilt-l, .page .tilt-r { transform: none; }
}