/* v7 clean rebuild layer. This is intentionally separate from the recovered Muse CSS. */
:root {
  /* v47 — brand palette per client style spec.
     Gold #e3a72f, Grey #999999, Black #000000. The gold-soft / charcoal
     / white variants are kept as design helpers (hover states, body
     text on dark backgrounds) but every titled element now resolves
     to the three brand colors via var(--plm-gold) / var(--plm-muted). */
  --plm-black: #000000;
  --plm-gold: #e3a72f;             /* v47 — was var(--plm-gold) */
  --plm-gold-soft: #c99129;        /* v47 — recalibrated 15% darker than new gold for hover states */
  --plm-charcoal: #282828;
  --plm-white: #f4f4f4;
  --plm-grey: #999999;             /* v47 — brand grey */
  --plm-muted: var(--plm-grey);    /* legacy alias; resolves to #999999 */
  --plm-max: 1200px;

  /* v47 — brand typography per client style spec.
     Bebas Neue Bold for titles and menu (loaded from Google Fonts
     in functions.php). Arial for body. The Impact/Arial-Narrow
     fallback chain on titles matches the look closely enough that
     a brief FOUT before Bebas loads stays on-brand. */
  --plm-font-title: 'Bebas Neue', Impact, 'Arial Narrow Bold', 'Arial Narrow', sans-serif;
  --plm-font-body:  Arial, Helvetica, sans-serif;
}

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
html, body { margin: 0; min-height: 100%; background: var(--plm-black); color: var(--plm-white); }
/* v51 — overflow-x: hidden previously sat on the body to defend
   against horizontal scroll bleed from old Muse markup. After the
   v50 decruft and clean-rebuild templates that's no longer needed,
   and overflow-x: hidden establishes a scroll container that
   prevents position: sticky from working on .plm-header in some
   browsers (Safari especially). Removed so the header can stick. */
body.porchlight-clean { font-family: var(--plm-font-body); }
body.porchlight-clean a { color: inherit; }

/* Global rebuilt header: text/CSS menu matched to the original Muse visual style. */
.plm-header {
  background: #000;
  border-bottom: 4px solid var(--plm-gold);
}
/* v45 — Issue 10: header was visibly larger than the original. Reduced
   min-height, padding, logo width, nav font / spacing / padding to match
   the original's compact scale. ~15-20% reductions across the board. */
/* v56.2 → v56.3 — header layout iteration:
   v56.2 went too far left (auto/auto/1fr/auto with nav in col 2).
   v56.3 uses a 2-column grid (logo / nav) with nav centered in
   its 1fr column. Social icons return to absolute top-right
   positioning (matching the original Muse layout). The 1fr nav
   column has horizontal space on both sides of the menu items
   because the nav itself uses justify-content: center. */
.plm-header__inner {
  position: relative;
  width: min(100%, 1440px);
  min-height: 96px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 36px;
  padding: 12px 56px 12px;
}
.plm-logo {
  display: block;
  text-decoration: none !important;
  grid-column: 1;
}
.plm-logo img {
  display: block;
  width: 220px;
  height: auto;
}
.plm-nav {
  /* Sits in col 2 (1fr), centered within it. Social icons are
     absolute-positioned at top-right (outside this grid), so the
     1fr column extends almost to the right edge — the visible
     centering happens within that wider space. */
  grid-column: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
}
.plm-nav__link,
body.porchlight-clean .plm-nav__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;                          /* was 88 */
  min-height: 30px;                         /* was 34 */
  color: #f3f3f3;
  font-family: var(--plm-font-title);
  font-size: 15px;                          /* was 18 */
  font-weight: 400;
  line-height: 1;
  letter-spacing: .02em;                    /* was .035em — tighter */
  text-decoration: none !important;
  text-transform: uppercase;
  padding: 7px 14px 6px;                    /* was 9/18/8 */
  border: 0;
  background: transparent;
  text-shadow: 0 0 2px rgba(255,255,255,.35);
}
.plm-nav__link:visited,
body.porchlight-clean .plm-nav__link:visited {
  color: #f3f3f3;
  text-decoration: none !important;
}
.plm-nav__link:hover,
.plm-nav__link:focus,
.plm-nav__link.is-active,
body.porchlight-clean .plm-nav__link:hover,
body.porchlight-clean .plm-nav__link:focus,
body.porchlight-clean .plm-nav__link.is-active {
  color: var(--plm-gold);
  background: #2f2f2f;
  text-decoration: none !important;
  outline: none;
}
.plm-social {
  /* v56.3 — absolute top-right corner (matching the original
     Muse layout). Sits outside the 2-column grid flow so the
     nav can center in column 2 without being pushed by the
     icons. */
  position: absolute;
  top: 14px;
  right: 56px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 22px;
}
.plm-social a {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
}
.plm-social img {
  display: block;
  width: 24px;
  height: 24px;
  opacity: .62;
  filter: grayscale(1) brightness(1.7);
}
.plm-social a:hover img { opacity: .9; }

.plm-page {
  background: #000;
  min-height: 620px;
}
/* v56.1 → v56.2 — about hero is constrained-width (not full-bleed
   like the home hero). Tightened width 1000 → 880 in v56.2 per
   client direction so the hero's proportional height drops by ~60px
   and the ABOUT US heading + body copy push higher above the fold. */
.plm-about-hero {
  width: min(85%, 880px);
  margin: 0 auto;
  overflow: hidden;
}
.plm-about-hero__image {
  display: block;
  width: 100%;
  height: auto;
}
.plm-about-copy {
  width: min(100%, 980px);
  margin: 0 auto;
  /* v56.1 — pulled the top padding tighter (was 72) so the ABOUT US
     heading sits closer to the hero and lands above the fold along
     with the hero image. */
  padding: 40px 24px 88px;
  text-align: center;
}
.plm-page-title {
  margin: 0 0 48px;
  color: var(--plm-gold);
  font-family: var(--plm-font-title);
  font-size: clamp(44px, 5.2vw, 76px);
  line-height: .95;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 400;
}
.plm-about-copy__text {
  max-width: 900px;
  margin: 0 auto;
  color: #d7d7d7;
  font-size: 21px;
  line-height: 1.75;
  letter-spacing: .01em;
}
.plm-about-copy__text p { margin: 0 0 30px; }
.plm-about-logos {
  margin: 54px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 58px;
}
.plm-about-logos img:first-child { width: 144px; height: auto; }
.plm-about-logos img:last-child { width: 98px; height: auto; }

.plm-footer {
  background: #000;
  color: var(--plm-grey);
  text-align: center;
  padding: 64px 24px 78px;
}
.plm-footer__city {
  color: var(--plm-grey);
  font-family: var(--plm-font-title);
  font-size: 20px;
  letter-spacing: .48em;
  margin-bottom: 24px;
  text-transform: uppercase;
}
.plm-footer__copyright {
  color: var(--plm-grey);
  font-size: 13px;
  margin-bottom: 24px;
}
.plm-footer__credit {
  color: var(--plm-grey);
  font-family: var(--plm-font-title);
  font-size: 12px;
  letter-spacing: .24em;
  margin-bottom: 10px;
}
.plm-footer__design {
  display: block;
  width: 83px;
  height: auto;
  margin: 0 auto;
  opacity: .9;
}

@media (max-width: 1180px) {
  /* v56.2 — match the new auto/auto/1fr/auto layout from the
     desktop default; just tighten the inner spacing for narrower
     screens. */
  .plm-header__inner {
    grid-template-columns: auto auto 1fr auto;
    column-gap: 18px;
    padding-left: 28px;
    padding-right: 28px;
    min-height: 90px;
  }
  .plm-logo img { width: 195px; }
  .plm-nav { gap: 4px; }
  .plm-nav__link,
  body.porchlight-clean .plm-nav__link {
    min-width: 68px;
    font-size: 14px;
    padding: 8px 10px 7px;
  }
  .plm-social { gap: 14px; }
  .plm-social img { width: 21px; height: 21px; }
}

@media (max-width: 820px) {
  .plm-header__inner {
    min-height: unset;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 28px 18px 22px;
  }
  .plm-logo img { width: 260px; }
  .plm-nav {
    flex-wrap: wrap;
    gap: 8px 10px;
  }
  .plm-nav__link,
  body.porchlight-clean .plm-nav__link { min-width: 70px; font-size: 15px; padding: 8px 12px; }
  .plm-social { align-self: center; padding-top: 0; }
  .plm-about-copy { padding-top: 48px; }
  .plm-about-copy__text { font-size: 17px; line-height: 1.65; }
  .plm-about-logos { gap: 32px; }
  .plm-footer__city { font-size: 16px; letter-spacing: .28em; }
}

@media (max-width: 520px) {
  .plm-logo img { width: 224px; }
  .plm-nav__link,
  body.porchlight-clean .plm-nav__link { min-width: 64px; font-size: 14px; padding: 7px 10px; }
  .plm-page-title { margin-bottom: 30px; }
  .plm-about-copy__text { font-size: 16px; text-align: center; }
  .plm-about-logos { flex-direction: column; gap: 22px; }
}

/* v9: use one clean global header everywhere and suppress the old Muse homepage header artifacts. */
body.home.porchlight-clean #u53560,
body.home.porchlight-clean #u53561,
body.home.porchlight-clean #menuu57654,
body.home.porchlight-clean #u58375-bw,
body.home.porchlight-clean #u72468,
body.home.porchlight-clean #u72541,
body.home.porchlight-clean #u72609,
body.home.porchlight-clean [data-orig-id="u53561"],
body.home.porchlight-clean [data-orig-id="u72468"],
body.home.porchlight-clean [data-orig-id="u72541"],
body.home.porchlight-clean [data-orig-id="u72609"] {
  display: none !important;
  visibility: hidden !important;
}

/* Ensure clean-header social icons render even if old Muse CSS touches images/links. */
.plm-header .plm-social {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  z-index: 50;
}
.plm-header .plm-social a,
.plm-header .plm-social img {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: .65 !important;
}
.plm-header .plm-social a:hover img { opacity: .95 !important; }

/* Keep the homepage Muse canvas from fighting the rebuilt header's top spacing. */
body.home.porchlight-clean #page,
body.home.porchlight-clean .clearfix#page {
  margin-top: 0 !important;
}

/* v10: force rebuilt global header above the recovered Muse canvas on every page. */
body.porchlight-clean .plm-header {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 2147483000 !important;
  width: 100% !important;
  background: #000 !important;
  overflow: visible !important;
  isolation: isolate;
}
body.porchlight-clean .plm-header__inner,
body.porchlight-clean .plm-logo,
body.porchlight-clean .plm-logo img,
body.porchlight-clean .plm-nav,
body.porchlight-clean .plm-nav__link,
body.porchlight-clean .plm-social,
body.porchlight-clean .plm-social a,
body.porchlight-clean .plm-social svg {
  visibility: visible !important;
  opacity: 1 !important;
  position: relative;
  z-index: 2147483001 !important;
}
body.porchlight-clean .plm-header__inner {
  display: grid !important;
}
body.porchlight-clean .plm-nav {
  display: flex !important;
}
body.porchlight-clean .plm-social {
  display: flex !important;
}
body.porchlight-clean .plm-social a {
  color: var(--plm-grey) !important;
}
body.porchlight-clean .plm-social svg {
  display: block !important;
  width: 25px !important;
  height: 25px !important;
  fill: currentColor !important;
  filter: none !important;
}
body.porchlight-clean .plm-social a:hover { color: var(--plm-gold) !important; }

