/* ============================================================
   DANCERS INC. — Design System
   2027 Brand Palette
   ============================================================ */

:root {
  /* Brand palette */
  --pool-blue:     #CDE7EC;
  --adriatic:      #A9DCD8;
  --curacao:       #7CCFD6;
  --sea-glass:     #D9EDE7;
  --ice-blue:      #E6F1F6;
  --mist-grey:     #D6D9DC;
  --dove-grey:     #B8BCC0;
  --soft-concrete: #AFAFB2;
  --chalk-white:   #F6F6F4;
  --grey-azure:    #4A5258;
  --silver-grey:   #999FA3; /* extended utility tone — not in the official 10-swatch palette, see design system notes */

  /* The Circle — sub-brand palette (see design-system/circle/). Shares Jost
     and --ice-blue with Dancers Inc.; ink/greys are its own. Declared
     globally but only consumed on pages carrying the .circle-page class. */
  --circle-ink:         #1C3E55;
  --circle-midnight:    #12222D;
  --circle-slate:       #3A4E5C;
  --circle-steel:       #7E909D;
  --circle-silvermist:  #B9C4CB;
  --circle-light-azure: #F3F4F5;
  --circle-steel-text:  #5F7182; /* Text form of --circle-steel. The swatch is
                                    3.00:1 on Light Azure; this is 4.57:1. The
                                    swatch itself still governs rules, hairlines
                                    and the network's link colour. */

  /* Semantic */
  --ink:        var(--grey-azure);
  --ink-strong: #3A4147;
  --sky:        #9BD3E3; /* Charge origin — gradient terminal only, never a flat fill */
  --powder:     #DBEAF2; /* Studio / Cover Wash terminus — gradient terminal only */
  --ink-soft:   #656E74; /* was #7C858B (3.47:1) - below the 4.5:1 floor for
                            body-size text. #656E74 is 4.81:1 on --chalk-white
                            and still well above the guide's Ink Strong. */
  --ink-label:  #656E74; /* Text form of --silver-grey. The 9px uppercase
                            eyebrows and meta rows read at 2.47:1 in the raw
                            swatch; small text needs 4.5:1 too. The swatch
                            itself is untouched - it is still correct for
                            hairlines and fills. */
  --bg:         var(--chalk-white);
  --accent:     var(--curacao);

  --sidebar-w: 260px;

  --font: 'Jost', 'Helvetica Neue', Arial, sans-serif;

  --track-wide: 0.32em;
  --track-mid:  0.18em;
  --track-tight: 0.08em;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* overflow-x: clip, not hidden. `hidden` makes the element a scroll container,
   which silently breaks `position: sticky` for everything inside it — that is
   what stopped the roster pin working. `clip` holds back horizontal overflow
   just the same without creating one. `hidden` is left first as the fallback
   for anything that does not know `clip`. */
html { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; }

body {
  font-family: var(--font);
  font-weight: 300;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.7;
  overflow-x: hidden;
  overflow-x: clip;   /* see the note on html above — `hidden` would kill sticky */
  max-width: 100vw;
}

body.menu-open { overflow: hidden; }

a, button, .card, .btn, .filter { touch-action: manipulation; }

img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--pool-blue); color: var(--ink-strong); }

/* ============ Layout shell ============ */

.shell { display: flex; min-height: 100vh; }

.main {
  flex: 1;
  margin-left: var(--sidebar-w);
  min-width: 0;
}

/* ============ Sidebar ============ */

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  background: var(--bg);
  border-right: 1px solid var(--mist-grey);
  display: flex;
  flex-direction: column;
  padding: 44px 36px;
  z-index: 100;
}

.brand { display: block; }

.logo-block {
  display: block;
  position: relative;
  /* Charge — the guide lists the logo pill as a Charge use. Was Adriatic ->
     Curacao until 4 Sept 2026; see design-system/notes.md. */
  background: linear-gradient(135deg, var(--sky), var(--curacao));
  padding: 20px 30px;
  border-radius: 999px;
}
.logo-block img { position: relative; z-index: 2; width: 100%; height: auto; }
.topbar .logo-block { padding: 10px 22px; width: 150px; }
footer .logo-block { width: 200px; }

/* Custom animation: a thin light arc orbits the pill's fixed outline —
   smoothly this time, via two layers instead of one:
     .ring-track — a static window, the exact same shape as the pill,
       carved into a thin band with mask-composite. This never moves,
       so it always stays perfectly hugging the real pill's edge.
     .ring-fill  — a plain oversized conic gradient living INSIDE that
       window, spun with a plain `transform: rotate`. Rotating a whole
       stadium shape looks broken (its straight sides swing out of
       alignment); rotating only the *fill* behind a static window
       doesn't have that problem, and `transform` is smoothly
       interpolated by every browser — no jitter, no stepping.
   The logo image is untouched; it paints above both layers. */
.ring-track {
  position: absolute;
  inset: -4px;
  z-index: 1;
  border-radius: inherit;
  padding: 2px;
  overflow: hidden;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.ring-fill {
  position: absolute;
  inset: -60%;
  background: conic-gradient(from 0deg,
    transparent 0 55%, var(--curacao) 72%, var(--chalk-white) 78%, transparent 92%);
  animation: ringSpin 6s linear infinite;
}
@keyframes ringSpin { to { transform: rotate(360deg); } }

.brand-name {
  font-size: 19px;
  font-weight: 300;
  letter-spacing: var(--track-mid);
  color: var(--ink-strong);
  white-space: nowrap;
}

.brand-name strong { font-weight: 600; }


.nav { margin-top: 88px; }

.nav ul { list-style: none; }

.nav li { margin-bottom: 22px; position: relative; }

.nav a {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-soft);
  display: inline-block;
  transform-origin: left center;
  transition: color .15s ease-out, transform .18s cubic-bezier(.34,1.56,.64,1), letter-spacing .18s ease-out;
}

.nav a:hover {
  color: var(--curacao);
  transform: scale(1.16) translateX(3px);
  letter-spacing: 0.4em;
}
.nav a:active { transition-duration: .06s; transform: scale(1.05) translateX(2px); }

.nav li.active a { color: var(--ink-strong); }
.nav li.active a:hover { color: var(--curacao); }

.nav li.active::before {
  content: '';
  position: absolute;
  left: -18px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink-strong);
}

/* sub-nav (The Circle) */
.nav .subnav {
  margin: 0 0 0 14px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .35s ease, opacity .25s ease, margin-top .35s ease;
}
.nav li:hover .subnav,
.nav li.active .subnav {
  margin-top: 14px;
  max-height: 60px;
  opacity: 1;
}
.nav .subnav li { margin-bottom: 12px; }
.nav .subnav a { font-size: 9.5px; letter-spacing: var(--track-mid); color: var(--ink-soft); }
.nav .subnav a:hover { color: var(--curacao); transform: scale(1.12) translateX(3px); }
.nav .subnav li.active a { color: var(--ink-strong); }

.sidebar-motto {
  margin-top: auto;
  padding-top: 40px;
  font-size: 10px;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-label);
  line-height: 2.6;
}

.sidebar-scroll {
  margin-top: 28px;
  font-size: 9px;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-label);
}
.sidebar-scroll::before {
  content: '';
  display: inline-block;
  width: 26px;
  height: 1px;
  background: var(--silver-grey);
  vertical-align: middle;
  margin-right: 10px;
}

/* ============ Mobile top bar ============ */

.topbar {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 64px;
  background: rgba(246,246,244,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--mist-grey);
  z-index: 200;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
}

.topbar .brand-name { font-size: 16px; }

.menu-btn {
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font);
  font-size: 10px;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 10px;
  margin: -14px -10px;
  transition: opacity .15s ease-out;
}
.menu-btn:active { opacity: .5; }
.menu-btn .bars { display: inline-flex; flex-direction: column; gap: 4px; transition: transform .3s cubic-bezier(.2,.6,.2,1); }
.menu-btn .bars span {
  width: 22px; height: 1px; background: var(--ink);
  transition: transform .3s cubic-bezier(.2,.6,.2,1), opacity .2s;
}
/* Bars morph into a close (X) icon while the menu is open */
.menu-btn[aria-expanded="true"] .bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .bars span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 64px 0 0 0;
  background: var(--chalk-white);
  z-index: 190;
  padding: 48px 32px;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-14px);
  pointer-events: none;
  visibility: hidden;
  transition: opacity .3s ease, transform .3s cubic-bezier(.2,.6,.2,1), visibility 0s .3s;
}
.mobile-menu.open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  visibility: visible;
  transition: opacity .3s ease, transform .3s cubic-bezier(.2,.6,.2,1), visibility 0s;
}
.mobile-menu ul { list-style: none; }
.mobile-menu li {
  margin-bottom: 24px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .4s ease, transform .4s cubic-bezier(.2,.6,.2,1);
  transition-delay: var(--d, 0s);
}
.mobile-menu.open li { opacity: 1; transform: none; }
.mobile-menu a {
  font-size: 13px;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink);
  display: inline-block;
  transform-origin: left center;
  transition: color .15s ease-out, transform .18s cubic-bezier(.34,1.56,.64,1);
}
.mobile-menu a:active { color: var(--curacao); transform: scale(1.1) translateX(3px); }
.mobile-menu li.mobile-sub { margin-top: -12px; margin-left: 18px; }
.mobile-menu li.mobile-sub a { font-size: 10px; color: var(--ink-soft); }

/* ============ Type ============ */

.display {
  font-weight: 200;
  font-size: clamp(44px, 6vw, 84px);
  line-height: 1.12;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--ink-strong);
}

.h-section {
  font-weight: 200;
  font-size: clamp(34px, 4vw, 56px);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--ink-strong);
  line-height: 1.15;
}

.h-section::after {
  content: '';
  display: block;
  width: 34px;
  height: 1px;
  background: var(--ink-strong);
  margin-top: 26px;
}

.eyebrow {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 22px;
}

.lead { font-size: 17px; font-weight: 300; color: var(--ink); max-width: 560px; }

.body-copy p { margin-bottom: 1.2em; max-width: 640px; }

/* ============ Buttons / links ============ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--ink-soft);
  padding: 15px 30px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-strong);
  background: transparent;
  cursor: pointer;
  font-family: var(--font);
  transition: background .35s, border-color .35s;
}
.btn .arr { transition: transform .35s; }
.btn:hover { background: rgba(255,255,255,.55); border-color: var(--ink-strong); }
.btn:hover .arr { transform: translateX(5px); }

.btn-solid { background: var(--ink-strong); color: var(--chalk-white); border-color: var(--ink-strong); }
.btn-solid:hover { background: var(--ink); }

.btn { transition: background .35s, border-color .35s, transform .12s ease-out; }
.btn:active { transform: scale(0.96); }

.textlink {
  font-size: 10px;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-strong);
  border-bottom: 1px solid var(--ink-strong);
  padding-bottom: 6px;
  display: inline-flex;
  gap: 12px;
  align-items: center;
}
.textlink:hover .arr { transform: translateX(5px); }
.textlink .arr { transition: transform .35s; }
.textlink { transition: opacity .15s; }
.textlink:active { opacity: .55; }

/* ============ Hero ============ */

/* Hero + featured bar together fill exactly one screen: the bar is
   never allowed to shrink (flex-shrink:0, sized to its own content),
   so the hero simply takes up whatever height is left over. This means
   the bar is always shown in full on load, on any window height. */
.hero-viewport {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.featured-bar { flex-shrink: 0; }

.hero {
  position: relative;
  flex: 1 1 auto;
  min-height: 460px; /* floor so the headline never gets cramped on very short windows */
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.hero-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(246,246,244,.88) 0%, rgba(246,246,244,.45) 42%, rgba(246,246,244,0) 75%);
}

.hero-inner { position: relative; padding: 0 8vw; z-index: 2; }

.hero-tag {
  position: absolute;
  top: 44px;
  left: 8vw;
  font-size: 10px;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-soft);
  z-index: 3;
}

.hero-badge {
  position: absolute;
  top: 60px;
  right: 7vw;
  width: 92px;
  height: 92px;
  border: 1px solid var(--silver-grey);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 9px;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--ink-soft);
  z-index: 3;
}
.hero-badge::after { content:''; width: 16px; height: 1px; background: var(--silver-grey); order: 1; }
.hero-badge span:last-child { order: 2; }

.hero-sub {
  margin: 34px 0 40px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: var(--track-mid);
  color: #000;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 14px;
}
.hero-sub::before {
  content: '';
  width: 30px;
  height: 2px;
  background: var(--curacao);
  flex-shrink: 0;
}

@media (max-width: 860px) {
  .hero-sub { font-size: 13px; gap: 10px; }
  .hero-sub::before { width: 20px; }
}

/* Featured bar under hero */
.featured-bar {
  position: relative;
  background: linear-gradient(90deg, var(--pool-blue), var(--ice-blue));
  display: grid;
  grid-template-columns: 1.2fr auto 1fr auto;
  gap: 40px;
  align-items: center;
  padding: 34px 8vw 34px 8vw;
}

.featured-bar .fb-label { }
.fb-label .eyebrow { margin-bottom: 10px; }
.fb-label .fb-title {
  font-size: 21px;
  font-weight: 300;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--ink-strong);
}
.fb-label .textlink { margin-top: 18px; }

