/*
 * ALS Property Site — the single-property website template.
 *
 * Built to the structure of the competitor's demo sites: full-bleed hero, sticky
 * section nav, an open-house card, a fact bar, description beside a spec table,
 * a photo gallery, amenities, location, the agent, and an enquiry form.
 *
 * Palette is the live ALS navy and teal rather than the competitor's grey and
 * orange, so the generated site belongs to this brand instead of imitating
 * theirs.
 *
 * Every field rendered here exists in models/propertyModel.js. Nothing is
 * invented: if the record has no floor plans the section is omitted rather than
 * filled with a placeholder.
 */

.ps {
  --ps-bg: #050d1c;
  --ps-panel: #0a1730;
  --ps-card: #0e1e3c;
  --ps-line: #22374f;
  --ps-ink: #ffffff;
  --ps-text: #c2d2e6;
  --ps-muted: #8ea4c0;
  --ps-dim: #5f7591;
  --ps-teal: #56ddd0;
  --ps-teal-deep: #2fb8ad;
  --ps-ink-on-teal: #04222a;

  position: relative;
  background: var(--ps-bg);
  color: var(--ps-text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  overflow: hidden;
}
.ps *, .ps *::before, .ps *::after { box-sizing: border-box; }
.ps a { text-decoration: none; color: inherit; }
.ps img { display: block; max-width: 100%; }
.ps ul { margin: 0; padding: 0; list-style: none; }

.ps-ic {
  width: 1em; height: 1em;
  flex: 0 0 auto;
  display: inline-block;
  vertical-align: -0.14em;
}

/* ============================================================ hero + nav */

.ps-hero {
  position: relative;
  min-height: clamp(440px, 68vh, 720px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  isolation: isolate;
}
.ps-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: #0a1830;
}
.ps-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Two scrims: one for the nav strip, one for the fact bar, so text stays
   legible over any photograph. */
.ps-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 10, 22, 0.82) 0%, rgba(4, 10, 22, 0.18) 26%, rgba(4, 10, 22, 0.2) 52%, rgba(4, 10, 22, 0.92) 100%);
}

.ps-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: clamp(14px, 2.2vw, 22px) clamp(16px, 3.4vw, 40px);
  flex-wrap: wrap;
}
.ps-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  font-size: clamp(12.5px, 1.3vw, 15px);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ps-brand__mark {
  width: 24px; height: 24px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--ps-teal), #2f7de0);
  box-shadow: 0 4px 12px -4px rgba(86, 221, 208, 0.7);
}

.ps-nav {
  display: flex;
  gap: clamp(10px, 1.7vw, 24px);
  flex-wrap: wrap;
}
.ps-nav a {
  position: relative;
  padding: 5px 2px;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(10.5px, 1.05vw, 12.5px);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  transition: color 0.16s ease;
}
.ps-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: var(--ps-teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.25, 1);
}
.ps-nav a:hover { color: #fff; }
.ps-nav a:hover::after { transform: scaleX(1); }

/* the sticky copy of the nav, revealed on scroll */
.ps-nav--sticky {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px clamp(16px, 3.4vw, 40px);
  background: rgba(5, 13, 28, 0.93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ps-line);
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.28s ease, opacity 0.28s ease;
}
.ps-nav--sticky.is-on {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.ps-nav--sticky .ps-brand { font-size: 12.5px; }

.ps-hero__body {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 34px);
  padding: 0 clamp(16px, 3.4vw, 40px) clamp(20px, 3vw, 34px);
  flex-wrap: wrap;
}

/* open house card, the competitor leads with this so it leads here too */
.ps-open {
  flex: 0 0 auto;
  min-width: 232px;
  padding: 16px 20px;
  border-radius: 12px;
  background: linear-gradient(140deg, #f0803c, #d4562a);
  color: #fff;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.9);
  animation: ps-rise 0.7s 0.25s cubic-bezier(0.2, 0.8, 0.25, 1) both;
}
.ps-open b {
  display: block;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.015em;
}
.ps-open span {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.94;
}

.ps-address {
  min-width: 0;
  animation: ps-rise 0.7s cubic-bezier(0.2, 0.8, 0.25, 1) both;
}
.ps-address h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(26px, 4.4vw, 50px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.04;
  text-shadow: 0 3px 22px rgba(0, 0, 0, 0.55);
}
.ps-address p {
  margin: 6px 0 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(13px, 1.5vw, 16px);
  font-weight: 500;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}
.ps-address .ps-price {
  margin-top: 9px;
  color: #fff;
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 800;
  letter-spacing: -0.025em;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
}

@keyframes ps-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ================================================================ fact bar */

.ps-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 1px;
  background: var(--ps-line);
  border-top: 1px solid var(--ps-line);
  border-bottom: 1px solid var(--ps-line);
}
.ps-fact {
  display: grid;
  gap: 3px;
  justify-items: center;
  padding: clamp(14px, 2vw, 20px) 8px;
  background: var(--ps-bg);
  text-align: center;
}
.ps-fact .ps-ic {
  width: 22px; height: 22px;
  color: var(--ps-teal);
}
.ps-fact b {
  color: #fff;
  font-size: clamp(13px, 1.5vw, 16px);
  font-weight: 800;
  letter-spacing: -0.015em;
}
.ps-fact span {
  color: var(--ps-dim);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* ================================================================= layout */

.ps-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3.4vw, 40px);
}
.ps-section {
  padding: clamp(40px, 6vw, 76px) 0;
  scroll-margin-top: 64px;
}
.ps-section + .ps-section { border-top: 1px solid var(--ps-line); }

