/* Villa Miami refresh — Oct 2026. Loaded after site.css on every page. */
:root { --villa-orange: #FF7E22; --section-y: clamp(2rem, 4vw, 3.25rem); }

/* Gold-pulse CTAs (Villa orange) */
@keyframes villaPulse {
  0% { box-shadow: 0 0 0 0 rgba(255,126,34,.55); }
  70% { box-shadow: 0 0 0 14px rgba(255,126,34,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,126,34,0); }
}
.cta-pulse, .btn-gold, .nav-cta { animation: villaPulse 2.4s cubic-bezier(.22,.61,.36,1) infinite; }
.btn-gold, .nav-cta, .sneak-cta { background: var(--villa-orange) !important; border-color: var(--villa-orange) !important; color: #fff !important; }
.btn-gold:hover, .nav-cta:hover { background: #FF8F3D !important; }
@media (prefers-reduced-motion: reduce) { .cta-pulse, .btn-gold, .nav-cta { animation: none; } }

/* Tight section rhythm */
.section + .section { border-top: 0; }
.section h2 + .lede, .section h2 + .inv-counter { margin-top: .6rem; }
.faq-h { margin-top: 2rem; }

/* Cards: real <img> media */
.res-media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #111; }
.res-media .res-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); }
.res-card:hover .res-img { transform: scale(1.03); }
.res-media .res-badges { z-index: 2; }
.res-price { color: var(--ink); font-weight: 600; }
.residences-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 1080px) { .residences-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .residences-grid { grid-template-columns: 1fr; } }