.fb-num {
  font-size: 78px;
  font-weight: 100;
  color: var(--ink-strong);
  line-height: 1;
  letter-spacing: 0;
}
.fb-num small { font-size: 18px; color: var(--ink-soft); font-weight: 300; }

.fb-copy {
  font-size: 12px;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--ink);
  line-height: 2.4;
}

.fb-arrows { display: flex; flex-direction: column; gap: 18px; font-size: 16px; color: var(--ink-strong); }

/* ============ Sections ============ */

.section { padding: 110px 8vw; }
.section-tint { background: var(--ice-blue); }
.section-tint-2 { background: var(--sea-glass); }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}

.stats {
  display: flex;
  gap: 0;
  margin-top: 64px;
}
.stat { padding: 0 48px; border-left: 1px solid var(--dove-grey); }
.stat:first-child { padding-left: 0; border-left: 0; }
.stat .num { font-size: 40px; font-weight: 200; color: var(--ink-strong); line-height: 1.2; }
.stat .lbl { font-size: 9px; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--ink-soft); margin-top: 6px; }

/* Quote band */
.quote-band {
  background: linear-gradient(90deg, var(--pool-blue), var(--sea-glass));
  padding: 90px 8vw;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 54px;
  align-items: center;
}
.quote-band .qmark { font-size: 60px; font-weight: 200; color: var(--curacao); line-height: 0; }
.quote-band blockquote {
  font-size: clamp(19px, 2vw, 26px);
  font-weight: 250;
  color: var(--ink-strong);
  line-height: 1.7;
  letter-spacing: .04em;
  max-width: 720px;
}
.quote-band cite {
  font-style: normal;
  font-size: 10px;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 2.2;
  display: block;
}
.quote-band cite strong { display: block; color: var(--ink-strong); font-weight: 400; }

/* ============ Roster grid ============ */

.filter-row {
  display: flex;
  gap: 44px;
  margin: 56px 0 44px;
  flex-wrap: wrap;
}
.filter {
  font-size: 10px;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-soft);
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font);
  padding-bottom: 8px;
  border-bottom: 1px solid transparent;
  transition: color .3s, border-color .3s;
}
.filter.active, .filter:hover { color: var(--ink-strong); border-color: var(--ink-strong); }

.roster {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}

.card { cursor: pointer; }
.card .ph {
  aspect-ratio: 3 / 3.6;
  overflow: hidden;
  background: var(--mist-grey);
}
.card .ph img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.6,.2,1), filter .8s;
}
.card:hover .ph img { transform: scale(1.05); }
.card:active .ph img { transform: scale(0.97); transition-duration: .15s; }
.card .cname {
  margin-top: 16px;
  font-size: 11px;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--ink-strong);
  font-weight: 400;
}
.card .cmeta {
  font-size: 9px;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-label);
  margin-top: 4px;
}

/* ============ Creative strips (name left, showreel loop right) ============ */

.creative-strip { padding: 0 8vw; display: flex; flex-direction: column; gap: 14px; }

.cstrip {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: clamp(89px, 8.8vw, 160px);
  border-radius: 18px;
  cursor: pointer;
  background: var(--ice-blue);
  overflow: hidden;
}

.cstrip-name {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 14px 28px 14px 24px;
}
.cstrip-title {
  font-size: 18px;
  font-weight: 300;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--ink-strong);
  transition: color .4s, transform .4s cubic-bezier(.2,.6,.2,1);
}
.cstrip:hover .cstrip-title { color: var(--curacao); transform: translateX(6px); }
.cstrip:active .cstrip-title { transform: translateX(3px); transition-duration: .12s; }

.cstrip-media {
  position: relative;
  overflow: hidden;
  background: var(--mist-grey);
  display: block;
  height: clamp(89px, 8.8vw, 160px);
  margin: 10px 10px 10px 0;
  border-radius: 12px;
}
.cstrip-media-el {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .9s cubic-bezier(.2,.6,.2,1);
}
.cstrip:hover .cstrip-media-el { transform: scale(1.04); }
.cstrip:active .cstrip-media-el { transform: scale(0.98); transition-duration: .15s; }
.cstrip-media::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(169,220,216,.30), rgba(126,144,157,.16));
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}
a.cstrip-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(20,24,28,0);
  transition: background .3s ease;
  z-index: 2;
}
a.cstrip-media:hover::after { background: rgba(20,24,28,.08); }
.cstrip-gallery { position: relative; width: 100%; height: 100%; }
.cstrip-gallery .gal-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.cstrip-gallery .gal-img.active { opacity: 1; }
.cstrip:hover .cstrip-gallery { transform: scale(1.04); }
.cstrip-gallery { transition: transform .9s cubic-bezier(.2,.6,.2,1); }

@media (max-width: 860px) {
  .creative-strip { padding: 0 7vw; gap: 12px; }
  .cstrip { grid-template-columns: 1fr; min-height: 0; border-radius: 16px; }
  .cstrip-name { padding: 22px 24px 4px; }
  .cstrip-media { height: auto; aspect-ratio: 16 / 9; margin: 10px; }
}

/* ============ Elizabeth Honan — featured banner (Creatives listing) ============
   Deliberately much larger than any regular strip: she gets a full-bleed video
   banner rather than a row, since she's the agency's founding creative force. */

.eh-feature {
  position: relative;
  display: block;
  margin: 8vw 8vw 5vw;
  min-height: 60vh;
  border-radius: 22px;
  overflow: hidden;
  cursor: pointer;
}
.eh-feature-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2,.6,.2,1);
}
.eh-feature:hover .eh-feature-media { transform: scale(1.03); }
.eh-feature-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(20,24,28,.72) 0%, rgba(20,24,28,.15) 45%, rgba(20,24,28,0) 70%);
}
.eh-feature-copy {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 48px;
  color: var(--chalk-white);
}
.eh-feature-copy .eyebrow { color: var(--adriatic); }
.eh-feature-copy .h-section { color: var(--chalk-white); margin-top: 14px; }
.eh-feature-copy .textlink { color: var(--chalk-white); border-bottom-color: var(--chalk-white); margin-top: 22px; }
.eh-feature-copy .textlink::after { background: var(--chalk-white); }

@media (max-width: 860px) {
  .eh-feature { margin: 10vw 7vw 6vw; min-height: 46vh; border-radius: 18px; }
  .eh-feature-copy { padding: 30px; }
}

/* ============ Elizabeth Honan — dedicated page hero ============ */

.eh-hero {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  min-height: 62vh;
  background: var(--mist-grey);
}
.eh-hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.eh-mono {
  position: absolute;
  top: 28px;
  right: 28px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(20,24,28,.55);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.eh-mono img { width: 60%; height: 60%; object-fit: contain; }

@media (max-width: 860px) {
  .eh-hero { min-height: 40vh; border-radius: 18px; }
  .eh-mono { width: 48px; height: 48px; top: 16px; right: 16px; }
}

/* ============ Work / numbered list ============ */

.worklist { margin-top: 64px; }
.workitem {
  display: grid;
  grid-template-columns: 110px 1fr 220px;
  gap: 44px;
  align-items: center;
  padding: 38px 0;
  border-top: 1px solid var(--mist-grey);
}
.workitem:last-child { border-bottom: 1px solid var(--mist-grey); }
.workitem .wnum { font-size: 52px; font-weight: 100; color: var(--ink-strong); line-height: 1; }
.workitem .wtitle { font-size: 15px; letter-spacing: var(--track-mid); text-transform: uppercase; color: var(--ink-strong); font-weight: 400; }
.workitem .wmeta { font-size: 9px; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--ink-label); margin-top: 8px; }
.workitem .wimg { aspect-ratio: 16/9; overflow: hidden; border-radius: 14px; }
.workitem .wimg img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.workitem:hover .wimg img { transform: scale(1.06); }

/* ============ News cards ============ */

.newsgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 64px;
}
.newscard .nimg { aspect-ratio: 4/3; overflow: hidden; background: var(--mist-grey); border-radius: 14px; }
.newscard .nimg img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.newscard:hover .nimg img { transform: scale(1.05); }
.newscard:active .nimg img { transform: scale(0.97); transition-duration: .15s; }
.newscard .ndate { font-size: 9px; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--ink-label); margin: 18px 0 8px; }
.newscard .ntitle { font-size: 13px; letter-spacing: var(--track-tight); text-transform: uppercase; color: var(--ink-strong); font-weight: 400; line-height: 1.6; }

/* ============ Client strip ============ */

.clients {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 0;
  margin-top: 56px;
  max-width: 900px;
}
.clients span {
  font-size: 11px;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0 22px;
  border-left: 1px solid var(--mist-grey);
  line-height: 2;
}
.clients span:first-child { border-left: 0; padding-left: 0; }

/* ============ Tier cards (Circle) ============ */

.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 64px;
}
.tier {
  background: var(--chalk-white);
  border: 1px solid var(--mist-grey);
  padding: 46px 38px;
  transition: border-color .3s, transform .3s;
}
.tier:hover { border-color: var(--curacao); transform: translateY(-4px); }
.tier:active { transform: translateY(-1px) scale(0.99); transition-duration: .12s; }
.tier.feature { background: linear-gradient(160deg, var(--pool-blue), var(--ice-blue)); border-color: transparent; }
.tier .tname { font-size: 13px; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--ink-strong); font-weight: 400; }
.tier .tdesc { font-size: 13px; color: var(--ink); margin-top: 18px; line-height: 1.9; }
.tier ul { list-style: none; margin-top: 22px; }
.tier li {
  font-size: 10px;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 9px 0;
  border-top: 1px solid rgba(153,159,163,.25);
}

/* ============ Contact ============ */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  margin-top: 64px;
}

.contact-note { font-size: 13px; color: var(--ink); line-height: 2; }
.contact-note p { margin-bottom: 1.6em; }
.contact-note a { color: var(--ink-strong); border-bottom: 1px solid var(--dove-grey); }
.contact-note a:hover { border-color: var(--ink-strong); }
.contact-note .who {
  font-size: 9px;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-label);
  display: block;
  margin-bottom: 4px;
}

.form-panel { background: var(--ice-blue); padding: 52px 46px; }

.field { margin-bottom: 30px; }
.field label {
  display: block;
  font-size: 9px;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.field input, .field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--dove-grey);
  padding: 8px 0 12px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 300;
  color: var(--ink-strong);
  outline: none;
  transition: border-color .3s;
  resize: vertical;
}
.field input:focus, .field textarea:focus { border-color: var(--ink-strong); }
.field textarea { min-height: 110px; }

/* Team list */
.team {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px 40px;
  margin-top: 64px;
}
.member .mname { font-size: 12px; letter-spacing: var(--track-mid); text-transform: uppercase; color: var(--ink-strong); font-weight: 400; }
.member .mrole { font-size: 9px; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--ink-label); margin-top: 6px; line-height: 2.1; }

/* ============ CTA band ============ */

.cta-band {
  position: relative;
  padding: 130px 8vw;
  background-size: cover;
  background-position: center 30%;
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(230,241,246,.94), rgba(230,241,246,.55));
}
.cta-band > * { position: relative; }

/* ============ Footer ============ */

footer {
  border-top: 1px solid var(--mist-grey);
  padding: 72px 8vw 54px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 60px;
  background: var(--bg);
}
footer .brand-name { font-size: 16px; }
footer .fcol .eyebrow { margin-bottom: 18px; }
footer .fcol ul { list-style: none; }
footer .fcol li { margin-bottom: 12px; }
footer .fcol a, footer .fcol span {
  font-size: 10.5px;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--ink-soft);
}
footer .fcol a:hover { color: var(--ink-strong); }
.footnote {
  grid-column: 1 / -1;
  padding-top: 44px;
  margin-top: 12px;
  border-top: 1px solid var(--mist-grey);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 9px;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-label);
}

/* ============ Page hero (interior) ============ */

.page-head { padding: 150px 8vw 70px; }
.page-head .display { font-size: clamp(40px, 5vw, 68px); }
.page-head .display::after {
  content: '';
  display: block;
  width: 34px;
  height: 1px;
  background: var(--ink-strong);
  margin-top: 30px;
}
.page-head .lead { margin-top: 34px; }

/* ============ Reveal animation ============ */

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s ease; }
.reveal.vis { opacity: 1; transform: none; }

/* Staggered children (delay set by JS via --d) */
.stagger > * { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s ease; transition-delay: var(--d, 0s); }
.stagger.vis > * { opacity: 1; transform: none; }

/* ============ Subtle motion layer ============ */

/* Hero: content rises in sequence, image breathes */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}
@keyframes kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hero-bg { animation: kenburns 22s ease-out both; transform-origin: 60% 40%; }
.hero-inner .display    { animation: riseIn 1.1s cubic-bezier(.2,.6,.2,1) .15s both; }
.hero-inner .hero-sub   { animation: riseIn 1.1s cubic-bezier(.2,.6,.2,1) .35s both; }
.hero-inner .btn        { animation: riseIn 1.1s cubic-bezier(.2,.6,.2,1) .55s both; }
.hero-tag   { animation: fadeIn 1.4s ease .7s both; }
.hero-badge { animation: fadeIn 1.4s ease .9s both; }

