/* Goal landings /invest/{resale|living|rent}/ — scoped to .inv (intent-landing.php). */

.inv { overflow: clip; }
.inv-top { display: flex; flex-direction: column; gap: 20px; padding-top: 28px; }
.inv .breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; font-size: 13px; }
.inv .breadcrumbs [aria-current="page"] { color: var(--ui-ink); font-weight: 600; }

/* Goal switcher */
.inv-switch { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 10px; }
.inv-switch__item { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: var(--ui-radius); background: var(--ui-panel); border: 1px solid var(--ui-line); box-shadow: var(--ui-shadow); color: var(--ui-ink); text-decoration: none; transition: box-shadow .2s, border-color .2s; }
.inv-switch__item:hover { box-shadow: var(--ui-shadow-hover); color: var(--ui-ink); }
.inv-switch__num { font-size: 13px; font-weight: 700; color: var(--ui-muted); }
.inv-switch__text { display: flex; flex-direction: column; }
.inv-switch__text strong { font-size: 16px; font-weight: 800; }
.inv-switch__text span { font-size: 12px; color: var(--ui-muted); }
.inv-switch__item[aria-current="page"] { background: var(--ui-accent); border-color: var(--ui-accent); color: #fff; }
.inv-switch__item[aria-current="page"] .inv-switch__num,
.inv-switch__item[aria-current="page"] .inv-switch__text span { color: rgba(255, 255, 255, .78); }

/* Hero */
.inv-hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 56px; border-radius: 32px; overflow: hidden; }
.inv-hero--accent { background: var(--ui-accent); color: #fff; }
.inv-hero--light { background: var(--ui-panel); border: 1px solid var(--ui-line); }
.inv-hero__bg { position: absolute; inset: 0; z-index: -1; }
.inv-hero__bg .inv-hero__image { width: 100%; height: 100%; object-fit: cover; opacity: .22; mix-blend-mode: luminosity; }
.inv--rent .inv-hero__bg .inv-hero__image { opacity: .16; }
.inv-hero__copy { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.inv-hero--accent .inv-hero__eyebrow { color: #D9E5FF; }
.inv-hero h1 { margin: 0; font-size: clamp(40px, 4.4vw, 60px); line-height: 1; font-weight: 800; letter-spacing: -0.035em; text-wrap: balance; color: inherit; }
.inv-hero__intro { margin: 0; max-width: 560px; font-size: 17px; line-height: 1.55; color: var(--ui-body); }
.inv-hero--accent .inv-hero__intro { color: rgba(255, 255, 255, .86); }
.inv-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.inv-hero__actions .ui-btn { min-height: 52px; padding: 0 24px; }
.inv-btn--soft { background: var(--ui-ground); color: var(--ui-ink); }
.inv-btn--soft:hover { background: #E6ECF8; color: var(--ui-ink); }

.inv-hero__media { position: relative; margin: 0; min-height: 420px; border-radius: var(--ui-radius); overflow: hidden; background: var(--ui-line); }
.inv-hero__media .inv-hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.inv-hero__chips { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.inv-hero__chip { padding: 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--ui-ink); font-size: 13px; font-weight: 700; text-decoration: none; }
a.inv-hero__chip:hover { color: var(--ui-accent); }

.inv-hero__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.inv-hero__tiles li { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: var(--ui-radius); background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); }
.inv-hero__tiles strong { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.inv-hero__tiles span { font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, .86); }

/* Lead form (hero on resale, closing block on living/rent) */
.inv-lead { position: relative; display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 460px; justify-self: end; box-sizing: border-box; padding: 22px; border-radius: var(--ui-radius); background: var(--ui-panel); color: var(--ui-ink); box-shadow: 0 22px 55px rgba(20, 27, 45, .16); scroll-margin-top: 24px; }
.inv-lead__title { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; color: var(--ui-ink); }
.inv-lead__text { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ui-muted); }
.inv-lead--close .inv-lead__title, .inv-lead--close .inv-lead__text { display: none; }
.inv-lead__form { display: flex; flex-direction: column; gap: 10px; }
.inv-lead__form .ui-field input::placeholder { color: var(--ui-faint); }
.inv-lead__select { position: relative; }
.inv-lead__select::after { content: ""; position: absolute; right: 18px; bottom: 20px; width: 7px; height: 7px; border-right: 2px solid var(--ui-muted); border-bottom: 2px solid var(--ui-muted); transform: rotate(45deg); pointer-events: none; }
.inv-lead__select select { width: 100%; cursor: pointer; }
.inv-lead__consent { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; font-size: 12px; line-height: 1.45; color: var(--ui-muted); }
.inv-lead__consent input { width: 18px; height: 18px; margin: 0; accent-color: var(--ui-accent); }
.inv-lead__consent a { color: var(--ui-accent); font-weight: 700; }
.inv-lead__trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.inv-lead__error { margin: 0; color: #B42318; font-size: 13px; }
.inv-lead__submit { width: 100%; min-height: 52px; border-radius: var(--ui-radius-sm); font-size: 16px; }
.inv-lead__submit:disabled { opacity: .7; cursor: wait; }
.inv-lead__success { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; }
.inv-lead__success > span { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 999px; background: var(--ui-tint); color: var(--ui-accent); font-weight: 800; }
.inv-lead__success strong { font-size: 22px; font-weight: 800; }
.inv-lead__success p { margin: 0; font-size: 14px; color: var(--ui-muted); }
.inv-lead [hidden] { display: none !important; }

/* Three points */
.inv-points__head { margin-bottom: 28px; }
.inv-points__head .ui-h2 { max-width: 760px; }
.inv-points__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.inv-points__item { display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: var(--ui-radius); background: var(--ui-panel); border: 1px solid var(--ui-line); }
.inv-points__num { font-size: 40px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: #A9B4CA; }
.inv-points__title { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.inv-points__item p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ui-muted); }

/* Explainer panel */
.inv-panel { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; padding: 40px; border-radius: 32px; background: var(--ui-panel); border: 1px solid var(--ui-line); scroll-margin-top: 24px; }
#calc { scroll-margin-top: 24px; }
.inv-panel__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.inv-panel__copy > p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ui-muted); }
.inv-panel__body { min-width: 0; }
.inv-notice { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 16px 18px; border-radius: var(--ui-radius-sm); background: #DDF4FF; color: var(--ui-ink); font-size: 14px; font-weight: 700; line-height: 1.45; }
.inv-notice svg { flex: 0 0 auto; margin-top: 1px; }
.inv-table-wrap { overflow-x: auto; }
.inv-table { width: 100%; border-collapse: collapse; }
.inv-table th, .inv-table td { padding: 14px 10px; border-bottom: 1px solid var(--ui-line-soft); font-size: 15px; line-height: 1.45; text-align: left; vertical-align: top; }
.inv-table thead th { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-muted); }
.inv-table tbody th { font-weight: 700; }
.inv-table tbody th a { color: var(--ui-ink); text-decoration: none; }
.inv-table tbody th a:hover { color: var(--ui-accent); }
.inv-table__num { display: inline-grid; width: 24px; height: 24px; margin-right: 10px; place-items: center; border-radius: 999px; background: var(--ui-tint); color: var(--ui-accent); font-size: 12px; font-weight: 800; vertical-align: 1px; }
.inv-table__muted { color: var(--ui-muted); font-size: 14px; }
.inv-costs { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.inv-costs__item { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--ui-line-soft); }
.inv-costs__item:last-child { border-bottom: 0; }
.inv-costs__sign { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 999px; background: var(--ui-ground); font-size: 18px; font-weight: 800; color: var(--ui-body); }
.inv-costs__item--plus .inv-costs__sign { background: var(--ui-tint); color: var(--ui-accent); }
.inv-costs__item--base .inv-costs__sign { background: var(--ui-ink); color: #fff; }
.inv-costs__text { display: flex; flex-direction: column; gap: 2px; }
.inv-costs__text strong { font-size: 15px; font-weight: 800; }
.inv-costs__text span { font-size: 14px; color: var(--ui-muted); }
.inv-costs__tag { padding: 4px 10px; border-radius: 999px; background: var(--ui-ground); font-size: 12px; font-weight: 700; color: var(--ui-muted); white-space: nowrap; }
.inv-costs__item--plus .inv-costs__tag { background: var(--ui-tint); color: var(--ui-accent-deep); }

/* Projects */
.inv-projects__head { align-items: flex-end; }
.inv-projects__order { margin: 0; max-width: 640px; font-size: 15px; line-height: 1.55; color: var(--ui-muted); }
.inv .intent-filter { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.inv-filter__label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-muted); }
.inv-filter__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.inv-chip { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--ui-line); background: var(--ui-panel); color: var(--ui-ink); font-size: 14px; font-weight: 600; cursor: pointer; }
.inv-chip:hover { border-color: var(--ui-ink); }
.inv-chip[aria-pressed="true"] { border-color: var(--ui-accent); background: var(--ui-accent); color: #fff; font-weight: 700; }
.inv .intent-projects__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.inv .intent-projects__item { min-width: 0; }
.inv .intent-projects__item .project-card { height: 100%; }
.inv-empty { padding: 32px; border-radius: var(--ui-radius); background: var(--ui-panel); border: 1px dashed var(--ui-line); color: var(--ui-muted); }
.inv-empty p { margin: 0; }
.inv-projects__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }
.inv .intent-projects__note { flex: 1 1 420px; max-width: 820px; margin: 0; font-size: 13px; line-height: 1.6; color: var(--ui-muted); }