/* Keep the recovered Muse content below the clean header instead of allowing it to cover it. */
body.home.porchlight-clean #page,
body.home.porchlight-clean .clearfix#page {
  position: relative !important;
  z-index: 1 !important;
}


/* v11 (header/social stabilization), updated v56.3 to align with
   the new layout: 2-column grid (logo / nav), nav centered in its
   1fr column, social absolute at top-right. */
body.porchlight-clean .plm-header {
  position: relative !important;
  min-height: 96px !important;
}
body.porchlight-clean .plm-header__inner {
  position: relative !important;
  grid-template-columns: auto 1fr !important;
  column-gap: 36px !important;
  padding: 12px 56px 12px !important;
  min-height: 96px !important;
}
body.porchlight-clean .plm-logo img {
  width: 220px !important;
  max-width: 100% !important;
}
body.porchlight-clean .plm-nav {
  justify-content: center !important;
  padding-right: 0 !important;
  gap: 14px !important;
}
body.porchlight-clean .plm-social {
  position: absolute !important;
  top: 14px !important;
  right: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 22px !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 2147483600 !important;
  pointer-events: auto !important;
  transform: none !important;
}
body.porchlight-clean .plm-social a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 25px !important;
  height: 25px !important;
  min-width: 25px !important;
  min-height: 25px !important;
  color: var(--plm-grey) !important;
  opacity: 1 !important;
  overflow: visible !important;
  pointer-events: auto !important;
  text-decoration: none !important;
}
body.porchlight-clean .plm-social svg {
  display: block !important;
  width: 25px !important;
  height: 25px !important;
  min-width: 25px !important;
  min-height: 25px !important;
  fill: var(--plm-grey) !important;
  color: var(--plm-grey) !important;
  opacity: 1 !important;
  overflow: visible !important;
  visibility: visible !important;
}
body.porchlight-clean .plm-social a:hover svg {
  fill: var(--plm-gold) !important;
  color: var(--plm-gold) !important;
}

@media (max-width: 1180px) {
  /* v56.3 — 2-col grid (logo / nav-centered) + absolute social. */
  body.porchlight-clean .plm-header__inner {
    grid-template-columns: auto 1fr !important;
    column-gap: 20px !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
  body.porchlight-clean .plm-logo img { width: 195px !important; }
  body.porchlight-clean .plm-nav {
    justify-content: center !important;
    gap: 4px !important;
    padding-right: 0 !important;
  }
  body.porchlight-clean .plm-social {
    top: 12px !important;
    right: 28px !important;
    gap: 16px !important;
  }
  body.porchlight-clean .plm-social a,
  body.porchlight-clean .plm-social svg {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
  }
}

@media (max-width: 820px) {
  body.porchlight-clean .plm-header {
    min-height: auto !important;
  }
  body.porchlight-clean .plm-header__inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 18px !important;
    padding: 28px 18px 24px !important;
  }
  body.porchlight-clean .plm-social {
    position: static !important;
    order: 2 !important;
    gap: 22px !important;
    height: auto !important;
  }
  body.porchlight-clean .plm-nav {
    order: 3 !important;
    justify-content: center !important;
    padding-right: 0 !important;
  }
}


/* v13: global header + mobile menu stabilization */
body.porchlight-clean .plm-menu-toggle {
  display: none;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  width: 44px;
  height: 36px;
  padding: 6px;
  margin: 0;
  cursor: pointer;
  z-index: 2147483640;
}

body.porchlight-clean .plm-menu-toggle span {
  display: block;
  height: 3px;
  width: 28px;
  margin: 5px auto;
  background: var(--plm-gold);
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.18);
}

/* Hide the old Muse mobile hamburger/thumb artifacts when the clean header is active */
body.porchlight-clean #pamphletu71617,
body.porchlight-clean [data-orig-id="pamphletu71617"],
body.porchlight-clean #u71659,
body.porchlight-clean #u71660,
body.porchlight-clean #u71661 {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Desktop/laptop: keep the rebuilt header in one row and keep Contact visible */
@media (min-width: 821px) {
  body.porchlight-clean .plm-header {
    overflow: visible !important;
  }

  body.porchlight-clean .plm-header__inner {
    overflow: visible !important;
  }

  body.porchlight-clean .plm-nav {
    flex-wrap: nowrap !important;
  }

  body.porchlight-clean .plm-nav__link {
    white-space: nowrap !important;
  }
}

/* Mobile: default is collapsed; menu opens only after tapping hamburger */
@media (max-width: 820px) {
  body.porchlight-clean .plm-header {
    position: relative !important;
    z-index: 2147483000 !important;
  }

  body.porchlight-clean .plm-header__inner {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 18px !important;
    padding: 26px 18px 24px !important;
  }

  body.porchlight-clean .plm-menu-toggle {
    display: block !important;
    position: absolute !important;
    top: 20px !important;
    left: 18px !important;
  }

  body.porchlight-clean .plm-logo {
    order: 1 !important;
  }

  body.porchlight-clean .plm-logo img {
    width: 280px !important;
    max-width: calc(100vw - 120px) !important;
  }

  body.porchlight-clean .plm-social {
    order: 2 !important;
    position: static !important;
    display: flex !important;
    gap: 24px !important;
  }

  body.porchlight-clean .plm-nav {
    order: 3 !important;
    display: none !important;
    width: 100% !important;
    max-width: 520px !important;
    margin: 6px auto 0 !important;
    padding: 0 !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 14px 18px !important;
  }

  body.porchlight-clean .plm-header.plm-nav-open .plm-nav {
    display: flex !important;
  }

  body.porchlight-clean .plm-nav__link,
  body.porchlight-clean .plm-nav__link:visited {
    min-width: 118px !important;
    min-height: 42px !important;
    padding: 11px 18px 10px !important;
    font-size: 22px !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 420px) {
  body.porchlight-clean .plm-logo img {
    width: 240px !important;
    max-width: calc(100vw - 110px) !important;
  }

  body.porchlight-clean .plm-nav {
    gap: 12px !important;
  }

  body.porchlight-clean .plm-nav__link,
  body.porchlight-clean .plm-nav__link:visited {
    min-width: 104px !important;
    font-size: 18px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}



/* v14: restore original homepage Muse body behavior while keeping clean global header */
body.home.porchlight-clean .plm-header {
  position: relative !important;
  z-index: 2147483000 !important;
}

/* Hide only duplicate legacy header/menu/nav artifacts, not the homepage carousel/body */
body.home.porchlight-clean #u53560,
body.home.porchlight-clean #u53560-bw,
body.home.porchlight-clean #menuu53378,
body.home.porchlight-clean #menuu53378-bw,
body.home.porchlight-clean #pamphletu71617,
body.home.porchlight-clean [data-orig-id="pamphletu71617"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Kill the stray cropped crest artifact that appears above the clean mobile logo */
@media (max-width: 820px) {
  body.home.porchlight-clean #u53572,
  body.home.porchlight-clean #u53572_img,
  body.home.porchlight-clean #u53575,
  body.home.porchlight-clean #u53575_img,
  body.home.porchlight-clean #u71598,
  body.home.porchlight-clean #u71598_img {
    display: none !important;
    visibility: hidden !important;
  }

  /* Keep hamburger visible and clickable above all Muse layers */
  body.porchlight-clean .plm-menu-toggle {
    z-index: 2147483647 !important;
  }

  body.porchlight-clean .plm-header.plm-nav-open .plm-nav {
    display: flex !important;
  }
}

/* Keep homepage content immediately below the clean header gold rule, but let Muse responsive CSS choose the correct slide/image. */
body.home.porchlight-clean .plm-main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Avoid v13/v10 collapsing wrappers that the Muse homepage still needs for responsive behavior. */
body.home.porchlight-clean #pu53560,
body.home.porchlight-clean #page,
body.home.porchlight-clean .clearfix {
  min-height: initial;
}

/* Prevent giant blank header area from legacy hidden blocks if Muse leaves empty wrappers. */
body.home.porchlight-clean #pu53560 {
  margin-top: 0 !important;
}


/* v15: mobile header parity pass
   Goal: match original mobile header more closely:
   hamburger left, logo centered, socials right, no duplicate Muse mark above/behind logo. */

/* Hide duplicated legacy Muse mobile/desktop header fragments on all clean pages */
body.porchlight-clean #u71522,
body.porchlight-clean #u71529,
body.porchlight-clean #u71522_img,
body.porchlight-clean #u71529_img,
body.porchlight-clean #pamphletu71617,
body.porchlight-clean [data-orig-id="pamphletu71617"],
body.porchlight-clean #u71618,
body.porchlight-clean #u71618popup,
body.porchlight-clean #menuu71620,
body.porchlight-clean #u71659,
body.porchlight-clean #u71660,
body.porchlight-clean #u71661,
body.porchlight-clean #u53560,
body.porchlight-clean #u53560-bw,
body.porchlight-clean #menuu57654,
body.porchlight-clean #menuu57654-bw,
body.porchlight-clean #u58375,
body.porchlight-clean #u58375-bw {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Desktop/social consistency */
body.porchlight-clean .plm-social a,
body.porchlight-clean .plm-social svg {
  opacity: 1 !important;
  color: var(--plm-grey) !important;
  fill: var(--plm-grey) !important;
}
body.porchlight-clean .plm-social a:hover,
body.porchlight-clean .plm-social a:hover svg {
  color: var(--plm-gold) !important;
  fill: var(--plm-gold) !important;
}

/* Mobile header: single row like the original Muse mobile header */
@media (max-width: 820px) {
  body.porchlight-clean .plm-header {
    min-height: 0 !important;
    background: #000 !important;
    border-bottom: 4px solid var(--plm-gold) !important;
    overflow: visible !important;
  }

  body.porchlight-clean .plm-header__inner {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) 104px !important;
    grid-template-areas:
      "toggle logo social"
      "nav nav nav" !important;
    align-items: center !important;
    justify-items: center !important;
    gap: 0 !important;
    min-height: 154px !important;
    padding: 22px 16px 20px !important;
    position: relative !important;
  }

  body.porchlight-clean .plm-menu-toggle {
    grid-area: toggle !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: static !important;
    width: 44px !important;
    height: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    z-index: 2147483647 !important;
  }

  body.porchlight-clean .plm-menu-toggle span {
    width: 30px !important;
    height: 4px !important;
    margin: 3px 0 !important;
    background: var(--plm-gold) !important;
    border-radius: 2px !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.22) !important;
  }

  body.porchlight-clean .plm-logo {
    grid-area: logo !important;
    justify-self: center !important;
    align-self: center !important;
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    line-height: 0 !important;
  }

  body.porchlight-clean .plm-logo img {
    display: block !important;
    width: 232px !important;
    max-width: calc(100vw - 180px) !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  body.porchlight-clean .plm-social {
    grid-area: social !important;
    position: static !important;
    justify-self: end !important;
    align-self: center !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 15px !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    order: initial !important;
    transform: none !important;
  }

  body.porchlight-clean .plm-social a,
  body.porchlight-clean .plm-social svg {
    width: 23px !important;
    height: 23px !important;
    min-width: 23px !important;
    min-height: 23px !important;
  }

  body.porchlight-clean .plm-nav {
    grid-area: nav !important;
    display: none !important;
    width: 100% !important;
    max-width: 520px !important;
    margin: 26px auto 0 !important;
    padding: 0 !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 14px 18px !important;
    order: initial !important;
  }

  body.porchlight-clean .plm-header.plm-nav-open .plm-nav {
    display: flex !important;
  }

  body.porchlight-clean .plm-nav__link,
  body.porchlight-clean .plm-nav__link:visited {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 116px !important;
    min-height: 42px !important;
    padding: 11px 16px 10px !important;
    font-size: 21px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-align: center !important;
  }
}