/* Mobile topbar: slides down on first load */
@keyframes topbarIn { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@media (max-width: 860px) {
  .topbar { animation: topbarIn .6s cubic-bezier(.2,.6,.2,1) both; }
}

/* Hero badge: slow rotation on the ring */
@keyframes spinSlow { to { transform: rotate(360deg); } }
.hero-badge::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid transparent;
  border-top-color: var(--curacao);
  animation: spinSlow 14s linear infinite;
}

/* Sidebar scroll cue: pulsing line */
@keyframes cueSlide {
  0%, 100% { transform: scaleX(.4); opacity: .5; }
  50%      { transform: scaleX(1);  opacity: 1; }
}
.sidebar-scroll::before { transform-origin: left; animation: cueSlide 2.6s ease-in-out infinite; }

/* Featured-bar arrows: gentle drift */
@keyframes driftY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}
.fb-arrows span:last-child  { display: inline-block; animation: driftY 2.4s ease-in-out infinite; }
.fb-arrows span:first-child { display: inline-block; animation: driftY 2.4s ease-in-out infinite reverse; }

/* Buttons: soft sheen sweep */
.btn { position: relative; overflow: hidden; }
.btn::before {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-18deg);
  transition: left .7s ease;
  pointer-events: none;
}
.btn:hover::before { left: 120%; }

/* Textlink underline grows from left */
.textlink { position: relative; border-bottom: 0; }
.textlink::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--ink-strong);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.2,.6,.2,1);
}
.textlink:hover::after { transform: scaleX(.55); }

/* Cards: name nudges on hover, image already zooms */
.card .cname { transition: transform .5s cubic-bezier(.2,.6,.2,1); }
.card:hover .cname { transform: translateX(6px); }

/* Work items: number slides */
.workitem .wnum { transition: transform .5s cubic-bezier(.2,.6,.2,1), color .4s; }
.workitem:hover .wnum { transform: translateX(8px); color: var(--curacao); }
.workitem:active .wnum { transform: translateX(4px); color: var(--curacao); transition-duration: .12s; }

/* News cards: date underline hint */
.newscard .ntitle { transition: color .35s; }
.newscard:hover .ntitle { color: var(--ink); }

/* Quote mark: gentle float */
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.quote-band .qmark { animation: floatY 5s ease-in-out infinite; display: inline-block; }

/* Logo block: gradient drifts slowly */
.logo-block { background-size: 160% 160%; animation: gradientDrift 9s ease-in-out infinite alternate; }
@keyframes gradientDrift {
  from { background-position: 0% 0%; }
  to   { background-position: 100% 100%; }
}

/* ============ Roster search ============ */

.roster-tools {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  margin: 56px 0 44px;
  flex-wrap: wrap;
}
.roster-count {
  font-size: 10px;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-label);
}
.roster-search {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--dove-grey);
  padding: 8px 0 10px;
  width: min(300px, 100%);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--ink-strong);
  outline: none;
  transition: border-color .3s;
}
.roster-search:focus { border-color: var(--curacao); }
.roster-search::placeholder { color: var(--ink-label); }

/* ============ Dancer profile modal ============ */

.dmodal {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(58,65,71,.45);
  backdrop-filter: blur(6px);
}
.dmodal.open { display: flex; }

.dmodal-panel {
  background: var(--chalk-white);
  width: min(860px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 340px 1fr;
  animation: riseIn .5s cubic-bezier(.2,.6,.2,1) both;
}
.dmodal-photo { background: var(--mist-grey); overflow: hidden; }
.dmodal-photo img { width: 100%; height: 100%; object-fit: cover; min-height: 420px; }
@keyframes photoScaleIn {
  from { transform: scale(1.08); opacity: .4; }
  to   { transform: scale(1); opacity: 1; }
}
.dmodal.open .dmodal-photo img { animation: photoScaleIn .8s cubic-bezier(.2,.6,.2,1) both; }
.dmodal-info { padding: 48px 44px; position: relative; }
.dmodal-close {
  position: absolute;
  top: 20px; right: 24px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font);
  font-size: 9px;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 8px;
}
.dmodal-close:hover { color: var(--ink-strong); }
.dmodal-name {
  font-size: 26px;
  font-weight: 200;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--ink-strong);
  line-height: 1.2;
  padding-right: 60px;
}
.dmodal-name::after {
  content: '';
  display: block;
  width: 30px; height: 1px;
  background: var(--ink-strong);
  margin-top: 20px;
}
.dmodal-bio { font-size: 13.5px; line-height: 1.9; color: var(--ink); margin-top: 26px; }
/* The quick-view popup had no rule at all for its More info button, so it
   sat flush against the last line of the biography — measured gap: 0px.
   Same 34px the links row below it uses, so bio -> action reads as one
   rhythm whether or not the artist has a profile page to link to. */
.dmodal-more { margin-top: 34px; }
.dmodal-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.dmodal-links a {
  font-size: 9px;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  border: 1px solid var(--dove-grey);
  color: var(--ink-strong);
  padding: 11px 18px;
  transition: border-color .3s, background .3s;
}
.dmodal-links a:hover { border-color: var(--curacao); background: var(--ice-blue); }
.dmodal-links a { transition: border-color .3s, background .3s, transform .12s ease-out; }
.dmodal-links a:active { transform: scale(0.95); }
.dmodal-links a.primary { background: var(--ink-strong); color: var(--chalk-white); border-color: var(--ink-strong); }
.dmodal-links a.primary:hover { background: var(--ink); }

@media (max-width: 720px) {
  .dmodal-panel { grid-template-columns: 1fr; }
  .dmodal-photo img { min-height: 300px; max-height: 44vh; }
  .dmodal-info { padding: 34px 28px; }
}

/* ============ Access gate ============ */

body.gated { overflow: hidden; }
body.gated .main > *:not(.gate) { filter: blur(14px); pointer-events: none; user-select: none; }

.gate {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(230,241,246,.96), rgba(246,246,244,.96));
  transition: opacity .6s ease;
  padding: 24px;
}
.gate.gate-out { opacity: 0; pointer-events: none; }

.gate-panel {
  width: min(420px, 100%);
  background: var(--chalk-white);
  border: 1px solid var(--mist-grey);
  padding: 56px 48px;
  text-align: center;
}
.gate-panel .logo-block { width: 200px; margin: 0 auto 36px; }
.gate-title {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-strong);
}
.gate-sub {
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 12px;
  letter-spacing: var(--track-tight);
  line-height: 2;
}
.gate-panel form { margin-top: 36px; }
.gate-panel input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--dove-grey);
  padding: 10px 0 12px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 300;
  letter-spacing: .4em;
  text-align: center;
  color: var(--ink-strong);
  outline: none;
  transition: border-color .3s;
}
.gate-panel input:focus { border-color: var(--curacao); }
.gate-panel .btn { margin-top: 30px; width: 100%; justify-content: center; }
.gate-error {
  font-size: 10px;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: #b0766e;
  margin-top: 20px;
  min-height: 16px;
}
.gate-back {
  display: inline-block;
  margin-top: 26px;
  font-size: 9px;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-label);
}
.gate-back:hover { color: var(--ink-strong); }

@keyframes shakeX {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}
.gate-panel.shake { animation: shakeX .45s ease; }

/* Reduced motion: switch it all off */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .stagger > * { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ============ Responsive ============ */

@media (max-width: 1080px) {
  .roster { grid-template-columns: repeat(3, 1fr); }
  .newsgrid, .tiers, .team { grid-template-columns: repeat(2, 1fr); }
  .featured-bar { grid-template-columns: 1fr auto; }
  .fb-copy, .fb-arrows { display: none; }
}

@media (max-width: 860px) {
  .sidebar { display: none; }
  .topbar { display: flex; }
  .main { margin-left: 0; }
  .hero { padding-top: 64px; }
  /* The video is a wide 1920x1080 source; object-fit:cover centers it by
     default, cropping evenly from both sides on a narrow phone screen.
     Shifting the focal point left shows more of the left side of the
     footage instead of an even center-crop. Desktop is untouched. */
  .hero-bg video { object-position: 20% center; }
  /* absolutely-positioned hero elements ignore the hero's own padding,
     so they need pushing below the fixed 64px topbar explicitly */
  .hero-tag { top: 80px; max-width: 60%; line-height: 1.6; }
  .hero-badge { top: 96px; width: 76px; height: 76px; }
  .split, .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .stats { flex-wrap: wrap; gap: 30px 0; }
  .stat { padding: 0 30px; }
  .quote-band { grid-template-columns: 1fr; gap: 30px; }
  .workitem { grid-template-columns: 70px 1fr; }
  .workitem .wimg { display: none; }
  .workitem .wnum { font-size: 40px; }
  .section { padding: 80px 7vw; }
  .page-head { padding: 130px 7vw 56px; }

  /* Footer: stack instead of squeezing 3 columns */
  footer {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 56px 7vw 40px;
  }
  /* align-items left at its default (stretch) so each line can wrap to
     the full container width — flex-start would size spans to their
     unwrapped content width, pushing wide tracked text past the viewport */
  .footnote { flex-direction: column; gap: 12px; padding-top: 34px; }
  .footnote span { max-width: 100%; }

  /* Prevent iOS Safari auto-zooming on input focus (needs >=16px) */
  .field input, .field textarea, .roster-search { font-size: 16px; }

  /* Smoother momentum scrolling on touch devices */
  .mobile-menu, .dmodal-panel { -webkit-overflow-scrolling: touch; }
}

/* Mobile scroll cue — replaces the sidebar's "Scroll to explore" which
   is hidden along with the sidebar below 860px */
.mobile-scroll-cue {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 3;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-soft);
  animation: fadeIn 1.4s ease 1.1s both;
}
.mobile-scroll-cue .chev {
  width: 9px; height: 9px;
  border-right: 1px solid var(--ink-soft);
  border-bottom: 1px solid var(--ink-soft);
  transform: rotate(45deg);
  animation: chevBounce 1.6s ease-in-out infinite;
}
@keyframes chevBounce {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: .55; }
  50%      { transform: rotate(45deg) translate(3px, 3px); opacity: 1; }
}

@media (max-width: 860px) {
  .mobile-scroll-cue { display: flex; }
}

@media (max-width: 560px) {
  .roster, .newsgrid, .tiers, .team { grid-template-columns: repeat(2, 1fr); }
  .roster { gap: 16px; }
  .hero-badge { display: none; }
  .mobile-scroll-cue { bottom: 20px; }
}

/* ============ Roster tile refinements ============ */
/* Soft corners on artist photography, per the Job Posts section of the 2027
   guide ("soft curved corners reflecting the wider Dancers Inc. identity").
   Extended to the home page's photography (intro/circle split images,
   roster + news thumbnails) for visual consistency; full-bleed section
   backgrounds (e.g. the CTA band) stay square-cornered. */
.card .ph { border-radius: 14px; }
.split img { border-radius: 14px; }

/* Name on the left, where the artist is based on the right. */
.card .cfoot {
  margin-top: 16px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.card .cfoot .cname { margin-top: 0; }
.card .cfoot .cmeta {
  margin-top: 0;
  flex: none;
  text-align: right;
  text-transform: none;
  letter-spacing: var(--track-tight);
  font-size: 10px;
}

/* Lead copy sits beside the search on the roster page. */
.roster-lead { margin: 0; max-width: 560px; }
/* Give the column a real width. .roster-find is a shrink-to-fit flex item,
   so the search input's own min(300px, 100%) was resolving against the
   width of "138 artists" underneath it and clipping the placeholder. */
.roster-find {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: none;
  width: min(300px, 100%);
}
.roster-find .roster-search { width: 100%; }
.roster-find .roster-count { text-align: right; }

.dmodal-meta {
  margin-top: 10px;
  font-size: 10px;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-label);
}
.dmodal-meta:empty { display: none; }

/* ============ Page banner (full-bleed interior hero) ============ */

.page-banner {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(260px, 32vw, 430px);
  overflow: hidden;
  background: var(--mist-grey);
}
.page-banner-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-banner-scrim {
  position: absolute;
  inset: 0;
  /* Two washes: one from the left so the display type always has a ground,
     one from the base so the agency line stays legible on every frame of
     the loop. Both in Ink Strong — no black anywhere. */
  background:
    linear-gradient(100deg, rgba(58,65,71,.30) 0%, rgba(58,65,71,.08) 48%, rgba(58,65,71,0) 74%),
    linear-gradient(0deg,   rgba(58,65,71,.46) 0%, rgba(58,65,71,.14) 32%, rgba(58,65,71,0) 60%);
}
.page-banner-inner {
  position: relative;
  padding: 0 8vw clamp(30px, 3.6vw, 56px);
}
.page-banner .display {
  color: #fff;
  font-size: clamp(38px, 5.4vw, 74px);
}
.page-banner-sub {
  margin: 22px 0 0;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: clamp(11px, 1.05vw, 14px);
  font-weight: 500;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  /* Reversed over photography — the frame underneath changes as the loop
     runs, so this can't rely on a light ground the way a still would. */
  color: var(--chalk-white);
}
.page-banner-sub::before {
  content: '';
  flex: none;
  width: 30px;
  height: 2px;
  background: var(--curacao);
}
.page-banner-seal {
  position: absolute;
  top: clamp(22px, 3vw, 46px);
  right: clamp(22px, 4vw, 64px);
  width: 96px;
  height: 96px;
  border: 1px solid var(--curacao);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 9px;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--curacao);
}
.page-banner-seal::after {
  content: '';
  order: 1;
  width: 16px;
  height: 1px;
  margin: 7px 0;
  background: var(--curacao);
}
.page-banner-seal span { padding-left: var(--track-mid); }
.page-banner-seal span:last-child { order: 2; }

