/* PeakMade Amenities — front end. Display styles: Alternating sections (first) and Feature story (further down).
   Alternating sections: featured photo carousel, an optional heading, then one section per category, split 50/50: one
   photo (or a video, 3D tours or embed code) running to the edge of the screen on its side, and the category name, copy
   and a row of amenity icons that drifts on its own (four showing) on the other. Sides alternate on desktop and tablets;
   on phones the photo comes first. Fonts, colors and buttons come from the site's theme (amenities.js probe). Every
   section and card works out its own background and sets data-tone, so text and icons flip between dark and white. */
.pma {
  --pma-ease: cubic-bezier(.28, .11, .32, 1);
  --pma-dark: #1D1D1F;
  --pma-brand: #00A9CE;
  --pma-head-ink: #1D1D1F;
  --pma-card: #F5F5F7;
  /* Accents shared with Floor Plans with Fees: a theme-color tint, layered soft shadows that lift on hover, the settle curve. */
  --pma-soft: color-mix(in srgb, var(--pma-brand) 14%, transparent);
  --pma-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .07);
  --pma-shadow-lift: 0 2px 6px rgba(0, 0, 0, .06), 0 20px 48px rgba(0, 0, 0, .14);
  --pma-settle: cubic-bezier(.2, .8, .2, 1);
  container: pma / inline-size;
  position: relative; display: grid; gap: clamp(28px, 4vw, 48px);
  max-width: 1180px; margin: 0 auto;
  font-family: var(--pma-body-font, inherit); font-size: 17px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.pma *, .pma *::before, .pma *::after { box-sizing: border-box; }
/* One focus ring everywhere (as in Floor Plans with Fees): 3px in the theme color. It outranks the per-control rings below;
   browsers without color-mix() keep those. */
