/* ============================================================
   MXW · Kinetic design system for medexecwomen.org
   Loaded site-wide by Squarespace Code Injection. Everything is
   inert until mxw.js mounts a page and adds body.mxw-on, so pages
   without a mount are untouched. Source of truth for the look:
   website-revamp/app/src/explorations/kinetic/styles.css.
   ============================================================ */

/* Fonts are injected as <link> tags by mxw.js (not @import here) so this
   stylesheet applies the moment it arrives instead of waiting on Fontshare. */

:root {
  --k-bg: #06060c;
  --k-bg-2: #0c0c16;
  --k-panel: rgba(255, 255, 255, 0.045);
  --k-panel-2: rgba(255, 255, 255, 0.07);
  --k-border: rgba(255, 255, 255, 0.12);
  --k-border-2: rgba(255, 255, 255, 0.22);
  --k-text: #edecf5;
  --k-text-2: #a7a6c4;
  --k-text-3: #807fa3;   /* 5.3:1 on the canvas, ~4.8:1 on a panel — small meta stays AA */
  --k-indigo: #3a63f2;
  --k-violet: #2f80e6;
  --k-magenta: #10b8cf;
  --k-cyan: #22d3ee;
  --k-teal: #2df0c4;
  --k-display: "Clash Display", "General Sans", system-ui, sans-serif;
  --k-sans: "General Sans", system-ui, -apple-system, sans-serif;
  --k-mono: "Space Grotesk", ui-monospace, "SF Mono", monospace;
  --mxw-header-h: 90px;
}

/* ============================================================
   1. SQUARESPACE INTEGRATION — only while a page is mounted
   ============================================================ */
body.mxw-on {
  background: var(--k-bg) !important;
  color: var(--k-text);
}
body.mxw-on #siteWrapper,
body.mxw-on .site-wrapper {
  background: transparent !important;
  position: relative;
  z-index: 1;
}

/* the section that holds the mount: no chrome, no padding, no min-height */
body.mxw-on .page-section.mxw-section,
body.mxw-on .page-section.mxw-section .section-border,
body.mxw-on .page-section.mxw-section .content-wrapper,
body.mxw-on .page-section.mxw-section .content {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  width: 100% !important;
}
body.mxw-on .page-section.mxw-section .section-background,
body.mxw-on .page-section.mxw-section .section-border::after {
  display: none !important;
}
body.mxw-on .page-section.mxw-section .fluid-engine {
  display: block !important;
  padding: 0 !important;
  gap: 0 !important;
}
body.mxw-on .page-section.mxw-section .fe-block {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
}
body.mxw-on .page-section.mxw-section .sqs-block,
body.mxw-on .page-section.mxw-section .sqs-block-content {
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
}
body.mxw-on [data-mxw] {
  display: block;
  width: 100%;
}
/* auto-mounted pages replace the whole regions article */
body.mxw-on #page-regions > [data-mxw] {
  width: 100%;
}

/* header: transparent over the canvas, glassy once scrolled */
body.mxw-on #header,
body.mxw-on #header .header-announcement-bar-wrapper,
body.mxw-on #header .header-inner,
body.mxw-on #header .header-background,
body.mxw-on #header .header-dropshadow,
body.mxw-on #header .header-border {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
body.mxw-on #header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  transition: background 0.4s ease, border-color 0.4s ease;
}
body.mxw-on.mxw-scrolled #header .header-announcement-bar-wrapper {
  background: rgba(6, 6, 12, 0.6) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--k-border) !important;
}
/* never put a filter on #header itself: it would become the containing block for
   Squarespace's position:fixed mobile menu and trap it inside the header box */
body.mxw-on #header { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
body.mxw-on.header--menu-open #header .header-announcement-bar-wrapper {
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.mxw-on #header .header-title-text a,
body.mxw-on #header .header-title-logo a {
  font-family: var(--k-display) !important;
  font-weight: 600 !important;
  font-size: 19px !important;
  letter-spacing: -0.01em !important;
  color: var(--k-text) !important;
  text-transform: none !important;
}
body.mxw-on #header .header-nav-item a,
body.mxw-on #header .header-nav-folder-item a,
body.mxw-on #header .header-menu-nav-item a {
  font-family: var(--k-mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--k-text-2) !important;
  transition: color 0.2s ease;
}
body.mxw-on #header .header-nav-item a:hover,
body.mxw-on #header .header-nav-item--active a {
  color: var(--k-text) !important;
}
body.mxw-on #header .header-nav-folder-content {
  background: rgba(6, 6, 12, 0.92) !important;
  border: 1px solid var(--k-border);
  border-radius: 12px;
}
body.mxw-on #header .header-menu {
  background: var(--k-bg) !important;
}
body.mxw-on #header .header-menu-nav-item a {
  font-family: var(--k-display) !important;
  font-size: clamp(28px, 6vw, 44px) !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  color: var(--k-text) !important;
}
body.mxw-on #header .header-burger .burger-inner .top-bun,
body.mxw-on #header .header-burger .burger-inner .patty,
body.mxw-on #header .header-burger .burger-inner .bottom-bun {
  background-color: var(--k-text) !important;
}