@media (max-width: 860px) {
  .roster-tools { align-items: flex-start; }
  .roster-lead { max-width: none; }
  .roster-find .roster-count { text-align: left; }
  .page-banner-seal { width: 74px; height: 74px; font-size: 8px; }
}
@media (max-width: 560px) {
  .page-banner-seal { display: none; }
  .card .cfoot { flex-direction: column; align-items: flex-start; gap: 3px; }
  .card .cfoot .cmeta { text-align: left; }
}

/* ============================================================
   THE BOLT
   ------------------------------------------------------------
   Path lifted verbatim from the vector art on p.9 of the
   DANCERS INC. REBRAND 2027 STYLE GUIDE — not traced. The
   viewBox is authoritative: keep `viewBox="0 0 787 1975"` on
   every instance and the two approved stroke weights scale
   correctly at any rendered size (at height H the 16-unit
   stroke lands at 16 x H / 1975 px, exactly as specified).

   Two stroke weights only — 16 for the three outline forms,
   40 for the two solid forms, which also take a fill.
   Default is outlined, no fill, round caps and joins.

   Five approved forms:
     .bolt--primary   Ink Strong on Chalk White
     .bolt--accent    Curacao on a tint band — ONE PER PAGE
     .bolt--reversed  Chalk White over photography
     .bolt--gradient  Charge gradient — favicon / app icon /
                      avatar, 48px and below only
     .bolt--knockout  single colour — embroidery, vinyl, print
   ============================================================ */

.bolt {
  display: block;
  height: 1em;
  width: calc(1em * 787 / 1975);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 16;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bolt--primary  { color: var(--ink-strong); }
.bolt--accent   { color: var(--curacao); }
.bolt--reversed { color: var(--chalk-white); }

.bolt--knockout { fill: currentColor; stroke-width: 40; }
.bolt--gradient { fill: url(#bolt-charge); stroke: url(#bolt-charge); stroke-width: 40; }

/* Standalone accent mark: sits above the eyebrow on a tint band.
   One per page — see the guide's Accent rule. */
.bolt-mark {
  /* Size matters here. The 16-unit stroke is in PATH units, so the rendered
     hairline is 16 x H / 1975 px - it only reaches a true 1px, the weight
     the rest of the system uses (the 34x1px section rule, the 1px seal
     border), at H = 1975/16 = 123px. Anything much under ~90px renders the
     outline as a sub-pixel ghost. Scale the mark, never the stroke. */
  font-size: clamp(88px, 9vw, 124px);
  margin-bottom: 24px;
}

/* ============================================================
   FULL PROFILE PAGE — one per roster entry, reached via the
   "More info" button on the quick-view popup. Sections below
   (tags / reel / portfolio / about / credits) are only present
   in the markup when the underlying data exists, so most pages
   today render just the head + profile + enquire band.
   ============================================================ */

[hidden] { display: none !important; }

.profile-back { display: inline-flex; margin: 150px 8vw 0; }

.profile-head {
  padding: 40px 8vw 80px;
  display: grid;
  grid-template-columns: minmax(0, 380px) 1fr;
  gap: 60px;
  align-items: start;
}
.profile-photo { aspect-ratio: 3 / 3.6; overflow: hidden; border-radius: 14px; background: var(--mist-grey); }
.profile-photo img { width: 100%; height: 100%; object-fit: cover; }

.profile-copy .eyebrow { margin-bottom: 20px; }
.profile-lead { margin-top: 24px; font-size: 15.5px; line-height: 1.8; color: var(--ink); max-width: 520px; }

.profile-meta { display: flex; flex-wrap: wrap; margin-top: 36px; }
.profile-meta .m { padding: 0 30px; border-left: 1px solid var(--dove-grey); }
.profile-meta .m:first-child { padding-left: 0; border-left: 0; }
.profile-meta .m b { display: block; font-size: 9px; font-weight: 400; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.profile-meta .m span, .profile-meta .m a { font-size: 13px; color: var(--ink-strong); }
.profile-meta .m a:hover { color: var(--curacao); }

.profile-cta { display: flex; gap: 18px 26px; flex-wrap: wrap; margin-top: 40px; align-items: center; }

.profile-tags { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 8vw 60px; margin-top: -40px; }
.tag { display: inline-block; padding: 8px 16px; font-size: 10px; letter-spacing: var(--track-mid); text-transform: uppercase; color: var(--ink-strong); background: var(--ice-blue); }

.profile-reel { position: relative; aspect-ratio: 16 / 9; background: var(--mist-grey); overflow: hidden; cursor: pointer; }
.profile-reel img, .profile-reel video, .profile-reel iframe { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; }
.profile-reel-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.profile-reel-play span {
  width: 72px; height: 72px; border-radius: 50%; border: 1px solid var(--chalk-white);
  display: grid; place-content: center; color: var(--chalk-white); font-size: 18px;
  background: rgba(58,65,71,.3); backdrop-filter: blur(2px); transition: transform .3s;
}
.profile-reel:hover .profile-reel-play span { transform: scale(1.08); }

.profile-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.profile-gallery img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; background: var(--mist-grey); }

.workitem--text { grid-template-columns: 60px 1fr auto; }
.workitem--text .wnum { font-size: 32px; }
.wyear { font-size: 10px; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }

.profile-enquire {
  margin: 0 8vw 100px;
  background: linear-gradient(90deg, var(--pool-blue), var(--ice-blue));
  padding: 40px clamp(24px, 4vw, 54px);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.profile-enquire .eyebrow { margin-bottom: 10px; }
.profile-enquire .t { font-size: clamp(16px, 2vw, 22px); font-weight: 300; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-strong); }

@media (max-width: 900px) {
  .profile-head { grid-template-columns: 1fr; }
  .profile-photo { max-width: 420px; }
}
@media (max-width: 720px) {
  .profile-back { margin-top: 120px; }
  .profile-meta .m { padding: 0 22px; }
  .profile-tags { margin-top: -20px; padding-bottom: 40px; }
}

/* ============================================================
   THE CIRCLE — sub-brand of Dancers Inc.
   Source: design-system/circle/ (tokens.css, tokens.json, notes.md)
   "Family resemblance lives in the type, the difference lives in
   the ink" — so this re-points the same shared components (page-head,
   eyebrow, lead, btn, stats, cta-band) at Circle Ink instead of
   rebuilding them. Curaçao stays shared — the guide keeps it as the
   accent rule colour on Circle pages too.
   ============================================================ */

.circle-page {
  --ink-strong: var(--circle-ink);
  --ink: var(--circle-slate);
  --ink-soft: var(--circle-steel);
  --silver-grey: var(--circle-steel);
  --dove-grey: var(--circle-silvermist);
  --chalk-white: var(--circle-light-azure);
  --bg: var(--circle-light-azure);
}
.circle-page .page-banner-scrim {
  background:
    linear-gradient(100deg, rgba(28,62,85,.44) 0%, rgba(28,62,85,.14) 48%, rgba(28,62,85,0) 74%),
    linear-gradient(0deg,   rgba(18,34,45,.58) 0%, rgba(18,34,45,.2) 32%, rgba(18,34,45,0) 60%);
}
.circle-page .tier.feature { background: linear-gradient(160deg, var(--ice-blue), var(--circle-light-azure)); }

.circle-mark { display: inline-block; color: var(--circle-ink); flex: none; }
.circle-mark svg { width: 100%; height: 100%; display: block; }
.circle-mark--eyebrow { width: 40px; height: 40px; margin-bottom: 18px; }


/* The tier disc — navy, Light Azure glyph. The hub's large version and the
   feature it sits in are further down under "Hub membership feature". */
.circle-tiericon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-content: center; background: var(--circle-ink); color: var(--circle-light-azure); }
.circle-tiericon svg { width: 28px; height: 28px; }

@media (max-width: 860px) {
  .circle-intro { grid-template-columns: 1fr !important; gap: 40px !important; }
  .circle-avatars { flex-direction: row; }
  .circle-avatars img { width: 96px; height: 96px; }
}


/* ── The Circle — hub & membership components ───────────────────────────────
   Added 7 Sept 2026 alongside the hub/membership split. Everything here is
   scoped under .circle-page so it can never leak onto a Dancers Inc. page. */

/* Ice Blue is a Dancers Inc. swatch and has no business in the Circle world.
   The Circle's own guide runs on Light Azure and Silvermist, so any tinted
   band inside .circle-page picks up a Circle value instead. Kept as an
   override rather than edited at source because Dancers Inc. pages still
   want the original. */
.circle-page .section-tint { background: #EAEEF0; }
.circle-page .section-tint-2 { background: #EAEEF0; }

.circle-page .circle-tiericon svg { display: block; }

/* Tier detail type — used by the hub's stage (the standalone membership page
   that first carried these went on 7 Sept 2026; git has it). */
.circle-page .circle-tnum {
  font-weight: 100;
  font-size: 13px;
  letter-spacing: var(--track-mid);
  color: var(--circle-steel-text);
  font-variant-numeric: tabular-nums;
}
.circle-page .circle-tname {
  font-weight: 200;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.1;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--circle-ink);
  margin: 6px 0 8px;
}
.circle-page .circle-tmeta {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--circle-steel-text);
}
.circle-page .circle-perks { list-style: none; margin: 28px 0 0; padding: 0; }
.circle-page .circle-perks li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 11px;
  font-size: 14.5px;
  line-height: 1.7;
}
.circle-page .circle-perks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .78em;
  width: 12px;
  height: 1px;
  background: var(--circle-silvermist);
}
.circle-page .circle-tbc {
  margin: 26px 0 0;
  font-size: 14px;
  color: var(--circle-steel-text);
  max-width: 560px;
}

@media (max-width: 860px) {
  .circle-page .circle-intro { grid-template-columns: 1fr; gap: 40px; }
}


/* A contact row arrived at from the footer's Bookings / Representation links
   gets a moment of Curacao so it's obvious which one you were sent to.
   :target only matches while the URL carries the fragment, so it fades on the
   next navigation without any JS. */
.contact-note p { scroll-margin-top: 100px; transition: color .4s ease; }
.contact-note p:target { color: var(--ink-strong); }
.contact-note p:target .who { color: var(--curacao); }
@media (prefers-reduced-motion: reduce) {
  .contact-note p { transition: none; }
}


/* ── The bolt, drawn ────────────────────────────────────────────────────────
   The mark is one closed path 5069.1 user units long (measured with
   getTotalLength on the authoritative path). Dash values are in the viewBox
   coordinate system, not pixels, so this single number is correct at every
   rendered size — a 28px bolt and a 124px bolt draw identically.

   No new JS: main.js already adds .vis to a .reveal element when it scrolls
   into view, so .bolt--draw simply reacts to that. It works whether .vis
   lands on the bolt itself or on an ancestor.

   Nothing here touches the geometry or the stroke weight. The guide forbids
   glow, spark, shadow and distortion, and a draw-on needs none of them. */

.bolt--draw {
  stroke-dasharray: 5070;
  stroke-dashoffset: 5070;
}
.bolt--draw.vis,
.vis .bolt--draw {
  stroke-dashoffset: 0;
  /* Slow out of the gate, decisive through the middle, settles rather than
     stops — the same soft ease the rest of the site moves on. */
  transition: stroke-dashoffset 1.5s cubic-bezier(.76, 0, .24, 1);
}

/* The two solid forms carry a fill, which can't be drawn. So the outline
   draws first and the fill washes in behind it, arriving as the line closes. */
.bolt--draw.bolt--knockout,
.bolt--draw.bolt--gradient { fill-opacity: 0; }
.bolt--draw.bolt--knockout.vis, .vis .bolt--draw.bolt--knockout,
.bolt--draw.bolt--gradient.vis, .vis .bolt--draw.bolt--gradient {
  fill-opacity: 1;
  transition: stroke-dashoffset 1.5s cubic-bezier(.76, 0, .24, 1),
              fill-opacity .55s ease 1s;   /* lands as the outline closes */
}

/* Where a bolt sits inside a link or button, the draw repeats on hover —
   a second reading of the same gesture, not a new one. */
.bolt--draw.bolt--hover { transition: none; }
a:hover > .bolt--draw.bolt--hover,
button:hover > .bolt--draw.bolt--hover {
  animation: boltDraw 1.1s cubic-bezier(.76, 0, .24, 1);
}
@keyframes boltDraw {
  from { stroke-dashoffset: 5070; }
  to   { stroke-dashoffset: 0; }
}

/* Motion is a flourish here, never the thing that makes the mark legible:
   with reduced motion the bolt is simply present, fully drawn, immediately. */