.pma :focus-visible { outline: 3px solid color-mix(in srgb, var(--pma-brand) 70%, transparent) !important; outline-offset: 2px !important; }
/* Keep the theme's button and list styles out (zero-specificity selectors, so the plugin's own rules below still win). */
.pma :where(button) { min-width: 0; min-height: 0; text-transform: none; letter-spacing: normal; text-shadow: none; box-shadow: none; font-family: inherit; }
.pma :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
.pma :where(li)::before, .pma :where(li)::after { content: none; }
.pma :where(h2, h3, p) { padding: 0; }
.pma [hidden] { display: none !important; }
.pma[data-tone="light"], .pma [data-tone="light"] {
  --pma-ink: var(--pma-head-ink); --pma-ink-2: rgba(29, 29, 31, .72); --pma-rule: rgba(0, 0, 0, .1);
  --pma-btn: rgba(0, 0, 0, .07); --pma-btn-hover: rgba(0, 0, 0, .13);
  color: var(--pma-ink-2);
}
.pma[data-tone="dark"], .pma [data-tone="dark"] {
  --pma-ink: #F5F5F7; --pma-ink-2: rgba(255, 255, 255, .78); --pma-rule: rgba(255, 255, 255, .18);
  --pma-btn: rgba(255, 255, 255, .16); --pma-btn-hover: rgba(255, 255, 255, .26);
  color: var(--pma-ink-2);
}
/* Icon cards follow what they sit on: light gray on white, white on gray or colored, glass on dark. */
.pma[data-surface="tint"], .pma [data-surface="tint"] { --pma-card: #F5F5F7; }
.pma[data-surface="white"], .pma [data-surface="white"] { --pma-card: #FFFFFF; }
.pma[data-surface="glass"], .pma [data-surface="glass"] { --pma-card: rgba(255, 255, 255, .09); }
.pma-ico { display: inline-grid; place-items: center; flex: 0 0 auto; width: 1em; height: 1em; color: var(--pma-icon, var(--pma-ink)); }
/* A custom icon (an uploaded SVG or PNG) is a mask filled with the icon color, so it turns white or dark like the rest. */
.pma-ico-img { display: block; width: 100%; height: 100%; background: currentColor; -webkit-mask: var(--pma-mask) center / contain no-repeat; mask: var(--pma-mask) center / contain no-repeat; }
.pma-ico svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- featured amenities: photo cards in a carousel that moves like the Floor Plans carousel
   (3 cards plus slices of the neighbors on desktop, 2 on tablets, 1 on phones; the arrows move one card) ---------- */
.pma-featured { display: grid; gap: clamp(20px, 3vw, 36px); min-width: 0; margin-bottom: clamp(16px, 4vw, 48px); }
.pma-feat-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 24px; }
.pma-feat-title, .pma-heading, .pma-sec-title {
  margin: 0; color: var(--pma-ink); font-family: var(--pma-head-font, inherit); font-weight: var(--pma-head-weight, 700);
  text-transform: var(--pma-head-case, none); letter-spacing: var(--pma-head-track, -.01em); line-height: 1.05; text-wrap: balance;
}
.pma-feat-title, .pma-heading { font-size: clamp(32px, 4.4vw, 56px); }
.pma-feat-link { color: var(--pma-ink); font-size: clamp(16px, 1.4vw, 19px); font-weight: 500; text-decoration: none; white-space: nowrap; }
.pma-feat-link:hover { text-decoration: underline; }
.pma-feat-link:focus-visible { outline: 2px solid var(--pma-ink); outline-offset: 3px; border-radius: 4px; }
.pma-carousel { --car-peek: 88px; --car-per: 3; --car-gap: 24px; position: relative; min-width: 0; }
@container pma (max-width: 1000px) { .pma-carousel { --car-peek: 72px; --car-per: 2; } }
@container pma (max-width: 640px) { .pma-carousel { --car-peek: 0px; --car-per: 1; --car-gap: 16px; } }
.pma-track {
  display: flex; gap: var(--car-gap); margin: 0; padding: 8px var(--car-peek) 12px; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--car-peek); scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.pma-track::-webkit-scrollbar { display: none; }
.pma-track:focus-visible { outline: 2px solid var(--pma-ink); outline-offset: 2px; border-radius: 8px; }
.pma-fcard {
  position: relative; flex: 0 0 calc((100% - (var(--car-per) - 1) * var(--car-gap)) / var(--car-per)); min-width: 0; margin: 0;
  aspect-ratio: 4 / 5; overflow: hidden; border-radius: 28px; background: #1D1D1F; scroll-snap-align: start; isolation: isolate;
}
.pma-fcard > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 1.2s var(--pma-ease); }
.pma-fcard:hover > img { transform: scale(1.04); }
/* The overlay: a soft dark gradient plus a blur that fades in toward the bottom, so the text reads on any photo. */
.pma-fcard::before, .pma-fcard::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none; }
.pma-fcard::before { height: 34%; -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  -webkit-mask-image: linear-gradient(to top, #000 55%, transparent); mask-image: linear-gradient(to top, #000 55%, transparent); }
.pma-fcard::after { height: 52%; background: linear-gradient(to top, rgba(0, 0, 0, .74) 0%, rgba(0, 0, 0, .5) 38%, rgba(0, 0, 0, 0) 100%); }
.pma-fcard-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; gap: 6px; padding: clamp(18px, 2.2vw, 26px); color: #FFFFFF; }
.pma-fcard-name {
  margin: 0; padding-right: 34px; color: #FFFFFF; font-family: var(--pma-body-font, inherit); font-weight: 700;
  text-transform: none; letter-spacing: -.005em; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.2; text-wrap: balance;
}
.pma-fcard-text {
  margin: 0; color: rgba(255, 255, 255, .88); font-size: 15px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pma-fcard.has-link .pma-fcard-text { padding-right: 40px; }
.pma-fcard-go { position: absolute; right: clamp(16px, 2vw, 22px); bottom: clamp(18px, 2.2vw, 26px); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .22); transition: background .2s; }
.pma-fcard-go svg { width: 16px; height: 16px; fill: none; stroke: #FFFFFF; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pma-fcard.has-link:hover .pma-fcard-go { background: rgba(255, 255, 255, .36); }
.pma-fcard-hit { position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.pma-fcard-hit:focus-visible { outline: 3px solid #FFFFFF; outline-offset: -6px; }
.pma-car-arrow {
  position: absolute; top: 50%; z-index: 5; display: grid; place-items: center; width: 44px; height: 44px; margin: -26px 0 0; padding: 0; border: 0; border-radius: 50%;
  background: #FFFFFF; color: #1D1D1F; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); cursor: pointer; transition: opacity .2s;
}
.pma-car-arrow.is-prev { left: 4px; }
.pma-car-arrow.is-next { right: 4px; }
.pma-car-arrow:disabled { opacity: .35; cursor: default; }
.pma-car-arrow:focus-visible { outline: 2px solid var(--pma-ink); outline-offset: 2px; }
@container pma (max-width: 640px) {
  .pma-car-arrow { width: 40px; height: 40px; margin-top: -24px; }
  .pma-car-arrow.is-prev { left: -6px; }
  .pma-car-arrow.is-next { right: -6px; }
  .pma-fcard { border-radius: 22px; }
}
.pma-carousel.is-static .pma-car-arrow { display: none; }

/* ---------- heading ---------- */
.pma-head { display: grid; justify-items: start; gap: 10px; }
.pma-eyebrow { margin: 0; color: var(--pma-accent-text, var(--pma-ink)); font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.pma-heading { max-width: 24ch; }
.pma-intro { max-width: 62ch; margin: 2px 0 0; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; text-wrap: pretty; }

/* ---------- sections: media and content 50/50, flipped on every other one; stacked (photo first) on phones.
   The photo runs to the edge of the screen: amenities.js measures the gap between this block and each screen edge
   (--pma-bleed-l / --pma-bleed-r) and the photo takes it back with a negative margin. Colored sections become full-width bands. ---------- */
.pma-secs { display: grid; gap: clamp(64px, 9vw, 128px); min-width: 0; }
.pma-sec {
  --pma-bl: 0px; --pma-br: 0px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; min-width: 0;
  scroll-margin-top: 120px;
}
.pma[data-bleed="on"] .pma-sec { --pma-bl: var(--pma-bleed-l, 0px); --pma-br: var(--pma-bleed-r, 0px); }
.pma-sec[data-side="right"] > .pma-media { order: 2; }
.pma-sec.no-media { grid-template-columns: minmax(0, 1fr); }
.pma-sec[data-bg="light"] { background: #F5F5F7; }
.pma-sec[data-bg="dark"] { background: var(--pma-dark); }
.pma-sec[data-bg="brand"] { background: var(--pma-brand); }
.pma-sec[data-bg="custom"] { background: var(--pma-bg, #F5F5F7); }
.pma-sec:not([data-bg="page"]) {
  --pma-pad: clamp(40px, 6vw, 88px);
  margin-left: calc(-1 * var(--pma-bl)); margin-right: calc(-1 * var(--pma-br));
  padding: var(--pma-pad) max(var(--pma-br), 20px) var(--pma-pad) max(var(--pma-bl), 20px);
}
.pma[data-bleed="off"] .pma-sec:not([data-bg="page"]) { padding-inline: clamp(24px, 4.5vw, 56px); border-radius: 32px; overflow: hidden; }
.pma-sec-body { container: pmabody / inline-size; display: grid; gap: 16px; min-width: 0; }
.pma-sec-title { font-size: clamp(30px, 3.6vw, 48px); }
.pma-sec-copy { max-width: 60ch; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; }
.pma-sec-copy > * { margin: 0 0 12px; }
.pma-sec-copy > *:last-child { margin-bottom: 0; }
.pma-sec-copy a { color: var(--pma-ink); }

/* ---------- the media side: one photo, a video or Matterport tours, filling the section's height ---------- */
.pma-media { position: relative; align-self: stretch; min-width: 0; min-height: clamp(360px, 40vw, 620px); overflow: hidden; isolation: isolate;
  border-radius: var(--pma-r, 0); -webkit-clip-path: var(--pma-clip, none); clip-path: var(--pma-clip, none); background: #E8E8ED; }
.pma-sec[data-side="left"] > .pma-media { margin-left: calc(-1 * var(--pma-bl)); }
.pma-sec[data-side="right"] > .pma-media { margin-right: calc(-1 * var(--pma-br)); }
.pma-sec:not([data-bg="page"]) > .pma-media { margin-top: calc(-1 * var(--pma-pad)); margin-bottom: calc(-1 * var(--pma-pad)); }
.pma-sec:not([data-bg="page"])[data-side="left"] > .pma-media { margin-left: calc(-1 * max(var(--pma-bl), 20px)); }
.pma-sec:not([data-bg="page"])[data-side="right"] > .pma-media { margin-right: calc(-1 * max(var(--pma-br), 20px)); }
.pma-ph { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.pma-media > .pma-card { position: absolute; inset: 0; border-radius: 0; }
/* Shapes trim the side that faces the text; the side at the screen edge stays square. */
.pma-sec[data-side="left"] > .pma-media[data-shape="rounded"] { --pma-r: 0 40px 40px 0; }
.pma-sec[data-side="right"] > .pma-media[data-shape="rounded"] { --pma-r: 40px 0 0 40px; }
.pma-sec[data-side="left"] > .pma-media[data-shape="curve"] { --pma-r: 0 999px 999px 0; }
.pma-sec[data-side="right"] > .pma-media[data-shape="curve"] { --pma-r: 999px 0 0 999px; }
.pma-sec[data-side="left"] > .pma-media[data-shape="sweep"] { --pma-r: 0 48% 0 0 / 0 62% 0 0; }
.pma-sec[data-side="right"] > .pma-media[data-shape="sweep"] { --pma-r: 48% 0 0 0 / 62% 0 0 0; }
.pma-sec[data-side="left"] > .pma-media[data-shape="angle"] { --pma-clip: polygon(0 0, 100% 0, 84% 100%, 0 100%); }
.pma-sec[data-side="right"] > .pma-media[data-shape="angle"] { --pma-clip: polygon(16% 0, 100% 0, 100% 100%, 0 100%); }
/* Without the bleed, the photo is a card in the column: round every corner the shape asks for. */
.pma[data-bleed="off"] .pma-media[data-shape="rounded"] { --pma-r: 32px !important; }
.pma[data-bleed="off"] .pma-media[data-shape="curve"] { --pma-r: 999px !important; }
@container pma (max-width: 640px) {
  .pma-sec { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pma-sec[data-side="right"] > .pma-media { order: 0; }
  .pma-sec > .pma-media { margin-left: calc(-1 * var(--pma-bl)) !important; margin-right: calc(-1 * var(--pma-br)) !important; min-height: 0; aspect-ratio: 4 / 3; }
  .pma-sec:not([data-bg="page"]) > .pma-media { margin: calc(-1 * var(--pma-pad)) calc(-1 * max(var(--pma-br), 20px)) 0 calc(-1 * max(var(--pma-bl), 20px)) !important; }
  /* On phones the text sits below, so the shape trims the bottom edge. */
  .pma-sec > .pma-media[data-shape="rounded"] { --pma-r: 0 0 28px 28px !important; }
  .pma-sec > .pma-media[data-shape="curve"] { --pma-r: 0 0 50% 50% / 0 0 18% 18% !important; }
  .pma-sec > .pma-media[data-shape="sweep"] { --pma-r: 0 0 70% 0 / 0 0 26% 0 !important; }
  .pma-sec > .pma-media[data-shape="angle"] { --pma-clip: polygon(0 0, 100% 0, 100% 84%, 0 100%) !important; }
}

/* ---------- amenity icons: one row, four showing (three on tablets, two and a bit on phones), drifting on its own.
   amenities.js moves the row (translateX), loops it with copies of the cards, stops it on hover, and lets
   people drag it or step it with the arrows. ---------- */
.pma-belt { display: grid; gap: 14px; min-width: 0; margin-top: 8px; }
.pma-belt-view { position: relative; overflow: hidden; margin: -10px -6px; padding: 10px 6px; touch-action: pan-y; }
.pma-belt:not(.is-static) .pma-belt-view { cursor: grab;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 18px, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(to right, transparent, #000 18px, #000 calc(100% - 18px), transparent); }
.pma-belt-view.is-dragging { cursor: grabbing; }
.pma-belt-track { --pma-n: 4; --pma-gap: 12px; display: flex; gap: var(--pma-gap); margin: 0; padding: 0; list-style: none; will-change: transform; }
@container pmabody (max-width: 479px) { .pma-belt-track { --pma-n: 3; --pma-gap: 10px; } }
@container pma (max-width: 640px) { .pma-belt-track { --pma-n: 2.4; } }
.pma-belt-track > .pma-card { flex: 0 0 calc((100% - (var(--pma-n) - 1) * var(--pma-gap)) / var(--pma-n)); aspect-ratio: 1 / 1.05; -webkit-user-select: none; user-select: none; }
.pma-belt.is-static [data-clone] { display: none; }
.pma-card {
  position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; margin: 0; padding: 15px 14px 14px;
  overflow: hidden; border-radius: 20px; background: var(--pma-card); isolation: isolate;
  transition: transform .45s var(--pma-ease), box-shadow .45s var(--pma-ease);
}
@media (hover: hover) { .pma-belt-track > .pma-card:hover { transform: scale(1.04); box-shadow: 0 10px 26px rgba(0, 0, 0, .1); } }
.pma-card-vis { position: relative; flex: 1 1 auto; display: grid; place-items: center; min-height: 36px; padding: 2px 0 8px; }
.pma-card-vis .pma-ico { font-size: 42px; }
.pma-card-txt { position: relative; z-index: 2; display: grid; gap: 2px; min-width: 0; }
.pma-card-name { margin: 0; color: var(--pma-ink); font-family: var(--pma-body-font, inherit); font-size: 14.5px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; text-transform: none; text-wrap: balance; overflow-wrap: break-word; }
.pma-card .pma-info { position: absolute; top: 9px; right: 9px; z-index: 4; }
@container pmabody (max-width: 479px) {
  .pma-belt-track > .pma-card { aspect-ratio: 1 / 1.12; padding: 12px 11px 11px; border-radius: 16px; }
  .pma-card-vis .pma-ico { font-size: 34px; }
  .pma-card-name { font-size: 13.5px; }
  .pma-card .pma-info { top: 7px; right: 7px; }
}
.pma-belt-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pma-belt-btns { display: inline-flex; gap: 8px; margin-left: auto; }
.pma-belt.is-static .pma-belt-btns { display: none; }
.pma-belt-btn { display: grid; place-items: center; width: 38px; height: 38px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--pma-btn); color: var(--pma-ink); cursor: pointer; transition: background .2s; }
.pma-belt-btn:hover { background: var(--pma-btn-hover); }
.pma-belt-btn:focus-visible { outline: 2px solid var(--pma-ink); outline-offset: 2px; }
.pma-belt-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pma-belt-btn[data-belt="pause"] svg { width: 12px; height: 12px; fill: currentColor; stroke: none; }
.pma-more {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 11px 18px 11px 14px; border: 0; border-radius: 999px;
  background: var(--pma-btn); color: var(--pma-ink); cursor: pointer; font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; transition: background .2s;
}
.pma-more:hover { background: var(--pma-btn-hover); }
.pma-more:focus-visible { outline: 2px solid var(--pma-ink); outline-offset: 2px; }
.pma-more svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pma-more svg circle { fill: currentColor; stroke: none; }

/* ---------- Show all popup: every amenity in the section, as a bulleted list ---------- */
.pma-dlg {
  width: min(680px, calc(100vw - 32px)); max-width: none; max-height: min(84vh, 760px); margin: auto; padding: 0; border: 0; border-radius: 26px;
  background: #FFFFFF; color: rgba(29, 29, 31, .72); box-shadow: 0 30px 80px rgba(0, 0, 0, .3); overflow: hidden;
  font-family: var(--pma-body-font, inherit);
}
.pma-dlg::backdrop { background: rgba(0, 0, 0, .42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pma-dlg[open] { animation: pma-dlg-in .38s var(--pma-ease); }
.pma-dlg[open]::backdrop { animation: pma-fade .3s ease; }
@keyframes pma-dlg-in { from { opacity: 0; transform: translateY(16px) scale(.97); } }
@keyframes pma-fade { from { opacity: 0; } }
.pma-dlg-in { display: flex; flex-direction: column; max-height: inherit; }
.pma-dlg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 26px 28px 16px; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.pma-dlg-title {
  margin: 0; color: var(--pma-head-ink); font-family: var(--pma-head-font, inherit); font-weight: var(--pma-head-weight, 700);
  text-transform: var(--pma-head-case, none); letter-spacing: var(--pma-head-track, -.01em); font-size: clamp(24px, 3vw, 32px); line-height: 1.1;
}
.pma-dlg-sub { margin: 4px 0 0; font-size: 15px; }
.pma-dlg-x { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .07); color: #1D1D1F; cursor: pointer; }
.pma-dlg-x:hover { background: rgba(0, 0, 0, .13); }
.pma-dlg-x:focus-visible { outline: 2px solid var(--pma-head-ink); outline-offset: 2px; }
.pma-dlg-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.pma-dlg-list { margin: 0; padding: 18px 28px 28px; list-style: none; columns: 2; column-gap: 36px; overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 560px) { .pma-dlg-list { columns: 1; } .pma-dlg-head { padding: 22px 20px 14px; } .pma-dlg-list { padding: 14px 20px 22px; } }
.pma-dlg-list li { position: relative; display: grid; gap: 2px; padding: 9px 0 9px 20px; break-inside: avoid; }
.pma-dlg-list li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 7px; height: 7px; border-radius: 50%; background: var(--pma-brand); }
.pma-dlg-name { color: #1D1D1F; font-size: 16px; font-weight: 500; line-height: 1.35; }
.pma-dlg-note { font-size: 14px; line-height: 1.4; }
html.pma-lock { overflow: hidden; }

/* ---------- icon motion (Settings › Icon animation): on hover, on a tap, and once as each section scrolls in ----------
   Draw: the lines trace themselves. Bounce: a quick hop. Pulse: a swell with a soft ring. */
@keyframes pma-draw { from { stroke-dasharray: 1 2; stroke-dashoffset: 1; } to { stroke-dasharray: 1 2; stroke-dashoffset: 0; } }
@keyframes pma-bounce { 0% { transform: none; } 28% { transform: translateY(-9px); } 48% { transform: translateY(0) scale(1.1, .9); } 62% { transform: translateY(-3px) scale(.97, 1.03); } 78% { transform: none; } 100% { transform: none; } }
@keyframes pma-pulse { 0% { transform: none; } 35% { transform: scale(1.16); } 62% { transform: scale(.96); } 100% { transform: none; } }
@keyframes pma-ring { 0% { opacity: .35; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes pma-rise { from { opacity: 0; transform: translateY(14px); } }
.pma-anim { transform-origin: 50% 90%; }
.pma-anim svg > *:nth-child(2) { --pma-d: .07s; }
.pma-anim svg > *:nth-child(3) { --pma-d: .14s; }
.pma-anim svg > *:nth-child(4) { --pma-d: .21s; }
.pma-anim svg > *:nth-child(n+5) { --pma-d: .26s; }
.pma-card-vis::after { content: ""; position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -30px 0 0 -26px; border-radius: 50%; background: var(--pma-icon, currentColor); opacity: 0; pointer-events: none; }
@media (hover: hover) {
  .pma[data-motion="draw"] .pma-belt-track > .pma-card:hover .pma-anim svg > * { animation: pma-draw .95s var(--pma-ease) var(--pma-d, 0s) backwards; }
  .pma[data-motion="bounce"] .pma-belt-track > .pma-card:hover .pma-anim { animation: pma-bounce .8s var(--pma-ease); }
  .pma[data-motion="pulse"] .pma-belt-track > .pma-card:hover .pma-anim { animation: pma-pulse .75s var(--pma-ease); }
  .pma[data-motion="pulse"] .pma-belt-track > .pma-card:hover .pma-card-vis::after { animation: pma-ring .9s ease-out; }
}
.pma[data-motion="draw"] .pma-card.is-moving .pma-anim svg > * { animation: pma-draw .95s var(--pma-ease) calc(var(--pma-i, 0) * 50ms + var(--pma-d, 0s)) backwards; }
.pma[data-motion="bounce"] .pma-card.is-moving .pma-anim { animation: pma-bounce .8s var(--pma-ease) calc(var(--pma-i, 0) * 50ms) backwards; }
.pma[data-motion="pulse"] .pma-card.is-moving .pma-anim { animation: pma-pulse .75s var(--pma-ease) calc(var(--pma-i, 0) * 50ms) backwards; }
.pma[data-motion="pulse"] .pma-card.is-moving .pma-card-vis::after { animation: pma-ring .9s ease-out calc(var(--pma-i, 0) * 50ms) backwards; }

/* ---------- the (i) button and its note ---------- */
.pma-info {
  display: inline-grid; place-items: center; flex: 0 0 auto; width: 22px; height: 22px; margin: 0; padding: 0; border: 0; border-radius: 50%;
  background: var(--pma-btn); color: var(--pma-ink); cursor: pointer; transition: background .2s;
}
.pma-info svg { width: 14px; height: 14px; fill: currentColor; }
.pma-info:hover, .pma-info.is-open { background: var(--pma-btn-hover); }
.pma-info:focus-visible { outline: 2px solid var(--pma-ink); outline-offset: 2px; }
.pma-note { display: none; }
.pma-pop {
  position: fixed; z-index: 2147483000; left: 0; top: 0; max-width: min(300px, calc(100vw - 24px)); padding: 12px 15px; border-radius: 14px;
  background: rgba(255, 255, 255, .94); color: #1D1D1F; box-shadow: 0 12px 34px rgba(0, 0, 0, .2), 0 0 0 .5px rgba(0, 0, 0, .08);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  font-size: 14px; line-height: 1.45; text-align: left; pointer-events: none;
  opacity: 0; transform: translateY(4px) scale(.98); transform-origin: var(--pma-pop-origin, 50% 100%);
  transition: opacity .18s var(--pma-ease), transform .18s var(--pma-ease);
}
.pma-pop.is-on { opacity: 1; transform: none; }

/* ---------- video and 3D tours on the media side ---------- */
.pma-media > .pma-card.is-media { padding: 0; justify-content: flex-end; background: #000; }
.pma-frame { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #000; }
.pma-frame > img, .pma-frame > video, .pma-frame > iframe { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; border: 0; object-fit: cover; }
.pma-frame > img { transition: transform 1.2s var(--pma-ease); }
.pma-card:hover .pma-frame > img { transform: scale(1.03); }
.pma-frame::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0) 55%); pointer-events: none; transition: opacity .3s; }
.pma-frame.is-live::after { opacity: 0; }
.pma-media-cap { position: relative; z-index: 2; display: grid; justify-items: start; gap: 8px; padding: clamp(18px, 2.2vw, 28px); pointer-events: none; }
.pma-media-cap .pma-card-name { color: #FFFFFF; font-size: clamp(17px, 1.6vw, 21px); }
.pma-card.is-live .pma-media-cap { display: none; }
.pma-go {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: 4px 0 0; padding: 8px 18px 8px 10px; border: 0; border-radius: 999px; pointer-events: auto;
  background: rgba(255, 255, 255, .86); color: #1D1D1F; cursor: pointer; -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
  font: inherit; font-size: 15px; font-weight: 600; line-height: 1; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); transition: transform .15s, background .2s;
}
.pma-go:hover { transform: scale(1.03); background: #FFFFFF; }
.pma-go:active { transform: scale(.97); }
.pma-go:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
.pma-go .pma-ico { font-size: 22px; color: var(--pma-brand-on-white, #1D1D1F); }
.pma-go .pma-play { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--pma-brand-on-white, #1D1D1F); }
.pma-go .pma-play svg { width: 11px; height: 11px; margin-left: 2px; fill: #FFFFFF; }
.pma-pause {
  position: absolute; z-index: 2; right: 14px; bottom: 14px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .45); color: #FFFFFF; cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.pma-pause svg { width: 14px; height: 14px; fill: currentColor; }
.pma-pause:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.pma-chips { position: absolute; z-index: 4; top: 16px; left: 16px; right: 64px; display: flex; flex-wrap: wrap; gap: 6px; }
.pma-chip {
  margin: 0; padding: 7px 13px; border: 0; border-radius: 999px; background: rgba(0, 0, 0, .45); color: #FFFFFF; cursor: pointer;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font: inherit; font-size: 13px; font-weight: 500; line-height: 1.2; transition: background .2s, color .2s;
}
.pma-chip:hover { background: rgba(0, 0, 0, .6); }
.pma-chip[aria-pressed="true"] { background: #FFFFFF; color: #1D1D1F; }
.pma-chip:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.pma-full {
  position: absolute; z-index: 4; top: 12px; right: 12px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0, 0, 0, .45); color: #FFFFFF; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.pma-full svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pma-full:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .pma *, .pma *::after, .pma *::backdrop, .pma-pop { transition: none !important; animation: none !important; }
  .pma-track { scroll-behavior: auto; }
}

/* ---------- Display style "Feature story" ----------
   An intro with a square photo, then one full-width band per category in two alternating colors (primary, secondary,
   primary…), each holding one feature: a wide photo above centered text, or photo and text side by side, swapping sides
   each time. A wide last feature starts in the next band color and ends on the page. The page closes with the featured
   cards as square photo cards, or with rows of amenities (Community, Apartment…). Apple-style proportions: display sizes
   capped at 64/56px, 17px body at 1.47, generous bands, 24px corners and the Floor Plans with Fees accents. */
.pma[data-style="story"] { --pma-bl: 0px; --pma-br: 0px; --pma-ft-pad: clamp(64px, 8vw, 120px); --pma-c1: var(--pma-head-color, #1D1D1F); gap: 0; }
.pma[data-style="story"][data-c1="brand"] { --pma-c1: var(--pma-brand, #1D1D1F); }
.pma[data-style="story"][data-c2="white"] { --pma-c2: #FFFFFF; }
/* Light gray: Apple's #F5F5F7, so the in-between bands still read as sections on a white page. */
.pma[data-style="story"][data-c2="gray"] { --pma-c2: #F5F5F7; }
.pma[data-style="story"][data-bleed="on"] { --pma-bl: var(--pma-bleed-l, 0px); --pma-br: var(--pma-bleed-r, 0px); }
.pma-u { text-decoration: underline; text-decoration-thickness: .05em; text-underline-offset: .16em; text-decoration-skip-ink: none; }

/* intro */
.pma-st-intro { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding-bottom: clamp(72px, 10vw, 140px); }
.pma-st-intro.has-photo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pma-st-intro-txt { display: grid; justify-items: start; gap: 18px; min-width: 0; }
.pma-st-heading {
  margin: 0; color: var(--pma-ink); font-family: var(--pma-head-font, inherit); font-weight: var(--pma-head-weight, 600);
  text-transform: var(--pma-head-case, none); letter-spacing: var(--pma-head-track, -.01em); font-size: clamp(40px, 5vw, 64px); line-height: 1.06; text-wrap: balance;
}
.pma-st-intro .pma-eyebrow { margin-top: 14px; font-size: 15px; letter-spacing: .08em; }
.pma-st-intro .pma-intro { max-width: 56ch; margin: 0; font-size: clamp(17px, 1.35vw, 19px); line-height: 1.47; }
.pma-st-btn { margin-top: 10px; padding: 6px 22px 7px; border-bottom: 1px solid currentColor; color: var(--pma-accent-text, var(--pma-ink)); font-size: 20px; font-weight: 500; line-height: 1.3; text-decoration: none; transition: padding .3s var(--pma-ease); }
.pma-st-btn:hover { padding-inline: 30px; }
.pma-st-btn:focus-visible { outline: 2px solid var(--pma-ink); outline-offset: 3px; }
.pma-st-intro-media { min-width: 0; }
.pma-st-intro-img { display: block; width: 100%; height: auto; max-width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 24px; }

/* one band per feature, alternating the two colors; text colors are set per band for 4.5:1 or better */
.pma-st-band {
  position: relative; background: var(--pma-c1);
  margin-left: calc(-1 * var(--pma-bl)); margin-right: calc(-1 * var(--pma-br));
  padding: 0 max(var(--pma-br), 20px) 0 max(var(--pma-bl), 20px);
}
.pma-st-band[data-band="2"] { background: var(--pma-c2, var(--pma-c1)); }
.pma[data-bleed="off"] .pma-st-band { padding-inline: clamp(24px, 4.5vw, 56px); border-radius: 32px; }
.pma[data-bleed="off"] .pma-st-band + .pma-st-band { margin-top: 14px; }

/* a feature */
.pma-st-ft { position: relative; display: grid; gap: clamp(40px, 5vw, 72px); align-items: center; padding-block: var(--pma-ft-pad); min-width: 0; scroll-margin-top: 120px; }
.pma-st-ft[data-layout="wide"] { justify-items: center; }
/* Side by side: the photo gets 58%. */
.pma-st-ft[data-layout="side"] { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.pma-st-ft[data-layout="side"][data-side="right"] { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.pma-st-ft[data-side="right"] > .pma-media { order: 2; }
.pma-st-txt { display: grid; justify-items: center; gap: 12px; max-width: 760px; min-width: 0; text-align: center; }
.pma-st-title {
  margin: 0; color: var(--pma-ink); font-family: var(--pma-head-font, inherit); font-weight: var(--pma-head-weight, 600);
  text-transform: var(--pma-head-case, none); letter-spacing: var(--pma-head-track, -.01em); font-size: clamp(34px, 4.2vw, 56px); line-height: 1.07; text-wrap: balance;
}
/* The small caps line sits above the title; a short bar in the theme color sits under it. */
.pma-st-sub { margin: 0; color: var(--pma-accent-text, var(--pma-ink)); font-size: 14px; font-weight: 600; line-height: 1.35; letter-spacing: .06em; text-transform: uppercase; }
.pma-st-txt > .pma-st-sub { margin-bottom: -2px; }
.pma-st-rule { display: block; width: 32px; height: 3px; margin: 10px 0 6px; border-radius: 2px; background: var(--pma-accent-text, currentColor); }
.pma-st-copy { max-width: 56ch; color: var(--pma-ink-2); font-size: clamp(17px, 1.35vw, 19px); line-height: 1.47; }
.pma-st-copy > * { margin: 0 0 12px; }
.pma-st-copy > *:last-child { margin-bottom: 0; }
.pma-st-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin: 8px 0 0; padding: 0; list-style: none; }
.pma-st-list li { display: inline-flex; align-items: center; gap: 8px; color: var(--pma-ink); font-size: 15px; }
.pma-st-list .pma-ico { font-size: 22px; }

/* the photo (or video / tours) in a feature */
.pma-st-ft > .pma-media { width: 100%; min-height: 0; margin: 0 !important; align-self: auto; aspect-ratio: 3 / 2; }
.pma-st-ft[data-layout="wide"] > .pma-media { aspect-ratio: 16 / 7; }
/* A wide first feature starts above its band, so its photo straddles the band's top edge. */
.pma-st-band.is-first > .pma-st-ft[data-layout="wide"] { padding-top: 0; }
.pma-st-band.is-first > .pma-st-ft[data-layout="wide"] > .pma-media { margin-top: calc(-1 * clamp(48px, 6vw, 88px)) !important; }
/* Square has Apple's 24px corners here (the photos sit inside the column, not at the screen edge). The other shapes trim the
   side facing the text: the inner side for side by side, the bottom for a wide photo. */
.pma[data-style="story"] .pma-media[data-shape="square"] { --pma-r: 24px; }
.pma-st-ft[data-side="left"] > .pma-media[data-shape="rounded"] { --pma-r: 0 32px 32px 0; }
.pma-st-ft[data-side="right"] > .pma-media[data-shape="rounded"] { --pma-r: 32px 0 0 32px; }
.pma-st-ft[data-side="left"] > .pma-media[data-shape="curve"] { --pma-r: 0 999px 999px 0; }
.pma-st-ft[data-side="right"] > .pma-media[data-shape="curve"] { --pma-r: 999px 0 0 999px; }
.pma-st-ft[data-side="left"] > .pma-media[data-shape="sweep"] { --pma-r: 0 48% 0 0 / 0 62% 0 0; }
.pma-st-ft[data-side="right"] > .pma-media[data-shape="sweep"] { --pma-r: 48% 0 0 0 / 62% 0 0 0; }
.pma-st-ft[data-side="left"] > .pma-media[data-shape="angle"] { --pma-clip: polygon(0 0, 100% 0, 84% 100%, 0 100%); }
.pma-st-ft[data-side="right"] > .pma-media[data-shape="angle"] { --pma-clip: polygon(16% 0, 100% 0, 100% 100%, 0 100%); }
.pma-st-ft[data-layout="wide"] > .pma-media[data-shape="rounded"] { --pma-r: 0 0 32px 32px; }
.pma-st-ft[data-layout="wide"] > .pma-media[data-shape="curve"] { --pma-r: 0 0 50% 50% / 0 0 22% 22%; }
.pma-st-ft[data-layout="wide"] > .pma-media[data-shape="sweep"] { --pma-r: 0 0 60% 0 / 0 0 40% 0; }
.pma-st-ft[data-layout="wide"] > .pma-media[data-shape="angle"] { --pma-clip: polygon(0 0, 100% 0, 100% 82%, 0 100%); }

/* A wide last feature: its photo starts in the next band color and ends below it, then its text sits on the page. */
.pma-st-ft.is-tail { padding-bottom: 0; isolation: isolate; }
.pma-st-ft.is-tail::before {
  content: ""; position: absolute; z-index: -1; top: 0; left: calc(-1 * var(--pma-bl)); right: calc(-1 * var(--pma-br));
  height: calc(var(--pma-ft-pad) + 100cqw * 7 / 16 * .45); background: var(--pma-c1);
}
.pma-st-ft.is-tail[data-band="2"]::before { background: var(--pma-c2, var(--pma-c1)); }
.pma[data-bleed="off"] .pma-st-ft.is-tail { margin-top: 14px; }
.pma[data-bleed="off"] .pma-st-ft.is-tail::before { left: 0; right: 0; border-radius: 32px 32px 0 0; }

/* the closing section: square photo cards (the Featured tab's cards) … */
.pma-st-cards { display: grid; gap: 28px; padding-top: var(--pma-ft-pad); }
.pma-st-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 30px); margin: 0; padding: clamp(40px, 5vw, 64px) 0 0; list-style: none; border-top: 1px solid var(--pma-rule); }
.pma-st-card { position: relative; display: grid; justify-items: center; align-content: start; gap: 8px; min-width: 0; text-align: center; }
.pma-st-card-media { width: 100%; overflow: hidden; border-radius: 24px; box-shadow: var(--pma-shadow); transition: transform .35s var(--pma-settle), box-shadow .35s; }
.pma-st-card-media img { display: block; width: 100%; height: auto; max-width: none; aspect-ratio: 1 / 1; object-fit: cover; }
.pma-st-card:hover .pma-st-card-media { transform: translateY(-4px); box-shadow: var(--pma-shadow-lift); }
.pma-st-card-name {
  margin: 18px 0 0; color: var(--pma-ink); font-family: var(--pma-head-font, inherit); font-weight: var(--pma-head-weight, 600);
  text-transform: var(--pma-head-case, none); letter-spacing: var(--pma-head-track, -.01em); font-size: clamp(24px, 2.6vw, 32px); line-height: 1.05;
}
.pma-st-card .pma-fcard-hit:focus-visible { outline-color: var(--pma-ink); }
.pma-st-card .pma-st-sub { font-size: 13px; }

/* … or rows of amenities, each with its own title (Community, Apartment…) */
/* Amenity lists as a band (Featured › Lists background): Automatic continues the primary / secondary alternation, Custom
   takes its own color. Its text colors are worked out like any band's. */
.pma-st-lists.pma-st-band { padding-top: var(--pma-ft-pad); padding-bottom: var(--pma-ft-pad); }
.pma-st-ft.is-tail + .pma-st-lists.pma-st-band { margin-top: var(--pma-ft-pad); }
.pma-st-band[data-band="custom"] { background: var(--pma-band, var(--pma-c1)); }
/* Disclaimers under the lists: a step smaller than the 17px list text. */
.pma-st-notes { display: grid; gap: 6px; margin-top: clamp(20px, 2.5vw, 28px); }
.pma-st-note { margin: 0; max-width: 90ch; color: var(--pma-ink-2); font-size: 14px; line-height: 1.5; }
@container pma (max-width: 640px) { .pma-st-note { font-size: 13px; } }
.pma-st-rows { display: grid; margin-top: clamp(12px, 2vw, 24px); border-top: 1px solid var(--pma-rule); }
.pma-st-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 18px clamp(24px, 4vw, 64px); align-items: start; padding-block: clamp(32px, 4vw, 52px); border-bottom: 1px solid var(--pma-rule); }
.pma-st-row-title {
  margin: 0; color: var(--pma-ink); font-family: var(--pma-head-font, inherit); font-weight: var(--pma-head-weight, 600);
  text-transform: var(--pma-head-case, none); letter-spacing: var(--pma-head-track, -.01em); font-size: clamp(24px, 2.6vw, 32px); line-height: 1.05; overflow-wrap: break-word;
}
.pma-st-row-list { grid-column: -2 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 32px; margin: 0; padding: 0; list-style: none; }
.pma-st-am { display: flex; align-items: center; gap: 14px; min-width: 0; color: var(--pma-ink-2); font-size: 17px; font-weight: 500; line-height: 1.3; }
/* With icons: each one in a 44px circle tinted with the theme color. */
.pma-st-lists[data-icons="on"] .pma-st-am .pma-ico { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; background: var(--pma-soft); }
.pma-st-lists[data-icons="on"] .pma-st-am .pma-ico svg, .pma-st-lists[data-icons="on"] .pma-st-am .pma-ico .pma-ico-img { width: 24px; height: 24px; }
/* Text only (Featured › List style): a small dot in the theme color instead of an icon. */
.pma-st-lists[data-icons="off"] .pma-st-row-list { gap: 16px 28px; }
.pma-st-lists[data-icons="off"] .pma-st-am { align-items: baseline; gap: 12px; }
.pma-st-lists[data-icons="off"] .pma-st-am::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--pma-accent-text, var(--pma-brand)); transform: translateY(-2px); }
.pma-st-am .pma-name { min-width: 0; overflow-wrap: break-word; }
.pma-st-am .pma-info { flex: none; margin-left: -6px; }
@media (hover: hover) {
  .pma[data-motion="draw"] .pma-st-am:hover .pma-anim svg > * { animation: pma-draw .95s var(--pma-ease) var(--pma-d, 0s) backwards; }
  .pma[data-motion="bounce"] .pma-st-am:hover .pma-anim { animation: pma-bounce .8s var(--pma-ease); }
  .pma[data-motion="pulse"] .pma-st-am:hover .pma-anim { animation: pma-pulse .75s var(--pma-ease); }
}
.pma[data-motion="draw"] .pma-st-am.is-moving .pma-anim svg > * { animation: pma-draw .95s var(--pma-ease) calc(var(--pma-i, 0) * 50ms + var(--pma-d, 0s)) backwards; }
.pma[data-motion="bounce"] .pma-st-am.is-moving .pma-anim { animation: pma-bounce .8s var(--pma-ease) calc(var(--pma-i, 0) * 50ms) backwards; }
.pma[data-motion="pulse"] .pma-st-am.is-moving .pma-anim { animation: pma-pulse .75s var(--pma-ease) calc(var(--pma-i, 0) * 50ms) backwards; }
/* Each feature and the closing section fade up once as they scroll in. amenities.js sets data-reveal, so nothing is hidden
   without it, and it never does for visitors who turn motion off. */
.pma[data-reveal] .pma-st-ft > .pma-st-txt, .pma[data-reveal] .pma-st-ft > .pma-media, .pma[data-reveal] .pma-st-cards { transition: opacity .7s var(--pma-settle), transform .7s var(--pma-settle); }
.pma[data-reveal] .pma-st-ft:not(.is-in) > .pma-st-txt, .pma[data-reveal] .pma-st-cards:not(.is-in) { opacity: 0; transform: translateY(16px); }
.pma[data-reveal] .pma-st-ft:not(.is-in) > .pma-media { opacity: 0; transform: scale(1.03); }

/* tablets and phones */
@container pma (max-width: 820px) {
  .pma-st-grid { gap: 14px; } .pma-st-card .pma-st-sub { font-size: 13px; }
  .pma-st-row-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container pma (max-width: 640px) {
  .pma-st-intro.has-photo, .pma-st-ft[data-layout="side"], .pma-st-ft[data-layout="side"][data-side="right"] { grid-template-columns: minmax(0, 1fr); }
  .pma-st-ft[data-side="right"] > .pma-media { order: 0; }
  .pma-st-ft[data-layout="side"] > .pma-media[data-shape] { --pma-r: 0; --pma-clip: none; }
  .pma-st-ft[data-layout="side"] > .pma-media[data-shape="rounded"] { --pma-r: 0 0 24px 24px; }
  .pma-st-ft[data-layout="side"] > .pma-media[data-shape="curve"] { --pma-r: 0 0 50% 50% / 0 0 16% 16%; }
  .pma-st-ft[data-layout="wide"] > .pma-media { aspect-ratio: 4 / 3; }
  .pma-st-ft.is-tail::before { height: calc(var(--pma-ft-pad) + 100cqw * 3 / 4 * .45); }
  .pma-st-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .pma-st-row { grid-template-columns: minmax(0, 1fr); padding-block: 28px; }
  .pma-st-row-list { grid-column: auto; gap: 18px 16px; }
  .pma-st-am { gap: 12px; font-size: 15px; }
}

/* ---------- Both display styles: theme buttons, virtual tour popups, embed code ----------
   - Buttons copy the theme's own button (its color, font, size, capitals, corners and padding), read from the page.
   - Any photo can carry a Virtual tour button that opens the tour in a popup: frosted like Play video and Explore.
   - Embed code (Media › Embed code) loads in the same frame as the 3D tours. */

/* the theme's button */
/* When the theme has a button (.floor-btn or Divi's .et_pb_button), amenities.js adds that class and data-cta="theme", and the
   theme's own CSS draws it: same size, padding, line height and hover as the site's other buttons. Otherwise these copies
   of its look (read by the probe) apply. */
.pma-cta { margin: 0; text-decoration: none; white-space: nowrap; cursor: pointer; }
.pma:not([data-cta="theme"]) .pma-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: var(--pma-cta-pad, 14px 26px); border: var(--pma-cta-border, 0 none transparent); border-radius: var(--pma-cta-radius, 999px);
  background: var(--pma-cta-bg, var(--pma-brand, #1D1D1F)); color: var(--pma-cta-ink, #FFFFFF);
  font-family: var(--pma-cta-font, var(--pma-body-font, inherit)); font-weight: var(--pma-cta-weight, 600); font-size: var(--pma-cta-size, 15px);
  letter-spacing: var(--pma-cta-track, normal); text-transform: var(--pma-cta-case, none); line-height: 1.15;
  transition: filter .2s, transform .3s var(--pma-ease);
}
.pma:not([data-cta="theme"]) .pma-cta:hover { filter: brightness(.92); color: var(--pma-cta-ink, #FFFFFF); }
.pma:not([data-cta="theme"]) .pma-cta:active { transform: scale(.97); }
.pma-st-intro-txt > .pma-cta { justify-self: start; }
/* A category's own text colors (Categories › Text colors) win over the band's; amenities.js puts Settings › Text colors
   into --pma-ink (titles), --pma-accent-text (subtitles) and --pma-ink-2 (body) by each surface's tone. */
.pma .pma-sec-title, .pma .pma-st-title { color: var(--pma-title-color, var(--pma-ink)); }
.pma .pma-st-txt > .pma-st-sub { color: var(--pma-sub-color, var(--pma-accent-text, var(--pma-ink))); }
.pma .pma-sec-copy, .pma .pma-st-copy { color: var(--pma-body-color, var(--pma-ink-2)); }
/* Settings › Button width and colors. !important so they hold over the theme's own button class. */
.pma .pma-cta[data-width] { padding: 10px 30px !important; text-align: center; }
/* Standard sizes to its label even where the theme makes its buttons full width (Olathe Commons: .floor-btn { width: 100% }). */
.pma .pma-cta[data-width="standard"] { width: auto !important; max-width: 100%; }
.pma .pma-cta[data-width="full"] { display: flex !important; justify-self: stretch; justify-content: center; width: 100% !important; text-align: center; }
.pma .pma-cta[data-colors="custom"] { background: var(--pma-btn-bg) !important; border-color: var(--pma-btn-bg) !important; color: var(--pma-btn-ink) !important; filter: none !important; }
.pma .pma-cta[data-colors="custom"]:hover, .pma .pma-cta[data-colors="custom"]:focus-visible { background: var(--pma-btn-bg-hover) !important; border-color: var(--pma-btn-bg-hover) !important; color: var(--pma-btn-ink-hover) !important; }
.pma-cta:focus-visible { outline: 2px solid var(--pma-ink); outline-offset: 3px; }
.pma-cta .pma-ico { color: currentColor; font-size: 1.4em; }
.pma-st-cta { margin-top: 10px; }

/* the Virtual tour button on a photo: top corner on the straight side, so no shape trims it */
.pma-tourbtn {
  position: absolute; z-index: 4; top: 16px; left: 16px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px 8px 12px;
  border-radius: 999px; background: rgba(255, 255, 255, .86); color: #1D1D1F; text-decoration: none; white-space: nowrap;
  -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
  font-family: var(--pma-body-font, inherit); font-size: 14px; font-weight: 600; line-height: 1; transition: transform .15s, background .2s;
}
.pma-tourbtn:hover { background: #FFFFFF; color: #1D1D1F; }
.pma-tourbtn:active { transform: scale(.97); }
.pma-tourbtn .pma-ico { font-size: 20px; color: var(--pma-brand-on-white, #1D1D1F); }
.pma-sec[data-side="right"] > .pma-media .pma-tourbtn, .pma-st-ft[data-side="right"] > .pma-media .pma-tourbtn { left: auto; right: 16px; }
.pma-card.is-live .pma-tourbtn { display: none; }
.pma-st-intro-media, .pma-st-card-media { position: relative; }

/* the tour popup */
.pma-dlg.pma-tdlg { width: min(1200px, calc(100vw - 32px)); max-height: calc(100vh - 32px); background: #111113; color: rgba(255, 255, 255, .78); }
.pma-tdlg-head { display: flex; align-items: center; gap: 14px; padding: 14px 16px 14px 24px; }
.pma-tdlg .pma-dlg-title { flex: 1; min-width: 0; color: #FFFFFF; font-size: clamp(18px, 2vw, 24px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pma-tdlg-out { flex: 0 0 auto; color: #FFFFFF; font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: .18em; }
.pma-tdlg-out:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; border-radius: 2px; }
.pma-tdlg .pma-dlg-x { background: rgba(255, 255, 255, .14); color: #FFFFFF; }
.pma-tdlg .pma-dlg-x:hover { background: rgba(255, 255, 255, .24); }
.pma-tdlg .pma-dlg-x:focus-visible { outline-color: #FFFFFF; }
.pma-tdlg-box { position: relative; aspect-ratio: 16 / 9; max-height: calc(100vh - 110px); background: #000; }
.pma-tdlg-box > .pma-frame::after { content: none; }
.pma-tdlg-box > .pma-frame > img { filter: blur(14px) brightness(.7); transform: scale(1.06); }
@media (max-width: 640px) {
  .pma-dlg.pma-tdlg { width: calc(100vw - 16px); border-radius: 18px; }
  .pma-tdlg-head { padding: 10px 10px 10px 16px; }
  .pma-tdlg-box { aspect-ratio: 3 / 4; }
}