/* footer sits on the same canvas */
body.mxw-on #footer-sections .page-section,
body.mxw-on #footer-sections .section-border {
  background: transparent !important;
}
body.mxw-on #footer-sections .section-background {
  display: none !important;
}
body.mxw-on #footer-sections {
  border-top: 1px solid var(--k-border);
  position: relative;
  z-index: 1;
}
body.mxw-on #footer-sections,
body.mxw-on #footer-sections p,
body.mxw-on #footer-sections a {
  color: var(--k-text-2);
}

/* ============================================================
   2. THE CANVAS — fixed mesh + grain + vignette + spotlight
   ============================================================ */
.mxw-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--k-bg);
}
.mxw-mesh {
  position: absolute;
  inset: -20%;
  filter: blur(60px) saturate(1.3);
  opacity: 0.9;
  transform: translate3d(calc(var(--px, 0) * 22px), calc(var(--py, 0) * 22px), 0);
}
.mxw-mesh span {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
}
.mxw-mesh span:nth-child(1) { width: 46vw; height: 46vw; left: 4%; top: 2%;
  background: radial-gradient(circle, var(--k-indigo), transparent 62%);
  animation: mxw-drift1 22s ease-in-out infinite; }
.mxw-mesh span:nth-child(2) { width: 42vw; height: 42vw; right: 2%; top: 8%;
  background: radial-gradient(circle, var(--k-magenta), transparent 62%);
  animation: mxw-drift2 26s ease-in-out infinite; }
.mxw-mesh span:nth-child(3) { width: 48vw; height: 48vw; left: 22%; bottom: -6%;
  background: radial-gradient(circle, var(--k-teal), transparent 62%);
  animation: mxw-drift3 30s ease-in-out infinite; }
.mxw-mesh span:nth-child(4) { width: 36vw; height: 36vw; right: 16%; bottom: 6%;
  background: radial-gradient(circle, var(--k-violet), transparent 62%);
  animation: mxw-drift1 24s ease-in-out infinite reverse; }
@media (max-width: 780px) {
  .mxw-mesh span:nth-child(1) { width: 115vw; height: 115vw; left: -25%; top: -4%; }
  .mxw-mesh span:nth-child(2) { width: 105vw; height: 105vw; right: -30%; top: 14%; }
  .mxw-mesh span:nth-child(3) { width: 125vw; height: 125vw; left: -25%; bottom: -12%; }
  .mxw-mesh span:nth-child(4) { width: 95vw; height: 95vw; right: -25%; bottom: 14%; }
}
@keyframes mxw-drift1 { 50% { transform: translate(8%, 12%) scale(1.15); } }
@keyframes mxw-drift2 { 50% { transform: translate(-10%, 8%) scale(1.1); } }
@keyframes mxw-drift3 { 50% { transform: translate(6%, -10%) scale(1.2); } }
.mxw-grain {
  position: absolute;
  inset: 0;
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-repeat: repeat;
  background-size: 150px 150px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.mxw-veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 0%, transparent 40%, rgba(6, 6, 12, 0.55) 100%);
}
.mxw-spot {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.7s ease;
  mix-blend-mode: screen;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 15%),
    rgba(124, 134, 255, 0.14), rgba(45, 240, 196, 0.06) 40%, transparent 72%);
}
@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  .mxw-spot { display: none; }
}

/* ============================================================
   3. THE PAGE — everything below is scoped under .mxw
   ============================================================ */
.mxw {
  position: relative;
  z-index: 1;
  color: var(--k-text);
  font-family: var(--k-sans);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: left;
}
.mxw *, .mxw *::before, .mxw *::after { box-sizing: border-box; }
.mxw img { max-width: 100%; display: block; }
.mxw a { color: inherit; text-decoration: none; }
.mxw ::selection { background: var(--k-teal); color: #04121a; }
.mxw :focus-visible { outline: 2px solid var(--k-teal); outline-offset: 3px; }
.mxw p { margin: 0; }
.mxw h1, .mxw h2, .mxw h3 {
  font-family: var(--k-display);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0;
  color: inherit;
}

.mxw-wrap {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 52px);
}

/* furniture */
.mxw-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--k-mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--k-text-2);
  padding: 7px 14px;
  border: 1px solid var(--k-border);
  border-radius: 100px;
  background: var(--k-panel);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.mxw-chip::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--k-teal);
  box-shadow: 0 0 10px var(--k-teal);
  animation: mxw-pulse 2.4s ease-in-out infinite;
}
@keyframes mxw-pulse { 50% { opacity: 0.35; } }
.mxw-grad {
  background: linear-gradient(100deg, var(--k-cyan), var(--k-indigo) 34%, var(--k-violet) 62%, var(--k-magenta));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: mxw-shift 8s ease-in-out infinite;
}
@keyframes mxw-shift { 50% { background-position: 100% 0; } }