@media (max-width: 430px) {
  body.porchlight-clean .plm-header__inner {
    grid-template-columns: 46px minmax(0, 1fr) 92px !important;
    min-height: 142px !important;
    padding: 20px 12px 18px !important;
  }

  body.porchlight-clean .plm-logo img {
    width: 208px !important;
    max-width: calc(100vw - 154px) !important;
  }

  body.porchlight-clean .plm-social {
    gap: 12px !important;
  }

  body.porchlight-clean .plm-social a,
  body.porchlight-clean .plm-social svg {
    width: 21px !important;
    height: 21px !important;
    min-width: 21px !important;
    min-height: 21px !important;
  }

  body.porchlight-clean .plm-menu-toggle {
    width: 40px !important;
  }

  body.porchlight-clean .plm-menu-toggle span {
    width: 28px !important;
  }

  body.porchlight-clean .plm-nav {
    gap: 12px 12px !important;
  }

  body.porchlight-clean .plm-nav__link,
  body.porchlight-clean .plm-nav__link:visited {
    min-width: 106px !important;
    font-size: 18px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}


/* v16: targeted page body alignment fixes */

/* Homepage: remove the blank Muse spacer between the clean header gold line and the hero/carousel.
   Do NOT collapse the whole Muse wrapper; only remove the known empty spacer node. */
body.home.porchlight-clean #u80034-3,
body.home.porchlight-clean #u80034-3-bw {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.home.porchlight-clean #pslideshowu45558,
body.home.porchlight-clean #slideshowu45558 {
  margin-top: 0 !important;
}

body.home.porchlight-clean .plm-header {
  margin-bottom: 0 !important;
}

/* v15 (full-bleed about hero) — REVERTED in v56.3. Per client
   direction the about hero is now constrained-width centered with
   black side gutters, and capped vertically so the ABOUT US
   heading + body copy land above the fold. This (0,2,1) selector
   block was previously winning specificity over the v56.1/v56.2
   `.plm-about-hero` rule at (0,1,0); now updated to align with
   it. */
/* v56.8 — wider hero aspect (5:2 = 2.5:1) so ABOUT US peeks above
   the fold. v56.7's 2:1 still left no room for content on common
   1080p+DevTools viewports. 2.5:1 takes ~40% of viewport width as
   height instead of 50% — saves ~25% vertical space. Trade-off:
   the image gets a moderate top+bottom crop (~20% each side).
   The microphone body stays visible; head + base may lose a small
   strip each, depending on how the photographer framed the shot. */
body.porchlight-clean .plm-about-hero {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  aspect-ratio: 5 / 2 !important;
  overflow: hidden !important;
}

body.porchlight-clean .plm-about-hero__image {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  margin: 0 !important;
}

/* Make sure mobile menu opens above page/carousel content. */
body.porchlight-clean .plm-header {
  position: relative !important;
  z-index: 2147483000 !important;
}

body.porchlight-clean .plm-header.plm-nav-open .plm-nav {
  display: flex !important;
}


/* v18: homepage hero stability + safe hamburger only.
   IMPORTANT: Do not force the What's New video gallery widths here;
   that gallery is left to original Muse/Blueimp behavior. */

/* The top homepage hero/carousel should sit directly beneath the clean header's yellow line
   at every viewport width. */
body.home.porchlight-clean .plm-header {
  margin-bottom: 0 !important;
}

body.home.porchlight-clean .plm-main,
body.home.porchlight-clean #page,
body.home.porchlight-clean #page_position_content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

body.home.porchlight-clean #u80034-3,
body.home.porchlight-clean #u80034-3-bw {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.home.porchlight-clean #pslideshowu45558,
body.home.porchlight-clean #slideshowu45558,
body.home.porchlight-clean #pu45558 {
  margin-top: 0 !important;
  top: auto !important;
}