@media (prefers-reduced-motion: reduce) {
  .bolt--draw,
  .bolt--draw.vis,
  .vis .bolt--draw {
    stroke-dashoffset: 0;
    fill-opacity: 1;
    transition: none;
    animation: none;
  }
}


/* ── The Circle — community network ─────────────────────────────────────────
   The one full Circle Ink band on the page. Everything else on The Circle
   sits on Light Azure, so this is where the page goes quiet and dark and the
   roster does the talking. Behaviour lives in js/network.js. */

.circle-page .circle-netband {
  /* Light Azure, like the rest of The Circle. The portraits are black and
     white, so on a pale ground they read as a constellation of faces rather
     than a lit sign — quieter, and truer to the 70% Light Azure ratio the
     guide asks for. Link and ring colours in js/network.js are tuned to
     match; changing this ground means changing those too. */
  background: var(--circle-light-azure);
  /* Sits directly under the banner as the page's opening statement, so the
     top padding is tighter than a mid-page band would take. */
  padding: clamp(38px, 4.5vw, 68px) 0 clamp(30px, 4vw, 56px);
  overflow: hidden;
}
.circle-page .circle-nethead {
  padding: 0 8vw;
  max-width: 780px;
}

.circle-page .circle-network {
  position: relative;
  margin-top: clamp(24px, 3vw, 44px);
  /* Taller than it was: the field is now a circle rather than filling the
     band, and the circle's radius is set by the shorter side — so height is
     what decides how big the crowd can be. */
  height: clamp(520px, 82vh, 880px);
  /* A circular feather, concentric with the field, so the rim of the crowd
     softens instead of ending on a hard edge. */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 62%, transparent 96%);
          mask-image: radial-gradient(circle at 50% 50%, #000 62%, transparent 96%);
}
.circle-page .circle-network canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .9s ease;
  touch-action: pan-y;      /* never trap a scrolling finger */
}
.circle-page .circle-network canvas.is-ready { opacity: 1; }

/* The name of whoever the cursor is over. Positioned by left/top from JS;
   the centring offset lives here. */
.circle-page .circle-netname {
  position: absolute;
  transform: translate(-50%, -190%);
  pointer-events: none;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  /* Inverted against the light ground, so the name reads instantly without
     competing with 138 portraits. */
  color: var(--circle-light-azure);
  background: var(--circle-ink);
  padding: 6px 12px;
  border-radius: 999px;
}

/* There is no cursor on a phone — don't tell a thumb to move one. Gated on
   width as well as pointer type: some browsers and emulators still report
   hover:hover on a touch device, and the stacked layout below 900px is the
   touch layout regardless. */
.on-hover-only { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 901px) {
  .on-hover-only { display: inline; }
}

@media (max-width: 760px) {
  .circle-page .circle-network { height: clamp(420px, 62vh, 600px); }
  .circle-page .circle-nethead { padding: 0 6vw; }
}


/* ── The Circle — network hero ──────────────────────────────────────────────
   The page opens on the whole roster rather than a photograph. The crowd is
   biased to the right (see data-bias in the markup) so the title has clean
   air beside it instead of type sitting over faces — no scrim needed, which
   keeps the portraits crisp. Under 900px the layout stacks and the network
   re-centres itself. */

.circle-page .circle-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(620px, 92vh, 1000px);
  /* Vertical padding, not just a min-height. When the copy is taller than the
     min-height the section grows to fit it — with no padding that put the
     mark hard against the top edge and the Membership button against the
     bottom. The padding is inside the min-height, so a short hero is
     unaffected. */
  padding: clamp(56px, 8vh, 104px) 0;
  background: var(--circle-light-azure);
  overflow: hidden;
}
.circle-page .circle-hero-net {
  position: absolute;
  inset: 0;
  /* Spans the padding as well — the ring should be laid out against the whole
     section, not the padded box the copy sits in. */
}
.circle-page .circle-hero-net canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.1s ease;
  touch-action: pan-y;
}
.circle-page .circle-hero-net canvas.is-ready { opacity: 1; }

.circle-page .circle-hero-inner {
  position: relative;
  z-index: 2;
  padding: 0 8vw;
  max-width: 620px;
  /* The title must never eat the cursor — the crowd underneath has to stay
     reachable right up to the edge of the type. */
  pointer-events: none;
}
.circle-page .circle-hero-inner a { pointer-events: auto; }

.circle-page .circle-mark--hero { width: 54px; height: 54px; margin-bottom: 24px; }
.circle-page .circle-hero .eyebrow { color: var(--circle-steel-text); margin-bottom: 18px; }
.circle-page .circle-dot { color: var(--curacao); margin: 0 .35em; }   /* the bullets in Creative • Connection • Community */
.circle-page .circle-hero .display { color: var(--circle-ink); }
.circle-page .circle-hero-sub {
  margin: 26px 0 0;
  font-size: clamp(18px, 1.8vw, 23px);
  font-weight: 200;
  line-height: 1.4;
  letter-spacing: var(--track-tight);
  max-width: 460px;
  color: var(--circle-ink);
}
.circle-page .circle-hero-lead {
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 1.8;
  max-width: 420px;
  color: var(--circle-slate);
}
.circle-page .circle-hero-fine {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.7;
  max-width: 420px;
  color: var(--circle-steel-text);
}
.circle-page .circle-hero-cta {
  margin-top: 38px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.circle-page .circle-hero .page-banner-seal {
  color: var(--circle-steel-text);
  border-color: var(--circle-silvermist);
  z-index: 2;
}
.circle-page .circle-hero .page-banner-seal::after { background: var(--circle-silvermist); }

@media (max-width: 900px) {
  /* Stacked: title first, then the crowd beneath it at full width. The net
     is first in the DOM because on desktop it is absolutely positioned and
     order is irrelevant — here it isn't, so `order` puts the title back on
     top rather than reshuffling the markup for one breakpoint. */
  .circle-page .circle-hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: clamp(40px, 8vw, 72px) 0 clamp(24px, 5vw, 44px);
  }
  .circle-page .circle-hero-inner { order: 0; max-width: none; padding: 0 6vw; }
  .circle-page .circle-hero-net {
    order: 1;
    position: relative;
    inset: auto;
    /* Square, so the disc — whose radius comes off the shorter side — fills
       its box instead of floating in a tall one. */
    aspect-ratio: 1;
    width: 100%;
    margin-top: 30px;
  }
}


/* ── The Circle — closing band ──────────────────────────────────────────────
   No photograph. The Dancers Inc. version leans on an image with an Ice Blue
   scrim over it; here the page ends on the mark and the words, centred, with
   a hairline holding it apart from the membership box above. Quieter, and it
   ends on the Circle's own symbol rather than on a dancer. */

.circle-page .cta-band--mark {
  background: none;
  text-align: center;
  padding: clamp(96px, 11vw, 150px) 8vw;
  border-top: 1px solid var(--circle-silvermist);
}
.circle-page .cta-band--mark::before { content: none; }   /* the scrim goes with the photo */
/* 23ch lands the break after CIRCLE — two lines, not three with HERE. adrift
   on its own. */
.circle-page .cta-band--mark .h-section { max-width: 23ch; margin-inline: auto; }
/* h-section's underline rule is set left by default; centre it with the type. */
.circle-page .cta-band--mark .h-section::after { margin-inline: auto; }
.circle-page .cta-band--mark .lead { margin-inline: auto; }
.circle-page .circle-mark--close {
  width: 46px;
  height: 46px;
  margin: 0 auto 34px;
  display: block;
  color: var(--circle-ink);
}

/* ============ Instagram feed (News page) ============ */

.ighead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  margin-top: 20px;
}

/* Instagram crops square; the editorial news card is 4:3. */
.igcard .nimg { aspect-ratio: 1; }

.igmeta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 8px;
}
.igmeta .ndate { margin: 0; }
.igmeta .arr {
  margin-left: auto;
  color: var(--ink-label);
  transition: transform .35s, color .35s;
}
.igcard:hover .igmeta .arr { transform: translateX(5px); color: var(--ink-strong); }

/* Square-cornered tint block, per the guide's Tag element. */
.igtag {
  padding: 4px 9px;
  font-size: 8px;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--grey-azure);
  background: var(--ice-blue);
}

/* Captions come from Instagram in sentence case — set as body copy rather
   than the uppercase .ntitle, and clamped to two lines so a long caption
   can't push one card taller than its row. */
.igcaption {
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .35s;
}
.igcard:hover .igcaption { color: var(--ink-strong); }

@media (max-width: 860px) {
  .ighead { align-items: flex-start; }
}

/* ==========================================================================
   The Circle — membership tier icon motion (7 Sept 2026)
   Disc never moves; everything happens inside it (overflow:hidden is the hard
   guarantee). Catalyst and Legacy are 3D models drawn by js/main.js into the
   <canvas>; the SVG glyph underneath is the no-JS / reduced-motion fallback.
   See design-system/circle/notes.md, "Tier icon motion".
   ========================================================================== */
.circle-tiericon { position: relative; overflow: hidden; perspective: 260px; }
/* The audience line's selector once matched the icon span too and turned the
   hub glyphs steel-grey; the guide's render is Light Azure, so pin it. */
.circle-tierdisc .circle-tiericon { color: var(--circle-light-azure); }
.circle-tiericon svg { overflow: visible; }
.circle-tiericon path, .circle-tiericon g, .circle-tiericon rect { transform-box: fill-box; transform-origin: center; }
.circle-tiericon canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.circle-tiericon.is-3d svg { display: none; }

/* Origin — outer swoosh orbits; inner rings breathe */
.circle-tiericon--origin .or-outer { animation: or-turn 24s linear infinite; }
.circle-tiericon--origin .or-inner { animation: or-breathe 6s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes or-turn { to { transform: rotate(360deg); } }
@keyframes or-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }

/* Infinity — small figure-8 drift; two Curaçao lights travel the loop half a lap apart */
.circle-tiericon--infinity .inf-glyph { animation: inf-drift 7s linear infinite; }
.circle-tiericon--infinity .inf-spark { animation: inf-spark 7s linear infinite; }
.circle-tiericon--infinity .inf-spark2 { animation: inf-spark 7s linear infinite; animation-delay: -3.5s; }
@keyframes inf-drift {
  0% { transform: translate(2.6px,0); } 12.5% { transform: translate(1.85px,1.2px); } 25% { transform: translate(0,0); }
  37.5% { transform: translate(-1.85px,-1.2px); } 50% { transform: translate(-2.6px,0); } 62.5% { transform: translate(-1.85px,1.2px); }
  75% { transform: translate(0,0); } 87.5% { transform: translate(1.85px,-1.2px); } 100% { transform: translate(2.6px,0); }
}
@keyframes inf-spark {   /* x = 50 + 30cos t, y = 50 + 9sin 2t, in SVG units */
  0% { transform: translate(80px,50px); } 12.5% { transform: translate(71.2px,59px); } 25% { transform: translate(50px,50px); }
  37.5% { transform: translate(28.8px,41px); } 50% { transform: translate(20px,50px); } 62.5% { transform: translate(28.8px,59px); }
  75% { transform: translate(50px,50px); } 87.5% { transform: translate(71.2px,41px); } 100% { transform: translate(80px,50px); }
}

