:root {
  --pmcore-color-primary: #1CA9C9;
  --pmcore-color-secondary: #2E9E5B;
  --pmcore-color-background: #FFF8ED;
  --pmcore-color-accent: #FF7F66;
  --pmcore-color-text: #22333B;
  --pmcore-color-text-muted: #5C6E68;
  --pmcore-color-surface: #FFFFFF;
  --pmcore-color-border: #F0E2C4;

  /* Inter carries headings; Quicksand is kept for the wordmark only. See
     docs/branding/brand-guide.md (changed 2026-08-13). */
  --pmcore-font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pmcore-font-body: 'Nunito', sans-serif;
  --pmcore-font-brand: 'Quicksand', sans-serif;

  --pmcore-radius: 8px;
  --pmcore-radius-sm: 6px;
}

/* Mobile-first: unprefixed rules below are the small-screen baseline.
   Larger-screen refinements live in the min-width media query at the bottom. */

.pmcore {
  font-family: var(--pmcore-font-body);
  color: var(--pmcore-color-text);
}

.pmcore-heading {
  font-family: var(--pmcore-font-heading);
  font-weight: 700;
  color: var(--pmcore-color-primary);
  margin: 0 0 0.5rem;
  line-height: 1.2;
}

h1.pmcore-heading {
  font-size: 1.75rem;
}

h2.pmcore-heading {
  font-size: 1.4rem;
}

h3.pmcore-heading {
  font-size: 1.15rem;
}

.pmcore-button,
.pmcore-button-secondary {
  display: inline-block;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}

.pmcore-button {
  background: var(--pmcore-color-accent);
  color: #FFFFFF;
  font-family: var(--pmcore-font-body);
  font-weight: 600;
  padding: 0.75rem 1.4rem;
  border-radius: var(--pmcore-radius-sm);
  border: none;
  cursor: pointer;
  text-decoration: none;
}

.pmcore-button:hover {
  filter: brightness(0.92);
}

.pmcore-button-secondary {
  background: transparent;
  color: var(--pmcore-color-primary);
  border: 2px solid var(--pmcore-color-primary);
  padding: 0.65rem 1.4rem;
}

.pmcore-card {
  background: var(--pmcore-color-surface);
  border: 1px solid var(--pmcore-color-border);
  border-top: 4px solid var(--pmcore-color-secondary);
  border-radius: var(--pmcore-radius);
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.pmcore-login-pills {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.pmcore-pill {
  display: inline-block;
  padding: 0.45rem 1.2rem;
  border-radius: 999px;
  border: 2px solid var(--pmcore-color-primary);
  color: var(--pmcore-color-primary);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}

.pmcore-pill-active {
  background: var(--pmcore-color-primary);
  color: #FFFFFF;
}

.pmcore-login-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.pmcore-login-column .pmcore-pill {
  margin-bottom: 0.5rem;
  cursor: default;
}

.pmcore-owner-tenant-login {
  position: relative;
  overflow: hidden;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.pmcore-owner-tenant-login .pmcore-login-scene {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 0;
  pointer-events: none;
}

.pmcore-owner-tenant-login .pmcore-login-scene svg {
  display: block;
  width: 100%;
  height: auto;
}

.pmcore-owner-tenant-login .pmcore-scene-sun {
  transform-box: fill-box;
  transform-origin: center;
  animation: pmcore-sun-pulse 6s ease-in-out infinite;
}

.pmcore-owner-tenant-login .pmcore-scene-gull {
  transform-box: fill-box;
  transform-origin: center;
  animation: pmcore-gull-fly 7s ease-in-out infinite;
}

.pmcore-owner-tenant-login .pmcore-scene-gull-2 { animation-duration: 8s; animation-delay: -1.5s; }
.pmcore-owner-tenant-login .pmcore-scene-gull-3 { animation-duration: 6.5s; animation-delay: -3s; }
.pmcore-owner-tenant-login .pmcore-scene-gull-4 { animation-duration: 9s; animation-delay: -4.5s; }

@keyframes pmcore-sun-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.85; }
}

@keyframes pmcore-gull-fly {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(18px, -10px); }
  50% { transform: translate(38px, 0); }
  75% { transform: translate(18px, -6px); }
}