.ps-h2 {
  margin: 0 0 6px;
  color: #fff;
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 800;
  letter-spacing: -0.024em;
  line-height: 1.12;
}
.ps-eyebrow {
  margin: 0 0 8px;
  color: var(--ps-teal);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.ps-lede {
  margin: 0 0 clamp(18px, 2.6vw, 28px);
  max-width: 62ch;
  color: var(--ps-muted);
  font-size: clamp(13.5px, 1.4vw, 15.5px);
}

.ps-split {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(20px, 3.4vw, 46px);
  align-items: start;
}
@media (max-width: 860px) { .ps-split { grid-template-columns: 1fr; } }

.ps-copy {
  color: var(--ps-text);
  font-size: 15px;
  line-height: 1.72;
}
.ps-copy p { margin: 0 0 14px; }
.ps-copy p:last-child { margin-bottom: 0; }

/* spec table: label left, value right, the competitor's right-hand column */
.ps-specs {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--ps-line);
  background: var(--ps-panel);
}
.ps-spec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 17px;
  border-bottom: 1px solid var(--ps-line);
}
.ps-spec:last-child { border-bottom: 0; }
.ps-spec dt {
  color: var(--ps-dim);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.ps-spec dd {
  margin: 0;
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  text-align: right;
}

/* ================================================================= gallery */

.ps-gal {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
@media (max-width: 720px) { .ps-gal { grid-template-columns: repeat(2, 1fr); } }
.ps-gal button {
  appearance: none;
  position: relative;
  padding: 0;
  border: 1px solid var(--ps-line);
  border-radius: 11px;
  overflow: hidden;
  background: var(--ps-card);
  cursor: pointer;
  aspect-ratio: 4 / 3;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.ps-gal button:hover {
  transform: translateY(-3px);
  border-color: var(--ps-teal);
  box-shadow: 0 20px 40px -22px rgba(0, 0, 0, 0.95);
}
.ps-gal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.25, 1);
}
.ps-gal button:hover img { transform: scale(1.07); }
.ps-gal button.is-lead { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.ps-gal__more {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(5, 13, 28, 0.72);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* lightbox */
.ps-light {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  place-items: center;
  padding: 4vh 4vw;
  background: rgba(2, 6, 14, 0.95);
  backdrop-filter: blur(4px);
}
.ps-light.is-open { display: grid; }
.ps-light img {
  max-width: 100%;
  max-height: 88vh;
  border-radius: 12px;
  object-fit: contain;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 1);
}
.ps-light__x {
  position: absolute;
  top: 18px; right: 20px;
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--ps-line);
  background: rgba(10, 23, 48, 0.9);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  transition: background 0.16s ease;
}
.ps-light__x:hover { background: var(--ps-teal); color: var(--ps-ink-on-teal); }
.ps-light__count {
  position: absolute;
  bottom: 20px;
  color: var(--ps-muted);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* =============================================================== amenities */

.ps-amen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 9px;
}
.ps-amen li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 15px;
  border-radius: 11px;
  border: 1px solid var(--ps-line);
  background: var(--ps-panel);
  color: var(--ps-text);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.ps-amen li:hover {
  border-color: rgba(86, 221, 208, 0.42);
  background: var(--ps-card);
}
.ps-amen .ps-ic { color: var(--ps-teal); font-size: 17px; margin-top: 1px; }

/* ============================================================== commission */

/* Two clearly different states rather than a vague "contact me about it". A
   reader must be able to tell at a glance whether a commission exists. */
.ps-comm {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: clamp(18px, 2.6vw, 24px);
  border-radius: 14px;
  border: 1px solid var(--ps-line);
  background: var(--ps-panel);
}
.ps-comm--yes {
  border-color: rgba(86, 221, 208, 0.42);
  background: linear-gradient(140deg, rgba(86, 221, 208, 0.1), var(--ps-panel) 62%);
}
.ps-comm--no {
  border-color: rgba(86, 221, 208, 0.3);
}
.ps-comm__flag {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  flex: 0 0 auto;
  border-radius: 12px;
  background: rgba(86, 221, 208, 0.16);
  border: 1px solid rgba(86, 221, 208, 0.42);
  color: var(--ps-teal);
}
.ps-comm__flag .ps-ic { width: 24px; height: 24px; }
.ps-comm--no .ps-comm__flag {
  background: rgba(143, 164, 192, 0.12);
  border-color: rgba(143, 164, 192, 0.3);
  color: var(--ps-muted);
}
.ps-comm__txt { min-width: 0; }
.ps-comm__lead {
  margin: 0;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
}
.ps-comm__terms {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--ps-line);
}
.ps-comm__terms span {
  display: block;
  color: var(--ps-dim);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.ps-comm__terms p {
  margin: 0;
  color: var(--ps-text);
  font-size: 13.5px;
  line-height: 1.55;
}
.ps-comm__note {
  margin: 12px 0 0;
  color: var(--ps-muted);
  font-size: 12.5px;
  line-height: 1.55;
}

/* =================================================================== agent */

.ps-agent {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: clamp(18px, 2.6vw, 26px);
  border-radius: 16px;
  border: 1px solid var(--ps-line);
  background: linear-gradient(140deg, var(--ps-panel), #0c1a34);
}
.ps-agent img {
  width: 84px; height: 84px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  border: 3px solid var(--ps-teal);
  background: var(--ps-card);
}
.ps-agent__txt { min-width: 0; flex: 1 1 240px; }
.ps-agent__txt h3 {
  margin: 0;
  color: #fff;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.ps-agent__txt p {
  margin: 2px 0 0;
  color: var(--ps-muted);
  font-size: 13px;
}
.ps-agent__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(86, 221, 208, 0.14);
  border: 1px solid rgba(86, 221, 208, 0.4);
  color: var(--ps-teal);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.ps-agent__badge .ps-ic { width: 12px; height: 12px; }
.ps-agent__acts { display: flex; gap: 9px; flex-wrap: wrap; }

/* ================================================================== forms */

.ps-btn {
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 20px !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  border: 1px solid var(--ps-teal) !important;
  background: var(--ps-teal) !important;
  color: var(--ps-ink-on-teal) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}
.ps-btn:hover { background: #7cf0e5 !important; border-color: #7cf0e5 !important; transform: translateY(-1px); }
.ps-btn--ghost {
  background: transparent !important;
  border-color: rgba(86, 221, 208, 0.5) !important;
  color: var(--ps-teal) !important;
}
.ps-btn--ghost:hover { background: rgba(86, 221, 208, 0.1) !important; }

.ps-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}
@media (max-width: 560px) { .ps-form { grid-template-columns: 1fr; } }
.ps-field { display: grid; gap: 5px; }
.ps-field--full { grid-column: 1 / -1; }
.ps-field label {
  color: var(--ps-dim);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.ps-field input,
.ps-field select,
.ps-field textarea {
  width: 100%;
  padding: 11px 13px;
  border-radius: 9px;
  border: 1px solid var(--ps-line);
  background: #0a162c;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.ps-field textarea { min-height: 104px; resize: vertical; }
.ps-field input:focus,
.ps-field select:focus,
.ps-field textarea:focus {
  outline: none;
  border-color: var(--ps-teal);
  box-shadow: 0 0 0 3px rgba(86, 221, 208, 0.16);
}
.ps-field select option { background: #0a162c; color: #fff; }
.ps-form__note {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--ps-dim);
  font-size: 11.5px;
  line-height: 1.5;
}
.ps-form .ps-btn { grid-column: 1 / -1; }

/* payment calculator, the competitor ships one on the bigger site */
.ps-calc {
  border-radius: 14px;
  border: 1px solid var(--ps-line);
  background: var(--ps-panel);
  padding: clamp(18px, 2.4vw, 24px);
}
.ps-calc__out {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-bottom: 15px;
}
.ps-calc__cell {
  padding: 13px 10px;
  border-radius: 10px;
  background: #0a162c;
  border: 1px solid var(--ps-line);
  text-align: center;
}
.ps-calc__cell b {
  display: block;
  color: #fff;
  font-size: clamp(15px, 1.8vw, 19px);
  font-weight: 800;
  letter-spacing: -0.022em;
}
.ps-calc__cell span {
  color: var(--ps-dim);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ps-calc__sliders { display: grid; gap: 14px; }
.ps-calc__row label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  color: var(--ps-muted);
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 5px;
}
.ps-calc__row label b { color: #fff; font-size: 13.5px; font-weight: 800; }
.ps-calc input[type="range"] {
  width: 100%;
  height: 5px;
  appearance: none;
  border-radius: 999px;
  background: var(--ps-line);
  outline: none;
}
.ps-calc input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--ps-teal);
  border: 3px solid var(--ps-bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  cursor: pointer;
}
.ps-calc input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--ps-teal);
  border: 3px solid var(--ps-bg);
  cursor: pointer;
}

/* ==================================================================== map */

.ps-map {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--ps-line);
  aspect-ratio: 16 / 9;
  min-height: 260px;
  background: #0b1a33;
}
.ps-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.28) contrast(1.06);
}
.ps-map__pin {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -100%);
  pointer-events: none;
}
.ps-map__pin svg { width: 30px; height: 30px; color: var(--ps-teal); filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.8)); }

/* ================================================================= footer */

.ps-foot {
  border-top: 1px solid var(--ps-line);
  padding: clamp(24px, 3.4vw, 38px) 0;
  color: var(--ps-dim);
  font-size: 12px;
  line-height: 1.6;
}
.ps-foot strong { color: var(--ps-muted); }
.ps-foot a { color: var(--ps-teal); }

/* honours the OS setting instead of animating regardless */
@media (prefers-reduced-motion: reduce) {
  .ps *, .ps *::before, .ps *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}