/* Apex — ascend & settle, with a light catching the face as it rises */
.circle-tiericon--apex .ap-glyph { animation: ap-rise 6.4s cubic-bezier(.42,0,.18,1) infinite; }
.circle-tiericon--apex .ap-glint { animation: ap-glint 6.4s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes ap-rise {
  0% { transform: translateY(0) scale(1); } 28% { transform: translateY(-4.5px) scale(1.05); }
  42% { transform: translateY(-4.5px) scale(1.05); } 78% { transform: translateY(0) scale(1); } 100% { transform: translateY(0) scale(1); }
}
@keyframes ap-glint { 0%,6% { transform: translateX(-70px); } 34%,100% { transform: translateX(90px); } }

/* Haven — breath of light with a soft halo behind the star */
.circle-tiericon--haven .hv-star { animation: hv-breathe 4.6s cubic-bezier(.45,0,.55,1) infinite; }
.circle-tiericon--haven .hv-halo { animation: hv-halo 4.6s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes hv-breathe { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .6; transform: scale(.95); } }
@keyframes hv-halo { 0%,100% { opacity: .38; } 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .circle-tiericon * { animation: none !important; }
}

/* ==========================================================================
   The Circle — hub membership feature (7 Sept 2026, evening)
   Six discs on the bare page ground: no grid, no borders, no cards. Each disc
   is a tab; hover previews the tier in the stage beneath, click pins it. The
   discs tilt to face the cursor and their glyphs parallax against the tilt —
   js/main.js writes --rx/--ry (tilt), --px/--py (glyph shift) and
   --lx/--ly/--lo (a light that follows the pointer across the face). The
   disc still never *moves*: it turns in place and everything stays inside it.
   ========================================================================== */
.circle-tierfeature { margin-top: 60px; }
.circle-tierrow { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.circle-tierdisc {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 16px 4px 12px; margin: 0; border: 0; background: none; font: inherit; cursor: pointer;
  text-decoration: none; outline: none; color: inherit;
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent;
}
.circle-tierdisc b { margin-top: 24px; font-size: 11px; letter-spacing: var(--track-mid); text-transform: uppercase; color: var(--circle-ink); font-weight: 400; transition: color .35s; }
.circle-tieraud { margin-top: 6px; font-size: 10.5px; color: var(--circle-steel-text); line-height: 1.5; }

/* The orb wrapper carries the hover lift and the selected ring; the disc inside
   carries the cursor tilt. Splitting them keeps a smooth eased scale on one
   element and per-frame JS transforms on the other from fighting. */
.circle-tierorb {
  position: relative; display: block; border-radius: 50%; perspective: 640px;
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
}
.circle-tierorb::before {           /* pinned: a hairline Curaçao ring, held off the disc */
  content: ''; position: absolute; inset: -9px; border-radius: 50%;
  border: 1px solid var(--curacao); opacity: 0; transform: scale(.9);
  transition: opacity .4s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
.circle-tierdisc.is-pinned .circle-tierorb::before { opacity: 1; transform: scale(1); }
.circle-tierdisc.is-on b { color: var(--circle-ink); }
.circle-tierdisc:not(.is-on):not(:hover) b { color: var(--circle-slate); }
.circle-tierdisc:hover .circle-tierorb,
.circle-tierdisc:focus-visible .circle-tierorb { transform: scale(1.08); }
.circle-tierdisc:active .circle-tierorb { transform: scale(1.04); transition-duration: .18s; }

.circle-tiericon--xl {
  width: clamp(84px, 9.4vw, 136px); height: clamp(84px, 9.4vw, 136px);
  perspective: 420px; will-change: transform;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  box-shadow: 0 0 0 0 rgba(126,144,157,0), 0 22px 40px -28px rgba(18,34,45,0);
  transition: box-shadow .5s cubic-bezier(.2,.7,.2,1);
}
.circle-tierdisc:hover .circle-tiericon--xl,
.circle-tierdisc:focus-visible .circle-tiericon--xl {
  box-shadow: 0 0 0 7px rgba(126,144,157,.16), 0 30px 50px -24px rgba(18,34,45,.55);
}
/* Sized by inset, not width/height — the disc is display:grid and its content
   box is auto, so a percentage size on the svg has nothing to resolve against
   and collapses to nothing. */
.circle-tiericon--xl > svg { position: absolute; inset: 28%; width: auto; height: auto; }
.circle-tiericon--xl > svg, .circle-tiericon--xl > canvas { transform: translate(var(--px, 0px), var(--py, 0px)); }
.circle-tiericon--xl::after {       /* the light — a soft sheen that tracks the pointer */
  content: ''; position: absolute; inset: 0; border-radius: 50%; z-index: 2; pointer-events: none;
  background: radial-gradient(circle at var(--lx, 50%) var(--ly, 50%), rgba(255,255,255,.17), rgba(255,255,255,0) 58%);
  opacity: var(--lo, 0); transition: opacity .35s ease;
}
.circle-tiericon--xl[data-3d] { cursor: grab; }
.circle-tiericon--xl.is-dragging { cursor: grabbing; }

/* The stage: every panel sits in the same grid cell so the block is always as
   tall as the tallest tier and the page never jumps as you move along the row. */
.circle-tierstage { display: grid; margin-top: 54px; padding-top: 46px; border-top: 1px solid var(--circle-silvermist); }
.circle-tierdetail {
  grid-area: 1 / 1; display: grid; grid-template-columns: minmax(200px, 280px) 1fr;
  gap: 24px clamp(28px, 5vw, 80px); align-items: start;
  transition: opacity .5s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1), visibility 0s linear .5s;
}
.circle-tierdetail.is-on { transition-delay: 0s, 0s, 0s; }
.circle-tierdetail:not(.is-on) { opacity: 0; visibility: hidden; transform: translateY(14px); pointer-events: none; }
.circle-tierdetail-head .circle-tname { margin: 8px 0 10px; }
.circle-tierdetail-head .textlink { display: inline-block; margin-top: 26px; }
.circle-page .circle-tierdetail .circle-perks { margin: 4px 0 0; }
.circle-page .circle-tierdetail .circle-perks li { font-size: 15px; }
.circle-page .circle-tierdetail .circle-tbc { margin: 4px 0 0; }

/* What the membership page's intro and "not sure?" section used to say, in
   one breath under the stage. */
.circle-tierfoot { margin-top: 56px; padding-top: 34px; border-top: 1px solid var(--circle-silvermist); max-width: 640px; }
.circle-tierfoot p { margin: 0 0 22px; font-size: 14.5px; line-height: 1.75; color: var(--circle-slate); }

@media (max-width: 1040px) {
  .circle-tierrow { grid-template-columns: repeat(3, 1fr); gap: 18px 12px; }
  .circle-tiericon--xl { width: clamp(96px, 16vw, 136px); height: clamp(96px, 16vw, 136px); }
  .circle-tierdetail { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 620px) {
  .circle-tierrow { gap: 14px 6px; }
  .circle-tiericon--xl { width: clamp(78px, 22vw, 110px); height: clamp(78px, 22vw, 110px); }
  .circle-tierdisc b { margin-top: 16px; font-size: 10px; }
  .circle-tieraud { display: none; }   /* audience line lives in the panel's meta at this width */
  .circle-tierstage { margin-top: 40px; padding-top: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .circle-tierorb, .circle-tierorb::before, .circle-tiericon--xl, .circle-tierdetail { transition: none; }
  .circle-tierdetail:not(.is-on) { transform: none; }
}

/* ==========================================================================
   The Circle — the four points of the Circle (hub, between hero and classes)
   One Circle mark, drawn large: TRAIN / CONNECT / ACCESS / BELONG sit at the
   compass points on the ring and one panel of copy shows at a time on the
   left. A Curaçao quarter-arc (the sweep) rests on the active point and
   turns to the next; the tick ring behind it never stops turning. Cursor
   over the stage picks the nearest point; left alone it cycles. js/main.js
   ("circle points"). Under 620px the mark goes and all four panels show.
   ========================================================================== */
.circle-points { padding-top: 40px; }
.cpoints { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 44%); gap: 56px; align-items: center; }
.cpoints-panels { display: grid; margin-top: 36px; }
.cp-panel {
  grid-area: 1 / 1;
  transition: opacity .5s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1), visibility 0s linear .5s;
}
.cp-panel.is-on { transition-delay: 0s, 0s, 0s; }
.cp-panel:not(.is-on) { opacity: 0; visibility: hidden; transform: translateY(12px); pointer-events: none; }
.cp-panel .circle-tname { margin: 8px 0 14px; }
.cp-panel p { margin: 0; font-size: 16px; line-height: 1.8; max-width: 440px; color: var(--circle-slate); }

.cpoints-stage { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1 / 1; margin: 0 auto; padding: 40px; box-sizing: border-box; }
.cpoints-mark {
  width: 100%; height: 100%; display: block; overflow: visible;
  transform: translate(var(--px, 0px), var(--py, 0px));
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.cp-ring  { fill: none; stroke: var(--circle-silvermist); stroke-width: .7; }
.cp-ticks {
  fill: none; stroke: var(--circle-silvermist); stroke-width: .55; stroke-dasharray: .5 3.35; opacity: .8;
  transform-box: view-box; transform-origin: 50% 50%; animation: cp-turn 120s linear infinite;
}
@keyframes cp-turn { to { transform: rotate(360deg); } }
.cp-sweep { fill: none; stroke: var(--curacao); stroke-width: 1.4; stroke-linecap: round; }
.cp-disc  { fill: var(--circle-ink); }
.cp-spoke { stroke: var(--circle-silvermist); stroke-width: .5; opacity: .55; transition: stroke .45s, opacity .45s; }
.cp-spoke.is-on { stroke: var(--curacao); opacity: 1; }
.cp-dot { fill: var(--circle-light-azure); stroke: var(--circle-silvermist); stroke-width: .6; transition: fill .45s, stroke .45s; }
.cp-dot.is-on { fill: var(--curacao); stroke: var(--curacao); }

.cp-label {
  position: absolute; margin: 0; padding: 6px 8px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 400; letter-spacing: var(--track-mid); text-transform: uppercase;
  color: var(--circle-steel-text); transition: color .35s; outline: none; -webkit-tap-highlight-color: transparent;
}
.cp-label:hover, .cp-label:focus-visible { color: var(--circle-slate); }
.cp-label.is-on { color: var(--circle-ink); }
.cp-label:focus-visible { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--curacao); }
.cp-label--n { top: 0;    left: 50%; transform: translateX(-50%); }
.cp-label--s { bottom: 0; left: 50%; transform: translateX(-50%); }
.cp-label--e { left: calc(100% - 26px);  top: 50%; transform: translateY(-50%); white-space: nowrap; }   /* clear of the ring, hanging past the stage */
.cp-label--w { right: calc(100% - 26px); top: 50%; transform: translateY(-50%); white-space: nowrap; }

@media (max-width: 1040px) {
  .cpoints { grid-template-columns: 1fr; gap: 28px; }
  .cpoints-stage { order: -1; max-width: 400px; }
}
@media (max-width: 620px) {
  .cpoints-stage { display: none; }
  .cpoints-panels { grid-template-columns: 1fr 1fr; gap: 30px 22px; margin-top: 30px; }
  .cp-panel { grid-area: auto; }
  .cp-panel:not(.is-on) { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
  .cp-panel .circle-tname { font-size: 22px; }
  .cp-panel p { font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .cp-ticks { animation: none; }
  .cpoints-mark, .cp-panel { transition: none; }
  .cp-panel:not(.is-on) { transform: none; }
}

/* ==========================================================================
   The Circle — classes, led by the roster (hub, on the tint band)
   This season's leads as a small ring of faces that turns very slowly, each
   face counter-turning so it stays upright; the Circle mark at the centre.
   Pure CSS. The Education page carries the full ring with its focus panel.
   ========================================================================== */
.cclasses { display: grid; grid-template-columns: minmax(280px, 40%) minmax(0, 1fr); gap: 64px; align-items: center; }
.cclasses-ring { position: relative; width: 100%; max-width: 360px; aspect-ratio: 1 / 1; margin: 0 auto; }
.cclasses-ring::before {                        /* the ring the faces sit on */
  content: ''; position: absolute; inset: 7%; border-radius: 50%;
  border: 1px solid var(--circle-silvermist);
}
.cring { position: absolute; inset: 0; animation: cring-turn 150s linear infinite; }
.cface {
  position: absolute; left: var(--x); top: var(--y); width: var(--s); aspect-ratio: 1 / 1;
  translate: -50% -50%;             /* centring via the separate property, so the counter-turn's transform can't clobber it */
  border-radius: 50%; overflow: hidden; display: block;
  background: var(--circle-silvermist); box-shadow: 0 0 0 3px #EAEEF0;   /* the tint band it sits on */
  animation: cring-turn 150s linear infinite reverse;   /* stays upright as the ring turns */
  transition: box-shadow .35s, filter .35s;
}
.cface img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1); transition: filter .35s; }
a.cface:hover { box-shadow: 0 0 0 3px #EAEEF0, 0 0 0 4px var(--curacao); z-index: 2; }
a.cface:hover img { filter: grayscale(0); }
@keyframes cring-turn { to { transform: rotate(360deg); } }
.circle-mark--cring { position: absolute; left: 50%; top: 50%; width: 15%; height: 15%; transform: translate(-50%, -50%); }

@media (max-width: 1040px) { .cclasses { grid-template-columns: 1fr; gap: 36px; } .cclasses-ring { max-width: 300px; } }
@media (prefers-reduced-motion: reduce) { .cring, .cface { animation: none; } }

/* Visually hidden, but still in the accessibility tree and still focusable —
   used for the Circle network's artist list, since a <canvas> can't be
   reached by keyboard. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.sr-only a:focus-visible {
  position: fixed;
  top: 12px;
  left: 12px;
  width: auto;
  height: auto;
  clip: auto;
  clip-path: none;
  padding: 10px 16px;
  background: var(--chalk-white);
  border: 1px solid var(--ink-strong);
  color: var(--ink-strong);
  font-size: 11px;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  z-index: 500;
}

/* ==========================================================================
   Homepage — the community network in the I.N.C. Circle promo (7 Sept 2026)
   The same canvas the Circle hub uses (js/network.js), standing in for the
   still photo that was there before. The hub's rules are scoped to
   .circle-page and stay that way; these are the standalone equivalents, so
   the two can be tuned independently. No data-avoid here — there is no type
   over the field, so the disc just centres in its own column.
   ========================================================================== */
.home-net {
  position: relative;
  aspect-ratio: 1 / 1;
  /* The field is a circle; a square box lets it breathe without the section
     growing taller than the copy beside it. */
}
.home-net canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.1s ease;
  touch-action: pan-y;      /* never trap a scrolling finger */
}
.home-net canvas.is-ready { opacity: 1; }

/* The name of whoever the cursor is over — the pill from the hub, unscoped.
   Homepage nodes are not links (no CIRCLE_LINKS off the hub), so this is
   the whole of the interaction: hover a face, read the name. */
.home-net .circle-netname {
  position: absolute;
  transform: translate(-50%, -190%);
  pointer-events: none;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--circle-light-azure);
  background: var(--circle-ink);
  padding: 6px 12px;
  border-radius: 999px;
}

@media (hover: none) {
  .home-net .circle-netname { display: none; }
}

@media (max-width: 900px) {
  /* Stacked, the square would be a full-width hole in the page. */
  .home-net { aspect-ratio: 4 / 3; }
}

/* The pin. The section is three screens tall and its stage sticks to the top,
   so for two screens of scrolling the page holds still and the scroll turns
   the drum instead — you cannot get past the roster without seeing all four.
   Height and travel are the only two numbers; js/main.js reads them off the
   element rather than being told, so changing the height here is enough.

   Under prefers-reduced-motion the pin would be two screens of nothing
   happening, so it collapses back to an ordinary section. */
@media (prefers-reduced-motion: reduce) {
}

/* ==========================================================================
   Homepage "Our Roster" — the scroll drum (7 Sept 2026)

   Each bar's depth, softness and opacity all derive from ONE number: how many
   rows it sits from a focus line at 55% of the viewport. js/main.js writes it
   per row as --drum-d (signed, for direction) and --drum-a (magnitude). At the
   line a row is full strength; a row away it has receded, faded and softened;
   beyond that it is gone — so you see the one before and the one after and no
   further. Namespaced because plain --d is the stagger reveal's transition
   delay, written by main.js on these same children.

   Scoped to .worklist--drum on purpose: .workitem is also the Selected
   Credits list on artist profile pages, which must stay a flat list.

   No JS, or JS that fails: --drum-d and --drum-a stay 0, every row renders at
   full opacity, and the section is exactly what it was before.

   Samuel's settings, 7 Sept: no tilt, 45px depth, .58 fade, .1px softness,
   10px lift, focus line at 55% (the last of those lives in main.js).
   ========================================================================== */
.worklist--drum {
  perspective: 1400px;
  perspective-origin: 50% 50%;
  /* Positioned so the rows' offsetParent is definitely this list: main.js
     reads offsetTop to place them, and a different offsetParent silently
     shifts every measurement. */
  position: relative;
}
.worklist--drum .workitem {
  /* Namespaced: plain --d is the stagger reveal's transition delay, written
     by main.js on these very children. Sharing the name broke it. */
  --drum-d: 0;   /* rows from the focus line, signed */
  --drum-a: 0;   /* the same, unsigned */
  position: relative;
  transform-origin: 50% 50%;
  /* No transition. `.stagger > *` puts .8s on opacity and transform, and these
     rows are driven by scroll position every frame — eased, the drum lags most
     of a second behind the page and reads as sluggish. The list still fades in
     on arrival: its parent .worklist carries .reveal, which handles that. */
  transition: none;
  transform:
    translateY(calc(var(--drum-d) * -10px))
    translateZ(calc(var(--drum-a) * -45px));
  /* Floored at .5. CLAMP in main.js lets --drum-a reach 1.6, which at the old
     .58 multiplier took a passed row to 7% opacity - Dancers and Creatives,
     the two most important links on the homepage, were unreadable for most of
     the time the section was on screen. The drum still reads; it just no
     longer erases the rows behind it. */
  opacity: max(.5, calc(1 - var(--drum-a) * .5));
  filter: blur(calc(var(--drum-a) * .1px));
}

/* A row faded to near-nothing is still tabbable, so a keyboard user must
   never be sent somewhere they cannot see. */
.worklist--drum .workitem:focus-visible,
.worklist--drum .workitem:focus-within {
  transform: none;
  opacity: 1;
  filter: none;
}

/* A Curaçao hairline draws the full width of the bar as it arrives and
   retreats as it leaves. --f rides the same scroll position as everything
   else, so it is welded to the scroll rather than being a timed animation. */
.worklist--drum .workitem::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  height: 1px;
  width: calc(var(--drum-f, 0) * 100%);
  background: var(--curacao);
}
.worklist--drum .workitem:last-child::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 1px;
  width: calc(var(--drum-f, 0) * 100%);
  background: var(--curacao);
}

