/* Shared site header: logo left, "Join as a member" + hamburger right.
   Used on every page. Edit the links in each page's <header class="sh"> block. */

.sh {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 14px 8vw;
  font-family: Suisseintl, sans-serif;
  color: var(--dark-slate-grey, #3b3b3b);
  transition: background-color .3s, backdrop-filter .3s;
}
.sh.is-scrolled,
.sh.is-open {
  background-color: rgba(233, 233, 233, .82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.sh-brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  line-height: 0;
}
.sh-brand .lottie-small-top-title {
  width: 3.2rem;
  max-height: 3.2rem;
  margin: 0;
}

.sh-right {
  display: flex;
  align-items: center;
  gap: .75rem;
}

/* Pink CTA, same look as the site's .button */
.sh-join {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .65em 1.4em;
  border: 1px solid var(--dark-slate-grey, #3b3b3b);
  border-radius: 20em;
  background-color: var(--dark-slate-grey-2, #e3b4ab);
  color: var(--dark-slate-grey, #3b3b3b);
  font-size: clamp(13px, 1.1vw, 17px);
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .25s, color .25s;
}
.sh-join:hover {
  background-color: var(--dark-slate-grey, #3b3b3b);
  color: var(--white-smoke, #e9e9e9);
}
.sh-join .icon-arrow {
  width: 1em;
  height: 1em;
  margin-left: .2em;
  transition: transform .3s;
}
.sh-join:hover .icon-arrow {
  transform: translateX(.4em);
}

/* Hamburger */
.sh-burger {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 46px;
  height: 46px;
  padding: 0 11px;
  border: 1px solid var(--dark-slate-grey, #3b3b3b);
  border-radius: 20em;
  background: transparent;
  cursor: pointer;
  transition: background-color .25s;
}
.sh-burger span {
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--dark-slate-grey, #3b3b3b);
  transition: transform .25s, opacity .2s, background-color .25s;
}
.sh-burger:hover {
  background-color: var(--dark-slate-grey, #3b3b3b);
}
.sh-burger:hover span {
  background: var(--white-smoke, #e9e9e9);
}
.sh.is-open .sh-burger span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
.sh.is-open .sh-burger span:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }

/* Dropdown menu */
.sh-menu {
  position: absolute;
  top: calc(100% - 2px);
  right: 8vw;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1rem;
  border: 1px solid rgba(59, 59, 59, .25);
  border-radius: 20px;
  background-color: rgba(233, 233, 233, .92);
  background-image: url("/assets/62cd2a4f7a0de251ff328e5e_Noise-1.jpg");
  background-size: 5%;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.sh.is-open .sh-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.sh-link {
  display: block;
  padding: .6em 1.2em;
  border: 1px solid var(--dark-slate-grey, #3b3b3b);
  border-radius: 20em;
  color: var(--dark-slate-grey, #3b3b3b);
  font-size: clamp(13px, 1.05vw, 16px);
  letter-spacing: .5px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color .2s, color .2s;
}
.sh-link:hover,
.sh-link[aria-current="page"] {
  background-color: #3a7871;
  border-color: #3a7871;
  color: var(--white-smoke, #e9e9e9);
}

@media (max-width: 767px) {
  .sh { padding: 10px 5vw; }
  .sh-join { padding: .6em 1.1em; font-size: 12px; }
  .sh-join .sh-join-long { display: none; }
  .sh-menu { left: 5vw; right: 5vw; min-width: 0; }
}

/* ---- Site tweaks (overrides of the generated Webflow stylesheet) ---- */

/* Home page: the Howard Thurman quote sat in a white box. Let it sit on
   the page background like the text around it. */
.quote {
  background-color: transparent;
}

/* About page: "Our Values" conveyor. The nine cards are repeated twice in
   about/index.html so the loop is seamless; the track moves half its width. */
.vals-marquee {
  width: 100%;
  margin: 8vh 0 4vh;
  padding-top: 50px;      /* room for the raised photo cards */
  padding-bottom: 12px;
  overflow: hidden;
}
.vals-track {
  display: flex;
  align-items: flex-start;
  width: max-content;
  animation: vals-scroll 36s linear infinite;
  will-change: transform;
}
.vals-marquee:hover .vals-track {
  animation-play-state: paused;
}
.vals-track .testimonial-card {
  flex: none;
}
@keyframes vals-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .vals-track { animation: none; }
}

/* Home page: the arched video under the headline. Slightly larger and
   higher on desktop so it sits with the headline and the photo on the right.
   Sizes scale with the viewport and stop growing on very wide screens. */
@media (min-width: 992px) {
  .video-container {
    margin-top: -540px;
  }
  .about-video {
    width: clamp(460px, 31vw, 560px);
    height: clamp(600px, 40vw, 720px);
    margin-top: 12px;
  }
}

/* Home page: the event pills under the pillars. Formerly a Matter.js
   physics drop; now static columns of pills. */
.gravity-space {
  height: auto;
  min-height: 0;
  pointer-events: auto;
}
.pill-columns {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  gap: 8px 48px;
  width: 100%;
  padding: 0 5vw;
}
.pill-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 22px;
  border-radius: 25px;
  color: #fff;
  font-family: Ogg, serif;
  font-size: 24px;
  line-height: 1;
  white-space: nowrap;
}
@media (max-width: 1400px) {
  .pill-columns { grid-template-columns: repeat(2, auto); }
  .pill-column:nth-child(3) { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: 8px 48px; }
}
@media (max-width: 770px) {
  .pill-columns { grid-template-columns: auto; gap: 8px; }
  .pill-column:nth-child(3) { grid-template-columns: auto; gap: 8px; }
  .pill { height: 42px; font-size: 20px; padding: 0 18px; }
}

/* Home page: when the headline and the arched video overlap, the headline
   stays on top. */
.container-footer.container-heading {
  position: relative;
  z-index: 3;
  pointer-events: none;   /* so the title never blocks the video below it */
}
.container-footer.container-heading a,
.container-footer.container-heading button {
  pointer-events: auto;
}
.video-container {
  position: relative;
  z-index: 1;
}

/* ==================== About page ==================== */
/* One spacing rhythm: 120px between sections on desktop, 64px on phones,
   32px between a section title and its content. Body text clamped so it
   reads the same on a 13" laptop and a big monitor. */
.about-page .flex-about-thespace {
  align-items: center;
  margin-top: 0;
  padding: 150px 10vw 120px;
  overflow: visible;
}
.about-page .flex-about-thespace + .flex-about-thespace {
  padding-top: 0;
}
.about-page .warp-about-the-space {
  flex: 1 1 0;
  max-width: 640px;
}
.about-page .vide-container-2 {
  flex: 0 0 auto;
}
.about-page .about-video {
  margin-top: 0;
  margin-bottom: 0;
}
.about-page .subtitle-thespace {
  padding-bottom: 0;
}

/* Type */
.about-page .paragraph-22,
.about-page .about-mission-lead,
.about-page .about-mission-cols p {
  font-family: Suisseintl, sans-serif;
  font-size: clamp(15px, 1.15vw, 19px);
  font-weight: 300;
  line-height: 1.6;
  max-width: 62ch;
}
.about-page h3.ogg,
.about-page h3.ogg-1 {
  font-size: clamp(26px, 2.4vw, 40px);
  line-height: 1.25;
  margin: 0 0 20px;
}
.about-page h2.heading {
  font-size: clamp(30px, 3vw, 48px);
  line-height: 1.1;
  margin-bottom: 20px;
}

/* Fourth place section */
.about-page .image-18 {
  border-radius: 20px;
  flex: 0 0 auto;
  max-width: 44%;
  object-fit: cover;
}
.about-page .wrap-button {
  margin-top: 28px;
}

/* Our mission (moved out of the hero): full-width statement, then a photo
   beside the two supporting paragraphs. */
.about-page .about-mission {
  padding: 0 10vw 120px;
}
.about-page .about-mission-inner {
  max-width: none;
}
.about-page .about-mission-lead {
  font-family: Ogg, serif !important;
  font-size: clamp(28px, 2.7vw, 46px) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  max-width: none !important;
  margin: 0 0 56px;
}
.about-page .about-mission-row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 5vw;
  align-items: center;
}
.about-page .about-mission-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 20px;
  display: block;
}
.about-page .about-mission-cols {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.about-page .about-mission-cols p {
  max-width: 56ch;
  margin: 0;
}

/* Our values */
.about-page .page-section:not(.overflow-hidden) .annotation-container {
  display: block;
  padding: 0 10vw;
}
.about-page .page-section:not(.overflow-hidden) .ogg.no-margin {
  margin: 0;
  padding: 0;
}
.about-page .vals-marquee {
  margin: 32px 0 120px;
}
.about-page .vals-track {
  animation-duration: 42s;
}
.about-page .vals-track .testimonial-card {
  width: 320px;
  height: 420px;
  margin-right: 24px;
  border-radius: 20px;
}
.about-page .vals-track .text-testimonial {
  padding: 28px 22px;
}
.about-page .vals-track .testimonial-text {
  font-size: 15px;
  line-height: 1.5;
}
.about-page .vals-track .large-testimonial {
  font-size: 19px;
}

/* Newsletter, now just above the footer */
.about-page .promo-section {
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  padding: 80px 10vw;
  background-color: var(--grass, #cbd4a7);
}
.about-page .promo-section .ogg {
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.3;
  max-width: 26ch;
  margin: 0;
  padding: 0;
}
.about-page .promo-section .code-embed {
  flex: 0 0 auto;
  border-radius: 12px;
  overflow: hidden;
}
.about-page .promo-section .code-embed iframe {
  display: block;
  max-width: 100%;
}

@media (max-width: 991px) {
  .about-page .flex-about-thespace { flex-direction: column; align-items: flex-start; padding: 120px 5vw 80px; }
  .about-page .warp-about-the-space { max-width: none; }
  .about-page .image-18 { max-width: 100%; width: 100%; }
  .about-page .about-mission { padding: 0 5vw 80px; }
  .about-page .page-section:not(.overflow-hidden) .annotation-container { padding: 0 5vw; }
  .about-page .promo-section { flex-flow: column; align-items: flex-start; padding: 64px 5vw; }
}
@media (max-width: 767px) {
  .about-page .flex-about-thespace { padding: 100px 5vw 64px; }
  .about-page .flex-about-thespace + .flex-about-thespace { padding-top: 0; }
  .about-page .about-mission { padding-bottom: 64px; }
  .about-page .about-mission-row { grid-template-columns: 1fr; gap: 28px; }
  .about-page .vals-marquee { margin-bottom: 64px; }
  .about-page .vals-track .testimonial-card { width: 260px; height: 360px; }
}

/* About page: the fourth-place photo fills its column and centers against
   the text. The photo sits in an unclassed wrapper div, so size that. */
@media (min-width: 992px) {
  .about-page .flex-about-thespace + .flex-about-thespace {
    align-items: center;
    gap: 5vw;
  }
  .about-page .flex-about-thespace + .flex-about-thespace > div:first-child {
    flex: 0 0 44%;
    width: 44%;
    max-width: 44%;
    align-self: center;
  }
  .about-page .image-18 {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
  }
  .about-page .flex-about-thespace + .flex-about-thespace .warp-about-the-space {
    flex: 1 1 0;
    max-width: none;
  }
}

/* ==================== Home page ==================== */
/* Tighter, even vertical rhythm; readable body text; one hero. Nothing removed. */

/* 1. Rhythm: the big gaps were padding inside blocks. */
.home-page .image-loop-container {
  margin-top: 48px;
  padding-top: 24px;
  padding-bottom: 24px;
}
.home-page .flex-about-thespace {
  margin-top: 0;
  padding: 72px 10vw 40px;
}
.home-page .container-curriculum {
  padding-top: 80px;
}
.home-page .programming-header {
  margin-top: 40px;
}
.home-page .gravity-container {
  margin-top: 32px;
}
.home-page .gravity-space {
  padding-bottom: 72px;
}

/* 2. About block: heading left, paragraph right, button under the text. */
@media (min-width: 992px) {
  .home-page .flex-about-thespace .warp-about-the-space {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    grid-template-rows: auto auto;
    column-gap: 6vw;
    align-items: start;
    width: 100%;
    max-width: none;
  }
  .home-page .flex-about-thespace .warp-about-the-space > .lottie-small-top-title { grid-column: 1; grid-row: 1; }
  .home-page .flex-about-thespace .warp-about-the-space > h2 { grid-column: 1; grid-row: 2; }
  .home-page .flex-about-thespace .warp-about-the-space > div { grid-column: 2; grid-row: 1 / span 2; }
  .home-page .flex-about-thespace .subtitle-thespace { padding-top: 0; }
  .home-page .flex-about-thespace .subtitle-thespace .paragraph { max-width: 62ch; }
}

/* 3. Body text: readable at every desktop width. */
.home-page .paragraph,
.home-page .paragraph-2 {
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.6;
}
.home-page .flex-about-thespace h3.ogg {
  font-size: clamp(26px, 2.4vw, 40px);
  line-height: 1.25;
}

/* 4. One hero: the membership title no longer matches the hero's size. */
.home-page .curriculum-header,
.home-page .text-center.curriculum-header {
  font-size: clamp(44px, 5.5vw, 80px);
  line-height: 1;
}

/* 5. "Our Community" annotation sat on the subtitle; lift it clear. */
.home-page .annotation.annotation-4 {
  bottom: 48px;
  right: -205px;
}

/* 6. Button roles: pink for join/apply, outline for secondary. */
.home-page .button.button-secondary,
.home-page .button.button-tertiary {
  background-color: var(--dark-slate-grey-2, #e3b4ab);
}
.home-page .flex-about-thespace .button:not(.button-secondary):not(.button-tertiary) {
  background-color: transparent;
}
.home-page .flex-about-thespace .button:not(.button-secondary):not(.button-tertiary):hover {
  background-color: var(--dark-slate-grey, #3b3b3b);
}

/* 7. Hero subtitle: tighter leading so its block sits with the arch. */
.home-page .heading-24 {
  line-height: 1.25;
}

@media (max-width: 767px) {
  .home-page .flex-about-thespace { padding: 56px 5vw 32px; }
  .home-page .container-curriculum { padding-top: 56px; }
  .home-page .gravity-space { padding-bottom: 48px; }
}

/* 8. Explore The Space photo slider: same 20px corners as the rest. */
.home-page .container-footer.s-padding-row .w-slider-mask {
  border-radius: 20px;
  overflow: hidden;
}

/* ==================== Explore The Space: guided tour ==================== */
.home-page .tour {
  width: 100%;
}
.home-page .tour-intro {
  font-family: Ogg, serif;
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1.3;
  max-width: 34ch;
  margin: 0 0 40px;
}
.home-page .tour-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 5vw;
  align-items: start;
}
.home-page .tour-rooms {
  list-style: none;
  margin: 0;
  padding: 0;
}
.home-page .tour-room {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  padding: 22px 0;
  border-top: 1px solid rgba(59, 59, 59, .18);
  cursor: default;
  transition: opacity .25s;
  opacity: .55;
}
.home-page .tour-room.is-active,
.home-page .tour-room:hover,
.home-page .tour-room:focus-visible {
  opacity: 1;
  outline: none;
}
.home-page .tour-room:last-child {
  border-bottom: 1px solid rgba(59, 59, 59, .18);
}
.home-page .tour-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c, #cbd4a7);
  color: #263942;
  font-family: Suisseintl, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
}
.home-page .tour-num[style*="#263942"],
.home-page .tour-num[style*="#78543a"] {
  color: #e9e9e9;
}
.home-page .tour-name {
  margin: 8px 0 6px;
  font-family: Ogg, serif;
  font-size: clamp(20px, 1.6vw, 26px);
  font-weight: 500;
  line-height: 1.15;
  text-transform: none;
}
.home-page .tour-desc {
  margin: 0;
  font-family: Suisseintl, sans-serif;
  font-size: clamp(15px, 1.1vw, 17px);
  font-weight: 300;
  line-height: 1.55;
  max-width: 44ch;
}
.home-page .tour-mobile {
  display: none;
}

/* Sticky photo stage */
.home-page .tour-stage {
  position: sticky;
  top: 96px;
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  overflow: hidden;
  background: #e9e9e9;
}
.home-page .tour-photo {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity .5s ease;
}
.home-page .tour-photo.is-active {
  opacity: 1;
}
.home-page .tour-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .6s ease;
}
.home-page .tour-photo img.is-on {
  opacity: 1;
}
.home-page .tour-photo figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  color: #fff;
  font-family: Suisseintl, sans-serif;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
}
.home-page .tour-dots {
  display: flex;
  gap: 6px;
}
.home-page .tour-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .5);
  cursor: pointer;
}
.home-page .tour-dot.is-on {
  background: #fff;
}

@media (max-width: 991px) {
  .home-page .tour-grid { grid-template-columns: 1fr; }
  .home-page .tour-stage { display: none; }
  .home-page .tour-room { opacity: 1; grid-template-columns: 36px 1fr; padding: 24px 0; }
  .home-page .tour-num { width: 32px; height: 32px; font-size: 11px; }
  .home-page .tour-mobile { display: block; margin-top: 14px; }
  .home-page .tour-mobile img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 16px;
  }
}

/* ==================== The Member Experience: a day as a member ==================== */
.home-page .day {
  width: 100%;
  margin-top: 8px;
}
.home-page .day-intro {
  font-family: Ogg, serif;
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1.3;
  max-width: 36ch;
  margin: 0 0 56px;
}
.home-page .day-track {
  position: relative;
  padding: 28px 0 44px;
}
.home-page .day-line {
  position: relative;
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(90deg, #f3d97a 0%, #e3b4ab 40%, #c9b7ea 60%, #263942 72%, #263942 100%);
}
.home-page .day-now {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.home-page .day-now i {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #e9e9e9;
  border: 3px solid #3b3b3b;
  box-shadow: 0 0 0 6px rgba(233, 233, 233, .7);
}
.home-page .day-now b {
  position: absolute;
  top: -36px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 20em;
  background: #3b3b3b;
  color: #e9e9e9;
  font: 500 11px/1 Suisseintl, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.home-page .day-ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  height: 28px;
}
.home-page .day-ticks li {
  position: absolute;
  top: 10px;
  left: calc(var(--p) * 1%);
  transform: translateX(-50%);
  font: 500 12px/1 Suisseintl, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #3b3b3b;
  white-space: nowrap;
}
.home-page .day-ticks li::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -14px;
  width: 1px;
  height: 10px;
  background: rgba(59, 59, 59, .5);
}
.home-page .day-ticks li:first-child { transform: translateX(0); }
.home-page .day-ticks li:first-child::before { left: 0; }
.home-page .day-ticks li:last-child { transform: translateX(-100%); }
.home-page .day-ticks li:last-child::before { left: auto; right: 0; }
.home-page .day-ticks li.is-gong {
  font-family: Ogg, serif;
  font-size: 15px;
  text-transform: none;
  letter-spacing: 0;
  color: #263942;
}

.home-page .day-cards {
  display: grid;
  grid-template-columns: 1fr 1.25fr .95fr 1.45fr 1.1fr;
  gap: 18px;
  align-items: stretch;
}
.home-page .day-card {
  position: relative;
  padding: 26px 22px 24px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(59, 59, 59, .12);
  border-top: 6px solid var(--c, #cbd4a7);
}
.home-page .day-card--gong {
  background: #263942;
  color: #e9e9e9;
  border-top-color: #263942;
}
.home-page .day-when {
  display: inline-block;
  margin-bottom: 14px;
  font: 500 11px/1 Suisseintl, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .7;
}
.home-page .day-card h4,
.home-page .day-tile h4 {
  margin: 0 0 10px;
  font-family: Ogg, serif;
  font-size: clamp(20px, 1.5vw, 24px);
  font-weight: 500;
  line-height: 1.15;
  text-transform: none;
}
.home-page .day-card p,
.home-page .day-tile p {
  margin: 0;
  font-family: Suisseintl, sans-serif;
  font-size: clamp(14px, 1.05vw, 16px);
  font-weight: 300;
  line-height: 1.55;
}
.home-page .day-card p + p { margin-top: 10px; }
.home-page .day-sub strong { font-weight: 500; }
.home-page .day-card--gong h4 { color: #e9e9e9; }
.home-page .day-card--gong p { color: rgba(233, 233, 233, .85); }
.home-page .day-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.home-page .day-chips li {
  padding: 5px 10px;
  border-radius: 20em;
  border: 1px solid rgba(59, 59, 59, .3);
  font: 300 12px/1.2 Suisseintl, sans-serif;
}

.home-page .day-anytime {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid rgba(59, 59, 59, .18);
}
.home-page .day-anytime-label {
  margin: 0 0 18px;
  font: 500 12px/1 Suisseintl, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #3b3b3b;
}
.home-page .day-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.home-page .day-tile {
  padding: 22px;
  border-radius: 20px;
  background: var(--dark-slate-grey-2, #e3b4ab);
}
.home-page .day-tile:nth-child(2) { background: var(--grass, #cbd4a7); }
.home-page .day-tile:nth-child(3) { background: #ebe3d7; }

@media (max-width: 991px) {
  .home-page .day-cards { grid-template-columns: 1fr 1fr; }
  .home-page .day-tiles { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .home-page .day-intro { margin-bottom: 32px; }
  .home-page .day-track { padding: 36px 0 36px; }
  .home-page .day-ticks li:not(:first-child):not(:last-child):not(.is-gong) { display: none; }
  .home-page .day-now b { font-size: 10px; }
  .home-page .day-cards { grid-template-columns: 1fr; gap: 12px; }
}

/* Event pills: drop in from above and stack when the section comes into view.
   Each column lands bottom-first so pills settle on top of each other. */
.home-page .pill-columns .pill {
  opacity: 0;
  transform: translateY(-70vh);
}
.home-page .pill-columns.is-live .pill {
  animation: pill-drop .9s cubic-bezier(.3, 1.25, .55, 1) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes pill-drop {
  0%   { opacity: 0; transform: translateY(-70vh); }
  15%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .home-page .pill-columns .pill { opacity: 1; transform: none; animation: none; }
}

/* Keep the now-label inside the line near either end. */
.home-page .day-now.at-start b { left: 0; transform: none; }
.home-page .day-now.at-end b { left: auto; right: 0; transform: none; }

/* Member Experience: photos on the cards, four equal columns, no gong card. */
.home-page .day-cards {
  grid-template-columns: repeat(4, 1fr);
}
.home-page .day-card {
  padding-top: 18px;
}
.home-page .day-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 18px;
}
.home-page .day-ticks li.is-shift {
  font-family: Ogg, serif;
  font-size: 15px;
  text-transform: none;
  letter-spacing: 0;
  color: #263942;
}
@media (max-width: 991px) {
  .home-page .day-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .home-page .day-cards { grid-template-columns: 1fr; }
  .home-page .day-ticks li:not(:first-child):not(:last-child):not(.is-shift) { display: none; }
}

/* Member Experience: two sample nights + the evening floor plan. */
.home-page .day-nights {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid rgba(59, 59, 59, .18);
}
.home-page .night-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: stretch;
}
.home-page .night-photo {
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  min-height: 280px;
}
.home-page .night-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-page .night {
  padding: 26px 26px 22px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(59, 59, 59, .12);
}
.home-page .night h4 {
  margin: 0 0 18px;
  font-family: Ogg, serif;
  font-size: clamp(24px, 2vw, 32px);
  font-weight: 500;
  line-height: 1.1;
  text-transform: none;
}
.home-page .night-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.home-page .night-rows li {
  display: grid;
  grid-template-columns: 56px 92px 1fr 1fr;
  gap: 10px;
  align-items: center;
}
.home-page .night-time {
  font: 500 12px/1 Suisseintl, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #3b3b3b;
}
.home-page .night-tag {
  display: inline-block;
  justify-self: start;
  padding: 5px 9px;
  border-radius: 4px;
  background: var(--t);
  color: var(--tc);
  font: 500 11px/1 Suisseintl, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.home-page .night-rows li > .night-tag:last-child {
  grid-column: 2 / -1;
}
.home-page .night-ev {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.home-page .night-ev b {
  font: 500 clamp(13px, 1vw, 15px)/1.25 Suisseintl, sans-serif;
  color: #263942;
}
.home-page .night-ev small {
  font: 300 12px/1.3 Suisseintl, sans-serif;
  color: rgba(59, 59, 59, .75);
}

.home-page .night-map {
  margin: 18px 0 0;
}
.home-page .night-map-scroll {
  border-radius: 20px;
  overflow: hidden;
  background: #e9e9e9;
}
.home-page .night-map img {
  display: block;
  width: 100%;
  height: auto;
}
.home-page .night-map figcaption {
  margin-top: 12px;
  font: 300 clamp(13px, 1vw, 15px)/1.5 Suisseintl, sans-serif;
  color: rgba(59, 59, 59, .8);
  max-width: 70ch;
}

/* Anytime band now has two tiles. */
.home-page .day-tiles {
  grid-template-columns: repeat(2, 1fr);
}
.home-page .day-tile:nth-child(2) { background: #ebe3d7; }

@media (max-width: 991px) {
  .home-page .night-grid { grid-template-columns: 1fr; }
  .home-page .night-photo { min-height: 0; aspect-ratio: 16 / 10; }
  .home-page .night-photo:last-child { order: 5; }
  .home-page .day-tiles { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .home-page .night { padding: 20px 16px; }
  .home-page .night-rows li { grid-template-columns: 52px 1fr; }
  .home-page .night-rows li > .night-tag { grid-column: 2; }
  .home-page .night-rows li > .night-ev { grid-column: 2; }
  .home-page .night-map-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .home-page .night-map img { width: 900px; max-width: none; }
}

/* ==================== Hero ==================== */
/* Text left; the arch video large and centered on the right. Spacing is
   on the page's 120px rhythm: 112px under the header, 72px to the photo
   strip (which adds its own 48px). */
.home-page .hero-eyebrow {
  margin: 0 0 18px;
  font: 500 clamp(11px, .85vw, 13px)/1 Suisseintl, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(59, 59, 59, .75);
}
.home-page .hero-title {
  font-family: Ogg, serif;
  font-size: clamp(40px, 4.2vw, 68px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: 0;
  text-transform: none;
  margin: 0 0 22px;
  white-space: normal;
}
.home-page .hero-title .span-italict { font-style: italic; font-weight: 400; }
.home-page .hero-lede {
  margin: 0;
  max-width: 48ch;
  font: 300 clamp(16px, 1.25vw, 20px)/1.55 Suisseintl, sans-serif;
  color: #3b3b3b;
}
.home-page .hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.home-page .hero-btn {
  display: inline-flex;
  align-items: center;
  padding: .85em 1.5em;
  border: 1px solid #263942;
  border-radius: 20em;
  font: 500 clamp(13px, 1vw, 15px)/1 Suisseintl, sans-serif;
  letter-spacing: .02em;
  text-decoration: none;
  color: #263942;
  white-space: nowrap;
  transition: background-color .25s, color .25s;
}
.home-page .hero-btn--primary { background: #263942; color: #e9e9e9; }
.home-page .hero-btn--primary:hover { background: var(--dark-slate-grey-2, #e3b4ab); color: #263942; border-color: var(--dark-slate-grey-2, #e3b4ab); }
.home-page .hero-btn--ghost { background: transparent; }
.home-page .hero-btn--ghost:hover { background: #263942; color: #e9e9e9; }

.home-page .image-loop-container {
  margin-top: 48px;
  padding-top: 0;
  padding-bottom: 24px;
}

@media (min-width: 992px) {
  .home-page .page-section.l-padding-row { padding-top: 0; }
  .home-page .relative.overflow-hidden {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "head arch";
    column-gap: 6vw;
    align-items: center;
    padding: 112px 8vw 72px;
    overflow: visible;
  }
  .home-page .container-footer.xl-padding-row.container-heading {
    grid-area: head;
    margin: 0;
    padding: 0;
    width: auto;
    min-width: 0;
  }
  .home-page .container-heading .title-wrap { max-width: none; margin: 0; }

  .home-page .video-container {
    grid-area: arch;
    margin: 0;
    max-width: none;
    align-items: center;
    justify-content: center;
  }
  .home-page .about-video {
    width: clamp(400px, 34vw, 560px);
    height: clamp(500px, 44vw, 700px);
    margin: 0;
  }
}
@media (max-width: 991px) {
  .home-page .relative.overflow-hidden { display: flex; flex-direction: column; padding-bottom: 8px; }
  .home-page .container-heading { order: 1; }
  .home-page .video-container { order: 2; margin: 32px 0 0; align-items: center; }
  .home-page .about-video { width: 100%; max-width: 420px; height: clamp(440px, 110vw, 560px); margin: 0; }
  .home-page .hero-cta { margin-top: 20px; }
  .home-page .image-loop-container { margin-top: 40px; }
}
/* Phone: clear the fixed header above the hero eyebrow. */
@media (max-width: 991px) {
  .home-page .page-section.l-padding-row { padding-top: 84px; }
}

/* Motto section: bigger polaroids, quote column flexes to fit. */
@media (min-width: 992px) {
  .home-page .polaroid-container.polaaroid-container-left,
  .home-page .polaroid-container.polaroid-container-right {
    flex: 0 0 31%;
    max-width: 31%;
    width: 31vw;
  }
  .home-page .polaroid-container .polaroid {
    width: 380px;
    max-width: 100%;
  }
  .home-page .flex-center.middle-container {
    flex: 1 1 34%;
    min-width: 0;
  }
}
@media (min-width: 992px) {
  .home-page .polaroid-container.polaaroid-container-left { margin-left: 0; }
  .home-page .polaroid-container.polaroid-container-right { margin-right: 0; }
}

/* Membership polaroid stack: larger than the pillars stack below it. */
@media (min-width: 992px) {
  .home-page .polaroid-container-2[data-stack="1"] .pillar-polaroid {
    width: 400px;
    max-width: 100%;
  }
}

/* Event pills: slower, softer drop with a longer stagger. */
.home-page .pill-columns .pill {
  transform: translateY(-40vh);
}
.home-page .pill-columns.is-live .pill {
  animation: pill-drop-soft 1.6s cubic-bezier(.22, .9, .32, 1) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes pill-drop-soft {
  0%   { opacity: 0; transform: translateY(-40vh); }
  30%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0); }
}

/* Event pills: the module gets its own headroom and clips the drop, so pills
   fall in from the module's top edge instead of across the pillars above. */
.home-page .gravity-space {
  padding-top: 104px;
  padding-bottom: 24px;
  overflow: hidden;
}
.home-page .pill-columns .pill { transform: translateY(-260px); }
@keyframes pill-drop-soft {
  0%   { opacity: 0; transform: translateY(-260px); }
  25%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0); }
}
@media (max-width: 991px) {
  .home-page .gravity-space { padding-top: 64px; }
}

/* Polaroids: sized as accents next to the text columns (442px at 1440),
   not as the dominant element. Membership stack reads a touch larger than
   the pillars stack; motto polaroids sit at the quote's scale. */
@media (min-width: 992px) {
  .home-page .polaroid-container-2[data-stack="1"] .pillar-polaroid { width: 330px; }
  .home-page .polaroid-container-2[data-stack="2"] .pillar-polaroid { width: 290px; max-width: 100%; }
  .home-page .polaroid-container.polaaroid-container-left,
  .home-page .polaroid-container.polaroid-container-right { flex-basis: 28%; max-width: 28%; width: 28vw; }
  .home-page .polaroid-container .polaroid { width: 300px; }
  .home-page .flex-center.middle-container { flex-basis: 40%; }
}

/* Hero button: same type as the header's "Join as a member" pill
   (uppercase Suisse with the last word in Ogg, arrow icon). */
.home-page .hero-btn {
  gap: .4em;
  padding: .65em 1.4em;
  font: 400 clamp(13px, 1.1vw, 17px)/1.2 Suisseintl, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.home-page .hero-btn .span-ogg { font-family: Ogg, serif; }
.home-page .hero-btn .icon-arrow { width: 1em; height: 1em; margin-left: .2em; display: inline-flex; transition: transform .3s; }
.home-page .hero-btn .icon-arrow svg { width: 100%; height: 100%; }
.home-page .hero-btn:hover .icon-arrow { transform: translateX(.4em); }

/* Co-working chips: soft tinted fills (sage, mauve, cream, mint) with a
   hairline border in the same hue, like the partner-logo tags. */
.home-page .day-chips li {
  border-color: rgba(59, 59, 59, .12);
  background: #e6ebdf;
  color: #3b3b3b;
}
.home-page .day-chips li:nth-child(4n+2) { background: #e9dde6; }
.home-page .day-chips li:nth-child(4n+3) { background: #f1e7d6; }
.home-page .day-chips li:nth-child(4n+4) { background: #dde9e4; }

/* Co-working chips: sit snug in rows (Webflow's list-item margins were
   pushing the rows apart). */
.home-page .day-chips { gap: 6px 6px; margin: 0; }
.home-page .day-chips li { margin: 0; padding: 5px 11px; line-height: 1.2; }