.mxw-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--k-mono);
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 15px 26px;
  border-radius: 100px;
  color: #05060c !important;
  background: linear-gradient(100deg, var(--k-cyan), var(--k-teal));
  border: 0;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(45, 240, 196, 0.4), 0 14px 40px -12px rgba(45, 240, 196, 0.6);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease;
  will-change: transform;
}
.mxw-btn:hover { box-shadow: 0 0 0 1px rgba(45, 240, 196, 0.7), 0 20px 54px -12px rgba(45, 240, 196, 0.8); }
.mxw-btn .arw { transition: transform 0.25s ease; }
.mxw-btn:hover .arw { transform: translateX(3px); }
.mxw-btn--ghost {
  color: var(--k-text) !important;
  background: var(--k-panel);
  border: 1px solid var(--k-border-2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: none;
}
.mxw-btn--ghost:hover { background: var(--k-panel-2); box-shadow: 0 14px 40px -18px rgba(124, 134, 255, 0.7); }
.mxw-mag { display: inline-flex; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.mxw-link {
  font-family: var(--k-mono);
  font-size: 12.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--k-text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--k-border-2);
  padding-bottom: 3px;
  transition: color 0.25s ease, gap 0.25s ease, border-color 0.25s ease;
}
.mxw-link:hover { color: var(--k-teal); border-color: var(--k-teal); gap: 13px; }

/* reveal */
.mxw [data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.mxw [data-reveal].is-in { opacity: 1; transform: none; }
/* without JS nothing would ever reveal — so only hide when the runtime is present */
html:not(.mxw-js) .mxw [data-reveal] { opacity: 1; transform: none; }

/* hero */
.mxw-hero {
  min-height: min(92vh, 900px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: calc(var(--mxw-header-h) + clamp(40px, 8vh, 100px)) clamp(40px, 7vh, 90px);
}
.mxw-hero__eyebrow { margin-bottom: 30px; }
.mxw-hero__title {
  font-size: clamp(48px, 11vw, 160px);
  line-height: 0.9;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.mxw-hero__title .l { display: block; overflow: hidden; }
.mxw-hero__title .l > span {
  display: block;
  transform: translateY(102%);
  animation: mxw-rise 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.mxw-hero__title .l:nth-child(2) > span { animation-delay: 0.12s; }
.mxw-hero__title .l:nth-child(3) > span { animation-delay: 0.24s; }
@keyframes mxw-rise { to { transform: translateY(0); } }
.mxw-swapped .mxw-hero__title .l > span { animation: none; transform: none; }
.mxw-hero__foot {
  margin-top: clamp(34px, 5vw, 56px);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  flex-wrap: wrap;
}
.mxw-hero__lede {
  font-size: clamp(16px, 1.7vw, 20px);
  line-height: 1.55;
  color: var(--k-text-2);
  max-width: 40ch;
}
.mxw-hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* marquee */
.mxw-mq {
  display: flex;
  overflow: hidden;
  user-select: none;
  padding-block: 26px;
  border-block: 1px solid var(--k-border);
  background: rgba(255, 255, 255, 0.02);
}
.mxw-mq__track {
  display: flex;
  flex: 0 0 auto;
  min-width: 100%;
  align-items: center;
  animation: mxw-marq 30s linear infinite;
}
.mxw-mq__item {
  font-family: var(--k-display);
  font-weight: 600;
  font-size: clamp(20px, 3vw, 40px);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  padding-inline: 26px;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px var(--k-text-3);
  display: inline-flex;
  align-items: center;
  gap: 26px;
}
.mxw-mq__item::after { content: "\25C6"; -webkit-text-stroke: 0; color: var(--k-teal); font-size: 12px; }
@keyframes mxw-marq { to { transform: translateX(-100%); } }

/* sections */
.mxw-sec { padding-block: clamp(64px, 9vw, 130px); }
/* in-page links (#programme, #board, #recap …): the header is fixed, so anchor targets
   must stop below it — section padding alone is thinner than the header on phones */
.mxw [id] { scroll-margin-top: calc(var(--mxw-header-h) + 12px); }
.mxw-sec__head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.mxw-sec__title { font-size: clamp(32px, 5vw, 68px); margin-top: 20px; }
.mxw-sec__lede {
  margin-top: 20px;
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--k-text-2);
  max-width: 54ch;
  line-height: 1.6;
}

/* stats */
.mxw-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.mxw-stat {
  padding: 26px 24px;
  border: 1px solid var(--k-border);
  border-radius: 20px;
  background: var(--k-panel);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}
.mxw-stat::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 0% 0%, rgba(124, 134, 255, 0.18), transparent 55%);
  pointer-events: none;
}
.mxw-stat__n {
  font-family: var(--k-display);
  font-weight: 600;
  font-size: clamp(44px, 6vw, 78px);
  line-height: 0.92;
  letter-spacing: -0.02em;
}
.mxw-stat__l {
  margin-top: 14px;
  font-family: var(--k-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--k-text-2);
  line-height: 1.5;
}

/* focus cards */
.mxw-focus { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.mxw-card {
  position: relative;
  padding: 32px 28px;
  border-radius: 22px;
  border: 1px solid var(--k-border);
  background: var(--k-panel);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;
  min-height: 300px;
  display: flex;
  flex-direction: column;
}
.mxw-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, var(--k-cyan), var(--k-magenta));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.mxw-card:hover { transform: translateY(-6px); border-color: transparent; }
.mxw-card:hover::after { opacity: 1; }
.mxw-card__n { font-family: var(--k-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--k-teal); }
.mxw-card__t { font-family: var(--k-display); font-weight: 600; font-size: 26px; margin-top: 18px; }
.mxw-card__t--cyan { color: var(--k-cyan); }
.mxw-card__t--teal { color: var(--k-teal); }
.mxw-card__t--indigo { color: #7c9cff; }
.mxw-card__b { margin-top: 14px; color: var(--k-text-2); font-size: 15px; line-height: 1.55; flex: 1; }
.mxw-card__s {
  margin-top: 18px;
  font-family: var(--k-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--k-text-3);
}

/* speaker rail */
.mxw-rail {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-block: 8px 20px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--k-border-2) transparent;
}
.mxw-spk { flex: 0 0 auto; width: 208px; scroll-snap-align: start; }
.mxw-spk__ph {
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--k-border);
  background: var(--k-bg-2);
  position: relative;
}
.mxw-spk__ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: grayscale(1) contrast(1.05) brightness(0.95);
  transition: filter 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.mxw-spk:hover .mxw-spk__ph img { filter: none; transform: scale(1.04); }
.mxw-spk__ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(6, 6, 12, 0.72));
  opacity: 0.7;
  transition: opacity 0.4s ease;
}
.mxw-spk:hover .mxw-spk__ph::after { opacity: 0.4; }
.mxw-spk__name { font-family: var(--k-display); font-weight: 600; font-size: 17px; margin-top: 14px; }
.mxw-spk__role {
  font-family: var(--k-mono);
  font-size: 10.5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--k-text-3);
  margin-top: 6px;
  line-height: 1.45;
}

