/* ============================================================
   Pongratz Properties — professional polish layer
   ------------------------------------------------------------
   ADDITIVE ONLY. Keeps the existing Astra theme, green brand
   colors (#56b259), Poppins/Noto Serif fonts, all photos, the
   layout, and every function intact. This file only refines
   spacing, depth, motion, typographic rhythm, and accessibility.
   Remove the <link> to polish.css to revert completely.
   ============================================================ */

:root {
  --pp-green: #56b259;
  --pp-green-dark: #45984a;
  --pp-dark: #181e19;
  --pp-muted: #5f695f;
  --pp-line: #e2e7e2;
}

/* Crisper text rendering + remove the default top margin/padding that
   left a thin white strip above the header. */
html,
body {
  margin: 0 !important;
  padding: 0 !important;
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
html {
  scroll-behavior: smooth;
}

/* Consistent, gentle motion on interactive elements */
a,
button,
input,
select,
textarea,
.wp-block-button__link,
.ast-button,
.ast-custom-button,
.ast-outline-button,
.entry-content a[role="button"],
.entry-content img,
.wp-block-cover {
  transition: color 0.2s ease, background-color 0.2s ease,
    border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* ---------- Typographic rhythm (content area) ---------- */
.entry-content {
  line-height: 1.7;
}
.entry-content h1 {
  letter-spacing: -0.015em;
  line-height: 1.12;
}
.entry-content h2 {
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 0.55em;
}
.entry-content h3 {
  line-height: 1.28;
}
.entry-content p {
  margin-bottom: 1.15em;
}
.entry-content h2 + p,
.entry-content h3 + p {
  margin-top: 0.2em;
}

/* Eyebrow labels (h6) -> refined uppercase green kicker */
.entry-content h6 {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--pp-green);
  font-weight: 600;
  margin-bottom: 0.45em;
}

/* ---------- Buttons: subtle depth + hover lift (same green) ---------- */
.entry-content a[role="button"],
.wp-block-button__link,
.ast-button,
.ast-custom-button {
  box-shadow: 0 2px 6px rgba(24, 30, 25, 0.08);
}
.entry-content a[role="button"]:hover,
.wp-block-button__link:hover,
.ast-button:hover,
.ast-custom-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(86, 178, 89, 0.26);
}

/* ---------- Photos & cover blocks: soft rounding + depth ---------- */
.entry-content img {
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(24, 30, 25, 0.1);
}
.entry-content figure {
  overflow: hidden;
}
.entry-content img:hover {
  transform: scale(1.012);
}
.wp-block-cover,
.wp-block-cover-image {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(24, 30, 25, 0.12);
}

/* ---------- Links inside content ---------- */
.entry-content p a:not([role="button"]),
.entry-content li a {
  color: var(--pp-green-dark);
  text-underline-offset: 3px;
}
.entry-content p a:not([role="button"]):hover,
.entry-content li a:hover {
  color: var(--pp-green);
}

/* Property name headings that are links */
.entry-content h3 a {
  color: var(--pp-dark);
}
.entry-content h3 a:hover {
  color: var(--pp-green);
}

/* ---------- Accessibility: clear, on-brand focus ring ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.wp-block-button__link:focus-visible {
  outline: 3px solid rgba(86, 178, 89, 0.55);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- Contact form polish (keeps fields & behavior) ---------- */
.entry-content input[type="text"],
.entry-content input[type="email"],
.entry-content input[type="tel"],
.entry-content input[type="url"],
.entry-content input[type="number"],
.entry-content textarea,
.entry-content select,
.wpcf7 input,
.wpcf7 textarea,
.wpcf7 select {
  border: 1px solid var(--pp-line);
  border-radius: 8px;
  padding: 12px 14px;
  background: #fbfbfb;
}
.entry-content input:focus,
.entry-content textarea:focus,
.entry-content select:focus,
.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
  border-color: var(--pp-green);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(86, 178, 89, 0.15);
  outline: none;
}
.wpcf7 input[type="submit"] {
  box-shadow: 0 2px 6px rgba(24, 30, 25, 0.08);
}
.wpcf7 input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(86, 178, 89, 0.26);
}