/* Stacked, the rows lose their image and get shorter, so more of them fall
   outside the focus band and the same numbers wash out three links out of
   four. These are the desktop feel, roughly halved — still a drum, but every
   row stays readable and tappable. Blur is cut hardest: it is the one part
   that costs a repaint per scroll frame. */
@media (max-width: 900px) {
  /* Stacked, the rows lose their image and shorten, so the same distance in
     pixels is further in rows and the list washes out faster. Only the fade
     needs easing — the tilt is already off and the blur is a tenth of a pixel. */
  .worklist--drum .workitem {
    transform:
      translateY(calc(var(--drum-d) * -6px))
      translateZ(calc(var(--drum-a) * -30px));
    opacity: calc(1 - var(--drum-a) * .40);
  }
}

@media (prefers-reduced-motion: reduce) {
  .worklist--drum .workitem {
    transform: none;
    opacity: 1;
    filter: none;
  }
  .worklist--drum .workitem::before,
  .worklist--drum .workitem:last-child::after { width: 0; }
}

/* ==========================================================================
   Homepage — the Circle lead-in (7 Sept 2026)

   Row 04 of the roster IS I.N.C — The Circle, and the very next section is the
   Circle promo, so the two were naming the same thing twice with a dead gap
   between them. The Circle mark now sits after the 04 title, and once 04
   reaches the focus line it leaves the row, travels down with the scroll and
   grows into the community network's own ring — the promo arrives as that
   bloom rather than as a new slab.

   js/main.js drives it; everything here is either the resting state or the
   flying state. No JS, or reduced motion: the mark just sits after the title
   and the network is visible as it always was.
   ========================================================================== */
.circle-lead {
  display: inline-block;
  width: 17px;
  height: 17px;
  margin-left: 14px;
  vertical-align: -2px;
  position: relative;
}
.circle-lead-mark {
  position: absolute;
  inset: 0;
  color: var(--circle-ink);
}
.circle-lead-mark svg { width: 100%; height: 100%; display: block; }
/* The ring is the part the mark and the network have in common, so it is what
   survives the flight: the core dissolves early and the ring lands on the
   network's own drawn ring, which makes the swap invisible. */
.circle-lead-mark .cl-core { opacity: var(--cl-core, 1); }

/* In flight: out of flow, positioned every frame from scroll position. The
   slot above stays in the row and keeps its size, so the start point can still
   be measured off it. No transition — this tracks the scroll, and an eased
   value would lag behind the page (the mistake the drum rows made). */
.circle-lead-mark.is-flying {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 3;
  transition: none;
  pointer-events: none;
}

/* While the lead-in owns the reveal, the network's own fade is off — its
   opacity is written per frame instead, and a 1.1s transition on top of that
   would smear it. */
.home-net.is-led canvas { transition: none; }


/* ── Profile: the fitness section ───────────────────────────────────────────
   Flash has credentials rather than prose, so the section takes lists as well
   as paragraphs. Two columns where there's room, one on a phone. */

.profile-speclist { margin-top: 30px; }
.profile-speclist .eyebrow { margin-bottom: 14px; }
.profile-speclist ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 34px;
}
.profile-speclist li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
}
.profile-speclist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 7px;
  height: 1px;
  background: var(--curacao);
}
@media (max-width: 700px) {
  .profile-speclist ul { grid-template-columns: 1fr; }
}


/* ── Fitness Professionals ──────────────────────────────────────────────────
   The film, then the roster as pillars rather than a grid: five tall narrow
   panels in a row, left to right. The one under the cursor widens and the
   others give way, which is what lets a panel this narrow still carry a name
   and a discipline. .card comes along on each pillar so js/roster.js binds to
   them exactly as it does on the dancers grid — same quick-view, same
   click-through, no second implementation. */

/* Copy on the left, the film on the right, sharing the opening screen —
   rather than the film sitting underneath where it read as an afterthought. */
.fit-head { padding-bottom: 90px; }
/* minmax(0, ...) is load-bearing: "PROFESSIONALS" is one unbreakable word and
   at the default display size its min-content width is wider than half the
   row, so a plain 1fr 1fr let the text column shove the film down to a
   thumbnail. Capping the type and letting the columns shrink fixes it. */
.fit-head .split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.fit-head .display { font-size: clamp(32px, 3.5vw, 52px); }
.fit-head .lead { margin-top: 30px; }
.fit-head p { max-width: 46ch; }

.fit-film {
  border-radius: 18px;
  overflow: hidden;
  background: var(--mist-grey);
}
.fit-film video {
  display: block;
  width: 100%;
  /* Cropped to a portrait window rather than shown at its native 16:9. Beside
     a column of type, a wide letterbox reads as a small floating rectangle;
     a taller window holds the eye and matches the height of the copy. */
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
@media (max-width: 900px) {
  /* Stacked, there is nothing to match its height to — give the frame back. */
  .fit-film video { aspect-ratio: 16 / 9; }
}

.fit-pillars {
  display: flex;
  gap: 12px;
  align-items: stretch;
  height: clamp(400px, 58vh, 640px);
}
.fit-pillars .fit-pillar {
  /* flex-basis 0 with equal grow keeps them even; the grow value is what the
     hover animates, so the row's total width never changes. */
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--mist-grey);
  cursor: pointer;
  font-family: var(--font);
  text-align: left;
  /* A hairline inside the radius. Without it a portrait with a pale
     background loses its corners against the page and that pillar reads as
     a different height to its neighbours — they are identical, it is the
     photograph tricking the eye. */
  box-shadow: inset 0 0 0 1px rgba(58, 65, 71, .10);
  transition: flex-grow .55s cubic-bezier(.2,.6,.2,1);
}
.fit-pillars .fit-pillar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Push into the face, not the middle of the frame. 34% down is roughly
     where the eyes sit in these portraits — the same reasoning as
     FACE_ANCHOR in tools/build_network_atlas.py, which uses 0.38 for a
     square crop. Scaling from the centre pulled the face UP and out of the
     pillar, which is what made it feel like a lurch rather than a lean-in. */
  transform-origin: 50% 34%;
  transition: transform .7s cubic-bezier(.2,.6,.2,1);
}
/* The film, for the artists who have one. It sits over the still and fades in
   on hover; the still stays put underneath so there is never a black frame or
   a jump. object-fit: cover crops it to whatever shape the pillar currently
   is — the subjects are centre frame, so the crop costs nothing.
   It is under ::after and the foot label, both of which come later in the
   box's paint order, so the scrim and the name stay on top. */
.fit-pillars .fit-pillar video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchored to the top, not centred. The films are 3:4; an expanded pillar
     is wider than that, so `cover` fills the width and trims the height —
     and centred that took a slice off the TOP, where the faces are. Anchored
     top, whatever has to go comes off the bottom (floor and mat) instead.
     Collapsed, the pillar is far narrower than the film, so `cover` fills
     the height and only the sides are trimmed; this changes nothing there. */
  object-position: 50% 0;
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
.fit-pillars .fit-pillar.is-playing video { opacity: 1; }
/* The still no longer needs to breathe once the film is doing the moving. */
.fit-pillars .fit-pillar.is-playing img { transform: none; }

/* A scrim only at the foot — the portraits stay clean everywhere else. */
.fit-pillars .fit-pillar::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 45%;
  background: linear-gradient(to top, rgba(58,65,71,.78), rgba(58,65,71,0));
  pointer-events: none;
}
.fit-pillar-foot {
  position: absolute;
  left: 18px; right: 14px; bottom: 18px;
  z-index: 2;
  display: block;
}
.fit-pillar-name {
  display: block;
  font-size: 12px;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: #fff;
}
.fit-pillar-role {
  display: block;
  margin-top: 7px;
  font-size: 9.5px;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  /* Held back until there is width to read it in. */
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .45s ease, transform .45s ease;
}

@media (hover: hover) and (pointer: fine) {
  .fit-pillars:hover .fit-pillar { flex-grow: .78; }
  .fit-pillars .fit-pillar:hover { flex-grow: 2.1; }
  /* 1.02, not 1.04: the pillar is already widening under the cursor, so the
     image only needs to breathe with it, not perform. */
  .fit-pillars .fit-pillar:hover img { transform: scale(1.02); }
}
.fit-pillars .fit-pillar:hover .fit-pillar-role,
.fit-pillars .fit-pillar:focus-visible .fit-pillar-role { opacity: 1; transform: none; }
.fit-pillars .fit-pillar:focus-visible { outline: 2px solid var(--curacao); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .fit-pillars .fit-pillar,
  .fit-pillars .fit-pillar img,
  .fit-pillar-role { transition: none; }
}

/* Five pillars on a phone would be slivers, so the row keeps its character
   and becomes a swipeable strip instead of collapsing into a grid. */
@media (max-width: 900px) {
  .fit-head .split { grid-template-columns: 1fr; gap: 38px; }
  .fit-head p { max-width: none; }
}