/* recap */
.mxw-recap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding: clamp(28px, 4vw, 52px);
  border: 1px solid var(--k-border);
  border-radius: 28px;
  background: var(--k-panel);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.mxw-recap__theme {
  font-family: var(--k-display);
  font-weight: 600;
  font-size: clamp(26px, 3.4vw, 46px);
  line-height: 1.02;
  margin-top: 16px;
}
.mxw-recap__meta {
  margin-top: 16px;
  font-family: var(--k-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--k-text-3);
}
.mxw-chips { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; }
.mxw-tag {
  font-family: var(--k-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--k-text-2);
  padding: 8px 14px;
  border-radius: 100px;
  border: 1px solid var(--k-border);
  background: rgba(255, 255, 255, 0.03);
}
.mxw-recap__link { margin-top: 28px; }
.mxw-recap__fig { margin: 0; }
.mxw-keynote {
  position: relative;
  aspect-ratio: 4 / 4.5;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--k-border);
  background: var(--k-bg-2);
}
.mxw-keynote img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: grayscale(1) contrast(1.06) brightness(0.94);
}
.mxw-keynote::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 38%, rgba(6, 6, 12, 0.92)),
    linear-gradient(125deg, rgba(34, 211, 238, 0.38), transparent 56%);
}
.mxw-keynote__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 20px 22px; }
.mxw-keynote__name { font-family: var(--k-display); font-weight: 600; font-size: clamp(22px, 2.4vw, 28px); margin-top: 10px; }
.mxw-keynote__role {
  font-family: var(--k-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--k-text-2);
  margin-top: 4px;
}

/* CTA */
.mxw-cta { text-align: center; padding-block: clamp(80px, 12vw, 170px); }
.mxw-cta__h {
  font-size: clamp(40px, 8.5vw, 132px);
  line-height: 0.92;
  text-transform: uppercase;
  letter-spacing: -0.03em;
}
.mxw-cta__sub {
  margin: 24px auto 34px;
  max-width: 46ch;
  color: var(--k-text-2);
  font-size: clamp(16px, 1.7vw, 19px);
}