/* ============================================================
   Layout corrections — fix transparent-header overlap and the
   uncentered, full-width page-builder content. Keeps the
   header, logo, colors, fonts, and photos as-is.
   ============================================================ */

/* 1) Clear the absolutely-positioned transparent header so the
      logo no longer sits on top of the first heading. */
.ast-page-builder-template #primary,
.ast-page-builder-template .site .site-content #primary {
  padding-top: 140px !important;
}

/* 2) Contain the content in a comfortable centered column (no longer
      full-width text jammed against the left edge) WITHOUT force-centering
      every line. Headings center; body text keeps its natural alignment. */
.entry-content > h1,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > h5,
.entry-content > h6,
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > .wp-block-buttons {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* Left-align ALL content (headings, prose, lists). Only the homepage
   hero stays centered. This is the fix for "stop centering the text". */
.entry-content > h1,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > h5,
.entry-content > h6,
.entry-content > p,
.entry-content > ul,
.entry-content > ol {
  text-align: left;
}
/* Override the original inline-centered paragraphs too */
.entry-content p[style*="center"],
.entry-content h1[style*="center"],
.entry-content h2[style*="center"],
.entry-content h3[style*="center"] {
  text-align: left !important;
}

/* ============================================================
   Homepage hero — Roger Plaza photo background, brand on top.
   ============================================================ */

/* Let the hero sit flush at the top so the transparent header
   overlays the photo (only on the homepage). */
body.home #content #primary,
body.home #content .ast-container #primary {
  padding-top: 0 !important;
}

.pp-hero {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
  min-height: 70vh;
  padding: 48px 24px 96px;
  margin-bottom: 8px;
  /* Photo is anchored to the viewport (fixed) and shared with the header,
     so the photo is continuous from the very top of the page. */
  background: linear-gradient(rgba(15, 32, 60, 0.62), rgba(15, 32, 60, 0.74)),
    #122039 url("wp-content/uploads/2020/08/20200515_123800-scaled.jpg") center
      top / cover no-repeat fixed;
}
.pp-hero__overlay {
  display: none;
}
.pp-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 0 auto;
  color: #fff;
}
.pp-hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 600;
  font-size: 0.85rem;
  color: #9be39e;
  margin-bottom: 14px;
}
.pp-hero__title {
  color: #fff !important;
  font-family: "Poppins", sans-serif;
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 1.05;
  margin: 0 0 10px;
}
.pp-hero__tagline {
  color: #fff;
  font-weight: 600;
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  margin-bottom: 18px;
}
.pp-hero__lead {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.08rem;
  max-width: 680px;
  margin: 0 auto 30px;
}
.pp-hero__cta {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.pp-hero__office a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 0.95rem;
}
.pp-hero__office a:hover {
  color: #fff;
}

/* Hero buttons */
.pp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 32px;
  border-radius: 8px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  border: 2px solid transparent;
}
.pp-btn--primary {
  background: var(--pp-green);
  color: #fff;
  border-color: var(--pp-green);
  box-shadow: 0 10px 24px rgba(86, 178, 89, 0.42);
}
.pp-btn--primary:hover {
  background: var(--pp-green-dark);
  border-color: var(--pp-green-dark);
  transform: translateY(-2px);
}
.pp-btn--ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
}
.pp-btn--ghost:hover {
  background: #fff;
  color: var(--pp-dark);
  transform: translateY(-2px);
}

/* ============================================================
   "APPLICATION" header button — filled green & prominent
   (was a faint outline tucked in the corner).
   ============================================================ */
