/* ===========================================================================
   PALM OLYMPIA — page extras (builds on jkg / anandita / ajnara / strings /
   fusion / rgp CSS). Olympic-ring hero · Goldspire gallery · price builder ·
   three-zone switch
   =========================================================================== */

/* ---------- Hero: three slow, interlocking gold rings ---------- */
.po-rings { position: absolute; right: 6vw; top: 16%; z-index: -1; width: min(34vw, 460px); aspect-ratio: 2.2 / 1; pointer-events: none; opacity: .5; }
.po-rings i { position: absolute; top: 0; width: 46%; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid rgba(241, 198, 74, .65); box-shadow: 0 0 24px rgba(241, 198, 74, .18); animation: poOrbit 9s ease-in-out infinite; }
.po-rings i:nth-child(1) { left: 0; }
.po-rings i:nth-child(2) { left: 27%; top: 18%; animation-delay: -3s; border-color: rgba(255, 231, 160, .5); }
.po-rings i:nth-child(3) { left: 54%; animation-delay: -6s; }
@keyframes poOrbit { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(8deg); } }
.po-hero .jk-slide img { object-position: 50% 40%; }

/* ---------- Goldspire ---------- */
.po-gold { position: relative; }
.po-gold::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 60% at 15% 20%, rgba(173, 130, 70, .14), transparent 70%); }
.po-gold-head { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end; margin-bottom: 26px; }
.po-gold-head p { color: var(--text-dim); line-height: 1.7; }
.po-gold-head b { color: var(--gold-bright); font-weight: 500; }
.po-gold-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr; grid-template-rows: 250px 250px; gap: 14px; }
.po-ph { position: relative; overflow: hidden; padding: 0; border: 1px solid rgba(212, 175, 55, .22); border-radius: 20px; background: #0C100D; cursor: zoom-in; font: inherit; color: inherit; text-align: left; }
.po-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-lux); }
.po-ph:hover img { transform: scale(1.06); }
.po-ph::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 52%, rgba(5, 7, 5, .88)); pointer-events: none; }
.po-ph span { position: absolute; left: 16px; bottom: 13px; z-index: 2; font: 400 19px 'Fraunces', Georgia, serif; color: #fff; }
.po-ph:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.po-ph-tall { grid-row: span 2; }
.po-gold-specs { margin-top: 18px; padding: 24px 26px; border-radius: 22px; background: linear-gradient(160deg, rgba(30, 26, 18, .9), rgba(10, 13, 11, .95)); border: 1px solid rgba(212, 175, 55, .3); }
.po-gold-specs h3 { font: 400 21px 'Fraunces', Georgia, serif; color: #fff; margin-bottom: 14px; }
.po-gold-specs ul { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 18px; }
.po-gold-specs li { position: relative; padding-left: 16px; font-size: 13.5px; line-height: 1.5; color: #DDE2DC; }
.po-gold-specs li::before { content: ''; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 8px rgba(241, 198, 74, .6); }
.po-harmonie { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .08); }
.po-harmonie b { font: 400 18px 'Fraunces', Georgia, serif; color: var(--gold-bright); }
.po-harmonie span { font-size: 13.5px; color: var(--text-dim); }

/* ---------- Five unit cards ---------- */
.po-unit-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.po-unit-grid > * { grid-column: span 2; }
.po-unit-grid > :nth-child(4) { grid-column: 2 / span 2; }
.po-unit-media img { object-fit: cover !important; }
.po-plan-media, .po-plan-img { background: #FBF8F3 !important; }
.po-plan-media img { object-fit: contain !important; padding: 8px 8px 52px !important; }

/* ---------- Price builder ---------- */
.po-est { display: grid; grid-template-columns: 1.15fr 1fr; gap: 22px; align-items: start; }
.po-est-controls { display: grid; gap: 18px; padding: 24px; border-radius: 24px; background: rgba(255, 255, 255, .025); border: 1px solid rgba(212, 175, 55, .22); }
.po-label { display: block; margin-bottom: 9px; font: 500 10.5px 'IBM Plex Mono', monospace; letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim); }
.po-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.po-chips button {
    display: grid; gap: 2px; padding: 10px 14px; border-radius: 14px; text-align: left; cursor: pointer;
    font: 500 14px/1.2 inherit; font-family: inherit; color: #E6EAE5; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .1);
    transition: background .3s, border-color .3s, color .3s, transform .3s;
}
.po-chips button small { font-size: 11px; font-weight: 400; color: var(--text-dim); }
.po-chips button:hover { border-color: rgba(212, 175, 55, .5); transform: translateY(-2px); }
.po-chips button.is-on { background: var(--grad-gold); color: #0A0D0B; border-color: transparent; }
.po-chips button.is-on small { color: rgba(10, 13, 11, .72); }
.po-chips button:disabled { opacity: .35; cursor: not-allowed; transform: none; }
.po-chips button:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.po-hint { display: block; margin-top: 8px; font-size: 12px; color: var(--gold-bright); }
.po-sheet { position: sticky; top: calc(var(--header-h, 80px) + 16px); }
.po-pay { margin-top: 22px; }
.po-steps { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.po-steps li { position: relative; overflow: hidden; display: grid; gap: 4px; align-content: start; padding: 14px 14px 16px; border-radius: 14px; border: 1px solid rgba(212, 175, 55, .25); background: rgba(212, 175, 55, .04); }
.po-steps li::before { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--p) * 1%); max-width: 100%; background: var(--grad-gold); }
.po-steps strong { font: 400 26px/1 'Fraunces', Georgia, serif; color: var(--gold-bright); }
.po-steps span { font-size: 12.5px; line-height: 1.4; color: #DDE2DC; }
.po-steps em { font-style: normal; font: 500 12px 'IBM Plex Mono', monospace; color: var(--text-dim); }

/* ---------- Three zones ---------- */
.po-zone-tabs { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(212, 175, 55, .25); margin-bottom: 22px; }
.po-zone-tabs button { display: grid; gap: 2px; padding: 11px 24px; border-radius: 999px; border: 0; background: transparent; color: #DDE2DC; font: inherit; cursor: pointer; text-align: left; transition: background .4s, color .4s; }
.po-zone-tabs b { font: 400 19px 'Fraunces', Georgia, serif; }
.po-zone-tabs small { font-size: 11.5px; color: var(--text-dim); }
.po-zone-tabs button.is-on { background: var(--grad-gold); color: #0A0D0B; }
.po-zone-tabs button.is-on small { color: rgba(10, 13, 11, .7); }
.po-zone-tabs button:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.po-zone { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(22px, 4vw, 52px); align-items: center; padding: 18px; border-radius: 28px; background: linear-gradient(160deg, rgba(14, 30, 24, .92), rgba(10, 13, 11, .96)); border: 1px solid rgba(212, 175, 55, .22); }
.po-zone[hidden] { display: none; }
.po-zone.is-on { animation: poIn .7s var(--ease-lux) both; }
@keyframes poIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.po-zone-imgs { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; height: 420px; }
.po-zone-imgs img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; }
.po-zone-copy h3 { font: 400 clamp(28px, 3vw, 40px)/1.1 'Fraunces', Georgia, serif; color: #fff; margin-bottom: 10px; }
.po-zone-copy p { color: var(--text-dim); margin-bottom: 18px; line-height: 1.7; }

/* ---------- Community, plans, towers ---------- */
.po-community .an-spec-grid .an-spec-card p { font-size: 13.5px; line-height: 1.6; color: var(--text-dim); }
.po-central { margin-top: 18px; }
.po-site-grid .jk-site-img { background: #FBF8F3; }
.po-site-grid .jk-site-img img { object-fit: contain; object-position: center; }
.po-towers { grid-template-columns: repeat(3, 1fr) !important; }

/* Brochure band */
.po-cta { background:
    linear-gradient(100deg, rgba(8, 11, 9, .96) 0%, rgba(8, 11, 9, .8) 55%, rgba(8, 11, 9, .35) 100%),
    url('olympia/aerial.jpg') right center / cover !important; }

@media (max-width: 1100px) {
    .po-gold-specs ul { grid-template-columns: repeat(2, 1fr); }
    .po-unit-grid { grid-template-columns: 1fr 1fr; }
    .po-unit-grid > *, .po-unit-grid > :nth-child(4) { grid-column: auto; }
    .po-unit-grid > :last-child { grid-column: 1 / -1; }
    .po-est { grid-template-columns: 1fr; }
    .po-sheet { position: static; }
    .po-zone { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .po-gold-head { grid-template-columns: 1fr; gap: 12px; }
    .po-gold-grid { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 200px; }
    .po-ph-tall { grid-row: span 2; }
    .po-rings { display: none; }
}
@media (max-width: 640px) {
    .po-unit-grid { grid-template-columns: 1fr; }
    .po-gold-specs ul { grid-template-columns: 1fr; }
    .po-gold-grid { grid-auto-rows: 170px; }
    .po-est-controls { padding: 18px 14px; }
    .po-chips button { padding: 9px 11px; font-size: 13px; }
    .po-zone-tabs { display: grid; grid-template-columns: 1fr; width: 100%; border-radius: 20px; }
    .po-zone-tabs button { border-radius: 16px; }
    .po-zone-imgs { height: 240px; }
    .po-towers { grid-template-columns: 1fr !important; }
}
@media (prefers-reduced-motion: reduce) {
    .po-rings i { animation: none; }
    .po-zone.is-on { animation: none; }
    .po-ph img, .po-chips button { transition: none; }
}