/* responsive */
@media (max-width: 980px) {
  .mxw-stats { grid-template-columns: repeat(2, 1fr); }
  .mxw-focus { grid-template-columns: 1fr; }
  .mxw-recap { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .mxw-stats { grid-template-columns: 1fr; }
  /* phone hero: purpose and the primary action inside the first screen */
  .mxw-hero {
    min-height: 0;
    padding-block: calc(var(--mxw-header-h) + 24px) 48px;
  }
  .mxw-hero__eyebrow { margin-bottom: 18px; }
  .mxw-hero__title { font-size: clamp(40px, 12.5vw, 64px); }
  .mxw-hero__foot { align-items: flex-start; margin-top: 22px; gap: 18px; }
  .mxw-hero__lede { font-size: 15.5px; line-height: 1.5; }
  .mxw-hero__ctas { gap: 10px; }
  .mxw-btn { padding: 13px 20px; }
}

/* reduced motion: everything settles instantly */
@media (prefers-reduced-motion: reduce) {
  .mxw-mesh span, .mxw-chip::before, .mxw-grad, .mxw-mq__track { animation: none; }
  .mxw-hero__title .l > span { transform: none; animation: none; }
  .mxw [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   4. PAGE COMPONENTS — board · sponsors · agenda · grid
   Markup is emitted by lib/mxw/render.ts for <!--bind:board-->,
   <!--bind:sponsors-->, <!--bind:agenda--> and <!--bind:speakers-grid-->
   (contract in docs/projects/website-squarespace.md). Shared by every
   template that places those binds; scoped under .mxw like section 3.
   ============================================================ */
/* board — square portraits with a gradient ring, monogram when no photo */
.mxw-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 44px) clamp(16px, 2.4vw, 28px);
}
.mxw-person { min-width: 0; }
.mxw-person__ph {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
  background: var(--k-bg-2);
  border: 1px solid var(--k-border);
}
.mxw-person__ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: grayscale(1) contrast(1.05) brightness(0.95);
  transition: filter 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
/* the ring: a 1px gradient stroke masked to the edge, faint until hover */
.mxw-person__ph::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, var(--k-cyan), var(--k-indigo) 45%, var(--k-magenta));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.45;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.mxw-person:hover .mxw-person__ph::after,
.mxw-person:focus-within .mxw-person__ph::after { opacity: 1; }
.mxw-person:hover .mxw-person__ph img,
.mxw-person:focus-within .mxw-person__ph img { filter: none; transform: scale(1.03); }
.mxw-person__ph--mono {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--k-panel-2);
}
.mxw-person__ph--mono::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 0% 0%, rgba(124, 134, 255, 0.16), transparent 58%);
  pointer-events: none;
}
.mxw-person__ph--mono span {
  position: relative;
  font-family: var(--k-display);
  font-weight: 600;
  font-size: clamp(30px, 4vw, 48px);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--k-text-2);
  transition: color 0.4s ease;
}
.mxw-person:hover .mxw-person__ph--mono span { color: var(--k-text); }
.mxw-person__name {
  font-family: var(--k-display);
  font-weight: 600;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin-top: 16px;
}
.mxw-person__role {
  margin-top: 6px;
  font-family: var(--k-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--k-text-2);
  line-height: 1.5;
}

/* sponsor wall — pure type, no logos; weight carries the tier */
.mxw-sponsors { display: flex; flex-direction: column; }
.mxw-sponsors__band {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: clamp(28px, 4.5vw, 64px);
  row-gap: 0.55em;
  padding-block: clamp(26px, 3.4vw, 44px);
  text-align: center;
}
/* hairline between bands, fading at the ends */
.mxw-sponsors__band + .mxw-sponsors__band::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--k-border-2) 25%, var(--k-border-2) 75%, transparent);
}
.mxw-sponsor {
  display: inline-block;
  max-width: 100%;
  min-width: 0;
  text-wrap: balance;
}
.mxw-sponsors__band--1 .mxw-sponsor {
  font-family: var(--k-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--k-text);
}
.mxw-sponsors__band--2 .mxw-sponsor {
  font-family: var(--k-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 2vw, 1.7rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--k-text);
}
.mxw-sponsors__band--3 .mxw-sponsor {
  font-family: var(--k-mono);
  font-size: clamp(12px, 1.05vw, 14px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--k-text-2);
  line-height: 1.6;
}
.mxw-sponsors__band--kind .mxw-sponsor {
  font-family: var(--k-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--k-text-2);
  opacity: 0.78;
  line-height: 1.6;
}
.mxw-sponsors__band--kind { padding-block: clamp(20px, 2.6vw, 30px); }

/* agenda — mono time column, hairline rows */
.mxw-agenda {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--k-border);
}
.mxw-slot {
  display: grid;
  grid-template-columns: clamp(140px, 15vw, 176px) minmax(0, 1fr);
  column-gap: clamp(20px, 3.4vw, 48px);
  padding-block: clamp(22px, 2.8vw, 34px);
  border-bottom: 1px solid var(--k-border);
}
.mxw-slot__time {
  font-family: var(--k-mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--k-text-2);
  line-height: 1.6;
  padding-top: 6px;               /* sits on the tag's baseline */
  white-space: nowrap;
  transition: color 0.3s ease;
}
.mxw-slot:hover .mxw-slot__time,
.mxw-slot:focus-within .mxw-slot__time { color: var(--k-teal); }
.mxw-slot__body { min-width: 0; }
.mxw-slot__body > .mxw-tag { display: inline-block; }
.mxw-slot__t {
  font-family: var(--k-display);
  font-weight: 600;
  font-size: clamp(20px, 2.1vw, 28px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-top: 14px;
  text-wrap: balance;
}
.mxw-slot__body > .mxw-slot__t:first-child { margin-top: 0; }
.mxw-slot__who {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--k-text-2);
  max-width: 62ch;
}