.ast-custom-button-link .ast-button,
.ast-custom-button .ast-button {
  background: linear-gradient(135deg, #5fc063, var(--pp-green)) !important;
  color: #fff !important;
  border: 0 !important;
  padding: 13px 30px !important;
  border-radius: 999px !important;
  font-family: "Poppins", sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  box-shadow: 0 8px 20px rgba(86, 178, 89, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.ast-custom-button-link:hover .ast-button,
.ast-custom-button-link:focus .ast-button {
  filter: brightness(1.05);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(86, 178, 89, 0.55);
}

/* ============================================================
   Homepage header — fully transparent over the hero photo, with
   light, readable nav text. Removes the white header block.
   (Inner pages keep their normal light header + dark text.)
   ============================================================ */
/* ROBUST top fix (no margins — the theme blocks margin changes on the
   header). The PHOTO is painted on the page body itself, anchored to the
   viewport, so the entire top of the page IS the photo. The content area
   then gets a solid white background that sits on top of the body photo,
   and the hero keeps its own photo so it still shows through. */
html:has(body.home),
body.home {
  background: #122039
    url("wp-content/uploads/2020/08/20200515_123800-scaled.jpg") center top /
    cover no-repeat fixed !important;
}
body.home #masthead.site-header {
  position: relative !important;
  z-index: 99 !important;
  background: linear-gradient(rgba(15, 32, 60, 0.64), rgba(15, 32, 60, 0.64)),
    #122039 url("wp-content/uploads/2020/08/20200515_123800-scaled.jpg") center
      top / cover no-repeat fixed !important;
  box-shadow: none !important;
  border: 0 !important;
}
/* Content area sits on white, on top of the body photo. */
body.home #content {
  position: relative;
  z-index: 1;
  background: #ffffff !important;
}
body.home #masthead .main-header-bar-wrap,
body.home #masthead .main-header-bar,
body.home #masthead .ast-main-header-bar-alignment,
body.home #masthead .ast-above-header,
body.home #masthead .below-header-bar {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
/* Reset the wrapper chain so no white gap sits above the hero.
   (NOTE: #content keeps its negative margin from the rule above —
   do not reset #content's margin here.) */
body.home #content > .ast-container,
body.home #primary,
body.home #main,
body.home .ast-article-single,
body.home .ast-article-post,
body.home .entry-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
  background: transparent !important;
}
/* The empty (title-less) entry header reserved blank space — remove it */
body.home .entry-header.ast-no-title,
body.home .entry-header.ast-header-without-markup {
  display: none !important;
}
body.home .pp-hero {
  margin-top: 0 !important;
}
/* Nav links readable (white) over the photo */
body.home #masthead .main-header-menu .menu-link,
body.home #masthead .ast-builder-menu .menu-link,
body.home #masthead .main-header-bar-navigation a {
  color: #fff !important;
  font-weight: 600;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}
body.home #masthead .main-header-menu .menu-link:hover {
  color: #c4eec6 !important;
}
/* Inner pages have a light header (no photo) — nav must be DARK to be
   visible (the theme defaults to white for the transparent header). */
body:not(.home) #masthead .main-header-menu .menu-link,
body:not(.home) #masthead .ast-builder-menu .menu-link,
body:not(.home) #masthead .main-header-bar-navigation a {
  color: var(--pp-dark) !important;
  text-shadow: none !important;
}
body:not(.home) #masthead .main-header-menu .menu-link:hover {
  color: var(--pp-green) !important;
}

/* ============================================================
   Modern nav tabs — uppercase, letter-spaced, with an animated
   green underline on hover / current page.
   ============================================================ */
#masthead .main-header-menu .menu-link {
  position: relative;
  font-family: "Poppins", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.84rem;
  font-weight: 600;
}
#masthead .main-header-menu > .menu-item > .menu-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  width: 0;
  margin: 0 auto;
  background: var(--pp-green);
  border-radius: 2px;
  transition: width 0.25s ease;
}
#masthead .main-header-menu > .menu-item > .menu-link:hover::after,
#masthead .main-header-menu > .menu-item.current-menu-item > .menu-link::after {
  width: 100%;
}

/* ============================================================
   Modern type scale — the theme's headings were oversized, which
   made content read like a spreadsheet of giant rows.
   ============================================================ */
.entry-content :where(h1) {
  font-size: clamp(2rem, 4.6vw, 3rem);
  line-height: 1.12;
}
.entry-content :where(h2) {
  font-size: clamp(1.55rem, 3.2vw, 2.15rem);
  line-height: 1.2;
  margin-top: 1.2em;
}
.entry-content :where(h3) {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.3;
}