@media (prefers-reduced-motion: reduce) {
  .pmcore-owner-tenant-login .pmcore-scene-sun,
  .pmcore-owner-tenant-login .pmcore-scene-gull {
    animation: none;
  }
}

.pmcore-owner-tenant-login-content {
  position: relative;
  z-index: 1;
  max-width: 480px;
}

.pmcore-badge-warning {
  background: rgba(255, 127, 102, 0.12);
  border-left: 3px solid var(--pmcore-color-accent);
  color: var(--pmcore-color-text);
  font-weight: 600;
  padding: 0.6rem 0.8rem;
  border-radius: var(--pmcore-radius-sm);
  margin: 0.75rem 0 0;
}

.pmcore-address-suggestions {
  position: absolute;
  z-index: 10;
  width: 100%;
  max-width: 420px;
  background: var(--pmcore-color-surface);
  border: 1px solid var(--pmcore-color-border);
  border-radius: var(--pmcore-radius-sm);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  max-height: 220px;
  overflow-y: auto;
}

.pmcore-address-suggestion {
  padding: 0.5rem 0.7rem;
  font-size: 0.85rem;
  cursor: pointer;
}

.pmcore-address-suggestion:hover {
  background: var(--pmcore-color-background);
}

.pmcore-input,
.pmcore-select,
.pmcore-textarea {
  font-family: var(--pmcore-font-body);
  font-size: 1rem;
  border: 1px solid var(--pmcore-color-border);
  border-radius: var(--pmcore-radius-sm);
  padding: 0.7rem 0.8rem;
  width: 100%;
  box-sizing: border-box;
}

.pmcore-section {
  background: var(--pmcore-color-surface);
  padding: 2rem 1.25rem;
}

.pmcore-section-accent {
  background: var(--pmcore-color-background);
}

.pmcore-hero-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--pmcore-radius);
  margin-bottom: 1.5rem;
}

.pmcore-listing-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.pmcore-listing-filters .pmcore-input,
.pmcore-listing-filters .pmcore-select {
  width: auto;
  flex: 1 1 160px;
}

.pmcore-listing-filters .pmcore-button {
  flex: 0 0 auto;
}

.pmcore-listing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.pmcore-listing-card {
  margin-bottom: 0;
}

.pmcore-listing-scroll-section {
  overflow: hidden;
}

.pmcore-listing-scroll {
  overflow: hidden;
  width: 100%;
}

.pmcore-listing-scroll-track {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  animation: pmcore-listing-scroll-move 30s linear infinite;
}

.pmcore-listing-scroll:hover .pmcore-listing-scroll-track {
  animation-play-state: paused;
}

.pmcore-listing-scroll-track .pmcore-listing-card {
  flex: 0 0 260px;
  width: 260px;
}

.pmcore-listing-scroll-duplicate {
  display: contents;
}

@keyframes pmcore-listing-scroll-move {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .pmcore-listing-scroll-track {
    animation: none;
    flex-wrap: wrap;
    width: 100%;
  }

  .pmcore-listing-scroll-duplicate {
    display: none;
  }

  .pmcore-listing-scroll {
    overflow-x: auto;
  }
}

.pmcore-listing-card-gallery {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  margin-bottom: 0.75rem;
}

.pmcore-listing-card-thumb {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--pmcore-radius-sm);
  display: block;
}

.pmcore-listing-card-image {
  width: 100%;
  height: auto;
  border-radius: var(--pmcore-radius-sm);
  margin-bottom: 0.75rem;
  display: block;
}

