/*!
  Template:  Commona | Coworking Space HTML Template
  Version:   1.0.0
  Author:    MOONSHOTS
  Website:   https://m00nshots.dev
  Contact:   build@m00nshots.dev
  Copyright: (c) 2026 m00nshots. All rights reserved.
*/
/* ==========================================================================
   COMMONA THEME — Coworking Space
   Design language: warm architecture. Oat paper, terracotta + olive,
   visible column rules, arch & circle photo masks, outline pill buttons
   that fill on hover, uppercase micro labels and a two-row desktop header.
   --------------------------------------------------------------------------
   01. Tokens (light / dark)      08. Floor plan (signature)
   02. Base, rules, labels        09. Membership comparison (signature)
   03. Buttons                    10. Locations & events (signature)
   04. Header (two rows)          11. Home variations
   05. Shared components          12. Inner pages
   06. Heroes                     13. Footer
   07. Booking widget (signature)
   ========================================================================== */

/* 01. Tokens ------------------------------------------------------------- */
:root {
  --bg: #f3eee4; --bg-2: #e8dccb; --surface: #fbf8f2; --surface-2: #efe7da;
  --text: #222222; --muted: #6a625a; --line: rgba(34, 34, 34, .13);
  --primary: #d0643b; --primary-2: #5b6b3a; --accent: #e0a93b; --on-primary: #fff;
  --cm-ink: #222222; --cm-rule: rgba(34, 34, 34, .09); --cm-olive: #5b6b3a; --cm-terra: #d0643b;
  --font-head: "Epilogue", system-ui, sans-serif; --font-body: "Karla", system-ui, sans-serif;
  --font-logo: "Gloock", Georgia, serif; --logo-weight: 400; --logo-size: 1.6rem; --logo-tracking: -0.01em; --logo-case: none;
  --head-weight: 600; --head-tracking: -0.03em;
  --radius-sm: 8px; --radius: 12px; --radius-lg: 12px; --radius-btn: 999px;
  --gradient: linear-gradient(135deg, #d0643b, #e0a93b);
  --shadow: 0 22px 44px -26px rgba(64, 40, 20, .38);
  --shadow-lg: 0 40px 80px -30px rgba(64, 40, 20, .4);
  --cm-top: 0px; --cm-pad: 16px; --cm-max: 100vw;
}
[data-theme="dark"] {
  --bg: #1c1916; --bg-2: #25211d; --surface: #2a2521; --surface-2: #332d28;
  --text: #f3eee4; --muted: #b3a999; --line: rgba(243, 238, 228, .13);
  --primary: #e0764d; --primary-2: #a6b57a; --on-primary: #1c1916;
  --cm-rule: rgba(243, 238, 228, .055); --cm-olive: #a6b57a;
  --shadow: 0 22px 44px -26px rgba(0, 0, 0, .7);
}
@media (min-width: 640px) { :root { --cm-max: 640px; } }
@media (min-width: 768px) { :root { --cm-max: 768px; --cm-pad: 24px; } }
@media (min-width: 1024px) { :root { --cm-max: 1024px; --cm-top: 38px; } }
@media (min-width: 1280px) { :root { --cm-max: 1280px; --cm-pad: 32px; } }
@media (min-width: 1536px) { :root { --cm-max: 1440px; } }
@media (min-width: 1920px) { :root { --cm-max: 1600px; } }

/* 02. Base, column rules, labels ---------------------------------------- */
body { font-size: 17px; }
/* thin vertical column rules aligned to the container, behind every section */
body { position: relative; }
body::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; z-index: -1; pointer-events: none;
  width: min(calc(100% - 2 * var(--cm-pad)), calc(var(--cm-max) - 2 * var(--cm-pad))); transform: translateX(-50%);
  border-right: 1px solid var(--cm-rule);
  background: linear-gradient(90deg, var(--cm-rule) 1px, transparent 1px) 0 0 / 50% 100% repeat-x;
}
@media (min-width: 1024px) { body::before { background-size: 25% 100%; } }
.section--alt { background: color-mix(in srgb, var(--bg-2) 62%, transparent); }
[data-theme="dark"] .section--alt { background: color-mix(in srgb, var(--bg-2) 80%, transparent); }
h1, h2, h3 { text-wrap: balance; }
.h2 em, .hero__title em, .page-header h1 em, .cm-studio__title em { font-style: normal; color: var(--primary); }
.eyebrow, .cm-label {
  display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: .74rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--cm-olive); margin-bottom: 18px;
}
.eyebrow::before, .cm-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); flex: none; }
.cm-label--pill { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.lead { color: var(--muted); }
.cm-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.cm-arch { overflow: hidden; border-radius: 1000px 1000px var(--radius) var(--radius) / 700px 700px var(--radius) var(--radius); }
.cm-arch img { width: 100%; height: 100%; display: block; }
.icon-box { border-radius: 50%; background: color-mix(in srgb, var(--primary) 14%, transparent); }
.logo__mark { width: 34px; height: 38px; border-radius: 17px 17px 4px 4px; background: var(--primary); color: #fff; font-size: 1.1rem; }
.card, .plan, .step { border-radius: var(--radius); }
.card:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); }
.stat__num { font-weight: 600; color: var(--text); }
.stats--bordered .stat { border-left: 1px solid var(--primary); }
.logos { opacity: .75; }
.logos span { font-weight: 600; font-size: 1.15rem; }
.logos .ti { color: var(--primary); }
.logos-title { text-transform: uppercase; letter-spacing: .18em; font-size: .74rem; font-weight: 600; }
.text-band { background: var(--cm-olive); color: #f3eee4; --text: #f3eee4; border: 0; }
[data-theme="dark"] .text-band { background: #3b4427; }
.text-band .marquee__track .ti { color: var(--accent); }
.testimonial .stars { color: var(--accent); }
.testimonial blockquote { font-size: 1.05rem; }
.accordion__btn { font-weight: 600; }
.accordion__item.is-open .accordion__icon { background: var(--primary); color: #fff; }
.form-success { border-radius: var(--radius); }
.input, .select, .textarea { border-radius: var(--radius); background: var(--surface); }
.page-header .hero__decor { display: none; }
.page-header { padding-top: calc(var(--header-h) + var(--cm-top) + clamp(56px, 8vw, 110px)); border-bottom: 1px solid var(--line); }
.page-header h1 { font-size: clamp(2.5rem, 6.4vw, 5.4rem); max-width: 15ch; font-weight: 600; }
.error-page .code { color: var(--primary); background: none; -webkit-text-fill-color: currentColor; font-weight: 700; }
.muted { color: var(--muted); }

/* 03. Buttons: outline pills that fill on hover ------------------------- */
.btn {
  --btn-c: var(--primary); --btn-on: var(--on-primary);
  background: transparent; color: var(--btn-c); border: 1.5px solid var(--btn-c); font-weight: 600; letter-spacing: .01em;
}
.btn::after { background: var(--btn-c); transform: translateY(101%); border-radius: inherit; }
.btn:hover { color: var(--btn-on); box-shadow: none; }
.btn--gradient { background: var(--btn-c); color: var(--btn-on); }
.btn--gradient::after { background: var(--text); }
.btn--gradient:hover { color: var(--bg); }
.btn--ghost { --btn-c: var(--text); --btn-on: var(--bg); border-color: var(--line); color: var(--text); }
.btn--ghost:hover { border-color: var(--text); }
.btn--light { --btn-c: #f3eee4; --btn-on: #222; background: #f3eee4; color: #222; }
.btn--light::after { background: var(--accent); }
.btn--light:hover { color: #222; }
.cm-btn-line { --btn-c: #f3eee4; --btn-on: #222; }
.billing-toggle { border-radius: 999px; background: var(--surface); }
.billing-toggle button.is-active { background: var(--primary); color: var(--on-primary); box-shadow: none; }
.billing-toggle small { color: var(--cm-olive); }
.billing-toggle button.is-active small { color: inherit; opacity: .85; }
.link-arrow { color: var(--primary); }

/* 04. Header: two rows on desktop -------------------------------------- */
.site-header { border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: top .4s var(--ease), background .4s, box-shadow .4s, transform .5s var(--ease), height .4s; }
.site-header.is-scrolled { background: color-mix(in srgb, var(--bg) 90%, transparent); }
.nav__link { font-weight: 500; font-size: .95rem; }
.nav__link.is-active { color: var(--primary); }
.nav__link.is-active::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--primary); margin-left: 2px; }
.dropdown { border-radius: var(--radius); }
.dropdown a { border-radius: 8px; }
.cm-hbtn { --btn-c: var(--text); --btn-on: var(--bg); }
.cm-topbar { display: none; }
@media (min-width: 1024px) {
  .cm-topbar {
    display: block; position: fixed; top: 0; left: 0; right: 0; height: var(--cm-top); z-index: 101;
    background: var(--cm-ink); color: #f3eee4; font-size: .8rem; transition: transform .4s var(--ease);
  }
  [data-theme="dark"] .cm-topbar { background: #3b4427; }
  .cm-topbar__in { height: 100%; display: flex; align-items: center; gap: 24px; }
  .cm-topbar__tag, .cm-topbar__hours { display: inline-flex; align-items: center; gap: 8px; flex: none; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .7rem; }
  .cm-topbar__tag .ti, .cm-topbar__hours .ti { color: var(--accent); font-size: 1rem; }
  .cm-topbar__hours b { color: var(--accent); }
  .cm-topbar__ticker { flex: 1; min-width: 0; }
  .cm-topbar__ticker .marquee__track { gap: 40px; padding-right: 40px; }
  .cm-topbar__ticker span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; opacity: .88; }
  body:has(.cm-topbar) .site-header { top: var(--cm-top); }
  body:has(.cm-topbar) .site-header.is-scrolled { top: 0; }
  .site-header.is-scrolled ~ main .cm-topbar { transform: translateY(-100%); }
}

/* 05. Shared components ------------------------------------------------- */
/* rotating seal */
.cm-seal { position: absolute; display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%; background: var(--accent); color: #222; box-shadow: var(--shadow); }
.cm-seal svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: cm-spin 22s linear infinite; }
.cm-seal text { font-family: var(--font-body); font-size: 10.4px; font-weight: 600; letter-spacing: .16em; fill: currentColor; }
.cm-seal__ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #222; color: #f3eee4; font-size: 1.4rem; transition: transform .5s var(--ease); }
.cm-seal:hover .cm-seal__ic { transform: rotate(45deg); }
@keyframes cm-spin { to { transform: rotate(360deg); } }
/* space cards */
.cm-space { display: flex; flex-direction: column; gap: 18px; }
.cm-space__img img { aspect-ratio: 4/5; transition: transform 1.2s var(--ease); }
.cm-space:hover .cm-space__img img { transform: scale(1.05); }
.cm-space__num { font-family: var(--font-head); font-size: .85rem; font-weight: 600; color: var(--primary); display: block; margin-bottom: 8px; }
.cm-space h3 { font-size: 1.35rem; margin-bottom: 8px; }
.cm-space p { color: var(--muted); margin-bottom: 14px; font-size: .98rem; }
.cm-space__price { display: inline-flex; align-items: center; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); width: 100%; font-weight: 600; color: var(--cm-olive); }
.cm-space:hover .cm-space__price { color: var(--primary); }
/* amenities */
.cm-ams { display: grid; gap: 0; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
@media (min-width: 640px) { .cm-ams { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cm-ams--4 { grid-template-columns: repeat(4, 1fr); } }
.cm-am { display: flex; gap: 16px; padding: 26px 20px 26px 0; border-bottom: 1px solid var(--line); }
.cm-am h3 { font-size: 1.1rem; margin: 4px 0 6px; }
.cm-am p { color: var(--muted); margin: 0; font-size: .95rem; }
.cm-am__ic { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--primary); color: var(--primary); font-size: 1.35rem; }
/* CTA */
.cm-cta { display: grid; gap: 32px; align-items: center; padding: clamp(28px, 5vw, 64px); border-radius: var(--radius); background: var(--cm-olive); color: #f3eee4; --text: #f3eee4; --muted: rgba(243, 238, 228, .78); overflow: hidden; }
[data-theme="dark"] .cm-cta { background: #343d22; }
.cm-cta .cm-label { color: var(--accent); }
.cm-cta .cm-label::before { background: var(--accent); }
.cm-cta .h2 em { color: var(--accent); }
.cm-cta .lead { color: var(--muted); margin-bottom: 32px; }
.cm-cta__img { max-width: 420px; justify-self: center; width: 100%; }
.cm-cta__img img { aspect-ratio: 7/8.2; }
@media (min-width: 1024px) { .cm-cta { grid-template-columns: 1.3fr 1fr; gap: 64px; } .cm-cta__img { justify-self: end; margin-bottom: calc(-1 * clamp(28px, 5vw, 64px)); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } }

/* 06. Heroes ----------------------------------------------------------- */
.hero { padding-top: calc(var(--header-h) + var(--cm-top) + clamp(40px, 6vw, 88px)); }
.hero__title { font-weight: 600; letter-spacing: -0.04em; }
.avatars img { border-color: var(--bg); }
/* Home 1 */
.cm-hero__grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1024px) { .cm-hero__grid { grid-template-columns: 1.1fr .9fr; gap: 64px; } }
.cm-hero .hero__title { font-size: clamp(2.8rem, 6.4vw, 5.8rem); max-width: 11ch; }
.cm-hero__vis { position: relative; max-width: 520px; width: 100%; justify-self: center; padding: 0 0 40px 0; }
.cm-hero__arch img { aspect-ratio: 9/11; }
.cm-hero__circle { position: absolute; left: -6%; bottom: 0; width: 38%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 8px solid var(--bg); }
.cm-hero__circle img { width: 100%; height: 100%; }
.cm-hero .cm-seal { right: -4%; top: 12%; }
.cm-hero { padding-bottom: clamp(80px, 10vw, 140px); }
.cm-bookbar { position: relative; z-index: 2; margin-top: clamp(-90px, -6vw, -48px); }
/* Home 2: framed photo */
.cm-frame__stage { position: relative; display: grid; gap: 20px; }
.cm-frame__img { border-radius: var(--radius); overflow: hidden; }
.cm-frame__img img { width: 100%; aspect-ratio: 16/10; min-height: 280px; }
.cm-frame__panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 4vw, 48px); }
.cm-frame__panel .hero__title { font-size: clamp(2.4rem, 5vw, 4.4rem); max-width: 12ch; }
.cm-frame__panel .lead { margin-bottom: 28px; }
.cm-frame__facts { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.cm-frame__facts li { padding: 18px 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cm-frame__facts li:nth-child(2n) { border-right: 0; }
.cm-frame__facts li:nth-child(n+3) { border-bottom: 0; }
.cm-frame__facts b { display: block; font-family: var(--font-head); font-size: 1.8rem; font-weight: 600; color: var(--primary); line-height: 1.1; }
.cm-frame__facts span { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
@media (min-width: 1024px) {
  .cm-frame__stage { display: block; padding-bottom: 60px; }
  .cm-frame__img img { aspect-ratio: auto; height: min(78vh, 720px); }
  .cm-frame__panel { position: absolute; left: 32px; bottom: 0; width: min(600px, 52%); box-shadow: var(--shadow-lg); }
  .cm-frame__facts { position: absolute; right: 32px; top: 32px; grid-template-columns: 1fr; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px); }
  .cm-frame__facts li { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; }
  .cm-frame__facts li:last-child { border-bottom: 0 !important; }
}
/* Home 3: studio hub */
.cm-studio__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.cm-studio__top .cm-label { margin: 0; }
.cm-studio__title { font-size: clamp(3rem, 11vw, 10.5rem); line-height: .92; letter-spacing: -0.055em; font-weight: 700; margin-bottom: 32px; }
.cm-studio__title em { color: var(--cm-olive); }
.cm-studio__row { display: grid; gap: 24px; align-items: end; padding-top: 28px; border-top: 1px solid var(--line); }
@media (min-width: 1024px) { .cm-studio__row { grid-template-columns: 1fr auto; } .cm-studio__row .lead { margin: 0; } }
.cm-trio { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 2vw, 28px); align-items: end; margin-top: clamp(40px, 6vw, 72px); }
.cm-trio img { width: 100%; height: 100%; }
.cm-trio__a, .cm-trio__c { border-radius: 50%; aspect-ratio: 1; position: relative; }
.cm-trio__a img, .cm-trio__c img { border-radius: 50%; }
.cm-trio__a { margin-bottom: 18%; }
.cm-trio__b img { aspect-ratio: 4/5; }
.cm-trio__c .cm-seal { right: -6%; top: -30%; width: clamp(84px, 11vw, 132px); height: clamp(84px, 11vw, 132px); }
@media (max-width: 767px) { .cm-trio__c .cm-seal { display: none; } .cm-trio__b { grid-column: 1 / -1; grid-row: 1; } .cm-trio__a { margin-bottom: 0; } }
@media (min-width: 768px) { .cm-trio { grid-template-columns: 1fr 1.3fr 1fr; } }
/* Home 4: venue */
.cm-venue__grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .cm-venue__grid { grid-template-columns: 1.15fr .85fr; gap: 64px; } }
.cm-venue .hero__title { font-size: clamp(2.6rem, 5.6vw, 5rem); max-width: 12ch; }
.cm-venue__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.cm-venue__chips li { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-weight: 500; font-size: .92rem; }
.cm-venue__chips .ti { color: var(--primary); font-size: 1.15rem; }
.cm-venue__strip { margin-top: clamp(48px, 6vw, 80px); border-radius: 1000px 1000px var(--radius) var(--radius) / 360px 360px var(--radius) var(--radius); overflow: hidden; }
.cm-venue__strip img { width: 100%; aspect-ratio: 18/7; min-height: 220px; }

/* 07. Booking widget ---------------------------------------------------- */
.cm-book { position: relative; display: grid; gap: 18px; padding: clamp(20px, 3vw, 30px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.cm-book__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.cm-book__top .cm-label { margin: 0; }
.cm-book__live { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--muted); }
.cm-book__live .cm-dot { background: #5f9a4a; box-shadow: 0 0 0 4px color-mix(in srgb, #5f9a4a 22%, transparent); }
.cm-book__fields { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.cm-book__fields > :nth-child(-n+2) { grid-column: 1 / -1; }
.cm-book__field { display: grid; gap: 6px; min-width: 0; }
.cm-book__lbl { font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cm-book__ctl { width: 100%; min-width: 0; min-height: 50px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--text); font-weight: 500; }
.cm-book__ctl:focus { outline: none; border-color: var(--primary); }
[data-theme="dark"] .cm-book__ctl { color-scheme: dark; }
.cm-step { display: flex; align-items: center; min-height: 50px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); overflow: hidden; }
.cm-step button { flex: none; display: grid; place-items: center; width: 44px; height: 48px; color: var(--primary); font-size: 1.1rem; transition: background .3s; }
.cm-step button:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); }
.cm-step input { flex: 1; min-width: 0; width: 100%; text-align: center; border: 0; background: transparent; font-family: var(--font-head); font-weight: 600; font-size: 1.1rem; -moz-appearance: textfield; appearance: textfield; }
.cm-step input::-webkit-inner-spin-button, .cm-step input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.cm-step input:focus { outline: none; }
.cm-book__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; border-top: 1px dashed var(--line); }
.cm-book__total { display: grid; gap: 2px; }
.cm-book__total output { font-family: var(--font-head); font-weight: 700; font-size: 2.2rem; line-height: 1; letter-spacing: -0.03em; color: var(--primary); }
.cm-book__total small { color: var(--muted); font-size: .85rem; }
.cm-book.is-sent .form-success { display: block; }
@media (min-width: 1024px) {
  .cm-book--row { grid-template-columns: 1fr auto; column-gap: 28px; align-items: end; }
  .cm-book--row .cm-book__top { grid-column: 1 / -1; }
  .cm-book--row .cm-book__fields { grid-template-columns: 1.4fr 1fr .8fr .8fr; }
  .cm-book--row .cm-book__fields > :nth-child(-n+2) { grid-column: auto; }
  .cm-book--row .cm-book__foot { padding: 0 0 0 28px; border-top: 0; border-left: 1px dashed var(--line); flex-wrap: nowrap; }
  .cm-book--row .form-success { grid-column: 1 / -1; }
}

/* 08. Floor plan -------------------------------------------------------- */
.cm-fp { padding: clamp(16px, 3vw, 28px); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); min-width: 0; }
.cm-fp__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; margin-bottom: 18px; }
.cm-fp__head .cm-label { margin-bottom: 6px; }
.cm-fp__title { font-size: 1.3rem; margin: 0; }
.cm-fp__legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .82rem; color: var(--muted); }
.cm-fp__legend li { display: inline-flex; align-items: center; gap: 6px; }
.cm-fp__key { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--cm-olive); }
.cm-fp__key--sel { background: var(--primary); border-color: var(--primary); }
.cm-fp__key--taken { background: repeating-linear-gradient(45deg, var(--line), var(--line) 3px, transparent 3px, transparent 6px); border-color: var(--line); }
.cm-fp__key--fixed { background: var(--bg-2); border-color: transparent; }
.cm-fp__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(4px, .8vw, 8px);
  grid-template-rows: repeat(3, clamp(30px, 5vw, 50px)) 24px repeat(2, clamp(26px, 4vw, 40px)) 14px repeat(2, clamp(26px, 4vw, 40px));
  padding: clamp(8px, 1.5vw, 16px); border: 2px solid var(--text); border-radius: 6px; position: relative;
  background-image: linear-gradient(var(--cm-rule) 1px, transparent 1px), linear-gradient(90deg, var(--cm-rule) 1px, transparent 1px); background-size: 20px 20px;
}
.cm-fp__room, .cm-fp__desk { position: relative; display: grid; place-items: center; align-content: center; min-width: 0; border-radius: 6px; border: 1.5px solid var(--cm-olive); background: color-mix(in srgb, var(--cm-olive) 10%, var(--surface)); color: var(--text); transition: background .25s, border-color .25s, color .25s, transform .25s; overflow: hidden; }
button.cm-fp__room:hover, button.cm-fp__desk:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, var(--surface)); }
.cm-fp__room b { font-family: var(--font-head); font-size: .82rem; font-weight: 600; display: none; line-height: 1.1; text-align: center; }
.cm-fp__room span { font-size: .7rem; color: var(--muted); display: none; }
.cm-fp__room em { font-style: normal; font-family: var(--font-head); font-weight: 600; font-size: .78rem; }
@media (min-width: 640px) { .cm-fp__room b, .cm-fp__room span { display: block; } .cm-fp__room em { display: none; } }
.cm-fp__desk span { font-size: .62rem; font-weight: 600; color: var(--muted); }
@media (max-width: 479px) { .cm-fp__desk span { display: none; } }
.cm-fp__room.is-taken, .cm-fp__desk.is-taken { border-color: var(--line); background: repeating-linear-gradient(45deg, var(--line), var(--line) 3px, transparent 3px, transparent 7px); color: var(--muted); }
[data-size="sm"] b, [data-size="sm"] span { display: none !important; }
[data-size="sm"] em { display: block !important; }
.cm-fp__room--fixed { border-color: transparent; background: var(--bg-2); }
.cm-fp__room--fixed span { display: none !important; }
.cm-fp [aria-pressed="true"] { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff; }
.cm-fp [aria-pressed="true"] span, .cm-fp [aria-pressed="true"] b { color: #fff; }
.cm-fp__aisle { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: .66rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); border-block: 1px dashed var(--line); }
.cm-fp__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; }
.cm-fp__foot [data-fp-count] { font-family: var(--font-head); font-size: 1.5rem; color: var(--primary); }
.cm-plan-split { display: grid; gap: 40px; align-items: start; }
.cm-plan-split > * { min-width: 0; }
@media (min-width: 1024px) { .cm-plan-split { grid-template-columns: .8fr 1.2fr; gap: 56px; } }