/* ============================================================
   Chip / badge grids — replaces the long stacked single-line
   headings (location, amenities, features) with a tidy, modern
   wrapped grid of pills.
   ============================================================ */
.pp-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 12px;
  max-width: 1080px;
  margin: 16px auto 34px;
  padding: 0 24px;
}
.pp-chip {
  display: inline-flex;
  align-items: center;
  background: rgba(86, 178, 89, 0.1);
  color: #1f5d28;
  border: 1px solid rgba(86, 178, 89, 0.35);
  border-radius: 999px;
  padding: 10px 20px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 0.97rem;
  line-height: 1.2;
}
.pp-chip::before {
  content: "✓";
  color: var(--pp-green);
  font-weight: 800;
  margin-right: 8px;
}
.pp-chip:hover {
  background: rgba(86, 178, 89, 0.18);
  transform: translateY(-2px);
}
.pp-chips-label {
  text-align: left;
  max-width: 1080px;
  margin: 6px auto 2px;
  padding: 0 24px;
}

/* ============================================================
   Prince Apartments photo gallery
   ============================================================ */
.pp-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 1080px;
  margin: 18px auto 36px;
  padding: 0 24px;
}
.pp-gallery a {
  display: block;
  overflow: hidden;
  border-radius: 10px;
}
.pp-gallery img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  margin: 0;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(24, 30, 25, 0.12);
}
.pp-gallery a:hover img {
  transform: scale(1.04);
}
@media (max-width: 768px) {
  .pp-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  .pp-gallery img {
    height: 180px;
  }
}

/* ============================================================
   Content bullet lists -> centered green checkmark lists
   (excludes the chip grids and any nav lists).
   ============================================================ */
.entry-content ul:not(.pp-chips) {
  list-style: none;
  max-width: 1080px;
  margin: 6px auto 26px;
  padding: 0 24px;
  text-align: left;
  display: block;
}
.entry-content ul:not(.pp-chips) li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
  line-height: 1.5;
}
.entry-content ul:not(.pp-chips) li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--pp-green);
  font-weight: 800;
}

/* 3) Keep photos prominent and add vertical rhythm around them */
.entry-content > figure,
.entry-content > .wp-block-image,
.entry-content > .wp-block-cover {
  margin-top: 2.6em;
  margin-bottom: 2.6em;
}

/* Breathing room before the footer */
.entry-content {
  padding-bottom: 80px;
}

@media (max-width: 768px) {
  .ast-page-builder-template #primary,
  .ast-page-builder-template .site .site-content #primary {
    padding-top: 88px !important;
  }
  .entry-content > h1,
  .entry-content > h2,
  .entry-content > h3,
  .entry-content > p {
    padding-left: 18px;
    padding-right: 18px;
  }
}







/* ============================================================
   Scroll-down arrow next to "Let's Find Your New Home"
   ============================================================ */
.pp-scroll-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-left: 14px;
  border-radius: 50%;
  background: var(--pp-green);
  color: #fff !important;
  font-size: 1.25rem;
  line-height: 1;
  text-decoration: none !important;
  vertical-align: middle;
  box-shadow: 0 6px 16px rgba(86, 178, 89, 0.4);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  animation: pp-bounce 1.8s ease-in-out infinite;
}
.pp-scroll-arrow:hover {
  background: var(--pp-green-dark);
  transform: scale(1.1);
  box-shadow: 0 10px 22px rgba(86, 178, 89, 0.5);
  animation-play-state: paused;
}
@keyframes pp-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}
#roger-plaza {
  scroll-margin-top: 40px;
}

/* ============================================================
   Modern Properties dropdown (sub-menu) — white rounded card,
   soft shadow, padded items with a green hover.
   ============================================================ */