/* Tablet and up */
@media (min-width: 768px) {
  h1.pmcore-heading {
    font-size: 2.5rem;
  }

  h2.pmcore-heading {
    font-size: 1.9rem;
  }

  h3.pmcore-heading {
    font-size: 1.3rem;
  }

  .pmcore-button,
  .pmcore-button-secondary {
    width: auto;
  }

  .pmcore-card {
    padding: 1.5rem;
  }

  .pmcore-section {
    padding: 3rem 1.5rem;
  }

  .pmcore-listing-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }

  .pmcore-login-columns {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==========================================================================
   Marketplace layer (2026-08-13)
   --------------------------------------------------------------------------
   The public site read as a blog post: one narrow text column, no imagery, no
   cards, and headings in #1CA9C9 on #FFF8ED — about 2.5:1, which fails WCAG AA
   outright. Everything below reshapes the marketing pages into a listings
   marketplace and fixes the contrast without abandoning the Palm & Surf
   palette the client chose.
   ========================================================================== */

:root {
  /* Same hue as --pmcore-color-primary, darkened until it passes AA on both
     the sand and white backgrounds. The bright original stays for fills,
     badges, and borders where contrast rules do not apply. */
  --pmcore-color-primary-deep: #0B6E85;
  --pmcore-color-ink: #0B2B3C;
  --pmcore-shadow-card: 0 1px 2px rgba(11, 43, 60, .08), 0 8px 24px rgba(11, 43, 60, .08);
  --pmcore-shadow-card-hover: 0 2px 4px rgba(11, 43, 60, .10), 0 16px 40px rgba(11, 43, 60, .14);
  --pmcore-radius-lg: 14px;
}

.pmcore-heading,
.wp-block-heading {
  font-family: var(--pmcore-font-heading);
  letter-spacing: -0.018em;
}

/* Headings carry the deep tone; the bright aqua is reserved for accents. */
.pmcore-heading,
.entry-content .wp-block-heading {
  color: var(--pmcore-color-ink);
  font-weight: 700;
}

.entry-content h2.wp-block-heading {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
  margin-top: 2.75rem;
  margin-bottom: 0.75rem;
}

.entry-content h3.wp-block-heading {
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.2rem);
  color: var(--pmcore-color-primary-deep);
  margin-top: 1.75rem;
  margin-bottom: 0.35rem;
}

.entry-content p {
  line-height: 1.7;
}

/* --- Hero ---------------------------------------------------------------- */

.pmcore-hero {
  position: relative;
  margin-bottom: 3rem;
  padding: clamp(3rem, 2rem + 8vw, 6.5rem) 1.5rem;
  border-radius: var(--pmcore-radius-lg);
  /* A dark scrim always sits on top so the headline stays legible; beneath it
     is the configured hero photo, or the brand gradient when none is set.
     HeroStyle supplies --pmcore-hero-photo, so this rule consumes the value
     rather than competing with it and load order stops mattering. */
  background-color: #0B2B3C;
  background-image:
    linear-gradient(180deg, rgba(11, 43, 60, .72) 0%, rgba(11, 43, 60, .5) 55%, rgba(11, 43, 60, .8) 100%),
    var(--pmcore-hero-photo, linear-gradient(150deg, #0B2B3C 0%, #12556B 45%, #1CA9C9 100%));
  background-size: cover;
  background-position: center;
  text-align: center;
  overflow: hidden;
}

.pmcore-hero .wp-block-heading,
.pmcore-hero h1 {
  color: #fff;
  font-size: clamp(2rem, 1.3rem + 3.2vw, 3.4rem);
  font-weight: 800;
  line-height: 1.08;
  max-width: 18ch;
  margin: 0 auto 1rem;
}

.pmcore-hero p {
  color: rgba(255, 255, 255, .92);
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.18rem);
  line-height: 1.6;
  max-width: 62ch;
  margin: 0 auto 2rem;
}

.pmcore-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.pmcore-hero-actions .wp-block-button__link {
  border-radius: 999px;
  padding: 0.85rem 1.6rem;
  font-family: var(--pmcore-font-heading);
  font-weight: 600;
  font-size: 1rem;
}

.pmcore-hero-actions .pmcore-button .wp-block-button__link {
  background: var(--pmcore-color-accent);
  color: #fff;
}

.pmcore-hero-actions .pmcore-button-secondary .wp-block-button__link {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .8);
}