/* Keep the mobile hamburger clickable above all Muse layers. */
@media (max-width: 820px) {
  body.porchlight-clean .plm-header {
    isolation: isolate !important;
    z-index: 2147483000 !important;
  }

  body.porchlight-clean .plm-menu-toggle {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    position: relative !important;
    z-index: 2147483647 !important;
  }

  body.porchlight-clean .plm-header.plm-nav-open .plm-nav {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}


/* v20: real in-header hamburger + preserve original Muse video gallery */

/* Never use the v19 overlay hamburger. */
.plm-mobile-menu-hitbox {
  display: none !important;
}

/* Mobile header: keep hamburger aligned within the header grid, not fixed/overlayed. */
@media (max-width: 820px) {
  body.porchlight-clean .plm-header {
    position: relative !important;
    z-index: 2147483000 !important;
    overflow: visible !important;
  }

  body.porchlight-clean .plm-header__inner {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) 104px !important;
    grid-template-areas:
      "toggle logo social"
      "nav nav nav" !important;
    align-items: center !important;
    justify-items: center !important;
    min-height: 154px !important;
    padding: 22px 16px 20px !important;
    gap: 0 !important;
  }

  body.porchlight-clean .plm-menu-toggle {
    grid-area: toggle !important;
    display: inline-flex !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    z-index: 2147483647 !important;
    width: 48px !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
  }

  body.porchlight-clean .plm-menu-toggle span {
    display: block !important;
    width: 34px !important;
    height: 5px !important;
    margin: 0 !important;
    background: var(--plm-gold) !important;
    border-radius: 3px !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.24) !important;
    pointer-events: none !important;
  }

  body.porchlight-clean .plm-logo {
    grid-area: logo !important;
    justify-self: center !important;
    line-height: 0 !important;
  }

  body.porchlight-clean .plm-social {
    grid-area: social !important;
    justify-self: end !important;
    position: static !important;
  }

  /* Closed state */
  body.porchlight-clean .plm-nav {
    grid-area: nav !important;
    display: none !important;
  }

  /* Open state: use mobile grid/wrap menu, not desktop horizontal overflow */
  body.porchlight-clean .plm-header.plm-nav-open .plm-nav {
    display: flex !important;
    width: 100% !important;
    max-width: 520px !important;
    margin: 26px auto 0 !important;
    padding: 0 !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 14px 18px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body.porchlight-clean .plm-header.plm-nav-open .plm-nav__link,
  body.porchlight-clean .plm-header.plm-nav-open .plm-nav__link:visited {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 116px !important;
    min-height: 42px !important;
    padding: 11px 16px 10px !important;
    font-size: 21px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  /* Preserve original Muse/Blueimp video carousel behavior.
     Do not force the inner slide widths; just prevent clean-theme rules from hiding it. */
  body.home.porchlight-clean #u74474,
  body.home.porchlight-clean #u74474-bw,
  body.home.porchlight-clean #blueimp-video-carousel,
  body.home.porchlight-clean .blueimp-gallery,
  body.home.porchlight-clean .blueimp-gallery-carousel {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

@media (max-width: 430px) {
  body.porchlight-clean .plm-header__inner {
    grid-template-columns: 46px minmax(0, 1fr) 92px !important;
    min-height: 142px !important;
    padding: 20px 12px 18px !important;
  }

  body.porchlight-clean .plm-menu-toggle {
    width: 44px !important;
  }

  body.porchlight-clean .plm-menu-toggle span {
    width: 30px !important;
    height: 4px !important;
  }

  body.porchlight-clean .plm-header.plm-nav-open .plm-nav {
    gap: 12px !important;
  }

  body.porchlight-clean .plm-header.plm-nav-open .plm-nav__link,
  body.porchlight-clean .plm-header.plm-nav-open .plm-nav__link:visited {
    min-width: 106px !important;
    font-size: 18px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}


/* v21: match original Muse mobile header/dropdown behavior.
   - hamburger top-left
   - social icons top-right
   - logo centered below with name beneath mark
   - menu opens as vertical dropdown, not horizontal/wrapped grid
*/
@media (max-width: 820px) {
  body.porchlight-clean .plm-header {
    background: #000 !important;
    border-bottom: 4px solid var(--plm-gold) !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 2147483000 !important;
  }

  body.porchlight-clean .plm-header__inner {
    display: grid !important;
    /* v49 — was `80px 1fr 126px` (asymmetric: hamburger col vs.
       social col), which made the 1fr middle column shift ~23px to
       the left of the page centerline. With both side columns
       sized to 126px (the wider of the two), the middle column's
       center now sits at the page center. Toggle stays flush-left
       via justify-self: start, social stays flush-right via
       justify-self: end — neither moves regardless of cell width. */
    grid-template-columns: 126px 1fr 126px !important;
    grid-template-areas:
      "toggle logo social"
      ". logo ."
      "nav nav nav" !important;
    align-items: start !important;
    justify-items: center !important;
    min-height: 245px !important;
    padding: 24px 22px 26px !important;
    gap: 0 !important;
  }

  body.porchlight-clean .plm-menu-toggle {
    grid-area: toggle !important;
    justify-self: start !important;
    align-self: start !important;
    display: inline-flex !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 54px !important;
    height: 48px !important;
    padding: 0 !important;
    margin: 8px 0 0 0 !important;
    border: 0 !important;
    background: transparent !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    z-index: 2147483647 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
  }

  body.porchlight-clean .plm-menu-toggle span {
    display: block !important;
    width: 36px !important;
    height: 5px !important;
    margin: 0 !important;
    background: var(--plm-gold) !important;
    border-radius: 3px !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.24) !important;
    pointer-events: none !important;
  }

  body.porchlight-clean .plm-logo {
    grid-area: logo !important;
    justify-self: center !important;
    align-self: start !important;
    display: block !important;
    line-height: 0 !important;
    margin: 0 auto !important;
    text-align: center !important;
    width: auto !important;
    max-width: 100% !important;
  }

  body.porchlight-clean .plm-logo img {
    display: block !important;
    width: 310px !important;
    max-width: calc(100vw - 260px) !important;
    min-width: 230px !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  body.porchlight-clean .plm-social {
    grid-area: social !important;
    justify-self: end !important;
    align-self: start !important;
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 18px !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 18px 0 0 0 !important;
    transform: none !important;
    order: initial !important;
  }

  body.porchlight-clean .plm-social a,
  body.porchlight-clean .plm-social svg {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    color: var(--plm-grey) !important;
    fill: var(--plm-grey) !important;
    opacity: 1 !important;
  }

  /* CLOSED mobile state */
  body.porchlight-clean .plm-nav {
    grid-area: nav !important;
    display: none !important;
  }

  /* OPEN mobile state — v48: anchor the dropdown to the hamburger.
     Was: position: relative; margin: 28px auto 0 (third grid row,
     centered below the entire header — visually disconnected from
     the hamburger). Now: position: absolute, pinned just below the
     hamburger button at top-left of the header. Floats over page
     content as an overlay; doesn't push the rest of the header
     down. */
  body.porchlight-clean .plm-header.plm-nav-open .plm-nav {
    display: flex !important;
    position: absolute !important;
    top: 84px !important;                    /* hamburger bottom = 24 (header pad) + 8 (toggle margin) + 48 (toggle h) = 80; +4 gap */
    left: 14px !important;
    right: auto !important;
    bottom: auto !important;
    width: 220px !important;
    max-width: calc(100vw - 28px) !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    background: rgba(20, 20, 20, 0.96) !important;
    border: 1px solid rgba(227, 167, 47, 0.35) !important;
    border-radius: 4px !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.7) !important;
    z-index: 2147483600 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body.porchlight-clean .plm-header.plm-nav-open .plm-nav__link,
  body.porchlight-clean .plm-header.plm-nav-open .plm-nav__link:visited {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 54px !important;
    padding: 18px 20px 15px !important;
    margin: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(227, 167, 47, 0.22) !important;
    color: #ffffff !important;
    font-size: 22px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-align: center !important;
    text-decoration: none !important;
  }

  body.porchlight-clean .plm-header.plm-nav-open .plm-nav__link.is-active,
  body.porchlight-clean .plm-header.plm-nav-open .plm-nav__link:hover {
    background: rgba(80, 80, 80, 0.95) !important;
    color: var(--plm-gold) !important;
  }
}

@media (max-width: 430px) {
  body.porchlight-clean .plm-header__inner {
    /* v49 — symmetric side columns so the logo's middle-column
       centerline matches the page centerline (was 68px / 1fr / 112px). */
    grid-template-columns: 112px 1fr 112px !important;
    min-height: 218px !important;
    padding: 22px 16px 24px !important;
  }

  body.porchlight-clean .plm-menu-toggle {
    width: 48px !important;
    height: 44px !important;
    margin-top: 8px !important;
  }

  body.porchlight-clean .plm-menu-toggle span {
    width: 32px !important;
    height: 4px !important;
  }

  body.porchlight-clean .plm-logo img {
    width: 260px !important;
    max-width: calc(100vw - 205px) !important;
    min-width: 205px !important;
  }

  body.porchlight-clean .plm-social {
    gap: 14px !important;
    margin-top: 17px !important;
  }

  body.porchlight-clean .plm-social a,
  body.porchlight-clean .plm-social svg {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
  }

  body.porchlight-clean .plm-header.plm-nav-open .plm-nav {
    /* v48 — narrower viewport: hamburger is at 22 (header pad) + 8 (margin) +
       44 (height) = 74; menu drops just below at top: 78 (4px gap). Panel a
       hair wider for the slightly-larger touch targets. */
    top: 78px !important;
    left: 12px !important;
    width: 218px !important;
    max-width: calc(100vw - 24px) !important;
    margin: 0 !important;
  }

  body.porchlight-clean .plm-header.plm-nav-open .plm-nav__link,
  body.porchlight-clean .plm-header.plm-nav-open .plm-nav__link:visited {
    min-height: 50px !important;
    font-size: 20px !important;
  }
}


/* v22: mobile dropdown position/scale refinement.
   Open beneath the hamburger, aligned to the left edge of the menu items, and smaller. */
@media (max-width: 820px) {
  body.porchlight-clean .plm-header__inner {
    position: relative !important;
  }

  body.porchlight-clean .plm-header.plm-nav-open .plm-nav {
    position: absolute !important;
    top: 92px !important;
    left: 22px !important;
    right: auto !important;
    width: 215px !important;
    max-width: calc(100vw - 44px) !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    background: rgba(48, 48, 48, 0.92) !important;
    z-index: 2147483600 !important;
  }

  body.porchlight-clean .plm-header.plm-nav-open .plm-nav__link,
  body.porchlight-clean .plm-header.plm-nav-open .plm-nav__link:visited {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 43px !important;
    padding: 13px 14px 11px !important;
    font-size: 17px !important;
    letter-spacing: 0.08em !important;
    border-bottom: 1px solid rgba(227, 167, 47, 0.18) !important;
  }

  body.porchlight-clean .plm-header.plm-nav-open .plm-nav__link.is-active,
  body.porchlight-clean .plm-header.plm-nav-open .plm-nav__link:hover {
    background: rgba(76, 76, 76, 0.95) !important;
    color: var(--plm-gold) !important;
  }
}

@media (max-width: 430px) {
  body.porchlight-clean .plm-header.plm-nav-open .plm-nav {
    top: 84px !important;
    left: 16px !important;
    width: 190px !important;
    max-width: calc(100vw - 32px) !important;
  }

  body.porchlight-clean .plm-header.plm-nav-open .plm-nav__link,
  body.porchlight-clean .plm-header.plm-nav-open .plm-nav__link:visited {
    min-height: 40px !important;
    padding: 12px 12px 10px !important;
    font-size: 15px !important;
  }
}


/* v23: mobile dropdown closer to hamburger + stacked-looking mobile logo */
@media (max-width: 820px) {
  /* Use the same logo image but size it like the original stacked mobile logo.
     This preserves the mark + Porchlight Music text beneath/near it without needing a second asset. */
  body.porchlight-clean .plm-logo img {
    width: 245px !important;
    max-width: 245px !important;
    min-width: 0 !important;
  }

  /* Pull the dropdown up and left so it originates under the hamburger. */
  body.porchlight-clean .plm-header.plm-nav-open .plm-nav {
    top: 70px !important;
    left: 28px !important;
    width: 205px !important;
    max-width: calc(100vw - 56px) !important;
  }

  body.porchlight-clean .plm-header.plm-nav-open .plm-nav__link,
  body.porchlight-clean .plm-header.plm-nav-open .plm-nav__link:visited {
    min-height: 39px !important;
    padding: 11px 12px 9px !important;
    font-size: 15px !important;
    letter-spacing: 0.11em !important;
  }
}

@media (max-width: 430px) {
  body.porchlight-clean .plm-logo img {
    width: 220px !important;
    max-width: 220px !important;
  }

  body.porchlight-clean .plm-header.plm-nav-open .plm-nav {
    top: 64px !important;
    left: 18px !important;
    width: 178px !important;
    max-width: calc(100vw - 36px) !important;
  }

  body.porchlight-clean .plm-header.plm-nav-open .plm-nav__link,
  body.porchlight-clean .plm-header.plm-nav-open .plm-nav__link:visited {
    min-height: 36px !important;
    padding: 10px 10px 8px !important;
    font-size: 13px !important;
  }
}


/* v24: true stacked mobile logo + dropdown directly beneath hamburger */
@media (max-width: 820px) {

  /* Use actual stacked mobile artwork */
  body.porchlight-clean .plm-logo img {
    content: url('../images/porchlight music_4 color_poster_.png') !important;
    width: 205px !important;
    height: auto !important;
    max-width: 205px !important;
    object-fit: contain !important;
  }

  /* tighten overall mobile header */
  body.porchlight-clean .plm-header__inner {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    min-height: 118px !important;
    align-items: flex-start !important;
  }

  /* align social icons with hamburger row */
  body.porchlight-clean .plm-social {
    margin-top: 10px !important;
  }

  /* hamburger alignment */
  body.porchlight-clean .plm-mobile-toggle {
    margin-top: 8px !important;
    margin-left: 6px !important;
    position: relative !important;
    z-index: 2147483647 !important;
  }

  /* dropdown opens directly beneath hamburger */
  body.porchlight-clean .plm-header.plm-nav-open .plm-nav {
    position: absolute !important;
    top: 58px !important;
    left: 12px !important;
    width: 180px !important;
    max-width: 180px !important;
    margin: 0 !important;
    z-index: 2147483600 !important;
  }

  body.porchlight-clean .plm-header.plm-nav-open .plm-nav__link,
  body.porchlight-clean .plm-header.plm-nav-open .plm-nav__link:visited {
    min-height: 34px !important;
    padding: 9px 10px !important;
    font-size: 13px !important;
    letter-spacing: 0.08em !important;
  }
}

@media (max-width: 430px) {
  body.porchlight-clean .plm-logo img {
    width: 185px !important;
    max-width: 185px !important;
  }

  body.porchlight-clean .plm-header.plm-nav-open .plm-nav {
    top: 54px !important;
    left: 10px !important;
    width: 168px !important;
    max-width: 168px !important;
  }
}


/* v25: top-align mobile header controls and pin dropdown under hamburger */
@media (max-width: 820px) {
  body.porchlight-clean .plm-header {
    min-height: 0 !important;
  }

  body.porchlight-clean .plm-header__inner {
    display: grid !important;
    /* v56 — was `70px minmax(0, 1fr) 126px` (asymmetric, reintroduced
       the v49 off-center logo bug). Symmetric side columns sized to
       the wider of the two (126px) so the middle column's centerline
       matches the page centerline. Hamburger + social stay flush via
       their justify-self anchors. */
    grid-template-columns: 126px minmax(0, 1fr) 126px !important;
    grid-template-areas:
      "toggle logo social"
      "nav nav nav" !important;
    align-items: start !important;
    justify-items: center !important;
    min-height: 150px !important;
    padding: 16px 20px 18px !important;
    gap: 0 !important;
    position: relative !important;
  }

  body.porchlight-clean .plm-menu-toggle {
    grid-area: toggle !important;
    justify-self: start !important;
    align-self: start !important;
    margin: 2px 0 0 0 !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
  }

  body.porchlight-clean .plm-logo {
    grid-area: logo !important;
    justify-self: center !important;
    align-self: start !important;
    margin: 0 auto !important;
    line-height: 0 !important;
  }

  body.porchlight-clean .plm-logo img {
    content: url('../images/porchlight music_4 color_poster_.png') !important;
    width: 190px !important;
    max-width: 190px !important;
    height: auto !important;
    object-fit: contain !important;
  }

  body.porchlight-clean .plm-social {
    grid-area: social !important;
    justify-self: end !important;
    align-self: start !important;
    margin: 7px 0 0 0 !important;
    position: static !important;
    display: flex !important;
    gap: 16px !important;
  }

  /* Pin dropdown under hamburger, not under the whole header */
  body.porchlight-clean .plm-header.plm-nav-open .plm-nav {
    position: absolute !important;
    top: 54px !important;
    left: 20px !important;
    width: 176px !important;
    max-width: 176px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 2147483600 !important;
  }

  body.porchlight-clean .plm-header.plm-nav-open .plm-nav__link,
  body.porchlight-clean .plm-header.plm-nav-open .plm-nav__link:visited {
    min-height: 34px !important;
    padding: 9px 10px 8px !important;
    font-size: 13px !important;
    letter-spacing: 0.08em !important;
  }
}

@media (max-width: 430px) {
  body.porchlight-clean .plm-header__inner {
    /* v56 — symmetric (was 62/1fr/106). See note at 820px breakpoint. */
    grid-template-columns: 106px minmax(0, 1fr) 106px !important;
    min-height: 138px !important;
    padding: 14px 14px 16px !important;
  }

  body.porchlight-clean .plm-menu-toggle {
    margin-top: 0 !important;
  }

  body.porchlight-clean .plm-logo img {
    width: 168px !important;
    max-width: 168px !important;
  }

  body.porchlight-clean .plm-social {
    gap: 12px !important;
    margin-top: 5px !important;
  }

  body.porchlight-clean .plm-header.plm-nav-open .plm-nav {
    top: 48px !important;
    left: 14px !important;
    width: 158px !important;
    max-width: 158px !important;
  }

  body.porchlight-clean .plm-header.plm-nav-open .plm-nav__link,
  body.porchlight-clean .plm-header.plm-nav-open .plm-nav__link:visited {
    min-height: 31px !important;
    padding: 8px 9px 7px !important;
    font-size: 12px !important;
  }
}


/* v26: make mobile dropdown overlay inside header instead of flowing into hero */
@media (max-width: 820px) {
  body.porchlight-clean .plm-header {
    position: relative !important;
    overflow: visible !important;
    z-index: 2147483000 !important;
  }

  body.porchlight-clean .plm-header__inner {
    position: relative !important;
    overflow: visible !important;
  }

  body.porchlight-clean .plm-header .plm-nav {
    position: absolute !important;
    display: none !important;
    top: 62px !important;
    left: 20px !important;
    right: auto !important;
    width: 176px !important;
    max-width: 176px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    z-index: 2147483600 !important;
  }

  body.porchlight-clean .plm-header.plm-nav-open .plm-nav {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    background: rgba(48, 48, 48, 0.92) !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body.porchlight-clean .plm-header.plm-nav-open .plm-nav__link,
  body.porchlight-clean .plm-header.plm-nav-open .plm-nav__link:visited {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 9px 10px 8px !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    letter-spacing: 0.08em !important;
    white-space: nowrap !important;
    text-align: center !important;
    border-bottom: 1px solid rgba(227, 167, 47, 0.18) !important;
  }
}

@media (max-width: 430px) {
  body.porchlight-clean .plm-header .plm-nav {
    top: 56px !important;
    left: 14px !important;
    width: 158px !important;
    max-width: 158px !important;
  }

  body.porchlight-clean .plm-header.plm-nav-open .plm-nav__link,
  body.porchlight-clean .plm-header.plm-nav-open .plm-nav__link:visited {
    min-height: 31px !important;
    padding: 8px 9px 7px !important;
    font-size: 12px !important;
  }
}


/* Team page (clean rebuild).
   Mirrors the .plm-about pattern: shares typography, color tokens, and page-title
   from the design system above. Content is rendered by
   template-parts/team-content.php from /content/team.json. */
.plm-team {
  background: var(--plm-black);
  color: var(--plm-white);
  min-height: 620px;
}
.plm-team-intro {
  width: min(100%, 980px);
  margin: 0 auto;
  padding: 72px 24px 24px;
  text-align: center;
}
.plm-team-intro .plm-page-title { margin-bottom: 0; }

/* v56 — switched from CSS grid (which left orphan cards anchored
   to col 1) to flexbox with justify-content: center so a partial
   row (e.g. 2 of 3 team members) centers under the row above.
   Same pattern v45 applied to creators and v49 applied to
   discography. */
.plm-team-grid {
  width: min(100%, 1200px);
  margin: 0 auto;
  padding: 28px 24px 96px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 56px 48px;
}

.plm-team-member {
  text-align: center;
  flex: 0 0 280px;
  max-width: 280px;
}

.plm-team-member__image-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #111;
  overflow: hidden;
  border-radius: 50%;
}
.plm-team-member__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
}

.plm-team-member__name {
  margin: 22px 0 4px;
  color: var(--plm-white);
  font-family: var(--plm-font-title);
  font-size: 22px;
  letter-spacing: .14em;
  line-height: 1.1;
  text-transform: uppercase;
  font-weight: 400;
}
.plm-team-member__title {
  margin: 0 0 10px;
  color: var(--plm-gold);
  font-family: var(--plm-font-title);
  font-size: 14px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 400;
}
.plm-team-member__bio {
  margin: 8px auto 0;
  max-width: 320px;
  color: #d7d7d7;
  font-size: 15px;
  line-height: 1.65;
}

@media (max-width: 980px) {
  .plm-team-grid {
    gap: 44px 32px;
    padding: 20px 24px 80px;
  }
  .plm-team-member { flex: 0 0 260px; max-width: 260px; }
}

@media (max-width: 600px) {
  .plm-team-intro { padding: 48px 20px 16px; }
  .plm-team-grid {
    gap: 40px;
    padding: 16px 24px 64px;
  }
  .plm-team-member__image-wrap { max-width: 360px; margin: 0 auto; }
}


/* Contact page (clean rebuild).
   Same bridge pattern as About / Team: rendered by
   template-parts/contact-content.php from /content/contact.json. The form
   itself is delegated to a third-party shortcode (WPForms / Fluent Forms /
   etc.); the rules below scope sane dark-theme defaults onto generic form
   inputs so any well-behaved plugin picks them up without per-plugin CSS. */
.plm-contact {
  background: var(--plm-black);
  color: var(--plm-white);
  min-height: 620px;
}
.plm-contact-intro {
  width: min(100%, 760px);
  margin: 0 auto;
  padding: 72px 24px 24px;
  text-align: center;
}
.plm-contact-intro__copy {
  margin: 24px auto 0;
  max-width: 600px;
  color: #d7d7d7;
  font-size: 17px;
  line-height: 1.7;
}
.plm-contact-info {
  width: min(100%, 760px);
  margin: 0 auto;
  padding: 8px 24px 16px;
  text-align: center;
  font-size: 17px;
  line-height: 1.7;
}
.plm-contact-info__line { margin: 4px 0; }
.plm-contact-info a { color: var(--plm-gold); text-decoration: none; }
.plm-contact-info a:hover { text-decoration: underline; }

.plm-contact-form {
  /* v56.10 — was width: min(100%, 720px), which made the form a
     narrow box even though the fields inside were full-width.
     Original porchlightmusic.com/contact.html runs the form much
     wider, so the inputs extend nearly the full viewport. Bumped
     to min(96%, 1200px) — leaves a small viewport gutter on
     either side without feeling cramped. */
  width: min(96%, 1200px);
  margin: 0 auto;
  padding: 24px 24px 96px;
}
.plm-contact-form__fallback {
  text-align: center;
  font-size: 17px;
  line-height: 1.7;
}
.plm-contact-form__fallback a {
  color: var(--plm-gold);
  text-decoration: none;
}
.plm-contact-form__fallback a:hover { text-decoration: underline; }

.plm-contact-form__notice {
  background: rgba(227, 167, 47, .10);
  border: 1px solid rgba(227, 167, 47, .35);
  color: #f1d68a;
  padding: 18px 22px;
  font-size: 14px;
  line-height: 1.6;
  border-radius: 4px;
  text-align: left;
}
.plm-contact-form__notice strong { color: var(--plm-gold); display: block; margin-bottom: 6px; }

/* Generic form-input theming for shortcode-rendered forms. Selectors are
   intentionally broad so any well-behaved form plugin (WPForms, Fluent Forms,
   Contact Form 7) inherits the dark theme without per-plugin overrides. */
.plm-contact-form input[type="text"],
.plm-contact-form input[type="email"],
.plm-contact-form input[type="tel"],
.plm-contact-form input[type="url"],
.plm-contact-form textarea,
.plm-contact-form select {
  width: 100%;
  background: #111;
  color: var(--plm-white);
  border: 1px solid #2a2a2a;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 16px;
  margin-bottom: 14px;
  border-radius: 0;
  box-sizing: border-box;
}
.plm-contact-form input:focus,
.plm-contact-form textarea:focus,
.plm-contact-form select:focus {
  border-color: var(--plm-gold);
  outline: none;
}
.plm-contact-form textarea { min-height: 160px; resize: vertical; }
.plm-contact-form label {
  display: block;
  margin: 8px 0 6px;
  color: #c9c9c9;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.plm-contact-form button[type="submit"],
.plm-contact-form input[type="submit"] {
  display: inline-block;
  background: var(--plm-gold);
  color: var(--plm-black);
  border: 0;
  padding: 14px 36px;
  font-family: var(--plm-font-title);
  font-size: 18px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 0;
}
.plm-contact-form button[type="submit"]:hover,
.plm-contact-form input[type="submit"]:hover { background: #b88625; }

@media (max-width: 600px) {
  .plm-contact-intro { padding: 48px 20px 16px; }
  .plm-contact-form { padding: 16px 20px 64px; }
}


/* =========================================================================
   v33 — Home, Creators index, Single creator
   ========================================================================= */

/* ----- Shared section title used on home + creators index ----- */
.plm-home-section-title,
.plm-creators-section__title {
  margin: 0 0 28px;
  color: var(--plm-gold);
  font-family: var(--plm-font-title);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
}

/* ----- Home page ----- */
.plm-home {
  background: var(--plm-black);
  color: var(--plm-white);
  min-height: 620px;
}

.plm-home-whatsnew,
.plm-home-releases {
  width: min(100%, 1240px);
  margin: 0 auto;
  padding: 56px 24px;
}

/* ============================================================
   v41 — WHAT'S NEW carousel (single-tile with prev/next arrows)
   Replaces the v33 4-up grid. Matches the original Muse home
   pattern: one large 16:9 video tile visible at a time, gold
   circular prev/next nav, gold play-circle overlay.
   ============================================================ */
.plm-home-whatsnew__carousel {
  position: relative;
  width: 100%;
  max-width: 980px;
  margin: 36px auto 0;
}
.plm-home-whatsnew__slides {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.plm-whatsnew-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .8s ease-in-out;
  pointer-events: none;
}
.plm-whatsnew-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}
.plm-whatsnew-slide__link {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.plm-whatsnew-slide__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.plm-whatsnew-slide__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 84px;
  border: 3px solid var(--plm-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .25);
  color: var(--plm-gold);
  font-size: 26px;
  line-height: 1;
  pointer-events: none;
  transition: background .25s ease, transform .25s ease;
}
.plm-whatsnew-slide__link:hover .plm-whatsnew-slide__play {
  background: rgba(0, 0, 0, .55);
  transform: translate(-50%, -50%) scale(1.05);
}

/* Prev / next nav buttons — outside the carousel on desktop, inside on tablet */
.plm-home-whatsnew__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  padding: 0;
  border: 2px solid var(--plm-gold);
  border-radius: 50%;
  background: transparent;
  color: var(--plm-gold);
  font-size: 28px;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1;
  cursor: pointer;
  z-index: 5;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.plm-home-whatsnew__nav:hover,
.plm-home-whatsnew__nav:focus {
  background: rgba(227, 167, 47, .15);
  color: #f1d68a;
  outline: none;
}
.plm-home-whatsnew__nav:active { transform: translateY(-50%) scale(.95); }
.plm-home-whatsnew__nav span {
  display: inline-block;
  margin-top: -3px;             /* visually center the chevron glyph */
}
.plm-home-whatsnew__nav--prev { left: -76px; }
.plm-home-whatsnew__nav--next { right: -76px; }

/* When the carousel doesn't have room outside, tuck the arrows inside the tile */
@media (max-width: 1180px) {
  .plm-home-whatsnew__nav--prev { left: 12px; background: rgba(0,0,0,.35); }
  .plm-home-whatsnew__nav--next { right: 12px; background: rgba(0,0,0,.35); }
}
@media (max-width: 640px) {
  .plm-whatsnew-slide__play { width: 64px; height: 64px; font-size: 20px; }
  .plm-home-whatsnew__nav { width: 42px; height: 42px; font-size: 22px; }
}

/* ============================================================
   v41 — NEW RELEASES (2-up, fade-on-hover, clean typography)
   Replaces the v33 4-up Impact-uppercase styling. Artist in
   clean sans-serif title-case; title in italic with curly
   quotes preserved.
   ============================================================ */
.plm-home-releases__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px 56px;
  width: min(100%, 1100px);
  margin-left: auto;
  margin-right: auto;
}
/* v43.3: include :link and :visited so this class selector wins the
   specificity contest against the Muse base CSS's `a:link { text-decoration: underline; }`
   (`a:link` is more specific than a bare class, so the class alone loses).
   The !important on text-decoration matches the same pattern used by
   .plm-logo / .plm-nav__link / .plm-social a elsewhere in this file. */
.plm-home-release__link,
.plm-home-release__link:link,
.plm-home-release__link:visited {
  display: block;
  color: inherit;
  text-decoration: none !important;
  font-style: normal;
  transition: opacity .35s ease;
}
.plm-home-release__link:hover,
.plm-home-release__link:focus {
  opacity: .65;
  text-decoration: none !important;
  font-style: normal;
}
.plm-home-release__cover-wrap {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #111;
  overflow: hidden;
}
.plm-home-release__cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.plm-home-release__meta {
  display: block;
  padding: 22px 4px 0;
  text-align: center;
}
.plm-home-release__artist {
  display: block;
  color: var(--plm-white);
  font-family: var(--plm-font-body);
  font-weight: 400;
  font-size: clamp(20px, 1.6vw, 26px);
  letter-spacing: .01em;
  text-transform: none;        /* match original — title case, not all caps */
}
.plm-home-release__title {
  display: block;
  margin-top: 6px;
  color: #d8d8d8;
  font-family: var(--plm-font-body);
  font-size: clamp(16px, 1.25vw, 19px);
  font-style: normal;            /* v43.3: was italic; reverted per editorial direction */
  line-height: 1.4;
}

@media (max-width: 720px) {
  .plm-home-whatsnew,
  .plm-home-releases { padding: 40px 18px; }
  .plm-home-releases__grid {
    grid-template-columns: 1fr;
    gap: 48px;
    max-width: 480px;
  }
}

/* ----- Creators index (v36 — restored editorial visual rhythm) ----- */
.plm-creators-index {
  background: var(--plm-black);
  color: var(--plm-white);
  min-height: 620px;
}
.plm-creators-intro {
  width: min(100%, 980px);
  margin: 0 auto;
  padding: 112px 24px 16px;     /* was 72/24/24 — more space below gold rule */
  text-align: center;
}
.plm-creators-intro .plm-page-title { margin-bottom: 0; }

.plm-creators-section {
  width: min(100%, 980px);      /* was 1200 — narrower → smaller circles */
  margin: 0 auto;
  padding: 64px 24px 32px;      /* was 28/24/16 — more space above row */
}
.plm-creators-section + .plm-creators-section {
  padding-top: 88px;             /* generous divider before CATALOG WRITERS */
  padding-bottom: 112px;
}

/* v45 — Issue 9: switched from CSS grid to flexbox so incomplete rows
   center their orphan cards (e.g., the 7-creator Catalog Writers section
   ends with one card; that card now centers under the row of three above
   instead of left-aligning into the first column). */
.plm-creators-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 56px 44px;
}
.plm-creator-card {
  text-align: center;
  flex: 0 0 280px;
  max-width: 280px;
  margin: 0;
}

/* The whole card link fades softly on hover, matching the original
   Muse interaction. No box-shadow ring; no name color flip. Just a
   uniform opacity drift across photo + name as one composition. */
.plm-creator-card__link {
  display: block;
  color: inherit;
  text-decoration: none !important;
  opacity: 1;
  transition: opacity .35s ease;
}
.plm-creator-card__link:hover,
.plm-creator-card__link:focus { opacity: .65; }

.plm-creator-card__photo-wrap {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #111;
  overflow: hidden;
  border-radius: 50%;
}
.plm-creator-card__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
}

/* Names: gold elegant serif, lightly tracked, NOT underlined. */
.plm-creator-card__name {
  display: block;
  margin-top: 26px;
  color: var(--plm-gold);
  font-family: var(--plm-font-title);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none !important;
}

@media (max-width: 980px) {
  /* v45: flex layout — let cards naturally wrap. Reduce basis slightly so
     2 cards per row fit comfortably. */
  .plm-creators-grid { gap: 44px 28px; }
  .plm-creator-card  { flex-basis: 260px; }
}
@media (max-width: 600px) {
  .plm-creators-intro { padding-top: 80px; }
  .plm-creators-grid  { gap: 44px; }
  .plm-creator-card   { flex-basis: 240px; max-width: 240px; }
}

/* ----- Single creator page (v36 — restored editorial typography & rhythm) ----- */
.plm-creator {
  background: var(--plm-black);
  color: var(--plm-white);
  min-height: 620px;
}
.plm-creator-article {
  width: min(100%, 880px);
  margin: 0 auto;
  padding: 96px 24px 160px;     /* was 72/24/96 — more breathing room top + before footer */
  text-align: center;
}

/* Header block: photo, name, website, social row — all centered */
.plm-creator-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-bottom: 64px;
}
.plm-creator-photo {
  margin: 0 0 32px;
  width: 240px;                  /* was 280 — smaller, more cinematic */
  max-width: 70vw;
}
.plm-creator-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
  border: 1px solid rgba(227, 167, 47, .25);
}