/* 09. Membership comparison -------------------------------------------- */
.cm-cmp__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.cm-cmp__bar .billing-toggle { margin: 0; }
.cm-cmp { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.cm-cmp__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.cm-cmp__row:first-child { border-top: 0; }
.cm-cmp__feat { grid-column: 1 / -1; padding: 12px 14px 4px; font-weight: 600; font-size: .92rem; }
.cm-cmp__row--head .cm-cmp__feat { display: none; }
.cm-cmp__cell { display: grid; place-items: center; padding: 8px 4px 12px; text-align: center; font-size: .9rem; }
.cm-cmp__cell.is-featured, .cm-cmp__plan.is-featured { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.cm-cmp__plan { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 30px 6px 18px; text-align: center; min-width: 0; }
.cm-cmp__plan h3 { font-size: clamp(.92rem, 1.6vw, 1.3rem); margin: 0; }
.cm-cmp__plan p { display: none; color: var(--muted); font-size: .88rem; margin: 0; }
.cm-cmp__plan .btn { display: none; margin-top: 10px; }
.cm-cmp__price { font-family: var(--font-head); font-weight: 700; font-size: clamp(1rem, 2.4vw, 2.1rem); letter-spacing: -0.03em; color: var(--primary); line-height: 1.1; white-space: nowrap; }
.cm-cmp__price span { display: inline-block; }
.cm-cmp__price small { font-size: .7rem; color: var(--muted); font-weight: 500; letter-spacing: 0; }
.cm-cmp__tag { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); font-size: .58rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); white-space: nowrap; }
.cm-yes, .cm-no { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: .9rem; }
.cm-yes { background: var(--cm-olive); color: #fff; }
[data-theme="dark"] .cm-yes { color: #1c1916; }
.cm-no { border: 1px solid var(--line); color: var(--muted); }
.cm-val { font-weight: 600; }
@media (min-width: 768px) {
  .cm-cmp__row { grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); }
  .cm-cmp__feat { grid-column: auto; padding: 16px 20px; display: flex; align-items: center; }
  .cm-cmp__row--head .cm-cmp__feat { display: flex; align-items: flex-end; }
  .cm-cmp__cell { padding: 14px 8px; }
  .cm-cmp__plan { padding: 36px 14px 22px; }
  .cm-cmp__plan p, .cm-cmp__plan .btn { display: inline-flex; }
  .cm-cmp__tag { font-size: .66rem; top: 12px; }
}
@media (min-width: 1024px) { .cm-cmp__row:not(.cm-cmp__row--head):hover { background: color-mix(in srgb, var(--bg-2) 45%, transparent); } }

/* 10. Locations & events ---------------------------------------------- */
.cm-loc { display: flex; flex-direction: column; gap: 18px; }
.cm-loc__img { position: relative; display: block; }
.cm-loc__img img { aspect-ratio: 7/8; transition: transform 1.2s var(--ease); }
.cm-loc:hover .cm-loc__img img { transform: scale(1.05); }
.cm-loc__tag { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); padding: 7px 14px; border-radius: 999px; background: var(--surface); color: var(--text); font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.cm-loc__body { display: flex; flex-direction: column; gap: 10px; }
.cm-loc h3 { font-size: 1.35rem; margin: 0; }
.cm-loc h3 a:hover { color: var(--primary); }
.cm-loc__addr { display: flex; align-items: center; gap: 6px; color: var(--muted); margin: 0; font-size: .95rem; }
.cm-loc__amen { display: flex; flex-wrap: wrap; gap: 8px; }
.cm-loc__amen li { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); color: var(--cm-olive); font-size: 1.1rem; background: var(--surface); }
.cm-loc__meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .95rem; }
.cm-status { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: .8rem; font-weight: 600; }
.cm-status .cm-dot { background: var(--muted); }
.cm-status.is-open .cm-dot { background: #5f9a4a; box-shadow: 0 0 0 4px color-mix(in srgb, #5f9a4a 22%, transparent); animation: cm-pulse 2s infinite; }
.cm-status.is-open { color: #4d7f3b; }
[data-theme="dark"] .cm-status.is-open { color: #9fcf8b; }
.cm-status.is-closed { color: var(--primary); }
.cm-status.is-closed .cm-dot { background: var(--primary); }
.cm-status--sm { padding: 3px 9px; font-size: .72rem; background: transparent; }
@keyframes cm-pulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, #5f9a4a 0%, transparent); } }
/* events */
.cm-evwrap { display: grid; gap: 32px; }
@media (min-width: 1024px) { .cm-evwrap { grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; } .cm-evwrap > :first-child { position: sticky; top: 140px; } }
.cm-evs { border-top: 1px solid var(--text); }
.cm-ev { display: grid; grid-template-columns: auto 1fr; gap: 14px 18px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); }
.cm-ev__date { display: grid; place-items: center; align-content: center; width: 64px; height: 72px; border-radius: 32px 32px 8px 8px; background: var(--bg-2); line-height: 1; }
.cm-ev__date b { font-family: var(--font-head); font-size: 1.6rem; font-weight: 700; color: var(--primary); }
.cm-ev__date span { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; margin-top: 4px; }
.cm-ev__info { min-width: 0; }
.cm-ev__tag { display: inline-block; font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cm-olive); margin-bottom: 4px; }
.cm-ev h3 { font-size: 1.15rem; margin: 0 0 4px; line-height: 1.25; }
.cm-ev p { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; color: var(--muted); font-size: .88rem; }
.cm-ev p span, .cm-ev p { align-items: center; }
.cm-ev p .ti { color: var(--primary); }
.cm-rsvp { grid-column: 2; justify-self: start; }
.cm-rsvp__on { display: none; }
.cm-rsvp.is-on { background: var(--cm-olive); border-color: var(--cm-olive); color: #fff; }
.cm-rsvp.is-on .cm-rsvp__on { display: inline-flex; align-items: center; gap: 6px; }
.cm-rsvp.is-on .cm-rsvp__off { display: none; }
@media (min-width: 640px) { .cm-ev { grid-template-columns: auto 1fr auto; } .cm-rsvp { grid-column: auto; } }
.cm-evs--big .cm-ev h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); }
.cm-evs--big .cm-ev__date { width: 76px; height: 86px; border-radius: 38px 38px 8px 8px; }

