/* =====================================================================
   MAL CIPUTRA TANGERANG — "Sunset Joy" design system
   ===================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* palette */
  --canvas: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #FFF0E9;
  --ink: #2B1B3D;
  --ink-soft: #5A4B66;
  --muted: #8A7F93;
  --line: #F1E3DA;

  --coral: #FF5470;
  --coral-strong: #B81F49;   /* darkened from #E4325F — was only ~3.5:1 on its own tint backgrounds, now ~5–6:1 */
  --coral-deep: #CC2955;     /* solid button fill — verified ~5.2:1 with white text */
  --magenta: #C41F5A;        /* darkened from #FF3D77 — was ~3.4:1 on white, now ~5.7:1 */
  --orange: #FF7A45;
  --amber: #FFB84D;
  --yellow: #FFC24B;
  --teal: #12B5A5;
  --teal-strong: #0A6F68;    /* darkened from #0E877D — was ~3.8:1 on its own tint background, now ~5.2:1 */
  --teal-deep: #0A6F68;      /* solid button fill — verified ~6:1 with white text */

  /* pastel fills for card--pop / tenant--pop only — kept separate from the vivid accent tokens above
     (those still power hero text, focus rings, hover states and stay saturated). Each verified ~8–12:1 with ink. */
  --coral-pop: #FFB5C2;
  --teal-pop:  #8FE3D6;
  --grape-pop: #C3AEE3;
  --blue-pop:  #8FC6F5;
  --amber-pop: #FFD98A;

  --sunset: linear-gradient(135deg, #FF3D77 0%, #FF7A45 55%, #FFB84D 100%);
  --sunset-soft: linear-gradient(135deg, #FFE4EC 0%, #FFEFDD 100%);

  /* type — one family sitewide; emphasis comes from font-weight, not a second decorative typeface */
  --font-sans: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* radii */
  --r-sm: 12px;
  --r: 7px;
  --r-lg: 30px;
  --r-pill: 999px;

  /* layout */
  --container: 1440px;
  --header-h: 88px;
  --gap: clamp(16px, 3vw, 28px);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--canvas);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
/* sitewide: no italic anywhere, including <em>/<i> from WYSIWYG content — emphasis is always weight, never a style/slant, so nothing reads as "cursive" */
em, i, cite, q { font-style: normal; font-weight: 700; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 { line-height: 1.12; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); font-weight: 700; }
h3 { font-size: clamp(1.15rem, 2vw, 1.45rem); }
/* no italic/serif "cursive" styling anywhere — emphasis comes from font-weight, not font style */
.display-serif { font-family: var(--font-sans); font-weight: 700; letter-spacing: -.01em; }
.lead { font-size: clamp(1.02rem, 1.6vw, 1.2rem); color: var(--ink-soft); }
.eyebrow {
  display: inline-block;
  font-family: var(--font-sans); font-weight: 700;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem); letter-spacing: 0;
  color: var(--coral-strong);
}
.text-muted { color: var(--muted); }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(18px, 4vw, 40px); }
.section { padding-block: clamp(48px, 7vw, 92px); }
.section--tight { padding-block: clamp(32px, 4vw, 52px); }
.section-head { max-width: 760px; margin-bottom: clamp(24px, 4vw, 44px); }
.section-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: none; flex-wrap: wrap; }
.grid { display: grid; gap: var(--gap); }
.cols-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.cols-3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.cols-4 { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px; padding: 0 1.5em;
  border-radius: var(--r-pill); font-weight: 800; font-size: .88rem;
  text-transform: uppercase; letter-spacing: .03em;
  transition: transform .18s ease, background .18s ease, color .18s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--coral-deep); color: #fff; }