/* Name: gold elegant serif, matches the creators-index card name style. */
.plm-creator-name {
  margin: 0 0 12px;
  color: var(--plm-gold);
  font-family: var(--plm-font-title);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: .18em;
  line-height: 1.1;
  text-transform: uppercase;
}

/* Website domain line: same serif, smaller, gold. */
.plm-creator-website {
  margin: 4px 0 26px;
  font-family: var(--plm-font-title);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.plm-creator-website a {
  color: var(--plm-gold);
  text-decoration: none;
}
.plm-creator-website a:hover { text-decoration: underline; }

/* Social icon row — smaller, subtler gray, less visual weight. */
.plm-creator-social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 18px;
}
.plm-creator-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--plm-grey);        /* v47 — brand grey #999999 */
  opacity: .8;
  text-decoration: none;
  transition: color .2s ease, opacity .2s ease;
}
.plm-creator-social__link:hover {
  color: var(--plm-gold);
  opacity: 1;
}
.plm-creator-social__link svg {
  display: block;
  width: 17px;                   /* was 22 — smaller */
  height: 17px;
  fill: currentColor;
}

/* Bio: narrower, softer white, smaller, more line-height. Editorial reading column. */
.plm-creator-bio {
  max-width: 700px;
  margin: 0 auto;
  text-align: left;
  color: #c8c8c8;                /* was #d7d7d7 — softer */
}
.plm-creator-bio p {
  margin: 0 0 22px;
  font-size: 15px;               /* was 16 */
  line-height: 1.95;             /* was 1.75 — more air between lines */
}