.pmcore-hero-actions .wp-block-button__link:hover {
  transform: translateY(-1px);
}

/* --- Listing cards ------------------------------------------------------- */

.pmcore-listing-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border-radius: var(--pmcore-radius-lg);
  background: var(--pmcore-color-surface);
  border: 1px solid rgba(11, 43, 60, .08);
  box-shadow: var(--pmcore-shadow-card);
  transition: box-shadow .18s ease, transform .18s ease;
}

.pmcore-listing-card:hover {
  box-shadow: var(--pmcore-shadow-card-hover);
  transform: translateY(-2px);
}

.pmcore-listing-card-media {
  position: relative;
  aspect-ratio: 3 / 2;
  background: linear-gradient(150deg, #12556B, #1CA9C9);
  overflow: hidden;
}

.pmcore-listing-card-media .pmcore-listing-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  border-radius: 0;
}

.pmcore-listing-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: rgba(255, 255, 255, .95);
  color: var(--pmcore-color-ink);
  font-family: var(--pmcore-font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
}

.pmcore-listing-card-body {
  padding: 1rem 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.pmcore-listing-price {
  font-family: var(--pmcore-font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--pmcore-color-ink);
  margin: 0 0 0.15rem;
  letter-spacing: -0.02em;
}

.pmcore-listing-price span {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--pmcore-color-text-muted);
}

.pmcore-listing-price-quiet {
  font-size: 1rem;
  font-weight: 600;
  color: var(--pmcore-color-text-muted);
}

.pmcore-listing-title {
  font-size: 1rem !important;
  margin: 0 0 0.15rem !important;
  color: var(--pmcore-color-ink) !important;
}

.pmcore-listing-address {
  color: var(--pmcore-color-text-muted);
  font-size: 0.9rem;
  margin: 0 0 0.6rem;
  line-height: 1.45;
}

.pmcore-listing-specs {
  font-size: 0.9rem;
  color: var(--pmcore-color-text);
  margin: 0 0 1rem;
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
}

.pmcore-listing-specs span {
  color: var(--pmcore-color-border);
}

.pmcore-listing-card-body .pmcore-button {
  margin-top: auto;
  align-self: flex-start;
  border-radius: 999px;
}

/* --- Grid and scroller --------------------------------------------------- */

.pmcore-listing-grid {
  gap: 1.5rem;
}

/* The scroller clipped its first and last cards mid-width, which read as a
   rendering fault rather than a carousel. Padding the track keeps whole cards
   on screen at both edges. */
.pmcore-listing-scroll {
  padding: 0.5rem 0 1.5rem;
}

.pmcore-listing-scroll-track {
  gap: 1.5rem;
  padding-inline: 1.5rem;
}

.pmcore-listing-scroll-track .pmcore-listing-card {
  flex: 0 0 300px;
  width: 300px;
}

@media (min-width: 768px) {
  .pmcore-listing-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

/* --- Footer -------------------------------------------------------------- */

.gbr-footer {
  font-family: var(--pmcore-font-body);
}

.gbr-footer a {
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
}

.gbr-footer a:hover {
  color: #fff;
  text-decoration: underline;
}

.gbr-footer-brand {
  font-family: 'Quicksand', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.5rem;
}

.gbr-footer-tagline,
.gbr-footer-areas {
  color: rgba(255, 255, 255, .72);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
}

.gbr-footer-title {
  font-family: var(--pmcore-font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  margin: 0 0 0.75rem;
}

.gbr-footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 2;
  font-size: 0.92rem;
}

.gbr-footer-legal {
  margin: 2.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, .5);
}