#masthead .main-header-menu .sub-menu {
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 44px rgba(18, 32, 58, 0.22) !important;
  padding: 8px !important;
  min-width: 250px !important;
}
#masthead .main-header-menu .sub-menu .menu-item {
  border: 0 !important;
}
#masthead .main-header-menu .menu-item .sub-menu .menu-link {
  color: var(--pp-dark) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  padding: 11px 16px !important;
  border-radius: 8px !important;
  text-shadow: none !important;
  transition: background 0.18s ease, color 0.18s ease, padding-left 0.18s ease;
}
#masthead .main-header-menu .menu-item .sub-menu .menu-link:hover {
  background: rgba(86, 178, 89, 0.12) !important;
  color: var(--pp-green-dark) !important;
  padding-left: 20px !important;
}
#masthead .main-header-menu .menu-item .sub-menu .menu-link::after {
  display: none !important;
}




/* ============================================================
   Homepage "Our Properties" — two small side-by-side cards so
   both options are visible at once when you click the arrow.
   ============================================================ */
.pp-properties {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
  max-width: 1000px;
  margin: 22px auto 6px;
  padding: 0 24px;
  scroll-margin-top: 90px;
}
.pp-prop-card {
  display: block;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(18, 32, 58, 0.12);
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pp-prop-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(18, 32, 58, 0.2);
}
.pp-prop-card img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  display: block;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: transform 0.3s ease;
}
.pp-prop-card:hover img {
  transform: scale(1.05);
}
.pp-prop-name {
  display: block;
  text-align: center;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--pp-dark);
  padding: 16px 12px;
}
.pp-prop-card:hover .pp-prop-name {
  color: var(--pp-green-dark);
}
.pp-properties-cta {
  text-align: center;
  margin-top: 18px;
}
@media (max-width: 768px) {
  .pp-properties {
    grid-template-columns: 1fr;
  }
  .pp-prop-card img {
    height: 200px;
  }
}

/* ============================================================
   "Call Today" sticker — tilted badge beside the hero title.
   ============================================================ */
.pp-hero__inner {
  position: relative;
}
.pp-call-sticker {
  position: absolute;
  top: -6px;
  right: -138px;
  transform: rotate(7deg);
  display: inline-block;
  background: var(--pp-green);
  color: #fff !important;
  text-decoration: none !important;
  padding: 12px 20px;
  border-radius: 14px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  text-align: center;
  line-height: 1.1;
  z-index: 4;
  transition: box-shadow 0.2s ease;
  animation: pp-call-pulse 1.5s ease-in-out infinite;
}
.pp-call-sticker:hover {
  animation-play-state: paused;
  transform: rotate(7deg) scale(1.12);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
}
@keyframes pp-call-pulse {
  0%, 100% { transform: rotate(7deg) scale(1); }
  50% { transform: rotate(7deg) scale(1.09); }
}
.pp-call-sticker__top {
  display: block;
  font-family: "Poppins", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.7rem;
  font-weight: 700;
}
.pp-call-sticker__num {
  display: block;
  font-family: "Poppins", sans-serif;
  font-size: 1.18rem;
  font-weight: 800;
  margin-top: 3px;
}
@media (max-width: 900px) {
  .pp-call-sticker {
    position: static;
    transform: rotate(5deg);
    margin: 16px auto 0;
  }
}

/* ============================================================
   Centered properties section — cards sit in the middle of the
   screen with white space above and below; a down-arrow at the
   bottom leads to the "Our Story" section.
   ============================================================ */
.pp-section-center {
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  scroll-margin-top: 0;
}
.pp-section-center .pp-properties {
  width: 100%;
  margin: 0 auto;
}
.pp-section-center .pp-properties-cta {
  margin-top: 22px;
}
/* Standalone centered down-arrow (second arrow) */
.pp-scroll-down {
  margin: 40px auto 0;
}
#our-story {
  scroll-margin-top: 40px;
}


/* ============================================================
   Bottom-half of the homepage — Our Story + What We Do cards
   ============================================================ */