/* speaker grid — the rail's card, laid out as a wrapping grid */
.mxw-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(22px, 2.6vw, 32px) 16px;
}
.mxw-grid .mxw-spk {
  flex: none;
  width: auto;
  min-width: 0;
  scroll-snap-align: none;
}
.mxw-grid .mxw-spk__name { font-size: clamp(15px, 1.25vw, 17px); line-height: 1.15; }

/* responsive */
@media (max-width: 1180px) {
  .mxw-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .mxw-board { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  .mxw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .mxw-board { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 14px; }
  .mxw-person__ph { border-radius: 14px; }
  .mxw-person__name { font-size: 16px; margin-top: 12px; }
  .mxw-person__role { font-size: 10.5px; }
  .mxw-sponsors__band { column-gap: 22px; row-gap: 0.5em; padding-block: 24px; }
  /* phone agenda: time stacks above the body */
  .mxw-slot { grid-template-columns: 1fr; row-gap: 10px; padding-block: 22px; }
  .mxw-slot__time { padding-top: 0; white-space: normal; }
  .mxw-slot__t { font-size: 20px; margin-top: 12px; }
  .mxw-slot__who { font-size: 14.5px; }
  .mxw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .mxw-grid .mxw-spk__ph { border-radius: 14px; }
  .mxw-grid .mxw-spk__name { font-size: 15px; margin-top: 10px; }
}

/* reduced motion: bound components settle instantly too */
@media (prefers-reduced-motion: reduce) {
  .mxw-person__ph img, .mxw-person__ph::after, .mxw-person__ph--mono span,
  .mxw-slot__time { transition: none; }
  .mxw-person:hover .mxw-person__ph img,
  .mxw-person:focus-within .mxw-person__ph img { transform: none; }
}

/* ============================================================
   5. PAGE TEMPLATES — about · conference · connect
   Page-specific blocks beyond the shared classes above. Each block is
   only reachable from its template's markup, so they cannot collide.
   ============================================================ */

/* ---- about (template kinetic-about, /about): tighter hero, short focus cards,
   the story/memoriam pair and the history timeline ---- */
/* hero: same language as Home, a little less tall — this page is about reading on */
.mxw .mxw-hero--about { min-height: min(78vh, 760px); }

/* focus cards in short form: number, title, one line — no body to stretch */
.mxw .mxw-card--short { min-height: 0; padding: 28px 26px 26px; }
.mxw .mxw-card--short .mxw-card__b { flex: 0 0 auto; }
.mxw-sec__foot { margin-top: clamp(28px, 3vw, 40px); }

/* story: prose on the left, the memoriam panel on the right */
.mxw-story {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.mxw-story__p {
  margin-top: 20px;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.65;
  color: var(--k-text-2);
  max-width: 58ch;
}
.mxw-story__p strong { font-weight: 500; color: var(--k-text); }
.mxw-story__pull {
  position: relative;
  margin-top: clamp(30px, 3.4vw, 44px);
  padding-left: 22px;
  max-width: 46ch;
}
.mxw-story__pull::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--k-cyan), var(--k-teal));
}
.mxw-story__k {
  font-family: var(--k-mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--k-text-3);
}
.mxw-story__q {
  margin-top: 12px;
  font-family: var(--k-display);
  font-weight: 500;
  font-size: clamp(20px, 2vw, 27px);
  line-height: 1.22;
  letter-spacing: -0.015em;
}

/* in memoriam: a quiet panel, no hover lift */
.mxw-memoriam {
  position: relative;
  padding: clamp(26px, 3vw, 40px);
  border: 1px solid var(--k-border);
  border-radius: 24px;
  background: var(--k-panel);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
}
.mxw-memoriam::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 100% 0%, rgba(45, 240, 196, 0.12), transparent 55%);
  pointer-events: none;
}
.mxw-memoriam > * { position: relative; }
.mxw-memoriam__name {
  font-family: var(--k-display);
  font-weight: 600;
  font-size: clamp(24px, 2.4vw, 32px);
  margin-top: 18px;
}
.mxw-memoriam__role {
  margin-top: 8px;
  font-family: var(--k-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--k-text-3);
  line-height: 1.5;
}
.mxw-memoriam__q {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--k-border);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--k-text-2);
}