/* Notable works — match bio width and softer color. */
.plm-creator-works {
  max-width: 700px;
  margin: 40px auto 0;
  padding: 24px 24px 22px;
  background: rgba(255, 255, 255, .02);
  border-left: 3px solid rgba(227, 167, 47, .65);
  text-align: left;
}
.plm-creator-works__title {
  margin: 0 0 12px;
  color: var(--plm-gold);
  font-family: var(--plm-font-title);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.plm-creator-works__list {
  margin: 0;
  padding: 0 0 0 18px;
  font-size: 14px;
  line-height: 1.85;
  color: #c8c8c8;
}
.plm-creator-works__list li { margin-bottom: 4px; }

/* v53 — `.plm-creator-spotify` rule removed alongside the iframe
   markup in creator-content.php (Spotify embeds removed per client
   direction; the gated approach in v51 proved unreliable under
   production caching). */

/* "BACK TO CREATORS" button — flatter, softer gold, less padding. */
.plm-creator-back {
  margin: 72px 0 0;
  text-align: center;
}
.plm-creator-back__btn {
  display: inline-block;
  background: var(--plm-gold);  /* v47 — collapsed muted-gold variant to brand gold #e3a72f */
  color: #ffffff;
  padding: 11px 28px;            /* was 14/36 — slimmer */
  font-family: var(--plm-font-title);
  font-weight: 400;
  font-size: 14px;               /* was 16 */
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;            /* was 4 — flatter */
  transition: background .2s ease;
}
.plm-creator-back__btn:hover,
.plm-creator-back__btn:focus {
  background: #b08020;
  color: #ffffff;
  text-decoration: none;
}
.plm-creator-back__btn:visited { color: #ffffff; }

.plm-creator-empty {
  text-align: center;
  padding: 80px 24px 120px;
}

@media (max-width: 600px) {
  .plm-creator-article { padding: 64px 20px 120px; }
  .plm-creator-photo { width: 200px; }
  .plm-creator-bio p { font-size: 14px; line-height: 1.9; }
  .plm-creator-bio { max-width: 100%; }
}


/* =========================================================================
   v35 — Home hero slideshow (full-bleed)
   Full-width rotating image hero. Source slides are 1400x676 cinematic
   banners (2.07:1) designed by the original Muse build to fill the entire
   header band. CSS handles the cross-fade via opacity; the .is-active
   class is toggled by /plm-home-slideshow.js. With JS disabled or
   prefers-reduced-motion, only the first slide is shown.
   ========================================================================= */
.plm-home-hero {
  position: relative;
  width: 100%;
  /* v49 → v55.1 history:
     v45 set max-height: 480px to make the hero "more compact" — but
     combined with aspect-ratio: 1400/676 it cropped top+bottom on
     wide viewports.
     v49 removed max-height and added `max-width: 1400px; margin: 0 auto`
     to center the hero on ultra-wide screens. BUT the rule already
     had `margin: 0` later in its body, which silently overrode the
     `margin: 0 auto` — leaving max-width: 1400px in effect but
     left-aligned, producing a left-anchored hero with a black gutter
     on the right on viewports >1400px wide.
     v55.1 reverts to true full-bleed: width: 100%, no max-width.
     Aspect-ratio: 1400/676 still drives height proportionally, so on
     a 2000px viewport the hero is 2000×966. Matches the original site's
     behavior on wide displays. */
  aspect-ratio: 1400 / 676;
  min-height: 220px;                       /* safety floor on very narrow viewports */
  /* v56 — cap hero height to 60% of viewport height so the section
     below it (NEW RELEASES on /) is visible above the fold. At
     wide viewports the natural aspect-ratio height would be ~927px
     on 1920×1080 + 150px header = exceeds the fold. With max-height:
     60vh = 648px, total above-fold = 798px, leaving ~280px for the
     next section to peek through. Image is object-fit: cover, so
     wide viewports will crop top/bottom of the slide image —
     deliberate trade-off for the above-the-fold rule. */
  max-height: 60vh;
  margin: 0;
  padding: 0;
  background: #000;
  overflow: hidden;
  isolation: isolate;
}
.plm-home .plm-home-hero { margin-top: 0; }

.plm-home-hero__slides {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  inset: 0;
}
.plm-hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  pointer-events: none;
}
.plm-hero-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

/* Optional click-through wrapper — fills the slide. */
.plm-hero-slide__link {
  position: absolute;
  inset: 0;
  display: block;
}

/* The image IS the slide. Full-bleed, edge to edge. */
.plm-hero-slide__image {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Subtle top vignette so the gold header rule reads as a clean line over
   any bright slide. Bottom edge stays untouched so the slide flows into
   WHAT'S NEW without a hard seam. */
.plm-home-hero__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .35) 0, rgba(0, 0, 0, 0) 110px);
}

