/* ============================================================
   CENTRAL PARK RESIDENCES — PAGE COMPONENTS
   components.css
   ------------------------------------------------------------
   Components used by the inner pages (team, process steps, feature
   grids, metric tables). Extracted verbatim from the source pages.
   Section vertical padding is handled by overrides.css (--cp-sy).

   Depends on: variables.css, core.css
   ============================================================ */

/* ---- Team (About / Ownership) ---- */
.team, .cp-team { background: var(--bg); }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: clamp(44px,5vw,68px); }
.tmember { display: flex; flex-direction: column; }
.tmember .tphoto { aspect-ratio: 4/4.4; border-radius: var(--r-md); overflow: hidden; background: var(--bg-soft); margin-bottom: 16px; }
.tmember .tphoto img { width: 100%; height: 100%!important; object-fit: cover; transition: transform 1s var(--ease); }
.tmember:hover .tphoto img { transform: scale(1.05); }
.tmember .trole { color: var(--muted); font-size: 12.5px; font-weight: 600; letter-spacing: .03em; }
.tmember h4 { font-size: 18px; font-weight: 600; letter-spacing: -.02em; margin: 6px 0 8px; }
.tmember p { color: var(--muted); font-size: 13.5px; line-height: 1.55; }
@media (max-width: 880px) { .team-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .team-grid { grid-template-columns: 1fr; } }

/* ---- Process steps (Opportunity) ---- */
.process, .cp-process { background: var(--bg-soft); }
.proc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: clamp(44px,5vw,68px); }
.proc { padding-top: 20px; border-top: 2px solid var(--ink); }
.proc .pn { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: .04em; }
.proc h4 { font-size: 19px; font-weight: 600; letter-spacing: -.02em; margin: 14px 0 9px; }
.proc p { color: var(--muted); font-size: 14px; line-height: 1.6; }
@media (max-width: 880px) { .proc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .proc-grid { grid-template-columns: 1fr; } }