/* timeline: one line per row, a dot per edition; the latest glows, the next is hollow */
.mxw-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  row-gap: clamp(40px, 4.5vw, 64px);
}
.mxw-tl {
  position: relative;
  padding: 26px 28px 0 0;
  border-top: 1px solid var(--k-border);
}
.mxw-tl::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--k-text-3);
  box-shadow: 0 0 0 4px var(--k-bg);
}
.mxw-tl--now::before {
  background: var(--k-teal);
  box-shadow: 0 0 0 4px var(--k-bg), 0 0 16px var(--k-teal);
  animation: mxw-pulse 2.4s ease-in-out infinite;
}
.mxw-tl--now::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--k-teal), rgba(45, 240, 196, 0));
}
.mxw-tl--next::before { background: transparent; border: 1px solid var(--k-text-3); }
.mxw-tl--next .mxw-tl__year { color: var(--k-text-3); }
.mxw-tl__year {
  font-family: var(--k-display);
  font-weight: 600;
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1;
  letter-spacing: -0.02em;
}
.mxw-tl__meta {
  margin-top: 12px;
  font-family: var(--k-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--k-text-3);
  line-height: 1.5;
}
.mxw-tl__note {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--k-text-2);
  max-width: 30ch;
}
.mxw-tl__link { margin-top: 16px; }

/* board section furniture (the grid itself is styled with the components) */
.mxw-board-foot { margin-top: clamp(32px, 4vw, 48px); }

@media (max-width: 980px) {
  .mxw-story { grid-template-columns: 1fr; }
  .mxw-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .mxw .mxw-hero--about { min-height: 0; }
  .mxw-timeline { grid-template-columns: 1fr; row-gap: 0; }
  .mxw-tl { border-top: 0; border-left: 1px solid var(--k-border); padding: 0 0 36px 26px; }
  .mxw-tl:last-child { padding-bottom: 0; }
  .mxw-tl::before { top: 10px; left: -5px; }
  .mxw-tl--now::after {
    top: 0;
    bottom: 0;
    left: -1px;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, var(--k-teal), rgba(45, 240, 196, 0));
  }
}
@media (prefers-reduced-motion: reduce) {
  .mxw-tl--now::before { animation: none; }
}

/* closing CTA: a quiet second link under the button */
.mxw-cta__more { margin-top: 26px; }

/* ---- annual conference (template kinetic-conference, /annual-conference): hero lead,
   the facts of the day, the pitch-showcase band, sponsor footnote, the archive ---- */
/* hero foot: the theme statement + date/venue sit where Home's lede sits */
.mxw-conf-lead { max-width: min(100%, 540px); }
.mxw-conf-lead__theme {
  font-family: var(--k-display);
  font-weight: 600;
  font-size: clamp(21px, 2.3vw, 32px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  max-width: 24ch;
}
.mxw-conf-lead__meta {
  margin-top: 16px;
  font-family: var(--k-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--k-text-2);
  line-height: 1.6;
}

/* overview: statement on the left, the facts of the day on the right */
.mxw-conf-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.mxw-conf-intro__aside { padding-top: clamp(0px, 5vw, 64px); }
.mxw-facts {
  margin: 0;
  border-top: 1px solid var(--k-border-2);
}
.mxw-facts__row {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 18px;
  padding-block: 18px;
  border-bottom: 1px solid var(--k-border);
}
.mxw-facts dt {
  font-family: var(--k-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--k-text-2);
  padding-top: 5px;
}
.mxw-facts dd {
  margin: 0;
  font-family: var(--k-display);
  font-weight: 500;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.mxw-facts__note {
  margin-top: 18px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--k-text-2);
}

/* pitch showcase: a glass band closing the programme */
.mxw-conf-band {
  position: relative;
  overflow: hidden;
  margin-top: clamp(40px, 5vw, 72px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: end;
  padding: clamp(28px, 4vw, 52px);
  border: 1px solid var(--k-border);
  border-radius: 28px;
  background: var(--k-panel);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.mxw-conf-band::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(90% 130% at 100% 0%, rgba(34, 211, 238, 0.13), transparent 55%);
}
.mxw-conf-band__t {
  font-size: clamp(26px, 3.4vw, 46px);
  line-height: 1.02;
  margin-top: 16px;
}
.mxw-conf-band__b {
  color: var(--k-text-2);
  font-size: clamp(15.5px, 1.4vw, 17.5px);
  line-height: 1.6;
  max-width: 48ch;
}

/* sponsors footnote with the enquiry link */
.mxw-conf-note {
  margin-top: clamp(36px, 5vw, 56px);
  padding-top: 24px;
  border-top: 1px solid var(--k-border);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 24px;
  color: var(--k-text-2);
  font-size: 16px;
}

/* archive: outlined years, most recent solid */
.mxw-archive {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--k-border-2);
}
.mxw-archive__row {
  display: grid;
  grid-template-columns: clamp(96px, 12vw, 160px) minmax(0, 1fr);
  gap: 18px;
  align-items: baseline;
  padding-block: clamp(18px, 2.4vw, 28px);
  border-bottom: 1px solid var(--k-border);
}
.mxw-archive__year {
  font-family: var(--k-display);
  font-weight: 600;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--k-text-3);
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px var(--k-text-2);
}
.mxw-archive__row:first-child .mxw-archive__year {
  color: var(--k-text);
  -webkit-text-fill-color: currentColor;
  -webkit-text-stroke: 0;
}
.mxw-archive__name { font-family: var(--k-display); font-weight: 600; font-size: clamp(18px, 1.8vw, 24px); }
.mxw-archive__detail {
  margin-top: 6px;
  color: var(--k-text-2);
  font-size: 15px;
  line-height: 1.55;
  max-width: 60ch;
}