/* Developers */
.inv-devs .ui-section__head { margin-bottom: 24px; }
.inv-devs__title { font-size: clamp(22px, 2vw, 28px); }
.inv-dev { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; color: var(--ui-ink); text-decoration: none; }
.inv-dev:hover { color: var(--ui-ink); }
.inv-dev__top { display: flex; align-items: center; gap: 12px; }
.inv-dev__top strong { font-size: 18px; font-weight: 800; line-height: 1.2; }
.inv-dev__logo { display: inline-grid; flex: 0 0 auto; width: 44px; height: 44px; place-items: center; overflow: hidden; border-radius: 12px; background: var(--ui-ground); }
.inv-dev__logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; box-sizing: border-box; }
.inv-dev__logo .developer-logo__fallback { font-size: 13px; font-weight: 800; color: var(--ui-accent); }
.inv-dev__chip { align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--ui-tint); color: var(--ui-accent-deep); font-size: 12px; font-weight: 700; }
.inv-dev__meta { font-size: 13px; color: var(--ui-muted); }

/* Closing CTA */
.inv-close__box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 40px; align-items: center; padding: 48px; border-radius: 32px; }
.inv-close__box--accent { background: var(--ui-accent); color: #fff; }
.inv-close__box--accent .ui-eyebrow { color: #D9E5FF; }
.inv-close__box--accent .ui-h2 { color: #fff; }
.inv-close__box--line { grid-template-columns: minmax(0, 1fr) auto; background: var(--ui-panel); border: 1px solid var(--ui-line); }
.inv-close__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.inv-close__copy p { margin: 0; max-width: 560px; font-size: 16px; line-height: 1.55; color: var(--ui-muted); }
.inv-close__box--accent .inv-close__copy p { color: rgba(255, 255, 255, .82); }
.inv-close__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.inv-close .inv-lead { justify-self: stretch; max-width: none; box-shadow: none; }

/* Reveal motion (classes toggled by assets/js/intent-landing.js) */
.inv.intent-motion-ready [data-intent-reveal]:not(.is-visible) { opacity: 0; transform: translateY(18px); }
.inv.intent-motion-ready [data-intent-reveal] { transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }

@media (max-width: 1100px) {
  .inv-hero { grid-template-columns: 1fr; }
  .inv-lead { justify-self: stretch; max-width: none; }
  .inv-panel { grid-template-columns: 1fr; }
  .inv-close__box, .inv-close__box--line { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .inv .intent-projects__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inv-top { padding-top: 20px; }
  .inv-hero { padding: 32px 20px; border-radius: 24px; gap: 28px; }
  .inv-hero__media { min-height: 300px; }
  .inv-panel { padding: 28px 20px; border-radius: 24px; gap: 28px; }
  .inv-close__box { padding: 32px 20px; border-radius: 24px; }
}
@media (max-width: 620px) {
  .inv .intent-projects__grid { grid-template-columns: 1fr; }
  .inv-switch { grid-template-columns: 1fr; gap: 8px; }
  .inv-switch__item { padding: 12px 16px; }
  .inv-hero h1 { font-size: 38px; }
  .inv-hero__intro { font-size: 16px; }
  .inv-hero__actions .ui-btn { flex: 1 1 auto; }
  .inv-hero__tiles { grid-template-columns: 1fr 1fr; gap: 8px; }
  .inv-hero__tiles li { padding: 14px; }
  .inv-hero__tiles strong { font-size: 18px; }
  .inv-lead { padding: 16px; }
  .inv-points__item { padding: 22px; }
  .inv-points__num { font-size: 32px; }
  .inv-table thead { display: none; }
  .inv-table, .inv-table tbody, .inv-table tr, .inv-table th, .inv-table td { display: block; width: 100%; box-sizing: border-box; }
  .inv-table tr { padding: 12px 0; border-bottom: 1px solid var(--ui-line-soft); }
  .inv-table th, .inv-table td { padding: 2px 0; border: 0; }
  .inv--living .inv-table td { display: inline; width: auto; font-size: 14px; color: var(--ui-muted); }
  .inv--living .inv-table td + td::before { content: " · "; }
  .inv-costs__item { grid-template-columns: 28px minmax(0, 1fr); }
  .inv-costs__sign { width: 28px; height: 28px; font-size: 16px; }
  .inv-costs__tag { grid-column: 2; justify-self: start; }
  .inv-chip { min-height: 40px; padding: 0 12px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .inv.intent-motion-ready [data-intent-reveal]:not(.is-visible) { opacity: 1; transform: none; }
}