@media (prefers-reduced-motion: reduce) {
  .pmcore-listing-card,
  .pmcore-hero-actions .wp-block-button__link {
    transition: none;
  }

  .pmcore-listing-card:hover,
  .pmcore-hero-actions .wp-block-button__link:hover {
    transform: none;
  }
}

/* --- Full-bleed breakout -------------------------------------------------
   The listings scroller lives inside the constrained content column, so its
   first and last cards were sliced in half by the column edge. Breaking it out
   to the viewport width lets whole cards run edge to edge, which is what makes
   a carousel read as deliberate rather than clipped. */

/* Full width comes from the theme's own alignfull handling, not a 100vw
   breakout: 100vw counts the scrollbar, so the page rendered ~98px wider than
   the viewport and every centred element sat visibly off-centre. */
.pmcore-listing-scroll-section {
  padding-block: 2rem;
  background: linear-gradient(180deg, #F4FAFC 0%, #EAF4F8 100%);
}

.pmcore-listing-scroll-section > .pmcore-heading {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* --- Header -------------------------------------------------------------- */

.gbr-header {
  background: var(--pmcore-color-surface);
  border-bottom: 1px solid rgba(11, 43, 60, .09);
  position: sticky;
  top: 0;
  z-index: 40;
}

.gbr-utility {
  background: var(--pmcore-color-ink);
  padding: 0.4rem 1.5rem;
}

.gbr-utility-inner {
  gap: 1.25rem;
  align-items: center;
}

.gbr-utility-links,
.gbr-utility .pmcore-phone-link {
  margin: 0;
  font-size: 0.85rem;
  font-family: var(--pmcore-font-heading);
}

/* The three role logins previously sat here as faint 12.8px text and read as
   removed — the client scanned the header and could not find them. They are
   now labelled and bordered so the area announces itself as a login zone. */
.gbr-utility-links {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.gbr-utility-label {
  color: rgba(255, 255, 255, .6);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-right: 0.15rem;
}

/* One colour per audience, not decoration: owner, tenant, and team are three
   different people arriving for three different reasons, and the colour is
   what makes the right pill findable at a glance on repeat visits.
   All three are filled and carry ink-coloured text — white on these fills
   measures between 2:1 and 3:1 and would fail AA at this size, whereas ink on
   them clears 5:1. */
.gbr-login-pill {
  text-decoration: none;
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1;
  padding: 0.38rem 0.8rem;
  border-radius: 999px;
  border: 1px solid transparent;
  color: var(--pmcore-color-ink);
  transition: filter .15s ease, transform .15s ease;
}

.gbr-login-owner {
  background: var(--pmcore-color-primary);
}

/* The palette's palm green lightened for this fill only: #2E9E5B against ink
   measures 4.3:1, just under the 4.5:1 floor for text this size. */
.gbr-login-tenant {
  background: #34B368;
}

.gbr-login-team {
  background: var(--pmcore-color-accent);
}

.gbr-login-pill:hover,
.gbr-login-pill:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-1px);
  color: var(--pmcore-color-ink);
}

@media (prefers-reduced-motion: reduce) {
  .gbr-login-pill {
    transition: none;
  }

  .gbr-login-pill:hover,
  .gbr-login-pill:focus-visible {
    transform: none;
  }
}

.gbr-utility .pmcore-phone-link {
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  margin-left: 0;
}

.gbr-utility .pmcore-phone-link:hover {
  text-decoration: underline;
}

.gbr-masthead {
  padding: 0.75rem 1rem;
}

.gbr-masthead-inner {
  gap: 0.75rem;
  align-items: center;
}

.gbr-wordmark a,
.gbr-wordmark {
  font-family: var(--pmcore-font-brand);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--pmcore-color-ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.gbr-nav-group {
  gap: 0.75rem;
  align-items: center;
}

.gbr-nav {
  margin: 0;
  font-family: var(--pmcore-font-heading);
  font-size: 0.9rem;
  font-weight: 500;
}

.gbr-nav a {
  color: var(--pmcore-color-text);
  text-decoration: none;
  margin-left: 0.9rem;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}

.gbr-nav a:first-child {
  margin-left: 0;
}

.gbr-nav a:hover {
  color: var(--pmcore-color-primary-deep);
  border-bottom-color: var(--pmcore-color-primary-deep);
}

.gbr-header-cta .wp-block-button__link {
  background: var(--pmcore-color-accent);
  color: #fff;
  border-radius: 999px;
  font-family: var(--pmcore-font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.6rem 1.2rem;
}

/* Mobile-first, per the convention in docs/branding/brand-guide.md: the rules
   above are the small-screen baseline, and this block scales them up. */
@media (min-width: 768px) {
  .gbr-utility {
    padding-inline: 1.5rem;
  }

  .gbr-utility-links {
    gap: 0.5rem;
  }

  .gbr-masthead {
    padding: 0.9rem 1.5rem;
  }

  .gbr-masthead-inner {
    gap: 1.5rem;
  }

  .gbr-nav-group {
    gap: 1.5rem;
  }

  .gbr-nav {
    font-size: 0.95rem;
  }

  .gbr-nav a {
    margin-left: 1.5rem;
  }
}

/* --- Section rhythm ------------------------------------------------------
   The page ran as one uninterrupted cream column, so nothing separated a
   differentiator from a service area from a call to action. Alternating
   full-width bands give the eye somewhere to rest and make the page scan. */

.pmcore-hero {
  border-radius: 0;
  margin-bottom: 0;
  padding-block: clamp(4.5rem, 3rem + 10vw, 9rem);
}

.pmcore-hero .wp-block-heading,
.pmcore-hero h1 {
  font-size: clamp(2.2rem, 1.4rem + 3.8vw, 4rem);
  text-shadow: 0 2px 24px rgba(11, 43, 60, .35);
}

.pmcore-hero p {
  font-size: clamp(1.05rem, 1rem + 0.45vw, 1.3rem);
}

/* Hero search — mobile-first: stacks by default, becomes a single inline bar
   at the documented breakpoint. */

.pmcore-hero-search {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: rgba(255, 255, 255, .97);
  border-radius: var(--pmcore-radius-lg);
  padding: 0.6rem;
  margin: 0 auto 1.5rem;
  max-width: 780px;
  box-shadow: 0 10px 40px rgba(11, 43, 60, .28);
}

.pmcore-hero-search-field {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}

.pmcore-hero-search-input,
.pmcore-hero-search-select {
  width: 100%;
  border: none;
  background: transparent;
  font-family: var(--pmcore-font-body);
  font-size: 1rem;
  color: var(--pmcore-color-ink);
  padding: 0.7rem 0.75rem;
  border-radius: var(--pmcore-radius-sm);
  min-width: 0;
}

.pmcore-hero-search-input:focus,
.pmcore-hero-search-select:focus,
.pmcore-hero-search-submit:focus-visible {
  outline: 2px solid var(--pmcore-color-primary-deep);
  outline-offset: 1px;
}

.pmcore-hero-search-input::placeholder {
  color: var(--pmcore-color-text-muted);
}

.pmcore-hero-search-select {
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #5C6E68 50%), linear-gradient(135deg, #5C6E68 50%, transparent 50%);
  background-position: calc(100% - 16px) calc(50% + 1px), calc(100% - 11px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2rem;
}

.pmcore-hero-search-submit {
  background: var(--pmcore-color-accent);
  color: #fff;
  border: none;
  border-radius: var(--pmcore-radius-sm);
  padding: 0.8rem 1.5rem;
  font-family: var(--pmcore-font-heading);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  white-space: nowrap;
}

.pmcore-hero-search-submit:hover {
  filter: brightness(0.94);
}

/* Feature cards */

.pmcore-feature-grid {
  gap: 1rem !important;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

.pmcore-feature-card {
  height: 100%;
  background: var(--pmcore-color-surface);
  border: 1px solid rgba(11, 43, 60, .08);
  border-radius: var(--pmcore-radius-lg);
  padding: 1.25rem 1.15rem;
  box-shadow: var(--pmcore-shadow-card);
  transition: box-shadow .18s ease, transform .18s ease;
}

.pmcore-feature-card:hover {
  box-shadow: var(--pmcore-shadow-card-hover);
  transform: translateY(-3px);
}

.pmcore-eyebrow {
  font-family: var(--pmcore-font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pmcore-color-primary-deep);
  margin: 0 0 0.6rem !important;
}

.pmcore-feature-card .wp-block-heading {
  font-size: 1.15rem !important;
  color: var(--pmcore-color-ink) !important;
  margin: 0 0 0.5rem !important;
  line-height: 1.3;
}

.pmcore-feature-card p:not(.pmcore-eyebrow) {
  font-size: 0.95rem;
  color: var(--pmcore-color-text-muted);
  margin: 0;
  line-height: 1.65;
}

/* City band */

.pmcore-city-band {
  padding: 2.25rem 1.15rem;
  text-align: center;
}

.pmcore-city-band .wp-block-heading {
  margin-top: 0 !important;
}

.pmcore-city-band > p {
  color: var(--pmcore-color-text-muted);
  max-width: 58ch;
  margin-inline: auto;
}

.pmcore-city-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 1.75rem !important;
}

.pmcore-city-chips span {
  display: inline-block;
  background: var(--pmcore-color-surface);
  border: 1px solid rgba(11, 43, 60, .1);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-size: 0.88rem;
  font-family: var(--pmcore-font-heading);
  font-weight: 500;
  color: var(--pmcore-color-ink);
}

/* Closing call to action */

.pmcore-cta-band {
  background: linear-gradient(140deg, #0B2B3C 0%, #12556B 60%, #167E96 100%);
  padding: 2.75rem 1.15rem;
  text-align: center;
}

.pmcore-cta-band .wp-block-heading {
  color: #fff !important;
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem) !important;
  margin-top: 0 !important;
}

.pmcore-cta-band p {
  color: rgba(255, 255, 255, .88);
  max-width: 56ch;
  margin-inline: auto;
}

.pmcore-cta-band .wp-block-buttons {
  justify-content: center;
  margin-top: 1.75rem;
}

.pmcore-cta-band .wp-block-button__link {
  background: var(--pmcore-color-accent);
  color: #fff;
  border-radius: 999px;
  padding: 0.9rem 1.9rem;
  font-family: var(--pmcore-font-heading);
  font-weight: 600;
  font-size: 1.02rem;
}

/* Listings band heading sits with the cards, not adrift above them */

.pmcore-listing-scroll-section > .pmcore-heading {
  text-align: center;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
  margin-bottom: 1.75rem;
  padding-inline: 1.5rem;
}

/* Mobile-first scale-up for the marketplace sections. Everything above is the
   small-screen baseline; nothing here shrinks anything. */
@media (min-width: 768px) {
  .pmcore-feature-grid {
    gap: 1.5rem !important;
    margin-top: 2rem;
  }

  .pmcore-feature-card {
    padding: 1.6rem 1.4rem;
  }

  .pmcore-city-band {
    padding: 3.25rem 1.5rem;
  }

  .pmcore-cta-band {
    padding: 4rem 1.5rem;
  }

  .pmcore-listing-scroll-section {
    padding-block: 3rem;
  }
}

@media (min-width: 768px) {
  .pmcore-hero-search {
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.5rem 0.5rem 0.75rem;
  }

  .pmcore-hero-search-field {
    border-right: 1px solid rgba(11, 43, 60, .12);
  }

  .pmcore-hero-search-field-compact {
    flex: 0 0 auto;
  }

  .pmcore-hero-search-submit {
    border-radius: 999px;
    margin-left: 0.35rem;
  }
}

/* Inner-page heroes are shorter than the home page's — they orient rather than
   sell, and a full-height hero on every page would push the actual content of
   Services or About below the fold. */
.pmcore-hero-compact {
  padding-block: clamp(2.5rem, 2rem + 4vw, 4rem);
}

.pmcore-listing-filters-label {
  font-family: var(--pmcore-font-heading);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pmcore-color-text-muted);
  align-self: center;
}

/* --- Rental inquiry ------------------------------------------------------ */

/* Submission feedback. Previously unstyled, so the contact form's "Thanks!"
   read as an ordinary paragraph and was easy to miss above the fold. */
.pmcore-form-success,
.pmcore-form-error {
  border-radius: var(--pmcore-radius-sm);
  border-left: 4px solid currentColor;
  padding: 0.85rem 1rem;
  margin: 0 0 1.25rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

.pmcore-form-success {
  color: var(--pmcore-color-secondary);
  background: var(--pmcore-color-background);
}

.pmcore-form-error {
  color: #b3261e;
  background: #fdeceb;
}

.pmcore-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--pmcore-color-text-muted);
  margin-bottom: 0.35rem;
}

/* The listing the renter clicked, restated above the form. Stacked on small
   screens so the photo stays large enough to confirm the right property. */
.pmcore-inquiry-summary {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.pmcore-inquiry-summary-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--pmcore-radius-sm);
  object-fit: cover;
}

.pmcore-inquiry-summary-label {
  font-family: var(--pmcore-font-heading);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pmcore-color-text-muted);
  margin: 0 0 0.3rem;
}