/* ---- Feature grid (cards / check / tick) ---- */
.cp-features { background: var(--bg); }
.cp-features.soft { background: var(--bg-soft); }
.cp-features.dark { background: var(--dark); color: #fff; }
.cp-feat-grid { margin-top: clamp(44px,5vw,68px); }

/* card layout (service stack / why-invest cards) */
.cp-feat-card { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.wi-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; display: flex; flex-direction: column; gap: 14px; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.cp-features.soft .wi-card, .cp-features.dark .wi-card { background: var(--bg); }
.wi-card:hover { transform: translateY(-5px); box-shadow: 0 24px 50px -30px rgba(21,21,19,.36); }
.wi-card .wi-ic { width: 46px; height: 46px; border-radius: 13px; background: var(--lime); display: flex; align-items: center; justify-content: center; color: var(--ink); }
.wi-card .wi-ic svg { width: 22px; height: 22px; }
.wi-card h4 { font-size: 18px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.wi-card p { color: var(--muted); font-size: 13.5px; line-height: 1.55; }
@media (max-width: 980px) { .cp-feat-card { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cp-feat-card { grid-template-columns: 1fr; } }

/* check layout (what-you-receive / owner reporting) */
.cp-feat-check { display: flex; flex-direction: column; }
.rrow { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 22px 0; border-top: 1px solid var(--line); align-items: start; }
.rrow:last-child { border-bottom: 1px solid var(--line); }
.cp-features.dark .rrow { border-color: var(--line-d); }
.rrow .ri { width: 40px; height: 40px; border-radius: 50%; background: var(--lime); display: flex; align-items: center; justify-content: center; color: var(--ink); flex: 0 0 auto; font-size: 14px; font-weight: 700; }
.rrow h4 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; margin-top:0px; margin-bottom: 5px; color: var(--ink); }
.cp-features.dark .rrow h4 { color: #fff; }
.rrow p { color: var(--muted); font-size: 14px; line-height: 1.55; max-width: 42ch; }
.cp-features.dark .rrow p { color: var(--muted-d); }

/* tick layout (residence features) */
.cp-feat-tick { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; }
.feat { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--ink); padding: 13px 0; border-bottom: 1px solid var(--line); }
.feat .fk { width: 24px; height: 24px; border-radius: 50%; background: var(--lime); display: flex; align-items: center; justify-content: center; color: var(--ink); flex: 0 0 auto; font-size: 12px; }
@media (max-width: 680px) { .cp-feat-tick { grid-template-columns: 1fr; } }

/* ---- Metric table (projected returns / fees / breakdown) ---- */
.cp-metric-table { max-width: 640px; }
.fin-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.fin-row .fl { color: var(--muted); font-size: 14px; }
.fin-row .fv { font-weight: 600; font-size: 16px; letter-spacing: -.01em; text-align: right; }
.fin-row.key .fv { color: #1f8a3b; background: rgba(205,242,74,.22); padding: 3px 10px; border-radius: var(--r-pill); }
.fin-note { font-size: 12px; color: var(--muted); margin-top: 16px; line-height: 1.5; }

/* ============================================================
   PAGE HERO (inner-page hero — shorter than the home .hero)
   ============================================================ */
.page-hero { background: var(--dark); color: #fff; padding: 150px var(--gutter) 78px; position: relative; overflow: hidden; }
.page-hero .ph-bg { position: absolute; inset: 0; z-index: 0; }
.page-hero .ph-bg img { width: 100%; height: 100%!important; object-fit: cover; }
.page-hero .ph-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(21,21,19,.66),rgba(21,21,19,.5) 45%,rgba(21,21,19,.93)); }
.page-hero .ph-inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; }
.page-hero h1 { color: #fff; font-size: clamp(40px,6.4vw,92px); max-width: 15ch; margin-top: 20px; }
.ph-sub { color: var(--muted-d); font-size: clamp(15px,1.2vw,18px); max-width: 46ch; margin-top: 22px; }

/* ============================================================
   OPERATING MODEL split (image + quote | copy)
   ============================================================ */
.opmodel { background: var(--bg); }
.opm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,5vw,72px); align-items: center; }
.opm-photo { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/3.4; }
.opm-photo img { width: 100%; height: 100%; object-fit: cover; }
.opm-quote { position: absolute; left: 20px; right: 20px; bottom: 20px; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); border-radius: var(--r-md); padding: 18px 20px; font-size: 14px; font-weight: 500; color: var(--ink); }
.opm-copy .lede + .lede { margin-top: 14px; }
@media (max-width: 880px) { .opm-grid { grid-template-columns: 1fr; } }

/* ============================================================
   SERVICE STACK cards (icon + heading + check list)
   ============================================================ */