@media (max-width: 860px) {
  .fit-pillars {
    height: clamp(340px, 52vh, 460px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .fit-pillars .fit-pillar {
    flex: 0 0 auto;
    width: clamp(150px, 46vw, 220px);
    scroll-snap-align: center;
  }
  .fit-pillar-role { opacity: 1; transform: none; }
}

/* ==========================================================================
   The Circle — its own world (8 Sept 2026)
   the-circle.html no longer uses the Dancers Inc. shell. No sidebar, no site
   nav: the outlined Dancers Inc. pill top-left is the way home, and the
   hairline row at the very end (.cw-exit) is the way on. Behind everything
   sits one fixed canvas (.cw-dive, js/dive.js) holding the roster with
   depth — scrolling is the camera. The content is a series of stops
   (.cw-stop), each a full viewport; no veils — the crowd flows round each
   one's copy so nothing sits behind the type (js/dive.js). Light Azure ground
   throughout; the departure is the missing shell and the dive, not colour.
   ========================================================================== */
.circle-world { background: var(--circle-light-azure); overflow-x: clip; }
.circle-world .cw-main { position: relative; z-index: 1; }

.cw-dive { position: fixed; inset: 0; z-index: 0; }
.cw-dive canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s ease; }
.cw-dive canvas.is-ready { opacity: 1; }
.cw-dive .circle-netname { position: absolute; z-index: 3; transform: translate(-50%, -100%); }   /* dive.js places it just above the face */
.cw-dive::after {                    /* a soft vignette: the crowd melts into the ground at the very edge of the screen */
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(farthest-side at center, rgba(243,244,245,0) 68%, rgba(243,244,245,.55) 92%, rgba(243,244,245,.8) 100%);
}

/* Top-left: a back arrow and the Dancers Inc. pill as an outline — the mark
   is still here, the site is not. Both leave. */
.cw-top { position: fixed; top: 26px; left: 30px; z-index: 6; display: flex; align-items: center; gap: 10px; }
.cw-back {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; box-sizing: border-box;
  border: 1px solid var(--circle-ink); color: var(--circle-ink);
  background: rgba(243,244,245,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background-color .35s, box-shadow .35s, transform .35s;
}
.cw-back svg { width: 18px; height: 18px; display: block; }
.cw-back:hover, .cw-back:focus-visible { background: rgba(243,244,245,.92); box-shadow: 0 0 0 4px rgba(126,144,157,.18); transform: translateX(-2px); outline: none; }
.cw-brand {
  display: block; width: 150px; padding: 11px 22px; box-sizing: border-box;
  border: 1px solid var(--circle-ink); border-radius: 999px;
  background: rgba(243,244,245,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background-color .35s, box-shadow .35s;
}
.cw-brand img { display: block; width: 100%; height: auto; }
.cw-brand:hover, .cw-brand:focus-visible { background: rgba(243,244,245,.92); box-shadow: 0 0 0 4px rgba(126,144,157,.18); outline: none; }

/* Stops. Two kinds. The title and the mark (.cw-stop--zoom) are 180vh tall
   and hold a sticky, viewport-high frame: the copy stands still, zooms in,
   holds, and grows large before it goes, with no veil — the faces flow
   round it instead (js/dive.js). Everything after is a plain viewport-high
   stop whose copy moves at half the scroll and grows as it arrives, on a
   veil. The frame lets the pointer through to the crowd; only the copy
   catches it. */
.cw-stop { position: relative; min-height: 100vh; min-height: 100svh; pointer-events: none; }
.cw-stop--zoom { min-height: 180vh; }
.cw-frame { height: 100vh; height: 100svh; display: grid; place-items: center; padding: 8vh 8vw; box-sizing: border-box; pointer-events: none; }
.cw-stop--zoom .cw-frame { position: sticky; top: 0; }
.cw-frame > * { pointer-events: auto; }
.cw-card { position: relative; isolation: isolate; width: 100%; max-width: 1120px; transform-origin: 50% 50%; will-change: transform, opacity; }
/* The stops grow from the middle (js/dive.js places them each frame), so the
   site's scroll-reveal must not add a second motion on top. */
.circle-world .reveal, .circle-world .stagger > * { opacity: 1; transform: none; transition: none; }
/* No veil. Every stop's copy is a clearing in the crowd — js/dive.js keeps
   the faces (and the words) flowing round it, so nothing sits behind the
   type and it needs no ground of its own. */
.cw-card > .section { padding: 0; }          /* the stop pads; the inner sections don't */
.cw-card .section-tint { background: none; } /* no bands inside the world — the veil is the ground */
.cw-card .circle-points { padding-top: 0; }

/* Opening: nothing but the crowd. The scroll cue is fixed at the foot of the
   screen for the whole journey, and goes only at the very end. */
.cw-stop--open { min-height: 100vh; min-height: 100svh; }
.cw-scrollcue { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 10px; letter-spacing: var(--track-mid); text-transform: uppercase; color: var(--circle-steel-text); transition: opacity .5s; pointer-events: none; }
.cw-scrollcue span { display: block; width: 1px; height: 44px; background: var(--circle-silvermist); position: relative; overflow: hidden; }
.cw-scrollcue span::after { content: ''; position: absolute; left: 0; top: -44px; width: 1px; height: 44px; background: var(--circle-ink); animation: cw-cue 2.2s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes cw-cue { to { top: 44px; } }
.is-at-end .cw-scrollcue { opacity: 0; }

/* The title: one line, on its own, arriving letter by letter once the stop
   zooms in (dive.js adds .is-in as the card passes a third of its fade). */
.cw-card--title { max-width: none; width: auto; text-align: center; }
.cw-card--title .display {
  color: var(--circle-ink); margin: 0; white-space: nowrap;
  font-size: clamp(26px, 6vw, 124px); letter-spacing: .12em; line-height: 1.1;   /* 6vw: the line is ~13.3em, so it fits 80vw at any width */
}
.cw-title span { display: inline-block; opacity: 0; transform: translateY(.35em); filter: blur(6px); }
.is-in .cw-title span { animation: cw-letter .9s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i) * 45ms + 120ms); }
@keyframes cw-letter { to { opacity: 1; transform: none; filter: blur(0); } }

/* The mark: alone on its stop, arriving on the zoom. */
.cw-card--mark { max-width: none; width: auto; display: grid; place-items: center; }
.cw-end-cta { justify-content: center; margin-top: 44px; }
.circle-mark--world { width: clamp(150px, 24vw, 300px); height: clamp(150px, 24vw, 300px); color: var(--circle-ink); }

/* The intro stop. */
.cw-card--intro { max-width: 720px; }
.cw-card--intro .cw-question { margin-bottom: 26px; }
.cw-card--intro .circle-hero-sub { margin-top: 0; }
.cw-card--intro .circle-hero-lead { max-width: 480px; }

/* Wide stops carry the existing components as they are. */
.cw-card--wide { max-width: 1120px; }

/* The end: the waitlist, then the way out. */
.cw-card--end { max-width: 820px; text-align: center; }
.circle-world .cta-band--mark { border-top: 0; padding: 0 0 56px; }
.cw-exit { border-top: 1px solid var(--circle-silvermist); padding-top: 34px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.cw-exit-label { font-size: 10px; letter-spacing: var(--track-mid); text-transform: uppercase; color: var(--circle-steel-text); }
.cw-exit-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 28px; }
.cw-exit-links a { font-size: 11px; letter-spacing: var(--track-mid); text-transform: uppercase; color: var(--circle-slate); text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; transition: color .3s, border-color .3s; }
.cw-exit-links a:hover, .cw-exit-links a:focus-visible { color: var(--circle-ink); border-bottom-color: var(--curacao); outline: none; }

/* Stepping in and out: the page fades, then the address changes (js/main.js). */
body { transition: opacity .45s ease; }
body.is-leaving { opacity: 0; pointer-events: none; }
body.circle-world { animation: cw-enter 1.1s ease both; }
@keyframes cw-enter { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 860px) {
  .cw-top { top: 16px; left: 16px; gap: 8px; }
  .cw-back { width: 38px; height: 38px; }
  .cw-brand { width: 124px; padding: 9px 18px; }
  /* No sticky on a phone or tablet: a stop can be several screens of copy,
     so every stop is as tall as its copy (at least a screen) and scrolls.
     The opening keeps its full screen — nothing but the disc. */
  .cw-stop:not(.cw-stop--open) { min-height: 0; }
  .cw-stop--open { min-height: 150vh; min-height: 150svh; }   /* room for the ring to leave before the title arrives */
  .cw-stop--zoom .cw-frame { position: static; }
  .cw-frame { height: auto; min-height: 100vh; min-height: 100svh; padding: 10vh 6vw; }
  .is-diving .cw-scrollcue { opacity: 0; }   /* the line would sit on the copy; once they've scrolled, they know */
  .cw-title span { animation-delay: calc(var(--i) * 30ms + 80ms); }
}
@media (prefers-reduced-motion: reduce) {
  .cw-scrollcue span::after { animation: none; }
  .cw-title span { opacity: 1; transform: none; filter: none; animation: none; }
  body { transition: none; }
  body.circle-world { animation: none; }
}

/* ---------- The Circle: progress rail (js/circle-rail.js) ----------------
   Desktop: dots on a hairline down the left edge, filling with the scroll.
   Labels show on hover/focus, and the current one surfaces for ~1.6s when it
   changes. <=860px: a pill bottom-right that opens the list. */
.cw-rail { position: fixed; z-index: 6; left: 30px; top: 50%; transform: translateY(-50%); }
.cw-rail-track { position: absolute; left: 21px; top: 22px; bottom: 22px; width: 1px; background: var(--circle-silvermist); }
.cw-rail-fill { position: absolute; inset: 0; background: var(--circle-ink); transform-origin: top; transform: scaleY(0); }
.cw-rail-list { list-style: none; margin: 0; padding: 0; position: relative; }
.cw-rail-item {
  display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 12px 0 16px;
  background: none; border: 0; cursor: pointer; font: inherit; color: inherit;
}
.cw-rail-dot {
  width: 11px; height: 11px; border-radius: 50%; box-sizing: border-box; flex: none;
  border: 1px solid var(--circle-ink); background: var(--circle-light-azure);
  transform: scale(.64); transition: transform .45s cubic-bezier(.2,.7,.2,1), background-color .35s, box-shadow .35s;
}
.cw-rail-item.is-past .cw-rail-dot { background: var(--circle-ink); }
.cw-rail-item.is-on .cw-rail-dot { transform: scale(1); background: var(--circle-ink); box-shadow: 0 0 0 4px rgba(126,144,157,.35); }
.cw-rail-item:hover .cw-rail-dot, .cw-rail-item:focus-visible .cw-rail-dot { transform: scale(1); }
.cw-rail-label {
  font-size: 10px; letter-spacing: var(--track-mid); text-transform: uppercase; white-space: nowrap;
  color: var(--circle-steel-text); opacity: 0; transform: translateX(-6px);
  transition: opacity .35s, transform .45s cubic-bezier(.2,.7,.2,1), color .35s;
}
.cw-rail-item.is-on .cw-rail-label { color: var(--circle-ink); }
.cw-rail:hover .cw-rail-label, .cw-rail:focus-within .cw-rail-label,
.cw-rail.is-flash .cw-rail-item.is-on .cw-rail-label { opacity: 1; transform: none; }
.cw-rail-item:focus-visible { outline: none; }
.cw-rail-item:focus-visible .cw-rail-label { text-decoration: underline; text-underline-offset: 4px; }
.cw-rail-pill { display: none; }

@media (max-width: 860px) {
  .cw-rail { left: auto; top: auto; transform: none; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); }
  .cw-rail-track { display: none; }
  .cw-rail-pill {
    display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 16px 0 11px; margin-left: auto;
    border: 1px solid var(--circle-ink); border-radius: 999px; color: var(--circle-ink); cursor: pointer;
    background: rgba(243,244,245,.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    font: inherit; font-size: 10px; letter-spacing: var(--track-mid); text-transform: uppercase;
  }
  .cw-rail-ring { width: 18px; height: 18px; transform: rotate(-90deg); }
  .cw-rail-ring circle { fill: none; stroke: var(--circle-silvermist); stroke-width: 1.5; }
  .cw-rail-ring .cw-rail-ringfill { stroke: var(--circle-ink); stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linecap: round; }
  .cw-rail-count { color: var(--circle-steel-text); }
  .cw-rail-list {
    position: absolute; right: 0; bottom: 52px; min-width: 200px; padding: 8px 0;
    background: rgba(243,244,245,.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid var(--circle-silvermist); border-radius: 16px;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .3s, transform .4s cubic-bezier(.2,.7,.2,1), visibility 0s .4s;
  }
  .cw-rail.is-open .cw-rail-list { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .cw-rail-item { width: 100%; height: 44px; padding: 0 20px; }
  .cw-rail-label, .cw-rail:hover .cw-rail-label { opacity: 1; transform: none; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .cw-rail-dot, .cw-rail-label, .cw-rail-list { transition: none; }
}

/* The Circle page: the way across to the Circle's own site (inccircleworld.com) */
.cw-site { margin: 28px 0 0; text-align: center; }
.cw-site a { font-size: 11px; letter-spacing: var(--track-mid); text-transform: uppercase; color: var(--circle-ink); text-decoration: none; padding-bottom: 6px; border-bottom: 1px solid var(--circle-silvermist); transition: border-color .3s; }
.cw-site a:hover, .cw-site a:focus-visible { border-bottom-color: var(--circle-ink); outline: none; }
.cw-site .arr { margin-left: 8px; }