: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; }
/* Secondary pill: outlined, so the filled blue "Book Us" reads as the main action. */
.nav .nav-cta-ghost { background: transparent; border-color: rgba(255, 255, 255, 0.45); }
.nav .nav-cta-ghost: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; }
}

/* Hero quick links: one tap to each of the three things people come for. */
.hero-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px clamp(18px, 3vw, 36px);
  font-size: clamp(0.72rem, 1.4vw, 0.85rem);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.hero-links a {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}
.hero-links a:hover,
.hero-links a:focus-visible { color: #fff; border-bottom-color: var(--blue-light); }
.hero-links-strip { display: none; }
@media (max-width: 760px) {
  .hero-links-inline { display: none; }
  .hero-links-strip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 20px var(--pad-x) 28px;
    background: #000;
    border-bottom: 1px solid var(--line);
  }
  .hero-links-strip a { padding: 10px 0; text-shadow: none; }
}

.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 > .split > .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 > .about-feature:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.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%; align-items: start; }
  .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. */

/* book us */
.bu { padding-block: clamp(56px, 8vw, 104px); }
.bu-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(18px, 2.6vw, 26px);
}
.bu-lede {
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.75;
  max-width: 52ch;
  color: rgba(255, 255, 255, 0.78);
}
.bu-chooser {
  display: grid;
  gap: clamp(14px, 2vw, 22px);
  width: 100%;
  max-width: 820px;
  margin-top: clamp(8px, 1.6vw, 16px);
}
.bu-choice {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(24px, 3.4vw, 38px) clamp(20px, 3vw, 32px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: #050505;
  text-align: center;
  transition: border-color 300ms ease, background 300ms ease;
}
.bu-choice:hover,
.bu-choice:focus-visible { border-color: var(--blue-light); background: #0c0c0c; color: #fff; }
.bu-choice-label {
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  font-weight: 200;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.bu-choice-sub {
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
}

.bu-block { padding-block: clamp(56px, 8vw, 110px); }
.bu-block .wrap { display: flex; flex-direction: column; align-items: center; }
.bu-dark { background: #0a0a0a; }
.bu-light { background: var(--grey); color: #000; }
.bu-label {
  font-size: clamp(0.78rem, 1.6vw, 0.9rem);
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--blue-light);
}
.bu-light .bu-label { color: var(--blue); }
.bu-block-title { margin-top: 14px; }

.bu-cards {
  list-style: none;
  margin: clamp(32px, 4.5vw, 56px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(18px, 2.4vw, 30px);
  width: 100%;
}
.bu-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(22px, 2.8vw, 34px);
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.bu-light .bu-card { background: #fff; border-color: rgba(0, 0, 0, 0.1); }
/* Photo sits inside the card padding, so the white box frames it on every side. */
.bu-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin: 0 0 4px;
}

.bu-card h4 {
  margin: 0;
  font-size: clamp(1.05rem, 1.9vw, 1.25rem);
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-light);
}
.bu-light .bu-card h4 { font-weight: 400; color: var(--blue); }
.bu-card p {
  font-size: clamp(0.95rem, 1.4vw, 1.02rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.76);
}
.bu-light .bu-card p { color: rgba(0, 0, 0, 0.72); }
.bu-card-link {
  margin-top: auto;
  padding-top: 10px;
  align-self: flex-start;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue-light);
  border-bottom: 1px solid rgba(127, 168, 232, 0.45);
}
.bu-card-link:hover,
.bu-card-link:focus-visible { color: #fff; border-bottom-color: #fff; }
.bu-meta {
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  font-size: 0.85rem;
}
.bu-light .bu-card-link {
  margin-top: auto;
  padding-top: 10px;
  align-self: flex-start;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue-light);
  border-bottom: 1px solid rgba(127, 168, 232, 0.45);
}
.bu-card-link:hover,
.bu-card-link:focus-visible { color: #fff; border-bottom-color: #fff; }
.bu-meta { border-top-color: rgba(0, 0, 0, 0.1); }
.bu-meta dt {
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.bu-light .bu-meta dt { color: rgba(0, 0, 0, 0.45); }
.bu-meta dd { margin: 0; color: rgba(255, 255, 255, 0.85); }
.bu-light .bu-meta dd { color: rgba(0, 0, 0, 0.8); }

.bu-note {
  margin-top: clamp(24px, 3.2vw, 38px);
  max-width: 64ch;
  font-size: clamp(0.95rem, 1.4vw, 1.02rem);
  line-height: 1.7;
  text-align: center;
  color: rgba(255, 255, 255, 0.76);
}
.bu-light .bu-note { color: rgba(0, 0, 0, 0.7); border: 1px solid currentColor; padding: clamp(24px, 3.4vw, 38px) clamp(20px, 3vw, 32px); }
.bu-dark .bu-note { border: 1px solid rgba(255, 255, 255, 0.22); padding: clamp(24px, 3.4vw, 38px) clamp(20px, 3vw, 32px); }
.bu-card-btn { margin-top: auto; align-self: flex-start; }
.bu-card-btn:not(:first-child) { margin-top: auto; }
.bu-card p + .bu-card-btn { margin-top: auto; }
.bu-card > p:last-of-type { margin-bottom: 10px; }
.bu-cta-top { margin-top: clamp(24px, 3.2vw, 36px); }
.bu-credits { justify-content: center; margin-top: clamp(28px, 4vw, 44px); column-gap: 0; }
/* Rules on both sides of every item, so a word is bracketed wherever it wraps. */
.bu-credits li {
  padding-inline: clamp(18px, 2.6vw, 34px);
  border-right: 1px solid rgba(127, 168, 232, 0.55);
}
.bu-reel { width: 100%; max-width: 760px; margin-top: clamp(32px, 4.5vw, 52px); }
.bu-cta { margin-top: clamp(28px, 4vw, 44px); }

.req { color: var(--blue); letter-spacing: 0; }
.form-note { font-size: 0.8rem; letter-spacing: 0.04em; color: rgba(0, 0, 0, 0.55); }
.field-opt { letter-spacing: 0.06em; text-transform: none; color: rgba(0, 0, 0, 0.45); }
.field-row { display: grid; gap: 20px; }
.field textarea {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.6;
  padding: 14px 16px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: #fff;
  color: #000;
  resize: vertical;
}
.field textarea:focus { border-color: var(--blue); outline: none; }

@media (min-width: 620px) {
  .bu-chooser { grid-template-columns: repeat(2, 1fr); }
  .field-row { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  /* auto-fit so the track adapts to the card count — two cards stay centred
     under the rest of the block instead of leaving a dead third column. */
  .bu-cards { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
}

/* 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 { position: relative; isolation: isolate; overflow: hidden; }
.workshops .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.workshops-mark { margin: 0; }
.workshops-ctas { display: flex; flex-wrap: wrap; gap: 12px 16px; }
.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);
}
/* Upcoming workshops: class info left/centre, 9:16 reel in the right column.
   Stacks on phones with the text first. */
.ws-upcoming {
  /* Full wrap width, so the reel's right edge lines up with the cards below. */
  width: 100%;
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
}
/* Title and status line centred on the page, across both columns. */
.ws-upcoming-head { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 16px; text-align: center; }
.ws-upcoming-copy { display: flex; flex-direction: column; width: 100%; max-width: 620px; margin-inline: auto; text-align: left; }
@media (min-width: 900px) {
  /* ~60 / 40 split, both columns top-aligned. */
  .ws-upcoming { grid-template-columns: minmax(0, 1fr); }
  /* Text sits centre-left in its column, not against the page edge. */
  .ws-upcoming-copy { align-self: start; justify-self: center; margin-inline: 0; }
  .ws-reel { margin: 0; justify-self: end; }
}
.ws-open { display: flex; flex-direction: column; gap: clamp(28px, 3.5vw, 40px); }
.ws-open[hidden], .ws-empty[hidden] { display: none; }
.ws-event-head { display: flex; flex-direction: column; gap: 6px; }
.ws-event-name {
  margin: 0;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
}
.ws-event-venue { margin: 0; font-size: clamp(1.05rem, 1.6vw, 1.15rem); color: rgba(0, 0, 0, 0.7); }
.ws-class-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(0, 0, 0, 0.14); }
.ws-class {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px 28px;
  align-items: end;
  padding-block: clamp(22px, 2.6vw, 30px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.14);
}
.ws-class-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ws-class-style {
  margin: 0;
  font-size: clamp(1.45rem, 2.6vw, 1.9rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.ws-class-meta { margin: 0; display: grid; gap: 6px; }
.ws-class-meta > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 12px; align-items: baseline; }
.ws-class-meta dt {
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
}
.ws-class-meta dd { margin: 0; font-size: clamp(1.05rem, 1.6vw, 1.15rem); line-height: 1.5; color: #000; overflow-wrap: anywhere; }
.ws-class-buy { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.ws-class-price { margin: 0; font-size: clamp(1.3rem, 2.2vw, 1.55rem); font-weight: 500; letter-spacing: 0.02em; white-space: nowrap; color: var(--blue); }
.ws-class-btn {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid var(--blue);
  background: var(--blue);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ws-class-btn:hover { background: transparent; color: var(--blue); }
@media (max-width: 520px) {
  .ws-class { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .ws-class-buy { flex-direction: row; align-items: center; justify-content: space-between; }
}
.ws-open-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.ws-ladder { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.ws-ladder-label { margin: 0; font-size: 0.74rem; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(0, 0, 0, 0.55); }
.ws-ladder-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
.ws-ladder-list li { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.1); }
.ws-ladder-qty { font-size: 0.95rem; color: rgba(0, 0, 0, 0.7); }
.ws-ladder-price { font-size: clamp(1.15rem, 1.8vw, 1.3rem); font-weight: 500; color: var(--blue); white-space: nowrap; }
.ws-price-note { margin: 0; font-size: clamp(1rem, 1.5vw, 1.08rem); line-height: 1.6; color: rgba(0, 0, 0, 0.7); }
.ws-open-foot .btn:hover { background: #000; color: #fff; }
.ws-empty { display: flex; flex-direction: column; gap: 14px; padding-top: clamp(8px, 2vw, 24px); }
.ws-empty-title {
  margin: 0;
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ws-empty-sub { margin: 0; font-size: clamp(1.05rem, 1.7vw, 1.2rem); line-height: 1.6; color: rgba(0, 0, 0, 0.7); }
.ws-empty-sub a { color: var(--blue); border-bottom: 1px solid currentColor; }
.ws-empty-sub a:hover { color: #000; }
.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-reel {
  margin: 0 auto;
  width: 100%;
  max-width: 340px;
  overflow: hidden;
  background: #000;
  border-radius: 2px;
}
.ws-reel img,
.ws-reel video { width: 100%; height: auto; display: block; }
.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);
}

.ws-event { max-width: 820px; width: 100%; margin: 0 auto; }
.ws-event-for {
  margin-top: 6px;
  font-size: 0.78rem !important;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.5) !important;
}
.ws-event-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px 28px;
}
.ws-event-list li {
  padding-left: 16px;
  border-left: 1px solid var(--blue);
  font-size: clamp(0.98rem, 1.4vw, 1.05rem);
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.72);
}
@media (min-width: 700px) {
  .ws-event-list { grid-template-columns: repeat(2, 1fr); }
}

@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; }
}

/* ================================================================== *
 * Booking system + bilingual additions (merged from the live site)
 * ================================================================== */
/* --- 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); }

/* fixed-price "other events" and the total breakdown */
.ws-choice-group {
  margin: 8px 0 0; font-size: 0.78rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(0, 0, 0, 0.55);
}
.ws-choice-group:first-child { margin-top: 0; }
.ws-choice-price { margin-left: auto; padding-left: 12px; font-size: 0.95rem; font-weight: 500; color: var(--blue); white-space: nowrap; }
.total-breakdown { margin-top: 6px; font-size: 0.85rem; line-height: 1.6; color: rgba(0, 0, 0, 0.6); }
.total-breakdown[hidden], .total-note[hidden] { display: none; }
.ws-class-price small { display: block; font-size: 0.72rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(0, 0, 0, 0.55); text-align: right; }
.ws-ladder[hidden] { display: none; }
.ws-event-name:empty, .ws-event-venue:empty { display: none; }
.ws-class-btn { font-family: inherit; cursor: pointer; }
form button:disabled { background: rgba(0, 0, 0, 0.35); cursor: not-allowed; }
.signup-col > .signup-thanks { align-self: stretch; }

/* language switch in the top menu */
.lang-switch {
  display: inline-flex; align-items: center; gap: 10px;
  padding-left: clamp(4px, 1vw, 10px);
  letter-spacing: 0.14em;
}
.lang-switch::before { content: ""; width: 1px; height: 14px; background: rgba(255, 255, 255, 0.35); margin-right: 2px; }
.lang-current { color: #fff; border-bottom: 1px solid #fff; padding: 4px 0; }
.lang-switch a { color: rgba(255, 255, 255, 0.6); }
.lang-switch a:hover { color: #fff; }
@media (max-width: 760px) {
  .lang-switch { padding: 10px 0 0; }
  .lang-switch::before { display: none; }
}
/* keep the menu on one line on laptop screens now that it has a language switch */
@media (min-width: 761px) and (max-width: 1440px) {
  .nav { gap: 10px clamp(14px, 1.5vw, 26px); letter-spacing: 0.14em; }
  .nav .nav-cta { padding: 9px 16px; }
}
/* the tick-box rows sit inside .field, so undo the uppercase label style there */
.ws-picker .ws-choice { text-transform: none; letter-spacing: normal; font-size: 1rem; color: #000; }
.ws-picker .ws-choice-price { letter-spacing: 0.02em; }

/* spots left, fully booked and waiting list */
.ws-class-left { margin: -6px 0 0; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); }
.ws-class-full { margin: 0; font-size: 0.85rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(0, 0, 0, 0.55); white-space: nowrap; }
.ws-class.is-full .ws-class-style { color: rgba(0, 0, 0, 0.55); }
.ws-class-btn.is-waitlist { background: transparent; color: var(--blue); }
.ws-class-btn.is-waitlist:hover { background: var(--blue); color: #fff; }
.ws-choice-tag { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); }
.ws-choice.is-full .ws-choice-title { color: rgba(0, 0, 0, 0.6); }
.thanks-waitlist { font-size: 0.95rem; line-height: 1.7; color: rgba(0, 0, 0, 0.72); border-left: 2px solid var(--blue); padding-left: 12px; }
.swish-detail[hidden], .thanks-foot[hidden] { display: none; }

/* Full-width workshop film above "Upcoming workshops". */
.ws-film { background: #000; line-height: 0; width: 100vw; margin-inline: calc(50% - 50vw); }
.ws-film video { display: block; width: 100%; height: auto; max-height: 90vh; object-fit: cover; }