/* 11. Home sections --------------------------------------------------- */
.cm-about__vis { position: relative; max-width: 520px; width: 100%; justify-self: center; }
.cm-about__vis img { aspect-ratio: 4/5; }
.cm-about__note { position: absolute; right: -8px; bottom: 32px; display: flex; gap: 12px; align-items: center; padding: 14px 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); max-width: 260px; line-height: 1.3; }
.cm-about__note b { display: block; }
.cm-about__note span:not(.cm-about__ic) { font-size: .85rem; color: var(--muted); }
.cm-about__ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: #222; font-size: 1.3rem; }
.cm-about .stats { margin-top: 8px; }
/* office sizes */
.cm-sizes { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .cm-sizes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .cm-sizes { grid-template-columns: repeat(4, 1fr); } }
.cm-size { border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s; }
.cm-size:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.cm-size__img img { width: 100%; aspect-ratio: 7/5; }
.cm-size__body { padding: 20px 22px 22px; display: grid; gap: 6px; }
.cm-size__ppl { display: inline-flex; gap: 6px; align-items: center; font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cm-olive); }
.cm-size h3 { font-size: 1.3rem; margin: 0; }
.cm-size__price { font-family: var(--font-head); font-weight: 600; color: var(--primary); margin: 0 0 6px; }
/* flex vs lease */
.cm-vs { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.cm-vs__row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; padding: 16px 18px; border-top: 1px solid var(--line); font-size: .93rem; }
.cm-vs__row > :first-child { grid-column: 1 / -1; font-weight: 600; }
.cm-vs__row--head { border-top: 0; background: var(--bg-2); font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.cm-vs__row--head > :first-child { display: none; }
.cm-vs__old, .cm-vs__new { display: flex; gap: 8px; align-items: flex-start; }
.cm-vs__old { color: var(--muted); }
.cm-vs__old .ti { color: var(--muted); margin-top: 4px; }
.cm-vs__new .ti { color: var(--cm-olive); margin-top: 4px; }
.cm-vs__new { font-weight: 500; }
@media (min-width: 768px) { .cm-vs__row { grid-template-columns: 1fr 1.1fr 1.1fr; } .cm-vs__row > :first-child { grid-column: auto; } .cm-vs__row--head > :first-child { display: block; } }
/* studio tabs */
[data-tabs] .tabs__list { gap: 8px; }
.tabs__btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; font-size: .95rem; }
.tabs__btn.is-active, .tabs__btn:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.cm-stp { display: grid; gap: 32px; align-items: center; }
@media (min-width: 1024px) { .cm-stp { grid-template-columns: .9fr 1.1fr; gap: 64px; } }
.cm-stp__img { max-width: 480px; width: 100%; }
.cm-stp__img img { aspect-ratio: 8/9; }
.cm-stp__ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: #222; font-size: 1.5rem; margin-bottom: 18px; }
.cm-stp__facts { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.cm-stp__facts li { display: inline-flex; gap: 6px; align-items: center; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); font-weight: 600; font-size: .92rem; }
.cm-stp__facts .ti { color: var(--primary); }
/* makers */
.cm-makers { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .cm-makers { grid-template-columns: repeat(3, 1fr); } }
.cm-maker { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 22px 12px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); transition: border-color .3s, transform .5s var(--ease); }
.cm-maker:hover { border-color: var(--primary); transform: translateY(-4px); }
.cm-maker__img { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; margin-bottom: 8px; outline: 2px solid var(--accent); outline-offset: 3px; }
.cm-maker__img img { width: 100%; height: 100%; }
.cm-maker b { font-family: var(--font-head); font-weight: 600; line-height: 1.2; }
.cm-maker > span:last-child { font-size: .82rem; color: var(--muted); }
/* gallery */
.cm-gal { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
.cm-gal img { width: 100%; height: 100%; border-radius: var(--radius); }
.cm-gal img:first-child { grid-column: 1 / -1; aspect-ratio: 16/10; border-radius: 1000px 1000px var(--radius) var(--radius) / 600px 600px var(--radius) var(--radius); }
@media (min-width: 1024px) {
  .cm-gal { grid-template-columns: 1fr 1.3fr 1fr; grid-template-rows: 260px 260px; }
  .cm-gal img:nth-child(2) { grid-column: 1; grid-row: 1; } .cm-gal img:nth-child(3) { grid-column: 3; grid-row: 1; } .cm-gal img:nth-child(4) { grid-column: 1; grid-row: 2; } .cm-gal img:nth-child(5) { grid-column: 3; grid-row: 2; }
  .cm-gal img:first-child { grid-column: 2; grid-row: 1 / 3; aspect-ratio: auto; }
}
/* venue rooms */
.cm-rooms { border-top: 1px solid var(--text); }
.cm-room { display: grid; grid-template-columns: 76px 1fr auto; gap: 12px 18px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.cm-room__img { width: 76px; height: 76px; border-radius: 50%; overflow: hidden; }
.cm-room__img img { width: 100%; height: 100%; transition: transform 1s var(--ease); }
.cm-room:hover .cm-room__img img { transform: scale(1.1); }
.cm-room__main { min-width: 0; }
.cm-room h3 { font-size: clamp(1.2rem, 2.2vw, 1.8rem); margin: 0 0 6px; }
.cm-room__feat { display: flex; gap: 10px; color: var(--muted); font-size: 1.1rem; }
.cm-room__cap { display: grid; justify-items: end; line-height: 1; }
.cm-room__cap b { font-family: var(--font-head); font-size: 1.6rem; font-weight: 600; }
.cm-room__cap span { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.cm-room__price { grid-column: 2; font-weight: 600; color: var(--primary); }
.cm-room .btn { grid-column: 3; justify-self: end; }
@media (min-width: 768px) {
  .cm-room { grid-template-columns: 110px 1fr 110px 140px auto; gap: 28px; padding: 22px 0; }
  .cm-room__img { width: 110px; height: 110px; }
  .cm-room__price { grid-column: auto; font-family: var(--font-head); font-size: 1.15rem; }
  .cm-room .btn { grid-column: auto; }
}
.cm-lays { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .cm-lays { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cm-lays { grid-template-columns: repeat(4, 1fr); } }
.cm-lay { padding: 28px 24px; border-radius: 120px 120px var(--radius) var(--radius); background: var(--surface); border: 1px solid var(--line); text-align: center; display: grid; justify-items: center; gap: 4px; transition: border-color .3s, transform .5s var(--ease); }
.cm-lay:hover { border-color: var(--primary); transform: translateY(-6px); }
.cm-lay__ic { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); font-size: 2rem; margin: 6px 0 12px; }
.cm-lay h3 { font-size: 1.25rem; margin: 0; }
.cm-lay b { color: var(--cm-olive); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; }
.cm-lay p { color: var(--muted); margin: 6px 0 0; font-size: .95rem; }
.cm-addons { display: grid; gap: 0; border-top: 1px solid var(--line); }
.cm-addons li { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; font-weight: 500; }
.cm-addons .ti { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--primary); color: var(--primary); font-size: 1.25rem; }
.cm-addons b { font-family: var(--font-head); font-weight: 600; color: var(--cm-olive); white-space: nowrap; font-size: .98rem; }
.cm-add-img { max-width: 360px; margin-top: 8px; }
.cm-add-img img { aspect-ratio: 1; }

/* 12. Inner pages ---------------------------------------------------- */
.cm-srows { display: grid; gap: clamp(64px, 9vw, 120px); }
.cm-srow__img { max-width: 480px; width: 100%; justify-self: center; }
.cm-srow__img img { aspect-ratio: 8/9; }
.cm-srow .h2 { margin-bottom: 14px; }
.cm-srow__foot { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.cm-srow__foot b { font-family: var(--font-head); font-size: 1.4rem; font-weight: 600; color: var(--primary); }
.cm-map { position: relative; min-height: clamp(320px, 42vw, 520px); border-radius: var(--radius); overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.cm-map__grid { position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 48px 48px; }
.cm-map::before { content: ""; position: absolute; left: -10%; right: -10%; top: 48%; height: 60px; background: color-mix(in srgb, var(--cm-olive) 22%, transparent); transform: rotate(-8deg); border-radius: 50%; }
.cm-map__pin { position: absolute; transform: translate(-50%, -100%); display: grid; justify-items: center; gap: 4px; }
.cm-map__pin span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); background: var(--primary); color: #fff; font-size: 1.2rem; box-shadow: var(--shadow); transition: background .3s; }
.cm-map__pin span .ti { transform: rotate(45deg); }
.cm-map__pin:hover span { background: var(--cm-olive); }
.cm-map__pin b { padding: 3px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: .75rem; white-space: nowrap; }
.cm-map__note { position: absolute; left: 16px; bottom: 12px; margin: 0; display: flex; gap: 6px; align-items: center; font-size: .8rem; color: var(--muted); }
@media (max-width: 639px) { .cm-map__pin b { display: none; } }
.cm-value { padding: 32px 28px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.cm-value h3 { font-size: 1.3rem; margin: 20px 0 8px; }
.cm-value p { color: var(--muted); margin: 0; }
.cm-tl { display: grid; gap: 0; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--text); }
.cm-tl li { position: relative; padding: 24px 0 24px 28px; border-bottom: 1px solid var(--line); }
.cm-tl li::before { content: ""; position: absolute; left: 0; top: 32px; width: 12px; height: 12px; border-radius: 50%; background: var(--primary); }
.cm-tl b { font-family: var(--font-head); font-size: 1.8rem; font-weight: 700; color: var(--primary); line-height: 1; }
.cm-tl h3 { font-size: 1.15rem; margin: 10px 0 4px; }
.cm-tl p { color: var(--muted); margin: 0; font-size: .95rem; }
@media (min-width: 1024px) {
  .cm-tl { grid-template-columns: repeat(5, 1fr); }
  .cm-tl li { padding: 36px 20px 0 0; border-bottom: 0; }
  .cm-tl li::before { top: -7px; }
}
.member__img { border-radius: 1000px 1000px var(--radius) var(--radius) / 600px 600px var(--radius) var(--radius); }
.contact-list .icon-box { background: transparent; border: 1px solid var(--primary); }
.plan--featured { background: var(--cm-olive); --muted: rgba(255,255,255,.75); }
.plan--featured::before { display: none; }
.plan--featured .btn--gradient { --btn-c: #f3eee4; --btn-on: #222; color: #222; }
.plan--featured .check-list .ti { background: rgba(255,255,255,.18); color: #fff; }
.plan__tag { background: var(--accent); color: #222; }

/* 13. Footer --------------------------------------------------------- */
.cm-foot { background: var(--cm-ink); color: #f3eee4; --text: #f3eee4; --muted: rgba(243, 238, 228, .66); --line: rgba(243, 238, 228, .14); --surface: #2c2a27; --primary: #e0764d; padding-top: clamp(56px, 8vw, 96px); overflow: hidden; }
[data-theme="dark"] .cm-foot { background: #141210; }
.cm-foot__top { display: grid; gap: 40px 28px; grid-template-columns: 1fr; padding-bottom: 48px; }
@media (min-width: 640px) { .cm-foot__top { grid-template-columns: 1fr 1fr; } .cm-foot__brand, .cm-foot__tour { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .cm-foot__top { grid-template-columns: 1.5fr 1fr .8fr .8fr; } .cm-foot__brand { grid-column: auto; } }
.cm-foot__brand p { color: var(--muted); max-width: 40ch; margin: 16px 0 0; }
.cm-foot__nl { margin: 28px 0 4px; font-size: 1rem; letter-spacing: 0; }
.cm-foot__brand .cm-foot__small { margin: 0 0 14px; font-size: .92rem; }
.cm-news { background: transparent; }
.cm-news .btn { --btn-c: var(--accent); --btn-on: #222; }
.cm-foot__col h4 { font-family: var(--font-body); font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
.cm-foot__col li { padding: 6px 0; }
.cm-foot__col a { color: var(--muted); transition: color .3s; }
.cm-foot__col a:hover { color: #fff; }
.cm-foot__locs li { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 5px 0; }
.cm-foot__locs .cm-status { border-color: var(--line); }
.cm-foot__locs .cm-status.is-open { color: #9fcf8b; }
.cm-foot__tour { position: relative; display: grid; gap: 4px; padding: 28px 24px; border-radius: 160px 160px var(--radius) var(--radius); background: var(--primary); color: #fff; text-align: center; justify-items: center; transition: background .4s; }
.cm-foot__tour:hover { background: var(--cm-olive); }
.cm-foot__tour .cm-label { color: #fff; margin: 16px 0 4px; }
.cm-foot__tour .cm-label::before { background: var(--accent); }
.cm-foot__tour b { font-family: var(--font-logo); font-weight: 400; font-size: 2rem; line-height: 1.1; }
.cm-foot__tour span:not(.cm-label) { font-size: .88rem; opacity: .85; }
.cm-foot__tour .ti { font-size: 1.6rem; margin-top: 8px; }
@media (min-width: 1024px) { .cm-foot__top { grid-template-columns: 1.4fr 1fr .8fr .8fr 1fr; } .cm-foot__tour { grid-column: auto; align-self: start; } }
.cm-foot__word { font-family: var(--font-logo); font-size: clamp(3.4rem, 17vw, 16rem); line-height: .8; text-align: center; color: transparent; -webkit-text-stroke: 1px rgba(243, 238, 228, .22); letter-spacing: -0.02em; user-select: none; padding-top: 12px; white-space: nowrap; }
.cm-foot__bottom { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; padding-block: 22px 30px; border-top: 1px solid var(--line); font-size: .86rem; color: var(--muted); }
.cm-foot__bottom .socials { margin: 0; }
.cm-foot .socials a:hover { background: var(--primary); color: #fff; }
.cm-foot .logo__mark { background: var(--primary); }
@media (max-width: 479px) { .cm-addons li { grid-template-columns: auto minmax(0, 1fr); row-gap: 2px; } .cm-addons .ti { grid-row: span 2; } .cm-addons b { grid-column: 2; } }