.pp-story {
  max-width: 780px;
  margin: 0 auto;
  padding: 64px 24px 52px;
  text-align: center;
}
.pp-story h6,
.pp-whatwedo h6 {
  text-align: center;
  margin-bottom: 10px;
}
.pp-story h2,
.pp-whatwedo h2 {
  text-align: center;
  margin: 0 auto 16px;
}
.pp-story p {
  color: var(--pp-muted);
  font-size: 1.08rem;
}
.pp-center-cta {
  text-align: center;
  margin-top: 26px;
}

.pp-whatwedo {
  background: #f4f7f5;
  padding: 72px 24px 84px;
}
.pp-section-intro {
  max-width: 640px;
  margin: 0 auto 38px;
  text-align: center;
  color: var(--pp-muted);
  font-size: 1.08rem;
}
.pp-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  max-width: 1040px;
  margin: 0 auto;
}
.pp-feature {
  background: #fff;
  border: 1px solid #e9efea;
  border-radius: 16px;
  padding: 38px 28px;
  text-align: center;
  box-shadow: 0 8px 26px rgba(18, 32, 58, 0.07);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pp-feature:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(18, 32, 58, 0.14);
}
.pp-feature__icon {
  width: 66px;
  height: 66px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(86, 178, 89, 0.12);
  color: var(--pp-green-dark);
}
.pp-feature__icon svg {
  width: 30px;
  height: 30px;
}
.pp-feature h3 {
  font-family: "Poppins", sans-serif;
  font-size: 1.25rem;
  margin: 0 0 10px;
  color: var(--pp-dark);
}
.pp-feature p {
  color: var(--pp-muted);
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
}
@media (max-width: 768px) {
  .pp-features {
    grid-template-columns: 1fr;
  }
}

/* Solid green pill CTAs (About Us / Our Services / View All Properties) */
.entry-content a[role="button"] {
  display: inline-block;
  background: var(--pp-green);
  color: #fff !important;
  padding: 13px 30px;
  border-radius: 999px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none !important;
  line-height: 1.2;
}
.entry-content a[role="button"]:hover {
  background: var(--pp-green-dark);
  transform: translateY(-2px);
}

/* ============================================================
   Modern footer
   ============================================================ */
.pp-footer.site-footer {
  background: #122039 !important;
  color: rgba(255, 255, 255, 0.75);
}
.pp-footer__inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 58px 24px 38px;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.5fr;
  gap: 40px;
}
.pp-footer__logo {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  color: #fff;
  margin-bottom: 14px;
}
.pp-footer__logo span {
  color: var(--pp-green);
}
.pp-footer__brand p {
  font-size: 0.95rem;
  line-height: 1.7;
  max-width: 330px;
  margin: 0;
}
.pp-footer__col h4 {
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  margin: 0 0 16px;
}
.pp-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pp-footer__col li {
  margin-bottom: 11px;
  line-height: 1.45;
}
.pp-footer__col a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color 0.18s ease;
}
.pp-footer__col a:hover {
  color: var(--pp-green);
}
.pp-footer__bar {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
  padding: 20px 24px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
}
@media (max-width: 900px) {
  .pp-footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
}
@media (max-width: 560px) {
  .pp-footer__inner {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   Roger Plaza detail page (page-id-730): photo hero with the
   header overlaid (matches the homepage treatment).
   ============================================================ */
body.page-id-730 {
  background: #122039
    url("wp-content/uploads/2020/08/20200515_123800-scaled.jpg") center top /
    cover no-repeat fixed !important;
}
body.page-id-730 #masthead.site-header {
  background: linear-gradient(rgba(15, 32, 60, 0.55), rgba(15, 32, 60, 0.55)),
    #122039 url("wp-content/uploads/2020/08/20200515_123800-scaled.jpg") center
      top / cover no-repeat fixed !important;
  box-shadow: none !important;
  border: 0 !important;
}
body.page-id-730 #content {
  background: #ffffff !important;
}
body.page-id-730 #content #primary,
body.page-id-730 #content .ast-container #primary {
  padding-top: 0 !important;
}
body.page-id-730 #content > .ast-container,
body.page-id-730 #primary,
body.page-id-730 #main,
body.page-id-730 .ast-article-single,
body.page-id-730 .entry-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
body.page-id-730 .entry-header.ast-no-title,
body.page-id-730 .entry-header.ast-header-without-markup {
  display: none !important;
}
body.page-id-730 #masthead .main-header-menu .menu-link {
  color: #fff !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}
