/* ==========================================================================
   /cape-hub
   ========================================================================== */
.only-phone-i, .only-phone-b { display: none; }

/* ---------- Hero ---------- */
.ch-hero { padding: 180px 40px 140px; display: flex; justify-content: center; background: var(--white); }
.ch-hero__inner { width: 100%; max-width: 1200px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; overflow: hidden; }
.ch-hero__kicker { font: 400 18px/27px var(--f-body); letter-spacing: 0.1em; color: var(--green); }
.ch-hero__kicker strong { font-weight: 700; }
.ch-hero__title { width: 100%; max-width: 759px; font: 600 64px/64px var(--f-head); letter-spacing: -0.04em; color: var(--ink-2); }
.ch-hero__lead { width: 100%; max-width: 603px; font: 400 18px/27px var(--f-body); color: var(--ink-3); }
.ch-hero__btns { width: 100%; display: flex; justify-content: center; align-items: center; gap: 10px; }
.ch-hero__btn { display: flex; }

/* ---------- Coworking card over photo ---------- */
.ch-cowork { position: relative; padding: 120px 80px; display: flex; flex-direction: column; align-items: center; }
.ch-cowork__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.ch-card { position: relative; width: 100%; max-width: 1200px; padding: 64px; border-radius: 32px; background: var(--card); box-shadow: var(--shadow-card); overflow: hidden; display: flex; }
.ch-card__row { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 40px; }
.ch-card__media { position: relative; flex: 1 1 0; min-width: 0; max-width: 480px; height: 435px; border-radius: 12px; overflow: hidden; }
.ch-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ch-card__body { flex: none; width: 56%; max-width: 554px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.ch-card__eyebrow { font: 700 18px/1.2 var(--f-head); letter-spacing: 0.04em; color: var(--gray); }
.ch-card__title { width: 100%; font: 700 34px/44.2px var(--f-head); letter-spacing: -0.04em; color: var(--ink-2); }
.ch-card__sub { width: 100%; font: 400 21px/1.53 var(--f-body); color: var(--teal); }
.ch-card__sub strong { font-weight: 700; }
.ch-card__text { width: 100%; font: 400 20px/1.53 var(--f-body); color: var(--slate); }

/* ---------- AI Builders Lab ---------- */
.ch-lab { padding: 100px 40px 120px; display: flex; justify-content: center; }
.ch-lab__inner { width: 100%; max-width: 1000px; display: flex; flex-direction: column; align-items: center; gap: 60px; }
.ch-lab__head { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.ch-lab__kickrow { display: flex; align-items: center; gap: 10px; }
.ch-kicker, .ch-lab__kicker { font: 700 18px/1.2 var(--f-head); letter-spacing: 0.04em; text-transform: uppercase; color: var(--green); white-space: nowrap; }
.ch-lab__tagwrap { position: relative; z-index: 1; }
.ch-lab__tag { display: flex; align-items: center; padding: 10px 14px; border-radius: 46px; background: var(--green-dark); transform: translateY(-20px) scale(0.8) rotate(-1deg); }
.ch-lab__tag p { font: 900 11px/1.5 var(--f-body); letter-spacing: 0.03em; text-transform: uppercase; color: var(--white); white-space: nowrap; }
.js .ch-lab__tagwrap[data-reveal="tag"] { transform: translateX(100px) rotate(-1deg); }
.js .ch-lab__tagwrap[data-reveal="tag"].is-in { transform: none; }
.ch-lab__titles { display: flex; flex-direction: column; gap: 8px; }
.ch-lab__title { font: 600 44px/52.8px var(--f-head); letter-spacing: -0.04em; color: var(--ink-2); }
.ch-lab__lead { font: 400 18px/27px var(--f-body); color: var(--ink-3); }

.ch-lab__benefit { width: 100%; display: flex; gap: 20px; }
.ch-lab__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 36px; overflow: clip; }
.ch-lab__text { font: 400 23px/34.5px var(--f-body); color: var(--ink-3); }
.ch-lab__boxes { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.ch-box { width: 100%; padding: 20px; display: flex; flex-direction: column; gap: 6px; background: #f8f8fa; box-shadow: inset 4px 0 0 0 var(--green); overflow: clip; }
.ch-box p { font: 400 16px/24px var(--f-body); color: var(--ink-3); }
.ch-box strong { font: 700 16px/24px var(--f-inter); font-feature-settings: var(--inter-features); }
.ch-lab__media { position: relative; flex: 1 1 0; min-width: 0; border-radius: 20px; overflow: hidden; }
.ch-lab__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* AI hardware box */
.ch-hw { position: relative; width: 100%; padding: 30px; display: flex; align-items: flex-start; gap: 40px; border-radius: 12px; background: var(--teal-ink); overflow: clip; }
.ch-hw__left { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; overflow: clip; }
.ch-hw__kicker { font: 700 14px/1.2 var(--f-head); letter-spacing: 0.04em; text-transform: uppercase; color: var(--white); }
.ch-hw__title { flex: 1 0 0; width: 100%; font: 500 34px/44.2px var(--f-head); letter-spacing: -0.04em; color: var(--white); }
.ch-hw__chips { width: 100%; display: flex; align-items: center; gap: 16px; overflow: clip; }
.ch-hw__chip { padding: 8px 16px; border-radius: 100px; background: #d5ed71; white-space: nowrap; }
.ch-hw__chip p { font: 700 16px/24px var(--f-inter); font-feature-settings: var(--inter-features); color: var(--teal-ink); }
.ch-hw__right { position: relative; z-index: 1; flex: none; width: 450px; display: flex; flex-direction: column; align-items: center; gap: 16px; overflow: clip; }
.ch-hw__list { width: 100%; display: flex; flex-direction: column; gap: 9px; overflow: clip; }
.ch-hw__item { display: flex; align-items: center; gap: 10px; overflow: clip; }
.ch-hw__item p { flex: 1 1 0; min-width: 0; font: 400 15px/21px var(--f-body); color: var(--white); }
.ch-hw__text { width: 100%; font: 400 14px/21px var(--f-body); color: var(--white); }
.ch-hw__glow { position: absolute; top: 0; width: 52%; height: 100%; pointer-events: none; z-index: 0; }
.ch-hw__glow--l { left: 0; opacity: .85; background: radial-gradient(50% 50% at 0% 50%, rgba(212, 237, 114, 0.28) 0%, rgba(212, 237, 114, 0.1) 24%, rgba(212, 237, 114, 0) 62%); }
.ch-hw__glow--r { right: 0; opacity: .8; background: radial-gradient(50% 50% at 100% 50%, rgba(212, 237, 114, 0.22) 0%, rgba(212, 237, 114, 0.08) 26%, rgba(212, 237, 114, 0) 62%); }
.js .ch-hw__glow--l.is-in { opacity: .85; }
.js .ch-hw__glow--r.is-in { opacity: .8; }

/* ---------- What's included ---------- */
.ch-incl { padding: 80px 40px; display: flex; justify-content: center; background: #f8f8fa; overflow: clip; scroll-margin-top: 100px; }
.ch-incl__inner { width: 100%; max-width: 1000px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; overflow: clip; }
.ch-incl__head { width: 100%; display: flex; flex-direction: column; gap: 3px; }
.ch-incl__title { font: 500 34px/44.2px var(--f-head); letter-spacing: -0.04em; color: var(--ink-2); }
.ch-pills { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ch-pill { padding: 12px 16px; border-radius: 100px; background: var(--white); white-space: nowrap; }
.ch-pill p, .ch-chip p { font: 400 16px/24px var(--f-body); color: var(--gray); }

/* ---------- Events ---------- */
.ch-events { padding: 120px 80px; display: flex; flex-direction: column; align-items: center; background: var(--teal-ink); }
.ch-events__row { width: 100%; max-width: 1000px; display: flex; align-items: flex-start; gap: 24px; }
.ch-events__head { position: sticky; top: 164px; z-index: 1; flex: .5 0 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 30px; }
.ch-events__titles { width: 100%; display: flex; flex-direction: column; }
.ch-events__label { font: 700 24px/1.2 var(--f-head); letter-spacing: 0.04em; color: var(--white); }
.ch-events__title { font: 500 34px/44.2px var(--f-head); letter-spacing: -0.04em; color: #d5ed71; }
.ch-events__text { width: 100%; font: 400 18px/27px var(--f-body); color: var(--white); }
.ch-events__addr { font: 400 16px/24px var(--f-body); color: var(--chip); }
.ch-events__list { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 30px; }
.ch-events__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ch-chip { padding: 8px 12px; border-radius: 100px; background: var(--white); white-space: nowrap; }
.ch-events__grid { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(50px, 1fr)); gap: 10px; overflow: clip; }
.ch-ev { display: flex; align-items: center; justify-content: center; padding: 16px 18px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--chip); }
.ch-ev--w { box-shadow: inset 0 0 0 1px var(--white); }
.ch-ev--l { box-shadow: inset 0 0 0 1px #d5ed71; }
.ch-ev__in { flex: 1 0 0; min-width: 0; display: flex; align-items: center; gap: 14px; }
.ch-ev__date { flex: none; font: 400 14px/21px var(--f-body); color: var(--chip); }
.ch-ev__name { flex: 1 0 0; min-width: 0; font: 400 16px/24px var(--f-body); color: var(--white); }

/* ---------- FAQ ---------- */
.ch-faq { padding: 100px 40px; display: flex; justify-content: center; background: #f8f8fa; overflow: hidden; }
.ch-faq__inner { width: 100%; max-width: 1000px; display: flex; flex-direction: column; gap: 40px; }
.ch-faq__head { display: flex; justify-content: space-between; align-items: flex-start; }
.ch-faq__title { flex: 1 0 0; max-width: 500px; font: 600 44px/52.8px var(--f-head); letter-spacing: -0.04em; color: var(--ink-2); }
.ch-faq__title span { display: block; }
.ch-faq__side { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; }
.ch-faq__side p { width: 320px; font: 400 18px/27px var(--f-body); color: var(--gray); }
.ch-faq__acc { display: flex; flex-direction: column; gap: 20px; }
.ch-faq__group { font: 700 16px/24px var(--f-inter); font-feature-settings: var(--inter-features); color: var(--ink-3); }
.ch-faq .qa__q h3 { color: var(--ink-2); }

/* ---------- Final CTA ---------- */
.ch-cta { padding: 80px 40px; display: flex; justify-content: center; background: var(--teal); overflow: clip; scroll-margin-top: 100px; }
.ch-cta__inner { width: 100%; max-width: 1000px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.ch-cta__title { width: 100%; font: 600 44px/52.8px var(--f-head); letter-spacing: -0.04em; color: var(--white); }
.ch-cta__text { max-width: 603px; font: 400 18px/27px var(--f-body); color: rgba(255, 255, 255, 0.8); }

/* ==========================================================================
   Tablet
   ========================================================================== */
@media (max-width: 1199.98px) {
  .ch-hero { padding: 180px 30px 120px; }
  .ch-hero__title { max-width: 600px; font-size: 49px; line-height: 49px; }
  .ch-hero__lead { max-width: 450px; font-size: 17px; line-height: 25.5px; }

  .ch-cowork { padding: 100px 25px; }
  .ch-card { padding: 40px; }
  .ch-card__row { flex-direction: column; gap: 24px; }
  .ch-card__media { flex: none; width: 100%; max-width: none; }
  .ch-card__body { width: 100%; max-width: none; }
  .ch-card__title { font: 700 30px/39px var(--f-inter); letter-spacing: -0.04em; font-feature-settings: var(--inter-features); }
  .ctag--fixed p { font-size: 20px; }

  .ch-lab { padding: 80px 30px; }
  .ch-lab__inner { gap: 60px; }
  .ch-lab__tag { padding: 8px 20px 8px 14px; }
  .ch-lab__title { font-size: 38px; line-height: 45.6px; }
  .ch-lab__lead { font-size: 17px; line-height: 25.5px; }
  .ch-lab__text { font-size: 17px; line-height: 25.5px; }
  .ch-box p, .ch-box strong { font-size: 15px; line-height: 22.5px; }
  .ch-hw__left { gap: 12px; }
  .ch-hw__title { font-size: 30px; line-height: 39px; }
  .ch-hw__chips { flex-direction: column; align-items: flex-start; gap: 8px; }
  .ch-hw__chip p { font-size: 13px; line-height: 19.5px; }
  .ch-hw__right { flex: 1 1 0; width: auto; min-width: 0; }
  .ch-hw__text { font-size: 13px; line-height: 19.5px; }

  .ch-incl { padding: 80px 30px; }
  .ch-incl__title { font-size: 30px; line-height: 39px; }
  .ch-pill p, .ch-chip p { font-size: 15px; line-height: 22.5px; }

  .ch-events { padding: 100px 25px; }
  .ch-events__label { font-size: 24px; }
  .ch-events__title { font-size: 30px; line-height: 39px; }
  .ch-events__text { font-size: 17px; line-height: 25.5px; }
  .ch-events__addr { font-size: 15px; line-height: 22.5px; }
  .ch-events__list { gap: 15px; }
  .ch-events__grid { display: flex; flex-direction: column; }
  .ch-ev__date { font-size: 13px; line-height: 19.5px; }
  .ch-ev__name { font-size: 15px; line-height: 22.5px; }

  .ch-faq { padding: 80px 30px; }
  .ch-faq__inner { gap: 30px; }
  .ch-faq__title { font-size: 38px; line-height: 45.6px; }
  .ch-faq__side { justify-content: flex-start; gap: 10px; }
  .ch-faq__side p { font-size: 17px; line-height: 25.5px; }
  .ch-faq__group { font-size: 15px; line-height: 22.5px; min-height: 23.5px; } /* Inter strong in a Lato line box: live line is 23.5px */

  .ch-cta { padding: 80px 30px; }
  .ch-cta__title { font-size: 38px; line-height: 45.6px; }
  .ch-cta__text { max-width: none; font-size: 17px; line-height: 25.5px; }
}

/* ==========================================================================
   Phone
   ========================================================================== */
@media (max-width: 809.98px) {
  .not-phone { display: none; }
  .only-phone-i { display: inline; }
  .only-phone-b { display: block; }

  .ch-hero { padding: 120px 20px 100px; }
  .ch-hero__title { max-width: 540px; font-size: 38px; line-height: 38px; }
  .ch-hero__lead { max-width: 400px; font-size: 16px; line-height: 24px; }
  .ch-hero__btns { overflow: clip; }
  .ch-hero__btn { flex: 1 0 0; min-width: 0; }
  .ch-hero__btn .btn { width: 100%; }

  .ch-cowork { padding: 80px 20px 60px; }
  .ch-card { padding: 0; flex-direction: column; }
  .ch-card__row { flex: none; width: 100%; padding: 20px; gap: 30px; }
  .ch-card__media { height: 256px; }
  .ch-card__body { gap: 12px; }
  .ch-card__eyebrow { font-size: 15px; }
  .ch-card__title { font-size: 24px; line-height: 31.2px; }

  .ch-lab { padding: 60px 20px; }
  .ch-lab__inner { gap: 40px; }
  .ch-lab__head { gap: 20px; }
  .ch-lab__titles { gap: 20px; }
  .ch-lab__kicker, .ch-kicker { font-size: 15px; }
  .ch-lab__tag { padding: 10px 14px; }
  .ch-lab__tag p { font-size: 10px; }
  .ch-lab__title { font-size: 30px; line-height: 36px; letter-spacing: -0.09em; }
  .ch-lab__lead { font-size: 16px; line-height: 24px; }
  .ch-lab__benefit { flex-direction: column; }
  .ch-lab__col { flex: none; width: 100%; order: 1; }
  .ch-lab__text { font-size: 16px; line-height: 24px; }
  .ch-box p, .ch-box strong { font-size: 14px; line-height: 21px; }
  .ch-lab__media { flex: none; width: 100%; aspect-ratio: 800 / 720; order: 0; }
  .ch-hw { flex-direction: column; gap: 12px; padding: 20px; }
  .ch-hw__left { align-self: auto; flex: none; width: 100%; gap: 16px; }
  .ch-hw__title { flex: none; font-size: 24px; line-height: 31.2px; }
  .ch-hw__chips { gap: 16px; }
  .ch-hw__chip p { font-size: 14px; line-height: 21px; }
  .ch-hw__right { flex: none; width: 100%; gap: 12px; }
  .ch-hw__list { gap: 4px; }
  .ch-hw__item p { font-size: 14px; line-height: 21px; }
  .ch-hw__text { font-size: 14px; line-height: 21px; }

  .ch-incl { padding: 70px 20px; }
  .ch-incl__inner { gap: 24px; }
  .ch-incl__title { font-size: 24px; line-height: 31.2px; }
  .ch-pills { flex-direction: column; align-items: flex-start; gap: 16px; }
  .ch-pill p, .ch-chip p { font-size: 14px; line-height: 21px; }

  .ch-events { padding: 80px 20px 60px; }
  .ch-events__row { flex-direction: column; }
  .ch-events__head { position: relative; top: auto; flex: none; width: 100%; gap: 10px; }
  .ch-events__label { font-size: 20px; }
  .ch-events__title { font: 700 24px/31.2px var(--f-inter); letter-spacing: -0.04em; font-feature-settings: var(--inter-features); }
  .ch-events__text { font-size: 16px; line-height: 24px; }
  .ch-events__addr { font-size: 14px; line-height: 21px; }
  .ch-events__list { flex: none; width: 100%; gap: 20px; }
  .ch-events__chips { align-items: flex-start; gap: 16px; }
  .ch-ev { flex-direction: column; align-items: flex-start; justify-content: center; gap: 16px; }
  .ch-ev__in { flex: none; width: 100%; }
  .ch-ev__date { font-size: 12px; line-height: 18px; }
  .ch-ev__name { font-size: 14px; line-height: 21px; }

  .ch-faq { padding: 60px 20px; }
  .ch-faq__inner { gap: 20px; }
  .ch-faq__head { flex-direction: column; align-items: center; gap: 10px; text-align: center; }
  .ch-faq__title { flex: none; max-width: none; font-size: 30px; line-height: 36px; letter-spacing: -0.09em; }
  .ch-faq__side { align-self: center; align-items: center; justify-content: center; gap: 16px; }
  .ch-faq__side p { font-size: 16px; line-height: 24px; }
  .ch-faq__group { font-size: 14px; line-height: 21px; min-height: 0; }

  .ch-cta { padding: 70px 20px; }
  .ch-cta__title { font-size: 30px; line-height: 36px; letter-spacing: -0.09em; }
  .ch-cta__text { max-width: 400px; font-size: 16px; line-height: 24px; }
}

/* Framer marks the current page's footer link (shared footer has no current-page state) */
.footer a[href="/cape-hub"] { color: var(--green-dark); }