@media (prefers-reduced-motion: reduce) {
  .plm-hero-slide { transition: none; }
}


/* =========================================================================
   v39 — Listen (2-up Spotify embeds) + Discography (flip-on-hover cards)
   - Listen reads /content/listen.json and renders two Spotify playlist
     iframes side-by-side, matching the original Muse listen.html.
   - Discography reads /content/releases.json and renders flip cards:
     front face = album cover, back face = artist + title + LISTEN NOW.
     The flip is pure CSS (3D rotateY transform). On touch devices the
     flip is disabled and the card acts as a simple click-through.
   ========================================================================= */

/* ----- Page shells ----- */
.plm-listen,
.plm-discography {
  background: var(--plm-black);
  color: var(--plm-white);
  min-height: 620px;
}
.plm-listen-intro,
.plm-discography-intro {
  width: min(100%, 980px);
  margin: 0 auto;
  padding: 96px 24px 16px;
  text-align: center;
}
.plm-listen-intro .plm-page-title,
.plm-discography-intro .plm-page-title { margin-bottom: 0; }

/* =========================
   Listen — 2-up Spotify embeds
   ========================= */
.plm-listen-playlists {
  width: min(100%, 1180px);
  margin: 0 auto;
  padding: 56px 24px 120px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}
.plm-listen-playlist {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  /* The gold tone in the original Muse listen.html sits behind the
     Spotify embed. We layer a gold background here that bleeds through
     the iframe via a CSS filter applied below. */
  background: #5a4814;
}
.plm-listen-playlist__iframe {
  display: block;
  width: 100%;
  height: 800px;
  min-height: 600px;
  border: 0;
  border-radius: 12px;
  background: #181818;
  /* Approximate the original's gold-olive tint. Spotify's embed offers
     only theme=0 (dark) and theme=1 (light) — neither is gold — so we
     CSS-filter the iframe contents toward the Porchlight gold while
     keeping white text legible. The values were tuned by eye against
     the original screenshot; tweak `sepia` / `saturate` / `hue-rotate`
     to taste without touching the structural CSS. */
  filter: sepia(0.9) saturate(1.6) hue-rotate(355deg) brightness(0.92);
}

@media (max-width: 880px) {
  .plm-listen-playlists {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 40px 20px 96px;
  }
  .plm-listen-playlist__iframe { height: 720px; }
}
@media (max-width: 480px) {
  .plm-listen-playlist__iframe { height: 600px; min-height: 520px; }
}

/* =========================
   Discography — flip cards
   ========================= */
/* v45 — Issue 11: discography tiles were larger and gaps tighter than
   the original. Narrowed the container so the 3 cards-per-row land at a
   smaller width, widened the gap, and added top + bottom section padding
   for more breathing room. */
.plm-discography-grid-wrap {
  width: min(100%, 1100px);                /* was 1240 — narrower → smaller tiles */
  margin: 0 auto;
  padding: 72px 24px 160px;                /* was 32/24/120 — more vertical air */
}
.plm-discography-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  /* v49 — switched from CSS grid (repeat(3, minmax(0, 1fr))) to
     flexbox with justify-content: center so the final orphan card
     centers under the row above instead of left-aligning into col 1.
     19 releases / 3-up = 6 rows + 1 orphan; previously the orphan
     locked to column 1 because each grid cell was a defined 1fr.
     Same fix v45 applied to .plm-creators-grid. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 80px 60px;
}

/* Defensive specificity: scope every flip-card rule to .plm-discography
   so even if a stale Muse CSS file or a cached prior-version rule with
   the same selector is in the cascade, ours wins on specificity. */
.plm-discography .plm-release-card {
  /* v49 — was width: 100% (sized via grid 1fr cells). Now fixed
     flex-basis so the flex container can center the final orphan
     row. 310px fits 3-up cleanly at the 1100px container width with
     60px column gap: (1100 - 48 padding) - 2*60 gap = 932 / 3 ≈ 310. */
  flex: 0 0 310px;
  max-width: 310px;
  perspective: 1200px;
  perspective-origin: 50% 50%;            /* explicit center → flip pivots
                                             through the card's middle */
  display: block !important;              /* override v38 flex layout if cached */
  margin: 0 !important;
}
.plm-discography .plm-release-card__inner {
  position: relative !important;
  width: 100%;
  aspect-ratio: 1 / 1;
  transform-style: preserve-3d !important;
  -webkit-transform-style: preserve-3d !important;
  transform-origin: 50% 50%;              /* rotation axis through the
                                             card center, not an edge */
  transition: transform .65s cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}
/* v45 — Issue 8: rotation direction was clockwise on the original Muse
   build; v39 implemented it counterclockwise. Inverting the sign on both
   the hover rotation AND the resting position of the back face flips
   the spin to match. */
.plm-discography .plm-release-card:hover .plm-release-card__inner,
.plm-discography .plm-release-card:focus-within .plm-release-card__inner {
  transform: rotateY(-180deg) !important;
  -webkit-transform: rotateY(-180deg) !important;
}

/* v45 — Issue 8: explicit text-decoration / font-style overrides across
   every link state. The Muse base CSS's `a:link { text-decoration: underline }`
   was bleeding through earlier because pseudo-class selectors have higher
   specificity than a bare class. Same pattern v43.3 used on
   .plm-home-release__link. */
.plm-discography .plm-release-card__face,
.plm-discography .plm-release-card__face:link,
.plm-discography .plm-release-card__face:visited,
.plm-discography .plm-release-card__face:hover,
.plm-discography .plm-release-card__face:focus,
.plm-discography .plm-release-card__face:active {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform-origin: 50% 50%;              /* both faces pivot through center */
  text-decoration: none !important;
  font-style: normal !important;
  color: inherit;
  border-radius: 4px;
  overflow: hidden;
}

/* Front: album cover only. */
.plm-discography .plm-release-card__front {
  background: #111;
}
.plm-discography .plm-release-card__cover {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  margin-top: 0 !important;
}
.plm-release-card__cover-fallback {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  background: #1a1a1a;
  color: var(--plm-grey);
  font-family: var(--plm-font-title);
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Back: artist + title + LISTEN NOW button, centered.
   v45: matches the v45 rotation-sign flip on the hover transform — the
   back face's resting position is now rotateY(-180deg) so the spin
   direction visibly matches the original site (clockwise from viewer).
   v49 — the back face is rendered as <a> when the release has a link;
   that makes .plm-discography .plm-release-card__face:link (0,3,0)
   beat .plm-discography .plm-release-card__back (0,2,0) on
   specificity, forcing display: block over our display: flex. Result:
   the artist/title text top-justifies instead of vertically centering.
   Fix: extend this rule with the link-state pseudo-classes so the
   specificity matches and our flex rules win. Same pattern v45 used
   on the __face rule itself. */
.plm-discography .plm-release-card__back,
.plm-discography .plm-release-card__back:link,
.plm-discography .plm-release-card__back:visited,
.plm-discography .plm-release-card__back:hover,
.plm-discography .plm-release-card__back:focus,
.plm-discography .plm-release-card__back:active {
  transform: rotateY(-180deg) !important;
  -webkit-transform: rotateY(-180deg) !important;
  background: #0e0e0e !important;
  border: 1px solid rgba(227, 167, 47, .35) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  text-align: center !important;
}
.plm-release-card__back-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}
.plm-release-card__artist {
  color: #ffffff;
  font-family: var(--plm-font-body);
  font-style: normal;                     /* v45 — was italic */
  font-size: 17px;
  line-height: 1.3;
}
.plm-release-card__title {
  color: #ffffff;
  font-family: var(--plm-font-body);
  font-style: normal;                     /* v45 — was italic */
  font-size: 15px;
  line-height: 1.4;
}
.plm-release-card__cta {
  display: inline-block;
  margin-top: 22px;
  padding: 10px 22px;
  border: 1px solid #ffffff;
  color: #ffffff;
  background: transparent;
  font-family: var(--plm-font-title);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  transition: background .2s ease, color .2s ease;
}
.plm-release-card__back:hover .plm-release-card__cta,
.plm-release-card__back:focus .plm-release-card__cta {
  background: #ffffff;
  color: #0e0e0e;
}

/* Touch devices: disable the flip and let the cover act as a simple
   click-through to Spotify. The back face is hidden so a tap doesn't
   trigger the rotated face. */
@media (hover: none) {
  .plm-release-card__inner {
    transform: none !important;
    transition: none;
  }
  .plm-release-card__back {
    display: none;
  }
}

/* Responsive — discography grid. v45 scaled gaps to match the new
   80/60 desktop values; previously these dropped too aggressively.
   v49 — flexbox replaces CSS grid (orphan-centering fix); card
   flex-basis scales proportionally so the row still fits N-up. */
