:root {
  --blue: #1b2ad6;
  --blue-light: #7fa8e8;
  --grey: #efefef;
  --pad-x: clamp(20px, 6vw, 72px);
  --sec-y: clamp(64px, 9vw, 132px);
  --line: rgba(255, 255, 255, 0.12);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: clamp(92px, 22vw, 104px); }

body {
  margin: 0;
  background: #000;
  color: #fff;
  font-family: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p { margin: 0; }
a { color: #fff; text-decoration: none; }
a:hover { color: var(--blue-light); }
:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 3px; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 12px 18px;
  background: #fff;
  color: #000;
  font-size: 0.85rem;
  z-index: 60;
}
.skip:focus { left: 12px; top: 12px; }

.wrap { max-width: 1240px; margin: 0 auto; }

/* header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px clamp(18px, 2.4vw, 34px);
  padding: 14px clamp(18px, 5vw, 72px);
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header img { height: clamp(38px, 5.4vw, 54px); width: auto; }
.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px clamp(18px, 2.4vw, 34px);
  font-size: clamp(0.72rem, 1.5vw, 0.82rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.nav a { padding: 4px 0; border-bottom: 1px solid transparent; }
.nav a:hover { border-bottom-color: #fff; }
.nav .nav-cta {
  padding: 9px 20px;
  border: 1px solid var(--blue);
  border-radius: 999px;
  background: var(--blue);
  letter-spacing: 0.14em;
}
.nav .nav-cta:hover { background: #fff; color: #000; border-color: #fff; }

/* mobile menu (CSS only) */
.nav-toggle { display: none; }
.nav-btn { display: none; }

@media (max-width: 760px) {
  .site-header { position: sticky; }
  .nav-toggle {
    display: block;
    position: absolute;
    right: clamp(18px, 5vw, 72px);
    top: 14px;
    width: 100px;
    height: 44px;
    margin: 0;
    opacity: 0;
    z-index: 2;
    cursor: pointer;
  }
  .nav-btn {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 999px;
    font-size: 0.76rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .nav-toggle:focus-visible + .nav-btn { outline: 2px solid var(--blue-light); outline-offset: 3px; }
  .nav { display: none; }
  .nav-toggle:checked ~ .nav {
    display: flex;
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
  }
  .nav-toggle:checked ~ .nav a { padding: 10px 0; }
  .nav-toggle:checked ~ .nav .nav-cta { margin-top: 6px; padding: 12px 22px; }
}

/* hero */
.hero {
  position: relative;
  min-height: min(88svh, 860px);
  display: grid;
  align-items: end;
  padding: clamp(72px, 12vw, 120px) var(--pad-x) clamp(48px, 7vw, 88px);
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.25) 42%, rgba(0, 0, 0, 0.92)), url("assets/hero.jpg");
  background-size: cover;
  background-position: 50% 28%;
}
@media (max-width: 760px) {
  /* Contain rather than crop, so all four faces stay in frame. */
  .hero {
    /* The section IS the photo: its box matches hero.jpg's 2000x1030 ratio, so
       there is no black band above or below it. */
    min-height: 0;
    aspect-ratio: 200 / 103;
    padding: 0;
    background-size: contain;
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-color: #000;
    align-items: center;
  }
}
.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(22px, 3.5vw, 38px);
  text-align: center;
}
.hero-inner img { width: clamp(260px, 58vw, 680px); height: auto; mix-blend-mode: screen; }
.hero-line {
  font-size: clamp(0.95rem, 1.9vw, 1.45rem);
  font-weight: 200;
  letter-spacing: 0.04em;
  max-width: 34ch;
  text-wrap: pretty;
}
@media (min-width: 860px) {
  /* One line only where it actually fits. */
  .hero-line { max-width: none; text-wrap: nowrap; }
}