/* Remaining-units counter */
.inv-counter { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 1rem 0 1.25rem; padding: .9rem 1.2rem; border: 1px solid var(--villa-orange); background: #fff; }
.inv-num { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; color: var(--villa-orange); font-weight: 600; }
.inv-text { display: flex; flex-direction: column; color: var(--ink-muted); }
.inv-text strong { font-family: var(--font-display); letter-spacing: .14em; text-transform: uppercase; font-size: .8rem; color: var(--ink); }
.inv-stamp { margin-left: auto; font-family: var(--font-display); letter-spacing: .14em; text-transform: uppercase; font-size: .72rem; color: var(--ink-muted); }
@media (max-width: 640px) { .inv-stamp { margin-left: 0; flex-basis: 100%; } }


/* Villa Triplo teaser + page */
.triplo-split { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.triplo-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
@media (max-width: 900px) { .triplo-split { grid-template-columns: 1fr; } }
.triplo-facts { list-style: none; padding: 0; margin: 1.25rem 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 1.5rem; }
.triplo-facts li { display: flex; flex-direction: column; padding: .6rem 0; border-bottom: 1px solid rgba(255,255,255,.18); }
.triplo-facts span { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .16em; font-size: .68rem; color: var(--bronze-light); }
.triplo-facts strong { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 500; }
.triplo-facts-light li { border-bottom-color: var(--line); }
.triplo-facts-light strong { color: var(--ink); }
.triplo-facts-light span { color: var(--villa-orange); }
.level-row { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; margin-top: 1.75rem; }
.level-row:nth-child(even) .level-media { order: 2; }
.level-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.level-list { columns: 2; padding-left: 1.1rem; margin: .5rem 0 1rem; }
@media (max-width: 800px) { .level-row { grid-template-columns: 1fr; } .level-row:nth-child(even) .level-media { order: 0; } .level-list { columns: 1; } }
.hero-static .hero-slide .media { background-size: cover; background-position: center; }

/* Amenities: static captioned grid (no carousel) */
.amen-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.25rem; margin-top: 1.25rem; }
@media (max-width: 900px) { .amen-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .amen-grid { grid-template-columns: 1fr; } }
.amen-cell { margin: 0; background: #fff; border: 1px solid var(--line-soft); }
.amen-cell img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.amen-btn { all: unset; cursor: zoom-in; display: block; width: 100%; }
.amen-cell figcaption { padding: .75rem .9rem .9rem; display: flex; flex-direction: column; gap: .15rem; }
.amen-cell figcaption strong { font-family: var(--font-display); letter-spacing: .12em; text-transform: uppercase; font-size: .82rem; color: var(--ink); font-weight: 600; }
.amen-cell figcaption span { color: var(--ink-muted); font-size: .98rem; }

/* Key-fact Q&A block (GEO) */
.qa-block { margin: 1rem 0 0; border-top: 1px solid var(--line); }
.qa-row { display: grid; grid-template-columns: minmax(9rem, 16rem) 1fr; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.qa-row dt { font-family: var(--font-display); letter-spacing: .14em; text-transform: uppercase; font-size: .75rem; color: var(--villa-orange); font-weight: 600; }
.qa-row dd { margin: 0; color: var(--ink); }
@media (max-width: 560px) { .qa-row { grid-template-columns: 1fr; gap: .2rem; } }

/* Forms: modal look everywhere, chips highlighted, readable dial dropdown */
.form-card .modal-kicker, .form-card .modal-title, .form-card .modal-blurb { text-align: left; }
.form-card .modal-title { font-size: var(--step-2); margin: .2rem 0 .3rem; }
.form-card .modal-blurb { margin: 0 0 1rem; color: var(--ink-muted); }
.chip input:checked + span { background: var(--villa-orange) !important; border-color: var(--villa-orange) !important; color: #fff !important; font-weight: 600; }
.phone-row { display: grid; grid-template-columns: minmax(6.5rem, 7.5rem) 1fr; gap: .4rem; }
.lead-form .dial-select, .lead-form select { color: #111 !important; background-color: #fff !important; -webkit-text-fill-color: #111; }
.lead-form .dial-select option, .lead-form select option { color: #111; background: #fff; }
.lead-form .dial-select { min-height: 44px; padding: .5em .4em; border: 1px solid var(--line); font-family: var(--font-sans); font-size: .9rem; width: 100%; }
.form-error { color: #a4402f; font-size: .85rem; margin: 0; }
.form-group-h { font-family: var(--font-display); letter-spacing: .18em; text-transform: uppercase; font-size: .72rem; color: var(--villa-orange); margin: .6rem 0 0; font-weight: 600; }
.lead-form textarea { width: 100%; border: 1px solid var(--line); padding: .6em .8em; font: inherit; background: #fff; color: #111; }

/* Modal / chat / sticky close: X icon */
.modal-close, .chat-x, .sticky-bar-close { display: inline-flex; align-items: center; justify-content: center; color: var(--ink); }
.modal-close svg, .chat-x svg, .sticky-bar-close svg { width: 20px; height: 20px; }
.sticky-bar-close { color: #fff; }

/* FABs + WhatsApp: always on screen during scroll */
.fab-stack { position: fixed !important; display: flex !important; opacity: 1 !important; visibility: visible !important; transform: none !important; }
.chat-chip-wa { background: #25D366; color: #fff; border-color: #25D366; text-decoration: none; }

/* Floor plans: logo bottom-right, outside the drawing */
.plan-preview-media { padding-bottom: 34px; background: #fff; }
.plan-preview-media img { height: calc(100% - 0px); }
.plan-logo { position: absolute; right: 10px; bottom: 6px; width: 84px; height: auto; opacity: .85; pointer-events: none; }

/* Gallery sneak: cream fade */
.sneak-wash { background: linear-gradient(180deg, rgba(251,244,230,0) 35%, rgba(251,244,230,.92) 82%, #FBF4E6 100%) !important; }

/* Continuum-class mobile menu */
.nav-mobile { padding-top: 1.25rem; overflow-y: auto; }
.nav-mobile-kicker { font-family: var(--font-display); letter-spacing: .28em; text-transform: uppercase; font-size: .68rem; color: var(--villa-orange); margin: 0 0 .5rem; }
.nav-mobile nav a { font-size: clamp(1.6rem, 6.5vw, 2.1rem); padding: .55rem 0; }
.nav-mobile nav a[aria-current="page"] { color: var(--villa-orange); }

/* Desktop nav fits 8 items */
@media (min-width: 1100px) and (max-width: 1360px) { .nav-desktop { gap: 1.1rem !important; } .nav-desktop a { font-size: .78rem; letter-spacing: .12em; } .header-phone { display: none; } }
.broker-only[hidden], .form-error[hidden], .lead-form [hidden] { display: none !important; }
.phone-row { grid-template-columns: 5.6rem minmax(0,1fr); }
.lead-form .dial-select { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; padding-right: 1.2rem; }
.plan-preview-media img.plan-logo { position: absolute; right: 10px; bottom: 6px; width: 84px !important; height: auto !important; aspect-ratio: auto; object-fit: contain; }
.plan-preview-media img:not(.plan-logo) { height: calc(100% - 34px) !important; }
.gallery-rest { margin-top: 1.25rem; }
.gallery-rest[hidden] { display: none !important; }
.sneak.is-unlocked .sneak-wash, .sneak.is-unlocked .sneak-blur, .sneak.is-unlocked .sneak-lock { display: none !important; }
.footer-advisor-sub { margin: 0 0 .6rem; font-size: .9rem; opacity: .85; }
.gallery-open-count { font-family: var(--font-display); letter-spacing: .16em; text-transform: uppercase; font-size: .75rem; color: var(--villa-orange); margin: 0 0 .5rem; }
.gallery-open .amen-cell { border: 0; background: none; }

/* Tower levels section (official artwork; layout mirrors villamiami.com) */
.tw-section{padding:3rem 0 1rem}
.tw-layout{position:relative;height:130vw;max-height:2400px}
.tw-visual{position:absolute;inset:0}
.tw-svg{position:absolute;left:60%;top:0;height:100%;width:auto;transform:translateX(-50%);pointer-events:none;z-index:5}
.tw-layout+.wrap{margin-top:230px}
.tw-trigs{position:absolute;inset:0;pointer-events:none}.tw-trig{position:absolute;left:0;right:0}
.tw-svg .tw-band{opacity:0;transition:opacity .2s linear}
.tw-layout[data-active="triplo"] .tw-band[data-band="triplo"],.tw-layout[data-active="residences"] .tw-band[data-band="residences"],.tw-layout[data-active="club"] .tw-band[data-band="club"],.tw-layout[data-active="arrival"] .tw-band[data-band="arrival"]{opacity:1}
.tw-panels{list-style:none;margin:0;padding:0}
.tw-panel{position:absolute;margin:0;opacity:0;transition:opacity .2s;width:calc(38vw - 80px);z-index:3;pointer-events:none}
.tw-panel.is-active{opacity:1;z-index:8;pointer-events:auto}
.tw-panel::before{content:"";position:absolute;top:-15px;left:0;right:0;height:1px;background:#000}
.tw-lv{color:#FF7E22;font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:26px;line-height:1.1;margin:0 0 5px}
.tw-panel h3{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:63px;line-height:.95;margin:0 0 15px;letter-spacing:0}
.tw-panel h5{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:26px;margin:0 0 3px;line-height:1}
.tw-panel table{border-collapse:collapse;margin:0 0 15px}.tw-panel td{vertical-align:top;line-height:130%;padding:0;font-size:1.05rem}.tw-panel td:first-child{padding-right:50px}
.tw-panel p{margin:0 0 15px}.tw-panel p:last-child{margin:0}
.tw-btn{display:inline-block;min-width:181px;text-align:center;border:1px solid #1a1a1a;padding:.45rem 1.1rem;font-style:italic;font-size:1.05rem;color:#1a1a1a;text-decoration:none;transition:background .2s,color .2s}
.tw-btn:hover,.tw-btn:focus-visible{background:#1a1a1a;color:#fbf4ea}
#tw-triplo{right:80px;top:11.5%;width:calc(40vw - 80px);padding-left:9%;display:flex;flex-direction:column;align-items:flex-end}
#tw-triplo::before{left:0;right:0}#tw-triplo td{white-space:nowrap}
#tw-residences{left:80px;top:50%;position:fixed}
#tw-club{left:80px;top:83%}
#tw-arrival{left:80px;top:90.9%}
@media (max-width:1024px){
 .tw-panel{width:calc(40vw - 50px)}#tw-triplo{right:50px;width:calc(40vw - 50px)}
 #tw-residences{left:50px;width:calc(38vw - 58px);top:auto;bottom:100px}#tw-club,#tw-arrival{left:50px}
 .tw-panel h3{font-size:48px}
}
@media (max-width:900px){
 .tw-layout{height:auto;max-height:none;display:grid;grid-template-columns:118px minmax(0,1fr);gap:1rem;padding:0 1rem;align-items:start}
 .tw-visual{position:sticky;top:72px;height:min(72vh,560px);overflow:hidden}
 .tw-svg{left:50%;height:100%;transform:translateX(-30.7%)}
 .tw-trigs{display:none}
 .tw-layout+.wrap{margin-top:0}
 .tw-panel,#tw-triplo,#tw-residences,#tw-club,#tw-arrival{position:static;width:auto;opacity:.45;pointer-events:auto;padding:1.1rem 0 1.2rem;margin-top:15px;display:block;inset:auto}
 .tw-panel.is-active,#tw-triplo.is-active,#tw-residences.is-active,#tw-club.is-active,#tw-arrival.is-active{opacity:1}
 .tw-panel h3{font-size:2.2rem;margin-bottom:.5rem}.tw-lv,.tw-panel h5{font-size:1.1rem}
 .tw-panel td{font-size:.92rem}.tw-panel td:first-child{padding-right:1rem}#tw-triplo td{white-space:normal}
 .tw-btn{min-width:150px;padding:.4rem .9rem;font-size:.92rem}
}
@media (prefers-reduced-motion:reduce){.tw-svg .tw-band,.tw-panel,.tw-btn{transition:none}}

/* Pricing page, homepage fact block, four-column footer */
.footer-top { grid-template-columns: minmax(0,1.15fr) minmax(0,.9fr) minmax(0,1.2fr) minmax(0,1fr); }
@media (max-width: 1100px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 800px) { .footer-top { grid-template-columns: 1fr; } }
.footer-more a { line-height: 1.35; }
.fact-block { margin: 1.75rem 0 .25rem; }
.fact-block ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.fact-block li { margin: 0; padding: .85rem 0; border-bottom: 1px solid var(--line); font-family: var(--font-serif); font-size: 1.25rem; color: var(--ink); }
.price-note { margin: 1.25rem 0 .35rem; color: var(--ink-muted); }
.price-links { margin: 0 0 .5rem; }
.price-table td:last-child, .price-table th:last-child { white-space: nowrap; }
/* Eight primary links stay on one line; the phone number returns once the row has room. */
@media (min-width: 1100px) {
  .nav-desktop { gap: .8rem !important; }
  .nav-desktop a { font-size: .7rem; letter-spacing: .1em; }
}
@media (min-width: 1100px) and (max-width: 1279px) {
  .nav-desktop { gap: .62rem !important; }
  .nav-desktop a { font-size: .66rem; letter-spacing: .07em; }
  .header-phone { display: none; }
}