/* closing CTA: button + a quieter second path */
.mxw-conf-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 18px 28px;
}

@media (max-width: 980px) {
  .mxw-conf-intro { grid-template-columns: 1fr; }
  .mxw-conf-intro__aside { padding-top: 0; }
  .mxw-conf-band { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 620px) {
  .mxw-conf-lead__theme { font-size: 20px; max-width: none; }
  .mxw-conf-lead__meta { margin-top: 10px; font-size: 11.5px; }
  .mxw-facts__row { grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding-block: 14px; }
  .mxw-archive__row { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }
  .mxw-archive__year { font-size: 26px; }
}

/* ---- connect (template kinetic-connect, /connect): compact hero, four link cards,
   the "what joining means" band, contact block ---- */
/* compact hero: same rise animation as Home, one size down */
.mxw-hero--connect {
  min-height: 0;
  padding-block: calc(var(--mxw-header-h) + clamp(48px, 9vh, 110px)) clamp(40px, 6vh, 72px);
}
.mxw-hero--connect .mxw-hero__title { font-size: clamp(44px, 8.4vw, 118px); }

/* link cards: a row of four doors */
.mxw-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.mxw-links .mxw-card { min-height: 0; }
.mxw-links .mxw-card__t { font-size: clamp(22px, 1.9vw, 26px); line-height: 1.05; }
.mxw-links__cta { margin-top: 26px; }
.mxw-links .mxw-btn { padding: 13px 20px; }
.mxw-links .mxw-card:hover .arw { transform: translateX(3px); }
.mxw-links .mxw-card:hover .mxw-btn--ghost { background: var(--k-panel-2); }

/* "what joining means today": one glass band, question left, answer right */
.mxw-today {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
  padding: clamp(28px, 4vw, 52px);
  border: 1px solid var(--k-border);
  border-radius: 28px;
  background: var(--k-panel);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.mxw-today__t {
  margin-top: 18px;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.02;
}
.mxw-today__b {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.6;
  color: var(--k-text-2);
  max-width: 56ch;
}
.mxw-today__link { margin-top: 26px; }

/* contact: a hairline, a question, the address set large */
.mxw-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(28px, 5vw, 72px);
  align-items: end;
  padding-top: clamp(36px, 5vw, 64px);
  border-top: 1px solid var(--k-border);
}
.mxw-contact__t {
  margin-top: 18px;
  font-size: clamp(30px, 4.2vw, 56px);
}
.mxw-contact__b {
  margin-top: 16px;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.6;
  color: var(--k-text-2);
  max-width: 46ch;
}
.mxw-contact__mail {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  max-width: 100%;
  padding-bottom: 12px;
  font-family: var(--k-display);
  font-weight: 600;
  font-size: clamp(24px, 3.4vw, 46px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.mxw-contact__mail .arw {
  width: 0.6em;
  height: 0.6em;
  flex: 0 0 auto;
  transition: transform 0.3s ease;
}
.mxw-contact__mail::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--k-cyan), var(--k-teal), transparent);
  transform: scaleX(0.4);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.mxw-contact__mail:hover::after { transform: scaleX(1); }
.mxw-contact__mail:hover .arw { transform: translateX(5px); }

/* responsive */
@media (max-width: 1180px) {
  .mxw-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .mxw-today { grid-template-columns: 1fr; gap: 22px; }
  .mxw-contact { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 700px) {
  .mxw-links { grid-template-columns: 1fr; gap: 14px; }
  .mxw-links .mxw-card { padding: 26px 22px; }
}
@media (max-width: 620px) {
  /* phone: eyebrow, two-line headline, lede and both actions inside 375×667 */
  .mxw-hero--connect { padding-block: calc(var(--mxw-header-h) + 24px) 44px; }
  .mxw-hero--connect .mxw-hero__title { font-size: clamp(38px, 11.5vw, 56px); }
  .mxw-today { padding: 24px 20px; border-radius: 22px; }
  .mxw-today__link { margin-top: 20px; }
  .mxw-contact__mail { font-size: clamp(22px, 6.4vw, 28px); }
}