.stack { background: var(--bg-soft); }
.stack-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; margin-top: clamp(44px,5vw,68px); }
.scol { background: var(--bg); border-radius: var(--r-lg); padding: 28px 26px 30px; border: 1px solid var(--line); }
.scol .si { width: 46px; height: 46px; border-radius: 13px; background: var(--lime); display: flex; align-items: center; justify-content: center; color: var(--ink); margin-bottom: 18px; }
.scol .si svg { width: 22px; height: 22px; }
.scol h3 { font-size: 18px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 16px; }
.scol ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.scol li { display: flex; gap: 10px; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.scol li::before { content: "✓"; color: var(--ink); font-weight: 700; font-size: 12px; flex: 0 0 auto; margin-top: 1px; }
@media (max-width: 920px) { .stack-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .stack-grid { grid-template-columns: 1fr; } }

/* ============================================================
   OWNER REPORT (copy + points | statement card)
   ============================================================ */
.report { background: var(--dark); color: #fff; }
.report .kicker, .report h2 { color: #fff; }
.report-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(36px,5vw,72px); align-items: center; }
.report-copy .lede { color: var(--muted-d); }
.rep-points { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.rep-point { display: flex; gap: 13px; color: var(--muted-d); font-size: 14.5px; align-items: flex-start; }
.rep-point .rp { width: 30px; height: 30px; border-radius: 50%; background: var(--dark-card); color: var(--lime); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: 13px; }
.statement { background: #fff; color: var(--ink); border-radius: var(--r-lg); padding: clamp(24px,3vw,38px); box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); }
.stmt-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.stmt-head .st-t { font-weight: 600; font-size: 15px; }
.stmt-head .st-d { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.stmt-head .st-badge { background: var(--lime); color: var(--ink); font-size: 11px; font-weight: 600; padding: 6px 12px; border-radius: var(--r-pill); }
.statement .stmt-row { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.statement .stmt-row .sl { color: var(--muted); display: flex; align-items: center; gap: 9px; }
.statement .stmt-row .sl .dotk { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.statement .stmt-row .sv { font-variant-numeric: tabular-nums; font-weight: 500; }
.statement .stmt-row.neg .sv { color: var(--muted); }
.stmt-net { display: flex; align-items: center; justify-content: space-between; padding-top: 18px; margin-top: 6px; }
.stmt-net .nl { font-weight: 600; font-size: 15px; }
.stmt-net .nv { font-size: 30px; font-weight: 600; letter-spacing: -.03em; color: #2e7d18; font-variant-numeric: tabular-nums; }
.stmt-foot { color: var(--muted); font-size: 11.5px; margin-top: 16px; line-height: 1.5; }
@media (max-width: 880px) { .report-grid { grid-template-columns: 1fr; } }

/* ============================================================
   FEE COMPARISON (two cards with lists)
   ============================================================ */
.fees { background: var(--bg-soft); }
.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: clamp(44px,5vw,64px); }
.cmp-card { border-radius: var(--r-lg); padding: clamp(26px,3vw,40px); }
.cmp-card.trad { background: var(--bg); border: 1px solid var(--line); }
.cmp-card.cp { background: var(--dark); color: #fff; }
.cmp-card .cmp-tag { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--muted); margin-bottom: 8px; }
.cmp-card.cp .cmp-tag { color: var(--lime); }
.cmp-card h3 { font-size: 23px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 22px; }
.cmp-card.cp h3 { color: #fff; }
.cmp-list { display: flex; flex-direction: column; gap: 13px; }
.cmp-li { display: flex; gap: 11px; font-size: 14px; align-items: flex-start; line-height: 1.5; }
.cmp-card.trad .cmp-li { color: var(--muted); }
.cmp-card.cp .cmp-li { color: var(--muted-d); }
.cmp-li .ci { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 1px; }
.cmp-card.trad .cmp-li .ci { background: var(--bg-soft); color: var(--muted); }
.cmp-card.cp .cmp-li .ci { background: var(--lime); color: var(--ink); }
@media (max-width: 760px) { .cmp { grid-template-columns: 1fr; } }

/* ============================================================
   PER-RESIDENCE RETURNS TABLE (.rettable) — The Opportunity
   ============================================================ */
.rettable { margin-top: clamp(32px,4vw,48px); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--bg); }
.rettable .rt-scroll { overflow-x: auto; }
.rettable table { width: 100%; border-collapse: collapse; min-width: 640px; }
.rettable th, .rettable td { text-align: left; padding: 17px 22px; font-size: 14px; white-space: nowrap; }
.rettable thead th { background: var(--dark); color: #fff; font-weight: 600; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.rettable thead th.r, .rettable td.r { text-align: right; }
.rettable tbody tr { border-top: 1px solid var(--line); transition: background .2s var(--ease); }
.rettable tbody tr:hover { background: var(--bg-soft); }
.rettable td b { font-weight: 600; }
.rettable td.num { font-variant-numeric: tabular-nums; }
.rettable .yld { color: #2e7d18; font-weight: 600; }
.rettable tfoot td { background: var(--bg-soft); font-weight: 600; border-top: 2px solid var(--ink); }
.rettable-note { color: var(--muted); font-size: 12px; line-height: 1.5; margin-top: 16px; max-width: 64ch; }

/* ============================================================
   WHY-TULSA MARKET BAND (.market) — dark, copy + 2×2 stat grid
   ============================================================ */
.market { background: var(--dark); color: #fff; }
.market-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,5vw,72px); align-items: center; }
.market-copy h2 { color: #fff; }
.market-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-d); border: 1px solid var(--line-d); border-radius: var(--r-md); overflow: hidden; }
.mstat { background: var(--dark); padding: clamp(24px,2.6vw,34px); }
.mstat .mv { font-size: clamp(30px,3.4vw,48px); font-weight: 500; letter-spacing: -.035em; color: var(--lime); line-height: .92; }
.mstat .mk { color: var(--muted-d); font-size: 13px; margin-top: 12px; line-height: 1.5; max-width: 22ch; }
@media (max-width: 880px) { .market-grid { grid-template-columns: 1fr; } }

/* ============================================================
   STORY SPLIT (.story) — photo + badge beside copy — About
   ============================================================ */
.story { background: var(--bg); }
.story-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(36px,5vw,72px); align-items: center; }
.story-grid.story-flip .story-photo { order: 2; }
.story-photo { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/4.2; }
.story-photo img { width: 100%; height: 100%!important; object-fit: cover; }
.story-badge { position: absolute; left: 20px; bottom: 20px; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); border-radius: var(--r-md); padding: 16px 20px; max-width: 240px; }
.story-badge .sb-n { font-size: 30px; font-weight: 600; letter-spacing: -.03em; }
.story-badge .sb-l { font-size: 13px; color: var(--muted); margin-top: 4px; }
.story-copy p { color: var(--muted); font-size: 16px; line-height: 1.75; max-width: 48ch; }
.story-copy p + p { margin-top: 16px; }
@media (max-width: 760px) { .story-grid { grid-template-columns: 1fr; } .story-grid.story-flip .story-photo { order: 0; } }

/* ============================================================
   TRACK RECORD (.track) — dark stat row with hairline dividers
   ============================================================ */
.track { background: var(--dark); color: #fff; }
.track .kicker { color: #fff; }
.track-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 26px; margin-top: clamp(40px,5vw,60px); }
.tr-item { padding-right: 24px; }
.tr-item:not(:last-child) { border-right: 1px solid var(--line-d); }
.tr-item .v { font-size: clamp(38px,5vw,72px); font-weight: 500; letter-spacing: -.04em; line-height: .9; }
.tr-item .v em { font-style: normal; color: var(--lime); }
.tr-item .k { color: var(--muted-d); font-size: 13.5px; margin-top: 14px; max-width: 20ch; line-height: 1.5; }
@media (max-width: 760px) { .track-grid { grid-template-columns: 1fr 1fr; gap: 30px 24px; } .tr-item:nth-child(2) { border-right: none; } }

/* ============================================================
   HOW / WHY-BUY (.how) — lime icon cards (cp-cards "how" layout)
   ============================================================ */
.how { background: var(--bg-soft); }
.how-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; margin-top: clamp(44px,5vw,68px); }
.howc { display: flex; flex-direction: column; gap: 14px; }
.howc .hi { width: 46px; height: 46px; border-radius: 13px; background: var(--lime); display: flex; align-items: center; justify-content: center; color: var(--ink); }
.howc h4 { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.howc p { color: var(--muted); font-size: 14.5px; line-height: 1.6; max-width: 34ch; }
@media (max-width: 760px) { .how-grid { grid-template-columns: 1fr; } }

/* ============================================================
   OWNER SPOTLIGHT (.principals / .owner-grid) — About
   ============================================================ */
.principals { background: var(--bg-soft); }
.owner-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(36px,5vw,72px); align-items: center; margin-top: clamp(40px,5vw,60px); }
.owner-photo { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/4.6; background: var(--bg); }
.owner-photo img { width: 100%; height: 100%!important; object-fit: cover; }
.owner-quote { font-size: clamp(21px,2.4vw,32px); font-weight: 500; letter-spacing: -.02em; line-height: 1.32; color: var(--ink); }
.owner-quote .mark { color: var(--lime-deep); font-size: 1.3em; line-height: 0; }
.owner-copy p { color: var(--muted); font-size: 15px; line-height: 1.7; max-width: 46ch; margin-top: 20px; }
.owner-sign { display: flex; align-items: center; gap: 16px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.owner-sign .os-n { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.owner-sign .os-r { color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.owner-sign .os-badge { margin-left: auto; background: var(--lime); color: var(--ink); font-size: 12px; font-weight: 600; padding: 8px 14px; border-radius: var(--r-pill); }
@media (max-width: 760px) { .owner-grid { grid-template-columns: 1fr; } }

/* ============================================================
   PAGE-HERO ADDRESS PILL (.ph-addr) — Location
   ============================================================ */
.ph-addr { display: inline-flex; align-items: center; gap: 11px; margin-top: 28px; background: rgba(255,255,255,.1); border: 1px solid var(--line-d); padding: 12px 18px; border-radius: var(--r-pill); font-size: 14px; font-weight: 500; }
.ph-addr .ic { color: var(--lime); display: inline-flex; }

/* ============================================================
   WALKABILITY (.walk) — photo cards w/ category + place list
   ============================================================ */
.walk { background: var(--bg-soft); }
.walk-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: clamp(44px,5vw,68px); }
.wcard { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.wcard-photo { aspect-ratio: 16/10; overflow: hidden; }
.wcard-photo img { width: 100%; height: 100%!important; object-fit: cover; transition: transform 1s var(--ease); }
.wcard:hover .wcard-photo img { transform: scale(1.05); }
.wcard-body { padding: 22px 22px 24px; }
.wcard-cat { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .03em; display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.wcard-cat .sw { width: 8px; height: 8px; border-radius: 50%; }
.wlist { display: flex; flex-direction: column; }
.wli { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.wli:first-child { border-top: none; }
.wli b { font-weight: 500; }
.wli .wt { color: var(--muted); font-size: 12.5px; }
@media (max-width: 880px) { .walk-grid { grid-template-columns: 1fr; } }

/* ============================================================
   GETTING AROUND (.getting) — dark all-lime stat row (cp-track)
   ============================================================ */
.getting { background: var(--dark); color: #fff; }
.getting .kicker { color: #fff; }
.get-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 26px; margin-top: clamp(44px,5vw,68px); }
.gstat { padding-right: 24px; }
.gstat:not(:last-child) { border-right: 1px solid var(--line-d); }
.gstat .gv { font-size: clamp(34px,4vw,56px); font-weight: 500; letter-spacing: -.04em; line-height: .9; color: var(--lime); }
.gstat .gk { color: var(--muted-d); font-size: 13.5px; margin-top: 13px; max-width: 20ch; line-height: 1.5; }
@media (max-width: 760px) { .get-grid { grid-template-columns: 1fr 1fr; gap: 26px 22px; } .gstat:nth-child(2) { border-right: none; } }

/* ============================================================
   RIVER & SKYLINE (.river) — photo split w/ lede copy (cp-story)
   ============================================================ */
.river { background: var(--bg); }
.river-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(36px,5vw,72px); align-items: center; }
.river-photo { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/3.4; }
.river-photo img { width: 100%; height: 100%!important; object-fit: cover; }
.river-copy p { color: var(--muted); font-size: 16px; line-height: 1.75; max-width: 46ch; }
.river-copy p + p { margin-top: 16px; }
@media (max-width: 880px) { .river-grid { grid-template-columns: 1fr; } }

/* ============================================================
   PAGE-HERO STAT ROW (.ph-stats) — Residences
   ============================================================ */
.ph-stats { display: flex; gap: clamp(28px,4vw,56px); margin-top: 42px; flex-wrap: wrap; }
.ph-stat .n { font-size: clamp(30px,3.6vw,52px); font-weight: 500; letter-spacing: -.04em; line-height: .9; }
.ph-stat .n em { font-style: normal; color: var(--lime); }
.ph-stat .l { color: var(--muted-d); font-size: 13px; margin-top: 9px; max-width: 18ch; }

/* ============================================================
   RESIDENCE FILTER BAR (.filterbar) — chips + live count
   ============================================================ */
.filterbar { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.filterbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-block: 16px; }
.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip { padding: 11px 20px; border-radius: var(--r-pill); border: 1px solid var(--line); font-size: 14px; font-weight: 500; cursor: pointer; background: transparent; transition: all .3s var(--ease); font-family: var(--sans); color: var(--ink); }
.chip:hover { border-color: var(--ink); }
.chip.active { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.listing-count { color: var(--muted); font-size: 14px; }
.listing-count b { color: var(--ink); font-weight: 600; }

/* ============================================================
   EVERY RESIDENCE INCLUDES (.included)
   ============================================================ */
.included { background: var(--bg-soft); }
.included-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(28px,3.4vw,42px); }
.included-head h2 { font-size: clamp(24px,2.7vw,36px); font-weight: 600; letter-spacing: -.025em; max-width: 22ch; }
.included-link { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 9px; white-space: nowrap; transition: gap .3s var(--ease); }
.included-link:hover { gap: 14px; }
.included-link .ic { width: 32px; height: 32px; border-radius: 50%; background: var(--lime); color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: 14px; transition: transform .35s var(--ease); }
.included-link:hover .ic { transform: rotate(45deg); }
.inc-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.inc-item { display: flex; flex-direction: column; gap: 12px; }
.inc-item .ii { width: 46px; height: 46px; border-radius: 13px; background: var(--bg); display: flex; align-items: center; justify-content: center; color: var(--ink); }
.inc-item h4 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.inc-item p { color: var(--muted); font-size: 13.5px; line-height: 1.55; max-width: 26ch; }
@media (max-width: 760px) { .inc-grid { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   PORTFOLIO CTA (.res-cta) — lime band + ink button
   ============================================================ */
.res-cta { background: var(--lime); color: var(--ink); }
.res-cta .wrap { display: flex; align-items: center; justify-content: space-between; gap: 36px; flex-wrap: wrap; }
.res-cta h2 { font-size: clamp(30px,4vw,56px); font-weight: 500; letter-spacing: -.03em; max-width: 18ch; }
.res-cta .rc-note { font-size: 14px; max-width: 30ch; opacity: .72; margin-top: 14px; }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink .ic { background: var(--lime); color: var(--ink); }
.btn-ink:hover { background: #000; }
.btn-ink:hover .ic { transform: rotate(45deg); }

/* ============================================================
   EXPLORE THE OFFERING (.explore) — image overlay tiles
   ============================================================ */
.explore { background: var(--bg); }
.explore-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: clamp(36px,4vw,52px); }
.xcard { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/3.6; display: flex; align-items: flex-end; color: #fff; cursor: pointer; text-decoration: none; }
.xcard img.main-image { position: absolute; inset: 0; width: 100%; height: 100%!important; object-fit: cover; transition: transform 1s var(--ease); }
.xcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(21,21,19,.88),rgba(21,21,19,.1) 62%); }
.xcard:hover img { transform: scale(1.05); }
.xcard-c { position: relative; z-index: 2; padding: 28px; }
.xcard .xk { color: var(--lime); font-size: 12px; font-weight: 600; letter-spacing: .04em; margin-bottom: 9px; }
.xcard h3 { font-size: 25px; font-weight: 600; letter-spacing: -.02em; }
.xcard p { color: rgba(255,255,255,.82); font-size: 13.5px; margin-top: 9px; max-width: 30ch; line-height: 1.5; }
.xcard .xgo { margin-top: 18px; display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; }
.xcard .xgo .ic { width: 34px; height: 34px; border-radius: 50%; background: var(--lime); color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: 14px; transition: transform .35s var(--ease); }
.xcard:hover .xgo .ic { transform: rotate(45deg); }
@media (max-width: 760px) { .explore-grid { grid-template-columns: 1fr; } }

/* ============================================================
   CONTACT PAGE — receive list, contact cards, trust chips
   (.rrow / .ri already defined above; form uses core.css + .cp-form)
   ============================================================ */
.receive-list { margin-top: 30px; display: flex; flex-direction: column; }
.cmeta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.cmeta-card { flex: 1 1 200px; background: var(--bg-soft); border-radius: var(--r-md); padding: 18px 20px; text-decoration: none; transition: background .3s var(--ease); }
a.cmeta-card:hover { background: var(--line); }
.cmeta-card .cm-l { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .03em; margin-bottom: 7px; }
.cmeta-card .cm-v { font-size: 15px; font-weight: 600; color: var(--ink); }
.cmeta-card .cm-v.sm { font-size: 13.5px; font-weight: 500; line-height: 1.5; }
.trust-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.trust-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; padding: 8px 14px; border-radius: var(--r-pill); background: rgba(255,255,255,.06); border: 1px solid var(--line-d); color: var(--muted-d); }
.trust-chip::before { content: "\2713"; color: var(--lime); font-weight: 700; }
.trust-chip.on-light { background: var(--bg-soft); border-color: var(--line); color: var(--muted); }
.trust-chip.on-light::before { color: #2e7d18; }