.pmcore-inquiry-summary-title {
  font-size: 1.15rem !important;
  margin: 0 0 0.2rem !important;
  color: var(--pmcore-color-ink) !important;
}

.pmcore-inquiry-summary .pmcore-listing-specs {
  margin-bottom: 0;
}

.pmcore-inquiry-form p {
  margin: 0 0 1rem;
}

@media (min-width: 768px) {
  /* Wide enough for the photo to sit beside the details without either
     dropping below a usable size. */
  .pmcore-inquiry-summary {
    flex-direction: row;
    align-items: center;
  }

  .pmcore-inquiry-summary-image {
    flex: 0 0 240px;
    width: 240px;
  }

  .pmcore-inquiry {
    max-width: 720px;
    margin-inline: auto;
  }
}

/* --- Guides -------------------------------------------------------------- */

.pmcore-guide-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.pmcore-guide-card {
  display: flex;
  flex-direction: column;
}

.pmcore-guide-title {
  font-size: 1.1rem !important;
  margin: 0 0 0.6rem !important;
  color: var(--pmcore-color-ink) !important;
}

.pmcore-guide-summary {
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 1rem;
}

.pmcore-guide-contents-label {
  font-family: var(--pmcore-font-heading);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pmcore-color-text-muted);
  margin: 0 0 0.4rem;
}

.pmcore-guide-contents {
  margin: 0 0 1.25rem;
  padding-left: 1.1rem;
  font-size: 0.9rem;
  color: var(--pmcore-color-text-muted);
  line-height: 1.7;
}

/* Pushed to the bottom so cards of differing summary length still line their
   forms up across a row. */
.pmcore-guide-form {
  margin-top: auto;
  border-top: 1px solid var(--pmcore-color-border);
  padding-top: 1rem;
}

.pmcore-guide-form p {
  margin: 0 0 0.85rem;
}

.pmcore-label-optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

@media (min-width: 768px) {
  .pmcore-guide-grid {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .pmcore-guide-card {
    flex: 1 1 320px;
  }
}