.btn {
  display: inline-block;
  padding: 16px 34px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: clamp(0.86rem, 1.9vw, 1rem);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.btn:hover { background: #fff; color: #000; }
.btn-ghost { background: transparent; border: 1px solid #fff; padding: 15px 32px; font-size: 0.85rem; }
.btn-ghost:hover { background: #fff; color: #000; }

/* sections */
section { padding: var(--sec-y) var(--pad-x); }
.rule-top { border-top: 1px solid rgba(255, 255, 255, 0.1); }

/* Subtle black-to-charcoal fade, as on the old site, so the dark sections
   are not flat. Applied per-section so each fade resets at the seam. */
.fade { background-image: linear-gradient(to bottom, #000 0%, #000 45%, #2e2e2e 100%); }
/* Grey peaks at the seam between the two About blocks, so the fade rises out of
   the Welcome block and falls away again under the We are block. */
.fade-mid { background-image: linear-gradient(to bottom, #000 0%, #2e2e2e 50%, #000 100%); }

.h2 {
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 200;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.body {
  font-size: clamp(1rem, 1.5vw, 1.08rem);
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.8);
}

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.about-text { display: flex; flex-direction: column; gap: 22px; max-width: 60ch; }
@media (max-width: 760px) {
  /* One column: the heading and copy lead, the photo follows. */
  #about > .split > img { order: 2; }
  .about-text { order: 1; }
}
.about-text h2 {
  font-size: clamp(1.7rem, 4.4vw, 2.9rem);
  font-weight: 200;
  line-height: 1.12;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.about-text h2 span { color: var(--blue-light); }
.inline-link { border-bottom: 1px solid rgba(255, 255, 255, 0.4); }

.about-more {
  max-width: 840px;
  margin: clamp(56px, 8vw, 110px) auto 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: clamp(40px, 6vw, 72px);
}
.about-more h3 {
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  font-weight: 200;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* about feature: copy + showreel */
.about-feature {
  margin-top: clamp(56px, 8vw, 110px);
  padding-top: clamp(40px, 6vw, 72px);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: grid;
  gap: clamp(36px, 6vw, 64px);
  align-items: center;
}
.about-feature-copy { display: flex; flex-direction: column; gap: 22px; }
.about-feature-copy h3 {
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  font-weight: 200;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* showreel component */
.showreel { margin: 0; display: flex; flex-direction: column; gap: 14px; width: 100%; }
.showreel-frame {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: #050505;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}
.showreel-frame > img,
.showreel-frame > video,
.showreel-frame > iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
}

/* Instagram's embed ships a white header, caption bar and comment box around the
   media. The frame becomes square (the ratio the embed renders media at) and the
   iframe is oversized and pulled up so only the video itself stays in view. */
.showreel-frame.is-embed { aspect-ratio: 1 / 0.96; background: #000; }
.showreel-frame.is-embed > iframe {
  position: absolute;
  top: -62px;
  left: 0;
  width: 100%;
  height: calc(100% + 62px + 320px);
}
.showreel-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 20px;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.showreel-label { color: rgba(255, 255, 255, 0.45); }
.showreel-actions { display: flex; align-items: baseline; gap: 18px; }
.showreel-sound {
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  background: none;
  color: #fff;
  font: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.showreel-sound:hover { border-bottom-color: var(--blue-light); }
.showreel-sound[hidden] { display: none; }
.showreel-link { border-bottom: 1px solid rgba(255, 255, 255, 0.3); padding-bottom: 2px; }
.showreel-link:hover { border-bottom-color: var(--blue-light); }

@media (min-width: 900px) {
  .about-feature { grid-template-columns: 45fr 42fr; gap: 10%; }
  .showreel { justify-self: end; max-width: 480px; }
}
@media (max-width: 899px) {
  .showreel { max-width: 340px; margin-inline: auto; }
}

/* instagram feed component */
.ig {
  padding-block: clamp(56px, 8vw, 104px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.ig-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 24px;
  margin-bottom: clamp(24px, 4vw, 40px);
}
.ig-handle {
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 200;
  letter-spacing: 0.1em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.ig-feed-link {
  margin-left: auto;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 2px;
}
.ig-feed-link:hover { border-bottom-color: var(--blue-light); }
.ig-feed {
  position: relative;
  margin-inline: calc(-1 * var(--pad-x));
}
.ig-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  padding-inline: var(--pad-x);
}
.ig-viewport::-webkit-scrollbar { display: none; }
.ig-viewport.is-dragging { cursor: grabbing; }
.ig-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: clamp(10px, 1.4vw, 18px);
  width: max-content;
}
.ig-track li { flex: 0 0 auto; }
.ig-track a {
  display: block;
  position: relative;
  width: clamp(180px, 42vw, 260px);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #0a0a0a;
}
.ig-track img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: filter 500ms ease, transform 700ms ease;
}
.ig-track a:hover img,
.ig-track a:focus-visible img { filter: grayscale(0); transform: scale(1.03); }
.ig-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  display: none;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
  backdrop-filter: blur(4px);
}
.ig-nav:hover { border-color: #fff; background: rgba(0, 0, 0, 0.85); }
.ig-prev { left: calc(var(--pad-x) / 3); }
.ig-next { right: calc(var(--pad-x) / 3); }

@media (min-width: 900px) {
  .ig-nav { display: grid; }
  .ig-track a { width: clamp(200px, 15.5vw, 300px); }
}

/* dancers */
.dancers {
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 8vw, 110px);
  margin-top: clamp(32px, 5vw, 60px);
}
.dancer-banner {
  margin-inline: calc(-1 * var(--pad-x));
  min-height: clamp(170px, 24vw, 340px);
  display: grid;
  place-items: center;
  background-size: cover;
  background-position: 50% 24%;
}
.dancer-banner h3 {
  font-size: clamp(1.5rem, 4.4vw, 3rem);
  font-weight: 200;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: 0 16px;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.55);
}
.dancer-body {
  max-width: 1240px;
  margin: 0 auto;
  padding-block: clamp(28px, 4vw, 60px);
  background-image: radial-gradient(ellipse 78% 62% at 50% 50%, #2e2e2e 0%, rgba(46,46,46,0.55) 45%, rgba(46,46,46,0) 78%);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
.dancer-body img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.dancer-body img { order: 2; }
.dancer-copy { order: 1; }
@media (min-width: 900px) {
  /* Two columns: photo leads, except on the alternating flipped rows. */
  .dancer-body img { order: 0; }
  .dancer-copy { order: 0; }
  .dancer.flip .dancer-body img { order: 2; }
}
.dancer-copy { display: flex; flex-direction: column; gap: 18px; }
.bio { font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.75; color: rgba(255, 255, 255, 0.82); }
.bio strong { font-weight: 500; color: #fff; }

/* credits */
.eyebrow {
  font-size: clamp(0.78rem, 1.6vw, 0.9rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.credit-list {
  list-style: none;
  margin: clamp(26px, 4vw, 44px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px clamp(18px, 2.6vw, 34px);
  font-size: clamp(1rem, 2.4vw, 1.5rem);
  font-weight: 200;
  letter-spacing: 0.04em;
}
.credit-list li {
  padding-left: clamp(18px, 2.6vw, 34px);
  border-left: 1px solid rgba(127, 168, 232, 0.55);
}

/* work */
.work-list { display: flex; flex-direction: column; gap: clamp(56px, 8vw, 104px); margin-top: clamp(36px, 5vw, 64px); }
.work-item {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.player {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #050505;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.work-item h3 {
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  font-weight: 200;
  letter-spacing: 0.03em;
  color: var(--blue-light);
}
.work-copy { display: flex; flex-direction: column; gap: 14px; }
.work-copy .bio { font-size: 0.95rem; line-height: 1.8; color: rgba(255, 255, 255, 0.74); }
.collab { font-size: 1.05rem; color: rgba(255, 255, 255, 0.9); }
.collab strong { font-weight: 500; }

/* book us */
.book {
  margin-top: clamp(56px, 8vw, 104px);
  padding-top: clamp(40px, 6vw, 72px);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(20px, 3vw, 30px);
}
.book-title {
  margin: 0;
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  font-weight: 200;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.book-lede {
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  line-height: 1.8;
  max-width: 58ch;
  color: rgba(255, 255, 255, 0.8);
}
.book-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 0;
  font-size: clamp(0.95rem, 2vw, 1.25rem);
  font-weight: 200;
  letter-spacing: 0.04em;
}
/* Rules on both sides of every item, so a word is bracketed wherever it wraps.
   Column gap is 0 — the padding does the spacing, and adjacent rules meet. */
.book-list li {
  padding-inline: clamp(18px, 2.6vw, 34px);
  border-left: 1px solid rgba(127, 168, 232, 0.55);
  border-right: 1px solid rgba(127, 168, 232, 0.55);
}

.book-reel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: clamp(28px, 4vw, 44px);
  width: 100%;
  max-width: 760px;
  align-self: center;
}
/* The enquiry button and reel are centred by the section's align-items. */

/* workshops */
.workshops {
  padding-block: clamp(72px, 10vw, 150px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.92)), url("assets/work.jpg");
  background-size: cover;
  background-position: 50% 30%;
}
.workshops .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.workshops-mark { margin: 0; }
.workshops-mark img { width: clamp(220px, 34vw, 420px); height: auto; }
.soon { font-size: clamp(1rem, 2vw, 1.2rem); letter-spacing: 0.02em; line-height: 1.75; max-width: 62ch; color: rgba(255, 255, 255, 0.78); }

/* workshop detail: styles + levels */
.ws-detail {
  padding-block: clamp(56px, 8vw, 110px);
  background: var(--grey);
  color: #000;
  display: flex;
  flex-direction: column;
  gap: clamp(52px, 7vw, 96px);
}
.ws-upcoming { text-align: center; display: flex; flex-direction: column; gap: 16px; }
.ws-title {
  margin: 0;
  font-size: clamp(1.3rem, 2.8vw, 1.9rem);
  font-weight: 200;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
}
.ws-lede { font-size: clamp(1rem, 1.8vw, 1.1rem); color: rgba(0, 0, 0, 0.6); }
.ws-group { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 52px); }
.ws-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(18px, 2.4vw, 32px);
}
.ws-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(24px, 3vw, 40px);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.ws-card h4 {
  margin: 0;
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
}
.ws-card p {
  font-size: clamp(0.98rem, 1.4vw, 1.05rem);
  line-height: 1.75;
  color: rgba(0, 0, 0, 0.72);
}

@media (min-width: 700px) {
  .ws-cards-2 { grid-template-columns: repeat(2, 1fr); }
  .ws-cards-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1050px) {
  .ws-cards-4 { grid-template-columns: repeat(4, 1fr); }
}

/* sign-up */
.signup { background: var(--grey); color: #000; }
.signup .split { align-items: start; }
.signup-intro { display: flex; flex-direction: column; gap: 18px; max-width: 44ch; }
.signup-intro h2 {
  font-size: clamp(1.7rem, 4.2vw, 2.7rem);
  font-weight: 200;
  line-height: 1.15;
  letter-spacing: 0.04em;
}
.signup-intro p { font-size: 1rem; line-height: 1.8; color: rgba(0, 0, 0, 0.7); }
.signup-intro a { color: var(--blue); border-bottom: 1px solid rgba(27, 42, 214, 0.4); }
.signup-intro a:hover { color: #000; }

form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: #fff;
  padding: clamp(24px, 3.5vw, 40px);
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.65);
}
.field input, .field select {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 300;
  padding: 14px 16px;
  min-height: 48px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: #fff;
  color: #000;
}
.field input:focus, .field select:focus { border-color: var(--blue); outline: none; }
form button {
  margin-top: 6px;
  padding: 16px 30px;
  min-height: 52px;
  border: none;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
form button:hover { background: #000; }
.form-status { font-size: 0.95rem; line-height: 1.7; color: var(--blue); }
.form-status[hidden] { display: none; }

/* footer */
.site-footer {
  padding: clamp(64px, 9vw, 120px) var(--pad-x) clamp(40px, 5vw, 64px);
  text-align: center;
}
.site-footer .wrap {
  max-width: 840px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(24px, 4vw, 40px);
}
.site-footer h2 {
  font-size: clamp(1.4rem, 3.4vw, 2.2rem);
  font-weight: 200;
  letter-spacing: 0.06em;
}
.footer-mail { font-size: clamp(1rem, 2vw, 1.15rem); letter-spacing: 0.04em; border-bottom: 1px solid rgba(255, 255, 255, 0.4); }
.socials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 26px;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.socials a { border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
.footer-logo { width: clamp(110px, 14vw, 150px); height: auto; }
.copyright { font-size: 0.75rem; letter-spacing: 0.16em; color: rgba(255, 255, 255, 0.45); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ig-track img { transition: none; }
}

/* ------------------------------------------------------------------ *
 * Workshop listings + registration
 * Uses the existing tokens (--blue, --grey) and the .ws-card look so
 * these blocks read as part of the original design.
 * ------------------------------------------------------------------ */

/* --- upcoming workshops --- */
.ws-open { display: flex; flex-direction: column; gap: clamp(22px, 3vw, 34px); }
.ws-open[hidden] { display: none; }
.ws-lede[hidden] { display: none; }

.ws-event {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
}
.ws-venue { font-size: 0.95rem; line-height: 1.7; color: rgba(0, 0, 0, 0.6); }

/* class cards reuse .ws-card; these are the inner bits.
   .ws-upcoming centres its text, so re-align the cards to match the
   Styles / Levels cards further down the page. */
.ws-open [data-ws-list] .ws-card { text-align: left; }
.ws-card-when {
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
}
.ws-card-teacher {
  font-size: clamp(0.98rem, 1.4vw, 1.05rem);
  font-weight: 400;
  color: #000;
}
.ws-card-where { font-size: 0.9rem; line-height: 1.6; color: rgba(0, 0, 0, 0.55); }
.ws-card .ws-card-pick {
  margin-top: auto;
  align-self: flex-start;
  padding: 11px 24px;
  border: 1px solid var(--blue);
  border-radius: 999px;
  background: transparent;
  color: var(--blue);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.ws-card .ws-card-pick:hover { background: var(--blue); color: #fff; }

/* price ladder */
.ws-prices {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  padding: clamp(22px, 3vw, 32px);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.ws-prices h4 {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
}
.ws-prices ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
}
.ws-prices li { font-size: clamp(0.98rem, 1.5vw, 1.08rem); font-weight: 300; color: #000; }
.ws-prices li strong { font-weight: 500; }
.ws-prices-note { font-size: 0.88rem; color: rgba(0, 0, 0, 0.55); }

.btn-solid {
  background: var(--blue);
  border: 1px solid var(--blue);
  color: #fff;
  padding: 15px 32px;
  font-size: 0.85rem;
  border-radius: 999px;
}
.btn-solid:hover { background: #000; border-color: #000; color: #fff; }
.ws-open-cta { align-self: center; }

/* --- signup: checkbox picker --- */
.signup-col { display: flex; flex-direction: column; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ws-picker { border: none; margin: 0; padding: 0; }
.ws-picker legend {
  padding: 0;
  margin-bottom: 8px;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.65);
}
.ws-choices { display: flex; flex-direction: column; gap: 10px; }
.ws-choices-empty { font-size: 0.95rem; line-height: 1.7; color: rgba(0, 0, 0, 0.55); }

.ws-choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.ws-choice:hover { border-color: var(--blue); }
.ws-choice input { margin: 2px 0 0; width: 18px; height: 18px; accent-color: var(--blue); flex: none; cursor: pointer; }
.ws-choice.is-on { border-color: var(--blue); background: rgba(27, 42, 214, 0.04); }
.ws-choice-text { display: flex; flex-direction: column; gap: 3px; }
.ws-choice-title { font-size: 0.98rem; font-weight: 400; line-height: 1.4; color: #000; }
.ws-choice-meta { font-size: 0.85rem; color: rgba(0, 0, 0, 0.58); }

/* running total */
.total-box { border: 1px solid var(--blue); background: rgba(27, 42, 214, 0.05); padding: 16px 18px; }
.total-box[hidden] { display: none; }
.total-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.total-row span { font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(0, 0, 0, 0.6); }
.total-row strong { font-size: 1.4rem; font-weight: 400; color: var(--blue); }
.total-note { margin-top: 6px; font-size: 0.85rem; color: rgba(0, 0, 0, 0.6); }

.form-error { font-size: 0.9rem; line-height: 1.6; color: #b3261e; }
.form-error[hidden] { display: none; }
form button[disabled] { opacity: 0.6; cursor: default; }

/* --- thank you --- */
.signup-thanks {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: clamp(24px, 3.5vw, 40px);
}
.signup-thanks[hidden] { display: none; }
.thanks-check {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 1.5rem;
}
.signup-thanks h3 {
  margin: 0;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  font-weight: 200;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.signup-thanks > p { font-size: 1rem; line-height: 1.75; color: rgba(0, 0, 0, 0.72); }

.swish-detail { margin: 6px 0 0; display: flex; flex-direction: column; border-top: 1px solid rgba(0, 0, 0, 0.1); }
.swish-detail > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 18px;
  padding: 12px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.swish-detail dt { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(0, 0, 0, 0.55); }
.swish-detail dd { margin: 0; font-size: 1rem; text-align: right; color: #000; }
.swish-detail dd strong { font-weight: 500; color: var(--blue); }
.thanks-foot { font-size: 0.85rem; color: rgba(0, 0, 0, 0.55); }