@media (max-width: 980px) {
  .plm-discography-grid { gap: 56px 36px; }
  .plm-discography .plm-release-card { flex: 0 0 285px; max-width: 285px; }
  .plm-discography-grid-wrap { padding: 56px 24px 120px; }
}
@media (max-width: 720px) {
  .plm-discography-grid { gap: 40px 22px; }
  .plm-discography .plm-release-card { flex: 0 0 290px; max-width: 290px; }
  .plm-discography-grid-wrap { padding: 48px 20px 96px; }
  .plm-discography-intro { padding-top: 72px; }
  .plm-release-card__artist { font-size: 15px; }
  .plm-release-card__title { font-size: 13px; }
  .plm-release-card__cta { margin-top: 14px; padding: 8px 18px; font-size: 11px; }
}
@media (max-width: 420px) {
  .plm-discography .plm-release-card { flex: 0 0 260px; max-width: 260px; }
}
@media (max-width: 420px) {
  .plm-release-card__back { padding: 14px; }
}

/* v46 — WHAT'S NEW inline YouTube player.
   When the visitor clicks a featured-video thumbnail, the carousel
   slide's contents are replaced in place with a YouTube iframe set to
   autoplay. The slide is already a 16:9 box (see .plm-home-whatsnew__slides),
   so the iframe fills it perfectly — same footprint as the thumbnail
   it replaced, no layout shift, no overlay. plm-home-whatsnew-inline.js
   handles the swap; the original <a href> stays in markup as a no-JS
   fallback. */
.plm-whatsnew-slide__player {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

/* ============================================================
   v51 — authoritative mobile menu + sticky header

   The earlier mobile-menu rules (v15 / v17 / v18 / v20 / v21 / v22 /
   v25 / v26 / v48) have accumulated 20+ rules targeting the same
   .plm-header.plm-nav-open .plm-nav selector. The cascade order
   should resolve to the latest in source order, but the layered
   history makes the effective values fragile — small changes in
   one iteration can be silently overridden by another. This block
   sits at the end of the stylesheet and re-asserts the canonical
   mobile-menu values. Every property uses !important and the
   selector matches the predecessors' specificity, so source order
   guarantees it wins.

   Also: sticky header. The header was previously position: relative
   (scrolls away with the page). v51 pins it via position: sticky
   so the brand and nav stay visible as the visitor scrolls through
   long pages (creator profiles, discography, listen).
   ============================================================ */

/* --- Sticky header -----------------------------------------
   v55.2: the selector list now includes body.home.porchlight-clean
   because a v14 rule at line ~625 with that same specificity
   (0,3,1) forces position: relative on the home page. Without the
   home variant in this selector, my (0,2,1) rule loses on
   specificity and the home page header is NOT sticky while every
   other page IS. Matching specificity + later source order = wins. */
body.porchlight-clean .plm-header,
body.home.porchlight-clean .plm-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 90 !important;
}

/* --- Mobile menu: closed and open state, anchored to hamburger ---
   At ≤820px the nav is hidden by default; opens as an absolutely-
   positioned dropdown just below the hamburger. Width sized so the
   panel feels attached to the hamburger rather than centered.

   v55 — position properties moved from .plm-header .plm-nav (0,3,0)
   to .plm-header.plm-nav-open .plm-nav (0,4,0) so they beat the
   accumulated v22-era rules that share the (0,4,0) selector but
   were winning specificity battles against the older consolidation. */
@media (max-width: 820px) {
  body.porchlight-clean .plm-header:not(.plm-nav-open) .plm-nav {
    display: none !important;
  }

  body.porchlight-clean .plm-header.plm-nav-open .plm-nav {
    position: absolute !important;
    top: 70px !important;
    left: 16px !important;
    right: auto !important;
    bottom: auto !important;
    width: 220px !important;
    max-width: calc(100vw - 32px) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    background: rgba(20, 20, 20, 0.96) !important;
    border: 1px solid rgba(227, 167, 47, 0.35) !important;
    border-radius: 4px !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.7) !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 100 !important;
  }

  body.porchlight-clean .plm-header.plm-nav-open .plm-nav__link,
  body.porchlight-clean .plm-header.plm-nav-open .plm-nav__link:visited {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    padding: 14px 18px 12px !important;
    margin: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(227, 167, 47, 0.22) !important;
    color: #ffffff !important;
    font-size: 18px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-align: center !important;
    text-decoration: none !important;
  }

  body.porchlight-clean .plm-header.plm-nav-open .plm-nav__link:last-child,
  body.porchlight-clean .plm-header.plm-nav-open .plm-nav__link:last-child:visited {
    border-bottom: 0 !important;
  }

  body.porchlight-clean .plm-header.plm-nav-open .plm-nav__link:hover,
  body.porchlight-clean .plm-header.plm-nav-open .plm-nav__link.is-active {
    background: rgba(80, 80, 80, 0.95) !important;
    color: var(--plm-gold) !important;
  }
}

/* Tighter offsets on narrower phones (≤430px) so the dropdown
   doesn't push past the side of the screen at small widths.
   v55 — also moved to .plm-header.plm-nav-open .plm-nav (0,4,0) for
   the same specificity reasons as the 820px block above. */
@media (max-width: 430px) {
  body.porchlight-clean .plm-header.plm-nav-open .plm-nav {
    top: 60px !important;
    left: 12px !important;
    width: 200px !important;
    max-width: calc(100vw - 24px) !important;
  }
  body.porchlight-clean .plm-header.plm-nav-open .plm-nav__link,
  body.porchlight-clean .plm-header.plm-nav-open .plm-nav__link:visited {
    min-height: 42px !important;
    font-size: 16px !important;
    padding: 12px 14px 10px !important;
  }
}


/* ============================================================
   v56 — WPForms contact form styling.

   The client built the contact form in the WPForms plugin and
   placed its shortcode in Porchlight Settings → Contact → Form
   Shortcode. WPForms renders the form with its own default CSS;
   we layer theme-side rules on top of that so the form:
     1. Matches the dark-on-gold brand
     2. Puts Name + Email on the same row (~50% each) with the
        Message textarea full-width below — like the original
        porchlightmusic.com site, not the WPForms-default
        "everything stacked vertically full-width" layout.

   These rules target the standard WPForms class names
   (.wpforms-field, .wpforms-field-name, .wpforms-field-email,
   .wpforms-field-textarea). If the client adds extra fields, the
   default WPForms styling will apply to them; only Name + Email
   are explicitly width-controlled.
   ============================================================ */

/* Form container */
.plm-contact-form .wpforms-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0 28px;
}

/* Each field — labels above inputs, full-width by default. */
.plm-contact-form .wpforms-field {
  width: 100%;
  margin-bottom: 22px;
}

/* v56.9 — was: Name + Email at ~50% each side-by-side.
   Reverted to FULL-WIDTH stacked to match the original
   porchlightmusic.com/contact.html: each field on its own row,
   full container width, like the Message textarea. */
/* (intentionally empty — fields keep the .wpforms-field default
   width: 100% defined above. No half-width override.) */

/* Submit button row spans full width. */
.plm-contact-form .wpforms-submit-container {
  width: 100%;
}

/* Labels — bright text on dark bg, brand font. */
.plm-contact-form .wpforms-form label.wpforms-field-label {
  display: block;
  margin-bottom: 6px;
  color: var(--plm-white);
  font-family: var(--plm-font-title);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* v56.9 — Defeat WPForms' built-in field-size classes
   (wpforms-field-small, wpforms-field-medium, wpforms-field-large)
   so admin-side Field Size settings don't clip the inputs narrower
   than the form container. Forces every input + textarea inside
   the contact form to fill the container width. */
.plm-contact-form .wpforms-form .wpforms-field-small,
.plm-contact-form .wpforms-form .wpforms-field-medium,
.plm-contact-form .wpforms-form .wpforms-field-large,
.plm-contact-form .wpforms-form input,
.plm-contact-form .wpforms-form textarea {
  width: 100% !important;
  max-width: 100% !important;
}

/* v56.11 — WPForms also wraps the entire form in its own
   .wpforms-container div (and sometimes a .wpforms-container-full
   variant). That outer wrapper has WPForms' own default max-width
   AND can be set by the WPForms admin's "Form Width" setting. Force
   every WPForms wrapper inside our .plm-contact-form to fill the
   1200px container width — otherwise the form ends up narrower
   than its parent and visually offset/left-aligned. */
.plm-contact-form .wpforms-container,
.plm-contact-form .wpforms-container-full,
.plm-contact-form div[class*="wpforms-container"],
.plm-contact-form .wpforms-form,
.plm-contact-form .wpforms-field-container {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Inputs + textarea — dark-themed, gold accent on focus. */
.plm-contact-form .wpforms-form input[type="text"],
.plm-contact-form .wpforms-form input[type="email"],
.plm-contact-form .wpforms-form input[type="url"],
.plm-contact-form .wpforms-form input[type="tel"],
.plm-contact-form .wpforms-form textarea {
  width: 100%;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(227, 167, 47, 0.35);
  border-radius: 2px;
  color: #1a1a1a;
  font-family: var(--plm-font-body);
  font-size: 16px;
  line-height: 1.4;
  box-shadow: none;
}

.plm-contact-form .wpforms-form textarea {
  min-height: 180px;
  resize: vertical;
}

.plm-contact-form .wpforms-form input[type="text"]:focus,
.plm-contact-form .wpforms-form input[type="email"]:focus,
.plm-contact-form .wpforms-form input[type="url"]:focus,
.plm-contact-form .wpforms-form input[type="tel"]:focus,
.plm-contact-form .wpforms-form textarea:focus {
  outline: none;
  border-color: var(--plm-gold);
  box-shadow: 0 0 0 2px rgba(227, 167, 47, 0.18);
}

/* Submit button — match the brand's gold pill button used elsewhere. */
.plm-contact-form .wpforms-form .wpforms-submit {
  display: inline-block;
  padding: 12px 32px;
  background: var(--plm-gold);
  border: 0;
  border-radius: 2px;
  color: var(--plm-black);
  font-family: var(--plm-font-title);
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease;
}
.plm-contact-form .wpforms-form .wpforms-submit:hover,
.plm-contact-form .wpforms-form .wpforms-submit:focus {
  background: var(--plm-gold-soft);
}

/* Error states — keep WPForms' red but adjust to read on dark bg. */
.plm-contact-form .wpforms-form .wpforms-error {
  color: #ff8a8a;
  font-size: 13px;
  margin-top: 6px;
}

/* Required-field asterisk — bright gold so it reads. */
.plm-contact-form .wpforms-form .wpforms-required-label {
  color: var(--plm-gold);
  margin-left: 2px;
}

/* v56.9 — was a 620px breakpoint that collapsed Name + Email back
   to full-width when the v56 half-width side-by-side layout was
   active. Fields are always full-width now, so this breakpoint
   is unnecessary. */