/* ==========================================================================
   /coworking
   ========================================================================== */

/* Manrope 400 is used on this page but missing from fonts.css (tools/fonts.mjs skips Google-Fonts
   @font-face blocks that quote the family name with single quotes). Same file the live site loads. */
@font-face { font-family: "Manrope"; src: url("https://fonts.gstatic.com/s/manrope/v20/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk79FN_C-bk.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Hero ---------- */
.cw-hero { min-height: 50vh; padding: 200px 40px 140px; display: flex; justify-content: center; align-items: flex-start; background: var(--white); }
.cw-hero__inner { width: 100%; max-width: 1200px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; overflow: hidden; }
.cw-hero__title { width: 100%; max-width: 698px; font: 600 64px/64px var(--f-head); letter-spacing: -0.04em; color: var(--ink-2); }
.cw-hero__lead { width: 100%; max-width: 650px; font: 400 23px/34.5px var(--f-body); color: var(--ink-3); }
.cw-hero__cta { width: 100%; display: flex; justify-content: center; align-items: center; gap: 20px; }

/* ---------- Coworking card ---------- */
.cw-cowork { position: relative; padding: 120px 80px; display: flex; flex-direction: column; align-items: center; background: #225e5b; }
.cw-badge { position: absolute; top: -50px; left: 50%; transform: translateX(-50%); z-index: 1; padding: 16px; border-radius: 200px; background: var(--white); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); overflow: clip; }
.cw-badge img { width: 71px; height: 71px; object-fit: cover; }
.cw-card { width: 100%; max-width: 1200px; padding: 64px; border-radius: 32px; background: #fcfcfc; box-shadow: var(--shadow-card); overflow: hidden; display: flex; }
.cw-card__row { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 64px; }
.cw-card__body { flex: none; width: 56%; max-width: 554px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.cw-card__title { width: 100%; font: 700 40px/1.24 var(--f-head); letter-spacing: -1px; color: #0d1f21; }
.cw-card__text { width: 100%; font: 400 23px/34.5px var(--f-body); color: var(--ink-2); }
.cw-card__media { position: relative; flex: 1 1 0; min-width: 0; max-width: 480px; height: 435px; border-radius: 12px; overflow: hidden; }
.cw-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Slideshow ---------- */
.cw-slides { position: relative; height: 598px; user-select: none; }
.cw-slides__viewport { position: absolute; inset: 0; overflow: hidden; }
.cw-slides__track { display: flex; gap: 10px; height: 100%; margin: 0; padding: 0; list-style: none; will-change: transform; }
.cw-slides__track.is-moving { transition: transform .9s cubic-bezier(0.16, 1, 0.3, 1); }
.cw-slide { position: relative; flex: none; width: 100%; height: 100%; }
.cw-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cw-slides__arrows { position: absolute; inset: 20px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.cw-slides__arrow { width: 40px; height: 40px; border-radius: 40px; background: rgba(0, 0, 0, 0.2); overflow: hidden; pointer-events: auto; }
.cw-slides__arrow img { width: 40px; height: 40px; }
.cw-slides__dots { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; align-items: center; border-radius: 50px; background: rgba(0, 0, 0, 0.2); overflow: hidden; }
.cw-slides__dot { display: flex; padding: 10px 5px; }
.cw-slides__dot:first-child { padding-left: 10px; }
.cw-slides__dot:last-child { padding-right: 10px; }
.cw-slides__dot span { width: 10px; height: 10px; border-radius: 50%; background: var(--white); opacity: .5; transition: opacity .2s var(--ease); }
.cw-slides__dot.is-active span { opacity: 1; }

/* ---------- Membership rows (also used by "Beyond Codefi") ---------- */
.cw-plans { padding: 120px 80px; display: flex; flex-direction: column; align-items: center; overflow: hidden; }
.cw-plans__list { width: 100%; max-width: 1126px; display: flex; flex-direction: column; align-items: center; gap: 120px; }
.cw-plan { width: 100%; display: flex; align-items: center; gap: 64px; }
.cw-plan__media { flex: 1 1 0; min-width: 0; max-width: 480px; display: flex; align-items: center; }
.cw-plan__media figure { position: relative; flex: 1 1 0; height: 460px; border-radius: 32px; overflow: hidden; }
.cw-plan__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cw-plan__body { flex: 1 1 0; min-width: 0; max-width: 582px; display: flex; flex-direction: column; align-items: flex-start; gap: 56px; }
.cw-plan--flip .cw-plan__media { order: 1; }
.cw-plan__head { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.cw-plan__title { width: 100%; font: 700 40px/1.24 var(--f-head); letter-spacing: -1px; color: #343a40; }
.cw-plan__text { width: 100%; font: 400 20px/1.53 var(--f-body); color: #64686e; }
.cw-plan__price { width: 100%; display: flex; justify-content: space-between; align-items: center; overflow: clip; }
.cw-plan__amount { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; white-space: nowrap; }
.cw-plan__label { font: 400 20px/1.53 var(--f-body); color: #64686e; }
.cw-plan__amount h4 { font: 400 32px/1.26 var(--f-head); letter-spacing: -1px; color: #343a40; }
.cw-plan__note, .cw-pilltag p, .cw-space__text p { font: 400 14px/1.54 "Manrope", var(--f-body); letter-spacing: 0.1px; color: #64686e; }
.cw-pilltag { display: flex; align-items: center; padding: 4px 12px; border-radius: 8px; box-shadow: inset 0 0 0 1px #e4e6e6; }
.cw-pilltag p { color: #0d1f21; white-space: nowrap; }
.cw-pilltag--light { box-shadow: inset 0 0 0 1px #e4e7e7; }
.cw-pilltag--light p { color: var(--mint); }

/* ---------- What we offer ---------- */
.cw-offer { padding: 120px 80px; display: flex; flex-direction: column; align-items: center; background: #225e5b; }
.cw-offer__inner { width: 100%; max-width: 1360px; display: flex; flex-direction: column; align-items: center; gap: 42px; overflow: hidden; }
.cw-offer__head { width: 847px; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cw-offer__title { width: 100%; font: 700 48px/1.17 var(--f-head); letter-spacing: -1.2px; text-align: center; color: var(--mint); }
.cw-offer__grid { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 24px; overflow: clip; }
.cw-offer__item { width: 31%; display: flex; align-items: center; padding: 20px; border-radius: 12px; background: var(--teal); overflow: clip; }
.cw-offer__item p { flex: 1 1 0; min-width: 0; font: 400 20px/1.53 var(--f-body); color: var(--white); }
.cw-offer__note { width: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; opacity: 0; transform: perspective(1200px) translateY(80px); }
.cw-offer__note h6 { width: 80%; font: 400 20px/1.38 var(--f-head); letter-spacing: -0.2px; text-align: center; color: #f1f2f4; }

/* ---------- Beyond Codefi ---------- */
.cw-beyond { padding: 120px 80px; display: flex; flex-direction: column; align-items: center; overflow: hidden; }
.cw-beyond__inner { width: 100%; max-width: 1126px; display: flex; flex-direction: column; align-items: center; gap: 120px; background: #fcfcfc; }
.cw-beyond__row { background: #fcfcfc; }
.cw-beyond__body { flex: 1 1 0; min-width: 0; max-width: 582px; display: flex; flex-direction: column; align-items: flex-start; gap: 56px; }
.cw-beyond__feature { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.cw-beyond__feature h5 { font: 500 24px/1.35 var(--f-head); letter-spacing: -0.7px; color: #343a40; }
.cw-spaces { width: 100%; display: flex; justify-content: center; align-items: center; gap: 16px; overflow: clip; }
.cw-space { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 32px 24px; border-radius: 12px; background: var(--white); box-shadow: inset 0 0 0 1px #f1f2f4; overflow: clip; }
.cw-space__img { position: relative; width: 100%; aspect-ratio: 1.66667; }
.cw-space__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cw-space__text { width: 100%; display: flex; flex-direction: column; gap: 10px; overflow: clip; }
.cw-space__text h5 { font: 500 24px/1.35 var(--f-head); letter-spacing: -0.7px; color: var(--teal); }

/* ---------- Final CTA ---------- */
.cw-cta { padding: 100px 40px; display: flex; flex-direction: column; align-items: center; background: var(--teal); overflow: hidden; }
.cw-cta__inner { width: 100%; max-width: 1000px; display: flex; justify-content: space-between; align-items: center; }
.cw-cta__title { width: 38%; max-width: 500px; font: 600 44px/52.8px var(--f-head); letter-spacing: -0.04em; color: var(--white); }
.cw-cta__side { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; overflow: clip; }
.cw-cta__side p { width: 400px; font: 400 18px/27px var(--f-body); color: var(--white); }

/* ==========================================================================
   Tablet
   ========================================================================== */
@media (max-width: 1199.98px) {
  .cw-hero { min-height: 65vh; padding: 140px 30px 80px; }
  .cw-hero__title { max-width: 600px; font-size: 49px; line-height: 49px; }
  .cw-hero__lead { max-width: 450px; font-size: 17px; line-height: 25.5px; }

  .cw-cowork { padding: 100px 25px; }
  .cw-card { padding: 40px; }
  .cw-card__row { flex-direction: column; gap: 24px; }
  .cw-card__body { order: 1; width: 100%; max-width: none; }
  .cw-card__media { order: 0; flex: none; width: 100%; max-width: none; }
  .cw-card__title { font-size: 38px; }
  .cw-card__text { font-size: 17px; line-height: 25.5px; }
  .cw-slides { height: 444px; }

  .cw-plans { padding: 100px 25px; }
  .cw-plan { flex-direction: column; }
  .cw-plan__media, .cw-plan--flip .cw-plan__media { order: 0; flex: none; width: 100%; max-width: none; }
  .cw-plan__media figure { height: 360px; }
  .cw-plan__body, .cw-beyond__body { order: 1; flex: none; width: 100%; max-width: none; }
  .cw-plans .cw-plan__title { font-size: 38px; }
  .cw-plans .cw-plan--office .cw-plan__title { font-size: 40px; }
  .cw-plans .cw-plan__text, .cw-plan__label { font-size: 17px; }

  .cw-offer { padding: 100px 25px; }
  .cw-offer__inner { gap: 40px; }
  .cw-offer__title { font-size: 46px; }
  .cw-offer__grid { gap: 8px 12px; }
  .cw-offer__item { width: 368px; }
  .cw-offer__item:nth-child(10) { order: 10; }
  .cw-offer__item:nth-child(11) { order: 11; }
  .cw-offer__item:nth-child(12) { order: 9; }
  .cw-offer__item p { font-size: 17px; }
  .cw-offer__note { justify-content: flex-start; }

  .cw-beyond { padding: 100px 25px; }
  .cw-space__text { justify-content: flex-start; }

  .cw-cta { padding: 80px 30px; }
  .cw-cta__inner { gap: 0; }
  .cw-cta__title { font-size: 38px; line-height: 45.6px; }
  .cw-cta__side p { font-size: 17px; line-height: 25.5px; }
}

/* ==========================================================================
   Phone
   ========================================================================== */
@media (max-width: 809.98px) {
  .cw-hero { min-height: 0; padding: 120px 20px 115px; }
  .cw-hero__title { max-width: 540px; font-size: 38px; line-height: 38px; }
  .cw-hero__lead { max-width: 400px; font-size: 16px; line-height: 24px; }

  .cw-cowork { padding: 80px 25px 60px; }
  .cw-card { padding: 0; flex-direction: column; }
  .cw-card__row { flex: none; width: 100%; padding: 20px; gap: 30px; }
  .cw-card__media { height: 256px; }
  .cw-card__body { gap: 12px; }
  .cw-card__title { font-size: 30px; }
  .cw-card__text { font-size: 16px; line-height: 24px; }
  .cw-slides { height: 295px; }

  .cw-plans { padding: 60px 25px; }
  .cw-plans__list { gap: 60px; }
  .cw-plan { gap: 44px; }
  .cw-plan__media { height: 256px; }
  .cw-plan__media figure { height: 249px; }
  .cw-plans .cw-plan__title { font-size: 30px; }
  .cw-plans .cw-plan--office .cw-plan__title { font-size: 40px; }
  .cw-plans .cw-plan__text, .cw-plan__label { font-size: 15px; }
  .cw-plan__amount h4 { font-size: 28px; }

  .cw-offer { padding: 60px 16px; }
  .cw-offer__title { font-size: 38px; }
  .cw-offer__grid { flex-direction: column; gap: 12px 24px; }
  .cw-offer__item { width: 100%; order: 0 !important; }
  .cw-offer__item p { font-size: 15px; }
  .cw-offer__note { justify-content: center; }
  .cw-offer__note h6 { font-size: 18px; }

  .cw-beyond { padding: 60px 25px; }
  .cw-beyond__inner { gap: 60px; }
  .cw-spaces { flex-direction: column; }
  .cw-space { flex: none; width: 100%; padding: 16px 8px 12px; }
  .cw-space__text h5 { font: 400 16px/1.2 var(--f-inter); letter-spacing: normal; font-feature-settings: var(--inter-features); }

  .cw-cta { padding: 60px 20px; }
  .cw-cta__inner { flex-direction: column; justify-content: flex-start; gap: 20px; }
  .cw-cta__title { width: 60%; font-size: 30px; line-height: 36px; letter-spacing: -0.09em; text-align: center; }
  .cw-cta__side { width: 100%; align-items: center; }
  .cw-cta__side p { width: 100%; font-size: 16px; line-height: 24px; text-align: center; }
}