.btn-primary:hover { background: #B81F49; transform: translateY(-2px); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #3d2853; transform: translateY(-2px); }
.btn-outline { border: 2px solid var(--ink); color: var(--ink); background: transparent; }
.btn-outline:hover { background: var(--ink); color: #fff; }
/* for outline buttons placed over photos/gradients — translucent backing keeps text reliably readable */
.btn-outline-inverse { border: 2px solid rgba(255, 255, 255, .85); color: #fff; background: rgba(20, 10, 26, .8); }
.btn-outline-inverse:hover { background: rgba(20, 10, 26, .95); border-color: #fff; }
.btn-ghost {
  color: var(--coral-strong); font-weight: 800; padding-inline: .4em; min-height: 40px;
  text-transform: none; letter-spacing: normal; font-size: 1rem;
}
.btn-ghost:hover { color: var(--magenta); }
.btn-ghost .arr { transition: transform .18s ease; }
.btn-ghost:hover .arr { transform: translateX(4px); }
/* text-only CTA for dark/colored backgrounds (cta-band, cta-full) — same idea as .btn-ghost, just white instead of coral-strong */
.btn-ghost-inverse { color: #fff; font-weight: 800; padding-inline: .4em; min-height: 40px; text-transform: none; letter-spacing: normal; font-size: 1rem; }
.btn-ghost-inverse:hover { opacity: .8; }
.btn-ghost-inverse .arr { transition: transform .18s ease; }
.btn-ghost-inverse:hover .arr { transform: translateX(4px); }
.btn-teal { background: var(--teal-deep); color: #fff; }
.btn-teal:hover { background: #085a54; transform: translateY(-2px); }
.btn-sm { min-height: 40px; font-size: .78rem; padding: 0 1.1em; }

/* ---------- Chips / pills ---------- */
.chip {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .4em .9em; border-radius: var(--r-pill);
  font-size: .82rem; font-weight: 700; line-height: 1;
  background: var(--surface-2); color: var(--ink);
}
.chip--coral  { background: #FFE1E7; color: var(--coral-strong); }
.chip--teal   { background: #D6F5F0; color: var(--teal-strong); }
.chip--amber  { background: #FFEFD1; color: #8A5A0A; }
.chip--grape  { background: #ECE4F6; color: #6B4E9A; }
.chip--blue   { background: #DDEEFC; color: #175A99; }

/* ---------- Checklist (benefit lists, e.g. membership tiers) ---------- */
.list-check { display: flex; flex-direction: column; gap: 10px; }
.list-check li { display: flex; align-items: flex-start; gap: 10px; font-size: .95rem; color: var(--ink-soft); }
.list-check li::before {
  content: "✓"; flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px;
  border-radius: 50%; background: var(--surface-2); color: var(--coral-strong);
  font-size: .72rem; font-weight: 800; display: grid; place-items: center;
}

/* filter chip (clickable) */
.filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.filter__btn {
  padding: .58em 1.15em; border-radius: var(--r-pill);
  background: var(--surface); border: 1.5px solid var(--line);
  font-weight: 700; font-size: .9rem; color: var(--ink-soft);
  transition: all .16s ease;
}
.filter__btn:hover { border-color: var(--coral); color: var(--coral-strong); }
.filter__btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- Header ---------- */
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 10px;
  transition: top .2s ease;
}
.skip-link:focus { top: 12px; }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(160%) blur(14px);
  transition: box-shadow .25s ease, background .25s ease;
}
.site-header.is-scrolled { box-shadow: 0 2px 8px rgba(140, 60, 40, .06); background: rgba(255, 255, 255, .96); }
.header-inner { display: flex; align-items: center; gap: 22px; height: var(--header-h); }

.brand { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; padding: 12px 16px 12px 4px; }
.brand__logo { height: 42px; width: auto; flex-shrink: 0; }
.footer-logo .brand__logo { height: 34px; filter: brightness(0) invert(1); }
/* the Customizer logo renders as img.custom-logo (not .brand__logo): flatten it to solid white on the dark footer. Scoped to .site-footer rather than .footer-logo because the link WordPress outputs is nested inside .footer-logo's <a>, which browsers split into siblings. */
.site-footer .custom-logo { filter: brightness(0) invert(1); }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__text b { font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em; }
.brand__text span { font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--coral-strong); font-weight: 700; }

.nav { display: flex; align-items: center; gap: 4px; margin-left: 6px; }
.nav a {
  padding: .55em .82em; border-radius: var(--r-pill); font-weight: 600; font-size: .95rem; color: var(--ink-soft);
  transition: color .15s ease, background .15s ease;
}
.nav a:hover { color: var(--ink); background: var(--surface-2); }
.nav a.is-active { color: var(--coral-strong); }

.header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.icon-btn {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  color: var(--ink); transition: background .15s ease, color .15s ease;
}
.icon-btn:hover { background: var(--surface-2); color: var(--coral-strong); }
/* outlined variant for icon buttons placed in body content (contact links), rather than the header where the transparent default belongs */
.icon-btn--outline { border: 1.5px solid var(--line); }
.icon-btn--outline:hover { border-color: var(--coral); }
.nav-toggle { display: none; }

/* mobile drawer */
.drawer-backdrop {
  position: fixed; inset: 0; background: rgba(43, 27, 61, .45); z-index: 150;
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
}
.drawer-backdrop.is-open { opacity: 1; visibility: visible; }
.drawer {
  position: fixed; top: 0; right: 0; height: 100dvh; width: min(86vw, 360px); z-index: 160;
  background: var(--surface); border-left: 1px solid var(--line);
  transform: translateX(100%); transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  display: flex; flex-direction: column; padding: 22px; overflow-y: auto;
}
.drawer.is-open { transform: translateX(0); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.drawer nav a {
  display: block; padding: 14px 12px; border-radius: 14px; font-weight: 700; font-size: 1.05rem;
  color: var(--ink); border-bottom: 1px solid var(--line);
}
.drawer nav a:hover, .drawer nav a.is-active { color: var(--coral-strong); background: var(--surface-2); }
.drawer .btn { margin-top: 18px; width: 100%; }

/* ---------- Breadcrumb ---------- */
/* Breadcrumb: soft peach strip, link pills with a home icon, drawn chevron separators (the "›" text in the markup is hidden), current page as a white pill. Scrolls sideways instead of wrapping on small screens. */
.crumbs { background: #FFF8F4; border-bottom: 1px solid var(--line); }
.crumbs ol { list-style: none; display: flex; flex-wrap: nowrap; align-items: center; gap: 2px; margin-left: -12px; padding: 10px 0; font-size: .84rem; overflow-x: auto; scrollbar-width: none; }
.crumbs ol::-webkit-scrollbar { display: none; }
.crumbs li { flex: 0 0 auto; }
.crumbs a { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--r-pill); color: var(--ink-soft); font-weight: 600; line-height: 1.2; transition: background .15s ease, color .15s ease; }
.crumbs a:hover { background: #fff; color: var(--coral-strong); }
.crumbs li:first-child a::before {
  content: ""; width: 15px; height: 15px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8'/%3E%3Cpath d='M5 10v10h5v-6h4v6h5V10'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8'/%3E%3Cpath d='M5 10v10h5v-6h4v6h5V10'/%3E%3C/svg%3E") center / contain no-repeat;
}
.crumbs li[aria-current] { display: block; max-width: 70vw; padding: 5px 13px; border: 1px solid var(--line); border-radius: var(--r-pill); background: #fff; color: var(--ink); font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumbs .sep {
  display: block; width: 14px; height: 14px; font-size: 0; color: transparent; background: var(--muted); opacity: .75;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero { padding-block: clamp(36px, 6vw, 64px); }
.page-hero h1 .display-serif { color: var(--coral-strong); }
.page-hero .lead { margin-top: 14px; }

/* full-bleed building photo hero */
.hero-banner {
  position: relative;
  width: 100%;
  /* fullscreen hero: fills the viewport minus the sticky header's own height, so header+hero together are exactly one screen on load. dvh (mobile-accurate) overrides the vh fallback where supported. */
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100dvh - var(--header-h));
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero-banner__media { position: absolute; inset: 0; }
.hero-banner__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.hero-banner__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(18, 10, 24, .92) 0%, rgba(18, 10, 24, .62) 38%, rgba(18, 10, 24, .18) 66%, rgba(18, 10, 24, .05) 100%);
}
/* .hero-banner__content keeps plain, unmodified .container behavior (same
   centering, max-width, padding as the navbar/every other section) so its
   content starts at exactly the same left edge as everything else on the
   page — the 50%-width narrowing happens on the .hero-banner__inner child
   below instead of on this element, which is what caused the earlier
   misalignment (pinning this element itself to the raw viewport edge broke
   its shared alignment with the centered .container elsewhere). */
.hero-banner__content { position: relative; z-index: 2; padding-block: clamp(36px, 7vw, 76px); }
.hero-banner__inner { width: 100%; }
@media (min-width: 761px) {
  .hero-banner__inner { width: min(50vw, calc(var(--container) / 2)); }
}
.hero-banner__content .eyebrow { color: var(--yellow); }
.hero-banner__content h1 { color: #fff; }
/* the site name keeps the shared bold h1 weight and white color; the trailing phrase is the same white but deliberately lighter — weight is what separates them, not a second color or typeface */
.hero-banner__content h1 .hero-subtitle { font-weight: 400; }
.hero-banner__content .lead { color: rgba(255, 255, 255, .92); max-width: none; width: 100%; }

/* hero smart-search — full width; no icon in the field itself, the magnifying glass now lives in the submit button; the button is a plain icon, no filled background */
.hero-search {
  display: flex; align-items: center; gap: 10px;
  width: 100%; margin-top: 26px;
  background: #fff; border-radius: var(--r-pill);
  padding: 8px;
}
.hero-search__input {
  flex: 1; min-width: 0; border: none; background: transparent;
  min-height: 50px; font-size: 1rem; color: var(--ink); padding-left: 16px;
}
.hero-search__input:focus { outline: none; }
.hero-search__input::placeholder { color: var(--muted); }
.hero-search__submit {
  display: grid; place-items: center; width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 50%; background: none; color: var(--coral-deep);
  transition: transform .18s ease, color .18s ease;
}
.hero-search__submit:hover { transform: scale(1.1); color: var(--magenta); }

/* ---------- Cards ---------- */
.card {
  background: var(--surface); border-radius: var(--r); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .2s ease;
  height: 100%;
}
/* Same outline as .tenant (directory) — thin border all around, thicker
   bottom edge to fake a subtle drop shadow. Opt-in via modifier so it only
   reaches the Article/Event/Promo cards (card-plain.php, card-pop-wide.php),
   not the About-page info cards or Membership tier cards, which
   deliberately use a plain/colored body instead of a border. */
.card--bordered { border: 1px solid var(--line); border-bottom-width: 4px; }
/* Uniform card heights: the text itself is char-capped in PHP (MCT_CARD_* in inc/template-tags.php); these line-clamps are the safety net, and the 2-line title floor keeps excerpt/CTA starting at the same height across a row. */
.card--bordered .card__title,
.card--bordered .card__excerpt { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.card--bordered .card__title { -webkit-line-clamp: 2; line-clamp: 2; min-height: 2.24em; }
.card--bordered .card__excerpt { -webkit-line-clamp: 3; line-clamp: 3; }
.card--bordered .card__tag { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card:hover { transform: translateY(-6px); }
.card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); border-radius: var(--r-sm); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card:hover .card__media img { transform: scale(1.05); }
.card__media .chip { position: absolute; top: 12px; left: 12px; }
.card__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card__meta { font-size: .84rem; color: var(--muted); font-weight: 600; display: flex; gap: 10px; flex-wrap: wrap; }
.card__title { font-size: 1.16rem; font-weight: 800; letter-spacing: -.01em; }
.card__excerpt { color: var(--ink-soft); font-size: .95rem; }
.card__foot { margin-top: auto; padding-top: 6px; }

/* vivid "pop" card — used for the homepage Highlights mosaic; colors verified ≥4.5:1 with their paired text */
.card--pop .card__tag { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: inherit; }
.card--pop .card__meta { font-size: .82rem; font-weight: 700; color: inherit; margin-top: auto; }
.card--pop .card__title { font-size: 1.05rem; color: inherit; }
/* text color is always ink — every fill is a light tint verified ≥4.5:1 with ink, so one text color works everywhere, no opacity dimming so nothing dilutes it */
.card--pop-coral .card__body { background: var(--coral-pop); color: var(--ink); }
.card--pop-teal  .card__body { background: var(--teal-pop); color: var(--ink); }
.card--pop-grape .card__body { background: var(--grape-pop); color: var(--ink); }
.card--pop-blue  .card__body { background: var(--blue-pop); color: var(--ink); }
.card--pop-amber .card__body { background: var(--amber-pop); color: var(--ink); }
/* optional fuller content (excerpt + CTA) for pop cards used on dedicated list pages — must inherit, .card__excerpt/.btn-ghost otherwise hardcode their own color */
.card--pop .card__excerpt { color: inherit; }
.card--pop .card__foot .btn-ghost { color: inherit; }

/* horizontal "pop" card — Homepage Highlights + Promo/Event listing grids:
   image on the left (plain DOM/visual order, no `order` flip needed), a
   plain white text panel on the right (no background fill — category color
   shows up as the tag's text color instead, using the same AA-verified
   strong colors as .chip). Larger/roomier since these sections show fewer
   cards than a dense grid. */
.card--pop-wide { display: grid; grid-template-columns: 1fr 1fr; height: 320px; }
.card--pop-wide .card__media { aspect-ratio: auto; }
.card--pop-wide .card__body { background: none; color: var(--ink); justify-content: center; padding: clamp(24px, 3vw, 40px); gap: 12px; overflow: hidden; }
.card--pop-wide .card__title { font-size: 1.4rem; }
.card--pop-wide .card__title { -webkit-line-clamp: 3; line-clamp: 3; min-height: 0; }
.card--pop-wide .card__meta span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.card--pop-wide .card__meta--empty { display: none; }
.card--pop-wide.card--pop-coral .card__tag { color: var(--coral-strong); }
.card--pop-wide.card--pop-teal  .card__tag { color: var(--teal-strong); }
.card--pop-wide.card--pop-grape .card__tag { color: #6B4E9A; }
.card--pop-wide.card--pop-blue  .card__tag { color: #175A99; }
.card--pop-wide.card--pop-amber .card__tag { color: #8A5A0A; }
/* the shared .card--pop rule makes the CTA link inherit the body's text color (needed when the body has a colored fill) — on a plain white body that would flatten it to dark ink, so restore the normal ghost-link coral here instead. */
.card--pop-wide .card__foot .btn-ghost { color: var(--coral-strong); }
@media (max-width: 760px) {
  /* same compact horizontal list treatment as plain cards / tenant cards on
     mobile (see the 620px breakpoint below), instead of the desktop 2-column
     grid mosaic. */
  .card--pop-wide { display: flex; flex-direction: row; height: auto; }
  .card--pop-wide:hover { transform: none; }
  /* fixed 1:1 square (the Thumbnail field's ratio): align-self stops the flex row from stretching it to the text's height, which would make it a tall crop */
  .card--pop-wide .card__media { flex: 0 0 96px; width: 96px; height: auto; aspect-ratio: 1 / 1; align-self: center; margin: 10px 0 10px 10px; }
  .card--pop-wide .card__body { padding: 10px 14px; gap: 3px; justify-content: center; }
  .card--pop-wide .card__title { font-size: .95rem; line-height: 1.25; -webkit-line-clamp: 2; line-clamp: 2; min-height: 2.5em; }
  .card--pop-wide .card__meta { font-size: .74rem; flex-wrap: nowrap; min-height: 1.6em; }
  .card--pop-wide .card__meta span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .card--pop-wide .card__meta--empty { display: flex; }
  .card--pop-wide .card__foot { margin-top: 2px; padding-top: 0; }
  .card--pop-wide .card__foot .btn-ghost { font-size: .8rem; min-height: auto; }
}

/* membership tier cards — background carries the tier identity instead of a border outline */
.tier-gold   { background: var(--amber-pop); color: var(--ink); }
.tier-silver { background: #E4E7EC; color: var(--ink); }
.tier-gold .list-check li::before, .tier-silver .list-check li::before { background: rgba(255, 255, 255, .6); }
.card--pop .card__foot .btn-ghost:hover { opacity: .72; }

/* wide feature card */
.feature {
  display: grid; grid-template-columns: 1.15fr 1fr; background: var(--surface);
}
.feature__media { position: relative; min-height: 300px; background: var(--surface-2); border-radius: var(--r-sm); overflow: hidden; }
.feature__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature__body { padding: clamp(26px, 4vw, 48px); display: flex; flex-direction: column; justify-content: center; gap: 16px; }
@media (max-width: 760px) { .feature { grid-template-columns: 1fr; } .feature__media { min-height: 220px; } }

/* full-width tenant storefront photo, with the "Tentang ..." copy stacked below rather than side-by-side */
.tenant-photo { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 21 / 9; }
.tenant-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tenant-about { padding-block: clamp(24px, 4vw, 40px); }
.tenant-contact { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Tenant card (directory) — plain body, category shows as tag color only ---------- */
.tenant {
  background: var(--surface); border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--line); border-bottom-width: 4px;
  display: flex; flex-direction: column; height: 100%;
  transition: transform .2s ease;
}
.tenant:hover { transform: translateY(-5px); }
.tenant__logo {
  aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 18px; background: #fff;
}
.tenant__logo img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.tenant__body { padding: 16px 18px 20px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 6px; flex: 1; }
.tenant__tag { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.tenant__name { font-weight: 800; font-size: 1.2rem; }
.tenant__unit { font-size: .8rem; font-weight: 700; margin-top: auto; color: var(--ink-soft); }
/* category no longer fills the body — it colors the tag text instead, reusing the same AA-verified strong colors as .chip/.card--pop-wide */
.tenant--pop-coral .tenant__tag { color: var(--coral-strong); }
.tenant--pop-teal  .tenant__tag { color: var(--teal-strong); }
.tenant--pop-grape .tenant__tag { color: #6B4E9A; }
.tenant--pop-blue  .tenant__tag { color: #175A99; }
.tenant--pop-amber .tenant__tag { color: #8A5A0A; }

/* plain (no pill/background) label text, colored by kategori warna — reused wherever a meta value needs the category color without the .chip pill treatment (e.g. single-tenant.php) */
.text-tag { font-weight: 700; font-size: .95rem; }
.text-tag--coral { color: var(--coral-strong); }
.text-tag--teal  { color: var(--teal-strong); }
.text-tag--grape { color: #6B4E9A; }
.text-tag--blue  { color: #175A99; }
.text-tag--amber { color: #8A5A0A; }

/* ---------- Icon badges (reused by feature cards) ---------- */
/* every gradient darkened so the white icon stroke reads ≥4.5:1 at both ends (some ends were as low as 1.6:1 before) */
.quick__icon { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; color: #fff; }
.q1 { background: linear-gradient(135deg, #C41F5A, #B84A1D); }
.q2 { background: linear-gradient(135deg, #0A6F68, #1C7E91); }
.q3 { background: linear-gradient(135deg, #B84A1D, #96590A); }
.q4 { background: linear-gradient(135deg, #7B5EA7, #B06AB3); }
.q5 { background: linear-gradient(135deg, #1D6FBE, #1B7FA3); }

/* ---------- Logo marquee ---------- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee__row { display: flex; gap: 18px; width: max-content; animation: scroll-x 42s linear infinite; }
.marquee:hover .marquee__row { animation-play-state: paused; }
.marquee__item {
  width: 120px; aspect-ratio: 1 / 1; flex-shrink: 0; background: var(--surface); border-radius: var(--r-sm);
  display: grid; place-items: center; padding: 18px; border: 1px solid var(--line);
}
.marquee__item img { max-height: 100%; max-width: 100%; object-fit: contain; mix-blend-mode: multiply; }
@keyframes scroll-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Sunset CTA band ---------- */
.cta-band { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--sunset); color: #fff; padding: clamp(32px, 5vw, 60px); }
.cta-band::before { content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%; background: rgba(255, 255, 255, .14); top: -120px; right: -80px; }
.cta-band::after { content: ""; position: absolute; width: 200px; height: 200px; border-radius: 50%; background: rgba(255, 255, 255, .12); bottom: -90px; left: 10%; }
.cta-band > * { position: relative; z-index: 2; }
.cta-band h2 { color: #fff; }
.cta-band .lead { color: rgba(255, 255, 255, .92); }

/* full-bleed variant: gradient spans the viewport, content stays in .container */
.cta-full { position: relative; overflow: hidden; background: var(--sunset); color: #fff; padding-block: clamp(40px, 6vw, 76px); }
.cta-full::before { content: ""; position: absolute; width: 380px; height: 380px; border-radius: 50%; background: rgba(255, 255, 255, .14); top: -140px; right: -100px; }
.cta-full::after { content: ""; position: absolute; width: 240px; height: 240px; border-radius: 50%; background: rgba(255, 255, 255, .12); bottom: -110px; left: 8%; }
.cta-full .container { position: relative; z-index: 2; }
.cta-full h2 { color: #fff; }
.cta-full .lead { color: rgba(255, 255, 255, .92); }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; }
.stat { background: var(--surface); border-radius: var(--r); padding: 24px; border: 1px solid var(--line); text-align: center; }
.stat b { display: block; font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; color: var(--coral-strong); letter-spacing: -.03em; line-height: 1; }
.stat span { color: var(--ink-soft); font-weight: 600; font-size: .95rem; }

/* ---------- Icon card (feature blocks) ---------- */
.icard { background: var(--surface); border-radius: var(--r); padding: 26px 24px; border: 1px solid var(--line); height: 100%; }
.icard h3 { margin-bottom: 6px; }

/* ---------- Steps ---------- */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.step { background: var(--surface); border-radius: var(--r); padding: 26px 22px; border: 1px solid var(--line); position: relative; }
.step::before {
  counter-increment: step; content: counter(step);
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--coral-deep); color: #fff; font-weight: 800; margin-bottom: 14px;
}

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 700; font-size: .9rem; }
.input, .search-input, select.input {
  width: 100%; min-height: 50px; padding: 0 18px; border-radius: var(--r-pill);
  border: 1.5px solid var(--line); background: var(--surface); transition: border-color .15s ease;
}
textarea.input { border-radius: var(--r); padding: 14px 18px; min-height: 120px; }
.input:focus, .search-input:focus { border-color: var(--coral); outline: none; }

/* directory search */
.search-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; }
.search-row .search-bar { flex: 1 1 320px; max-width: none; }
.search-bar { position: relative; max-width: 620px; }
.search-bar svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search-bar .search-input { padding-left: 50px; min-height: 58px; border-color: var(--line); }

.select-filter {
  flex: 0 0 auto; min-width: 178px; min-height: 58px;
  padding: 0 42px 0 20px; border-radius: var(--r-pill);
  border: 1.5px solid transparent; background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A7F93' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 18px;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  font-weight: 700; font-size: .95rem; color: var(--ink);
  border-color: var(--line); cursor: pointer;
  transition: border-color .15s ease;
}
.select-filter:focus { outline: none; border-color: var(--coral); }
@media (max-width: 620px) {
  .search-row .search-bar { flex-basis: 100%; }
  .select-filter { flex: 1 1 0; min-width: 0; }
}

/* ---------- Newsletter ---------- */
.newsletter-form { display: flex; gap: 10px; flex-wrap: wrap; }
.newsletter-form .input { flex: 1; min-width: 200px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #E9E0F0; padding-block: clamp(44px, 6vw, 72px) 28px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 36px; }
.site-footer h4 { color: #fff; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 16px; }
.site-footer a { color: #C9BCD8; font-size: .95rem; }
.site-footer a:hover { color: #fff; }
.footer-links li { margin-bottom: 10px; }
.footer-brand p { color: #B7A9C6; margin: 14px 0; max-width: 34ch; }
.footer-news { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.footer-news .input { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: #fff; min-width: 0; flex: 1; }
.footer-news .input::placeholder { color: #A99BB8; }
.socials { display: flex; gap: 10px; margin-top: 18px; }
.socials a { width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .1); display: grid; place-items: center; color: #fff; transition: background .18s ease, transform .18s ease; }
.socials a:hover { background: var(--coral); transform: translateY(-3px); }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 40px; padding-top: 22px; display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; color: #A99BB8; font-size: .86rem; }
.footer-bottom a { color: #A99BB8; }

/* ---------- Scroll reveal (only hide when JS is active) ---------- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Utilities ---------- */
.stack-sm > * + * { margin-top: 10px; }
.stack-sm > .card { height: auto; }
.mt-1 { margin-top: 10px; } .mt-2 { margin-top: 20px; } .mt-3 { margin-top: 32px; }
.center { text-align: center; }
.flex { display: flex; } .items-center { align-items: center; } .gap-2 { gap: 12px; } .wrap { flex-wrap: wrap; }
.hide-empty:empty { display: none; }
.count-note { color: var(--muted); font-weight: 600; font-size: .92rem; }
.no-results { text-align: center; padding: 60px 20px; color: var(--muted); }

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
  .nav { display: none; }
  .nav-toggle { display: grid; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .join-btn { display: none; }
}
@media (max-width: 620px) {
  :root { --header-h: 76px; }
  .header-inner { gap: 10px; }
  .brand__text span { display: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .section-head--row { align-items: flex-start; }
  /* force multi-column blocks to single column on phones */
  .grid[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .cta-band .stats { grid-template-columns: 1fr 1fr !important; }

  /* Minimalist list-style cards on mobile (only cards with a thumbnail + body — not pure photo tiles, not the vivid Highlights mosaic) */
  .card:not(.card--pop):has(.card__media):has(.card__body) { flex-direction: row; }
  .card:not(.card--pop):has(.card__media):has(.card__body):hover { transform: none; }
  .card:not(.card--pop):has(.card__media):has(.card__body) .card__media { flex: 0 0 96px; width: 96px; aspect-ratio: 1 / 1 !important; }
  .card:not(.card--pop):has(.card__media):has(.card__body) .card__media .chip { font-size: .6rem; padding: .25em .5em; top: 5px; left: 5px; }
  .card:not(.card--pop):has(.card__media):has(.card__body) .card__body { padding: 10px 14px; gap: 3px; justify-content: center; }
  .card:not(.card--pop):has(.card__media):has(.card__body) .card__title { font-size: .95rem; line-height: 1.25; min-height: 2.5em; }
  .card:not(.card--pop):has(.card__media):has(.card__body) .card__meta { font-size: .74rem; }
  .card:not(.card--pop):has(.card__media):has(.card__body) .card__excerpt { display: none; }
  .card:not(.card--pop):has(.card__media):has(.card__body) .card__foot { margin-top: 2px; padding-top: 0; }
  .card:not(.card--pop):has(.card__media):has(.card__body) .card__foot .btn-ghost { font-size: .8rem; min-height: auto; }

  /* Tenant cards → compact horizontal row */
  .tenant { flex-direction: row; }
  .tenant:hover { transform: none; }
  .tenant__logo { flex: 0 0 74px; width: 74px; aspect-ratio: 1 / 1; padding: 10px; }
  .tenant__body { flex-direction: column; align-items: flex-start; text-align: left; padding: 10px 14px; gap: 3px; justify-content: center; }
  .tenant__unit { margin-top: 2px; }
}