body.page-id-730 #masthead .main-header-menu .menu-link:hover {
  color: #c4eec6 !important;
}

.pp-subhero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 48vh;
  padding: 120px 24px 64px;
  background: linear-gradient(rgba(15, 32, 60, 0.5), rgba(15, 32, 60, 0.68)),
    #122039 url("wp-content/uploads/2020/08/20200515_123800-scaled.jpg") center
      top / cover no-repeat fixed;
}
.pp-subhero__inner {
  position: relative;
  z-index: 1;
  max-width: 820px;
  color: #fff;
}
.pp-subhero__inner h1 {
  color: #fff !important;
  font-family: "Poppins", sans-serif;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  margin: 0 0 12px;
}
.pp-subhero__inner p {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.15rem;
  margin: 0;
}

/* Map embed */
.entry-content iframe {
  width: 100%;
  max-width: 1080px;
  height: 360px;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(18, 32, 58, 0.14);
  display: block;
  margin: 8px auto 12px;
}

/* Tall gallery cells for portrait interior photos */
.pp-gallery--tall img {
  height: 300px;
}

/* CTA section */
.pp-cta {
  text-align: center;
  background: #f4f7f5;
  padding: 66px 24px 72px;
  margin-top: 34px;
}
.pp-cta h2 {
  text-align: center;
  margin: 0 auto 12px;
}
.pp-cta p {
  max-width: 560px;
  margin: 0 auto 26px;
  color: var(--pp-muted);
  font-size: 1.08rem;
}
.pp-cta__btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.pp-cta__btn {
  display: inline-block;
  background: var(--pp-green);
  color: #fff !important;
  padding: 14px 32px;
  border-radius: 999px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  text-decoration: none !important;
  border: 2px solid var(--pp-green);
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.pp-cta__btn:hover {
  background: var(--pp-green-dark);
  border-color: var(--pp-green-dark);
  transform: translateY(-2px);
}
.pp-cta__btn--ghost {
  background: transparent;
  color: var(--pp-green-dark) !important;
}
.pp-cta__btn--ghost:hover {
  background: var(--pp-green);
  color: #fff !important;
}


/* ============================================================
   Prince Apartments detail page: its own photo hero + header
   ============================================================ */
body.pp-prince-page {
  background: #122039
    url("wp-content/uploads/2020/12/20200410_174238-1536x1152.jpg") center top /
    cover no-repeat fixed !important;
}
body.pp-prince-page #masthead.site-header {
  background: linear-gradient(rgba(15, 32, 60, 0.55), rgba(15, 32, 60, 0.55)),
    #122039 url("wp-content/uploads/2020/12/20200410_174238-1536x1152.jpg")
      center top / cover no-repeat fixed !important;
  box-shadow: none !important;
  border: 0 !important;
}
body.pp-prince-page #content {
  background: #ffffff !important;
}
body.pp-prince-page #content #primary,
body.pp-prince-page #content .ast-container #primary {
  padding-top: 0 !important;
}
body.pp-prince-page #content > .ast-container,
body.pp-prince-page #primary,
body.pp-prince-page #main,
body.pp-prince-page .ast-article-single,
body.pp-prince-page .entry-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
body.pp-prince-page .entry-header.ast-no-title,
body.pp-prince-page .entry-header.ast-header-without-markup {
  display: none !important;
}
body.pp-prince-page #masthead .main-header-menu .menu-link {
  color: #fff !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}
body.pp-prince-page #masthead .main-header-menu .menu-link:hover {
  color: #c4eec6 !important;
}
body.pp-prince-page .pp-subhero {
  background: linear-gradient(rgba(15, 32, 60, 0.5), rgba(15, 32, 60, 0.68)),
    #122039 url("wp-content/uploads/2020/12/20200410_174238-1536x1152.jpg")
      center top / cover no-repeat fixed;
}

/* ============================================================
   Shared photo-hero treatment for inner pages (About/Contact/
   Properties) — transparent header over a photo, white content.
   ============================================================ */
body.pp-photohero #content {
  background: #ffffff !important;
}
body.pp-photohero #content #primary,
body.pp-photohero #content .ast-container #primary {
  padding-top: 0 !important;
}
body.pp-photohero #content > .ast-container,
body.pp-photohero #primary,
body.pp-photohero #main,
body.pp-photohero .ast-article-single,
body.pp-photohero .entry-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
body.pp-photohero .entry-header.ast-no-title,
body.pp-photohero .entry-header.ast-header-without-markup {
  display: none !important;
}
body.pp-photohero #masthead.site-header {
  box-shadow: none !important;
  border: 0 !important;
}
body.pp-photohero #masthead .main-header-menu .menu-link {
  color: #fff !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}
body.pp-photohero #masthead .main-header-menu .menu-link:hover {
  color: #c4eec6 !important;
}

/* Per-page hero photos: About + Properties use the Roger exterior */
body.page-id-92,
body.page-id-119 {
  background: #122039
    url("wp-content/uploads/2020/08/20200515_123800-scaled.jpg") center top /
    cover no-repeat fixed !important;
}
body.page-id-92 #masthead.site-header,
body.page-id-119 #masthead.site-header {
  background: linear-gradient(rgba(15, 32, 60, 0.55), rgba(15, 32, 60, 0.55)),
    #122039 url("wp-content/uploads/2020/08/20200515_123800-scaled.jpg") center
      top / cover no-repeat fixed !important;
}
/* Contact uses the Prince exterior */
body.page-id-145 {
  background: #122039
    url("wp-content/uploads/2020/12/20200410_174238-1536x1152.jpg") center top /
    cover no-repeat fixed !important;
}
body.page-id-145 #masthead.site-header {
  background: linear-gradient(rgba(15, 32, 60, 0.55), rgba(15, 32, 60, 0.55)),
    #122039 url("wp-content/uploads/2020/12/20200410_174238-1536x1152.jpg")
      center top / cover no-repeat fixed !important;
}
body.page-id-145 .pp-subhero {
  background: linear-gradient(rgba(15, 32, 60, 0.5), rgba(15, 32, 60, 0.68)),
    #122039 url("wp-content/uploads/2020/12/20200410_174238-1536x1152.jpg")
      center top / cover no-repeat fixed;
}

/* ===== About: stats band ===== */
.pp-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--pp-green);
  color: #fff;
  text-align: center;
}
.pp-stat {
  padding: 36px 16px;
}
.pp-stat + .pp-stat {
  border-left: 1px solid rgba(255, 255, 255, 0.25);
}
.pp-stat__num {
  display: block;
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  line-height: 1;
}
.pp-stat__label {
  display: block;
  margin-top: 8px;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.92;
}
@media (max-width: 768px) {
  .pp-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .pp-stat:nth-child(3) {
    border-left: 0;
  }
}

/* ===== Contact: info cards ===== */
.pp-contact-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1000px;
  margin: 24px auto 40px;
  padding: 0 24px;
}
.pp-contact-card {
  background: #fff;
  border: 1px solid #e9efea;
  border-radius: 16px;
  padding: 36px 24px;
  text-align: center;
  box-shadow: 0 8px 26px rgba(18, 32, 58, 0.07);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pp-contact-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 38px rgba(18, 32, 58, 0.13);
}
.pp-contact-card .pp-feature__icon {
  margin: 0 auto 16px;
}
.pp-contact-card h4 {
  font-family: "Poppins", sans-serif;
  margin: 0 0 8px;
  color: var(--pp-dark);
  font-size: 1.1rem;
}
.pp-contact-card p {
  margin: 0;
  color: var(--pp-muted);
  line-height: 1.6;
}
.pp-contact-card a {
  color: var(--pp-green-dark);
  text-decoration: none;
}
.pp-contact-card a:hover {
  color: var(--pp-green);
}
@media (max-width: 768px) {
  .pp-contact-cards {
    grid-template-columns: 1fr;
  }
}